diff --git a/.github/workflows/maven.yml b/.github/workflows/maven.yml
new file mode 100644
index 000000000..e487b6f97
--- /dev/null
+++ b/.github/workflows/maven.yml
@@ -0,0 +1,24 @@
+# This workflow will build a Java project with Maven
+# For more information see: https://help.github.com/actions/language-and-framework-guides/building-and-testing-java-with-maven
+
+name: Java CI with Maven
+
+on:
+  push:
+    branches: [ master ]
+  pull_request:
+    branches: [ master ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Set up JDK 17
+      uses: actions/setup-java@v1
+      with:
+        java-version: 17
+    - name: Build with Maven
+      run: mvn -B package --file pom.xml
diff --git a/.gitignore b/.gitignore
index afda8a438..7c0e47ceb 100644
--- a/.gitignore
+++ b/.gitignore
@@ -99,9 +99,10 @@ Temporary Items
 
 
 ### Teamapps custom ignore
-server-data/
+server-data*/
 tmp/
 */LICENSE.txt
+/.vscode
 
 
 ### JavaScript stuff
@@ -109,9 +110,11 @@ yarn-error.log
 teamapps-client/node/
 teamapps-client/node_modules/
 teamapps-client/npm-debug.log
-teamapps-client/ts/**/*.js
+#teamapps-client/ts/**/*.js
+teamapps-client/ts/**/*.map
 teamapps-client/ts/generated/
 teamapps-client/dist/
+teamapps-client/stats.json
 
 ### MicrosoftOffice template
 *.tmp
@@ -122,3 +125,6 @@ teamapps-client/dist/
 # Excel Backup File
 *.xlk
 
+# All ai agent stuff
+AGENTS.md
+agent/
\ No newline at end of file
diff --git a/.mvn/extensions-x.xml b/.mvn/extensions-x.xml
new file mode 100644
index 000000000..62fd02dfb
--- /dev/null
+++ b/.mvn/extensions-x.xml
@@ -0,0 +1,7 @@
+<extensions>
+    <extension>
+        <groupId>com.gradle</groupId>
+        <artifactId>gradle-enterprise-maven-extension</artifactId>
+        <version>1.1.2</version>
+    </extension>
+</extensions>
\ No newline at end of file
diff --git a/README.md b/README.md
index ff401c7a0..8b40d01d2 100644
--- a/README.md
+++ b/README.md
@@ -32,48 +32,98 @@ To start a ready to run server with TeamApps included use:
 
 ## Quick start
 
-In this example we create a responsive application with a single perspective, a few empty panels and a toolbar.
-Please use the `teamapps-server-jetty-embedded` dependency to run this example.
+### Hello World
+         
+This will start a server on port 8080, so you should see the result under http://localhost:8080 
 
 ```java
-public static void main(String[] args) throws Exception {
-    WebController controller = SimpleWebController.createDefaultController(context -> {
-        //create a responsive application that will run on desktops as well as on smart phones
-        ResponsiveApplication application = ResponsiveApplication.createApplication();
-
-        //create perspective with default layout
-        Perspective perspective = Perspective.createPerspective();
-        application.addPerspective(perspective);
-
-        //create an empty left panel
-        perspective.addView(View.createView(StandardLayout.LEFT, MaterialIcon.MESSAGE, "Left panel", null));
-
-        //create a tabbed center panel
-        perspective.addView(View.createView(StandardLayout.CENTER, MaterialIcon.SEARCH, "Center panel", null));
-        perspective.addView(View.createView(StandardLayout.CENTER, MaterialIcon.PEOPLE, "Center panel 2", null));
+import org.teamapps.icon.material.MaterialIcon;
+import org.teamapps.server.jetty.embedded.TeamAppsJettyEmbeddedServer;
+import org.teamapps.ux.component.field.Button;
+import org.teamapps.ux.component.rootpanel.RootPanel;
+
+public class HelloWorld {
+
+    public static void main(String[] args) throws Exception {
+        new TeamAppsJettyEmbeddedServer(sessionContext -> {
+            RootPanel rootPanel = sessionContext.addRootPanel();
+            Button<?> button = Button.create(MaterialIcon.INFO, "Click me!");
+            button.onClicked.addListener(() -> {
+                sessionContext.showNotification(MaterialIcon.CHAT, "Hello World!", "Congrats for your first TeamApps program!");
+            });
+            rootPanel.setContent(button);
+        }, 8080).start();
+    }
 
-        //create a right panel
-        perspective.addView(View.createView(StandardLayout.RIGHT, MaterialIcon.FOLDER, "Left panel", null));
-
-        //create a right bottom panel
-        perspective.addView(View.createView(StandardLayout.RIGHT_BOTTOM, MaterialIcon.VIEW_CAROUSEL, "Left bottom panel", null));
-
-        //create toolbar buttons
-        ToolbarButtonGroup buttonGroup = new ToolbarButtonGroup();
-        buttonGroup.addButton(ToolbarButton.create(MaterialIcon.SAVE, "Save", "Save changes")).onClick.addListener(toolbarButtonClickEvent -> {
-            CurrentSessionContext.get().showNotification(MaterialIcon.MESSAGE, "Save was clicked!");
-        });
-        buttonGroup.addButton(ToolbarButton.create(MaterialIcon.DELETE, "Delete", "Delete some items"));
-
-        //display these buttons only when this perspective is visible
-        perspective.addWorkspaceButtonGroup(buttonGroup);
+}
+```
 
+### Application Layout
 
-        application.showPerspective(perspective);
-        return application.createUi();
-    }, Color.MATERIAL_GREY_300, true);
+In this example we create a responsive application with a single perspective, a few empty panels and a toolbar.
+Add the `teamapps-server-jetty-embedded` dependency to run this example.
 
-    new TeamAppsJettyEmbeddedServer(controller, Files.createTempDir()).start();
+```java
+import org.teamapps.icon.material.MaterialIcon;
+import org.teamapps.server.jetty.embedded.TeamAppsJettyEmbeddedServer;
+import org.teamapps.ux.application.ResponsiveApplication;
+import org.teamapps.ux.application.layout.StandardLayout;
+import org.teamapps.ux.application.perspective.Perspective;
+import org.teamapps.ux.application.view.View;
+import org.teamapps.ux.component.rootpanel.RootPanel;
+import org.teamapps.ux.component.toolbar.ToolbarButton;
+import org.teamapps.ux.component.toolbar.ToolbarButtonGroup;
+import org.teamapps.ux.session.CurrentSessionContext;
+import org.teamapps.webcontroller.WebController;
+
+public class TeamAppsDemo {
+
+    public static void main(String[] args) throws Exception {
+        WebController controller = sessionContext -> {
+            RootPanel rootPanel = new RootPanel();
+            sessionContext.addRootPanel(null, rootPanel);
+
+            //create a responsive application that will run on desktops as well as on smart phones
+            ResponsiveApplication application = ResponsiveApplication.createApplication();
+
+            //create perspective with default layout
+            Perspective perspective = Perspective.createPerspective();
+            application.addPerspective(perspective);
+
+            //create an empty left panel
+            perspective.addView(View.createView(StandardLayout.LEFT, MaterialIcon.MESSAGE, "Left panel", null));
+
+            //create a tabbed center panel
+            perspective.addView(View.createView(StandardLayout.CENTER, MaterialIcon.SEARCH, "Center panel", null));
+            perspective.addView(View.createView(StandardLayout.CENTER, MaterialIcon.PEOPLE, "Center panel 2", null));
+
+            //create a right panel
+            perspective.addView(View.createView(StandardLayout.RIGHT, MaterialIcon.FOLDER, "Left panel", null));
+
+            //create a right bottom panel
+            perspective.addView(View.createView(StandardLayout.RIGHT_BOTTOM, MaterialIcon.VIEW_CAROUSEL, "Left bottom panel", null));
+
+            //create toolbar buttons
+            ToolbarButtonGroup buttonGroup = new ToolbarButtonGroup();
+            buttonGroup.addButton(ToolbarButton.create(MaterialIcon.SAVE, "Save", "Save changes")).onClick.addListener(toolbarButtonClickEvent -> {
+                sessionContext.showNotification(MaterialIcon.MESSAGE, "Save was clicked!");
+            });
+            buttonGroup.addButton(ToolbarButton.create(MaterialIcon.DELETE, "Delete", "Delete some items"));
+
+            //display these buttons only when this perspective is visible
+            perspective.addWorkspaceButtonGroup(buttonGroup);
+
+            application.showPerspective(perspective);
+            rootPanel.setContent(application.getUi());
+
+            // set Background Image
+            String defaultBackground = "/resources/backgrounds/default-bl.jpg";
+            sessionContext.registerBackgroundImage("default", defaultBackground, defaultBackground);
+            sessionContext.setBackgroundImage("default", 0);
+        };
+
+        new TeamAppsJettyEmbeddedServer(controller, 8080).start();
+    }
 }
 ```
 The result should look something like this:
@@ -82,3 +132,13 @@ The result should look something like this:
 ## License
 
 The TeamApps Framework is released under version 2.0 of the [Apache License](https://www.apache.org/licenses/LICENSE-2.0).
+
+## Supported By
+
+<a href="https://www.ej-technologies.com/products/jprofiler/overview.html">JProfiler</a>
+
+<a href="https://www.ej-technologies.com/products/jprofiler/overview.html"><img src="https://www.ej-technologies.com/images/product_banners/jprofiler_large.png"></a>
+
+<a href="https://www.yourkit.com/java/profiler/">YourKit</a>
+  
+<a href="https://www.yourkit.com/java/profiler/"><img src="https://www.yourkit.com/images/yklogo.png"></a> 
diff --git a/docs/bjesuiter/PdfViewerComponent_docs.md b/docs/bjesuiter/PdfViewerComponent_docs.md
new file mode 100644
index 000000000..6566c9fac
--- /dev/null
+++ b/docs/bjesuiter/PdfViewerComponent_docs.md
@@ -0,0 +1,278 @@
+# PdfViewerComponent Implementation
+
+## Parts 
+
+DTO: `/teamapps-ui-api/src/main/dto/UiPdfViewer.dto`
+
+Java Impl: `teamapps-ux/src/main/java/org/teamapps/ux/component/pdfviewer`
+
+Typescript Impl: `teamapps-client/ts/modules`
+
+Testfile (for anybody working in this repo): 
+`teamapps-server-jetty-embedded/src/test/java/org/teamapps/server/jetty/embedded/TeamAppsJettyEmbeddedServerTest.java`
+
+## Current Test Harness
+
+Do not copy a static code block from this document. Use the current source of truth:
+`teamapps-server-jetty-embedded/src/test/java/org/teamapps/server/jetty/embedded/TeamAppsJettyEmbeddedServerTest.java`.
+
+Current setup uses `UiPdfViwerTestHarness` mounted in the root panel.
+
+## Run the Test environment 
+
+Preparation: 
+- Regenerate DTO artifacts first:
+  - `mvn clean install -pl teamapps-ui-api -am`
+- Build/install the frontend module:
+  - `cd teamapps-client && mvn clean install`
+
+1. Run the Testfile (`teamapps-server-jetty-embedded/src/test/java/org/teamapps/server/jetty/embedded/TeamAppsJettyEmbeddedServerTest.java`) via IntelliJ (Green Arrow in UI)
+2. Start the dev environment script (frontend dev server): `docs/bjesuiter/start_pdf_dev_env.sh`
+3. Goto http://localhost:9000 to see/debug the component
+
+## Instructions for agents
+
+- Use http://localhost:9000/ to access the dev server.
+- Restore a "blank slate" for testing by reloading the page.
+- The buttons in class `toolbar-button-group` are controlled by the server, written in `teamapps-server-jetty-embedded/src/test/java/org/teamapps/server/jetty/embedded/TeamAppsJettyEmbeddedServerTest.java`.
+- The buttons in class `dev-toolbar` are inside the component in `teamapps-client/ts/modules/UiPdfViewer.ts`.
+- Do not control the Jetty server. Leave it to the human and IntelliJ IDEA.
+- If you change something in the PDF test harness, notify the human to restart Jetty.
+- Do not touch untracked files. Never commit them without approval. Only commit already tracked files without approval.
+- When committing, use prefix: UiPdfViewer:
+
+### Workflow: Adding a new event
+
+When adding a new `UiPdfViewer` event, follow this exact order:
+
+1. Update the `.dto` file.
+2. Run `mvn clean install` in the repo root.
+3. Update the corresponding `.java` file.
+4. Update the corresponding `.ts` file.
+5. Restart the dev server via `docs/bjesuiter/start_pdf_dev_env.sh`.
+
+### Start/Restart Jetty Test Server (Human-only CLI reference)
+
+Jetty is intended to be started and restarted by the human via IntelliJ run config:
+- **Main class:** `org.teamapps.server.jetty.embedded.TeamAppsJettyEmbeddedServerTest`
+- **Module classpath:** `teamapps-server-jetty-embedded`
+- **JDK:** 21
+- **Working dir:** repo root
+
+If you change the PDF test harness, tell the human to restart Jetty in IntelliJ.
+
+### Start Frontend Dev Server (CLI, bgproc)
+
+Script details:
+- **Wrapper script path:** `docs/bjesuiter/start_pdf_dev_env.sh`
+- **Underlying dev script path:** `teamapps-client/start-dev-server.sh`
+- **Note:** Frontend dev server runs on port `9000` and connects to app server port `8082`.
+
+**Start (background, via script):**
+```bash
+docs/bjesuiter/start_pdf_dev_env.sh
+```
+
+**Status:**
+```bash
+bgproc status -n teamapps-frontend
+```
+
+**Logs:**
+```bash
+bgproc logs -n teamapps-frontend
+```
+
+**Stop:**
+```bash
+bgproc stop -n teamapps-frontend
+```
+
+## Post-Merge Regeneration Flow (Complete)
+
+Use this exact flow after merging `master` into a feature branch, especially when merge conflicts touched `teamapps-client/package.json`, `teamapps-client/yarn.lock`, or anything under `teamapps-ui-api/src/main/dto`.
+
+1. Confirm merge conflicts are resolved and staged.
+2. Regenerate DTO outputs first (this is critical):
+```bash
+mvn clean install -pl teamapps-ui-api -am
+```
+This builds required upstream modules (`teamapps-ui-dsl`) and regenerates:
+- Java DTOs in `teamapps-ui-api/target/generated-sources/dto`
+- TypeScript DTO configs in `teamapps-client/ts/generated` (gitignored, local build artifacts)
+
+3. Rebuild the client module:
+```bash
+cd teamapps-client
+yarn install
+mvn clean install
+```
+
+4. Verify merge/build state:
+- No `UU` files in `git status --short`
+- No `.git/MERGE_HEAD` file (merge concluded)
+- `teamapps-client` Maven build ends with `BUILD SUCCESS`
+
+### Troubleshooting
+
+- If you see errors like:
+  - `TS2307: Cannot find module '../generated/...`
+  - `Property '...' does not exist on type 'UiMap2Config'` or `UiTreeConfig`
+  this means `teamapps-client/ts/generated` is stale. Re-run step 2.
+
+- `mvn clean install` inside `teamapps-client` runs `yarn sync-pom-version` and may update `teamapps-client/package.json` version. If this change is not intended for the commit, restore it:
+```bash
+git restore teamapps-client/package.json
+```
+
+## Continuous Virtual Mode (Evergreen)
+
+### Implementation anchors
+
+- DTO enum: `teamapps-ui-api/src/main/dto/UiPdfViewer.dto` (`UiPdfViewMode.CONTINUOUS_VIRTUAL`).
+- Main component: `teamapps-client/ts/modules/UiPdfViewer.ts`.
+- Virtual renderer: `teamapps-client/ts/modules/pdf-viewer/ContinuousVirtualRenderer.ts`.
+- Dependency: `@tanstack/virtual-core`.
+
+### Runtime behavior
+
+- `CONTINUOUS_VIRTUAL` renders only visible/nearby pages instead of rendering every page canvas at once.
+- Scroll container is `this.$canvasContainer`; virtual content is rendered into an inner positioned container (`$virtualInner`) with total height `virtualizer.getTotalSize()`.
+- Virtual items are positioned via `translateY(virtualItem.start)`.
+- `pageSpacing` is applied in continuous layouts and in virtual gap calculation.
+- Overscan is currently fixed in code (`virtualOverscan = 2`), not DTO-configurable.
+
+### Sizing and rendering model
+
+- Initial page height estimate is derived from page 1 at current zoom.
+- After page render, measured heights are cached (`virtualMeasuredPageHeights`) to improve placement for mixed-size documents.
+- HiDPI rendering is handled by scaling canvas dimensions with `window.devicePixelRatio`.
+- In-flight page render tasks are tracked per page and canceled when stale.
+
+### Concurrency and stale-work guards
+
+- `renderRequestId` is used to ignore stale async render results after mode/zoom/view changes.
+- `documentLoadRequestId` is used to ensure only the latest `setUrl()` request can mutate state and emit load events.
+- Virtual lifecycle is reset on relevant transitions (`teardown` / `markForRecreate`).
+
+### showPage behavior in virtual mode
+
+- In `CONTINUOUS_VIRTUAL`, `showPage(page)` scrolls to the target page index through the virtual renderer.
+- If virtual mode is not initialized yet, `renderPdfDocument()` runs first.
+- If called before a document is loaded, page requests are buffered in `pendingShowPageNumber`.
+
+## Specification
+
+### Public Interface (Java API)
+
+#### Constructors
+| Constructor | Description |
+|-------------|-------------|
+| `PdfViewer()` | Creates an empty PDF viewer |
+| `PdfViewer(String url)` | Creates a PDF viewer with the given PDF URL |
+
+#### Properties (Getters/Setters)
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `url` | `String` | `null` | URL of the PDF document to display |
+| `showDevTools` | `boolean` | `false` | Shows a development toolbar with page navigation and zoom controls |
+| `viewMode` | `UiPdfViewMode` | `null` | How pages are displayed (SINGLE_PAGE, CONTINUOUS, CONTINUOUS_VIRTUAL) |
+| `zoomMode` | `UiPdfZoomMode` | `TO_WIDTH` | How zoom is calculated (TO_HEIGHT, TO_WIDTH, MANUAL) |
+| `zoomFactor` | `float` | `1.0` | Manual zoom factor (only works when zoomMode is MANUAL) |
+| `padding` | `int` | `0` | Padding around the PDF canvas in pixels |
+| `pageSpacing` | `int` | `5` | Spacing between pages in continuous modes |
+| `backgroundColor` | `String` | `null` | CSS color for the canvas container background |
+| `borderColor` | `String` | `null` | CSS color for the canvas container border |
+| `pageBorder` | `UiBorder` | `null` | Border configuration for PDF pages |
+
+#### Events
+
+| Event | Payload | Description |
+|-------|---------|-------------|
+| `onPdfInitialized` | `PdfInitializedEvent` (contains `numberOfPages`) | Fired when PDF document is loaded and first page is rendered |
+| `onZoomFactorAutoChanged` | `ZoomFactorAutoChangedEvent` (contains `zoomFactor`) | Fired when zoom factor is auto-calculated by TO_WIDTH or TO_HEIGHT modes |
+| `onPdfLoadFailed` | `PdfLoadFailedEvent` (contains `url`, `errorMessage`) | Fired when loading a PDF URL fails in the client |
+
+### Runtime Behavior Notes
+
+- `setUrl(String url)` is **not** a one-time initializer. It may be called multiple times during a component lifetime.
+- Each `setUrl(...)` call replaces the currently displayed document and starts a new async load/render cycle.
+- `onPdfInitialized` is fired after each successful `setUrl(...)` load/render cycle, with the page count of the newly loaded document.
+
+#### Enums
+
+**UiPdfViewMode:**
+| Value | Description |
+|-------|-------------|
+| `SINGLE_PAGE` | Display one page at a time |
+| `CONTINUOUS` | Display all pages in a scrollable view |
+| `CONTINUOUS_VIRTUAL` | Virtualized continuous rendering mode for large documents |
+
+**UiPdfZoomMode:**
+| Value | Description |
+|-------|-------------|
+| `TO_HEIGHT` | Auto-scale PDF page to fit container height |
+| `TO_WIDTH` | Auto-scale PDF page to fit container width |
+| `MANUAL` | Use the `zoomFactor` property for scaling |
+
+### Implementation Status
+
+#### ✅ Fully Implemented Features
+
+| Feature | DTO | Java | TypeScript | Notes |
+|---------|-----|------|------------|-------|
+| `setUrl` | ✅ | ✅ | ✅ | Load PDF from URL |
+| `setShowDevTools` | ✅ | ✅ | ✅ | Toggle dev toolbar |
+| `setViewMode` | ✅ | ✅ | ✅ | Supports SINGLE_PAGE, CONTINUOUS, CONTINUOUS_VIRTUAL |
+| `setZoomFactor` | ✅ | ✅ | ✅ | Manual zoom control |
+| `setZoomMode` | ✅ | ✅ | ✅ | Auto-zoom modes |
+| `setPadding` | ✅ | ✅ | ✅ | Canvas container padding |
+| `setPageSpacing` | ✅ | ✅ | ✅ | For CONTINUOUS mode |
+| `setBackgroundColor` | ✅ | ✅ | ✅ | Container background |
+| `setBorderColor` | ✅ | ✅ | ✅ | Container border |
+| `setPageBorder` | ✅ | ✅ | ✅ | Page border config |
+| `pdfInitialized` event | ✅ | ✅ | ✅ | PDF load notification |
+| `zoomFactorAutoChanged` event | ✅ | ✅ | ✅ | Auto-zoom notification |
+
+#### ⚠️ Partially Implemented / Missing Features
+
+| Feature | DTO | Java | TypeScript | Issue |
+|---------|-----|------|------------|-------|
+| `pageShadow` | ❌ | ✅ | ❌ | Property exists in Java but not in DTO or TypeScript |
+
+### Usage Example
+
+```java
+// Create PDF viewer
+String testPdfLink = sessionContext.createResourceLink(
+    new ClassPathResource("test.pdf", "application/pdf")
+);
+PdfViewer pdfViewer = new PdfViewer();
+
+// Configure appearance
+pdfViewer.setPadding(10);
+pdfViewer.setShowDevTools(true);
+pdfViewer.setZoomMode(UiPdfZoomMode.TO_HEIGHT);
+pdfViewer.setBackgroundColor("oklch(0.74 0.1 218.65)");
+pdfViewer.setBorderColor("#ff0000");
+
+// Load PDF (can be done later, e.g., on button click)
+pdfViewer.setUrl(testPdfLink);
+
+// Listen for events
+pdfViewer.onPdfInitialized.addListener((initEvent) -> {
+    System.out.println("PDF loaded, pages: " + initEvent.getNumberOfPages());
+});
+
+pdfViewer.onZoomFactorAutoChanged.addListener((zoomEvent) -> {
+    System.out.println("Zoom factor changed: " + zoomEvent.getZoomFactor());
+});
+
+// Add to panel
+panel.setContent(pdfViewer);
+```
+
+## Todos
+
+- **Add `pageShadow` to DTO** - property exists in Java but not exposed
diff --git a/docs/bjesuiter/PlaygroundComponent_docs.md b/docs/bjesuiter/PlaygroundComponent_docs.md
new file mode 100644
index 000000000..d85ab99b8
--- /dev/null
+++ b/docs/bjesuiter/PlaygroundComponent_docs.md
@@ -0,0 +1,20 @@
+# UiPlayground Component
+
+---
+
+# Repo Log 
+
+## 2025-05-21 Ui Playground Component anlegen 
+
+1. Write `UiPlayground.dto` in `teamapps-ui-api` project 
+   1. Run `clean + install` for `teamapps-ui-api` project
+
+2. Create new java class `teamapps-ux/src/main/java/org/teamapps/ux/component/playground/Playground.java`
+
+3. Create new ts class `teamapps-client/ts/modules/UiPlayground.ts`
+
+4. Open `teamapps-client/ts/modules/index.ts`
+   1. Add `export {UiPlayground} from "./UiPlayground";`
+
+=> Start Jetty & webpack dev server 
+=> current state: error! :(
\ No newline at end of file
diff --git a/docs/bjesuiter/continuous-virtual/tanstack-virtual.docs.md b/docs/bjesuiter/continuous-virtual/tanstack-virtual.docs.md
new file mode 100644
index 000000000..e0a211156
--- /dev/null
+++ b/docs/bjesuiter/continuous-virtual/tanstack-virtual.docs.md
@@ -0,0 +1,507 @@
+---
+title: Virtualizer
+---
+
+The `Virtualizer` class is the core of TanStack Virtual. Virtualizer instances are usually created for you by your framework adapter, but you do receive the virtualizer directly.
+
+```tsx
+export class Virtualizer<TScrollElement = unknown, TItemElement = unknown> {
+  constructor(options: VirtualizerOptions<TScrollElement, TItemElement>)
+}
+```
+
+## Required Options
+
+### `count`
+
+```tsx
+count: number
+```
+
+The total number of items to virtualize.
+
+### `getScrollElement`
+
+```tsx
+getScrollElement: () => TScrollElement
+```
+
+A function that returns the scrollable element for the virtualizer. It may return null if the element is not available yet.
+
+### `estimateSize`
+
+```tsx
+estimateSize: (index: number) => number
+```
+
+> 🧠 If you are dynamically measuring your elements, it's recommended to estimate the largest possible size (width/height, within comfort) of your items. This will ensure features like smooth-scrolling will have a better chance at working correctly.
+
+This function is passed the index of each item and should return the actual size (or estimated size if you will be dynamically measuring items with `virtualItem.measureElement`) for each item. This measurement should return either the width or height depending on the orientation of your virtualizer.
+
+## Optional Options
+
+### `enabled`
+
+```tsx
+enabled?: boolean
+```
+
+Set to `false` to disable scrollElement observers and reset the virtualizer's state
+
+### `debug`
+
+```tsx
+debug?: boolean
+```
+
+Set to `true` to enable debug logs
+
+### `initialRect`
+
+```tsx
+initialRect?: Rect
+```
+
+The initial `Rect` of the scrollElement. This is mostly useful if you need to run the virtualizer in an SSR environment, otherwise the initialRect will be calculated on mount by the `observeElementRect` implementation.
+
+### `onChange`
+
+```tsx
+onChange?: (instance: Virtualizer<TScrollElement, TItemElement>, sync: boolean) => void
+```
+
+A callback function that fires when the virtualizer's internal state changes. It's passed the virtualizer instance and the sync parameter.
+
+The sync parameter indicates whether scrolling is currently in progress. It is `true` when scrolling is ongoing, and `false` when scrolling has stopped or other actions (such as resizing) are being performed.
+
+### `overscan`
+
+```tsx
+overscan?: number
+```
+
+The number of items to render above and below the visible area. Increasing this number will increase the amount of time it takes to render the virtualizer, but might decrease the likelihood of seeing slow-rendering blank items at the top and bottom of the virtualizer when scrolling. The default value is `1`.
+
+### `horizontal`
+
+```tsx
+horizontal?: boolean
+```
+
+Set this to `true` if your virtualizer is oriented horizontally.
+
+### `paddingStart`
+
+```tsx
+paddingStart?: number
+```
+
+The padding to apply to the start of the virtualizer in pixels.
+
+### `paddingEnd`
+
+```tsx
+paddingEnd?: number
+```
+
+The padding to apply to the end of the virtualizer in pixels.
+
+### `scrollPaddingStart`
+
+```tsx
+scrollPaddingStart?: number
+```
+
+The padding to apply to the start of the virtualizer in pixels when scrolling to an element.
+
+### `scrollPaddingEnd`
+
+```tsx
+scrollPaddingEnd?: number
+```
+
+The padding to apply to the end of the virtualizer in pixels when scrolling to an element.
+
+### `initialOffset`
+
+```tsx
+initialOffset?: number | (() => number)
+```
+
+The position where the list is scrolled to on render. This is useful if you are rendering the virtualizer in a SSR environment or are conditionally rendering the virtualizer.
+
+### `getItemKey`
+
+```tsx
+getItemKey?: (index: number) => Key
+```
+
+This function is passed the index of each item and should return a unique key for that item. The default functionality of this function is to return the index of the item, but you should override this when possible to return a unique identifier for each item across the entire set.
+
+**Note:** The virtualizer automatically invalidates its measurement cache when measurement-affecting options change, ensuring `getTotalSize()` and other measurements return fresh values. While the virtualizer intelligently tracks which options actually affect measurements, it's still better to memoize `getItemKey` (e.g., using `useCallback` in React) to avoid unnecessary recalculations.
+
+### `rangeExtractor`
+
+```tsx
+rangeExtractor?: (range: Range) => number[]
+```
+
+This function receives visible range indexes and should return array of indexes to render. This is useful if you need to add or remove items from the virtualizer manually regardless of the visible range, eg. rendering sticky items, headers, footers, etc. The default range extractor implementation will return the visible range indexes and is exported as `defaultRangeExtractor`.
+
+### `scrollToFn`
+
+```tsx
+scrollToFn?: (
+  offset: number,
+  options: { adjustments?: number; behavior?: 'auto' | 'smooth' },
+  instance: Virtualizer<TScrollElement, TItemElement>,
+) => void
+```
+
+An optional function that (if provided) should implement the scrolling behavior for your scrollElement. It will be called with the following arguments:
+
+- An `offset` (in pixels) to scroll towards.
+- An object indicating whether there was a difference between the estimated size and actual size (`adjustments`) and/or whether scrolling was called with a smooth animation (`behaviour`).
+- The virtualizer instance itself.
+
+Note that built-in scroll implementations are exported as `elementScroll` and `windowScroll`, which are automatically configured by the framework adapter functions like `useVirtualizer` or `useWindowVirtualizer`.
+
+> ⚠️ Attempting to use smoothScroll with dynamically measured elements will not work.
+
+### `observeElementRect`
+
+```tsx
+observeElementRect: (
+  instance: Virtualizer<TScrollElement, TItemElement>,
+  cb: (rect: Rect) => void,
+) => void | (() => void)
+```
+
+An optional function that if provided is called when the scrollElement changes and should implement the initial measurement and continuous monitoring of the scrollElement's `Rect` (an object with `width` and `height`). It's called with the instance (which also gives you access to the scrollElement via `instance.scrollElement`. Built-in implementations are exported as `observeElementRect` and `observeWindowRect` which are automatically configured for you by your framework adapter's exported functions like `useVirtualizer` or `useWindowVirtualizer`.
+
+### `observeElementOffset`
+
+```tsx
+observeElementOffset: (
+    instance: Virtualizer<TScrollElement, TItemElement>,
+    cb: (offset: number) => void,
+  ) => void | (() => void)
+```
+
+An optional function that if provided is called when the scrollElement changes and should implement the initial measurement and continuous monitoring of the scrollElement's scroll offset (a number). It's called with the instance (which also gives you access to the scrollElement via `instance.scrollElement`. Built-in implementations are exported as `observeElementOffset` and `observeWindowOffset` which are automatically configured for you by your framework adapter's exported functions like `useVirtualizer` or `useWindowVirtualizer`.
+
+### `measureElement`
+
+```tsx
+measureElement?: (
+  element: TItemElement,
+  entry: ResizeObserverEntry | undefined,
+  instance: Virtualizer<TScrollElement, TItemElement>,
+) => number
+```
+
+This optional function is called when the virtualizer needs to dynamically measure the size (width or height) of an item.
+
+> 🧠 You can use `instance.options.horizontal` to determine if the width or height of the item should be measured.
+
+### `scrollMargin`
+
+```tsx
+scrollMargin?: number
+```
+
+With this option, you can specify where the scroll offset should originate. Typically, this value represents the space between the beginning of the scrolling element and the start of the list. This is especially useful in common scenarios such as when you have a header preceding a window virtualizer or when multiple virtualizers are utilized within a single scrolling element. If you are using absolute positioning of elements, you should take into account the `scrollMargin` in your CSS transform:
+```tsx
+transform: `translateY(${
+   virtualRow.start - rowVirtualizer.options.scrollMargin
+}px)` 
+``` 
+To dynamically measure value for `scrollMargin` you can use `getBoundingClientRect()` or ResizeObserver. This is helpful in scenarios when items above your virtual list might change their height.
+
+### `gap`
+
+```tsx
+gap?: number
+```
+
+This option allows you to set the spacing between items in the virtualized list. It's particularly useful for maintaining a consistent visual separation between items without having to manually adjust each item's margin or padding. The value is specified in pixels.
+
+### `lanes`
+
+```tsx
+lanes: number
+```
+
+The number of lanes the list is divided into (aka columns for vertical lists and rows for horizontal lists).
+
+### `isScrollingResetDelay`
+
+```tsx
+isScrollingResetDelay: number
+```
+
+This option allows you to specify the duration to wait after the last scroll event before resetting the isScrolling instance property. The default value is 150 milliseconds.
+
+The implementation of this option is driven by the need for a reliable mechanism to handle scrolling behavior across different browsers. Until all browsers uniformly support the scrollEnd event.
+
+### `useScrollendEvent`
+
+```tsx
+useScrollendEvent: boolean
+```
+
+Determines whether to use the native scrollend event to detect when scrolling has stopped. If set to false, a debounced fallback is used to reset the isScrolling instance property after isScrollingResetDelay milliseconds. The default value is `false`.
+
+The implementation of this option is driven by the need for a reliable mechanism to handle scrolling behavior across different browsers. Until all browsers uniformly support the scrollEnd event.
+
+### `isRtl`
+
+```tsx
+isRtl: boolean
+```
+
+Whether to invert horizontal scrolling to support right-to-left language locales.
+
+### `useAnimationFrameWithResizeObserver`
+
+```tsx
+useAnimationFrameWithResizeObserver: boolean
+```
+
+**Default:** `false`
+
+When enabled, defers ResizeObserver measurement processing to the next animation frame using `requestAnimationFrame`.
+
+**Important:** This option typically **should not be enabled** in most cases. ResizeObserver callbacks already execute at an optimal time in the browser's rendering pipeline (after layout, before paint), and the measurements provided in the callback are pre-computed by the browser without causing additional reflows.
+
+**Potential use cases:**
+- If you're performing heavy DOM mutations in response to size changes and want to batch them with the next render cycle
+- As a workaround for the "ResizeObserver loop completed with undelivered notifications" error (though this usually indicates a deeper issue that should be fixed)
+
+**Tradeoffs:**
+- **Adds ~16ms delay:** Measurements are deferred to the next frame, which can cause visual artifacts, stale measurements, or slower time-to-interactive
+- **No batching benefit:** ResizeObserver already batches multiple element resizes into a single callback
+- **Defeats optimization:** The browser has already computed the measurements synchronously; deferring them provides no performance benefit for reading values
+
+Only enable this option if you have a specific reason and have measured that it improves your use case.
+
+## Virtualizer Instance
+
+The following properties and methods are available on the virtualizer instance:
+
+### `options`
+
+```tsx
+options: readonly Required<VirtualizerOptions<TScrollElement, TItemElement>>
+```
+
+The current options for the virtualizer. This property is updated via your framework adapter and is read-only.
+
+### `scrollElement`
+
+```tsx
+scrollElement: readonly TScrollElement | null
+```
+
+The current scrollElement for the virtualizer. This property is updated via your framework adapter and is read-only.
+
+### `getVirtualItems`
+
+```tsx
+type getVirtualItems = () => VirtualItem[]
+```
+
+Returns the virtual items for the current state of the virtualizer.
+
+### `getVirtualIndexes`
+
+```tsx
+type getVirtualIndexes = () => number[]
+```
+
+Returns the virtual row indexes for the current state of the virtualizer.
+
+### `scrollToOffset`
+
+```tsx
+scrollToOffset: (
+  toOffset: number,
+  options?: {
+    align?: 'start' | 'center' | 'end' | 'auto',
+    behavior?: 'auto' | 'smooth'
+  }
+) => void
+```
+
+Scrolls the virtualizer to the pixel offset provided. You can optionally pass an alignment mode to anchor the scroll to a specific part of the scrollElement.
+
+### `scrollToIndex`
+
+```tsx
+scrollToIndex: (
+  index: number,
+  options?: {
+    align?: 'start' | 'center' | 'end' | 'auto',
+    behavior?: 'auto' | 'smooth'
+  }
+) => void
+```
+
+Scrolls the virtualizer to the items of the index provided. You can optionally pass an alignment mode to anchor the scroll to a specific part of the scrollElement.
+
+### `getTotalSize`
+
+```tsx
+getTotalSize: () => number
+```
+
+Returns the total size in pixels for the virtualized items. This measurement will incrementally change if you choose to dynamically measure your elements as they are rendered.
+
+### `measure`
+
+```tsx
+measure: () => void
+```
+
+Resets any prev item measurements.
+
+### `measureElement`
+
+```tsx
+measureElement: (el: TItemElement | null) => void
+```
+
+Measures the element using your configured `measureElement` virtualizer option. You are responsible for calling this in your virtualizer markup when the component is rendered (eg. using something like React's ref callback prop) also adding `data-index`
+
+```tsx
+ <div
+  key={virtualRow.key}
+  data-index={virtualRow.index}
+  ref={virtualizer.measureElement}
+  style={...}
+>...</div>
+```
+
+By default the `measureElement` virtualizer option is configured to measure elements with `getBoundingClientRect()`.
+
+### `resizeItem`
+
+```tsx
+resizeItem: (index: number, size: number) => void
+```
+
+Change the virtualized item's size manually. Use this function to manually set the size calculated for this index. Useful in occations when using some custom morphing transition and you know the morphed item's size beforehand.
+
+You can also use this method with a throttled ResizeObserver instead of `Virtualizer.measureElement` to reduce re-rendering.
+
+> ⚠️ Please be aware that manually changing the size of an item when using `Virtualizer.measureElement` to monitor that item, will result in unpredictable behaviour as the `Virtualizer.measureElement` is also changing the size. However you can use one of resizeItem or measureElement in the same virtualizer instance but on different item indexes.
+
+### `scrollRect`
+
+```tsx
+scrollRect: Rect
+```
+
+Current `Rect` of the scroll element.
+
+### `shouldAdjustScrollPositionOnItemSizeChange`
+
+```tsx
+shouldAdjustScrollPositionOnItemSizeChange: undefined | ((item: VirtualItem, delta: number, instance: Virtualizer<TScrollElement, TItemElement>) => boolean)
+```
+
+The shouldAdjustScrollPositionOnItemSizeChange method enables fine-grained control over the adjustment of scroll position when the size of dynamically rendered items differs from the estimated size. When jumping in the middle of the list and scrolling backward new elements may have a different size than the initially estimated size. This discrepancy can cause subsequent items to shift, potentially disrupting the user's scrolling experience, particularly when navigating backward through the list.
+
+### `isScrolling`
+
+```tsx
+isScrolling: boolean
+```
+
+Boolean flag indicating if list is currently being scrolled.
+
+### `scrollDirection`
+
+```tsx
+scrollDirection: 'forward' | 'backward' | null
+```
+
+This option indicates the direction of scrolling, with possible values being 'forward' for scrolling downwards and 'backward' for scrolling upwards. The value is set to null when there is no active scrolling.
+
+### `scrollOffset`
+
+```tsx
+scrollOffset: number
+```
+
+This option represents the current scroll position along the scrolling axis. It is measured in pixels from the starting point of the scrollable area.
+
+
+----- 
+
+
+---
+title: VirtualItem
+---
+
+The `VirtualItem` object represents a single item returned by the virtualizer. It contains information you need to render the item in the coordinate space within your virtualizer's scrollElement and other helpful properties/functions.
+
+```tsx
+export interface VirtualItem {
+  key: string | number | bigint
+  index: number
+  start: number
+  end: number
+  size: number
+}
+```
+
+The following properties and methods are available on each VirtualItem object:
+
+### `key`
+
+```tsx
+key: string | number | bigint
+```
+
+The unique key for the item. By default this is the item index, but should be configured via the `getItemKey` Virtualizer option.
+
+### `index`
+
+```tsx
+index: number
+```
+
+The index of the item.
+
+### `start`
+
+```tsx
+start: number
+```
+
+The starting pixel offset for the item. This is usually mapped to a css property or transform like `top/left` or `translateX/translateY`.
+
+### `end`
+
+```tsx
+end: number
+```
+
+The ending pixel offset for the item. This value is not necessary for most layouts, but can be helpful so we've provided it anyway.
+
+### `size`
+
+```tsx
+size: number
+```
+
+The size of the item. This is usually mapped to a css property like `width/height`. Before an item is measured with the `VirtualItem.measureElement` method, this will be the estimated size returned from your `estimateSize` virtualizer option. After an item is measured (if you choose to measure it at all), this value will be the number returned by your `measureElement` virtualizer option (which by default is configured to measure elements with `getBoundingClientRect()`).
+
+### `lane`
+
+```tsx
+lane: number
+```
+
+The lane index of the item. In regular lists it will always be set to `0` but becomes useful for masonry layouts (see variable examples for more details).
diff --git a/docs/bjesuiter/start_pdf_dev_env.sh b/docs/bjesuiter/start_pdf_dev_env.sh
new file mode 100755
index 000000000..39ae21815
--- /dev/null
+++ b/docs/bjesuiter/start_pdf_dev_env.sh
@@ -0,0 +1,27 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+PORT=9000
+XDG_DATA_HOME=/tmp/bgproc-data
+export XDG_DATA_HOME
+mkdir -p "${XDG_DATA_HOME}/bgproc/logs"
+
+bgproc stop -n teamapps-frontend >/dev/null 2>&1 || true
+
+if lsof -iTCP:${PORT} -sTCP:LISTEN >/dev/null 2>&1; then
+	echo "Port ${PORT} is already in use. Stopping existing listener."
+	lsof -tiTCP:${PORT} -sTCP:LISTEN | xargs -r kill
+fi
+
+bgproc start -f -n teamapps-frontend -- /bin/zsh -lc "cd /Users/bjesuiter/Develop/teamapps-org/teamapps/teamapps-client && ./start-dev-server.sh 8082 ${PORT}"
+
+for i in {1..60}; do
+	if lsof -iTCP:${PORT} -sTCP:LISTEN >/dev/null 2>&1; then
+		echo "Dev server is listening on port ${PORT}."
+		exit 0
+	fi
+	sleep 1
+done
+
+echo "Timed out waiting for dev server to listen on port ${PORT}."
+exit 1
diff --git a/pom.xml b/pom.xml
index 20517397c..dc83e58b3 100644
--- a/pom.xml
+++ b/pom.xml
@@ -5,7 +5,7 @@
     <groupId>org.teamapps</groupId>
     <artifactId>teamapps</artifactId>
     <packaging>pom</packaging>
-    <version>0.9.8-SNAPSHOT</version>
+    <version>0.9.208-SNAPSHOT</version>
 
     <name>TeamApps</name>
     <description>A Java web application framework</description>
@@ -37,27 +37,22 @@
         <module>teamapps-material-icon-provider</module>
         <module>teamapps-ui-dsl</module>
         <module>teamapps-ui-api</module>
-        <module>teamapps-client</module>
         <module>teamapps-ux</module>
-        <module>teamapps-ux-servlet</module>
+        <module>teamapps-client</module>
         <module>teamapps-server-jetty-embedded</module>
         <module>teamapps-server-undertow-embedded</module>
-        <module>teamapps-server-tomcat-embedded</module>
     </modules>
 
     <properties>
-        <maven.compiler.source>10</maven.compiler.source>
-        <maven.compiler.target>10</maven.compiler.target>
+        <maven.compiler.source>17</maven.compiler.source>
+        <maven.compiler.target>17</maven.compiler.target>
         <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
 
-        <maven-assembly-plugin-version>3.0.0</maven-assembly-plugin-version>
-        <slf4j-version>1.7.25</slf4j-version>
-        <jackson-version>2.9.8</jackson-version>
-        <guava-version>23.6-jre</guava-version>
-        <jsoup-version>1.8.3</jsoup-version>
-        <appache-httpcomponents>4.5.2</appache-httpcomponents>
-        <apache-commons-io>2.6</apache-commons-io>
-        <junit.version>4.12</junit.version>
+        <slf4j-version>2.0.16</slf4j-version>
+        <jackson-version>2.18.2</jackson-version>
+        <guava-version>33.4.0-jre</guava-version>
+        <apache-commons-io>2.18.0</apache-commons-io>
+        <junit.version>4.13.2</junit.version>
         <cloning.version>1.9.9</cloning.version>
     </properties>
 
@@ -67,6 +62,31 @@
             <artifactId>slf4j-api</artifactId>
             <version>${slf4j-version}</version>
         </dependency>
+
+        <dependency>
+            <groupId>junit</groupId>
+            <artifactId>junit</artifactId>
+            <version>${junit.version}</version>
+            <scope>test</scope>
+        </dependency>
+        <dependency>
+            <groupId>org.assertj</groupId>
+            <artifactId>assertj-core</artifactId>
+            <version>3.26.3</version>
+            <scope>test</scope>
+        </dependency>
+        <dependency>
+            <groupId>org.awaitility</groupId>
+            <artifactId>awaitility</artifactId>
+            <version>4.2.2</version>
+            <scope>test</scope>
+        </dependency>
+        <dependency>
+            <groupId>org.mockito</groupId>
+            <artifactId>mockito-core</artifactId>
+            <version>5.13.0</version>
+            <scope>test</scope>
+        </dependency>
     </dependencies>
 
     <dependencyManagement>
@@ -77,6 +97,11 @@
                 <artifactId>teamapps-common</artifactId>
                 <version>${project.version}</version>
             </dependency>
+            <dependency>
+                <groupId>org.teamapps</groupId>
+                <artifactId>teamapps-commons</artifactId>
+                <version>0.1.2</version>
+            </dependency>
 
             <dependency>
                 <groupId>org.teamapps</groupId>
@@ -102,12 +127,6 @@
                 <version>${project.version}</version>
             </dependency>
 
-            <dependency>
-                <groupId>org.teamapps</groupId>
-                <artifactId>teamapps-ux-servlet</artifactId>
-                <version>${project.version}</version>
-            </dependency>
-
             <dependency>
                 <groupId>org.teamapps</groupId>
                 <artifactId>teamapps-ux</artifactId>
@@ -142,59 +161,16 @@
                 <version>${guava-version}</version>
             </dependency>
 
-            <dependency>
-                <groupId>org.bouncycastle</groupId>
-                <artifactId>bcprov-jdk16</artifactId>
-                <version>1.46</version>
-            </dependency>
-
-            <dependency>
-                <groupId>com.thoughtworks.xstream</groupId>
-                <artifactId>xstream</artifactId>
-                <version>1.4.8</version>
-            </dependency>
-
-            <dependency>
-                <groupId>junit</groupId>
-                <artifactId>junit</artifactId>
-                <version>${junit.version}</version>
-                <scope>test</scope>
-            </dependency>
-
             <dependency>
                 <groupId>org.apache.commons</groupId>
                 <artifactId>commons-lang3</artifactId>
-                <version>3.4</version>
+                <version>3.17.0</version>
             </dependency>
 
             <dependency>
                 <groupId>org.apache.commons</groupId>
                 <artifactId>commons-collections4</artifactId>
-                <version>4.1</version>
-            </dependency>
-
-            <dependency>
-                <groupId>net.coobird</groupId>
-                <artifactId>thumbnailator</artifactId>
-                <version>0.4.8</version>
-            </dependency>
-
-            <dependency>
-                <groupId>com.googlecode.json-simple</groupId>
-                <artifactId>json-simple</artifactId>
-                <version>1.1.1</version>
-            </dependency>
-
-            <dependency>
-                <groupId>org.antlr</groupId>
-                <artifactId>ST4</artifactId>
-                <version>4.0.8</version>
-            </dependency>
-
-            <dependency>
-                <groupId>com.google.code.gson</groupId>
-                <artifactId>gson</artifactId>
-                <version>2.3.1</version>
+                <version>4.4</version>
             </dependency>
 
             <dependency>
@@ -203,67 +179,12 @@
                 <version>${apache-commons-io}</version>
             </dependency>
 
-            <dependency>
-                <groupId>org.jsoup</groupId>
-                <artifactId>jsoup</artifactId>
-                <version>1.8.3</version>
-            </dependency>
-
-            <dependency>
-                <groupId>org.apache.httpcomponents</groupId>
-                <artifactId>httpclient</artifactId>
-                <version>${appache-httpcomponents}</version>
-            </dependency>
-
-            <dependency>
-                <groupId>org.apache.httpcomponents</groupId>
-                <artifactId>httpmime</artifactId>
-                <version>${appache-httpcomponents}</version>
-            </dependency>
-
-            <dependency>
-                <groupId>org.apache.httpcomponents</groupId>
-                <artifactId>fluent-hc</artifactId>
-                <version>${appache-httpcomponents}</version>
-            </dependency>
-
-            <dependency>
-                <groupId>org.assertj</groupId>
-                <artifactId>assertj-core</artifactId>
-                <version>3.9.0</version>
-                <scope>test</scope>
-            </dependency>
-
-            <dependency>
-                <groupId>net.lingala.zip4j</groupId>
-                <artifactId>zip4j</artifactId>
-                <version>1.3.2</version>
-            </dependency>
-
             <dependency>
                 <groupId>org.slf4j</groupId>
                 <artifactId>slf4j-simple</artifactId>
                 <version>${slf4j-version}</version>
             </dependency>
 
-            <dependency>
-                <groupId>io.github.classgraph</groupId>
-                <artifactId>classgraph</artifactId>
-                <version>4.1.7</version>
-            </dependency>
-
-            <dependency>
-                <groupId>org.mindrot</groupId>
-                <artifactId>jbcrypt</artifactId>
-                <version>0.4</version>
-            </dependency>
-
-            <dependency>
-                <groupId>uk.com.robust-it</groupId>
-                <artifactId>cloning</artifactId>
-                <version>${cloning.version}</version>
-            </dependency>
-
             <dependency>
                 <groupId>com.fasterxml.jackson.core</groupId>
                 <artifactId>jackson-core</artifactId>
@@ -288,60 +209,38 @@
             <dependency>
                 <groupId>org.jetbrains</groupId>
                 <artifactId>annotations</artifactId>
-                <version>13.0</version>
-            </dependency>
-
-            <dependency>
-                <groupId>javax</groupId>
-                <artifactId>javaee-web-api</artifactId>
-                <version>8.0</version>
-            </dependency>
-
-            <dependency>
-                <groupId>org.mockito</groupId>
-                <artifactId>mockito-core</artifactId>
-                <version>2.3.5</version>
-                <scope>test</scope>
+                <version>24.1.0</version>
             </dependency>
-
         </dependencies>
     </dependencyManagement>
 
     <distributionManagement>
         <snapshotRepository>
             <id>ossrh</id>
-            <url>https://oss.sonatype.org/content/repositories/snapshots</url>
+            <url>https://s01.oss.sonatype.org/content/repositories/snapshots</url>
         </snapshotRepository>
         <repository>
             <id>ossrh</id>
-            <url>https://oss.sonatype.org/service/local/staging/deploy/maven2/</url>
+            <url>https://s01.oss.sonatype.org/service/local/staging/deploy/maven2/</url>
         </repository>
     </distributionManagement>
 
     <build>
-        <pluginManagement>
-            <plugins>
-                <plugin>
-                    <groupId>org.teamapps</groupId>
-                    <artifactId>teamapps-universal-db-maven-plugin</artifactId>
-                    <version>1.0</version>
-                </plugin>
-            </plugins>
-        </pluginManagement>
         <plugins>
             <plugin>
                 <groupId>org.apache.maven.plugins</groupId>
                 <artifactId>maven-compiler-plugin</artifactId>
-                <version>3.8.0</version>
+                <version>3.13.0</version>
                 <configuration>
                     <showWarnings>true</showWarnings>
                     <showDeprecation>true</showDeprecation>
+                    <compilerArgument>-Xlint:-options</compilerArgument>
                 </configuration>
             </plugin>
             <plugin>
                 <groupId>org.apache.maven.plugins</groupId>
                 <artifactId>maven-release-plugin</artifactId>
-                <version>2.5.3</version>
+                <version>3.1.1</version>
                 <configuration>
                     <!-- see https://docs.sonatype.org/display/Repository/How+To+Generate+PGP+Signatures+With+Maven -->
                     <mavenExecutorId>forked-path</mavenExecutorId>
@@ -349,34 +248,20 @@
                     <!--<arguments>-Psonatype-oss-release -D${gpg.arguments}</arguments>-->
                     <autoVersionSubmodules>true</autoVersionSubmodules>
                     <tagNameFormat>teamapps-@{version}</tagNameFormat>
-                    <releaseProfiles>javadoc-jar,sources-jar,license-handling</releaseProfiles>
+                    <releaseProfiles>javadoc-jar,sources-jar,license-handling,release</releaseProfiles>
+                    <pushChanges>true</pushChanges>
                 </configuration>
             </plugin>
             <plugin>
-                <groupId>org.sonatype.plugins</groupId>
-                <artifactId>nexus-staging-maven-plugin</artifactId>
-                <version>1.6.8</version>
+                <groupId>org.sonatype.central</groupId>
+                <artifactId>central-publishing-maven-plugin</artifactId>
+                <version>0.8.0</version>
                 <extensions>true</extensions>
                 <configuration>
-                    <serverId>ossrh</serverId>
-                    <nexusUrl>https://oss.sonatype.org/</nexusUrl>
-                    <autoReleaseAfterClose>false</autoReleaseAfterClose>
+                    <deploymentName>TeamApps ${project.version}</deploymentName>
+                    <publishingServerId>ossrh</publishingServerId>
                 </configuration>
             </plugin>
-            <plugin>
-                <groupId>org.apache.maven.plugins</groupId>
-                <artifactId>maven-gpg-plugin</artifactId>
-                <version>1.6</version>
-                <executions>
-                    <execution>
-                        <id>sign-artifacts</id>
-                        <phase>verify</phase>
-                        <goals>
-                            <goal>sign</goal>
-                        </goals>
-                    </execution>
-                </executions>
-            </plugin>
         </plugins>
     </build>
 
@@ -388,7 +273,7 @@
                     <plugin>
                         <groupId>org.apache.maven.plugins</groupId>
                         <artifactId>maven-javadoc-plugin</artifactId>
-                        <version>3.0.1</version>
+                        <version>3.8.0</version>
                         <executions>
                             <execution>
                                 <id>generate-javadoc-jar</id>
@@ -408,7 +293,7 @@
                     <plugin>
                         <groupId>org.apache.maven.plugins</groupId>
                         <artifactId>maven-source-plugin</artifactId>
-                        <version>3.0.1</version>
+                        <version>3.3.1</version>
                         <executions>
                             <execution>
                                 <id>generate-sources-jar</id>
@@ -491,6 +376,27 @@
                 </plugins>
             </build>
         </profile>
+        <profile>
+            <id>release</id>
+            <build>
+                <plugins>
+                    <plugin>
+                        <groupId>org.apache.maven.plugins</groupId>
+                        <artifactId>maven-gpg-plugin</artifactId>
+                        <version>3.2.8</version>
+                        <executions>
+                            <execution>
+                                <id>sign-artifacts</id>
+                                <phase>verify</phase>
+                                <goals>
+                                    <goal>sign</goal>
+                                </goals>
+                            </execution>
+                        </executions>
+                    </plugin>
+                </plugins>
+            </build>
+        </profile>
     </profiles>
 
     <scm>
diff --git a/release.sh b/release.sh
new file mode 100755
index 000000000..488d8d2f2
--- /dev/null
+++ b/release.sh
@@ -0,0 +1,10 @@
+#!/bin/bash
+
+export JDK_JAVA_OPTIONS='--add-opens java.base/java.util=ALL-UNNAMED --add-opens java.base/java.lang.reflect=ALL-UNNAMED --add-opens java.base/java.text=ALL-UNNAMED --add-opens java.desktop/java.awt.font=ALL-UNNAMED'
+mvn -e -P javadoc-jar,sources-jar,license-handling,release release:prepare release:perform
+
+echo "---------"
+echo "HEADS UP!"
+echo "The artifact has been uploaded for staging but is not yet published. This is now a manual step!"
+echo "Please visit https://central.sonatype.com/publishing/deployments to publish the artifact."
+echo "---------"
\ No newline at end of file
diff --git a/teamapps-client/build/config.js b/teamapps-client/build/config.js
deleted file mode 100644
index cdb2fbd14..000000000
--- a/teamapps-client/build/config.js
+++ /dev/null
@@ -1,63 +0,0 @@
-'use strict'
-// Template version: 1.3.1
-// see http://vuejs-templates.github.io/webpack for documentation.
-
-const path = require('path')
-
-module.exports = {
-	dev: {
-
-		// Paths
-		assetsSubDirectory: '.',
-		assetsPublicPath: '/',
-		appServerUrl: process.env.appServerUrl || "http://localhost:9000",
-
-		// Various Dev Server settings
-		host: 'localhost', // can be overwritten by process.env.HOST
-		port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
-		autoOpenBrowser: false,
-		errorOverlay: true,
-		notifyOnErrors: true,
-		poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
-
-		/**
-		 * Source Maps
-		 */
-
-		// https://webpack.js.org/configuration/devtool/#development
-		devtool: 'cheap-module-source-map', // TODO change back to cheap-module-eval-source-map!!! https://github.com/webpack-contrib/mini-css-extract-plugin/issues/29
-
-		// If you have problems debugging vue-files in devtools,
-		// set this to false - it *may* help
-		// https://vue-loader.vuejs.org/en/options.html#cachebusting
-		cacheBusting: true,
-
-		cssSourceMap: true
-	},
-
-	build: {
-		generatedIndexHtml: path.resolve(__dirname, '../dist/index.html'),
-
-		// Paths
-		assetsSubDirectory: '.',
-		assetsPublicPath: '/',
-		appServerUrl: null,
-
-		/**
-		 * Source Maps
-		 */
-
-		productionSourceMap: true,
-		// https://webpack.js.org/configuration/devtool/#production
-		devtool: '#source-map',
-
-		productionGzip: true,
-		productionGzipExtensions: ['js', 'css'],
-
-		// Run the build command with an extra argument to
-		// View the bundle analyzer report after build finishes:
-		// `npm run build --report`
-		// Set to `true` or `false` to always turn it on or off
-		bundleAnalyzerReport: process.env.npm_config_report
-	}
-}
diff --git a/teamapps-client/build/webpack.base.conf.js b/teamapps-client/build/webpack.base.conf.js
deleted file mode 100644
index 383c6766b..000000000
--- a/teamapps-client/build/webpack.base.conf.js
+++ /dev/null
@@ -1,169 +0,0 @@
-'use strict';
-const path = require('path');
-const webpack = require('webpack');
-const CopyWebpackPlugin = require('copy-webpack-plugin');
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-
-function resolve(dir) {
-	return path.join(__dirname, '..', dir)
-}
-
-module.exports = function (stageConfig) {
-	return {
-		context: path.resolve(__dirname, '../'),
-		entry: {
-			main: resolve('/ts/modules/index.ts')
-		},
-		output: {
-			library: "teamapps",
-			libraryTarget: "umd",
-			umdNamedDefine: true
-		},
-		// Enable sourcemaps for debugging webpack's output.
-		devtool: "source-map",
-
-		resolve: {
-			extensions: ['.ts', '.tsx', '.vue', '.json', '.less', '.js', '.css'],
-			alias: {
-				"@less": resolve('less/'),
-				"./images/sort-asc.gif": resolve('node_modules/slickgrid/images/sort-asc.gif'),
-				"./images/sort-desc.gif": resolve('node_modules/slickgrid/images/sort-desc.gif'),
-			},
-			modules: [resolve("node_modules")]
-		},
-		module: {
-			rules: [
-				{
-					test: /\.tsx?$/,
-					loader: "awesome-typescript-loader",
-					options: {
-						configFileName: './ts/modules/tsconfig.json'
-					}
-				},
-				{
-					test: /\.less$/,
-					use: [
-						MiniCssExtractPlugin.loader,
-						{
-							loader: "css-loader",
-							options: {
-								sourceMap: true
-							}
-						}, {
-							loader: 'postcss-loader',
-							options: {
-								sourceMap: true,
-								plugins: () => [require('autoprefixer')({browsers: ['> 1%']})],
-							}
-						}, {
-							loader: "less-loader",
-							options: {
-								sourceMap: true
-							}
-						}
-					]
-				},
-				{
-					test: /\.css$/,
-					use: [
-						MiniCssExtractPlugin.loader,
-						{
-							loader: "css-loader",
-							options: {
-								sourceMap: true
-							}
-						}, {
-							loader: 'postcss-loader',
-							options: {
-								sourceMap: true,
-								plugins: () => [require('autoprefixer')({browsers: ['> 1%']})],
-							}
-						}
-					]
-				},
-				{
-					test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
-					loader: 'url-loader',
-					options: {
-						limit: 10000,
-						name: path.posix.join(stageConfig.assetsSubDirectory, 'img/[name].[hash:7].[ext]')
-					}
-				},
-				{
-					test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
-					loader: 'url-loader',
-					options: {
-						limit: 10000,
-						name: path.posix.join(stageConfig.assetsSubDirectory, 'media/[name].[hash:7].[ext]')
-					}
-				},
-				{
-					test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
-					loader: 'url-loader',
-					options: {
-						limit: 10000,
-						name: path.posix.join(stageConfig.assetsSubDirectory, 'fonts/[name].[hash:7].[ext]')
-					}
-				},
-				{
-					test: /\.js$/,
-					use: ["source-map-loader"],
-					enforce: "pre"
-				}
-			]
-		},
-
-		node: {
-			// prevent webpack from injecting useless setImmediate polyfill because Vue
-			// source contains it (although only uses it if it's native).
-			setImmediate: false,
-			// prevent webpack from injecting mocks to Node native modules
-			// that does not make sense for the client
-			dgram: 'empty',
-			fs: 'empty',
-			net: 'empty',
-			tls: 'empty',
-			child_process: 'empty'
-		},
-
-		plugins: [
-			// new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
-			new MiniCssExtractPlugin({
-				filename: "css/teamapps.[hash].css"
-			}),
-			// copy custom static assets
-			new CopyWebpackPlugin([
-				{
-					from: resolve('favicon'),
-					to: path.posix.join(stageConfig.assetsSubDirectory, 'favicon'),
-					ignore: ['**/.*']
-				},
-				{
-					from: resolve('resources'),
-					to: path.posix.join(stageConfig.assetsSubDirectory, 'resources'),
-					ignore: ['**/.*']
-				},
-				{
-					from: resolve('node_modules/moment/locale'),
-					to: path.posix.join(stageConfig.assetsSubDirectory, 'runtime-resources/moment-locales')
-				},
-				{
-					from: resolve('node_modules/fullcalendar/dist/locale'),
-					to: path.posix.join(stageConfig.assetsSubDirectory, '/runtime-resources/fullcalendar-locales')
-				},
-				{
-					from: resolve('node_modules/mediaelement/build'),
-					to: path.posix.join(stageConfig.assetsSubDirectory, '/runtime-resources/mediaelement')
-				},
-				{
-					from: resolve('node_modules/tinymce'),
-					to: path.posix.join(stageConfig.assetsSubDirectory, "/runtime-resources/tinymce")
-				},
-				{
-					from: resolve('node_modules/tinymce-i18n/langs'),
-					to: path.posix.join(stageConfig.assetsSubDirectory, "/runtime-resources/tinymce/langs")
-				}
-			])
-		]
-	}
-};
diff --git a/teamapps-client/index.html b/teamapps-client/index.html
index 9b95730f4..dd4c6935a 100644
--- a/teamapps-client/index.html
+++ b/teamapps-client/index.html
@@ -3,7 +3,7 @@
 <head lang="en">
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10, user-scalable=yes">
+    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=10, user-scalable=yes, shrink-to-fit=no">
     <title></title>
 
     <script>
@@ -13,7 +13,7 @@
 				let result = {};
 				query.split("&").forEach(function(part) {
 					let [key, value] = part.split("=");
-					if (value !== null) {
+					if (value != null) {
 						result[key] = decodeURIComponent(value);
 					}
 				});
@@ -33,7 +33,7 @@
 
 				var contextClass = teamapps[allUrlParameters()["teamAppsContext"]] || teamapps.DefaultTeamAppsUiContext;
 
-				window.teamAppsContext = new contextClass(webSocketUrl, allUrlParameters());
+				window.teamappsContext = new contextClass(webSocketUrl, allUrlParameters());
 			});
 		})();
     </script>
diff --git a/teamapps-client/jest.config.js b/teamapps-client/jest.config.js
new file mode 100644
index 000000000..91a2d2c0d
--- /dev/null
+++ b/teamapps-client/jest.config.js
@@ -0,0 +1,4 @@
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'node',
+};
\ No newline at end of file
diff --git a/teamapps-client/js-build/config.js b/teamapps-client/js-build/config.js
new file mode 100644
index 000000000..dc4d1b6e4
--- /dev/null
+++ b/teamapps-client/js-build/config.js
@@ -0,0 +1,34 @@
+'use strict'
+// Template version: 1.3.1
+// see http://vuejs-templates.github.io/webpack for documentation.
+
+const path = require('path')
+
+
+let appServerUrlEnv = process.env.appServerUrl;
+let appServerUrl = appServerUrlEnv == null ? "http://localhost:8080" : /^\d+$/.test(appServerUrlEnv) ? "http://localhost:" + appServerUrlEnv : appServerUrlEnv;
+console.log("appServerUrl: " + appServerUrl)
+module.exports = {
+	dev: {
+		// Paths
+		assetsSubDirectory: '.',
+		assetsPublicPath: '/',
+		appServerUrl: appServerUrl,
+
+		// Dev Server settings
+		host: 'localhost', // can be overwritten by process.env.HOST
+		port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
+		autoOpenBrowser: false,
+		errorOverlay: true,
+		notifyOnErrors: false,
+		poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
+	},
+
+	build: {
+		// Paths
+		assetsSubDirectory: '.',
+		assetsPublicPath: '/',
+
+		bundleAnalyzerReport: process.env.npm_config_report
+	}
+}
diff --git a/teamapps-client/build/logo.png b/teamapps-client/js-build/logo.png
similarity index 100%
rename from teamapps-client/build/logo.png
rename to teamapps-client/js-build/logo.png
diff --git a/teamapps-client/js-build/webpack.base.conf.js b/teamapps-client/js-build/webpack.base.conf.js
new file mode 100644
index 000000000..7b4ce67ee
--- /dev/null
+++ b/teamapps-client/js-build/webpack.base.conf.js
@@ -0,0 +1,202 @@
+'use strict';
+const path = require('path');
+const webpack = require('webpack');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+
+// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+
+function resolve(dir) {
+    return path.join(__dirname, '..', dir)
+}
+
+module.exports = function (stageConfig) {
+    return {
+        context: path.resolve(__dirname, '../'),
+        entry: {
+            teamapps: resolve('/ts/modules/index.ts'),
+            UiRichTextEditor: resolve('/ts/modules/formfield/UiRichTextEditor.ts')
+        },
+        output: {
+            library: "[name]",
+            libraryTarget: "umd",
+            umdNamedDefine: true
+        },
+        // Enable sourcemaps for debugging webpack's output.
+        devtool: "source-map",
+
+        resolve: {
+            extensions: ['.ts', '.tsx', '.vue', '.json', '.less', '.js', 'mjs', '.css'],
+            alias: {
+                "@less": resolve('less/'),
+                "./images/sort-asc.gif": resolve('node_modules/slickgrid/images/sort-asc.gif'),
+                "./images/sort-desc.gif": resolve('node_modules/slickgrid/images/sort-desc.gif'),
+                "react": "preact/compat",
+                "react-dom": "preact/compat",
+            },
+            modules: [resolve("node_modules")]
+        },
+        module: {
+            rules: [
+                {
+                    test: /\.tsx?$/,
+                    loader: require.resolve('ts-loader')
+                },
+                {
+                    test: /\.less$/,
+                    use: [
+                        MiniCssExtractPlugin.loader,
+                        {
+                            loader: "css-loader",
+                            options: {
+                                sourceMap: true
+                            }
+                        }, {
+                            loader: 'postcss-loader',
+                            options: {
+                                sourceMap: true,
+                                plugins: () => [require('autoprefixer')],
+                            }
+                        }, {
+                            loader: "less-loader",
+                            options: {
+                                sourceMap: true
+                            }
+                        }
+                    ]
+                },
+                {
+                    test: /\.css$/,
+                    use: [
+                        MiniCssExtractPlugin.loader,
+                        {
+                            loader: "css-loader",
+                            options: {
+                                sourceMap: true
+                            }
+                        }, {
+                            loader: 'postcss-loader',
+                            options: {
+                                sourceMap: true,
+                                plugins: () => [require('autoprefixer')],
+                            }
+                        }
+                    ]
+                },
+                {
+                    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+                    loader: 'url-loader',
+                    options: {
+                        limit: 10000,
+                        name: path.posix.join(stageConfig.assetsSubDirectory, 'img/[name].[hash:7].[ext]')
+                    }
+                },
+                {
+                    test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
+                    loader: 'url-loader',
+                    options: {
+                        limit: 10000,
+                        name: path.posix.join(stageConfig.assetsSubDirectory, 'media/[name].[hash:7].[ext]')
+                    }
+                },
+                {
+                    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+                    loader: 'url-loader',
+                    options: {
+                        limit: 10000,
+                        name: path.posix.join(stageConfig.assetsSubDirectory, 'fonts/[name].[hash:7].[ext]')
+                    }
+                },
+                {
+                    test: /\.js$/,
+                    include: /node_modules\/@tanstack\/virtual-core/,
+                    use: {
+                        loader: 'esbuild-loader',
+                        options: {
+                            target: 'es2015'
+                        }
+                    }
+                },
+                {
+                    test: /\.js$/,
+                    use: ["source-map-loader"],
+                    enforce: "pre",
+                    exclude: /node_modules/
+                },
+
+                {
+                    test: /\.mjs$/, // Add rule for .mjs files
+                    use: {
+                        loader: 'esbuild-loader',
+                        options: {
+                            target: 'es2015'
+                        }
+                    }
+                }
+            ]
+        },
+        optimization: {
+            splitChunks: {
+                chunks: 'all'
+            },
+            noEmitOnErrors: true
+
+        },
+        node: {
+            // prevent webpack from injecting useless setImmediate polyfill because Vue
+            // source contains it (although only uses it if it's native).
+            setImmediate: false,
+            // prevent webpack from injecting mocks to Node native modules
+            // that does not make sense for the client
+            dgram: 'empty',
+            fs: 'empty',
+            net: 'empty',
+            tls: 'empty',
+            child_process: 'empty'
+        },
+
+        plugins: [
+            // new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
+            new MiniCssExtractPlugin({
+                filename: "css/teamapps.[hash].css"
+            }),
+            // copy custom static assets
+            new CopyWebpackPlugin([
+                {
+                    from: resolve('favicon'),
+                    to: path.posix.join(stageConfig.assetsSubDirectory, 'favicon'),
+                    ignore: ['**/.*']
+                },
+                {
+                    from: resolve('resources'),
+                    to: path.posix.join(stageConfig.assetsSubDirectory, 'resources'),
+                    ignore: ['**/.*']
+                },
+                {
+                    from: resolve('node_modules/moment/locale'),
+                    to: path.posix.join(stageConfig.assetsSubDirectory, 'runtime-resources/moment-locales')
+                },
+                {
+                    from: resolve('node_modules/@fullcalendar/core/locales'),
+                    to: path.posix.join(stageConfig.assetsSubDirectory, '/runtime-resources/fullcalendar-locales')
+                },
+                {
+                    from: resolve('node_modules/mediaelement/build'),
+                    to: path.posix.join(stageConfig.assetsSubDirectory, '/runtime-resources/mediaelement')
+                },
+                {
+                    from: resolve('node_modules/tinymce'),
+                    to: path.posix.join(stageConfig.assetsSubDirectory, "/runtime-resources/tinymce")
+                },
+                {
+                    from: resolve('node_modules/tinymce-i18n/langs'),
+                    to: path.posix.join(stageConfig.assetsSubDirectory, "/runtime-resources/tinymce/langs")
+                },
+                {
+                    from: resolve('node_modules/pdfjs-dist/build/pdf.worker.mjs'),
+                    to: path.posix.join(stageConfig.assetsSubDirectory, "/worker-libs")
+                }
+            ]),
+        ]
+    }
+};
diff --git a/teamapps-client/build/webpack.dev.conf.js b/teamapps-client/js-build/webpack.dev.conf.js
similarity index 63%
rename from teamapps-client/build/webpack.dev.conf.js
rename to teamapps-client/js-build/webpack.dev.conf.js
index f40401b71..bf18dae8a 100755
--- a/teamapps-client/build/webpack.dev.conf.js
+++ b/teamapps-client/js-build/webpack.dev.conf.js
@@ -12,36 +12,33 @@ const HOST = process.env.HOST;
 const PORT = process.env.PORT && Number(process.env.PORT);
 
 const devWebpackConfig = merge(baseWebpackConfig, {
-	// cheap-module-eval-source-map is faster for development
-	devtool: config.devtool,
+	devtool: "cheap-module-source-map",
 	output: {
 		filename: path.posix.join(config.assetsSubDirectory, 'js/[name].js'),
 		publicPath: config.assetsPublicPath
 	},
-	// these devServer options should be customized in /config/index.js
 	devServer: {
-		clientLogLevel: 'warning',
-		hot: true,
+		clientLogLevel: "warning",
 		contentBase: false, // since we use CopyWebpackPlugin.
 		compress: true,
 		host: HOST || config.host,
 		port: PORT || config.port,
-		open: config.autoOpenBrowser,
-		overlay: config.errorOverlay
-			? {warnings: false, errors: true}
-			: false,
+		open: false,
+		overlay: {warnings: false, errors: true},
 		publicPath: "/",
 		proxy: [{
 			context: [
 				'**',
 				'!/',
 				'!/index.html',
+				'!/test-harness.html',
 				"!/css/*",
 				"!/favicon/*",
 				"!/fonts/*",
 				"!/img/*",
 				"!/js/*",
 				"!/resources/*",
+				"!/static/*",
 				"!/runtime-resources/*",
 				"!/tsd/*"
 			],
@@ -49,47 +46,29 @@ const devWebpackConfig = merge(baseWebpackConfig, {
 		}],
 		quiet: true, // necessary for FriendlyErrorsPlugin
 		watchOptions: {
-			poll: config.poll,
+			poll: false
 		}
 	},
 	plugins: [
 		new webpack.DefinePlugin({
-			'process.env': {NODE_ENV: "'development'"}
+			'process.env': {NODE_ENV: "'development'"},
+			'__TEAMAPPS_VERSION__': `"DEV"`
 		}),
-		new webpack.HotModuleReplacementPlugin(),
-		new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
-		new webpack.NoEmitOnErrorsPlugin(),
-		// https://github.com/ampedandwired/html-webpack-plugin
 		new HtmlWebpackPlugin({
 			filename: 'index.html',
 			template: 'index.html',
 			inject: true,
 			appServerUrl: config.appServerUrl
+		}),
+		new HtmlWebpackPlugin({
+			filename: 'test-harness.html',
+			template: 'test-harness.html',
+			inject: true,
+			appServerUrl: config.appServerUrl
 		})
 	]
 });
 
-const createNotifierCallback = () => {
-	const notifier = require('node-notifier');
-
-	return (severity, errors) => {
-		if (severity !== 'error') {
-			return;
-		}
-
-		const error = errors[0];
-		const filename = error.file && error.file.split('!').pop();
-
-		notifier.notify({
-			title: require('../package.json').name,
-			message: severity + ': ' + error.name,
-			subtitle: filename || '',
-			icon: path.join(__dirname, 'logo.png'),
-			timeout: 3
-		})
-	}
-};
-
 module.exports = new Promise((resolve, reject) => {
 	portfinder.basePort = process.env.PORT || config.port;
 	portfinder.getPort((err, port) => {
@@ -105,10 +84,7 @@ module.exports = new Promise((resolve, reject) => {
 			devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
 				compilationSuccessInfo: {
 					messages: [`Your dev server is running here: http://${devWebpackConfig.devServer.host}:${port} ( proxy for ${config.appServerUrl} )`],
-				},
-				onErrors: config.notifyOnErrors
-					? createNotifierCallback()
-					: undefined
+				}
 			}));
 
 			resolve(devWebpackConfig)
diff --git a/teamapps-client/build/webpack.prod.conf.js b/teamapps-client/js-build/webpack.prod.conf.js
similarity index 59%
rename from teamapps-client/build/webpack.prod.conf.js
rename to teamapps-client/js-build/webpack.prod.conf.js
index a32eb7205..c685f0f73 100644
--- a/teamapps-client/build/webpack.prod.conf.js
+++ b/teamapps-client/js-build/webpack.prod.conf.js
@@ -1,39 +1,32 @@
 'use strict';
+const pkgJson = require('../package.json')
 const path = require('path');
 const webpack = require('webpack');
 const config = require('./config').build;
 const baseWebpackConfig = require('./webpack.base.conf')(config);
 const merge = require('webpack-merge');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
-const CleanWebpackPlugin = require('clean-webpack-plugin');
+const {CleanWebpackPlugin} = require('clean-webpack-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
 
 const webpackConfig = merge(baseWebpackConfig, {
-	devtool: config.productionSourceMap ? config.devtool : false,
+	devtool: "source-map",
 	output: {
 		path: path.resolve(__dirname, '../dist'),
 		filename: path.posix.join(config.assetsSubDirectory, 'js/[name].[chunkhash].js'),
 		chunkFilename: path.posix.join(config.assetsSubDirectory, 'js/[id].[chunkhash].js'),
-        publicPath: config.assetsPublicPath
-    },
+		publicPath: config.assetsPublicPath
+	},
 	plugins: [
-		new CleanWebpackPlugin(['dist'], {
-			root: path.resolve(__dirname, '..'),
-			verbose: true,
-			dry: false
+		new webpack.DefinePlugin({
+			'__TEAMAPPS_VERSION__': `"${pkgJson.version}"`
 		}),
-		new UglifyJsPlugin({
-			uglifyOptions: {
-				compress: {
-					warnings: false
-				},
-				ascii_only: true // https://www.tinymce.com/docs/advanced/usage-with-module-loaders/#minificationwithuglifyjs2
-			},
-			sourceMap: config.productionSourceMap,
-			parallel: true
+		new CleanWebpackPlugin({
+			verbose: true,
+			dry: true
 		}),
 		new HtmlWebpackPlugin({
-			filename: config.generatedIndexHtml,
+			filename: path.resolve(__dirname, '../dist/index.html'),
 			template: 'index.html',
 			inject: true,
 			minify: {
@@ -44,26 +37,30 @@ const webpackConfig = merge(baseWebpackConfig, {
 			chunksSortMode: 'dependency', // necessary to consistently work with multiple chunks via CommonsChunkPlugin
 			webSocketUrl: config.webSocketUrl
 		})
-	]
+	],
+	optimization: {
+		minimizer: [new TerserPlugin({
+			sourceMap: true,
+			parallel: true,
+			terserOptions: {
+				ascii_only: true // https://www.tinymce.com/docs/advanced/usage-with-module-loaders/#minificationwithuglifyjs2
+			}
+		})],
+	}
 });
 
-if (config.productionGzip) {
-	const CompressionWebpackPlugin = require('compression-webpack-plugin');
+const CompressionWebpackPlugin = require('compression-webpack-plugin');
 
-	webpackConfig.plugins.push(
-		new CompressionWebpackPlugin({
-			asset: '[path].gz[query]',
-			algorithm: 'gzip',
-			test: new RegExp(
-				'\\.(' +
-				config.productionGzipExtensions.join('|') +
-				')$'
-			),
-			threshold: 10240,
-			minRatio: 0.8
-		})
-	)
-}
+webpackConfig.plugins.push(
+	new CompressionWebpackPlugin({
+		filename: '[path].gz[query]',
+		algorithm: 'gzip',
+		test: /\.(js|css|html|svg)$/,
+		threshold: 10240,
+		minRatio: 0.8,
+		deleteOriginalAssets: false
+	})
+);
 
 if (config.bundleAnalyzerReport) {
 	const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
diff --git a/teamapps-client/less/bootstrap-imports.less b/teamapps-client/less/bootstrap-imports.less
new file mode 100644
index 000000000..fb3f1c30f
--- /dev/null
+++ b/teamapps-client/less/bootstrap-imports.less
@@ -0,0 +1,39 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+// Core variables and mixins
+@import "bootstrap/mixins.less";
+
+// Reset and dependencies
+@import "bootstrap/normalize.less";
+//@import "bootstrap/print.less";
+@import "bootstrap/glyphicons.less";
+
+// Core CSS
+@import "bootstrap/scaffolding.less";
+@import "bootstrap/type.less";
+@import "bootstrap/code.less";
+@import "bootstrap/forms.less";
+@import "bootstrap/buttons.less";
+
+// Components
+@import "bootstrap/progress-bars.less";
+
+// Utility classes
+@import "bootstrap/utilities.less";
diff --git a/teamapps-client/less/bootstrap/buttons.less b/teamapps-client/less/bootstrap/buttons.less
new file mode 100644
index 000000000..a7b1fe722
--- /dev/null
+++ b/teamapps-client/less/bootstrap/buttons.less
@@ -0,0 +1,77 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+// stylelint-disable selector-no-qualifying-type
+
+//
+// Buttons
+// --------------------------------------------------
+
+
+// Base styles
+// --------------------------------------------------
+
+.btn {
+  display: inline-block;
+  margin-bottom: 0; // For input.btn
+  font-weight: var(--ta-btn-font-weight);
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
+  padding: var(--ta-padding-base-vertical) var(--ta-padding-base-horizontal);
+  font-size: var(--ta-font-size);
+  line-height: var(--ta-line-height);
+  border-radius: var(--ta-border-radius);
+  user-select: none;
+
+  background-color: var(--ta-btn-default-bg);
+  border: 1px solid var(--ta-input-border-color);
+
+  &:hover,
+  &:focus,
+  &.focus {
+    background-color: var(--ta-bg-color);
+    text-decoration: none;
+  }
+
+  &:active,
+  &.active {
+    background-image: none;
+    outline: 0;
+    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
+  }
+
+  &.disabled,
+  &[disabled],
+  fieldset[disabled] & {
+    cursor: var(--ta-cursor-disabled);
+    opacity: .65;
+    box-shadow: none;
+  }
+
+  a& {
+    &.disabled,
+    fieldset[disabled] & {
+      pointer-events: none; // Future-proof disabling of clicks on `<a>` elements
+    }
+  }
+}
diff --git a/teamapps-client/less/bootstrap/code.less b/teamapps-client/less/bootstrap/code.less
new file mode 100644
index 000000000..3f43ad9df
--- /dev/null
+++ b/teamapps-client/less/bootstrap/code.less
@@ -0,0 +1,82 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+//
+// Code (inline and block)
+// --------------------------------------------------
+
+
+// Inline and block code styles
+code,
+kbd,
+pre,
+samp {
+  font-family: var(--ta-font-family-monospace);
+}
+
+// Inline code
+code {
+  padding: 2px 4px;
+  font-size: 90%;
+  color: #c7254e;
+  background-color: #f9f2f4;
+  border-radius: var(--ta-border-radius);
+}
+
+// User input typically entered via keyboard
+kbd {
+  padding: 2px 4px;
+  font-size: 90%;
+  color: var(--ta-text-color-inverted);
+  background-color: var(--ta-text-color);
+  border-radius: var(--ta-border-radius-small);
+  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25);
+
+  kbd {
+    padding: 0;
+    font-size: 100%;
+    font-weight: var(--ta-font-weight-bold);
+    box-shadow: none;
+  }
+}
+
+// Blocks of code
+pre {
+  display: block;
+  padding: var(--ta-half-line-height-computed);
+  margin: 0 0 var(--ta-half-line-height-computed);
+  font-size: 0.93em;
+  line-height: var(--ta-line-height);
+  color: var(--ta-pre-color);
+  word-break: break-all;
+  word-wrap: break-word;
+  background-color: var(--ta-bg-color-disabled);
+  border: 1px solid var(--ta-border-color-disabled);
+  border-radius: var(--ta-border-radius);
+
+  // Account for some code outputs that place code tags in pre tags
+  code {
+    padding: 0;
+    font-size: inherit;
+    color: inherit;
+    white-space: pre-wrap;
+    background-color: transparent;
+    border-radius: 0;
+  }
+}
diff --git a/teamapps-client/less/bootstrap/forms.less b/teamapps-client/less/bootstrap/forms.less
new file mode 100644
index 000000000..b45c4a13a
--- /dev/null
+++ b/teamapps-client/less/bootstrap/forms.less
@@ -0,0 +1,63 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+
+.form-control {
+  display: block;
+  width: 100%;
+  height: var(--ta-input-height); // Make inputs at least the height of their button counterpart (base line-height + padding + border)
+  padding: var(--ta-padding-base-vertical) var(--ta-padding-base-horizontal);
+  font-size: var(--ta-font-size);
+  line-height: var(--ta-line-height);
+  color: var(--ta-input-color);
+  background-color: var(--ta-input-bg);
+  background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
+  border: 1px solid var(--ta-input-border-color);
+  border-radius: var(--ta-input-border-radius); // Note: This has no effect on <select>s in some browsers, due to the limited stylability of <select>s in CSS.
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
+  transition: border-color ease-in-out var(--ta-color-transition-time), box-shadow ease-in-out var(--ta-color-transition-time);
+
+  // Unstyle the caret on `<select>`s in IE10+.
+  &::-ms-expand {
+    background-color: transparent;
+    border: 0;
+  }
+
+  // Disabled and read-only inputs
+  //
+  // HTML5 says that controls under a fieldset > legend:first-child won't be
+  // disabled if the fieldset is disabled. Due to implementation difficulty, we
+  // don't honor that edge case; we style them as disabled anyway.
+  &[disabled],
+  &[readonly],
+  fieldset[disabled] & {
+    background-color: var(--ta-input-bg-disabled);
+    opacity: 1; // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655
+  }
+
+  &[disabled],
+  fieldset[disabled] & {
+    cursor: var(--ta-cursor-disabled);
+  }
+
+  // Reset height for `textarea`s
+  textarea& {
+    height: auto;
+  }
+}
diff --git a/teamapps-client/less/bootstrap/glyphicons.less b/teamapps-client/less/bootstrap/glyphicons.less
new file mode 100644
index 000000000..f5383b79d
--- /dev/null
+++ b/teamapps-client/less/bootstrap/glyphicons.less
@@ -0,0 +1,326 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+// stylelint-disable value-list-comma-newline-after, value-list-comma-space-after, indentation, declaration-colon-newline-after, font-family-no-missing-generic-family-keyword
+
+//
+// Glyphicons for Bootstrap
+//
+// Since icons are fonts, they can be placed anywhere text is placed and are
+// thus automatically sized to match the surrounding child. To use, create an
+// inline element with the appropriate classes, like so:
+//
+// <a href="#"><span class="glyphicon glyphicon-star"></span> Star</a>
+
+// Import the fonts
+@font-face {
+  font-family: "Glyphicons Halflings";
+  src: url("@{icon-font-path}@{icon-font-name}.eot");
+  src: url("@{icon-font-path}@{icon-font-name}.eot?#iefix") format("embedded-opentype"),
+       url("@{icon-font-path}@{icon-font-name}.woff2") format("woff2"),
+       url("@{icon-font-path}@{icon-font-name}.woff") format("woff"),
+       url("@{icon-font-path}@{icon-font-name}.ttf") format("truetype"),
+       url("@{icon-font-path}@{icon-font-name}.svg#@{icon-font-svg-id}") format("svg");
+}
+
+// Catchall baseclass
+.glyphicon {
+  position: relative;
+  top: 1px;
+  display: inline-block;
+  font-family: "Glyphicons Halflings";
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+// Individual icons
+.glyphicon-asterisk               { &:before { content: "\002a"; } }
+.glyphicon-plus                   { &:before { content: "\002b"; } }
+.glyphicon-euro,
+.glyphicon-eur                    { &:before { content: "\20ac"; } }
+.glyphicon-minus                  { &:before { content: "\2212"; } }
+.glyphicon-cloud                  { &:before { content: "\2601"; } }
+.glyphicon-envelope               { &:before { content: "\2709"; } }
+.glyphicon-pencil                 { &:before { content: "\270f"; } }
+.glyphicon-glass                  { &:before { content: "\e001"; } }
+.glyphicon-music                  { &:before { content: "\e002"; } }
+.glyphicon-search                 { &:before { content: "\e003"; } }
+.glyphicon-heart                  { &:before { content: "\e005"; } }
+.glyphicon-star                   { &:before { content: "\e006"; } }
+.glyphicon-star-empty             { &:before { content: "\e007"; } }
+.glyphicon-user                   { &:before { content: "\e008"; } }
+.glyphicon-film                   { &:before { content: "\e009"; } }
+.glyphicon-th-large               { &:before { content: "\e010"; } }
+.glyphicon-th                     { &:before { content: "\e011"; } }
+.glyphicon-th-list                { &:before { content: "\e012"; } }
+.glyphicon-ok                     { &:before { content: "\e013"; } }
+.glyphicon-remove                 { &:before { content: "\e014"; } }
+.glyphicon-zoom-in                { &:before { content: "\e015"; } }
+.glyphicon-zoom-out               { &:before { content: "\e016"; } }
+.glyphicon-off                    { &:before { content: "\e017"; } }
+.glyphicon-signal                 { &:before { content: "\e018"; } }
+.glyphicon-cog                    { &:before { content: "\e019"; } }
+.glyphicon-trash                  { &:before { content: "\e020"; } }
+.glyphicon-home                   { &:before { content: "\e021"; } }
+.glyphicon-file                   { &:before { content: "\e022"; } }
+.glyphicon-time                   { &:before { content: "\e023"; } }
+.glyphicon-road                   { &:before { content: "\e024"; } }
+.glyphicon-download-alt           { &:before { content: "\e025"; } }
+.glyphicon-download               { &:before { content: "\e026"; } }
+.glyphicon-upload                 { &:before { content: "\e027"; } }
+.glyphicon-inbox                  { &:before { content: "\e028"; } }
+.glyphicon-play-circle            { &:before { content: "\e029"; } }
+.glyphicon-repeat                 { &:before { content: "\e030"; } }
+.glyphicon-refresh                { &:before { content: "\e031"; } }
+.glyphicon-list-alt               { &:before { content: "\e032"; } }
+.glyphicon-lock                   { &:before { content: "\e033"; } }
+.glyphicon-flag                   { &:before { content: "\e034"; } }
+.glyphicon-headphones             { &:before { content: "\e035"; } }
+.glyphicon-volume-off             { &:before { content: "\e036"; } }
+.glyphicon-volume-down            { &:before { content: "\e037"; } }
+.glyphicon-volume-up              { &:before { content: "\e038"; } }
+.glyphicon-qrcode                 { &:before { content: "\e039"; } }
+.glyphicon-barcode                { &:before { content: "\e040"; } }
+.glyphicon-tag                    { &:before { content: "\e041"; } }
+.glyphicon-tags                   { &:before { content: "\e042"; } }
+.glyphicon-book                   { &:before { content: "\e043"; } }
+.glyphicon-bookmark               { &:before { content: "\e044"; } }
+.glyphicon-print                  { &:before { content: "\e045"; } }
+.glyphicon-camera                 { &:before { content: "\e046"; } }
+.glyphicon-font                   { &:before { content: "\e047"; } }
+.glyphicon-bold                   { &:before { content: "\e048"; } }
+.glyphicon-italic                 { &:before { content: "\e049"; } }
+.glyphicon-text-height            { &:before { content: "\e050"; } }
+.glyphicon-text-width             { &:before { content: "\e051"; } }
+.glyphicon-align-left             { &:before { content: "\e052"; } }
+.glyphicon-align-center           { &:before { content: "\e053"; } }
+.glyphicon-align-right            { &:before { content: "\e054"; } }
+.glyphicon-align-justify          { &:before { content: "\e055"; } }
+.glyphicon-list                   { &:before { content: "\e056"; } }
+.glyphicon-indent-left            { &:before { content: "\e057"; } }
+.glyphicon-indent-right           { &:before { content: "\e058"; } }
+.glyphicon-facetime-video         { &:before { content: "\e059"; } }
+.glyphicon-picture                { &:before { content: "\e060"; } }
+.glyphicon-map-marker             { &:before { content: "\e062"; } }
+.glyphicon-adjust                 { &:before { content: "\e063"; } }
+.glyphicon-tint                   { &:before { content: "\e064"; } }
+.glyphicon-edit                   { &:before { content: "\e065"; } }
+.glyphicon-share                  { &:before { content: "\e066"; } }
+.glyphicon-check                  { &:before { content: "\e067"; } }
+.glyphicon-move                   { &:before { content: "\e068"; } }
+.glyphicon-step-backward          { &:before { content: "\e069"; } }
+.glyphicon-fast-backward          { &:before { content: "\e070"; } }
+.glyphicon-backward               { &:before { content: "\e071"; } }
+.glyphicon-play                   { &:before { content: "\e072"; } }
+.glyphicon-pause                  { &:before { content: "\e073"; } }
+.glyphicon-stop                   { &:before { content: "\e074"; } }
+.glyphicon-forward                { &:before { content: "\e075"; } }
+.glyphicon-fast-forward           { &:before { content: "\e076"; } }
+.glyphicon-step-forward           { &:before { content: "\e077"; } }
+.glyphicon-eject                  { &:before { content: "\e078"; } }
+.glyphicon-chevron-left           { &:before { content: "\e079"; } }
+.glyphicon-chevron-right          { &:before { content: "\e080"; } }
+.glyphicon-plus-sign              { &:before { content: "\e081"; } }
+.glyphicon-minus-sign             { &:before { content: "\e082"; } }
+.glyphicon-remove-sign            { &:before { content: "\e083"; } }
+.glyphicon-ok-sign                { &:before { content: "\e084"; } }
+.glyphicon-question-sign          { &:before { content: "\e085"; } }
+.glyphicon-info-sign              { &:before { content: "\e086"; } }
+.glyphicon-screenshot             { &:before { content: "\e087"; } }
+.glyphicon-remove-circle          { &:before { content: "\e088"; } }
+.glyphicon-ok-circle              { &:before { content: "\e089"; } }
+.glyphicon-ban-circle             { &:before { content: "\e090"; } }
+.glyphicon-arrow-left             { &:before { content: "\e091"; } }
+.glyphicon-arrow-right            { &:before { content: "\e092"; } }
+.glyphicon-arrow-up               { &:before { content: "\e093"; } }
+.glyphicon-arrow-down             { &:before { content: "\e094"; } }
+.glyphicon-share-alt              { &:before { content: "\e095"; } }
+.glyphicon-resize-full            { &:before { content: "\e096"; } }
+.glyphicon-resize-small           { &:before { content: "\e097"; } }
+.glyphicon-exclamation-sign       { &:before { content: "\e101"; } }
+.glyphicon-gift                   { &:before { content: "\e102"; } }
+.glyphicon-leaf                   { &:before { content: "\e103"; } }
+.glyphicon-fire                   { &:before { content: "\e104"; } }
+.glyphicon-eye-open               { &:before { content: "\e105"; } }
+.glyphicon-eye-close              { &:before { content: "\e106"; } }
+.glyphicon-warning-sign           { &:before { content: "\e107"; } }
+.glyphicon-plane                  { &:before { content: "\e108"; } }
+.glyphicon-calendar               { &:before { content: "\e109"; } }
+.glyphicon-random                 { &:before { content: "\e110"; } }
+.glyphicon-comment                { &:before { content: "\e111"; } }
+.glyphicon-magnet                 { &:before { content: "\e112"; } }
+.glyphicon-chevron-up             { &:before { content: "\e113"; } }
+.glyphicon-chevron-down           { &:before { content: "\e114"; } }
+.glyphicon-retweet                { &:before { content: "\e115"; } }
+.glyphicon-shopping-cart          { &:before { content: "\e116"; } }
+.glyphicon-folder-close           { &:before { content: "\e117"; } }
+.glyphicon-folder-open            { &:before { content: "\e118"; } }
+.glyphicon-resize-vertical        { &:before { content: "\e119"; } }
+.glyphicon-resize-horizontal      { &:before { content: "\e120"; } }
+.glyphicon-hdd                    { &:before { content: "\e121"; } }
+.glyphicon-bullhorn               { &:before { content: "\e122"; } }
+.glyphicon-bell                   { &:before { content: "\e123"; } }
+.glyphicon-certificate            { &:before { content: "\e124"; } }
+.glyphicon-thumbs-up              { &:before { content: "\e125"; } }
+.glyphicon-thumbs-down            { &:before { content: "\e126"; } }
+.glyphicon-hand-right             { &:before { content: "\e127"; } }
+.glyphicon-hand-left              { &:before { content: "\e128"; } }
+.glyphicon-hand-up                { &:before { content: "\e129"; } }
+.glyphicon-hand-down              { &:before { content: "\e130"; } }
+.glyphicon-circle-arrow-right     { &:before { content: "\e131"; } }
+.glyphicon-circle-arrow-left      { &:before { content: "\e132"; } }
+.glyphicon-circle-arrow-up        { &:before { content: "\e133"; } }
+.glyphicon-circle-arrow-down      { &:before { content: "\e134"; } }
+.glyphicon-globe                  { &:before { content: "\e135"; } }
+.glyphicon-wrench                 { &:before { content: "\e136"; } }
+.glyphicon-tasks                  { &:before { content: "\e137"; } }
+.glyphicon-filter                 { &:before { content: "\e138"; } }
+.glyphicon-briefcase              { &:before { content: "\e139"; } }
+.glyphicon-fullscreen             { &:before { content: "\e140"; } }
+.glyphicon-dashboard              { &:before { content: "\e141"; } }
+.glyphicon-paperclip              { &:before { content: "\e142"; } }
+.glyphicon-heart-empty            { &:before { content: "\e143"; } }
+.glyphicon-link                   { &:before { content: "\e144"; } }
+.glyphicon-phone                  { &:before { content: "\e145"; } }
+.glyphicon-pushpin                { &:before { content: "\e146"; } }
+.glyphicon-usd                    { &:before { content: "\e148"; } }
+.glyphicon-gbp                    { &:before { content: "\e149"; } }
+.glyphicon-sort                   { &:before { content: "\e150"; } }
+.glyphicon-sort-by-alphabet       { &:before { content: "\e151"; } }
+.glyphicon-sort-by-alphabet-alt   { &:before { content: "\e152"; } }
+.glyphicon-sort-by-order          { &:before { content: "\e153"; } }
+.glyphicon-sort-by-order-alt      { &:before { content: "\e154"; } }
+.glyphicon-sort-by-attributes     { &:before { content: "\e155"; } }
+.glyphicon-sort-by-attributes-alt { &:before { content: "\e156"; } }
+.glyphicon-unchecked              { &:before { content: "\e157"; } }
+.glyphicon-expand                 { &:before { content: "\e158"; } }
+.glyphicon-collapse-down          { &:before { content: "\e159"; } }
+.glyphicon-collapse-up            { &:before { content: "\e160"; } }
+.glyphicon-log-in                 { &:before { content: "\e161"; } }
+.glyphicon-flash                  { &:before { content: "\e162"; } }
+.glyphicon-log-out                { &:before { content: "\e163"; } }
+.glyphicon-new-window             { &:before { content: "\e164"; } }
+.glyphicon-record                 { &:before { content: "\e165"; } }
+.glyphicon-save                   { &:before { content: "\e166"; } }
+.glyphicon-open                   { &:before { content: "\e167"; } }
+.glyphicon-saved                  { &:before { content: "\e168"; } }
+.glyphicon-import                 { &:before { content: "\e169"; } }
+.glyphicon-export                 { &:before { content: "\e170"; } }
+.glyphicon-send                   { &:before { content: "\e171"; } }
+.glyphicon-floppy-disk            { &:before { content: "\e172"; } }
+.glyphicon-floppy-saved           { &:before { content: "\e173"; } }
+.glyphicon-floppy-remove          { &:before { content: "\e174"; } }
+.glyphicon-floppy-save            { &:before { content: "\e175"; } }
+.glyphicon-floppy-open            { &:before { content: "\e176"; } }
+.glyphicon-credit-card            { &:before { content: "\e177"; } }
+.glyphicon-transfer               { &:before { content: "\e178"; } }
+.glyphicon-cutlery                { &:before { content: "\e179"; } }
+.glyphicon-header                 { &:before { content: "\e180"; } }
+.glyphicon-compressed             { &:before { content: "\e181"; } }
+.glyphicon-earphone               { &:before { content: "\e182"; } }
+.glyphicon-phone-alt              { &:before { content: "\e183"; } }
+.glyphicon-tower                  { &:before { content: "\e184"; } }
+.glyphicon-stats                  { &:before { content: "\e185"; } }
+.glyphicon-sd-video               { &:before { content: "\e186"; } }
+.glyphicon-hd-video               { &:before { content: "\e187"; } }
+.glyphicon-subtitles              { &:before { content: "\e188"; } }
+.glyphicon-sound-stereo           { &:before { content: "\e189"; } }
+.glyphicon-sound-dolby            { &:before { content: "\e190"; } }
+.glyphicon-sound-5-1              { &:before { content: "\e191"; } }
+.glyphicon-sound-6-1              { &:before { content: "\e192"; } }
+.glyphicon-sound-7-1              { &:before { content: "\e193"; } }
+.glyphicon-copyright-mark         { &:before { content: "\e194"; } }
+.glyphicon-registration-mark      { &:before { content: "\e195"; } }
+.glyphicon-cloud-download         { &:before { content: "\e197"; } }
+.glyphicon-cloud-upload           { &:before { content: "\e198"; } }
+.glyphicon-tree-conifer           { &:before { content: "\e199"; } }
+.glyphicon-tree-deciduous         { &:before { content: "\e200"; } }
+.glyphicon-cd                     { &:before { content: "\e201"; } }
+.glyphicon-save-file              { &:before { content: "\e202"; } }
+.glyphicon-open-file              { &:before { content: "\e203"; } }
+.glyphicon-level-up               { &:before { content: "\e204"; } }
+.glyphicon-copy                   { &:before { content: "\e205"; } }
+.glyphicon-paste                  { &:before { content: "\e206"; } }
+// The following 2 Glyphicons are omitted for the time being because
+// they currently use Unicode codepoints that are outside the
+// Basic Multilingual Plane (BMP). Older buggy versions of WebKit can't handle
+// non-BMP codepoints in CSS string escapes, and thus can't display these two icons.
+// Notably, the bug affects some older versions of the Android Browser.
+// More info: https://github.com/twbs/bootstrap/issues/10106
+// .glyphicon-door                   { &:before { content: "\1f6aa"; } }
+// .glyphicon-key                    { &:before { content: "\1f511"; } }
+.glyphicon-alert                  { &:before { content: "\e209"; } }
+.glyphicon-equalizer              { &:before { content: "\e210"; } }
+.glyphicon-king                   { &:before { content: "\e211"; } }
+.glyphicon-queen                  { &:before { content: "\e212"; } }
+.glyphicon-pawn                   { &:before { content: "\e213"; } }
+.glyphicon-bishop                 { &:before { content: "\e214"; } }
+.glyphicon-knight                 { &:before { content: "\e215"; } }
+.glyphicon-baby-formula           { &:before { content: "\e216"; } }
+.glyphicon-tent                   { &:before { content: "\26fa"; } }
+.glyphicon-blackboard             { &:before { content: "\e218"; } }
+.glyphicon-bed                    { &:before { content: "\e219"; } }
+.glyphicon-apple                  { &:before { content: "\f8ff"; } }
+.glyphicon-erase                  { &:before { content: "\e221"; } }
+.glyphicon-hourglass              { &:before { content: "\231b"; } }
+.glyphicon-lamp                   { &:before { content: "\e223"; } }
+.glyphicon-duplicate              { &:before { content: "\e224"; } }
+.glyphicon-piggy-bank             { &:before { content: "\e225"; } }
+.glyphicon-scissors               { &:before { content: "\e226"; } }
+.glyphicon-bitcoin                { &:before { content: "\e227"; } }
+.glyphicon-btc                    { &:before { content: "\e227"; } }
+.glyphicon-xbt                    { &:before { content: "\e227"; } }
+.glyphicon-yen                    { &:before { content: "\00a5"; } }
+.glyphicon-jpy                    { &:before { content: "\00a5"; } }
+.glyphicon-ruble                  { &:before { content: "\20bd"; } }
+.glyphicon-rub                    { &:before { content: "\20bd"; } }
+.glyphicon-scale                  { &:before { content: "\e230"; } }
+.glyphicon-ice-lolly              { &:before { content: "\e231"; } }
+.glyphicon-ice-lolly-tasted       { &:before { content: "\e232"; } }
+.glyphicon-education              { &:before { content: "\e233"; } }
+.glyphicon-option-horizontal      { &:before { content: "\e234"; } }
+.glyphicon-option-vertical        { &:before { content: "\e235"; } }
+.glyphicon-menu-hamburger         { &:before { content: "\e236"; } }
+.glyphicon-modal-window           { &:before { content: "\e237"; } }
+.glyphicon-oil                    { &:before { content: "\e238"; } }
+.glyphicon-grain                  { &:before { content: "\e239"; } }
+.glyphicon-sunglasses             { &:before { content: "\e240"; } }
+.glyphicon-text-size              { &:before { content: "\e241"; } }
+.glyphicon-text-color             { &:before { content: "\e242"; } }
+.glyphicon-text-background        { &:before { content: "\e243"; } }
+.glyphicon-object-align-top       { &:before { content: "\e244"; } }
+.glyphicon-object-align-bottom    { &:before { content: "\e245"; } }
+.glyphicon-object-align-horizontal{ &:before { content: "\e246"; } }
+.glyphicon-object-align-left      { &:before { content: "\e247"; } }
+.glyphicon-object-align-vertical  { &:before { content: "\e248"; } }
+.glyphicon-object-align-right     { &:before { content: "\e249"; } }
+.glyphicon-triangle-right         { &:before { content: "\e250"; } }
+.glyphicon-triangle-left          { &:before { content: "\e251"; } }
+.glyphicon-triangle-bottom        { &:before { content: "\e252"; } }
+.glyphicon-triangle-top           { &:before { content: "\e253"; } }
+.glyphicon-console                { &:before { content: "\e254"; } }
+.glyphicon-superscript            { &:before { content: "\e255"; } }
+.glyphicon-subscript              { &:before { content: "\e256"; } }
+.glyphicon-menu-left              { &:before { content: "\e257"; } }
+.glyphicon-menu-right             { &:before { content: "\e258"; } }
+.glyphicon-menu-down              { &:before { content: "\e259"; } }
+.glyphicon-menu-up                { &:before { content: "\e260"; } }
diff --git a/teamapps-client/less/bootstrap/mixins.less b/teamapps-client/less/bootstrap/mixins.less
new file mode 100644
index 000000000..cffee3b65
--- /dev/null
+++ b/teamapps-client/less/bootstrap/mixins.less
@@ -0,0 +1,27 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+// Mixins
+// --------------------------------------------------
+
+// Skins
+@import "mixins/gradients.less";
+
+// Layout
+@import "mixins/clearfix.less";
diff --git a/teamapps-client/less/bootstrap/mixins/clearfix.less b/teamapps-client/less/bootstrap/mixins/clearfix.less
new file mode 100644
index 000000000..55e92314f
--- /dev/null
+++ b/teamapps-client/less/bootstrap/mixins/clearfix.less
@@ -0,0 +1,41 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+// Clearfix
+//
+// For modern browsers
+// 1. The space content is one way to avoid an Opera bug when the
+//    contenteditable attribute is included anywhere else in the document.
+//    Otherwise it causes space to appear at the top and bottom of elements
+//    that are clearfixed.
+// 2. The use of `table` rather than `block` is only necessary if using
+//    `:before` to contain the top-margins of child elements.
+//
+// Source: http://nicolasgallagher.com/micro-clearfix-hack/
+
+.clearfix() {
+  &:before,
+  &:after {
+    display: table; // 2
+    content: " "; // 1
+  }
+  &:after {
+    clear: both;
+  }
+}
diff --git a/teamapps-client/less/bootstrap/mixins/gradients.less b/teamapps-client/less/bootstrap/mixins/gradients.less
new file mode 100644
index 000000000..b792d2993
--- /dev/null
+++ b/teamapps-client/less/bootstrap/mixins/gradients.less
@@ -0,0 +1,26 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+// stylelint-disable value-no-vendor-prefix, selector-max-id
+
+#gradient {
+  .striped(@color: rgba(255, 255, 255, .15); @angle: 45deg) {
+    background-image: linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent);
+  }
+}
diff --git a/teamapps-client/less/bootstrap/normalize.less b/teamapps-client/less/bootstrap/normalize.less
new file mode 100644
index 000000000..3616e239b
--- /dev/null
+++ b/teamapps-client/less/bootstrap/normalize.less
@@ -0,0 +1,448 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+// stylelint-disable
+
+/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
+
+//
+// 1. Set default font family to sans-serif.
+// 2. Prevent iOS and IE text size adjust after device orientation change,
+//    without disabling user zoom.
+//
+
+html {
+  font-family: sans-serif; // 1
+  -ms-text-size-adjust: 100%; // 2
+  -webkit-text-size-adjust: 100%; // 2
+}
+
+//
+// Remove default margin.
+//
+
+body {
+  margin: 0;
+}
+
+// HTML5 display definitions
+// ==========================================================================
+
+//
+// Correct `block` display not defined for any HTML5 element in IE 8/9.
+// Correct `block` display not defined for `details` or `summary` in IE 10/11
+// and Firefox.
+// Correct `block` display not defined for `main` in IE 11.
+//
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section,
+summary {
+  display: block;
+}
+
+//
+// 1. Correct `inline-block` display not defined in IE 8/9.
+// 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
+//
+
+audio,
+canvas,
+progress,
+video {
+  display: inline-block; // 1
+  vertical-align: baseline; // 2
+}
+
+//
+// Prevent modern browsers from displaying `audio` without controls.
+// Remove excess height in iOS 5 devices.
+//
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+//
+// Address `[hidden]` styling not present in IE 8/9/10.
+// Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
+//
+
+[hidden],
+template {
+  display: none;
+}
+
+// Links
+// ==========================================================================
+
+//
+// Remove the gray background color from active links in IE 10.
+//
+
+a {
+  background-color: transparent;
+}
+
+//
+// Improve readability of focused elements when they are also in an
+// active/hover state.
+//
+
+a:active,
+a:hover {
+  outline: 0;
+}
+
+// Text-level semantics
+// ==========================================================================
+
+//
+// 1. Remove the bottom border in Chrome 57- and Firefox 39-.
+// 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+//
+
+abbr[title] {
+  border-bottom: none; // 1
+  text-decoration: underline; // 2
+  text-decoration: underline dotted; // 2
+}
+
+//
+// Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
+//
+
+b,
+strong {
+  font-weight: bold;
+}
+
+//
+// Address styling not present in Safari and Chrome.
+//
+
+dfn {
+  font-style: italic;
+}
+
+//
+// Address variable `h1` font-size and margin within `section` and `article`
+// contexts in Firefox 4+, Safari, and Chrome.
+//
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+//
+// Address styling not present in IE 8/9.
+//
+
+mark {
+  background: #ff0;
+  color: #000;
+}
+
+//
+// Address inconsistent and variable font size in all browsers.
+//
+
+small {
+  font-size: 80%;
+}
+
+//
+// Prevent `sub` and `sup` affecting `line-height` in all browsers.
+//
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sup {
+  top: -0.5em;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+// Embedded content
+// ==========================================================================
+
+//
+// Remove border when inside `a` element in IE 8/9/10.
+//
+
+img {
+  border: 0;
+}
+
+//
+// Correct overflow not hidden in IE 9/10/11.
+//
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+// Grouping content
+// ==========================================================================
+
+//
+// Address margin not present in IE 8/9 and Safari.
+//
+
+figure {
+  margin: 1em 40px;
+}
+
+//
+// Address differences between Firefox and other browsers.
+//
+
+hr {
+  box-sizing: content-box;
+  height: 0;
+}
+
+//
+// Contain overflow in all browsers.
+//
+
+pre {
+  overflow: auto;
+}
+
+//
+// Address odd `em`-unit font size rendering in all browsers.
+//
+
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+
+// Forms
+// ==========================================================================
+
+//
+// Known limitation: by default, Chrome and Safari on OS X allow very limited
+// styling of `select`, unless a `border` property is set.
+//
+
+//
+// 1. Correct color not being inherited.
+//    Known issue: affects color of disabled elements.
+// 2. Correct font properties not being inherited.
+// 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
+//
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  color: inherit; // 1
+  font: inherit; // 2
+  margin: 0; // 3
+}
+
+//
+// Address `overflow` set to `hidden` in IE 8/9/10/11.
+//
+
+button {
+  overflow: visible;
+}
+
+//
+// Address inconsistent `text-transform` inheritance for `button` and `select`.
+// All other form control elements do not inherit `text-transform` values.
+// Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
+// Correct `select` style inheritance in Firefox.
+//
+
+button,
+select {
+  text-transform: none;
+}
+
+//
+// 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+//    and `video` controls.
+// 2. Correct inability to style clickable `input` types in iOS.
+// 3. Improve usability and consistency of cursor style between image-type
+//    `input` and others.
+//
+
+button,
+html input[type="button"], // 1
+input[type="reset"],
+input[type="submit"] {
+  -webkit-appearance: button; // 2
+  cursor: pointer; // 3
+}
+
+//
+// Re-set default cursor for disabled elements.
+//
+
+button[disabled],
+html input[disabled] {
+  cursor: default;
+}
+
+//
+// Remove inner padding and border in Firefox 4+.
+//
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+//
+// Address Firefox 4+ setting `line-height` on `input` using `!important` in
+// the UA stylesheet.
+//
+
+input {
+  line-height: normal;
+}
+
+//
+// It's recommended that you don't attempt to style these elements.
+// Firefox's implementation doesn't respect box-sizing, padding, or width.
+//
+// 1. Address box sizing set to `content-box` in IE 8/9/10.
+// 2. Remove excess padding in IE 8/9/10.
+//
+
+input[type="checkbox"],
+input[type="radio"] {
+  box-sizing: border-box; // 1
+  padding: 0; // 2
+}
+
+//
+// Fix the cursor style for Chrome's increment/decrement buttons. For certain
+// `font-size` values of the `input`, it causes the cursor style of the
+// decrement button to change from `default` to `text`.
+//
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+//
+// 1. Address `appearance` set to `searchfield` in Safari and Chrome.
+// 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
+//
+
+input[type="search"] {
+  -webkit-appearance: textfield; // 1
+  box-sizing: content-box; //2
+}
+
+//
+// Remove inner padding and search cancel button in Safari and Chrome on OS X.
+// Safari (but not Chrome) clips the cancel button when the search input has
+// padding (and `textfield` appearance).
+//
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+//
+// Define consistent border, margin, and padding.
+//
+
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+//
+// 1. Correct `color` not being inherited in IE 8/9/10/11.
+// 2. Remove padding so people aren't caught out if they zero out fieldsets.
+//
+
+legend {
+  border: 0; // 1
+  padding: 0; // 2
+}
+
+//
+// Remove default vertical scrollbar in IE 8/9/10/11.
+//
+
+textarea {
+  overflow: auto;
+}
+
+//
+// Don't inherit the `font-weight` (applied by a rule above).
+// NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+//
+
+optgroup {
+  font-weight: bold;
+}
+
+// Tables
+// ==========================================================================
+
+//
+// Remove most spacing between table cells.
+//
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+td,
+th {
+  padding: 0;
+}
diff --git a/teamapps-client/less/bootstrap/progress-bars.less b/teamapps-client/less/bootstrap/progress-bars.less
new file mode 100644
index 000000000..a7b0df7df
--- /dev/null
+++ b/teamapps-client/less/bootstrap/progress-bars.less
@@ -0,0 +1,88 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+// stylelint-disable at-rule-no-vendor-prefix
+
+//
+// Progress bars
+// --------------------------------------------------
+
+
+// Bar animations
+// -------------------------
+
+// WebKit
+@-webkit-keyframes progress-bar-stripes {
+  from  { background-position: 40px 0; }
+  to    { background-position: 0 0; }
+}
+
+// Spec and IE10+
+@keyframes progress-bar-stripes {
+  from  { background-position: 40px 0; }
+  to    { background-position: 0 0; }
+}
+
+
+// Bar itself
+// -------------------------
+
+// Outer container
+.progress {
+  height: var(--ta-line-height-computed);
+  margin-bottom: var(--ta-line-height-computed);
+  overflow: hidden;
+  background-color: rgba(0, 0, 0, .1);
+  border-radius: var(--ta-border-radius);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
+}
+
+// Bar of progress
+.progress-bar {
+  float: left;
+  width: 0%;
+  height: 100%;
+  font-size: var(--ta-font-size-small);
+  line-height: var(--ta-line-height-computed);
+  color: var(--ta-text-color-inverted);
+  text-align: center;
+  background-color: var(--ta-color-primary);
+  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
+  transition: width .6s ease;
+}
+
+// Striped bars
+//
+// `.progress-striped .progress-bar` is deprecated as of v3.2.0 in favor of the
+// `.progress-bar-striped` class, which you just add to an existing
+// `.progress-bar`.
+.progress-striped .progress-bar,
+.progress-bar-striped {
+  #gradient > .striped();
+  background-size: 40px 40px;
+}
+
+// Call animation for the active one
+//
+// `.progress.active .progress-bar` is deprecated as of v3.2.0 in favor of the
+// `.progress-bar.active` approach.
+.progress.active .progress-bar,
+.progress-bar.active {
+  animation: progress-bar-stripes 2s linear infinite;
+}
diff --git a/teamapps-client/less/bootstrap/scaffolding.less b/teamapps-client/less/bootstrap/scaffolding.less
new file mode 100644
index 000000000..f55a23df8
--- /dev/null
+++ b/teamapps-client/less/bootstrap/scaffolding.less
@@ -0,0 +1,78 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+//
+// Scaffolding
+// --------------------------------------------------
+
+
+// Reset the box-sizing
+//
+// Heads up! This reset may cause conflicts with some third-party widgets.
+// For recommendations on resolving such conflicts, see
+// https://getbootstrap.com/docs/3.4/getting-started/#third-box-sizing
+* {
+  box-sizing: border-box;
+}
+*:before,
+*:after {
+  box-sizing: border-box;
+}
+
+
+// Body reset
+
+html {
+  font-size: 10px;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+body {
+  font-family: var(--ta-font-family-base);
+  font-size: var(--ta-font-size);
+  line-height: var(--ta-line-height);
+  color: var(--ta-text-color);
+  background-color: var(--ta-bg-color);
+}
+
+// Reset fonts for relevant elements
+input,
+button,
+select,
+textarea {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+
+a {
+  color: var(--ta-link-color);
+  text-decoration: none;
+
+  &:hover,
+  &:focus {
+    color: var(--ta-link-hover-color);
+    text-decoration: var(--ta-link-hover-decoration);
+  }
+}
+
+img {
+  vertical-align: middle;
+}
diff --git a/teamapps-client/less/bootstrap/type.less b/teamapps-client/less/bootstrap/type.less
new file mode 100644
index 000000000..8b8326ae2
--- /dev/null
+++ b/teamapps-client/less/bootstrap/type.less
@@ -0,0 +1,122 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+// stylelint-disable selector-list-comma-newline-after, selector-no-qualifying-type
+
+//
+// Typography
+// --------------------------------------------------
+
+// Headings
+// -------------------------
+
+h1, h2, h3, h4, h5, h6,
+.h1, .h2, .h3, .h4, .h5, .h6 {
+  font-family: var(--ta-headings-font-family);
+  font-weight: var(--ta-headings-font-weight);
+  line-height: var(var(--ta-headings-line-height));
+  color: var(--ta-headings-color);
+}
+
+h1, .h1,
+h2, .h2,
+h3, .h3 {
+  margin-top: .55em;
+  margin-bottom: .3em;
+}
+h4, .h4,
+h5, .h5,
+h6, .h6 {
+  margin-top: .6em;
+  margin-bottom: .4em;
+}
+
+h1, .h1 { font-size: var(--ta-font-size-h1); }
+h2, .h2 { font-size: var(--ta-font-size-h2); }
+h3, .h3 { font-size: var(--ta-font-size-h3); }
+h4, .h4 { font-size: var(--ta-font-size-h4); }
+h5, .h5 { font-size: var(--ta-font-size-h5); }
+h6, .h6 { font-size: var(--ta-font-size-h6); }
+
+p {
+  margin: 0 0 var(--ta-half-line-height-computed) 0;
+}
+
+// Emphasis & misc
+// -------------------------
+
+// Alignment
+.text-left           { text-align: left; }
+.text-right          { text-align: right; }
+.text-center         { text-align: center; }
+.text-justify        { text-align: justify; }
+.text-nowrap         { white-space: nowrap; }
+
+// Lists
+// -------------------------
+
+// Unordered and Ordered lists
+ul,
+ol {
+  margin-top: 0;
+  margin-bottom: var(--ta-half-line-height-computed);
+  ul,
+  ol {
+    margin-bottom: 0;
+  }
+}
+
+// List options
+
+// Unstyled keeps list items block level, just removes default browser padding and list-style
+.list-unstyled {
+  padding-left: 0;
+  list-style: none;
+}
+
+// Inline turns list items into inline-block
+.list-inline {
+  .list-unstyled();
+  margin-left: -5px;
+
+  > li {
+    display: inline-block;
+    padding-right: 5px;
+    padding-left: 5px;
+  }
+}
+
+// Misc
+// -------------------------
+
+// Blockquotes
+blockquote {
+  padding: var(--ta-half-line-height-computed) var(--ta-line-height);
+  margin: 0 0 var(--ta-line-height-computed);
+  border-left: 5px solid var(--ta-input-border-color);
+
+  p,
+  ul,
+  ol {
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+}
diff --git a/teamapps-icon/src/main/java/org/teamapps/icons/api/SimpleIcon.java b/teamapps-client/less/bootstrap/utilities.less
similarity index 67%
rename from teamapps-icon/src/main/java/org/teamapps/icons/api/SimpleIcon.java
rename to teamapps-client/less/bootstrap/utilities.less
index 45b03f998..5ce41e5fa 100644
--- a/teamapps-icon/src/main/java/org/teamapps/icons/api/SimpleIcon.java
+++ b/teamapps-client/less/bootstrap/utilities.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,18 +17,25 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-package org.teamapps.icons.api;
+// stylelint-disable declaration-no-important
 
-public interface SimpleIcon extends Icon {
+//
+// Utility classes
+// --------------------------------------------------
 
-	String getIconName();
 
-	String getIconLibraryId();
+// Floats
+// -------------------------
 
-	default String getQualifiedIconId(IconTheme theme, boolean baseStyle) {
-		return getIconLibraryId() + SEPARATOR +
-				theme.getStyleId(baseStyle) + SEPARATOR +
-				getIconName();
-	}
+.clearfix {
+  .clearfix();
+}
 
+// Toggling content
+// -------------------------
+.invisible {
+  visibility: hidden;
+}
+.hidden {
+  display: none !important;
 }
diff --git a/teamapps-client/less/components/FullCalendarMonthGrid.less b/teamapps-client/less/components/FullCalendarMonthGrid.less
new file mode 100644
index 000000000..e09b59b8d
--- /dev/null
+++ b/teamapps-client/less/components/FullCalendarMonthGrid.less
@@ -0,0 +1,118 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+.fc-month-grid-view {
+  overflow: auto;
+  cursor: default;
+
+  svg {
+    width: 100%;
+    display: block;
+  }
+
+  .fc-month-grid-day,
+  .fc-month-grid-day-name,
+  .fc-month-grid-week-number,
+  .day-number {
+    font-size: 5pt;
+    text-anchor: middle;
+    font-weight: 500;
+  }
+
+  .fc-month-grid-day-name {
+    fill: var(--ta-text-color-gray);
+  }
+
+  .fc-month-grid-week-number {
+    text-anchor: end;
+    fill: var(--ta-text-color-gray);
+    font-weight: var(--ta-font-weight-light);
+    cursor: pointer;
+    &:hover {
+      text-decoration: underline;
+      text-decoration-color: var(--ta-text-color-gray);
+    }
+  }
+
+  .fc-month-grid-month-frame {
+    fill: none;
+    stroke: black;
+  }
+
+  .fc-month-grid-month-name {
+    fill: var(--ta-text-color);
+    font-weight: var(--ta-font-weight-light);
+    cursor: pointer;
+    &:hover {
+      text-decoration: underline;
+      text-decoration-color: var(--ta-text-color);
+    }
+  }
+
+  .fc-month-grid-day {
+    cursor: pointer;
+
+    .day-number {
+      fill: var(--ta-text-color);
+    }
+
+    &.weekend .day-number {
+      fill: #888;
+    }
+
+    .day-occupation-background-circle,
+    .day-occupation {
+      fill: transparent; // not none, since we need the pointer events!
+      stroke: var(--ta-calendar-day-occupation-background-circle-color);
+      stroke-width: 1;
+    }
+
+    .day-occupation {
+      stroke-width: 1;
+    }
+
+    &:hover {
+      .day-number {
+        text-decoration: underline;
+        text-decoration-color: var(--ta-text-color);
+      }
+    }
+
+    &.other-month {
+      .day-number {
+        font-weight: var(--ta-font-weight-light);
+      }
+
+      .day-occupation-background-circle,
+      .day-occupation {
+        display: none;
+      }
+    }
+
+    &.free .day-occupation-background-circle {
+      stroke: transparent;
+    }
+
+    &.today .day-occupation-background-circle {
+      fill: var(--ta-calendar-day-occupation-today-bg);
+      stroke-width: 1;
+      stroke: var(--ta-calendar-day-occupation-today-bg);
+    }
+  }
+}
diff --git a/teamapps-client/less/components/UiAbsoluteLayout.less b/teamapps-client/less/components/UiAbsoluteLayout.less
index 66380067b..3fa740da8 100644
--- a/teamapps-client/less/components/UiAbsoluteLayout.less
+++ b/teamapps-client/less/components/UiAbsoluteLayout.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -21,6 +21,6 @@
   position: relative;
 
   > * {
-    position: absolute;
+    position: absolute !important;
   }
 }
diff --git a/teamapps-client/less/components/UiApplicationLayout.less b/teamapps-client/less/components/UiApplicationLayout.less
index e3fca006b..d38589e75 100644
--- a/teamapps-client/less/components/UiApplicationLayout.less
+++ b/teamapps-client/less/components/UiApplicationLayout.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -21,19 +21,15 @@
   display: flex;
   flex-direction: column;
 
-  perspective: 1000px;
-
-
-
   > .UiApplicationLayout_toolbarContainer {
     flex: 0 0 auto;
-    margin: @grid-gutter-width @grid-gutter-width 0 @grid-gutter-width;
+    margin: var(--ta-padding-base-horizontal) var(--ta-padding-base-horizontal) 0 var(--ta-padding-base-horizontal);
   }
 
   > .UiApplicationLayout_contentContainerWrapper {
     flex: 1 1 1px;
     position: relative;
-    margin: @grid-gutter-width;
+    margin: var(--ta-padding-base-horizontal);
     .UiApplicationLayout_contentContainer {
       position: absolute;
       top: 0;
diff --git a/teamapps-client/less/components/UiCalendar.less b/teamapps-client/less/components/UiCalendar.less
index d8ce6c65c..5134a61c9 100644
--- a/teamapps-client/less/components/UiCalendar.less
+++ b/teamapps-client/less/components/UiCalendar.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,236 +17,233 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-//.fc-view-container *,
-//.fc-view-container *:before,
-//.fc-view-container *:after {
-//  -webkit-box-sizing: border-box;
-//}
-
 .UiCalendar {
 
   overflow: hidden;
+  
+  > .calendar {
+    .fc-toolbar {
+      margin-bottom: 3px;
+    }
 
-  .fc-toolbar {
-    margin-bottom: 3px;
-  }
-  .fc-button {
-    outline: none;
-    .button-style-item();
-    &:hover:not(.fc-state-disabled) {
-      .button-style-item-glow;
+    .fc-button {
+      outline: none;
+      .button-style-item();
+
+      &:hover:not(.fc-state-disabled) {
+        .button-style-item-glow;
+      }
     }
-  }
-  .fc-button-group {
-    .fc-button:not(:first-child) {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
+
+    .fc-button-group {
+      .fc-button:not(:first-child) {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+
+      .fc-button:not(:last-child) {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
     }
-    .fc-button:not(:last-child) {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
+
+    .fc-view-container {
+      overflow: hidden;
     }
-  }
 
-  .fc-view-container {
-    overflow: hidden;
-  }
-  &.table-border .fc-view-container {
-    border: 1px solid rgba(0, 0, 0, 0.09);
-  }
+    &.table-border .fc-view-container {
+      border: 1px solid rgba(0, 0, 0, 0.09);
+    }
 
-  .fc-icon-left-single-arrow:after,
-  .fc-icon-right-single-arrow:after {
-    top: -1px;
-    left: -2px;
-  }
-  .fc-icon:after {
-    position: relative;
-    margin: 0;
-  }
+    .fc-icon-left-single-arrow:after,
+    .fc-icon-right-single-arrow:after {
+      top: -1px;
+      left: -2px;
+    }
 
-  th.fc-week-number.fc-widget-header,
-  th.fc-day-header.fc-widget-header {
-    padding-top: 5px;
-    padding-bottom: 5px;
-  }
+    .fc-icon:after {
+      position: relative;
+      margin: 0;
+    }
 
-  .fc-event-container {
-    margin: 0 0 0 0 !important;
-  }
-  .fc-day-grid-event {
-    margin: 1px 0 0 0 !important;
-  }
+    th.fc-week-number.fc-widget-header,
+    th.fc-day-header.fc-widget-header {
+      padding-top: 5px;
+      padding-bottom: 5px;
+    }
 
-  .fc-day-header, .fc-week-number {
-    background-color: transparent;
-  }
-  th,
-  td,
-  thead,
-  tbody,
-  .fc-divider,
-  .fc-row,
-  .fc-popover,
-  .fc-row .fc-bgevent-skeleton td{
-    border-color: #ECECEC;
-  }
-  .fc-content > img {
-    float: left;
-    margin: 0 5px 0 0;
-  }
+    .fc-event-container {
+      margin: 0 0 0 0 !important;
+    }
 
-  .fc-row.fc-week.fc-widget-content {
-    overflow: hidden;
-  }
+    .fc-day-grid-event {
+      margin: 1px 0 0 0 !important;
+    }
 
-  .fc-row.fc-widget-header {
-    font-size: 15px;
-    position: relative;
-    &:after {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      content: ' ';
+    .fc-day-header, .fc-week-number {
       background-color: transparent;
-      top: 0;
-      left: 0;
-      //box-shadow: 0 -3px 10px 3px rgba(0, 0, 0, .4);
     }
-  }
 
-  .fc-agenda-view .fc-week-number,
-  .fc-agenda-view .fc-axis {
-    border-right-width: 2px !important;
-  }
+    .fc-day-header a,
+    .fc-week-number a,
+    .fc-day-number {
+      color: var(--ta-text-color);
+    }
 
-  .fc-week-number {
-    font-weight: bold;
-  }
+    th,
+    td,
+    thead,
+    tbody,
+    .fc-divider,
+    .fc-row,
+    .fc-popover
+    {
+      border-color: var(--ta-calendar-grid-border-color);
+    }
 
-  .fc-bg td.fc-week-number.fc-widget-content {
-    //position: relative;
-    //&:after {
-    //  position: absolute;
-    //  width: 100%;
-    //  height: ~"calc(100% + 1px)";
-    //  content: ' ';
-    //  background-color: transparent;
-    //  top: -1px;
-    //  left: 0;
-    //  //box-shadow: -3px 0 10px 3px rgba(0, 0, 0, .3);
-    //}
-    //&:before {
-    //  position: absolute;
-    //  width: 100%;
-    //  height: 100%;
-    //  content: ' ';
-    //  background-color: rgba(255, 255, 255, .9); // overwritten by javascript!
-    //  top: 0;
-    //  left: 0;
-    //}
-  }
-  .fc-head .fc-widget-header {
-    border-top-width: 0;
-    border-right-width: 0;
-  }
-  td.fc-widget-header,
-  td.fc-week-number {
-    border-left-width: 0 !important;
-  }
-  .fc-body > * > td.fc-widget-content {
-    border-width: 0px;
-  }
+    .fc-divider {
+      background-color: transparent;
+    }
 
-  .fc-bg {
-    background-color: transparent;
-  }
-  .fc-event {
-    border-radius: 0px;
-  }
+    .fc-nonbusiness {
+      background-color: var(--ta-calendar-grid-non-business-bg-color);
+    }
 
-  .fc-today {
-    //box-shadow: inset 0 0 0 2px orange;
-    //border-width: 0 0 0 1px;
-    background-color: rgba(240, 220, 78, 0.2);
-  }
+    .fc-row.fc-week.fc-widget-content {
+      overflow: hidden;
+    }
 
-  .fc-day-number {
-    padding-right: 3px;
-    float: none !important;
-  }
-  .fc-day-number.fc-today {
-    font-weight: bold;
-    padding-right: 5px;
-  }
+    .fc-row.fc-widget-header {
+      font-size: 15px;
+      position: relative;
+    }
 
-  .fc-multi-month-content {
-    svg {
-      width: 100%;
-      height: 100%;
-      display: block;
+    .fc-agenda-view .fc-week-number,
+    .fc-agenda-view .fc-axis {
+      border-right-width: 2px !important;
     }
-  }
 
-  .fc-day-top {
-    padding: 2px;
-  }
+    .fc-week-number,
+    .fc-day-number,
+    .fc-widget-header,
+    .fc-axis {
+      font-weight: var(--ta-font-weight-light);
+    }
+
+    .fc-head .fc-widget-header {
+      border-top-width: 0;
+      border-right-width: 0;
+    }
+
+    td.fc-widget-header,
+    td.fc-week-number {
+      border-left-width: 0 !important;
+    }
+
+    .fc-body > * > td.fc-widget-content {
+      border-width: 0px;
+    }
+
+    .fc-bg {
+      background-color: transparent;
+    }
+
+    .fc-today {
+      //box-shadow: inset 0 0 0 2px orange;
+      //border-width: 0 0 0 1px;
+      background-color: rgba(240, 220, 78, 0.2);
+    }
+
+    .fc-day-number {
+      padding-right: 3px;
+      float: none !important;
+    }
+
+    .fc-day-top {
+      padding: 2px;
+    }
 
-  .fc-day-top, .fc-week-number {
-    font-size: 15px;
+    .fc-day-top, .fc-week-number {
+      font-size: 15px;
+    }
+
+    .fc-day-grid {
+      .fc-not-end {
+        clip-path: polygon(0 0, 100% 0, calc(100% - 4px) 25%, 100% 50%, calc(100% - 4px) 75%, 100% 100%, 0 100%);
+      }
+
+      .fc-not-start {
+        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 4px 75%, 0% 50%, 4px 25%);
+      }
+
+      .fc-not-start.fc-not-end {
+        clip-path: polygon(0 0, 100% 0, calc(100% - 4px) 25%, 100% 50%, calc(100% - 4px) 75%, 100% 100%, 0 100%, 4px 75%, 0% 50%, 4px 25%);
+      }
+    }
+
+    .fc-time-grid {
+      .fc-not-end {
+        clip-path: polygon(0 0, 0 100%, 16.6% calc(100% - 4px), 33.3% 100%, 50% calc(100% - 4px), 66.6% 100% , 83.3% calc(100% - 4px), 100% 100%, 100% 0);
+      }
+
+      .fc-not-start {
+        clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0, 83.3% 4px, 66.6% 0, 50% 4px, 33.3% 0, 16.6% 4px);
+      }
+
+      .fc-not-start.fc-not-end {
+        clip-path: polygon(0 0, 0 100%, 16.6% calc(100% - 4px), 33.3% 100%, 50% calc(100% - 4px), 66.6% 100% , 83.3% calc(100% - 4px), 100% 100%, 100% 0, 83.3% 4px, 66.6% 0, 50% 4px, 33.3% 0, 16.6% 4px);
+      }
+
+      .fc-event .fc-time {
+        display: inline-block;
+      }
+    }
+
+    .fc-h-event.fc-allow-mouse-resize .fc-resizer {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      &:after {
+        content: 'ǁ';
+        display: block;
+        position: relative;
+        left: -2px;
+      }
+    }
   }
 }
 
-.UiCalendar-month-frame {
-  fill: none;
-  stroke: black;
-}
+.fc-event {
+  border-radius: 0;
+  overflow: hidden;
+  font-size: 1em;
 
-.UiCalendar-month-name {
-  fill: @state-info-text;
-}
+  .fc-time {
+    font-weight: 500;
+  }
 
-.UiCalendar-day,
-.UiCalendar-day-name,
-.UiCalendar-week-number{
-  font-size: 5pt;
-  text-anchor: middle;
-  font-weight: 500;
-  &.weekend {
-    fill: #888;
+  .fc-icon {
+    margin-top: 1px;
   }
-  &.other-month {
-    fill: #ddd;
 
-    .day-occupation-background-circle,
-    .day-occupation {
-      opacity: .25;
-    }
+  &.template-content .fc-content {
+    padding: 0;
   }
 }
 
-.UiCalendar-day.free .day-occupation-background-circle {
-  visibility: hidden;
+.fc-day-grid-event, .fc-time-grid-event {
+  .fc-icon {
+    margin-right: 2px;
+  }
 }
 
-.UiCalendar-day .day-occupation-background-circle,
-.UiCalendar-day .day-occupation {
-  fill: none;
-  stroke: #ebebeb;
-  stroke-width: .5;
+.fc-content {
+  padding: 0 2px;
 }
 
-.UiCalendar-day .day-occupation {
-  fill: none;
-  stroke-width: .7;
+.fc-event.all-day {
+  border-left-width: 3px;
 }
 
-.UiCalendar-day-name {
-  fill: #999;
-}
+@import "FullCalendarMonthGrid";
 
-.UiCalendar-week-number {
-  text-anchor: end;
-  fill: #aaa;
-  font-weight: 100;
-}
diff --git a/teamapps-client/less/components/UiChatDisplay.less b/teamapps-client/less/components/UiChatDisplay.less
index 084297361..b09989938 100644
--- a/teamapps-client/less/components/UiChatDisplay.less
+++ b/teamapps-client/less/components/UiChatDisplay.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -18,23 +18,25 @@
  * =========================LICENSE_END==================================
  */
 .UiChatDisplay {
-  overflow: auto;
+  overflow: hidden auto;
   padding: 6px;
 
   .message {
     display: grid;
-    grid-template-columns: auto 1fr;
+    grid-template-columns: auto 1fr auto;
     grid-template-rows: auto;
-    grid-template-areas: "icon userNickname" "icon text" "icon photos" "icon files";
+    grid-template-areas: "userimage userNickname" "userimage text" "userimage photos" "userimage files";
 
     .user-image {
-      grid-area: icon;
+      grid-area: userimage;
+      justify-self: end;
       box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, .2);
       border: 1px solid rgba(0, 0, 0, .2);
-      margin: 2px 7px 0 0;
+      margin: 0 5px 0 0;
       width: 40px;
       height: 40px;
-      border-radius: 50%;
+      border-radius: var(--ta-border-radius-small);
+      object-fit: cover;
     }
     .user-nickname {
       grid-area: userNickname;
@@ -42,6 +44,8 @@
     }
     .text {
       grid-area: text;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
     .photos {
       grid-area: photos;
@@ -71,9 +75,36 @@
         }
         .file-size {
           grid-area: size;
-          color: @text-color;
+          color: var(--ta-text-color);
         }
       }
     }
+    &:not(.deleted) .deleted-icon{
+      display: none;
+    }
+    &.deleted {
+      filter: grayscale(1) opacity(0.5);
+      grid-template-columns: auto auto 1fr;
+      grid-template-areas: "userimage userNickname deletedicon";
+      align-items: center;
+
+      //.user-nickname {
+      //  align-self: center;
+      //}
+      .text, .photos, .files {
+        display: none;
+      }
+
+      .deleted-icon {
+        .img;
+        .img-16;
+        margin-left: 4px;
+        grid-area: deletedicon;
+      }
+    }
+
+    &:not(:last-child) {
+      margin-bottom: 3px;
+    }
   }
 }
diff --git a/teamapps-client/less/components/UiChatInput.less b/teamapps-client/less/components/UiChatInput.less
index c45d86764..0e11b749d 100644
--- a/teamapps-client/less/components/UiChatInput.less
+++ b/teamapps-client/less/components/UiChatInput.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -23,7 +23,7 @@
   grid-template-rows: auto;
   grid-template-areas: "files files files" "text attach send";
   
-  border-top: 1px solid @input-border;
+  border-top: 1px solid var(--ta-input-border-color);
   padding: 4px 4px;
   background-color: white;
 
diff --git a/teamapps-client/less/components/UiCollapsible.less b/teamapps-client/less/components/UiCollapsible.less
new file mode 100644
index 000000000..bc3ac29f1
--- /dev/null
+++ b/teamapps-client/less/components/UiCollapsible.less
@@ -0,0 +1,72 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+.UiCollapsible {
+  .collapsible-header {
+    display: flex;
+    align-items: center;
+    position: relative;
+    padding: 3px;
+
+    &:before, &:after {
+      position: absolute;
+      display: block;
+      width: 100%;
+      left: 0;
+      content: '';
+      height: 1px;
+    }
+
+    &:before {
+      bottom: 1px;
+      background: linear-gradient(to right, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 85%, rgba(0, 0, 0, 0) 100%);;
+    }
+
+    &:after {
+      bottom: 0;
+      background: linear-gradient(to right, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .5) 85%, rgba(255, 255, 255, 0) 100%);;
+    }
+
+    .expander {
+      width: 16px;
+      height: 16px;
+      border-radius: 4px;
+      border: 1px solid transparent;
+      transition: background-color 300ms, border 300ms, transform .1s;;
+
+      &:hover {
+        border: 1px solid var(--ta-input-border-color);
+        background-color: var(--ta-hover-color);
+      }
+    }
+
+    .icon {
+      margin: 3px;
+    }
+
+    .caption {
+    }
+  }
+  .collapsible-body {
+    overflow: auto;
+  }
+  &.expanding .collapsible-body {
+    overflow: hidden;
+  }
+}
diff --git a/teamapps-client/less/components/UiComponent.less b/teamapps-client/less/components/UiComponent.less
index 0bea1e36b..f56d04c21 100644
--- a/teamapps-client/less/components/UiComponent.less
+++ b/teamapps-client/less/components/UiComponent.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-client/less/micro-components/UiAudioActivityDisplay.less b/teamapps-client/less/components/UiDefaultMultiProgressDisplay.less
similarity index 61%
rename from teamapps-client/less/micro-components/UiAudioActivityDisplay.less
rename to teamapps-client/less/components/UiDefaultMultiProgressDisplay.less
index 50076de0c..ba813374b 100644
--- a/teamapps-client/less/micro-components/UiAudioActivityDisplay.less
+++ b/teamapps-client/less/components/UiDefaultMultiProgressDisplay.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,16 +17,29 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-.UiAudioActivityDisplay {
+.UiDefaultMultiProgressDisplay {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   position: relative;
 
-  .level-div {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    background: linear-gradient(0deg, #192e83 0%, #0fb83f 30%, #0fb83f 60%, yellow 80%, red 95%);
-    background-attachment: scroll;
-    transition: height 200ms linear, background-position 200ms linear;
-    will-change: height, background-position;
+  cursor: pointer;
+
+  .spinner {
+    width: 11px;
+    height: 11px;
+    margin-right: 3px;
+    margin-bottom: 1px;
   }
+
+  //.running-count {
+  //  margin-left: -14px;
+  //  width: 14px;
+  //  height: 14px;
+  //  text-align: center;
+  //  display:flex;
+  //  align-items: center;
+  //  justify-content: center;
+  //  font-size: 10px;
+  //}
 }
diff --git a/teamapps-client/less/components/UiDocumentViewer.less b/teamapps-client/less/components/UiDocumentViewer.less
index a4cdf9826..a0ab9c9da 100644
--- a/teamapps-client/less/components/UiDocumentViewer.less
+++ b/teamapps-client/less/components/UiDocumentViewer.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-client/less/components/UiDummyComponent.less b/teamapps-client/less/components/UiDummyComponent.less
index 54af7d7c3..ab9a41090 100644
--- a/teamapps-client/less/components/UiDummyComponent.less
+++ b/teamapps-client/less/components/UiDummyComponent.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -26,12 +26,8 @@
   box-shadow: 0 0 0 1px rgba(0, 0, 0, .1);
 
   .blink {
-    animation: blinker 1s linear infinite;
+    .ta-blink();
   }
 }
                            
-@keyframes blinker {
-  50% { opacity: .1; }
-}                                                                                
-
 
diff --git a/teamapps-client/less/components/UiElegantPanel.less b/teamapps-client/less/components/UiElegantPanel.less
index 3f2557e07..4f7cb892b 100644
--- a/teamapps-client/less/components/UiElegantPanel.less
+++ b/teamapps-client/less/components/UiElegantPanel.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -50,36 +50,6 @@
             height: 100%;
           }
         }
-
-        // TODO add these kind of options to UiItemView instead of hard-coding it to UiElegantPanel
-        .custom-entry-template-wrapper {
-          transform: scale(1);
-          transition: transform .4s !important;
-          background: none !important;
-          border: none !important;
-          box-shadow: none !important;
-
-          .image-template {
-            transition: box-shadow .4s !important;
-          }
-          .text-element {
-            transition: color .4s, text-shadow .4s !important;
-          }
-
-          &:hover {
-            transform: scale(1.2);
-
-            .image-template {
-              box-shadow: inset 0 0 0 2px #EEE !important;
-            }
-
-            .text-element {
-              color: #EEE;
-              text-shadow: 1px 1px 5px rgba(0, 0, 0, .3), -1px -1px 0 rgba(0, 0, 0, .3), 1px -1px 0 rgba(0, 0, 0, .3), -1px 1px 0 rgba(0, 0, 0, .3), 1px 1px 0 rgba(0, 0, 0, .3);
-            }
-          }
-        }
-
       }
     }
   }
diff --git a/teamapps-client/less/components/UiFieldGroup.less b/teamapps-client/less/components/UiFieldGroup.less
new file mode 100644
index 000000000..b406291de
--- /dev/null
+++ b/teamapps-client/less/components/UiFieldGroup.less
@@ -0,0 +1,41 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+
+.UiFieldGroup {
+
+  display: flex;
+  flex-wrap: nowrap;
+  width: 100%;
+
+  > *:not(:first-child) {
+    &, > * {
+      border-top-left-radius: 0 !important;
+      border-bottom-left-radius: 0 !important;
+    }
+  }
+
+  > *:not(:last-child) {
+    &, > * {
+      border-top-right-radius: 0 !important;
+      border-bottom-right-radius: 0 !important;
+      border-right-width: 0 !important;
+    }
+  }
+}
diff --git a/teamapps-client/less/components/UiFlexContainer.less b/teamapps-client/less/components/UiFlexContainer.less
index 4d5e50ff5..b57df664e 100644
--- a/teamapps-client/less/components/UiFlexContainer.less
+++ b/teamapps-client/less/components/UiFlexContainer.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-client/less/components/UiFloatingComponent.less b/teamapps-client/less/components/UiFloatingComponent.less
new file mode 100644
index 000000000..99fc1675a
--- /dev/null
+++ b/teamapps-client/less/components/UiFloatingComponent.less
@@ -0,0 +1,92 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+
+.UiFloatingComponent {
+  position: absolute;
+  z-index: var(--ta-zindex-floating-component);
+  background-color: var(--ta-bg-color);
+
+  transition: left .3s, right .3s;
+
+  pointer-events: none;
+  > * {
+    pointer-events: all;
+  }
+
+  .expander-handle {
+    width: 12px;
+    height: 30px;
+    position: absolute;
+    background-color: var(--ta-bg-color-solid);
+    border: 1px solid var(--ta-input-border-color);
+
+    &.position-top-left,
+    &.position-top-right{
+      top: 0;
+    }
+    &.position-bottom-left,
+    &.position-bottom-right{
+      bottom: 0;
+    }
+    &.position-top-left,
+    &.position-bottom-left{
+      right: -12px;
+      border-top-right-radius: 4px;
+      border-bottom-right-radius: 4px;
+    }
+    &.position-top-right,
+    &.position-bottom-right {
+      left: -12px;
+      border-top-left-radius: 4px;
+      border-bottom-left-radius: 4px;
+    }
+  }
+
+  > .expander-handle:after {
+    content: '';
+    display: block;
+    height: 100%;
+    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gQ3JlYXRlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIC0tPgoKPHN2ZwogICB2aWV3Qm94PSIwIDAgMTAwIDEwMCIKICAgdmVyc2lvbj0iMS4xIgogICBpZD0ic3ZnNTE2IgogICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxkZWZzCiAgICAgaWQ9ImRlZnM1MTMiIC8+CiAgPGcKICAgICBpZD0ibGF5ZXIxIj4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0iZmlsbDojMDAwMDAwO3N0cm9rZS13aWR0aDowLjI2NDU4MyIKICAgICAgIGQ9Ik0gNDAsMjAgNzAsNTAgNDAsODAgMzAsNzUgNTUsNTAgMzAsMjUiCiAgICAgICBpZD0icGF0aDIxODciIC8+CiAgPC9nPgo8L3N2Zz4K);
+    background-position: center;
+    background-repeat: no-repeat;
+  }
+
+  &.expanded > .expander-handle {
+    &.position-top-left,
+    &.position-bottom-left{
+      &:after {
+        transform: rotate(180deg);
+      }
+    }
+  }
+  &:not(.expanded) > .expander-handle {
+    &.position-top-right,
+    &.position-bottom-right{
+      &:after {
+        transform: rotate(180deg);
+      }
+    }
+  }
+
+  > :not(.expander-handle) {
+    width: 100%;
+    height: 100%;
+  }
+}
diff --git a/teamapps-client/less/components/UiFormDesigner.less b/teamapps-client/less/components/UiFormDesigner.less
index 2e9b65f9a..d4a2ce67f 100644
--- a/teamapps-client/less/components/UiFormDesigner.less
+++ b/teamapps-client/less/components/UiFormDesigner.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-client/less/components/UiFormDesignerFieldChooser.less b/teamapps-client/less/components/UiFormDesignerFieldChooser.less
index 7a0c89977..1f123e202 100644
--- a/teamapps-client/less/components/UiFormDesignerFieldChooser.less
+++ b/teamapps-client/less/components/UiFormDesignerFieldChooser.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-client/less/components/UiGauge.less b/teamapps-client/less/components/UiGauge.less
index c99c16da4..21657ba24 100644
--- a/teamapps-client/less/components/UiGauge.less
+++ b/teamapps-client/less/components/UiGauge.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-client/less/components/UiGridForm.less b/teamapps-client/less/components/UiGridForm.less
index 016bb83e7..c37931399 100644
--- a/teamapps-client/less/components/UiGridForm.less
+++ b/teamapps-client/less/components/UiGridForm.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -76,13 +76,17 @@
       }
     }
     &:not(.has-header-data):not(.collapsible) {
-      .header {
+      > .header {
         display: none;
       }
     }
 
     .body {
       display: grid;
+
+      .field-wrapper:has(> .invisible-component) {
+        display: none;
+      }
     }
 
     &.fill-remaining-height:not(.collapsed) {
diff --git a/teamapps-client/less/components/UiGridTemplate.less b/teamapps-client/less/components/UiGridTemplate.less
index a25e1741f..2b79486ed 100644
--- a/teamapps-client/less/components/UiGridTemplate.less
+++ b/teamapps-client/less/components/UiGridTemplate.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -37,6 +37,8 @@
   }
 
   .UiIconElement {
+    background-size: contain;
     background-repeat: no-repeat;
+    background-position: center;
   }
 }
diff --git a/teamapps-client/less/components/UiHtmlView.less b/teamapps-client/less/components/UiHtmlView.less
index bdca23d2b..8d0b1a0ab 100644
--- a/teamapps-client/less/components/UiHtmlView.less
+++ b/teamapps-client/less/components/UiHtmlView.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -18,5 +18,6 @@
  * =========================LICENSE_END==================================
  */
 .UiHtmlView {
-
+  //padding: 0.1px; // prevent margin collapsing (e.g. h1 in content)
+  //position: relative;
 }
diff --git a/teamapps-client/less/components/UiIFrame.less b/teamapps-client/less/components/UiIFrame.less
index cce2e3e86..16dbdb279 100644
--- a/teamapps-client/less/components/UiIFrame.less
+++ b/teamapps-client/less/components/UiIFrame.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-client/less/components/UiImageCropper.less b/teamapps-client/less/components/UiImageCropper.less
index 16f45a874..6fdbeeea3 100644
--- a/teamapps-client/less/components/UiImageCropper.less
+++ b/teamapps-client/less/components/UiImageCropper.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,12 +17,15 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-@teamapps-handle-size: 10px;
 
 .UiImageCropper {
   display: flex;
   align-items: center;
   justify-content: space-around;
+  overflow: hidden;
+  position: relative;
+  user-select: none;
+  background-color: #777;
 
   img {
     display: inline-block;
@@ -45,28 +48,21 @@
     }
 
     .ui-resizable-handle {
-      width: 10px;
-      height: 10px;
-      border: 1px solid transparent;
-      transition: background-color 2s, border 1s;
-    }
-
-    &:focus .ui-resizable-handle,
-    &:hover .ui-resizable-handle,
-    .ui-resizable-handle:hover,
-    .ui-resizable-handle:active {
+      width: var(--ta-resize-square-handle-size);
+      height: var(--ta-resize-square-handle-size);
       background-color: rgba(255, 255, 255, .5);
-      border: 1px solid rgba(127, 127, 127, .5);
+      border: 1px solid black;
     }
+
   }
 
   .ui-resizable-n,
   .ui-resizable-s {
-    left: ~"calc(50% - " @teamapps-handle-size / 2 ~")";
+    left: calc(50% - var(--ta-resize-square-handle-size) / 2);
   }
   .ui-resizable-e,
   .ui-resizable-w {
-    top: ~"calc(50% - " @teamapps-handle-size / 2 ~")";
+    top: calc(50% - var(--ta-resize-square-handle-size) / 2);
   }
 
   .ui-resizable-se {
diff --git a/teamapps-client/less/components/UiImageDisplay.less b/teamapps-client/less/components/UiImageDisplay.less
index ff75b4365..6724e0f5e 100644
--- a/teamapps-client/less/components/UiImageDisplay.less
+++ b/teamapps-client/less/components/UiImageDisplay.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-client/less/components/UiInfiniteItemView.less b/teamapps-client/less/components/UiInfiniteItemView.less
index 66031f692..d2ad9622a 100644
--- a/teamapps-client/less/components/UiInfiniteItemView.less
+++ b/teamapps-client/less/components/UiInfiniteItemView.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,6 +19,7 @@
  */
 .UiInfiniteItemView {
   user-select: none;
+  overflow: hidden; // infiniteItemViews never know their size. slickgrid depends on size information via JavaScript. Make sure the container element can shrink while slickgrid is still fixed size (before javascript call, which itself depends on the size of the container element)
 
   > .slickgrid {
     height: 100%;
diff --git a/teamapps-client/less/components/UiInfiniteItemView2.less b/teamapps-client/less/components/UiInfiniteItemView2.less
new file mode 100644
index 000000000..b912bf67a
--- /dev/null
+++ b/teamapps-client/less/components/UiInfiniteItemView2.less
@@ -0,0 +1,60 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+.UiInfiniteItemView2 {
+  user-select: none;
+  overflow: auto;
+
+  --item-position-animation-time: .5s;
+
+  > .grid {
+    position: relative;
+    overflow: hidden;
+    contain: strict; // !!!
+
+    .item-wrapper {
+      position: absolute;
+      transition: background 0.1s, border-color 0.05s, top var(--item-position-animation-time) ease, left var(--item-position-animation-time) ease;
+      contain: strict; // !!!
+      display: flex;
+    }
+  }
+
+  &.selection-enabled .grid .item-wrapper {
+    &:hover {
+      background-color: var(--ta-hover-color);
+    }
+
+    &.selected {
+      background-color: var(--ta-selection-color);
+    }
+  }
+
+  &:not(.selection-enabled) .grid .item-wrapper {
+    border: 1px solid transparent;
+
+    &:hover {
+      .button-style-item();
+    }
+
+    &:active {
+      .button-style-item-lowered();
+    }
+  }
+}
diff --git a/teamapps-client/less/components/UiItemView.less b/teamapps-client/less/components/UiItemView.less
index cd1db3eec..a6c4f238f 100644
--- a/teamapps-client/less/components/UiItemView.less
+++ b/teamapps-client/less/components/UiItemView.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -27,15 +27,17 @@
         position: absolute;
         display: block;
         width: 100%;
-        bottom: 1px;
         left: 0;
         content: '';
         height: 1px;
-        background: linear-gradient(to right, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 85%, rgba(0, 0, 0, 0) 100%);
+      }
+      &:before {
+        bottom: 1px;
+        background: linear-gradient(to right, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 85%, rgba(0, 0, 0, 0) 100%);;
       }
       &:after {
         bottom: 0;
-        background: linear-gradient(to right, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .5) 85%, rgba(255, 255, 255, 0) 100%);
+        background: linear-gradient(to right, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .5) 85%, rgba(255, 255, 255, 0) 100%);;
       }
     }
   }
@@ -51,13 +53,12 @@
       align-items: flex-start;
       border: 1px solid transparent; 
     }
-    .tr-highlighted-entry,
     .tr-selected-entry {
       background-color: transparent;
     }
   }
 
-  &.background-mode-light .tr-tree-entry-and-expander-wrapper {
+  .tr-treebox .tr-tree-entryTree .tr-tree-entry-outer-wrapper .tr-tree-entry-and-expander-wrapper { // artificially increase css rule precedence...
     &:hover {
       .button-style-item();
     }
@@ -66,23 +67,4 @@
     }
   }
 
-  &.background-mode-opaque .tr-tree-entry-and-expander-wrapper {
-    .button-style-item();
-    &:hover {
-      .button-style-item-glow();
-    }
-    &:active {
-      .button-style-item-glow2();
-    }
-  }
-
-  &.background-mode-dark .tr-tree-entry-and-expander-wrapper {
-    &:hover {
-      .button-style-item-dark();
-    }
-    &:active {
-      .button-style-item-glow-dark();
-    }
-  }
-
 }
diff --git a/teamapps-client/less/components/UiLiveStreamComponent.less b/teamapps-client/less/components/UiLiveStreamComponent.less
index bf7dac462..3ba3987f9 100644
--- a/teamapps-client/less/components/UiLiveStreamComponent.less
+++ b/teamapps-client/less/components/UiLiveStreamComponent.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,8 +17,6 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-@spinner-container-background: rgba(255, 255, 255, .3);
-
 .UiLiveStreamComponent {
   position: relative;
   overflow: hidden;
@@ -74,21 +72,21 @@
     right: 5px;
     min-height: 2em;
 
-    @media (min-width: @screen-sm-min) {
-      font-size: 160%;
-      left: 10px;
-      right: 10px;
-    }
-    @media (min-width: @screen-md-min) {
-      font-size: 200%;
-      left: 20px;
-      right: 20px;
-    }
-    @media (min-width: @screen-lg-min) {
-      font-size: 250%;
-      left: 30px;
-      right: 30px;
-    }
+    //@media (min-width: @screen-sm-min) {
+    //  font-size: 160%;
+    //  left: 10px;
+    //  right: 10px;
+    //}
+    //@media (min-width: @screen-md-min) {
+    //  font-size: 200%;
+    //  left: 20px;
+    //  right: 20px;
+    //}
+    //@media (min-width: @screen-lg-min) {
+    //  font-size: 250%;
+    //  left: 30px;
+    //  right: 30px;
+    //}
   }
 }
 
@@ -105,7 +103,7 @@
       left: 0;
       bottom: 0;
       right: 0;
-      background-color: @spinner-container-background;
+      background-color: var(--ta-bg-dim-overlay);
     }
     video {
       width: 100%;
@@ -128,7 +126,7 @@
       left: 0;
       bottom: 0;
       right: 0;
-      background-color: @spinner-container-background;
+      background-color: var(--ta-bg-dim-overlay);
     }
     video {
       width: 100%;
diff --git a/teamapps-client/less/components/UiMap.less b/teamapps-client/less/components/UiMap.less
index 729329cb0..d54cdaf69 100644
--- a/teamapps-client/less/components/UiMap.less
+++ b/teamapps-client/less/components/UiMap.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -27,7 +27,7 @@
     height: auto !important;
     background-color: transparent;
     border: none;
-    border-radius: @border-radius-base;
+    border-radius: var(--ta-border-radius);
 
     * {
       cursor: pointer !important;
diff --git a/teamapps-ui-api/src/main/dto/UiData.dto b/teamapps-client/less/components/UiMap2.less
similarity index 82%
rename from teamapps-ui-api/src/main/dto/UiData.dto
rename to teamapps-client/less/components/UiMap2.less
index a6dfe4e31..4107e115c 100644
--- a/teamapps-ui-api/src/main/dto/UiData.dto
+++ b/teamapps-client/less/components/UiMap2.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,8 +17,9 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-@TypeScriptFactory
-class UiCurrencyValue {
-	required long value; // in cents
-	required String currencyCode; //ISO 4217
+.UiMap2 {
+  .mapboxgl-canvas {
+    outline: none;
+  }
 }
+
diff --git a/teamapps-client/less/components/UiMediaSoupV3WebRtcClient.less b/teamapps-client/less/components/UiMediaSoupV3WebRtcClient.less
new file mode 100644
index 000000000..5690c068c
--- /dev/null
+++ b/teamapps-client/less/components/UiMediaSoupV3WebRtcClient.less
@@ -0,0 +1,194 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+.UiMediaSoupV3WebRtcClient {
+  --activity-bar-color-inactive: orange;
+  --activity-bar-color-active: #d40000;
+
+  --activity-bar-color: var(--activity-bar-color-inactive);
+
+  &.active {
+    --activity-bar-color: var(--activity-bar-color-active);
+  }
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  .video-container {
+    position: relative;
+    line-height: 0;
+    transition: box-shadow 500ms;
+    box-shadow: 0 10px 10px -10px var(--activity-bar-color);
+    overflow: hidden;
+    background-color: #eee;
+
+    .image {
+      display: inline-block;
+      object-fit: contain;
+    }
+
+    .video {
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      display: inline-block;
+      background-color: #eee;
+      background-size: contain;
+      background-position: center;
+      background-repeat: no-repeat;
+      transition: width 200ms, height 200ms, transform 200ms;
+
+      &.mirrored {
+        transform: rotateY(180deg);
+      }
+    }
+
+    &:after { // activity bar
+      position: absolute;
+      display: block;
+      content: ' ';
+      left: 0;
+      bottom: 0;
+      width: 100%;
+      height: 1%;
+      min-height: 2px;
+      max-height: 3px;
+      background-color: var(--activity-bar-color);
+      transition: background-color 500ms;
+    }
+
+    > .bitrate-display {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      padding: 3px;
+      background-color: #00000055;
+      color: #ddd;
+      line-height: 1.5;
+
+      > .bitrate-audio:before {
+        content: 'audio: '
+      }
+
+      > .bitrate-video:before {
+        content: 'video: '
+      }
+    }
+
+    > .tools-and-icons-bar {
+      position: absolute;
+      bottom: 5px;
+      height: 11%;
+      min-height: 16px;
+      max-height: 50px;
+      padding: 0 3px;
+      display: flex;
+      width: 100%; // firefox...
+      justify-content: space-between;
+      align-items: end;
+      z-index: 1;
+
+      > .tool-buttons {
+        flex: 0 0 auto;
+        display: flex;
+
+        .UiToolButton .img:hover:not(:active) {
+          filter: drop-shadow(1px 1px 3px #0007);
+        }
+      }
+
+      > .icons {
+        flex: 1 0 auto;
+        height: 100%;
+        display: flex;
+        justify-content: flex-end;
+
+        > .icon {
+          height: 100%;
+          width: auto;
+        }
+      }
+    }
+
+    > .spinner-wrapper {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: rgba(255, 255, 255, .5);
+    }
+
+    .unmute-button-wrapper {
+      position: absolute;
+      z-index: 2;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .unmute-button {
+        max-width: 40%;
+        max-height: 40%;
+        filter: drop-shadow(5px 5px 5px #222);
+        transition: max-width .2s, max-height .2s;
+
+        &:hover {
+          max-width: 45%;
+          max-height: 45%;
+        }
+      }
+    }
+  }
+
+  .caption {
+    padding-top: 4px;
+    text-align: center;
+  }
+
+  .profile {
+    color: white;
+    background-color: black;
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+
+  &.state-idle,
+  &.state-streaming {
+    .spinner-wrapper {
+      display: none;
+    }
+  }
+
+  &.state-connecting {
+    .spinner-wrapper {
+      // default display
+    }
+  }
+}
diff --git a/teamapps-client/less/components/UiMediaTrackGraph.less b/teamapps-client/less/components/UiMediaTrackGraph.less
index f8cee3cb1..ab7cc6585 100644
--- a/teamapps-client/less/components/UiMediaTrackGraph.less
+++ b/teamapps-client/less/components/UiMediaTrackGraph.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-client/less/components/UiMobileLayout.less b/teamapps-client/less/components/UiMobileLayout.less
index ba8c3cd3a..045de2dff 100644
--- a/teamapps-client/less/components/UiMobileLayout.less
+++ b/teamapps-client/less/components/UiMobileLayout.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -23,8 +23,6 @@
   display: flex;
   flex-direction: column;
 
-  perspective: 1000px;
-
   > .toolbar-container {
     flex: 0 0 auto;
 
@@ -33,7 +31,7 @@
       box-shadow: none;
     }
     .UiToolbar {
-      border-bottom: 1px solid @btn-default-border;
+      border-bottom: 1px solid var(--ta-btn-default-border);
     }
   }
 
@@ -48,11 +46,8 @@
       left: 0;
       top: 0;
 
-      &:not(.active) {
-        .pseudo-hidden;
-      }
-
       > * {
+        width: 100%;
         height: 100%;
 
         &.UiPanel {
@@ -64,15 +59,6 @@
           }
         }
       }
-
-      &.forward-offsite {
-        top: 0;
-        left: 100%;
-      }
-      &.backward-offsite {
-        top: 0;
-        left: -100%;
-      }
     }
   }
 
diff --git a/teamapps-client/less/components/UiNavigationBar.less b/teamapps-client/less/components/UiNavigationBar.less
index 3dd303192..b540fdaed 100644
--- a/teamapps-client/less/components/UiNavigationBar.less
+++ b/teamapps-client/less/components/UiNavigationBar.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -22,31 +22,45 @@
 
   user-select: none;
 
-  background-color: white;
-  border-top: 1px solid @btn-default-border;
+  background-color: var(--ta-bg-color-semi-transparent);
+  border-top: 1px solid var(--ta-panel-border-color);
 
   position: relative;
 
-  > .buttons-wrapper {
+  > .buttons-container {
     display: flex;
     justify-content: space-around;
+    align-items: stretch;
     > .nav-button-wrapper {
       flex: 1 1 1px;
       text-align: center;
       line-height: 0;
-      transition: background-color .2s;
+      transition: background-color var(--ta-color-transition-time);
 
       &:hover {
-        background-color: fadeout(@table-bg-active, 5%);
+        background-color: var(--ta-hover-color);
       }
       &:active {
-        background-color: @table-bg-active;
+        background-color: var(--ta-active-color);
       }
 
       > .nav-button-inner-wrapper {
         display: inline-block;
       }
     }
+
+    .progress-container {
+      order: 1000;
+      display: flex;
+      align-items: center;
+
+      > * {
+        margin-right: 10px;
+         &.no-tasks {
+           display: none;
+         }
+      }
+    }
   }
 
   .fan-out-container-wrapper {
@@ -54,7 +68,7 @@
     width: 100%;
     position: absolute;
     box-shadow: 0px -5px 20px -3px rgba(0, 0, 0, 0.3);
-    z-index: 1000;
+    z-index: var(--ta-zindex-dropdown);
     display:none;
 
     .open {
@@ -62,7 +76,7 @@
     }
 
     .fan-out-container {
-      background-color: rgba(255, 255, 255, 0.84);
+      background-color: var(--ta-bg-color-semi-transparent);
     }
   }
 }
diff --git a/teamapps-client/less/components/UiNetworkGraph.less b/teamapps-client/less/components/UiNetworkGraph.less
index 99e4f9c9a..098844177 100644
--- a/teamapps-client/less/components/UiNetworkGraph.less
+++ b/teamapps-client/less/components/UiNetworkGraph.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,16 +19,9 @@
  */
 .UiNetworkGraph {
   svg {
-    font: 10px sans-serif;
-  }
-
-  text {
-    stroke: #000;
-    stroke-width: 0px;
-    fill: #000;
-    font: 11px sans-serif;
-    pointer-events: none;
-    text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
+    width: 100%;
+    height: 100%;
+    display: block;
   }
 
   .node {
@@ -57,6 +50,10 @@
     pointer-events: all;
   }
 
+  .node-foreign-object {
+    overflow: visible;
+  }
+
 }
 
 
diff --git a/teamapps-client/less/components/UiNotification.less b/teamapps-client/less/components/UiNotification.less
new file mode 100644
index 000000000..8a42ea10d
--- /dev/null
+++ b/teamapps-client/less/components/UiNotification.less
@@ -0,0 +1,130 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+
+.UiNotification-container {
+  position: fixed;
+  z-index: 1000;
+  padding: 16px 14px 26px 14px;
+  pointer-events: none;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  > * {
+    pointer-events: all;
+  }
+
+  display: flex;
+  flex-direction: column;
+
+
+  &.top-left {
+    align-items: flex-start;
+  }
+
+  &.top-center {
+    align-items: center;
+  }
+
+  &.top-right {
+    align-items: flex-end;
+  }
+
+  &.bottom-left {
+    flex-direction: column-reverse;
+    align-items: flex-start;
+  }
+
+  &.bottom-center {
+    flex-direction: column-reverse;
+    align-items: center;
+  }
+
+  &.bottom-right {
+    flex-direction: column-reverse;
+    align-items: flex-end;
+  }
+
+  .notification-wrapper {
+    max-width: 100%;
+    z-index: 1000;
+    overflow: visible;
+    margin-bottom: 5px;
+    transition: height .7s, margin .7s;
+
+    //&.shrink {
+    //  animation: UiNotification-wrapper-shrink .7s ease-in-out;
+    //}
+  }
+
+  @media (max-width: 400px) {
+    padding-left: 2px;
+    padding-right: 2px;
+    .UiNotification {
+      box-shadow: 0 0 4px 0 rgba(0, 0, 0, .3);
+    }
+  }
+}
+
+@keyframes UiNotification-wrapper-shrink {
+  0% {
+    transform: scale(1, 1);
+  }
+  100% {
+    transform: scale(1, 0);
+  }
+}
+
+.UiNotification {
+  width: 400px;
+  max-width: 100%;
+  border-radius: 3px;
+  box-shadow: 0 2px 15px 0 rgba(0, 0, 0, .5);
+  overflow: hidden;
+  position: relative;
+  background-color: var(--ta-bg-color);
+
+  > .content-container {
+    padding: 4px;
+  }
+
+  > .progress-container .progress {
+    border-radius: 0 0 3px 3px;
+  }
+
+  > .close-button {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 20px;
+    height: 17px;
+    border-left: 1px solid var(--ta-special-button-section-border);
+    border-bottom: 1px solid var(--ta-special-button-section-border);
+    background-color: var(--ta-special-button-section-bg);
+    border-top-right-radius: 3px;
+    border-bottom-left-radius: calc(var(--ta-border-radius) + 2px);
+    background-image: url(/resources/window-close-grey.png);
+    background-size: 12px 12px;
+    background-position: center;
+    background-repeat: no-repeat;
+  }
+}
+
diff --git a/teamapps-client/less/components/UiNotificationBar.less b/teamapps-client/less/components/UiNotificationBar.less
new file mode 100644
index 000000000..2dffcd081
--- /dev/null
+++ b/teamapps-client/less/components/UiNotificationBar.less
@@ -0,0 +1,78 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+
+.UiNotificationBar {
+  .UiNotificationBarItem {
+    background: #d9edf7;
+    border-bottom: 1px solid #91c3d0;
+    box-shadow: 0px 2px 2px -2px #91c3d0;
+    color: #31708f;
+
+    > .content-container {
+      padding: 2px 3px;
+      display: flex;
+      align-items: center;
+
+      > .icon {
+        flex: 0 0 auto;
+        margin-right: 4px;
+        animation-iteration-count: infinite;
+      }
+
+      > .text-container {
+        flex: 1 1 auto;
+
+        > .action-link {
+          margin-left: 5px;
+          cursor: pointer;
+        }
+      }
+
+      > .close-button {
+        flex: 0 0 auto;
+        width: 17px;
+        height: 17px;
+        background-image: url(/resources/window-close-grey.png);
+        background-size: 12px 12px;
+        background-position: center;
+        background-repeat: no-repeat;
+      }
+    }
+
+    &.with-progress > .content-container {
+      padding-bottom: 0;
+    }
+
+    &:not(.with-progress) > .progress-container {
+      display: none;
+    }
+
+    .progress-container {
+      margin-bottom: -1px; // over the border!
+
+      .progress {
+        background-color: transparent;
+        box-shadow: none;
+        border-radius: 0;
+      }
+    }
+  }
+}
+
diff --git a/teamapps-client/less/components/UiPageView.less b/teamapps-client/less/components/UiPageView.less
index 8f29327d9..35bfb1271 100644
--- a/teamapps-client/less/components/UiPageView.less
+++ b/teamapps-client/less/components/UiPageView.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -28,27 +28,26 @@
     .left-column {
       width: 66%;
       float: left;
-      padding-right: @grid-gutter-width / 2;
+      padding-right: calc(var(--ta-panel-gap) / 2);
       .clearfix();
     }
     .right-column {
       width: 34%;
       float: left;
-      padding-left: @grid-gutter-width / 2;
+      padding-left: calc(var(--ta-panel-gap) / 2);
       .clearfix();
     }
     .clearfix();
   }
 
   .block-wrapper {
-    overflow-x: hidden;
     border: none;
-    border-radius: @border-radius-base;
+    border-radius: var(--ta-border-radius);
     box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
-    margin-bottom: @grid-gutter-width;
+    margin-bottom: var(--ta-panel-gap);
 
     .background-color-div {
-      background-color: rgba(255, 255, 255, .72);
+      background-color: var(--ta-bg-color-semi-transparent);
     }
   }
 
@@ -70,113 +69,84 @@
   }
 
   .UiMessagePageViewBlock {
-    padding: 10px;
+    padding: var(--ta-padding-base-vertical) var(--ta-padding-base-horizontal);
 
-    .headline {
-      font-size: 200%;
-      margin: 8px 0;
-    }
-
-    .text:not(:last-child) {
-      margin-bottom: .7em;
+    .tool-buttons {
+      float: right;
+      line-height: 0;
     }
 
-    .image {
-      > img {
-        max-width: 100%;
-        border-radius: 3px;
-        box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .5);
+    .top-record {
+      margin: var(--ta-padding-base-vertical) var(--ta-padding-base-horizontal);
+      &.align-left {
+        float: left;
+        clear: left;
+      }
+      &.align-right {
+        float: right;
+        clear: right;
+      }
+      &.align-center {
+        display: flex;
+        justify-content: center;
+      }
+      &.align-stretch {
+        // default behavior
       }
     }
 
-    .slider-item {
-      //max-height: 400px;
-      //width: auto;
-      //height: auto;
-      //width: 400px;
-      //height: 300px;
-    }
+    .images {
+      position: relative;
+      clear: both;
 
-    .slider-item-img {
-      pointer-events: none;
+      .image {
+        position: absolute;
+      }
     }
+  }
 
-    .slick-slider {
-      .slick-dots {
-        bottom: 0;
-        li button:before {
-          color: white;
-          text-shadow: 0 0 2px black;
-        }
-      }
-      .slick-arrow {
-        z-index: 1;
-        text-shadow: 0 0 2px rgba(0, 0, 0, .35);
-        opacity: 0;
-        transition: opacity .2s;
-        
-        &.slick-prev {
-          left: 20px;
-        }
-        &.slick-next {
-          right: 20px;
-        }
-      }
-      &:hover {
-        .slick-arrow {
-          opacity: .5;
-          &:hover {
-            opacity: 1;
-          }
-        }
-      }
+  .UiCitationPageViewBlock {
+    padding: var(--ta-padding-base-vertical) var(--ta-padding-base-horizontal);
+    
+    .tool-buttons {
+      float: right;
+      line-height: 0;
     }
 
-    .carousel {
-      .carousel-inner {
-        border-radius: 3px;
-        box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .5);
-        img {
-          border-radius: 3px;
-        }
-      }
+    .flex-container {
+      display: flex;
+      align-items: center;
 
-      .carousel-indicators {
-        bottom: 0;
-        li {
-          margin: 2px;
+      .content-wrapper {
+        flex-grow: 1;
+        margin: 0 10px;
+        .citation {
+          margin-top: 1.5em;
+          margin-bottom: .5em;
+          text-align: center;
+          font-size: 150%;
         }
-        li.active {
-          margin: 1px;
+
+        .author {
+          font-size: 130%;
+          font-style: italic;
+          text-align: right;
         }
       }
     }
   }
 
-  .UiCitationPageViewBlock {
-    display: flex;
-    align-items: center;
-    padding: 10px;
-
-    .content-wrapper {
-      flex-grow: 1;
-      margin: 0 10px;
-      .citation {
-        margin-top: 1.5em;
-        margin-bottom: .5em;
-        text-align: center;
-        font-size: 150%;
-      }
+  .UiComponentPageViewBlock {
+    .tool-buttons {
+      display: flex;
+      justify-content: flex-end;
+      line-height: 0;
 
-      .author {
-        font-size: 130%;
-        font-style: italic;
-        text-align: right;
+      &:not(:empty) {
+        padding: var(--ta-padding-base-vertical) var(--ta-padding-base-horizontal);
       }
     }
-  }
 
-  .UiComponentPageViewBlock {
     .title {
       font-size: 125%;
       font-weight: 500;
@@ -205,7 +175,7 @@
   }
 
   .block-section:last-child {
-    margin-bottom: -@grid-gutter-width;
+    margin-bottom: calc(var(--ta-panel-gap) * -1);
   }
 
 }
diff --git a/teamapps-client/less/components/UiPageViewBlock.less b/teamapps-client/less/components/UiPageViewBlock.less
index 815fb045c..2aeec3c81 100644
--- a/teamapps-client/less/components/UiPageViewBlock.less
+++ b/teamapps-client/less/components/UiPageViewBlock.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -32,7 +32,7 @@
   h1, h2, h3, h4, h5, h6,
   .h1, .h2, .h3, .h4, .h5, .h6 {
     &:first-child {
-      margin-top: @line-height-computed / 2;
+      margin-top: var(--ta-half-line-height-computed);
     }
   }
 }
diff --git a/teamapps-client/less/components/UiPanel.less b/teamapps-client/less/components/UiPanel.less
index 4b259a2f7..075c6c4fa 100644
--- a/teamapps-client/less/components/UiPanel.less
+++ b/teamapps-client/less/components/UiPanel.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -18,9 +18,11 @@
  * =========================LICENSE_END==================================
  */
 .UiPanel {
+  background-color: var(--ta-bg-color);
+  border-radius: var(--ta-border-radius);
   background-size: cover;
 
-  box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
+  box-shadow: var(--ta-box-shadow-base);
   overflow: hidden;
 
   border: none;
@@ -35,26 +37,11 @@
     min-height: 32px;
     display: flex;
     align-items: center;
-    border-bottom-color: @table-border-color;
-    padding: 0 1px 0 8px;
-    background-color: rgba(255, 255, 255, .72);
-
-    //position: relative;
-    //.minAllExpandedWidth {
-    //  height: 2px;
-    //  position: absolute;
-    //  background-color: red;
-    //}
-    //.minFirstMinimizedWidth {
-    //  height: 2px;
-    //  position: absolute;
-    //  background-color: rgba(0, 0, 255, .5);
-    //}
-    //.minFirstMinimizedAndHiddenTitleWidth {
-    //  height: 2px;
-    //  position: absolute;
-    //  background-color: rgba(255, 255, 0, .5);
-    //}
+    border-top-left-radius: calc(var(--ta-border-radius) - 1px);
+    border-top-right-radius: calc(var(--ta-border-radius) - 1px);
+    border-bottom: 1px solid var(--ta-inner-border-color);
+    padding: 0 0 0 8px;
+    background-color: var(--ta-bg-color-semi-transparent);
 
     .optimized-for-touch & {
       min-height: 40px;
@@ -68,9 +55,28 @@
 
     .panel-title {
       flex: 0 0 auto;
-      padding-right: 7px;
+      margin-right: 7px;
       font-size: 15px;
+      user-select: none;
       .single-line-snipper();
+      &:empty {
+        display: none;
+      }
+    }
+    &.no-header-fields .panel-title {
+      flex: 0 1 auto;
+    }
+
+    .panel-badge {
+      flex: 0 0 auto;
+      margin-right: 7px;
+      border-radius: 1000px;
+      padding: 1px 4px;
+      border: 1px solid var(--ta-color-info);
+      .single-line-snipper();
+      &:empty {
+        display: none;
+      }
     }
 
     > .panel-component-wrapper {
@@ -82,15 +88,15 @@
         flex: 0 0 auto; // derived from subcomponents
         align-items: center;
         background-color: rgba(255, 255, 255, .5);
-        border-radius: @border-radius-base;
+        border-radius: var(--ta-border-radius);
         > .icon {
           align-self: stretch;
           height: auto;
           padding: 0 15px;
-          border: 1px solid fadeout(@tr-border-color, 40%);
+          border: 1px solid transparent;
           border-right-width: 0;
-          border-top-left-radius: @border-radius-base;
-          border-bottom-left-radius: @border-radius-base;
+          border-top-left-radius: var(--ta-border-radius);
+          border-bottom-left-radius: var(--ta-border-radius);
           .optimized-for-touch & {
             padding: 0 20px;
           }
@@ -99,7 +105,7 @@
           flex: 0 0 auto; // width will be set by javascript
           transition: width .5s, flex-basis .5s;
 
-          > * {
+          .default-min-field-width {
             min-width: 0 !important;
           }
 
@@ -125,8 +131,8 @@
         > .icon-and-field-wrapper {
           > .icon {
             border-right-width: 1px;
-            border-top-right-radius: @border-radius-base;
-            border-bottom-right-radius: @border-radius-base;
+            border-top-right-radius: var(--ta-border-radius);
+            border-bottom-right-radius: var(--ta-border-radius);
           }
           > .field-wrapper {
             flex: 0 0 0px !important;
@@ -152,15 +158,15 @@
     .panel-heading-window-buttons {
       -webkit-box-flex: 0;
       flex: 0 0 auto;
-      padding: 2px 4px;
+      padding: 2px 3px;
       display: -webkit-box;
       display: flex;
       align-self: flex-start;
-      border-left: 1px solid rgba(0, 0, 0, .1);
-      border-bottom: 1px solid rgba(0, 0, 0, .07);
-      background-color: rgba(0, 0, 0, .05);
-      border-top-right-radius: @panel-border-radius;
-      border-bottom-left-radius: @panel-border-radius + 2px;
+      border-left: 1px solid var(--ta-special-button-section-border);
+      border-bottom: 1px solid var(--ta-special-button-section-border);
+      background-color: var(--ta-special-button-section-bg);
+      border-top-right-radius: var(--ta-border-radius);
+      border-bottom-left-radius: calc(var(--ta-border-radius) + 2px);
 
       &:empty {
         display: none;
@@ -175,36 +181,40 @@
 
   .panel-body {
     flex: 1 1 auto;
-    overflow: hidden;
+    overflow-x: hidden;
+    overflow-y: auto;
     padding: 0;
-    background-color: white;
-    position: relative;
-
-    .body-container {
-      .flex-filler();
-      overflow-y: auto;
-      overflow-x: hidden;
-      border-bottom-left-radius: @border-radius-base;
-      border-bottom-right-radius: @border-radius-base;
-    }
-  }
-
-  &.empty-heading .panel-body {
-    padding: 8px;
+    background-color: var(--ta-bg-color);
+    border-bottom-left-radius: var(--ta-border-radius);
+    border-bottom-right-radius: var(--ta-border-radius);
   }
 
-  &.stretch-content > .panel-body > .body-container > * {
-    width: 100%;
-    height: 100%;
+  &.stretch-content > .panel-body{
+    // ==== START Safari Mobile flex:auto + 100% fix ====
+    // If height is not set, Safari Mobile does not apply the 100% to the child, since the .panel-body does not have a definite size.
+    // The value 123px is completely arbitrary. However, it makes safari regard the calculated panel body height as definite
+    // (but will obviously still applying the flex policy!!) and will stretch/shrink the child to 100%.
+    // Note that this behavior regarding indefinite size containers WAS at some point (till September 2017) according to the spec,
+    // but the standard was changed.
+    height: 123px; // TODO remove once Safari Mobile gets this right... (Safari desktop does already)
+    // Note that this makes browsers unable to apply auto-height on windows (i.e. make the height of the panel depend on its content).
+    // Therefore, if the height of a window is set to < 0, the stretch-content class will be removed. (see Java code)
+    // #safariflex
+    // ==== END Safari Mobile flex:auto + 100% fix ====
+
+    > * {
+      width: 100%;
+      height: 100%;
+    }
   }
 }
 
 .teamapps-component-maximized {
   position: fixed;
+  z-index: var(--ta-zindex-window);
   top: 5px;
   left: 5px;
   width: ~"calc(100% - 10px)";
   height: ~"calc(100% - 10px)";
-  box-shadow: 0 0 0 10px @maximized-shadow-color;
-  z-index: 100000;
+  box-shadow: 0 0 0 10px var(--ta-bg-dim-overlay);
 }
diff --git a/teamapps-client/less/components/UiPieChart.less b/teamapps-client/less/components/UiPieChart.less
new file mode 100644
index 000000000..db1dc5f68
--- /dev/null
+++ b/teamapps-client/less/components/UiPieChart.less
@@ -0,0 +1,22 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+.UiPieChart {
+  overflow: hidden;
+}
diff --git a/teamapps-material-icon-provider/src/main/java/org/teamapps/icon/material/OutlineStyle.java b/teamapps-client/less/components/UiPopup.less
similarity index 75%
rename from teamapps-material-icon-provider/src/main/java/org/teamapps/icon/material/OutlineStyle.java
rename to teamapps-client/less/components/UiPopup.less
index f021f56c6..ea63cf989 100644
--- a/teamapps-material-icon-provider/src/main/java/org/teamapps/icon/material/OutlineStyle.java
+++ b/teamapps-client/less/components/UiPopup.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,11 +17,20 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-package org.teamapps.icon.material;
 
-public class OutlineStyle extends SingleColorStyle {
+.UiPopup {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
 
-    public OutlineStyle(String styleId, String color) {
-        super(styleId, StyleType.OUTLINE, color);
+  > .component-wrapper {
+    position: absolute;
+
+    > * {
+      pointer-events: all;
     }
+  }
 }
diff --git a/teamapps-client/less/components/UiProgressDisplay.less b/teamapps-client/less/components/UiProgressDisplay.less
new file mode 100644
index 000000000..faed963bf
--- /dev/null
+++ b/teamapps-client/less/components/UiProgressDisplay.less
@@ -0,0 +1,214 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+.UiProgressDisplay {
+
+  --stripes-size: 10px;
+
+  border: 1px solid var(--ta-input-border-color);
+  border-radius: var(--ta-border-radius);
+
+  .title {
+    display: flex;
+    padding: 4px 5px 2px 5px;
+    border-bottom: 1px solid var(--ta-input-border-color);
+
+    .icon {
+      margin-right: 5px;
+    }
+  }
+
+  .content {
+    padding: 4px 5px;
+    display: grid;
+    grid-template-areas: "status cancel" "progress cancel";
+    grid-template-rows: auto 1fr;
+    grid-template-columns: 1fr auto;
+    min-height: 26px;
+
+    .status-string {
+      grid-area: status;
+      font-size: 90%;
+    }
+
+    .progress-bar-wrapper {
+      grid-area: progress;
+      display: flex;
+      align-items: center;
+
+      .progress {
+        flex: 1 1 auto;
+
+        &, .progress-bar {
+          transition: width .3s, background-color .5s !important;
+        }
+      }
+    }
+
+    .cancel-button {
+      grid-area: cancel;
+      background-image: url(/resources/window-close-grey.png);
+      align-self: center;
+      margin-left: 5px;
+    }
+  }
+
+  &:not(.cancelable) .cancel-button {
+    display: none;
+  }
+
+  &.status-not-yet-started,
+  &.status-running,
+  &.status-cancellation-requested,
+  &.status-failed {
+    .progress {
+      background-image: linear-gradient(45deg, #00000055 25%, transparent 25%, transparent 50%, #00000055 50%, #00000055 75%, transparent 75%, transparent);
+      background-size: var(--stripes-size) var(--stripes-size);
+      background-repeat: repeat;
+    }
+  }
+
+  &.status-not-yet-started {
+    .progress {
+      animation: UiProgressDisplay-stripes 4s linear infinite;
+    }
+  }
+  &.status-running,
+  &.status-cancellation-requested {
+    .progress {
+      animation: UiProgressDisplay-stripes 1s linear infinite;
+    }
+  }
+
+  &.status-not-yet-started {
+    .progress-bar {
+      display: none;
+    }
+  }
+
+  &.unknown-progress {
+    .progress-bar {
+      width: 30% !important;
+      position: relative;
+      animation: UiProgressDisplay-left-right 1.5s ease-in-out alternate infinite;
+    }
+  }
+
+  @keyframes UiProgressDisplay-left-right {
+    0% {
+      left: 0;
+    }
+    100% {
+      left: 70%;
+    }
+  }
+
+  &.status-cancellation-requested {
+    //.progress {
+    //  background-color: @state-warning-border;
+    //}
+    //
+    //.progress-bar {
+    //  background-color: @brand-warning;
+    //}
+
+    .content {
+      opacity: .5;
+      filter: grayscale(100%);
+    }
+
+    //.cancel-button {
+    //  opacity: .3;
+    //}
+  }
+
+  &.status-canceled {
+    //.progress {
+    //  background-color: @state-warning-border;
+    //}
+    //
+    //.progress-bar {
+    //  background-color: @brand-warning;
+    //}
+
+    .content {
+      opacity: .5;
+      filter: grayscale(100%);
+    }
+
+    .progress-bar {
+      display: none;
+    }
+
+    .cancel-button {
+      display: none
+    }
+  }
+
+  &.status-complete {
+    //&, .title {
+    //  border-color: @state-success-text;
+    //}
+    .progress {
+      background-color: var(--ta-state-success-bg);
+    }
+
+    .progress-bar {
+      width: 100% !important;
+      background-color: var(--ta-state-success-text);
+      animation: none;
+    }
+
+    .cancel-button {
+      display: none
+    }
+  }
+
+  &.status-failed {
+    //&, .title {
+    //  border-color: @state-danger-text;
+    //}
+
+    .progress {
+      background-color: var(--ta-state-danger-text);
+    }
+
+    .progress-bar {
+      background-color: var(--ta-state-danger-text-emphasis);
+    }
+
+    .cancel-button {
+      display: none
+    }
+
+    &.unknown-progress .progress-bar {
+      left: 35%;
+      animation: none;
+    }
+  }
+
+  @keyframes UiProgressDisplay-stripes {
+    from {
+      background-position: calc(var(--stripes-size) * 2) 0;
+    }
+    to {
+      background-position: 0 0;
+    }
+  }
+}
diff --git a/teamapps-client/less/components/UiPropertyEditor.less b/teamapps-client/less/components/UiPropertyEditor.less
index dcb4ec77a..eb9c0beef 100644
--- a/teamapps-client/less/components/UiPropertyEditor.less
+++ b/teamapps-client/less/components/UiPropertyEditor.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-client/less/components/UiQrCodeScanner.less b/teamapps-client/less/components/UiQrCodeScanner.less
new file mode 100644
index 000000000..060fe8e1a
--- /dev/null
+++ b/teamapps-client/less/components/UiQrCodeScanner.less
@@ -0,0 +1,58 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+.UiQrCodeScanner {
+  position: relative;
+
+  > video {
+    width: 100%;
+    height: 100%;
+  }
+
+  > .crosshair-wrapper {
+    position: absolute;
+    top:0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    > .crosshair {
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: 45%;
+      filter: invert(1);
+      opacity: 0;
+      animation: crosshair-fade .8s alternate infinite;
+      background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTMgNXY0aDJWNWg0VjNINWMtMS4xIDAtMiAuOS0yIDJ6bTIgMTBIM3Y0YzAgMS4xLjkgMiAyIDJoNHYtMkg1di00em0xNCA0aC00djJoNGMxLjEgMCAyLS45IDItMnYtNGgtMnY0em0wLTE2aC00djJoNHY0aDJWNWMwLTEuMS0uOS0yLTItMnoiLz48L3N2Zz4=");
+
+      @keyframes crosshair-fade {
+        100% {
+          opacity: 1;
+        }
+      }
+    }
+  }
+
+}
+
+
diff --git a/teamapps-client/less/components/UiReactTestComponent.less b/teamapps-client/less/components/UiReactTestComponent.less
index 6f28846a5..65c70de6a 100644
--- a/teamapps-client/less/components/UiReactTestComponent.less
+++ b/teamapps-client/less/components/UiReactTestComponent.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -18,5 +18,4 @@
  * =========================LICENSE_END==================================
  */
 .UiReactTestComponent {
-  background-color: green;
 }
diff --git a/teamapps-client/less/components/UiResponsiveGridLayout.less b/teamapps-client/less/components/UiResponsiveGridLayout.less
index b091d5787..2681c8d92 100644
--- a/teamapps-client/less/components/UiResponsiveGridLayout.less
+++ b/teamapps-client/less/components/UiResponsiveGridLayout.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-client/less/components/UiRootPanel.less b/teamapps-client/less/components/UiRootPanel.less
index 667fe6921..2023c4980 100644
--- a/teamapps-client/less/components/UiRootPanel.less
+++ b/teamapps-client/less/components/UiRootPanel.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -27,59 +27,20 @@
     width: 100%;
     height: 100%;
 
-    &:not(.active) {
-      position: absolute;
-      top: -100000px;
-      left: -100000px;
-    }
-
     > * {
       width: 100%;
       height: 100%;
     }
   }
-
-  &.modal-window-mode > .child-component-wrapper {
-    opacity: 0.9;
-    filter: grayscale(75%);
-  }
-}
-
-[data-notify="container"] {
-  border-radius: @panel-border-radius;
-  box-shadow: 0 1px 7px rgba(0, 0, 0, .3);
-  padding: 0 !important;
-
-  [data-notify="progressbar"] {
-    margin-bottom: 0;
-    height: 5px;
-    .progress-bar {
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
-      transition: width 1s linear;
-    }
-  }
-
-  [data-notify="dismiss"] {
-    width: 12px;
-    height: 12px;
-    position: absolute;
-    top: 3px !important;
-    right: 3px !important;
-    background-size: contain;
-    background-repeat: no-repeat
-  }
 }
 
 .UiGenericErrorMessage {
   display: grid;
   grid-template-columns: auto 1fr;
-  padding: 10px;
+  padding: 15px;
   grid-gap: 15px;
+  align-items: center;
 
-  .message {
-    align-self: center;
-  }
   .option-buttons {
     grid-column: ~"1 / 3";
     display: flex;
diff --git a/teamapps-client/less/components/UiShakaPlayer.less b/teamapps-client/less/components/UiShakaPlayer.less
new file mode 100644
index 000000000..4d4c9468d
--- /dev/null
+++ b/teamapps-client/less/components/UiShakaPlayer.less
@@ -0,0 +1,49 @@
+/*-
+* ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ * 
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ * =========================LICENSE_END==================================
+*/
+.UiShakaPlayer {
+  justify-content: center;
+  overflow-y: hidden;
+
+  .video-wrapper {
+    width: 100%;
+    height: 100%;
+    // Somehow, in Chrome, the video tag does not obey the height if embedded in a flex item,
+    // so we need to wrapp it in an element that does...
+    // This way, we still get a default size (from the video tag) in case the component is not embedded in a flex layout.
+    overflow: hidden;
+  }
+
+  video {
+    width: 100%;
+    height: 100%;
+
+    &.poster-cover {
+      object-fit: cover;
+    }
+
+    &.poster-contain {
+      object-fit: contain;
+    }
+
+    &.poster-fill {
+      object-fit: fill;
+    }
+  }
+}
diff --git a/teamapps-client/less/components/UiSplitPane.less b/teamapps-client/less/components/UiSplitPane.less
index 96a30629f..45908847e 100644
--- a/teamapps-client/less/components/UiSplitPane.less
+++ b/teamapps-client/less/components/UiSplitPane.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,9 +17,6 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-@UiSplitPane-divider-width: @grid-gutter-width;
-@UiSplitPane-divider-width-touch: 16px;
-
 .splitpane {
   position: relative;
   overflow: visible;
@@ -41,7 +38,6 @@
       left: 0;
       bottom: 0;
       right: 0;
-      z-index: 1;
 
       > * {
         width: 100%;
@@ -66,13 +62,13 @@
 
     > .splitpane-divider {
       position: absolute;
-      z-index: 2;
+      z-index: 1;
       //background: transparent;
       box-shadow: none;
-      transition: box-shadow @default-color-transition-time, background-color @default-color-transition-time;
+      transition: box-shadow var(--ta-color-transition-time), background-color var(--ta-color-transition-time);
 
       &:hover, &.dragged {
-        background-color: rgba(255, 255, 255, 0.6);
+        background-color: var(--ta-bg-color-semi-transparent);
         box-shadow: 0 0 5px 0 rgba(0, 0, 0, .3);
       }
     }
@@ -85,25 +81,21 @@
   > .splitpane-component-wrapper {
     &:first-child {
       > .splitpane-component {
-        bottom: @grid-gutter-width / 2;
+        bottom: calc(var(--ta-panel-gap) / 2);
       }
     }
     &:last-child {
       > .splitpane-component {
-        top: @grid-gutter-width / 2;
+        top: calc(var(--ta-panel-gap) / 2);
       }
     }
   }
 
   > .splitpane-divider-wrapper > .splitpane-divider {
     width: 100%;
-    height: @UiSplitPane-divider-width;
-    top: -@UiSplitPane-divider-width/2;
+    height: var(--ta-resize-bar-size);
+    top: calc(var(--ta-resize-bar-size) / -2);
     cursor: ns-resize;
-    .optimized-for-touch & {
-      height: @UiSplitPane-divider-width-touch;
-      top: -@UiSplitPane-divider-width-touch/2;
-    }
   }
 }
 
@@ -113,25 +105,21 @@
   > .splitpane-component-wrapper {
     &:first-child {
       > .splitpane-component {
-        right: @grid-gutter-width / 2;
+        right: calc(var(--ta-panel-gap) / 2);
       }
     }
     &:last-child {
       > .splitpane-component {
-        left: @grid-gutter-width / 2;
+        left: calc(var(--ta-panel-gap) / 2);
       }
     }
   }
 
   > .splitpane-divider-wrapper > .splitpane-divider {
-    width: @UiSplitPane-divider-width;
+    width: var(--ta-resize-bar-size);
     height: 100%;
-    left: -@UiSplitPane-divider-width/2;
+    left: calc(var(--ta-resize-bar-size) / -2);
     cursor: ew-resize;
-    .optimized-for-touch & {
-      width: @UiSplitPane-divider-width-touch;
-      left: -@UiSplitPane-divider-width-touch/2;
-    }
   }
 }
 
diff --git a/teamapps-client/less/components/UiTabPanel.less b/teamapps-client/less/components/UiTabPanel.less
index 1ec873c86..65738d2ee 100644
--- a/teamapps-client/less/components/UiTabPanel.less
+++ b/teamapps-client/less/components/UiTabPanel.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,9 +17,6 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-@UiTabPanelButtonHeight: 23px;
-@UiTabPanelMobileHeight: @input-height-large - 2px;
-
 .UiTabPanel {
 
   display: flex;
@@ -32,11 +29,11 @@
     cursor: default;
 
     > .background-color-div {
-      background-color: rgba(255, 255, 255, @direct-transparency-alpha);
+      background-color: var(--ta-bg-color-semi-transparent);
       display: flex;
       align-items: stretch;
       height: 100%;
-      border-bottom: 1px solid @table-border-color;
+      border-bottom: 1px solid var(--ta-inner-border-color);
 
       .UiRootPanel > & {
         padding: 0 7px;
@@ -48,7 +45,7 @@
 
       .tab-button {
         display: inline-flex;
-        height: @UiTabPanelButtonHeight;
+        height: var(--ta-tab-button-height);
         padding: 0 9px;
         align-items: center;
 
@@ -69,9 +66,6 @@
           overflow-x: hidden;
           text-overflow: ellipsis;
         }
-        .tab-button-filler {
-          flex: 1 1 0px;
-        }
 
         &.selected {
           box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, .09);
@@ -81,6 +75,10 @@
 
       > .tab-button-container {
         flex: 0 0 auto;
+
+        &:empty {
+          display: none !important;
+        }
       }
 
       .tool-button-container, .window-button-container {
@@ -97,8 +95,8 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        width: @UiTabPanelButtonHeight;
-        height: auto;
+        width: var(--ta-tab-button-height);
+        height: var(--ta-tab-button-height);
         flex: 0 0 auto;
         text-align: center;
         padding-top: 1px;
@@ -111,16 +109,16 @@
 
       .tab-panel-dropdown {
         position: absolute;
-        z-index: 10000;
+        z-index: var(--ta-zindex-dropdown);
         box-shadow: 0 3px 8px -1px rgba(0, 0, 0, .4);
-        border-radius: 0 0 @border-radius-base @border-radius-base;
+        border-radius: 0 0 var(--ta-border-radius) var(--ta-border-radius);
         .dropdown-button-container {
           display: flex;
           flex-direction: column;
-          background-color: rgba(255, 255, 255, @direct-transparency-alpha);
+          background-color: var(--ta-bg-color-semi-transparent);
 
           > .tab-button.selected {
-            background-color: @teamapps-hover-color;
+            background-color: var(--ta-active-color);
 
             &:after {
               position: absolute;
@@ -142,13 +140,29 @@
           }
 
           &:last-child {
-            border-radius: 0 0 @border-radius-base @border-radius-base;
+            border-radius: 0 0 var(--ta-border-radius) var(--ta-border-radius);
           }
         }
       }
     }
   }
 
+  &.fill-tab-bar-width {
+    .spacer {
+      display: none;
+    }
+
+    > .tab-panel-header > .background-color-div > .tab-button-container {
+      flex: 1 0 auto;
+      display: flex;
+
+      .tab-button {
+        flex: 1 0 auto;
+        justify-content: center;
+      }
+    }
+  }
+
   > .tabpanel-content-wrapper-wrapper {
     flex: 1 1 1px;
     overflow: visible;
@@ -179,6 +193,7 @@
         .tab-component-container {
           flex: 1 1 1px;
           height: 100%;
+          max-height: 100%; // needed for safari. Will make the content overflow (instead of auto-scroll) if not set.
           overflow: visible;
 
           > * {
@@ -189,7 +204,6 @@
       }
     }
   }
-
 }
 
 .UiTabPanel.tab-style-blocks {
@@ -197,7 +211,7 @@
   > .tab-panel-header {
 
     .tab-button-container .tab-button.selected {
-      background-color: @teamapps-hover-color;
+      background-color: var(--ta-active-color);
 
       &:after {
         position: absolute;
@@ -215,14 +229,16 @@
     }
 
     > .background-color-div > .tab-button-container {
-      > .tab-button:not(.tool-tab-button),
-      > .dropdown-button:not(.tool-tab-button) {
-        transition: background-color .2s;
+      > .tab-button,
+      > .dropdown-button {
+        transition: background-color var(--ta-color-transition-time);
+
         &:hover {
-          background-color: @teamapps-hover-color;
+          background-color: var(--ta-hover-color);
         }
+
         &:active {
-          background-color: @teamapps-active-color;
+          background-color: var(--ta-active-color);
         }
       }
     }
@@ -266,13 +282,13 @@
       }
 
       &:not(.selected) {
-        background-color: rgba(220, 220, 220, @direct-transparency-alpha);
+        background-color: var(--ta-bg-color-semi-transparent-muted);
         box-shadow: inset 0 -5px 5px -5px rgba(0, 0, 0, .2);
       }
 
       &.selected {
         border-left-color: rgba(0, 0, 0, .2);
-        background-color: rgba(255, 255, 255, @direct-transparency-alpha);
+        background-color: var(--ta-bg-color-semi-transparent);
       }
 
       &:last-child {
@@ -280,19 +296,22 @@
       }
 
       &.selected {
-        border-top-color: @brand-warning;
+        border-top-color: var(--ta-color-warning);
       }
     }
 
     .tab-button,
     .dropdown-button {
-      transition: background-color .1s;
+      transition: background-color var(--ta-color-transition-time);
+
       &:active {
         background-color: white;
       }
     }
 
-    .tab-button.tool-tab-button {
+    .tools-container {
+      .tab-button;
+      display: flex;
       border-top: 1px solid;
       border-left: 1px solid;
       border-top-left-radius: 4px;
@@ -300,7 +319,7 @@
       border-top-color: rgba(0, 0, 0, .2);
       border-left-color: rgba(0, 0, 0, .1);
       padding: 0px 3px 2px 3px;
-      background-color: rgba(240, 240, 240, @direct-transparency-alpha);
+      background-color: var(--ta-bg-color-semi-transparent);
       box-shadow: none;
       border-right: 1px solid rgba(0, 0, 0, .2);
     }
@@ -308,18 +327,7 @@
   }
 
   &.teamapps-component-maximized .background-color-div {
-    background-color: @maximized-shadow-color !important;
-  }
-
-}
-
-.optimized-for-touch .UiTabPanel > .tab-panel-header {
-  height: @UiTabPanelMobileHeight;
-  .tab-button {
-    height: @UiTabPanelMobileHeight;
-  }
-  .dropdown-button {
-    width: @UiTabPanelMobileHeight;
+    background-color: var(--ta-bg-dim-overlay) !important;
   }
 
 }
diff --git a/teamapps-client/less/components/UiTable.less b/teamapps-client/less/components/UiTable.less
index bafc64f1b..5db2b1787 100644
--- a/teamapps-client/less/components/UiTable.less
+++ b/teamapps-client/less/components/UiTable.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,28 +19,17 @@
  */
 .UiTable {
   position: relative;
-  //user-select: none;
-  overflow: hidden; // needed for preventing the selection frame to cause an additional scrollbar
+
+  // infiniteItemViews never know their size. slickgrid depends on size information via JavaScript. Make sure the container element can shrink while slickgrid is still fixed size (before javascript call, which itself depends on the size of the container element).
+  // Also needed for preventing the selection frame to cause an additional scrollbar.
+  overflow: hidden;
 
   .slick-table {
     height: 100%;
 
-    .justify-center,
-    .justify-center > .validation-class-wrapper > .anti-overflow-wrapper,
-    .justify-center > .slick-column-name {
-      justify-content: center;
-    }
-    .slick-cell.justify-right,
-    .slick-cell.justify-right > .validation-class-wrapper > .anti-overflow-wrapper {
-      justify-content: flex-end;
-    }
-    .slick-header-column.justify-right,
-    .slick-header-column.justify-right > .slick-column-name {
-      text-align: right;
-    }
-
     .slick-headerrow,
     .slick-footerrow {
+      z-index: 2; // needs to be higher than for slick-cell, where it is 1 (default styles by slick!)
       overflow: hidden; //removed since it breaks horizontal scrolling of header/footer row
 
       .slick-headerrow-columns,
@@ -53,11 +42,11 @@
         overflow: visible;
         border-top: none;
         border-left: none;
-        border-right: 1px solid @input-border;
+        border-right: 1px solid var(--ta-input-border-color);
         border-bottom: none;
         height: 100%;
 
-        > * {
+        > .UiField {
           .cellEditor();
         }
       }
@@ -68,10 +57,9 @@
       align-items: center;
       border-top: none;
       border-left: none;
-      border-bottom: 1px solid @input-border;
-      border-right: 1px solid @input-border;
+      border-bottom: 1px solid var(--ta-input-border-color);
+      border-right: 1px solid var(--ta-input-border-color);
       padding: 0;
-      user-select: text;
       overflow: visible; // needed for validation borders to be displayed correctly; see anti-overflow-wrapper
 
       > .validation-class-wrapper {
@@ -94,19 +82,19 @@
         }
 
         &.message-info:after {
-          border-color: @state-info-text;
+          border-color: var(--ta-state-info-text);
         }
 
         &.message-success:after {
-          border-color: @state-success-text;
+          border-color: var(--ta-state-success-text);
         }
 
         &.message-warning:after {
-          border-color: @state-warning-border;
+          border-color: var(--ta-state-warning-border);
         }
 
         &.message-error:after {
-          border-color: @state-danger-text;
+          border-color: var(--ta-state-danger-text);
         }
 
         .anti-overflow-wrapper {
@@ -117,10 +105,14 @@
           padding: 0;
           overflow: hidden;
         }
+
+        .anti-overflow-wrapper > * {
+          width: 100%;
+        }
       }
 
       &.selected {
-        background-color: #7DB1EA;
+        background-color: var(--ta-selection-color);
       }
 
       &:not(.editable) {
@@ -137,8 +129,8 @@
         padding: 0;
         border-top: none;
         border-left: none;
-        border-bottom: 1px solid @input-border;
-        border-right: 1px solid @input-border;
+        border-bottom: 1px solid var(--ta-input-border-color);
+        border-right: 1px solid var(--ta-input-border-color);
       }
       .editor-text {
         width: 100%;
@@ -151,7 +143,7 @@
       }
 
       &.editable {
-        > * {
+        > .UiField {
           .cellEditor();
         }
         > .tr-combobox {
@@ -169,7 +161,7 @@
             }
           }
         }
-        > .tr-tagbox-tagarea {
+        > .tr-tagcombobox-tagarea {
           flex-wrap: nowrap;
         }
       }
@@ -186,9 +178,9 @@
 
     &.table-mode {
       .slick-cell.active.editable {
-        box-shadow: -1px -1px 0 0 mix(@input-border-focus, @input-border, 70%);
-        border-bottom-color: mix(@input-border-focus, @input-border, 70%) !important;
-        border-right: 1px solid mix(@input-border-focus, @input-border, 70%);
+        //box-shadow: -1px -1px 0 0 mix(@input-border-focus, var(--ta-input-border), 70%);
+        //border-bottom-color: mix(@input-border-focus, var(--ta-input-border), 70%) !important;
+        //border-right: 1px solid mix(@input-border-focus, var(--ta-input-border), 70%);
         z-index: 15;
       }
     }
@@ -198,10 +190,10 @@
         border-color: transparent !important;
       }
       .slick-cell.selected {
-        background-color: @tr-select-color;
+        background-color: var(--ta-selection-color);
       }
       .slick-cell.editable {
-        background-color: white;
+        background-color: var(--ta-input-bg);
       }
     }
 
@@ -227,6 +219,11 @@
       height: 29px;
       display: inline-flex;
       align-items: center;
+
+      &.align-left .slick-column-name {justify-content: flex-start;}
+      &.align-right .slick-column-name {justify-content: flex-end;}
+      &.align-center .slick-column-name {justify-content: center;}
+      &.align-justify .slick-column-name {justify-content: space-between;}
     }
 
     .slick-header-columns {
@@ -254,7 +251,7 @@
         margin: 0;
         order: 1;
         display: none;
-        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAMklEQVQYV2NkIAIwIqn5D2Uji4GF0AWwKsTQxcDAgKEQmyKQDSgKyTKJoJuI9h3WUAMAntIHCtDLLc8AAAAASUVORK5CYII=);
+        background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gQ3JlYXRlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIC0tPgoKPHN2ZwogICB2aWV3Qm94PSIwIDAgMTAwIDEwMCIKICAgdmVyc2lvbj0iMS4xIgogICBpZD0ic3ZnNTE2IgogICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxkZWZzCiAgICAgaWQ9ImRlZnM1MTMiIC8+CiAgPGcKICAgICBpZD0ibGF5ZXIxIj4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0iZmlsbDojMDAwMDAwO3N0cm9rZS13aWR0aDowLjI2NDU4MyIKICAgICAgIGQ9Ik0gNDAsMjAgNzAsNTAgNDAsODAgMzAsNzUgNTUsNTAgMzAsMjUiCiAgICAgICBpZD0icGF0aDIxODciIC8+CiAgPC9nPgo8L3N2Zz4K);
         background-position: center;
         background-repeat: no-repeat;
       }
@@ -342,4 +339,8 @@
     min-height: unset;
     border-radius: 0;
   }
+
+  > :not(.messages) {
+    height: 100%;
+  }
 }
diff --git a/teamapps-client/less/components/UiTemplateTestContainer.less b/teamapps-client/less/components/UiTemplateTestContainer.less
index e48ba4169..aee67419d 100644
--- a/teamapps-client/less/components/UiTemplateTestContainer.less
+++ b/teamapps-client/less/components/UiTemplateTestContainer.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-client/less/components/UiTextCellTemplate.less b/teamapps-client/less/components/UiTextCellTemplate.less
index 10f9c91be..2c6c1e5e2 100644
--- a/teamapps-client/less/components/UiTextCellTemplate.less
+++ b/teamapps-client/less/components/UiTextCellTemplate.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-client/less/components/UiTimeGraph.less b/teamapps-client/less/components/UiTimeGraph.less
index c9c78d202..95d5b3555 100644
--- a/teamapps-client/less/components/UiTimeGraph.less
+++ b/teamapps-client/less/components/UiTimeGraph.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -31,11 +31,10 @@
     }
 
     .area {
-      //fill: rgb(73,128,192);
+      pointer-events: none;
     }
 
     .y-zero-line {
-      stroke: black;
       stroke-dasharray: 2, 2;
     }
 
@@ -47,14 +46,12 @@
     }
 
     .dot {
-      stroke: #fff;
+      stroke: #ffffff77;
     }
 
-    .axis path,
-    .axis line {
-      fill: none;
-      stroke: #000;
-      shape-rendering: crispEdges;
+    .axis .label {
+      font-weight: 600;
+      font-size: 120%;
     }
 
     .brush > .selection {
@@ -74,14 +71,18 @@
       pointer-events: all;
     }
 
-    .y-axis-container .domain {
-      stroke: context-stroke !important;
-    }
-
     .horizontal-pan-rect {
       pointer-events: all;
       cursor: ew-resize;
     }
+
+    .incident-rect {
+
+    }
+
+    .incident-line, .incident-dot {
+      pointer-events: none;
+    }
   }
 }
 
diff --git a/teamapps-client/less/components/UiToolAccordion.less b/teamapps-client/less/components/UiToolAccordion.less
index 66d9295fb..738dde8dc 100644
--- a/teamapps-client/less/components/UiToolAccordion.less
+++ b/teamapps-client/less/components/UiToolAccordion.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -23,7 +23,7 @@
   > .background-color-div {
     width: 100%;
     min-height: 100%;
-    background-color: rgba(255, 255, 255, 0.84);
+    background-color: var(--ta-bg-color-semi-transparent);
 
     .button-group-wrapper {
       overflow: hidden; // !!!
@@ -36,7 +36,9 @@
       }
       .toolbar-button-wrapper,
       .row-filler {
-        flex: 1 0 auto; // flex-basis set by javascript
+        flex-basis: auto;
+        flex-grow: 0;
+        flex-shrink: 0;
       }
 
       .tool-accordion-dropdown {
@@ -80,15 +82,13 @@
   flex: 1 0 auto;
   display: flex;
   justify-content: center;
-  transition: background-color .2s;
+  transition: background-color var(--ta-color-transition-time);
   position: relative;
   outline: none;
 
-  &:hover {
-    background-color: rgba(255, 255, 255, .75);
-  }
+  &:hover,
   &:active {
-    background-color: white;
+    background-color: var(--ta-bg-color);
   }
   > .toolbar-button-caret {
     align-self: center;
@@ -97,13 +97,13 @@
 }
 
 .button-group-wrapper.horizontal:first-child > .toolbar-button-group > .toolbar-button-wrapper:first-child {
-  border-top-left-radius: @border-radius-base;
-  border-bottom-left-radius: @border-radius-base;
+  border-top-left-radius: var(--ta-border-radius);
+  border-bottom-left-radius: var(--ta-border-radius);
 }
 
 .button-group-wrapper.vertical:last-child > .toolbar-button-group .toolbar-button-wrapper:last-child {
-  border-bottom-left-radius: @border-radius-base;
-  border-bottom-right-radius: @border-radius-base;
+  border-bottom-left-radius: var(--ta-border-radius);
+  border-bottom-right-radius: var(--ta-border-radius);
 }
 
 .AbstractUiToolContainer-size-testing-container {
diff --git a/teamapps-client/less/components/UiToolbar.less b/teamapps-client/less/components/UiToolbar.less
index f2b2288ca..2b2992e8d 100644
--- a/teamapps-client/less/components/UiToolbar.less
+++ b/teamapps-client/less/components/UiToolbar.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,9 +19,8 @@
  */
 .UiToolbar {
   border: none;
-  border-radius: @panel-border-radius;
+  border-radius: var(--ta-border-radius);
 
-  box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
   overflow: visible; // !!!needed for dropdowns!!!
 
   user-select: none;
@@ -29,9 +28,9 @@
   > .background-color-div {
     width: 100%;
     height: 100%;
-    background-color: rgba(255, 255, 255, 0.84);
+    background-color: var(--ta-bg-color-semi-transparent);
     overflow: visible; // !!!needed for dropdowns!!!
-    border-radius: @panel-border-radius;
+    border-radius: var(--ta-border-radius);
 
     > .inner-container {
       overflow: visible;
@@ -39,19 +38,26 @@
       .button-group-wrapper {
         flex: 1 0 auto;
         display: flex;
+        &.empty {
+          display: none;
+        }
         > .toolbar-button-group {
           flex: 1 0 auto;
           display: flex;
         }
         > .toolbar-group-separator {
           flex: 0 0 0;
-          border-left: 1px solid rgba(0, 0, 0, 0.1);
-          border-right: 1px solid rgba(255, 255, 255, .5);
+          border-left: 1px solid var(--ta-inner-border-color);
+          border-right: 1px solid var(--ta-inner-border-color-light);
           margin: 0 3px;
         }
+        &.right-side > .toolbar-group-separator {
+          order: -1;
+        }
+        
         &:first-child > .toolbar-button-group > .toolbar-button-wrapper:first-child {
-          border-top-left-radius: @border-radius-base;
-          border-bottom-left-radius: @border-radius-base;
+          border-top-left-radius: var(--ta-border-radius);
+          border-bottom-left-radius: var(--ta-border-radius);
         }
 
         .toolbar-button-wrapper.moved-to-overflow-dropdown {
@@ -64,10 +70,7 @@
       > .overflow-dropdown-button {
         display: flex;
         align-items: center;
-        flex: 0 0 @UiTabPanelButtonHeight;
-        .optimized-for-touch & {
-          flex: 0 0 @UiTabPanelMobileHeight;
-        }
+        flex: 0 0 var(--ta-tab-button-height);
       }
       > .logo {
         flex: 0 0 125px;
@@ -82,13 +85,17 @@
       }
     }
   }
+
+  &.empty {
+    display: none;
+  }
 }
 
 .UiPanel .UiToolbar {
   border-radius: 0;
   > .background-color-div {
     border-radius: 0;
-    border-bottom: 1px solid @table-border-color;
+    border-bottom: 1px solid var(--ta-panel-border-color);
   }
 }
 
@@ -102,11 +109,11 @@
   outline: none;
 
   &:hover {
-    background-color: rgba(255, 255, 255, .75);
+    background-color: var(--ta-bg-color);
     box-shadow: 0 0 3px 0 rgba(0, 0, 0, .15);
   }
   &:active {
-    background-color: white;
+    background-color: var(--ta-bg-color);
   }
   > .toolbar-button-caret {
     align-self: center;
@@ -116,15 +123,15 @@
 
 .UiToolbar-dropdown {
   position: absolute;
-  z-index: 10000000;
+  z-index: var(--ta-zindex-dropdown);
   box-shadow: 0 3px 8px -1px rgba(0, 0, 0, .4);
-  border-radius: 0 0 @border-radius-base @border-radius-base;
+  border-radius: 0 0 var(--ta-border-radius) var(--ta-border-radius);
 
   > .background-color-div {
     width: 100%;
     height: 100%;
     background-color: rgba(255, 255, 255, 1); // TODO 0.84);
-    border-radius: 0 0 @border-radius-base @border-radius-base;
+    border-radius: 0 0 var(--ta-border-radius) var(--ta-border-radius);
     overflow: auto;
     .tr-default-spinner {
       position: static;
@@ -132,10 +139,6 @@
     }
   }
 
-  .UiItemView .tr-highlighted-entry {
-    transition: border-color 0s !important;
-  }
-
   .tr-default-spinner {
     background-color: transparent;
     position: static;
diff --git a/teamapps-client/less/components/UiTree.less b/teamapps-client/less/components/UiTree.less
index 79f592455..6cf0cb73b 100644
--- a/teamapps-client/less/components/UiTree.less
+++ b/teamapps-client/less/components/UiTree.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,19 +19,7 @@
  */
 .UiTree {
   .tr-tree {
-
-    .tr-treebox {
-      .tr-tree-entryTree {
-        height: 100%;
-      }
-    }
-
-    .tr-highlighted-entry {
-      background-color: @teamapps-hover-color;
-    }
-    .tr-selected-entry {
-      background-color: fadeout(darken(@tr-select-color, 10%), 55%);
-    }
+    height: 100%;
 
     .tr-default-spinner, .tr-default-no-data-display {
       background-color: transparent;
diff --git a/teamapps-icon/src/main/java/org/teamapps/icons/provider/SvgIconProvider.java b/teamapps-client/less/components/UiTreeGraph.less
similarity index 73%
rename from teamapps-icon/src/main/java/org/teamapps/icons/provider/SvgIconProvider.java
rename to teamapps-client/less/components/UiTreeGraph.less
index 913fd8b2b..99731eb91 100644
--- a/teamapps-icon/src/main/java/org/teamapps/icons/provider/SvgIconProvider.java
+++ b/teamapps-client/less/components/UiTreeGraph.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,11 +17,19 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-package org.teamapps.icons.provider;
+.UiTreeGraph {
 
-import org.teamapps.icons.api.IconStyle;
+  .node-button-text {
+    pointer-events: none;
+  }
 
-public interface SvgIconProvider<STYLE extends IconStyle> extends IconProvider<STYLE> {
+  .node-button-circle {
+    cursor: pointer;
+  }
 
-    String getInnerSvg(STYLE style, String iconName);
+  .node-foreign-object-div {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 }
diff --git a/teamapps-client/less/components/UiVerticalLayout.less b/teamapps-client/less/components/UiVerticalLayout.less
index 483a9f3d9..ab698ebb5 100644
--- a/teamapps-client/less/components/UiVerticalLayout.less
+++ b/teamapps-client/less/components/UiVerticalLayout.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-client/less/components/UiVideoPlayer.less b/teamapps-client/less/components/UiVideoPlayer.less
index 43841d91f..7c30e3dd2 100644
--- a/teamapps-client/less/components/UiVideoPlayer.less
+++ b/teamapps-client/less/components/UiVideoPlayer.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -25,6 +25,7 @@
   .mejs__overlay-button {
     filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, .5));
   }
+
   &.not-playable {
     .mejs__overlay-play,
     .mejs__controls {
@@ -36,6 +37,7 @@
     img {
       display: none;
     }
+
     .mejs__cannotplay {
       padding: 20px;
       font-size: 110%;
@@ -43,24 +45,19 @@
     }
   }
 
-  video {
-    width: 100%;
-    height: 100%;
+  .mejs__container {
+    max-height: 100%;
+
+    video {
+      max-height: 100%
+    }
   }
 
+
   &.hide-controls {
     .mejs__container .mejs__controls {
       display: none !important;
     }
   }
 
-  &.poster-cover .mejs__poster {
-    background-size: cover;
-  }
-  &.poster-contain .mejs__poster {
-    background-size: contain;
-  }
-  &.poster-original .mejs__poster {
-    background-size: auto;
-  }
 }
diff --git a/teamapps-client/less/components/UiWebRtcPublisher.less b/teamapps-client/less/components/UiWebRtcPublisher.less
index fcce2650f..128f53402 100644
--- a/teamapps-client/less/components/UiWebRtcPublisher.less
+++ b/teamapps-client/less/components/UiWebRtcPublisher.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -63,7 +63,7 @@
       left: 0;
       bottom: 0;
       right: 0;
-      background-color: @spinner-container-background;
+      background-color: var(--ta-bg-dim-overlay);
 
       .UiSpinner {
         width: 50px;
diff --git a/teamapps-client/less/components/UiWindow.less b/teamapps-client/less/components/UiWindow.less
index ce9bdcb22..71d2ff10d 100644
--- a/teamapps-client/less/components/UiWindow.less
+++ b/teamapps-client/less/components/UiWindow.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -23,42 +23,68 @@
     left: 0;
     width: 100%;
     height: 100%;
-    z-index: 10000;
+    z-index: var(--ta-zindex-window);
     display: flex;
     justify-content: center;
     align-items: center;
     
     opacity: 1;
 
+    transition: background-color .5s;
+
     &:not(.modal) {
         pointer-events: none;
         background-color: transparent !important;
     }
+
+    &:not(.open) {
+        background-color: transparent !important;
+        pointer-events: none;
+    }
     
     .panel-wrapper {
         max-width: 100%;
         max-height: 100%;
-        border-radius: @panel-border-radius;
+        border-radius: var(--ta-border-radius);
         box-shadow: 3px 10px 70px rgba(0, 0, 0, 0.85);
         display: flex;
         align-items: center;
         justify-content: center;
         pointer-events: all;
+        position: absolute;
+
+        .resizer {
+            position: absolute;
+            z-index: 1;
+            user-select: none;
+            &.t, &.b { width: 100%;height: 10px; }
+            &.l, &.r { width: 10px;height: 100%; }
+            &.t { cursor: n-resize; top: -7px; }
+            &.b { cursor: s-resize; bottom: -7px; }
+            &.l { cursor: w-resize; left: -7px; }
+            &.r { cursor: e-resize; right: -7px; }
+            &.corner {
+                width: 12px;
+                height: 12px;
+                z-index: 2;
+                &.t.l { cursor: nw-resize; top: -7px; left: -7px; }
+                &.t.r { cursor: ne-resize; top: -7px; right: -7px; }
+                &.b.l { cursor: sw-resize; bottom: -7px; left: -7px; }
+                &.b.r { cursor: se-resize; bottom: -7px; right: -7px; }
+            }
+        }
 
-        transform: scale(1, 1);
+        &:not(.resizable) {
+            .resizer {
+                display: none;
+            }
+        }
 
         > .UiPanel {
             width: 100%;
             height: 100%;
+            max-height: 100vh;
         }
     }
 
-    &.offscreen {
-        pointer-events: none;
-        opacity: 0;
-
-        > .panel-wrapper {
-            transform: scale(.9, .9);
-        }
-    }
 }
diff --git a/teamapps-client/less/components/UiWorkSpaceLayout.less b/teamapps-client/less/components/UiWorkSpaceLayout.less
index 2cf4b143b..2b93639bd 100644
--- a/teamapps-client/less/components/UiWorkSpaceLayout.less
+++ b/teamapps-client/less/components/UiWorkSpaceLayout.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -21,20 +21,22 @@
   display: flex;
   flex-direction: column;
 
-  perspective: 1000px;
-
   > .toolbar-container {
     flex: 0 0 auto;
-    margin: @grid-gutter-width @grid-gutter-width 0 @grid-gutter-width;
+    margin: var(--ta-panel-gap) var(--ta-panel-gap) 0 var(--ta-panel-gap);
+
+    .UiToolbar {
+      box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
+    }
   }
 
   > .content-container-wrapper {
     flex: 1 1 1px;
     position: relative;
-    margin: @grid-gutter-width;
+    margin: var(--ta-panel-gap);
     display: flex;
     flex-direction: column;
-    .content-container {
+    > .content-container {
       flex: 1 1 1px;
 
       > * {
@@ -44,44 +46,59 @@
     }
   }
 
-  .minimized-tabpanel-bar {
+  .bottom-bar {
     flex: 0 0 auto;
-    padding: 1px 3px;
-    background: rgba(255, 255, 255, 0.72);
+    align-items: center;
+    justify-content: space-between;
     display: flex;
+    background: var(--ta-bg-color-semi-transparent);
     box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
-
-    &:empty {
-      display: none;
-    }
-
-    .minimized-tabpanel-button {
+    
+    .minimized-tabpanel-button-container {
+      padding: 1px 3px;
       display: flex;
-      margin: 2px;
-      padding: 5px;
-      border: 1px solid rgba(0, 0, 0, .2);
-      border-radius: @panel-border-radius;
-      background-color: rgba(255, 255, 255, .7);
-      &:hover {
-        background-color: rgba(255, 255, 255, 1);
+
+      &:empty { // hide without removing for flex reasons!
+        overflow: hidden;
+        height: 0;
+        padding: 0;
       }
-      .tab-icon {
-        margin: 0 2px;
+
+      .minimized-tabpanel-button {
+        display: flex;
+        margin: 2px;
+        padding: 5px;
+        border: 1px solid rgba(0, 0, 0, .2);
+        border-radius: var(--ta-border-radius);
+        background-color: var(--ta-bg-color-semi-transparent);
+        &:hover {
+          background-color: var(--ta-bg-color);
+        }
+        .tab-icon {
+          margin: 0 2px;
+        }
+
+        .optimized-for-touch & {
+          padding: 7px;
+        }
       }
+    }
+    .progress-container {
+      display: inline-block;
+      padding: 0 8px;
 
-      .optimized-for-touch & {
-        padding: 7px;
+      > *.no-tasks {
+        display: none;
       }
     }
   }
 
   .dnd-target-rectangle {
-    display: none;
     position: absolute;
-    border: 4px solid rgba(255, 255, 255, .8);
+    border: 4px solid var(--ta-bg-color-semi-transparent);
     pointer-events: none;
-    z-index: 100000;
-    background-color: fade(@component-active-bg, 20%);
+    z-index: calc(var(--ta-zindex-window) - 1);
+    background-color: var(--ta-color-primary);
     &:before {
       content: " ";
       position: absolute;
@@ -117,7 +134,7 @@
       border-left: 1px solid;
       border-top-left-radius: 5px;
       border-top-right-radius: 5px;
-      border-top-color: @brand-warning;
+      border-top-color: var(--ta-color-warning);
       border-left-color: rgba(0, 0, 0, .2);
       background-color: rgba(255, 255, 255, 0.72);
       border-bottom: 1px solid rgba(0, 0, 0, .05);
@@ -144,7 +161,7 @@
       display: block;
       width: 150px;
       height: 100px;
-      background-color: rgba(255, 255, 255, 0.72);
+      background-color: var(--ta-bg-color-semi-transparent);
       border-top-right-radius: 5px;
       border-bottom-left-radius: 5px;
       border-bottom-right-radius: 5px;
@@ -155,9 +172,9 @@
 .UiWorkSpaceLayout-maximization-container-wrapper {
   position: absolute;
   top: -100000px;
-  padding: @grid-gutter-width;
+  padding: var();
   background-color: transparent;
-  transition: background-color .4s;
+  transition: background-color .5s;
 
   &.show {
     top: 0;
diff --git a/teamapps-client/less/formfield/UiButton.less b/teamapps-client/less/formfield/UiButton.less
index b17b77934..e60faa44c 100644
--- a/teamapps-client/less/formfield/UiButton.less
+++ b/teamapps-client/less/formfield/UiButton.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -23,6 +23,7 @@
   align-items: center;
   justify-content: center;
   outline: none;
+  width: 100%; // inside uiField wrapper!
 
   .btn {
     display: inline-flex;
@@ -62,9 +63,3 @@
   }
 
 }
-
-.UiButton-dropdown {
-  .UiItemView .tr-highlighted-entry {
-    transition: border-color 0s !important;
-  }
-}
diff --git a/teamapps-client/less/formfield/UiCheckBox.less b/teamapps-client/less/formfield/UiCheckBox.less
index 038f29c65..f6737fec1 100644
--- a/teamapps-client/less/formfield/UiCheckBox.less
+++ b/teamapps-client/less/formfield/UiCheckBox.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -26,7 +26,6 @@
     height: 17px;
     border: 1px solid;
     border-radius: 3px;
-    background-color: #fff;
     font-family: 'Glyphicons Halflings';
     font-size: 10px;
     padding-left: 2px;
diff --git a/teamapps-client/less/formfield/UiColorPicker.less b/teamapps-client/less/formfield/UiColorPicker.less
index 5f02ddeeb..679fb6a42 100644
--- a/teamapps-client/less/formfield/UiColorPicker.less
+++ b/teamapps-client/less/formfield/UiColorPicker.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -29,10 +29,11 @@
       border-style: solid;
     }
 
-    .pcr-app {
-      z-index: 1;
-    }
   }
 
 }
 
+.pcr-app {
+  z-index: 10000;
+}
+
diff --git a/teamapps-client/less/formfield/UiComboBox.less b/teamapps-client/less/formfield/UiComboBox.less
index 9a44d1303..7953f289e 100644
--- a/teamapps-client/less/formfield/UiComboBox.less
+++ b/teamapps-client/less/formfield/UiComboBox.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,8 +19,6 @@
  */
 .UiComboBox {
 
-  min-width: @default-input-width;
-
   &.readonly,
   .UiField:not(.focus) > &.editable-if-focused {
     background: transparent;
diff --git a/teamapps-client/less/formfield/UiComponentField.less b/teamapps-client/less/formfield/UiComponentField.less
index 5f6431b0a..2c2b51341 100644
--- a/teamapps-client/less/formfield/UiComponentField.less
+++ b/teamapps-client/less/formfield/UiComponentField.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -23,7 +23,10 @@
     background-color: white;
   }
   &.bordered {
-    border: 1px solid @input-border;
-    border-radius: @border-radius-base;
+    border: 1px solid var(--ta-input-border-color);
+    border-radius: var(--ta-border-radius);
+  }
+  > * {
+    height: 100%;
   }
 }
diff --git a/teamapps-client/less/formfield/UiCompositeField.less b/teamapps-client/less/formfield/UiCompositeField.less
index 042bbfee0..b6627bda2 100644
--- a/teamapps-client/less/formfield/UiCompositeField.less
+++ b/teamapps-client/less/formfield/UiCompositeField.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -26,7 +26,7 @@
       display: flex;
       align-items: center;
 
-      .tr-tagbox-tagarea {
+      .tr-tagcombobox-tagarea {
         flex-wrap: nowrap;
       }
     }
@@ -55,7 +55,7 @@
       }
 
       &.bordered > :not(:focus):not(.focus) {
-        border: 1px solid @input-border;
+        border: 1px solid var(--ta-input-border-color);
       }
     }
   }
@@ -64,7 +64,7 @@
 .static-readonly-UiCompositeField .subfield-wrapper {
   overflow: hidden;
   &.bordered {
-    border: 1px solid @input-border;
+    border: 1px solid var(--ta-input-border-color);
   }
 
   > .static-readonly-UiDisplayField,
diff --git a/teamapps-client/less/formfield/UiCurrencyField.less b/teamapps-client/less/formfield/UiCurrencyField.less
index 8d2083d59..83bfe79e5 100644
--- a/teamapps-client/less/formfield/UiCurrencyField.less
+++ b/teamapps-client/less/formfield/UiCurrencyField.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -18,15 +18,13 @@
  * =========================LICENSE_END==================================
  */
 .UiCurrencyField {
-  min-width: @default-input-width;
-
   .tr-unitbox-editor {
     width: 1px; // chrome bug. input does not shrink with flex layout.
   }
 }
 
 .static-readonly-UiCurrencyField {
-  padding: @padding-base-vertical @padding-base-horizontal;
+  padding: var(--ta-padding-base-vertical) var(--ta-padding-base-horizontal);
   text-align: right;
   width: 100%;
 }
diff --git a/teamapps-client/less/formfield/UiDateField.less b/teamapps-client/less/formfield/UiDateField.less
index 0c5d0d3ee..6b2068440 100644
--- a/teamapps-client/less/formfield/UiDateField.less
+++ b/teamapps-client/less/formfield/UiDateField.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -18,16 +18,19 @@
  * =========================LICENSE_END==================================
  */
 .AbstractUiDateField {
-  min-width: @default-input-width;
-
   .calendar-icon {
     align-self: center;
   }
 }
 
-.tr-template-icon-single-line {
-  font-size: @font-size-base;
+.static-readonly-UiDateField {
+  font-size: var(--ta-font-size);
+
+  .calendar-icon {
+    flex: 0 0 auto;
+  }
   .content-wrapper {
+    flex: 1 1 auto;
     margin-left: 3px;
   }
 }
@@ -43,7 +46,7 @@
 .calendar-symbol-page {
   shape-rendering: crispEdges;
   fill: none;
-  stroke: #999999;
+  stroke: #0000003b;
   stroke-width: 20;
   stroke-linejoin: miter;
   stroke-miterlimit: 4;
diff --git a/teamapps-client/less/formfield/UiDateTimeField.less b/teamapps-client/less/formfield/UiDateTimeField.less
index 95d20885a..0fbf713dc 100644
--- a/teamapps-client/less/formfield/UiDateTimeField.less
+++ b/teamapps-client/less/formfield/UiDateTimeField.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -18,7 +18,7 @@
  * =========================LICENSE_END==================================
  */
 .UiDateTimeField {
-  min-width: @default-input-width;
+
 }
 
 .static-readonly-UiDateTimeField {
diff --git a/teamapps-client/less/formfield/UiDisplayField.less b/teamapps-client/less/formfield/UiDisplayField.less
index 047f3c2e9..cdf1ffbb4 100644
--- a/teamapps-client/less/formfield/UiDisplayField.less
+++ b/teamapps-client/less/formfield/UiDisplayField.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -36,4 +36,8 @@
     .form-control;
     height: auto;
   }
+
+  &:not(.show-html) {
+    white-space: pre-line;
+  }
 }
diff --git a/teamapps-client/less/formfield/UiField.less b/teamapps-client/less/formfield/UiField.less
index 82dd52503..1440a0018 100644
--- a/teamapps-client/less/formfield/UiField.less
+++ b/teamapps-client/less/formfield/UiField.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -18,73 +18,74 @@
  * =========================LICENSE_END==================================
  */
 .UiField {
-
-  > :not(.messages) { // the actual field
-    height: 100%; // should you change this, check if the table cell editors are still the correct size
-  }
-
   // === border ===
 
   & .field-border,
   & .field-border-visibility {
-    border-color: @input-border;
-    transition: border-color @default-color-transition-time;
+    border-color: var(--ta-input-border-color);
+    transition: border-color var(--ta-color-transition-time);
   }
   &.message-success .field-border {
-    border-color: @state-success-text;
+    border-color: var(--ta-state-success-border);
   }
   &.message-warning .field-border {
-    border-color: @state-warning-border;
+    border-color: var(--ta-state-warning-border);
   }
   &.message-error .field-border {
-    border-color: @state-danger-text;
+    border-color: var(--ta-state-danger-border);
   }
 
-  &.focus .field-border-glow {
-    .teamapps-form-control-focus();
-  }
-  &.focus.message-success .field-border-glow {
-    .teamapps-form-control-focus(@state-success-text);
-  }
-  &.focus.message-warning .field-border-glow {
-    .teamapps-form-control-focus(@state-warning-border);
-  }
-  &.focus.message-error .field-border-glow {
-    .teamapps-form-control-focus(@state-danger-text);
+  &:focus-within, &.focus, & > .focus {
+    &.field-border-glow,
+    .field-border-glow {
+      .teamapps-form-control-focus();
+    }
+    &.message-success .field-border-glow,
+    &.message-success.field-border-glow {
+      .teamapps-form-control-focus(var(--ta-state-success-border));
+    }
+    &.message-warning .field-border-glow,
+    &.message-warning.field-border-glow {
+      .teamapps-form-control-focus(var(--ta-state-warning-border));
+    }
+    &.message-error .field-border-glow,
+    &.message-error.field-border-glow {
+      .teamapps-form-control-focus(var(--ta-state-danger-border));
+    }
   }
 
   &.readonly .field-border,
   &.readonly .field-border-visibility,
-  &.editable-if-focused:not(.focus):not(:hover) .field-border,
-  &.editable-if-focused:not(.focus):not(:hover) .field-border-visibility {
+  &.editable-if-focused:not(:focus-within):not(.focus):not(:hover) .field-border,
+  &.editable-if-focused:not(:focus-within):not(.focus):not(:hover) .field-border-visibility {
     border-color: transparent;
   }
 
   &.readonly .field-border-glow,
-  &.editable-if-focused:not(.focus):not(:hover) .field-border-glow {
+  &.editable-if-focused:not(:focus-within):not(.focus):not(:hover) .field-border-glow {
     box-shadow: none;
   }
 
   // === background ===
 
   & .field-background {
-    transition: background-color @default-color-transition-time;
+    transition: background-color var(--ta-color-transition-time);
   }
   &.message-success .field-background {
-    background-color: @state-success-bg;
+    background-color: var(--ta-state-success-bg);
   }
   &.message-warning .field-background {
-    background-color: @state-warning-bg;
+    background-color: var(--ta-state-warning-bg);
   }
   &.message-error .field-background {
-    background-color: @state-danger-bg;
+    background-color: var(--ta-state-danger-bg);
   }
 
   &.disabled .field-background {
-    background-color: @input-bg-disabled;
+    background-color: var(--ta-input-bg-disabled);
   }
   &.readonly .field-background,
-  &.editable-if-focused:not(.focus):not(:hover) .field-background {
+  &.editable-if-focused:not(:focus-within):not(.focus):not(:hover) .field-background {
     background: transparent;
   }
 
@@ -97,16 +98,16 @@
   & .field-border,
   & .field-border-glow,
   & .field-background {
-    transition: border-color @default-color-transition-time, box-shadow @default-color-transition-time, background-color @default-color-transition-time;
+    transition: border-color var(--ta-color-transition-time), box-shadow var(--ta-color-transition-time), background-color var(--ta-color-transition-time);
   }
 
   // === SPECIFIC ===
 
-  &.editable-if-focused:not(.focus):not(:hover) {
+  &.editable-if-focused:not(:focus-within):not(.focus):not(:hover) {
     .tr-trigger,
     .tr-remove-button,
     .tr-unitbox-selected-entry-and-trigger-wrapper {
-      transition: opacity @default-color-transition-time, background-color @default-color-transition-time;
+      transition: opacity var(--ta-color-transition-time), background-color var(--ta-color-transition-time);
       border-color: transparent !important;
       background-color: transparent;
     }
@@ -123,41 +124,47 @@
     }
   }
 
+  &.disabled {
+    //filter: grayscale(100%); // NO! This will also greyscale error messages (and these must be red!). This must be handled by the fields.
+  }
+
   .teamapps-input-wrapper {
-    border: 1px solid @input-border;
-    border-radius: @input-border-radius;
+    border: 1px solid var(--ta-input-border-color);
+    border-radius: var(--ta-input-border-radius);
+  }
+
+  &::placeholder, *::placeholder, .placeholder-text {
+    color: var(--ta-input-color-placeholder);
+  }
+
+  .placeholder-text {
+    padding: var(--ta-padding-base-vertical) var(--ta-padding-base-horizontal);
   }
 
 }
 
+.default-min-field-width {
+  min-width: var(--ta-input-default-width);
+}
+
 .field-message {
   padding: 0 5px;
 }
 .field-message-info {
-  .text-info;
+  color: var(--ta-state-info-text);
 }
 .field-message-success {
-  .text-success;
+  color: var(--ta-state-success-text);
 }
 .field-message-warning {
-  .text-warning;
+  color: var(--ta-state-warning-text);
 }
 .field-message-error {
-  .text-danger;
+  color: var(--ta-state-danger-text);
 }
 
-.teamapps-form-control-focus(@color: @input-border-focus) {
+.teamapps-form-control-focus(@color: var(--ta-input-border-focus)) {
   border-color: @color;
   outline: 0;
-  @color-rgba: rgba(red(@color), green(@color), blue(@color), .6);
-  .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}");
+  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @color;
 }
-
-/* TODO
-- editable_if_focused and readonly: border transparent + no background!
-//  &.editable-if-focused:not(:focus):not(.focus):hover {
-//    border-color: @input-border-hover;
-//  }
-- trivial-components triggers, remove buttons
- */
-
diff --git a/teamapps-client/less/formfield/UiFileField.less b/teamapps-client/less/formfield/UiFileField.less
index 40280b229..b01451603 100644
--- a/teamapps-client/less/formfield/UiFileField.less
+++ b/teamapps-client/less/formfield/UiFileField.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -18,7 +18,6 @@
  * =========================LICENSE_END==================================
  */
 .UiFileField {
-  min-width: @default-input-width;
 
   &.readonly, &.editable-if-focused:not(:focus) {
   }
@@ -27,7 +26,7 @@
     position: relative;
 
     &:hover {
-      background-color: @teamapps-hover-color;
+      background-color: var(--ta-hover-color);
     }
 
     &.state-uploading,
@@ -37,11 +36,16 @@
         display: none !important;
       }
     }
+
     &.state-displaying {
       .progress-indicator, .file-info {
         display: none !important;
       }
     }
+
+    &:not(.deletable) .delete-button {
+      display: none;
+    }
   }
 
   &.float-style-horizontal {
@@ -50,6 +54,7 @@
       flex-wrap: wrap;
       text-align: center;
     }
+
     .file-item {
       position: relative;
       margin: 2px;
@@ -66,6 +71,7 @@
           overflow: hidden;
           text-overflow: ellipsis;
         }
+
         .file-size {
           font-size: 80%;
           color: #777;
@@ -74,6 +80,7 @@
         }
       }
     }
+
     .delete-button {
       position: absolute;
       top: 0;
@@ -104,6 +111,7 @@
           text-overflow: ellipsis;
           white-space: nowrap;
         }
+
         .file-size {
           color: #777;
           white-space: nowrap;
@@ -121,14 +129,40 @@
 
   &.show-entries-as-buttons-on-hover .file-item {
     border: 1px solid transparent;
+
     &:hover {
       .button-style-item;
     }
+
     &:active {
       .button-style-item-lowered;
     }
   }
 
+  .upload-button-wrapper {
+    display: inline-block;
+    position: relative;
+    overflow: hidden;
+    border: 1px solid var(--ta-input-border-color);
+    border-radius: var(--ta-input-border-radius);
+
+    .file-input {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      margin: 0;
+      padding: 0;
+      font-size: 20px;
+      cursor: default;
+      opacity: 0;
+      filter: alpha(opacity=0);
+    }
+  }
+
 }
 
 .static-readonly-UiFileField {
@@ -139,16 +173,20 @@
     border-color: transparent;
     background: transparent;
   }
+
   .custom-entry-template-wrapper {
     margin-right: 3px;
     .button-style-item();
+
     &:hover {
-      .button-style-item-glow;
+      .button-style-item-lowered;
     }
+
     &:active {
-      .button-style-item-glow2;
+      .button-style-item-glow;
     }
   }
+
   .custom-entry-template {
     flex: 0 0 auto;
   }
diff --git a/teamapps-client/less/formfield/UiImageField.less b/teamapps-client/less/formfield/UiImageField.less
index 943beb3b2..dd0bde6e5 100644
--- a/teamapps-client/less/formfield/UiImageField.less
+++ b/teamapps-client/less/formfield/UiImageField.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-client/less/formfield/UiLabel.less b/teamapps-client/less/formfield/UiLabel.less
index bfe84427a..cf281dcd3 100644
--- a/teamapps-client/less/formfield/UiLabel.less
+++ b/teamapps-client/less/formfield/UiLabel.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-client/less/formfield/UiLinkButton.less b/teamapps-client/less/formfield/UiLinkButton.less
new file mode 100644
index 000000000..e33bf0260
--- /dev/null
+++ b/teamapps-client/less/formfield/UiLinkButton.less
@@ -0,0 +1,23 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+.UiLinkButton {
+  cursor: pointer;
+  outline: none;
+}
diff --git a/teamapps-client/less/formfield/UiMultiLineTextField.less b/teamapps-client/less/formfield/UiMultiLineTextField.less
index f762fd785..e2248d72e 100644
--- a/teamapps-client/less/formfield/UiMultiLineTextField.less
+++ b/teamapps-client/less/formfield/UiMultiLineTextField.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -18,21 +18,21 @@
  * =========================LICENSE_END==================================
  */
 .UiMultiLineTextField {
-  min-width: @default-input-width;
   position: relative;
   padding: 0;
-  background-color: @input-bg;
+  background-color: var(--ta-input-bg);
   overflow: auto;
+  height: 100%;
 
   &.disabled {
-    background-color: @input-bg-disabled;
+    background-color: var(--ta-input-bg-disabled);
   }
 
   textarea {
     width: 100%;
     height: 100%;
     border: none;
-    padding: @padding-base-vertical @padding-base-horizontal;
+    padding: var(--ta-padding-base-vertical) var(--ta-padding-base-horizontal);
     display: block;
     background: transparent;
     resize: none;
@@ -41,9 +41,9 @@
 
   .clear-button {
     position: absolute;
-    top: @padding-base-vertical;
-    margin-right: @padding-base-horizontal; // additional to the calculated "right" (via javascript, because of scroll bars)
-    background-color: @input-bg;
+    top: var(--ta-padding-base-vertical);
+    margin-right: var(--ta-padding-base-horizontal); // additional to the calculated "right" (via javascript, because of scroll bars)
+    background-color: var(--ta-input-bg);
     opacity: 0;
   }
 
@@ -70,6 +70,6 @@
 }
 
 .static-readonly-UiMultiLineTextField {
-  padding: @padding-base-vertical @padding-base-horizontal;
+  padding: var(--ta-padding-base-vertical) var(--ta-padding-base-horizontal);
   white-space: normal;
 }
diff --git a/teamapps-client/less/formfield/UiNumberField.less b/teamapps-client/less/formfield/UiNumberField.less
index e28597651..c3703a0ac 100644
--- a/teamapps-client/less/formfield/UiNumberField.less
+++ b/teamapps-client/less/formfield/UiNumberField.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -22,7 +22,6 @@
   flex-direction: column;
   justify-content: center;
   
-  min-width: @default-input-width;
   padding: 0;
   overflow: hidden;
   height: initial;
@@ -33,9 +32,7 @@
 
     input {
       text-align: right;
-    }
-    .optimized-for-touch & input {
-      height: @input-height-large - 2px;
+      height: calc(var(--ta-input-height) - 2px);
     }
   }
 
@@ -56,12 +53,17 @@
       pointer-events: none;
     }
   }
+
+  &.slider-mode-slider-only .clearable-field-wrapper {
+    .pseudo-hidden;
+  }
+  
 }
 
 .static-readonly-UiNumberField {
   text-align: right;
   width: 100%;
-  padding: @padding-base-vertical @padding-base-horizontal;
+  padding: var(--ta-padding-base-vertical) var(--ta-padding-base-horizontal);
 }
 
 .slider(@slider-height, @slider-handle-size) {
@@ -69,6 +71,7 @@
   @slider-track-width: 2px;
   @slider-track-offset: (@slider-height - @slider-track-width) / 2;
   @slider-handle-offset: (@slider-height - @slider-handle-size) / 2;
+
   height: @slider-height + @slider-separator-width;
   border-top: @slider-separator-width solid rgba(0, 0, 0, .07);
   position: relative;
diff --git a/teamapps-client/less/formfield/UiPasswordField.less b/teamapps-client/less/formfield/UiPasswordField.less
index 18fc44728..84f526a4a 100644
--- a/teamapps-client/less/formfield/UiPasswordField.less
+++ b/teamapps-client/less/formfield/UiPasswordField.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -18,9 +18,8 @@
  * =========================LICENSE_END==================================
  */
 .UiPasswordField {
-  min-width: @default-input-width;
 }
 
 .static-readonly-UiPasswordField {
-  padding: @padding-base-vertical @padding-base-horizontal;
+  padding: var(--ta-padding-base-vertical) var(--ta-padding-base-horizontal);
 }
diff --git a/teamapps-client/less/formfield/UiPictureChooser.less b/teamapps-client/less/formfield/UiPictureChooser.less
new file mode 100644
index 000000000..19df19823
--- /dev/null
+++ b/teamapps-client/less/formfield/UiPictureChooser.less
@@ -0,0 +1,87 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+
+.UiPictureChooser {
+  padding: 0;
+  display: inline-block;
+  border-radius: var(--ta-border-radius);
+  height: auto !important;
+
+  .picture-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .picture {
+    background-size: contain;
+    background-repeat: no-repeat;
+    width: 100%;
+    height: 100%;
+    border-radius: calc(var(--border-radius-large) - 1px);
+  }
+
+  .button {
+    position: absolute;
+    background-color: #ffffffaa;
+    border: 1px solid #cccccc77;
+    box-shadow: 0 1px 4px 0 #00000044;
+    border-radius: 50%;
+    outline: none;
+    width: 24px;
+    height: 24px;
+
+    transition: opacity .2s, background-color .2s, box-shadow .2s;
+
+    &.upload-button {
+      bottom: 4px;
+      right: 4px;
+    }
+    &.delete-button {
+      bottom: 4px;
+      right: 32px;
+    }
+
+    &:hover {
+      background-color: #ffffffcc;
+      box-shadow: 0 1px 4px 0 #00000099;
+    }
+  }
+
+  .progress-wrapper {
+    padding: var(--ta-padding-base-vertical) var(--ta-padding-base-horizontal);
+    > * {
+      margin: auto;
+    }
+  }
+  .file-input {
+    display: none
+  }
+}
+
+.UiField.editable-if-focused:not(:hover):not(.focus),
+.UiField.disabled,
+.UiField.readonly {
+  .UiPictureChooser .button{
+    opacity: 0;
+    pointer-events: none;
+  }
+}
diff --git a/teamapps-client/less/formfield/UiRichTextEditor.less b/teamapps-client/less/formfield/UiRichTextEditor.less
index 22e7726f8..6b413cf94 100644
--- a/teamapps-client/less/formfield/UiRichTextEditor.less
+++ b/teamapps-client/less/formfield/UiRichTextEditor.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -18,109 +18,44 @@
  * =========================LICENSE_END==================================
  */
 .UiRichTextEditor {
-  min-width: @default-input-width;
-  background-color: @input-bg;
-
+  background-color: var(--ta-input-bg);
   display: flex;
   flex-direction: column;
-
   position: relative;
+  height: 100%;
 
-  .toolbar-container {
-    width: 100% !important;
-    height: auto !important;
-    flex: 0 0 auto;
-
-    border-top-left-radius: @input-border-radius;
-    border-top-right-radius: @input-border-radius;
-    overflow: hidden;
-    
-    transition: opacity @default-color-transition-time;
-
-    > .mce-panel {
-      display: block !important;
-      width: 100% !important;
-      height: auto !important;
-      box-shadow: none;
-      border-color: @input-border-hover;
-      border-width: 0 0 1px 0 !important;
-      transition: border-color @default-color-transition-time;
-
-      > .mce-container-body {
-        width: 100% !important;
-        height: auto !important;
-
-        > .mce-toolbar-grp {
-          position: static;
-          width: 100% !important;
-          height: auto !important;
-          border-radius: @input-border-radius;
-
-          > .mce-container-body {
-            height: auto !important;
-            width: 100% !important;
-
-            > .mce-toolbar {
-              height: auto !important;
-              width: 100% !important;
-
-              > .mce-flow-layout {
-                height: auto !important;
-                width: 100% !important;
-                display: flex;
-                flex-wrap: wrap;
-
-                > .mce-btn-group {
-                  padding: 0;
-                  margin: 0;
-                  transition: border-color @default-color-transition-time;
-
-                  &:last-child {
-                    flex: 1 1 auto;
-                    text-align: right;
-                    border-left: none;
-                    > * {
-                      display: inline-block;
-                    }
-                  }
-
-                  .mce-btn {
-                    margin: 0;
-                    border: none;
-
-                    &:hover {
-                      background-color: @teamapps-hover-color;
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
+  .tox {
+    .tox-editor-header {
+      border-top: none;
+      border-left: none;
+      border-right: none;
+    }
+    .tox-toolbar-overlord {
+      border-top-left-radius: 4px;
+      border-top-right-radius: 4px;
+      overflow: hidden;
     }
   }
 
   .inline-editor {
     flex: 1 1 auto;
     outline: none !important;
-    //border: 1px solid transparent; // prevent margin merging!
     padding: 5px;
     overflow: auto;
 
-    alert {
+    .note {
       display: block;
 
-      padding: ((@line-height-computed - 1) / 2);
-      border: 1px solid transparent;
-      border-radius: @alert-border-radius;
-      margin-bottom: (@line-height-computed / 2);
+      padding: var(--ta-half-line-height-computed);
+      border: 1px solid var(--ta-state-info-border);
+      color: var(--ta-state-info-text);
+      background-color: var(--ta-state-info-bg);
+      border-radius: var(--ta-border-radius-large);
+      margin-bottom: var(--ta-half-line-height-computed);
 
       > *:last-child {
         margin-bottom: 0;
       }
-
-      .alert-variant(@alert-info-bg; @alert-info-border; @alert-info-text);
     }
 
     blockquote {
@@ -148,7 +83,7 @@
   &.editable-if-focused:not(:hover):not(.focus) .toolbar-container {
     opacity: .5;
     box-shadow: 0 0 1px 0 rgba(0, 0, 0, .5);
-    border-radius: @input-border-radius;
+    border-radius: var(--ta-input-border-radius);
 
     > .mce-panel {
       border-color: transparent;
@@ -178,4 +113,14 @@
     }
   }
 
+  @media print {
+    .toolbar-container {
+      display: none !important;
+    }
+  }
+
+}
+
+.UiField.readonly > .UiRichTextEditor .toolbar-container {
+  display: none;
 }
diff --git a/teamapps-client/less/formfield/UiSimpleFileField.less b/teamapps-client/less/formfield/UiSimpleFileField.less
new file mode 100644
index 000000000..23d9b23b3
--- /dev/null
+++ b/teamapps-client/less/formfield/UiSimpleFileField.less
@@ -0,0 +1,226 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+
+@import "../general";
+
+.line-clamp-2 {
+  position: relative;
+  height: 2.4em; /* exactly 2 lines */
+  overflow: hidden;
+  max-width: 100%;
+}
+
+@supports (-webkit-line-clamp: 2) {
+  .line-clamp-2 {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    height: auto;
+  }
+
+  .line-clamp-2:after {
+    display: none;
+  }
+}
+
+@supports not (-webkit-line-clamp: 2) {
+  .line-clamp-2:after {
+    content: "";
+    text-align: right;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 70%;
+    height: 1.2em;
+    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
+  }
+}
+
+.UiSimpleFileField {
+  padding: 0;
+  overflow: hidden;
+  height: auto;
+
+  .file-item:not(.deletable) .delete-button {
+    display: none;
+  }
+
+  &.float-style-horizontal {
+    .file-list {
+      display: grid;
+      grid-gap: 5px;
+      grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
+      padding: var(--ta-padding-base-horizontal);
+
+      .file-item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+        text-decoration: none;
+        color: var(--ta-text-color);
+
+        .delete-button-wrapper {
+          position: relative;
+          height: 0;
+
+          .delete-button {
+            position: absolute;
+            left: 13px;
+            top: 0;
+            background-color: #ffffff99;
+            border-radius: 50%;
+            box-shadow: 0 0 0 2px #ffffff99;
+          }
+        }
+
+        .file-icon {
+          margin: 4px 5px 0 5px;
+        }
+
+        &:not(.state-done) {
+          .file-icon {
+            display: none;
+          }
+        }
+
+        &.state-done {
+          .progress-indicator {
+            display: none;
+          }
+        }
+
+        .file-name {
+          font-size: 95%;
+          line-height: 1.2em;
+          word-break: break-all;
+        }
+
+        .file-description {
+          font-size: 80%;
+          color: var(--ta-text-color-gray);
+        }
+
+        .file-size {
+          font-size: 80%;
+          font-weight: var(--ta-font-weight-bold);
+        }
+      }
+    }
+  }
+
+  &.float-style-vertical-list {
+    .file-list {
+      display: block;
+      margin: 2px 0;
+
+      .file-item {
+        display: grid;
+        grid-template-areas: ". progress progress delete" "icon name name delete" "icon description size delete";
+        grid-template-columns: auto 1fr auto auto;
+        padding: 2px 5px;
+        text-decoration: none;
+        color: var(--ta-text-color);
+
+        &:hover {
+          background-color: var(--ta-hover-color);
+        }
+
+        .progress-indicator {
+          grid-area: progress;
+
+          .progress {
+            margin: 2px 0 3px 0;
+            height: 8px;
+
+            .progress-bar {
+              color: transparent;
+            }
+          }
+        }
+
+        &.state-done {
+          .progress-indicator {
+            display: none;
+          }
+        }
+
+        .delete-button-wrapper {
+          grid-area: delete;
+          align-self: center;
+          margin-left: 5px;
+
+          .delete-button {
+            background-color: #ffffff99;
+            border-radius: 50%;
+            box-shadow: 0 0 0 2px #ffffff99;
+          }
+        }
+
+        .file-icon {
+          grid-area: icon;
+          margin-right: 5px;
+        }
+
+        &:not(.state-done) {
+          .file-icon {
+            display: none;
+          }
+        }
+
+        .file-name {
+          grid-area: name;
+          align-self: end;
+          font-size: 95%;
+          line-height: 1.2em;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          overflow: hidden;
+        }
+
+        .file-description {
+          grid-area: description;
+          font-size: 80%;
+          color: var(--ta-text-color-gray);
+        }
+
+        .file-size {
+          grid-area: size;
+          font-size: 80%;
+          font-weight: var(--ta-font-weight-bold);
+          text-align: right;
+        }
+      }
+    }
+  }
+
+  .upload-button {
+    background-color: var(--ta-btn-default-bg);
+    border-top: 1px solid var(--ta-input-border-color);
+    display: flex;
+    justify-content: center;
+    padding: var(--ta-padding-base-vertical) var(--ta-padding-base-horizontal);
+    outline: none;
+
+    input {
+      display: none;
+    }
+  }
+}
diff --git a/teamapps-client/less/formfield/UiSlider.less b/teamapps-client/less/formfield/UiSlider.less
deleted file mode 100644
index 6af8e78cb..000000000
--- a/teamapps-client/less/formfield/UiSlider.less
+++ /dev/null
@@ -1,73 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-.UiSlider {
-  min-width: @default-input-width;
-
-  .noUi-handle {
-    outline: none;
-    .teamapps-form-control-focus();
-  }
-
-  padding: 30px 7px 2px 7px;
-
-  //padding-left: 10px;
-  //padding-right: 10px;
-
-  .noUi-horizontal {
-    height: 10px;
-
-    .noUi-handle {
-      width: 22px;
-      height: 19px;
-      right: -11px !important;
-    }
-
-    .noUi-tooltip {
-      min-width: 100%;
-      padding: 2px;
-    }
-  }
-
-  .optimized-for-touch & {
-    padding-top: 37px;
-    padding-left: 15px;
-    padding-right: 15px;
-
-    .noUi-horizontal {
-      height: 18px;
-
-      .noUi-handle {
-        width: 34px;
-        height: 28px;
-        right: -17px !important;
-      }
-
-      .noUi-tooltip {
-        min-width: 100%;
-        padding: 5px;
-      }
-    }
-  }
-
-  .noUi-handle:before, .noUi-handle:after {
-    display: none;
-  }
-}
-
diff --git a/teamapps-client/less/formfield/UiTagComboBox.less b/teamapps-client/less/formfield/UiTagComboBox.less
index 17dd253be..3ffab97e2 100644
--- a/teamapps-client/less/formfield/UiTagComboBox.less
+++ b/teamapps-client/less/formfield/UiTagComboBox.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -18,9 +18,8 @@
  * =========================LICENSE_END==================================
  */
 .UiTagComboBox {
-  min-width: @default-input-width;
 
-  &.wrapping-mode-single-tag-per-line .tr-tagbox-tagarea {
+  &.wrapping-mode-single-tag-per-line .tr-tagcombobox-tagarea {
     flex-direction: column;
     align-items: start;
 
@@ -30,11 +29,11 @@
     }
   }
 
-  &.wrapping-mode-single-line .tr-tagbox-tagarea {
+  &.wrapping-mode-single-line .tr-tagcombobox-tagarea {
     flex-wrap: nowrap;
   }
 
-  .tr-tagbox-tag .custom-entry-template {
+  .tr-tagcombobox-tag .custom-entry-template {
     flex: 0 0 auto;
   }
 }
diff --git a/teamapps-client/less/formfield/UiTextColorMarkerField.less b/teamapps-client/less/formfield/UiTextColorMarkerField.less
new file mode 100644
index 000000000..463e6abeb
--- /dev/null
+++ b/teamapps-client/less/formfield/UiTextColorMarkerField.less
@@ -0,0 +1,114 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+
+.UiTextColorMarkerField {
+  position: relative;
+  background-color: var(--ta-input-bg);
+  min-height: var(--ta-input-height);
+  padding: 0;
+
+  > .editor {
+    border: none;
+    resize: none;
+    outline: none;
+    background: transparent;
+    padding: var(--ta-padding-base-vertical) var(--ta-padding-base-horizontal);
+    white-space: pre-wrap;
+    height: 100%;
+    width: 100%; // needed for newline workaround
+    display: inline-block; // workaround for newlines in Chrome (does not work with flex)
+    box-sizing: border-box; // workaround for newlines in Chrome (to make sure the width is correct)
+
+    .marker {
+      --marker-bg-color: transparent;
+      --marker-border-color: transparent;
+      --marker-text-color: #000000;
+      background-color: color-mix(in srgb, var(--marker-bg-color) 75%, transparent);
+      box-shadow: 0 0 4px 1px color-mix(in srgb, var(--marker-border-color) 85%, transparent);
+      color: var(--marker-text-color);
+      padding: 0 1px;
+      margin: 0 -1px;
+      cursor: pointer;
+    }
+  }
+
+  > .toolbar-wrapper {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 100%;
+    background-color: var(--ta-bg-color);
+    box-shadow: 0 3px 8px -1px rgba(0, 0, 0, .4);
+    border-radius: 0 0 var(--ta-border-radius) var(--ta-border-radius);
+    padding: 4px;
+    gap: 4px;
+    flex-wrap: wrap;
+    z-index: var(--ta-zindex-dropdown);
+    &.hidden {
+      display: none;
+    }
+    &:not(.hidden) {
+      display: flex;
+    }
+    .toolbar-button {
+      padding: var(--ta-padding-base-vertical) var(--ta-padding-base-horizontal);
+      border: 1px solid var(--ta-input-border-color);
+      border-radius: var(--ta-input-border-radius);
+      cursor: pointer;
+      font-family: var(--ta-font-family-base);
+      font-size: var(--ta-font-size-small);
+      line-height: var(--ta-line-height);
+      min-height: calc(var(--ta-line-height-computed) + var(--ta-padding-base-vertical) * 2);
+      min-width: calc(var(--ta-line-height-computed) + var(--ta-padding-base-vertical) * 2);
+      white-space: nowrap;
+      transition: all 0.15s ease-in-out;
+      opacity: 0.6;
+
+      &:hover {
+        filter: brightness(1.1);
+        opacity: 1;
+      }
+      &:not(.applied) {
+        opacity: 1;
+      }
+    }
+  }
+
+  &:has(.toolbar-wrapper:not(.hidden)) {
+    border-radius: var(--ta-input-border-radius) var(--ta-input-border-radius) 0 0;
+  }
+
+  &.disabled {
+    .marker {
+      cursor: auto;
+    }
+    .toolbar-wrapper {
+      display: none;
+    }
+  }
+
+  &.readonly > .editor {
+    padding: 0;
+  }
+
+  &.disabled {
+    background-color: var(--ta-input-bg-disabled);
+  }
+}
diff --git a/teamapps-client/less/formfield/UiTextField.less b/teamapps-client/less/formfield/UiTextField.less
index b845f0b5f..f948d457f 100644
--- a/teamapps-client/less/formfield/UiTextField.less
+++ b/teamapps-client/less/formfield/UiTextField.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -18,18 +18,47 @@
  * =========================LICENSE_END==================================
  */
 .UiTextField {
-  min-width: @default-input-width;
+}
+
+.UiPasswordField {
+  &.password-visibility-toggle-enabled .password-visibility-button {
+    flex: 0 0 16px;
+    width: 16px;
+    height: 16px;
+    margin-right: var(--ta-padding-base-horizontal);
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: contain;
+    opacity: .6;
+
+    .tr-input-wrapper.disabled &,
+    .tr-input-wrapper.readonly & {
+      display: none;
+    }
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  &.password-visible .password-visibility-button {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' width='48'%3E%3Cpath d='m31.45 27.05-2.2-2.2q1.3-3.55-1.35-5.9-2.65-2.35-5.75-1.2l-2.2-2.2q.85-.55 1.9-.8 1.05-.25 2.15-.25 3.55 0 6.025 2.475Q32.5 19.45 32.5 23q0 1.1-.275 2.175-.275 1.075-.775 1.875Zm6.45 6.45-2-2q2.45-1.8 4.275-4.025Q42 25.25 42.85 23q-2.5-5.55-7.5-8.775Q30.35 11 24.5 11q-2.1 0-4.3.4-2.2.4-3.45.95L14.45 10q1.75-.8 4.475-1.4Q21.65 8 24.25 8q7.15 0 13.075 4.075Q43.25 16.15 46 23q-1.3 3.2-3.35 5.85-2.05 2.65-4.75 4.65Zm2.9 11.3-8.4-8.25q-1.75.7-3.95 1.075T24 38q-7.3 0-13.25-4.075T2 23q1-2.6 2.775-5.075T9.1 13.2L2.8 6.9l2.1-2.15L42.75 42.6ZM11.15 15.3q-1.85 1.35-3.575 3.55Q5.85 21.05 5.1 23q2.55 5.55 7.675 8.775Q17.9 35 24.4 35q1.65 0 3.25-.2t2.4-.6l-3.2-3.2q-.55.25-1.35.375T24 31.5q-3.5 0-6-2.45T15.5 23q0-.75.125-1.5T16 20.15Zm15.25 7.1Zm-5.8 2.9Z'/%3E%3C/svg%3E");
+  }
+
+  &:not(.password-visible) .password-visibility-button {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' width='48'%3E%3Cpath d='M24 31.5q3.55 0 6.025-2.475Q32.5 26.55 32.5 23q0-3.55-2.475-6.025Q27.55 14.5 24 14.5q-3.55 0-6.025 2.475Q15.5 19.45 15.5 23q0 3.55 2.475 6.025Q20.45 31.5 24 31.5Zm0-2.9q-2.35 0-3.975-1.625T18.4 23q0-2.35 1.625-3.975T24 17.4q2.35 0 3.975 1.625T29.6 23q0 2.35-1.625 3.975T24 28.6Zm0 9.4q-7.3 0-13.2-4.15Q4.9 29.7 2 23q2.9-6.7 8.8-10.85Q16.7 8 24 8q7.3 0 13.2 4.15Q43.1 16.3 46 23q-2.9 6.7-8.8 10.85Q31.3 38 24 38Zm0-15Zm0 12q6.05 0 11.125-3.275T42.85 23q-2.65-5.45-7.725-8.725Q30.05 11 24 11t-11.125 3.275Q7.8 17.55 5.1 23q2.7 5.45 7.775 8.725Q17.95 35 24 35Z'/%3E%3C/svg%3E");
+  }
 }
 
 .static-readonly-UiTextField {
-  padding: @padding-base-vertical @padding-base-horizontal;
+  padding: var(--ta-padding-base-vertical) var(--ta-padding-base-horizontal);
 }
 
 .clearable-field-wrapper {
   background-color: white;
   display: flex;
   align-items: center;
-  min-height: @tr-input-min-height;
+  min-height: var(--ta-input-height);
   padding: 0;
 
   input {
@@ -38,12 +67,12 @@
     border: none;
     outline: none;
     background: transparent;
-    padding: @padding-base-vertical @padding-base-horizontal;
+    padding: var(--ta-padding-base-vertical) var(--ta-padding-base-horizontal);
   }
 
   .clear-button {
-    flex: 0 0 15px;
-    margin-right: @padding-base-horizontal;
+    flex: 0 0 16px;
+    margin-right: var(--ta-padding-base-horizontal);
   }
 
   &.readonly, &.disabled, &:not(.clearable) {
@@ -57,6 +86,6 @@
   }
 
   &.disabled {
-    background-color: @input-bg-disabled
+    background-color: var(--ta-input-bg-disabled)
   }
 }
diff --git a/teamapps-client/less/formfield/UiTimeField.less b/teamapps-client/less/formfield/UiTimeField.less
index 3910a6209..5d224390d 100644
--- a/teamapps-client/less/formfield/UiTimeField.less
+++ b/teamapps-client/less/formfield/UiTimeField.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,53 +17,14 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-.UiTimeField {
-  min-width: @default-input-width;
-  
-  .tr-template-icon-single-line {
-    font-size: 100%;
-    .clock-icon {
-      align-self: center;
-
-      .clockcircle {
-        stroke: #555;
-        stroke-width: 5px;
-        fill: #fff;
-      }
-
-      .hourhand {
-        stroke: #333;
-        stroke-width: 8.7px;
-        stroke-linecap: round;
-      }
-
-      .minutehand {
-        stroke: #333;
-        stroke-width: 6.2px;
-        stroke-linecap: round;
-      }
-
-      .night-true .clockcircle {
-        stroke-width: 5px;
-        stroke: #333;
-        fill: rgba(77, 130, 184, 0.76);
-      }
-
-      .night-true .hourhand {
-        stroke-width: 8px;
-        stroke: #fff;
-        fill: #333;
-      }
+.static-readonly-UiTimeField {
+  font-size: var(--ta-font-size);
 
-      .night-true .minutehand {
-        stroke-width: 6px;
-        stroke: #fff;
-        fill: #333;
-      }
-    }
+  .clock-icon {
+    flex: 0 0 auto;
+  }
+  .content-wrapper {
+    flex: 1 1 auto;
+    margin-left: 3px;
   }
-}
-
-.static-readonly-UiTimeField {
-  width: 100%;
 }
diff --git a/teamapps-client/less/general.less b/teamapps-client/less/general.less
index 7e4a35c77..79db25a4d 100644
--- a/teamapps-client/less/general.less
+++ b/teamapps-client/less/general.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,16 +17,23 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
+//@import "bootstrap-imports";
+
 html {
   height: 100%;
   overflow: hidden;
-  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAIElEQVQYV2NkYGDgYcAEX9CFGIeIQix+wfQgyDODXSEAFqcFR3lM5YsAAAAASUVORK5CYII=) repeat;
+  //background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAIElEQVQYV2NkYGDgYcAEX9CFGIeIQix+wfQgyDODXSEAFqcFR3lM5YsAAAAASUVORK5CYII=) repeat;
+  font-size: var(--ta-font-size); // needed for rem font size!
 }
 
 body, .full-height {
   height: 100%;
   overflow-y: auto;
-  background-color: transparent;
+  background-color: var(--ta-bg-color);
+}
+
+.hidden {
+  display: none !important;
 }
 
 .pseudo-hidden {
@@ -41,32 +48,10 @@ body, .full-height {
   text-overflow: ellipsis;
 }
 
-table {
-  th {
-    background-color: @table-bg-hover;
-    border-bottom-width: 1px !important;
-  }
-}
-
-a.disabled {
-  .text-muted();
-  &:hover {
-    .text-muted();
-  }
-}
-
 .dataTables_scrollHead table {
   margin: 0;
 }
 
-.flex-filler {
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-}
-
 .img {
   background-repeat: no-repeat;
   background-position: center;
@@ -87,6 +72,12 @@ a.disabled {
   background-size: 16px;
 }
 
+.img-20 {
+  width: 20px;
+  height: 20px;
+  background-size: 20px;
+}
+
 .img-24 {
   width: 24px;
   height: 24px;
@@ -129,74 +120,43 @@ input {
 
 .discreet-button-style-item {
   border-color: transparent;
-  background: rgba(255, 255, 255, .75) none;
+  background: var(--ta-bg-color-semi-transparent) none;
   box-shadow: 0 0 3px 0 rgba(0, 0, 0, .15);
   border-radius: 0;
   transition: background 0.1s, border-color 0.05s;
 }
 
 .button-style-item {
-  border-radius: @border-radius-small;
-  border: 1px solid #e1e2e3;
-  border-bottom-color: #d0d1d4;
+  border-radius: var(--ta-border-radius-small);
+  border: 1px solid var(--ta-input-border-color);
   box-shadow: 0 3px 5px -2px rgba(0, 0, 0, .13);
-  background: linear-gradient(to bottom, #ffffff 0%,#fbfbfc 62%,#f7f8f9 84%,#f5f6f7 94%,#edeff1 100%);
+  background: var(--ta-3d-button-gradient);
   user-select: none;
   transition: background 0.1s, border-color 0.05s;
 }
 
 .button-style-item-lowered {
-  border-radius: @border-radius-small;
-  border: 1px solid #e1e2e3;
-  border-top-color: #d6d7d8;
-  background: linear-gradient(to bottom, #fafafa 0%, #fbfbfc 62%, #f7f8f9 84%, #f5f6f7 94%, #edeff1 100%);
+  border-radius: var(--ta-border-radius-small);
+  border: 1px solid var(--ta-input-border-color);
+  background: var(--ta-3d-button-gradient-lowered);
   user-select: none;
   transition: background 0.1s, border-color 0.05s;
   box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.1);
 }
 
 .button-style-item-glow {
-  border-radius: @border-radius-small;
-  background: linear-gradient(to bottom, #feeeac 0%,#fee5a6 7%,#fee7a8 92%,#fef4b0 97%,#fef7b4 100%);
-  border: 1px solid lighten(#C19344, 30%);
+  border-radius: var(--ta-border-radius-small);
+  background: var(--ta-glow-gradient);
+  border: 1px solid var(--ta-glow-border-color);
 }
 
 .button-style-item-glow-lowered {
-  border-radius: @border-radius-small;
-  background: linear-gradient(to bottom, #fef7b4 0%,#fef4b0 7%,#fee7a8 92%,#fee5a6 97%,#feeeac 100%);
-  border: 1px solid lighten(#C19344, 30%);
-  border-top-color: lighten(#C19344, 25%);
+  border-radius: var(--ta-border-radius-small);
+  background: var(--ta-glow-gradient-lowered);
+  border: 1px solid var(--ta-glow-border-color);
   box-shadow: inset 0 2px 5px -1px rgba(0, 0, 0, 0.13);
 }
 
-.button-style-item-glow2 {
-  border-radius: @border-radius-small;
-  background: linear-gradient(to bottom, #fee47d 0%,#fed774 7%,#feda75 92%,#feed83 97%,#fef387 100%);
-  border: 1px solid #C19344;
-}
-
-.button-style-item-dark {
-  border-radius: @border-radius-small;
-  border: 1px solid rgba(225, 226, 227, 0.4);
-  border-bottom-color: rgba(177, 178, 180, 0.51);
-  box-shadow: 0 3px 5px -2px rgba(0, 0, 0, .13);
-  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4) 0%, rgba(251, 251, 252, 0.4) 62%, rgba(247, 248, 249, 0.4) 84%, rgba(245, 246, 247, 0.4) 94%, rgba(237, 239, 241, 0.4) 100%);
-  user-select: none;
-  transition: background 0.1s, border-color 0.05s;
-}
-
-.button-style-item-glow-dark {
-  border-radius: @border-radius-small;
-  background: linear-gradient(to bottom, rgba(254, 238, 172, 0.4) 0%, rgba(254, 229, 166, 0.4) 7%, rgba(254, 231, 168, 0.4) 92%, rgba(254, 244, 176, 0.4) 97%, rgba(254, 247, 180, 0.4) 100%);
-  border: 1px solid lighten(rgba(193, 147, 68, 0.4), 30%);
-}
-
-.button-style-item-glow2-dark {
-  border-radius: @border-radius-small;
-  background: linear-gradient(to bottom, rgba(254, 228, 125, 0.51) 0%, rgba(254, 215, 116, 0.51) 7%, rgba(254, 218, 117, 0.51) 92%, rgba(254, 237, 131, 0.51) 97%, rgba(254, 243, 135, 0.51) 100%);
-  border: 1px solid rgba(193, 147, 68, 0.5);
-}
-
 .fullscreen-request-frame {
   top: 0;
   left: 0;
@@ -204,7 +164,7 @@ input {
   height: 0;
   position: absolute;
 
-  background-color: rgba(255, 255, 255, .7);
+  background-color: var(--ta-bg-color-semi-transparent);
 
   //border: 3px dashed #aaa;
 
@@ -252,18 +212,8 @@ input {
   transition: none !important;
 }
 
-.optimized-for-touch {
-  .tr-input-wrapper,
-  .form-control,
-  .UiDisplayField,
-  .UiMultiLineTextField,
-  .UiRichTextEditor {
-    min-height: @input-height-large;
-  }
-}
-
 .teamapps-expander {
-  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAMklEQVQYV2NkIAIwIqn5D2Uji4GF0AWwKsTQxcDAgKEQmyKQDSgKyTKJoJuI9h3WUAMAntIHCtDLLc8AAAAASUVORK5CYII=);
+  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gQ3JlYXRlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIC0tPgoKPHN2ZwogICB2aWV3Qm94PSIwIDAgMTAwIDEwMCIKICAgdmVyc2lvbj0iMS4xIgogICBpZD0ic3ZnNTE2IgogICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxkZWZzCiAgICAgaWQ9ImRlZnM1MTMiIC8+CiAgPGcKICAgICBpZD0ibGF5ZXIxIj4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0iZmlsbDojMDAwMDAwO3N0cm9rZS13aWR0aDowLjI2NDU4MyIKICAgICAgIGQ9Ik0gNDAsMjAgNzAsNTAgNDAsODAgMzAsNzUgNTUsNTAgMzAsMjUiCiAgICAgICBpZD0icGF0aDIxODciIC8+CiAgPC9nPgo8L3N2Zz4K);
   background-position: center;
   background-repeat: no-repeat;
   -webkit-transition: -webkit-transform .1s;
@@ -291,3 +241,28 @@ input {
   padding-left: 4px;
   align-items: center;
 }
+
+.caret {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  margin-left: 2px;
+  vertical-align: middle;
+  border-top: var(--ta-caret-size) dashed;
+  border-right: var(--ta-caret-size) solid transparent;
+  border-left: var(--ta-caret-size) solid transparent;
+}
+
+.full-size-children > * {
+  width: 100%;
+  height: 100%;
+}
+
+.centered-body-text {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
diff --git a/teamapps-client/less/micro-components/CalendarEventListPopper.less b/teamapps-client/less/micro-components/CalendarEventListPopper.less
new file mode 100644
index 000000000..7a02a9cf2
--- /dev/null
+++ b/teamapps-client/less/micro-components/CalendarEventListPopper.less
@@ -0,0 +1,51 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+.CalendarEventListPopper {
+
+  z-index: var(--ta-zindex-tooltip);
+
+  .ta-tooltip-inner {
+    padding: 0;
+  }
+
+
+  .all-day-events,
+  .normal-events {
+    padding: 5px;
+  }
+
+
+  .all-day-events:not(:empty) + .normal-events {
+    border-top: 1px solid var(--ta-input-border-color);
+  }
+
+  .fc-event:not(:last-child) {
+    margin-bottom: 2px;
+  }
+
+  .fc-content {
+    padding : 0 2px;
+  }
+
+  .fc-time {
+    font-size: 0.85em;
+  }
+
+}
diff --git a/teamapps-material-icon-provider/src/main/java/org/teamapps/icon/material/SingleColorStyle.java b/teamapps-client/less/micro-components/ContextMenu.less
similarity index 56%
rename from teamapps-material-icon-provider/src/main/java/org/teamapps/icon/material/SingleColorStyle.java
rename to teamapps-client/less/micro-components/ContextMenu.less
index bbc6b808a..7b4a7ff47 100644
--- a/teamapps-material-icon-provider/src/main/java/org/teamapps/icon/material/SingleColorStyle.java
+++ b/teamapps-client/less/micro-components/ContextMenu.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,24 +17,36 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-package org.teamapps.icon.material;
 
-public abstract class SingleColorStyle extends AbstractMaterialIconStyle {
+.ContextMenu {
+  position: absolute;
+  z-index: var(--ta-zindex-dropdown);
+  background-color: var(--ta-bg-color); 
+  border: 1px solid var(--ta-input-border-color);
+  border-radius: var(--ta-border-radius);
+  box-shadow: var(--ta-box-shadow-base);
+  transition: opacity .3s;
 
-    private final String color;
+  &.empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
 
-    public SingleColorStyle(String styleId, StyleType styleType, String color) {
-        super(styleId, styleType);
-        this.color = color;
+    height: 80px !important;
+
+    .teamapps-spinner {
+      width: 40px;
+      height: 40px;
     }
+  }
 
-    public String getColor() {
-        return color;
+  &:not(.empty) {
+    .teamapps-spinner {
+      display: none;
     }
 
-    @Override
-    public String applyStyle(String svg) {
-        String styleTags = createStyleTags(color);
-        return applyStyle(svg, styleTags);
+    > * {
+      height: 100%;
     }
+  }
 }
diff --git a/teamapps-client/less/micro-components/FieldMessagePopper.less b/teamapps-client/less/micro-components/FieldMessagePopper.less
deleted file mode 100644
index 5f46e8c31..000000000
--- a/teamapps-client/less/micro-components/FieldMessagePopper.less
+++ /dev/null
@@ -1,124 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-@arrow-size: 5px;
-
-.tooltip {
-  position: absolute;
-  background-color: #fff;
-  color: @text-color;
-  min-width: 150px;
-  max-width: ~"calc(100% - 20px)";
-  border-radius: @border-radius-base;
-  box-shadow: @flying-box-shadow;
-  padding: 0;
-  text-align: left;
-  border: 1px solid;
-
-  &.empty {
-    display: none;
-  }
-}
-
-.tooltip .tooltip-arrow {
-  z-index: -1;
-  width: 2 * @arrow-size;
-  height: 2 * @arrow-size;
-  position: absolute;
-  border: 1px solid;
-  transform: rotate(45deg);
-  background-color: white;
-}
-
-.tooltip-inner {
-  padding: @padding-base-vertical @padding-base-horizontal;
-  border-radius: @border-radius-base;
-  background-color: white;
-}
-
-.tooltip.tooltip-info,
-.tooltip.tooltip-info .tooltip-arrow {
-  border-color: @input-border;
-  &, .tooltip-inner {
-    background-color: white;
-  }
-}
-
-.tooltip.tooltip-success,
-.tooltip.tooltip-success .tooltip-arrow {
-  border-color: @state-success-text;
-  &, .tooltip-inner {
-    //background-color: @state-success-bg;
-    background-color: white;
-  }
-}
-
-.tooltip.tooltip-warning,
-.tooltip.tooltip-warning .tooltip-arrow {
-  border-color: @state-warning-border;
-  &, .tooltip-inner {
-    //background-color: @state-warning-bg;
-    background-color: white;
-  }
-}
-
-.tooltip.tooltip-error,
-.tooltip.tooltip-error .tooltip-arrow {
-  border-color: @state-danger-text;
-  &, .tooltip-inner {
-    //background-color: @state-danger-bg;
-    background-color: white;
-  }
-}
-
-.tooltip[x-placement^="top"] {
-  margin-bottom: @arrow-size + 1px;
-}
-
-.tooltip[x-placement^="top"] .tooltip-arrow {
-  bottom: -@arrow-size;
-  left: calc(50% - @arrow-size);
-}
-
-.tooltip[x-placement^="bottom"] {
-  margin-top: @arrow-size + 1px;
-}
-
-.tooltip[x-placement^="bottom"] .tooltip-arrow {
-  top: -@arrow-size;
-  left: calc(50% - @arrow-size);
-}
-
-.tooltip[x-placement^="right"] {
-  margin-left: @arrow-size + 1px;
-}
-
-.tooltip[x-placement^="right"] .tooltip-arrow {
-  left: -@arrow-size;
-  top: calc(50% - @arrow-size);
-}
-
-.tooltip[x-placement^="left"] {
-  margin-right: @arrow-size + 1px;
-}
-
-.tooltip[x-placement^="left"] .tooltip-arrow {
-  right: -@arrow-size;
-  top: calc(50% - @arrow-size);
-}
diff --git a/teamapps-client/less/micro-components/ProgressBar.less b/teamapps-client/less/micro-components/ProgressBar.less
index e1377df35..f8df4de52 100644
--- a/teamapps-client/less/micro-components/ProgressBar.less
+++ b/teamapps-client/less/micro-components/ProgressBar.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,8 +19,8 @@
  */
 .ProgressBar {
   .error-message-bar {
-    background: @alert-danger-bg;
-    color: @alert-danger-text;
+    background: var(--ta-state-danger-bg);
+    color: var(--ta-state-danger-text);
     padding-left: 4px;
   }
 }
diff --git a/teamapps-client/less/micro-components/ProgressCircle.less b/teamapps-client/less/micro-components/ProgressCircle.less
index 5846c85c3..c3342b368 100644
--- a/teamapps-client/less/micro-components/ProgressCircle.less
+++ b/teamapps-client/less/micro-components/ProgressCircle.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -27,7 +27,7 @@
 
   &.error {
     .countdown-circle-background {
-      stroke: @alert-danger-text;
+      stroke: var(--ta-state-danger-text);
       fill: #f2dede;
     }
     .countdown-circle {
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/application/data/RecordDeletionHandler.java b/teamapps-client/less/micro-components/UiAudioLevelIndicator.less
similarity index 81%
rename from teamapps-ux/src/main/java/org/teamapps/ux/application/data/RecordDeletionHandler.java
rename to teamapps-client/less/micro-components/UiAudioLevelIndicator.less
index 27304effe..52126d45c 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/application/data/RecordDeletionHandler.java
+++ b/teamapps-client/less/micro-components/UiAudioLevelIndicator.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,8 +17,11 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-package org.teamapps.ux.application.data;
+.UiAudioLevelIndicator {
+  position: relative;
 
-public interface RecordDeletionHandler<RECORD> {
-    void deleteRecord(RECORD record);
+  canvas {
+    width: 100%;
+    height: 100%;
+  }
 }
diff --git a/teamapps-client/less/micro-components/UiDropDown.less b/teamapps-client/less/micro-components/UiDropDown.less
index c09241a63..b76d7a7a1 100644
--- a/teamapps-client/less/micro-components/UiDropDown.less
+++ b/teamapps-client/less/micro-components/UiDropDown.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,10 +19,10 @@
  */
 .UiDropDown {
 	position: absolute;
-	z-index: 10000000;
-	box-shadow: @flying-box-shadow;
-	border: 1px solid @input-border;
-	border-radius: 0 0 @border-radius-base @border-radius-base;
+	z-index: var(--ta-zindex-dropdown);
+	box-shadow: var(--ta-box-shadow-large);
+	border: 1px solid var(--ta-input-border-color);
+	border-radius: 0 0 var(--ta-border-radius) var(--ta-border-radius);
 
 	&:not(.open) {
 		.pseudo-hidden;
@@ -30,7 +30,7 @@
 
 	> .background-color-div {
 		width: 100%;
-		background-color: rgba(255, 255, 255, 0.84);
+		background-color: var(--ta-bg-color-semi-transparent);
 		overflow: auto;
 		.tr-default-spinner {
 			position: static;
diff --git a/teamapps-client/less/micro-components/UiSpinner.less b/teamapps-client/less/micro-components/UiSpinner.less
index 4d89f263f..47aac1006 100644
--- a/teamapps-client/less/micro-components/UiSpinner.less
+++ b/teamapps-client/less/micro-components/UiSpinner.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -21,19 +21,20 @@
   display: flex;
   align-items: center;
   justify-content: center;
+}
 
-  .teamapps-spinner {
-    -webkit-transform: translateZ(0);
-    -ms-transform: translateZ(0);
-    transform: translateZ(0);
-    -webkit-animation: UiSpinner-animation 1.1s infinite linear;
-    animation: UiSpinner-animation 1.1s infinite linear;
-    border-radius: 50%;
-    border: 2px solid rgba(255, 255, 255, 0.2);
-    border-left-color: @brand-primary;
-    border-top-color: @brand-primary;
-  }
+.teamapps-spinner {
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
+  -webkit-animation: UiSpinner-animation 1.1s infinite linear;
+  animation: UiSpinner-animation 1.1s infinite linear;
+  border-radius: 50%;
+  border: 2px solid rgba(255, 255, 255, 0.2);
+  border-left-color: var(--ta-color-primary);
+  border-top-color: var(--ta-color-primary);
 }
+
 @-webkit-keyframes UiSpinner-animation {
   0% {
     -webkit-transform: rotate(0deg);
diff --git a/teamapps-client/less/micro-components/UiToolButton.less b/teamapps-client/less/micro-components/UiToolButton.less
index be0354922..959392ca6 100644
--- a/teamapps-client/less/micro-components/UiToolButton.less
+++ b/teamapps-client/less/micro-components/UiToolButton.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -20,10 +20,20 @@
 .UiToolButton {
 
   margin: 0 3px;
+  display: flex;
+  align-items: center;
 
   &.gray-out-if-not-hovered:not(:hover) {
     filter: grayscale(100%);
   }
+
+  .img {
+    .img-12(); // unless otherwise overwritten
+  }
+
+  .caption:not(:empty) {
+    margin-left: 3px;
+  }
 }
 
 .optimized-for-touch .UiToolButton {
diff --git a/teamapps-client/less/micro-components/tooltip.less b/teamapps-client/less/micro-components/tooltip.less
new file mode 100644
index 000000000..fafc67518
--- /dev/null
+++ b/teamapps-client/less/micro-components/tooltip.less
@@ -0,0 +1,114 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+
+.ta-tooltip {
+  z-index: var(--ta-zindex-tooltip);
+  position: absolute;
+  background-color: #fff;
+  color: var(--ta-text-color);
+  min-width: 150px;
+  max-width: ~"calc(100% - 20px)";
+  border-radius: var(--ta-border-radius);
+  box-shadow: var(--ta-box-shadow-large);
+  padding: 0;
+  text-align: left;
+  border: 1px solid var(--ta-input-border-color);
+
+  &.empty {
+    display: none;
+  }
+}
+
+.ta-tooltip .ta-tooltip-arrow {
+  z-index: -1;
+  position: absolute;
+  width: var(--ta-tooltip-arrow-size);
+  height: var(--ta-tooltip-arrow-size);
+
+  &:after {
+    position: absolute;
+    content: ' ';
+    font-size: 0;
+    width: calc(2 * var(--ta-tooltip-arrow-size));
+    height: calc(2 * var(--ta-tooltip-arrow-size));
+    left: calc(-.5 * var(--ta-tooltip-arrow-size));
+    top: calc(-.5 * var(--ta-tooltip-arrow-size));
+    transform: rotate(45deg);
+    border: 1px solid var(--ta-input-border-color);
+    background-color: white;
+  }
+}
+
+.ta-tooltip-inner {
+  padding: var(--ta-padding-base-vertical) var(--ta-padding-base-horizontal);
+  border-radius: var(--ta-border-radius);
+  background-color: white;
+}
+
+.ta-tooltip.ta-tooltip-info,
+.ta-tooltip.ta-tooltip-info .ta-tooltip-arrow:after {
+  border-color: var(--ta-input-border-color);
+  &, .ta-tooltip-inner {
+    background-color: white;
+  }
+}
+
+.ta-tooltip.ta-tooltip-success,
+.ta-tooltip.ta-tooltip-success .ta-tooltip-arrow:after {
+  border-color: var(--ta-state-success-border);
+  &, .ta-tooltip-inner {
+    //background-color: @state-success-bg;
+    background-color: white;
+  }
+}
+
+.ta-tooltip.ta-tooltip-warning,
+.ta-tooltip.ta-tooltip-warning .ta-tooltip-arrow:after {
+  border-color: var(--ta-state-warning-border);
+  &, .ta-tooltip-inner {
+    //background-color: @state-warning-bg;
+    background-color: white;
+  }
+}
+
+.ta-tooltip.ta-tooltip-error,
+.ta-tooltip.ta-tooltip-error .ta-tooltip-arrow:after {
+  border-color: var(--ta-state-danger-border);
+  &, .ta-tooltip-inner {
+    //background-color: @state-danger-bg;
+    background-color: white;
+  }
+}
+
+.ta-tooltip[data-popper-placement^="top"] .ta-tooltip-arrow {
+  bottom: calc(-.5 * var(--ta-tooltip-arrow-size));
+}
+
+.ta-tooltip[data-popper-placement^="bottom"] .ta-tooltip-arrow {
+  top: calc(-.5 * var(--ta-tooltip-arrow-size));
+}
+
+.ta-tooltip[data-popper-placement^="right"] .ta-tooltip-arrow {
+  left: calc(-.5 * var(--ta-tooltip-arrow-size));
+}
+
+.ta-tooltip[data-popper-placement^="left"] .ta-tooltip-arrow {
+  right: calc(-.5 * var(--ta-tooltip-arrow-size));
+}
diff --git a/teamapps-client/less/separate-stylesheets/ckeditor-contents.less b/teamapps-client/less/separate-stylesheets/ckeditor-contents.less
deleted file mode 100644
index 792c0ccb7..000000000
--- a/teamapps-client/less/separate-stylesheets/ckeditor-contents.less
+++ /dev/null
@@ -1,70 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-@import (less) "../../node_modules/ckeditor/contents.css";
-
-h1, h2, h3, h4, h5 {
-  color: #015398;
-}
-
-h1 {
-  font-size: 34px;
-  font-weight: 100;
-}
-h2 {
-  font-size: 29px;
-  font-weight: 100;
-}
-h3 {
-  font-size: 24px;
-  font-weight: 300;
-}
-h4 {
-  font-size: 18px;
-  font-weight: 500;
-}
-h5 {
-  font-size: 14px;
-  font-weight: 700;
-}
-
-table {
-  border: 1px solid #bbb;
-  border-collapse: collapse;
-
-  th, td {
-    padding: 5px;
-  }
-
-  p {                                             
-    margin: 4px 0;
-  }
-  p:first-child {
-    margin-top: 0;
-  }
-  p:last-child {
-    margin-bottom: 0;
-  }
-}
-
-body .cke_panel_listItem a:focus {
-  outline: none;
-  background-color: #e9e9e9;
-  border-left: 3px solid black;
-}
diff --git a/teamapps-client/less/teamapps.less b/teamapps-client/less/teamapps.less
index 20b04bee8..182181de7 100644
--- a/teamapps-client/less/teamapps.less
+++ b/teamapps-client/less/teamapps.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,83 +17,31 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-// Bootstrap
-// Core variables and mixins
-@import "../node_modules/bootstrap/less/variables.less";
-@import "../node_modules/bootstrap/less/mixins.less";
 
-// Reset and dependencies
-@import "../node_modules/bootstrap/less/normalize.less";
-//@import "../node_modules/bootstrap/less/print.less";
-@import "../node_modules/bootstrap/less/glyphicons.less";
-
-// Core CSS
-@import "../node_modules/bootstrap/less/scaffolding.less";
-@import "../node_modules/bootstrap/less/type.less";
-@import "../node_modules/bootstrap/less/code.less";
-@import "../node_modules/bootstrap/less/grid.less";
-@import "../node_modules/bootstrap/less/tables.less";
-@import "../node_modules/bootstrap/less/forms.less";
-@import "../node_modules/bootstrap/less/buttons.less";
-
-// Components
-@import "../node_modules/bootstrap/less/component-animations.less";
-@import "../node_modules/bootstrap/less/dropdowns.less";
-@import "../node_modules/bootstrap/less/button-groups.less";
-@import "../node_modules/bootstrap/less/input-groups.less";
-@import "../node_modules/bootstrap/less/navs.less";
-@import "../node_modules/bootstrap/less/navbar.less";
-@import "../node_modules/bootstrap/less/breadcrumbs.less";
-@import "../node_modules/bootstrap/less/pagination.less";
-@import "../node_modules/bootstrap/less/pager.less";
-@import "../node_modules/bootstrap/less/labels.less";
-@import "../node_modules/bootstrap/less/badges.less";
-//@import "../node_modules/bootstrap/less/jumbotron.less";
-//@import "../node_modules/bootstrap/less/thumbnails.less";
-@import "../node_modules/bootstrap/less/alerts.less";
-@import "../node_modules/bootstrap/less/progress-bars.less";
-@import "../node_modules/bootstrap/less/media.less";
-@import "../node_modules/bootstrap/less/list-group.less";
-@import "../node_modules/bootstrap/less/panels.less";
-@import "../node_modules/bootstrap/less/responsive-embed.less";
-@import "../node_modules/bootstrap/less/wells.less";
-@import "../node_modules/bootstrap/less/close.less";
-
-// Components w/ JavaScript
-//@import "../node_modules/bootstrap/less/modals.less";
-//@import "../node_modules/bootstrap/less/tooltip.less";
-//@import "../node_modules/bootstrap/less/popovers.less";
-@import "../node_modules/bootstrap/less/carousel.less";
-
-// Utility classes
-@import "../node_modules/bootstrap/less/utilities.less";
-@import "../node_modules/bootstrap/less/responsive-utilities.less";
-
-// ========== end of bootstrap =========
+@import "variables";
 
 // third party
-@import "../node_modules/trivial-components/less/trivial-components";
-@import (less) "../node_modules/quill/dist/quill.snow.css";
+@import "bootstrap-imports";
+@import "trivial-components/trivial-components";
 @import (inline) "../node_modules/slickgrid/slick.grid.css";
-@import (less) "../node_modules/fullcalendar/dist/fullcalendar.css";
+@import (less) "../node_modules/@fullcalendar/core/main.css";
+@import (less) "../node_modules/@fullcalendar/daygrid/main.css";
+@import (less) "../node_modules/@fullcalendar/timegrid/main.css";
 @import (less) "../node_modules/jquery-ui/themes/base/resizable.css"; // TODO do we still need this???
 @import (less) "../node_modules/animate.css/animate.css";
 @import (less) "../node_modules/mediaelement/build/mediaelementplayer.css";
 @import (less) "../node_modules/leaflet/dist/leaflet.css";
 @import (less) "../node_modules/leaflet.markercluster/dist/MarkerCluster.css";
 @import (less) "../node_modules/leaflet.markercluster/dist/MarkerCluster.Default.css";
+@import (inline) "../node_modules/maplibre-gl/dist/maplibre-gl.css";
 @import (less) "../node_modules/webui-popover/dist/jquery.webui-popover.css";
-@import (less) "../node_modules/nouislider/distribute/nouislider.css";
 @import (less) "../node_modules/pickr-widget/dist/pickr.min.css";
-@import (less) "../node_modules/tiny-slider/dist/tiny-slider.css";
 @import (less) "../node_modules/slick-carousel/slick/slick.less";
 @import (less) "../node_modules/slick-carousel/slick/slick-theme.less";
+
 // own
-@import "variables";
-@import "third-party-fixes/bootstrap-variables"; // overrides default bootstrap variables
 @import "third-party-fixes/bootstrap-fixes"; // overrides default bootstrap variables
 @import "third-party-fixes/trivial-components-fixes";
-@import "third-party-fixes/quill-snow-fixes";
 @import "general";
 
 @import "components/UiComponent";
@@ -122,6 +70,7 @@
 @import "components/UiPageViewBlock";
 @import "components/UiCalendar";
 @import "components/UiMap";
+@import "components/UiMap2";
 @import "components/UiTimeGraph";
 @import "components/UiNetworkGraph";
 @import "components/UiDocumentViewer";
@@ -135,6 +84,7 @@
 @import "components/UiFormDesignerFieldChooser";
 @import "components/UiPropertyEditor";
 @import "components/UiInfiniteItemView";
+@import "components/UiInfiniteItemView2";
 @import "components/UiImageCropper";
 @import "components/UiGauge";
 @import "components/UiResponsiveGridLayout";
@@ -143,10 +93,23 @@
 @import "components/UiChatDisplay";
 @import "components/UiChatInput";
 @import "components/UiAbsoluteLayout";
+@import "components/UiTreeGraph";
+@import "components/UiFieldGroup";
+@import "components/UiFloatingComponent";
+@import "components/UiPopup";
+@import "components/UiProgressDisplay";
+@import "components/UiDefaultMultiProgressDisplay";
+@import "components/UiNotification";
+@import "components/UiNotificationBar";
+@import "components/UiQrCodeScanner";
+@import "components/UiMediaSoupV3WebRtcClient";
+@import "components/UiPieChart";
+@import "components/UiCollapsible";
 
 
 // formfield
 @import "formfield/UiField";
+@import "formfield/UiSimpleFileField";
 @import "formfield/UiLabel";
 @import "formfield/UiMultiLineTextField";
 @import "formfield/UiTextField";
@@ -157,6 +120,7 @@
 @import "formfield/UiCurrencyField";
 @import "formfield/UiNumberField";
 @import "formfield/UiFileField";
+@import "formfield/UiPictureChooser";
 @import "formfield/UiComboBox";
 @import "formfield/UiTagComboBox";
 @import "formfield/UiDateField";
@@ -166,21 +130,26 @@
 @import "formfield/UiCompositeField";
 @import "formfield/UiImageField";
 @import "formfield/UiRichTextEditor";
-@import "formfield/UiSlider";
 @import "formfield/UiColorPicker";
+@import "formfield/UiLinkButton";
+@import "formfield/UiTextColorMarkerField";
 
 // micro-components
 @import "micro-components/ProgressBar";
 @import "micro-components/ProgressCircle";
 @import "micro-components/UiToolButton";
 @import "micro-components/UiSpinner";
-@import "micro-components/UiAudioActivityDisplay";
+@import "micro-components/UiAudioLevelIndicator";
 @import "micro-components/UiDropDown";
-@import "micro-components/FieldMessagePopper";
+@import "micro-components/tooltip";
+@import "micro-components/CalendarEventListPopper";
+@import "micro-components/ContextMenu";
 
 // util
 @import "util/drop-zone";
 @import "util/glyphicon-button";
+@import "util/page-transitions";
+@import "util/animations";
 
 // themes
 @import "themes/modern";
diff --git a/teamapps-client/less/themes/dark.less b/teamapps-client/less/themes/dark.less
index 78a1c3f60..af5b28c33 100644
--- a/teamapps-client/less/themes/dark.less
+++ b/teamapps-client/less/themes/dark.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,46 +17,182 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-@dark-theme-text-color: #f3f3f3;
-@dark-theme-placeholder-color: #f3f3f355;
-@dark-theme-background-color: rgba(50, 50, 65, .93);
-@dark-theme-background-color-transparent: rgba(80, 80, 90, 0.65);
-@dark-theme-background-color-light: rgb(80, 80, 90);
-@dark-theme-border-color: rgba(0, 0, 0, 0.15);
-@dark-theme-field-border: rgb(95, 95, 95);
-@dark-theme-field-background: rgba(95, 95, 95, .1);
+@ta-dark-color-primary: rgb(55, 90, 127);
+@ta-dark-color-success: rgb(0, 188, 140);
+@ta-dark-color-info: rgb(52, 152, 219);
+@ta-dark-color-warning: rgb(243, 156, 18);
+@ta-dark-color-danger: rgb(231, 76, 60);
+
+@ta-dark-text-color: #f3f3f3;
+@ta-dark-text-color-inverted: black;
+
+@ta-dark-state-primary-text:             @ta-dark-text-color;
+@ta-dark-state-primary-text-emphasis:    darken(@ta-dark-text-color, 10%);
+@ta-dark-state-primary-bg:               @ta-dark-color-primary;
+@ta-dark-state-primary-border:           darken(spin(@ta-dark-text-color, -10), 5%);
+
+@ta-dark-state-success-text:             @ta-dark-text-color;
+@ta-dark-state-success-text-emphasis:    average(@ta-dark-text-color, @ta-dark-color-success);
+@ta-dark-state-success-bg:               @ta-dark-color-success;
+@ta-dark-state-success-border:           darken(spin(@ta-dark-state-success-bg, -10), 5%);
+
+@ta-dark-state-info-text:                @ta-dark-text-color;
+@ta-dark-state-info-text-emphasis:       average(@ta-dark-text-color, @ta-dark-color-info);
+@ta-dark-state-info-bg:                  @ta-dark-color-info;
+@ta-dark-state-info-border:              darken(spin(@ta-dark-state-info-bg, -10), 7%);
+
+@ta-dark-state-warning-text:             @ta-dark-text-color;
+@ta-dark-state-warning-text-emphasis:    average(@ta-dark-text-color, @ta-dark-color-warning);
+@ta-dark-state-warning-bg:               @ta-dark-color-warning;
+@ta-dark-state-warning-border:           darken(spin(@ta-dark-state-warning-bg, -10), 20%);
+
+@ta-dark-state-danger-text:              @ta-dark-text-color;
+@ta-dark-state-danger-text-emphasis:     average(@ta-dark-text-color, @ta-dark-color-danger);
+@ta-dark-state-danger-bg:                @ta-dark-color-danger;
+@ta-dark-state-danger-border:            darken(spin(@ta-dark-state-danger-bg, -10), 5%);
+
+@dark-text-color: #f3f3f3;
+@dark-background-color: rgba(50, 50, 65, .93);
+@dark-background-color-transparent: rgba(80, 80, 90, 0.65);
+@dark-background-color-light: rgb(80, 80, 90);
+@dark-border-color: rgba(0, 0, 0, 0.15);
+@dark-input-border: rgb(95, 95, 95);
+@dark-input-background: rgba(95, 95, 95, .1);
 
 .theme-dark {
-  color: @dark-theme-text-color;
+  --ta-color-primary:         @ta-dark-color-primary;
+  --ta-color-success:         @ta-dark-color-success;
+  --ta-color-info:            @ta-dark-color-info;
+  --ta-color-warning:         @ta-dark-color-warning;
+  --ta-color-danger:          @ta-dark-color-danger;
+
+  --ta-state-primary-text:             @ta-dark-state-primary-text;
+  --ta-state-primary-text-emphasis:    @ta-dark-state-primary-text-emphasis;
+  --ta-state-primary-bg:               @ta-dark-state-primary-bg;
+  --ta-state-primary-border:           @ta-dark-state-primary-border;
+
+  --ta-state-success-text:             @ta-dark-state-success-text;
+  --ta-state-success-text-emphasis:    @ta-dark-state-success-text-emphasis;
+  --ta-state-success-bg:               @ta-dark-state-success-bg;
+  --ta-state-success-border:           @ta-dark-state-success-border;
+
+  --ta-state-info-text:                @ta-dark-state-info-text;
+  --ta-state-info-text-emphasis:       @ta-dark-state-info-text-emphasis;
+  --ta-state-info-bg:                  @ta-dark-state-info-bg;
+  --ta-state-info-border:              @ta-dark-state-info-border;
+
+  --ta-state-warning-text:             @ta-dark-state-warning-text;
+  --ta-state-warning-text-emphasis:    @ta-dark-state-warning-text-emphasis;
+  --ta-state-warning-bg:               @ta-dark-state-warning-bg;
+  --ta-state-warning-border:           @ta-dark-state-warning-border;
+
+  --ta-state-danger-text:              @ta-dark-state-danger-text;
+  --ta-state-danger-text-emphasis:     @ta-dark-state-danger-text-emphasis;
+  --ta-state-danger-bg:                @ta-dark-state-danger-bg;
+  --ta-state-danger-border:            @ta-dark-state-danger-border;
+
+  --ta-text-color: @dark-text-color;
+  --ta-text-color-faded: fadeout(@dark-text-color, 30%);
+  --ta-text-color-inverted: black;
+  --ta-text-color-gray: #9f9f9f;
+  --ta-bg-color: @dark-background-color;
+  --ta-bg-color-semi-transparent: @dark-background-color-transparent;
+  --ta-bg-color-semi-transparent-muted: #3e3e3ea6;
+  --ta-bg-color-solid: fade(@dark-background-color, 100%);
+  --ta-bg-color-disabled: rgba(128, 128, 128, 0.45);
+  --ta-bg-dim-overlay: rgba(0, 0, 0, .35);
+  --ta-special-button-section-bg: #5d5d5d40;
+  --ta-special-button-section-border: rgba(154, 154, 154, .2);
+  --ta-panel-border-color: @dark-border-color; // dark
+  --ta-border-color-disabled: #ccc;
+  --ta-inner-border-color: @dark-border-color; // dark
+  --ta-inner-border-color-gradient-end: rgba(0, 0, 0, 0);
+  --ta-inner-border-color-light: rgba(255, 255, 255, .5);
+  --ta-inner-border-color-light-gradient-end: rgba(255, 255, 255, 0);
+
+  --ta-hover-color: rgba(255, 255, 255, .15);
+  --ta-active-color: rgba(0, 0, 0, 0.1);
+  --ta-selection-color: #3a5573cc;
+
+  --ta-link-color: lighten(@ta-dark-color-primary, 20%);
+  --ta-link-hover-color: lighten(@ta-dark-color-primary, 25%);
+  --ta-link-hover-decoration: underline;
+
+  --ta-pre-color: #333;
+
+  //== Buttons
+  --ta-btn-font-weight:                var(--ta-font-weight-normal);
+  --ta-btn-default-border:             var(--ta-panel-border-color);
+  --ta-btn-default-bg:                 var(--ta-bg-color);
+  --ta-btn-border-radius-base:         var(--ta-border-radius);
+
+
+  //== Forms
+  --ta-input-bg:                      @dark-input-background;
+  --ta-input-bg-disabled:             var(--ta-bg-color-disabled);
+  --ta-input-border-color:            @dark-input-border;
+  --ta-input-border-radius:           var(--ta-border-radius);
+  --ta-input-border-focus:            var(--ta-color-info);
+  --ta-input-height:                  calc(var(--ta-line-height-computed) + var(--ta-padding-base-vertical) * 2 + 2px);
+  --ta-input-color:                   var(--ta-text-color);
+  --ta-input-color-placeholder:       #f3f3f355;
+
+
+  //== Misc.
+  --ta-box-shadown-color: rgba(0, 0, 0, .3);
+
+  //== Component-Specific
+  --ta-calendar-grid-border-color: #6363631a;
+  --ta-calendar-grid-non-business-bg-color: #d7d7d755;
+  --ta-calendar-day-occupation-background-circle-color: #d7d7d729;
+  --ta-calendar-day-occupation-today-bg: rgba(255, 168, 61, 0.31);
+
+  // == button-style-item
+  --ta-3d-button-gradient:         linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0%, rgba(251, 251, 252, 0.1) 62%, rgba(247, 248, 249, 0.1) 84%, rgba(245, 246, 247, 0.1) 94%, rgba(237, 239, 241, 0.1) 100%);
+  --ta-3d-button-gradient-lowered: linear-gradient(to bottom, rgba(200, 200, 200, 0.1) 0%, rgba(190, 190, 190, 0.1) 62%, rgba(185, 185, 185, 0.1) 84%, rgba(180, 180, 180, 0.1) 94%, rgba(175, 175, 175, 0.1) 100%);
+  --ta-glow-gradient: linear-gradient(to bottom, #feeeac22 0%,#fee5a622 7%,#fee7a822 92%,#fef4b022 97%,#fef7b422 100%);
+  --ta-glow-gradient-lowered: linear-gradient(to bottom, #fef7b422 0%,#fef4b022 7%,#fee7a822 92%,#fee5a622 97%,#feeeac22 100%);
+  --ta-glow-border-color: darken(#C19344, 30%);
+
+  
+  html {
+    scrollbar-face-color: var(--ta-input-border-color);
+    scrollbar-base-color: var(--ta-input-border-color);
+    scrollbar-3dlight-color: var(--ta-input-border-color);
+    scrollbar-highlight-color: var(--ta-input-border-color);
+    scrollbar-track-color: var(--ta-bg-color);
+    scrollbar-arrow-color: var(--ta-bg-color);
+    scrollbar-shadow-color: var(--ta-input-border-color);
+    scrollbar-dark-shadow-color: var(--ta-input-border-color);
+  }
+
+  ::-webkit-scrollbar { width: 8px; height: 3px;}
+  ::-webkit-scrollbar-button {  background-color: var(--ta-input-border-color); }
+  ::-webkit-scrollbar-track {  background-color: var(--ta-input-border-color);}
+  ::-webkit-scrollbar-track-piece { background-color: var(--ta-bg-color);}
+  ::-webkit-scrollbar-thumb { height: 50px; background-color: var(--ta-input-border-color); border-radius: 3px;}
+  ::-webkit-scrollbar-corner { background-color: var(--ta-input-border-color);}
+  ::-webkit-resizer { background-color: var(--ta-input-border-color);}
 
   .UiToolbar {
     > .background-color-div {
-      background-color: @dark-theme-background-color-transparent;
-      border-bottom-color: @dark-theme-border-color;
-
       > .inner-container .button-group-wrapper > .toolbar-group-separator {
         border-right: 1px solid rgba(78, 78, 78, 0.5);
       }
     }
     .toolbar-button-wrapper:hover, .UiToolbar-size-testing-container .toolbar-button-wrapper:hover {
-      background-color: @dark-theme-background-color-light;
+      background-color: @dark-background-color-light;
     }
   }
 
   .UiToolAccordion {
     .toolbar-button-wrapper:hover {
-      background-color: @dark-theme-background-color-light;
+      background-color: @dark-background-color-light;
     }
   }
 
   .UiPanel {
     .panel-heading {
-      border-bottom-color: @dark-theme-border-color;
-      background-color: @dark-theme-background-color-transparent;
-
-      .panel-heading-window-buttons {
-        background-color: rgba(0, 0, 0, 0.12);
-      }
       .panel-heading-window-buttons > .UiToolButton {
         filter: invert(100%);
       }
@@ -65,58 +201,163 @@
         background-color: rgba(255, 255, 255, 0.07);
       }
     }
-    .panel-body {
-      background-color: @dark-theme-background-color;
-    }
   }
 
   .UiTabPanel {
     > .tab-panel-header > .background-color-div {
-      background-color: @dark-theme-background-color-transparent;
-
       .tab-button .tab-button-close-button {
         filter: invert(100%);
       }
     }
-    &.tab-style-blocks > .tab-panel-header .tab-button-container .tab-button.selected {
-      background-color: rgba(0, 0, 0, 0.3);
+
+    .window-button-container .UiToolButton.img {
+      filter: invert(100%);
     }
   }
 
+  .UiNotification .close-button {
+      filter: invert(100%);
+  }
+
   .UiItemView .item-group .item-group-header:after {
     bottom: 0;
     background: linear-gradient(to right, rgba(78, 78, 78, 0.5) 0%, rgba(78, 78, 78, 0.5) 50%, rgba(0, 0, 0, 0) 100%);
   }
 
   .UiInfiniteItemView > .slickgrid .item-wrapper > *:hover {
-    border-color: @dark-theme-border-color;
-    background: linear-gradient(to bottom, @dark-theme-background-color 0%, @dark-theme-background-color 62%, @dark-theme-background-color-light 100%);
+    border-color: @dark-border-color;
+    background: linear-gradient(to bottom, @dark-background-color 0%, @dark-background-color 62%, @dark-background-color-light 100%);
+  }
+
+  .UiInfiniteItemView2 {
+    user-select: none;
+    overflow: auto;
+
+    --item-position-animation-time: .5s;
+
+    > .grid {
+      position: relative;
+      overflow: hidden;
+      contain: strict; // !!!
+
+      .item-wrapper {
+        position: absolute;
+        transition: top var(--item-position-animation-time) ease, left var(--item-position-animation-time) ease;
+        contain: strict; // !!!
+        display: flex;
+      }
+    }
+  }
+
+  .UiGridForm {
+    display: flex;
+    flex-direction: column;
+
+    .UiFormSection {
+      flex: 0 0 auto;
+      display: flex;
+      flex-direction: column;
+
+      > .header {
+        display: flex;
+        align-items: center;
+
+        > .expand-button {
+          padding: 2px;
+          display: flex;
+          align-items: center;
+          border: 1px solid transparent;
+        }
+        > .header-line {
+          position: relative;
+          flex: 1 1 0;
+        }
+      }
+
+      &.draw-header-line {
+        .header-line:before, .header-line:after {
+          position: absolute;
+          display: block;
+          width: 100%;
+          bottom: 1px;
+          left: 0;
+          content: '';
+          height: 1px;
+          background: linear-gradient(to right, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 85%, rgba(0, 0, 0, 0) 100%);
+        }
+        .header-line:after {
+          bottom: 0;
+          background: linear-gradient(to right, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .5) 85%, rgba(255, 255, 255, 0) 100%);
+        }
+      }
+
+      &.has-header-template {
+        .expand-button {
+          margin-right: 8px;
+        }
+        .teamapps-expander {
+          margin-right: 7px;
+        }
+      }
+      &:not(.has-header-data):not(.collapsible) {
+        .header {
+          display: none;
+        }
+      }
+
+      .body {
+        display: grid;
+      }
+
+      &.fill-remaining-height:not(.collapsed) {
+        flex: 1 0 auto;
+        .body {
+          flex: 1 0 auto;
+        }
+      }
+    }
+
+    .UiFormSectionFloatingFieldsPlacement {
+      display: flex;
+      align-items: baseline;
+
+      > * {
+        flex: 1 1 auto;
+      }
+    }
+
+    .tmp-container {
+      .pseudo-hidden;
+    }
   }
 
   .UiDropDown {
-    border-color: rgba(146, 146, 146, 0.2); // TODO @dark-theme-border-color, chrome bug...
+    border-color: var(--ta-panel-border-color); // TODO @dark-border-color, chrome bug...
 
     .background-color-div {
-      background-color: @dark-theme-background-color-transparent;
+      background-color: @dark-background-color-transparent;
     }
   }
 
   .UiField {
     .field-border,
     .field-border-visibility {
-      border-color: @dark-theme-field-border;
+      border-color: @dark-input-border;
     }
     .field-background {
-      background-color: @dark-theme-field-background;
+      background-color: @dark-input-background;
     }
-  }
 
-  .UiField,
-  .form-control {
-    color: @dark-theme-text-color;
+    &.readonly .field-background,
+    &.editable-if-focused:not(.focus):not(:hover) .field-background {
+      background: transparent;
+    }
 
-    ::placeholder {
-      color: @dark-theme-placeholder-color;
+    &.readonly .field-border,
+    &.readonly .field-border-visibility,
+    &.editable-if-focused:not(.focus):not(:hover) .field-border,
+    &.editable-if-focused:not(.focus):not(:hover) .field-border-visibility {
+      border-color: transparent;
     }
   }
 
@@ -124,16 +365,16 @@
     &:hover,
     &:focus,
     &.focus {
-      color: lighten(@dark-theme-text-color, 20%);
+      color: lighten(@dark-text-color, 20%);
     }
   }
 
   .UiWorkSpaceLayout .minimized-tabpanel-bar {
-    background-color: @dark-theme-background-color;
+    background-color: @dark-background-color;
 
     .minimized-tabpanel-button {
-      border: @dark-theme-border-color;
-      background-color: @dark-theme-background-color-light;
+      border: @dark-border-color;
+      background-color: @dark-background-color-light;
 
       >.tab-icon:first-child {
         filter: invert(100%);
@@ -143,7 +384,7 @@
 
   .UiTable {
     .slick-cell {
-      border-bottom-color: @dark-theme-border-color;
+      border-bottom-color: @dark-border-color;
     }
     .slick-cell.selected,
     .slick-table.list-mode .slick-cell.selected {
@@ -154,31 +395,131 @@
     }
     .slick-headerrow {
       background-color: rgba(255, 255, 255, .05);
-      border-bottom-color: @dark-theme-border-color;
+      border-bottom-color: @dark-border-color;
     }
     .slick-footerrow {
       background-color: rgba(255, 255, 255, .05);
-      border-color: @dark-theme-border-color;
+      border-color: @dark-border-color;
     }
   }
 
   .UiChatInput {
-    background-color: @dark-theme-field-background;
-    border-top-color: @dark-theme-field-border;
+    background-color: var(--ta-input-bg);
+    border-top-color: var(--ta-input-border-color);
 
     textarea {
       background-color: transparent;
     }
   }
 
-  .glyphicon-button {
-    color: fadeout(@dark-theme-text-color, 30%);
-    &:hover {
-      color: @dark-theme-text-color;
+  .UiMediaTrackGraph {
+    .area {
+      fill: rgb(96, 185, 255);
+      fill-opacity:0.20;
+      clip-path: url(#clip);
+    }
+
+    .area2 {
+      fill: rgb(92, 170, 252);
+      fill-opacity:0.30;
+      clip-path: url(#clip);
+    }
+
+    .line {
+      stroke: rgb(87, 177, 243);
+      stroke-width: 0.9;
+      stroke-opacity:1.0;
+      fill: none;
+      //filter: url(#drop-shadow);
+      clip-path: url(#clip);
+    }
+
+    .line2 {
+      stroke: rgb(77, 129, 210);
+      stroke-width: 0.9;
+      stroke-opacity:1.0;
+      fill: none;
+      clip-path: url(#clip);
+    }
+
+    .marker {
+      stroke: rgb(139, 116, 31);
+      stroke-width: 0.3;
+      stroke-opacity:1.0;
+      fill: rgb(139, 116, 31);
+      fill-opacity:0.50;
+      clip-path: url(#clip);
     }
-    &.disabled {
-      color: fadeout(@dark-theme-text-color, 70%);
+
+    .cursor {
+      stroke: rgb(255, 201, 0);
+      stroke-width: 1.7;
+      stroke-opacity:1.0;
+      fill: none;
+    }
+
+    .axis path,
+    .axis line {
+      fill: none;
+      stroke: #f7f6f9;
+      shape-rendering: crispEdges;
+    }
+
+    .brush {
+      stroke: #ff9f5a;
+      stroke-width: 1.0;
+      stroke-opacity: 1;
+      stroke-dasharray: 3, 1;
+      fill: #ffed0c;
+      fill-opacity: .3;
+      shape-rendering: crispEdges;
+      pointer-events: all;
+    }
+
+
+    rect.pane {
+      cursor: move;
+      fill: none;
+      pointer-events: all;
+    }
+  }
+
+  .tr-tagcombobox-default-wrapper-template {
+    border: 1px solid @dark-input-border;
+    box-shadow: 1px 2px 1px -1px rgba(0, 0, 0, 0.13);
+    background-color: @dark-input-background;
+
+    .tr-remove-button {
+      border: 1px solid @dark-input-border;
     }
   }
+
+  .tr-remove-button,
+  .teamapps-expander,
+  .file-list:empty:before {
+    filter: invert(100%);
+  }
+
+  .tr-highlighted-text {
+    background-color: rgba(244, 195, 125, 0.7);
+    box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.75);
+  }
+
+  .tr-dropdown {
+    background-color: @dark-background-color;
+    border: @dark-input-border;
+  }
+
+  .UiFloatingComponent .expander-handle:after {
+    filter: invert(100%);
+  }
+
+  .UiProgressDisplay .cancel-button {
+    filter: invert(100%);
+  }
+
+  .calendar-symbol-page {
+    stroke: transparent;
+  }
 }
 
diff --git a/teamapps-client/less/themes/modern.less b/teamapps-client/less/themes/modern.less
index 7e5218766..33abe52cd 100644
--- a/teamapps-client/less/themes/modern.less
+++ b/teamapps-client/less/themes/modern.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -55,18 +55,10 @@
       }
     }
     &.splitpane-horizontal > .splitpane-divider-wrapper > .splitpane-divider {
-      height: @UiSplitPane-divider-width + 1px;
-      .optimized-for-touch & {
-        height: @UiSplitPane-divider-width-touch + 1px;
-        top: -@UiSplitPane-divider-width-touch/2;
-      }
+      height: calc(var(--ta-resize-bar-size) + 1px);
     }
     &.splitpane-vertical > .splitpane-divider-wrapper > .splitpane-divider {
-      width: @UiSplitPane-divider-width + 1px;
-      .optimized-for-touch & {
-        width: @UiSplitPane-divider-width-touch + 1px;
-        left: -@UiSplitPane-divider-width-touch/2;
-      }
+      width: calc(var(--ta-resize-bar-size) + 1px);
     }
   }
 
@@ -78,7 +70,7 @@
       border-bottom-width: 0;
       padding-bottom: 1px;
     }
-    .body-container {
+    .panel-body {
       border-radius: 0;
     }
   }
@@ -87,7 +79,7 @@
     border-radius: 0;
     box-shadow: none;
     .background-color-div {
-      border-bottom: 1px solid @table-border-color;
+      border-bottom: 1px solid var(--ta-panel-border-color);
       border-radius: 0;
     }
     .button-group-wrapper:first-child > .toolbar-button-group > .toolbar-button-wrapper:first-child {
diff --git a/teamapps-client/less/third-party-fixes/bootstrap-fixes.less b/teamapps-client/less/third-party-fixes/bootstrap-fixes.less
index b39726b1a..313aa4ae8 100644
--- a/teamapps-client/less/third-party-fixes/bootstrap-fixes.less
+++ b/teamapps-client/less/third-party-fixes/bootstrap-fixes.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,15 +17,11 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-.carousel-control {
-  background: none !important;
-}
-
 .form-control {
   width: initial; // width and height are controlled by the field container's css
   box-shadow: none;
   &.focus {
-    border-color: @input-border-focus;
+    border-color: var(--ta-input-border-focus);
     outline: 0;
     box-shadow: 0 0 8px rgba(102, 175, 233, 0.6);
   }
@@ -40,18 +36,6 @@
   }
 }
 
-
-.alert-default {
-  .alert-variant(@btn-default-bg; @btn-default-border; @btn-default-color);
-}
-.alert-primary {
-  .alert-variant(@btn-primary-bg; @btn-primary-border; @btn-primary-color);
-}
-
-.close {
-  outline: none;
-}
-
 .btn > .caret {
   margin-left: 4px;
 }
diff --git a/teamapps-client/less/third-party-fixes/bootstrap-variables.less b/teamapps-client/less/third-party-fixes/bootstrap-variables.less
deleted file mode 100644
index ba4309047..000000000
--- a/teamapps-client/less/third-party-fixes/bootstrap-variables.less
+++ /dev/null
@@ -1,888 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-//
-// Variables
-// --------------------------------------------------
-
-
-//== Colors
-//
-//## Gray and brand colors for use across Bootstrap.
-
-@gray-base:              #000;
-@gray-darker:            lighten(@gray-base, 13.5%); // #222
-@gray-dark:              lighten(@gray-base, 20%);   // #333
-@gray:                   lighten(@gray-base, 33.5%); // #555
-@gray-light:             lighten(@gray-base, 46.7%); // #777
-@gray-lighter:           lighten(@gray-base, 93.5%); // #eee
-
-@brand-primary:         darken(#428bca, 6.5%); // #337ab7; 51, 122, 183
-@brand-success:         #5cb85c; //92, 184, 92
-@brand-info:            #5bc0de; //91, 192, 222
-@brand-warning:         #f0ad4e; //240, 173, 78
-@brand-danger:          #d9534f; //217, 83, 79
-
-
-//== Scaffolding
-//
-//## Settings for some of the most global styles.
-
-//** Background color for `<body>`.
-@body-bg:               #fff;
-//** Global text color on `<body>`.
-@text-color:            @gray-dark;
-
-//** Global textual link color.
-@link-color:            @brand-primary;
-//** Link hover color set via `darken()` function.
-@link-hover-color:      darken(@link-color, 15%);
-//** Link hover decoration.
-@link-hover-decoration: underline;
-
-
-//== Typography
-//
-//## Font, line-height, and color for body text, headings, and more.
-
-@font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
-@font-family-serif:       Georgia, "Times New Roman", Times, serif;
-//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
-@font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
-@font-family-base:        @font-family-sans-serif;
-
-@font-size-base:          13px;
-@font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
-@font-size-small:         ceil((@font-size-base * 0.85)); // ~12px
-
-@font-size-h1:            floor((@font-size-base * 2.6)); // ~36px
-@font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
-@font-size-h3:            ceil((@font-size-base * 1.7)); // ~24px
-@font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
-@font-size-h5:            @font-size-base;
-@font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px
-
-//** Unit-less `line-height` for use in components like buttons.
-@line-height-base:        1.428571429; // 20/14
-//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
-@line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px
-
-//** By default, this inherits from the `<body>`.
-@headings-font-family:    inherit;
-@headings-font-weight:    500;
-@headings-line-height:    1.1;
-@headings-color:          inherit;
-
-
-//== Iconography
-//
-//## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.
-
-//** Load fonts from this directory.
-@icon-font-path:          "../fonts/";
-//** File name for all font files.
-@icon-font-name:          "glyphicons-halflings-regular";
-//** Element ID within SVG icon file.
-@icon-font-svg-id:        "glyphicons_halflingsregular";
-
-
-//== Components
-//
-//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
-
-@padding-base-vertical:     4px;
-@padding-base-horizontal:   5px;
-
-@padding-large-vertical:    6px;
-@padding-large-horizontal:  8px;
-
-@padding-small-vertical:    5px;
-@padding-small-horizontal:  10px;
-
-@padding-xs-vertical:       1px;
-@padding-xs-horizontal:     5px;
-
-@line-height-large:         1.3333333; // extra decimals for Win 8.1 Chrome
-@line-height-small:         1.5;
-
-@border-radius-base:        3px;
-@border-radius-large:       6px;
-@border-radius-small:       3px;
-
-//** Global color for active items (e.g., navs or dropdowns).
-@component-active-color:    #fff;
-//** Global background color for active items (e.g., navs or dropdowns).
-@component-active-bg:       @brand-primary;
-
-//** Width of the `border` for generating carets that indicator dropdowns.
-@caret-width-base:          4px;
-//** Carets increase slightly in size for larger components.
-@caret-width-large:         5px;
-
-
-//== Tables
-//
-//## Customizes the `.table` component with basic values, each used across all table variations.
-
-//** Padding for `<th>`s and `<td>`s.
-@table-cell-padding:            8px;
-//** Padding for cells in `.table-condensed`.
-@table-condensed-cell-padding:  5px;
-
-//** Default background color used for all tables.
-@table-bg:                      transparent;
-//** Background color used for `.table-striped`.
-@table-bg-accent:               #f9f9f9;
-//** Background color used for `.table-hover`.
-@table-bg-hover:                rgba(0, 0, 0, 0.075);
-@table-bg-active:               @table-bg-hover;
-
-//** Border color for table and cell borders.
-@table-border-color:            rgba(0, 0, 0, 0.09);
-
-
-//== Buttons
-//
-//## For each of Bootstrap's buttons, define text, background and border color.
-
-@btn-font-weight:                normal;
-
-@btn-default-color:              #333;
-@btn-default-bg:                 #fff;
-@btn-default-border:             #ccc;
-
-@btn-primary-color:              #fff;
-@btn-primary-bg:                 @brand-primary;
-@btn-primary-border:             darken(@btn-primary-bg, 5%);
-
-@btn-success-color:              #fff;
-@btn-success-bg:                 @brand-success;
-@btn-success-border:             darken(@btn-success-bg, 5%);
-
-@btn-info-color:                 #fff;
-@btn-info-bg:                    @brand-info;
-@btn-info-border:                darken(@btn-info-bg, 5%);
-
-@btn-warning-color:              #fff;
-@btn-warning-bg:                 @brand-warning;
-@btn-warning-border:             darken(@btn-warning-bg, 5%);
-
-@btn-danger-color:               #fff;
-@btn-danger-bg:                  @brand-danger;
-@btn-danger-border:              darken(@btn-danger-bg, 5%);
-
-@btn-link-disabled-color:        @gray-light;
-
-// Allows for customizing button radius independently from global border radius
-@btn-border-radius-base:         @border-radius-base;
-@btn-border-radius-large:        @border-radius-large;
-@btn-border-radius-small:        @border-radius-small;
-
-
-//== Forms
-//
-//##
-
-//** `<input>` background color
-@input-bg:                       #fff;
-//** `<input disabled>` background color
-@input-bg-disabled:              @gray-lighter;
-
-//** Text color for `<input>`s
-@input-color:                    @gray;
-//** `<input>` border color
-@input-border:                   #ccc;
-
-// TODO: Rename `@input-border-radius` to `@input-border-radius-base` in v4
-//** Default `.form-control` border radius
-// This has no effect on `<select>`s in some browsers, due to the limited stylability of `<select>`s in CSS.
-@input-border-radius:            @border-radius-base;
-//** Large `.form-control` border radius
-@input-border-radius-large:      @border-radius-large;
-//** Small `.form-control` border radius
-@input-border-radius-small:      @border-radius-small;
-
-//** Border color for inputs on focus
-@input-border-focus:             #66afe9;
-
-//** Placeholder text color
-@input-color-placeholder:        #999;
-
-//** Default `.form-control` height
-@input-height-base:              (@line-height-computed + (@padding-base-vertical * 2) + 2);
-//** Large `.form-control` height
-@input-height-large:             (ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
-//** Small `.form-control` height
-@input-height-small:             (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
-
-//** `.form-group` margin
-@form-group-margin-bottom:       15px;
-
-@legend-color:                   @gray-dark;
-@legend-border-color:            #e5e5e5;
-
-//** Background color for textual input addons
-@input-group-addon-bg:           @gray-lighter;
-//** Border color for textual input addons
-@input-group-addon-border-color: @input-border;
-
-//** Disabled cursor for form controls and buttons.
-@cursor-disabled:                not-allowed;
-
-
-//== Dropdowns
-//
-//## Dropdown menu container and contents.
-
-//** Background for the dropdown menu.
-@dropdown-bg:                    #fff;
-//** Dropdown menu `border-color`.
-@dropdown-border:                rgba(0,0,0,.15);
-//** Dropdown menu `border-color` **for IE8**.
-@dropdown-fallback-border:       #ccc;
-//** Divider color for between dropdown items.
-@dropdown-divider-bg:            #e5e5e5;
-
-//** Dropdown link text color.
-@dropdown-link-color:            @gray-dark;
-//** Hover color for dropdown links.
-@dropdown-link-hover-color:      darken(@gray-dark, 5%);
-//** Hover background for dropdown links.
-@dropdown-link-hover-bg:         #f5f5f5;
-
-//** Active dropdown menu item text color.
-@dropdown-link-active-color:     @component-active-color;
-//** Active dropdown menu item background color.
-@dropdown-link-active-bg:        @component-active-bg;
-
-//** Disabled dropdown menu item background color.
-@dropdown-link-disabled-color:   @gray-light;
-
-//** Text color for headers within dropdown menus.
-@dropdown-header-color:          @gray-light;
-
-//** Deprecated `@dropdown-caret-color` as of v3.1.0
-@dropdown-caret-color:           #000;
-
-
-//-- Z-index master list
-//
-// Warning: Avoid customizing these values. They're used for a bird's eye view
-// of components dependent on the z-axis and are designed to all work together.
-//
-// Note: These variables are not generated into the Customizer.
-
-@zindex-navbar:            1000;
-@zindex-dropdown:          1000;
-@zindex-popover:           1060;
-@zindex-tooltip:           1070;
-@zindex-navbar-fixed:      1030;
-@zindex-modal-background:  1040;
-@zindex-modal:             1050;
-
-
-//== Media queries breakpoints
-//
-//## Define the breakpoints at which your layout will change, adapting to different screen sizes.
-
-// Extra small screen / phone
-//** Deprecated `@screen-xs` as of v3.0.1
-@screen-xs:                  480px;
-//** Deprecated `@screen-xs-min` as of v3.2.0
-@screen-xs-min:              @screen-xs;
-//** Deprecated `@screen-phone` as of v3.0.1
-@screen-phone:               @screen-xs-min;
-
-// Small screen / tablet
-//** Deprecated `@screen-sm` as of v3.0.1
-@screen-sm:                  768px;
-@screen-sm-min:              @screen-sm;
-//** Deprecated `@screen-tablet` as of v3.0.1
-@screen-tablet:              @screen-sm-min;
-
-// Medium screen / desktop
-//** Deprecated `@screen-md` as of v3.0.1
-@screen-md:                  992px;
-@screen-md-min:              @screen-md;
-//** Deprecated `@screen-desktop` as of v3.0.1
-@screen-desktop:             @screen-md-min;
-
-// Large screen / wide desktop
-//** Deprecated `@screen-lg` as of v3.0.1
-@screen-lg:                  1200px;
-@screen-lg-min:              @screen-lg;
-//** Deprecated `@screen-lg-desktop` as of v3.0.1
-@screen-lg-desktop:          @screen-lg-min;
-
-// So media queries don't overlap when required, provide a maximum
-@screen-xs-max:              (@screen-sm-min - 1);
-@screen-sm-max:              (@screen-md-min - 1);
-@screen-md-max:              (@screen-lg-min - 1);
-
-
-//== Grid system
-//
-//## Define your custom responsive grid.
-
-//** Number of columns in the grid.
-@grid-columns:              12;
-//** Padding between columns. Gets divided in half for the left and right.
-@grid-gutter-width:         6px;
-// Navbar collapse
-//** Point at which the navbar becomes uncollapsed.
-@grid-float-breakpoint:     @screen-sm-min;
-//** Point at which the navbar begins collapsing.
-@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
-
-
-//== Container sizes
-//
-//## Define the maximum width of `.container` for different screen sizes.
-
-// Small screen / tablet
-@container-tablet:             (720px + @grid-gutter-width);
-//** For `@screen-sm-min` and up.
-@container-sm:                 @container-tablet;
-
-// Medium screen / desktop
-@container-desktop:            (940px + @grid-gutter-width);
-//** For `@screen-md-min` and up.
-@container-md:                 @container-desktop;
-
-// Large screen / wide desktop
-@container-large-desktop:      (1140px + @grid-gutter-width);
-//** For `@screen-lg-min` and up.
-@container-lg:                 @container-large-desktop;
-
-
-//== Navbar
-//
-//##
-
-// Basics of a navbar
-@navbar-height:                    34px;
-@navbar-margin-bottom:             @line-height-computed;
-@navbar-border-radius:             @border-radius-base;
-@navbar-padding-horizontal:        floor((@grid-gutter-width / 2));
-@navbar-padding-vertical:          ((@navbar-height - @line-height-computed) / 2);
-@navbar-collapse-max-height:       340px;
-
-@navbar-default-color:             #777;
-@navbar-default-bg:                rgba(255, 255, 255, 0.72);
-@navbar-default-border:            transparent;
-
-// Navbar links
-@navbar-default-link-color:                #444;
-@navbar-default-link-hover-color:          #000;
-@navbar-default-link-hover-bg:             rgba(0, 0, 0, .05);
-@navbar-default-link-active-color:         #000;
-@navbar-default-link-active-bg:            rgba(0, 0, 0, .05);
-@navbar-default-link-disabled-color:       #ccc;
-@navbar-default-link-disabled-bg:          transparent;
-
-// Navbar brand label
-@navbar-default-brand-color:               @navbar-default-link-color;
-@navbar-default-brand-hover-color:         darken(@navbar-default-brand-color, 10%);
-@navbar-default-brand-hover-bg:            transparent;
-
-// Navbar toggle
-@navbar-default-toggle-hover-bg:           transparent;
-@navbar-default-toggle-icon-bar-bg:        #000;
-@navbar-default-toggle-border-color:       transparent;
-
-
-// Inverted navbar
-// Reset inverted navbar basics
-@navbar-inverse-color:                      lighten(@gray-light, 15%);
-@navbar-inverse-bg:                         #222;
-@navbar-inverse-border:                     darken(@navbar-inverse-bg, 10%);
-
-// Inverted navbar links
-@navbar-inverse-link-color:                 lighten(@gray-light, 15%);
-@navbar-inverse-link-hover-color:           #fff;
-@navbar-inverse-link-hover-bg:              transparent;
-@navbar-inverse-link-active-color:          @navbar-inverse-link-hover-color;
-@navbar-inverse-link-active-bg:             darken(@navbar-inverse-bg, 10%);
-@navbar-inverse-link-disabled-color:        #444;
-@navbar-inverse-link-disabled-bg:           transparent;
-
-// Inverted navbar brand label
-@navbar-inverse-brand-color:                @navbar-inverse-link-color;
-@navbar-inverse-brand-hover-color:          #fff;
-@navbar-inverse-brand-hover-bg:             transparent;
-
-// Inverted navbar toggle
-@navbar-inverse-toggle-hover-bg:            #333;
-@navbar-inverse-toggle-icon-bar-bg:         #fff;
-@navbar-inverse-toggle-border-color:        #333;
-
-
-//== Navs
-//
-//##
-
-//=== Shared nav styles
-@nav-link-padding:                          10px 15px;
-@nav-link-hover-bg:                         @gray-lighter;
-
-@nav-disabled-link-color:                   @gray-light;
-@nav-disabled-link-hover-color:             @gray-light;
-
-//== Tabs
-@nav-tabs-border-color:                     #ddd;
-
-@nav-tabs-link-hover-border-color:          @gray-lighter;
-
-@nav-tabs-active-link-hover-bg:             @body-bg;
-@nav-tabs-active-link-hover-color:          @gray;
-@nav-tabs-active-link-hover-border-color:   #ddd;
-
-@nav-tabs-justified-link-border-color:            #ddd;
-@nav-tabs-justified-active-link-border-color:     @body-bg;
-
-//== Pills
-@nav-pills-border-radius:                   @border-radius-base;
-@nav-pills-active-link-hover-bg:            @component-active-bg;
-@nav-pills-active-link-hover-color:         @component-active-color;
-
-
-//== Pagination
-//
-//##
-
-@pagination-color:                     @link-color;
-@pagination-bg:                        #fff;
-@pagination-border:                    #ddd;
-
-@pagination-hover-color:               @link-hover-color;
-@pagination-hover-bg:                  @gray-lighter;
-@pagination-hover-border:              #ddd;
-
-@pagination-active-color:              #fff;
-@pagination-active-bg:                 @brand-primary;
-@pagination-active-border:             @brand-primary;
-
-@pagination-disabled-color:            @gray-light;
-@pagination-disabled-bg:               #fff;
-@pagination-disabled-border:           #ddd;
-
-
-//== Pager
-//
-//##
-
-@pager-bg:                             @pagination-bg;
-@pager-border:                         @pagination-border;
-@pager-border-radius:                  15px;
-
-@pager-hover-bg:                       @pagination-hover-bg;
-
-@pager-active-bg:                      @pagination-active-bg;
-@pager-active-color:                   @pagination-active-color;
-
-@pager-disabled-color:                 @pagination-disabled-color;
-
-
-//== Jumbotron
-//
-//##
-
-@jumbotron-padding:              30px;
-@jumbotron-color:                inherit;
-@jumbotron-bg:                   @gray-lighter;
-@jumbotron-heading-color:        inherit;
-@jumbotron-font-size:            ceil((@font-size-base * 1.5));
-@jumbotron-heading-font-size:    ceil((@font-size-base * 4.5));
-
-
-//== Form states and alerts
-//
-//## Define colors for form feedback states and, by default, alerts.
-
-@state-success-text:             #3c763d;
-@state-success-bg:               #dff0d8;
-@state-success-border:           darken(spin(@state-success-bg, -10), 5%);
-
-@state-info-text:                #31708f;
-@state-info-bg:                  #d9edf7;
-@state-info-border:              darken(spin(@state-info-bg, -10), 7%);
-
-@state-warning-text:             #8a6d3b;
-@state-warning-bg:               #fcf8e3;
-@state-warning-border:           darken(spin(@state-warning-bg, -10), 20%);
-
-@state-danger-text:              #a94442;
-@state-danger-bg:                #f2dede;
-@state-danger-border:            darken(spin(@state-danger-bg, -10), 5%);
-
-
-//== Tooltips
-//
-//##
-
-//** Tooltip max width
-@tooltip-max-width:           200px;
-//** Tooltip text color
-@tooltip-color:               #fff;
-//** Tooltip background color
-@tooltip-bg:                  #000;
-@tooltip-opacity:             .9;
-
-//** Tooltip arrow width
-@tooltip-arrow-width:         5px;
-//** Tooltip arrow color
-@tooltip-arrow-color:         @tooltip-bg;
-
-
-//== Popovers
-//
-//##
-
-//** Popover body background color
-@popover-bg:                          #fff;
-//** Popover maximum width
-@popover-max-width:                   276px;
-//** Popover border color
-@popover-border-color:                rgba(0,0,0,.2);
-//** Popover fallback border color
-@popover-fallback-border-color:       #ccc;
-
-//** Popover title background color
-@popover-title-bg:                    darken(@popover-bg, 3%);
-
-//** Popover arrow width
-@popover-arrow-width:                 10px;
-//** Popover arrow color
-@popover-arrow-color:                 @popover-bg;
-
-//** Popover outer arrow width
-@popover-arrow-outer-width:           (@popover-arrow-width + 1);
-//** Popover outer arrow color
-@popover-arrow-outer-color:           fadein(@popover-border-color, 5%);
-//** Popover outer arrow fallback color
-@popover-arrow-outer-fallback-color:  darken(@popover-fallback-border-color, 20%);
-
-
-//== Labels
-//
-//##
-
-//** Default label background color
-@label-default-bg:            @gray-light;
-//** Primary label background color
-@label-primary-bg:            @brand-primary;
-//** Success label background color
-@label-success-bg:            @brand-success;
-//** Info label background color
-@label-info-bg:               @brand-info;
-//** Warning label background color
-@label-warning-bg:            @brand-warning;
-//** Danger label background color
-@label-danger-bg:             @brand-danger;
-
-//** Default label text color
-@label-color:                 #fff;
-//** Default text color of a linked label
-@label-link-hover-color:      #fff;
-
-
-//== Modals
-//
-//##
-
-//** Padding applied to the modal body
-@modal-inner-padding:         15px;
-
-//** Padding applied to the modal title
-@modal-title-padding:         15px;
-//** Modal title line-height
-@modal-title-line-height:     @line-height-base;
-
-//** Background color of modal content area
-@modal-content-bg:                             #fff;
-//** Modal content border color
-@modal-content-border-color:                   rgba(0,0,0,.2);
-//** Modal content border color **for IE8**
-@modal-content-fallback-border-color:          #999;
-
-//** Modal backdrop background color
-@modal-backdrop-bg:           #000;
-//** Modal backdrop opacity
-@modal-backdrop-opacity:      .5;
-//** Modal header border color
-@modal-header-border-color:   #e5e5e5;
-//** Modal footer border color
-@modal-footer-border-color:   @modal-header-border-color;
-
-@modal-lg:                    900px;
-@modal-md:                    600px;
-@modal-sm:                    300px;
-
-
-//== Alerts
-//
-//## Define alert colors, border radius, and padding.
-
-@alert-padding:               15px;
-@alert-border-radius:         @border-radius-base;
-@alert-link-font-weight:      bold;
-
-@alert-success-bg:            @state-success-bg;
-@alert-success-text:          @state-success-text;
-@alert-success-border:        @state-success-border;
-
-@alert-info-bg:               @state-info-bg;
-@alert-info-text:             @state-info-text;
-@alert-info-border:           @state-info-border;
-
-@alert-warning-bg:            @state-warning-bg;
-@alert-warning-text:          @state-warning-text;
-@alert-warning-border:        @state-warning-border;
-
-@alert-danger-bg:             @state-danger-bg;
-@alert-danger-text:           @state-danger-text;
-@alert-danger-border:         @state-danger-border;
-
-
-//== Progress bars
-//
-//##
-
-//** Background color of the whole progress component
-@progress-bg:                 #f5f5f5;
-//** Progress bar text color
-@progress-bar-color:          #fff;
-//** Variable for setting rounded corners on progress bar.
-@progress-border-radius:      @border-radius-base;
-
-//** Default progress bar color
-@progress-bar-bg:             @brand-primary;
-//** Success progress bar color
-@progress-bar-success-bg:     @brand-success;
-//** Warning progress bar color
-@progress-bar-warning-bg:     @brand-warning;
-//** Danger progress bar color
-@progress-bar-danger-bg:      @brand-danger;
-//** Info progress bar color
-@progress-bar-info-bg:        @brand-info;
-
-
-//== List group
-//
-//##
-
-//** Background color on `.list-group-item`
-@list-group-bg:                 #fff;
-//** `.list-group-item` border color
-@list-group-border:             #ddd;
-//** List group border radius
-@list-group-border-radius:      @border-radius-base;
-
-//** Background color of single list items on hover
-@list-group-hover-bg:           #f5f5f5;
-//** Text color of active list items
-@list-group-active-color:       @component-active-color;
-//** Background color of active list items
-@list-group-active-bg:          @component-active-bg;
-//** Border color of active list elements
-@list-group-active-border:      @list-group-active-bg;
-//** Text color for content within active list items
-@list-group-active-text-color:  lighten(@list-group-active-bg, 40%);
-
-//** Text color of disabled list items
-@list-group-disabled-color:      @gray-light;
-//** Background color of disabled list items
-@list-group-disabled-bg:         @gray-lighter;
-//** Text color for content within disabled list items
-@list-group-disabled-text-color: @list-group-disabled-color;
-
-@list-group-link-color:         #555;
-@list-group-link-hover-color:   @list-group-link-color;
-@list-group-link-heading-color: #333;
-
-
-//== Panels
-//
-//##
-
-@panel-bg:                    #fff;
-@panel-body-padding:          8px;
-@panel-heading-padding:       4px 8px;
-@panel-footer-padding:        @panel-heading-padding;
-@panel-border-radius:         @border-radius-base;
-
-//** Border color for elements within panels
-@panel-inner-border:          #ddd;
-@panel-footer-bg:             #f5f5f5;
-
-@panel-default-text:          @gray-dark;
-@panel-default-border:        #000;
-@panel-default-heading-bg:    #f5f5f5;
-
-@panel-primary-text:          #fff;
-@panel-primary-border:        @brand-primary;
-@panel-primary-heading-bg:    @brand-primary;
-
-@panel-success-text:          @state-success-text;
-@panel-success-border:        @state-success-border;
-@panel-success-heading-bg:    @state-success-bg;
-
-@panel-info-text:             @state-info-text;
-@panel-info-border:           @state-info-border;
-@panel-info-heading-bg:       @state-info-bg;
-
-@panel-warning-text:          @state-warning-text;
-@panel-warning-border:        @state-warning-border;
-@panel-warning-heading-bg:    @state-warning-bg;
-
-@panel-danger-text:           @state-danger-text;
-@panel-danger-border:         @state-danger-border;
-@panel-danger-heading-bg:     @state-danger-bg;
-
-
-//== Thumbnails
-//
-//##
-
-//** Padding around the thumbnail image
-@thumbnail-padding:           4px;
-//** Thumbnail background color
-@thumbnail-bg:                @body-bg;
-//** Thumbnail border color
-@thumbnail-border:            #ddd;
-//** Thumbnail border radius
-@thumbnail-border-radius:     @border-radius-base;
-
-//** Custom text color for thumbnail captions
-@thumbnail-caption-color:     @text-color;
-//** Padding around the thumbnail caption
-@thumbnail-caption-padding:   9px;
-
-
-//== Wells
-//
-//##
-
-@well-bg:                     #f5f5f5;
-@well-border:                 darken(@well-bg, 7%);
-
-
-//== Badges
-//
-//##
-
-@badge-color:                 #fff;
-//** Linked badge text color on hover
-@badge-link-hover-color:      #fff;
-@badge-bg:                    @gray-light;
-
-//** Badge text color in active nav link
-@badge-active-color:          @link-color;
-//** Badge background color in active nav link
-@badge-active-bg:             #fff;
-
-@badge-font-weight:           bold;
-@badge-line-height:           1;
-@badge-border-radius:         10px;
-
-
-//== Breadcrumbs
-//
-//##
-
-@breadcrumb-padding-vertical:   8px;
-@breadcrumb-padding-horizontal: 15px;
-//** Breadcrumb background color
-@breadcrumb-bg:                 #f5f5f5;
-//** Breadcrumb text color
-@breadcrumb-color:              #ccc;
-//** Text color of current page in the breadcrumb
-@breadcrumb-active-color:       @gray-light;
-//** Textual separator for between breadcrumb elements
-@breadcrumb-separator:          "/";
-
-
-//== Carousel
-//
-//##
-
-@carousel-text-shadow:                        0 1px 2px rgba(0,0,0,.6);
-
-@carousel-control-color:                      #fff;
-@carousel-control-width:                      15%;
-@carousel-control-opacity:                    .5;
-@carousel-control-font-size:                  20px;
-
-@carousel-indicator-active-bg:                #fff;
-@carousel-indicator-border-color:             #fff;
-
-@carousel-caption-color:                      #fff;
-
-
-//== Close
-//
-//##
-
-@close-font-weight:           bold;
-@close-color:                 #000;
-@close-text-shadow:           0 1px 0 #fff;
-
-
-//== Code
-//
-//##
-
-@code-color:                  #c7254e;
-@code-bg:                     #f9f2f4;
-
-@kbd-color:                   #fff;
-@kbd-bg:                      #333;
-
-@pre-bg:                      #f5f5f5;
-@pre-color:                   @gray-dark;
-@pre-border-color:            #e0e0e0;
-@pre-scrollable-max-height:   340px;
-
-
-//== Type
-//
-//##
-
-//** Horizontal offset for forms and lists.
-@component-offset-horizontal: 180px;
-//** Text muted color
-@text-muted:                  @gray-light;
-//** Abbreviations and acronyms border color
-@abbr-border-color:           @gray-light;
-//** Headings small color
-@headings-small-color:        @gray-light;
-//** Blockquote small color
-@blockquote-small-color:      @gray-light;
-//** Blockquote font size
-@blockquote-font-size:        @font-size-base;
-//** Blockquote border color
-@blockquote-border-color:     @gray-lighter;
-//** Page header border color
-@page-header-border-color:    @gray-lighter;
-//** Width of horizontal description list titles
-@dl-horizontal-offset:        @component-offset-horizontal;
-//** Point at which .dl-horizontal becomes horizontal
-@dl-horizontal-breakpoint:    @grid-float-breakpoint;
-//** Horizontal line color.
-@hr-border:                   @gray-lighter;
diff --git a/teamapps-client/less/third-party-fixes/quill-snow-fixes.less b/teamapps-client/less/third-party-fixes/quill-snow-fixes.less
deleted file mode 100644
index 411e054c8..000000000
--- a/teamapps-client/less/third-party-fixes/quill-snow-fixes.less
+++ /dev/null
@@ -1,83 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-/*
-================= header fix ==================
-
-  Fix header styles from quill.core.css.
-
-  See bootstrap's type.less.
- */
-
-// Headings
-// -------------------------
-
-.ql-snow, .ql-editor {
-  h1, h2, h3, h4, h5, h6,
-  .h1, .h2, .h3, .h4, .h5, .h6 {
-    font-family: "Work Sans","Helvetica Neue","Helvetica","Roboto","Arial",sans-serif,sans-serif;
-    font-weight: 200;
-    color: #0172b9;
-    //font-family: @headings-font-family;
-    //font-weight: @headings-font-weight;
-    line-height: @headings-line-height;
-    //color: @headings-color;
-
-    small,
-    .small {
-      font-weight: normal;
-      line-height: 1;
-      color: @headings-small-color;
-    }
-  }
-
-  h1, .h1 {
-
-  }
-
-  h1, .h1,
-  h2, .h2,
-  h3, .h3,
-  h4, .h4,
-  h5, .h5,
-  h6, .h6 {
-    margin-top: (@line-height-computed / 2);
-    margin-bottom: (@line-height-computed / 2);
-
-    small,
-    .small {
-      font-size: 75%;
-    }
-  }
-
-  h1, .h1 { font-size: @font-size-h1; }
-  h2, .h2 { font-size: @font-size-h2; }
-  h3, .h3 { font-size: @font-size-h3; }
-  h4, .h4 { font-size: @font-size-h4; }
-  h5, .h5 { font-size: @font-size-h5; }
-  h6, .h6 { font-size: @font-size-h6; }
-
-  h4, h5 {
-    font-weight: 600;
-  }
-}
-
-/*
-================= end of header fix ==================
- */
diff --git a/teamapps-client/less/third-party-fixes/trivial-components-fixes.less b/teamapps-client/less/third-party-fixes/trivial-components-fixes.less
index 10fe243a1..8dfd9e21f 100644
--- a/teamapps-client/less/third-party-fixes/trivial-components-fixes.less
+++ b/teamapps-client/less/third-party-fixes/trivial-components-fixes.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,7 +19,7 @@
  */
 @tr-tree-indent: 15px;
 @tr-editor-font-size: 100%;
-@tr-input-min-height: @input-height-base;
+@tr-input-min-height: var(--ta-input-height);
 
 .tr-tree-expander {
   margin: 0 1px 0 3px !important;
@@ -30,8 +30,8 @@
 }
 
 .tr-input-wrapper {
-  border-radius: @border-radius-base;
-  min-height: @input-height-base;
+  border-radius: var(--ta-border-radius);
+  min-height: var(--ta-input-height);
 }
 
 .tr-combobox-selected-entry-wrapper {
@@ -44,11 +44,6 @@
   }
 }
 
-.tr-dropdown {
-  max-height: 200px;
-  z-index: 10000000;
-}
-
 .tr-datetimefield .tr-editor-wrapper .tr-date-editor,
 .tr-datetimefield .tr-editor-wrapper .tr-time-editor {
   padding-left: 3px;
@@ -59,15 +54,7 @@
 
 .tr-input-wrapper {
   box-shadow: none;
-  transition: border-color @default-color-transition-time, box-shadow @default-color-transition-time;
-}
-
-.tr-remove-button {
-  opacity: .6;
-}
-
-.tr-editor {
-  border-radius: 4px;
+  transition: border-color var(--ta-color-transition-time), box-shadow var(--ta-color-transition-time);
 }
 
 .tr-tree-entry-children-wrapper:empty {
diff --git a/teamapps-client/less/trivial-components/calendarbox.less b/teamapps-client/less/trivial-components/calendarbox.less
new file mode 100644
index 000000000..46a467272
--- /dev/null
+++ b/teamapps-client/less/trivial-components/calendarbox.less
@@ -0,0 +1,262 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+/*
+ *
+ *  Copyright 2016 Yann Massard (https://github.com/yamass) and other contributors
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ *
+ */
+.tr-calendarbox {
+  font-family: @tr-editor-font-family;
+  font-size: @tr-editor-font-size;
+  cursor: default;
+  user-select: none;
+
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+
+  .tr-calendar-display {
+    width: 176px;
+
+    .year, .month {
+      display: flex;
+      border-radius: 2px;
+
+      .name {
+        flex: 1 1 100px;
+        text-align: center;
+        padding: 2px 0;
+        font-weight: bold;
+        .fix-firefox-baseline;
+      }
+
+      &.keyboard-nav {
+        .blinking-box-shadow;
+      }
+    }
+
+    .month-table {
+      margin-top: 5px;
+      th, td {
+        width: 28px;
+        border: none;
+        border-spacing: 0;
+        border-radius: 2px;
+        text-align: right;
+        padding: 1px 3px;
+        .fix-firefox-baseline;
+        position: relative;
+      }
+
+      td:hover {
+        background-color: @tr-highlight-color;
+      }
+
+      .current-month {
+        color: black;
+      }
+
+      .other-month {
+        color: lightgrey;
+      }
+
+      .today:before {
+        position: absolute;
+        top: 9px;
+        left: 2px;
+        display: block;
+        width: 4px;
+        height: 4px;
+        border-radius: 2px;
+        float: left;
+        background-color: #ff641c;
+        content: '';
+      }
+
+      .selected {
+        background-color: @tr-highlight-color;
+      }
+
+      .keyboard-nav {
+        .blinking-box-shadow;
+      }
+
+    }
+  }
+
+  .tr-clock-display {
+    .clock {
+      stroke: black;
+      stroke-linecap: round;
+
+      .clockcircle {
+        stroke-width: 2px;
+        fill: #fff;
+      }
+
+      .ticks {
+        stroke-width: 1px;
+      }
+
+      .hourhand {
+        stroke-width: 3px;
+      }
+
+      .minutehand {
+        stroke-width: 2px;
+      }
+
+      .hourhand.keyboard-nav, .minutehand.keyboard-nav {
+        .blinking-stroke;
+      }
+
+      .numbers {
+        font-family: sans-serif;
+        font-size: 10pt;
+        text-anchor: middle;
+        stroke: none;
+        fill: black;
+      }
+
+      .numbers {
+        font-family: sans-serif;
+        font-size: 10pt;
+        text-anchor: middle;
+        stroke: none;
+        fill: black;
+      }
+
+      .am-pm-box {
+        font-weight: 100;
+        font-size: 11px;
+        stroke-width: 0.3;
+        fill: transparent;
+        .am-pm-text {
+          fill: #444;
+          stroke: #444;
+          stroke-width: .3px;
+        }
+      }
+    }
+
+    .digital-time-display {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 130%;
+
+      .hour-wrapper, .minute-wrapper {
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+        padding: 2px;
+        border-radius: 2px;
+        &.keyboard-nav {
+          .blinking-box-shadow;
+        }
+      }
+    }
+  }
+
+  .back-button, .forward-button, .up-button, .down-button {
+    flex: 0 0 16px;
+    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gQ3JlYXRlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIC0tPgoKPHN2ZwogICB2aWV3Qm94PSIwIDAgMTAwIDEwMCIKICAgdmVyc2lvbj0iMS4xIgogICBpZD0ic3ZnNTE2IgogICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxkZWZzCiAgICAgaWQ9ImRlZnM1MTMiIC8+CiAgPGcKICAgICBpZD0ibGF5ZXIxIj4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0iZmlsbDojMDAwMDAwO3N0cm9rZS13aWR0aDowLjI2NDU4MyIKICAgICAgIGQ9Ik0gNDAsMjAgNzAsNTAgNDAsODAgMzAsNzUgNTUsNTAgMzAsMjUiCiAgICAgICBpZD0icGF0aDIxODciIC8+CiAgPC9nPgo8L3N2Zz4K);
+    background-position: center;
+    background-repeat: no-repeat;
+    transition: transform 0.1s;
+    cursor: pointer;
+  }
+  .back-button {
+    transform: scale(-1, 1);
+  }
+  .down-button {
+    flex: 0 0 10px;
+    transform: rotate(90deg);
+  }
+  .up-button {
+    flex: 0 0 10px;
+    transform: rotate(-90deg) scale(1, -1);
+  }
+
+}
+
+.blinking-box-shadow {
+  animation: blinking-box-shadow 0.5s ease-in-out infinite alternate;
+  background-color: transparent;
+}
+
+@keyframes blinking-box-shadow {
+  0% {
+    box-shadow: inset 0 0 0 1px lighten(@tr-highlight-color-base, 40%, relative);
+  }
+  30% {
+    box-shadow: inset 0 0 0 1px lighten(@tr-highlight-color-base, 40%, relative);
+  }
+  70% {
+    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5);
+  }
+  100% {
+    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5);
+  }
+}
+
+.blinking-stroke {
+  animation: blinking-stroke 0.5s ease-out infinite alternate;
+}
+
+@keyframes blinking-stroke {
+  0% {
+    stroke: lighten(@tr-highlight-color-base, 40%, relative);
+    color: lighten(@tr-highlight-color-base, 40%, relative);
+  }
+  40% {
+    stroke: lighten(@tr-highlight-color-base, 40%, relative);
+    color: lighten(@tr-highlight-color-base, 40%, relative);
+  }
+  80% {
+    stroke: black;
+    color: black;
+  }
+  100% {
+    stroke: black;
+    color: black;
+  }
+}
+
+.fix-firefox-baseline {
+  &:after {
+    // this is a hack for fixing firefox baseline. See http://blogs.adobe.com/webplatform/2014/08/13/one-weird-trick-to-baseline-align-text/
+    content: '';
+    display: inline-block;
+    height: 13px;
+  }
+}
diff --git a/teamapps-client/less/trivial-components/calendarcombobox.less b/teamapps-client/less/trivial-components/calendarcombobox.less
new file mode 100644
index 000000000..bdfb1a698
--- /dev/null
+++ b/teamapps-client/less/trivial-components/calendarcombobox.less
@@ -0,0 +1,93 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+/*
+ *
+ *  Copyright 2016 Yann Massard (https://github.com/yamass) and other contributors
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ *
+ */
+
+.tr-calendarcombobox {
+  min-height: @tr-input-min-height;
+
+  .tr-formatted-field {
+    flex: 1 1 0px;
+    padding: 3px 5px;
+    background-color: #f5f5f5;
+    font-family: @tr-editor-font-family;
+    font-size: @tr-editor-font-size;
+    border-radius: @tr-border-radius;
+
+    display: flex;
+    justify-content: flex-end;
+
+    .tr-formatted-input-section {
+      border: 1px solid lighten(@tr-border-color, 12%);
+      padding: 2px 2px;
+      outline: none;
+      background-color: white;
+      &:focus {
+        border-color: @tr-input-border-focus;
+      }
+      &.right {
+        text-align: right;
+      }
+      &.left {
+        text-align: left;
+      }
+      &.center {
+        text-align: center;
+      }
+
+      &:empty:not(:focus):before{
+        content:attr(data-placeholder);
+        color: @tr-disabled-text-color;
+      }
+    }
+
+    .separator {
+      padding: 2px 2px;
+      margin: 0 -1px;
+    }
+
+    .generate-char-widths(10);
+    .generate-char-widths(@n, @i: 1) when (@i =< @n) {
+      .tr-formatted-input-section.tr-@{i}-chars {
+        min-width: ~"calc(" @i * 1ch ~" + 6px)";
+      }
+      .generate-char-widths(@n, (@i + 1));
+    }
+  }
+}
+
+.tr-calendarcombobox-dropdown {
+  padding: 5px 0;
+}
diff --git a/teamapps-client/less/trivial-components/combobox.less b/teamapps-client/less/trivial-components/combobox.less
new file mode 100644
index 000000000..86ec2476e
--- /dev/null
+++ b/teamapps-client/less/trivial-components/combobox.less
@@ -0,0 +1,111 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+/*
+ *
+ *  Copyright 2016 Yann Massard (https://github.com/yamass) and other contributors
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ *
+ */
+
+.tr-combobox {
+
+  .tr-combobox-main-area {
+    flex: 1 1 auto;
+    display: flex;
+    align-items: stretch;
+    position: relative;
+    overflow: hidden;
+
+    .tr-combobox-selected-entry-wrapper {
+      overflow: hidden;
+      flex-grow: 1;
+      display: flex;
+      align-items: center; // if the template doesn't take the whole space...
+
+      .tr-combobox-entry {
+        flex: 1 1 auto;
+
+        * {
+          cursor: text;
+        }
+      }
+    }
+
+    .tr-combobox-editor {
+      border: none;
+      outline: none;
+      background-color: transparent;
+      z-index: 1;
+      font-family: @tr-editor-font-family;
+      font-size: @tr-editor-font-size;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+
+    .placeholder-text {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  .tr-tool-buttons {
+    display: flex;
+    align-items: center;
+
+    > .UiToolButton .img {
+      width: 16px;
+      height: 16px;
+    }
+
+    > * {
+      cursor: pointer;
+    }
+  }
+
+  &.editor-hidden .tr-combobox-editor {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  &:not(.editor-hidden) .tr-combobox-selected-entry-wrapper {
+    visibility: hidden;
+    pointer-events: none;
+  }
+
+  &:not(.open) .tr-dropdown {
+    display: none;
+  }
+}
+
diff --git a/teamapps-client/less/trivial-components/common.less b/teamapps-client/less/trivial-components/common.less
new file mode 100644
index 000000000..7b5d19ca6
--- /dev/null
+++ b/teamapps-client/less/trivial-components/common.less
@@ -0,0 +1,240 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+/*
+ *
+ *  Copyright 2016 Yann Massard (https://github.com/yamass) and other contributors
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ *
+ */
+.tr-original-input {
+  tab-index: -1;
+  display: none !important;
+}
+
+.tr-default-spinner, .tr-default-no-data-display {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+
+  display: flex;
+
+  align-items: center;
+  justify-content: center;
+
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  color: #999999;
+  background-color: rgba(255, 255, 255, 0.7);
+
+  .spinner {
+    animation: tr-spin 1s infinite linear;
+    width: 10px;
+    height: 10px;
+    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAN0lEQVQYV2NkQAXGDAwMPlChLQwMDGdh0oxoCuvR+I0UKyTaapBNMOvh1oIE0d1ItEKiraajrwH17w4LpvE5NgAAAABJRU5ErkJggg==);
+    margin-right: 5px;
+
+    @keyframes tr-spin {
+      0% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+      }
+      100% {
+        -webkit-transform: rotate(359deg);
+        transform: rotate(359deg);
+      }
+    }
+  }
+
+}
+
+.tr-component-focus() {
+  @color-rgba: rgba(red(@tr-input-border-focus), green(@tr-input-border-focus), blue(@tr-input-border-focus), .6);
+  &.focus, &:focus {
+    border-color: @tr-input-border-focus;
+    outline: 0;
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px ~"@{color-rgba}";
+  }
+}
+
+.tr-highlighted-text {
+  background-color: rgba(244, 195, 125, 0.7);
+  border-radius: 3px;
+  box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.75);
+}
+
+.tr-selected-entry {
+  background-color: var(--ta-selection-color);
+}
+
+.tr-dropdown {
+  position: fixed;
+  background-color: white;
+  max-height: 300px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  border: @tr-border;
+  border-radius: 0 0 @tr-border-radius @tr-border-radius;
+  z-index: var(--ta-zindex-dropdown);
+
+  &:not(.broader-than-combobox) {
+    border-top: none;
+  }
+
+  &.flipped {
+    border-radius: @tr-border-radius @tr-border-radius 0 0;
+    border-top: @tr-border;
+    border-bottom: none;
+  }
+
+  > * {
+    // needs to be set on the content (e.g. listbox) so the dropdown component has the min size! Otherwise, the listbox will shrink down to zero, even if an empty template is to be displayed.
+    min-height: 20px;
+  }
+}
+
+.tr-input-wrapper {
+  position: relative;
+  display: flex;
+  background-color: white;
+  border: @tr-border;
+  border-radius: @tr-border-radius;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
+  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+  .tr-component-focus;
+  &.open {
+    border-radius: @tr-border-radius @tr-border-radius 0 0;
+  }
+  &.open.dropdown-flipped {
+    border-radius: 0 0 @tr-border-radius @tr-border-radius;
+  }
+  &, * {
+    box-sizing: border-box;
+  }
+
+  .tr-remove-button {
+    align-self: center;
+    margin: 3px;
+  }
+
+  .tr-trigger {
+    order: 9999999;
+    flex: 0 0 20px;
+    width: 20px;
+    border-left: @tr-border;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: @tr-button-bg;
+
+    .tr-trigger-icon {
+      display: inline-block;
+      width: 0;
+      height: 0;
+      vertical-align: middle;
+      border-top: @tr-caret-width solid var(--ta-text-color);
+      border-right: @tr-caret-width solid transparent;
+      border-left: @tr-caret-width solid transparent;
+    }
+
+    &:hover, .open & {
+      background-color: @tr-button-bg-active;
+    }
+  }
+
+  &.disabled {
+    background-color: @tr-button-bg;
+
+    .tr-remove-button {
+      display: none !important;
+    }
+
+    .tr-trigger:hover {
+      background-color: inherit;
+    }
+
+    .tr-trigger-icon {
+      border-top-color: white;
+    }
+
+    .tr-editor {
+      display: none;
+    }
+  }
+
+  &.readonly {
+    border-color: transparent;
+    box-shadow: none;
+
+    .tr-remove-button {
+      display: none !important;
+    }
+
+    .tr-trigger {
+      display: none;
+    }
+
+    .tr-editor {
+      display: none;
+    }
+  }
+
+  input::-ms-clear { // hide ie's reset button
+    display: none;
+  }
+}
+
+.tr-remove-button {
+  flex: 0 0 16px;
+  width: 16px;
+  height: 16px;
+  text-align: center;
+  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg viewBox='0 0 120 120' version='1.1' id='svg5' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs2'/%3E%3Cg id='layer1'%3E%3Cpath id='shape' style='fill:%23000000;stroke-width:0.216778' d='M 85,21.270365 60.091545,45.858249 35.503661,20.949794 21.270363,34.99991 45.858247,59.908365 20.949794,84.496247 34.99991,98.729545 59.908363,74.141663 84.496245,99.050116 98.729543,85 74.141661,60.091547 99.050116,35.503663 Z'/%3E%3C/g%3E%3C/svg%3E");
+  background-position: center;
+  background-repeat: no-repeat;
+  opacity: .6;
+
+  .tr-input-wrapper.disabled &,
+  .tr-input-wrapper.readonly & {
+    display: none;
+  }
+
+  &:hover {
+    opacity: 1;
+  }
+}
+
+input.tr-editor {
+  border-radius: 4px;
+  padding: var(--ta-padding-base-vertical) var(--ta-padding-base-horizontal);
+}
+
diff --git a/teamapps-client/less/trivial-components/datetimefield.less b/teamapps-client/less/trivial-components/datetimefield.less
new file mode 100644
index 000000000..25aa15f47
--- /dev/null
+++ b/teamapps-client/less/trivial-components/datetimefield.less
@@ -0,0 +1,71 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+/*
+ *
+ *  Copyright 2016 Yann Massard (https://github.com/yamass) and other contributors
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ *
+ */
+.tr-datetimefield {
+  .tr-editor-wrapper {
+    padding: 2px 0;
+    flex: 1 1 0px;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+
+    .tr-date-icon-wrapper,
+    .tr-time-icon-wrapper {
+      flex: 0 0 auto;
+      display: flex;
+      align-items: center;
+    }
+    .tr-time-icon-wrapper {
+      margin-left: 4px;
+    }
+
+    .tr-date-editor,
+    .tr-time-editor {
+      outline: none;
+      font-family: @tr-editor-font-family;
+      font-size: @tr-editor-font-size;
+      padding-left: 1px;
+    }
+    .tr-date-editor {
+      flex: 0 0 auto;
+      min-width: 9ch;
+    }
+    .tr-time-editor {
+      flex: 1 0 auto;
+      min-width: 4.5ch;
+    }
+  }
+}
diff --git a/teamapps-client/less/trivial-components/icon-template-date.less b/teamapps-client/less/trivial-components/icon-template-date.less
new file mode 100644
index 000000000..d1be2f9f9
--- /dev/null
+++ b/teamapps-client/less/trivial-components/icon-template-date.less
@@ -0,0 +1,76 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+/*
+ *
+ *  Copyright 2016 Yann Massard (https://github.com/yamass) and other contributors
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ *
+ */
+.calendar-icon {
+  align-self: center;
+
+  .calendar-symbol-page-background {
+    fill: #ffffff;
+  }
+
+  .calendar-symbol-color {
+    fill: #d35f5f;
+  }
+
+  .calendar-symbol-page {
+    shape-rendering: crispEdges;
+    fill: none;
+    stroke: #0000003b;
+    stroke-width: 20;
+    stroke-linejoin: miter;
+    stroke-miterlimit: 4;
+  }
+
+  .calendar-symbol-ring-gradient-stop1 { stop-color: #555; }
+  .calendar-symbol-ring-gradient-stop2 { stop-color: #aaa; }
+  .calendar-symbol-ring-gradient-stop3 { stop-color: black; }
+
+  .calendar-symbol-ring {
+    shape-rendering: geometricPrecision;
+    fill: url(#Gradient1);
+    stroke: none;
+  }
+
+  .calendar-symbol-date {
+    fill: #333;
+    //stroke: #000000;
+    //stroke-width: 10px;
+    font-size: 250px;
+    cursor: default;
+  }
+
+}
+
diff --git a/teamapps-client/less/trivial-components/icon-template-time.less b/teamapps-client/less/trivial-components/icon-template-time.less
new file mode 100644
index 000000000..339d6d3e0
--- /dev/null
+++ b/teamapps-client/less/trivial-components/icon-template-time.less
@@ -0,0 +1,77 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+/*
+ *
+ *  Copyright 2016 Yann Massard (https://github.com/yamass) and other contributors
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ *
+ */
+// TODO wrap these styles!!!
+
+.clock-icon {
+  align-self: center;
+
+  .clockcircle {
+    stroke: #555;
+    stroke-width: 5px;
+    fill: #fff;
+  }
+
+  .hourhand {
+    stroke: #333;
+    stroke-width: 8.7px;
+    stroke-linecap: round;
+  }
+
+  .minutehand {
+    stroke: #333;
+    stroke-width: 6.2px;
+    stroke-linecap: round;
+  }
+
+  &.night-true .clockcircle {
+    stroke-width: 5px;
+    stroke: #333;
+    fill: rgba(77, 130, 184, 0.76);
+  }
+
+  &.night-true .hourhand {
+    stroke-width: 8px;
+    stroke: #fff;
+    fill: #333;
+  }
+
+  &.night-true .minutehand {
+    stroke-width: 6px;
+    stroke: #fff;
+    fill: #333;
+  }
+}
diff --git a/teamapps-client/less/trivial-components/tagcombobox.less b/teamapps-client/less/trivial-components/tagcombobox.less
new file mode 100644
index 000000000..d1922d039
--- /dev/null
+++ b/teamapps-client/less/trivial-components/tagcombobox.less
@@ -0,0 +1,134 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+/*
+ *
+ *  Copyright 2016 Yann Massard (https://github.com/yamass) and other contributors
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ *
+ */
+
+@tr-default-tag-border-color: #BAD2EA;
+
+.tr-tagcombobox {
+  display: flex;
+
+  .tr-tagcombobox-main-area {
+    flex: 1 1 auto;
+    display: flex;
+    align-items: center;
+    position: relative;
+
+    .tr-tagcombobox-tagarea {
+      flex: 1 1 auto;
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      padding: 1px;
+      overflow: hidden;
+
+      .tr-tagcombobox.editable & {
+        cursor: text;
+      }
+    }
+
+    .placeholder-text {
+      position: absolute;
+      pointer-events: none;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  .tr-tagcombobox-tag {
+    flex: 0 0 auto;
+    cursor: default;
+
+    &.marked-for-removal > * {
+      box-shadow: 0 0 1px 1px var(--ta-input-border-focus);
+      > * {
+        filter: opacity(.8) grayscale(1);
+      }
+    }
+  }
+
+  .tr-tagcombobox-editor {
+    flex: 0 0 auto;
+    max-width: 100%;
+    outline: none;
+    font-family: @tr-editor-font-family;
+    font-size: @tr-editor-font-size;
+    min-height: 1em;
+
+    &:focus,
+    &:not(:empty){
+      min-width: 2px;
+      margin: 2px 3px;
+    }
+
+    &:first-child:last-child:not(:focus):empty:before {
+      content: attr(placeholder);
+      color: @tr-disabled-text-color;
+    }
+  }
+
+  &:not(.open) .tr-dropdown {
+    display: none;
+  }
+}
+
+.tr-tagcombobox-default-wrapper-template {
+  border: 1px solid @tr-default-tag-border-color;
+  border-radius: 3px;
+  box-shadow: 1px 2px 1px -1px rgba(0, 0, 0, 0.13);
+  background-color: white;
+  margin: 2px;
+  overflow: hidden;
+
+  display: flex;
+  align-items: center;
+
+  .tr-tagcombobox-tag-content {
+    flex: 1 1 auto;
+    padding: 0 1px;
+  }
+
+  .tr-remove-button {
+    border: 1px solid @tr-default-tag-border-color;
+    border-radius: 3px;
+    margin: 2px;
+    align-self: flex-start;
+  }
+}
diff --git a/teamapps-client/less/trivial-components/template-currency-2-lines.less b/teamapps-client/less/trivial-components/template-currency-2-lines.less
new file mode 100644
index 000000000..fc92a268a
--- /dev/null
+++ b/teamapps-client/less/trivial-components/template-currency-2-lines.less
@@ -0,0 +1,63 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+/*
+ *
+ *  Copyright 2016 Yann Massard (https://github.com/yamass) and other contributors
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ *
+ */
+.tr-template-currency-2-lines {
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  padding: 1px 3px;
+  font-size: 14px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  .main-line {
+    line-height: 14px;
+    margin: 1px 0;
+    white-space: nowrap;
+    display: flex;
+    justify-content: space-between;
+
+    .currency-code {
+      font-weight: 500;
+    }
+  }
+  .additional-info {
+    font-size: 90%;
+    color: #555;
+    font-weight: 200;
+    white-space: nowrap;
+    display: flex;
+    justify-content: space-between;
+  }
+}
diff --git a/teamapps-client/less/trivial-components/template-currency-single-line-long.less b/teamapps-client/less/trivial-components/template-currency-single-line-long.less
new file mode 100644
index 000000000..1f7fa977e
--- /dev/null
+++ b/teamapps-client/less/trivial-components/template-currency-single-line-long.less
@@ -0,0 +1,69 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+/*
+ *
+ *  Copyright 2016 Yann Massard (https://github.com/yamass) and other contributors
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ *
+ */
+.tr-template-currency-single-line-long {
+  padding: 5px 4px 5px 8px;
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 15px;
+  white-space: nowrap;
+  text-align: right;
+
+  .content-wrapper {
+    display: flex;
+    justify-content: space-between;
+    .symbol-and-code {
+      .currency-code {
+        display: inline-block;
+      }
+      .currency-symbol {
+      }
+      .currency-code + .currency-symbol {
+        color: #555;
+        min-width: 2.7em;
+        &:before {
+          content: '(';
+        }
+        &:after {
+          content: ')';
+        }
+      }
+    }
+    .currency-name {
+    }
+  }
+}
diff --git a/teamapps-client/less/trivial-components/template-currency-single-line-short.less b/teamapps-client/less/trivial-components/template-currency-single-line-short.less
new file mode 100644
index 000000000..67ad7f27f
--- /dev/null
+++ b/teamapps-client/less/trivial-components/template-currency-single-line-short.less
@@ -0,0 +1,59 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+/*
+ *
+ *  Copyright 2016 Yann Massard (https://github.com/yamass) and other contributors
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ *
+ */
+.tr-template-currency-single-line-short {
+  padding: 5px 1px 5px 6px;
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 15px;
+  white-space: nowrap;
+  text-align: right;
+
+  .currency-code {
+    display: inline-block;
+  }
+  .currency-symbol + .currency-code {
+    color: #555;
+    min-width: 2.7em;
+    &:before {
+      content: '(';
+    }
+    &:after {
+      content: ')';
+    }
+  }
+}
diff --git a/teamapps-client/less/trivial-components/template-icon-single-line.less b/teamapps-client/less/trivial-components/template-icon-single-line.less
new file mode 100644
index 000000000..8232ff85d
--- /dev/null
+++ b/teamapps-client/less/trivial-components/template-icon-single-line.less
@@ -0,0 +1,68 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+/*
+ *
+ *  Copyright 2016 Yann Massard (https://github.com/yamass) and other contributors
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ *
+ */
+.tr-template-icon-single-line {
+  display: flex;
+  align-items: stretch;
+  padding: 1px;
+  font-size: 14px;
+  line-height: 15px;
+
+  &.empty {
+    color: gray;
+  }
+
+  .img-wrapper {
+    flex: 0 0 24px;
+    width: 24px;
+    height: 24px;
+    background-position: center;
+    background-size: cover;
+    border-radius: 2px;
+  }
+
+  .content-wrapper {
+    flex: 1 1 auto;
+    margin-left: 5px;
+    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-weight: 400;
+    line-height: 14px;
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+  }
+}
+
diff --git a/teamapps-client/less/trivial-components/tree.less b/teamapps-client/less/trivial-components/tree.less
new file mode 100644
index 000000000..52c66993c
--- /dev/null
+++ b/teamapps-client/less/trivial-components/tree.less
@@ -0,0 +1,46 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+/*
+ *
+ *  Copyright 2016 Yann Massard (https://github.com/yamass) and other contributors
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ *
+ */
+.tr-tree {
+  width: 100%;
+
+  border: @tr-border;
+  border-radius: @tr-border-radius;
+
+  .tr-component-focus();
+
+  overflow: auto;
+}
diff --git a/teamapps-client/less/trivial-components/treebox.less b/teamapps-client/less/trivial-components/treebox.less
new file mode 100644
index 000000000..117ee265e
--- /dev/null
+++ b/teamapps-client/less/trivial-components/treebox.less
@@ -0,0 +1,96 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+/*
+ *
+ *  Copyright 2016 Yann Massard (https://github.com/yamass) and other contributors
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ *
+ */
+.tr-treebox {
+
+  position: relative;
+
+  .tr-tree-entryTree {
+    flex: 1 1 300px;
+  }
+
+  .tr-tree-entry-outer-wrapper {
+    > .tr-tree-entry-and-expander-wrapper {
+      display: flex;
+      align-items: center;
+      user-select: none;
+
+      .tr-indent-spacer {
+        width: @tr-tree-indent;
+        flex: 0 0 auto;
+      }
+
+      .tr-tree-expander {
+        @tr-tree-expander-size: 15px;
+        flex: 0 0 @tr-tree-expander-size;
+        width: @tr-tree-expander-size;
+        height: @tr-tree-expander-size;
+        margin: 7px;
+      }
+
+      .tr-tree-entry {
+        flex: 1 1 auto;
+      }
+    }
+
+    &.has-children > .tr-tree-entry-and-expander-wrapper > .tr-tree-expander {
+      background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gQ3JlYXRlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIC0tPgoKPHN2ZwogICB2aWV3Qm94PSIwIDAgMTAwIDEwMCIKICAgdmVyc2lvbj0iMS4xIgogICBpZD0ic3ZnNTE2IgogICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxkZWZzCiAgICAgaWQ9ImRlZnM1MTMiIC8+CiAgPGcKICAgICBpZD0ibGF5ZXIxIj4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0iZmlsbDojMDAwMDAwO3N0cm9rZS13aWR0aDowLjI2NDU4MyIKICAgICAgIGQ9Ik0gNDAsMjAgNzAsNTAgNDAsODAgMzAsNzUgNTUsNTAgMzAsMjUiCiAgICAgICBpZD0icGF0aDIxODciIC8+CiAgPC9nPgo8L3N2Zz4K);
+      background-position: center;
+      background-repeat: no-repeat;
+      transition: transform 0.1s;
+      cursor: pointer;
+    }
+
+    &.expanded > .tr-tree-entry-and-expander-wrapper > .tr-tree-expander {
+      transform: rotate(0.25turn);
+    }
+
+    > .tr-tree-entry-children-wrapper {
+      padding-left: 0;
+      overflow-y: hidden; // especially when collapsed!
+      position: relative; // for lazy children spinner
+    }
+
+  }
+
+  &.hide-expanders .tr-tree-expander {
+    display: none;
+  }
+
+  .tr-tree-entry-and-expander-wrapper:not(.tr-selected-entry):hover {
+    background-color: var(--ta-hover-color);
+  }
+}
diff --git a/teamapps-client/less/trivial-components/trivial-components-bootstrap.less b/teamapps-client/less/trivial-components/trivial-components-bootstrap.less
new file mode 100644
index 000000000..c959a10cd
--- /dev/null
+++ b/teamapps-client/less/trivial-components/trivial-components-bootstrap.less
@@ -0,0 +1,46 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+/*
+ Copyright 2016 Yann Massard (https://github.com/yamass) and other contributors
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+.input-group .tr-input-wrapper {
+
+   &:not(:first-child) {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+   }
+   &:not(:last-child) {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+   }
+
+}
diff --git a/teamapps-client/less/trivial-components/trivial-components.less b/teamapps-client/less/trivial-components/trivial-components.less
new file mode 100644
index 000000000..35b1463d9
--- /dev/null
+++ b/teamapps-client/less/trivial-components/trivial-components.less
@@ -0,0 +1,52 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+/*
+ *
+ *  Copyright 2016 Yann Massard (https://github.com/yamass) and other contributors
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ *
+ */
+@import "variables";
+@import "common";
+@import "combobox";
+@import "tagcombobox";
+@import "treebox";
+@import "tree";
+@import "unitbox";
+@import "calendarbox";
+@import "calendarcombobox";
+@import "datetimefield";
+@import "icon-template-date";
+@import "icon-template-time";
+@import "template-icon-single-line";
+@import "template-currency-single-line-short";
+@import "template-currency-single-line-long";
+@import "template-currency-2-lines";
diff --git a/teamapps-client/less/trivial-components/unitbox.less b/teamapps-client/less/trivial-components/unitbox.less
new file mode 100644
index 000000000..4060070f7
--- /dev/null
+++ b/teamapps-client/less/trivial-components/unitbox.less
@@ -0,0 +1,95 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+.tr-unitbox {
+  min-height: @tr-input-min-height;
+  align-items: stretch;
+
+  .tr-unitbox-editor {
+    flex: 1 1 0px;
+    border: none;
+    padding: 0 6px 0 4px;
+    text-align: right;
+    outline: none;
+    background-color: transparent;
+    font-family: @tr-editor-font-family;
+    font-size: @tr-editor-font-size;
+  }
+
+  .tr-unitbox-selected-entry-and-trigger-wrapper {
+    flex: 0 0 auto;
+    display: flex;
+
+    background-color: @tr-button-bg;
+    cursor: default;
+
+    &:hover, .tr-unitbox.open & {
+      background-color: @tr-button-bg-active;
+    }
+
+    .tr-unitbox-selected-entry-wrapper {
+      flex: 0 0 auto;
+      display: flex;
+      align-items: center;
+    }
+    .tr-trigger {
+      border-left: none;
+      background-color: transparent;
+    }
+  }
+
+  &.unit-display-left {
+    flex-direction: row-reverse;
+
+    .tr-unitbox-selected-entry-and-trigger-wrapper {
+      border-right: @tr-border;
+    }
+  }
+
+  &.unit-display-right .tr-unitbox-selected-entry-and-trigger-wrapper {
+    border-left: @tr-border;
+  }
+
+  &.readonly,
+  &.disabled {
+    .tr-unitbox-editor {
+      display: block;
+    }
+    .tr-trigger:hover {
+      background-color: transparent;
+    }
+    .tr-unitbox-selected-entry-and-trigger-wrapper:hover {
+      background-color: inherit;
+    }
+  }
+
+  &.readonly {
+    .tr-unitbox-editor {
+      padding: 0;
+    }
+    .tr-unitbox-selected-entry-and-trigger-wrapper {
+      border: none;
+      background-color: transparent;
+    }
+  }
+
+  &:not(.open) .tr-dropdown {
+    display: none;
+  }
+}
diff --git a/teamapps-client/less/trivial-components/variables.less b/teamapps-client/less/trivial-components/variables.less
new file mode 100644
index 000000000..42ee3d7c1
--- /dev/null
+++ b/teamapps-client/less/trivial-components/variables.less
@@ -0,0 +1,51 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+/*
+ *
+ *  Copyright 2016 Yann Massard (https://github.com/yamass) and other contributors
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ *
+ */
+@tr-border-color: #ccc;
+@tr-border: 1px solid @tr-border-color;
+@tr-border-radius: 4px;
+@tr-input-border-focus: #66afe9;
+@tr-button-bg: rgba(0, 0, 0, 0.05);
+@tr-button-bg-active: rgba(0, 0, 0, 0.1);
+@tr-editor-font-family: sans-serif;
+@tr-editor-font-size: 14px;
+@tr-highlight-color-base: rgb(0, 120, 255);
+@tr-highlight-color: lighten(@tr-highlight-color-base, 80%, relative);
+@tr-select-color: lighten(@tr-highlight-color-base, 60%, relative);
+@tr-input-min-height: 30px;
+@tr-disabled-text-color: @tr-border-color;
+@tr-caret-width: 4px;
+@tr-tree-indent: 29px;
diff --git a/teamapps-client/less/util/animations.less b/teamapps-client/less/util/animations.less
new file mode 100644
index 000000000..2ca359214
--- /dev/null
+++ b/teamapps-client/less/util/animations.less
@@ -0,0 +1,35 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+.ta-blink {
+  animation: ta-blink 1s linear infinite;
+}
+
+.ta-blink-subtle {
+  animation: ta-blink-subtle 7s linear infinite;
+}
+
+@keyframes ta-blink {
+  50% { opacity: .1; }
+}
+
+@keyframes ta-blink-subtle {
+  15% { opacity: .1; }
+  30% { opacity: 1; }
+}
diff --git a/teamapps-client/less/util/drop-zone.less b/teamapps-client/less/util/drop-zone.less
index 95823ebaf..0c8acd965 100644
--- a/teamapps-client/less/util/drop-zone.less
+++ b/teamapps-client/less/util/drop-zone.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -25,8 +25,11 @@
     content: "\e198";
     position: absolute;
     pointer-events: none;
-    width: 100%;
-    height: 100%;
+    top: 3px;
+    left: 3px;
+    width: ~"calc(100% - 6px)";
+    height: ~"calc(100% - 6px)";
+    border-radius: 2px;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -34,7 +37,7 @@
     color: rgba(0, 0, 0, .3);
     border: 3px dashed rgba(0, 0, 0, .3);
     z-index: 1;
-    background-color: rgba(255, 255, 255, .85);
+    background-color: var(--ta-bg-color-semi-transparent);
     opacity: 0;
     transition: opacity .2s, backdrop-filter .2s;
   }
@@ -44,28 +47,26 @@
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
   }
+}
 
-  .upload-button-wrapper {
-    display: inline-block;
-    position: relative;
-    overflow: hidden;
-    border: 1px solid @input-border;
-    border-radius: @input-border-radius;
+.file-list {
+  position: relative;
+  min-height: 36px;
 
-    .file-input {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      right: 0;
-      margin: 0;
-      padding: 0;
-      font-size: 20px;
-      cursor: default;
-      opacity: 0;
-      filter: alpha(opacity=0);
-    }
+  &:empty:before {
+    .glyphicon();
+    top: 0;
+    left: 0;
+    content: "\e198";
+    position: absolute;
+    pointer-events: none;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 200%;
+    color: rgba(0, 0, 0, .3);
+    z-index: 1;
   }
 }
diff --git a/teamapps-client/less/util/glyphicon-button.less b/teamapps-client/less/util/glyphicon-button.less
index 22006d3d1..ce0febc1f 100644
--- a/teamapps-client/less/util/glyphicon-button.less
+++ b/teamapps-client/less/util/glyphicon-button.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,18 +19,18 @@
  */
 .glyphicon-button {
   padding: 7px;
-  color: fadeout(@text-color, 30%);
+  color: var(--ta-text-color-faded);
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: color .2s;
+  transition: color var(--ta-color-transition-time);
 
   &:hover {
-    color: @text-color;
+    color: var(--ta-text-color);
   }
   &.disabled {
     pointer-events: none;
-    color: @input-border;
+    color: var(--ta-input-border-color);
   }
 }
 
diff --git a/teamapps-client/less/util/page-transitions.less b/teamapps-client/less/util/page-transitions.less
new file mode 100755
index 000000000..5f6d3a7cc
--- /dev/null
+++ b/teamapps-client/less/util/page-transitions.less
@@ -0,0 +1,1316 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+/* animation sets */
+
+/* move from / to  */
+
+.pt-page-moveToLeft {
+	-webkit-animation: moveToLeft .6s ease both;
+	animation: moveToLeft .6s ease both;
+}
+
+.pt-page-moveFromLeft {
+	-webkit-animation: moveFromLeft .6s ease both;
+	animation: moveFromLeft .6s ease both;
+}
+
+.pt-page-moveToRight {
+	-webkit-animation: moveToRight .6s ease both;
+	animation: moveToRight .6s ease both;
+}
+
+.pt-page-moveFromRight {
+	-webkit-animation: moveFromRight .6s ease both;
+	animation: moveFromRight .6s ease both;
+}
+
+.pt-page-moveToTop {
+	-webkit-animation: moveToTop .6s ease both;
+	animation: moveToTop .6s ease both;
+}
+
+.pt-page-moveFromTop {
+	-webkit-animation: moveFromTop .6s ease both;
+	animation: moveFromTop .6s ease both;
+}
+
+.pt-page-moveToBottom {
+	-webkit-animation: moveToBottom .6s ease both;
+	animation: moveToBottom .6s ease both;
+}
+
+.pt-page-moveFromBottom {
+	-webkit-animation: moveFromBottom .6s ease both;
+	animation: moveFromBottom .6s ease both;
+}
+
+/* fade */
+
+.pt-page-fade {
+	-webkit-animation: fade .7s ease both;
+	animation: fade .7s ease both;
+}
+
+/* move from / to and fade */
+
+.pt-page-moveToLeftFade {
+	-webkit-animation: moveToLeftFade .7s ease both;
+	animation: moveToLeftFade .7s ease both;
+}
+
+.pt-page-moveFromLeftFade {
+	-webkit-animation: moveFromLeftFade .7s ease both;
+	animation: moveFromLeftFade .7s ease both;
+}
+
+.pt-page-moveToRightFade {
+	-webkit-animation: moveToRightFade .7s ease both;
+	animation: moveToRightFade .7s ease both;
+}
+
+.pt-page-moveFromRightFade {
+	-webkit-animation: moveFromRightFade .7s ease both;
+	animation: moveFromRightFade .7s ease both;
+}
+
+.pt-page-moveToTopFade {
+	-webkit-animation: moveToTopFade .7s ease both;
+	animation: moveToTopFade .7s ease both;
+}
+
+.pt-page-moveFromTopFade {
+	-webkit-animation: moveFromTopFade .7s ease both;
+	animation: moveFromTopFade .7s ease both;
+}
+
+.pt-page-moveToBottomFade {
+	-webkit-animation: moveToBottomFade .7s ease both;
+	animation: moveToBottomFade .7s ease both;
+}
+
+.pt-page-moveFromBottomFade {
+	-webkit-animation: moveFromBottomFade .7s ease both;
+	animation: moveFromBottomFade .7s ease both;
+}
+
+/* move to with different easing */
+
+.pt-page-moveToLeftEasing {
+	-webkit-animation: moveToLeft .7s ease-in-out both;
+	animation: moveToLeft .7s ease-in-out both;
+}
+.pt-page-moveToRightEasing {
+	-webkit-animation: moveToRight .7s ease-in-out both;
+	animation: moveToRight .7s ease-in-out both;
+}
+.pt-page-moveToTopEasing {
+	-webkit-animation: moveToTop .7s ease-in-out both;
+	animation: moveToTop .7s ease-in-out both;
+}
+.pt-page-moveToBottomEasing {
+	-webkit-animation: moveToBottom .7s ease-in-out both;
+	animation: moveToBottom .7s ease-in-out both;
+}
+
+/********************************* keyframes **************************************/
+
+/* move from / to  */
+
+@-webkit-keyframes moveToLeft {
+	from { }
+	to { -webkit-transform: translateX(-100%); }
+}
+@keyframes moveToLeft {
+	from { }
+	to { -webkit-transform: translateX(-100%); transform: translateX(-100%); }
+}
+
+@-webkit-keyframes moveFromLeft {
+	from { -webkit-transform: translateX(-100%); }
+}
+@keyframes moveFromLeft {
+	from { -webkit-transform: translateX(-100%); transform: translateX(-100%); }
+}
+
+@-webkit-keyframes moveToRight { 
+	from { }
+	to { -webkit-transform: translateX(100%); }
+}
+@keyframes moveToRight { 
+	from { }
+	to { -webkit-transform: translateX(100%); transform: translateX(100%); }
+}
+
+@-webkit-keyframes moveFromRight {
+	from { -webkit-transform: translateX(100%); }
+}
+@keyframes moveFromRight {
+	from { -webkit-transform: translateX(100%); transform: translateX(100%); }
+}
+
+@-webkit-keyframes moveToTop {
+	from { }
+	to { -webkit-transform: translateY(-100%); }
+}
+@keyframes moveToTop {
+	from { }
+	to { -webkit-transform: translateY(-100%); transform: translateY(-100%); }
+}
+
+@-webkit-keyframes moveFromTop {
+	from { -webkit-transform: translateY(-100%); }
+}
+@keyframes moveFromTop {
+	from { -webkit-transform: translateY(-100%); transform: translateY(-100%); }
+}
+
+@-webkit-keyframes moveToBottom {
+	from { }
+	to { -webkit-transform: translateY(100%); }
+}
+@keyframes moveToBottom {
+	from { }
+	to { -webkit-transform: translateY(100%); transform: translateY(100%); }
+}
+
+@-webkit-keyframes moveFromBottom {
+	from { -webkit-transform: translateY(100%); }
+}
+@keyframes moveFromBottom {
+	from { -webkit-transform: translateY(100%); transform: translateY(100%); }
+}
+
+/* fade */
+
+@-webkit-keyframes fade {
+	from { }
+	to { opacity: 0.3; }
+}
+@keyframes fade {
+	from { }
+	to { opacity: 0.3; }
+}
+
+/* move from / to and fade */
+
+@-webkit-keyframes moveToLeftFade {
+	from { }
+	to { opacity: 0.3; -webkit-transform: translateX(-100%); }
+}
+@keyframes moveToLeftFade {
+	from { }
+	to { opacity: 0.3; -webkit-transform: translateX(-100%); transform: translateX(-100%); }
+}
+
+@-webkit-keyframes moveFromLeftFade {
+	from { opacity: 0.3; -webkit-transform: translateX(-100%); }
+}
+@keyframes moveFromLeftFade {
+	from { opacity: 0.3; -webkit-transform: translateX(-100%); transform: translateX(-100%); }
+}
+
+@-webkit-keyframes moveToRightFade {
+	from { }
+	to { opacity: 0.3; -webkit-transform: translateX(100%); }
+}
+@keyframes moveToRightFade {
+	from { }
+	to { opacity: 0.3; -webkit-transform: translateX(100%); transform: translateX(100%); }
+}
+
+@-webkit-keyframes moveFromRightFade {
+	from { opacity: 0.3; -webkit-transform: translateX(100%); }
+}
+@keyframes moveFromRightFade {
+	from { opacity: 0.3; -webkit-transform: translateX(100%); transform: translateX(100%); }
+}
+
+@-webkit-keyframes moveToTopFade {
+	from { }
+	to { opacity: 0.3; -webkit-transform: translateY(-100%); }
+}
+@keyframes moveToTopFade {
+	from { }
+	to { opacity: 0.3; -webkit-transform: translateY(-100%); transform: translateY(-100%); }
+}
+
+@-webkit-keyframes moveFromTopFade {
+	from { opacity: 0.3; -webkit-transform: translateY(-100%); }
+}
+@keyframes moveFromTopFade {
+	from { opacity: 0.3; -webkit-transform: translateY(-100%); transform: translateY(-100%); }
+}
+
+@-webkit-keyframes moveToBottomFade {
+	from { }
+	to { opacity: 0.3; -webkit-transform: translateY(100%); }
+}
+@keyframes moveToBottomFade {
+	from { }
+	to { opacity: 0.3; -webkit-transform: translateY(100%); transform: translateY(100%); }
+}
+
+@-webkit-keyframes moveFromBottomFade {
+	from { opacity: 0.3; -webkit-transform: translateY(100%); }
+}
+@keyframes moveFromBottomFade {
+	from { opacity: 0.3; -webkit-transform: translateY(100%); transform: translateY(100%); }
+}
+
+/* scale and fade */
+
+.pt-page-scaleDown {
+	-webkit-animation: scaleDown .7s ease both;
+	animation: scaleDown .7s ease both;
+}
+
+.pt-page-scaleUp {
+	-webkit-animation: scaleUp .7s ease both;
+	animation: scaleUp .7s ease both;
+}
+
+.pt-page-scaleUpDown {
+	-webkit-animation: scaleUpDown .5s ease both;
+	animation: scaleUpDown .5s ease both;
+}
+
+.pt-page-scaleDownUp {
+	-webkit-animation: scaleDownUp .5s ease both;
+	animation: scaleDownUp .5s ease both;
+}
+
+.pt-page-scaleDownCenter {
+	-webkit-animation: scaleDownCenter .4s ease-in both;
+	animation: scaleDownCenter .4s ease-in both;
+}
+
+.pt-page-scaleUpCenter {
+	-webkit-animation: scaleUpCenter .4s ease-out both;
+	animation: scaleUpCenter .4s ease-out both;
+}
+
+/********************************* keyframes **************************************/
+
+/* scale and fade */
+
+@-webkit-keyframes scaleDown {
+	from { }
+	to { opacity: 0; -webkit-transform: scale(.8); }
+}
+@keyframes scaleDown {
+	from { }
+	to { opacity: 0; -webkit-transform: scale(.8); transform: scale(.8); }
+}
+
+@-webkit-keyframes scaleUp {
+	from { opacity: 0; -webkit-transform: scale(.8); }
+}
+@keyframes scaleUp {
+	from { opacity: 0; -webkit-transform: scale(.8); transform: scale(.8); }
+}
+
+@-webkit-keyframes scaleUpDown {
+	from { opacity: 0; -webkit-transform: scale(1.2); }
+}
+@keyframes scaleUpDown {
+	from { opacity: 0; -webkit-transform: scale(1.2); transform: scale(1.2); }
+}
+
+@-webkit-keyframes scaleDownUp {
+	from { }
+	to { opacity: 0; -webkit-transform: scale(1.2); }
+}
+@keyframes scaleDownUp {
+	from { }
+	to { opacity: 0; -webkit-transform: scale(1.2); transform: scale(1.2); }
+}
+
+@-webkit-keyframes scaleDownCenter {
+	from { }
+	to { opacity: 0; -webkit-transform: scale(.7); }
+}
+@keyframes scaleDownCenter {
+	from { }
+	to { opacity: 0; -webkit-transform: scale(.7); transform: scale(.7); }
+}
+
+@-webkit-keyframes scaleUpCenter {
+	from { opacity: 0; -webkit-transform: scale(.7); }
+}
+@keyframes scaleUpCenter {
+	from { opacity: 0; -webkit-transform: scale(.7); transform: scale(.7); }
+}
+
+/* rotate sides first and scale */
+
+.pt-page-rotateRightSideFirst {
+	-webkit-transform-origin: 0% 50%;
+	transform-origin: 0% 50%;
+	-webkit-animation: rotateRightSideFirst .8s both ease-in;
+	animation: rotateRightSideFirst .8s both ease-in;
+}
+.pt-page-rotateLeftSideFirst {
+	-webkit-transform-origin: 100% 50%;
+	transform-origin: 100% 50%;
+	-webkit-animation: rotateLeftSideFirst .8s both ease-in;
+	animation: rotateLeftSideFirst .8s both ease-in;
+}
+.pt-page-rotateTopSideFirst {
+	-webkit-transform-origin: 50% 100%;
+	transform-origin: 50% 100%;
+	-webkit-animation: rotateTopSideFirst .8s both ease-in;
+	animation: rotateTopSideFirst .8s both ease-in;
+}
+.pt-page-rotateBottomSideFirst {
+	-webkit-transform-origin: 50% 0%;
+	transform-origin: 50% 0%;
+	-webkit-animation: rotateBottomSideFirst .8s both ease-in;
+	animation: rotateBottomSideFirst .8s both ease-in;
+}
+
+/* flip */
+
+.pt-page-flipOutRight {
+	-webkit-transform-origin: 50% 50%;
+	transform-origin: 50% 50%;
+	-webkit-animation: flipOutRight .5s both ease-in;
+	animation: flipOutRight .5s both ease-in;
+}
+.pt-page-flipInLeft {
+	-webkit-transform-origin: 50% 50%;
+	transform-origin: 50% 50%;
+	-webkit-animation: flipInLeft .5s both ease-out;
+	animation: flipInLeft .5s both ease-out;
+}
+.pt-page-flipOutLeft {
+	-webkit-transform-origin: 50% 50%;
+	transform-origin: 50% 50%;
+	-webkit-animation: flipOutLeft .5s both ease-in;
+	animation: flipOutLeft .5s both ease-in;
+}
+.pt-page-flipInRight {
+	-webkit-transform-origin: 50% 50%;
+	transform-origin: 50% 50%;
+	-webkit-animation: flipInRight .5s both ease-out;
+	animation: flipInRight .5s both ease-out;
+}
+.pt-page-flipOutTop {
+	-webkit-transform-origin: 50% 50%;
+	transform-origin: 50% 50%;
+	-webkit-animation: flipOutTop .5s both ease-in;
+	animation: flipOutTop .5s both ease-in;
+}
+.pt-page-flipInBottom {
+	-webkit-transform-origin: 50% 50%;
+	transform-origin: 50% 50%;
+	-webkit-animation: flipInBottom .5s both ease-out;
+	animation: flipInBottom .5s both ease-out;
+}
+.pt-page-flipOutBottom {
+	-webkit-transform-origin: 50% 50%;
+	transform-origin: 50% 50%;
+	-webkit-animation: flipOutBottom .5s both ease-in;
+	animation: flipOutBottom .5s both ease-in;
+}
+.pt-page-flipInTop {
+	-webkit-transform-origin: 50% 50%;
+	transform-origin: 50% 50%;
+	-webkit-animation: flipInTop .5s both ease-out;
+	animation: flipInTop .5s both ease-out;
+}
+
+/* rotate fall */
+
+.pt-page-rotateFall {
+	-webkit-transform-origin: 0% 0%;
+	transform-origin: 0% 0%;
+	-webkit-animation: rotateFall 1s both ease-in;
+	animation: rotateFall 1s both ease-in;
+}
+
+/* rotate newspaper */
+.pt-page-rotateOutNewspaper {
+	-webkit-transform-origin: 50% 50%;
+	transform-origin: 50% 50%;
+	-webkit-animation: rotateOutNewspaper .5s both ease-in;
+	animation: rotateOutNewspaper .5s both ease-in;
+}
+.pt-page-rotateInNewspaper {
+	-webkit-transform-origin: 50% 50%;
+	transform-origin: 50% 50%;
+	-webkit-animation: rotateInNewspaper .5s both ease-out;
+	animation: rotateInNewspaper .5s both ease-out;
+}
+
+/* push */
+.pt-page-rotatePushLeft {
+	-webkit-transform-origin: 0% 50%;
+	transform-origin: 0% 50%;
+	-webkit-animation: rotatePushLeft .8s both ease;
+	animation: rotatePushLeft .8s both ease;
+}
+.pt-page-rotatePushRight {
+	-webkit-transform-origin: 100% 50%;
+	transform-origin: 100% 50%;
+	-webkit-animation: rotatePushRight .8s both ease;
+	animation: rotatePushRight .8s both ease;
+}
+.pt-page-rotatePushTop {
+	-webkit-transform-origin: 50% 0%;
+	transform-origin: 50% 0%;
+	-webkit-animation: rotatePushTop .8s both ease;
+	animation: rotatePushTop .8s both ease;
+}
+.pt-page-rotatePushBottom {
+	-webkit-transform-origin: 50% 100%;
+	transform-origin: 50% 100%;
+	-webkit-animation: rotatePushBottom .8s both ease;
+	animation: rotatePushBottom .8s both ease;
+}
+
+/* pull */
+.pt-page-rotatePullRight {
+	-webkit-transform-origin: 100% 50%;
+	transform-origin: 100% 50%;
+	-webkit-animation: rotatePullRight .5s both ease;
+	animation: rotatePullRight .5s both ease;
+}
+.pt-page-rotatePullLeft {
+	-webkit-transform-origin: 0% 50%;
+	transform-origin: 0% 50%;
+	-webkit-animation: rotatePullLeft .5s both ease;
+	animation: rotatePullLeft .5s both ease;
+}
+.pt-page-rotatePullTop {
+	-webkit-transform-origin: 50% 0%;
+	transform-origin: 50% 0%;
+	-webkit-animation: rotatePullTop .5s both ease;
+	animation: rotatePullTop .5s both ease;
+}
+.pt-page-rotatePullBottom {
+	-webkit-transform-origin: 50% 100%;
+	transform-origin: 50% 100%;
+	-webkit-animation: rotatePullBottom .5s both ease;
+	animation: rotatePullBottom .5s both ease;
+}
+
+/* fold */
+.pt-page-rotateFoldRight {
+	-webkit-transform-origin: 0% 50%;
+	transform-origin: 0% 50%;
+	-webkit-animation: rotateFoldRight .7s both ease;
+	animation: rotateFoldRight .7s both ease;
+}
+.pt-page-rotateFoldLeft {
+	-webkit-transform-origin: 100% 50%;
+	transform-origin: 100% 50%;
+	-webkit-animation: rotateFoldLeft .7s both ease;
+	animation: rotateFoldLeft .7s both ease;
+}
+.pt-page-rotateFoldTop {
+	-webkit-transform-origin: 50% 100%;
+	transform-origin: 50% 100%;
+	-webkit-animation: rotateFoldTop .7s both ease;
+	animation: rotateFoldTop .7s both ease;
+}
+.pt-page-rotateFoldBottom {
+	-webkit-transform-origin: 50% 0%;
+	transform-origin: 50% 0%;
+	-webkit-animation: rotateFoldBottom .7s both ease;
+	animation: rotateFoldBottom .7s both ease;
+}
+
+/* unfold */
+.pt-page-rotateUnfoldLeft {
+	-webkit-transform-origin: 100% 50%;
+	transform-origin: 100% 50%;
+	-webkit-animation: rotateUnfoldLeft .7s both ease;
+	animation: rotateUnfoldLeft .7s both ease;
+}
+.pt-page-rotateUnfoldRight {
+	-webkit-transform-origin: 0% 50%;
+	transform-origin: 0% 50%;
+	-webkit-animation: rotateUnfoldRight .7s both ease;
+	animation: rotateUnfoldRight .7s both ease;
+}
+.pt-page-rotateUnfoldTop {
+	-webkit-transform-origin: 50% 100%;
+	transform-origin: 50% 100%;
+	-webkit-animation: rotateUnfoldTop .7s both ease;
+	animation: rotateUnfoldTop .7s both ease;
+}
+.pt-page-rotateUnfoldBottom {
+	-webkit-transform-origin: 50% 0%;
+	transform-origin: 50% 0%;
+	-webkit-animation: rotateUnfoldBottom .7s both ease;
+	animation: rotateUnfoldBottom .7s both ease;
+}
+
+/* room walls */
+.pt-page-rotateRoomLeftOut {
+	-webkit-transform-origin: 100% 50%;
+	transform-origin: 100% 50%;
+	-webkit-animation: rotateRoomLeftOut .8s both ease;
+	animation: rotateRoomLeftOut .8s both ease;
+}
+.pt-page-rotateRoomLeftIn {
+	-webkit-transform-origin: 0% 50%;
+	transform-origin: 0% 50%;
+	-webkit-animation: rotateRoomLeftIn .8s both ease;
+	animation: rotateRoomLeftIn .8s both ease;
+}
+.pt-page-rotateRoomRightOut {
+	-webkit-transform-origin: 0% 50%;
+	transform-origin: 0% 50%;
+	-webkit-animation: rotateRoomRightOut .8s both ease;
+	animation: rotateRoomRightOut .8s both ease;
+}
+.pt-page-rotateRoomRightIn {
+	-webkit-transform-origin: 100% 50%;
+	transform-origin: 100% 50%;
+	-webkit-animation: rotateRoomRightIn .8s both ease;
+	animation: rotateRoomRightIn .8s both ease;
+}
+.pt-page-rotateRoomTopOut {
+	-webkit-transform-origin: 50% 100%;
+	transform-origin: 50% 100%;
+	-webkit-animation: rotateRoomTopOut .8s both ease;
+	animation: rotateRoomTopOut .8s both ease;
+}
+.pt-page-rotateRoomTopIn {
+	-webkit-transform-origin: 50% 0%;
+	transform-origin: 50% 0%;
+	-webkit-animation: rotateRoomTopIn .8s both ease;
+	animation: rotateRoomTopIn .8s both ease;
+}
+.pt-page-rotateRoomBottomOut {
+	-webkit-transform-origin: 50% 0%;
+	transform-origin: 50% 0%;
+	-webkit-animation: rotateRoomBottomOut .8s both ease;
+	animation: rotateRoomBottomOut .8s both ease;
+}
+.pt-page-rotateRoomBottomIn {
+	-webkit-transform-origin: 50% 100%;
+	transform-origin: 50% 100%;
+	-webkit-animation: rotateRoomBottomIn .8s both ease;
+	animation: rotateRoomBottomIn .8s both ease;
+}
+
+/* cube */
+.pt-page-rotateCubeLeftOut {
+	-webkit-transform-origin: 100% 50%;
+	transform-origin: 100% 50%;
+	-webkit-animation: rotateCubeLeftOut .6s both ease-in;
+	animation: rotateCubeLeftOut .6s both ease-in;
+}
+.pt-page-rotateCubeLeftIn {
+	-webkit-transform-origin: 0% 50%;
+	transform-origin: 0% 50%;
+	-webkit-animation: rotateCubeLeftIn .6s both ease-in;
+	animation: rotateCubeLeftIn .6s both ease-in;
+}
+.pt-page-rotateCubeRightOut {
+	-webkit-transform-origin: 0% 50%;
+	transform-origin: 0% 50%;
+	-webkit-animation: rotateCubeRightOut .6s both ease-in;
+	animation: rotateCubeRightOut .6s both ease-in;
+}
+.pt-page-rotateCubeRightIn {
+	-webkit-transform-origin: 100% 50%;
+	transform-origin: 100% 50%;
+	-webkit-animation: rotateCubeRightIn .6s both ease-in;
+	animation: rotateCubeRightIn .6s both ease-in;
+}
+.pt-page-rotateCubeTopOut {
+	-webkit-transform-origin: 50% 100%;
+	transform-origin: 50% 100%;
+	-webkit-animation: rotateCubeTopOut .6s both ease-in;
+	animation: rotateCubeTopOut .6s both ease-in;
+}
+.pt-page-rotateCubeTopIn {
+	-webkit-transform-origin: 50% 0%;
+	transform-origin: 50% 0%;
+	-webkit-animation: rotateCubeTopIn .6s both ease-in;
+	animation: rotateCubeTopIn .6s both ease-in;
+}
+.pt-page-rotateCubeBottomOut {
+	-webkit-transform-origin: 50% 0%;
+	transform-origin: 50% 0%;
+	-webkit-animation: rotateCubeBottomOut .6s both ease-in;
+	animation: rotateCubeBottomOut .6s both ease-in;
+}
+.pt-page-rotateCubeBottomIn {
+	-webkit-transform-origin: 50% 100%;
+	transform-origin: 50% 100%;
+	-webkit-animation: rotateCubeBottomIn .6s both ease-in;
+	animation: rotateCubeBottomIn .6s both ease-in;
+}
+
+/* carousel */
+.pt-page-rotateCarouselLeftOut {
+	-webkit-transform-origin: 100% 50%;
+	transform-origin: 100% 50%;
+	-webkit-animation: rotateCarouselLeftOut .8s both ease;
+	animation: rotateCarouselLeftOut .8s both ease;
+}
+.pt-page-rotateCarouselLeftIn {
+	-webkit-transform-origin: 0% 50%;
+	transform-origin: 0% 50%;
+	-webkit-animation: rotateCarouselLeftIn .8s both ease;
+	animation: rotateCarouselLeftIn .8s both ease;
+}
+.pt-page-rotateCarouselRightOut {
+	-webkit-transform-origin: 0% 50%;
+	transform-origin: 0% 50%;
+	-webkit-animation: rotateCarouselRightOut .8s both ease;
+	animation: rotateCarouselRightOut .8s both ease;
+}
+.pt-page-rotateCarouselRightIn {
+	-webkit-transform-origin: 100% 50%;
+	transform-origin: 100% 50%;
+	-webkit-animation: rotateCarouselRightIn .8s both ease;
+	animation: rotateCarouselRightIn .8s both ease;
+}
+.pt-page-rotateCarouselTopOut {
+	-webkit-transform-origin: 50% 100%;
+	transform-origin: 50% 100%;
+	-webkit-animation: rotateCarouselTopOut .8s both ease;
+	animation: rotateCarouselTopOut .8s both ease;
+}
+.pt-page-rotateCarouselTopIn {
+	-webkit-transform-origin: 50% 0%;
+	transform-origin: 50% 0%;
+	-webkit-animation: rotateCarouselTopIn .8s both ease;
+	animation: rotateCarouselTopIn .8s both ease;
+}
+.pt-page-rotateCarouselBottomOut {
+	-webkit-transform-origin: 50% 0%;
+	transform-origin: 50% 0%;
+	-webkit-animation: rotateCarouselBottomOut .8s both ease;
+	animation: rotateCarouselBottomOut .8s both ease;
+}
+.pt-page-rotateCarouselBottomIn {
+	-webkit-transform-origin: 50% 100%;
+	transform-origin: 50% 100%;
+	-webkit-animation: rotateCarouselBottomIn .8s both ease;
+	animation: rotateCarouselBottomIn .8s both ease;
+}
+
+/* sides */
+.pt-page-rotateSidesOut {
+	-webkit-transform-origin: -50% 50%;
+	transform-origin: -50% 50%;
+	-webkit-animation: rotateSidesOut .5s both ease-in;
+	animation: rotateSidesOut .5s both ease-in;
+}
+.pt-page-rotateSidesIn {
+	-webkit-transform-origin: 150% 50%;
+	transform-origin: 150% 50%;
+	-webkit-animation: rotateSidesIn .5s both ease-out;
+	animation: rotateSidesIn .5s both ease-out;
+}
+
+/* slide */
+.pt-page-rotateSlideOut {
+	-webkit-animation: rotateSlideOut 1s both ease;
+	animation: rotateSlideOut 1s both ease;
+}
+.pt-page-rotateSlideIn {
+	-webkit-animation: rotateSlideIn 1s both ease;
+	animation: rotateSlideIn 1s both ease;
+}
+
+/********************************* keyframes **************************************/
+
+/* rotate sides first and scale */
+
+@-webkit-keyframes rotateRightSideFirst {
+	0% { }
+	40% { -webkit-transform: rotateY(15deg); opacity: .8; -webkit-animation-timing-function: ease-out; }
+	100% { -webkit-transform: scale(0.8) translateZ(-200px); opacity:0; }
+}
+@keyframes rotateRightSideFirst {
+	0% { }
+	40% { -webkit-transform: rotateY(15deg); transform: rotateY(15deg); opacity: .8; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }
+	100% { -webkit-transform: scale(0.8) translateZ(-200px); transform: scale(0.8) translateZ(-200px); opacity:0; }
+}
+
+@-webkit-keyframes rotateLeftSideFirst {
+	0% { }
+	40% { -webkit-transform: rotateY(-15deg); opacity: .8; -webkit-animation-timing-function: ease-out; }
+	100% { -webkit-transform: scale(0.8) translateZ(-200px); opacity:0; }
+}
+@keyframes rotateLeftSideFirst {
+	0% { }
+	40% { -webkit-transform: rotateY(-15deg); transform: rotateY(-15deg); opacity: .8; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }
+	100% { -webkit-transform: scale(0.8) translateZ(-200px); transform: scale(0.8) translateZ(-200px); opacity:0; }
+}
+
+@-webkit-keyframes rotateTopSideFirst {
+	0% { }
+	40% { -webkit-transform: rotateX(15deg); opacity: .8; -webkit-animation-timing-function: ease-out; }
+	100% { -webkit-transform: scale(0.8) translateZ(-200px); opacity:0; }
+}
+@keyframes rotateTopSideFirst {
+	0% { }
+	40% { -webkit-transform: rotateX(15deg); transform: rotateX(15deg); opacity: .8; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }
+	100% { -webkit-transform: scale(0.8) translateZ(-200px); transform: scale(0.8) translateZ(-200px); opacity:0; }
+}
+
+@-webkit-keyframes rotateBottomSideFirst {
+	0% { }
+	40% { -webkit-transform: rotateX(-15deg); opacity: .8; -webkit-animation-timing-function: ease-out; }
+	100% { -webkit-transform: scale(0.8) translateZ(-200px); opacity:0; }
+}
+@keyframes rotateBottomSideFirst {
+	0% { }
+	40% { -webkit-transform: rotateX(-15deg); transform: rotateX(-15deg); opacity: .8; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }
+	100% { -webkit-transform: scale(0.8) translateZ(-200px); transform: scale(0.8) translateZ(-200px); opacity:0; }
+}
+
+/* flip */
+
+@-webkit-keyframes flipOutRight {
+	from { }
+	to { -webkit-transform: translateZ(-1000px) rotateY(90deg); opacity: 0.2; }
+}
+@keyframes flipOutRight {
+	from { }
+	to { -webkit-transform: translateZ(-1000px) rotateY(90deg); transform: translateZ(-1000px) rotateY(90deg); opacity: 0.2; }
+}
+
+@-webkit-keyframes flipInLeft {
+	from { -webkit-transform: translateZ(-1000px) rotateY(-90deg); opacity: 0.2; }
+}
+@keyframes flipInLeft {
+	from { -webkit-transform: translateZ(-1000px) rotateY(-90deg); transform: translateZ(-1000px) rotateY(-90deg); opacity: 0.2; }
+}
+
+@-webkit-keyframes flipOutLeft {
+	from { }
+	to { -webkit-transform: translateZ(-1000px) rotateY(-90deg); opacity: 0.2; }
+}
+@keyframes flipOutLeft {
+	from { }
+	to { -webkit-transform: translateZ(-1000px) rotateY(-90deg); transform: translateZ(-1000px) rotateY(-90deg); opacity: 0.2; }
+}
+
+@-webkit-keyframes flipInRight {
+	from { -webkit-transform: translateZ(-1000px) rotateY(90deg); opacity: 0.2; }
+}
+@keyframes flipInRight {
+	from { -webkit-transform: translateZ(-1000px) rotateY(90deg); transform: translateZ(-1000px) rotateY(90deg); opacity: 0.2; }
+}
+
+@-webkit-keyframes flipOutTop {
+	from { }
+	to { -webkit-transform: translateZ(-1000px) rotateX(90deg); opacity: 0.2; }
+}
+@keyframes flipOutTop {
+	from { }
+	to { -webkit-transform: translateZ(-1000px) rotateX(90deg); transform: translateZ(-1000px) rotateX(90deg); opacity: 0.2; }
+}
+
+@-webkit-keyframes flipInBottom {
+	from { -webkit-transform: translateZ(-1000px) rotateX(-90deg); opacity: 0.2; }
+}
+@keyframes flipInBottom {
+	from { -webkit-transform: translateZ(-1000px) rotateX(-90deg); transform: translateZ(-1000px) rotateX(-90deg); opacity: 0.2; }
+}
+
+@-webkit-keyframes flipOutBottom {
+	from { }
+	to { -webkit-transform: translateZ(-1000px) rotateX(-90deg); opacity: 0.2; }
+}
+@keyframes flipOutBottom {
+	from { }
+	to { -webkit-transform: translateZ(-1000px) rotateX(-90deg); transform: translateZ(-1000px) rotateX(-90deg); opacity: 0.2; }
+}
+
+@-webkit-keyframes flipInTop {
+	from { -webkit-transform: translateZ(-1000px) rotateX(90deg); opacity: 0.2; }
+}
+@keyframes flipInTop {
+	from { -webkit-transform: translateZ(-1000px) rotateX(90deg); transform: translateZ(-1000px) rotateX(90deg); opacity: 0.2; }
+}
+
+/* fall */
+
+@-webkit-keyframes rotateFall {
+	0% { -webkit-transform: rotateZ(0deg); }
+	20% { -webkit-transform: rotateZ(10deg); -webkit-animation-timing-function: ease-out; }
+	40% { -webkit-transform: rotateZ(17deg); }
+	60% { -webkit-transform: rotateZ(16deg); }
+	100% { -webkit-transform: translateY(100%) rotateZ(17deg); }
+}
+@keyframes rotateFall {
+	0% { -webkit-transform: rotateZ(0deg); transform: rotateZ(0deg); }
+	20% { -webkit-transform: rotateZ(10deg); transform: rotateZ(10deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }
+	40% { -webkit-transform: rotateZ(17deg); transform: rotateZ(17deg); }
+	60% { -webkit-transform: rotateZ(16deg); transform: rotateZ(16deg); }
+	100% { -webkit-transform: translateY(100%) rotateZ(17deg); transform: translateY(100%) rotateZ(17deg); }
+}
+
+/* newspaper */
+
+@-webkit-keyframes rotateOutNewspaper {
+	from { }
+	to { -webkit-transform: translateZ(-3000px) rotateZ(360deg); opacity: 0; }
+}
+@keyframes rotateOutNewspaper {
+	from { }
+	to { -webkit-transform: translateZ(-3000px) rotateZ(360deg); transform: translateZ(-3000px) rotateZ(360deg); opacity: 0; }
+}
+
+@-webkit-keyframes rotateInNewspaper {
+	from { -webkit-transform: translateZ(-3000px) rotateZ(-360deg); opacity: 0; }
+}
+@keyframes rotateInNewspaper {
+	from { -webkit-transform: translateZ(-3000px) rotateZ(-360deg); transform: translateZ(-3000px) rotateZ(-360deg); opacity: 0; }
+}
+
+/* push */
+
+@-webkit-keyframes rotatePushLeft {
+	from { }
+	to { opacity: 0; -webkit-transform: rotateY(90deg); }
+}
+@keyframes rotatePushLeft {
+	from { }
+	to { opacity: 0; -webkit-transform: rotateY(90deg); transform: rotateY(90deg); }
+}
+
+@-webkit-keyframes rotatePushRight {
+	from { }
+	to { opacity: 0; -webkit-transform: rotateY(-90deg); }
+}
+@keyframes rotatePushRight {
+	from { }
+	to { opacity: 0; -webkit-transform: rotateY(-90deg); transform: rotateY(-90deg); }
+}
+
+@-webkit-keyframes rotatePushTop {
+	from { }
+	to { opacity: 0; -webkit-transform: rotateX(-90deg); }
+}
+@keyframes rotatePushTop {
+	from { }
+	to { opacity: 0; -webkit-transform: rotateX(-90deg); transform: rotateX(-90deg); }
+}
+
+@-webkit-keyframes rotatePushBottom {
+	from { }
+	to { opacity: 0; -webkit-transform: rotateX(90deg); }
+}
+@keyframes rotatePushBottom {
+	from { }
+	to { opacity: 0; -webkit-transform: rotateX(90deg); transform: rotateX(90deg); }
+}
+
+/* pull */
+
+@-webkit-keyframes rotatePullRight {
+	from { opacity: 0; -webkit-transform: rotateY(-90deg); }
+}
+@keyframes rotatePullRight {
+	from { opacity: 0; -webkit-transform: rotateY(-90deg); transform: rotateY(-90deg); }
+}
+
+@-webkit-keyframes rotatePullLeft {
+	from { opacity: 0; -webkit-transform: rotateY(90deg); }
+}
+@keyframes rotatePullLeft {
+	from { opacity: 0; -webkit-transform: rotateY(90deg); transform: rotateY(90deg); }
+}
+
+@-webkit-keyframes rotatePullTop {
+	from { opacity: 0; -webkit-transform: rotateX(-90deg); }
+}
+@keyframes rotatePullTop {
+	from { opacity: 0; -webkit-transform: rotateX(-90deg); transform: rotateX(-90deg); }
+}
+
+@-webkit-keyframes rotatePullBottom {
+	from { opacity: 0; -webkit-transform: rotateX(90deg); }
+}
+@keyframes rotatePullBottom {
+	from { opacity: 0; -webkit-transform: rotateX(90deg); transform: rotateX(90deg); }
+}
+
+/* fold */
+
+@-webkit-keyframes rotateFoldRight {
+	from { }
+	to { opacity: 0; -webkit-transform: translateX(100%) rotateY(90deg); }
+}
+@keyframes rotateFoldRight {
+	from { }
+	to { opacity: 0; -webkit-transform: translateX(100%) rotateY(90deg); transform: translateX(100%) rotateY(90deg); }
+}
+
+@-webkit-keyframes rotateFoldLeft {
+	from { }
+	to { opacity: 0; -webkit-transform: translateX(-100%) rotateY(-90deg); }
+}
+@keyframes rotateFoldLeft {
+	from { }
+	to { opacity: 0; -webkit-transform: translateX(-100%) rotateY(-90deg); transform: translateX(-100%) rotateY(-90deg); }
+}
+
+@-webkit-keyframes rotateFoldTop {
+	from { }
+	to { opacity: 0; -webkit-transform: translateY(-100%) rotateX(90deg); }
+}
+@keyframes rotateFoldTop {
+	from { }
+	to { opacity: 0; -webkit-transform: translateY(-100%) rotateX(90deg); transform: translateY(-100%) rotateX(90deg); }
+}
+
+@-webkit-keyframes rotateFoldBottom {
+	from { }
+	to { opacity: 0; -webkit-transform: translateY(100%) rotateX(-90deg); }
+}
+@keyframes rotateFoldBottom {
+	from { }
+	to { opacity: 0; -webkit-transform: translateY(100%) rotateX(-90deg); transform: translateY(100%) rotateX(-90deg); }
+}
+
+/* unfold */
+
+@-webkit-keyframes rotateUnfoldLeft {
+	from { opacity: 0; -webkit-transform: translateX(-100%) rotateY(-90deg); }
+}
+@keyframes rotateUnfoldLeft {
+	from { opacity: 0; -webkit-transform: translateX(-100%) rotateY(-90deg); transform: translateX(-100%) rotateY(-90deg); }
+}
+
+@-webkit-keyframes rotateUnfoldRight {
+	from { opacity: 0; -webkit-transform: translateX(100%) rotateY(90deg); }
+}
+@keyframes rotateUnfoldRight {
+	from { opacity: 0; -webkit-transform: translateX(100%) rotateY(90deg); transform: translateX(100%) rotateY(90deg); }
+}
+
+@-webkit-keyframes rotateUnfoldTop {
+	from { opacity: 0; -webkit-transform: translateY(-100%) rotateX(90deg); }
+}
+@keyframes rotateUnfoldTop {
+	from { opacity: 0; -webkit-transform: translateY(-100%) rotateX(90deg); transform: translateY(-100%) rotateX(90deg); }
+}
+
+@-webkit-keyframes rotateUnfoldBottom {
+	from { opacity: 0; -webkit-transform: translateY(100%) rotateX(-90deg); }
+}
+@keyframes rotateUnfoldBottom {
+	from { opacity: 0; -webkit-transform: translateY(100%) rotateX(-90deg); transform: translateY(100%) rotateX(-90deg); }
+}
+
+/* room walls */
+
+@-webkit-keyframes rotateRoomLeftOut {
+	from { }
+	to { opacity: .3; -webkit-transform: translateX(-100%) rotateY(90deg); }
+}
+@keyframes rotateRoomLeftOut {
+	from { }
+	to { opacity: .3; -webkit-transform: translateX(-100%) rotateY(90deg); transform: translateX(-100%) rotateY(90deg); }
+}
+
+@-webkit-keyframes rotateRoomLeftIn {
+	from { opacity: .3; -webkit-transform: translateX(100%) rotateY(-90deg); }
+}
+@keyframes rotateRoomLeftIn {
+	from { opacity: .3; -webkit-transform: translateX(100%) rotateY(-90deg); transform: translateX(100%) rotateY(-90deg); }
+}
+
+@-webkit-keyframes rotateRoomRightOut {
+	from { }
+	to { opacity: .3; -webkit-transform: translateX(100%) rotateY(-90deg); }
+}
+@keyframes rotateRoomRightOut {
+	from { }
+	to { opacity: .3; -webkit-transform: translateX(100%) rotateY(-90deg); transform: translateX(100%) rotateY(-90deg); }
+}
+
+@-webkit-keyframes rotateRoomRightIn {
+	from { opacity: .3; -webkit-transform: translateX(-100%) rotateY(90deg); }
+}
+@keyframes rotateRoomRightIn {
+	from { opacity: .3; -webkit-transform: translateX(-100%) rotateY(90deg); transform: translateX(-100%) rotateY(90deg); }
+}
+
+@-webkit-keyframes rotateRoomTopOut {
+	from { }
+	to { opacity: .3; -webkit-transform: translateY(-100%) rotateX(-90deg); }
+}
+@keyframes rotateRoomTopOut {
+	from { }
+	to { opacity: .3; -webkit-transform: translateY(-100%) rotateX(-90deg); transform: translateY(-100%) rotateX(-90deg); }
+}
+
+@-webkit-keyframes rotateRoomTopIn {
+	from { opacity: .3; -webkit-transform: translateY(100%) rotateX(90deg); }
+}
+@keyframes rotateRoomTopIn {
+	from { opacity: .3; -webkit-transform: translateY(100%) rotateX(90deg); transform: translateY(100%) rotateX(90deg); }
+}
+
+@-webkit-keyframes rotateRoomBottomOut {
+	from { }
+	to { opacity: .3; -webkit-transform: translateY(100%) rotateX(90deg); }
+}
+@keyframes rotateRoomBottomOut {
+	from { }
+	to { opacity: .3; -webkit-transform: translateY(100%) rotateX(90deg); transform: translateY(100%) rotateX(90deg); }
+}
+
+@-webkit-keyframes rotateRoomBottomIn {
+	from { opacity: .3; -webkit-transform: translateY(-100%) rotateX(-90deg); }
+}
+@keyframes rotateRoomBottomIn {
+	from { opacity: .3; -webkit-transform: translateY(-100%) rotateX(-90deg); transform: translateY(-100%) rotateX(-90deg); }
+}
+
+/* cube */
+
+@-webkit-keyframes rotateCubeLeftOut {
+	0% { }
+	50% { -webkit-animation-timing-function: ease-out;  -webkit-transform: translateX(-50%) translateZ(-200px) rotateY(-45deg); }
+	100% { opacity: .3; -webkit-transform: translateX(-100%) rotateY(-90deg); }
+}
+@keyframes rotateCubeLeftOut {
+	0% { }
+	50% { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out;  -webkit-transform: translateX(-50%) translateZ(-200px) rotateY(-45deg);  transform: translateX(-50%) translateZ(-200px) rotateY(-45deg); }
+	100% { opacity: .3; -webkit-transform: translateX(-100%) rotateY(-90deg); transform: translateX(-100%) rotateY(-90deg); }
+}
+
+@-webkit-keyframes rotateCubeLeftIn {
+	0% { opacity: .3; -webkit-transform: translateX(100%) rotateY(90deg); }
+	50% { -webkit-animation-timing-function: ease-out;  -webkit-transform: translateX(50%) translateZ(-200px) rotateY(45deg); }
+}
+@keyframes rotateCubeLeftIn {
+	0% { opacity: .3; -webkit-transform: translateX(100%) rotateY(90deg); transform: translateX(100%) rotateY(90deg); }
+	50% { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out;  -webkit-transform: translateX(50%) translateZ(-200px) rotateY(45deg);  transform: translateX(50%) translateZ(-200px) rotateY(45deg); }
+}
+
+@-webkit-keyframes rotateCubeRightOut {
+	0% { }
+	50% { -webkit-animation-timing-function: ease-out; -webkit-transform: translateX(50%) translateZ(-200px) rotateY(45deg); }
+	100% { opacity: .3; -webkit-transform: translateX(100%) rotateY(90deg); }
+}
+@keyframes rotateCubeRightOut {
+	0% { }
+	50% { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-transform: translateX(50%) translateZ(-200px) rotateY(45deg); transform: translateX(50%) translateZ(-200px) rotateY(45deg); }
+	100% { opacity: .3; -webkit-transform: translateX(100%) rotateY(90deg); transform: translateX(100%) rotateY(90deg); }
+}
+
+@-webkit-keyframes rotateCubeRightIn {
+	0% { opacity: .3; -webkit-transform: translateX(-100%) rotateY(-90deg); }
+	50% { -webkit-animation-timing-function: ease-out; -webkit-transform: translateX(-50%) translateZ(-200px) rotateY(-45deg); }
+}
+@keyframes rotateCubeRightIn {
+	0% { opacity: .3; -webkit-transform: translateX(-100%) rotateY(-90deg); transform: translateX(-100%) rotateY(-90deg); }
+	50% { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-transform: translateX(-50%) translateZ(-200px) rotateY(-45deg); transform: translateX(-50%) translateZ(-200px) rotateY(-45deg); }
+}
+
+@-webkit-keyframes rotateCubeTopOut {
+	0% { }
+	50% { -webkit-animation-timing-function: ease-out; -webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg); }
+	100% { opacity: .3; -webkit-transform: translateY(-100%) rotateX(90deg); }
+}
+@keyframes rotateCubeTopOut {
+	0% {}
+	50% { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg); transform: translateY(-50%) translateZ(-200px) rotateX(45deg); }
+	100% { opacity: .3; -webkit-transform: translateY(-100%) rotateX(90deg); transform: translateY(-100%) rotateX(90deg); }
+}
+
+@-webkit-keyframes rotateCubeTopIn {
+	0% { opacity: .3; -webkit-transform: translateY(100%) rotateX(-90deg); }
+	50% { -webkit-animation-timing-function: ease-out; -webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg); }
+}
+@keyframes rotateCubeTopIn {
+	0% { opacity: .3; -webkit-transform: translateY(100%) rotateX(-90deg); transform: translateY(100%) rotateX(-90deg); }
+	50% { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg); transform: translateY(50%) translateZ(-200px) rotateX(-45deg); }
+}
+
+@-webkit-keyframes rotateCubeBottomOut {
+	0% { }
+	50% { -webkit-animation-timing-function: ease-out; -webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg); }
+	100% { opacity: .3; -webkit-transform: translateY(100%) rotateX(-90deg); }
+}
+@keyframes rotateCubeBottomOut {
+	0% { }
+	50% { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg); transform: translateY(50%) translateZ(-200px) rotateX(-45deg); }
+	100% { opacity: .3; -webkit-transform: translateY(100%) rotateX(-90deg); transform: translateY(100%) rotateX(-90deg); }
+}
+
+@-webkit-keyframes rotateCubeBottomIn {
+	0% { opacity: .3; -webkit-transform: translateY(-100%) rotateX(90deg); }
+	50% { -webkit-animation-timing-function: ease-out; -webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg); }
+}
+@keyframes rotateCubeBottomIn {
+	0% { opacity: .3; -webkit-transform: translateY(-100%) rotateX(90deg); transform: translateY(-100%) rotateX(90deg); }
+	50% { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg); transform: translateY(-50%) translateZ(-200px) rotateX(45deg); }
+}
+
+/* carousel */
+
+@-webkit-keyframes rotateCarouselLeftOut {
+	from { }
+	to { opacity: .3; -webkit-transform: translateX(-150%) scale(.4) rotateY(-65deg); }
+}
+@keyframes rotateCarouselLeftOut {
+	from { }
+	to { opacity: .3; -webkit-transform: translateX(-150%) scale(.4) rotateY(-65deg); transform: translateX(-150%) scale(.4) rotateY(-65deg); }
+}
+
+@-webkit-keyframes rotateCarouselLeftIn {
+	from { opacity: .3; -webkit-transform: translateX(200%) scale(.4) rotateY(65deg); }
+}
+@keyframes rotateCarouselLeftIn {
+	from { opacity: .3; -webkit-transform: translateX(200%) scale(.4) rotateY(65deg); transform: translateX(200%) scale(.4) rotateY(65deg); }
+}
+
+@-webkit-keyframes rotateCarouselRightOut {
+	from { }
+	to { opacity: .3; -webkit-transform: translateX(200%) scale(.4) rotateY(65deg); }
+}
+@keyframes rotateCarouselRightOut {
+	from { }
+	to { opacity: .3; -webkit-transform: translateX(200%) scale(.4) rotateY(65deg); transform: translateX(200%) scale(.4) rotateY(65deg); }
+}
+
+@-webkit-keyframes rotateCarouselRightIn {
+	from { opacity: .3; -webkit-transform: translateX(-200%) scale(.4) rotateY(-65deg); }
+}
+@keyframes rotateCarouselRightIn {
+	from { opacity: .3; -webkit-transform: translateX(-200%) scale(.4) rotateY(-65deg); transform: translateX(-200%) scale(.4) rotateY(-65deg); }
+}
+
+@-webkit-keyframes rotateCarouselTopOut {
+	from { }
+	to { opacity: .3; -webkit-transform: translateY(-200%) scale(.4) rotateX(65deg); }
+}
+@keyframes rotateCarouselTopOut {
+	from { }
+	to { opacity: .3; -webkit-transform: translateY(-200%) scale(.4) rotateX(65deg); transform: translateY(-200%) scale(.4) rotateX(65deg); }
+}
+
+@-webkit-keyframes rotateCarouselTopIn {
+	from { opacity: .3; -webkit-transform: translateY(200%) scale(.4) rotateX(-65deg); }
+}
+@keyframes rotateCarouselTopIn {
+	from { opacity: .3; -webkit-transform: translateY(200%) scale(.4) rotateX(-65deg); transform: translateY(200%) scale(.4) rotateX(-65deg); }
+}
+
+@-webkit-keyframes rotateCarouselBottomOut {
+	from { }
+	to { opacity: .3; -webkit-transform: translateY(200%) scale(.4) rotateX(-65deg); }
+}
+@keyframes rotateCarouselBottomOut {
+	from { }
+	to { opacity: .3; -webkit-transform: translateY(200%) scale(.4) rotateX(-65deg); transform: translateY(200%) scale(.4) rotateX(-65deg); }
+}
+
+@-webkit-keyframes rotateCarouselBottomIn {
+	from { opacity: .3; -webkit-transform: translateY(-200%) scale(.4) rotateX(65deg); }
+}
+@keyframes rotateCarouselBottomIn {
+	from { opacity: .3; -webkit-transform: translateY(-200%) scale(.4) rotateX(65deg); transform: translateY(-200%) scale(.4) rotateX(65deg); }
+}
+
+/* sides */
+
+@-webkit-keyframes rotateSidesOut {
+	from { }
+	to { opacity: 0; -webkit-transform: translateZ(-500px) rotateY(90deg); }
+}
+@keyframes rotateSidesOut {
+	from { }
+	to { opacity: 0; -webkit-transform: translateZ(-500px) rotateY(90deg); transform: translateZ(-500px) rotateY(90deg); }
+}
+
+@-webkit-keyframes rotateSidesIn {
+	from { opacity: 0; -webkit-transform: translateZ(-500px) rotateY(-90deg); }
+}
+@keyframes rotateSidesIn {
+	from { opacity: 0; -webkit-transform: translateZ(-500px) rotateY(-90deg); transform: translateZ(-500px) rotateY(-90deg); }
+}
+
+/* slide */
+
+@-webkit-keyframes rotateSlideOut {
+	0% { }
+	25% { opacity: .5; -webkit-transform: translateZ(-500px); }
+	75% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(-200%); }
+	100% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(-200%); }
+}
+@keyframes rotateSlideOut {
+	0% { }
+	25% { opacity: .5; -webkit-transform: translateZ(-500px); transform: translateZ(-500px); }
+	75% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(-200%); transform: translateZ(-500px) translateX(-200%); }
+	100% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(-200%); transform: translateZ(-500px) translateX(-200%); }
+}
+
+@-webkit-keyframes rotateSlideIn {
+	0%, 25% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(200%); }
+	75% { opacity: .5; -webkit-transform: translateZ(-500px); }
+	100% { opacity: 1; -webkit-transform: translateZ(0) translateX(0); }
+}
+@keyframes rotateSlideIn {
+	0%, 25% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(200%); transform: translateZ(-500px) translateX(200%); }
+	75% { opacity: .5; -webkit-transform: translateZ(-500px); transform: translateZ(-500px); }
+	100% { opacity: 1; -webkit-transform: translateZ(0) translateX(0); transform: translateZ(0) translateX(0); }
+}
+
+/* animation delay classes */
+
+.pt-page-delay100 {
+	-webkit-animation-delay: .1s;
+	animation-delay: .1s;
+}
+.pt-page-delay180 {
+	-webkit-animation-delay: .180s;
+	animation-delay: .180s;
+}
+.pt-page-delay200 {
+	-webkit-animation-delay: .2s;
+	animation-delay: .2s;
+}
+.pt-page-delay300 {
+	-webkit-animation-delay: .3s;
+	animation-delay: .3s;
+}
+.pt-page-delay400 {
+	-webkit-animation-delay: .4s;
+	animation-delay: .4s;
+}
+.pt-page-delay500 {
+	-webkit-animation-delay: .5s;
+	animation-delay: .5s;
+}
+.pt-page-delay700 {
+	-webkit-animation-delay: .7s;
+	animation-delay: .7s;
+}
+.pt-page-delay1000 {
+	-webkit-animation-delay: 1s;
+	animation-delay: 1s;
+}
diff --git a/teamapps-client/less/variables.less b/teamapps-client/less/variables.less
index dcc136c44..a43965754 100644
--- a/teamapps-client/less/variables.less
+++ b/teamapps-client/less/variables.less
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,17 +17,196 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-@default-color-transition-time: .3s;
 
-@teamapps-hover-color: rgba(0, 0, 0, 0.05);
-@teamapps-active-color: rgba(0, 0, 0, 0.1);
+@icon-font-path:          "../../node_modules/bootstrap/fonts/";
+@icon-font-name:          "glyphicons-halflings-regular";
+@icon-font-svg-id:        "glyphicons_halflingsregular";
 
-@input-border-hover: fadeout(@input-border, 30%, relative);
+@ta-color-primary: rgb(51, 122, 183);
+@ta-color-success: rgb(92, 184, 92);
+@ta-color-info: rgb(91, 192, 222);
+@ta-color-warning: rgb(255, 165, 0);
+@ta-color-danger: rgb(217, 83, 79);
 
-@flying-box-shadow: 0 3px 8px -1px rgba(0, 0, 0, .4);
+@ta-text-color: #333;
+@ta-text-color-inverted: white;
 
-@default-input-width: 180px;
+@ta-state-primary-text:             @ta-text-color-inverted;
+@ta-state-primary-text-emphasis:    darken(@ta-text-color-inverted, 10%);
+@ta-state-primary-bg:               @ta-color-primary;
+@ta-state-primary-border:           darken(spin(@ta-text-color-inverted, -10), 5%);
+
+@ta-state-success-text:             #3c763d;
+@ta-state-success-text-emphasis:    darken(#3c763d, 10%);
+@ta-state-success-bg:               #dff0d8;
+@ta-state-success-border:           darken(spin(@ta-state-success-bg, -10), 15%);
+
+@ta-state-info-text:                #31708f;
+@ta-state-info-text-emphasis:       darken(#31708f, 10%);
+@ta-state-info-bg:                  #d9edf7;
+@ta-state-info-border:              darken(spin(@ta-state-info-bg, -10), 15%);
+
+@ta-state-warning-text:             #8a6d3b;
+@ta-state-warning-text-emphasis:    darken(#8a6d3b, 10%);
+@ta-state-warning-bg:               #fcf8e3;
+@ta-state-warning-border:           darken(spin(@ta-state-warning-bg, -10), 20%);
+
+@ta-state-danger-text:              #a94442;
+@ta-state-danger-text-emphasis:     darken(#a94442, 10%);
+@ta-state-danger-bg:                #f2dede;
+@ta-state-danger-border:            darken(spin(@ta-state-danger-bg, -10), 15%);
+
+:root {
+  --ta-color-primary:         @ta-color-primary;
+  --ta-color-success:         @ta-color-success;
+  --ta-color-info:            @ta-color-info;
+  --ta-color-warning:         @ta-color-warning;
+  --ta-color-danger:          @ta-color-danger;
+
+  --ta-state-primary-text:             @ta-state-primary-text;
+  --ta-state-primary-text-emphasis:    @ta-state-primary-text-emphasis;
+  --ta-state-primary-bg:               @ta-state-primary-bg;
+  --ta-state-primary-border:           @ta-state-primary-border;
+
+  --ta-state-success-text:             @ta-state-success-text;
+  --ta-state-success-text-emphasis:    @ta-state-success-text-emphasis;
+  --ta-state-success-bg:               @ta-state-success-bg;
+  --ta-state-success-border:           @ta-state-success-border;
+
+  --ta-state-info-text:                @ta-state-info-text;
+  --ta-state-info-text-emphasis:       @ta-state-info-text-emphasis;
+  --ta-state-info-bg:                  @ta-state-info-bg;
+  --ta-state-info-border:              @ta-state-info-border;
+
+  --ta-state-warning-text:             @ta-state-warning-text;
+  --ta-state-warning-text-emphasis:    @ta-state-warning-text-emphasis;
+  --ta-state-warning-bg:               @ta-state-warning-bg;
+  --ta-state-warning-border:           @ta-state-warning-border;
+
+  --ta-state-danger-text:              @ta-state-danger-text;
+  --ta-state-danger-text-emphasis:     @ta-state-danger-text-emphasis;
+  --ta-state-danger-bg:                @ta-state-danger-bg;
+  --ta-state-danger-border:            @ta-state-danger-border;
+
+  --ta-text-color: @ta-text-color;
+  --ta-text-color-faded: fadeout(@ta-text-color, 30%);
+  --ta-text-color-inverted: @ta-text-color-inverted;
+  --ta-text-color-gray: #707070;
+  --ta-bg-color: #fff;
+  --ta-bg-color-semi-transparent: rgba(255, 255, 255, 0.8);
+  --ta-bg-color-semi-transparent-muted: rgba(220, 220, 220, 0.8);
+  --ta-bg-color-solid: #eee;
+  --ta-bg-color-disabled: #eee;
+  --ta-bg-dim-overlay: rgba(0, 0, 0, .35);
+  --ta-special-button-section-bg: rgba(173, 173, 173, .22);
+  --ta-special-button-section-border: rgba(0, 0, 0, 0.1);
+  --ta-panel-border-color: #ccc;
+  --ta-border-color-disabled: #ccc;
+  --ta-inner-border-color: rgba(0, 0, 0, 0.09);
+  --ta-inner-border-color-gradient-end: rgba(0, 0, 0, 0);
+  --ta-inner-border-color-light: rgba(255, 255, 255, .5);
+  --ta-inner-border-color-light-gradient-end: rgba(255, 255, 255, 0);
+
+  --ta-hover-color: rgba(0, 0, 0, 0.05);
+  --ta-active-color: rgba(0, 0, 0, 0.1);
+  --ta-selection-color: #99c9ff;
+
+  --ta-link-color: @ta-color-primary;
+  --ta-link-hover-color: darken(@ta-color-primary, 15%);
+  --ta-link-hover-decoration: underline;
+
+  --ta-pre-color: #333;
+
+  --ta-font-family-sans-serif:  /*"Roboto",*/ "Helvetica Neue", Helvetica, Arial, sans-serif;
+  --ta-font-family-serif:       Georgia, "Times New Roman", Times, serif;
+  --ta-font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
+  --ta-font-family-base:        var(--ta-font-family-sans-serif);
+
+  --ta-font-size:               13px;
+  --ta-font-size-small:         0.85em;
+
+  --ta-font-weight-normal:      400;
+  --ta-font-weight-bold:        700;
+  --ta-font-weight-light:        200;
+
+  --ta-font-size-h1:            2.55em;
+  --ta-font-size-h2:            2.15em;
+  --ta-font-size-h3:            1.7em;
+  --ta-font-size-h4:            1.25em;
+  --ta-font-size-h5:            1em;
+  --ta-font-size-h6:            0.85em;
+
+  --ta-headings-font-family:    inherit;
+  --ta-headings-font-weight:    500;
+  --ta-headings-line-height:    1.1;
+  --ta-headings-color:          inherit;
+
+  --ta-line-height: 1.428571429;
+  --ta-line-height-computed: calc(var(--ta-line-height) * var(--ta-font-size));
+  --ta-half-line-height-computed: calc(var(--ta-line-height-computed) / 2);
+
+  --ta-padding-base-vertical:     4px;
+  --ta-padding-base-horizontal:   5px;
+
+  --ta-border-radius:        3px;
+  --ta-border-radius-small:       3px;
+
+  --ta-caret-size:          4px;
+
+  //== Buttons
+  --ta-btn-font-weight:                var(--ta-font-weight-normal);
+  --ta-btn-default-border:             var(--ta-panel-border-color);
+  --ta-btn-default-bg:                 var(--ta-bg-color);
+  --ta-btn-border-radius-base:         var(--ta-border-radius);
+
+
+  //== Forms
+  --ta-input-bg:                       var(--ta-bg-color);
+  --ta-input-bg-disabled:              var(--ta-bg-color-disabled);
+  --ta-input-border-color:             var(--ta-panel-border-color);
+  --ta-input-border-radius:            var(--ta-border-radius);
+  --ta-input-border-focus:             #66afe9;
+  --ta-input-height:                   calc(var(--ta-line-height-computed) + var(--ta-padding-base-vertical) * 2 + 2px);
+  --ta-input-default-width:            180px;
+  --ta-input-color:                    var(--ta-text-color);
+  --ta-input-color-placeholder:        #999;
+
+
+  //== Misc.
+  --ta-cursor-disabled:                not-allowed;
+
+  --ta-panel-gap:     6px;
+  --ta-tab-button-height: 23px;
+  --ta-resize-bar-size: var(--ta-panel-gap);
+  --ta-resize-square-handle-size: 10px;
+
+  --ta-box-shadown-color: rgba(0, 0, 0, .3);
+  --ta-box-shadow-base: 0 1px 4px var(--ta-box-shadown-color);
+  --ta-box-shadow-large: 0 3px 8px -1px var(--ta-box-shadown-color);
+
+  --ta-color-transition-time: .3s;
+
+  --ta-zindex-floating-component: 500;
+  --ta-zindex-window:             1000;
+  --ta-zindex-dropdown:           2000;
+  --ta-zindex-tooltip:            10000;
+
+  --ta-tooltip-arrow-size: 5px;
+
+  //== Component-Specific
+  --ta-calendar-grid-border-color: #ECECEC;
+  --ta-calendar-grid-non-business-bg-color: #d7d7d7;
+
+  --ta-calendar-day-occupation-background-circle-color: #d7d7d755;
+  --ta-calendar-day-occupation-today-bg: #f8d9ac;
+
+  // == button-style-item
+  --ta-3d-button-gradient: linear-gradient(to bottom, #ffffff 0%,#fbfbfc 62%,#f7f8f9 84%,#f5f6f7 94%,#edeff1 100%);
+  --ta-3d-button-gradient-lowered: linear-gradient(to bottom, #fafafa 0%, #fbfbfc 62%, #f7f8f9 84%, #f5f6f7 94%, #edeff1 100%);
+  --ta-glow-gradient: linear-gradient(to bottom, #feeeac 0%,#fee5a6 7%,#fee7a8 92%,#fef4b0 97%,#fef7b4 100%);
+  --ta-glow-gradient-lowered: linear-gradient(to bottom, #fef7b4 0%,#fef4b0 7%,#fee7a8 92%,#fee5a6 97%,#feeeac 100%);
+  --ta-glow-border-color: lighten(#C19344, 30%);
+
+}
 
-@maximized-shadow-color: rgba(0, 0, 0, .4);
 
-@direct-transparency-alpha: 0.82; // TODO search for 0.72 and replace
diff --git a/teamapps-client/package.json b/teamapps-client/package.json
index 6d8e36c34..049275a1a 100644
--- a/teamapps-client/package.json
+++ b/teamapps-client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "teamapps-client",
-  "version": "1.0.0",
+  "version": "0.9.208-SNAPSHOT",
   "description": "teamapps",
   "author": "TeamApps.org",
   "main": "dist/js/main.js",
@@ -11,113 +11,157 @@
     "test": "test"
   },
   "scripts": {
-    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --mode development --host 0.0.0.0",
+    "sync-pom-version": "sync-pom-version --use-yarn",
+    "dev": "webpack-dev-server --inline --progress --config js-build/webpack.dev.conf.js --mode development --host 0.0.0.0",
+    "dev2": "webpack-dev-server --inline --progress --config js-build/webpack.config.js --mode development --host 0.0.0.0",
     "worker": "webpack --config ts/worker/webpack.conf.js --mode production",
     "start": "yarn run dev",
-    "unit": "jest --config test/unit/jest.conf.js --coverage",
+    "unit": "jest",
     "test": "yarn run unit",
-    "build": "cross-env webpack -p --config build/webpack.prod.conf.js --mode production"
+    "build": "cross-env webpack -p --config js-build/webpack.prod.conf.js --mode production",
+    "stats": "cross-env webpack -p --config js-build/webpack.prod.conf.js --mode production --json > stats.json",
+    "report": "cross-env npm_config_report=true webpack -p --config js-build/webpack.prod.conf.js --mode production"
   },
   "devDependencies": {
-    "autoprefixer": "latest",
+    "@types/canvas-gauges": "^2.1.1",
+    "@types/d3": "5.x",
+    "@types/jquery": "^3.3.38",
+    "@types/jqueryui": "1.x",
+    "@types/json-stable-stringify": "^1.0.32",
+    "@types/leaflet": "^1.4.6",
+    "@types/leaflet-draw": "^1.0.0",
+    "@types/leaflet.heat": "^0.2.0",
+    "@types/loglevel": "^1.6.3",
+    "@types/md5": "^2.1.32",
+    "@types/moment-timezone": "^0.5.4",
+    "@types/mustache": "^0.8.30",
+    "@types/node": "^12.6.6",
+    "@types/nouislider": "^9.0.4",
+    "@types/slick-carousel": "^1.6.32",
+    "@types/slickgrid": "^2.1.32",
+    "@types/wnumb": "^1.0.28",
+    "@types/youtube": "^0.0.38",
+    "autoprefixer": "^9.6.1",
     "awesome-typescript-loader": "^5.0.0",
     "bower": "1.x",
-    "clean-webpack-plugin": "^0.1.19",
-    "compression-webpack-plugin": "^1.1.8",
-    "copy-webpack-plugin": "^4.4.2",
+    "clean-webpack-plugin": "^3.0.0",
+    "compression-webpack-plugin": "^3.0.0",
+    "copy-webpack-plugin": "^5.0.3",
     "cross-env": "^5.1.4",
-    "css-loader": "^0.28.11",
+    "css-loader": "^3.0.0",
+    "esbuild": "^0.25.1",
+    "esbuild-loader": "^4.3.0",
     "extract-text-webpack-plugin": "^3.0.2",
-    "file-loader": "^1.1.11",
+    "file-loader": "^4.0.0",
     "friendly-errors-webpack-plugin": "^1.6.1",
     "html-webpack-plugin": "^3.2.0",
-    "jasmine-core": "^2.3.4",
-    "less": "3.9.0",
-    "less-loader": "^4.1.0",
-    "mini-css-extract-plugin": "^0.4.0",
-    "multipipe": "latest",
-    "node-notifier": "^5.2.1",
-    "optimize-css-assets-webpack-plugin": "^4.0.1",
-    "ora": "^2.0.0",
-    "postcss-loader": "^2.1.5",
-    "raw-loader": "^0.5.1",
+    "jasmine-core": "^3.4.0",
+    "jest": "^26.5.3",
+    "less": "^3.11.1",
+    "less-loader": "^6.1.0",
+    "mini-css-extract-plugin": "^0.8.0",
+    "node-notifier": "^8.0.1",
+    "optimize-css-assets-webpack-plugin": "^5.0.3",
+    "ora": "^3.4.0",
+    "postcss-loader": "^3.0.0",
+    "raw-loader": "^3.0.0",
     "source-map-loader": "^0.2.3",
-    "style-loader": "^0.20.2",
-    "tslint": "5.x",
+    "style-loader": "^0.23.1",
+    "sync-pom-version-to-package": "^1.6.1",
+    "terser-webpack-plugin": "^1.3.0",
+    "ts-loader": "^6.0.4",
+    "tslint": "^5.18.0",
     "tslint-loader": "^3.5.3",
-    "typescript": "2.9.2",
-    "uglifyjs-webpack-plugin": "^1.2.5",
-    "url-loader": "^1.0.1",
-    "webpack": "^4.22.0",
-    "webpack-cli": "^3.1.2",
-    "webpack-dev-server": "^3.1.9",
+    "typescript": "~4.5.0",
+    "url-loader": "^2.0.1",
+    "webpack": "^4.47.0",
+    "webpack-bundle-analyzer": "^4.3.0",
+    "webpack-cli": "^3.3.6",
+    "webpack-dev-server": "^3.7.2",
     "webpack-merge": "^4.1.4",
     "worker-loader": "2.0.0"
   },
   "dependencies": {
-    "@types/bootstrap-notify": "^3.1.33",
-    "@types/canvas-gauges": "^2.1.1",
-    "@types/ckeditor": "0.x",
-    "@types/d3": "5.x",
-    "@types/jquery": "3.3.2",
-    "@types/jqueryui": "1.x",
-    "@types/json-stable-stringify": "^1.0.32",
-    "@types/leaflet": "^1.2.5",
-    "@types/leaflet.heat": "^0.2.0",
-    "@types/loglevel": "^1.5.3",
-    "@types/md5": "^2.1.32",
-    "@types/moment-timezone": "^0.5.4",
-    "@types/mustache": "^0.8.30",
-    "@types/nouislider": "^9.0.4",
-    "@types/pako": "^1.0.0",
-    "@types/quill": "^1.3.6",
-    "@types/slick-carousel": "^1.6.32",
-    "@types/slickgrid": "2.x",
-    "@types/tinymce": "^4.5.16",
-    "@types/wnumb": "^1.0.28",
-    "@types/youtube": "^0.0.32",
-    "animate.css": "^3.6.1",
-    "bootstrap": "3.x",
-    "bootstrap-notify": "^3.1.3",
+    "@fullcalendar/core": "4.4.2",
+    "@fullcalendar/daygrid": "4.4.2",
+    "@fullcalendar/interaction": "4.4.2",
+    "@fullcalendar/moment": "4.4.2",
+    "@fullcalendar/moment-timezone": "4.4.2",
+    "@fullcalendar/timegrid": "4.4.2",
+    "@popperjs/core": "^2.6.0",
+    "@tanstack/virtual-core": "^3.13.11",
+    "@turf/circle": "^6.5.0",
+    "@types/jest": "^26.0.22",
+    "@types/luxon": "^1.25.0",
+    "animate.css": "^4.1.0",
+    "autolinker": "^3.11.1",
+    "axios": "^0.27.2",
+    "bootstrap": "^3.4.1",
     "canvas-gauges": "^2.1.5",
-    "ckeditor": "4.x",
-    "d3": "5.x",
+    "color-rgba": "^2.1.1",
+    "d3": "^5.9.7",
+    "d3-flextree": "^2.1.1",
+    "d3-luxon": "^1.0.2",
+    "d3-voronoi": "^1.1.4",
     "d3v3": "npm:d3@3.x",
     "exports-loader": "^0.7.0",
-    "fullcalendar": "^3.9.0",
-    "jquery": "3.x",
+    "image-layout": "^0.4.1",
+    "jquery": "^3.5.1",
     "jquery-ui": "^1.12.1",
     "json-stable-stringify": "^1.0.1",
+    "jsqr-es6": "^1.2.0-3",
     "jstz": "^2.0.0",
-    "leaflet": "^1.3.1",
+    "leaflet": "^1.5.1",
+    "leaflet-draw": "^1.0.4",
     "leaflet.heat": "^0.2.0",
     "leaflet.markercluster": "^1.3.0",
-    "loglevel": "1.x",
+    "levenshtein": "^1.0.5",
+    "loglevel": "1.6.3",
+    "luxon": "^1.25.0",
+    "maplibre-gl": "^5.6.1",
     "md5": "^2.2.1",
-    "mediaelement": "4.2.9",
+    "mediaelement": "^4.2.16",
+    "mediasoup-client": "^3.6.28",
     "minimatch": "^3.0.4",
     "moment": "^2.21.0",
-    "moment-jdateformatparser": "^1.1.0",
-    "moment-timezone": "^0.5.14",
-    "mustache": "^2.3.0",
-    "nouislider": "^11.1.0",
+    "moment-timezone": "^0.5.26",
+    "mustache": "^3.0.1",
+    "nosleep.js": "^0.12.0",
+    "pdfjs-dist": "^5.0.375",
     "pickr-widget": "0.3.1",
-    "popper.js": "^1.14.4",
-    "quill": "1.x",
-    "shaka-player": "2.x",
+    "place-to": "^0.1.2",
+    "preact": "^10.5.7",
+    "react-jsx-parser": "^1.28.1",
+    "resize-observer-polyfill": "^1.5.1",
+    "seamless-scroll-polyfill": "^2.3.4",
+    "shaka-player": "^4.13.0",
     "slick-carousel": "^1.8.1",
-    "slickgrid": "https://github.com/yamass/SlickGrid.git#d8ed005670faae0635ec5abad2f5ed20bf454812",
-    "tiny-slider": "^2.8.8",
-    "tinymce": "^4.7.13",
-    "tinymce-i18n": "^18.5.8",
-    "tooltip.js": "^1.3.0",
-    "trivial-components": "0.3.23",
+    "slickgrid": "yamass/SlickGrid",
+    "socket.io-client": "^4.5.1",
+    "terra-draw": "^1.10.0",
+    "terra-draw-maplibre-gl-adapter": "^1.1.1",
+    "tinymce": "5.10.5",
+    "tinymce-i18n": "^18.12.25",
+    "ts-jest": "^26.5.4",
+    "tslib": "^2.3.1",
+    "typeface-roboto": "^0.0.54",
+    "ulp": "^1.0.1",
+    "voice-activity-detection": "^0.0.5",
     "webui-popover": "^1.2.18",
     "wnumb": "^1.1.0"
   },
+  "comments": {
+    "axios": "mediasoup v3",
+    "mediasoup-client": "mediasoup v3",
+    "socket.io-client": "mediasoup v3"
+  },
   "engines": {
     "node": ">= 7.0.0",
     "npm": ">= 5.0.0",
     "yarn": ">= 1.3.2"
-  }
+  },
+  "browserslist": [
+    "last 2 version",
+    "> 1%"
+  ]
 }
diff --git a/teamapps-client/pom.xml b/teamapps-client/pom.xml
index 59c818603..8a71eb8ff 100644
--- a/teamapps-client/pom.xml
+++ b/teamapps-client/pom.xml
@@ -3,7 +3,7 @@
     <parent>
         <artifactId>teamapps</artifactId>
         <groupId>org.teamapps</groupId>
-        <version>0.9.8-SNAPSHOT</version>
+        <version>0.9.208-SNAPSHOT</version>
     </parent>
     <modelVersion>4.0.0</modelVersion>
 
@@ -39,17 +39,13 @@
             <groupId>commons-io</groupId>
             <artifactId>commons-io</artifactId>
         </dependency>
-        <dependency>
-            <groupId>net.lingala.zip4j</groupId>
-            <artifactId>zip4j</artifactId>
-        </dependency>
     </dependencies>
 
     <build>
         <plugins>
             <plugin>
                 <artifactId>maven-clean-plugin</artifactId>
-                <version>2.6.1</version>
+                <version>3.4.0</version>
                 <configuration>
                     <filesets>
                         <fileset>
@@ -61,10 +57,10 @@
             <plugin>
                 <groupId>com.github.eirslett</groupId>
                 <artifactId>frontend-maven-plugin</artifactId>
-                <version>1.6</version>
+                <version>1.15.1</version>
                 <configuration>
-                    <nodeVersion>v10.12.0</nodeVersion>
-                    <yarnVersion>v1.5.1</yarnVersion>
+                    <nodeVersion>v22.11.0</nodeVersion>
+                    <yarnVersion>v1.22.22</yarnVersion>
                 </configuration>
                 <executions>
                     <execution>
@@ -79,6 +75,15 @@
                             <goal>yarn</goal>
                         </goals>
                     </execution>
+                    <execution>
+                        <id>sync version to package.json</id>
+                        <goals>
+                            <goal>yarn</goal>
+                        </goals>
+                        <configuration>
+                            <arguments>sync-pom-version</arguments>
+                        </configuration>
+                    </execution>
                     <execution>
                         <id>webpack</id>
                         <goals>
@@ -88,11 +93,20 @@
                             <arguments>build</arguments>
                         </configuration>
                     </execution>
+                    <execution>
+                        <id>test</id>
+                        <goals>
+                            <goal>yarn</goal>
+                        </goals>
+                        <configuration>
+                            <arguments>test</arguments>
+                        </configuration>
+                    </execution>
                 </executions>
             </plugin>
             <plugin>
                 <artifactId>maven-assembly-plugin</artifactId>
-                <version>${maven-assembly-plugin-version}</version>
+                <version>3.7.1</version>
                 <executions>
                     <execution>
                         <id>create-project-bundle</id>
@@ -106,14 +120,14 @@
                             </descriptors>
                             <appendAssemblyId>false</appendAssemblyId>
                             <finalName>teamapps-client</finalName>
+                            <attach>false</attach>
                         </configuration>
                     </execution>
                 </executions>
             </plugin>
             <plugin>
-                <groupId>org.apache.maven.plugins</groupId>
                 <artifactId>maven-antrun-plugin</artifactId>
-                <version>1.8</version>
+                <version>3.1.0</version>
                 <executions>
                     <execution>
                         <id>default-cli</id>
@@ -127,16 +141,33 @@
                             <goal>run</goal>
                         </goals>
                     </execution>
+                    <execution>
+                        <id>copy-zip-to-resources</id>
+                        <phase>process-resources</phase>
+                        <configuration>
+                            <target>
+                                <copy todir="${project.build.outputDirectory}">
+                                    <fileset dir="${project.build.directory}">
+                                        <include name="teamapps-client.zip*" />
+                                    </fileset>
+                                </copy>
+                            </target>
+                        </configuration>
+                        <goals>
+                            <goal>run</goal>
+                        </goals>
+                    </execution>
                 </executions>
             </plugin>
+            <plugin>
+                <artifactId>maven-jar-plugin</artifactId>
+                <version>3.4.2</version>
+            </plugin>
         </plugins>
 
         <resources>
             <resource>
-                <directory>target</directory>
-                <includes>
-                    <include>teamapps-client*.zip*</include>
-                </includes>
+                <directory>src/main/resources</directory>
             </resource>
         </resources>
     </build>
diff --git a/teamapps-client/resources/backgrounds/dark-bl.jpg b/teamapps-client/resources/backgrounds/dark-bl.jpg
new file mode 100644
index 000000000..daabbfec2
Binary files /dev/null and b/teamapps-client/resources/backgrounds/dark-bl.jpg differ
diff --git a/teamapps-client/src/main/java/org/teamapps/client/ClientCodeExtractor.java b/teamapps-client/src/main/java/org/teamapps/client/ClientCodeExtractor.java
index 996f3b476..8f751df6f 100644
--- a/teamapps-client/src/main/java/org/teamapps/client/ClientCodeExtractor.java
+++ b/teamapps-client/src/main/java/org/teamapps/client/ClientCodeExtractor.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,17 +19,20 @@
  */
 package org.teamapps.client;
 
-import net.lingala.zip4j.core.ZipFile;
+import org.apache.commons.io.FileUtils;
 import org.apache.commons.io.IOUtils;
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
 
-import java.io.File;
-import java.io.FileOutputStream;
-import java.io.IOException;
-import java.io.InputStream;
+import java.io.*;
 import java.net.URL;
+import java.nio.charset.StandardCharsets;
+import java.nio.file.Files;
+import java.nio.file.attribute.FileTime;
+import java.time.Instant;
 import java.util.Objects;
+import java.util.zip.ZipEntry;
+import java.util.zip.ZipInputStream;
 
 public class ClientCodeExtractor {
 
@@ -38,10 +41,11 @@ public class ClientCodeExtractor {
 
 	private static final String TEAMAPPS_CLIENT_FILE_NAME = "teamapps-client.zip";
 	private static final String TEAMAPPS_CLIENT_CHECKSUM_FILE_NAME = "teamapps-client.zip.MD5";
+	public static final String TEAMAPPS_CLIENT_CHECKSUM_RESOURCE_NAME = "/" + TEAMAPPS_CLIENT_CHECKSUM_FILE_NAME;
 
 	public static void initializeWebserverDirectory(File webAppDirectory) throws IOException {
 		File currentlyDeployedChecksumFile = new File(webAppDirectory, TEAMAPPS_CLIENT_CHECKSUM_FILE_NAME);
-		String currentlyDeployedArtifactChecksum = currentlyDeployedChecksumFile.exists() ? IOUtils.toString(currentlyDeployedChecksumFile.toURI()).trim() : null;
+		String currentlyDeployedArtifactChecksum = currentlyDeployedChecksumFile.exists() ? read(currentlyDeployedChecksumFile) : null;
 
 		String[] currentlyDeployedFiles = webAppDirectory.list((dir, name) -> !name.startsWith("."));
 		if (currentlyDeployedArtifactChecksum == null && currentlyDeployedFiles != null && currentlyDeployedFiles.length > 0) {
@@ -51,55 +55,101 @@ public static void initializeWebserverDirectory(File webAppDirectory) throws IOE
 		}
 
 		URL checksumResourceUrl = ClientCodeExtractor.class.getResource("/" + TEAMAPPS_CLIENT_CHECKSUM_FILE_NAME);
-		String artifactChecksum = checksumResourceUrl != null ? IOUtils.toString(checksumResourceUrl).trim() : null;
+		String artifactChecksum = checksumResourceUrl != null ? IOUtils.toString(checksumResourceUrl, StandardCharsets.UTF_8).trim() : null;
 
 		LOGGER.info("Checksum of currently deployed artifact (" + webAppDirectory.getAbsolutePath() + "): " + currentlyDeployedArtifactChecksum);
 		LOGGER.info("Checksum of executed artifact: " + artifactChecksum);
 
 		if (!Objects.equals(currentlyDeployedArtifactChecksum, artifactChecksum)) {
-			overwriteWebappDirectory(webAppDirectory, currentlyDeployedChecksumFile, checksumResourceUrl);
+			overwriteWebappDirectory(webAppDirectory, currentlyDeployedChecksumFile);
 		} else {
 			LOGGER.info("Checksum has not changed. Nothing to do.");
 		}
 	}
 
-	private static void overwriteWebappDirectory(File webAppDirectory, File currentlyDeployedChecksumFile, URL checksumResourceUrl) throws IOException {
+	private static String read(File currentlyDeployedChecksumFile) throws IOException {
+		try (FileInputStream input = new FileInputStream(currentlyDeployedChecksumFile)) {
+			return IOUtils.toString(input, StandardCharsets.UTF_8).trim();
+		}
+	}
+
+	private static void overwriteWebappDirectory(File webAppDirectory, File currentlyDeployedChecksumFile) throws IOException {
 		if (webAppDirectory.exists()) {
-			boolean deleted = webAppDirectory.delete();
-			if (!deleted) {
-				LOGGER.error("Could not delete webapp directory!");
-			}
+			FileUtils.deleteDirectory(webAppDirectory);
 		}
 		webAppDirectory.mkdirs();
 
 		File tempFile = File.createTempFile("teamapps-client", "zip");
 		try (InputStream in = ClientCodeExtractor.class.getResourceAsStream("/" + TEAMAPPS_CLIENT_FILE_NAME);
-		     FileOutputStream out = new FileOutputStream(tempFile);) {
+		     FileOutputStream out = new FileOutputStream(tempFile)) {
 			LOGGER.info("Extracting " + TEAMAPPS_CLIENT_FILE_NAME + " from classpath to temp file: " + tempFile.getAbsolutePath());
 			IOUtils.copy(in, out);
 		}
 
 		LOGGER.info("Unzipping " + tempFile.getAbsolutePath() + " to " + webAppDirectory.getAbsolutePath());
 		unzipFile(tempFile, webAppDirectory);
-		try (InputStream in = checksumResourceUrl.openStream();
-		     FileOutputStream out = new FileOutputStream(currentlyDeployedChecksumFile)) {
+		String newChecksum = readResourceAsStringOrNull(TEAMAPPS_CLIENT_CHECKSUM_RESOURCE_NAME);
+		try (FileOutputStream out = new FileOutputStream(currentlyDeployedChecksumFile)) {
 			LOGGER.info("Writing checksum to " + currentlyDeployedChecksumFile.getAbsolutePath());
-			IOUtils.copy(in, out);
+			IOUtils.write(newChecksum, out, StandardCharsets.UTF_8);
+		}
+	}
+
+	private static void unzipFile(File zipFile, File destDir) throws IOException {
+		Objects.requireNonNull(zipFile);
+		Objects.requireNonNull(destDir);
+		createDirIfNotExists(destDir);
+
+		byte[] buffer = new byte[1024];
+		try (ZipInputStream zis = new ZipInputStream(new FileInputStream(zipFile))) {
+			ZipEntry zipEntry = zis.getNextEntry();
+			while (zipEntry != null) {
+				while (zipEntry != null) {
+					File destFile = new File(destDir, zipEntry.getName());
+					String destDirPath = destDir.getCanonicalPath();
+					String destFilePath = destFile.getCanonicalPath();
+					if (!destFilePath.startsWith(destDirPath + File.separator)) {
+						// Prevent zip slip! See https://snyk.io/research/zip-slip-vulnerability
+						throw new IOException("Entry is outside of the target dir: " + zipEntry.getName());
+					}
+					if (zipEntry.isDirectory()) {
+						createDirIfNotExists(destFile);
+					} else {
+						File parent = destFile.getParentFile();
+						createDirIfNotExists(parent);
+						FileOutputStream fos = new FileOutputStream(destFile);
+						int len;
+						while ((len = zis.read(buffer)) > 0) {
+							fos.write(buffer, 0, len);
+						}
+						fos.close();
+					}
+					zipEntry = zis.getNextEntry();
+				}
+			}
+			zis.closeEntry();
+		}
+
+		Files.setLastModifiedTime(destDir.toPath().resolve("index.html"), FileTime.from(Instant.now()));
+	}
+
+	private static void createDirIfNotExists(File dir) throws IOException {
+		if (!dir.isDirectory() && !dir.mkdirs()) {
+			throw new IOException("Failed to create directory " + dir);
 		}
 	}
 
-	private static boolean unzipFile(File file, File destinationDir) {
-		try {
-			if (file == null || !file.exists() || destinationDir == null || !destinationDir.isDirectory()) {
-				return false;
+	static String readResourceAsStringOrNull(String resourceName) {
+		ClassLoader classLoader = ClassLoader.getSystemClassLoader();
+		try (InputStream is = classLoader.getResourceAsStream(resourceName)) {
+			if (is != null) {
+				return IOUtils.toString(is, StandardCharsets.UTF_8);
+			} else {
+				return null;
 			}
-			ZipFile zipFile = new ZipFile(file);
-			zipFile.extractAll(destinationDir.getAbsolutePath());
-			return true;
-		} catch (Exception e) {
-			e.printStackTrace();
+		} catch (IOException e) {
+			return null;
 		}
-		return false;
 	}
 
 }
diff --git a/teamapps-client/start-dev-server.sh b/teamapps-client/start-dev-server.sh
index 2231d26a8..85720fef4 100755
--- a/teamapps-client/start-dev-server.sh
+++ b/teamapps-client/start-dev-server.sh
@@ -14,14 +14,6 @@ if [ ! -z "$1" ]
   	export appServerUrl=$1
 fi
 
-if [ -z "$appServerUrl" ]
-  then
-  	export appServerUrl="http://localhost:8080"
-    echo "appServerUrl is not set! Setting to default: " $appServerUrl
-  else
-  	echo "appServerUrl set to " $appServerUrl
-fi
-
 export PORT=${2:-9000}
 echo "Dev server will be available on port " $PORT " or higher if already in use...";
 
diff --git a/teamapps-client/test-harness.html b/teamapps-client/test-harness.html
new file mode 100644
index 000000000..56e534261
--- /dev/null
+++ b/teamapps-client/test-harness.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10, user-scalable=yes">
+    <title></title>
+
+    <script>
+		(function () {
+			window.$ = undefined;
+			window.addEventListener('load', function () {
+				new teamapps.UiTestHarness();
+			});
+		})();
+    </script>
+
+</head>
+<body>
+</body>
+</html>
\ No newline at end of file
diff --git a/teamapps-client/ts/__tests__/DateSuggestionEngine.test.ts b/teamapps-client/ts/__tests__/DateSuggestionEngine.test.ts
new file mode 100644
index 000000000..2728ee894
--- /dev/null
+++ b/teamapps-client/ts/__tests__/DateSuggestionEngine.test.ts
@@ -0,0 +1,259 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+/*
+ *
+ *  Copyright 2016 Yann Massard (https://github.com/yamass) and other contributors
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ *  
+ */
+
+import {
+	DateSuggestionEngine,
+	getYearMonthDayOrderFromDateFormat
+} from "../modules/formfield/datetime/DateSuggestionEngine";
+import { LocalDateTime } from "../modules/datetime/LocalDateTime";
+
+
+describe('TeamApps.extractAllPossibleDateFragmentCombinations', function () {
+	it('returns suggestions for the next week if the input is empty', function () {
+		expect(new DateSuggestionEngine({preferredYearMonthDayOrder: "YMD"})
+			.generateSuggestions("", LocalDateTime.fromISO("2015-01-27"))).toEqual([
+			LocalDateTime.fromISO("2015-01-27"),
+			LocalDateTime.fromISO("2015-01-28"),
+			LocalDateTime.fromISO("2015-01-29"),
+			LocalDateTime.fromISO("2015-01-30"),
+			LocalDateTime.fromISO("2015-01-31"),
+			LocalDateTime.fromISO("2015-02-01"),
+			LocalDateTime.fromISO("2015-02-02")
+		]);
+	});
+	it('returns future day suggestions for a single digit input', function () {
+		expect(new DateSuggestionEngine({preferredYearMonthDayOrder: "YMD"}).generateSuggestions("2", LocalDateTime.fromISO("2015-01-01"))).toEqual([
+			LocalDateTime.fromISO("2015-01-02")
+		]);
+	});
+	it('returns future day suggestions for a single digit input, jumping into the next month if necessary', function () {
+		expect(new DateSuggestionEngine({preferredYearMonthDayOrder: "YMD"}).generateSuggestions("2", LocalDateTime.fromISO("2015-01-05"))).toEqual([
+			LocalDateTime.fromISO("2015-02-02")
+		]);
+	});
+	it('returns past day suggestions for a single digit input, if favorPastDates == true', function () {
+		expect(new DateSuggestionEngine({preferredYearMonthDayOrder: "YMD", favorPastDates: true}).generateSuggestions("3", LocalDateTime.fromISO("2015-01-02"))).toEqual([
+			LocalDateTime.fromISO("2014-12-03")
+		]);
+		expect(new DateSuggestionEngine({preferredYearMonthDayOrder: "YMD", favorPastDates: true}).generateSuggestions("4", LocalDateTime.fromISO("2015-01-05"))).toEqual([
+			LocalDateTime.fromISO("2015-01-04")
+		]);
+	});
+	it('returns day (!) and day-month suggestions if the input has 2 digits and is interpretable as day', function () {
+		expect(new DateSuggestionEngine({preferredYearMonthDayOrder: "YMD"}).generateSuggestions("14", LocalDateTime.fromISO("2015-01-05"), {
+			shuffledFormatSuggestionsEnabled: true
+		})).toEqual([
+			LocalDateTime.fromISO("2015-01-14"),
+			LocalDateTime.fromISO("2016-01-04"),
+			LocalDateTime.fromISO("2015-04-01")
+		]);
+	});
+	it('skips months until it finds a valid date in the future for day-only input', function () {
+		expect(new DateSuggestionEngine({preferredYearMonthDayOrder: "YMD"}).generateSuggestions("30", LocalDateTime.fromISO("2015-01-31"))).toEqual([
+			LocalDateTime.fromISO("2015-03-30")
+		]);
+	});
+	it('skips months until it finds a valid date in the past for day-only input, if favorPastDates == true', function () {
+		expect(new DateSuggestionEngine({preferredYearMonthDayOrder: "YMD", favorPastDates: true}).generateSuggestions("30", LocalDateTime.fromISO("2015-03-29"))).toEqual([
+			LocalDateTime.fromISO("2015-01-30")
+		]);
+	});
+	it('returns only day-month suggestions if the input has 2 digits and is NOT interpretable as day', function () {
+		expect(new DateSuggestionEngine({preferredYearMonthDayOrder: "YMD"}).generateSuggestions("94", LocalDateTime.fromISO("2015-01-05"), {
+			shuffledFormatSuggestionsEnabled: true
+		})).toEqual([
+			LocalDateTime.fromISO("2015-09-04"),
+			LocalDateTime.fromISO("2015-04-09"),
+		]);
+		expect(new DateSuggestionEngine({preferredYearMonthDayOrder: "YMD"}).generateSuggestions("94", LocalDateTime.fromISO("2015-10-01"), {
+			shuffledFormatSuggestionsEnabled: true
+		})).toEqual([
+			LocalDateTime.fromISO("2016-09-04"),
+			LocalDateTime.fromISO("2016-04-09"),
+		]);
+	});
+	it('returns only day-month suggestions if the input has 2 digits and is NOT interpretable as day - in the past, if favorPastDates == true', function () {
+		expect(new DateSuggestionEngine({preferredYearMonthDayOrder: "YMD", favorPastDates: true}).generateSuggestions("94", LocalDateTime.fromISO("2015-01-05"), {
+			shuffledFormatSuggestionsEnabled: true
+		})).toEqual([
+			LocalDateTime.fromISO("2014-09-04"),
+			LocalDateTime.fromISO("2014-04-09"),
+		]);
+		expect(new DateSuggestionEngine({preferredYearMonthDayOrder: "YMD", favorPastDates: true}).generateSuggestions("94", LocalDateTime.fromISO("2015-10-01"), {
+			shuffledFormatSuggestionsEnabled: true
+		})).toEqual([
+			LocalDateTime.fromISO("2015-09-04"),
+			LocalDateTime.fromISO("2015-04-09"),
+		]);
+	});
+	it('returns day-month and day-month-year suggestions for 3-digit inputs', function () {
+		expect(new DateSuggestionEngine({preferredYearMonthDayOrder: "YMD"}).generateSuggestions("123", LocalDateTime.fromISO("2015-01-05"), {
+			shuffledFormatSuggestionsEnabled: true
+		})).toEqual([
+			LocalDateTime.fromISO("2015-01-23"),
+			LocalDateTime.fromISO("2015-12-03"),
+			LocalDateTime.fromISO("2001-02-03"),
+			LocalDateTime.fromISO("2015-03-12"),
+			LocalDateTime.fromISO("2001-03-02"),
+			LocalDateTime.fromISO("2002-01-03"),
+			LocalDateTime.fromISO("2002-03-01"),
+			LocalDateTime.fromISO("2003-01-02"),
+			LocalDateTime.fromISO("2003-02-01"),
+		]);
+		expect(new DateSuggestionEngine({preferredYearMonthDayOrder: "YMD"}).generateSuggestions("193", LocalDateTime.fromISO("2015-01-05"), {
+			shuffledFormatSuggestionsEnabled: true
+		})).toEqual([
+			LocalDateTime.fromISO("2001-09-03"),
+			LocalDateTime.fromISO("2015-03-19"),
+			LocalDateTime.fromISO("2001-03-09"),
+			LocalDateTime.fromISO("2003-01-09"),
+			LocalDateTime.fromISO("2003-09-01"),
+			LocalDateTime.fromISO("2009-01-03"),
+			LocalDateTime.fromISO("2009-03-01"),
+		]);
+		expect(new DateSuggestionEngine({preferredYearMonthDayOrder: "YMD"}).generateSuggestions("789", LocalDateTime.fromISO("2015-01-05"), {
+			shuffledFormatSuggestionsEnabled: true
+		})).toEqual([
+			LocalDateTime.fromISO("2007-08-09"),
+			LocalDateTime.fromISO("2007-09-08"),
+			LocalDateTime.fromISO("2008-07-09"),
+			LocalDateTime.fromISO("2008-09-07"),
+			LocalDateTime.fromISO("2009-07-08"),
+			LocalDateTime.fromISO("2009-08-07"),
+		]);
+	});
+	it('returns day-month and day-month-year suggestions for 4-digit inputs', function () {
+		expect(new DateSuggestionEngine({preferredYearMonthDayOrder: "YMD"}).generateSuggestions("1212", LocalDateTime.fromISO("2015-01-05"), {
+			shuffledFormatSuggestionsEnabled: true
+		}))
+			.toEqual([
+				LocalDateTime.fromISO("2015-12-12"),
+				LocalDateTime.fromISO("2001-02-12"),
+				LocalDateTime.fromISO("2012-01-02"),
+				LocalDateTime.fromISO("2001-02-21"),
+				LocalDateTime.fromISO("2001-12-02"),
+				LocalDateTime.fromISO("2002-01-12"),
+				LocalDateTime.fromISO("2002-01-21"),
+				LocalDateTime.fromISO("2002-12-01"),
+				LocalDateTime.fromISO("2012-02-01"),
+				LocalDateTime.fromISO("2021-01-02"),
+				LocalDateTime.fromISO("2021-02-01")
+			]);
+	});
+	it('returns and day-month-year suggestions for 5-digit inputs', function () {
+		expect(new DateSuggestionEngine({preferredYearMonthDayOrder: "MDY"}).generateSuggestions("12123", LocalDateTime.fromISO("2015-01-05"), {
+			shuffledFormatSuggestionsEnabled: true
+		}))
+			.toEqual([
+				LocalDateTime.fromISO("2003-12-12"),
+				LocalDateTime.fromISO("2023-01-21"),
+				LocalDateTime.fromISO("2023-12-01"),
+				LocalDateTime.fromISO("2001-12-23"),
+				LocalDateTime.fromISO("2012-01-23"),
+				LocalDateTime.fromISO("2012-03-12"),
+				LocalDateTime.fromISO("2012-12-03"),
+				LocalDateTime.fromISO("2021-01-23"),
+				LocalDateTime.fromISO("2023-01-12")
+			]);
+	});
+	it('returns and day-month-year suggestions for 6-digit inputs', function () {
+		expect(new DateSuggestionEngine({preferredYearMonthDayOrder: "YMD"}).generateSuggestions("121423", LocalDateTime.fromISO("2015-01-05"), {
+			shuffledFormatSuggestionsEnabled: true
+		})).toEqual([
+			LocalDateTime.fromISO("2014-12-23"),
+			LocalDateTime.fromISO("2023-12-14")
+		]);
+		expect(new DateSuggestionEngine({preferredYearMonthDayOrder: "YMD"}).generateSuggestions("129923", LocalDateTime.fromISO("2015-01-05"), {
+			shuffledFormatSuggestionsEnabled: true
+		})).toEqual([
+			LocalDateTime.fromISO("1999-12-23")
+		]);
+	});
+	it('returns and day-month-year suggestions for 8-digit inputs', function () {
+		expect(new DateSuggestionEngine({preferredYearMonthDayOrder: "YMD"}).generateSuggestions("10210023", LocalDateTime.fromISO("2015-01-05"), {
+			shuffledFormatSuggestionsEnabled: true
+		})).toEqual([
+			LocalDateTime.fromISO("2100-10-23")
+		]);
+	});
+	it('returns an empty array for 9-digit inputs', function () {
+		expect(new DateSuggestionEngine({preferredYearMonthDayOrder: "YMD"}).generateSuggestions("102111232", LocalDateTime.fromISO("2015-01-05"))).toEqual([]);
+	});
+	it('suggests the right thing for 4417 ;-)', () => {
+		expect(new DateSuggestionEngine({preferredYearMonthDayOrder: "DMY"}).generateSuggestions("4417", LocalDateTime.fromISO("2017-05-12"), {
+			shuffledFormatSuggestionsEnabled: true
+		}))
+			.toEqual([
+				LocalDateTime.fromISO("2017-04-04"),
+				LocalDateTime.fromISO("1941-04-07"),
+				LocalDateTime.fromISO("1941-07-04"),
+				LocalDateTime.fromISO("1944-01-07"),
+				LocalDateTime.fromISO("1944-07-01"),
+				LocalDateTime.fromISO("2004-04-17")
+			]);
+	});
+	it('suggests the right thing for 231221 ;-)', () => {
+		expect(new DateSuggestionEngine({preferredYearMonthDayOrder: "DMY"}).generateSuggestions("231221", LocalDateTime.fromISO("2017-05-12"), {
+			shuffledFormatSuggestionsEnabled: true
+		}))
+			.toEqual([
+				LocalDateTime.fromISO("2021-12-23"),
+				LocalDateTime.fromISO("2023-12-21"),
+			]);
+	});
+	it('Does not make suggestions for 3 digit days (leading zero)', () => {
+		expect(new DateSuggestionEngine({preferredYearMonthDayOrder: "DMY"}).generateSuggestions("0210202", LocalDateTime.fromISO("2017-05-12")))
+			.toEqual([]);
+	});
+	it('does not allow zero-padded 4-digit fragments', function () {
+		expect(new DateSuggestionEngine({preferredYearMonthDayOrder: "YMD"}).generateSuggestions("00230130", LocalDateTime.fromISO("2015-01-05"), {
+			shuffledFormatSuggestionsEnabled: true
+		})).toEqual([
+			// NOT LocalDateTime.fromISO("2023-01-30")
+		]);
+	});
+});
+
+describe('DateSuggestionEngine.dateFormatToYmdOrder', function () {
+	it('gets the YMD order right', function () {
+		expect(getYearMonthDayOrderFromDateFormat("YYYY-MM-DD")).toEqual("YMD");
+		expect(getYearMonthDayOrderFromDateFormat("MM/DD/YYYY")).toEqual("MDY");
+		expect(getYearMonthDayOrderFromDateFormat("M/D/Y")).toEqual("MDY");
+		expect(getYearMonthDayOrderFromDateFormat("DD.MM.YYYY")).toEqual("DMY");
+		expect(getYearMonthDayOrderFromDateFormat("DD.MM.DD.YYYY")).toEqual("DMY");
+	});
+});
diff --git a/teamapps-client/ts/__tests__/IntervalManagerTest.ts b/teamapps-client/ts/__tests__/IntervalManagerTest.ts
new file mode 100644
index 000000000..6f9e1f7f3
--- /dev/null
+++ b/teamapps-client/ts/__tests__/IntervalManagerTest.ts
@@ -0,0 +1,95 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+import {Interval, IntervalManager} from "../modules/util/IntervalManager";
+
+describe('IntervalManager', function () {
+
+    it('is initially empty', function () {
+        var intervalManager:IntervalManager = new IntervalManager();
+        expect(intervalManager.getCoveredIntervals().length).toBe(0);
+    });
+
+    it('adds the first interval as is', function () {
+        var intervalManager:IntervalManager = new IntervalManager();
+        var interval: Interval = [100, 200];
+
+        intervalManager.addInterval(interval);
+
+        expect(intervalManager.getCoveredIntervals()).toEqual([interval]);
+    });
+
+    it('adds uncovered intervals as is', function () {
+        var intervalManager:IntervalManager = new IntervalManager();
+        var interval1 :Interval = [100, 200];
+        intervalManager.addInterval(interval1);
+
+        var interval2 :Interval = [300, 400];
+        intervalManager.addInterval(interval2);
+
+        expect(intervalManager.getCoveredIntervals()).toEqual([interval1, interval2]);
+    });
+
+    it('merges adjacent intervals (exactly adjacent)', function () {
+        var intervalManager:IntervalManager = new IntervalManager();
+        intervalManager.addInterval([100, 200]);
+
+        var interval2 :Interval = [200, 400];
+        intervalManager.addInterval(interval2);
+        expect(intervalManager.getCoveredIntervals()).toEqual([[100, 400]]);
+
+        var interval3 :Interval = [50, 100];
+        intervalManager.addInterval(interval3);
+        expect(intervalManager.getCoveredIntervals()).toEqual([[50, 400]]);
+    });
+
+    it('returns the missing intervals when adding a super interval', function () {
+        var intervalManager:IntervalManager = new IntervalManager();
+        intervalManager.addInterval([100, 200]);
+        intervalManager.addInterval([300, 400]);
+
+        var newInterval :Interval = [50, 450];
+        intervalManager.addInterval(newInterval);
+
+        expect(intervalManager.getCoveredIntervals()).toEqual([[50, 450]]);
+    });
+
+    it('merges intervals if added interval overlaps them', function () {
+        var intervalManager:IntervalManager = new IntervalManager();
+        intervalManager.addInterval([100, 200]);
+        intervalManager.addInterval([300, 400]);
+
+        var newInterval :Interval = [150, 350];
+        intervalManager.addInterval(newInterval);
+
+        expect(intervalManager.getCoveredIntervals().length).toBe(1);
+        expect(intervalManager.getCoveredIntervals()).toEqual([[100, 400]]);
+    });
+
+    it('returns an empty array if the interval is already covered', function () {
+        var intervalManager:IntervalManager = new IntervalManager();
+        intervalManager.addInterval([100, 200]);
+        intervalManager.addInterval([100, 200]);
+        intervalManager.addInterval([101, 199]);
+
+        expect(intervalManager.getCoveredIntervals().length).toBe(1);
+        expect(intervalManager.getCoveredIntervals()).toEqual([[100, 200]]);
+    });
+});
+
diff --git a/teamapps-client/ts/custom-declarations/color-rgba.d.ts b/teamapps-client/ts/custom-declarations/color-rgba.d.ts
new file mode 100644
index 000000000..071c057d1
--- /dev/null
+++ b/teamapps-client/ts/custom-declarations/color-rgba.d.ts
@@ -0,0 +1,22 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+declare module "color-rgba" {
+	export default function rgba(s:string): [number, number, number, number];
+}
diff --git a/teamapps-client/ts/custom-declarations/d3-flextree.d.ts b/teamapps-client/ts/custom-declarations/d3-flextree.d.ts
new file mode 100644
index 000000000..7e52e1aef
--- /dev/null
+++ b/teamapps-client/ts/custom-declarations/d3-flextree.d.ts
@@ -0,0 +1,81 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+declare module "d3-flextree" {
+
+	import {HierarchyNode, HierarchyPointNode} from "d3-hierarchy";
+
+	export interface FlexTreeLayout<Datum> {
+		/**
+		 * Lays out the specified root hierarchy.
+		 * You may want to call `root.sort` before passing the hierarchy to the tree layout.
+		 *
+		 * @param root The specified root hierarchy.
+		 */
+		(root: HierarchyNode<Datum>): HierarchyPointNode<Datum>;
+
+		/**
+		 * If children is specified, sets the specified children accessor function.
+		 * If children is not specified, returns the current children accessor function,
+		 *  which by default assumes that the input data is an object with a children property,
+		 *  whose value is either an array or null if there are no children: data => data.children
+		 *
+		 * Note that unlike the other accessors, this takes a data node as an argument.
+		 * This is used only in the creation of a hierarchy, prior to computing the layout, by the layout.hierarchy method.
+		 */
+		children(): (d: Datum) => Datum[];
+
+		children(children: (d: Datum) => Datum[]): this;
+
+
+		/**
+		 * If nodeSize is specified as a two-element array [xSize, ySize], then this sets that as the fixed size for every node in the tree.
+		 * If nodeSize is a function, then that function is passed the hierarchy node as an argument, and should return a two-element array.
+		 * If nodeSize is not specified, this returns the current setting.
+		 *
+		 * The default nodeSize assumes that a node's size is available as a property on the data item:
+		 * node => node.data.size
+		 */
+		nodeSize(nodeSize: [number, number]): this;
+
+		nodeSize(nodeSize: (node: HierarchyNode<Datum>) => [number, number]): this;
+
+		nodeSize(): [number, number] | ((d: Datum) => [number, number]);
+
+		/**
+		 * If a spacing argument is given as a constant number, then the layout will insert the given fixed spacing between every adjacent node.
+		 * If it is given as a function, then that function will be passed two nodes, and should return the minimum allowable spacing between those nodes.
+		 * If spacing is not specified, this returns the current spacing, which defaults to 0.
+		 *
+		 * To increase the spacing for nodes as the distance of their relationship increases, you could use, for example:
+		 * layout.spacing((nodeA, nodeB) => nodeA.path(nodeB).length);
+		 */
+		spacing(spacing: number): this;
+
+		spacing(spacing: (node1: HierarchyNode<Datum>, node2: HierarchyNode<Datum>) => number): this;
+
+		spacing(): number | ((node1: HierarchyNode<Datum>, node2: HierarchyNode<Datum>) => number);
+	}
+
+	/**
+	 * Creates a new tree layout with default settings.
+	 */
+	export function flextree<Datum>(): FlexTreeLayout<Datum>;
+}
+
diff --git a/teamapps-icon/src/main/java/org/teamapps/icons/systemprovider/IconUtils.java b/teamapps-client/ts/custom-declarations/image-layout.d.ts
similarity index 66%
rename from teamapps-icon/src/main/java/org/teamapps/icons/systemprovider/IconUtils.java
rename to teamapps-client/ts/custom-declarations/image-layout.d.ts
index a90501fff..07c6426d0 100644
--- a/teamapps-icon/src/main/java/org/teamapps/icons/systemprovider/IconUtils.java
+++ b/teamapps-client/ts/custom-declarations/image-layout.d.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,17 +17,21 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-package org.teamapps.icons.systemprovider;
 
-import java.io.ByteArrayInputStream;
-import java.io.InputStream;
-
-public class IconUtils {
-
-	public static InputStream getInputStream(byte[] bytes) {
-		if (bytes == null || bytes.length == 0) {
-			return null;
-		}
-		return new ByteArrayInputStream(bytes);
+declare module "image-layout"  {
+	export function fixed_partition(images: {width: number, height: number}[], options: {
+		spacing: number,
+		containerWidth: number,
+		idealElementHeight: number,
+		align?: 'center'
+	}): {
+		width: number,
+		height: number,
+		positions: {
+			x: number,
+			y: number,
+			width: number,
+			height: number
+		}[]
 	}
 }
diff --git a/teamapps-client/ts/custom-declarations/jquery.ui.position.d.ts b/teamapps-client/ts/custom-declarations/jquery.ui.position.d.ts
index 3fde7e67b..c47b12ac7 100644
--- a/teamapps-client/ts/custom-declarations/jquery.ui.position.d.ts
+++ b/teamapps-client/ts/custom-declarations/jquery.ui.position.d.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-client/ts/custom-declarations/levenshtein.d.ts b/teamapps-client/ts/custom-declarations/levenshtein.d.ts
new file mode 100644
index 000000000..2be5c19fd
--- /dev/null
+++ b/teamapps-client/ts/custom-declarations/levenshtein.d.ts
@@ -0,0 +1,25 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+declare module "levenshtein" {
+	let Levenshtein: {
+		new(s1: string, s2: string): { distance: number };
+	};
+	export = Levenshtein;
+}
diff --git a/teamapps-client/ts/custom-declarations/mediaelement.d.ts b/teamapps-client/ts/custom-declarations/mediaelement.d.ts
index 254ca4085..68202bfbd 100644
--- a/teamapps-client/ts/custom-declarations/mediaelement.d.ts
+++ b/teamapps-client/ts/custom-declarations/mediaelement.d.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-client/ts/custom-declarations/mediasoup-v3-client.d.ts b/teamapps-client/ts/custom-declarations/mediasoup-v3-client.d.ts
new file mode 100644
index 000000000..36ef81bd5
--- /dev/null
+++ b/teamapps-client/ts/custom-declarations/mediasoup-v3-client.d.ts
@@ -0,0 +1,964 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+declare module 'mediasoup-client' {
+
+	export class CommandQueue {
+		constructor();
+
+		close(): void;
+
+		/**
+		 * @param {Function} command - Function that returns a promise.
+		 *
+		 * @async
+		 */
+		push(command: () => void): /* CommandQueue.prototype.+Promise */ Promise<void>;
+	}
+
+	export class Consumer {
+		/**
+		 * @private
+		 *
+		 * @emits transportclose
+		 * @emits trackended
+		 * @emits @getstats
+		 * @emits @close
+		 */
+		constructor({
+			    id,
+			    localId,
+			    producerId,
+			    track,
+			    rtpParameters,
+			    appData,
+		    }: {
+			id: string;
+			localId: string;
+			producerId: string;
+			track: MediaStreamTrack;
+			rtpParameters: RTCRtpParameters;
+			appData?: object;
+		});
+
+		/**
+		 * Consumer id.
+		 *
+		 * @returns {String}
+		 */
+		id: string;
+
+		/**
+		 * Local id.
+		 *
+		 * @private
+		 * @returns {String}
+		 */
+		localId: string;
+
+		/**
+		 * Associated Producer id.
+		 *
+		 * @returns {String}
+		 */
+		producerId: string;
+
+		/**
+		 * Whether the Consumer is closed.
+		 *
+		 * @returns {Boolean}
+		 */
+		closed: boolean;
+
+		/**
+		 * Media kind.
+		 *
+		 * @returns {String}
+		 */
+		kind: 'audio' | 'video';
+
+		/**
+		 * The associated track.
+		 *
+		 * @returns {MediaStreamTrack}
+		 */
+		track: MediaStreamTrack;
+
+		/**
+		 * RTP parameters.
+		 *
+		 * @returns {RTCRtpParameters}
+		 */
+		rtpParameters: RTCRtpParameters;
+
+		/**
+		 * Whether the Consumer is paused.
+		 *
+		 * @returns {Boolean}
+		 */
+		paused: boolean;
+
+		/**
+		 * App custom data.
+		 *
+		 * @returns {Object}
+		 */
+		appData: object;
+
+		on(type: any, listener: (...params: any) => Promise<void> | void): Promise<void> | void;
+
+		/**
+		 * Closes the Consumer.
+		 */
+		close(): void;
+
+		// /**
+		//  * Transport was closed.
+		//  *
+		//  * @private
+		//  */
+		// transportClosed(): void;
+
+		/**
+		 * Get associated RTCRtpReceiver stats.
+		 *
+		 * @async
+		 * @returns {RTCStatsReport}
+		 * @throws {InvalidStateError} if Consumer closed.
+		 * @return
+		 */
+		getStats(): Promise<RTCStatsReport>;
+
+		/**
+		 * Pauses receiving media.
+		 */
+		pause(): void;
+
+		/**
+		 * Resumes receiving media.
+		 */
+		resume(): void;
+	}
+
+	export class DataConsumer {
+		/**
+		 * @private
+		 *
+		 * @emits transportclose
+		 * @emits open
+		 * @emits {Object} error
+		 * @emits close
+		 * @emits {Any} message
+		 * @emits @close
+		 */
+		constructor({
+			    id,
+			    dataProducerId,
+			    dataChannel,
+			    sctpStreamParameters,
+			    appData,
+		    }: {
+			id: string;
+			dataProducerId: string;
+			dataChannel: RTCDataChannel;
+			sctpStreamParameters: any;
+			appData: object;
+		});
+
+		/**
+		 * DataConsumer id.
+		 *
+		 * @returns {String}
+		 */
+		id: string;
+
+		/**
+		 * Associated DataProducer id.
+		 *
+		 * @returns {String}
+		 */
+		dataProducerId: string;
+
+		/**
+		 * Whether the DataConsumer is closed.
+		 *
+		 * @returns {Boolean}
+		 */
+		closed: boolean;
+
+		/**
+		 * SCTP stream parameters.
+		 *
+		 * @returns {RTCSctpStreamParameters}
+		 */
+		sctpStreamParameters: any;
+
+		/**
+		 * DataChannel readyState.
+		 *
+		 * @returns {String}
+		 */
+		readyState: string;
+
+		/**
+		 * DataChannel label.
+		 *
+		 * @returns {String}
+		 */
+		label: string;
+
+		/**
+		 * DataChannel protocol.
+		 *
+		 * @returns {String}
+		 */
+		protocol: string;
+
+		/**
+		 * DataChannel binaryType.
+		 *
+		 * @returns {String}
+		 */
+		binaryType: string;
+
+		/**
+		 * App custom data.
+		 *
+		 * @returns {Object}
+		 */
+		appData: object;
+
+		/**
+		 * Closes the DataConsumer.
+		 */
+		close(): void;
+
+		// /**
+		//  * Transport was closed.
+		//  *
+		//  * @private
+		//  */
+		// transportClosed(): void;
+	}
+
+	export class DataProducer {
+		/**
+		 * @private
+		 *
+		 * @emits transportclose
+		 * @emits open
+		 * @emits {Object} error
+		 * @emits close
+		 * @emits bufferedamountlow
+		 * @emits @close
+		 */
+		constructor({
+			    id,
+			    dataChannel,
+			    sctpStreamParameters,
+			    appData,
+		    }: {
+			id: string;
+			dataChannel: RTCDataChannel;
+			sctpStreamParameters: any;
+			appData: object;
+		});
+
+		/**
+		 * DataProducer id.
+		 *
+		 * @returns {String}
+		 */
+		id: string;
+
+		/**
+		 * Whether the DataProducer is closed.
+		 *
+		 * @returns {Boolean}
+		 */
+		closed: boolean;
+
+		/**
+		 * SCTP stream parameters.
+		 *
+		 * @returns {RTCSctpStreamParameters}
+		 */
+		sctpStreamParameters: any;
+
+		/**
+		 * DataChannel readyState.
+		 *
+		 * @returns {String}
+		 */
+		readyState: string;
+
+		/**
+		 * DataChannel label.
+		 *
+		 * @returns {String}
+		 */
+		label: string;
+
+		/**
+		 * DataChannel protocol.
+		 *
+		 * @returns {String}
+		 */
+		protocol: string;
+
+		/**
+		 * DataChannel bufferedAmount.
+		 *
+		 * @returns {String}
+		 */
+		bufferedAmount: string;
+
+		/**
+		 * DataChannel bufferedAmountLowThreshold.
+		 *
+		 * @returns {String}
+		 */
+		bufferedAmountLowThreshold: string;
+
+		/**
+		 * App custom data.
+		 *
+		 * @returns {Object}
+		 */
+		appData: object;
+
+		/**
+		 * Closes the DataProducer.
+		 */
+		close(): void;
+
+		/**
+		 * Send a message.
+		 *
+		 * @param {String|Blob|ArrayBuffer|ArrayBufferView} data.
+		 *
+		 * @throws {InvalidStateError} if DataProducer closed.
+		 * @throws {TypeError} if wrong arguments.
+		 * @param data
+		 */
+		send(data: string | Blob | ArrayBuffer | ArrayBufferView): void;
+
+		// /**
+		//  * Transport was closed.
+		//  *
+		//  * @private
+		//  */
+		// transportClosed(): void;
+	}
+
+	export class Device {
+		/**
+		 * Create a new Device to connect to mediasoup server.
+		 *
+		 * @param {Class|String} [Handler] - An optional RTC handler class for unsupported or
+		 *   custom devices (not needed when running in a browser). If a String, it will
+		 *   force usage of the given built-in handler.
+		 *
+		 * @throws {UnsupportedError} if device is not supported.
+		 */
+		constructor({Handler}?: { Handler?: any });
+
+		/**
+		 * Whether the Device is loaded.
+		 *
+		 * @returns {Boolean}
+		 */
+		loaded: boolean;
+
+		/**
+		 * The RTC handler class name ('Chrome70', 'Firefox65', etc).
+		 *
+		 * @returns {RTCRtpCapabilities}
+		 */
+		handlerName: RTCRtpCapabilities;
+
+		/**
+		 * RTP capabilities of the Device for receiving media.
+		 *
+		 * @returns {RTCRtpCapabilities}
+		 * @throws {InvalidStateError} if not loaded.
+		 */
+		rtpCapabilities: string;
+
+		/**
+		 * SCTP capabilities of the Device.
+		 *
+		 * @returns {Object}
+		 * @throws {InvalidStateError} if not loaded.
+		 */
+		sctpCapabilities: object;
+
+		/**
+		 * Initialize the Device.
+		 *
+		 * @param {RTCRtpCapabilities} routerRtpCapabilities - Router RTP capabilities.
+		 *
+		 * @async
+		 * @throws {TypeError} if missing/wrong arguments.
+		 * @throws {InvalidStateError} if already loaded.
+		 * @param {routerRtpCapabilities}
+		 */
+		load({routerRtpCapabilities}: { routerRtpCapabilities: RTCRtpCapabilities }): Promise<void>;
+
+		/**
+		 * Whether we can produce audio/video.
+		 *
+		 * @param {String} kind - 'audio' or 'video'.
+		 *
+		 * @returns {Boolean}
+		 * @throws {InvalidStateError} if not loaded.
+		 * @throws {TypeError} if wrong arguments.
+		 */
+		canProduce(kind: string): boolean;
+
+		/**
+		 * Creates a Transport for sending media.
+		 *
+		 * @param {String} - Server-side Transport id.
+		 * @param {RTCIceParameters} iceParameters - Server-side Transport ICE parameters.
+		 * @param {Array<RTCIceCandidate>} [iceCandidates] - Server-side Transport ICE candidates.
+		 * @param {RTCDtlsParameters} dtlsParameters - Server-side Transport DTLS parameters.
+		 * @param {Object} [sctpParameters] - Server-side SCTP parameters.
+		 * @param {Array<RTCIceServer>} [iceServers] - Array of ICE servers.
+		 * @param {RTCIceTransportPolicy} [iceTransportPolicy] - ICE transport
+		 *   policy.
+		 * @param {Object} [proprietaryConstraints] - RTCPeerConnection proprietary constraints.
+		 * @param {Object} [appData={}] - Custom app data.
+		 *
+		 * @returns {Transport}
+		 * @throws {InvalidStateError} if not loaded.
+		 * @throws {TypeError} if wrong arguments.
+		 */
+		createSendTransport({
+			                    id,
+			                    iceParameters,
+			                    iceCandidates,
+			                    dtlsParameters,
+			                    sctpParameters,
+			                    iceServers,
+			                    iceTransportPolicy,
+			                    proprietaryConstraints,
+			                    appData,
+		                    }: {
+			id: string;
+			iceParameters: RTCIceParameters;
+			iceCandidates: RTCIceCandidate[];
+			dtlsParameters: RTCDtlsParameters;
+			sctpParameters?: object;
+			iceServers?: RTCIceServer[];
+			iceTransportPolicy?: RTCIceTransportPolicy;
+			proprietaryConstraints?: object;
+			appData?: object;
+		}): Transport;
+
+		/**
+		 * Creates a Transport for receiving media.
+		 *
+		 * @param {String} - Server-side Transport id.
+		 * @param {RTCIceParameters} iceParameters - Server-side Transport ICE parameters.
+		 * @param {Array<RTCIceCandidate>} [iceCandidates] - Server-side Transport ICE candidates.
+		 * @param {RTCDtlsParameters} dtlsParameters - Server-side Transport DTLS parameters.
+		 * @param {Object} [sctpParameters] - Server-side SCTP parameters.
+		 * @param {Array<RTCIceServer>} [iceServers] - Array of ICE servers.
+		 * @param {RTCIceTransportPolicy} [iceTransportPolicy] - ICE transport
+		 *   policy.
+		 * @param {Object} [proprietaryConstraints] - RTCPeerConnection proprietary constraints.
+		 * @param {Object} [appData={}] - Custom app data.
+		 *
+		 * @returns {Transport}
+		 * @throws {InvalidStateError} if not loaded.
+		 * @throws {TypeError} if wrong arguments.
+		 */
+		createRecvTransport({
+			                    id,
+			                    iceParameters,
+			                    iceCandidates,
+			                    dtlsParameters,
+			                    sctpParameters,
+			                    iceServers,
+			                    iceTransportPolicy,
+			                    proprietaryConstraints,
+			                    appData,
+		                    }: {
+			id: string;
+			iceParameters: RTCIceParameters;
+			iceCandidates: RTCIceCandidate[];
+			dtlsParameters: RTCDtlsParameters;
+			sctpParameters?: object;
+			iceServers?: RTCIceServer[];
+			iceTransportPolicy?: RTCIceTransportPolicy;
+			proprietaryConstraints?: object;
+			appData?: object;
+		}): Transport;
+	}
+
+	export class EnhancedEventEmitter {
+		/**
+		 *
+		 * @param logger
+		 */
+		constructor(logger: any);
+
+		/**
+		 *
+		 * @param event
+		 * @param ...args
+		 */
+		safeEmit(event: any, ...args: any): void;
+
+		/**
+		 *
+		 * @param event
+		 * @param ...args
+		 * @return
+		 */
+		safeEmitAsPromise(event: any, ...args: any): Promise<void>;
+	}
+
+	export class Producer {
+		/**
+		 * @private
+		 *
+		 * @emits transportclose
+		 * @emits trackended
+		 * @emits {track: MediaStreamTrack} @replacetrack
+		 * @emits {spatialLayer: String} @setmaxspatiallayer
+		 * @emits @getstats
+		 * @emits @close
+		 */
+		constructor({
+			    id,
+			    localId,
+			    track,
+			    rtpParameters,
+			    appData,
+		    }: {
+			id: string;
+			localId: string;
+			track: MediaStreamTrack;
+			rtpParameters: RTCRtpParameters;
+			appData?: object;
+		});
+
+		/**
+		 * Producer id.
+		 *
+		 * @returns {String}
+		 */
+		id: string;
+
+		/**
+		 * Local id.
+		 *
+		 * @private
+		 * @returns {String}
+		 */
+		localId: string;
+
+		/**
+		 * Whether the Producer is closed.
+		 *
+		 * @returns {Boolean}
+		 */
+		closed: boolean;
+
+		/**
+		 * Media kind.
+		 *
+		 * @returns {String}
+		 */
+		kind: 'audio' | 'video';
+
+		/**
+		 * The associated track.
+		 *
+		 * @returns {MediaStreamTrack}
+		 */
+		track: MediaStreamTrack;
+
+		/**
+		 * RTP parameters.
+		 *
+		 * @returns {RTCRtpParameters}
+		 */
+		rtpParameters: RTCRtpParameters;
+
+		/**
+		 * Whether the Producer is paused.
+		 *
+		 * @returns {Boolean}
+		 */
+		paused: boolean;
+
+		/**
+		 * Max spatial layer.
+		 *
+		 * @type {Number}
+		 */
+		maxSpatialLayer: number;
+
+		/**
+		 * App custom data.
+		 *
+		 * @type {Object}
+		 */
+		appData: object;
+
+		on(type: any, listener: (...params: any) => Promise<void> | void): Promise<void> | void;
+
+		/**
+		 * Closes the Producer.
+		 */
+		close(): void;
+
+		// /**
+		//  * Transport was closed.
+		//  *
+		//  * @private
+		//  */
+		// transportClosed();
+
+		/**
+		 * Get associated RTCRtpSender stats.
+		 *
+		 * @promise
+		 * @returns {RTCStatsReport}
+		 * @throws {InvalidStateError} if Producer closed.
+		 */
+		getStats(): Promise<RTCStatsReport>;
+
+		/**
+		 * Pauses sending media.
+		 */
+		pause(): void;
+
+		/**
+		 * Resumes sending media.
+		 */
+		resume(): void;
+
+		/**
+		 * Replaces the current track with a new one.
+		 *
+		 * @param {MediaStreamTrack} track - New track.
+		 *
+		 * @async
+		 * @throws {InvalidStateError} if Producer closed or track ended.
+		 * @throws {TypeError} if wrong arguments.
+		 */
+		replaceTrack({track}: { track: MediaStreamTrack }): Promise<void>;
+
+		/**
+		 * Sets the video max spatial layer to be sent.
+		 *
+		 * @param {Number} spatialLayer
+		 *
+		 * @async
+		 * @throws {InvalidStateError} if Producer closed.
+		 * @throws {UnsupportedError} if not a video Producer.
+		 * @throws {TypeError} if wrong arguments.
+		 */
+		setMaxSpatialLayer(spatialLayer: number): Promise<void>;
+	}
+
+	export class Transport {
+		/**
+		 * @private
+		 *
+		 * @emits {transportLocalParameters: Object, callback: Function, errback: Function} connect
+		 * @emits {connectionState: String} connectionstatechange
+		 * @emits {producerLocalParameters: Object, callback: Function, errback: Function} produce
+		 * @emits {dataProducerLocalParameters: Object, callback: Function, errback: Function} producedata
+		 */
+		constructor({
+			    direction,
+			    id,
+			    iceParameters,
+			    iceCandidates,
+			    dtlsParameters,
+			    sctpParameters,
+			    iceServers,
+			    iceTransportPolicy,
+			    proprietaryConstraints,
+			    appData,
+			    Handler,
+			    extendedRtpCapabilities,
+			    canProduceByKind,
+		    }: {
+			direction: string;
+			id: string;
+			iceParameters: RTCIceParameters;
+			iceCandidates: RTCIceCandidate[];
+			dtlsParameters: RTCDtlsParameters;
+			sctpParameters: any;
+			iceServers: RTCIceServer[];
+			iceTransportPolicy: RTCIceTransportPolicy;
+			proprietaryConstraints: object;
+			appData?: object;
+			Handler: any;
+			extendedRtpCapabilities: object;
+			canProduceByKind: object;
+		});
+
+		/**
+		 * Transport id.
+		 *
+		 * @returns {String}
+		 */
+		id: string;
+
+		/**
+		 * Whether the Transport is closed.
+		 *
+		 * @returns {Boolean}
+		 */
+		closed: boolean;
+
+		/**
+		 * Transport direction.
+		 *
+		 * @returns {String}
+		 */
+		direction: string;
+
+		/**
+		 * RTC handler instance.
+		 *
+		 * @returns {Handler}
+		 */
+		handler: any;
+
+		/**
+		 * Connection state.
+		 *
+		 * @returns {String}
+		 */
+		connectionState: string;
+
+		/**
+		 * App custom data.
+		 *
+		 * @returns {Object}
+		 */
+		appData: object;
+
+		on(type: any, listener: (...params: any) => Promise<void> | void): Promise<void> | void;
+
+		/**
+		 * Close the Transport.
+		 */
+		close(): void;
+
+		/**
+		 * Get associated Transport (RTCPeerConnection) stats.
+		 *
+		 * @async
+		 * @returns {RTCStatsReport}
+		 * @throws {InvalidStateError} if Transport closed.
+		 */
+		getStats(): Promise<RTCStatsReport>;
+
+		/**
+		 * Restart ICE connection.
+		 *
+		 * @param {RTCIceParameters} iceParameters - New Server-side Transport ICE parameters.
+		 *
+		 * @async
+		 * @throws {InvalidStateError} if Transport closed.
+		 * @throws {TypeError} if wrong arguments.
+		 */
+		restartIce({iceParameters}: { iceParameters: RTCIceParameters }): Promise<void>;
+
+		/**
+		 * Update ICE servers.
+		 *
+		 * @param {Array<RTCIceServer>} [iceServers] - Array of ICE servers.
+		 *
+		 * @async
+		 * @throws {InvalidStateError} if Transport closed.
+		 * @throws {TypeError} if wrong arguments.
+		 */
+		updateIceServers({iceServers}: { iceServers: RTCIceServer[] }): Promise<void>;
+
+		/**
+		 * Create a Producer.
+		 *
+		 * @param {MediaStreamTrack} track - Track to sent.
+		 * @param {Array<RTCRtpCodingParameters>} [encodings] - Encodings.
+		 * @param {Object} [codecOptions] - Codec options.
+		 * @param {Object} [appData={}] - Custom app data.
+		 *
+		 * @async
+		 * @returns {Producer}
+		 * @throws {InvalidStateError} if Transport closed or track ended.
+		 * @throws {TypeError} if wrong arguments.
+		 * @throws {UnsupportedError} if Transport direction is incompatible or
+		 *   cannot produce the given media kind.
+		 */
+		produce({
+			        track,
+			        encodings,
+			        codecOptions,
+			        appData,
+		        }: {
+			track: MediaStreamTrack;
+			encodings?: RTCRtpCodingParameters[];
+			codecOptions?: object;
+			appData?: object;
+		}): Promise<Producer>;
+
+		/**
+		 * Create a Consumer to consume a remote Producer.
+		 *
+		 * @param {String} id - Server-side Consumer id.
+		 * @param {String} producerId - Server-side Producer id.
+		 * @param {String} kind - 'audio' or 'video'.
+		 * @param {RTCRtpParameters} rtpParameters - Server-side Consumer RTP parameters.
+		 * @param {Object} [appData={}] - Custom app data.
+		 *
+		 * @async
+		 * @returns {Consumer}
+		 * @throws {InvalidStateError} if Transport closed.
+		 * @throws {TypeError} if wrong arguments.
+		 * @throws {UnsupportedError} if Transport direction is incompatible.
+		 */
+		consume({
+			        id,
+			        producerId,
+			        kind,
+			        rtpParameters,
+			        appData,
+		        }: {
+			id: string;
+			producerId: string;
+			kind: string;
+			rtpParameters: RTCRtpParameters;
+			appData?: object;
+		}): Promise<Consumer>;
+
+		/**
+		 * Create a DataProducer
+		 *
+		 * @param {Boolean} [ordered=true]
+		 * @param {Number} [maxPacketLifeTime]
+		 * @param {Number} [maxRetransmits]
+		 * @param {String} [priority='low'] // 'very-low' / 'low' / 'medium' / 'high'
+		 * @param {String} [label='']
+		 * @param {String} [protocol='']
+		 * @param {Object} [appData={}] - Custom app data.
+		 *
+		 * @async
+		 * @returns {DataProducer}
+		 * @throws {InvalidStateError} if Transport closed.
+		 * @throws {TypeError} if wrong arguments.
+		 * @throws {UnsupportedError} if Transport direction is incompatible or remote
+		 *   transport does not enable SCTP.
+		 */
+		produceData({
+			            ordered,
+			            maxPacketLifeTime,
+			            maxRetransmits,
+			            priority,
+			            label,
+			            protocol,
+			            appData,
+		            }: {
+			ordered?: boolean;
+			maxPacketLifeTime: number;
+			maxRetransmits: number;
+			priority?: 'very-low' | 'low' | 'medium' | 'high';
+			label?: string;
+			protocol?: string;
+			appData?: object;
+		}): Promise<DataProducer>;
+
+		/**
+		 * Create a DataConsumer
+		 *
+		 * @param {String} id - Server-side DataConsumer id.
+		 * @param {String} dataProducerId - Server-side DataProducer id.
+		 * @param {RTCSctpStreamParameters} sctpStreamParameters - Server-side DataConsumer
+		 *   SCTP parameters.
+		 * @param {String} [label='']
+		 * @param {String} [protocol='']
+		 * @param {Object} [appData={}] - Custom app data.
+		 *
+		 * @async
+		 * @returns {DataConsumer}
+		 * @throws {InvalidStateError} if Transport closed.
+		 * @throws {TypeError} if wrong arguments.
+		 * @throws {UnsupportedError} if Transport direction is incompatible or remote
+		 *   transport does not enable SCTP.
+		 */
+		consumeData({
+			            id,
+			            dataProducerId,
+			            sctpStreamParameters,
+			            label,
+			            protocol,
+			            appData,
+		            }: {
+			id: string;
+			dataProducerId: string;
+			sctpStreamParameters: any;
+			label?: string;
+			protocol?: string;
+			appData?: object;
+		}): Promise<DataConsumer>;
+
+		/**
+		 *
+		 */
+		_handleHandler(): void;
+
+		/**
+		 *
+		 * @param producer
+		 */
+		_handleProducer(producer: Producer): void;
+
+		/**
+		 *
+		 * @param consumer
+		 */
+		_handleConsumer(consumer: Consumer): void;
+
+		/**
+		 *
+		 * @param dataProducer
+		 */
+		_handleDataProducer(dataProducer: DataProducer): void;
+
+		/**
+		 *
+		 * @param dataConsumer
+		 */
+		_handleDataConsumer(dataConsumer: DataConsumer): void;
+	}
+
+
+	export const version: string;
+
+	export function parseScalabilityMode(scalabilityMode: any): any;
+}
diff --git a/teamapps-client/ts/custom-declarations/pickr-widget.d.ts b/teamapps-client/ts/custom-declarations/pickr-widget.d.ts
index 338e21b92..0937d3c75 100644
--- a/teamapps-client/ts/custom-declarations/pickr-widget.d.ts
+++ b/teamapps-client/ts/custom-declarations/pickr-widget.d.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-client/ts/custom-declarations/shaka-player.d.ts b/teamapps-client/ts/custom-declarations/shaka-player.d.ts
deleted file mode 100644
index 02528fa1b..000000000
--- a/teamapps-client/ts/custom-declarations/shaka-player.d.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-declare namespace shaka  {
-	let polyfill: {
-		installAll: () => void
-	};
-
-	class Player {
-		constructor(video: HTMLMediaElement, dependencyInjector?: (player: shaka.Player) => void);
-
-		static isBrowserSupported(): boolean;
-
-		addEventListener(eventType: string, handler: (event: Event) => void): void;
-
-		load(manifestUri: string, startTime?: number, manifestParserFactory?: any): Promise<any>;
-
-		unload(): Promise<any>;
-
-		getMediaElement(): HTMLMediaElement;
-
-		getTracks(): Track[];
-
-		destroy(): Promise<any>;
-	}
-
-	namespace util {
-		interface Error {
-			category: number;
-			code: number;
-			data: any[];
-			severity: number;
-		}
-	}
-
-	interface Track {
-		id: number;
-		active: boolean;
-		type: string;
-		bandwidth: number;
-		language: string;
-		label?: string;
-		kind?: string;
-		width?: number;
-		height?: number;
-		frameRate?: number;
-		mimeType?: string;
-		codecs?: string;
-		audioCodec?: string;
-		videoCodec?: string;
-		primary: boolean;
-		roles: string[];
-		videoId?: number;
-		audioId?: number
-	}
-}
-
-export = shaka;
diff --git a/teamapps-client/ts/custom-declarations/ulp.d.ts b/teamapps-client/ts/custom-declarations/ulp.d.ts
new file mode 100644
index 000000000..dd40c3fac
--- /dev/null
+++ b/teamapps-client/ts/custom-declarations/ulp.d.ts
@@ -0,0 +1,30 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+declare module "ulp" {
+
+	let ulp: {
+		nextUp: (x: number) => number;
+		nextDown: (x: number) => number;
+		ulp: (x: number) => number;
+		monkeypatch: () => void;
+	};
+	export = ulp;
+
+}
diff --git a/teamapps-client/ts/custom-declarations/voice-activity-detection.d.ts b/teamapps-client/ts/custom-declarations/voice-activity-detection.d.ts
new file mode 100644
index 000000000..4980ef7b2
--- /dev/null
+++ b/teamapps-client/ts/custom-declarations/voice-activity-detection.d.ts
@@ -0,0 +1,41 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+declare module "voice-activity-detection" {
+	export default function vad(audioContext: AudioContext, stream: MediaStream, options: {
+		fftSize?: number,
+		bufferLen?: number,
+		smoothingTimeConstant?: number,
+		minCaptureFreq?: number,         // in Hz
+		maxCaptureFreq?: number,        // in Hz
+		noiseCaptureDuration?: number, // in ms
+		minNoiseLevel?: number,         // from 0 to 1
+		maxNoiseLevel?: number,         // from 0 to 1
+		avgNoiseMultiplier?: number,
+		onVoiceStart?: () => void,
+		onVoiceStop?: () => void,
+		onUpdate?: (val: number) => void
+	}): VoiceActivityDetectionHandle;
+
+	export type VoiceActivityDetectionHandle = {
+		connect: () => void,
+		disconnect: () => void,
+		destroy: () => void
+	}
+}
diff --git a/teamapps-client/ts/custom-declarations/webui-popover.d.ts b/teamapps-client/ts/custom-declarations/webui-popover.d.ts
index 3db92e4c6..48cc51feb 100644
--- a/teamapps-client/ts/custom-declarations/webui-popover.d.ts
+++ b/teamapps-client/ts/custom-declarations/webui-popover.d.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-client/ts/custom-declarations/worker-loader.d.ts b/teamapps-client/ts/custom-declarations/worker-loader.d.ts
index 77a1b2aa3..5f588c36e 100644
--- a/teamapps-client/ts/custom-declarations/worker-loader.d.ts
+++ b/teamapps-client/ts/custom-declarations/worker-loader.d.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -18,9 +18,9 @@
  * =========================LICENSE_END==================================
  */
 declare module "worker-loader!*" {
-	class WebpackWorker extends Worker {
-		constructor();
-	}
+    class WebpackWorker extends Worker {
+        constructor();
+    }
 
-	export default WebpackWorker;
+    export = WebpackWorker;
 }
diff --git a/teamapps-client/ts/modules/AbstractUiComponent.ts b/teamapps-client/ts/modules/AbstractUiComponent.ts
new file mode 100644
index 000000000..2cdb45a14
--- /dev/null
+++ b/teamapps-client/ts/modules/AbstractUiComponent.ts
@@ -0,0 +1,221 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+import {TeamAppsUiContext} from "./TeamAppsUiContext";
+import * as log from "loglevel";
+import {UiComponentConfig} from "../generated/UiComponentConfig";
+import {TeamAppsEvent} from "./util/TeamAppsEvent";
+import {generateUUID} from "./Common";
+import ResizeObserver from 'resize-observer-polyfill';
+import {debounce, DebounceMode} from "./util/debounce";
+import {DeferredExecutor} from "./util/DeferredExecutor";
+import {UiComponent} from "./UiComponent";
+
+export abstract class AbstractUiComponent<C extends UiComponentConfig = UiComponentConfig> implements UiComponent<C> {
+
+	protected readonly logger: log.Logger = log.getLogger((<any>(this.constructor)).name || this.constructor.toString().match(/\w+/g)[1]);
+
+	public readonly onVisibilityChanged: TeamAppsEvent<boolean> = new TeamAppsEvent();
+	public readonly deFactoVisibilityChanged: TeamAppsEvent<boolean> = new TeamAppsEvent();
+	public readonly onResized: TeamAppsEvent<{width: number; height: number}> = new TeamAppsEvent();
+
+	private width: number = 0;
+	private height: number = 0;
+
+	private visible = true;
+
+	public displayedDeferredExecutor = new DeferredExecutor();
+
+	constructor(protected _config: C,
+	            protected _context: TeamAppsUiContext) {
+		if (_config.id == null) {
+			_config.id = generateUUID();
+		}
+
+		this.visible = _config.visible;
+	}
+
+	public getId(): string {
+		return this._config.id;
+	}
+
+	public getTeamAppsType(): string {
+		return this._config._type;
+	}
+
+	protected reLayout(width: number, height: number): void {
+		let hasSize = width > 0 || height > 0;
+		if (this.width === width && this.height === height) {
+			return;
+		}
+		this.width = width;
+		this.height = height;
+		this.displayedDeferredExecutor.ready = hasSize; // do this after onResize gets called, since
+		if (hasSize) {
+			this.logger.trace("resize: " + this.getId());
+			this.onResized.fire({width: this.width, height: this.height});
+			this.onResize();
+		}
+		this.deFactoVisibilityChanged.fireIfChanged(hasSize);
+	}
+
+	/**
+	 * This method gets called whenever the available size for this component changes.
+	 */
+	public onResize(): void {
+		// do nothing (default implementation)
+	}
+
+	/**
+	 * This method is called when the component gets destroyed.
+	 * It should be used to release any resources the component holds. This can be:
+	 *   - additional DOM elements that are not children of the component's main DOM element, e.g. attached to the document's body.
+	 *   - other resources that are not released just by removing the component's main DOM element
+	 */
+	public destroy() {
+		this.getMainElement().remove();
+	}
+
+	private firstTimeGetMainElementCalled = true;
+	/**
+	 * @return The main DOM element of this component.
+	 */
+	public getMainElement(): HTMLElement {
+		let element = this.doGetMainElement();
+
+		if (this.firstTimeGetMainElementCalled) {
+			this.firstTimeGetMainElementCalled = false;
+
+			element.setAttribute("data-teamapps-id", this._config.id);
+
+			if (this._config.debuggingId != null) {
+				element.setAttribute("data-teamapps-debugging-id", this._config.debuggingId);
+			}
+
+			element.classList.toggle("invisible-component", this.visible == null ? false : !this.visible);
+			if (this._config.stylesBySelector != null) { // might be null when used via JavaScript API!
+				Object.keys(this._config.stylesBySelector).forEach(selector => this.setStyle(selector, this._config.stylesBySelector[selector]));
+			}
+			if (this._config.classNamesBySelector != null) { // might be null when used via JavaScript API!
+				Object.keys(this._config.classNamesBySelector).forEach(selector => this.setClassNames(selector, this._config.classNamesBySelector[selector]));
+			}
+			if (this._config.attributesBySelector != null) { // might be null when used via JavaScript API!
+				Object.keys(this._config.attributesBySelector).forEach(selector => this.setAttributes(selector, this._config.attributesBySelector[selector]));
+			}
+
+			let relayoutCalled = false;
+			let debouncedRelayout: (size?: {width: number, height: number}) => void = debounce((size?: {width: number, height: number}) => {
+				relayoutCalled = true;
+				this.reLayout(size.width, size.height);
+			}, 100, DebounceMode.BOTH);
+			const resizeObserver = new ResizeObserver(entries => {
+				for (let entry of entries) {
+					debouncedRelayout({width: entry.contentRect.width, height: entry.contentRect.height});
+				}
+			});
+			resizeObserver.observe(element);
+			setTimeout(() => {
+				// It seems like the resize observer does not always get called when the element gets attached
+				if (!relayoutCalled) {
+					debouncedRelayout({width: element.offsetWidth, height: element.offsetHeight});
+				}
+			}, 300); // TODO remove when problems with missing resizeObserver calls are solved...
+		}
+
+		return element;
+	};
+
+	protected abstract doGetMainElement(): HTMLElement;
+
+	public getWidth(): number {
+		return this.width;
+	}
+
+	public getHeight(): number {
+		return this.height;
+	}
+
+	public isVisible() {
+		return this.visible;
+	}
+
+	public setVisible(visible: boolean = true /*undefined == true!!*/, fireEvent = true) {
+		this.visible = visible;
+		if (this.getMainElement() != null) { // might not have been rendered yet, if setVisible is already called in the constructor/initializer
+			this.getMainElement().classList.toggle("invisible-component", !visible);
+		}
+		if (fireEvent) {
+			this.onVisibilityChanged.fire(visible);
+		}
+	}
+
+	// TODO change this implementation to generate style sheets instead of setting styles!
+	public setStyle(selector:string, style: {[property: string]: string}) {
+		let targetElements = this.getElementForSelector(selector);
+		if (targetElements.length === 0) {
+			this.logger.error("Cannot set style on non-existing element. Selector: " + selector);
+		} else {
+			targetElements.forEach(tel => {
+				for (const [name, value] of Object.entries(style)) {
+					tel.style.setProperty(name, value);
+				}
+			});
+		}
+	}
+
+	public setClassNames(selector:string, classNames: {[className: string]: boolean}) {
+		let targetElement = this.getElementForSelector(selector);
+		if (targetElement.length === 0) {
+			this.logger.error("Cannot set css class on non-existing element. Selector: " + selector);
+		} else {
+			targetElement.forEach(el => {
+				for (let [className, enabled] of Object.entries(classNames)) {
+					el.classList.toggle(className, enabled);
+				}
+			});
+		}
+	}
+
+	public setAttributes(selector:string, attributes: {[property: string]: string}) {
+		let targetElement = this.getElementForSelector(selector);
+		if (targetElement.length === 0) {
+			this.logger.error("Cannot set attribute on non-existing element. Selector: " + selector);
+		} else {
+			targetElement.forEach(el => {
+				for (let [attribute, value] of Object.entries(attributes)) {
+					if (value === "__ta-deleted-attribute__") {
+						el.removeAttribute(attribute);
+					} else {
+						el.setAttribute(attribute, value);
+					}
+				}
+			});
+		}
+	}
+
+	private getElementForSelector(selector: string) {
+		let targetElement: HTMLElement[];
+		if (!selector) {
+			targetElement = [this.getMainElement()];
+		} else {
+			targetElement = Array.from((this.getMainElement() as HTMLElement).querySelectorAll(":scope " + selector));
+		}
+		return targetElement;
+	}
+}
diff --git a/teamapps-client/ts/modules/Common.ts b/teamapps-client/ts/modules/Common.ts
index f2f8f078c..3fafcb4a2 100644
--- a/teamapps-client/ts/modules/Common.ts
+++ b/teamapps-client/ts/modules/Common.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,21 +17,16 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-import * as $ from "jquery";
-import "bootstrap-notify";
 import * as log from "loglevel";
 import {UiComponentConfig} from "../generated/UiComponentConfig";
-import {UiComponent} from "./UiComponent";
-import {TeamAppsUiContext} from "./TeamAppsUiContext";
 import {UiEntranceAnimation} from "../generated/UiEntranceAnimation";
 import {UiExitAnimation} from "../generated/UiExitAnimation";
 import {UiPageDisplayMode} from "../generated/UiPageDisplayMode";
-import {UiNotification_Position} from "../generated/UiNotificationConfig";
-import {createUiColorCssString} from "./util/CssFormatUtil";
-import {UiColorConfig} from "../generated/UiColorConfig";
 import {UiTemplateConfig} from "../generated/UiTemplateConfig";
-import {UiTextMatchingMode} from "../generated/UiTextMatchingMode";
-import * as moment from "moment-timezone";
+import {UiComponent} from "./UiComponent";
+import {UiPageTransition} from "../generated/UiPageTransition";
+import {UiRepeatableAnimation} from "../generated/UiRepeatableAnimation";
+import rgba from "color-rgba";
 
 export type RenderingFunction = (data: any) => string;
 
@@ -40,96 +35,139 @@ export type Renderer = {
 	template: UiTemplateConfig
 };
 
-export type ImageRenderer = (imageIdentifier: string) => string;
-
 const logger = log.getLogger("Commmon");
 
 export class Constants {
 	private static _SCROLLBAR_WIDTH: number;
 
 	public static ENTRANCE_ANIMATION_CSS_CLASSES = {
-		[UiEntranceAnimation.LIGHTSPEED_IN]: "lightSpeedIn",
-		[UiEntranceAnimation.ROLL_IN]: "rollIn",
-		[UiEntranceAnimation.ZOOM_IN]: "zoomIn",
-		[UiEntranceAnimation.ZOOM_IN_DOWN]: "zoomInDown",
-		[UiEntranceAnimation.ZOOM_IN_LEFT]: "zoomInLeft",
-		[UiEntranceAnimation.ZOOM_IN_RIGHT]: "zoomInRight",
-		[UiEntranceAnimation.ZOOM_IN_UP]: "zoomInUp",
-		[UiEntranceAnimation.SLIDE_IN_UP]: "slideInUp",
-		[UiEntranceAnimation.SLIDE_IN_DOWN]: "slideInDown",
-		[UiEntranceAnimation.SLIDE_IN_LEFT]: "slideInLeft",
-		[UiEntranceAnimation.SLIDE_IN_RIGHT]: "slideInRight",
-		[UiEntranceAnimation.ROTATE_IN]: "rotateIn",
-		[UiEntranceAnimation.ROTATE_IN_DOWNLEFT]: "rotateInDownLeft",
-		[UiEntranceAnimation.ROTATE_IN_DOWNRIGHT]: "rotateInDownRight",
-		[UiEntranceAnimation.ROTATE_IN_UPLEFT]: "rotateInUpLeft",
-		[UiEntranceAnimation.ROTATE_IN_UPRIGHT]: "rotateInUpRight",
-		[UiEntranceAnimation.FLIP_IN_X]: "flipInX",
-		[UiEntranceAnimation.FLIP_IN_Y]: "flipInY",
-		[UiEntranceAnimation.FADE_IN]: "fadeIn",
-		[UiEntranceAnimation.FADE_IN_DOWN]: "fadeInDown",
-		[UiEntranceAnimation.FADE_IN_DOWNBIG]: "fadeInDownBig",
-		[UiEntranceAnimation.FADE_IN_LEFT]: "fadeInLeft",
-		[UiEntranceAnimation.FADE_IN_LEFTBIG]: "fadeInLeftBig",
-		[UiEntranceAnimation.FADE_IN_RIGHT]: "fadeInRight",
-		[UiEntranceAnimation.FADE_IN_RIGHTBIG]: "fadeInRightBig",
-		[UiEntranceAnimation.FADE_IN_UP]: "fadeInUp",
-		[UiEntranceAnimation.FADE_IN_UPBIG]: "fadeInUpBig",
-		[UiEntranceAnimation.BOUNCE_IN]: "bounceIn",
-		[UiEntranceAnimation.BOUNCE_IN_DOWN]: "bounceInDown",
-		[UiEntranceAnimation.BOUNCE_IN_LEFT]: "bounceInLeft",
-		[UiEntranceAnimation.BOUNCE_IN_RIGHT]: "bounceInRight",
-		[UiEntranceAnimation.BOUNCE_IN_UP]: "bounceInUp"
+		[UiEntranceAnimation.BACK_IN_DOWN]: "animate__animated animate__backInDown",
+		[UiEntranceAnimation.BACK_IN_LEFT]: "animate__animated animate__backInLeft",
+		[UiEntranceAnimation.BACK_IN_RIGHT]: "animate__animated animate__backInRight",
+		[UiEntranceAnimation.BACK_IN_UP]: "animate__animated animate__backInUp",
+
+		[UiEntranceAnimation.LIGHT_SPEED_IN_RIGHT]: "animate__animated animate__lightSpeedIn",
+		[UiEntranceAnimation.LIGHT_SPEED_IN_LEFT]: "animate__animated animate__lightSpeedIn",
+		[UiEntranceAnimation.JACK_IN_THE_BOX]: "animate__animated animate__lightSpeedIn",
+		[UiEntranceAnimation.ROLL_IN]: "animate__animated animate__rollIn",
+
+		[UiEntranceAnimation.ZOOM_IN]: "animate__animated animate__zoomIn",
+		[UiEntranceAnimation.ZOOM_IN_DOWN]: "animate__animated animate__zoomInDown",
+		[UiEntranceAnimation.ZOOM_IN_LEFT]: "animate__animated animate__zoomInLeft",
+		[UiEntranceAnimation.ZOOM_IN_RIGHT]: "animate__animated animate__zoomInRight",
+		[UiEntranceAnimation.ZOOM_IN_UP]: "animate__animated animate__zoomInUp",
+
+		[UiEntranceAnimation.SLIDE_IN_UP]: "animate__animated animate__slideInUp",
+		[UiEntranceAnimation.SLIDE_IN_DOWN]: "animate__animated animate__slideInDown",
+		[UiEntranceAnimation.SLIDE_IN_LEFT]: "animate__animated animate__slideInLeft",
+		[UiEntranceAnimation.SLIDE_IN_RIGHT]: "animate__animated animate__slideInRight",
+
+		[UiEntranceAnimation.ROTATE_IN]: "animate__animated animate__rotateIn",
+		[UiEntranceAnimation.ROTATE_IN_DOWNLEFT]: "animate__animated animate__rotateInDownLeft",
+		[UiEntranceAnimation.ROTATE_IN_DOWNRIGHT]: "animate__animated animate__rotateInDownRight",
+		[UiEntranceAnimation.ROTATE_IN_UPLEFT]: "animate__animated animate__rotateInUpLeft",
+		[UiEntranceAnimation.ROTATE_IN_UPRIGHT]: "animate__animated animate__rotateInUpRight",
+
+		[UiEntranceAnimation.FLIP_IN_X]: "animate__animated animate__flipInX",
+		[UiEntranceAnimation.FLIP_IN_Y]: "animate__animated animate__flipInY",
+
+		[UiEntranceAnimation.FADE_IN]: "animate__animated animate__fadeIn",
+		[UiEntranceAnimation.FADE_IN_DOWN]: "animate__animated animate__fadeInDown",
+		[UiEntranceAnimation.FADE_IN_DOWNBIG]: "animate__animated animate__fadeInDownBig",
+		[UiEntranceAnimation.FADE_IN_LEFT]: "animate__animated animate__fadeInLeft",
+		[UiEntranceAnimation.FADE_IN_LEFTBIG]: "animate__animated animate__fadeInLeftBig",
+		[UiEntranceAnimation.FADE_IN_RIGHT]: "animate__animated animate__fadeInRight",
+		[UiEntranceAnimation.FADE_IN_RIGHTBIG]: "animate__animated animate__fadeInRightBig",
+		[UiEntranceAnimation.FADE_IN_UP]: "animate__animated animate__fadeInUp",
+		[UiEntranceAnimation.FADE_IN_UPBIG]: "animate__animated animate__fadeInUpBig",
+		[UiEntranceAnimation.FADE_IN_TOP_LEFT]: "animate__animated animate__fadeInTopLeft",
+		[UiEntranceAnimation.FADE_IN_TOP_RIGHT]: "animate__animated animate__fadeInTopRight",
+		[UiEntranceAnimation.FADE_IN_BOTTOM_LEFT]: "animate__animated animate__fadeInBottomLeft",
+		[UiEntranceAnimation.FADE_IN_BOTTOM_RIGHT]: "animate__animated animate__fadeInBottomRight",
+
+		[UiEntranceAnimation.BOUNCE_IN]: "animate__animated animate__bounceIn",
+		[UiEntranceAnimation.BOUNCE_IN_DOWN]: "animate__animated animate__bounceInDown",
+		[UiEntranceAnimation.BOUNCE_IN_LEFT]: "animate__animated animate__bounceInLeft",
+		[UiEntranceAnimation.BOUNCE_IN_RIGHT]: "animate__animated animate__bounceInRight",
+		[UiEntranceAnimation.BOUNCE_IN_UP]: "animate__animated animate__bounceInUp"
 	};
 
 	public static EXIT_ANIMATION_CSS_CLASSES = {
-		[UiExitAnimation.LIGHTSPEED_OUT]: "lightSpeedOut",
-		[UiExitAnimation.ROLL_OUT]: "rollOut",
-		[UiExitAnimation.HINGE]: "hinge",
-		[UiExitAnimation.ZOOM_OUT]: "zoomOut",
-		[UiExitAnimation.ZOOM_OUT_DOWN]: "zoomOutDown",
-		[UiExitAnimation.ZOOM_OUT_LEFT]: "zoomOutLeft",
-		[UiExitAnimation.ZOOM_OUT_RIGHT]: "zoomOutRight",
-		[UiExitAnimation.ZOOM_OUT_UP]: "zoomOutUp",
-		[UiExitAnimation.SLIDE_OUT_UP]: "slideOutUp",
-		[UiExitAnimation.SLIDE_OUT_DOWN]: "slideOutDown",
-		[UiExitAnimation.SLIDE_OUT_LEFT]: "slideOutLeft",
-		[UiExitAnimation.SLIDE_OUT_RIGHT]: "slideOutRight",
-		[UiExitAnimation.ROTATE_OUT]: "rotateOut",
-		[UiExitAnimation.ROTATE_OUT_DOWNLEFT]: "rotateOutDownLeft",
-		[UiExitAnimation.ROTATE_OUT_DOWNRIGHT]: "rotateOutDownRight",
-		[UiExitAnimation.ROTATE_OUT_UPLEFT]: "rotateOutUpLeft",
-		[UiExitAnimation.ROTATE_OUT_UPRIGHT]: "rotateOutUpRight",
-		[UiExitAnimation.FLIP_OUT_X]: "flipOutX",
-		[UiExitAnimation.FLIP_OUT_Y]: "flipOutY",
-		[UiExitAnimation.FADE_OUT]: "fadeOut",
-		[UiExitAnimation.FADE_OUT_DOWN]: "fadeOutDown",
-		[UiExitAnimation.FADE_OUT_DOWNBIG]: "fadeOutDownBig",
-		[UiExitAnimation.FADE_OUT_LEFT]: "fadeOutLeft",
-		[UiExitAnimation.FADE_OUT_LEFTBIG]: "fadeOutLeftBig",
-		[UiExitAnimation.FADE_OUT_RIGHT]: "fadeOutRight",
-		[UiExitAnimation.FADE_OUT_RIGHTBIG]: "fadeOutRightBig",
-		[UiExitAnimation.FADE_OUT_UP]: "fadeOutUp",
-		[UiExitAnimation.FADE_OUT_UPBIG]: "fadeOutUpBig",
-		[UiExitAnimation.BOUNCE_OUT]: "bounceOut",
-		[UiExitAnimation.BOUNCE_OUT_DOWN]: "bounceOutDown",
-		[UiExitAnimation.BOUNCE_OUT_LEFT]: "bounceOutLeft",
-		[UiExitAnimation.BOUNCE_OUT_RIGHT]: "bounceOutRight",
-		[UiExitAnimation.BOUNCE_OUT_UP]: "bounceOutUp"
+		[UiExitAnimation.BACK_OUT_DOWN]: "animate__animated animate__backOutDown",
+		[UiExitAnimation.BACK_OUT_LEFT]: "animate__animated animate__backOutLeft",
+		[UiExitAnimation.BACK_OUT_RIGHT]: "animate__animated animate__backOutRight",
+		[UiExitAnimation.BACK_OUT_UP]: "animate__animated animate__backOutUp",
+
+		[UiExitAnimation.LIGHT_SPEED_OUT_RIGHT]: "animate__animated animate__lightSpeedOutRight",
+		[UiExitAnimation.LIGHT_SPEED_OUT_LEFT]: "animate__animated animate__lightSpeedOutLeft",
+		[UiExitAnimation.ROLL_OUT]: "animate__animated animate__rollOut",
+		[UiExitAnimation.HINGE]: "animate__animated animate__hinge",
+
+		[UiExitAnimation.ZOOM_OUT]: "animate__animated animate__zoomOut",
+		[UiExitAnimation.ZOOM_OUT_DOWN]: "animate__animated animate__zoomOutDown",
+		[UiExitAnimation.ZOOM_OUT_LEFT]: "animate__animated animate__zoomOutLeft",
+		[UiExitAnimation.ZOOM_OUT_RIGHT]: "animate__animated animate__zoomOutRight",
+		[UiExitAnimation.ZOOM_OUT_UP]: "animate__animated animate__zoomOutUp",
+
+		[UiExitAnimation.SLIDE_OUT_UP]: "animate__animated animate__slideOutUp",
+		[UiExitAnimation.SLIDE_OUT_DOWN]: "animate__animated animate__slideOutDown",
+		[UiExitAnimation.SLIDE_OUT_LEFT]: "animate__animated animate__slideOutLeft",
+		[UiExitAnimation.SLIDE_OUT_RIGHT]: "animate__animated animate__slideOutRight",
+
+		[UiExitAnimation.ROTATE_OUT]: "animate__animated animate__rotateOut",
+		[UiExitAnimation.ROTATE_OUT_DOWNLEFT]: "animate__animated animate__rotateOutDownLeft",
+		[UiExitAnimation.ROTATE_OUT_DOWNRIGHT]: "animate__animated animate__rotateOutDownRight",
+		[UiExitAnimation.ROTATE_OUT_UPLEFT]: "animate__animated animate__rotateOutUpLeft",
+		[UiExitAnimation.ROTATE_OUT_UPRIGHT]: "animate__animated animate__rotateOutUpRight",
+
+		[UiExitAnimation.FLIP_OUT_X]: "animate__animated animate__flipOutX",
+		[UiExitAnimation.FLIP_OUT_Y]: "animate__animated animate__flipOutY",
+
+		[UiExitAnimation.FADE_OUT]: "animate__animated animate__fadeOut",
+		[UiExitAnimation.FADE_OUT_DOWN]: "animate__animated animate__fadeOutDown",
+		[UiExitAnimation.FADE_OUT_DOWNBIG]: "animate__animated animate__fadeOutDownBig",
+		[UiExitAnimation.FADE_OUT_LEFT]: "animate__animated animate__fadeOutLeft",
+		[UiExitAnimation.FADE_OUT_LEFTBIG]: "animate__animated animate__fadeOutLeftBig",
+		[UiExitAnimation.FADE_OUT_RIGHT]: "animate__animated animate__fadeOutRight",
+		[UiExitAnimation.FADE_OUT_RIGHTBIG]: "animate__animated animate__fadeOutRightBig",
+		[UiExitAnimation.FADE_OUT_UP]: "animate__animated animate__fadeOutUp",
+		[UiExitAnimation.FADE_OUT_UPBIG]: "animate__animated animate__fadeOutUpBig",
+		[UiExitAnimation.FADE_OUT_TOP_LEFT]: "animate__animated animate__fadeOutTopLeft",
+		[UiExitAnimation.FADE_OUT_TOP_RIGHT]: "animate__animated animate__fadeOutTopRight",
+		[UiExitAnimation.FADE_OUT_BOTTOM_RIGHT]: "animate__animated animate__fadeOutBottomRight",
+		[UiExitAnimation.FADE_OUT_BOTTOM_LEFT]: "animate__animated animate__fadeOutBottomLeft",
+
+		[UiExitAnimation.BOUNCE_OUT]: "animate__animated animate__bounceOut",
+		[UiExitAnimation.BOUNCE_OUT_DOWN]: "animate__animated animate__bounceOutDown",
+		[UiExitAnimation.BOUNCE_OUT_LEFT]: "animate__animated animate__bounceOutLeft",
+		[UiExitAnimation.BOUNCE_OUT_RIGHT]: "animate__animated animate__bounceOutRight",
+		[UiExitAnimation.BOUNCE_OUT_UP]: "animate__animated animate__bounceOutUp"
 	};
 
-	public static POINTER_EVENTS = window.navigator.pointerEnabled ? {
+	public static REPEATABLE_ANIMATION_CSS_CLASSES = {
+		[UiRepeatableAnimation.BOUNCE]: "animate__animated animate__bounce",
+		[UiRepeatableAnimation.FLASH]: "animate__animated animate__flash",
+		[UiRepeatableAnimation.PULSE]: "animate__animated animate__pulse",
+		[UiRepeatableAnimation.RUBBER_BAND]: "animate__animated animate__rubberBand",
+		[UiRepeatableAnimation.SHAKE_X]: "animate__animated animate__shakeX",
+		[UiRepeatableAnimation.SHAKE_Y]: "animate__animated animate__shakeY",
+		[UiRepeatableAnimation.HEAD_SHAKE]: "animate__animated animate__headShake",
+		[UiRepeatableAnimation.SWING]: "animate__animated animate__swing",
+		[UiRepeatableAnimation.TADA]: "animate__animated animate__tada",
+		[UiRepeatableAnimation.WOBBLE]: "animate__animated animate__wobble",
+		[UiRepeatableAnimation.JELLO]: "animate__animated animate__jello",
+		[UiRepeatableAnimation.HEART_BEAT]: "animate__animated animate__heartBeat",
+		[UiRepeatableAnimation.FLIP]: "animate__animated animate__flip",
+
+		// custom:
+		[UiRepeatableAnimation.BLINK]: "ta-blink",
+		[UiRepeatableAnimation.BLINK_SUBTLE]: "ta-blink-subtle"
+	}
+
+	public static POINTER_EVENTS = {
 		start: 'pointerdown',
 		move: 'pointermove',
 		end: 'pointerup'
-	} : window.navigator.msPointerEnabled ? {
-		start: 'MSPointerDown',
-		move: 'MSPointerMove',
-		end: 'MSPointerUp'
-	} : {
-		start: 'mousedown touchstart',
-		move: 'mousemove touchmove',
-		end: 'mouseup touchend'
 	};
 
 	static get SCROLLBAR_WIDTH() {
@@ -140,27 +178,24 @@ export class Constants {
 	}
 
 	private static calculateScrollbarWidth() {
-		const $div = $(`<div id="ASDF" style="width: 100px; height: 100px; position: absolute; top: -10000px">`)
-			.appendTo(document.body);
-		const widthNoScroll = $div[0].clientWidth;
-		$div.css("overflow-y", "scroll");
-		const widthWithScroll = $div[0].clientWidth;
-		$div.detach();
+		const $div = parseHtml(`<div id="ASDF" style="width: 100px; height: 100px; position: absolute; top: -10000px">`);
+		document.body.appendChild($div);
+		const widthNoScroll = $div.clientWidth;
+		$div.style.overflowY = "scroll";
+		const widthWithScroll = $div.clientWidth;
+		$div.remove();
 		return widthNoScroll - widthWithScroll;
 	}
 }
 
+export function getAutoCompleteOffValue(): string {
+	return "no";
+}
+
 export function hasVerticalScrollBar(element: HTMLElement): boolean {
 	return element.scrollWidth < element.offsetWidth;
 }
 
-export const matchingModesMapping: { [x in UiTextMatchingMode]: 'contains' | 'prefix' | 'prefix-word' | 'prefix-levenshtein' | 'levenshtein' } = {
-	[UiTextMatchingMode.PREFIX]: "prefix",
-	[UiTextMatchingMode.PREFIX_WORD]: "prefix-word",
-	[UiTextMatchingMode.CONTAINS]: "contains",
-	[UiTextMatchingMode.SIMILARITY]: "levenshtein"
-};
-
 export function loadScriptAsynchronously(url: string, callback?: EventListener) {
 	const scriptElement = document.createElement('script');
 	scriptElement.src = url;
@@ -175,10 +210,11 @@ export interface ClickOutsideHandle {
 	cancel: () => void
 }
 
-export function doOnceOnClickOutsideElement(elements: JQuery, handler: (e?: JQueryMouseEventObject) => any, useCapture = false): ClickOutsideHandle {
+export function doOnceOnClickOutsideElement(elements: Element | NodeList | Element[], handler: (e?: MouseEvent) => any, useCapture = false): ClickOutsideHandle {
 	const eventType = "mousedown";
-	let handlerWrapper = (e: JQueryMouseEventObject) => {
-		if (!elements.toArray().some((element) => e.target === element || $(e.target).parents().toArray().indexOf(element) !== -1)) {
+	const elementsAsArray = elements instanceof Element ? [elements] : Array.from(elements);
+	let handlerWrapper = (e: MouseEvent) => {
+		if (closestAncestorMatching(e.target as Element, ancestor => (elementsAsArray.indexOf(ancestor) !== -1), true) == null) {
 			handler(e);
 			removeMouseDownListener();
 		}
@@ -319,101 +355,170 @@ export function formatDecimalNumber(integerNumber: number, precision: number, de
 	return (integerNumber < 0 ? '-' : '') + formattedIntegerPart + decimalSeparator + fractionalPart;
 }
 
-export function applyDisplayMode($outer: JQuery, $inner: JQuery, displayMode: UiPageDisplayMode | any, options?: {
-	innerPreferedDimensions?: { // inferred for img
+export function applyDisplayMode($outer: HTMLElement, $inner: HTMLElement, displayMode: UiPageDisplayMode | any, options?: {
+	innerPreferredDimensions?: { // only needed for ORIGINAL_SIZE!
 		width: number,
 		height: number,
-	}
+	},
 	zoomFactor?: number,
 	padding?: number,
-	considerScrollbars?: Boolean
+	considerScrollbars?: boolean
 }) {
 	options = $.extend({}, options); // copy the options as we are potentially making changes to the object...
-	if (options.innerPreferedDimensions == null || !options.innerPreferedDimensions.width || !options.innerPreferedDimensions.height) {
-		if ($inner[0] instanceof HTMLImageElement) {
-			let imgElement = <HTMLImageElement> $($inner)[0];
-			options.innerPreferedDimensions = {
+	if (options.innerPreferredDimensions == null || !options.innerPreferredDimensions.width || !options.innerPreferredDimensions.height) {
+		if ($inner instanceof HTMLImageElement && $inner.naturalHeight > 0) {
+			let imgElement = <HTMLImageElement>$($inner)[0];
+			options.innerPreferredDimensions = {
 				width: imgElement.naturalWidth,
 				height: imgElement.naturalHeight
 			}
 		} else {
-			$inner.css({
-				width: "100%",
-				height: "100%"
-			});
+			$inner.style.width = "100%";
+			$inner.style.height = "100%";
 			return;
 		}
 	}
-	options.zoomFactor = options.zoomFactor || 1;
 	if (options.padding == null) {
-		options.padding = parseInt($outer.css("padding-left")) || 0;
+		options.padding = parseInt($outer.style.paddingLeft) || 0;
 	}
+	let availableWidth = $outer.offsetWidth - 2 * options.padding;
+	let availableHeight = $outer.offsetHeight - 2 * options.padding;
+
+	let size = calculateDisplayModeInnerSize({
+		width: availableWidth,
+		height: availableHeight
+	}, options.innerPreferredDimensions, displayMode, options.zoomFactor, options.considerScrollbars);
+	$inner.style.width = size.width + "px";
+	$inner.style.height = size.height + "px";
+}
 
-	let availableWidth = $outer.width() - 2 * options.padding;
-	let availableHeight = $outer.height() - 2 * options.padding;
-	let viewPortAspectRatio = availableWidth / availableHeight;
-	let imageAspectRatio = options.innerPreferedDimensions.width / options.innerPreferedDimensions.height;
-
-	logger.trace(`outer dimensions: ${availableWidth}x${availableHeight}`);
-	logger.trace(`inner dimensions: ${options.innerPreferedDimensions.width}x${options.innerPreferedDimensions.height}`);
+export function calculateDisplayModeInnerSize(containerDimensions: { width: number, height: number },
+											  innerPreferredDimensions: { width: number, height: number },
+											  displayMode: UiPageDisplayMode | any,
+											  zoomFactor: number = 1,
+											  considerScrollbars = false
+): { width: number, height: number } {
+	let viewPortAspectRatio = containerDimensions.width / containerDimensions.height;
+	let imageAspectRatio = innerPreferredDimensions.width / innerPreferredDimensions.height;
+
+	logger.trace(`outer dimensions: ${containerDimensions.width}x${containerDimensions.height}`);
+	logger.trace(`inner dimensions: ${innerPreferredDimensions.width}x${innerPreferredDimensions.height}`);
 	logger.trace(`displayMode: ${UiPageDisplayMode[displayMode]}`);
 
 	if (displayMode === UiPageDisplayMode.FIT_WIDTH) {
-		let width = Math.floor(availableWidth * options.zoomFactor);
-		if (options.considerScrollbars && options.zoomFactor <= 1 && Math.ceil(width / imageAspectRatio) > availableHeight) {
+		let width = Math.floor(containerDimensions.width * zoomFactor);
+		if (considerScrollbars && zoomFactor <= 1 && Math.ceil(width / imageAspectRatio) > containerDimensions.height) {
 			// There will be a vertical scroll bar, so make sure the width will not result in a horizontal scrollbar, too
 			// NOTE: Chrome still shows scrollbars sometimes. https://bugs.chromium.org/p/chromium/issues/detail?id=240772&can=2&start=0&num=100&q=&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified&groupby=&sort=
-			width = Math.min(width, availableWidth - Constants.SCROLLBAR_WIDTH);
+			width = Math.min(width, containerDimensions.width - Constants.SCROLLBAR_WIDTH);
 		}
-		$inner.css({
-			width: width + "px",
-			height: "auto"
-		});
+		return {width: width, height: width / imageAspectRatio};
 	} else if (displayMode === UiPageDisplayMode.FIT_HEIGHT) {
-		let height = Math.floor(availableHeight * options.zoomFactor);
-		if (options.considerScrollbars && options.zoomFactor <= 1 && height * imageAspectRatio > availableWidth) {
+		let height = Math.floor(containerDimensions.height * zoomFactor);
+		if (considerScrollbars && zoomFactor <= 1 && height * imageAspectRatio > containerDimensions.width) {
 			// There will be a horizontal scroll bar, so make sure the width will not result in a vertical scrollbar, too
 			// NOTE: Chrome still shows scrollbars sometimes. https://bugs.chromium.org/p/chromium/issues/detail?id=240772&can=2&start=0&num=100&q=&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified&groupby=&sort=
-			height = Math.min(height, availableHeight - Constants.SCROLLBAR_WIDTH);
+			height = Math.min(height, containerDimensions.height - Constants.SCROLLBAR_WIDTH);
 		}
-		$inner.css({
-			width: "auto",
-			height: height + "px"
-		});
+		return {width: height * imageAspectRatio, height: height};
 	} else if (displayMode === UiPageDisplayMode.FIT_SIZE) {
 		if (imageAspectRatio > viewPortAspectRatio) {
-			let width = Math.floor(availableWidth * options.zoomFactor);
-			$inner.css({
-				width: width + "px",
-				height: imageAspectRatio ? width / imageAspectRatio : "auto"
-			});
+			let width = Math.floor(containerDimensions.width * zoomFactor);
+			return {width: width, height: width / imageAspectRatio};
 		} else {
-			let height = Math.floor(availableHeight * options.zoomFactor);
-			$inner.css({
-				width: imageAspectRatio ? height * imageAspectRatio : "auto",
-				height: height + "px"
-			});
+			let height = Math.floor(containerDimensions.height * zoomFactor);
+			return {width: height * imageAspectRatio, height: height};
 		}
 	} else if (displayMode === UiPageDisplayMode.COVER) {
 		if (imageAspectRatio < viewPortAspectRatio) {
-			$inner.css({
-				width: Math.floor(availableWidth * options.zoomFactor) + "px",
-				height: "auto"
-			});
+			let width = Math.floor(containerDimensions.width * zoomFactor);
+			return {width: width, height: width / imageAspectRatio};
 		} else {
-			$inner.css({
-				width: "auto",
-				height: Math.floor(availableHeight * options.zoomFactor) + "px"
-			});
+			let height = Math.floor(containerDimensions.height * zoomFactor);
+			return {width: height * imageAspectRatio, height: height};
 		}
 	} else { // ORIGINAL_SIZE
-		$inner.css({
-			width: (options.innerPreferedDimensions.width * options.zoomFactor) + "px",
-			height: "auto"
-		});
+		let width = innerPreferredDimensions.width * zoomFactor;
+		return {width: width, height: width / imageAspectRatio};
 	}
 }
 
+export type Direction = "n" | "e" | "s" | "w" | "ne" | "se" | "nw" | "sw";
+
+export function boundSelection(
+	selection: { left: number, top: number, width: number, height: number },
+	bounds: { width: number, height: number },
+	aspectRatio?: number,
+	fixedAt?: Direction
+) {
+	let newSelection = {...selection};
+
+	if (fixedAt == null) {
+		if (newSelection.width > bounds.width) {
+			newSelection.width = bounds.width;
+		}
+		if (newSelection.height > bounds.height) {
+			newSelection.height = bounds.height;
+		}
+		if (aspectRatio != null && aspectRatio > 0) {
+			if (newSelection.width / newSelection.height > aspectRatio) {
+				newSelection.width = newSelection.height * aspectRatio;
+			} else {
+				newSelection.height = newSelection.width / aspectRatio;
+			}
+		}
+		if (newSelection.left < 0) {
+			newSelection.left = 0;
+		}
+		if (newSelection.left + newSelection.width > bounds.width) {
+			newSelection.left = bounds.width - newSelection.width;
+		}
+		if (newSelection.top < 0) {
+			newSelection.top = 0;
+		}
+		if (newSelection.top + newSelection.height > bounds.height) {
+			newSelection.top = bounds.height - newSelection.height;
+		}
+	} else {
+		let selectionXCenter = selection.left + selection.width / 2;
+		let selectionYCenter = selection.top + selection.height / 2;
+		let maxWidth =
+			fixedAt == "n" || fixedAt == "s" ? Math.min(Math.min(selectionXCenter, bounds.width - selectionXCenter) * 2, bounds.width) :
+				fixedAt == "e" || fixedAt == "ne" || fixedAt == "se" ? Math.min(selection.left + selection.width, bounds.width) :
+					fixedAt == "w" || fixedAt == "nw" || fixedAt == "sw" ? Math.min(bounds.width - selection.left, bounds.width)
+						: bounds.width;
+		let maxHeight =
+			fixedAt == "e" || fixedAt == "w" ? Math.min(Math.min(selectionYCenter, bounds.height - selectionYCenter) * 2, bounds.height) :
+				fixedAt == "s" || fixedAt == "se" || fixedAt == "sw" ? Math.min(selection.top + selection.height, bounds.height) :
+					fixedAt == "n" || fixedAt == "ne" || fixedAt == "nw" ? Math.min(bounds.height - selection.top, bounds.height)
+						: bounds.height;
+
+		newSelection.width = Math.min(newSelection.width, maxWidth);
+		newSelection.height = Math.min(newSelection.height, maxHeight);
+
+		if (aspectRatio != null && aspectRatio > 0) {
+			if (aspectRatio > newSelection.width / newSelection.height) {
+				newSelection.height = newSelection.width / aspectRatio;
+			} else if (aspectRatio < newSelection.width / newSelection.height) {
+				newSelection.width = newSelection.height * aspectRatio;
+			}
+		}
+
+		newSelection.left =
+			fixedAt == "n" || fixedAt == "s" ? selectionXCenter - newSelection.width / 2 :
+				fixedAt == "e" || fixedAt == "ne" || fixedAt == "se" ? selection.left + selection.width - newSelection.width :
+					fixedAt == "w" || fixedAt == "nw" || fixedAt == "sw" ? selection.left
+						: 0;
+		newSelection.top =
+			fixedAt == "e" || fixedAt == "w" ? selectionYCenter - newSelection.height / 2 :
+				fixedAt == "s" || fixedAt == "se" || fixedAt == "sw" ? selection.top + selection.height - newSelection.height :
+					fixedAt == "n" || fixedAt == "ne" || fixedAt == "nw" ? selection.top
+						: 0;
+	}
+	return newSelection;
+}
+
+
 // ===== FULLSCREEN HANDLING ===== (maybe extract this to own file...)
 
 document.addEventListener("fullscreenchange", fullScreenChangeHandler);
@@ -421,28 +526,23 @@ document.addEventListener("webkitfullscreenchange", fullScreenChangeHandler);
 document.addEventListener("mozfullscreenchange", fullScreenChangeHandler);
 document.addEventListener("MSFullscreenChange", fullScreenChangeHandler);
 
-export function enterFullScreen(component: UiComponent<UiComponentConfig> | JQuery | Element) {
-	let element: Element;
-	if (component instanceof UiComponent) {
-		element = component.getMainDomElement()[0];
-	} else {
-		element = $(component)[0];
-	}
-	$(element).addClass("fullscreen");
+export function enterFullScreen(component: UiComponent<UiComponentConfig>) {
+	let element: Element = component.getMainElement();
+	element.classList.add("fullscreen");
 	if (element.requestFullscreen) {
 		element.requestFullscreen();
 	} else if ((element as any).msRequestFullscreen) {
 		(element as any).msRequestFullscreen();
 	} else if ((element as any).mozRequestFullScreen) {
 		(element as any).mozRequestFullScreen();
-	} else if (element.webkitRequestFullscreen) {
-		element.webkitRequestFullscreen();
+	} else if ((element as any).webkitRequestFullscreen) {
+		(element as any).webkitRequestFullscreen();
 	}
 }
 
 function fullScreenChangeHandler(e: Event) {
 	if (!getFullScreenElement()) {
-		$(e.target).removeClass("fullscreen");
+		(e.target as Element).classList.remove("fullscreen");
 	}
 }
 
@@ -472,88 +572,55 @@ export function exitFullScreen() {
 	}
 }
 
-export function hexColorStringToRgb(hexColorString: string) {
-	const rgb = parseInt(hexColorString.substring(1), 16);   // convert rrggbb to decimal
-	let r;
-	let g;
-	let b;
-	if (hexColorString.length === 7) {
-		r = (rgb >> 16) & 0xff;  // extract red
-		g = (rgb >> 8) & 0xff;  // extract green
-		b = (rgb >> 0) & 0xff;  // extract blue
-	} else {
-		r = (((rgb >> 8) & 0xf) << 4) + ((rgb >> 8) & 0xf);  // extract red
-		g = (((rgb >> 4) & 0xf) << 4) + ((rgb >> 4) & 0xf);  // extract green
-		b = ((rgb & 0xf) << 4) + (rgb & 0xf);  // extract blue
-		logger.trace(`rgb: ${r} ${g} ${b}`);
-	}
-	return {r, g, b};
-}
-
-export function adjustIfColorTooBright(c: string, maxLuma256: number = 210) {
-	if (c.indexOf('#') !== 0 || (c.length !== 4 && c.length !== 7)) {
-		return c; // do not normalize. performance is more important than supporting any kind of color coding.
-	}
-	const rgb = hexColorStringToRgb(c);
-	const luma = 0.2126 * rgb.r + 0.7152 * rgb.g + 0.0722 * rgb.b; // per ITU-R BT.709
-	logger.trace("luma: " + luma);
-	if (luma > maxLuma256) {
-		let adjustionFactor = (maxLuma256 / luma);
-		return `rgb(${Math.floor(rgb.r * adjustionFactor)}, ${Math.floor(rgb.g * adjustionFactor)}, ${Math.floor(rgb.b * adjustionFactor)})`;
-	} else {
-		return c;
-	}
-}
-
-export function positionDropDown($button: JQuery, $dropDown: JQuery, {
+export function positionDropDown($button: Element, $dropDown: HTMLElement, {
 	viewPortPadding = 10,
 	minHeightBeforeFlipping = 200
 }) {
-	$dropDown.removeClass("pseudo-hidden");
+	$dropDown.classList.remove("pseudo-hidden");
 
-	let maxHeight = window.innerHeight - ($button.offset().top + $button.outerHeight()) - viewPortPadding;
-	let maxFlippedHeight = $button.offset().top - viewPortPadding;
+	let boundingClientRect = $button.getBoundingClientRect();
+	let maxHeight = window.innerHeight - (boundingClientRect.top + boundingClientRect.height) - viewPortPadding;
+	let maxFlippedHeight = boundingClientRect.top - viewPortPadding;
 	let flip = maxHeight < minHeightBeforeFlipping && maxFlippedHeight > maxHeight;
 
-	(<any>$dropDown).position({
+	$($dropDown).position({
 		my: "left " + (flip ? "bottom" : "top"),
 		at: "left " + (flip ? "top" : "bottom"),
 		of: $button,
 		collision: "fit none"
 	});
-	$dropDown.find('> .background-color-div, > .background-color-div > *').css({
-		"max-height": (flip ? maxFlippedHeight : maxHeight) + "px"
-	});
-	if ($dropDown[0].offsetWidth > window.innerWidth - 2 * viewPortPadding) {
-		$dropDown.css("width", "auto");
-		$dropDown.css("left", viewPortPadding + "px");
-		$dropDown.css("right", viewPortPadding + "px");
-	} else if ($dropDown[0].offsetLeft + $dropDown[0].offsetWidth > window.innerWidth - viewPortPadding) {
-		$dropDown.css("left", "auto");
-		$dropDown.css("right", viewPortPadding + "px");
+	$dropDown.querySelector<HTMLElement>(':scope > .background-color-div').style.maxHeight = (flip ? maxFlippedHeight : maxHeight) + "px";
+	$dropDown.querySelector<HTMLElement>(':scope > .background-color-div > *').style.maxHeight = (flip ? maxFlippedHeight : maxHeight) + "px";
+	if ($dropDown.offsetWidth > window.innerWidth - 2 * viewPortPadding) {
+		$dropDown.style.width = "auto";
+		$dropDown.style.left = viewPortPadding + "px";
+		$dropDown.style.right = viewPortPadding + "px";
+	} else if ($dropDown.offsetLeft + $dropDown.offsetWidth > window.innerWidth - viewPortPadding) {
+		$dropDown.style.left = "auto";
+		$dropDown.style.right = viewPortPadding + "px";
 	}
 }
 
-export function manipulateWithoutTransitions($element: JQuery, action: Function, transitionEnabled = false) {
+export function manipulateWithoutTransitions($element: HTMLElement, action: Function, transitionEnabled = false) {
 	if (!transitionEnabled) {
-		$element.addClass('notransition');
+		$element.classList.add('notransition');
 	}
 	action();
 	if (!transitionEnabled) {
-		$element[0].offsetHeight; // Trigger a reflow, flushing the CSS changes
-		$element.removeClass('notransition');
+		$element.offsetHeight; // Trigger a reflow, flushing the CSS changes
+		$element.classList.remove('notransition');
 	}
 }
 
-export function focusNextByTabIndex(navigatableElements: string | HTMLElement[] | JQuery, navDirection: -1 | 1): boolean {
-	let selectables: HTMLElement[] = $(navigatableElements).toArray().sort((e1: HTMLElement, e2: HTMLElement) => e2.tabIndex - e1.tabIndex);
+export function focusNextByTabIndex(navigatableElements: HTMLElement[], navDirection: -1 | 1): boolean {
+	navigatableElements.sort((e1: HTMLElement, e2: HTMLElement) => e2.tabIndex - e1.tabIndex);
 	let current = document.activeElement;
-	let currentIndex = selectables.indexOf(current as HTMLElement);
-	log.getLogger("Common").trace("selectables: " + selectables.length + "; current: " + currentIndex);
+	let currentIndex = navigatableElements.indexOf(current as HTMLElement);
+	log.getLogger("Common").trace("selectables: " + navigatableElements.length + "; current: " + currentIndex);
 	let newIndex = currentIndex + navDirection;
-	if (newIndex > 0 && newIndex < selectables.length) {
-		logger.trace(selectables[newIndex]);
-		selectables[newIndex].focus();
+	if (newIndex > 0 && newIndex < navigatableElements.length) {
+		logger.trace(navigatableElements[newIndex]);
+		navigatableElements[newIndex].focus();
 		return true;
 	} else {
 		return false;
@@ -600,67 +667,6 @@ export function stableSort<T>(arr: T[], cmpFunc: (a: T, b: T) => number) {
 	});
 }
 
-export function showNotification(html: string, config?: {
-	backgroundColor?: UiColorConfig,
-	position?: UiNotification_Position,
-	displayTimeInMillis?: number,
-	dismissable?: boolean,
-	showProgressBar?: boolean,
-	entranceAnimation?: UiEntranceAnimation,
-	exitAnimation?: UiExitAnimation
-}) {
-	config = {
-		backgroundColor: {_type: "UiColor", red: 255, green: 255, blue: 255, alpha: 1},
-		position: UiNotification_Position.TOP_RIGHT,
-		displayTimeInMillis: 3000,
-		dismissable: true,
-		showProgressBar: true,
-		entranceAnimation: UiEntranceAnimation.SLIDE_IN_RIGHT,
-		exitAnimation: UiExitAnimation.SLIDE_OUT_RIGHT,
-		...config
-	};
-
-	let position2placement = {
-		[UiNotification_Position.TOP_LEFT]: {from: 'top', align: 'left'},
-		[UiNotification_Position.TOP_CENTER]: {from: 'top', align: 'center'},
-		[UiNotification_Position.TOP_RIGHT]: {from: 'top', align: 'right'},
-		[UiNotification_Position.BOTTOM_LEFT]: {from: 'bottom', align: 'left'},
-		[UiNotification_Position.BOTTOM_CENTER]: {from: 'bottom', align: 'center'},
-		[UiNotification_Position.BOTTOM_RIGHT]: {from: 'bottom', align: 'right'},
-	};
-
-	$.notify({message: null}, {
-		// settings
-		element: 'body',
-		position: null,
-		allow_dismiss: config.dismissable,
-		newest_on_top: false,
-		showProgressbar: config.showProgressBar,
-		placement: position2placement[config.position],
-		offset: 20,
-		spacing: 10,
-		z_index: 1031,
-		delay: config.displayTimeInMillis,
-		timer: 1000,
-		mouse_over: null,
-		animate: {
-			enter: 'animated ' + Constants.ENTRANCE_ANIMATION_CSS_CLASSES[config.entranceAnimation],
-			exit: 'animated ' + Constants.EXIT_ANIMATION_CSS_CLASSES[config.exitAnimation]
-		},
-		onShow: null,
-		onShown: null,
-		onClose: null,
-		onClosed: null,
-		template: `<div data-notify="container" class="col-xs-11 col-sm-4 col-lg-3" style="background-color: ${createUiColorCssString(config.backgroundColor)}" role="alert">
-    <div data-notify="dismiss" style="background-image: url(/resources/window-close-grey.png)"></div>
-    <div class="content">${html}</div>
-    <div class="progress" data-notify="progressbar">
-		<div class="progress-bar progress-bar-{0}" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
-	</div>
-</div>`
-	});
-}
-
 export function getMicrosoftBrowserVersion() {
 	const ua = window.navigator.userAgent;
 	const msie = ua.indexOf('MSIE ');
@@ -683,44 +689,28 @@ export function getMicrosoftBrowserVersion() {
 	return false;
 }
 
-export function getIconPath(context: TeamAppsUiContext, iconName: string, iconSize: number, ignoreRetina?: boolean): string {
-	if (!iconName) {
-		return null;
-	}
-	if (!ignoreRetina) {
-		iconSize = context.isHighDensityScreen ? iconSize * 2 : iconSize;
-	}
-	if (iconSize > 128) { // there are currently no icons larger than 128px
-		iconSize = 128;
-	}
-	if (iconName.indexOf("/") === 0) {
-		return iconName; // hack for static resources instead of icons...
-	}
-	return context.config.iconPath + '/' + iconSize + '/' + iconName;
-}
-
-export function enableScrollViaDragAndDrop($scrollContainer: JQuery) {
+export function enableScrollViaDragAndDrop($scrollContainer: HTMLElement) {
 	function mousedownHandler(startEvent: MouseEvent) {
-		$scrollContainer.css("cursor", "move");
+		$scrollContainer.style.cursor = "move";
 		startEvent.preventDefault();
-		let initialScrollLeft = $scrollContainer.scrollLeft();
-		let initialScrollTop = $scrollContainer.scrollTop();
-		const moveEvent = 'mousemove';
-		const endEvent = 'mouseup';
-		$(document).on(moveEvent, (e) => {
+		let initialScrollLeft = $scrollContainer.scrollLeft;
+		let initialScrollTop = $scrollContainer.scrollTop;
+		let dragHandler = (e: PointerEvent) => {
 			let diffX = e.pageX - startEvent.pageX;
 			let diffY = e.pageY - startEvent.pageY;
-			$scrollContainer.scrollLeft(initialScrollLeft - diffX);
-			$scrollContainer.scrollTop(initialScrollTop - diffY);
-		});
-		$(document).on(endEvent, (event) => {
-			$(document).unbind(moveEvent);
-			$(document).unbind(endEvent);
-			$scrollContainer.css("cursor", "");
-		});
+			$scrollContainer.scrollLeft = initialScrollLeft - diffX;
+			$scrollContainer.scrollTop = initialScrollTop - diffY;
+		};
+		let dropHandler = (e: PointerEvent) => {
+			document.removeEventListener('pointermove', dragHandler);
+			document.removeEventListener('pointerup', dropHandler);
+			$scrollContainer.style.cursor = "";
+		};
+		document.addEventListener('pointermove', dragHandler);
+		document.addEventListener('pointerup', dropHandler);
 	}
 
-	$scrollContainer[0].addEventListener("mousedown", (e) => mousedownHandler(e));
+	$scrollContainer.addEventListener("mousedown", (e) => mousedownHandler(e));
 }
 
 export function arraysEqual(a: any[], b: any[]) {
@@ -740,31 +730,39 @@ export function arraysEqual(a: any[], b: any[]) {
 	}
 }
 
-export function convertJavaDateTimeFormatToMomentDateTimeFormat(javaFormat: string): string {
-	if (javaFormat == null) {
-		return null;
+export function deepEquals(x: any, y: any): boolean {
+	if (x != null && y != null && typeof x === 'object' && typeof x === typeof y) {
+		if (Array.isArray(x)) {
+			return x.length === y.length && x.every((xi, i) => deepEquals(x[i], y[i]));
+		} else {
+			return Object.keys(x).length === Object.keys(y).length &&
+				Object.keys(x).every(key => deepEquals(x[key], y[key]));
+		}
 	} else {
-		return (moment() as any).toMomentFormatString(javaFormat);
+		return x === y
+			|| ((x == null) && (y == null)); // make no difference between undefined and null!
 	}
 }
 
-export function insertAtIndex($parent: JQuery | Element, $child: JQuery | Element | string, index: number) {
-	let effectiveIndex = Math.min($($parent).children().length, index);
+export function insertAtIndex($parent: Element, $child: Element, index: number) {
+	let effectiveIndex = Math.min($parent.childElementCount, index);
 	if (effectiveIndex === 0) {
-		$($parent).prepend($child);
+		$parent.prepend($child);
+	} else if (effectiveIndex === $parent.childElementCount) {
+		$parent.insertAdjacentElement('beforeend', $child);
 	} else {
-		$($parent).find(`>:nth-child(${effectiveIndex})`).after($child);
+		$parent.children[effectiveIndex].insertAdjacentElement('beforebegin', $child);
 	}
 }
 
 export function maximizeComponent(component: UiComponent, maximizeAnimationCallback?: () => void) {
-	const $parentDomElement = component.getMainDomElement().parent();
-	const scrollTop = $(document).scrollTop();
-	const scrollLeft = $(document).scrollLeft();
-	const offset = component.getMainDomElement().offset();
+	const $parentDomElement = component.getMainElement().parentElement;
+	const scrollTop = window.scrollY;
+	const scrollLeft = window.scrollX;
+	const offset = component.getMainElement().getBoundingClientRect();
 
-	const changingCssProperties: (keyof CSSStyleDeclaration)[] = ["position", "top", "left", "width", "height", "zIndex"];
-	const style = component.getMainDomElement()[0].style as CSSStyleDeclaration;
+	const changingCssProperties: ["position", "top", "left", "width", "height", "zIndex"] = ["position", "top", "left", "width", "height", "zIndex"];
+	const style = component.getMainElement().style as CSSStyleDeclaration;
 	const originalCssValues = changingCssProperties.reduce((properties, cssPropertyName) => {
 		properties[cssPropertyName] = style[cssPropertyName];
 		return properties;
@@ -773,24 +771,21 @@ export function maximizeComponent(component: UiComponent, maximizeAnimationCallb
 	const animationStartCssValues = {
 		top: (offset.top - scrollTop) + "px",
 		left: (offset.left - scrollLeft) + "px",
-		width: component.getMainDomElement().width(),
-		height: component.getMainDomElement().height(),
+		width: offset.width,
+		height: offset.height,
 	};
-	component.getMainDomElement().css({
-		position: 'fixed',
-		"z-index": 1000000,
+	Object.assign(component.getMainElement().style, {
 		...animationStartCssValues
-	}).appendTo(
-		$('body')
-	).addClass(
-		"teamapps-component-maximized"
-	).animate({
+	});
+	document.body.appendChild(component.getMainElement());
+	component.getMainElement().classList.add("teamapps-component-maximized");
+	$(component.getMainElement()).animate({
 		top: "5px",
 		left: "5px",
-		width: ($(window).width() - 10),
-		height: ($(window).height() - 10)
+		width: (window.innerWidth - 10),
+		height: (window.innerHeight - 10)
 	}, 100, 'swing', () => {
-		component.getMainDomElement().css({
+		css(component.getMainElement(), {
 			width: "calc(100% - 10px)",
 			height: "calc(100% - 10px)"
 		});
@@ -798,10 +793,10 @@ export function maximizeComponent(component: UiComponent, maximizeAnimationCallb
 	});
 
 	let restore = (restoreAnimationCallback?: () => void) => {
-		component.getMainDomElement().animate(animationStartCssValues, 100, 'swing', () => {
-			component.getMainDomElement().css(originalCssValues);
-			component.getMainDomElement().removeClass("teamapps-component-maximized");
-			component.getMainDomElement().appendTo($parentDomElement);
+		$(component.getMainElement()).animate(animationStartCssValues, 100, 'swing', () => {
+			Object.assign(component.getMainElement().style, originalCssValues);
+			component.getMainElement().classList.remove("teamapps-component-maximized");
+			$parentDomElement.appendChild(component.getMainElement());
 			restoreAnimationCallback && restoreAnimationCallback();
 		});
 	};
@@ -809,12 +804,6 @@ export function maximizeComponent(component: UiComponent, maximizeAnimationCallb
 	return restore;
 }
 
-export function flattenArray<T>(array: (T | T[])[]): T[] {
-	return array.reduce(function (flat: T[], toFlatten: T | T[]) {
-		return flat.concat(Array.isArray(toFlatten) ? flattenArray(toFlatten) : toFlatten);
-	}, [] as any);
-}
-
 export function removeTags(value: string, ...tagNames: string[]) {
 	if (value == null) {
 		value = "";
@@ -852,12 +841,47 @@ export function selectElementContents(domElement: Node, start?: number, end?: nu
 }
 
 export function parseHtml<E extends HTMLElement>(htmlString: string): E {
-	const node: E = new DOMParser().parseFromString(htmlString, 'text/html').querySelector('body > *');
-	node.remove(); // detach from DOMParser <body>!
-	return node;
+	// let tagStartCount = (htmlString.match(/<\w+/g) || []).length;
+	// let tagEndCount = (htmlString.match(/<\//g) || []).length;
+	// if (tagStartCount > 1 && tagStartCount !== tagEndCount) {
+	// 	throw new Error("HTML strings need to have explicit closing tags! " + htmlString);
+	// }
+	// const node: E = new DOMParser().parseFromString(htmlString, 'text/html').querySelector('html > * > *');
+	// node.remove(); // detach from DOMParser <body>!
+	// return node;
+
+	// let tmpl = document.createElement('template');
+	// tmpl.innerHTML = htmlString;
+	// return tmpl.content.cloneNode(true).firstChild as E;
+	htmlString = htmlString.trim();
+	if (!htmlString.startsWith("<") || !htmlString.endsWith(">")) {
+		htmlString = "<div>" + htmlString + "</div>";
+	}
+	return $(htmlString)[0] as E;
 }
 
-export function prependChild(parent: Element, child: Element) {
+export function parseSvg<E extends Element>(htmlString: string): E {
+	// let tagStartCount = (htmlString.match(/<\w+/g) || []).length;
+	// let tagEndCount = (htmlString.match(/<\//g) || []).length;
+	// if (tagStartCount !== tagEndCount) {
+	// 	throw "SVG strings need to have explicit closing tags! " + htmlString;
+	// }
+	// const node: E = new DOMParser().parseFromString(htmlString, 'application/xml').getRootNode() as E;
+	// node.remove(); // detach from DOMParser <body>!
+	// return node;
+
+	return $(htmlString)[0] as unknown as E;
+}
+
+export function elementIndex(node: Element) {
+	let i = 0;
+	while ((node = node.previousElementSibling) != null) {
+		i++;
+	}
+	return i;
+}
+
+export function prependChild(parent: Node, child: Node) {
 	if (parent.childNodes.length > 0) {
 		parent.insertBefore(child, parent.firstChild);
 	} else {
@@ -865,6 +889,14 @@ export function prependChild(parent: Element, child: Element) {
 	}
 }
 
+export function insertBefore(newNode: Node, referenceNode: Node) {
+	referenceNode.parentNode.insertBefore(newNode, referenceNode);
+}
+
+export function insertAfter(newNode: Node, referenceNode: Node) {
+	referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling /* may be null ==> inserted at end!*/);
+}
+
 export function outerWidthIncludingMargins(el: HTMLElement) {
 	var width = el.offsetWidth;
 	var style = getComputedStyle(el);
@@ -872,12 +904,47 @@ export function outerWidthIncludingMargins(el: HTMLElement) {
 	return width;
 }
 
-export function closestAncestor(el: HTMLElement, selector: string, includeSelf = false) {
+export function outerHeightIncludingMargins(el: HTMLElement) {
+	var height = el.offsetHeight;
+	var style = getComputedStyle(el);
+	height += parseInt(style.marginTop) + parseInt(style.marginBottom);
+	return height;
+}
+
+export function addDelegatedEventListener<K extends keyof HTMLElementEventMap>(rootElement: HTMLElement, selector: string, eventTypes: K | K[], listener: (element: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions) {
+	if (!Array.isArray(eventTypes)) {
+		eventTypes = [eventTypes];
+	}
+	for (const eventType of eventTypes) {
+		rootElement.addEventListener(eventType, ev => {
+			const target = selector != null ? closestAncestor(ev.target as HTMLElement, selector, true, rootElement) : ev.target as HTMLElement;
+			if (target != null) {
+				listener(target, ev);
+			}
+		}, options)
+	}
+}
+
+export function closestAncestor(el: HTMLElement, selector: string, includeSelf = false, $root: Element = document.body) {
 	let currentNode: HTMLElement = (includeSelf ? el : el.parentNode) as HTMLElement;
 	while (currentNode) {
 		if (currentNode.matches(selector)) {
 			return currentNode;
 		}
+		if (currentNode == $root) {
+			break;
+		}
+		currentNode = currentNode.parentNode as HTMLElement;
+	}
+	return null;
+}
+
+export function closestAncestorMatching(el: Element, predicate: (ancestor: Element) => boolean, includeSelf = false) {
+	let currentNode: Element = (includeSelf ? el : el.parentNode) as Element;
+	while (currentNode) {
+		if (predicate(currentNode)) {
+			return currentNode;
+		}
 		currentNode = currentNode.parentNode as HTMLElement;
 	}
 	return null;
@@ -897,7 +964,7 @@ export function isDescendantOf(child: Element, potentialAncestor: Element, inclu
 
 export async function createImageThumbnailUrl(file: File): Promise<string> {
 	if (["image/bmp", "image/gif", "image/heic", "image/heic-sequence", "image/heif", "image/heif-sequence", "image/ief", "image/jls", "image/jp2", "image/jpeg", "image/jpm", "image/jpx", "image/ktx", "image/png", "image/sgi", "image/svg+xml", "image/tiff", "image/webp", "image/wmf"].includes(file.type)) {
-		return new Promise<string>((resolve, reject) => {
+		return new Promise<string | ArrayBuffer>((resolve, reject) => {
 			var reader = new FileReader();
 			reader.onloadend = function () {
 				resolve(reader.result);
@@ -906,8 +973,445 @@ export async function createImageThumbnailUrl(file: File): Promise<string> {
 				reject("Error while reading file.");
 			};
 			reader.readAsDataURL(file);
-		});
+		}) as Promise<string>;
 	} else {
 		return Promise.reject("Not a known image file type.");
 	}
 }
+
+export function removeClassesByFunction(classList: DOMTokenList, deleteDecider: (className: string) => boolean) {
+	let matches = findClassesByFunction(classList, deleteDecider);
+	matches.forEach(function (value) {
+		classList.remove(value);
+	});
+}
+
+export function findClassesByFunction(classList: DOMTokenList, matcher: (className: string) => boolean) {
+	let matches: string[] = [];
+	classList.forEach(function (className) {
+		if (matcher(className)) {
+			matches.push(className);
+		}
+	});
+	return matches;
+}
+
+function animate(el: HTMLElement, animationClassNames: string[], animationDuration: number = 300, callback?: () => any) {
+	if (animationClassNames == null || animationClassNames.length == 0) {
+		callback();
+		return;
+	}
+	if (!document.body.contains(el)) {
+		console.warn("Cannot animate detached element! Will fire callback directly.");
+		callback && callback();
+		return;
+	}
+	let oldAnimationDurationValue = el.style.animationDuration;
+	el.style.animationDuration = animationDuration + "ms";
+	el.classList.add(...animationClassNames);
+
+	function handleAnimationEnd() {
+		el.classList.remove(...animationClassNames);
+		el.removeEventListener('animationend', handleAnimationEnd);
+		el.style.animationDuration = oldAnimationDurationValue;
+
+		if (typeof callback === 'function') {
+			callback();
+		}
+	}
+
+	el.addEventListener('animationend', handleAnimationEnd);
+}
+
+export function animateCSS(el: HTMLElement, animationCssClasses: string, animationDuration: number = 300, callback?: () => any) {
+	animate(el, animationCssClasses ? animationCssClasses.split(/ +/) : null, animationDuration, callback);
+}
+
+export function fadeOut(el: HTMLElement) {
+	animateCSS(el, Constants.EXIT_ANIMATION_CSS_CLASSES[UiExitAnimation.FADE_OUT], 300, () => el.classList.add("hidden"));
+}
+
+export function fadeIn(el: HTMLElement) {
+	el.classList.remove("hidden");
+	animateCSS(el, Constants.ENTRANCE_ANIMATION_CSS_CLASSES[UiEntranceAnimation.FADE_IN]);
+}
+
+export var pageTransitionAnimationPairs = {
+	'moveToLeftVsMoveFromRight': {
+		outClass: ['pt-page-moveToLeft'],
+		inClass: ['pt-page-moveFromRight']
+	},
+	'moveToRightVsMoveFromLeft': {
+		outClass: ['pt-page-moveToRight'],
+		inClass: ['pt-page-moveFromLeft']
+	},
+	'moveToTopVsMoveFromBottom': {
+		outClass: ['pt-page-moveToTop'],
+		inClass: ['pt-page-moveFromBottom']
+	},
+	'moveToBottomVsMoveFromTop': {
+		outClass: ['pt-page-moveToBottom'],
+		inClass: ['pt-page-moveFromTop']
+	},
+	'fadeVsMoveFromRight': {
+		outClass: ['pt-page-fade'],
+		inClass: ['pt-page-moveFromRight', 'pt-page-ontop']
+	},
+	'fadeVsMoveFromLeft': {
+		outClass: ['pt-page-fade'],
+		inClass: ['pt-page-moveFromLeft', 'pt-page-ontop']
+	},
+	'fadeVsMoveFromBottom': {
+		outClass: ['pt-page-fade'],
+		inClass: ['pt-page-moveFromBottom', 'pt-page-ontop']
+	},
+	'fadeVsMoveFromTop': {
+		outClass: ['pt-page-fade'],
+		inClass: ['pt-page-moveFromTop', 'pt-page-ontop']
+	},
+	'moveToLeftFadeVsMoveFromRightFade': {
+		outClass: ['pt-page-moveToLeftFade'],
+		inClass: ['pt-page-moveFromRightFade']
+	},
+	'moveToRightFadeVsMoveFromLeftFade': {
+		outClass: ['pt-page-moveToRightFade'],
+		inClass: ['pt-page-moveFromLeftFade']
+	},
+	'moveToTopFadeVsMoveFromBottomFade': {
+		outClass: ['pt-page-moveToTopFade'],
+		inClass: ['pt-page-moveFromBottomFade']
+	},
+	'moveToBottomFadeVsMoveFromTopFade': {
+		outClass: ['pt-page-moveToBottomFade'],
+		inClass: ['pt-page-moveFromTopFade']
+	},
+	'scaleDownVsMoveFromRight': {
+		outClass: ['pt-page-scaleDown'],
+		inClass: ['pt-page-moveFromRight', 'pt-page-ontop']
+	},
+	'scaleDownVsMoveFromLeft': {
+		outClass: ['pt-page-scaleDown'],
+		inClass: ['pt-page-moveFromLeft', 'pt-page-ontop']
+	},
+	'scaleDownVsMoveFromBottom': {
+		outClass: ['pt-page-scaleDown'],
+		inClass: ['pt-page-moveFromBottom', 'pt-page-ontop']
+	},
+	'scaleDownVsMoveFromTop': {
+		outClass: ['pt-page-scaleDown'],
+		inClass: ['pt-page-moveFromTop', 'pt-page-ontop']
+	},
+	'scaleDownVsScaleUpDown': {
+		outClass: ['pt-page-scaleDown'],
+		inClass: ['pt-page-scaleUpDown']
+	},
+	'scaleDownUpVsScaleUp': {
+		outClass: ['pt-page-scaleDownUp'],
+		inClass: ['pt-page-scaleUp']
+	},
+	'moveToLeftVsScaleUp': {
+		outClass: ['pt-page-moveToLeft', 'pt-page-ontop'],
+		inClass: ['pt-page-scaleUp']
+	},
+	'moveToRightVsScaleUp': {
+		outClass: ['pt-page-moveToRight', 'pt-page-ontop'],
+		inClass: ['pt-page-scaleUp']
+	},
+	'moveToTopVsScaleUp': {
+		outClass: ['pt-page-moveToTop', 'pt-page-ontop'],
+		inClass: ['pt-page-scaleUp']
+	},
+	'moveToBottomVsScaleUp': {
+		outClass: ['pt-page-moveToBottom', 'pt-page-ontop'],
+		inClass: ['pt-page-scaleUp']
+	},
+	'scaleDownCenterVsScaleUpCenter': {
+		outClass: ['pt-page-scaleDownCenter'],
+		inClass: ['pt-page-scaleUpCenter']
+	},
+	'rotateRightSideFirstVsMoveFromRight': {
+		outClass: ['pt-page-rotateRightSideFirst'],
+		inClass: ['pt-page-moveFromRight', 'pt-page-ontop']
+	},
+	'rotateLeftSideFirstVsMoveFromLeft': {
+		outClass: ['pt-page-rotateLeftSideFirst'],
+		inClass: ['pt-page-moveFromLeft', 'pt-page-ontop']
+	},
+	'rotateTopSideFirstVsMoveFromTop': {
+		outClass: ['pt-page-rotateTopSideFirst'],
+		inClass: ['pt-page-moveFromTop', 'pt-page-ontop']
+	},
+	'rotateBottomSideFirstVsMoveFromBottom': {
+		outClass: ['pt-page-rotateBottomSideFirst'],
+		inClass: ['pt-page-moveFromBottom', 'pt-page-ontop']
+	},
+	'flipOutRightVsFlipInLeft': {
+		outClass: ['pt-page-flipOutRight'],
+		inClass: ['pt-page-flipInLeft']
+	},
+	'flipOutLeftVsFlipInRight': {
+		outClass: ['pt-page-flipOutLeft'],
+		inClass: ['pt-page-flipInRight']
+	},
+	'flipOutTopVsFlipInBottom': {
+		outClass: ['pt-page-flipOutTop'],
+		inClass: ['pt-page-flipInBottom']
+	},
+	'flipOutBottomVsFlipInTop': {
+		outClass: ['pt-page-flipOutBottom'],
+		inClass: ['pt-page-flipInTop']
+	},
+	'rotateFallVsScaleUp': {
+		outClass: ['pt-page-rotateFall', 'pt-page-ontop'],
+		inClass: ['pt-page-scaleUp']
+	},
+	'rotateOutNewspaperVsRotateInNewspaper': {
+		outClass: ['pt-page-rotateOutNewspaper'],
+		inClass: ['pt-page-rotateInNewspaper']
+	},
+	'rotatePushLeftVsMoveFromRight': {
+		outClass: ['pt-page-rotatePushLeft'],
+		inClass: ['pt-page-moveFromRight']
+	},
+	'rotatePushRightVsMoveFromLeft': {
+		outClass: ['pt-page-rotatePushRight'],
+		inClass: ['pt-page-moveFromLeft']
+	},
+	'rotatePushTopVsMoveFromBottom': {
+		outClass: ['pt-page-rotatePushTop'],
+		inClass: ['pt-page-moveFromBottom']
+	},
+	'rotatePushBottomVsMoveFromTop': {
+		outClass: ['pt-page-rotatePushBottom'],
+		inClass: ['pt-page-moveFromTop']
+	},
+	'rotatePushLeftVsRotatePullRight': {
+		outClass: ['pt-page-rotatePushLeft'],
+		inClass: ['pt-page-rotatePullRight']
+	},
+	'rotatePushRightVsRotatePullLeft': {
+		outClass: ['pt-page-rotatePushRight'],
+		inClass: ['pt-page-rotatePullLeft']
+	},
+	'rotatePushTopVsRotatePullBottom': {
+		outClass: ['pt-page-rotatePushTop'],
+		inClass: ['pt-page-rotatePullBottom']
+	},
+	'rotatePushBottomVsRotatePullTop': {
+		outClass: ['pt-page-rotatePushBottom'],
+		inClass: ['pt-page-rotatePullTop']
+	},
+	'rotateFoldLeftVsMoveFromRightFade': {
+		outClass: ['pt-page-rotateFoldLeft'],
+		inClass: ['pt-page-moveFromRightFade']
+	},
+	'rotateFoldRightVsMoveFromLeftFade': {
+		outClass: ['pt-page-rotateFoldRight'],
+		inClass: ['pt-page-moveFromLeftFade']
+	},
+	'rotateFoldTopVsMoveFromBottomFade': {
+		outClass: ['pt-page-rotateFoldTop'],
+		inClass: ['pt-page-moveFromBottomFade']
+	},
+	'rotateFoldBottomVsMoveFromTopFade': {
+		outClass: ['pt-page-rotateFoldBottom'],
+		inClass: ['pt-page-moveFromTopFade']
+	},
+	'moveToRightFadeVsRotateUnfoldLeft': {
+		outClass: ['pt-page-moveToRightFade'],
+		inClass: ['pt-page-rotateUnfoldLeft']
+	},
+	'moveToLeftFadeVsRotateUnfoldRight': {
+		outClass: ['pt-page-moveToLeftFade'],
+		inClass: ['pt-page-rotateUnfoldRight']
+	},
+	'moveToBottomFadeVsRotateUnfoldTop': {
+		outClass: ['pt-page-moveToBottomFade'],
+		inClass: ['pt-page-rotateUnfoldTop']
+	},
+	'moveToTopFadeVsRotateUnfoldBottom': {
+		outClass: ['pt-page-moveToTopFade'],
+		inClass: ['pt-page-rotateUnfoldBottom']
+	},
+	'rotateRoomLeftOutVsRotateRoomLeftIn': {
+		outClass: ['pt-page-rotateRoomLeftOut', 'pt-page-ontop'],
+		inClass: ['pt-page-rotateRoomLeftIn']
+	},
+	'rotateRoomRightOutVsRotateRoomRightIn': {
+		outClass: ['pt-page-rotateRoomRightOut', 'pt-page-ontop'],
+		inClass: ['pt-page-rotateRoomRightIn']
+	},
+	'rotateRoomTopOutVsRotateRoomTopIn': {
+		outClass: ['pt-page-rotateRoomTopOut', 'pt-page-ontop'],
+		inClass: ['pt-page-rotateRoomTopIn']
+	},
+	'rotateRoomBottomOutVsRotateRoomBottomIn': {
+		outClass: ['pt-page-rotateRoomBottomOut', 'pt-page-ontop'],
+		inClass: ['pt-page-rotateRoomBottomIn']
+	},
+	'rotateCubeLeftOutVsRotateCubeLeftIn': {
+		outClass: ['pt-page-rotateCubeLeftOut', 'pt-page-ontop'],
+		inClass: ['pt-page-rotateCubeLeftIn']
+	},
+	'rotateCubeRightOutVsRotateCubeRightIn': {
+		outClass: ['pt-page-rotateCubeRightOut', 'pt-page-ontop'],
+		inClass: ['pt-page-rotateCubeRightIn']
+	},
+	'rotateCubeTopOutVsRotateCubeTopIn': {
+		outClass: ['pt-page-rotateCubeTopOut', 'pt-page-ontop'],
+		inClass: ['pt-page-rotateCubeTopIn']
+	},
+	'rotateCubeBottomOutVsRotateCubeBottomIn': {
+		outClass: ['pt-page-rotateCubeBottomOut', 'pt-page-ontop'],
+		inClass: ['pt-page-rotateCubeBottomIn']
+	},
+	'rotateCarouselLeftOutVsRotateCarouselLeftIn': {
+		outClass: ['pt-page-rotateCarouselLeftOut', 'pt-page-ontop'],
+		inClass: ['pt-page-rotateCarouselLeftIn']
+	},
+	'rotateCarouselRightOutVsRotateCarouselRightIn': {
+		outClass: ['pt-page-rotateCarouselRightOut', 'pt-page-ontop'],
+		inClass: ['pt-page-rotateCarouselRightIn']
+	},
+	'rotateCarouselTopOutVsRotateCarouselTopIn': {
+		outClass: ['pt-page-rotateCarouselTopOut', 'pt-page-ontop'],
+		inClass: ['pt-page-rotateCarouselTopIn']
+	},
+	'rotateCarouselBottomOutVsRotateCarouselBottomIn': {
+		outClass: ['pt-page-rotateCarouselBottomOut', 'pt-page-ontop'],
+		inClass: ['pt-page-rotateCarouselBottomIn']
+	},
+	'rotateSidesOutVsRotateSidesIn': {
+		outClass: ['pt-page-rotateSidesOut'],
+		inClass: ['pt-page-rotateSidesIn']
+	},
+	'rotateSlideOutVsRotateSlideIn': {
+		outClass: ['pt-page-rotateSlideOut'],
+		inClass: ['pt-page-rotateSlideIn']
+	},
+};
+
+export function animatePageTransition(outEl: HTMLElement, inEl: HTMLElement, animationName: keyof typeof pageTransitionAnimationPairs, animationDuration: number = 300, callback?: () => any) {
+	let animationCallbackCount = 0;
+
+	function invokeCallbackIfBothReturned() {
+		animationCallbackCount++;
+		if (animationCallbackCount == 2) {
+			callback();
+		}
+	}
+
+	if (outEl != null) {
+		animate(outEl, pageTransitionAnimationPairs[animationName].outClass, animationDuration, invokeCallbackIfBothReturned);
+	} else {
+		animationCallbackCount++;
+	}
+	if (inEl != null) {
+		animate(inEl, pageTransitionAnimationPairs[animationName].inClass, animationDuration, invokeCallbackIfBothReturned);
+	} else {
+		animationCallbackCount++;
+	}
+}
+
+export function pageTransition(outEl: HTMLElement, inEl: HTMLElement, pageTransition: UiPageTransition, animationDuration: number = 300, callback?: () => any) {
+	let s = UiPageTransition[pageTransition].toLowerCase().replace(/_{1,1}([a-z])/g, (g0, g1) => g1.toUpperCase()) as keyof typeof pageTransitionAnimationPairs;
+	animatePageTransition(outEl, inEl, s, animationDuration, callback);
+}
+
+export function toggleElementCollapsed($element: HTMLElement, collapsed: boolean, animationDuration: number = 0, hiddenClass: string = "hidden", completeHandler?: () => any) {
+	if (collapsed) {
+		if (animationDuration > 0) {
+			animateCollapse($element, true, animationDuration, () => {
+				$element.classList.add(hiddenClass);
+				completeHandler?.();
+			});
+		} else {
+			$element.classList.add(hiddenClass);
+			completeHandler?.();
+		}
+	} else {
+		if (animationDuration > 0) {
+			$element.classList.remove(hiddenClass)
+			animateCollapse($element, false, animationDuration, completeHandler);
+		} else {
+			$element.classList.remove(hiddenClass);
+			completeHandler?.();
+		}
+	}
+}
+
+export function animateCollapse(element: HTMLElement, collapsed: boolean, duration: number, onTransitionEnd?: () => void) {
+	const isCollapsed = element.getAttribute("ta-collapsed") != null;
+	if (isCollapsed == collapsed) {
+		onTransitionEnd?.();
+		return;
+	}
+	const initialMaxHeight = collapsed ? element.scrollHeight + "px" : "0px";
+	const targetMaxHeight = collapsed ? "0px" : element.scrollHeight + "px";
+	if (element.style.maxHeight == null || element.style.maxHeight == "") {
+		element.style.maxHeight = initialMaxHeight;
+	}
+	const oldTransitionStyle = element.style.transition;
+	element.style.transition = `max-height ${duration}ms`;
+
+	let transitionEndListener = (ev: Event) => {
+		["transitionend", "transitioncancel"].forEach(eventName => element.removeEventListener(eventName, transitionEndListener));
+		window.clearTimeout(timeout);
+		element.style.transition = oldTransitionStyle;
+		if (!collapsed) {
+			element.style.removeProperty("max-height");
+		}
+		onTransitionEnd?.();
+	};
+	["transitionend", "transitioncancel"].forEach(eventName => element.addEventListener(eventName, transitionEndListener));
+	let timeout = window.setTimeout(transitionEndListener, duration + 100); // make sure the listener is removed no matter what!
+
+	element.offsetHeight; // force reflow to make sure there is a transition animation
+	element.style.maxHeight = targetMaxHeight;
+	element.toggleAttribute("ta-collapsed", collapsed);
+}
+
+export function css(el: HTMLElement, values: object) {
+	Object.assign(el.style, values);
+}
+
+let lastPointerCoordinates: [number, number] = [0, 0];
+document.body.addEventListener("pointermove", ev => lastPointerCoordinates = [ev.clientX, ev.clientY], {capture: true});
+
+export function getLastPointerCoordinates() {
+	return lastPointerCoordinates;
+}
+
+export function insertAtCursorPosition(input: HTMLInputElement | HTMLTextAreaElement, text: string) {
+	if (input.selectionStart != null) {
+		var startPos = input.selectionStart;
+		var endPos = input.selectionEnd;
+		input.value = input.value.substring(0, startPos)
+			+ text
+			+ input.value.substring(endPos, input.value.length);
+	} else {
+		input.value += text;
+	}
+}
+
+export function isVisibleColor(c: string) {
+	return c != null && rgba(c)[3] > 0;
+}
+
+export function createUiLocation() {
+	return {
+		href: location.href,
+		origin: location.origin,
+		protocol: location.protocol,
+		host: location.host,
+		hostname: location.hostname,
+		port: location.port && Number(location.port),
+		pathname: location.pathname ?? '',
+		search: location.search ?? '',
+		hash: location.hash ?? ''
+	};
+}
+
+export function stopEventPropagations(element: HTMLElement, ...eventNames: string[]) {
+	eventNames.forEach(name => element.addEventListener(name, (e) => e.stopPropagation()));
+}
diff --git a/teamapps-client/ts/modules/DefaultTeamAppsUiContext.ts b/teamapps-client/ts/modules/DefaultTeamAppsUiContext.ts
index 57e313e59..2e97723e2 100644
--- a/teamapps-client/ts/modules/DefaultTeamAppsUiContext.ts
+++ b/teamapps-client/ts/modules/DefaultTeamAppsUiContext.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,58 +19,74 @@
  */
 "use strict";
 
-import * as $ from "jquery";
-import {WebWorkerTeamAppsConnection} from "./WebWorkerTeamAppsConnection";
-import {generateUUID, getIconPath, logException} from "./Common";
+import {createUiLocation, generateUUID, logException} from "./Common";
 import {TeamAppsUiContextInternalApi} from "./TeamAppsUiContext";
 import {UiConfigurationConfig} from "../generated/UiConfigurationConfig";
-import {UiWeekDay} from "../generated/UiWeekDay";
-import {UiComponent} from "./UiComponent";
 import {UiComponentConfig} from "../generated/UiComponentConfig";
 import {UiEvent} from "../generated/UiEvent";
 import {UiRootPanel} from "./UiRootPanel";
-import {EventRegistrator} from "../generated/EventRegistrator";
+import {ComponentEventSubscriptionManager} from "./util/ComponentEventSubscriptionManager";
 import {UiCommand} from '../generated/UiCommand';
 import {CommandExecutor} from "../generated/CommandExecutor";
-import {TeamAppsConnection, TeamAppsConnectionListener} from "../shared/TeamAppsConnection";
+import {TeamAppsConnection, TeamAppsConnectionListener} from "./communication/TeamAppsConnection";
 import * as log from "loglevel";
 import * as jstz from "jstz";
 import {TeamAppsUiComponentRegistry} from "./TeamAppsUiComponentRegistry";
 import {TemplateRegistry} from "./TemplateRegistry";
-import {createUiClientInfoConfig, UiClientInfoConfig} from "../generated/UiClientInfoConfig";
+import {createUiClientInfoConfig} from "../generated/UiClientInfoConfig";
 import {UiGenericErrorMessageOption} from "../generated/UiGenericErrorMessageOption";
 import {TeamAppsEvent} from "./util/TeamAppsEvent";
 import {bind} from "./util/Bind";
-import {RefreshableComponentProxyHandle} from "./util/RefreshableComponentProxyHandle";
-import {TeamAppsConnectionImpl} from "../shared/TeamAppsConnectionImpl";
+import {isRefreshableComponentProxyHandle, RefreshableComponentProxyHandle} from "./util/RefreshableComponentProxyHandle";
+import {TeamAppsConnectionImpl} from "./communication/TeamAppsConnectionImpl";
+import {UiComponent} from "./UiComponent";
+import {UiSessionClosingReason} from "../generated/UiSessionClosingReason";
+import {UiClientObject} from "./UiClientObject";
+import {UiClientObjectConfig} from "../generated/UiClientObjectConfig";
+import {UiWindow} from "./UiWindow";
+import {QueryFunctionAdder} from "../generated/QueryFunctionAdder";
+import {UiQuery} from "../generated/UiQuery";
+import {componentEventDescriptors, staticComponentEventDescriptors} from "../generated/ComponentEventDescriptors";
+import {ClosedSessionHandlingType} from "../generated/ClosedSessionHandlingType";
+import {UiRootPanel_CustomMessageEvent} from "../generated/UiRootPanelConfig";
+
+declare var __TEAMAPPS_VERSION__: string;
+
+function isComponent(o: UiClientObject<UiClientObjectConfig>): o is UiComponent {
+	return o != null && (o as any).getMainElement;
+}
 
 export class DefaultTeamAppsUiContext implements TeamAppsUiContextInternalApi {
 
 	private static logger = log.getLogger("DefaultTeamAppsUiContext");
 
-	public readonly onStaticMethodCommandInvocation: TeamAppsEvent<UiCommand> = new TeamAppsEvent(this);
+	public readonly onStaticMethodCommandInvocation: TeamAppsEvent<UiCommand> = new TeamAppsEvent();
 	public readonly sessionId: string;
 	public isHighDensityScreen: boolean;
 	public config: UiConfigurationConfig = {
 		_type: "UiConfigurationConfig",
-		isoLanguage: "en",
+		locale: "en",
 		themeClassName: null,
-		optimizedForTouch: false,
-		iconPath: "icons",
-		timeZoneId: "Europe/Berlin",
-		firstDayOfWeek: UiWeekDay.MONDAY,
-		dateFormat: "yyyy-MM-dd",
-		timeFormat: "HH:mm",
-		decimalSeparator: ".",
-		thousandsSeparator: ""
+		optimizedForTouch: false
 	};
 	public readonly templateRegistry: TemplateRegistry = new TemplateRegistry(this);
 
-	private components: { [identifier: string]: RefreshableComponentProxyHandle<UiComponent> } = {}; // only for debugging!!!
+	private components: { [identifier: string]: UiClientObject | RefreshableComponentProxyHandle<UiComponent> } = {};
 	private _executingCommand: boolean = false;
 	private connection: TeamAppsConnection;
 
-	constructor(webSocketUrl: string,	clientParameters: {[key: string]: string|number} = {}) {
+	private commandExecutor = new CommandExecutor();
+
+	private expiredMessageWindow: UiWindow;
+	private errorMessageWindow: UiWindow;
+	private terminatedMessageWindow: UiWindow;
+
+	private componentEventSubscriptionManager: ComponentEventSubscriptionManager;
+
+	constructor(webSocketUrl: string, clientParameters: { [key: string]: string | number } = {}) {
+		this.componentEventSubscriptionManager = new ComponentEventSubscriptionManager();
+		this.componentEventSubscriptionManager.registerComponentTypes(componentEventDescriptors, staticComponentEventDescriptors, this.sendEvent);
+
 		this.sessionId = generateUUID();
 
 		let clientInfo = createUiClientInfoConfig({
@@ -82,29 +98,66 @@ export class DefaultTeamAppsUiContext implements TeamAppsUiContextInternalApi {
 			timezoneOffsetMinutes: new Date().getTimezoneOffset(),
 			timezoneIana: jstz.determine().name(),
 			clientTokens: UiRootPanel.getClientTokens(),
-			clientUrl: location.href,
-			clientParameters: clientParameters
+			location: createUiLocation(),
+			clientParameters: clientParameters,
+			teamAppsVersion: __TEAMAPPS_VERSION__
 		});
 
 		let connectionListener: TeamAppsConnectionListener = {
 			onConnectionInitialized: () => {
 			},
 			onConnectionErrorOrBroken: (reason, message) => {
-				DefaultTeamAppsUiContext.logger.error("Connection broken.");
+				DefaultTeamAppsUiContext.logger.error(`Connection broken. ${message != null ? 'Message: ' + message : ""}`);
 				sessionStorage.clear();
-				UiRootPanel.showGenericErrorMessage("Server-side Error", "A server error has occurred! You might experience unexpected behavior until you reload this web page.",
-					[UiGenericErrorMessageOption.OK, UiGenericErrorMessageOption.RELOAD], this);
+				if (reason == UiSessionClosingReason.WRONG_TEAMAPPS_VERSION) {
+					// NOTE that there is a special handling for wrong teamapps client versions on the server side, which sends the client a goToUrl() command for a page with a cache-prevention GET parameter.
+					// This is only in case the server-side logic does not work.
+					document.body.innerHTML = `<div class="centered-body-text">
+						<h3>Caching problem!</h3>
+						<p>Your browser uses an old client version to connect to our server. Please <a onclick="location.reload()">refresh this page</a>. If this does not help, please clear your browser's cache.</p>
+					<div>`;
+				} else if (this.config.closedSessionHandling == ClosedSessionHandlingType.MESSAGE_WINDOW) {
+					if (reason == UiSessionClosingReason.SESSION_NOT_FOUND || reason == UiSessionClosingReason.SESSION_TIMEOUT) {
+						if (this.expiredMessageWindow != null) {
+							this.expiredMessageWindow.show(500);
+						} else {
+							UiRootPanel.createGenericErrorMessageWindow("Session Expired", "<p>Your session has expired.</p><p>Please reload this page or click OK if you want to refresh later. The application will however remain unresponsive until you reload this page.</p>",
+								false, [UiGenericErrorMessageOption.OK, UiGenericErrorMessageOption.RELOAD], this).show(500);
+						}
+					} else if (reason == UiSessionClosingReason.TERMINATED_BY_APPLICATION) {
+						if (this.terminatedMessageWindow != null) {
+							this.terminatedMessageWindow.show(500);
+						} else {
+							UiRootPanel.createGenericErrorMessageWindow("Session Terminated", "<p>Your session has been terminated.</p><p>Please reload this page or click OK if you want to refresh later. The application will however remain unresponsive until you reload this page.</p>",
+								true, [UiGenericErrorMessageOption.OK, UiGenericErrorMessageOption.RELOAD], this).show(500);
+						}
+					} else {
+						if (this.errorMessageWindow != null) {
+							this.errorMessageWindow.show(500);
+						} else {
+							UiRootPanel.createGenericErrorMessageWindow("Error", "<p>A server-side error has occurred.</p><p>Please reload this page or click OK if you want to refresh later. The application will however remain unresponsive until you reload this page.</p>",
+								true, [UiGenericErrorMessageOption.OK, UiGenericErrorMessageOption.RELOAD], this).show(500);
+						}
+					}
+				} else {
+					location.reload();
+				}
 			},
-			executeCommand: (uiCommand: UiCommand) => this.executeCommand(uiCommand),
-			executeCommands: (uiCommands: UiCommand[]) => this.executeCommands(uiCommands)
+			executeCommand: (uiCommand: UiCommand) => this.executeCommand(uiCommand)
 		};
 
 		this.connection = new TeamAppsConnectionImpl(webSocketUrl, this.sessionId, clientInfo, connectionListener);
 
 		this.isHighDensityScreen = ((window.matchMedia && (window.matchMedia('only screen and (min-resolution: 124dpi), only screen and (min-resolution: 1.3dppx), only screen and (min-resolution: 48.8dpcm)').matches || window.matchMedia('only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 2.6/2), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (min-device-pixel-ratio: 1.3)').matches)) || (window.devicePixelRatio && window.devicePixelRatio > 1.3));
 		if (this.isHighDensityScreen) {
-			$(document.body).addClass('high-density-screen');
+			document.body.classList.add('high-density-screen');
 		}
+
+		window.addEventListener('unload', () => {
+			if (!navigator.sendBeacon) return;
+			var status = navigator.sendBeacon("/leave", this.sessionId);
+			console.log(`Beacon returned: ${status}`);
+		})
 	}
 
 	public get executingCommand() {
@@ -112,96 +165,118 @@ export class DefaultTeamAppsUiContext implements TeamAppsUiContextInternalApi {
 	}
 
 	@bind
-	public fireEvent(eventObject: UiEvent) {
+	public sendEvent(eventObject: UiEvent) {
 		this.connection.sendEvent(eventObject);
 	}
 
-	public registerComponent(component: UiComponent<UiComponentConfig>): void {
-		DefaultTeamAppsUiContext.logger.debug("registering component: ", component.getId());
-		if (this.components[component.getId()] == null) {
-			this.components[component.getId()] = new RefreshableComponentProxyHandle(component);
+	@bind
+	public async sendQuery(query: UiQuery): Promise<any> {
+		let result = await this.connection.sendQuery(query);
+		let resultWrapper = [result];
+		this.replaceComponentReferencesWithInstances(resultWrapper)
+		return resultWrapper[0];
+	}
+
+	public registerClientObject(clientObject: UiClientObject, id: string, teamappsType: string): void {
+		DefaultTeamAppsUiContext.logger.debug("registering ClientObject: ", id);
+		if (isComponent(clientObject)) {
+			let existingProxy = this.components[id];
+			if (existingProxy != null) {
+				(existingProxy as RefreshableComponentProxyHandle).component = clientObject;
+			} else {
+				this.components[id] = new RefreshableComponentProxyHandle(clientObject);
+			}
 		} else {
-			this.components[component.getId()].component = component;
+			this.components[id] = clientObject;
 		}
-		EventRegistrator.registerForEvents(component, component.getTeamAppsType(), this.fireEvent);
+		this.componentEventSubscriptionManager.registerEventListener(clientObject, teamappsType, this.sendEvent, {componentId: id});
 	}
 
-	public createAndRegisterComponent(config: UiComponentConfig) {
-		let component: UiComponent<UiComponentConfig>;
-		if (TeamAppsUiComponentRegistry.getComponentClassForName(config._type)) {
-			component = new (TeamAppsUiComponentRegistry.getComponentClassForName(config._type))(config, this);
-			this.registerComponent(component);
-			return this.getComponentById(component.getId()); // return the proxied component!!!
+	public createClientObject(config: UiClientObjectConfig): UiClientObject {
+		let componentClass = TeamAppsUiComponentRegistry.getComponentClassForName(config._type);
+		if (componentClass) {
+			QueryFunctionAdder.addQueryFunctionsToConfig(config, (componentId, queryTypeId, queryObject) => {
+				return this.sendQuery({...queryObject, _type: queryTypeId, componentId: componentId});
+			});
+			return new componentClass(config, this);
 		} else {
 			DefaultTeamAppsUiContext.logger.error("Unknown component type: " + config._type);
-			return;
+			return null;
 		}
 	}
 
-	destroyComponent(component: UiComponent): void {
-		component.getMainDomElement().detach();
-		component.destroy();
-		delete this.components[component.getId()];
+	refreshComponent(config: UiComponentConfig): void {
+		let clientObject = this.createClientObject(config) as UiComponent;
+		if (this.components[config.id] != null) {
+			(this.components[config.id] as RefreshableComponentProxyHandle).component = clientObject;
+		} else {
+			this.registerClientObject(clientObject, config.id, config._type);
+		}
 	}
 
-	refreshComponent(config: UiComponentConfig): void {
-		this.createAndRegisterComponent(config);
+	destroyClientObject(id: string): void {
+		let o = this.components[id];
+		if (o != null) {
+			if (isRefreshableComponentProxyHandle(o)) {
+				o = o.component;
+			}
+			if (isComponent(o)) {
+				o.getMainElement().remove();
+			}
+			o.destroy();
+			delete this.components[id];
+			this.componentEventSubscriptionManager.unregisterEventListener(o);
+		} else {
+			DefaultTeamAppsUiContext.logger.warn("Could not find component to destroy: " + id);
+		}
 	}
 
-	public getComponentById(id: string): UiComponent<UiComponentConfig> {
-		const componentProxyHandle = this.components[id];
-		if (componentProxyHandle == null) {
+	public getClientObjectById(id: string): UiClientObject {
+		const clientObject = this.components[id];
+		if (clientObject == null) {
 			DefaultTeamAppsUiContext.logger.error(`Cannot find component with id ${id}`);
 			return null;
 		} else {
-			return componentProxyHandle.proxy;
+			return isRefreshableComponentProxyHandle(clientObject) ? clientObject.proxy : clientObject;
 		}
 	}
 
-	public getIconPath(iconName: string, iconSize: number, ignoreRetina?: boolean): string {
-		return getIconPath(this, iconName, iconSize, ignoreRetina);
-	}
-
-	private executeCommands(uiCommands: UiCommand[]): Promise<any>[] {
-		return uiCommands.map(c => {
-			try {
-				return this.executeCommand(c);
-			} catch (error) {
-				logException(error);
-			}
-		});
-	}
-
 	private replaceComponentReferencesWithInstances(o: any) {
-		let replaceOrRecur = (key: number|string) => {
-			const value = o[key];
-			if (value != null && value._type && typeof (value._type) === "string" && value._type.indexOf("UiComponentReference") !== -1) {
-				const componentById = this.getComponentById(value.id);
+		let replaceOrRecur = (value: any) => {
+			if (value != null && value._type && typeof (value._type) === "string" && value._type.indexOf("UiClientObjectReference") !== -1) {
+				const componentById = this.getClientObjectById(value.id);
 				if (componentById != null) {
-					o[key] = componentById;
+					return componentById;
 				} else {
 					throw new Error("Could not find component with id " + value.id);
 				}
 			} else {
 				this.replaceComponentReferencesWithInstances(value);
+				return value;
 			}
 		};
 
 		if (o == null || typeof o === "string" || typeof o === "boolean" || typeof o === "function" || typeof o === "number" || typeof o === "symbol") {
-			return o;
+			return;
 		} else if (Array.isArray(o)) {
 			for (let i = 0; i < o.length; i++) {
-				replaceOrRecur(i);
+				let value = o[i];
+				const replacingValue = replaceOrRecur(value);
+				if (replacingValue !== value) {
+					o[i] = replacingValue;
+				}
 			}
 		} else if (typeof o === "object") {
 			Object.keys(o).forEach(key => {
-				replaceOrRecur(key);
+				let value = o[key];
+				const replacingValue = replaceOrRecur(value);
+				if (replacingValue !== value) {
+					o[key] = replacingValue;
+				}
 			})
 		}
 	}
 
-	private commandExecutor = new CommandExecutor(reference => this.getComponentById(reference.id));
-
 	private async executeCommand(command: UiCommand): Promise<any> {
 		try {
 			// console.warn(command);
@@ -210,7 +285,7 @@ export class DefaultTeamAppsUiContext implements TeamAppsUiContextInternalApi {
 			const commandMethodName = command._type.substring(command._type.lastIndexOf('.') + 1);
 			if (command.componentId) {
 				DefaultTeamAppsUiContext.logger.trace(`Trying to call ${command.componentId}.${commandMethodName}()`);
-				let component: any = this.getComponentById(command.componentId);
+				let component: any = this.getClientObjectById(command.componentId);
 				if (!component) {
 					throw new Error("The component " + command.componentId + " does not exist, so cannot call " + commandMethodName + "() on it.");
 				} else if (typeof component[commandMethodName] !== "function") {
@@ -229,4 +304,19 @@ export class DefaultTeamAppsUiContext implements TeamAppsUiContextInternalApi {
 			this._executingCommand = false;
 		}
 	}
+
+	public setSessionMessageWindows(expiredMessageWindow: UiWindow, errorMessageWindow: UiWindow, terminatedMessageWindow: UiWindow) {
+		this.expiredMessageWindow = expiredMessageWindow;
+		this.errorMessageWindow = errorMessageWindow;
+		this.terminatedMessageWindow = terminatedMessageWindow;
+	}
+
+	public sendCustomMessage(type: string, message: string) {
+		const event: UiRootPanel_CustomMessageEvent = {
+			_type: "UiRootPanel.customMessage",
+			type,
+			message: message
+		};
+		this.connection.sendEvent(event);
+	}
 }
diff --git a/teamapps-client/ts/modules/TeamAppsUiComponentRegistry.ts b/teamapps-client/ts/modules/TeamAppsUiComponentRegistry.ts
index 7c9182738..fac2411ce 100644
--- a/teamapps-client/ts/modules/TeamAppsUiComponentRegistry.ts
+++ b/teamapps-client/ts/modules/TeamAppsUiComponentRegistry.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -18,14 +18,15 @@
  * =========================LICENSE_END==================================
  */
 import * as log from "loglevel";
-import {UiComponent} from "./UiComponent";
+import {AbstractUiComponent} from "./AbstractUiComponent";
 import {UiField} from "./formfield/UiField";
 import {UiFieldConfig} from "../generated/UiFieldConfig";
 import {UiComponentConfig} from "../generated/UiComponentConfig";
 import {TeamAppsUiContext} from "./TeamAppsUiContext";
+import {UiComponent} from "./UiComponent";
 
-type ComponentClass<T extends UiComponent<UiComponentConfig>> = { new (config: UiComponentConfig, context: TeamAppsUiContext): T };
-type FieldClass<T extends UiField> = { new (config: UiFieldConfig, context: TeamAppsUiContext): T };
+type ComponentClass<T extends UiComponent<UiComponentConfig>> = { new(config: UiComponentConfig, context: TeamAppsUiContext): T };
+type FieldClass<T extends UiField> = { new(config: UiFieldConfig, context: TeamAppsUiContext): T };
 
 export class TeamAppsUiComponentRegistry {
 
@@ -34,13 +35,13 @@ export class TeamAppsUiComponentRegistry {
 	private static componentClasses: { [componentName: string]: ComponentClass<UiComponent<UiComponentConfig>> } = {};
 	private static fieldClasses: { [fieldName: string]: FieldClass<UiField> } = {};
 
-	public static registerComponentClass<F extends UiComponent<UiComponentConfig>>(componentName: string, componentClass: ComponentClass<F>): void {
+	public static registerComponentClass<F extends AbstractUiComponent<UiComponentConfig>>(componentName: string, componentClass: ComponentClass<F>): void {
 		this.componentClasses[componentName] = componentClass;
 	}
 
-	public static getComponentClassForName(componentName: string): ComponentClass<UiComponent<UiComponentConfig>> {
+	public static getComponentClassForName(componentName: string, logErrorIfNotFound = true): ComponentClass<UiComponent<UiComponentConfig>> {
 		let componentClass = this.componentClasses[componentName];
-		if (!componentClass) {
+		if (!componentClass && logErrorIfNotFound) {
 			TeamAppsUiComponentRegistry.logger.error("There is no registered component type with name: " + componentName);
 		}
 		return componentClass;
@@ -62,4 +63,6 @@ export class TeamAppsUiComponentRegistry {
 
 }
 
-(window as any).TeamAppsUiComponentRegistry = TeamAppsUiComponentRegistry;
+if (!(window as any).TeamAppsUiComponentRegistry) {
+	(window as any).TeamAppsUiComponentRegistry = TeamAppsUiComponentRegistry;
+}
diff --git a/teamapps-client/ts/modules/TeamAppsUiContext.ts b/teamapps-client/ts/modules/TeamAppsUiContext.ts
index 4adc5bb2f..f75472136 100644
--- a/teamapps-client/ts/modules/TeamAppsUiContext.ts
+++ b/teamapps-client/ts/modules/TeamAppsUiContext.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -18,38 +18,38 @@
  * =========================LICENSE_END==================================
  */
 import {UiConfigurationConfig} from "../generated/UiConfigurationConfig";
-import {UiComponent} from "./UiComponent";
 import {UiComponentConfig} from "../generated/UiComponentConfig";
 import {UiEvent} from "../generated/UiEvent";
-import {UiTemplateConfig} from "../generated/UiTemplateConfig";
-import {Renderer} from "./Common";
 import {TemplateRegistry} from "./TemplateRegistry";
 import {TeamAppsEvent} from "./util/TeamAppsEvent";
-import {UiRootPanelConfig} from "../generated/UiRootPanelConfig";
 import {UiCommand} from "../generated/UiCommand";
+import {UiComponent} from "./UiComponent";
+import {UiClientObject} from "./UiClientObject";
+import {UiClientObjectConfig} from "../generated/UiClientObjectConfig";
 
 export const typescriptDeclarationFixConstant = 1;
 
-export interface IconPathProvider {
-	getIconPath(iconName: string, iconSize: number, ignoreRetina?: boolean): string;
-}
-
-export interface TeamAppsUiContext extends IconPathProvider {
+export interface TeamAppsUiContext {
 	readonly sessionId: string;
 	readonly isHighDensityScreen: boolean;
 	readonly executingCommand: boolean;
 	readonly config: UiConfigurationConfig;
 	readonly templateRegistry: TemplateRegistry;
 
-	getComponentById(id: string): UiComponent<UiComponentConfig>;
+	getClientObjectById(id: string): UiClientObject;
 }
 
 // TeamAppsUiContext implementations should implement this too. See usages.
-export interface TeamAppsUiContextInternalApi extends TeamAppsUiContext{
+export interface TeamAppsUiContextInternalApi extends TeamAppsUiContext {
 	readonly onStaticMethodCommandInvocation: TeamAppsEvent<UiCommand>;
-	registerComponent(component: UiComponent<UiComponentConfig>): void;
-	createAndRegisterComponent(config: UiComponentConfig): UiComponent<UiComponentConfig>;
-	destroyComponent(component: UiComponent): void;
+
+	registerClientObject(component: UiClientObject, id: string, teamappsType: string): void;
+
+	createClientObject(config: UiClientObjectConfig): UiClientObject;
+
 	refreshComponent(config: UiComponentConfig): void;
-	fireEvent(eventObject: UiEvent): void;
+
+	destroyClientObject(componentId: string): void;
+
+	sendEvent(eventObject: UiEvent): void;
 }
diff --git a/teamapps-client/ts/modules/TemplateRegistry.ts b/teamapps-client/ts/modules/TemplateRegistry.ts
index db395189d..43a24bb8e 100644
--- a/teamapps-client/ts/modules/TemplateRegistry.ts
+++ b/teamapps-client/ts/modules/TemplateRegistry.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -23,11 +23,13 @@ import {TeamAppsUiContext} from "./TeamAppsUiContext";
 import {TeamAppsEvent} from "./util/TeamAppsEvent";
 import {UiGridTemplateConfig} from "../generated/UiGridTemplateConfig";
 import {createGridTemplateRenderer} from "./util/UiGridTemplates";
-import {createTextCellTemplateRenderer} from "./util/UiTextCellTemplates";
 import {UiTemplateReferenceConfig} from "../generated/UiTemplateReferenceConfig";
-import {UiTextCellTemplateConfig} from "../generated/UiTextCellTemplateConfig";
-import {wrapWithDefaultTagWrapper} from "trivial-components";
+import {wrapWithDefaultTagWrapper} from "./trivial-components/TrivialCore";
 import {Renderer} from "./Common";
+import {createHtmlTemplateRenderer} from "./util/UiHtmlTemplates";
+import {UiHtmlTemplateConfig} from "../generated/UiHtmlTemplateConfig";
+import {createMustacheTemplateRenderer} from "./util/UiMustacheTemplates";
+import {UiMustacheTemplateConfig} from "../generated/UiMustacheTemplateConfig";
 
 export class TemplateRegistry {
 
@@ -38,7 +40,7 @@ export class TemplateRegistry {
 		}
 	};
 
-	public readonly onTemplateRegistered: TeamAppsEvent<string> = new TeamAppsEvent<string>(this);
+	public readonly onTemplateRegistered: TeamAppsEvent<string> = new TeamAppsEvent<string>();
 
 	private static logger: log.Logger = log.getLogger("TemplateRegistry");
 	private renderersByName: { [name: string]: Renderer } = {};
@@ -77,10 +79,12 @@ export class TemplateRegistry {
 	public createTemplateRenderer(template: UiTemplateConfig, idPropertyName?: string): Renderer {
 		if (isTemplateReference(template)) {
 			return this.getTemplateRendererByName(template.templateId);
-		} else if (isTextCellTemplate(template)) {
-			return createTextCellTemplateRenderer(template, this.context, idPropertyName);
 		} else if (isGridTemplate(template)) {
-			return createGridTemplateRenderer(template as UiGridTemplateConfig, this.context, idPropertyName);
+			return createGridTemplateRenderer(template, idPropertyName);
+		} else if (isHtmlTemplate(template)) {
+			return createHtmlTemplateRenderer(template, idPropertyName);
+		} else if (isMustacheTemplate(template)) {
+			return createMustacheTemplateRenderer(template, idPropertyName);
 		}
 	}
 
@@ -91,28 +95,20 @@ export class TemplateRegistry {
 		}, <{ [name: string]: Renderer }> {});
 	}
 
-	public convertToWrappedTagMustacheTemplates(templates: { [name: string]: UiTemplateConfig }, idPropertyName?: string) {
-		return Object.keys(templates).reduce((templateStringMapObject, templateName) => {
-			let templateConfig = templates[templateName];
-			let textCellTemplateRenderer = this.createTemplateRenderer(templateConfig, idPropertyName);
-			templateStringMapObject[templateName] = {
-				render: (view) => wrapWithDefaultTagWrapper(textCellTemplateRenderer.render(view)),
-				template: templateConfig
-			};
-			return templateStringMapObject;
-		}, <{ [name: string]: Renderer }> {});
-	}
-
 }
 
 export function isTemplateReference(template: UiTemplateConfig): template is UiTemplateReferenceConfig {
 	return template._type === "UiTemplateReference";
 }
 
-export function isTextCellTemplate(template: any): template is UiTextCellTemplateConfig {
-	return template._type === 'UiTextCellTemplate';
-}
-
 export function isGridTemplate(template: UiTemplateConfig): template is UiGridTemplateConfig {
 	return template._type === "UiGridTemplate";
 }
+
+export function isHtmlTemplate(template: UiTemplateConfig): template is UiHtmlTemplateConfig {
+	return template._type === "UiHtmlTemplate";
+}
+
+export function isMustacheTemplate(template: UiTemplateConfig): template is UiMustacheTemplateConfig {
+	return template._type === "UiMustacheTemplate";
+}
diff --git a/teamapps-client/ts/modules/UiAbsoluteLayout.ts b/teamapps-client/ts/modules/UiAbsoluteLayout.ts
index d5aec8f18..14981cf3f 100644
--- a/teamapps-client/ts/modules/UiAbsoluteLayout.ts
+++ b/teamapps-client/ts/modules/UiAbsoluteLayout.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,7 +17,7 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-import {UiComponent} from "./UiComponent";
+import {AbstractUiComponent} from "./AbstractUiComponent";
 import {TeamAppsUiContext} from "./TeamAppsUiContext";
 import {UiAbsoluteLayoutCommandHandler, UiAbsoluteLayoutConfig} from "../generated/UiAbsoluteLayoutConfig";
 import {UiAbsolutePositionedComponentConfig} from "../generated/UiAbsolutePositionedComponentConfig";
@@ -25,6 +25,7 @@ import {UiAnimationEasing} from "../generated/UiAnimationEasing";
 import {parseHtml} from "./Common";
 import {TeamAppsUiComponentRegistry} from "./TeamAppsUiComponentRegistry";
 import {bind} from "./util/Bind";
+import {UiComponent} from "./UiComponent";
 
 const animationEasingCssValues = {
 	[UiAnimationEasing.EASE]: "ease",
@@ -36,7 +37,7 @@ const animationEasingCssValues = {
 	[UiAnimationEasing.STEP_END]: "step-end"
 };
 
-export class UiAbsoluteLayout extends UiComponent<UiAbsoluteLayoutConfig> implements UiAbsoluteLayoutCommandHandler {
+export class UiAbsoluteLayout extends AbstractUiComponent<UiAbsoluteLayoutConfig> implements UiAbsoluteLayoutCommandHandler {
 	private $main: HTMLElement;
 	private $style: HTMLStyleElement;
 	private components: UiAbsolutePositionedComponentConfig[];
@@ -50,8 +51,8 @@ export class UiAbsoluteLayout extends UiComponent<UiAbsoluteLayoutConfig> implem
 		this.update(config.components, 0, UiAnimationEasing.EASE);
 	}
 
-	getMainDomElement(): JQuery {
-		return $(this.$main);
+	doGetMainElement(): HTMLElement {
+		return this.$main;
 	}
 
 	private transitionEndEventListener = (e: Event) => {
@@ -68,10 +69,9 @@ export class UiAbsoluteLayout extends UiComponent<UiAbsoluteLayoutConfig> implem
 		components
 			.map(c => c.component)
 			.forEach((c: UiComponent) => {
-				const mainDomElementElement = c.getMainDomElement()[0];
+				const mainDomElementElement = c.getMainElement();
 				mainDomElementElement.removeEventListener("transitionend", this.transitionEndEventListener);
 				this.$main.appendChild(mainDomElementElement);
-				c.attachedToDom = this.attachedToDom;
 			});
 
 		this.$main.offsetWidth; // trigger reflow
@@ -80,9 +80,9 @@ export class UiAbsoluteLayout extends UiComponent<UiAbsoluteLayoutConfig> implem
 	transition: top ${animationDuration}ms ${animationEasingCssValues[easing]}, right ${animationDuration}ms ${animationEasingCssValues[easing]}, bottom ${animationDuration}ms ${animationEasingCssValues[easing]}, left ${animationDuration}ms ${animationEasingCssValues[easing]}, width ${animationDuration}ms ${animationEasingCssValues[easing]}, height ${animationDuration}ms ${animationEasingCssValues[easing]};
 }`;
 		components.forEach(c => {
-			const component = c.component as UiComponent;
-			component.getMainDomElement()[0].addEventListener('transitionend', this.transitionEndEventListener);
-			component.getMainDomElement().attr("data-absolute-positioning-id", component.getId());
+			const component = c.component as AbstractUiComponent;
+			component.getMainElement().addEventListener('transitionend', this.transitionEndEventListener);
+			component.getMainElement().setAttribute("data-absolute-positioning-id", component.getId());
 			styles += `[data-teamapps-id=${this.getId()}] > [data-absolute-positioning-id=${component.getId()}] {
 	top: ${c.position.topCss != null ? c.position.topCss : "initial"};
 	right: ${c.position.rightCss != null ? c.position.rightCss : "initial"};
@@ -97,13 +97,6 @@ export class UiAbsoluteLayout extends UiComponent<UiAbsoluteLayoutConfig> implem
 		this.$style.innerText = styles;
 	}
 
-	protected onAttachedToDom(): void {
-		this.components.forEach(c => (c.component as UiComponent).attachedToDom = true);
-	}
-
-	onResize(): void {
-		this.components.forEach(c => (c.component as UiComponent).reLayout());
-	}
 }
 
 TeamAppsUiComponentRegistry.registerComponentClass("UiAbsoluteLayout", UiAbsoluteLayout);
diff --git a/teamapps-client/ts/modules/UiApplicationLayout.ts b/teamapps-client/ts/modules/UiApplicationLayout.ts
index a9722e2dc..c39d1fe5a 100644
--- a/teamapps-client/ts/modules/UiApplicationLayout.ts
+++ b/teamapps-client/ts/modules/UiApplicationLayout.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,78 +17,67 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-import * as $ from "jquery";
+
 import {UiToolbar} from "./tool-container/toolbar/UiToolbar";
 import {UiToolbarConfig} from "../generated/UiToolbarConfig";
 import {UiSplitPaneConfig} from "../generated/UiSplitPaneConfig";
 import {UiSplitPane} from "./UiSplitPane";
-import {UiComponent} from "./UiComponent";
+import {AbstractUiComponent} from "./AbstractUiComponent";
 import {UiApplicationLayoutConfig} from "../generated/UiApplicationLayoutConfig";
 import {TeamAppsUiContext} from "./TeamAppsUiContext";
 import {TeamAppsUiComponentRegistry} from "./TeamAppsUiComponentRegistry";
+import {parseHtml} from "./Common";
 
-export class UiApplicationLayout extends UiComponent<UiApplicationLayoutConfig> {
-	private $mainDiv: JQuery;
+export class UiApplicationLayout extends AbstractUiComponent<UiApplicationLayoutConfig> {
+	private $mainDiv: HTMLElement;
 	private _toolbar: UiToolbar;
 	private _rootSplitPane: UiSplitPane;
 
-	private _$toolbarContainer: JQuery;
-	private _$contentContainer: JQuery;
+	private _$toolbarContainer: HTMLElement;
+	private _$contentContainer: HTMLElement;
 
 	constructor(config: UiApplicationLayoutConfig,
 	            context: TeamAppsUiContext) {
 		super(config, context);
-		this.$mainDiv = $('<div id="' + config.id + '" class="UiApplicationLayout"></div>');
-
-		this._$toolbarContainer = $('<div class="UiApplicationLayout_toolbarContainer"></div>').appendTo(this.$mainDiv);
-		this.setToolbar(config.toolbar);
+		this.$mainDiv = parseHtml('<div id="' + config.id + '" class="UiApplicationLayout"></div>');
 
-		var $contentContainerWrapper = $('<div class="UiApplicationLayout_contentContainerWrapper"></div>').appendTo(this.$mainDiv);
-		this._$contentContainer = $('<div class="UiApplicationLayout_contentContainer"></div>').appendTo($contentContainerWrapper);
-		this.setRootSplitPane(config.rootSplitPane);
-	}
+		this._$toolbarContainer = parseHtml('<div class="UiApplicationLayout_toolbarContainer"></div>');
+		this.$mainDiv.appendChild(this._$toolbarContainer);
+		this.setToolbar(config.toolbar as UiToolbar);
 
-	public onResize(): void {
-		this._toolbar && this._toolbar.reLayout();
-		this._rootSplitPane && this._rootSplitPane.reLayout();
+		var $contentContainerWrapper = parseHtml('<div class="UiApplicationLayout_contentContainerWrapper"></div>');
+		this.$mainDiv.appendChild($contentContainerWrapper);
+		this._$contentContainer = parseHtml('<div class="UiApplicationLayout_contentContainer"></div>');
+		$contentContainerWrapper.appendChild(this._$contentContainer);
+		this.setRootSplitPane(config.rootSplitPane as UiSplitPane);
 	}
 
 	public setToolbar(toolbar: UiToolbar): void {
 		if (this._toolbar) {
-			this._$toolbarContainer[0].innerHTML = '';
+			this._$toolbarContainer.innerHTML = '';
 		}
 		this._toolbar = toolbar;
-		this._$toolbarContainer.toggleClass('hidden', !toolbar);
+		this._$toolbarContainer.classList.toggle('hidden', !toolbar);
 		if (toolbar) {
-			this._toolbar.getMainDomElement().appendTo(this._$toolbarContainer);
-			this._toolbar.attachedToDom = this.attachedToDom;
+			this._$toolbarContainer.appendChild(this._toolbar.getMainElement());
 		}
 	}
 
 	public setRootSplitPane(splitPane: UiSplitPane): void {
 		if (this._rootSplitPane) {
-			this._$contentContainer[0].innerHTML = '';
+			this._$contentContainer.innerHTML = '';
 			this._rootSplitPane = null;
 		}
 		if (splitPane) {
 			this._rootSplitPane = splitPane;
-			this._rootSplitPane.getMainDomElement().appendTo(this._$contentContainer);
-			this._rootSplitPane.attachedToDom = this.attachedToDom;
+			this._$contentContainer.appendChild(this._rootSplitPane.getMainElement());
 		}
 	}
 
-	public getMainDomElement(): JQuery {
+	public doGetMainElement(): HTMLElement {
 		return this.$mainDiv;
 	}
 
-
-	protected onAttachedToDom() {
-		if (this._toolbar) this._toolbar.attachedToDom = true;
-		if (this._rootSplitPane) this._rootSplitPane.attachedToDom = true;
-	}
-
-	public destroy(): void {
-	}
 }
 
 TeamAppsUiComponentRegistry.registerComponentClass("UiApplicationLayout", UiApplicationLayout);
diff --git a/teamapps-client/ts/modules/UiAudioLevelIndicator.ts b/teamapps-client/ts/modules/UiAudioLevelIndicator.ts
new file mode 100644
index 000000000..29e0d89f6
--- /dev/null
+++ b/teamapps-client/ts/modules/UiAudioLevelIndicator.ts
@@ -0,0 +1,170 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+
+import {parseHtml} from "./Common";
+import {AbstractUiComponent} from "./AbstractUiComponent";
+import {UiAudioLevelIndicatorCommandHandler, UiAudioLevelIndicatorConfig} from "../generated/UiAudioLevelIndicatorConfig";
+import {TeamAppsUiContext} from "./TeamAppsUiContext";
+import {TeamAppsUiComponentRegistry} from "./TeamAppsUiComponentRegistry";
+
+export class UiAudioLevelIndicator extends AbstractUiComponent<UiAudioLevelIndicatorConfig> implements UiAudioLevelIndicatorCommandHandler {
+	private $main: HTMLElement;
+	private $activityDisplay: HTMLElement;
+	private $canvas: HTMLCanvasElement;
+	private mediaStreamSource: MediaStreamAudioSourceNode;
+	private audioContext: AudioContext;
+	private mediaStreamToBeClosedWhenUnbinding: MediaStream;
+	private canvasContext: CanvasRenderingContext2D;
+
+	private maxLevel = 0;
+	private maxLevel2 = 0;
+	private lastDrawingTimestamp = 0;
+
+	constructor(config: UiAudioLevelIndicatorConfig, context: TeamAppsUiContext) {
+		super(config, context)
+
+		this.$main = parseHtml(`
+<div class="UiAudioLevelIndicator">
+	<canvas></canvas>
+</div>`);
+		this.$activityDisplay = this.$main;
+		this.$canvas = this.$main.querySelector<HTMLElement>(':scope canvas') as HTMLCanvasElement;
+		this.canvasContext = this.$canvas.getContext("2d");
+
+		this.setDeviceId(config.deviceId);
+	}
+
+	private analyserNode: AnalyserNode;
+
+	public bindToStream(mediaStream: MediaStream, mediaStreamIsExclusiveToThisComponent: boolean) {
+		this.unbind();
+
+		if (mediaStreamIsExclusiveToThisComponent) {
+			this.mediaStreamToBeClosedWhenUnbinding = mediaStream;
+		}
+
+		(window as any).AudioContext = (window as any).AudioContext || (window as any).webkitAudioContext;
+		this.audioContext = new AudioContext();
+
+		let scriptProcessor = this.audioContext.createScriptProcessor(2048, 1, 1);
+		scriptProcessor.connect(this.audioContext.destination);
+
+		this.analyserNode = this.audioContext.createAnalyser();
+		this.analyserNode.smoothingTimeConstant = 0.3;
+		this.analyserNode.fftSize = 32; // 16 spectral lines - that's the minimum. we don't want to get a spectral analysis anyway...
+		this.analyserNode.connect(scriptProcessor);
+
+		this.mediaStreamSource = this.audioContext.createMediaStreamSource(mediaStream);
+		this.mediaStreamSource.connect(this.analyserNode, 0, 0);
+
+		scriptProcessor.onaudioprocess = event => {
+			var buf = event.inputBuffer.getChannelData(0);
+			var bufLength = buf.length;
+			for (var i = 0; i < bufLength; i++) {
+				let x = buf[i];
+				if (x > this.maxLevel) {
+					this.maxLevel2 = this.maxLevel;
+					this.maxLevel = x;
+				}
+			}
+
+			if (Date.now() - this.lastDrawingTimestamp > 100) {
+				requestAnimationFrame(() => {
+					let displayedLevel = this.maxLevel2 == 0 ? 0 : Math.max(-10, Math.log2(this.maxLevel)) / 10 + 1;
+					this.draw(displayedLevel);
+					this.maxLevel = 0;
+					this.maxLevel2 = 0;
+				});
+			}
+		};
+	}
+
+	private draw(level: number) {
+		let canvasWidth = this.canvasContext.canvas.width;
+		let canvasHeight = this.canvasContext.canvas.height;
+
+		var imageData = this.canvasContext.getImageData(this._config.barWidth, 0, canvasWidth - this._config.barWidth, canvasHeight);
+		this.canvasContext.putImageData(imageData, 0, 0);
+		this.canvasContext.clearRect(canvasWidth - this._config.barWidth, 0, this._config.barWidth, canvasHeight);
+
+		var grd = this.canvasContext.createLinearGradient(0, canvasHeight, 0, 0);
+		grd.addColorStop(0, "#192e83")
+		grd.addColorStop(.4, "#0fb83f")
+		grd.addColorStop(.6, "#0fb83f")
+		grd.addColorStop(.8, "orange")
+		grd.addColorStop(.95, "#e00")
+		this.canvasContext.fillStyle = grd;
+
+		// draw a bar based on the current volume
+		let volumeBarSize = canvasHeight * level;
+		this.canvasContext.fillRect(canvasWidth - this._config.barWidth, canvasHeight - volumeBarSize, this._config.barWidth, volumeBarSize);
+
+		this.lastDrawingTimestamp = Date.now();
+	}
+
+	/**
+	 *  Returns a function, that will limit the invocation of the specified function to once in delay. Invocations that come before the end of delay are ignored!
+	 */
+	private throttle(func: Function, delay: number): (() => void) {
+		let previousCall = 0;
+		return function () {
+			const time = new Date().getTime();
+			if ((time - previousCall) >= delay) {
+				previousCall = time;
+				func.apply(this, arguments);
+			}
+		};
+	}
+
+	public unbind() {
+		this.audioContext && this.audioContext?.close()
+			.catch(reason => console.log(reason));
+		this.mediaStreamSource?.disconnect();
+		if (this.mediaStreamToBeClosedWhenUnbinding != null) {
+			this.mediaStreamToBeClosedWhenUnbinding.getTracks().forEach(t => t.stop());
+		}
+		this.canvasContext.clearRect(0, 0, this.canvasContext.canvas.width, this.canvasContext.canvas.height);
+	}
+
+	onResize() {
+		this.$canvas.width = this.getWidth();
+		this.$canvas.height = this.getHeight();
+	}
+
+	public doGetMainElement() {
+		return this.$main;
+	}
+
+	public async setDeviceId(deviceId: string) {
+		if (deviceId == null) {
+			this.unbind();
+			return;
+		} else {
+			let mediaStream = await navigator.mediaDevices.getUserMedia({
+				audio: {
+					deviceId
+				}
+			});
+			this.bindToStream(mediaStream, true);
+		}
+	}
+}
+
+TeamAppsUiComponentRegistry.registerComponentClass("UiAudioLevelIndicator", UiAudioLevelIndicator);
diff --git a/teamapps-client/ts/modules/UiCalendar.ts b/teamapps-client/ts/modules/UiCalendar.ts
index 6e14be980..085079e4b 100644
--- a/teamapps-client/ts/modules/UiCalendar.ts
+++ b/teamapps-client/ts/modules/UiCalendar.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,357 +17,456 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-import * as $ from "jquery";
-import * as moment from "moment";
-import * as momentTimeZone from "moment-timezone";
-import * as FullCalendar from 'fullcalendar';
+
 import * as log from "loglevel";
-import {EventObjectInput, EventSourceExtendedInput, EventSourceFunction, OptionsInput} from "fullcalendar/src/types/input-types";
 import {TeamAppsEvent} from "./util/TeamAppsEvent";
 import {
 	UiCalendar_DataNeededEvent,
 	UiCalendar_DayClickedEvent,
+	UiCalendar_DayHeaderClickedEvent,
 	UiCalendar_EventClickedEvent,
 	UiCalendar_EventMovedEvent,
+	UiCalendar_IntervalSelectedEvent,
+	UiCalendar_MonthHeaderClickedEvent,
 	UiCalendar_ViewChangedEvent,
+	UiCalendar_WeekHeaderClickedEvent,
 	UiCalendarCommandHandler,
 	UiCalendarConfig,
 	UiCalendarEventSource
 } from "../generated/UiCalendarConfig";
-import View from "fullcalendar/View";
-import {UiComponent} from "./UiComponent";
+import {AbstractUiComponent} from "./AbstractUiComponent";
 import {TeamAppsUiContext} from "./TeamAppsUiContext";
 import {UiCalendarViewMode} from "../generated/UiCalendarViewMode";
 import {UiCalendarEventRenderingStyle} from "../generated/UiCalendarEventRenderingStyle";
-import {EventFactory} from "../generated/EventFactory";
 import {TeamAppsUiComponentRegistry} from "./TeamAppsUiComponentRegistry";
 import {Interval, IntervalManager} from "./util/IntervalManager";
-import {createUiColorCssString} from "./util/CssFormatUtil";
-import Default from "fullcalendar/Calendar";
-import {MultiMonthView} from "./util/FullCalendarMultiMonthView";
-import * as jstz from "jstz";
-import {Renderer} from "./Common";
+import {parseHtml, prependChild, Renderer} from "./Common";
 import {UiCalendarEventClientRecordConfig} from "../generated/UiCalendarEventClientRecordConfig";
 import {UiTemplateConfig} from "../generated/UiTemplateConfig";
 
-(window as any).FullCalendar = FullCalendar; // needed for dynamically reloading locales
-($.fullCalendar as any).views.multiMonth = MultiMonthView;
-($.fullCalendar as any).views.year = MultiMonthView;
-($.fullCalendar as any).views.year = {
-	type: 'multiMonth',
-	duration: {months: 12}
-};
-
-import Moment = moment.Moment;
+import {addDays, Calendar} from '@fullcalendar/core';
+import dayGridPlugin, {DayGridView} from '@fullcalendar/daygrid';
+import timeGridPlugin, {TimeGridView} from '@fullcalendar/timegrid';
+import interactionPlugin from '@fullcalendar/interaction';
+import momentTimeZone from './util/fullcalendar-moment-timezone';
+import {EventInput, EventRenderingChoice} from "@fullcalendar/core/structs/event";
+import {EventSourceError, ExtendedEventSourceInput} from "@fullcalendar/core/structs/event-source";
+import {bind} from "./util/Bind";
+import {View} from "@fullcalendar/core/View";
+import EventApi from "@fullcalendar/core/api/EventApi";
+import {Duration} from "@fullcalendar/core/datelib/duration";
+import {monthGridViewPlugin} from "./util/FullCalendarMonthGrid";
+import {OptionsInputBase} from "@fullcalendar/core/types/input-types";
 
 const VIEW_MODE_2_FULL_CALENDAR_CONFIG_STRING: { [index: number]: string } = {
 	[UiCalendarViewMode.YEAR]: "year",
-	[UiCalendarViewMode.MONTH]: "month",
-	[UiCalendarViewMode.WEEK]: "agendaWeek",
-	[UiCalendarViewMode.DAY]: "agendaDay"
+	[UiCalendarViewMode.MONTH]: "dayGridMonth",
+	[UiCalendarViewMode.WEEK]: "timeGridWeek",
+	[UiCalendarViewMode.DAY]: "timeGridDay"
 };
-const RENDERING_STYLE_2_FULL_CALENDAR_CONFIG_STRING: { [index: number]: string } = {
-	[UiCalendarEventRenderingStyle.DEFAULT]: undefined,
+const RENDERING_STYLE_2_FULL_CALENDAR_CONFIG_STRING: { [index: number]: EventRenderingChoice } = {
+	[UiCalendarEventRenderingStyle.DEFAULT]: '',
 	// [UiCalendarEventRenderingStyle.HIGHLIGHTED]: 'highlighted',
 	[UiCalendarEventRenderingStyle.BACKGROUND]: 'background',
 	[UiCalendarEventRenderingStyle.INVERSE_BACKGROUND]: 'inverse-background',
 };
 
-export class UiCalendar extends UiComponent<UiCalendarConfig> implements UiCalendarCommandHandler, UiCalendarEventSource {
+export class UiCalendar extends AbstractUiComponent<UiCalendarConfig> implements UiCalendarCommandHandler, UiCalendarEventSource {
 
-	public readonly onEventClicked: TeamAppsEvent<UiCalendar_EventClickedEvent> = new TeamAppsEvent<UiCalendar_EventClickedEvent>(this);
-	public readonly onEventMoved: TeamAppsEvent<UiCalendar_EventMovedEvent> = new TeamAppsEvent<UiCalendar_EventMovedEvent>(this);
-	public readonly onDayClicked: TeamAppsEvent<UiCalendar_DayClickedEvent> = new TeamAppsEvent<UiCalendar_DayClickedEvent>(this);
-	public readonly onViewChanged: TeamAppsEvent<UiCalendar_ViewChangedEvent> = new TeamAppsEvent<UiCalendar_ViewChangedEvent>(this);
-	public readonly onDataNeeded: TeamAppsEvent<UiCalendar_DataNeededEvent> = new TeamAppsEvent<UiCalendar_DataNeededEvent>(this);
+	public readonly onEventClicked: TeamAppsEvent<UiCalendar_EventClickedEvent> = new TeamAppsEvent();
+	public readonly onEventMoved: TeamAppsEvent<UiCalendar_EventMovedEvent> = new TeamAppsEvent();
+	public readonly onDayClicked: TeamAppsEvent<UiCalendar_DayClickedEvent> = new TeamAppsEvent();
+	public readonly onIntervalSelected: TeamAppsEvent<UiCalendar_IntervalSelectedEvent> = new TeamAppsEvent();
+	public readonly onViewChanged: TeamAppsEvent<UiCalendar_ViewChangedEvent> = new TeamAppsEvent();
+	public readonly onDataNeeded: TeamAppsEvent<UiCalendar_DataNeededEvent> = new TeamAppsEvent();
+	public readonly onDayHeaderClicked: TeamAppsEvent<UiCalendar_DayHeaderClickedEvent> = new TeamAppsEvent();
+	public readonly onWeekHeaderClicked: TeamAppsEvent<UiCalendar_WeekHeaderClickedEvent> = new TeamAppsEvent();
+	public readonly onMonthHeaderClicked: TeamAppsEvent<UiCalendar_MonthHeaderClickedEvent> = new TeamAppsEvent();
 
-	private $main: JQuery;
-	private $fullCalendar: JQuery;
+	private $main: HTMLElement;
 	private eventSource: UiCalendarFullCalendarEventSource;
 	private templateRenderers: { [name: string]: Renderer };
+	private calendar: Calendar;
 
 	constructor(config: UiCalendarConfig, context: TeamAppsUiContext) {
 		super(config, context);
 
-		this.$main = $('<div class="UiCalendar" id="' + config.id + '">');
-		this.$fullCalendar = $('<div>').appendTo(this.$main);
-		this.eventSource = new UiCalendarFullCalendarEventSource(context, config.id);
-		this.eventSource.onViewChanged.addListener(eventObject => this.onViewChanged.fire(eventObject));
-		this.eventSource.onDataNeeded.addListener(eventObject => this.onDataNeeded.fire(eventObject));
-		config.initialData && this.eventSource.addEvents(0, Number.MAX_SAFE_INTEGER, config.initialData.map(e => this.convertToFullCalendarEvent(e)));
+		this.$main = parseHtml(`<div class="UiCalendar">
+	<div class="calendar"></div>
+</div>`);
+		let $fullCalendarElement: HTMLElement = this.$main.querySelector(':scope > .calendar');
+
 		this.templateRenderers = context.templateRegistry.createTemplateRenderers(config.templates);
 
-		let viewModeNames = ["year", "month", "agendaWeek", "agendaDay"];
-		let options: OptionsInput & { lang?: string } = {
-			lang: context.config.isoLanguage,
-			header: config.showHeader ? {
-				left: 'prevYear,prev,next,nextYear today newEvent',
-				center: 'title',
-				right: viewModeNames.join(",")
-			} : false,
+		this.eventSource = new UiCalendarFullCalendarEventSource(context, config.id, () => this.calendar);
+		this.calendar = new Calendar($fullCalendarElement, {
+			plugins: [momentTimeZone, interactionPlugin, dayGridPlugin, timeGridPlugin, monthGridViewPlugin],
+			header: false,
 			defaultView: VIEW_MODE_2_FULL_CALENDAR_CONFIG_STRING[config.activeViewMode],
 			defaultDate: config.displayedDate,
 			weekNumbers: config.showWeekNumbers,
 			businessHours: {
 				start: config.businessHoursStart + ':00',
 				end: config.businessHoursEnd + ':00',
-				dow: config.workingDays
+				daysOfWeek: config.workingDays
 			},
-			firstDay: config.firstDayOfWeek != null ? config.firstDayOfWeek : context.config.firstDayOfWeek, // 1 = monday
+			firstDay: config.firstDayOfWeek, // 1 = monday
 			fixedWeekCount: true,
-			eventBackgroundColor: createUiColorCssString(config.defaultBackgroundColor),
-			eventBorderColor: createUiColorCssString(config.defaultBorderColor),
+			eventBackgroundColor: config.defaultBackgroundColor,
+			eventBorderColor: config.defaultBorderColor,
 			eventTextColor: "#000",
 			handleWindowResize: false, // we handle this ourselves!
-			eventSources: [this.eventSource],
 			lazyFetching: false, // no intelligent fetching from fullcalendar. We handle all that!
 			selectable: true,
 			unselectAuto: false,
-			timezone: context.config.timeZoneId || jstz.determine().name(),
-			eventRender: (event: EventObject, $event: JQuery) => {
-				if (event.templateId != null && event.rendering == null || event.rendering == "default") {
-					const $contentWrapper = $event.find('.fc-content');
-					$contentWrapper[0].innerHTML = '';
-					$contentWrapper.append(this.renderEventObject(event));
-					$($event).on('click dblclick', (e) => {
-						this.onEventClicked.fire(EventFactory.createUiCalendar_EventClickedEvent(config.id, event.id as number, e.type === 'dblclick'));
-					});
+			timeZone: config.timeZoneId,
+			height: 600,
+			slotEventOverlap: false,
+			locale: config.locale,
+			views: {
+				timeGrid: {
+					slotLabelFormat: {
+						hour: '2-digit',
+						minute: '2-digit'
+					}
+				},
+				day: {
+					columnHeaderFormat: {weekday: 'long', month: 'numeric', day: 'numeric'}
+				},
+				year: {
+					minMonthTileWidth: config.minYearViewMonthTileWidth,
+					maxMonthTileWidth: config.maxYearViewMonthTileWidth
+				}
+			},
+			eventSources: [this.eventSource],
+			datesRender: (arg: {
+				view: View;
+				el: HTMLElement
+			}) => {
+				this.onViewChanged.fire({
+					viewMode: parseInt(Object.keys(VIEW_MODE_2_FULL_CALENDAR_CONFIG_STRING).filter((enumValue: any) => VIEW_MODE_2_FULL_CALENDAR_CONFIG_STRING[enumValue] === arg.view.type)[0]),
+					mainIntervalStart: +arg.view.currentStart,
+					mainIntervalEnd: +arg.view.currentEnd,
+					displayedIntervalStart: +arg.view.activeStart,
+					displayedIntervalEnd: +arg.view.activeEnd
+				});
+
+				this.$main.classList.toggle("table-border", config.tableBorder);
+				// this.$main.querySelectorAll(":scope .fc-bg td.fc-week-number.fc-widget-content").forEach($e => $e.classList.add('teamapps-blurredBackgroundImage'));
+				// this.$main.querySelectorAll(":scope .fc-head td.fc-widget-header").forEach($e => $e.classList.add('teamapps-blurredBackgroundImage'));
+				// if (view.type.toLowerCase().indexOf('agenda') !== -1 && moment().isAfter(view.intervalStart) && moment().isBefore(view.intervalEnd)) {
+				// 	element.find(".fc-day-header.fc-" + ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'][moment().day()]).addClass("fc-today");
+				// }
+			},
+			eventRender: (arg: {
+				isMirror: boolean;
+				isStart: boolean;
+				isEnd: boolean;
+				event: EventApi;
+				el: HTMLElement;
+				view: View;
+			}) => {
+				let templateId = arg.view instanceof TimeGridView ? arg.event.extendedProps.timeGridTemplateId
+					: arg.view instanceof DayGridView ? arg.event.extendedProps.dayGridTemplateId
+						: arg.event.extendedProps.monthGridTemplateId;
+
+				let $fcContent = arg.el.querySelector(':scope .fc-content');
+				if (templateId != null && !arg.event.rendering) {
+					if (this.templateRenderers[templateId] != null) {
+						arg.el.classList.add('template-content');
+						const renderer = this.templateRenderers[templateId];
+						// arg.el.appendChild(parseHtml());
+						$fcContent.innerHTML = renderer.render(arg.event.extendedProps.data);
+					}
+				} else {
+					prependChild($fcContent, parseHtml(`<div class="fc-icon img img-16" style="background-image:url('${arg.event.extendedProps.icon}')">`));
+				}
+				if (arg.event.allDay) {
+					arg.el.classList.add("all-day");
 				}
+
+				arg.el.addEventListener('click', (e) => {
+					this.onEventClicked.fire({
+						eventId: parseInt(arg.event.id),
+						isDoubleClick: false
+					});
+				});
+				arg.el.addEventListener('dblclick', (e) => {
+					this.onEventClicked.fire({
+						eventId: parseInt(arg.event.id),
+						isDoubleClick: true
+					});
+				});
 			},
-			dayClick: (() => {
+			dateClick: (() => {
 				let lastClickTimeStamp = 0;
-				let lastClickClickedDate: Moment;
-				return (date: moment.Moment, jsEvent: MouseEvent, view: View, resourceObj?: any) => {
-					let isDoubleClick = lastClickClickedDate != null && lastClickClickedDate.valueOf() == date.valueOf() && jsEvent.timeStamp - lastClickTimeStamp < 600;
+				let lastClickClickedDate: Date;
+				return (arg: {
+					date: Date;
+					dateStr: string;
+					allDay: boolean;
+					resource?: any;
+					dayEl: HTMLElement;
+					jsEvent: MouseEvent;
+					view: View;
+				}) => {
+					let isDoubleClick = lastClickClickedDate != null && lastClickClickedDate.valueOf() == arg.date.valueOf() && arg.jsEvent.timeStamp - lastClickTimeStamp < 600;
 					if (isDoubleClick) {
 						lastClickTimeStamp = 0;
 						lastClickClickedDate = null;
-						this.onDayClicked.fire(EventFactory.createUiCalendar_DayClickedEvent(config.id, date.valueOf(), true));
+						this.onDayClicked.fire({
+							date: arg.date.valueOf(),
+							isDoubleClick: true
+						});
 					} else {
-						lastClickTimeStamp = jsEvent.timeStamp;
-						lastClickClickedDate = date;
-						this.onDayClicked.fire(EventFactory.createUiCalendar_DayClickedEvent(config.id, date.valueOf(), false));
+						lastClickTimeStamp = arg.jsEvent.timeStamp;
+						lastClickClickedDate = arg.date;
+						this.onDayClicked.fire({
+							date: arg.date.valueOf(),
+							isDoubleClick: false
+						});
 					}
 				};
 			})(),
-			eventResize: (event: EventObject, delta: moment.Duration, revertFunc: Function, jsEvent: Event, ui: any, view: View) => {
-				const masterEvent = this.eventSource.getEvent(event.id);
-				masterEvent.start = event.start;
-				masterEvent.end = event.end;
-				this.onEventMoved.fire(EventFactory.createUiCalendar_EventMovedEvent(config.id, event.id as number, moment(event.start).valueOf(), moment(event.end).valueOf()));
+			select: (selectionInfo) => {
+				this.onIntervalSelected.fire({start: selectionInfo.start.valueOf(), end: selectionInfo.end.valueOf(), allDay: selectionInfo.allDay})
 			},
-			eventDrop: (event: EventObject, delta, revertFunc) => {
-				const masterEvent = this.eventSource.getEvent(event.id);
-				masterEvent.start = event.start;
-				masterEvent.end = event.end;
-				this.onEventMoved.fire(EventFactory.createUiCalendar_EventMovedEvent(config.id, event.id as number, moment(event.start).valueOf(), moment(event.end).valueOf()));
+			eventResize: (arg: {
+				el: HTMLElement;
+				startDelta: Duration;
+				endDelta: Duration;
+				prevEvent: EventApi;
+				event: EventApi;
+				revert: () => void;
+				jsEvent: Event;
+				view: View;
+			}) => {
+				const masterEvent = this.eventSource.getEvent(arg.event.id);
+				masterEvent.start = arg.event.start;
+				masterEvent.end = arg.event.end;
+				this.onEventMoved.fire({
+					eventId: parseInt(arg.event.id),
+					newStart: arg.event.start.valueOf(),
+					newEnd: arg.event.end.valueOf()
+				});
 			},
-			height: 600,
-			slotEventOverlap: false,
-			slotLabelFormat: "hh:mm",
-			viewRender: (view, element) => {
-				this.$main.toggleClass("table-border", config.tableBorder);
-
-				this.$fullCalendar.find(".fc-bg td.fc-week-number.fc-widget-content").addClass('teamapps-blurredBackgroundImage');
-				this.$fullCalendar.find(".fc-head td.fc-widget-header").addClass('teamapps-blurredBackgroundImage');
-
-				if (view.type.toLowerCase().indexOf('agenda') !== -1 && moment().isAfter(view.intervalStart) && moment().isBefore(view.intervalEnd)) {
-					element.find(".fc-day-header.fc-" + ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'][moment().day()]).addClass("fc-today");
+			eventDrop: (arg: {
+				el: HTMLElement;
+				event: EventApi;
+				oldEvent: EventApi;
+				delta: Duration;
+				revert: () => void;
+				jsEvent: Event;
+				view: View;
+			}) => {
+				const masterEvent = this.eventSource.getEvent(arg.event.id);
+				masterEvent.start = arg.event.start;
+				masterEvent.end = arg.event.end;
+				this.onEventMoved.fire({
+					eventId: parseInt(arg.event.id),
+					newStart: arg.event.start.valueOf(),
+					newEnd: arg.event.end.valueOf()
+				});
+			},
+			navLinks: true,
+			navLinkDayClick: (date, jsEvent) => {
+				this.onDayHeaderClicked.fire({
+					date: date.valueOf()
+				});
+				if (this._config.navigateOnHeaderClicks) {
+					this.calendar.changeView("timeGridDay", date);
+				}
+			},
+			navLinkWeekClick: (weekStart, jsEvent) => {
+				this.onWeekHeaderClicked.fire({
+					year: addDays(weekStart, 6).getFullYear(),
+					week: this.calendar.dateEnv.computeWeekNumber(weekStart),
+					weekStartDate: weekStart.valueOf()
+				});
+				if (this._config.navigateOnHeaderClicks) {
+					this.calendar.changeView("timeGridWeek", weekStart);
+				}
+			},
+			navLinkMonthClick: (monthStart: Date, jsEvent: Event) => {
+				this.onMonthHeaderClicked.fire({
+					year: monthStart.getFullYear(),
+					month: monthStart.getMonth(),
+					monthStartDate: monthStart.valueOf()
+				});
+				if (this._config.navigateOnHeaderClicks) {
+					this.calendar.changeView("dayGridMonth", monthStart);
 				}
 			}
-		};
-		this.$fullCalendar.fullCalendar(options);
+		} as OptionsInputBase);
 
-		this.$main.append(`<style>
+		if (config.initialData) {
+			this.eventSource.addEvents(0, Number.MAX_SAFE_INTEGER, config.initialData.map(e => this.convertToFullCalendarEvent(e)));
+			this.calendar.refetchEvents();
+		}
+		this.eventSource.onDataNeeded.addListener((eventObject: UiCalendar_DataNeededEvent) => {
+			setTimeout(() => this.onDataNeeded.fire(eventObject)); // setTimeout needed because we might still be inside the constructor and no one will be registered to this...
+		});
+
+		this.calendar.render();
+
+		this.$main.append(parseHtml(`<style>
                 #${config.id} .fc-head td.fc-widget-header>.fc-row.fc-widget-header {
-                    background-color: ${createUiColorCssString(config.tableHeaderBackgroundColor)};
+                    background-color: ${(config.tableHeaderBackgroundColor ?? '')};
                 }
                 #${config.id} .fc-bgevent-skeleton td.fc-week-number {
-                    background-color: ${createUiColorCssString(config.tableHeaderBackgroundColor)};
+                    background-color: ${(config.tableHeaderBackgroundColor ?? '')};
                 }
-            </style>`);
-	}
-
-	private renderEventObject(record: EventObject): string {
-		const templateId = record.templateId;
-		if (templateId != null && this.templateRenderers[templateId] != null) {
-			const renderer = this.templateRenderers[templateId];
-			return renderer.render(record.data);
-		} else {
-			return `<div class="no-template"></div>`;
-		}
+            </style>`));
 	}
 
 	registerTemplate(id: string, template: UiTemplateConfig): void {
 		this.templateRenderers[id] = this._context.templateRegistry.createTemplateRenderer(template);
 	}
 
-	protected onAttachedToDom() {
-		this.reLayout();
-	}
-
-	private convertToFullCalendarEvent(event: UiCalendarEventClientRecordConfig): EventObject {
-
-		let backgroundColor = event.backgroundColor;
-		let backgroundColorCssString = typeof backgroundColor === 'string' ? backgroundColor
-			: backgroundColor != null ? createUiColorCssString(backgroundColor) : null;
-
-		let borderColor = event.borderColor;
-		let borderColorCssString = typeof borderColor === 'string' ? borderColor
-			: borderColor != null ? createUiColorCssString(borderColor) : null;
-
-		return {
-			id: event.id,
-			start: moment(event.start),
-			end: moment(event.end),
-			title: event.asString,
-			rendering: RENDERING_STYLE_2_FULL_CALENDAR_CONFIG_STRING[event.rendering],
-			editable: event.allowDragOperations,
-			templateId: event.templateId,
-			allDay: event.allDay,
-			backgroundColor: backgroundColorCssString,
-			borderColor: borderColorCssString,
-			data: event.values
-		};
-	}
-
 	public setViewMode(viewMode: UiCalendarViewMode) {
-		this.$fullCalendar.fullCalendar('changeView' as any /* not in declarations...*/, VIEW_MODE_2_FULL_CALENDAR_CONFIG_STRING[viewMode]);
+		this.calendar.changeView(VIEW_MODE_2_FULL_CALENDAR_CONFIG_STRING[viewMode]);
 	}
 
 	public setDisplayedDate(date: number) {
-		this.logger.debug("setDisplayedDate: " + moment(date).toString());
-		this.$fullCalendar.fullCalendar('gotoDate', date);
+		this.calendar.gotoDate(new Date(date));
 	}
 
 	public addEvent(theEvent: any) {
 		this.eventSource.addEvent(this.convertToFullCalendarEvent(theEvent));
-		this.$fullCalendar.fullCalendar('refetchEvents');
+		this.refreshEventsDisplay();
 	}
 
 	public removeEvent(eventId: any) {
 		this.eventSource.removeEvent(eventId);
-		this.$fullCalendar.fullCalendar('refetchEvents');
+		this.refreshEventsDisplay();
 	}
 
 	public setCalendarData(events: UiCalendarEventClientRecordConfig[]) {
 		this.eventSource.removeAllEvents();
 		this.eventSource.addEvents(0, Number.MAX_SAFE_INTEGER, events.map(e => this.convertToFullCalendarEvent(e)));
-		this.$fullCalendar.fullCalendar('refetchEvents');
+		this.refreshEventsDisplay();
 	}
 
 	public clearCalendar() {
 		this.logger.debug(`clearCalendar()`);
 		this.eventSource.removeAllEvents();
-		this.$fullCalendar.fullCalendar('refetchEvents');
+		this.refreshEventsDisplay();
+	}
+
+	private refreshEventsDisplay() {
+		this.eventSource.setQueriesDisabled(true);
+		try {
+			this.calendar.refetchEvents();
+		} finally {
+			this.eventSource.setQueriesDisabled(false);
+		}
 	}
 
 	onResize(): void {
-		this.$fullCalendar.fullCalendar('render');
-		this.$fullCalendar.fullCalendar('option', 'height', this.getHeight());
+		// this.$fullCalendar.fullCalendar('render');
+		this.calendar.setOption('height', this.getHeight());
 	}
 
-	public getMainDomElement(): JQuery {
+	public doGetMainElement(): HTMLElement {
 		return this.$main;
 	}
 
 	public destroy(): void {
-		// nothing to do
+		super.destroy();
+		this.calendar && this.calendar.destroy();
+	}
+
+	public convertToFullCalendarEvent(event: UiCalendarEventClientRecordConfig): EventInput {
+		return {
+			id: "" + event.id,
+			start: new Date(event.start),
+			end: new Date(event.end),
+			title: event.title,
+			rendering: RENDERING_STYLE_2_FULL_CALENDAR_CONFIG_STRING[event.rendering],
+			editable: event.allowDragOperations,
+			startEditable: event.allowDragOperations,
+			durationEditable: event.allowDragOperations,
+			allDay: event.allDay,
+			backgroundColor: event.backgroundColor,
+			borderColor: event.borderColor,
+			textColor: "#000",
+			extendedProps: {
+				timeGridTemplateId: event.timeGridTemplateId,
+				dayGridTemplateId: event.dayGridTemplateId,
+				monthGridTemplateId: event.monthGridTemplateId,
+				data: event.values,
+				icon: event.icon
+			}
+		};
+	}
+
+	setTimeZoneId(timeZoneId: string): void {
+		this.calendar.setOption("timeZone", timeZoneId);
 	}
-}
 
-interface EventObject extends EventObjectInput {
-	templateId: string;
-	data: any;
 }
 
 export /* for testing ... */
-class UiCalendarFullCalendarEventSource implements EventSourceExtendedInput {
+class UiCalendarFullCalendarEventSource implements ExtendedEventSourceInput {
 
-	public readonly onViewChanged: TeamAppsEvent<UiCalendar_ViewChangedEvent> = new TeamAppsEvent<UiCalendar_ViewChangedEvent>(this);
-	public readonly onDataNeeded: TeamAppsEvent<UiCalendar_DataNeededEvent> = new TeamAppsEvent<UiCalendar_DataNeededEvent>(this);
+	public readonly onViewChanged: TeamAppsEvent<UiCalendar_ViewChangedEvent> = new TeamAppsEvent<UiCalendar_ViewChangedEvent>();
+	public readonly onDataNeeded: TeamAppsEvent<UiCalendar_DataNeededEvent> = new TeamAppsEvent<UiCalendar_DataNeededEvent>();
 
 	private logger = log.getLogger((<any>UiCalendarFullCalendarEventSource.prototype).name || this.constructor.toString().match(/\w+/g)[1]);
 	private intervalManager: IntervalManager = new IntervalManager();
 	private cachedEvents: any[] = [];
-	public events: EventSourceFunction;
+	private queriesDisabled: boolean;
 
-	constructor(private teamappsUiContext: TeamAppsUiContext, private componentId: string) {
-		this.events = this.createEventsFunction();
+	constructor(private teamappsUiContext: TeamAppsUiContext, private componentId: string, private fullCalendarAccessor: () => Calendar) {
 	}
 
-	private createEventsFunction() {
-		let me = this;
-		// FullCalendar messes around with "this" because it uses the method as a plain function...
-		return function (this: Default, start: Moment, end: Moment, timezone: boolean | string, callback: ((events: EventObject[]) => void)): void {
-
-			start = me.removeTimeZoneOffsetFromAmbiguouslyTimedMoment(start, timezone);
-			end = me.removeTimeZoneOffsetFromAmbiguouslyTimedMoment(end, timezone);
-
-			let newInterval: Interval = new Interval(<number>start.valueOf(), <number>end.valueOf());
-
-			if (!me.teamappsUiContext.executingCommand) {
-				setTimeout(() => {
-					me.onViewChanged.fire(EventFactory.createUiCalendar_ViewChangedEvent(
-						me.componentId,
-						parseInt(Object.keys(VIEW_MODE_2_FULL_CALENDAR_CONFIG_STRING).filter((enumValue: any) => VIEW_MODE_2_FULL_CALENDAR_CONFIG_STRING[enumValue] === view.type)[0]),
-						view.intervalStart.valueOf(),
-						view.intervalEnd.valueOf(),
-						view.start.valueOf(),
-						view.end.valueOf()
-					));
-				});
-			}
-
-			let uncoveredIntervals = me.intervalManager.getUncoveredIntervals(newInterval);
-
-			let queryStart: number;
-			let queryEnd: number;
-			if (uncoveredIntervals.length > 0) {
-				queryStart = Math.min.apply(Math, uncoveredIntervals.map(i => i.start));
-				queryEnd = Math.max.apply(Math, uncoveredIntervals.map(i => i.end));
-			} else {
-				queryStart = 0;
-				queryEnd = 0;
-			}
-			let view = this.getView();
-
-			if (queryStart !== queryEnd) {
-				me.logger.debug("DataNeededEvent: " + moment(queryStart).toString() + " - " + moment(queryEnd).toString());
-				setTimeout(() => {
-					me.onDataNeeded.fire(EventFactory.createUiCalendar_DataNeededEvent(me.componentId, queryStart, queryEnd));
-				});
-			}
-
-			let displayedInterval = new Interval(+start, +end);
-			me.logger.debug(`displayed: ${displayedInterval}`);
-			let events = me.cachedEvents.filter(event => {
-				let eventInterval = new Interval(+event.start, +event.end);
-				let matches = IntervalManager.intervalsOverlap(displayedInterval, eventInterval);
-				if (matches) {
-					me.logger.debug(`matching: ${eventInterval}`);
-				}
-				return matches;
+	@bind
+	public events(query: { start: Date; end: Date; timeZone: string; }, successCallback: (events: EventInput[]) => void, failureCallback: (error: EventSourceError) => void) {
+		// let uncoveredIntervals = this.intervalManager.getUncoveredIntervals(new Interval(<number>query.start.valueOf(), <number>query.end.valueOf()));
+		//
+		// let queryStart: number;
+		// let queryEnd: number;
+		// if (uncoveredIntervals.length > 0) {
+		// 	queryStart = Math.min.apply(Math, uncoveredIntervals.map(i => i.start));
+		// 	queryEnd = Math.max.apply(Math, uncoveredIntervals.map(i => i.end));
+		// } else {
+		// 	queryStart = 0;
+		// 	queryEnd = 0;
+		// }
+		// if (queryStart !== queryEnd) {
+		// this.logger.debug("DataNeededEvent: " + query.start.toUTCString() + " - " + query.start.toUTCString());
+		// this.onDataNeeded.fire(EventFactory.createUiCalendar_DataNeededEvent(this.componentId, queryStart, queryEnd));
+		// }
+
+		if (!this.queriesDisabled) {
+			this.onDataNeeded.fire({
+				requestIntervalStart: +query.start,
+				requestIntervalEnd: +query.end
 			});
-			me.logger.debug(`Returning ${events.length} events`);
-			callback(events);
-		};
-	}
+		}
 
-	// see https://fullcalendar.io/docs/moment
-	private removeTimeZoneOffsetFromAmbiguouslyTimedMoment(start: Moment, timezone: boolean | string): Moment {
-		let x = momentTimeZone(start.valueOf()).tz(timezone.toString());
-		return moment(x.add(-x.utcOffset(), "minutes").valueOf());
+		let displayedInterval: Interval = [+query.start, +query.end];
+		this.logger.debug(`displayed: ${displayedInterval}`);
+		let events = this.cachedEvents.filter(event => {
+			let eventInterval: Interval = [+event.start, +event.end];
+			let matches = IntervalManager.intervalsOverlap(displayedInterval, eventInterval);
+			if (matches) {
+				this.logger.debug(`matching: ${eventInterval}`);
+			}
+			return matches;
+		});
+		this.logger.debug(`Returning ${events.length} events`);
+		successCallback(events);
 	}
 
-	public addEvents(start: number, end: number, newEvents: EventObject[]) {
+	public addEvents(start: number, end: number, newEvents: EventInput[]) {
 		newEvents.forEach(e => {
 			if (e.end < start || e.start > end) {
-				this.logger.error(`Event ${e.id} (${moment(e.start).toString()}-${moment(e.end).toString()}) is outside of specified start/end range (${moment(start).toString()}-${moment(end).toString()})! This will very probably lead to inconsistent client-side behaviour!`)
+				this.logger.error(`Event ${e.id} (${e.start}-${e.end}) is outside of specified start/end range (${new Date(start).toUTCString()}-${new Date(end).toUTCString()})! This will very probably lead to inconsistent client-side behaviour!`)
 			}
 			if (e.end.valueOf() <= e.start.valueOf()) {
 				this.logger.warn(`Event ${e.id} has zero or negative duration! Changing to one millisecond!`);
-				e.end = moment((e.start as Moment).valueOf() + 1);
+				e.end = new Date(+(e.start) + 1);
 			}
 		});
 		this.cachedEvents = this.cachedEvents.filter(e => {
@@ -375,10 +474,10 @@ class UiCalendarFullCalendarEventSource implements EventSourceExtendedInput {
 		}); // remove all obsolete events
 		this.cachedEvents = this.cachedEvents.concat(newEvents);
 		this.cachedEvents.sort((a, b) => a.start < b.start ? -1 : a.start > b.start ? 1 : 0);
-		this.intervalManager.addInterval(new Interval(start, end));
+		this.intervalManager.addInterval([start, end]);
 	}
 
-	public addEvent(newEvent: EventObject) {
+	public addEvent(newEvent: EventInput) {
 		this.logger.debug("Adding 1 event");
 		this.addEvents(null, null, [newEvent]);
 	}
@@ -399,6 +498,11 @@ class UiCalendarFullCalendarEventSource implements EventSourceExtendedInput {
 		this.cachedEvents = [];
 		this.intervalManager = new IntervalManager();
 	}
+
+	setQueriesDisabled(queriesDisabled: boolean) {
+		this.queriesDisabled = queriesDisabled;
+	}
 }
 
+
 TeamAppsUiComponentRegistry.registerComponentClass("UiCalendar", UiCalendar);
diff --git a/teamapps-client/ts/modules/UiChatDisplay.ts b/teamapps-client/ts/modules/UiChatDisplay.ts
index 253255b7c..bce799999 100644
--- a/teamapps-client/ts/modules/UiChatDisplay.ts
+++ b/teamapps-client/ts/modules/UiChatDisplay.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,144 +17,240 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-import {UiComponent} from "./UiComponent";
+import {AbstractUiComponent} from "./AbstractUiComponent";
 import {TeamAppsUiContext} from "./TeamAppsUiContext";
-import {parseHtml, prependChild, removeDangerousTags} from "./Common";
+import {addDelegatedEventListener, humanReadableFileSize, parseHtml, prependChild, removeDangerousTags} from "./Common";
 import {UiChatMessageConfig} from "../generated/UiChatMessageConfig";
 import {TeamAppsUiComponentRegistry} from "./TeamAppsUiComponentRegistry";
-import {UiChatDisplay_PreviousMessagesRequestedEvent, UiChatDisplayCommandHandler, UiChatDisplayConfig, UiChatDisplayEventSource} from "../generated/UiChatDisplayConfig";
-import {TeamAppsEvent} from "./util/TeamAppsEvent";
-import {EventFactory} from "../generated/EventFactory";
+import {UiChatDisplayCommandHandler, UiChatDisplayConfig,} from "../generated/UiChatDisplayConfig";
 import {UiSpinner} from "./micro-components/UiSpinner";
+import {executeWhenFirstDisplayed} from "./util/ExecuteWhenFirstDisplayed";
+import {Autolinker} from "autolinker";
+import {ContextMenu} from "./micro-components/ContextMenu";
+import {UiComponent} from "./UiComponent";
+import {UiChatMessageBatchConfig} from "../generated/UiChatMessageBatchConfig";
+import {debounce, debouncedMethod, DebounceMode} from "./util/debounce";
 
-export class UiChatDisplay extends UiComponent<UiChatDisplayConfig> implements UiChatDisplayCommandHandler, UiChatDisplayEventSource {
-
-	public readonly onPreviousMessagesRequested: TeamAppsEvent<UiChatDisplay_PreviousMessagesRequestedEvent> = new TeamAppsEvent(this);
+export class UiChatDisplay extends AbstractUiComponent<UiChatDisplayConfig> implements UiChatDisplayCommandHandler {
 
 	private $main: HTMLElement;
 	private gotFirstMessage: boolean = false;
 	private requestingPreviousMessages: boolean;
-	private chatMessages: UiChatMessageConfig[] = [];
+	private uiChatMessages: UiChatMessage[] = [];
 	private $loadingIndicatorWrapper: HTMLElement;
 	private $messages: HTMLElement;
+	private contextMenu: ContextMenu;
 
 	constructor(config: UiChatDisplayConfig, context: TeamAppsUiContext) {
 		super(config, context);
 		this.$main = parseHtml(`<div class="UiChatDisplay">
-	<div class="loading-indicator-wrapper"></div>
+	<style> [data-teamapps-id=${config.id}] .message.deleted .deleted-icon {
+		background-image: url('${config.deletedMessageIcon}');				
+	}</style>
+	<div class="loading-indicator-wrapper hidden"></div>
 	<div class="messages"></div>
 </div>`);
 		this.$loadingIndicatorWrapper = this.$main.querySelector(":scope .loading-indicator-wrapper");
-		this.$loadingIndicatorWrapper.appendChild(new UiSpinner({fixedSize: 20}).getMainDomElement()[0]);
+		this.$loadingIndicatorWrapper.appendChild(new UiSpinner({fixedSize: 20}).getMainDomElement());
 		this.$messages = this.$main.querySelector(":scope .messages");
 		this.$main.addEventListener("scroll", () => {
 			if (this.$main.scrollTop == 0 && !this.gotFirstMessage) {
+				this.$loadingIndicatorWrapper.classList.remove('hidden');
 				this.requestPreviousMessages();
 			}
 		});
 
-		if (config.messages) {
-			this.addChatMessages(config.messages, false, config.includesFirstMessage);
-		} else if (!config.includesFirstMessage) {
+		if (config.initialMessages) {
+			this.addMessages(config.initialMessages);
+		} else {
 			this.requestPreviousMessages();
 		}
+
+		this.contextMenu = new ContextMenu();
+		addDelegatedEventListener(this.$messages, ".message", "contextmenu", (element, ev) => {
+			if (this._config.contextMenuEnabled) {
+				let chatMessageId = Number(element.getAttribute("data-id"));
+				this.contextMenu.open(ev, async requestId => {
+					let contentComponent = await config.requestContextMenu({chatMessageId}) as UiComponent;
+					if (contentComponent != null) {
+						this.contextMenu.setContent(contentComponent, requestId);
+					} else {
+						this.contextMenu.close(requestId);
+					}
+				});
+			}
+		})
 	}
 
+	@debouncedMethod(500, DebounceMode.LATER)
 	private requestPreviousMessages() {
 		if (!this.requestingPreviousMessages) {
 			this.requestingPreviousMessages = true;
-			this.onPreviousMessagesRequested.fire(EventFactory.createUiChatDisplay_PreviousMessagesRequestedEvent(this.getId(), this.getEarliestChatMessageId()));
-			this.$loadingIndicatorWrapper.classList.remove('hidden');
+			this._config.requestPreviousMessages({}).then(batch => {
+				const heightBefore = this.$messages.offsetHeight;
+				batch.messages.reverse().forEach(messageConfig => {
+					const uiChatMessage = new UiChatMessage(messageConfig);
+					prependChild(this.$messages, uiChatMessage.getMainDomElement());
+					this.uiChatMessages.splice(0, 0, uiChatMessage);
+				});
+				const heightAfter = this.$messages.offsetHeight;
+				this.$main.scroll({top: heightAfter - heightBefore});
+
+				if (batch.containsFirstMessage) {
+					this.gotFirstMessage = true;
+				}
+				this.requestingPreviousMessages = false;
+				this.$loadingIndicatorWrapper.classList.add('hidden');
+			});
 		}
 	}
 
-	getMainDomElement(): JQuery {
-		return $(this.$main);
+	doGetMainElement(): HTMLElement {
+		return this.$main;
 	}
 
-	addChatMessages(chatMessages: UiChatMessageConfig[], prepend: boolean, includesFirstMessage: boolean): void {
-		if (prepend) {
-			const heightBefore = this.$messages.offsetHeight;
-			chatMessages.reverse().forEach(messageConfig => {
-				const chatMessage = new UiChatMessage(messageConfig, this._context);
-				prependChild(this.$messages, chatMessage.getMainDomElement());
-				this.chatMessages.splice(0, 0, messageConfig);
-			});
-			const heightAfter = this.$messages.offsetHeight;
-			this.$main.scroll({top: heightAfter - heightBefore});
-		} else {
-			chatMessages.forEach(messageConfig => {
-				const chatMessage = new UiChatMessage(messageConfig, this._context);
-				this.$messages.appendChild(chatMessage.getMainDomElement());
-				this.chatMessages.push(messageConfig);
-			});
-			this.scrollToBottom();
-		}
-		if (includesFirstMessage) {
+	addMessages(batch: UiChatMessageBatchConfig): void {
+		batch.messages.forEach(messageConfig => {
+			const chatMessage = new UiChatMessage(messageConfig);
+			this.$messages.appendChild(chatMessage.getMainDomElement());
+			this.uiChatMessages.push(chatMessage);
+		});
+		if (batch.containsFirstMessage) {
 			this.gotFirstMessage = true;
 		}
-		this.requestingPreviousMessages = false;
-		this.$loadingIndicatorWrapper.classList.add('hidden');
+		this.scrollToBottom();
+	}
+
+	updateMessage(message: UiChatMessageConfig) {
+		this.uiChatMessages.find(m => m.id === message.id)
+			?.update(message);
+	}
+
+	deleteMessage(messageId: number) {
+		let messageIndex = this.uiChatMessages.findIndex(m => m.id === messageId);
+		if (messageIndex >= 0) {
+			let uiChatMessage = this.uiChatMessages[messageIndex];
+			uiChatMessage.getMainDomElement().remove();
+			this.uiChatMessages.splice(messageIndex, 1);
+		}
 	}
 
-	replaceChatMessages(chatMessages: UiChatMessageConfig[], includesFirstMessage: boolean): void {
-		this.chatMessages = [];
+	clearMessages(batch: UiChatMessageBatchConfig): void {
+		this.uiChatMessages = [];
 		this.$messages.innerHTML = '';
 		this.gotFirstMessage = false;
 		this.requestingPreviousMessages = false;
-		this.addChatMessages(chatMessages, true, includesFirstMessage);
+		this.addMessages(batch);
 	}
 
+	@executeWhenFirstDisplayed(true)
 	private scrollToBottom() {
-		this.$main.scroll({
-			top: 100000000,
-			behavior: 'smooth'
-		});
+		const scrollToBottom = ()=>  {
+			this.$main.scroll({
+				top: 100000000,
+				behavior: 'smooth'
+			});
+		}
+		this.doWhenAllImagesAreLoaded(scrollToBottom);
 	}
 
-	protected onAttachedToDom(): void {
-		this.scrollToBottom();
+	private doWhenAllImagesAreLoaded(action: () => void) {
+		let allImages = Array.from(this.$messages.querySelectorAll(":scope img"));
+		let incompleteImages: HTMLImageElement[] = allImages
+			.map(img => img as HTMLImageElement)
+			.filter(img => !img.complete);
+		if (incompleteImages.length > 0) {
+			Promise.all(incompleteImages.map(img => new Promise((resolve, reject) => {
+				img.addEventListener("load", resolve, {once:true});
+				img.addEventListener("error", resolve, {once:true}); // since we are only interested in when loading activity is done
+			}))).then(action)
+		} else {
+			action();
+		}
 	}
 
-	private getEarliestChatMessageId() {
-		return this.chatMessages[0] && this.chatMessages[0].id;
+	onResize() {
+		this.scrollToBottom(); // hack. actually, I want to scrollToBottom only when this component gets re-attached...
+	}
+
+	closeContextMenu(): void {
+		this.contextMenu.close();
 	}
 }
 
 TeamAppsUiComponentRegistry.registerComponentClass("UiChatDisplay", UiChatDisplay);
 
 class UiChatMessage {
+
+	private static readonly AUTOLINKER = new Autolinker({
+		urls: {
+			schemeMatches: true,
+			wwwMatches: true,
+			tldMatches: true
+		},
+		email: true,
+		phone: true,
+		mention: false,
+		hashtag: false,
+
+		stripPrefix: false,
+		stripTrailingSlash: false,
+		newWindow: true,
+
+		truncate: {
+			length: 70,
+			location: 'smart'
+		},
+
+		className: ''
+	});
+
 	private $main: HTMLElement;
 	private $photos: HTMLElement;
 	private $files: HTMLElement;
+	private config: UiChatMessageConfig;
+
+	constructor(config: UiChatMessageConfig) {
+		this.$main = parseHtml(`<div class="message UiChatMessage" data-id="${config.id}"></div>`);
+		this.update(config);
+	}
+
+	public update(config: UiChatMessageConfig) {
+		this.config = config;
+		this.$main.classList.toggle("deleted", config.deleted);
+		this.$main.innerHTML = "";
+		let text = removeDangerousTags(this.config.text);
+		text = UiChatMessage.AUTOLINKER.link(text);
+		this.$main.appendChild(parseHtml(`<img class="user-image" src="${this.config.userImageUrl}"></img>`))
+		this.$main.appendChild(parseHtml(`<div class="user-nickname">${this.config.userNickname}</div>`))
+		this.$main.appendChild(parseHtml(`<div class="text">${text}</div>`))
+		this.$main.appendChild(parseHtml(`<div class="photos"></div>`))
+		this.$main.appendChild(parseHtml(`<div class="files"></div>`))
+		this.$main.appendChild(parseHtml(`<div class="deleted-icon"></div>`))
 
-	constructor(private config: UiChatMessageConfig, private context: TeamAppsUiContext) {
-		this.$main = parseHtml(`<div class="message">
-	<img class="user-image" src="${config.userImageUrl}"> </img>
-	<div class="user-nickname">${config.userNickname}</div>
-	<div class="text">${removeDangerousTags(config.text)}</div>
-	<div class="photos"></div>
-	<div class="files"></div>
-</div>`);
 		this.$photos = this.$main.querySelector(":scope .photos");
 		this.$files = this.$main.querySelector(":scope .files");
 
-		if (config.photos != null) {
-			config.photos.forEach(photo => {
-				this.$photos.appendChild(parseHtml(`<img class="photo" src="${photo.imageUrl}"> </img>`))
+		if (this.config.photos != null) {
+			this.config.photos.forEach(photo => {
+				this.$photos.appendChild(parseHtml(`<img class="photo" src="${photo.imageUrl}">`))
 			});
 		}
-		if (config.files != null) {
-			config.files.forEach(file => {
+		if (this.config.files != null) {
+			this.config.files.forEach(file => {
 				this.$files.appendChild(parseHtml(`<a class="file" target="_blank" href="${file.downloadUrl}">
-	<div class="file-icon img img-32" style="background-image: url(${file.thumbnailUrl || context.getIconPath(file.icon, 24)})"> </div>
-	<div class="file-name">${file.name}</div>
-	<div class="file-size">23.4 kB</div>
-</a>`))
+					<div class="file-icon img img-32" style="background-image: url('${file.thumbnailUrl || file.icon}')"> </div>
+					<div class="file-name">${file.name}</div>
+					<div class="file-size">${humanReadableFileSize(file.length)}</div>
+				</a>`))
 			});
 		}
 	}
 
+	public get id() {
+		return this.config.id;
+	}
+
 	public getMainDomElement(): HTMLElement {
 		return this.$main;
 	}
diff --git a/teamapps-client/ts/modules/UiChatInput.ts b/teamapps-client/ts/modules/UiChatInput.ts
index 351e0ae84..4e7a9526e 100644
--- a/teamapps-client/ts/modules/UiChatInput.ts
+++ b/teamapps-client/ts/modules/UiChatInput.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,9 +17,9 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-import {UiComponent} from "./UiComponent";
+import {AbstractUiComponent} from "./AbstractUiComponent";
 import {TeamAppsUiContext} from "./TeamAppsUiContext";
-import {createImageThumbnailUrl, parseHtml} from "./Common";
+import {createImageThumbnailUrl, fadeOut, insertAtCursorPosition, parseHtml} from "./Common";
 import {TeamAppsUiComponentRegistry} from "./TeamAppsUiComponentRegistry";
 import {
 	UiChatInput_FileItemClickedEvent,
@@ -38,52 +38,55 @@ import {FileUploader} from "./util/FileUploader";
 import {ProgressBar} from "./micro-components/ProgressBar";
 import {TeamAppsEvent} from "./util/TeamAppsEvent";
 import * as log from "loglevel";
-import {EventFactory} from "../generated/EventFactory";
 import {createUiNewChatMessageConfig} from "../generated/UiNewChatMessageConfig";
 import {createUiChatNewFileConfig} from "../generated/UiChatNewFileConfig";
-import Mouse = JQuery.Mouse;
 
-export class UiChatInput extends UiComponent<UiChatInputConfig> implements UiChatInputCommandHandler, UiChatInputEventSource {
+export class UiChatInput extends AbstractUiComponent<UiChatInputConfig> implements UiChatInputCommandHandler, UiChatInputEventSource {
 
-	onFileItemClicked: TeamAppsEvent<UiChatInput_FileItemClickedEvent> = new TeamAppsEvent(this);
-	onFileItemRemoved: TeamAppsEvent<UiChatInput_FileItemRemovedEvent> = new TeamAppsEvent(this);
-	onMessageSent: TeamAppsEvent<UiChatInput_MessageSentEvent> = new TeamAppsEvent(this);
-	onUploadCanceled: TeamAppsEvent<UiChatInput_UploadCanceledEvent> = new TeamAppsEvent(this);
-	onUploadFailed: TeamAppsEvent<UiChatInput_UploadFailedEvent> = new TeamAppsEvent(this);
-	onUploadStarted: TeamAppsEvent<UiChatInput_UploadStartedEvent> = new TeamAppsEvent(this);
-	onUploadSuccessful: TeamAppsEvent<UiChatInput_UploadSuccessfulEvent> = new TeamAppsEvent(this);
-	onUploadTooLarge: TeamAppsEvent<UiChatInput_UploadTooLargeEvent> = new TeamAppsEvent(this);
+	onFileItemClicked: TeamAppsEvent<UiChatInput_FileItemClickedEvent> = new TeamAppsEvent();
+	onFileItemRemoved: TeamAppsEvent<UiChatInput_FileItemRemovedEvent> = new TeamAppsEvent();
+	onMessageSent: TeamAppsEvent<UiChatInput_MessageSentEvent> = new TeamAppsEvent();
+	onUploadCanceled: TeamAppsEvent<UiChatInput_UploadCanceledEvent> = new TeamAppsEvent();
+	onUploadFailed: TeamAppsEvent<UiChatInput_UploadFailedEvent> = new TeamAppsEvent();
+	onUploadStarted: TeamAppsEvent<UiChatInput_UploadStartedEvent> = new TeamAppsEvent();
+	onUploadSuccessful: TeamAppsEvent<UiChatInput_UploadSuccessfulEvent> = new TeamAppsEvent();
+	onUploadTooLarge: TeamAppsEvent<UiChatInput_UploadTooLargeEvent> = new TeamAppsEvent();
 
 	private $main: HTMLElement;
 	private $uploadItems: HTMLElement;
 	private uploadItems: FileUploadItem[] = [];
 	private $textInput: HTMLInputElement;
 	private $sendButton: HTMLElement;
+	private $attachmentButton: Element;
 
 	constructor(config: UiChatInputConfig, context: TeamAppsUiContext) {
 		super(config, context);
 		this.$main = parseHtml(`<div class="UiChatInput drop-zone">
 	<div class="upload-items"></div>
-	<textarea class="text-input"></textarea>
+	<textarea class="text-input" maxlength="${config.messageLengthLimit}"></textarea>
 	<div class="button attachment-button glyphicon glyphicon-paperclip glyphicon-button glyphicon-button-md"></div>
 	<div class="button send-button glyphicon glyphicon-send glyphicon-button glyphicon-button-md"></div>
-	<input class="file-input" type="file" multiple tabindex="-1">
+	<input class="file-input" type="file" multiple tabindex="-1"></input>
 </div>`);
 		this.$uploadItems = this.$main.querySelector(":scope .upload-items");
 		this.$textInput = this.$main.querySelector(":scope .text-input");
 		this.$sendButton = this.$main.querySelector(":scope .send-button");
-		const $attachmentButton = this.$main.querySelector(":scope .attachment-button");
+		this.$attachmentButton = this.$main.querySelector(":scope .attachment-button");
 		const $fileInput = this.$main.querySelector<HTMLInputElement>(":scope .file-input");
 
 		this.$textInput.addEventListener("keyup", () => this.updateSendability());
 		this.$textInput.addEventListener("keydown", (e: MouseEvent) => {
-			if ((e as any).key === 'Enter'){
-				this.send();
+			if ((e as any).key === 'Enter') {
+				if (e.shiftKey) {
+					insertAtCursorPosition(this.$textInput, "\n");
+				} else {
+					this.send();
+				}
 				e.preventDefault(); // no new-line character in the text input, please
 			}
 		});
 
-		$attachmentButton.addEventListener("click", () => $fileInput.click());
+		this.$attachmentButton.addEventListener("click", () => $fileInput.click());
 		$fileInput.addEventListener("change", e => {
 			this.upload($fileInput.files);
 			$fileInput.value = "";
@@ -92,6 +95,9 @@ export class UiChatInput extends UiComponent<UiChatInputConfig> implements UiCha
 		this.$sendButton.addEventListener("click", () => this.send());
 
 		this.$main.addEventListener("dragover", (e) => {
+			if (!this._config.attachmentsEnabled) {
+				return;
+			}
 			this.$main.classList.add("drop-zone-active");
 			// preventDefault() is important as it indicates that the drop is possible!!! see https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operations#droptargets
 			e.preventDefault();
@@ -111,28 +117,41 @@ export class UiChatInput extends UiComponent<UiChatInputConfig> implements UiCha
 			const files = e.dataTransfer.files;
 			this.upload(files);
 		});
-		
+
+		this.setAttachmentsEnabled(config.attachmentsEnabled);
 		this.updateSendability();
 	}
 
 	private send() {
-		this.onMessageSent.fire(EventFactory.createUiChatInput_MessageSentEvent(this.getId(), createUiNewChatMessageConfig({
-			text: this.$textInput.value,
-			uploadedFiles: this.uploadItems
-				.filter(item => item.state === UploadState.SUCCESS)
-				.map(item => createUiChatNewFileConfig({uploadedFileUuid: item.uploadedFileUuid, fileName: item.file.name}))
-		})));
+		if (!this.sendable()) {
+			return;
+		}
+
+		this.onMessageSent.fire({
+			message: createUiNewChatMessageConfig({
+				text: this.$textInput.value,
+				uploadedFiles: this.uploadItems
+					.filter(item => item.state === UploadState.SUCCESS)
+					.map(item => createUiChatNewFileConfig({
+						uploadedFileUuid: item.uploadedFileUuid,
+						fileName: item.file.name
+					}))
+			})
+		});
 		this.$uploadItems.innerHTML = "";
 		this.uploadItems = [];
 		this.$textInput.value = "";
 		this.updateSendability();
 	}
 
-	getMainDomElement(): JQuery {
-		return $(this.$main);
+	doGetMainElement(): HTMLElement {
+		return this.$main;
 	}
 
 	private upload(files: FileList) {
+		if (!this._config.attachmentsEnabled) {
+			return;
+		}
 		for (let i = 0; i < files.length; i++) {
 			const file = files[i];
 			const uploadItem = new FileUploadItem(file, this._config.defaultFileIcon, this._config.uploadUrl, this._context);
@@ -155,13 +174,20 @@ export class UiChatInput extends UiComponent<UiChatInputConfig> implements UiCha
 	}
 
 	private updateSendability() {
+		this.$sendButton.classList.toggle("disabled", !this.sendable());
+	}
+
+	private sendable() {
 		const uploading = this.uploadItems.some(item => item.state === UploadState.IN_PROGRESS);
 		const hasSuccessfulFileUploads = this.uploadItems.filter(item => item.state === UploadState.SUCCESS).length > 0;
 		const hasTextInput = this.$textInput.value.length > 0;
-		const sendable = !uploading && (hasSuccessfulFileUploads || hasTextInput);
-		this.$sendButton.classList.toggle("disabled", !sendable);
+		return !uploading && (hasSuccessfulFileUploads || hasTextInput);
 	}
 
+	public setAttachmentsEnabled(enabled: boolean) {
+		this._config.attachmentsEnabled = enabled;
+		this.$attachmentButton.classList.toggle("hidden", !enabled);
+	}
 }
 
 enum UploadState {
@@ -171,7 +197,7 @@ enum UploadState {
 class FileUploadItem {
 	private static LOGGER: log.Logger = log.getLogger("UploadItem");
 
-	public readonly onComplete: TeamAppsEvent<void> = new TeamAppsEvent(this);
+	public readonly onComplete: TeamAppsEvent<void> = new TeamAppsEvent();
 
 	private $main: HTMLElement;
 	public state: UploadState = UploadState.IN_PROGRESS;
@@ -179,16 +205,16 @@ class FileUploadItem {
 
 	constructor(public file: File, defaultFileIcon: string, uploadUrl: string, context: TeamAppsUiContext) {
 		this.$main = parseHtml(`<div class="upload-item">
-	<div class="icon img img-24" style="background-image: url(${context.getIconPath(defaultFileIcon, 24)})"></div>
+	<div class="icon img img-24" style="background-image: url('${defaultFileIcon}')"></div>
 	<div class="name">${file.name}</div>
 </div>`);
 		const $icon = this.$main.querySelector<HTMLElement>(":scope .icon");
 		createImageThumbnailUrl(file)
-			.then(url => $icon.style.backgroundImage = `url(${url})`)
+			.then(url => $icon.style.backgroundImage = `url('${url}')`)
 			.catch(reason => FileUploadItem.LOGGER.debug(`Could not create thumbnail for file ${file}. Reason: ${reason}.`));
 		const progressBar = new ProgressBar(0, {});
 
-		this.$main.appendChild(progressBar.getMainDomElement()[0]);
+		this.$main.appendChild(progressBar.getMainDomElement());
 
 		const uploader = new FileUploader();
 		uploader.onProgress.addListener(progress => progressBar.setProgress(progress));
@@ -201,7 +227,7 @@ class FileUploadItem {
 			this.state = UploadState.SUCCESS;
 			this.uploadedFileUuid = uuid;
 			this.onComplete.fire(null);
-			progressBar.getMainDomElement().fadeOut();
+			fadeOut(progressBar.getMainDomElement());
 		});
 		uploader.upload(file, uploadUrl)
 	}
diff --git a/teamapps-client/ts/modules/UiClientObject.ts b/teamapps-client/ts/modules/UiClientObject.ts
new file mode 100644
index 000000000..dc00c8de3
--- /dev/null
+++ b/teamapps-client/ts/modules/UiClientObject.ts
@@ -0,0 +1,28 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+import {UiComponentCommandHandler, UiComponentConfig} from "../generated/UiComponentConfig";
+import {TeamAppsEvent} from "./util/TeamAppsEvent";
+import {UiClientObjectConfig} from "../generated/UiClientObjectConfig";
+
+export interface UiClientObject<C extends UiClientObjectConfig = UiClientObjectConfig> {
+
+	destroy(): void;
+
+}
diff --git a/teamapps-client/ts/modules/UiCollapsible.ts b/teamapps-client/ts/modules/UiCollapsible.ts
new file mode 100644
index 000000000..34ce0b747
--- /dev/null
+++ b/teamapps-client/ts/modules/UiCollapsible.ts
@@ -0,0 +1,99 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+import {AbstractUiComponent} from "./AbstractUiComponent";
+import {TeamAppsUiContext} from "./TeamAppsUiContext";
+import {parseHtml, toggleElementCollapsed} from "./Common";
+import {TeamAppsUiComponentRegistry} from "./TeamAppsUiComponentRegistry";
+import {UiComponent} from "./UiComponent";
+import {
+	UiCollapsible_CollapseStateChangedEvent,
+	UiCollapsibleCommandHandler,
+	UiCollapsibleConfig,
+	UiCollapsibleEventSource
+} from "../generated/UiCollapsibleConfig";
+import {TeamAppsEvent} from "./util/TeamAppsEvent";
+
+export class UiCollapsible extends AbstractUiComponent<UiCollapsibleConfig> implements UiCollapsibleCommandHandler, UiCollapsibleEventSource {
+	
+	readonly onCollapseStateChanged: TeamAppsEvent<UiCollapsible_CollapseStateChangedEvent> = new TeamAppsEvent();
+
+	private $main: HTMLDivElement;
+	private $icon: HTMLElement;
+	private $caption: HTMLElement;
+	private $body: HTMLElement;
+	private $expander: Element;
+
+	constructor(config: UiCollapsibleConfig, context: TeamAppsUiContext) {
+		super(config, context);
+		this.$main = parseHtml(`<div class="UiCollapsible">
+	<div class="collapsible-header">
+		<div class="expander teamapps-expander ${config.collapsed ? '' : 'expanded'}"></div>
+		<div class="icon img img-16"></div>
+		<div class="caption"></div>
+	</div>
+	<div class="collapsible-body"></div>
+</div>`);
+		this.$expander = this.$main.querySelector(":scope .expander");
+		this.$icon = this.$main.querySelector(":scope .icon");
+		this.$caption = this.$main.querySelector(":scope .caption");
+		this.$body = this.$main.querySelector(":scope .collapsible-body");
+
+		this.setIconAndCaption(config.icon, config.caption);
+		this.setContent(config.content);
+		this.setCollapsed(config.collapsed);
+
+		this.$expander.addEventListener("click", evt => {
+			let collapsed = !this._config.collapsed;
+			this.setCollapsed(collapsed);
+			this.onCollapseStateChanged.fire({collapsed});
+		});
+	}
+
+	public doGetMainElement(): HTMLElement {
+		return this.$main;
+	}
+
+	setContent(content: unknown): void {
+		this.$body.innerHTML = "";
+		if (content != null) {
+			this.$body.append((content as UiComponent).getMainElement());
+		}
+	}
+
+	setCollapsed(collapsed: boolean): any {
+		this._config.collapsed = collapsed;
+		this.$main.classList.toggle("collapsed", collapsed);
+		this.$expander.classList.toggle("expanded", !collapsed);
+
+		this.$main.classList.add("expanding")
+		toggleElementCollapsed(this.$body, collapsed, 300, "hidden", () => {
+			this.$main.classList.remove("expanding");
+		});
+	}
+
+	setIconAndCaption(icon: string, caption: string): any {
+		this._config.icon = icon;
+		this._config.caption = caption;
+		this.$icon.style.backgroundImage = `url('${icon}')`;
+		this.$caption.innerText = caption;
+	}
+}
+
+TeamAppsUiComponentRegistry.registerComponentClass("UiCollapsible", UiCollapsible);
diff --git a/teamapps-client/ts/modules/UiComponent.ts b/teamapps-client/ts/modules/UiComponent.ts
index fa36963d4..668c8b195 100644
--- a/teamapps-client/ts/modules/UiComponent.ts
+++ b/teamapps-client/ts/modules/UiComponent.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,155 +17,19 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-import {TeamAppsUiContext} from "./TeamAppsUiContext";
-import * as log from "loglevel";
 import {UiComponentCommandHandler, UiComponentConfig} from "../generated/UiComponentConfig";
 import {TeamAppsEvent} from "./util/TeamAppsEvent";
+import {UiClientObject} from "./UiClientObject";
 
-export abstract class UiComponent<C extends UiComponentConfig = UiComponentConfig> implements UiComponentCommandHandler {
-
-	protected readonly logger: log.Logger = log.getLogger((<any>(this.constructor)).name || this.constructor.toString().match(/\w+/g)[1]);
-
-	public readonly onVisibilityChanged: TeamAppsEvent<boolean> = new TeamAppsEvent(this);
-	public readonly onResized: TeamAppsEvent<{width: number; height: number}> = new TeamAppsEvent(this);
-	public readonly onAttachedToDomChanged: TeamAppsEvent<boolean> = new TeamAppsEvent(this);
-
-	private _attachedToDom = false;
-	private width: number = 0;
-	private height: number = 0;
-	private firstReLayout = true;
-
-	private visible = true;
-
-	constructor(protected _config: C,
-	            protected _context: TeamAppsUiContext) {
-		setTimeout(() => {
-			this.setVisible(_config.visible, false);
-			if (_config.stylesBySelector != null) { // might be null when used via JavaScript API!
-				Object.keys(_config.stylesBySelector).forEach(selector => this.setStyle(selector, _config.stylesBySelector[selector]));
-			}
-		}, 0);
-	}
-
-	public getId(): string {
-		return this._config.id;
-	}
-
-	public getTeamAppsType(): string {
-		return this._config._type;
-	}
-
-	get attachedToDom() {
-		return this._attachedToDom;
-	}
-
-	set attachedToDom(attachedToDom) {
-		let wasAttachedToDom = this._attachedToDom;
-		this._attachedToDom = attachedToDom;
-		if (attachedToDom && !wasAttachedToDom) {
-			this.width = this.getMainDomElement()[0].offsetWidth;
-			this.height = this.getMainDomElement()[0].offsetHeight;
-			this.onAttachedToDom();
-			this.onAttachedToDomChanged.fire(attachedToDom);
-			this.reLayout();
-		}
-	}
-
-	/**
-	 * This method should get called from a container component when the available size for a child changes.
-	 */
-	public reLayout(force?: boolean): void {
-		if (this.attachedToDom) {
-			let availableWidth = this.getMainDomElement()[0].offsetWidth;
-			let availableHeight = this.getMainDomElement()[0].offsetHeight;
-			if (this.firstReLayout || force || availableWidth !== this.width || availableHeight !== this.height) {
-				this.logger.trace("resize: " + this.getId());
-				this.firstReLayout = false;
-				this.width = availableWidth;
-				this.height = availableHeight;
-				this.onResized.fire({width: this.width, height: this.height});
-				this.onResize();
-			}
-		}
-	}
-
-	/**
-	 * This method gets called whenever the available size for this component changes.
-	 */
-	public onResize(): void {
-		// do nothing (default implementation)
-	}
-
-	/**
-	 * This method is called when the component gets destroyed.
-	 * It should be used to release any resources the component holds. This can be:
-	 *   - additional DOM elements that are not children of the component's main DOM element, e.g. attached to the document's body.
-	 *   - other resources that are not released just by removing the component's main DOM element
-	 */
-	public destroy() {
-		// empty default implementation
-	}
+export interface UiComponent<C extends UiComponentConfig = UiComponentConfig> extends UiClientObject<C>, UiComponentCommandHandler {
 
 	/**
 	 * @return The main DOM element of this component.
-	 * This method is used by the main TeamApps UI mechanism to get the element and attach it to the DOM.
 	 */
-	public abstract getMainDomElement(): JQuery;
-
-	/**
-	 * Override this method to execute code that cannot be executed before the field is attached to the DOM.
-	 *
-	 * Example 1:
-	 *   An HTML/Flash video player with autoplay = true will not be able to play until it is attached to the DOM.
-	 *   So the code for starting the video will need to be executed in this (overwritten) method.
-	 * Example 2:
-	 *   UiTable uses slickgrid. slickgrid can only initialize correctly when attached to the DOM.
-	 *
-	 * Components containing other components should set attachedToDom on their child components.
-	 * This will in turn invoke this method on the children, so the call propagates recursively.
-	 *
-	 * Example:
-	 *   A component with child components will call "child.attachedToDom = true" on its children.
-	 */
-	protected onAttachedToDom(): void {
-		// do nothing (default implementation)
-	}
-
-	public getWidth(): number {
-		return this.width;
-	}
-
-	public getHeight(): number {
-		return this.height;
-	}
-
-	public isVisible() {
-		return this.visible;
-	}
+	getMainElement(): HTMLElement;
 
-	public setVisible(visible: boolean = true /*undefined == true!!*/, fireEvent = true) {
-		this.visible = visible;
-		if (this.getMainDomElement() != null) { // might not have been rendered yet, if setVisible is already called in the constructor/initializer
-			this.getMainDomElement().toggleClass("invisible-component", !visible);
-		}
-		if (fireEvent) {
-			this.onVisibilityChanged.fire(visible);
-		}
-	}
+	readonly onVisibilityChanged: TeamAppsEvent<boolean>;
 
-	// TODO change this implementation to generate style sheets instead of setting styles!
-	public setStyle(selector:string, style: {[property: string]: string}) {
-		let targetElement: HTMLElement[];
-		if (!selector) {
-			targetElement = [this.getMainDomElement()[0]];
-		} else {
-			targetElement = Array.from((this.getMainDomElement()[0] as HTMLElement).querySelectorAll(":scope " + selector));
-		}
-		if (targetElement.length === 0) {
-			this.logger.error("Cannot set style on non-existing element. Selector: " + selector);
-		} else {
-			targetElement.forEach(t => Object.assign(t.style, style));
-		}
-	}
+	isVisible(): boolean;
 
 }
diff --git a/teamapps-client/ts/modules/UiDefaultMultiProgressDisplay.ts b/teamapps-client/ts/modules/UiDefaultMultiProgressDisplay.ts
new file mode 100644
index 000000000..9fde303c2
--- /dev/null
+++ b/teamapps-client/ts/modules/UiDefaultMultiProgressDisplay.ts
@@ -0,0 +1,68 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+
+import {AbstractUiComponent} from "./AbstractUiComponent";
+import {TeamAppsUiContext} from "./TeamAppsUiContext";
+import {TeamAppsUiComponentRegistry} from "./TeamAppsUiComponentRegistry";
+import {TeamAppsEvent} from "./util/TeamAppsEvent";
+import {parseHtml} from "./Common";
+import {UiDefaultMultiProgressDisplayCommandHandler, UiDefaultMultiProgressDisplayConfig, UiDefaultMultiProgressDisplayEventSource} from "../generated/UiDefaultMultiProgressDisplayConfig";
+import {UiMultiProgressDisplay_ClickedEvent, UiMultiProgressDisplayCommandHandler, UiMultiProgressDisplayConfig, UiMultiProgressDisplayEventSource} from "../generated/UiMultiProgressDisplayConfig";
+
+export abstract class UiMultiProgressDisplay<C extends UiMultiProgressDisplayConfig = UiMultiProgressDisplayConfig> extends AbstractUiComponent<C> implements UiMultiProgressDisplayCommandHandler, UiMultiProgressDisplayEventSource {
+	public readonly onClicked: TeamAppsEvent<UiMultiProgressDisplay_ClickedEvent> = new TeamAppsEvent();
+	abstract update(config: C): void;
+}
+
+export class UiDefaultMultiProgressDisplay extends UiMultiProgressDisplay<UiDefaultMultiProgressDisplayConfig> implements UiDefaultMultiProgressDisplayCommandHandler, UiDefaultMultiProgressDisplayEventSource {
+
+	private $main: HTMLElement;
+	private $spinner: HTMLElement;
+	private $runningCount: HTMLElement;
+
+	constructor(config: UiDefaultMultiProgressDisplayConfig, context: TeamAppsUiContext) {
+		super(config, context);
+
+		this.$main = parseHtml(`<div class="UiDefaultMultiProgressDisplay">
+	<div class="spinner teamapps-spinner"></div>					
+	<div class="running-count">0</div>					
+</div>`);
+
+		this.$spinner = this.$main.querySelector<HTMLElement>(":scope .spinner");
+		this.$runningCount = this.$main.querySelector<HTMLElement>(":scope .running-count");
+
+		this.$main.addEventListener("mousedown", ev => this.onClicked.fire({}));
+
+		this.update(config);
+	}
+
+	doGetMainElement(): HTMLElement {
+		return this.$main;
+	}
+
+	update(config: UiDefaultMultiProgressDisplayConfig): void {
+		this.$main.classList.toggle("no-tasks", config.runningCount === 0);
+		this.$spinner.classList.toggle('hidden', config.runningCount === 0);
+		this.$runningCount.innerText = "" + config.runningCount;
+	}
+
+}
+
+TeamAppsUiComponentRegistry.registerComponentClass("UiDefaultMultiProgressDisplay", UiDefaultMultiProgressDisplay);
diff --git a/teamapps-client/ts/modules/UiDiv.ts b/teamapps-client/ts/modules/UiDiv.ts
new file mode 100644
index 000000000..253a55021
--- /dev/null
+++ b/teamapps-client/ts/modules/UiDiv.ts
@@ -0,0 +1,50 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+import {AbstractUiComponent} from "./AbstractUiComponent";
+import {TeamAppsUiContext} from "./TeamAppsUiContext";
+import {UiDivConfig} from "../generated/UiDivConfig";
+import {parseHtml} from "./Common";
+import {TeamAppsUiComponentRegistry} from "./TeamAppsUiComponentRegistry";
+import {UiComponent} from "./UiComponent";
+import {UiDivCommandHandler} from "../generated/UiDivConfig";
+
+export class UiDiv extends AbstractUiComponent<UiDivConfig> implements UiDivCommandHandler {
+
+	private $main: HTMLDivElement;
+
+	constructor(config: UiDivConfig, context: TeamAppsUiContext) {
+		super(config, context);
+		this.$main = parseHtml(`<div class="UiDiv"></div>`);
+		this.setContent(config.content);
+	}
+
+	public doGetMainElement(): HTMLElement {
+		return this.$main;
+	}
+
+	setContent(content: unknown): void {
+		this.$main.innerHTML = "";
+		if (content != null) {
+			this.$main.append((content as UiComponent).getMainElement());
+		}
+	}
+}
+
+TeamAppsUiComponentRegistry.registerComponentClass("UiDiv", UiDiv);
diff --git a/teamapps-client/ts/modules/UiDocumentViewer.ts b/teamapps-client/ts/modules/UiDocumentViewer.ts
index da9cec9e5..fdaf3fb90 100644
--- a/teamapps-client/ts/modules/UiDocumentViewer.ts
+++ b/teamapps-client/ts/modules/UiDocumentViewer.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,35 +17,34 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-import * as $ from "jquery";
-import {UiComponent} from "./UiComponent";
+
+import {AbstractUiComponent} from "./AbstractUiComponent";
 import {TeamAppsUiContext} from "./TeamAppsUiContext";
 import {TeamAppsUiComponentRegistry} from "./TeamAppsUiComponentRegistry";
 import {UiDocumentViewerCommandHandler, UiDocumentViewerConfig} from "../generated/UiDocumentViewerConfig";
 import {UiPageDisplayMode} from "../generated/UiPageDisplayMode";
-import {bind} from "./util/Bind";
-import {enableScrollViaDragAndDrop, generateUUID} from "./Common";
+import {css, enableScrollViaDragAndDrop, generateUUID, parseHtml} from "./Common";
 import {UiBorderConfig} from "../generated/UiBorderConfig";
 import {createUiBorderCssString, createUiShadowCssString} from "./util/CssFormatUtil";
 import {UiShadowConfig} from "../generated/UiShadowConfig";
 
 interface Page {
-	$img: JQuery;
+	$img: HTMLElement;
 	naturalWidth?: number;
 	naturalHeight?: number;
 }
 
-export class UiDocumentViewer extends UiComponent<UiDocumentViewerConfig> implements UiDocumentViewerCommandHandler{
+export class UiDocumentViewer extends AbstractUiComponent<UiDocumentViewerConfig> implements UiDocumentViewerCommandHandler {
 
-	private $componentWrapper: JQuery;
-	private $pagesContainerWrapper: JQuery;
-	private $pagesContainer: JQuery;
+	private $componentWrapper: HTMLElement;
+	private $pagesContainerWrapper: HTMLElement;
+	private $pagesContainer: HTMLElement;
 	private zoomFactor: number;
 	private displayMode: UiPageDisplayMode;
 	private pages: Page[] = [];
 
 	private uuidClass: string;
-	private $styleTag: JQuery;
+	private $styleTag: HTMLElement;
 	private pageBorder: UiBorderConfig;
 	private pageSpacing: number;
 	private pageShadow: UiShadowConfig;
@@ -55,7 +54,7 @@ export class UiDocumentViewer extends UiComponent<UiDocumentViewerConfig> implem
 
 		this.uuidClass = `UiDocumentViewer-${generateUUID()}`;
 
-		this.$componentWrapper = $(`<div id="${config.id}" class="UiDocumentViewer ${this.uuidClass}">  
+		this.$componentWrapper = parseHtml(`<div class="UiDocumentViewer ${this.uuidClass}">  
 		    <style></style>
 			<div class="toolbar-container"></div>  
 			<div class="pages-container-wrapper">
@@ -63,9 +62,9 @@ export class UiDocumentViewer extends UiComponent<UiDocumentViewerConfig> implem
 		    </div>
 	    </div>`);
 
-		this.$pagesContainerWrapper = this.$componentWrapper.find(".pages-container-wrapper");
-		this.$styleTag = this.$componentWrapper.find("style");
-		this.$pagesContainer = this.$componentWrapper.find('.pages-container');
+		this.$pagesContainerWrapper = this.$componentWrapper.querySelector<HTMLElement>(":scope .pages-container-wrapper");
+		this.$styleTag = this.$componentWrapper.querySelector<HTMLElement>(":scope style");
+		this.$pagesContainer = this.$componentWrapper.querySelector<HTMLElement>(':scope .pages-container');
 		enableScrollViaDragAndDrop(this.$pagesContainerWrapper);
 
 		this.zoomFactor = config.zoomFactor;
@@ -82,11 +81,11 @@ export class UiDocumentViewer extends UiComponent<UiDocumentViewerConfig> implem
 	}
 
 	public setPageUrls(pageUrls: string[]) {
-		this.$pagesContainer[0].innerHTML = '';
+		this.$pagesContainer.innerHTML = '';
 		pageUrls.forEach((pageUrl) => {
 			const img = new Image();
 			let page: Page = {
-				$img: $(img),
+				$img: img,
 				naturalWidth: 0,
 				naturalHeight: 0
 			};
@@ -118,50 +117,50 @@ export class UiDocumentViewer extends UiComponent<UiDocumentViewerConfig> implem
 	}
 
 	private updateImageSizes() {
-		let viewPortWidth = this.$pagesContainerWrapper.width() - 2 * this._config.padding;
-		let viewPortHeight = this.$pagesContainerWrapper.height() - 2 * this._config.padding;
+		let viewPortWidth = $(this.$pagesContainerWrapper).width() - 2 * this._config.padding;
+		let viewPortHeight = $(this.$pagesContainerWrapper).height() - 2 * this._config.padding;
 		let viewPortAspectRatio = viewPortWidth / viewPortHeight;
 
 		this.pages.forEach((p) => {
 			let imageAspectRatio = p.naturalWidth / p.naturalHeight;
 			this.logger.trace("image: " + p.naturalWidth + "/" + p.naturalHeight + " = " + imageAspectRatio);
-			this.logger.trace("viewport: " + this.$pagesContainerWrapper.innerWidth() + "/" + this.$pagesContainer.innerHeight() + " = " + viewPortAspectRatio);
+			this.logger.trace("viewport: " + viewPortWidth + "/" + viewPortHeight + " = " + viewPortAspectRatio);
 			if (this.displayMode === UiPageDisplayMode.FIT_WIDTH) {
-				p.$img.css({
+				css(p.$img, {
 					width: Math.floor(viewPortWidth * this.zoomFactor) + "px",
 					height: "auto"
 				});
 			} else if (this.displayMode === UiPageDisplayMode.FIT_HEIGHT) {
-				p.$img.css({
+				css(p.$img, {
 					width: "auto",
 					height: Math.floor(viewPortHeight * this.zoomFactor) + "px"
 				});
 			} else if (this.displayMode === UiPageDisplayMode.FIT_SIZE) {
 				if (imageAspectRatio > viewPortAspectRatio) {
-					p.$img.css({
+					css(p.$img, {
 						width: Math.floor(viewPortWidth * this.zoomFactor) + "px",
 						height: "auto"
 					});
 				} else {
-					p.$img.css({
+					css(p.$img, {
 						width: "auto",
 						height: Math.floor(viewPortHeight * this.zoomFactor) + "px"
 					});
 				}
 			} else if (this.displayMode === UiPageDisplayMode.COVER) {
 				if (imageAspectRatio < viewPortAspectRatio) {
-					p.$img.css({
+					css(p.$img, {
 						width: Math.floor(viewPortWidth * this.zoomFactor) + "px",
 						height: "auto"
 					});
 				} else {
-					p.$img.css({
+					css(p.$img, {
 						width: "auto",
 						height: Math.floor(viewPortHeight * this.zoomFactor) + "px"
 					});
 				}
 			} else {
-				p.$img.css({
+				css(p.$img, {
 					width: (p.naturalWidth * this.zoomFactor) + "px",
 					height: "auto"
 				});
@@ -173,21 +172,17 @@ export class UiDocumentViewer extends UiComponent<UiDocumentViewerConfig> implem
 		this.updateImageSizes();
 	}
 
-	public getMainDomElement(): JQuery {
+	public doGetMainElement(): HTMLElement {
 		return this.$componentWrapper;
 	}
 
-	public destroy(): void {
-		// nothing to do
-	}
-
 	setPageBorder(pageBorder: UiBorderConfig): void {
 		this.pageBorder = pageBorder;
 		this.updateStyles();
 	}
 
 	setPaddding(padding: number): void {
-		this.$pagesContainer.css("padding", padding);
+		this.$pagesContainer.style.padding = padding + "px";
 	}
 
 	setPageSpacing(pageSpacing: number): void {
@@ -201,15 +196,15 @@ export class UiDocumentViewer extends UiComponent<UiDocumentViewerConfig> implem
 	}
 
 	private updateStyles() {
-		this.$styleTag[0].innerHTML = '';
-		this.$styleTag.text(`
+		this.$styleTag.innerHTML = '';
+		this.$styleTag.innerText = `
 		.${this.uuidClass} .page {
             ${createUiBorderCssString(this.pageBorder)}
             ${createUiShadowCssString(this.pageShadow)}
         }
         .${this.uuidClass} .page:not(:last-child) {
             margin-bottom: ${this.pageSpacing}px !important;
-        }`);
+        }`;
 	}
 }
 
diff --git a/teamapps-client/ts/modules/UiDummyComponent.ts b/teamapps-client/ts/modules/UiDummyComponent.ts
index 311e123d4..b8f104bfd 100644
--- a/teamapps-client/ts/modules/UiDummyComponent.ts
+++ b/teamapps-client/ts/modules/UiDummyComponent.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,42 +17,42 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-import * as $ from "jquery";
-import * as moment from "moment-timezone";
 
-import Moment = moment.Moment;
+import moment from "moment-timezone";
 import {TeamAppsEvent} from "./util/TeamAppsEvent";
 import {UiDummyComponent_ClickedEvent, UiDummyComponentCommandHandler, UiDummyComponentConfig, UiDummyComponentEventSource} from "../generated/UiDummyComponentConfig";
-import {UiComponent} from "./UiComponent";
+import {AbstractUiComponent} from "./AbstractUiComponent";
 import {TeamAppsUiContext} from "./TeamAppsUiContext";
-import {EventFactory} from "../generated/EventFactory";
 import {TeamAppsUiComponentRegistry} from "./TeamAppsUiComponentRegistry";
+import {parseHtml} from "./Common";
+import DateTimeFormatOptions = Intl.DateTimeFormatOptions;
 
-export class UiDummyComponent extends UiComponent<UiDummyComponentConfig> implements UiDummyComponentCommandHandler, UiDummyComponentEventSource {
+export class UiDummyComponent extends AbstractUiComponent<UiDummyComponentConfig> implements UiDummyComponentCommandHandler, UiDummyComponentEventSource {
 
-	public readonly onClicked: TeamAppsEvent<UiDummyComponent_ClickedEvent> = new TeamAppsEvent<UiDummyComponent_ClickedEvent>(this);
+	public readonly onClicked: TeamAppsEvent<UiDummyComponent_ClickedEvent> = new TeamAppsEvent<UiDummyComponent_ClickedEvent>();
 
 	private static allDummies: UiDummyComponent[] = [];
 
-	private $panel: JQuery;
-	private lastResize: Moment;
+	private $panel: HTMLElement;
+	private lastResize: Date;
 	private resizeCount: number = 0;
 	private destroyed: boolean = false;
 	private clickCount: number = 0;
 	private jsClickCount: number = 0;
-	private hasBeenAttachedToDom: boolean = false;
 	private commandCount: number = 0;
 	private text: string = "";
 
 	constructor(config: UiDummyComponentConfig, context: TeamAppsUiContext) {
 		super(config, context);
-		this.$panel = $('<div class="UiDummyComponent" id="' + config.id + '"></div>');
-		this.$panel.click(() => {
+		this.$panel = parseHtml('<div class="UiDummyComponent" id="' + config.id + '"></div>');
+		this.$panel.addEventListener("click", () => {
 			this.clickCount++;
-			this.onClicked.fire(EventFactory.createUiDummyComponent_ClickedEvent(this.getId(), this.clickCount));
+			this.onClicked.fire({
+				clickCount: this.clickCount
+			});
 			this.updateContent();
 		});
-		this.$panel[0].addEventListener('click', () => {
+		this.$panel.addEventListener('click', () => {
 			this.jsClickCount++;
 			this.updateContent();
 		});
@@ -62,11 +62,12 @@ export class UiDummyComponent extends UiComponent<UiDummyComponentConfig> implem
 	}
 
 
-	public getMainDomElement(): JQuery {
+	public doGetMainElement(): HTMLElement {
 		return this.$panel;
 	}
 
 	public destroy(): void {
+		super.destroy();
 		this.destroyed = true;
 		this.updateContent();
 	}
@@ -80,47 +81,21 @@ text: <span>${this.text}</span><br>
 clickCount: <span>${this.clickCount}</span><br>
 jsClickCount: <span>${this.jsClickCount}</span><br>
 commandCount: <span>${this.commandCount}</span><br>
-attached: <span class="${this.attachedToDom ? '' : 'text-danger blink text-bold'}">${this.attachedToDom}</span><br>
-hasBeenAttached: ${this.hasBeenAttachedToDom}<br>
 resizeCount: ${this.resizeCount}<br>
-lastResize: ${this.lastResize ? this.lastResize.format('HH:mm:ss.SSS') : '-'}<br>
+lastResize: ${this.lastResize ? this.lastResize.toLocaleString(undefined, {dateStyle: 'medium', timeStyle: 'medium'} as DateTimeFormatOptions) : '-'}<br>
 size: ${this.getWidth()} x ${this.getHeight()}<br> 
 destroyed: <span class="${this.destroyed ? 'text-danger blink text-bold' : ''}">${this.destroyed}</span><br>
-wasDetached: <span class="${this.wasDetached ? 'text-danger blink text-bold' : ''}">${this.wasDetached}</span>
 `;
 	}
 
-	get wasDetached() {
-		if (this.hasBeenAttachedToDom) {
-			return !($ as any)._data(this.$panel[0], "events") || !($ as any)._data(this.$panel[0], "events").click;
-		} else {
-			return false;
-		}
-	}
-
 	public onResize(): void {
-		this.lastResize = moment();
+		this.lastResize = new Date();
 		this.resizeCount++;
 		this.updateContent();
 	}
 
-	protected onAttachedToDom(): void {
-		this.hasBeenAttachedToDom = true;
-		this.updateContent();
-		document.body.addEventListener("DOMNodeRemoved", (e: Event) => {
-			let selfOrParent: Node = this.getMainDomElement()[0];
-			while (selfOrParent != null) {
-				if (selfOrParent === e.target) {
-					setTimeout(() => this.updateContent());
-					break;
-				}
-				selfOrParent = selfOrParent.parentNode;
-			}
-		});
-	}
-
 	private updateContent() {
-		this.$panel[0].innerHTML = this.generateText();
+		this.$panel.innerHTML = this.generateText();
 	}
 
 	setText(text: string): void {
diff --git a/teamapps-client/ts/modules/UiElegantPanel.ts b/teamapps-client/ts/modules/UiElegantPanel.ts
index cc7c381d1..4b7bec36b 100644
--- a/teamapps-client/ts/modules/UiElegantPanel.ts
+++ b/teamapps-client/ts/modules/UiElegantPanel.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,24 +17,26 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-import * as $ from "jquery";
-import {UiComponent} from "./UiComponent";
+
+import {AbstractUiComponent} from "./AbstractUiComponent";
 import {TeamAppsUiContext} from "./TeamAppsUiContext";
 import {UiComponentConfig} from "../generated/UiComponentConfig";
 import {UiElegantPanelCommandHandler, UiElegantPanelConfig} from "../generated/UiElegantPanelConfig";
 import {TeamAppsUiComponentRegistry} from "./TeamAppsUiComponentRegistry";
 import {createUiSpacingCssString} from "./util/CssFormatUtil";
 import {UiHorizontalElementAlignment} from "../generated/UiHorizontalElementAlignment";
+import {parseHtml} from "./Common";
+import {UiComponent} from "./UiComponent";
 
-export class UiElegantPanel extends UiComponent<UiElegantPanelConfig> implements UiElegantPanelCommandHandler {
+export class UiElegantPanel extends AbstractUiComponent<UiElegantPanelConfig> implements UiElegantPanelCommandHandler {
 
-	private $element: JQuery;
-	private $contentContainer: JQuery;
+	private $element: HTMLElement;
+	private $contentContainer: HTMLElement;
 	private contentComponent: UiComponent<UiComponentConfig>;
 
 	constructor(config: UiElegantPanelConfig, context: TeamAppsUiContext) {
 		super(config, context);
-		this.$element = $(`<div id="${config.id}" class="UiElegantPanel">
+		this.$element = parseHtml(`<div class="UiElegantPanel">
                 <div class="flex-container">
                     <div class="background-image-div teamapps-blurredBackgroundImage">
                         <div class="background-color-div">
@@ -44,42 +46,29 @@ export class UiElegantPanel extends UiComponent<UiElegantPanelConfig> implements
                 </div>
             </div>`);
 
-		let $backgroundColorDiv = this.$element.find('.background-color-div');
-		this.$contentContainer = this.$element.find('.content-container');
+		let $backgroundColorDiv = this.$element.querySelector<HTMLElement>(':scope .background-color-div');
+		this.$contentContainer = this.$element.querySelector<HTMLElement>(':scope .content-container');
 
 		if (config.bodyBackgroundColor) {
-			$backgroundColorDiv.css("background-color", config.bodyBackgroundColor);
+			$backgroundColorDiv.style.backgroundColor = config.bodyBackgroundColor;
 		}
 		if (config.content) {
-			this.setContent(config.content);
+			this.setContent(config.content as UiComponent);
 		}
 	}
 
-	public getMainDomElement(): JQuery {
+	public doGetMainElement(): HTMLElement {
 		return this.$element;
 	}
 
 	public setContent(content: UiComponent) {
-		this.$contentContainer[0].innerHTML = '';
+		this.$contentContainer.innerHTML = '';
 		this.contentComponent = content;
 		if (content) {
-			this.contentComponent.getMainDomElement().appendTo(this.$contentContainer);
-			this.contentComponent.attachedToDom = this.attachedToDom;
+			this.$contentContainer.appendChild(this.contentComponent.getMainElement());
 		}
 	}
 
-	protected onAttachedToDom() {
-		if (this.contentComponent) this.contentComponent.attachedToDom = true;
-		this.reLayout();
-	}
-
-	onResize(): void {
-		if (!this.attachedToDom || this.getMainDomElement()[0].offsetWidth <= 0) return;
-		this.contentComponent && this.contentComponent.reLayout();
-	}
-
-	public destroy(): void {
-	}
 }
 
 TeamAppsUiComponentRegistry.registerComponentClass("UiElegantPanel", UiElegantPanel);
diff --git a/teamapps-client/ts/modules/UiFlexContainer.ts b/teamapps-client/ts/modules/UiFlexContainer.ts
index 107064193..02066e995 100644
--- a/teamapps-client/ts/modules/UiFlexContainer.ts
+++ b/teamapps-client/ts/modules/UiFlexContainer.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,8 +17,8 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-import * as $ from "jquery";
-import {UiComponent} from "./UiComponent";
+
+import {AbstractUiComponent} from "./AbstractUiComponent";
 import {TeamAppsUiContext} from "./TeamAppsUiContext";
 import {TeamAppsUiComponentRegistry} from "./TeamAppsUiComponentRegistry";
 import {parseHtml} from "./Common";
@@ -26,8 +26,9 @@ import {UiFlexContainerCommandHandler, UiFlexContainerConfig} from "../generated
 import {UiCssFlexDirection} from "../generated/UiCssFlexDirection";
 import {UiCssAlignItems} from "../generated/UiCssAlignItems";
 import {UiCssJustifyContent} from "../generated/UiCssJustifyContent";
+import {UiComponent} from "./UiComponent";
 
-export class UiFlexContainer extends UiComponent<UiFlexContainerConfig> implements UiFlexContainerCommandHandler {
+export class UiFlexContainer extends AbstractUiComponent<UiFlexContainerConfig> implements UiFlexContainerCommandHandler {
 
 	private $main: HTMLDivElement;
 	private components: UiComponent[] = [];
@@ -35,36 +36,29 @@ export class UiFlexContainer extends UiComponent<UiFlexContainerConfig> implemen
 	constructor(config: UiFlexContainerConfig, context: TeamAppsUiContext) {
 		super(config, context);
 		this.$main = parseHtml(`<div class="UiFlexContainer"></div>`);
-		this.$main.style.flexDirection = this.convertToCssValueString(UiCssFlexDirection[config.flexDirection]);
-		this.$main.style.alignItems = this.convertToCssValueString(UiCssAlignItems[config.alignItems]);
-		this.$main.style.justifyContent = this.convertToCssValueString(UiCssJustifyContent[config.justifyContent]);
-
-		config.components.forEach(c =>this.addComponent(c));
-	}
-
-	private convertToCssValueString(enumValueName: string) {
-		return enumValueName.toLowerCase().replace("_", "-");
-	}
-
-	protected onAttachedToDom(): void {
-		this.components.forEach(c => c.attachedToDom = true);
-	}
+		this.$main.style.flexDirection = config.flexDirection;
+		this.$main.style.alignItems = config.alignItems;
+		this.$main.style.justifyContent = config.justifyContent;
+		this.$main.style.gap = config.gap;
 
-	onResize(): void {
-		this.components.forEach(c => c.reLayout());
+		config.components.forEach(c => this.addComponent(c as UiComponent));
 	}
 
-	getMainDomElement(): JQuery {
-		return $(this.$main);
+	doGetMainElement(): HTMLElement {
+		return this.$main;
 	}
 
 	addComponent(component: UiComponent): void {
 		this.components.push(component);
-		this.$main.appendChild(component.getMainDomElement()[0]);
+		this.$main.appendChild(component.getMainElement());
 	}
 
 	removeComponent(component: UiComponent): void {
-		this.$main.removeChild(component.getMainDomElement()[0]);
+		try {
+			this.$main.removeChild(component.getMainElement());
+		} catch (e) {
+			// ignore if this is actually not a child...
+		}
 		this.components = this.components.filter(c => c !== component);
 	}
 
diff --git a/teamapps-client/ts/modules/UiFloatingComponent.ts b/teamapps-client/ts/modules/UiFloatingComponent.ts
new file mode 100644
index 000000000..b0ede2500
--- /dev/null
+++ b/teamapps-client/ts/modules/UiFloatingComponent.ts
@@ -0,0 +1,189 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+
+import {AbstractUiComponent} from "./AbstractUiComponent";
+import {TeamAppsUiContext} from "./TeamAppsUiContext";
+import {UiFloatingComponent_ExpandedOrCollapsedEvent, UiFloatingComponentCommandHandler, UiFloatingComponentConfig, UiFloatingComponentEventSource} from "../generated/UiFloatingComponentConfig";
+import {UiComponent} from "./UiComponent";
+import ResizeObserver from 'resize-observer-polyfill';
+import {parseHtml, prependChild, removeClassesByFunction} from "./Common";
+import {TeamAppsUiComponentRegistry} from "./TeamAppsUiComponentRegistry";
+import {UiFloatingComponentPosition} from "../generated/UiFloatingComponentPosition";
+import {TeamAppsEvent} from "./util/TeamAppsEvent";
+
+export class UiFloatingComponent extends AbstractUiComponent<UiFloatingComponentConfig> implements UiFloatingComponentCommandHandler, UiFloatingComponentEventSource {
+
+	public readonly onExpandedOrCollapsed: TeamAppsEvent<UiFloatingComponent_ExpandedOrCollapsedEvent> = new TeamAppsEvent();
+
+	private containerComponent: UiComponent;
+	private contentComponent: UiComponent;
+	private $main: HTMLElement;
+
+	private $expanderHandle: HTMLElement;
+
+	constructor(config: UiFloatingComponentConfig, context: TeamAppsUiContext) {
+		super(config, context);
+		this.containerComponent = config.containerComponent as UiComponent;
+
+		this.$main = parseHtml(`<div class="UiFloatingComponent"></div>`);
+
+		this.setContentComponent(config.contentComponent);
+		this.$expanderHandle = parseHtml(`<div class="expander-handle"></div>`);
+		this.$expanderHandle.addEventListener("click", evt => {
+			this.setExpanded(!this._config.expanded);
+			this.onExpandedOrCollapsed.fire({expanded: this._config.expanded});
+		});
+		this.$main.appendChild(this.$expanderHandle);
+
+		prependChild(this.containerComponent.getMainElement(), this.getMainElement());
+
+		this.setBackgroundColor(config.backgroundColor);
+		this.setExpanderHandleColor(config.expanderHandleColor);
+
+		const resizeObserver = new ResizeObserver(entries => {
+			for (let entry of entries) {
+				this.updateFloatingPosition();
+			}
+		});
+		resizeObserver.observe(this.containerComponent.getMainElement());
+		resizeObserver.observe(this.contentComponent.getMainElement());
+
+		this.$main.addEventListener("click", ev => ev.stopPropagation());
+		this.$main.addEventListener("pointerdown", ev => ev.stopPropagation());
+		this.$main.addEventListener("mousedown", ev => ev.stopPropagation());
+		this.$main.addEventListener("mouseclick", ev => ev.stopPropagation());
+		this.$main.addEventListener("dblclick", ev => ev.stopPropagation());
+		this.$main.addEventListener("scroll", ev => ev.stopPropagation());
+		this.$main.addEventListener("wheel", ev => ev.stopPropagation());
+		this.$main.addEventListener("keydown", ev => ev.stopPropagation());
+		this.$main.addEventListener("keyup", ev => ev.stopPropagation());
+		this.$main.addEventListener("keypress", ev => ev.stopPropagation());
+
+		this.updateFloatingPosition();
+	}
+
+	private updateFloatingPosition() {
+		removeClassesByFunction(this.$expanderHandle.classList, className => className.startsWith("position-"));
+		this.$expanderHandle.classList.add("position-" + this._config.position);
+
+		let containerWidth = this.containerComponent.getMainElement().offsetWidth;
+		let containerHeight = this.containerComponent.getMainElement().offsetHeight;
+
+		// width
+		if (this._config.width === -1) {
+			this.getMainElement().style.width = null;
+			this.getMainElement().style.maxWidth = (containerWidth - 2 * this._config.marginX) + "px";
+		} else if (this._config.width === 0) {
+			this.getMainElement().style.width = (containerWidth - 2 * this._config.marginX) + "px";
+			this.getMainElement().style.maxWidth = null;
+		} else {
+			this.getMainElement().style.width = this._config.width + "px";
+			this.getMainElement().style.maxWidth = null;
+		}
+
+		let contentWidth = this.contentComponent.getMainElement().offsetWidth;
+		let contentHeight = this.contentComponent.getMainElement().offsetHeight;
+
+		// position X
+		if (this._config.expanded) {
+			if (this._config.position === UiFloatingComponentPosition.TOP_LEFT || this._config.position === UiFloatingComponentPosition.BOTTOM_LEFT) {
+				this.getMainElement().style.left = this._config.marginX + "px";
+				this.getMainElement().style.right = null;
+			} else if (this._config.position === UiFloatingComponentPosition.TOP_RIGHT || this._config.position === UiFloatingComponentPosition.BOTTOM_RIGHT) {
+				this.getMainElement().style.left = null;
+				this.getMainElement().style.right = this._config.marginX + "px";
+			}
+		} else {
+			if (this._config.position === UiFloatingComponentPosition.TOP_LEFT || this._config.position === UiFloatingComponentPosition.BOTTOM_LEFT) {
+				this.getMainElement().style.left = `-${contentWidth}px`;
+				this.getMainElement().style.right = null;
+			} else if (this._config.position === UiFloatingComponentPosition.TOP_RIGHT || this._config.position === UiFloatingComponentPosition.BOTTOM_RIGHT) {
+				this.getMainElement().style.left = null;
+				this.getMainElement().style.right = `-${contentWidth}px`;
+			}
+		}
+
+		// position Y
+		if (this._config.position === UiFloatingComponentPosition.TOP_LEFT || this._config.position === UiFloatingComponentPosition.TOP_RIGHT) {
+			this.getMainElement().style.top = this._config.marginY + "px";
+			this.getMainElement().style.bottom = null;
+		} else if (this._config.position === UiFloatingComponentPosition.BOTTOM_LEFT || this._config.position === UiFloatingComponentPosition.BOTTOM_RIGHT) {
+			this.getMainElement().style.top = null;
+			this.getMainElement().style.bottom = this._config.marginY + "px";
+		}
+		// height
+		if (this._config.height === -1) {
+			this.getMainElement().style.height = null;
+			this.getMainElement().style.maxHeight = (containerHeight - 2 * this._config.marginY) + "px";
+		} else if (this._config.height === 0) {
+			this.getMainElement().style.height = (containerHeight - 2 * this._config.marginY) + "px";
+			this.getMainElement().style.maxHeight = null;
+		} else {
+			this.getMainElement().style.height = this._config.height + "px";
+			this.getMainElement().style.maxHeight = (containerHeight - 2 * this._config.marginY) + "px";
+		}
+	}
+
+
+	doGetMainElement(): HTMLElement {
+		return this.$main;
+	}
+
+	public setContentComponent(contentComponent: unknown) {
+		this.$main.innerHTML = '';
+		this.contentComponent = contentComponent as UiComponent;
+		if (contentComponent != null) {
+			this.$main.appendChild(this.contentComponent.getMainElement());
+		}
+	}
+
+	setExpanded(expanded: boolean): void {
+		this._config.expanded = expanded;
+		this.$main.classList.toggle("expanded", expanded);
+		this.updateFloatingPosition();
+	}
+
+	setPosition(position: UiFloatingComponentPosition): void {
+		this._config.position = position;
+		this.updateFloatingPosition();
+	}
+
+	setDimensions(width: number, height: number): void {
+		this._config.width = width;
+		this._config.height = height;
+		this.updateFloatingPosition();
+	}
+
+	setMargins(marginX: number, marginY: number): void {
+		this._config.marginX = marginX;
+		this._config.marginY = marginY;
+		this.updateFloatingPosition();
+	}
+
+	setBackgroundColor(backgroundColor: string) {
+		this.getMainElement().style.backgroundColor = backgroundColor;
+	}
+
+	setExpanderHandleColor(expanderHandleColor: string) {
+		this.$expanderHandle.style.backgroundColor = expanderHandleColor;
+	}
+}
+
+TeamAppsUiComponentRegistry.registerComponentClass("UiFloatingComponent", UiFloatingComponent);
diff --git a/teamapps-client/ts/modules/UiGauge.ts b/teamapps-client/ts/modules/UiGauge.ts
index 1115b3038..15594dc1b 100644
--- a/teamapps-client/ts/modules/UiGauge.ts
+++ b/teamapps-client/ts/modules/UiGauge.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,33 +17,34 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-import * as $ from "jquery";
+
 import {UiGaugeCommandHandler, UiGaugeConfig} from "../generated/UiGaugeConfig";
 import {UiGaugeOptionsConfig} from "../generated/UiGaugeOptionsConfig";
-import {UiComponent} from "./UiComponent";
+import {AbstractUiComponent} from "./AbstractUiComponent";
 import {TeamAppsUiContext} from "./TeamAppsUiContext";
-import {executeWhenAttached} from "./util/ExecuteWhenAttached";
+import {executeWhenFirstDisplayed} from "./util/ExecuteWhenFirstDisplayed";
 import {TeamAppsUiComponentRegistry} from "./TeamAppsUiComponentRegistry";
 import {LinearGauge, RadialGauge} from "canvas-gauges";
 import {debouncedMethod, DebounceMode} from "./util/debounce";
+import {parseHtml} from "./Common";
 
-export class UiGauge extends UiComponent<UiGaugeConfig> implements UiGaugeCommandHandler {
-	private $main: JQuery;
+export class UiGauge extends AbstractUiComponent<UiGaugeConfig> implements UiGaugeCommandHandler {
+	private $main: HTMLElement;
 	private gauge: LinearGauge;
 	private value: number;
 
 	constructor(config: UiGaugeConfig, context: TeamAppsUiContext) {
 		super(config, context);
-		this.$main = $(`<div class="UiGauge" data-teamapps-id="${this.getId()}"><canvas></canvas></div>`);
+		this.$main = parseHtml(`<div class="UiGauge" data-teamapps-id="${this.getId()}"><canvas></canvas></div>`);
 		this.value = config.options.value;
 		this.createGauge();
 	}
 
-	@executeWhenAttached()
+	@executeWhenFirstDisplayed()
 	private createGauge() {
 		if (this.getWidth() > 0 && this.getHeight() > 0) {
 			let options = this.createOptions(this._config.options);
-			options.renderTo = this.$main.find("canvas")[0];
+			options.renderTo = this.$main.querySelector<HTMLElement>(":scope canvas");
 			if (this._config.options.linearGauge) {
 				this.gauge = new LinearGauge(options);
 			} else {
@@ -53,10 +54,7 @@ export class UiGauge extends UiComponent<UiGaugeConfig> implements UiGaugeComman
 		}
 	}
 
-	destroy(): void {
-	}
-
-	getMainDomElement(): JQuery {
+	doGetMainElement(): HTMLElement {
 		return this.$main;
 	}
 
diff --git a/teamapps-client/ts/modules/UiGridForm.ts b/teamapps-client/ts/modules/UiGridForm.ts
index f9f89f807..8d656c93a 100644
--- a/teamapps-client/ts/modules/UiGridForm.ts
+++ b/teamapps-client/ts/modules/UiGridForm.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,72 +17,85 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-import * as $ from "jquery";
-import {UiGridForm_SectionCollapsedStateChangedEvent, UiGridFormCommandHandler, UiGridFormConfig, UiGridFormEventSource} from "../generated/UiGridFormConfig";
+
+import {
+	UiGridForm_SectionCollapsedStateChangedEvent,
+	UiGridFormCommandHandler,
+	UiGridFormConfig,
+	UiGridFormEventSource
+} from "../generated/UiGridFormConfig";
 import {UiFormLayoutPolicyConfig} from "../generated/UiFormLayoutPolicyConfig";
-import {UiField} from "./formfield/UiField";
 import {UiFormSectionConfig} from "../generated/UiFormSectionConfig";
-import {UiComponent} from "./UiComponent";
+import {AbstractUiComponent} from "./AbstractUiComponent";
 import {TeamAppsUiContext} from "./TeamAppsUiContext";
-import {executeWhenAttached} from "./util/ExecuteWhenAttached";
+import {executeWhenFirstDisplayed} from "./util/ExecuteWhenFirstDisplayed";
 import {
 	createCssGridRowOrColumnString,
 	createUiBorderCssString,
-	createUiColorCssString,
 	createUiShadowCssString,
 	createUiSpacingCssString,
 	cssHorizontalAlignmentByUiVerticalAlignment,
 	cssVerticalAlignmentByUiVerticalAlignment
 } from "./util/CssFormatUtil";
 import {TeamAppsEvent} from "./util/TeamAppsEvent";
-import {EventFactory} from "../generated/EventFactory";
 import {TeamAppsUiComponentRegistry} from "./TeamAppsUiComponentRegistry";
 import * as log from "loglevel";
 import {UiFormSectionFieldPlacementConfig} from "../generated/UiFormSectionFieldPlacementConfig";
 import {UiFormSectionPlacementConfig} from "../generated/UiFormSectionPlacementConfig";
 import {UiFormSectionFloatingFieldsPlacementConfig} from "../generated/UiFormSectionFloatingFieldsPlacementConfig";
-import {generateUUID} from "./Common";
+import {generateUUID, parseHtml} from "./Common";
 import {bind} from "./util/Bind";
+import {UiComponent} from "./UiComponent";
+import {UiField} from "./formfield/UiField";
 
-export class UiGridForm extends UiComponent<UiGridFormConfig> implements UiGridFormCommandHandler, UiGridFormEventSource {
+export class UiGridForm extends AbstractUiComponent<UiGridFormConfig> implements UiGridFormCommandHandler, UiGridFormEventSource {
 
-	public readonly onSectionCollapsedStateChanged: TeamAppsEvent<UiGridForm_SectionCollapsedStateChangedEvent> = new TeamAppsEvent<UiGridForm_SectionCollapsedStateChangedEvent>(this);
+	public readonly onSectionCollapsedStateChanged: TeamAppsEvent<UiGridForm_SectionCollapsedStateChangedEvent> = new TeamAppsEvent<UiGridForm_SectionCollapsedStateChangedEvent>();
 
-	private $mainDiv: any;
+	private $mainDiv: HTMLElement;
 
 	private sections: UiFormSection[];
 
 	private layoutPoliciesFromLargeToSmall: UiFormLayoutPolicyConfig[];
 	private activeLayoutPolicyIndex: number;
-	private uiFields: UiField[] = [];
+	private uiFields: UiComponent[] = [];
 	private fillRemainingHeightCheckerInterval: number;
 	private sectionCollapseOverrides: { [sectionId: string]: boolean };
 
+	private fieldWrappers = new Map<UiComponent, HTMLDivElement>();
+
 	constructor(config: UiGridFormConfig, context: TeamAppsUiContext) {
 		super(config, context);
-		this.$mainDiv = $(`<div class="UiGridForm" data-teamapps-id="${config.id}">
+		this.$mainDiv = parseHtml(`<div class="UiGridForm">
 </div>`);
 
-		config.fields.forEach(fieldConfig => this.addField(fieldConfig));
+		config.fields.forEach(f => this.addField(f as UiComponent));
 		this.updateLayoutPolicies(config.layoutPolicies);
+
+		this.displayedDeferredExecutor.invokeWhenReady(() => {
+			if (this.fillRemainingHeightCheckerInterval == null) {
+				this.fillRemainingHeightCheckerInterval = window.setInterval(() => {
+					this.ensureFillRemainingHeight();
+				}, 30000); // chose high delay here, since it makes the scrollbar appear for a few seconds on macos
+			}
+		})
 	}
 
-	private addField(uiField: UiField) {
+	private addField(uiField: UiComponent) {
 		this.uiFields.push(uiField);
 	}
 
-	public getMainDomElement(): JQuery {
+	public doGetMainElement(): HTMLElement {
 		return this.$mainDiv;
 	}
 
-	@executeWhenAttached(true)
+	@executeWhenFirstDisplayed(true)
 	public onResize(): void {
 		const newLayoutPolicyIndex = this.determineLayoutPolicyIndexToApply();
 		if (newLayoutPolicyIndex !== this.activeLayoutPolicyIndex) {
 			this.activeLayoutPolicyIndex = newLayoutPolicyIndex;
 			this.applyLayoutPolicy(this.layoutPoliciesFromLargeToSmall[newLayoutPolicyIndex]);
 		}
-		this.uiFields.forEach(field => field.reLayout());
 		this.ensureFillRemainingHeight();
 	}
 
@@ -96,19 +109,27 @@ export class UiGridForm extends UiComponent<UiGridFormConfig> implements UiGridF
 		return policyIndex;
 	}
 
-	@executeWhenAttached(true)
+	@executeWhenFirstDisplayed(true)
 	private applyLayoutPolicy(layoutPolicy: UiFormLayoutPolicyConfig) {
-		this.uiFields.forEach(uiField => uiField.getMainDomElement().detach());
+		this.uiFields.forEach(uiField => {
+			let fieldWrapper = this.fieldWrappers.get(uiField);
+			if (fieldWrapper != null) {
+				fieldWrapper.remove();
+			}
+		});
 		this.sections && this.sections.forEach(section => {
 			section.destroy();
-			section.getMainDomElement().detach();
+			section.getMainDomElement().remove();
 		});
 		this.sections = layoutPolicy.sections.map(sectionConfig => {
-			const section = new UiFormSection(sectionConfig, this._context, this.sectionCollapseOverrides[sectionConfig.id]);
-			section.getMainDomElement().appendTo(this.$mainDiv);
+			const section = new UiFormSection(sectionConfig, this._context, this.sectionCollapseOverrides[sectionConfig.id], field => this.getFieldWrapper(field));
+			this.$mainDiv.appendChild(section.getMainDomElement());
 			section.placeFields();
 			section.onCollapsedStateChanged.addListener((collapsed) => {
-				this.onSectionCollapsedStateChanged.fire(EventFactory.createUiGridForm_SectionCollapsedStateChangedEvent(this.getId(), sectionConfig.id, collapsed));
+				this.onSectionCollapsedStateChanged.fire({
+					sectionId: sectionConfig.id,
+					collapsed: collapsed
+				});
 				this.sectionCollapseOverrides[sectionConfig.id] = collapsed;
 			});
 			return section;
@@ -120,7 +141,7 @@ export class UiGridForm extends UiComponent<UiGridFormConfig> implements UiGridF
 		this.sections.filter(s => s.config.id === sectionId).forEach(s => s.setCollapsed(collapsed));
 	}
 
-	@executeWhenAttached(true)
+	@executeWhenFirstDisplayed(true)
 	public updateLayoutPolicies(layoutPolicies: UiFormLayoutPolicyConfig[]): void {
 		this.sectionCollapseOverrides = {};
 		this.layoutPoliciesFromLargeToSmall = layoutPolicies.sort((a, b) => b.minWidth - a.minWidth);
@@ -129,17 +150,9 @@ export class UiGridForm extends UiComponent<UiGridFormConfig> implements UiGridF
 		this.applyLayoutPolicy(layoutPolicyToApply);
 	}
 
-	protected onAttachedToDom(): void {
-		if (this.fillRemainingHeightCheckerInterval == null) {
-			this.fillRemainingHeightCheckerInterval = window.setInterval(() => {
-				this.ensureFillRemainingHeight();
-			}, 30000); // chose high delay here, since it makes the scrollbar appear for a few seconds on macos
-		}
-	}
-
 	// This hack is needed because css grid does not fill the whole height of a section when as it grows (flex). This is because the height of the (flex) section is dynamic, and not a static value.
 	private ensureFillRemainingHeight() {
-		let scrollContainer = this.$mainDiv[0];
+		let scrollContainer = this.$mainDiv;
 		while (scrollContainer.scrollTop === 0 && scrollContainer.parentElement != null) {
 			scrollContainer = scrollContainer.parentElement;
 		}
@@ -149,35 +162,47 @@ export class UiGridForm extends UiComponent<UiGridFormConfig> implements UiGridF
 	}
 
 	public destroy(): void {
+		super.destroy();
 		window.clearInterval(this.fillRemainingHeightCheckerInterval);
 	}
 
-	addOrReplaceField(field: UiField): void {
+	addOrReplaceField(field: UiComponent): void {
 		this.addField(field);
 		this.applyLayoutPolicy(this.layoutPoliciesFromLargeToSmall[this.determineLayoutPolicyIndexToApply()]);
 	}
 
+
+	private getFieldWrapper(field: UiComponent): HTMLDivElement {
+		let wrapper = this.fieldWrappers.get(field);
+		if (wrapper == null) {
+			wrapper = document.createElement("div");
+			wrapper.classList.add("field-wrapper");
+			this.fieldWrappers.set(field, wrapper);
+		}
+		return wrapper;
+	}
+
 }
 
 class UiFormSection {
 
 	private static readonly LOGGER = log.getLogger("UiFormSection");
-	public readonly onCollapsedStateChanged: TeamAppsEvent<boolean> = new TeamAppsEvent<boolean>(this);
+	public readonly onCollapsedStateChanged: TeamAppsEvent<boolean> = new TeamAppsEvent<boolean>();
 
-	private uiFields: UiField[] = [];
+	private uiFields: UiComponent[] = [];
 
 	private uuid: string;
-	private $div: JQuery;
-	private $placementStyles: JQuery;
-	private $header: JQuery;
-	private $headerTemplateContainer: JQuery;
-	private $body: JQuery;
-	private $expander: JQuery;
+	private $div: HTMLElement;
+	private $placementStyles: HTMLElement;
+	private $header: HTMLElement;
+	private $headerTemplateContainer: HTMLElement;
+	private $body: HTMLElement;
+	private $expander: HTMLElement;
 	private collapsed: boolean;
 
-	constructor(public config: UiFormSectionConfig, context: TeamAppsUiContext, collapsedOverride: boolean) {
+	constructor(public config: UiFormSectionConfig, context: TeamAppsUiContext, collapsedOverride: boolean, private getFieldWrapper : (field: UiComponent) => HTMLDivElement) {
 		this.uuid = generateUUID();
-		
+
 		const headerLineClass = config.drawHeaderLine ? 'draw-header-line' : '';
 		const hasHeaderTemplateClass = config.headerTemplate ? 'has-header-template' : '';
 		const hasHeaderDataClass = config.headerData ? 'has-header-data' : '';
@@ -190,42 +215,41 @@ class UiFormSection {
 		const paddingCss = createUiSpacingCssString("padding", config.padding);
 		const borderCss = createUiBorderCssString(config.border);
 		const shadowCss = createUiShadowCssString(config.shadow);
-		const backgroundColorCss = config.backgroundColor ? `background-color:${createUiColorCssString(config.backgroundColor)};` : '';
+		const backgroundColorCss = config.backgroundColor ? `background-color:${(config.backgroundColor ?? '')};` : '';
 
 		const gridTemplateColumnsCss = 'grid-template-columns:' + config.columns.map(column => createCssGridRowOrColumnString(column.widthPolicy)).join(" ") + ';';
 		const gridTemplateRowsCss = 'grid-template-rows:' + config.rows.map(row => createCssGridRowOrColumnString(row.heightPolicy)).join(" ") + ';';
 		const gridGapCss = 'grid-gap:' + config.gridGap + 'px;';
 
 
-		this.$div = $(`<div data-id="${config.id}" data-section-uuid="${this.uuid}" class="UiFormSection ${headerLineClass} ${hasHeaderTemplateClass} ${hasHeaderDataClass} ${collapsibleClass} ${hiddenClass} ${fillRemainingHeightClass}" style="${marginCss}${borderCss}${shadowCss}${backgroundColorCss}">
+		this.$div = parseHtml(`<div data-id="${config.id}" data-section-uuid="${this.uuid}" class="UiFormSection ${headerLineClass} ${hasHeaderTemplateClass} ${hasHeaderDataClass} ${collapsibleClass} ${hiddenClass} ${fillRemainingHeightClass}" style="${marginCss}${borderCss}${shadowCss}${backgroundColorCss}">
 	<style></style>
     <div class="header">
         <div class="expand-button">
-            <div class="teamapps-expander ${this.collapsed ? '' : 'expanded'} ${config.collapsible ? '' : 'hidden'}"/>
-            <div class="header-template-container">
-            </div>
+            <div class="teamapps-expander ${this.collapsed ? '' : 'expanded'} ${config.collapsible ? '' : 'hidden'}"></div>
+            <div class="header-template-container"></div>
         </div>
-        <div class="header-line"/>
+        <div class="header-line"></div>
     </div>
     <div class="body" style="${paddingCss} ${gridTemplateColumnsCss} ${gridTemplateRowsCss} ${gridGapCss}">
 
 	</div>
 </div>`);
-		this.$placementStyles = this.$div.find("style");
-		this.$header = this.$div.find("> .header");
-		this.$headerTemplateContainer = this.$header.find(".header-template-container");
+		this.$placementStyles = this.$div.querySelector<HTMLElement>(":scope style");
+		this.$header = this.$div.querySelector<HTMLElement>(":scope > .header");
+		this.$headerTemplateContainer = this.$header.querySelector<HTMLElement>(":scope .header-template-container");
 		if (config.headerTemplate && config.headerData) {
-			$(context.templateRegistry.createTemplateRenderer(config.headerTemplate).render(config.headerData)).appendTo(this.$headerTemplateContainer);
+			this.$headerTemplateContainer.appendChild(parseHtml(context.templateRegistry.createTemplateRenderer(config.headerTemplate).render(config.headerData)));
 		}
 
-		this.$expander = this.$div.find(".teamapps-expander");
-		this.$div.find('.expand-button').click(() => {
+		this.$expander = this.$div.querySelector<HTMLElement>(":scope .teamapps-expander");
+		this.$div.querySelector<HTMLElement>(':scope .expand-button').addEventListener('click', () => {
 			if (config.collapsible) {
 				this.setCollapsed(!this.collapsed);
 			}
 		});
 
-		this.$body = this.$div.find(".body");
+		this.$body = this.$div.querySelector<HTMLElement>(":scope .body");
 
 		this.setCollapsed(collapsedOverride != null ? collapsedOverride : (config.collapsible && config.collapsed), false);
 	}
@@ -247,7 +271,7 @@ class UiFormSection {
 		this.config.fieldPlacements.forEach(placement => {
 			const placementId = generateUUID(true);
 			if (this.isUiFormSectionFieldPlacement(placement)) {
-				const uiField = placement.field;
+				const uiField = placement.field as UiComponent;
 				uiField.onVisibilityChanged.addListener(this.updateGroupVisibility);
 				this.uiFields.push(uiField);
 				allCssRules[placementId] = {
@@ -255,18 +279,18 @@ class UiFormSection {
 					"min-height": placement.minHeight ? `${placement.minHeight}px` : '',
 					"max-height": placement.maxHeight ? `${placement.maxHeight}px` : ''
 				};
-				uiField.getMainDomElement()
-					.attr("data-placement-id", placementId)
-					.appendTo(this.$body);
-				uiField.attachedToDom = true;
+				let fieldWrapper = this.getFieldWrapper(uiField);
+				fieldWrapper.appendChild(uiField.getMainElement());
+				fieldWrapper.setAttribute("data-placement-id", placementId);
+				this.$body.appendChild(fieldWrapper);
 			} else if (this.isUiFormSectionFloatingFieldsPlacement(placement)) {
-				let $container = $(`<div class="UiFormSectionFloatingFieldsPlacement" data-placement-id="${placementId}"></div>`);
+				let $container = parseHtml(`<div class="UiFormSectionFloatingFieldsPlacement" data-placement-id="${placementId}"></div>`);
 				allCssRules[placementId] = {
 					...createSectionPlacementStyles(placement),
 					"flex-wrap": placement.wrap ? "wrap" : "nowrap"
 				};
 				placement.floatingFields.forEach(floatingField => {
-					const uiField = floatingField.field;
+					const uiField = floatingField.field as UiComponent;
 					uiField.onVisibilityChanged.addListener(this.updateGroupVisibility);
 					this.uiFields.push(uiField);
 					const floatingFieldPlacementId = generateUUID(true);
@@ -277,23 +301,24 @@ class UiFormSection {
 						"max-height": floatingField.maxHeight ? `${floatingField.maxHeight}px` : '',
 						"margin": `${placement.verticalSpacing / 2}px ${placement.horizontalSpacing / 2}px`
 					};
-					uiField.getMainDomElement()
-						.attr("data-placement-id", floatingFieldPlacementId)
-						.appendTo($container);
-					uiField.attachedToDom = true
+
+					let fieldWrapper = this.getFieldWrapper(uiField);
+					fieldWrapper.appendChild(uiField.getMainElement());
+					fieldWrapper.setAttribute("data-placement-id", floatingFieldPlacementId);
+					$container.appendChild(fieldWrapper);
 				});
-				$container.appendTo(this.$body);
+				this.$body.appendChild($container);
 			}
 		});
 
-		this.$placementStyles.text(this.createPlacementStylesCssString(allCssRules));
+		this.$placementStyles.textContent = this.createPlacementStylesCssString(allCssRules);
 		this.updateGroupVisibility();
 	}
 
 	@bind
 	private updateGroupVisibility() {
 		let hasVisibleFields = this.uiFields.filter(uiField => uiField.isVisible()).length > 0;
-		this.$div.toggleClass("hidden", !hasVisibleFields && this.config.hideWhenNoVisibleFields);
+		this.$div.classList.toggle("hidden", !hasVisibleFields && this.config.hideWhenNoVisibleFields);
 	}
 
 	public destroy() {
@@ -318,32 +343,30 @@ class UiFormSection {
 		return placement._type === "UiFormSectionFloatingFieldsPlacement";
 	}
 
-	public getMainDomElement(): JQuery {
+	public getMainDomElement(): HTMLElement {
 		return this.$div;
 	}
 
 	updateBodyHeightToFillRemainingHeight() {
-		this.$body[0].style.position = "absolute";
-		this.$body[0].style.minHeight = (this.$div.innerHeight() - this.$header[0].offsetHeight) + "px";
-		this.$body[0].style.position = "";
+		this.$body.style.position = "absolute";
+		this.$body.style.minHeight = (this.$div.offsetHeight - this.$header.offsetHeight) + "px";
+		this.$body.style.position = "";
 	}
 
 	setCollapsed(collapsed: boolean, animate = true): void {
 		this.collapsed = collapsed;
 		this.onCollapsedStateChanged.fire(this.collapsed);
-		this.$expander.toggleClass("expanded", !this.collapsed);
-		this.$div.toggleClass("collapsed", this.collapsed);
+		this.$expander.classList.toggle("expanded", !this.collapsed);
+		this.$div.classList.toggle("collapsed", this.collapsed);
 		if (animate) {
 			if (!this.collapsed) {
-				this.$body.slideDown(200);
+				this.$body.classList.remove('hidden');
+				$(this.$body).slideDown(200);
 			} else {
-				this.$body.slideUp(200);
+				$(this.$body).slideUp(200);
 			}
 		} else {
-			this.$body.toggle(!collapsed);
-		}
-		if (!collapsed) {
-			this.uiFields.forEach(field => field.reLayout())
+			this.$body.classList.toggle('hidden', collapsed);
 		}
 	}
 }
diff --git a/teamapps-client/ts/modules/UiHtmlView.ts b/teamapps-client/ts/modules/UiHtmlView.ts
new file mode 100644
index 000000000..197b7f4b7
--- /dev/null
+++ b/teamapps-client/ts/modules/UiHtmlView.ts
@@ -0,0 +1,83 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+import {AbstractUiComponent} from "./AbstractUiComponent";
+import {TeamAppsUiContext} from "./TeamAppsUiContext";
+import {UiHtmlViewCommandHandler, UiHtmlViewConfig} from "../generated/UiHtmlViewConfig";
+import {parseHtml} from "./Common";
+import {TeamAppsUiComponentRegistry} from "./TeamAppsUiComponentRegistry";
+import {UiComponent} from "./UiComponent";
+
+export class UiHtmlView extends AbstractUiComponent<UiHtmlViewConfig> implements UiHtmlViewCommandHandler {
+
+	private $main: HTMLDivElement;
+
+	constructor(config: UiHtmlViewConfig, context: TeamAppsUiContext) {
+		super(config, context);
+		this.$main = parseHtml(`<div class="UiHtmlView">${config.html}</div>`);
+		for (let selector in config.componentsByContainerElementSelector) {
+			let components = config.componentsByContainerElementSelector[selector] as UiComponent[];
+			for (let c of components) {
+				this.addComponent(selector, c, false);
+			}
+		}
+		for (let selector in config.contentHtmlByContainerElementSelector) {
+			this.setContentHtml(selector, config.contentHtmlByContainerElementSelector[selector]);
+		}
+	}
+
+	public doGetMainElement(): HTMLElement {
+		return this.$main;
+	}
+
+	addComponent(containerElementSelector: string, component: unknown, clearContainer: boolean): void {
+		let containerElement = this.$main.querySelector(`:scope ${containerElementSelector}`);
+		if (containerElement != null) {
+			if (clearContainer) {
+				containerElement.innerHTML = '';
+			}
+			containerElement.appendChild((component as UiComponent).getMainElement());
+		} else {
+			this.logger.error(`Could not add child component since selector does not match any element: ${containerElementSelector}`);
+		}
+	}
+
+	removeComponent(component: unknown): void {
+		(component as UiComponent).getMainElement().remove();
+	}
+
+	setContentHtml(containerElementSelector: string, html: string): void {
+		let containerElement = this.$main.querySelector(`:scope ${containerElementSelector}`);
+		if (containerElement != null) {
+			containerElement.innerHTML = '';
+			if (html != null) {
+				let childNodes = parseHtml(`<div>${html}</div>`).childNodes;
+				// Note that we need to copy childNodes, since childNodes is going to change on containerElement.appendChild(),
+				// since this effectively removes one child from the childNodes NodeList.
+				Array.from(childNodes).forEach(cn => containerElement.appendChild(cn))
+			}
+		} else {
+			this.logger.error(`Could not set content HTML since selector does not match any element: ${containerElementSelector}`);
+		}
+	}
+
+
+}
+
+TeamAppsUiComponentRegistry.registerComponentClass("UiHtmlView", UiHtmlView);
diff --git a/teamapps-client/ts/modules/UiIFrame.ts b/teamapps-client/ts/modules/UiIFrame.ts
index 99bc9c339..9aeda493a 100644
--- a/teamapps-client/ts/modules/UiIFrame.ts
+++ b/teamapps-client/ts/modules/UiIFrame.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,14 +17,14 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-import {UiComponent} from "./UiComponent";
+import {AbstractUiComponent} from "./AbstractUiComponent";
 import {TeamAppsEvent} from "./util/TeamAppsEvent";
 import {TeamAppsUiContext} from "./TeamAppsUiContext";
 import {UiIFrameCommandHandler, UiIFrameConfig} from "../generated/UiIFrameConfig";
 import {parseHtml} from "./Common";
 import {TeamAppsUiComponentRegistry} from "./TeamAppsUiComponentRegistry";
 
-export class UiIFrame extends UiComponent<UiIFrameConfig> implements UiIFrameCommandHandler {
+export class UiIFrame extends AbstractUiComponent<UiIFrameConfig> implements UiIFrameCommandHandler {
 
 	private $iframe: HTMLIFrameElement;
 
@@ -39,8 +39,8 @@ export class UiIFrame extends UiComponent<UiIFrameConfig> implements UiIFrameCom
 		// });
 	}
 
-	public getMainDomElement(): JQuery {
-		return $(this.$iframe);
+	public doGetMainElement(): HTMLElement {
+		return this.$iframe;
 	}
 
 
diff --git a/teamapps-client/ts/modules/UiImageCropper.ts b/teamapps-client/ts/modules/UiImageCropper.ts
index de40c8938..ea1785ece 100644
--- a/teamapps-client/ts/modules/UiImageCropper.ts
+++ b/teamapps-client/ts/modules/UiImageCropper.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,59 +17,138 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-import * as $ from "jquery";
-import {UiComponent} from "./UiComponent";
+
+import {AbstractUiComponent} from "./AbstractUiComponent";
 import {TeamAppsEvent} from "./util/TeamAppsEvent";
 import {TeamAppsUiContext} from "./TeamAppsUiContext";
-import {applyDisplayMode} from "./Common";
-import {executeWhenAttached} from "./util/ExecuteWhenAttached";
-import {UiImageCropper_SelectionChangedEvent, UiImageCropperCommandHandler, UiImageCropperConfig, UiImageCropperEventSource} from "../generated/UiImageCropperConfig";
+import {applyDisplayMode, boundSelection, css, Direction, parseHtml} from "./Common";
+import {executeWhenFirstDisplayed} from "./util/ExecuteWhenFirstDisplayed";
+import {
+	UiImageCropper_SelectionChangedEvent,
+	UiImageCropperCommandHandler,
+	UiImageCropperConfig,
+	UiImageCropperEventSource
+} from "../generated/UiImageCropperConfig";
 import {UiPageDisplayMode} from "../generated/UiPageDisplayMode";
-import {EventFactory} from "../generated/EventFactory";
 import {TeamAppsUiComponentRegistry} from "./TeamAppsUiComponentRegistry";
 import {createUiImageCropperSelectionConfig, UiImageCropperSelectionConfig} from "../generated/UiImageCropperSelectionConfig";
 import {UiImageCropperSelectionMode} from "../generated/UiImageCropperSelectionMode";
+import {draggable} from "./util/draggable";
+
+type Selection = Omit<UiImageCropperSelectionConfig, '_type'>;
 
+type Rect = { x: number, y: number, width: number, height: number }
 
-export class UiImageCropper extends UiComponent<UiImageCropperConfig> implements UiImageCropperCommandHandler, UiImageCropperEventSource {
+export class UiImageCropper extends AbstractUiComponent<UiImageCropperConfig> implements UiImageCropperCommandHandler, UiImageCropperEventSource {
 
-	public readonly onSelectionChanged: TeamAppsEvent<UiImageCropper_SelectionChangedEvent> = new TeamAppsEvent<UiImageCropper_SelectionChangedEvent>(this);
+	public readonly onSelectionChanged: TeamAppsEvent<UiImageCropper_SelectionChangedEvent> = new TeamAppsEvent<UiImageCropper_SelectionChangedEvent>();
 
-	private $element: JQuery;
-	private $selectionFrame: JQuery;
+	private $element: HTMLElement;
+	private $selectionFrame: HTMLElement;
 	private htmlImageElement: HTMLImageElement;
 
-	private selection: UiImageCropperSelectionConfig;
+	private selection: Selection;
 	private imageNaturalWidth: number = null;
 	private imageNaturalHeight: number = null;
 
 	constructor(config: UiImageCropperConfig,
-	            context: TeamAppsUiContext) {
+				context: TeamAppsUiContext) {
 		super(config, context);
 
-		this.$element = $(`<div data-id="' + config.id + '" class="UiImageCropper">
-    <img/>
-    <div class="cropping-frame" tabindex="-1"/>
+		this.$element = parseHtml(`<div data-id="' + config.id + '" class="UiImageCropper">
+    <img draggable="false"></img>
+    <div class="cropping-frame" tabindex="-1">
+    	<div class="ui-resizable-handle ui-resizable-ne" data-direction="ne" data-fixed-at="sw"></div>
+    	<div class="ui-resizable-handle ui-resizable-se" data-direction="se" data-fixed-at="nw"></div>
+    	<div class="ui-resizable-handle ui-resizable-nw" data-direction="nw" data-fixed-at="se"></div>
+    	<div class="ui-resizable-handle ui-resizable-sw" data-direction="sw" data-fixed-at="ne"></div>    
+	</div>
 </div>`);
-		this.htmlImageElement = this.$element.find("img")[0] as HTMLImageElement;
+		this.htmlImageElement = this.$element.querySelector<HTMLElement>(":scope img") as HTMLImageElement;
 		this.htmlImageElement.onload = () => {
 			this.imageNaturalWidth = this.htmlImageElement.naturalWidth;
 			this.imageNaturalHeight = this.htmlImageElement.naturalHeight;
-			applyDisplayMode(this.getMainDomElement(), $(this.htmlImageElement), UiPageDisplayMode.FIT_SIZE);
+			applyDisplayMode(this.getMainElement(), this.htmlImageElement, UiPageDisplayMode.FIT_SIZE);
 			this.resetSelectionFrame(config.aspectRatio);
+			this.updateCroppingFramePosition(this.selection);
 		};
-		// this.$element.css("background-image", `url(${config.imageUrl})`);
-		this.$selectionFrame = this.$element.find(".cropping-frame")
-			.resizable({
-				handles: 'n, e, s, w, ne, se, nw, sw',
-				aspectRatio: 1,
-				containment: $(this.htmlImageElement),
-				stop: this.handleDragEnd.bind(this)
-			})
-			.draggable({
-				containment: $(this.htmlImageElement),
-				stop: this.handleDragEnd.bind(this)
-			});
+		// this.$element.style.backgroundImage = `url(${config.imageUrl}`);
+		this.$selectionFrame = this.$element.querySelector<HTMLElement>(":scope .cropping-frame");
+
+		let startBox: any;
+		draggable(this.$selectionFrame, {
+			validDragStartDecider: e => {
+				const specialButton = e.button != null && e.button !== 0;
+				return e.target == this.$selectionFrame && !specialButton;
+			},
+			dragStart: e => {
+				startBox = {
+					x: parseFloat(this.$selectionFrame.style.left),
+					y: parseFloat(this.$selectionFrame.style.top),
+					width: parseFloat(this.$selectionFrame.style.width),
+					height: parseFloat(this.$selectionFrame.style.height),
+					x2() {
+						return this.x + this.width;
+					},
+					y2() {
+						return this.y + this.height;
+					}
+				};
+			},
+			drag: (e, eventData) => {
+				this.$selectionFrame.style.left = (startBox.x + eventData.deltaX) + "px";
+				this.$selectionFrame.style.top = (startBox.y + eventData.deltaY) + "px";
+			},
+			dragEnd: (e, eventData) => {
+				this.handleDragEnd();
+			}
+		});
+
+		let direction: Direction;
+		let fixedAt: Direction;
+		draggable(this.$selectionFrame.querySelectorAll(":scope .ui-resizable-handle"), {
+			dragStart: e => {
+				direction = (e.target as HTMLElement).getAttribute("data-direction") as Direction;
+				fixedAt = (e.target as HTMLElement).getAttribute("data-fixed-at") as Direction;
+				startBox = {
+					x: parseFloat(this.$selectionFrame.style.left),
+					y: parseFloat(this.$selectionFrame.style.top),
+					width: parseFloat(this.$selectionFrame.style.width),
+					height: parseFloat(this.$selectionFrame.style.height),
+					x2() {
+						return this.x + this.width;
+					},
+					y2() {
+						return this.y + this.height;
+					}
+				}
+			},
+			drag: (e, eventData) => {
+				if (direction.indexOf('n') != -1) {
+					this.$selectionFrame.style.top = (startBox.y + eventData.deltaY) + "px";
+					this.$selectionFrame.style.height = (startBox.height - eventData.deltaY) + "px";
+				}
+				if (direction.indexOf('w') != -1) {
+					this.$selectionFrame.style.left = (startBox.x + eventData.deltaX) + "px";
+					this.$selectionFrame.style.width = (startBox.width - eventData.deltaX) + "px";
+				}
+				if (direction.indexOf('s') != -1) {
+					this.$selectionFrame.style.height = (startBox.height + eventData.deltaY) + "px";
+				}
+				if (direction.indexOf('e') != -1) {
+					this.$selectionFrame.style.width = (startBox.width + eventData.deltaX) + "px";
+				}
+				let selection = this.frameRectToSelection(this.getSelectionFrameOffsetRect());
+				selection = this.boundSelection(selection, fixedAt);
+				this.updateCroppingFramePosition(selection);
+			},
+			dragEnd: (e, eventData) => {
+				let selection = this.frameRectToSelection(this.getSelectionFrameOffsetRect());
+				selection = this.boundSelection(selection, fixedAt);
+				this.updateCroppingFramePosition(selection);
+				this.handleDragEnd();
+			}
+		});
 
 		this.setImageUrl(config.imageUrl);
 		this.setSelectionMode(config.selectionMode);
@@ -80,7 +159,10 @@ export class UiImageCropper extends UiComponent<UiImageCropperConfig> implements
 		if (this.imageNaturalWidth != null) {
 			this.selection = createUiImageCropperSelectionConfig(0, 0, 0, 0);
 			let naturalImageAspectRatio = this.imageNaturalWidth / this.imageNaturalHeight;
-			if (aspectRatio / naturalImageAspectRatio > 1) {
+			if (aspectRatio === 0) {
+				this.selection.width = 0.8 * this.imageNaturalWidth;
+				this.selection.height = 0.8 * this.imageNaturalHeight;
+			} else if (aspectRatio / naturalImageAspectRatio > 1) {
 				this.selection.width = 0.8 * this.imageNaturalWidth;
 				this.selection.height = this.selection.width / aspectRatio;
 			} else {
@@ -91,25 +173,47 @@ export class UiImageCropper extends UiComponent<UiImageCropperConfig> implements
 			this.selection.left = 0.5 * (this.imageNaturalWidth - this.selection.width);
 			this.selection.top = 0.5 * (this.imageNaturalHeight - this.selection.height);
 
-			this.updateCroppingFramePosition();
-			this.onSelectionChanged.fire(EventFactory.createUiImageCropper_SelectionChangedEvent(this.getId(), this.selection));
+			this.selection = this.boundSelection(this.selection);
+			this.updateCroppingFramePosition(this.selection);
+			this.onSelectionChanged.fire({
+				selection: createUiImageCropperSelectionConfig(this.selection.left, this.selection.top, this.selection.width, this.selection.height)
+			});
 		}
 	}
 
 	private handleDragEnd() {
-		let correctionFactor = this.calculateCoordinateCorrectionFactor();
-		this.selection = createUiImageCropperSelectionConfig(
-			(this.$selectionFrame[0].offsetLeft - this.htmlImageElement.offsetLeft) * correctionFactor,
-			(this.$selectionFrame[0].offsetTop - this.htmlImageElement.offsetTop) * correctionFactor,
-			this.$selectionFrame[0].offsetWidth * correctionFactor,
-			this.$selectionFrame[0].offsetHeight * correctionFactor
-		);
+		let selectionFrameOffsetRect = this.getSelectionFrameOffsetRect();
+		let selection = this.frameRectToSelection(selectionFrameOffsetRect);
+		selection = this.boundSelection(selection);
+		this.updateCroppingFramePosition(selection);
+		this.selection = selection;
 		this.logger.debug("selection: ", this.selection);
-		this.onSelectionChanged.fire(EventFactory.createUiImageCropper_SelectionChangedEvent(this.getId(), this.selection));
+		this.onSelectionChanged.fire({
+			selection: createUiImageCropperSelectionConfig(this.selection.left, this.selection.top, this.selection.width, this.selection.height)
+		});
+	}
+
+	private getSelectionFrameOffsetRect(): Rect {
+		return {
+			x: this.$selectionFrame.offsetLeft,
+			y: this.$selectionFrame.offsetTop,
+			width: this.$selectionFrame.offsetWidth,
+			height: this.$selectionFrame.offsetHeight,
+		};
+	}
+
+	private boundSelection(selection: Selection, fixedAt?: Direction): Selection {
+		return boundSelection(selection, {
+			width: this.imageNaturalWidth,
+			height: this.imageNaturalHeight
+		}, this._config.aspectRatio, fixedAt);
 	}
 
 	private calculateCoordinateCorrectionFactor() {
-		return Math.max(this.imageNaturalWidth / this.getWidth(), this.imageNaturalHeight / this.getHeight());
+		let fx = this.imageNaturalWidth / this.getWidth();
+		let fy = this.imageNaturalHeight / this.getHeight();
+		let factor = Math.max(fx, fy);
+		return factor;
 	}
 
 	public setImageUrl(url: string) {
@@ -117,60 +221,71 @@ export class UiImageCropper extends UiComponent<UiImageCropperConfig> implements
 	}
 
 	setAspectRatio(aspectRatio: number): void {
-		this.$selectionFrame.resizable("option", "aspectRatio", aspectRatio);
+		this._config.aspectRatio = aspectRatio;
+		// $(this.$selectionFrame).resizable("option", "aspectRatio", aspectRatio);      TODO
 		this.resetSelectionFrame(aspectRatio);
 	}
 
 	setSelection(selection: UiImageCropperSelectionConfig): void {
 		this.selection = selection;
-		this.updateCroppingFramePosition();
+		this.updateCroppingFramePosition(this.selection);
 	}
 
 	setSelectionMode(selectionMode: UiImageCropperSelectionMode): void {
-		this.$selectionFrame[0].className = this.$selectionFrame[0].className.replace(/mode-\w+/, '');
-		this.$selectionFrame.addClass(`mode-${UiImageCropperSelectionMode[selectionMode].toLowerCase()}`)
+		this.$selectionFrame.className = this.$selectionFrame.className.replace(/mode-\w+/, '');
+		this.$selectionFrame.classList.add(`mode-${UiImageCropperSelectionMode[selectionMode].toLowerCase()}`)
 	}
 
-	@executeWhenAttached(true)
+	@executeWhenFirstDisplayed(true)
 	public onResize(): void {
-		applyDisplayMode(this.getMainDomElement(), $(this.htmlImageElement), UiPageDisplayMode.FIT_SIZE, {
-			innerPreferedDimensions: {
+		applyDisplayMode(this.getMainElement(), this.htmlImageElement, UiPageDisplayMode.FIT_SIZE, {
+			innerPreferredDimensions: {
 				width: this.imageNaturalWidth,
 				height: this.imageNaturalHeight
 			}
 		});
-		this.updateCroppingFramePosition();
+		this.updateCroppingFramePosition(this.selection);
 	}
 
-	@executeWhenAttached(true)
-	private updateCroppingFramePosition() {
-		if (this.selection != null) {
-			let correctionFactor = this.calculateCoordinateCorrectionFactor();
-
-			let left = this.selection.left / correctionFactor;
-			let top = this.selection.top / correctionFactor;
-			let width = this.selection.width / correctionFactor;
-			let height = this.selection.height / correctionFactor;
-
-			this.$selectionFrame.css({
-				left: left + (this.htmlImageElement.offsetLeft - this.getMainDomElement()[0].offsetLeft),
-				top: top + (this.htmlImageElement.offsetTop - this.getMainDomElement()[0].offsetTop),
-				width,
-				height
+	@executeWhenFirstDisplayed(true)
+	private updateCroppingFramePosition(selection: Selection) {
+		if (selection != null) {
+			let frameRect = this.selectionToFrameRect(selection);
+			css(this.$selectionFrame, {
+				left: frameRect.x + "px",
+				top: frameRect.y + "px",
+				width: frameRect.width + "px",
+				height: frameRect.height + "px",
 			});
 		}
 	}
 
-	public getMainDomElement(): JQuery {
-		return this.$element;
+
+	private frameRectToSelection(frameSelectionPos: Rect) {
+		let correctionFactor = this.calculateCoordinateCorrectionFactor();
+		// let correctionOffsetX =
+		return createUiImageCropperSelectionConfig(
+			(frameSelectionPos.x - this.htmlImageElement.offsetLeft) * correctionFactor,
+			(frameSelectionPos.y - this.htmlImageElement.offsetTop) * correctionFactor,
+			frameSelectionPos.width * correctionFactor,
+			frameSelectionPos.height * correctionFactor
+		);
 	}
 
-	protected onAttachedToDom() {
-		this.reLayout();
+	private selectionToFrameRect(selection: Selection): Rect {
+		let correctionFactor = this.calculateCoordinateCorrectionFactor();
+		return {
+			x: (selection.left / correctionFactor) + this.htmlImageElement.offsetLeft,
+			y: (selection.top / correctionFactor) + this.htmlImageElement.offsetTop,
+			width: selection.width / correctionFactor,
+			height: selection.height / correctionFactor
+		};
 	}
 
-	public destroy(): void {
+	public doGetMainElement(): HTMLElement {
+		return this.$element;
 	}
+
 }
 
 TeamAppsUiComponentRegistry.registerComponentClass("UiImageCropper", UiImageCropper);
diff --git a/teamapps-client/ts/modules/UiImageDisplay.ts b/teamapps-client/ts/modules/UiImageDisplay.ts
index 1dd299e75..6d92875de 100644
--- a/teamapps-client/ts/modules/UiImageDisplay.ts
+++ b/teamapps-client/ts/modules/UiImageDisplay.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,43 +17,42 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-import * as $ from "jquery";
-import {UiComponent} from "./UiComponent";
+
+import {AbstractUiComponent} from "./AbstractUiComponent";
 import {TeamAppsEvent} from "./util/TeamAppsEvent";
 import {TeamAppsUiContext} from "./TeamAppsUiContext";
-import {keyCodes} from "trivial-components";
+import {keyCodes} from "./trivial-components/TrivialCore";
 import {UiCachedImageConfig} from "../generated/UiCachedImageConfig";
-import {applyDisplayMode, enableScrollViaDragAndDrop} from "./Common";
+import {applyDisplayMode, enableScrollViaDragAndDrop, parseHtml} from "./Common";
 import {UiImageDisplay_ImageDisplayedEvent, UiImageDisplay_ImagesRequestEvent, UiImageDisplayCommandHandler, UiImageDisplayConfig, UiImageDisplayEventSource} from "../generated/UiImageDisplayConfig";
 import {UiPageDisplayMode} from "../generated/UiPageDisplayMode";
-import {EventFactory} from "../generated/EventFactory";
 import {TeamAppsUiComponentRegistry} from "./TeamAppsUiComponentRegistry";
 
 interface UiCachedImage {
 	id: string;
 	imageUrl: string;
-	$img: JQuery;
+	$img: HTMLElement;
 	naturalWidth?: number;
 	naturalHeight?: number;
 }
 
-export class UiImageDisplay extends UiComponent<UiImageDisplayConfig> implements UiImageDisplayCommandHandler, UiImageDisplayEventSource {
+export class UiImageDisplay extends AbstractUiComponent<UiImageDisplayConfig> implements UiImageDisplayCommandHandler, UiImageDisplayEventSource {
 
-	public readonly onImagesRequest: TeamAppsEvent<UiImageDisplay_ImagesRequestEvent> = new TeamAppsEvent<UiImageDisplay_ImagesRequestEvent>(this);
-	public readonly onImageDisplayed: TeamAppsEvent<UiImageDisplay_ImageDisplayedEvent> = new TeamAppsEvent<UiImageDisplay_ImageDisplayedEvent>(this);
+	public readonly onImagesRequest: TeamAppsEvent<UiImageDisplay_ImagesRequestEvent> = new TeamAppsEvent<UiImageDisplay_ImagesRequestEvent>();
+	public readonly onImageDisplayed: TeamAppsEvent<UiImageDisplay_ImageDisplayedEvent> = new TeamAppsEvent<UiImageDisplay_ImageDisplayedEvent>();
 
 	private forwardImageSvg = `<svg width="64" height="64" viewBox="0 0 10240 10240" version="1.1">
     <path d="M5892 2747l2147 2147c124,124 124,328 0,452l-2147 2147c-124,124 -276,187 -452,187l-1159 0c-66,0 -122,-38 -148,-99 -25,-61 -12,-127 35,-174l1647 -1647 -3255 0c-176,0 -320,-144 -320,-320l0 -640c0,-176 144,-320 320,-320l3255 0 -1647 -1647c-47,-47 -60,-113 -35,-174 26,-61 82,-99 148,-99l1159 0c176,0 328,63 452,187z"
-          style="fill:#ffffff"/>
+          style="fill:#ffffff"></path>
     <path d="M5120 9600c-2474,0 -4480,-2006 -4480,-4480 0,-2474 2006,-4480 4480,-4480 2474,0 4480,2006 4480,4480 0,2474 -2006,4480 -4480,4480zm-3840 -4480c0,2121 1719,3840 3840,3840 2121,0 3840,-1719 3840,-3840 0,-2121 -1719,-3840 -3840,-3840 -2121,0 -3840,1719 -3840,3840z"
-          style="fill:#ffffff"/>`;
+          style="fill:#ffffff"></path></svg>`;
 
-	private $componentWrapper: JQuery;
-	private $imageContainerWrapper: JQuery;
-	private $imageContainer: JQuery;
-	private $imageCacheContainer: JQuery;
-	private $backwardButton: JQuery;
-	private $forwardButton: JQuery;
+	private $componentWrapper: HTMLElement;
+	private $imageContainerWrapper: HTMLElement;
+	private $imageContainer: HTMLElement;
+	private $imageCacheContainer: HTMLElement;
+	private $backwardButton: HTMLElement;
+	private $forwardButton: HTMLElement;
 
 	private cachedImages: UiCachedImage[] = [];
 	private totalNumberOfRecords: number;
@@ -64,17 +63,17 @@ export class UiImageDisplay extends UiComponent<UiImageDisplayConfig> implements
 	constructor(config: UiImageDisplayConfig, context: TeamAppsUiContext) {
 		super(config, context);
 
-		this.$componentWrapper = $(
+		this.$componentWrapper = parseHtml(
 			`<div id=${config.id}" class="UiImageDisplay" tabindex="-1">
-                  <div class="toolbar-container"/>
+                  <div class="toolbar-container"></div>
                   <div class="image-container-wrapper">
-                    <div class="image-container"/>
+                    <div class="image-container"></div>
                   </div>
                   <div class="handle backward-handle">${this.forwardImageSvg}</div>
                   <div class="handle forward-handle">${this.forwardImageSvg}</div>
-                  <div class="image-cache-container"/>
+                  <div class="image-cache-container"></div>
                 </div>`);
-		this.$componentWrapper.keydown((e) => {
+		this.$componentWrapper.addEventListener("keydown", (e) => {
 			if (e.keyCode == keyCodes.left_arrow
 				|| e.keyCode == keyCodes.up_arrow) {
 				this.jumpToNextImage(-1);
@@ -84,18 +83,20 @@ export class UiImageDisplay extends UiComponent<UiImageDisplayConfig> implements
 				this.jumpToNextImage(1);
 			}
 		});
-		this.$componentWrapper.mousedown((e: any) => {
+		this.$componentWrapper.addEventListener("mousedown", (e: any) => {
 			this.$componentWrapper.focus();
 		});
 
-		this.$imageContainerWrapper = this.$componentWrapper.find('.image-container-wrapper');
-		this.$imageContainerWrapper.css("background-color", config.backgroundColor);
+		this.$imageContainerWrapper = this.$componentWrapper.querySelector<HTMLElement>(':scope .image-container-wrapper');
+		this.$imageContainerWrapper.style.backgroundColor = config.backgroundColor;
 		enableScrollViaDragAndDrop(this.$imageContainerWrapper);
-		this.$imageContainer = this.$componentWrapper.find('.image-container');
-		this.$imageContainer.css("padding", config.padding);
-		this.$imageCacheContainer = this.$componentWrapper.find('.image-cache-container');
-		this.$backwardButton = this.$componentWrapper.find('.backward-handle').click(() => this.jumpToNextImage(-1));
-		this.$forwardButton = this.$componentWrapper.find('.forward-handle').click(() => this.jumpToNextImage(1));
+		this.$imageContainer = this.$componentWrapper.querySelector<HTMLElement>(':scope .image-container');
+		this.$imageContainer.style.padding = config.padding + "px";
+		this.$imageCacheContainer = this.$componentWrapper.querySelector<HTMLElement>(':scope .image-cache-container');
+		this.$backwardButton = this.$componentWrapper.querySelector<HTMLElement>(':scope .backward-handle');
+		this.$backwardButton.addEventListener("click", () => this.jumpToNextImage(-1));
+		this.$forwardButton = this.$componentWrapper.querySelector<HTMLElement>(':scope .forward-handle');
+		this.$forwardButton.addEventListener("click", () => this.jumpToNextImage(1));
 
 		this.zoomFactor = config.zoomFactor;
 		this.displayMode = config.displayMode;
@@ -106,15 +107,20 @@ export class UiImageDisplay extends UiComponent<UiImageDisplayConfig> implements
 		}
 	}
 
-	public getMainDomElement(): JQuery {
+	public doGetMainElement(): HTMLElement {
 		return this.$componentWrapper;
 	}
 
 	private jumpToNextImage(direction: number) {
 		this.showImageByIndex(this.currentImageIndex + direction);
-		this.onImageDisplayed.fire(EventFactory.createUiImageDisplay_ImageDisplayedEvent(this._config.id, this.cachedImages[this.currentImageIndex].id));
+		this.onImageDisplayed.fire({
+			imageId: this.cachedImages[this.currentImageIndex].id
+		});
 		if (this.cachedImages.length - this.currentImageIndex - 1 < this._config.cacheSize) {
-			this.onImagesRequest.fire(EventFactory.createUiImageDisplay_ImagesRequestEvent(this._config.id, this.cachedImages.length, Math.min(this.totalNumberOfRecords - this.cachedImages.length, this._config.cacheSize)));
+			this.onImagesRequest.fire({
+				startIndex: this.cachedImages.length,
+				length: Math.min(this.totalNumberOfRecords - this.cachedImages.length, this._config.cacheSize)
+			});
 		}
 	};
 
@@ -126,7 +132,7 @@ export class UiImageDisplay extends UiComponent<UiImageDisplayConfig> implements
 			let uiCachedImage: UiCachedImage = {
 				id: imageConfig.id,
 				imageUrl: imageConfig.imageUrl,
-				$img: $(img),
+				$img: img,
 				naturalWidth: 0,
 				naturalHeight: 0
 			};
@@ -155,11 +161,11 @@ export class UiImageDisplay extends UiComponent<UiImageDisplayConfig> implements
 	private showImageByIndex(imageIndex: number) {
 		if (this.cachedImages[imageIndex]) {
 			this.currentImageIndex = imageIndex;
-			this.$imageContainer[0].innerHTML = '';
+			this.$imageContainer.innerHTML = '';
 			this.$imageContainer.append(this.cachedImages[imageIndex].$img);
 			this.updateImageSizes();
-			this.$backwardButton.toggleClass("hidden", imageIndex <= 0);
-			this.$forwardButton.toggleClass("hidden", imageIndex >= this.totalNumberOfRecords - 1);
+			this.$backwardButton.classList.toggle("hidden", imageIndex <= 0);
+			this.$forwardButton.classList.toggle("hidden", imageIndex >= this.totalNumberOfRecords - 1);
 		}
 	};
 
@@ -202,9 +208,6 @@ export class UiImageDisplay extends UiComponent<UiImageDisplayConfig> implements
 		this.updateImageSizes();
 	}
 
-	public destroy(): void {
-		// nothing to do
-	}
 }
 
 TeamAppsUiComponentRegistry.registerComponentClass("UiImageDisplay", UiImageDisplay);
diff --git a/teamapps-client/ts/modules/UiInfiniteItemView.ts b/teamapps-client/ts/modules/UiInfiniteItemView.ts
index 413a9ecd5..2322cd3fb 100644
--- a/teamapps-client/ts/modules/UiInfiniteItemView.ts
+++ b/teamapps-client/ts/modules/UiInfiniteItemView.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,37 +17,51 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-import * as $ from "jquery";
-import {UiComponent} from "./UiComponent";
+
+import {AbstractUiComponent} from "./AbstractUiComponent";
 import {TeamAppsEvent} from "./util/TeamAppsEvent";
-import {Constants, generateUUID, Renderer} from "./Common";
+import {Constants, generateUUID, parseHtml, Renderer} from "./Common";
 import {TeamAppsUiContext} from "./TeamAppsUiContext";
-import {executeWhenAttached} from "./util/ExecuteWhenAttached";
-import {TableDataProviderItem} from "./table/TableDataProvider";
+import {executeWhenFirstDisplayed} from "./util/ExecuteWhenFirstDisplayed";
 import {
-	UiInfiniteItemView_DataRequestEvent,
+	UiInfiniteItemView_ContextMenuRequestedEvent,
+	UiInfiniteItemView_DisplayedRangeChangedEvent,
 	UiInfiniteItemView_ItemClickedEvent,
 	UiInfiniteItemViewCommandHandler,
 	UiInfiniteItemViewConfig,
 	UiInfiniteItemViewEventSource
 } from "../generated/UiInfiniteItemViewConfig";
-import {EventFactory} from "../generated/EventFactory";
 import {TeamAppsUiComponentRegistry} from "./TeamAppsUiComponentRegistry";
 import {UiTemplateConfig} from "../generated/UiTemplateConfig";
 import {itemCssStringsAlignItems, itemCssStringsJustification} from "./UiItemView";
 import {UiItemJustification} from "../generated/UiItemJustification";
 import {UiIdentifiableClientRecordConfig} from "../generated/UiIdentifiableClientRecordConfig";
-import {UiVerticalElementAlignment} from "../generated/UiVerticalElementAlignment";
 import {UiVerticalItemAlignment} from "../generated/UiVerticalItemAlignment";
-
-///<reference types="slickgrid"/>
+import {ContextMenu} from "./micro-components/ContextMenu";
+import {UiComponent} from "./UiComponent";
+import {loadSensitiveThrottling, throttle} from "./util/throttle";
+import {
+	createUiInfiniteItemViewDataRequestConfig,
+	UiInfiniteItemViewDataRequestConfig
+} from "../generated/UiInfiniteItemViewDataRequestConfig";
+import {UiTableClientRecordConfig} from "../generated/UiTableClientRecordConfig";
+
+const ROW_LOOKAHAED = 10;
+
+export interface TableDataProviderItem extends UiTableClientRecordConfig {
+	children: TableDataProviderItem[];
+	depth: number;
+	parentId: number;
+	expanded: boolean;
+}
 
 class UiInfiniteItemViewDataProvider implements Slick.DataProvider<UiIdentifiableClientRecordConfig> {
 
 	private availableWidth: number;
-	private static ROW_LOOKAHAED = 20;
 	private timerId: number = null;
 
+	private totalNumberOfRecords = 0;
+
 	constructor(private data: UiIdentifiableClientRecordConfig[], private itemWidthIncludingMargin: number, private dataRequestCallback: (from: number, length: number) => void) {
 	}
 
@@ -55,11 +69,14 @@ class UiInfiniteItemViewDataProvider implements Slick.DataProvider<UiIdentifiabl
 	 * This method is called by SlickGrid.
 	 */
 	public getLength(): number {
-		return Math.ceil(this.data.length / this.getItemsPerRow());
+		return Math.ceil(this.totalNumberOfRecords / this.getItemsPerRow());
 	}
 
-	public setTotalNumberOfRecords(totalNumberOfRecords: number): number {
-		return this.data.length = totalNumberOfRecords;
+	public setTotalNumberOfRecords(totalNumberOfRecords: number) {
+		if (this.data.length > totalNumberOfRecords) {
+			this.data.length = totalNumberOfRecords;
+		}
+		this.totalNumberOfRecords = totalNumberOfRecords;
 	}
 
 	/**
@@ -78,7 +95,7 @@ class UiInfiniteItemViewDataProvider implements Slick.DataProvider<UiIdentifiabl
 		return {};
 	}
 
-	private getItemsPerRow(): number {
+	public getItemsPerRow(): number {
 		return Math.floor(this.availableWidth / this.itemWidthIncludingMargin);
 	}
 
@@ -96,24 +113,22 @@ class UiInfiniteItemViewDataProvider implements Slick.DataProvider<UiIdentifiabl
 		}
 
 		let itemsPerRow = this.getItemsPerRow();
-		let from = Math.max(firstVisibleRowIndex - UiInfiniteItemViewDataProvider.ROW_LOOKAHAED, 0) * itemsPerRow;
-		let to = (lastVisibleRowIndex + UiInfiniteItemViewDataProvider.ROW_LOOKAHAED) * itemsPerRow;
-		if (this.data.length) {
-			to = Math.min(to, this.data.length - 1);
-		}
+		let from = Math.max(firstVisibleRowIndex - ROW_LOOKAHAED, 0) * itemsPerRow;
+		let toInclusive = (lastVisibleRowIndex + ROW_LOOKAHAED) * itemsPerRow;
+		toInclusive = Math.min(toInclusive, this.totalNumberOfRecords - 1);
 
-		while (this.data[from] !== undefined && from < to) {
+		while (this.data[from] !== undefined && from < toInclusive) {
 			from++;
 		}
-		while (this.data[to] !== undefined && from < to) {
-			to--;
+		while (this.data[toInclusive] !== undefined && from < toInclusive) {
+			toInclusive--;
 		}
 
-		if (firstVisibleRowIndex * itemsPerRow > to || (lastVisibleRowIndex + 1) * itemsPerRow < from) { // not really necessary to load anything
+		if (firstVisibleRowIndex * itemsPerRow > toInclusive || (lastVisibleRowIndex + 1) * itemsPerRow < from) { // not really necessary to load anything
 			return;
 		}
 
-		if (from == to && this.data[to] !== undefined) {
+		if (from == toInclusive && this.data[toInclusive] !== undefined) {
 			return;
 		}
 
@@ -122,11 +137,11 @@ class UiInfiniteItemViewDataProvider implements Slick.DataProvider<UiIdentifiabl
 		}
 
 		this.timerId = window.setTimeout(() => {
-			for (var i = from; i <= to; i++) {
+			for (var i = from; i <= toInclusive; i++) {
 				this.data[i] = null; // null indicates a 'requested but not available yet'
 			}
 
-			let length = to - from + 1;
+			let length = toInclusive - from;
 			this.dataRequestCallback(from, length);
 		}, 100);
 	}
@@ -136,7 +151,8 @@ class UiInfiniteItemViewDataProvider implements Slick.DataProvider<UiIdentifiabl
 	}
 
 	setData(startIndex: number, data: any[]) {
-		this.data.splice.apply(this.data, (<any>[startIndex, data.length]).concat(data));
+		this.data.length = Math.max(this.data.length, startIndex + data.length);
+		this.data.splice.apply(this.data, ([startIndex, data.length] as any[]).concat(data));
 	}
 
 	removeData(ids: number[]) {
@@ -144,24 +160,24 @@ class UiInfiniteItemViewDataProvider implements Slick.DataProvider<UiIdentifiabl
 			previousValue[currentValue] = currentValue;
 			return previousValue;
 		}, {});
-		console.log(idsAsMap);
 		for (let i = 0; i < this.data.length; i++) {
 			const currentRecord = this.data[i];
 			if (currentRecord != null && idsAsMap[currentRecord.id] != null) {
-				console.log("Removing " + currentRecord.id);
 				this.data[i] = undefined;
 			}
 		}
 	}
 }
 
-export class UiInfiniteItemView extends UiComponent<UiInfiniteItemViewConfig> implements UiInfiniteItemViewCommandHandler, UiInfiniteItemViewEventSource {
+export class UiInfiniteItemView extends AbstractUiComponent<UiInfiniteItemViewConfig> implements UiInfiniteItemViewCommandHandler, UiInfiniteItemViewEventSource {
 
-	public readonly onDataRequest: TeamAppsEvent<UiInfiniteItemView_DataRequestEvent> = new TeamAppsEvent<UiInfiniteItemView_DataRequestEvent>(this);
-	public readonly onItemClicked: TeamAppsEvent<UiInfiniteItemView_ItemClickedEvent> = new TeamAppsEvent<UiInfiniteItemView_ItemClickedEvent>(this);
 
-	private $mainDomElement: JQuery;
-	private $grid: JQuery;
+	public readonly onDisplayedRangeChanged: TeamAppsEvent<UiInfiniteItemView_DisplayedRangeChangedEvent> = new TeamAppsEvent();
+	public readonly onItemClicked: TeamAppsEvent<UiInfiniteItemView_ItemClickedEvent> = new TeamAppsEvent();
+	public readonly onContextMenuRequested: TeamAppsEvent<UiInfiniteItemView_ContextMenuRequestedEvent> = new TeamAppsEvent();
+
+	private $mainDomElement: HTMLElement;
+	private $grid: HTMLElement;
 	private grid: Slick.Grid<any>;
 	private dataProvider: UiInfiniteItemViewDataProvider;
 	private itemTemplateRenderer: Renderer;
@@ -170,56 +186,67 @@ export class UiInfiniteItemView extends UiComponent<UiInfiniteItemViewConfig> im
 	private itemWidth: number;
 	private itemJustification: UiItemJustification;
 	private verticalItemAlignment: UiVerticalItemAlignment;
+	private contextMenu: ContextMenu;
 
 	constructor(config: UiInfiniteItemViewConfig, context: TeamAppsUiContext) {
 		super(config, context);
 		this.uuid = generateUUID();
-		this.$mainDomElement = $(`<div id="${config.id}" class="UiInfiniteItemView grid-${this.uuid}">
+		this.$mainDomElement = parseHtml(`<div class="UiInfiniteItemView grid-${this.uuid}">
                 <div class="slickgrid"></div>
             </div>`);
-		this.$grid = this.$mainDomElement.find(".slickgrid");
+		this.$grid = this.$mainDomElement.querySelector<HTMLElement>(":scope .slickgrid");
 		this.setItemTemplate(config.itemTemplate);
 		this.itemWidth = config.itemWidth;
 		this.horizontalItemMargin = config.horizontalItemMargin;
 		this.itemJustification = config.itemJustification;
 		this.verticalItemAlignment = config.verticalItemAlignment;
 		this.dataProvider = new UiInfiniteItemViewDataProvider(config.data || [], 10 /*cannot know item width until component width is known*/, (fromIndex, length) => {
-			this.onDataRequest.fire(EventFactory.createUiInfiniteItemView_DataRequestEvent(
-				config.id,
-				fromIndex,
-				length
-			));
+			this.onDisplayedRangeChanged.fire(this.createDisplayRangeChangedEvent(createUiInfiniteItemViewDataRequestConfig(fromIndex, length)));
 		});
 		if (config.totalNumberOfRecords) {
 			this.dataProvider.setTotalNumberOfRecords(config.totalNumberOfRecords);
 		}
 		this.createGrid();
 
+		this.contextMenu = new ContextMenu();
+
 		let me = this;
-		(this.getMainDomElement() as JQuery)
-			.on("click contextmenu", ".item-wrapper", function (e: JQueryMouseEventObject) {
+		$(this.getMainElement())
+			.on("click", ".item-wrapper", function (e: JQueryMouseEventObject) {
+				let recordId = parseInt((<Element>this).getAttribute("data-id"));
+				me.onItemClicked.fire({
+					recordId: recordId,
+					isDoubleClick: false
+				});
+			})
+			.on("contextmenu", ".item-wrapper", function (e: JQueryMouseEventObject) {
 				let recordId = parseInt((<Element>this).getAttribute("data-id"));
-				me.onItemClicked.fire(EventFactory.createUiInfiniteItemView_ItemClickedEvent(me.getId(), recordId, e.button === 2, false));
-			} as JQuery.EventHandler<any>)
+				if (!isNaN(recordId) && me._config.contextMenuEnabled) {
+					me.contextMenu.open(e as unknown as MouseEvent, requestId => me.onContextMenuRequested.fire({
+						recordId: recordId,
+						requestId
+					}));
+				}
+			})
 			.on("dblclick", ".item-wrapper", function (e: JQueryMouseEventObject) {
 				let recordId = parseInt((<Element>this).getAttribute("data-id"));
-				me.onItemClicked.fire(EventFactory.createUiInfiniteItemView_ItemClickedEvent(me.getId(), recordId, e.button === 2, true));
-			} as JQuery.EventHandler<any>);
+				me.onItemClicked.fire({
+					recordId: recordId,
+					isDoubleClick: true
+				});
+			});
 
 		this.setHorizontalItemMargin(config.horizontalItemMargin);
 	}
 
-	@executeWhenAttached()
+	@executeWhenFirstDisplayed()
 	private createGrid() {
 		let cellFormatter = (row: number, cell: number, value: any, columnDef: Slick.Column<TableDataProviderItem>, dataContext: any[]) => {
-			for (var i = 0; i < dataContext.length; i++) {
-				if (!dataContext[i]) {
-					return "";
-				}
-			}
 			let html = '<div class="line-wrapper">';
 			for (let record of dataContext) {
-				html += `<div class="item-wrapper" data-id="${record.id}" style="width: ${this.calculateItemWidthInPixels()}px;">${this.itemTemplateRenderer.render(record.values)}</div>`;
+				if (record != null) { // null happens for unknown reasons...
+					html += `<div class="item-wrapper" data-id="${record.id}" style="width: ${this.calculateItemWidthInPixels(false)}px;">${this.itemTemplateRenderer.render(record.values)}</div>`;
+				}
 			}
 			html += "</div>";
 			return html;
@@ -244,85 +271,128 @@ export class UiInfiniteItemView extends UiComponent<UiInfiniteItemViewConfig> im
 			enableAddRow: false
 		};
 
-		this.dataProvider.setAvailableWidth(this.$mainDomElement[0].offsetWidth - Constants.SCROLLBAR_WIDTH);
+		this.dataProvider.setAvailableWidth(this.getAvailableWidth());
 
 		this.grid = new Slick.Grid(this.$grid, this.dataProvider, columns, options);
 
 		this.grid.onViewportChanged.subscribe((e, args) => {
 			this.dataProvider.ensureData(this.grid.getViewport().top, this.grid.getViewport().bottom);
 		});
+		this.grid.onScroll.subscribe(throttle((eventData) => {
+			// CAUTION: debounce/throttle scrolling without data requests only!!! (otherwise the tableDataProvider will mark rows as requested but the actual request will not get to the server)
+			this.onDisplayedRangeChanged.fire(this.createDisplayRangeChangedEvent());
+		}, 500));
+
+		this.updateAutoHeight();
+	}
+
+	private createDisplayRangeChangedEvent(dataRequest?: UiInfiniteItemViewDataRequestConfig) {
+		const viewPort = this.grid.getViewport();
+		return {
+			startIndex: Math.max(0, (viewPort.top - ROW_LOOKAHAED) * this.dataProvider.getItemsPerRow()),
+			length: (viewPort.bottom - viewPort.top + ROW_LOOKAHAED * 2) * this.dataProvider.getItemsPerRow(),
+			displayedRecordIds: this.getCurrentlyDisplayedRecordIds(),
+			dataRequest: dataRequest
+		};
+	}
+
+	private getCurrentlyDisplayedRecordIds() {
+		const viewPort = this.grid.getViewport();
+		const currentlyDisplayedRecordIds: any[] = [];
+		for (let i = Math.max(0, viewPort.top - ROW_LOOKAHAED); i <= viewPort.bottom + ROW_LOOKAHAED; i++) {
+			const row = this.dataProvider.getItem(i);
+			if (row != null) {
+				row.forEach(item => item != null && currentlyDisplayedRecordIds.push(item.id));
+			}
+		}
+		return currentlyDisplayedRecordIds;
 	}
 
-	private calculateItemWidthInPixels() {
+	private calculateItemWidthInPixels(includeMargins: boolean) {
 		if (this.itemWidth < 0) {
 			console.error("itemWidth < 0 not allowed! Displaying full-width!");
 			this.itemWidth = 0;
 		}
 
+		let availableWidth = this.getAvailableWidth();
 		if (this.itemWidth === 0) {
-			return this.getWidth() - Constants.SCROLLBAR_WIDTH - 1 /*TODO remove -1*/;
+			return availableWidth;
 		} else if (this.itemWidth < 1) {
-			return Math.min(this.getWidth() * this.itemWidth + this._config.horizontalItemMargin - Constants.SCROLLBAR_WIDTH - 1 /*TODO remove -1*/, this.getWidth() - Constants.SCROLLBAR_WIDTH - 1 /*TODO remove -1*/);
+			let widthIncludingMargins = availableWidth * this.itemWidth + this._config.horizontalItemMargin * 2;
+			if (widthIncludingMargins > availableWidth) {
+				return availableWidth - this._config.horizontalItemMargin * 2;
+			} else {
+				return availableWidth * this.itemWidth + (includeMargins ? this._config.horizontalItemMargin * 2 : 0);
+			}
+			return Math.min(widthIncludingMargins, availableWidth);
 		} else if (this.itemWidth >= 1) {
-			return Math.min(this.itemWidth + this._config.horizontalItemMargin, this.getWidth() - Constants.SCROLLBAR_WIDTH - 1 /*TODO remove -1*/);
+			return Math.min(this.itemWidth + (includeMargins ? this._config.horizontalItemMargin * 2 : 0), availableWidth);
 		}
 	}
 
-	@executeWhenAttached()
+	@executeWhenFirstDisplayed()
 	public addData(startIndex: number,
-	               data: any[],
-	               totalNumberOfRecords: number,
-	               clearTableCache: boolean) {
+				   data: any[],
+				   totalNumberOfRecords: number,
+				   clearTableCache: boolean) {
 		if (clearTableCache) {
 			this.dataProvider.clear();
 		}
 
-		this.dataProvider.setData(startIndex, data);
-
-		this.grid.invalidateAllRows();
-
 		if (totalNumberOfRecords != this.dataProvider.getLength()) {
 			this.dataProvider.setTotalNumberOfRecords(totalNumberOfRecords);
-			this.grid.updateRowCount();
 		}
 
-		this.grid.render();
+		this.dataProvider.setData(startIndex, data);
 
-		// clearTimeout(this.loadingIndicatorFadeInTimer);
-		// this._$loadingIndicator.fadeOut();
+		this.redrawGridContents();
+	}
 
+	@loadSensitiveThrottling(100, 7, 2000)
+	private redrawGridContents() {
+		this.grid.updateRowCount();
+		this.updateAutoHeight();
+		this.grid.invalidateAllRows();
+		this.grid.render();
 		this.grid.resizeCanvas();
 	}
 
-	@executeWhenAttached()
+	private updateAutoHeight() {
+		if (this._config.autoHeight) {
+			let computedStyle = getComputedStyle(this.$mainDomElement);
+			let newHeight = Math.min(parseFloat(computedStyle.maxHeight) || Number.MAX_SAFE_INTEGER, this.dataProvider.getLength() * this._config.rowHeight
+				+ parseFloat(computedStyle.paddingTop) + parseFloat(computedStyle.paddingBottom)) + "px";
+			if (newHeight != this.$grid.style.height) {
+				this.$grid.style.height = newHeight;
+			}
+		}
+	}
+
+	@executeWhenFirstDisplayed()
 	removeData(ids: number[]): void {
 		this.dataProvider.removeData(ids);
-		this.grid.invalidateAllRows();
-		this.grid.resizeCanvas();
+		this.redrawGridContents();
 		this.dataProvider.ensureData(this.grid.getViewport().top, this.grid.getViewport().bottom);
 	}
 
-	@executeWhenAttached(true)
+	@executeWhenFirstDisplayed(true)
 	public onResize(): void {
-		this.logger.debug(this.$mainDomElement[0].offsetWidth - Constants.SCROLLBAR_WIDTH);
-		this.dataProvider.setAvailableWidth(this.$mainDomElement[0].offsetWidth - Constants.SCROLLBAR_WIDTH);
-		this.dataProvider.setItemWidthIncludingMargin(this.calculateItemWidthInPixels());
-		this.grid.invalidateAllRows();
-		this.grid.resizeCanvas();
+		this.dataProvider.setAvailableWidth(this.getAvailableWidth());
+		this.dataProvider.setItemWidthIncludingMargin(this.calculateItemWidthInPixels(true));
+		this.redrawGridContents();
 		this.dataProvider.ensureData(this.grid.getViewport().top, this.grid.getViewport().bottom);
 	}
 
-
-	destroy(): void {
-		// nothing to do...
+	private getAvailableWidth() {
+		return this.getWidth() - Constants.SCROLLBAR_WIDTH;
 	}
 
-	getMainDomElement(): JQuery {
+	doGetMainElement(): HTMLElement {
 		return this.$mainDomElement;
 	}
 
 	private updateStyles() {
-		this.getMainDomElement().append(`<style>
+		this.getMainElement().append(parseHtml(`<style>
             .grid-${this.uuid} .line-wrapper {
                  align-items: ${itemCssStringsAlignItems[this.verticalItemAlignment]};
                  justify-content: ${itemCssStringsJustification[this.itemJustification]};
@@ -330,17 +400,15 @@ export class UiInfiniteItemView extends UiComponent<UiInfiniteItemViewConfig> im
             .grid-${this.uuid} .item-wrapper {
                margin: 0 ${this.horizontalItemMargin}px;
             }
-            </style>`);
+            </style>`));
 	}
 
-	@executeWhenAttached(true)
+	@executeWhenFirstDisplayed(true)
 	setHorizontalItemMargin(horizontalItemMargin: number): void {
 		this.horizontalItemMargin = horizontalItemMargin;
-		this.dataProvider.setItemWidthIncludingMargin(this.calculateItemWidthInPixels());
+		this.dataProvider.setItemWidthIncludingMargin(this.calculateItemWidthInPixels(true));
 		if (this.grid) {
-			this.grid.invalidateAllRows();
-			this.grid.updateRowCount();
-			this.grid.render();
+			this.redrawGridContents();
 		}
 		this.updateStyles();
 	}
@@ -353,19 +421,16 @@ export class UiInfiniteItemView extends UiComponent<UiInfiniteItemViewConfig> im
 	setItemTemplate(itemTemplate: UiTemplateConfig): void {
 		this.itemTemplateRenderer = this._context.templateRegistry.createTemplateRenderer(itemTemplate);
 		if (this.grid) {
-			this.grid.invalidateAllRows();
-			this.grid.render();
+			this.redrawGridContents();
 		}
 	}
 
-	@executeWhenAttached(true)
+	@executeWhenFirstDisplayed(true)
 	setItemWidth(itemWidth: number): void {
 		this.itemWidth = itemWidth;
-		this.dataProvider.setItemWidthIncludingMargin(this.calculateItemWidthInPixels());
+		this.dataProvider.setItemWidthIncludingMargin(this.calculateItemWidthInPixels(true));
 		if (this.grid) {
-			this.grid.invalidateAllRows();
-			this.grid.updateRowCount();
-			this.grid.render();
+			this.redrawGridContents();
 		}
 	}
 
@@ -374,6 +439,14 @@ export class UiInfiniteItemView extends UiComponent<UiInfiniteItemViewConfig> im
 		this.updateStyles();
 	}
 
+	setContextMenuContent(requestId: number, component: UiComponent): void {
+		this.contextMenu.setContent(component, requestId);
+	}
+
+	closeContextMenu(requestId: number): void {
+		this.contextMenu.close(requestId);
+	}
+
 }
 
 TeamAppsUiComponentRegistry.registerComponentClass("UiInfiniteItemView", UiInfiniteItemView);
diff --git a/teamapps-client/ts/modules/UiInfiniteItemView2.ts b/teamapps-client/ts/modules/UiInfiniteItemView2.ts
new file mode 100644
index 000000000..562795138
--- /dev/null
+++ b/teamapps-client/ts/modules/UiInfiniteItemView2.ts
@@ -0,0 +1,371 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+
+import {AbstractUiComponent} from "./AbstractUiComponent";
+import {TeamAppsEvent} from "./util/TeamAppsEvent";
+import {addDelegatedEventListener, parseHtml, Renderer} from "./Common";
+import {TeamAppsUiContext} from "./TeamAppsUiContext";
+import {executeWhenFirstDisplayed} from "./util/ExecuteWhenFirstDisplayed";
+import {
+	UiInfiniteItemView2_ContextMenuRequestedEvent, UiInfiniteItemView2_DisplayedRangeChangedEvent,
+	UiInfiniteItemView2_ItemClickedEvent,
+	UiInfiniteItemView2CommandHandler,
+	UiInfiniteItemView2Config,
+	UiInfiniteItemView2EventSource
+} from "../generated/UiInfiniteItemView2Config";
+import {TeamAppsUiComponentRegistry} from "./TeamAppsUiComponentRegistry";
+import {UiTemplateConfig} from "../generated/UiTemplateConfig";
+import {UiItemJustification} from "../generated/UiItemJustification";
+import {UiIdentifiableClientRecordConfig} from "../generated/UiIdentifiableClientRecordConfig";
+import {ContextMenu} from "./micro-components/ContextMenu";
+import {UiComponent} from "./UiComponent";
+import {debouncedMethod, DebounceMode} from "./util/debounce";
+import {UiHorizontalElementAlignment} from "../generated/UiHorizontalElementAlignment";
+import {UiVerticalElementAlignment} from "../generated/UiVerticalElementAlignment";
+import {UiInfiniteItemViewClientRecordConfig} from "../generated/UiInfiniteItemViewClientRecordConfig";
+
+type RenderedItem = {
+	item: UiIdentifiableClientRecordConfig,
+	$element: HTMLElement,
+	$wrapper: HTMLElement,
+	x: number,
+	y: number,
+	width: number,
+	height: number
+};
+
+export var cssJustifyContent = {
+	[UiHorizontalElementAlignment.LEFT]: "flex-start",
+	[UiHorizontalElementAlignment.RIGHT]: "flex-end",
+	[UiHorizontalElementAlignment.CENTER]: "center",
+	[UiHorizontalElementAlignment.STRETCH]: "stretch",
+};
+export var cssAlignItems = {
+	[UiVerticalElementAlignment.TOP]: "flex-start",
+	[UiVerticalElementAlignment.CENTER]: "center",
+	[UiVerticalElementAlignment.BOTTOM]: "flex-end",
+	[UiVerticalElementAlignment.STRETCH]: "stretch"
+};
+
+export class UiInfiniteItemView2 extends AbstractUiComponent<UiInfiniteItemView2Config> implements UiInfiniteItemView2CommandHandler, UiInfiniteItemView2EventSource {
+
+	public readonly onDisplayedRangeChanged: TeamAppsEvent<UiInfiniteItemView2_DisplayedRangeChangedEvent> = new TeamAppsEvent();
+	public readonly onItemClicked: TeamAppsEvent<UiInfiniteItemView2_ItemClickedEvent> = new TeamAppsEvent();
+	public readonly onContextMenuRequested: TeamAppsEvent<UiInfiniteItemView2_ContextMenuRequestedEvent> = new TeamAppsEvent();
+
+	private $mainDomElement: HTMLElement;
+	private $grid: HTMLElement;
+	private $styles: HTMLStyleElement;
+	private itemTemplateRenderer: Renderer;
+	private contextMenu: ContextMenu;
+
+	private renderedRange: [number, number] = [0, 0];
+	private renderedIds: number[] = []; // in order
+	private renderedItems: Map<number, RenderedItem> = new Map<number, RenderedItem>();
+	private totalNumberOfRecords: number = null;
+
+	constructor(config: UiInfiniteItemView2Config, context: TeamAppsUiContext) {
+		super(config, context);
+		this.$mainDomElement = parseHtml(`<div class="UiInfiniteItemView2 grid-${this._config.id} ${config.selectionEnabled ? 'selection-enabled' : ''}">
+                <div class="grid"></div>
+                <style></style>
+            </div>`);
+		this.$grid = this.$mainDomElement.querySelector<HTMLElement>(":scope .grid");
+		this.$styles = this.$mainDomElement.querySelector<HTMLStyleElement>(":scope style");
+		this.updateStyles();
+		this.setItemTemplate(config.itemTemplate);
+		this.setItemPositionAnimationTime(config.itemPositionAnimationTime);
+		this.contextMenu = new ContextMenu();
+
+		this.$mainDomElement.addEventListener("scroll", ev => {
+			this.requestDataIfNeededDebounced();
+		});
+		this.$mainDomElement.addEventListener("wheel", ev => {
+			if (Math.abs(ev.deltaY) < 5) {
+				this.requestDataIfNeededDebounced();
+			}
+		});
+
+		addDelegatedEventListener(this.getMainElement(), ".item-wrapper", ["click"], (element, ev) => {
+			let recordId = parseInt(element.getAttribute("data-id"));
+			this.setSelectedItem(this.renderedItems.get(recordId));
+			this.onItemClicked.fire({
+				recordId: recordId,
+				isDoubleClick: false
+			});
+		});
+		addDelegatedEventListener(this.getMainElement(), ".item-wrapper", "contextmenu", (element, ev) => {
+			let recordId = parseInt(element.getAttribute("data-id"));
+			if (!isNaN(recordId) && this._config.contextMenuEnabled) {
+				this.contextMenu.open(ev, requestId => this.onContextMenuRequested.fire({
+					recordId: recordId,
+					requestId
+				}));
+			}
+		});
+		addDelegatedEventListener(this.getMainElement(), ".item-wrapper", ["dblclick"], (element, ev) => {
+			let recordId = parseInt(element.getAttribute("data-id"));
+			this.onItemClicked.fire({
+				recordId: recordId,
+				isDoubleClick: true
+			});
+		});
+	}
+
+	setItemPositionAnimationTime(animationMillis: number): void {
+		this.$mainDomElement.style.setProperty("--item-position-animation-time", animationMillis + "ms");
+	}
+
+	@debouncedMethod(150, DebounceMode.BOTH)
+	private requestDataIfNeededDebounced() {
+		this.requestDataIfNeeded();
+	}
+
+	private requestDataIfNeeded() {
+		let visibleItemRange = this.getVisibleItemRange();
+		let visibleItemRangeLength = visibleItemRange[1] - visibleItemRange[0];
+		if (this._config.visible && visibleItemRangeLength === 0) {
+			visibleItemRangeLength = this.getItemsPerRow(); // even if this component has zero height, it should at least query one row in order to be able to auto-size!
+		}
+		const newRenderedRange: [number, number] = [
+			Math.max(0, visibleItemRange[0] - visibleItemRangeLength),
+			visibleItemRange[1] + visibleItemRangeLength
+		];
+		if (newRenderedRange[0] != this.renderedRange[0] || newRenderedRange[1] != this.renderedRange[1]) {
+			this.renderedRange = newRenderedRange;
+			let eventObject = {
+				startIndex: newRenderedRange[0],
+				length: newRenderedRange[1] - newRenderedRange[0] // send the uncut value, so the server will send new records if some are added user scrolled to the end
+			};
+			this.logger.debug("onRenderedItemRangeChanged ", eventObject);
+			this.onDisplayedRangeChanged.fire(eventObject);
+		}
+	}
+
+	private getVisibleItemRange() {
+		const itemsPerRow = this.getItemsPerRow();
+		const viewportTop = this.$mainDomElement.scrollTop;
+		const visibleStartRowIndex = Math.floor(viewportTop / this._config.itemHeight);
+		const numberOfVisibleRows = Math.ceil(this.getHeight() / this._config.itemHeight); // exclusive
+		let startIndex = Math.max(0, visibleStartRowIndex * itemsPerRow);
+		let endIndex = startIndex + numberOfVisibleRows * itemsPerRow;
+		return [startIndex, endIndex];
+	}
+
+	private getItemsPerRow() {
+		let itemsPerRow: number;
+		if (this._config.itemWidth <= 0) {
+			itemsPerRow = 1;
+		} else if (this._config.itemWidth < 1) {
+			itemsPerRow = Math.floor(1 / this._config.itemWidth);
+		} else {
+			itemsPerRow = Math.floor(this.$mainDomElement.clientWidth / this._config.itemWidth);
+		}
+		return itemsPerRow;
+	}
+
+	private updateItemPositions() {
+		const itemsPerRow = this.getItemsPerRow();
+		const availableWidth = this.$mainDomElement.clientWidth;
+		const itemWidth = this._config.itemWidth <= 0 ? availableWidth : this._config.itemWidth < 1 ? availableWidth * this._config.itemWidth : this._config.itemWidth;
+		const itemHeight = this._config.itemHeight;
+		for (let i = 0; i < this.renderedIds.length; i++) {
+			const absoluteIndex = i + this.renderedRange[0];
+			const item = this.renderedItems.get(this.renderedIds[i]);
+			const positionX = itemWidth * (absoluteIndex % itemsPerRow);
+			const positionY = itemHeight * Math.floor(absoluteIndex / itemsPerRow);
+			this.updateItemPosition(item, positionX, positionY, itemWidth, itemHeight, absoluteIndex);
+		}
+	}
+
+	private createRenderedItem(item: UiInfiniteItemViewClientRecordConfig): RenderedItem {
+		let $wrapper = document.createElement("div");
+		let $element = parseHtml(this.itemTemplateRenderer.render(item.values));
+		$wrapper.classList.add("item-wrapper");
+		$wrapper.classList.toggle("selected", item.selected);
+		$wrapper.setAttribute("data-id", "" + item.id);
+		$wrapper.appendChild($element);
+		return {
+			item: item,
+			$element: $element,
+			$wrapper: $wrapper,
+			x: -1,
+			y: -1,
+			width: -1,
+			height: -1
+		};
+	}
+
+	private setSelectedItem(item: RenderedItem) {
+		this.renderedItems.forEach(item => item.$wrapper.classList.remove("selected"));
+		if (item != null) {
+			item.$wrapper.classList.add("selected");
+		}
+	}
+
+	private updateItemPosition(renderedItem: RenderedItem, positionX: number, positionY: number, itemWidth: number, itemHeight: number, absoluteIndex: number) {
+		if (positionX !== renderedItem.x
+			|| positionY !== renderedItem.y
+			|| itemWidth !== renderedItem.width
+			|| itemWidth !== renderedItem.height
+		) {
+			renderedItem.$wrapper.style.left = positionX + "px";
+			renderedItem.$wrapper.style.top = positionY + "px";
+			renderedItem.$wrapper.style.width = itemWidth + "px";
+			renderedItem.$wrapper.style.height = itemHeight + "px";
+			renderedItem.x = positionX;
+			renderedItem.y = positionY;
+			renderedItem.width = itemWidth;
+			renderedItem.height = itemHeight;
+		}
+	}
+
+	private rerenderAllItems() {
+		if (this.totalNumberOfRecords != null) { // data was ever received
+			let items = [...this.renderedItems.values()].map(renderdItem => renderdItem.item);
+			this.renderedItems.forEach(renderedItem => renderedItem.$wrapper.remove());
+			this.renderedItems.clear();
+			this.setData(this.renderedRange[0], items.map(item => item.id), items, this.totalNumberOfRecords);
+		}
+	}
+
+	setData(startIndex: number, recordIds: number[], newRecords: UiIdentifiableClientRecordConfig[], totalNumberOfRecords: number): void {
+		this.logger.debug("got data ", startIndex, recordIds.length, newRecords.length, totalNumberOfRecords);
+		this.totalNumberOfRecords = totalNumberOfRecords;
+		this.updateGridHeight();
+		let recordIdsAsSet: Set<number> = new Set(recordIds);
+		const existingItems = [...this.renderedItems.values()];
+		for (let existingItem of existingItems) {
+			if (!recordIdsAsSet.has(existingItem.item.id)) {
+				existingItem.$wrapper.remove();
+				this.renderedItems.delete(existingItem.item.id);
+			}
+		}
+		newRecords.forEach(newRecord => {
+			let renderedItem = this.createRenderedItem(newRecord);
+			this.renderedItems.set(newRecord.id, renderedItem);
+			this.$grid.prepend(renderedItem.$wrapper);
+		});
+		this.renderedIds = recordIds;
+		this.updateItemPositions()
+	}
+
+	private updateGridHeight() {
+		this.$grid.style.height = this._config.itemHeight * Math.ceil(this.totalNumberOfRecords / this.getItemsPerRow()) + "px";
+	}
+
+	@executeWhenFirstDisplayed(true)
+	public onResize(): void {
+		this.logger.debug("onResize ", this.getWidth(), this.getHeight());
+		this.updateGridHeight();
+		this.updateItemPositions();
+		this.requestDataIfNeededDebounced();
+	}
+
+	doGetMainElement(): HTMLElement {
+		return this.$mainDomElement;
+	}
+
+	private updateStyles() {
+		this.$styles.textContent = `
+            .grid-${this._config.id} .item-wrapper {
+                 align-items: ${cssAlignItems[this._config.itemContentVerticalAlignment]};
+                 justify-content: ${cssJustifyContent[this._config.itemContentHorizontalAlignment]};
+            }
+            .grid-${this._config.id} .item-wrapper > * {
+                 flex: ${this._config.itemContentHorizontalAlignment == UiHorizontalElementAlignment.STRETCH ? "1 1 auto" : "0 1 auto"};
+            }`;
+	}
+
+	setItemTemplate(itemTemplate: UiTemplateConfig): void {
+		this.itemTemplateRenderer = this._context.templateRegistry.createTemplateRenderer(itemTemplate);
+		this.rerenderAllItems();
+	}
+
+	setItemWidth(itemWidth: number): void {
+		this._config.itemWidth = itemWidth;
+		this.updateStyles();
+		this.requestDataIfNeeded();
+		this.updateItemPositions();
+	}
+
+	setItemHeight(itemHeight: number): void {
+		this._config.itemHeight = itemHeight;
+		this.updateStyles();
+		this.requestDataIfNeeded();
+		this.updateItemPositions();
+	}
+
+	setHorizontalSpacing(horizontalSpacing: number): void {
+		this._config.horizontalSpacing = horizontalSpacing;
+		this.updateStyles();
+		this.requestDataIfNeeded();
+		this.updateItemPositions();
+	}
+
+	setVerticalSpacing(verticalSpacing: number): void {
+		this.updateStyles();
+		this._config.verticalSpacing = verticalSpacing;
+		this.requestDataIfNeeded();
+		this.updateItemPositions();
+	}
+
+	setItemContentHorizontalAlignment(itemContentHorizontalAlignment: UiHorizontalElementAlignment): void {
+		this._config.itemContentHorizontalAlignment = itemContentHorizontalAlignment;
+		this.updateStyles();
+		this.requestDataIfNeeded();
+		this.updateItemPositions();
+	}
+
+	setItemContentVerticalAlignment(itemContentVerticalAlignment: UiVerticalElementAlignment): void {
+		this._config.itemContentVerticalAlignment = itemContentVerticalAlignment;
+		this.updateStyles();
+		this.requestDataIfNeeded();
+		this.updateItemPositions();
+	}
+
+	setRowHorizontalAlignment(rowHorizontalAlignment: UiItemJustification): void {
+		this._config.rowHorizontalAlignment = rowHorizontalAlignment;
+		this.updateStyles();
+		this.requestDataIfNeeded();
+		this.updateItemPositions();
+	}
+
+	setContextMenuContent(requestId: number, component: UiComponent): void {
+		this.contextMenu.setContent(component, requestId);
+	}
+
+	closeContextMenu(requestId: number): void {
+		this.contextMenu.close(requestId);
+	}
+
+	setSelectionEnabled(selectionEnabled: boolean): any {
+		this._config.selectionEnabled = selectionEnabled;
+		this.getMainElement().classList.toggle("selection-enabled", selectionEnabled);
+	}
+
+	setSelectedRecord(uiRecordId: number): any {
+		let item = this.renderedItems.get(uiRecordId);
+		this.setSelectedItem(item);
+	}
+
+}
+
+TeamAppsUiComponentRegistry.registerComponentClass("UiInfiniteItemView2", UiInfiniteItemView2);
diff --git a/teamapps-client/ts/modules/UiItemView.ts b/teamapps-client/ts/modules/UiItemView.ts
index 3fabca884..c01d05a68 100644
--- a/teamapps-client/ts/modules/UiItemView.ts
+++ b/teamapps-client/ts/modules/UiItemView.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,22 +17,21 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-import * as $ from "jquery";
+
 import {UiItemViewItemGroupConfig} from "../generated/UiItemViewItemGroupConfig";
 import {TeamAppsEvent} from "./util/TeamAppsEvent";
-import {DEFAULT_TEMPLATES, TrivialTreeBox, trivialMatch} from "trivial-components";
-import {UiComponent} from "./UiComponent";
-import {generateUUID, Renderer} from "./Common";
+import {DEFAULT_TEMPLATES, trivialMatch} from "./trivial-components/TrivialCore";
+import {TrivialTreeBox} from "./trivial-components/TrivialTreeBox";
+import {AbstractUiComponent} from "./AbstractUiComponent";
+import {generateUUID, parseHtml, Renderer} from "./Common";
 import {TeamAppsUiContext} from "./TeamAppsUiContext";
 import {UiItemView_ItemClickedEvent, UiItemViewCommandHandler, UiItemViewConfig, UiItemViewEventSource} from "../generated/UiItemViewConfig";
 import {UiItemViewFloatStyle} from "../generated/UiItemViewFloatStyle";
-import {EventFactory} from "../generated/EventFactory";
 import {TeamAppsUiComponentRegistry} from "./TeamAppsUiComponentRegistry";
-import {isGridTemplate, isTextCellTemplate} from "./TemplateRegistry";
+import {isGridTemplate} from "./TemplateRegistry";
 import {UiItemJustification} from "../generated/UiItemJustification";
 import {UiItemViewItemBackgroundMode} from "../generated/UiItemViewItemBackgroundMode";
 import * as log from "loglevel";
-import {UiTextCellTemplateElementConfig} from "../generated/UiTextCellTemplateElementConfig";
 import {UiIdentifiableClientRecordConfig} from "../generated/UiIdentifiableClientRecordConfig";
 import {UiVerticalItemAlignment} from "../generated/UiVerticalItemAlignment";
 
@@ -41,7 +40,8 @@ export var itemCssStringsJustification = {
 	[UiItemJustification.RIGHT]: "flex-end",
 	[UiItemJustification.CENTER]: "center",
 	[UiItemJustification.SPACE_AROUND]: "space-around",
-	[UiItemJustification.SPACE_BETWEEN]: "space-between"
+	[UiItemJustification.SPACE_BETWEEN]: "space-between",
+	[UiItemJustification.SPACE_EVENLY]: "space-evenly"
 };
 export var itemCssStringsAlignItems = {
 	[UiVerticalItemAlignment.TOP]: "flex-start",
@@ -50,11 +50,11 @@ export var itemCssStringsAlignItems = {
 	[UiVerticalItemAlignment.STRETCH]: "stretch"
 };
 
-export class UiItemView extends UiComponent<UiItemViewConfig> implements UiItemViewCommandHandler, UiItemViewEventSource {
+export class UiItemView extends AbstractUiComponent<UiItemViewConfig> implements UiItemViewCommandHandler, UiItemViewEventSource {
 
-	public readonly onItemClicked: TeamAppsEvent<UiItemView_ItemClickedEvent> = new TeamAppsEvent<UiItemView_ItemClickedEvent>(this);
+	public readonly onItemClicked: TeamAppsEvent<UiItemView_ItemClickedEvent> = new TeamAppsEvent<UiItemView_ItemClickedEvent>();
 
-	private $itemView: JQuery;
+	private $itemView: HTMLElement;
 	private groupHeaderTemplateRenderer: Renderer;
 	private groupsByGroupId: { [index: string]: ItemGroup } = {};
 	private filterString: string = "";
@@ -62,12 +62,12 @@ export class UiItemView extends UiComponent<UiItemViewConfig> implements UiItemV
 	constructor(config: UiItemViewConfig, context: TeamAppsUiContext) {
 		super(config, context);
 
-		this.$itemView = $('<div class="UiItemView"></div>');
-		this.$itemView.css("padding", config.verticalPadding + "px " + config.horizontalPadding + "px");
+		this.$itemView = parseHtml('<div class="UiItemView"></div>');
+		this.$itemView.style.padding = config.verticalPadding + "px " + config.horizontalPadding + "px";
 		if (config.groupHeaderTemplate) {
 			this.groupHeaderTemplateRenderer = context.templateRegistry.createTemplateRenderer(config.groupHeaderTemplate, null);
 		}
-		this.$itemView.addClass("background-mode-" + UiItemViewItemBackgroundMode[config.itemBackgroundMode].toLowerCase());
+		this.$itemView.classList.add("background-mode-" + UiItemViewItemBackgroundMode[config.itemBackgroundMode].toLowerCase());
 
 		config.itemGroups.forEach(group => {
 			this.addItemGroup(group);
@@ -76,7 +76,7 @@ export class UiItemView extends UiComponent<UiItemViewConfig> implements UiItemV
 		this.setFilter(config.filter);
 	}
 
-	public getMainDomElement(): JQuery {
+	public doGetMainElement(): HTMLElement {
 		return this.$itemView;
 	}
 
@@ -86,14 +86,17 @@ export class UiItemView extends UiComponent<UiItemViewConfig> implements UiItemV
 		}
 		const itemGroup = this.createItemGroup(itemGroupConfig);
 		this.groupsByGroupId[itemGroupConfig.id] = itemGroup;
-		itemGroup.getMainDomElement().appendTo(this.$itemView);
+		this.$itemView.appendChild(itemGroup.getMainDomElement());
 		return itemGroup;
 	}
 
 	private createItemGroup(itemGroupConfig: UiItemViewItemGroupConfig) {
 		const itemGroup = new ItemGroup(this, this._context, itemGroupConfig, this.groupHeaderTemplateRenderer);
-		itemGroup.onItemClicked.addListener(item => this.onItemClicked.fire(EventFactory.createUiItemView_ItemClickedEvent(this._config.id, itemGroupConfig.id, item.id)));
-		itemGroup.getMainDomElement().css("padding-bottom", this._config.groupSpacing + "px");
+		itemGroup.onItemClicked.addListener(item => this.onItemClicked.fire({
+			groupId: itemGroupConfig.id,
+			itemId: item.id
+		}));
+		itemGroup.getMainDomElement().style.paddingBottom = this._config.groupSpacing + "px";
 		itemGroup.setFilter(this.filterString);
 		return itemGroup;
 	}
@@ -106,13 +109,13 @@ export class UiItemView extends UiComponent<UiItemViewConfig> implements UiItemV
 		}
 		const newGroup = this.createItemGroup(itemGroupConfig);
 		this.groupsByGroupId[itemGroupConfig.id] = newGroup;
-		newGroup.getMainDomElement().insertAfter(oldGroup.getMainDomElement());
-		oldGroup.getMainDomElement().detach();
+		oldGroup.getMainDomElement().parentElement.insertBefore(newGroup.getMainDomElement(), oldGroup.getMainDomElement());
+		oldGroup.getMainDomElement().remove();
 	}
 
 	public removeItemGroup(groupId: string): void {
 		const itemGroup = this.groupsByGroupId[groupId];
-		itemGroup.getMainDomElement().detach();
+		itemGroup.getMainDomElement().remove();
 		delete this.groupsByGroupId[groupId];
 	}
 
@@ -147,6 +150,7 @@ export class UiItemView extends UiComponent<UiItemViewConfig> implements UiItemV
 	}
 
 	public destroy(): void {
+		super.destroy();
 		Object.keys(this.groupsByGroupId).forEach(groupId => {
 			const group = this.groupsByGroupId[groupId];
 			group.destroy()
@@ -155,7 +159,7 @@ export class UiItemView extends UiComponent<UiItemViewConfig> implements UiItemV
 }
 
 class ItemGroup {
-	private $itemGroup: JQuery;
+	private $itemGroup: HTMLElement;
 	private items: UiIdentifiableClientRecordConfig[];
 	private trivialTreeBox: TrivialTreeBox<UiIdentifiableClientRecordConfig>;
 	private itemRenderer: Renderer;
@@ -163,13 +167,13 @@ class ItemGroup {
 
 	private static logger = log.getLogger("UiItemView-ItemGroup");
 
-	public readonly onItemClicked: TeamAppsEvent<UiIdentifiableClientRecordConfig> = new TeamAppsEvent<UiIdentifiableClientRecordConfig>(this);
+	public readonly onItemClicked: TeamAppsEvent<UiIdentifiableClientRecordConfig> = new TeamAppsEvent<UiIdentifiableClientRecordConfig>();
 
 	constructor(private itemView: UiItemView, private context: TeamAppsUiContext, private config: UiItemViewItemGroupConfig, groupHeaderTemplateRenderer: Renderer) {
 		this.items = config.items;
 
 		const groupHtmlId = `item-group-${generateUUID()}`;
-		this.$itemGroup = $('<div class="item-group" id="' + groupHtmlId + '">');
+		this.$itemGroup = parseHtml('<div class="item-group" id="' + groupHtmlId + '">');
 
 		let buttonWidthCssValue;
 		if (config.buttonWidth < 0) {
@@ -182,7 +186,7 @@ class ItemGroup {
 			buttonWidthCssValue = config.buttonWidth + 'px';
 		}
 
-		this.$itemGroup.append(`<style>
+		this.$itemGroup.append(parseHtml(`<style>
             #${groupHtmlId} .tr-tree-entryTree {
                justify-content: ${itemCssStringsJustification[config.itemJustification]};
             }
@@ -190,31 +194,32 @@ class ItemGroup {
                margin: ${config.verticalItemMargin}px ${config.horizontalItemMargin}px;
                width: ${buttonWidthCssValue};
             }
-            </style>`);
-		const $itemGroupHeader = $('<div class="item-group-header">').appendTo(this.$itemGroup);
+            </style>`));
+		const $itemGroupHeader = parseHtml('<div class="item-group-header">');
+		this.$itemGroup.appendChild($itemGroupHeader);
 
 		if (!config.headerVisible) {
-			$itemGroupHeader.addClass("hidden");
+			$itemGroupHeader.classList.add("hidden");
 		}
 		if (groupHeaderTemplateRenderer && config.headerData) {
-			$itemGroupHeader.append(groupHeaderTemplateRenderer.render(config.headerData.values));
+			$itemGroupHeader.append(parseHtml(groupHeaderTemplateRenderer.render(config.headerData.values)));
 		}
 
-		const $itemContainer = $('<div class="item-container">').appendTo(this.$itemGroup);
+		const $itemContainer = parseHtml('<div class="item-container">');
+		this.$itemGroup.appendChild($itemContainer);
 
-		$itemContainer.addClass(UiItemViewFloatStyle[config.floatStyle]);
+		$itemContainer.classList.add(UiItemViewFloatStyle[config.floatStyle]);
 
-		$itemContainer.css({
-			"padding": config.verticalPadding + "px " + config.horizontalPadding + "px"
-		});
+		$itemContainer.style.padding = config.verticalPadding + "px " + config.horizontalPadding + "px";
 
 		this.itemRenderer = context.templateRegistry.createTemplateRenderer(config.itemTemplate);
-		this.trivialTreeBox = new TrivialTreeBox<UiIdentifiableClientRecordConfig>($itemContainer, {
+		this.trivialTreeBox = new TrivialTreeBox<UiIdentifiableClientRecordConfig>({
 			entryRenderingFunction: (entry) => this.itemRenderer.render(entry.values),
 			spinnerTemplate: DEFAULT_TEMPLATES.defaultSpinnerTemplate,
 			entries: config.items,
 			idFunction: entry => entry && entry.id
 		});
+		$itemContainer.append(this.trivialTreeBox.getMainDomElement());
 		this.trivialTreeBox.onSelectedEntryChanged.addListener(() => {
 			this.onItemClicked.fire(this.trivialTreeBox.getSelectedEntry());
 		});
@@ -227,11 +232,11 @@ class ItemGroup {
 
 	private filter() {
 		const matchingElements = this.filterItems(this.filterString);
-		this.trivialTreeBox.updateEntries(matchingElements);
+		this.trivialTreeBox.setEntries(matchingElements);
 		if (matchingElements.length < 100) {
 			this.trivialTreeBox.highlightTextMatches(this.filterString);
 		}
-		this.$itemGroup.toggle(matchingElements.length > 0);
+		this.$itemGroup.classList.toggle("hidden", matchingElements.length === 0);
 	}
 
 	private filterItems(queryString: string) {
@@ -240,14 +245,10 @@ class ItemGroup {
 		}
 
 		let relevantFieldNames: string[];
-		if (isTextCellTemplate(this.itemRenderer.template)) {
-			relevantFieldNames = this.itemRenderer.template.textElements.map((e: UiTextCellTemplateElementConfig) => {
-				return e.propertyName;
-			});
-		} else if (isGridTemplate(this.itemRenderer.template)) {
+		if (isGridTemplate(this.itemRenderer.template)) {
 			relevantFieldNames = this.itemRenderer.template.elements
 				.filter(e => e._type === "UiTextElement")
-				.map(e => e.dataKey);
+				.map(e => e.property);
 		} else {
 			ItemGroup.logger.error("Unknown type of template!");
 		}
diff --git a/teamapps-client/ts/modules/UiLinkButton.ts b/teamapps-client/ts/modules/UiLinkButton.ts
new file mode 100644
index 000000000..9d17d0cbb
--- /dev/null
+++ b/teamapps-client/ts/modules/UiLinkButton.ts
@@ -0,0 +1,64 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+import {TeamAppsUiContext} from "./TeamAppsUiContext";
+import {TeamAppsUiComponentRegistry} from "./TeamAppsUiComponentRegistry";
+import {UiLinkButton_ClickedEvent, UiLinkButtonCommandHandler, UiLinkButtonConfig, UiLinkButtonEventSource} from "../generated/UiLinkButtonConfig";
+import {AbstractUiComponent} from "./AbstractUiComponent";
+import {TeamAppsEvent} from "./util/TeamAppsEvent";
+import {parseHtml} from "./Common";
+import {UiLinkTarget} from "../generated/UiLinkTarget";
+
+export class UiLinkButton extends AbstractUiComponent<UiLinkButtonConfig> implements UiLinkButtonEventSource, UiLinkButtonCommandHandler {
+
+	public readonly onClicked: TeamAppsEvent<UiLinkButton_ClickedEvent> = new TeamAppsEvent();
+	
+	private readonly $main: HTMLAnchorElement;
+
+	constructor(config: UiLinkButtonConfig, context: TeamAppsUiContext) {
+		super(config, context);
+		this.$main = parseHtml(`<a class="UiLinkButton" tabindex="0"></a>`)
+		this.$main.addEventListener("click", ev => {
+			if (this._config.onClickJavaScript != null) {
+				let context = this._context; // make context available in evaluated javascript
+				eval(this._config.onClickJavaScript);
+			}
+			this.onClicked.fire({});
+		});
+		this.update(config);
+	}
+
+
+	protected doGetMainElement(): HTMLElement {
+		return this.$main;
+	}
+
+	public update(config: UiLinkButtonConfig) {
+		this.$main.text = config.text;
+		if (config.url) {
+			this.$main.href= config.url;
+		} else {
+			this.$main.removeAttribute("href");
+		}
+		this.$main.target = '_' + UiLinkTarget[config.target].toLocaleLowerCase();
+
+	}
+}
+
+TeamAppsUiComponentRegistry.registerComponentClass("UiLinkButton", UiLinkButton);
diff --git a/teamapps-client/ts/modules/UiLiveStreamComponent.ts b/teamapps-client/ts/modules/UiLiveStreamComponent.ts
index 524450117..192c164d1 100644
--- a/teamapps-client/ts/modules/UiLiveStreamComponent.ts
+++ b/teamapps-client/ts/modules/UiLiveStreamComponent.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -18,15 +18,15 @@
  * =========================LICENSE_END==================================
  */
 
-import * as $ from "jquery";
+
 import {UiWaitingVideoInfoConfig} from "../generated/UiWaitingVideoInfoConfig";
 import {TeamAppsEvent} from "./util/TeamAppsEvent";
 import {UiHttpLiveStreamPlayer} from "./live-stream/UiHttpLiveStreamPlayer";
 import {UiYoutubePlayer} from "./live-stream/UiYoutubePlayer";
 import {UiLiveStreamComPlayer} from "./live-stream/UiLiveStreamComPlayer";
-import {UiComponent} from "./UiComponent";
+import {AbstractUiComponent} from "./AbstractUiComponent";
 import {TeamAppsUiContext} from "./TeamAppsUiContext";
-import {applyDisplayMode, generateUUID} from "./Common";
+import {applyDisplayMode, css, fadeIn, fadeOut, generateUUID, parseHtml} from "./Common";
 import {LiveStreamPlayer} from "./live-stream/LiveStreamPlayer";
 import {
 	UiLiveStreamComponent_ResultOfRequestInputDeviceAccessEvent,
@@ -39,31 +39,31 @@ import {UiPageDisplayMode} from "../generated/UiPageDisplayMode";
 import {TeamAppsUiComponentRegistry} from "./TeamAppsUiComponentRegistry";
 
 
-export class UiLiveStreamComponent extends UiComponent<UiLiveStreamComponentConfig> implements UiLiveStreamComponentCommandHandler, UiLiveStreamComponentEventSource {
+export class UiLiveStreamComponent extends AbstractUiComponent<UiLiveStreamComponentConfig> implements UiLiveStreamComponentCommandHandler, UiLiveStreamComponentEventSource {
 
-	public readonly onResultOfRequestInputDeviceAccess: TeamAppsEvent<UiLiveStreamComponent_ResultOfRequestInputDeviceAccessEvent> = new TeamAppsEvent<UiLiveStreamComponent_ResultOfRequestInputDeviceAccessEvent>(this);
-	public readonly onResultOfRequestInputDeviceInfo: TeamAppsEvent<UiLiveStreamComponent_ResultOfRequestInputDeviceInfoEvent> = new TeamAppsEvent<UiLiveStreamComponent_ResultOfRequestInputDeviceInfoEvent>(this);
+	public readonly onResultOfRequestInputDeviceAccess: TeamAppsEvent<UiLiveStreamComponent_ResultOfRequestInputDeviceAccessEvent> = new TeamAppsEvent<UiLiveStreamComponent_ResultOfRequestInputDeviceAccessEvent>();
+	public readonly onResultOfRequestInputDeviceInfo: TeamAppsEvent<UiLiveStreamComponent_ResultOfRequestInputDeviceInfoEvent> = new TeamAppsEvent<UiLiveStreamComponent_ResultOfRequestInputDeviceInfoEvent>();
 
-	private $componentWrapper: JQuery;
+	private $componentWrapper: HTMLElement;
 
-	private $backgroundImageContainer: JQuery;
-	private $backgroundImage: JQuery;
+	private $backgroundImageContainer: HTMLElement;
+	private $backgroundImage: HTMLElement;
 
-	private $waitingVideoContainer: JQuery;
+	private $waitingVideoContainer: HTMLElement;
 	private waitingVideoPlayer: HTMLVideoElement;
 	private waitingVideoInfos: UiWaitingVideoInfoConfig[];
 	private currentWaitingVideoIndex: number;
 
-	private $liveStreamPlayerContainer: JQuery;
+	private $liveStreamPlayerContainer: HTMLElement;
 	private hlsPlayer: UiHttpLiveStreamPlayer;
 	private liveStreamComPlayer: UiLiveStreamComPlayer;
 	private youtubePlayer: UiYoutubePlayer;
 
-	private $imageOverlayContainer: JQuery;
-	private $imageOverlay: JQuery;
+	private $imageOverlayContainer: HTMLElement;
+	private $imageOverlay: HTMLElement;
 	private imageOverlayDisplayMode: UiPageDisplayMode;
 
-	private $infoTextContainer: JQuery;
+	private $infoTextContainer: HTMLElement;
 
 	private volume: number;
 
@@ -73,30 +73,30 @@ export class UiLiveStreamComponent extends UiComponent<UiLiveStreamComponentConf
 
 		this.volume = config.volume;
 
-		this.$componentWrapper = $(
+		this.$componentWrapper = parseHtml(
 			`<div id=${config.id}" class="UiLiveStreamComponent" tabindex="-1">
-                    <div class="background-image-container" style="display: none"><img class="background-image"/></div>
-                    <div class="livestream-player-container"></div>
-                    <div class="waiting-video-container" style="display: none"><video class="waiting-video-player"></div>
-                    <div class="image-overlay-container" style="display: none"><img class="image-overlay"/></div>
-                    <div class="info-text-container" style="display: none"></div>
+                    <div class="background-image-container hidden"><img class="background-image"></img></div>
+                    <div class="livestream-player-container hidden"></div>
+                    <div class="waiting-video-container hidden"><video class="waiting-video-player"></video></div>
+                    <div class="image-overlay-container hidden"><img class="image-overlay"></img></div>
+                    <div class="info-text-container hidden"></div>
                 </div>`);
 
-		this.$backgroundImageContainer = this.$componentWrapper.find('.background-image-container');
-		this.$backgroundImage = this.$backgroundImageContainer.find('img');
-		this.$liveStreamPlayerContainer = this.$componentWrapper.find('.livestream-player-container');
-		this.$waitingVideoContainer = this.$componentWrapper.find('.waiting-video-container');
-		this.waitingVideoPlayer = <HTMLVideoElement>this.$waitingVideoContainer.find('video')[0];
-		this.$imageOverlayContainer = this.$componentWrapper.find('.image-overlay-container');
-		this.$imageOverlay = this.$imageOverlayContainer.find('img');
-		this.$infoTextContainer = this.$componentWrapper.find('.info-text-container');
+		this.$backgroundImageContainer = this.$componentWrapper.querySelector<HTMLElement>(':scope .background-image-container');
+		this.$backgroundImage = this.$backgroundImageContainer.querySelector<HTMLElement>(':scope img');
+		this.$liveStreamPlayerContainer = this.$componentWrapper.querySelector<HTMLElement>(':scope .livestream-player-container');
+		this.$waitingVideoContainer = this.$componentWrapper.querySelector<HTMLElement>(':scope .waiting-video-container');
+		this.waitingVideoPlayer = <HTMLVideoElement>this.$waitingVideoContainer.querySelector<HTMLElement>(':scope video');
+		this.$imageOverlayContainer = this.$componentWrapper.querySelector<HTMLElement>(':scope .image-overlay-container');
+		this.$imageOverlay = this.$imageOverlayContainer.querySelector<HTMLElement>(':scope img');
+		this.$infoTextContainer = this.$componentWrapper.querySelector<HTMLElement>(':scope .info-text-container');
 
-		this.$backgroundImage.on("load", () => this.reLayout());
-		this.$imageOverlay.on("load", () => this.reLayout());
+		this.$backgroundImage.addEventListener("load", () => this.onResize());
+		this.$imageOverlay.addEventListener("load", () => this.onResize());
 
 		if (config.backgroundImage) {
-			this.$backgroundImage.attr("src", config.backgroundImage);
-			this.$backgroundImageContainer.show();
+			this.$backgroundImage.setAttribute("src", config.backgroundImage);
+			this.$backgroundImageContainer.classList.remove("hidden");
 		}
 
 		this.waitingVideoPlayer.addEventListener('ended', (e) => {
@@ -105,43 +105,42 @@ export class UiLiveStreamComponent extends UiComponent<UiLiveStreamComponentConf
 		});
 	}
 
-	public getMainDomElement(): JQuery {
+	public doGetMainElement(): HTMLElement {
 		return this.$componentWrapper;
 	}
 
-
-	protected onAttachedToDom(): void {
-		this.reLayout();
+	public onResize(): void {
+		this.applyDisplayModes();
+		this.updatePlayerSizesAndPositions();
 	}
 
-	public onResize(): void {
-		if (this.$backgroundImage.is(":visible")) {
+	private applyDisplayModes() {
+		if ($(this.$backgroundImage).is(":visible")) {
 			applyDisplayMode(this.$backgroundImageContainer, this.$backgroundImage, this._config.backgroundImageDisplayMode);
-			this.$backgroundImage.position({
+			$(this.$backgroundImage).position({
 				my: "center",
 				at: "center",
 				of: this.$backgroundImageContainer
 			});
 		}
-		if (this.$imageOverlayContainer.is(":visible")) {
+		if ($(this.$imageOverlayContainer).is(":visible")) {
 			applyDisplayMode(this.$imageOverlayContainer, this.$imageOverlay, this.imageOverlayDisplayMode);
-			this.$imageOverlay.position({
+			$(this.$imageOverlay).position({
 				my: "center",
 				at: "center",
 				of: this.$imageOverlayContainer
 			});
 		}
-		this.updatePlayerSizesAndPositions();
 	}
 
-	// TESTING: components.liveStreamPlayer.showWaitingVideos([{url:'Bird-HD.mp4', durationInSeconds: 10}, {url:'Leaf-SD.mp4', durationInSeconds: 25}], 20)
+// TESTING: components.liveStreamPlayer.showWaitingVideos([{url:'Bird-HD.mp4', durationInSeconds: 10}, {url:'Leaf-SD.mp4', durationInSeconds: 25}], 20)
 	// components.liveStreamPlayer.stopWaitingVideos()
 	public showWaitingVideos(waitingVideoInfoConfig: UiWaitingVideoInfoConfig[], offsetSeconds: number, stopLiveStream: Boolean) {
 		if (stopLiveStream) {
 			this.stopLiveStream();
 		}
 		this.waitingVideoInfos = waitingVideoInfoConfig;
-		this.$waitingVideoContainer.show();
+		this.$waitingVideoContainer.classList.remove("hidden");
 		this.currentWaitingVideoIndex = 0;
 		let offset = Math.ceil(offsetSeconds);
 
@@ -163,7 +162,7 @@ export class UiLiveStreamComponent extends UiComponent<UiLiveStreamComponentConf
 	}
 
 	private playWaitingVideo(videoUrl: string, offsetSeconds: number) {
-		this.$backgroundImageContainer.fadeOut(1000);
+		fadeOut(this.$backgroundImageContainer);
 		this.waitingVideoPlayer.volume = this.volume;
 		this.waitingVideoPlayer.style.opacity = "1";
 		this.waitingVideoPlayer.src = videoUrl;
@@ -176,24 +175,24 @@ export class UiLiveStreamComponent extends UiComponent<UiLiveStreamComponentConf
 
 	public stopWaitingVideos() {
 		if (this._config.backgroundImage) {
-			this.$backgroundImageContainer.fadeIn(1000);
+			fadeIn(this.$backgroundImageContainer);
 		}
 		$(this.waitingVideoPlayer).animate({volume: 0, opacity: 0}, 1000, 'swing', () => {
 			this.waitingVideoPlayer.pause();
-			this.$waitingVideoContainer.hide();
+			this.$waitingVideoContainer.classList.add("hidden");
 		});
 	}
 
 	public startHttpLiveStream(url: string) {
 		this.stopLiveStream(); // stop all other live streams!
-		this.$backgroundImageContainer.fadeOut(1000);
+		fadeOut(this.$backgroundImageContainer);
 
 		if (!this.hlsPlayer) {
 			this.hlsPlayer = new UiHttpLiveStreamPlayer({
 				_type: "UiHttpLiveStreamPlayer",
 				id: generateUUID()
 			}, this._context);
-			this.$liveStreamPlayerContainer.append(this.hlsPlayer.getMainDomElement());
+			this.$liveStreamPlayerContainer.append(this.hlsPlayer.getMainElement());
 		}
 		this.hlsPlayer.setVolume(this.volume);
 		this.hlsPlayer.play(url);
@@ -203,16 +202,16 @@ export class UiLiveStreamComponent extends UiComponent<UiLiveStreamComponentConf
 
 	public startLiveStreamComLiveStream(url: string) {
 		this.stopLiveStream(); // stop all other live streams!
-		this.$backgroundImageContainer.fadeOut(1000);
+		fadeOut(this.$backgroundImageContainer);
 
 		if (!this.liveStreamComPlayer) {
 			this.liveStreamComPlayer = new UiLiveStreamComPlayer({
 				_type: "UiLiveStreamComPlayer",
 				id: generateUUID()
 			}, this._context);
-			this.$liveStreamPlayerContainer.append(this.liveStreamComPlayer.getMainDomElement())
+			this.$liveStreamPlayerContainer.append(this.liveStreamComPlayer.getMainElement())
 		}
-		this.liveStreamComPlayer.getMainDomElement().show();
+		this.liveStreamComPlayer.getMainElement().classList.remove("hidden");
 		this.liveStreamComPlayer.setVolume(this.volume);
 		this.liveStreamComPlayer.play(url);
 
@@ -222,17 +221,17 @@ export class UiLiveStreamComponent extends UiComponent<UiLiveStreamComponentConf
 	// TESTING: components.liveStreamPlayer.startYouTubeLiveStream("https://www.youtube.com/v/K474y2EpHN4")
 	public startYouTubeLiveStream(url: string) {
 		this.stopLiveStream(); // stop all other live streams!
-		this.$backgroundImageContainer.fadeOut(1000);
+		fadeOut(this.$backgroundImageContainer);
 
 		if (!this.youtubePlayer) {
 			this.youtubePlayer = new UiYoutubePlayer({
 				_type: "UiYoutubePlayer",
 				id: generateUUID()
 			}, this._context);
-			this.$liveStreamPlayerContainer.append(this.youtubePlayer.getMainDomElement());
+			this.$liveStreamPlayerContainer.append(this.youtubePlayer.getMainElement());
 		}
 
-		this.youtubePlayer.getMainDomElement().show();
+		this.youtubePlayer.getMainElement().classList.remove("hidden");
 		this.youtubePlayer.setVolume(this.volume);
 		this.youtubePlayer.play(url);
 
@@ -243,31 +242,27 @@ export class UiLiveStreamComponent extends UiComponent<UiLiveStreamComponentConf
 		this.doWithAllPlayers(p => {
 			p.stop();
 		});
-		this.$backgroundImageContainer.fadeIn(1000);
-		this.reLayout();
-
+		fadeIn(this.$backgroundImageContainer);
 		this.updatePlayerSizesAndPositions();
 	}
 
 	public displayImageOverlay(imageUrl: string, displayMode: UiPageDisplayMode, useVideoAreaAsFrame: Boolean) {
 		this.imageOverlayDisplayMode = displayMode;
-		this.$imageOverlay.attr("src", imageUrl);
-		this.$imageOverlayContainer.show();
-		this.reLayout();
+		this.$imageOverlay.setAttribute("src", imageUrl);
+		this.$imageOverlayContainer.classList.remove("hidden");
 	}
 
 	public removeImageOverlay() {
-		this.$imageOverlayContainer.hide();
+		this.$imageOverlayContainer.classList.add("hidden");
 	}
 
 	public displayInfoTextOverlay(text: string) {
-		this.$infoTextContainer
-			.text(text)
-			.fadeIn(1000);
+		this.$infoTextContainer.textContent = text;
+		fadeIn(this.$infoTextContainer);
 	}
 
 	public removeInfoTextOverlay() {
-		this.$infoTextContainer.fadeOut(1000);
+		fadeOut(this.$infoTextContainer);
 	}
 
 	startCustomEmbeddedLiveStreamPlayer(playerEmbedHtml: string, embedContainerId: string): void {
@@ -296,7 +291,7 @@ export class UiLiveStreamComponent extends UiComponent<UiLiveStreamComponentConf
 		this.doWithAllPlayers(p => {
 			if (p.isPlaying()) {
 				// full size
-				p.getMainDomElement().css({
+				css(p.getMainElement(), {
 					top: "0px",
 					left: "0px",
 					width: "100%",
@@ -304,7 +299,7 @@ export class UiLiveStreamComponent extends UiComponent<UiLiveStreamComponentConf
 				});
 			} else {
 				// hide
-				p.getMainDomElement().css({
+				css(p.getMainElement(), {
 					top: "0px",
 					left: "-100000px",
 					right: "500px",
@@ -314,9 +309,6 @@ export class UiLiveStreamComponent extends UiComponent<UiLiveStreamComponentConf
 		});
 	}
 
-	public destroy(): void {
-		// nothing to do as far as I know...
-	}
 }
 
 TeamAppsUiComponentRegistry.registerComponentClass("UiLiveStreamComponent", UiLiveStreamComponent);
diff --git a/teamapps-client/ts/modules/UiMap.ts b/teamapps-client/ts/modules/UiMap.ts
index 1c0e3b5fa..72ae8b1ff 100644
--- a/teamapps-client/ts/modules/UiMap.ts
+++ b/teamapps-client/ts/modules/UiMap.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,34 +19,68 @@
  */
 ///<reference types="leaflet.heat"/>
 
-import * as $ from "jquery";
-import {UiComponent} from "./UiComponent";
-import {Renderer} from "./Common";
+
+import {AbstractUiComponent} from "./AbstractUiComponent";
+import {generateUUID, parseHtml, Renderer} from "./Common";
 import {TeamAppsUiContext} from "./TeamAppsUiContext";
-import {UiMapPolylineConfig} from "../generated/UiMapPolylineConfig";
+import {createUiMapPolylineConfig, UiMapPolylineConfig} from "../generated/UiMapPolylineConfig";
 import {UiMapMarkerClusterConfig} from "../generated/UiMapMarkerClusterConfig";
 import {UiHeatMapDataConfig} from "../generated/UiHeatMapDataConfig";
-import {UiMap_LocationChangedEvent, UiMap_MapClickedEvent, UiMap_MarkerClickedEvent, UiMap_ZoomLevelChangedEvent, UiMapCommandHandler, UiMapConfig, UiMapEventSource} from "../generated/UiMapConfig";
+import {
+	UiMap_LocationChangedEvent,
+	UiMap_MapClickedEvent,
+	UiMap_MarkerClickedEvent,
+	UiMap_ShapeDrawnEvent,
+	UiMap_ZoomLevelChangedEvent,
+	UiMapCommandHandler,
+	UiMapConfig,
+	UiMapEventSource
+} from "../generated/UiMapConfig";
 import {UiMapType} from "../generated/UiMapType";
-import * as L from "leaflet";
-import {LatLngExpression, Marker, Polyline} from "leaflet";
+import L, {Circle, LatLngBounds, LatLngExpression, Layer, Marker, PathOptions, Polygon, Polyline, Rectangle} from "leaflet";
+import "leaflet.markercluster";
+import "leaflet.heat";
+import "leaflet-draw";
 import {TeamAppsUiComponentRegistry} from "./TeamAppsUiComponentRegistry";
 import {TeamAppsEvent} from "./util/TeamAppsEvent";
-import {executeWhenAttached} from "./util/ExecuteWhenAttached";
+import {executeWhenFirstDisplayed} from "./util/ExecuteWhenFirstDisplayed";
 import {UiTemplateConfig} from "../generated/UiTemplateConfig";
 import {isGridTemplate} from "./TemplateRegistry";
 import {isUiGlyphIconElement, isUiIconElement, isUiImageElement} from "./util/UiGridTemplates";
-import {EventFactory} from "../generated/EventFactory";
 import {UiMapMarkerClientRecordConfig} from "../generated/UiMapMarkerClientRecordConfig";
 import {createUiMapLocationConfig, UiMapLocationConfig} from "../generated/UiMapLocationConfig";
 import {createUiMapAreaConfig} from "../generated/UiMapAreaConfig";
+import {UiMapShapeType} from "../generated/UiMapShapeType";
+import {createUiMapCircleConfig, UiMapCircleConfig} from "../generated/UiMapCircleConfig";
+import {createUiMapPolygonConfig, UiMapPolygonConfig} from "../generated/UiMapPolygonConfig";
+import {createUiMapRectangleConfig, UiMapRectangleConfig} from "../generated/UiMapRectangleConfig";
+import {AbstractUiMapShapeConfig} from "../generated/AbstractUiMapShapeConfig";
+import {UiShapePropertiesConfig} from "../generated/UiShapePropertiesConfig";
+import {UiMapConfigConfig} from "../generated/UiMapConfigConfig";
+
+export function isUiMapCircle(shapeConfig: AbstractUiMapShapeConfig): shapeConfig is UiMapCircleConfig {
+	return shapeConfig._type === "UiMapCircle";
+}
+
+export function isUiMapPolygon(shapeConfig: AbstractUiMapShapeConfig): shapeConfig is UiMapPolygonConfig {
+	return shapeConfig._type === "UiMapPolygon";
+}
+
+export function isUiMapPolyline(shapeConfig: AbstractUiMapShapeConfig): shapeConfig is UiMapPolylineConfig {
+	return shapeConfig._type === "UiMapPolyline";
+}
 
-export class UiMap extends UiComponent<UiMapConfig> implements UiMapCommandHandler, UiMapEventSource {
+export function isUiMapRectangle(shapeConfig: AbstractUiMapShapeConfig): shapeConfig is UiMapRectangleConfig {
+	return shapeConfig._type === "UiMapRectangle";
+}
+
+export class UiMap extends AbstractUiComponent<UiMapConfig> implements UiMapCommandHandler, UiMapEventSource {
 
-	public onZoomLevelChanged: TeamAppsEvent<UiMap_ZoomLevelChangedEvent> = new TeamAppsEvent(this);
-	public onLocationChanged: TeamAppsEvent<UiMap_LocationChangedEvent> = new TeamAppsEvent(this);
-	public onMapClicked: TeamAppsEvent<UiMap_MapClickedEvent> = new TeamAppsEvent(this);
-	public onMarkerClicked: TeamAppsEvent<UiMap_MarkerClickedEvent> = new TeamAppsEvent(this);
+	public readonly onZoomLevelChanged: TeamAppsEvent<UiMap_ZoomLevelChangedEvent> = new TeamAppsEvent();
+	public readonly onLocationChanged: TeamAppsEvent<UiMap_LocationChangedEvent> = new TeamAppsEvent();
+	public readonly onMapClicked: TeamAppsEvent<UiMap_MapClickedEvent> = new TeamAppsEvent();
+	public readonly onMarkerClicked: TeamAppsEvent<UiMap_MarkerClickedEvent> = new TeamAppsEvent();
+	public readonly onShapeDrawn: TeamAppsEvent<UiMap_ShapeDrawnEvent> = new TeamAppsEvent();
 
 	private id: any;
 	private leaflet: L.Map;
@@ -55,100 +89,179 @@ export class UiMap extends UiComponent<UiMapConfig> implements UiMapCommandHandl
 	private heatMapLayer: any;
 	private markerTemplateRenderers: { [templateName: string]: Renderer } = {};
 
-	private $map: JQuery;
-	private polyLinesById: {[lineId: string]: Polyline} = {};
+	private $map: HTMLElement;
+	private shapesById: { [lineId: string]: Layer } = {};
 	private markersByClientId: { [id: number]: Marker } = {};
 
+	private drawCircleFeature: L.Draw.Circle;
+	private drawPolygonFeature: L.Draw.Polygon;
+	private drawPolylineFeature: L.Draw.Polyline;
+	private drawRectangleFeature: L.Draw.Rectangle;
+
 	constructor(config: UiMapConfig, context: TeamAppsUiContext) {
 		super(config, context);
-		this.$map = $('<div class="UiMap">');
+		this.$map = parseHtml('<div class="UiMap">');
 		this.id = this.getId();
 		this.createLeafletMap();
 		Object.keys(config.markerTemplates).forEach(templateName => this.registerTemplate(templateName, config.markerTemplates[templateName]));
-		Object.keys(config.polylines).forEach(lineId => {
-			this.addPolyline(lineId, config.polylines[lineId]);
+		Object.keys(config.shapes).forEach(shapeId => {
+			this.addShape(shapeId, config.shapes[shapeId]);
 		});
 		config.markers.forEach(m => this.addMarker(m));
+		this.setMapMarkerCluster(config.markerCluster);
 	}
 
-	public getMainDomElement(): JQuery {
+	public doGetMainElement(): HTMLElement {
 		return this.$map;
 	}
 
-	@executeWhenAttached()
+	@executeWhenFirstDisplayed()
 	private createLeafletMap(): void {
-        this.leaflet = L.map(this.$map[0], {
+		this.leaflet = L.map(this.$map, {
 			zoomControl: false,
-	        attributionControl: false
+			attributionControl: false,
+			preferCanvas: true
 		});
 
-        let center:LatLngExpression = [51.505, -0.09];
+		let center: LatLngExpression = [51.505, -0.09];
 		if (this._config.mapPosition != null) {
-            center = [this._config.mapPosition.latitude, this._config.mapPosition.longitude];
-        }
+			center = [this._config.mapPosition.latitude, this._config.mapPosition.longitude];
+		}
 		this.leaflet.setView(center, this._config.zoomLevel);
-		this.setMapType(this._config.mapType);
+		if (this._config.mapConfig != null) {
+			this.setMapConfig(this._config.mapConfig);
+		} else {
+			this.setMapType(this._config.mapType);
+		}
 		this.leaflet.on('click', (event) => {
-			this.onMapClicked.fire(EventFactory.createUiMap_MapClickedEvent(this.getId(), createUiMapLocationConfig((event as any).latlng.lat, (event as any).latlng.lng)));
+			this.onMapClicked.fire({
+				location: createUiMapLocationConfig((event as any).latlng.lat, (event as any).latlng.lng)
+			});
 		});
 		this.leaflet.on('zoomend', (event) => {
-			this.onZoomLevelChanged.fire(EventFactory.createUiMap_ZoomLevelChangedEvent(this.getId(), this.leaflet.getZoom()));
+			this.onZoomLevelChanged.fire({
+				zoomLevel: this.leaflet.getZoom()
+			});
 		});
 		this.leaflet.on('moveend', (event) => {
 			const location = this.leaflet.getCenter();
 			const bounds = this.leaflet.getBounds();
-			this.onLocationChanged.fire(EventFactory.createUiMap_LocationChangedEvent(this.getId(), createUiMapLocationConfig(location.lat, location.lng), createUiMapAreaConfig(bounds.getNorth(), bounds.getSouth(), bounds.getWest(), bounds.getEast())));
+			this.onLocationChanged.fire({
+				center: createUiMapLocationConfig(location.lat, location.lng),
+				displayedArea: createUiMapAreaConfig(bounds.getNorth(), bounds.getSouth(), bounds.getWest(), bounds.getEast())
+			});
+		});
+
+		this.drawCircleFeature = new L.Draw.Circle(this.leaflet as L.DrawMap, {});
+		this.drawPolygonFeature = new L.Draw.Polygon(this.leaflet as L.DrawMap, {});
+		this.drawPolylineFeature = new L.Draw.Polyline(this.leaflet as L.DrawMap, {});
+		this.drawRectangleFeature = new L.Draw.Rectangle(this.leaflet as L.DrawMap, {});
+
+		//let layerGroup = L.layerGroup().addTo(this.leaflet);
+
+		this.leaflet.on(L.Draw.Event.CREATED, (e: L.DrawEvents.Created) => {
+			var type = e.layerType,
+				layer = e.layer;
+			let shapeId = generateUUID();
+			this.shapesById[shapeId] = layer;
+			if (type === 'circle') {
+				let circle = layer as Circle;
+				this.onShapeDrawn.fire({
+					shapeId: shapeId,
+					shape: createUiMapCircleConfig({center: toUiLocation(circle.getLatLng()), radius: circle.getRadius()})
+				});
+			} else if (type === 'polygon') {
+				let polygon = layer as Polygon;
+				let path = flattenArray(polygon.getLatLngs()).map(ll => toUiLocation(ll));
+				this.onShapeDrawn.fire({shapeId: shapeId, shape: createUiMapPolygonConfig({path})});
+			} else if (type === 'polyline') {
+				let polyline = layer as Polyline;
+				let path = flattenArray(polyline.getLatLngs()).map(ll => toUiLocation(ll));
+				this.onShapeDrawn.fire({shapeId: shapeId, shape: createUiMapPolylineConfig({path})});
+			} else if (type === 'rectangle') {
+				let rectangle = layer as Rectangle;
+				this.onShapeDrawn.fire({
+					shapeId: shapeId,
+					shape: createUiMapRectangleConfig({
+						l1: toUiLocation(rectangle.getBounds().getNorthWest()),
+						l2: toUiLocation(rectangle.getBounds().getSouthEast())
+					})
+				});
+			}
+			this.leaflet.addLayer(layer);
 		});
 	}
 
-	@executeWhenAttached()
-	public addPolyline(lineId: string, polylineConfig: UiMapPolylineConfig): void {
-		let polyPath = new Array(polylineConfig.path.length);
-		for (let i = 0; i < polylineConfig.path.length; i++) {
-			let loc = polylineConfig.path[i];
-			polyPath[i] = this.convertToLatLng(loc);
-		}
-		this.polyLinesById[lineId] = L.polyline(
-			polyPath, {
-				color: polylineConfig.shapeProperties.strokeColor,
-				fill: false,
-				dashArray: polylineConfig.shapeProperties.strokeDashArray,
-				weight: polylineConfig.shapeProperties.strokeWeight
+	@executeWhenFirstDisplayed()
+	public addShape(shapeId: string, shapeConfig: AbstractUiMapShapeConfig): void {
+		if (isUiMapCircle(shapeConfig)) {
+			this.shapesById[shapeId] = L.circle(
+				this.createLeafletLatLng(shapeConfig.center), shapeConfig.radius, createPathOptions(shapeConfig.shapeProperties)
+			).addTo(this.leaflet);
+		} else if (isUiMapPolygon(shapeConfig)) {
+			let polyPath = new Array(shapeConfig.path.length);
+			for (let i = 0; i < shapeConfig.path.length; i++) {
+				let loc = shapeConfig.path[i];
+				polyPath[i] = this.convertToLatLng(loc);
 			}
-		).addTo(this.leaflet);
+			this.shapesById[shapeId] = L.polygon(polyPath, createPathOptions(shapeConfig.shapeProperties)).addTo(this.leaflet);
+		} else if (isUiMapPolyline(shapeConfig)) {
+			let polyPath = new Array(shapeConfig.path.length);
+			for (let i = 0; i < shapeConfig.path.length; i++) {
+				let loc = shapeConfig.path[i];
+				polyPath[i] = this.convertToLatLng(loc);
+			}
+			this.shapesById[shapeId] = L.polyline(polyPath, createPathOptions(shapeConfig.shapeProperties)).addTo(this.leaflet);
+		} else if (isUiMapRectangle(shapeConfig)) {
+			this.shapesById[shapeId] = L.rectangle(
+				new LatLngBounds(this.createLeafletLatLng(shapeConfig.l1), this.createLeafletLatLng(shapeConfig.l2)),
+				createPathOptions(shapeConfig.shapeProperties)
+			).addTo(this.leaflet);
+		}
 		return;
 	}
 
-	private convertToLatLng(loc: UiMapLocationConfig): LatLngExpression {
-		return [loc.latitude, loc.longitude];
+	@executeWhenFirstDisplayed()
+	removeShape(shapeId: string): void {
+		let shape = this.shapesById[shapeId];
+		if (shape == null) {
+			this.logger.warn(`There is no shape with id ${shapeId}`);
+			return;
+		}
+		this.leaflet.removeLayer(shape);
 	}
 
-	@executeWhenAttached()
-	public addPolylinePoints(lineId: string, points: UiMapLocationConfig[]): void {
-		let polyline = this.polyLinesById[lineId];
-		if (polyline == null) {
-			this.logger.warn(`There is no polyline with id ${lineId}`);
+	@executeWhenFirstDisplayed()
+	updateShape(shapeId: string, shapeConfig: AbstractUiMapShapeConfig): void {
+		let shape = this.shapesById[shapeId];
+		if (shape == null) {
+			this.logger.warn(`There is no shape with id ${shapeId}`);
 			return;
 		}
-		points.forEach(p => polyline.addLatLng(this.convertToLatLng(p)));
+		this.removeShape(shapeId);
+		this.addShape(shapeId, shapeConfig); // todo might get optimized...
 	}
 
-	@executeWhenAttached()
-	public removePolyline(lineId: string): void {
-		let polyline = this.polyLinesById[lineId];
+	@executeWhenFirstDisplayed()
+	public addPolylinePoints(lineId: string, points: UiMapLocationConfig[]): void {
+		let polyline = this.shapesById[lineId] as Polyline;
 		if (polyline == null) {
 			this.logger.warn(`There is no polyline with id ${lineId}`);
 			return;
 		}
-		this.leaflet.removeLayer(polyline);
+		points.forEach(p => polyline.addLatLng(this.convertToLatLng(p)));
 	}
 
-	@executeWhenAttached()
+	private convertToLatLng(loc: UiMapLocationConfig): LatLngExpression {
+		return [loc.latitude, loc.longitude];
+	}
+
+	@executeWhenFirstDisplayed()
 	public addMarker(markerConfig: UiMapMarkerClientRecordConfig): void {
 		this.createMarker(markerConfig).addTo(this.leaflet);
 	}
 
-	@executeWhenAttached()
+	@executeWhenFirstDisplayed()
 	removeMarker(id: number): void {
 		const marker = this.markersByClientId[id];
 		if (marker != null) {
@@ -157,12 +270,26 @@ export class UiMap extends UiComponent<UiMapConfig> implements UiMapCommandHandl
 		delete this.markersByClientId[id];
 	}
 
+	@executeWhenFirstDisplayed()
+	clearMarkers() {
+		Object.keys(this.markersByClientId).forEach(clientId => {
+			this.removeMarker(Number(clientId));
+		});
+	}
+
+	@executeWhenFirstDisplayed()
+	clearShapes() {
+		Object.keys(this.shapesById).forEach(clientId => {
+			this.removeShape(clientId);
+		});
+	}
+
 	private createMarker(markerConfig: UiMapMarkerClientRecordConfig) {
-		let renderer = this.markerTemplateRenderers[markerConfig.templateId] || this._context.templateRegistry.getTemplateRendererByName(markerConfig.templateId);
+		let renderer = this.markerTemplateRenderers[markerConfig.templateId] || this._context.templateRegistry.getTemplateRendererByName(markerConfig.templateId);
 		let iconWidth: number = 0;
 		if (isGridTemplate(renderer.template)) {
-			let iconElement = renderer.template.elements.filter(e => isUiGlyphIconElement(e) || isUiImageElement(e) || isUiIconElement(e))[0];
-			if (!iconElement || !markerConfig.values[iconElement.dataKey]) {
+			let iconElement = renderer.template.elements.filter(e => isUiGlyphIconElement(e) || isUiImageElement(e) || isUiIconElement(e))[0];
+			if (!iconElement || !markerConfig.values[iconElement.property]) {
 				iconWidth = 0;
 			} else if (iconElement) {
 				if (isUiGlyphIconElement(iconElement)) {
@@ -178,6 +305,7 @@ export class UiMap extends UiComponent<UiMapConfig> implements UiMapCommandHandl
 		let divIcon = L.divIcon({
 			html: renderer.render(markerConfig.values),
 			className: "custom-div-icon",
+			iconAnchor: [markerConfig.offsetPixelsX, markerConfig.offsetPixelsY],
 			popupAnchor: [(iconWidth / 2) - 6, -5]
 		} as L.DivIconOptions);
 		let marker = L.marker(new L.LatLng(markerConfig.location.latitude, markerConfig.location.longitude), {
@@ -185,20 +313,35 @@ export class UiMap extends UiComponent<UiMapConfig> implements UiMapCommandHandl
 			icon: divIcon
 		});
 		marker.bindPopup(markerConfig.asString);
-		marker.on("click", event1 => this.onMarkerClicked.fire(EventFactory.createUiMap_MarkerClickedEvent(this.getId(), markerConfig.id)));
+		marker.on("click", event1 => this.onMarkerClicked.fire({
+			markerId: markerConfig.id
+		}));
 		this.markersByClientId[markerConfig.id] = marker;
 		return marker;
 	};
 
-	@executeWhenAttached()
+	@executeWhenFirstDisplayed()
 	public setZoomLevel(zoomLevel: number): void {
 		this.leaflet.setZoom(zoomLevel);
 	}
 
+	public setMapConfig(mapConfig: UiMapConfigConfig): void {
+		const token = this._config.accessToken;
+		let removeLayer = true;
+		let layer = L.tileLayer(mapConfig.urlTemplate, {
+			minZoom: mapConfig.minZoom,
+			maxZoom: mapConfig.maxZoom,
+			attribution: mapConfig.attribution,
+		});
+		if (removeLayer && this.tileLayer) {
+			this.leaflet.removeLayer(this.tileLayer);
+		}
+		this.tileLayer = layer;
+		this.leaflet.addLayer(this.tileLayer);
+	}
+
 	public setMapType(mapType: UiMapType): void {
-		const osmAttr = '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>';
-		const mqTilesAttr = 'Tiles &copy; <a href="http://www.mapquest.com/" target="_blank">MapQuest</a> <img src="http://developer.mapquest.com/content/osm/mq_logo.png" />';
-		const mapBoxAccessToken = 'pk.eyJ1Ijoiam9obi1zbWl0aCIsImEiOiJjaWp3eWhjZDYwbm96djJtNW0zanRrazE2In0.Hi3S9kQ3RNJUuG-PFmMmYw';
+		const token = this._config.accessToken;
 		let layer;
 		let removeLayer = true;
 		switch (mapType) {
@@ -207,54 +350,71 @@ export class UiMap extends UiComponent<UiMapConfig> implements UiMapCommandHandl
 					maxZoom: 9,
 				});
 				break;
+			case UiMapType.INTERNAL_DARK:
+				layer = L.tileLayer('http://localhost/styles/dark-matter/{z}/{x}/{y}.png', {
+					maxZoom: 20,
+				});
+				break;
+			case UiMapType.INTERNAL_DARK_HIGH_RES:
+				layer = L.tileLayer('http://localhost/styles/dark-matter/{z}/{x}/{y}@2x.png', {
+					maxZoom: 20,
+				});
+				break;
 			case UiMapType.MAP_BOX_STREETS:
 				layer = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
 					maxZoom: 18,
 					id: 'mapbox.streets',
-					accessToken: mapBoxAccessToken
-				});
+					accessToken: token
+				} as any);
 				break;
 			case UiMapType.MAP_BOX_STREETS_BASIC:
 				layer = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
 					maxZoom: 18,
 					id: 'mapbox.streets-basic',
-					accessToken: mapBoxAccessToken
-				});
+					accessToken: token
+				} as any);
 				break;
 			case UiMapType.MAP_BOX_STREETS_SATELLITE:
 				layer = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
 					maxZoom: 18,
 					id: 'mapbox.streets-satellite',
-					accessToken: mapBoxAccessToken
-				});
+					accessToken: token
+				} as any);
 				break;
 			case UiMapType.MAP_BOX_SATELLITE:
 				layer = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
 					maxZoom: 18,
 					id: 'mapbox.satellite',
-					accessToken: mapBoxAccessToken
-				});
+					accessToken: token
+				} as any);
 				break;
 			case UiMapType.MAP_BOX_RUN_BIKE_HIKE:
 				layer = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
 					maxZoom: 18,
 					id: 'mapbox.run-bike-hike',
-					accessToken: mapBoxAccessToken
-				});
+					accessToken: token
+				} as any);
+				break;
+			case UiMapType.MAP_BOX_DARK:
+				layer = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
+					maxZoom: 18,
+					id: 'mapbox.dark',
+					accessToken: token
+				} as any);
 				break;
 			case UiMapType.MAP_BOX_OUTDOORS:
 				layer = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
 					maxZoom: 18,
 					id: 'mapbox.outdoors',
-					accessToken: mapBoxAccessToken
-				});
+					accessToken: token
+				} as any);
 				break;
 			case UiMapType.MAP_BOX_EMERALD:
 				layer = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
 					maxZoom: 18,
 					id: 'mapbox.emerald',
-					accessToken: mapBoxAccessToken
-				});
+					accessToken: token
+				} as any);
 				break;
 			case UiMapType.MAP_QUEST_OSM:
 				layer = L.tileLayer('http://otile{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png', {
@@ -276,7 +436,7 @@ export class UiMap extends UiComponent<UiMapConfig> implements UiMapCommandHandl
 					format: 'jpg',
 					time: '',
 					tilematrixset: 'GoogleMapsCompatible_Level'
-				});
+				} as any);
 				break;
 			case UiMapType.OSM_TOPO_MAP:
 				layer = L.tileLayer('http://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
@@ -292,6 +452,31 @@ export class UiMap extends UiComponent<UiMapConfig> implements UiMapCommandHandl
 				});
 				removeLayer = false;
 				break;
+
+			case UiMapType.THUNDERFOREST_DARK:
+				layer = L.tileLayer('https://{s}.tile.thunderforest.com/{id}/{z}/{x}/{y}.png?apikey={accessToken}', {
+					//attribution: '&copy; <a href="http://www.thunderforest.com/">Thunderforest</a>, &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+					maxZoom: 22,
+					id: 'transport-dark',
+					accessToken: token
+				} as any);
+				break;
+			case UiMapType.THUNDERFOREST_TRANSPORT:
+				layer = L.tileLayer('https://{s}.tile.thunderforest.com/{id}/{z}/{x}/{y}.png?apikey={accessToken}', {
+					//attribution: '&copy; <a href="http://www.thunderforest.com/">Thunderforest</a>, &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+					maxZoom: 22,
+					id: 'transport',
+					accessToken: token
+				} as any);
+				break;
+
+			case UiMapType.WIKIMEDIA:
+				layer = L.tileLayer('https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}{r}.png', {
+					//attribution: '<a href="https://wikimediafoundation.org/wiki/Maps_Terms_of_Use">Wikimedia</a>',
+					minZoom: 1,
+					maxZoom: 19,
+				} as any);
+				break;
 		}
 		if (removeLayer && this.tileLayer) {
 			this.leaflet.removeLayer(this.tileLayer);
@@ -300,16 +485,18 @@ export class UiMap extends UiComponent<UiMapConfig> implements UiMapCommandHandl
 		this.leaflet.addLayer(this.tileLayer);
 	}
 
-	@executeWhenAttached()
+	@executeWhenFirstDisplayed()
 	public setLocation(location: UiMapLocationConfig): void {
-		this.leaflet.setView(new L.LatLng(location.latitude, location.longitude), this.leaflet.getZoom());
+		this.leaflet.setView(this.createLeafletLatLng(location), this.leaflet.getZoom());
 	}
 
-	@executeWhenAttached()
+	private createLeafletLatLng(location: UiMapLocationConfig) {
+		return new L.LatLng(location.latitude, location.longitude);
+	}
+
+	@executeWhenFirstDisplayed()
 	public setMapMarkerCluster(clusterConfig: UiMapMarkerClusterConfig): void {
-		if (this.clusterLayer) {
-			this.leaflet.removeLayer(this.clusterLayer);
-		}
+		this.clearMarkerCluster();
 		if (clusterConfig) {
 			this.clusterLayer = (L as any).markerClusterGroup();
 			for (let i = 0; i < clusterConfig.markers.length; i++) {
@@ -320,11 +507,16 @@ export class UiMap extends UiComponent<UiMapConfig> implements UiMapCommandHandl
 		}
 	}
 
-	@executeWhenAttached()
-	public setHeatMap(data: UiHeatMapDataConfig): void {
-		if (this.heatMapLayer) {
-			this.leaflet.removeLayer(this.heatMapLayer);
+	@executeWhenFirstDisplayed()
+	public clearMarkerCluster() {
+		if (this.clusterLayer) {
+			this.leaflet.removeLayer(this.clusterLayer);
 		}
+	}
+
+	@executeWhenFirstDisplayed()
+	public setHeatMap(data: UiHeatMapDataConfig): void {
+		this.clearHeatMap();
 		if (data) {
 			let elements = new Array(data.elements.length);
 			for (let i = 0; i < data.elements.length; i++) {
@@ -340,20 +532,77 @@ export class UiMap extends UiComponent<UiMapConfig> implements UiMapCommandHandl
 		}
 	}
 
+	@executeWhenFirstDisplayed()
+	public clearHeatMap() {
+		if (this.heatMapLayer) {
+			this.leaflet.removeLayer(this.heatMapLayer);
+		}
+	}
+
 	registerTemplate(id: string, template: UiTemplateConfig): void {
 		this.markerTemplateRenderers[id] = this._context.templateRegistry.createTemplateRenderer(template);
 	}
 
+	fitBounds(southWest: UiMapLocationConfig, northEast: UiMapLocationConfig): void {
+		this.leaflet.fitBounds(L.latLngBounds(this.createLeafletLatLng(southWest), this.createLeafletLatLng(northEast)))
+	}
+
 	public onResize(): void {
 		this.leaflet.invalidateSize();
 	}
 
-	public destroy(): void {
-		// nothing to do
+	startDrawingShape(shapeType: UiMapShapeType, shapeProperties: UiShapePropertiesConfig): void {
+		let drawFeature: L.Draw.Feature;
+		switch (shapeType) {
+			case UiMapShapeType.CIRCLE      :
+				drawFeature = this.drawCircleFeature;
+				break;
+			case UiMapShapeType.POLYGON     :
+				drawFeature = this.drawPolygonFeature;
+				break;
+			case UiMapShapeType.POLYLINE    :
+				drawFeature = this.drawPolylineFeature;
+				break;
+			case UiMapShapeType.RECTANGLE   :
+				drawFeature = this.drawRectangleFeature;
+				break;
+		}
+		drawFeature.setOptions({shapeOptions: createPathOptions(shapeProperties)})
+		drawFeature.enable();
 	}
 
-	protected onAttachedToDom(): void {
+	stopDrawingShape(): void {
+		this.drawCircleFeature.disable();
+		this.drawPolygonFeature.disable();
+		this.drawPolylineFeature.disable();
+		this.drawRectangleFeature.disable();
 	}
 }
 
+function createPathOptions(shapePropertiesConfig: UiShapePropertiesConfig): PathOptions {
+	return {
+		color: shapePropertiesConfig.strokeColor,
+		fill: shapePropertiesConfig.fillColor != null,
+		fillColor: shapePropertiesConfig.fillColor,
+		dashArray: shapePropertiesConfig.strokeDashArray,
+		weight: shapePropertiesConfig.strokeWeight
+	};
+}
+
+function toUiLocation(latlng: L.LatLng) {
+	return createUiMapLocationConfig(latlng.lat, latlng.lng);
+}
+
+function flattenArray<T>(arr: T[] | T[][] | T[][][]): T[] {
+	return (arr as any[]).reduce((acc, cur) => {
+		if (Array.isArray(cur)) {
+			acc.push.apply(acc, flattenArray(cur));
+		} else {
+			acc.push(cur);
+		}
+
+		return acc;
+	}, []);
+}
+
 TeamAppsUiComponentRegistry.registerComponentClass("UiMap", UiMap);
diff --git a/teamapps-client/ts/modules/UiMap2.ts b/teamapps-client/ts/modules/UiMap2.ts
new file mode 100644
index 000000000..b2b73b2a7
--- /dev/null
+++ b/teamapps-client/ts/modules/UiMap2.ts
@@ -0,0 +1,974 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+
+import TurfCircle from "@turf/circle";
+import * as d3voronoi from "d3-voronoi";
+import {Feature, Point, Position} from "geojson";
+import maplibregl, {GeoJSONSource, LngLatLike, Marker} from "maplibre-gl";
+import {
+	HexColor,
+	TerraDraw,
+	TerraDrawCircleMode,
+	TerraDrawLineStringMode,
+	TerraDrawPolygonMode,
+	TerraDrawRectangleMode
+} from "terra-draw";
+import {TerraDrawMapLibreGLAdapter} from "terra-draw-maplibre-gl-adapter";
+import {AbstractUiMapShapeChangeConfig} from "../generated/AbstractUiMapShapeChangeConfig";
+import {AbstractUiMapShapeConfig} from "../generated/AbstractUiMapShapeConfig";
+import {UiHeatMapDataConfig} from "../generated/UiHeatMapDataConfig";
+import {UiHeatMapDataElementConfig} from "../generated/UiHeatMapDataElementConfig";
+import {
+	UiMap2_LocationChangedEvent,
+	UiMap2_MapClickedEvent,
+	UiMap2_MarkerClickedEvent,
+	UiMap2_ShapeDrawnEvent,
+	UiMap2_ZoomLevelChangedEvent,
+	UiMap2CommandHandler,
+	UiMap2Config,
+	UiMap2EventSource
+} from "../generated/UiMap2Config";
+import {createUiMapAreaConfig} from "../generated/UiMapAreaConfig";
+import {createUiMapCircleConfig} from "../generated/UiMapCircleConfig";
+import {createUiMapLocationConfig, UiMapLocationConfig} from "../generated/UiMapLocationConfig";
+import {UiMapMarkerClientRecordConfig} from "../generated/UiMapMarkerClientRecordConfig";
+import {UiMapMarkerClusterConfig} from "../generated/UiMapMarkerClusterConfig";
+import {UiMapMarkersConfig} from "../generated/UiMapMarkersConfig";
+import {createUiMapPolygonConfig} from "../generated/UiMapPolygonConfig";
+import {createUiMapPolylineConfig, UiMapPolylineConfig} from "../generated/UiMapPolylineConfig";
+import {createUiMapRectangleConfig} from "../generated/UiMapRectangleConfig";
+import {UiMapShapeType} from "../generated/UiMapShapeType";
+import {UiPolylineAppendConfig} from "../generated/UiPolylineAppendConfig";
+import {UiShapePropertiesConfig} from "../generated/UiShapePropertiesConfig";
+import {UiTemplateConfig} from "../generated/UiTemplateConfig";
+import {AbstractUiComponent} from "./AbstractUiComponent";
+import {parseHtml, Renderer} from "./Common";
+import {TeamAppsUiComponentRegistry} from "./TeamAppsUiComponentRegistry";
+import {TeamAppsUiContext} from "./TeamAppsUiContext";
+import {isUiMapCircle, isUiMapPolygon, isUiMapPolyline, isUiMapRectangle} from "./UiMap";
+import {DeferredExecutor} from "./util/DeferredExecutor";
+import {TeamAppsEvent} from "./util/TeamAppsEvent";
+
+export class UiMap2 extends AbstractUiComponent<UiMap2Config> implements UiMap2EventSource, UiMap2CommandHandler {
+
+	public readonly onZoomLevelChanged: TeamAppsEvent<UiMap2_ZoomLevelChangedEvent> = new TeamAppsEvent({throttlingMode: "throttle", delay: 500});
+	public readonly onLocationChanged: TeamAppsEvent<UiMap2_LocationChangedEvent> = new TeamAppsEvent({throttlingMode: "throttle", delay: 500});
+	public readonly onMapClicked: TeamAppsEvent<UiMap2_MapClickedEvent> = new TeamAppsEvent();
+	public readonly onMarkerClicked: TeamAppsEvent<UiMap2_MarkerClickedEvent> = new TeamAppsEvent();
+	public readonly onShapeDrawn: TeamAppsEvent<UiMap2_ShapeDrawnEvent> = new TeamAppsEvent();
+
+	private readonly $map: HTMLElement;
+	private readonly map: maplibregl.Map;
+	private readonly draw: TerraDraw;
+	private drawingProperties: UiShapePropertiesConfig;
+	private markerTemplateRenderers: { [templateName: string]: Renderer } = {};
+	private markersByClientId: { [id: string]: Marker } = {};
+	private clusterMarkerCache: { [id: string]: Marker } = {};
+	private clusterSourceById: Map<string, Feature> = new Map();
+	private shapesSourceById: Map<string, Feature> = new Map();
+	private displayVoronoiCellsEnabled: boolean = false;
+
+	private deferredExecutor: DeferredExecutor = new DeferredExecutor();
+
+	private readonly fillOpacity = 0.75;
+
+	constructor(config: UiMap2Config, context: TeamAppsUiContext) {
+		super(config, context);
+		this.$map = parseHtml('<div class="UiMap2"/>');
+
+		//this.addDebugView();
+
+		this.map = new maplibregl.Map({
+			container: this.$map,
+			style: config.styleUrl,
+			center: this.convertToLngLatLike(config.mapPosition),
+			hash: false, // don't change the URL!
+			zoom: config.zoomLevel, // starting zoom
+			attributionControl: false,
+		});
+
+		if (config.displayAttributionControl) {
+			this.map.addControl(new maplibregl.AttributionControl());
+		}
+		if (config.displayNavigationControl) {
+			this.map.addControl(new maplibregl.NavigationControl());
+		}
+		this.map.on('load', () => {
+			this.onResize();
+			this.deferredExecutor.ready = true;
+		});
+		this.map.on('error', (errorEvent) => {
+			console.log("Error in map!", errorEvent)
+			this.deferredExecutor.ready = true;
+		});
+
+		this.map.on("zoom", ev => {
+			this.onZoomLevelChanged.fire({zoomLevel: this.map.getZoom()});
+		});
+		this.map.on("move", ev => {
+			const center = this.map.getCenter();
+			const bounds = this.map.getBounds();
+			this.onLocationChanged.fire({
+				center: createUiMapLocationConfig(center.lat, center.lng),
+				displayedArea: createUiMapAreaConfig(bounds.getNorth(), bounds.getSouth(), bounds.getWest(), bounds.getEast())
+			});
+			this.updateVoronoiCells();
+		});
+		this.map.on("click", ev => {
+			this.onMapClicked.fire({location: createUiMapLocationConfig(ev.lngLat.lat, ev.lngLat.lng)});
+		});
+
+		Object.keys(config.markerTemplates).forEach(templateName => this.registerTemplate(templateName, config.markerTemplates[templateName]));
+
+		Object.keys(config.shapes).forEach(shapeId => {
+			this.addShape(shapeId, config.shapes[shapeId]);
+		});
+
+		if (config.markerCluster != null) {
+			this.setMapMarkerCluster(config.markerCluster);
+			// initiate markers that are not part of the cluster
+			const markerIds = config.markerCluster.markers.map(m => m.id);
+			config.markers.filter(m => !markerIds.includes(m.id)).forEach(marker => this.addMarker(marker));
+		} else {
+			config.markers.forEach(marker => this.addMarker(marker));
+		}
+
+		this.setDisplayVoronoiCells(config.displayVoronoiCells ?? false);
+
+		if (config.heatMap != null) {
+			this.setHeatMap(config.heatMap);
+		}
+		const styles = {
+			fillOpacity: this.fillOpacity,
+		};
+		this.draw = new TerraDraw({
+			adapter: new TerraDrawMapLibreGLAdapter({map: this.map}),
+			modes: [
+				new TerraDrawCircleMode({styles}),
+				new TerraDrawRectangleMode({styles}),
+				new TerraDrawPolygonMode({styles}),
+				new TerraDrawLineStringMode(),
+			],
+		});
+
+		this.draw.on('finish', (shapeId: string, ctx: { action: string, mode: string }) => {
+			if (ctx.action === 'draw') {
+				let shape: AbstractUiMapShapeConfig;
+				const drawFeature = this.draw.getSnapshotFeature(shapeId);
+				if (drawFeature) {
+					const positions = this.flattenPositionArray(drawFeature.geometry.coordinates);
+					switch (ctx.mode) {
+						case 'circle':
+							//const src = this.map.getSource('td-polygon') as GeoJSONSource;
+							shape = createUiMapCircleConfig({
+								center: this.calcCenterUiLocation(positions),
+								radius: Number(drawFeature.properties?.radiusKilometers) * 1000
+							});
+							break;
+						case 'rectangle':
+							//const src = this.map.getSource('td-polygon') as GeoJSONSource;
+							shape = createUiMapRectangleConfig({
+								l1: this.convertToUiLocation(positions[0]),
+								l2: this.convertToUiLocation(positions[2]),
+							});
+							break;
+						case 'polygon':
+							//const src = this.map.getSource('td-polygon') as GeoJSONSource;
+							shape = createUiMapPolygonConfig({path: positions.map(this.convertToUiLocation)});
+							break;
+						case 'linestring':
+							//const src = this.map.getSource('td-linestring') as GeoJSONSource;
+							shape = createUiMapPolylineConfig({path: positions.map(this.convertToUiLocation)});
+							break;
+						default:
+							throw new Error(`Unknown draw mode: ${ctx.mode}`);
+					}
+				}
+				shape.shapeProperties = this.drawingProperties;
+				this.onShapeDrawn.fire({shapeId, shape});
+			}
+		});
+	}
+
+	public setStyleUrl(styleUrl: string): void {
+		this.map.setStyle(styleUrl);
+	}
+
+	private createShapeFeatureByConfig(shapeId: string, shapeConfig: AbstractUiMapShapeConfig) {
+		if (isUiMapCircle(shapeConfig)) {
+			return TurfCircle(this.createPointFeature(shapeConfig.center, shapeId), shapeConfig.radius, {
+				units: 'meters',
+				steps: 90
+			});
+		} else if (isUiMapPolyline(shapeConfig)) {
+			return this.createLineStringFeature(shapeConfig, shapeId);
+		} else if (isUiMapPolygon(shapeConfig)) {
+			const path = shapeConfig.path.map(loc => this.convertToPosition(loc));
+			return this.createPolygonFeature(path, shapeId, shapeConfig);
+		} else if (isUiMapRectangle(shapeConfig)) {
+			const path = [
+				this.convertToPosition(shapeConfig.l1),
+				[shapeConfig.l1.longitude, shapeConfig.l2.latitude],
+				this.convertToPosition(shapeConfig.l2),
+				[shapeConfig.l2.longitude, shapeConfig.l1.latitude],
+				this.convertToPosition(shapeConfig.l1) // geojson spec demands that polygons be closed!
+			];
+			return this.createPolygonFeature(path, shapeId, shapeConfig);
+		}
+	}
+
+	public async addShape(shapeId: string, shapeConfig: AbstractUiMapShapeConfig) {
+		return this.deferredExecutor.invokeWhenReady(() => {
+			if (this.map.getSource('shapes') == null) {
+				this.map.addSource('shapes', {
+					type: 'geojson',
+					data: this.createFeatureCollection([]),
+				});
+			}
+			const shapeSrc = this.map.getSource('shapes') as GeoJSONSource;
+			this.shapesSourceById.set(shapeId, this.createShapeFeatureByConfig(shapeId, shapeConfig));
+			shapeSrc.setData(this.createFeatureCollection(Array.from(this.shapesSourceById.values())));
+			const paintProperties = {} as any;
+			if (shapeConfig.shapeProperties.strokeColor != null) {
+				paintProperties['line-color'] = shapeConfig.shapeProperties.strokeColor;
+			}
+			if (shapeConfig.shapeProperties.strokeWeight != null && shapeConfig.shapeProperties.strokeWeight !== 0) {
+				paintProperties['line-width'] = shapeConfig.shapeProperties.strokeWeight;
+			}
+			if (shapeConfig.shapeProperties.strokeDashArray != null) {
+				paintProperties["line-dasharray"] = shapeConfig.shapeProperties.strokeDashArray;
+			}
+			const beforeLayer = this.map.getLayer('markers_cluster') ? 'markers_cluster' : null;
+			if (isUiMapCircle(shapeConfig) || isUiMapPolygon(shapeConfig) || isUiMapRectangle(shapeConfig)) {
+				if (shapeConfig.shapeProperties.fillColor != null) {
+					this.map.addLayer({
+						id: shapeId,
+						source: 'shapes',
+						filter: ['==', 'id', shapeId],
+						type: 'fill',
+						paint: {
+							'fill-color': shapeConfig.shapeProperties.fillColor,
+							'fill-opacity': this.fillOpacity
+						},
+					}, beforeLayer);
+				}
+			}
+			this.map.addLayer({
+				id: shapeId + '-outline',
+				type: 'line',
+				source: 'shapes',
+				filter: ['==', 'id', shapeId],
+				layout: {
+					'line-join': 'round',
+					'line-cap': 'round'
+				},
+				paint: paintProperties
+			}, beforeLayer);
+		});
+	}
+
+	public async updateShape(shapeId: string, shape: AbstractUiMapShapeConfig) {
+		return this.deferredExecutor.invokeWhenReady(async () => {
+			await this.removeShape(shapeId);
+			await this.addShape(shapeId, shape);
+		});
+	}
+
+	public async changeShape(shapeId: string, change: AbstractUiMapShapeChangeConfig) {
+		return this.deferredExecutor.invokeWhenReady(() => {
+			if (isPolyLineAppend(change)) {
+				const source = this.map.getSource('shapes') as GeoJSONSource;
+				const feature = this.shapesSourceById.get(shapeId);
+				if (feature == null || source == null) {
+					return;
+				}
+				const newPositions = change.appendedPath.map(this.convertToPosition);
+				(feature.geometry as GeoJSON.LineString).coordinates = (feature.geometry as GeoJSON.LineString).coordinates.concat(newPositions);
+				this.shapesSourceById.set(shapeId, feature);
+				source.setData(this.createFeatureCollection(Array.from(this.shapesSourceById.values())));
+			}
+		});
+	}
+
+	public async removeShape(shapeId: string) {
+		return this.deferredExecutor.invokeWhenReady(() => {
+			if (this.map.getLayer(shapeId)) {
+				this.map.removeLayer(shapeId);
+			}
+			if (this.map.getLayer(shapeId + '-outline')) {
+				this.map.removeLayer(shapeId + '-outline');
+			}
+			const shapeSrc = this.map.getSource('shapes') as GeoJSONSource;
+			this.shapesSourceById.delete(shapeId);
+			shapeSrc.setData(this.createFeatureCollection(Array.from(this.shapesSourceById.values())));
+			this.removeShapeFromTerraDraw(shapeId);
+		});
+	}
+
+	private removeShapeFromTerraDraw(shapeId: string) {
+		if (this.draw.hasFeature(shapeId)) {
+			this.draw.removeFeatures([shapeId]);
+		}
+	}
+
+	public async clearShapes() {
+		const shapeIds = Array.from(this.shapesSourceById.keys());
+		await Promise.all(shapeIds.map(id => this.removeShape(id)));
+		this.draw.clear();
+	}
+
+	private initializeMarkerCluster(sourceName: string, clusterRadius?: number): void {
+		this.map.addSource(sourceName, {
+			type: 'geojson',
+			data: this.createFeatureCollection([]),
+			cluster: true,
+			clusterRadius: clusterRadius ?? 100
+		});
+		this.map.addLayer({
+			id: sourceName + '_cluster',
+			type: 'circle',
+			source: sourceName,
+			filter: ['has', 'point_count'],
+			paint: {
+				'circle-color': [
+					'step',
+					['get', 'point_count'],
+					'rgb(181, 226, 140)',
+					10,
+					'rgb(241, 211, 87)',
+					100,
+					'rgb(253, 156, 115)',
+				],
+				'circle-stroke-width': 1,
+				'circle-stroke-color': '#fff',
+				'circle-stroke-opacity': 0.2,
+				'circle-radius': 21,
+				'circle-opacity': 0.6,
+			}
+		});
+		this.map.addLayer({
+			id: sourceName + '_cluster_inner',
+			type: 'circle',
+			source: sourceName,
+			filter: ['has', 'point_count'],
+			paint: {
+				'circle-color': [
+					'step',
+					['get', 'point_count'],
+					'rgb(110, 204, 57)',
+					10,
+					'rgb(240, 194, 12)',
+					100,
+					'rgb(241, 128, 23)',
+				],
+				'circle-radius': 14,
+				'circle-opacity': 0.6,
+			}
+		});
+		this.map.addLayer({
+			id: sourceName + '_cluster_count',
+			type: 'symbol',
+			source: sourceName,
+			filter: ['has', 'point_count'],
+			layout: {
+				'text-field': '{point_count_abbreviated}',
+				'text-size': 12,
+			},
+			paint: {
+				'text-halo-color': 'rgba(255,255,255,0.4)',
+				'text-halo-width': 1,
+				'text-halo-blur': 2,
+			}
+		});
+		this.map.on('click', sourceName + '_cluster', async (e) => {
+			const features = this.map.queryRenderedFeatures(e.point, {
+				layers: [sourceName + '_cluster']
+			});
+			const coordinates = (features[0].geometry as Point).coordinates;
+			const props = features[0].properties;
+			const clusterId = props.cluster_id;
+			const zoom = await (this.map.getSource(sourceName) as GeoJSONSource).getClusterExpansionZoom(clusterId);
+			this.map.once('moveend', () => setTimeout(updateMarkers, 100)); // make sure this happens after everything else, so we can actually update the map
+			this.map.easeTo({
+				center: coordinates as LngLatLike,
+				zoom
+			});
+		});
+		this.map.addSource(sourceName + '_spider_legs', {
+			type: 'geojson',
+			data: this.createFeatureCollection([]),
+		});
+		this.map.addLayer({
+			id: sourceName + '_spider_legs',
+			type: 'line',
+			source: sourceName + '_spider_legs',
+			paint: {
+				'line-color': '#fff',
+				'line-width': 2,
+				'line-opacity': 0.8,
+			}
+		});
+
+		this.clearClusterMarkerCache();
+		let markersOnScreen: { [id: string]: Marker } = {};
+
+		const updateMarkers = async () => {
+			const newMarkersOnScreen: { [id: string]: Marker } = {};
+			const srcFeatures = this.map.querySourceFeatures(sourceName);
+			const coordinatesMap = srcFeatures.reduce((map, f) => {
+				const key = (f.geometry as Point).coordinates.join('x');
+				if (!map[key]) {
+					map[key] = {};
+				}
+				f.properties.id = f.properties.cluster_id != null ? "cluster-" + f.properties.cluster_id : f.properties.id;
+				map[key][String(f.properties.id)] = f;
+				return map;
+			}, {} as { [key: string]: { [id: string]: Feature } });
+			const spiderLegFeatures: Feature[] = [];
+			Object.values(coordinatesMap).forEach(features => {
+				const firstFeature = Object.values(features)[0];
+				if (Object.keys(features).length > 1) {
+					const center = (firstFeature.geometry as Point).coordinates as Position;
+					const markers = spiderfyOverlappingMarkers(features);
+					Object.entries(markers).forEach(([id, m]) => {
+						const marker = this.clusterMarkerCache[id] ?? m;
+						this.clusterMarkerCache[id] = newMarkersOnScreen[id] = marker;
+						if (!markersOnScreen[id]) {
+							marker.addTo(this.map);
+						}
+						spiderLegFeatures.push(this.createLineStringFeature({path: [
+							{longitude: marker.getLngLat().lng, latitude: marker.getLngLat().lat},
+							{longitude: center[0], latitude: center[1]}
+						]}));
+					});
+				} else if (!firstFeature.properties.cluster && firstFeature.properties.id != null) {
+					const id = firstFeature.properties.id;
+					const marker = this.clusterMarkerCache[id] ?? this.createMarker(JSON.parse(firstFeature.properties.marker));
+					this.clusterMarkerCache[id] = newMarkersOnScreen[id] = marker;
+					if (!markersOnScreen[id]) {
+						marker.addTo(this.map);
+					}
+				}
+			});
+			for (const id in markersOnScreen) {
+				if (!newMarkersOnScreen[id]) {
+					markersOnScreen[id].remove();
+				}
+			}
+			markersOnScreen = newMarkersOnScreen;
+			(this.map.getSource(sourceName + '_spider_legs') as GeoJSONSource).setData(this.createFeatureCollection(spiderLegFeatures));
+		};
+
+		const spiderfyOverlappingMarkers = (features: { [id: string]: Feature }) => {
+			const leaves = Object.values(features);
+			const centerPx = (leaves[0].geometry as Point).coordinates as Position;
+			const isSpiral = leaves.length > 9;
+			const angleStep = (2 * Math.PI) / Math.min(Math.max(3, leaves.length), 10.7);
+			let legLength = isSpiral ? 0.0001 : 0.0002;
+			const legLengthFactor = 0.000005;
+
+			return Object.entries(features).reduce((markers, feature, i) => {
+				const [id, leaf] = feature;
+				if (leaf.properties.cluster || leaf.properties.marker == null) {
+					return markers;
+				}
+				const angle = (i + 1) * angleStep;
+				const offsetPx = [
+					legLength * Math.sin(angle),
+					legLength * Math.cos(angle) / Math.PI * 2,
+				];
+				const lngLat = [
+					centerPx[0] + offsetPx[0],
+					centerPx[1] + offsetPx[1],
+				] as LngLatLike;
+				if (isSpiral) {
+					legLength += ((Math.PI * 2) * legLengthFactor) / angle;
+				}
+
+				markers[id] = this.createMarker(JSON.parse(leaf.properties.marker), lngLat);
+				return markers;
+			}, {} as { [id: string]: Marker });
+		};
+
+		this.map.on('sourcedata', (e) => {
+			if (e.sourceId === sourceName && e.isSourceLoaded) {
+				updateMarkers();
+			}
+		});
+
+		this.map.on('moveend', updateMarkers);
+	}
+
+	public setMapMarkerCluster(config: UiMapMarkerClusterConfig): void {
+		this.deferredExecutor.invokeWhenReady(() => {
+			if (this.map.getSource('markers') == null) {
+				this.initializeMarkerCluster('markers', config.clusterRadius);
+			} else {
+				(this.map.getSource('markers') as GeoJSONSource).setClusterOptions({
+					cluster: true,
+					clusterRadius: config.clusterRadius ?? 100
+				});
+			}
+			this.clearClusterMarkerCache();
+			this.clusterSourceById = config.markers.reduce((map, m) => map.set(String(m.id), this.createMarkerFeature(m)), new Map());
+			const markerFeatures = Array.from(this.clusterSourceById.values());
+			(this.map.getSource('markers') as GeoJSONSource).setData(this.createFeatureCollection(markerFeatures));
+		});
+	}
+
+	public async addMarkerToCluster(marker: UiMapMarkerClientRecordConfig) {
+		return this.deferredExecutor.invokeWhenReady(async () => {
+			if (this.map.getSource('markers') == null) {
+				this.initializeMarkerCluster('markers');
+			}
+			const source = this.map.getSource('markers') as GeoJSONSource;
+			this.clusterSourceById.set(String(marker.id), this.createMarkerFeature(marker));
+			source.setData(this.createFeatureCollection(Array.from(this.clusterSourceById.values())));
+		});
+	}
+
+	private removeMarkerFromCluster(id?: string) {
+		const source = this.map.getSource('markers') as GeoJSONSource;
+		if (source != null) {
+			if (id == null) {
+				this.clusterSourceById.clear();
+				this.clearClusterMarkerCache();
+				source.setData(this.createFeatureCollection([]));
+			} else if (this.clusterSourceById.delete(id)) {
+				this.clearClusterMarkerCache(id);
+				source.setData(this.createFeatureCollection(Array.from(this.clusterSourceById.values())));
+			}
+		}
+	}
+
+	private clearClusterMarkerCache(id?: string) {
+		if (id != null) {
+			this.clusterMarkerCache[id].remove();
+			delete this.clusterMarkerCache[id];
+		} else {
+			Object.values(this.clusterMarkerCache).forEach(m => m.remove());
+			this.clusterMarkerCache = {};
+		}
+	}
+
+	public async addMarkers(markers: UiMapMarkersConfig) {
+		return Promise.all(markers.markers.map(m => this.addMarker(m)));
+	}
+
+	public async addMarker(markerConfig: UiMapMarkerClientRecordConfig) {
+		return this.deferredExecutor.invokeWhenReady(() => {
+			const marker = this.createMarker(markerConfig);
+			this.addMarkerToMap(String(markerConfig.id), marker);
+		});
+	}
+
+	private addMarkerToMap(id: string, marker: Marker): void {
+		if (this.markersByClientId[id]) {
+			this.markersByClientId[id].remove(); // just in case...
+		}
+		this.markersByClientId[id] = marker;
+		marker.addTo(this.map);
+	}
+
+	public async removeMarker(id: number | string) {
+		return this.deferredExecutor.invokeWhenReady(() => {
+			id = String(id);
+			this.markersByClientId[id]?.remove();
+			delete this.markersByClientId[id];
+			this.removeMarkerFromCluster(id);
+		});
+	}
+
+	public async clearMarkers() {
+		return Promise.all(Object.keys(this.markersByClientId).map(id => this.removeMarker(id)));
+	}
+
+	private createMarker(markerConfig: UiMapMarkerClientRecordConfig, lngLat?: LngLatLike) {
+		const renderer = this.markerTemplateRenderers[markerConfig.templateId] || this._context.templateRegistry.getTemplateRendererByName(markerConfig.templateId);
+		const marker = new Marker({
+			element: parseHtml(renderer.render(markerConfig.values)),
+			anchor: markerConfig.anchor,
+			offset: [markerConfig.offsetPixelsX, markerConfig.offsetPixelsY]
+		});
+		marker.setLngLat(lngLat ?? [markerConfig.location.longitude, markerConfig.location.latitude]);
+		marker.getElement().addEventListener('click', e => {
+			this.onMarkerClicked.fire({markerId: markerConfig.id});
+			e.stopPropagation();
+		});
+		return marker;
+	}
+
+	private async updateVoronoiCells() {
+		return this.deferredExecutor.invokeWhenReady(() => {
+			if (!this.displayVoronoiCellsEnabled) {
+				return;
+			}
+			if (this.map.getSource('voronoi') == null) {
+				this.map.addSource('voronoi', {
+					type: 'geojson',
+					data: this.createFeatureCollection([]),
+				});
+				this.map.addLayer({
+					id: 'voronoi',
+					type: 'line',
+					source: 'voronoi',
+					paint: {
+						'line-color': '#fff',
+						'line-width': 2,
+						'line-opacity': 0.8,
+					}
+				});
+			}
+			const source = this.map.getSource('voronoi') as GeoJSONSource;
+			const bounds = this.map.getBounds();
+			const points = Object.values(this.markersByClientId).map(m => this.createPointFeature(this.convertToUiLocation(m.getLngLat().toArray())));
+			const polygons = Object.values(d3voronoi
+				.voronoi<Feature<Point>>()
+				.x((feature) => feature.geometry.coordinates[0])
+				.y((feature) => feature.geometry.coordinates[1])
+				.extent([
+					[bounds.getWest(), bounds.getSouth()],
+					[bounds.getEast(), bounds.getNorth()],
+				])
+				.polygons(points));
+			source.setData(this.createFeatureCollection(polygons.map((coords) => this.createPolygonFeature(coords))));
+		});
+	}
+
+	public setDisplayVoronoiCells(enable: boolean) {
+		this.displayVoronoiCellsEnabled = enable;
+		if (enable) {
+			this.updateVoronoiCells();
+		} else {
+			const source = this.map.getSource('voronoi') as GeoJSONSource;
+			if (source != null) {
+				source.setData(this.createFeatureCollection([]));
+			}
+		}
+	}
+
+	private initializeHeatMap(sourceName: string, data: UiHeatMapDataConfig): void {
+		this.map.addSource(sourceName, {
+			type: 'geojson',
+			data: this.createFeatureCollection([]),
+		});
+		const paint: any = {};
+		if (data.blur == null || data.blur < 1 || data.blur > 23) {
+			data.blur = 23;
+		}
+		const maxzoom = data.blur;
+		paint['heatmap-opacity'] = [
+			'interpolate',
+			['linear'],
+			['zoom'],
+			data.blur - 1,
+			this.fillOpacity,
+			data.blur, // fade out at zoom level defined by parameter "blur"
+			0
+		];
+		if (data.radius == null) {
+			data.radius = 30;
+		}
+		paint['heatmap-radius'] = [
+			'interpolate',
+			['linear'],
+			['zoom'],
+			0,
+			data.radius / 5,
+			10,
+			data.radius
+		];
+		if (data.maxCount == null || data.maxCount < 1) {
+			data.maxCount = 1;
+		}
+		paint['heatmap-intensity'] = [
+			'interpolate',
+			['linear'],
+			['zoom'],
+			0,
+			0.01 / data.maxCount,
+			data.blur,
+			1 / data.maxCount
+		];
+		paint['heatmap-weight'] = ['get', 'count'];
+		this.map.addLayer({
+			id: sourceName,
+			type: 'heatmap',
+			source: sourceName,
+			maxzoom,
+			paint,
+		}, this.map.getLayer('markers_cluster') ? 'markers_cluster' : null);
+	}
+
+	public setHeatMap(data: UiHeatMapDataConfig): void {
+		this.deferredExecutor.invokeWhenReady(() => {
+			if (this.map.getSource('heatmap') == null) {
+				this.initializeHeatMap('heatmap', data);
+			}
+			const elements = data.elements.map(el => this.createHeatMapDataElementFeature(el));
+			(this.map.getSource('heatmap') as GeoJSONSource).setData(this.createFeatureCollection(elements));
+		});
+	}
+
+	private createDrawShapeStyles(drawMode: string, shapeProperties: UiShapePropertiesConfig): Record<string, number | HexColor> {
+		let styles: any = {
+			fillColor: shapeProperties.fillColor as HexColor,
+			outlineColor: shapeProperties.strokeColor as HexColor,
+			outlineWidth: shapeProperties.strokeWeight,
+		};
+		if (drawMode === 'linestring') {
+			styles = {
+				lineStringColor: shapeProperties.strokeColor as HexColor,
+				lineStringWidth: shapeProperties.strokeWeight,
+			};
+		}
+		if (shapeProperties.strokeColor == null) {
+			delete styles.outlineColor;
+			delete styles.lineStringColor;
+		}
+		if (shapeProperties.strokeWeight == null || shapeProperties.strokeWeight === 0) {
+			delete styles.outlineWidth;
+			delete styles.lineStringWidth;
+		}
+		if (shapeProperties.fillColor == null) {
+			delete styles.fillColor;
+		}
+		return styles;
+	}
+
+	private mapShapeTypeToTerraDrawMode(shapeType: UiMapShapeType): string {
+		switch (shapeType) {
+			case UiMapShapeType.CIRCLE:
+				return 'circle';
+			case UiMapShapeType.RECTANGLE:
+				return 'rectangle';
+			case UiMapShapeType.POLYGON:
+				return 'polygon';
+			case UiMapShapeType.POLYLINE:
+				return 'linestring';
+			default:
+				return 'static'; // just to be sure
+		}
+	}
+
+	public startDrawingShape(shapeType: UiMapShapeType, shapeProperties: UiShapePropertiesConfig): void {
+		this.deferredExecutor.invokeWhenReady(() => {
+			if (this.draw.getMode() !== 'static') {
+				this.stopDrawingShape();
+			}
+			const mode = this.mapShapeTypeToTerraDrawMode(shapeType);
+			const styles = this.createDrawShapeStyles(mode, shapeProperties);
+			this.drawingProperties = shapeProperties;
+			this.draw.start();
+			this.draw.setMode(mode);
+			this.draw.updateModeOptions(mode, {styles});
+		});
+	}
+
+	public stopDrawingShape(): void {
+		this.deferredExecutor.invokeWhenReady(() => {
+			this.draw.setMode('static');
+			//this.draw.stop();
+			this.drawingProperties = null;
+		});
+	}
+
+	public setZoomLevel(zoom: number): void {
+		this.map.zoomTo(zoom);
+	}
+
+	public setLocation(location: UiMapLocationConfig, animationDurationMillis: number, targetZoomLevel: number): void {
+		this.deferredExecutor.invokeWhenReady(() => {
+			this.map.easeTo({
+				center: [location.longitude, location.latitude],
+				duration: animationDurationMillis,
+				zoom: targetZoomLevel
+			});
+		});
+	}
+
+	public fitBounds(southWest: UiMapLocationConfig, northEast: UiMapLocationConfig): void {
+		this.deferredExecutor.invokeWhenReady(() => {
+			this.map.fitBounds([
+				[southWest.longitude, southWest.latitude],
+				[northEast.longitude, northEast.latitude],
+			]);
+		});
+	}
+
+	public registerTemplate(id: string, template: UiTemplateConfig): void {
+		this.markerTemplateRenderers[id] = this._context.templateRegistry.createTemplateRenderer(template);
+	}
+
+	private createFeatureCollection(features: Feature[]): GeoJSON.FeatureCollection {
+		return {
+			type: "FeatureCollection",
+			features
+		};
+	}
+
+	private createPolygonFeature(path: Position[], id?: string, config?: AbstractUiMapShapeConfig): Feature<GeoJSON.Polygon> {
+		if (String(path[0]) !== String(path[path.length - 1])) {
+			path.push(path[0]); // geojson spec demands that polygons be closed!
+		}
+		return {
+			type: 'Feature',
+			geometry: {
+				type: 'Polygon',
+				coordinates: [
+					path
+				]
+			},
+			id,
+			properties: {id, config}
+		};
+	}
+
+	private createPointFeature(config: UiMapLocationConfig, id?: string): Feature<GeoJSON.Point> {
+		return {
+			type: "Feature",
+			id,
+			properties: {id, config},
+			geometry: {
+				type: "Point",
+				coordinates: [
+					config.longitude,
+					config.latitude
+				]
+			}
+		};
+	}
+
+	private createMarkerFeature(m: UiMapMarkerClientRecordConfig): Feature<GeoJSON.Point> {
+		return {
+			type: "Feature",
+			properties: {
+				id: m.id,
+				marker: m
+			},
+			geometry: {
+				type: "Point",
+				coordinates: [
+					m.location.longitude,
+					m.location.latitude
+				]
+			}
+		};
+	}
+
+	private createHeatMapDataElementFeature(c: UiHeatMapDataElementConfig): Feature<GeoJSON.Point> {
+		return {
+			type: "Feature",
+			properties: {
+				count: c.count
+			},
+			geometry: {
+				type: "Point",
+				coordinates: [
+					c.longitude,
+					c.latitude
+				]
+			}
+		};
+	}
+
+	private createLineStringFeature(config: UiMapPolylineConfig, id?: string): Feature<GeoJSON.LineString> {
+		return {
+			type: "Feature",
+			id,
+			properties: {id, config},
+			geometry: {
+				type: "LineString",
+				coordinates: config.path.map(loc => this.convertToPosition(loc))
+			}
+		};
+	}
+
+	private convertToPosition(loc: UiMapLocationConfig): Position {
+		return [loc.longitude, loc.latitude];
+	}
+
+	private convertToLngLatLike(loc: UiMapLocationConfig): LngLatLike {
+		return this.convertToPosition(loc) as LngLatLike;
+	}
+
+	private convertToUiLocation(pos: Position): UiMapLocationConfig {
+		return createUiMapLocationConfig(pos[1], pos[0]);
+	}
+	private flattenPositionArray(arr: Position | Position[] | Position[][] | Position[][][]): Position[] {
+		if (!Array.isArray(arr) || arr.length === 0) {
+			return [];
+		}
+		if (arr.length === 2 && (typeof arr[0] === 'number' || typeof arr[1] === 'number')) {
+			return [arr] as Position[];
+		}
+		return (arr as any[]).reduce((acc, cur) => acc.concat(this.flattenPositionArray(cur)), []);
+	}
+
+	private calcCenterUiLocation(positions: Position[]): UiMapLocationConfig {
+		const lngs = positions.map(m => m[0]);
+		const lats = positions.map(m => m[1]);
+		return createUiMapLocationConfig(
+			(Math.min(...lats) + Math.max(...lats)) / 2,
+			(Math.min(...lngs) + Math.max(...lngs)) / 2,
+		);
+	}
+
+	public doGetMainElement(): HTMLElement {
+		return this.$map;
+	}
+
+	public onResize() {
+		this.map.resize();
+	}
+
+	private addDebugView() {
+		this.deferredExecutor.invokeWhenReady(() => {
+			this.$map.appendChild(parseHtml('<pre style="position: absolute; overflow: auto; background: rgba(255, 255, 255, 0.8); z-index:1000;" />'));
+			this.map.on('mousemove', (e) => {
+				const features = this.map.queryRenderedFeatures(e.point);
+				const displayProperties = [
+					'type',
+					'properties',
+					'id',
+					'layer',
+					'source',
+					'sourceLayer',
+					'state'
+				];
+				const displayFeatures = features.map((feat) => {
+					const displayFeat = {};
+					displayProperties.forEach((prop) => {
+						// @ts-ignore
+						displayFeat[prop] = feat[prop];
+					});
+					return displayFeat;
+				});
+				this.$map.querySelector('pre').innerHTML = JSON.stringify(displayFeatures, null, 2);
+			});
+		});
+	}
+}
+
+function isPolyLineAppend(change: AbstractUiMapShapeChangeConfig): change is UiPolylineAppendConfig {
+	return change._type === "UiPolylineAppend";
+}
+
+TeamAppsUiComponentRegistry.registerComponentClass("UiMap2", UiMap2);
diff --git a/teamapps-client/ts/modules/UiMediaTrackGraph.ts b/teamapps-client/ts/modules/UiMediaTrackGraph.ts
index 41698a968..4952485ef 100644
--- a/teamapps-client/ts/modules/UiMediaTrackGraph.ts
+++ b/teamapps-client/ts/modules/UiMediaTrackGraph.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,14 +19,14 @@
  */
 ///<reference path="../custom-declarations/d3v3.d.ts"/>
 
-import * as $ from "jquery";
+
 import * as d3 from "d3v3";
-import {UiComponent} from "./UiComponent";
+import {AbstractUiComponent} from "./AbstractUiComponent";
 import {TeamAppsEvent} from "./util/TeamAppsEvent";
 import {TeamAppsUiContext} from "./TeamAppsUiContext";
 import {UiMediaTrackGraph_HandleTimeSelectionEvent, UiMediaTrackGraphCommandHandler, UiMediaTrackGraphConfig, UiMediaTrackGraphEventSource} from "../generated/UiMediaTrackGraphConfig";
-import {EventFactory} from "../generated/EventFactory";
 import {TeamAppsUiComponentRegistry} from "./TeamAppsUiComponentRegistry";
+import {parseHtml} from "./Common";
 
 interface DataPoint {
 	date: Date,
@@ -41,13 +41,13 @@ interface Marker {
 	bg: string
 }
 
-export class UiMediaTrackGraph extends UiComponent<UiMediaTrackGraphConfig> implements UiMediaTrackGraphCommandHandler, UiMediaTrackGraphEventSource {
+export class UiMediaTrackGraph extends AbstractUiComponent<UiMediaTrackGraphConfig> implements UiMediaTrackGraphCommandHandler, UiMediaTrackGraphEventSource {
 
-	public readonly onHandleTimeSelection: TeamAppsEvent<UiMediaTrackGraph_HandleTimeSelectionEvent> = new TeamAppsEvent<UiMediaTrackGraph_HandleTimeSelectionEvent>(this);
+	public readonly onHandleTimeSelection: TeamAppsEvent<UiMediaTrackGraph_HandleTimeSelectionEvent> = new TeamAppsEvent<UiMediaTrackGraph_HandleTimeSelectionEvent>();
 
 	private static MARGINS = {top: 5, right: 5, bottom: 15, left: 5};
 
-	private $graph: JQuery;
+	private $graph: HTMLElement;
 	private brush: any;
 	private brushExtent: any;
 	private x: d3.time.Scale<number, number>;
@@ -70,7 +70,7 @@ export class UiMediaTrackGraph extends UiComponent<UiMediaTrackGraphConfig> impl
 
 	constructor(config: UiMediaTrackGraphConfig, context: TeamAppsUiContext) {
 		super(config, context);
-		this.$graph = $('<div class="UiMediaTrackGraph" id="' + this.getId() + '">');
+		this.$graph = parseHtml('<div class="UiMediaTrackGraph" id="' + this.getId() + '">');
 
 		this.trackCount = config.trackCount;
 		var data: DataPoint[] = [];
@@ -89,11 +89,7 @@ export class UiMediaTrackGraph extends UiComponent<UiMediaTrackGraphConfig> impl
 		//this.createAudioPlayer();
 	}
 
-	protected onAttachedToDom() {
-		this.reLayout();
-	}
-
-	public getMainDomElement(): JQuery {
+	public doGetMainElement(): HTMLElement {
 		return this.$graph;
 	}
 
@@ -262,7 +258,6 @@ export class UiMediaTrackGraph extends UiComponent<UiMediaTrackGraphConfig> impl
 		}
 
 		this.cursor = this.markerGroup.append("line")
-			.style("stroke", "black")
 			.attr("x1", this.x(new Date(1000 * 0)))
 			.attr("x2", this.x(new Date(1000 * 0)))
 			.attr("y1", y(0))
@@ -358,13 +353,16 @@ export class UiMediaTrackGraph extends UiComponent<UiMediaTrackGraphConfig> impl
 		let end: number = 0;
 		if (this.brush.empty( )) {
 			if ((d3.event as d3.BaseEvent).sourceEvent) {
-				start = end = this.x.invert(((d3.event as d3.BaseEvent).sourceEvent as MouseEvent).pageX - UiMediaTrackGraph.MARGINS.left - this.getMainDomElement().offset().left).getTime();
+				start = end = this.x.invert(((d3.event as d3.BaseEvent).sourceEvent as MouseEvent).pageX - UiMediaTrackGraph.MARGINS.left - (this.getMainElement().getBoundingClientRect().left + document.body.scrollLeft)).getTime();
 			}
 		} else {
 			start = (<Date><any>this.brush.extent()[0]).getTime();
 			end = (<Date><any>this.brush.extent()[1]).getTime();
 		}
-		this.onHandleTimeSelection.fire(EventFactory.createUiMediaTrackGraph_HandleTimeSelectionEvent(this.getId(), start, end));
+		this.onHandleTimeSelection.fire({
+			start: start,
+			end: end
+		});
 	}
 
 	public setCursorPosition(time: number) {
@@ -376,17 +374,14 @@ export class UiMediaTrackGraph extends UiComponent<UiMediaTrackGraphConfig> impl
 	}
 
 	public onResize(): void {
-		var width = this.$graph.width();
-		var height = this.$graph.height();
+		var width = $(this.$graph).width();
+		var height = $(this.$graph).height();
 
 		if (width > 0 && height > 0 && this.data) {
 			this.createBrush(width, height, this.data, this.markerData, this.trackCount);
 		}
 	}
 
-	public destroy(): void {
-		// nothing to do
-	}
 }
 
 TeamAppsUiComponentRegistry.registerComponentClass("UiMediaTrackGraph", UiMediaTrackGraph);
diff --git a/teamapps-client/ts/modules/UiMobileLayout.ts b/teamapps-client/ts/modules/UiMobileLayout.ts
index 85e150bae..6d167055d 100644
--- a/teamapps-client/ts/modules/UiMobileLayout.ts
+++ b/teamapps-client/ts/modules/UiMobileLayout.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,167 +17,102 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-import * as $ from "jquery";
-import {UiComponentConfig} from "../generated/UiComponentConfig";
+
 import {UiToolbar} from "./tool-container/toolbar/UiToolbar";
-import {UiToolbarConfig} from "../generated/UiToolbarConfig";
 import {UiNavigationBar} from "./UiNavigationBar";
-import {UiNavigationBarConfig} from "../generated/UiNavigationBarConfig";
-import {UiComponent} from "./UiComponent";
+import {AbstractUiComponent} from "./AbstractUiComponent";
 import {TeamAppsUiContext} from "./TeamAppsUiContext";
 import {UiMobileLayoutCommandHandler, UiMobileLayoutConfig} from "../generated/UiMobileLayoutConfig";
 import {TeamAppsUiComponentRegistry} from "./TeamAppsUiComponentRegistry";
-import {UiMobileLayoutAnimation} from "../generated/UiMobileLayoutAnimation";
+import {pageTransition, pageTransitionAnimationPairs, parseHtml} from "./Common";
+import {UiComponent} from "./UiComponent";
+import {UiPageTransition} from "../generated/UiPageTransition";
 
-class View {
-	component: UiComponent<UiComponentConfig>;
-	$container: JQuery;
-}
 
-export class UiMobileLayout extends UiComponent<UiMobileLayoutConfig> implements UiMobileLayoutCommandHandler {
+export class UiMobileLayout extends AbstractUiComponent<UiMobileLayoutConfig> implements UiMobileLayoutCommandHandler {
 
-	private $mainDiv: JQuery;
-	private $toolbarContainer: JQuery;
-	private $contentContainerWrapper: JQuery;
-	private $navBarContainer: JQuery;
+	private $mainDiv: HTMLElement;
+	private $toolbarContainer: HTMLElement;
+	private $contentContainerWrapper: HTMLElement;
+	private $navBarContainer: HTMLElement;
 
 	private toolbar: UiToolbar;
 	private navBar: UiNavigationBar;
-	private views: { [id: string]: View } = {};
-	private currentView: View;
+
+	private content: UiComponent;
+	private $contentContainer: HTMLElement;
 
 	constructor(config: UiMobileLayoutConfig, context: TeamAppsUiContext) {
 		super(config, context);
-		this.$mainDiv = $(`<div id="${config.id}" class="UiMobileLayout">
+		this.$mainDiv = parseHtml(`<div class="UiMobileLayout">
                              <div class="toolbar-container"></div>
                              <div class="content-container-wrapper"></div>
                              <div class="navigation-bar-container"></div>
             </div>`);
 
-		this.$toolbarContainer = this.$mainDiv.find('>.toolbar-container');
-		this.$contentContainerWrapper = this.$mainDiv.find('>.content-container-wrapper');
-		this.$navBarContainer = this.$mainDiv.find('>.navigation-bar-container');
-
-		this.setToolbar(config.toolbar);
-		this.setNavigationBar(config.navigationBar);
+		this.$toolbarContainer = this.$mainDiv.querySelector<HTMLElement>(':scope >.toolbar-container');
+		this.$contentContainerWrapper = this.$mainDiv.querySelector<HTMLElement>(':scope >.content-container-wrapper');
+		this.$navBarContainer = this.$mainDiv.querySelector<HTMLElement>(':scope >.navigation-bar-container');
 
-		if (config.views) {
-			config.views.forEach(v => this.addView(v));
-		}
+		this.setToolbar(config.toolbar as UiToolbar);
+		this.setNavigationBar(config.navigationBar as UiNavigationBar);
 
-		if (config.initialViewId) {
-			this.showView(config.initialViewId, null);
+		if (config.initialView) {
+			this.showView(config.initialView as UiComponent, null);
 		}
 	}
 
-	public addView(viewComponent: UiComponent) {
-		var $container = $(`<div class="content-container">`);
-		this.$contentContainerWrapper.append($container);
-		viewComponent.getMainDomElement().appendTo($container);
-		this.views[viewComponent.getId()] = {
-			component: viewComponent,
-			$container: $container
-		};
-		this.resizeChildren();
-		viewComponent.attachedToDom = this.attachedToDom;
-	}
+	public showView(view: UiComponent, transition: UiPageTransition = null, animationDuration = 0) {
+		if (view === this.content) {
+			return;
+		}
 
-	public removeView(viewId: string) {
-		let view = this.views[viewId];
-		view.$container.detach();
-		delete this.views[viewId];
-	}
+		let oldContent = this.content;
+		let $oldContentContainer = this.$contentContainer;
 
-	public showView(viewId: string, animationType: UiMobileLayoutAnimation) {
-		var newView = this.views[viewId];
+		this.content = view;
 
-		if (newView == null) {
-			this.logger.warn("View with id " + viewId + " not registered!");
-			return;
-		}
-		if (newView === this.currentView) {
-			return;
+		this.$contentContainer = parseHtml(`<div class="content-container"></div>`);
+		if (view != null) {
+			this.$contentContainer.appendChild(view.getMainElement());
 		}
+		this.$contentContainerWrapper.appendChild(this.$contentContainer);
 
-		if (animationType == UiMobileLayoutAnimation.FORWARD) {
-			this.doViewTransition(newView, "forward-offsite", "backward-offsite");
-		} else if (animationType == UiMobileLayoutAnimation.BACKWARD) {
-			this.doViewTransition(newView, "backward-offsite", "forward-offsite");
+		if (transition != null && animationDuration > 0) {
+			pageTransition($oldContentContainer, this.$contentContainer, transition, animationDuration, () => {
+				$oldContentContainer && $oldContentContainer.remove();
+			});
 		} else {
-			newView.$container.addClass("active");
-			this.currentView && this.currentView.$container.removeClass("active");
+			$oldContentContainer && $oldContentContainer.remove();
 		}
-
-		newView.component.attachedToDom = true;
-		newView.component.reLayout();
-
-		this.currentView = newView;
-	}
-
-	private doViewTransition(newView: View, inwardStyle: string, outwardStyle: string) {
-		newView.$container.addClass(inwardStyle + " active")[0].offsetWidth;
-		this.$mainDiv.addClass("transitions")[0].offsetWidth;
-		this.currentView && this.currentView.$container.addClass(outwardStyle);
-		newView.$container.removeClass(inwardStyle);
-
-		let currentViewLocalVar = this.currentView;
-		setTimeout(() => {
-			currentViewLocalVar && currentViewLocalVar.$container.removeClass("active " + outwardStyle);
-			this.$mainDiv.removeClass("transitions");
-		}, 500);
-	};
-
-	public onResize(): void {
-		this.toolbar && this.toolbar.reLayout();
-		this.resizeChildren();
-		this.navBar && this.navBar.reLayout(true);
-	}
-
-	private resizeChildren() {
-		let dimensionCss = this.$contentContainerWrapper.css(["width", "height"]);
-		Object.keys(this.views).forEach(viewId => {
-			let view = this.views[viewId];
-			view.$container.css(dimensionCss);
-			view.component.reLayout();
-		});
 	}
 
 	public setToolbar(toolbar: UiToolbar): void {
 		if (this.toolbar) {
-			this.$toolbarContainer[0].innerHTML = '';
+			this.$toolbarContainer.innerHTML = '';
 		}
 		this.toolbar = toolbar;
-		this.$toolbarContainer.toggleClass('hidden', !toolbar);
+		this.$toolbarContainer.classList.toggle('hidden', !toolbar);
 		if (toolbar) {
-			this.toolbar.getMainDomElement().appendTo(this.$toolbarContainer);
-			this.toolbar.attachedToDom = this.attachedToDom;
+			this.$toolbarContainer.appendChild(this.toolbar.getMainElement());
 		}
 	}
 
 	public setNavigationBar(navBar: UiNavigationBar) {
 		if (this.navBar) {
-			this.$navBarContainer[0].innerHTML = '';
+			this.$navBarContainer.innerHTML = '';
 		}
 		this.navBar = navBar;
-		this.$navBarContainer.toggleClass('hidden', !navBar);
+		this.$navBarContainer.classList.toggle('hidden', !navBar);
 		if (navBar) {
-			this.navBar.getMainDomElement().appendTo(this.$navBarContainer);
-			this.navBar.attachedToDom = this.attachedToDom;
+			this.$navBarContainer.appendChild(this.navBar.getMainElement());
 		}
 	}
 
-	public getMainDomElement(): JQuery {
+	public doGetMainElement(): HTMLElement {
 		return this.$mainDiv;
 	}
 
-	protected onAttachedToDom() {
-		if (this.toolbar) this.toolbar.attachedToDom = true;
-		if (this.navBar) this.navBar.attachedToDom = true;
-		if (this.currentView) this.currentView.component.attachedToDom = true;
-	}
-
-	public destroy(): void {
-	}
 }
 
 TeamAppsUiComponentRegistry.registerComponentClass("UiMobileLayout", UiMobileLayout);
diff --git a/teamapps-client/ts/modules/UiNavigationBar.ts b/teamapps-client/ts/modules/UiNavigationBar.ts
index 9b6483c0c..eb244543b 100644
--- a/teamapps-client/ts/modules/UiNavigationBar.ts
+++ b/teamapps-client/ts/modules/UiNavigationBar.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,12 +17,12 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-import * as $ from "jquery";
+
 import {TeamAppsEvent} from "./util/TeamAppsEvent";
 import {UiComponentConfig} from "../generated/UiComponentConfig";
 import {UiNavigationBarButtonConfig} from "../generated/UiNavigationBarButtonConfig";
-import {UiComponent} from "./UiComponent";
-import {ClickOutsideHandle, doOnceOnClickOutsideElement, Renderer} from "./Common";
+import {AbstractUiComponent} from "./AbstractUiComponent";
+import {ClickOutsideHandle, doOnceOnClickOutsideElement, outerHeightIncludingMargins, parseHtml, Renderer} from "./Common";
 import {TeamAppsUiContext} from "./TeamAppsUiContext";
 import {
 	UiNavigationBar_ButtonClickedEvent,
@@ -31,109 +31,114 @@ import {
 	UiNavigationBarConfig,
 	UiNavigationBarEventSource
 } from "../generated/UiNavigationBarConfig";
-import {EventFactory} from "../generated/EventFactory";
 import {TeamAppsUiComponentRegistry} from "./TeamAppsUiComponentRegistry";
-import {createUiColorCssString} from "./util/CssFormatUtil";
-import {UiColorConfig} from "../generated/UiColorConfig";
+import {UiComponent} from "./UiComponent";
+import {UiMultiProgressDisplay} from "./UiDefaultMultiProgressDisplay";
 
 interface Button {
 	data: any;
-	$button: JQuery;
+	$button: HTMLElement;
 }
 
-export class UiNavigationBar extends UiComponent<UiNavigationBarConfig> implements UiNavigationBarCommandHandler, UiNavigationBarEventSource {
+export class UiNavigationBar extends AbstractUiComponent<UiNavigationBarConfig> implements UiNavigationBarCommandHandler, UiNavigationBarEventSource {
 
-	public readonly onButtonClicked: TeamAppsEvent<UiNavigationBar_ButtonClickedEvent> = new TeamAppsEvent(this);
-	public readonly onFanoutClosedDueToClickOutsideFanout: TeamAppsEvent<UiNavigationBar_FanoutClosedDueToClickOutsideFanoutEvent> = new TeamAppsEvent(this);
+	public readonly onButtonClicked: TeamAppsEvent<UiNavigationBar_ButtonClickedEvent> = new TeamAppsEvent();
+	public readonly onFanoutClosedDueToClickOutsideFanout: TeamAppsEvent<UiNavigationBar_FanoutClosedDueToClickOutsideFanoutEvent> = new TeamAppsEvent();
 
-	private $bar: JQuery;
-	private $buttonsWrapper: JQuery;
+	private $bar: HTMLElement;
+	private $buttonsContainer: HTMLElement;
 	private buttons: { [id: string]: Button } = {};
 	private buttonTemplateRenderer: Renderer;
-	private $fanOutContainerWrapper: JQuery;
-	private $fanOutContainer: JQuery;
+	private $fanOutContainerWrapper: HTMLElement;
+	private $fanOutContainer: HTMLElement;
 	private fanOutComponents: UiComponent[] = [];
 	private currentFanOutComponent: UiComponent<UiComponentConfig>;
 	private fanoutClickOutsideHandle: ClickOutsideHandle;
+	private multiProgressDisplay: UiMultiProgressDisplay;
+	private $multiProgressDisplayContainer: HTMLElement;
 
 	constructor(config: UiNavigationBarConfig, context: TeamAppsUiContext) {
 		super(config, context);
 
 		this.buttonTemplateRenderer = context.templateRegistry.createTemplateRenderer(config.buttonTemplate, null);
 
-		this.$bar = $(`<div class="UiNavigationBar">
+		this.$bar = parseHtml(`<div class="UiNavigationBar">
                 <div class="fan-out-container-wrapper teamapps-blurredBackgroundImage">
-                    <div class="fan-out-container"/>
+                    <div class="fan-out-container"></div>
                 </div>
-                <div class="buttons-wrapper"/>
+                <div class="buttons-container">
+                	<div class="progress-container"></div>
+				</div>
             </div>`);
-		this.$buttonsWrapper = this.$bar.find(">.buttons-wrapper");
-		this.$fanOutContainerWrapper = this.$bar.find(">.fan-out-container-wrapper");
-		this.$fanOutContainer = this.$fanOutContainerWrapper.find(">.fan-out-container");
+		this.$buttonsContainer = this.$bar.querySelector<HTMLElement>(":scope >.buttons-container");
+		this.$multiProgressDisplayContainer = this.$buttonsContainer.querySelector<HTMLElement>(":scope > .progress-container");
+		this.$fanOutContainerWrapper = this.$bar.querySelector<HTMLElement>(":scope >.fan-out-container-wrapper");
+		this.$fanOutContainer = this.$fanOutContainerWrapper.querySelector<HTMLElement>(":scope >.fan-out-container");
+
 		this.setBackgroundColor(config.backgroundColor);
 		this.setBorderColor(config.borderColor);
 		if (config.fanOutComponents) {
-			config.fanOutComponents.forEach(c => this.addFanOutComponent(c));
+			config.fanOutComponents.forEach(c => this.addFanOutComponent(c as UiComponent));
 		}
 
-		config.buttons.forEach(button => this.addButton(button));
+		this.setMultiProgressDisplay(config.multiProgressDisplay as UiMultiProgressDisplay);
 
-		this.reLayout();
+		config.buttons.forEach(button => this.addButton(button));
 	}
 
-	public setBackgroundColor(color: UiColorConfig) {
-		this.$buttonsWrapper.css("background-color", createUiColorCssString(color));
+	public setBackgroundColor(color: string) {
+		this.$buttonsContainer.style.backgroundColor = color;
 	}
 
-	public setBorderColor(color: UiColorConfig) {
-		this.$bar.css("border-color", createUiColorCssString(color));
+	public setBorderColor(color: string) {
+		this.$bar.style.borderColor = color;
 	}
 
-	public getMainDomElement(): JQuery {
+	public doGetMainElement(): HTMLElement {
 		return this.$bar;
 	}
 
-	protected onAttachedToDom() {
-		// do nothing.
-	}
-
 	setButtons(buttons: UiNavigationBarButtonConfig[]): void {
-		this.$buttonsWrapper[0].innerHTML = '';
+		this.$buttonsContainer.innerHTML = '';
 		this.buttons = {};
 		buttons.forEach(button => this.addButton(button));
 	}
 
 	private addButton(button: UiNavigationBarButtonConfig) {
-		let $button = $(`<div class="nav-button-wrapper"><div class="nav-button-inner-wrapper"></div></div>`);
-		let $innerWrapper = $button.find(".nav-button-inner-wrapper");
-		$innerWrapper.append(this.buttonTemplateRenderer.render(button.data));
-		$button.click(() => {
-			this.onButtonClicked.fire(EventFactory.createUiNavigationBar_ButtonClickedEvent(this.getId(), button.id, this.currentFanOutComponent && this.currentFanOutComponent.getId()));
+		let $button = parseHtml(`<div class="nav-button-wrapper"><div class="nav-button-inner-wrapper"></div></div>`);
+		let $innerWrapper = $button.querySelector<HTMLElement>(":scope .nav-button-inner-wrapper");
+		$innerWrapper.appendChild(parseHtml(this.buttonTemplateRenderer.render(button.data)));
+		$button.addEventListener("click", () => {
+			this.onButtonClicked.fire({
+				buttonId: button.id,
+				visibleFanOutComponentId: this.currentFanOutComponent && (this.currentFanOutComponent as AbstractUiComponent).getId()
+			});
 		});
 		this.buttons[button.id] = {
 			data: button.data,
 			$button: $button
 		};
 		this.setButtonVisible(button.id, button.visible);
-		this.$buttonsWrapper.append($button);
+		this.$buttonsContainer.append($button);
 	}
 
 	public setButtonVisible(buttonId: string, visible: boolean) {
 		let button = this.buttons[buttonId];
 		if (button) {
-			button.$button.toggleClass("hidden", !visible);
+			button.$button.classList.toggle("hidden", !visible);
 		}
 	}
 
 	public addFanOutComponent(fanOutComponent: UiComponent) {
 		if (this.fanOutComponents.indexOf(fanOutComponent) === -1) {
-			fanOutComponent.getMainDomElement().addClass("pseudo-hidden").appendTo(this.$fanOutContainer);
+			fanOutComponent.getMainElement().classList.add("pseudo-hidden");
+			this.$fanOutContainer.appendChild(fanOutComponent.getMainElement());
 			this.fanOutComponents.push(fanOutComponent);
 		}
 	};
 
 	public removeFanOutComponent(fanOutComponent: UiComponent) {
-		fanOutComponent.getMainDomElement().detach();
+		fanOutComponent.getMainElement().remove();
 		this.fanOutComponents = this.fanOutComponents.filter(c => c !== fanOutComponent);
 	};
 
@@ -141,16 +146,15 @@ export class UiNavigationBar extends UiComponent<UiNavigationBarConfig> implemen
 		this.addFanOutComponent(fanOutComponent);
 		const showFanout = () => {
 			this.currentFanOutComponent = fanOutComponent;
-			this.fanOutComponents.forEach(c => c.getMainDomElement().addClass("pseudo-hidden"));
-			this.currentFanOutComponent.getMainDomElement().removeClass("pseudo-hidden");
-			this.currentFanOutComponent.attachedToDom = true;
-			this.$fanOutContainerWrapper.addClass("open");
-			this.$fanOutContainerWrapper.css("bottom", this.$bar.outerHeight(true) + "px");
-			this.$fanOutContainerWrapper.slideDown(200);
+			this.fanOutComponents.forEach(c => c.getMainElement().classList.add("pseudo-hidden"));
+			this.currentFanOutComponent.getMainElement().classList.remove("pseudo-hidden");
+			this.$fanOutContainerWrapper.classList.add("open");
+			this.$fanOutContainerWrapper.style.bottom = outerHeightIncludingMargins(this.$bar) + "px";
+			$(this.$fanOutContainerWrapper).slideDown(200);
 			this.onResize();
-			this.fanoutClickOutsideHandle = doOnceOnClickOutsideElement(this.getMainDomElement().add(this.$fanOutContainerWrapper), e => {
+			this.fanoutClickOutsideHandle = doOnceOnClickOutsideElement([this.getMainElement(), this.$fanOutContainerWrapper], e => {
 				this.hideFanOutComponent();
-				this.onFanoutClosedDueToClickOutsideFanout.fire(EventFactory.createUiNavigationBar_FanoutClosedDueToClickOutsideFanoutEvent(this.getId()));
+				this.onFanoutClosedDueToClickOutsideFanout.fire({});
 			});
 		};
 		if (this.currentFanOutComponent) {
@@ -162,38 +166,42 @@ export class UiNavigationBar extends UiComponent<UiNavigationBarConfig> implemen
 	}
 
 	public hideFanOutComponent() {
-		this.$fanOutContainerWrapper.removeClass("open");
-		this.$fanOutContainerWrapper.slideUp(200);
+		this.$fanOutContainerWrapper.classList.remove("open");
+		$(this.$fanOutContainerWrapper).slideUp(200);
 		this.currentFanOutComponent = null;
 		this.fanoutClickOutsideHandle.cancel();
 	}
 
 	public onResize(): void {
-		if (this.$fanOutContainerWrapper.is(".open")) {
+		if (this.$fanOutContainerWrapper.classList.contains("open")) {
 			let $clippingParent = this.findNearestParentWithHiddenVerticalOverflow(this.$fanOutContainerWrapper);
-			let maxFanOutHeight = this.$bar.offset().top - $clippingParent.offset().top;
+			
+			let maxFanOutHeight = this.$bar.offsetTop - $clippingParent.offsetTop;
 			if (maxFanOutHeight <= 0) {
 				this.logger.warn("Fanout height is 0 due to clipping parent component...");
 			}
-			this.$fanOutContainerWrapper.css("max-height", maxFanOutHeight + "px")[0].offsetHeight;
-			this.currentFanOutComponent && this.currentFanOutComponent.reLayout();
+			this.$fanOutContainerWrapper.style.maxHeight = maxFanOutHeight + "px";
+			this.$fanOutContainerWrapper.offsetHeight; // reflow
 		}
 	}
 
-	private findNearestParentWithHiddenVerticalOverflow(child: JQuery): JQuery {
-		let el = child[0];
+	private findNearestParentWithHiddenVerticalOverflow(child: HTMLElement): HTMLElement {
+		let el = child;
 		while (el != null) {
 			el = el.parentElement;
-			if ($(el).css("overflow-y") !== "visible") {
+			if (getComputedStyle(el).overflowY !== "visible") {
 				break;
 			}
 		}
-		return $(el);
+		return el;
 	}
 
-	public destroy(): void {
-		// do nothing
+	public setMultiProgressDisplay(multiProgressDisplay: UiMultiProgressDisplay): void {
+		this.multiProgressDisplay && this.multiProgressDisplay.getMainElement().remove();
+		this.multiProgressDisplay = multiProgressDisplay;
+		multiProgressDisplay && this.$multiProgressDisplayContainer.appendChild(multiProgressDisplay.getMainElement());
 	}
+
 }
 
 TeamAppsUiComponentRegistry.registerComponentClass("UiNavigationBar", UiNavigationBar);
diff --git a/teamapps-client/ts/modules/UiNetworkGraph.ts b/teamapps-client/ts/modules/UiNetworkGraph.ts
index aaffb6885..2538fad92 100644
--- a/teamapps-client/ts/modules/UiNetworkGraph.ts
+++ b/teamapps-client/ts/modules/UiNetworkGraph.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,132 +19,117 @@
  */
 ///<reference path="../custom-declarations/d3v3.d.ts"/>
 
-import * as $ from "jquery";
-import * as d3 from "d3v3";
-import {UiComponent} from "./UiComponent";
+
+import * as d3 from "d3";
+import {ForceLink, Simulation, SimulationLinkDatum, ZoomBehavior} from "d3";
+import {AbstractUiComponent} from "./AbstractUiComponent";
 import {TeamAppsUiContext} from "./TeamAppsUiContext";
-import {UiNetworkGraphConfig} from "../generated/UiNetworkGraphConfig";
-import {EventFactory} from "../generated/EventFactory";
+import {
+	UiNetworkGraph_NodeClickedEvent,
+	UiNetworkGraph_NodeDoubleClickedEvent,
+	UiNetworkGraph_NodeExpandedOrCollapsedEvent,
+	UiNetworkGraphCommandHandler,
+	UiNetworkGraphConfig,
+	UiNetworkGraphEventSource
+} from "../generated/UiNetworkGraphConfig";
 import {TeamAppsUiComponentRegistry} from "./TeamAppsUiComponentRegistry";
+import {parseHtml} from "./Common";
+import {UiNetworkNode_ExpandState, UiNetworkNodeConfig} from "../generated/UiNetworkNodeConfig";
+import {executeWhenFirstDisplayed} from "./util/ExecuteWhenFirstDisplayed";
+import {TeamAppsEvent} from "./util/TeamAppsEvent";
+import {patternify} from "./UiTreeGraph";
+import {UiTreeGraphNodeImage_CornerShape} from "../generated/UiTreeGraphNodeImageConfig";
+import {UiNetworkLinkConfig} from "../generated/UiNetworkLinkConfig";
 
-export class UiNetworkGraph extends UiComponent<UiNetworkGraphConfig> {
+export class UiNetworkGraph extends AbstractUiComponent<UiNetworkGraphConfig> implements UiNetworkGraphCommandHandler, UiNetworkGraphEventSource {
 
-	private $graph: JQuery;
-	private svg: any;
-	private svgContainer: any;
-	private rect: any;
-	private container: any;
-	private node: any;
-	private link: any;
-	private force: any;
-	private zoom: any;
-	private linkedByIndex:any = {};
-	private toggle = 0;
+	public readonly onNodeClicked: TeamAppsEvent<UiNetworkGraph_NodeClickedEvent> = new TeamAppsEvent();
+	public readonly onNodeDoubleClicked: TeamAppsEvent<UiNetworkGraph_NodeDoubleClickedEvent> = new TeamAppsEvent();
 
-	constructor(config: UiNetworkGraphConfig, context: TeamAppsUiContext) {
-		super(config, context);
-		this.$graph = $('<div class="UiNetworkGraph" id="' + this.getId() + '">');
+	public readonly onNodeExpandedOrCollapsed: TeamAppsEvent<UiNetworkGraph_NodeExpandedOrCollapsedEvent> = new TeamAppsEvent();
 
-		var width = this.$graph.width();
-		var height = this.$graph.height();
+	private $graph: HTMLElement;
+	private svg: d3.Selection<SVGElement, any, null, undefined>;
+	private pointerEventsRect: d3.Selection<SVGRectElement, any, null, undefined>;
+	private container: d3.Selection<SVGGElement, any, null, undefined>;
+	private linksContainer: d3.Selection<SVGGElement, any, null, undefined>;
+	private zoom: ZoomBehavior<Element, unknown>;
 
-		this.logger.debug("width:" + width + ", height:" + height);
-		if (width < 100) {
-			width = 300;
-		}
-		if (height < 100) {
-			height = 300;
-		}
+	private simulation: Simulation<UiNetworkNodeConfig & any, undefined>;
+	private linkForce: ForceLink<UiNetworkNodeConfig & any, UiNetworkLinkConfig & any>;
 
-		this.createGraph(width, height, config.gravity, config.images, config.nodes, config.links);
-	}
+	private nodes: (UiNetworkNodeConfig & any)[];
+	private links: (UiNetworkLinkConfig & any)[];
 
-	public getMainDomElement(): JQuery {
-		return this.$graph;
-	}
+	private lastDraggedNode: any;
 
-	protected onAttachedToDom(): void {
-		this.reLayout();
-	}
-
-	public createGraph(width: any, height: any, gravity: any, images: any, nodesData: any, linksData: any) {
-		let me = this;
-
-		let color = d3.scale.category20();
+	constructor(config: UiNetworkGraphConfig, context: TeamAppsUiContext) {
+		super(config, context);
+		this.$graph = parseHtml('<div class="UiNetworkGraph" id="' + this.getId() + '">');
 
-		this.force = d3.layout.force<any>()
-			.charge((d) => d.charge)
-			.linkDistance((d) => (d as any).distance)
-			.gravity(gravity)
-			.size([width, height]);
+		this.links = config.links;
+		this.nodes = config.nodes;
 
+		this.createGraph(config.gravity, config.images);
+	}
 
-		this.zoom = d3.behavior.zoom().translate([500, 500]).scale(.1)
-			.scaleExtent([0.02, 50])
-			.on("zoom", function () {
-				me.container.attr("transform", "translate(" + (d3.event as d3.ZoomEvent).translate + ")scale(" + (d3.event as d3.ZoomEvent).scale + ")");
-			});
+	public doGetMainElement(): HTMLElement {
+		return this.$graph;
+	}
 
-		let drag = d3.behavior.drag<any>()
-			.origin((d) => d)
-			.on("dragstart", function (d) {
-				(d3.event as d3.BaseEvent).sourceEvent.stopPropagation();
-				d3.select(this).classed("dragging", true);
-				//test:
-				//d3.select(this).classed("fixed", d.fixed = true);
-				d3.select(this).classed("fixed", true);
-				me.force.start();
+	@executeWhenFirstDisplayed()
+	public createGraph(gravity: any, images: any) {
+		this.linkForce = d3.forceLink(this.links)
+			.id(d => (d as UiNetworkNodeConfig).id)
+			.distance((link: UiNetworkLinkConfig) => {
+				return link.linkLength;
 			})
-			.on("drag", function (d) {
-				d3.select(this).attr("cx", d.x = (d3.event as DragEvent).x).attr("cy", d.y = (d3.event as DragEvent).y);
-			})
-			// .on("dblclick", function(d) {
-			//     d3.select(this).classed("fixed", d.fixed = false);
-			// })
-			.on("dragend", function (d) {
-				d3.select(this).classed("dragging", false);
-			});
+			// .distance((link: SimulationLinkDatum<UiNetworkNodeConfig & any>) => {
+			// 	return (Math.max(link.source.width, link.source.height) + Math.max(link.target.width, link.target.height)) * 0.75 + ;
+			// });
+		let force = d3.forceManyBody();
+		force.strength(-30)
+		this.simulation = d3.forceSimulation<UiNetworkNodeConfig & any>()
+			.nodes(this.nodes)
+			.force("charge", force)
+			.force("link", this.linkForce)
+			.force("center", d3.forceCenter(this.getWidth() / 2, this.getWidth() / 2))
+			.force("collide", d3.forceCollide((a: UiNetworkNodeConfig & any) => {
+				return Math.sqrt(a.width * a.width + a.height * a.height) * a.distanceFactor;
+			}))
+			.stop();
+
+		this.simulation.on("tick", () => {
+			this.updateLinks();
+			this.updateNodes();
+		});
 
+		this.calculateFinalNodePositions();
 
-		if (this.svgContainer) {
+		if (this.svg) {
 			this.logger.debug("remove svg-container");
-			this.svgContainer.remove();
+			this.svg.remove();
 		}
 
-		//this.svg = d3.select("#" + this.getId())
-		//    .append("div")
-		//    .classed("svg-container", true) //container class to make it responsive
-		//    .append("svg")
-		//    //responsive SVG needs these 2 attributes and no width and height attr
-		//    .attr("preserveAspectRatio", "xMinYMin meet")
-		//    .attr("viewBox", "0 0 600 400")
-		//    //class to make it responsive
-		//    .classed("svg-content-responsive", true)
-		//    .append("g")
-		//    .call(zoom);
-
-
-		//this.svg = d3.select("#" + this.getId()).append("svg")
-		//    .attr("width", width)
-		//    .attr("height", height)
-		//    .append("g")
-		//    .call(zoom);
-
-		this.logger.debug("Add svg:" + "#" + this.getId() + ":" + d3.select("#" + this.getId()));
-		this.svgContainer = d3.select(this.getMainDomElement()[0]).append("svg")
-			.attr("width", width)
-			.attr("height", height);
-		this.svg = this.svgContainer
-			.append("g")
-			.call(this.zoom);
-
-		this.rect = this.svg.append("rect")
-			.attr("width", width)
-			.attr("height", height)
+		this.zoom = d3.zoom()
+			.extent([[0, 0], [this.getWidth(), this.getHeight()]])
+			.scaleExtent([.01, 8])
+			.on("zoom", () => {
+				this.container.attr("transform", d3.event.transform);
+			});
+
+		this.svg = d3.select(this.getMainElement())
+			.append("svg")
+			.call(this.zoom)
+			.on("dblclick.zoom", null); // disable doubleclick zoom!;
+
+		this.pointerEventsRect = this.svg.append("rect")
+			.attr("width", this.getWidth())
+			.attr("height", this.getHeight())
 			.style("fill", "none")
 			.style("pointer-events", "all");
 
-		this.container = this.svg.append("g").attr("transform", "translate(500,500)scale(.1,.1)");
+		this.container = this.svg.append("g");
 
 		var defs = this.svg.append("defs").attr("id", "imgdefs");
 		for (let i = 0; i < images.length; i++) {
@@ -164,266 +149,444 @@ export class UiNetworkGraph extends UiComponent<UiNetworkGraphConfig> {
 
 		}
 
-		this.force.nodes(nodesData).links(linksData).start();
 
-		this.link = this.container.append("g")
+		this.linksContainer = this.container.append("g")
 			.attr("class", "links")
-			.selectAll(".link")
-			.data(linksData)
-			.enter().append("path")
-			.attr("class", "link")
-			.style("stroke-width", (d: any) => {
-				if (d.width && d.width > 0) {
-					return d.width;
-				} else {
-					return 1.5;
-				}
-			})
-			.style("stroke", (d: any) => {
-				if (d.color) {
-					return d.color;
-				} else {
-					return "#555";
-				}
-			});
-
-		this.node = this.container.append("g")
-			.attr("class", "nodes")
-			.selectAll(".node")
-			.data(nodesData)
-			.enter().append("g")
-			.attr("class", "node")
-			.attr("cx", (d: any) => {
-				return d.x;
-			})
-			.attr("cy", (d: any) => {
-				return d.y;
-			})
-			.call(drag);
+			.attr("stroke", "#999");
 
-		var circle = this.node.append("circle")
-		//.attr("r", (d)=> { return d.weight + (d.size / 2); })
-			.attr("r", (d: any) => {
-				return (d.size + Math.sqrt(d.weight)) * 1;
-			})
-			.style("fill", (d: any) => {
-				if (d.imageId) {
-					return "url('#" + d.imageId + "')";
-				} else {
-					return color((1 / d.rating) as any);
-				}
-			})
-			.style("stroke-width", (d: any) => {
-				if (d.border) {
-					return d.border;
-				} else {
-					return 0;
-				}
-			})
-			.style("stroke", (d: any) => {
-				if (d.borderColor) {
-					return d.borderColor;
-				} else {
-					return "none";
-				}
-			});
+		// set zoom to center before animating...
+		this.svg.call(
+			this.zoom.transform,
+			d3.zoomIdentity.scale(1).translate(this.getWidth()/2, this.getHeight()/2)
+		);
 
-		//this.svg.append("rect")
-		//    .attr("x", 10)
-		//    .attr("y", 10)
-		//    .attr("width", 50)
-		//    .attr("height", 25)
-		//    .on("click", (d,i) => {
-		//        if (this.force.gravity() < 0.3) {
-		//            this.force.gravity(0.3).resume();
-		//        } else {
-		//            this.force.gravity(0.05).resume();
-		//        }
-		//    });
-
-		this.node.append("text")
-			.attr("x", (d: any) => {
-				return (d.size + Math.sqrt(d.weight)) * 1 + 4;
-			})
-			.text((d: any) => {
-				return d.caption
-			});
+		this.updateLinks(this._config.animationDuration);
+		this.updateNodes(this._config.animationDuration);
+		this.zoomAllNodesIntoView(this._config.animationDuration);
+	}
 
+	private calculateFinalNodePositions() {
+		let iterations = Math.ceil(Math.log(this.simulation.alphaMin()) / Math.log(1 - this.simulation.alphaDecay()));
+		for (var i = 0, n = iterations; i < n; ++i) {
+			this.simulation.tick();
+		}
+	}
 
-		var tickCount = 0;
-		var tickRate = 3;
-		this.force.on("tick", () => {
-			tickCount++;
-			if (tickCount > 30) {
-				if (tickRate > 0) {
-					tickRate--;
-				} else {
-					tickRate = 3;
-					this.link.attr("d", (d: any) => {
-						var dx = d.target.x - d.source.x,
-							dy = d.target.y - d.source.y,
-							dr = Math.sqrt(dx * dx + dy * dy);
-						return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
-					});
-					this.node.attr("transform", (d: any) => {
-						return "translate(" + d.x + "," + d.y + ")";
-					});
-				}
+	public zoomAllNodesIntoView(animationDuration: number) {
+		let bounds = this.nodes.reduce((globalBounds, node) => {
+			let leftBound = node.x - node.width / 2;
+			let rightBound = node.x + node.width / 2;
+			let topBound = node.y - node.height / 2;
+			let bottomBound = node.y + 10 + node.height / 2;
+			if (leftBound < globalBounds.minX) {
+				globalBounds.minX = leftBound;
+			}
+			if (rightBound > globalBounds.maxX) {
+				globalBounds.maxX = rightBound;
+			}
+			if (topBound < globalBounds.minY) {
+				globalBounds.minY = topBound;
+			}
+			if (bottomBound > globalBounds.maxY) {
+				globalBounds.maxY = bottomBound;
+			}
+			return globalBounds;
+		}, {
+			minX: 0,
+			maxX: 0,
+			minY: 0,
+			maxY: 0,
+			get width() {
+				return this.maxX - this.minX;
+			},
+			get height() {
+				return this.maxY - this.minY;
+			},
+			get centerX() {
+				return (this.maxX + this.minX) / 2
+			},
+			get centerY() {
+				return (this.maxY + this.minY) / 2
 			}
 		});
+		// console.log(bounds.minX, bounds.maxX, bounds.minY, bounds.maxY, bounds.centerX, bounds.centerY);
+		const k = Math.min(this.getWidth() / bounds.width, this.getHeight() / bounds.height);
+
+		let translateX: number;
+		let translateY: number;
+		if (bounds.width / bounds.height > this.getWidth() / this.getHeight()) {
+			translateX = -bounds.minX;
+			translateY = (this.getHeight() / 2) / k - bounds.centerY;
+		} else {
+			translateX = (this.getWidth() / 2) / k - bounds.centerX;
+			translateY = -bounds.minY;
+		}
+		// console.log(translateX, translateY);
+		this.svg.transition().duration(animationDuration).call(
+			this.zoom.transform,
+			d3.zoomIdentity.scale(k).translate(translateX, translateY)
+		);
+	}
 
+	public onResize(): void {
+		this.pointerEventsRect.attr('width', this.getWidth()).attr('height', this.getHeight());
+	}
 
-		this.force.on("end", () => {
-			this.link.attr("d", (d: any) => {
-				var dx = d.target.x - d.source.x,
-					dy = d.target.y - d.source.y,
-					dr = Math.sqrt(dx * dx + dy * dy);
-				return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
-			});
-		});
+	public setZoomFactor(zoomFactor: number): void {
+		this.zoom.scaleTo(this.svg, zoomFactor);
+		this.logger.debug(zoomFactor);
+	}
+
+	public setGravity(gravity: number): void {
+		// this.force.gravity(gravity).start();
+		this.logger.debug(gravity);
+	}
 
-		linksData.forEach((d: any) => {
-			this.linkedByIndex[d.source.index + "," + d.target.index] = 1;
+	public setDistance(linkDistance: number, nodeDistance: number): void {
+		this.linkForce.distance((link: SimulationLinkDatum<UiNetworkNodeConfig & any>) => {
+			return (Math.max(link.source.width, link.source.height) + Math.max(link.target.width, link.target.height)) * linkDistance;
 		});
 
+		this.simulation.force("collide", d3.forceCollide((a: UiNetworkNodeConfig & any) => {
+			return Math.sqrt(a.width * a.width + a.height * a.height) * a.distanceFactor * nodeDistance;
+		}));
 
-		this.node.on("mouseover", function (d: any) {
+		this.simulation.nodes(this.nodes);
+		this.linkForce.links(this.links);
+		this.simulation.alphaTarget(0.3).restart()
+			.stop();
+		this.calculateFinalNodePositions();
+		this.updateNodes(this._config.animationDuration);
+		this.updateLinks(this._config.animationDuration);
 
-			me.node.classed("node-active", function (o: any) {
-				let thisOpacity = me.isConnected(d, o) ? true : false;
-				this.setAttribute('fill-opacity', thisOpacity);
-				return thisOpacity;
-			});
-
-			me.link.classed("link-active", (o: any) => {
-				return o.source === d || o.target === d ? true : false;
-			});
+		this.logger.debug("distance:" + linkDistance + ", " + nodeDistance);
+	}
 
-			d3.select(this).classed("node-active", true);
-			d3.select(this).select("circle").transition()
-				.duration(500)
-				.attr("r", (d.size + Math.sqrt(d.weight)) * 1.5);
+	public setCharge(charge: number, overrideNodeCharge: boolean): void {
+		// this.force.charge(charge).start();
+		this.logger.debug("charge:" + charge);
+	}
 
-			d3.select(this).select("text").transition().duration(500)
-				.attr("x", (d) => {
-					return (d.size + Math.sqrt(d.weight)) * 1.5 + 4;
-				})
-				.style("font-size", "20px")
-				.style("stroke", "red");
+	private updateLinks(animationDuration: number = 0) {
+		this.linksContainer.selectAll("line")
+			.data(this.links)
+			.join("line")
+			.attr("stroke-width", (d: UiNetworkLinkConfig) => d.lineWidth || 2)
+			.attr('stroke', (d: UiNetworkLinkConfig) => d.lineColor)
+			.attr('stroke-dasharray', (d: UiNetworkLinkConfig) => d.lineDashArray ? d.lineDashArray : null)
+			.transition()
+			.duration(animationDuration)
+			.attr("x1", (d: any) => d.source.x)
+			.attr("y1", (d: any) => d.source.y)
+			.attr("x2", (d: any) => d.target.x)
+			.attr("y2", (d: any) => d.target.y)
+	}
 
-			d = (d3.select(this).node() as any).__data__;
 
-			me.link.transition().duration(250).style("opacity", function (o: any) {
-				return d.index == o.source.index || d.index == o.target.index ? 1 : 0.3;
-			});
-			me.node.transition().duration(750).style("opacity", function (o: any) {
-				return me.isConnected(d, o) ? 1 : 0.2;
-			});
+	private updateNodes(animationDuration: number = 0): void {
+		const nodesSelection: d3.Selection<SVGGElement, any, SVGGElement, any> = this.container.selectAll<SVGGElement, any>('g.node')
+			.data(this.nodes, ({
+				                   id
+			                   }: UiNetworkNodeConfig) => id);
 
+		// Enter any new nodes at the parent's previous position.
+		const nodeEnter = nodesSelection.enter().append('g')
+			.attr('class', 'node')
+			.attr('cursor', 'pointer')
+			.on('click', (d: UiNetworkNodeConfig) => {
+				if (d3.event.srcElement.classList.contains('node-button-circle')) {
+					return;
+				}
+				this.onNodeClicked.fire({nodeId: d.id});
+			})
+			.on('dblclick', (d: UiNetworkNodeConfig) => {
+				if (d3.event.srcElement.classList.contains('node-button-circle')) {
+					return;
+				}
+				this.onNodeDoubleClicked.fire({nodeId: d.id});
+			})
+		;
+		// Add background rectangle for the nodes
+		patternify(nodeEnter, {
+			tag: 'rect',
+			selector: 'node-rect',
+			data: (d: UiNetworkNodeConfig) => [d]
 		});
 
-		this.node.on("mouseout", function (d: any) {
-			me.node.classed("node-active", false);
-			me.link.classed("link-active", false);
-			d3.select(this).select("circle").transition()
-				.duration(750)
-				.attr("r", (d.size + Math.sqrt(d.weight)) * 1);
+		nodeEnter.call(d3.drag()
+			.on("start", (d: any, i: number, nodes: Element[]) => {
+				// if (!d3.event.active) {
+				// 	this.simulation.alphaTarget(0.3).restart();
+				// }
+				d3.select(nodes[i]).raise();
 
-			d3.select(this).select("text").transition().duration(750)
-				.attr("x", (d) => (d.size + Math.sqrt(d.weight)) * 1 + 4)
-				.style("font-size", "10px")
-				.style("stroke", "black");
+				if (this.lastDraggedNode) {
+					this.lastDraggedNode.fx = null;
+					this.lastDraggedNode.fy = null;
+				}
 
+				d.fx = d.x;
+				d.fy = d.y;
 
-			me.link.transition().duration(1000).style("opacity", 1);
-			me.node.transition().duration(500).style("opacity", 1);
+				this.container.attr("cursor", "grabbing");
+			})
+			.on("drag", (d: any, i: number, nodes: Element[]) => {
+				d.fx = d.x = d3.event.x;
+				d.fy = d.y = d3.event.y;
+				this.updateLinks();
+				this.updateNodes();
+			})
+			.on("end", (d: any) => {
+				// if (!d3.event.active) {
+				// 	this.simulation.alphaTarget(0);
+				// }
+				// d.fx = null;
+				// d.fy = null;
+				this.lastDraggedNode = d;
+				this.container.attr("cursor", "grab")
+			})
+		);
+
+
+		// Add node icon image inside node
+		patternify(nodeEnter, {
+			tag: 'image',
+			selector: 'node-icon-image',
+			data: (d: UiNetworkNodeConfig) => d.icon ? [d] : []
+		})
+			.attr('width', (data: UiNetworkNodeConfig) => data.icon.size)
+			.attr('height', (data: UiNetworkNodeConfig) => data.icon.size)
+			.attr("xlink:href", (data: UiNetworkNodeConfig) => data.icon.icon)
+			.attr('x', (data: UiNetworkNodeConfig) => -data.width / 2 - data.icon.size / 2)
+			.attr('y', (data: UiNetworkNodeConfig) => -data.height / 2 - data.icon.size / 2);
+
+		// Defined node images wrapper group
+		const imageGroups = patternify(nodeEnter, {
+			tag: 'g',
+			selector: 'node-image-group',
+			data: (d: UiNetworkNodeConfig) => [d]
+		});
 
+		// Add background rectangle for node image
+		patternify(imageGroups, {
+			tag: 'rect',
+			selector: 'node-image-rect',
+			data: (d: UiNetworkNodeConfig) => [d]
 		});
 
-		this.node.on('click', function () {
-			let d = (d3.select(this).node() as any).__data__;
-			var id = d.nodeId;
-			this._context.fireEvent(EventFactory.createUiNetworkGraph_HandleNodeClickEvent(me.getId(), id));
+		// Node update styles
+		const nodeUpdate = nodeEnter.merge(nodesSelection)
+			.style('font', '12px sans-serif');
+		nodeUpdate
+			.transition()
+			.duration(animationDuration)
+			.attr("transform", (d: any) => `translate(${d.fx != null ? d.fx : d.x},${d.fy != null ? d.fy : d.y})`);
 
-			var evt = d3.event;
-			if (evt != null) {
-				if ((evt as MouseEvent).shiftKey) {
-					this.connectedNodes();
-				} else if ((evt as MouseEvent).ctrlKey) {
 
-				} else {
-					this.logger.debug(id);
-				}
-			}
+		// Add foreignObject element inside rectangle
+		const foreignObject = patternify(nodeUpdate, {
+			tag: 'foreignObject',
+			selector: 'node-foreign-object',
+			data: (d: UiNetworkNodeConfig) => [d]
 		});
 
-	}
-
+		let foreignObjectInner = foreignObject.selectAll('.node-foreign-object-div')
+			.data((d: UiNetworkNodeConfig) => [d], d => (d as UiNetworkNodeConfig).id);
+		foreignObjectInner
+			.enter()
+			.append('xhtml:div')
+			.classed('node-foreign-object-div', true)
+			.html((d: UiNetworkNodeConfig) => this._context.templateRegistry.createTemplateRenderer(d.template).render(d.record.values));
+		foreignObjectInner.exit().remove();
+
+		this.restyleForeignObjectElements();
+
+		// Add Node button circle's group (expand-collapse button)
+		const nodeButtonGroups = patternify(nodeEnter, {
+			tag: 'g',
+			selector: 'node-button-g',
+			data: (d: UiNetworkNodeConfig) => [d]
+		})
+			.on('mousedown', (d: UiNetworkNodeConfig) => {
+				if (d.expandState == UiNetworkNode_ExpandState.EXPANDED) {
+					d.expandState = UiNetworkNode_ExpandState.COLLAPSED;
+				} else {
+					d.expandState = UiNetworkNode_ExpandState.EXPANDED;
+				}
 
-	private connectedNodes() {
-		if (this.toggle == 0) {
-			let d = (d3.select(this as any).node() as any).__data__;
-			this.node.style("opacity", function (o: any) {
-				return this.isConnected(d, o) ? 1 : 0.1;
-			});
-			this.link.style("opacity", function (o: any) {
-				return d.index == o.source.index || d.index == o.target.index ? 1 : 0.1;
+				this.onNodeExpandedOrCollapsed.fire({nodeId: d.id, expanded: d.expandState == UiNetworkNode_ExpandState.EXPANDED});
+				this.updateNodes();
 			});
-			this.toggle = 1;
-		} else {
-			this.node.style("opacity", 1);
-			this.link.style("opacity", 1);
-			this.toggle = 0;
-		}
-	}
 
-	private isConnected(a: any, b: any) {
-		if (a.index == b.index) return true;
-		return this.linkedByIndex[a.index + "," + b.index] || this.linkedByIndex[b.index + "," + a.index];
-	}
+		// Add expand collapse button circle
+		patternify(nodeButtonGroups, {
+			tag: 'circle',
+			selector: 'node-button-circle',
+			data: (d: UiNetworkNodeConfig) => [d]
+		});
+		// Restyle node button circle
+		nodeUpdate.select('.node-button-circle')
+			.attr('r', 10)
+			.attr('stroke-width', (d: UiNetworkNodeConfig) => d.borderWidth)
+			.attr('fill', (d: UiNetworkNodeConfig) => d.backgroundColor)
+			.attr('stroke', (d: UiNetworkNodeConfig) => d.borderColor);
+
+		// Add button text
+		patternify(nodeButtonGroups, {
+			tag: 'text',
+			selector: 'node-button-text',
+			data: (d: UiNetworkNodeConfig) => [d]
+		})
+			.attr('pointer-events', 'none')
+		// Restyle button texts
+		nodeUpdate.select('.node-button-text')
+			.attr('text-anchor', 'middle')
+			.attr('alignment-baseline', 'middle')
+			.attr('stroke', 'none')
+			.attr('fill', 'black')
+			.attr('font-size', 22)
+			.text((d: UiNetworkNodeConfig) => d.expandState === UiNetworkNode_ExpandState.EXPANDED ? '–' : '+');
+
+		// Move node button group to the desired position
+		nodeUpdate.select('.node-button-g')
+			.attr('transform', (d: UiNetworkNodeConfig) => `translate(0,${d.height / 2})`)
+			.attr('display', (data: UiNetworkNodeConfig) => data.expandState === UiNetworkNode_ExpandState.NOT_EXPANDABLE ? 'none' : 'inherit');
+
+		// Move images to desired positions
+		nodeUpdate.selectAll('.node-image-group')
+			.attr('transform', (d: UiNetworkNodeConfig) => {
+				if (d.image) {
+					let x = -d.image.width / 2 - d.width / 2;
+					let y = -d.image.height / 2 - d.height / 2;
+					return `translate(${x},${y})`
+				} else {
+					return null;
+				}
+			});
 
-	private dottype(d: any) {
-		d.x = +d.x;
-		d.y = +d.y;
-		return d;
+		// Style node image rectangles
+		nodeUpdate.select('.node-image-rect')
+			.attr('fill', (d: UiNetworkNodeConfig) => `url('#${d.id}')`)
+			.attr('width', (d: UiNetworkNodeConfig) => d.image && d.image.width)
+			.attr('height', (d: UiNetworkNodeConfig) => d.image && d.image.height)
+			.attr('stroke', (d: UiNetworkNodeConfig) => d.image && (d.image.borderColor))
+			.attr('stroke-width', (d: UiNetworkNodeConfig) => d.image && d.image.borderWidth)
+			.attr('rx', (d: UiNetworkNodeConfig) => d.image && (d.image.cornerShape == UiTreeGraphNodeImage_CornerShape.CIRCLE ? Math.max(d.image.width, d.image.height)
+				: d.image.cornerShape == UiTreeGraphNodeImage_CornerShape.ROUNDED ? Math.min(d.image.width, d.image.height) / 10
+					: 0))
+			.attr('y', (d: UiNetworkNodeConfig) => d.image && d.image.centerTopDistance)
+			.attr('x', (d: UiNetworkNodeConfig) => d.image && d.image.centerLeftDistance);
+		// .attr('filter', (d: UiNetworkNodeConfig) => d.image && d.image.shadowId);
+
+		// Style node rectangles
+		nodeUpdate.select('.node-rect')
+			.attr('width', (d: UiNetworkNodeConfig) => d.width)
+			.attr('height', (d: UiNetworkNodeConfig) => d.height)
+			.attr('x', (d: UiNetworkNodeConfig) => -d.width / 2)
+			.attr('y', (d: UiNetworkNodeConfig) => -d.height / 2)
+			.attr('rx', (d: UiNetworkNodeConfig) => d.borderRadius || 0)
+			.attr('stroke-width', (d: UiNetworkNodeConfig) => d.borderWidth)
+			.attr('cursor', 'pointer')
+			.attr('stroke', ({borderColor}: UiNetworkNodeConfig) => borderColor)
+			.style("fill", ({backgroundColor}: UiNetworkNodeConfig) => backgroundColor);
+
+		// Remove any exiting nodes after transition
+		const nodeExitTransition = nodesSelection.exit()
+			.remove();
 	}
 
-	public onResize(): void {
-		var width = this.$graph.width();
-		var height = this.$graph.height();
-
-		this.logger.debug("resize w:" + width + ", h:" + height);
 
-		this.svgContainer.attr('width', width).attr('height', height);
-		this.rect.attr('width', width).attr('height', height);
-		this.container.attr('width', width).attr('height', height);
-		if (this.force) {
-			this.force.size([width, height]).resume();
-		}
+	restyleForeignObjectElements() {
+		this.container.selectAll('.node-foreign-object')
+			.attr('width', ({
+				                width
+			                }: UiNetworkNodeConfig) => width)
+			.attr('height', ({
+				                 height
+			                 }: UiNetworkNodeConfig) => height)
+			.attr('x', ({
+				            width
+			            }: UiNetworkNodeConfig) => -width / 2)
+			.attr('y', ({
+				            height
+			            }: UiNetworkNodeConfig) => -height / 2);
+		this.container.selectAll('.node-foreign-object-div')
+			.style('width', ({
+				                 width
+			                 }: UiNetworkNodeConfig) => `${width}px`)
+			.style('height', ({
+				                  height
+			                  }: UiNetworkNodeConfig) => `${height}px`)
+			.select('*')
+			.style('display', 'inline-grid')
 	}
 
-	public setZoomFactor(zoomFactor: number): void {
-		this.zoom.scale(zoomFactor);
-		this.logger.debug(zoomFactor);
-	}
+	public addNodesAndLinks(newNodes: UiNetworkNodeConfig[], newLinks: UiNetworkLinkConfig[]): void {
+		this.nodes.push(...newNodes);
+		this.links.push(...newLinks);
 
-	public setGravity(gravity: number): void {
-		this.force.gravity(gravity).start();
-		this.logger.debug(gravity);
-	}
+		this.placeNewNodesNearExistingParentsOnes(newLinks, newNodes);
 
-	public setDistance(distance: number, overrideNodeCharge: boolean): void {
-		this.force.distance(distance).start();
-		this.logger.debug("distance:" + distance);
+		this.simulation.nodes(this.nodes);
+		this.linkForce.links(this.links);
+		this.simulation.alphaTarget(0.3).restart()
+			.stop();
+		this.calculateFinalNodePositions();
+		this.updateNodes(this._config.animationDuration);
+		this.updateLinks(this._config.animationDuration);
 	}
 
-	public setCharge(charge: number, overrideNodeCharge: boolean): void {
-		this.force.charge(charge).start();
-		this.logger.debug("charge:" + charge);
+	private placeNewNodesNearExistingParentsOnes(newLinks: UiNetworkLinkConfig[], newNodes: UiNetworkNodeConfig[]) {
+		let changed: boolean;
+		do {
+			changed = false;
+			newLinks = newLinks.filter((l) => {
+				let newSourceNode = newNodes.filter(n => n.id === l.source)[0];
+				let newTargetNode = newNodes.filter(n => n.id === l.target)[0];
+				if (newSourceNode != null && newTargetNode == null) {
+					let existingTargetNode = this.nodes.filter(n => n.id === l.target)[0];
+					if (existingTargetNode != null) {
+						(newSourceNode as any).x = (existingTargetNode as any).x;
+						(newSourceNode as any).y = (existingTargetNode as any).y;
+					}
+					newNodes = newNodes.filter(n => n !== newSourceNode);
+					changed = true;
+					return false;
+				} else if (newSourceNode == null && newTargetNode != null) {
+					let existingSourceNode = this.nodes.filter(n => n.id === l.source)[0];
+					if (existingSourceNode != null) {
+						(newTargetNode as any).x = (existingSourceNode as any).x;
+						(newTargetNode as any).y = (existingSourceNode as any).y;
+					}
+					newNodes = newNodes.filter(n => n !== newTargetNode);
+					changed = true;
+					return false;
+				}
+				return true;
+			});
+		} while (changed);
 	}
 
-	public destroy(): void {
-		// nothing to do
+	public removeNodesAndLinks(nodeIds: string[], linksBySourceNodeId: {[name: string]: string[]}): void {
+		const nodeIdsSet = new Set(nodeIds);
+		this.nodes = this.nodes.filter(n => {
+			return !nodeIdsSet.has(n.id);
+		});
+		this.links = this.links.filter(l => {
+			let targetIdsToDelete = linksBySourceNodeId[l.source && l.source.id];
+			if (targetIdsToDelete == null) {
+				return true;
+			}
+			return !targetIdsToDelete.filter(targetId => (l.target && l.target.id) === targetId)[0]
+		});
+
+		this.simulation.nodes(this.nodes);
+		this.linkForce.links(this.links);
+		this.simulation.alphaTarget(0.3).restart()
+			.stop();
+		this.calculateFinalNodePositions();
+		this.updateNodes(this._config.animationDuration);
+		this.updateLinks(this._config.animationDuration);
 	}
 }
 
diff --git a/teamapps-client/ts/modules/UiNotification.ts b/teamapps-client/ts/modules/UiNotification.ts
new file mode 100644
index 000000000..1f1718637
--- /dev/null
+++ b/teamapps-client/ts/modules/UiNotification.ts
@@ -0,0 +1,201 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+import {UiNotification_ClosedEvent, UiNotification_OpenedEvent, UiNotificationCommandHandler, UiNotificationConfig, UiNotificationEventSource} from "../generated/UiNotificationConfig";
+import {UiEntranceAnimation} from "../generated/UiEntranceAnimation";
+import {UiNotificationPosition} from "../generated/UiNotificationPosition";
+import {UiExitAnimation} from "../generated/UiExitAnimation";
+import {AbstractUiComponent} from "./AbstractUiComponent";
+import {TeamAppsUiContext} from "./TeamAppsUiContext";
+import {animateCSS, Constants, parseHtml} from "./Common";
+import {createUiSpacingValueCssString} from "./util/CssFormatUtil";
+import {ProgressBar} from "./micro-components/ProgressBar";
+import {TeamAppsEvent} from "./util/TeamAppsEvent";
+import {TeamAppsUiComponentRegistry} from "./TeamAppsUiComponentRegistry";
+import {UiComponent} from "./UiComponent";
+import {executeWhenFirstDisplayed} from "./util/ExecuteWhenFirstDisplayed";
+
+const containersByPosition: {
+	[UiNotificationPosition.TOP_LEFT]: HTMLElement,
+	[UiNotificationPosition.TOP_CENTER]: HTMLElement,
+	[UiNotificationPosition.TOP_RIGHT]: HTMLElement,
+	[UiNotificationPosition.BOTTOM_LEFT]: HTMLElement,
+	[UiNotificationPosition.BOTTOM_CENTER]: HTMLElement,
+	[UiNotificationPosition.BOTTOM_RIGHT]: HTMLElement
+} = {
+	[UiNotificationPosition.TOP_LEFT]: parseHtml(`<div class="UiNotification-container top-left"></div>`),
+	[UiNotificationPosition.TOP_CENTER]: parseHtml(`<div class="UiNotification-container top-center"></div>`),
+	[UiNotificationPosition.TOP_RIGHT]: parseHtml(`<div class="UiNotification-container top-right"></div>`),
+	[UiNotificationPosition.BOTTOM_LEFT]: parseHtml(`<div class="UiNotification-container bottom-left"></div>`),
+	[UiNotificationPosition.BOTTOM_CENTER]: parseHtml(`<div class="UiNotification-container bottom-center"></div>`),
+	[UiNotificationPosition.BOTTOM_RIGHT]: parseHtml(`<div class="UiNotification-container bottom-right"></div>`)
+};
+
+let notifications: {
+	notification: UiNotification;
+	position: UiNotificationPosition;
+	$wrapper: HTMLElement;
+}[] = [];
+
+function getNotificationsByPosition(position: UiNotificationPosition) {
+	return notifications.filter(n => n.position == position);
+}
+
+let updateContainerVisibilities = function () {
+	[UiNotificationPosition.TOP_LEFT,
+		UiNotificationPosition.TOP_CENTER,
+		UiNotificationPosition.TOP_RIGHT,
+		UiNotificationPosition.BOTTOM_LEFT,
+		UiNotificationPosition.BOTTOM_CENTER,
+		UiNotificationPosition.BOTTOM_RIGHT].forEach(pos => {
+		let hasNotifications = getNotificationsByPosition(pos).length > 0;
+		if (hasNotifications && containersByPosition[pos].parentNode !== document.body) {
+			document.body.appendChild(containersByPosition[pos]);
+		} else if (!hasNotifications) {
+			containersByPosition[pos].remove();
+		}
+	});
+};
+
+export function showNotification(notification: UiNotification, position: UiNotificationPosition, entranceAnimation: UiEntranceAnimation, exitAnimation: UiExitAnimation) {
+	let notif = notifications.filter(n => n.notification == notification)[0];
+
+	if (notif == null || notif.position != position) {
+		if (notif == null) {
+			let $wrapper = parseHtml(`<div class="notification-wrapper"></div>`);
+			$wrapper.appendChild(notification.getMainElement());
+			notif = {notification, position, $wrapper};
+			notifications.push(notif)
+		} else {
+			notif.position = position;
+		}
+		notif.$wrapper.style.height = null;
+		notif.$wrapper.style.marginBottom = null;
+		notif.$wrapper.style.zIndex = null;
+		containersByPosition[position].appendChild(notif.$wrapper);
+
+		updateContainerVisibilities();
+
+		animateCSS(notification.getMainElement(), Constants.ENTRANCE_ANIMATION_CSS_CLASSES[entranceAnimation] as any, 700);
+
+		let closeListener = () => {
+			notification.onClosedAnyWay.removeListener(closeListener);
+			notif.$wrapper.style.height = `${notif.$wrapper.offsetHeight}px`;
+			notif.$wrapper.offsetHeight; // make sure the style above is applied so we get a transition!
+			notif.$wrapper.style.height = "0px";
+			notif.$wrapper.style.marginBottom = "0px";
+			notif.$wrapper.style.zIndex = "0";
+
+			animateCSS(notification.getMainElement(), Constants.EXIT_ANIMATION_CSS_CLASSES[exitAnimation] as any, 700, () => {
+				notif.$wrapper.remove();
+				updateContainerVisibilities();
+			});
+
+			notifications = notifications.filter(n => n.notification !== notification);
+		};
+		notification.onClosedAnyWay.addListener(closeListener);
+
+		notification.onOpened.fire({});
+	}
+
+	setTimeout(() => notification.startCloseTimeout());
+}
+
+export class UiNotification extends AbstractUiComponent<UiNotificationConfig> implements UiNotificationCommandHandler, UiNotificationEventSource {
+
+	public readonly onOpened: TeamAppsEvent<UiNotification_OpenedEvent> = new TeamAppsEvent();
+	public readonly onClosed: TeamAppsEvent<UiNotification_ClosedEvent> = new TeamAppsEvent();
+	public readonly onClosedAnyWay: TeamAppsEvent<void> = new TeamAppsEvent();
+
+	private $main: HTMLElement;
+	private $contentContainer: HTMLElement;
+	private $progressBarContainer: HTMLElement;
+	private progressBar: ProgressBar;
+
+	constructor(config: UiNotificationConfig, context: TeamAppsUiContext) {
+		super(config, context);
+
+		this.$main = parseHtml(`<div class="UiNotification">
+	<div class="close-button"></div>
+	<div class="content-container"></div>
+	<div class="progress-container"></div>
+</div>`);
+		this.$contentContainer = this.$main.querySelector(":scope > .content-container");
+		this.$progressBarContainer = this.$main.querySelector(":scope > .progress-container");
+		this.$main.querySelector(":scope > .close-button").addEventListener("mousedown", () => {
+			this.close();
+			this.onClosed.fire({byUser: true});
+		});
+		this.update(config);
+	}
+
+	public update(config: UiNotificationConfig) {
+		this._config = config;
+		this.$main.style.backgroundColor = config.backgroundColor;
+		// this.$main.style.borderColor = createUiColorCssString(config.borderColor, "#00000022");
+		this.$contentContainer.style.padding = createUiSpacingValueCssString(config.padding);
+		this.$main.classList.toggle("dismissible", config.dismissible);
+		this.$main.classList.toggle("show-progress", config.progressBarVisible && config.displayTimeInMillis > 0);
+
+		if (config.progressBarVisible && this.progressBar == null) {
+			this.progressBar = new ProgressBar(0, {height: 5, transitionTime: config.displayTimeInMillis});
+			this.$progressBarContainer.appendChild(this.progressBar.getMainDomElement());
+		} else if (!config.progressBarVisible && this.progressBar != null) {
+			this.progressBar.getMainDomElement().remove();
+			this.progressBar = null;
+		}
+
+		if (this.$contentContainer.firstChild !== (config.content && (config.content as UiComponent).getMainElement())) {
+			this.$contentContainer.innerHTML = '';
+			if (config.content != null) {
+				this.$contentContainer.appendChild((config.content as UiComponent).getMainElement());
+			}
+		}
+	}
+
+	private closeTimeout: number;
+
+	@executeWhenFirstDisplayed(true)
+	public startCloseTimeout() {
+		if (this.progressBar != null) {
+			this.progressBar.setProgress(1); // mind the css transition!
+		}
+		if (this.closeTimeout != null) {
+			window.clearTimeout(this.closeTimeout);
+		}
+		if (this._config.displayTimeInMillis > 0) {
+			this.closeTimeout = window.setTimeout(() => {
+				this.close();
+				this.onClosed.fire({byUser: false});
+				this.onClosedAnyWay.fire();
+			}, this._config.displayTimeInMillis);
+		}
+	}
+
+	doGetMainElement(): HTMLElement {
+		return this.$main;
+	}
+
+	close(): void {
+		this.onClosedAnyWay.fire();
+	}
+
+}
+
+TeamAppsUiComponentRegistry.registerComponentClass("UiNotification", UiNotification);
diff --git a/teamapps-client/ts/modules/UiNotificationBar.ts b/teamapps-client/ts/modules/UiNotificationBar.ts
new file mode 100644
index 000000000..38e1da6a4
--- /dev/null
+++ b/teamapps-client/ts/modules/UiNotificationBar.ts
@@ -0,0 +1,201 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+import {AbstractUiComponent} from "./AbstractUiComponent";
+import {TeamAppsUiContext} from "./TeamAppsUiContext";
+import {animateCSS, Constants, parseHtml, removeClassesByFunction} from "./Common";
+import {TeamAppsEvent} from "./util/TeamAppsEvent";
+import {TeamAppsUiComponentRegistry} from "./TeamAppsUiComponentRegistry";
+import {
+	UiNotificationBar_ItemActionLinkClickedEvent,
+	UiNotificationBar_ItemClickedEvent,
+	UiNotificationBar_ItemClosedEvent,
+	UiNotificationBarCommandHandler,
+	UiNotificationBarConfig,
+	UiNotificationBarEventSource
+} from "../generated/UiNotificationBarConfig";
+import {UiNotificationBarItemConfig} from "../generated/UiNotificationBarItemConfig";
+import {createUiSpacingValueCssString} from "./util/CssFormatUtil";
+import {ProgressBar} from "./micro-components/ProgressBar";
+import {UiExitAnimation} from "../generated/UiExitAnimation";
+import {UiEntranceAnimation} from "../generated/UiEntranceAnimation";
+
+export class UiNotificationBar extends AbstractUiComponent<UiNotificationBarConfig> implements UiNotificationBarCommandHandler, UiNotificationBarEventSource {
+
+	public readonly onItemClicked: TeamAppsEvent<UiNotificationBar_ItemClickedEvent> = new TeamAppsEvent();
+	public readonly onItemActionLinkClicked: TeamAppsEvent<UiNotificationBar_ItemActionLinkClickedEvent> = new TeamAppsEvent();
+	public readonly onItemClosed: TeamAppsEvent<UiNotificationBar_ItemClosedEvent> = new TeamAppsEvent();
+
+	private $main: HTMLElement;
+	private itemsById: { [id: string]: UiNotificationBarItem } = {};
+
+	constructor(config: UiNotificationBarConfig, context: TeamAppsUiContext) {
+		super(config, context);
+		this.$main = parseHtml(`<div class="UiNotificationBar"></div>`);
+		config.initialItems.forEach(item => this.addItem(item))
+	}
+
+	doGetMainElement(): HTMLElement {
+		return this.$main;
+	}
+
+	addItem(itemConfig: UiNotificationBarItemConfig): void {
+		this.removeItem(itemConfig.id, null);
+		let item = new UiNotificationBarItem(itemConfig);
+		this.itemsById[itemConfig.id] = item;
+		this.$main.appendChild(item.getMainElement());
+		if (itemConfig.entranceAnimation != null) {
+			animateCSS(item.getMainElement(), Constants.ENTRANCE_ANIMATION_CSS_CLASSES[itemConfig.entranceAnimation]);
+		}
+		item.startCloseTimeout();
+		item.onClicked.addListener(() => this.onItemClicked.fire({id: itemConfig.id}));
+		item.onActionLinkClicked.addListener(() => this.onItemActionLinkClicked.fire({id: itemConfig.id}));
+		item.onClosed.addListener(wasTimeout => {
+			this.removeItem(itemConfig.id);
+			this.onItemClosed.fire({id: itemConfig.id, wasTimeout: wasTimeout});
+		});
+	}
+
+	updateItem(itemConfig: UiNotificationBarItemConfig): any {
+		let item = this.itemsById[itemConfig.id];
+		if (item != null) {
+			item.update(itemConfig);
+		}
+	}
+
+	removeItem(id: string, exitAnimation?: UiExitAnimation): void {
+		let item = this.itemsById[id];
+		if (item != null) {
+			if (exitAnimation != null || item.config.exitAnimation != null) {
+				animateCSS(item.getMainElement(), Constants.EXIT_ANIMATION_CSS_CLASSES[exitAnimation || item.config.exitAnimation], 300, () => {
+					item.getMainElement().remove();
+				});
+			} else {
+				item.getMainElement().remove();
+			}
+		}
+		delete this.itemsById[id];
+	}
+
+}
+
+class UiNotificationBarItem {
+
+	public readonly onClicked: TeamAppsEvent<void> = new TeamAppsEvent();
+	public readonly onActionLinkClicked: TeamAppsEvent<void> = new TeamAppsEvent();
+	public readonly onClosed: TeamAppsEvent<boolean> = new TeamAppsEvent();
+
+	public config: UiNotificationBarItemConfig;
+
+	private $main: HTMLElement;
+	private $progressBarContainer: HTMLElement;
+	private progressBar: ProgressBar;
+	private $closeButton: HTMLElement;
+	private $contentContainer: HTMLElement;
+	private $icon: HTMLElement;
+	private $text: HTMLElement;
+	private $actionLink: HTMLElement;
+
+	constructor(config: UiNotificationBarItemConfig) {
+		this.$main = parseHtml(`<div class="UiNotificationBarItem">
+	<div class="content-container">
+		<div class="icon img img-20"></div>
+		<div class="text-container">
+			<span class="text"></span>
+			<a class="action-link"></a>
+		</div>
+		<div class="close-button"></div>
+	</div>
+	<div class="progress-container"></div>
+</div>`);
+		this.$closeButton = this.$main.querySelector(":scope .close-button");
+		 this.$contentContainer = this.$main.querySelector(":scope > .content-container");
+		this.$icon = this.$main.querySelector(":scope .icon");
+		this.$text = this.$main.querySelector(":scope .text");
+		this.$actionLink = this.$main.querySelector(":scope .action-link");
+		this.$progressBarContainer = this.$main.querySelector(":scope > .progress-container");
+		this.progressBar = new ProgressBar(0, {height: 3, transitionTime: 500});
+		this.$progressBarContainer.appendChild(this.progressBar.getMainDomElement());
+
+		this.$main.addEventListener("click", () => this.onClicked.fire())
+		this.$actionLink.addEventListener("click", (e) => this.onActionLinkClicked.fire())
+		this.$closeButton.addEventListener("click", ev => this.onClosed.fire(false));
+
+		this.update(config);
+	}
+
+	public update(config: UiNotificationBarItemConfig) {
+		const oldConfig = this.config;
+		this.config = config;
+		
+		this.$closeButton.classList.toggle("hidden", !config.dismissible);
+		this.$main.style.backgroundColor = config.backgroundColor;
+		this.$main.style.borderColor = config.borderColor;
+		this.$contentContainer.style.padding = createUiSpacingValueCssString(config.padding);
+
+		this.$text.textContent = config.text;
+		this.$text.style.color = config.textColor;
+
+		this.$actionLink.textContent = config.actionLinkText;
+		this.$actionLink.classList.toggle("hidden", config.actionLinkText == null);
+		this.$actionLink.style.color = config.actionLinkColor;
+
+		this.$main.classList.toggle("with-progress", config.displayTimeInMillis > 0 && config.progressBarVisible)
+
+		if (oldConfig?.icon !== config.icon) {
+			console.debug("updating icon", oldConfig?.icon, config.icon);
+			this.$icon.classList.toggle("hidden", config.icon == null)
+			this.$icon.style.backgroundImage = `url('${config.icon}')`;
+		}
+
+		if (oldConfig?.iconAnimation !== config.iconAnimation) {
+			console.debug("updating icon animation", oldConfig?.iconAnimation, config.iconAnimation	);
+			removeClassesByFunction(this.$icon.classList, className => className.startsWith("animate__"));
+			if (config.iconAnimation != null) {
+				this.$icon.classList.add(...Constants.REPEATABLE_ANIMATION_CSS_CLASSES[config.iconAnimation].split(/ +/));
+			}
+		}
+	}
+
+	public startCloseTimeout() {
+		if (this.config.displayTimeInMillis > 0) {
+			if (this.config.progressBarVisible) {
+				let startTime = +(new Date());
+				let interval = setInterval(() => {
+					let duration = +(new Date()) - startTime + 500; // make sure the bar reaches the end!
+					let progress = Math.min(1, duration / this.config.displayTimeInMillis);
+					this.progressBar.setProgress(progress);
+					(this.progressBar.getMainDomElement().querySelector(":scope .progress-bar") as HTMLElement).style.backgroundColor = this.config.borderColor;
+					if (progress >= 1) {
+						window.clearInterval(interval);
+					}
+				}, 100);
+			}
+			window.setTimeout(() => {
+				this.onClosed.fire(true);
+			}, this.config.displayTimeInMillis);
+		}
+	}
+
+	public getMainElement() {
+		return this.$main;
+	}
+}
+
+TeamAppsUiComponentRegistry.registerComponentClass("UiNotificationBar", UiNotificationBar);
diff --git a/teamapps-client/ts/modules/UiPageView.ts b/teamapps-client/ts/modules/UiPageView.ts
index 158a40545..2d8dd3dbc 100644
--- a/teamapps-client/ts/modules/UiPageView.ts
+++ b/teamapps-client/ts/modules/UiPageView.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,44 +17,49 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-import * as $ from "jquery";
-import {UiComponent} from "./UiComponent";
+
+import {AbstractUiComponent} from "./AbstractUiComponent";
 import {TeamAppsUiContext} from "./TeamAppsUiContext";
 import {UiPageViewBlock_Alignment, UiPageViewBlockConfig} from "../generated/UiPageViewBlockConfig";
 import {UiMessagePageViewBlockConfig} from "../generated/UiMessagePageViewBlockConfig";
-import {parseHtml, removeDangerousTags} from "./Common";
+import {insertAfter, insertBefore, parseHtml, removeClassesByFunction, removeDangerousTags} from "./Common";
 import {UiComponentConfig} from "../generated/UiComponentConfig";
 import {UiCitationPageViewBlockConfig} from "../generated/UiCitationPageViewBlockConfig";
 import {UiComponentPageViewBlockConfig} from "../generated/UiComponentPageViewBlockConfig";
 import {UiPageViewConfig} from "../generated/UiPageViewConfig";
 import {TeamAppsUiComponentRegistry} from "./TeamAppsUiComponentRegistry";
 import {UiPageViewBlockCreatorImageAlignment} from "../generated/UiPageViewBlockCreatorImageAlignment";
+import {executeWhenFirstDisplayed} from "./util/ExecuteWhenFirstDisplayed";
+import {UiComponent} from "./UiComponent";
+import {UiHorizontalElementAlignment} from "../generated/UiHorizontalElementAlignment";
+import {UiToolButton} from "./micro-components/UiToolButton";
 // require("bootstrap/js/transition");
 // require("bootstrap/js/carousel");
+import {fixed_partition} from "image-layout";
 
 
 interface Row {
-	$row: JQuery;
-	$headerContainer: JQuery;
-	$leftColumn: JQuery;
-	$rightColumn: JQuery;
+	$row: HTMLElement;
+	$headerContainer: HTMLElement;
+	$leftColumn: HTMLElement;
+	$rightColumn: HTMLElement;
 	blocks: Block[];
 }
 
 interface Block {
-	$blockWrapper: JQuery;
-	$blockContentContainer: JQuery;
-	block: BlockComponent<UiPageViewBlockConfig>;
+	$blockWrapper: HTMLElement;
+	$blockContentContainer: HTMLElement;
+	block: AbstractBlockComponent<UiPageViewBlockConfig>;
 }
 
-export class UiPageView extends UiComponent<UiPageViewConfig> {
+export class UiPageView extends AbstractUiComponent<UiPageViewConfig> {
 
-	private $component: JQuery;
+	private $component: HTMLElement;
 	private rows: Row[] = [];
 
 	constructor(config: UiPageViewConfig, context: TeamAppsUiContext) {
 		super(config, context);
-		this.$component = $(`<div class="UiPageView"></div>`);
+		this.$component = parseHtml(`<div class="UiPageView"></div>`);
 
 		if (config.blocks) {
 			for (var i = 0; i < config.blocks.length; i++) {
@@ -63,10 +68,11 @@ export class UiPageView extends UiComponent<UiPageViewConfig> {
 		}
 	}
 
-	public getMainDomElement(): JQuery {
+	public doGetMainElement(): HTMLElement {
 		return this.$component;
 	}
 
+	@executeWhenFirstDisplayed()
 	public addBlock(blockConfig: UiPageViewBlockConfig, before: boolean, otherBlockId?: string) {
 		let row;
 		if (this.rows.length == 0) {
@@ -85,30 +91,32 @@ export class UiPageView extends UiComponent<UiPageViewConfig> {
 			// TODO
 		}
 
-		let $blockWrapper = $(`<div class="block-wrapper teamapps-blurredBackgroundImage">
+		let $blockWrapper = parseHtml(`<div class="block-wrapper teamapps-blurredBackgroundImage">
     <div class="background-color-div"></div>
 </div>`);
-		let $blockContentContainer = $blockWrapper.find('.background-color-div');
-		let block = new (blockTypes[blockConfig._type as keyof typeof blockTypes] as any)(blockConfig, this._context) as BlockComponent<UiPageViewBlockConfig>;
-		block.getMainDomElement().appendTo($blockContentContainer);
+		let $blockContentContainer = $blockWrapper.querySelector<HTMLElement>(':scope .background-color-div');
+		let block = new (blockTypes[blockConfig._type as keyof typeof blockTypes] as any)(blockConfig, this._context) as AbstractBlockComponent<UiPageViewBlockConfig>;
+		$blockContentContainer.appendChild(block.getMainDomElement());
 		row.blocks.push({$blockWrapper, $blockContentContainer, block});
 
 		// TODO prepend vs append vs insert...
 		if (blockConfig.alignment === UiPageViewBlock_Alignment.FULL) {
-			row.$headerContainer.append($blockWrapper);
+			row.$headerContainer.appendChild($blockWrapper);
 		} else if (blockConfig.alignment === UiPageViewBlock_Alignment.LEFT) {
-			row.$leftColumn.append($blockWrapper);
+			row.$leftColumn.appendChild($blockWrapper);
 		} else if (blockConfig.alignment === UiPageViewBlock_Alignment.RIGHT) {
-			row.$rightColumn.append($blockWrapper);
+			row.$rightColumn.appendChild($blockWrapper);
 		}
-		block.attachedToDom = this.attachedToDom;
 	}
 
 	private addRow(before: boolean, otherRowIndex?: number): Row {
-		let $row = $('<div class="block-section row">');
-		let $headerContainer = $('<div class="header-container col-md-12">').appendTo($row);
-		let $leftColumn = $('<div class="left-column col-md-8">').appendTo($row);
-		let $rightColumn = $('<div class="right-column col-md-4">').appendTo($row);
+		let $row = parseHtml('<div class="block-section row">');
+		let $headerContainer = parseHtml('<div class="header-container col-md-12">');
+		$row.appendChild($headerContainer);
+		let $leftColumn = parseHtml('<div class="left-column col-md-8">');
+		$row.appendChild($leftColumn);
+		let $rightColumn = parseHtml('<div class="right-column col-md-4">');
+		$row.appendChild($rightColumn);
 		let row: Row = {
 			$row: $row,
 			$leftColumn: $leftColumn,
@@ -122,13 +130,13 @@ export class UiPageView extends UiComponent<UiPageViewConfig> {
 			this.$component.prepend($row);
 		} else if (!before && otherRowIndex == null) {
 			this.rows.push(row);
-			this.$component.append($row);
+			this.$component.appendChild($row);
 		} else if (before && otherRowIndex != null) {
 			this.rows.splice(otherRowIndex, 0, row);
-			$row.insertBefore(this.rows[otherRowIndex].$row);
+			insertBefore($row, this.rows[otherRowIndex].$row)
 		} else if (!before && otherRowIndex != null) {
 			this.rows.splice(otherRowIndex + 1, 0, row);
-			$row.insertAfter(this.rows[otherRowIndex].$row);
+			insertAfter($row, this.rows[otherRowIndex].$row)
 		}
 
 		return row;
@@ -141,17 +149,15 @@ export class UiPageView extends UiComponent<UiPageViewConfig> {
 	}
 
 	public destroy(): void {
+		super.destroy();
 		this.rows.forEach(row => {
 			row.blocks.forEach(block => block.block.destroy());
 		});
 	}
 
-	protected onAttachedToDom(): void {
-		this.rows.forEach(row => row.blocks.forEach(block => block.block.attachedToDom = true));
-	}
 }
 
-abstract class BlockComponent<C extends UiPageViewBlockConfig> {
+abstract class AbstractBlockComponent<C extends UiPageViewBlockConfig> {
 	constructor(protected config: C, protected context: TeamAppsUiContext) {
 	}
 
@@ -159,9 +165,7 @@ abstract class BlockComponent<C extends UiPageViewBlockConfig> {
 		return this.config.alignment;
 	}
 
-	abstract getMainDomElement(): JQuery;
-
-	abstract set attachedToDom(attached: boolean);
+	abstract getMainDomElement(): HTMLElement;
 
 	public reLayout() {
 		// default implementation
@@ -172,131 +176,131 @@ abstract class BlockComponent<C extends UiPageViewBlockConfig> {
 	}
 }
 
-class UiMessagePageViewBlock extends BlockComponent<UiMessagePageViewBlockConfig> {
-	private $contentWrapper: JQuery;
-	private $slider: HTMLElement;
-	private $images: HTMLImageElement[] = [];
-	private _attachedToDom: boolean;
+class UiMessagePageViewBlock extends AbstractBlockComponent<UiMessagePageViewBlockConfig> {
+	private $main: HTMLElement;
+	private $toolButtons: Element;
+	private $topRecord: HTMLElement;
+	private $htmlContainer: HTMLElement;
+	private $images: HTMLElement;
+	private images: {
+		$img: HTMLImageElement,
+		width: number,
+		height: number
+	}[] = [];
+
+	private readonly minIdealImageHeight = 250;
 
 	constructor(config: UiMessagePageViewBlockConfig, context: TeamAppsUiContext) {
 		super(config, context);
 
-		this.$contentWrapper = $(`<div class="UiMessagePageViewBlock"></div>`);
-		if (config.creatorImageUrl) {
-			this.$contentWrapper.append(`<div class="creator-image-wrapper align-${UiPageViewBlockCreatorImageAlignment[config.creatorImageAlignment].toLowerCase()}">
-	${config.creatorImageUrl ? `<img class="creator-image" src="${config.creatorImageUrl}"><img>` : ''}
-</div>`)
-		}
-		if (config.headLine) {
-			this.$contentWrapper.append(`<div class="headline">${removeDangerousTags(config.headLine)}</div>`);
-		}
-		if (config.text) {
-			this.$contentWrapper.append(`<div class="text">${removeDangerousTags(config.text)}</div>`);
-		}
-		if (this.config.imageUrls && this.config.imageUrls.length === 1) {
-			this.$contentWrapper.append(`<div class="image"><img src="${this.config.imageUrls[0]}"></div>`);
-		}
+		this.$main = parseHtml(`<div class="pageview-block UiMessagePageViewBlock">
+	<div class="tool-buttons"></div>
+	<div class="top-record"></div>
+	<div class="html"></div>
+	<div class="images"></div>
+</div>`);
+		this.$toolButtons = this.$main.querySelector(":scope .tool-buttons");
+		this.$topRecord = this.$main.querySelector(":scope .top-record");
+		this.$htmlContainer = this.$main.querySelector(":scope .html");
+		this.$images = this.$main.querySelector(":scope .images");
+
+		this.$toolButtons.innerHTML = '';
+		config.toolButtons && config.toolButtons.forEach((tb: UiToolButton) => {
+			this.$toolButtons.appendChild(tb.getMainElement());
+		});
+
+		removeClassesByFunction(this.$topRecord.classList, className => className.startsWith("align-"));
+		this.$topRecord.classList.add("align-" + UiHorizontalElementAlignment[config.topRecordAlignment].toLocaleLowerCase());
+		let topTemplateRenderer = context.templateRegistry.createTemplateRenderer(config.topTemplate);
+		this.$topRecord.innerHTML = config.topRecord != null ? topTemplateRenderer.render(config.topRecord.values) : "";
+
+		this.$htmlContainer.innerHTML = config.html != null ? removeDangerousTags(config.html) : "";
+
 		if (config.imageUrls && config.imageUrls.length > 0) {
-			this.$slider = parseHtml(`<div class="slider"></div>`);
-			this.$contentWrapper.append(this.$slider);
-
-			if (this.config.imageUrls && this.config.imageUrls.length > 1) {
-
-				$(this.$slider).slick({
-					dots: true,
-					infinite: true,
-					speed: 300,
-					slidesToShow: 1,
-					centerMode: true,
-					variableWidth: true,
-					draggable: true,
-
-				});
-
-				for (var i = 0; i < this.config.imageUrls.length; i++) {
-					const $sliderItem = document.createElement("div");
-					$sliderItem.classList.add("slider-item");
-					const $image = new Image();
-					$sliderItem.appendChild($image);
-					$image.classList.add("slider-item-img");
-					$image.onload = () => {
-						$(this.$slider).slick('slickAdd', $sliderItem);
-						this.reLayout();
-					};
-					$image.src = this.config.imageUrls[i];
-					this.$images.push($image);
-				}
+			for (var i = 0; i < this.config.imageUrls.length; i++) {
+				const $image = new Image();
+				let image = {
+					width: this.minIdealImageHeight,
+					height: this.minIdealImageHeight,
+					$img: $image
+				};
+				this.images.push(image);
+				$image.classList.add("image");
+				$image.onload = (event: Event) => {
+					image.width = (event.target as HTMLImageElement).naturalWidth;
+					image.height = (event.target as HTMLImageElement).naturalHeight;
+					this.reLayout();
+				};
+				$image.src = this.config.imageUrls[i];
+				this.$images.appendChild($image);
 			}
 		}
+
 	}
 
 	reLayout() {
-		if (this._attachedToDom) {
-			const minMaxDimensions = this.$images.reduce((minMaxDimensions, $img) => {
-				if ($img.naturalWidth > 0 && $img.naturalHeight > 0) {
-					minMaxDimensions.maxWidth = Math.max(minMaxDimensions.maxWidth, $img.naturalWidth);
-					minMaxDimensions.maxHeight = Math.max(minMaxDimensions.maxHeight, $img.naturalHeight);
-					minMaxDimensions.minWidth = Math.min(minMaxDimensions.minWidth, $img.naturalWidth);
-					minMaxDimensions.minHeight = Math.min(minMaxDimensions.minHeight, $img.naturalHeight);
-				}
-				return minMaxDimensions;
-			}, {minWidth: 10000000, minHeight: 1000000, maxWidth: 0, maxHeight: 0});
-			const applicableWidth = this.$slider.offsetWidth - (this.$slider.offsetWidth * .2);
-			let maxHeight = this.$images.reduce((maxHeight, $img) => {
-				if ($img.naturalWidth > 0 && $img.naturalHeight > 0) {
-					return Math.max(maxHeight, applicableWidth * $img.naturalHeight / $img.naturalWidth);
-				} else {
-					return maxHeight;
-				}
-			}, 0);
-			maxHeight = Math.min(300, maxHeight);
-			this.$images.forEach($img => {
-				if ($img.naturalWidth > 0 && $img.naturalHeight > 0) {
-					const aspectRatio = $img.naturalWidth / $img.naturalHeight;
-					$img.style.height = maxHeight + "px";
-					$img.style.width = (maxHeight * aspectRatio) + "px";
-				}
+		if (this.images.length > 0) {
+			let availableWidth = this.$images.clientWidth;
+			let layout = fixed_partition(this.images, {
+				containerWidth: availableWidth,
+				idealElementHeight: Math.max(this.minIdealImageHeight, availableWidth / 3),
+				align: 'center',
+				spacing: 10
 			});
+			for (let i = 0; i < this.images.length; i++) {
+				this.images[i].$img.style.left = layout.positions[i].x + "px";
+				this.images[i].$img.style.top = layout.positions[i].y + "px";
+				this.images[i].$img.style.width = layout.positions[i].width + "px";
+				this.images[i].$img.style.height = layout.positions[i].height + "px";
+			}
+			this.$images.style.height = layout.height + "px";
+		} else {
+			this.$images.style.height = "0";
 		}
 	}
 
-	public getMainDomElement(): JQuery {
-		return this.$contentWrapper;
-	}
-
-	public set attachedToDom(attachedToDom: boolean) {
-		this._attachedToDom = attachedToDom;
-		this.reLayout();
+	public getMainDomElement(): HTMLElement {
+		return this.$main;
 	}
 
 	public destroy(): void {
 		// nothing to do
 	}
+
 }
 
-class UiCitationPageViewBlock extends BlockComponent<UiCitationPageViewBlockConfig> {
+class UiCitationPageViewBlock extends AbstractBlockComponent<UiCitationPageViewBlockConfig> {
 
-	private $component: JQuery;
+	private $main: HTMLElement;
+	private $toolButtons: Element;
 
 	constructor(config: UiCitationPageViewBlockConfig, context: TeamAppsUiContext) {
 		super(config, context);
 
-		this.$component = $(`<div class="UiCitationPageViewBlock">
-    <div class="creator-image-wrapper align-${UiPageViewBlockCreatorImageAlignment[config.creatorImageAlignment].toLowerCase()}">
-		${config.creatorImageUrl ? `<img class="creator-image" src="${config.creatorImageUrl}"><img>` : ''}
-    </div>
-    <div class="content-wrapper">
-
-    </div>
+		this.$main = parseHtml(`<div class="pageview-block UiCitationPageViewBlock">
+    <div class="tool-buttons"></div>
+    <div class="flex-container">
+	    <div class="creator-image-wrapper align-${UiPageViewBlockCreatorImageAlignment[config.creatorImageAlignment].toLowerCase()}">
+			${config.creatorImageUrl ? `<img class="creator-image" src="${config.creatorImageUrl}"></img>` : ''}
+	    </div>
+	    <div class="content-wrapper"></div>
+	</div>
 </div>`);
-		let $contentWrapper = this.$component.find('.content-wrapper');
-		$contentWrapper.append(`<div class="citation">${removeDangerousTags(config.citation)}</div>`);
-		$contentWrapper.append(`<div class="author">${removeDangerousTags(config.author)}</div>`);
+		let $contentWrapper = this.$main.querySelector<HTMLElement>(':scope .content-wrapper');
+		$contentWrapper.appendChild($(`<div class="citation">${removeDangerousTags(config.citation)}</div>`)[0]);
+		$contentWrapper.appendChild($(`<div class="author">${removeDangerousTags(config.author)}</div>`)[0]);
+
+		this.$toolButtons = this.$main.querySelector(":scope .tool-buttons");
+		this.$toolButtons.innerHTML = '';
+		config.toolButtons && config.toolButtons.forEach((tb: UiToolButton) => {
+			this.$toolButtons.appendChild(tb.getMainElement());
+		});
+
 	}
 
 
-	public getMainDomElement(): JQuery {
-		return this.$component;
+	public getMainDomElement(): HTMLElement {
+		return this.$main;
 	}
 
 	public set attachedToDom(attachedToDom: boolean) {
@@ -308,38 +312,38 @@ class UiCitationPageViewBlock extends BlockComponent<UiCitationPageViewBlockConf
 	}
 }
 
-class UiComponentPageViewBlock extends BlockComponent<UiComponentPageViewBlockConfig> {
+class UiComponentPageViewBlock extends AbstractBlockComponent<UiComponentPageViewBlockConfig> {
 
-	private $div: JQuery;
+	private $main: HTMLElement;
 	private component: UiComponent<UiComponentConfig>;
-	private $componentWrapper: JQuery;
+	private $componentWrapper: HTMLElement;
+	private $toolButtons: Element;
 
 	constructor(config: UiComponentPageViewBlockConfig, context: TeamAppsUiContext) {
 		super(config, context);
 
-		this.$div = $(`<div class="UiComponentPageViewBlock" style="height:${config.height}px">
-                <div class="component-wrapper">
+		this.$main = parseHtml(`<div class="pageview-block UiComponentPageViewBlock" style="height:${config.height}px">
+	<div class="tool-buttons"></div>
+                <div class="component-wrapper"></div>
             </div>`);
-		this.$componentWrapper = this.$div.find('.component-wrapper');
+		this.$componentWrapper = this.$main.querySelector<HTMLElement>(':scope .component-wrapper');
+		this.$toolButtons = this.$main.querySelector(":scope .tool-buttons");
 
+		this.$toolButtons.innerHTML = '';
+		config.toolButtons && config.toolButtons.forEach((tb: UiToolButton) => {
+			this.$toolButtons.appendChild(tb.getMainElement());
+		});
+		
 		if (config.title) {
-			this.$div.prepend(`<div class="title">${removeDangerousTags(config.title)}</div>`);
+			this.$main.prepend($(`<div class="title">${removeDangerousTags(config.title)}</div>`)[0]);
 		}
 
-		this.component = config.component;
-		this.component.getMainDomElement().appendTo(this.$componentWrapper);
-	}
-
-	public getMainDomElement(): JQuery {
-		return this.$div;
-	}
-
-	public set attachedToDom(attachedToDom: boolean) {
-		this.component.attachedToDom = attachedToDom;
+		this.component = config.component as UiComponent;
+		this.$componentWrapper.appendChild(this.component.getMainElement());
 	}
 
-	public reLayout(): void {
-		this.component.reLayout();
+	public getMainDomElement(): HTMLElement {
+		return this.$main;
 	}
 
 	public destroy(): void {
diff --git a/teamapps-client/ts/modules/UiPanel.ts b/teamapps-client/ts/modules/UiPanel.ts
index e89a7059d..540b3b189 100644
--- a/teamapps-client/ts/modules/UiPanel.ts
+++ b/teamapps-client/ts/modules/UiPanel.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,46 +17,45 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-import * as $ from "jquery";
+
 import {UiPanelHeaderFieldConfig} from "../generated/UiPanelHeaderFieldConfig";
 import {UiField} from "./formfield/UiField";
 import {UiToolbar} from "./tool-container/toolbar/UiToolbar";
 import {UiComponentConfig} from "../generated/UiComponentConfig";
 import {UiToolButton} from "./micro-components/UiToolButton";
-import {UiComponent} from "./UiComponent";
+import {AbstractUiComponent} from "./AbstractUiComponent";
 import {UiDropDown} from "./micro-components/UiDropDown";
 import {TeamAppsUiContext} from "./TeamAppsUiContext";
-import {executeWhenAttached} from "./util/ExecuteWhenAttached";
+import {executeWhenFirstDisplayed} from "./util/ExecuteWhenFirstDisplayed";
 import {UiPanel_HeaderComponentMinimizationPolicy, UiPanel_WindowButtonClickedEvent, UiPanelCommandHandler, UiPanelConfig, UiPanelEventSource,} from "../generated/UiPanelConfig";
 import {createUiToolButtonConfig} from "../generated/UiToolButtonConfig";
 import {TeamAppsUiComponentRegistry} from "./TeamAppsUiComponentRegistry";
-import {createUiColorCssString} from "./util/CssFormatUtil";
 import {StaticIcons} from "./util/StaticIcons";
 import {UiWindowButtonType} from "../generated/UiWindowButtonType";
 import {TeamAppsEvent} from "./util/TeamAppsEvent";
-import {EventFactory} from "../generated/EventFactory";
-import {maximizeComponent} from "./Common";
+import {insertBefore, maximizeComponent, outerWidthIncludingMargins, parseHtml, prependChild} from "./Common";
+import {UiComponent} from "./UiComponent";
 
 interface HeaderField {
 	config: UiPanelHeaderFieldConfig;
 	field: UiField;
-	$wrapper: JQuery;
-	$iconAndFieldWrapper: JQuery;
-	$fieldWrapper: JQuery;
-	$icon: JQuery;
+	$wrapper: HTMLElement;
+	$iconAndFieldWrapper: HTMLElement;
+	$fieldWrapper: HTMLElement;
+	$icon: HTMLElement;
 	minimizedWidth?: number;
 	minExpandedWidthWithIcon?: number;
 	minExpandedWidth?: number;
 }
 
-export class UiPanel extends UiComponent<UiPanelConfig> implements UiPanelCommandHandler, UiPanelEventSource {
+export class UiPanel extends AbstractUiComponent<UiPanelConfig> implements UiPanelCommandHandler, UiPanelEventSource {
 
-	public readonly onWindowButtonClicked: TeamAppsEvent<UiPanel_WindowButtonClickedEvent> = new TeamAppsEvent(this);
+	public readonly onWindowButtonClicked: TeamAppsEvent<UiPanel_WindowButtonClickedEvent> = new TeamAppsEvent();
 
 	private readonly defaultToolButtons = {
-		[UiWindowButtonType.MINIMIZE]: new UiToolButton(createUiToolButtonConfig("MINIMIZE", StaticIcons.MINIMIZE, "Minimize"), this._context),
-		[UiWindowButtonType.MAXIMIZE_RESTORE]: new UiToolButton(createUiToolButtonConfig("MAXIMIZE_RESTORE", StaticIcons.MAXIMIZE, "Maximize/Restore"), this._context),
-		[UiWindowButtonType.CLOSE]: new UiToolButton(createUiToolButtonConfig("CLOSE", StaticIcons.CLOSE, "Close"), this._context),
+		[UiWindowButtonType.MINIMIZE]: new UiToolButton(createUiToolButtonConfig(StaticIcons.MINIMIZE, "Minimize", {debuggingId: "window-button-minimize"}), this._context),
+		[UiWindowButtonType.MAXIMIZE_RESTORE]: new UiToolButton(createUiToolButtonConfig(StaticIcons.MAXIMIZE, "Maximize/Restore", {debuggingId: "window-button-maximize"}), this._context),
+		[UiWindowButtonType.CLOSE]: new UiToolButton(createUiToolButtonConfig(StaticIcons.CLOSE, "Close", {debuggingId: "window-button-close"}), this._context),
 	};
 	private readonly orderedDefaultToolButtonTypes = [
 		UiWindowButtonType.MINIMIZE,
@@ -64,86 +63,84 @@ export class UiPanel extends UiComponent<UiPanelConfig> implements UiPanelComman
 		UiWindowButtonType.CLOSE
 	];
 
-	private $panel: JQuery;
-	private $heading: JQuery;
-	private $parentDomElement: JQuery; // When maximizing, this component is taken out of the DOM. When minimizing, it has to be reattached to this parent element.
-	private $toolbarContainer: JQuery;
-	private $bodyContainer: JQuery;
-	private $leftComponentWrapper: JQuery;
-	private $headingSpacer: JQuery;
-	private $rightComponentWrapper: JQuery;
-	private $buttonContainer: JQuery;
-	private $windowButtonContainer: JQuery;
-	private $icon: JQuery;
-	private $title: JQuery;
-
-	private contentComponent: UiComponent<UiComponentConfig>;
+	private $panel: HTMLElement;
+	private $heading: HTMLElement;
+	private $toolbarContainer: HTMLElement;
+	private panelBody: HTMLElement;
+	private $leftComponentWrapper: HTMLElement;
+	private $headingSpacer: HTMLElement;
+	private $rightComponentWrapper: HTMLElement;
+	private $buttonContainer: HTMLElement;
+	private $windowButtonContainer: HTMLElement;
+	private $icon: HTMLElement;
+	private $title: HTMLElement;
+	private $badge: HTMLElement;
+
 	private leftHeaderField: HeaderField;
 	private rightHeaderField: HeaderField;
 	private leftComponentFirstMinimized: boolean;
 	private alwaysShowHeaderFieldIcons: boolean;
 	private toolbar: UiToolbar;
 	private icon: string;
-	private title: string;
 
 	private titleNaturalWidth: number;
+	private badgeNaturalWidth: number;
+
 	private toolButtons: UiToolButton[] = [];
 	private windowButtons: UiWindowButtonType[];
-	private dropDown: UiDropDown;
-	private restoreFunction: (animationCallback: () => void) => void;
+	private restoreFunction: (animationCallback?: () => void) => void;
 
 	constructor(config: UiPanelConfig, context: TeamAppsUiContext) {
 		super(config, context);
-		this.$panel = $(`<div id="${config.id}" class="UiPanel panel teamapps-blurredBackgroundImage">
+		this.$panel = parseHtml(`<div class="UiPanel panel teamapps-blurredBackgroundImage">
                 <div class="panel-heading">
-                    <div class="panel-icon"/>
-                    <div class="panel-title"/>
-                    <div class="panel-component-wrapper panel-left-component-wrapper"/>
-                    <div class="panel-heading-spacer"/>
-                    <div class="panel-component-wrapper panel-right-component-wrapper"/>
-                    <div class="panel-heading-buttons"/>
-                    <div class="panel-heading-window-buttons hidden"/>
+                    <div class="panel-icon"></div>
+                    <div class="panel-title"></div>
+                    <div class="panel-badge"></div>
+                    <div class="panel-component-wrapper panel-left-component-wrapper"></div>
+                    <div class="panel-heading-spacer"></div>
+                    <div class="panel-component-wrapper panel-right-component-wrapper"></div>
+                    <div class="panel-heading-buttons"></div>
+                    <div class="panel-heading-window-buttons hidden"></div>
                 </div>
                 <div class="toolbar-container"></div>
-                <div class="panel-body">
-                  <div class="body-container scroll-container" style="padding: ${config.padding}px"></div>
-                </div>
+                <div class="panel-body" style="padding: ${config.padding}px"></div>
             </div>`);
 
-		this.$toolbarContainer = this.$panel.find('.toolbar-container');
-		this.$bodyContainer = this.$panel.find('.body-container');
-		this.$heading = this.$panel.find('>.panel-heading');
-		this.$icon = this.$heading.find('>.panel-icon');
-		this.$title = this.$heading.find('>.panel-title');
-		this.$leftComponentWrapper = this.$heading.find('>.panel-left-component-wrapper');
-		this.$headingSpacer = this.$heading.find('>.panel-heading-spacer');
-		this.$rightComponentWrapper = this.$heading.find('>.panel-right-component-wrapper');
-		this.$buttonContainer = this.$heading.find('>.panel-heading-buttons');
-		this.$windowButtonContainer = this.$heading.find('>.panel-heading-window-buttons');
+		this.$toolbarContainer = this.$panel.querySelector(':scope .toolbar-container');
+		this.panelBody = this.$panel.querySelector(':scope .panel-body');
+		this.$heading = this.$panel.querySelector(':scope >.panel-heading');
+		this.$icon = this.$heading.querySelector(':scope >.panel-icon');
+		this.$title = this.$heading.querySelector(':scope >.panel-title');
+		this.$badge = this.$heading.querySelector(':scope >.panel-badge');
+		this.$leftComponentWrapper = this.$heading.querySelector(':scope >.panel-left-component-wrapper');
+		this.$headingSpacer = this.$heading.querySelector(':scope >.panel-heading-spacer');
+		this.$rightComponentWrapper = this.$heading.querySelector(':scope >.panel-right-component-wrapper');
+		this.$buttonContainer = this.$heading.querySelector(':scope >.panel-heading-buttons');
+		this.$windowButtonContainer = this.$heading.querySelector(':scope >.panel-heading-window-buttons');
 
 		this.alwaysShowHeaderFieldIcons = config.alwaysShowHeaderFieldIcons;
 		this.setIcon(config.icon);
 		this.setTitle(config.title);
+		this.setBadge(config.badge);
 		this.setLeftHeaderField(config.leftHeaderField);
 		this.setRightHeaderField(config.rightHeaderField);
-		this.setToolButtons(config.toolButtons);
+		this.setToolButtons(config.toolButtons as UiToolButton[]);
 
 		if (config.hideTitleBar) {
-			this.$heading.addClass('hidden');
-			this.$panel.addClass("empty-heading");
+			this.$heading.classList.add('hidden');
+			this.$panel.classList.add("empty-heading");
 		} else {
-			this.$heading.removeClass('hidden');
-			this.$panel.removeClass("empty-heading");
+			this.$heading.classList.remove('hidden');
+			this.$panel.classList.remove("empty-heading");
 		}
 
-		this.setToolbar(config.toolbar);
+		this.setToolbar(config.toolbar as UiToolbar);
 		if (config.content) {
-			this.setContent(config.content);
+			this.setContent(config.content as UiComponent);
 		}
 		this.leftComponentFirstMinimized = this._config.headerComponentMinimizationPolicy == UiPanel_HeaderComponentMinimizationPolicy.LEFT_COMPONENT_FIRST;
 
-		this.dropDown = new UiDropDown();
-
 		this.defaultToolButtons[UiWindowButtonType.MAXIMIZE_RESTORE].onClicked.addListener(() => {
 			if (this.restoreFunction == null) {
 				this.maximize();
@@ -153,7 +150,9 @@ export class UiPanel extends UiComponent<UiPanelConfig> implements UiPanelComman
 		});
 		this.orderedDefaultToolButtonTypes.forEach(windowButtonType => {
 			this.defaultToolButtons[windowButtonType].onClicked.addListener(() => {
-				this.onWindowButtonClicked.fire(EventFactory.createUiPanel_WindowButtonClickedEvent(this.getId(), windowButtonType));
+				this.onWindowButtonClicked.fire({
+					windowButton: windowButtonType
+				});
 			});
 		});
 		this.setWindowButtons(config.windowButtons);
@@ -170,27 +169,26 @@ export class UiPanel extends UiComponent<UiPanelConfig> implements UiPanelComman
 
 	public maximize(): void {
 		this.defaultToolButtons[UiWindowButtonType.MAXIMIZE_RESTORE].setIcon(StaticIcons.RESTORE);
-		this.restoreFunction = maximizeComponent(this, () => this.reLayout(true));
+		this.restoreFunction = maximizeComponent(this);
 	}
 
 	public restore(): void {
 		this.defaultToolButtons[UiWindowButtonType.MAXIMIZE_RESTORE].setIcon(StaticIcons.MAXIMIZE);
 		if (this.restoreFunction != null) {
-			this.restoreFunction(() => this.reLayout(true));
+			this.restoreFunction();
 		}
 		this.restoreFunction = null;
 	}
 
 	public setDraggable(draggable: boolean) {
-		this.$heading.prop("draggable", draggable);
+		this.$heading.draggable = draggable;
 	}
 
 	public setToolButtons(toolButtons: UiToolButton[]) {
 		this.toolButtons = [];
-		this.$buttonContainer[0].innerHTML = '';
+		this.$buttonContainer.innerHTML = '';
 		toolButtons && toolButtons.forEach(toolButton => {
-			toolButton.getMainDomElement().appendTo(this.$buttonContainer);
-			toolButton.attachedToDom = this.attachedToDom;
+			this.$buttonContainer.appendChild(toolButton.getMainElement());
 			this.toolButtons.push(toolButton);
 		});
 		this.relayoutHeader();
@@ -198,7 +196,7 @@ export class UiPanel extends UiComponent<UiPanelConfig> implements UiPanelComman
 
 	public setWindowButtons(buttonTypes: UiWindowButtonType[]): void {
 		this.windowButtons = [];
-		this.$windowButtonContainer[0].innerHTML = '';
+		this.$windowButtonContainer.innerHTML = '';
 		if (buttonTypes && buttonTypes.length > 0) {
 			buttonTypes.forEach(toolButton => {
 				this.addWindowButton(toolButton);
@@ -212,29 +210,29 @@ export class UiPanel extends UiComponent<UiPanelConfig> implements UiPanelComman
 		if (this.windowButtons.filter(tb => tb === toolButtonType).length > 0){
 			this.removeWindowButton(toolButtonType);
 		}
-		this.$windowButtonContainer.removeClass("hidden");
+		this.$windowButtonContainer.classList.remove("hidden");
 		this.windowButtons.push(toolButtonType);
 		const button = this.defaultToolButtons[toolButtonType];
-		if (this.$windowButtonContainer[0].children.length === 0) {
-			button.getMainDomElement().prependTo(this.$windowButtonContainer);
+		if (this.$windowButtonContainer.children.length === 0) {
+			prependChild(this.$windowButtonContainer, button.getMainElement());
 		} else {
 			let index = this.windowButtons
 				.sort((a, b) =>this.orderedDefaultToolButtonTypes.indexOf(a) - this.orderedDefaultToolButtonTypes.indexOf(b))
 				.indexOf(toolButtonType);
-			if (index >= this.$windowButtonContainer[0].childNodes.length) {
-				button.getMainDomElement().appendTo(this.$windowButtonContainer);
+			if (index >= this.$windowButtonContainer.childNodes.length) {
+				this.$windowButtonContainer.appendChild(button.getMainElement());
 			} else {
-				button.getMainDomElement().insertBefore(this.$windowButtonContainer[0].children[index]);
+				insertBefore(button.getMainElement(), this.$windowButtonContainer.children[index]);
 			}
 		}
 		this.relayoutHeader();
 	}
 
 	public removeWindowButton(uiToolButton: UiWindowButtonType) {
-		this.defaultToolButtons[uiToolButton].getMainDomElement().detach();
+		this.defaultToolButtons[uiToolButton].getMainElement().remove();
 		this.windowButtons = this.windowButtons.filter(tb => tb !== uiToolButton);
 		if (this.windowButtons.length === 0) {
-			this.$windowButtonContainer.addClass("hidden");
+			this.$windowButtonContainer.classList.add("hidden");
 		}
 	}
 
@@ -242,42 +240,31 @@ export class UiPanel extends UiComponent<UiPanelConfig> implements UiPanelComman
 		return this.defaultToolButtons[buttonType];
 	}
 
-	public getMainDomElement(): JQuery {
+	public doGetMainElement(): HTMLElement {
 		return this.$panel;
 	}
 
 	public setContent(content: UiComponent) {
-		if (content == this.contentComponent) {
-			return;
+		if (content?.getMainElement() !== this.panelBody.firstElementChild) {
+			this.panelBody.innerHTML = '';
 		}
-		this.$bodyContainer[0].innerHTML = '';
-		this.contentComponent = content;
 		if (content != null) {
-			this.contentComponent.getMainDomElement().appendTo(this.$bodyContainer);
-			this.contentComponent.attachedToDom = this.attachedToDom;
+			this.panelBody.appendChild(content.getMainElement());
 		}
 	}
 
-	protected onAttachedToDom() {
-		this.toolButtons.forEach(toolButton => toolButton.attachedToDom = true);
-		if (this.toolbar) this.toolbar.attachedToDom = true;
-		if (this.contentComponent) this.contentComponent.attachedToDom = true;
-		this.reLayout();
-	}
-
-	@executeWhenAttached(true)
+	@executeWhenFirstDisplayed(true)
 	private calculateFieldWrapperSizes() {
 		this.headerFields.forEach(headerField => {
 			if (!headerField.minimizedWidth || !headerField.minExpandedWidth || !headerField.minExpandedWidthWithIcon) {
-				headerField.$fieldWrapper.css("transition", "none");
-				this.setMinimizedFields(headerField);
-				this.$heading.addClass("has-minimized-header-component");
-				headerField.minimizedWidth = headerField.$iconAndFieldWrapper.outerWidth(true);
-				this.setMinimizedFields();
-				headerField.minExpandedWidthWithIcon = headerField.$iconAndFieldWrapper.outerWidth(true) - headerField.$fieldWrapper[0].offsetWidth + headerField.config.minWidth;
-				this.$heading.removeClass("has-minimized-header-component");
-				headerField.minExpandedWidth = headerField.$iconAndFieldWrapper.outerWidth(true) - headerField.$fieldWrapper[0].offsetWidth + headerField.config.minWidth;
-				headerField.$fieldWrapper.css("transition", "");
+				headerField.$fieldWrapper.style.transition = "none";
+				this.setHeaderFieldDisplayMode(headerField, true, true);
+				headerField.minimizedWidth = outerWidthIncludingMargins(headerField.$iconAndFieldWrapper);
+				this.setHeaderFieldDisplayMode(headerField, false, true);
+				headerField.minExpandedWidthWithIcon = outerWidthIncludingMargins(headerField.$iconAndFieldWrapper) - headerField.$fieldWrapper.offsetWidth + headerField.config.minWidth;
+				this.setHeaderFieldDisplayMode(headerField, false, false);
+				headerField.minExpandedWidth = outerWidthIncludingMargins(headerField.$iconAndFieldWrapper) - headerField.$fieldWrapper.offsetWidth + headerField.config.minWidth;
+				headerField.$fieldWrapper.style.transition = "";
 			}
 		});
 	}
@@ -288,11 +275,17 @@ export class UiPanel extends UiComponent<UiPanelConfig> implements UiPanelComman
 
 	private setMinimizedFields(...minimizedHeaderFields: HeaderField[]) {
 		this.headerFields.forEach(headerField => {
-			headerField.$wrapper.toggleClass("minimized", minimizedHeaderFields.indexOf(headerField) != -1);
-			headerField.$wrapper.toggleClass("display-icon", minimizedHeaderFields.length > 0 || this.alwaysShowHeaderFieldIcons);
+			let shouldBeMinimized = minimizedHeaderFields.indexOf(headerField) != -1;
+			let shouldDisplayIcon = minimizedHeaderFields.length > 0 || this.alwaysShowHeaderFieldIcons;
+			this.setHeaderFieldDisplayMode(headerField, shouldBeMinimized, shouldDisplayIcon);
 		});
 	}
 
+	private setHeaderFieldDisplayMode(headerField: HeaderField, minimized: boolean, displayIcon: boolean) {
+		headerField.$wrapper.classList.toggle("minimized", minimized);
+		headerField.$wrapper.classList.toggle("display-icon", displayIcon);
+	}
+
 	public setLeftHeaderField(headerFieldConfig: UiPanelHeaderFieldConfig) {
 		this.leftHeaderField = this.setHeaderField(headerFieldConfig, this.$leftComponentWrapper, true);
 		this.calculateFieldWrapperSizes();
@@ -305,29 +298,28 @@ export class UiPanel extends UiComponent<UiPanelConfig> implements UiPanelComman
 		this.relayoutHeader();
 	}
 
-	private setHeaderField(headerFieldConfig: UiPanelHeaderFieldConfig, $componentWrapper: JQuery, isLeft: boolean): HeaderField {
+	private setHeaderField(headerFieldConfig: UiPanelHeaderFieldConfig, $componentWrapper: HTMLElement, isLeft: boolean): HeaderField {
 		if (isLeft && this.leftHeaderField) {
-			this.leftHeaderField.$iconAndFieldWrapper.detach();
+			this.leftHeaderField.$iconAndFieldWrapper.remove();
 		} else if (!isLeft && this.rightHeaderField) {
-			this.rightHeaderField.$iconAndFieldWrapper.detach();
+			this.rightHeaderField.$iconAndFieldWrapper.remove();
 		}
 
-		$componentWrapper[0].innerHTML = '';
-		$componentWrapper.hide();
+		$componentWrapper.innerHTML = '';
+		$componentWrapper.classList.add('hidden');
 		if (headerFieldConfig) {
-			let iconPath = this._context.getIconPath(headerFieldConfig.icon, 16);
-			let $iconAndFieldWrapper = $(`<div class="icon-and-field-wrapper">
-                    <div class="icon img img-16" style="background-image: ${iconPath ? 'url(' + iconPath + ')' : 'none'}"></div>
+			let $iconAndFieldWrapper = parseHtml(`<div class="icon-and-field-wrapper">
+                    <div class="icon img img-16" style="background-image: ${headerFieldConfig.icon ? `url('${headerFieldConfig.icon}')` : 'none'}"></div>
                     <div class="field-wrapper"></div>
                 </div>`);
-			let $icon = $iconAndFieldWrapper.find('>.icon');
-			$icon.click(() => {
+			let $icon = $iconAndFieldWrapper.querySelector<HTMLElement>(':scope >.icon');
+			$icon.addEventListener('click', () => {
 				this.leftComponentFirstMinimized = !isLeft;
 				this.relayoutHeader();
 			});
-			let $fieldWrapper = $iconAndFieldWrapper.find('>.field-wrapper');
+			let $fieldWrapper = $iconAndFieldWrapper.querySelector<HTMLElement>(':scope >.field-wrapper');
 			const field = (headerFieldConfig.field as UiField);
-			field.getMainDomElement().appendTo($fieldWrapper);
+			$fieldWrapper.appendChild(field.getMainElement());
 			field.onVisibilityChanged.addListener(visible => {
 				this.relayoutHeader();
 			});
@@ -339,109 +331,95 @@ export class UiPanel extends UiComponent<UiPanelConfig> implements UiPanelComman
 				$icon: $icon,
 				$fieldWrapper
 			};
-			$componentWrapper.append($iconAndFieldWrapper).show();
+			$componentWrapper.appendChild($iconAndFieldWrapper);
+			$componentWrapper.classList.remove('hidden');
 			return headerField;
 		} else {
 			return null;
 		}
 	};
 
-	public setFieldValue(fieldName: string, value: any): void {
-		const field = this.getHeaderFieldByName(fieldName);
-		if (field) {
-			field.field.setCommittedValue(value);
-		}
-	}
-
-	private getHeaderFieldByName(fieldName: string): HeaderField {
-		return this.headerFields
-			.filter(field => field != null && field.config.field.fieldName === fieldName)[0];
-	}
-
 	public setIcon(icon: string) {
 		this.icon = icon;
 		if (icon) {
-			this.$icon[0].innerHTML = '';
-			this.$icon.append('<div class="img img-16" style="background-image: url(' + this._context.getIconPath(icon, 16) + ')"/>');
+			this.$icon.innerHTML = '';
+			this.$icon.appendChild(parseHtml(`<div class="img img-16" style="background-image: url('${icon}')"></div>`));
 		}
-		this.$icon.toggle(icon != null);
+		this.$icon.classList.toggle('hidden', icon == null);
 		this.relayoutHeader();
 	}
 
 	public setTitle(title: string) {
-		this.title = title;
-		this.$title.text(title);
-		this.recalculateTitleNaturalWidth();
-		this.$title.toggle(!!title);
+		this._config.title = title;
+		this.$title.textContent = title;
+		this.titleNaturalWidth = null;
+		this.relayoutHeader();
+	}
+
+	setBadge(badge: string) {
+		this._config.badge = badge;
+		this.$badge.textContent = badge;
+		this.badgeNaturalWidth = null;
 		this.relayoutHeader();
 	}
 
-	private recalculateTitleNaturalWidth() {
-		if (!this.title) {
-			this.titleNaturalWidth = 0;
+	private recalculateNaturalWidth(value: string, element: HTMLElement) {
+		if (!value) {
+			return 0;
 		} else {
-			this.$title.css({
-				position: "absolute",
-				display: "inline-block"
-			}); // TODO
-			this.titleNaturalWidth = this.$title[0].offsetWidth;
-			this.$title.css({
-				position: "",
-				display: ""
-			});
+			element.style.position = "absolute";
+			element.style.display = "inline-block";
+			let width = element.offsetWidth;
+			element.style.position = null;
+			element.style.display = null;
+			return width;
 		}
-	};
+	}
 
 	public setToolbar(toolbar: UiToolbar) {
 		if (this.toolbar != null) {
-			this.toolbar.getMainDomElement().detach();
+			this.toolbar.getMainElement().remove();
 		}
 		this.toolbar = toolbar;
 		if (toolbar) {
-			this.toolbar.getMainDomElement().appendTo(this.$toolbarContainer);
+			this.$toolbarContainer.appendChild(this.toolbar.getMainElement());
 			this.toolbar.onEmptyStateChanged.addListener(() => this.updateToolbarVisibility())
 		}
 		this.updateToolbarVisibility();
 	}
 
 	public setStretchContent(stretch: boolean): void {
-		this.getMainDomElement().get(0).classList.toggle("stretch-content", stretch);
+		this.getMainElement().classList.toggle("stretch-content", stretch);
 	}
 
 	private updateToolbarVisibility() {
-		this.$toolbarContainer.toggleClass('hidden', this.toolbar == null || this.toolbar.empty);
-	}
-
-	public focusField(fieldName: string) {
-		this.getHeaderFieldByName(fieldName).field.focus();
+		this.$toolbarContainer.classList.toggle('hidden', this.toolbar == null || this.toolbar.empty);
 	}
 
 	onResize(): void {
-		if (!this.attachedToDom || this.getMainDomElement()[0].offsetWidth <= 0) return;
 		this.relayoutHeader();
-		this.toolbar && this.toolbar.reLayout();
-		this.contentComponent && this.contentComponent.reLayout();
-		this.leftHeaderField && this.leftHeaderField.field.reLayout();
-		this.rightHeaderField && this.rightHeaderField.field.reLayout();
 	}
 
-	@executeWhenAttached(true)
+	@executeWhenFirstDisplayed(true)
 	private relayoutHeader() {
-		let availableHeaderContentWidth = this.$heading[0].offsetWidth - parseInt(this.$heading.css("padding-left")) - parseInt(this.$heading.css("padding-right"));
-		if (this.title && this.titleNaturalWidth == 0) this.recalculateTitleNaturalWidth();
+		const computedHeadingStyle = getComputedStyle(this.$heading);
+		let availableHeaderContentWidth = this.$heading.offsetWidth - parseInt(computedHeadingStyle.paddingLeft) - parseInt(computedHeadingStyle.paddingRight);
+		if (this._config.title && this.titleNaturalWidth == null) this.titleNaturalWidth = this.recalculateNaturalWidth(this._config.title, this.$title);
+		if (this._config.badge && this.badgeNaturalWidth == null) this.badgeNaturalWidth = this.recalculateNaturalWidth(this._config.badge, this.$badge);
 		if (this.headerFields.some(headerField => !headerField.minimizedWidth)) this.calculateFieldWrapperSizes();
 
-		let titleWidth = Math.floor(this.title ? this.titleNaturalWidth : 0);
-		let iconWidth = (this.icon ? this.$icon[0].offsetWidth + parseInt(this.$icon.css("margin-right")) : 0);
-		let minSpacerWidth = parseInt(this.$headingSpacer.css("flex-basis"));
-		let buttonContainerWidth = this.$buttonContainer[0].offsetWidth;
-		let windowButtonContainerWidth = this.$windowButtonContainer[0].offsetWidth;
+		let titleWidth = Math.ceil(this._config.title ? this.titleNaturalWidth + parseInt(getComputedStyle(this.$title).marginRight) : 0);
+		let badgeWidth = Math.ceil(this._config.badge ? this.badgeNaturalWidth + parseInt(getComputedStyle(this.$title).marginRight) : 0);
+		let iconComputedStyle = getComputedStyle(this.$icon);
+		let iconWidth = (this.icon ? this.$icon.offsetWidth + parseInt(iconComputedStyle.marginLeft) + parseInt(iconComputedStyle.marginRight) : 0);
+		let minSpacerWidth = parseInt(getComputedStyle(this.$headingSpacer).flexBasis);
+		let buttonContainerWidth = this.$buttonContainer.offsetWidth; // TODO 8px???
+		let windowButtonContainerWidth = this.$windowButtonContainer.offsetWidth;
 
 		let minAllExpandedWidth =
-			// 1 // the width of the title may be no integer
-			-1
-			+ iconWidth
+			iconWidth
 			+ titleWidth
+			+ badgeWidth
 			+ minSpacerWidth
 			+ buttonContainerWidth
 			+ windowButtonContainerWidth
@@ -450,22 +428,24 @@ export class UiPanel extends UiComponent<UiPanelConfig> implements UiPanelComman
 				.reduce((totalWidth, fieldWidth) => (totalWidth + fieldWidth), 0);
 
 		if (this.numberOfVisibleHeaderFields() == 2) {
+			this.$heading.classList.remove("no-header-fields");
 			let firstFieldToGetMinified = this.leftComponentFirstMinimized ? this.leftHeaderField : this.rightHeaderField;
 			let alwaysMaximizedField = this.leftComponentFirstMinimized ? this.rightHeaderField : this.leftHeaderField;
 			let minFirstMinimizedWidth =
-				1 // the width of the title may be no integer
 				+ iconWidth
 				+ titleWidth
+				+ badgeWidth
 				+ minSpacerWidth
 				+ buttonContainerWidth
 				+ windowButtonContainerWidth
 				+ firstFieldToGetMinified.minimizedWidth
 				+ alwaysMaximizedField.minExpandedWidthWithIcon;
-			let minWidthNeededWithHiddenHeaderAndOneMinimizedField = minFirstMinimizedWidth - titleWidth;
+			let minWidthNeededWithHiddenTitleAndOneMinimizedField = minFirstMinimizedWidth - titleWidth;
 
 			if (availableHeaderContentWidth >= minAllExpandedWidth) {
-				this.$title.removeClass("hidden").css("width", "");
-				this.$heading.removeClass("has-minimized-header-component");
+				this.$title.classList.remove("hidden");
+				this.$title.style.width = null;
+				this.$heading.classList.remove("has-minimized-header-component");
 				let availableAdditionalSpace = availableHeaderContentWidth - minAllExpandedWidth;
 
 				let minMaxFieldWidthDeltaSum = this.headerFields
@@ -480,72 +460,61 @@ export class UiPanel extends UiComponent<UiPanelConfig> implements UiPanelComman
 						headerField.config.minWidth + availableAdditionalSpace * ((headerField.config.maxWidth - headerField.config.minWidth) / minMaxFieldWidthDeltaSum),
 						headerField.config.maxWidth
 					);
-					headerField.$fieldWrapper.css({
-						width: newFieldWidth,
-					});
+					headerField.$fieldWrapper.style.width = newFieldWidth + "px";
 				});
 			} else if (availableHeaderContentWidth >= minFirstMinimizedWidth) {
-				this.$title.removeClass("hidden").css("width", "");
-				this.$heading.addClass("has-minimized-header-component");
+				this.$title.classList.remove("hidden");
+				this.$title.style.width = null;
+				this.$heading.classList.add("has-minimized-header-component");
 				this.setMinimizedFields(firstFieldToGetMinified);
 				let availableAdditionalSpace = availableHeaderContentWidth - minFirstMinimizedWidth;
 				let newMaximizedFieldWidth = Math.min(alwaysMaximizedField.config.minWidth + availableAdditionalSpace, alwaysMaximizedField.config.maxWidth);
-				alwaysMaximizedField.$fieldWrapper.css({
-					width: newMaximizedFieldWidth,
-				});
-			} else if (availableHeaderContentWidth >= minWidthNeededWithHiddenHeaderAndOneMinimizedField + 30 /* less does not make sense for title */) {
-				this.$title.removeClass("hidden");
-				this.$heading.addClass("has-minimized-header-component");
+				alwaysMaximizedField.$fieldWrapper.style.width = newMaximizedFieldWidth + "px";
+			} else if (availableHeaderContentWidth >= minWidthNeededWithHiddenTitleAndOneMinimizedField + 30 /* less does not make sense for title */) {
+				this.$title.classList.remove("hidden");
+				this.$heading.classList.add("has-minimized-header-component");
 				this.setMinimizedFields(firstFieldToGetMinified);
-				alwaysMaximizedField.$fieldWrapper.css({
-					width: alwaysMaximizedField.config.minWidth,
-				});
-				this.$title.outerWidth(this.titleNaturalWidth - (minFirstMinimizedWidth - availableHeaderContentWidth));
+				alwaysMaximizedField.$fieldWrapper.style.width = alwaysMaximizedField.config.minWidth + "px";
+				this.$title.style.width = (this.titleNaturalWidth - (minFirstMinimizedWidth - availableHeaderContentWidth)) + "px";
 			} else {
-				this.$title.addClass("hidden");
-				this.$heading.addClass("has-minimized-header-component");
+				this.$title.classList.add("hidden");
+				this.$heading.classList.add("has-minimized-header-component");
 				this.setMinimizedFields(firstFieldToGetMinified);
-				const width = alwaysMaximizedField.config.minWidth + (availableHeaderContentWidth - minWidthNeededWithHiddenHeaderAndOneMinimizedField);
-				console.log(alwaysMaximizedField.config.minWidth, (availableHeaderContentWidth - minWidthNeededWithHiddenHeaderAndOneMinimizedField), width);
-				alwaysMaximizedField.$fieldWrapper.css({
-					width: width
-				});
+				const width = alwaysMaximizedField.config.minWidth + (availableHeaderContentWidth - minWidthNeededWithHiddenTitleAndOneMinimizedField);
+				alwaysMaximizedField.$fieldWrapper.style.width = width + "px";
 			}
 		} else if (this.numberOfVisibleHeaderFields() == 1) {
-			this.$heading.removeClass("has-minimized-header-component");
+			this.$heading.classList.remove("no-header-fields");
+			this.$heading.classList.remove("has-minimized-header-component");
 			let headerField = this.leftHeaderField || this.rightHeaderField;
 			this.setMinimizedFields();
 
 			if (availableHeaderContentWidth >= minAllExpandedWidth) {
-				this.$title.removeClass("hidden").css("width", "");
+				this.$title.classList.remove("hidden");
+				this.$title.style.width = null;
 				let availableAdditionalSpace = availableHeaderContentWidth - minAllExpandedWidth;
 				this.headerFields.forEach(headerField => {
 					let newFieldWidth = Math.min(
 						headerField.config.minWidth + availableAdditionalSpace,
 						headerField.config.maxWidth
 					);
-					headerField.$fieldWrapper.css({
-						width: newFieldWidth,
-					});
+					headerField.$fieldWrapper.style.width = newFieldWidth + "px";
 				});
 			} else if (availableHeaderContentWidth >= minAllExpandedWidth - this.titleNaturalWidth + 30 /* less does not make sense for title */) {
-				this.$title.removeClass("hidden");
-				headerField.$fieldWrapper.css({
-					width: headerField.config.minWidth,
-				});
-				this.$title.outerWidth(this.titleNaturalWidth - (minAllExpandedWidth - availableHeaderContentWidth));
+				this.$title.classList.remove("hidden");
+				headerField.$fieldWrapper.style.width = headerField.config.minWidth + "px";
+				this.$title.style.width = (this.titleNaturalWidth - (minAllExpandedWidth - availableHeaderContentWidth)) + "px";
 			} else {
-				this.$title.addClass("hidden");
+				this.$title.classList.add("hidden");
 				let widthLessThanNeeded = availableHeaderContentWidth - minAllExpandedWidth + this.titleNaturalWidth;
-				headerField.$fieldWrapper.css({
-					width: headerField.config.minWidth + widthLessThanNeeded,
-				});
+				headerField.$fieldWrapper.style.width = (headerField.config.minWidth + widthLessThanNeeded) + "px";
 			}
 		} else {
-			this.$heading.removeClass("has-minimized-header-component");
-			this.$title.removeClass("hidden");
+			this.$heading.classList.add("no-header-fields");
+			this.$heading.classList.remove("has-minimized-header-component");
+			this.$title.classList.remove("hidden");
 			let availableAdditionalSpace = availableHeaderContentWidth - minAllExpandedWidth;
-			this.$title.outerWidth(this.titleNaturalWidth + availableAdditionalSpace);
+			this.$title.style.width = null;
 		}
 	};
 
@@ -554,7 +523,8 @@ export class UiPanel extends UiComponent<UiPanelConfig> implements UiPanelComman
 	}
 
 	public destroy(): void {
-		this.$panel.detach(); // may be currently attached to document.body (maximized)
+		super.destroy();
+		this.$panel.remove(); // may be currently attached to document.body (maximized)
 	}
 
 	public static isDraggablePanelHeadingElement(target: HTMLElement): boolean {
diff --git a/teamapps-client/ts/modules/UiPdfViewer.ts b/teamapps-client/ts/modules/UiPdfViewer.ts
new file mode 100644
index 000000000..138fc6003
--- /dev/null
+++ b/teamapps-client/ts/modules/UiPdfViewer.ts
@@ -0,0 +1,653 @@
+/* tslint:disable:indent */
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2025 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+
+import type {PDFDocumentProxy, PDFPageProxy, PageViewport} from "pdfjs-dist";
+import * as pdfjsLib from "pdfjs-dist";
+import {UiBorderConfig} from "../generated/UiBorderConfig";
+import {
+	UiPdfViewer_PdfInitializedEvent, UiPdfViewer_PdfLoadFailedEvent, UiPdfViewer_ZoomFactorAutoChangedEvent,
+	UiPdfViewerCommandHandler,
+	UiPdfViewerConfig
+} from "../generated/UiPdfViewerConfig";
+import {UiPdfViewMode} from "../generated/UiPdfViewMode";
+import {AbstractUiComponent} from "./AbstractUiComponent";
+import {generateUUID, parseHtml} from "./Common";
+import {TeamAppsUiComponentRegistry} from "./TeamAppsUiComponentRegistry";
+import {TeamAppsUiContext} from "./TeamAppsUiContext";
+import {TeamAppsEvent} from "./util/TeamAppsEvent";
+import {floorToPrecision} from "./util/precise-float-math";
+import {UiPdfZoomMode} from "../generated/UiPdfZoomMode";
+import {ContinuousVirtualRenderer} from "./pdf-viewer/ContinuousVirtualRenderer";
+import type {ContinuousVirtualRenderContext} from "./pdf-viewer/ContinuousVirtualRenderer";
+import {SinglePageRenderer} from "./pdf-viewer/SinglePageRenderer";
+import type {SinglePageRenderContext} from "./pdf-viewer/SinglePageRenderer";
+import {ContinuousRenderer} from "./pdf-viewer/ContinuousRenderer";
+import type {ContinuousRenderContext} from "./pdf-viewer/ContinuousRenderer";
+
+type RenderPdfDocumentOptions = {
+	zoomConfigurationChanged?: boolean;
+	stabilizationZoomMode?: UiPdfZoomMode;
+	forceVirtualTeardownBeforeRender?: boolean;
+};
+
+// @ts-ignore
+// import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.mjs';
+// pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;
+// console.log(pdfjsWorker);
+
+// import pdfjsWorker = require('url-loader!pdfjs-dist/build/pdf.worker.mjs');
+// pdfjsLib.GlobalWorkerOptions.workerSrc = "resources/pdf.worker.mjs";
+pdfjsLib.GlobalWorkerOptions.workerSrc = "worker-libs/pdf.worker.mjs";
+
+/**
+ * Docs for Mozillas pdf.js: https://mozilla.github.io/pdf.js/
+ * NPM Package: pdfjs-dist (CAUTION: pdfjs (without -dist) is another package!)
+ */
+export class UiPdfViewer extends AbstractUiComponent<UiPdfViewerConfig> implements UiPdfViewerCommandHandler {
+    // the config will be set in the constructor
+    private config: UiPdfViewerConfig;
+
+    // UI Elements
+    private $main: HTMLDivElement;
+    private $canvas: HTMLCanvasElement;
+    private $canvasContainer: HTMLDivElement;
+    private $pagesContainer: HTMLDivElement;
+    // Monotonic render token to ignore stale async renders when view mode changes.
+    private renderRequestId = 0;
+    private lastViewMode: UiPdfViewMode = null;
+
+    // Dev/Helper elements
+    private $devToolbar: HTMLElement;
+    private $devRenderStats: HTMLDivElement;
+    private devToolsInitialized: boolean = false;
+
+    // UI / internal state
+    private readonly uuidClass: string;
+    private pdfDocument: PDFDocumentProxy;
+    private currentPageNumber: number = 1;
+    private maxPageNumber: number = 0;
+	private pendingShowPageNumber: number = null;
+	private readonly singlePageRenderer: SinglePageRenderer;
+	private readonly continuousRenderer: ContinuousRenderer;
+	private readonly continuousVirtualRenderer: ContinuousVirtualRenderer;
+		// Monotonic token for setUrl() calls: latest URL wins and only the latest load may mutate state or fire init events.
+		private documentLoadRequestId: number = 0;
+
+    // Events for the server
+    // ---------------------
+    public readonly onPdfInitialized: TeamAppsEvent<UiPdfViewer_PdfInitializedEvent> = new TeamAppsEvent();
+
+	/**
+	 * onZoomFactorAutoChanged will only fire when the factor was changed automatically by
+	 * UiPdfZoomMode.TO_WIDTH or UiPdfZoomMode.TO_HEIGHT
+	 */
+	public readonly onZoomFactorAutoChanged: TeamAppsEvent<UiPdfViewer_ZoomFactorAutoChangedEvent> = new TeamAppsEvent();
+	public readonly onPdfLoadFailed: TeamAppsEvent<UiPdfViewer_PdfLoadFailedEvent> = new TeamAppsEvent();
+
+    // Constructor
+    // -----------
+    constructor(config: UiPdfViewerConfig, context: TeamAppsUiContext) {
+        super(config, context);
+
+        this.uuidClass = `UiPdfViewer-${generateUUID()}`;
+        this.config = config;
+        this.$main = parseHtml(`
+        <div class="${this.uuidClass}">
+            <div id="dev-toolbar" class="${this.uuidClass}"></div>
+             <div class="canvas-container ${this.uuidClass}">
+                <div id="pagesContainer" class="${this.uuidClass}">
+                    <canvas class="${this.uuidClass}"></canvas>
+                </div>
+            </div>
+            <style class="${this.uuidClass}">
+                canvas.${this.uuidClass} {
+                    /*border: 1px solid red;*/
+                    display: flex;
+                    flex-flow: row nowrap;
+                    justify-content: center;
+                    
+                    /*overflow-x: auto;*/
+                }
+                div.${this.uuidClass}.canvas-container {
+                    background: oklch(0.3 0 298);
+                    border: 1px solid oklch(0.2 0 298);
+                    display: flex; 
+                    flex-flow: column nowrap;
+                    gap: 1rem;
+                    
+                    /* NOTE: 
+                      "safe center" (instead of only "center") is needed, 
+                      otherwise the pdf is not scrollable in x-axis anymore 
+                      when pdf gets bigger than the width of the canvas-container
+                      support for this is still kinda new (Chrome as of June 2023), see
+                      https://caniuse.com/mdn-css_properties_align-items_flex_context_safe_unsafe
+                      
+                      Since this behavior can be fixed by simply zooming out, I (bjesuiter) leave it like this for now.
+                     */
+                    align-items: safe center;
+                    
+                    flex: 1 1 auto;
+                    min-height: 0;
+                    overflow-y: auto;
+                }
+                div.${this.uuidClass}#pagesContainer {
+                    display: flex;
+                    flex-flow: column nowrap;
+                    align-items: center;
+                }
+                div.${this.uuidClass}#dev-toolbar {
+                    display: flex;
+                    flex-flow: row nowrap;
+                    gap: 1rem;
+                    align-items: center;
+                    margin: 0.5rem;
+                }
+                div.${this.uuidClass}#dev-render-stats {
+                    position: absolute;
+                    top: 2.25rem;
+                    right: 2.5rem;
+                    z-index: 2;
+                    padding: 0.25rem 0.5rem;
+                    border-radius: 0.35rem;
+                    font-size: 0.85rem;
+                    font-weight: 600;
+                    color: #ffffff;
+                    background: rgba(0, 0, 0, 0.5);
+                    pointer-events: none;
+                }
+            </style>
+        </div>`);
+        this.$canvas = this.$main.querySelector<HTMLCanvasElement>(`canvas.${this.uuidClass}`);
+        this.$canvasContainer = this.$main.querySelector<HTMLDivElement>(`div.canvas-container.${this.uuidClass}`);
+        this.$pagesContainer = this.$main.querySelector<HTMLDivElement>(`#pagesContainer`);
+        this.$devRenderStats = document.createElement("div");
+        this.$devRenderStats.className = this.uuidClass;
+        this.$devRenderStats.id = "dev-render-stats";
+        this.$main.appendChild(this.$devRenderStats);
+
+        // Ensure the component itself defines a height context for percentage/flex sizing.
+        this.$main.style.display = "flex";
+        this.$main.style.flexDirection = "column";
+        this.$main.style.height = "100%";
+        this.$main.style.minHeight = "0";
+        this.$main.style.position = "relative";
+
+        // Dev Helper UI
+        this.$devToolbar = this.$main.querySelector<HTMLElement>('#dev-toolbar');
+        this.renderDevToolsIfEnabled();
+
+		this.singlePageRenderer = new SinglePageRenderer({
+			calculateZoomScale: (page) => this.calculateZoomScale(page),
+			updateDevRenderStats: () => this.updateDevRenderStats()
+		});
+
+		this.continuousRenderer = new ContinuousRenderer({
+			calculateZoomScale: (page) => this.calculateZoomScale(page),
+			applyPageBorderToCanvas: (canvas) => this.applyPageBorderToCanvas(canvas),
+			updateDevRenderStats: () => this.updateDevRenderStats()
+		});
+
+		this.continuousVirtualRenderer = new ContinuousVirtualRenderer({
+			calculateZoomScale: (page) => this.calculateZoomScale(page),
+			applyPageBorderToCanvas: (canvas) => this.applyPageBorderToCanvas(canvas),
+			updateDevRenderStats: () => this.updateDevRenderStats()
+        });
+
+        this.renderCanvasContainer();
+        this.updatePageSpacing();
+        this.updateDevRenderStats();
+
+        // Load the pdf by setting it's url
+        setTimeout(async () => {
+            await this.setUrl(config.url);
+        }, 0);
+    }
+
+    public doGetMainElement(): HTMLElement {
+        return this.$main;
+    }
+
+	// Helper Functions
+	// ----------------
+
+	public renderDevToolsIfEnabled() {
+		if (this.config.showDevTools === true) {
+			if (!this.devToolsInitialized) {
+				this.devToolsInitialized = true;
+			}
+			this.$devToolbar.style.display = "flex";
+			this.$devRenderStats.style.display = "block";
+			this.updateDevRenderStats();
+        } else {
+            this.$devToolbar.style.display = "none";
+            this.$devRenderStats.style.display = "none";
+        }
+    }
+
+    public renderCanvasContainer() {
+        const bgColor = this.config.backgroundColor;
+        if (typeof bgColor === "string" && bgColor.length > 0) {
+            this.$canvasContainer.style.backgroundColor = bgColor
+        }
+
+        const borderColor = this.config.borderColor;
+        if (typeof borderColor === "string" && borderColor.length > 0) {
+            this.$canvasContainer.style.borderColor = borderColor;
+        }
+    }
+
+    public updatePageSpacing() {
+        this.$pagesContainer.style.gap = `${this.config.pageSpacing}px`;
+    }
+
+	// Core Class Logic
+	// -----------------
+
+	private calculateZoomScale(page: PDFPageProxy): { scale: number, viewport: PageViewport } {
+		const zoomModeAtInvocation = this.config.zoomMode;
+		const zoomResult = this.computeZoomScale(page, zoomModeAtInvocation, this.config.zoomFactor ?? 1.0);
+		this.applyAutoZoomResult(zoomResult, zoomModeAtInvocation);
+		return {scale: zoomResult.scale, viewport: zoomResult.viewport};
+	}
+
+	private computeZoomScale(page: PDFPageProxy, zoomMode: UiPdfZoomMode, zoomFactor: number): {
+		scale: number,
+		viewport: PageViewport,
+		autoZoomFactor?: number
+	} {
+		let scale = [UiPdfZoomMode.TO_HEIGHT, UiPdfZoomMode.TO_WIDTH].includes(zoomMode)
+			? 1.0 : zoomFactor;
+		let viewport = page.getViewport({scale});
+
+		if (zoomMode === UiPdfZoomMode.TO_WIDTH) {
+			const containerWidth = this.$canvasContainer.clientWidth;
+			if (containerWidth <= 0) {
+				return {scale, viewport};
+			}
+			let autoZoomFactor = containerWidth / viewport.width;
+			autoZoomFactor = floorToPrecision(autoZoomFactor, 2);
+			autoZoomFactor = Math.max(0.1, autoZoomFactor - 0.1);
+			scale = autoZoomFactor;
+			viewport = page.getViewport({scale});
+			return {scale, viewport, autoZoomFactor};
+		}
+
+		if (zoomMode === UiPdfZoomMode.TO_HEIGHT) {
+			const containerHeight = this.$canvasContainer.clientHeight;
+			const availableHeight = containerHeight - this.config.padding * 2;
+			if (availableHeight <= 0) {
+				return {scale, viewport};
+			}
+			let autoZoomFactor = availableHeight / viewport.height;
+			autoZoomFactor = floorToPrecision(autoZoomFactor, 2);
+			scale = autoZoomFactor;
+			viewport = page.getViewport({scale});
+			return {scale, viewport, autoZoomFactor};
+		}
+
+		return {scale, viewport};
+	}
+
+	private applyAutoZoomResult(zoomResult: { autoZoomFactor?: number }, zoomModeAtInvocation: UiPdfZoomMode) {
+		if (zoomResult.autoZoomFactor == null) {
+			return;
+		}
+		// Ignore stale updates when zoom mode changed concurrently.
+		if (this.config.zoomMode !== zoomModeAtInvocation) {
+			return;
+		}
+		this.config.zoomFactor = zoomResult.autoZoomFactor;
+		this.config.zoomMode = UiPdfZoomMode.MANUAL;
+		this.onZoomFactorAutoChanged.fire({
+			zoomFactor: zoomResult.autoZoomFactor
+		});
+	}
+
+    /**
+     * bjesuiter  2025-03-28: only supports page-based rendering for now, sicne it's easier to implement.
+     * Continuous pdf page rendering is on the roadmap, but delayed indefinitely for now.
+     *
+     * @private
+     */
+    private async renderPdfDocument(options: RenderPdfDocumentOptions = {}) {
+        if (!this.pdfDocument) {
+            return;
+        }
+
+		this.applyVirtualLifecyclePolicyBeforeRender(options);
+		await this.renderPdfDocumentCore();
+
+		if (options.stabilizationZoomMode != null) {
+			await this.runVirtualAutoZoomStabilizationPass(options.stabilizationZoomMode);
+		}
+    }
+
+	private applyVirtualLifecyclePolicyBeforeRender(options: RenderPdfDocumentOptions) {
+		if (options.zoomConfigurationChanged === true) {
+			if (this.config.viewMode === UiPdfViewMode.CONTINUOUS_VIRTUAL) {
+				this.teardownContinuousVirtualMode();
+			} else {
+				this.continuousVirtualRenderer.markForRecreate();
+			}
+		}
+
+		if (options.forceVirtualTeardownBeforeRender === true) {
+			this.teardownContinuousVirtualMode();
+		}
+
+		if (this.lastViewMode === UiPdfViewMode.CONTINUOUS_VIRTUAL && this.config.viewMode !== UiPdfViewMode.CONTINUOUS_VIRTUAL) {
+			this.teardownContinuousVirtualMode();
+		}
+		this.lastViewMode = this.config.viewMode;
+	}
+
+	private async renderPdfDocumentCore() {
+		this.$canvasContainer.style.padding = `${this.config.padding}px`;
+		// Incrementing this invalidates all older async rendering work.
+		const requestId = ++this.renderRequestId;
+		this.updateDevRenderStats();
+
+		if (this.config.viewMode === UiPdfViewMode.CONTINUOUS_VIRTUAL) {
+			await this.renderPdfContinuousVirtualMode(requestId);
+		} else if (this.config.viewMode === UiPdfViewMode.CONTINUOUS) {
+			await this.renderPdfContinuousMode(requestId);
+		} else {
+			await this.renderPdfSinglePageMode(requestId);
+		}
+		this.updateDevRenderStats();
+	}
+
+    /**
+     * Based on Example:
+     * https://mozilla.github.io/pdf.js/examples/#:~:text=page*%20here%0A%7D)%3B-,Rendering%20the%20Page,-Each%20PDF%20page
+     * @private
+     */
+	private async renderPdfSinglePageMode(requestId: number) {
+		// Bail out if a newer render was requested while we were queued.
+		if (requestId !== this.renderRequestId) {
+			return;
+		}
+
+		this.applyPagesContainerLayoutForMode(UiPdfViewMode.SINGLE_PAGE);
+		await this.singlePageRenderer.render(this.createSinglePageRenderContext(requestId));
+	}
+
+	private async renderPdfContinuousMode(requestId: number) {
+		// Bail out if a newer render was requested while we were queued.
+		if (requestId !== this.renderRequestId) {
+			return;
+		}
+
+		this.applyPagesContainerLayoutForMode(UiPdfViewMode.CONTINUOUS);
+		await this.continuousRenderer.render(this.createContinuousRenderContext(requestId));
+	}
+
+	private async renderPdfContinuousVirtualMode(requestId: number) {
+		// Bail out if a newer render was requested while we were queued.
+		if (requestId !== this.renderRequestId) {
+			return;
+		}
+
+		this.applyPagesContainerLayoutForMode(UiPdfViewMode.CONTINUOUS_VIRTUAL);
+		await this.continuousVirtualRenderer.render(this.createContinuousVirtualRenderContext(requestId));
+	}
+
+	private createSinglePageRenderContext(requestId: number): SinglePageRenderContext {
+		return {
+			requestId,
+			getCurrentRenderRequestId: () => this.renderRequestId,
+			pdfDocument: this.pdfDocument,
+			currentPageNumber: this.currentPageNumber,
+			pagesContainer: this.$pagesContainer,
+			canvas: this.$canvas
+		};
+	}
+
+	private createContinuousRenderContext(requestId: number): ContinuousRenderContext {
+		return {
+			requestId,
+			getCurrentRenderRequestId: () => this.renderRequestId,
+			pdfDocument: this.pdfDocument,
+			maxPageNumber: this.maxPageNumber,
+			pagesContainer: this.$pagesContainer,
+			uuidClass: this.uuidClass,
+			pageBorder: this.config.pageBorder
+		};
+	}
+
+	private createContinuousVirtualRenderContext(requestId: number): ContinuousVirtualRenderContext {
+		return {
+			requestId,
+			getCurrentRenderRequestId: () => this.renderRequestId,
+			pdfDocument: this.pdfDocument,
+			maxPageNumber: this.maxPageNumber,
+			config: this.config,
+			pagesContainer: this.$pagesContainer,
+			canvasContainer: this.$canvasContainer,
+			uuidClass: this.uuidClass
+		};
+	}
+
+    private applyPagesContainerLayoutForMode(viewMode: UiPdfViewMode) {
+        if (viewMode === UiPdfViewMode.CONTINUOUS_VIRTUAL) {
+            this.$pagesContainer.style.display = "block";
+            this.$pagesContainer.style.flexFlow = "";
+            this.$pagesContainer.style.alignItems = "";
+            this.$pagesContainer.style.position = "relative";
+            this.$pagesContainer.style.gap = "";
+        } else {
+            this.$pagesContainer.style.display = "flex";
+            this.$pagesContainer.style.flexFlow = "column nowrap";
+            this.$pagesContainer.style.alignItems = "center";
+            this.$pagesContainer.style.position = "";
+            this.$pagesContainer.style.gap = `${this.config.pageSpacing}px`;
+        }
+    }
+
+    private teardownContinuousVirtualMode() {
+        this.continuousVirtualRenderer.teardown();
+    }
+
+	private async runVirtualAutoZoomStabilizationPass(zoomMode: UiPdfZoomMode) {
+		if (this.config.viewMode !== UiPdfViewMode.CONTINUOUS_VIRTUAL) {
+			return;
+		}
+		if (zoomMode !== UiPdfZoomMode.TO_WIDTH && zoomMode !== UiPdfZoomMode.TO_HEIGHT) {
+			return;
+		}
+		// IMPORTANT:
+		// Do not restore/preserve scroll position around virtual auto-zoom transitions.
+		// Attempts to keep scroll anchors here caused unstable/broken virtual rendering.
+		await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
+		this.config.zoomMode = zoomMode;
+		await this.renderPdfDocument({
+			forceVirtualTeardownBeforeRender: true
+		});
+	}
+
+    private applyPageBorderToCanvas(canvas: HTMLCanvasElement) {
+        const border = this.config.pageBorder;
+        if (border) {
+            if (border.top) {
+                canvas.style.borderTop = `${border.top.thickness}px solid ${border.top.color}`;
+            }
+            if (border.right) {
+                canvas.style.borderRight = `${border.right.thickness}px solid ${border.right.color}`;
+            }
+            if (border.bottom) {
+                canvas.style.borderBottom = `${border.bottom.thickness}px solid ${border.bottom.color}`;
+            }
+            if (border.left) {
+                canvas.style.borderLeft = `${border.left.thickness}px solid ${border.left.color}`;
+            }
+            if (border.borderRadius) {
+                canvas.style.borderRadius = `${border.borderRadius}px`;
+            }
+        }
+    }
+
+    private updateDevRenderStats() {
+        if (!this.$devRenderStats) {
+            return;
+        }
+        const canvasCount = this.$pagesContainer ? this.$pagesContainer.querySelectorAll("canvas").length : 0;
+        const pageCount = this.pdfDocument?.numPages || this.maxPageNumber || 0;
+        this.$devRenderStats.textContent = `${canvasCount} / ${pageCount}`;
+    }
+
+    // Setters for Server API
+    // -----------------------™
+
+	public async setUrl(url: string) {
+		// Every setUrl() starts a new load generation and invalidates all previous in-flight loads.
+		const loadRequestId = ++this.documentLoadRequestId;
+		try {
+			const pdfDocument = await pdfjsLib.getDocument(url).promise;
+			// Ignore stale completion from an older setUrl() call.
+			if (loadRequestId !== this.documentLoadRequestId) {
+				return;
+			}
+
+			this.pdfDocument = pdfDocument;
+			this.maxPageNumber = this.pdfDocument.numPages;
+			this.currentPageNumber = Math.max(1, Math.min(this.currentPageNumber, this.maxPageNumber));
+			this.updateDevRenderStats();
+
+			await this.renderPdfDocument();
+			// Rendering may finish after a newer setUrl() call has started.
+			if (loadRequestId !== this.documentLoadRequestId) {
+				return;
+			}
+			await this.applyPendingShowPageRequest();
+			if (loadRequestId !== this.documentLoadRequestId) {
+				return;
+			}
+
+			// Guard event emission as well: stale URL loads must not emit onPdfInitialized.
+			// Tell the server the document has loaded after the first renderPdfDocument
+			// since it is async, I can simply wait for it to finish
+			this.onPdfInitialized.fire({
+				numberOfPages: this.maxPageNumber,
+			});
+		} catch (error) {
+			// Report only if this is still the active load request.
+			if (loadRequestId !== this.documentLoadRequestId) {
+				return;
+			}
+			const errorMessage = error instanceof Error ? error.message : String(error);
+			console.error("UiPdfViewer: failed to load PDF URL", {url, error});
+			this.onPdfLoadFailed.fire({
+				url,
+				errorMessage
+			});
+		}
+	}
+
+	private async applyPendingShowPageRequest() {
+		const pendingPage = this.pendingShowPageNumber;
+		if (pendingPage == null) {
+			return;
+		}
+		this.pendingShowPageNumber = null;
+		await this.showPage(pendingPage);
+	}
+
+    public async setShowDevTools(showDevTools:boolean) {
+        this.config.showDevTools = showDevTools;
+        this.renderDevToolsIfEnabled();
+    }
+
+    public async setViewMode(viewMode: UiPdfViewMode) {
+        this.config.viewMode = viewMode;
+        await this.renderPdfDocument();
+    }
+
+    public async showPage(page: number) {
+		if (this.maxPageNumber <= 0) {
+			if (page >= 1) {
+				this.pendingShowPageNumber = page;
+			}
+			return;
+		}
+
+        if (page >= 1 && page <= this.maxPageNumber ) {
+            this.currentPageNumber = page;
+            this.updateDevRenderStats();
+            if (this.config.viewMode === UiPdfViewMode.CONTINUOUS_VIRTUAL) {
+                if (!this.continuousVirtualRenderer.hasVirtualizer()) {
+                    await this.renderPdfDocument();
+                }
+                this.continuousVirtualRenderer.scrollToIndex(page - 1);
+                return;
+            }
+            await this.renderPdfDocument();
+        }
+    }
+
+	public async setZoomFactor(zoomFactor: number) {
+		this.config.zoomFactor = zoomFactor;
+		await this.renderPdfDocument({
+			zoomConfigurationChanged: true
+		});
+	}
+
+	public async setZoomMode(zoomMode: UiPdfZoomMode) {
+		this.config.zoomMode = zoomMode;
+		await this.renderPdfDocument({
+			zoomConfigurationChanged: true,
+			stabilizationZoomMode: zoomMode
+		});
+	}
+
+    public async setPageBorder(pageBorder: UiBorderConfig) {
+        this.config.pageBorder = pageBorder;
+        await this.renderPdfDocument();
+    }
+
+
+    public async setPadding(padding: number) {
+        this.config.padding = padding;
+        await this.renderPdfDocument();
+    }
+
+    /**
+     * This is only relevant in CONTINUOUS render mode
+     * @param pageSpacing
+     */
+    public async setPageSpacing(pageSpacing: number) {
+        this.config.pageSpacing = pageSpacing;
+        this.updatePageSpacing();
+        await this.renderPdfDocument();
+    }
+
+    public async setBackgroundColor(cssColor: string) {
+        this.config.backgroundColor = cssColor;
+        this.renderCanvasContainer();
+    }
+
+    public async setBorderColor(cssColor: string) {
+        this.config.borderColor = cssColor;
+        this.renderCanvasContainer();
+    }
+
+}
+
+TeamAppsUiComponentRegistry.registerComponentClass("UiPdfViewer", UiPdfViewer);
diff --git a/teamapps-client/ts/modules/UiPieChart.ts b/teamapps-client/ts/modules/UiPieChart.ts
index 91a298a76..174034360 100644
--- a/teamapps-client/ts/modules/UiPieChart.ts
+++ b/teamapps-client/ts/modules/UiPieChart.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -15,36 +15,27 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- * =====
-
+ * =========================LICENSE_END==================================
  */
 
-import { UiComponent } from "./UiComponent";
-import { TeamAppsUiComponentRegistry } from "./TeamAppsUiComponentRegistry";
-import {
-	UiPieChart_DataPointClickedEvent,
-	UiPieChartCommandHandler,
-	UiPieChartConfig,
-	UiPieChartEventSource
-} from "../generated/UiPieChartConfig";
-import { TeamAppsUiContext } from "./TeamAppsUiContext";
-import { TeamAppsEvent } from "./util/TeamAppsEvent";
-import { UiChartNamedDataPointConfig } from "../generated/UiChartNamedDataPointConfig";
+import {AbstractUiComponent} from "./AbstractUiComponent";
+import {TeamAppsUiComponentRegistry} from "./TeamAppsUiComponentRegistry";
+import {UiPieChart_DataPointClickedEvent, UiPieChartCommandHandler, UiPieChartConfig, UiPieChartEventSource} from "../generated/UiPieChartConfig";
+import {TeamAppsUiContext} from "./TeamAppsUiContext";
+import {TeamAppsEvent} from "./util/TeamAppsEvent";
+import {UiChartNamedDataPointConfig} from "../generated/UiChartNamedDataPointConfig";
 import * as d3 from "d3"
-import { EventFactory } from "../generated/EventFactory";
-import { UiColorConfig } from '../generated/UiColorConfig';
-import { UiDataPointWeighting } from '../generated/UiDataPointWeighting';
+import {UiDataPointWeighting} from '../generated/UiDataPointWeighting';
 import {UiChartLegendStyle} from "../generated/UiChartLegendStyle";
 
-export class UiPieChart extends UiComponent<UiPieChartConfig> implements UiPieChartCommandHandler, UiPieChartEventSource {
+export class UiPieChart extends AbstractUiComponent<UiPieChartConfig> implements UiPieChartCommandHandler, UiPieChartEventSource {
 
-	readonly onDataPointClicked: TeamAppsEvent<UiPieChart_DataPointClickedEvent> = new TeamAppsEvent(this);
+	readonly onDataPointClicked: TeamAppsEvent<UiPieChart_DataPointClickedEvent> = new TeamAppsEvent();
 
-	chart: any;
+	chart: Chart;
 	config: UiPieChartConfig;
 
 
-
 	constructor(config: UiPieChartConfig, context: TeamAppsUiContext) {
 		super(config, context);
 		this.config = config;
@@ -52,28 +43,31 @@ export class UiPieChart extends UiComponent<UiPieChartConfig> implements UiPieCh
 	}
 
 	createChart() {
-		let htmlDivElement: any = document.createElement("div");
+		let htmlDivElement = document.createElement("div");
+		htmlDivElement.classList.add("UiPieChart");
 
 		//@ts-ignore
-		this.chart = Chart()
+		this.chart = new Chart()
 			.container(htmlDivElement)
 			.data(this.config)
 			.onDataPointClicked((name: string) => {
-				this.onDataPointClicked.fire(EventFactory.createUiPieChart_DataPointClickedEvent(this.getId(), name));
+				this.onDataPointClicked.fire({
+					dataPointName: name
+				});
 			})
 			.render();
 	}
-	getMainDomElement(): JQuery<HTMLElement> {
-		return $(this.chart.container());
+
+	doGetMainElement(): HTMLElement {
+		return this.chart.container() as HTMLElement;
 	}
 
 	onResize(): void {
 
 		// Get our dimensions
-		let newWidth = this.getWidth()
-		let newHeight = this.getHeight()
+		let newWidth = this.getWidth();
+		let newHeight = this.getHeight();
 
-		
 
 		// Update chart dimensions
 		this.chart.svgWidth(newWidth)
@@ -142,31 +136,127 @@ This code is based on following convention:
 https://github.com/bumbeishvili/d3-coding-conventions/blob/84b538fa99e43647d0d4717247d7b650cb9049eb/README.md
 */
 
-function Chart() {
-	// Exposed variables
-	var attrs: PieChartAttributes = {
-		id: 'ID' + Math.floor(Math.random() * 1000000), // Id for event handlings
-		svgWidth: 400,
-		svgHeight: 400,
-		marginTop: 5,
-		marginBottom: 5,
-		marginRight: 5,
-		marginLeft: 5,
-		container: 'body',
-		defaultTextFill: '#2C3E50',
-		defaultFont: 'Helvetica',
-		data: null,
-		duration: 750,
-		firstRun: true,
-		onDataPointClicked: (name: string) => { }
-	};
-
-	//InnerFunctions which will update visuals
-	var updateData: (...x: any[]) => any;
-
-	//Main chart object
-	var main: any = function () {
+// Mixins
+interface Chart {
+	getChartState: () => PieChartAttributes;
+
+	svgWidth(): number,
+	svgWidth(svgWidth: number): Chart,
+	svgHeight(): number,
+	svgHeight(svgHeight: number): Chart,
+	marginTop(): number,
+	marginTop(marginTop: number): Chart,
+	marginBottom(): number,
+	marginBottom(marginBottom: number): Chart,
+	marginRight(): number,
+	marginRight(marginRight: number): Chart,
+	marginLeft(): number,
+	marginLeft(marginLeft: number): Chart,
+	container(): Element,
+	container(container: Element): Chart,
+	defaultTextFill(): string,
+	defaultTextFill(defaultTextFill: string): Chart,
+	defaultFont(): string,
+	defaultFont(defaultFont: string): Chart,
+	data(): UiPieChartConfig,
+	data(data: UiPieChartConfig): Chart,
+	duration(): number,
+	duration(duration: number): Chart,
+	firstRun(): boolean,
+	firstRun(firstRun: boolean): Chart,
+	onDataPointClicked(): (id: string) => void,
+	onDataPointClicked(onDataPointClicked: (id: string) => void): Chart,
+	rx(): number,
+	rx(rx: number): Chart,
+	ry(): number,
+	ry(ry: number): Chart,
+	h(): number,
+	h(h: number): Chart,
+	ir(): number
+	ir(ir: number): Chart
+
+}
+
+class Chart {
+
+	/** It feels so wrong declaring this variable
+	 *  We don't use it, if we have used it, it won't be in static context
+	 *  Basically we use this variable to make typescript compiler to not to complain about this._current usage in the static methods
+	 *  where 'this' is bound externally using method.bind(this) syntax
+	 */
+	static _current: any;
+
+
+	constructor() {
+		// Exposed variables
+		const attrs: PieChartAttributes = {
+			id: 'ID' + Math.floor(Math.random() * 1000000), // Id for event handlings
+			svgWidth: 400,
+			svgHeight: 400,
+			marginTop: 5,
+			marginBottom: 5,
+			marginRight: 5,
+			marginLeft: 5,
+			container: 'body',
+			defaultTextFill: '#2C3E50',
+			defaultFont: 'Helvetica',
+			data: null,
+			duration: 750,
+			firstRun: true,
+			onDataPointClicked: (name) => {
+			},
+			rx: null,
+			ry: null,
+			h: null,
+			ir: null
+		};
+
+		this.getChartState = () => attrs;
+
+		// Dynamically create accessor functions
+		Object.keys(attrs).forEach((key) => {
+			//@ts-ignore
+			this[key] = function (_) {
+				var string = `attrs['${key}'] = _`;
+				if (!arguments.length) {
+					return eval(`attrs['${key}'];`);
+				}
+				eval(string);
+				return this;
+			};
+
+		});
+
+		this.initializeEnterExitUpdatePattern();
+	}
+
+	// Make charts updatable
+	initializeEnterExitUpdatePattern() {
+		d3.selection.prototype.patternify = function ({selector, tag, data}: PatternifyParameter) {
+			var container = this;
+			data = data || [selector];
+			// Pattern in action
+			var selection = container.selectAll('.' + selector).data(data, (d: any, i: number) => {
+					if (typeof d === 'object') {
+						if (d.id) {
+							return d.id;
+						}
+					}
+					return i;
+				});
+			selection.exit().remove();
+			selection = selection.enter().append(tag).merge(selection);
+			selection.attr('class', selector);
+			return selection;
+		};
+	}
+
+	// Render elements
+	render() {
+		const attrs = this.getChartState();
+		const self = this;
 		attrs.marginBottom = 5 + attrs.data.height3D;
+
 		// Drawing containers
 		var container: any = d3.select(attrs.container);
 		// var containerRect = container.node().getBoundingClientRect();
@@ -187,24 +277,29 @@ function Chart() {
 		calc.chartHeight = attrs.svgHeight - attrs.marginBottom - calc.chartTopMargin;
 		calc.centerX = calc.chartWidth / 2;
 		calc.centerY = calc.chartHeight / 2;
-
+		attrs.calc = calc;
 
 		// -----------------  LAYOUTS  ----------------
-		const layouts: { pie?: any } = {};
+		const layouts: Layouts = {};
 		layouts.pie = d3.pie().sort(null).value((d: any) => d.value);
+		attrs.layouts = layouts;
 
 		// ------------------ OVERRIDES & CONVERSATION ------------------
-
-
 		const rx = Math.min(calc.chartWidth, calc.chartHeight * 90 / attrs.data.rotation3D) / 2;
 		const ry = attrs.data.rotation3D / 90 * rx;
 		const h = attrs.data.height3D;
 		const ir = attrs.data.innerRadiusProportion;
 		const rotation = attrs.data.rotationClockwise;
-
-		const convertedData: { label: string, color: string, value: number, type: string }[] = attrs.data.dataPoints.map(point => {
+		attrs.rx = rx;
+		attrs.ry = ry;
+		attrs.h = h;
+		attrs.ir = ir;
+		attrs.rotation = rotation;
+
+		// Converting data to desired format
+		const convertedData = attrs.data.dataPoints.map(point => {
 			const label = point.name;
-			const color = colorToRGBAString(point.color);
+			const color = point.color;
 			const value = point.y;
 			return {
 				label: label,
@@ -226,6 +321,7 @@ function Chart() {
 				//Check if sum of them is not more than 1
 				const sum = d3.sum(convertedData, d => d.value);
 
+				// Check if it;s correct weighting
 				if (sum < 1) {
 					// Attach dummy data element, which will be transparent
 					convertedData.push({
@@ -239,12 +335,13 @@ function Chart() {
 			}
 
 		}
+
 		// Storing sum of elements
 		calc.sum = d3.sum(convertedData, d => d.value);
 
 		// Generate data, which contains info about pie angles
 		const pieData = layouts.pie(convertedData)
-			.map((d: any) => {
+			.map((d: { startAngle: number, endAngle: number }) => {
 				// Add configs  clockwise rotation, to the generated angles
 				return Object.assign(d, {
 					startAngle: d.startAngle + (Math.PI * 2 * (rotation % 360) / 360),
@@ -252,617 +349,704 @@ function Chart() {
 				})
 			})
 
-
 		//Add svg
 		var svg = container
-			.patternify({ tag: 'svg', selector: 'svg-chart-container' })
+			.patternify({
+				tag: 'svg',
+				selector: 'svg-chart-container'
+			})
 			.attr('width', attrs.svgWidth)
 			.attr('height', attrs.svgHeight)
 			.attr('font-family', attrs.defaultFont);
 
 		//Add container g element
 		var chart = svg
-			.patternify({ tag: 'g', selector: 'chart' })
+			.patternify({
+				tag: 'g',
+				selector: 'chart'
+			})
 			.attr('transform', 'translate(' + calc.chartLeftMargin + ',' + calc.chartTopMargin + ')');
 
-
 		// Center point
-		var centerPoint = chart.patternify({ tag: 'g', selector: 'center-point' })
-			.attr('transform', `translate(${calc.centerX},${calc.centerY})`)
+		attrs.centerPoint = chart.patternify({
+			tag: 'g',
+			selector: 'center-point'
+		})
+			.attr('transform', `translate(${calc.centerX},${calc.centerY})`);
 
 
 		// Draw pie
-		draw(pieData, rx, ry, h, ir);
+		this.draw(pieData, attrs);
 
-		// Smoothly handle data updating
-		updateData = function (transitionTime) {
-
-
-		};
 
+		//#########################################  UTIL FUNCS ##################################
+		d3.select(window).on('resize.' + attrs.id, () => {
+			var containerRect = container.node().getBoundingClientRect();
+			if (containerRect.width > 0) this.svgWidth(containerRect.width);
+			this.render();
+		});
 
+		// Store state, whether app was first run or not
+		attrs.firstRun = false;
+		return this;
+	}
 
-		// -------------- EVENT HANDLERS ----------------
-		function onSliceClick(d: any) {
-			attrs.onDataPointClicked(d.data.label);
-		}
+	draw(
+		data: PieDataObject[],
+		{
+			rx /*radius x*/,
+			ry /*radius y*/,
+			h /*height*/,
+			ir /*inner radius*/
+		}: PieChartAttributes
+	) {
+
+		const attrs = this.getChartState();
+		const calc = attrs.calc;
+		const self = this;
+
+		// Placeholder data
+		const _data = data;
+
+		// Create Slices and shape containers
+		var slices = attrs.centerPoint
+			.patternify({
+				tag: 'g',
+				selector: 'slices'
+			})
 
-		function onSliceMouseEnter(d: any) {
+		// Store reference for func access
+		attrs.slices = slices;
 
-		}
+		const outerSliceWrapper = attrs.centerPoint
+			.patternify({
+				tag: 'g',
+				selector: 'outerSliceWrapper'
+			})
 
-		function onSliceMouseLeave(d: any) {
+		const topSliceWrapper = attrs.centerPoint
+			.patternify({
+				tag: 'g',
+				selector: 'topSliceWrapper'
+			})
 
-		}
 
+		// Creating inner slice custom paths
+		const pieInners = slices
+			.patternify({
+				tag: 'path',
+				selector: 'innerSlice',
+				data: _data
+			})
+			.style("fill", function (d: PieDataObject) {
+				return d3.hsl(d.data.color).darker(2).toString()
+			})
+			.attr("d", function (d: PieDataObject) {
+				return Chart.pieInner(d, attrs);
+			})
+			.classed('slice-sort', true)
+			.on('click', (d: PieDataObject) => self.onSliceClick(d))
+			.on('mouseenter', (d: PieDataObject) => self.onSliceMouseEnter(d))
+			.on('mouseleave', (d: PieDataObject) => self.onSliceMouseLeave(d))
+
+		// Transition  inner  elements
+		pieInners
+			.transition()
+			.duration(attrs.duration)
+			.attrTween("d", function (d: PieDataObject) {
+				return Chart.arcTweenInner.bind(this)(d, attrs)
+			})
+			.on('end', function (d: PieDataObject) {
+				this._current = d;
+			})
 
-		//#########################################  UTIL FUNCS ##################################
+		// Create corner slice paths
+		const cornerSliceElements = slices
+			.patternify({
+				tag: 'path',
+				selector: 'cornerSlices',
+				data: _data.map((d) => Object.assign({}, d))
+			})
+			.style("fill", (d: PieDataObject) => {
+				return d3.hsl(d.data.color).darker(0.7).toString();
+			})
+			.attr("d", function (d: PieDataObject) {
+				return Chart.pieCorner(d, attrs);
+			})
+			.classed('slice-sort', true)
+			.attr('pointer-events', '')
+			.style("stroke", function (d: PieDataObject) {
+				return d3.hsl(d.data.color).darker(0.7).toString()
+			})
+			.on('click', (d: PieDataObject) => self.onSliceClick(d))
+			.on('mouseenter', (d: PieDataObject) => self.onSliceMouseEnter(d))
+			.on('mouseleave', (d: PieDataObject) => self.onSliceMouseLeave(d))
+			.attr('opacity', (d: PieDataObject, i: number, arr: PieDataObject[]) => {
+				if (d.endAngle > Math.PI && d.endAngle <= (Math.PI + Math.PI / 2)
+				) {
+					return 0;
+				}
+				if (arr.length - 2 == i) {
+					return 1;
+				}
+				return 0;
+			})
 
-		// Put element sorting logic in sorElements function
-		function sortElements() {
-		}
+		// Store reference for function access
+		attrs.cornerSliceElements = cornerSliceElements;
 
-		//Corner shape transitions
-		function arcTweenCorner(a: any) {
-			if (!this._current) {
-				this._current = Object.assign({}, a, {
-					startAngle: 0,
-					endAngle: 0
-				})
-			}
-			var i = d3.interpolate(this._current, a);
-			this._current = i(0);
-			return function (t: any) {
-				return pieCorner(i(t), rx + 0.5, ry + 0.5, h, ir);
-			};
-		}
+		// Transition corner elements
+		cornerSliceElements
+			.transition()
+			.duration(attrs.duration)
+			.attrTween("d", function (d: PieDataObject) {
+				return Chart.arcTweenCorner.bind(this)(d, attrs)
+			})
+			.on('end', function (d: PieDataObject) {
+				this._current = d;
+			})
 
-		//Corner surface shape transitions
-		function arcTweenCornerSurface(a: any) {
-			if (!this._current) {
-				this._current = Object.assign({}, a, {
-					startAngle: 0,
-					endAngle: 0
-				})
-			}
-			var i = d3.interpolate(this._current, a);
-			this._current = i(0);
-			return function (t: any) {
-				return pieCornerSurface(i(t), rx + 0.5, ry + 0.5, h, ir);
-			};
-		}
+		// Create corner slice surface paths
+		const cornerSliceSurfaceElements = slices
+			.patternify({
+				tag: 'path',
+				selector: 'cornerSlicesSurface',
+				data: _data.map((d) => Object.assign({}, d))
+			})
+			.style("fill", function (d: PieDataObject) {
+				return d3.hsl(d.data.color).darker(0.7).toString()
+			})
+			.attr("d", function (d: PieDataObject) {
+				return Chart.pieCornerSurface(d, attrs);
+			})
+			.classed('slice-sort', true)
+			.style("stroke", function (d: PieDataObject) {
+				return d3.hsl(d.data.color).darker(0.7).toString()
+			})
+			.on('click', (d: PieDataObject) => self.onSliceClick(d))
+			.on('mouseenter', (d: PieDataObject) => self.onSliceMouseEnter(d))
+			.on('mouseleave', (d: PieDataObject) => self.onSliceMouseLeave(d))
+			.attr('opacity', (d: PieDataObject, i: number, arr: PieDataObject[]) => {
+				if (d.startAngle < Math.PI / 2 ||
+					d.startAngle > Math.PI * 3 / 2
+				) {
+					return 0;
+				}
+				if (0 == i) {
+					return 1;
+				}
+				return 0;
+			})
 
-		//Inner shape transitions
-		function arcTweenInner(a: any) {
-			if (!this._current) {
-				this._current = Object.assign({}, a, {
-					startAngle: 0,
-					endAngle: 0
-				})
-			}
-			var i = d3.interpolate(this._current, a);
-			this._current = i(0);
-			return function (t: any) {
-				return pieInner(i(t), rx + 0.5, ry + 0.5, h, ir);
-			};
-		}
+		// Store reference for function access
+		attrs.cornerSliceSurfaceElements = cornerSliceSurfaceElements;
 
-		//Top shape transitions
-		function arcTweenTop(a: any) {
-			if (!this._current) {
-				this._current = Object.assign({}, a, {
-					startAngle: 0,
-					endAngle: 0
-				})
-			}
-			var i = d3.interpolate(this._current, a);
-			this._current = i(0);
-			return function (t: any) {
-				return pieTop(i(t), rx, ry, ir);
-			};
-		}
+		// Transition corner Surface elements
+		cornerSliceSurfaceElements
+			.transition()
+			.duration(attrs.duration)
+			.attrTween("d", function (d: PieDataObject) {
+				return Chart.arcTweenCornerSurface.bind(this)(d, attrs)
+			})
+			.on('end', function (d: PieDataObject) {
+				this._current = d;
+			})
 
-		//Outer shape transitions
-		function arcTweenOuter(a: any) {
-			if (!this._current) {
-				this._current = Object.assign({}, a, {
-					startAngle: 0,
-					endAngle: 0
-				})
-			}
-			var i = d3.interpolate(this._current, a);
-			this._current = i(0);
-			return function (t: any) { return pieOuter(i(t), rx - .5, ry - .5, h, ir); };
-		}
+		// Draw outer slices
+		const outerSlices = outerSliceWrapper
+			.patternify({
+				tag: 'path',
+				selector: 'outerSlice',
+				data: _data
+			})
+			.style("fill", function (d: PieDataObject) {
+				return d3.hsl(d.data.color).darker(0.7).toString()
+			})
+			.on('click', (d: PieDataObject) => self.onSliceClick(d))
+			.on('mouseenter', (d: PieDataObject) => self.onSliceMouseEnter(d))
+			.on('mouseleave', (d: PieDataObject) => self.onSliceMouseLeave(d))
+
+		// Transition  outer   elements
+		outerSlices.transition()
+			.duration(attrs.duration)
+			.attrTween("d", function (d: PieDataObject) {
+				return Chart.arcTweenOuter.bind(this)(d, attrs)
+			})
+			.on('end', function (d: PieDataObject) {
+				this._current = d;
+			})
 
+		// Draw top slices
+		const topSlices = topSliceWrapper
+			.patternify({
+				tag: 'path',
+				selector: 'topSlice',
+				data: _data
+			})
+			.style("fill", function (d: PieDataObject) {
+				return d.data.color;
+			})
+			.style("stroke", function (d: PieDataObject) {
+				return d.data.color;
+			})
+			//	.attr("d", function (d: any) { return pieTop(d, rx, ry, ir); })
+			.on('click', (d: PieDataObject) => self.onSliceClick(d))
+			.on('mouseenter', (d: PieDataObject) => self.onSliceMouseEnter(d))
+			.on('mouseleave', (d: PieDataObject) => self.onSliceMouseLeave(d))
+
+		// Transition  top  elements
+		topSlices.transition()
+			.duration(attrs.duration)
+			.attrTween("d", function (d: PieDataObject) {
+				return Chart.arcTweenTop.bind(this)(d, attrs)
+			})
+			.on('end', function (d: PieDataObject) {
+				this._current = d;
+			})
 
-		//Text  transitions
-		function textTweenTransform(a: any) {
-			if (!this._current) {
-				this._current = Object.assign({}, a, {
-					startAngle: 0,
-					endAngle: 0
-				})
-			}
-			var i = d3.interpolate(this._current, a);
-			this._current = i(0);
-			return function (t: any) {
-				const d = i(t);
+		// Draw Texts
+		const slicesTexts = topSliceWrapper
+			.patternify({
+				tag: 'text',
+				selector: 'pie-labels',
+				data: _data.map((d) => Object.assign({}, d))
+			})
+			.attr('text-anchor', 'middle')
+			.attr('font-size', 10)
+			.attr('transform', (d: PieDataObject) => {
 				const centerAngle = ((d.startAngle + d.endAngle) / 2) % (Math.PI * 2);
 				const x = rx * 0.8 * Math.cos(centerAngle);
 				const y = ry * 0.8 * Math.sin(centerAngle);
 				return `translate(${x},${y}) `
-			};
-		}
+			})
+			.text((d: PieDataObject) => d.data.label + ' (' + Math.round(d.value / calc.sum * 100) + '%)')
+			.attr('opacity', (d: PieDataObject) => d.data.type == "dummy" ? -1 : 1)
+
+		// Transition  text  elements
+		slicesTexts.transition()
+			.duration(attrs.duration)
+			.attrTween("transform", function (d: PieDataObject) {
+				return Chart.textTweenTransform.bind(this)(d, attrs)
+			})
 
-		// This function converts RGBA color object to js compatible rgba string color
-		function colorToRGBAString(color: UiColorConfig) {
-			return `rgba(${color.red},${color.green},${color.blue},${color.alpha == undefined ? 0 : color.alpha})`
-		}
+	}
 
+	updateData(transitionTime: number) {
 
-		//******* Function is responsible for building left corner shape paths */
-		function pieCornerSurface(d: any, rx: number, ry: number, h: number, ir: number) {
-
-			//  Calculating  left corner surface key points
-			var sxFirst = ir * rx * Math.cos(d.startAngle);
-			var syFirst = ir * ry * Math.sin(d.startAngle)
-			var sxSecond = rx * Math.cos(d.startAngle);
-			var sySecond = ry * Math.sin(d.startAngle);
-			var sxThird = sxSecond;
-			var syThird = sySecond + h;
-			var sxFourth = sxFirst;
-			var syFourth = syFirst + h;
-
-			// Creating custom path based on calculation
-			return `
-				M ${sxFirst} ${syFirst} 
-				L ${sxSecond} ${sySecond}
-				L ${sxThird} ${syThird} 
-				L ${sxFourth} ${syFourth}
-				z
-	    `
-		}
+		return this;
+	}
 
-		//********** Function is responsible for building right corner shape paths */
-		function pieCorner(d: any, rx: number, ry: number, h: number, ir: number) {
-
-			//  Calculating  right corner surface key points
-			var sxFirst = ir * rx * Math.cos(d.endAngle);
-			var syFirst = ir * ry * Math.sin(d.endAngle);
-			var sxSecond = rx * Math.cos(d.endAngle);
-			var sySecond = ry * Math.sin(d.endAngle);
-			var sxThird = sxSecond;
-			var syThird = sySecond + h;
-			var sxFourth = sxFirst;
-			var syFourth = syFirst + h;
-
-			// Creating custom path based on calculation
-			return `
-				M ${sxFirst} ${syFirst} 
-				L ${sxSecond} ${sySecond}
-				L ${sxThird} ${syThird} 
-				L ${sxFourth} ${syFourth}
-				z
-				`
-		}
+	onSliceClick(d: PieDataObject) {
+		const attrs = this.getChartState();
+		attrs.onDataPointClicked(d.data.label);
+	}
 
-		//********** Function is responsible for building top  shape paths */
-		function pieTop(d: any, rx: number, ry: number, ir: number) {
+	onSliceMouseEnter(d: PieDataObject) {
 
-			// If angles are equal, then we got nothing to draw
-			if (d.endAngle - d.startAngle == 0) return "M 0 0";
+	}
 
-			// Calculating shape key points
-			var sx = rx * Math.cos(d.startAngle),
-				sy = ry * Math.sin(d.startAngle),
-				ex = rx * Math.cos(d.endAngle),
-				ey = ry * Math.sin(d.endAngle);
+	onSliceMouseLeave(d: PieDataObject) {
 
-			// Creating custom path based on calculation
-			var ret = [];
-			ret.push("M", sx, sy, "A", rx, ry, "0", (d.endAngle - d.startAngle > Math.PI ? 1 : 0), "1", ex, ey, "L", ir * ex, ir * ey);
-			ret.push("A", ir * rx, ir * ry, "0", (d.endAngle - d.startAngle > Math.PI ? 1 : 0), "0", ir * sx, ir * sy, "z");
-			return ret.join(" ");
-		}
+	}
 
-		//********** Function is responsible for building outer  shape paths */
-		function pieOuter(d: any, rx: number, ry: number, h: number, ir: number) {
+	// This function converts RGBA color object to js compatible rgba string color
+	//********** Function is responsible for building outer  shape paths */
+	static pieOuter(d: PieDataObject, {rx, ry, h, ir}: PieChartAttributes) {
 
-			// Process corner Cases
-			if (d.endAngle == Math.PI * 2 && d.startAngle > Math.PI && d.startAngle < Math.PI * 2) {
-				return ""
-			}
-			if (d.startAngle > Math.PI * 3 && d.startAngle < Math.PI * 4 &&
-				d.endAngle > Math.PI * 3 && d.endAngle <= Math.PI * 4) {
-				return ""
-			}
+		// Process corner Cases
+		if (d.endAngle == Math.PI * 2 && d.startAngle > Math.PI && d.startAngle < Math.PI * 2) {
+			return ""
+		}
+		if (d.startAngle > Math.PI * 3 && d.startAngle < Math.PI * 4 &&
+			d.endAngle > Math.PI * 3 && d.endAngle <= Math.PI * 4) {
+			return ""
+		}
 
-			// Reassign startAngle  and endAngle based on their positions
-			var startAngle = d.startAngle;
-			var endAngle = d.endAngle;
-			if (d.startAngle > Math.PI && d.startAngle < Math.PI * 2) {
-				startAngle = Math.PI;
-				if (d.endAngle > Math.PI * 2) {
-					startAngle = 0;
-				}
-			}
-			if (d.endAngle > Math.PI && d.endAngle < Math.PI * 2) {
-				endAngle = Math.PI;
-			}
-			if (d.startAngle > Math.PI * 2) {
-				startAngle = d.startAngle % (Math.PI * 2);
-			}
+		// Reassign startAngle  and endAngle based on their positions
+		var startAngle = d.startAngle;
+		var endAngle = d.endAngle;
+		if (d.startAngle > Math.PI && d.startAngle < Math.PI * 2) {
+			startAngle = Math.PI;
 			if (d.endAngle > Math.PI * 2) {
-				endAngle = d.endAngle % (Math.PI * 2);
-				if (d.startAngle <= Math.PI) {
-					endAngle = Math.PI;
-					startAngle = 0
-				}
-			}
-			if (d.endAngle > Math.PI * 3) {
-				endAngle = Math.PI
+				startAngle = 0;
 			}
-			if (d.startAngle < Math.PI && d.endAngle >= 2 * Math.PI) {
+		}
+		if (d.endAngle > Math.PI && d.endAngle < Math.PI * 2) {
+			endAngle = Math.PI;
+		}
+		if (d.startAngle > Math.PI * 2) {
+			startAngle = d.startAngle % (Math.PI * 2);
+		}
+		if (d.endAngle > Math.PI * 2) {
+			endAngle = d.endAngle % (Math.PI * 2);
+			if (d.startAngle <= Math.PI) {
 				endAngle = Math.PI;
-				startAngle = d.startAngle
+				startAngle = 0
 			}
+		}
+		if (d.endAngle > Math.PI * 3) {
+			endAngle = Math.PI
+		}
+		if (d.startAngle < Math.PI && d.endAngle >= 2 * Math.PI) {
+			endAngle = Math.PI;
+			startAngle = d.startAngle
+		}
 
-			if (d.startAngle >= Math.PI && d.startAngle <= Math.PI * 2 &&
-				d.endAngle >= Math.PI * 2 && d.endAngle <= Math.PI * 3) {
-				startAngle = 0;
-				endAngle = d.endAngle % (Math.PI * 2)
-			}
-			// Calculating shape key points
+		if (d.startAngle >= Math.PI && d.startAngle <= Math.PI * 2 &&
+			d.endAngle >= Math.PI * 2 && d.endAngle <= Math.PI * 3) {
+			startAngle = 0;
+			endAngle = d.endAngle % (Math.PI * 2)
+		}
+		// Calculating shape key points
+		var sx = rx * Math.cos(startAngle),
+			sy = ry * Math.sin(startAngle),
+			ex = rx * Math.cos(endAngle),
+			ey = ry * Math.sin(endAngle);
+
+		// Creating custom path  commands based on calculation
+		var ret = [];
+		ret.push("M", sx, h + sy, "A", rx, ry, "0 0 1", ex, h + ey, "L", ex, ey, "A", rx, ry, "0 0   0", sx, sy, "z");
+
+		// If shape is big enough, that it needs two separate outer shape , then draw second shape as well
+		if (d.startAngle < Math.PI && d.endAngle >= 2 * Math.PI) {
+			startAngle = 0;
+			endAngle = d.endAngle;
 			var sx = rx * Math.cos(startAngle),
 				sy = ry * Math.sin(startAngle),
 				ex = rx * Math.cos(endAngle),
 				ey = ry * Math.sin(endAngle);
-
-			// Creating custom path  commands based on calculation
-			var ret = [];
 			ret.push("M", sx, h + sy, "A", rx, ry, "0 0 1", ex, h + ey, "L", ex, ey, "A", rx, ry, "0 0   0", sx, sy, "z");
+		}
 
-			// If shape is big enough, that it needs two separate outer shape , then draw second shape as well
-			if (d.startAngle < Math.PI && d.endAngle >= 2 * Math.PI) {
-				startAngle = 0;
-				endAngle = d.endAngle;
-				var sx = rx * Math.cos(startAngle),
-					sy = ry * Math.sin(startAngle),
-					ex = rx * Math.cos(endAngle),
-					ey = ry * Math.sin(endAngle);
-				ret.push("M", sx, h + sy, "A", rx, ry, "0 0 1", ex, h + ey, "L", ex, ey, "A", rx, ry, "0 0   0", sx, sy, "z");
-			}
+		// Assemble shape commands
+		return ret.join(" ");
+	}
 
-			// Assemble shape commands
-			return ret.join(" ");
-		}
 
+	static pieInner(d: PieDataObject, {
+		rx,
+		ry,
+		h,
+		ir
+	}: PieChartAttributes) {
 
-		function pieInner(d: any, rx: number, ry: number, h: number, ir: number) {
+		// Normalize angles before we start any calculations
+		var startAngle = (d.startAngle < Math.PI ? Math.PI : d.startAngle);
+		var endAngle = (d.endAngle < Math.PI ? Math.PI : d.endAngle);
 
-			// Normalize angles before we start any calculations
-			var startAngle = (d.startAngle < Math.PI ? Math.PI : d.startAngle);
-			var endAngle = (d.endAngle < Math.PI ? Math.PI : d.endAngle);
+		// Take care of corner cases
+		if (d.startAngle > Math.PI * 2 && d.endAngle < Math.PI * 3) {
+			return "";
+		}
+		if (d.startAngle >= Math.PI * 2 && d.endAngle >= Math.PI * 2 && d.endAngle <= Math.PI * 3) {
+			return "";
+		}
 
-			// Take care of corner cases
-			if (d.startAngle > Math.PI * 2 && d.endAngle < Math.PI * 3) {
-				return "";
-			}
-			if (d.startAngle >= Math.PI * 2 && d.endAngle >= Math.PI * 2 && d.endAngle <= Math.PI * 3) {
-				return "";
-			}
+		// Reassign startAngle  and endAngle based on their positions
+		if (d.startAngle <= Math.PI && d.endAngle > Math.PI * 2) {
+			startAngle = Math.PI;
+			endAngle = 2 * Math.PI;
+		}
+		if (d.startAngle > Math.PI && d.endAngle >= Math.PI * 3) {
+			endAngle = 2 * Math.PI;
+		}
+		if (d.startAngle > Math.PI && d.endAngle > Math.PI * 2 && d.endAngle < Math.PI * 3) {
+			endAngle = 2 * Math.PI;
+		}
+		if (d.startAngle > Math.PI && d.startAngle < Math.PI * 2 && d.endAngle > Math.PI * 3) {
+			endAngle = 2 * Math.PI;
+			startAngle = Math.PI
+		}
+		if (d.startAngle > Math.PI && d.startAngle < Math.PI * 2 && d.endAngle > Math.PI * 3) {
+			endAngle = 2 * Math.PI;
+			startAngle = Math.PI
+		}
+		if (d.startAngle > Math.PI &&
+			d.startAngle < Math.PI * 2 &&
+			d.endAngle > Math.PI * 3) {
+			startAngle = Math.PI;
+			endAngle = Math.PI + d.endAngle % Math.PI;
+		}
+		if (d.startAngle > Math.PI * 2 &&
+			d.startAngle < Math.PI * 3 &&
+			d.endAngle > Math.PI * 3) {
+			startAngle = Math.PI;
+			endAngle = Math.PI + d.endAngle % Math.PI;
+		}
+		if (d.startAngle > Math.PI * 3 &&
+			d.endAngle > Math.PI * 3) {
+			startAngle = d.startAngle % (Math.PI * 2)
+			endAngle = d.endAngle % (Math.PI * 2)
+		}
 
-			// Reassign startAngle  and endAngle based on their positions
-			if (d.startAngle <= Math.PI && d.endAngle > Math.PI * 2) {
-				startAngle = Math.PI;
-				endAngle = 2 * Math.PI;
-			}
-			if (d.startAngle > Math.PI && d.endAngle >= Math.PI * 3) {
-				endAngle = 2 * Math.PI;
-			}
-			if (d.startAngle > Math.PI && d.endAngle > Math.PI * 2 && d.endAngle < Math.PI * 3) {
-				endAngle = 2 * Math.PI;
-			}
-			if (d.startAngle > Math.PI && d.startAngle < Math.PI * 2 && d.endAngle > Math.PI * 3) {
-				endAngle = 2 * Math.PI;
-				startAngle = Math.PI
-			}
-			if (d.startAngle > Math.PI && d.startAngle < Math.PI * 2 && d.endAngle > Math.PI * 3) {
-				endAngle = 2 * Math.PI;
-				startAngle = Math.PI
-			}
-			if (d.startAngle > Math.PI &&
-				d.startAngle < Math.PI * 2 &&
-				d.endAngle > Math.PI * 3) {
-				startAngle = Math.PI;
-				endAngle = Math.PI + d.endAngle % Math.PI;
-			}
-			if (d.startAngle > Math.PI * 2 &&
-				d.startAngle < Math.PI * 3 &&
-				d.endAngle > Math.PI * 3) {
-				startAngle = Math.PI;
-				endAngle = Math.PI + d.endAngle % Math.PI;
-			}
-			if (d.startAngle > Math.PI * 3 &&
-				d.endAngle > Math.PI * 3) {
-				startAngle = d.startAngle % (Math.PI * 2)
-				endAngle = d.endAngle % (Math.PI * 2)
-			}
+		// Calculating shape key points
+		var sx = ir * rx * Math.cos(startAngle),
+			sy = ir * ry * Math.sin(startAngle),
+			ex = ir * rx * Math.cos(endAngle),
+			ey = ir * ry * Math.sin(endAngle);
+
+		// Creating custom path  commands based on calculation
+		var ret = [];
+		ret.push("M", sx, sy, "A", ir * rx, ir * ry, "0 0 1", ex, ey, "L", ex, h + ey, "A", ir * rx, ir * ry, "0 0 0", sx, h + sy, "z");
 
-			// Calculating shape key points
+
+		// If shape is big enough, that it needs two separate outer shape , then draw second shape as well
+		if (d.startAngle > Math.PI &&
+			d.startAngle < Math.PI * 2 &&
+			d.endAngle > Math.PI * 3) {
+			startAngle = d.startAngle % (Math.PI * 2);
+			endAngle = Math.PI * 2;
 			var sx = ir * rx * Math.cos(startAngle),
 				sy = ir * ry * Math.sin(startAngle),
 				ex = ir * rx * Math.cos(endAngle),
 				ey = ir * ry * Math.sin(endAngle);
-
-			// Creating custom path  commands based on calculation
-			var ret = [];
 			ret.push("M", sx, sy, "A", ir * rx, ir * ry, "0 0 1", ex, ey, "L", ex, h + ey, "A", ir * rx, ir * ry, "0 0 0", sx, h + sy, "z");
-
-
-			// If shape is big enough, that it needs two separate outer shape , then draw second shape as well
-			if (d.startAngle > Math.PI &&
-				d.startAngle < Math.PI * 2 &&
-				d.endAngle > Math.PI * 3) {
-				startAngle = d.startAngle % (Math.PI * 2);
-				endAngle = Math.PI * 2;
-				var sx = ir * rx * Math.cos(startAngle),
-					sy = ir * ry * Math.sin(startAngle),
-					ex = ir * rx * Math.cos(endAngle),
-					ey = ir * ry * Math.sin(endAngle);
-				ret.push("M", sx, sy, "A", ir * rx, ir * ry, "0 0 1", ex, ey, "L", ex, h + ey, "A", ir * rx, ir * ry, "0 0 0", sx, h + sy, "z");
-			}
-
-			// Assemble shape commands
-			return ret.join(" ");
 		}
 
+		// Assemble shape commands
+		return ret.join(" ");
+	}
 
-		function draw(
-			data: any,
-			rx: number/*radius x*/,
-			ry: number/*radius y*/,
-			h: number/*height*/,
-			ir: number/*inner radius*/) {
-
-			// Placeholder data
-			const _data = data;
-
-			// Create Slices and shape containers
-			var slices = centerPoint
-				.patternify({ tag: 'g', selector: 'slices' })
-
-			// Store reference for func access
-			attrs.slices = slices;
-
-			const outerSliceWrapper = centerPoint
-				.patternify({ tag: 'g', selector: 'outerSliceWrapper' })
-
-			const topSliceWrapper = centerPoint
-				.patternify({ tag: 'g', selector: 'topSliceWrapper' })
-
-
-			// Creating inner slice custom paths
-			const pieInners = slices
-				.patternify({ tag: 'path', selector: 'innerSlice', data: _data })
-				.style("fill", function (d: any) { return d3.hsl(d.data.color).darker(2).toString() })
-				.attr("d", function (d: any) { return pieInner(d, rx + 0.5, ry + 0.5, h, ir); })
-				.classed('slice-sort', true)
-				.on('click', onSliceClick)
-				.on('mouseenter', onSliceMouseEnter)
-				.on('mouseleave', onSliceMouseLeave)
-
-			// Transition  inner  elements
-			pieInners
-				.transition()
-				.duration(attrs.duration)
-				.attrTween("d", arcTweenInner)
-				.on('end', function (d: any) {
-					//sortElements();
-					this._current = d;
-				})
-
-
-			// Create corner slice paths
-			const cornerSliceElements = slices
-				.patternify({ tag: 'path', selector: 'cornerSlices', data: _data.map((d: any) => Object.assign({}, d)) })
-				.style("fill", (d: any) => {
-					return d3.hsl(d.data.color).darker(0.7).toString();
-				})
-				.attr("d", function (d: any) { return pieCorner(d, rx - .5, ry - .5, h, ir); })
-
-				.classed('slice-sort', true)
-				.attr('pointer-events', '')
-				.style("stroke", function (d: any) { return d3.hsl(d.data.color).darker(0.7).toString() })
-				.on('click', onSliceClick)
-				.on('mouseenter', onSliceMouseEnter)
-				.on('mouseleave', onSliceMouseLeave)
-				.attr('opacity', (d: any, i: number, arr: any[]) => {
-					if (arr.length - 2 == i) {
-						return 1;
-					}
-					return 0;
-				})
-
-			// Store reference for function access
-			attrs.cornerSliceElements = cornerSliceElements;
-
-			// Transition corner elements
-			cornerSliceElements
-				.transition()
-				.duration(attrs.duration)
-				.attrTween("d", arcTweenCorner)
-				.on('end', function (d: any) {
-					this._current = d;
-				})
-
-			// Create corner slice surface paths
-			const cornerSliceSurfaceElements = slices
-				.patternify({ tag: 'path', selector: 'cornerSlicesSurface', data: _data.map((d: any) => Object.assign({}, d)) })
-				.style("fill", function (d: any) { return d3.hsl(d.data.color).darker(0.7).toString() })
-				.attr("d", function (d: any) { return pieCornerSurface(d, rx - .5, ry - .5, h, ir); })
-				.classed('slice-sort', true)
-				.style("stroke", function (d: any) { return d3.hsl(d.data.color).darker(0.7).toString() })
-				.on('click', onSliceClick)
-				.on('mouseenter', onSliceMouseEnter)
-				.on('mouseleave', onSliceMouseLeave)
-
-				.attr('opacity', (d: any, i: number, arr: any[]) => {
-					if (0 == i) {
-						return 1;
-					}
-					return 0;
-				})
-
-			// Store reference for function access
-			attrs.cornerSliceSurfaceElements = cornerSliceSurfaceElements;
-
-			// Transition corner Surface elements
-			cornerSliceSurfaceElements
-				.transition()
-				.duration(attrs.duration)
-				.attrTween("d", arcTweenCornerSurface)
-				.on('end', function (d: any) {
-					this._current = d;
-				})
-
-
-
-			// Draw outer slices
-			const outerSlices = outerSliceWrapper
-				.patternify({
-					tag: 'path', selector: 'outerSlice', data: _data
-				})
-				.style("fill", function (d: any) { return d3.hsl(d.data.color).darker(0.7).toString() })
-				.on('click', onSliceClick)
-				.on('mouseenter', onSliceMouseEnter)
-				.on('mouseleave', onSliceMouseLeave)
-
-			// Transition  outer   elements
-			outerSlices.transition()
-				.duration(attrs.duration)
-				.attrTween("d", arcTweenOuter)
-				.on('end', function (d: any) {
-					this._current = d;
-				})
-
+	//********** Function is responsible for building top  shape paths */
+	static pieTop(d: PieDataObject, {
+		rx,
+		ry,
+		ir
+	}: PieChartAttributes) {
+
+		// If angles are equal, then we got nothing to draw
+		if (d.endAngle - d.startAngle == 0) return "M 0 0";
+
+		// Calculating shape key points
+		var sx = rx * Math.cos(d.startAngle),
+			sy = ry * Math.sin(d.startAngle),
+			ex = rx * Math.cos(d.endAngle),
+			ey = ry * Math.sin(d.endAngle);
+
+		// Creating custom path based on calculation
+		var ret = [];
+		ret.push("M", sx, sy, "A", rx, ry, "0", (d.endAngle - d.startAngle > Math.PI ? 1 : 0), "1", ex, ey, "L", ir * ex, ir * ey);
+		ret.push("A", ir * rx, ir * ry, "0", (d.endAngle - d.startAngle > Math.PI ? 1 : 0), "0", ir * sx, ir * sy, "z");
+		return ret.join(" ");
+	}
 
-			// Draw top slices
-			const topSlices = topSliceWrapper
-				.patternify({
-					tag: 'path', selector: 'topSlice', data: _data
-				})
-				.style("fill", function (d: any) { return d.data.color; })
-				.style("stroke", function (d: any) { return d.data.color; })
-				//	.attr("d", function (d: any) { return pieTop(d, rx, ry, ir); })
-				.on('click', onSliceClick)
-				.on('mouseenter', onSliceMouseEnter)
-				.on('mouseleave', onSliceMouseLeave)
-
-			// Transition  top  elements
-			topSlices.transition()
-				.duration(attrs.duration)
-				.attrTween("d", arcTweenTop)
-				.on('end', function (d: any) {
-					this._current = d;
-				})
+	//******* Function is responsible for building left corner shape paths */
+	static pieCornerSurface(d: PieDataObject, {
+		rx,
+		ry,
+		h,
+		ir
+	}: PieChartAttributes) {
+
+		//  Calculating  left corner surface key points
+		var sxFirst = ir * rx * Math.cos(d.startAngle);
+		var syFirst = ir * ry * Math.sin(d.startAngle)
+		var sxSecond = rx * Math.cos(d.startAngle);
+		var sySecond = ry * Math.sin(d.startAngle);
+		var sxThird = sxSecond;
+		var syThird = sySecond + h;
+		var sxFourth = sxFirst;
+		var syFourth = syFirst + h;
+
+		// Creating custom path based on calculation
+		return `
+			M ${sxFirst} ${syFirst} 
+			L ${sxSecond} ${sySecond}
+			L ${sxThird} ${syThird} 
+			L ${sxFourth} ${syFourth}
+			z
+		`
+	}
 
-			// Draw Texts
-			const slicesTexts = topSliceWrapper
-				.patternify({ tag: 'text', selector: 'pie-labels', data: _data.map((d: any) => Object.assign({}, d)) })
-				.attr('text-anchor', 'middle')
-				.attr('font-size', 10)
-				.attr('transform', (d: any) => {
-					const centerAngle = ((d.startAngle + d.endAngle) / 2) % (Math.PI * 2);
-					const x = rx * 0.8 * Math.cos(centerAngle);
-					const y = ry * 0.8 * Math.sin(centerAngle);
-					return `translate(${x},${y}) `
-				})
-				.text((d: any) => d.data.label + ' (' + Math.round(d.value / calc.sum * 100) + '%)')
-				.attr('opacity', (d: any) => d.data.type == "dummy" ? -1 : 1)
+	//********** Function is responsible for building right corner shape paths */
+	static pieCorner(d: PieDataObject, {
+		rx,
+		ry,
+		h,
+		ir
+	}: PieChartAttributes) {
+
+		//  Calculating  right corner surface key points
+		var sxFirst = ir * rx * Math.cos(d.endAngle);
+		var syFirst = ir * ry * Math.sin(d.endAngle);
+		var sxSecond = rx * Math.cos(d.endAngle);
+		var sySecond = ry * Math.sin(d.endAngle);
+		var sxThird = sxSecond;
+		var syThird = sySecond + h;
+		var sxFourth = sxFirst;
+		var syFourth = syFirst + h;
+
+		// Creating custom path based on calculation
+		return `
+			M ${sxFirst} ${syFirst} 
+			L ${sxSecond} ${sySecond}
+			L ${sxThird} ${syThird} 
+			L ${sxFourth} ${syFourth}
+			z
+			`
+	}
 
-			// Transition  text  elements
-			slicesTexts.transition()
-				.duration(attrs.duration)
-				.attrTween("transform", textTweenTransform)
+	//Text  transitions
+	static textTweenTransform(a: PieDataObject, {
+		rx,
+		ry
+	}: PieChartAttributes) {
 
+		if (!this._current) {
+			this._current = Object.assign({}, a, {
+				startAngle: 0,
+				endAngle: 0
+			})
 		}
+		var i = d3.interpolate(this._current, a);
+
+		this._current = i(0);
+		return function (t: any) {
+			const d = i(t);
+			const centerAngle = ((d.startAngle + d.endAngle) / 2) % (Math.PI * 2);
+			const x = rx * 0.8 * Math.cos(centerAngle);
+			const y = ry * 0.8 * Math.sin(centerAngle);
+			return `translate(${x},${y}) `
+		};
+	}
 
-		d3.select(window).on('resize.' + attrs.id, function () {
-			var containerRect = container.node().getBoundingClientRect();
-			if (containerRect.width > 0) attrs.svgWidth = containerRect.width;
-			main();
-		});
-
-		// Store state, whether app was first run or not
-		attrs.firstRun = false;
-	};
-
+	//Corner shape transitions
+	static arcTweenCorner(a: PieDataObject, {
+		rx,
+		ry,
+		h,
+		ir
+	}: PieChartAttributes) {
+		if (!this._current) {
+			this._current = Object.assign({}, a, {
+				startAngle: 0,
+				endAngle: 0
+			})
+		}
+		var i = d3.interpolate(this._current, a);
+		this._current = i(0);
+		return function (t: any) {
+			return Chart.pieCorner(i(t), {
+				rx: rx,
+				ry: ry,
+				h: h,
+				ir: ir
+			});
+		};
+	}
 
-	//----------- PROTOTYPE FUNCTIONS  ----------------------
+	//Corner surface shape transitions
+	static arcTweenCornerSurface(a: PieDataObject, {
+		rx,
+		ry,
+		h,
+		ir
+	}: PieChartAttributes) {
+
+		if (!this._current) {
+			this._current = Object.assign({}, a, {
+				startAngle: 0,
+				endAngle: 0
+			})
+		}
+		var i = d3.interpolate(this._current, a);
+		this._current = i(0);
+		return function (t: any) {
+			return Chart.pieCornerSurface(i(t), {
+				rx: rx,
+				ry: ry,
+				h: h,
+				ir: ir
+			});
+		};
+	}
 
-	d3.selection.prototype.patternify = function (params: PatternifyParameter) {
-		var container = this;
-		var selector = params.selector;
-		var elementTag = params.tag;
-		var data = params.data || [selector];
+	//Inner shape transitions
+	static arcTweenInner(a: PieDataObject, {
+		rx,
+		ry,
+		h,
+		ir
+	}: PieChartAttributes) {
+		if (!this._current) {
+			this._current = Object.assign({}, a, {
+				startAngle: 0,
+				endAngle: 0
+			})
+		}
+		var i = d3.interpolate(this._current, a);
+		this._current = i(0);
+		return function (t: any) {
+			return Chart.pieInner(i(t), {
+				rx: rx,
+				ry: ry,
+				h: h,
+				ir: ir
+			});
+		};
+	}
 
-		// Pattern in action
-		var selection = container.selectAll('.' + selector).data(data, (d: any, i: number) => {
-			if (typeof d === 'object') {
-				if (d.id) {
-					return d.id;
-				}
-			}
-			return i;
-		});
-		selection.exit().remove();
-		selection = selection.enter().append(elementTag).merge(selection);
-		selection.attr('class', selector);
-		return selection;
-	};
-
-	//Dynamic keys functions
-	Object.keys(attrs).forEach((key) => {
-		// Attach variables to main function
-		//@ts-ignore
-		main[key] = function (_) {
-			var string = `attrs['${key}'] = _`;
-			if (!arguments.length) {
-				return eval(` attrs['${key}'];`);
-			}
-			eval(string);
-			return main;
+	//Top shape transitions
+	static arcTweenTop(a: PieDataObject, {
+		rx,
+		ry,
+		ir
+	}: PieChartAttributes) {
+		if (!this._current) {
+			this._current = Object.assign({}, a, {
+				startAngle: 0,
+				endAngle: 0
+			})
+		}
+		var i = d3.interpolate(this._current, a);
+		this._current = i(0);
+		return function (t: any) {
+			return Chart.pieTop(i(t), {
+				rx,
+				ry,
+				ir
+			});
 		};
-		return main;
-	});
-
-	//Set attrs as property
-	//@ts-ignore
-	main['attrs'] = attrs;
-
-	//Exposed update functions
-	//@ts-ignore
-	main['data'] = function (value) {
-		if (!arguments.length) return attrs.data;
-		attrs.data = value;
-		if (typeof updateData === 'function') {
-			updateData();
+	}
+
+	//Outer shape transitions
+	static arcTweenOuter(a: PieDataObject, {
+		rx,
+		ry,
+		h,
+		ir
+	}: PieChartAttributes) {
+		if (!this._current) {
+			this._current = Object.assign({}, a, {
+				startAngle: 0,
+				endAngle: 0
+			})
 		}
-		return main;
-	};
+		var i = d3.interpolate(this._current, a);
+		this._current = i(0);
+		return function (t: any) {
+			return Chart.pieOuter(i(t), {
+				rx,
+				ry,
+				h,
+				ir
+			});
+		};
+	}
 
-	// Run  visual
-	//@ts-ignore
-	main['render'] = function () {
-		main();
-		return main;
-	};
 
-	return main;
 }
 
+export interface Layouts {
+	[key: string]: Function
+}
+
+export interface PieDataObject {
+	value: number,
+	startAngle: number,
+	endAngle: number,
+	data: any
+}
 
 export interface PatternifyParameter {
 	selector: string,
@@ -872,15 +1056,20 @@ export interface PatternifyParameter {
 
 export interface PieChartAttributes {
 	[key: string]: any,
-	data: UiPieChartConfig,
-	svgWidth: number,
-	svgHeight: number,
-	marginTop: number,
-	marginBottom: number,
-	marginRight: number,
-	marginLeft: number,
-	container: any,
-	defaultTextFill: string,
-	defaultFont: string,
-	onDataPointClicked: (name: string) => void
-}
\ No newline at end of file
+
+	data?: UiPieChartConfig,
+	svgWidth?: number,
+	svgHeight?: number,
+	marginTop?: number,
+	marginBottom?: number,
+	marginRight?: number,
+	marginLeft?: number,
+	container?: any,
+	defaultTextFill?: string,
+	defaultFont?: string,
+	onDataPointClicked?: (name: string) => void,
+	rx?: number,
+	ry?: number,
+	h?: number,
+	ir?: number
+}
diff --git a/teamapps-client/ts/modules/UiPlayground.ts b/teamapps-client/ts/modules/UiPlayground.ts
new file mode 100644
index 000000000..a01c04ef1
--- /dev/null
+++ b/teamapps-client/ts/modules/UiPlayground.ts
@@ -0,0 +1,69 @@
+/* tslint:disable:indent */
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2025 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+
+import {
+    UiPlayground_RenderedEvent,
+    UiPlaygroundCommandHandler,
+    UiPlaygroundConfig
+} from "../generated/UiPlaygroundConfig";
+import {UiShadowConfig} from "../generated/UiShadowConfig";
+import {AbstractUiComponent} from "./AbstractUiComponent";
+import {generateUUID, parseHtml} from "./Common";
+import {TeamAppsUiComponentRegistry} from "./TeamAppsUiComponentRegistry";
+import {TeamAppsUiContext} from "./TeamAppsUiContext";
+import {createUiBorderCssString, createUiShadowCssString} from "./util/CssFormatUtil";
+import {TeamAppsEvent} from "./util/TeamAppsEvent";
+
+
+export class UiPlayground extends AbstractUiComponent<UiPlaygroundConfig> implements UiPlaygroundCommandHandler {
+    onRendered: TeamAppsEvent<UiPlayground_RenderedEvent> = new TeamAppsEvent();
+
+    // internal state
+    private uuidClass: string;
+    private $main: HTMLDivElement;
+    private $p: HTMLDivElement;
+
+    constructor(config: UiPlaygroundConfig, context: TeamAppsUiContext) {
+        super(config, context);
+
+        this.uuidClass = `UiPlayground-${generateUUID()}`;
+        this.$main = parseHtml(`<div class="${this.uuidClass}">
+            <h1>Playground</h1>
+            <p>Title: ${this._config.title}</p>
+        </div>`);
+        this.$p = this.$main.querySelector('p')
+    }
+
+    public doGetMainElement(): HTMLElement {
+        return this.$main;
+    }
+
+    // Setters for Server API
+    // -----------------------
+
+    public setTitle(title: string) {
+        this._config.title = title;
+        this.$p.innerText = title;
+    }
+
+}
+
+TeamAppsUiComponentRegistry.registerComponentClass("UiPlayground", UiPlayground);
diff --git a/teamapps-client/ts/modules/UiPopup.ts b/teamapps-client/ts/modules/UiPopup.ts
new file mode 100644
index 000000000..6cae7ec56
--- /dev/null
+++ b/teamapps-client/ts/modules/UiPopup.ts
@@ -0,0 +1,119 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+
+import {AbstractUiComponent} from "./AbstractUiComponent";
+import {TeamAppsUiContext} from "./TeamAppsUiContext";
+import {UiComponent} from "./UiComponent";
+import {TeamAppsUiComponentRegistry} from "./TeamAppsUiComponentRegistry";
+import {UiPopupCommandHandler, UiPopupConfig} from "../generated/UiPopupConfig";
+import {parseHtml} from "./Common";
+import {executeWhenFirstDisplayed} from "./util/ExecuteWhenFirstDisplayed";
+
+export class UiPopup extends AbstractUiComponent<UiPopupConfig> implements UiPopupCommandHandler {
+
+	private contentComponent: UiComponent;
+	private $main: HTMLElement;
+	private $componentWrapper: HTMLElement;
+
+	constructor(config: UiPopupConfig, context: TeamAppsUiContext) {
+		super(config, context);
+
+		this.$main = parseHtml(`<div class="UiPopup">
+	<div class="component-wrapper"></div>
+</div>`);
+
+		this.$componentWrapper = this.$main.querySelector(":scope .component-wrapper");
+
+		this.contentComponent = config.contentComponent as UiComponent;
+		this.$componentWrapper.appendChild(this.contentComponent.getMainElement());
+
+		this.setBackgroundColor(config.backgroundColor);
+		this.setDimmingColor(config.dimmingColor);
+		this.setDimensions(config.width, config.height);
+	}
+
+	doGetMainElement(): HTMLElement {
+		return this.$main;
+	}
+
+	setBackgroundColor(backgroundColor: string): void {
+		this._config.backgroundColor = backgroundColor;
+		this.$componentWrapper.style.backgroundColor = backgroundColor;
+	}
+
+	setDimmingColor(dimmingColor: string): void {
+		this._config.dimmingColor = dimmingColor;
+		this.$main.style.backgroundColor = dimmingColor;
+	}
+
+	setDimensions(width: number, height: number): void {
+		this._config.width = width;
+		this._config.height = height;
+		this.updatePosition();
+	}
+
+	setPosition(x: number, y: number) {
+		this._config.x = x;
+		this._config.y = y;
+		this.updatePosition();
+	}
+
+	@executeWhenFirstDisplayed()
+	private updatePosition() {
+		let containerWidth = this.$main.parentElement && this.$main.parentElement.offsetWidth;
+		let containerHeight = this.$main.parentElement && this.$main.parentElement.offsetHeight;
+		// width
+		if (this._config.width === -1) {
+			this.$main.style.width = null;
+			this.$main.style.maxWidth = containerWidth + "px";
+		} else if (this._config.width === 0) {
+			this.$main.style.width = containerWidth + "px";
+			this.$main.style.maxWidth = null;
+		} else {
+			this.$main.style.width = this._config.width + "px";
+			this.$main.style.maxWidth = containerWidth + "px";
+		}
+		// height
+		if (this._config.height === -1) {
+			this.$main.style.height = null;
+			this.$main.style.maxHeight = containerHeight + "px";
+		} else if (this._config.height === 0) {
+			this.$main.style.height = containerHeight + "px";
+			this.$main.style.maxHeight = null;
+		} else {
+			this.$main.style.height = this._config.height + "px";
+			this.$main.style.maxHeight = containerHeight + "px";
+		}
+		
+		this.$componentWrapper.style.left = this._config.x + "px";
+		this.$componentWrapper.style.top = this._config.y + "px";
+	}
+
+
+	onResize(): void {
+		this.updatePosition();
+	}
+
+	close(): void {
+		this.getMainElement().remove();
+	}
+}
+
+TeamAppsUiComponentRegistry.registerComponentClass("UiPopup", UiPopup);
diff --git a/teamapps-client/ts/modules/UiProgressDisplay.ts b/teamapps-client/ts/modules/UiProgressDisplay.ts
new file mode 100644
index 000000000..0321ec323
--- /dev/null
+++ b/teamapps-client/ts/modules/UiProgressDisplay.ts
@@ -0,0 +1,98 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+
+import {AbstractUiComponent} from "./AbstractUiComponent";
+import {TeamAppsUiContext} from "./TeamAppsUiContext";
+import {TeamAppsUiComponentRegistry} from "./TeamAppsUiComponentRegistry";
+import {TeamAppsEvent} from "./util/TeamAppsEvent";
+import {parseHtml, removeClassesByFunction} from "./Common";
+import {
+	UiProgressDisplay_CancelButtonClickedEvent,
+	UiProgressDisplay_ClickedEvent,
+	UiProgressDisplayCommandHandler,
+	UiProgressDisplayConfig,
+	UiProgressDisplayEventSource
+} from "../generated/UiProgressDisplayConfig";
+import {ProgressBar} from "./micro-components/ProgressBar";
+import {UiProgressStatus} from "../generated/UiProgressStatus";
+
+
+export class UiProgressDisplay extends AbstractUiComponent<UiProgressDisplayConfig> implements UiProgressDisplayCommandHandler, UiProgressDisplayEventSource {
+	onCancelButtonClicked: TeamAppsEvent<UiProgressDisplay_CancelButtonClickedEvent> = new TeamAppsEvent();
+	onClicked: TeamAppsEvent<UiProgressDisplay_ClickedEvent> = new TeamAppsEvent();
+
+	private $main: HTMLElement;
+	private $icon: HTMLElement;
+	private $taskName: HTMLElement;
+	private $statusMessage: HTMLElement;
+	private $progress: HTMLElement;
+	private $cancelButton: HTMLElement;
+	private progressBar: ProgressBar;
+
+	constructor(config: UiProgressDisplayConfig, context: TeamAppsUiContext) {
+		super(config, context);
+
+		this.$main = parseHtml(`<div class="UiProgressDisplay">
+			<div class="title">
+				<div class="icon img img-16"></div>
+        		<div class="task-name"></div>
+			</div>
+			<div class="content">
+	            <div class="status-string"></div>
+	            <div class="progress-bar-wrapper"></div>
+	            <div class="cancel-button img img-16"></div>
+			</div>
+		</div>`);
+
+		this.$icon = this.$main.querySelector<HTMLElement>(":scope .icon");
+		this.$taskName = this.$main.querySelector<HTMLElement>(":scope .task-name");
+		this.$statusMessage = this.$main.querySelector<HTMLElement>(":scope .status-string");
+		this.$progress = this.$main.querySelector<HTMLElement>(":scope .progress-bar-wrapper");
+		this.progressBar = new ProgressBar(0, {height: 4, transitionTime: 400});
+		this.$progress.appendChild(this.progressBar.getMainDomElement());
+		this.$cancelButton = this.$main.querySelector<HTMLElement>(":scope .cancel-button");
+
+		this.$cancelButton.addEventListener("click", ev => this.onCancelButtonClicked.fire({}));
+
+		this.update(config);
+	}
+
+	doGetMainElement(): HTMLElement {
+		return this.$main;
+	}
+
+	update(config: UiProgressDisplayConfig): void {
+		this.$icon.style.backgroundImage = `url('${config.icon}')`;
+		this.$taskName.textContent = config.taskName;
+		this.$statusMessage.textContent = config.statusMessage;
+		this.progressBar.setProgress(config.progress);
+
+		this.$main.classList.toggle("unknown-progress", config.progress < 0);
+
+		removeClassesByFunction(this.$main.classList, className => className.startsWith("status-"));
+		let statusClass = `status-${config.status}`;
+		this.$main.classList.add(statusClass);
+
+		this.$main.classList.toggle(`cancelable`, config.cancelable);
+	}
+
+}
+
+TeamAppsUiComponentRegistry.registerComponentClass("UiProgressDisplay", UiProgressDisplay);
diff --git a/teamapps-client/ts/modules/UiQrCodeScanner.ts b/teamapps-client/ts/modules/UiQrCodeScanner.ts
new file mode 100644
index 000000000..47c78b789
--- /dev/null
+++ b/teamapps-client/ts/modules/UiQrCodeScanner.ts
@@ -0,0 +1,117 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+import {AbstractUiComponent} from "./AbstractUiComponent";
+import {UiQrCodeScanner_QrCodeDetectedEvent, UiQrCodeScannerCommandHandler, UiQrCodeScannerConfig, UiQrCodeScannerEventSource} from "../generated/UiQrCodeScannerConfig";
+import {TeamAppsEvent} from "./util/TeamAppsEvent";
+import {TeamAppsUiContext} from "./TeamAppsUiContext";
+import {calculateDisplayModeInnerSize, parseHtml} from "./Common";
+import {TeamAppsUiComponentRegistry} from "./TeamAppsUiComponentRegistry";
+import {QrScanner} from './qr-code-scanner/qr-scanner';
+import {executeWhenFirstDisplayed} from "./util/ExecuteWhenFirstDisplayed";
+import {UiPageDisplayMode} from "../generated/UiPageDisplayMode";
+
+export class UiQrCodeScanner extends AbstractUiComponent<UiQrCodeScannerConfig> implements UiQrCodeScannerCommandHandler, UiQrCodeScannerEventSource {
+
+	public readonly onQrCodeDetected: TeamAppsEvent<UiQrCodeScanner_QrCodeDetectedEvent> = new TeamAppsEvent();
+
+	private $main: HTMLElement;
+	private $video: HTMLVideoElement;
+	private $crosshair: HTMLElement;
+	private qrScanner: QrScanner = null;
+
+	private selectedCameraIndex: number = 0;
+
+	constructor(config: UiQrCodeScannerConfig, context: TeamAppsUiContext) {
+		super(config, context);
+
+		this.$main = parseHtml(`<div class="UiQrCodeScanner">
+	<video></video>
+	<div class="crosshair-wrapper">
+		<div class="crosshair"></div>
+	</div>
+</div>`);
+		this.$video = this.$main.querySelector(':scope video');
+		this.$crosshair = this.$main.querySelector(':scope .crosshair');
+
+		this.$video.addEventListener("playing", () => this.onResize());
+
+		if (config.scanning) {
+			this.startScanning(config.stopsScanningAtFirstResult);
+		}
+	}
+
+	doGetMainElement(): HTMLElement {
+		return this.$main;
+	}
+
+	@executeWhenFirstDisplayed(true)
+	async startScanning(stopScanningAtFirstResult: boolean = true): Promise<void> {
+		if (this.qrScanner != null) {
+			this.stopScanning();
+		}
+
+		this._config.stopsScanningAtFirstResult = stopScanningAtFirstResult;
+		this.qrScanner = new QrScanner(this.$video, (result: string) => {
+			this.onQrCodeDetected.fire({code: result});
+			if (this._config.stopsScanningAtFirstResult) {
+				this.stopScanning();
+			}
+		});
+		let availableCameras = await this.getAvailableCameras();
+		if (availableCameras.length > 0) {
+			let deviceId = availableCameras[this.selectedCameraIndex % availableCameras.length].deviceId;
+			this.qrScanner.start(deviceId);
+		}
+	}
+
+	stopScanning(): void {
+		if (this.qrScanner != null) {
+			this.qrScanner.stop();
+			this.qrScanner.destroy();
+		}
+		this.qrScanner = null;
+	}
+
+	switchCamera(): void {
+		this.selectedCameraIndex ++;
+		this.startScanning();
+	}
+
+	private async getAvailableCameras() {
+		return await navigator.mediaDevices.enumerateDevices()
+			.then(devices => devices.filter(device => device.kind === 'videoinput'));
+	}
+
+	onResize(): void {
+		if (this.$video.videoWidth > 0 && this.$video.videoHeight > 0) {
+			let crosshairSize = calculateDisplayModeInnerSize(this.$main.getBoundingClientRect(), {width: this.$video.videoWidth, height: this.$video.videoHeight}, UiPageDisplayMode.FIT_SIZE);
+			this.$crosshair.style.width = crosshairSize.width + "px";
+			this.$crosshair.style.height = crosshairSize.height + "px";
+		}
+	}
+
+
+	destroy() {
+		super.destroy();
+		this.qrScanner.destroy();
+	}
+}
+
+TeamAppsUiComponentRegistry.registerComponentClass("UiQrCodeScanner", UiQrCodeScanner);
diff --git a/teamapps-client/ts/modules/UiResponsiveGridLayout.ts b/teamapps-client/ts/modules/UiResponsiveGridLayout.ts
index 52c430e4e..b04ae3a9f 100644
--- a/teamapps-client/ts/modules/UiResponsiveGridLayout.ts
+++ b/teamapps-client/ts/modules/UiResponsiveGridLayout.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,17 +17,18 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-import {UiComponent} from "./UiComponent";
+import {AbstractUiComponent} from "./AbstractUiComponent";
 import {TeamAppsUiContext} from "./TeamAppsUiContext";
 import {UiGridLayout} from "./micro-components/UiGridLayout";
 import {UiResponsiveGridLayoutCommandHandler, UiResponsiveGridLayoutConfig} from "../generated/UiResponsiveGridLayoutConfig";
 import {UiResponsiveGridLayoutPolicyConfig} from "../generated/UiResponsiveGridLayoutPolicyConfig";
 import {TeamAppsUiComponentRegistry} from "./TeamAppsUiComponentRegistry";
+import {parseHtml} from "./Common";
 
-export class UiResponsiveGridLayout extends UiComponent<UiResponsiveGridLayoutConfig> implements UiResponsiveGridLayoutCommandHandler {
+export class UiResponsiveGridLayout extends AbstractUiComponent<UiResponsiveGridLayoutConfig> implements UiResponsiveGridLayoutCommandHandler {
 
-	private $main: JQuery;
-	private $gridLayout: JQuery;
+	private $main: HTMLElement;
+	private $gridLayout: HTMLElement;
 
 	private layoutsFromSmallToLargeMinApplicableWidth: { minApplicableWidth: number, layout: UiGridLayout }[];
 	private currentLayout: UiGridLayout;
@@ -35,15 +36,15 @@ export class UiResponsiveGridLayout extends UiComponent<UiResponsiveGridLayoutCo
 	constructor(config: UiResponsiveGridLayoutConfig,
 	            context: TeamAppsUiContext) {
 		super(config, context);
-		this.$main = $(`<div class="UiResponsiveGridLayout">
+		this.$main = parseHtml(`<div class="UiResponsiveGridLayout">
 	<div class="UiGridLayout"></div>
 </div>`);
-		this.$gridLayout = this.$main.find(">.UiGridLayout");
+		this.$gridLayout = this.$main.querySelector<HTMLElement>(":scope >.UiGridLayout");
 		this.setFillHeight(config.fillHeight);
 		this.updateLayoutPolicies(config.layoutPolicies);
 	}
 
-	getMainDomElement(): JQuery {
+	doGetMainElement(): HTMLElement {
 		return this.$main;
 	}
 
@@ -56,27 +57,20 @@ export class UiResponsiveGridLayout extends UiComponent<UiResponsiveGridLayoutCo
 			}
 		});
 		this.updateLayout();
-		this.resizeChildren();
 	}
 
 	onResize(): void {
 		this.updateLayout();
-		this.resizeChildren();
 	}
 
 	private updateLayout() {
 		const layout = this.getApplicableLayout();
 		if (this.currentLayout !== layout) {
 			this.currentLayout = layout;
-			this.currentLayout.getAllComponents().forEach(c => c.attachedToDom = this.attachedToDom);
 			layout.applyTo(this.$gridLayout);
 		}
 	}
 
-	private resizeChildren() {
-		this.currentLayout.getAllComponents().forEach(c => c.reLayout());
-	}
-
 	private getApplicableLayout(): UiGridLayout {
 		const availableWidth = this.getWidth();
 		let firstTooLargePolicyIndex = this.layoutsFromSmallToLargeMinApplicableWidth.findIndex(p => p.minApplicableWidth > availableWidth);
@@ -87,13 +81,9 @@ export class UiResponsiveGridLayout extends UiComponent<UiResponsiveGridLayoutCo
 	}
 
 	public setFillHeight(fillHeight: boolean) {
-		this.$main.toggleClass("fill-height", !!fillHeight);
+		this.$main.classList.toggle("fill-height", !!fillHeight);
 	}
 
-
-	protected onAttachedToDom(): void {
-		this.currentLayout.getAllComponents().forEach(c => c.attachedToDom = true);
-	}
 }
 
 TeamAppsUiComponentRegistry.registerComponentClass("UiResponsiveGridLayout", UiResponsiveGridLayout);
diff --git a/teamapps-client/ts/modules/UiRootPanel.ts b/teamapps-client/ts/modules/UiRootPanel.ts
index 76cc1d605..e6a97b7f9 100644
--- a/teamapps-client/ts/modules/UiRootPanel.ts
+++ b/teamapps-client/ts/modules/UiRootPanel.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -18,35 +18,39 @@
  * =========================LICENSE_END==================================
  */
 import * as moment from "moment-timezone";
-import * as $ from "jquery";
+
 import {UiComponentConfig} from "../generated/UiComponentConfig";
-import {UiWindow, UiWindowListener} from "./UiWindow";
+import {UiWindow} from "./UiWindow";
 import {UiConfigurationConfig} from "../generated/UiConfigurationConfig";
-import {UiWindowConfig} from "../generated/UiWindowConfig";
-import {UiNotificationConfig} from "../generated/UiNotificationConfig";
-import {UiComponent} from "./UiComponent";
+import {AbstractUiComponent} from "./AbstractUiComponent";
 import {TeamAppsUiContext, TeamAppsUiContextInternalApi} from "./TeamAppsUiContext";
-import {convertJavaDateTimeFormatToMomentDateTimeFormat, exitFullScreen, insertAtIndex, showNotification} from "./Common";
-import {UiRootPanelCommandHandler, UiRootPanelConfig} from "../generated/UiRootPanelConfig";
-import {UiComponentRevealAnimation} from "../generated/UiComponentRevealAnimation";
+import {createUiLocation, exitFullScreen, getLastPointerCoordinates, pageTransition, parseHtml} from "./Common";
+import {
+	UiRootPanel_GlobalKeyEventOccurredEvent, UiRootPanel_NavigationStateChangeEvent,
+	UiRootPanelCommandHandler,
+	UiRootPanelConfig,
+	UiRootPanelEventSource
+} from "../generated/UiRootPanelConfig";
 import {TeamAppsUiComponentRegistry} from "./TeamAppsUiComponentRegistry";
 import {UiTemplateConfig} from "../generated/UiTemplateConfig";
 import * as log from "loglevel";
 import {ElementUiComponentAdapter} from "./micro-components/ElementUiComponentAdapter";
 import {UiGenericErrorMessageOption} from "../generated/UiGenericErrorMessageOption";
-import {TeamAppsEvent, TeamAppsEventListener} from "./util/TeamAppsEvent";
-import {UiColorConfig} from "../generated/UiColorConfig";
-import {createUiColorCssString} from "./util/CssFormatUtil";
-
-require("moment-jdateformatparser");
-
+import {UiComponent} from "./UiComponent";
+import {UiPageTransition} from "../generated/UiPageTransition";
+import {UiPopup} from "./UiPopup";
+import {showNotification, UiNotification} from "./UiNotification";
+import {UiNotificationPosition} from "../generated/UiNotificationPosition";
+import {UiEntranceAnimation} from "../generated/UiEntranceAnimation";
+import {UiExitAnimation} from "../generated/UiExitAnimation";
+import {releaseWakeLock, requestWakeLock} from "./util/WakeLock";
+import {EventSubscription, TeamAppsEvent, TeamAppsEventListener} from "./util/TeamAppsEvent";
+import {KeyEventType} from "../generated/KeyEventType";
 
-interface ChildComponent {
-	$wrapper: JQuery,
-	component: UiComponent<UiComponentConfig>
-}
+export class UiRootPanel extends AbstractUiComponent<UiRootPanelConfig> implements UiRootPanelCommandHandler, UiRootPanelEventSource {
 
-export class UiRootPanel extends UiComponent<UiRootPanelConfig> implements UiRootPanelCommandHandler {
+	public static readonly onGlobalKeyEventOccurred: TeamAppsEvent<UiRootPanel_GlobalKeyEventOccurredEvent> = new TeamAppsEvent();
+	public static readonly onNavigationStateChange: TeamAppsEvent<UiRootPanel_NavigationStateChangeEvent> = new TeamAppsEvent();
 
 	private static LOGGER: log.Logger = log.getLogger("UiRootPanel");
 	private static ALL_ROOT_PANELS_BY_ID: { [id: string]: UiRootPanel } = {};
@@ -58,99 +62,76 @@ export class UiRootPanel extends UiComponent<UiRootPanelConfig> implements UiRoo
 	} = {};
 	private static WINDOWS_BY_ID: { [windowId: string]: UiWindow } = {};
 
-	private $root: JQuery;
-	private childComponentsById: {[id: string]: ChildComponent} = {};
-	private visibleChildComponent: ChildComponent;
-	private $backgroundTransitionStyle: JQuery;
-	private $backgroundStyle: JQuery;
-	private $imagePreloadDiv: JQuery;
+	private $root: HTMLElement;
+	private content: UiComponent;
+	private $contentWrapper: HTMLElement;
+	private $backgroundTransitionStyle: HTMLElement;
+	private $backgroundStyle: HTMLElement;
+	private $imagePreloadDiv: HTMLElement;
 
 	private backgroundImage: string;
 	private blurredBackgroundImage: string;
 	private backgroundColor: string;
 
-	static __initialize() {
-		$(window).resize((e) => {
-			this.ALL_ROOT_PANELS.forEach(rootPanel => {
-				rootPanel.reLayout();
-			});
-			Object.keys(this.WINDOWS_BY_ID).map(id => this.WINDOWS_BY_ID[id]).forEach(window => window.reLayout());
-		});
-	}
-
 	constructor(config: UiRootPanelConfig, context: TeamAppsUiContext) {
 		super(config, context);
 		UiRootPanel.ALL_ROOT_PANELS_BY_ID[config.id] = this;
 
-		this.$root = $(`<div data-background-container-id="${config.id}" class="UiRootPanel teamapps-backgroundImage">
+		this.$root = parseHtml(`<div data-background-container-id="${config.id}" class="UiRootPanel teamapps-backgroundImage">
               <div class="image-preload-div"></div>
               <style data-style-type="backgroundTransitionStyle"></style>
               <style data-style-type="backgroundStyle"></style>
               <style></style>
 		</div>`);
-		this.$imagePreloadDiv = this.$root.find(".image-preload-div");
-		this.$backgroundTransitionStyle = this.$root.find("[data-style-type='backgroundTransitionStyle']");
-		this.$backgroundStyle = this.$root.find("[data-style-type='backgroundStyle']");
+		this.$imagePreloadDiv = this.$root.querySelector<HTMLElement>(":scope .image-preload-div");
+		this.$backgroundTransitionStyle = this.$root.querySelector<HTMLElement>(":scope [data-style-type='backgroundTransitionStyle']");
+		this.$backgroundStyle = this.$root.querySelector<HTMLElement>(":scope [data-style-type='backgroundStyle']");
 
-		if (config.childComponents != null && config.childComponents.length > 0) {
-			config.childComponents.forEach(c => this.addChildComponent(c, false));
-			this.setVisibleChildComponent(config.visibleChildComponentId || config.childComponents[0].id, null, 0);
-		}
+		this.setContent(config.content as UiComponent);
 
 		this.setOptimizedForTouch(context.config.optimizedForTouch);
 	}
 
-	public getMainDomElement(): JQuery {
-		return this.$root;
+	public static setGlobalKeyEventsEnabled(unmodified: boolean, modifiedWithAltKey: boolean, modifiedWithCtrlKey: boolean, modifiedWithMetaKey: boolean, includeRepeats: boolean, keyDown: boolean, keyUp: boolean) {
+		setGlobalKeyEventsEnabled.call(this, unmodified, modifiedWithAltKey, modifiedWithCtrlKey, modifiedWithMetaKey, includeRepeats, keyDown, keyUp);
 	}
 
-	public addChildComponent(component: UiComponent, show: boolean) {
-		let $childComponentContainer = $(`<div class="child-component-wrapper ${show ? 'active' : ''}">`)
-			.appendTo(this.$root);
-		component.getMainDomElement().appendTo($childComponentContainer);
-		this.childComponentsById[component.getId()] = {
-			component: component,
-			$wrapper: $childComponentContainer
-		};
-		component.attachedToDom = this.attachedToDom;
-		if (show) {
-			this.setVisibleChildComponent(component.getId(), null, 0);
-		}
+	public doGetMainElement(): HTMLElement {
+		return this.$root;
 	}
 
-	public setVisibleChildComponent(childComponentId: string, animation: UiComponentRevealAnimation | null, animationDuration: number): void {
-		if (childComponentId == null) {
-			this.visibleChildComponent = null;
-			this.childComponents.forEach(c => c.$wrapper.removeClass('active'));
-		} else {
-			let childComponent = this.childComponentsById[childComponentId];
-			if (childComponent) {
-				this.visibleChildComponent = childComponent;
-				this.childComponents.forEach(c => c.$wrapper.removeClass('active'));
-				childComponent.$wrapper.addClass('active');
-				this.visibleChildComponent.component.reLayout();
-			}
+	public setContent(content: UiComponent, transition: UiPageTransition | null = null, animationDuration: number = 0): void {
+		if (content == this.content) {
+			return;
 		}
-	}
 
-	public removeChildComponent(childComponentId: string): void {
-		let childComponent = this.childComponentsById[childComponentId];
-		delete this.childComponentsById[childComponentId];
-		if (childComponent) {
-			childComponent.$wrapper.detach();
+		let oldContent = this.content;
+		let $oldContentWrapper = this.$contentWrapper;
+
+		this.content = content;
+
+		this.$contentWrapper = parseHtml(`<div class="child-component-wrapper">`);
+		if (content != null) {
+			this.$contentWrapper.appendChild(content.getMainElement());
 		}
-	}
+		this.$root.appendChild(this.$contentWrapper);
 
-	private get childComponents() {
-		return Object.keys(this.childComponentsById).map(id => this.childComponentsById[id]);
+		if (transition != null && animationDuration > 0) {
+			pageTransition($oldContentWrapper, this.$contentWrapper, transition, animationDuration, () => {
+				$oldContentWrapper && $oldContentWrapper.remove();
+			});
+		} else {
+			$oldContentWrapper && $oldContentWrapper.remove();
+		}
 	}
 
 	public static createComponent(config: UiComponentConfig, context: TeamAppsUiContextInternalApi) {
-		context.createAndRegisterComponent(config);
+		let o = context.createClientObject(config);
+		context.registerClientObject(o, config.id, config._type);
 	}
 
-	public static destroyComponent(component: UiComponent, context: TeamAppsUiContextInternalApi) {
-		context.destroyComponent(component);
+	public static destroyComponent(componentId: string, context: TeamAppsUiContextInternalApi) {
+		context.destroyClientObject(componentId);
 	}
 
 	public static refreshComponent(config: UiComponentConfig, context: TeamAppsUiContextInternalApi) {
@@ -159,23 +140,25 @@ export class UiRootPanel extends UiComponent<UiRootPanelConfig> implements UiRoo
 
 	public static setConfig(config: UiConfigurationConfig, context: TeamAppsUiContext) {
 		let oldConfig = context.config;
-		if (!oldConfig || oldConfig.isoLanguage !== config.isoLanguage) {
-			$.getScript("runtime-resources/moment-locales/" + config.isoLanguage + ".js");
-			$.getScript("runtime-resources/fullcalendar-locales/" + config.isoLanguage + ".js");
+		if ((!oldConfig || oldConfig.locale !== config.locale) && config.locale !== 'en') {
+			$.getScript("runtime-resources/moment-locales/" + config.locale + ".js");
+			$.getScript("runtime-resources/fullcalendar-locales/" + config.locale + ".js");
 		}
-		moment.locale(config.isoLanguage);
-		config.dateFormat = convertJavaDateTimeFormatToMomentDateTimeFormat(config.dateFormat);
-		config.timeFormat = convertJavaDateTimeFormatToMomentDateTimeFormat(config.timeFormat);
+		moment.locale(config.locale);
 		this.setThemeClassName(config.themeClassName);
 
 		this.ALL_ROOT_PANELS.forEach(uiRootPanel => {
 			uiRootPanel.setOptimizedForTouch(config.optimizedForTouch);
 		});
 
-		this.LOGGER.warn("TODO Setting configuration on context. This should be implemented using an event instead!");
+		// this.LOGGER.warn("TODO Setting configuration on context. This should be implemented using an event instead!");
 		(context as any).config = config; // TODO change this to firing an event to the context!!!!
 	}
 
+	public static setSessionMessageWindows(expiredMessageWindow: UiWindow, errorMessageWindow: UiWindow, terminatedMessageWindow: UiWindow, context: TeamAppsUiContext) {
+		(context as any).setSessionMessageWindows(expiredMessageWindow, errorMessageWindow, terminatedMessageWindow);
+	}
+
 	public static setPageTitle(pageTitle: string) {
 		document.title = pageTitle;
 	}
@@ -221,83 +204,36 @@ export class UiRootPanel extends UiComponent<UiRootPanelConfig> implements UiRoo
 		});
 	}
 
-	public static setBackgroundColor(backgroundColor: UiColorConfig, animationDuration: number) {
+	public static setBackgroundColor(backgroundColor: string, animationDuration: number) {
 		this.ALL_ROOT_PANELS.forEach(uiRootPanel => {
-			uiRootPanel.backgroundColor = backgroundColor && createUiColorCssString(backgroundColor);
+			uiRootPanel.backgroundColor = backgroundColor;
 			uiRootPanel.updateBackground(animationDuration);
 		})
 	}
 
 	private updateBackground(animationDuration: number) {
-		this.$backgroundTransitionStyle.text(`
+		this.$backgroundTransitionStyle.textContent = `
                 /*[data-background-container-id='${this.getId()}']*/ .teamapps-backgroundImage,
                 /*[data-background-container-id='${this.getId()}']*/ .teamapps-blurredBackgroundImage {
                     transition: background-image ${animationDuration}ms ease-in-out, background-color ${animationDuration}ms ease-in-out;
                 }
-            `);
-		this.$root[0].clientWidth; // ensure the css is applied!
-		this.$backgroundStyle.text(`
+            `;
+		this.$root.clientWidth; // ensure the css is applied!
+		this.$backgroundStyle.textContent = `
 				/*[data-background-container-id='${this.getId()}']*/.teamapps-backgroundImage,
                 /*[data-background-container-id='${this.getId()}']*/ .teamapps-backgroundImage {
                     background-color: ${this.backgroundColor || ''};
-                    background-image: ${this.backgroundImage ? `url(${this.backgroundImage})` : 'none'};
+                    background-image: ${this.backgroundImage ? `url('${this.backgroundImage}')` : 'none'};
                 }
                 /*[data-background-container-id='${this.getId()}']*/.teamapps-blurredBackgroundImage,
                 /*[data-background-container-id='${this.getId()}']*/ .teamapps-blurredBackgroundImage {
-                    background-image: ${this.blurredBackgroundImage ? `url(${this.blurredBackgroundImage})` : 'none'};
+                    background-image: ${this.blurredBackgroundImage ? `url('${this.blurredBackgroundImage}')` : 'none'};
                 }
-            `);
-	}
-
-	public static showWindow(uiWindow: UiWindow, animationDuration = 1000, context?: TeamAppsUiContext) {
-		this.ALL_ROOT_PANELS.forEach(rootPanel => {
-			rootPanel.childComponents.forEach(childComponent => {
-				rootPanel.visibleChildComponent.$wrapper.css({
-					transition: `opacity ${animationDuration}ms, filter ${animationDuration}ms`
-				});
-			});
-
-		});
-
-		uiWindow.getMainDomElement().appendTo(document.body);
-		uiWindow.getMainDomElement().attr("data-background-container-id", this.ALL_ROOT_PANELS[0].getId());
-		uiWindow.attachedToDom = true;
-		uiWindow.setListener({
-			onWindowClosed: (window, animationDuration) => this.closeWindow(window.getId(), animationDuration)
-		});
-		this.WINDOWS_BY_ID[uiWindow.getId()] = uiWindow;
-		uiWindow.show(animationDuration);
-
-		this.ALL_ROOT_PANELS.forEach(rootPanel => {
-			rootPanel.getMainDomElement().toggleClass("modal-window-mode", uiWindow.isModal());
-		});
-	}
-
-	public static closeWindow(windowId: string, animationDuration: number) {
-		this.ALL_ROOT_PANELS.forEach(rootPanel => {
-			rootPanel.getMainDomElement().removeClass('modal-window-mode');
-		});
-
-		let uiWindow = this.WINDOWS_BY_ID[windowId];
-		uiWindow.hide(animationDuration);
-		delete this.WINDOWS_BY_ID[windowId];
-
-		setTimeout(() => {
-			uiWindow.getMainDomElement().detach();
-		}, animationDuration);
-	};
-
-	onResize() {
-		if (this.visibleChildComponent) {
-			this.visibleChildComponent.component.reLayout();
-		}
-	}
-
-	protected onAttachedToDom() {
-		this.childComponents.forEach(c => c.component.attachedToDom = true);
+            `;
 	}
 
 	public destroy(): void {
+		super.destroy();
 		delete UiRootPanel.ALL_ROOT_PANELS_BY_ID[this.getId()];
 		if (Object.keys(UiRootPanel.ALL_ROOT_PANELS_BY_ID).length === 0) {
 			Object.keys(UiRootPanel.WINDOWS_BY_ID).forEach(windowId => UiRootPanel.WINDOWS_BY_ID[windowId].close(0));
@@ -305,9 +241,8 @@ export class UiRootPanel extends UiComponent<UiRootPanelConfig> implements UiRoo
 	}
 
 	public static buildRootPanel(containerElementId: string, uiRootPanel: UiRootPanel, context?: TeamAppsUiContext): void {
-		const $container = $(containerElementId ? "#" + containerElementId : document.body);
-		uiRootPanel.getMainDomElement().appendTo($container);
-		uiRootPanel.attachedToDom = true;
+		const $container = containerElementId ? document.querySelector(containerElementId) : document.body;
+		$container.appendChild(uiRootPanel.getMainElement());
 	}
 
 	public static setThemeClassName(theme: string) {
@@ -319,14 +254,17 @@ export class UiRootPanel extends UiComponent<UiRootPanelConfig> implements UiRoo
 		}
 	}
 
-	public static showNotification(notification: UiNotificationConfig, context: TeamAppsUiContext) {
-		showNotification(context.templateRegistry.createTemplateRenderer(notification.template).render(notification.data), notification);
+	public static showNotification(notification: UiNotification, position: UiNotificationPosition, entranceAnimation: UiEntranceAnimation, exitAnimation: UiExitAnimation, context: TeamAppsUiContext) {
+		showNotification(notification, position, entranceAnimation, exitAnimation);
 	}
 
 	public static downloadFile(fileUrl: string, fileName: string) {
 		const link = document.createElement('a');
-		link.href = fileUrl + (fileUrl.indexOf('?') === -1 ? '?' : '&') + 'teamapps-download-filename=' + fileName;
-		(<any>link).download = fileName;
+		link.href = fileUrl;
+		if (fileName != null) {
+			link.href += (fileUrl.indexOf('?') === -1 ? '?' : '&') + 'teamapps-download-filename=' + fileName;
+			link.setAttribute("download", fileName);
+		}
 		if (document.createEvent) {
 			const e = document.createEvent('MouseEvents');
 			e.initEvent('click', true, true);
@@ -382,39 +320,163 @@ export class UiRootPanel extends UiComponent<UiRootPanelConfig> implements UiRoo
 		exitFullScreen();
 	}
 
-	public static showGenericErrorMessage(title: string, message: string, options: UiGenericErrorMessageOption[], context: TeamAppsUiContext): void {
+	public static createGenericErrorMessageWindow(title: string, message: string, showErrorIcon: boolean, options: UiGenericErrorMessageOption[], context: TeamAppsUiContext): UiWindow {
 		let uiWindow = new UiWindow({
 			id: null,
 			title: title,
-			width: 330,
-			height: 150,
-			modalBackgroundDimmingColor: {red: 0, green: 0, blue: 0, alpha: .5},
+			width: 370,
+			height: 200,
+			modalBackgroundDimmingColor: "rgba(0, 0, 0, .5)",
 			modal: true,
 			content: null
 		}, context);
-		let $contentElement = $(`<div class="UiGenericErrorMessage">
-	<div class="icon img img-48" style="background-image: url(/resources/window-close-grey.png)"></div>
-	<div class="message">${message}</div>
+		let $contentElement = parseHtml(`<div class="UiGenericErrorMessage">
+	<div class="icon img img-48" style="background-image: url('/resources/window-close-grey.png'); display: ${showErrorIcon ? 'block' : 'none'}"></div>
+	<div class="message" style="text-align: justify;">${message}</div>
 	<div class="option-buttons">
 		${options.map(o => `<div class="btn btn-default ${UiGenericErrorMessageOption[o].toLowerCase()}">${UiGenericErrorMessageOption[o]}</div>`).join("")}
 	</div>
 </div>`);
 		uiWindow.setContent(new ElementUiComponentAdapter($contentElement));
-		$contentElement.find('.ok').on('click', () => {
+		$contentElement.querySelector<HTMLElement>(':scope .ok').addEventListener('click', () => {
 			uiWindow.close(500);
 		});
-		$contentElement.find('.reload').on('click', () => {
-			window.location.reload(true);
+		$contentElement.querySelector<HTMLElement>(':scope .reload').addEventListener('click', () => {
+			window.location.reload();
 		});
-		UiRootPanel.showWindow(uiWindow, 500);
+		return uiWindow;
 	}
 
 	setOptimizedForTouch(optimizedForTouch: boolean) {
-		this.$root.toggleClass("optimized-for-touch", optimizedForTouch);
+		this.$root.classList.toggle("optimized-for-touch", optimizedForTouch);
 		document.body.classList.toggle("optimized-for-touch", optimizedForTouch); // needed for popups and maximized panels... TODO either only use this or change implementation
 	}
-}
 
-UiRootPanel.__initialize();
+	public static showPopupAtCurrentMousePosition(popup: UiPopup) {
+		popup.setPosition(...getLastPointerCoordinates());
+		document.body.appendChild(popup.getMainElement());
+	}
 
+	public static showPopup(popup: UiPopup) {
+		document.body.appendChild(popup.getMainElement());
+	}
+
+	public static async requestWakeLock(uuid: string): Promise<boolean> {
+		return await requestWakeLock(uuid);
+	}
+
+	public static async releaseWakeLock(uuid: string) {
+		return releaseWakeLock(uuid);
+	}
+
+	public static async goToUrl(url: string, blankPage: boolean) {
+		this.LOGGER.info(`goToUrl(${url}, ${blankPage})`);
+		if (blankPage) {
+			window.open(url, '_blank');
+		} else {
+			location.href = url;
+		}
+	}
+
+	public static async changeNavigationHistoryState(relativeUrl: string, fireEvent: boolean, push: boolean) {
+		if (window.location.pathname + window.location.search === relativeUrl) {
+			return; // nothing to do here...
+		}
+		if (push) {
+			window.history.pushState({}, "", relativeUrl);
+		} else {
+			window.history.replaceState({}, "", relativeUrl);
+		}
+		if (fireEvent) {
+			UiRootPanel.onNavigationStateChange.fire({location: createUiLocation(), triggeredBrowserNavigation: false});
+		}
+	}
+
+	public static async navigateForward(steps: number) {
+		window.history.go(steps);
+	}
+
+	public static setFavicon(url: string) {
+		let link:HTMLLinkElement = document.querySelector("link[rel~='icon']");
+		if (!link) {
+			link = document.createElement('link');
+			link.rel = 'icon';
+			document.getElementsByTagName('head')[0].appendChild(link);
+		}
+		link.href = url;
+	}
+
+	public static setTitle(title: string) {
+		document.title = title;
+	}
+}
 TeamAppsUiComponentRegistry.registerComponentClass("UiRootPanel", UiRootPanel);
+
+// GLOBAL:
+
+let keyboardEventSettings: { unmodified: boolean, modifiedWithAltKey: boolean, modifiedWithCtrlKey: boolean, modifiedWithMetaKey: boolean, includeRepeats: boolean } = {
+	unmodified: false,
+	modifiedWithAltKey: false,
+	modifiedWithCtrlKey: false,
+	modifiedWithMetaKey: false,
+	includeRepeats: false,
+};
+
+let keyboardEventListener = (e: KeyboardEvent) => {
+	let settings = keyboardEventSettings;
+	if (e.repeat && !settings.includeRepeats) {
+		return;
+	}
+	let modified = e.ctrlKey || e.altKey || e.metaKey;
+	if (!modified && settings.unmodified
+		|| e.ctrlKey && settings.modifiedWithCtrlKey
+		|| e.altKey && settings.modifiedWithAltKey
+		|| e.metaKey && settings.modifiedWithMetaKey) {
+
+		let el = e.target as Element;
+		let componentId: string | null;
+		while (el != null) {
+			el = el.parentElement;
+			componentId = el?.getAttribute("data-teamapps-id");
+			if (componentId != null) {
+				break;
+			}
+		}
+
+		UiRootPanel.onGlobalKeyEventOccurred.fire({
+			eventType: e.type == "keydown" ? KeyEventType.KEY_DOWN : KeyEventType.KEY_UP,
+			sourceComponentId: componentId,
+			code: e.code,
+			isComposing: e.isComposing,
+			key: e.key,
+			charCode: e.charCode,
+			keyCode: e.keyCode,
+			locale: (e as any).locale,
+			location: e.location,
+			repeat: e.repeat,
+			altKey: e.altKey,
+			ctrlKey: e.ctrlKey,
+			shiftKey: e.shiftKey,
+			metaKey: e.metaKey
+		})
+	}
+}
+
+function setGlobalKeyEventsEnabled(unmodified: boolean, modifiedWithAltKey: boolean, modifiedWithCtrlKey: boolean, modifiedWithMetaKey: boolean, includeRepeats: boolean, keyDown: boolean, keyUp: boolean) {
+	document.removeEventListener("keydown", keyboardEventListener, {capture: true});
+	document.removeEventListener("keyup", keyboardEventListener, {capture: true});
+	keyboardEventSettings = {unmodified, modifiedWithAltKey, modifiedWithCtrlKey, modifiedWithMetaKey, includeRepeats};
+	if (keyDown) {
+		document.addEventListener("keydown", keyboardEventListener, {capture: true, passive: true})
+	}
+	if (keyUp) {
+		document.addEventListener("keyup", keyboardEventListener, {capture: true, passive: true})
+	}
+}
+
+window.addEventListener('popstate', (event) => {
+	UiRootPanel.onNavigationStateChange.fire({
+		location: createUiLocation(),
+		triggeredBrowserNavigation: true
+	});
+});
diff --git a/teamapps-client/ts/modules/UiScript.ts b/teamapps-client/ts/modules/UiScript.ts
new file mode 100644
index 000000000..bcd89a4a2
--- /dev/null
+++ b/teamapps-client/ts/modules/UiScript.ts
@@ -0,0 +1,62 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+
+import {AbstractUiComponent} from "./AbstractUiComponent";
+import {TeamAppsUiContext} from "./TeamAppsUiContext";
+import {TeamAppsUiComponentRegistry} from "./TeamAppsUiComponentRegistry";
+import {UiScriptCommandHandler, UiScriptConfig} from "../generated/UiScriptConfig";
+
+export class UiScript extends AbstractUiComponent<UiScriptConfig> implements UiScriptCommandHandler {
+	private scriptElement: HTMLScriptElement;
+
+	private modulePromise: Promise<any>;
+
+	constructor(config: UiScriptConfig, context: TeamAppsUiContext) {
+		super(config, context);
+
+		this.scriptElement = document.createElement('script');
+		this.scriptElement.type = 'module';
+		this.scriptElement.innerText = config.script;
+		const someExistingScriptElement = document.getElementsByTagName('script')[0];
+		someExistingScriptElement.parentNode.insertBefore(this.scriptElement, someExistingScriptElement);
+
+		this.modulePromise = loadModuleFromString(config.script);
+	}
+
+	protected doGetMainElement(): HTMLElement {
+		throw new Error("Method not implemented.");
+	}
+
+	async callFunction(name: string, parameters: any[]) {
+		((await this.modulePromise)[name] as Function).apply(null, parameters)
+	}
+
+}
+
+async function loadModuleFromString(moduleCode: string) {
+	const url = URL.createObjectURL(new Blob([moduleCode], {type: 'application/javascript'}));
+	try {
+		return await eval(`import("${url}")`); // needed so webpack does not try to be intelligent...
+	} finally {
+		URL.revokeObjectURL(url);
+	}
+}
+
+TeamAppsUiComponentRegistry.registerComponentClass("UiScript", UiScript);
diff --git a/teamapps-client/ts/modules/UiSplitPane.ts b/teamapps-client/ts/modules/UiSplitPane.ts
index f6b62ac59..479ea0ba6 100644
--- a/teamapps-client/ts/modules/UiSplitPane.ts
+++ b/teamapps-client/ts/modules/UiSplitPane.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,32 +17,32 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-import * as $ from "jquery";
+
 import {bind} from "./util/Bind";
 import {TeamAppsEvent} from "./util/TeamAppsEvent";
 import {UiComponentConfig} from "../generated/UiComponentConfig";
 import {Emptyable, isEmptyable} from "./util/Emptyable";
-import {UiComponent} from "./UiComponent";
+import {AbstractUiComponent} from "./AbstractUiComponent";
 import {TeamAppsUiContext} from "./TeamAppsUiContext";
-import {capitalizeFirstLetter} from "./Common";
+import {capitalizeFirstLetter, css, parseHtml} from "./Common";
 import {UiSplitPane_SplitResizedEvent, UiSplitPaneCommandHandler, UiSplitPaneConfig, UiSplitPaneEventSource} from "../generated/UiSplitPaneConfig";
 import {UiSplitSizePolicy} from "../generated/UiSplitSizePolicy";
 import {UiSplitDirection} from "../generated/UiSplitDirection";
-import {EventFactory} from "../generated/EventFactory";
 import {TeamAppsUiComponentRegistry} from "./TeamAppsUiComponentRegistry";
+import {UiComponent} from "./UiComponent";
 
-export class UiSplitPane extends UiComponent<UiSplitPaneConfig> implements Emptyable, UiSplitPaneCommandHandler, UiSplitPaneEventSource {
-	public readonly onSplitResized: TeamAppsEvent<UiSplitPane_SplitResizedEvent> = new TeamAppsEvent<UiSplitPane_SplitResizedEvent>(this);
+export class UiSplitPane extends AbstractUiComponent<UiSplitPaneConfig> implements Emptyable, UiSplitPaneCommandHandler, UiSplitPaneEventSource {
+	public readonly onSplitResized: TeamAppsEvent<UiSplitPane_SplitResizedEvent> = new TeamAppsEvent<UiSplitPane_SplitResizedEvent>();
 
 	private _firstChildComponent: UiComponent<UiComponentConfig>;
 	private _lastChildComponent: UiComponent<UiComponentConfig>;
-	private _$splitPane: JQuery;
-	private _$firstChildContainerWrapper: JQuery;
-	private _$lastChildContainerWrapper: JQuery;
-	private _$firstChildContainer: JQuery;
-	private _$lastChildContainer: JQuery;
-	private _$dividerWrapper: JQuery;
-	private _$divider: JQuery;
+	private _$splitPane: HTMLElement;
+	private _$firstChildContainerWrapper: HTMLElement;
+	private _$lastChildContainerWrapper: HTMLElement;
+	private _$firstChildContainer: HTMLElement;
+	private _$lastChildContainer: HTMLElement;
+	private _$dividerWrapper: HTMLElement;
+	private _$divider: HTMLElement;
 
 	private _sizeAttribute: 'height' | 'width';
 	private _minSizeAttribute: 'minWidth' | 'minHeight';
@@ -55,7 +55,7 @@ export class UiSplitPane extends UiComponent<UiSplitPaneConfig> implements Empty
 	private firstChildMinSize: number;
 	private lastChildMinSize: number;
 
-	public readonly onEmptyStateChanged: TeamAppsEvent<boolean> = new TeamAppsEvent(this);
+	public readonly onEmptyStateChanged: TeamAppsEvent<boolean> = new TeamAppsEvent();
 
 	constructor(config: UiSplitPaneConfig,
 	            context: TeamAppsUiContext) {
@@ -64,7 +64,7 @@ export class UiSplitPane extends UiComponent<UiSplitPaneConfig> implements Empty
 		this.sizePolicy = config.sizePolicy;
 		const firstChildContainerId = config.id + '_firstChildContainer';
 		const lastChildContainerId = config.id + '_lastChildContainer';
-		this._$splitPane = $(`<div class="splitpane splitpane-${UiSplitDirection[config.splitDirection].toLowerCase()} splitpane-${UiSplitSizePolicy[this.sizePolicy].toLowerCase()}" data-teamapps-id="${config.id}">
+		this._$splitPane = parseHtml(`<div class="splitpane splitpane-${UiSplitDirection[config.splitDirection].toLowerCase()} splitpane-${UiSplitSizePolicy[this.sizePolicy].toLowerCase()}">
 	<div class="splitpane-component-wrapper">
 		<div id="${firstChildContainerId}" class="splitpane-component"></div>
 	</div>
@@ -75,13 +75,13 @@ export class UiSplitPane extends UiComponent<UiSplitPaneConfig> implements Empty
 		<div id="${lastChildContainerId}" class="splitpane-component"></div>
 	</div>
 </div>`);
-		const $componentWrappers = this._$splitPane.find(".splitpane-component-wrapper");
-		this._$firstChildContainerWrapper = $componentWrappers.first();
-		this._$lastChildContainerWrapper = $componentWrappers.last();
-		this._$firstChildContainer = this._$firstChildContainerWrapper.find(".splitpane-component");
-		this._$lastChildContainer = this._$lastChildContainerWrapper.find(".splitpane-component");
-		this._$dividerWrapper = this._$splitPane.find(".splitpane-divider-wrapper");
-		this._$divider = this._$splitPane.find(".splitpane-divider");
+		const $componentWrappers = this._$splitPane.querySelectorAll<HTMLElement>(":scope .splitpane-component-wrapper");
+		this._$firstChildContainerWrapper = $componentWrappers.item(0);
+		this._$lastChildContainerWrapper = $componentWrappers.item(1);
+		this._$firstChildContainer = this._$firstChildContainerWrapper.querySelector<HTMLElement>(":scope .splitpane-component");
+		this._$lastChildContainer = this._$lastChildContainerWrapper.querySelector<HTMLElement>(":scope .splitpane-component");
+		this._$dividerWrapper = this._$splitPane.querySelector<HTMLElement>(":scope .splitpane-divider-wrapper");
+		this._$divider = this._$splitPane.querySelector<HTMLElement>(":scope .splitpane-divider");
 
 		this._sizeAttribute = config.splitDirection === UiSplitDirection.HORIZONTAL ? 'height' : 'width';
 		this._minSizeAttribute = "min" + capitalizeFirstLetter(this._sizeAttribute) as 'minWidth' | 'minHeight';
@@ -92,11 +92,11 @@ export class UiSplitPane extends UiComponent<UiSplitPaneConfig> implements Empty
 		this.firstChildMinSize = config.firstChildMinSize;
 		this.lastChildMinSize = config.lastChildMinSize;
 
-		this._$divider.bind('mousedown touchstart', this.mousedownHandler.bind(this));
+		['mousedown', 'touchstart'].forEach((eventName) => this._$divider.addEventListener(eventName, (e: MouseEvent) => this.mousedownHandler(e)));
 
 		this._updatePositions();
-		this.setFirstChild(config.firstChild);
-		this.setLastChild(config.lastChild);
+		this.setFirstChild(config.firstChild as UiComponent);
+		this.setLastChild(config.lastChild as UiComponent);
 		this._updateChildContainerClasses();
 
 	}
@@ -105,49 +105,47 @@ export class UiSplitPane extends UiComponent<UiSplitPaneConfig> implements Empty
 		return this._config.splitDirection
 	}
 
-	public getMainDomElement(): JQuery {
+	public doGetMainElement(): HTMLElement {
 		return this._$splitPane;
 	}
 
-	protected onAttachedToDom() {
-		if (this.firstChildComponent) this.firstChildComponent.attachedToDom = true;
-		if (this.lastChildComponent) this.lastChildComponent.attachedToDom = true;
-	}
-
 	private mousedownHandler(event: MouseEvent) {
-		//let blurredBackgroundImageContainers = $('.teamapps-blurredBackgroundImage').removeClass('teamapps-blurredBackgroundImage');
 		event.preventDefault();
 		const isTouchEvent = event.type.match(/^touch/),
 			moveEvent = isTouchEvent ? 'touchmove' : 'mousemove',
 			endEvent = isTouchEvent ? 'touchend' : 'mouseup';
-		this._$divider.addClass('dragged');
+		this._$divider.classList.add('dragged');
 		if (isTouchEvent) {
-			this._$divider.addClass('touch');
+			this._$divider.classList.add('touch');
 		}
-		$(document).on(moveEvent, this.createDragHandler(this.pageXof(event), this.pageYof(event)));
-		$(document).on(endEvent, (event) => {
-			$(document).unbind(moveEvent);
-			$(document).unbind(endEvent);
-			this._$divider.removeClass('dragged touch');
+		let dragHandler = this.createDragHandler(this.pageXof(event), this.pageYof(event));
+		let dropHandler = (event: Event) => {
+			document.removeEventListener(moveEvent, dragHandler);
+			document.removeEventListener(endEvent, dropHandler);
+			this._$divider.classList.remove('dragged', 'touch');
 
 			let referenceChildSize;
 			if (this.sizePolicy === UiSplitSizePolicy.RELATIVE) {
-				referenceChildSize = this._$firstChildContainer.get(0)[this._offsetSizeAttribute] / this._$splitPane.get(0)[this._offsetSizeAttribute];
+				referenceChildSize = this._$firstChildContainer[this._offsetSizeAttribute] / this._$splitPane[this._offsetSizeAttribute];
 			} else if (this.sizePolicy === UiSplitSizePolicy.FIRST_FIXED) {
-				referenceChildSize = this._$firstChildContainer.get(0)[this._offsetSizeAttribute];
+				referenceChildSize = this._$firstChildContainer[this._offsetSizeAttribute];
 			} else {
-				referenceChildSize = this._$lastChildContainer.get(0)[this._offsetSizeAttribute];
+				referenceChildSize = this._$lastChildContainer[this._offsetSizeAttribute];
 			}
-			this.onSplitResized.fire(EventFactory.createUiSplitPane_SplitResizedEvent(this._config.id, referenceChildSize));
+			this.onSplitResized.fire({
+				referenceChildSize: referenceChildSize
+			});
 			this.onResize();
 
-			//blurredBackgroundImageContainers.addClass('teamapps-blurredBackgroundImage');
-		});
+			//blurredBackgroundImageContainers.classList.add('teamapps-blurredBackgroundImage');
+		};
+		document.addEventListener(moveEvent, dragHandler);
+		document.addEventListener(endEvent, dropHandler);
 	}
 
-	private createDragHandler(dragStartX: number, dragStartY: number): JQuery.EventHandlerBase<MouseEvent, any> {
-		const initialFirstContainerWidth = this._$firstChildContainer[0][this._offsetSizeAttribute];
-		const splitPaneSize = this._$splitPane.get(0)[this._offsetSizeAttribute];
+	private createDragHandler(dragStartX: number, dragStartY: number): (e: MouseEvent) => void {
+		const initialFirstContainerWidth = this._$firstChildContainer[this._offsetSizeAttribute];
+		const splitPaneSize = this._$splitPane[this._offsetSizeAttribute];
 		return (event: MouseEvent) => {
 			const diff = (this._config.splitDirection === UiSplitDirection.HORIZONTAL) ? this.pageYof(event) - dragStartY : this.pageXof(event) - dragStartX;
 			const newFirstChildSize = initialFirstContainerWidth + diff;
@@ -167,20 +165,19 @@ export class UiSplitPane extends UiComponent<UiSplitPaneConfig> implements Empty
 	}
 
 	private pageXof(event: MouseEvent) {
-		return event.pageX || (event as any).originalEvent.pageX || (event as any).touches[0].pageX;
+		return event.pageX ?? (event as any).touches[0].pageX;
 	}
 
 	private pageYof(event: MouseEvent) {
-		return event.pageY || (event as any).originalEvent.pageY || (event as any).touches[0].pageY;
+		return event.pageY ?? (event as any).touches[0].pageY;
 	}
 
 	public setFirstChild(firstChild: UiComponent<UiComponentConfig>) {
-		this._$firstChildContainer[0].innerHTML = '';
+		this._$firstChildContainer.innerHTML = '';
 
 		this._firstChildComponent = firstChild;
 		if (firstChild) {
-			firstChild.getMainDomElement().appendTo(this._$firstChildContainer);
-			firstChild.attachedToDom = this.attachedToDom;
+			this._$firstChildContainer.appendChild(firstChild.getMainElement());
 			if (this._firstChildComponent && isEmptyable(this._firstChildComponent)) {
 				this._firstChildComponent.onEmptyStateChanged.addListener(this.onChildEmptyStateChanged);
 			}
@@ -188,19 +185,15 @@ export class UiSplitPane extends UiComponent<UiSplitPaneConfig> implements Empty
 		this._updateChildContainerClasses();
 		this._updatePositions();
 
-		this.firstChildComponent && (this.firstChildComponent.attachedToDom = this.attachedToDom);
-		this.lastChildComponent && this.lastChildComponent.reLayout();
-
 		this.updateEmptyState();
 	}
 
 	public setLastChild(lastChild: UiComponent<UiComponentConfig>) {
-		this._$lastChildContainer[0].innerHTML = '';
+		this._$lastChildContainer.innerHTML = '';
 
 		this._lastChildComponent = lastChild;
 		if (lastChild) {
-			lastChild.getMainDomElement().appendTo(this._$lastChildContainer);
-			lastChild.attachedToDom = this.attachedToDom;
+			this._$lastChildContainer.appendChild(lastChild.getMainElement());
 			if (this._lastChildComponent && isEmptyable(this._lastChildComponent)) {
 				this._lastChildComponent.onEmptyStateChanged.addListener(this.onChildEmptyStateChanged);
 			}
@@ -208,9 +201,6 @@ export class UiSplitPane extends UiComponent<UiSplitPaneConfig> implements Empty
 		this._updateChildContainerClasses();
 		this._updatePositions();
 
-		this.lastChildComponent && (this.lastChildComponent.attachedToDom = this.attachedToDom);
-		this.lastChildComponent && this.lastChildComponent.reLayout();
-
 		this.updateEmptyState();
 	}
 
@@ -219,20 +209,24 @@ export class UiSplitPane extends UiComponent<UiSplitPaneConfig> implements Empty
 		const lastEmpty = this.isLastEmtpy();
 
 		if (firstEmpty && lastEmpty) {
-			this._$firstChildContainerWrapper.addClass("empty-child").removeClass("single-child");
-			this._$lastChildContainerWrapper.addClass("empty-child").removeClass("single-child");
+			this._$firstChildContainerWrapper.classList.add("empty-child");
+			this._$firstChildContainerWrapper.classList.remove("single-child");
+			this._$lastChildContainerWrapper.classList.add("empty-child");
+			this._$lastChildContainerWrapper.classList.remove("single-child");
 		} else if (firstEmpty && this._config.fillIfSingleChild) {
-			this._$firstChildContainerWrapper.addClass("empty-child");
-			this._$lastChildContainerWrapper.addClass("single-child").removeClass("empty-child");
+			this._$firstChildContainerWrapper.classList.add("empty-child");
+			this._$lastChildContainerWrapper.classList.add("single-child");
+			this._$lastChildContainerWrapper.classList.remove("empty-child");
 		} else if (lastEmpty && this._config.fillIfSingleChild) {
-			this._$firstChildContainerWrapper.addClass("single-child").removeClass("empty-child");
-			this._$lastChildContainerWrapper.addClass("empty-child");
+			this._$firstChildContainerWrapper.classList.add("single-child");
+			this._$firstChildContainerWrapper.classList.remove("empty-child");
+			this._$lastChildContainerWrapper.classList.add("empty-child");
 		} else {
-			this._$firstChildContainerWrapper.removeClass("single-child empty-child");
-			this._$lastChildContainerWrapper.removeClass("single-child empty-child");
+			this._$firstChildContainerWrapper.classList.remove("single-child", "empty-child");
+			this._$lastChildContainerWrapper.classList.remove("single-child", "empty-child");
 		}
-		this._$dividerWrapper.toggleClass("hidden", firstEmpty || lastEmpty);
-		this._$divider.toggleClass("hidden", !this._config.resizable);
+		this._$dividerWrapper.classList.toggle("hidden", firstEmpty || lastEmpty);
+		this._$divider.classList.toggle("hidden", !this._config.resizable);
 		this.onResize(); // yes!! Maybe this splitpane does not need it for itself, but we want the children to relayout if necessary!
 	}
 
@@ -240,39 +234,39 @@ export class UiSplitPane extends UiComponent<UiSplitPaneConfig> implements Empty
 		const referenceChildSize = this.referenceChildSize;
 
 		if (this.sizePolicy === UiSplitSizePolicy.RELATIVE) {
-			this._$firstChildContainerWrapper.css({
+			css(this._$firstChildContainerWrapper, {
 				"flex-grow": "" + referenceChildSize,
 				"flex-shrink": "" + referenceChildSize,
 				"flex-basis": "1px",
 				[this._minSizeAttribute]: this.firstChildMinSize
 			});
-			this._$lastChildContainerWrapper.css({
+			css(this._$lastChildContainerWrapper, {
 				"flex-grow": "" + (1 - referenceChildSize),
 				"flex-shrink": "" + (1 - referenceChildSize),
 				"flex-basis": "1px",
 				[this._minSizeAttribute]: this.lastChildMinSize
 			});
 		} else if (this.sizePolicy === UiSplitSizePolicy.FIRST_FIXED) {
-			this._$firstChildContainerWrapper.css({
+			css(this._$firstChildContainerWrapper, {
 				"flex-grow": "0",
 				"flex-shrink": "1",
 				"flex-basis": referenceChildSize + 'px',
 				[this._minSizeAttribute]: this.firstChildMinSize
 			});
-			this._$lastChildContainerWrapper.css({
+			css(this._$lastChildContainerWrapper, {
 				"flex-grow": "1",
 				"flex-shrink": "1",
 				"flex-basis": '1px',
 				[this._minSizeAttribute]: this.lastChildMinSize
 			});
 		} else if (this.sizePolicy === UiSplitSizePolicy.LAST_FIXED) {
-			this._$firstChildContainerWrapper.css({
+			css(this._$firstChildContainerWrapper, {
 				"flex-grow": "1",
 				"flex-shrink": "1",
 				"flex-basis": '1px',
 				[this._minSizeAttribute]: this.firstChildMinSize
 			});
-			this._$lastChildContainerWrapper.css({
+			css(this._$lastChildContainerWrapper, {
 				"flex-grow": "0",
 				"flex-shrink": "1",
 				"flex-basis": referenceChildSize + 'px',
@@ -305,15 +299,10 @@ export class UiSplitPane extends UiComponent<UiSplitPaneConfig> implements Empty
 		return this.isFirstEmpty() && this.isLastEmtpy();
 	}
 
-	public onResize(): void {
-		this._firstChildComponent && this._firstChildComponent.reLayout();
-		this._lastChildComponent && this._lastChildComponent.reLayout();
-	}
-
 	public setSize(referenceChildSize: number, sizePolicy: UiSplitSizePolicy) {
 		this.referenceChildSize = referenceChildSize;
 		this.sizePolicy = sizePolicy;
-		this._$divider.addClass('splitpane-' + UiSplitSizePolicy[this.sizePolicy].toLowerCase());
+		this._$divider.classList.add('splitpane-' + UiSplitSizePolicy[this.sizePolicy].toLowerCase());
 		this._updatePositions();
 	}
 
@@ -337,8 +326,6 @@ export class UiSplitPane extends UiComponent<UiSplitPaneConfig> implements Empty
 		this.onEmptyStateChanged.fireIfChanged(this.empty);
 	}
 
-	public destroy(): void {
-	}
 }
 
 TeamAppsUiComponentRegistry.registerComponentClass("UiSplitPane", UiSplitPane);
diff --git a/teamapps-client/ts/modules/UiStaticGridLayout.ts b/teamapps-client/ts/modules/UiStaticGridLayout.ts
index 0651a6f1b..da3479a62 100644
--- a/teamapps-client/ts/modules/UiStaticGridLayout.ts
+++ b/teamapps-client/ts/modules/UiStaticGridLayout.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,27 +17,28 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-import {UiComponent} from "./UiComponent";
+import {AbstractUiComponent} from "./AbstractUiComponent";
 import {TeamAppsUiContext} from "./TeamAppsUiContext";
 import {UiStaticGridLayoutCommandHandler, UiStaticGridLayoutConfig} from "../generated/UiStaticGridLayoutConfig";
 import {UiGridLayout} from "./micro-components/UiGridLayout";
 import {UiGridLayoutConfig} from "../generated/UiGridLayoutConfig";
 import {TeamAppsUiComponentRegistry} from "./TeamAppsUiComponentRegistry";
 import {UiResponsiveGridLayout} from "./UiResponsiveGridLayout";
+import {parseHtml} from "./Common";
 
-export class UiStaticGridLayout extends UiComponent<UiStaticGridLayoutConfig> implements UiStaticGridLayoutCommandHandler{
+export class UiStaticGridLayout extends AbstractUiComponent<UiStaticGridLayoutConfig> implements UiStaticGridLayoutCommandHandler{
 
-	private $main: JQuery;
+	private $main: HTMLElement;
 	private layout: UiGridLayout;
 
 	constructor(config: UiStaticGridLayoutConfig,
 	            context: TeamAppsUiContext) {
 		super(config, context);
-		this.$main = $(`<div class="UiStaticGridLayout"></div>`);
+		this.$main = parseHtml(`<div class="UiStaticGridLayout"></div>`);
 		this.updateLayout(config.descriptor);
 	}
 
-	getMainDomElement(): JQuery {
+	doGetMainElement(): HTMLElement {
 		return this.$main;
 	}
 
@@ -46,10 +47,6 @@ export class UiStaticGridLayout extends UiComponent<UiStaticGridLayoutConfig> im
 		this.layout.applyTo(this.$main);
 	}
 
-	onResize(): void {
-		this.layout.getAllComponents().forEach(c => c.reLayout());
-	}
-
 }
 
 TeamAppsUiComponentRegistry.registerComponentClass("UiStaticGridLayout", UiStaticGridLayout);
diff --git a/teamapps-client/ts/modules/UiTabPanel.ts b/teamapps-client/ts/modules/UiTabPanel.ts
index f86b56bd4..3d743c735 100644
--- a/teamapps-client/ts/modules/UiTabPanel.ts
+++ b/teamapps-client/ts/modules/UiTabPanel.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,7 +17,7 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-import * as $ from "jquery";
+
 import {UiToolbar} from "./tool-container/toolbar/UiToolbar";
 import {UiComponentConfig} from "../generated/UiComponentConfig";
 import {TeamAppsEvent} from "./util/TeamAppsEvent";
@@ -25,10 +25,10 @@ import {UiTabConfig} from "../generated/UiTabConfig";
 import {bind} from "./util/Bind";
 import {Emptyable, isEmptyable} from "./util/Emptyable";
 import {UiToolButton} from "./micro-components/UiToolButton";
-import {UiComponent} from "./UiComponent";
+import {AbstractUiComponent} from "./AbstractUiComponent";
 import {UiDropDown} from "./micro-components/UiDropDown";
 import {TeamAppsUiContext} from "./TeamAppsUiContext";
-import {executeWhenAttached} from "./util/ExecuteWhenAttached";
+import {executeWhenFirstDisplayed} from "./util/ExecuteWhenFirstDisplayed";
 import {
 	UiTabPanel_TabClosedEvent,
 	UiTabPanel_TabNeedsRefreshEvent,
@@ -40,40 +40,40 @@ import {
 } from "../generated/UiTabPanelConfig";
 import {createUiToolButtonConfig} from "../generated/UiToolButtonConfig";
 import {TeamAppsUiComponentRegistry} from "./TeamAppsUiComponentRegistry";
-import {EventFactory} from "../generated/EventFactory";
 import {UiTabPanelTabStyle} from "../generated/UiTabPanelTabStyle";
-import {insertAtIndex, maximizeComponent} from "./Common";
+import {insertAtIndex, insertBefore, maximizeComponent, parseHtml, prependChild} from "./Common";
 import {UiWindowButtonType} from "../generated/UiWindowButtonType";
 import {StaticIcons} from "./util/StaticIcons";
+import {UiComponent} from "./UiComponent";
 
 
 interface Tab {
 	config: UiTabConfig;
-	$button: JQuery;
-	$wrapper: JQuery;
-	$dropDownTabButton: JQuery;
-	$toolbarContainer: JQuery;
-	$contentContainer: JQuery;
+	$button: HTMLElement;
+	$wrapper: HTMLElement;
+	$dropDownTabButton: HTMLElement;
+	$toolbarContainer: HTMLElement;
+	$contentContainer: HTMLElement;
 	toolbar: UiToolbar;
 	contentComponent: UiComponent<UiComponentConfig>;
 	buttonWidth?: number;
 	visible: boolean;
 }
 
-export class UiTabPanel extends UiComponent<UiTabPanelConfig> implements UiTabPanelCommandHandler, UiTabPanelEventSource, Emptyable {
+export class UiTabPanel extends AbstractUiComponent<UiTabPanelConfig> implements UiTabPanelCommandHandler, UiTabPanelEventSource, Emptyable {
 
-	public readonly onTabSelected: TeamAppsEvent<UiTabPanel_TabSelectedEvent> = new TeamAppsEvent<UiTabPanel_TabSelectedEvent>(this);
+	public readonly onTabSelected: TeamAppsEvent<UiTabPanel_TabSelectedEvent> = new TeamAppsEvent<UiTabPanel_TabSelectedEvent>();
 
-	public readonly onTabNeedsRefresh: TeamAppsEvent<UiTabPanel_TabNeedsRefreshEvent> = new TeamAppsEvent<UiTabPanel_TabNeedsRefreshEvent>(this);
-	public readonly onTabClosed: TeamAppsEvent<UiTabPanel_TabClosedEvent> = new TeamAppsEvent<UiTabPanel_TabClosedEvent>(this);
-	public readonly onEmptyStateChanged: TeamAppsEvent<boolean> = new TeamAppsEvent(this);
+	public readonly onTabNeedsRefresh: TeamAppsEvent<UiTabPanel_TabNeedsRefreshEvent> = new TeamAppsEvent<UiTabPanel_TabNeedsRefreshEvent>();
+	public readonly onTabClosed: TeamAppsEvent<UiTabPanel_TabClosedEvent> = new TeamAppsEvent<UiTabPanel_TabClosedEvent>();
+	public readonly onEmptyStateChanged: TeamAppsEvent<boolean> = new TeamAppsEvent();
 
-	public readonly onWindowButtonClicked: TeamAppsEvent<UiTabPanel_WindowButtonClickedEvent> = new TeamAppsEvent(this);
+	public readonly onWindowButtonClicked: TeamAppsEvent<UiTabPanel_WindowButtonClickedEvent> = new TeamAppsEvent();
 
 	private readonly defaultToolButtons = {
-		[UiWindowButtonType.MINIMIZE]: new UiToolButton(createUiToolButtonConfig("MINIMIZE", StaticIcons.MINIMIZE, "Minimize"), this._context),
-		[UiWindowButtonType.MAXIMIZE_RESTORE]: new UiToolButton(createUiToolButtonConfig("MAXIMIZE_RESTORE", StaticIcons.MAXIMIZE, "Maximize/Restore"), this._context),
-		[UiWindowButtonType.CLOSE]: new UiToolButton(createUiToolButtonConfig("CLOSE", StaticIcons.CLOSE, "Close"), this._context),
+		[UiWindowButtonType.MINIMIZE]: new UiToolButton(createUiToolButtonConfig(StaticIcons.MINIMIZE, "Minimize", {debuggingId: "window-button-minimize"}), this._context),
+		[UiWindowButtonType.MAXIMIZE_RESTORE]: new UiToolButton(createUiToolButtonConfig(StaticIcons.MAXIMIZE, "Maximize/Restore", {debuggingId: "window-button-maximize"}), this._context),
+		[UiWindowButtonType.CLOSE]: new UiToolButton(createUiToolButtonConfig(StaticIcons.CLOSE, "Close", {debuggingId: "window-button-close"}), this._context),
 	};
 	private readonly orderedDefaultToolButtonTypes = [
 		UiWindowButtonType.MINIMIZE,
@@ -81,42 +81,41 @@ export class UiTabPanel extends UiComponent<UiTabPanelConfig> implements UiTabPa
 		UiWindowButtonType.CLOSE
 	];
 
-	private $tabPanel: JQuery;
-	private $leftButtonsWrapper: JQuery;
-	private $rightButtonsWrapper: JQuery;
-	private $dropDownButton: JQuery;
-	private $dropDown: JQuery;
-	private $dropButtonContainerLeft: JQuery;
-	private $dropButtonContainerRight: JQuery;
-	private $toolTabButton: JQuery;
-	private $toolButtonContainer: JQuery;
-	private $windowButtonContainer: JQuery;
-	private $contentWrapper: JQuery;
-	private $tabBar: JQuery;
-	private $tabsContainer: JQuery;
+	private $tabPanel: HTMLElement;
+	private $leftButtonsWrapper: HTMLElement;
+	private $rightButtonsWrapper: HTMLElement;
+	private $dropDownButton: HTMLElement;
+	private $dropDown: HTMLElement;
+	private $dropButtonContainerLeft: HTMLElement;
+	private $dropButtonContainerRight: HTMLElement;
+	private $toolsContainer: HTMLElement;
+	private $toolButtonContainer: HTMLElement;
+	private $windowButtonContainer: HTMLElement;
+	private $contentWrapper: HTMLElement;
+	private $tabBar: HTMLElement;
+	private $tabsContainer: HTMLElement;
 
 	private leftTabs: Tab[] = [];
 	private rightTabs: Tab[] = [];
 	private selectedTab: Tab;
 	private hideTabBarIfSingleTab: boolean;
 
-	private toolButtons: { [id: string]: UiToolButton } = {};
-	private toolButtonDropDown: UiDropDown;
-	private windowButtons: UiWindowButtonType[];
+	private toolButtons: UiToolButton[] = [];
+	private windowButtons: UiWindowButtonType[] = [];
 
-	private restoreFunction: (animationCallback: () => void) => void;
+	private restoreFunction: (animationCallback?: () => void) => void;
 
 	constructor(config: UiTabPanelConfig, context: TeamAppsUiContext) {
 		super(config, context);
 
-		this.$tabPanel = $(`<div id="${config.id}" class="UiTabPanel">
+		this.$tabPanel = parseHtml(`<div class="UiTabPanel">
     <div class="tab-panel-header teamapps-blurredBackgroundImage">
         <div class="background-color-div">
 	        <div class="tab-button-container left"></div>
 	        <div class="dropdown-button" tabindex="0"></div>
 	        <div class="spacer"></div>
 	        <div class="tab-button-container right"></div>
-	        <div class="tab-button tool-tab-button">
+	        <div class="tools-container">
 	            <div class="tool-button-container"></div>
 	            <div class="window-button-container"></div>
 			</div>  	
@@ -130,18 +129,18 @@ export class UiTabPanel extends UiComponent<UiTabPanelConfig> implements UiTabPa
         <div class="tabpanel-content-wrapper"></div>
     </div>
 </div>`);
-		this.$tabBar = this.$tabPanel.find('>.tab-panel-header');
-		this.$tabsContainer = this.$tabBar.find('>.background-color-div');
-		this.$leftButtonsWrapper = this.$tabsContainer.find('>.tab-button-container.left');
-		this.$rightButtonsWrapper = this.$tabsContainer.find('>.tab-button-container.right');
-		this.$toolTabButton = this.$tabsContainer.find('>.tool-tab-button');
-		this.$toolButtonContainer = this.$toolTabButton.find('>.tool-button-container');
-		this.$windowButtonContainer = this.$toolTabButton.find('>.window-button-container');
-		this.$dropDownButton = this.$tabsContainer.find('>.dropdown-button');
-		this.$dropDown = this.$tabsContainer.find('>.tab-panel-dropdown');
-		this.$dropButtonContainerLeft = this.$dropDown.find('>.dropdown-button-container.left');
-		this.$dropButtonContainerRight = this.$dropDown.find('>.dropdown-button-container.right');
-		this.$contentWrapper = this.$tabPanel.find('.tabpanel-content-wrapper');
+		this.$tabBar = this.$tabPanel.querySelector<HTMLElement>(':scope >.tab-panel-header');
+		this.$tabsContainer = this.$tabBar.querySelector<HTMLElement>(':scope >.background-color-div');
+		this.$leftButtonsWrapper = this.$tabsContainer.querySelector<HTMLElement>(':scope >.tab-button-container.left');
+		this.$rightButtonsWrapper = this.$tabsContainer.querySelector<HTMLElement>(':scope >.tab-button-container.right');
+		this.$toolsContainer = this.$tabsContainer.querySelector<HTMLElement>(':scope >.tools-container');
+		this.$toolButtonContainer = this.$toolsContainer.querySelector<HTMLElement>(':scope >.tool-button-container');
+		this.$windowButtonContainer = this.$toolsContainer.querySelector<HTMLElement>(':scope >.window-button-container');
+		this.$dropDownButton = this.$tabsContainer.querySelector<HTMLElement>(':scope >.dropdown-button');
+		this.$dropDown = this.$tabsContainer.querySelector<HTMLElement>(':scope >.tab-panel-dropdown');
+		this.$dropButtonContainerLeft = this.$dropDown.querySelector<HTMLElement>(':scope >.dropdown-button-container.left');
+		this.$dropButtonContainerRight = this.$dropDown.querySelector<HTMLElement>(':scope >.dropdown-button-container.right');
+		this.$contentWrapper = this.$tabPanel.querySelector<HTMLElement>(':scope .tabpanel-content-wrapper');
 
 		this.setHideTabBarIfSingleTab(!!config.hideTabBarIfSingleTab);
 		this.setTabStyle(config.tabStyle);
@@ -155,26 +154,25 @@ export class UiTabPanel extends UiComponent<UiTabPanelConfig> implements UiTabPa
 			this.selectFirstVisibleTab();
 		}
 
-		this.$dropDownButton.click(() => {
-			if (this.$dropDown.is(':visible')) {
-				this.$dropDown.addClass("hidden");
+		this.$dropDownButton.addEventListener("click", () => {
+			if ($(this.$dropDown).is(':visible')) {
+				this.$dropDown.classList.add("hidden");
 			} else {
-				this.$dropDown.removeClass("hidden");
-				this.$dropDown.position({
+				this.$dropDown.classList.remove("hidden");
+				$(this.$dropDown).position({
 					my: "right top",
 					at: "right bottom",
 					of: this.$dropDownButton
 				});
 			}
-		}).blur(() => {
-			this.$dropDown.addClass("hidden");
+		});
+		this.$dropDownButton.addEventListener("blur", () => {
+			this.$dropDown.classList.add("hidden");
 		});
 
 		if (config.toolButtons != null) {
-			this.setToolButtons(config.toolButtons);
+			this.setToolButtons(config.toolButtons as UiToolButton[]);
 		}
-		this.toolButtonDropDown = new UiDropDown();
-
 		this.defaultToolButtons[UiWindowButtonType.MAXIMIZE_RESTORE].onClicked.addListener(() => {
 			if (this.restoreFunction == null) {
 				this.maximize();
@@ -184,10 +182,14 @@ export class UiTabPanel extends UiComponent<UiTabPanelConfig> implements UiTabPa
 		});
 		this.orderedDefaultToolButtonTypes.forEach(windowButtonType => {
 			this.defaultToolButtons[windowButtonType].onClicked.addListener(() => {
-				this.onWindowButtonClicked.fire(EventFactory.createUiTabPanel_WindowButtonClickedEvent(this.getId(), windowButtonType));
+				this.onWindowButtonClicked.fire({
+					windowButton: windowButtonType
+				});
 			});
 		});
 		this.setWindowButtons(config.windowButtons);
+		this.setFillTabBarWidth(config.fillTabBarWidth ?? false);
+		this.setTabBarHeight(config.tabBarHeight);
 	}
 
 	public setMaximized(maximized: boolean) {
@@ -200,17 +202,33 @@ export class UiTabPanel extends UiComponent<UiTabPanelConfig> implements UiTabPa
 
 	public maximize(): void {
 		this.defaultToolButtons[UiWindowButtonType.MAXIMIZE_RESTORE].setIcon(StaticIcons.RESTORE);
-		this.restoreFunction = maximizeComponent(this, () => this.reLayout(true));
+		this.restoreFunction = maximizeComponent(this);
 	}
 
 	public restore(): void {
 		this.defaultToolButtons[UiWindowButtonType.MAXIMIZE_RESTORE].setIcon(StaticIcons.MAXIMIZE);
 		if (this.restoreFunction != null) {
-			this.restoreFunction(() => this.reLayout(true));
+			this.restoreFunction();
 		}
 		this.restoreFunction = null;
 	}
 
+	setFillTabBarWidth(fillTabBarWidth: boolean): any {
+		this._config.fillTabBarWidth = fillTabBarWidth;
+		this.$tabPanel.classList.toggle("fill-tab-bar-width", fillTabBarWidth);
+		this.relayoutButtons();
+	}
+
+	setTabBarHeight(tabBarHeight: string): any {
+		this._config.tabBarHeight = tabBarHeight;
+		if (tabBarHeight) {
+			this.$tabPanel.style.setProperty("--ta-tab-button-height", tabBarHeight);
+		} else {
+			this.$tabPanel.style.removeProperty("--ta-tab-button-height");
+		}
+		this.relayoutButtons();
+	}
+
 	public setHideTabBarIfSingleTab(hideTabBarIfSingleTab: boolean) {
 		this.hideTabBarIfSingleTab = hideTabBarIfSingleTab;
 		this.updateTabBarVisibility();
@@ -220,30 +238,29 @@ export class UiTabPanel extends UiComponent<UiTabPanelConfig> implements UiTabPa
 		return this.leftTabs.concat(this.rightTabs);
 	}
 
-	public getMainDomElement(): JQuery {
+	public doGetMainElement(): HTMLElement {
 		return this.$tabPanel;
 	}
 
 	private _createTab(tabConfig: UiTabConfig, index: number = Number.MAX_SAFE_INTEGER): Tab {
 		const $tabButton = this.createTabButton(tabConfig.tabId, tabConfig.icon, tabConfig.caption, tabConfig.closeable);
 		const $dropDownTabButton = this.createTabButton(tabConfig.tabId, tabConfig.icon, tabConfig.caption, tabConfig.closeable);
-		$tabButton.add($dropDownTabButton).mousedown(() => {
-			this.selectTab(tabConfig.tabId, true);
-		});
+		$tabButton.addEventListener("mousedown", () => this.selectTab(tabConfig.tabId, true));
+		$dropDownTabButton.addEventListener("mousedown", () => this.selectTab(tabConfig.tabId, true));
 
-		const $tabContent = $(`<div class="tab-content-wrapper" data-tab-name="${tabConfig.tabId}">
-                        <div class="tab-toolbar-container"/>
-                        <div class="tab-component-container"/>
-                    </div>`)
-			.appendTo(this.$contentWrapper);
+		const $tabContent = parseHtml(`<div class="tab-content-wrapper" data-tab-name="${tabConfig.tabId}">
+                        <div class="tab-toolbar-container"></div>
+                        <div class="tab-component-container"></div>
+                    </div>`);
+		this.$contentWrapper.appendChild($tabContent);
 
 		let tab: Tab = {
 			config: tabConfig,
 			$button: $tabButton,
 			$dropDownTabButton: $dropDownTabButton,
 			$wrapper: $tabContent,
-			$toolbarContainer: $tabContent.find(".tab-toolbar-container"),
-			$contentContainer: $tabContent.find(".tab-component-container"),
+			$toolbarContainer: $tabContent.querySelector<HTMLElement>(":scope .tab-toolbar-container"),
+			$contentContainer: $tabContent.querySelector<HTMLElement>(":scope .tab-component-container"),
 			toolbar: null,
 			contentComponent: null,
 			visible: tabConfig.visible
@@ -251,7 +268,7 @@ export class UiTabPanel extends UiComponent<UiTabPanelConfig> implements UiTabPa
 		this.putTabButtonsToIndex(tab, index);
 
 		if (tabConfig.toolbar) {
-			this.setTabToolbarInternal(tab, tabConfig.toolbar);
+			this.setTabToolbarInternal(tab, tabConfig.toolbar as UiToolbar);
 		}
 
 		return tab;
@@ -267,22 +284,23 @@ export class UiTabPanel extends UiComponent<UiTabPanelConfig> implements UiTabPa
 		}
 	}
 
-	private createTabButton(tabId: string, iconName: string, caption: string, closeable: boolean) {
-		const $tabButton = $(`<div class="tab-button" data-tab-name="${tabId}" draggable="true">
-                     ${iconName ? `<div class="tab-button-icon"><div class="img img-16" style="background-image: url(${this._context.getIconPath(iconName, 16)});"/></div>` : ''}
-                     <div class="tab-button-caption">${caption}</div>
-                     <div class="tab-button-filler"/>
+	private createTabButton(tabId: string, icon: string, caption: string, closeable: boolean) {
+		const $tabButton = parseHtml(`<div class="tab-button" data-tab-name="${tabId}" draggable="true">
+                     ${icon ? `<div class="tab-button-icon"><div class="img img-16" style="background-image: url('${icon}');"></div></div>` : ''}
+                     <div class="tab-button-caption">${caption}</div>                                                                                                                          	
                 </div>`);
 
 		if (closeable) {
 			const closeIconPath = "/resources/window-close-grey.png";
 			let closeButtonHtml = `<div class="tab-button-close-button">
-                        <div class="img ${this._context.config.optimizedForTouch ? 'img-16' : 'img-12'}" style="background-image: url(${closeIconPath});"/>
+                        <div class="img ${this._context.config.optimizedForTouch ? 'img-16' : 'img-12'}" style="background-image: url('${closeIconPath}');"></div>
                     </div>`;
-			const $closeButton1 = $(closeButtonHtml).appendTo($tabButton);
-			$closeButton1.mousedown(() => {
+			const $closeButton1 = $tabButton.appendChild(parseHtml(closeButtonHtml));
+			$closeButton1.addEventListener("mousedown", () => {
 				this.removeTab(tabId);
-				this.onTabClosed.fire(EventFactory.createUiTabPanel_TabClosedEvent(this._config.id, tabId));
+				this.onTabClosed.fire({
+					tabId: tabId
+				});
 			});
 		}
 		return $tabButton;
@@ -295,59 +313,46 @@ export class UiTabPanel extends UiComponent<UiTabPanelConfig> implements UiTabPa
 			return;
 		}
 		this.selectedTab = tab;
-		this.$leftButtonsWrapper
-			.add(this.$rightButtonsWrapper)
-			.add(this.$dropButtonContainerLeft)
-			.add(this.$dropButtonContainerRight)
-			.find('>.tab-button').removeClass('selected');
-		tab.$button.addClass('selected');
-		tab.$dropDownTabButton.addClass('selected');
-
-		this.$contentWrapper.find('>.tab-content-wrapper').removeClass('selected');
-		tab.$wrapper.addClass('selected');
+		[this.$leftButtonsWrapper, this.$rightButtonsWrapper, this.$dropButtonContainerLeft, this.$dropButtonContainerRight]
+			.forEach(el => el.querySelectorAll<HTMLElement>(':scope >.tab-button').forEach(el => el.classList.remove('selected')));
+		tab.$button.classList.add('selected');
+		tab.$dropDownTabButton.classList.add('selected');
+
+		this.$contentWrapper.querySelectorAll<HTMLElement>(':scope >.tab-content-wrapper').forEach(el => el.classList.remove('selected'));
+		tab.$wrapper.classList.add('selected');
 		if (sendSelectionEvent) {
-			this.onTabSelected.fire(EventFactory.createUiTabPanel_TabSelectedEvent(this.getId(), tabId));
+			this.onTabSelected.fire({
+				tabId: tabId
+			});
 		}
 		if (this.selectedTab.contentComponent == null) {
-			this.onTabNeedsRefresh.fire(EventFactory.createUiTabPanel_TabNeedsRefreshEvent(this.getId(), tabId));
-		}
-		if (tab.toolbar) {
-			if (!tab.toolbar.attachedToDom) {
-				tab.toolbar.attachedToDom = this.attachedToDom;
-			} else {
-				tab.toolbar.reLayout();
-			}
-		}
-		if (tab.contentComponent) {
-			if (!tab.contentComponent.attachedToDom) {
-				tab.contentComponent.attachedToDom = this.attachedToDom;
-			} else {
-				tab.contentComponent.reLayout();
-			}
+			this.onTabNeedsRefresh.fire({
+				tabId: tabId
+			});
 		}
 	}
 
-	public setTabContent(tabId: string, content: UiComponent<UiComponentConfig>) {
+	public setTabContent(tabId: string, content: UiComponent<UiComponentConfig>, fireLazyLoadEventIfNeeded = false) {
 		const tab = this.getTabById(tabId);
 		const $tabContentContainer = tab.$contentContainer;
 		if (tab.contentComponent) {
 			isEmptyable(tab.contentComponent) && tab.contentComponent.onEmptyStateChanged.removeListener(this.onChildEmptyStateChanged.bind(this));
-			$tabContentContainer[0].innerHTML = '';
+			$tabContentContainer.innerHTML = '';
 		}
 		tab.contentComponent = content;
 		if (tab.contentComponent) {
 			isEmptyable(tab.contentComponent) && tab.contentComponent.onEmptyStateChanged.addListener(this.onChildEmptyStateChanged.bind(this));
-			content.getMainDomElement().appendTo($tabContentContainer);
+			$tabContentContainer.appendChild(content.getMainElement());
 		}
 
 		this.onChildEmptyStateChanged();
 
 		// after (!!) the parent has been informed about the empty state change, we should think about setting attached (and resizing!!!)
 		if (this.selectedTab && this.selectedTab.config.tabId === tabId) {
-			if (tab.contentComponent) {
-				tab.contentComponent.attachedToDom = this.attachedToDom;
-			} else if (tab.config.lazyLoading) {
-				this.onTabNeedsRefresh.fire(EventFactory.createUiTabPanel_TabNeedsRefreshEvent(this.getId(), tabId));
+			if (!tab.contentComponent && tab.config.lazyLoading && fireLazyLoadEventIfNeeded) {
+				this.onTabNeedsRefresh.fire({
+					tabId: tabId
+				});
 			}
 		}
 
@@ -356,16 +361,16 @@ export class UiTabPanel extends UiComponent<UiTabPanelConfig> implements UiTabPa
 
 	setTabConfiguration(tabId: string, icon: string, caption: string, closeable: boolean, visible: boolean, rightSide: boolean): void {
 		let tab = this.getTabById(tabId);
-		tab.$button[0].innerHTML = '';
-		tab.$button.append(this.createTabButton(tabId, icon, caption, closeable).find(">*"));
-		tab.$dropDownTabButton[0].innerHTML = '';
-		tab.$dropDownTabButton.append(this.createTabButton(tabId, icon, caption, closeable).find(">*"));
+		tab.$button.innerHTML = '';
+		tab.$button.append(...Array.from(this.createTabButton(tabId, icon, caption, closeable).querySelectorAll<HTMLElement>(":scope >*")));
+		tab.$dropDownTabButton.innerHTML = '';
+		tab.$dropDownTabButton.append(...Array.from(this.createTabButton(tabId, icon, caption, closeable).querySelectorAll<HTMLElement>(":scope >*")));
 		if (rightSide && !tab.config.rightSide) {
-			this.$rightButtonsWrapper.append(tab.$button);
-			this.$dropButtonContainerRight.append(tab.$dropDownTabButton);
+			this.$rightButtonsWrapper.appendChild(tab.$button);
+			this.$dropButtonContainerRight.appendChild(tab.$dropDownTabButton);
 		} else if (!rightSide && tab.config.rightSide) {
-			this.$leftButtonsWrapper.append(tab.$button);
-			this.$dropButtonContainerLeft.append(tab.$dropDownTabButton);
+			this.$leftButtonsWrapper.appendChild(tab.$button);
+			this.$dropButtonContainerLeft.appendChild(tab.$dropDownTabButton);
 		}
 		tab.config.tabId = tabId;
 		tab.config.icon = icon;
@@ -387,13 +392,12 @@ export class UiTabPanel extends UiComponent<UiTabPanelConfig> implements UiTabPa
 		} else {
 			this.leftTabs.push(tab);
 		}
-		this.setTabContent(tabConfig.tabId, tabConfig.content);
+		this.setTabContent(tabConfig.tabId, tabConfig.content as UiComponent, true);
 		if (select || this.getAllTabs().length === 1) {
 			this.selectTab(tabConfig.tabId, false);
 		}
 		let tabBarVisibilityChanged = this.updateTabBarVisibility();
 		if (tabBarVisibilityChanged) {
-			this.reLayout(true);
 		} else {
 			this.relayoutButtons();
 		}
@@ -405,15 +409,6 @@ export class UiTabPanel extends UiComponent<UiTabPanelConfig> implements UiTabPa
 		this.putTabButtonsToIndex(tab, index);
 	}
 
-	protected onAttachedToDom() {
-		Object.values(this.toolButtons).forEach(b => b.attachedToDom = true);
-		this.getAllTabs().forEach(tab => {
-			if (tab.toolbar) tab.toolbar.attachedToDom = true;
-			if (tab.contentComponent) tab.contentComponent.attachedToDom = true;
-		});
-		this.reLayout();
-	}
-
 	public setTabToolbar(tabId: string, toolbar: UiToolbar) {
 		let tab = this.getTabById(tabId);
 		if (tab) {
@@ -423,14 +418,11 @@ export class UiTabPanel extends UiComponent<UiTabPanelConfig> implements UiTabPa
 
 	private setTabToolbarInternal(tab: Tab, toolbar: UiToolbar) {
 		if (tab.toolbar != null) {
-			tab.toolbar.getMainDomElement().detach();
+			tab.toolbar.getMainElement().remove();
 		}
 		tab.toolbar = toolbar;
 		if (toolbar) {
-			tab.$toolbarContainer.append(toolbar.getMainDomElement());
-		}
-		if (this.selectedTab && this.selectedTab.config.tabId === tab.config.tabId && tab.toolbar) {
-			tab.toolbar.attachedToDom = this.attachedToDom;
+			tab.$toolbarContainer.append(toolbar.getMainElement());
 		}
 	}
 
@@ -440,9 +432,9 @@ export class UiTabPanel extends UiComponent<UiTabPanelConfig> implements UiTabPa
 		if (!tab) return;
 
 		tab.contentComponent != null && isEmptyable(tab.contentComponent) && tab.contentComponent.onEmptyStateChanged.removeListener(this.onChildEmptyStateChanged.bind(this));
-		tab.$button.detach();
-		tab.$dropDownTabButton.detach();
-		tab.$wrapper.detach();
+		tab.$button.remove();
+		tab.$dropDownTabButton.remove();
+		tab.$wrapper.remove();
 
 		this.leftTabs = this.leftTabs.filter(tab => tab.config.tabId !== tabId);
 		this.rightTabs = this.rightTabs.filter(tab => tab.config.tabId !== tabId);
@@ -453,7 +445,6 @@ export class UiTabPanel extends UiComponent<UiTabPanelConfig> implements UiTabPa
 
 		let tabBarVisibilityChanged = this.updateTabBarVisibility();
 		if (tabBarVisibilityChanged) {
-			this.reLayout(true);
 		} else {
 			this.relayoutButtons();
 		}
@@ -465,7 +456,9 @@ export class UiTabPanel extends UiComponent<UiTabPanelConfig> implements UiTabPa
 			this.selectTab(this.getVisibleTabs()[0].config.tabId, true); // was !this._context.executingCommand
 		} else if (this.selectedTab != null) {
 			this.selectedTab = null;
-			this.onTabSelected.fire(EventFactory.createUiTabPanel_TabSelectedEvent(this.getId(), null));
+			this.onTabSelected.fire({
+				tabId: null
+			});
 		}
 	}
 
@@ -492,10 +485,10 @@ export class UiTabPanel extends UiComponent<UiTabPanelConfig> implements UiTabPa
 	}
 
 	private updateTabBarVisibility(): boolean {
-		let wasHidden = this.$tabBar.is('.hidden');
+		let wasHidden = this.$tabBar.classList.contains('hidden');
 		let isHidden = this.hideTabBarIfSingleTab && this.getVisibleTabs().length <= 1;
-		this.$tabBar.toggleClass("hidden", isHidden);
-		this.$tabBar[0].offsetHeight; // trigger reflow!
+		this.$tabBar.classList.toggle("hidden", isHidden);
+		this.$tabBar.offsetHeight; // trigger reflow!
 		return wasHidden != isHidden;
 	}
 
@@ -525,13 +518,11 @@ export class UiTabPanel extends UiComponent<UiTabPanelConfig> implements UiTabPa
 	}
 
 	public setToolButtons(toolButtons: UiToolButton[]) {
-		this.$toolButtonContainer[0].innerHTML = '';
-		this.$toolButtonContainer.toggleClass("hidden", !toolButtons || toolButtons.length === 0);
-		this.toolButtons = {};
+		this.$toolButtonContainer.innerHTML = '';
+		this.$toolButtonContainer.classList.toggle("hidden", !toolButtons || toolButtons.length === 0);
+		this.toolButtons = toolButtons ?? [];
 		toolButtons.forEach(toolButton => {
-			toolButton.getMainDomElement().appendTo(this.$toolButtonContainer);
-			toolButton.attachedToDom = this.attachedToDom;
-			this.toolButtons[toolButton.getId()] = toolButton;
+			this.$toolButtonContainer.appendChild(toolButton.getMainElement());
 		});
 		this.relayoutButtons();
 	}
@@ -540,97 +531,90 @@ export class UiTabPanel extends UiComponent<UiTabPanelConfig> implements UiTabPa
 		return Object.values(this.toolButtons);
 	}
 
-	public setWindowButtons(buttonTypes:UiWindowButtonType[]):void{
+	public setWindowButtons(buttonTypes: UiWindowButtonType[]): void {
 		this.windowButtons = [];
-		this.$windowButtonContainer[0].innerHTML = '';
-		if (buttonTypes && buttonTypes.length > 0) {
-			buttonTypes.forEach(toolButton => {
-				this.addWindowButton(toolButton);
-			});
-		} else {
-			this.windowButtons.slice().forEach(button => this.removeWindowButton(button));
-		}
+		this.$windowButtonContainer.innerHTML = '';
+		buttonTypes?.forEach(toolButton => {
+			this.addWindowButton(toolButton);
+		});
 	}
 
 	private addWindowButton(toolButtonType: UiWindowButtonType) {
-		if (this.windowButtons.filter(tb => tb === toolButtonType).length > 0){
+		if (this.windowButtons.filter(tb => tb === toolButtonType).length > 0) {
 			this.removeWindowButton(toolButtonType);
 		}
-		this.$windowButtonContainer.removeClass("hidden");
+		this.$windowButtonContainer.classList.remove("hidden");
 		this.windowButtons.push(toolButtonType);
 		const button = this.defaultToolButtons[toolButtonType];
-		if (this.$windowButtonContainer[0].children.length === 0) {
-			button.getMainDomElement().prependTo(this.$windowButtonContainer);
+		if (this.$windowButtonContainer.children.length === 0) {
+			prependChild(this.$windowButtonContainer, button.getMainElement());
 		} else {
 			let index = this.windowButtons
-				.sort((a, b) =>this.orderedDefaultToolButtonTypes.indexOf(a) - this.orderedDefaultToolButtonTypes.indexOf(b))
+				.sort((a, b) => this.orderedDefaultToolButtonTypes.indexOf(a) - this.orderedDefaultToolButtonTypes.indexOf(b))
 				.indexOf(toolButtonType);
-			if (index >= this.$windowButtonContainer[0].childNodes.length) {
-				button.getMainDomElement().appendTo(this.$windowButtonContainer);
+			if (index >= this.$windowButtonContainer.childNodes.length) {
+				this.$windowButtonContainer.appendChild(button.getMainElement());
 			} else {
-				button.getMainDomElement().insertBefore(this.$windowButtonContainer[0].children[index]);
+				insertBefore(button.getMainElement(), this.$windowButtonContainer.children[index]);
 			}
 		}
 		this.relayoutButtons();
 	}
 
 	public removeWindowButton(uiToolButton: UiWindowButtonType) {
-		this.defaultToolButtons[uiToolButton].getMainDomElement().detach();
+		this.defaultToolButtons[uiToolButton].getMainElement().remove();
 		this.windowButtons = this.windowButtons.filter(tb => tb !== uiToolButton);
 		if (this.windowButtons.length === 0) {
-			this.$windowButtonContainer.addClass("hidden");
+			this.$windowButtonContainer.classList.add("hidden");
 		}
 	}
 
 	public setTabStyle(tabStyle: UiTabPanelTabStyle) {
-		this.$tabPanel.removeClass('tab-style-ears tab-style-blocks')
-			.addClass(tabStyle === UiTabPanelTabStyle.EARS ? 'tab-style-ears' : 'tab-style-blocks');
-		this.$tabBar.toggleClass("teamapps-blurredBackgroundImage", tabStyle === UiTabPanelTabStyle.BLOCKS);
-		this.reLayout(true);
+		this.$tabPanel.classList.remove('tab-style-ears', 'tab-style-blocks');
+		this.$tabPanel.classList.add(tabStyle === UiTabPanelTabStyle.EARS ? 'tab-style-ears' : 'tab-style-blocks');
+		this.$tabBar.classList.toggle("teamapps-blurredBackgroundImage", tabStyle === UiTabPanelTabStyle.BLOCKS);
+		this.onResize();
 	}
 
-	@executeWhenAttached(true)
+	@executeWhenFirstDisplayed(true)
 	public onResize(): void {
-		if (!this.attachedToDom || this.getMainDomElement()[0].offsetWidth <= 0) return;
-		if (this.selectedTab) {
-			this.selectedTab.toolbar && this.selectedTab.toolbar.reLayout();
-			this.selectedTab.contentComponent && this.selectedTab.contentComponent.reLayout();
-		}
 		this.relayoutButtons();
 	}
 
-	@executeWhenAttached(true)
+	@executeWhenFirstDisplayed(true)
 	private relayoutButtons() {
-		if (this.$tabBar.is('.hidden')) {
+		if (this.$tabBar.classList.contains('hidden')) {
 			return;
 		}
-		let availableWidth = this.$tabsContainer.width() - this.$dropDownButton[0].offsetWidth - this.$toolTabButton[0].offsetWidth;
+		this.$toolsContainer.classList.toggle("hidden", this.toolButtons.length === 0 && this.windowButtons.length === 0);
+		let availableWidth = $(this.$tabsContainer).width() - this.$dropDownButton.offsetWidth - this.$toolsContainer.offsetWidth;
 		let sumOfButtonWidths = 0;
 		this.getAllTabs().forEach(tab => {
 			let tabFilled = !this.tabIsDeFactoEmpty(tab);
 
 			if (tabFilled) {
 				if (!tab.buttonWidth) {
-					tab.buttonWidth = tab.$button[0].offsetWidth
+					tab.$button.style.flex = "0 0 auto";
+					tab.buttonWidth = tab.$button.offsetWidth;
+					tab.$button.style.removeProperty("flex");
 				}
 				sumOfButtonWidths += tab.buttonWidth;
 
 				if (sumOfButtonWidths < availableWidth) {
-					tab.$button.removeClass("hidden");
-					tab.$dropDownTabButton.addClass("hidden");
+					tab.$button.classList.remove("hidden");
+					tab.$dropDownTabButton.classList.add("hidden");
 				} else {
-					tab.$button.addClass("hidden");
-					tab.$dropDownTabButton.removeClass("hidden");
+					tab.$button.classList.add("hidden");
+					tab.$dropDownTabButton.classList.remove("hidden");
 				}
 			} else {
-				tab.$button.add(tab.$dropDownTabButton).toggleClass("hidden", true);
+				tab.$button.classList.add("hidden");
+				tab.$dropDownTabButton.classList.add("hidden");
 			}
 		});
-		this.$dropDownButton.toggleClass("hidden", sumOfButtonWidths <= availableWidth);
+		this.$dropDownButton.classList.toggle("hidden", sumOfButtonWidths <= availableWidth);
 	}
 
-	public destroy(): void {
-	}
 }
 
 TeamAppsUiComponentRegistry.registerComponentClass("UiTabPanel", UiTabPanel);
diff --git a/teamapps-client/ts/modules/UiTemplateTestContainer.ts b/teamapps-client/ts/modules/UiTemplateTestContainer.ts
deleted file mode 100644
index b3cf3434a..000000000
--- a/teamapps-client/ts/modules/UiTemplateTestContainer.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-import * as $ from "jquery";
-import {UiComponent} from "./UiComponent";
-import {TeamAppsUiContext} from "./TeamAppsUiContext";
-import {UiTemplateTestContainerConfig} from "../generated/UiTemplateTestContainerConfig";
-import {TeamAppsUiComponentRegistry} from "./TeamAppsUiComponentRegistry";
-
-
-export class UiTemplateTestContainer extends UiComponent<UiTemplateTestContainerConfig> {
-
-	private $panel: JQuery;
-
-	constructor(config: UiTemplateTestContainerConfig, context: TeamAppsUiContext) {
-		super(config, context);
-		this.$panel = $(`<div class="UiTemplateTestContainer" id="' + config.id + '">
-	<div class="description">${config.description}</div>
-	<div class="template-wrapper" style="min-width: ${config.minContainerWidth ? config.minContainerWidth + "px" : "none"}; max-width: ${config.maxContainerWidth ? config.maxContainerWidth + "px" : "none"}; min-height: ${config.minContainerHeight ? config.minContainerHeight + "px" : "none"}; max-height: ${config.maxContainerHeight ? config.maxContainerHeight + "px" : "none"};">
-		${context.templateRegistry.createTemplateRenderer(config.template).render(config.data)}
-	</div>
-</div>`);
-	}
-
-
-	public getMainDomElement(): JQuery {
-		return this.$panel;
-	}
-
-	public destroy(): void {
-	}
-
-	protected onAttachedToDom(): void {
-	}
-
-}
-
-TeamAppsUiComponentRegistry.registerComponentClass("UiTemplateTestContainer", UiTemplateTestContainer);
diff --git a/teamapps-client/ts/modules/UiTestHarness.ts b/teamapps-client/ts/modules/UiTestHarness.ts
new file mode 100644
index 000000000..9419871f4
--- /dev/null
+++ b/teamapps-client/ts/modules/UiTestHarness.ts
@@ -0,0 +1,73 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+import {UiConfigurationConfig} from "../generated/UiConfigurationConfig";
+import {TemplateRegistry} from "./TemplateRegistry";
+import {UiComponentConfig} from "../generated/UiComponentConfig";
+import {TeamAppsUiContext} from "./TeamAppsUiContext";
+import {UiPictureChooser} from "./formfield/file/UiPictureChooser";
+import {UiFieldGroup} from "./formfield/UiFieldGroup";
+import {UiTextField} from "./formfield/UiTextField";
+import {UiButton} from "./formfield/UiButton";
+import {UiComponent} from "./UiComponent";
+
+
+export class UiTestHarness {
+
+	constructor() {
+		let context = new TestTeamAppsUiContext();
+
+		// let component = this.createRadioGroup();
+		// let component = this.createRadioGroup();
+		// let component = this.createUiPictureChooser();
+
+		let component = new UiFieldGroup({
+			id: "asdf",
+			fields: [
+				new UiTextField({stylesBySelector: {"": {flex: "1 1 auto"}}}, context),
+				new UiButton({template: null, templateRecord: null}, context)
+			]
+		}, context);
+
+		(window as any).c = component;
+		document.body.appendChild(component.getMainElement());
+	}
+
+	private createUiPictureChooser() {
+		let uiPictureChooser = new UiPictureChooser({
+			id: "asdf",
+			value: null,
+			uploadUrl: "/upload"
+		}, new TestTeamAppsUiContext());
+		uiPictureChooser.onValueChanged.addListener(eventObject => console.log("Value changed: " + eventObject.value));
+		return uiPictureChooser;
+	}
+}
+
+class TestTeamAppsUiContext implements TeamAppsUiContext {
+	readonly sessionId: string = "1234567890";
+	readonly isHighDensityScreen: boolean = false;
+	readonly executingCommand: boolean = false;
+	readonly config: UiConfigurationConfig = {};
+	readonly templateRegistry: TemplateRegistry = new TemplateRegistry(this);
+
+	getClientObjectById(id: string): UiComponent<UiComponentConfig> {
+		return null;
+	}
+}
diff --git a/teamapps-client/ts/modules/UiTimeGraph.ts b/teamapps-client/ts/modules/UiTimeGraph.ts
deleted file mode 100644
index bef4a190a..000000000
--- a/teamapps-client/ts/modules/UiTimeGraph.ts
+++ /dev/null
@@ -1,867 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-import * as $ from "jquery";
-import {UiComponent} from "./UiComponent";
-import {TeamAppsEvent} from "./util/TeamAppsEvent";
-import {TeamAppsUiContext} from "./TeamAppsUiContext";
-import {executeWhenAttached} from "./util/ExecuteWhenAttached";
-import {TeamAppsUiComponentRegistry} from "./TeamAppsUiComponentRegistry";
-import * as d3 from "d3";
-import {BaseType, NamespaceLocalObject} from "d3";
-import {Selection} from "d3-selection";
-import {ScaleContinuousNumeric, ScaleLinear, ScaleTime} from "d3-scale";
-import {UiScaleType} from "../generated/UiScaleType";
-import {bind} from "./util/Bind";
-import {ZoomBehavior, ZoomedElementBaseType} from "d3-zoom";
-import {Area, Line} from "d3-shape";
-import {Axis} from "d3-axis";
-import {Interval, IntervalManager} from "./util/IntervalManager";
-import {UiTimeGraphDataPointConfig} from "../generated/UiTimeGraphDataPointConfig";
-import {generateUUID} from "./Common";
-import {
-	UiTimeGraph_DataNeededEvent,
-	UiTimeGraph_IntervalSelectedEvent,
-	UiTimeGraph_ZoomedEvent,
-	UiTimeGraphCommandHandler,
-	UiTimeGraphConfig,
-	UiTimeGraphEventSource
-} from "../generated/UiTimeGraphConfig";
-import {createUiLongIntervalConfig, UiLongIntervalConfig} from "../generated/UiLongIntervalConfig";
-import {EventFactory} from "../generated/EventFactory";
-import {BrushBehavior} from "d3-brush";
-import {UiLineChartCurveType} from "../generated/UiLineChartCurveType";
-import {UiLineChartLineFormatConfig} from "../generated/UiLineChartLineFormatConfig";
-import {createUiColorCssString} from "./util/CssFormatUtil";
-import {debouncedMethod, DebounceMode} from "./util/debounce";
-import {UiLineChartYScaleZoomMode} from "../generated/UiLineChartYScaleZoomMode";
-import {UiLineChartMouseScrollZoomPanMode} from "../generated/UiLineChartMouseScrollZoomPanMode";
-import {UiTimeChartZoomLevelConfig} from "../generated/UiTimeChartZoomLevelConfig";
-
-type SVGGSelection<DATUM = {}> = Selection<SVGGElement, DATUM, HTMLElement, undefined>;
-
-interface DataPoint {
-	x: number,
-	y: number
-}
-
-function fakeZeroIfLogScale(y: number, scaleType: UiScaleType) {
-	if (scaleType === UiScaleType.LOG10 && y === 0) {
-		return UiTimeGraph.LOGSCALE_MIN_Y;
-	} else {
-		return y;
-	}
-}
-
-const yTickFormat = d3.format("-,.2s");
-
-export class UiTimeGraph extends UiComponent<UiTimeGraphConfig> implements UiTimeGraphCommandHandler, UiTimeGraphEventSource {
-
-	public readonly onDataNeeded: TeamAppsEvent<UiTimeGraph_DataNeededEvent> = new TeamAppsEvent<UiTimeGraph_DataNeededEvent>(this);
-	public readonly onIntervalSelected: TeamAppsEvent<UiTimeGraph_IntervalSelectedEvent> = new TeamAppsEvent<UiTimeGraph_IntervalSelectedEvent>(this);
-	public readonly onZoomed: TeamAppsEvent<UiTimeGraph_ZoomedEvent> = new TeamAppsEvent<UiTimeGraph_ZoomedEvent>(this);
-
-	public static readonly LOGSCALE_MIN_Y = 0.5;
-	public static readonly DROP_SHADOW_ID = "drop-shadow";
-
-	private mouseScrollZoomPanMode: UiLineChartMouseScrollZoomPanMode;
-	private intervalX: UiLongIntervalConfig;
-	private maxPixelsBetweenDataPoints: number;
-
-	private seriesById: { [id: string]: Series } = {};
-
-	private $main: JQuery;
-
-	private $svg: d3.Selection<SVGElement, {}, null, undefined>;
-	private $rootG: SVGGSelection;
-	private $dropShadowFilter: Selection<BaseType, {}, null, undefined>;
-	private $clipPath: d3.Selection<d3.BaseType, {}, null, undefined>;
-
-	private scaleX: ScaleTime<number, number>;
-
-	private dropShadowFilterId: string;
-
-	private margin = {top: 20, right: 15, bottom: 25};
-	private zoom: ZoomBehavior<ZoomedElementBaseType, any>;
-	private xAxis: Axis<Date | number | { valueOf(): number }>;
-	private $xAxis: SVGGSelection;
-	private $horizontalPanRect: d3.Selection<SVGRectElement, {}, HTMLElement, undefined>;
-	private zoomLevelIntervalManagers: IntervalManager[];
-	private brush: BrushBehavior<number>;
-	private $brush: SVGGSelection<number>;
-	private $graphClipContainer: Selection<SVGGElement, {}, HTMLElement, undefined>;
-	private xSelection: UiLongIntervalConfig;
-	private $yZeroLine: Selection<SVGLineElement, {}, HTMLElement, undefined>;
-	private zoomLevels: UiTimeChartZoomLevelConfig[];
-	private $yAxisContainer: Selection<SVGGElement, {}, HTMLElement, undefined>;
-
-	private lastDrawableWidth: number = 0;
-
-	private get drawableWidth() {
-		return this.getWidth() - this.marginLeft - this.margin.right
-	}
-
-	private get drawableHeight() {
-		return this.getHeight() - this.margin.top - this.margin.bottom
-	}
-
-	private get marginLeft() {
-		return this.getAllSeries().reduce((sum, s) => sum + s.getYScaleWidth(), 0);
-	}
-
-	constructor(config: UiTimeGraphConfig, context: TeamAppsUiContext) {
-		super(config, context);
-
-		this.zoomLevels = config.zoomLevels;
-		this.maxPixelsBetweenDataPoints = config.maxPixelsBetweenDataPoints;
-
-		this.$main = $('<div class="UiTimeGraph" id="' + this.getId() + '">');
-
-		this.scaleX = d3.scaleTime()
-			.range([0, this.drawableWidth]);
-
-		this.$svg = d3.select(this.$main[0])
-			.append<SVGElement>("svg");
-		this.$rootG = this.$svg
-			.append<SVGGElement>("g");
-
-		this.setIntervalX(config.intervalX);
-
-		this.$xAxis = this.$rootG.append<SVGGElement>("g")
-			.classed("x-axis", true);
-		this.$horizontalPanRect = this.$xAxis.append<SVGRectElement>("rect")
-			.classed("horizontal-pan-rect", true)
-			.attr("width", "100%")
-			.attr("height", 20);
-		let x = 0;
-		const panZoom = d3.zoom()
-			.scaleExtent([1, 1])
-			.on("zoom", () => {
-				const zoomTransform = d3.zoomTransform(this.$xAxis.node());
-				const zoomTransform2 = d3.zoomTransform(this.$graphClipContainer.node());
-				this.zoom.translateBy(this.$graphClipContainer, (zoomTransform.x - x) / zoomTransform2.k, 0);
-				x = zoomTransform.x;
-				this.redraw();
-			});
-		this.$xAxis.call(panZoom);
-		this.xAxis = d3.axisBottom(this.scaleX);
-
-		this.$yAxisContainer = this.$rootG.append<SVGGElement>("g")
-			.classed("y-axis-container", true);
-		this.dropShadowFilterId = `${UiTimeGraph.DROP_SHADOW_ID}-${this.getId()}`;
-		let $defs = this.$svg.append<SVGDefsElement>("defs")
-			.html(navigator.vendor.indexOf("Apple") === -1 ? `<filter id="${this.dropShadowFilterId}" y="-50">
-	        <feGaussianBlur in="SourceAlpha" stdDeviation="1.5" result="blur"></feGaussianBlur>
-	        <feComponentTransfer in="blur" result="fadedBlur">
-	            <feFuncA type="linear" slope="0.3"></feFuncA>
-	        </feComponentTransfer>
-	        <feOffset in="fadedBlur" dx="0.7" dy="1.5" result="offsetBlur"></feOffset>
-	        <feMerge>
-	            <feMergeNode in="offsetBlur"></feMergeNode>
-	            <feMergeNode in="SourceGraphic"></feMergeNode>
-	        </feMerge>
-	    </filter>` : '');
-		this.$dropShadowFilter = $defs.select(`#${this.dropShadowFilterId}`);
-		let clipPathId = this.getId() + "-clipping-path-" + generateUUID();
-		this.$clipPath = $defs.append("clipPath")
-			.attr("id", clipPathId)
-			.append("rect")
-			.attr("y", -50);
-
-		this.$graphClipContainer = this.$rootG.append<SVGGElement>("g")
-			.classed("graph-clipping-container", true)
-			.attr("clip-path", `url(#${clipPathId})`);
-
-		this.$yZeroLine = this.$graphClipContainer.append<SVGLineElement>("line")
-			.classed("y-zero-line", true);
-
-		this.zoom = d3.zoom()
-			.scaleExtent([1, this.calculateMaxZoomFactor()])
-			.on("zoom", () => {
-				this.redraw();
-				this.getAllSeries().forEach(s => s.handleXBoundsChange());
-				this.fireUiZoomEvent();
-			});
-		this.setMouseScrollZoomPanMode(config.mouseScrollZoomPanMode);
-
-		Object.keys(config.lineFormats).forEach(seriesId => {
-			let lineFormat = config.lineFormats[seriesId];
-			this.createAndAddSeries(seriesId, lineFormat);
-		});
-
-		this.initZoomLevelIntervalManagers();
-
-		this.brush = d3.brushX<number>()
-			.extent([[0, 0], [100, 100] /*provisional values!*/])
-			.on("end", this.handleBrushSelection);
-
-		this.$brush = this.$graphClipContainer.append<SVGGElement>("g")
-			.classed("brush", true) as SVGGSelection<number>;
-		this.$brush
-			.call(this.brush);
-
-		this.resetAllData(this.zoomLevels);
-	}
-
-	private createAndAddSeries(seriesId: string, lineFormat: UiLineChartLineFormatConfig) {
-		let series = new Series(this, seriesId, lineFormat, this.$graphClipContainer, this.zoomLevels.length, this.dropShadowFilterId);
-		series.scaleY.range([this.drawableHeight, 0]);
-		this.$yAxisContainer.node().appendChild(series.$yAxis.node());
-		this.seriesById[seriesId] = series;
-	}
-
-	getZoomBoundsX() {
-		let transformedScaleX = this.getTransformedScaleX();
-		return [+transformedScaleX.domain()[0], +transformedScaleX.domain()[1]];
-	}
-
-	getTransformedScaleX(): ScaleTime<number, number> {
-		let zoomTransform = d3.zoomTransform(this.$graphClipContainer.node());
-		return zoomTransform.rescaleX(this.scaleX as any);
-	}
-
-	private initZoomLevelIntervalManagers() {
-		this.zoomLevelIntervalManagers = [];
-		for (let i = 0; i < this.zoomLevels.length; i++) {
-			this.zoomLevelIntervalManagers[i] = new IntervalManager();
-		}
-	}
-
-	@executeWhenAttached()
-	private redraw() {
-		if (this.getWidth() === 0 || this.getHeight() === 0) {
-			return;
-		}
-		this.lastDrawableWidth = this.drawableWidth;
-
-		this.$rootG.attr("transform", `translate(${this.marginLeft},${this.margin.top})`);
-
-		let left = 0;
-		this.getAllSeries().forEach(s => {
-			s.$yAxis.attr("transform", `translate(${-left},0)`);
-			left += s.getYScaleWidth();
-		});
-
-		// TODO still needed? if yes, move to series!
-		// this.$yZeroLine
-		// 	.attr("x1", 0)
-		// 	.attr("y1", this.scaleY(0))
-		// 	.attr("x2", this.getWidth())
-		// 	.attr("y2", this.scaleY(0))
-		// 	.attr("visibility", this.scaleY.domain()[0] === 0 ? "hidden" : "visible");
-
-		let transformedScaleX = this.getTransformedScaleX();
-
-		this.$xAxis.call(this.xAxis.scale(transformedScaleX));
-
-		let domain = this.restrictDomainXToConfiguredInterval([+transformedScaleX.domain()[0], +transformedScaleX.domain()[1]]);
-
-		const zoomLevel = this.getCurrentZoomLevel();
-		// this.logger.debug("millisecondsPerPixel: " + millisecondsPerPixel + " zoomLevel: " + zoomLevel + " at scale: " + zoomTransform.k);
-
-		let uncoveredIntervals = this.zoomLevelIntervalManagers[zoomLevel].getUncoveredIntervals(new Interval(domain[0], domain[1]));
-		if (uncoveredIntervals.length > 0) {
-			for (let uncoveredInterval of uncoveredIntervals) {
-				if (uncoveredInterval.start >= uncoveredInterval.end) {
-					continue; // do not request empty intervals. may happen if the domainX is [0, 0]
-				}
-				this.logger.debug("firing onDataNeeded: " + uncoveredInterval);
-				if (uncoveredInterval.start == null || isNaN(uncoveredInterval.start) || uncoveredInterval.end == null || isNaN(uncoveredInterval.end)) {
-					this.logger.error("Uncovered interval is corrupt. Will not retrieve data!");
-				} else {
-					this.onDataNeeded.fire(EventFactory.createUiTimeGraph_DataNeededEvent(this.getId(), zoomLevel, createUiLongIntervalConfig(uncoveredInterval.start, uncoveredInterval.end)));
-					this.zoomLevelIntervalManagers[zoomLevel].addInterval(new Interval(uncoveredInterval.start, uncoveredInterval.end));
-				}
-			}
-		}
-
-		this.getAllSeries().forEach(series => {
-			series.draw();
-		});
-
-		if (this.xSelection) {
-			let brushX1 = Math.max(-10, transformedScaleX(this.xSelection.min));
-			let brushX2 = Math.min(this.drawableWidth + 10, transformedScaleX(this.xSelection.max));
-			if (brushX2 < 0 || brushX1 > this.drawableWidth) {
-				this.brush.move(this.$brush, null);
-			} else {
-				this.brush.move(this.$brush, [brushX1, brushX2]);
-			}
-		} else {
-			this.brush.move(this.$brush, null);
-		}
-	}
-
-	private restrictDomainXToConfiguredInterval(domain: [number, number]) {
-		return [Math.max(this.intervalX.min, +(domain[0])), Math.min(this.intervalX.max, +(domain[1]))];
-	}
-
-	getCurrentZoomLevel() {
-		let transformedScaleX = this.getTransformedScaleX();
-		let domain = this.restrictDomainXToConfiguredInterval([+transformedScaleX.domain()[0], +transformedScaleX.domain()[1]]);
-
-		const millisecondsPerPixel = (domain[1] - domain[0]) / this.drawableWidth;
-		let sortedZoomLevels = this.getSortedZoomLevels();
-		let zoomLevelToApply = sortedZoomLevels
-			.filter(indexedZoomLevel => {
-				let minMillisecondsPerPixels = indexedZoomLevel.zoomLevel.approximateMillisecondsPerDataPoint / this.maxPixelsBetweenDataPoints;
-				return minMillisecondsPerPixels <= millisecondsPerPixel;
-			})[0] || sortedZoomLevels[sortedZoomLevels.length - 1];
-		return zoomLevelToApply.index;
-	}
-
-	private getSortedZoomLevels() {
-		return this.zoomLevels
-			.map((zoomLevel, index) => {
-				return {index, zoomLevel}
-			})
-			.sort((z1, z2) => z2.zoomLevel.approximateMillisecondsPerDataPoint - z1.zoomLevel.approximateMillisecondsPerDataPoint);
-	}
-
-	@bind
-	private handleBrushSelection() {
-		let transformedScaleX = this.getTransformedScaleX();
-
-		if (d3.event.sourceEvent == null || d3.event.sourceEvent.type === "zoom") {
-			return;  // handle only user-triggered brush changes!
-		}
-		let brushSelection = d3.brushSelection(this.$brush.node());
-		if (brushSelection != null) {
-			this.xSelection = createUiLongIntervalConfig(+transformedScaleX.invert(brushSelection[0] as number), +transformedScaleX.invert(brushSelection[1] as number));
-			this.onIntervalSelected.fire(EventFactory.createUiTimeGraph_IntervalSelectedEvent(this.getId(), this.xSelection));
-		} else {
-			this.xSelection = null;
-			this.onIntervalSelected.fire(EventFactory.createUiTimeGraph_IntervalSelectedEvent(this.getId(), null));
-		}
-	}
-
-	public onResize(): void {
-		if (this.getWidth() === 0 && this.getHeight() === 0) {
-			return;
-		}
-
-		this.scaleX.range([0, this.drawableWidth]);
-
-		// adjust the translation value of the zoom transformation, so the displayed interval stays the same despite the resize!
-		if (this.lastDrawableWidth != null && this.lastDrawableWidth != this.drawableWidth) {
-			const zoomTransform = d3.zoomTransform(this.$graphClipContainer.node());
-			const newTranslateX = zoomTransform.x * this.drawableWidth / this.lastDrawableWidth;
-			if (!isNaN(newTranslateX)) {
-				this.zoom.transform(this.$graphClipContainer, d3.zoomIdentity.translate(newTranslateX, 0).scale(zoomTransform.k));
-			}
-		}
-
-		this.getAllSeries().forEach(s => s.scaleY.range([this.drawableHeight, 0]));
-		this.updateZoomExtents();
-
-		this.$xAxis.attr("transform", "translate(0," + this.drawableHeight + ")");
-
-		this.getAllSeries().forEach(s => s.updateYAxisTickFormat(this.getHeight()));
-
-		this.$dropShadowFilter.attr("width", this.drawableWidth)
-			.attr("height", this.getHeight() + 100);
-		this.$clipPath.attr("width", this.drawableWidth)
-			.attr("height", this.getHeight() + 100);
-
-		this.brush.extent([[0, -5], [this.drawableWidth, this.drawableHeight]]);
-		this.$brush.call(this.brush); // update size...
-
-		this.redraw();
-	}
-
-	private updateZoomExtents() {
-		if (this.zoom == null) { // not yet initialized
-			return;
-		}
-		this.zoom
-			.translateExtent([[0, -Infinity], [this.getWidth() /*zoom is attached to $svg, remember!*/, Infinity]])
-			.scaleExtent([1, this.calculateMaxZoomFactor()]);
-	}
-
-	private getAllSeries() {
-		return Object.keys(this.seriesById).map(id => this.seriesById[id]);
-	}
-
-	addData(zoomLevel: number, intervalX: UiLongIntervalConfig, data: { [seriesId: string]: UiTimeGraphDataPointConfig[] }): void {
-		this.zoomLevelIntervalManagers[zoomLevel].addInterval(new Interval(intervalX.min, intervalX.max));
-		Object.keys(data).forEach(seriesId => {
-			let seriesData = data[seriesId];
-			this.seriesById[seriesId] && this.seriesById[seriesId].addData(zoomLevel, intervalX, seriesData);
-		});
-		this.redraw();
-		this.getAllSeries().forEach(s => s.handleXBoundsChange())
-	}
-
-	resetAllData(newZoomLevels: UiTimeChartZoomLevelConfig[]): void {
-		this.zoomLevels = newZoomLevels;
-		this.initZoomLevelIntervalManagers();
-		this.getAllSeries().forEach(d => d.resetData(newZoomLevels.length));
-		this.redraw();
-	}
-
-	@debouncedMethod(500, DebounceMode.BOTH)
-	replaceAllData(newZoomLevels: UiTimeChartZoomLevelConfig[], zoomLevel: number, intervalX: UiLongIntervalConfig, data: { [seriesId: string]: UiTimeGraphDataPointConfig[] }): void {
-		this.zoomLevels = newZoomLevels;
-		this.initZoomLevelIntervalManagers();
-		this.getAllSeries().forEach(d => d.resetData(newZoomLevels.length));
-		this.addData(zoomLevel, intervalX, data);
-	}
-
-	setIntervalX(intervalX: UiLongIntervalConfig): void {
-		this.intervalX = intervalX;
-		this.reLayout(false);
-		this.updateZoomExtents();
-		this.scaleX.domain([this.intervalX.min, this.intervalX.max]);
-	}
-
-	setIntervalY(lineId: string, intervalY: UiLongIntervalConfig): void {
-		this.seriesById[lineId].setIntervalY(intervalY);
-	}
-
-	public setYScaleZoomMode(lineId: string, yScaleZoomMode: UiLineChartYScaleZoomMode): void {
-		this.seriesById[lineId].setYScaleZoomMode(yScaleZoomMode);
-	}
-
-	setMouseScrollZoomPanMode(mouseScrollZoomPanMode: UiLineChartMouseScrollZoomPanMode): void {
-		this.mouseScrollZoomPanMode = mouseScrollZoomPanMode;
-
-		this.$graphClipContainer.on('.zoom', null);
-		this.$graphClipContainer.call(this.zoom);
-
-		let originalZoomWeelHandler = this.$graphClipContainer.on("wheel.zoom");
-		let me = this;
-		this.$graphClipContainer.on("wheel.zoom", function () {
-			if (me.mouseScrollZoomPanMode === UiLineChartMouseScrollZoomPanMode.DISABLED) {
-				return;
-			} else if (me.mouseScrollZoomPanMode === UiLineChartMouseScrollZoomPanMode.WITH_MODIFIER_KEY && !(<MouseEvent>d3.event).ctrlKey && !(<MouseEvent>d3.event).altKey && !(<MouseEvent>d3.event).shiftKey && !(<MouseEvent>d3.event).metaKey) {
-				return;
-			}
-			originalZoomWeelHandler.apply(this, arguments);
-			me.zoom.translateBy(me.$graphClipContainer, -1 * d3.event.deltaX / d3.zoomTransform(me.$graphClipContainer.node()).k / 2, 0);
-			d3.event.preventDefault(); // prevent MacOS' swipe pages back and forward
-		});
-	}
-
-	@debouncedMethod(500, DebounceMode.LATER)
-	private fireUiZoomEvent() {
-		let transformedScaleX = this.getTransformedScaleX();
-		let domain = transformedScaleX.domain();
-		let currentZoomLevel = this.getCurrentZoomLevel();
-		this.onZoomed.fire(EventFactory.createUiTimeGraph_ZoomedEvent(this.getId(), createUiLongIntervalConfig(+domain[0], +domain[1]), currentZoomLevel));
-	}
-
-	@executeWhenAttached()
-	setYScaleType(lineId: string, yScaleType: UiScaleType): void {
-		this.seriesById[lineId].setYScaleType(yScaleType);
-		this.reLayout(true);
-	}
-
-	setSelectedInterval(intervalX: UiLongIntervalConfig): void {
-		this.xSelection = intervalX;
-		this.redraw();
-	}
-
-	setMaxPixelsBetweenDataPoints(maxPixelsBetweenDataPoints: number): void {
-		this.maxPixelsBetweenDataPoints = maxPixelsBetweenDataPoints;
-		this.updateZoomExtents();
-		this.redraw();
-	}
-
-	destroy(): void {
-		// nothing to do!
-	}
-
-	getMainDomElement(): JQuery {
-		return this.$main;
-	}
-
-	private calculateMaxZoomFactor(): number {
-		if (this.getWidth() === 0 || this.getHeight() === 0) {
-			return 1;
-		}
-
-		let displayedMilliseconds = this.intervalX.max - this.intervalX.min;
-		let sortedZoomLevels = this.getSortedZoomLevels();
-		let highestZoomLevelApproximateMillisPerDataPoint = sortedZoomLevels[sortedZoomLevels.length - 1].zoomLevel.approximateMillisecondsPerDataPoint;
-
-		return this.maxPixelsBetweenDataPoints * displayedMilliseconds / (this.drawableWidth * highestZoomLevelApproximateMillisPerDataPoint);
-	}
-
-	setLineFormats(lineFormats: { [lineId: string]: UiLineChartLineFormatConfig }): void {
-		Object.keys(lineFormats).forEach(lineId => {
-			let lineFormat = lineFormats[lineId];
-			let existingSeries = this.seriesById[lineId];
-			if (existingSeries) {
-				existingSeries.setLineFormat(lineFormat);
-			} else {
-				this.createAndAddSeries(lineId, lineFormat);
-			}
-		});
-		Object.keys(this.seriesById).forEach(lineId => {
-			if (!lineFormats[lineId]) {
-				this.seriesById[lineId].destroy();
-				delete this.seriesById[lineId];
-			}
-		});
-		this.reLayout(true);
-	}
-
-
-}
-
-var CurveTypeToCurveFactory = {
-	[UiLineChartCurveType.LINEAR]: d3.curveLinear,
-	[UiLineChartCurveType.STEP]: d3.curveStep,
-	[UiLineChartCurveType.STEPBEFORE]: d3.curveStepBefore,
-	[UiLineChartCurveType.STEPAFTER]: d3.curveStepAfter,
-	[UiLineChartCurveType.BASIS]: d3.curveBasis,
-	[UiLineChartCurveType.CARDINAL]: d3.curveCardinal,
-	[UiLineChartCurveType.MONOTONE]: d3.curveMonotoneX,
-	[UiLineChartCurveType.CATMULLROM]: d3.curveCatmullRom,
-};
-
-class Series {
-	private zoomLevelData: UiTimeGraphDataPointConfig[][] = [];
-	private line: Line<DataPoint>;
-	private $line: Selection<SVGPathElement, {}, HTMLElement, undefined>;
-	private area: Area<DataPoint>;
-	private $area: Selection<SVGPathElement, {}, HTMLElement, undefined>;
-	private $dots: d3.Selection<SVGGElement, {}, HTMLElement, undefined>;
-	private $defs: Selection<SVGDefsElement, {}, HTMLElement, undefined>;
-	private colorScale: ScaleLinear<string, string>;
-	private $main: Selection<SVGGElement, {}, HTMLElement, undefined>;
-	private numberOfZoomLevels: number;
-
-	public $yAxis: SVGGSelection;
-	private yAxis: Axis<number | { valueOf(): number }>;
-
-	private intervalY: UiLongIntervalConfig;
-	private yScaleType: UiScaleType;
-	scaleY: ScaleContinuousNumeric<number, number>;
-	private yScaleZoomMode: any;
-
-	constructor(
-		private timeGraph: UiTimeGraph,
-		private id: string,
-		private lineFormat: UiLineChartLineFormatConfig,
-		$container: SVGGSelection,
-		numberOfZoomLevels: number,
-		private dropShadowFilterId: string,
-	) {
-		this.intervalY = lineFormat.intervalY;
-		this.yScaleType = lineFormat.yScaleType;
-		this.yScaleZoomMode = lineFormat.yScaleZoomMode;
-		this.$yAxis = d3.select(document.createElementNS((d3.namespace("svg:text") as NamespaceLocalObject).space, "g") as SVGGElement);
-		this.$yAxis.style("color", createUiColorCssString(this.lineFormat.yAxisColor));
-		this.updateYScaleType();
-		this.yAxis = d3.axisLeft(this.scaleY);
-
-		this.resetData(numberOfZoomLevels);
-		this.$main = $container
-			.append<SVGGElement>("g")
-			.attr("data-series-id", `${this.timeGraph.getId()}-${id}`);
-		this.initDomNodes();
-	}
-
-	updateYScaleType(): ScaleContinuousNumeric<number, number> {
-		if (this.yScaleType === UiScaleType.LOG10) {
-			this.scaleY = d3.scaleLog();
-		} else {
-			this.scaleY = d3.scaleLinear();
-		}
-		let domainMin = fakeZeroIfLogScale(this.intervalY.min, this.yScaleType);
-		this.scaleY.domain([domainMin, this.intervalY.max]);
-		return this.scaleY;
-	}
-
-	private initDomNodes() {
-		this.area = d3.area<DataPoint>()
-			.curve(CurveTypeToCurveFactory[this.lineFormat.graphType]);
-		this.$area = this.$main.append<SVGPathElement>("path")
-			.classed("area", true)
-			.attr("fill", `url(#area-gradient-${this.timeGraph.getId()}-${this.id})`);
-		this.line = d3.line<DataPoint>()
-			.curve(CurveTypeToCurveFactory[this.lineFormat.graphType]);
-		this.$line = this.$main.append<SVGPathElement>("path")
-			.classed("line", true)
-			.attr("stroke", `url(#line-gradient-${this.timeGraph.getId()}-${this.id})`);
-		// .style("filter", `url("#${this.dropShadowFilterId}")`);
-		this.$dots = this.$main.append<SVGGElement>("g")
-			.classed("dots", true);
-
-		this.colorScale = d3.scaleLinear<string, string>()
-			.range([createUiColorCssString(this.lineFormat.lineColorScaleMin), createUiColorCssString(this.lineFormat.lineColorScaleMax)]);
-		this.$defs = this.$main.append<SVGDefsElement>("defs")
-			.html(`<linearGradient class="line-gradient" id="line-gradient-${this.timeGraph.getId()}-${this.id}" x1="0" x2="0" y1="0" y2="100" gradientUnits="userSpaceOnUse">
-	        <stop stop-color="${createUiColorCssString(this.lineFormat.lineColorScaleMax)}" offset="0" />
-	        <stop stop-color="${createUiColorCssString(this.lineFormat.lineColorScaleMin)}" offset="1" />
-	    </linearGradient>
-	    <linearGradient class="area-gradient" id="area-gradient-${this.timeGraph.getId()}-${this.id}" x1="0" x2="0" y1="0" y2="100" gradientUnits="userSpaceOnUse">
-	        <stop stop-color="${createUiColorCssString(this.lineFormat.areaColorScaleMax)}" offset="0" />
-	        <stop stop-color="${createUiColorCssString(this.lineFormat.areaColorScaleMin)}" offset="1" />
-	    </linearGradient>`);
-	}
-
-	public resetData(numberOfZoomLevels: number): any {
-		this.numberOfZoomLevels = numberOfZoomLevels;
-		this.zoomLevelData = [];
-		for (let i = 0; i < this.numberOfZoomLevels; i++) {
-			this.zoomLevelData[i] = [];
-		}
-	}
-
-	public getDisplayedData(zoomLevel: number, xStart: number, xEnd: number, scale: UiScaleType): DataPoint[] {
-		let i = 0;
-		for (; i < this.zoomLevelData[zoomLevel].length; i++) {
-			if (this.zoomLevelData[zoomLevel][i].x > xStart) {
-				break;
-			}
-		}
-		let startIndex = i === 0 ? 0 : i - 1;
-		for (; i < this.zoomLevelData[zoomLevel].length; i++) {
-			if (this.zoomLevelData[zoomLevel][i].x >= xEnd) {
-				break;
-			}
-		}
-		let endIndex = i === this.zoomLevelData[zoomLevel].length ? i : i + 1;
-
-
-		let data = this.zoomLevelData[zoomLevel].slice(startIndex, endIndex);
-		// if (data.length > 200) {
-		// 	data.forEach(d => (d as any).date = new Date(d.x).toString());
-		// 	console.log(`zoomLevel: ${zoomLevel}; interval: ${new Date(xStart).toString()}-${new Date(xEnd).toString()}; layer: ${this.zoomLevelData[zoomLevel].length}; returned: ${data.length}`, data);
-		// }
-		return data;
-	}
-
-	public getDisplayedDataYBounds(): [number, number] {
-		let minY = Number.MAX_VALUE;
-		let maxY = Number.MIN_VALUE;
-		const zoomBoundsX = this.timeGraph.getZoomBoundsX();
-		let displayedData = this.getDisplayedData(this.timeGraph.getCurrentZoomLevel(), zoomBoundsX[0], zoomBoundsX[1], this.yScaleType);
-		displayedData.forEach(d => {
-			if (d.y < minY) {
-				minY = d.y;
-			}
-			if (d.y > maxY) {
-				maxY = d.y;
-			}
-		});
-		if (minY === Number.MAX_VALUE && maxY === Number.MIN_VALUE) {
-			minY = 0;
-			maxY = 1;
-		}
-		return [minY, maxY];
-	}
-
-	public addData(zoomLevel: number, intervalX: UiLongIntervalConfig, data: UiTimeGraphDataPointConfig[]) {
-
-		let zoomLevelData = this.zoomLevelData[zoomLevel];
-		let minOverlappingIndex:number = null;
-		let maxOverlappingIndex:number = null;
-		for (let i = 0; i < zoomLevelData.length; i++) {
-			if (zoomLevelData[i].x >= intervalX.min && zoomLevelData[i].x <= intervalX.max) {
-				if (minOverlappingIndex == null) {
-					minOverlappingIndex = i;
-				}
-				maxOverlappingIndex = i;
-			}
-		}
-
-		if (minOverlappingIndex != null && maxOverlappingIndex != null)  {
-			zoomLevelData.splice(minOverlappingIndex, maxOverlappingIndex - minOverlappingIndex + 1, ...data);
-		} else {
-			this.zoomLevelData[zoomLevel] = zoomLevelData.concat(data);
-		}
-		this.zoomLevelData[zoomLevel].sort((a, b) => a.x - b.x);
-	}
-
-	public draw() {
-		this.colorScale.domain(this.scaleY.domain());
-		this.$defs.select(".line-gradient").attr("y2", this.scaleY.range()[0]);
-		this.$defs.select(".area-gradient").attr("y2", this.scaleY.range()[0]);
-
-		let data = this.getDisplayedData(this.timeGraph.getCurrentZoomLevel(), this.timeGraph.getZoomBoundsX()[0], this.timeGraph.getZoomBoundsX()[1], this.yScaleType);
-		const scaleX = this.timeGraph.getTransformedScaleX();
-		this.line
-			.x(d => scaleX(d.x))
-			.y(d => this.scaleY(fakeZeroIfLogScale(d.y, this.yScaleType)));
-		this.$line.attr("d", this.line(data));
-
-		if (this.lineFormat.areaColorScaleMin != null && this.lineFormat.areaColorScaleMin.alpha > 0
-			|| this.lineFormat.areaColorScaleMax != null && this.lineFormat.areaColorScaleMax.alpha > 0) { // do not render transparent area!
-			this.area
-				.x(d => scaleX(d.x))
-				.y0(this.scaleY.range()[0])
-				.y1(d => this.scaleY(fakeZeroIfLogScale(d.y, this.yScaleType)));
-			this.$area.attr("d", this.area(data));
-		}
-
-		let $dotsDataSelection = this.$dots.selectAll<SVGCircleElement, UiTimeGraphDataPointConfig>(".dot")
-			.data(this.lineFormat.dataDotRadius > 0 ? data : [])
-			// .attr("fill", d => this.colorScale(d.y))
-			.attr("cx", d => scaleX(d.x))
-			.attr("cy", d => this.scaleY(fakeZeroIfLogScale(d.y, this.yScaleType)));
-		$dotsDataSelection
-			.enter().append("circle") // Uses the enter().append() method
-			.attr("class", "dot") // Assign a class for styling
-			// .attr("fill", d => this.colorScale(d.y))
-			.attr("cx", d => scaleX(d.x))
-			.attr("cy", d => this.scaleY(fakeZeroIfLogScale(d.y, this.yScaleType)))
-			.attr("r", this.lineFormat.dataDotRadius);
-		$dotsDataSelection.exit().remove();
-
-
-		this.$yAxis.call(this.yAxis);
-		let $ticks = this.$yAxis.node().querySelectorAll('.tick');
-		for (let i = 0; i < $ticks.length; i++) {
-			let $text: SVGTextElement = $ticks[i].querySelector("text");
-			let querySelector: any = $ticks[i].querySelector('line');
-			if ($text.innerHTML === '') {
-				querySelector.setAttribute("visibility", 'hidden');
-			} else {
-				querySelector.setAttribute("visibility", 'visible');
-			}
-		}
-	}
-
-	setLineFormat(lineFormat: UiLineChartLineFormatConfig) {
-		this.lineFormat = lineFormat;
-		this.$main.html("");
-		this.initDomNodes();
-	}
-
-	handleXBoundsChange() {
-		if (this.isDynamicYScaleZooming()) {
-			this.animatedZoomYScale();
-		}
-	}
-
-	private animatedZoomYScale() {
-		let minY: number, maxY: number;
-		if (this.yScaleZoomMode === UiLineChartYScaleZoomMode.DYNAMIC) {
-			let displayedDataYBounds = this.getDisplayedDataYBounds();
-			let delta = displayedDataYBounds[1] - displayedDataYBounds[0];
-			minY = displayedDataYBounds[0] - delta * .05;
-			maxY = displayedDataYBounds[1] + delta * .05;
-		} else if (this.yScaleZoomMode === UiLineChartYScaleZoomMode.DYNAMIC_INCLUDING_ZERO) {
-			[minY, maxY] = this.getDisplayedDataYBounds();
-			if (minY > 0) {
-				minY = 0;
-			}
-			if (maxY < 0) {
-				maxY = 0;
-			}
-		} else {
-			minY = this.intervalY.min;
-			maxY = this.intervalY.max;
-		}
-		minY = fakeZeroIfLogScale(minY, this.yScaleType);
-
-		if (Math.abs(this.scaleY.domain()[0]) > 1e15 || Math.abs(this.scaleY.domain()[1]) > 1e15) { // see https://github.com/d3/d3-interpolate/pull/63
-			this.scaleY.domain([0, 1])
-		}
-
-		d3.transition(`${this.timeGraph.getId()}-${this.id}-zoomYToDisplayedDomain`)
-			.ease(d3.easeLinear)
-			.duration(300)
-			.tween(`${this.timeGraph.getId()}-${this.id}-zoomYToDisplayedDomain`, () => {
-				// create interpolator and do not show nasty floating numbers
-				let intervalInterpolator = d3.interpolateArray(this.scaleY.domain().map(date => +date), [minY, maxY]);
-				return (t: number) => {
-					this.scaleY.domain(intervalInterpolator(t));
-					this.draw();
-				}
-			});
-	}
-
-	setIntervalY(intervalY: UiLongIntervalConfig) {
-		this.intervalY = intervalY;
-		this.handleXBoundsChange()
-	}
-
-	public getYScaleWidth(): number {
-		return (this.intervalY.max > 10000 || this.intervalY.min < 10) ? 37
-			: (this.intervalY.max > 100) ? 30
-				: 25;
-	}
-
-	setYScaleZoomMode(yScaleZoomMode: UiLineChartYScaleZoomMode) {
-		this.yScaleZoomMode = yScaleZoomMode;
-		this.animatedZoomYScale();
-	}
-
-	private isDynamicYScaleZooming() {
-		return this.yScaleZoomMode === UiLineChartYScaleZoomMode.DYNAMIC || this.yScaleZoomMode === UiLineChartYScaleZoomMode.DYNAMIC_INCLUDING_ZERO;
-	}
-
-	setYScaleType(yScaleType: UiScaleType) {
-		if (yScaleType === UiScaleType.LOG10) {
-			this.scaleY = d3.scaleLog();
-		} else {
-			this.scaleY = d3.scaleLinear();
-		}
-		let domainMin = fakeZeroIfLogScale(this.intervalY.min, this.yScaleType);
-		this.scaleY.domain([domainMin, this.intervalY.max]);
-	}
-
-	public updateYAxisTickFormat(availableHeight: number) {
-		let minY = this.scaleY.domain()[0];
-		let maxY = this.scaleY.domain()[1];
-		let delta = maxY - minY;
-		let numberOfYTickGroups = Math.log10(delta) + 1;
-		let heightPerYTickGroup = availableHeight / numberOfYTickGroups;
-		if (this.yScaleType === UiScaleType.LOG10) {
-			this.yAxis.tickFormat((value: number, i: number) => {
-				if (value < 1) {
-					return "";
-				} else {
-					if (heightPerYTickGroup >= 150) {
-						return yTickFormat(value);
-					} else if (heightPerYTickGroup >= 80) {
-						let firstDigitOfValue = Number(("" + value)[0]);
-						return firstDigitOfValue <= 5 ? yTickFormat(value) : "";
-					} else if (heightPerYTickGroup >= 30) {
-						let firstDigitOfValue = Number(("" + value)[0]);
-						return firstDigitOfValue === 1 || firstDigitOfValue === 5 ? yTickFormat(value) : "";
-					} else {
-						let firstDigitOfValue = Number(("" + value)[0]);
-						return firstDigitOfValue === 1 ? yTickFormat(value) : "";
-					}
-				}
-			});
-		} else {
-			this.yAxis.tickFormat((domainValue: number) => {
-				if (delta < 2) {
-					return d3.format("-,.4r")(domainValue)
-				} else {
-					return yTickFormat(domainValue)
-				}
-			})
-				.ticks(availableHeight / 20);
-		}
-	}
-
-	public destroy() {
-		this.$main.remove();
-		this.$yAxis.remove();
-	}
-}
-
-TeamAppsUiComponentRegistry.registerComponentClass("UiTimeGraph", UiTimeGraph);
diff --git a/teamapps-client/ts/modules/UiTree.ts b/teamapps-client/ts/modules/UiTree.ts
index 8b95f7823..2b6f06a16 100644
--- a/teamapps-client/ts/modules/UiTree.ts
+++ b/teamapps-client/ts/modules/UiTree.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,84 +17,96 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-import * as $ from "jquery";
-import {UiComboBox} from "./formfield/UiComboBox";
 
-import {UiTree_NodeSelectedEvent, UiTree_RequestTreeDataEvent, UiTree_TextInputEvent, UiTreeCommandHandler, UiTreeConfig, UiTreeEventSource} from "../generated/UiTreeConfig";
+import {
+	UiTree_NodeExpansionChangedEvent,
+	UiTree_NodeSelectedEvent,
+	UiTree_RequestTreeDataEvent,
+	UiTree_TextInputEvent,
+	UiTreeCommandHandler,
+	UiTreeConfig,
+	UiTreeEventSource
+} from "../generated/UiTreeConfig";
 import {TeamAppsEvent} from "./util/TeamAppsEvent";
-import {defaultTreeQueryFunctionFactory, ResultCallback, trivialMatch, TrivialTree} from "trivial-components";
-import {UiComponent} from "./UiComponent";
-import {buildObjectTree, buildTreeEntryHierarchy, matchingModesMapping, NodeWithChildren, Renderer} from "./Common";
+import {TrivialTree} from "./trivial-components/TrivialTree";
+import {AbstractUiComponent} from "./AbstractUiComponent";
+import {buildObjectTree, NodeWithChildren, parseHtml, Renderer} from "./Common";
 import {TeamAppsUiContext} from "./TeamAppsUiContext";
-import {EventFactory} from "../generated/EventFactory";
 import {TeamAppsUiComponentRegistry} from "./TeamAppsUiComponentRegistry";
 import {UiTreeRecordConfig} from "../generated/UiTreeRecordConfig";
 import {UiComboBoxTreeRecordConfig} from "../generated/UiComboBoxTreeRecordConfig";
 import {UiTemplateConfig} from "../generated/UiTemplateConfig";
+import {loadSensitiveThrottling} from "./util/throttle";
+import {UiInfiniteItemView2_ContextMenuRequestedEvent} from "../generated/UiInfiniteItemView2Config";
+import {ContextMenu} from "./micro-components/ContextMenu";
+import {UiComponent} from "./UiComponent";
 
 
-export class UiTree extends UiComponent<UiTreeConfig> implements UiTreeCommandHandler, UiTreeEventSource {
+export class UiTree extends AbstractUiComponent<UiTreeConfig> implements UiTreeCommandHandler, UiTreeEventSource {
 
-	public readonly onTextInput: TeamAppsEvent<UiTree_TextInputEvent> = new TeamAppsEvent(this, 250);
-	public readonly onNodeSelected: TeamAppsEvent<UiTree_NodeSelectedEvent> = new TeamAppsEvent(this);
-	public readonly onRequestTreeData: TeamAppsEvent<UiTree_RequestTreeDataEvent> = new TeamAppsEvent(this);
+	public readonly onTextInput: TeamAppsEvent<UiTree_TextInputEvent> = new TeamAppsEvent({throttlingMode: "debounce", delay: 500});
+	public readonly onNodeSelected: TeamAppsEvent<UiTree_NodeSelectedEvent> = new TeamAppsEvent();
+	public readonly onRequestTreeData: TeamAppsEvent<UiTree_RequestTreeDataEvent> = new TeamAppsEvent();
+	public readonly onNodeExpansionChanged: TeamAppsEvent<UiTree_NodeExpansionChangedEvent> = new TeamAppsEvent();
+	public readonly onContextMenuRequested: TeamAppsEvent<UiInfiniteItemView2_ContextMenuRequestedEvent> = new TeamAppsEvent();
 
-	private $panel: JQuery;
+	private $panel: HTMLElement;
 	private trivialTree: TrivialTree<UiTreeRecordConfig>;
-	private lastResultCallback: (result: NodeWithChildren<UiTreeRecordConfig>[]) => void;
 	private nodes: UiTreeRecordConfig[];
 	private templateRenderers: { [name: string]: Renderer };
-
+	private contextMenu: ContextMenu;
 
 	constructor(config: UiTreeConfig, context: TeamAppsUiContext) {
 		super(config, context);
-		this.$panel = $('<div class="UiTree" data-teamapps-id="${config.id}">');
-		const $input = $('<input autocomplete="off">').appendTo(this.$panel);
+		this.$panel = parseHtml('<div class="UiTree">');
 
 		this.templateRenderers = context.templateRegistry.createTemplateRenderers(config.templates);
 
 		this.nodes = config.initialData;
 
-		let localQueryFunction: Function;
-		let queryFunction = (queryString: string, resultCallback: ResultCallback<NodeWithChildren<UiTreeRecordConfig>>) => {
-			this.lastResultCallback = resultCallback;
-			this.onTextInput.fire(EventFactory.createUiTree_TextInputEvent(this.getId(), queryString));
-			if (localQueryFunction != null) {
-				localQueryFunction(queryString, resultCallback);
-			}
-		};
-
-		this.trivialTree = new TrivialTree<UiTreeRecordConfig>($input, {
+		this.trivialTree = new TrivialTree<UiTreeRecordConfig>({
 			entries: buildObjectTree(config.initialData, "id", "parentId"),
 			selectedEntryId: config.selectedNodeId,
 			childrenProperty: "__children",
 			expandedProperty: "expanded",
 			entryRenderingFunction: entry => this.renderRecord(entry),
-			searchBarMode: 'show-if-filled',
 			lazyChildrenFlag: 'lazyChildren',
-			lazyChildrenQueryFunction: (node, resultCallback) => {
-				this.onRequestTreeData.fire(EventFactory.createUiTree_RequestTreeDataEvent(config.id, node && node.id))
+			lazyChildrenQueryFunction: async (node) => {
+				this.onRequestTreeData.fire({
+					parentNodeId: node && node.id
+				});
+				return []; // TODO this will not show a spinner...
 			},
 			spinnerTemplate: `<div class="UiSpinner" style="height: 20px; width: 20px; margin: 4px auto 4px auto;"></div>`,
-			queryFunction: queryFunction,
 			showExpanders: config.showExpanders,
-			expandOnSelection: config.openOnSelection,
+			selectableDecider: entry => entry.selectable,
+			toggleExpansionOnClick: config.openOnSelection,
 			enforceSingleExpandedPath: config.enforceSingleExpandedPath,
-			inputValueFunction: entry => entry && entry.id,
 			idFunction: entry => entry && entry.id,
 			indentation: config.indentation,
-			animationDuration: config.animate ? 70 : 0,
-			matchingOptions: {
-				matchingMode: matchingModesMapping[config.textMatchingMode]
-			}
+			animationDuration: config.animate ? 120 : 0,
+			directSelectionViaArrowKeys: true
 		});
 		this.trivialTree.onSelectedEntryChanged.addListener((entry) => {
-			this.onNodeSelected.fire(EventFactory.createUiTree_NodeSelectedEvent(config.id, entry.id));
+			this.onNodeSelected.fire({
+				nodeId: entry.id
+			});
 		});
+		this.trivialTree.onNodeExpansionStateChanged.addListener(({node, expanded}) => this.onNodeExpansionChanged.fire({nodeId: node.id, expanded}))
+		this.$panel.appendChild(this.trivialTree.getMainDomElement());
 
 		if (config.selectedNodeId != null) {
 			this.trivialTree.getTreeBox().revealSelectedEntry(false);
 		}
+		this.contextMenu = new ContextMenu();
+		this.trivialTree.onContextMenu.addListener(contextMenuEvent => {
+			if (this._config.contextMenuEnabled) {
+				this.contextMenu.open(contextMenuEvent.event, requestId => this.onContextMenuRequested.fire({
+					recordId: (contextMenuEvent.entry as UiTreeRecordConfig).id,
+					requestId
+				}));
+			}
+		})
 	}
 
 	private renderRecord(record: NodeWithChildren<UiComboBoxTreeRecordConfig>): string {
@@ -106,10 +118,11 @@ export class UiTree extends UiComponent<UiTreeConfig> implements UiTreeCommandHa
 		}
 	}
 
-	public getMainDomElement(): JQuery {
+	public doGetMainElement(): HTMLElement {
 		return this.$panel;
 	}
 
+	@loadSensitiveThrottling(100, 10, 3000)
 	replaceData(nodes: UiTreeRecordConfig[]): void {
 		this.nodes = nodes;
 		this.trivialTree.updateEntries(buildObjectTree(nodes, "id", "parentId"));
@@ -119,7 +132,7 @@ export class UiTree extends UiComponent<UiTreeConfig> implements UiTreeCommandHa
 		this.nodes = this.nodes.filter(node => nodesToBeRemoved.indexOf(node.id) === -1);
 		this.nodes.push(...nodesToBeAdded);
 		nodesToBeRemoved.forEach(nodeId => this.trivialTree.removeNode(nodeId));
-		nodesToBeAdded.forEach(node => this.trivialTree.addOrUpdateNode(node.parentId, node));
+		nodesToBeAdded.forEach(node => this.trivialTree.addOrUpdateNode(node.parentId, node, false));
 	}
 
 	public setSelectedNode(recordId: number | null): void {
@@ -130,9 +143,14 @@ export class UiTree extends UiComponent<UiTreeConfig> implements UiTreeCommandHa
 		this.templateRenderers[id] = this._context.templateRegistry.createTemplateRenderer(template);
 	}
 
-	public destroy(): void {
-		// nothing to do
+	setContextMenuContent(requestId: number, component: UiComponent): void {
+		this.contextMenu.setContent(component, requestId);
 	}
+
+	closeContextMenu(requestId: number): void {
+		this.contextMenu.close(requestId);
+	}
+
 }
 
 TeamAppsUiComponentRegistry.registerComponentClass("UiTree", UiTree);
diff --git a/teamapps-client/ts/modules/UiTreeGraph.ts b/teamapps-client/ts/modules/UiTreeGraph.ts
new file mode 100644
index 000000000..19b238b61
--- /dev/null
+++ b/teamapps-client/ts/modules/UiTreeGraph.ts
@@ -0,0 +1,1214 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+
+import * as d3 from "d3";
+import {BaseType, HierarchyNode, HierarchyPointLink, HierarchyPointNode, Selection, ZoomBehavior} from "d3";
+import {AbstractUiComponent} from "./AbstractUiComponent";
+import {
+	UiTreeGraph_NodeClickedEvent,
+	UiTreeGraph_NodeExpandedOrCollapsedEvent,
+	UiTreeGraph_ParentExpandedOrCollapsedEvent,
+	UiTreeGraph_SideListExpandedOrCollapsedEvent,
+	UiTreeGraphCommandHandler,
+	UiTreeGraphConfig,
+	UiTreeGraphEventSource
+} from "../generated/UiTreeGraphConfig";
+import {TeamAppsEvent} from "./util/TeamAppsEvent";
+import {UiTreeGraphNodeConfig} from "../generated/UiTreeGraphNodeConfig";
+import {TeamAppsUiContext} from "./TeamAppsUiContext";
+import {TeamAppsUiComponentRegistry} from "./TeamAppsUiComponentRegistry";
+import {UiTreeGraphNodeImage_CornerShape} from "../generated/UiTreeGraphNodeImageConfig";
+import {parseHtml} from "./Common";
+import {flextree, FlexTreeLayout} from "d3-flextree";
+import {executeWhenFirstDisplayed} from "./util/ExecuteWhenFirstDisplayed";
+
+export class UiTreeGraph extends AbstractUiComponent<UiTreeGraphConfig> implements UiTreeGraphCommandHandler, UiTreeGraphEventSource {
+
+	public readonly onNodeClicked: TeamAppsEvent<UiTreeGraph_NodeClickedEvent> = new TeamAppsEvent();
+	public readonly onNodeExpandedOrCollapsed: TeamAppsEvent<UiTreeGraph_NodeExpandedOrCollapsedEvent> = new TeamAppsEvent();
+	public readonly onParentExpandedOrCollapsed: TeamAppsEvent<UiTreeGraph_ParentExpandedOrCollapsedEvent> = new TeamAppsEvent();
+	public readonly onSideListExpandedOrCollapsed: TeamAppsEvent<UiTreeGraph_SideListExpandedOrCollapsedEvent> = new TeamAppsEvent();
+
+	private chart: TreeChart;
+	private $main: HTMLElement;
+
+	constructor(config: UiTreeGraphConfig, context: TeamAppsUiContext) {
+		super(config, context);
+
+		this.$main = parseHtml(`<div class="UiTreeGraph">`);
+		this.chart = new TreeChart(context)
+			.container(this.$main);
+		this.update(config);
+		this.moveToRootNode();
+		(window as any).moveToRootNode = () => this.moveToRootNode();
+	}
+
+	public update(config: UiTreeGraphConfig) {
+		this.chart
+			.backgroundColor(config.backgroundColor)
+			.initialZoom(config.zoomFactor)
+			.data(config.nodes)
+			.compact(config.compact)
+			.verticalLayerGap(config.verticalLayerGap)
+			.horizontalSiblingGap(config.horizontalSiblingGap)
+			.horizontalNonSignlingGap(config.horizontalNonSignlingGap)
+			.sideListIndent(config.sideListIndent)
+			.sideListVerticalGap(config.sideListVerticalGap)
+			.onNodeClick((nodeId: string) => {
+				this.onNodeClicked.fire({nodeId: nodeId});
+			})
+			.onNodeExpandedOrCollapsed((nodeId: string, expanded: boolean, lazyLoad: boolean) => {
+				this.onNodeExpandedOrCollapsed.fire({nodeId, expanded, lazyLoad});
+			})
+			.onParentExpandedOrCollapsed((nodeId: string, expanded: boolean, lazyLoad: boolean) => {
+				this.onParentExpandedOrCollapsed.fire({nodeId, expanded, lazyLoad});
+			})
+			.onSideListExpandedOrCollapsed((nodeId: string, expanded: boolean) => {
+				this.onSideListExpandedOrCollapsed.fire({nodeId, expanded});
+			});
+		this.chart.render();
+	}
+
+	@executeWhenFirstDisplayed(true)
+	public moveToRootNode() {
+		this.onResize();
+		this.chart.moveToRootNode(400);
+	}
+
+	@executeWhenFirstDisplayed(true)
+	public moveToNode(nodeId: string) {
+		this.onResize();
+		this.chart.moveToNode(nodeId);
+	}
+
+	setNodes(nodes: UiTreeGraphNodeConfig[]): void {
+		this.chart.data(nodes)
+			.render();
+	}
+
+	addNode(node: UiTreeGraphNodeConfig): void {
+		this.chart.data().push(node);
+		this.chart.render();
+	}
+
+	removeNode(nodeId: string): void {
+		this.chart.data(this.chart.data().filter(n => n.id !== nodeId));
+		this.chart.render();
+	}
+
+	setNodeExpanded(nodeId: string, expanded: boolean): void {
+		this.chart.data().filter(n => n.id === nodeId)[0].expanded = expanded;
+		this.chart.render();
+	}
+
+	updateNode(node: UiTreeGraphNodeConfig): void {
+		let index = this.chart.data().findIndex(n => n.id === node.id);
+		if (index !== -1) {
+			this.chart.data()[index] = node;
+		} else {
+			this.chart.data().push(node);
+		}
+		this.chart.render();
+	}
+
+	setZoomFactor(zoomFactor: number): void {
+		this.chart.setZoomFactor(zoomFactor);
+	}
+
+	doGetMainElement(): HTMLElement {
+		return this.$main;
+	}
+
+	onResize(): void {
+		this.chart
+			.svgWidth(this.getWidth())
+			.svgHeight(this.getHeight())
+			.render();
+	}
+
+}
+
+TeamAppsUiComponentRegistry.registerComponentClass("UiTreeGraph", UiTreeGraph);
+
+interface TreeChart {
+	getChartState: () => TreeChartAttributes;
+
+	svgWidth(): number;
+
+	svgWidth(svgWidth: number): TreeChart;
+
+	svgHeight(): number;
+
+	svgHeight(marginTop: number): TreeChart;
+
+	marginTop(): number;
+
+	marginTop(marginTop: number): TreeChart;
+
+	marginBottom(): number;
+
+	marginBottom(marginBottom: number): TreeChart;
+
+	marginRight(): number;
+
+	marginRight(marginRight: number): TreeChart;
+
+	marginLeft(): number;
+
+	marginLeft(marginLeft: number): TreeChart;
+
+	container(): string | HTMLElement;
+
+	container(container: string | HTMLElement): TreeChart;
+
+	defaultTextFill(): string;
+
+	defaultTextFill(defaultTextFill: string): TreeChart;
+
+	nodeTextFill(): string;
+
+	nodeTextFill(nodeTextFill: string): TreeChart;
+
+	defaultFont(): string;
+
+	defaultFont(defaultFont: string): TreeChart;
+
+	backgroundColor(): string;
+
+	backgroundColor(backgroundColor: string): TreeChart;
+
+	data(): UiTreeGraphNodeConfig[];
+
+	data(data: UiTreeGraphNodeConfig[]): TreeChart;
+
+	depth(): number;
+
+	depth(depth: number): TreeChart;
+
+	duration(): number;
+
+	duration(duration: number): TreeChart;
+
+	strokeWidth(): number;
+
+	strokeWidth(strokeWidth: number): TreeChart;
+
+	initialZoom(): number;
+
+	initialZoom(initialZoom: number): TreeChart;
+
+	compact(compact: boolean): this;
+
+	verticalLayerGap(): number,
+
+	verticalLayerGap(verticalLayerGap: number): this,
+
+	horizontalSiblingGap(): number,
+
+	horizontalSiblingGap(horizontalSiblingGap: number): this,
+
+	horizontalNonSignlingGap(): number,
+
+	horizontalNonSignlingGap(horizontalNonSignlingGap: number): this,
+
+	sideListIndent(): number,
+
+	sideListIndent(sideListIndent: number): this,
+
+	sideListVerticalGap(): number,
+
+	sideListVerticalGap(sideListVerticalGap: number): this,
+
+	onNodeClick(): (nodeId: string) => void;
+
+	onNodeClick(onNodeClick: (nodeId: string) => void): TreeChart;
+
+	onNodeExpandedOrCollapsed(): (nodeId: string, expanded: boolean, lazyLoad: boolean) => void;
+
+	onNodeExpandedOrCollapsed(onNodeExpandedOrCollapsed: (nodeId: string, expanded: boolean, lazyLoad: boolean) => void): TreeChart;
+
+	onParentExpandedOrCollapsed(): (nodeId: string, expanded: boolean, lazyLoad: boolean) => void;
+
+	onParentExpandedOrCollapsed(onParentExpandedOrCollapsed: (nodeId: string, expanded: boolean, lazyLoad: boolean) => void): TreeChart;
+
+	onSideListExpandedOrCollapsed(): (nodeId: string, expanded: boolean) => void;
+
+	onSideListExpandedOrCollapsed(onSideListExpandedOrCollapsed: (nodeId: string, expanded: boolean) => void): TreeChart;
+
+}
+
+interface TreeNode extends HierarchyPointNode<UiTreeGraphNodeConfig> {
+	hasChildren?: boolean,
+	sideListNodes: TreeNodeLike[]
+}
+
+interface TreeNodeLike {
+	data: UiTreeGraphNodeConfig,
+	id?: string,
+	hasChildren?: boolean,
+	parent?: TreeNode | null,
+	x: number,
+	y: number
+}
+
+export interface Layouts {
+	treemap: FlexTreeLayout<UiTreeGraphNodeConfig>
+}
+
+export interface TreeChartAttributes {
+	[key: string]: any,
+
+	id: string,
+	data?: UiTreeGraphNodeConfig[],
+	root: TreeNode,
+	svg: Selection<SVGElement, any, any, any>,
+	svgWidth?: number,
+	svgHeight?: number,
+	marginTop?: number,
+	marginBottom?: number,
+	marginRight?: number,
+	marginLeft?: number,
+	container?: any,
+	defaultTextFill?: string,
+	defaultFont?: string,
+	backgroundColor: string,
+	duration: number,
+	strokeWidth: number,
+	dropShadowId: string,
+	initialZoom: number,
+	onNodeClick?: (name: string) => void,
+	onNodeExpandedOrCollapsed?: (nodeId: string, expanded: boolean, lazyLoad: boolean) => void,
+	onParentExpandedOrCollapsed?: (nodeId: string, expanded: boolean, lazyLoad: boolean) => void,
+	onSideListExpandedOrCollapsed?: (nodeId: string, expanded: boolean) => void,
+	verticalLayerGap: number,
+	horizontalSiblingGap: number,
+	horizontalNonSignlingGap: number,
+	sideListIndent: number,
+	sideListVerticalGap: number,
+	defs: Selection<BaseType, unknown, SVGElement, void>,
+	compact: boolean,
+}
+
+export interface PatternifyParameter {
+	selector: string,
+	tag: string,
+	data?: any
+}
+
+class TreeChart {
+	private chart: Selection<SVGGElement, void, SVGElement, void>;
+	private zoomBehavior: ZoomBehavior<SVGElement, void>;
+
+	constructor(private context: TeamAppsUiContext) {
+		// Exposed variables
+		const attrs: TreeChartAttributes = {
+			id: `ID${Math.floor(Math.random() * 1000000)}`, // Id for event handlings
+			svgWidth: 800,
+			svgHeight: 600,
+			marginTop: 0,
+			marginBottom: 0,
+			marginRight: 0,
+			marginLeft: 0,
+			container: 'body',
+			defaultTextFill: '#2C3E50',
+			nodeTextFill: 'white',
+			defaultFont: 'Helvetica',
+			backgroundColor: 'transparent',
+			data: null,
+			duration: 400,
+			strokeWidth: 3,
+			dropShadowId: null,
+			initialZoom: 1,
+			verticalLayerGap: 36,
+			horizontalSiblingGap: 20,
+			horizontalNonSignlingGap: 36,
+			sideListIndent: 20,
+			sideListVerticalGap: 20,
+			compact: false,
+			onNodeClick: (): void => {
+			},
+			onNodeExpandedOrCollapsed: () => {
+			},
+			onParentExpandedOrCollapsed: () => {
+			},
+			onSideListExpandedOrCollapsed: () => {
+			}
+		} as any;
+
+		this.getChartState = () => attrs;
+
+		// Dynamically set getter and setter functions for Chart class
+		Object.keys(attrs).forEach((key) => {
+			//@ts-ignore
+			this[key] = function (_) {
+				if (!arguments.length) {
+					return attrs[key];
+				}
+				attrs[key] = _;
+				return this;
+			};
+		});
+	}
+
+	// This method can be invoked via chart.setZoomFactor API, it zooms to particulat scale
+	setZoomFactor(zoomLevel: number) {
+		const attrs = this.getChartState();
+
+		// Store passed zoom level
+		attrs.initialZoom = zoomLevel;
+	}
+
+	render() {
+		//InnerFunctions which will update visuals
+		const attrs = this.getChartState();
+
+		//Drawing containers
+		const container: Selection<Element, void, null, void> = d3.select(attrs.container);
+		const containerRect = container.node().getBoundingClientRect();
+		if (containerRect.width > 0) attrs.svgWidth = containerRect.width;
+		if (containerRect.height > 0) attrs.svgHeight = containerRect.height;
+
+		//Attach drop shadow id to attrs object
+		this.setDropShadowId(attrs);
+
+		//Calculated properties
+		const calc: any = {
+			id: null,
+			chartTopMargin: null,
+			chartLeftMargin: null,
+			chartWidth: null,
+			chartHeight: null
+		};
+		calc.id = `ID${Math.floor(Math.random() * 1000000)}`; // id for event handlings
+		calc.chartLeftMargin = attrs.marginLeft;
+		calc.chartTopMargin = attrs.marginTop;
+		calc.chartWidth = attrs.svgWidth - attrs.marginRight - calc.chartLeftMargin;
+		calc.chartHeight = attrs.svgHeight - attrs.marginBottom - calc.chartTopMargin;
+		attrs.calc = calc;
+
+		// Get maximum node width and height
+		calc.nodeMaxWidth = d3.max(attrs.data, (d) => d.width);
+
+		// Calculate max node depth (it's needed for layout heights calculation)
+		calc.centerX = calc.chartWidth / 2;
+
+		// ******************* BEHAVIORS . **********************
+		this.zoomBehavior = d3.zoom<SVGElement, void>().on("zoom", () => this.zoomed());
+
+		// *************************  DRAWING **************************
+		//Add svg
+
+		const svg = patternify<SVGElement, void, Element, void>(container, {
+			tag: 'svg',
+			selector: 'svg-chart-container'
+		})
+			.attr('width', attrs.svgWidth)
+			.attr('height', attrs.svgHeight)
+			.attr('font-family', attrs.defaultFont)
+			.call(this.zoomBehavior)
+			.style('background-color', attrs.backgroundColor);
+		attrs.svg = svg;
+
+		//Add container g element
+		this.chart = patternify<SVGGElement, void, SVGElement, void>(svg, {
+			tag: 'g',
+			selector: 'chart'
+		});
+		// .attr('transform', `translate(${calc.chartLeftMargin},${calc.chartTopMargin}) scale(${d3.zoomTransform(svg.node()).k})`);
+
+		attrs.chart = this.chart;
+
+		// ************************** ROUNDED AND SHADOW IMAGE  WORK USING SVG FILTERS **********************
+
+		//Adding defs element for rounded image
+		attrs.defs = patternify(svg, {
+			tag: 'defs',
+			selector: 'image-defs'
+		});
+
+		// Adding defs element for image's shadow
+		const filterDefs = patternify(svg, {
+			tag: 'defs',
+			selector: 'filter-defs'
+		});
+
+		// Adding shadow element - (play with svg filter here - https://bit.ly/2HwnfyL)
+		const filter = patternify(filterDefs, {
+			tag: 'filter',
+			selector: 'shadow-filter-element'
+		})
+			.attr('id', attrs.dropShadowId)
+			.attr('y', `${-50}%`)
+			.attr('x', `${-50}%`)
+			.attr('height', `${200}%`)
+			.attr('width', `${200}%`);
+
+		// Add gaussian blur element for shadows - we can control shadow length with this
+		patternify(filter, {
+			tag: 'feGaussianBlur',
+			selector: 'feGaussianBlur-element'
+		})
+			.attr('in', 'SourceAlpha')
+			.attr('stdDeviation', 3.1)
+			.attr('result', 'blur');
+
+		// Add fe-offset element for shadows -  we can control shadow positions with it
+		patternify(filter, {
+			tag: 'feOffset',
+			selector: 'feOffset-element'
+		})
+			.attr('in', 'blur')
+			.attr('result', 'offsetBlur')
+			.attr("dx", 4.28)
+			.attr("dy", 4.48)
+			.attr("x", 8)
+			.attr("y", 8);
+
+		// Add fe-flood element for shadows - we can control shadow color and opacity with this element
+		patternify(filter, {
+			tag: 'feFlood',
+			selector: 'feFlood-element'
+		})
+			.attr("in", "offsetBlur")
+			.attr("flood-color", 'black')
+			.attr("flood-opacity", 0.3)
+			.attr("result", "offsetColor");
+
+		// Add feComposite element for shadows
+		patternify(filter, {
+			tag: 'feComposite',
+			selector: 'feComposite-element'
+		})
+			.attr("in", "offsetColor")
+			.attr("in2", "offsetBlur")
+			.attr("operator", "in")
+			.attr("result", "offsetBlur");
+
+		// Add feMerge element for shadows
+		const feMerge = patternify(filter, {
+			tag: 'feMerge',
+			selector: 'feMerge-element'
+		});
+
+		// Add feMergeNode element for shadows
+		patternify(feMerge, {
+			tag: 'feMergeNode',
+			selector: 'feMergeNode-blur'
+		})
+			.attr('in', 'offsetBlur');
+
+		// Add another feMergeNode element for shadows
+		patternify(feMerge, {
+			tag: 'feMergeNode',
+			selector: 'feMergeNode-graphic'
+		})
+			.attr('in', 'SourceGraphic');
+
+		// Display tree contenrs
+		this.update();
+
+
+		//#########################################  UTIL FUNCS ##################################
+		// This function restyles foreign object elements ()
+
+
+		d3.select(window).on(`resize.${attrs.id}`, () => {
+			const containerRect = container.node().getBoundingClientRect();
+			//  if (containerRect.width > 0) attrs.svgWidth = containerRect.width;
+			//	main();
+		});
+
+
+		return this;
+	}
+
+	// This function sets drop shadow ID to the passed object
+	setDropShadowId(d: { id: string, dropShadowId: string }) {
+
+		// If it's already set, then return
+		if (d.dropShadowId) return;
+
+		// Generate drop shadow ID
+		let id = `${d.id}-drop-shadow`;
+
+		// If DOM object is available, then use UID method to generated shadow id
+		//@ts-ignore
+		if (typeof DOM != 'undefined') {
+			//@ts-ignore
+			id = DOM.uid(d.id).id;
+		}
+
+		// Extend passed object with drop shadow ID
+		Object.assign(d, {
+			dropShadowId: id
+		})
+	}
+
+
+	// This function basically redraws visible graph, based on nodes state
+	update() {
+		const attrs = this.getChartState();
+
+		let visibleNodeRecords = this.getVisibleNodeRecords(attrs.data);
+		let visibleNodeRecordsInOrder = attrs.data.filter(r => visibleNodeRecords[r.id] != null);
+
+		// Store new root by converting flat data to hierarchy
+		let hierarchy = d3.stratify<UiTreeGraphNodeConfig>()
+			.id((d: UiTreeGraphNodeConfig) => d.id)
+			.parentId((d: UiTreeGraphNodeConfig) => visibleNodeRecords[d.parentId] != null ? d.parentId : null)
+			(visibleNodeRecordsInOrder) as TreeNode;
+		attrs.root = hierarchy;
+
+		let recordsByParentId = getById(attrs.data.filter(r => r.id !== attrs.root.id), n => n.parentId);
+		attrs.root.eachBefore(n => {
+			n.hasChildren = recordsByParentId[n.id] != null || (n.data as any).hasLazyChildren;
+		});
+
+		let layerHeightByDepth: number[];
+		if (!attrs.compact) {
+			layerHeightByDepth = hierarchy.descendants().reduce((heightsByDepth: number[], d: TreeNode) => {
+				let nodeHeight = this.calculateNodeSize(d).height;
+				if (heightsByDepth[d.depth] == null || heightsByDepth[d.depth] < nodeHeight) {
+					heightsByDepth[d.depth] = nodeHeight;
+				}
+				return heightsByDepth;
+			}, []);
+		}
+
+		//  Assigns the x and y position for the nodes
+		// Generate tree layout function
+		let treeLayout = flextree<UiTreeGraphNodeConfig>()
+			.nodeSize(node => {
+				let width = node.data.width;
+				if (node.data.sideListExpanded && node.data.sideListNodes && node.data.sideListNodes.length > 0) {
+					let sideListOverlapping = attrs.sideListIndent + this.calculateSideListSize(node).width - (1/5) * width;
+					width = width + Math.max(0, sideListOverlapping * 2);
+				}
+				return [width, attrs.compact ? this.calculateNodeSize(node).height : layerHeightByDepth[node.depth]];
+			})
+			.spacing((node1, node2) => {
+				// Calculates only the horizontal spacing! The layout algorithm only honors the node's height for vertical spacing!
+				if (node1.depth !== node2.depth || node1.path(node2).length > 3) {
+					return attrs.horizontalNonSignlingGap;
+				} else { // siblings
+					return attrs.horizontalSiblingGap;
+				}
+			});
+		const treeData = treeLayout(attrs.root);
+
+		treeData.each((d: TreeNode) => {
+			if (d.data.sideListNodes != null && d.data.sideListNodes.length > 0 && d.data.sideListExpanded) {
+				let currentY = 0;
+				d.sideListNodes = d.data.sideListNodes.map(r => {
+					const treeNodeLike = {
+						data: r,
+						id: r.id,
+						x: attrs.sideListIndent,
+						y: currentY + attrs.sideListVerticalGap
+					};
+					currentY += r.height + attrs.sideListVerticalGap;
+					return treeNodeLike;
+				});
+			}
+		});
+
+		// Get tree nodes and links and attach some properties
+		const nodes = treeData.descendants() as TreeNode[];
+
+		// ------------------- FILTERS ---------------------
+
+		this.drawLinks(this.chart, attrs.root.links());
+		const nodesSelection = this.drawNodes(this.chart, () => nodes);
+
+		let sideListG = nodesSelection.selectAll<SVGGElement, any>(':scope > g.side-list-g')
+			.data(d => [d])
+			.join(enter => enter
+				.append('g')
+				.classed('side-list-g', true)
+			)
+			.attr('transform', d => `translate(${d.data.width * 4 / 5},${d.data.height})`);
+		const sideListLinkSelection = sideListG.selectAll(':scope > .side-list-line')
+			.data((d: TreeNode) => {
+				return (d.data.sideListExpanded && d.sideListNodes) || [];
+			})
+			.join(
+				enter => enter
+					.insert('path', "path")
+					.attr("class", "side-list-line")
+					.attr('d', d => this.hookLine({x: 0, y: 0}, {x: 0, y: 0})),
+				update => update,
+				exit => exit.transition()
+					.duration(attrs.duration)
+					.attr('d', d => this.hookLine({x: 0, y: 0}, {x: 0, y: 0}))
+					.remove()
+			)
+			.attr("fill", "none")
+			.attr("stroke-width", d => d.data.connectorLineWidth || 2)
+			.attr('stroke', d => d.data.connectorLineColor ? d.data.connectorLineColor : 'white')
+			.attr('stroke-dasharray', d => d.data.dashArray ? d.data.dashArray : '')
+			.transition()
+			.duration(attrs.duration)
+			.attr('d', (d, i, groups) => {
+				return this.hookLine({x: 0, y: 0}, {x: d.x, y: d.y + d.data.height / 2})
+			});
+		this.drawNodes(sideListG, (d: TreeNode) => d.sideListNodes || []);
+
+		this.drawExpanderButton(
+			nodesSelection,
+			'node-button-g',
+			(d: TreeNodeLike) => d.hasChildren,
+			d => ({x: d.data.width / 2, y: d.data.height}),
+			(d: TreeNodeLike) => d.data.expanded,
+			(d: TreeNode) => {
+				d.data.expanded = !d.data.expanded;
+				attrs.onNodeExpandedOrCollapsed(d.data.id, d.data.expanded, d.data.expanded && d.data.hasLazyChildren && attrs.data.filter(c => c.parentId === d.id).length == 0);
+				this.update();
+			}
+		);
+
+		this.drawExpanderButton(
+			nodesSelection,
+			'node-side-list-expander-g',
+			(d: TreeNodeLike) => d.data.sideListNodes && d.data.sideListNodes.length > 0,
+			(d: TreeNodeLike) => ({x: d.data.width * 4 / 5, y: d.data.height}),
+			(d: TreeNodeLike) => d.data.sideListExpanded,
+			(d: TreeNode) => {
+				d.data.sideListExpanded = !d.data.sideListExpanded;
+				attrs.onSideListExpandedOrCollapsed(d.data.id, d.data.sideListExpanded);
+				this.update();
+			}
+		);
+
+		this.drawExpanderButton(
+			nodesSelection,
+			'lazy-parent-expander-g',
+			(d: TreeNodeLike) => {
+				return d.data.parentExpandable;
+			},
+			(d: TreeNodeLike) => ({x: d.data.width / 2, y: 0}),
+			(d: TreeNodeLike) => d.parent != null,
+			(d: TreeNode) => {
+				d.data.parentExpanded = !d.data.parentExpanded;
+				attrs.onParentExpandedOrCollapsed(d.data.id, d.data.parentExpanded, attrs.data.filter(c => c.id === d.data.parentId).length == 0);
+				this.update();
+			}
+		);
+	}
+
+	drawExpanderButton(
+		parentSelection: Selection<SVGElement, TreeNodeLike, any, any>,
+		cssClassName: string,
+		visible: (d: TreeNodeLike) => boolean,
+		position: (d: TreeNodeLike) => { x: number; y: any },
+		expanded: (d: TreeNodeLike) => boolean,
+		onMouseDown: (d: TreeNode) => void
+	) {
+		const attrs = this.getChartState();
+// Add Node button circle's group (expand-collapse button)
+		const childrenExpanderButtonG = parentSelection.selectAll(':scope > g.' + cssClassName)
+			.data(d => visible(d) ? [d] : [])
+			.join(enter => enter
+				.append("g")
+				.classed(cssClassName, true)
+				.on('mousedown', onMouseDown)
+			)
+			.attr('transform', d => {
+				let pos = position(d);
+				return `translate(${pos.x},${pos.y})`;
+			});
+
+		// Add expand collapse button circle
+		childrenExpanderButtonG.selectAll(':scope > circle.node-button-circle')
+			.data(d => [d])
+			.join(enter => enter
+				.append("circle")
+				.classed("node-button-circle", true)
+			)
+			.attr('r', 10)
+			.attr('stroke-width', d => d.data.borderWidth || attrs.strokeWidth)
+			.attr('fill', "white")
+			.attr('stroke', d => d.data.borderColor);
+
+// Add button text
+		childrenExpanderButtonG.selectAll(':scope > text.node-button-text')
+			.data(d => [d])
+			.join(enter => enter
+				.append("text")
+				.classed("node-button-text", true)
+			)
+			.attr('text-anchor', 'middle')
+			.attr('alignment-baseline', 'middle')
+			.attr('fill', attrs.defaultTextFill)
+			.attr('font-size', d => expanded(d) ? 30 : 20)
+			.text(d => expanded(d) ? '-' : '+')
+			.attr('y', this.isEdge() ? 10 : 0);
+
+		return childrenExpanderButtonG;
+	}
+
+	calculateNodeSize(d: HierarchyNode<UiTreeGraphNodeConfig>) {
+		let attrs = this.getChartState();
+		let nodeWidth = d.data.width;
+		let nodeHeight = d.data.height;
+		if (d.data.sideListNodes != null && d.data.sideListNodes.length > 0 && d.data.sideListExpanded) {
+			let sideListSize = this.calculateSideListSize(d);
+			nodeWidth = nodeWidth * (4 / 5) + sideListSize.width;
+			nodeHeight += sideListSize.height;
+		}
+		nodeHeight += attrs.verticalLayerGap;
+		return {width: nodeWidth, height: nodeHeight};
+	}
+
+	calculateSideListSize(d: HierarchyNode<UiTreeGraphNodeConfig>) {
+		return d.data.sideListNodes.reduce((size, node) => {
+			size.width = Math.max(size.width, node.width);
+			size.height += node.height + this.getChartState().sideListVerticalGap;
+			return size;
+		}, {width: 0, height: 0});
+	}
+
+	private drawNodes(parentSelection: Selection<SVGElement, any, any, any>, dataFunction: (d: any) => TreeNodeLike[]) {
+		const attrs = this.getChartState();
+
+		// Add patterns for each node (it's needed for rounded image implementation)
+		let allNormalNodes = attrs.root.descendants();
+		let allSideListNodes = attrs.root.descendants().flatMap(n => n.sideListNodes || []);
+		const patternsSelection = attrs.defs.selectAll('.pattern')
+			.data([...allNormalNodes, ...allSideListNodes].filter(n => n.data.image != null), (d: TreeNode) => d.id)
+			.join(enter => enter.append('pattern'))
+			.attr('class', 'pattern')
+			.attr('height', 1)
+			.attr('width', 1)
+			.attr('id', d => d.id);
+
+
+		// Add images to patterns
+		const patternImages = patternify(patternsSelection, {
+			tag: 'image',
+			selector: 'pattern-image',
+			data: (d: TreeNode) => [d].filter(d => d.data.image != null)
+		})
+			.attr('x', 0)
+			.attr('y', 0)
+			.attr('height', (d: TreeNode) => d.data.image.width)
+			.attr('width', (d: TreeNode) => d.data.image.height)
+			.attr('xlink:href', (d: TreeNode) => d.data.image && d.data.image.url)
+			.attr('viewbox', (d: TreeNode) => `0 0 ${d.data.image.width * 2} ${d.data.image.height}`)
+			.attr('preserveAspectRatio', 'xMidYMin slice');
+
+		// Remove patterns exit selection after animation
+		patternsSelection.exit().transition().duration(attrs.duration).remove();
+
+		// --------------------------  NODES ----------------------
+		// Get nodes selection
+		const nodesSelection = parentSelection.selectAll<SVGGElement, TreeNodeLike>(':scope > .node')
+			.data(dataFunction, d => (d as any).id)
+			.join(
+				enter => enter
+					.append('g')
+					.attr('class', 'node')
+					.attr("transform", d => {
+						let transitionOrigin = this.getParentExpanderPosition(d);
+						return `translate(${transitionOrigin.x - d.data.width / 2},${transitionOrigin.y})`;
+					})
+					.on('click', d => {
+						if (d3.event.srcElement.classList.contains('node-button-circle')) {
+							return;
+						}
+						attrs.onNodeClick(d.data.id);
+					}),
+				update => update,
+				exit => exit.attr('opacity', 1)
+					.transition()
+					.duration(attrs.duration)
+					.attr("transform", (d: TreeNode) => {
+						let transitionTarget = this.getParentExpanderPosition(d);
+						return `translate(${transitionTarget.x - d.data.width / 2},${transitionTarget.y})`;
+					})
+					.on('end', function () {
+						d3.select(this).remove();
+					})
+					.attr('opacity', 0)
+					.remove()
+			);
+
+		nodesSelection.transition()
+			.attr('opacity', 0)
+			.duration(attrs.duration)
+			.attr("transform", d => {
+				return `translate(${d.x},${d.y})`;
+			})
+			.attr('opacity', 1);
+
+
+		// Style node rectangles
+		nodesSelection.selectAll(':scope > .node-rect')
+			.data(d => [d])
+			.join(enter => enter
+				.append('rect')
+				.classed("node-rect", true)
+			)
+			.attr('width', d => d.data.width)
+			.attr('height', d => d.data.height)
+			.attr('x', 0)
+			.attr('y', 0)
+			.attr('rx', d => d.data.borderRadius || 0)
+			.attr('stroke-width', d => d.data.borderWidth)
+			.attr('stroke', d => d.data.borderColor)
+			.style("fill", d => d.data.backgroundColor);
+
+		// Add node icon image inside node
+		nodesSelection.selectAll(':scope > image.node-icon-image')
+			.data(d => d.data.icon ? [d] : [])
+			.join(enter => enter
+				.append('image')
+				.classed('node-icon-image', true)
+			)
+			.attr('width', d => d.data.icon.size)
+			.attr('height', d => d.data.icon.size)
+			.attr("xlink:href", d => d.data.icon.icon)
+			.attr('x', d => -d.data.icon.size / 2)
+			.attr('y', d => -d.data.icon.size / 2);
+
+		// Defined node images wrapper group
+		const imageGroups = nodesSelection.selectAll(':scope > g.node-image-group')
+			.data(d => [d].filter(d => d.data.image != null))
+			.join(enter => enter
+				.append("g")
+				.classed("node-image-group", true)
+			)
+			.attr('transform', (d: TreeNode) => {
+				let x = -d.data.image.width / 2;
+				let y = -d.data.image.height / 2;
+				return `translate(${x},${y})`
+			});
+
+		imageGroups.selectAll(':scope > rect.node-image-rect')
+			.data(d => [d].filter(d => d.data.image != null))
+			.join(enter => enter
+				.append("rect")
+				.classed("node-image-rect", true)
+			)
+			.attr('fill', d => `url('#${d.id}')`)
+			.attr('width', d => d.data.image.width)
+			.attr('height', d => d.data.image.height)
+			.attr('stroke', d => d.data.image.borderColor)
+			.attr('stroke-width', d => d.data.image.borderWidth)
+			.attr('rx', d => d.data.image.cornerShape == UiTreeGraphNodeImage_CornerShape.CIRCLE ? Math.max(d.data.image.width, d.data.image.height)
+				: d.data.image.cornerShape == UiTreeGraphNodeImage_CornerShape.ROUNDED ? Math.min(d.data.image.width, d.data.image.height) / 10
+					: 0)
+			.attr('y', d => d.data.image.centerTopDistance)
+			.attr('x', d => d.data.image.centerLeftDistance)
+			.attr('filter', d => d.data.image.shadow ? `url('#${attrs.dropShadowId}')` : 'none');
+
+		// Add foreignObject element inside rectangle
+		const fo = nodesSelection.selectAll(':scope > foreignObject.node-foreign-object')
+			.data(d => [d])
+			.join(enter => enter
+				.append("foreignObject")
+				.classed("node-foreign-object", true)
+			);
+
+		fo.selectAll(':scope > .node-foreign-object-div')
+			.data(d => [d])
+			.join(enter => enter
+				.append("xhtml:div")
+				.classed("node-foreign-object-div", true)
+			);
+
+		this.restyleForeignObjectElements();
+		return nodesSelection;
+	}
+
+	private getParentExpanderPosition(d: TreeNodeLike) {
+		if (d.parent == null) {
+			return {x: d.data.width / 2, y: 0};
+		}
+		return {x: d.parent.x + d.parent.data.width / 2, y: d.parent.y + d.parent.data.height};
+	}
+
+	private drawLinks(parentSelection: Selection<SVGElement, any, any, any>, links: HierarchyPointLink<UiTreeGraphNodeConfig>[]) {
+		const attrs = this.getChartState();
+		// --------------------------  LINKS ----------------------
+		// Get links selection
+		const linkSelection = parentSelection.selectAll(':scope > path.link')
+			.data(links, (d: HierarchyPointLink<UiTreeGraphNodeConfig>) => d.target.id)
+			.join(
+				enter => enter
+					.insert('path', "g")
+					.attr("class", "link")
+					.attr('d', (d: HierarchyPointLink<UiTreeGraphNodeConfig>) => {
+						let transitionOrigin = this.getParentExpanderPosition(d.target as TreeNode);
+						return this.diagonalLine(transitionOrigin, transitionOrigin);
+					}),
+				update => update,
+				exit => exit.transition()
+					.duration(attrs.duration)
+					.attr('d', (d: HierarchyPointLink<UiTreeGraphNodeConfig>) => {
+						let transitionOrigin = this.getParentExpanderPosition(d.target as TreeNode);
+						return this.diagonalLine(transitionOrigin, transitionOrigin);
+					})
+					.remove()
+			)
+			.attr("fill", "none")
+			.attr("stroke-width", d => d.target.data.connectorLineWidth || 2)
+			.attr('stroke', d => d.target.data.connectorLineColor ? d.target.data.connectorLineColor : 'white')
+			.attr('stroke-dasharray', d => d.target.data.dashArray ? d.target.data.dashArray : '')
+			.transition()
+			.duration(attrs.duration)
+			.attr('d', d => this.diagonalLine({x: d.source.x + d.source.data.width / 2, y: d.source.y + d.source.data.height}, {x: d.target.x + d.target.data.width / 2, y: d.target.y}));
+	}
+
+	private isEdge() {
+		return window.navigator.userAgent.includes("Edge");
+	}
+
+	diagonalLine(s: { x: number, y: number }, t: { x: number, y: number }) {
+		// Calculate some variables based on source and target (s,t) coordinates
+		let deltaX = t.x - s.x;
+		let directionX = deltaX < 0 ? -1 : 1;
+		let deltaY = t.y - s.y;
+		let directionY = deltaY < 0 ? -1 : 1;
+		let defaultRadius = this.getChartState().verticalLayerGap / 3;
+		let r = Math.min(Math.abs(deltaX) / 2, Math.abs(deltaY) / 2, defaultRadius);
+		let h = Math.abs(deltaY) - r - this.getChartState().verticalLayerGap / 2;
+		let w = Math.abs(deltaX) - r * 2;
+
+		// Build the path
+		return `
+           M ${(s.x)} ${(s.y)}
+           L ${(s.x)} ${s.y + h * directionY}
+           C  ${(s.x)} ${s.y + h * directionY + r * directionY} ${(s.x)} ${s.y + h * directionY + r * directionY} ${s.x + r * directionX} ${s.y + h * directionY + r * directionY}
+           L ${s.x + w * directionX + r * directionX} ${s.y + h * directionY + r * directionY}
+           C ${(t.x)}  ${s.y + h * directionY + r * directionY} ${(t.x)}  ${s.y + h * directionY + r * directionY} ${(t.x)} ${t.y - (this.getChartState().verticalLayerGap / 2 - r) * directionY}
+           L ${(t.x)} ${(t.y)}
+         `;
+	}
+
+	hookLine(s: { x: number, y: number }, t: { x: number, y: number }) {
+		// Calculate some variables based on source and target (s,t) coordinates
+		let deltaX = t.x - s.x;
+		let directionX = deltaX < 0 ? -1 : 1;
+		let deltaY = t.y - s.y;
+		let directionY = deltaY < 0 ? -1 : 1;
+		let defaultRadius = 35;
+		let r = Math.min(Math.abs(deltaX), Math.abs(deltaY), defaultRadius);
+		let h = Math.abs(deltaY) - r;
+		let w = Math.abs(deltaX) - r;
+
+		// Build the path
+		return `
+           M ${(s.x)} ${(s.y)}
+           L ${(s.x)} ${s.y + h * directionY}
+           C  ${(s.x)} ${s.y + h * directionY + r * directionY} ${(s.x)} ${s.y + h * directionY + r * directionY} ${s.x + r * directionX} ${s.y + h * directionY + r * directionY}
+           L ${(t.x)} ${(t.y)}
+         `;
+	}
+
+	restyleForeignObjectElements() {
+		const attrs = this.getChartState();
+
+		attrs.svg.selectAll('.node-foreign-object')
+			.attr('width', (n: TreeNode) => n.data.width)
+			.attr('height', (n: TreeNode) => n.data.height);
+		attrs.svg.selectAll('.node-foreign-object-div')
+			.style('width', (n: TreeNode) => `${n.data.width}px`)
+			.style('height', (n: TreeNode) => `${n.data.height}px`)
+			.html((n: TreeNode) => this.context.templateRegistry.createTemplateRenderer(n.data.template).render(n.data.record.values))
+			.select('*')
+			.style('display', 'inline-grid')
+	}
+
+	// Toggle children on click.
+	private getVisibleNodeRecords(records: UiTreeGraphNodeConfig[]) {
+		const recordsById = getById(records);
+
+		function depth(r: UiTreeGraphNodeConfig) {
+			let depth = 0;
+			while (r.parentId != null && recordsById[r.parentId] != null) {
+				depth++;
+				r = recordsById[r.parentId];
+			}
+			return depth;
+		}
+
+		// find the lowest root (without parent node or with parentExpanded == false)
+		const visibleRoot = records
+			.filter(r => r.parentId == null || recordsById[r.parentId] == null || r.parentExpanded == false)
+			.sort((r1, r2) => depth(r2) - depth(r1))
+			[0];
+
+		const visibleNodeRecordsById: { [id: string]: UiTreeGraphNodeConfig } = {[visibleRoot.id]: visibleRoot};
+		const invisibleNodeRecordsById: { [id: string]: UiTreeGraphNodeConfig } = {};
+
+		// everything above the visible root is invisible (by definition)
+		let invisibleParent = visibleRoot; // only for initialization. the visible root remains visible
+		do {
+			invisibleParent = invisibleParent.parentId != null ? recordsById[invisibleParent.parentId] : null;
+			if (invisibleParent != null) {
+				invisibleNodeRecordsById[invisibleParent.id] = invisibleParent;
+			}
+		} while (invisibleParent != null);
+
+		// propagate visibility/invisibility knowledge downwards
+		let remainingRecords: UiTreeGraphNodeConfig[] = records.filter(r => visibleNodeRecordsById[r.id] == null && invisibleNodeRecordsById[r.id] == null);
+		let visibleNodesChanged: boolean;
+		do {
+			visibleNodesChanged = false;
+			remainingRecords = remainingRecords.filter(r => {
+				let visibleParent = visibleNodeRecordsById[r.parentId];
+				let invisibleParent = invisibleNodeRecordsById[r.parentId];
+				if (visibleParent != null) {
+					if (visibleParent.expanded) {
+						visibleNodeRecordsById[r.id] = r;
+						visibleNodesChanged = true;
+						return false;
+					} else {
+						invisibleNodeRecordsById[r.id] = r;
+						return false;
+					}
+				} else if (invisibleParent != null) {
+					invisibleNodeRecordsById[r.id] = r;
+					return false;
+				} else {
+					return true; // we don't know yet for this node...
+				}
+			});
+		} while (visibleNodesChanged);
+		return visibleNodeRecordsById;
+	}
+
+	private getAllDescendants(node: UiTreeGraphNodeConfig, includeSelf: boolean) {
+		// O(h^2) where h is the height of the tree.
+		// So the worst case performance is O(n * n/2) for a totally linear tree.
+		// Average case: O(n * log(n))
+		// If used for a root node (see usages!!): O(n) due to optimization!
+
+		const descendantsById: { [id: string]: UiTreeGraphNodeConfig } = {};
+		descendantsById[node.id] = node;
+		const nonDescendantsById: { [id: string]: UiTreeGraphNodeConfig } = {}; // common case optimization!
+
+		let untaggedNodes = this.getChartState().data.filter(n => n.id != node.id);
+
+		let descendantsChanged: boolean;
+		let nonDescendantsChanged: boolean;
+		do {
+			descendantsChanged = false;
+			nonDescendantsChanged = false;
+			untaggedNodes = untaggedNodes.filter(n => {
+				if (descendantsById[n.parentId] != null) {
+					descendantsById[n.id] = n;
+					descendantsChanged = true;
+					return false;
+				} else if (nonDescendantsById[n.parentId] != null) {
+					nonDescendantsById[n.id] = n;
+					nonDescendantsChanged = true;
+					return false;
+				} else {
+					return true;
+				}
+			});
+		} while (descendantsChanged && nonDescendantsChanged);
+
+		for (let untaggedNode of untaggedNodes) {
+			descendantsById[untaggedNode.id] = untaggedNode; // if nonDescendantsChanged[0] == false, all remaining nodes must be descendants!
+		}
+
+		if (!includeSelf) {
+			delete descendantsById[node.id];
+		}
+
+		return descendantsById;
+	}
+
+	// Zoom handler function
+	zoomed() {
+		const attrs = this.getChartState();
+		const chart = attrs.chart;
+
+		// Get d3 event's transform object
+		const transform = d3.event.transform;
+
+		// Store it
+		attrs.lastTransform = transform;
+
+		// Reposition and rescale chart accordingly
+		chart.attr('transform', transform);
+
+		// Apply new styles to the foreign object element
+		if (this.isEdge()) {
+			this.restyleForeignObjectElements();
+		}
+	}
+
+	public moveToRootNode(animationDuration: number = 400) {
+		let attrs: TreeChartAttributes = this.getChartState();
+		if (attrs.root) {
+			this.moveToHierarchyNode(attrs.root, animationDuration);
+		}
+	}
+
+	public moveToNode(nodeId: string, animationDuration: number = 400) {
+		let attrs: TreeChartAttributes = this.getChartState();
+		let treeNode = attrs.root.descendants().filter(d => d.id === nodeId)[0];
+		if (treeNode != null) {
+			this.moveToHierarchyNode(treeNode, animationDuration);
+		}
+	}
+
+	private moveToHierarchyNode(node: HierarchyPointNode<UiTreeGraphNodeConfig>, animationDuration: number = 400) {
+		let attrs: TreeChartAttributes = this.getChartState();
+		let zoomTransform = d3.zoomTransform(attrs.svg.node());
+
+		let nodeSize = this.calculateNodeSize(node);
+
+		attrs.svg.transition().duration(animationDuration).call(
+			this.zoomBehavior.transform,
+			d3.zoomIdentity.scale(zoomTransform.k).translate(-node.x - nodeSize.width / 2 + attrs.svgWidth / (2 * zoomTransform.k), -node.y + (attrs.verticalLayerGap))
+		);
+	}
+
+}
+
+function getById<R>(recs: R[], idExtractor: (r: R) => string = r => (r as any).id) {
+	return recs.reduce((recordsById, record) => {
+		recordsById[idExtractor(record)] = record;
+		return recordsById;
+	}, {} as { [id: string]: R })
+}
+
+export function patternify<E extends BaseType, ED, P extends BaseType = null, PD = null>(container: Selection<P, PD, any, any>, params: PatternifyParameter) {
+	var selector = params.selector;
+	var elementTag = params.tag;
+	var data = params.data || [selector];
+
+	// Pattern in action
+	var selection = container.selectAll<E, ED>(':scope > .' + selector)
+		.data(data, (d: any, i: number) => {
+			if (typeof d === 'object' && d.id) {
+				return d.id;
+			}
+			return i;
+		}) as Selection<E, ED, P, PD>;
+	selection.exit().remove();
+	selection = selection.enter().append<E>(elementTag).merge(selection);
+	selection.attr('class', selector);
+	return selection;
+}
diff --git a/teamapps-client/ts/modules/UiVerticalLayout.ts b/teamapps-client/ts/modules/UiVerticalLayout.ts
index 92ec58de0..9f1ae597d 100644
--- a/teamapps-client/ts/modules/UiVerticalLayout.ts
+++ b/teamapps-client/ts/modules/UiVerticalLayout.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,56 +17,47 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-import * as $ from "jquery";
-import {UiComponent} from "./UiComponent";
+
+import {AbstractUiComponent} from "./AbstractUiComponent";
 import {UiComponentConfig} from "../generated/UiComponentConfig";
 import {TeamAppsUiContext} from "./TeamAppsUiContext";
 import {UiVerticalLayoutCommandHandler, UiVerticalLayoutConfig} from "../generated/UiVerticalLayoutConfig";
 import {TeamAppsUiComponentRegistry} from "./TeamAppsUiComponentRegistry";
+import {parseHtml} from "./Common";
+import {UiComponent} from "./UiComponent";
 
 
-export class UiVerticalLayout extends UiComponent<UiVerticalLayoutConfig> implements UiVerticalLayoutCommandHandler {
-	private $verticalLayout: JQuery;
+export class UiVerticalLayout extends AbstractUiComponent<UiVerticalLayoutConfig> implements UiVerticalLayoutCommandHandler {
+	private $verticalLayout: HTMLElement;
 	private children: UiComponent<UiComponentConfig>[] = [];
 
 	constructor(config: UiVerticalLayoutConfig, context: TeamAppsUiContext) {
 		super(config, context);
 
-		this.$verticalLayout = $('<div id="' + config.id + '" class="UiVerticalLayout"></div>');
+		this.$verticalLayout = parseHtml('<div id="' + config.id + '" class="UiVerticalLayout"></div>');
 
 		if (config.components) {
 			for (let i = 0; i < config.components.length; i++) {
-				this.addComponent(config.components[i]);
+				this.addComponent(config.components[i] as UiComponent);
 			}
 		}
 	}
 
-	public getMainDomElement(): JQuery {
+	public doGetMainElement(): HTMLElement {
 		return this.$verticalLayout;
 	}
 
-	protected onAttachedToDom() {
-		this.children.forEach(c => c.attachedToDom = true);
-	}
-
-	public onResize(): void {
-		this.children.forEach(c => c.reLayout());
-	}
-
-	public destroy(): void {
-	}
-
 	public addComponent(childComponent: UiComponent) {
-		const $childWrapper = $('<div class="vertical-layout-child-wrapper" style="' + (this._config.fixedChildHeight ? 'height:' + this._config.fixedChildHeight + 'px' : '') + '">').appendTo(this.$verticalLayout);
-		childComponent.getMainDomElement().appendTo($childWrapper);
+		const $childWrapper = parseHtml('<div class="vertical-layout-child-wrapper" style="' + (this._config.fixedChildHeight ? 'height:' + this._config.fixedChildHeight + 'px' : '') + '">');
+		this.$verticalLayout.appendChild($childWrapper);
+		$childWrapper.appendChild(childComponent.getMainElement());
 		this.children.push(childComponent);
-		childComponent.attachedToDom = this.attachedToDom;
 	}
 
 	public removeComponent(childComponent: UiComponent) {
 		this.children = this.children.filter(c => c !== childComponent);
-		let $childWrapper = childComponent.getMainDomElement().closest(".vertical-layout-child-wrapper");
-		$childWrapper.detach();
+		let $childWrapper = childComponent.getMainElement().closest(".vertical-layout-child-wrapper");
+		$childWrapper.remove();
 	}
 }
 
diff --git a/teamapps-client/ts/modules/UiVideoPlayer.ts b/teamapps-client/ts/modules/UiVideoPlayer.ts
index fcc18d1a2..2de9555c5 100644
--- a/teamapps-client/ts/modules/UiVideoPlayer.ts
+++ b/teamapps-client/ts/modules/UiVideoPlayer.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -18,35 +18,36 @@
  * =========================LICENSE_END==================================
  */
 ///<reference path="../custom-declarations/mediaelement.d.ts"/>
-import * as $ from "jquery";
+
 import "mediaelement/full";
 
 
-import {UiComponent} from "./UiComponent";
+import {AbstractUiComponent} from "./AbstractUiComponent";
 import {TeamAppsEvent} from "./util/TeamAppsEvent";
 import {TeamAppsUiContext} from "./TeamAppsUiContext";
 import {
+	UiVideoPlayer_EndedEvent,
 	UiVideoPlayer_ErrorLoadingEvent,
 	UiVideoPlayer_PlayerProgressEvent,
-	UiVideoPlayer_PosterImageSize,
 	UiVideoPlayerCommandHandler,
 	UiVideoPlayerConfig,
 	UiVideoPlayerEventSource
 } from "../generated/UiVideoPlayerConfig";
-import {EventFactory} from "../generated/EventFactory";
 import {TeamAppsUiComponentRegistry} from "./TeamAppsUiComponentRegistry";
-import {createUiColorCssString} from "./util/CssFormatUtil";
 import {UiMediaPreloadMode} from "../generated/UiMediaPreloadMode";
+import {parseHtml} from "./Common";
+import {UiPosterImageSize} from "../generated/UiPosterImageSize";
 
-export class UiVideoPlayer extends UiComponent<UiVideoPlayerConfig> implements UiVideoPlayerCommandHandler, UiVideoPlayerEventSource {
+export class UiVideoPlayer extends AbstractUiComponent<UiVideoPlayerConfig> implements UiVideoPlayerCommandHandler, UiVideoPlayerEventSource {
 
-	public readonly onPlayerProgress: TeamAppsEvent<UiVideoPlayer_PlayerProgressEvent> = new TeamAppsEvent<UiVideoPlayer_PlayerProgressEvent>(this);
-	public readonly onErrorLoading: TeamAppsEvent<UiVideoPlayer_ErrorLoadingEvent> = new TeamAppsEvent<UiVideoPlayer_ErrorLoadingEvent>(this);
+	public readonly onPlayerProgress: TeamAppsEvent<UiVideoPlayer_PlayerProgressEvent> = new TeamAppsEvent<UiVideoPlayer_PlayerProgressEvent>();
+	public readonly onEnded: TeamAppsEvent<UiVideoPlayer_EndedEvent> = new TeamAppsEvent<UiVideoPlayer_EndedEvent>();
+	public readonly onErrorLoading: TeamAppsEvent<UiVideoPlayer_ErrorLoadingEvent> = new TeamAppsEvent<UiVideoPlayer_ErrorLoadingEvent>();
 
-	private $componentWrapper: JQuery;
-	private $video: JQuery;
+	private $componentWrapper: HTMLElement;
+	private $video: HTMLElement;
 	private mediaPlayer: any;
-	private contentReady: boolean = false;
+	private playerInitialized: boolean = false;
 	private jumpToPositionWhenReady: number = 0;
 
 	private destroyed: boolean;
@@ -56,17 +57,18 @@ export class UiVideoPlayer extends UiComponent<UiVideoPlayerConfig> implements U
 	constructor(config: UiVideoPlayerConfig, context: TeamAppsUiContext) {
 		super(config, context);
 
-		const posterImageSizeCssClass = `poster-${UiVideoPlayer_PosterImageSize[config.posterImageSize].toLowerCase()}`;
-		this.$componentWrapper = $(
-			`<div id="${config.id}" class="UiVideoPlayer ${posterImageSizeCssClass} ${config.url == null ? "not-playable" : ""}">
-                    <video src="${config.url || ""}" width="100%" height="100%" poster="${config.posterImageUrl || ''}" preload="${config.preloadMode === UiMediaPreloadMode.AUTO ? 'auto' : config.preloadMode === UiMediaPreloadMode.METADATA ? 'metadata' : 'none'}" ${config.autoplay ? "autoplay" : ""}></video>
+		const posterImageSizeCssClass = `poster-${UiPosterImageSize[config.posterImageSize].toLowerCase()}`;
+		let preload = `${config.preloadMode === UiMediaPreloadMode.AUTO ? 'auto' : config.preloadMode === UiMediaPreloadMode.METADATA ? 'metadata' : 'none'}`;
+		this.$componentWrapper = parseHtml(
+			`<div class="UiVideoPlayer ${config.url == null ? "not-playable" : ""}">
+                    <video class="${posterImageSizeCssClass}" src="${config.url || ""}" width="100%" height="100%" poster="${config.posterImageUrl || ''}" preload="${preload}" ${config.autoplay ? "autoplay" : ""}></video>
                 </div>`);
-		this.$componentWrapper.toggleClass("hide-controls", !config.showControls);
-		this.$video = this.$componentWrapper.find("video");
+		this.$componentWrapper.classList.toggle("hide-controls", !config.showControls);
+		this.$video = this.$componentWrapper.querySelector<HTMLElement>(":scope video");
 
 		// TODO this is the point where the element was inserted to the DOM
 
-		this.mediaPlayer = new mejs.MediaElementPlayer(this.$componentWrapper.find('video')[0], {
+		this.mediaPlayer = new mejs.MediaElementPlayer(this.$componentWrapper.querySelector<HTMLElement>(':scope video'), {
 			enablePluginDebug: false,
 			plugins: ['fasterslower'],
 			type: '',
@@ -74,48 +76,52 @@ export class UiVideoPlayer extends UiComponent<UiVideoPlayerConfig> implements U
 			features: ['playpause', 'current', 'progress', 'duration', 'tracks', 'volume', 'fullscreen'],
 			timerRate: 250,
 			success: (mediaElement: HTMLMediaElement) => {
-				this.onContentReady();
-
+				this.onPlayerInitialized();
 				mediaElement.addEventListener('play', (e) => {
-					this.onPlayerProgress.fire(EventFactory.createUiVideoPlayer_PlayerProgressEvent(config.id, 0));
+					this.onPlayerProgress.fire({
+						positionInSeconds: 0
+					});
 				}, false);
-
 				let lastPlayTime = 0;
 				mediaElement.addEventListener('timeupdate', (e) => {
 					let currentPlayTime = mediaElement.currentTime;
 					if (lastPlayTime < currentPlayTime && lastPlayTime % config.sendPlayerProgressEventsEachXSeconds > currentPlayTime % config.sendPlayerProgressEventsEachXSeconds) {
-						this.onPlayerProgress.fire(EventFactory.createUiVideoPlayer_PlayerProgressEvent(config.id, Math.floor(currentPlayTime)));
+						this.onPlayerProgress.fire({
+							positionInSeconds: Math.floor(currentPlayTime)
+						});
 					}
 					lastPlayTime = currentPlayTime;
 				}, false);
+				mediaElement.addEventListener('ended', (e) => {
+					this.onEnded.fire({});
+				});
 			},
 			error: () => {
 				if (!this.destroyed) {
-					console.log();
-					this.onErrorLoading.fire(EventFactory.createUiVideoPlayer_ErrorLoadingEvent(config.id))
+					this.onErrorLoading.fire({})
 				}
 			}
 		});
 
-		this.$componentWrapper.add(this.$componentWrapper.find('.mejs__container'))
-			.css('background-color', createUiColorCssString(config.backgroundColor));
+		this.$componentWrapper.style.backgroundColor = config.backgroundColor;
+		this.$componentWrapper.querySelector<HTMLElement>(':scope .mejs__container').style.backgroundColor = config.backgroundColor;
 
 		this.setPreloadMode(config.preloadMode);
 		this.setAutoplay(config.autoplay);
-	}
 
-	public getMainDomElement(): JQuery {
-		return this.$componentWrapper;
+		this.displayedDeferredExecutor.invokeWhenReady(() => {
+			if (this.autoplay) {
+				this.play();
+			}
+		});
 	}
 
-	protected onAttachedToDom(): void {
-		if (this.autoplay) {
-			this.play();
-		}
+	public doGetMainElement(): HTMLElement {
+		return this.$componentWrapper;
 	}
 
-	private onContentReady() {
-		this.contentReady = true;
+	private onPlayerInitialized() {
+		this.playerInitialized = true;
 		if (this.playState === "playing" || (this.autoplay && this.playState !== "paused")) {
 			this.play();
 		}
@@ -123,7 +129,7 @@ export class UiVideoPlayer extends UiComponent<UiVideoPlayerConfig> implements U
 
 	public play() {
 		this.playState = "playing";
-		if (this.contentReady) {
+		if (this.playerInitialized) {
 			this.mediaPlayer.play();
 		}
 	}
@@ -134,7 +140,7 @@ export class UiVideoPlayer extends UiComponent<UiVideoPlayerConfig> implements U
 	}
 
 	public jumpTo(seconds: number) {
-		if (this.contentReady) {
+		if (this.playerInitialized) {
 			this.mediaPlayer.setCurrentTime(seconds);
 		} else {
 			this.jumpToPositionWhenReady = seconds;
@@ -142,11 +148,14 @@ export class UiVideoPlayer extends UiComponent<UiVideoPlayerConfig> implements U
 	}
 
 	public onResize(): void {
+		// console.log(this.getWidth(), this.getHeight(), Math.min(this.getHeight(), this.mediaPlayer.height), this.mediaPlayer.width, this.mediaPlayer.height)
+		// this.mediaPlayer.setPlayerSize(this.getWidth(), Math.min(this.getHeight(), this.mediaPlayer.height)); // CAUTION: maybe we will have to handle fullscreen mode
 		this.mediaPlayer.setPlayerSize(this.mediaPlayer.width, this.mediaPlayer.height); // CAUTION: maybe we will have to handle fullscreen mode
 		this.mediaPlayer.setControlsSize();
 	}
 
 	public destroy(): void {
+		super.destroy();
 		this.destroyed = true;
 		try {
 			this.mediaPlayer.pause();
@@ -160,33 +169,32 @@ export class UiVideoPlayer extends UiComponent<UiVideoPlayerConfig> implements U
 	setAutoplay(autoplay: boolean): void {
 		this.autoplay = autoplay;
 		this.playState = "initial";
-		
+
 		if (autoplay) {
-			if (this.contentReady) {
+			if (this.playerInitialized) {
 				this.mediaPlayer.play();
 			}
-			this.$video.attr("autoplay", "autoplay")
+			this.$video.setAttribute("autoplay", "autoplay")
 		} else {
-			this.$video.removeAttr("autoplay");
+			this.$video.removeAttribute("autoplay");
 		}
 	}
 
 	setPreloadMode(preloadMode: UiMediaPreloadMode): void {
-		this.$video.attr("preload", `${preloadMode === UiMediaPreloadMode.AUTO ? 'auto' : preloadMode === UiMediaPreloadMode.METADATA ? 'metadata' : 'none'}`);
+		this.$video.setAttribute("preload", `${preloadMode === UiMediaPreloadMode.AUTO ? 'auto' : preloadMode === UiMediaPreloadMode.METADATA ? 'metadata' : 'none'}`);
 	}
 
 	setUrl(url: string): void {
-		this.getMainDomElement().find(".mejs__overlay-error").parent().hide();
-		this.getMainDomElement().find(".mejs__poster").show();
-		this.getMainDomElement().find(".mejs__overlay-play").css("display", "flex");
+		this.getMainElement().querySelector<HTMLElement>(":scope .mejs__overlay-error").parentElement.classList.add("hidden");
+		this.getMainElement().querySelector<HTMLElement>(":scope .mejs__poster").classList.remove("hidden");
+		this.getMainElement().querySelector<HTMLElement>(":scope .mejs__overlay-play").style.display = "flex";
 		this.mediaPlayer.pause();
-		this.contentReady = false;
 		if (url == null) {
 			this.pause();
 		} else {
 			this.mediaPlayer.setSrc(url);
 		}
-		this.$componentWrapper.toggleClass("not-playable", url == null);
+		this.$componentWrapper.classList.toggle("not-playable", url == null);
 	}
 }
 
diff --git a/teamapps-client/ts/modules/UiWebRtcPlayer.ts b/teamapps-client/ts/modules/UiWebRtcPlayer.ts
index f1c287272..3b96b4723 100644
--- a/teamapps-client/ts/modules/UiWebRtcPlayer.ts
+++ b/teamapps-client/ts/modules/UiWebRtcPlayer.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,12 +17,12 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-import * as $ from "jquery";
+
 import {UiWebRtcPlayerCommandHandler, UiWebRtcPlayerConfig} from "../generated/UiWebRtcPlayerConfig";
 import {UiSpinner} from "./micro-components/UiSpinner";
-import {UiComponent} from "./UiComponent";
+import {AbstractUiComponent} from "./AbstractUiComponent";
 import {TeamAppsUiContext} from "./TeamAppsUiContext";
-import {applyDisplayMode} from "./Common";
+import {applyDisplayMode, parseHtml} from "./Common";
 import {UiPageDisplayMode} from "../generated/UiPageDisplayMode";
 import {TeamAppsUiComponentRegistry} from "./TeamAppsUiComponentRegistry";
 import {UiWebRtcPlayingSettingsConfig} from "../generated/UiWebRtcPlayingSettingsConfig";
@@ -31,14 +31,14 @@ import {UiVideoCodec} from "../generated/UiVideoCodec";
 
 type WebRtcState = 'new' | 'checking' | 'connected' | 'completed' | 'failed' | 'disconnected' | 'closed';
 
-export class UiWebRtcPlayer extends UiComponent<UiWebRtcPlayerConfig> implements UiWebRtcPlayerCommandHandler {
+export class UiWebRtcPlayer extends AbstractUiComponent<UiWebRtcPlayerConfig> implements UiWebRtcPlayerCommandHandler {
 
 	private static readonly PEER_CONNECTION_CONFIG: any = {'iceServers': []};
 
-	private $main: JQuery;
-	private $videoContainer: JQuery;
-	private $audioActivityDisplayContainer: JQuery;
-	private $spinnerContainer: JQuery;
+	private $main: HTMLElement;
+	private $videoContainer: HTMLElement;
+	private $audioActivityDisplayContainer: HTMLElement;
+	private $spinnerContainer: HTMLElement;
 
 	private remoteVideo: HTMLVideoElement;
 	private peerConnection: RTCPeerConnection = null;
@@ -51,21 +51,21 @@ export class UiWebRtcPlayer extends UiComponent<UiWebRtcPlayerConfig> implements
 	constructor(config: UiWebRtcPlayerConfig, context: TeamAppsUiContext) {
 		super(config, context);
 
-		this.$main = $(`
+		this.$main = parseHtml(`
 <div class="UiWebRtcPlayer">
   <div class="video-container">
     <video autoplay></video>
 	<div class="spinner-container hidden"></div>	
   </div> 
 </div>`);
-		this.remoteVideo = <HTMLVideoElement> this.$main.find('video')[0];
+		this.remoteVideo = this.$main.querySelector<HTMLElement>(':scope video') as HTMLVideoElement;
 		this.remoteVideo.addEventListener("abort", () => { // this event will be triggered when stopPlaying() is invoked.
 			this.remoteVideo.load(); // show poster again. We cannot do this directly in stopPlaying()...
 		});
 		this.remoteVideo.onloadedmetadata = this.onResize.bind(this);
-		this.$videoContainer = this.$main.find('.video-container');
-		this.$audioActivityDisplayContainer = this.$main.find('.audio-activity-display-container');
-		this.$spinnerContainer = this.$main.find('.spinner-container');
+		this.$videoContainer = this.$main.querySelector<HTMLElement>(':scope .video-container');
+		this.$audioActivityDisplayContainer = this.$main.querySelector<HTMLElement>(':scope .audio-activity-display-container');
+		this.$spinnerContainer = this.$main.querySelector<HTMLElement>(':scope .spinner-container');
 		this.$spinnerContainer.append(new UiSpinner().getMainDomElement());
 
 		this.setBackgroundImageUrl(config.backgroundImageUrl);
@@ -102,7 +102,7 @@ export class UiWebRtcPlayer extends UiComponent<UiWebRtcPlayerConfig> implements
 			this.peerConnection = new RTCPeerConnection(UiWebRtcPlayer.PEER_CONNECTION_CONFIG);
 			this.peerConnection.onicecandidate = this.gotIceCandidate.bind(this);
 			this.peerConnection.oniceconnectionstatechange = this.onPlayingIceConnectionStateChange.bind(this);
-			this.peerConnection.onaddstream = this.gotRemoteStream.bind(this);
+			(this.peerConnection as any).onaddstream = this.gotRemoteStream.bind(this);
 			(this.peerConnection as any).ontrack = this.gotRemoteTrack.bind(this);
 			this.logger.debug("wsURL: " + this.settings.signalingUrl);
 			this.sendPlayGetOffer(this.settings.wowzaApplicationName, this.settings.streamName);
@@ -207,7 +207,7 @@ export class UiWebRtcPlayer extends UiComponent<UiWebRtcPlayerConfig> implements
 	private updateUi() {
 		const nonLoadingIceStates: WebRtcState[] = ['connected', 'completed', 'closed'];
 		let loading: boolean = (this.signalingWsConnection != null || nonLoadingIceStates.indexOf(this.iceConnectionState) === -1);
-		this.$spinnerContainer.toggleClass("hidden", !loading);
+		this.$spinnerContainer.classList.toggle("hidden", !loading);
 	}
 
 	private gotDescriptionForPlaying(description: RTCSessionDescription) {
@@ -233,7 +233,7 @@ export class UiWebRtcPlayer extends UiComponent<UiWebRtcPlayerConfig> implements
 		}
 	}
 
-	private gotRemoteStream(event: MediaStreamEvent) {
+	private gotRemoteStream(event: any) {
 		// this.logger.debug('gotRemoteStream: ' + event.stream);
 		// this.remoteVideo.muted = false;
 		// try {
@@ -253,23 +253,19 @@ export class UiWebRtcPlayer extends UiComponent<UiWebRtcPlayerConfig> implements
 
 	public onResize(): void {
 		applyDisplayMode(this.$main, this.$videoContainer, UiPageDisplayMode.FIT_SIZE, {
-			innerPreferedDimensions: {
+			innerPreferredDimensions: {
 				width: this.remoteVideo.videoWidth,
 				height: this.remoteVideo.videoHeight
 			}
 		});
 	}
 
-	destroy(): void {
-	}
-
-	getMainDomElement(): JQuery {
+	doGetMainElement(): HTMLElement {
 		return this.$main;
 	}
 
 }
 
-navigator.getUserMedia = navigator.getUserMedia || (navigator as any).mozGetUserMedia || (navigator as any).webkitGetUserMedia;
 (window as any).RTCPeerConnection = (window as any).RTCPeerConnection || (window as any).mozRTCPeerConnection || (window as any).webkitRTCPeerConnection;
 (window as any).RTCIceCandidate = (window as any).RTCIceCandidate || (window as any).mozRTCIceCandidate || (window as any).webkitRTCIceCandidate;
 (window as any).RTCSessionDescription = (window as any).RTCSessionDescription || (window as any).mozRTCSessionDescription || (window as any).webkitRTCSessionDescription;
diff --git a/teamapps-client/ts/modules/UiWebRtcPublisher.ts b/teamapps-client/ts/modules/UiWebRtcPublisher.ts
deleted file mode 100644
index 871ac9849..000000000
--- a/teamapps-client/ts/modules/UiWebRtcPublisher.ts
+++ /dev/null
@@ -1,641 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-import * as $ from "jquery";
-import {UiAudioActivityDisplay} from "./micro-components/UiAudioActivityDisplay";
-import {UiWebRtcPublisher_PublishingFailedEvent, UiWebRtcPublisherCommandHandler, UiWebRtcPublisherConfig, UiWebRtcPublisherEventSource} from "../generated/UiWebRtcPublisherConfig";
-import {UiSpinner} from "./micro-components/UiSpinner";
-import {UiComponent} from "./UiComponent";
-import {TeamAppsUiContext} from "./TeamAppsUiContext";
-import {UiPageDisplayMode} from "../generated/UiPageDisplayMode";
-import {UiAudioCodec} from "../generated/UiAudioCodec";
-import {UiVideoCodec} from "../generated/UiVideoCodec";
-import {applyDisplayMode, parseHtml} from "./Common";
-import {TeamAppsUiComponentRegistry} from "./TeamAppsUiComponentRegistry";
-import {UiWebRtcPublishingSettingsConfig} from "../generated/UiWebRtcPublishingSettingsConfig";
-import {checkChromeExtensionAvailable, getScreenConstraints, isChrome} from "./util/ScreenCapturing";
-import {TeamAppsEvent} from "./util/TeamAppsEvent";
-import {EventFactory} from "../generated/EventFactory";
-import {UiWebRtcPublishingErrorReason} from "../generated/UiWebRtcPublishingErrorReason";
-import {MediaStreamWithMixiSizingInfo, MultiStreamsMixer} from "./util/MultiStreamsMixer";
-import {UiWebRtcPublishingMediaSettingsConfig} from "../generated/UiWebRtcPublishingMediaSettingsConfig";
-
-type WebRtcState = 'new' | 'checking' | 'connected' | 'completed' | 'failed' | 'disconnected' | 'closed';
-
-interface SdpDescriptorEnhancingData {
-	audioBitrate: number,
-	videoBitrate: number,
-	videoFrameRate: number
-}
-
-export class UiWebRtcPublisher extends UiComponent<UiWebRtcPublisherConfig> implements UiWebRtcPublisherCommandHandler, UiWebRtcPublisherEventSource {
-
-	private static readonly PEER_CONNECTION_CONFIG: any = {'iceServers': []};
-
-	public readonly onPublishingFailed: TeamAppsEvent<UiWebRtcPublisher_PublishingFailedEvent> = new TeamAppsEvent(this);
-
-	private $main: JQuery;
-	private $videoContainer: JQuery;
-	private video: HTMLVideoElement;
-	private $audioActivityDisplayContainer: JQuery;
-	private $spinnerContainer: JQuery;
-
-	private publishingSettings: UiWebRtcPublishingSettingsConfig;
-	private publishingSignalingWsConnection: WebSocket = null;
-	private publishingPeerConnection: RTCPeerConnection = null;
-	private publishingUserData: { param1: string };
-	private publishingIceConnectionState: WebRtcState;
-
-	private audioActivityDisplay: UiAudioActivityDisplay;
-	private multiStreamsMixer: MultiStreamsMixer;
-	private microphoneMuted: boolean;
-
-	constructor(config: UiWebRtcPublisherConfig, context: TeamAppsUiContext) {
-		super(config, context);
-
-		this.$main = $(`
-<div class="UiWebRtcPublisher">
-  <div class="video-container">
-    <video autoplay></video>
-    <div class="mic-muted-icon"></div>
-    <div class="audio-activity-display-container hidden"></div>
-	<div class="spinner-container hidden"></div>	
-  </div> 
-</div>`);
-		this.video = <HTMLVideoElement> this.$main.find('video')[0];
-		this.video.addEventListener("abort", () => { // this event will be triggered when stopPlaying() is invoked.
-			this.video.load(); // show poster again. We cannot do this directly in stopPlaying()...
-		});
-		this.video.onloadedmetadata = this.onResize.bind(this);
-		this.$videoContainer = this.$main.find('.video-container');
-		this.$audioActivityDisplayContainer = this.$main.find('.audio-activity-display-container');
-		this.audioActivityDisplay = new UiAudioActivityDisplay();
-		this.$audioActivityDisplayContainer.append(this.audioActivityDisplay.getMainDomElement());
-		this.$spinnerContainer = this.$main.find('.spinner-container');
-		this.$spinnerContainer.append(new UiSpinner().getMainDomElement());
-
-		if (config.publishingSettings != null) {
-			this.publish(config.publishingSettings);
-		}
-
-		this.setMicrophoneMuted(config.microphoneMuted);
-
-		this.setBackgroundImageUrl(config.backgroundImageUrl);
-	}
-
-	public publish(settings: UiWebRtcPublishingSettingsConfig) {
-		this.unPublish();
-
-		this.publishingSettings = settings;
-
-		this.getMediaStreamMixer(settings.mediaSettings)
-			.then((multiStreamsMixer: MultiStreamsMixer) => {
-				this.multiStreamsMixer = multiStreamsMixer;
-				this.setMicrophoneMuted(this.microphoneMuted);
-				if (this.multiStreamsMixer.getMixedStream().getTracks().some(f => f.kind === "audio")) {
-					this.audioActivityDisplay.bindToStream(this.multiStreamsMixer.getMixedStream());
-				}
-				this.video.muted = true;
-				try {
-					this.video.srcObject = multiStreamsMixer.getMixedStream();
-				} catch (error) {
-					this.video.src = window.URL.createObjectURL(multiStreamsMixer);
-				}
-
-				this.reconnectForPublishing();
-			})
-			.catch((reason: any) => {
-				if (reason !== UiWebRtcPublishingErrorReason.CHROME_SCREEN_SHARING_EXTENSION_NOT_INSTALLED) {
-					reason = UiWebRtcPublishingErrorReason.OTHER;
-				}
-				this.onPublishingFailed.fire(EventFactory.createUiWebRtcPublisher_PublishingFailedEvent(this.getId(), reason));
-				console.error("Could not create screen sharing MediaStream. Reason:", UiWebRtcPublishingErrorReason[reason]);
-			});
-	}
-
-	setMicrophoneMuted(microphoneMuted: boolean): void {
-		this.microphoneMuted = microphoneMuted;
-		if (this.multiStreamsMixer) {
-			this.multiStreamsMixer.getInputMediaStreams().forEach(inputStream => inputStream.getAudioTracks().forEach(track => track.enabled = !this.microphoneMuted));
-		}
-		this.audioActivityDisplay.getMainDomElement()[0].classList.toggle("hidden", microphoneMuted);
-	}
-
-	private async getMediaStreamMixer(publishingSettings: UiWebRtcPublishingMediaSettingsConfig) {
-
-		let screenStream: MediaStream = null;
-		let camMicStream: MediaStream = null;
-
-		if (publishingSettings.screen) {
-			const chromeExtensionInstalled = await checkChromeExtensionAvailable();
-			this.logger.info("Chrome extension available: " + chromeExtensionInstalled);
-			const canProbablyPublishScreen = !isChrome || chromeExtensionInstalled;
-			if (canProbablyPublishScreen) {
-				const screenConstraints = await getScreenConstraints();
-				try {
-					screenStream = await navigator.mediaDevices.getUserMedia({video: screenConstraints});
-				} catch (e) {
-					throw UiWebRtcPublishingErrorReason.CANNOT_GET_SCREEN_MEDIA_STREAM;
-				}
-			} else {
-				throw UiWebRtcPublishingErrorReason.CHROME_SCREEN_SHARING_EXTENSION_NOT_INSTALLED;
-			}
-		}
-
-		if (publishingSettings.video || publishingSettings.audio) {
-			let constraints = {
-				video: publishingSettings.video ? {
-					width: publishingSettings.videoWidth,
-					height: publishingSettings.videoHeight
-				} : false,
-				audio: publishingSettings.audio
-			};
-			camMicStream = await navigator.mediaDevices.getUserMedia(constraints);
-			// setTimeout(() => {
-			// 	normalStream.getTracks().forEach(t => t.stop())
-			// }, 5000)
-		}
-
-		if (screenStream != null && camMicStream != null) {
-			const screenStreamDimensions = await UiWebRtcPublisher.determineVideoSize(screenStream);
-			const screenStreamWithSizingInfo = screenStream as MediaStreamWithMixiSizingInfo;
-			screenStreamWithSizingInfo.fullcanvas = true;
-			screenStreamWithSizingInfo.width = screenStreamDimensions.width;
-			screenStreamWithSizingInfo.height = screenStreamDimensions.height;
-
-			if (camMicStream.getTracks().some(t => t.kind === "video")) {
-				const screenStreamShortDimension = Math.min(screenStreamDimensions.width, screenStreamDimensions.height);
-				const cameraAspectRatio = camMicStream.getTracks().filter(t => t.kind === "video")[0].getSettings().aspectRatio;
-				const pictureInPictureHeight = Math.round((25 / 100) * screenStreamShortDimension);
-				const pictureInPictureWidth = Math.round(pictureInPictureHeight * cameraAspectRatio);
-
-				const camMicStreamWithSizingInfo = camMicStream as MediaStreamWithMixiSizingInfo;
-				camMicStreamWithSizingInfo.width = pictureInPictureWidth;
-				camMicStreamWithSizingInfo.height = pictureInPictureHeight;
-				camMicStreamWithSizingInfo.left = screenStreamDimensions.width - pictureInPictureWidth;
-				camMicStreamWithSizingInfo.top = 0; // screenStreamDimensions.height - pictureInPictureHeight;
-			}
-
-			let multiStreamsMixer = new MultiStreamsMixer([screenStreamWithSizingInfo, camMicStream]);
-			multiStreamsMixer.frameInterval = 1000 / screenStream.getTracks()[0].getSettings().frameRate;
-			return multiStreamsMixer;
-		} else if (camMicStream != null) {
-			return new MultiStreamsMixer([camMicStream]);
-		} else if (screenStream != null) {
-			let multiStreamsMixer = new MultiStreamsMixer([screenStream]);
-			multiStreamsMixer.frameInterval = 1000 / screenStream.getTracks()[0].getSettings().frameRate;
-			return multiStreamsMixer;
-		}
-
-	}
-
-	private static determineVideoSize(mediaStream: MediaStream, timeout = 1000): Promise<{ width: number, height: number }> {
-		return new Promise((resolve, reject) => {
-			var video: HTMLVideoElement = parseHtml('<video class="pseudo-hidden"></video>');
-			document.body.appendChild(video);
-			video.srcObject = mediaStream;
-			video.muted = true;
-			video.onloadedmetadata = (e) => {
-				resolve({width: video.videoWidth, height: video.videoHeight});
-				video.remove();
-			};
-			setTimeout(() => {
-				reject();
-				video.remove();
-			}, timeout);
-		});
-	}
-
-	private reconnectForPublishing() {
-		if (!this.publishingSettings) {
-			return;
-		}
-
-		this.publishingSignalingWsConnection = new WebSocket(this.publishingSettings.signalingUrl);
-		this.publishingSignalingWsConnection.binaryType = 'arraybuffer';
-		this.publishingSignalingWsConnection.onopen = () => {
-			this.logger.debug("this.playingSignalingWsConnection.onopen");
-			this.publishingPeerConnection = new RTCPeerConnection(UiWebRtcPublisher.PEER_CONNECTION_CONFIG);
-			this.publishingPeerConnection.onicecandidate = this.gotIceCandidate.bind(this);
-			this.publishingPeerConnection.oniceconnectionstatechange = this.onPublishingIceConnectionStateChange.bind(this);
-			this.publishingPeerConnection.addStream(this.multiStreamsMixer.getMixedStream());
-			this.publishingPeerConnection.createOffer()
-				.then(sdpDescriptionInit => {
-					const enhancingData: SdpDescriptorEnhancingData = {
-						audioBitrate: Number(this.publishingSettings.mediaSettings.audioKiloBitsPerSecond),
-						videoBitrate: Number(this.publishingSettings.mediaSettings.videoKiloBitsPerSecond),
-						videoFrameRate: Number(this.publishingSettings.mediaSettings.videoFps)
-					};
-
-					this.logger.debug('offer created: ' + JSON.stringify({'sdp': sdpDescriptionInit}));
-					// console.log(sdpDescriptionInit.sdp);
-					sdpDescriptionInit.sdp = this.enhanceSDP(sdpDescriptionInit.sdp, enhancingData);
-					// console.log("==========================");
-					// console.log(sdpDescriptionInit.sdp);
-					this.logger.debug('offer enhanced: ' + JSON.stringify(sdpDescriptionInit.sdp));
-
-					this.publishingPeerConnection.setLocalDescription(sdpDescriptionInit)
-						.then(() => {
-							let streamInfo = {
-								applicationName: this.publishingSettings.wowzaApplicationName,
-								streamName: this.publishingSettings.streamName,
-								sessionId: "[empty]"
-							};
-							this.publishingUserData = {param1: "value1"};
-							this.publishingSignalingWsConnection.send('{"direction":"publish", "command":"sendOffer", "streamInfo":' + JSON.stringify(streamInfo) + ', "sdp":' + JSON.stringify(sdpDescriptionInit) + ', "userData":' + JSON.stringify(this.publishingUserData) + '}');
-						}, (error) => {
-							this.logger.error('set description error', error)
-						});
-				}, this.errorHandler.bind(this));
-		};
-		this.publishingSignalingWsConnection.onmessage = (evt) => {
-			this.logger.debug("this.playingSignalingWsConnection.onmessage: " + evt.data);
-			const msgJSON = JSON.parse(evt.data);
-			const msgStatus = Number(msgJSON['status']);
-			this.logger.info(`Status: ${msgStatus} - ${msgJSON['statusDescription']}`);
-			if (msgStatus == 200) {
-				if (msgJSON.sdp !== undefined) {
-					this.logger.debug('Received sdp: ' + JSON.stringify(msgJSON['sdp']));
-					this.publishingPeerConnection.setRemoteDescription(new RTCSessionDescription(msgJSON.sdp))
-						.then(() => {
-							//peerConnection.createAnswer(gotDescription, errorHandler);
-						}, this.errorHandler.bind(this));
-				}
-				const iceCandidates = msgJSON['iceCandidates'];
-				if (iceCandidates !== undefined) {
-					for (let index in iceCandidates) {
-						this.logger.debug('iceCandidates: ' + JSON.stringify(iceCandidates[index]));
-						this.publishingPeerConnection.addIceCandidate(new RTCIceCandidate(iceCandidates[index]));
-					}
-				}
-			} else {
-				this.logger.error(msgJSON.statusDescription);
-				setTimeout(() => this.reconnectForPublishing(), 1000);
-			}
-			if (this.publishingSignalingWsConnection != null) {
-				this.publishingSignalingWsConnection.close();
-			}
-			this.publishingSignalingWsConnection = null;
-		};
-		this.publishingSignalingWsConnection.onclose = () => {
-			this.logger.debug("this.playingSignalingWsConnection.onclose");
-		};
-		this.publishingSignalingWsConnection.onerror = (evt) => {
-			this.logger.error('WebSocket connection failed: ' + this.publishingSettings.signalingUrl);
-			this.logger.debug("this.playingSignalingWsConnection.onerror: " + JSON.stringify(evt));
-			setTimeout(() => this.reconnectForPublishing(), 1000);
-		};
-		this.updateUi();
-	}
-
-	public unPublish() {
-		this.publishingSettings = null;
-		if (this.publishingPeerConnection != null) {
-			this.publishingPeerConnection.close();
-		}
-		this.publishingPeerConnection = null;
-
-		if (this.publishingSignalingWsConnection != null) {
-			this.publishingSignalingWsConnection.close();
-		}
-		this.publishingSignalingWsConnection = null;
-		this.video.src = "";
-		this.video.srcObject = null;
-		this.video.muted = false;
-		if (this.multiStreamsMixer != null) {
-			this.multiStreamsMixer.close();
-		}
-	}
-
-	private gotIceCandidate(event: RTCPeerConnectionIceEvent) {
-		if (event.candidate != null) {
-			this.logger.debug('gotIceCandidate: ' + JSON.stringify({'ice': event.candidate}));
-		}
-	}
-
-	private onPublishingIceConnectionStateChange(event: Event) {
-		let peerConnection = event.currentTarget as RTCPeerConnection;
-		let state = peerConnection.iceConnectionState;
-		this.publishingIceConnectionState = state;
-		this.logger.debug("publishingIceConnectionState: " + state);
-
-		if (state === "closed") {
-			this.audioActivityDisplay.unbind();
-		}
-		if (state === "failed") {
-			setTimeout(() => this.reconnectForPublishing(), 1000);
-		}
-
-		this.updateUi();
-	}
-
-	private updateUi() {
-		const nonLoadingIceStates: WebRtcState[] = ['connected', 'completed', 'closed'];
-		let loading: boolean = this.publishingSignalingWsConnection != null || nonLoadingIceStates.indexOf(this.publishingIceConnectionState) === -1;
-
-		this.$spinnerContainer.toggleClass("hidden", !loading);
-		this.$audioActivityDisplayContainer.toggleClass("hidden", this.publishingIceConnectionState !== "completed");
-	}
-
-	private addAudio(sdpStr: string, audioLine: string) {
-		var sdpLines = sdpStr.split(/\r\n/);
-		var sdpStrRet = '';
-		var done = false;
-
-		for (var sdpIndex in sdpLines) {
-			var sdpLine = sdpLines[sdpIndex];
-
-			if (sdpLine.length <= 0)
-				continue;
-
-
-			sdpStrRet += sdpLine;
-			sdpStrRet += '\r\n';
-
-			if ('a=rtcp-mux'.localeCompare(sdpLine) == 0 && done == false) {
-				sdpStrRet += audioLine;
-				done = true;
-			}
-
-
-		}
-		return sdpStrRet;
-	}
-
-	private addVideo(sdpStr: string, videoLine: string) {
-		var sdpLines = sdpStr.split(/\r\n/);
-		var sdpSection = 'header';
-		var hitMID = false;
-		var sdpStrRet = '';
-		var done = false;
-
-		var rtcpSize = false;
-		var rtcpMux = false;
-
-		for (var sdpIndex in sdpLines) {
-			var sdpLine = sdpLines[sdpIndex];
-
-			if (sdpLine.length <= 0)
-				continue;
-
-			if (sdpLine.includes("a=rtcp-rsize")) {
-				rtcpSize = true;
-			}
-
-			if (sdpLine.includes("a=rtcp-mux")) {
-				rtcpMux = true;
-			}
-
-		}
-
-		for (var sdpIndex in sdpLines) {
-			var sdpLine = sdpLines[sdpIndex];
-
-			sdpStrRet += sdpLine;
-			sdpStrRet += '\r\n';
-
-			if (('a=rtcp-rsize'.localeCompare(sdpLine) == 0) && done == false && rtcpSize == true) {
-				sdpStrRet += videoLine;
-				done = true;
-			}
-
-			if ('a=rtcp-mux'.localeCompare(sdpLine) == 0 && done == true && rtcpSize == false) {
-				sdpStrRet += videoLine;
-				done = true;
-			}
-
-			if ('a=rtcp-mux'.localeCompare(sdpLine) == 0 && done == false && rtcpSize == false) {
-				done = true;
-			}
-
-		}
-		return sdpStrRet;
-	}
-
-	private enhanceSDP(sdpStr: string, enhanceData: SdpDescriptorEnhancingData) {
-		let sdpLines = sdpStr.split(/\r\n/);
-		let sdpSection = 'header';
-		let hitMID = false;
-		let sdpStrRet = '';
-
-		//console.log("Original SDP: "+sdpStr);
-
-		// Firefox provides a reasonable SDP, Chrome is just odd
-		// so we have to doing a little mundging to make it all work
-		let audioIndex: number;
-		let videoIndex: number;
-		if (!sdpStr.includes("THIS_IS_SDPARTA") || this.publishingSettings.mediaSettings.videoCodec === UiVideoCodec.VP9) {
-			let sdpOutput = {};
-			for (let sdpIndex in sdpLines) {
-				const sdpLine = sdpLines[sdpIndex];
-
-				if (sdpLine.length <= 0)
-					continue;
-
-				var doneCheck = this.checkLine(sdpLine, sdpOutput);
-				if (!doneCheck)
-					continue;
-
-				sdpStrRet += sdpLine;
-				sdpStrRet += '\r\n';
-
-			}
-			let audio: string;
-			({outputString: audio, line: audioIndex} = this.deliverCheckLine(UiAudioCodec[this.publishingSettings.mediaSettings.audioCodec], "audio", sdpOutput));
-			sdpStrRet = this.addAudio(sdpStrRet, audio);
-			let video: string;
-			({outputString: video, line: videoIndex} = this.deliverCheckLine(UiVideoCodec[this.publishingSettings.mediaSettings.videoCodec], "video", sdpOutput));
-			sdpStrRet = this.addVideo(sdpStrRet, video);
-			sdpStr = sdpStrRet;
-			sdpLines = sdpStr.split(/\r\n/);
-			sdpStrRet = '';
-		}
-
-		for (var sdpIndex in sdpLines) {
-			var sdpLine = sdpLines[sdpIndex];
-
-			if (sdpLine.length <= 0)
-				continue;
-
-			if (sdpLine.indexOf("m=audio") == 0 && audioIndex != -1) {
-				let audioMLines = sdpLine.split(" ");
-				sdpStrRet += audioMLines[0] + " " + audioMLines[1] + " " + audioMLines[2] + " " + audioIndex + "\r\n";
-				continue;
-			}
-
-			if (sdpLine.indexOf("m=video") == 0 && videoIndex != -1) {
-				let videoMLines = sdpLine.split(" ");
-				sdpStrRet += videoMLines[0] + " " + videoMLines[1] + " " + videoMLines[2] + " " + videoIndex + "\r\n";
-				continue;
-			}
-			sdpStrRet += sdpLine;
-
-			if (sdpLine.indexOf("m=audio") === 0) {
-				sdpSection = 'audio';
-				hitMID = false;
-			} else if (sdpLine.indexOf("m=video") === 0) {
-				sdpSection = 'video';
-				hitMID = false;
-			} else if (sdpLine.indexOf("a=rtpmap") == 0) {
-				sdpSection = 'bandwidth';
-				hitMID = false;
-			}
-
-			if (sdpLine.indexOf("a=mid:") === 0 || sdpLine.indexOf("a=rtpmap") == 0) {
-				if (!hitMID) {
-					if ('audio'.localeCompare(sdpSection) == 0) {
-						if (enhanceData.audioBitrate !== undefined) {
-							sdpStrRet += '\r\nb=CT:' + (enhanceData.audioBitrate);
-							sdpStrRet += '\r\nb=AS:' + (enhanceData.audioBitrate);
-						}
-						hitMID = true;
-					} else if ('video'.localeCompare(sdpSection) == 0) {
-						if (enhanceData.videoBitrate !== undefined) {
-							sdpStrRet += '\r\nb=CT:' + (enhanceData.videoBitrate);
-							sdpStrRet += '\r\nb=AS:' + (enhanceData.videoBitrate);
-							if (enhanceData.videoFrameRate !== undefined) {
-								sdpStrRet += '\r\na=framerate:' + enhanceData.videoFrameRate;
-							}
-						}
-						hitMID = true;
-					} else if ('bandwidth'.localeCompare(sdpSection) == 0) {
-						let rtpmapID;
-						rtpmapID = this.getRtpMapID(sdpLine);
-						if (rtpmapID !== null) {
-							const match = rtpmapID[2].toLowerCase();
-							if (('vp9'.localeCompare(match) == 0) || ('vp8'.localeCompare(match) == 0) || ('h264'.localeCompare(match) == 0) ||
-								('red'.localeCompare(match) == 0) || ('ulpfec'.localeCompare(match) == 0) || ('rtx'.localeCompare(match) == 0)) {
-								if (enhanceData.videoBitrate !== undefined) {
-									sdpStrRet += '\r\na=fmtp:' + rtpmapID[1] + ' x-google-min-bitrate=' + (enhanceData.videoBitrate) + ';x-google-max-bitrate=' + (enhanceData.videoBitrate);
-								}
-							}
-
-							if (('opus'.localeCompare(match) == 0) || ('isac'.localeCompare(match) == 0) || ('g722'.localeCompare(match) == 0) || ('pcmu'.localeCompare(match) == 0) ||
-								('pcma'.localeCompare(match) == 0) || ('cn'.localeCompare(match) == 0)) {
-								if (enhanceData.audioBitrate !== undefined) {
-									sdpStrRet += '\r\na=fmtp:' + rtpmapID[1] + ' x-google-min-bitrate=' + (enhanceData.audioBitrate) + ';x-google-max-bitrate=' + (enhanceData.audioBitrate);
-								}
-							}
-						}
-					}
-				}
-			}
-			sdpStrRet += '\r\n';
-		}
-		// this.logger.debug("Resulting SDP (offer): "+sdpStrRet);
-		return sdpStrRet;
-	}
-
-	private deliverCheckLine(profile: string, type: "audio" | "video", SDPOutput: { [x: number]: string }): {
-		outputString: string,
-		line: number
-	} {
-
-		if (profile === "H264") {
-			profile = "42e01f";
-		}
-
-		var outputString = "";
-		for (var line in SDPOutput) {
-			var lineInUse = SDPOutput[line];
-			outputString += lineInUse;
-			if (type === "audio" && lineInUse.toLowerCase().includes((profile.toLowerCase()))
-				|| type === "video" && lineInUse.toLowerCase().includes(profile.toLowerCase())) {
-				if (profile === "VP9" || profile === "VP8") {
-					var output = "";
-					var outputs = lineInUse.split(/\r\n/);
-					for (var position in outputs) {
-						var transport = outputs[position];
-						if (transport.indexOf("transport-cc") !== -1 || transport.indexOf("goog-remb") !== -1 || transport.indexOf("nack") !== -1) {
-							continue;
-						}
-						output += transport;
-						output += "\r\n";
-					}
-					return {outputString: output, line: parseInt(line)};
-				}
-				return {outputString: lineInUse, line: parseInt(line)};
-			}
-		}
-		return {outputString: "", line: -1};
-	}
-
-	private checkLine(line: string, SDPOutput: { [x: number]: string }) {
-		if (line.startsWith("a=rtpmap") || line.startsWith("a=rtcp-fb") || line.startsWith("a=fmtp")) {
-			var res = line.split(":");
-
-			if (res.length > 1) {
-				var number = res[1].split(" ");
-				if (!isNaN(number[0] as any)) // TODO use parseInt!!
-				{
-					if (!number[1].startsWith("http") && !number[1].startsWith("ur")) {
-						var currentString = SDPOutput[number[0] as any as number];
-						if (!currentString) {
-							currentString = "";
-						}
-						currentString += line + "\r\n";
-						SDPOutput[number[0] as any as number] = currentString;
-						return false;
-					}
-				}
-			}
-		}
-
-		return true;
-	}
-
-	private getRtpMapID(line: string) {
-		const findid = new RegExp('a=rtpmap:(\\d+) (\\w+)/(\\d+)');
-		const found = line.match(findid);
-		return (found && found.length >= 3) ? found : null;
-	}
-
-	private errorHandler(error: any) {
-		this.logger.error(error);
-	}
-
-	public setBackgroundImageUrl(backgroundImageUrl: string) {
-		this.video.style.backgroundImage = `url(${backgroundImageUrl})`;
-	}
-
-	public onResize(): void {
-		applyDisplayMode(this.$main, this.$videoContainer, UiPageDisplayMode.FIT_SIZE, {
-			innerPreferedDimensions: {
-				width: this.video.videoWidth,
-				height: this.video.videoHeight
-			}
-		});
-	}
-
-	destroy(): void {
-		this.unPublish();
-	}
-
-	getMainDomElement(): JQuery {
-		return this.$main;
-	}
-
-}
-
-navigator.getUserMedia = navigator.getUserMedia || (navigator as any).mozGetUserMedia || (navigator as any).webkitGetUserMedia;
-(window as any).RTCPeerConnection = (window as any).RTCPeerConnection || (window as any).mozRTCPeerConnection || (window as any).webkitRTCPeerConnection;
-(window as any).RTCIceCandidate = (window as any).RTCIceCandidate || (window as any).mozRTCIceCandidate || (window as any).webkitRTCIceCandidate;
-(window as any).RTCSessionDescription = (window as any).RTCSessionDescription || (window as any).mozRTCSessionDescription || (window as any).webkitRTCSessionDescription;
-
-TeamAppsUiComponentRegistry.registerComponentClass("UiWebRtcPublisher", UiWebRtcPublisher);
diff --git a/teamapps-client/ts/modules/UiWindow.ts b/teamapps-client/ts/modules/UiWindow.ts
index b31ff7de8..40f0403f1 100644
--- a/teamapps-client/ts/modules/UiWindow.ts
+++ b/teamapps-client/ts/modules/UiWindow.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,61 +17,69 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-import * as $ from "jquery";
+
 import {UiPanel} from "./UiPanel";
 import {UiPanelHeaderFieldConfig} from "../generated/UiPanelHeaderFieldConfig";
-import {UiComponent} from "./UiComponent";
+import {AbstractUiComponent} from "./AbstractUiComponent";
 import {TeamAppsUiContext} from "./TeamAppsUiContext";
-import {UiWindowCommandHandler, UiWindowConfig, UiWindowEventSource} from "../generated/UiWindowConfig";
+import {UiWindow_ClosedEvent, UiWindowCommandHandler, UiWindowConfig, UiWindowEventSource} from "../generated/UiWindowConfig";
 import {TeamAppsUiComponentRegistry} from "./TeamAppsUiComponentRegistry";
-import {keyCodes} from "trivial-components";
-import {UiColorConfig} from "../generated/UiColorConfig";
-import {createUiColorCssString} from "./util/CssFormatUtil";
+import {keyCodes} from "./trivial-components/TrivialCore";
 import {UiToolbar} from "./tool-container/toolbar/UiToolbar";
 import {UiToolButton} from "./micro-components/UiToolButton";
 import {TeamAppsEvent} from "./util/TeamAppsEvent";
 import {UiPanel_WindowButtonClickedEvent} from "../generated/UiPanelConfig";
-import {EventFactory} from "../generated/EventFactory";
 import {UiWindowButtonType} from "../generated/UiWindowButtonType";
+import {animateCSS, Constants, css, parseHtml} from "./Common";
+import {UiComponent} from "./UiComponent";
+import {UiExitAnimation} from "../generated/UiExitAnimation";
+import {UiEntranceAnimation} from "../generated/UiEntranceAnimation";
+import {viewport} from "@popperjs/core";
 
-export interface UiWindowListener {
-	onWindowClosed: (window: UiWindow, animationDuration: number) => void;
-}
-
-export class UiWindow extends UiComponent<UiWindowConfig> implements UiWindowCommandHandler, UiWindowEventSource {
+export class UiWindow extends AbstractUiComponent<UiWindowConfig> implements UiWindowCommandHandler, UiWindowEventSource {
 
-	public readonly onWindowButtonClicked: TeamAppsEvent<UiPanel_WindowButtonClickedEvent> = new TeamAppsEvent(this);
+	public readonly onWindowButtonClicked: TeamAppsEvent<UiPanel_WindowButtonClickedEvent> = new TeamAppsEvent();
+	public readonly onClosed: TeamAppsEvent<UiWindow_ClosedEvent> = new TeamAppsEvent();
 
-	private $main: JQuery;
-	private $panelWrapper: JQuery;
-	private listener: UiWindowListener;
+	private $main: HTMLElement;
+	private $panelWrapper: HTMLElement;
+	private $resizers: HTMLElement[];
 	private panel: UiPanel;
 
 	private escapeKeyListener: (e: KeyboardEvent) => void;
 	private clickOutsideListener: (e: MouseEvent) => void;
-	private closeable: boolean;
-	private closeOnEscape: boolean;
-	private closeOnClickOutside: boolean;
-	private modal: boolean;
-	private modalBackgroundDimmingColor: UiColorConfig;
+	private windowResizeListener: (e: Event) => void;
 
 	constructor(config: UiWindowConfig, context: TeamAppsUiContext) {
 		super(config, context);
 
-		this.$main = $(`<div class="UiWindow offscreen">
+		this.$main = parseHtml(`<div class="UiWindow">
 	<div class="panel-wrapper">
+		<div class="resizer corner t l"></div>
+		<div class="resizer corner t r"></div>
+		<div class="resizer corner b l"></div>
+		<div class="resizer corner b r"></div>
+		<div class="resizer t"></div>
+		<div class="resizer b"></div>
+		<div class="resizer l"></div>
+		<div class="resizer r"></div>
 	</div>
 </div>`);
-		this.$panelWrapper = this.$main.find(">.panel-wrapper");
+		this.$panelWrapper = this.$main.querySelector<HTMLElement>(":scope >.panel-wrapper");
+		this.$resizers = Array.from(this.$panelWrapper.querySelectorAll(":scope > .resizer"));
 
 		this.panel = new UiPanel(config, context);
-		this.panel.getMainDomElement().appendTo(this.$panelWrapper);
+		this.$panelWrapper.appendChild(this.panel.getMainElement());
 
 		if (config.closeable) {
 			this.panel.addWindowButton(UiWindowButtonType.CLOSE);
 		}
-		this.panel.getWindowButton(UiWindowButtonType.CLOSE).onClicked.addListener(() => this.close(500));
-		this.panel.onWindowButtonClicked.addListener(eventObject => this.onWindowButtonClicked.fire(EventFactory.createUiPanel_WindowButtonClickedEvent(this.getId(), eventObject.windowButton)));
+		this.panel.getWindowButton(UiWindowButtonType.CLOSE).onClicked.addListener(() => this.close(500, true));
+		this.panel.onWindowButtonClicked.addListener(eventObject => {
+			return this.onWindowButtonClicked.fire({
+				windowButton: eventObject.windowButton
+			});
+		});
 
 		this.setSize(config.width, config.height);
 		this.setModal(config.modal);
@@ -79,69 +87,69 @@ export class UiWindow extends UiComponent<UiWindowConfig> implements UiWindowCom
 		this.setCloseable(config.closeable);
 		this.setCloseOnEscape(config.closeOnEscape);
 		this.setCloseOnClickOutside(config.closeOnClickOutside);
-	}
 
-	protected onAttachedToDom() {
-		if (this.panel) this.panel.attachedToDom = true;
+		const $panelHeading = this.panel.getMainElement().querySelector(":scope > .panel-heading")
+		$panelHeading.addEventListener("mousedown", (e: MouseEvent) => this.handleTitlebarMousedown(e))
+
+		for (let resizer of this.$resizers) {                   
+			resizer.addEventListener("mousedown", (e: MouseEvent) => this.handleResizerMousedown(resizer, e))
+		}
+
+		this.windowResizeListener = () => this.assureInViewPort();
+		window.addEventListener("resize", this.windowResizeListener);
+
+		this.setResizable(this._config.resizable);
 	}
 
+
+
 	public show(animationDuration: number) {
-		this.$main.css({
-			transition: `opacity ${animationDuration}ms`
-		});
-		this.$panelWrapper.css({
-			transition: `box-shadow ${animationDuration}ms, transform ${animationDuration}ms`
-		});
-		this.$main.removeClass("offscreen");
+		document.body.appendChild(this.getMainElement());
+
+		this.$main.classList.remove("hidden");
+		this.$main.classList.add("open");
+		animateCSS(this.$panelWrapper, Constants.ENTRANCE_ANIMATION_CSS_CLASSES[UiEntranceAnimation.ZOOM_IN], animationDuration);
 
 		this.escapeKeyListener = (e) => {
-			if (this.closeOnEscape && e.keyCode === keyCodes.escape) {
-				this.close(500);
+			if (this._config.closeOnEscape && e.keyCode === keyCodes.escape) {
+				this.close(animationDuration, true);
 			}
 		};
 		document.body.addEventListener("keydown", this.escapeKeyListener, {capture: true});
 
 		this.clickOutsideListener = (e) => {
-			if (this.closeOnClickOutside && e.target === this.$main[0]) {
-				this.close(500);
+			if (this._config.closeOnClickOutside && e.target === this.$main) {
+				this.close(animationDuration, true);
 			}
 		};
-		this.$main[0].addEventListener("click", this.clickOutsideListener)
-	}
-
-	public hide(animationDuration: number) {
-		this.$main.css({
-			transition: `opacity ${animationDuration}ms`
-		});
-		this.$panelWrapper.css({
-			transition: `box-shadow ${animationDuration}ms, transform ${animationDuration}ms`
-		});
-		this.$main.addClass("offscreen");
-		this.$main.css({
-			"pointer-events": "none"
-		});
-		this.removeCloseEventListeners();
+		this.$main.addEventListener("click", this.clickOutsideListener)
 	}
 
-	private removeCloseEventListeners() {
+	private removeEventListeners() {
 		if (this.escapeKeyListener) {
-			document.body.removeEventListener("keydown", this.escapeKeyListener, {capture: true})
+			document.body.removeEventListener("keydown", this.escapeKeyListener, {capture: true});
 		}
 		if (this.clickOutsideListener) {
-			this.$main[0].removeEventListener("click", this.clickOutsideListener)
+			this.$main.removeEventListener("click", this.clickOutsideListener);
 		}
+		window.removeEventListener("resize", this.windowResizeListener);
 	}
 
-	public getMainDomElement(): JQuery {
+	public doGetMainElement(): HTMLElement {
 		return this.$main;
 	}
 
-	public setListener(listener: UiWindowListener) {
-		this.listener = listener;
-	}
-
-	public close(animationDuration: number) {
-		this.listener.onWindowClosed(this, animationDuration);
+	public close(animationDuration: number, fireEvent: boolean = false) {
+		this.setMaximized(false);
+		this.$main.classList.remove("open");
+		animateCSS(this.$panelWrapper, Constants.EXIT_ANIMATION_CSS_CLASSES[UiExitAnimation.ZOOM_OUT], animationDuration, () => {
+			this.$main.classList.add("hidden");
+			this.getMainElement().remove();
+		});
+		this.removeEventListeners();
+		if (fireEvent) {
+			this.onClosed.fire({});
+		}
 	}
 
 	public setContent(content: UiComponent) {
@@ -176,16 +184,20 @@ export class UiWindow extends UiComponent<UiWindowConfig> implements UiWindowCom
 		this.panel.setTitle(title);
 	}
 
+	public setBadge(badge: string) {
+		this.panel.setBadge(badge);
+	}
+
 	public setCloseOnClickOutside(closeOnClickOutside: boolean): void {
-		this.closeOnClickOutside = closeOnClickOutside;
+		this._config.closeOnClickOutside = closeOnClickOutside;
 	}
 
 	public setCloseOnEscape(closeOnEscape: boolean): void {
-		this.closeOnEscape = closeOnEscape;
+		this._config.closeOnEscape = closeOnEscape;
 	}
 
 	public setCloseable(closeable: boolean): void {
-		this.closeable = closeable;
+		this._config.closeable = closeable;
 		if (closeable) {
 			this.panel.addWindowButton(UiWindowButtonType.CLOSE);
 		} else {
@@ -193,24 +205,20 @@ export class UiWindow extends UiComponent<UiWindowConfig> implements UiWindowCom
 		}
 	}
 
-	public setModalBackgroundDimmingColor(modalBackgroundDimmingColor: UiColorConfig): void {
-		this.modalBackgroundDimmingColor = modalBackgroundDimmingColor;
-		this.$main.css("background-color", createUiColorCssString(modalBackgroundDimmingColor));
+	public setModalBackgroundDimmingColor(modalBackgroundDimmingColor: string): void {
+		this._config.modalBackgroundDimmingColor = modalBackgroundDimmingColor;
+		this.$main.style.backgroundColor = modalBackgroundDimmingColor;
 	}
 
 	public setModal(modal: boolean) {
-		this.modal = modal;
-		this.$main.toggleClass('modal', this.modal);
-	}
-
-	public isModal() {
-		return this.modal;
+		this._config.modal = modal;
+		this.$main.classList.toggle('modal', modal);
 	}
 
 	public setSize(width: number, height: number): void {
-		this.$panelWrapper.css({
+		css(this.$panelWrapper, {
 			width: width ? width + "px" : "100%",
-			height: height ? height + "px" : "100%"
+			height: height === 0 ? "100%" : height < 0 ? "auto" : height + "px"
 		});
 	}
 
@@ -218,18 +226,152 @@ export class UiWindow extends UiComponent<UiWindowConfig> implements UiWindowCom
 		this.panel.setStretchContent(stretch);
 	}
 
-	public onResize(): void {
-		this.panel.reLayout();
+	public destroy(): void {
+		super.destroy();
+		this.removeEventListeners();
 	}
 
-	public destroy(): void {
-		this.removeCloseEventListeners();
+
+	setWindowButtons(windowButtons: UiWindowButtonType[]): void {
 	}
 
+	private handleTitlebarMousedown(e: MouseEvent) {
+		if (!this._config.movable) {
+			return;
+		}
+		const initialRect = getBoundingPageRect(this.$panelWrapper);
+		const initialMouseX = e.pageX
+		const initialMouseY = e.pageY
+
+		const mousemove = (e: MouseEvent) => {
+			const totalDeltaX = e.pageX - initialMouseX;
+			const totalDeltaY = e.pageY - initialMouseY;
 
+			const viewPortRect = getViewportRect();
 
-	setWindowButtons(windowButtons: UiWindowButtonType[]): void {
+			const minX = this._config.keepInViewport ? viewPortRect.left : Number.NEGATIVE_INFINITY;
+			const maxX = this._config.keepInViewport ? viewPortRect.right - initialRect.width : Number.POSITIVE_INFINITY;
+			const minY = this._config.keepInViewport ? viewPortRect.top : Number.NEGATIVE_INFINITY;
+			const maxY = this._config.keepInViewport ? viewPortRect.bottom - initialRect.height : Number.POSITIVE_INFINITY;
+
+			this.$panelWrapper.style.left = Math.min(maxX, Math.max(minX, initialRect.x + totalDeltaX)) + "px"
+			this.$panelWrapper.style.top = Math.min(maxY, Math.max(minY, initialRect.y + totalDeltaY)) + "px"
+		}
+
+		const mouseup = () => {
+			window.removeEventListener("mousemove", mousemove)
+			window.removeEventListener("mouseup", mouseup)
+		}
+
+		window.addEventListener("mousemove", mousemove)
+		window.addEventListener("mouseup", mouseup)
+	}
+
+	private handleResizerMousedown(resizer: HTMLElement, e: MouseEvent) {
+		if (!this._config.resizable) {
+			return;
+		}
+		const initialRect = getBoundingPageRect(this.$panelWrapper);
+		const initialMouseX = e.pageX
+		const initialMouseY = e.pageY
+
+		const mousemove = (e: MouseEvent) => {
+			const totalDeltaX = e.pageX - initialMouseX;
+			const totalDeltaY = e.pageY - initialMouseY;
+
+			const viewPortRect = getViewportRect();
+
+			if (resizer.classList.contains("t")) {
+				const minYDueToViewPort = this._config.keepInViewport ? viewPortRect.top : Number.NEGATIVE_INFINITY;
+				const maxYDueToMinHeight = initialRect.bottom - this._config.minHeight;
+
+				const newTop = Math.max(minYDueToViewPort, Math.min(maxYDueToMinHeight, initialRect.y + totalDeltaY));
+				const newHeight = Math.max(this._config.minHeight, initialRect.bottom - newTop);
+
+				this.$panelWrapper.style.top = newTop + "px"
+				this.$panelWrapper.style.height = newHeight + "px"
+			}
+			if (resizer.classList.contains("b")) {
+				const maxHeight = this._config.keepInViewport ? viewPortRect.bottom - initialRect.top : Number.POSITIVE_INFINITY;
+				const newHeight = Math.min(maxHeight, Math.max(this._config.minHeight, initialRect.height + totalDeltaY));
+				this.$panelWrapper.style.height = newHeight + "px";
+			}
+			if (resizer.classList.contains("l")) {
+				const minXDueToViewPort = this._config.keepInViewport ? viewPortRect.left : Number.NEGATIVE_INFINITY;
+				const maxXDueToMinWidth = initialRect.right - this._config.minWidth;
+
+				const newLeft = Math.max(minXDueToViewPort, Math.min(maxXDueToMinWidth, initialRect.x + totalDeltaX));
+				const newWidth = Math.max(this._config.minWidth, initialRect.right - newLeft);
+
+				this.$panelWrapper.style.left = newLeft + "px"
+				this.$panelWrapper.style.width = newWidth + "px"
+			}
+			if (resizer.classList.contains("r")) {
+				const maxWidth = this._config.keepInViewport ? viewPortRect.right - initialRect.left : Number.POSITIVE_INFINITY;
+				const newWidth = Math.min(maxWidth, Math.max(this._config.minWidth, initialRect.width + totalDeltaX));
+				this.$panelWrapper.style.width = newWidth + "px";
+			}
+		}
+
+		const mouseup = () => {
+			window.removeEventListener("mousemove", mousemove)
+			window.removeEventListener("mouseup", mouseup)
+		}
+
+		window.addEventListener("mousemove", mousemove)
+		window.addEventListener("mouseup", mouseup)
+	}
+
+	private assureInViewPort() {
+		const windowRect = getBoundingPageRect(this.$panelWrapper);
+		const viewPortRect = getViewportRect();
+
+		if (windowRect.right > viewPortRect.right) {
+			this.$panelWrapper.style.left = viewPortRect.right - windowRect.width + "px";
+		}
+		if (windowRect.bottom > viewPortRect.bottom) {
+			this.$panelWrapper.style.top = viewPortRect.bottom - windowRect.height + "px";
+		}
+	}
+
+	public setResizable(resizable: boolean) {
+		this._config.resizable = resizable;
+		this.$panelWrapper.classList.toggle("resizable", resizable);
 	}
 }
 
 TeamAppsUiComponentRegistry.registerComponentClass("UiWindow", UiWindow);
+
+
+function getBoundingPageRect(element: HTMLElement) {
+	const rect = element.getBoundingClientRect();
+	const scrollLeft = window.scrollX || document.documentElement.scrollLeft;
+	const scrollTop = window.scrollY || document.documentElement.scrollTop;
+
+	return {
+		left: rect.left + scrollLeft,
+		top: rect.top + scrollTop,
+		x: rect.left + scrollLeft,
+		y: rect.top + scrollTop,
+		right: rect.right + scrollLeft,
+		bottom: rect.bottom + scrollTop,
+		width: rect.width,
+		height: rect.height
+	};
+}
+
+function getViewportRect() {
+	const scrollLeft = window.scrollX || document.documentElement.scrollLeft;
+	const scrollTop = window.scrollY || document.documentElement.scrollTop;
+	return {
+		left: scrollLeft,
+		top: scrollTop,
+		x: scrollLeft,
+		y: scrollTop,
+		right: scrollLeft + window.innerWidth,
+		bottom: scrollTop + window.innerHeight,
+		width: window.innerWidth,
+		height: window.innerHeight
+	};
+}
+
diff --git a/teamapps-client/ts/modules/WebWorkerTeamAppsConnection.ts b/teamapps-client/ts/modules/WebWorkerTeamAppsConnection.ts
deleted file mode 100644
index 4e2611b93..000000000
--- a/teamapps-client/ts/modules/WebWorkerTeamAppsConnection.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-import {UiClientInfoConfig} from "../generated/UiClientInfoConfig";
-import {TeamAppsConnection, TeamAppsConnectionListener} from "../shared/TeamAppsConnection";
-
-///<reference path="../custom-declarations/worker-loader.d.ts"/>
-
-export class WebWorkerTeamAppsConnection implements TeamAppsConnection {
-
-	private worker: Worker;
-
-	constructor(webSocketUrl: string, sessionId: string, clientInfo: UiClientInfoConfig, commandHandler: TeamAppsConnectionListener) {
-		// let x = WebpackWorker;
-		// console.log(x);
-		// this.worker = new (WebpackWorker as any)() as Worker; // TODO use webpack to set this path!
-		this.worker = new Worker("/js/communication-worker.js");
-		this.worker.postMessage({webSocketUrl, sessionId, clientInfo});
-
-		this.worker.onmessage = (e: MessageEvent): any => {
-			if (e.data._type === 'onCommand') {
-				commandHandler.executeCommand(e.data.uiCommand);
-			} else if (e.data._type === 'onCommands') {
-				commandHandler.executeCommands(e.data.uiCommands);
-			} else if (e.data._type === 'onConnectionBroken') {
-				commandHandler.onConnectionErrorOrBroken(e.data.reason, e.data.message);
-			} else if (e.data._type === 'onConnectionInitialized') {
-				commandHandler.onConnectionInitialized();
-			} else {
-				console.error("Unknown type of message received from web worker: " + JSON.stringify(e.data));
-			}
-		};
-	}
-
-	sendEvent(event: any): void {
-		this.worker.postMessage({event});
-	}
-
-}
diff --git a/teamapps-client/ts/modules/charting/AbstractUiGraph.ts b/teamapps-client/ts/modules/charting/AbstractUiGraph.ts
new file mode 100644
index 000000000..611ab4a0f
--- /dev/null
+++ b/teamapps-client/ts/modules/charting/AbstractUiGraph.ts
@@ -0,0 +1,200 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+import {ScaleContinuousNumeric, ScaleTime} from "d3-scale";
+import {SVGSelection} from "./Charting";
+import {UiLineChartYScaleZoomMode} from "../../generated/UiLineChartYScaleZoomMode";
+import * as d3 from "d3";
+import {NamespaceLocalObject} from "d3";
+import {UiScaleType} from "../../generated/UiScaleType";
+import {UiGraph} from "./UiGraph";
+import {maxTickIntegerPartLength, YAxis} from "./YAxis";
+import {UiGraphConfig} from "../../generated/UiGraphConfig";
+import {UiGraphDataConfig} from "../../generated/UiGraphDataConfig";
+import * as ulp from "ulp";
+
+export abstract class AbstractUiGraph<C extends UiGraphConfig = UiGraphConfig,
+	D extends UiGraphDataConfig = UiGraphDataConfig>
+	implements UiGraph<C, D> {
+
+	protected config: C;
+
+	protected scaleY: ScaleContinuousNumeric<number, number>;
+	private yAxis: YAxis;
+
+	protected zoomLevelIndex: number;
+	protected scaleX: ScaleTime<number, number>;
+	protected $main: SVGSelection<any>;
+
+	constructor(
+		config: C,
+		protected timeGraphId: string
+	) {
+		this.yAxis = new YAxis({
+			color: config.yAxisColor,
+			label: config.yAxisLabel,
+			maxTickDigits: config.maxTickDigits
+		});
+		this.setConfig(config)
+		this.$main = d3.select(document.createElementNS((d3.namespace("svg:text") as NamespaceLocalObject).space, "g") as SVGGElement)
+			.attr("data-series-id", `${this.timeGraphId}-${this.config.id}`);
+	}
+
+	protected abstract doRedraw(): void;
+
+	public abstract getUncoveredIntervals(zoomLevel: number, interval: [number, number]): [number, number][];
+
+	public abstract markIntervalAsCovered(zoomLevel: number, interval: [number, number]): void;
+
+	public abstract addData(zoomLevel: number, data: D): void;
+
+	public abstract resetData(): void;
+
+	public abstract getYDataBounds(xInterval: [number, number]): [number, number];
+
+	getMainSelection() {
+		return this.$main;
+	}
+
+	public updateZoomX(zoomLevelIndex: number, scaleX: ScaleTime<number, number>) {
+		this.zoomLevelIndex = zoomLevelIndex;
+		this.scaleX = scaleX;
+	}
+
+	public redraw() {
+		let scaleYDomain = this.getScaleYDomain();
+
+		if (scaleYDomain != null && (scaleYDomain.minY !== this.scaleY.domain()[0] || scaleYDomain.maxY !== this.scaleY.domain()[1])) {
+			d3.transition(`${this.timeGraphId}-${this.config.id}-zoomYToDisplayedDomain`)
+				.ease(d3.easeLinear)
+				.duration(300)
+				.tween(`${this.timeGraphId}-${this.config.id}-zoomYToDisplayedDomain`, () => {
+					// create interpolator and do not show nasty floating numbers
+					let intervalInterpolator = d3.interpolateArray(this.scaleY.domain(), [scaleYDomain.minY, scaleYDomain.maxY]);
+					return (t: number) => {
+						this.scaleY.domain(intervalInterpolator(t));
+						this.yAxis.draw();
+						this.doRedraw();
+					}
+				});
+		} else {
+			this.yAxis.draw();
+			this.doRedraw();
+		}
+	}
+
+	private getScaleYDomain() {
+		let minY: number, maxY: number;
+
+		function crossesZero(bound: number, margin: number) {
+			return Math.sign(bound + margin) !== Math.sign(bound);
+		}
+
+		let displayedDataYBounds = this.getYDataBounds(this.getDisplayedIntervalX());
+		displayedDataYBounds = displayedDataYBounds[0] === undefined || displayedDataYBounds[1] === undefined ? [0, 1] : displayedDataYBounds;
+		if (this.config.yScaleZoomMode === UiLineChartYScaleZoomMode.DYNAMIC) {
+			let margin = (displayedDataYBounds[1] - displayedDataYBounds[0]) * .05;
+			minY = crossesZero(displayedDataYBounds[0], -margin) ? displayedDataYBounds[0] : displayedDataYBounds[0] - margin;
+			maxY = crossesZero(displayedDataYBounds[1], margin) ? displayedDataYBounds[1] : displayedDataYBounds[1] + margin;
+		} else if (this.config.yScaleZoomMode === UiLineChartYScaleZoomMode.DYNAMIC_INCLUDING_ZERO) {
+			let margin = (displayedDataYBounds[1] - displayedDataYBounds[0]) * .05;
+			minY = displayedDataYBounds[0] >= 0 ? 0 : displayedDataYBounds[0] - margin;
+			maxY = displayedDataYBounds[1] <= 0 ? 0 : displayedDataYBounds[1] + margin;
+		} else {
+			minY = this.config.intervalY.min;
+			maxY = this.config.intervalY.max;
+		}
+
+		// if we use an auto-scaling zoom mode, we want at least two ticks to have a significant value.
+		if (minY != maxY && (this.config.yScaleZoomMode === UiLineChartYScaleZoomMode.DYNAMIC
+			|| this.config.yScaleZoomMode === UiLineChartYScaleZoomMode.DYNAMIC_INCLUDING_ZERO)) {
+			let numberOfTicks = 3;
+			while (true) {
+				const integerPartLength = maxTickIntegerPartLength(minY, maxY, numberOfTicks);
+				const inc: number = d3.tickIncrement(minY, maxY, numberOfTicks);
+				const numberOfDigitsAddedByTickIncrements = inc < 0 ? Math.ceil(Math.log10(-inc)) : 0;
+				const numberOfSignificantDigits = integerPartLength + numberOfDigitsAddedByTickIncrements;
+				if (integerPartLength >= this.config.maxTickDigits) {
+					break;
+				} else if (numberOfSignificantDigits > this.config.maxTickDigits) {
+					const delta = maxY - minY;
+					let boundaryExpansion = Math.max(delta / 4, 1e-14);
+					const nextMinY = Math.min(minY - boundaryExpansion, ulp.nextDown(minY))
+					const nextMaxY = Math.max(maxY + boundaryExpansion, ulp.nextUp(maxY))
+					console.debug(`Increasing dy from (${minY}:${maxY}) to (${nextMinY}:${nextMaxY})`)
+					minY = nextMinY;
+					maxY = nextMaxY;
+				} else {
+					break;
+				}
+			}
+		}
+
+		return {minY, maxY};
+	}
+
+	private updateYScale(): void {
+		const oldScaleY = this.scaleY;
+		if (this.config.yScaleType === UiScaleType.SYMLOG) {
+			this.scaleY = d3.scaleSymlog();
+		} else if (this.config.yScaleType === UiScaleType.LOG10) {
+			this.scaleY = d3.scaleLog();
+		} else {
+			this.scaleY = d3.scaleLinear();
+		}
+		if (oldScaleY != null) {
+			this.scaleY.range(oldScaleY.range());
+		}
+		this.yAxis.setScale(this.scaleY);
+	}
+
+	setYRange(range: [number, number]) {
+		this.scaleY.range(range);
+		this.yAxis.setScale(this.scaleY);
+	}
+
+	public setConfig(config: C) {
+		this.config = config;
+		this.yAxis.setConfig({
+			color: config.yAxisColor,
+			label: config.yAxisLabel,
+			maxTickDigits: config.maxTickDigits
+		})
+		this.updateYScale();
+	}
+
+	protected getDisplayedIntervalX(): [number, number] {
+		return [+(this.scaleX.domain()[0]), +(this.scaleX.domain()[1])];
+	}
+
+
+	public destroy(): void {
+		this.yAxis.getSelection().remove();
+		this.$main.remove();
+	}
+
+	getConfig() {
+		return this.config;
+	}
+
+	getYAxis(): YAxis {
+		return this.yAxis;
+	}
+
+}
diff --git a/teamapps-client/ts/modules/charting/Charting.ts b/teamapps-client/ts/modules/charting/Charting.ts
new file mode 100644
index 000000000..6c6f3f6db
--- /dev/null
+++ b/teamapps-client/ts/modules/charting/Charting.ts
@@ -0,0 +1,43 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+import {UiScaleType} from "../../generated/UiScaleType";
+import {UiTimeGraph} from "./UiTimeGraph";
+import {UiLineChartCurveType} from "../../generated/UiLineChartCurveType";
+import * as d3 from "d3";
+import {BaseType, Selection} from "d3";
+
+export const CurveTypeToCurveFactory = {
+	[UiLineChartCurveType.LINEAR]: d3.curveLinear,
+	[UiLineChartCurveType.STEP]: d3.curveStep,
+	[UiLineChartCurveType.STEPBEFORE]: d3.curveStepBefore,
+	[UiLineChartCurveType.STEPAFTER]: d3.curveStepAfter,
+	[UiLineChartCurveType.BASIS]: d3.curveBasis,
+	[UiLineChartCurveType.CARDINAL]: d3.curveCardinal,
+	[UiLineChartCurveType.MONOTONE]: d3.curveMonotoneX,
+	[UiLineChartCurveType.CATMULLROM]: d3.curveCatmullRom,
+};
+
+export interface DataPoint {
+	x: number,
+	y: number
+}
+
+export type SVGSelection<DATUM = unknown> = Selection<SVGElement, DATUM, BaseType, undefined>;
+export type SVGGSelection<DATUM = unknown> = Selection<SVGGElement, DATUM, BaseType, undefined>;
diff --git a/teamapps-client/ts/modules/charting/D3Area2.ts b/teamapps-client/ts/modules/charting/D3Area2.ts
new file mode 100644
index 000000000..f6e817555
--- /dev/null
+++ b/teamapps-client/ts/modules/charting/D3Area2.ts
@@ -0,0 +1,121 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+import {CurveFactory, CurveGenerator, curveLinear, line} from "d3-shape";
+import {path, Path} from "d3-path";
+
+type DatumToValue<D, V> = (d: D, i: number, dArr: D[]) => V;
+
+function constant<T>(x: T) {
+	return () => x;
+}
+
+export class D3Area2<D> {
+	private _x0: DatumToValue<D, number> = (_: D) => (_ as any)[0];
+	private _x1: DatumToValue<D, number> = null;
+	private _y0: DatumToValue<D, number> = constant(0);
+	private _y1: DatumToValue<D, number> = (_: D) => (_ as any)[1];
+	private _context: any = null;
+	private _curve: CurveFactory = curveLinear;
+	private _output: CurveGenerator = null;
+
+	public writePath(dataMin: any[], dataMax: any[]) {
+		let buffer: Path;
+		if (this._context == null) {
+			this._output = this._curve(buffer = path());
+		}
+
+		this._output.areaStart();
+		this._output.lineStart();
+		for (let i = 0; i < dataMax.length; i++) {
+			this._output.point(+this._x0(dataMax[i], i, dataMax), +this._y0(dataMax[i], i, dataMax));
+		}
+		this._output.lineEnd();
+		this._output.lineStart();
+		for (let i = dataMin.length - 1; i >= 0; i--) {
+			this._output.point(+this._x1(dataMin[i], i, dataMin), +this._y1(dataMin[i], i, dataMin));
+		}
+		this._output.lineEnd();
+		this._output.areaEnd();
+
+		if (buffer) {
+			return this._output = null, buffer + "" || null;
+		}
+	}
+
+	private arealine() {
+		return line<D>().curve(this._curve).context(this._context);
+	}
+
+	public x(_: DatumToValue<D, number>) {
+		this._x0 = this._x1 = typeof _ === "function" ? _ : constant(+_);
+		return this;
+	};
+
+	public x0(_: DatumToValue<D, number>) {
+		this._x0 = typeof _ === "function" ? _ : constant(+_);
+		return this;
+	};
+
+	public x1(_: DatumToValue<D, number>) {
+		this._x1 = _ == null ? null : typeof _ === "function" ? _ : constant(+_);
+		return this;
+	};
+
+	public y(_: DatumToValue<D, number>) {
+		this._y0 = this._y1 = typeof _ === "function" ? _ : constant(+_);
+		return this;
+	};
+
+	public y0(_: DatumToValue<D, number>) {
+		this._y0 = typeof _ === "function" ? _ : constant(+_);
+		return this;
+	};
+
+	public y1(_: DatumToValue<D, number>) {
+		this._y1 = _ == null ? null : typeof _ === "function" ? _ : constant(+_);
+		return this;
+	};
+
+	public lineX0() {
+		return this.arealine().x(this._x0).y(this._y0);
+	};
+
+	public lineY0 = this.lineX0;
+
+	public lineY1() {
+		return this.arealine().x(this._x0).y(this._y1);
+	};
+
+	public lineX1() {
+		return this.arealine().x(this._x1).y(this._y0);
+	};
+
+	public curve(_: CurveFactory) {
+		this._curve = _;
+		this._context != null && (this._output = this._curve(this._context));
+		return this;
+	};
+
+	public context(_: any) {
+		_ == null ? this._context = this._output = null : this._output = this._curve(this._context = _);
+		return this;
+	};
+
+}
diff --git a/teamapps-client/ts/modules/charting/DataStore.ts b/teamapps-client/ts/modules/charting/DataStore.ts
new file mode 100644
index 000000000..ed8b7b2a6
--- /dev/null
+++ b/teamapps-client/ts/modules/charting/DataStore.ts
@@ -0,0 +1,161 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+import {UiLongIntervalConfig} from "../../generated/UiLongIntervalConfig";
+import {DataPoint} from "./Charting";
+import {UiLineGraphDataPointConfig} from "../../generated/UiLineGraphDataPointConfig";
+import {UiLineGraphDataConfig} from "../../generated/UiLineGraphDataConfig";
+import {UiGraphDataConfig} from "../../generated/UiGraphDataConfig";
+import {UiIncidentGraphDataConfig} from "../../generated/UiIncidentGraphDataConfig";
+import {UiIncidentGraphDataPointConfig} from "../../generated/UiIncidentGraphDataPointConfig";
+import {Interval, IntervalManager} from "../util/IntervalManager";
+
+
+abstract class AbstractDataStore<D extends UiGraphDataConfig> {
+
+	private intervalManagerByZoomLevel: Map<number, IntervalManager> = new Map();
+	private dataObsolete = false;
+
+	public reset(): void {
+		this.dataObsolete = true; // do not reset store's data directly but wait until the new data has been set!
+		this.intervalManagerByZoomLevel.clear();
+	}
+
+	public getUncoveredIntervals(zoomLevel: number, interval: [number, number]): [number, number][] {
+		return this.getIntervalManager(zoomLevel).getUncoveredIntervals(interval);
+	}
+
+	public markIntervalAsCovered(zoomLevel: number, interval: [number, number]): void {
+		this.getIntervalManager(zoomLevel).addInterval(interval);
+	}
+
+	public addData(zoomLevel: number, data: D) {
+		if (this.dataObsolete) {
+			this.doResetData();
+			this.dataObsolete = false;
+		}
+		this.getIntervalManager(zoomLevel).addInterval([data.interval.min, data.interval.max]);
+		this.doAddData(zoomLevel, data);
+	}
+
+	protected abstract doResetData(): void;
+
+	protected abstract doAddData(zoomLevel: number, data: D): void;
+
+	public abstract getData(zoomLevelIndex: number, intervalX: [number, number]): Omit<D, "interval">;
+
+	private getIntervalManager(zoomLevel: number) {
+		if (!this.intervalManagerByZoomLevel.has(zoomLevel)) {
+			this.intervalManagerByZoomLevel.set(zoomLevel, new IntervalManager())
+		}
+		return this.intervalManagerByZoomLevel.get(zoomLevel);
+	}
+}
+
+export class LineGraphDataStore extends AbstractDataStore<UiLineGraphDataConfig> {
+
+	private zoomLevelData: UiLineGraphDataPointConfig[][] = [];
+
+	protected doResetData() {
+		this.zoomLevelData = [];
+	}
+
+	protected doAddData(zoomLevel: number, data: UiLineGraphDataConfig) {
+		this.assureZoomLevelArrayExists(zoomLevel);
+
+		let interval = [data.interval.min, data.interval.max];
+		let zoomLevelData = this.zoomLevelData[zoomLevel];
+		let minOverlappingIndex: number = null;
+		let maxOverlappingIndex: number = null;
+		for (let i = 0; i < zoomLevelData.length; i++) {
+			if (zoomLevelData[i].x >= interval[0] && zoomLevelData[i].x <= interval[1]) {
+				if (minOverlappingIndex == null) {
+					minOverlappingIndex = i;
+				}
+				maxOverlappingIndex = i;
+			}
+		}
+		if (minOverlappingIndex != null && maxOverlappingIndex != null) {
+			zoomLevelData.splice(minOverlappingIndex, maxOverlappingIndex - minOverlappingIndex + 1, ...data.dataPoints);
+		} else {
+			this.zoomLevelData[zoomLevel] = zoomLevelData.concat(data.dataPoints);
+		}
+		this.zoomLevelData[zoomLevel].sort((a, b) => a.x - b.x);
+	}
+
+	public getData(zoomLevelIndex: number, intervalX: [number, number]) {
+		this.assureZoomLevelArrayExists(zoomLevelIndex);
+
+		let i = 0;
+		for (; i < this.zoomLevelData[zoomLevelIndex].length; i++) {
+			if (this.zoomLevelData[zoomLevelIndex][i].x >= intervalX[0]) {
+				break;
+			}
+		}
+		let startIndex = i === 0 ? 0 : i - 1;
+		for (; i < this.zoomLevelData[zoomLevelIndex].length; i++) {
+			if (this.zoomLevelData[zoomLevelIndex][i].x >= intervalX[1]) {
+				break;
+			}
+		}
+		let endIndex = i === this.zoomLevelData[zoomLevelIndex].length ? i : i + 1;
+		return {dataPoints: this.zoomLevelData[zoomLevelIndex].slice(startIndex, endIndex)};
+	}
+
+	private assureZoomLevelArrayExists(zoomLevel: number) {
+		if (this.zoomLevelData.length <= zoomLevel) {
+			let numberOfZoomLevelsToAdd = zoomLevel - this.zoomLevelData.length + 1;
+			for (let i = 0; i < numberOfZoomLevelsToAdd; i++) {
+				this.zoomLevelData.push([])
+			}
+		}
+	}
+}
+
+export class IncidentGraphDataStore extends AbstractDataStore<UiIncidentGraphDataConfig> {
+
+	private zoomLevelData: UiIncidentGraphDataPointConfig[][] = [];
+
+	protected doResetData() {
+		this.zoomLevelData = [];
+	}
+
+	protected doAddData(zoomLevel: number, data: UiIncidentGraphDataConfig) {
+		let interval = [data.interval.min, data.interval.max];
+		this.assureZoomLevelArrayExists(zoomLevel);
+		this.zoomLevelData[zoomLevel] = this.zoomLevelData[zoomLevel].filter(dp => {
+			return !(dp.x2 >= interval[0] && dp.x1 < interval[1])
+		});
+		this.zoomLevelData[zoomLevel].push(...data.dataPoints);
+	}
+
+	public getData(zoomLevelIndex: number, intervalX: [number, number]) {
+		this.assureZoomLevelArrayExists(zoomLevelIndex);
+		return {dataPoints: this.zoomLevelData[zoomLevelIndex].filter(dp => dp.x2 >= intervalX[0] && dp.x1 < intervalX[1])};
+	}
+
+	private assureZoomLevelArrayExists(zoomLevel: number) {
+		if (this.zoomLevelData.length <= zoomLevel) {
+			let numberOfZoomLevelsToAdd = zoomLevel - this.zoomLevelData.length + 1;
+			for (let i = 0; i < numberOfZoomLevelsToAdd; i++) {
+				this.zoomLevelData.push([])
+			}
+		}
+	}
+}
diff --git a/teamapps-client/ts/modules/charting/GraphContext.ts b/teamapps-client/ts/modules/charting/GraphContext.ts
new file mode 100644
index 000000000..d5222fc7d
--- /dev/null
+++ b/teamapps-client/ts/modules/charting/GraphContext.ts
@@ -0,0 +1,28 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+export interface GraphContext {
+	getPopperHandle(): PopperHandle;
+}
+
+export interface PopperHandle {
+	update(referenceElement: Element, content: Element | string): void;
+	hide(): void;
+	destroy(): void;
+}
diff --git a/teamapps-client/ts/modules/charting/TimeGraphPopper.ts b/teamapps-client/ts/modules/charting/TimeGraphPopper.ts
new file mode 100644
index 000000000..c2df3e262
--- /dev/null
+++ b/teamapps-client/ts/modules/charting/TimeGraphPopper.ts
@@ -0,0 +1,116 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+import { createPopper, Instance as Popper } from '@popperjs/core';
+import {animateCSS, Constants, parseHtml} from "../Common";
+import {UiEntranceAnimation} from "../../generated/UiEntranceAnimation";
+
+export class TimeGraphPopper {
+
+	private referenceElement: Element;
+	private popper: Popper;
+	private $popperElement: HTMLElement;
+	private visibilityTimeout: number;
+	private $contentContainer: HTMLElement;
+
+	constructor() {
+		this.$popperElement = parseHtml(`<div class="TimeGraphPopper ta-tooltip hidden" role="tooltip">
+			<div class="ta-tooltip-arrow" x-arrow></div>
+			<div class="ta-tooltip-inner">
+			</div>
+		</div>`);
+		document.body.appendChild(this.$popperElement);
+		this.$contentContainer = this.$popperElement.querySelector<HTMLElement>(":scope .ta-tooltip-inner");
+		this.popper = createPopper(document.body, this.$popperElement, {
+			placement: 'top',
+			modifiers: [
+				{
+					name: "flip",
+					options: {
+						fallbackPlacements: ['bottom', 'right', 'left']
+					}
+				},
+				{
+					name: "preventOverflow"
+				} ,
+				{
+					name: "offset",
+					options: {
+						offset: [0, 8]
+					}
+				},
+				{
+					name: "arrow",
+					options: {
+						element: ".ta-tooltip-arrow", // "[data-popper-arrow]"
+						padding: 10, // 0
+					}
+				}
+			]
+		});
+
+		this.$popperElement.addEventListener("pointerenter", ev => this.setVisible(false, false));
+	}
+
+	public update(referenceElement: Element, content: Element|string) {
+		let oldReferenceElement = this.referenceElement;
+		(this.popper as any).state.elements.reference = referenceElement;
+		this.$contentContainer.innerHTML = "";
+		if (typeof content === "string") {
+			content = parseHtml(content);
+		}
+		this.$contentContainer.append(content);
+		this.setVisible(referenceElement != null && content != null, oldReferenceElement != null && referenceElement != null);
+	}
+
+	private setVisible(visible: boolean, animate = true) {
+		window.clearTimeout(this.visibilityTimeout);
+
+		if (visible) {
+			if (animate) {
+				this.visibilityTimeout = window.setTimeout(() => {
+					let wasHidden = this.$popperElement.classList.contains('hidden');
+					this.$popperElement.classList.remove("hidden");
+					this.popper.update();
+					if (wasHidden) {
+						animateCSS(this.$popperElement, Constants.EXIT_ANIMATION_CSS_CLASSES[UiEntranceAnimation.FADE_IN], 200)
+					}
+				}, 200);
+			} else {
+				this.$popperElement.classList.remove("hidden");
+				this.popper.update();
+			}
+		} else {
+			if (animate) {
+				this.visibilityTimeout = window.setTimeout(() => {
+					this.$popperElement.classList.add("hidden");
+				}, 200);
+			} else {
+				this.$popperElement.classList.add("hidden");
+			}
+		}
+	}
+
+	public destroy() {
+		this.popper.destroy();
+		this.$popperElement.remove();
+	}
+}
+
+
diff --git a/teamapps-client/ts/modules/charting/UiGraph.ts b/teamapps-client/ts/modules/charting/UiGraph.ts
new file mode 100644
index 000000000..3e9d24e8c
--- /dev/null
+++ b/teamapps-client/ts/modules/charting/UiGraph.ts
@@ -0,0 +1,51 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+import {ScaleTime} from "d3-scale";
+import {SVGSelection} from "./Charting";
+import {YAxis} from "./YAxis";
+import {UiGraphDataConfig} from "../../generated/UiGraphDataConfig";
+import {UiLongIntervalConfig} from "../../generated/UiLongIntervalConfig";
+import {UiGraphConfig} from "../../generated/UiGraphConfig";
+
+export interface UiGraph<C extends UiGraphConfig = UiGraphConfig, D extends UiGraphDataConfig = UiGraphDataConfig> {
+
+	setConfig(config: C): void;
+
+	getMainSelection(): SVGSelection<any>;
+
+	updateZoomX(zoomLevelIndex: number, scaleX: ScaleTime<number, number>): void;
+
+	getYAxis(): YAxis | null;
+
+	setYRange(range: [number, number]): void;
+
+	redraw(): void;
+
+	getUncoveredIntervals(zoomLevel: number, interval: [number, number]): [number, number][];
+
+	markIntervalAsCovered(zoomLevel: number, interval: [number, number]): void;
+
+	addData(zoomLevel: number, data: D): void;
+
+	resetData(): void;
+
+	destroy(): void;
+
+}
diff --git a/teamapps-client/ts/modules/charting/UiGraphGroup.ts b/teamapps-client/ts/modules/charting/UiGraphGroup.ts
new file mode 100644
index 000000000..2bdccf1cb
--- /dev/null
+++ b/teamapps-client/ts/modules/charting/UiGraphGroup.ts
@@ -0,0 +1,117 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+import {SVGSelection} from "./Charting";
+import {AbstractUiGraph} from "./AbstractUiGraph";
+import {UiTimeGraph} from "./UiTimeGraph";
+import {ScaleTime} from 'd3';
+import {UiLineChartYScaleZoomMode} from "../../generated/UiLineChartYScaleZoomMode";
+import {UiGraphGroupConfig} from "../../generated/UiGraphGroupConfig";
+import {UiGraphGroupDataConfig} from "../../generated/UiGraphGroupDataConfig";
+import {UiLongIntervalConfig} from "../../generated/UiLongIntervalConfig";
+import * as d3 from "d3";
+import {GraphContext} from "./GraphContext";
+import {IntervalManager} from "../util/IntervalManager";
+
+export class UiGraphGroup extends AbstractUiGraph<UiGraphGroupConfig, UiGraphGroupDataConfig> {
+
+	private $yZeroLine: SVGSelection;
+	private graphs = new Map<String, AbstractUiGraph>();
+
+	constructor(
+		timeGraphId: string,
+		config: UiGraphGroupConfig,
+		private dropShadowFilterId: string,
+		graphContext: GraphContext
+	) {
+		super(config, timeGraphId);
+
+		this.$main.classed("graph-group", true)
+			.attr("data-series-ids", `${this.timeGraphId}-${this.config.id}`);
+		this.initDomNodes();
+
+		this.config.graphs.forEach(graphConfig => {
+			graphConfig.yScaleZoomMode = UiLineChartYScaleZoomMode.FIXED;
+			this.graphs.set(graphConfig.id, UiTimeGraph.createDataDisplay(timeGraphId, graphConfig, dropShadowFilterId, graphContext));
+		})
+
+		this.graphs.forEach(dd => this.$main.node().append(dd.getMainSelection().node()));
+	}
+
+	getUncoveredIntervals(zoomLevel: number, interval: [number, number]): [number, number][] {
+		let uncoveredIntervalManager = new IntervalManager();
+		this.graphs.forEach(graph => uncoveredIntervalManager.addIntervals(graph.getUncoveredIntervals(zoomLevel, interval)));
+		return uncoveredIntervalManager.getCoveredIntervals(); // !!
+	}
+
+	markIntervalAsCovered(zoomLevel: number, interval: [number, number]): void {
+		this.graphs.forEach(graph => graph.markIntervalAsCovered(zoomLevel, interval));
+	}
+
+	addData(zoomLevel: number, data: UiGraphGroupDataConfig): void {
+		for(let [graphId, graphData] of Object.entries(data.graphDataByGraphId)) {
+			this.graphs.get(graphId).addData(zoomLevel, graphData);
+		}
+	}
+
+	public getYDataBounds(xInterval: [number, number]): [number, number] {
+		return d3.extent(Array.of(...this.graphs.values())
+			.flatMap(graph => graph.getYDataBounds(xInterval)));
+	}
+
+	resetData(): void {
+		this.graphs.forEach(g => g.resetData());
+	}
+
+	updateZoomX(zoomLevelIndex: number, scaleX: ScaleTime<number, number>) {
+		this.graphs.forEach(dd => dd.updateZoomX(zoomLevelIndex, scaleX));
+		super.updateZoomX(zoomLevelIndex, scaleX);
+	}
+
+	private initDomNodes() {
+		this.$yZeroLine = this.$main.append<SVGLineElement>("line")
+			.classed("y-zero-line", true);
+	}
+
+	protected doRedraw() {
+		this.$yZeroLine
+			.attr("x1", 0)
+			.attr("y1", this.scaleY(0))
+			.attr("x2", this.scaleX.range()[1])
+			.attr("y2", this.scaleY(0))
+			.attr("stroke", this.config.yAxisColor)
+			.attr("visibility", (this.config.yZeroLineVisible && this.scaleY.domain()[0] !== 0) ? "visible" : "hidden");
+
+		this.graphs.forEach(dd => {
+			dd.getConfig().intervalY = {min: this.scaleY.domain()[0], max: this.scaleY.domain()[1]};
+			dd.redraw()
+		});
+	}
+
+	setYRange(range: [number, number]) {
+		super.setYRange(range);
+		this.graphs.forEach(dd => {
+			dd.setYRange(range);
+		});
+	}
+
+}
+
+
+
diff --git a/teamapps-client/ts/modules/charting/UiHoseGraph.ts b/teamapps-client/ts/modules/charting/UiHoseGraph.ts
new file mode 100644
index 000000000..082f6c8d6
--- /dev/null
+++ b/teamapps-client/ts/modules/charting/UiHoseGraph.ts
@@ -0,0 +1,223 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+import {Line} from "d3-shape";
+import * as d3 from "d3";
+import {CurveTypeToCurveFactory, DataPoint, SVGSelection} from "./Charting";
+import {AbstractUiGraph} from "./AbstractUiGraph";
+import {LineGraphDataStore} from "./DataStore";
+import {D3Area2} from "./D3Area2";
+import {isVisibleColor} from "../Common";
+import {UiHoseGraphConfig} from "../../generated/UiHoseGraphConfig";
+import {UiHoseGraphDataConfig} from "../../generated/UiHoseGraphDataConfig";
+import {UiLongIntervalConfig} from "../../generated/UiLongIntervalConfig";
+import {IntervalManager} from "../util/IntervalManager";
+import {UiLineGraphDataPointConfig} from "../../generated/UiLineGraphDataPointConfig";
+import * as log from "loglevel";
+
+export class UiHoseGraph extends AbstractUiGraph<UiHoseGraphConfig, UiHoseGraphDataConfig> {
+
+	private static logger: log.Logger = log.getLogger("UiHoseGraph");
+
+	private middleLine: Line<DataPoint>;
+	private $middleLine: SVGSelection<any>;
+	private lowerLine: Line<DataPoint>;
+	private $lowerLine: SVGSelection<any>;
+	private upperLine: Line<DataPoint>;
+	private $upperLine: SVGSelection<any>;
+	private area: D3Area2<DataPoint>;
+	private $area: SVGSelection<any>;
+	private $defs: SVGSelection<any>;
+	private $dots: SVGSelection<any>;
+
+	private $yZeroLine: SVGSelection<any>;
+
+	private upperLineDataStore = new LineGraphDataStore();
+	private middleLineDataStore = new LineGraphDataStore();
+	private lowerLineDataStore = new LineGraphDataStore();
+
+	private get dataStores() {
+		return [this.upperLineDataStore, this.middleLineDataStore, this.lowerLineDataStore];
+	}
+
+	constructor(
+		timeGraphId: string,
+		config: UiHoseGraphConfig,
+		private dropShadowFilterId: string
+	) {
+		super(config, timeGraphId);
+		this.$main.classed("hose-graph", true);
+		this.initLinesAndColorScale();
+		this.initDomNodes();
+	}
+
+	getUncoveredIntervals(zoomLevel: number, interval: [number, number]): [number, number][] {
+		let uncoveredIntervalManager = new IntervalManager();
+		this.dataStores.forEach(ds => uncoveredIntervalManager.addIntervals(ds.getUncoveredIntervals(zoomLevel, interval)));
+		return uncoveredIntervalManager.getCoveredIntervals(); // !!
+	}
+
+	markIntervalAsCovered(zoomLevel: number, interval: [number, number]): void {
+		this.dataStores.forEach(ds => ds.markIntervalAsCovered(zoomLevel, interval));
+	}
+
+	public addData(zoomLevel: number, data: UiHoseGraphDataConfig): void {
+		if (data.upperLineData != null) {
+			this.upperLineDataStore.addData(zoomLevel, data.upperLineData);
+		}
+		if (data.middleLineData != null) {
+			this.middleLineDataStore.addData(zoomLevel, data.middleLineData);
+		}
+		if (data.lowerLineData != null) {
+			this.lowerLineDataStore.addData(zoomLevel, data.lowerLineData);
+		}
+	}
+
+	public resetData(): void {
+		this.dataStores.forEach(ds => ds.reset());
+	}
+
+	public getYDataBounds(xInterval: [number, number]): [number, number] {
+		return d3.extent(this.dataStores
+			.map(ds => ds.getData(this.zoomLevelIndex, xInterval).dataPoints)
+			.flat()
+			.map(dataPoint => dataPoint.y));
+	}
+
+	private initLinesAndColorScale() {
+		this.area = new D3Area2<DataPoint>()
+			.curve(CurveTypeToCurveFactory[this.config.graphType]);
+		this.middleLine = d3.line<DataPoint>()
+			.curve(CurveTypeToCurveFactory[this.config.graphType]);
+		this.lowerLine = d3.line<DataPoint>()
+			.curve(CurveTypeToCurveFactory[this.config.graphType]);
+		this.upperLine = d3.line<DataPoint>()
+			.curve(CurveTypeToCurveFactory[this.config.graphType]);
+
+	}
+
+	private initDomNodes() {
+		this.$area = this.$main.append<SVGPathElement>("path")
+			.classed("area", true);
+		this.$middleLine = this.$main.append<SVGPathElement>("path")
+			.classed("line", true);
+		this.$lowerLine = this.$main.append<SVGPathElement>("path")
+			.classed("line", true);
+		this.$upperLine = this.$main.append<SVGPathElement>("path")
+			.classed("line", true);
+
+		this.$yZeroLine = this.$main.append<SVGLineElement>("line")
+			.classed("y-zero-line", true);
+
+		// .style("filter", `url("#${this.dropShadowFilterId}")`);
+		this.$dots = this.$main.append<SVGGElement>("g")
+			.classed("dots", true);
+
+		this.$defs = this.$main.append<SVGDefsElement>("defs")
+			.html(`<pattern id="area-stripe-fill-${this.timeGraphId}-${this.config.id}" class="area-stripe-fill" patternUnits="userSpaceOnUse" width="6" height="6">
+				  <path d="M-1,1 l2,-2 M0,6 l6,-6 M5,7 l2,-2" stroke="${this.config.areaColor ?? "#00000000"}" stroke-width="1"></path>
+				</pattern>`);
+	}
+
+	public doRedraw() {
+		this.$defs.select(".area-stripe-fill path")
+			.attr("stroke", this.config.areaColor ?? "#00000000");
+
+		let areaDataMax: UiLineGraphDataPointConfig[];
+		if (isVisibleColor(this.config.upperLineColor)) {
+			areaDataMax = this.upperLineDataStore.getData(this.zoomLevelIndex, this.getDisplayedIntervalX()).dataPoints;
+		} else {
+			UiHoseGraph.logger.info("NOT drawing upperLine, since line color is invisible!")
+			areaDataMax = [];
+		}
+		let lineData: UiLineGraphDataPointConfig[];
+		if (isVisibleColor(this.config.middleLineColor)) {
+			lineData = this.middleLineDataStore.getData(this.zoomLevelIndex, this.getDisplayedIntervalX()).dataPoints;
+		} else {
+			UiHoseGraph.logger.info("NOT drawing middleLine, since line color is invisible!")
+			lineData = [];
+		}
+		let areaDataMin: UiLineGraphDataPointConfig[];
+		if (isVisibleColor(this.config.lowerLineColor)) {
+			areaDataMin = this.lowerLineDataStore.getData(this.zoomLevelIndex, this.getDisplayedIntervalX()).dataPoints;
+		} else {
+			UiHoseGraph.logger.info("NOT drawing lowerLine, since line color is invisible!")
+			areaDataMin = [];
+		}
+
+		this.middleLine
+			.x(d => this.scaleX(d.x))
+			.y(d => this.scaleY(d.y));
+		this.$middleLine
+			.attr("d", this.middleLine(lineData))
+			.attr("stroke", this.config.middleLineColor);
+
+		this.lowerLine
+			.x(d => this.scaleX(d.x))
+			.y(d => this.scaleY(d.y));
+		this.$lowerLine
+			.attr("d", this.lowerLine(areaDataMin))
+			.attr("stroke", this.config.lowerLineColor);
+
+		this.upperLine
+			.x(d => this.scaleX(d.x))
+			.y(d => this.scaleY(d.y));
+		this.$upperLine
+			.attr("d", this.upperLine(areaDataMax))
+			.attr("stroke", this.config.upperLineColor);
+
+
+		this.area
+			.x(d => {
+				return this.scaleX(d.x)
+			})
+			.y((d, index) => {
+				return this.scaleY(d.y)
+			});
+		this.$area
+			.attr("d", this.area.writePath(areaDataMin, areaDataMax))
+			.attr("fill", this.config.stripedArea ? `url(#area-stripe-fill-${this.timeGraphId}-${this.config.id})`: this.config.areaColor ?? "#00000000");
+
+		let $dotsDataSelection = this.$dots.selectAll<SVGCircleElement, UiHoseGraphDataConfig>("circle.dot")
+			.data(this.config.dataDotRadius > 0 ? lineData : [])
+			.join("circle")
+			.classed("dot", true)
+			.attr("cx", d => this.scaleX(d.x))
+			.attr("cy", d => this.scaleY(d.y))
+			.attr("r", this.config.dataDotRadius);
+		$dotsDataSelection.exit().remove();
+
+		this.$yZeroLine
+			.attr("x1", 0)
+			.attr("y1", this.scaleY(0))
+			.attr("x2", this.scaleX.range()[1])
+			.attr("y2", this.scaleY(0))
+			.attr("stroke", this.config.yAxisColor)
+			.attr("visibility", (this.config.yZeroLineVisible && this.scaleY.domain()[0] !== 0) ? "visible" : "hidden");
+	}
+
+	setConfig(lineFormat: UiHoseGraphConfig) {
+		super.setConfig(lineFormat);
+		this.initLinesAndColorScale();
+	}
+
+}
+
+
+
diff --git a/teamapps-client/ts/modules/charting/UiIncidentGraph.ts b/teamapps-client/ts/modules/charting/UiIncidentGraph.ts
new file mode 100644
index 000000000..131566b5d
--- /dev/null
+++ b/teamapps-client/ts/modules/charting/UiIncidentGraph.ts
@@ -0,0 +1,141 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+import * as d3 from "d3";
+import {GraphContext, PopperHandle} from "./GraphContext";
+import {AbstractUiGraph} from "./AbstractUiGraph";
+import {UiIncidentGraphConfig} from "../../generated/UiIncidentGraphConfig";
+import {UiIncidentGraphDataConfig} from "../../generated/UiIncidentGraphDataConfig";
+import {UiLongIntervalConfig} from "../../generated/UiLongIntervalConfig";
+import {IncidentGraphDataStore} from "./DataStore";
+import {IntervalManager} from "../util/IntervalManager";
+
+export class UiIncidentGraph extends AbstractUiGraph<UiIncidentGraphConfig, UiIncidentGraphDataConfig> {
+
+	private dataStore = new IncidentGraphDataStore();
+	private popperHandle: PopperHandle;
+
+	constructor(
+		timeGraphId: string,
+		config: UiIncidentGraphConfig,
+		private graphContext: GraphContext
+	) {
+		super(config, timeGraphId);
+		this.$main.classed("incident-graph", true);
+		this.popperHandle = graphContext.getPopperHandle();
+	}
+
+	getUncoveredIntervals(zoomLevel: number, interval: [number, number]): [number, number][] {
+		return this.dataStore.getUncoveredIntervals(zoomLevel, interval);
+	}
+
+	markIntervalAsCovered(zoomLevel: number, interval: [number, number]): void {
+		this.dataStore.markIntervalAsCovered(zoomLevel, interval);
+	}
+
+	public addData(zoomLevel: number, data: UiIncidentGraphDataConfig): void {
+		this.dataStore.addData(zoomLevel, data)
+	}
+
+	public resetData(): void {
+		this.dataStore.reset();
+	}
+
+	public getYDataBounds(intervalX: [number, number]): [number, number] {
+		return d3.extent(this.dataStore.getData(this.zoomLevelIndex, intervalX).dataPoints.map(dp => dp.y));
+	}
+
+	doRedraw() {
+		// Three function that change the tooltip when user hover / move / leave a cell
+		const mouseenter = (d: any, i: number, nodes: Element[]) => {
+			d3.select(nodes[i])
+				.style("stroke-width", "2");
+			this.popperHandle.update(nodes[i], d.tooltipHtml);
+		};
+		const mouseleave = (d: any, i: number, nodes: Element[]) => {
+			d3.select(nodes[i])
+				.style("stroke-width", "1");
+			this.popperHandle.hide();
+		};
+
+		const thickness = 10;
+
+		let data = this.dataStore.getData(this.zoomLevelIndex, this.getDisplayedIntervalX());
+
+		this.$main
+			.selectAll("rect.incident-rect")
+			.data(data.dataPoints)
+			.join("rect")
+			.classed("incident-rect", true)
+			.attr("stroke", d => d.color)
+			.attr("stroke-width", 1)
+			.attr("fill", d => {
+				let color = d3.color(d.color);
+				color.opacity = color.opacity / 6;
+				return color.toString();
+			})
+			// .attr("stroke-linecap", "round")
+			.attr("x", d => Math.max(-thickness, this.scaleX(d.x1) - (thickness / 2)))
+			.attr("width", d => {
+				// this whole min max mess is necessary to make the rectangles not get overly large and thereby control where the tooltip
+				// will appear (should be at the middle of the _visible_ portion of the rectangle)
+				const x1 = Math.max(-thickness, this.scaleX(d.x1) - (thickness / 2));
+				const x2 = Math.min(this.scaleX.range()[1] + thickness, this.scaleX(d.x2) - (thickness / 2));
+				return Math.max(0, x2 - x1 + thickness);
+			})
+			.attr("y", d => this.scaleY(d.y) - (thickness / 2))
+			.attr("rx", (thickness / 2))
+			.attr("ry", (thickness / 2))
+			.attr("height", d => thickness)
+			.on("mouseenter", mouseenter)
+			.on("mouseleave", mouseleave);
+
+		this.$main
+			.selectAll("line.incident-line")
+			.data(data.dataPoints)
+			.join("line")
+			.classed("incident-line", true)
+			.attr("stroke", d => d.color)
+			.attr("stroke-width", 1)
+			.attr("stroke-linecap", "round")
+			.attr("x1", d => this.scaleX(d.x1))
+			.attr("x2", d => this.scaleX(d.x2))
+			.attr("y1", d => this.scaleY(d.y))
+			.attr("y2", d => this.scaleY(d.y));
+
+		this.$main
+			.selectAll("circle.incident-dot")
+			.data(data.dataPoints.flatMap(d => [{x: d.x1, y: d.y, color: d.color}, {x: d.x2, y: d.y, color: d.color}]))
+			.join("circle")
+			.classed("incident-dot", true)
+			.attr("fill", d => d.color)
+			.attr("cx", d => this.scaleX(d.x))
+			.attr("cy", d => this.scaleY(d.y))
+			.attr("r", "2");
+	}
+
+
+	destroy() {
+		super.destroy();
+		this.popperHandle.destroy();
+	}
+}
+
+
+
diff --git a/teamapps-client/ts/modules/charting/UiLineGraph.ts b/teamapps-client/ts/modules/charting/UiLineGraph.ts
new file mode 100644
index 000000000..5a61dccb5
--- /dev/null
+++ b/teamapps-client/ts/modules/charting/UiLineGraph.ts
@@ -0,0 +1,162 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+import {Area, Line} from "d3-shape";
+import * as d3 from "d3";
+import {ScaleLinear} from "d3";
+import {CurveTypeToCurveFactory, DataPoint, SVGSelection} from "./Charting";
+import {AbstractUiGraph} from "./AbstractUiGraph";
+import {isVisibleColor} from "../Common";
+import {UiLineGraphDataConfig} from "../../generated/UiLineGraphDataConfig";
+import {UiLineGraphConfig} from "../../generated/UiLineGraphConfig";
+import {UiLongIntervalConfig} from "../../generated/UiLongIntervalConfig";
+import {LineGraphDataStore} from "./DataStore";
+import {UiLineGraphDataPointConfig} from "../../generated/UiLineGraphDataPointConfig";
+
+export class UiLineGraph extends AbstractUiGraph<UiLineGraphConfig, UiLineGraphDataConfig> {
+
+	private line: Line<DataPoint>;
+	private $line: SVGSelection<any>;
+	private area: Area<DataPoint>;
+	private $area: SVGSelection<any>;
+	private $dots: SVGSelection<any>;
+	private $defs: SVGSelection<any>;
+	private colorScale: ScaleLinear<string, string>;
+
+	private $yZeroLine: SVGSelection<any>;
+
+	private dataStore = new LineGraphDataStore();
+
+	constructor(
+		timeGraphId: string,
+		config: UiLineGraphConfig,
+		private dropShadowFilterId: string
+	) {
+		super(config, timeGraphId);
+		this.$main.classed("line-graph", true);
+		this.initLinesAndColorScale();
+		this.initDomNodes();
+	}
+
+	getUncoveredIntervals(zoomLevel: number, interval: [number, number]): [number, number][] {
+		return this.dataStore.getUncoveredIntervals(zoomLevel, interval);
+	}
+
+	markIntervalAsCovered(zoomLevel: number, interval: [number, number]): void {
+		this.dataStore.markIntervalAsCovered(zoomLevel, interval);
+	}
+
+	public addData(zoomLevel: number, data: UiLineGraphDataConfig): void {
+		this.dataStore.addData(zoomLevel, data);
+	}
+
+	public resetData(): void {
+		this.dataStore.reset();
+	}
+
+	public getYDataBounds(xInterval: [number, number]): [number, number] {
+		return d3.extent(this.dataStore.getData(this.zoomLevelIndex, xInterval).dataPoints
+			.map(dataPoint => dataPoint.y));
+	}
+
+	private initDomNodes() {
+		this.$area = this.$main.append<SVGPathElement>("path")
+			.classed("area", true)
+			.attr("fill", `url('#area-gradient-${this.timeGraphId}-${this.config.id}')`);
+		this.$line = this.$main.append<SVGPathElement>("path")
+			.classed("line", true)
+			.attr("stroke", `url('#line-gradient-${this.timeGraphId}-${this.config.id}')`);
+		this.$yZeroLine = this.$main.append<SVGLineElement>("line")
+			.classed("y-zero-line", true);
+
+		// .style("filter", `url("#${this.dropShadowFilterId}")`);
+		this.$dots = this.$main.append<SVGGElement>("g")
+			.classed("dots", true);
+
+		this.$defs = this.$main.append<SVGDefsElement>("defs")
+			.html(`<linearGradient class="line-gradient" id="line-gradient-${this.timeGraphId}-${this.config.id}" x1="0" x2="0" y1="0" y2="100" gradientUnits="userSpaceOnUse">
+	    </linearGradient>
+	    <linearGradient class="area-gradient" id="area-gradient-${this.timeGraphId}-${this.config.id}" x1="0" x2="0" y1="0" y2="100" gradientUnits="userSpaceOnUse">
+	    </linearGradient>`);
+	}
+
+	public doRedraw() {
+		this.colorScale.domain(this.scaleY.domain());
+		this.$defs.select(".line-gradient")
+			.attr("y2", this.scaleY.range()[0])
+			.selectAll("stop")
+			.data([this.config.lineColorScaleMax, this.config.lineColorScaleMin])
+			.join("stop")
+			.attr("stop-color", d => d)
+			.attr("offset", (datum, index) => index);
+		this.$defs.select(".area-gradient")
+			.attr("y2", this.scaleY.range()[0])
+			.selectAll("stop")
+			.data([this.config.areaColorScaleMax, this.config.areaColorScaleMin])
+			.join("stop")
+			.attr("stop-color", d => d)
+			.attr("offset", (datum, index) => index);
+
+		let dataPoints = this.dataStore.getData(this.zoomLevelIndex, this.getDisplayedIntervalX()).dataPoints;
+		this.line
+			.x(d => this.scaleX(d.x))
+			.y(d => this.scaleY(d.y));
+		this.$line.attr("d", this.line(dataPoints));
+
+		if (isVisibleColor(this.config.areaColorScaleMin) || isVisibleColor(this.config.areaColorScaleMax)) {
+			this.area
+				.x(d => this.scaleX(d.x))
+				.y0(this.scaleY.range()[0])
+				.y1(d => this.scaleY(d.y));
+			this.$area.attr("d", this.area(dataPoints));
+		}
+
+		let $dotsDataSelection = this.$dots.selectAll<SVGCircleElement, UiLineGraphDataPointConfig>("circle.dot")
+			.data(this.config.dataDotRadius > 0 ? dataPoints : [])
+			.join("circle")
+			.classed("dot", true)
+			.attr("cx", d => this.scaleX(d.x))
+			.attr("cy", d => this.scaleY(d.y))
+			.attr("r", this.config.dataDotRadius);
+		$dotsDataSelection.exit().remove();
+
+		this.$yZeroLine
+			.attr("x1", 0)
+			.attr("y1", this.scaleY(0))
+			.attr("x2", this.scaleX.range()[1])
+			.attr("y2", this.scaleY(0))
+			.attr("stroke", this.config.yAxisColor)
+			.attr("visibility", (this.config.yZeroLineVisible && this.scaleY.domain()[0] !== 0) ? "visible" : "hidden");
+	}
+
+	setConfig(graphConfig: UiLineGraphConfig) {
+		super.setConfig(graphConfig);
+		this.initLinesAndColorScale();
+	}
+
+	private initLinesAndColorScale() {
+		this.area = d3.area<DataPoint>()
+			.curve(CurveTypeToCurveFactory[this.config.graphType]);
+		this.line = d3.line<DataPoint>()
+			.curve(CurveTypeToCurveFactory[this.config.graphType]);
+		this.colorScale = d3.scaleLinear<string, string>()
+			.range([this.config.lineColorScaleMin, this.config.lineColorScaleMax]);
+	}
+
+}
diff --git a/teamapps-client/ts/modules/charting/UiTimeGraph.ts b/teamapps-client/ts/modules/charting/UiTimeGraph.ts
new file mode 100644
index 000000000..a6233551f
--- /dev/null
+++ b/teamapps-client/ts/modules/charting/UiTimeGraph.ts
@@ -0,0 +1,566 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+
+import {AbstractUiComponent} from "../AbstractUiComponent";
+import {TeamAppsEvent} from "../util/TeamAppsEvent";
+import {TeamAppsUiContext} from "../TeamAppsUiContext";
+import {executeWhenFirstDisplayed} from "../util/ExecuteWhenFirstDisplayed";
+import {TeamAppsUiComponentRegistry} from "../TeamAppsUiComponentRegistry";
+import * as d3 from "d3";
+import {Selection} from "d3-selection";
+import {ScaleTime} from "d3-scale";
+import {bind} from "../util/Bind";
+import {ZoomBehavior, ZoomedElementBaseType} from "d3-zoom";
+import {Axis} from "d3-axis";
+import {generateUUID, parseHtml} from "../Common";
+import {
+	UiTimeGraph_IntervalSelectedEvent,
+	UiTimeGraph_ZoomedEvent,
+	UiTimeGraphCommandHandler,
+	UiTimeGraphConfig,
+	UiTimeGraphEventSource
+} from "../../generated/UiTimeGraphConfig";
+import {createUiLongIntervalConfig, UiLongIntervalConfig} from "../../generated/UiLongIntervalConfig";
+import {BrushBehavior} from "d3-brush";
+import {debouncedMethod, DebounceMode} from "../util/debounce";
+import {UiLineChartMouseScrollZoomPanMode} from "../../generated/UiLineChartMouseScrollZoomPanMode";
+import {UiTimeChartZoomLevelConfig} from "../../generated/UiTimeChartZoomLevelConfig";
+import {UiLineGraph} from "./UiLineGraph";
+import {UiHoseGraph} from "./UiHoseGraph";
+import {UiGraphGroup} from "./UiGraphGroup";
+import {DateTime} from 'luxon';
+import {scaleZoned} from "d3-luxon";
+import {SVGGSelection, SVGSelection} from "./Charting";
+import {UiGraph} from "./UiGraph";
+import {UiIncidentGraph} from "./UiIncidentGraph";
+import {TimeGraphPopper} from "./TimeGraphPopper";
+import {UiGraphDataConfig} from "../../generated/UiGraphDataConfig";
+import {UiGraphConfig} from "../../generated/UiGraphConfig";
+import {AbstractUiGraph} from "./AbstractUiGraph";
+import {GraphContext, PopperHandle} from "./GraphContext";
+import {throttledMethod} from "../util/throttle";
+
+export class UiTimeGraph extends AbstractUiComponent<UiTimeGraphConfig> implements UiTimeGraphCommandHandler, UiTimeGraphEventSource {
+
+	public readonly onIntervalSelected: TeamAppsEvent<UiTimeGraph_IntervalSelectedEvent> = new TeamAppsEvent<UiTimeGraph_IntervalSelectedEvent>();
+	public readonly onZoomed: TeamAppsEvent<UiTimeGraph_ZoomedEvent> = new TeamAppsEvent<UiTimeGraph_ZoomedEvent>();
+
+	public static readonly LOGSCALE_MIN_Y = 0.5;
+	public static readonly DROP_SHADOW_ID = "drop-shadow";
+
+	private mouseScrollZoomPanMode: UiLineChartMouseScrollZoomPanMode;
+	private intervalX: UiLongIntervalConfig;
+	private maxPixelsBetweenDataPoints: number;
+
+	private graphById: { [id: string]: UiGraph } = {};
+
+	private $main: HTMLElement;
+
+	private $svg: Selection<SVGSVGElement, {}, null, undefined>;
+	private $rootG: SVGSelection<any>;
+	private $dropShadowFilter: SVGSelection<any>;
+	private $clipPath: SVGSelection<any>;
+
+	private scaleX: ScaleTime<number, number>;
+
+	private dropShadowFilterId: string;
+
+	private margin = {top: 20, right: 15, bottom: 25};
+	private zoom: ZoomBehavior<ZoomedElementBaseType, any>;
+	private xAxis: Axis<Date | number | { valueOf(): number }>;
+	private $xAxis: SVGSelection<any>;
+	private $horizontalPanRect: SVGSelection<any>;
+	private brush: BrushBehavior<number>;
+	private $brush: SVGGSelection<number>;
+	private $graphClipContainer: SVGGSelection<any>;
+	private xSelection: UiLongIntervalConfig;
+	private zoomLevels: UiTimeChartZoomLevelConfig[];
+	private $yAxisContainer: SVGSelection<any>;
+
+	private lastDrawableWidth: number = 0;
+
+	private eventsPopper: TimeGraphPopper = new TimeGraphPopper();
+	private graphContext: GraphContext;
+
+	get drawableWidth() {
+		return this.getWidth() - this.marginLeft - this.margin.right
+	}
+
+	private get drawableHeight() {
+		return this.getHeight() - this.margin.top - this.margin.bottom
+	}
+
+	private get marginLeft() {
+		let marginLeft = this.getAllSeries().reduce((sum, s) => sum + (s.getYAxis()?.getWidth() ?? 0), 0);return marginLeft;
+	}
+
+	constructor(config: UiTimeGraphConfig, context: TeamAppsUiContext) {
+		super(config, context);
+
+		const me = this;
+		this.graphContext = {
+			getPopperHandle() {
+				return {
+					update(referenceElement: Element, content: (Element | string)): void {
+						me.eventsPopper.update(referenceElement, content);
+					},
+					hide(): void {
+						me.eventsPopper.update(null, null);
+					},
+					destroy(): void {
+						me.eventsPopper.update(null, null);
+					}
+				} as PopperHandle;
+			}
+		}
+
+		this.zoomLevels = config.zoomLevels;
+		this.maxPixelsBetweenDataPoints = config.maxPixelsBetweenDataPoints;
+
+		this.$main = parseHtml('<div class="UiTimeGraph" id="' + this.getId() + '">');
+
+		this.scaleX = scaleZoned(config.timeZoneId, 1); // TODO first day of week...
+
+		this.$svg = d3.select(this.$main)
+			.append<SVGSVGElement>("svg");
+		this.$rootG = this.$svg
+			.append<SVGGElement>("g");
+
+		this.setIntervalX(config.intervalX);
+
+		this.$xAxis = this.$rootG.append<SVGGElement>("g")
+			.classed("axis", true)
+			.classed("x-axis", true);
+		this.$horizontalPanRect = this.$xAxis.append<SVGRectElement>("rect")
+			.classed("horizontal-pan-rect", true)
+			.attr("width", "100%")
+			.attr("height", 20);
+		let x = 0;
+		const panZoom = d3.zoom()
+			.scaleExtent([1, 1])
+			.on("zoom", () => {
+				const zoomTransform = d3.zoomTransform(this.$xAxis.node());
+				const zoomTransform2 = d3.zoomTransform(this.$graphClipContainer.node());
+				this.zoom.translateBy(this.$graphClipContainer, (zoomTransform.x - x) / zoomTransform2.k, 0);
+				x = zoomTransform.x;
+				this.redraw();
+			});
+		this.$xAxis.call(panZoom);
+		this.xAxis = d3.axisBottom(this.scaleX);
+
+		const formatMillisecond = (dateTime: DateTime) => dateTime.toFormat(".SSS"),
+			formatSecond = (dateTime: DateTime) => dateTime.toFormat(":ss"),
+			formatMinute = (dateTime: DateTime) => dateTime.toLocaleString({hour: "2-digit", minute: "2-digit"}),
+			formatHour = (dateTime: DateTime) => dateTime.toLocaleString({hour: "2-digit", minute: "2-digit"}),
+			formatDay = (dateTime: DateTime) => dateTime.toLocaleString({day: "2-digit", month: "2-digit"}),
+			formatMonth = (dateTime: DateTime) => dateTime.toFormat("LLL"),
+			formatYear = (dateTime: DateTime) => dateTime.toFormat("yyyy");
+
+		const multiFormat = (date: Date) => {
+			let dateTime = DateTime.fromJSDate(date).setZone(this._config.timeZoneId);
+			let formatter = dateTime.startOf("second") < dateTime ? formatMillisecond
+				: dateTime.startOf("minute") < dateTime ? formatSecond
+					: dateTime.startOf("hour") < dateTime ? formatMinute
+						: dateTime.startOf("day") < dateTime ? formatHour
+							: dateTime.startOf("month") < dateTime ? formatDay
+								: dateTime.startOf("year") < dateTime ? formatMonth
+									: formatYear;
+			return formatter(dateTime.setLocale(this._config.locale));
+		}
+
+		this.xAxis.tickFormat(multiFormat);
+
+		this.$yAxisContainer = this.$rootG.append<SVGGElement>("g")
+			.classed("y-axis-container", true);
+		this.dropShadowFilterId = `${UiTimeGraph.DROP_SHADOW_ID}-${this.getId()}`;
+		let $defs = this.$svg.append<SVGDefsElement>("defs")
+			.html(navigator.vendor.indexOf("Apple") === -1 ? `<filter id="${this.dropShadowFilterId}" y="-50">
+	        <feGaussianBlur in="SourceAlpha" stdDeviation="1.5" result="blur"></feGaussianBlur>
+	        <feComponentTransfer in="blur" result="fadedBlur">
+	            <feFuncA type="linear" slope="0.3"></feFuncA>
+	        </feComponentTransfer>
+	        <feOffset in="fadedBlur" dx="0.7" dy="1.5" result="offsetBlur"></feOffset>
+	        <feMerge>
+	            <feMergeNode in="offsetBlur"></feMergeNode>
+	            <feMergeNode in="SourceGraphic"></feMergeNode>
+	        </feMerge>
+	    </filter>` : '');
+		this.$dropShadowFilter = $defs.select(`#${this.dropShadowFilterId}`);
+		let clipPathId = this.getId() + "-clipping-path-" + generateUUID();
+		this.$clipPath = $defs.append("clipPath")
+			.attr("id", clipPathId)
+			.append("rect")
+			.attr("y", -50);
+
+		this.$graphClipContainer = this.$rootG.append<SVGGElement>("g")
+			.classed("graph-clipping-container", true)
+			.attr("clip-path", `url('#${clipPathId}')`);
+
+		this.brush = d3.brushX<number>()
+			.extent([[0, 0], [100, 100] /*provisional values!*/])
+			.on("end", this.handleBrushSelection);
+		this.$brush = this.$graphClipContainer.append<SVGGElement>("g")
+			.classed("brush", true)
+			.call(this.brush);
+
+		this.zoom = d3.zoom()
+			.scaleExtent([1, this.calculateMaxZoomFactor()])
+			.on("zoom", () => {
+				this.redraw();
+				this.fireUiZoomEvent();
+			});
+		this.setMouseScrollZoomPanMode(config.mouseScrollZoomPanMode);
+
+		config.graphs.forEach(line => {
+			this.graphById[line.id] = this.createGraph(line);
+		});
+
+	}
+
+	zoomTo(intervalX: UiLongIntervalConfig): void {
+		if (intervalX.min < this.intervalX.min) {
+			intervalX.min = this.intervalX.min;
+		}
+		if (intervalX.min > this.intervalX.max) {
+			intervalX.min = this.intervalX.max - 1;
+		}
+		if (intervalX.max < this.intervalX.min) {
+			intervalX.max = this.intervalX.min + 1;
+		}
+		if (intervalX.max > this.intervalX.max) {
+			intervalX.max = this.intervalX.max;
+		}
+		let k = (this.intervalX.max - this.intervalX.min) / (intervalX.max - intervalX.min);
+		this.zoom.transform(this.$graphClipContainer, d3.zoomIdentity.scale(k).translate(-this.scaleX(intervalX.min), 0));
+	}
+
+	private createGraph(lineFormat: UiGraphConfig): AbstractUiGraph {
+		let display = UiTimeGraph.createDataDisplay(this._config.id, lineFormat, this.dropShadowFilterId, this.graphContext);
+		this.$graphClipContainer.node().appendChild(display.getMainSelection().node());
+		display.setYRange([this.drawableHeight, 0]);
+		if (display.getYAxis() != null) {
+			this.$yAxisContainer.node().appendChild(display.getYAxis().getSelection().node());
+		}
+		return display;
+	}
+
+	public static createDataDisplay(timeGraphId: string, graphConfig: UiGraphConfig, dropShadowFilterId: string, graphContext: GraphContext) {
+		let display: AbstractUiGraph;
+		if (graphConfig._type === 'UiLineGraph') {
+			display = new UiLineGraph(timeGraphId, graphConfig, dropShadowFilterId);
+		} else if (graphConfig._type === 'UiHoseGraph') {
+			display = new UiHoseGraph(timeGraphId, graphConfig, dropShadowFilterId);
+		} else if (graphConfig._type === 'UiIncidentGraph') {
+			display = new UiIncidentGraph(timeGraphId, graphConfig, graphContext);
+		} else if (graphConfig._type === 'UiGraphGroup') {
+			display = new UiGraphGroup(timeGraphId, graphConfig, dropShadowFilterId, graphContext);
+		}
+		return display;
+	}
+
+	getTransformedScaleX(): ScaleTime<number, number> {
+		let zoomTransform = d3.zoomTransform(this.$graphClipContainer.node());
+		return zoomTransform.rescaleX(this.scaleX as any);
+	}
+
+	@executeWhenFirstDisplayed()
+	@throttledMethod(200)
+	private redraw() {
+		if (this.getWidth() === 0 || this.getHeight() === 0) {
+			return;
+		}
+		this.lastDrawableWidth = this.drawableWidth;
+
+		this.$rootG.attr("transform", `translate(${this.marginLeft},${this.margin.top})`);
+
+		let left = 0;
+		this.getAllSeries().forEach(s => {
+			s.getYAxis()?.getSelection()?.attr("transform", `translate(${-left},0)`);
+			left += s.getYAxis()?.getWidth() ?? 0;
+		});
+
+		let transformedScaleX = this.getTransformedScaleX();
+
+		this.$xAxis.call(this.xAxis.scale(transformedScaleX));
+
+		let domain = this.restrictDomainXToConfiguredInterval([+transformedScaleX.domain()[0], +transformedScaleX.domain()[1]]);
+
+		const zoomLevel = this.getCurrentZoomLevel();
+		// this.logger.debug("millisecondsPerPixel: " + millisecondsPerPixel + " zoomLevel: " + zoomLevel + " at scale: " + zoomTransform.k);
+
+
+		let uncoveredIntervalsByGraphId: { [graphId: string]: UiLongIntervalConfig[] } = {};
+		for (let [id, graph] of Object.entries(this.graphById)) {
+			let uncoveredIntervals = graph.getUncoveredIntervals(zoomLevel, [domain[0], domain[1]]);
+			uncoveredIntervals = uncoveredIntervals
+				.filter(i => (i[0] < i[1])) // remove empty intervals
+				.filter(i => !(i[0] == null || isNaN(i[0]) || i[1] == null || isNaN(i[1]))); // invalid intervals
+
+			if (uncoveredIntervals.length > 0) {
+				uncoveredIntervalsByGraphId[id] = uncoveredIntervals.map(i => createUiLongIntervalConfig(i[0], i[1]));
+				uncoveredIntervals.forEach(i => graph.markIntervalAsCovered(zoomLevel, i));
+			}
+		}
+		if (Object.keys(uncoveredIntervalsByGraphId).length > 0) {
+			this.logger.debug("firing onDataNeeded: " + uncoveredIntervalsByGraphId);
+			this.onZoomed.fire({
+				zoomLevelIndex: zoomLevel,
+				millisecondsPerPixel: this.getMillisecondsPerPixel(),
+				neededIntervalsByGraphId: uncoveredIntervalsByGraphId,
+				displayedInterval: createUiLongIntervalConfig(domain[0], domain[1])
+			});
+		}
+
+		if (this.xSelection) {
+			let brushX1 = Math.max(-10, transformedScaleX(this.xSelection.min));
+			let brushX2 = Math.min(this.drawableWidth + 10, transformedScaleX(this.xSelection.max));
+			if (brushX2 < 0 || brushX1 > this.drawableWidth) {
+				this.brush.move(this.$brush, null);
+			} else {
+				this.brush.move(this.$brush, [brushX1, brushX2]);
+			}
+		} else {
+			this.brush.move(this.$brush, null);
+		}
+
+		this.getAllSeries().forEach(series => {
+			series.updateZoomX(this.getCurrentZoomLevel(), this.getTransformedScaleX());
+			series.redraw();
+		});
+	}
+
+	private restrictDomainXToConfiguredInterval(domain: [number, number]) {
+		return [Math.max(this.intervalX.min, +(domain[0])), Math.min(this.intervalX.max, +(domain[1]))];
+	}
+
+	getCurrentZoomLevel() {
+		let transformedScaleX = this.getTransformedScaleX();
+		let domain = this.restrictDomainXToConfiguredInterval([+transformedScaleX.domain()[0], +transformedScaleX.domain()[1]]);
+
+		const millisecondsPerPixel = (domain[1] - domain[0]) / this.drawableWidth;
+		let sortedZoomLevels = this.getSortedZoomLevels();
+		let zoomLevelToApply = sortedZoomLevels
+			.filter(indexedZoomLevel => {
+				let minMillisecondsPerPixels = indexedZoomLevel.zoomLevel.approximateMillisecondsPerDataPoint / this.maxPixelsBetweenDataPoints;
+				return minMillisecondsPerPixels <= millisecondsPerPixel;
+			})[0] || sortedZoomLevels[sortedZoomLevels.length - 1];
+		return zoomLevelToApply.index;
+	}
+
+	private getMillisecondsPerPixel() {
+		let transformedScaleX = this.getTransformedScaleX();
+		let domain = this.restrictDomainXToConfiguredInterval([+transformedScaleX.domain()[0], +transformedScaleX.domain()[1]]);
+		return (domain[1] - domain[0]) / this.drawableWidth;
+	}
+
+	private getSortedZoomLevels() {
+		return this.zoomLevels
+			.map((zoomLevel, index) => {
+				return {index, zoomLevel}
+			})
+			.sort((z1, z2) => z2.zoomLevel.approximateMillisecondsPerDataPoint - z1.zoomLevel.approximateMillisecondsPerDataPoint);
+	}
+
+	@bind
+	private handleBrushSelection() {
+		let transformedScaleX = this.getTransformedScaleX();
+
+		if (d3.event.sourceEvent == null || d3.event.sourceEvent.type === "zoom") {
+			return;  // handle only user-triggered brush changes!
+		}
+		let brushSelection = d3.brushSelection(this.$brush.node());
+		if (brushSelection != null) {
+			this.xSelection = createUiLongIntervalConfig(+transformedScaleX.invert(brushSelection[0] as number), +transformedScaleX.invert(brushSelection[1] as number));
+			this.onIntervalSelected.fire({
+				intervalX: this.xSelection
+			});
+		} else {
+			this.xSelection = null;
+			this.onIntervalSelected.fire({
+				intervalX: null
+			});
+		}
+	}
+
+	public onResize(): void {
+		if (this.getWidth() === 0 && this.getHeight() === 0) {
+			return;
+		}
+
+		this.scaleX.range([0, this.drawableWidth]);
+
+		// adjust the translation value of the zoom transformation, so the displayed interval stays the same despite the resize!
+		if (this.lastDrawableWidth != null && this.lastDrawableWidth != this.drawableWidth) {
+			const zoomTransform = d3.zoomTransform(this.$graphClipContainer.node());
+			const newTranslateX = zoomTransform.x * this.drawableWidth / this.lastDrawableWidth;
+			if (!isNaN(newTranslateX)) {
+				this.zoom.transform(this.$graphClipContainer, d3.zoomIdentity.translate(newTranslateX, 0).scale(zoomTransform.k));
+			}
+		}
+
+		this.getAllSeries().forEach(s => s.setYRange([this.drawableHeight, 0]));
+		this.updateZoomExtents();
+
+		this.$xAxis.attr("transform", "translate(0," + this.drawableHeight + ")");
+
+		this.$dropShadowFilter.attr("width", this.drawableWidth)
+			.attr("height", this.getHeight() + 100);
+		this.$clipPath.attr("width", this.drawableWidth)
+			.attr("height", this.getHeight() + 100);
+
+		this.brush.extent([[0, -5], [this.drawableWidth, this.drawableHeight]]);
+		this.$brush.call(this.brush); // update size...
+
+		this.redraw();
+	}
+
+	private updateZoomExtents() {
+		if (this.zoom == null) { // not yet initialized
+			return;
+		}
+		this.zoom
+			.translateExtent([[0, -Infinity], [this.getWidth() /*zoom is attached to $svg, remember!*/, Infinity]])
+			.scaleExtent([1, this.calculateMaxZoomFactor()]);
+	}
+
+	private getAllSeries() {
+		return Object.keys(this.graphById).map(id => this.graphById[id]);
+	}
+
+	addData(zoomLevel: number, data: { [graphId: string]: UiGraphDataConfig }): void {
+		for (const [graphId, graphData] of Object.entries(data)) {
+			let graph = this.graphById[graphId];
+			if (graph != null) {
+				graph.addData(zoomLevel, graphData);
+			}
+		}
+		this.redraw();
+	}
+
+	resetAllData(intervalX: UiLongIntervalConfig, newZoomLevels: UiTimeChartZoomLevelConfig[]): void {
+		this.setIntervalX(intervalX);
+		this.zoomLevels = newZoomLevels;
+		Object.values(this.graphById).forEach(g => g.resetData());
+		this.redraw();
+	}
+
+	resetGraphData(graphId: string): void {
+		this.graphById[graphId]?.resetData();
+		this.redraw();
+	}
+
+	setIntervalX(intervalX: UiLongIntervalConfig): void {
+		this.intervalX = intervalX;
+		this.updateZoomExtents();
+		this.scaleX.domain([this.intervalX.min, this.intervalX.max]);
+	}
+
+	setMouseScrollZoomPanMode(mouseScrollZoomPanMode: UiLineChartMouseScrollZoomPanMode): void {
+		this.mouseScrollZoomPanMode = mouseScrollZoomPanMode;
+
+		this.$graphClipContainer.on('.zoom', null);
+		this.$graphClipContainer.call(this.zoom);
+
+		let originalZoomWeelHandler = this.$graphClipContainer.on("wheel.zoom");
+		let me = this;
+		this.$graphClipContainer.on("wheel.zoom", function () {
+			if (me.mouseScrollZoomPanMode === UiLineChartMouseScrollZoomPanMode.DISABLED) {
+				return;
+			} else if (me.mouseScrollZoomPanMode === UiLineChartMouseScrollZoomPanMode.WITH_MODIFIER_KEY && !(<MouseEvent>d3.event).ctrlKey && !(<MouseEvent>d3.event).altKey && !(<MouseEvent>d3.event).shiftKey && !(<MouseEvent>d3.event).metaKey) {
+				return;
+			}
+			originalZoomWeelHandler.apply(this, arguments);
+			me.zoom.translateBy(me.$graphClipContainer, -1 * d3.event.deltaX / d3.zoomTransform(me.$graphClipContainer.node()).k / 2, 0);
+			d3.event.preventDefault(); // prevent MacOS' swipe pages back and forward
+		});
+	}
+
+	@debouncedMethod(500, DebounceMode.LATER)
+	private fireUiZoomEvent() {
+		let transformedScaleX = this.getTransformedScaleX();
+		let domain = transformedScaleX.domain();
+		let currentZoomLevel = this.getCurrentZoomLevel();
+		this.onZoomed.fire({
+			millisecondsPerPixel: this.getMillisecondsPerPixel(),
+			displayedInterval: createUiLongIntervalConfig(+domain[0], +domain[1]),
+			zoomLevelIndex: currentZoomLevel,
+			neededIntervalsByGraphId: null
+		});
+	}
+
+	setSelectedInterval(intervalX: UiLongIntervalConfig): void {
+		this.xSelection = intervalX;
+		this.redraw();
+	}
+
+	setMaxPixelsBetweenDataPoints(maxPixelsBetweenDataPoints: number): void {
+		this.maxPixelsBetweenDataPoints = maxPixelsBetweenDataPoints;
+		this.updateZoomExtents();
+		this.redraw();
+	}
+
+	doGetMainElement(): HTMLElement {
+		return this.$main;
+	}
+
+	private calculateMaxZoomFactor(): number {
+		if (this.getWidth() === 0 || this.getHeight() === 0) {
+			return 1;
+		}
+
+		let displayedMilliseconds = this.intervalX.max - this.intervalX.min;
+		let sortedZoomLevels = this.getSortedZoomLevels();
+		let highestZoomLevelApproximateMillisPerDataPoint = sortedZoomLevels[sortedZoomLevels.length - 1].zoomLevel.approximateMillisecondsPerDataPoint;
+
+		return this.maxPixelsBetweenDataPoints * displayedMilliseconds / (this.drawableWidth * highestZoomLevelApproximateMillisPerDataPoint);
+	}
+
+	setGraphs(graphs: UiGraphConfig[]) {
+		graphs.forEach(lineConfig => {
+			let existingSeries = this.graphById[lineConfig.id];
+			if (existingSeries) {
+				existingSeries.setConfig(lineConfig);
+			} else {
+				this.graphById[lineConfig.id] = this.createGraph(lineConfig);
+			}
+		});
+		let lineConfigsById = graphs.reduce((previousValue, currentValue) => (previousValue[currentValue.id] = previousValue) && previousValue, {} as { [id: string]: UiGraphConfig });
+		Object.keys(this.graphById).forEach(lineId => {
+			if (!lineConfigsById[lineId]) {
+				this.graphById[lineId].destroy();
+				delete this.graphById[lineId];
+			}
+		});
+		this.onResize();
+	}
+
+	addOrUpdateGraph(graph: UiGraphConfig) {
+		let series = this.graphById[graph.id];
+		if (series) {
+			series.setConfig(graph);
+		} else {
+			this.graphById[graph.id] = this.createGraph(graph);
+		}
+		this.onResize();
+	}
+}
+
+
+TeamAppsUiComponentRegistry.registerComponentClass("UiTimeGraph", UiTimeGraph);
diff --git a/teamapps-client/ts/modules/charting/YAxis.ts b/teamapps-client/ts/modules/charting/YAxis.ts
new file mode 100644
index 000000000..a8bbea6f5
--- /dev/null
+++ b/teamapps-client/ts/modules/charting/YAxis.ts
@@ -0,0 +1,148 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+import {Axis, NamespaceLocalObject} from "d3";
+import {SVGSelection} from "./Charting";
+import {ScaleContinuousNumeric, ScaleLogarithmic} from "d3-scale";
+import d3 = require("d3");
+
+function isLogScale(scale: ScaleContinuousNumeric<unknown, unknown>): scale is ScaleLogarithmic<unknown, unknown> {
+	return typeof ((scale as any).base) === "function"
+		|| typeof ((scale as any).constant) === "function";
+}
+
+interface YAxisConfig {
+	color: string,
+	label: string,
+	maxTickDigits: number
+}
+
+export class YAxis {
+
+	private $axis: SVGSelection<any>;
+	private $label: SVGSelection<SVGTextElement>;
+	private axis: Axis<number | { valueOf(): number }>;
+	private scale: ScaleContinuousNumeric<number, number>;
+
+	constructor(private config: YAxisConfig) {
+		this.$axis = d3.select(document.createElementNS((d3.namespace("svg:text") as NamespaceLocalObject).space, "g") as SVGGElement)
+			.classed("axis", true)
+			.classed("y-axis", true);
+		this.$label = this.$axis.append<SVGTextElement>("text")
+			.classed("label", true)
+			.attr("x", 0)
+			.attr("dy", -5)
+			.attr("fill", "currentColor");
+		this.scale = d3.scaleLinear(); // will be replaced...
+		this.axis = d3.axisLeft(this.scale);
+	}
+
+	setConfig(config: YAxisConfig) {
+		this.config = config;
+		this.draw();
+	}
+
+	getSelection(): SVGSelection<any> {
+		return this.$axis;
+	}
+
+	getWidth(): number {
+		let fontSize = parseFloat(getComputedStyle(this.$axis.node()).fontSize);
+		return 10 + (this.config.maxTickDigits + 1) * .6 * fontSize;
+	}
+
+	setScale(scaleY: ScaleContinuousNumeric<number, number>) {
+		this.scale = scaleY;
+		// Note that the scale is dynamic. the reference to scaleY is set, not its values, so changes to scaleY (e.g. for animations)
+		// have an effect on the axis!
+		this.axis.scale(scaleY);
+		this.updateTickFormat();
+	}
+
+	public draw() {
+		this.updateTickFormat();
+
+		this.$label.text(this.config.label)
+		this.$axis.call(this.axis);
+
+		let $ticks = this.$axis.node().querySelectorAll('.tick');
+		for (let i = 0; i < $ticks.length; i++) {
+			let $text: SVGTextElement = $ticks[i].querySelector("text");
+			let querySelector: any = $ticks[i].querySelector('line');
+			if ($text.innerHTML === '') {
+				querySelector.setAttribute("opacity", '.3');
+			} else {
+				querySelector.setAttribute("opacity", '1');
+			}
+		}
+
+		this.$axis.style("color", this.config.color);
+	}
+
+	private updateTickFormat() {
+		const tickFormat = d3.format(`-,.${this.config.maxTickDigits}~r`);
+		const largeNumberTickFormat = d3.format(`-,.${this.config.maxTickDigits}~s`);
+
+		let availableHeight = Math.abs(this.scale.range()[1] - this.scale.range()[0]);
+		let minY = this.scale.domain()[0];
+		let maxY = this.scale.domain()[1];
+		const numberOfDisplayableTicks = Math.ceil(availableHeight / 20);
+
+		// make sure we only display as many ticks that all ticks have different (displayed) values!
+		let numberOfTicks = numberOfDisplayableTicks;
+		if (minY != maxY) {
+			while (numberOfTicks > 0) {
+				const integerPartLen = maxTickIntegerPartLength(minY, maxY, numberOfTicks);
+				const inc: number = d3.tickIncrement(minY, maxY, numberOfTicks);
+				const numberOfDigitsAddedByTickIncrements = inc < 0 ? Math.ceil(Math.log10(-inc)) : 0;
+				const numberOfSignificantDigits = integerPartLen + numberOfDigitsAddedByTickIncrements;
+				if (integerPartLen >= this.config.maxTickDigits) {
+					break;
+				} else if (numberOfSignificantDigits > this.config.maxTickDigits) {
+					console.debug(`Decreasing the number of ticks from ${numberOfTicks} to ${numberOfTicks - 1}`)
+					numberOfTicks--;
+				} else {
+					break;
+				}
+			}
+		}
+		this.axis.ticks(numberOfTicks);
+
+		this.axis.tickFormat((value: number) => {
+			const log10 = Math.log10(Math.abs(value));
+			let isPowerOfTen = value === 0 || Math.abs(Math.round(log10) - log10) < 1e-6;
+			if (!isLogScale(this.scale) || numberOfTicks <= 4 || isPowerOfTen) {
+				if (Math.ceil(log10) > this.config.maxTickDigits) {
+					// If the integer part alone is taking more digits than allowed, fallback to SI notation. No way to make this fit...
+					return largeNumberTickFormat(value);
+				} else {
+					return tickFormat(value)
+				}
+			} else {
+				// do not display all numbers on logarithmic scales, since they tend to be displayed very narrowly...
+				return "";
+			}
+		});
+	}
+
+}
+
+export function maxTickIntegerPartLength(minY: number, maxY: number, numberOfTicks: number) {
+	return Math.max(...d3.ticks(minY, maxY, numberOfTicks).map(t => Math.abs(t) < 1 ? 1 : Math.floor(Math.log10(Math.abs(t))) + 1));
+}
diff --git a/teamapps-client/ts/shared/CMD.ts b/teamapps-client/ts/modules/communication/CMD.ts
similarity index 89%
rename from teamapps-client/ts/shared/CMD.ts
rename to teamapps-client/ts/modules/communication/CMD.ts
index 35b0f9f96..44256ace5 100644
--- a/teamapps-client/ts/shared/CMD.ts
+++ b/teamapps-client/ts/modules/communication/CMD.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,7 +17,7 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-import {UiCommand} from "../generated/UiCommand";
+import {UiCommand} from "../../generated/UiCommand";
 
 export interface CMD {
 	id: number
diff --git a/teamapps-client/ts/modules/communication/ReconnectingWebSocketConnection.ts b/teamapps-client/ts/modules/communication/ReconnectingWebSocketConnection.ts
new file mode 100644
index 000000000..726e4817c
--- /dev/null
+++ b/teamapps-client/ts/modules/communication/ReconnectingWebSocketConnection.ts
@@ -0,0 +1,110 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+import {AbstractServerMessageConfig} from "../../generated/AbstractServerMessageConfig";
+import {AbstractClientMessageConfig} from "../../generated/AbstractClientMessageConfig";
+import log from "loglevel";
+import stringify from "json-stable-stringify";
+
+export interface ReconnectingCompressingWebSocketConnectionListener {
+	onConnected: () => void;
+	onMessage: (messageObject: AbstractServerMessageConfig) => void;
+	onConnectionLost: () => void;
+	onReconnected: () => void;
+}
+
+export class ReconnectingCompressingWebSocketConnection {
+
+	private static logger: log.Logger = log.getLogger("ReconnectingCompressingWebSocketConnection");
+
+	private url: string;
+	private connection: WebSocket;
+	private initialConnection = true;
+	private closed: any;
+
+	constructor(url: string, private listener: ReconnectingCompressingWebSocketConnectionListener) {
+		this.url = url;
+		this.reconnect();
+	}
+
+	public isConnected() {
+		return this.connection != null && this.connection.readyState === WebSocket.OPEN;
+	};
+
+	public send(object: AbstractClientMessageConfig) {
+		let jsonString = stringify(object, {
+			cmp: (a, b) => {
+				let aIsUnderscore = a.key[0] === '_';
+				let bIsUnderscore = b.key[0] === '_';
+				return (aIsUnderscore && !bIsUnderscore) ? -1 : (!aIsUnderscore && bIsUnderscore) ? 1 : 0;
+			}
+		});
+		this.connection.send(jsonString);
+	};
+
+	private reconnect() {
+		if (this.closed) {
+			return;
+		}
+
+		ReconnectingCompressingWebSocketConnection.log(`Connecting to ${this.url}`);
+
+		this.connection = new WebSocket(this.url);
+		this.connection.binaryType = 'arraybuffer';
+
+		this.connection.onopen = () => {
+			if (this.initialConnection) {
+				ReconnectingCompressingWebSocketConnection.log("Connected.");
+				this.listener.onConnected();
+				this.initialConnection = false;
+			} else {
+				ReconnectingCompressingWebSocketConnection.log("Reconnected.");
+				this.listener.onReconnected();
+			}
+		};
+		this.connection.onclose = () => {
+			console.warn('Websocket connection CLOSED!');
+			this.listener.onConnectionLost();
+			this.connection = null;
+			setTimeout(() => this.reconnect(), 2000);
+		};
+		this.connection.onerror = (error) => {
+			ReconnectingCompressingWebSocketConnection.log('WebSocket error: ' + error);
+		};
+		this.connection.onmessage = (e) => {
+			let json: string = e.data as string;
+			if (json) {
+				try {
+					this.listener.onMessage(JSON.parse(json));
+				} catch (err) {
+					ReconnectingCompressingWebSocketConnection.log("Error while parsing message JSON: " + json + "\n" + err);
+				}
+			}
+		};
+	}
+
+	public stopReconnecting() {
+		this.closed = true;
+	}
+
+
+	private static log(message: string) {
+		console.log("Connection: " + message);
+	}
+}
diff --git a/teamapps-client/ts/shared/TeamAppsConnection.ts b/teamapps-client/ts/modules/communication/TeamAppsConnection.ts
similarity index 66%
rename from teamapps-client/ts/shared/TeamAppsConnection.ts
rename to teamapps-client/ts/modules/communication/TeamAppsConnection.ts
index b871de7db..8319db1e3 100644
--- a/teamapps-client/ts/shared/TeamAppsConnection.ts
+++ b/teamapps-client/ts/modules/communication/TeamAppsConnection.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,21 +17,20 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-import {UiCommand} from "../generated/UiCommand";
-import {INIT_NOK_Reason} from "../generated/INIT_NOKConfig";
-import {REINIT_NOK_Reason} from "../generated/REINIT_NOKConfig";
-import {SERVER_ERROR_Reason} from "../generated/SERVER_ERRORConfig";
-import {UiEvent} from "../generated/UiEvent";
+import {UiCommand} from "../../generated/UiCommand";
+import {UiEvent} from "../../generated/UiEvent";
+import {UiQuery} from "../../generated/UiQuery";
+import {UiSessionClosingReason} from "../../generated/UiSessionClosingReason";
 
 export const typescriptDeclarationFixConstant = 1;
 
 export interface TeamAppsConnection {
 	sendEvent(event: UiEvent): void;
+	sendQuery(query: UiQuery): Promise<any>;
 }
 
 export interface TeamAppsConnectionListener {
 	onConnectionInitialized(): void;
-	onConnectionErrorOrBroken(reason: INIT_NOK_Reason | REINIT_NOK_Reason | SERVER_ERROR_Reason, message?: string): void;
+	onConnectionErrorOrBroken(reason: UiSessionClosingReason, message?: string): void;
 	executeCommand(uiCommand: UiCommand): Promise<any>;
-	executeCommands(uiCommands: UiCommand[]): Promise<any>[];
 }
diff --git a/teamapps-client/ts/shared/TeamAppsConnectionImpl.ts b/teamapps-client/ts/modules/communication/TeamAppsConnectionImpl.ts
similarity index 59%
rename from teamapps-client/ts/shared/TeamAppsConnectionImpl.ts
rename to teamapps-client/ts/modules/communication/TeamAppsConnectionImpl.ts
index fcfee93a8..7d236607b 100644
--- a/teamapps-client/ts/shared/TeamAppsConnectionImpl.ts
+++ b/teamapps-client/ts/modules/communication/TeamAppsConnectionImpl.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,24 +17,28 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-import {TeamAppsConnection, TeamAppsConnectionListener} from "../shared/TeamAppsConnection";
+import {TeamAppsConnection, TeamAppsConnectionListener} from "./TeamAppsConnection";
 import {ReconnectingCompressingWebSocketConnection} from "./ReconnectingWebSocketConnection";
-import {UiClientInfoConfig} from "../generated/UiClientInfoConfig";
-import {INITConfig} from "../generated/INITConfig";
-import {INIT_NOK_Reason, INIT_NOKConfig} from "../generated/INIT_NOKConfig";
-import {REINIT_NOK_Reason, REINIT_NOKConfig} from "../generated/REINIT_NOKConfig";
-import {REINITConfig} from "../generated/REINITConfig";
-import {CMD_REQUESTConfig} from "../generated/CMD_REQUESTConfig";
-import {INIT_OKConfig} from "../generated/INIT_OKConfig";
-import {REINIT_OKConfig} from "../generated/REINIT_OKConfig";
-import {MULTI_CMDConfig} from "../generated/MULTI_CMDConfig";
-import {EVENTConfig} from "../generated/EVENTConfig";
-import {SERVER_ERROR_Reason, SERVER_ERRORConfig} from "../generated/SERVER_ERRORConfig";
+import {UiClientInfoConfig} from "../../generated/UiClientInfoConfig";
+import {INITConfig} from "../../generated/INITConfig";
+import {INIT_NOKConfig} from "../../generated/INIT_NOKConfig";
+import {REINIT_NOKConfig} from "../../generated/REINIT_NOKConfig";
+import {REINITConfig} from "../../generated/REINITConfig";
+import {CMD_REQUESTConfig} from "../../generated/CMD_REQUESTConfig";
+import {INIT_OKConfig} from "../../generated/INIT_OKConfig";
+import {REINIT_OKConfig} from "../../generated/REINIT_OKConfig";
+import {MULTI_CMDConfig} from "../../generated/MULTI_CMDConfig";
+import {EVENTConfig} from "../../generated/EVENTConfig";
+import {SESSION_CLOSEDConfig} from "../../generated/SESSION_CLOSEDConfig";
 import {CMD} from "./CMD";
-import {logException} from "../modules/Common";
-import {AbstractClientPayloadMessageConfig} from "../generated/AbstractClientPayloadMessageConfig";
-import {UiEvent} from "../generated/UiEvent";
-import {CMD_RESULTConfig} from "../generated/CMD_RESULTConfig";
+import {logException} from "../Common";
+import {AbstractClientPayloadMessageConfig} from "../../generated/AbstractClientPayloadMessageConfig";
+import {UiEvent} from "../../generated/UiEvent";
+import {CMD_RESULTConfig} from "../../generated/CMD_RESULTConfig";
+import {UiSessionClosingReason} from "../../generated/UiSessionClosingReason";
+import {UiQuery} from "../../generated/UiQuery";
+import {QUERYConfig} from "../../generated/QUERYConfig";
+import {QUERY_RESULTConfig} from "../../generated/QUERY_RESULTConfig";
 
 
 enum TeamAppsProtocolStatus {
@@ -46,11 +50,9 @@ enum TeamAppsProtocolStatus {
 
 export class TeamAppsConnectionImpl implements TeamAppsConnection {
 
-	private static readonly SENT_EVENTS_MIN_BUFFER_SIZE = 500;
-	private static readonly SENT_EVENTS_MAX_BUFFER_SIZE = 1000;
-	private static readonly KEEPALIVE_INTERVAL = 25000;
-	private static readonly MIN_REQUESTED_COMMANDS = 5;
-	private static readonly MAX_REQUESTED_COMMANDS = 20;
+	private sentEventsMinBufferSize = 500;
+	private minRequestedCommands = 3;
+	private maxRequestedCommands = 20;
 
 	private protocolStatus: TeamAppsProtocolStatus;
 
@@ -59,7 +61,8 @@ export class TeamAppsConnectionImpl implements TeamAppsConnection {
 	private payloadMessagesQueue: AbstractClientPayloadMessageConfig[] = [];
 	private sentEventsBuffer: AbstractClientPayloadMessageConfig[] = [];
 
-	private eventIdCounter = 1;
+	private clientMessageIdCounter = 1;
+	private queryResultHandlerByMessageId: Map<number, (result: any) => any> = new Map();
 
 	private maxRequestedCommandId = 0;
 	private lastReceivedCommandId: number;
@@ -75,24 +78,34 @@ export class TeamAppsConnectionImpl implements TeamAppsConnection {
 					_type: "INIT",
 					sessionId,
 					clientInfo,
-					maxRequestedCommandId: TeamAppsConnectionImpl.MAX_REQUESTED_COMMANDS
+					maxRequestedCommandId: this.maxRequestedCommands
 				} as INITConfig)
 			},
-			onMessage: (message) => {
+			onMessage: async (message) => {
 				if (TeamAppsConnectionImpl.isMULTI_CMD(message)) {
 					let cmds = message.cmds as CMD[];
-					const resultPromises = commandHandler.executeCommands(cmds.map(cmd => cmd.c));
-					resultPromises.forEach((promise, i) => {
-						promise.then(result => {
-							if (cmds[i].r) {
-								this.sendResult(cmds[i].id, result);
+					for (let cmd of cmds) {
+						this.lastReceivedCommandId = cmd.id;
+						try {
+							let result = await commandHandler.executeCommand(cmd.c);
+							if (cmd.r) {
+								this.sendResult(cmd.id, result);
 							}
-						}).catch(reason => logException(reason))
-					});
+						} catch (reason) {
+							logException(reason);
+						} finally {
+							this.ensureEnoughCommandsRequested();
+						}
+					}
 					this.lastReceivedCommandId = cmds[cmds.length - 1].id;
-					this.ensureEnoughCommandsRequested();
+				} else if (TeamAppsConnectionImpl.isQUERY_RESULT(message)) {
+					this.queryResultHandlerByMessageId.get(message.queryId)(message.result);
 				} else if (TeamAppsConnectionImpl.isINIT_OK(message)) {
 					this.protocolStatus = TeamAppsProtocolStatus.ESTABLISHED;
+					this.sentEventsMinBufferSize = message.sentEventsBufferSize;
+					this.initKeepAlive(message.keepaliveInterval ?? 25_000);
+					this.minRequestedCommands = message.minRequestedCommands;
+					this.maxRequestedCommands = message.maxRequestedCommands;
 					this.log("Connection accepted.");
 					this.flushPayloadMessages();
 					commandHandler.onConnectionInitialized();
@@ -113,19 +126,22 @@ export class TeamAppsConnectionImpl implements TeamAppsConnection {
 					this.flushPayloadMessages();
 				} else if (TeamAppsConnectionImpl.isINIT_NOK(message)) {
 					this.protocolStatus = TeamAppsProtocolStatus.ERROR;
-					this.log("Connection refused. Reason: " + INIT_NOK_Reason[message.reason]);
+					this.log("Connection refused. Reason: " + UiSessionClosingReason[message.reason]);
 					commandHandler.onConnectionErrorOrBroken(message.reason);
 					this.connection.stopReconnecting(); // give the server the chance to send more commands, but if it disconnected, do not attempt to reconnect.
 				} else if (TeamAppsConnectionImpl.isREINIT_NOK(message)) {
 					this.protocolStatus = TeamAppsProtocolStatus.ERROR;
-					this.log("Reconnect refused. Reason: " + REINIT_NOK_Reason[message.reason]);
+					this.log("Reconnect refused. Reason: " + UiSessionClosingReason[message.reason]);
 					commandHandler.onConnectionErrorOrBroken(message.reason);
 					this.connection.stopReconnecting(); // give the server the chance to send more commands, but if it disconnected, do not attempt to reconnect.
-				} else if (TeamAppsConnectionImpl.isSERVER_ERROR(message)) {
+				} else if (TeamAppsConnectionImpl.isPING(message)) {
+					this.log("Got PING from server.");
+					this.connection.send({_type: "KEEPALIVE", sessionId: this.sessionId});
+				} else if (TeamAppsConnectionImpl.isSESSION_CLOSED(message)) {
 					this.protocolStatus = TeamAppsProtocolStatus.ERROR;
-					this.log("Error reported by server: " + SERVER_ERROR_Reason[message.reason] + ": " + message.message);
+					this.log("Error reported by server: " + UiSessionClosingReason[message.reason] + ": " + message.message);
 					commandHandler.onConnectionErrorOrBroken(message.reason, message.message);
-					// do NOT close the connection here. The server might handle this gracefully.
+					this.connection.stopReconnecting();
 				} else {
 					this.log(`ERROR: unknown message type: ${message._type}`)
 				}
@@ -139,24 +155,24 @@ export class TeamAppsConnectionImpl implements TeamAppsConnection {
 					_type: "REINIT",
 					sessionId,
 					lastReceivedCommandId: this.lastReceivedCommandId || -1,
-					maxRequestedCommandId: this.lastReceivedCommandId + TeamAppsConnectionImpl.MAX_REQUESTED_COMMANDS
+					maxRequestedCommandId: this.lastReceivedCommandId + this.maxRequestedCommands
 				} as REINITConfig)
 			}
 		});
+	}
+
+	private initKeepAlive(keepaliveInterval: number) {
 		self.setInterval(() => {
 			if (this.isConnected()) {
-				this.connection.send({
-					_type: "KEEPALIVE",
-					sessionId: sessionId
-				})
+				this.connection.send({_type: "KEEPALIVE", sessionId: this.sessionId});
 			}
-		}, TeamAppsConnectionImpl.KEEPALIVE_INTERVAL)
+		}, keepaliveInterval)
 	}
 
 	private ensureEnoughCommandsRequested() {
-		if (this.maxRequestedCommandId - this.lastReceivedCommandId <= TeamAppsConnectionImpl.MIN_REQUESTED_COMMANDS) {
+		if (this.maxRequestedCommandId - this.lastReceivedCommandId <= this.minRequestedCommands) {
 			try {
-				let maxRequestedCommandId = this.lastReceivedCommandId + TeamAppsConnectionImpl.MAX_REQUESTED_COMMANDS;
+				let maxRequestedCommandId = this.lastReceivedCommandId + this.maxRequestedCommands;
 				this.connection.send({
 					_type: "CMD_REQUEST",
 					sessionId: this.sessionId,
@@ -186,12 +202,20 @@ export class TeamAppsConnectionImpl implements TeamAppsConnection {
 		return message._type === 'REINIT_NOK';
 	}
 
+	private static isPING(message: any): message is REINIT_NOKConfig {
+		return message._type === 'PING';
+	}
+
 	private static isMULTI_CMD(message: any): message is MULTI_CMDConfig {
 		return message._type === 'MULTI_CMD';
 	}
 
-	private static isSERVER_ERROR(message: any): message is SERVER_ERRORConfig {
-		return message._type === 'SERVER_ERROR';
+	private static isQUERY_RESULT(message: any): message is QUERY_RESULTConfig {
+		return message._type === 'QUERY_RESULT';
+	}
+
+	private static isSESSION_CLOSED(message: any): message is SESSION_CLOSEDConfig {
+		return message._type === 'SESSION_CLOSED';
 	}
 
 	private isConnected() {
@@ -202,17 +226,29 @@ export class TeamAppsConnectionImpl implements TeamAppsConnection {
 		let protocolEvent: EVENTConfig = {
 			_type: "EVENT",
 			sessionId: this.sessionId,
-			id: this.eventIdCounter++,
+			id: this.clientMessageIdCounter++,
 			uiEvent: event
 		};
 		this.sendClientPayloadMessage(protocolEvent);
 	}
 
+	sendQuery(query: UiQuery): Promise<any> {
+		let clientMessageId = this.clientMessageIdCounter++;
+		let protocolQuery: QUERYConfig = {
+			_type: "QUERY",
+			sessionId: this.sessionId,
+			id: clientMessageId,
+			uiQuery: query
+		};
+		this.sendClientPayloadMessage(protocolQuery);
+		return new Promise<any>(resolve => this.queryResultHandlerByMessageId.set(clientMessageId, resolve))
+	}
+
 	private sendResult(cmdId: number, result: any) {
 		let cmdResult: CMD_RESULTConfig = {
 			_type: "CMD_RESULT",
 			sessionId: this.sessionId,
-			id: this.eventIdCounter++,
+			id: this.clientMessageIdCounter++,
 			cmdId: cmdId,
 			result: result
 		};
@@ -241,8 +277,9 @@ export class TeamAppsConnectionImpl implements TeamAppsConnection {
 
 	private sendPayloadMessage(payloadMessage: AbstractClientPayloadMessageConfig) {
 		this.sentEventsBuffer.push(payloadMessage);
-		if (this.sentEventsBuffer.length > TeamAppsConnectionImpl.SENT_EVENTS_MAX_BUFFER_SIZE) {
-			this.sentEventsBuffer.splice(0, TeamAppsConnectionImpl.SENT_EVENTS_MAX_BUFFER_SIZE - TeamAppsConnectionImpl.SENT_EVENTS_MIN_BUFFER_SIZE);
+		let sentEventsMaxBufferSize = this.sentEventsMinBufferSize * 2;
+		if (this.sentEventsBuffer.length > sentEventsMaxBufferSize) {
+			this.sentEventsBuffer.splice(0, sentEventsMaxBufferSize - this.sentEventsMinBufferSize);
 		}
 		this.connection.send(payloadMessage);
 	}
diff --git a/teamapps-client/ts/modules/datetime/LocalDateTime.ts b/teamapps-client/ts/modules/datetime/LocalDateTime.ts
new file mode 100644
index 000000000..271f4ec74
--- /dev/null
+++ b/teamapps-client/ts/modules/datetime/LocalDateTime.ts
@@ -0,0 +1,407 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+import {
+	DateObjectUnits,
+	DateTime,
+	DateTimeFormatOptions,
+	DiffOptions,
+	Duration,
+	DurationObject,
+	DurationUnit,
+	Interval,
+	LocaleOptions,
+	ToISODateOptions,
+	ToISOTimeOptions,
+	ToSQLOptions,
+	Zone,
+	ZoneOptions
+} from "luxon";
+
+export type LocalDateObject = DateObjectUnits & LocaleOptions;
+
+var LOCAL_ZONE = Intl.DateTimeFormat().resolvedOptions().timeZone;
+
+export class LocalDateTime implements Omit<DateTime, "zone" | "zoneName" | "isInDST" | "isOffsetFixed" | "offsetNameShort" | "offsetNameLong" | "offset" | "setZone" | "diff" | "diffNow" | "endOf" | "equals" | "hasSame" | "minus" | "plus" | "reconfigure" | "set" | "setLocale" | "startOf" | "toJSDate" | "toMillis" | "toRelative" | "toRelativeCalendar" | "toRFC2822" | "toSeconds"> {
+
+	private dateTime: DateTime; // guaranteed to be "UTC"
+
+	constructor(dateTime: DateTime) {
+		this.dateTime = dateTime.setZone("UTC", {keepLocalTime: true});
+	}
+
+	static fromDateTime(dateTime: DateTime) {
+		return new LocalDateTime(dateTime)
+	}
+
+	static fromObject(obj: LocalDateObject) {
+		return new LocalDateTime(DateTime.fromObject(obj))
+	}
+
+	static local() {
+		return new LocalDateTime(DateTime.local())
+	}
+
+	static fromISO(text: string) {
+		return new LocalDateTime(DateTime.fromISO(text));
+	}
+
+	get day(): number {
+		return this.dateTime.day;
+	}
+
+	set day(value: number) {
+		this.dateTime.day = value;
+	}
+
+	get daysInMonth(): number {
+		return this.dateTime.daysInMonth;
+	}
+
+	set daysInMonth(value: number) {
+		this.dateTime.daysInMonth = value;
+	}
+
+	get daysInYear(): number {
+		return this.dateTime.daysInYear;
+	}
+
+	set daysInYear(value: number) {
+		this.dateTime.daysInYear = value;
+	}
+
+	get hour(): number {
+		return this.dateTime.hour;
+	}
+
+	set hour(value: number) {
+		this.dateTime.hour = value;
+	}
+
+	get invalidReason(): string | null {
+		return this.dateTime.invalidReason;
+	}
+
+	set invalidReason(value: string | null) {
+		this.dateTime.invalidReason = value;
+	}
+
+	get invalidExplanation(): string | null {
+		return this.dateTime.invalidExplanation;
+	}
+
+	set invalidExplanation(value: string | null) {
+		this.dateTime.invalidExplanation = value;
+	}
+
+	get isInLeapYear(): boolean {
+		return this.dateTime.isInLeapYear;
+	}
+
+	set isInLeapYear(value: boolean) {
+		this.dateTime.isInLeapYear = value;
+	}
+
+	get isValid(): boolean {
+		return this.dateTime.isValid;
+	}
+
+	set isValid(value: boolean) {
+		this.dateTime.isValid = value;
+	}
+
+	get locale(): string {
+		return this.dateTime.locale;
+	}
+
+	set locale(value: string) {
+		this.dateTime.locale = value;
+	}
+
+	get millisecond(): number {
+		return this.dateTime.millisecond;
+	}
+
+	set millisecond(value: number) {
+		this.dateTime.millisecond = value;
+	}
+
+	get minute(): number {
+		return this.dateTime.minute;
+	}
+
+	set minute(value: number) {
+		this.dateTime.minute = value;
+	}
+
+	get month(): number {
+		return this.dateTime.month;
+	}
+
+	set month(value: number) {
+		this.dateTime.month = value;
+	}
+
+	get monthLong(): string {
+		return this.dateTime.monthLong;
+	}
+
+	set monthLong(value: string) {
+		this.dateTime.monthLong = value;
+	}
+
+	get monthShort(): string {
+		return this.dateTime.monthShort;
+	}
+
+	set monthShort(value: string) {
+		this.dateTime.monthShort = value;
+	}
+
+	get numberingSystem(): string {
+		return this.dateTime.numberingSystem;
+	}
+
+	set numberingSystem(value: string) {
+		this.dateTime.numberingSystem = value;
+	}
+
+	get ordinal(): number {
+		return this.dateTime.ordinal;
+	}
+
+	set ordinal(value: number) {
+		this.dateTime.ordinal = value;
+	}
+
+	get outputCalendar(): string {
+		return this.dateTime.outputCalendar;
+	}
+
+	set outputCalendar(value: string) {
+		this.dateTime.outputCalendar = value;
+	}
+
+	get quarter(): number {
+		return this.dateTime.quarter;
+	}
+
+	set quarter(value: number) {
+		this.dateTime.quarter = value;
+	}
+
+	get second(): number {
+		return this.dateTime.second;
+	}
+
+	set second(value: number) {
+		this.dateTime.second = value;
+	}
+
+	get weekNumber(): number {
+		return this.dateTime.weekNumber;
+	}
+
+	set weekNumber(value: number) {
+		this.dateTime.weekNumber = value;
+	}
+
+	get weekYear(): number {
+		return this.dateTime.weekYear;
+	}
+
+	set weekYear(value: number) {
+		this.dateTime.weekYear = value;
+	}
+
+	get weekday(): number {
+		return this.dateTime.weekday;
+	}
+
+	set weekday(value: number) {
+		this.dateTime.weekday = value;
+	}
+
+	get weekdayLong(): string {
+		return this.dateTime.weekdayLong;
+	}
+
+	set weekdayLong(value: string) {
+		this.dateTime.weekdayLong = value;
+	}
+
+	get weekdayShort(): string {
+		return this.dateTime.weekdayShort;
+	}
+
+	set weekdayShort(value: string) {
+		this.dateTime.weekdayShort = value;
+	}
+
+	get weeksInWeekYear(): number {
+		return this.dateTime.weeksInWeekYear;
+	}
+
+	set weeksInWeekYear(value: number) {
+		this.dateTime.weeksInWeekYear = value;
+	}
+
+	get year(): number {
+		return this.dateTime.year;
+	}
+
+	set year(value: number) {
+		this.dateTime.year = value;
+	}
+
+	diff(other: LocalDateTime, unit?: DurationUnit | DurationUnit[], options?: DiffOptions): Duration {
+		return this.dateTime.diff(other.dateTime, unit, options);
+	}
+
+	diffNow(unit?: DurationUnit | DurationUnit[], options?: DiffOptions): Duration {
+		return this.diff(LocalDateTime.local(), unit, options);
+	}
+
+	endOf(unit: DurationUnit): LocalDateTime {
+		return new LocalDateTime(this.dateTime.endOf(unit));
+	}
+
+	equals(other: LocalDateTime): boolean {
+		return this.dateTime.equals(other.dateTime);
+	}
+
+	get(unit: keyof DateTime): number {
+		return this.dateTime.get(unit);
+	}
+
+	hasSame(other: LocalDateTime, unit: DurationUnit): boolean {
+		return this.dateTime.hasSame(other.dateTime, unit);
+	}
+
+	minus(duration: Duration | number | DurationObject): LocalDateTime {
+		return new LocalDateTime(this.dateTime.minus(duration));
+	}
+
+	plus(duration: Duration | number | DurationObject): LocalDateTime {
+		return new LocalDateTime(this.dateTime.plus(duration));
+	}
+
+	reconfigure(properties: LocaleOptions): LocalDateTime {
+		return new LocalDateTime(this.dateTime.reconfigure(properties));
+	}
+
+	resolvedLocaleOpts(options?: DateTimeFormatOptions): Intl.ResolvedDateTimeFormatOptions {
+		return this.dateTime.resolvedLocaleOpts(options);
+	}
+
+	set(values: DateObjectUnits): LocalDateTime {
+		return new LocalDateTime(this.dateTime.set(values));
+	}
+
+	setLocale(locale: string): LocalDateTime {
+		return new LocalDateTime(this.dateTime.setLocale(locale));
+	}
+
+	startOf(unit: DurationUnit): LocalDateTime {
+		return new LocalDateTime(this.dateTime.startOf(unit));
+	}
+
+	toBSON(): Date {
+		return this.dateTime.toBSON();
+	}
+
+	toFormat(format: string, options?: DateTimeFormatOptions): string {
+		return this.dateTime.toFormat(format, options);
+	}
+
+	toHTTP(): string {
+		return this.dateTime.toHTTP();
+	}
+
+	toISO(options?: ToISOTimeOptions): string {
+		return this.dateTime.toISO(options);
+	}
+
+	toISODate(options?: ToISODateOptions): string {
+		return this.dateTime.toISODate(options);
+	}
+
+	toISOTime(options?: ToISOTimeOptions): string {
+		return this.dateTime.toISOTime(options);
+	}
+
+	toISOWeekDate(): string {
+		return this.dateTime.toISOWeekDate();
+	}
+
+	toJSON(): string {
+		return this.dateTime.toJSON();
+	}
+
+	toZoned(zone: string | Zone, options?: ZoneOptions): DateTime {
+		return this.dateTime.setZone(zone, {keepLocalTime: true, ...options});
+	}
+
+	toUTC(offset?: number, options?: ZoneOptions): DateTime {
+		return this.dateTime.toUTC(offset, {...options, keepLocalTime: true});
+	}
+
+	toLocal(): DateTime {
+		return this.toZoned(LOCAL_ZONE);
+	}
+
+	toLocaleParts(options?: LocaleOptions & DateTimeFormatOptions): (any & { type: string })[] {
+		return this.dateTime.toLocaleParts(options);
+	}
+
+	toLocaleString(options?: LocaleOptions & DateTimeFormatOptions): string {
+		return this.dateTime.toLocaleString(options);
+	}
+
+	toObject(options?: { includeConfig?: boolean }): LocalDateObject {
+		let dateObject = this.dateTime.toObject(options);
+		dateObject = {...dateObject};
+		delete dateObject.zone;
+		return dateObject;
+	}
+
+	toSQL(options?: ToSQLOptions): string {
+		return this.dateTime.toSQL({...options, includeOffset: false, includeZone: false});
+	}
+
+	toSQLDate(): string {
+		return this.dateTime.toSQLDate();
+	}
+
+	toSQLTime(options?: ToSQLOptions): string {
+		return this.dateTime.toSQLTime({...options, includeOffset: false, includeZone: false});
+	}
+
+	toString(): string {
+		return this.dateTime.year + "-" + this.dateTime.month + "-" + this.dateTime.day;
+	}
+
+	until(other: DateTime): Interval {
+		return this.dateTime.until(other);
+	}
+
+	valueOf() {
+		return this.dateTime.valueOf();
+	}
+}
diff --git a/teamapps-client/ts/modules/datetime/LocalTime.ts b/teamapps-client/ts/modules/datetime/LocalTime.ts
new file mode 100644
index 000000000..be9cdb2fa
--- /dev/null
+++ b/teamapps-client/ts/modules/datetime/LocalTime.ts
@@ -0,0 +1,24 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+export interface LocalTime {
+	hour: number,
+	minute: number,
+	second?: number
+}
diff --git a/teamapps-client/ts/modules/formfield/UiButton.ts b/teamapps-client/ts/modules/formfield/UiButton.ts
index 7f57b93c7..e28a3c05e 100644
--- a/teamapps-client/ts/modules/formfield/UiButton.ts
+++ b/teamapps-client/ts/modules/formfield/UiButton.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -21,70 +21,79 @@ import {UiItemView} from "../UiItemView";
 import {TeamAppsUiContext} from "../TeamAppsUiContext";
 import {TeamAppsUiComponentRegistry} from "../TeamAppsUiComponentRegistry";
 import {UiDropDown} from "../micro-components/UiDropDown";
-import {UiComponent} from "../UiComponent";
 import {UiTemplateConfig} from "../../generated/UiTemplateConfig";
-import {UiButton_DropDownOpenedEvent, UiButtonCommandHandler, UiButtonConfig, UiButtonEventSource} from "../../generated/UiButtonConfig";
-import * as $ from "jquery";
-import {keyCodes} from "trivial-components";
+import {
+	UiButton_ClickedEvent,
+	UiButton_DropDownOpenedEvent,
+	UiButtonCommandHandler,
+	UiButtonConfig,
+	UiButtonEventSource
+} from "../../generated/UiButtonConfig";
 import {UiField} from "./UiField";
-import {UiColorConfig} from "../../generated/UiColorConfig";
-import {createUiColorCssString} from "../util/CssFormatUtil";
 import {UiFieldEditingMode} from "../../generated/UiFieldEditingMode";
 import {TeamAppsEvent} from "../util/TeamAppsEvent";
-import {EventFactory} from "../../generated/EventFactory";
 import {bind} from "../util/Bind";
 import {UiFieldMessageConfig} from "../../generated/UiFieldMessageConfig";
-import {getHighestSeverity} from "../micro-components/FieldMessagesPopper";
-import {UiFieldMessageSeverity} from "../../generated/UiFieldMessageSeverity";
+import {parseHtml} from "../Common";
+import {UiComponent} from "../UiComponent";
+import {executeWhenFirstDisplayed} from "../util/ExecuteWhenFirstDisplayed";
 
-export class UiButton extends UiField<UiButtonConfig, true> implements UiButtonEventSource, UiButtonCommandHandler {
+export class UiButton extends UiField<UiButtonConfig, void> implements UiButtonEventSource, UiButtonCommandHandler {
 
-	public readonly onDropDownOpened: TeamAppsEvent<UiButton_DropDownOpenedEvent> = new TeamAppsEvent(this);
+	public readonly onClicked: TeamAppsEvent<UiButton_ClickedEvent> = new TeamAppsEvent();
+	public readonly onDropDownOpened: TeamAppsEvent<UiButton_DropDownOpenedEvent> = new TeamAppsEvent();
 
 	private template: UiTemplateConfig;
 	private templateRecord: any;
 
-	private _$button: JQuery;
+	private $main: HTMLElement;
 
 	private _dropDown: UiDropDown; // lazy-init!
 	private dropDownComponent: UiComponent;
 	private minDropDownWidth: number;
 	private minDropDownHeight: number;
 	private openDropDownIfNotSet: boolean;
+	private onClickJavaScript: string;
 
 	protected initialize(config: UiButtonConfig, context: TeamAppsUiContext) {
 		this.template = config.template;
 		this.templateRecord = config.templateRecord;
 
-		this._$button = $(this.getReadOnlyHtml(this.templateRecord, -1));
+		this.$main = parseHtml(this.getReadOnlyHtml(this.templateRecord, -1));
 
 		this.minDropDownWidth = config.minDropDownWidth;
 		this.minDropDownHeight = config.minDropDownHeight;
 		this.openDropDownIfNotSet = config.openDropDownIfNotSet;
-		this.getMainInnerDomElement()
-			.on("mousedown keydown", (e) => {
-				if (e.type === "mousedown" || e.which === keyCodes.enter || e.which === keyCodes.space) {
-					if (this.dropDownComponent != null || this.openDropDownIfNotSet) {
-						if (!this.dropDown.isOpen) {
-							const width = this.getMainInnerDomElement()[0].offsetWidth;
-							this.dropDown.open({$reference: this.getMainInnerDomElement(), width: Math.max(this.minDropDownWidth, width), minHeight: this.minDropDownHeight});
-							this.onDropDownOpened.fire(EventFactory.createUiButton_DropDownOpenedEvent(this.getId()));
-							this.getMainInnerDomElement().addClass("open");
-						} else {
-							this.dropDown.close(); // not needed for clicks, but for keydown!
-						}
+		['mousedown', 'keydown'].forEach((eventName) => this.getMainInnerDomElement().addEventListener(eventName, (e: Event) => {
+			if (e.type === "mousedown" || (e as KeyboardEvent).key === "Enter" || (e as KeyboardEvent).key === " ") {
+				if (this.dropDownComponent != null || this.openDropDownIfNotSet) {
+					if (!this.dropDown.isOpen) {
+						const width = this.getMainInnerDomElement().offsetWidth;
+						this.dropDown.open({$reference: this.getMainInnerDomElement(), width: Math.max(this.minDropDownWidth, width), minHeight: this.minDropDownHeight});
+						this.onDropDownOpened.fire({});
+						this.getMainInnerDomElement().classList.add("open");
+					} else {
+						this.dropDown.close(); // not needed for clicks, but for keydown!
 					}
 				}
-			})
-			// It is necessary to commit only after a full "click", since fields commit on blur. E.g. a UiTextField should blur-commit first, before the button click-commits. This would not work with "mousedown".
-			.on("click keypress", (e) => {
-				if (e.type === "click" || e.which === keyCodes.enter || e.which === keyCodes.space) {
-					if (this.getEditingMode() === UiFieldEditingMode.EDITABLE || this.getEditingMode() === UiFieldEditingMode.EDITABLE_IF_FOCUSED) {
-						this.commit(true);
+			}
+		}));
+
+		// It is necessary to commit only after a full "click", since fields commit on blur. E.g. a UiTextField should blur-commit first, before the button click-commits. This would not work with "mousedown".
+		["click", "keypress"].forEach(eventName => this.getMainInnerDomElement().addEventListener(eventName, (e) => {
+			if (e.type === "click" || (e as KeyboardEvent).key === "Enter" || (e as KeyboardEvent).key === " ") {
+				if (this.getEditingMode() === UiFieldEditingMode.EDITABLE || this.getEditingMode() === UiFieldEditingMode.EDITABLE_IF_FOCUSED) {
+					if (this.onClickJavaScript != null) {
+						let context = this._context; // make context available in evaluated javascript
+						eval(this.onClickJavaScript);
 					}
+					this.onClicked.fire({});
+					this.commit(true);
 				}
-			});
-		this.setDropDownComponent(config.dropDownComponent);
+			}
+		}));
+		this.setDropDownComponent(config.dropDownComponent as UiComponent);
+		this.setOnClickJavaScript(config.onClickJavaScript);
 	}
 
 	setDropDownSize(minDropDownWidth: number, minDropDownHeight: number): void {
@@ -102,7 +111,6 @@ export class UiButton extends UiField<UiButtonConfig, true> implements UiButtonE
 				this.dropDownComponent.onItemClicked.addListener(this.closeDropDown);
 			}
 			this.dropDown.setContentComponent(this.dropDownComponent);
-			this.dropDownComponent.attachedToDom = true;
 		} else {
 			this.dropDownComponent = null;
 			this.dropDown.setContentComponent(null);
@@ -110,7 +118,7 @@ export class UiButton extends UiField<UiButtonConfig, true> implements UiButtonE
 	}
 
 	@bind
-	private closeDropDown() {
+	public closeDropDown() {
 		this.dropDown.close();
 	}
 
@@ -118,8 +126,8 @@ export class UiButton extends UiField<UiButtonConfig, true> implements UiButtonE
 		// lazy-init!
 		if (this._dropDown == null) {
 			this._dropDown = new UiDropDown();
-			this._dropDown.getMainDomElement().addClass("UiButton-dropdown");
-			this._dropDown.onClose.addListener(eventObject => this.getMainInnerDomElement().removeClass("open"))
+			this._dropDown.getMainDomElement().classList.add("UiButton-dropdown");
+			this._dropDown.onClose.addListener(eventObject => this.getMainInnerDomElement().classList.remove("open"))
 		}
 		return this._dropDown;
 	}
@@ -128,8 +136,8 @@ export class UiButton extends UiField<UiButtonConfig, true> implements UiButtonE
 		this.openDropDownIfNotSet = openDropDownIfNotSet;
 	}
 
-	public getMainInnerDomElement(): JQuery {
-		return this._$button;
+	public getMainInnerDomElement(): HTMLElement {
+		return this.$main;
 	}
 
 	setTemplate(template: UiTemplateConfig, templateRecord: any): void {
@@ -140,7 +148,7 @@ export class UiButton extends UiField<UiButtonConfig, true> implements UiButtonE
 	setTemplateRecord(data: any): void {
 		this.templateRecord = data;
 		let innerHtml = this.renderContent();
-		this._$button[0].innerHTML = innerHtml;
+		this.$main.innerHTML = innerHtml;
 	}
 
 	private renderContent(): string {
@@ -151,12 +159,9 @@ export class UiButton extends UiField<UiButtonConfig, true> implements UiButtonE
 		super.setFieldMessages(fieldMessageConfigs);
 	}
 
-	public getFocusableElement(): JQuery {
-		return this._$button;
-	}
-
+	@executeWhenFirstDisplayed()
 	focus(): void {
-		this._$button.focus();
+		this.$main.focus();
 	}
 
 	protected displayCommittedValue(): void {
@@ -168,29 +173,30 @@ export class UiButton extends UiField<UiButtonConfig, true> implements UiButtonE
 	}
 
 	protected onEditingModeChanged(editingMode: UiFieldEditingMode): void {
-		UiField.defaultOnEditingModeChangedImpl(this);
+		UiField.defaultOnEditingModeChangedImpl(this, () => this.$main);
 	}
 
-	public getReadOnlyHtml(value: boolean, availableWidth: number): string {
+	public getReadOnlyHtml(value: void, availableWidth: number): string {
 		return `<div class="UiButton btn field-border field-border-glow field-background">
 			${this.renderContent()}
         </div>`;
 	}
 
-	public valuesChanged(v1: boolean, v2: boolean): boolean {
+	public valuesChanged(v1: void, v2: void): boolean {
 		return false;
 	}
 
-	doDestroy(): void {
-	}
-
-	isValidData(v: boolean): boolean {
+	isValidData(v: void): boolean {
 		return true;
 	}
 
 	getDefaultValue(): true {
 		return true;
 	}
+
+	setOnClickJavaScript(onClickJavaScript: string): void {
+		this.onClickJavaScript = onClickJavaScript;
+	}
 }
 
 TeamAppsUiComponentRegistry.registerFieldClass("UiButton", UiButton);
diff --git a/teamapps-client/ts/modules/formfield/UiCheckBox.ts b/teamapps-client/ts/modules/formfield/UiCheckBox.ts
index 42bb71899..3b47aeb8a 100644
--- a/teamapps-client/ts/modules/formfield/UiCheckBox.ts
+++ b/teamapps-client/ts/modules/formfield/UiCheckBox.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,58 +17,56 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-import * as $ from "jquery";
 import {UiCheckBoxCommandHandler, UiCheckBoxConfig, UiCheckBoxEventSource} from "../../generated/UiCheckBoxConfig";
 import {UiFieldEditingMode} from "../../generated/UiFieldEditingMode";
 import {UiField} from "./UiField";
 import {TeamAppsUiContext} from "../TeamAppsUiContext";
-import {generateUUID} from "../Common";
+import {generateUUID, parseHtml} from "../Common";
 import {TeamAppsUiComponentRegistry} from "../TeamAppsUiComponentRegistry";
-import {UiColorConfig} from "../../generated/UiColorConfig";
-import {createUiColorCssString} from "../util/CssFormatUtil";
-import {keyCodes} from "trivial-components";
+import {keyCodes} from "../trivial-components/TrivialCore";
 import {UiFieldMessageConfig} from "../../generated/UiFieldMessageConfig";
 import {getHighestSeverity} from "../micro-components/FieldMessagesPopper";
 import {UiFieldMessageSeverity} from "../../generated/UiFieldMessageSeverity";
+import {executeWhenFirstDisplayed} from "../util/ExecuteWhenFirstDisplayed";
 
 
 export class UiCheckBox extends UiField<UiCheckBoxConfig, boolean> implements UiCheckBoxEventSource, UiCheckBoxCommandHandler {
 
-	private $main: JQuery;
-	private $check: JQuery;
-	private $label: JQuery;
-	private $style: JQuery;
+	private $main: HTMLElement;
+	private $check: HTMLElement;
+	private $label: HTMLElement;
+	private $style: HTMLElement;
 
-	private backgroundColor: UiColorConfig;
-	private checkColor: UiColorConfig;
-	private borderColor: UiColorConfig;
+	private backgroundColor: string;
+	private checkColor: string;
+	private borderColor: string;
 
 	protected initialize(config: UiCheckBoxConfig, context: TeamAppsUiContext) {
 		const uuid = "cb-" + generateUUID();
-		this.$main = $(`<div class="UiCheckBox" data-teamapps-id="${config.id}">
+		this.$main = parseHtml(`<div class="UiCheckBox">
 				<style></style>
                 <div class="checkbox-check field-border field-border-glow field-background" tabindex="0"></div>
                 <div class="checkbox-label"></div>
             </div>`);
-		this.$check = this.$main.find(".checkbox-check");
-		this.$label = this.$main.find(".checkbox-label");
-		this.$style = this.$main.find("style");
+		this.$check = this.$main.querySelector<HTMLElement>(":scope .checkbox-check");
+		this.$label = this.$main.querySelector<HTMLElement>(":scope .checkbox-label");
+		this.$style = this.$main.querySelector<HTMLElement>(":scope style");
 
 		this.setCaption(config.caption);
 		this.setBackgroundColor(config.backgroundColor);
 		this.setCheckColor(config.checkColor);
 		this.setBorderColor(config.borderColor);
 
-		this.$main.mousedown(() => {
+		this.$main.addEventListener("mousedown", () => {
 			setTimeout(() => this.focus());
 		});
-		this.$main.click(() => {
+		this.$main.addEventListener('click', () => {
 			if (this.getEditingMode() === UiFieldEditingMode.DISABLED || this.getEditingMode() === UiFieldEditingMode.READONLY) {
 				return;
 			}
 			this.toggleCommittedValue();
 		});
-		this.$check.on("keydown", (e) => {
+		this.$check.addEventListener("keydown", (e) => {
 			if (e.keyCode === keyCodes.space) {
 				this.toggleCommittedValue();
 				e.preventDefault(); // no scroll-down!
@@ -85,25 +83,29 @@ export class UiCheckBox extends UiField<UiCheckBoxConfig, boolean> implements Ui
 		this.commit(true);
 	}
 
-	public getMainInnerDomElement(): JQuery {
+	public getMainInnerDomElement(): HTMLElement {
 		return this.$main;
 	}
 
 	setCaption(caption: string): void {
-		this.$label.text(caption);
+		if (!this._config.htmlEnabled) {
+			this.$label.textContent = caption || '';
+		} else {
+			this.$label.innerHTML = caption || '';
+		}
 	}
 
-	setBackgroundColor(backgroundColor: UiColorConfig): void {
+	setBackgroundColor(backgroundColor: string): void {
 		this.backgroundColor = backgroundColor;
 		this.updateStyles();
 	}
 
-	setCheckColor(checkColor: UiColorConfig): void {
+	setCheckColor(checkColor: string): void {
 		this.checkColor = checkColor;
 		this.updateStyles();
 	}
 
-	setBorderColor(borderColor: UiColorConfig): void {
+	setBorderColor(borderColor: string): void {
 		this.borderColor = borderColor;
 		this.updateStyles();
 	}
@@ -116,44 +118,36 @@ export class UiCheckBox extends UiField<UiCheckBoxConfig, boolean> implements Ui
 	private updateStyles() {
 		const highestMessageSeverity = getHighestSeverity(this.getFieldMessages());
 		if (highestMessageSeverity > UiFieldMessageSeverity.INFO) {
-			this.$style.text(''); // styles are defined by message severity styles
+			this.$style.textContent = ''; // styles are defined by message severity styles
 		} else {
-			this.$style.text(`[data-teamapps-id=${this._config.id}] > .checkbox-check {
-			background-color: ${createUiColorCssString(this.backgroundColor)};
-			color: ${createUiColorCssString(this.checkColor)};
-			border: 1px solid ${createUiColorCssString(this.borderColor)};  
-		}`);
+			this.$style.textContent = `[data-teamapps-id=${this._config.id}] > .checkbox-check {
+			background-color: ${(this.backgroundColor ?? '')};
+			color: ${(this.checkColor ?? '')};
+			border: 1px solid ${(this.borderColor ?? '')};  
+		}`;
 		}
 	}
 
-	public getFocusableElement(): JQuery {
-		return this.$check;
-	}
-
 	protected displayCommittedValue(): void {
 		let v = this.getCommittedValue();
-		this.$check.text(v ? "\ue013" : "");
+		this.$check.textContent = v ? "\ue013" : "";
 	}
 
+	@executeWhenFirstDisplayed()
 	focus(): void {
 		this.$check.focus();
 	}
 
-	doDestroy(): void {
-		this.$main.detach();
-	}
-
 	getTransientValue(): boolean {
 		return this.getCommittedValue();
 	}
 
 	protected onEditingModeChanged(editingMode: UiFieldEditingMode): void {
+		UiField.defaultOnEditingModeChangedImpl(this, () => this.$check);
 		if (editingMode === UiFieldEditingMode.DISABLED || editingMode === UiFieldEditingMode.READONLY) {
-			this.$main.addClass("disabled");
-			this.$check.attr("tabindex", "");
+			this.$main.classList.add("disabled");
 		} else {
-			this.$main.removeClass("disabled");
-			this.$check.attr("tabindex", "0");
+			this.$main.classList.remove("disabled");
 		}
 	}
 
diff --git a/teamapps-client/ts/modules/formfield/UiColorPicker.ts b/teamapps-client/ts/modules/formfield/UiColorPicker.ts
index ee73b5b54..d9b00bdcc 100644
--- a/teamapps-client/ts/modules/formfield/UiColorPicker.ts
+++ b/teamapps-client/ts/modules/formfield/UiColorPicker.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,32 +17,30 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-import * as $ from "jquery";
 import {UiField} from "./UiField";
 import {UiColorPickerConfig, UiColorPickerEventSource} from "../../generated/UiColorPickerConfig";
 import {TeamAppsUiContext} from "../TeamAppsUiContext";
 import {TeamAppsUiComponentRegistry} from "../TeamAppsUiComponentRegistry";
 import {UiFieldEditingMode} from "../../generated/UiFieldEditingMode";
-import {createUiColorConfig, UiColorConfig} from "../../generated/UiColorConfig";
 import {create as createPickr, HSVaColor, Pickr} from "pickr-widget";
-import {createUiColorCssString} from "../util/CssFormatUtil";
-import {executeWhenAttached} from "../util/ExecuteWhenAttached";
-import {keyCodes} from "trivial-components";
+import {executeWhenFirstDisplayed} from "../util/ExecuteWhenFirstDisplayed";
+import {keyCodes} from "../trivial-components/TrivialCore";
+import {parseHtml} from "../Common";
 
-export class UiColorPicker extends UiField<UiColorPickerConfig, UiColorConfig> implements UiColorPickerEventSource {
-	private $main: JQuery;
+export class UiColorPicker extends UiField<UiColorPickerConfig, string> implements UiColorPickerEventSource {
+	private $main: HTMLElement;
 	private pickr: Pickr;
 	private doNotCommit: boolean;
 
 	protected initialize(config: UiColorPickerConfig, context: TeamAppsUiContext) {
-		this.$main = $(`<div class="UiColorPicker" tabindex="-1"><div class="pickr"></div></div>`);
+		this.$main = parseHtml(`<div class="UiColorPicker" tabindex="-1"><div class="pickr"></div></div>`);
 		this.doNotCommit = true;
 		this.pickr = createPickr({
-			el: this.$main.find('.pickr')[0],
+			el: this.$main.querySelector<HTMLElement>(':scope .pickr'),
 			parent: document.body,
 			position: "middle",
 
-			default: createUiColorCssString(config.defaultColor),
+			default: config.defaultColor,
 
 			comparison: false,
 
@@ -79,30 +77,27 @@ export class UiColorPicker extends UiField<UiColorPickerConfig, UiColorConfig> i
 		});
 		this.doNotCommit = false;
 
-		this.$main.on("keydown", (e) => {
+		this.$main.addEventListener("keydown", (e) => {
 			if (e.keyCode === keyCodes.enter || e.keyCode === keyCodes.space) {
 				this.pickr.show();
 			}
 		});
 
-		this.$main.find(".pcr-button").addClass("field-border field-border-glow");
+		this.$main.querySelector<HTMLElement>(":scope .pcr-button").classList.add("field-border", "field-border-glow");
 	}
 
-	isValidData(v: UiColorConfig): boolean {
-		return v == null || (v.red != null && v.green != null && v.blue != null && v.alpha != null);
+	isValidData(v: string): boolean {
+		return v == null || typeof v == 'string';
 	}
 
 	commit(forceEvenIfNotChanged?: boolean): boolean {
 		return super.commit(forceEvenIfNotChanged);
 	}
 
-	@executeWhenAttached()
+	@executeWhenFirstDisplayed()
 	protected displayCommittedValue(): void {
 		let committedValue = this.getCommittedValue();
-		if (committedValue != null && committedValue.alpha === 1) { // TODO https://github.com/Simonwep/pickr/issues/19
-			committedValue = {...committedValue, alpha: .999999};
-		}
-		let colorString = committedValue != null ? createUiColorCssString(committedValue) : createUiColorCssString(this.getDefaultValue());
+		let colorString = committedValue ?? this.getDefaultValue();
 
 		try {
 			this.doNotCommit = true;
@@ -112,23 +107,23 @@ export class UiColorPicker extends UiField<UiColorPickerConfig, UiColorConfig> i
 		}
 	}
 
-	getDefaultValue(): UiColorConfig {
+	getDefaultValue(): string {
 		return this._config.defaultColor;
 	}
 
-	getFocusableElement(): JQuery {
-		return this.$main;
+	@executeWhenFirstDisplayed()
+	focus(): void {
+		return this.$main.focus();
 	}
 
-	getMainInnerDomElement(): JQuery {
+	getMainInnerDomElement(): HTMLElement {
 		return this.$main;
 	}
 
-	getTransientValue(): UiColorConfig {
+	getTransientValue(): string {
 		const color = this.pickr.getColor();
 		let rgb = color.toRGBA(); // the alpha value is buggy
-		const uiColorConfig = createUiColorConfig(rgb[0], rgb[1], rgb[2], {alpha: color.a});
-		return uiColorConfig;
+		return `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${color.a})`;
 	}
 
 	protected onEditingModeChanged(editingMode: UiFieldEditingMode): void {
@@ -139,16 +134,13 @@ export class UiColorPicker extends UiField<UiColorPickerConfig, UiColorConfig> i
 		}
 	}
 
-	valuesChanged(v1: UiColorConfig, v2: UiColorConfig): boolean {
+	valuesChanged(v1: string, v2: string): boolean {
 		return (v1 == null) !== (v2 == null)
-			|| (v1 != null && v2 != null)
-			&& (v1.red !== v2.red
-				|| v1.green !== v2.green
-				|| v1.blue !== v2.blue
-				|| v1.alpha !== v2.alpha);
+			|| (v1 != null && v2 != null && v1 !== v2);
 	}
 
-	doDestroy(): void {
+	destroy(): void {
+		super.destroy();
 		this.pickr.destroyAndRemove();
 	}
 
diff --git a/teamapps-client/ts/modules/formfield/UiComboBox.ts b/teamapps-client/ts/modules/formfield/UiComboBox.ts
index 7053d9769..2ebccbfed 100644
--- a/teamapps-client/ts/modules/formfield/UiComboBox.ts
+++ b/teamapps-client/ts/modules/formfield/UiComboBox.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,71 +17,44 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-import * as $ from "jquery";
-import {defaultTreeQueryFunctionFactory, keyCodes, ResultCallback, TrivialComboBox, trivialMatch, TrivialTreeBox} from "trivial-components";
+import {TrivialComboBox} from "../trivial-components/TrivialComboBox";
+import {TrivialTreeBox} from "../trivial-components/TrivialTreeBox";
 
 import {UiFieldEditingMode} from "../../generated/UiFieldEditingMode";
-import {UiTextMatchingMode} from "../../generated/UiTextMatchingMode";
 import {UiField} from "./UiField";
 import {TeamAppsUiContext} from "../TeamAppsUiContext";
-import {UiComboBox_LazyChildDataRequestedEvent, UiComboBoxCommandHandler, UiComboBoxConfig, UiComboBoxEventSource} from "../../generated/UiComboBoxConfig";
+import {UiComboBoxCommandHandler, UiComboBoxConfig, UiComboBoxEventSource} from "../../generated/UiComboBoxConfig";
 import {TeamAppsEvent} from "../util/TeamAppsEvent";
 import {TeamAppsUiComponentRegistry} from "../TeamAppsUiComponentRegistry";
-import {UiTextInputHandlingField_SpecialKeyPressedEvent, UiTextInputHandlingField_TextInputEvent} from "../../generated/UiTextInputHandlingFieldConfig";
+import {
+	UiTextInputHandlingField_SpecialKeyPressedEvent,
+	UiTextInputHandlingField_TextInputEvent
+} from "../../generated/UiTextInputHandlingFieldConfig";
 import {UiSpecialKey} from "../../generated/UiSpecialKey";
 import {UiComboBoxTreeRecordConfig} from "../../generated/UiComboBoxTreeRecordConfig";
 import {UiTemplateConfig} from "../../generated/UiTemplateConfig";
 import {buildObjectTree, NodeWithChildren, Renderer} from "../Common";
-import {EventFactory} from "../../generated/EventFactory";
+import {TreeBoxDropdown} from "../trivial-components/dropdown/TreeBoxDropdown";
+import {UiToolButton} from "../micro-components/UiToolButton";
+import {executeWhenFirstDisplayed} from "../util/ExecuteWhenFirstDisplayed";
 
 export function isFreeTextEntry(o: UiComboBoxTreeRecordConfig): boolean {
 	return o != null && o.id < 0;
 }
 
 export class UiComboBox extends UiField<UiComboBoxConfig, UiComboBoxTreeRecordConfig> implements UiComboBoxEventSource, UiComboBoxCommandHandler {
-	public readonly onTextInput: TeamAppsEvent<UiTextInputHandlingField_TextInputEvent> = new TeamAppsEvent(this, 250);
-	public readonly onSpecialKeyPressed: TeamAppsEvent<UiTextInputHandlingField_SpecialKeyPressedEvent> = new TeamAppsEvent(this, 250);
-	public readonly onLazyChildDataRequested: TeamAppsEvent<UiComboBox_LazyChildDataRequestedEvent> = new TeamAppsEvent(this);
+	public readonly onTextInput: TeamAppsEvent<UiTextInputHandlingField_TextInputEvent> = new TeamAppsEvent({throttlingMode: "debounce", delay: 250});
+	public readonly onSpecialKeyPressed: TeamAppsEvent<UiTextInputHandlingField_SpecialKeyPressedEvent> = new TeamAppsEvent({throttlingMode: "debounce", delay: 250});
 
-	private $originalInput: JQuery;
 	private trivialComboBox: TrivialComboBox<NodeWithChildren<UiComboBoxTreeRecordConfig>>;
 	private templateRenderers: { [name: string]: Renderer };
-	private lastResultCallback: (result: NodeWithChildren<UiComboBoxTreeRecordConfig>[]) => void;
 
 	private freeTextIdEntryCounter = -1;
 
 	protected initialize(config: UiComboBoxConfig, context: TeamAppsUiContext) {
-		this.$originalInput = $(`<input type="text" autocomplete="off">`);
-
 		this.templateRenderers = config.templates != null ? context.templateRegistry.createTemplateRenderers(config.templates) : {};
 
-		let localQueryFunction: Function;
-		const objectTree = buildObjectTree(config.staticData, "id", "parentId");
-		if (config.staticData != null && config.staticData.length > 0) {
-			let trivialMatchingOptions = UiComboBox.createTrivialMatchingOptions(config);
-			localQueryFunction = defaultTreeQueryFunctionFactory(objectTree, (entry: NodeWithChildren<UiComboBoxTreeRecordConfig>, queryString: string) => {
-				if (config.staticDataMatchPropertyNames) {
-					return config.staticDataMatchPropertyNames.some(fieldName => entry.values[fieldName] && trivialMatch(entry.values[fieldName], queryString, trivialMatchingOptions).length > 0);
-				} else {
-					return trivialMatch(entry.asString, queryString, trivialMatchingOptions).length > 0;
-				}
-			}, "__children", "expanded");
-		}
-		let queryFunction = (queryString: string, resultCallback: ResultCallback<NodeWithChildren<UiComboBoxTreeRecordConfig>>) => {
-			this.lastResultCallback = resultCallback;
-			this.onTextInput.fire(EventFactory.createUiTextInputHandlingField_TextInputEvent(this.getId(), queryString));
-			if (localQueryFunction != null) {
-				localQueryFunction(queryString, resultCallback);
-			}
-		};
-
-		this.trivialComboBox = new TrivialComboBox<NodeWithChildren<UiComboBoxTreeRecordConfig>>(this.$originalInput, {
-			allowFreeText: config.allowAnyText,
-			childrenProperty: "__children",
-			expandedProperty: "expanded",
-			showExpanders: config.showExpanders,
-			queryFunction: queryFunction,
-			entryRenderingFunction: entry => this.renderRecord(entry, true),
+		this.trivialComboBox = new TrivialComboBox<NodeWithChildren<UiComboBoxTreeRecordConfig>>({
 			selectedEntryRenderingFunction: entry => {
 				if (entry == null) {
 					return "";
@@ -94,43 +67,70 @@ export class UiComboBox extends UiField<UiComboBoxConfig, UiComboBoxTreeRecordCo
 			autoComplete: !!config.autoComplete,
 			showTrigger: config.showDropDownButton,
 			editingMode: config.editingMode === UiFieldEditingMode.READONLY ? 'readonly' : config.editingMode === UiFieldEditingMode.DISABLED ? 'disabled' : 'editable',
-			lazyChildrenQueryFunction: (node: NodeWithChildren<UiComboBoxTreeRecordConfig>) => {
-				this.onLazyChildDataRequested.fire(EventFactory.createUiComboBox_LazyChildDataRequestedEvent(this.getId(), node.id));
-			},
-			lazyChildrenFlag: entry => entry.lazyChildren,
-			spinnerTemplate: `<div class="UiSpinner" style="height: 20px; width: 20px; margin: 4px auto 4px auto;"></div>`,
-			textHighlightingEntryLimit: config.textHighlightingEntryLimit,
+
 			showDropDownOnResultsOnly: config.showDropDownAfterResultsArrive,
 			showClearButton: config.showClearButton,
 			entryToEditorTextFunction: e => e.asString,
-			autoCompleteFunction: (editorText, entry) => {
-				const entryAsString = entry.asString;
-				if (entryAsString.toLowerCase().indexOf(editorText.toLowerCase()) === 0) {
-					return entryAsString;
+			textToEntryFunction: (freeText) => {
+				if (config.allowAnyText) {
+					return {id: this.freeTextIdEntryCounter--, values: {}, asString: freeText};
 				} else {
-					return "";
+					return null;
 				}
 			},
-			freeTextEntryFactory: (freeText) => {
-				return {id: this.freeTextIdEntryCounter--, values: {}, asString: freeText};
+			preselectFirstQueryResult: config.highlightFirstResultEntry,
+			placeholderText: config.placeholderText,
+			dropDownMaxHeight: config.dropDownMaxHeight,
+			dropDownMinWidth: config.dropDownMinWidth
+		}, new TreeBoxDropdown({
+			queryFunction: (queryString: string) => {
+				return config.retrieveDropdownEntries({queryString})
+					.then(entries => buildObjectTree(entries, "id", "parentId"));
 			},
-			idFunction: entry => entry && entry.id
-		});
-		$(this.trivialComboBox.getMainDomElement()).addClass("UiComboBox");
+			textHighlightingEntryLimit: config.textHighlightingEntryLimit,
+			preselectionMatcher: (query, entry) => entry.asString.toLowerCase().indexOf(query.toLowerCase()) >= 0
+		}, new TrivialTreeBox<NodeWithChildren<UiComboBoxTreeRecordConfig>>({
+			childrenProperty: "__children",
+			expandedProperty: "expanded",
+			showExpanders: config.showExpanders,
+			entryRenderingFunction: entry => this.renderRecord(entry, true),
+			idFunction: entry => entry && entry.id,
+			lazyChildrenQueryFunction: async (node: NodeWithChildren<UiComboBoxTreeRecordConfig>) => buildObjectTree(await config.lazyChildren({parentId: node.id}), "id", "parentId"),
+			lazyChildrenFlag: entry => entry.lazyChildren,
+			selectableDecider: entry => entry.selectable,
+			selectOnHover: true,
+			animationDuration: this._config.animate ? 120 : 0
+		})));
+		this.trivialComboBox.getMainDomElement().classList.add("UiComboBox", "default-min-field-width");
 		this.trivialComboBox.onSelectedEntryChanged.addListener(() => this.commit());
-		$(this.trivialComboBox.getEditor()).on("keydown", (e) => {
-			if (e.keyCode === keyCodes.escape) {
-				this.onSpecialKeyPressed.fire(EventFactory.createUiTextInputHandlingField_SpecialKeyPressedEvent(this.getId(), UiSpecialKey.ESCAPE));
-			} else if (e.keyCode === keyCodes.enter) {
-				this.onSpecialKeyPressed.fire(EventFactory.createUiTextInputHandlingField_SpecialKeyPressedEvent(this.getId(), UiSpecialKey.ENTER));
+		this.trivialComboBox.getEditor().addEventListener("keydown", (e: KeyboardEvent) => {
+			if (e.key === "Escape") {
+				this.onSpecialKeyPressed.fire({
+					key: UiSpecialKey.ESCAPE
+				});
+			} else if (e.key === "Enter") {
+				this.onSpecialKeyPressed.fire({
+					key: UiSpecialKey.ENTER
+				});
 			}
 		});
+		this.trivialComboBox.getEditor().addEventListener("input", e => this.onTextInput.fire({enteredString: (e.target as HTMLInputElement).value}));
+
+		this.trivialComboBox.getMainDomElement().classList.add("field-border", "field-border-glow", "field-background");
+		this.trivialComboBox.getMainDomElement().querySelector<HTMLElement>(":scope .tr-editor").classList.add("field-background");
+		this.trivialComboBox.getMainDomElement().querySelector<HTMLElement>(":scope .tr-trigger").classList.add("field-border");
+		if (config.toolButtons != null) {
+			this.trivialComboBox.setToolButtons(config.toolButtons as UiToolButton[]);
+		}
+	}
+
+	setToolButtons(toolButtons: unknown[]): any {
+		this.trivialComboBox.setToolButtons((toolButtons as UiToolButton[]) ?? []);
+	}
 
-		$(this.trivialComboBox.getMainDomElement()).addClass("field-border field-border-glow field-background");
-		$(this.trivialComboBox.getMainDomElement()).find(".tr-editor").addClass("field-background");
-		$(this.trivialComboBox.getMainDomElement()).find(".tr-trigger").addClass("field-border");
-		this.trivialComboBox.onFocus.addListener(() => this.getMainDomElement().addClass("focus"));
-		this.trivialComboBox.onBlur.addListener(() => this.getMainDomElement().removeClass("focus"));
+	protected initFocusHandling() {
+		this.trivialComboBox.onFocus.addListener(() => this.onFocusGained.fire({}));
+		this.trivialComboBox.onBlur.addListener(() => this.onBlur.fire({}));
 	}
 
 	private renderRecord(record: NodeWithChildren<UiComboBoxTreeRecordConfig>, dropdown: boolean): string {
@@ -147,52 +147,17 @@ export class UiComboBox extends UiField<UiComboBoxConfig, UiComboBoxTreeRecordCo
 		return v == null || typeof v === "object" && (v as UiComboBoxTreeRecordConfig).id != null;
 	}
 
-	static createTrivialMatchingOptions(config: { textMatchingMode?: UiTextMatchingMode }) {
-		let matchingModes: { [x: number]: 'contains' | 'prefix' | 'prefix-word' | 'prefix-levenshtein' | 'levenshtein' } = {
-			[UiTextMatchingMode.PREFIX]: "prefix",
-			[UiTextMatchingMode.PREFIX_WORD]: "prefix-word",
-			[UiTextMatchingMode.CONTAINS]: "contains",
-			[UiTextMatchingMode.SIMILARITY]: "prefix-levenshtein"
-		};
-		return {
-			matchingMode: matchingModes[config.textMatchingMode],
-			ignoreCase: true,
-			maxLevenshteinDistance: 3
-		};
-	}
-
-	setDropDownData(data: UiComboBoxTreeRecordConfig[]): void {
-		const objectTree = buildObjectTree(data, "id", "parentId");
-		if (this.lastResultCallback != null) {
-			this.lastResultCallback(objectTree);
-		} else {
-			this.trivialComboBox.updateEntries(objectTree);
-		}
-		if (this._config.showDropDownAfterResultsArrive && data.length > 0 && this.hasFocus()) {
-			this.trivialComboBox.openDropDown();
-		}
-	}
-
-	setChildNodes(parentId: number, recordList: UiComboBoxTreeRecordConfig[]): void {
-		const objectTree = buildObjectTree(recordList, "id", "parentId");
-		(this.trivialComboBox.getDropDownComponent() as TrivialTreeBox<NodeWithChildren<UiComboBoxTreeRecordConfig>>).updateChildren(parentId as any /*fix trivial-components tsd*/, objectTree);
-	}
-
-	public getMainInnerDomElement(): JQuery {
-		return $(this.trivialComboBox.getMainDomElement());
-	}
-
-	public getFocusableElement(): JQuery {
-		return $(this.trivialComboBox.getMainDomElement());
+	public getMainInnerDomElement(): HTMLElement {
+		return this.trivialComboBox.getMainDomElement() as HTMLElement;
 	}
 
 	protected displayCommittedValue(): void {
 		let uiValue = this.getCommittedValue();
-		this.trivialComboBox.setSelectedEntry(uiValue, true);
+		this.trivialComboBox.setValue(uiValue);
 	}
 
 	public getTransientValue(): any {
-		return this.trivialComboBox.getSelectedEntry();
+		return this.trivialComboBox.getValue();
 	}
 
 	protected convertValueForSendingToServer(value: UiComboBoxTreeRecordConfig): any {
@@ -202,18 +167,16 @@ export class UiComboBox extends UiField<UiComboBoxConfig, UiComboBoxTreeRecordCo
 		return isFreeTextEntry(value) ? value.asString : value.id;
 	}
 
+	@executeWhenFirstDisplayed()
 	focus(): void {
-		this.trivialComboBox.focus();
-	}
-
-	public hasFocus(): boolean {
-		return this.getMainInnerDomElement().is('.focus');
+		if (this.isEditable()) {
+			this.trivialComboBox.focus();
+		}
 	}
 
 	protected onEditingModeChanged(editingMode: UiFieldEditingMode): void {
-		this.getMainDomElement()
-			.removeClass(Object.values(UiField.editingModeCssClasses).join(" "))
-			.addClass(UiField.editingModeCssClasses[editingMode]);
+		this.getMainElement().classList.remove(...Object.values(UiField.editingModeCssClasses));
+		this.getMainElement().classList.add(UiField.editingModeCssClasses[editingMode]);
 		if (editingMode === UiFieldEditingMode.READONLY) {
 			this.trivialComboBox.setEditingMode("readonly");
 		} else if (editingMode === UiFieldEditingMode.DISABLED) {
@@ -228,15 +191,15 @@ export class UiComboBox extends UiField<UiComboBoxConfig, UiComboBoxTreeRecordCo
 	}
 
 	replaceFreeTextEntry(freeText: string, record: UiComboBoxTreeRecordConfig): void {
-		const selectedEntry = this.trivialComboBox.getSelectedEntry();
+		const selectedEntry = this.trivialComboBox.getValue();
 		if (isFreeTextEntry(selectedEntry) && selectedEntry.asString === freeText) {
 			this.setCommittedValue(record);
 		}
 	}
 
-	doDestroy(): void {
+	destroy(): void {
+		super.destroy();
 		this.trivialComboBox.destroy();
-		this.$originalInput.detach();
 	}
 
 	public getReadOnlyHtml(value: UiComboBoxTreeRecordConfig, availableWidth: number): string {
diff --git a/teamapps-client/ts/modules/formfield/UiComponentField.ts b/teamapps-client/ts/modules/formfield/UiComponentField.ts
index f1ecd3629..368a19b1a 100644
--- a/teamapps-client/ts/modules/formfield/UiComponentField.ts
+++ b/teamapps-client/ts/modules/formfield/UiComponentField.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,85 +17,64 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-import * as $ from "jquery";
 import {UiComponentConfig} from "../../generated/UiComponentConfig";
 import {UiFieldEditingMode} from "../../generated/UiFieldEditingMode";
 import {UiField} from "./UiField";
-import {UiComponent} from "../UiComponent";
 import {TeamAppsUiContext} from "../TeamAppsUiContext";
-import {UiComponentFieldConfig, UiComponentFieldCommandHandler, UiComponentFieldEventSource} from "../../generated/UiComponentFieldConfig";
+import {UiComponentFieldCommandHandler, UiComponentFieldConfig, UiComponentFieldEventSource} from "../../generated/UiComponentFieldConfig";
 import {TeamAppsUiComponentRegistry} from "../TeamAppsUiComponentRegistry";
-import {createUiBorderCssObject, createUiColorCssString} from "../util/CssFormatUtil";
-import {UiColorConfig} from "../../generated/UiColorConfig";
-import {UiBorderConfig} from "../../generated/UiBorderConfig";
+import {parseHtml} from "../Common";
+import {UiComponent} from "../UiComponent";
+import {executeWhenFirstDisplayed} from "../util/ExecuteWhenFirstDisplayed";
 
 
 export class UiComponentField extends UiField<UiComponentFieldConfig, void> implements UiComponentFieldEventSource, UiComponentFieldCommandHandler {
 
 	private component: UiComponent<UiComponentConfig>;
-	private $componentWrapper: JQuery;
+	private $componentWrapper: HTMLElement;
 
 	protected initialize(config: UiComponentFieldConfig, context: TeamAppsUiContext) {
-		this.$componentWrapper = $('<div class="UiComponentField"/>');
-		this.setBackgroundColor(config.backgroundColor);
-		this.setBorder(config.border);
-		this.setSize(config.width, config.height);
-		this.setComponent(config.component);
+		this.$componentWrapper = parseHtml('<div class="UiComponentField"></div>');
+		this.setHeight(config.height);
+		this.setComponent(config.component as UiComponent);
+		this.setBordered(!!config.bordered)
 	}
 
 	isValidData(v: void): boolean {
 		return true;
 	}
 
-	setBackgroundColor(backgroundColor: UiColorConfig): void {
-		this.$componentWrapper.css({
-			"background-color": backgroundColor ? createUiColorCssString(backgroundColor) : ''
-		});
-	}
-
-	setBorder(border: UiBorderConfig): void {
-		this.$componentWrapper.css(createUiBorderCssObject(border));
+	setBordered(bordered: boolean): void {
+		this.$componentWrapper.classList.toggle("bordered", bordered);
+		this.$componentWrapper.classList.toggle("field-border", bordered);
+		this.$componentWrapper.classList.toggle("field-border-glow", bordered)
 	}
 
 	setComponent(component: UiComponent): void {
 		if (this.component != null) {
-			this.component.getMainDomElement().detach();
+			this.component.getMainElement().remove();
 		}
 		this.component = component;
-		this.component.getMainDomElement().appendTo(this.$componentWrapper);
-	}
-
-	setSize(width: number, height: number): void {
-		this.$componentWrapper.css({
-			height: height ? `${height}px` : '',
-			width: width ? `${width}px` : ''
-		});
+		this.$componentWrapper.appendChild(this.component.getMainElement());
 	}
 
-	protected onAttachedToDom(): void {
-		this.component.attachedToDom = true;
+	setHeight(height: number): void {
+		this.$componentWrapper.style.height = height ? `${height}px` : '';
 	}
 
-	public getMainInnerDomElement(): JQuery {
+	public getMainInnerDomElement(): HTMLElement {
 		return this.$componentWrapper;
 	}
 
-	public getFocusableElement(): JQuery {
-		return null;
-	}
-
 	protected displayCommittedValue(): void {
 		// do nothing
 	}
 
+	@executeWhenFirstDisplayed()
 	focus(): void {
 		// do nothing
 	}
 
-	doDestroy(): void {
-		this.$componentWrapper.detach();
-	}
-
 	getTransientValue(): void {
 	}
 
@@ -110,9 +89,6 @@ export class UiComponentField extends UiField<UiComponentFieldConfig, void> impl
 		return false;
 	}
 
-	onResize(): void {
-		this.component && this.component.reLayout(true);
-	}
 }
 
 TeamAppsUiComponentRegistry.registerFieldClass("UiComponentField", UiComponentField);
diff --git a/teamapps-client/ts/modules/formfield/UiCompositeField.ts b/teamapps-client/ts/modules/formfield/UiCompositeField.ts
index eaf9aa4ba..4ad461a1a 100644
--- a/teamapps-client/ts/modules/formfield/UiCompositeField.ts
+++ b/teamapps-client/ts/modules/formfield/UiCompositeField.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,25 +17,25 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-import * as $ from "jquery";
 import {TeamAppsEvent} from "../util/TeamAppsEvent";
 import {UiField, ValueChangeEventData} from "./UiField";
 import * as log from "loglevel";
-import Logger = log.Logger;
 import {TeamAppsUiContext} from "../TeamAppsUiContext";
-import {keyCodes} from "trivial-components";
 import {UiCompositeSubFieldConfig} from "../../generated/UiCompositeSubFieldConfig";
 import {UiCompositeFieldConfig} from "../../generated/UiCompositeFieldConfig";
-import {UiEvent} from "../../generated/UiEvent";
 import {UiFieldEditingMode} from "../../generated/UiFieldEditingMode";
 import {UiColumnDefinitionConfig} from "../../generated/UiColumnDefinitionConfig";
 import {TeamAppsUiComponentRegistry} from "../TeamAppsUiComponentRegistry";
-import {TableDataProviderItem} from "../table/TableDataProvider";
+import Logger = log.Logger;
+import {closestAncestor, parseHtml} from "../Common";
+import {TableDataProviderItem} from "../UiInfiniteItemView";
+import {UiTableClientRecordConfig} from "../../generated/UiTableClientRecordConfig";
+import {executeWhenFirstDisplayed} from "../util/ExecuteWhenFirstDisplayed";
 
 export type SubField = {
 	config: UiCompositeSubFieldConfig,
 	field: UiField,
-	$cell: JQuery,
+	$cell: HTMLElement,
 	visible?: boolean
 };
 
@@ -49,21 +49,21 @@ export class UiCompositeField extends UiField<UiCompositeFieldConfig, any> {
 	private static logger: Logger = log.getLogger("UiCompositeField");
 
 	public readonly onSubFieldValueChanged: TeamAppsEvent<ValueChangeEventData & { fieldName: string, originalEmitter: UiField }> =
-		new TeamAppsEvent<ValueChangeEventData & { fieldName: string, originalEmitter: UiField }>(this);
+		new TeamAppsEvent<ValueChangeEventData & { fieldName: string, originalEmitter: UiField }>();
 
 	private subFields: SubField[];
-	private $wrapper: JQuery;
+	private $wrapper: HTMLElement;
 
 	protected initialize(config: UiCompositeFieldConfig, context: TeamAppsUiContext) {
 		this.logger.debug('initializing');
 		this.subFields = [];
 		let {$wrapper, subFieldSkeletons} = UiCompositeField.createDomStructure(config);
 		subFieldSkeletons.forEach(subFieldSkeleton => {
-			const field = subFieldSkeleton.config.field;
-			field.getMainDomElement().appendTo(subFieldSkeleton.$cell);
+			const field = subFieldSkeleton.config.field as UiField;
+			subFieldSkeleton.$cell.appendChild(field.getMainElement());
 			field.onValueChanged.addListener((eventObject: ValueChangeEventData ) => {
 				this.onSubFieldValueChanged.fire({
-					fieldName: subFieldSkeleton.config.field.fieldName,
+					fieldName: "TODO!",
 					originalEmitter: field,
 					...eventObject
 				});
@@ -75,12 +75,12 @@ export class UiCompositeField extends UiField<UiCompositeFieldConfig, any> {
 		});
 		UiCompositeField.validateNumberOfRowHeights(config);
 
-		$wrapper.on("keydown", (e) => {
-			if (e.which == keyCodes.tab) {
+		$wrapper.addEventListener("keydown", (e: KeyboardEvent) => {
+			if (e.key == "Tab") {
 				let nextFocusableField = this.getNextFocusableField(e.shiftKey ? -1 : 1);
 				if (nextFocusableField != null) {
 					nextFocusableField.focus();
-					this.logger.trace("navigated to " + nextFocusableField.getMainInnerDomElement()[0]);
+					this.logger.trace("navigated to " + nextFocusableField.getMainInnerDomElement());
 					return false;
 				} else {
 					this.logger.trace("not navigated");
@@ -131,7 +131,6 @@ export class UiCompositeField extends UiField<UiCompositeFieldConfig, any> {
 		let allFocusableSubFields = allSubFields
 			.filter(f => f.field.getEditingMode() !== UiFieldEditingMode.READONLY
 				&& f.field.getEditingMode() !== UiFieldEditingMode.DISABLED
-				&& f.field.getFocusableElement() != null
 				&& f.visible === true);
 		return allFocusableSubFields
 			.sort((sf1: SubField, sf2: SubField) => {
@@ -153,21 +152,18 @@ export class UiCompositeField extends UiField<UiCompositeFieldConfig, any> {
 		return `[${sf.config.tabIndex}-${sf.config.row}-${sf.config.col}]`;
 	}
 
-	public getMainInnerDomElement(): JQuery {
+	public getMainInnerDomElement(): HTMLElement {
 		return this.$wrapper;
 	}
 
-	public getFocusableElement(): JQuery {
-		return this.$wrapper; // TODO!!
-	}
-
 	protected displayCommittedValue(): void {
 		let committedValue: any = this.getCommittedValue();
 		this.getAllSubFields().forEach(subField => {
 			if (committedValue == null) {
 				subField.field.setCommittedValue(null);
 			} else {
-				subField.field.setCommittedValue(committedValue[subField.config.field.fieldName]);
+				let fieldName = "TODO!"; //(subField.config.field as UiField).fieldName;
+				subField.field.setCommittedValue(committedValue[fieldName]);
 			}
 		});
 		UiCompositeField.updateDeclaredSubfieldVisibilities(this.subFields, committedValue);
@@ -180,12 +176,14 @@ export class UiCompositeField extends UiField<UiCompositeFieldConfig, any> {
 			.forEach(subField => {
 				let coordinates = subField.config.row + ',' + subField.config.col;
 				if (visibleFieldsByCell[coordinates] != null) {
-					UiCompositeField.logger.warn(`Two or more sub-fields are visible in the same cell in UiCompositeField! Showing the last one only. Conflicting fieldNames: ${visibleFieldsByCell[coordinates].config.field.fieldName}, ${subField.config.field.fieldName}`);
+					let fieldName = "TODO!"; // visibleFieldsByCell[coordinates].config.field.fieldName;
+					let otherFieldName = "TODO!"; //subField.config.field.fieldName;
+					UiCompositeField.logger.warn(`Two or more sub-fields are visible in the same cell in UiCompositeField! Showing the last one only. Conflicting fieldNames: ${fieldName}, ${otherFieldName}`);
 				}
 				visibleFieldsByCell[coordinates] = subField;
 			});
 		let visibleSubFields = Object.keys(visibleFieldsByCell).map(key => visibleFieldsByCell[key]);
-		subFields.forEach(subField => subField.$cell.toggleClass("hidden", visibleSubFields.indexOf(subField) === -1));
+		subFields.forEach(subField => subField.$cell.classList.toggle("hidden", visibleSubFields.indexOf(subField) === -1));
 	}
 
 	private static updateDeclaredSubfieldVisibilities(subFieldSkeletons: SubField[], value: any) {
@@ -203,11 +201,12 @@ export class UiCompositeField extends UiField<UiCompositeFieldConfig, any> {
 		return this.getCommittedValue(); // we might want to overwrite the values contained in this composite field...
 	}
 
+	@executeWhenFirstDisplayed()
 	focus(): void {
 		if (window.event instanceof MouseEvent) {
-			let $cell = $(window.event.target).closest(".subfield-wrapper");
-			if ($cell.length > 0) {
-				let subField = this.getSubFieldByFieldName($cell.attr("data-field-propertyname"));
+			let $cell = closestAncestor(window.event.target as HTMLElement, ".subfield-wrapper");
+			if ($cell != null) {
+				let subField = this.getSubFieldByFieldName($cell.getAttribute("data-fieldname"));
 				if (subField) {
 					subField.field.focus();
 					return;
@@ -224,7 +223,9 @@ export class UiCompositeField extends UiField<UiCompositeFieldConfig, any> {
 	}
 
 	private getSubFieldByFieldName(fieldName: string): SubField {
-		return this.subFields.filter(sf => sf.config.field.fieldName === fieldName)[0];
+		console.error("TODO");
+		return null;
+		// return this.subFields.filter(sf => sf.config.field.fieldName === fieldName)[0];
 	}
 
 	protected onEditingModeChanged(editingMode: UiFieldEditingMode): void {
@@ -239,10 +240,6 @@ export class UiCompositeField extends UiField<UiCompositeFieldConfig, any> {
 		return this.subFields;
 	}
 
-	doDestroy(): void {
-		this.$wrapper.detach();
-	}
-
 	public getReadOnlyHtml(value: any, availableWidth: number): string {
 		UiCompositeField.validateNumberOfRowHeights(this._config);
 		let {$wrapper, subFieldSkeletons} = UiCompositeField.createDomStructure(this._config);
@@ -252,26 +249,26 @@ export class UiCompositeField extends UiField<UiCompositeFieldConfig, any> {
 
 		subFieldSkeletons.forEach(subfield => {
 			if (subfield.field.getReadOnlyHtml) {
-				return (row: number, cell: number, value: any, columnDef: Slick.Column<TableDataProviderItem>, dataContext: TableDataProviderItem) => {
+				return (row: number, cell: number, value: any, columnDef: Slick.Column<UiTableClientRecordConfig>, dataContext: UiTableClientRecordConfig) => {
 					return subfield.field.getReadOnlyHtml(dataContext.values[subfield.config.propertyName], columnDef.width);
 				};
 			}
 		});
-		$wrapper.addClass("static-readonly-UiCompositeField");
-		return $("<div></div>").append($wrapper.clone()).html();
+		$wrapper.classList.add("static-readonly-UiCompositeField");
+		return $wrapper.outerHTML;
 	}
 
 	private static createDomStructure(config: UiCompositeFieldConfig) {
-		const $wrapper = $(`<div class="UiCompositeField" style="padding: ${config.padding}px"><div class="padding-wrapper"></div></div>`);
-		const $paddingWrapper = $wrapper.find(".padding-wrapper");
-		$paddingWrapper.css("height", config.rowHeights.reduce((sum, height) => sum + height, 0) + "px");
+		const $wrapper = parseHtml(`<div class="UiCompositeField" style="padding: ${config.padding}px"><div class="padding-wrapper"></div></div>`);
+		const $paddingWrapper = $wrapper.querySelector<HTMLElement>(":scope .padding-wrapper");
+		$paddingWrapper.style.height = config.rowHeights.reduce((sum, height) => sum + height, 0) + "px";
 		let subFieldSkeletons: SubField[] = [];
 		config.subFields.forEach(subFieldConfig => {
-			const uiField: UiField = subFieldConfig.field;
-			let $cell = $(`<div class="subfield-wrapper" data-field-propertyname="${subFieldConfig.propertyName}" data-row="${subFieldConfig.row}" data-col="${subFieldConfig.col}" data-rowspan="${subFieldConfig.rowSpan}" data-colspan="${subFieldConfig.colSpan}"/>`);
-			$cell.appendTo($paddingWrapper);
+			const uiField: UiField = subFieldConfig.field as UiField;
+			let $cell = parseHtml(`<div class="subfield-wrapper" data-field-propertyname="${subFieldConfig.propertyName}" data-row="${subFieldConfig.row}" data-col="${subFieldConfig.col}" data-rowspan="${subFieldConfig.rowSpan}" data-colspan="${subFieldConfig.colSpan}"></div>`);
+			$paddingWrapper.appendChild($cell);
 			if (config.drawFieldBorders) {
-				$cell.addClass("bordered");
+				$cell.classList.add("bordered");
 			}
 			subFieldSkeletons.push({
 				config: subFieldConfig,
@@ -283,7 +280,7 @@ export class UiCompositeField extends UiField<UiCompositeFieldConfig, any> {
 	}
 
 	public onResize(): void {
-		UiCompositeField.applyLayout(this.subFields, this._config.columnDefinitions, this._config.rowHeights, this._config.horizontalCellSpacing, this._config.verticalCellSpacing, this.getMainInnerDomElement().outerWidth() - this._config.padding);
+		UiCompositeField.applyLayout(this.subFields, this._config.columnDefinitions, this._config.rowHeights, this._config.horizontalCellSpacing, this._config.verticalCellSpacing, this.getMainInnerDomElement().offsetWidth - this._config.padding);
 	}
 
 	private static applyLayout(subFieldSkeletons: SubField[], columnDefinitions: UiColumnDefinitionConfig[], rowHeights: number[], horizontalCellSpacing: number, verticalCellSpacing: number, availableWidth: number) {
@@ -317,7 +314,7 @@ export class UiCompositeField extends UiField<UiCompositeFieldConfig, any> {
 		subFieldSkeletons.forEach(subFieldSkeleton => {
 			let endCol = subFieldSkeleton.config.col + subFieldSkeleton.config.colSpan - 1;
 			let endRow = subFieldSkeleton.config.row + subFieldSkeleton.config.rowSpan - 1;
-			subFieldSkeleton.$cell.css({
+			Object.assign(subFieldSkeleton.$cell.style, {
 				left: cellLeftEdges[subFieldSkeleton.config.col],
 				top: cellTopEdges[subFieldSkeleton.config.row],
 				width: cellRightEdges[endCol] - cellLeftEdges[subFieldSkeleton.config.col],
@@ -375,7 +372,7 @@ export class UiCompositeField extends UiField<UiCompositeFieldConfig, any> {
 		if (typeof value === "boolean") {
 			let affectedSubFields = this.subFields
 				.filter(subField => subField.config.visibilityPropertyName === fieldName);
-			this.logger.debug("This value change affects the visibilities of the following fields: " + affectedSubFields.map(f => f.config.field.fieldName).join(', '));
+			this.logger.debug("This value change affects the visibilities of the following fields: " + affectedSubFields.map(f => "TODO!" /*f.config.field.fieldName*/).join(', '));
 			affectedSubFields
 				.forEach(subField => subField.visible = value);
 			UiCompositeField.updateSubFieldVisibilities(this.subFields);
diff --git a/teamapps-client/ts/modules/formfield/UiCurrencyField.ts b/teamapps-client/ts/modules/formfield/UiCurrencyField.ts
index 1466263eb..f96b7b20f 100644
--- a/teamapps-client/ts/modules/formfield/UiCurrencyField.ts
+++ b/teamapps-client/ts/modules/formfield/UiCurrencyField.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,92 +17,111 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-import * as $ from "jquery";
-import {DEFAULT_RENDERING_FUNCTIONS, defaultListQueryFunctionFactory, keyCodes, QueryFunction, TrivialUnitBox} from "trivial-components";
+import {defaultListQueryFunctionFactory, keyCodes, QueryFunction} from "../trivial-components/TrivialCore";
+import {TrivialUnitBox, TrivialUnitBoxChangeEvent} from "../trivial-components/TrivialUnitBox";
 
 import {createUiCurrencyValueConfig, UiCurrencyValueConfig} from "../../generated/UiCurrencyValueConfig";
 import {UiFieldEditingMode} from "../../generated/UiFieldEditingMode";
-import {UiCurrencyFieldConfig, UiCurrencyFieldCommandHandler, UiCurrencyFieldEventSource} from "../../generated/UiCurrencyFieldConfig";
+import {UiCurrencyFieldCommandHandler, UiCurrencyFieldConfig, UiCurrencyFieldEventSource} from "../../generated/UiCurrencyFieldConfig";
 import {UiField} from "./UiField";
 import {TeamAppsUiContext} from "../TeamAppsUiContext";
-import {CURRENCIES, Currency} from "../util/currencies";
-import {formatDecimalNumber} from "../Common";
+import {deepEquals, selectElementContents} from "../Common";
 import {TeamAppsUiComponentRegistry} from "../TeamAppsUiComponentRegistry";
-import {UiTextInputHandlingField_SpecialKeyPressedEvent, UiTextInputHandlingField_TextInputEvent} from "../../generated/UiTextInputHandlingFieldConfig";
+import {
+	UiTextInputHandlingField_SpecialKeyPressedEvent,
+	UiTextInputHandlingField_TextInputEvent
+} from "../../generated/UiTextInputHandlingFieldConfig";
 import {TeamAppsEvent} from "../util/TeamAppsEvent";
 import {UiSpecialKey} from "../../generated/UiSpecialKey";
-import {EventFactory} from "../../generated/EventFactory";
+import {UiCurrencyUnitConfig} from "../../generated/UiCurrencyUnitConfig";
+import {BigDecimal} from "../util/BigDecimalString";
+import {executeWhenFirstDisplayed} from "../util/ExecuteWhenFirstDisplayed";
 
 export class UiCurrencyField extends UiField<UiCurrencyFieldConfig, UiCurrencyValueConfig> implements UiCurrencyFieldEventSource, UiCurrencyFieldCommandHandler {
 
-	public readonly onTextInput: TeamAppsEvent<UiTextInputHandlingField_TextInputEvent> = new TeamAppsEvent<UiTextInputHandlingField_TextInputEvent>(this, 250);
-	public readonly onSpecialKeyPressed: TeamAppsEvent<UiTextInputHandlingField_SpecialKeyPressedEvent> = new TeamAppsEvent<UiTextInputHandlingField_SpecialKeyPressedEvent>(this, 250);
+	public readonly onTextInput: TeamAppsEvent<UiTextInputHandlingField_TextInputEvent> = new TeamAppsEvent<UiTextInputHandlingField_TextInputEvent>({throttlingMode: "debounce", delay: 250});
+	public readonly onSpecialKeyPressed: TeamAppsEvent<UiTextInputHandlingField_SpecialKeyPressedEvent> = new TeamAppsEvent<UiTextInputHandlingField_SpecialKeyPressedEvent>({throttlingMode: "debounce", delay: 250});
 
-	private trivialUnitBox: TrivialUnitBox<Currency>;
-	private $originalInput: JQuery;
-
-	private currencyCodeList: string[];
-	private showCurrencySymbol: boolean;
-	private defaultCurrencyCode: string;
-	
-	private queryFunction: QueryFunction<Currency>;
+	private trivialUnitBox: TrivialUnitBox<UiCurrencyUnitConfig>;
+	private queryFunction: QueryFunction<UiCurrencyUnitConfig>;
+	private numberFormat: Intl.NumberFormat;
 
 	protected initialize(config: UiCurrencyFieldConfig, context: TeamAppsUiContext) {
-		this.$originalInput = $('<input type="text" autocomplete="off">');
+		let initialPrecision = config.fixedPrecision >= 0 ? config.fixedPrecision : 2;
 
-		this.trivialUnitBox = new TrivialUnitBox<Currency>(this.$originalInput, {
+		this.trivialUnitBox = new TrivialUnitBox<UiCurrencyUnitConfig>({
+			numberFormatFunction: entry => this.getNumberFormat(entry),
 			idFunction: entry => entry.code,
-			unitValueProperty: 'code',
-			unitIdProperty: 'code',
-			decimalPrecision: config.precision,
-			decimalSeparator: context.config.decimalSeparator,
-			thousandsSeparator: context.config.thousandsSeparator,
 			unitDisplayPosition: config.showCurrencyBeforeAmount ? 'left' : 'right', // right or left
-			entryRenderingFunction: DEFAULT_RENDERING_FUNCTIONS.currencySingleLineLong,
+			entryRenderingFunction: entry => {
+				entry = entry || {};
+				return `<div class="tr-template-currency-single-line-long">
+				  <div class="content-wrapper tr-editor-area"> 
+					<div class="symbol-and-code">${entry.code != null ? `<span class="currency-code">${entry.code || ''}</span>` : ''} ${entry.symbol != null ? `<span class="currency-symbol">${entry.symbol || ''}</span>` : ''}</div>
+					<div class="currency-name">${entry.name || ''}</div>
+				  </div>
+				</div>`;
+			},
 			selectedEntryRenderingFunction: (entry) => {
 				if (entry == null) {
 					return `<div class="tr-template-currency-single-line-short">-</div>`
-				} else if (this.showCurrencySymbol && entry.symbol) {
+				} else if (this._config.showCurrencySymbol && entry.symbol) {
 					return `<div class="tr-template-currency-single-line-short">${entry.symbol} (${entry.code})</div>`;
 				} else {
 					return `<div class="tr-template-currency-single-line-short">${entry.code}</div>`;
 				}
 			},
-			selectedEntry: $.extend({}, CURRENCIES[this.defaultCurrencyCode]),
 			queryOnNonNumberCharacters: config.alphaKeysQueryForCurrency,
 			editingMode: this.convertToTrivialComponentsEditingMode(config.editingMode),
-			queryFunction: (queryString, callback) => this.queryFunction(queryString, callback)
+			queryFunction: (queryString) => this.queryFunction(queryString)
 		});
-		$(this.trivialUnitBox.getMainDomElement()).addClass("UiCurrencyField");
-		this.trivialUnitBox.onChange.addListener((value: {
-			unit: string,
-			unitEntry: any,
-			amount: number,
-			amountAsFloatingPointNumber: number
-		}) => {
+		this.trivialUnitBox.getMainDomElement().classList.add("UiCurrencyField", "default-min-field-width");
+		this.trivialUnitBox.onChange.addListener((value: TrivialUnitBoxChangeEvent<any>) => {
 			this.commit();
 		});
 		this.trivialUnitBox.getEditor().addEventListener('keyup', (e: KeyboardEvent) => {
 			if (e.keyCode !== keyCodes.enter
 				&& e.keyCode !== keyCodes.tab
 				&& !keyCodes.isModifierKey(e)) {
-				this.onTextInput.fire(EventFactory.createUiTextInputHandlingField_TextInputEvent(this.getId(), $(this.trivialUnitBox.getEditor()).val().toString()));
+				this.onTextInput.fire({
+					enteredString: (this.trivialUnitBox.getEditor() as HTMLInputElement).value
+				});
 			} else 	if (e.keyCode === keyCodes.escape) {
-				this.onSpecialKeyPressed.fire(EventFactory.createUiTextInputHandlingField_SpecialKeyPressedEvent(this.getId(), UiSpecialKey.ESCAPE));
+				this.onSpecialKeyPressed.fire({
+					key: UiSpecialKey.ESCAPE
+				});
 			} else if (e.keyCode === keyCodes.enter) {
-				this.onSpecialKeyPressed.fire(EventFactory.createUiTextInputHandlingField_SpecialKeyPressedEvent(this.getId(), UiSpecialKey.ENTER));
+				this.onSpecialKeyPressed.fire({
+					key: UiSpecialKey.ENTER
+				});
 			}
 		});
 
-		this.setDefaultCurrencyCode(config.defaultCurrencyCode);
-		this.setCurrencyCodeList(config.currencyCodeList || Object.keys(CURRENCIES));
-		this.setShowCurrencySymbol(config.showCurrencySymbol);
+		this.setCurrencyUnits(config.currencyUnits);
 
-		$(this.trivialUnitBox.getMainDomElement()).addClass("field-border field-border-glow field-background");
-		$(this.trivialUnitBox.getMainDomElement()).find(".tr-editor").addClass("field-background");
-		$(this.trivialUnitBox.getMainDomElement()).find(".tr-unitbox-selected-entry-and-trigger-wrapper").addClass("field-border");
-		this.trivialUnitBox.onFocus.addListener(() => this.getMainDomElement().addClass("focus"));
-		this.trivialUnitBox.onBlur.addListener(() => this.getMainDomElement().removeClass("focus"));
+		this.trivialUnitBox.getMainDomElement().classList.add("field-border", "field-border-glow", "field-background");
+		this.trivialUnitBox.getMainDomElement().querySelector<HTMLElement>(":scope .tr-editor").classList.add("field-background");
+		this.trivialUnitBox.getMainDomElement().querySelector<HTMLElement>(":scope .tr-unitbox-selected-entry-and-trigger-wrapper").classList.add("field-border");
+		this.trivialUnitBox.onFocus.addListener(() => this.getMainElement().classList.add("focus"));
+		this.trivialUnitBox.onBlur.addListener(() => this.getMainElement().classList.remove("focus"));
+	}
+
+	private getNumberFormat(entry: UiCurrencyUnitConfig) {
+		if (entry == null) {
+			let fractionDigits = this._config.fixedPrecision >= 0 ? this._config.fixedPrecision : 2;
+			return new Intl.NumberFormat(this._config.locale, {
+				useGrouping: true,
+				minimumFractionDigits: fractionDigits,
+				maximumFractionDigits: fractionDigits
+			});
+		} else {
+			let fractionDigits = this._config.fixedPrecision >= 0 ? this._config.fixedPrecision : entry.fractionDigits >= 0 ? entry.fractionDigits : 4;
+			return new Intl.NumberFormat(this._config.locale, {
+				minimumFractionDigits: fractionDigits,
+				maximumFractionDigits: fractionDigits,
+				useGrouping: true
+			})
+		}
 	}
 
 	isValidData(v: UiCurrencyValueConfig): boolean {
@@ -113,57 +132,60 @@ export class UiCurrencyField extends UiField<UiCurrencyFieldConfig, UiCurrencyVa
 		return editingMode === UiFieldEditingMode.READONLY ? 'readonly' : editingMode === UiFieldEditingMode.DISABLED ? 'disabled' : 'editable';
 	}
 
-	public getMainInnerDomElement(): JQuery {
-		return $(this.trivialUnitBox.getMainDomElement());
-	}
-
-	public getFocusableElement(): JQuery {
-		return $(this.trivialUnitBox.getMainDomElement()).find(".tr-editor");
-	}
-
-	public hasFocus(): boolean {
-		return this.getMainInnerDomElement().is('.focus');
+	public getMainInnerDomElement(): HTMLElement {
+		return this.trivialUnitBox.getMainDomElement() as HTMLElement;
 	}
 
 	protected displayCommittedValue(): void {
 		let uiValue = this.getCommittedValue();
 		if (uiValue) {
-			this.trivialUnitBox.setSelectedEntry(CURRENCIES[uiValue.currencyCode]);
-			this.trivialUnitBox.setAmount(uiValue.value);
+			this.trivialUnitBox.setSelectedEntry(uiValue?.currencyUnit);
+			this.trivialUnitBox.setAmount(BigDecimal.of(uiValue?.amount));
 		} else {
 			this.trivialUnitBox.setAmount(null);
-			this.trivialUnitBox.setSelectedEntry(CURRENCIES[this.defaultCurrencyCode]);
+			this.trivialUnitBox.setSelectedEntry(null);
 		}
 	}
 
+	@executeWhenFirstDisplayed()
 	focus(): void {
 		this.trivialUnitBox.focus();
-		this.getFocusableElement().select();
+		selectElementContents(this.trivialUnitBox.getMainDomElement().querySelector<HTMLElement>(":scope .tr-editor"));
 	}
 
-	doDestroy(): void {
+	destroy(): void {
+		super.destroy();
 		this.trivialUnitBox.destroy();
-		this.$originalInput.detach();
 	}
 
 	getTransientValue(): UiCurrencyValueConfig {
-		return createUiCurrencyValueConfig(this.trivialUnitBox.getAmount(), this.trivialUnitBox.getSelectedEntry() && this.trivialUnitBox.getSelectedEntry().code);
+		let amount = this.trivialUnitBox.getAmount();
+		return createUiCurrencyValueConfig(this.trivialUnitBox.getSelectedEntry() && this.trivialUnitBox.getSelectedEntry(), this.trivialUnitBox.getAmount()?.value);
 	}
 
 	protected onEditingModeChanged(editingMode: UiFieldEditingMode): void {
-		this.getMainDomElement()
-			.removeClass(Object.values(UiField.editingModeCssClasses).join(" "))
-			.addClass(UiField.editingModeCssClasses[editingMode]);
+		this.getMainElement().classList.remove(...Object.values(UiField.editingModeCssClasses));
+		this.getMainElement().classList.add(UiField.editingModeCssClasses[editingMode]);
 		this.trivialUnitBox.setEditingMode(this.convertToTrivialComponentsEditingMode(editingMode));
 	}
 
 	public getReadOnlyHtml(value: UiCurrencyValueConfig, availableWidth: number): string {
 		let content: string;
 		if (value != null) {
-			const currency = CURRENCIES[value.currencyCode || this.defaultCurrencyCode || ""];
-			const displayedCurrency = this.showCurrencySymbol ? currency.symbol : currency.code;
-			const amountAsString = formatDecimalNumber(value.value, this._config.precision, this._context.config.decimalSeparator, this._context.config.thousandsSeparator);
-			content = (this._config.showCurrencyBeforeAmount ? displayedCurrency + ' ' : '') + amountAsString + (this._config.showCurrencyBeforeAmount ? '' : ' ' + displayedCurrency);
+			const currency = value.currencyUnit;
+			let displayedCurrency: string;
+			if (currency != null) {
+				displayedCurrency = this._config.showCurrencySymbol ? `${currency?.symbol} (${currency?.code})` : currency?.code;
+			} else {
+				displayedCurrency = null;
+			}
+			let amount = BigDecimal.of(value.amount);
+			let formattedAmount = amount?.format(this.getNumberFormat(currency));
+			if (this._config.showCurrencyBeforeAmount) {
+				content = [displayedCurrency, formattedAmount].filter(x => x != null).join(' ');
+			} else {
+				content = [formattedAmount, displayedCurrency].filter(x => x != null).join(' ');
+			}
 		} else {
 			content = "";
 		}
@@ -171,15 +193,12 @@ export class UiCurrencyField extends UiField<UiCurrencyFieldConfig, UiCurrencyVa
 	}
 
 	getDefaultValue() {
-		return createUiCurrencyValueConfig(0, this.defaultCurrencyCode);
+		return createUiCurrencyValueConfig(null, null);
 	}
 
-	setCurrencyCodeList(currencyCodeList: string[]): void {
-		this.currencyCodeList = currencyCodeList;
-		this.queryFunction = defaultListQueryFunctionFactory(this.currencyCodeList.map((code) => CURRENCIES[code]), ["code", "name", "symbol"], {matchingMode: "contains", ignoreCase: true});
-		if (this.trivialUnitBox.isDropDownOpen()) {
-			this.trivialUnitBox.updateEntries(this.currencyCodeList.map((code) => CURRENCIES[code]));
-		}
+	setCurrencyUnits(currencyUnits: UiCurrencyUnitConfig[]): void {
+		this._config.currencyUnits = currencyUnits;
+		this.queryFunction = defaultListQueryFunctionFactory(currencyUnits, ["code", "name", "symbol"], {matchingMode: "contains", ignoreCase: true});
 	}
 
 	setShowCurrencyBeforeAmount(showCurrencyBeforeAmount: boolean): void {
@@ -187,18 +206,22 @@ export class UiCurrencyField extends UiField<UiCurrencyFieldConfig, UiCurrencyVa
 	}
 
 	setShowCurrencySymbol(showCurrencySymbol: boolean): void {
-		this.showCurrencySymbol = showCurrencySymbol;
+		this._config.showCurrencySymbol = showCurrencySymbol;
 		this.trivialUnitBox.setSelectedEntry(this.trivialUnitBox.getSelectedEntry());
 	}
 
-	setDefaultCurrencyCode(defaultCurrencyCode: string): void {
-		this.defaultCurrencyCode = defaultCurrencyCode;
+	public valuesChanged(v1: UiCurrencyValueConfig, v2: UiCurrencyValueConfig): boolean {
+		return !deepEquals(v1, v2);
 	}
 
-	public valuesChanged(v1: UiCurrencyValueConfig, v2: UiCurrencyValueConfig): boolean {
-		let nullAndNonNull = ((v1 == null) !== (v2 == null));
-		let nonNullAndValuesDifferent = (v1 != null && v2 != null && (v1.value !== v2.value || v1.currencyCode !== v2.currencyCode));
-		return nullAndNonNull || nonNullAndValuesDifferent;
+	setLocale(locale: string): void {
+		this._config.locale = locale;
+		this.trivialUnitBox.setSelectedEntry(this.trivialUnitBox.getSelectedEntry()); // update format
+	}
+
+	setFixedPrecision(fixedPrecision: number): void {
+		this._config.fixedPrecision = fixedPrecision;
+		this.trivialUnitBox.setSelectedEntry(this.trivialUnitBox.getSelectedEntry()); // update format
 	}
 }
 
diff --git a/teamapps-client/ts/modules/formfield/UiDisplayField.ts b/teamapps-client/ts/modules/formfield/UiDisplayField.ts
index 55c7da77e..ef36fd5c0 100644
--- a/teamapps-client/ts/modules/formfield/UiDisplayField.ts
+++ b/teamapps-client/ts/modules/formfield/UiDisplayField.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,23 +17,23 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-import * as $ from "jquery";
 import {UiFieldEditingMode} from "../../generated/UiFieldEditingMode";
-import {UiDisplayFieldConfig, UiDisplayFieldCommandHandler, UiDisplayFieldEventSource} from "../../generated/UiDisplayFieldConfig";
+import {UiDisplayFieldCommandHandler, UiDisplayFieldConfig, UiDisplayFieldEventSource} from "../../generated/UiDisplayFieldConfig";
 import {UiField} from "./UiField";
 import {TeamAppsUiContext} from "../TeamAppsUiContext";
-import {escapeHtml, removeTags} from "../Common";
+import {escapeHtml, parseHtml, removeTags} from "../Common";
 import {TeamAppsUiComponentRegistry} from "../TeamAppsUiComponentRegistry";
+import {executeWhenFirstDisplayed} from "../util/ExecuteWhenFirstDisplayed";
 
 
 export class UiDisplayField extends UiField<UiDisplayFieldConfig, string> implements UiDisplayFieldEventSource, UiDisplayFieldCommandHandler {
 
-	private _$field: JQuery;
+	private _$field: HTMLElement;
 	private showHtml: boolean;
 	private removeStyleTags: boolean;
 
 	protected initialize(config: UiDisplayFieldConfig, context: TeamAppsUiContext) {
-		this._$field = $(`<div class="UiDisplayField">`);
+		this._$field = parseHtml(`<div class="UiDisplayField">`);
 
 		this.setShowBorder(config.showBorder);
 		this.setShowHtml(config.showHtml);
@@ -45,11 +45,12 @@ export class UiDisplayField extends UiField<UiDisplayFieldConfig, string> implem
 	}
 
 	setShowBorder(showBorder: boolean): void {
-		this._$field.toggleClass("border", showBorder);
+		this._$field.classList.toggle("border", showBorder);
 	}
 
 	setShowHtml(showHtml: boolean): void {
 		this.showHtml = showHtml;
+		this._$field.classList.toggle("show-html", showHtml);
 		this.displayCommittedValue();
 	}
 
@@ -58,28 +59,24 @@ export class UiDisplayField extends UiField<UiDisplayFieldConfig, string> implem
 		this.displayCommittedValue();
 	}
 
-	public getMainInnerDomElement(): JQuery {
+	public getMainInnerDomElement(): HTMLElement {
 		return this._$field;
 	}
-
-	public getFocusableElement(): JQuery {
-		return null;
-	}
-
 	protected displayCommittedValue(): void {
 		let uiValue = this.getCommittedValue();
 		if (uiValue) {
 			if (this.showHtml) {
 				const displayedValue = this.removeStyleTags ? removeTags(uiValue, "style") : uiValue;
-				this._$field.html(displayedValue);
+				this._$field.innerHTML = displayedValue;
 			} else {
-				this._$field.text(uiValue);
+				this._$field.textContent = uiValue || "";
 			}
 		} else {
-			this._$field[0].innerHTML = '';
+			this._$field.innerHTML = '';
 		}
 	}
 
+	@executeWhenFirstDisplayed()
 	focus(): void {
 		// do nothing
 	}
@@ -89,7 +86,7 @@ export class UiDisplayField extends UiField<UiDisplayFieldConfig, string> implem
 	}
 
 	protected onEditingModeChanged(editingMode: UiFieldEditingMode): void {
-		UiField.defaultOnEditingModeChangedImpl(this);
+		UiField.defaultOnEditingModeChangedImpl(this, () => null);
 	}
 
 	public getReadOnlyHtml(value: string, availableWidth: number): string {
diff --git a/teamapps-client/ts/modules/formfield/UiField.ts b/teamapps-client/ts/modules/formfield/UiField.ts
index f1a2e3711..1079653ec 100644
--- a/teamapps-client/ts/modules/formfield/UiField.ts
+++ b/teamapps-client/ts/modules/formfield/UiField.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,17 +19,24 @@
  */
 import * as log from "loglevel";
 import {TeamAppsUiContext} from "../TeamAppsUiContext";
-import {UiField_ValueChangedEvent, UiFieldCommandHandler, UiFieldConfig, UiFieldEventSource} from "../../generated/UiFieldConfig";
+import {
+	UiField_BlurEvent,
+	UiField_FocusGainedEvent,
+	UiField_ValueChangedEvent,
+	UiFieldCommandHandler,
+	UiFieldConfig,
+	UiFieldEventSource
+} from "../../generated/UiFieldConfig";
 import {TeamAppsEvent} from "../util/TeamAppsEvent";
 import {UiFieldEditingMode} from "../../generated/UiFieldEditingMode";
-import {EventFactory} from "../../generated/EventFactory";
-import {UiComponent} from "../UiComponent";
+import {AbstractUiComponent} from "../AbstractUiComponent";
 import {UiFieldMessageConfig} from "../../generated/UiFieldMessageConfig";
 import {UiFieldMessageSeverity} from "../../generated/UiFieldMessageSeverity";
 import {UiFieldMessagePosition} from "../../generated/UiFieldMessagePosition";
 import {UiFieldMessageVisibilityMode} from "../../generated/UiFieldMessageVisibilityMode";
-import Popper from "popper.js";
+import {createPopper, Instance as Popper} from '@popperjs/core';
 import {bind} from "../util/Bind";
+import {parseHtml, prependChild} from "../Common";
 import Logger = log.Logger;
 
 
@@ -39,15 +46,15 @@ export interface ValueChangeEventData {
 
 interface FieldMessage {
 	message: UiFieldMessageConfig,
-	$message: JQuery
+	$message: HTMLElement
 }
 
-export abstract class UiField<C extends UiFieldConfig = UiFieldConfig, V = any> extends UiComponent<C> implements UiFieldCommandHandler, UiFieldEventSource {
+export abstract class UiField<C extends UiFieldConfig = UiFieldConfig, V = any> extends AbstractUiComponent<C> implements UiFieldCommandHandler, UiFieldEventSource {
 
-	public readonly onValueChanged: TeamAppsEvent<UiField_ValueChangedEvent> = new TeamAppsEvent<UiField_ValueChangedEvent>(this);
-	public readonly onFocused: TeamAppsEvent<void> = new TeamAppsEvent<void>(this);
-	public readonly onBlurred: TeamAppsEvent<void> = new TeamAppsEvent<void>(this);
-	public readonly onUserManipulation: TeamAppsEvent<void> = new TeamAppsEvent<void>(this);
+	public readonly onValueChanged: TeamAppsEvent<UiField_ValueChangedEvent> = new TeamAppsEvent();
+	public readonly onFocusGained: TeamAppsEvent<UiField_FocusGainedEvent> = new TeamAppsEvent();
+	public readonly onBlur: TeamAppsEvent<UiField_BlurEvent> = new TeamAppsEvent();
+	public readonly onUserManipulation: TeamAppsEvent<void> = new TeamAppsEvent();
 
 	public static editingModeCssClasses: { [x: number]: string } = {
 		[UiFieldEditingMode.EDITABLE]: "editable",
@@ -60,52 +67,57 @@ export abstract class UiField<C extends UiFieldConfig = UiFieldConfig, V = any>
 
 	private committedValue: V;
 
-	private editingMode: UiFieldEditingMode;
-	private $fieldWrapper: JQuery;
+	private $fieldWrapper: HTMLElement;
 
 	private _messageTooltip: {
 		popper: Popper,
-		$popperElement: JQuery,
-		$messageContainer: JQuery
+		$popperElement: HTMLElement,
+		$messageContainer: HTMLElement
 	};
-	private $messagesContainerAbove: JQuery;
-	private $messagesContainerBelow: JQuery;
+	private $messagesContainerAbove: HTMLElement;
+	private $messagesContainerBelow: HTMLElement;
 	private fieldMessages: FieldMessage[] = [];
 	private hovering: boolean;
+	private focused: boolean;
 
 	constructor(_config: C,
-	            _context: TeamAppsUiContext) {
+				_context: TeamAppsUiContext) {
 		super(_config, _context);
+		this.$messagesContainerAbove = parseHtml(`<div class="messages messages-above"></div>`);
+		this.$messagesContainerBelow = parseHtml(`<div class="messages messages-below"></div>`);
+		this.$fieldWrapper = parseHtml(`<div class="UiField"></div>`);
 		this.initialize(_config, _context);
-		this.$messagesContainerAbove = $(`<div class="messages messages-above"></div>`);
-		this.$messagesContainerBelow = $(`<div class="messages messages-below"></div>`);
-		this.$fieldWrapper = $(`<div class="UiField"></div>`)
-			.append(this.$messagesContainerAbove)
-			.append(this.getMainInnerDomElement())
-			.append(this.$messagesContainerBelow);
+		this.$fieldWrapper.appendChild(this.$messagesContainerAbove);
+		this.$fieldWrapper.appendChild(this.getMainInnerDomElement());
+		this.$fieldWrapper.appendChild(this.$messagesContainerBelow);
 		this.setEditingMode(_config.editingMode);
 		this.setCommittedValue(_config.value);
+		this.setFieldMessages(_config.fieldMessages);
+
 		this.onValueChanged.addListener(() => this.onUserManipulation.fire(null));
-		this.getFocusableElement() && this.getFocusableElement().on("focus", () => {
-			this.getMainDomElement().addClass("focus");
-			this.onFocused.fire(null);
-		});
-		this.getFocusableElement() && this.getFocusableElement().on("blur", () => {
-			this.getMainDomElement().removeClass("focus");
-			this.onBlurred.fire(null);
-		});
+		this.initFocusHandling();
 
-		this.onFocused.addListener(() => {
+		this.onFocusGained.addListener(() => {
+			this.focused = true;
+			this.getMainElement().classList.add("focus");
 			this.updateFieldMessageVisibilities();
+
 		});
-		this.onBlurred.addListener(() => {
+		this.onBlur.addListener(() => {
+			this.focused = false;
+			this.getMainElement().classList.remove("focus");
 			this.updateFieldMessageVisibilities();
 		});
 
-		this.getMainDomElement().on("mouseenter mouseleave", e => {
+		["mouseenter", "mouseleave"].forEach(eventName => this.getMainInnerDomElement().addEventListener(eventName, (e) => {
 			this.hovering = e.type === 'mouseenter';
 			this.updateFieldMessageVisibilities();
-		});
+		}));
+	}
+
+	protected initFocusHandling() {
+		this.getMainElement()?.addEventListener("focusin", () => this.onFocusGained.fire(null));
+		this.getMainElement()?.addEventListener("focusout", () => this.onBlur.fire(null));
 	}
 
 	private updateFieldMessageVisibilities() {
@@ -114,21 +126,21 @@ export abstract class UiField<C extends UiFieldConfig = UiFieldConfig, V = any>
 			|| highestVisibilityByPosition[position] === UiFieldMessageVisibilityMode.ON_HOVER_OR_FOCUS && this.hovering
 			|| this.hasFocus();
 		if (messagesVisible(UiFieldMessagePosition.ABOVE)) {
-			this.$messagesContainerAbove.removeClass("hidden");
+			this.$messagesContainerAbove.classList.remove("hidden");
 		} else {
-			this.$messagesContainerAbove.addClass("hidden");
+			this.$messagesContainerAbove.classList.add("hidden");
 		}
 		if (messagesVisible(UiFieldMessagePosition.BELOW)) {
-			this.$messagesContainerBelow.removeClass("hidden");
+			this.$messagesContainerBelow.classList.remove("hidden");
 		} else {
-			this.$messagesContainerBelow.addClass("hidden");
+			this.$messagesContainerBelow.classList.add("hidden");
 		}
 		if (this._messageTooltip != null) {
 			if (messagesVisible(UiFieldMessagePosition.POPOVER)) {
-				this._messageTooltip.$popperElement.removeClass("hidden");
+				this._messageTooltip.$popperElement.classList.remove("hidden");
 				this._messageTooltip.popper.update();
 			} else {
-				this._messageTooltip.$popperElement.addClass("hidden");
+				this._messageTooltip.$popperElement.classList.add("hidden");
 			}
 		}
 	}
@@ -151,43 +163,37 @@ export abstract class UiField<C extends UiFieldConfig = UiFieldConfig, V = any>
 		return this._config._type;
 	}
 
-	public getMainDomElement(): JQuery {
+	public doGetMainElement(): HTMLElement {
 		return this.$fieldWrapper;
 	}
 
-	abstract getMainInnerDomElement(): JQuery;
-
-	abstract getFocusableElement(): JQuery;
+	abstract getMainInnerDomElement(): HTMLElement;
 
 	public hasFocus() {
-		let focusableElement = this.getFocusableElement();
-		return focusableElement && focusableElement.is(":focus");
+		return this.focused;
 	}
 
-	public focus(): void {
-		let focusableElement = this.getFocusableElement();
-		focusableElement && focusableElement.focus();
-	}
+	abstract focus(): void;
 
 	destroy() {
 		super.destroy();
 		if (this._messageTooltip) {
 			this._messageTooltip.popper.destroy();
-			this._messageTooltip.$popperElement.detach();
+			this._messageTooltip.$popperElement.remove();
 			this.onResized.removeListener(this.updatePopperPosition)
 		}
-		this.doDestroy();
 	}
 
-	protected doDestroy() {
-		// default implementation
-	};
-
 	abstract isValidData(v: V): boolean;
 
 	abstract getTransientValue(): V;
 
-	abstract getDefaultValue(): V; // the value to be set if no other value has been set.
+	/**
+	 * the value to be set if no other value has been set.
+	 */
+	public getDefaultValue(): V {
+		return null;
+	}
 
 	protected abstract displayCommittedValue(): void;
 
@@ -213,7 +219,9 @@ export abstract class UiField<C extends UiFieldConfig = UiFieldConfig, V = any>
 
 	private fireCommittedChangeEvent(): void {
 		this.logger.trace("firing committed change event: " + JSON.stringify(this.committedValue));
-		this.onValueChanged.fire(EventFactory.createUiField_ValueChangedEvent(this.getId(), this.convertValueForSendingToServer(this.committedValue)));
+		this.onValueChanged.fire({
+			value: this.convertValueForSendingToServer(this.committedValue)
+		});
 	}
 
 	protected convertValueForSendingToServer(value: V): any {
@@ -230,48 +238,47 @@ export abstract class UiField<C extends UiFieldConfig = UiFieldConfig, V = any>
 		return changed;
 	}
 
-	public setEditingMode(editingMode: UiFieldEditingMode): void {
-		const oldEditingMode = this.editingMode;
-		this.editingMode = editingMode;
+	public setEditingMode(editingMode: UiFieldEditingMode = UiFieldEditingMode.EDITABLE): void {
+		const oldEditingMode = this._config.editingMode;
+		this._config.editingMode = editingMode;
 		this.onEditingModeChanged(editingMode, oldEditingMode);
 	}
 
 	protected abstract onEditingModeChanged(editingMode: UiFieldEditingMode, oldEditingMode?: UiFieldEditingMode): void;
 
 	public getEditingMode(): UiFieldEditingMode {
-		return this.editingMode;
+		return this._config.editingMode;
 	}
 
 	public isEditable(): boolean {
 		return this.getEditingMode() === UiFieldEditingMode.EDITABLE || this.getEditingMode() === UiFieldEditingMode.EDITABLE_IF_FOCUSED;
 	}
 
-	public static defaultOnEditingModeChangedImpl(field: UiField<UiFieldConfig, any>) {
-		field.getMainDomElement()
-			.removeClass(Object.values(UiField.editingModeCssClasses).join(" "))
-			.addClass(UiField.editingModeCssClasses[field.getEditingMode()]);
+	public static defaultOnEditingModeChangedImpl(field: UiField<UiFieldConfig, any>, $focusableElementProvider: () => HTMLElement) {
+		field.getMainElement().classList.remove(...Object.values(UiField.editingModeCssClasses));
+		field.getMainElement().classList.add(UiField.editingModeCssClasses[field.getEditingMode()]);
 
-		let $focusable = field.getFocusableElement();
-		if ($focusable) {
+		const $focusableElement = $focusableElementProvider();
+		if ($focusableElement) {
 			switch (field.getEditingMode()) {
 				case UiFieldEditingMode.EDITABLE:
-					$focusable.prop("readonly", false);
-					$focusable.prop("disabled", false);
-					$focusable.attr("tabindex", "0");
+					$focusableElement.removeAttribute("readonly");
+					$focusableElement.removeAttribute("disabled");
+					$focusableElement.setAttribute("tabindex", "0");
 					break;
 				case UiFieldEditingMode.EDITABLE_IF_FOCUSED:
-					$focusable.prop("readonly", false);
-					$focusable.prop("disabled", false);
-					$focusable.attr("tabindex", "0");
+					$focusableElement.removeAttribute("readonly");
+					$focusableElement.removeAttribute("disabled");
+					$focusableElement.setAttribute("tabindex", "0");
 					break;
 				case UiFieldEditingMode.DISABLED:
-					$focusable.prop("readonly", false);
-					$focusable.prop("disabled", true);
+					$focusableElement.removeAttribute("readonly");
+					$focusableElement.setAttribute("disabled", "disabled");
 					break;
 				case UiFieldEditingMode.READONLY:
-					$focusable.prop("readonly", true);
-					$focusable.prop("disabled", false);
-					$focusable.attr("tabindex", "-1");
+					$focusableElement.setAttribute("readonly", "readonly");
+					$focusableElement.removeAttribute("disabled");
+					$focusableElement.setAttribute("tabindex", "-1");
 					break;
 				default:
 					log.getLogger("UiField").error("unknown editing mode! " + field.getEditingMode());
@@ -280,7 +287,7 @@ export abstract class UiField<C extends UiFieldConfig = UiFieldConfig, V = any>
 	}
 
 	public getReadOnlyHtml(value: V, availableWidth: number): string {
-		return "";
+		return "TODO: Override getReadOnlyHtml()";
 	}
 
 	getFieldMessages() {
@@ -292,12 +299,12 @@ export abstract class UiField<C extends UiFieldConfig = UiFieldConfig, V = any>
 			fieldMessageConfigs = [];
 		}
 
-		this.getMainDomElement().removeClass("message-info message-success message-warning message-error");
-		this.$messagesContainerAbove[0].innerHTML = '';
-		this.$messagesContainerBelow[0].innerHTML = '';
+		this.getMainElement().classList.remove("message-info", "message-success", "message-warning", "message-error");
+		this.$messagesContainerAbove.innerHTML = '';
+		this.$messagesContainerBelow.innerHTML = '';
 		if (this._messageTooltip != null) {
-			this._messageTooltip.$messageContainer[0].innerHTML = '';
-			this._messageTooltip.$popperElement.removeClass(`tooltip-info tooltip-success tooltip-warning tooltip-error`);
+			this._messageTooltip.$messageContainer.innerHTML = '';
+			this._messageTooltip.$popperElement.classList.remove("ta-tooltip-info", "ta-tooltip-success", "ta-tooltip-warning", "ta-tooltip-error");
 		}
 
 		this.fieldMessages = fieldMessageConfigs
@@ -311,7 +318,7 @@ export abstract class UiField<C extends UiFieldConfig = UiFieldConfig, V = any>
 			return messages.reduce((highestSeverity, message) => message.message.severity > highestSeverity ? message.message.severity : highestSeverity, UiFieldMessageSeverity.INFO);
 		};
 		if (this.fieldMessages && this.fieldMessages.length > 0) {
-			this.getMainDomElement().addClass("message-" + UiFieldMessageSeverity[getHighestSeverity(this.fieldMessages)].toLowerCase());
+			this.getMainElement().classList.add("message-" + UiFieldMessageSeverity[getHighestSeverity(this.fieldMessages)].toLowerCase());
 		}
 
 		let fieldMessagesByPosition: { [position in UiFieldMessagePosition]: FieldMessage[] } = {
@@ -320,18 +327,18 @@ export abstract class UiField<C extends UiFieldConfig = UiFieldConfig, V = any>
 			[UiFieldMessagePosition.POPOVER]: this.fieldMessages.filter(m => m.message.position == UiFieldMessagePosition.POPOVER)
 		};
 
-		fieldMessagesByPosition[UiFieldMessagePosition.ABOVE].forEach(message => this.getMessagesContainer(message.message.position).prepend(message.$message));
-		fieldMessagesByPosition[UiFieldMessagePosition.BELOW].forEach(message => this.getMessagesContainer(message.message.position).append(message.$message));
+		fieldMessagesByPosition[UiFieldMessagePosition.ABOVE].forEach(message => prependChild(this.getMessagesContainer(message.message.position), message.$message));
+		fieldMessagesByPosition[UiFieldMessagePosition.BELOW].forEach(message => this.getMessagesContainer(message.message.position).appendChild(message.$message));
 		if (fieldMessagesByPosition[UiFieldMessagePosition.POPOVER].length > 0) {
 			const highestPopoverSeverity = getHighestSeverity(fieldMessagesByPosition[UiFieldMessagePosition.POPOVER]);
-			this.messageTooltip.$popperElement.addClass(`tooltip-${UiFieldMessageSeverity[highestPopoverSeverity].toLowerCase()}`);
+			this.messageTooltip.$popperElement.classList.add(`ta-tooltip-${UiFieldMessageSeverity[highestPopoverSeverity].toLowerCase()}`);
 			fieldMessagesByPosition[UiFieldMessagePosition.POPOVER].forEach(message => {
-				this.messageTooltip.$messageContainer.append(message.$message);
+				this.messageTooltip.$messageContainer.appendChild(message.$message);
 			});
-			this.messageTooltip.$popperElement.removeClass("empty");
+			this.messageTooltip.$popperElement.classList.remove("empty");
 			this.messageTooltip.popper.update();
 		} else if (this._messageTooltip != null) {
-			this.messageTooltip.$popperElement.addClass("empty");
+			this.messageTooltip.$popperElement.classList.add("empty");
 		}
 
 		this.updateFieldMessageVisibilities();
@@ -341,31 +348,47 @@ export abstract class UiField<C extends UiFieldConfig = UiFieldConfig, V = any>
 		const severityCssClass = `field-message-${UiFieldMessageSeverity[message.severity].toLowerCase()}`;
 		const positionCssClass = `position-${UiFieldMessagePosition[message.position].toLowerCase()}`;
 		const visibilityCssClass = `visibility-${UiFieldMessageVisibilityMode[message.visibilityMode].toLowerCase()}`;
-		return $(`<div class="field-message ${severityCssClass} ${positionCssClass} ${visibilityCssClass}">${message.message}</div>`);
+		return parseHtml(`<div class="field-message ${severityCssClass} ${positionCssClass} ${visibilityCssClass}">${message.message}</div>`);
 	}
 
 	private get messageTooltip() {
 		if (this._messageTooltip == null) {
-			let $popperElement = $(`<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>`)
-				.appendTo(document.body);
-			let $messageContainer = $popperElement.find(".tooltip-inner");
-			let popper = new Popper(this.getMainInnerDomElement()[0], $popperElement[0], {
+			let $popperElement = parseHtml(`<div class="ta-tooltip" role="tooltip"><div class="ta-tooltip-arrow"></div><div class="ta-tooltip-inner"></div></div>`);
+			document.body.appendChild($popperElement);
+			let $messageContainer = $popperElement.querySelector<HTMLElement>(":scope .ta-tooltip-inner");
+			let popper = createPopper(this.getMainInnerDomElement(), $popperElement, {
 				placement: 'right',
-				modifiers: {
-					flip: {
-						behavior: ['right', 'bottom', 'left', 'top']
+				modifiers: [
+					{
+						name: "flip",
+						options: {
+							fallbackPlacements: ['bottom', 'left', 'top']
+						}
+					},
+					{
+						name: "preventOverflow"
+					},
+					{
+						name: "offset",
+						options: {
+							offset: [0, 6]
+						}
 					},
-					preventOverflow: {
-						boundariesElement: document.body,
+					{
+						name: "arrow",
+						options: {
+							element: ".ta-tooltip-arrow", // "[data-popper-arrow]"
+							padding: 10, // 0
+						}
 					}
-				},
+				]
 			});
 			this.onResized.addListener(this.updatePopperPosition);
-			this.onAttachedToDomChanged.addListener(attached => {
-				if (attached) {
-					this._messageTooltip.$popperElement.appendTo(document.body);
+			this.deFactoVisibilityChanged.addListener(visible => {
+				if (visible) {
+					document.body.appendChild(this._messageTooltip.$popperElement);
 				} else {
-					this._messageTooltip.$popperElement.detach();
+					this._messageTooltip.$popperElement.remove();
 				}
 			});
 			this._messageTooltip = {
@@ -379,7 +402,7 @@ export abstract class UiField<C extends UiFieldConfig = UiFieldConfig, V = any>
 
 	@bind
 	private updatePopperPosition() {
-		this.messageTooltip.popper.scheduleUpdate();
+		this.messageTooltip.popper.update();
 	}
 
 	protected getMessagesContainer(position: UiFieldMessagePosition) {
diff --git a/teamapps-client/ts/modules/formfield/UiFieldGroup.ts b/teamapps-client/ts/modules/formfield/UiFieldGroup.ts
new file mode 100644
index 000000000..6a4c01049
--- /dev/null
+++ b/teamapps-client/ts/modules/formfield/UiFieldGroup.ts
@@ -0,0 +1,56 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+import {TeamAppsUiComponentRegistry} from "../TeamAppsUiComponentRegistry";
+import {AbstractUiComponent} from "../AbstractUiComponent";
+import {UiFieldGroupCommandHandler, UiFieldGroupConfig} from "../../generated/UiFieldGroupConfig";
+import {TeamAppsUiContext} from "../TeamAppsUiContext";
+import {parseHtml} from "../Common";
+import {UiField} from "./UiField";
+
+export class UiFieldGroup extends AbstractUiComponent<UiFieldGroupConfig> implements UiFieldGroupCommandHandler {
+
+	private $main: HTMLElement;
+	private fields: UiField[];
+
+	constructor(config: UiFieldGroupConfig, context: TeamAppsUiContext) {
+		super(config, context);
+		this.$main = parseHtml(`<div class="UiFieldGroup"></div>`);
+		this.setFields(config.fields as UiField[]);
+	}
+
+	doGetMainElement(): HTMLElement {
+		return this.$main;
+	}
+
+	public setFields(fields: UiField[]) {
+		this.fields = fields;
+		this.$main.innerHTML = '';
+		fields.forEach(f => {
+			this.$main.appendChild(f.getMainElement())
+		});
+	}
+
+	destroy() {
+		super.destroy();
+		this.fields.forEach(f => f.destroy());
+	}
+}
+
+TeamAppsUiComponentRegistry.registerComponentClass("UiFieldGroup", UiFieldGroup);
diff --git a/teamapps-client/ts/modules/formfield/UiImageField.ts b/teamapps-client/ts/modules/formfield/UiImageField.ts
index 3ac7b7ba6..34c076892 100644
--- a/teamapps-client/ts/modules/formfield/UiImageField.ts
+++ b/teamapps-client/ts/modules/formfield/UiImageField.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,9 +17,8 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-import * as $ from "jquery";
 import {UiField} from "./UiField";
-import {UiImageFieldConfig, UiImageFieldCommandHandler, UiImageFieldEventSource} from "../../generated/UiImageFieldConfig";
+import {UiImageFieldCommandHandler, UiImageFieldConfig, UiImageFieldEventSource} from "../../generated/UiImageFieldConfig";
 import {UiFieldEditingMode} from "../../generated/UiFieldEditingMode";
 import {TeamAppsUiContext} from "../TeamAppsUiContext";
 import {TeamAppsUiComponentRegistry} from "../TeamAppsUiComponentRegistry";
@@ -27,20 +26,19 @@ import {UiBorderConfig} from "../../generated/UiBorderConfig";
 import {UiShadowConfig} from "../../generated/UiShadowConfig";
 import {UiImageSizing} from "../../generated/UiImageSizing";
 import {createImageSizingCssObject, createUiBorderCssObject, createUiShadowCssObject, cssObjectToString} from "../util/CssFormatUtil";
+import {parseHtml} from "../Common";
+import {executeWhenFirstDisplayed} from "../util/ExecuteWhenFirstDisplayed";
 
 export class UiImageField extends UiField<UiImageFieldConfig, string> implements UiImageFieldEventSource, UiImageFieldCommandHandler {
 
-	private _$field: JQuery;
+	private _$field: HTMLElement;
 
 	protected initialize(config: UiImageFieldConfig, context: TeamAppsUiContext) {
-		this._$field = $(`<div class="UiImageField">`);
+		this._$field = parseHtml(`<div class="UiImageField">`);
 
-		this.setSize(config.width, config.height);
-		this.setBorder(config.border);
-		this.setShadow(config.shadow);
-		this.setImageSizing(config.imageSizing);
+		this.update(config);
 
-		this._$field.click((e) => {
+		this._$field.addEventListener('click',(e) => {
 			this.commit(true);
 		});
 	}
@@ -49,42 +47,47 @@ export class UiImageField extends UiField<UiImageFieldConfig, string> implements
 		return v == null || typeof v === "string";
 	}
 
-	setSize(width: number, height: number): void {
-		this._$field.css({
-			width: `${width}px`,
-			height: `${height}px`,
-		})
+	setSize(width: string, height: string): void {
+		Object.assign(this._$field.style, {
+			width: `${width}`,
+			height: `${height}`,
+		});
 	}
 
 	setBorder(border: UiBorderConfig): void {
-		this._$field.css(createUiBorderCssObject(border));
+		Object.assign(this._$field.style, createUiBorderCssObject(border));
 	}
 
 	setShadow(shadow: UiShadowConfig): void {
-		this._$field.css(createUiShadowCssObject(shadow));
+		Object.assign(this._$field.style, createUiShadowCssObject(shadow));
 	}
 
 	setImageSizing(imageSizing: UiImageSizing): void {
-		this._$field.css(createImageSizingCssObject(imageSizing));
+		Object.assign(this._$field.style, createImageSizingCssObject(imageSizing));
+	}
+
+	update(config: UiImageFieldConfig) {
+		this._config = config;
+		this.setSize(config.width, config.height);
+		this.setBorder(config.border);
+		this.setShadow(config.shadow);
+		this.setImageSizing(config.imageSizing);
+		this._$field.style.backgroundColor = config.backgroundColor;
 	}
 
 	getDefaultValue(): string {
 		return null;
 	}
 
-	public getMainInnerDomElement(): JQuery {
+	public getMainInnerDomElement(): HTMLElement {
 		return this._$field;
 	}
-
-	public getFocusableElement(): JQuery {
-		return null;
-	}
-
 	protected displayCommittedValue(): void {
 		let uiValue = this.getCommittedValue();
-		this._$field.css("background-image", uiValue ? `url(${uiValue})` : 'none');
+		this._$field.style.backgroundImage = uiValue ? `url('${uiValue}')` : 'none';
 	}
 
+	@executeWhenFirstDisplayed()
 	focus(): void {
 		// do nothing
 	}
@@ -94,7 +97,7 @@ export class UiImageField extends UiField<UiImageFieldConfig, string> implements
 	}
 
 	protected onEditingModeChanged(editingMode: UiFieldEditingMode): void {
-		UiField.defaultOnEditingModeChangedImpl(this);
+		UiField.defaultOnEditingModeChangedImpl(this, () => null);
 	}
 
 	public getReadOnlyHtml(value: string, availableWidth: number): string {
@@ -104,7 +107,7 @@ export class UiImageField extends UiField<UiImageFieldConfig, string> implements
 			...createUiBorderCssObject(this._config.border),
 			...createUiShadowCssObject(this._config.shadow),
 			...createImageSizingCssObject(this._config.imageSizing),
-			'background-image': value ? `url(${value})` : 'none'
+			'background-image': value ? `url('${value}')` : 'none'
 		});
 		return `<div class="static-readonly-UiImageField" style="${css}"></div>`;
 	}
diff --git a/teamapps-client/ts/modules/formfield/UiLabel.ts b/teamapps-client/ts/modules/formfield/UiLabel.ts
index 2bd30772e..24b428b67 100644
--- a/teamapps-client/ts/modules/formfield/UiLabel.ts
+++ b/teamapps-client/ts/modules/formfield/UiLabel.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,42 +17,47 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-import * as $ from "jquery";
 import {UiField} from "./UiField";
 import {TeamAppsUiContext} from "../TeamAppsUiContext";
-import {UiLabel_ClickedEvent, UiLabelConfig, UiLabelCommandHandler, UiLabelEventSource} from "../../generated/UiLabelConfig";
+import {UiLabel_ClickedEvent, UiLabelCommandHandler, UiLabelConfig, UiLabelEventSource} from "../../generated/UiLabelConfig";
 import {TeamAppsEvent} from "../util/TeamAppsEvent";
 import {UiFieldEditingMode} from "../../generated/UiFieldEditingMode";
 import {TeamAppsUiComponentRegistry} from "../TeamAppsUiComponentRegistry";
-import {EventFactory} from "../../generated/EventFactory";
+import {parseHtml} from "../Common";
+import {UiComponent} from "../UiComponent";
+import {executeWhenFirstDisplayed} from "../util/ExecuteWhenFirstDisplayed";
 
 export class UiLabel extends UiField<UiLabelConfig, string> implements UiLabelEventSource, UiLabelCommandHandler {
-	public readonly onClicked: TeamAppsEvent<UiLabel_ClickedEvent> = new TeamAppsEvent<UiLabel_ClickedEvent>(this);
+	public readonly onClicked: TeamAppsEvent<UiLabel_ClickedEvent> = new TeamAppsEvent<UiLabel_ClickedEvent>();
 
-	private $main: JQuery;
-	private $caption: JQuery;
-	private targetField: UiField;
+	private $main: HTMLElement;
+	private $icon: HTMLElement;
+	private $caption: HTMLElement;
+	private targetComponent: UiComponent;
 	private targetFieldVisibilityChangeHandler: (visible: boolean) => void;
 
 	protected initialize(config: UiLabelConfig, context: TeamAppsUiContext): void {
-		this.$main = $(`<div class="UiLabel"><span class="caption">${config.caption}</span></div>`);
-		this.$caption = this.$main.find(".caption");
+		this.$main = parseHtml(`<div class="UiLabel"><div class="icon img img-16 hidden"></div><span class="caption">${config.caption}</span></div>`);
+		this.$icon = this.$main.querySelector<HTMLElement>(":scope .icon");
+		this.$caption = this.$main.querySelector<HTMLElement>(":scope .caption");
 		this.setIcon(config.icon);
-		this.$main.click(() => {
-			this.onClicked.fire(EventFactory.createUiLabel_ClickedEvent(this.getId()));
-			if (this.targetField != null) {
-				this.targetField.focus();
+		this.$main.addEventListener('click',() => {
+			this.onClicked.fire({});
+			if (this.targetComponent != null) {
+				if (this.targetComponent instanceof UiField) {
+					this.targetComponent.focus();
+				}
 			}
 		});
 		this.targetFieldVisibilityChangeHandler = (visible: boolean) => this.setVisible(visible);
-		this.setTargetField(config.targetField);
+		this.setTargetComponent(config.targetComponent as UiComponent);
 	}
 
-	public setTargetField(targetField: UiField) {
-		if (this.targetField != null) {
-			this.targetField.onVisibilityChanged.removeListener(this.targetFieldVisibilityChangeHandler)
+	public setTargetComponent(targetField: UiComponent) {
+		if (this.targetComponent != null) {
+			this.targetComponent.onVisibilityChanged.removeListener(this.targetFieldVisibilityChangeHandler)
 		}
-		this.targetField = targetField;
+		this.targetComponent = targetField;
 		if (targetField != null) {
 			this.setVisible(targetField.isVisible());
 			targetField.onVisibilityChanged.addListener(this.targetFieldVisibilityChangeHandler);
@@ -64,23 +69,21 @@ export class UiLabel extends UiField<UiLabelConfig, string> implements UiLabelEv
 	}
 
 	setCaption(caption: string): void {
-		this.$caption.text(caption);
+		this.$caption.textContent = caption || '';
 	}
 
 	setIcon(icon: string): void {
-		this.$main.find(".icon").detach();
-		if (icon) {
-			let iconPath = this._context.getIconPath(icon, 16);
-			this.$main.prepend(`<div class="icon img img-16" style="background-image: url(${iconPath})"></div>`)
-		}
+		this.$icon.classList.toggle("hidden", !icon);
+		this.$icon.style.backgroundImage = icon ? `url('${icon}')` : null;
 	}
 
-	public getMainInnerDomElement(): JQuery {
+	public getMainInnerDomElement(): HTMLElement {
 		return this.$main;
 	}
 
-	public getFocusableElement(): JQuery {
-		return null;
+	@executeWhenFirstDisplayed()
+	focus() {
+		// do nothing
 	}
 
 	public getTransientValue(): string {
@@ -92,7 +95,7 @@ export class UiLabel extends UiField<UiLabelConfig, string> implements UiLabelEv
 	}
 
 	protected displayCommittedValue(): void {
-		this.$caption.text(this.getCommittedValue() || this._config.caption || "");
+		this.$caption.textContent = this.getCommittedValue() || this._config.caption || "";
 	}
 
 	protected onEditingModeChanged(editingMode: UiFieldEditingMode): void {
diff --git a/teamapps-client/ts/modules/formfield/UiMultiLineTextField.ts b/teamapps-client/ts/modules/formfield/UiMultiLineTextField.ts
index ec165ed58..e578d537f 100644
--- a/teamapps-client/ts/modules/formfield/UiMultiLineTextField.ts
+++ b/teamapps-client/ts/modules/formfield/UiMultiLineTextField.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,158 +17,171 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-import * as $ from "jquery";
-import {UiField} from "./UiField";
-import {UiMultiLineTextFieldConfig, UiMultiLineTextFieldCommandHandler, UiMultiLineTextFieldEventSource} from "../../generated/UiMultiLineTextFieldConfig";
+import {keyCodes} from "../trivial-components/TrivialCore";
 import {UiFieldEditingMode} from "../../generated/UiFieldEditingMode";
-import {TeamAppsUiContext} from "../TeamAppsUiContext";
-import {Constants, escapeHtml, hasVerticalScrollBar} from "../Common";
+import {
+	UiMultiLineTextFieldCommandHandler,
+	UiMultiLineTextFieldConfig,
+	UiMultiLineTextFieldEventSource
+} from "../../generated/UiMultiLineTextFieldConfig";
+import {UiSpecialKey} from "../../generated/UiSpecialKey";
+import {
+	UiTextInputHandlingField_SpecialKeyPressedEvent,
+	UiTextInputHandlingField_TextInputEvent
+} from "../../generated/UiTextInputHandlingFieldConfig";
+import {Constants, escapeHtml, hasVerticalScrollBar, parseHtml} from "../Common";
 import {TeamAppsUiComponentRegistry} from "../TeamAppsUiComponentRegistry";
+import {TeamAppsUiContext} from "../TeamAppsUiContext";
+import {executeWhenFirstDisplayed} from "../util/ExecuteWhenFirstDisplayed";
 import {TeamAppsEvent} from "../util/TeamAppsEvent";
-import {UiTextInputHandlingField_SpecialKeyPressedEvent, UiTextInputHandlingField_TextInputEvent} from "../../generated/UiTextInputHandlingFieldConfig";
-import {UiSpecialKey} from "../../generated/UiSpecialKey";
-import {keyCodes} from "trivial-components";
-import {executeWhenAttached} from "../util/ExecuteWhenAttached";
-import {EventFactory} from "../../generated/EventFactory";
+import {UiField} from "./UiField";
 
 export class UiMultiLineTextField extends UiField<UiMultiLineTextFieldConfig, string> implements UiMultiLineTextFieldEventSource, UiMultiLineTextFieldCommandHandler {
 
-	public readonly onTextInput: TeamAppsEvent<UiTextInputHandlingField_TextInputEvent> = new TeamAppsEvent<UiTextInputHandlingField_TextInputEvent>(this, 250);
-	public readonly onSpecialKeyPressed: TeamAppsEvent<UiTextInputHandlingField_SpecialKeyPressedEvent> = new TeamAppsEvent<UiTextInputHandlingField_SpecialKeyPressedEvent>(this, 250);
-
-	private $wrapper: JQuery;
-	private $field: JQuery;
-	private $clearButton: JQuery;
+	public readonly onTextInput: TeamAppsEvent<UiTextInputHandlingField_TextInputEvent> = new TeamAppsEvent<UiTextInputHandlingField_TextInputEvent>({
+		throttlingMode: "debounce",
+		delay: 250
+	});
+	public readonly onSpecialKeyPressed: TeamAppsEvent<UiTextInputHandlingField_SpecialKeyPressedEvent> = new TeamAppsEvent<UiTextInputHandlingField_SpecialKeyPressedEvent>({
+		throttlingMode: "debounce",
+		delay: 250
+	});
+
+	private $wrapper: HTMLElement;
+	private $field: HTMLTextAreaElement;
+	private $clearButton: HTMLElement;
 	private showClearButton: boolean;
-	private minHeight: number;
-	private maxHeight: number;
-
 
 	protected initialize(config: UiMultiLineTextFieldConfig, context: TeamAppsUiContext) {
-		this.$wrapper = $(`<div class="UiMultiLineTextField teamapps-input-wrapper field-border field-border-glow field-background">
+		this.$wrapper = parseHtml(`<div class="UiMultiLineTextField default-min-field-width teamapps-input-wrapper field-border field-border-glow field-background">
 	<textarea></textarea>
-	<div class="clear-button tr-remove-button"/>  
+	<div class="clear-button tr-remove-button"></div>
 </div>`);
-		this.$field = this.$wrapper.find("textarea");
-		this.$clearButton = this.$wrapper.find('.clear-button');
-		this.$clearButton.click(() => {
-			this.$field.val("");
+		this.$field = this.$wrapper.querySelector(":scope textarea");
+		this.$clearButton = this.$wrapper.querySelector<HTMLElement>(':scope .clear-button');
+		this.$clearButton.addEventListener('click', () => {
+			this.$field.value = "";
 			this.fireTextInput();
 			this.commit();
 			this.updateClearButton();
 		});
 
-		this.setEmptyText(config.emptyText);
+		this.setPlaceholderText(config.placeholderText);
 		this.setMaxCharacters(config.maxCharacters);
 		this.setShowClearButton(config.showClearButton);
 
-		this.$field.on('focus', (e) => {
+		this.$field.addEventListener('focus', () => {
 			if (this.getEditingMode() !== UiFieldEditingMode.READONLY) {
 			}
 		});
-		this.$field.on('blur', (e) => {
+		this.$field.addEventListener('blur', () => {
 			if (this.getEditingMode() !== UiFieldEditingMode.READONLY) {
 				this.commit();
 				this.updateClearButton();
 			}
 		});
-		this.$field.on("input", () => {
+		this.$field.addEventListener("input", () => {
 			this.fireTextInput();
 			this.updateClearButton();
 		});
-		this.$field.on("keydown", (e) => {
+		this.$field.addEventListener("keydown", (e) => {
 			if (e.keyCode === keyCodes.escape) {
 				this.displayCommittedValue(); // back to committedValue
 				this.fireTextInput();
-				this.onSpecialKeyPressed.fire(EventFactory.createUiTextInputHandlingField_SpecialKeyPressedEvent(this.getId(), UiSpecialKey.ESCAPE));
+				this.onSpecialKeyPressed.fire({
+					key: UiSpecialKey.ESCAPE
+				});
 			} else if (e.keyCode === keyCodes.enter) {
-				this.onSpecialKeyPressed.fire(EventFactory.createUiTextInputHandlingField_SpecialKeyPressedEvent(this.getId(), UiSpecialKey.ENTER));
+				this.onSpecialKeyPressed.fire({
+					key: UiSpecialKey.ENTER
+				});
 			}
 		});
 
 		this.updateClearButton();
 
-		this.setMinHeight(config.minHeight);
-		this.setMaxHeight(config.maxHeight);
-
-		this.$field.on('input', () => this.updateTextareaHeight());
+		this.$field.addEventListener('input', () => this.updateTextareaHeight());
 		this.updateTextareaHeight();
 	}
 
 	private fireTextInput() {
-		this.onTextInput.fire(EventFactory.createUiTextInputHandlingField_TextInputEvent(this.getId(), this.$field.val().toString()));
+		this.onTextInput.fire({
+			enteredString: this.$field.value
+		});
 	}
 
-	isValidData(v: string): boolean {
+	public isValidData(v: string): boolean {
 		return v == null || typeof v === "string";
 	}
 
-	@executeWhenAttached(true)
+	@executeWhenFirstDisplayed(true)
 	private updateTextareaHeight() {
-		this.$field[0].style.height = '0px';
-		this.$field[0].style.height = (Math.max(this.minHeight - 2, Math.min(this.$field[0].scrollHeight, this.maxHeight - 2))) + 'px';
+		if (this._config.adjustHeightToContent) {
+			this.$field.style.height = '2px';
+			this.$field.style.height = this.$field.scrollHeight + 'px';
+		}
 	}
 
-	setMaxCharacters(maxCharacters: number): void {
-		this.$field.attr('maxlength', maxCharacters || "");
+	public setMaxCharacters(maxCharacters: number): void {
+		if (maxCharacters) {
+			this.$field.maxLength = maxCharacters;
+		} else {
+			this.$field.removeAttribute("maxLength");
+		}
 	}
 
-	setShowClearButton(showClearButton: boolean): void {
+	public setShowClearButton(showClearButton: boolean): void {
 		this.showClearButton = showClearButton;
 		this.updateClearButton();
 	}
 
-	@executeWhenAttached()
+	@executeWhenFirstDisplayed()
 	private updateClearButton() {
-		this.$wrapper.toggleClass("clearable", !!(this.showClearButton && this.$field.val()));
-		this.$clearButton.css("right", hasVerticalScrollBar(this.$field[0]) ? Constants.SCROLLBAR_WIDTH + "px" : 0);
+		this.$wrapper.classList.toggle("clearable", !!(this.showClearButton && this.$field.value));
+		this.$clearButton.style.right = hasVerticalScrollBar(this.$field) ? Constants.SCROLLBAR_WIDTH + "px" : "0";
 	}
 
-	setEmptyText(emptyText: string): void {
-		this.$field.attr("placeholder", emptyText || "");
+	public setPlaceholderText(placeholderText: string): void {
+		this.$field.placeholder = placeholderText || '';
 	}
 
-	public getMainInnerDomElement(): JQuery {
+	public getMainInnerDomElement(): HTMLElement {
 		return this.$wrapper;
 	}
-
-	public getFocusableElement(): JQuery {
-		return this.$field;
-	}
-
 	protected displayCommittedValue(): void {
-		let value = this.getCommittedValue();
-		this.$field.val(value || "");
+		const value = this.getCommittedValue();
+		this.$field.value = value || "";
 		this.updateClearButton();
 		this.updateTextareaHeight();
 	}
 
 	public getTransientValue(): string {
-		return this.$field.val().toString();
+		return this.$field.value;
 	}
 
-	focus(): void {
+	@executeWhenFirstDisplayed()
+	public focus(): void {
 		this.$field.focus();
 	}
 
-	append(s: string, scrollToBottom: boolean): void {
-		let transientValue = this.getTransientValue();
-		let transientValueString = (transientValue && transientValue) || '';
+	public append(s: string, scrollToBottom: boolean): void {
+		const transientValue = this.getTransientValue();
+		const transientValueString = (transientValue && transientValue) || '';
 		this.setCommittedValue(transientValueString + s);
 		if (scrollToBottom) {
-			this.$wrapper.scrollTop(10000000);
+			this.$wrapper.scrollTop = 10000000;
 		}
 	}
 
 	protected onEditingModeChanged(editingMode: UiFieldEditingMode): void {
-		UiField.defaultOnEditingModeChangedImpl(this);
+		UiField.defaultOnEditingModeChangedImpl(this, () => this.$field);
 	}
 
 	public getReadOnlyHtml(value: string, availableWidth: number): string {
 		return `<div class="static-readonly-UiMultiLineTextField">${value == null ? "" : escapeHtml(value)}</div>`;
 	}
 
-	getDefaultValue(): string {
+	public getDefaultValue(): string {
 		return "";
 	}
 
@@ -176,17 +189,6 @@ export class UiMultiLineTextField extends UiField<UiMultiLineTextFieldConfig, st
 		return v1 !== v2;
 	}
 
-	public setMinHeight(minHeight: number) {
-		this.minHeight = minHeight;
-		this.$wrapper.css("min-height", minHeight ? minHeight + "px" : "");
-		this.updateTextareaHeight();
-	}
-
-	public setMaxHeight(maxHeight: number) {
-		this.maxHeight = maxHeight || Number.MAX_SAFE_INTEGER;
-		this.$wrapper.css("max-height", maxHeight ? maxHeight + "px" : "");
-		this.updateTextareaHeight();
-	}
 }
 
 TeamAppsUiComponentRegistry.registerFieldClass("UiMultiLineTextField", UiMultiLineTextField);
diff --git a/teamapps-client/ts/modules/formfield/UiNumberField.ts b/teamapps-client/ts/modules/formfield/UiNumberField.ts
index 301d8826b..b027d1c0d 100644
--- a/teamapps-client/ts/modules/formfield/UiNumberField.ts
+++ b/teamapps-client/ts/modules/formfield/UiNumberField.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,32 +17,40 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-import * as $ from "jquery";
 import {UiField} from "./UiField";
 import {UiFieldEditingMode} from "../../generated/UiFieldEditingMode";
-import {UiNumberFieldConfig, UiNumberFieldCommandHandler, UiNumberFieldEventSource} from "../../generated/UiNumberFieldConfig";
+import {UiNumberFieldCommandHandler, UiNumberFieldConfig, UiNumberFieldEventSource} from "../../generated/UiNumberFieldConfig";
 import {TeamAppsUiContext} from "../TeamAppsUiContext";
-import {Constants, formatNumber} from "../Common";
-import {keyCodes} from "trivial-components";
+import {getAutoCompleteOffValue, parseHtml} from "../Common";
+import {keyCodes} from "../trivial-components/TrivialCore";
 import {TeamAppsUiComponentRegistry} from "../TeamAppsUiComponentRegistry";
-import {UiTextInputHandlingField_SpecialKeyPressedEvent, UiTextInputHandlingField_TextInputEvent} from "../../generated/UiTextInputHandlingFieldConfig";
+import {
+	UiTextInputHandlingField_SpecialKeyPressedEvent,
+	UiTextInputHandlingField_TextInputEvent
+} from "../../generated/UiTextInputHandlingFieldConfig";
 import {TeamAppsEvent} from "../util/TeamAppsEvent";
 import {UiSpecialKey} from "../../generated/UiSpecialKey";
 import {UiNumberFieldSliderMode} from "../../generated/UiNumberFieldSliderMode";
-import {EventFactory} from "../../generated/EventFactory";
+import {NumberParser} from "../util/NumberParser";
+import {executeWhenFirstDisplayed} from "../util/ExecuteWhenFirstDisplayed";
 
 export class UiNumberField extends UiField<UiNumberFieldConfig, number> implements UiNumberFieldEventSource, UiNumberFieldCommandHandler {
 
-	public readonly onTextInput: TeamAppsEvent<UiTextInputHandlingField_TextInputEvent> = new TeamAppsEvent<UiTextInputHandlingField_TextInputEvent>(this, 250);
-	public readonly onSpecialKeyPressed: TeamAppsEvent<UiTextInputHandlingField_SpecialKeyPressedEvent> = new TeamAppsEvent<UiTextInputHandlingField_SpecialKeyPressedEvent>(this, 250);
-
-	private $wrapper: JQuery;
-	private $clearableFieldWrapper: JQuery;
-	private $field: JQuery;
-	private precision: number;
+	public readonly onTextInput: TeamAppsEvent<UiTextInputHandlingField_TextInputEvent> = new TeamAppsEvent<UiTextInputHandlingField_TextInputEvent>({
+		throttlingMode: "debounce",
+		delay: 250
+	});
+	public readonly onSpecialKeyPressed: TeamAppsEvent<UiTextInputHandlingField_SpecialKeyPressedEvent> = new TeamAppsEvent<UiTextInputHandlingField_SpecialKeyPressedEvent>({
+		throttlingMode: "debounce",
+		delay: 250
+	});
+
+	private $wrapper: HTMLElement;
+	private $clearableFieldWrapper: HTMLElement;
+	private $field: HTMLInputElement;
 	private showClearButton: boolean;
-	private $slider: JQuery;
-	private $sliderHandle: JQuery;
+	private $slider: HTMLElement;
+	private $sliderHandle: HTMLElement;
 
 	private minValue: number;
 	private maxValue: number;
@@ -50,61 +58,72 @@ export class UiNumberField extends UiField<UiNumberFieldConfig, number> implemen
 	private sliderStep: number;
 	private commitOnSliderChange: boolean;
 
+	private numberFormat: Intl.NumberFormat;
+	private numberParser: NumberParser;
+
 	protected initialize(config: UiNumberFieldConfig, context: TeamAppsUiContext) {
-		this.$wrapper = $(`<div class="UiNumberField form-control field-border field-border-glow field-background">
+		this.numberFormat = new Intl.NumberFormat(config.locale, {
+			minimumFractionDigits: this._config.precision,
+			maximumFractionDigits: this._config.precision,
+			useGrouping: true
+		});
+		this.numberParser = new NumberParser(config.locale);
+
+		this.$wrapper = parseHtml(`<div class="UiNumberField default-min-field-width form-control field-border field-border-glow field-background">
 	<div class="clearable-field-wrapper">
-		<input autocomplete="off" type="text"/>
-		<div class="clear-button tr-remove-button"/> 
+		<input autocomplete="${getAutoCompleteOffValue()}" type="text"></input>
+		<div class="clear-button tr-remove-button"></div> 
 	</div>             
     <div class="slider field-readonly-invisible field-border-visibility">
 		<div class="slider-track field-border"></div>
 		<div class="slider-handle field-border field-border-glow"></div>			
 	</div>         
 </div>`);
-		this.$clearableFieldWrapper = this.$wrapper.find(".clearable-field-wrapper");
-		this.$field = this.$wrapper.find("input");
-		this.$slider = this.$wrapper.find(".slider");
-		const $sliderTrack = this.$wrapper.find(".slider-track");
-		this.$sliderHandle = this.$wrapper.find(".slider-handle");
-		let $clearButton = this.$wrapper.find('.clear-button');
-		$clearButton.click(() => {
-			this.$field.val("");
+		this.$clearableFieldWrapper = this.$wrapper.querySelector<HTMLElement>(":scope .clearable-field-wrapper");
+		this.$field = this.$wrapper.querySelector(":scope input");
+		this.$slider = this.$wrapper.querySelector<HTMLElement>(":scope .slider");
+		this.$sliderHandle = this.$wrapper.querySelector<HTMLElement>(":scope .slider-handle");
+		let $clearButton = this.$wrapper.querySelector<HTMLElement>(':scope .clear-button');
+		$clearButton.addEventListener('click', () => {
+			this.$field.value = "";
 			this.fireTextInput();
 			this.commit();
 			this.updateClearButton();
 			this.setSliderPositionByValue(this.getTransientValue());
 		});
 
-		this.setEmptyText(config.emptyText);
+		this.setPlaceholderText(config.placeholderText);
 		this.setPrecision(config.precision);
 		this.setShowClearButton(config.showClearButton);
 		this.setCommitOnSliderChange(config.commitOnSliderChange);
 
-		this.$field.keyup(() => {
+		this.$field.addEventListener("keyup", () => {
 			this.setSliderPositionByValue(this.getTransientValue());
 		});
 
-		this.$field.focus(() => {
+		this.$field.addEventListener("focus", () => {
 			if (this.getEditingMode() !== UiFieldEditingMode.READONLY) {
 				this.$field.select();
 			}
 		});
-		this.$field.blur((e) => {
+		this.$field.addEventListener("blur", (e) => {
 			if (this.getEditingMode() !== UiFieldEditingMode.READONLY) {
 				this.commit();
 				this.updateClearButton();
 			}
 		});
-		this.$field.on("input", () => {
+		this.$field.addEventListener("input", () => {
 			this.fireTextInput();
 			this.updateClearButton();
 		});
-		this.$field.keydown((e) => {
+		this.$field.addEventListener("keydown", (e) => {
 			if (e.keyCode === keyCodes.escape) {
 				this.displayCommittedValue(); // back to committedValue
 				this.fireTextInput();
 				this.$field.select();
-				this.onSpecialKeyPressed.fire(EventFactory.createUiTextInputHandlingField_SpecialKeyPressedEvent(this.getId(), UiSpecialKey.ESCAPE));
+				this.onSpecialKeyPressed.fire({
+					key: UiSpecialKey.ESCAPE
+				});
 			} else if (e.keyCode === keyCodes.up_arrow || e.keyCode == keyCodes.down_arrow) {
 				if (this.getTransientValue() != null) {
 					e.preventDefault(); // no jumping cursor to start or end
@@ -115,52 +134,23 @@ export class UiNumberField extends UiField<UiNumberFieldConfig, number> implemen
 				}
 			} else if (e.keyCode === keyCodes.enter) {
 				this.commit();
-				this.onSpecialKeyPressed.fire(EventFactory.createUiTextInputHandlingField_SpecialKeyPressedEvent(this.getId(), UiSpecialKey.ENTER));
+				this.onSpecialKeyPressed.fire({
+					key: UiSpecialKey.ENTER
+				});
 			}
 		});
 
-		this.$wrapper.click((e) => {
-			if (e.target !== this.$field[0]) {
+		this.$wrapper.addEventListener('click', (e) => {
+			if (e.target !== this.$field) {
 				this.focus();
 			}
 		});
 
-		this.$sliderHandle.on(`${Constants.POINTER_EVENTS.start}`, (e: any) => {
-			const isSpecialMouseButton = e.button != null && e.button !== 0;
-			if (isSpecialMouseButton || this.getEditingMode() === UiFieldEditingMode.DISABLED) {
-				return;
-			}
-			if (!this.hasFocus() && !this._context.config.optimizedForTouch) {
-				this.focus();
-			}
-			e.preventDefault(); // do not lose the focus!
-			let pointerSliderHandleOffset = (e.originalEvent.clientX || e.originalEvent.touches[0].clientX) - this.$sliderHandle[0].getBoundingClientRect().left;
-			let moveHandler = (e: any) => {
-				let sliderClientX = this.$slider[0].getBoundingClientRect().left;
-				let aPrioriNewSliderPositionX = (e.originalEvent.clientX || e.originalEvent.touches[0].clientX) - pointerSliderHandleOffset - sliderClientX;
-				let [minSliderX, maxSliderX] = this.getSliderMinMaxPositionX();
-				const aPrioriNewValue = this.minValue + ((aPrioriNewSliderPositionX / (maxSliderX - minSliderX)) * (this.maxValue - this.minValue));
-				let newValue = this.coerceToSteppedValue(aPrioriNewValue);
-				this.setSliderPositionByValue(newValue);
-				this.$field.val(this.formatNumber(newValue));
-				if (!this._context.config.optimizedForTouch) {
-					this.$field.select();
-				}
-				this.ensureDecimalInput();
-				this.updateClearButton();
-			};
-			$(document).on(`${Constants.POINTER_EVENTS.move}`, moveHandler);
-			let endHandler = () => {
-				$(document).off(`${Constants.POINTER_EVENTS.move}`, moveHandler);
-				$(document).off(`${Constants.POINTER_EVENTS.end}`, endHandler);
-				if (!this._context.config.optimizedForTouch) {
-					this.focus();
-				}
-				if (this.commitOnSliderChange) {
-					this.commit();
-				}
-			};
-			$(document).on(`${Constants.POINTER_EVENTS.end}`, endHandler);
+		this.$sliderHandle.addEventListener(`pointerdown`, (e: PointerEvent & TouchEvent) => {
+			this.handleDrag(e);
+		});
+		this.$slider.addEventListener(`pointerdown`, (e: PointerEvent & TouchEvent) => {
+			this.handleDrag(e);
 		});
 
 		this.setMinValue(config.minValue);
@@ -169,8 +159,51 @@ export class UiNumberField extends UiField<UiNumberFieldConfig, number> implemen
 		this.setSliderStep(config.sliderStep);
 	}
 
+	private handleDrag(e: PointerEvent & TouchEvent) {
+		const isSpecialMouseButton = e.button != null && e.button !== 0;
+		if (isSpecialMouseButton || this.getEditingMode() === UiFieldEditingMode.DISABLED) {
+			return;
+		}
+		if (!this.hasFocus() && !this._context.config.optimizedForTouch) {
+			this.focus();
+		}
+		e.preventDefault(); // do not lose the focus!
+		let pointerSliderHandleOffset = e.target === this.$sliderHandle
+			? (e.clientX || e.touches[0].clientX) - this.$sliderHandle.getBoundingClientRect().left
+			: this.$sliderHandle.getBoundingClientRect().width / 2;
+		let moveHandler = (e: any) => {
+			let sliderClientX = this.$slider.getBoundingClientRect().left;
+			let aPrioriNewSliderPositionX = (e.clientX || e.touches[0].clientX) - pointerSliderHandleOffset - sliderClientX;
+			let [minSliderX, maxSliderX] = this.getSliderMinMaxPositionX();
+			const aPrioriNewValue = this.minValue + ((aPrioriNewSliderPositionX / (maxSliderX - minSliderX)) * (this.maxValue - this.minValue));
+			let newValue = this.coerceToSteppedValue(aPrioriNewValue);
+			this.setSliderPositionByValue(newValue);
+			this.$field.value = this.formatNumber(newValue);
+			if (!this._context.config.optimizedForTouch) {
+				this.$field.select();
+			}
+			this.ensureDecimalInput();
+			this.updateClearButton();
+		};
+		document.addEventListener(`pointermove`, moveHandler);
+		moveHandler(e); // make sure even a click (without drag) gets handled
+		let endHandler = () => {
+			document.removeEventListener(`pointermove`, moveHandler);
+			document.removeEventListener(`pointerup`, endHandler);
+			if (!this._context.config.optimizedForTouch) {
+				this.focus();
+			}
+			if (this.commitOnSliderChange) {
+				this.commit();
+			}
+		};
+		document.addEventListener(`pointerup`, endHandler);
+	}
+
 	private fireTextInput() {
-		this.onTextInput.fire(EventFactory.createUiTextInputHandlingField_TextInputEvent(this.getId(), this.$field.val().toString()));
+		this.onTextInput.fire({
+			enteredString: this.$field.value
+		});
 	}
 
 	commit(forceEvenIfNotChanged?: boolean): boolean {
@@ -180,7 +213,7 @@ export class UiNumberField extends UiField<UiNumberFieldConfig, number> implemen
 	}
 
 	private setEditorValue(value: number) {
-		this.$field.val(this.formatNumber(value));
+		this.$field.value = this.formatNumber(value);
 	}
 
 	private setSliderPositionByValue(newValue: number) {
@@ -190,11 +223,11 @@ export class UiNumberField extends UiField<UiNumberFieldConfig, number> implemen
 		let [minSliderX, maxSliderX] = this.getSliderMinMaxPositionX();
 		let newHandleX = minSliderX + (maxSliderX - minSliderX) * ((newValue - this.minValue) / (this.maxValue - this.minValue));
 		newHandleX = Math.max(minSliderX, Math.min(newHandleX, maxSliderX));
-		this.$sliderHandle.css("left", `${newHandleX}px`);
+		this.$sliderHandle.style.left = `${newHandleX}px`;
 	}
 
 	private getSliderMinMaxPositionX() {
-		return [1, this.$slider[0].offsetWidth - 1 - this.$sliderHandle[0].offsetWidth];
+		return [1, this.$slider.offsetWidth - 1 - this.$sliderHandle.offsetWidth];
 	}
 
 	private coerceToSteppedValue(aPrioriNewValue: number) {
@@ -220,18 +253,18 @@ export class UiNumberField extends UiField<UiNumberFieldConfig, number> implemen
 	}
 
 	private ensureDecimalInput() {
-		const cursorPosition = (<HTMLInputElement>this.$field[0]).selectionEnd;
-		const oldValue = this.$field.val().toString();
+		const cursorPosition = (<HTMLInputElement>this.$field).selectionEnd;
+		const oldValue = this.$field.value;
 
 		let newValue = this.convertInputToDecimalValue(oldValue);
 
-		if (oldValue !== this.formatNumber(newValue)) {
+		if (!isNaN(newValue) && oldValue !== this.formatNumber(newValue)) {
 			this.setEditorValue(newValue);
 
-			const newCursorPosition = Math.min(this.$field.val().toString().length, cursorPosition);
+			const newCursorPosition = Math.min(this.$field.value.length, cursorPosition);
 
 			try {
-				(<HTMLInputElement>this.$field[0]).setSelectionRange(newCursorPosition, newCursorPosition);
+				(<HTMLInputElement>this.$field).setSelectionRange(newCursorPosition, newCursorPosition);
 			} catch (e) {
 				// IE throws an error when invoking setSelectionRange before the element is rendered...
 			}
@@ -242,45 +275,32 @@ export class UiNumberField extends UiField<UiNumberFieldConfig, number> implemen
 		return v == null || typeof v === "number";
 	}
 
-	private convertInputToDecimalValue(oldValue: string): number {
-		let decimalSeparator = this._context.config.decimalSeparator;
-		let newValue = oldValue.replace(new RegExp('[^\-0-9' + decimalSeparator + ']', 'g'), '');
-		newValue = newValue.replace(/(\d*\.\d*)\./g, '$1'); // only one decimal separator!!
-		newValue = newValue.replace(/(.)-*/g, '$1'); // minus may only occure at the beginning
-
-		const decimalSeparatorIndex = newValue.indexOf(decimalSeparator);
-		if (this.precision >= 0 && decimalSeparatorIndex != -1 && newValue.length - decimalSeparatorIndex - 1 > this.precision) {
-			newValue = newValue.substring(0, decimalSeparatorIndex + 1 + this.precision);
-		}
-		newValue = newValue.replace(decimalSeparator, '.');
-		return parseFloat(newValue);
+	private convertInputToDecimalValue(value: string): number {
+		return this.numberParser.parse(value);
 	}
 
-	public getMainInnerDomElement(): JQuery {
+	public getMainInnerDomElement(): HTMLElement {
 		return this.$wrapper;
 	}
-
-	public getFocusableElement(): JQuery {
-		return this.$field;
-	}
-
 	protected displayCommittedValue(): void {
 		let value = this.getCommittedValue();
-		this.$field.val(value != null ? this.formatNumber(value) : "");
+		this.$field.value = value != null ? this.formatNumber(value) : "";
 		this.updateClearButton();
 		this.setSliderPositionByValue(value);
 	}
 
 	private formatNumber(value: number) {
-		return formatNumber(value, this.precision, this._context.config.decimalSeparator, "");
+		return value == null ? null : this.numberFormat.format(value);
 	}
 
 	public getTransientValue(): number {
-		if (this.$field.val() === "") {
+		if (!this.$field.value) {
 			return null;
 		} else {
-			let value = this.convertInputToDecimalValue(this.$field.val().toString());
-			if (value > this.maxValue) {
+			let value = this.convertInputToDecimalValue(this.$field.value);
+			if (isNaN(value)) {
+				return this.getCommittedValue();
+			} else if (value > this.maxValue) {
 				value = this.maxValue;
 			} else if (value < this.minValue) {
 				value = this.minValue;
@@ -289,18 +309,19 @@ export class UiNumberField extends UiField<UiNumberFieldConfig, number> implemen
 		}
 	}
 
+	@executeWhenFirstDisplayed()
 	focus(): void {
 		this.$field.select();
 	}
 
 	protected onEditingModeChanged(editingMode: UiFieldEditingMode): void {
-		UiField.defaultOnEditingModeChangedImpl(this);
+		UiField.defaultOnEditingModeChangedImpl(this, () => this.$field);
 	}
 
 	public getReadOnlyHtml(value: number, availableWidth: number): string {
 		let formatedValue: string;
 		if (value != null && value != null) {
-			formatedValue = formatNumber(value, this.precision, this._context.config.decimalSeparator, this._context.config.thousandsSeparator);
+			formatedValue = this.numberFormat.format(value);
 		} else {
 			formatedValue = "";
 		}
@@ -311,13 +332,30 @@ export class UiNumberField extends UiField<UiNumberFieldConfig, number> implemen
 		return null; // yes
 	}
 
+	setLocale(locale: string): void {
+		let value = this.getTransientValue();
+		this._config.locale = locale;
+		this.numberFormat = new Intl.NumberFormat(locale, {
+			minimumFractionDigits: this._config.precision,
+			maximumFractionDigits: this._config.precision,
+			useGrouping: true
+		});
+		this.numberParser = new NumberParser(locale);
+		this.setEditorValue(value);
+	}
+
 	setPrecision(precision: number): void {
-		this.precision = precision;
+		this._config.precision = precision;
+		this.numberFormat = new Intl.NumberFormat(this._config.locale, {
+			minimumFractionDigits: this._config.precision,
+			maximumFractionDigits: this._config.precision,
+			useGrouping: true
+		});
 		this.ensureDecimalInput();
 	}
 
-	setEmptyText(emptyText: string): void {
-		this.$field.attr('placeholder', emptyText || '');
+	setPlaceholderText(placeholderText: string): void {
+		this.$field.placeholder = placeholderText || '';
 	}
 
 	setShowClearButton(showClearButton: boolean): void {
@@ -326,7 +364,7 @@ export class UiNumberField extends UiField<UiNumberFieldConfig, number> implemen
 	}
 
 	private updateClearButton() {
-		this.$clearableFieldWrapper.toggleClass("clearable", !!(this.showClearButton && this.getTransientValue()));
+		this.$clearableFieldWrapper.classList.toggle("clearable", !!(this.showClearButton && this.getTransientValue() != null));
 	}
 
 	public valuesChanged(v1: number, v2: number): boolean {
@@ -345,9 +383,10 @@ export class UiNumberField extends UiField<UiNumberFieldConfig, number> implemen
 
 	setSliderMode(sliderMode: UiNumberFieldSliderMode): void {
 		this.sliderMode = sliderMode;
-		this.$wrapper.toggleClass("slider-mode-disabled", sliderMode === UiNumberFieldSliderMode.DISABLED);
-		this.$wrapper.toggleClass("slider-mode-visible", sliderMode === UiNumberFieldSliderMode.VISIBLE);
-		this.$wrapper.toggleClass("slider-mode-visible-if-focused", sliderMode === UiNumberFieldSliderMode.VISIBLE_IF_FOCUSED);
+		this.$wrapper.classList.toggle("slider-mode-disabled", sliderMode === UiNumberFieldSliderMode.DISABLED);
+		this.$wrapper.classList.toggle("slider-mode-visible", sliderMode === UiNumberFieldSliderMode.VISIBLE);
+		this.$wrapper.classList.toggle("slider-mode-visible-if-focused", sliderMode === UiNumberFieldSliderMode.VISIBLE_IF_FOCUSED);
+		this.$wrapper.classList.toggle("slider-mode-slider-only", sliderMode === UiNumberFieldSliderMode.SLIDER_ONLY);
 	}
 
 	setSliderStep(sliderStep: number): void {
diff --git a/teamapps-client/ts/modules/formfield/UiPasswordField.ts b/teamapps-client/ts/modules/formfield/UiPasswordField.ts
index 8f8f2fb53..c9b48dfb2 100644
--- a/teamapps-client/ts/modules/formfield/UiPasswordField.ts
+++ b/teamapps-client/ts/modules/formfield/UiPasswordField.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -18,42 +18,54 @@
  * =========================LICENSE_END==================================
  */
 import {TeamAppsUiContext} from "../TeamAppsUiContext";
-import * as md5 from "md5";
-import {UiPasswordFieldConfig, UiPasswordFieldCommandHandler, UiPasswordFieldEventSource} from "../../generated/UiPasswordFieldConfig";
+import md5 from "md5";
+import {UiPasswordFieldCommandHandler, UiPasswordFieldConfig, UiPasswordFieldEventSource} from "../../generated/UiPasswordFieldConfig";
 import {TeamAppsUiComponentRegistry} from "../TeamAppsUiComponentRegistry";
 import {UiTextField} from "./UiTextField";
-import {escapeHtml} from "../Common";
+import {getAutoCompleteOffValue, insertBefore, parseHtml} from "../Common";
+import {parseHTML} from "jquery";
 
 
 export class UiPasswordField extends UiTextField<UiPasswordFieldConfig> implements UiPasswordFieldEventSource, UiPasswordFieldCommandHandler {
-	private salt: string;
-	private sendValueAsMd5: boolean;
-
 
 	protected initialize(config: UiPasswordFieldConfig, context: TeamAppsUiContext): void {
-		this.salt = config.salt;
-		this.sendValueAsMd5 = config.sendValueAsMd5;
 		super.initialize(config, context);
-		this.$field.attr("type", "password");
+		this.$field.type = "password";
+		if (!config.autofill) {
+			this.$field.autocomplete = "new-password";
+			this.$field.setAttribute("autocomplete", getAutoCompleteOffValue());
+			this.$field.setAttribute("autocorrect", "off");
+			this.$field.setAttribute("autocapitalize", "off");
+			this.$field.setAttribute("spellcheck", "off");
+		}
+		this.getMainInnerDomElement().classList.add("UiPasswordField");
+		let $passwordVisibilityToggleButton: HTMLElement = parseHtml('<div class="password-visibility-button"></div>');
+		this.setPasswordVisibilityToggleEnabled(config.passwordVisibilityToggleEnabled);
+		insertBefore($passwordVisibilityToggleButton, this.getMainInnerDomElement().querySelector(':scope .clear-button'));
+
+		$passwordVisibilityToggleButton.addEventListener('click', ev => {
+			let visible = this.getMainInnerDomElement().classList.toggle('password-visible');
+			this.$field.type = visible ? 'text' : 'password';
+		})
 	}
 
 	setSalt(salt: string): void {
-		this.salt = salt;
+		this._config.salt = salt;
 	}
 
 	setSendValueAsMd5(sendValueAsMd5: boolean): void {
-		this.sendValueAsMd5 = sendValueAsMd5;
+		this._config.sendValueAsMd5 = sendValueAsMd5;
 	}
 
 	getTransientValue(): string {
-		return this.calculateValueString(this.$field.val());
+		return this.calculateValueString(this.$field.value);
 	}
 
 	private calculateValueString(value: any) {
 		let valueString: string;
-		if (this.sendValueAsMd5) {
-			if (this.salt) {
-				valueString = md5(this.salt + md5(value));
+		if (this._config.sendValueAsMd5) {
+			if (this._config.salt) {
+				valueString = md5(this._config.salt + md5(value));
 			} else {
 				valueString = md5(value);
 			}
@@ -66,6 +78,11 @@ export class UiPasswordField extends UiTextField<UiPasswordFieldConfig> implemen
 	public getReadOnlyHtml(value: string, availableWidth: number): string {
 		return `<div class="static-readonly-UiTextField static-readonly-UiPasswordField">${value != null ? "&#8226;".repeat(value.length) : ""}</div>`;
 	}
+
+	setPasswordVisibilityToggleEnabled(enabled: boolean): any {
+		this._config.passwordVisibilityToggleEnabled = enabled; 
+		this.getMainInnerDomElement().classList.toggle("password-visibility-toggle-enabled", enabled);
+	}
 }
 
 TeamAppsUiComponentRegistry.registerFieldClass("UiPasswordField", UiPasswordField);
diff --git a/teamapps-client/ts/modules/formfield/UiRichTextEditor.ts b/teamapps-client/ts/modules/formfield/UiRichTextEditor.ts
index 2bd41117c..82e427b2e 100644
--- a/teamapps-client/ts/modules/formfield/UiRichTextEditor.ts
+++ b/teamapps-client/ts/modules/formfield/UiRichTextEditor.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,10 +17,8 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-import * as $ from "jquery";
 import {UiField} from "./UiField";
 import {UiFieldEditingMode} from "../../generated/UiFieldEditingMode";
-import {UiCompositeFieldConfig} from "../../generated/UiCompositeFieldConfig";
 import {TeamAppsUiContext} from "../TeamAppsUiContext";
 import {TeamAppsUiComponentRegistry} from "../TeamAppsUiComponentRegistry";
 import {
@@ -28,16 +26,16 @@ import {
 	UiRichTextEditor_ImageUploadStartedEvent,
 	UiRichTextEditor_ImageUploadSuccessfulEvent,
 	UiRichTextEditor_ImageUploadTooLargeEvent,
-	UiRichTextEditorConfig,
 	UiRichTextEditorCommandHandler,
+	UiRichTextEditorConfig,
 	UiRichTextEditorEventSource
 } from "../../generated/UiRichTextEditorConfig";
-import * as tinymce from 'tinymce';
-import {Editor, Settings} from 'tinymce';
-import 'tinymce/themes/modern/theme';
-import {executeWhenAttached} from "../util/ExecuteWhenAttached";
+import tinymce, {Editor} from 'tinymce';
+import 'tinymce/themes/silver';
+import 'tinymce/icons/default';
+import {executeWhenFirstDisplayed} from "../util/ExecuteWhenFirstDisplayed";
 import {DeferredExecutor} from "../util/DeferredExecutor";
-import {generateUUID, keyCodes} from "trivial-components";
+import {generateUUID, keyCodes} from "../trivial-components/TrivialCore";
 // Any plugins you want to use has to be imported
 import 'tinymce/plugins/lists';
 import 'tinymce/plugins/table';
@@ -49,24 +47,31 @@ import 'tinymce/plugins/contextmenu';
 import 'tinymce/plugins/searchreplace';
 import 'tinymce/plugins/spellchecker';
 import 'tinymce/plugins/textcolor';
+import 'tinymce/plugins/print';
 import {TeamAppsEvent} from "../util/TeamAppsEvent";
-import {debouncedMethod, DebounceMode} from "../util/debounce";
 import {UiToolbarVisibilityMode} from "../../generated/UiToolbarVisibilityMode";
 import {UiSpinner} from "../micro-components/UiSpinner";
-import {UiTextInputHandlingField_SpecialKeyPressedEvent, UiTextInputHandlingField_TextInputEvent} from "../../generated/UiTextInputHandlingFieldConfig";
+import {
+	UiTextInputHandlingField_SpecialKeyPressedEvent,
+	UiTextInputHandlingField_TextInputEvent
+} from "../../generated/UiTextInputHandlingFieldConfig";
 import {UiSpecialKey} from "../../generated/UiSpecialKey";
-import {EventFactory} from "../../generated/EventFactory";
-import {removeTags} from "../Common";
+import {parseHtml, removeTags} from "../Common";
+import {throttledMethod} from "../util/throttle";
+import {xhr} from "d3v3";
 
 
 export class UiRichTextEditor extends UiField<UiRichTextEditorConfig, string> implements UiRichTextEditorEventSource, UiRichTextEditorCommandHandler {
 
-	public readonly onTextInput: TeamAppsEvent<UiTextInputHandlingField_TextInputEvent> = new TeamAppsEvent<UiTextInputHandlingField_TextInputEvent>(this, 5000);
-	public readonly onSpecialKeyPressed: TeamAppsEvent<UiTextInputHandlingField_SpecialKeyPressedEvent> = new TeamAppsEvent<UiTextInputHandlingField_SpecialKeyPressedEvent>(this, 250);
-	public readonly onImageUploadFailed: TeamAppsEvent<UiRichTextEditor_ImageUploadFailedEvent> = new TeamAppsEvent<UiRichTextEditor_ImageUploadFailedEvent>(this);
-	public readonly onImageUploadStarted: TeamAppsEvent<UiRichTextEditor_ImageUploadStartedEvent> = new TeamAppsEvent<UiRichTextEditor_ImageUploadStartedEvent>(this);
-	public readonly onImageUploadSuccessful: TeamAppsEvent<UiRichTextEditor_ImageUploadSuccessfulEvent> = new TeamAppsEvent<UiRichTextEditor_ImageUploadSuccessfulEvent>(this);
-	public readonly onImageUploadTooLarge: TeamAppsEvent<UiRichTextEditor_ImageUploadTooLargeEvent> = new TeamAppsEvent<UiRichTextEditor_ImageUploadTooLargeEvent>(this);
+	public readonly onTextInput: TeamAppsEvent<UiTextInputHandlingField_TextInputEvent> = new TeamAppsEvent<UiTextInputHandlingField_TextInputEvent>();
+	public readonly onSpecialKeyPressed: TeamAppsEvent<UiTextInputHandlingField_SpecialKeyPressedEvent> = new TeamAppsEvent<UiTextInputHandlingField_SpecialKeyPressedEvent>({
+		throttlingMode: "debounce",
+		delay: 250
+	});
+	public readonly onImageUploadFailed: TeamAppsEvent<UiRichTextEditor_ImageUploadFailedEvent> = new TeamAppsEvent<UiRichTextEditor_ImageUploadFailedEvent>();
+	public readonly onImageUploadStarted: TeamAppsEvent<UiRichTextEditor_ImageUploadStartedEvent> = new TeamAppsEvent<UiRichTextEditor_ImageUploadStartedEvent>();
+	public readonly onImageUploadSuccessful: TeamAppsEvent<UiRichTextEditor_ImageUploadSuccessfulEvent> = new TeamAppsEvent<UiRichTextEditor_ImageUploadSuccessfulEvent>();
+	public readonly onImageUploadTooLarge: TeamAppsEvent<UiRichTextEditor_ImageUploadTooLargeEvent> = new TeamAppsEvent<UiRichTextEditor_ImageUploadTooLargeEvent>();
 
 	private static readonly TRANSLATION_FILES: { [languageIso: string]: string } = {
 		"af": "af_ZA.js",
@@ -115,49 +120,48 @@ export class UiRichTextEditor extends UiField<UiRichTextEditorConfig, string> im
 	};
 
 
-	private $main: JQuery;
-	private $toolbarContainer: JQuery;
+	private $main: HTMLElement;
+	private $toolbarContainer: HTMLElement;
 	private editor: Editor;
 	private mceReadyExecutor: DeferredExecutor;
 	private uuid: string;
 	private imageUploadSuccessCallbacksByUuid: { [fileUuid: string]: (location: string) => void } = {};
-	private $fileField: JQuery;
+	private $fileField: HTMLInputElement;
 	private buttonGroupWidths: number[];
 	private _hasFocus: boolean;
-	private toolbarVisibilityMode: UiToolbarVisibilityMode;
 	private maxImageFileSizeInBytes: number;
 	private uploadUrl: string;
 	private runningImageUploadsCount: number = 0;
-	private $spinnerWrapper: JQuery;
+	private $spinnerWrapper: HTMLElement;
 	private destroying: boolean;
-	private $readonlyView: JQuery;
-	private initializationStarted: boolean;
 
 	protected initialize(config: UiRichTextEditorConfig, context: TeamAppsUiContext) {
-		this.toolbarVisibilityMode = config.toolbarVisibilityMode;
+		this._config.toolbarVisibilityMode = config.toolbarVisibilityMode;
 		this.setMaxImageFileSizeInBytes(config.maxImageFileSizeInBytes);
 		this.setUploadUrl(config.uploadUrl);
 
 		this.mceReadyExecutor = new DeferredExecutor();
 		this.uuid = "c-" + generateUUID();
-		this.$main = $(`<div class="UiRichTextEditor teamapps-input-wrapper field-border field-border-glow" id="${this.uuid}">
+		this.$main = parseHtml(`<div class="UiRichTextEditor default-min-field-width teamapps-input-wrapper field-border field-border-glow" id="${this.uuid}">
 			<div class="toolbar-container"></div>
 			<div class="inline-editor field-background"></div>
-			<input type="file" class="file-upload-button">
+			<input type="file" class="file-upload-button" tabindex="-1"></input>
 			<div class="spinner-wrapper hidden"></div>
-			<div class="readonly-view"></div>
 		</div>`);
-		this.$toolbarContainer = this.$main.find('.toolbar-container');
-		this.$spinnerWrapper = this.$main.find('.spinner-wrapper');
-		this.$readonlyView = this.$main.find('.readonly-view');
-		new UiSpinner().getMainDomElement().appendTo(this.$spinnerWrapper);
-		this.$fileField = this.$main.find('.file-upload-button');
-		this.$fileField.on("change", (e) => {
-			let files = (<HTMLInputElement> this.$fileField[0]).files;
+		this.$toolbarContainer = this.$main.querySelector<HTMLElement>(':scope .toolbar-container');
+		this.$spinnerWrapper = this.$main.querySelector<HTMLElement>(':scope .spinner-wrapper');
+		this.$spinnerWrapper.appendChild(new UiSpinner().getMainDomElement());
+		this.$fileField = this.$main.querySelector(':scope .file-upload-button');
+		this.$fileField.addEventListener("change", (e) => {
+			let files = (<HTMLInputElement>this.$fileField).files;
 			for (let i = 0; i < files.length; i++) {
 				let file = files.item(i);
 				if (file.size > this.maxImageFileSizeInBytes) {
-					this.onImageUploadTooLarge.fire(EventFactory.createUiRichTextEditor_ImageUploadTooLargeEvent(this.getId(), file.name, file.type, file.size));
+					this.onImageUploadTooLarge.fire({
+						fileName: file.name,
+						mimeType: file.type,
+						sizeInBytes: file.size
+					});
 				} else {
 					let fileReader = new FileReader();
 					fileReader.onload = (e) => {
@@ -166,7 +170,7 @@ export class UiRichTextEditor extends UiField<UiRichTextEditorConfig, string> im
 						this.editor.uploadImages(() => undefined);
 					};
 					fileReader.readAsDataURL(files.item(0));
-					this.$fileField.val('');
+					this.$fileField.value = '';
 				}
 			}
 		});
@@ -176,31 +180,46 @@ export class UiRichTextEditor extends UiField<UiRichTextEditorConfig, string> im
 		this.setMaxHeight(config.maxHeight);
 	}
 
-	@executeWhenAttached()
+	@executeWhenFirstDisplayed()
 	private initTinyMce() {
-		if (this.isEditable() && !this.initializationStarted) {
-			this.initializationStarted = true;
-			const translationFileName = UiRichTextEditor.TRANSLATION_FILES[this._context.config.isoLanguage];
-			tinymce.init({
-				theme_url: '/runtime-resources/tinymce/themes/modern/theme.js',
-				skin_url: '/runtime-resources/tinymce/skins/lightgray',
-				selector: `#${this.uuid} > .inline-editor`,
-				fixed_toolbar_container: `#${this.uuid} > .toolbar-container`,
-				branding: false,
-				menubar: false,
-				inline: true,
-				toolbar: "undo redo | styleselect | bold italic underline forecolor backcolor removeformat | alignleft aligncenter alignright alignjustify | blockquote bullist numlist outdent indent | insertimage table | overflowbutton",
-				plugins: 'lists table image imagetools link autolink contextmenu searchreplace textcolor',
-				contextmenu: "openlink link unlink searchreplace",
-				language_url: translationFileName != null ? "/runtime-resources/tinymce/langs/" + translationFileName : undefined,
-				entity_encoding: "raw",
-				custom_elements: 'alert',
-				style_formats: [{
+		const translationFileName = UiRichTextEditor.TRANSLATION_FILES[this._config.locale];
+		tinymce.init({
+			// theme: 'mobile',
+			// skin: 'oxide',
+			// icons: 'default',
+			theme_url: '/runtime-resources/tinymce/themes/silver/index.js',
+			skin_url: '/runtime-resources/tinymce/skins/ui/oxide',
+			selector: `#${this.uuid} > .inline-editor`,
+			readonly: !this.isEditable(),
+			fixed_toolbar_container: `#${this.uuid} > .toolbar-container`,
+			toolbar_persist: true,
+			branding: false,
+			menubar: false,
+			inline: true,
+			toolbar: `undo redo | styleselect | bold italic underline forecolor backcolor removeformat | ${this._config.imageUploadEnabled ? 'insertimagefromdisk |' : ' |'} alignleft aligncenter alignright alignjustify | blockquote bullist numlist outdent indent | table | ${this._config.printPluginEnabled ? 'print |' : ''} overflowbutton`,
+			plugins: `lists table link autolink contextmenu searchreplace textcolor ${this._config.printPluginEnabled ? 'print' : ''} ${this._config.imageUploadEnabled ? 'image imagetools' : ''}`,
+			contextmenu: "openlink link unlink searchreplace",
+			language_url: translationFileName != null ? "/runtime-resources/tinymce/langs/" + translationFileName : undefined,
+			entity_encoding: "raw",
+			formats: {
+				note: {block: 'p', classes: 'note'}
+			},
+			style_formats: [
+				// 	{
+				// 	title: 'Frequently Used'
+				// },
+				{
 					title: 'Heading 1',
 					format: 'h1'
 				}, {
 					title: 'Heading 2',
 					format: 'h2'
+				}, {
+					title: 'Heading 3',
+					format: 'h3'
+				}, {
+					title: 'Heading 4',
+					format: 'h4'
 				}, {
 					title: 'Paragraph',
 					format: 'p'
@@ -209,19 +228,20 @@ export class UiRichTextEditor extends UiField<UiRichTextEditorConfig, string> im
 					format: 'blockquote'
 				}, {
 					title: 'Note',
-					block: 'alert',
-					wrapper: 1,
+					format: "note",
 					remove: 'all'
 				}, {
 					title: 'Pre',
 					format: 'pre',
 				}, {
 					title: 'Code',
-					icon: 'code',
+					icon: 'sourcecode',
 					format: 'code'
-				}, {
-					title: '|'
-				}, {
+				},
+				// 	{
+				// 	title: 'All Styles'
+				// },
+				{
 					title: 'Headings',
 					items: [{
 						title: 'Heading 1',
@@ -252,8 +272,9 @@ export class UiRichTextEditor extends UiField<UiRichTextEditorConfig, string> im
 						format: 'blockquote'
 					}, {
 						title: 'Note',
-						block: 'alert',
-						wrapper: 1,
+						block: 'p',
+						wrapper: true,
+						classes: ".alert",
 						remove: 'all'
 					}, {
 						title: 'Pre',
@@ -275,7 +296,7 @@ export class UiRichTextEditor extends UiField<UiRichTextEditorConfig, string> im
 						format: 'underline'
 					}, {
 						title: 'Strikethrough',
-						icon: 'strikethrough',
+						icon: 'strike-through',
 						format: 'strikethrough'
 					}, {
 						title: 'Superscript',
@@ -287,185 +308,201 @@ export class UiRichTextEditor extends UiField<UiRichTextEditorConfig, string> im
 						format: 'subscript'
 					}, {
 						title: 'Code',
-						icon: 'code',
+						icon: 'sourcecode',
 						format: 'code'
 					}]
 				}],
-				init_instance_callback: editor => {
-					if (this.destroying) { // already destroyed
-						editor.destroy();
-						return;
-					}
-					this.editor = editor;
-
-					editor.addMenuItem('bullist', {text: 'Bullet list', icon: 'bullist', cmd: 'InsertUnorderedList'});
-					editor.addMenuItem('numlist', {text: 'Numbered list', icon: 'numlist', cmd: 'InsertOrderedList'});
-					editor.addMenuItem('insertimage', {icon: 'image', text: 'Insert image', onclick: () => this.$fileField[0].click()});
-					editor.addButton('overflowbutton', {
-						type: 'MenuButton',
-						image: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAsTAAALEwEAmpwYAAABeUlEQVRYhe2TsWoUQRzGf//dWbYysZW7vIDBOq1NiK2+QcRU6RI4mNtbWLi7DRzoC0iSXkFfQZLq7NRHiBZ2Aatjb/ZvMx66mW1tMj9YmP3mm28+ZhiIRCKRyH1H/gzKsnzinHsN7KnqjYi8qev6IrRoNBo9MMacAS+89GG9XtvFYvEr5B+Pxy9V9UREdoBlmqan0+n0G0DiA4fOuWtgH9gSkV3g3Fp7GAo0xrwHjoFH/jvOsuxd3+bAuc/cAvadc1dFUQw2BYwxr4DtwPrTrlCW5S5w0NVV9Zm19nFAPwnkPlTVo00BYCfUXkSGXa1pmkHI6/135vyx92Yn/mfZk/m5KyRJ8gVoAt4G+BrQg9lt2y43BbIsuwCuO57bNE3vXEFd1z8B25EVsH7uH3zGbUe+yvP8Ev56BVVVmdVqdZgkyZ6qfheRt/P5/EeoPcBkMnnqnHvuN/k4m80+9XmLohio6pGIDNu2XeZ5fllV1brPH4lEIpHIf+U3FW15e2UaPR8AAAAASUVORK5CYII=',
-						title: '...',
-						menu: [
-							(editor as any).menuItems['undo'],
-							(editor as any).menuItems['redo'],
-							(editor as any).menuItems['formats'],
-							(editor as any).menuItems['bold'],
-							(editor as any).menuItems['italic'],
-							(editor as any).menuItems['removeformat'],
-							(editor as any).menuItems['align'],
-							(editor as any).menuItems['bullist'],
-							(editor as any).menuItems['numlist'],
-							(editor as any).menuItems['insertimage'],
-							(editor as any).menuItems['inserttable'],
-							(editor as any).menuItems['openlink'],
-							(editor as any).menuItems['link'],
-							(editor as any).menuItems['unlink'],
-							(editor as any).menuItems['searchreplace']
-						]
-					});
-					editor.addButton('insertimage', {icon: 'image', tooltip: 'Insert image', onclick: () => this.$fileField[0].click()});
-					this.editor.fire("focus"); // triggers the initial rendering of the toolbar
-					this.editor.fire("blur"); // make the editor NOT being rendered as focused
-					this.updateToolbarOverflow(); // the toolbar got visible only now...
-
-					this.mceReadyExecutor.ready = true;
-
-					this.onResize();
-				},
-				setup: (editor) => {
-					editor.on('change undo redo keypress', (e) => {
-						this.fireTextInputEvent();
-					});
-					editor.on('keydown', (e) => {
-						if (e.keyCode === keyCodes.escape) {
-							this.onSpecialKeyPressed.fire(EventFactory.createUiTextInputHandlingField_SpecialKeyPressedEvent(this.getId(), UiSpecialKey.ESCAPE));
-						} else if (e.keyCode === keyCodes.enter) {
-							this.onSpecialKeyPressed.fire(EventFactory.createUiTextInputHandlingField_SpecialKeyPressedEvent(this.getId(), UiSpecialKey.ENTER));
-						}
-					});
-					editor.on('undo redo', (e) => {
-						this.editor.uploadImages(() => undefined);
+			init_instance_callback: editor => {
+				if (this.destroying) { // already destroyed
+					editor.destroy();
+					return;
+				}
+				this.editor = editor;
+				this.mceReadyExecutor.ready = true;
+			},
+			setup: (editor) => {
+				if (this._config.imageUploadEnabled) {
+					editor.ui.registry.addMenuItem('insertimagefromdisk', {
+						icon: 'image',
+						text: 'Insert image',
+						onAction: () => this.$fileField.click()
 					});
-					editor.on('focus', (e) => {
-						this._hasFocus = true;
-						this.getMainDomElement().addClass('focus');
-						this.updateToolbarVisibility();
-						this.onFocused.fire(null);
+					editor.ui.registry.addButton('insertimagefromdisk', {
+						icon: 'image',
+						tooltip: 'Insert image',
+						onAction: () => this.$fileField.click()
 					});
-					editor.on('blur', (e) => {
-						this._hasFocus = false;
-						this.getMainDomElement().removeClass('focus');
-						if (this.mayFireChangeEvents()) {
-							this.commit();
+				}
+				editor.on('change undo redo keypress', (e) => {
+					this.fireTextInputEventThrottled();
+				});
+				editor.on('keydown', (e) => {
+					if (e.keyCode === keyCodes.escape) {
+						this.onSpecialKeyPressed.fire({
+							key: UiSpecialKey.ESCAPE
+						});
+					} else if (e.keyCode === keyCodes.enter) {
+						this.onSpecialKeyPressed.fire({
+							key: UiSpecialKey.ENTER
+						});
+					}
+				});
+				editor.on('undo redo', (e) => {
+					this.editor.uploadImages(() => undefined);
+				});
+			},
+			images_upload_handler: (blobInfo: { base64: () => string, blob: () => Blob, blobUri: () => string, filename: () => string, id: () => string, name: () => string, uri: () => string }, success, failure) => {
+				this.runningImageUploadsCount++;
+				this.updateSpinnerVisibility();
+				this.onImageUploadStarted.fire({
+					fileName: blobInfo.filename(),
+					mimeType: blobInfo.blob().type,
+					sizeInBytes: blobInfo.blob().size,
+					incompleteUploadsCount: this.runningImageUploadsCount
+				});
+
+				let upload = (isFirstUpload: boolean) => {
+					let xhr: XMLHttpRequest;
+					let formData: FormData;
+
+					xhr = new XMLHttpRequest();
+					xhr.withCredentials = false;
+					xhr.open('POST', this.uploadUrl);
+
+					const handleUploadFailure = () => {
+						if (isFirstUpload) {
+							setTimeout(() => upload(false), 5000);
+						} else {
+							this.runningImageUploadsCount--;
+							this.updateSpinnerVisibility();
+							this.onImageUploadFailed.fire({
+								name: blobInfo.filename(),
+								mimeType: blobInfo.blob().type,
+								sizeInBytes: blobInfo.blob().size,
+								incompleteUploadsCount: this.runningImageUploadsCount
+							});
+							this.editor.undoManager.transact(() => {
+								this.$main.querySelector<HTMLElement>(`:scope [src='${blobInfo.blobUri()}']`).remove();
+							});
+							failure(null);
 						}
-						this.updateToolbarVisibility();
-						this.onBlurred.fire(null);
-					});
-				},
-				images_upload_handler: (blobInfo: { base64: () => string, blob: () => Blob, blobUri: () => string, filename: () => string, id: () => string, name: () => string, uri: () => string }, success, failure) => {
-					this.runningImageUploadsCount++;
-					this.updateSpinnerVisibility();
-					this.onImageUploadStarted.fire(EventFactory.createUiRichTextEditor_ImageUploadStartedEvent(this.getId(), blobInfo.filename(), blobInfo.blob().type, blobInfo.blob().size, this.runningImageUploadsCount));
-
-					let upload = (isFirstUpload: boolean) => {
-						let xhr: XMLHttpRequest;
-						let formData: FormData;
-
-						xhr = new XMLHttpRequest();
-						xhr.withCredentials = false;
-						xhr.open('POST', this.uploadUrl);
-
-						const handleUploadFailure = () => {
-							if (isFirstUpload) {
-								setTimeout(() => upload(false), 5000);
-							} else {
-								this.runningImageUploadsCount--;
-								this.updateSpinnerVisibility();
-								this.onImageUploadFailed.fire(EventFactory.createUiRichTextEditor_ImageUploadFailedEvent(this.getId(), blobInfo.filename(), blobInfo.blob().type, blobInfo.blob().size, this.runningImageUploadsCount));
-								this.editor.undoManager.transact(() => {
-									this.$main.find(`[src='${blobInfo.blobUri()}']`).detach();
-								});
-								failure(null);
-							}
-						};
-
-						xhr.onload = () => {
-							if (xhr.status < 200 || xhr.status >= 300) {
-								handleUploadFailure();
-							} else {
-								let fileUuid = JSON.parse(xhr.responseText)[0];
-								this.imageUploadSuccessCallbacksByUuid[fileUuid] = success;
-								this.runningImageUploadsCount--;
-								this.updateSpinnerVisibility();
-								this.onImageUploadSuccessful.fire(EventFactory.createUiRichTextEditor_ImageUploadSuccessfulEvent(this.getId(), fileUuid, blobInfo.filename(), blobInfo.blob().type, blobInfo.blob().size, this.runningImageUploadsCount));
-							}
-						};
-						xhr.onerror = () => {
+					};
+
+					xhr.onload = () => {
+						if (xhr.status < 200 || xhr.status >= 300) {
 							handleUploadFailure();
-						};
+						} else {
+							let fileUuid = JSON.parse(xhr.responseText)[0];
+							this.imageUploadSuccessCallbacksByUuid[fileUuid] = success;
+							this.runningImageUploadsCount--;
+							this.updateSpinnerVisibility();
+							this.onImageUploadSuccessful.fire({
+								fileUuid: fileUuid,
+								name: blobInfo.filename(),
+								mimeType: blobInfo.blob().type,
+								sizeInBytes: blobInfo.blob().size,
+								incompleteUploadsCount: this.runningImageUploadsCount
+							});
+						}
+					};
+					xhr.onerror = () => {
+						handleUploadFailure();
+					};
 
-						formData = new FormData();
-						formData.append('files', blobInfo.blob(), blobInfo.filename());
+					formData = new FormData();
+					formData.append('files', blobInfo.blob(), blobInfo.filename());
 
-						xhr.send(formData);
-					};
-					upload(true);
+					xhr.send(formData);
+				};
+				upload(true);
+			}
+		});
+
+		this.getMainElement().addEventListener('focusin', (e) => {
+			if (!this.getMainElement().contains(e.relatedTarget as Node)) { // make sure we REALLY lost the focus
+				this._hasFocus = true;
+				this.getMainElement().classList.add('focus');
+				this.onFocusGained.fire(null);
+				this.updateToolbarVisiblity();
+			}
+		});
+		this.getMainElement().addEventListener('focusout', (e) => {
+			// NOTE that it is important to do this on focusout instead of blur, since for some tinymce reason blur is called asynchronously only (setTimeout).
+			// Being synchronous is important, in order to make sure that the changes are commited before processing a, say, button event that will save the form...
+			if (!this.getMainElement().contains(e.relatedTarget as Node)) { // make sure we REALLY lost the focus
+				this._hasFocus = false;
+				this.getMainElement().classList.remove('focus');
+				if (this.mayFireChangeEvents()) {
+					this.commit();
 				}
-			} as Settings);
-		}
+				this.onBlur.fire(null);
+				this.updateToolbarVisiblity();
+			}
+		});
+	}
+
+	protected initFocusHandling() {
+		// do nothing (see editor initialization)
 	}
 
 	isValidData(v: string): boolean {
 		return v == null || typeof v === "string";
 	}
 
-	private fireTextInputEvent() {
+	@throttledMethod(5000)
+	private fireTextInputEventThrottled() {
+		this.fireTextinputEvent();
+	}
+
+	private fireTextinputEvent() {
 		if (this.mayFireChangeEvents()) {
-			this.onTextInput.fire(EventFactory.createUiTextInputHandlingField_TextInputEvent(this.getId(), this.getTransientValue()));
+			this.onTextInput.fire({
+				enteredString: this.getTransientValue()
+			});
 		}
 	}
 
+	async commitTransientValue() {
+		this.fireTextinputEvent();
+		this.commit(false);
+		return this.getCommittedValue();
+	}
+
 	private updateSpinnerVisibility() {
-		this.$spinnerWrapper.toggleClass("hidden", this.runningImageUploadsCount === 0);
+		this.$spinnerWrapper.classList.toggle("hidden", this.runningImageUploadsCount === 0);
 	}
 
 	setUploadedImageUrl(fileUuid: string, url: string): void {
 		let successCallback = this.imageUploadSuccessCallbacksByUuid[fileUuid];
 		if (successCallback != null) {
 			successCallback(url);
-			this.fireTextInputEvent(); // the html has changed at this point with the replacement of the data URL with the server-side URL
+			this.fireTextInputEventThrottled(); // the html has changed at this point with the replacement of the data URL with the server-side URL
 		}
 	}
 
-	public getMainInnerDomElement(): JQuery {
+	public getMainInnerDomElement(): HTMLElement {
 		return this.$main;
 	}
 
-	public getFocusableElement(): JQuery {
-		return this.editor != null ? $(this.editor.getBody()) : null;
-	}
-
 	protected displayCommittedValue(): void {
 		const value = removeTags(this.getCommittedValue(), "style");
-		if (this.isEditable()) {
-			this.mceReadyExecutor.invokeWhenReady(() => {
-				this.editor.setContent(value);
-				this.editor.undoManager.clear();
-			});
-		} else {
-			this.$readonlyView.html(value);
-		}
+		this.mceReadyExecutor.invokeWhenReady(() => {
+			this.editor.setContent(value);
+			this.editor.undoManager.reset();
+		});
 	}
 
+	@executeWhenFirstDisplayed()
 	focus(): void {
 		this.editor && this.editor.focus(false);
 	}
 
-	doDestroy(): void {
+	destroy(): void {
+		super.destroy();
 		this.destroying = true;
-		if (this.editor != null) {
-            this.editor.destroy();
-        }
+		this.mceReadyExecutor.invokeOnceWhenReady(() => {
+			this.editor.destroy();
+		})
 	}
 
 	getTransientValue(): string {
@@ -473,42 +510,36 @@ export class UiRichTextEditor extends UiField<UiRichTextEditorConfig, string> im
 		return content.replace(/src="data:.*?"/g, "");
 	}
 
-	@debouncedMethod(700, DebounceMode.BOTH)
-	@executeWhenAttached(true)
+	@executeWhenFirstDisplayed(true)
 	onResize(): void {
-		this.updateToolbarOverflow();
+		this.rerenderToolbar();
 	}
 
-	private updateToolbarOverflow() {
-		if (!this.buttonGroupWidths) {
-			let buttonGroupWidths = this.$toolbarContainer.find(".mce-btn-group:not(:last-child)").toArray()
-				.map(e => e.offsetWidth);
-			if (buttonGroupWidths.reduce((sum, groupWidth) => sum + groupWidth, 0) === 0) { // toolbar apparently not visible
-				return;
-			} else {
-				this.buttonGroupWidths = buttonGroupWidths;
-			}
-		}
+	protected onEditingModeChanged(editingMode: UiFieldEditingMode, oldEditingMode: UiFieldEditingMode): void {
+		this.mceReadyExecutor?.invokeOnceWhenReady(() => {
+			// this MUST be done after initializing! Don't skip it when the editor is null,
+			// since the editor might just be initializing and thereby setting the readonly value to an old value! (actually happened!)
+			this.editor.setMode(this.isEditable() ? 'design' : 'readonly');
+			this.updateToolbarVisiblity();
+			this.rerenderToolbar();
+		})
+		let wasEditable = !(oldEditingMode === UiFieldEditingMode.DISABLED || oldEditingMode === UiFieldEditingMode.READONLY);
+		UiField.defaultOnEditingModeChangedImpl(this, () => this.editor != null ? this.editor.getBody() : null);
+	}
 
-		let availableWidth = this.$toolbarContainer[0].offsetWidth - 50 /*overflowbutton*/;
-		let $groupButtons = this.$toolbarContainer.find(".mce-btn-group:not(:last-child)");
-		let consumedWidth = 0;
-		this.buttonGroupWidths.forEach((groupWidth, index) => {
-			consumedWidth = consumedWidth + groupWidth;
-			$($groupButtons.get(index)).toggleClass('hidden', consumedWidth > availableWidth);
-		});
+	private updateToolbarVisiblity() { // both visibility and content (+overflow) are updated on show()
+		this.$toolbarContainer.classList.toggle("hidden", !this.toolbarShouldBeShown());
 	}
 
-	protected onEditingModeChanged(editingMode: UiFieldEditingMode, oldEditingMode: UiFieldEditingMode): void {
-		let wasEditable = !(oldEditingMode === UiFieldEditingMode.DISABLED || oldEditingMode === UiFieldEditingMode.READONLY);
-		if (this.isEditable()) {
-			this.initTinyMce();
-		} else if (wasEditable && !this.isEditable()) {
-			this.$readonlyView.html(removeTags(this.getCommittedValue(), "style"));
+	private rerenderToolbar() { // both visibility and content (+overflow) are updated on show()
+		if (this.editor != null) {
+			this.editor.ui.show(); // effectively rerenders the toolbar
 		}
-		UiField.defaultOnEditingModeChangedImpl(this);
-		this.$main.toggleClass("editable-if-focused", editingMode === UiFieldEditingMode.EDITABLE_IF_FOCUSED);
-		this.updateToolbarVisibility();
+	}
+
+	private toolbarShouldBeShown() {
+		return this.isEditable() &&
+			(this._config.toolbarVisibilityMode == UiToolbarVisibilityMode.VISIBLE || (this._config.toolbarVisibilityMode == UiToolbarVisibilityMode.VISIBLE_IF_FOCUSED && this.hasFocus()));
 	}
 
 	getDefaultValue(): string {
@@ -516,19 +547,8 @@ export class UiRichTextEditor extends UiField<UiRichTextEditorConfig, string> im
 	}
 
 	setToolbarVisibilityMode(toolbarVisibilityMode: UiToolbarVisibilityMode): void {
-		this.toolbarVisibilityMode = toolbarVisibilityMode;
-		this.updateToolbarVisibility();
-	}
-
-	private updateToolbarVisibility() {
-		const toolbarVisible =
-			(this.isEditable() && (this.toolbarVisibilityMode === UiToolbarVisibilityMode.VISIBLE || (this.toolbarVisibilityMode === UiToolbarVisibilityMode.VISIBLE_IF_FOCUSED && this._hasFocus)));
-		this.$toolbarContainer.toggleClass('hidden', !toolbarVisible);
-		this.updateToolbarOverflow();
-	}
-
-	hasFocus(): boolean {
-		return this._hasFocus;
+		this._config.toolbarVisibilityMode = toolbarVisibilityMode;
+		this.updateToolbarVisiblity();
 	}
 
 	setMaxImageFileSizeInBytes(maxImageFileSizeInBytes: number): void {
@@ -552,16 +572,16 @@ export class UiRichTextEditor extends UiField<UiRichTextEditorConfig, string> im
 	}
 
 	public setMinHeight(minHeight: number) {
-		this.$main.css("min-height", minHeight ? minHeight + "px" : "");
+		this.$main.style.minHeight = minHeight ? minHeight + "px" : "";
 	}
 
 	public setMaxHeight(maxHeight: number) {
-		this.$main.css("max-height", maxHeight ? maxHeight + "px" : "");
+		this.$main.style.maxHeight = maxHeight ? maxHeight + "px" : "";
 	}
 
 	append(s: string, scrollToBottom: boolean): void {
 		// this.mceReadyExecutor.invokeWhenReady(() => {
-		// 	this.editor.append(s);
+		// 	this.editor.appendChild(s);
 		// 	this.editor.
 		// });
 	}
diff --git a/teamapps-client/ts/modules/formfield/UiSlider.ts b/teamapps-client/ts/modules/formfield/UiSlider.ts
deleted file mode 100644
index dc7dbc76d..000000000
--- a/teamapps-client/ts/modules/formfield/UiSlider.ts
+++ /dev/null
@@ -1,186 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-import * as $ from "jquery";
-import * as noUiSlider from "nouislider";
-import {UiField} from "./UiField";
-import {UiSliderConfig, UiSliderCommandHandler, UiSliderEventSource} from "../../generated/UiSliderConfig";
-import {TeamAppsUiContext} from "../TeamAppsUiContext";
-import {TeamAppsUiComponentRegistry} from "../TeamAppsUiComponentRegistry";
-import {UiFieldEditingMode} from "../../generated/UiFieldEditingMode";
-import {UiColorConfig} from "../../generated/UiColorConfig";
-import {generateUUID, humanReadableFileSize} from "../Common";
-import {createUiColorCssString} from "../util/CssFormatUtil";
-
-const wNumb: (options: wNumb.Options) => wNumb.Instance = require('wnumb');
-
-
-export class UiSlider extends UiField<UiSliderConfig, number> implements UiSliderEventSource, UiSliderCommandHandler {
-
-	private uuid: string;
-	private $main: JQuery;
-	private $style: JQuery;
-	private $slider: JQuery;
-	private slider: noUiSlider.noUiSlider;
-
-	private min: number | undefined;
-	private max: number | undefined;
-	private step: number | undefined;
-	private displayedDecimals: number | undefined;
-	private tooltipPrefix: string | undefined;
-	private tooltipPostfix: string | undefined;
-	private humanReadableFileSize: boolean | undefined;
-
-	protected initialize(config: UiSliderConfig, context: TeamAppsUiContext) {
-		this.uuid = generateUUID();
-		this.$main = $(`<div class="UiSlider" data-uuid="${this.uuid}">
-	<style></style>
-	<div class="slider"></div>
-</div>`);
-		this.$style = this.$main.find('style');
-		this.$slider = this.$main.find('.slider');
-
-		this.min = config.min;
-		this.max = config.max;
-		this.step = config.step;
-		this.displayedDecimals = config.displayedDecimals;
-		this.tooltipPrefix = config.tooltipPrefix;
-		this.tooltipPostfix = config.tooltipPostfix;
-		this.humanReadableFileSize = config.humanReadableFileSize;
-
-		noUiSlider.create(this.$slider[0], this.createNoUiSliderOptions());
-		this.slider = (this.$slider[0] as any).noUiSlider;
-		this.slider.on('set', () => this.commit());
-
-		const $handle = this.$slider.find('.noUi-handle');
-		$handle.on('keydown', (e) => {
-			const value = Number(this.slider.get());
-			if (e.which === 37) {
-				this.slider.set(value - this.step);
-			} else if (e.which === 39) {
-				this.slider.set(value + this.step);
-			}
-		});
-
-		this.setSelectionColor(config.selectionColor);
-	}
-
-	isValidData(v: number): boolean {
-		return v == null || typeof v === "number";
-	}
-
-	private createNoUiSliderOptions(): noUiSlider.Options {
-		return {
-			start: [this.min],
-			tooltips: this.humanReadableFileSize ? {
-				to: (num: number) => (this.tooltipPrefix || "") + humanReadableFileSize(num, true) + (this.tooltipPostfix || "")
-			} : wNumb({
-				decimals: this.displayedDecimals,
-				thousand: this._context.config.thousandsSeparator,
-				mark: this._context.config.decimalSeparator,
-				prefix: this.tooltipPrefix,
-				postfix: this.tooltipPostfix
-			}),
-			step: this.step,
-			connect: [true, false],
-			range: {
-				'min': this.min,
-				'max': this.max
-			}
-		};
-	}
-
-	protected displayCommittedValue(): void {
-		this.slider.set(this.getCommittedValue());
-	}
-
-	getDefaultValue(): number {
-		return this._config.min;
-	}
-
-	getFocusableElement(): JQuery {
-		return this.$slider.find('.noUi-handle').first();
-	}
-
-	getMainInnerDomElement(): JQuery {
-		return this.$main;
-	}
-
-	getTransientValue(): number {
-		return parseFloat(this.slider.get() as string);
-	}
-
-	protected onEditingModeChanged(editingMode: UiFieldEditingMode): void {
-		if (editingMode === UiFieldEditingMode.DISABLED || editingMode === UiFieldEditingMode.READONLY) {
-			this.$slider.prop('disabled', true);
-		} else if (editingMode === UiFieldEditingMode.EDITABLE || editingMode === UiFieldEditingMode.EDITABLE_IF_FOCUSED) {
-			this.$slider.prop('disabled', false);
-		}
-	}
-
-	valuesChanged(v1: number, v2: number): boolean {
-		return v1 !== v2;
-	}
-
-	public setSelectionColor(selectionColor: UiColorConfig) {
-		this.$style.html(`
-			[data-uuid="${this.uuid}"] .noUi-connect {
-				background-color: ${createUiColorCssString(selectionColor)};
-			}
-		`)
-	}
-
-	setDisplayedDecimals(displayedDecimals: number): void {
-		this.displayedDecimals = displayedDecimals;
-		this.slider.updateOptions(this.createNoUiSliderOptions(), false);
-	}
-
-	setMax(max: number): void {
-		this.max = max;
-		this.slider.updateOptions(this.createNoUiSliderOptions(), false);
-	}
-
-	setMin(min: number): void {
-		this.min = min;
-		this.slider.updateOptions(this.createNoUiSliderOptions(), false);
-	}
-
-	setStep(step: number): void {
-		this.step = step;
-		this.slider.updateOptions(this.createNoUiSliderOptions(), false);
-	}
-
-	setTooltipPostfix(tooltipPostfix: string): void {
-		this.tooltipPostfix = tooltipPostfix;
-		this.slider.updateOptions(this.createNoUiSliderOptions(), false);
-	}
-
-	setTooltipPrefix(tooltipPrefix: string): void {
-		this.tooltipPrefix = tooltipPrefix;
-		this.slider.updateOptions(this.createNoUiSliderOptions(), false);
-	}
-
-	setHumanReadableFileSize(humanReadableFileSize: boolean): void {
-		this.humanReadableFileSize = humanReadableFileSize;
-		this.slider.updateOptions(this.createNoUiSliderOptions(), false);
-	}
-
-}
-
-TeamAppsUiComponentRegistry.registerFieldClass("UiSlider", UiSlider);
diff --git a/teamapps-client/ts/modules/formfield/UiTagComboBox.ts b/teamapps-client/ts/modules/formfield/UiTagComboBox.ts
index 868f73855..52740dc14 100644
--- a/teamapps-client/ts/modules/formfield/UiTagComboBox.ts
+++ b/teamapps-client/ts/modules/formfield/UiTagComboBox.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,67 +17,50 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-import * as $ from "jquery";
-import {defaultTreeQueryFunctionFactory, keyCodes, ResultCallback, trivialMatch, TrivialTagComboBox, TrivialTreeBox, wrapWithDefaultTagWrapper} from "trivial-components";
-
-import {UiTagComboBox_WrappingMode, UiTagComboBoxConfig, UiTagComboBoxCommandHandler, UiTagComboBoxEventSource} from "../../generated/UiTagComboBoxConfig";
+import {wrapWithDefaultTagWrapper} from "../trivial-components/TrivialCore";
+import {TrivialTagComboBox} from "../trivial-components/TrivialTagComboBox";
+
+import {
+	UiTagComboBox_WrappingMode,
+	UiTagComboBoxCommandHandler,
+	UiTagComboBoxConfig,
+	UiTagComboBoxEventSource
+} from "../../generated/UiTagComboBoxConfig";
 import {UiFieldEditingMode} from "../../generated/UiFieldEditingMode";
 import {UiField} from "./UiField";
 import {TeamAppsUiContext} from "../TeamAppsUiContext";
 import {TeamAppsUiComponentRegistry} from "../TeamAppsUiComponentRegistry";
 import {TeamAppsEvent} from "../util/TeamAppsEvent";
-import {UiComboBox_LazyChildDataRequestedEvent} from "../../generated/UiComboBoxConfig";
-import {UiTextInputHandlingField_SpecialKeyPressedEvent, UiTextInputHandlingField_TextInputEvent} from "../../generated/UiTextInputHandlingFieldConfig";
+import {
+	UiTextInputHandlingField_SpecialKeyPressedEvent,
+	UiTextInputHandlingField_TextInputEvent
+} from "../../generated/UiTextInputHandlingFieldConfig";
 import {UiSpecialKey} from "../../generated/UiSpecialKey";
 import {UiComboBoxTreeRecordConfig} from "../../generated/UiComboBoxTreeRecordConfig";
 import {UiTemplateConfig} from "../../generated/UiTemplateConfig";
-import {isFreeTextEntry, UiComboBox} from "./UiComboBox";
-import {buildObjectTree, NodeWithChildren, Renderer} from "../Common";
-import {EventFactory} from "../../generated/EventFactory";
+import {isFreeTextEntry} from "./UiComboBox";
+import {buildObjectTree, getAutoCompleteOffValue, NodeWithChildren, parseHtml, Renderer} from "../Common";
+import {TreeBoxDropdown} from "../trivial-components/dropdown/TreeBoxDropdown";
+import {TrivialTreeBox} from "../trivial-components/TrivialTreeBox";
+import {executeWhenFirstDisplayed} from "../util/ExecuteWhenFirstDisplayed";
 
 export class UiTagComboBox extends UiField<UiTagComboBoxConfig, UiComboBoxTreeRecordConfig[]> implements UiTagComboBoxEventSource, UiTagComboBoxCommandHandler {
-	public readonly onTextInput: TeamAppsEvent<UiTextInputHandlingField_TextInputEvent> = new TeamAppsEvent(this, 250);
-	public readonly onSpecialKeyPressed: TeamAppsEvent<UiTextInputHandlingField_SpecialKeyPressedEvent> = new TeamAppsEvent(this, 250);
-	public readonly onLazyChildDataRequested: TeamAppsEvent<UiComboBox_LazyChildDataRequestedEvent> = new TeamAppsEvent(this);
+	public readonly onTextInput: TeamAppsEvent<UiTextInputHandlingField_TextInputEvent> = new TeamAppsEvent({throttlingMode: "debounce", delay: 250});
+	public readonly onSpecialKeyPressed: TeamAppsEvent<UiTextInputHandlingField_SpecialKeyPressedEvent> = new TeamAppsEvent({throttlingMode: "debounce", delay: 250});
 
-	private $originalInput: JQuery;
+	private $originalInput: HTMLElement;
 	private trivialTagComboBox: TrivialTagComboBox<NodeWithChildren<UiComboBoxTreeRecordConfig>>;
 	private templateRenderers: { [name: string]: Renderer };
-	private lastResultCallback: Function;
+	private resultCallbacksQueue: ((result: NodeWithChildren<UiComboBoxTreeRecordConfig>[]) => void)[] = [];
 
 	private freeTextIdEntryCounter = -1;
 
 	protected initialize(config: UiTagComboBoxConfig, context: TeamAppsUiContext) {
-		this.$originalInput = $('<input type="text" autocomplete="off">');
+		this.$originalInput = parseHtml(`<input type="text" autocomplete="${getAutoCompleteOffValue()}">`);
 
 		this.templateRenderers = config.templates != null ? context.templateRegistry.createTemplateRenderers(config.templates) : {};
 
-		let localQueryFunction: Function;
-		const objectTree = buildObjectTree(config.staticData, "id", "parentId");
-		if (config.staticData != null && config.staticData.length > 0) {
-			let trivialMatchingOptions = UiComboBox.createTrivialMatchingOptions(config);
-			localQueryFunction = defaultTreeQueryFunctionFactory(objectTree, (entry: NodeWithChildren<UiComboBoxTreeRecordConfig>, queryString: string) => {
-				if (config.staticDataMatchPropertyNames) {
-					return config.staticDataMatchPropertyNames.some(fieldName => entry.values[fieldName] && trivialMatch(entry.values[fieldName], queryString, trivialMatchingOptions).length > 0);
-				} else {
-					return trivialMatch(entry.asString, queryString, trivialMatchingOptions).length > 0;
-				}
-			}, "__children", "expanded");
-		}
-		let queryFunction = (queryString: string, resultCallback: ResultCallback<NodeWithChildren<UiComboBoxTreeRecordConfig>>) => {
-			this.lastResultCallback = resultCallback;
-			this.onTextInput.fire(EventFactory.createUiTextInputHandlingField_TextInputEvent(this.getId(), queryString));
-			if (localQueryFunction != null) {
-				localQueryFunction(queryString, resultCallback);
-			}
-		};
-
-		this.trivialTagComboBox = new TrivialTagComboBox<NodeWithChildren<UiComboBoxTreeRecordConfig>>(this.$originalInput, {
-			childrenProperty: "__children",
-			expandedProperty: "expanded",
-			showExpanders: config.showExpanders,
-			queryFunction: queryFunction,
-			entryRenderingFunction: (entry) => this.renderRecord(entry, true),
+		this.trivialTagComboBox = new TrivialTagComboBox<NodeWithChildren<UiComboBoxTreeRecordConfig>>({
 			selectedEntryRenderingFunction: (entry) => {
 				if (isFreeTextEntry(entry)) {
 					return wrapWithDefaultTagWrapper(`<div class="free-text-entry">${entry.asString}</div>`, config.showClearButton);
@@ -88,50 +71,68 @@ export class UiTagComboBox extends UiField<UiTagComboBoxConfig, UiComboBoxTreeRe
 			autoComplete: !!config.autoComplete,
 			showTrigger: config.showDropDownButton,
 			editingMode: config.editingMode === UiFieldEditingMode.READONLY ? 'readonly' : config.editingMode === UiFieldEditingMode.DISABLED ? 'disabled' : 'editable',
-			lazyChildrenQueryFunction: (node: NodeWithChildren<UiComboBoxTreeRecordConfig>) => {
-				this.onLazyChildDataRequested.fire(EventFactory.createUiComboBox_LazyChildDataRequestedEvent(this.getId(), node.id));
-			},
-			lazyChildrenFlag: entry => entry.lazyChildren,
-			spinnerTemplate: `<div class="UiSpinner" style="height: 20px; width: 20px; margin: 4px auto 4px auto;"></div>`,
+			spinnerTemplate: `<div class="teamapps-spinner" style="height: 20px; width: 20px; margin: 4px auto 4px auto;"></div>`,
 			textHighlightingEntryLimit: config.textHighlightingEntryLimit,
 			showDropDownOnResultsOnly: config.showDropDownAfterResultsArrive,
-			autoCompleteFunction: (editorText, entry) => {
-				const entryAsString = entry.asString;
-				if (entryAsString.toLowerCase().indexOf(editorText.toLowerCase()) === 0) {
-					return entryAsString;
-				} else {
-					return "";
-				}
-			},
+			entryToEditorTextFunction: e => e.asString,
 			freeTextEntryFactory: (freeText) => {
 				return {id: this.freeTextIdEntryCounter--, values: {}, asString: freeText};
 			},
-			idFunction: entry => entry && entry.id,
 			selectionAcceptor: entry => {
 				const violatesDistinctSetting = config.distinct && this.trivialTagComboBox.getSelectedEntries().map(e => e.id).indexOf(entry.id) !== -1;
 				const violatesMaxEntriesSetting = !!config.maxEntries && this.trivialTagComboBox.getSelectedEntries().length >= config.maxEntries;
 				const violatesFreeTextSetting = !config.allowAnyText && isFreeTextEntry(entry);
 				return !violatesDistinctSetting && !violatesMaxEntriesSetting && !violatesFreeTextSetting;
+			},
+			twoStepDeletion: this._config.twoStepDeletion,
+			preselectFirstQueryResult: config.highlightFirstResultEntry,
+			placeholderText: config.placeholderText,
+			dropDownMaxHeight: config.dropDownMaxHeight,
+			dropDownMinWidth: config.dropDownMinWidth
+		}, new TreeBoxDropdown({
+			queryFunction: (queryString: string) => {
+				this.onTextInput.fire({enteredString: queryString}); // TODO this is definitely the wrong place for this!!
+				return config.retrieveDropdownEntries({queryString})
+					.then(entries => buildObjectTree(entries, "id", "parentId"));
+			},
+			textHighlightingEntryLimit: config.textHighlightingEntryLimit,
+			preselectionMatcher: (query, entry) => entry.asString.toLowerCase().indexOf(query.toLowerCase()) >= 0
+		}, new TrivialTreeBox<NodeWithChildren<UiComboBoxTreeRecordConfig>>({
+			childrenProperty: "__children",
+			expandedProperty: "expanded",
+			showExpanders: config.showExpanders,
+			entryRenderingFunction: entry => this.renderRecord(entry, true),
+			idFunction: entry => entry && entry.id,
+			lazyChildrenQueryFunction: async (node: NodeWithChildren<UiComboBoxTreeRecordConfig>) => buildObjectTree(await config.lazyChildren({parentId: node.id}), "id", "parentId"),
+			lazyChildrenFlag: entry => entry.lazyChildren,
+			selectableDecider: entry => entry.selectable,
+			selectOnHover: true,
+			animationDuration: this._config.animate ? 120 : 0
+		})));
+		this.trivialTagComboBox.getMainDomElement().classList.add("UiTagComboBox", "default-min-field-width");
+		this.trivialTagComboBox.getMainDomElement().classList.toggle("wrapping-mode-single-line", config.wrappingMode === UiTagComboBox_WrappingMode.SINGLE_LINE);
+		this.trivialTagComboBox.getMainDomElement().classList.toggle("wrapping-mode-single-tag-per-line", config.wrappingMode === UiTagComboBox_WrappingMode.SINGLE_TAG_PER_LINE);
+		this.trivialTagComboBox.onValueChanged.addListener(() => this.commit());
+		this.trivialTagComboBox.getEditor().addEventListener("keydown", (e: KeyboardEvent) => {
+			if (e.key === "Escape") {
+				this.onSpecialKeyPressed.fire({
+					key: UiSpecialKey.ESCAPE
+				});
+			} else if (e.key === "Enter") {
+				this.onSpecialKeyPressed.fire({
+					key: UiSpecialKey.ENTER
+				});
 			}
 		});
-		$(this.trivialTagComboBox.getMainDomElement())
-			.addClass("UiTagComboBox")
-			.toggleClass("wrapping-mode-single-line", config.wrappingMode === UiTagComboBox_WrappingMode.SINGLE_LINE)
-			.toggleClass("wrapping-mode-single-tag-per-line", config.wrappingMode === UiTagComboBox_WrappingMode.SINGLE_TAG_PER_LINE);
-		this.trivialTagComboBox.onSelectedEntryChanged.addListener(() => this.commit());
-		$(this.trivialTagComboBox.getEditor()).on("keydown", (e) => {
-			if (e.keyCode === keyCodes.escape) {
-				this.onSpecialKeyPressed.fire(EventFactory.createUiTextInputHandlingField_SpecialKeyPressedEvent(this.getId(), UiSpecialKey.ESCAPE));
-			} else if (e.keyCode === keyCodes.enter) {
-				this.onSpecialKeyPressed.fire(EventFactory.createUiTextInputHandlingField_SpecialKeyPressedEvent(this.getId(), UiSpecialKey.ENTER));
-			}
-		});
 
-		$(this.trivialTagComboBox.getMainDomElement()).addClass("field-border field-border-glow field-background");
-		$(this.trivialTagComboBox.getMainDomElement()).find(".tr-editor").addClass("field-background");
-		$(this.trivialTagComboBox.getMainDomElement()).find(".tr-trigger").addClass("field-border");
-		this.trivialTagComboBox.onFocus.addListener(() => this.getMainDomElement().addClass("focus"));
-		this.trivialTagComboBox.onBlur.addListener(() => this.getMainDomElement().removeClass("focus"));
+		this.trivialTagComboBox.getMainDomElement().classList.add("field-border", "field-border-glow", "field-background");
+		this.trivialTagComboBox.getMainDomElement().querySelector<HTMLElement>(":scope .tr-editor").classList.add("field-background");
+		this.trivialTagComboBox.getMainDomElement().querySelector<HTMLElement>(":scope .tr-trigger").classList.add("field-border");
+	}
+
+	protected initFocusHandling() {
+		this.trivialTagComboBox.onFocus.addListener(() => this.onFocusGained.fire({}));
+		this.trivialTagComboBox.onBlur.addListener(() => this.onBlur.fire({}));
 	}
 
 	private renderRecord(record: NodeWithChildren<UiComboBoxTreeRecordConfig>, dropdown: boolean): string {
@@ -148,29 +149,8 @@ export class UiTagComboBox extends UiField<UiTagComboBoxConfig, UiComboBoxTreeRe
 		return v == null || Array.isArray(v);
 	}
 
-	setDropDownData(data: UiComboBoxTreeRecordConfig[]): void {
-		const objectTree = buildObjectTree(data, "id", "parentId");
-		if (this.lastResultCallback != null) {
-			this.lastResultCallback(objectTree);
-		} else {
-			this.trivialTagComboBox.updateEntries(objectTree);
-		}
-		if (this._config.showDropDownAfterResultsArrive && data.length > 0 && this.hasFocus()) {
-			this.trivialTagComboBox.openDropDown();
-		}
-	}
-
-	setChildNodes(parentId: number, recordList: UiComboBoxTreeRecordConfig[]): void {
-		const objectTree = buildObjectTree(recordList, "id", "parentId");
-		(this.trivialTagComboBox.getDropDownComponent() as TrivialTreeBox<NodeWithChildren<UiComboBoxTreeRecordConfig>>).updateChildren(parentId as any, objectTree);
-	}
-
-	public getMainInnerDomElement(): JQuery {
-		return $(this.trivialTagComboBox.getMainDomElement());
-	}
-
-	public getFocusableElement(): JQuery {
-		return $(this.trivialTagComboBox.getMainDomElement());
+	public getMainInnerDomElement(): HTMLElement {
+		return this.trivialTagComboBox.getMainDomElement() as HTMLElement;
 	}
 
 	protected displayCommittedValue(): void {
@@ -186,18 +166,14 @@ export class UiTagComboBox extends UiField<UiTagComboBoxConfig, UiComboBoxTreeRe
 		return values.map(value => isFreeTextEntry(value) ? value.asString : value.id);
 	}
 
+	@executeWhenFirstDisplayed()
 	focus(): void {
 		this.trivialTagComboBox.focus(); // TODO
 	}
 
-	public hasFocus(): boolean {
-		return this.getMainInnerDomElement().is('.focus');
-	}
-
 	protected onEditingModeChanged(editingMode: UiFieldEditingMode): void {
-		this.getMainDomElement()
-			.removeClass(Object.values(UiField.editingModeCssClasses).join(" "))
-			.addClass(UiField.editingModeCssClasses[editingMode]);
+		this.getMainElement().classList.remove(...Object.values(UiField.editingModeCssClasses));
+		this.getMainElement().classList.add(UiField.editingModeCssClasses[editingMode]);
 		if (editingMode === UiFieldEditingMode.READONLY) {
 			this.trivialTagComboBox.setEditingMode("readonly");
 		} else if (editingMode === UiFieldEditingMode.DISABLED) {
@@ -226,9 +202,10 @@ export class UiTagComboBox extends UiField<UiTagComboBoxConfig, UiComboBoxTreeRe
 		}
 	}
 
-	doDestroy(): void {
+	destroy(): void {
+		super.destroy();
 		this.trivialTagComboBox.destroy();
-		this.$originalInput.detach();
+		this.$originalInput.remove();
 	}
 
 
diff --git a/teamapps-client/ts/modules/formfield/UiTemplateField.ts b/teamapps-client/ts/modules/formfield/UiTemplateField.ts
new file mode 100644
index 000000000..6d30d6492
--- /dev/null
+++ b/teamapps-client/ts/modules/formfield/UiTemplateField.ts
@@ -0,0 +1,87 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+import {UiField} from "./UiField";
+import {UiClientRecordConfig} from "../../generated/UiClientRecordConfig";
+import {TeamAppsUiComponentRegistry} from "../TeamAppsUiComponentRegistry";
+import {UiTemplateField_ClickedEvent, UiTemplateFieldCommandHandler, UiTemplateFieldConfig, UiTemplateFieldEventSource} from "../../generated/UiTemplateFieldConfig";
+import {TeamAppsUiContext} from "../TeamAppsUiContext";
+import {parseHtml, Renderer} from "../Common";
+import {UiFieldEditingMode} from "../../generated/UiFieldEditingMode";
+import {TeamAppsEvent} from "../util/TeamAppsEvent";
+import {executeWhenFirstDisplayed} from "../util/ExecuteWhenFirstDisplayed";
+
+export class UiTemplateField extends UiField<UiTemplateFieldConfig, UiClientRecordConfig> implements UiTemplateFieldCommandHandler, UiTemplateFieldEventSource {
+
+    public readonly onClicked: TeamAppsEvent<UiTemplateField_ClickedEvent> = new TeamAppsEvent();
+
+	private $main: HTMLElement;
+	private templateRenderer: Renderer;
+
+	constructor(config: UiTemplateFieldConfig, context: TeamAppsUiContext) {
+		super(config, context);
+	}
+
+	protected initialize(config: UiTemplateFieldConfig, context: TeamAppsUiContext): void {
+		this.$main = parseHtml(`<div class="UiTemplateField"></div>`);
+		this.$main.addEventListener("click", ev => this.onClicked.fire({}));
+		this.update(config);
+	}
+
+	update(config: UiTemplateFieldConfig): void {
+		this.templateRenderer = this._context.templateRegistry.createTemplateRenderer(config.template);
+		this.displayCommittedValue();
+	}
+
+	getMainInnerDomElement(): HTMLElement {
+		return this.$main;
+	}
+
+	protected displayCommittedValue(): void {
+		this.$main.innerHTML = this.templateRenderer.render(this.getCommittedValue() && this.getCommittedValue().values);
+	}
+
+	@executeWhenFirstDisplayed()
+	focus() {
+		// do nothing
+	}
+
+	getTransientValue(): UiClientRecordConfig {
+		return this.getCommittedValue();
+	}
+
+	isValidData(v: UiClientRecordConfig): boolean {
+		return true;
+	}
+
+	protected onEditingModeChanged(editingMode: UiFieldEditingMode, oldEditingMode?: UiFieldEditingMode): void {
+		// nothing to do!
+	}
+
+	valuesChanged(v1: UiClientRecordConfig, v2: UiClientRecordConfig): boolean {
+		return false;
+	}
+
+
+	getReadOnlyHtml(value: UiClientRecordConfig, availableWidth: number): string {
+		return `<div class="static-readonly-UiTemplateField">${value != null ? this.templateRenderer.render(value.values) : ""}</div>`;
+	}
+}
+
+TeamAppsUiComponentRegistry.registerFieldClass("UiTemplateField", UiTemplateField);
diff --git a/teamapps-client/ts/modules/formfield/UiTextColorMarkerField.ts b/teamapps-client/ts/modules/formfield/UiTextColorMarkerField.ts
new file mode 100644
index 000000000..2b9a03d85
--- /dev/null
+++ b/teamapps-client/ts/modules/formfield/UiTextColorMarkerField.ts
@@ -0,0 +1,504 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+import {UiFieldEditingMode} from "../../generated/UiFieldEditingMode";
+import {
+	UiTextColorMarkerField_TextSelectedEvent,
+	UiTextColorMarkerFieldCommandHandler,
+	UiTextColorMarkerFieldConfig,
+	UiTextColorMarkerFieldEventSource
+} from "../../generated/UiTextColorMarkerFieldConfig";
+import {UiTextColorMarkerFieldMarkerConfig} from "../../generated/UiTextColorMarkerFieldMarkerConfig";
+import {UiTextColorMarkerFieldMarkerDefinitionConfig} from "../../generated/UiTextColorMarkerFieldMarkerDefinitionConfig";
+import {UiTextColorMarkerFieldValueConfig} from "../../generated/UiTextColorMarkerFieldValueConfig";
+import {escapeHtml, parseHtml} from "../Common";
+import {TeamAppsUiComponentRegistry} from "../TeamAppsUiComponentRegistry";
+import {TeamAppsUiContext} from "../TeamAppsUiContext";
+import {TeamAppsEvent} from "../util/TeamAppsEvent";
+import {UiField} from "./UiField";
+
+export class UiTextColorMarkerField extends UiField<UiTextColorMarkerFieldConfig, UiTextColorMarkerFieldValueConfig> implements UiTextColorMarkerFieldCommandHandler, UiTextColorMarkerFieldEventSource {
+
+	public readonly onTextSelected: TeamAppsEvent<UiTextColorMarkerField_TextSelectedEvent> = new TeamAppsEvent();
+
+	private $main: HTMLElement;
+	private $toolbarWrapper: HTMLElement;
+	private $editor: HTMLDivElement;
+
+	private markerDefinitions: UiTextColorMarkerFieldMarkerDefinitionConfig[];
+	private toolbarEnabled: boolean;
+	private currentSelection: UiTextColorMarkerField_TextSelectedEvent | null = null;
+
+	protected initialize(config: UiTextColorMarkerFieldConfig, context: TeamAppsUiContext): void {
+		this.$main = parseHtml(`<div class="UiTextColorMarkerField default-min-field-width teamapps-input-wrapper field-border field-border-glow field-background">
+			<div class="toolbar-wrapper hidden" tabindex="0"></div>
+			<div class="editor" contenteditable="true" tabindex="0"></div>
+		</div>`);
+		this.$toolbarWrapper = this.$main.querySelector(":scope > .toolbar-wrapper");
+		this.$editor = this.$main.querySelector(":scope > .editor");
+		//this.$editor.contentEditable = 'true';
+		this.toolbarEnabled = config.toolbarEnabled;
+		this.setupEventListeners();
+		this.setMarkerDefinitions(config.markerDefinitions, config.value);
+	}
+
+	private getMarkerDefinitionById(id: number): UiTextColorMarkerFieldMarkerDefinitionConfig | undefined {
+		return this.markerDefinitions.find(definition => definition.id === id);
+	}
+
+	public setMarkerDefinitions(markerDefinitions: UiTextColorMarkerFieldMarkerDefinitionConfig[], newValue: UiTextColorMarkerFieldValueConfig): void {
+		this.markerDefinitions = markerDefinitions;
+		this.setValue(this.createFieldValue(
+			newValue?.text,
+			newValue?.markers
+		));
+	}
+
+	public setMarker(markerDefinitionId: number, start: number, end: number, fireMarkerChangeEvent: boolean = false): void {
+		const newMarkers = this.getCommittedValue().markers.filter(m => m.markerDefinitionId !== markerDefinitionId);
+		newMarkers.push(this.createMarker(markerDefinitionId, start, end));
+
+		this.commitAndSetMarkers(this.normalizeMarkers(newMarkers), fireMarkerChangeEvent);
+	}
+
+	public removeMarker(markerDefinitionId: number): void {
+		const transientMarkers = this.getTransientMarkers();
+		const newMarkers = transientMarkers.filter(m => m.markerDefinitionId !== markerDefinitionId);
+		this.commitAndSetMarkers(newMarkers, true);
+	}
+
+	private commitAndSetMarkers(markers: UiTextColorMarkerFieldMarkerConfig[], fireMarkerChangeEvent: boolean): void {
+		const value = this.createFieldValue(this.getTransientText(), markers);
+		const committedValue = this.getCommittedValue();
+		const changed = this.valuesChanged(value, committedValue);
+		if (changed) {
+			this.setCommittedValue(value);
+			if (fireMarkerChangeEvent || this.textChanged(committedValue?.text, value?.text)) {
+				this.fireValueChangedEvent();
+			}
+		}
+	}
+
+	private fireValueChangedEvent(): void {
+		this.logger.trace("firing value changed event: " + JSON.stringify(this.getCommittedValue()));
+		this.onValueChanged.fire({
+			value: this.convertValueForSendingToServer(this.getCommittedValue())
+		});
+	}
+
+	public valuesChanged(v1: UiTextColorMarkerFieldValueConfig, v2: UiTextColorMarkerFieldValueConfig): boolean {
+		if (!v1 || !v2) {
+			return v1 !== v2;
+		}
+		return this.textChanged(v1.text, v2.text) || this.markersChanged(v1.markers, v2.markers);
+	}
+
+	private textChanged(v1: string, v2: string): boolean {
+		return v1 !== v2;
+	}
+
+	private markersChanged(v1: UiTextColorMarkerFieldMarkerConfig[], v2: UiTextColorMarkerFieldMarkerConfig[]): boolean {
+		return JSON.stringify(v1) !== JSON.stringify(v2);
+	}
+
+	public getTransientValue(): UiTextColorMarkerFieldValueConfig {
+		const text = this.getTransientText()?.replace(/\u00A0/g, ' ');
+		const markers = this.getTransientMarkers();
+
+		return this.createFieldValue(text, markers);
+	}
+
+	private getTransientText(node: Node = this.$editor): string {
+		if (!node.childNodes || node.childNodes.length === 0) {
+			if (node.nodeName.toUpperCase() === 'BR') { return '\n'; }
+			return node.textContent || '';
+		}
+		let text = '';
+		for (let i = 0; i < node.childNodes.length; i++) {
+			text += this.getTransientText(node.childNodes.item(i));
+		}
+		return text;
+	}
+
+	private getTransientMarkers(): UiTextColorMarkerFieldMarkerConfig[] {
+		const markers: UiTextColorMarkerFieldMarkerConfig[] = [];
+
+		// Find all marker spans and extract their data
+		const markerSpans = this.$editor.querySelectorAll('span[data-marker-id]');
+		markerSpans.forEach(span => {
+			const markerId = span.getAttribute('data-marker-id');
+			if (markerId) {
+				const markerDefinitionId = Number(markerId);
+				const start = this.getNodePosition(span.firstChild || span);
+				const end = start + this.getTransientText(span).length;
+				markers.push(this.createMarker(markerDefinitionId, start, end));
+			}
+		});
+		return this.normalizeMarkers(markers);
+	}
+
+	public setValue(value: UiTextColorMarkerFieldValueConfig): void {
+		// Sort markers by their ID + remove empty markers (start == end)
+		value.markers = this.normalizeMarkers(value.markers);
+
+		// Check if this would actually change anything
+		if (this.valuesChanged(this.getCommittedValue(), value)) {
+			this.setCommittedValue(value);
+		}
+	}
+
+	private normalizeMarkers(markers: UiTextColorMarkerFieldMarkerConfig[]): UiTextColorMarkerFieldMarkerConfig[] {
+		return [...markers.filter(m => m.start !== m.end)]
+			.sort((a, b) => a.markerDefinitionId - b.markerDefinitionId);
+	}
+
+	protected displayCommittedValue(): void {
+		const value = this.getCommittedValue();
+		this.$editor.innerHTML = this.renderWithMarkers(value.text ?? '', value.markers ?? []);
+	}
+
+	// Injects marker spans at the correct offsets
+	private renderWithMarkers(text: string, markers: UiTextColorMarkerFieldMarkerConfig[]): string {
+		const operations: Array<{ type: 'open' | 'close', marker: UiTextColorMarkerFieldMarkerConfig }> = [];
+
+		for (const marker of markers) {
+			operations.push({ type: 'open', marker });
+			operations.push({ type: 'close', marker });
+		}
+
+		operations.sort((a, b) => {
+			const posA = a.type === 'open' ? a.marker.start! : a.marker.end!;
+			const posB = b.type === 'open' ? b.marker.start! : b.marker.end!;
+			if (posA !== posB) { return posA - posB; }
+			if (a.type !== b.type) { return a.type === 'open' ? 1 : -1; }
+			if (a.type === 'open') { return a.marker.end! > b.marker.end! ? -1 : 1; }
+			return a.marker.end! > b.marker.end! ? 1 : -1; // else
+		});
+
+		const result: string[] = [];
+		let currentPos = 0;
+
+		for (const op of operations) {
+			const pos = op.type === 'open' ? op.marker.start! : op.marker.end!;
+
+			if (pos > currentPos) {
+				result.push(this.escapeHtml(text.slice(currentPos, pos)));
+			}
+
+			if (op.type === 'open') {
+				const def = this.getMarkerDefinitionById(op.marker.markerDefinitionId);
+				const style = [];
+				if (def?.backgroundColor) {
+					style.push(`--marker-bg-color:${this.escapeHtmlAttr(def.backgroundColor)}`);
+					style.push(`--marker-text-color:${this.getContrastColor(def.backgroundColor)}`);
+				}
+				if (def?.borderColor) {
+					style.push(`--marker-border-color:${this.escapeHtmlAttr(def.borderColor)}`);
+				}
+				result.push(`<span data-marker-id="${op.marker.markerDefinitionId}" class="marker" style="${style.join(';')}" title="${this.escapeHtmlAttr(def?.hint)}">`);
+			} else {
+				result.push('</span>');
+			}
+
+			currentPos = pos;
+		}
+
+		if (currentPos < text.length) {
+			result.push(this.escapeHtml(text.slice(currentPos)));
+		}
+
+		return result.join('');
+	}
+
+	private escapeHtml(text: string): string {
+		return text?.replace(/[&<>]/g, c => {
+			if (c === '<') { return '&lt;'; }
+			if (c === '>') { return '&gt;'; }
+			if (c === '&') { return '&amp;'; }
+			return c;
+		});
+	}
+
+	private escapeHtmlAttr(text: string): string {
+		return escapeHtml(text?.replace(/"'/g, c => {
+			if (c === '"') { return '&quot;'; }
+			if (c === "'") { return '&#39;'; }
+			return c;
+		}));
+	}
+
+	private setupEventListeners(): void {
+		const handleSelection = () => {
+			let noSelection = true;
+			const selection = window.getSelection();
+			if (selection && selection.rangeCount > 0) {
+				const range = selection.getRangeAt(0);
+				if (this.$editor.contains(range.commonAncestorContainer)) {
+					const start = this.getNodePosition(range.startContainer) + range.startOffset;
+					const end = this.getNodePosition(range.endContainer) + range.endOffset;
+					if (start < end) {
+						noSelection = false;
+						this.triggerSelection({ start, end });
+					}
+				}
+			}
+			if (noSelection) {
+				this.triggerDeselection();
+			}
+		};
+		this.$editor.addEventListener('mouseup', handleSelection);
+		this.$editor.addEventListener('keyup', handleSelection); // only needed for selection via keyboard
+		this.$editor.addEventListener('click', (e) => {
+			const target = e.target as HTMLElement;
+			if (target.classList.contains('marker') && this.isMarkerChangeAllowed()) {
+				const markerId = parseInt(target.getAttribute('data-marker-id') || '0', 10);
+				if (markerId) {
+					this.removeMarker(markerId);
+				}
+			}
+		});
+
+		this.$editor.addEventListener('blur', e => {
+			this.commit();
+			// Only hide toolbar if the focus is not moving to the toolbar
+			if (!this.$toolbarWrapper.contains(e.relatedTarget as Node)) {
+				this.triggerDeselection();
+			}
+		});
+	}
+
+	public setToolbarEnabled(enabled: boolean): void {
+		this.toolbarEnabled = enabled;
+		if (!enabled) {
+			this.hideToolbar();
+		}
+	}
+
+	private triggerSelection(selection: UiTextColorMarkerField_TextSelectedEvent): void {
+		this.currentSelection = selection;
+		if (this.isMarkerChangeAllowed()) {
+			if (this.toolbarEnabled) {
+				this.showToolbar();
+			}
+			this.onTextSelected.fire(this.currentSelection);
+		}
+	}
+
+	private triggerDeselection(forceCursorReset: boolean = false): void {
+		if (this.currentSelection) {
+			if (forceCursorReset) {
+				window.getSelection()?.removeAllRanges(); //  preventing missplaced cursor after setting marker via toolbar for Safari
+			}
+			this.currentSelection = null;
+			this.onTextSelected.fire({ start: 0, end: 0 }); // inform about selection removal
+		}
+		this.hideToolbar();
+	}
+
+	private showToolbar(): void {
+		this.updateToolbarContent();
+		this.$toolbarWrapper.classList.remove('hidden');
+	}
+
+	private hideToolbar(): void {
+		this.$toolbarWrapper.classList.add('hidden');
+	}
+
+	private updateToolbarContent(): void {
+		this.$toolbarWrapper.innerHTML = '';
+
+		this.markerDefinitions.forEach(def => {
+			const button = document.createElement('button');
+			button.className = 'toolbar-button';
+			button.innerHTML = this.escapeHtml(def.hint ?? '').replace(/\n/g, '<br>');
+
+			// Style button with marker colors
+			if (def.backgroundColor) {
+				button.style.backgroundColor = def.backgroundColor;
+				button.style.color = this.getContrastColor(def.backgroundColor);
+			}
+			if (def.borderColor) {
+				button.style.borderColor = def.borderColor;
+			}
+
+			// Check if this marker is already applied
+			if (this.getTransientMarkers().some(m => m.markerDefinitionId === def.id)) {
+				button.classList.add('applied');
+			}
+
+			// Add click handler
+			button.addEventListener('click', () => {
+				if (this.currentSelection) {
+					this.setMarker(def.id, this.currentSelection.start, this.currentSelection.end, true);
+				}
+				this.triggerDeselection(true);
+			});
+
+			this.$toolbarWrapper.appendChild(button);
+		});
+	}
+
+	private getContrastColor(hexColor: string): string {
+		// tslint:disable-next-line:one-variable-per-declaration
+		let r: number, g: number, b: number;
+		if (hexColor.startsWith('rgb(')) {
+			const rgb = hexColor.replace('rgb(', '').replace(')', '').split(',');
+			r = parseInt(rgb[0], 10);
+			g = parseInt(rgb[1], 10);
+			b = parseInt(rgb[2], 10);
+		} else {
+			const hex = hexColor.replace('#', '');
+			r = parseInt(hex.substr(0, 2), 16);
+			g = parseInt(hex.substr(2, 2), 16);
+			b = parseInt(hex.substr(4, 2), 16);
+		}
+		const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+
+		return luminance > 0.5 ? '#000000' : '#FFFFFF';
+	}
+
+	private getNodePosition(node: Node): number {
+		let position = 0;
+		const walker = document.createTreeWalker(
+			this.$editor,
+			// tslint:disable-next-line:no-bitwise
+			NodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT,
+			null
+		);
+
+		let currentNode: Node | null = walker.firstChild();
+		while (currentNode && currentNode !== node) { // stops looping at "node"
+			if (currentNode.nodeType === Node.TEXT_NODE) {
+				position += currentNode.textContent?.length || 0;
+			} else if (currentNode.nodeType === Node.ELEMENT_NODE) {
+				const element = currentNode as HTMLElement;
+				if (element.tagName === 'BR') {
+					position += 1; // Count newlines
+				}
+			}
+			currentNode = walker.nextNode();
+		}
+
+		return position;
+	}
+
+	public getDefaultValue(): UiTextColorMarkerFieldValueConfig {
+		return this.createFieldValue('', []);
+	}
+
+	public getMainInnerDomElement(): HTMLElement {
+		return this.$main;
+	}
+
+	public focus(): void {
+		this.$editor.focus();
+	}
+
+	public isValidData(v: any): boolean {
+		if (v == null || v.markers == null) {
+			return true;
+		}
+		return !v.markers.some((m: any) => m === null
+			|| !this.isMarkerValid(m, v));
+	}
+
+	private isMarkerValid(marker: UiTextColorMarkerFieldMarkerConfig, value: UiTextColorMarkerFieldValueConfig): boolean {
+		if (!this.getMarkerDefinitionById(marker.markerDefinitionId)) {
+			this.logger.warn("No definition found for this marker. Invalid marker: " + marker.markerDefinitionId);
+			return false;
+		}
+		if (this.isMarkerOutOfRange(marker, value.text.length)) {
+			this.logger.warn("Marker out of range. Invalid marker: " + JSON.stringify(marker));
+			return false;
+		}
+		if (value.markers.some(otherMarker => this.isMarkerOverlappedButNotNested(otherMarker, marker))) {
+			this.logger.warn("Marker overlaps with existing marker. Invalid marker: " + JSON.stringify(marker) + "\n Existing markers: " + JSON.stringify(value.markers));
+			return false;
+		}
+		return true;
+	}
+
+	private isMarkerOutOfRange(marker: UiTextColorMarkerFieldMarkerConfig, textLength: number): boolean {
+		return marker.start < 0
+			|| marker.end > textLength
+			|| marker.start > marker.end;
+	}
+
+	private isMarkerOverlappedButNotNested(otherMarker: UiTextColorMarkerFieldMarkerConfig, marker: UiTextColorMarkerFieldMarkerConfig): boolean {
+		if (otherMarker.markerDefinitionId === marker.markerDefinitionId) { return false; } // Skip the same marker
+		// Two markers overlap if one starts before the other ends and ends after the other starts
+		// But we allow them to be nested
+		const hasOverlap = () => marker.start < otherMarker.end && marker.end > otherMarker.start;
+		const isNested = () => (marker.start <= otherMarker.start && marker.end >= otherMarker.end) ||
+			(otherMarker.start <= marker.start && otherMarker.end >= marker.end);
+		return hasOverlap() && !isNested();
+	}
+
+	protected onEditingModeChanged(editingMode: UiFieldEditingMode, oldEditingMode?: UiFieldEditingMode): void {
+		this.getMainElement().classList.remove(...Object.values(UiField.editingModeCssClasses));
+		this.getMainElement().classList.add(UiField.editingModeCssClasses[this.getEditingMode()]);
+		this.getMainInnerDomElement().classList.remove(...Object.values(UiField.editingModeCssClasses));
+		this.getMainInnerDomElement().classList.add(UiField.editingModeCssClasses[this.getEditingMode()]);
+
+		const toolbarTabIndex = this.isMarkerChangeAllowed() ? '0' : '-1';
+		switch (editingMode) {
+			case UiFieldEditingMode.EDITABLE:
+			case UiFieldEditingMode.EDITABLE_IF_FOCUSED:
+				this.$editor.contentEditable = 'true';
+				this.$editor.setAttribute('tabindex', '0');
+				this.$toolbarWrapper.setAttribute('tabindex', toolbarTabIndex);
+				break;
+			case UiFieldEditingMode.DISABLED:
+				this.$editor.contentEditable = 'false';
+				this.$editor.setAttribute('tabindex', '-1');
+				this.$toolbarWrapper.setAttribute('tabindex', toolbarTabIndex);
+				break;
+			case UiFieldEditingMode.READONLY:
+				this.$editor.contentEditable = 'false';
+				this.$editor.setAttribute('tabindex', '-1');
+				this.$toolbarWrapper.setAttribute('tabindex', toolbarTabIndex);
+				break;
+			default:
+				this.logger.error("unknown editing mode! " + editingMode);
+		}
+	}
+
+	private isMarkerChangeAllowed(): boolean {
+		return ![UiFieldEditingMode.DISABLED].includes(this.getEditingMode());
+	}
+
+	private createFieldValue(text: string, markers: UiTextColorMarkerFieldMarkerConfig[]): UiTextColorMarkerFieldValueConfig {
+		return {
+			_type: "UiTextColorMarkerFieldValue",
+			text: text ?? '',
+			markers: [...(markers ?? [])]
+		};
+	}
+
+	private createMarker(markerDefinitionId: number, start: number, end: number): UiTextColorMarkerFieldMarkerConfig {
+		return {
+			_type: "UiTextColorMarkerFieldMarker",
+			markerDefinitionId,
+			start,
+			end
+		};
+	}
+}
+
+TeamAppsUiComponentRegistry.registerComponentClass("UiTextColorMarkerField", UiTextColorMarkerField);
diff --git a/teamapps-client/ts/modules/formfield/UiTextField.ts b/teamapps-client/ts/modules/formfield/UiTextField.ts
index f4a839bc6..42fbc7b1f 100644
--- a/teamapps-client/ts/modules/formfield/UiTextField.ts
+++ b/teamapps-client/ts/modules/formfield/UiTextField.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,83 +17,96 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-import * as $ from "jquery";
 import {UiField} from "./UiField";
 import {UiFieldEditingMode} from "../../generated/UiFieldEditingMode";
-import {UiCompositeFieldConfig} from "../../generated/UiCompositeFieldConfig";
 import {TeamAppsUiContext} from "../TeamAppsUiContext";
-import {escapeHtml} from "../Common";
-import {UiTextFieldConfig, UiTextFieldCommandHandler, UiTextFieldEventSource} from "../../generated/UiTextFieldConfig";
-import {keyCodes} from "trivial-components";
+import {escapeHtml, getAutoCompleteOffValue, parseHtml} from "../Common";
+import {UiTextFieldCommandHandler, UiTextFieldConfig, UiTextFieldEventSource} from "../../generated/UiTextFieldConfig";
+import {keyCodes} from "../trivial-components/TrivialCore";
 import {TeamAppsUiComponentRegistry} from "../TeamAppsUiComponentRegistry";
 import {TeamAppsEvent} from "../util/TeamAppsEvent";
-import {UiTextInputHandlingField_SpecialKeyPressedEvent, UiTextInputHandlingField_TextInputEvent} from "../../generated/UiTextInputHandlingFieldConfig";
+import {
+	UiTextInputHandlingField_SpecialKeyPressedEvent,
+	UiTextInputHandlingField_TextInputEvent
+} from "../../generated/UiTextInputHandlingFieldConfig";
 import {UiSpecialKey} from "../../generated/UiSpecialKey";
-import {EventFactory} from "../../generated/EventFactory";
+import {executeWhenFirstDisplayed} from "../util/ExecuteWhenFirstDisplayed";
 
 export class UiTextField<C extends UiTextFieldConfig = UiTextFieldConfig> extends UiField<C, string> implements UiTextFieldEventSource, UiTextFieldCommandHandler {
 
-	public readonly onTextInput: TeamAppsEvent<UiTextInputHandlingField_TextInputEvent> = new TeamAppsEvent<UiTextInputHandlingField_TextInputEvent>(this, 250);
-	public readonly onSpecialKeyPressed: TeamAppsEvent<UiTextInputHandlingField_SpecialKeyPressedEvent> = new TeamAppsEvent<UiTextInputHandlingField_SpecialKeyPressedEvent>(this, 250);
+	public readonly onTextInput: TeamAppsEvent<UiTextInputHandlingField_TextInputEvent> = new TeamAppsEvent<UiTextInputHandlingField_TextInputEvent>({throttlingMode: "debounce", delay: 250});
+	public readonly onSpecialKeyPressed: TeamAppsEvent<UiTextInputHandlingField_SpecialKeyPressedEvent> = new TeamAppsEvent<UiTextInputHandlingField_SpecialKeyPressedEvent>({throttlingMode: "debounce", delay: 250});
 
-	private $wrapper: JQuery;
-	protected $field: JQuery;
+	private $wrapper: HTMLElement;
+	protected $field: HTMLInputElement;
 	private showClearButton: boolean;
 
 	protected initialize(config: C, context: TeamAppsUiContext) {
-		this.$wrapper = $(`<div class="UiTextField field-border field-border-glow field-background clearable-field-wrapper form-control">
-    <input autocomplete="off" type="text"/>
-    <div class="clear-button tr-remove-button"/>  
+		this.$wrapper = parseHtml(`<div class="UiTextField default-min-field-width field-border field-border-glow field-background clearable-field-wrapper form-control">
+    <input type="text"></input>
+    <div class="clear-button tr-remove-button"></div>  
 </div>`);
-		this.$field = this.$wrapper.find("input");
-		let $clearButton = this.$wrapper.find('.clear-button');
-		$clearButton.click(() => {
-			this.$field.val("");
+		this.$field = this.$wrapper.querySelector(":scope input");
+		if (!config.autofill) {
+			this.$field.autocomplete = getAutoCompleteOffValue();
+		}
+		let $clearButton = this.$wrapper.querySelector<HTMLElement>(':scope .clear-button');
+		$clearButton.addEventListener('click',() => {
+			this.$field.value = "";
 			this.fireTextInput();
 			this.commit();
 			this.updateClearButton();
 		});
 
-		this.setEmptyText(config.emptyText);
+		this.setPlaceholderText(config.placeholderText);
 		this.setMaxCharacters(config.maxCharacters);
 		this.setShowClearButton(config.showClearButton);
 
-		this.$field.on("focus", () => {
+		this.$field.addEventListener("focus", () => {
 			if (this.getEditingMode() !== UiFieldEditingMode.READONLY) {
 				this.$field.select();
 			}
 		});
-		this.$field.on("blur", () => {
+		this.$field.addEventListener("change", () => {
 			if (this.getEditingMode() !== UiFieldEditingMode.READONLY) {
 				this.commit();
 				this.updateClearButton();
 			}
 		});
-		this.$field.on("input", () => {
+		this.$field.addEventListener("input", () => {
 			this.fireTextInput();
 			this.updateClearButton();
 		});
-		this.$field.keydown((e) => {
+		this.$field.addEventListener("keydown", (e) => {
 			if (e.keyCode === keyCodes.escape) {
 				this.displayCommittedValue(); // back to committedValue
 				this.fireTextInput();
 				this.$field.select();
-				this.onSpecialKeyPressed.fire(EventFactory.createUiTextInputHandlingField_SpecialKeyPressedEvent(this.getId(), UiSpecialKey.ESCAPE));
+				this.onSpecialKeyPressed.fire({
+					key: UiSpecialKey.ESCAPE
+				});
 			} else if (e.keyCode === keyCodes.enter) {
-				this.commit();
-				this.onSpecialKeyPressed.fire(EventFactory.createUiTextInputHandlingField_SpecialKeyPressedEvent(this.getId(), UiSpecialKey.ENTER));
+				if (this.getEditingMode() !== UiFieldEditingMode.READONLY) {
+					// this needs to be done here, additionally, since otherwise the onSpecialKeyPressed gets fired before the commit...
+					this.commit();
+				}
+				this.onSpecialKeyPressed.fire({
+					key: UiSpecialKey.ENTER
+				});
 			}
 		});
 
-		this.$wrapper.click((e) => {
-			if (e.target !== this.$field[0]) {
+		this.$wrapper.addEventListener('click',(e) => {
+			if (e.target !== this.$field) {
 				this.focus();
 			}
 		});
 	}
 
 	private fireTextInput() {
-		this.onTextInput.fire(EventFactory.createUiTextInputHandlingField_TextInputEvent(this.getId(), this.$field.val().toString()));
+		this.onTextInput.fire({
+			enteredString: this.$field.value
+		});
 	}
 
 	isValidData(v: string): boolean {
@@ -101,7 +114,11 @@ export class UiTextField<C extends UiTextFieldConfig = UiTextFieldConfig> extend
 	}
 
 	setMaxCharacters(maxCharacters: number): void {
-		this.$field.attr('maxlength', maxCharacters || "");
+		if (maxCharacters) {
+			this.$field.maxLength = maxCharacters;
+		} else {
+			this.$field.removeAttribute("maxLength");
+		}
 	}
 
 	setShowClearButton(showClearButton: boolean): void {
@@ -110,37 +127,33 @@ export class UiTextField<C extends UiTextFieldConfig = UiTextFieldConfig> extend
 	}
 
 	private updateClearButton() {
-		this.$wrapper.toggleClass("clearable", !!(this.showClearButton && this.$field.val()));
+		this.$wrapper.classList.toggle("clearable", !!(this.showClearButton && this.$field.value));
 	}
 
-	setEmptyText(emptyText: string): void {
-		this.$field.attr("placeholder", emptyText || "");
+	setPlaceholderText(placeholderText: string): void {
+		this.$field.placeholder = placeholderText || '';
 	}
 
-	public getMainInnerDomElement(): JQuery {
+	public getMainInnerDomElement(): HTMLElement {
 		return this.$wrapper;
 	}
-
-	public getFocusableElement(): JQuery {
-		return this.$field;
-	}
-
 	protected displayCommittedValue(): void {
 		let value = this.getCommittedValue();
-		this.$field.val(value || "");
+		this.$field.value = value || "";
 		this.updateClearButton();
 	}
 
 	public getTransientValue(): string {
-		return this.$field.val().toString();
+		return this.$field.value;
 	}
 
+	@executeWhenFirstDisplayed()
 	focus(): void {
 		this.$field.focus();
 	}
 
 	protected onEditingModeChanged(editingMode: UiFieldEditingMode): void {
-		UiField.defaultOnEditingModeChangedImpl(this);
+		UiField.defaultOnEditingModeChangedImpl(this, () => this.$field);
 	}
 
 	public getReadOnlyHtml(value: string, availableWidth: number): string {
diff --git a/teamapps-client/ts/modules/formfield/datetime/AbstractUiDateField.ts b/teamapps-client/ts/modules/formfield/datetime/AbstractUiDateField.ts
deleted file mode 100644
index a93776f17..000000000
--- a/teamapps-client/ts/modules/formfield/datetime/AbstractUiDateField.ts
+++ /dev/null
@@ -1,223 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-import * as $ from "jquery";
-import * as Mustache from "mustache";
-import {keyCodes, ResultCallback, TrivialComboBox, TrivialDateSuggestionEngine} from "trivial-components";
-import * as moment from "moment-timezone";
-import {UiFieldEditingMode} from "../../../generated/UiFieldEditingMode";
-import {UiField} from "../UiField";
-import {TeamAppsUiContext} from "../../TeamAppsUiContext";
-import {UiTextInputHandlingField_SpecialKeyPressedEvent, UiTextInputHandlingField_TextInputEvent} from "../../../generated/UiTextInputHandlingFieldConfig";
-import {TeamAppsEvent} from "../../util/TeamAppsEvent";
-import {UiSpecialKey} from "../../../generated/UiSpecialKey";
-import {AbstractUiDateFieldConfig, AbstractUiDateFieldCommandHandler, AbstractUiDateFieldEventSource} from "../../../generated/AbstractUiDateFieldConfig";
-import Moment = moment.Moment;
-import {convertJavaDateTimeFormatToMomentDateTimeFormat} from "../../Common";
-import {EventFactory} from "../../../generated/EventFactory";
-
-interface DateSuggestion {
-	moment: Moment;
-	ymdOrder: string;
-}
-
-export interface DateComboBoxEntry {
-	day: number,
-	weekDay: string,
-	month: number,
-	year: number,
-	displayString: string
-}
-
-export abstract class AbstractUiDateField<C extends AbstractUiDateFieldConfig, V> extends UiField<C, V> implements AbstractUiDateFieldEventSource, AbstractUiDateFieldCommandHandler {
-
-	public readonly onTextInput: TeamAppsEvent<UiTextInputHandlingField_TextInputEvent> = new TeamAppsEvent<UiTextInputHandlingField_TextInputEvent>(this, 250);
-	public readonly onSpecialKeyPressed: TeamAppsEvent<UiTextInputHandlingField_SpecialKeyPressedEvent> = new TeamAppsEvent<UiTextInputHandlingField_SpecialKeyPressedEvent>(this, 250);
-
-	public static comboBoxTemplate = `<div class="tr-template-icon-single-line">
-    <svg viewBox="0 0 540 540" width="22" height="22" class="calendar-icon">
-        <defs>
-            <linearGradient id="Gradient1" x1="0" x2="0" y1="0" y2="1">
-                <stop class="calendar-symbol-ring-gradient-stop1" offset="0%"/>
-                <stop class="calendar-symbol-ring-gradient-stop2" offset="50%"/>
-                <stop class="calendar-symbol-ring-gradient-stop3" offset="100%"/>
-            </linearGradient>
-        </defs>        
-        <g id="layer1">
-            <rect class="calendar-symbol-page-background" x="90" y="90" width="360" height="400" ry="3.8"></rect>
-            <rect class="calendar-symbol-color" x="90" y="90" width="360" height="100" ry="3.5"></rect>
-            <rect class="calendar-symbol-page" x="90" y="90" width="360" height="395" ry="3.8"></rect>
-            <rect class="calendar-symbol-ring" fill="url(#Gradient2)" x="140" y="30" width="40" height="120" ry="30.8"></rect>
-            <rect class="calendar-symbol-ring" fill="url(#Gradient2)" x="250" y="30" width="40" height="120" ry="30.8"></rect>
-            <rect class="calendar-symbol-ring" fill="url(#Gradient2)" x="360" y="30" width="40" height="120" ry="30.8"></rect>
-            <text class="calendar-symbol-date" x="270" y="415" text-anchor="middle">{{weekDay}}</text>
-        </g>
-    </svg>
-    <div class="content-wrapper tr-editor-area">{{displayString}}</div>
-</div>`;
-
-	private $originalInput: JQuery;
-	protected trivialComboBox: TrivialComboBox<DateComboBoxEntry>;
-	private dateSuggestionEngine: TrivialDateSuggestionEngine;
-
-	private favorPastDates: boolean;
-	private dateFormat: string;
-
-	protected initialize(config: AbstractUiDateFieldConfig, context: TeamAppsUiContext) {
-		this.$originalInput = $('<input type="text" autocomplete="off">');
-
-		this.favorPastDates = config.favorPastDates;
-		this.dateFormat = convertJavaDateTimeFormatToMomentDateTimeFormat(config.dateFormat);
-
-		this.updateDateSuggestionEngine();
-		this.trivialComboBox = new TrivialComboBox<DateComboBoxEntry>(this.$originalInput, {
-			queryFunction: (searchString: string, resultCallback: ResultCallback<DateComboBoxEntry>) => {
-				this.onTextInput.fire(EventFactory.createUiTextInputHandlingField_TextInputEvent(this.getId(), searchString));
-				let comboBoxEntries = this.dateSuggestionEngine.generateSuggestions(searchString, moment() as any)
-					.map(s => AbstractUiDateField.createDateComboBoxEntryFromMoment(s.moment as any, this.getDateFormat()));
-				resultCallback(comboBoxEntries);
-			},
-			showTrigger: config.showDropDownButton,
-			textHighlightingEntryLimit: -1, // no highlighting!
-			autoCompleteFunction: function (editorText, entry) {
-				if (editorText && entry.displayString.toLowerCase().indexOf(editorText.toLowerCase()) === 0) {
-					return entry.displayString;
-				} else {
-					return null;
-				}
-			},
-			entryToEditorTextFunction: entry => {
-				return entry.displayString;
-			},
-			entryRenderingFunction: (entry) => {
-				return entry ? Mustache.render(AbstractUiDateField.comboBoxTemplate, entry) : "";
-			},
-			editingMode: config.editingMode === UiFieldEditingMode.READONLY ? 'readonly' : config.editingMode === UiFieldEditingMode.DISABLED ? 'disabled' : 'editable',
-			showClearButton: config.showClearButton
-		});
-		$(this.trivialComboBox.getMainDomElement()).addClass("AbstractUiDateField");
-		this.trivialComboBox.onSelectedEntryChanged.addListener(() => this.commit());
-		$(this.trivialComboBox.getEditor()).on("keydown", (e) => {
-			if (e.keyCode === keyCodes.escape) {
-				this.onSpecialKeyPressed.fire(EventFactory.createUiTextInputHandlingField_SpecialKeyPressedEvent(this.getId(), UiSpecialKey.ESCAPE));
-			} else if (e.keyCode === keyCodes.enter) {
-				this.onSpecialKeyPressed.fire(EventFactory.createUiTextInputHandlingField_SpecialKeyPressedEvent(this.getId(), UiSpecialKey.ENTER));
-			}
-		});
-
-		$(this.trivialComboBox.getMainDomElement()).addClass("field-border field-border-glow field-background");
-		$(this.trivialComboBox.getMainDomElement()).find(".tr-editor").addClass("field-background");
-		$(this.trivialComboBox.getMainDomElement()).find(".tr-trigger").addClass("field-border");
-		this.trivialComboBox.onFocus.addListener(() => this.getMainDomElement().addClass("focus"));
-		this.trivialComboBox.onBlur.addListener(() => this.getMainDomElement().removeClass("focus"));
-	}
-
-	private updateDateSuggestionEngine() {
-		this.dateSuggestionEngine = new TrivialDateSuggestionEngine({
-			preferredDateFormat: this.getDateFormat(),
-			favorPastDates: this.favorPastDates
-		});
-	}
-
-	public getMainInnerDomElement(): JQuery {
-		return $(this.trivialComboBox.getMainDomElement());
-	}
-
-	public getFocusableElement(): JQuery {
-		return $(this.trivialComboBox.getMainDomElement()).find(".tr-editor");
-	}
-
-	protected getDateFormat() {
-		return this.dateFormat || this._context.config.dateFormat;
-	}
-
-	public static createDateComboBoxEntryFromMoment(m: Moment, dateFormat: string): DateComboBoxEntry {
-		return {
-			day: m.date(),
-			weekDay: m.format('dd'), // see UiRootPanel.setConfig()...
-			month: m.month() + 1,
-			year: m.year(),
-			displayString: m.format(dateFormat)
-		};
-	}
-
-	public static createDateComboBoxEntryFromLocalValues(year: number, month: number, day: number, dateFormat: string): DateComboBoxEntry {
-		let m = moment({year: year, month: month - 1, day: day});
-		return {
-			day: day,
-			weekDay: m.format('dd'), // see UiRootPanel.setConfig()...
-			month: month,
-			year: year,
-			displayString: m.format(dateFormat)
-		};
-	}
-
-	focus(): void {
-		this.trivialComboBox.focus();
-	}
-
-	public hasFocus(): boolean {
-		return this.getMainInnerDomElement().is('.focus');
-	}
-
-	protected onEditingModeChanged(editingMode: UiFieldEditingMode): void {
-		this.getMainDomElement()
-			.removeClass(Object.values(UiField.editingModeCssClasses).join(" "))
-			.addClass(UiField.editingModeCssClasses[editingMode]);
-		if (editingMode === UiFieldEditingMode.READONLY) {
-			this.trivialComboBox.setEditingMode("readonly");
-		} else if (editingMode === UiFieldEditingMode.DISABLED) {
-			this.trivialComboBox.setEditingMode("disabled");
-		} else {
-			this.trivialComboBox.setEditingMode("editable");
-		}
-	}
-
-	doDestroy(): void {
-		this.trivialComboBox.destroy();
-		this.$originalInput.detach();
-	}
-
-	getDefaultValue(): V {
-		return null;
-	}
-
-	setDateFormat(dateFormat: string): void {
-		this.dateFormat = convertJavaDateTimeFormatToMomentDateTimeFormat(dateFormat);
-		this.updateDateSuggestionEngine();
-		let selectedEntry = this.trivialComboBox.getSelectedEntry();
-		selectedEntry.displayString = moment({year: selectedEntry.year, month: selectedEntry.month - 1, day: selectedEntry.day}).format(this.getDateFormat());
-		this.trivialComboBox.setSelectedEntry(selectedEntry, true);
-		this.trivialComboBox.updateEntries([]);
-	}
-
-	setFavorPastDates(favorPastDates: boolean): void {
-		this.favorPastDates = favorPastDates;
-		this.updateDateSuggestionEngine();
-	}
-
-	setShowDropDownButton(showDropDownButton: boolean): void {
-		this.trivialComboBox.setShowTrigger(showDropDownButton);
-	}
-
-	setShowClearButton(showClearButton: boolean): void {
-		this.trivialComboBox.setShowClearButton(showClearButton);
-	}
-
-}
diff --git a/teamapps-client/ts/modules/formfield/datetime/AbstractUiDateTimeField.ts b/teamapps-client/ts/modules/formfield/datetime/AbstractUiDateTimeField.ts
index 8dafc33cb..0fd75c71d 100644
--- a/teamapps-client/ts/modules/formfield/datetime/AbstractUiDateTimeField.ts
+++ b/teamapps-client/ts/modules/formfield/datetime/AbstractUiDateTimeField.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,94 +17,117 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-import * as $ from "jquery";
-import {TrivialDateTimeField} from "trivial-components";
-import * as moment from "moment-timezone";
+import {TrivialDateTimeField} from "../../trivial-components/TrivialDateTimeField";
 import {UiFieldEditingMode} from "../../../generated/UiFieldEditingMode";
 import {UiField} from "../UiField";
 import {TeamAppsUiContext} from "../../TeamAppsUiContext";
-import {TeamAppsUiComponentRegistry} from "../../TeamAppsUiComponentRegistry";
-import {AbstractUiDateTimeFieldConfig, AbstractUiDateTimeFieldCommandHandler, AbstractUiDateTimeFieldEventSource} from "../../../generated/AbstractUiDateTimeFieldConfig";
-import {convertJavaDateTimeFormatToMomentDateTimeFormat} from "../../Common";
+import {
+	AbstractUiDateTimeFieldCommandHandler,
+	AbstractUiDateTimeFieldConfig,
+	AbstractUiDateTimeFieldEventSource
+} from "../../../generated/AbstractUiDateTimeFieldConfig";
+import {UiDateTimeFormatDescriptorConfig} from "../../../generated/UiDateTimeFormatDescriptorConfig";
+import {DateTime} from "luxon";
+import {DateSuggestionEngine} from "./DateSuggestionEngine";
+import {createDateRenderer, createTimeRenderer} from "./datetime-rendering";
+import {executeWhenFirstDisplayed} from "../../util/ExecuteWhenFirstDisplayed";
 
 export abstract class AbstractUiDateTimeField<C extends AbstractUiDateTimeFieldConfig, V> extends UiField<C, V> implements AbstractUiDateTimeFieldEventSource, AbstractUiDateTimeFieldCommandHandler {
 
-	private $originalInput: JQuery;
 	protected trivialDateTimeField: TrivialDateTimeField;
-	private dateFormat: string;
-	private timeFormat: string;
+	protected dateSuggestionEngine: DateSuggestionEngine;
+	protected dateRenderer: (time: DateTime) => string;
+	protected timeRenderer: (time: DateTime) => string;
 
 	protected initialize(config: AbstractUiDateTimeFieldConfig, context: TeamAppsUiContext) {
-		this.$originalInput = $('<input type="text" autocomplete="off">');
-
-		this.dateFormat = convertJavaDateTimeFormatToMomentDateTimeFormat(config.dateFormat);
-		this.timeFormat = convertJavaDateTimeFormatToMomentDateTimeFormat(config.timeFormat);
-
-		this.trivialDateTimeField = new TrivialDateTimeField(this.$originalInput, {
-			dateFormat: this.getDateFormat(),
-			timeFormat: this.getTimeFormat(),
+		this.updateDateSuggestionEngine();
+		this.dateRenderer = this.createDateRenderer();
+		this.timeRenderer = this.createTimeRenderer();
+
+		this.trivialDateTimeField = new TrivialDateTimeField({
+			timeZone: this.getTimeZone(),
+			locale: config.locale,
+			dateFormat: config.dateFormat,
+			timeFormat: config.timeFormat,
 			showTrigger: config.showDropDownButton,
 			editingMode: config.editingMode === UiFieldEditingMode.READONLY ? 'readonly' : config.editingMode === UiFieldEditingMode.DISABLED ? 'disabled' : 'editable',
 			favorPastDates: config.favorPastDates
 		});
-		$(this.trivialDateTimeField.getMainDomElement()).addClass("AbstractUiDateTimeField");
+		this.trivialDateTimeField.getMainDomElement().classList.add("AbstractUiDateTimeField");
 		this.trivialDateTimeField.onChange.addListener(() => this.commit());
 
-		$(this.trivialDateTimeField.getMainDomElement()).addClass("field-border field-border-glow field-background");
-		$(this.trivialDateTimeField.getMainDomElement()).find(".tr-date-editor, .tr-time-editor").addClass("field-background");
-		$(this.trivialDateTimeField.getMainDomElement()).find(".tr-trigger").addClass("field-border");
-		$(this.trivialDateTimeField.getMainDomElement()).find(".tr-date-editor, .tr-time-editor").on("focus blur", e => this.getMainDomElement().toggleClass("focus", e.type === "focus"));
+		this.trivialDateTimeField.getMainDomElement().classList.add("field-border", "field-border-glow", "field-background");
+		this.trivialDateTimeField.getMainDomElement().querySelectorAll<HTMLElement>(":scope .tr-date-editor, :scope .tr-time-editor").forEach(element => element.classList.add("field-background"));
+		this.trivialDateTimeField.getMainDomElement().querySelector<HTMLElement>(":scope .tr-trigger").classList.add("field-border");
 	}
 
-	protected getDateFormat() {
-		return this.dateFormat || this._context.config.dateFormat;
+	protected abstract getTimeZone(): string;
+
+	protected createDateRenderer(): (time: DateTime) => string {
+		return createDateRenderer(this._config.locale, this._config.dateFormat, true);
 	}
 
-	protected getTimeFormat() {
-		return this.timeFormat || this._context.config.timeFormat;
+	protected createTimeRenderer(): (time: DateTime) => string {
+		return createTimeRenderer(this._config.locale, this._config.timeFormat, true);
 	}
 
-	public getMainInnerDomElement(): JQuery {
-		return $(this.trivialDateTimeField.getMainDomElement());
+	protected dateTimeToDateString(dateTime: DateTime): string {
+		return dateTime.setLocale(this._config.locale).toLocaleString(this._config.dateFormat);
 	}
 
-	public getFocusableElement(): JQuery {
-		return $(this.trivialDateTimeField.getMainDomElement()).find('.tr-editor');
+	protected dateTimeToTimeString(dateTime: DateTime): string {
+		return dateTime.setLocale(this._config.locale).toLocaleString(this._config.timeFormat);
 	}
 
-	focus(): void {
-		this.trivialDateTimeField.focus();
+	private updateDateSuggestionEngine() {
+		this.dateSuggestionEngine = new DateSuggestionEngine({
+			locale: this._config.locale,
+			favorPastDates: this._config.favorPastDates
+		});
+	}
+
+	public getMainInnerDomElement(): HTMLElement {
+		return this.trivialDateTimeField.getMainDomElement() as HTMLElement;
 	}
 
-	public hasFocus(): boolean {
-		return this.getMainInnerDomElement().is('.focus');
+	protected initFocusHandling() {
+		this.trivialDateTimeField.onFocus.addListener(() => this.onFocusGained.fire({}));
+		this.trivialDateTimeField.onBlur.addListener(() => this.onBlur.fire({}));
+	}
+
+	@executeWhenFirstDisplayed()
+	focus(): void {
+		this.trivialDateTimeField.focus();
 	}
 
 	protected onEditingModeChanged(editingMode: UiFieldEditingMode): void {
-		this.getMainDomElement()
-			.removeClass(Object.values(UiField.editingModeCssClasses).join(" "))
-			.addClass(UiField.editingModeCssClasses[editingMode]);
+		this.getMainElement().classList.remove(...Object.values(UiField.editingModeCssClasses));
+		this.getMainElement().classList.add(UiField.editingModeCssClasses[editingMode]);
 		if (editingMode === UiFieldEditingMode.READONLY) {
-			// this.trivialDateTimeField.setEditingMode("readonly");
+			this.trivialDateTimeField.setEditingMode("readonly");
 		} else if (editingMode === UiFieldEditingMode.DISABLED) {
-			// this.trivialDateTimeField.setEditingMode("disabled");
+			this.trivialDateTimeField.setEditingMode("disabled");
 		} else {
-			// this.trivialDateTimeField.setEditingMode("editable");
+			this.trivialDateTimeField.setEditingMode("editable");
 		}
 	}
 
-	doDestroy(): void {
+	destroy(): void {
+		super.destroy();
 		this.trivialDateTimeField.destroy();
-		this.$originalInput.detach();
 	}
 
 	getDefaultValue(): V {
 		return null;
 	}
 
-	setDateFormat(dateFormat: string): void {
-		// TODO
-		this.logger.warn("TODO: implement AbstractUiDateTimeField.setDateFormat()")
+	setLocaleAndFormats(locale: string, dateFormat: UiDateTimeFormatDescriptorConfig, timeFormat: UiDateTimeFormatDescriptorConfig): void {
+		this._config.locale = locale;
+		this._config.dateFormat = dateFormat;
+		this._config.timeFormat = timeFormat;
+		this.updateDateSuggestionEngine();
+		this.dateRenderer = this.createDateRenderer();
+		this.trivialDateTimeField.setLocaleAndFormats(locale, dateFormat, timeFormat);
 	}
 
 	setFavorPastDates(favorPastDates: boolean): void {
@@ -117,9 +140,4 @@ export abstract class AbstractUiDateTimeField<C extends AbstractUiDateTimeFieldC
 		this.logger.warn("TODO: implement AbstractUiDateTimeField.setShowDropDownButton()")
 	}
 
-	setTimeFormat(timeFormat: string): void {
-		// TODO
-		this.logger.warn("TODO: implement AbstractUiDateTimeField.setTimeFormat()")
-	}
-
 }
diff --git a/teamapps-client/ts/modules/formfield/datetime/AbstractUiTimeField.ts b/teamapps-client/ts/modules/formfield/datetime/AbstractUiTimeField.ts
index 7c3da1a37..f4e227716 100644
--- a/teamapps-client/ts/modules/formfield/datetime/AbstractUiTimeField.ts
+++ b/teamapps-client/ts/modules/formfield/datetime/AbstractUiTimeField.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,150 +17,96 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-import * as Mustache from "mustache";
-import * as $ from "jquery";
-import * as moment from "moment-timezone";
-
 import {UiFieldEditingMode} from "../../../generated/UiFieldEditingMode";
-import {keyCodes, TrivialComboBox, TrivialTimeSuggestionEngine} from "trivial-components";
+import {TrivialComboBox} from "../../trivial-components/TrivialComboBox";
+import {TimeSuggestionEngine} from "./TimeSuggestionEngine";
 import {UiField} from "./../UiField";
 import {TeamAppsUiContext} from "../../TeamAppsUiContext";
-import {UiTextInputHandlingField_SpecialKeyPressedEvent, UiTextInputHandlingField_TextInputEvent} from "../../../generated/UiTextInputHandlingFieldConfig";
+import {
+	UiTextInputHandlingField_SpecialKeyPressedEvent,
+	UiTextInputHandlingField_TextInputEvent
+} from "../../../generated/UiTextInputHandlingFieldConfig";
 import {TeamAppsEvent} from "../../util/TeamAppsEvent";
 import {UiSpecialKey} from "../../../generated/UiSpecialKey";
-import {AbstractUiTimeFieldConfig, AbstractUiTimeFieldCommandHandler, AbstractUiTimeFieldEventSource} from "../../../generated/AbstractUiTimeFieldConfig";
-import {convertJavaDateTimeFormatToMomentDateTimeFormat} from "../../Common";
-import {EventFactory} from "../../../generated/EventFactory";
+import {
+	AbstractUiTimeFieldCommandHandler,
+	AbstractUiTimeFieldConfig,
+	AbstractUiTimeFieldEventSource
+} from "../../../generated/AbstractUiTimeFieldConfig";
+import {parseHtml} from "../../Common";
+import {UiDateTimeFormatDescriptorConfig} from "../../../generated/UiDateTimeFormatDescriptorConfig";
+import {LocalDateTime} from "../../datetime/LocalDateTime";
+import {TreeBoxDropdown} from "../../trivial-components/dropdown/TreeBoxDropdown";
+import {TrivialTreeBox} from "../../trivial-components/TrivialTreeBox";
+import {executeWhenFirstDisplayed} from "../../util/ExecuteWhenFirstDisplayed";
 
-export abstract class AbstractUiTimeField<C extends AbstractUiTimeFieldConfig, V> extends UiField<C, V> implements AbstractUiTimeFieldEventSource, AbstractUiTimeFieldCommandHandler {
 
-	public readonly onTextInput: TeamAppsEvent<UiTextInputHandlingField_TextInputEvent> = new TeamAppsEvent<UiTextInputHandlingField_TextInputEvent>(this, 250);
-	public readonly onSpecialKeyPressed: TeamAppsEvent<UiTextInputHandlingField_SpecialKeyPressedEvent> = new TeamAppsEvent<UiTextInputHandlingField_SpecialKeyPressedEvent>(this, 250);
+export abstract class AbstractUiTimeField<C extends AbstractUiTimeFieldConfig, V> extends UiField<C, V> implements AbstractUiTimeFieldEventSource, AbstractUiTimeFieldCommandHandler {
 
-	public static comboBoxTemplate = '<div class="tr-template-icon-single-line">' +
-		'<svg class="clock-icon night-{{isNight}}" viewBox="0 0 110 110" width="22" height="22"> ' +
-		'<circle class="clockcircle" cx="55" cy="55" r="45"/>' +
-		'<g class="hands">' +
-		' <line class="hourhand" x1="55" y1="55" x2="55" y2="35" transform="rotate({{hourAngle}},55,55)"/> ' +
-		' <line class="minutehand" x1="55" y1="55" x2="55" y2="22" transform="rotate({{minuteAngle}},55,55)"/>' +
-		'</g> ' +
-		'</svg>' +
-		'  <div class="content-wrapper tr-editor-area">{{displayString}}</div>' +
-		'</div>';
+	public readonly onTextInput: TeamAppsEvent<UiTextInputHandlingField_TextInputEvent> = new TeamAppsEvent<UiTextInputHandlingField_TextInputEvent>({throttlingMode: "debounce", delay: 250});
+	public readonly onSpecialKeyPressed: TeamAppsEvent<UiTextInputHandlingField_SpecialKeyPressedEvent> = new TeamAppsEvent<UiTextInputHandlingField_SpecialKeyPressedEvent>({throttlingMode: "debounce", delay: 250});
 
-	private $originalInput: JQuery;
-	protected trivialComboBox: TrivialComboBox<any>;
-	private timeFormat: string;
+	protected trivialComboBox: TrivialComboBox<LocalDateTime>;
+	protected timeRenderer: (time: LocalDateTime) => string;
 
 	protected initialize(config: AbstractUiTimeFieldConfig, context: TeamAppsUiContext) {
-		this.$originalInput = $('<input type="text" autocomplete="off">');
+		let timeSuggestionEngine = new TimeSuggestionEngine();
+		this.timeRenderer = this.createTimeRenderer();
 
-		this.timeFormat = convertJavaDateTimeFormatToMomentDateTimeFormat(config.timeFormat);
-
-		let timeSuggestionEngine = new TrivialTimeSuggestionEngine();
-		this.trivialComboBox = new TrivialComboBox<any>(this.$originalInput, {
-			queryFunction: (searchString: string, resultCallback: Function) => {
-				this.onTextInput.fire(EventFactory.createUiTextInputHandlingField_TextInputEvent(this.getId(), searchString));
-
-				let comboBoxEntries = timeSuggestionEngine.generateSuggestions(searchString)
-					.map(s => AbstractUiTimeField.createTimeComboBoxEntry(s.hour, s.minute, this.getTimeFormat()));
-				resultCallback(comboBoxEntries);
-			},
+		this.trivialComboBox = new TrivialComboBox<LocalDateTime>({
 			showTrigger: config.showDropDownButton,
+			entryToEditorTextFunction: entry => this.localDateTimeToString(entry),
+			editingMode: config.editingMode === UiFieldEditingMode.READONLY ? 'readonly' : config.editingMode === UiFieldEditingMode.DISABLED ? 'disabled' : 'editable',
+			selectedEntryRenderingFunction: localDateTime => this.timeRenderer(localDateTime),
+		}, new TreeBoxDropdown({
+			queryFunction: (searchString: string) => timeSuggestionEngine.generateSuggestions(searchString),
 			textHighlightingEntryLimit: -1, // no highlighting!
-			autoCompleteFunction: function (editorText, entry) {
-				if (editorText && entry.displayString.toLowerCase().indexOf(editorText.toLowerCase()) === 0) {
-					return entry.displayString;
-				} else {
-					return null;
-				}
-			},
-			entryToEditorTextFunction: entry => entry.displayString,
-			entryRenderingFunction: (entry) => Mustache.render(AbstractUiTimeField.comboBoxTemplate, entry || {hourAngle: 0, minuteAngle: 0}),
-			editingMode: config.editingMode === UiFieldEditingMode.READONLY ? 'readonly' : config.editingMode === UiFieldEditingMode.DISABLED ? 'disabled' : 'editable'
-		});
-		$(this.trivialComboBox.getMainDomElement()).addClass("AbstractUiTimeField");
+			preselectionMatcher: (query, entry) => this.localDateTimeToString(entry).toLowerCase().indexOf(query.toLowerCase()) >= 0
+		}, new TrivialTreeBox<LocalDateTime>({
+			entryRenderingFunction: localDateTime => this.timeRenderer(localDateTime),
+		})));
+
+		this.trivialComboBox.getEditor().addEventListener("input", e => this.onTextInput.fire({enteredString: (e.target as HTMLInputElement).value}));
+		this.trivialComboBox.getMainDomElement().classList.add("AbstractUiTimeField", "default-min-field-width");
 		this.trivialComboBox.onSelectedEntryChanged.addListener(() => this.commit());
-		$(this.trivialComboBox.getEditor()).on("keydown", (e) => {
-			if (e.keyCode === keyCodes.escape) {
-				this.onSpecialKeyPressed.fire(EventFactory.createUiTextInputHandlingField_SpecialKeyPressedEvent(this.getId(), UiSpecialKey.ESCAPE));
-			} else if (e.keyCode === keyCodes.enter) {
-				this.onSpecialKeyPressed.fire(EventFactory.createUiTextInputHandlingField_SpecialKeyPressedEvent(this.getId(), UiSpecialKey.ENTER));
+		this.trivialComboBox.getEditor().addEventListener("keydown", (e: KeyboardEvent) => {
+			if (e.key === "Escape") {
+				this.onSpecialKeyPressed.fire({
+					key: UiSpecialKey.ESCAPE
+				});
+			} else if (e.key === "Enter") {
+				this.onSpecialKeyPressed.fire({
+					key: UiSpecialKey.ENTER
+				});
 			}
 		});
 
-		$(this.trivialComboBox.getMainDomElement()).addClass("field-border field-border-glow field-background");
-		$(this.trivialComboBox.getMainDomElement()).find(".tr-editor").addClass("field-background");
-		$(this.trivialComboBox.getMainDomElement()).find(".tr-trigger").addClass("field-border");
-		this.trivialComboBox.onFocus.addListener(() => this.getMainDomElement().addClass("focus"));
-		this.trivialComboBox.onBlur.addListener(() => this.getMainDomElement().removeClass("focus"));
+		this.trivialComboBox.getMainDomElement().classList.add("field-border", "field-border-glow", "field-background");
+		this.trivialComboBox.getMainDomElement().querySelector<HTMLElement>(":scope .tr-editor").classList.add("field-background");
+		this.trivialComboBox.getMainDomElement().querySelector<HTMLElement>(":scope .tr-trigger").classList.add("field-border");
 	}
 
-	public getMainInnerDomElement(): JQuery {
-		return $(this.trivialComboBox.getMainDomElement());
-	}
+	protected abstract localDateTimeToString(entry: LocalDateTime): string;
 
-	public getFocusableElement(): JQuery {
-		return $(this.trivialComboBox.getMainDomElement());
-	}
+	protected abstract createTimeRenderer(): (time: LocalDateTime) => string;
 
-	protected getTimeFormat() {
-		return this.timeFormat || this._context.config.timeFormat;
+	public getMainInnerDomElement(): HTMLElement {
+		return this.trivialComboBox.getMainDomElement() as HTMLElement;
 	}
 
+	protected initFocusHandling() {
+		this.trivialComboBox.onFocus.addListener(() => this.onFocusGained.fire({}));
+		this.trivialComboBox.onBlur.addListener(() => this.onBlur.fire({}));
+	}
 
+	@executeWhenFirstDisplayed()
 	focus(): void {
 		this.trivialComboBox.focus();
 	}
 
-	public hasFocus(): boolean {
-		return this.getMainInnerDomElement().is('.focus');
-	}
-
-	private static intRange(fromInclusive: number, toInclusive: number) {
-		const ints = [];
-		for (let i = fromInclusive; i <= toInclusive; i++) {
-			ints.push(i)
-		}
-		return ints;
-	}
-
-	private static pad(num: number, size: number) {
-		let s = num + "";
-		while (s.length < size) s = "0" + s;
-		return s;
-	}
-
-	public static createTimeComboBoxEntry(h: number, m: number, timeFormat: string) {
-		return {
-			hour: h,
-			minute: m,
-			hourString: AbstractUiTimeField.pad(h, 2),
-			minuteString: AbstractUiTimeField.pad(m, 2),
-			displayString: moment().hour(h).minute(m).second(0).millisecond(0).format(timeFormat),
-			hourAngle: ((h % 12) + m / 60) * 30,
-			minuteAngle: m * 6,
-			isNight: h < 6 || h >= 20
-		};
-	}
-
-	public static createTimeComboBoxEntryFromMoment(mom: moment.Moment, timeFormat: string) {
-		return {
-			hour: mom.hour(),
-			minute: mom.minute(),
-			hourString: AbstractUiTimeField.pad(mom.hour(), 2),
-			minuteString: AbstractUiTimeField.pad(mom.minute(), 2),
-			displayString: mom.format(timeFormat),
-			hourAngle: ((mom.hour() % 12) + mom.minute() / 60) * 30,
-			minuteAngle: mom.minute() * 6,
-			isNight: mom.hour() < 6 || mom.hour() >= 20
-		};
-	}
-
 	protected onEditingModeChanged(editingMode: UiFieldEditingMode): void {
-		this.getMainInnerDomElement()
-			.removeClass(Object.values(UiField.editingModeCssClasses).join(" "))
-			.addClass(UiField.editingModeCssClasses[editingMode]);
+		this.getMainInnerDomElement().classList.remove(...Object.values(UiField.editingModeCssClasses));
+		this.getMainInnerDomElement().classList.add(UiField.editingModeCssClasses[editingMode]);
 		if (editingMode === UiFieldEditingMode.READONLY) {
 			this.trivialComboBox.setEditingMode("readonly");
 		} else if (editingMode === UiFieldEditingMode.DISABLED) {
@@ -170,21 +116,20 @@ export abstract class AbstractUiTimeField<C extends AbstractUiTimeFieldConfig, V
 		}
 	}
 
-	doDestroy(): void {
+	destroy(): void {
+		super.destroy();
 		this.trivialComboBox.destroy();
-		this.$originalInput.detach();
 	}
 
 	getDefaultValue(): V {
 		return null;
 	}
 
-	setTimeFormat(timeFormat: string): void {
-		this.timeFormat = convertJavaDateTimeFormatToMomentDateTimeFormat(timeFormat);
-		let selectedEntry = this.trivialComboBox.getSelectedEntry();
-		selectedEntry.displayString = selectedEntry.moment.format(this.getTimeFormat());
-		this.trivialComboBox.setSelectedEntry(selectedEntry, true);
-		this.trivialComboBox.updateEntries([]);
+	setLocaleAndTimeFormat(locale: string, timeFormat: UiDateTimeFormatDescriptorConfig): void {
+		this._config.locale = locale;
+		this._config.timeFormat = timeFormat;
+		this.timeRenderer = this.createTimeRenderer();
+		this.trivialComboBox.setValue(this.trivialComboBox.getValue());
 	}
 
 	setShowDropDownButton(showDropDownButton: boolean): void {
@@ -194,4 +139,11 @@ export abstract class AbstractUiTimeField<C extends AbstractUiTimeFieldConfig, V
 	setShowClearButton(showClearButton: boolean): void {
 		this.trivialComboBox.setShowClearButton(showClearButton);
 	}
+
+	setClockIconEnabled(clockIconEnabled: boolean) {
+		this._config.clockIconEnabled = clockIconEnabled;
+		this.timeRenderer = this.createTimeRenderer();
+		this.trivialComboBox.setValue(this.trivialComboBox.getValue());
+	}
+
 }
diff --git a/teamapps-client/ts/modules/formfield/datetime/DateSuggestionEngine.ts b/teamapps-client/ts/modules/formfield/datetime/DateSuggestionEngine.ts
new file mode 100644
index 000000000..9576aaecd
--- /dev/null
+++ b/teamapps-client/ts/modules/formfield/datetime/DateSuggestionEngine.ts
@@ -0,0 +1,338 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+
+import {LocalDateTime} from "../../datetime/LocalDateTime";
+
+export interface DateSuggestion {
+	date: LocalDateTime;
+	ymdOrder: string;
+}
+
+export type YearMonthDayOrder = "YMD" | "YDM" | "MDY" | "MYD" | "DMY" | "DYM";
+
+export interface Options {
+	locale?: string,
+	preferredYearMonthDayOrder?: YearMonthDayOrder,
+
+	/**
+	 * By default, the engine favors future dates. This flag makes it favor past dates.
+	 */
+	favorPastDates?: boolean
+}
+
+interface FictiveLocalDate {
+	year: number,
+	month: number,
+	day: number
+}
+
+export class DateSuggestionEngine {
+
+	private preferredYmdOrder: YearMonthDayOrder;
+	private favorPastDates: boolean;
+
+	constructor(options: Options) {
+		this.preferredYmdOrder = options.preferredYearMonthDayOrder
+			?? (options.locale != null ? getYearMonthDayOrderForLocale(options.locale) : undefined)
+			?? "YMD";
+		this.favorPastDates = options.favorPastDates ?? false;
+	}
+
+	public generateSuggestions(searchString: string, now: LocalDateTime, options?: {
+		suggestAdjacentWeekForEmptyInput?: boolean,
+		shuffledFormatSuggestionsEnabled?: boolean
+	}): LocalDateTime[] {
+
+		options = {
+			suggestAdjacentWeekForEmptyInput: true,
+			shuffledFormatSuggestionsEnabled: false,
+			...(options ?? {})
+		}
+
+		if (searchString.replace(/[^\d]/g, '').length == 0) {
+			if (options.suggestAdjacentWeekForEmptyInput) {
+				return this.createAdjacentWeekDaySuggestions(now).map(s => s.date);
+			} else {
+				return [];
+			}
+		}
+
+		let suggestions: DateSuggestion[];
+		if (searchString.match(/[^\d]/)) {
+			let fragments = searchString.split(/[^\d]/).filter(f => !!f);
+			suggestions = this.createSuggestionsForFragments(fragments, now);
+		} else {
+			suggestions = this.generateSuggestionsForDigitsOnlyInput(searchString, now);
+		}
+
+		// sort by relevance
+		let preferredYmdOrder: YearMonthDayOrder = this.preferredYmdOrder;
+		suggestions.sort(function (a, b) {
+			if (preferredYmdOrder.indexOf(a.ymdOrder) === -1 && preferredYmdOrder.indexOf(b.ymdOrder) !== -1) {
+				return 1;
+			} else if (preferredYmdOrder.indexOf(a.ymdOrder) !== -1 && preferredYmdOrder.indexOf(b.ymdOrder) === -1) {
+				return -1;
+			} else if (a.ymdOrder.length != b.ymdOrder.length) { // D < DM < DMY
+				return a.ymdOrder.length - b.ymdOrder.length;
+			} else {
+				return a.date.diff(now, 'days').days - b.date.diff(now, 'days').days; // nearer is better
+			}
+		});
+
+		return suggestions
+			.filter(value => {
+				return options.shuffledFormatSuggestionsEnabled || preferredYmdOrder.indexOf(value.ymdOrder) !== -1
+			})
+			.map(s => s.date)
+			.filter(this.removeDuplicateDates());
+	}
+
+	private removeDuplicateDates() {
+		let seenDates: LocalDateTime[] = [];
+		return (d: LocalDateTime) => {
+			let dateAlreadyContained = seenDates.filter(seenDate => d.equals(seenDate)).length > 0;
+			if (dateAlreadyContained) {
+				return false;
+			} else {
+				seenDates.push(d);
+				return true;
+			}
+		};
+	}
+
+	public generateSuggestionsForDigitsOnlyInput(input: string, today: LocalDateTime): DateSuggestion[] {
+		input = input || "";
+
+		if (input.length === 0) {
+			return this.createSuggestionsForFragments([], today);
+		} else if (input.length > 8) {
+			return [];
+		}
+
+		let fragmentSets: [string, string, string][] = [];
+		for (let i = 1; i <= input.length; i++) {
+			for (let j = Math.min(input.length, i + 1); j <= input.length && j - i <= 4; j - i === 2 ? j += 2 : j++) {
+				let fragments: [string, string, string] = [input.substring(0, i), input.substring(i, j), input.substring(j, input.length)];
+				if (this.validateFragments(fragments)){
+					fragmentSets.push(fragments);
+				}
+			}
+		}
+
+		let allSuggestions: DateSuggestion[] = [];
+		for (const fragments of fragmentSets) {
+			let suggestions = this.createSuggestionsForFragments(fragments, today);
+			allSuggestions = allSuggestions.concat(suggestions);
+		}
+
+		return allSuggestions;
+	}
+
+	private validateFragments(fragments: [string, string, string]) {
+		if (fragments.some(f => f.length === 3)) { // do not allow fragments of length 3
+			return false;
+		}
+		if (fragments.some(f => f.length > 4)) { // do not allow fragments of length > 4
+			return false;
+		}
+		if (fragments.filter(f => f.length > 2).length > 1) { // do not allow more than one fragment with length > 2 (so 4)
+			return false;
+		}
+		if (fragments.some(f => f.length == 4 && f.charAt(0) == '0')) { // do not allow 4 digit fragments padded with zeros
+			return false;
+		}
+		return true;
+	}
+
+	todayOrFavoriteDirection(date: LocalDateTime, today: LocalDateTime): boolean {
+		return this.favorPastDates ? today.startOf("day") >= date.startOf("day") : today.startOf("day") <= date.startOf("day");
+	}
+
+	private createSuggestionsForFragments(fragments: string[], today: LocalDateTime): DateSuggestion[] {
+		function mod(n: number, m: number) {
+			return ((n % m) + m) % m;
+		}
+
+		function numberToYear(n: number): number {
+			let shortYear = today.year % 100;
+			let yearSuggestionBoundary = (shortYear + 20) % 100; // suggest 20 years into the future and 80 year backwards
+			let currentCentury = Math.floor(today.year / 100) * 100;
+			if (n >= 1000 && n <= 9999) { // four digit year
+				if (n >= 1900 && n <= 2100) {
+					return n;
+				} else {
+					return null; // we're not getting more historic or futuristic here
+				}
+			} else {
+				if (n < yearSuggestionBoundary) {
+					return currentCentury + n;
+				} else if (n < 100) {
+					return currentCentury - 100 + n;
+				} else if (n > today.year - 120 && n < today.year + 120) {
+					return n;
+				} else {
+					return null;
+				}
+			}
+		}
+
+		let [s1, s2, s3] = fragments;
+		let [n1, n2, n3] = [parseInt(s1), parseInt(s2), parseInt(s3)];
+		let suggestions = [];
+
+		if (!s1 && !s2 && !s3) {
+			return this.createAdjacentWeekDaySuggestions(today);
+		} else if (s1 && !s2 && !s3) {
+			if (n1 > 0 && n1 <= 31) {
+				let nextValidDate = this.findNextValidDate({
+					year: today.year,
+					month: today.month,
+					day: n1
+				}, (currentDate) => {
+					// increase month
+					return {
+						year: currentDate.year + (this.favorPastDates ? (currentDate.month == 1 ? -1 : 0) : (currentDate.month == 12 ? 1 : 0)),
+						month: mod((currentDate.month - 1) + (this.favorPastDates ? -1 : 1), 12) + 1,
+						day: currentDate.day
+					}
+				}, today);
+				if (nextValidDate) {
+					suggestions.push(createSuggestion(nextValidDate, "D"));
+				}
+			}
+		} else if (s1 && s2 && !s3) {
+			if (n1 <= 12 && n2 > 0 && n2 <= 31) {
+				let nextValidDate = this.findNextValidDate({
+					year: today.year,
+					month: n1,
+					day: n2
+				}, (currentDate) => {
+					return {
+						year: currentDate.year + (this.favorPastDates ? -1 : 1),
+						month: currentDate.month,
+						day: currentDate.day
+					}
+				}, today);
+				if (nextValidDate) {
+					suggestions.push(createSuggestion(nextValidDate, "MD"));
+				}
+			}
+			if (n2 <= 12 && n1 > 0 && n1 <= 31) {
+				let nextValidDate = this.findNextValidDate({
+					year: today.year,
+					month: n2,
+					day: n1
+				}, (currentDate) => {
+					return {
+						year: currentDate.year + (this.favorPastDates ? -1 : 1),
+						month: currentDate.month,
+						day: currentDate.day
+					}
+				}, today);
+				if (nextValidDate) {
+					suggestions.push(createSuggestion(nextValidDate, "DM"));
+				}
+			}
+		} else { // s1 && s2 && s3
+			let dateTime;
+			if (numberToYear(n1) != null) {
+				dateTime = LocalDateTime.fromObject({year: numberToYear(n1), month: n2, day: n3});
+				if (dateTime.isValid) {
+					suggestions.push(createSuggestion(dateTime, "YMD"));
+				}
+				dateTime = LocalDateTime.fromObject({year: numberToYear(n1), month: n3, day: n2});
+				if (dateTime.isValid) {
+					suggestions.push(createSuggestion(dateTime, "YDM"));
+				}
+			}
+			if (numberToYear(n2) != null) {
+				dateTime = LocalDateTime.fromObject({year: numberToYear(n2), month: n1, day: n3});
+				if (dateTime.isValid) {
+					suggestions.push(createSuggestion(dateTime, "MYD"));
+				}
+				dateTime = LocalDateTime.fromObject({year: numberToYear(n2), month: n3, day: n1});
+				if (dateTime.isValid) {
+					suggestions.push(createSuggestion(dateTime, "DYM"));
+				}
+			}
+			if (numberToYear(n3) != null) {
+				dateTime = LocalDateTime.fromObject({year: numberToYear(n3), month: n1, day: n2});
+				if (dateTime.isValid) {
+					suggestions.push(createSuggestion(dateTime, "MDY"));
+				}
+				dateTime = LocalDateTime.fromObject({year: numberToYear(n3), month: n2, day: n1});
+				if (dateTime.isValid) {
+					suggestions.push(createSuggestion(dateTime, "DMY"));
+				}
+			}
+		}
+
+		return suggestions;
+	};
+
+	private createAdjacentWeekDaySuggestions(today: LocalDateTime) {
+		let result = [];
+		for (let i = 0; i < 7; i++) {
+			result.push(createSuggestion(today.plus({days: this.favorPastDates ? -i : i}), ""));
+		}
+		return result;
+	}
+
+	private findNextValidDate(startDate: FictiveLocalDate, incementor: (currentDate: FictiveLocalDate) => FictiveLocalDate, today: LocalDateTime): LocalDateTime {
+		let currentFictiveDate = startDate;
+		let currentDateTime: LocalDateTime = LocalDateTime.fromObject(currentFictiveDate);
+		let numberOfIterations = 0;
+		while (!(currentDateTime.isValid && this.todayOrFavoriteDirection(currentDateTime, today)) && numberOfIterations < 4) {
+			currentFictiveDate = incementor(currentFictiveDate);
+			currentDateTime = LocalDateTime.fromObject(currentFictiveDate);
+			numberOfIterations++;
+		}
+		return currentDateTime.isValid ? currentDateTime : null;
+	}
+}
+
+function createSuggestion(date: LocalDateTime, ymdOrder: string): DateSuggestion {
+	return {date, ymdOrder};
+}
+
+export function getYearMonthDayOrderFromDateFormat(dateFormat: string): YearMonthDayOrder {
+	let ymdIndexes: { [key: string]: number } = {
+		Y: dateFormat.toUpperCase().indexOf("Y"),
+		M: dateFormat.toUpperCase().indexOf("M"),
+		D: dateFormat.toUpperCase().indexOf("D")
+	};
+	return <YearMonthDayOrder>(["D", "M", "Y"].sort((a, b) => ymdIndexes[a] - ymdIndexes[b]).join(""));
+}
+
+export function getYearMonthDayOrderForLocale(locale: string): YearMonthDayOrder {
+	let parts = LocalDateTime.fromObject({
+		year: 2020,
+		month: 11,
+		day: 30
+	}).setLocale(locale).toLocaleParts({
+		year: "numeric",
+		month: "2-digit",
+		day: "2-digit"
+	});
+	return parts
+		.filter(p => p.type === "year" || p.type === "month" || p.type === "day")
+		.map(p => (p.type as string).charAt(0).toUpperCase())
+		.join("") as YearMonthDayOrder;
+}
diff --git a/teamapps-client/ts/modules/formfield/datetime/TimeSuggestionEngine.ts b/teamapps-client/ts/modules/formfield/datetime/TimeSuggestionEngine.ts
new file mode 100644
index 000000000..3620d776b
--- /dev/null
+++ b/teamapps-client/ts/modules/formfield/datetime/TimeSuggestionEngine.ts
@@ -0,0 +1,110 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+
+import {LocalDateTime} from "../../datetime/LocalDateTime";
+
+export class TimeSuggestionEngine {
+
+	constructor() {
+	}
+
+	public generateSuggestions(searchString: string): LocalDateTime[] {
+		let suggestions: LocalDateTime[] = [];
+
+		const match = searchString.match(/[^\d]/);
+		const colonIndex = match != null ? match.index : null;
+		if (colonIndex !== null) {
+			const hourString = searchString.substring(0, colonIndex);
+			const minuteString = searchString.substring(colonIndex + 1);
+			suggestions = suggestions.concat(TimeSuggestionEngine.createTimeSuggestions(TimeSuggestionEngine.createHourSuggestions(hourString), TimeSuggestionEngine.createMinuteSuggestions(minuteString)));
+		} else if (searchString.length > 0) { // is a number!
+			if (searchString.length >= 2) {
+				const hourString = searchString.substr(0, 2);
+				const minuteString = searchString.substring(2, searchString.length);
+				suggestions = suggestions.concat(TimeSuggestionEngine.createTimeSuggestions(TimeSuggestionEngine.createHourSuggestions(hourString), TimeSuggestionEngine.createMinuteSuggestions(minuteString)));
+			}
+			const hourString = searchString.substr(0, 1);
+			const minuteString = searchString.substring(1, searchString.length);
+			if (minuteString.length <= 2) {
+				suggestions = suggestions.concat(TimeSuggestionEngine.createTimeSuggestions(TimeSuggestionEngine.createHourSuggestions(hourString), TimeSuggestionEngine.createMinuteSuggestions(minuteString)));
+			}
+		} else {
+			suggestions = suggestions.concat(TimeSuggestionEngine.createTimeSuggestions(TimeSuggestionEngine.intRange(6, 24).concat(TimeSuggestionEngine.intRange(1, 5)), [0]));
+		}
+		return suggestions;
+	}
+
+	private static intRange(fromInclusive: number, toInclusive: number) {
+		const ints = [];
+		for (let i = fromInclusive; i <= toInclusive; i++) {
+			ints.push(i)
+		}
+		return ints;
+	}
+
+	private static createTimeSuggestions(hourValues: number[], minuteValues: number[]): LocalDateTime[] {
+		const entries: LocalDateTime[] = [];
+		for (let i = 0; i < hourValues.length; i++) {
+			const hour = hourValues[i];
+			for (let j = 0; j < minuteValues.length; j++) {
+				const minute = minuteValues[j];
+				entries.push(LocalDateTime.fromObject({hour, minute})); // local!
+			}
+		}
+		return entries;
+	}
+
+	private static createMinuteSuggestions(minuteString: string): number[] {
+		const m = parseInt(minuteString);
+		if (m < 0) {
+			return [];
+		} else if (isNaN(m)) {
+			return [0, 30];
+		} else if (minuteString.length === 1) {
+			return []; // do not suggest something like "20" for input "2" - we simply cannot suggest anything satisfying at this point.
+		} else if (minuteString.length === 2) {
+			if (m > 59) {
+				return [];
+			} else {
+				return [m];
+			}
+		} else { // minuteString.length > 2...
+			return [];
+		}
+	}
+
+	private static createHourSuggestions(hourString: string): number[] {
+		const h = parseInt(hourString);
+		if (isNaN(h)) {
+			return TimeSuggestionEngine.intRange(1, 24);
+			//} else if (h < 10) {
+			//    return [(h + 12) % 24, h]; // afternoon first
+			//} else if (h >= 10 && h < 12) {
+			//    return [h, (h + 12) % 24]; // morning first
+		} else if (h < 12) {
+			return [h, (h + 12) % 24]; // morning first
+
+		} else if (h <= 24) {
+			return [h % 24];
+		} else {
+			return [];
+		}
+	}
+}
diff --git a/teamapps-client/ts/modules/formfield/datetime/UiInstantDateField.ts b/teamapps-client/ts/modules/formfield/datetime/UiInstantDateField.ts
deleted file mode 100644
index dbe604dd8..000000000
--- a/teamapps-client/ts/modules/formfield/datetime/UiInstantDateField.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-import * as Mustache from "mustache";
-import * as moment from "moment-timezone";
-import {UiInstantDateFieldConfig, UiInstantDateFieldCommandHandler, UiInstantDateFieldEventSource} from "../../../generated/UiInstantDateFieldConfig";
-import {TeamAppsUiContext} from "../../TeamAppsUiContext";
-import {TeamAppsUiComponentRegistry} from "../../TeamAppsUiComponentRegistry";
-import {AbstractUiDateField, DateComboBoxEntry} from "./AbstractUiDateField";
-import Moment = moment.Moment;
-import {convertJavaDateTimeFormatToMomentDateTimeFormat} from "../../Common";
-
-export class UiInstantDateField extends AbstractUiDateField<UiInstantDateFieldConfig, number> implements UiInstantDateFieldEventSource, UiInstantDateFieldCommandHandler {
-
-	private timeZoneId: string;
-
-	protected initialize(config: UiInstantDateFieldConfig, context: TeamAppsUiContext) {
-		super.initialize(config, context);
-		this.getMainInnerDomElement().addClass("UiInstantDateField");
-		this.timeZoneId = config.timeZoneId;
-	}
-
-	isValidData(v: number): boolean {
-		return v == null || typeof v === "number";
-	}
-
-	protected displayCommittedValue(): void {
-		let uiValue = this.getCommittedValue();
-		if (uiValue) {
-			let newMoment: Moment = moment.tz(uiValue, this.getTimeZoneId());
-			this.trivialComboBox.setSelectedEntry(UiInstantDateField.createDateComboBoxEntryFromMoment(newMoment, this.getDateFormat()), true);
-		} else {
-			this.trivialComboBox.setSelectedEntry(null, true);
-		}
-	}
-
-	private getTimeZoneId() {
-		return this.timeZoneId || this._context.config.timeZoneId;
-	}
-
-	public getTransientValue(): number {
-		let selectedEntry: DateComboBoxEntry = this.trivialComboBox.getSelectedEntry();
-		if (selectedEntry) {
-			return moment.tz({
-				year: selectedEntry.year,
-				month: selectedEntry.month - 1,
-				day: selectedEntry.day
-			}, this.getTimeZoneId()).valueOf();
-		} else {
-			return null;
-		}
-	}
-
-	public getReadOnlyHtml(value: number, availableWidth: number): string {
-		if (value != null) {
-			let mom = moment.tz(value, this.timeZoneId || this._context.config.timeZoneId);
-			return `<div class="static-readonly-UiInstantDateField">` + Mustache.render(UiInstantDateField.comboBoxTemplate, UiInstantDateField.createDateComboBoxEntryFromMoment(mom, this._config.dateFormat || this._context.config.dateFormat)) + '</div>';
-		} else {
-			return "";
-		}
-	}
-
-	setTimeZoneId(timeZoneId: string): void {
-		this.timeZoneId = timeZoneId;
-	}
-
-	public valuesChanged(v1: number, v2: number): boolean {
-		return v1 !== v2;
-	}
-}
-
-TeamAppsUiComponentRegistry.registerFieldClass("UiInstantDateField", UiInstantDateField);
diff --git a/teamapps-client/ts/modules/formfield/datetime/UiInstantDateTimeField.ts b/teamapps-client/ts/modules/formfield/datetime/UiInstantDateTimeField.ts
index 4d40721f7..84b86833b 100644
--- a/teamapps-client/ts/modules/formfield/datetime/UiInstantDateTimeField.ts
+++ b/teamapps-client/ts/modules/formfield/datetime/UiInstantDateTimeField.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,25 +17,25 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-import * as Mustache from "mustache";
-import * as moment from "moment-timezone";
-import {UiInstantDateField} from "./UiInstantDateField";
 import {TeamAppsUiContext} from "../../TeamAppsUiContext";
 import {TeamAppsUiComponentRegistry} from "../../TeamAppsUiComponentRegistry";
-import {AbstractUiTimeField} from "./AbstractUiTimeField";
 import {AbstractUiDateTimeField} from "./AbstractUiDateTimeField";
-import {UiInstantDateTimeFieldConfig, UiInstantDateTimeFieldCommandHandler, UiInstantDateTimeFieldEventSource} from "../../../generated/UiInstantDateTimeFieldConfig";
-import Moment = moment.Moment;
-import {convertJavaDateTimeFormatToMomentDateTimeFormat} from "../../Common";
+import {
+	UiInstantDateTimeFieldCommandHandler,
+	UiInstantDateTimeFieldConfig,
+	UiInstantDateTimeFieldEventSource
+} from "../../../generated/UiInstantDateTimeFieldConfig";
+import {DateTime} from "luxon";
 
 export class UiInstantDateTimeField extends AbstractUiDateTimeField<UiInstantDateTimeFieldConfig, number> implements UiInstantDateTimeFieldEventSource, UiInstantDateTimeFieldCommandHandler {
 
-	private timeZoneId: string;
-
 	protected initialize(config: UiInstantDateTimeFieldConfig, context: TeamAppsUiContext) {
 		super.initialize(config, context);
-		this.getMainInnerDomElement().addClass("UiDateTimeField");
-		this.timeZoneId = config.timeZoneId;
+		this.getMainInnerDomElement().classList.add("UiDateTimeField", "default-min-field-width");
+	}
+
+	protected getTimeZone(): string {
+		return this._config.timeZoneId;
 	}
 
 	isValidData(v: number): boolean {
@@ -45,38 +45,30 @@ export class UiInstantDateTimeField extends AbstractUiDateTimeField<UiInstantDat
 	protected displayCommittedValue(): void {
 		let uiValue = this.getCommittedValue();
 		if (uiValue) {
-			let newMoment: Moment = moment.tz(uiValue, this.getTimeZoneId());
-			this.trivialDateTimeField.setValue(newMoment as any);
+			this.trivialDateTimeField.setValue(this.toDateTime(uiValue));
 		} else {
 			this.trivialDateTimeField.setValue(null);
 		}
 	}
 
+	private toDateTime(uiValue: number) {
+		return DateTime.fromMillis(uiValue).setZone(this._config.timeZoneId);
+	}
+
 	public getTransientValue(): number {
 		let value = this.trivialDateTimeField.getValue();
 		if (value) {
-			return moment.tz({
-				year: value.year,
-				month: value.month - 1,
-				day: value.day,
-				hour: value.hour,
-				minute: value.minute
-			}, this.getTimeZoneId()).valueOf();
+			return value.valueOf();
 		} else {
 			return null;
 		}
 	}
 
-	private getTimeZoneId() {
-		return this.timeZoneId || this._context.config.timeZoneId;
-	}
-
 	public getReadOnlyHtml(value: number, availableWidth: number): string {
 		if (value != null) {
-			let mom = moment.tz(value, this.timeZoneId || this._context.config.timeZoneId);
 			return `<div class="static-readonly-UiDateTimeField">`
-				+ Mustache.render(UiInstantDateField.comboBoxTemplate, UiInstantDateField.createDateComboBoxEntryFromMoment(mom, this._config.dateFormat || this._context.config.dateFormat))
-				+ Mustache.render(AbstractUiTimeField.comboBoxTemplate, AbstractUiTimeField.createTimeComboBoxEntryFromMoment(mom, this._config.timeFormat || this._context.config.timeFormat))
+				+ this.dateRenderer(this.toDateTime(value))
+				+ this.timeRenderer(this.toDateTime(value))
 				+ '</div>';
 		} else {
 			return "";
@@ -92,9 +84,8 @@ export class UiInstantDateTimeField extends AbstractUiDateTimeField<UiInstantDat
 	}
 
 	setTimeZoneId(timeZoneId: string): void {
-		this.timeZoneId = timeZoneId;
-		// TODO update display!
-		this.logger.warn("TODO: implement UiInstantDateTimeField.setTimeZoneId()");
+		this._config.timeZoneId = timeZoneId;
+		this.displayCommittedValue();
 	}
 
 }
diff --git a/teamapps-client/ts/modules/formfield/datetime/UiInstantTimeField.ts b/teamapps-client/ts/modules/formfield/datetime/UiInstantTimeField.ts
deleted file mode 100644
index dbf89fb2e..000000000
--- a/teamapps-client/ts/modules/formfield/datetime/UiInstantTimeField.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-import * as Mustache from "mustache";
-import * as moment from "moment-timezone";
-import {UiInstantTimeFieldConfig, UiInstantTimeFieldCommandHandler, UiInstantTimeFieldEventSource} from "../../../generated/UiInstantTimeFieldConfig";
-import {TeamAppsUiContext} from "../../TeamAppsUiContext";
-import {TeamAppsUiComponentRegistry} from "../../TeamAppsUiComponentRegistry";
-import {AbstractUiTimeField} from "./AbstractUiTimeField";
-import Moment = moment.Moment;
-import {convertJavaDateTimeFormatToMomentDateTimeFormat} from "../../Common";
-
-export class UiInstantTimeField extends AbstractUiTimeField<UiInstantTimeFieldConfig, number> implements UiInstantTimeFieldEventSource, UiInstantTimeFieldCommandHandler {
-
-	private timeZoneId: string;
-
-	protected initialize(config: UiInstantTimeFieldConfig, context: TeamAppsUiContext) {
-		super.initialize(config, context);
-		this.timeZoneId = config.timeZoneId;
-		this.getMainInnerDomElement().addClass("UiInstantTimeField");
-	}
-
-	isValidData(v: number): boolean {
-		return v == null || typeof v === "number";
-	}
-
-	protected displayCommittedValue(): void {
-		let uiValue = this.getCommittedValue();
-		if (uiValue) {
-			let newMoment: Moment = moment.tz(uiValue, this.getTimeZoneId());
-			this.trivialComboBox.setSelectedEntry(UiInstantTimeField.createTimeComboBoxEntry(newMoment.hour(), newMoment.minute(), this.getTimeFormat()), true);
-		} else {
-			this.trivialComboBox.setSelectedEntry(null, true);
-		}
-	}
-
-	public getTransientValue(): number {
-		let selectedEntry = this.trivialComboBox.getSelectedEntry();
-		if (selectedEntry) {
-			let selectedMoment = moment.tz({
-				hour: selectedEntry.hour,
-				minute: selectedEntry.minute
-			}, this.getTimeZoneId());
-			return selectedMoment.valueOf();
-		} else {
-			return null;
-		}
-	}
-
-	private getTimeZoneId() {
-		return this.timeZoneId || this._context.config.timeZoneId;
-	}
-
-	public getReadOnlyHtml(value: number, availableWidth: number): string {
-		if (value != null && value != null) {
-			let mom = moment.tz(value, this.timeZoneId || this._context.config.timeZoneId);
-			return `<div class="static-readonly-UiInstantTimeField">` + Mustache.render(UiInstantTimeField.comboBoxTemplate, UiInstantTimeField.createTimeComboBoxEntryFromMoment(mom, this._config.timeFormat || this._context.config.timeFormat)) + '</div>';
-		} else {
-			return "";
-		}
-	}
-
-	setTimeZoneId(timeZoneId: string): void {
-		this.timeZoneId = timeZoneId;
-		this.displayCommittedValue();
-	}
-
-	public valuesChanged(v1: number, v2: number): boolean {
-		return v1 !== v2;
-	}
-}
-
-TeamAppsUiComponentRegistry.registerFieldClass("UiInstantTimeField", UiInstantTimeField);
diff --git a/teamapps-client/ts/modules/formfield/datetime/UiLocalDateField.ts b/teamapps-client/ts/modules/formfield/datetime/UiLocalDateField.ts
index fd8fc5657..701271289 100644
--- a/teamapps-client/ts/modules/formfield/datetime/UiLocalDateField.ts
+++ b/teamapps-client/ts/modules/formfield/datetime/UiLocalDateField.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,55 +17,254 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-import * as Mustache from "mustache";
-import {UiLocalDateFieldConfig, UiLocalDateFieldCommandHandler, UiLocalDateFieldEventSource} from "../../../generated/UiLocalDateFieldConfig";
+import {TrivialComboBox} from "../../trivial-components/TrivialComboBox";
+import {DateSuggestionEngine} from "./DateSuggestionEngine";
+import {UiFieldEditingMode} from "../../../generated/UiFieldEditingMode";
+import {UiField} from "../UiField";
 import {TeamAppsUiContext} from "../../TeamAppsUiContext";
+import {
+	UiTextInputHandlingField_SpecialKeyPressedEvent,
+	UiTextInputHandlingField_TextInputEvent
+} from "../../../generated/UiTextInputHandlingFieldConfig";
+import {TeamAppsEvent} from "../../util/TeamAppsEvent";
+import {UiSpecialKey} from "../../../generated/UiSpecialKey";
+import {deepEquals} from "../../Common";
+import {UiDateTimeFormatDescriptorConfig} from "../../../generated/UiDateTimeFormatDescriptorConfig";
+import {LocalDateTime} from "../../datetime/LocalDateTime";
+import {createDateRenderer} from "./datetime-rendering";
 import {TeamAppsUiComponentRegistry} from "../../TeamAppsUiComponentRegistry";
-import {AbstractUiDateField, DateComboBoxEntry} from "./AbstractUiDateField";
-import {arraysEqual} from "../../Common";
+import {
+	UiLocalDateField_DropDownMode,
+	UiLocalDateFieldCommandHandler,
+	UiLocalDateFieldConfig,
+	UiLocalDateFieldEventSource
+} from "../../../generated/UiLocalDateFieldConfig";
+import {TreeBoxDropdown} from "../../trivial-components/dropdown/TreeBoxDropdown";
+import {TrivialTreeBox} from "../../trivial-components/TrivialTreeBox";
+import {CalendarBoxDropdown} from "../../trivial-components/dropdown/CalendarBoxDropdown";
+import {TrivialCalendarBox} from "../../trivial-components/TrivialCalendarBox";
+import {createUiLocalDateConfig, UiLocalDateConfig} from "../../../generated/UiLocalDateConfig";
+import {executeWhenFirstDisplayed} from "../../util/ExecuteWhenFirstDisplayed";
 
-type LocalDate = [number, number, number];
+export class UiLocalDateField extends UiField<UiLocalDateFieldConfig, UiLocalDateConfig> implements UiLocalDateFieldEventSource, UiLocalDateFieldCommandHandler {
 
-export class UiLocalDateField extends AbstractUiDateField<UiLocalDateFieldConfig, LocalDate> implements UiLocalDateFieldEventSource, UiLocalDateFieldCommandHandler {
+	public readonly onTextInput: TeamAppsEvent<UiTextInputHandlingField_TextInputEvent> = new TeamAppsEvent<UiTextInputHandlingField_TextInputEvent>({
+		throttlingMode: "debounce",
+		delay: 250
+	});
+	public readonly onSpecialKeyPressed: TeamAppsEvent<UiTextInputHandlingField_SpecialKeyPressedEvent> = new TeamAppsEvent<UiTextInputHandlingField_SpecialKeyPressedEvent>({
+		throttlingMode: "debounce",
+		delay: 250
+	});
+
+	protected trivialComboBox: TrivialComboBox<LocalDateTime>;
+	protected dateSuggestionEngine: DateSuggestionEngine;
+	protected dateRenderer: (time: LocalDateTime) => string;
+
+	private calendarBoxDropdown: CalendarBoxDropdown;
 
 	protected initialize(config: UiLocalDateFieldConfig, context: TeamAppsUiContext) {
-		super.initialize(config, context);
-		this.getMainInnerDomElement().addClass("UiLocalDateField");
+		this.updateDateSuggestionEngine();
+		this.dateRenderer = this.createDateRenderer();
+
+		let treeBoxDropdown = new TreeBoxDropdown({
+			queryFunction: (searchString: string) => {
+				return this.dateSuggestionEngine.generateSuggestions(searchString, this.getDefaultDate(), {
+					shuffledFormatSuggestionsEnabled: this._config.shuffledFormatSuggestionsEnabled
+				});
+			},
+			textHighlightingEntryLimit: -1, // no highlighting!
+			preselectionMatcher: (query, entry) => this.localDateTimeToString(entry).toLowerCase().indexOf(query.toLowerCase()) >= 0
+		}, new TrivialTreeBox<LocalDateTime>({
+			entryRenderingFunction: (localDateTime) => this.dateRenderer(localDateTime),
+			selectOnHover: true
+		}));
+
+		this.calendarBoxDropdown = new CalendarBoxDropdown(new TrivialCalendarBox({
+			locale: config.locale,
+			// firstDayOfWeek?: config., TODO
+			highlightKeyboardNavigationState: false
+		}), query => this.dateSuggestionEngine.generateSuggestions(query, this.getDefaultDate(), {
+			shuffledFormatSuggestionsEnabled: this._config.shuffledFormatSuggestionsEnabled
+		})[0], this.getDefaultDate());
+
+		this.trivialComboBox = new TrivialComboBox<LocalDateTime>({
+			showTrigger: config.showDropDownButton,
+			entryToEditorTextFunction: entry => {
+				return this.localDateTimeToString(entry);
+			},
+			selectedEntryRenderingFunction: (localDateTime) => this.dateRenderer(localDateTime),
+			textToEntryFunction: freeText => {
+				let suggestions = this.dateSuggestionEngine.generateSuggestions(freeText, this.getDefaultDate(), {
+					suggestAdjacentWeekForEmptyInput: false,
+					shuffledFormatSuggestionsEnabled: this._config.shuffledFormatSuggestionsEnabled
+				});
+				return suggestions.length > 0 ? suggestions[0] : null;
+			},
+			editingMode: config.editingMode === UiFieldEditingMode.READONLY ? 'readonly' : config.editingMode === UiFieldEditingMode.DISABLED ? 'disabled' : 'editable',
+			showClearButton: config.showClearButton,
+			placeholderText: config.placeholderText
+		}, this._config.dropDownMode === UiLocalDateField_DropDownMode.CALENDAR ? this.calendarBoxDropdown : treeBoxDropdown);
+		
+		[this.trivialComboBox.onBeforeQuery, this.trivialComboBox.onBeforeDropdownOpens].forEach(event => event.addListener(queryString => {
+			if (this._config.dropDownMode == UiLocalDateField_DropDownMode.CALENDAR
+				|| this._config.dropDownMode == UiLocalDateField_DropDownMode.CALENDAR_SUGGESTION_LIST && !queryString) {
+				this.trivialComboBox.setDropDownComponent(this.calendarBoxDropdown);
+			} else {
+				this.trivialComboBox.setDropDownComponent(treeBoxDropdown);
+			}
+		}));
+		this.trivialComboBox.getMainDomElement().classList.add("AbstractUiDateField", "default-min-field-width");
+		this.trivialComboBox.onSelectedEntryChanged.addListener(() => this.commit());
+		this.trivialComboBox.getEditor().addEventListener("keydown", (e: KeyboardEvent) => {
+			if (e.key === "Escape") {
+				this.onSpecialKeyPressed.fire({
+					key: UiSpecialKey.ESCAPE
+				});
+			} else if (e.key === "Enter") {
+				this.onSpecialKeyPressed.fire({
+					key: UiSpecialKey.ENTER
+				});
+			}
+		});
+		this.trivialComboBox.getEditor().addEventListener("input", e => this.onTextInput.fire({enteredString: (e.target as HTMLInputElement).value}));
+
+		this.trivialComboBox.getMainDomElement().classList.add("field-border", "field-border-glow", "field-background");
+		this.trivialComboBox.getMainDomElement().querySelector<HTMLElement>(":scope .tr-editor").classList.add("field-background");
+		this.trivialComboBox.getMainDomElement().querySelector<HTMLElement>(":scope .tr-trigger").classList.add("field-border");
+
+		this.getMainInnerDomElement().classList.add("UiLocalDateField");
+	}
+
+	private getDefaultDate() {
+		return UiLocalDateField.UiLocalDateToLocalDateTime(this._config.defaultSuggestionDate) ?? LocalDateTime.local();
+	}
+
+	protected localDateTimeToString(entry: LocalDateTime): string {
+		return entry.setLocale(this._config.locale).toLocaleString(this._config.dateFormat);
+	}
+
+	protected createDateRenderer(): (time: LocalDateTime) => string {
+		let dateRenderer = createDateRenderer(this._config.locale, this._config.dateFormat, this._config.calendarIconEnabled, "static-readonly-UiDateField");
+		return entry => dateRenderer(entry?.toUTC());
+	}
+
+	private updateDateSuggestionEngine() {
+		this.dateSuggestionEngine = new DateSuggestionEngine({
+			locale: this._config.locale,
+			favorPastDates: this._config.favorPastDates
+		});
+	}
+
+	public getMainInnerDomElement(): HTMLElement {
+		return this.trivialComboBox.getMainDomElement() as HTMLElement;
+	}
+
+	protected initFocusHandling() {
+		this.trivialComboBox.onFocus.addListener(() => this.onFocusGained.fire({}));
+		this.trivialComboBox.onBlur.addListener(() => this.onBlur.fire({}));
+	}
+
+	@executeWhenFirstDisplayed()
+	focus(): void {
+		this.trivialComboBox.focus();
 	}
 
-	isValidData(v: LocalDate): boolean {
-		return v == null || (Array.isArray(v) && typeof v[0] === "number" && typeof v[1] === "number" && typeof v[2] === "number");
+	protected onEditingModeChanged(editingMode: UiFieldEditingMode): void {
+		this.getMainElement().classList.remove(...Object.values(UiField.editingModeCssClasses));
+		this.getMainElement().classList.add(UiField.editingModeCssClasses[editingMode]);
+		if (editingMode === UiFieldEditingMode.READONLY) {
+			this.trivialComboBox.setEditingMode("readonly");
+		} else if (editingMode === UiFieldEditingMode.DISABLED) {
+			this.trivialComboBox.setEditingMode("disabled");
+		} else {
+			this.trivialComboBox.setEditingMode("editable");
+		}
+	}
+
+	isValidData(v: UiLocalDateConfig): boolean {
+		return v == null || v._type === "UiLocalDate";
 	}
 
 	protected displayCommittedValue(): void {
 		let uiValue = this.getCommittedValue();
 		if (uiValue) {
-			this.trivialComboBox.setSelectedEntry(UiLocalDateField.createDateComboBoxEntryFromLocalValues(uiValue[0], uiValue[1], uiValue[2], this.getDateFormat()), true);
+			this.trivialComboBox.setValue(UiLocalDateField.UiLocalDateToLocalDateTime(uiValue));
 		} else {
-			this.trivialComboBox.setSelectedEntry(null, true);
+			this.trivialComboBox.setValue(null);
 		}
 	}
 
-	public getTransientValue(): LocalDate {
-		let selectedEntry: DateComboBoxEntry = this.trivialComboBox.getSelectedEntry();
+	public getTransientValue(): UiLocalDateConfig {
+		let selectedEntry = this.trivialComboBox.getValue();
 		if (selectedEntry) {
-			return [selectedEntry.year, selectedEntry.month, selectedEntry.day];
+			return createUiLocalDateConfig(selectedEntry.year, selectedEntry.month, selectedEntry.day);
 		} else {
 			return null;
 		}
 	}
 
-	public getReadOnlyHtml(value: LocalDate, availableWidth: number): string {
+	public getReadOnlyHtml(value: UiLocalDateConfig, availableWidth: number): string {
 		if (value != null) {
-			return `<div class="static-readonly-UiLocalDateField">` + Mustache.render(UiLocalDateField.comboBoxTemplate, UiLocalDateField.createDateComboBoxEntryFromLocalValues(value[0], value[1], value[2], this._config.dateFormat || this._context.config.dateFormat)) + '</div>';
+			return this.dateRenderer(UiLocalDateField.UiLocalDateToLocalDateTime(value));
 		} else {
 			return "";
 		}
 	}
 
-	public valuesChanged(v1: LocalDate, v2: LocalDate): boolean {
-		return !arraysEqual(v1, v2);
+	public valuesChanged(v1: UiLocalDateConfig, v2: UiLocalDateConfig): boolean {
+		return !deepEquals(v1, v2);
+	}
+
+	private static UiLocalDateToLocalDateTime(uiValue: UiLocalDateConfig) {
+		return uiValue != null ? LocalDateTime.fromObject({year: uiValue.year, month: uiValue.month, day: uiValue.day}) : null;
+	}
+
+	destroy(): void {
+		super.destroy();
+		this.trivialComboBox.destroy();
+	}
+
+	update(config: UiLocalDateFieldConfig): any {
+		this.setShowDropDownButton(config.showDropDownButton);
+		this.setShowClearButton(config.showClearButton);
+		this.setFavorPastDates(config.favorPastDates);
+		this.setLocaleAndDateFormat(config.locale, config.dateFormat);
+		this.trivialComboBox.setPlaceholderText(config.placeholderText);
+		this.calendarBoxDropdown.defaultDate = UiLocalDateField.UiLocalDateToLocalDateTime(config.defaultSuggestionDate);
+		this.setCalendarIconEnabled(config.calendarIconEnabled);
+		this._config = config;
+	}
+
+	setLocaleAndDateFormat(locale: string, dateFormat: UiDateTimeFormatDescriptorConfig): void {
+		this._config.locale = locale;
+		this._config.dateFormat = dateFormat;
+		this.updateDateSuggestionEngine();
+		this.dateRenderer = this.createDateRenderer();
+		this.trivialComboBox.setValue(this.trivialComboBox.getValue());
+	}
+
+	setFavorPastDates(favorPastDates: boolean): void {
+		this._config.favorPastDates = favorPastDates;
+		this.updateDateSuggestionEngine();
+	}
+
+	setShowDropDownButton(showDropDownButton: boolean): void {
+		this._config.showDropDownButton;
+		this.trivialComboBox.setShowTrigger(showDropDownButton);
+	}
+
+	setShowClearButton(showClearButton: boolean): void {
+		this._config.showClearButton;
+		this.trivialComboBox.setShowClearButton(showClearButton);
+	}
+
+	setCalendarIconEnabled(calendarIconEnabled: boolean) {
+		this._config.calendarIconEnabled = calendarIconEnabled;
+		this.dateRenderer = this.createDateRenderer();
+		this.trivialComboBox.setValue(this.trivialComboBox.getValue());
 	}
 }
 
 TeamAppsUiComponentRegistry.registerFieldClass("UiLocalDateField", UiLocalDateField);
+
diff --git a/teamapps-client/ts/modules/formfield/datetime/UiLocalDateTimeField.ts b/teamapps-client/ts/modules/formfield/datetime/UiLocalDateTimeField.ts
index e89e02d57..f90213ae7 100644
--- a/teamapps-client/ts/modules/formfield/datetime/UiLocalDateTimeField.ts
+++ b/teamapps-client/ts/modules/formfield/datetime/UiLocalDateTimeField.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,66 +17,81 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-import * as Mustache from "mustache";
-import * as moment from "moment-timezone";
-import {UiInstantDateField} from "./UiInstantDateField";
 import {TeamAppsUiContext} from "../../TeamAppsUiContext";
 import {TeamAppsUiComponentRegistry} from "../../TeamAppsUiComponentRegistry";
-import {AbstractUiTimeField} from "./AbstractUiTimeField";
 import {AbstractUiDateTimeField} from "./AbstractUiDateTimeField";
-import {UiLocalDateTimeFieldConfig, UiLocalDateTimeFieldCommandHandler, UiLocalDateTimeFieldEventSource} from "../../../generated/UiLocalDateTimeFieldConfig";
+import {
+	UiLocalDateTimeFieldCommandHandler,
+	UiLocalDateTimeFieldConfig,
+	UiLocalDateTimeFieldEventSource
+} from "../../../generated/UiLocalDateTimeFieldConfig";
 import {arraysEqual} from "../../Common";
-import Moment = moment.Moment;
+import {DateTime} from "luxon";
 
-type LocalDateTime = [number, number, number, number, number, number, number];
+type LocalDateTimeArray = [number, number, number, number, number, number, number];
 
-export class UiLocalDateTimeField extends AbstractUiDateTimeField<UiLocalDateTimeFieldConfig, LocalDateTime> implements UiLocalDateTimeFieldEventSource, UiLocalDateTimeFieldCommandHandler {
+export class UiLocalDateTimeField extends AbstractUiDateTimeField<UiLocalDateTimeFieldConfig, LocalDateTimeArray> implements UiLocalDateTimeFieldEventSource, UiLocalDateTimeFieldCommandHandler {
 
 	protected initialize(config: UiLocalDateTimeFieldConfig, context: TeamAppsUiContext) {
 		super.initialize(config, context);
-		this.getMainInnerDomElement().addClass("UiDateTimeField");
+		this.getMainInnerDomElement().classList.add("UiDateTimeField", "default-min-field-width");
 	}
 
-	isValidData(v: LocalDateTime): boolean {
+	protected getTimeZone(): string {
+		return "UTC";
+	}
+
+	isValidData(v: LocalDateTimeArray): boolean {
 		return v == null || (Array.isArray(v) && typeof v[0] === "number" && typeof v[1] === "number" && typeof v[2] === "number" && typeof v[3] === "number" && typeof v[4] === "number");
 	}
 
 	protected displayCommittedValue(): void {
 		let uiValue = this.getCommittedValue();
 		if (uiValue) {
-			let newMoment: Moment = moment([uiValue[0], uiValue[1] - 1, uiValue[2], uiValue[3], uiValue[4], uiValue[5] || 0, uiValue[6] || 0]);
-			this.trivialDateTimeField.setValue(newMoment as any);
+			this.trivialDateTimeField.setValue(UiLocalDateTimeField.toDateTime(uiValue));
 		} else {
 			this.trivialDateTimeField.setValue(null);
 		}
 	}
 
-	public getTransientValue(): LocalDateTime {
+	private static toDateTime(uiValue: LocalDateTimeArray): DateTime {
+		return DateTime.fromObject({
+			year: uiValue[0],
+			month: uiValue[1],
+			day: uiValue[2],
+			hour: uiValue[3],
+			minute: uiValue[4],
+			second: uiValue[5] || 0,
+			millisecond: uiValue[6] || 0,
+			zone: "UTC"
+		});
+	}
+
+	public getTransientValue(): LocalDateTimeArray {
 		let value = this.trivialDateTimeField.getValue();
 		if (value) {
-			return [value.year, value.month, value.day, value.hour, value.minute, 0, 0];
+			return [value.year || 0, value.month || 0, value.day || 0, value.hour || 0, value.minute || 0, 0, 0];
 		} else {
 			return null;
 		}
 	}
 
-	public getReadOnlyHtml(value: LocalDateTime, availableWidth: number): string {
+	public getReadOnlyHtml(value: LocalDateTimeArray, availableWidth: number): string {
 		if (value != null) {
-			// console.log(value[0], value[1], value[2]);
 			return `<div class="static-readonly-UiDateTimeField">`
-				+ Mustache.render(UiInstantDateField.comboBoxTemplate, UiInstantDateField.createDateComboBoxEntryFromLocalValues(value[0], value[1], value[2], this._config.dateFormat || this._context.config.dateFormat))
-				+ Mustache.render(AbstractUiTimeField.comboBoxTemplate, AbstractUiTimeField.createTimeComboBoxEntry(value[3], value[4], this._config.timeFormat || this._context.config.timeFormat))
+				+ this.dateRenderer(UiLocalDateTimeField.toDateTime(value))
+				+ this.timeRenderer(UiLocalDateTimeField.toDateTime(value))
 				+ '</div>';
 		} else {
 			return "";
 		}
 	}
 
-	getDefaultValue(): LocalDateTime {
+	getDefaultValue(): LocalDateTimeArray {
 		return null;
 	}
 
-	public valuesChanged(v1: LocalDateTime, v2: LocalDateTime): boolean {
+	public valuesChanged(v1: LocalDateTimeArray, v2: LocalDateTimeArray): boolean {
 		return !arraysEqual(v1, v2);
 	}
 
diff --git a/teamapps-client/ts/modules/formfield/datetime/UiLocalTimeField.ts b/teamapps-client/ts/modules/formfield/datetime/UiLocalTimeField.ts
index 83588c166..4cd279b51 100644
--- a/teamapps-client/ts/modules/formfield/datetime/UiLocalTimeField.ts
+++ b/teamapps-client/ts/modules/formfield/datetime/UiLocalTimeField.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,12 +17,17 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-import * as Mustache from "mustache";
-import {UiLocalTimeFieldConfig, UiLocalTimeFieldCommandHandler, UiLocalTimeFieldEventSource} from "../../../generated/UiLocalTimeFieldConfig";
+import {
+	UiLocalTimeFieldCommandHandler,
+	UiLocalTimeFieldConfig,
+	UiLocalTimeFieldEventSource
+} from "../../../generated/UiLocalTimeFieldConfig";
 import {TeamAppsUiContext} from "../../TeamAppsUiContext";
 import {TeamAppsUiComponentRegistry} from "../../TeamAppsUiComponentRegistry";
 import {AbstractUiTimeField} from "./AbstractUiTimeField";
 import {arraysEqual} from "../../Common";
+import {LocalDateTime} from "../../datetime/LocalDateTime";
+import {createTimeRenderer} from "./datetime-rendering";
 
 type LocalTime = [number, number, number, number];
 
@@ -30,7 +35,7 @@ export class UiLocalTimeField extends AbstractUiTimeField<UiLocalTimeFieldConfig
 
 	protected initialize(config: UiLocalTimeFieldConfig, context: TeamAppsUiContext) {
 		super.initialize(config, context);
-		this.getMainInnerDomElement().addClass("UiLocalTimeField");
+		this.getMainInnerDomElement().classList.add("UiLocalTimeField");
 	}
 
 	isValidData(v: LocalTime): boolean {
@@ -40,14 +45,14 @@ export class UiLocalTimeField extends AbstractUiTimeField<UiLocalTimeFieldConfig
 	protected displayCommittedValue(): void {
 		let uiValue = this.getCommittedValue();
 		if (uiValue) {
-			this.trivialComboBox.setSelectedEntry(UiLocalTimeField.createTimeComboBoxEntry(uiValue[0], uiValue[1], this.getTimeFormat()), true);
+			this.trivialComboBox.setValue(UiLocalTimeField.localTimeToLocalDateTime(uiValue));
 		} else {
-			this.trivialComboBox.setSelectedEntry(null, true);
+			this.trivialComboBox.setValue(null);
 		}
 	}
 
 	public getTransientValue(): LocalTime {
-		let selectedEntry = this.trivialComboBox.getSelectedEntry();
+		let selectedEntry = this.trivialComboBox.getValue();
 		if (selectedEntry) {
 			return [selectedEntry.hour, selectedEntry.minute, 0, 0];
 		} else {
@@ -56,8 +61,8 @@ export class UiLocalTimeField extends AbstractUiTimeField<UiLocalTimeFieldConfig
 	}
 
 	public getReadOnlyHtml(value: LocalTime, availableWidth: number): string {
-		if (value != null && value != null) {
-			return `<div class="static-readonly-UiLocalTimeField">` + Mustache.render(UiLocalTimeField.comboBoxTemplate, UiLocalTimeField.createTimeComboBoxEntry(value[0], value[1], this._config.timeFormat || this._context.config.timeFormat)) + '</div>';
+		if (value != null) {
+			return this.timeRenderer(UiLocalTimeField.localTimeToLocalDateTime(value));
 		} else {
 			return "";
 		}
@@ -66,6 +71,19 @@ export class UiLocalTimeField extends AbstractUiTimeField<UiLocalTimeFieldConfig
 	public valuesChanged(v1: LocalTime, v2: LocalTime): boolean {
 		return !arraysEqual(v1, v2);
 	}
+
+	private static localTimeToLocalDateTime(uiValue: [number, number, number, number]) {
+		return LocalDateTime.fromObject({hour: uiValue[0], minute: uiValue[1], second: uiValue[2], millisecond: uiValue[3]});
+	}
+
+	protected localDateTimeToString(entry: LocalDateTime): string {
+		return entry.setLocale(this._config.locale).toLocaleString(this._config.timeFormat);
+	}
+
+	protected createTimeRenderer(): (time: LocalDateTime) => string {
+		let timeRenderer = createTimeRenderer(this._config.locale, this._config.timeFormat, this._config.clockIconEnabled, "static-readonly-UiTimeField");
+		return entry => timeRenderer(entry?.toUTC());
+	}
 }
 
 TeamAppsUiComponentRegistry.registerFieldClass("UiLocalTimeField", UiLocalTimeField);
diff --git a/teamapps-client/ts/modules/formfield/datetime/datetime-rendering.ts b/teamapps-client/ts/modules/formfield/datetime/datetime-rendering.ts
new file mode 100644
index 000000000..6a79d5c63
--- /dev/null
+++ b/teamapps-client/ts/modules/formfield/datetime/datetime-rendering.ts
@@ -0,0 +1,161 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+import {DateTime} from "luxon";
+import DateTimeFormatOptions = Intl.DateTimeFormatOptions;
+import moment from "moment-timezone";
+
+export function createDateIconRenderer(locale: string): (time: DateTime) => string {
+	const weekDayString = (dateTime: DateTime) => {
+		let s = dateTime != null ? dateTime.setLocale(locale).toFormat("ccc") : "";
+		return s.length > 2 ? s.substr(0, 2) : s;
+	}
+	return dateTime => {
+		return `<svg viewBox="0 0 540 540" width="22" height="22" class="calendar-icon">
+					<defs>
+						<linearGradient id="Gradient1" x1="0" x2="0" y1="0" y2="1">
+							<stop class="calendar-symbol-ring-gradient-stop1" offset="0%"></stop>
+							<stop class="calendar-symbol-ring-gradient-stop2" offset="50%"></stop>
+							<stop class="calendar-symbol-ring-gradient-stop3" offset="100%"></stop>
+						</linearGradient>
+					</defs>        
+					<g id="layer1">
+						<rect class="calendar-symbol-page-background" x="90" y="90" width="360" height="400" ry="3.8"></rect>
+						<rect class="calendar-symbol-color" x="90" y="90" width="360" height="85" ry="3.5"></rect>
+						<rect class="calendar-symbol-page" x="90" y="90" width="360" height="395" ry="3.8"></rect>
+						<rect class="calendar-symbol-ring" fill="url('#Gradient2')" x="140" y="30" width="40" height="120" ry="30.8"></rect>
+						<rect class="calendar-symbol-ring" fill="url('#Gradient2')" x="250" y="30" width="40" height="120" ry="30.8"></rect>
+						<rect class="calendar-symbol-ring" fill="url('#Gradient2')" x="360" y="30" width="40" height="120" ry="30.8"></rect>
+						<text class="calendar-symbol-date" x="270" y="415" text-anchor="middle">${weekDayString(dateTime)}</text>
+					</g>
+				</svg>`;
+	}
+}
+
+export function createDateRenderer(locale: string, dateFormat: DateTimeFormatOptions, withIcon: boolean, additionalClass?: string): (time: DateTime) => string {
+	let dateIconRenderer = createDateIconRenderer(locale);
+	return (dateTime: DateTime) => {
+		if (dateTime == null) {
+			return "";
+		}
+		let dateTimeWithLocale = dateTime.setLocale(locale);
+		return `<div class="tr-template-icon-single-line ${additionalClass ?? ''}">
+					${withIcon ? dateIconRenderer(dateTime) : ''}
+					<div class="content-wrapper tr-editor-area">${dateTimeWithLocale.toLocaleString(dateFormat)}</div>
+				</div>`;
+	};
+}
+
+export function createClockIconRenderer(): (time: DateTime) => string {
+	const hourHandAngle = (time: DateTime) => time != null ? ((time.hour % 12) + time.minute / 60) * 30 : 0;
+	const minuteHandAngle = (time: DateTime) => time != null ? time.minute * 6 : 0;
+	const isNight = (time: DateTime) => time != null ? time.hour < 6 || time.hour >= 20 : false;
+	return (dateTime: DateTime) => {
+		return `<svg class="clock-icon night-${isNight(dateTime)}" viewBox="0 0 110 110" width="22" height="22"> 
+					<circle class="clockcircle" cx="55" cy="55" r="45"></circle>
+					<g class="hands">
+						<line class="hourhand" x1="55" y1="55" x2="55" y2="35" transform="rotate(${hourHandAngle(dateTime)},55,55)"></line>
+						<line class="minutehand" x1="55" y1="55" x2="55" y2="22" transform="rotate(${minuteHandAngle(dateTime)},55,55)"></line>
+					</g> 
+				</svg>`
+	}
+}
+
+export function createTimeRenderer(locale: string, timeFormat: DateTimeFormatOptions, withIcon: boolean, additionalClass?: string): (time: DateTime) => string {
+	let clockIconRenderer = createClockIconRenderer();
+	return (dateTime: DateTime) => {
+		if (dateTime == null) {
+			return "";
+		}
+		return `<div class="tr-template-icon-single-line ${additionalClass ?? ''}">
+					${withIcon ? clockIconRenderer(dateTime) : ''}
+					<div class="content-wrapper tr-editor-area">${dateTime.setLocale(locale).toLocaleString(timeFormat)}</div>
+				</div>`;
+	};
+}
+
+// ==== LEGACY ====
+
+export var dateTemplate = `<div class="tr-template-icon-single-line">
+    <svg viewBox="0 0 540 540" width="22" height="22" class="calendar-icon">
+        <defs>
+            <linearGradient id="Gradient1" x1="0" x2="0" y1="0" y2="1">
+                <stop class="calendar-symbol-ring-gradient-stop1" offset="0%"></stop>
+                <stop class="calendar-symbol-ring-gradient-stop2" offset="50%"></stop>
+                <stop class="calendar-symbol-ring-gradient-stop3" offset="100%"></stop>
+            </linearGradient>
+        </defs>        
+        <g id="layer1">
+            <rect class="calendar-symbol-page-background" x="90" y="90" width="360" height="400" ry="3.8"></rect>
+            <rect class="calendar-symbol-color" x="90" y="90" width="360" height="85" ry="3.5"></rect>
+            <rect class="calendar-symbol-page" x="90" y="90" width="360" height="395" ry="3.8"></rect>
+            <rect class="calendar-symbol-ring" fill="url('#Gradient2')" x="140" y="30" width="40" height="120" ry="30.8"></rect>
+            <rect class="calendar-symbol-ring" fill="url('#Gradient2')" x="250" y="30" width="40" height="120" ry="30.8"></rect>
+            <rect class="calendar-symbol-ring" fill="url('#Gradient2')" x="360" y="30" width="40" height="120" ry="30.8"></rect>
+            <text class="calendar-symbol-date" x="270" y="415" text-anchor="middle">{{weekDay}}</text>
+        </g>
+    </svg>
+    <div class="content-wrapper tr-editor-area">{{displayString}}</div>
+</div>`;
+
+export var timeTemplate = '<div class="tr-template-icon-single-line">' +
+	'<svg class="clock-icon night-{{isNight}}" viewBox="0 0 110 110" width="22" height="22"> ' +
+	'<circle class="clockcircle" cx="55" cy="55" r="45"></circle>' +
+	'<g class="hands">' +
+	' <line class="hourhand" x1="55" y1="55" x2="55" y2="35" transform="rotate({{hourAngle}},55,55)"></line> ' +
+	' <line class="minutehand" x1="55" y1="55" x2="55" y2="22" transform="rotate({{minuteAngle}},55,55)"></line>' +
+	'</g> ' +
+	'</svg>' +
+	'  <div class="content-wrapper tr-editor-area">{{displayString}}</div>' +
+	'</div>';
+
+
+export function createTimseComboBoxEntry(h: number, m: number, locale: string, timeFormat: DateTimeFormatOptions) {
+	return {
+		hour: h,
+		minute: m,
+		hourString: pad(h, 2),
+		minuteString: pad(m, 2),
+		displayString: DateTime.fromObject({hour: h, minute: m}).setLocale(locale).toLocaleString(timeFormat),
+		hourAngle: ((h % 12) + m / 60) * 30,
+		minuteAngle: m * 6,
+		isNight: h < 6 || h >= 20
+	};
+}
+
+export function createTimeComboBoxEntryFromMoment(mom: moment.Moment, timeFormat: string) {
+	return {
+		hour: mom.hour(),
+		minute: mom.minute(),
+		hourString: pad(mom.hour(), 2),
+		minuteString: pad(mom.minute(), 2),
+		displayString: mom.format(timeFormat),
+		hourAngle: ((mom.hour() % 12) + mom.minute() / 60) * 30,
+		minuteAngle: mom.minute() * 6,
+		isNight: mom.hour() < 6 || mom.hour() >= 20
+	};
+}
+
+function pad(num: number, size: number) {
+	let s = num + "";
+	while (s.length < size) s = "0" + s;
+	return s;
+}
+
+
diff --git a/teamapps-client/ts/modules/formfield/UiFileField.ts b/teamapps-client/ts/modules/formfield/file/UiFileField.ts
similarity index 55%
rename from teamapps-client/ts/modules/formfield/UiFileField.ts
rename to teamapps-client/ts/modules/formfield/file/UiFileField.ts
index 2956e0900..7965e4a7e 100644
--- a/teamapps-client/ts/modules/formfield/UiFileField.ts
+++ b/teamapps-client/ts/modules/formfield/file/UiFileField.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,12 +17,11 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-import * as $ from "jquery";
-import {UiField} from "./UiField";
-import {UiFileFieldDisplayType} from "../../generated/UiFileFieldDisplayType";
-import {UiFieldEditingMode} from "../../generated/UiFieldEditingMode";
-import {TeamAppsUiContext} from "../TeamAppsUiContext";
-import {generateUUID, humanReadableFileSize, Renderer} from "../Common";
+import {UiField} from "../UiField";
+import {UiFileFieldDisplayType} from "../../../generated/UiFileFieldDisplayType";
+import {UiFieldEditingMode} from "../../../generated/UiFieldEditingMode";
+import {TeamAppsUiContext} from "../../TeamAppsUiContext";
+import {generateUUID, humanReadableFileSize, parseHtml, prependChild, removeClassesByFunction, Renderer} from "../../Common";
 import {
 	UiFileField_FileItemClickedEvent,
 	UiFileField_FileItemRemoveButtonClickedEvent,
@@ -34,35 +33,35 @@ import {
 	UiFileFieldCommandHandler,
 	UiFileFieldConfig,
 	UiFileFieldEventSource
-} from "../../generated/UiFileFieldConfig";
-import {TeamAppsEvent} from "../util/TeamAppsEvent";
-import {TeamAppsUiComponentRegistry} from "../TeamAppsUiComponentRegistry";
-import {UiTemplateConfig} from "../../generated/UiTemplateConfig";
-import {StaticIcons} from "../util/StaticIcons";
-import {ProgressIndicator} from "../micro-components/ProgressIndicator";
-import {ProgressCircle} from "../micro-components/ProgressCircle";
-import {ProgressBar} from "../micro-components/ProgressBar";
+} from "../../../generated/UiFileFieldConfig";
+import {TeamAppsEvent} from "../../util/TeamAppsEvent";
+import {TeamAppsUiComponentRegistry} from "../../TeamAppsUiComponentRegistry";
+import {UiTemplateConfig} from "../../../generated/UiTemplateConfig";
+import {StaticIcons} from "../../util/StaticIcons";
+import {ProgressIndicator} from "../../micro-components/ProgressIndicator";
+import {ProgressCircle} from "../../micro-components/ProgressCircle";
+import {ProgressBar} from "../../micro-components/ProgressBar";
 import * as log from "loglevel";
 import {Logger} from "loglevel";
-import {keyCodes} from "trivial-components";
-import {EventFactory} from "../../generated/EventFactory";
-import {UiIdentifiableClientRecordConfig} from "../../generated/UiIdentifiableClientRecordConfig";
-import {FileUploader} from "../util/FileUploader";
+import {keyCodes} from "../../trivial-components/TrivialCore";
+import {UiIdentifiableClientRecordConfig} from "../../../generated/UiIdentifiableClientRecordConfig";
+import {FileUploader} from "../../util/FileUploader";
+import {executeWhenFirstDisplayed} from "../../util/ExecuteWhenFirstDisplayed";
 
 export class UiFileField extends UiField<UiFileFieldConfig, UiIdentifiableClientRecordConfig[]> implements UiFileFieldEventSource, UiFileFieldCommandHandler {
 
-	public readonly onFileItemClicked: TeamAppsEvent<UiFileField_FileItemClickedEvent> = new TeamAppsEvent(this);
-	public readonly onFileItemRemoveButtonClicked: TeamAppsEvent<UiFileField_FileItemRemoveButtonClickedEvent> = new TeamAppsEvent(this);
-	public readonly onUploadCanceled: TeamAppsEvent<UiFileField_UploadCanceledEvent> = new TeamAppsEvent(this);
-	public readonly onUploadFailed: TeamAppsEvent<UiFileField_UploadFailedEvent> = new TeamAppsEvent(this);
-	public readonly onUploadStarted: TeamAppsEvent<UiFileField_UploadStartedEvent> = new TeamAppsEvent(this);
-	public readonly onUploadSuccessful: TeamAppsEvent<UiFileField_UploadSuccessfulEvent> = new TeamAppsEvent(this);
-	public readonly onUploadTooLarge: TeamAppsEvent<UiFileField_UploadTooLargeEvent> = new TeamAppsEvent(this);
-
-	private $wrapper: JQuery;
-	private $uploadButton: JQuery;
-	private $fileInput: JQuery;
-	private $uploadButtonTemplate: JQuery;
+	public readonly onFileItemClicked: TeamAppsEvent<UiFileField_FileItemClickedEvent> = new TeamAppsEvent();
+	public readonly onFileItemRemoveButtonClicked: TeamAppsEvent<UiFileField_FileItemRemoveButtonClickedEvent> = new TeamAppsEvent();
+	public readonly onUploadCanceled: TeamAppsEvent<UiFileField_UploadCanceledEvent> = new TeamAppsEvent();
+	public readonly onUploadFailed: TeamAppsEvent<UiFileField_UploadFailedEvent> = new TeamAppsEvent();
+	public readonly onUploadStarted: TeamAppsEvent<UiFileField_UploadStartedEvent> = new TeamAppsEvent();
+	public readonly onUploadSuccessful: TeamAppsEvent<UiFileField_UploadSuccessfulEvent> = new TeamAppsEvent();
+	public readonly onUploadTooLarge: TeamAppsEvent<UiFileField_UploadTooLargeEvent> = new TeamAppsEvent();
+
+	private $wrapper: HTMLElement;
+	private $uploadButton: HTMLElement;
+	private $fileInput: HTMLInputElement;
+	private $uploadButtonTemplate: HTMLElement;
 	private fileItems: UploadItem[];
 	private itemRenderer: Renderer;
 
@@ -72,56 +71,55 @@ export class UiFileField extends UiField<UiFileFieldConfig, UiIdentifiableClient
 	private uploadButtonData: any;
 	private uploadButtonTemplate: UiTemplateConfig;
 	private uploadUrl: string;
-	private $fileList: JQuery;
+	private $fileList: HTMLElement;
 
 	protected initialize(config: UiFileFieldConfig, context: TeamAppsUiContext) {
 		this.fileItems = [];
 		let uuid = "ui-file-field" + generateUUID();
-		this.$wrapper = $(`<div class="UiFileField drop-zone" id="${uuid}">
+		this.$wrapper = parseHtml(`<div class="UiFileField drop-zone" id="${uuid}">
         <div class="list"></div>
         <div class="upload-button-wrapper field-border field-border-glow field-background" tabindex="0">
             <div class="upload-button-template"></div>
-            <input class="file-input" type="file" multiple tabindex="-1">
+            <input class="file-input" type="file" multiple tabindex="-1"></input>
         </div>
 </div>`);
 
-		this.$wrapper
-			.on("dragover", (e) => {
-				this.$wrapper.addClass("drop-zone-active");
-				// preventDefault() is important as it indicates that the drop is possible!!! see https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operations#droptargets
-				e.preventDefault();
-			})
-			.on("dragleave", (e) => {
-				this.$wrapper.removeClass("drop-zone-active");
-				e.preventDefault();
-			})
-			.on("dragend", (e) => {
-				this.$wrapper.removeClass("drop-zone-active");
-				e.preventDefault();
-			});
-		this.$wrapper[0].ondrop = (e) => { // I don't know why I cannot just register this the same way as the other handlers...
+		this.$wrapper.addEventListener("dragover", (e) => {
+			this.$wrapper.classList.add("drop-zone-active");
+			// preventDefault() is important as it indicates that the drop is possible!!! see https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operations#droptargets
+			e.preventDefault();
+		});
+		this.$wrapper.addEventListener("dragleave", (e) => {
+			this.$wrapper.classList.remove("drop-zone-active");
+			e.preventDefault();
+		});
+		this.$wrapper.addEventListener("dragend", (e) => {
+			this.$wrapper.classList.remove("drop-zone-active");
+			e.preventDefault();
+		});
+		this.$wrapper.ondrop = (e) => { // I don't know why I cannot just register this the same way as the other handlers...
 			e.stopPropagation();
 			e.preventDefault();
-			this.$wrapper.removeClass("drop-zone-active");
+			this.$wrapper.classList.remove("drop-zone-active");
 			const files = e.dataTransfer.files;
 			this.handleFiles(files);
 		};
 
-		this.$uploadButtonTemplate = this.$wrapper.find('.upload-button-template');
-		this.$uploadButton = this.$wrapper.find('.upload-button-wrapper')
-			.keydown(e => {
-				if (e.keyCode === keyCodes.enter || e.keyCode === keyCodes.space) {
-					this.$fileInput.click();
-					return false; // no scrolling when space is pressed!
-				}
-			});
-		this.$fileInput = this.$wrapper.find('.file-input');
-		this.$fileInput.change(() => {
-			const files = (<HTMLInputElement> this.$fileInput[0]).files;
+		this.$uploadButtonTemplate = this.$wrapper.querySelector<HTMLElement>(':scope .upload-button-template');
+		this.$uploadButton = this.$wrapper.querySelector<HTMLElement>(':scope .upload-button-wrapper');
+		this.$uploadButton.addEventListener('keydown', e => {
+			if (e.keyCode === keyCodes.enter || e.keyCode === keyCodes.space) {
+				this.$fileInput.click();
+				return false; // no scrolling when space is pressed!
+			}
+		});
+		this.$fileInput = this.$wrapper.querySelector<HTMLInputElement>(':scope .file-input');
+		this.$fileInput.addEventListener('change', () => {
+			const files = (<HTMLInputElement>this.$fileInput).files;
 			this.handleFiles(files);
 		});
 
-		this.$fileList = this.$wrapper.find('.list');
+		this.$fileList = this.$wrapper.querySelector<HTMLElement>(':scope .list');
 
 		this.setItemTemplate(config.itemTemplate);
 		this.setMaxBytesPerFile(config.maxBytesPerFile);
@@ -131,6 +129,7 @@ export class UiFileField extends UiField<UiFileFieldConfig, UiIdentifiableClient
 		this.setUploadUrl(config.uploadUrl);
 		this.setDisplayType(config.displayType);
 		this.setMaxFiles(config.maxFiles);
+		this.setAcceptedFileTypes(config.acceptedFileTypes);
 	}
 
 	isValidData(v: any[]): boolean {
@@ -144,8 +143,8 @@ export class UiFileField extends UiField<UiFileFieldConfig, UiIdentifiableClient
 
 	setDisplayType(displayType: UiFileFieldDisplayType): void {
 		this.displayType = displayType;
-		this.$wrapper.toggleClass("float-style-vertical-list", displayType === UiFileFieldDisplayType.LIST);
-		this.$wrapper.toggleClass("float-style-horizontal", displayType === UiFileFieldDisplayType.FLOATING);
+		this.$wrapper.classList.toggle("float-style-vertical-list", displayType === UiFileFieldDisplayType.LIST);
+		this.$wrapper.classList.toggle("float-style-horizontal", displayType === UiFileFieldDisplayType.FLOATING);
 	}
 
 	setMaxFiles(maxFiles: number): void {
@@ -153,24 +152,32 @@ export class UiFileField extends UiField<UiFileFieldConfig, UiIdentifiableClient
 		this.updateVisibilities();
 	}
 
+	setAcceptedFileTypes(acceptedFileTypes: string[]) {
+		this.$fileInput.accept = acceptedFileTypes != null ? (acceptedFileTypes.join(',')) : null;
+	}
+
 	public setMaxBytesPerFile(maxBytesPerFile: number): void {
 		this.maxBytesPerFile = maxBytesPerFile;
 	}
 
 	public setShowEntriesAsButtonsOnHover(showEntriesAsButtonsOnHover: boolean): void {
-		this.$wrapper.toggleClass("show-entries-as-buttons-on-hover", showEntriesAsButtonsOnHover);
+		this.$wrapper.classList.toggle("show-entries-as-buttons-on-hover", showEntriesAsButtonsOnHover);
 	}
 
 	public setUploadButtonData(uploadButtonData: any): void {
 		this.uploadButtonData = uploadButtonData;
-		this.$uploadButtonTemplate[0].innerHTML = '';
-		this.$uploadButtonTemplate.append($(this._context.templateRegistry.createTemplateRenderer(this.uploadButtonTemplate).render(this.uploadButtonData)));
+		this.$uploadButtonTemplate.innerHTML = '';
+		if (this.uploadButtonTemplate && this.uploadButtonData) {
+			this.$uploadButtonTemplate.appendChild(parseHtml(this._context.templateRegistry.createTemplateRenderer(this.uploadButtonTemplate).render(this.uploadButtonData)));
+		}
 	}
 
 	public setUploadButtonTemplate(uploadButtonTemplate: UiTemplateConfig): void {
 		this.uploadButtonTemplate = uploadButtonTemplate;
-		this.$uploadButtonTemplate[0].innerHTML = '';
-		this.$uploadButtonTemplate.append($(this._context.templateRegistry.createTemplateRenderer(this.uploadButtonTemplate).render(this.uploadButtonData)));
+		this.$uploadButtonTemplate.innerHTML = '';
+		if (this.uploadButtonTemplate && this.uploadButtonData) {
+			this.$uploadButtonTemplate.appendChild(parseHtml(this._context.templateRegistry.createTemplateRenderer(this.uploadButtonTemplate).render(this.uploadButtonData)));
+		}
 	}
 
 	public setUploadUrl(uploadUrl: string): void {
@@ -187,10 +194,16 @@ export class UiFileField extends UiField<UiFileFieldConfig, UiIdentifiableClient
 		for (let i = 0; i < numberOfFilesToAdd; i++) {
 			const file = files[i];
 			let fileItem = this.createFileItem();
-			fileItem.getMainDomElement().appendTo(this.$fileList);
+			this.$fileList.appendChild(fileItem.getMainDomElement());
 			this.fileItems.push(fileItem);
 			fileItem.upload(file);
-			this.onUploadStarted.fire(EventFactory.createUiFileField_UploadStartedEvent(this.getId(), fileItem.uuid, file.name, file.type, file.size, this.numberOfUploadingFileItems));
+			this.onUploadStarted.fire({
+				fileItemUuid: fileItem.uuid,
+				fileName: file.name,
+				mimeType: file.type,
+				sizeInBytes: file.size,
+				incompleteUploadsCount: this.numberOfUploadingFileItems
+			});
 		}
 
 		this.updateVisibilities();
@@ -206,19 +219,20 @@ export class UiFileField extends UiField<UiFileFieldConfig, UiIdentifiableClient
 	}
 
 	private resetFileInput() {
-		this.$fileInput.val('').replaceWith(this.$fileInput = this.$fileInput.clone(true));
+		this.$fileInput.value = '';
 	}
 
 	private updateVisibilities() {
-		this.$uploadButton.toggle(this.isEditable() && this.numberOfNonErrorFileItems < this.maxFiles);
+		this.$uploadButton.classList.toggle("hidden", !(this.isEditable() && this.numberOfNonErrorFileItems < this.maxFiles));
 	}
 
-	public getMainInnerDomElement(): JQuery {
+	public getMainInnerDomElement(): HTMLElement {
 		return this.$wrapper;
 	}
 
-	public getFocusableElement(): JQuery {
-		return this.$uploadButton;
+	@executeWhenFirstDisplayed()
+	focus(): void {
+		this.$uploadButton.focus();
 	}
 
 	protected displayCommittedValue(): void {
@@ -238,7 +252,7 @@ export class UiFileField extends UiField<UiFileFieldConfig, UiIdentifiableClient
 			uiValue.slice().reverse().forEach(record => {
 				let fileItem = this.createFileItem();
 				fileItem.data = record;
-				fileItem.getMainDomElement().prependTo(this.$fileList);
+				prependChild(this.$fileList, fileItem.getMainDomElement());
 				this.fileItems.push(fileItem);
 			});
 		}
@@ -260,29 +274,27 @@ export class UiFileField extends UiField<UiFileFieldConfig, UiIdentifiableClient
 	}
 
 	private removeFileItem(itemToBeRemoved: UploadItem) {
-		itemToBeRemoved.getMainDomElement().detach();
+		itemToBeRemoved.getMainDomElement().remove();
 		this.fileItems = this.fileItems.filter(item => item !== itemToBeRemoved);
 	}
 
 	private createFileItem() {
-		let fileItem = new UploadItem(this.displayType === UiFileFieldDisplayType.FLOATING, this.maxBytesPerFile, this._config.fileTooLargeMessage, this._config.uploadErrorMessage, this.uploadUrl, this.itemRenderer, this.getId());
-		fileItem.onClick.addListener((eventObject, emitter) => {
-			this.onFileItemClicked.fire(EventFactory.createUiFileField_FileItemClickedEvent(this.getId(), (emitter as UploadItem).data.id));
+		let fileItem = new UploadItem(this.displayType === UiFileFieldDisplayType.FLOATING, this.maxBytesPerFile, this._config.fileTooLargeMessage, this._config.uploadErrorMessage, this.uploadUrl, this.itemRenderer, this.isEditable());
+		fileItem.onClick.addListener((eventObject) => {
+			this.onFileItemClicked.fire({
+				clientId: fileItem.data.id
+			});
 		});
-		fileItem.onDeleteButtonClick.addListener((eventObject, emitter) => {
-			let fileItem = emitter as UploadItem;
-			let data = (fileItem).data;
+		fileItem.onDeleteButtonClick.addListener((eventObject) => {
+			let data = fileItem.data;
 			if (data) {
-				this.onFileItemRemoveButtonClicked.fire(EventFactory.createUiFileField_FileItemRemoveButtonClickedEvent(this.getId(), data.id));
-			}
-			this.removeFileItem(fileItem);
-			this.updateVisibilities();
-			if (fileItem.state === FileItemState.DISPLAYING) {
-				this.commit();
+				this.onFileItemRemoveButtonClicked.fire({
+					clientId: data.id
+				});
 			}
+			this.removeItem(fileItem);
 		});
 		fileItem.onUploadTooLarge.addListener(subEvent => {
-			subEvent.incompleteUploadsCount = this.numberOfUploadingFileItems;
 			this.onUploadTooLarge.fire(subEvent);
 			this.updateVisibilities();
 		});
@@ -303,6 +315,14 @@ export class UiFileField extends UiField<UiFileFieldConfig, UiIdentifiableClient
 		return fileItem;
 	}
 
+	private removeItem(fileItem: UploadItem) {
+		this.removeFileItem(fileItem);
+		this.updateVisibilities();
+		if (fileItem.state === FileItemState.DISPLAYING) {
+			this.commit();
+		}
+	}
+
 	public getTransientValue(): UiIdentifiableClientRecordConfig[] {
 		return this.fileItems
 			.filter(fileItem => fileItem.state === FileItemState.DISPLAYING)
@@ -310,7 +330,8 @@ export class UiFileField extends UiField<UiFileFieldConfig, UiIdentifiableClient
 	}
 
 	protected onEditingModeChanged(editingMode: UiFieldEditingMode): void {
-		UiField.defaultOnEditingModeChangedImpl(this);
+		UiField.defaultOnEditingModeChangedImpl(this, () => this.$uploadButton);
+		this.fileItems.forEach(fi => fi.deletable = this.isEditable());
 		this.updateVisibilities();
 	}
 
@@ -321,7 +342,7 @@ export class UiFileField extends UiField<UiFileFieldConfig, UiIdentifiableClient
 		} else {
 			content = "";
 		}
-		return `<div class="static-readonly-UiFileField">${content}</div>`
+		return `<div class="static-readonly-UiFileField default-min-field-width">${content}</div>`
 	}
 
 	getDefaultValue(): UiIdentifiableClientRecordConfig[] {
@@ -331,6 +352,22 @@ export class UiFileField extends UiField<UiFileFieldConfig, UiIdentifiableClient
 	public valuesChanged(v1: UiIdentifiableClientRecordConfig[], c2: UiIdentifiableClientRecordConfig[]): boolean {
 		return true; // TODO pojos
 	}
+
+	public cancelAllUploads() {
+		console.log("cancelAllUploads()");
+		this.fileItems.forEach(fi => this.cancelUpload(fi.uuid));
+	}
+
+	public cancelUpload(uuid: string) {
+		console.log("Canceling upload for " + uuid);
+		let correspondingItem = uuid && this.fileItems.filter(fileItem => fileItem.uuid === uuid)[0];
+		if (correspondingItem) {
+			correspondingItem.cancelUpload(false);
+			this.removeItem(correspondingItem);
+		} else {
+			this.logger.warn("Could not cancel upload of non-existing file item");
+		}
+	}
 }
 
 enum FileItemState {
@@ -342,25 +379,25 @@ enum FileItemState {
 
 class UploadItem {
 	private static LOGGER: Logger = log.getLogger("UploadItem");
-	public readonly onDeleteButtonClick: TeamAppsEvent<void> = new TeamAppsEvent<void>(this);
-	public readonly onClick: TeamAppsEvent<void> = new TeamAppsEvent<void>(this);
-	public readonly onUploadCanceled: TeamAppsEvent<UiFileField_UploadCanceledEvent> = new TeamAppsEvent(this);
-	public readonly onUploadFailed: TeamAppsEvent<UiFileField_UploadFailedEvent> = new TeamAppsEvent(this);
-	public readonly onUploadSuccessful: TeamAppsEvent<UiFileField_UploadSuccessfulEvent> = new TeamAppsEvent(this);
-	public readonly onUploadTooLarge: TeamAppsEvent<UiFileField_UploadTooLargeEvent> = new TeamAppsEvent(this);
+	public readonly onDeleteButtonClick: TeamAppsEvent<void> = new TeamAppsEvent<void>();
+	public readonly onClick: TeamAppsEvent<void> = new TeamAppsEvent<void>();
+	public readonly onUploadCanceled: TeamAppsEvent<UiFileField_UploadCanceledEvent> = new TeamAppsEvent();
+	public readonly onUploadFailed: TeamAppsEvent<UiFileField_UploadFailedEvent> = new TeamAppsEvent();
+	public readonly onUploadSuccessful: TeamAppsEvent<UiFileField_UploadSuccessfulEvent> = new TeamAppsEvent();
+	public readonly onUploadTooLarge: TeamAppsEvent<UiFileField_UploadTooLargeEvent> = new TeamAppsEvent();
 
-	private $main: JQuery;
+	private $main: HTMLElement;
 
 	private _data: UiIdentifiableClientRecordConfig;
 	private _state: FileItemState | null;
-	private $fileInfo: JQuery;
-	private $progressIndicator: JQuery;
-	private $deleteButton: JQuery;
-	private $fileSize: JQuery;
-	private $fileName: JQuery;
+	private $fileInfo: HTMLElement;
+	private $progressIndicator: HTMLElement;
+	private $deleteButton: HTMLElement;
+	private $fileSize: HTMLElement;
+	private $fileName: HTMLElement;
 	public readonly uuid: string = generateUUID();
 	private progressIndicator: ProgressIndicator;
-	private $templateWrapper: JQuery;
+	private $templateWrapper: HTMLElement;
 
 	private uploadingFile: File;
 	private uploader: FileUploader;
@@ -372,29 +409,26 @@ class UploadItem {
 		private uploadErrorMessage: string,
 		private uploadUrl: string,
 		private renderer: Renderer,
-		private componentId: string
+		private _deletable: boolean
 	) {
-		this.$main = $(`<div class="file-item">
+		this.$main = parseHtml(`<div class="file-item ${this._deletable ? 'deletable' : ''}">
 			<div class="progress-indicator"></div>
 			<div class="file-info">
 				<div class="file-name"></div>
 				<div class="file-size"></div>
 			</div>
 			<div class="template-wrapper"></div>
-			<img class="delete-button img img-16" alt="delete" tabindex="0" src="${StaticIcons.CLOSE}"/>
+			<img class="delete-button img img-16" alt="delete" tabindex="0" src="${StaticIcons.CLOSE}"></img>
 		</div>`);
-		this.$fileInfo = this.$main.find(".file-info");
-		this.$fileName = this.$main.find(".file-name");
-		this.$fileSize = this.$main.find(".file-size");
-		this.$templateWrapper = this.$main.find(".template-wrapper");
-		this.$progressIndicator = this.$main.find(".progress-indicator");
-		this.$deleteButton = this.$main.find(".delete-button");
-		this.$main.click((e) => {
-			if (e.target === this.$deleteButton[0]) {
-				if (this.uploader) {
-					this.uploader.abort();
-					this.onUploadCanceled.fire(EventFactory.createUiFileField_UploadCanceledEvent(this.componentId, this.uuid, this.uploadingFile.name, this.uploadingFile.type, this.uploadingFile.size, null));
-				}
+		this.$fileInfo = this.$main.querySelector<HTMLElement>(":scope .file-info");
+		this.$fileName = this.$main.querySelector<HTMLElement>(":scope .file-name");
+		this.$fileSize = this.$main.querySelector<HTMLElement>(":scope .file-size");
+		this.$templateWrapper = this.$main.querySelector<HTMLElement>(":scope .template-wrapper");
+		this.$progressIndicator = this.$main.querySelector<HTMLElement>(":scope .progress-indicator");
+		this.$deleteButton = this.$main.querySelector<HTMLElement>(":scope .delete-button");
+		this.$main.addEventListener('click', (e) => {
+			if (e.target === this.$deleteButton) {
+				this.cancelUpload(true);
 				this.onDeleteButtonClick.fire(null);
 			} else {
 				this.onClick.fire(null)
@@ -404,18 +438,23 @@ class UploadItem {
 
 	public upload(file: File) {
 		this.uploadingFile = file;
-		this.$fileName.text(file.name);
-		this.$fileSize.text(humanReadableFileSize(file.size, true));
+		this.$fileName.textContent = file.name;
+		this.$fileSize.textContent = humanReadableFileSize(file.size, true);
 
 		this.progressIndicator = this.renderAsCircle ? new ProgressCircle(0, {
 			circleRadius: 16, circleStrokeWidth: 2
 		}) : new ProgressBar(0, {});
-		this.progressIndicator.getMainDomElement().appendTo(this.$progressIndicator);
+		this.$progressIndicator.appendChild(this.progressIndicator.getMainDomElement());
 
 		if (file.size > this.maxBytes) {
 			this.progressIndicator.setErrorMessage(this.fileTooLargeMessage);
 			this.setState(FileItemState.ERROR);
-			this.onUploadTooLarge.fire(EventFactory.createUiFileField_UploadTooLargeEvent(this.componentId, this.uuid, file.name, file.type, file.size));
+			this.onUploadTooLarge.fire({
+				fileItemUuid: this.uuid,
+				fileName: file.name,
+				mimeType: file.type,
+				sizeInBytes: file.size
+			});
 		} else {
 			this.setState(FileItemState.UPLOADING);
 
@@ -424,20 +463,47 @@ class UploadItem {
 			this.uploader.onProgress.addListener(progress => this.progressIndicator.setProgress(progress));
 			this.uploader.onSuccess.addListener(fileUuid => {
 				this.setState(FileItemState.SUCCESS);
-				this.onUploadSuccessful.fire(EventFactory.createUiFileField_UploadSuccessfulEvent(this.componentId, this.uuid, fileUuid, file.name, file.type, file.size, null));
+				this.onUploadSuccessful.fire({
+					fileItemUuid: this.uuid,
+					uploadedFileUuid: fileUuid,
+					fileName: file.name,
+					mimeType: file.type,
+					sizeInBytes: file.size,
+					incompleteUploadsCount: null
+				});
 			});
 			this.uploader.onError.addListener(() => {
 				this.setState(FileItemState.ERROR);
 				this.progressIndicator.setErrorMessage(this.uploadErrorMessage);
-				this.onUploadFailed.fire(EventFactory.createUiFileField_UploadFailedEvent(this.componentId, this.uuid, file.name, file.type, file.size, null));
+				this.onUploadFailed.fire({
+					fileItemUuid: this.uuid,
+					fileName: file.name,
+					mimeType: file.type,
+					sizeInBytes: file.size,
+					incompleteUploadsCount: null
+				});
 			});
 			this.uploader.onComplete.addListener(() => this.uploader = null)
 		}
 	}
 
+	public cancelUpload(fireEvent: boolean) {
+		if (this.uploader) {
+			this.uploader.abort();
+			this.onUploadCanceled.fire({
+				fileItemUuid: this.uuid,
+				fileName: this.uploadingFile.name,
+				mimeType: this.uploadingFile.type,
+				sizeInBytes: this.uploadingFile.size,
+				incompleteUploadsCount: null
+			});
+			this._state = FileItemState.ERROR;
+		}
+	}
+
 	public set data(data: UiIdentifiableClientRecordConfig) {
 		this._data = data;
-		this.$templateWrapper.html(this.renderer.render(data.values));
+		this.$templateWrapper.innerHTML = this.renderer.render(data.values);
 		this.setState(FileItemState.DISPLAYING);
 	}
 
@@ -452,10 +518,8 @@ class UploadItem {
 
 	private setState(state: FileItemState) {
 		this._state = state;
-		this.$main.removeClass(function (index, classNames) {
-			return (classNames.match(/(^|\s)state-\S+/g) || []).join(' ');
-		});
-		this.$main.addClass("state-" + state);
+		removeClassesByFunction(this.$main.classList, className => className.startsWith("state-"));
+		this.$main.classList.add("state-" + state);
 	}
 
 	public get state() {
@@ -466,6 +530,11 @@ class UploadItem {
 		return this.$main;
 	}
 
+	public set deletable(deletable: boolean) {
+		this._deletable = deletable;
+		this.$main.classList.toggle("deletable", deletable)
+	}
+
 }
 
 TeamAppsUiComponentRegistry.registerFieldClass("UiFileField", UiFileField);
diff --git a/teamapps-client/ts/modules/formfield/file/UiFileItem.ts b/teamapps-client/ts/modules/formfield/file/UiFileItem.ts
new file mode 100644
index 000000000..f7eff3019
--- /dev/null
+++ b/teamapps-client/ts/modules/formfield/file/UiFileItem.ts
@@ -0,0 +1,217 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+import * as log from "loglevel";
+import {Logger} from "loglevel";
+import {TeamAppsEvent} from "../../util/TeamAppsEvent";
+import {ProgressIndicator} from "../../micro-components/ProgressIndicator";
+import {FileUploader} from "../../util/FileUploader";
+import {UiFileFieldDisplayType} from "../../../generated/UiFileFieldDisplayType";
+import {UiFileItemConfig} from "../../../generated/UiFileItemConfig";
+import {TeamAppsUiContext} from "../../TeamAppsUiContext";
+import {humanReadableFileSize, parseHtml, removeClassesByFunction} from "../../Common";
+import {StaticIcons} from "../../util/StaticIcons";
+import {ProgressBar} from "../../micro-components/ProgressBar";
+import {ProgressCircle} from "../../micro-components/ProgressCircle";
+
+export class UiFileItem {
+	private static LOGGER: Logger = log.getLogger("UploadItem");
+	public readonly onClick: TeamAppsEvent<void> = new TeamAppsEvent<void>();
+	public readonly onDeleteButtonClick: TeamAppsEvent<void> = new TeamAppsEvent<void>();
+	public readonly onUploadCanceled: TeamAppsEvent<void> = new TeamAppsEvent();
+	public readonly onUploadFailed: TeamAppsEvent<void> = new TeamAppsEvent();
+	public readonly onUploadSuccessful: TeamAppsEvent<string> = new TeamAppsEvent();
+	public readonly onUploadTooLarge: TeamAppsEvent<void> = new TeamAppsEvent();
+
+	private $main: HTMLElement;
+	private $progressIndicator: HTMLElement;
+	private $deleteButton: HTMLElement;
+	private $fileIcon: HTMLElement;
+	private $fileName: HTMLElement;
+	private $fileDescription: HTMLElement;
+	private $fileSize: HTMLElement;
+
+	private progressIndicator: ProgressIndicator;
+	private uploader: FileUploader;
+
+	constructor(
+		private displayMode: UiFileFieldDisplayType,
+		private maxBytes: number,
+		private fileTooLargeMessage: string,
+		private uploadErrorMessage: string,
+		private uploadUrl: string,
+		private config: UiFileItemConfig,
+		public state: FileItemState,
+		private _deletable: boolean
+	) {
+		this.$main = parseHtml(`<a class="file-item ${this._deletable ? 'deletable' : ''}">
+			<div class="delete-button-wrapper">
+				<img class="delete-button img img-16" alt="delete" tabindex="0" src="${StaticIcons.CLOSE}"></img>
+			</div>
+			<div class="progress-indicator"></div>
+			<div class="file-icon img img-48"></div>
+			<div class="file-name"></div>
+			<div class="file-description"></div>
+			<div class="file-size"></div>
+		</a>`);
+		this.$fileIcon = this.$main.querySelector<HTMLElement>(":scope .file-icon");
+		this.$fileName = this.$main.querySelector<HTMLElement>(":scope .file-name");
+		this.$fileDescription = this.$main.querySelector<HTMLElement>(":scope .file-description");
+		this.$fileSize = this.$main.querySelector<HTMLElement>(":scope .file-size");
+		this.$progressIndicator = this.$main.querySelector<HTMLElement>(":scope .progress-indicator");
+		this.$deleteButton = this.$main.querySelector<HTMLElement>(":scope .delete-button");
+		this.$main.addEventListener('click', (e) => {
+			if (e.target === this.$deleteButton) {
+				if (this.uploader) {
+					this.uploader.abort();
+					this.onUploadCanceled.fire(null);
+				}
+				this.onDeleteButtonClick.fire(null);
+				e.preventDefault(); // do not download!
+				e.stopPropagation();
+			} else {
+				this.onClick.fire(null)
+			}
+		});
+		this.setDisplayMode(displayMode);
+		this.update(config);
+	}
+
+	public upload(file: File) {
+		this.config.fileName = file.name;
+		this.config.description = file.type;
+		this.config.size = file.size;
+		this.update(this.config);
+
+		this.progressIndicator = UiFileItem.createProgressIndicator(this.displayMode);
+		this.$progressIndicator.appendChild(this.progressIndicator.getMainDomElement());
+
+		if (file.size > this.maxBytes) {
+			this.progressIndicator.setErrorMessage(this.fileTooLargeMessage);
+			this.setState(FileItemState.FAILED);
+			this.onUploadTooLarge.fire(null);
+		} else {
+			this.setState(FileItemState.UPLOADING);
+
+			this.uploader = new FileUploader();
+			this.uploader.upload(file, this.uploadUrl);
+			this.uploader.onProgress.addListener(progress => this.progressIndicator.setProgress(progress));
+			this.uploader.onSuccess.addListener(fileUuid => {
+				this.setState(FileItemState.DONE);
+				this.onUploadSuccessful.fire(fileUuid);
+			});
+			this.uploader.onError.addListener(() => {
+				this.setState(FileItemState.FAILED);
+				this.progressIndicator.setErrorMessage(this.uploadErrorMessage);
+				this.onUploadFailed.fire(null);
+			});
+			this.uploader.onComplete.addListener(() => this.uploader = null)
+		}
+	}
+
+	private static createProgressIndicator(displayMode: UiFileFieldDisplayType) {
+		return displayMode == UiFileFieldDisplayType.FLOATING ? new ProgressCircle(0, {
+			circleRadius: 24, circleStrokeWidth: 3
+		}) : new ProgressBar(0, {});
+	}
+
+	public setDisplayMode(displayMode: UiFileFieldDisplayType) {
+		this.displayMode = displayMode;
+		if (this.progressIndicator != null) {
+			this.progressIndicator.getMainDomElement().remove();
+			this.progressIndicator = UiFileItem.createProgressIndicator(displayMode);
+			this.$progressIndicator.appendChild(this.progressIndicator.getMainDomElement());
+		}
+		this.$fileName.classList.toggle("line-clamp-2", displayMode == UiFileFieldDisplayType.FLOATING);
+		this.$fileIcon.classList.toggle("img-48", displayMode == UiFileFieldDisplayType.FLOATING);
+		this.$fileIcon.classList.toggle("img-32", displayMode == UiFileFieldDisplayType.LIST);
+	}
+
+	private setState(state: FileItemState) {
+		this.state = state;
+		removeClassesByFunction(this.$main.classList, className => className.startsWith("state-"));
+		this.$main.classList.add("state-" + FileItemState[state].toLowerCase());
+	}
+
+	public getMainDomElement() {
+		return this.$main;
+	}
+
+	public destroy() {
+		this.uploader && this.uploader.abort();
+		this.getMainDomElement().remove();
+	}
+
+	update(config: UiFileItemConfig) {
+		this.config = config;
+
+		if (config.thumbnail) {
+			this.$fileIcon.style.backgroundImage = `url('${config.thumbnail}')`;
+		} else {
+			this.$fileIcon.style.backgroundImage = `url('${config.icon}')`;
+		}
+		this.$fileName.textContent = config.fileName;
+		this.$fileDescription.textContent = config.description;
+		this.$fileSize.textContent = humanReadableFileSize(config.size);
+		this.$main.classList.toggle("no-link", config.linkUrl == null);
+		this.$main.classList.toggle("no-link", config.linkUrl == null);
+		this.$main.setAttribute("href", config.linkUrl);
+	}
+
+	public get uuid() {
+		return this.config.uuid
+	}
+
+	public get icon() {
+		return this.config.icon
+	}
+
+	public get thumbnail() {
+		return this.config.thumbnail
+	}
+
+	public get fileName() {
+		return this.config.fileName
+	}
+
+	public get description() {
+		return this.config.description
+	}
+
+	public get size() {
+		return this.config.size
+	}
+
+	public get linkUrl() {
+		return this.config.linkUrl
+	}
+
+	public set deletable(deletable: boolean) {
+		this._deletable = deletable;
+		this.$main.classList.toggle("deletable", deletable)
+	}
+}
+
+export enum FileItemState {
+	INITIATING,
+	TOO_LARGE,
+	UPLOADING,
+	FAILED,
+	DONE
+}
diff --git a/teamapps-client/ts/modules/formfield/file/UiPictureChooser.ts b/teamapps-client/ts/modules/formfield/file/UiPictureChooser.ts
new file mode 100644
index 000000000..e09c1d394
--- /dev/null
+++ b/teamapps-client/ts/modules/formfield/file/UiPictureChooser.ts
@@ -0,0 +1,291 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+
+import {UiField} from "../UiField";
+import {UiFieldEditingMode} from "../../../generated/UiFieldEditingMode";
+import {TeamAppsUiContext} from "../../TeamAppsUiContext";
+import {humanReadableFileSize, parseHtml} from "../../Common";
+import {TeamAppsEvent} from "../../util/TeamAppsEvent";
+import {TeamAppsUiComponentRegistry} from "../../TeamAppsUiComponentRegistry";
+import {keyCodes} from "../../trivial-components/TrivialCore";
+import {
+	UiPictureChooser_UploadCanceledEvent,
+	UiPictureChooser_UploadFailedEvent,
+	UiPictureChooser_UploadInitiatedByUserEvent,
+	UiPictureChooser_UploadStartedEvent,
+	UiPictureChooser_UploadSuccessfulEvent,
+	UiPictureChooser_UploadTooLargeEvent,
+	UiPictureChooserCommandHandler,
+	UiPictureChooserConfig,
+	UiPictureChooserEventSource
+} from "../../../generated/UiPictureChooserConfig";
+import {FileUploader} from "../../util/FileUploader";
+import {ProgressIndicator} from "../../micro-components/ProgressIndicator";
+import {ProgressCircle} from "../../micro-components/ProgressCircle";
+import {executeWhenFirstDisplayed} from "../../util/ExecuteWhenFirstDisplayed";
+
+/**
+ * @author Yann Massard (yamass@gmail.com)
+ */
+export class UiPictureChooser extends UiField<UiPictureChooserConfig, string> implements UiPictureChooserEventSource, UiPictureChooserCommandHandler {
+
+	public readonly onUploadCanceled: TeamAppsEvent<UiPictureChooser_UploadCanceledEvent> = new TeamAppsEvent();
+	public readonly onUploadFailed: TeamAppsEvent<UiPictureChooser_UploadFailedEvent> = new TeamAppsEvent();
+	public readonly onUploadInitiatedByUser: TeamAppsEvent<UiPictureChooser_UploadInitiatedByUserEvent> = new TeamAppsEvent();
+	public readonly onUploadStarted: TeamAppsEvent<UiPictureChooser_UploadStartedEvent> = new TeamAppsEvent();
+	public readonly onUploadSuccessful: TeamAppsEvent<UiPictureChooser_UploadSuccessfulEvent> = new TeamAppsEvent();
+	public readonly onUploadTooLarge: TeamAppsEvent<UiPictureChooser_UploadTooLargeEvent> = new TeamAppsEvent();
+
+	private $main: HTMLElement;
+	private $picture: HTMLElement;
+	private $uploadButton: HTMLElement;
+	private $fileInput: HTMLInputElement;
+	private $fileItemWrapper: HTMLElement;
+	private $progressWrapper: HTMLElement;
+	private $pictureWrapper: HTMLElement;
+	private $deleteButton: HTMLElement;
+
+	private maxFileSize: number;
+	private fileTooLargeMessage: string;
+	private uploadErrorMessage: string;
+	private uploadUrl: string;
+	private uploader: FileUploader;
+	private progressIndicator: ProgressIndicator;
+
+	protected initialize(config: UiPictureChooserConfig, context: TeamAppsUiContext): void {
+		this.$main = parseHtml(`<div class="UiPictureChooser drop-zone form-control field-border field-border-glow field-background">
+    <div class="picture-wrapper">
+    	<div class="picture hidden"></div>
+		<div class="progress-wrapper hidden"></div>
+		<input class="file-input" type="file" multiple tabindex="-1" accept="image/png,image/jpeg,image/bmp,image/gif"></input>
+		<div class="button upload-button icon img img-16" style="background-image: url('${config.browseButtonIcon}');"></div>
+		<div class="button delete-button icon img img-16" style="background-image: url('${config.deleteButtonIcon}');"></div>
+	</div>
+</div>`);
+
+		this.$main.addEventListener("dragover", (e) => {
+			this.$main.classList.add("drop-zone-active");
+			// preventDefault() is important as it indicates that the drop is possible!!! see https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operations#droptargets
+			e.preventDefault();
+		});
+		this.$main.addEventListener("dragleave", (e) => {
+			this.$main.classList.remove("drop-zone-active");
+			e.preventDefault();
+		});
+		this.$main.addEventListener("dragend", (e) => {
+			this.$main.classList.remove("drop-zone-active");
+			e.preventDefault();
+		});
+		this.$main.addEventListener("mousedown", (e) => {
+			this.focus();
+		});
+		this.$main.ondrop = (e) => { // I don't know why I cannot just register this the same way as the other handlers...
+			e.stopPropagation();
+			e.preventDefault();
+			this.$main.classList.remove("drop-zone-active");
+			const files = e.dataTransfer.files;
+			this.handleFiles(files);
+		};
+
+		this.$pictureWrapper = this.$main.querySelector(":scope .picture-wrapper");
+		this.$picture = this.$main.querySelector(":scope .picture");
+
+		this.$uploadButton = this.$main.querySelector<HTMLElement>(':scope .upload-button');
+		["click", "keypress"].forEach(eventName => this.$uploadButton.addEventListener(eventName, (e: MouseEvent & KeyboardEvent) => {
+			if (e.button == 0 || e.keyCode === keyCodes.enter || e.keyCode === keyCodes.space) {
+				this.$fileInput.click();
+				e.stopPropagation();
+				return false; // no scrolling when space is pressed!
+			}
+		}));
+		this.$main.addEventListener('click', e => {
+			if (this.isEditable() && this.getCommittedValue() == null) {
+				this.$fileInput.click();
+			}
+		});
+
+		this.$deleteButton = this.$main.querySelector(':scope .delete-button');
+		this.$deleteButton.addEventListener('click', e => {
+			e.stopPropagation();
+			if (this.getCommittedValue() != null) {
+				this.setCommittedValue(null);
+				this.commit(true);
+			}
+		});
+		this.$fileInput = this.$main.querySelector<HTMLInputElement>(':scope .file-input');
+		this.$fileInput.addEventListener('change', () => {
+			const files = (<HTMLInputElement>this.$fileInput).files;
+			this.handleFiles(files);
+		});
+
+		this.$fileItemWrapper = this.$main.querySelector<HTMLElement>(':scope .picture-wrapper');
+		
+		this.$progressWrapper = this.$main.querySelector(':scope .progress-wrapper');
+		this.progressIndicator = new ProgressCircle(0, {
+			circleRadius: 24, circleStrokeWidth: 3
+		});
+		this.$main.querySelector(":scope .progress-wrapper")
+			.appendChild(this.progressIndicator.getMainDomElement());
+
+		this.setBrowseButtonIcon(config.browseButtonIcon);
+		this.setMaxFileSize(config.maxFileSize);
+		this.setFileTooLargeMessage(config.fileTooLargeMessage);
+		this.setUploadErrorMessage(config.uploadErrorMessage);
+		this.setUploadUrl(config.uploadUrl);
+		this.setImageDisplaySize(config.imageDisplayWidth, config.imageDisplayHeight);
+	}
+
+	protected displayCommittedValue(): void {
+		this.getMainInnerDomElement().classList.toggle("empty", this.getCommittedValue() == null);
+		this.$deleteButton.classList.toggle("hidden", this.getCommittedValue() == null);
+		if (this.getCommittedValue() != null) {
+			this.$picture.classList.remove("hidden");
+			this.$picture.style.backgroundImage = `url('${this.getCommittedValue()}')`;
+		} else {
+			this.$picture.classList.add("hidden");
+		}
+	}
+
+	getDefaultValue(): string {
+		return null;
+	}
+
+	@executeWhenFirstDisplayed()
+	focus(): void {
+		this.$uploadButton.focus();
+	}
+	getMainInnerDomElement(): HTMLElement {
+		return this.$main;
+	}
+
+	getTransientValue(): string {
+		return this.getCommittedValue();
+	}
+
+	isValidData(v: string): boolean {
+		return v == null || typeof v === "string";
+	}
+
+	protected onEditingModeChanged(editingMode: UiFieldEditingMode, oldEditingMode?: UiFieldEditingMode): void {
+		UiField.defaultOnEditingModeChangedImpl(this, () => this.$uploadButton);
+		this.updateVisibilities();
+	}
+
+	valuesChanged(v1: string, v2: string): boolean {
+		return v1 === v2;
+	}
+
+	setBrowseButtonIcon(browseButtonIcon: string): void {
+		this.$uploadButton.style.backgroundImage = browseButtonIcon;
+	}
+
+	setFileTooLargeMessage(fileTooLargeMessage: string): void {
+		this.fileTooLargeMessage = fileTooLargeMessage;
+	}
+
+	setMaxFileSize(maxFileSize: number): void {
+		this.maxFileSize = maxFileSize;
+	}
+
+	setUploadErrorMessage(uploadErrorMessage: string): void {
+		this.uploadErrorMessage = uploadErrorMessage;
+	}
+
+	setUploadUrl(uploadUrl: string): void {
+		this.uploadUrl = uploadUrl
+	}
+
+	private updateVisibilities() {
+		this.$uploadButton.classList.toggle("hidden", !this.isEditable());
+	}
+
+	private handleFiles(files: FileList) {
+		const file = files[0];
+
+		this.onUploadInitiatedByUser.fire({
+			fileName: file.name,
+			mimeType: file.type,
+			sizeInBytes: file.size
+		});
+
+		this.$progressWrapper.classList.remove("hidden");
+
+		if (file.size > this.maxFileSize) {
+			this.onUploadTooLarge.fire({
+				fileName: file.name,
+				mimeType: file.type,
+				sizeInBytes: file.size
+			});
+			this.progressIndicator.setErrorMessage(formatString(this.fileTooLargeMessage, humanReadableFileSize(this.maxFileSize)));
+			return;
+		}
+
+		this.onUploadStarted.fire({
+			fileName: file.name,
+			mimeType: file.type,
+			sizeInBytes: file.size
+		});
+
+		this.uploader = new FileUploader();
+		this.uploader.upload(file, this.uploadUrl);
+		this.uploader.onProgress.addListener(progress => this.progressIndicator.setProgress(progress));
+		this.uploader.onSuccess.addListener(fileUuid => {
+			this.onUploadSuccessful.fire({
+				fileName: file.name,
+				mimeType: file.type,
+				sizeInBytes: file.size,
+				uploadedFileUuid: fileUuid
+			});
+			this.$progressWrapper.classList.add("hidden");
+		});
+		this.uploader.onError.addListener(() => {
+			this.progressIndicator.setErrorMessage(this.uploadErrorMessage);
+			this.onUploadFailed.fire({
+				fileName: file.name,
+				mimeType: file.type,
+				sizeInBytes: file.size
+			});
+		});
+		this.uploader.onComplete.addListener(() => {
+			this.uploader = null;
+			this.progressIndicator.setProgress(0);
+		});
+		this.$fileInput.value = '';
+	}
+
+
+	private setImageDisplaySize(imageDisplayWidth: number, imageDisplayHeight: number) {
+		this.$pictureWrapper.style.width = imageDisplayWidth + "px";
+		this.$pictureWrapper.style.height = imageDisplayHeight + "px";
+	}
+
+	cancelUpload(): any {
+		// TODO
+	}
+}
+
+export function formatString(s: string, ...params: any[]) {
+	for (let i = 0; i < params.length; i++) {
+		s = s.replace(`{${i}}`, params[i]);
+	}
+	return s;
+}
+
+TeamAppsUiComponentRegistry.registerFieldClass("UiPictureChooser", UiPictureChooser);
diff --git a/teamapps-client/ts/modules/formfield/file/UiSimpleFileField.ts b/teamapps-client/ts/modules/formfield/file/UiSimpleFileField.ts
new file mode 100644
index 000000000..8ac42b4e3
--- /dev/null
+++ b/teamapps-client/ts/modules/formfield/file/UiSimpleFileField.ts
@@ -0,0 +1,342 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+
+import {UiField} from "../UiField";
+import {UiFileFieldDisplayType} from "../../../generated/UiFileFieldDisplayType";
+import {UiFieldEditingMode} from "../../../generated/UiFieldEditingMode";
+import {TeamAppsUiContext} from "../../TeamAppsUiContext";
+import {arraysEqual, generateUUID, parseHtml} from "../../Common";
+import {TeamAppsEvent} from "../../util/TeamAppsEvent";
+import {TeamAppsUiComponentRegistry} from "../../TeamAppsUiComponentRegistry";
+import {keyCodes} from "../../trivial-components/TrivialCore";
+import {createUiFileItemConfig, UiFileItemConfig} from "../../../generated/UiFileItemConfig";
+import {
+	UiSimpleFileField_FileItemClickedEvent,
+	UiSimpleFileField_FileItemRemovedEvent,
+	UiSimpleFileField_UploadCanceledEvent,
+	UiSimpleFileField_UploadFailedEvent,
+	UiSimpleFileField_UploadInitiatedByUserEvent,
+	UiSimpleFileField_UploadStartedEvent,
+	UiSimpleFileField_UploadSuccessfulEvent,
+	UiSimpleFileField_UploadTooLargeEvent,
+	UiSimpleFileFieldCommandHandler,
+	UiSimpleFileFieldConfig,
+	UiSimpleFileFieldEventSource
+} from "../../../generated/UiSimpleFileFieldConfig";
+import {FileItemState, UiFileItem} from "./UiFileItem";
+import {executeWhenFirstDisplayed} from "../../util/ExecuteWhenFirstDisplayed";
+
+/**
+ * @author Yann Massard (yamass@gmail.com)
+ */
+export class UiSimpleFileField extends UiField<UiSimpleFileFieldConfig, UiFileItemConfig[]> implements UiSimpleFileFieldEventSource, UiSimpleFileFieldCommandHandler {
+
+	public readonly onFileItemClicked: TeamAppsEvent<UiSimpleFileField_FileItemClickedEvent> = new TeamAppsEvent();
+	public readonly onFileItemRemoved: TeamAppsEvent<UiSimpleFileField_FileItemRemovedEvent> = new TeamAppsEvent();
+	public readonly onUploadCanceled: TeamAppsEvent<UiSimpleFileField_UploadCanceledEvent> = new TeamAppsEvent();
+	public readonly onUploadFailed: TeamAppsEvent<UiSimpleFileField_UploadFailedEvent> = new TeamAppsEvent();
+	public readonly onUploadInitiatedByUser: TeamAppsEvent<UiSimpleFileField_UploadInitiatedByUserEvent> = new TeamAppsEvent();
+	public readonly onUploadStarted: TeamAppsEvent<UiSimpleFileField_UploadStartedEvent> = new TeamAppsEvent();
+	public readonly onUploadSuccessful: TeamAppsEvent<UiSimpleFileField_UploadSuccessfulEvent> = new TeamAppsEvent();
+	public readonly onUploadTooLarge: TeamAppsEvent<UiSimpleFileField_UploadTooLargeEvent> = new TeamAppsEvent();
+
+	private $main: HTMLElement;
+	private $uploadButton: HTMLElement;
+	private $fileInput: HTMLInputElement;
+	private $fileList: HTMLElement;
+
+	private displayMode: any;
+	private maxFiles: number;
+	private fileItems: { [uuid: string]: UiFileItem };
+	private maxBytesPerFile: number;
+	private fileTooLargeMessage: string;
+	private uploadErrorMessage: string;
+	private uploadUrl: string;
+
+	protected initialize(config: UiSimpleFileFieldConfig, context: TeamAppsUiContext): void {
+		this.fileItems = {};
+
+		this.$main = parseHtml(`<div class="UiSimpleFileField drop-zone form-control field-border field-border-glow field-background">
+    <div class="file-list"></div>
+    <div class="upload-button field-border" tabindex="0">
+    	<div class="icon img img-16" style="background-image: url('${config.browseButtonIcon}');"></div>
+    	<div class="caption">${config.browseButtonCaption}</div>
+    	<input class="file-input" type="file" multiple tabindex="-1"></input>
+    </div>
+</div>`);
+
+		this.$main.addEventListener("dragover", (e) => {
+			this.$main.classList.add("drop-zone-active");
+			// preventDefault() is important as it indicates that the drop is possible!!! see https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operations#droptargets
+			e.preventDefault();
+		});
+		this.$main.addEventListener("dragleave", (e) => {
+			this.$main.classList.remove("drop-zone-active");
+			e.preventDefault();
+		});
+		this.$main.addEventListener("dragend", (e) => {
+			this.$main.classList.remove("drop-zone-active");
+			e.preventDefault();
+		});
+		this.$main.addEventListener("mousedown", (e) => {
+			this.focus();
+		});
+		this.$main.ondrop = (e) => { // I don't know why I cannot just register this the same way as the other handlers...
+			e.stopPropagation();
+			e.preventDefault();
+			this.$main.classList.remove("drop-zone-active");
+			const files = e.dataTransfer.files;
+			this.handleFiles(files);
+		};
+
+		this.$uploadButton = this.$main.querySelector<HTMLElement>(':scope .upload-button');
+		["click", "keypress"].forEach(eventName => this.$uploadButton.addEventListener(eventName, (e: any) => {
+			if (e.button == 0 || e.keyCode === keyCodes.enter || e.keyCode === keyCodes.space) {
+				this.$fileInput.click();
+				return false; // no scrolling when space is pressed!
+			}
+		}));
+		this.$fileInput = this.$main.querySelector<HTMLInputElement>(':scope .file-input');
+		this.$fileInput.addEventListener('change', () => {
+			const files = (<HTMLInputElement>this.$fileInput).files;
+			this.handleFiles(files);
+		});
+
+		this.$fileList = this.$main.querySelector<HTMLElement>(':scope .file-list');
+		this.$fileList.addEventListener('click', e => {
+			if (this.getTransientValue().length == 0) {
+				this.$fileInput.click();
+			}
+		});
+
+		this.setBrowseButtonCaption(config.browseButtonCaption);
+		this.setBrowseButtonIcon(config.browseButtonIcon);
+		this.setDisplayMode(config.displayMode);
+		this.setMaxBytesPerFile(config.maxBytesPerFile);
+		this.setMaxFiles(config.maxFiles);
+		this.setAcceptedFileTypes(config.acceptedFileTypes);
+		this.setFileTooLargeMessage(config.fileTooLargeMessage);
+		this.setUploadErrorMessage(config.uploadErrorMessage);
+		this.setUploadUrl(config.uploadUrl);
+	}
+
+	protected displayCommittedValue(): void {
+		const existingItemUuids = Object.keys(this.fileItems || []);
+		const committedItemUuids = this.getCommittedValue().map(item => item.uuid);
+		existingItemUuids.filter(exId => committedItemUuids.indexOf(exId) === -1)
+			.forEach(uuid => this.removeFileItem(uuid));
+		committedItemUuids.filter(cId => existingItemUuids.indexOf(cId) === -1)
+			.forEach(uuid => this.addFileItem(this.getCommittedValue().filter(item => item.uuid === uuid)[0]));
+	}
+
+	getDefaultValue(): UiFileItemConfig[] {
+		return [];
+	}
+
+	@executeWhenFirstDisplayed()
+	focus(): void {
+		this.$uploadButton.focus();
+	}
+
+	getMainInnerDomElement(): HTMLElement {
+		return this.$main;
+	}
+
+	getTransientValue(): UiFileItemConfig[] {
+		return Object.values(this.fileItems)
+			// .filter(item => item.state === FileItemState.DONE)
+			.map(item => createUiFileItemConfig({
+				uuid: item.uuid,
+				icon: item.icon,
+				thumbnail: item.thumbnail,
+				fileName: item.fileName,
+				description: item.description,
+				size: item.size,
+				linkUrl: item.linkUrl
+			}));
+	}
+
+	isValidData(v: UiFileItemConfig[]): boolean {
+		return v == null || Array.isArray(v);
+	}
+
+	protected onEditingModeChanged(editingMode: UiFieldEditingMode, oldEditingMode?: UiFieldEditingMode): void {
+		UiField.defaultOnEditingModeChangedImpl(this, () => this.$uploadButton);
+		Object.values(this.fileItems).forEach(fi => fi.deletable = this.isEditable());
+		this.updateVisibilities();
+	}
+
+	valuesChanged(v1: UiFileItemConfig[], v2: UiFileItemConfig[]): boolean {
+		return !arraysEqual(v1.map(item => item.uuid), v2.map(item => item.uuid));
+	}
+
+	addFileItem(itemConfig: UiFileItemConfig, state: FileItemState = FileItemState.DONE): void {
+		const fileItem = new UiFileItem(this.displayMode, this.maxBytesPerFile, this.fileTooLargeMessage, this.uploadErrorMessage, this.uploadUrl, itemConfig, state, this.isEditable());
+		this.fileItems[itemConfig.uuid] = fileItem;
+		this.$fileList.appendChild(fileItem.getMainDomElement());
+	}
+
+	removeFileItem(itemUuid: string): void {
+		const fileItem = this.fileItems[itemUuid];
+		fileItem.getMainDomElement().remove();
+		delete this.fileItems[itemUuid];
+	}
+
+	setBrowseButtonCaption(browseButtonCaption: string): void {
+		this.$uploadButton.querySelector<HTMLElement>(":scope .caption").textContent = browseButtonCaption;
+	}
+
+	setBrowseButtonIcon(browseButtonIcon: string): void {
+		this.$uploadButton.querySelector<HTMLElement>(":scope .icon")
+			.style.backgroundImage = browseButtonIcon;
+	}
+
+	setDisplayMode(displayMode: UiFileFieldDisplayType): void {
+		this.displayMode = displayMode;
+		this.$main.classList.toggle("float-style-vertical-list", displayMode === UiFileFieldDisplayType.LIST);
+		this.$main.classList.toggle("float-style-horizontal", displayMode === UiFileFieldDisplayType.FLOATING);
+		Object.values(this.fileItems).forEach(item => item.setDisplayMode(displayMode));
+	}
+
+	setFileTooLargeMessage(fileTooLargeMessage: string): void {
+		this.fileTooLargeMessage = fileTooLargeMessage;
+	}
+
+	setMaxBytesPerFile(maxBytesPerFile: number): void {
+		this.maxBytesPerFile = maxBytesPerFile;
+	}
+
+	setMaxFiles(maxFiles: number): void {
+		this.maxFiles = maxFiles || Number.MAX_SAFE_INTEGER;
+		this.updateVisibilities();
+	}
+
+	setAcceptedFileTypes(acceptedFileTypes: string[]) {
+		this.$fileInput.accept = acceptedFileTypes != null ? (acceptedFileTypes.join(',')) : null;
+	}
+
+	setUploadErrorMessage(uploadErrorMessage: string): void {
+		this.uploadErrorMessage = uploadErrorMessage;
+	}
+
+	setUploadUrl(uploadUrl: string): void {
+		this.uploadUrl = uploadUrl
+	}
+
+	updateFileItem(itemConfig: UiFileItemConfig): void {
+		const fileItem = this.fileItems[itemConfig.uuid];
+		if (fileItem != null) {
+			fileItem.update(itemConfig);
+		}
+	}
+
+	private get numberOfNonErrorFileItems() {
+		return Object.values(this.fileItems).filter(item => item.state !== FileItemState.FAILED && item.state !== FileItemState.TOO_LARGE).length;
+	}
+
+	private get numberOfUploadingFileItems() {
+		return Object.values(this.fileItems).filter(item => item.state === FileItemState.UPLOADING).length;
+	}
+
+	private updateVisibilities() {
+		this.$uploadButton.classList.toggle("hidden", !this.isEditable() || this.numberOfNonErrorFileItems >= this.maxFiles);
+	}
+
+	private resetFileInput() {
+		this.$fileInput.value = '';
+	}
+
+	private handleFiles(files: FileList) {
+		let numberOfFilesToAdd = files.length;
+		if (this.maxFiles && this.numberOfNonErrorFileItems + files.length > this.maxFiles) {
+			numberOfFilesToAdd = this.maxFiles - this.numberOfNonErrorFileItems;
+		}
+
+		for (let i = 0; i < numberOfFilesToAdd; i++) {
+			const file = files[i];
+			let fileItem = this.createUploadFileItem();
+			this.onUploadInitiatedByUser.fire({
+				uuid: fileItem.uuid,
+				fileName: file.name,
+				mimeType: file.type,
+				sizeInBytes: file.size
+			});
+			this.$fileList.appendChild(fileItem.getMainDomElement());
+			this.fileItems[fileItem.uuid] = fileItem;
+			fileItem.upload(file);
+			this.onUploadStarted.fire({
+				fileItemUuid: fileItem.uuid
+			});
+		}
+
+		this.updateVisibilities();
+		this.resetFileInput();
+		this.commit();
+	}
+
+	private createUploadFileItem() {
+		let fileItem = new UiFileItem(this.displayMode, this.maxBytesPerFile, this.fileTooLargeMessage, this.uploadErrorMessage, this.uploadUrl, {
+			uuid: generateUUID()
+		}, FileItemState.INITIATING, this.isEditable());
+		fileItem.onClick.addListener(() => {
+			this.onFileItemClicked.fire({
+				fileItemUuid: fileItem.uuid
+			});
+		});
+		fileItem.onDeleteButtonClick.addListener(() => {
+			this.onFileItemRemoved.fire({
+				fileItemUuid: fileItem.uuid
+			});
+			this.removeFileItem(fileItem.uuid);
+			this.updateVisibilities();
+			this.commit();
+		});
+		fileItem.onUploadTooLarge.addListener(() => {
+			this.onUploadTooLarge.fire({
+				fileItemUuid: fileItem.uuid
+			});
+			this.updateVisibilities();
+		});
+		fileItem.onUploadSuccessful.addListener(uploadedFileUuid => {
+			this.onUploadSuccessful.fire({
+				fileItemUuid: fileItem.uuid,
+				uploadedFileUuid: uploadedFileUuid
+			});
+			this.updateVisibilities();
+		});
+		fileItem.onUploadCanceled.addListener(() => {
+			this.onUploadCanceled.fire({
+				fileItemUuid: fileItem.uuid
+			});
+			this.updateVisibilities();
+		});
+		fileItem.onUploadFailed.addListener(() => {
+			this.onUploadFailed.fire({
+				fileItemUuid: fileItem.uuid
+			});
+			this.updateVisibilities();
+		});
+		return fileItem;
+	}
+
+}
+
+
+TeamAppsUiComponentRegistry.registerFieldClass("UiSimpleFileField", UiSimpleFileField);
diff --git a/teamapps-client/ts/modules/index.ts b/teamapps-client/ts/modules/index.ts
index bc588a55b..bf700d1c4 100644
--- a/teamapps-client/ts/modules/index.ts
+++ b/teamapps-client/ts/modules/index.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,15 +19,14 @@
  */
 import "@less/teamapps";
 
+import 'typeface-roboto';
+
 (window as any).jQuery = (window as any).$ = require("jquery"); // needs to be global for fullcalendar (at least)
 require("jquery-ui/ui/version.js");
 require("jquery-ui/ui/position.js");
-require("jquery-ui/ui/widgets/draggable.js");
-require("jquery-ui/ui/widgets/resizable.js");
 
 (window as any).moment = require("moment"); // needs to be a global variable for fullcalendar
 
-require("../lib/jquery.event.drag-2.3.0-fixed.js");
 require("slickgrid/slick.core");
 require("slickgrid/plugins/slick.checkboxselectcolumn");
 require("slickgrid/plugins/slick.autotooltips");
@@ -37,6 +36,7 @@ require("slickgrid/controls/slick.columnpicker");
 require("slickgrid/slick.formatters");
 require("slickgrid/slick.editors");
 require("slickgrid/slick.grid");
+require("slickgrid/slick.interactions");
 
 require("webui-popover");
 
@@ -44,7 +44,7 @@ require("slick-carousel");
 
 export {DefaultTeamAppsUiContext} from "./DefaultTeamAppsUiContext";
 export {UiWorkSpaceLayoutChildWindowTeamAppsUiContext} from "./workspace-layout/UiWorkSpaceLayoutChildWindowTeamAppsUiContext";
-export {TeamAppsConnectionImpl} from "../shared/TeamAppsConnectionImpl";
+export {TeamAppsConnectionImpl} from "./communication/TeamAppsConnectionImpl";
 
 export {UiApplicationLayout} from "./UiApplicationLayout";
 export {UiCalendar} from "./UiCalendar";
@@ -57,8 +57,10 @@ export {UiGridForm} from "./UiGridForm";
 export {UiImageCropper} from "./UiImageCropper";
 export {UiImageDisplay} from "./UiImageDisplay";
 export {UiInfiniteItemView} from "./UiInfiniteItemView";
+export {UiInfiniteItemView2} from "./UiInfiniteItemView2";
 export {UiLiveStreamComponent} from "./UiLiveStreamComponent";
 export {UiMap} from "./UiMap";
+export {UiMap2} from "./UiMap2";
 export {UiMediaTrackGraph} from "./UiMediaTrackGraph";
 export {UiMobileLayout} from "./UiMobileLayout";
 export {UiNavigationBar} from "./UiNavigationBar";
@@ -70,23 +72,33 @@ export {UiSplitPane} from "./UiSplitPane";
 export {UiItemView} from "./UiItemView";
 export {UiTable} from "./table/UiTable";
 export {UiTabPanel} from "./UiTabPanel";
-export {UiTemplateTestContainer} from "./UiTemplateTestContainer";
-export {UiTimeGraph} from "./UiTimeGraph";
+export {UiTimeGraph} from "./charting/UiTimeGraph";
 export {UiToolAccordion} from "./tool-container/tool-accordion/UiToolAccordion";
 export {UiToolbar} from "./tool-container/toolbar/UiToolbar";
 export {UiTree} from "./UiTree";
 export {UiVerticalLayout} from "./UiVerticalLayout";
 export {UiVideoPlayer} from "./UiVideoPlayer";
-export {UiWebRtcPublisher} from "./UiWebRtcPublisher";
+export {UiShakaPlayer} from "./shakaplayer/UiShakaPlayer";
 export {UiWebRtcPlayer} from "./UiWebRtcPlayer";
-export {UiWindow} from "./UiWindow";                        
+export {UiWindow} from "./UiWindow";
 export {UiWorkSpaceLayout} from "./workspace-layout/UiWorkSpaceLayout";
 export {UiIFrame} from "./UiIFrame";
-export {WebWorkerTeamAppsConnection} from "./WebWorkerTeamAppsConnection";
 export {UiFlexContainer} from "./UiFlexContainer";
 export {UiChatDisplay} from "./UiChatDisplay";
 export {UiChatInput} from "./UiChatInput";
 export {UiAbsoluteLayout} from "./UiAbsoluteLayout";
+export {UiFloatingComponent} from "./UiFloatingComponent";
+export {UiPopup} from "./UiPopup";
+export {UiProgressDisplay} from "./UiProgressDisplay";
+export {UiDefaultMultiProgressDisplay} from "./UiDefaultMultiProgressDisplay";
+export {UiNotification} from "./UiNotification";
+export {UiNotificationBar} from "./UiNotificationBar";
+export {UiQrCodeScanner} from "./UiQrCodeScanner";
+export {UiMediaSoupV3WebRtcClient} from "./webrtc/mediasoup-v3/UiMediaSoupV3WebRtcClient";
+export {UiAudioLevelIndicator} from "./UiAudioLevelIndicator";
+export {UiHtmlView} from "./UiHtmlView";
+export {UiPdfViewer} from "./UiPdfViewer"
+export {UiPlayground} from "./UiPlayground";
 
 export {UiGauge} from "./UiGauge";
 
@@ -96,33 +108,44 @@ export {UiComboBox} from "./formfield/UiComboBox";
 export {UiComponentField} from "./formfield/UiComponentField";
 export {UiCompositeField} from "./formfield/UiCompositeField";
 export {UiCurrencyField} from "./formfield/UiCurrencyField";
-export {UiInstantDateField} from "./formfield/datetime/UiInstantDateField";
 export {UiLocalDateField} from "./formfield/datetime/UiLocalDateField";
 export {UiInstantDateTimeField} from "./formfield/datetime/UiInstantDateTimeField";
 export {UiLocalDateTimeField} from "./formfield/datetime/UiLocalDateTimeField";
-export {UiInstantTimeField} from "./formfield/datetime/UiInstantTimeField";
 export {UiLocalTimeField} from "./formfield/datetime/UiLocalTimeField";
 export {UiDisplayField} from "./formfield/UiDisplayField";
 export {UiField} from "./formfield/UiField";
 export {UiNumberField} from "./formfield/UiNumberField";
 export {UiImageField} from "./formfield/UiImageField";
 export {UiLabel} from "./formfield/UiLabel";
-export {UiFileField} from "./formfield/UiFileField";
+export {UiFileField} from "./formfield/file/UiFileField";
+export {UiSimpleFileField} from "./formfield/file/UiSimpleFileField";
+export {UiPictureChooser} from "./formfield/file/UiPictureChooser";
 export {UiMultiLineTextField} from "./formfield/UiMultiLineTextField";
 export {UiPasswordField} from "./formfield/UiPasswordField";
 export {UiTagComboBox} from "./formfield/UiTagComboBox";
 export {UiTextField} from "./formfield/UiTextField";
 export {UiRichTextEditor} from "./formfield/UiRichTextEditor";
-export {UiSlider} from "./formfield/UiSlider";
 export {UiColorPicker} from "./formfield/UiColorPicker";
+export {UiFieldGroup} from "./formfield/UiFieldGroup";
+export {UiTemplateField} from "./formfield/UiTemplateField";
+export {UiTextColorMarkerField} from "./formfield/UiTextColorMarkerField";
+export {UiLinkButton} from "./UiLinkButton";
+export {UiDiv} from "./UiDiv";
+export {UiCollapsible} from "./UiCollapsible";
 
 export {UiToolButton} from "./micro-components/UiToolButton";
 
 export {UiPieChart} from "./UiPieChart";
+export {UiTreeGraph} from "./UiTreeGraph";
+
+export {UiTestHarness} from "./UiTestHarness";
+export {draggable} from "./util/draggable";
 
-// export {UiTestHarness} from "./UiTestHarness";
+export {UiScript} from "./UiScript";
 
 // export {typescriptDeclarationFixConstant as AbstractUiChartConfig} from "./../generated/AbstractUiChartConfig";
 
 import * as log from "loglevel";
 (window as any).log = log;
+
+export {VideoTrackMixer} from "./webrtc/VideoTrackMixer"
diff --git a/teamapps-client/ts/modules/live-stream/LiveStreamPlayer.ts b/teamapps-client/ts/modules/live-stream/LiveStreamPlayer.ts
index c02aba66f..49379d643 100644
--- a/teamapps-client/ts/modules/live-stream/LiveStreamPlayer.ts
+++ b/teamapps-client/ts/modules/live-stream/LiveStreamPlayer.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -24,5 +24,5 @@ export interface LiveStreamPlayer {
 	stop(): void;
 	isPlaying(): boolean;
 	setVolume(volume: number): void;
-	getMainDomElement(): JQuery;
+	getMainElement(): HTMLElement;
 }
diff --git a/teamapps-client/ts/modules/live-stream/UiHttpLiveStreamPlayer.ts b/teamapps-client/ts/modules/live-stream/UiHttpLiveStreamPlayer.ts
index 108afe0f5..4761b4442 100644
--- a/teamapps-client/ts/modules/live-stream/UiHttpLiveStreamPlayer.ts
+++ b/teamapps-client/ts/modules/live-stream/UiHttpLiveStreamPlayer.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,54 +17,55 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-import * as $ from "jquery";
+
 import {LiveStreamPlayer} from "./LiveStreamPlayer";
 import {UiSpinner} from "../micro-components/UiSpinner";
-import {UiComponent} from "../UiComponent";
+import {AbstractUiComponent} from "../AbstractUiComponent";
 import {TeamAppsUiContext} from "../TeamAppsUiContext";
 import {UiHttpLiveStreamPlayerConfig} from "../../generated/UiHttpLiveStreamPlayerConfig";
+import {parseHtml} from "../Common";
 
-export class UiHttpLiveStreamPlayer extends UiComponent<UiHttpLiveStreamPlayerConfig> implements LiveStreamPlayer {
-	private $main: JQuery;
+export class UiHttpLiveStreamPlayer extends AbstractUiComponent<UiHttpLiveStreamPlayerConfig> implements LiveStreamPlayer {
+	private $main: HTMLElement;
 	private $videoContainer: any;
 	private $notSupportedMessage: any;
 	private video: HTMLVideoElement;
 	private url: string;
 	private shouldBePlayingUnlessUserPressedPause: boolean;
-	private $spinnerContainer: JQuery;
+	private $spinnerContainer: HTMLElement;
 	private resetTimer: number = null;
 
 	constructor(config: UiHttpLiveStreamPlayerConfig, context: TeamAppsUiContext) {
 		super(config, context);
-		this.$main = $(`
+		this.$main = parseHtml(`
 <div class="HttpLiveStreamPlayer">
     <div class="not-supported-message">
         HTML5 or HLS are not supported in this browser.
     </div>
     <div class="video-container">
     	<div class="spinner-container hidden"></div>	
-        <video x-webkit-airplay="allow" autoplay controls/>
+        <video x-webkit-airplay="allow" autoplay controls></video>
     </div>
 </div>			
 `);
-		this.$spinnerContainer = this.$main.find('.spinner-container');
+		this.$spinnerContainer = this.$main.querySelector<HTMLElement>(':scope .spinner-container');
 		this.$spinnerContainer.append(new UiSpinner().getMainDomElement());
-		this.$notSupportedMessage = this.$main.find('.not-supported-message');
-		this.$videoContainer = this.$main.find('.video-container');
+		this.$notSupportedMessage = this.$main.querySelector<HTMLElement>(':scope .not-supported-message');
+		this.$videoContainer = this.$main.querySelector<HTMLElement>(':scope .video-container');
 
-		this.video = this.$main.find('video')[0] as HTMLVideoElement;
+		this.video = this.$main.querySelector<HTMLElement>(':scope video') as HTMLVideoElement;
 		this.video.addEventListener("error", this.failed.bind(this));
 		this.video.addEventListener("load", () => this.video.play());
 		['loadedmetadata', 'loadstart', 'loadeddata', 'playing', 'stalled', 'suspend', 'waiting', 'canplay', 'canplaythrough'].forEach(eventName => {
 			this.video.addEventListener(eventName, () => {
-				this.logger.debug(eventName + "; videoTracks: " + this.video.videoTracks.length + "; audioTracks: " + this.video.audioTracks.length);
+				// this.logger.debug(eventName + "; videoTracks: " + this.video.videoTracks.length + "; audioTracks: " + this.video.audioTracks.length);
 				this.updateState();
 			})
 		});
 
 		let supported = this.isHlsSupported();
-		this.$notSupportedMessage.toggleClass('hidden', supported);
-		this.$videoContainer.toggleClass('hidden', !supported);
+		this.$notSupportedMessage.classList.toggle('hidden', supported);
+		this.$videoContainer.classList.toggle('hidden', !supported);
 	}
 
 	public isHlsSupported() {
@@ -117,7 +118,7 @@ export class UiHttpLiveStreamPlayer extends UiComponent<UiHttpLiveStreamPlayerCo
 		} else if (this.resetTimer == null) {
 			this.resetTimer = window.setTimeout(() => this.retryPlaying(), 15000);
 		}
-		this.$spinnerContainer.toggleClass("hidden", !this.shouldBePlayingUnlessUserPressedPause || playingOrReady);
+		this.$spinnerContainer.classList.toggle("hidden", !this.shouldBePlayingUnlessUserPressedPause || playingOrReady);
 	}
 
 	private isActuallyReadyToPlay() {
@@ -147,11 +148,8 @@ export class UiHttpLiveStreamPlayer extends UiComponent<UiHttpLiveStreamPlayerCo
 		this.resetTimer = window.setTimeout(() => this.retryPlaying(), 5000);
 	}
 
-	getMainDomElement(): JQuery {
+	doGetMainElement(): HTMLElement {
 		return this.$main;
 	}
 
-	destroy(): void {
-		// nothing to do...
-	}
 }
diff --git a/teamapps-client/ts/modules/live-stream/UiLiveStreamComPlayer.ts b/teamapps-client/ts/modules/live-stream/UiLiveStreamComPlayer.ts
index bd60e53da..f4dc6463a 100644
--- a/teamapps-client/ts/modules/live-stream/UiLiveStreamComPlayer.ts
+++ b/teamapps-client/ts/modules/live-stream/UiLiveStreamComPlayer.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,32 +17,32 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-import * as $ from "jquery";
+
 import {LiveStreamPlayer} from "./LiveStreamPlayer";
-import {UiComponent} from "../UiComponent";
+import {AbstractUiComponent} from "../AbstractUiComponent";
 import {TeamAppsUiContext} from "../TeamAppsUiContext";
 import {UiLiveStreamComPlayerConfig} from "../../generated/UiLiveStreamComPlayerConfig";
+import {parseHtml} from "../Common";
 
-export class UiLiveStreamComPlayer extends UiComponent<UiLiveStreamComPlayerConfig> implements LiveStreamPlayer {
+export class UiLiveStreamComPlayer extends AbstractUiComponent<UiLiveStreamComPlayerConfig> implements LiveStreamPlayer {
 
 	private playing: boolean = false;
-	private $wrapper: JQuery;
+	private $wrapper: HTMLElement;
 	private player: Element;
 
 	constructor(config: UiLiveStreamComPlayerConfig, context: TeamAppsUiContext) {
 		super(config, context);
-		this.$wrapper = $('<div class="livestreamcom-player-wrapper">');
+		this.$wrapper = parseHtml('<div class="livestreamcom-player-wrapper">');
 	}
 
 	play(url: string, streamName?: string) {
 		this.playing = true;
-		this.player = $(`<iframe style="width:100%;height:100%" src="${url}" frameborder="0" scrolling="no"></iframe>`)
-			.appendTo(this.$wrapper)
-			[0];
+		this.player = parseHtml(`<iframe style="width:100%;height:100%" src="${url}" frameborder="0" scrolling="no"></iframe>`);
+		this.$wrapper.appendChild(this.player);
 	}
 
 	stop() {
-		this.$wrapper[0].innerHTML = '';
+		this.$wrapper.innerHTML = '';
 		this.playing = false;
 	}
 
@@ -54,12 +54,8 @@ export class UiLiveStreamComPlayer extends UiComponent<UiLiveStreamComPlayerConf
 		this.logger.warn("LiveStreamComPlayer: setVolume() not supported on livestream.com iframe player...")
 	}
 
-	getMainDomElement(): JQuery {
+	doGetMainElement(): HTMLElement {
 		return this.$wrapper;
 	}
 
-
-	public destroy(): void {
-		// nothing to do
-	}
 }
diff --git a/teamapps-client/ts/modules/live-stream/UiMpegDashPlayer.ts b/teamapps-client/ts/modules/live-stream/UiMpegDashPlayer.ts
deleted file mode 100644
index ddde80c3f..000000000
--- a/teamapps-client/ts/modules/live-stream/UiMpegDashPlayer.ts
+++ /dev/null
@@ -1,124 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-import * as $ from "jquery";
-import {Player, polyfill, util} from "../../custom-declarations/shaka-player";
-require("shaka-player");
-import {UiSpinner} from "../micro-components/UiSpinner";
-import {UiComponent} from "../UiComponent";
-import {LiveStreamPlayer} from "./LiveStreamPlayer";
-import {TeamAppsUiContext} from "../TeamAppsUiContext";
-import {UiMpegDashPlayerConfig} from "../../generated/UiMpegDashPlayerConfig";
-
-export class UiMpegDashPlayer extends UiComponent<UiMpegDashPlayerConfig> implements LiveStreamPlayer {
-
-	private browserSupported = Player.isBrowserSupported();
-
-	private $main: JQuery;
-	private $videoContainer: any;
-	private $notSupportedMessage: any;
-	private shouldBePlayingUnlessUserPressedPause: boolean;
-	private $spinnerContainer: JQuery;
-	private resetTimer: number = null;
-	private player: Player;
-	private url: string;
-
-	constructor(config: UiMpegDashPlayerConfig, context: TeamAppsUiContext) {
-		super(config, context);
-		this.$main = $(`
-<div class="UiMpegDashPlayer">
-    <div class="not-supported-message">
-        MPEG Dash does not seem to be supported by your browser. 
-    </div>
-    <div class="video-container">
-    	<div class="spinner-container hidden"></div>	
-        <video x-webkit-airplay="allow" autoplay controls/>
-    </div>
-</div>			
-`);
-		this.$spinnerContainer = this.$main.find('.spinner-container');
-		this.$spinnerContainer.append(new UiSpinner().getMainDomElement());
-		this.$notSupportedMessage = this.$main.find('.not-supported-message');
-		this.$videoContainer = this.$main.find('.video-container');
-
-		let video = this.$main.find('video')[0] as HTMLVideoElement;
-		video.addEventListener('playing', () => this.onPlaying());
-
-		this.$notSupportedMessage.toggleClass('hidden', this.browserSupported);
-		this.$videoContainer.toggleClass('hidden', !this.browserSupported);
-		if (this.browserSupported) {
-			this.player = new Player(video);
-			this.player.addEventListener('error', (e) => this.onError((e as any).detail));
-		}
-	}
-
-	public play(url: string) {
-		this.stop();
-		this.shouldBePlayingUnlessUserPressedPause = true;
-		this.url = url;
-		this.retryPlaying();
-	}
-
-	private retryPlaying() {
-		clearTimeout(this.resetTimer);
-		this.resetTimer = null;
-		let shouldRetry = this.shouldBePlayingUnlessUserPressedPause;
-		this.logger.debug("retryPlaying: " + shouldRetry + " " + this.url);
-		if (shouldRetry) {
-			this.player.load(this.url).catch(e => this.onError(e));
-			this.resetTimer = window.setTimeout(() => this.retryPlaying(), 15000); // if it did not work after 15 seconds, retry again
-		}
-	}
-
-	public stop() {
-		this.shouldBePlayingUnlessUserPressedPause = false;
-		this.player.unload();
-	}
-
-	public isPlaying(): boolean {
-		return this.shouldBePlayingUnlessUserPressedPause;
-	}
-
-	public setVolume(volume: number): void {
-		this.player.getMediaElement().volume = volume;
-	}
-
-	private onPlaying() {
-		clearTimeout(this.resetTimer);
-		this.resetTimer = null;
-		this.$spinnerContainer.toggleClass("hidden", true);
-	}
-
-	private onError(e: util.Error) {
-		this.logger.warn('Error while playing video: code', e.code, 'object', JSON.stringify(e));
-		this.$spinnerContainer.toggleClass("hidden", !this.shouldBePlayingUnlessUserPressedPause);
-		clearTimeout(this.resetTimer);
-		this.resetTimer = window.setTimeout(() => this.retryPlaying(), 5000);
-	}
-
-	getMainDomElement(): JQuery {
-		return this.$main;
-	}
-
-	destroy(): void {
-		this.player && this.player.destroy();
-	}
-}
-
-polyfill.installAll();
diff --git a/teamapps-client/ts/modules/live-stream/UiYoutubePlayer.ts b/teamapps-client/ts/modules/live-stream/UiYoutubePlayer.ts
index f784f41dc..36e47ff02 100644
--- a/teamapps-client/ts/modules/live-stream/UiYoutubePlayer.ts
+++ b/teamapps-client/ts/modules/live-stream/UiYoutubePlayer.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,21 +19,21 @@
  */
 ///<reference types="youtube"/>
 
-import * as $ from "jquery";
+
 import {LiveStreamPlayer} from "./LiveStreamPlayer";
-import {UiComponent} from "../UiComponent";
+import {AbstractUiComponent} from "../AbstractUiComponent";
 import {TeamAppsUiContext} from "../TeamAppsUiContext";
-import {generateUUID} from "../Common";
+import {generateUUID, parseHtml} from "../Common";
 import {UiYoutubePlayerConfig} from "../../generated/UiYoutubePlayerConfig";
 
-export class UiYoutubePlayer extends UiComponent<UiYoutubePlayerConfig> implements LiveStreamPlayer {
+export class UiYoutubePlayer extends AbstractUiComponent<UiYoutubePlayerConfig> implements LiveStreamPlayer {
 	private static scriptTagAdded: boolean = false;
 	private static scriptLoaded: boolean = false;
 	private static commandsToInvokeWhenScripLoaded: Function[] = [];
 
 	private playing: boolean = false;
-	private $wrapper: JQuery;
-	private $player: JQuery;
+	private $wrapper: HTMLElement;
+	private $player: HTMLElement;
 	private player: YT.Player;
 	private playerReady: boolean;
 	private commandsToInvokeWhenPlayerReady: Function[] = [];
@@ -56,10 +56,11 @@ export class UiYoutubePlayer extends UiComponent<UiYoutubePlayerConfig> implemen
 
 	constructor(config: UiYoutubePlayerConfig, context: TeamAppsUiContext) {
 		super(config, context);
-		this.$wrapper = $("<div>");
+		this.$wrapper = parseHtml("<div>");
 		let elementUuid = generateUUID();
 		// 1. The <iframe> (and video player) will replace this <div> tag.
-		this.$player = $(`<div id="${elementUuid}">`).appendTo(this.$wrapper);
+		this.$player = parseHtml(`<div id="${elementUuid}">`);
+		this.$wrapper.appendChild(this.$player);
 
 		if (!UiYoutubePlayer.scriptTagAdded) {
 			// 2. This code loads the IFrame Player API code asynchronously.
@@ -127,13 +128,10 @@ export class UiYoutubePlayer extends UiComponent<UiYoutubePlayerConfig> implemen
 		}
 	}
 
-	getMainDomElement(): JQuery {
+	doGetMainElement(): HTMLElement {
 		return this.$wrapper;
 	}
 
-	public destroy(): void {
-		// nothing to do...
-	}
 }
 
 // global function called by the youtube api script...
diff --git a/teamapps-client/ts/modules/micro-components/AbstractDropDown.ts b/teamapps-client/ts/modules/micro-components/AbstractDropDown.ts
deleted file mode 100644
index 7c5c1816b..000000000
--- a/teamapps-client/ts/modules/micro-components/AbstractDropDown.ts
+++ /dev/null
@@ -1,122 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-import {TeamAppsEvent} from "../util/TeamAppsEvent";
-import {UiComponent} from "../UiComponent";
-import {UiComponentConfig} from "../../generated/UiComponentConfig";
-import {ClickOutsideHandle, doOnceOnClickOutsideElement, positionDropDown} from "../Common";
-import {UiSpinner} from "./UiSpinner";
-
-export abstract class AbstractDropDown<OPEN_CONFIG> {
-	public onClose: TeamAppsEvent<void> = new TeamAppsEvent(this);
-	public onComponentRemoved: TeamAppsEvent<UiComponent> = new TeamAppsEvent(this);
-
-	protected $dropDown: JQuery;
-	protected $contentContainer: JQuery;
-	protected clickOutsideHandle: ClickOutsideHandle;
-	protected spinner = new UiSpinner({fixedSize: "25%"});
-	protected currentOpenConfig: OPEN_CONFIG;
-	private _isOpen = false;
-	private _contentComponent: UiComponent<UiComponentConfig>;
-
-	constructor(content?: UiComponent<UiComponentConfig>) {
-		this.$dropDown = $(`<div class="DropDown teamapps-blurredBackgroundImage">
-                <div class="background-color-div">
-              </div>`);
-		this.$contentContainer = this.$dropDown.find('.background-color-div');
-
-		if (content) {
-			this.setContentComponent(content);
-		}
-	}
-
-	setContentComponent(component: UiComponent<UiComponentConfig>) {
-		this.$contentContainer[0].innerHTML = '';
-		if (this._contentComponent && this.onComponentRemoved) {
-			this.onComponentRemoved.fire(this._contentComponent);
-		}
-
-		this._contentComponent = component;
-
-		if (component != null) {
-			this.$contentContainer.append(component.getMainDomElement())
-		}
-
-		if (this._isOpen) {
-			this.open(this.currentOpenConfig);
-		}
-	}
-
-	getContentComponent(): UiComponent<UiComponentConfig> {
-		return this._contentComponent;
-	}
-
-	open(config: OPEN_CONFIG) {
-		this.currentOpenConfig = config;
-
-		if (this._contentComponent == null) {
-			this.$contentContainer[0].innerHTML = '';
-			this.$contentContainer.append(this.spinner.getMainDomElement());
-		}
-
-		if (!this._isOpen) {
-
-			this.doOpen(config);
-
-			this._isOpen = true;
-			this.clickOutsideHandle = doOnceOnClickOutsideElement(this.$dropDown, () => {
-				if (this._isOpen) {
-					this.close();
-				}
-			});
-		}
-
-		if (this._contentComponent != null) {
-			this._contentComponent.attachedToDom = true;
-		}
-	}
-
-	protected abstract doOpen(config: OPEN_CONFIG): void;
-
-	close() {
-		if (this.clickOutsideHandle != null) {
-			this.clickOutsideHandle.cancel();
-		}
-		if (this._isOpen) {
-			this.doClose();
-			this.onClose && this.onClose.fire(null);
-		}
-		this._isOpen = false;
-	}
-
-	protected abstract doClose(): void;
-
-	get isOpen() {
-		return this._isOpen;
-	}
-
-	public getMainDomElement(): JQuery {
-		return this.$dropDown;
-	}
-
-	public getScrollContainer(): JQuery {
-		return this.$contentContainer;
-	}
-
-}
diff --git a/teamapps-client/ts/modules/micro-components/CalendarEventListPopper.ts b/teamapps-client/ts/modules/micro-components/CalendarEventListPopper.ts
new file mode 100644
index 000000000..cc82c0e49
--- /dev/null
+++ b/teamapps-client/ts/modules/micro-components/CalendarEventListPopper.ts
@@ -0,0 +1,127 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+import { createPopper, Instance as Popper } from '@popperjs/core';
+import {animateCSS, Constants, parseHtml} from "../Common";
+import {UiEntranceAnimation} from "../../generated/UiEntranceAnimation";
+
+export class CalendarEventListPopper {
+
+	private referenceElement: Element;
+	private popper: Popper;
+	private $popperElement: HTMLElement;
+	private _$allDayEventsContainer: HTMLElement;
+	private _$normalEventsContainer: HTMLElement;
+
+	private visibilityTimeout: number;
+
+	constructor(referenceElement?: Element | null) {
+		this.referenceElement = referenceElement;
+		this.$popperElement = parseHtml(`<div class="CalendarEventListPopper ta-tooltip calendar-event-list-popper hidden" role="tooltip">
+			<div class="ta-tooltip-arrow" x-arrow></div>
+			<div class="ta-tooltip-inner">
+				<div class="all-day-events"></div>
+				<div class="normal-events"></div>
+			</div>
+		</div>`);
+		document.body.appendChild(this.$popperElement);
+		this._$allDayEventsContainer = this.$popperElement.querySelector<HTMLElement>(":scope .all-day-events");
+		this._$normalEventsContainer = this.$popperElement.querySelector<HTMLElement>(":scope .normal-events");
+		this.popper = createPopper(referenceElement || document.body, this.$popperElement, {
+			placement: 'top',
+			modifiers: [
+				{
+					name: "flip",
+					options: {
+						fallbackPlacements: ['right', 'left', 'bottom']
+					}
+				},
+				{
+					name: "preventOverflow"
+				} ,
+				{
+					name: "offset",
+					options: {
+						offset: [0, 8]
+					}
+				},
+				{
+					name: "arrow",
+					options: {
+						element: ".ta-tooltip-arrow", // "[data-popper-arrow]"
+						padding: 10, // 0
+					}
+				}
+			]
+		});
+
+		this.$popperElement.addEventListener("pointerenter", ev => this.setVisible(false, false));
+	}
+
+	get $allDayEventsContainer(): HTMLElement {
+		return this._$allDayEventsContainer;
+	}
+
+	get $normalEventsContainer(): HTMLElement {
+		return this._$normalEventsContainer;
+	}
+
+	public setReferenceElement(referenceElement: Element) {
+		(this.popper as any).state.elements.reference = referenceElement;
+	}
+
+	public updatePosition() {
+		this.popper.update();
+	}
+
+	public setVisible(visible: boolean, animate = true) {
+		window.clearTimeout(this.visibilityTimeout);
+
+		if (visible) {
+			if (animate) {
+				this.visibilityTimeout = window.setTimeout(() => {
+					let wasHidden = this.$popperElement.classList.contains('hidden');
+					this.$popperElement.classList.remove("hidden");
+					this.popper.update();
+					if (wasHidden) {
+						animateCSS(this.$popperElement, Constants.EXIT_ANIMATION_CSS_CLASSES[UiEntranceAnimation.FADE_IN], 200)
+					}
+				}, 200);
+			} else {
+				this.$popperElement.classList.remove("hidden");
+				this.popper.update();
+			}
+		} else {
+			if (animate) {
+				this.visibilityTimeout = window.setTimeout(() => {
+					this.$popperElement.classList.add("hidden");
+				}, 200);
+			} else {
+				this.$popperElement.classList.add("hidden");
+			}
+		}
+	}
+
+	public destroy() {
+		this.popper.destroy();
+		this.$popperElement.remove();
+	}
+}
+
+
diff --git a/teamapps-client/ts/modules/micro-components/ContextMenu.ts b/teamapps-client/ts/modules/micro-components/ContextMenu.ts
new file mode 100644
index 000000000..4d3900b34
--- /dev/null
+++ b/teamapps-client/ts/modules/micro-components/ContextMenu.ts
@@ -0,0 +1,118 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+
+
+import {UiComponent} from "../UiComponent";
+import {doOnceOnClickOutsideElement, parseHtml} from "../Common";
+
+export class ContextMenu {
+
+	private width: number = 250;
+	private height: number = -1;
+	private viewPortPadding: number = 10;
+	private content: UiComponent;
+
+	private $main: HTMLElement;
+
+	private currentRequestId = 0;
+	private lastMouseEvent: PointerEvent | MouseEvent;
+	private isOpen: boolean = false;
+
+	constructor() {
+		this.$main = parseHtml(`<div class="ContextMenu empty">
+	<div class="teamapps-spinner"></div>
+</div>`);
+
+		this.updateSize();
+	}
+
+	public setContent(content: UiComponent, requestId?: number) {
+		if (requestId != null && requestId !== this.currentRequestId) {
+			return;
+		}
+
+		if (this.content != null) {
+			this.content.getMainElement().remove();
+		}
+		this.content = content;
+		if (content == null) {
+			this.$main.classList.add("empty");
+		} else {
+			this.$main.classList.remove("empty");
+			this.$main.appendChild(content.getMainElement());
+		}
+		if (this.lastMouseEvent != null && this.isOpen) {
+			this.updatePosition(this.lastMouseEvent);
+		}
+	}
+
+	public open(e: PointerEvent | MouseEvent, contextMenuRequestCallback: (requestId: number) => any) {
+		this.isOpen = true;
+		this.lastMouseEvent = e;
+		e.preventDefault();
+		this.setContent(null);
+
+		this.$main.style.opacity = "0";
+		document.body.appendChild(this.$main);
+		this.$main.offsetHeight; // force css layout
+		this.$main.style.opacity = "1";
+		this.updatePosition(e);
+
+		doOnceOnClickOutsideElement(this.$main, e => this.close(), false);
+
+		contextMenuRequestCallback(++this.currentRequestId);
+	}
+
+	private updatePosition(e: PointerEvent | MouseEvent) {
+		let rect = this.$main.getBoundingClientRect();
+		let {pageX, pageY} = e;
+		pageX = Math.min(pageX, window.innerWidth - rect.width - this.viewPortPadding);
+		pageX = Math.max(pageX, this.viewPortPadding);
+		pageY = Math.min(pageY, window.innerHeight - rect.height - this.viewPortPadding);
+		pageY = Math.max(pageY, this.viewPortPadding);
+
+		this.$main.style.left = pageX + "px";
+		this.$main.style.top = pageY + "px";
+	}
+
+	public close(requestId?: number) {
+		if (requestId != null && requestId !== this.currentRequestId) {
+			return;
+		}
+		this.isOpen = false;
+		this.setContent(null);
+		this.$main.remove();
+	}
+
+	public setSize(width: number, height: number) {
+		this.width = width;
+		this.height = height;
+		this.updateSize();
+	}
+
+	private updateSize() {
+		this.$main.style.width = this.width + "px";
+		if (this.height >= 0) {
+			this.$main.style.height = this.height + "px";
+		} else {
+			this.$main.style.removeProperty("height");
+		}
+	}
+}
diff --git a/teamapps-client/ts/modules/micro-components/ElementUiComponentAdapter.ts b/teamapps-client/ts/modules/micro-components/ElementUiComponentAdapter.ts
index 89a9bf308..bf5b9f7ea 100644
--- a/teamapps-client/ts/modules/micro-components/ElementUiComponentAdapter.ts
+++ b/teamapps-client/ts/modules/micro-components/ElementUiComponentAdapter.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,21 +17,18 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-import * as $ from "jquery";
-import {UiComponent} from "../UiComponent";
+
+import {AbstractUiComponent} from "../AbstractUiComponent";
 import {UiComponentConfig} from "../../generated/UiComponentConfig";
 
-export class ElementUiComponentAdapter extends UiComponent<UiComponentConfig> {
+export class ElementUiComponentAdapter extends AbstractUiComponent<UiComponentConfig> {
 
-	constructor(private element: Element|JQuery) {
+	constructor(private element: HTMLElement) {
 		super({_type: "ElementUiComponentAdapter", id: ""}, null);
 	}
 
-	getMainDomElement(): JQuery {
-		return $(this.element);
-	}
-
-	destroy(): void {
+	doGetMainElement(): HTMLElement {
+		return this.element;
 	}
 
 }
diff --git a/teamapps-client/ts/modules/micro-components/FieldMessagesPopper.ts b/teamapps-client/ts/modules/micro-components/FieldMessagesPopper.ts
index 69d890b08..ebe882e67 100644
--- a/teamapps-client/ts/modules/micro-components/FieldMessagesPopper.ts
+++ b/teamapps-client/ts/modules/micro-components/FieldMessagesPopper.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,51 +17,57 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-import Popper from "popper.js";
+import { createPopper, Instance as Popper } from '@popperjs/core';
 import {UiFieldMessageConfig} from "../../generated/UiFieldMessageConfig";
 import {UiFieldMessagePosition} from "../../generated/UiFieldMessagePosition";
 import {UiFieldMessageSeverity} from "../../generated/UiFieldMessageSeverity";
 import {UiFieldMessageVisibilityMode} from "../../generated/UiFieldMessageVisibilityMode";
+import {animateCSS, parseHtml} from "../Common";
 
 export class FieldMessagesPopper {
 
 	private referenceElement: Element;
 	private popper: Popper;
-	private $popperElement: JQuery;
-	private $messagesContainer: JQuery;
+	private $popperElement: HTMLElement;
+	private $messagesContainer: HTMLElement;
 
 	constructor(referenceElement?: Element | null) {
 		this.referenceElement = referenceElement;
-		this.$popperElement = $(`<div class="tooltip ${referenceElement != null ? "" : "hidden"}" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>`)
-			.appendTo(document.body);
-		this.$messagesContainer = this.$popperElement.find(".tooltip-inner");
-		this.popper = new Popper(referenceElement || document.body, this.$popperElement[0], {
+		this.$popperElement = parseHtml(`<div class="ta-tooltip ${referenceElement != null ? "" : "hidden"}" role="tooltip">
+			<div class="ta-tooltip-arrow" x-arrow></div>
+			<div class="ta-tooltip-inner"></div>
+		</div>`);
+		document.body.appendChild(this.$popperElement);
+		this.$messagesContainer = this.$popperElement.querySelector<HTMLElement>(":scope .ta-tooltip-inner");
+		this.popper = createPopper(referenceElement || document.body, this.$popperElement, {
 			placement: 'right',
-			modifiers: {
-				flip: {
-					behavior: ['right', 'bottom', 'left', 'top']
+			modifiers: [
+				{
+					name: "flip",
+					options: {
+						fallbackPlacements: ['bottom', 'left', 'top']
+					}
 				},
-				preventOverflow: {
-					boundariesElement: document.body,
+				{
+					name: "preventOverflow"
 				}
-			},
+			]
 		});
 	}
 
 	public setMessages(messages: UiFieldMessageConfig[] = []) {
-		this.$messagesContainer[0].innerHTML = '';
+		this.$messagesContainer.innerHTML = '';
 		if (messages.length > 0) {
 			const highestSeverity = getHighestSeverity(messages);
-			this.$popperElement
-				.removeClass(`tooltip-info tooltip-success tooltip-warning tooltip-error`)
-				.addClass(`tooltip-${UiFieldMessageSeverity[highestSeverity].toLowerCase()}`);
+			this.$popperElement.classList.remove('ta-tooltip-info', 'ta-tooltip-success',  'ta-tooltip-warning', 'ta-tooltip-error');
+			this.$popperElement.classList.add(`ta-tooltip-${UiFieldMessageSeverity[highestSeverity].toLowerCase()}`);
 			messages.forEach(message => {
 				this.$messagesContainer.append(createMessageElement(message));
 			});
-			this.$popperElement.removeClass("empty");
+			this.$popperElement.classList.remove("empty");
 			this.popper.update();
 		} else {
-			this.$popperElement.addClass("empty");
+			this.$popperElement.classList.add("empty");
 		}
 		this.popper.update();
 	}
@@ -76,13 +82,13 @@ export class FieldMessagesPopper {
 	}
 
 	public setVisible(visible: boolean) {
-		this.$popperElement.toggleClass("hidden", !visible);
+		this.$popperElement.classList.toggle("hidden", !visible);
 		this.popper.update();
 	}
 
 	public destroy() {
 		this.popper.destroy();
-		this.$popperElement.detach();
+		this.$popperElement.remove();
 	}
 }
 
@@ -97,5 +103,5 @@ export function createMessageElement(message: UiFieldMessageConfig) {
 	const severityCssClass = `field-message-${UiFieldMessageSeverity[message.severity].toLowerCase()}`;
 	const positionCssClass = `position-${UiFieldMessagePosition[message.position].toLowerCase()}`;
 	const visibilityCssClass = `visibility-${UiFieldMessageVisibilityMode[message.visibilityMode].toLowerCase()}`;
-	return $(`<div class="field-message ${severityCssClass} ${positionCssClass} ${visibilityCssClass}">${message.message}</div>`);
+	return parseHtml(`<div class="field-message ${severityCssClass} ${positionCssClass} ${visibilityCssClass}">${message.message}</div>`);
 }
diff --git a/teamapps-client/ts/modules/micro-components/ProgressBar.ts b/teamapps-client/ts/modules/micro-components/ProgressBar.ts
index 93c13553b..7bd440bcb 100644
--- a/teamapps-client/ts/modules/micro-components/ProgressBar.ts
+++ b/teamapps-client/ts/modules/micro-components/ProgressBar.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,50 +17,52 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-import * as $ from "jquery";
+
 import {ProgressIndicator} from "./ProgressIndicator";
-import {generateUUID} from "../Common";
+import {generateUUID, parseHtml} from "../Common";
 
 export class ProgressBar implements ProgressIndicator {
-	private $mainDomElement: JQuery;
-	private $progressBar: JQuery;
-	private $errorMessageBar: JQuery;
+	private $mainDomElement: HTMLElement;
+	private $progressBar: HTMLElement;
+	private $errorMessageBar: HTMLElement;
 
 	constructor(initialProgress: number, {
 		height = 18,
 		transitionTime = 700
 	}) {
 		let uuid = generateUUID();
-		this.$mainDomElement = $(`<div id="c-${uuid}" class="ProgressBar progress">
-                 <div class="progress-bar active" role="progressbar" style="width: 0"></div>
-                 <div class="error-message-bar hidden"></div>
-                 <style>
-                   #c-${uuid} .progress-bar,
-                   #c-${uuid} .error-message-bar{        
-                     transition: width ${transitionTime}ms linear;
-                     height: ${height}px;
-                   } 
-                 </style>
-                </div>`);
-		this.$progressBar = this.$mainDomElement.find('.progress-bar').first();
-		this.$errorMessageBar = this.$mainDomElement.find('.error-message-bar');
+		this.$mainDomElement = parseHtml(`<div id="c-${uuid}" class="ProgressBar progress">
+	<div class="progress-bar active" role="progressbar" style="width: 0%"></div>
+	<div class="error-message-bar hidden"></div>
+	<style>
+	  #c-${uuid} {
+	    height: ${height}px;
+	  }
+	  
+	  #c-${uuid} .progress-bar,
+	  #c-${uuid} .error-message-bar{        
+	    transition: width ${transitionTime}ms linear;
+	    height: ${height}px;
+	  } 
+	</style>
+</div>`);
+		this.$progressBar = this.$mainDomElement.querySelector<HTMLElement>(':scope .progress-bar');
+		this.$errorMessageBar = this.$mainDomElement.querySelector<HTMLElement>(':scope .error-message-bar');
 
 		this.setProgress(initialProgress)
 	}
 
 	/**
 	 * @param progress Between 0 and 1
-	 * @param caption
 	 */
 	public setProgress(progress: number) {
-		let percentString = Math.ceil(progress * 100) + "%";
-		this.$progressBar.width(percentString).text(percentString);
+		this.$progressBar.style.width = Math.ceil(progress * 100) + "%";
 	}
 
-	setErrorMessage(message: string | null): void {
-		this.$progressBar.toggleClass('hidden', !!message);
-		this.$errorMessageBar.toggleClass('hidden', !message);
-		this.$errorMessageBar.text(message);
+	public setErrorMessage(message: string | null): void {
+		this.$progressBar.classList.toggle('hidden', !!message);
+		this.$errorMessageBar.classList.toggle('hidden', !message);
+		this.$errorMessageBar.innerText = message;
 	}
 
 	public getMainDomElement() {
diff --git a/teamapps-client/ts/modules/micro-components/ProgressCircle.ts b/teamapps-client/ts/modules/micro-components/ProgressCircle.ts
index 7a9151068..46b24af8e 100644
--- a/teamapps-client/ts/modules/micro-components/ProgressCircle.ts
+++ b/teamapps-client/ts/modules/micro-components/ProgressCircle.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,14 +17,14 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-import * as $ from "jquery";
+
 import {ProgressIndicator} from "./ProgressIndicator";
-import {generateUUID} from "../Common";
+import {generateUUID, parseHtml, parseSvg} from "../Common";
 
 export class ProgressCircle implements ProgressIndicator {
-	private $mainDomElement: JQuery;
-	private $circle: JQuery;
-	private $caption: JQuery;
+	private $mainDomElement: HTMLElement;
+	private $circle: HTMLElement;
+	private $caption: HTMLElement;
 	private circleRadius: any;
 	private svgCircleRadius: number;
 	private caption: string | undefined;
@@ -48,11 +48,11 @@ export class ProgressCircle implements ProgressIndicator {
 		let svgCircleRadius = 50 - svgCircleStrokeWidth / 2;
 		let textSize = 0.25 * circleRadius + 24;
 		this.svgCircleRadius = svgCircleRadius;
-		this.$mainDomElement = $(`
+		this.$mainDomElement = parseSvg(`
                 <svg id="c-${uuid}" class="ProgressCircle" width="${size}" height="${size}" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
                  <g>
-                  <circle class="countdown-circle-background" r="${this.svgCircleRadius}" cy="50" cx="50" stroke-width="${svgCircleStrokeWidth}" stroke="#dddddd" fill="none"/>
-                  <circle class="countdown-circle" r="${this.svgCircleRadius}" cy="50" cx="50" stroke-width="${svgCircleStrokeWidth}" stroke="#0f74bd" stroke-dashoffset="0" stroke-dasharray="${this.calculateStrokeOffset(0)} ${this.calculateStrokeOffset(0)}" fill="none"/>
+                  <circle class="countdown-circle-background" r="${this.svgCircleRadius}" cy="50" cx="50" stroke-width="${svgCircleStrokeWidth}" stroke="#dddddd" fill="none"></circle>
+                  <circle class="countdown-circle" r="${this.svgCircleRadius}" cy="50" cx="50" stroke-width="${svgCircleStrokeWidth}" stroke="#0f74bd" stroke-dashoffset="0" stroke-dasharray="${this.calculateStrokeOffset(0)} ${this.calculateStrokeOffset(0)}" fill="none"></circle>
                   <text class="countdown-circle-text" x="50" y="${50 + textSize / 3}" font-size="${textSize}" text-anchor="middle"></text>
                  </g>
                  <style>
@@ -63,8 +63,8 @@ export class ProgressCircle implements ProgressIndicator {
                 </svg>
             `);
 
-		this.$circle = this.$mainDomElement.find(".countdown-circle");
-		this.$caption = this.$mainDomElement.find(".countdown-circle-text");
+		this.$circle = this.$mainDomElement.querySelector<HTMLElement>(":scope .countdown-circle");
+		this.$caption = this.$mainDomElement.querySelector<HTMLElement>(":scope .countdown-circle-text");
 
 		this.setProgress(initialProgress)
 	}
@@ -74,18 +74,18 @@ export class ProgressCircle implements ProgressIndicator {
 	 * @param caption
 	 */
 	public setProgress(progress: number) {
-		this.$circle.css('stroke-dashoffset', this.calculateStrokeOffset(progress));
+		this.$circle.style.strokeDashoffset = "" + this.calculateStrokeOffset(progress);
 		let percentString = Math.ceil(progress * 100) + "%";
-		this.$caption.text(percentString);
+		this.$caption.textContent = percentString;
 	}
 
 	setErrorMessage(message: string | null): void {
-		this.$mainDomElement.toggleClass('error', !!message);
+		this.$mainDomElement.classList.toggle('error', !!message);
 		if (message != null) {
-			this.$caption.text('!');
-			this.$mainDomElement.webuiPopover({trigger: 'hover', content: message, closeable: true});
+			this.$caption.textContent = '!';
+			$(this.$mainDomElement).webuiPopover({trigger: 'hover', content: message, closeable: true});
 		} else {
-			this.$caption.text(this.caption);
+			this.$caption.textContent = this.caption;
 		}
 	}
 
diff --git a/teamapps-client/ts/modules/micro-components/ProgressIndicator.ts b/teamapps-client/ts/modules/micro-components/ProgressIndicator.ts
index d26493e82..6648d5275 100644
--- a/teamapps-client/ts/modules/micro-components/ProgressIndicator.ts
+++ b/teamapps-client/ts/modules/micro-components/ProgressIndicator.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -25,5 +25,5 @@ export interface ProgressIndicator {
 
 	setErrorMessage(message: string | null): void;
 
-	getMainDomElement(): JQuery;
+	getMainDomElement(): HTMLElement;
 }
diff --git a/teamapps-client/ts/modules/micro-components/UiAudioActivityDisplay.ts b/teamapps-client/ts/modules/micro-components/UiAudioActivityDisplay.ts
deleted file mode 100644
index acc7e8124..000000000
--- a/teamapps-client/ts/modules/micro-components/UiAudioActivityDisplay.ts
+++ /dev/null
@@ -1,109 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-import * as $ from "jquery";
-import {Util} from "leaflet";
-
-export class UiAudioActivityDisplay {
-	private $main: JQuery;
-	private $activityDisplay: JQuery;
-	private $levelDiv: JQuery;
-	private mediaStreamSource: MediaStreamAudioSourceNode;
-	private audioContext: AudioContext;
-
-
-	constructor() {
-		this.$main = $(`
-<div class="UiAudioActivityDisplay">
-	<div class="level-div hidden"></div>
-</div>
-            `);
-		this.$activityDisplay = this.$main;
-		this.$levelDiv = this.$main.find('.level-div');
-
-	}
-
-	private analyserNode: AnalyserNode;
-
-	public bindToStream(userMediaStream: MediaStream) {
-		(window as any).AudioContext = (window as any).AudioContext || (window as any).webkitAudioContext;
-		this.audioContext = new AudioContext();
-
-		let scriptProcessor = this.audioContext.createScriptProcessor(2048, 1, 1);
-		scriptProcessor.connect(this.audioContext.destination);
-
-		this.analyserNode = this.audioContext.createAnalyser();
-		this.analyserNode.smoothingTimeConstant = 0.3;
-		this.analyserNode.fftSize = 32; // 16 spectral lines - that's the minimum. we don't want to get a spectral analysis anyway...
-		this.analyserNode.connect(scriptProcessor);
-
-		this.mediaStreamSource = this.audioContext.createMediaStreamSource(userMediaStream);
-		this.mediaStreamSource.connect(this.analyserNode, 0, 0);
-
-		scriptProcessor.onaudioprocess = this.throttle(() => {
-			const array = new Uint8Array(this.analyserNode.frequencyBinCount);
-			this.analyserNode.getByteFrequencyData(array);
-			const average = UiAudioActivityDisplay.getAverageVolume(array);
-			let averageRatio = average / 255;
-			let videoHeight = this.$activityDisplay[0].offsetHeight;
-			this.$levelDiv.css({
-				height: (videoHeight * averageRatio) + "px",
-				"background-position": "0 " + (-videoHeight * (1 - averageRatio) + "px"),
-				"background-size": 100 + "px " + videoHeight + "px"
-			});
-		}, 200);
-
-		this.$levelDiv.removeClass("hidden");
-	}
-
-	/**
-	 *  Returns a function, that will limit the invocation of the specified function to once in delay. Invocations that come before the end of delay are ignored!
-	 */
-	private throttle(func: Function, delay: number): (() => void) {
-		let previousCall = 0;
-		return function () {
-			const time = new Date().getTime();
-			if ((time - previousCall) >= delay) {
-				previousCall = time;
-				func.apply(this, arguments);
-			}
-		};
-	}
-
-	public unbind() {
-		this.audioContext && this.audioContext.close()
-			.catch(reason => console.log(reason));
-		this.mediaStreamSource && this.mediaStreamSource.disconnect();
-		this.$levelDiv.addClass("hidden");
-	}
-
-	private static getAverageVolume(sampleVolumes: Uint8Array) {
-		let max = 0;
-		let sum = 0;
-		for (let i = 0; i < sampleVolumes.length; i++) {
-			max = Math.max(max, sampleVolumes[i]);
-			sum += sampleVolumes[i];
-		}
-		return (max * 3 + (sum / sampleVolumes.length)) / 4;
-	}
-
-	public getMainDomElement() {
-		return this.$main;
-	}
-}
diff --git a/teamapps-client/ts/modules/micro-components/UiDropDown.ts b/teamapps-client/ts/modules/micro-components/UiDropDown.ts
index 350302922..451436ac2 100644
--- a/teamapps-client/ts/modules/micro-components/UiDropDown.ts
+++ b/teamapps-client/ts/modules/micro-components/UiDropDown.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,39 +17,111 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-import * as $ from "jquery";
-import {UiComponent} from "../UiComponent";
-import {positionDropDown} from "../Common";
+
+import {ClickOutsideHandle, doOnceOnClickOutsideElement, parseHtml, positionDropDown} from "../Common";
 import {UiComponentConfig} from "../../generated/UiComponentConfig";
-import {AbstractDropDown} from "./AbstractDropDown";
+import {UiComponent} from "../UiComponent";
+import {TeamAppsEvent} from "../util/TeamAppsEvent";
+import {UiSpinner} from "./UiSpinner";
 
 interface OpenConfig {
-	$reference: JQuery | Element,
+	$reference: HTMLElement | Element,
 	width?: number,
 	viewPortPadding?: number,
 	minHeight?: number
 }
 
-export class UiDropDown extends AbstractDropDown<OpenConfig> {
+export class UiDropDown {
+
+	public onClose: TeamAppsEvent<void> = new TeamAppsEvent();
+	public onComponentRemoved: TeamAppsEvent<UiComponent> = new TeamAppsEvent();
+
+	protected $dropDown: HTMLElement;
+	protected $contentContainer: HTMLElement;
+	protected clickOutsideHandle: ClickOutsideHandle;
+	protected spinner = new UiSpinner({fixedSize: "25%"});
+	protected currentOpenConfig: OpenConfig;
+	private _isOpen = false;
+	private _contentComponent: UiComponent<UiComponentConfig>;
+
 	constructor(content?: UiComponent<UiComponentConfig>) {
-		super(content);
-		this.getMainDomElement().addClass("UiDropDown");
+		this.$dropDown = parseHtml(`<div class="UiDropDown teamapps-blurredBackgroundImage">
+                <div class="background-color-div"></div>
+              </div>`);
+		this.$contentContainer = this.$dropDown.querySelector<HTMLElement>(':scope .background-color-div');
+
+		if (content) {
+			this.setContentComponent(content);
+		}
+	}
+
+	setContentComponent(component: UiComponent<UiComponentConfig>) {
+		this.$contentContainer.innerHTML = '';
+		if (this._contentComponent && this.onComponentRemoved) {
+			this.onComponentRemoved.fire(this._contentComponent);
+		}
+
+		this._contentComponent = component;
+
+		if (component != null) {
+			this.$contentContainer.append(component.getMainElement())
+		}
+
+		if (this._isOpen) {
+			this.open(this.currentOpenConfig);
+		}
+	}
+
+	open(config: OpenConfig) {
+		config.width = config.width || 250;
+		config.viewPortPadding = config.viewPortPadding || 5;
+		config.minHeight = config.minHeight || 0;
+
+		this.currentOpenConfig = config;
+
+		if (this._contentComponent == null) {
+			this.$contentContainer.innerHTML = '';
+			this.$contentContainer.appendChild(this.spinner.getMainDomElement());
+		}
+
+		if (!this._isOpen) {
+			this.$contentContainer.querySelector<HTMLElement>(":scope >*")
+				.style.minHeight = config.minHeight + "px";
+			this.$dropDown.style.width = config.width + "px";
+			document.body.appendChild(this.$dropDown);
+			this.$dropDown.classList.add('open');
+			positionDropDown(this.currentOpenConfig.$reference, this.$dropDown, this.currentOpenConfig);
+
+			this._isOpen = true;
+			this.clickOutsideHandle = doOnceOnClickOutsideElement(this.$dropDown, () => {
+				if (this._isOpen) {
+					this.close();
+				}
+			});
+		}
+	}
+
+	close() {
+		if (this.clickOutsideHandle != null) {
+			this.clickOutsideHandle.cancel();
+		}
+		if (this._isOpen) {
+			this.$dropDown.classList.remove('open');
+			this.$dropDown.remove();
+			this.onClose && this.onClose.fire(null);
+		}
+		this._isOpen = false;
+	}
+
+	get isOpen() {
+		return this._isOpen;
 	}
 
-	doOpen(options: OpenConfig) {
-		options.width = options.width || 250;
-		options.viewPortPadding = options.viewPortPadding || 5;
-		options.minHeight = options.minHeight || 0;
-		// this.$contentContainer.css("height", minHeight + "px");
-		this.$contentContainer.find(">*").css("min-height", options.minHeight + "px");
-		this.$dropDown.css("width", options.width + "px");
-		this.$dropDown.appendTo(document.body);
-		this.$dropDown.addClass('open');
-		positionDropDown($(this.currentOpenConfig.$reference), this.$dropDown, this.currentOpenConfig);
+	public getMainDomElement(): HTMLElement {
+		return this.$dropDown;
 	}
 
-	protected doClose(): void {
-		this.$dropDown.removeClass('open');
-		this.$dropDown.detach();
+	public getScrollContainer(): HTMLElement {
+		return this.$contentContainer;
 	}
 }
diff --git a/teamapps-client/ts/modules/micro-components/UiGridLayout.ts b/teamapps-client/ts/modules/micro-components/UiGridLayout.ts
index f9d8f63a4..fd344fc4f 100644
--- a/teamapps-client/ts/modules/micro-components/UiGridLayout.ts
+++ b/teamapps-client/ts/modules/micro-components/UiGridLayout.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -21,7 +21,7 @@ import {UiGridLayoutConfig} from "../../generated/UiGridLayoutConfig";
 import {
 	createCssGridRowOrColumnString,
 	createUiBorderCssObject,
-	createUiColorCssObject, createUiColorCssString,
+	createUiColorCssObject,
 	createUiShadowCssObject,
 	createUiSpacingCssObject,
 	cssHorizontalAlignmentByUiVerticalAlignment, cssObjectToString, CssPropertyObject,
@@ -29,10 +29,11 @@ import {
 } from "../util/CssFormatUtil";
 import {UiFormSectionPlacementConfig} from "../../generated/UiFormSectionPlacementConfig";
 import {UiGridPlacementConfig} from "../../generated/UiGridPlacementConfig";
-import {UiComponent} from "../UiComponent";
-import {flattenArray, generateUUID} from "../Common";
+import {AbstractUiComponent} from "../AbstractUiComponent";
+import {generateUUID, parseHtml} from "../Common";
 import {UiComponentGridPlacementConfig} from "../../generated/UiComponentGridPlacementConfig";
 import {UiFloatingComponentGridPlacementConfig} from "../../generated/UiFloatingComponentGridPlacementConfig";
+import {UiComponent} from "../UiComponent";
 
 export class UiGridLayout {
 
@@ -41,17 +42,18 @@ export class UiGridLayout {
 	constructor(private config: UiGridLayoutConfig) {
 	}
 
-	public applyTo($container: JQuery) {
-		$container.attr("data-grid-layout-uuid", this.uuid);
+	public applyTo($container: HTMLElement) {
+		$container.setAttribute("data-grid-layout-uuid", this.uuid);
 
 		const containerCssObject = this.createContainerStyles();
 		const cssPropertyObjectByPlacementId = this.placeComponents($container);
 		
-		let $stylesContainer: JQuery = $container.find("> style[data-grid-layout-placement-styles]");
-		if ($stylesContainer.length === 0) {
-			$stylesContainer = $("<style data-grid-layout-placement-styles></style>").appendTo($container);
+		let $stylesContainer: HTMLElement = $container.querySelector<HTMLElement>(":scope > style[data-grid-layout-placement-styles]");
+		if ($stylesContainer == null) {
+			$stylesContainer = parseHtml("<style data-grid-layout-placement-styles></style>");
+			$container.appendChild($stylesContainer);
 		}
-		$stylesContainer.text(this.createStylesCssString(containerCssObject, cssPropertyObjectByPlacementId));
+		$stylesContainer.innerText = this.createStylesCssString(containerCssObject, cssPropertyObjectByPlacementId);
 	}
 
 	private createContainerStyles() {
@@ -69,29 +71,28 @@ export class UiGridLayout {
 		};
 	}
 
-	private placeComponents($container: JQuery) {
+	private placeComponents($container: HTMLElement) {
 		const cssRules: { [componentNameOrWrapperId: string]: CssPropertyObject } = {};
 
 		this.config.componentPlacements.forEach(placement => {
 			const placementId = generateUUID();
 			if (this.isSimplePlacement(placement)) {
-				const component: UiComponent = placement.component;
+				const component = placement.component as UiComponent;
 				cssRules[placementId] = {
 					...this.createPlacementStyles(placement),
 					"min-height": placement.minHeight ? `${placement.minHeight}px` : '',
 					"max-height": placement.maxHeight ? `${placement.maxHeight}px` : ''
 				};
-				component.getMainDomElement()
-					.attr("data-placement-uuid", placementId)
-					.appendTo($container);
+				component.getMainElement().setAttribute("data-placement-uuid", placementId);
+				$container.appendChild(component.getMainElement());
 			} else if (this.isFloatingPlacement(placement)) {
-				let $floatingContainer = $(`<div data-placement-uuid="${placementId}"></div>`);
+				let $floatingContainer = parseHtml(`<div data-placement-uuid="${placementId}"></div>`);
 				cssRules[placementId] = {
 					...this.createPlacementStyles(placement),
 					"flex-wrap": placement.wrap ? "wrap" : "nowrap"
 				};
 				placement.components.forEach(floatingComponent => {
-					const uiComponent: UiComponent = floatingComponent.component;
+					const uiComponent = floatingComponent.component as AbstractUiComponent;
 					cssRules[uiComponent.getId()] = {
 						"min-width": floatingComponent.minWidth ? `${floatingComponent.minWidth}px` : '',
 						"max-width": floatingComponent.maxWidth ? `${floatingComponent.maxWidth}px` : '',
@@ -99,11 +100,10 @@ export class UiGridLayout {
 						"max-height": floatingComponent.maxHeight ? `${floatingComponent.maxHeight}px` : '',
 						"margin": `${placement.verticalSpacing / 2}px ${placement.horizontalSpacing / 2}px`
 					};
-					uiComponent.getMainDomElement()
-						.attr("data-placement-uuid", placementId)
-						.appendTo($floatingContainer);
+					uiComponent.getMainElement().setAttribute("data-placement-uuid", placementId);
+					$floatingContainer.appendChild(uiComponent.getMainElement());
 				});
-				$floatingContainer.appendTo($container);
+				$container.appendChild($floatingContainer);
 			}
 		});
 
@@ -145,12 +145,12 @@ export class UiGridLayout {
 	}
 
 	public getAllComponents(): UiComponent[] {
-		return flattenArray(this.config.componentPlacements.map(p => {
+		return this.config.componentPlacements.map(p => {
 			if (this.isSimplePlacement(p)) {
-				return p.component;
+				return p.component as UiComponent;
 			} else if (this.isFloatingPlacement(p)) {
-				return p.components.map(c => c.component);
+				return p.components.map(c => c.component as UiComponent);
 			}
-		}));
+		}).flat(Number.MAX_SAFE_INTEGER) as UiComponent[];
 	}
 }
diff --git a/teamapps-client/ts/modules/micro-components/UiSpinner.ts b/teamapps-client/ts/modules/micro-components/UiSpinner.ts
index c9785e6fd..ccb4a1479 100644
--- a/teamapps-client/ts/modules/micro-components/UiSpinner.ts
+++ b/teamapps-client/ts/modules/micro-components/UiSpinner.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,18 +17,19 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-import * as $ from "jquery";
+
+import {parseHtml} from "../Common";
 
 export class UiSpinner {
-	private $mainDomElement: JQuery;
+	private $mainDomElement: HTMLElement;
 
 	constructor(options?: { fixedSize?: number | string }) {
 		options = options || {};
-		this.$mainDomElement = $(`<div class="UiSpinner"><div class="teamapps-spinner"></div></div>`);
+		this.$mainDomElement = parseHtml(`<div class="UiSpinner"><div class="teamapps-spinner"></div></div>`);
 		let fixedSizeCssValue: string = options.fixedSize == null ? "100%" : typeof options.fixedSize === "number" ? options.fixedSize + "px" :  options.fixedSize;
-		const $spinner = this.$mainDomElement.find(".teamapps-spinner");
-		$spinner.css("width", fixedSizeCssValue);
-		$spinner.css("height", fixedSizeCssValue);
+		const $spinner = this.$mainDomElement.querySelector<HTMLElement>(":scope .teamapps-spinner");
+		$spinner.style.width = fixedSizeCssValue;
+		$spinner.style.height = fixedSizeCssValue;
 	}
 
 	public getMainDomElement() {
diff --git a/teamapps-client/ts/modules/micro-components/UiToolButton.ts b/teamapps-client/ts/modules/micro-components/UiToolButton.ts
index 76e6265be..c28f84eb3 100644
--- a/teamapps-client/ts/modules/micro-components/UiToolButton.ts
+++ b/teamapps-client/ts/modules/micro-components/UiToolButton.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,25 +17,32 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-import * as $ from "jquery";
+
 import {TeamAppsUiContext} from "../TeamAppsUiContext";
-import {UiToolButton_ClickedEvent, UiToolButton_DropDownOpenedEvent, UiToolButtonCommandHandler, UiToolButtonConfig, UiToolButtonEventSource} from "../../generated/UiToolButtonConfig";
-import {UiComponent} from "../UiComponent";
+import {
+	UiToolButton_ClickedEvent,
+	UiToolButton_DropDownOpenedEvent,
+	UiToolButtonCommandHandler,
+	UiToolButtonConfig,
+	UiToolButtonEventSource
+} from "../../generated/UiToolButtonConfig";
+import {AbstractUiComponent} from "../AbstractUiComponent";
 import {TeamAppsEvent} from "../util/TeamAppsEvent";
-import {UiComponentConfig} from "../../generated/UiComponentConfig";
-import {EventFactory} from "../../generated/EventFactory";
 import {UiDropDown} from "./UiDropDown";
 import {UiItemView} from "../UiItemView";
 import {bind} from "../util/Bind";
 import {TeamAppsUiComponentRegistry} from "../TeamAppsUiComponentRegistry";
-import {UiCalendar} from "../UiCalendar";
+import {parseHtml, stopEventPropagations} from "../Common";
+import {UiComponent} from "../UiComponent";
 
-export class UiToolButton extends UiComponent<UiToolButtonConfig> implements UiToolButtonEventSource, UiToolButtonCommandHandler {
+export class UiToolButton extends AbstractUiComponent<UiToolButtonConfig> implements UiToolButtonEventSource, UiToolButtonCommandHandler {
 
-	public readonly onClicked: TeamAppsEvent<UiToolButton_ClickedEvent> = new TeamAppsEvent(this);
-	public readonly onDropDownOpened: TeamAppsEvent<UiToolButton_DropDownOpenedEvent> = new TeamAppsEvent(this);
+	public readonly onClicked: TeamAppsEvent<UiToolButton_ClickedEvent> = new TeamAppsEvent();
+	public readonly onDropDownOpened: TeamAppsEvent<UiToolButton_DropDownOpenedEvent> = new TeamAppsEvent();
 
-	private $button: JQuery;
+	private $button: HTMLElement;
+	private $icon: HTMLElement;
+	private $caption: HTMLElement;
 
 	private _dropDown: UiDropDown; // lazy-init!
 	private dropDownComponent: UiComponent;
@@ -50,35 +57,45 @@ export class UiToolButton extends UiComponent<UiToolButtonConfig> implements UiT
 		this.minDropDownHeight = config.minDropDownHeight;
 		this.openDropDownIfNotSet = config.openDropDownIfNotSet;
 
-		this.$button = $(`<div class="UiToolButton img img-12 ${config.grayOutIfNotHovered ? 'gray-out-if-not-hovered' : ''}" style="background-image: url(${context.getIconPath(config.icon, 12)});"></div>`)
-			.on('click', () => {
-				if (this.dropDownComponent != null || this.openDropDownIfNotSet) {
-					if (!this.dropDown.isOpen) {
-						const width = this.getMainDomElement()[0].offsetWidth;
-						console.log(width);
-						this.dropDown.open({$reference: this.getMainDomElement(), width: Math.max(this.minDropDownWidth, width), minHeight: this.minDropDownHeight});
-						this.onDropDownOpened.fire(EventFactory.createUiToolButton_DropDownOpenedEvent(this.getId()));
-						this.getMainDomElement().addClass("open");
-					} else {
-						this.dropDown.close(); // not needed for clicks, but for keydown!
-					}
+		this.$button = parseHtml(`<div class="UiToolButton" title="${config.title ?? ''}">
+	<div class="img ${config.grayOutIfNotHovered ? 'gray-out-if-not-hovered' : ''}" style="background-image: url('${config.icon}');"></div>
+	<div class="caption">${config.caption ?? ""}</div>
+</div>`);
+		this.$icon = this.$button.querySelector(":scope .img");
+		this.$caption = this.$button.querySelector(":scope .caption");
+		this.$button.addEventListener('click', () => {
+			if (this.dropDownComponent != null || this.openDropDownIfNotSet) {
+				if (!this.dropDown.isOpen) {
+					const width = this.getMainElement().offsetWidth;
+					this.dropDown.open({
+						$reference: this.getMainElement(),
+						width: Math.max(this.minDropDownWidth, width),
+						minHeight: this.minDropDownHeight
+					});
+					this.onDropDownOpened.fire({});
+					this.getMainElement().classList.add("open");
+				} else {
+					this.dropDown.close(); // not needed for clicks, but for keydown!
 				}
-				this.onClicked.fire(EventFactory.createUiToolButton_ClickedEvent(this.getId()));
-			});
-		this.setDropDownComponent(config.dropDownComponent);
+			}
+			this.onClicked.fire({});
+		});
+		stopEventPropagations(this.$button, "mousedown", "pointerdown", "click")
+		this.setIconSize(config.iconSize);
+		this.setDropDownComponent(config.dropDownComponent as UiComponent);
 	}
 
 	private get dropDown(): UiDropDown {
 		// lazy-init!
 		if (this._dropDown == null) {
 			this._dropDown = new UiDropDown();
-			this._dropDown.getMainDomElement().addClass("UiButton-dropdown");
-			this._dropDown.onClose.addListener(eventObject => this.getMainDomElement().removeClass("open"))
+			this._dropDown.getMainDomElement().classList.add("UiButton-dropdown");
+			this._dropDown.onClose.addListener(() => this.getMainElement().classList.remove("open"))
 		}
 		return this._dropDown;
 	}
 
-	getMainDomElement(): JQuery {
+	doGetMainElement(): HTMLElement {
 		return this.$button;
 	}
 
@@ -97,7 +114,6 @@ export class UiToolButton extends UiComponent<UiToolButtonConfig> implements UiT
 				this.dropDownComponent.onItemClicked.addListener(this.closeDropDown);
 			}
 			this.dropDown.setContentComponent(this.dropDownComponent);
-			this.dropDownComponent.attachedToDom = true;
 		} else {
 			this.dropDownComponent = null;
 			this.dropDown.setContentComponent(null);
@@ -105,7 +121,7 @@ export class UiToolButton extends UiComponent<UiToolButtonConfig> implements UiT
 	}
 
 	@bind
-	private closeDropDown() {
+	public closeDropDown() {
 		this.dropDown.close();
 	}
 
@@ -118,16 +134,30 @@ export class UiToolButton extends UiComponent<UiToolButtonConfig> implements UiT
 	}
 
 	setIcon(icon: string): void {
-		this.$button.css("background-image", `url(${this._context.getIconPath(icon, 12)})`)
+		this.$icon.style.backgroundImage = `url('${icon}')`;
 	}
 
-	setPopoverText(popoverText: string): void {
-		// TODO
+	setIconSize(iconSize: number | null): any {
+		if (iconSize != null) {
+			this.$icon.style.width = `${iconSize}px`;
+			this.$icon.style.height = `${iconSize}px`;
+			this.$icon.style.backgroundSize = `${iconSize}px`;
+		} else {
+			this.$icon.style.width = null;
+			this.$icon.style.height = null;
+			this.$icon.style.backgroundSize = null;
+		}
 	}
 
-	destroy(): void {
+	setCaption(caption: string) {
+		this.$caption.innerText = caption;
 	}
 
+	setTitle(title: string) {
+		this.getMainElement().title = title;
+	}
+
+
 }
 
 TeamAppsUiComponentRegistry.registerComponentClass("UiToolButton", UiToolButton);
diff --git a/teamapps-client/ts/modules/pdf-viewer/BaseRenderContext.ts b/teamapps-client/ts/modules/pdf-viewer/BaseRenderContext.ts
new file mode 100644
index 000000000..53135e42d
--- /dev/null
+++ b/teamapps-client/ts/modules/pdf-viewer/BaseRenderContext.ts
@@ -0,0 +1,7 @@
+import type {PDFDocumentProxy} from "pdfjs-dist";
+
+export type BaseRenderContext = {
+	requestId: number;
+	getCurrentRenderRequestId: () => number;
+	pdfDocument: PDFDocumentProxy;
+};
diff --git a/teamapps-client/ts/modules/pdf-viewer/ContinuousRenderer.ts b/teamapps-client/ts/modules/pdf-viewer/ContinuousRenderer.ts
new file mode 100644
index 000000000..e18ffa65a
--- /dev/null
+++ b/teamapps-client/ts/modules/pdf-viewer/ContinuousRenderer.ts
@@ -0,0 +1,84 @@
+import type {PDFPageProxy, PageViewport} from "pdfjs-dist";
+import {UiBorderConfig} from "../../generated/UiBorderConfig";
+import type {BaseRenderContext} from "./BaseRenderContext";
+
+export type ContinuousRenderContext = BaseRenderContext & {
+	maxPageNumber: number;
+	pagesContainer: HTMLDivElement;
+	uuidClass: string;
+	pageBorder?: UiBorderConfig;
+};
+
+export type ContinuousRendererCallbacks = {
+	calculateZoomScale: (page: PDFPageProxy) => { scale: number, viewport: PageViewport };
+	applyPageBorderToCanvas: (canvas: HTMLCanvasElement) => void;
+	updateDevRenderStats: () => void;
+};
+
+export class ContinuousRenderer {
+	private readonly callbacks: ContinuousRendererCallbacks;
+
+	constructor(callbacks: ContinuousRendererCallbacks) {
+		this.callbacks = callbacks;
+	}
+
+	public async render(context: ContinuousRenderContext) {
+		// Ignore stale render generations after async re-render triggers.
+		if (context.requestId !== context.getCurrentRenderRequestId()) {
+			return;
+		}
+
+		const maxPageNumber = context.maxPageNumber;
+		if (maxPageNumber > 5) {
+			console.warn(`PdfViewer: CONTINUOUS mode with ${maxPageNumber} pages may impact performance. Consider using SINGLE_PAGE mode.`);
+		}
+
+		const firstPage = await context.pdfDocument.getPage(1);
+		// Rendering request became stale while awaiting page data.
+		if (context.requestId !== context.getCurrentRenderRequestId()) {
+			return;
+		}
+		const {scale} = this.callbacks.calculateZoomScale(firstPage);
+		const $pagesContainer = context.pagesContainer;
+		$pagesContainer.innerHTML = '';
+
+		for (let pageNum = 1; pageNum <= maxPageNumber; pageNum++) {
+			if (context.requestId !== context.getCurrentRenderRequestId()) {
+				return;
+			}
+			const page = await context.pdfDocument.getPage(pageNum);
+			if (context.requestId !== context.getCurrentRenderRequestId()) {
+				return;
+			}
+			const viewport = page.getViewport({scale});
+			const hiDPIScale = window.devicePixelRatio || 1;
+
+			const canvas = document.createElement('canvas');
+			canvas.className = context.uuidClass;
+			const canvasContext = canvas.getContext('2d');
+
+			canvas.width = Math.floor(viewport.width * hiDPIScale);
+			canvas.height = Math.floor(viewport.height * hiDPIScale);
+			canvas.style.width = Math.floor(viewport.width) + "px";
+			canvas.style.height = Math.floor(viewport.height) + "px";
+
+			if (context.pageBorder) {
+				this.callbacks.applyPageBorderToCanvas(canvas);
+			}
+
+			const transform = hiDPIScale !== 1 ?
+				[hiDPIScale, 0, 0, hiDPIScale, 0, 0] :
+				null;
+
+			const renderContext = {
+				canvasContext,
+				transform,
+				viewport
+			};
+
+			$pagesContainer.appendChild(canvas);
+			page.render(renderContext);
+			this.callbacks.updateDevRenderStats();
+		}
+	}
+}
diff --git a/teamapps-client/ts/modules/pdf-viewer/ContinuousVirtualRenderer.ts b/teamapps-client/ts/modules/pdf-viewer/ContinuousVirtualRenderer.ts
new file mode 100644
index 000000000..b60ad5571
--- /dev/null
+++ b/teamapps-client/ts/modules/pdf-viewer/ContinuousVirtualRenderer.ts
@@ -0,0 +1,422 @@
+import type {PDFPageProxy, PageViewport} from "pdfjs-dist";
+import {Virtualizer, elementScroll, observeElementOffset, observeElementRect} from "@tanstack/virtual-core";
+import type {VirtualItem} from "@tanstack/virtual-core";
+import {UiPdfViewerConfig} from "../../generated/UiPdfViewerConfig";
+import type {BaseRenderContext} from "./BaseRenderContext";
+
+export type ContinuousVirtualRenderContext = BaseRenderContext & {
+	maxPageNumber: number;
+	config: UiPdfViewerConfig;
+	pagesContainer: HTMLDivElement;
+	canvasContainer: HTMLDivElement;
+	uuidClass: string;
+};
+
+export type ContinuousVirtualRendererCallbacks = {
+	calculateZoomScale: (page: PDFPageProxy) => { scale: number, viewport: PageViewport };
+	applyPageBorderToCanvas: (canvas: HTMLCanvasElement) => void;
+	updateDevRenderStats: () => void;
+};
+
+export class ContinuousVirtualRenderer {
+	private readonly callbacks: ContinuousVirtualRendererCallbacks;
+	private activeContext: ContinuousVirtualRenderContext = null;
+	private virtualizer: Virtualizer<HTMLDivElement, HTMLCanvasElement> = null;
+	private $virtualInner: HTMLDivElement = null;
+	private readonly virtualOverscan = 2;
+	private virtualizerScale: number = null;
+	private virtualizerHiDpiScale: number = 1;
+	private virtualEstimatePageHeight: number = 0;
+	private virtualPageCanvases = new Map<number, HTMLCanvasElement>();
+	private virtualPageRenderTasks = new Map<number, { scale: number, task: any }>();
+	private virtualPageRenderScales = new Map<number, number>();
+	private virtualMeasuredPageHeights = new Map<number, number>();
+	private forceVirtualizerRecreate = false;
+	private observedScrollElement: HTMLDivElement = null;
+	private scrollResizeObserver: ResizeObserver = null;
+	private scheduledRenderAnimationFrameId: number = null;
+
+	constructor(callbacks: ContinuousVirtualRendererCallbacks) {
+		this.callbacks = callbacks;
+	}
+
+	public async render(context: ContinuousVirtualRenderContext) {
+		this.activeContext = context;
+		// Ignore stale render generations after async re-render triggers.
+		if (context.requestId !== context.getCurrentRenderRequestId()) {
+			return;
+		}
+
+		const firstPage = await context.pdfDocument.getPage(1);
+		// Rendering request became stale while awaiting page data.
+		if (context.requestId !== context.getCurrentRenderRequestId()) {
+			return;
+		}
+		const {scale} = this.callbacks.calculateZoomScale(firstPage);
+		const viewport = firstPage.getViewport({scale});
+		this.virtualEstimatePageHeight = Math.floor(viewport.height);
+		this.virtualizerHiDpiScale = window.devicePixelRatio || 1;
+
+		this.cancelRenderTasks();
+		if (this.forceVirtualizerRecreate || (this.virtualizerScale != null && this.virtualizerScale !== scale)) {
+			this.virtualPageRenderScales.clear();
+			this.virtualMeasuredPageHeights.clear();
+		}
+		this.virtualizerScale = scale;
+		this.forceVirtualizerRecreate = false;
+
+		this.ensureVirtualInnerContainer();
+		this.ensureScrollObservers();
+		this.renderVirtualItems(context.requestId);
+	}
+
+	public teardown() {
+		this.activeContext = null;
+		this.detachScrollObservers();
+		this.cancelScheduledVirtualRender();
+		if (this.virtualizer) {
+			this.virtualizer = null;
+		}
+		if (this.$virtualInner && this.$virtualInner.parentElement) {
+			this.$virtualInner.remove();
+		}
+		this.$virtualInner = null;
+		this.virtualPageCanvases.clear();
+		this.virtualPageRenderScales.clear();
+		this.virtualMeasuredPageHeights.clear();
+		this.virtualPageRenderTasks.forEach((task) => {
+			if (task?.task && typeof task.task.cancel === "function") {
+				task.task.cancel();
+			}
+		});
+		this.virtualPageRenderTasks.clear();
+		this.virtualizerScale = null;
+	}
+
+	public cancelRenderTasks() {
+		this.virtualPageRenderTasks.forEach((task) => {
+			if (task?.task && typeof task.task.cancel === "function") {
+				task.task.cancel();
+			}
+		});
+		this.virtualPageRenderTasks.clear();
+	}
+
+	public markForRecreate() {
+		this.forceVirtualizerRecreate = true;
+	}
+
+	public hasVirtualizer(): boolean {
+		return this.virtualizer != null;
+	}
+
+	public scrollToIndex(index: number) {
+		if (index < 0) {
+			return;
+		}
+		const context = this.activeContext;
+		if (!context) {
+			return;
+		}
+		const scrollElement = context.canvasContainer;
+		if (!scrollElement) {
+			return;
+		}
+		scrollElement.scrollTop = this.getEstimatedOffsetForIndex(index);
+		this.scheduleVirtualRender();
+	}
+
+	private getEstimatedOffsetForIndex(index: number): number {
+		const context = this.activeContext;
+		if (!context) {
+			return 0;
+		}
+		const maxPageNumber = context.maxPageNumber;
+		const clampedIndex = Math.max(0, Math.min(index, Math.max(0, maxPageNumber - 1)));
+		const gap = Math.max(0, context.config.pageSpacing || 0);
+		let offset = 0;
+
+		for (let i = 0; i < clampedIndex; i++) {
+			offset += this.getVirtualEstimateSize(i + 1);
+			if (i < maxPageNumber - 1) {
+				offset += gap;
+			}
+		}
+
+		return Math.max(0, offset);
+	}
+
+	private ensureVirtualInnerContainer() {
+		if (!this.$virtualInner) {
+			this.$virtualInner = document.createElement('div');
+			this.$virtualInner.className = `${this.activeContext?.uuidClass ?? ""} virtual-inner`;
+			this.$virtualInner.style.position = "relative";
+			this.$virtualInner.style.width = "100%";
+		}
+
+		const context = this.activeContext;
+		if (!context) {
+			return;
+		}
+		const $pagesContainer = context.pagesContainer;
+		if (this.$virtualInner.parentElement !== $pagesContainer) {
+			$pagesContainer.innerHTML = '';
+			$pagesContainer.appendChild(this.$virtualInner);
+		}
+	}
+
+	private ensureScrollObservers() {
+		const context = this.activeContext;
+		if (!context) {
+			return;
+		}
+		const scrollElement = context.canvasContainer;
+		if (!scrollElement || this.observedScrollElement === scrollElement) {
+			return;
+		}
+
+		this.detachScrollObservers();
+		this.observedScrollElement = scrollElement;
+		this.observedScrollElement.addEventListener("scroll", this.onScroll, {passive: true});
+		window.addEventListener("resize", this.onWindowResize);
+
+		if (typeof ResizeObserver !== "undefined") {
+			this.scrollResizeObserver = new ResizeObserver(() => {
+				this.scheduleVirtualRender();
+			});
+			this.scrollResizeObserver.observe(this.observedScrollElement);
+		}
+	}
+
+	private detachScrollObservers() {
+		if (this.observedScrollElement) {
+			this.observedScrollElement.removeEventListener("scroll", this.onScroll);
+			this.observedScrollElement = null;
+		}
+		window.removeEventListener("resize", this.onWindowResize);
+		if (this.scrollResizeObserver) {
+			this.scrollResizeObserver.disconnect();
+			this.scrollResizeObserver = null;
+		}
+	}
+
+	private readonly onScroll = () => {
+		this.scheduleVirtualRender();
+	};
+
+	private readonly onWindowResize = () => {
+		this.scheduleVirtualRender();
+	};
+
+	private scheduleVirtualRender() {
+		if (this.scheduledRenderAnimationFrameId != null) {
+			return;
+		}
+		this.scheduledRenderAnimationFrameId = window.requestAnimationFrame(() => {
+			this.scheduledRenderAnimationFrameId = null;
+			const context = this.activeContext;
+			if (!context) {
+				return;
+			}
+			this.renderVirtualItems(context.getCurrentRenderRequestId());
+		});
+	}
+
+	private cancelScheduledVirtualRender() {
+		if (this.scheduledRenderAnimationFrameId == null) {
+			return;
+		}
+		window.cancelAnimationFrame(this.scheduledRenderAnimationFrameId);
+		this.scheduledRenderAnimationFrameId = null;
+	}
+
+	private createVirtualizerSnapshot(): Virtualizer<HTMLDivElement, HTMLCanvasElement> | null {
+		const context = this.activeContext;
+		if (!context) {
+			return null;
+		}
+		const scrollElement = context.canvasContainer;
+		const maxPageNumber = context.maxPageNumber;
+		if (!scrollElement || maxPageNumber <= 0) {
+			return null;
+		}
+
+		const rect = scrollElement.getBoundingClientRect();
+		return new Virtualizer({
+			count: maxPageNumber,
+			getScrollElement: () => scrollElement,
+			estimateSize: (index) => this.getVirtualEstimateSize(index + 1),
+			gap: context.config.pageSpacing,
+			overscan: this.virtualOverscan,
+			getItemKey: (index) => index + 1,
+			observeElementRect,
+			observeElementOffset,
+			scrollToFn: elementScroll,
+			initialRect: {
+				width: Math.max(0, rect.width),
+				height: Math.max(0, rect.height)
+			},
+			initialOffset: scrollElement.scrollTop
+		});
+	}
+
+	private getVirtualEstimateSize(pageNumber: number): number {
+		const measuredHeight = this.virtualMeasuredPageHeights.get(pageNumber);
+		if (measuredHeight != null) {
+			return Math.max(1, measuredHeight);
+		}
+		return Math.max(1, this.virtualEstimatePageHeight || 1);
+	}
+
+	private renderVirtualItems(requestId: number) {
+		const context = this.activeContext;
+		if (!context || requestId !== context.getCurrentRenderRequestId() || !this.$virtualInner) {
+			return;
+		}
+
+		const virtualizer = this.createVirtualizerSnapshot();
+		if (!virtualizer) {
+			return;
+		}
+		this.virtualizer = virtualizer;
+
+		const virtualItems = this.virtualizer.getVirtualItems();
+		this.$virtualInner.style.height = `${this.virtualizer.getTotalSize()}px`;
+		this.$virtualInner.innerHTML = '';
+
+		for (const virtualItem of virtualItems) {
+			const pageNumber = virtualItem.index + 1;
+			const canvas = this.getOrCreateVirtualCanvas(pageNumber);
+			const wrapper = document.createElement('div');
+			wrapper.dataset.index = String(virtualItem.index);
+			wrapper.style.position = "absolute";
+			wrapper.style.top = "0";
+			wrapper.style.left = "0";
+			wrapper.style.width = "100%";
+			wrapper.style.display = "flex";
+			wrapper.style.justifyContent = "center";
+			wrapper.style.alignItems = "center";
+			wrapper.style.transform = `translateY(${virtualItem.start}px)`;
+			wrapper.style.height = `${Math.max(1, Math.floor(virtualItem.size))}px`;
+
+			canvas.style.visibility = "visible";
+			canvas.style.display = "block";
+			canvas.style.margin = "0 auto";
+
+			wrapper.appendChild(canvas);
+			this.$virtualInner.appendChild(wrapper);
+		}
+
+		this.renderVisibleVirtualPages(virtualItems, requestId);
+		this.callbacks.updateDevRenderStats();
+	}
+
+	private getOrCreateVirtualCanvas(pageNumber: number): HTMLCanvasElement {
+		let canvas = this.virtualPageCanvases.get(pageNumber);
+		if (!canvas) {
+			canvas = document.createElement('canvas');
+			canvas.className = this.activeContext?.uuidClass ?? "";
+			canvas.dataset.index = String(pageNumber - 1);
+			if (this.activeContext?.config.pageBorder) {
+				this.callbacks.applyPageBorderToCanvas(canvas);
+			}
+			this.virtualPageCanvases.set(pageNumber, canvas);
+		}
+		return canvas;
+	}
+
+	private renderVisibleVirtualPages(virtualItems: VirtualItem[], requestId: number) {
+		const context = this.activeContext;
+		if (!context || requestId !== context.getCurrentRenderRequestId()) {
+			return;
+		}
+
+		for (const virtualItem of virtualItems) {
+			const pageNumber = virtualItem.index + 1;
+			const canvas = this.virtualPageCanvases.get(pageNumber);
+			if (!canvas) {
+				continue;
+			}
+			const lastScale = this.virtualPageRenderScales.get(pageNumber);
+			if (lastScale === this.virtualizerScale) {
+				continue;
+			}
+			const inFlight = this.virtualPageRenderTasks.get(pageNumber);
+			if (inFlight && inFlight.scale === this.virtualizerScale) {
+				continue;
+			}
+			void this.renderVirtualPage(pageNumber, canvas, requestId);
+		}
+	}
+
+	private async renderVirtualPage(pageNumber: number, canvas: HTMLCanvasElement, requestId: number) {
+		const context = this.activeContext;
+		if (!context || requestId !== context.getCurrentRenderRequestId()) {
+			return;
+		}
+
+		const page = await this.loadPageForRender(pageNumber, requestId);
+		if (!page) {
+			return;
+		}
+		if (requestId !== context.getCurrentRenderRequestId()) {
+			return;
+		}
+		const viewport = page.getViewport({scale: this.virtualizerScale});
+		const hiDPIScale = this.virtualizerHiDpiScale;
+		const canvasContext = canvas.getContext('2d');
+
+		canvas.width = Math.floor(viewport.width * hiDPIScale);
+		canvas.height = Math.floor(viewport.height * hiDPIScale);
+		canvas.style.width = Math.floor(viewport.width) + "px";
+		canvas.style.height = Math.floor(viewport.height) + "px";
+		if (canvasContext) {
+			canvasContext.setTransform(1, 0, 0, 1, 0, 0);
+			canvasContext.clearRect(0, 0, canvas.width, canvas.height);
+		}
+
+		const transform = hiDPIScale !== 1 ?
+			[hiDPIScale, 0, 0, hiDPIScale, 0, 0] :
+			null;
+
+		const renderContext = {
+			canvasContext,
+			transform,
+			viewport
+		};
+
+		const existingTask = this.virtualPageRenderTasks.get(pageNumber);
+		if (existingTask && existingTask.task && typeof existingTask.task.cancel === "function") {
+			existingTask.task.cancel();
+		}
+
+		const renderTask = page.render(renderContext);
+		this.virtualPageRenderTasks.set(pageNumber, {scale: this.virtualizerScale, task: renderTask});
+		try {
+			await renderTask.promise;
+			if (requestId !== context.getCurrentRenderRequestId()) {
+				return;
+			}
+			this.virtualPageRenderTasks.delete(pageNumber);
+			this.virtualPageRenderScales.set(pageNumber, this.virtualizerScale);
+			const measuredHeight = Math.max(1, Math.floor(viewport.height));
+			const previousHeight = this.virtualMeasuredPageHeights.get(pageNumber);
+			this.virtualMeasuredPageHeights.set(pageNumber, measuredHeight);
+			canvas.style.visibility = "visible";
+			if (previousHeight !== measuredHeight) {
+				this.scheduleVirtualRender();
+			}
+			this.callbacks.updateDevRenderStats();
+		} catch (error) {
+			this.virtualPageRenderTasks.delete(pageNumber);
+		}
+	}
+
+	private async loadPageForRender(pageNumber: number, requestId: number): Promise<PDFPageProxy | null> {
+		const context = this.activeContext;
+		if (!context || requestId !== context.getCurrentRenderRequestId()) {
+			return null;
+		}
+		return context.pdfDocument.getPage(pageNumber);
+	}
+}
diff --git a/teamapps-client/ts/modules/pdf-viewer/SinglePageRenderer.ts b/teamapps-client/ts/modules/pdf-viewer/SinglePageRenderer.ts
new file mode 100644
index 000000000..37e20a7ba
--- /dev/null
+++ b/teamapps-client/ts/modules/pdf-viewer/SinglePageRenderer.ts
@@ -0,0 +1,61 @@
+import type {PDFPageProxy, PageViewport} from "pdfjs-dist";
+import type {BaseRenderContext} from "./BaseRenderContext";
+
+export type SinglePageRenderContext = BaseRenderContext & {
+	currentPageNumber: number;
+	pagesContainer: HTMLDivElement;
+	canvas: HTMLCanvasElement;
+};
+
+export type SinglePageRendererCallbacks = {
+	calculateZoomScale: (page: PDFPageProxy) => { scale: number, viewport: PageViewport };
+	updateDevRenderStats: () => void;
+};
+
+export class SinglePageRenderer {
+	private readonly callbacks: SinglePageRendererCallbacks;
+
+	constructor(callbacks: SinglePageRendererCallbacks) {
+		this.callbacks = callbacks;
+	}
+
+	public async render(context: SinglePageRenderContext) {
+		// Ignore stale render generations after async re-render triggers.
+		if (context.requestId !== context.getCurrentRenderRequestId()) {
+			return;
+		}
+
+		const $pagesContainer = context.pagesContainer;
+		const canvas = context.canvas;
+		$pagesContainer.innerHTML = '';
+		$pagesContainer.appendChild(canvas);
+
+		const page = await context.pdfDocument.getPage(context.currentPageNumber);
+		// Rendering request became stale while awaiting page data.
+		if (context.requestId !== context.getCurrentRenderRequestId()) {
+			return;
+		}
+		const {viewport: pdfViewport} = this.callbacks.calculateZoomScale(page);
+		const hiDPIScale = window.devicePixelRatio || 1;
+		const canvasContext = canvas.getContext('2d');
+
+		canvas.width = Math.floor(pdfViewport.width * hiDPIScale);
+		canvas.height = Math.floor(pdfViewport.height * hiDPIScale);
+		canvas.style.width = Math.floor(pdfViewport.width) + "px";
+		canvas.style.height = Math.floor(pdfViewport.height) + "px";
+		canvas.style.overflowX = "auto";
+
+		const transform = hiDPIScale !== 1 ?
+			[hiDPIScale, 0, 0, hiDPIScale, 0, 0] :
+			null;
+
+		const renderContext = {
+			canvasContext,
+			transform,
+			viewport: pdfViewport
+		};
+
+		page.render(renderContext);
+		this.callbacks.updateDevRenderStats();
+	}
+}
diff --git a/teamapps-client/ts/modules/qr-code-scanner/qr-scanner.ts b/teamapps-client/ts/modules/qr-code-scanner/qr-scanner.ts
new file mode 100644
index 000000000..0d7077f38
--- /dev/null
+++ b/teamapps-client/ts/modules/qr-code-scanner/qr-scanner.ts
@@ -0,0 +1,377 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+/*-
+MIT License
+
+Copyright (c) 2017 Nimiq, danimoh
+Copyright (c) 2019 Yann Massard (yann.massard@teamapps.org) - migration to typescript
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+ */
+
+import QrWorker = require('worker-loader!./worker');
+
+type Rect = { x: number; width: number; y: number; height: number };
+type ImageSource = HTMLCanvasElement | HTMLVideoElement | HTMLImageElement | URL | File | string;
+type ImageSourceElement = HTMLCanvasElement | HTMLVideoElement | HTMLImageElement;
+
+export class QrScanner {
+
+	private $video: HTMLVideoElement;
+	private $canvas: HTMLCanvasElement;
+
+	private onDecode: (s: string) => void;
+
+	private active = false;
+	private paused = false;
+
+	private sourceRect: Rect;
+	private qrWorker: Worker;
+
+
+	constructor(video: HTMLVideoElement, onDecode: (s: string) => void, canvasSize = 400) {
+		this.$video = video;
+		this.$canvas = document.createElement('canvas');
+		this.onDecode = onDecode;
+
+		this.$canvas.width = canvasSize;
+		this.$canvas.height = canvasSize;
+		this.sourceRect = {
+			x: 0,
+			y: 0,
+			width: canvasSize,
+			height: canvasSize
+		};
+
+		this._onCanPlay = this._onCanPlay.bind(this);
+		this._onPlay = this._onPlay.bind(this);
+		this._onVisibilityChange = this._onVisibilityChange.bind(this);
+
+		this.$video.addEventListener('canplay', this._onCanPlay);
+		this.$video.addEventListener('play', this._onPlay);
+		document.addEventListener('visibilitychange', this._onVisibilityChange);
+
+		this.qrWorker = new QrWorker();
+	}
+
+	destroy() {
+		this.$video.removeEventListener('canplay', this._onCanPlay);
+		this.$video.removeEventListener('play', this._onPlay);
+		document.removeEventListener('visibilitychange', this._onVisibilityChange);
+
+		this.stop();
+		this.qrWorker.postMessage({
+			type: 'close'
+		});
+	}
+
+	/* async */
+	start(deviceId: string = null) {
+		if (this.active && !this.paused) {
+			return Promise.resolve();
+		}
+		if (window.location.protocol !== 'https:') {
+			// warn but try starting the camera anyways
+			console.warn('The camera stream is only accessible if the page is transferred via https.');
+		}
+		this.active = true;
+		this.paused = false;
+		if (document.hidden) {
+			// camera will be started as soon as tab is in foreground
+			return Promise.resolve();
+		}
+		if (this.$video.srcObject) {
+			// camera stream already/still set
+			this.$video.play();
+			return Promise.resolve();
+		}
+
+		let facingMode = 'environment';
+		return this.getCameraStream(deviceId, 'environment', true)
+			.catch(() => {
+				// we (probably) don't have an environment camera
+				facingMode = 'user';
+				return this.getCameraStream(deviceId); // throws if camera is not accessible (e.g. due to not https)
+			})
+			.then(stream => {
+				this.$video.srcObject = stream;
+				this.setVideoMirror(facingMode);
+			})
+			.catch(e => {
+				this.active = false;
+				throw e;
+			});
+	}
+
+	stop() {
+		this.pause();
+		this.active = false;
+	}
+
+	pause() {
+		this.paused = true;
+		if (!this.active) {
+			return;
+		}
+		this.$video.pause();
+		const track = this.$video.srcObject && (this.$video.srcObject as MediaStream).getTracks()[0];
+		if (!track) return;
+		track.stop();
+		this.$video.srcObject = null;
+	}
+
+	/* async */
+	static scanImage(imageOrFileOrUrl: ImageSource, sourceRect: Rect = null, worker: QrWorker = null, canvas: HTMLCanvasElement = null, fixedCanvasSize = false,
+	                 alsoTryWithoutSourceRect = false) {
+		let createdNewWorker = false;
+		let promise = new Promise((resolve, reject) => {
+			if (!worker) {
+				worker = new QrWorker();
+				createdNewWorker = true;
+				worker.postMessage({type: 'inversionMode', data: 'both'}); // scan inverted color qr codes too
+			}
+			let timeout: number,
+				onMessage: EventListener,
+				onError: EventListener;
+			onMessage = (event: MessageEvent) => {
+				if (event.data.type !== 'qrResult') {
+					return;
+				}
+				worker.removeEventListener('message', onMessage);
+				worker.removeEventListener('error', onError);
+				clearTimeout(timeout);
+				if (event.data.data !== null) {
+					resolve(event.data.data);
+				} else {
+					reject('QR code not found.');
+				}
+			};
+			onError = (e: ErrorEvent) => {
+				worker.removeEventListener('message', onMessage);
+				worker.removeEventListener('error', onError);
+				clearTimeout(timeout);
+				const errorMessage = !e ? 'Unknown Error' : (e.message || e);
+				reject('Scanner error: ' + errorMessage);
+			};
+			worker.addEventListener('message', onMessage);
+			worker.addEventListener('error', onError);
+			timeout = self.setTimeout(() => onError(new ErrorEvent('timeout', {message: 'timeout'})), 3000);
+			_loadImage(imageOrFileOrUrl).then(image => {
+				const imageData = _getImageData(image, sourceRect, canvas, fixedCanvasSize);
+				worker.postMessage({
+					type: 'decode',
+					data: imageData
+				}, [imageData.data.buffer]);
+			}).catch(onError);
+		});
+
+		if (sourceRect && alsoTryWithoutSourceRect) {
+			promise = promise.catch(() => QrScanner.scanImage(imageOrFileOrUrl, null, worker, canvas, fixedCanvasSize));
+		}
+
+		promise = promise.finally(() => {
+			if (!createdNewWorker) return;
+			worker.postMessage({
+				type: 'close'
+			});
+		});
+
+		return promise;
+	}
+
+	setGrayscaleWeights(red: number, green: number, blue: number, useIntegerApproximation = true) {
+		this.qrWorker.postMessage({
+			type: 'grayscaleWeights',
+			data: {red, green, blue, useIntegerApproximation}
+		});
+	}
+
+	setInversionMode(inversionMode: "original" | "invert" | "both") {
+		this.qrWorker.postMessage({
+			type: 'inversionMode',
+			data: inversionMode
+		});
+	}
+
+	private _onCanPlay() {
+		this._updateSourceRect();
+		this.$video.play();
+	}
+
+	private _onPlay() {
+		this._updateSourceRect();
+		this._scanFrame();
+	}
+
+	private _onVisibilityChange() {
+		if (document.hidden) {
+			this.pause();
+		} else if (this.active) {
+			this.start();
+		}
+	}
+
+	private _updateSourceRect() {
+		const smallestDimension = Math.min(this.$video.videoWidth, this.$video.videoHeight);
+		const sourceRectSize = Math.round(2 / 3 * smallestDimension);
+		this.sourceRect.width = this.sourceRect.height = sourceRectSize;
+		this.sourceRect.x = (this.$video.videoWidth - sourceRectSize) / 2;
+		this.sourceRect.y = (this.$video.videoHeight - sourceRectSize) / 2;
+	}
+
+	private _scanFrame() {
+		if (!this.active || this.$video.paused || this.$video.ended) return false;
+		// using requestAnimationFrame to avoid scanning if tab is in background
+		requestAnimationFrame(() => {
+			QrScanner.scanImage(this.$video, this.sourceRect, this.qrWorker, this.$canvas, true)
+				.then(this.onDecode, error => {
+					if (this.active && error !== 'QR code not found.') {
+						console.error(error);
+					}
+				})
+				.then(() => this._scanFrame());
+		});
+	}
+
+	private getCameraStream(deviceId: string, facingMode: any = null, exact = false) {
+		const constraintsToTry: MediaTrackConstraints[] = [{
+			width: {min: 1024}
+		}, {
+			width: {min: 768}
+		}, {}];
+
+		if (deviceId) {
+			constraintsToTry.forEach(c => c.deviceId = deviceId);
+		}
+
+		if (facingMode) {
+			if (exact) {
+				facingMode = {exact: facingMode};
+			}
+			constraintsToTry.forEach((constraint: MediaTrackConstraints) => constraint.facingMode = facingMode);
+		}
+		return this.getMatchingCameraStream(constraintsToTry);
+	}
+
+	private async getMatchingCameraStream(constraintsToTry: any): Promise<MediaStream> {
+		if (constraintsToTry.length === 0) {
+			return Promise.reject('Camera not found.');
+		}
+		try {
+			return await navigator.mediaDevices.getUserMedia({
+				video: constraintsToTry.shift()
+			});
+		} catch (e) {
+			return await this.getMatchingCameraStream(constraintsToTry);
+		}
+	}
+
+	private setVideoMirror(facingMode: any) {
+		// in user facing mode mirror the video to make it easier for the user to position the QR code
+		const scaleFactor = facingMode === 'user' ? -1 : 1;
+		this.$video.style.transform = 'scaleX(' + scaleFactor + ')';
+	}
+
+}
+
+async function hasCamera() {
+	return await navigator.mediaDevices.enumerateDevices()
+		.then(devices => devices.some(device => device.kind === 'videoinput'))
+		.catch(() => false);
+}
+
+function _getImageData(image: ImageSourceElement, sourceRect: Rect = null, canvas: HTMLCanvasElement = null, fixedCanvasSize = false) {
+	canvas = canvas || document.createElement('canvas');
+	const sourceRectX = sourceRect && sourceRect.x ? sourceRect.x : 0;
+	const sourceRectY = sourceRect && sourceRect.y ? sourceRect.y : 0;
+	const sourceRectWidth = sourceRect && sourceRect.width ? sourceRect.width : image.width || (image as HTMLVideoElement).videoWidth;
+	const sourceRectHeight = sourceRect && sourceRect.height ? sourceRect.height : image.height || (image as HTMLVideoElement).videoHeight;
+	if (!fixedCanvasSize && (canvas.width !== sourceRectWidth || canvas.height !== sourceRectHeight)) {
+		canvas.width = sourceRectWidth;
+		canvas.height = sourceRectHeight;
+	}
+	const context = canvas.getContext('2d', {alpha: false});
+	context.imageSmoothingEnabled = false; // gives less blurry images
+	context.drawImage(image, sourceRectX, sourceRectY, sourceRectWidth, sourceRectHeight, 0, 0, canvas.width, canvas.height);
+	return context.getImageData(0, 0, canvas.width, canvas.height);
+}
+
+function _loadImage(imageOrFileOrUrl: ImageSource): Promise<ImageSourceElement> {
+	if (imageOrFileOrUrl instanceof HTMLCanvasElement || imageOrFileOrUrl instanceof HTMLVideoElement) {
+	return Promise.resolve(imageOrFileOrUrl);
+} else if (imageOrFileOrUrl instanceof HTMLImageElement) {
+	return _awaitImageLoad(imageOrFileOrUrl).then(() => imageOrFileOrUrl);
+} else if (imageOrFileOrUrl instanceof File || imageOrFileOrUrl instanceof URL
+	|| typeof (imageOrFileOrUrl) === 'string') {
+	const image = new Image();
+	if (imageOrFileOrUrl instanceof File) {
+		image.src = URL.createObjectURL(imageOrFileOrUrl);
+	} else {
+		image.src = imageOrFileOrUrl.toString();
+	}
+	return _awaitImageLoad(image).then(() => {
+		if (imageOrFileOrUrl instanceof File) {
+			URL.revokeObjectURL(image.src);
+		}
+		return image;
+	});
+} else {
+	return Promise.reject('Unsupported image type.');
+}
+}
+
+function _awaitImageLoad(image: HTMLImageElement) {
+	return new Promise<void>((resolve, reject) => {
+		if (image.complete && image.naturalWidth !== 0) {
+			// already loaded
+			resolve();
+		} else {
+			let onLoad: EventListener, onError: EventListener;
+			onLoad = () => {
+				image.removeEventListener('load', onLoad);
+				image.removeEventListener('error', onError);
+				resolve();
+			};
+			onError = () => {
+				image.removeEventListener('load', onLoad);
+				image.removeEventListener('error', onError);
+				reject('Image load error');
+			};
+			image.addEventListener('load', onLoad);
+			image.addEventListener('error', onError);
+		}
+	});
+}
diff --git a/teamapps-client/ts/modules/qr-code-scanner/worker.ts b/teamapps-client/ts/modules/qr-code-scanner/worker.ts
new file mode 100644
index 000000000..6c8d276dc
--- /dev/null
+++ b/teamapps-client/ts/modules/qr-code-scanner/worker.ts
@@ -0,0 +1,114 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+/*-
+MIT License
+
+Copyright (c) 2017 Nimiq, danimoh
+Copyright (c) 2019 Yann Massard (yann.massard@teamapps.org) - migration to typescript
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+ */
+
+import jsQR from 'jsqr-es6';
+
+let inversionAttempts: "dontInvert" | "onlyInvert" | "attemptBoth" | "invertFirst" = 'dontInvert';
+let grayscaleWeights = {
+	// weights for quick luma integer approximation (https://en.wikipedia.org/wiki/YUV#Full_swing_for_BT.601)
+	red: 77,
+	green: 150,
+	blue: 29,
+	useIntegerApproximation: true,
+};
+
+self.onmessage = event => {
+	const type = event['data']['type'];
+	const data = event['data']['data'];
+
+	switch (type) {
+		case 'decode':
+			decode(data);
+			break;
+		case 'grayscaleWeights':
+			setGrayscaleWeights(data);
+			break;
+		case 'inversionMode':
+			setInversionMode(data);
+			break;
+		case 'close':
+			// close after earlier messages in the event loop finished processing
+			self.close();
+			break;
+	}
+};
+
+function decode(data) {
+	const rgbaData = data['data'];
+	const width = data['width'];
+	const height = data['height'];
+	const result = jsQR(rgbaData, width, height, {
+		inversionAttempts: inversionAttempts,
+		greyScaleWeights: grayscaleWeights,
+	});
+	self.postMessage({
+		type: 'qrResult',
+		data: result? result.data : null,
+	}, undefined);
+}
+
+function setGrayscaleWeights(data) {
+	// update grayscaleWeights in a closure compiler compatible fashion
+	grayscaleWeights.red = data['red'];
+	grayscaleWeights.green = data['green'];
+	grayscaleWeights.blue = data['blue'];
+	grayscaleWeights.useIntegerApproximation = data['useIntegerApproximation'];
+}
+
+function setInversionMode(inversionMode) {
+	switch (inversionMode) {
+		case 'original':
+			inversionAttempts = 'dontInvert';
+			break;
+		case 'invert':
+			// TODO mode 'onlyInvert' is currently broken in jsQR. Enable when fixed.
+			inversionAttempts = 'attemptBoth';
+			break;
+		case 'both':
+			inversionAttempts = 'attemptBoth';
+			break;
+		default:
+			throw new Error('Invalid inversion mode');
+	}
+}
diff --git a/teamapps-client/ts/modules/shakaplayer/SkipBackButton.ts b/teamapps-client/ts/modules/shakaplayer/SkipBackButton.ts
new file mode 100644
index 000000000..920edf25c
--- /dev/null
+++ b/teamapps-client/ts/modules/shakaplayer/SkipBackButton.ts
@@ -0,0 +1,53 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+export class SkipBackButton extends shaka.ui.Element {
+
+  private button:HTMLButtonElement;
+
+  constructor(parent : HTMLElement , controls : shaka.ui.Controls) {
+    super(parent, controls);
+
+    this.button = document.createElement('button');
+    this.button.classList.add('material-icons-round');
+    this.button.classList.add('shaka-skip-button', 'shaka-skip-back-button');
+    this.button.textContent = "skip_previous";
+    this.parent.appendChild(this.button);
+    this.button.setAttribute("aria-label", "Skip back");
+
+    this.eventManager.listen(this.button, 'click', () => {
+      this.skipBack();
+    });
+  }
+
+  skipBack() {
+    if (!this.video.duration) {
+      return;
+    }
+    this.player.getMediaElement().currentTime = 0;
+  }
+}
+
+export class SkipBackButtonFactory {
+  create(rootElement : HTMLElement , controls : shaka.ui.Controls) {
+    return new SkipBackButton(rootElement, controls);
+  }
+}
+
+shaka.ui.Controls.registerElement('skip_back', new SkipBackButtonFactory());
diff --git a/teamapps-client/ts/modules/shakaplayer/SkipForwardButton.ts b/teamapps-client/ts/modules/shakaplayer/SkipForwardButton.ts
new file mode 100644
index 000000000..9f93f91b4
--- /dev/null
+++ b/teamapps-client/ts/modules/shakaplayer/SkipForwardButton.ts
@@ -0,0 +1,46 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+export class SkipForwardButton extends shaka.ui.Element {
+
+  private button:HTMLButtonElement;
+
+  constructor(parent : HTMLElement , controls : shaka.ui.Controls) {
+    super(parent, controls);
+
+    this.button = document.createElement('button');
+    this.button.classList.add('material-icons-round');
+    this.button.classList.add('shaka-skip-button', 'shaka-skip-forward-button');
+    this.button.textContent = "skip_next";
+    this.parent.appendChild(this.button);
+    this.button.setAttribute("aria-label", "Skip forward");
+
+    this.eventManager.listen(this.button, 'click', () => {
+      // nothing to do here... (this must be handled elsewhere)
+    });
+  }
+}
+
+export class SkipForwardButtonFactory {
+  create(rootElement : HTMLElement , controls : shaka.ui.Controls) {
+    return new SkipForwardButton(rootElement, controls);
+  }
+}
+
+shaka.ui.Controls.registerElement('skip_forward', new SkipForwardButtonFactory());
diff --git a/teamapps-client/ts/modules/shakaplayer/UiShakaPlayer.ts b/teamapps-client/ts/modules/shakaplayer/UiShakaPlayer.ts
new file mode 100644
index 000000000..33600b695
--- /dev/null
+++ b/teamapps-client/ts/modules/shakaplayer/UiShakaPlayer.ts
@@ -0,0 +1,297 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+
+import "shaka-player/dist/controls.css"
+import "@less/components/UiShakaPlayer.less"
+
+import {executeWhenFirstDisplayed} from "../util/ExecuteWhenFirstDisplayed";
+import {AbstractUiComponent} from "../AbstractUiComponent";
+import {TeamAppsEvent} from "../util/TeamAppsEvent";
+import {TeamAppsUiContext} from "../TeamAppsUiContext";
+import {
+	UiShakaPlayer_EndedEvent,
+	UiShakaPlayer_ErrorLoadingEvent, UiShakaPlayer_ManifestLoadedEvent, UiShakaPlayer_SkipClickedEvent,
+	UiShakaPlayer_TimeUpdateEvent,
+	UiShakaPlayerCommandHandler,
+	UiShakaPlayerConfig,
+	UiShakaPlayerEventSource,
+} from "../../generated/UiShakaPlayerConfig";
+import {TeamAppsUiComponentRegistry} from "../TeamAppsUiComponentRegistry";
+import {addDelegatedEventListener, parseHtml} from "../Common";
+import {UiPosterImageSize} from "../../generated/UiPosterImageSize";
+import {throttle} from "../util/throttle";
+import {UiTrackLabelFormat} from "../../generated/UiTrackLabelFormat";
+
+(window as any).shaka = require("shaka-player");
+(window as any).shaka = require("shaka-player/dist/shaka-player.ui");
+
+import "./SkipBackButton";
+import "./SkipForwardButton";
+
+import Player = shaka.Player;
+import UIConfiguration = shaka.extern.UIConfiguration;
+import Overlay = shaka.ui.Overlay;
+import ManifestConfiguration = shaka.extern.ManifestConfiguration;
+import ManifestParser = shaka.extern.ManifestParser;
+import PlayerInterface = shaka.extern.ManifestParser.PlayerInterface;
+import TrackLabelFormat = shaka.ui.Overlay.TrackLabelFormat;
+import {UiShakaManifestConfig} from "../../generated/UiShakaManifestConfig";
+import Manifest = shaka.extern.Manifest;
+
+export class UiShakaPlayer extends AbstractUiComponent<UiShakaPlayerConfig> implements UiShakaPlayerCommandHandler, UiShakaPlayerEventSource {
+
+	public readonly onManifestLoaded: TeamAppsEvent<UiShakaPlayer_ManifestLoadedEvent> = new TeamAppsEvent();
+	public readonly onTimeUpdate: TeamAppsEvent<UiShakaPlayer_TimeUpdateEvent> = new TeamAppsEvent();
+	public readonly onEnded: TeamAppsEvent<UiShakaPlayer_EndedEvent> = new TeamAppsEvent();
+	public readonly onErrorLoading: TeamAppsEvent<UiShakaPlayer_ErrorLoadingEvent> = new TeamAppsEvent();
+	public readonly onSkipClicked: TeamAppsEvent<UiShakaPlayer_SkipClickedEvent> = new TeamAppsEvent();
+
+	private $componentWrapper: HTMLElement;
+	private $video: HTMLMediaElement;
+	private player: Player;
+
+	private ui: Overlay;
+
+	constructor(config: UiShakaPlayerConfig, context: TeamAppsUiContext) {
+		super(config, context);
+
+		console.log(config.hlsUrl, config.dashUrl, config.posterImageUrl)
+
+		const posterImageSizeCssClass = `poster-${UiPosterImageSize[config.posterImageSize].toLowerCase()}`;
+		this.$componentWrapper = parseHtml(
+			`<div class="UiShakaPlayer" style="background-color: ${config.backgroundColor}">
+				<div class="video-wrapper">
+					<video id="video" poster="${config.posterImageUrl}" class="${posterImageSizeCssClass}"></video>
+				</div>
+			</div>`);
+		this.$video = this.$componentWrapper.querySelector(":scope video");
+
+		this.$video.addEventListener("timeupdate", throttle(e => this.onTimeUpdate.fire({timeMillis: this.$video.currentTime * 1000}), config.timeUpdateEventThrottleMillis))
+		this.$video.addEventListener("ended", e => this.onEnded.fire({}))
+
+		this.displayedDeferredExecutor.invokeWhenReady(() => {
+			this.player = new shaka.Player(this.$video);
+			this.reconfigurePlayer();
+			this.player.addEventListener('error', () => this.onErrorLoading.fire({}));
+			this.player.addEventListener('streaming', () => {
+				this.reconfigureUi();
+				this.jumpTo(this._config.timeMillis);
+				this.onManifestLoaded.fire({manifest: this.createUiManifest(this.player.getManifest())});
+			});
+
+			this.ui = new shaka.ui.Overlay(this.player, this.$componentWrapper, this.$video);
+			const uiConfig: Partial<UIConfiguration> = {
+				addBigPlayButton: config.bigPlayButtonEnabled,
+				controlPanelElements: config.controlPanelElements,
+				doubleClickForFullscreen: true,
+				enableFullscreenOnRotation: false,
+				enableKeyboardPlaybackControls: true,
+				fadeDelay: config.controlFadeDelaySeconds,
+				forceLandscapeOnFullscreen: true,
+				overflowMenuButtons: this.getOverflowMenuButtonsConfig(),
+				seekBarColors: undefined,
+				showUnbufferedStart: false,
+				trackLabelFormat: config.trackLabelFormat == UiTrackLabelFormat.LABEL ? TrackLabelFormat.LABEL
+					: config.trackLabelFormat == UiTrackLabelFormat.LANGUAGE ? TrackLabelFormat.LANGUAGE
+						: config.trackLabelFormat == UiTrackLabelFormat.ROLE ? TrackLabelFormat.ROLE
+							: config.trackLabelFormat == UiTrackLabelFormat.LANGUAGE_ROLE ? TrackLabelFormat.LANGUAGE_ROLE
+								: undefined,
+				volumeBarColors: undefined,
+				addSeekBar: true
+			};
+			this.ui.configure(uiConfig as UIConfiguration);
+
+			addDelegatedEventListener(this.ui.getControls().getControlsContainer(), '.shaka-skip-button', 'click', (el, ev) => {
+				this.onSkipClicked.fire({
+					forward: el.classList.contains('shaka-skip-forward-button'),
+					playbackTimeMillis: this.player.getMediaElement().currentTime * 1000
+				})
+			}, {capture: true})
+		});
+
+		this.setUrls(config.hlsUrl, config.dashUrl);
+	}
+
+	private createUiManifest(manifest: Manifest): UiShakaManifestConfig {
+		return {
+			variants: manifest.variants.map(v => {
+				return {
+					id: v.id,
+					audio: {
+						id: v.audio.id,
+						originalId: v.audio.originalId,
+						mimeType: v.audio.mimeType,
+						codecs: v.audio.codecs,
+						bandwidth: v.audio.bandwidth,
+						label: v.audio.label,
+						roles: v.audio.roles,
+						language: v.audio.language,
+						channelsCount: v.audio.channelsCount,
+						audioSamplingRate: v.audio.audioSamplingRate
+					},
+					video: {
+						id: v.video.id,
+						originalId: v.video.originalId,
+						mimeType: v.video.mimeType,
+						codecs: v.video.codecs,
+						bandwidth: v.video.bandwidth,
+						label: v.video.label,
+						roles: v.video.roles,
+						frameRate: v.video.frameRate,
+						pixelAspectRatio: v.video.pixelAspectRatio,
+						width: v.video.width,
+						height: v.video.height
+					},
+					bandwidth: v.bandwidth
+				}
+			})
+		};
+	}
+
+	private reconfigurePlayer() {
+		this.player.configure({
+			manifest: {
+				disableVideo: this._config.videoDisabled // will advice the manifest parser to set all videos to null. Note that the quality selection button must be removed!
+			},
+			preferredAudioLanguage: this._config.preferredAudioLanguage
+		} );
+	}
+
+	private reconfigureUi() {
+		this.ui.configure({
+			overflowMenuButtons: this.getOverflowMenuButtonsConfig()
+		} as Partial<UIConfiguration>);
+	}
+
+	private getOverflowMenuButtonsConfig() {
+		let manifest = this.player.getManifest();
+		const overflowButtons = [
+			"playback_rate",
+			"captions",
+			// "picture_in_picture",
+		];
+		if (manifest != null && manifest.variants.some(v => v.video != null)) {
+			overflowButtons.unshift("quality");
+		}
+		if (manifest != null && manifest.variants.some(v => v.language && v.language !== "und")) {
+			overflowButtons.unshift("language");
+		}
+		return overflowButtons;
+	}
+
+	public doGetMainElement(): HTMLElement {
+		return this.$componentWrapper;
+	}
+
+
+	public play(): any {
+		this.$video.play();
+	}
+
+	public pause(): any {
+		this.$video.pause();
+	}
+
+	public jumpTo(timeMillis: number) {
+		this.$video.currentTime = timeMillis / 1000;
+	}
+
+	public selectAudioLanguage(language: string, role: string): any {
+		this._config.preferredAudioLanguage = language;
+		this.player.selectAudioLanguage(language, role);
+	}
+
+	public onResize(): void {
+
+	}
+
+	public destroy(): void {
+	}
+
+	@executeWhenFirstDisplayed(true)
+	async setUrls(hlsUrl: string, dashUrl: string) {
+		const support = await shaka.Player.probeSupport();
+		let url = support.manifest.mpd && dashUrl ? dashUrl : hlsUrl;
+		console.log(url)
+		try {
+			await this.player.load(url);
+			console.log(this.player.getConfiguration().preferredAudioLanguage)
+		} catch (e) {
+			console.error(e);
+			this.onErrorLoading.fire({});
+		}
+	}
+
+	static setDistinctManifestAudioTracksFixEnabled(enabled: boolean) {
+		const dashParserFactory = enabled ? () => new DistinctAudioTracksManifestParserDecorator(new shaka.dash.DashParser()) : () => new shaka.dash.DashParser();
+		shaka.media.ManifestParser.registerParserByExtension('mpd', dashParserFactory);
+		shaka.media.ManifestParser.registerParserByMime('application/dash+xml', dashParserFactory);
+		shaka.media.ManifestParser.registerParserByMime('video/vnd.mpeg.dash.mpd', dashParserFactory);
+		const hlsParserFactory = enabled ? () => new DistinctAudioTracksManifestParserDecorator(new shaka.hls.HlsParser()) : () => new shaka.hls.HlsParser();
+		shaka.media.ManifestParser.registerParserByExtension('m3u8', hlsParserFactory);
+		shaka.media.ManifestParser.registerParserByMime('application/x-mpegurl', hlsParserFactory);
+		shaka.media.ManifestParser.registerParserByMime('application/vnd.apple.mpegurl', hlsParserFactory);
+	}
+}
+
+class DistinctAudioTracksManifestParserDecorator implements ManifestParser {
+	constructor(private delegate: ManifestParser) {
+	}
+
+	configure(config: ManifestConfiguration) {
+		return this.delegate.configure(config);
+	}
+
+	async start(uri: string, playerInterface: PlayerInterface) {
+		let manifest = await this.delegate.start(uri, playerInterface);
+		// Add a unique role for each audio track.
+		// manifest.variants.forEach((variant, i) => variant.language = variant.language + i)
+		manifest.variants.forEach((variant, i) => variant.audio.roles.push("role" + i));
+		return manifest;
+	}
+
+	async stop() {
+		return this.delegate.stop();
+	}
+
+	onExpirationUpdated(sessionId: string, expiration: number): any {
+		return this.delegate.onExpirationUpdated(sessionId, expiration);
+	}
+
+	update(): any {
+		return this.delegate.update();
+	}
+
+	banLocation(location: string): void {
+		return this.delegate.banLocation(location);
+	}
+
+	onInitialVariantChosen(variant: shaka.extern.Variant): void {
+		return this.delegate.onInitialVariantChosen(variant);
+	}
+
+	setMediaElement(mediaElement: HTMLMediaElement): void {
+		return this.delegate.setMediaElement(mediaElement);
+	}
+}
+
+shaka.polyfill.installAll();
+
+TeamAppsUiComponentRegistry.registerComponentClass("UiShakaPlayer", UiShakaPlayer);
diff --git a/teamapps-client/ts/modules/table/AbstractTableEditor.ts b/teamapps-client/ts/modules/table/AbstractTableEditor.ts
index b83e67aeb..a3aad8174 100644
--- a/teamapps-client/ts/modules/table/AbstractTableEditor.ts
+++ b/teamapps-client/ts/modules/table/AbstractTableEditor.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-client/ts/modules/table/FixedSizeTableCellEditor.ts b/teamapps-client/ts/modules/table/FixedSizeTableCellEditor.ts
index e802eafa7..15b6d3b4a 100644
--- a/teamapps-client/ts/modules/table/FixedSizeTableCellEditor.ts
+++ b/teamapps-client/ts/modules/table/FixedSizeTableCellEditor.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -20,6 +20,7 @@
 import {AbstractTableEditor} from "./AbstractTableEditor";
 import {UiField} from "../formfield/UiField";
 import {UiIdentifiableClientRecordConfig} from "../../generated/UiIdentifiableClientRecordConfig";
+import {css} from "../Common";
 
 
 export class FixedSizeTableCellEditor extends AbstractTableEditor {
@@ -55,24 +56,22 @@ export class FixedSizeTableCellEditor extends AbstractTableEditor {
 		const preferredWidth = 300;
 		const preferredHeight = 200;
 
-		let $uiField = uiField.getMainDomElement();
-		$uiField.css({
+		let $uiField = uiField.getMainElement();
+		css($uiField, {
 			width: Math.max(editorOptions.position.width, Math.min(preferredWidth, editorOptions.gridPosition.width)),
 			height: Math.max(editorOptions.position.height, Math.min(preferredHeight, editorOptions.gridPosition.height)),
 			left:Math.min(-1, availableSpaceRight - preferredWidth) + "px",
 			top:Math.min(-1, availableSpaceBottom - preferredHeight) + "px",
-			"min-width": "unset",
-			"min-height": "unset",
-			"max-width": "unset",
-			"max-height": "unset"
+			minWidth: "unset",
+			minHeight: "unset",
+			maxWidth: "unset",
+			maxHeight: "unset"
 		});
-		$uiField.appendTo(this.container);
-		uiField.attachedToDom = true;
+		this.container.appendChild($uiField);
 	}
 
 	public destroy() {
 		this.destroyCallback();
-		this.uiField.attachedToDom = false;
 	};
 
 	public focus() {
@@ -91,7 +90,7 @@ export class FixedSizeTableCellEditor extends AbstractTableEditor {
 
 	public applyValue(item: UiIdentifiableClientRecordConfig, state: any /*TODO*/) {
 		this.uiField.commit();
-		item.values[this.column.field] = state;
+		item.values[this.column.field] = this.uiField.getCommittedValue();
 	};
 
 	public isValueChanged() {
diff --git a/teamapps-client/ts/modules/table/TableDataProvider.ts b/teamapps-client/ts/modules/table/TableDataProvider.ts
index fbde8db47..b5fc49350 100644
--- a/teamapps-client/ts/modules/table/TableDataProvider.ts
+++ b/teamapps-client/ts/modules/table/TableDataProvider.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,421 +17,169 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-import {UiHierarchicalClientRecordConfig} from "../../generated/UiHierarchicalClientRecordConfig";
-import {UiFieldMessageConfig} from "../../generated/UiFieldMessageConfig";
-import {getHighestSeverity} from "../micro-components/FieldMessagesPopper";
-import {UiFieldMessageSeverity} from "../../generated/UiFieldMessageSeverity";
 import {UiTableClientRecordConfig} from "../../generated/UiTableClientRecordConfig";
+import {UiFieldMessageConfig} from "../../generated/UiFieldMessageConfig";
+import {UiIdentifiableClientRecordConfig} from "../../generated/UiIdentifiableClientRecordConfig";
+import DataProvider = Slick.DataProvider;
 
-export interface TableDataProviderItem extends UiTableClientRecordConfig {
-	children: TableDataProviderItem[];
-	depth: number;
-	parentId: number;
-	expanded: boolean;
-}
-
-export class TableDataProvider {
+export class TableDataProvider implements DataProvider<UiTableClientRecordConfig> {
 	public onDataLoading = new Slick.Event();
 
-	private static LOOKAHAED = 50;
-	private timerId: number = null;
-
-	private data: TableDataProviderItem[];
-	private numberOfRootNodes: number;
-
-	constructor(
-		data: UiHierarchicalClientRecordConfig[],
-		private dataRequestCallback: Function) {
-		this.data = this.prepareData(data);
-		this.numberOfRootNodes = this.data.filter(item => !item.parentId).length;
-	}
-
-	private prepareData(flatData: any[], parentId: number | string = 0, depth = 0): TableDataProviderItem[] {
-		let itemsById: { [index: number]: any } = {};
-		for (let i = 0; i < flatData.length; i++) {
-			let item = flatData[i];
-			itemsById[item.id] = item;
-		}
-
-		for (let i = 0; i < flatData.length; i++) {
-			let item = flatData[i];
-			if (item.parentId) {
-				let parentItem = itemsById[item.parentId];
-				if (parentItem) {
-					parentItem.children || (parentItem.children = []);
-					parentItem.children.push(item);
-				}
-			}
-		}
-
-		let resultData = flatData.filter(item => item.parentId == parentId || (!item.parentId && !parentId));
-
-		function setDepth(node: TableDataProviderItem, depth: number) {
-			node.depth = depth;
-			if (node.children && node.children.length > 0) {
-				node.children.forEach(child => setDepth(child, depth + 1));
-			}
-		}
-
-		for (let i = 0; i < resultData.length; i++) {
-			let rootNode = resultData[i];
-			setDepth(rootNode, depth);
-		}
-
-		for (let i = resultData.length - 1; i >= 0; i--) { // iterate backwards since we are manipulating the array we are iterating on...
-			const tableDataProviderItem = resultData[i];
-
-			if (this.isRowExpanded(tableDataProviderItem) && tableDataProviderItem.children && tableDataProviderItem.children.length > 0) {
-				let visibleDescendants = this.getListOfVisibleDescendants(resultData[i]);
-				resultData.splice.apply(resultData, ([i + 1, 0] as any[]).concat(visibleDescendants));
-			}
-		}
-
-		return resultData;
-	}
-
-	private isRowExpanded(tableDataProviderItem: any): boolean {
-		return !!tableDataProviderItem.expanded;
-	}
-
-	public toggleRowExpanded(rowIndex: number) {
-		let item = this.data[rowIndex];
-		if (!item) {
-			return;
-		}
-		if (!this.isRowExpanded(item)) {
-			item.expanded = true;
-			let visibleDescendants = this.getListOfVisibleDescendants(this.data[rowIndex]);
-			this.data.splice.apply(this.data, ([rowIndex + 1, 0] as any).concat(visibleDescendants));
-		} else {
-			item.expanded = false;
-			this.data.splice(rowIndex + 1, this.findEndOfChildrenIndex(rowIndex) - (rowIndex + 1));
-		}
-	}
-
-	private getListOfVisibleDescendants(item: TableDataProviderItem): TableDataProviderItem[] {
-		let visibleDescendants: TableDataProviderItem[] = [];
-
-		let addNodesAndExpandedDescendants = (nodes: any[]) => {
-			for (let child of nodes) {
-				visibleDescendants.push(child);
-				if (child.children && this.isRowExpanded(child)) {
-					addNodesAndExpandedDescendants(child.children);
-				}
-			}
-		};
-
-		item.children && addNodesAndExpandedDescendants(item.children);
-		return visibleDescendants;
-	}
-
-	/**
-	 * @param parentItemRowIndex
-	 * @returns {number} the index of the first non-child row following the node specified by parentItemRowIndex
-	 */
-	private findEndOfChildrenIndex(parentItemRowIndex: number) {
-		let parentNode = this.data[parentItemRowIndex];
-		if (!parentNode) { // seems not to be initialized yet, so no children
-			return parentItemRowIndex + 1;
-		}
-		let parentIds = [parentNode.id];
-		for (var followingRowIndex = parentItemRowIndex + 1; followingRowIndex < this.data.length; followingRowIndex++) {
-			let row = this.data[followingRowIndex];
-			if (!row) {
-				break;
-			}
-			let rowParentId = row.parentId;
-			if (rowParentId !== 0 && rowParentId === parentIds[parentIds.length - 1]) {
-				// same level as before
-			} else if (rowParentId === this.data[followingRowIndex - 1].id) {
-				// nested row
-				parentIds.push(rowParentId);
-			} else {
-				// non-sibling and non-nested => higher level.
-				while (parentIds.length > 0 && parentIds[parentIds.length - 1] != rowParentId) {
-					parentIds.pop();
-				}
-				if (parentIds.length === 0) {
-					break;
-				}
-			}
-		}
-		return followingRowIndex;
-	};
+	private dataStartIndex: number = 0;
+	private data: UiTableClientRecordConfig[] = [];
+	private recordById: Map<number, UiTableClientRecordConfig> = new Map();
+	private totalNumberOfRecords: number = 0;
 
-	/**
-	 * This method is called by SlickGrid.
-	 */
 	public getLength(): number {
-		return this.data.length;
-	}
-
-	public setTotalNumberOfRootNodes(totalNumberOfRootNodes: number) {
-		let numberOfVisibleNonRootChildren = this.data.filter(node => node && node.depth > 0).length;
-		this.numberOfRootNodes = totalNumberOfRootNodes;
-		this.data.length = totalNumberOfRootNodes + numberOfVisibleNonRootChildren;
-		// TODO #events Fire event because data.length has changed!
+		return this.totalNumberOfRecords;
 	}
 
-	public getTotalNumberOfRootNodes() {
-		return this.numberOfRootNodes;
-	}
-
-	/**
-	 * This method is called by SlickGrid.
-	 */
-	public getItem(index: number): TableDataProviderItem {
-		return this.data[index];  // yep, that's ok!
+	public getItem(index: number): UiTableClientRecordConfig {
+		return this.data[index - this.dataStartIndex];  // yep, that's ok!
 	}
 
-	/**
-	 * This method is called by SlickGrid.
-	 */
 	public getItemMetadata(index: number): Slick.RowMetadata<any> {
-		if (!this.data[index]) {
+		let record = this.data[index - this.dataStartIndex];
+		if (record == null) {
 			return null;
 		} else {
-			const record = this.data[index];
 			return {
 				cssClasses: record.bold ? "text-bold" : null
 			};
 		}
 	}
 
-	public clear(): void {
-		this.data = [];
-	}
-
-	public updateRootNodeData(startRootNodeIndex: number, newData: any[]) {
-		let rowIndex = 0;
-		let rootNodeIndex = 0;
-		while (rootNodeIndex < startRootNodeIndex) {
-			rowIndex = this.findEndOfChildrenIndex(rowIndex);
-			rootNodeIndex++;
-		}
+	updateData(startIndex: number, recordIds: number[], newRecords: UiIdentifiableClientRecordConfig[], totalNumberOfRecords: number): number[] | true {
+		const changedRowNumbers = this.calculateChangingRowNumbers(startIndex, recordIds);
 
-		let insertRowIndex = rowIndex;
-		let numberOfRootNodesInNewData = newData.filter(item => !item._parentId).length;
-		let newPreparedData = this.prepareData(newData);
+		this.dataStartIndex = startIndex;
+		newRecords.forEach(r => this.recordById.set(r.id, r));
+		this.data = recordIds.map(recordId => this.recordById.get(recordId));
 
-		for (let i = 0; i < numberOfRootNodesInNewData; i++) {
-			rowIndex = this.findEndOfChildrenIndex(rowIndex);
+		// cleanup
+		if (this.recordById.size > recordIds.length * 2) {
+			let recordIdsAsSet = new Set(recordIds);
+			this.recordById.forEach((value, key) => {
+				if (!recordIdsAsSet.has(key)) {
+					this.recordById.delete(key);
+				}
+			})
 		}
 
-		this.data.splice.apply(this.data, (<any[]>[insertRowIndex, rowIndex - insertRowIndex]).concat(newPreparedData));
-	}
+		this.totalNumberOfRecords = totalNumberOfRecords;
 
-	setChildrenData(parentRecordId: number, tableData: any[]) {
-		let parent = this.getNodeById(parentRecordId);
+		return changedRowNumbers;
+	}
 
-		if (parent) {
-			let preparedData = this.prepareData(tableData, parentRecordId, parent.depth + 1).filter(item => item.parentId === parentRecordId); // throw everything away that is not below the parent node!
-			let parentItemRowIndex = this.findVisibleRowIndexById(parentRecordId);
-			if (parentItemRowIndex != null) {
-				let endOfCurrentChildrenIndex = this.findEndOfChildrenIndex(parentItemRowIndex);
-				this.data.splice.apply(this.data, (<any[]>[parentItemRowIndex + 1, endOfCurrentChildrenIndex - parentItemRowIndex - 1]).concat(preparedData));
+	private calculateChangingRowNumbers(startIndex: number, recordIds: number[]): number[] | true {
+		const everythingChanged = startIndex >= (this.dataStartIndex + this.data.length) || (startIndex + recordIds.length) < this.dataStartIndex;
+		let changedRowNumbers: number[] = [];
+		if (!everythingChanged) {
+			for (let i = Math.min(startIndex, this.dataStartIndex); i < Math.max(startIndex + recordIds.length, this.dataStartIndex + this.data.length); i++) {
+				const oldId = this.data[i - this.dataStartIndex]?.id;
+				const newId = recordIds[i - startIndex];
+				if (oldId !== newId) {
+					changedRowNumbers.push(i);
+				}
 			}
-			parent.children = preparedData;
 		}
+		return everythingChanged ? true : changedRowNumbers;
 	}
 
-	public removeItem(recordId: number) {
-		let rowIndex = this.findVisibleRowIndexById(recordId);
-		this.removeItemInternal(recordId, rowIndex);
+	public clear(): void {
+		this.data = [];
 	}
 
-	public removeItems(recordIds: number[]) {
-		let rowIndexesByIds = this.findVisibleRowIndexesByIds(recordIds);
-		Object.keys(rowIndexesByIds).forEach(id => {
-			let idAsNumber = Number(id);
-			this.removeItemInternal(idAsNumber, rowIndexesByIds[idAsNumber]);
-		});
+	getRecordById(recordId: number) {
+		return this.recordById.get(recordId);
 	}
 
-	public deleteItems(recordIds: number[]) {
-		let rowIndexesByIds = this.findVisibleRowIndexesByIds(recordIds);
-		const rowIndexes: number[] = Object.values(rowIndexesByIds).sort((a, b) => b-a);
-		rowIndexes.forEach(rowIndex => this.data.splice(rowIndex, 1));
-		this.setTotalNumberOfRootNodes(this.data.length);
+	getRowIndexByRecordId(recordId: number) {
+		let dataIndex = this.data.findIndex(r => r.id == recordId);
+		return dataIndex < 0 ? -1 : this.dataStartIndex + dataIndex;
 	}
 
-	private removeItemInternal(recordId: number, rowIndex: number) {
-		let node: TableDataProviderItem;
-		if (rowIndex !== null) {
-			node = this.data[rowIndex];
-		} else { // the node is a hidden child or does not exist...
-			node = this.getNodeById(recordId);
-		}
-
-		if (!node) {
+	setCellMessages(recordId: number, columnName: string, messages: UiFieldMessageConfig[]) {
+		let record = this.recordById.get(recordId);
+		if (record == null) {
 			return;
 		}
-
-		if (rowIndex != null) {
-			let deleteStart: number;
-			if (node.parentId != null) { // delete the row itself only if it is not a root node!
-				deleteStart = rowIndex;
-			} else { // otherwise, only delete its children and set the row back to undefined
-				deleteStart = rowIndex + 1;
-				this.data[rowIndex] = undefined;
-			}
-			const deleteCount = this.findEndOfChildrenIndex(rowIndex) - (deleteStart);
-			this.data.splice(deleteStart, deleteCount);
-		}
-
-		if (node.parentId) {
-			let parentNode = this.getNodeById(node.parentId);
-			parentNode.children = parentNode.children.filter(node => node.id != recordId);
+		if (record.messages == null) {
+			record.messages = {};
 		}
+		record.messages[columnName] = messages;
 	}
 
+	clearAllCellMessages() {
+		this.data.forEach(r => r.messages = null)
+	}
 
-	public ensureData(firstVisibleRowIndex: number, lastVisibleRowIndex: number) {
-		if (firstVisibleRowIndex > lastVisibleRowIndex) {
-			return;
-		}
-
-		let from = Math.max(firstVisibleRowIndex - TableDataProvider.LOOKAHAED, 0);
-		let to = lastVisibleRowIndex + TableDataProvider.LOOKAHAED;
-		if (this.data.length) {
-			to = Math.min(to, this.data.length - 1);
-		}
-
-		while (this.data[from] !== undefined && from < to) {
-			from++;
-		}
-		while (this.data[to] !== undefined && from < to) {
-			to--;
-		}
 
-		if (firstVisibleRowIndex > to || lastVisibleRowIndex < from) { // not really necessary to load anything
+	setCellMarked(recordId: any, columnName: string, marked: boolean) {
+		let record = this.recordById.get(recordId);
+		if (record == null) {
 			return;
 		}
-
-		if (from == to && this.data[to] !== undefined) {
-			return;
+		if (record.markings == null) {
+			record.markings = [];
 		}
-
-		if (this.timerId != null) {
-			clearTimeout(this.timerId);
+		record.markings = record.markings.filter(existing => existing !== columnName);
+		if (marked) {
+			record.markings.push(columnName);
 		}
-
-		this.timerId = window.setTimeout(() => {
-			for (let i = from; i <= to; i++) {
-				this.data[i] = null; // null indicates a 'requested but not available yet'
-			}
-
-			let length = to - from + 1;
-			this.dataRequestCallback(from, length);
-		}, 100);
 	}
 
-	public findVisibleRowIndexById(id: number): number {
-		if (id === null || id === undefined) {
-			return null;
-		}
-		for (let i = 0; i < this.data.length; i++) {
-			const entry = this.data[i];
-			if (entry != null && entry.id === id) {
-				return i;
-			}
-		}
-		return null;
+	clearAllCellMarkings() {
+		this.data.forEach(r => r.markings = null);
 	}
 
-	public findVisibleRowIndexesByIds(ids: number[]): {[id: number]: number} {
-		const idsSet = ids.reduce((set, id) => {
-			set[id] = true;
-			return set;
-		}, {} as { [id: string]: true });
-		const rowIndexesById: {[id: number]: number} = {};
+	getSelectedRowsIndexes() {
+		const selectedRowIndexes = [];
 		for (let i = 0; i < this.data.length; i++) {
-			const entry = this.data[i];
-			if (entry != null && idsSet[entry.id]) {
-				rowIndexesById[entry.id] = i;
+			if (this.data[i]?.selected) {
+				selectedRowIndexes.push(i + this.dataStartIndex);
 			}
 		}
-		return rowIndexesById;
+		return selectedRowIndexes;
 	}
 
-	public getNodeById(id: number): TableDataProviderItem {
-		let rowIndex = this.findVisibleRowIndexById(id);
-		if (rowIndex != null) {
-			return this.data[rowIndex];
-		} else {
-			return this.findNodes(item => item && item.id === id)[0];
-		}
-	}
-
-	private findNodes(predicate: (item: TableDataProviderItem) => boolean): TableDataProviderItem[] {
-		let rootNodes = this.data.filter(node => node && !node.parentId);
-
-		let foundNodes: TableDataProviderItem[] = [];
-
-		function find(node: TableDataProviderItem) {
-			if (predicate.call(null, node)) {
-				foundNodes.push(node);
+	setSelectedRows(rows: number[]) {
+		this.data.forEach(d => {
+			if (d != null) {
+				d.selected = false
 			}
-			if (node.children && node.children.length > 0) {
-				node.children.forEach(child => find(child));
+		})
+		rows.forEach(r => {
+			let record = this.data[r - this.dataStartIndex];
+			if (record != null) {
+				record.selected = true;
 			}
-		}
-
-		for (let i = 0; i < rootNodes.length; i++) {
-			let rootNode = rootNodes[i];
-			find(rootNode);
-		}
-
-		return foundNodes;
-	}
-
-	public setCellMarked(recordId: number, propertyName: string, marked: boolean) {
-		let node = this.getNodeById(recordId);
-		if (node == null) {
-			return;
-		}
-		if (node.markings == null) {
-			node.markings = [];
-		}
-		node.markings = node.markings.filter(existingPropertyName => existingPropertyName !== propertyName);
-		if (marked) {
-			node.markings.push(propertyName);
-		}
+		})
 	}
 
-	public clearAllFieldMarkings() {
-		this.findNodes(() => true).forEach(node => node.markings = null);
-	}
-
-	public setCellMessages(recordId: number, fieldName: string, messages: UiFieldMessageConfig[]) {
-		const item = this.getNodeById(recordId);
-		if (item == null) {
-			return;
-		}
-		if (item.messages == null) {
-			item.messages = {};
+	/**
+	 *  Selection management might seem a bit tricky, but with the following explanation, things might clear up:
+	 *  - When the user selects a row, it gets selected on the client side (dataprovider) and server side.
+	 *  - Even after getting thrown out of the data provider, the server still knows about the selection and will set the selected flag
+	 *    when re-sending a selected record to the client
+	 *  - When a record is selected via server-side API, it also gets selected here (if present).
+	 *  TODO multi selection handling does currently not work with rows outside the buffer!
+	 */
+	agreesWithSelectedRows(rowIndexes: number[]) {
+		for (let i = 0; i < rowIndexes.length; i++) {
+			const item = this.getItem(rowIndexes[i]);
+			if (item != null && !item.selected) {
+				return false; // record selected in given rowIndexes but not selected here!
+			}
 		}
-		item.messages[fieldName] = messages;
-	}
-
-	public clearAllCellMessages() {
-		this.findNodes(() => true).forEach(node => node.messages = null);
-	}
-
-	insertRows(index: number, data: UiTableClientRecordConfig[]) {
-		if (index < 0) {
-			index = 0;
-		} else if (index > this.data.length) {
-			index = this.data.length;
+		for (let i = 0; i < this.data.length; i++) {
+			const record = this.data[i];
+			const rowIndex = i + this.dataStartIndex;
+			if (record.selected && rowIndexes.indexOf(rowIndex) < 0) {
+				return false; // record not selected in given rowIndexes but here!
+			}
 		}
-		this.data.splice(index, 0, ...this.prepareData(data, 0));
-		this.numberOfRootNodes += data.length;
+		return true;
 	}
 
-	updateNode(record: UiTableClientRecordConfig) {
-		const rowIndex = this.findVisibleRowIndexById(record.id);
-		if (rowIndex != null) {
-			this.data[rowIndex] = this.prepareData([record])[0];
-		}
-	}
 }
diff --git a/teamapps-client/ts/modules/table/UiCompositeFieldTableCellEditor.ts b/teamapps-client/ts/modules/table/UiCompositeFieldTableCellEditor.ts
index bd9aa7d11..c232f7777 100644
--- a/teamapps-client/ts/modules/table/UiCompositeFieldTableCellEditor.ts
+++ b/teamapps-client/ts/modules/table/UiCompositeFieldTableCellEditor.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-client/ts/modules/table/UiGenericTableCellEditor.ts b/teamapps-client/ts/modules/table/UiGenericTableCellEditor.ts
index 0ecbeb38b..3b7180a1f 100644
--- a/teamapps-client/ts/modules/table/UiGenericTableCellEditor.ts
+++ b/teamapps-client/ts/modules/table/UiGenericTableCellEditor.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -32,7 +32,7 @@ export class UiGenericTableCellEditor extends AbstractTableEditor {
 		args: Slick.Editors.EditorOptions<any> & { item: any }
 	) {
 		super(args);
-		uiField.getMainDomElement().appendTo(this.container);
+		this.container.appendChild(uiField.getMainElement());
 	}
 
 	public destroy() {
@@ -55,7 +55,7 @@ export class UiGenericTableCellEditor extends AbstractTableEditor {
 
 	public applyValue(item: UiIdentifiableClientRecordConfig, state: any /*TODO*/) {
 		this.uiField.commit();
-		item.values[this.column.field] = state;
+		item.values[this.column.field] = this.uiField.getCommittedValue();
 	};
 
 	public isValueChanged() {
diff --git a/teamapps-client/ts/modules/table/UiTable.ts b/teamapps-client/ts/modules/table/UiTable.ts
index 8a1980a56..552ef2661 100644
--- a/teamapps-client/ts/modules/table/UiTable.ts
+++ b/teamapps-client/ts/modules/table/UiTable.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -22,51 +22,50 @@
 ///<reference types="slickgrid/slick.rowselectionmodel"/>
 
 
-import * as $ from "jquery";
 import {TeamAppsEvent} from "../util/TeamAppsEvent";
 import {
+	UiTable_CellClickedEvent,
 	UiTable_CellEditingStartedEvent,
 	UiTable_CellEditingStoppedEvent,
+	UiTable_CellValueChangedEvent,
 	UiTable_ColumnSizeChangeEvent,
+	UiTable_ContextMenuRequestedEvent,
 	UiTable_DisplayedRangeChangedEvent,
 	UiTable_FieldOrderChangeEvent,
-	UiTable_MultipleRowsSelectedEvent,
-	UiTable_RequestNestedDataEvent,
-	UiTable_RowSelectedEvent,
+	UiTable_RowsSelectedEvent,
 	UiTable_SortingChangedEvent,
 	UiTableCommandHandler,
 	UiTableConfig,
 	UiTableEventSource
 } from "../../generated/UiTableConfig";
 import {UiField, ValueChangeEventData} from "../formfield/UiField";
-import {DEFAULT_TEMPLATES, keyCodes} from "trivial-components";
+import {DEFAULT_TEMPLATES} from "../trivial-components/TrivialCore";
 import {UiTableColumnConfig} from "../../generated/UiTableColumnConfig";
 import {UiCompositeFieldTableCellEditor} from "./UiCompositeFieldTableCellEditor";
-import {debouncedMethod} from "../util/debounce";
-import {UiComponent} from "../UiComponent";
+import {debouncedMethod, DebounceMode} from "../util/debounce";
+import {AbstractUiComponent} from "../AbstractUiComponent";
 import {UiDropDown} from "../micro-components/UiDropDown";
 import {TeamAppsUiContext} from "../TeamAppsUiContext";
-import {executeWhenAttached} from "../util/ExecuteWhenAttached";
-import {arraysEqual, manipulateWithoutTransitions} from "../Common";
+import {executeWhenFirstDisplayed} from "../util/ExecuteWhenFirstDisplayed";
+import {arraysEqual, closestAncestor, css, escapeHtml, fadeIn, fadeOut, manipulateWithoutTransitions, parseHtml, Renderer} from "../Common";
 import {UiSortDirection} from "../../generated/UiSortDirection";
-import {EventFactory} from "../../generated/EventFactory";
 import {TeamAppsUiComponentRegistry} from "../TeamAppsUiComponentRegistry";
 import {UiGenericTableCellEditor} from "./UiGenericTableCellEditor";
 import {FixedSizeTableCellEditor} from "./FixedSizeTableCellEditor";
-import {createUiColorCssString} from "../util/CssFormatUtil";
 import {UiHierarchicalClientRecordConfig} from "../../generated/UiHierarchicalClientRecordConfig";
-import {TableDataProvider, TableDataProviderItem} from "./TableDataProvider";
-import {UiButton, UiCheckBox, UiCompositeField, UiCurrencyField, UiFileField, UiMultiLineTextField, UiNumberField, UiRichTextEditor} from "..";
+import {TableDataProvider} from "./TableDataProvider";
+import {UiButton, UiCompositeField, UiFileField, UiMultiLineTextField, UiRichTextEditor} from "..";
 import {UiFieldMessageConfig} from "../../generated/UiFieldMessageConfig";
 import {FieldMessagesPopper, getHighestSeverity} from "../micro-components/FieldMessagesPopper";
 import {nonRecursive} from "../util/nonRecursive";
-import {createUiTableDataRequestConfig} from "../../generated/UiTableDataRequestConfig";
-import {throttledMethod} from "../util/throttle";
 import {UiFieldMessageSeverity} from "../../generated/UiFieldMessageSeverity";
 import {UiTableClientRecordConfig} from "../../generated/UiTableClientRecordConfig";
-import EventData = Slick.EventData;
-import OnHeaderRowCellRenderedEventArgs = Slick.OnHeaderRowCellRenderedEventArgs;
 import {UiTableRowSelectionModel} from "./UiTableRowSelectionModel";
+import {ContextMenu} from "../micro-components/ContextMenu";
+import {UiComponent} from "../UiComponent";
+import {UiTextAlignment} from "../../generated/UiTextAlignment";
+import {UiRefreshableTableConfigUpdateConfig} from "../../generated/UiRefreshableTableConfigUpdateConfig";
+import EventData = Slick.EventData;
 
 interface Column extends Slick.Column<any> {
 	id: string;
@@ -76,7 +75,7 @@ interface Column extends Slick.Column<any> {
 	width: number;
 	minWidth?: number;
 	maxWidth?: number;
-	formatter: (row: number, cell: number, value: any, columnDef: Slick.Column<TableDataProviderItem>, dataContext: TableDataProviderItem) => string;
+	formatter: (row: number, cell: number, value: any, columnDef: Slick.Column<UiTableClientRecordConfig>, dataContext: UiTableClientRecordConfig) => string;
 	asyncEditorLoading?: boolean;
 	autoEdit?: boolean;
 	focusable: boolean;
@@ -88,7 +87,8 @@ interface Column extends Slick.Column<any> {
 	unselectable?: boolean,
 	hiddenIfOnlyEmptyCellsVisible: boolean,
 	messages?: UiFieldMessageConfig[],
-	uiConfig?: UiTableColumnConfig
+	uiConfig?: UiTableColumnConfig,
+	visible: boolean
 }
 
 const backgroundColorCssClassesByMessageSeverity = {
@@ -98,84 +98,85 @@ const backgroundColorCssClassesByMessageSeverity = {
 	[UiFieldMessageSeverity.ERROR]: "bg-danger",
 };
 
-export class UiTable extends UiComponent<UiTableConfig> implements UiTableCommandHandler, UiTableEventSource {
+type FieldsByName = { [fieldName: string]: UiField };
+
+export class UiTable extends AbstractUiComponent<UiTableConfig> implements UiTableCommandHandler, UiTableEventSource {
 
-	public readonly onCellEditingStarted: TeamAppsEvent<UiTable_CellEditingStartedEvent> = new TeamAppsEvent(this);
-	public readonly onCellEditingStopped: TeamAppsEvent<UiTable_CellEditingStoppedEvent> = new TeamAppsEvent(this);
-	public readonly onRowSelected: TeamAppsEvent<UiTable_RowSelectedEvent> = new TeamAppsEvent(this);
-	public readonly onMultipleRowsSelected: TeamAppsEvent<UiTable_MultipleRowsSelectedEvent> = new TeamAppsEvent<UiTable_MultipleRowsSelectedEvent>(this);
-	public readonly onSortingChanged: TeamAppsEvent<UiTable_SortingChangedEvent> = new TeamAppsEvent(this);
-	public readonly onRequestNestedData: TeamAppsEvent<UiTable_RequestNestedDataEvent> = new TeamAppsEvent(this);
-	public readonly onFieldOrderChange: TeamAppsEvent<UiTable_FieldOrderChangeEvent> = new TeamAppsEvent(this);
-	public readonly onColumnSizeChange: TeamAppsEvent<UiTable_ColumnSizeChangeEvent> = new TeamAppsEvent(this);
-	public readonly onDisplayedRangeChanged: TeamAppsEvent<UiTable_DisplayedRangeChangedEvent> = new TeamAppsEvent(this);
+	public readonly onCellEditingStarted: TeamAppsEvent<UiTable_CellEditingStartedEvent> = new TeamAppsEvent();
+	public readonly onCellEditingStopped: TeamAppsEvent<UiTable_CellEditingStoppedEvent> = new TeamAppsEvent();
+	public readonly onCellValueChanged: TeamAppsEvent<UiTable_CellValueChangedEvent> = new TeamAppsEvent();
+	public readonly onCellClicked: TeamAppsEvent<UiTable_CellClickedEvent> = new TeamAppsEvent();
+	public readonly onSortingChanged: TeamAppsEvent<UiTable_SortingChangedEvent> = new TeamAppsEvent();
+	public readonly onRowsSelected: TeamAppsEvent<UiTable_RowsSelectedEvent> = new TeamAppsEvent();
+	public readonly onFieldOrderChange: TeamAppsEvent<UiTable_FieldOrderChangeEvent> = new TeamAppsEvent();
+	public readonly onColumnSizeChange: TeamAppsEvent<UiTable_ColumnSizeChangeEvent> = new TeamAppsEvent();
+	public readonly onDisplayedRangeChanged: TeamAppsEvent<UiTable_DisplayedRangeChangedEvent> = new TeamAppsEvent();
+	public readonly onContextMenuRequested: TeamAppsEvent<UiTable_ContextMenuRequestedEvent> = new TeamAppsEvent();
 
-	private $component: JQuery;
+	private $component: HTMLElement;
 	private _grid: Slick.Grid<any>;
 	private allColumns: Column[];
 	private dataProvider: TableDataProvider;
-	private _$loadingIndicator: JQuery;
+	private _$loadingIndicator: HTMLElement;
 	private loadingIndicatorFadeInTimer: number;
 
 	private _sortField: string;
 	private _sortDirection: UiSortDirection;
 
-	private lastSelectedRowIds: number[];
-
 	private doNotFireEventBecauseSelectionIsCausedByApiCall: boolean = false; // slickgrid fires events even if we set the selection via api...
 
 	private dropDown: UiDropDown;
-	private $selectionFrame: JQuery;
-	private headerRowFields: { [fieldName: string]: UiField } = {};
-	private footerRowFields: { [fieldName: string]: UiField } = {};
+	private $selectionFrame: HTMLElement;
+	private headerRowFields: FieldsByName = {};
+	private footerRowFields: FieldsByName = {};
+
+	private $editorFieldTempContainer: HTMLElement;
+
+	private contextMenu: ContextMenu;
 
-	private $editorFieldTempContainer: JQuery;
+	private rowSelectionCausedByApiCall: boolean;
 
 	constructor(config: UiTableConfig, context: TeamAppsUiContext) {
 		super(config, context);
-		this.$component = $(`<div class="UiTable" id="${config.id}">
+		this.$component = parseHtml(`<div class="UiTable"">
     <div class="slick-table"></div>
     <div class="editor-field-temp-container hidden"></div>
 </div>`);
-		const $table = this.$component.find(".slick-table");
+		const $table = this.$component.querySelector<HTMLElement>(":scope .slick-table");
 		if (config.stripedRows) {
-			$table.addClass("striped-rows");
+			$table.classList.add("striped-rows");
 		}
-		this.$editorFieldTempContainer = this.$component.find(".editor-field-temp-container");
+		this.$editorFieldTempContainer = this.$component.querySelector<HTMLElement>(":scope .editor-field-temp-container");
 
-		this.dataProvider = new TableDataProvider(config.tableData, (fromIndex: number, length: number) => {
-			const viewPort = this._grid.getViewport();
-			const currentlyDisplayedRecordIds = this.getCurrentlyDisplayedRecordIds();
-			this.onDisplayedRangeChanged.fire(EventFactory.createUiTable_DisplayedRangeChangedEvent(
-				config.id, viewPort.top, viewPort.bottom - viewPort.top, currentlyDisplayedRecordIds,
-				createUiTableDataRequestConfig(fromIndex, length, this._sortField, this._sortDirection)
-			));
-		});
-		if (config.totalNumberOfRecords > this.dataProvider.getLength()) {
-			this.dataProvider.setTotalNumberOfRootNodes(config.totalNumberOfRecords);
-		}
+		this.dataProvider = new TableDataProvider();
 
 		this.createSlickGrid(config, $table);
 
+		this.contextMenu = new ContextMenu();
+
 		this.dropDown = new UiDropDown();
+
+		this.displayedDeferredExecutor.invokeWhenReady(() => {
+			if (this._grid != null) {
+				this._grid.scrollRowToTop(0); // the scroll position gets lost when the table gets detached, so it is necessary to inform it that it should display the top of the table
+			}
+		});
 	}
 
 	private isRowExpanded(item: UiHierarchicalClientRecordConfig): boolean {
 		return item.expanded;
 	}
 
-	@executeWhenAttached()
-	private createSlickGrid(config: UiTableConfig, $table: JQuery) {
+	@executeWhenFirstDisplayed()
+	private createSlickGrid(config: UiTableConfig, $table: HTMLElement) {
 		this.allColumns = this._createColumns();
 
 		if (config.showRowCheckBoxes) {
-			var checkboxSelector = new Slick.CheckboxSelectColumn({
-				cssClass: "justify-center"
-			});
+			var checkboxSelector = new Slick.CheckboxSelectColumn({});
 			this.allColumns.unshift(checkboxSelector.getColumnDefinition() as Column);
 		}
 		if (config.showNumbering) {
-			const RowNumberFormatter: Slick.Formatter<TableDataProviderItem> = (row: number, cell: number, value: any, columnDef: Slick.Column<TableDataProviderItem>, dataContext: TableDataProviderItem) => {
+			const RowNumberFormatter: Slick.Formatter<UiTableClientRecordConfig> = (row: number, cell: number, value: any, columnDef: Slick.Column<UiTableClientRecordConfig>, dataContext: UiTableClientRecordConfig) => {
 				return "" + (row + 1);
 			};
 			this.allColumns.unshift({
@@ -183,7 +184,6 @@ export class UiTable extends UiComponent<UiTableConfig> implements UiTableComman
 				name: "#",
 				field: "",
 				formatter: RowNumberFormatter,
-				cssClass: "justify-right",
 				headerCssClass: "text-right",
 				width: 35,
 				maxWidth: 75,
@@ -192,7 +192,8 @@ export class UiTable extends UiComponent<UiTableConfig> implements UiTableComman
 				unselectable: true,
 				sortable: false,
 				focusable: false,
-				hiddenIfOnlyEmptyCellsVisible: false
+				hiddenIfOnlyEmptyCellsVisible: false,
+				visible: true
 			});
 		}
 
@@ -205,39 +206,42 @@ export class UiTable extends UiComponent<UiTableConfig> implements UiTableComman
 			rowHeight: config.rowHeight + config.rowBorderWidth,
 			multiColumnSort: false,
 			multiSelect: config.allowMultiRowSelection,
-			enableTextSelectionOnCells: false, // see also CSS style user-select: none
+			enableTextSelectionOnCells: config.textSelectionEnabled, // see also CSS style user-select: none
 			editable: config.editable,
-			editCommandHandler: (item: TableDataProviderItem, column: Column, editCommand: any) => {
-				column.uiField.commit();
-				editCommand.execute();
-			},
+			// editCommandHandler: (item: TableDataProviderItem, column: Column, editCommand: any) => {
+			// 	column.uiField.commit();
+			// 	editCommand.execute();
+			// },
 			showHeaderRow: config.showHeaderRow,
 			headerRowHeight: config.headerRowHeight,
 			createFooterRow: true,
 			showFooterRow: config.showFooterRow,
 			footerRowHeight: config.footerRowHeight,
+			autoHeight: config.autoHeight
 		};
 
 		this._grid = new Slick.Grid($table, this.dataProvider, this.getVisibleColumns(), options);
 
-		if (config.headerRowFields) {
-			this.configureOuterFields(config.headerRowFields, true);
-			this.headerRowFields = config.headerRowFields;
-		}
-		if (config.footerRowFields) {
-			this.configureOuterFields(config.footerRowFields, false);
-			this.footerRowFields = config.footerRowFields;
-		}
+		config.columns.forEach(c => {
+			if (c.headerRowField != null) {
+				this.headerRowFields[c.name] = c.headerRowField as UiField;
+			}
+			if (c.footerRowField != null) {
+				this.footerRowFields[c.name] = c.footerRowField as UiField;
+			}
+		});
+		this.configureOuterFields(this.headerRowFields as FieldsByName, true);
+		this.configureOuterFields(this.footerRowFields as FieldsByName, false);
 
 		if (config.hideHeaders) {
-			$table.find(".slick-header-columns").css({
+			css($table.querySelector<HTMLElement>(":scope .slick-header-columns"), {
 				height: 0,
 				border: "none"
 			});
 			//this._grid.resizeCanvas();
 		}
 
-		$table.addClass(config.displayAsList ? 'list-mode' : 'table-mode');
+		$table.classList.add(config.displayAsList ? 'list-mode' : 'table-mode');
 
 		this._grid.setSelectionModel(new UiTableRowSelectionModel());
 
@@ -245,12 +249,13 @@ export class UiTable extends UiComponent<UiTableConfig> implements UiTableComman
 			this._grid.registerPlugin(checkboxSelector);
 		}
 
-		this._grid.onViewportChanged.subscribe(() => this.ensureDataForCurrentViewPort());
-		this._$loadingIndicator = $(DEFAULT_TEMPLATES.defaultSpinnerTemplate).hide().appendTo($table);
+		this._$loadingIndicator = parseHtml(DEFAULT_TEMPLATES.defaultSpinnerTemplate);
+		this._$loadingIndicator.classList.add("hidden");
+		$table.appendChild(this._$loadingIndicator);
 		this.dataProvider.onDataLoading.subscribe(() => {
 			clearTimeout(this.loadingIndicatorFadeInTimer);
 			this.loadingIndicatorFadeInTimer = window.setTimeout(() => {
-				this._$loadingIndicator.fadeIn();
+				fadeIn(this._$loadingIndicator);
 			}, 2000);
 		});
 		if (config.sortField) {
@@ -258,56 +263,49 @@ export class UiTable extends UiComponent<UiTableConfig> implements UiTableComman
 			this._sortDirection = config.sortDirection;
 			this._grid.setSortColumn(config.sortField, config.sortDirection === UiSortDirection.ASC);
 		}
+		(this._grid as any).onRendered.subscribe(() => this.setRowCssStyles());
 		this._grid.onSort.subscribe((e, args: Slick.OnSortEventArgs<Slick.SlickData>) => {
 			this._sortField = args.sortCol.id;
 			this._sortDirection = args.sortAsc ? UiSortDirection.ASC : UiSortDirection.DESC;
-			this.onSortingChanged.fire(EventFactory.createUiTable_SortingChangedEvent(config.id, this._sortField, args.sortAsc ? UiSortDirection.ASC : UiSortDirection.DESC));
+			this.onSortingChanged.fire({
+				sortField: this._sortField,
+				sortDirection: args.sortAsc ? UiSortDirection.ASC : UiSortDirection.DESC
+			});
+		});
+		this._grid.getCanvasNode().addEventListener("mousedown", ev => {
+			if (ev.shiftKey && this._config.allowMultiRowSelection) {
+				document.getSelection().removeAllRanges(); // make sure, no text is selected
+			}
 		});
 		this._grid.onSelectedRowsChanged.subscribe((eventData, args) => {
 			if (args.rows.some((row) => !this.dataProvider.getItem(row))) {
-				return; // one of the selected rows has no id (so it does not seem to be loaded yet). ==> do not fire an event.
+				return; // TODO one of the selected rows has no id. How to handle this? What if the user wants to select a huge range?
 			}
-			if (!this.doNotFireEventBecauseSelectionIsCausedByApiCall
-				&& JSON.stringify(this.lastSelectedRowIds) !== JSON.stringify(args.rows)) {
-				this.lastSelectedRowIds = args.rows;
-				if (args.rows.length === 1) {
-					this.onRowSelected.fire(EventFactory.createUiTable_RowSelectedEvent(
-						config.id,
-						this.dataProvider.getItem(args.rows[0]).id,
-						false, // see click handlers on canvas element...
-						false // see click handlers on canvas element...
-					));
-				} else if (args.rows.length > 1) {
-					this.onMultipleRowsSelected.fire(EventFactory.createUiTable_MultipleRowsSelectedEvent(
-						config.id,
-						args.rows.map((selectionIndex) => {
-							return this.dataProvider.getItem(selectionIndex).id;
-						})
-					));
-				}
+			if (!this.doNotFireEventBecauseSelectionIsCausedByApiCall && !this.dataProvider.agreesWithSelectedRows(args.rows)) {
+				this.onRowsSelected.fire({
+					recordIds: args.rows.map((selectionIndex) => {
+						return this.dataProvider.getItem(selectionIndex).id;
+					})
+				});
 			}
+			this.dataProvider.setSelectedRows(args.rows);
 			this.updateSelectionFramePosition(true);
 		});
-		this._grid.onCellChange.subscribe((eventData: EventData, data) => {
+		this._grid.onCellChange.subscribe((eventData: EventData, args: Slick.OnCellChangeEventArgs<UiTableClientRecordConfig>) => {
+
+			// The problem with this approach is we do not get the intermediate committed change events!
+			// let columnPropertyName = this.getVisibleColumns()[args.cell].id;
+			// this.onCellValueChanged.fire({recordId: args.item.id, columnPropertyName: columnPropertyName, value: args.item.values[columnPropertyName]});
+
 			this.updateSelectionFramePosition(true);
 		});
-		this._grid.onClick.subscribe((e: MouseEvent, args: Slick.OnClickEventArgs<TableDataProviderItem>) => {
+		this._grid.onClick.subscribe((e: MouseEvent, args: Slick.OnClickEventArgs<UiTableClientRecordConfig>) => {
 			setTimeout(/* make sure the table updated its activeCell property! */ () => {
 				const column = this._grid.getColumns()[args.cell];
 				let fieldName = column.id;
 				let uiField: UiField = (column as Column).uiField;
 				let item = this.dataProvider.getItem(args.row);
 				if (item) { // may be undefined if this is a new row!
-					let isIndentedColumn = fieldName === this._config.indentedColumnName;
-					if (isIndentedColumn && $(e.target).hasClass("teamapps-table-row-expander")) {
-						$(e.target).toggleClass("expanded");
-						if ((item as any).lazyChildren && !item.children && !this.isRowExpanded(item)) {
-							this.requestLazyChildren(item.id);
-						}
-						this.dataProvider.toggleRowExpanded(args.row);
-						this.rerenderAllRows();
-					}
-					let cellValue: any = item.values[fieldName];
 					let $buttonElement = $(e.target).closest(".UiButton");
 					if (uiField && uiField instanceof UiButton && $buttonElement.length > 0) {
 						this.logger.warn("TODO: handle button click, especially in case of a dropdown...");
@@ -318,11 +316,10 @@ export class UiTable extends UiComponent<UiTableConfig> implements UiTableComman
 						// 	minHeight: uiButtonConfig.minDropDownHeight
 						// });
 					} else if (uiField instanceof UiFileField) {
-						let $templateWrapper = $((<any>e).target).closest(".custom-entry-template-wrapper");
-						if ($templateWrapper.length > 0) {
-							let index = $templateWrapper.parent().index($templateWrapper);
-							this.logger.warn("TODO: handle file field click");
-						}
+						// TODO handle click?
+					}
+					if (uiField) {
+						this.onCellClicked.fire({columnPropertyName: fieldName, recordId: item.id})
 					}
 				}
 			});
@@ -331,7 +328,11 @@ export class UiTable extends UiComponent<UiTableConfig> implements UiTableComman
 			let id = data.item && data.item.id;
 			let fieldName = this._grid.getColumns()[data.cell].field;
 			if (id != null && fieldName != null) {
-				this.onCellEditingStarted.fire(EventFactory.createUiTable_CellEditingStartedEvent(this.getId(), id, fieldName, data.item.values[fieldName]));
+				this.onCellEditingStarted.fire({
+					recordId: id,
+					columnPropertyName: fieldName,
+					currentValue: data.item.values[fieldName]
+				});
 			}
 		});
 		this._grid.onBeforeCellEditorDestroy.subscribe((e, data: Slick.OnBeforeCellEditorDestroyEventArgs<any>) => {
@@ -340,44 +341,52 @@ export class UiTable extends UiComponent<UiTableConfig> implements UiTableComman
 				let id = dataItem.id;
 				let fieldName = this._grid.getColumns()[this._grid.getActiveCell().cell].field;
 				if (id != null && fieldName != null) {
-					this.onCellEditingStopped.fire(EventFactory.createUiTable_CellEditingStoppedEvent(this.getId(), id, fieldName));
+					this.onCellEditingStopped.fire({
+						recordId: id,
+						columnPropertyName: fieldName
+					});
 				}
 			}
 		});
 		$(this._grid.getCanvasNode()).dblclick((e) => {
 			let cell = this._grid.getCellFromEvent(<any>e);
 			if (cell != null) {
-				this.onRowSelected.fire(EventFactory.createUiTable_RowSelectedEvent(
-					config.id,
-					this.dataProvider.getItem(cell.row).id,
-					false,
-					true
-				));
+				// TODO double-click event?
 			}
 		});
 
 		$(this._grid.getCanvasNode()).on("contextmenu", (e) => {
 			let cell = this._grid.getCellFromEvent(<any>e);
-			this.onRowSelected.fire(EventFactory.createUiTable_RowSelectedEvent(
-				config.id,
-				this.dataProvider.getItem(cell.row).id,
-				true,
-				false
-			));
+			if (cell != null && this.dataProvider.getItem(cell.row) != null) {
+				let recordId = this.dataProvider.getItem(cell.row).id;
+				this._grid.setSelectedRows([cell.row]);
+				this.onRowsSelected.fire({
+					recordIds: [recordId]
+				});
+				if (!isNaN(recordId) && this._config.contextMenuEnabled) {
+					this.contextMenu.open(e as unknown as MouseEvent, requestId => this.onContextMenuRequested.fire({
+						recordId: recordId,
+						requestId
+					}));
+				}
+			}
 		});
 
 		if (config.selectionFrame) {
-			this.$selectionFrame = $(`<div class="UiTable-selection-frame">`)
-				.css({
-					"border": `${this._config.selectionFrame.borderWidth}px solid ${createUiColorCssString(this._config.selectionFrame.color)}`,
-					"box-shadow": `0 0 ${this._config.selectionFrame.shadowWidth}px 0 rgba(0, 0, 0, .5), 0 0 ${this._config.selectionFrame.glowingWidth}px 0 ${createUiColorCssString(this._config.selectionFrame.color)}`,
-					"transition": `top ${this._config.selectionFrame.animationDuration}ms, left ${this._config.selectionFrame.animationDuration}ms, right ${this._config.selectionFrame.animationDuration}ms, width ${this._config.selectionFrame.animationDuration}ms, height ${this._config.selectionFrame.animationDuration}ms`
-				})
-				.appendTo(this.$component);
+			this.$selectionFrame = parseHtml(`<div class="UiTable-selection-frame">`);
+			css(this.$selectionFrame, {
+				border: `${this._config.selectionFrame.borderWidth}px solid ${(this._config.selectionFrame.color)}`,
+				boxShadow: `0 0 ${this._config.selectionFrame.shadowWidth}px 0 rgba(0, 0, 0, .5), 0 0 ${this._config.selectionFrame.glowingWidth}px 0 ${(this._config.selectionFrame.color)}`,
+				transition: `top ${this._config.selectionFrame.animationDuration}ms, left ${this._config.selectionFrame.animationDuration}ms, right ${this._config.selectionFrame.animationDuration}ms, width ${this._config.selectionFrame.animationDuration}ms, height ${this._config.selectionFrame.animationDuration}ms`
+			});
+			this.$component.appendChild(this.$selectionFrame);
 		}
+		this._grid.onViewportChanged.subscribe(() => {
+			//this.onDisplayedRangeChanged.fire()
+		});
 		this._grid.onScroll.subscribe((eventData) => {
 			this.updateSelectionFramePosition();
-			this.fireDisplayedRangeChanged(config);
+			this.throttledFireDisplayedRangeChanged();
 		});
 		this._grid.onViewportChanged.subscribe((eventData) => {
 			this.toggleColumnsThatAreHiddenWhenTheyContainNoVisibleNonEmptyCells();
@@ -405,18 +414,20 @@ export class UiTable extends UiComponent<UiTableConfig> implements UiTableComman
 			if (item == null) {
 				return;
 			}
-			const fieldName = (this._grid.getColumns()[cell.cell] as Column).id;
-
-			const cellMessages = (item.messages && item.messages[fieldName] || []);
-			const columnMessages = this.getColumnById(fieldName).messages;
-			const cellHasMessages = cellMessages.length > 0 || columnMessages.length > 0;
-			const isEditorCell = this._grid.getCellEditor() != null && this._grid.getActiveCell().row === cell.row && this._grid.getActiveCell().cell === cell.cell;
-			if (!isEditorCell && cellHasMessages) {
-				this.fieldMessagePopper.setReferenceElement(this._grid.getCellNode(cell.row, cell.cell));
-				this.fieldMessagePopper.setMessages([...cellMessages, ...columnMessages]);
-				this.fieldMessagePopper.setVisible(true);
-			} else {
-				this.fieldMessagePopper.setVisible(false);
+			const columnId = (this._grid.getColumns()[cell.cell] as Column).id;
+
+			if (!this.isSpecialColumn(this.getColumnById(columnId))) {
+				const cellMessages = (item.messages && item.messages[columnId] || []);
+				const columnMessages = this.getColumnById(columnId).messages;
+				const cellHasMessages = cellMessages.length > 0 || columnMessages.length > 0;
+				const isEditorCell = this._grid.getCellEditor() != null && this._grid.getActiveCell().row === cell.row && this._grid.getActiveCell().cell === cell.cell;
+				if (!isEditorCell && cellHasMessages) {
+					this.fieldMessagePopper.setReferenceElement(this._grid.getCellNode(cell.row, cell.cell));
+					this.fieldMessagePopper.setMessages([...cellMessages, ...columnMessages]);
+					this.fieldMessagePopper.setVisible(true);
+				} else {
+					this.fieldMessagePopper.setVisible(false);
+				}
 			}
 		});
 		this._grid.onMouseLeave.subscribe((e, args) => {
@@ -425,15 +436,48 @@ export class UiTable extends UiComponent<UiTableConfig> implements UiTableComman
 		this._grid.init();
 	}
 
-	private ensureDataForCurrentViewPort() {
-		const vp = this._grid.getViewport();
-		this.dataProvider.ensureData(vp.top, vp.bottom);
+	private setRowCssStyles() {
+		if (this._grid.getColumns().length == 0) {
+			return;
+		}
+		let viewport = this._grid.getViewport();
+		let top = viewport.top;
+		let bottom = viewport.bottom;
+		let firstVisibleColumnIndex = 0;
+		let sumOfColumnWidths = 0;
+		do {
+			sumOfColumnWidths += this._grid.getColumns()[firstVisibleColumnIndex].width
+		} while (sumOfColumnWidths < viewport.leftPx && firstVisibleColumnIndex < this._grid.getColumns().length);
+
+		for (let i = top; i < bottom; i++) {
+			if (this.dataProvider.getItem(i)?.cssStyle != null) {
+				let cellNode = this._grid.getCellNode(i, firstVisibleColumnIndex);
+				if (cellNode != null) {
+					let $row = closestAncestor(cellNode, ".slick-row", false, this.doGetMainElement());
+					for (const [name, value] of Object.entries(this.dataProvider.getItem(i).cssStyle)) {
+						$row.style.setProperty(name, value);
+					}
+				}
+			}
+		}
+	}
+
+	@debouncedMethod(150, DebounceMode.BOTH)
+	private throttledFireDisplayedRangeChanged() {
+		this.onDisplayedRangeChanged.fireIfChanged(this.createDisplayRangeChangedEvent());
 	}
 
-	@throttledMethod(500) // debounce/throttle scrolling without data requests only!!! (otherwise the tableDataProvider will mark rows as requested but the actual request will not get to the server)
-	private fireDisplayedRangeChanged(config: UiTableConfig) {
-		const viewport = this._grid.getViewport();
-		this.onDisplayedRangeChanged.fire(EventFactory.createUiTable_DisplayedRangeChangedEvent(config.id, viewport.top, viewport.bottom - viewport.top, this.getCurrentlyDisplayedRecordIds(), null));
+	private createDisplayRangeChangedEvent(): UiTable_DisplayedRangeChangedEvent {
+		const viewPort = this._grid.getViewport();
+		const displayedStartIndex = viewPort.top;
+		const displayedLength = viewPort.bottom - viewPort.top;
+
+		const requestedStartIndex = Math.max(0, displayedStartIndex - displayedLength);
+		const requestedEndIndex = displayedStartIndex + 2 * displayedLength;
+		return {
+			startIndex: requestedStartIndex,
+			length: requestedEndIndex - requestedStartIndex
+		};
 	}
 
 	@nonRecursive
@@ -461,13 +505,13 @@ export class UiTable extends UiComponent<UiTableConfig> implements UiTableComman
 	}
 
 	private configureOuterFields(fieldsByColumnId: { [columnName: string]: UiField }, header: boolean) {
-		let renderedEvent: Slick.Event<OnHeaderRowCellRenderedEventArgs<any>> = header ? this._grid.onHeaderRowCellRendered : (this._grid as any).onFooterRowCellRendered;
+		let renderedEvent: Slick.Event<Slick.OnHeaderRowCellRenderedEventArgs<any>> = header ? this._grid.onHeaderRowCellRendered : (this._grid as any).onFooterRowCellRendered;
 		renderedEvent.subscribe((e, args) => {
 			$(args.node)[0].innerHTML = '';
 			const columnName = args.column.id;
 			let field = fieldsByColumnId[columnName];
 			if (field) {
-				field.getMainDomElement().appendTo(args.node);
+				args.node.appendChild(field.getMainElement());
 			}
 		});
 	}
@@ -484,18 +528,10 @@ export class UiTable extends UiComponent<UiTableConfig> implements UiTableComman
 		return currentlyDisplayedRecordIds;
 	}
 
-	public getMainDomElement(): JQuery {
+	public doGetMainElement(): HTMLElement {
 		return this.$component;
 	}
 
-	protected onAttachedToDom() {
-		//this._grid.updateCanvasWidth(true);
-		if (this._grid != null) {
-			this._grid.scrollRowToTop(0); // the scroll position gets lost when the table gets detached, so it is necessary to inform it that it should display the top of the table
-		}
-		this.reLayout();
-	}
-
 	private _createColumns(): Column[] {
 		const columns: Column[] = [];
 		for (let i = 0; i < this._config.columns.length; i++) {
@@ -506,28 +542,30 @@ export class UiTable extends UiComponent<UiTableConfig> implements UiTableComman
 	}
 
 	private createSlickColumnConfig(columnConfig: UiTableColumnConfig): Column {
-		const uiField: UiField = columnConfig.field;
-		this.prepareEditorField(columnConfig.propertyName, uiField);
+		const uiField = columnConfig.field as UiField;
+		this.prepareEditorField(columnConfig.name, uiField);
 
 		let editorFactory;
 		if (uiField instanceof UiCompositeField) {
-			editorFactory = UiCompositeFieldTableCellEditor.bind(null, uiField, () => uiField.getMainDomElement().appendTo(this.$editorFieldTempContainer));
+			editorFactory = UiCompositeFieldTableCellEditor.bind(null, uiField, () => this.$editorFieldTempContainer.appendChild(uiField.getMainElement()));
 		} else if (uiField instanceof UiRichTextEditor || uiField instanceof UiMultiLineTextField) {
-			editorFactory = FixedSizeTableCellEditor.bind(null, uiField, () => uiField.getMainDomElement().appendTo(this.$editorFieldTempContainer));
+			editorFactory = FixedSizeTableCellEditor.bind(null, uiField, () => this.$editorFieldTempContainer.appendChild(uiField.getMainElement()));
 		} else {
-			editorFactory = UiGenericTableCellEditor.bind(null, uiField, () => uiField.getMainDomElement().appendTo(this.$editorFieldTempContainer));
+			editorFactory = UiGenericTableCellEditor.bind(null, uiField, () => this.$editorFieldTempContainer.appendChild(uiField.getMainElement()));
 		}
 
+		var displayTemplateRenderer = columnConfig.displayTemplate != null ? this._context.templateRegistry.createTemplateRenderer(columnConfig.displayTemplate) : null;
+
 		const slickColumnConfig: Column = {
-			id: columnConfig.propertyName,
-			field: columnConfig.propertyName,
+			id: columnConfig.name,
+			field: columnConfig.name,
 			uiField: uiField,
-			name: `<div class="column-header-icon img img-16 ${columnConfig.icon == null ? "hidden" : ""}" style="background-image: url(${this._context.getIconPath(columnConfig.icon, 16)})"></div>
-<div class="column-header-title">${columnConfig.title}</div>`,
+			name: `<div class="column-header-icon img img-16 ${columnConfig.icon == null ? "hidden" : ""}" style="background-image: url('${columnConfig.icon}')"></div>
+<div class="column-header-title">${escapeHtml(columnConfig.title)}</div>`,
 			width: columnConfig.defaultWidth || ((columnConfig.minWidth + columnConfig.maxWidth) / 2) || undefined,
 			minWidth: columnConfig.minWidth || 30,
 			maxWidth: columnConfig.maxWidth || undefined,
-			formatter: this.createCellFormatter(uiField),
+			formatter: this.createCellFormatter(uiField, displayTemplateRenderer),
 			editor: editorFactory,
 			asyncEditorLoading: false,
 			autoEdit: true,
@@ -536,7 +574,9 @@ export class UiTable extends UiComponent<UiTableConfig> implements UiTableComman
 			resizable: columnConfig.resizeable,
 			hiddenIfOnlyEmptyCellsVisible: columnConfig.hiddenIfOnlyEmptyCellsVisible,
 			messages: columnConfig.messages,
-			uiConfig: columnConfig
+			uiConfig: columnConfig,
+			visible: columnConfig.visible,
+			toolTip: columnConfig.title
 		};
 
 		slickColumnConfig.headerCssClass = this.getColumnCssClass(slickColumnConfig);
@@ -548,33 +588,29 @@ export class UiTable extends UiComponent<UiTableConfig> implements UiTableComman
 
 	private getColumnCssClass(column: Column) {
 		let columnCssClasses: string[] = [];
-		if (column.uiField instanceof UiNumberField || column.uiField instanceof UiCurrencyField) {
-			columnCssClasses.push('justify-right');
-		} else if (column.uiField instanceof UiCheckBox || column.uiField instanceof UiButton) {
-			columnCssClasses.push('justify-center');
-		}
 		const highestSeverity = getHighestSeverity(column.messages, null);
 		if (highestSeverity != null) {
 			columnCssClasses.push(backgroundColorCssClassesByMessageSeverity[highestSeverity]);
 		}
+		columnCssClasses.push("align-" + UiTextAlignment[column.uiConfig.headerAlignment].toLocaleLowerCase());
 		return columnCssClasses.join(" ");
 	}
 
 	private prepareEditorField(columnPropertyName: string, uiField: UiField) {
-		uiField.getMainDomElement().appendTo(this.$editorFieldTempContainer);
-		if (uiField.getFocusableElement()) {
-			uiField.getFocusableElement().on("keydown.nav", (e) => {
-				if (e.keyCode === keyCodes.left_arrow
-					|| e.keyCode === keyCodes.right_arrow
-					|| e.keyCode === keyCodes.up_arrow
-					|| e.keyCode === keyCodes.down_arrow) {
-					e.stopPropagation();
-				}
-			});
-			uiField.getFocusableElement()
-				.focus(() => uiField.getMainDomElement().css("z-index", 1000))
-				.blur(() => uiField.getMainDomElement().css("z-index", 0));
-		}
+		this.$editorFieldTempContainer.appendChild(uiField.getMainElement());
+		uiField.getMainElement().addEventListener("keydown", (e) => {
+			if (e.key === "ArrowLeft"
+				|| e.key === "ArrowRight"
+				|| e.key === "ArrowUp"
+				|| e.key === "ArrowDown") {
+				e.stopPropagation();
+			}
+		});
+		// TODO do not rely on focusableElement as its focus and blur events are probably not what one wants!
+		uiField.getMainElement().addEventListener("focusin", () => {
+			uiField.getMainElement().style.zIndex = "1000";
+		});
+		uiField.getMainElement().addEventListener("focusout", () => uiField.getMainElement().style.zIndex = "0");
 		uiField.onValueChanged.addListener((eventData: ValueChangeEventData) => this.handleFieldValueChanged(columnPropertyName, eventData.value));
 		uiField.onVisibilityChanged.addListener(visible => this.setSlickGridColumns(this.getVisibleColumns()));
 
@@ -586,7 +622,7 @@ export class UiTable extends UiComponent<UiTableConfig> implements UiTableComman
 		}
 	}
 
-	private createCellFormatter(field: UiField) {
+	private createCellFormatter(field: UiField, displayTemplate: Renderer | null | undefined) {
 		const createInnerCellFormatter = () => {
 			if (field instanceof UiCompositeField) {
 				this.logger.warn("TODO: create cell formatter for UiCompositeField!");
@@ -594,8 +630,12 @@ export class UiTable extends UiComponent<UiTableConfig> implements UiTableComman
 				// return (row: number, cell: number, value: any, columnDef: Slick.Column<TableDataProviderItem>, dataContext: TableDataProviderItem) => {
 				// return field.getReadOnlyHtml(field as UiCompositeFieldConfig, {_type: "UiRecordValue", value: dataContext}, this._context, columnDef.width + 1);
 				// };
-			} else if (field.getReadOnlyHtml) {
-				return (row: number, cell: number, value: any, columnDef: Slick.Column<TableDataProviderItem>, dataContext: TableDataProviderItem) => {
+			} else if (displayTemplate != null) {
+				return (row: number, cell: number, value: any, columnDef: Slick.Column<UiTableClientRecordConfig>, dataContext: UiTableClientRecordConfig) => {
+					return displayTemplate.render(dataContext.displayTemplateValues[columnDef.id]);
+				};
+			} else if (field.getReadOnlyHtml != null) {
+				return (row: number, cell: number, value: any, columnDef: Slick.Column<UiTableClientRecordConfig>, dataContext: UiTableClientRecordConfig) => {
 					return field.getReadOnlyHtml(dataContext.values[columnDef.id], columnDef.width);
 				};
 			} else {
@@ -604,7 +644,7 @@ export class UiTable extends UiComponent<UiTableConfig> implements UiTableComman
 		};
 
 		const innerCellFormatter = createInnerCellFormatter(); // may be undefined!
-		return (row: number, cell: number, value: any, columnDef: Slick.Column<TableDataProviderItem>, dataContext: TableDataProviderItem) => {
+		return (row: number, cell: number, value: any, columnDef: Slick.Column<UiTableClientRecordConfig>, dataContext: UiTableClientRecordConfig) => {
 			const innerHtml = innerCellFormatter ? innerCellFormatter(row, cell, value, columnDef, dataContext) : "###";
 			const highestMessageSeverity = getHighestSeverity(dataContext.messages && dataContext.messages[columnDef.id], null);
 			const fieldCssClasses: string[] = [];
@@ -619,10 +659,7 @@ export class UiTable extends UiComponent<UiTableConfig> implements UiTableComman
 				additionalHtml += `<div class="cell-marker"></div>`;
 			}
 			const cellClass = fieldCssClasses.join(" ");
-			let isIndentedColumn = this._config.indentedColumnName === columnDef.id;
-			let hasChildren = dataContext.children || (dataContext as any).lazyChildren;
-			return `<div class="validation-class-wrapper ${cellClass}" style="${isIndentedColumn && dataContext.depth > 0 ? 'padding-left: ' + (dataContext.depth * this._config.indentation) + 'px' : ''}">
-    ${isIndentedColumn ? `<div class="teamapps-expander teamapps-table-row-expander ${this.isRowExpanded(dataContext) ? 'expanded' : ''} ${hasChildren ? '' : 'invisible'}" data-depth="${dataContext.depth}"></div>` : ''}
+			return `<div class="validation-class-wrapper ${cellClass}">
     <div class="anti-overflow-wrapper">
     	${innerHtml}
 	</div>
@@ -635,120 +672,74 @@ export class UiTable extends UiComponent<UiTableConfig> implements UiTableComman
 		return "message-" + UiFieldMessageSeverity[severity].toLowerCase();
 	}
 
-	@executeWhenAttached()
+	@executeWhenFirstDisplayed()
 	public clearTable() {
 		this.dataProvider.clear();
 		this._grid.setData(this.dataProvider, true);
 		this._grid.render();
-		this._grid.setSelectedRows([]);
+		this.doWithoutFiringSelectionEvent(() => this._grid.setSelectedRows([]));
 	}
 
-	@executeWhenAttached()
-	public addData(startIndex: number,
-	               data: UiTableClientRecordConfig[],
-	               totalNumberOfRecords: number,
-	               sortField: string,
-	               sortDirection: UiSortDirection,
-	               clearTableCache: boolean) {
-		if (clearTableCache) {
-			this.dataProvider.clear();
-			this._grid.setSelectedRows([]);
-		}
-
-		this._sortField = sortField;
-		this._sortDirection = sortDirection;
-		if (sortField) {
-			this._grid.setSortColumn(sortField, sortDirection === UiSortDirection.ASC);
-		}
-
-		const tableData = data;
-		this.dataProvider.updateRootNodeData(startIndex, tableData);
-		for (let i = 0; i < tableData.length; i++) {
-			this._grid.invalidateRow(startIndex + i);
+	@executeWhenFirstDisplayed()
+	updateData(startIndex: number, recordIds: number[], newRecords: UiTableClientRecordConfig[], totalNumberOfRecords: number): any {
+		let editorCoordinates: { row: number, recordId: any; fieldName: any };
+		editorCoordinates = this._grid.getCellEditor() != null ? {
+			row: this._grid.getActiveCell().row,
+			recordId: this.getActiveCellRecordId(),
+			fieldName: this.getActiveCellFieldName()
+		} : null;
+		let editorRowChanged = false;
+		const countChanged = this.dataProvider.getLength() != totalNumberOfRecords;
+
+		// TODO necessary: this.doWithoutFiringSelectionEvent(() => this._grid.setSelectedRows([]));
+		let changedRowNumbers = this.dataProvider.updateData(startIndex, recordIds, newRecords, totalNumberOfRecords);
+		if (changedRowNumbers === true) {
+			this._grid.invalidateAllRows();
+			editorRowChanged = editorCoordinates != null;
+		} else {
+			this._grid.invalidateRows(changedRowNumbers);
+			editorRowChanged = editorCoordinates != null && changedRowNumbers.indexOf(editorCoordinates.row) >= 0;
 		}
 
-		if (totalNumberOfRecords != this.dataProvider.getLength()) {
-			this.dataProvider.setTotalNumberOfRootNodes(totalNumberOfRecords);
+		if (countChanged) {
+			this._grid.updateRowCount(); // this will make the editor lose focus
 		}
-
-		this._grid.updateRowCount();
-		this._grid.render();
+		this._grid.render(); // this will make the editor lose focus, if its row changed (and therefore was invalidated)
 		this.toggleColumnsThatAreHiddenWhenTheyContainNoVisibleNonEmptyCells();
-
-		const selectedRows = this._grid.getSelectedRows();
-		selectedRows.push(...data.filter(record => record.selected).map(record => this.dataProvider.findVisibleRowIndexById(record.id)));
-		this._grid.setSelectedRows(selectedRows);
-
+		this.doWithoutFiringSelectionEvent(() => this._grid.setSelectedRows(this.dataProvider.getSelectedRowsIndexes()));
 		clearTimeout(this.loadingIndicatorFadeInTimer);
-		this._$loadingIndicator.fadeOut();
 
-		this._grid.resizeCanvas();
-		this.updateSelectionFramePosition();
+		fadeOut(this._$loadingIndicator);
 
-		if (clearTableCache) {
-			this.ensureDataForCurrentViewPort();
+		if (countChanged) {
+			this._grid.resizeCanvas(); // this will make the editor lose focus
 		}
-	}
-
-	@executeWhenAttached()
-	removeData(ids: number[]): void {
-		let deletedItemRowNumbers = Object.values(this.dataProvider.findVisibleRowIndexesByIds(ids));
-		deletedItemRowNumbers.sort();
+		this.updateSelectionFramePosition();
 
-		function numberOfSmallerDeletedRows(rowNumber: number) {
-			let i = 0;
-			while (i < deletedItemRowNumbers.length && ids[i] < rowNumber) {
-				i++;
-			}
-			return i;
+		if (editorCoordinates != null && (editorRowChanged || countChanged)) {
+			this.editCellIfVisible(editorCoordinates.recordId, editorCoordinates.row, editorCoordinates.fieldName);
 		}
-
-		this.dataProvider.removeItems(ids);
-
-		let newSelectedRows = this._grid.getSelectedRows()
-			.filter(selectedRowIndex => deletedItemRowNumbers.indexOf(selectedRowIndex) == -1)
-			.map(selectedRowIndex => selectedRowIndex - numberOfSmallerDeletedRows(selectedRowIndex));
-		this._grid.setSelectedRows(newSelectedRows);
-
-		this.rerenderAllRows();
-	}
-
-	insertRows(index: number, data: UiTableClientRecordConfig[]): void {
-		this.dataProvider.insertRows(index, data);
-		this.rerenderAllRows();
 	}
 
-	deleteRows(ids: number[]): void {
-		this.dataProvider.deleteItems(ids);
-		this.rerenderAllRows();
-	}
-
-	@executeWhenAttached()
-	public setChildrenData(recordId: any, data: any[]) {
-		let tableData = data;
-		this.dataProvider.setChildrenData(recordId, tableData);
-
-		// TODO #events
-		this.rerenderAllRows();
+	setSorting(sortField: string, sortDirection: UiSortDirection) {
+		this._sortField = sortField;
+		this._sortDirection = sortDirection;
+		if (sortField) {
+			this._grid.setSortColumn(sortField, sortDirection === UiSortDirection.ASC);
+		}
 	}
 
-	@executeWhenAttached()
+	@executeWhenFirstDisplayed()
 	public setCellValue(recordId: any, fieldName: string, data: any) {
-		const node = this.dataProvider.getNodeById(recordId);
+		const node = this.dataProvider.getRecordById(recordId);
 		if (node) {
 			node.values[fieldName] = data;
 		}
 		this.rerenderRecordRow(recordId);
 	}
 
-	@executeWhenAttached()
-	public updateRecord(record: UiTableClientRecordConfig) {
-		this.dataProvider.updateNode(record);
-		this.rerenderRecordRow(record.id);
-	}
-
 	private rerenderRecordRow(recordId: any) {
-		const rowIndex = this.dataProvider.findVisibleRowIndexById(recordId); // TODO #events
+		const rowIndex = this.dataProvider.getRowIndexByRecordId(recordId);
 		if (rowIndex != null) {
 			let editing = this._grid.getCellEditor();
 
@@ -795,31 +786,37 @@ export class UiTable extends UiComponent<UiTableConfig> implements UiTableComman
 	}
 
 	private getVisibleColumns() {
-		return this.allColumns.filter(column => !column.uiField || column.uiField.isVisible());
+		return this.allColumns.filter((column) => {
+			return this.isSpecialColumn(column) || (column.visible && column.uiField.isVisible());
+		});
+	}
+
+	private isSpecialColumn(column: Column) {
+		return !column.uiField;
 	}
 
 	private getColumnById(id: string) {
 		return this.allColumns.filter(column => column.id === id)[0];
 	}
 
-	@executeWhenAttached()
+	@executeWhenFirstDisplayed()
 	public markTableField(recordId: any, fieldName: string, mark: boolean) {
 		this.dataProvider.setCellMarked(recordId, fieldName, mark);
 		this.rerenderRecordRow(recordId);
 	}
 
-	@executeWhenAttached()
+	@executeWhenFirstDisplayed()
 	public clearAllFieldMarkings() {
-		this.dataProvider.clearAllFieldMarkings();
+		this.dataProvider.clearAllCellMarkings();
 		for (let i = 0; i < this.dataProvider.getLength(); i++) {
 			this._grid.invalidateRow(i);
 		}
 		this._grid.render();
 	}
 
-	@executeWhenAttached()
+	@executeWhenFirstDisplayed()
 	public setRecordBold(recordId: any, bold: boolean) {
-		let rowIndex = this.dataProvider.findVisibleRowIndexById(recordId);
+		let rowIndex = this.dataProvider.getRowIndexByRecordId(recordId);
 		if (rowIndex == null) {
 			return;
 		}
@@ -829,34 +826,56 @@ export class UiTable extends UiComponent<UiTableConfig> implements UiTableComman
 		this._grid.render();
 	}
 
-	@executeWhenAttached()
-	public selectRows(recordIds: number[], scrollToFirstRecord: boolean /*TODO*/) {
-		const rowIndexes = Object.values(this.dataProvider.findVisibleRowIndexesByIds(recordIds));
+	@executeWhenFirstDisplayed()
+	public selectRecords(recordIds: number[], scrollToFirstIfAvailable: boolean) {
+		const rowIndexes = recordIds.map(id => this.dataProvider.getRowIndexByRecordId(id));
+		this.doWithoutFiringSelectionEvent(() => {
+			if (rowIndexes.length > 0) {
+				this.doWithoutFiringSelectionEvent(() => this._grid.setSelectedRows(rowIndexes));
+				if (scrollToFirstIfAvailable) {
+					this._grid.scrollRowIntoView(rowIndexes[0], false);
+				}
+			} else {
+				this.doWithoutFiringSelectionEvent(() => this._grid.setSelectedRows([]));
+			}
+		});
+	}
 
-		this.doNotFireEventBecauseSelectionIsCausedByApiCall = true;
-		try {
+	@executeWhenFirstDisplayed()
+	public selectRows(rowIndexes: number[], scrollToFirst: boolean) {
+		this.doWithoutFiringSelectionEvent(() => {
 			if (rowIndexes.length > 0) {
-				this._grid.setSelectedRows(rowIndexes);
-				this._grid.scrollRowToTop(rowIndexes[0]);
+				this.doWithoutFiringSelectionEvent(() => this._grid.setSelectedRows(rowIndexes));
+				if (scrollToFirst) {
+					this._grid.scrollRowIntoView(rowIndexes[0], false);
+				}
 			} else {
-				this._grid.setSelectedRows([]);
+				this.doWithoutFiringSelectionEvent(() => this._grid.setSelectedRows([]));
 			}
+		});
+	}
+
+	private doWithoutFiringSelectionEvent(action: () => any) {
+		this.doNotFireEventBecauseSelectionIsCausedByApiCall = true;
+		try {
+			return action();
 		} finally {
 			this.doNotFireEventBecauseSelectionIsCausedByApiCall = false;
 		}
 	}
 
-	editCellIfAvailable(recordId: number, propertyName: string): void {
-		const rowNumber = this.dataProvider.findVisibleRowIndexById(recordId);
-		if (rowNumber != null) {
+	editCellIfVisible(recordId: number, row: number, propertyName: string): void {
+		let rowNumberFromRecordId = this.dataProvider.getRowIndexByRecordId(recordId);
+		const rowNumber = rowNumberFromRecordId != -1 ? rowNumberFromRecordId : row;
+		if (rowNumber >= this._grid.getViewport().top && rowNumber <= this._grid.getViewport().bottom) {
 			this._grid.setActiveCell(rowNumber, this._grid.getColumns().findIndex(c => c.id === propertyName));
 			this._grid.editActiveCell(null);
 		}
 	}
 
-	@executeWhenAttached()
+	@executeWhenFirstDisplayed()
 	public focusCell(recordId: any, columnPropertyName: string) {
-		const rowIndex = this.dataProvider.findVisibleRowIndexById(recordId);
+		const rowIndex = this.dataProvider.getRowIndexByRecordId(recordId);
 		if (rowIndex != null) {
 			let columnIndex = this._grid.getColumnIndex(columnPropertyName);
 			if (columnIndex != null) {
@@ -873,7 +892,7 @@ export class UiTable extends UiComponent<UiTableConfig> implements UiTableComman
 		}
 	}
 
-	@executeWhenAttached(true)
+	@executeWhenFirstDisplayed(true)
 	@debouncedMethod(300)
 	public onResize(): void {
 		this._grid.resizeCanvas();
@@ -883,8 +902,12 @@ export class UiTable extends UiComponent<UiTableConfig> implements UiTableComman
 	}
 
 	private handleFieldValueChanged(fieldName: string, value: any): void {
-		// console.log("changed: " + fieldName + ": " + value);
 		// TODO check if this has updated a boolean field and update composite fields accordingly (field visibilities)
+
+		let currentlyEditingThisColumn = !!this._grid.getCellEditor() && this.getActiveCellFieldName() === fieldName;
+		if (currentlyEditingThisColumn) {
+			this.onCellValueChanged.fire({recordId: this.getActiveCellRecordId(), columnPropertyName: fieldName, value: value})
+		}
 	}
 
 	private getCompositeFieldColumnForSubFieldName(columnPropertyName: string): number {
@@ -902,10 +925,6 @@ export class UiTable extends UiComponent<UiTableConfig> implements UiTableComman
 		return null;
 	}
 
-	private requestLazyChildren(recordId: any) {
-		this.onRequestNestedData.fire(EventFactory.createUiTable_RequestNestedDataEvent(this.getId(), recordId));
-	}
-
 	private getActiveCellValue() {
 		if (this._grid.getActiveCell()) {
 			return this._grid.getDataItem(this._grid.getActiveCell().row)[this._grid.getColumns()[this._grid.getActiveCell().cell].field];
@@ -914,7 +933,7 @@ export class UiTable extends UiComponent<UiTableConfig> implements UiTableComman
 
 	private getActiveCellRecordId(): any {
 		if (this._grid.getActiveCell()) {
-			let dataItem: TableDataProviderItem = this._grid.getDataItem(this._grid.getActiveCell().row);
+			let dataItem: UiTableClientRecordConfig = this._grid.getDataItem(this._grid.getActiveCell().row);
 			return dataItem ? dataItem.id : null;
 		}
 	}
@@ -926,9 +945,27 @@ export class UiTable extends UiComponent<UiTableConfig> implements UiTableComman
 	}
 
 	public destroy(): void {
+		super.destroy();
 		this.fieldMessagePopper.destroy();
 	}
 
+	public updateRefreshableConfig(config: UiRefreshableTableConfigUpdateConfig) {
+		let options = {
+			...this._grid.getOptions(),
+			forceFitColumns: config.forceFitWidth,
+			rowHeight: config.rowHeight + config.rowBorderWidth,
+			multiSelect: config.allowMultiRowSelection,
+			enableTextSelectionOnCells: config.textSelectionEnabled,
+			editable: config.editable,
+			showHeaderRow: config.showHeaderRow,
+			headerRowHeight: config.headerRowHeight,
+			showFooterRow: config.showFooterRow,
+			footerRowHeight: config.footerRowHeight,
+			autoHeight: config.autoHeight
+		};
+		this._grid.setOptions(options);
+	}
+
 	private updateSelectionFramePosition(animate: boolean = false) {
 		let selectionFrame = this._config.selectionFrame;
 		if (selectionFrame == null) {
@@ -937,28 +974,29 @@ export class UiTable extends UiComponent<UiTableConfig> implements UiTableComman
 		let activeCellNode = this._grid.getActiveCellNode();
 		if (activeCellNode == null) {
 			manipulateWithoutTransitions(this.$selectionFrame, () => {
-				let $cell: JQuery = $(activeCellNode);
-				this.$selectionFrame
-					.css({
-						top: -10000,
-						left: -10000
-					});
+				css(this.$selectionFrame, {
+					top: -10000,
+					left: -10000
+				});
 			}, false);
 		} else {
 			manipulateWithoutTransitions(this.$selectionFrame, () => {
-				let $cell: JQuery = $(activeCellNode);
-				this.$selectionFrame
-					.css({
-						top: ($cell.offset().top - this.$component.offset().top) - selectionFrame.borderWidth,
-						left: selectionFrame.fullRow ? -selectionFrame.borderWidth : parseInt($cell.css('left')) - selectionFrame.borderWidth - this._grid.getViewport().leftPx,
-						width: selectionFrame.fullRow ? $cell.parent().width() + 2 * selectionFrame.borderWidth + 1 : $cell.parent().width() - parseInt($cell.css('left')) - parseInt($cell.css('right')) + 2 * selectionFrame.borderWidth - 1,
-						height: $cell.outerHeight() + 2 * selectionFrame.borderWidth - this._config.rowBorderWidth
-					});
+				let $cell: HTMLElement = activeCellNode;
+				let computedStyle = getComputedStyle($cell);
+				let cellOffsetParentClientTop = $cell.offsetParent.getBoundingClientRect().top;
+				let selectionFrameOffsetParentClientTop = this.$selectionFrame.offsetParent.getBoundingClientRect().top;
+				let cssValues = {
+					top: (cellOffsetParentClientTop - selectionFrameOffsetParentClientTop + $cell.offsetTop - selectionFrame.borderWidth) + "px",
+					left: (selectionFrame.fullRow ? -selectionFrame.borderWidth : parseInt(computedStyle.left) - selectionFrame.borderWidth - this._grid.getViewport().leftPx) + "px",
+					width: (selectionFrame.fullRow ? $($cell.parentElement).width() + 2 * selectionFrame.borderWidth + 1 : $($cell.parentElement).width() - parseInt(computedStyle.left) - parseInt(computedStyle.right) + 2 * selectionFrame.borderWidth - 1) + "px",
+					height: ($cell.offsetHeight + 2 * selectionFrame.borderWidth - this._config.rowBorderWidth) + "px"
+				};
+				css(this.$selectionFrame, cssValues);
 			}, animate);
 		}
 	}
 
-	@executeWhenAttached()
+	@executeWhenFirstDisplayed()
 	addColumns(columnConfigs: UiTableColumnConfig[], index: number): void {
 		const slickColumnConfigs = this._grid.getColumns();
 		const newSlickColumnConfigs = columnConfigs.map(columnConfig => this.createSlickColumnConfig(columnConfig));
@@ -969,12 +1007,12 @@ export class UiTable extends UiComponent<UiTableConfig> implements UiTableComman
 	}
 
 	private setSlickGridColumns(columns: Column[]) {
-		Object.values(this.headerRowFields).forEach(f => f.getMainDomElement().detach()); // prevent slickgrid from doing this via jQuery's empty() (and thereby removing all events handlers)
-		Object.values(this.footerRowFields).forEach(f => f.getMainDomElement().detach()); // prevent slickgrid from doing this via jQuery's empty() (and thereby removing all events handlers)
+		Object.values(this.headerRowFields).forEach(f => f.getMainElement().remove()); // prevent slickgrid from doing this via jQuery's empty() (and thereby removing all events handlers)
+		Object.values(this.footerRowFields).forEach(f => f.getMainElement().remove()); // prevent slickgrid from doing this via jQuery's empty() (and thereby removing all events handlers)
 		this._grid.setColumns(columns);
 	}
 
-	@executeWhenAttached()
+	@executeWhenFirstDisplayed()
 	removeColumns(columnNames: string[]): void {
 		const slickColumnConfigs = this._grid.getColumns()
 			.filter(c => columnNames.indexOf(c.id) === -1);
@@ -983,12 +1021,53 @@ export class UiTable extends UiComponent<UiTableConfig> implements UiTableComman
 		this.setSlickGridColumns(this.getVisibleColumns());
 	}
 
+	@executeWhenFirstDisplayed()
+	setColumnVisibility(propertyName: string, visible: boolean): void {
+		const column = this.getColumnById(propertyName);
+		if (column.visible !== visible) {
+			column.visible = visible;
+			this.setSlickGridColumns(this.getVisibleColumns());
+		}
+	}
+
 	cancelEditingCell(recordId: number, propertyName: string): void {
 		if (recordId === this.getActiveCellRecordId() && propertyName === this.getActiveCellFieldName()) {
 			this._grid.getEditController().cancelCurrentEdit();
 		}
 	}
 
+	setContextMenuContent(requestId: number, component: UiComponent): void {
+		this.contextMenu.setContent(component, requestId);
+	}
+
+	closeContextMenu(requestId: number): void {
+		this.contextMenu.close(requestId);
+	}
+
+	setHeaderRowField(columnName: string, field: unknown): any {
+		if (field == null) {
+			delete this.headerRowFields[columnName];
+		} else {
+			this.headerRowFields[columnName] = field as UiField;
+		}
+		this.configureOuterFields(this.headerRowFields as FieldsByName, true);
+		if (this._grid != null) {
+			this._grid.setColumns(this._grid.getColumns());
+		}
+	}
+
+	setFooterRowField(columnName: string, field: unknown): any {
+		if (field == null) {
+			delete this.footerRowFields[columnName];
+		} else {
+			this.footerRowFields[columnName] = field as UiField;
+		}
+		this.configureOuterFields(this.footerRowFields as FieldsByName, false);
+		if (this._grid != null) {
+			this._grid.setColumns(this._grid.getColumns());
+		}
+	}
+
 }
 
 TeamAppsUiComponentRegistry.registerComponentClass("UiTable", UiTable);
diff --git a/teamapps-client/ts/modules/table/UiTableRowSelectionModel.ts b/teamapps-client/ts/modules/table/UiTableRowSelectionModel.ts
index 210c4aa72..03f85d4da 100644
--- a/teamapps-client/ts/modules/table/UiTableRowSelectionModel.ts
+++ b/teamapps-client/ts/modules/table/UiTableRowSelectionModel.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -20,7 +20,7 @@
 ///<reference types="slickgrid"/>
 ///<reference types="slickgrid/slick.rowselectionmodel"/>
 
-import {keyCodes} from "trivial-components";
+import {keyCodes} from "../trivial-components/TrivialCore";
 import {bind} from "../util/Bind";
 
 export class UiTableRowSelectionModel {
@@ -114,7 +114,7 @@ export class UiTableRowSelectionModel {
 
 	@bind
 	private handleActiveCellChange(e: any, data: any) {
-		if (this._options.selectActiveRow && data.row != null) {
+		if (this._options.selectActiveRow && data.row != null && data.grid.getSelectedRows().length === 1) {
 			this.setSelectedRanges([new Slick.Range(data.row, 0, data.row, this.grid.getColumns().length - 1)]);
 		}
 	}
@@ -189,11 +189,16 @@ export class UiTableRowSelectionModel {
 		}
 
 		if (this.grid.canCellBeActive(cell.row, cell.cell)) {
-			this.grid.setActiveCell(cell.row, cell.cell)
+			if (this.grid.getEditorLock().isActive(null)) {
+				this.grid.getEditorLock().commitCurrentEdit()
+			}
+			if (selection.length === 1) {
+				this.grid.setActiveCell(cell.row, cell.cell)
+			}
 		}
 		var tempRanges = this.rowsToRanges(selection);
 		this.setSelectedRanges(tempRanges);
-		e.stopImmediatePropagation();
+		// e.stopImmediatePropagation();
 
 		return true;
 	}
diff --git a/teamapps-client/ts/modules/tool-container/AbstractUiToolContainer.ts b/teamapps-client/ts/modules/tool-container/AbstractUiToolContainer.ts
index a2dd69aea..0fcaf8b20 100644
--- a/teamapps-client/ts/modules/tool-container/AbstractUiToolContainer.ts
+++ b/teamapps-client/ts/modules/tool-container/AbstractUiToolContainer.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,24 +17,26 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-import * as $ from "jquery";
-import {UiComponent} from "../UiComponent";
+
+import {AbstractUiComponent} from "../AbstractUiComponent";
 import {TeamAppsUiContext} from "../TeamAppsUiContext";
 import {AbstractUiToolContainerConfig} from "../../generated/AbstractUiToolContainerConfig";
+import {parseHtml} from "../Common";
 
 
 interface Button {
-	$buttonWrapper: JQuery;
-	$button: JQuery;
+	$buttonWrapper: HTMLElement;
+	$button: HTMLElement;
 }
 
-export abstract class AbstractUiToolContainer<C extends AbstractUiToolContainerConfig> extends UiComponent<C> {
+export abstract class AbstractUiToolContainer<C extends AbstractUiToolContainerConfig> extends AbstractUiComponent<C> {
 
-	protected static $sizeTestingContainer: JQuery;
+	protected static $sizeTestingContainer: HTMLElement;
 
 	public static initialize() {
-		$(() => { // wait until there IS a document.body
-			this.$sizeTestingContainer = $('<div class="AbstractUiToolContainer-size-testing-container">').appendTo(document.body);
+		window.addEventListener("load", () => { // wait until there IS a document.body
+			this.$sizeTestingContainer = parseHtml('<div class="AbstractUiToolContainer-size-testing-container">');
+			document.body.appendChild(this.$sizeTestingContainer);
 		});
 	}
 
@@ -42,26 +44,28 @@ export abstract class AbstractUiToolContainer<C extends AbstractUiToolContainerC
 		super(config, context);
 	}
 
-	public static optimizeButtonWidth($buttonWrapper: JQuery, $button: JQuery, maxHeight: number): number {
-		$buttonWrapper.appendTo(this.$sizeTestingContainer);
-		const $templateDiv = $button.find('>.custom-entry-template');
+	public static optimizeButtonWidth($buttonWrapper: HTMLElement, $button: HTMLElement, maxHeight: number): number {
+		this.$sizeTestingContainer.appendChild($buttonWrapper);
+		const $templateDiv = $button.querySelector<HTMLElement>(':scope > :first-child');
+
+		maxHeight = maxHeight >= 0 ? maxHeight : $button.offsetHeight;
 		let optimizedWidth;
-		if ($templateDiv.length > 0) {
-			const oldHeightAttribute = $templateDiv[0].style.height; // read the style attribute of the templateDiv! (not the computed css!)
-			// var oldMaxHeightAttribute = $button[0].style.maxHeight; // read the style attribute of the templateDiv! (not the computed css!)
-			$templateDiv[0].style.height = null;
-			$button[0].style.maxHeight = null;
+		if ($templateDiv != null) {
+			const oldHeightAttribute = $templateDiv.style.height; // read the style attribute of the templateDiv! (not the computed css!)
+			// var oldMaxHeightAttribute = $button.style.maxHeight; // read the style attribute of the templateDiv! (not the computed css!)
+			$templateDiv.style.height = null;
+			$button.style.maxHeight = null;
 
 			let width = 120; // don't write novels inside of buttons...
-			$button.width(width);
+			$button.style.width = width + "px";
 
-			let $directButtonChildren = $button.find('>*');
-			let linesWithChildren: { lineElement: HTMLElement, textElements: HTMLElement[] }[] = $button.find(".line")
-				.toArray().map(lineElement => {
-					let textElements = $(lineElement).find('>.text-element');
+			let $directButtonChildren = Array.from($button.querySelectorAll<HTMLElement>(':scope >*'));
+			let linesWithChildren: { lineElement: HTMLElement, textElements: HTMLElement[] }[] = Array.from($button.querySelectorAll<HTMLElement>(":scope .line"))
+				.map(lineElement => {
+					let textElements = lineElement.querySelectorAll<HTMLElement>(':scope >.text-element'); // TODO these css classes are no more used!!!
 					return {
 						lineElement: lineElement,
-						textElements: textElements.toArray()
+						textElements: Array.from(textElements)
 					}
 				});
 
@@ -70,33 +74,41 @@ export abstract class AbstractUiToolContainer<C extends AbstractUiToolContainerC
 			let jumpDirection;
 			while (jumpSize > 2) {
 				jumpSize = Math.ceil(jumpSize / 2);
-				const buttonRight = $button[0].getBoundingClientRect().right;
-				const childOverflow = $directButtonChildren.filter((index, childElement) => {
+				const buttonRight = $button.getBoundingClientRect().right;
+				const childOverflow = $directButtonChildren.filter(childElement => {
 					return childElement.getBoundingClientRect().right > buttonRight
 				}).length > 0;
 				let hasTextCellElementOverflow = linesWithChildren.some(lineWithChildren => {
 					return lineWithChildren.textElements.some(textElement => textElement.offsetWidth > lineWithChildren.lineElement.offsetWidth)
 				});
-				jumpDirection = (hasTextCellElementOverflow || $button[0].offsetHeight > maxHeight || $button[0].offsetWidth > width || childOverflow) ? 1 : -1;
+				jumpDirection = (hasTextCellElementOverflow || $button.offsetHeight > maxHeight || $button.offsetWidth > width || childOverflow) ? 1 : -1;
 				width = width + (jumpSize * jumpDirection);
-				$button.width(width);
+				$button.style.width = width + "px";
+
+				if (isFirefox) { // for some reason, firefox does not reflow here, even when calling $button.offsetHeight. So we need to do it the ugly way.
+					$buttonWrapper.remove();
+					this.$sizeTestingContainer.appendChild($buttonWrapper);
+				}
 			}
-			if ($button[0].offsetHeight > maxHeight || $button[0].offsetWidth > width) {
+			if ($button.offsetHeight > maxHeight || $button.offsetWidth > width) {
 				width += 2;
 			}
-			$button.width(width);
-			$button.attr("optimized-width", width);
-			optimizedWidth = $buttonWrapper[0].offsetWidth;
+			$button.style.width = width + "px";
+			$button.setAttribute("optimized-width", "" + width);
+			optimizedWidth = $buttonWrapper.offsetWidth;
 
-			$templateDiv[0].style.height = oldHeightAttribute;
-			// $button[0].style.maxHeight = oldMaxHeightAttribute;
+			$templateDiv.style.height = oldHeightAttribute;
+			// $button.style.maxHeight = oldMaxHeightAttribute;
 		} else {
-			optimizedWidth = $buttonWrapper[0].offsetWidth;
+			optimizedWidth = $buttonWrapper.offsetWidth;
 		}
-		$buttonWrapper.detach();
-		return optimizedWidth;
+		$buttonWrapper.remove();
+		return optimizedWidth + 2;
 	}
 
 }
 
+const isFirefox = navigator.userAgent.toLowerCase().includes('firefox');
+
+
 AbstractUiToolContainer.initialize();
diff --git a/teamapps-client/ts/modules/tool-container/tool-accordion/UiToolAccordion.ts b/teamapps-client/ts/modules/tool-container/tool-accordion/UiToolAccordion.ts
index 36e4704db..eec3ac0a6 100644
--- a/teamapps-client/ts/modules/tool-container/tool-accordion/UiToolAccordion.ts
+++ b/teamapps-client/ts/modules/tool-container/tool-accordion/UiToolAccordion.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,69 +17,52 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-import * as $ from "jquery";
+
 import * as log from "loglevel";
-import {UiTextCellTemplateConfig} from "../../../generated/UiTextCellTemplateConfig";
 import {AbstractUiToolContainer} from "../AbstractUiToolContainer";
 import {TeamAppsEvent} from "../../util/TeamAppsEvent";
 import {UiToolbarButtonGroupConfig} from "../../../generated/UiToolbarButtonGroupConfig";
 import {UiToolbarButtonConfig} from "../../../generated/UiToolbarButtonConfig";
 import {createUiDropDownButtonClickInfoConfig, UiDropDownButtonClickInfoConfig} from "../../../generated/UiDropDownButtonClickInfoConfig";
-import {DEFAULT_TEMPLATES} from "trivial-components";
+import {DEFAULT_TEMPLATES} from "../../trivial-components/TrivialCore";
 import {TeamAppsUiContext} from "../../TeamAppsUiContext";
-import {enterFullScreen, exitFullScreen, isFullScreen} from "../../Common";
+import {deepEquals, doOnceOnClickOutsideElement, insertAfter, parseHtml} from "../../Common";
 import {UiToolAccordionCommandHandler, UiToolAccordionConfig, UiToolAccordionEventSource} from "../../../generated/UiToolAccordionConfig";
-import {AbstractUiToolContainer_ToolbarButtonClickEvent, AbstractUiToolContainer_ToolbarDropDownItemClickEvent} from "../../../generated/AbstractUiToolContainerConfig";
+import {AbstractUiToolContainer_ToolbarButtonClickEvent} from "../../../generated/AbstractUiToolContainerConfig";
 import {TeamAppsUiComponentRegistry} from "../../TeamAppsUiComponentRegistry";
-import {EventFactory} from "../../../generated/EventFactory";
-import {UiColorConfig} from "../../../generated/UiColorConfig";
-import {createUiColorCssString} from "../../util/CssFormatUtil";
-import {UiComponent} from "../../UiComponent";
-import {UiItemView} from "../../UiItemView";
 import {OrderedDictionary} from "../../util/OrderedDictionary";
-
-interface Button {
-	config: UiToolbarButtonConfig;
-	visible: boolean;
-	$buttonWrapper: JQuery;
-	$button: JQuery;
-	optimizedWidth?: number;
-	hasDropDown: boolean;
-	$dropDownCaret: JQuery;
-	$dropDown?: JQuery;
-	$dropDownSourceButtonIndicator?: JQuery;
-	dropDownComponent?: UiComponent;
-}
+import {UiComponent} from "../../UiComponent";
+import {UiToolAccordionButton} from "./UiToolAccordionButton";
+import {executeWhenFirstDisplayed} from "../../util/ExecuteWhenFirstDisplayed";
+require("jquery-ui/ui/scroll-parent.js")
 
 export class UiToolAccordion extends AbstractUiToolContainer<UiToolAccordionConfig> implements UiToolAccordionCommandHandler, UiToolAccordionEventSource {
 
-	public static DEFAULT_TOOLBAR_MAX_HEIGHT = 70;
-
-	public readonly onToolbarButtonClick: TeamAppsEvent<AbstractUiToolContainer_ToolbarButtonClickEvent> = new TeamAppsEvent<AbstractUiToolContainer_ToolbarButtonClickEvent>(this);
-	public readonly onToolbarDropDownItemClick: TeamAppsEvent<AbstractUiToolContainer_ToolbarDropDownItemClickEvent> = new TeamAppsEvent<AbstractUiToolContainer_ToolbarDropDownItemClickEvent>(this);
+	public readonly onToolbarButtonClick: TeamAppsEvent<AbstractUiToolContainer_ToolbarButtonClickEvent> = new TeamAppsEvent<AbstractUiToolContainer_ToolbarButtonClickEvent>();
 
 	private buttonGroupsById: OrderedDictionary<UiButtonGroup> = new OrderedDictionary<UiButtonGroup>();
 
-	private $mainDomElement: JQuery;
-	private $backgroundColorDiv: JQuery;
+	private $mainDomElement: HTMLElement;
+	private $backgroundColorDiv: HTMLElement;
 
 	constructor(config: UiToolAccordionConfig, context: TeamAppsUiContext) {
 		super(config, context);
 
-		this.$mainDomElement = $(`<div class="UiToolAccordion teamapps-blurredBackgroundImage"></div>`);
-		this.$backgroundColorDiv = $('<div class="background-color-div"></div>')
-			.appendTo(this.$mainDomElement);
-		for (let i = 0; i < config.buttonGroups.length; i++) {
-			const buttonGroupConfig = config.buttonGroups[i];
+		this.$mainDomElement = parseHtml(`<div class="UiToolAccordion teamapps-blurredBackgroundImage"></div>`);
+		this.$backgroundColorDiv = parseHtml('<div class="background-color-div"></div>');
+		this.$mainDomElement.appendChild(this.$backgroundColorDiv);
+		let allButtonGroups = [...config.leftButtonGroups, ...config.rightButtonGroups];
+		for (let i = 0; i < allButtonGroups.length; i++) {
+			const buttonGroupConfig = allButtonGroups[i];
 			let buttonGroup = this.createButtonGroup(buttonGroupConfig);
 			this.buttonGroupsById.push(buttonGroupConfig.groupId, buttonGroup);
-			buttonGroup.getMainDomElement().appendTo(this.$backgroundColorDiv)
+			this.$backgroundColorDiv.appendChild(buttonGroup.getMainDomElement());
 		}
 
-		this.refreshEnforcedButtonWidth();
+		this.refreshforcedButtonWidth();
 	}
 
-	public getMainDomElement(): JQuery {
+	public doGetMainElement(): HTMLElement {
 		return this.$mainDomElement;
 	}
 
@@ -87,11 +70,6 @@ export class UiToolAccordion extends AbstractUiToolContainer<UiToolAccordionConf
 		return new UiButtonGroup(buttonGroupConfig, this, this._context, AbstractUiToolContainer.$sizeTestingContainer);
 	}
 
-	protected onAttachedToDom() {
-		this.buttonGroupsById.values.forEach(buttonGroup => buttonGroup.onAttachedToDom());
-		this.reLayout();
-	}
-
 	public setButtonHasDropDown(groupId: string, buttonId: string, hasDropDown: boolean): void {
 		this.buttonGroupsById.getValue(groupId).setButtonHasDropDown(buttonId, hasDropDown);
 	}
@@ -100,14 +78,22 @@ export class UiToolAccordion extends AbstractUiToolContainer<UiToolAccordionConf
 		this.buttonGroupsById.getValue(groupId).setDropDownComponent(buttonId, component);
 	}
 
+	public closeDropDown(groupId: string, buttonId: string) {
+		this.buttonGroupsById.getValue(groupId).closeDropDown(buttonId);
+	}
+
 	public setButtonVisible(groupId: string, buttonId: string, visible: boolean) {
 		this.buttonGroupsById.getValue(groupId).setButtonVisible(buttonId, visible);
-		this.refreshEnforcedButtonWidth();
+		this.refreshforcedButtonWidth();
+	}
+
+	setButtonColors(groupId: string, buttonId: string, backgroundColor: string, hoverBackgroundColor: string): void {
+		this.buttonGroupsById.getValue(groupId).setButtonColors(buttonId, backgroundColor, hoverBackgroundColor);
 	}
 
 	public setButtonGroupVisible(groupId: string, visible: boolean) {
 		this.buttonGroupsById.getValue(groupId).setVisible(visible);
-		this.refreshEnforcedButtonWidth();
+		this.refreshforcedButtonWidth();
 	}
 
 	public addButtonGroup(buttonGroupConfig: UiToolbarButtonGroupConfig) {
@@ -129,12 +115,12 @@ export class UiToolAccordion extends AbstractUiToolContainer<UiToolAccordionConf
 		}
 
 		if (allButtonGroups[otherGroupIndex]) {
-			buttonGroup.getMainDomElement().insertBefore(allButtonGroups[otherGroupIndex].getMainDomElement());
+			this.$backgroundColorDiv.insertBefore(buttonGroup.getMainDomElement(), allButtonGroups[otherGroupIndex].getMainDomElement());
 		} else {
-			buttonGroup.getMainDomElement().appendTo(this.$backgroundColorDiv);
+			this.$backgroundColorDiv.appendChild(buttonGroup.getMainDomElement());
 		}
 
-		this.refreshEnforcedButtonWidth();
+		this.refreshforcedButtonWidth();
 	}
 
 	public removeButtonGroup(groupId: string): void {
@@ -142,59 +128,65 @@ export class UiToolAccordion extends AbstractUiToolContainer<UiToolAccordionConf
 
 		if (buttonGroup) {
 			this.buttonGroupsById.remove(groupId);
-			buttonGroup.getMainDomElement().detach();
+			buttonGroup.getMainDomElement().remove();
 		}
-		this.refreshEnforcedButtonWidth();
+		this.refreshforcedButtonWidth();
 	}
 
 	public addButton(groupId: string, buttonConfig: UiToolbarButtonConfig, neighborButtonId: string, beforeNeighbor: boolean) {
 		this.buttonGroupsById.getValue(groupId).addButton(buttonConfig, neighborButtonId, beforeNeighbor);
-		this.refreshEnforcedButtonWidth();
+		this.refreshforcedButtonWidth();
 	}
 
 	public removeButton(groupId: string, buttonId: string): void {
 		this.buttonGroupsById.getValue(groupId).removeButton(buttonId);
-		this.refreshEnforcedButtonWidth();
+		this.refreshforcedButtonWidth();
 	}
 
 	updateButtonGroups(buttonGroups: UiToolbarButtonGroupConfig[]): void {
 		// TODO implement only if really needed
 	}
 
-	public refreshEnforcedButtonWidth() {
+	@executeWhenFirstDisplayed()
+	public refreshforcedButtonWidth() {
 		let maxButtonWidth = this.buttonGroupsById.values
 			.filter(group => group.isVisible())
 			.reduce((maxButtonWidth, buttonGroup) => Math.max(maxButtonWidth, buttonGroup.getMaxOptimizedButtonWidth()), 1);
-		this.buttonGroupsById.values.forEach(group => group.setEnforcedButtonWidth(maxButtonWidth));
+
+		const computedStyle = getComputedStyle(this.getMainElement());
+		const availableWidth = this.getWidth() - parseInt(computedStyle.paddingLeft) - parseInt(computedStyle.paddingRight);
+		const numberOfColumns = Math.max(1, Math.floor(availableWidth / maxButtonWidth));
+
+		this.buttonGroupsById.values.forEach(group => {
+			group.setForcedNumberOfColumns(numberOfColumns);
+			group.updateRows();
+		});
 	}
 
 	public onResize(): void {
 		this.buttonGroupsById.values.forEach(group => group.onResize());
 	}
 
-	public destroy(): void {
-		// TODO ?
-	}
 }
 
 class UiButtonGroup {
 	private static logger = log.getLogger("UiToolAccordion.UiButtonGroup");
 
-	private attachedToDom: boolean = false;
 	private config: UiToolbarButtonGroupConfig;
 	private visible: boolean = true;
-	private $buttonGroupWrapper: JQuery;
-	private $buttonGroup: JQuery;
-	private buttonsById: { [index: string]: Button } = {};
-	private buttons: Button[] = [];
-	private $buttonRows: JQuery[] = [];
-	private enforcedButtonWidth: number = 1;
+	private $buttonGroupWrapper: HTMLElement;
+	private $buttonGroup: HTMLElement;
+	private buttonsById: { [index: string]: UiToolAccordionButton } = {};
+	private buttons: UiToolAccordionButton[] = [];
+	private $buttonRows: HTMLElement[] = [];
+	private forcedButtonWidth: number = 1;
+	private forcedNumberOfColumns: number = 1;
 
-	constructor(buttonGroupConfig: UiToolbarButtonGroupConfig, private toolAccordion: UiToolAccordion, private context: TeamAppsUiContext, private $sizeTestingContainer: JQuery) {
-		const $buttonGroupWrapper = $('<div class="button-group-wrapper"/>');
+	constructor(buttonGroupConfig: UiToolbarButtonGroupConfig, private toolAccordion: UiToolAccordion, private context: TeamAppsUiContext, private $sizeTestingContainer: HTMLElement) {
+		const $buttonGroupWrapper = parseHtml('<div class="button-group-wrapper"></div>');
 
-		const $buttonGroup = $(`<div class="toolbar-button-group" id="${this.toolAccordionId}_${buttonGroupConfig.groupId}">`)
-			.appendTo($buttonGroupWrapper);
+		const $buttonGroup = parseHtml(`<div class="toolbar-button-group" id="${this.toolAccordionId}_${buttonGroupConfig.groupId}">`);
+		$buttonGroupWrapper.appendChild($buttonGroup);
 
 		this.config = buttonGroupConfig;
 		this.$buttonGroupWrapper = $buttonGroupWrapper;
@@ -205,100 +197,76 @@ class UiButtonGroup {
 		}
 
 		this.setVisible(buttonGroupConfig.visible);
+	}
 
-		this.getMainDomElement().on("click", ".toolbar-button-wrapper", (e) => {
-			let button = this.buttonsById[e.currentTarget.getAttribute("data-buttonId")];
-			if (button.config.togglesFullScreenOnComponent) {
-				if (isFullScreen()) {
-					exitFullScreen();
-				} else {
-					enterFullScreen(this.context.getComponentById(button.config.togglesFullScreenOnComponent));
-				}
-			}
-			if (button.config.openNewTabWithUrl) {
-				window.open(button.config.openNewTabWithUrl, '_blank');
-			}
+	private get toolAccordionId() {
+		return this.toolAccordion.getId();
+	}
 
+	public get position() {
+		return this.config.position;
+	}
+
+	private createButton(buttonConfig: UiToolbarButtonConfig): UiToolAccordionButton {
+		let button = new UiToolAccordionButton(buttonConfig, this.context);
+
+		button.onClick.addListener(eventObject => {
 			let dropdownClickInfo: UiDropDownButtonClickInfoConfig = null;
 			if (button.hasDropDown) {
 				if (button.$dropDown == null) {
 					this.createDropDown(button);
 				}
-				let dropdownVisible = button.$dropDown.is(":visible");
+				let dropdownVisible = $(button.$dropDown).is(":visible");
 				dropdownClickInfo = createUiDropDownButtonClickInfoConfig(!dropdownVisible, button.dropDownComponent != null);
 				if (!dropdownVisible) {
-					button.dropDownComponent && button.dropDownComponent.getMainDomElement().appendTo(button.$dropDown);
+					if (button.dropDownComponent != null) {
+						button.$dropDown.appendChild(button.dropDownComponent.getMainElement());
+					}
 					this.showDropDown(button);
+					doOnceOnClickOutsideElement(button.getMainDomElement(), e => $(button.$dropDown).slideUp(200))
 				} else {
-					button.$dropDown.slideUp(200);
+					this.hideDropDown(button)
 				}
 			}
 
-			this.toolAccordion.onToolbarButtonClick.fire(EventFactory.createAbstractUiToolContainer_ToolbarButtonClickEvent(this.toolAccordionId, this.config.groupId, button.config.buttonId, dropdownClickInfo));
-		}).on("blur", ".toolbar-button-wrapper", (e) => {
-			let button = this.buttonsById[e.currentTarget.getAttribute("data-buttonId")];
-			button.$dropDown && button.$dropDown.slideUp(200);
-		});
-	}
-
-	private get toolAccordionId() {
-		return this.toolAccordion.getId();
-	}
-
-	public get position() {
-		return this.config.position;
-	}
-
-	private createButton(buttonConfig: UiToolbarButtonConfig): Button {
-		const $buttonWrapper = $(`<div class="toolbar-button-wrapper" data-buttonId="${buttonConfig.buttonId}" tabindex="0">
-	<div class="toolbar-button-caret ${buttonConfig.hasDropDown ? '' : 'hidden'}">
-	  <div class="caret"></div>
-	</div>
-</div>`);
-        let renderer = this.context.templateRegistry.createTemplateRenderer(buttonConfig.template);
-		const $button = $(renderer.render(buttonConfig.recordData)).prependTo($buttonWrapper);
-
-		const button: Button = {
-			config: buttonConfig,
-			$buttonWrapper: $buttonWrapper,
-			$button: $button,
-			optimizedWidth: AbstractUiToolContainer.optimizeButtonWidth($buttonWrapper, $button, (buttonConfig.template as UiTextCellTemplateConfig).maxHeight || UiToolAccordion.DEFAULT_TOOLBAR_MAX_HEIGHT),
-			visible: buttonConfig.visible,
-			$dropDownCaret: $buttonWrapper.find(".toolbar-button-caret"),
-			hasDropDown: buttonConfig.hasDropDown,
-			dropDownComponent: buttonConfig.dropDownComponent
-		};
-
-		$buttonWrapper.toggleClass("hidden", !buttonConfig.visible);
+			this.toolAccordion.onToolbarButtonClick.fire({
+				groupId: this.config.groupId,
+				buttonId: button.id,
+				dropDownClickInfo: dropdownClickInfo
+			});
+		})
 
 		return button;
 	}
 
-	private createDropDown(button: Button) {
-		button.$dropDown = $(`<div class="tool-accordion-dropdown"></div>`);
-		button.$dropDownSourceButtonIndicator = $(`<div class="source-button-indicator">`).appendTo(button.$dropDown);
+	private createDropDown(button: UiToolAccordionButton) {
+		button.$dropDown = parseHtml(`<div class="tool-accordion-dropdown"></div>`);
+		button.$dropDownSourceButtonIndicator = parseHtml(`<div class="source-button-indicator">`);
+		button.$dropDown.appendChild(button.$dropDownSourceButtonIndicator);
 
 		if (button.dropDownComponent) {
 			this.setButtonDropDownComponent(button, button.dropDownComponent);
 		} else {
-			$(DEFAULT_TEMPLATES.defaultSpinnerTemplate).appendTo(button.$dropDown);
+			button.$dropDown.appendChild(parseHtml(DEFAULT_TEMPLATES.defaultSpinnerTemplate));
 		}
 
 		return button.$dropDown;
 	}
 
-	private showDropDown(button: Button) {
-		let $row = this.$buttonRows.filter($row => $.contains($row[0], button.$buttonWrapper[0]))[0];
-		UiButtonGroup.logger.debug(button.$dropDown[0].offsetHeight);
+	private showDropDown(button: UiToolAccordionButton) {
+		UiButtonGroup.logger.debug(button.$dropDown.offsetHeight);
 		const me = this;
-		button.$dropDown.hide().insertAfter($row).slideDown({
+		button.$dropDown.style.display = "none";
+		this.insertDropdownUnderButtonRow(button);
+
+		$(button.$dropDown).slideDown({
 			duration: 200,
 			progress: (animation, progress: number, remainingMs: number) => {
-				let buttonHeight = button.$buttonWrapper[0].offsetHeight;
-				let dropDownHeight = button.$dropDown[0].offsetHeight;
+				let buttonHeight = button.getMainDomElement().offsetHeight;
+				let dropDownHeight = button.$dropDown.offsetHeight;
 				let totalInterestingPartHeight = buttonHeight + dropDownHeight;
-				let buttonY = button.$buttonWrapper.offset().top - me.getMainDomElement().closest('.UiToolAccordion').offset().top;
-				let $scrollContainer = me.getMainDomElement().scrollParent();
+				let buttonY = button.getMainDomElement().getBoundingClientRect().top - me.getMainDomElement().closest('.UiToolAccordion').getBoundingClientRect().top;
+				let $scrollContainer = $(me.getMainDomElement()).scrollParent();
 				let scrollY = $scrollContainer.scrollTop();
 				let viewPortHeight = $scrollContainer[0].offsetHeight;
 
@@ -312,13 +280,22 @@ class UiButtonGroup {
 				}
 			}
 		});
-		(<any>button.$dropDownSourceButtonIndicator).position({
+		$(button.$dropDownSourceButtonIndicator).position({
 			my: "center bottom",
 			at: "center bottom",
-			of: button.$buttonWrapper
+			of: button.getMainDomElement()
 		});
 	}
 
+	private hideDropDown(button: UiToolAccordionButton) {
+		$(button.$dropDown).slideUp(200);
+	}
+
+	private insertDropdownUnderButtonRow(button: UiToolAccordionButton) {
+		let $row = this.$buttonRows.filter($row => $.contains($row, button.getMainDomElement()))[0];
+		insertAfter(button.$dropDown, $row);
+	}
+
 	public setDropDownComponent(buttonId: string, component: UiComponent) {
 		let button = this.buttonsById[buttonId];
 		this.setButtonDropDownComponent(button, component);
@@ -328,47 +305,48 @@ class UiButtonGroup {
 		const button = this.buttonsById[buttonId];
 		if (button != null) {
 			button.hasDropDown = hasDropDown;
-			button.$dropDownCaret.toggleClass("hidden", !hasDropDown);
 		}
 	}
 
-	private setButtonDropDownComponent(button: Button, component: UiComponent) {
+	private setButtonDropDownComponent(button: UiToolAccordionButton, component: UiComponent) {
 		if (button.dropDownComponent != null) {
-			button.dropDownComponent.getMainDomElement().detach();
+			button.dropDownComponent.getMainElement().remove();
 		}
 
 		button.dropDownComponent = component;
 
 		if (component != null) {
-			if (component instanceof UiItemView) {
-				component.onItemClicked.addListener(eventObject => {
-					this.toolAccordion.onToolbarDropDownItemClick.fire(EventFactory.createAbstractUiToolContainer_ToolbarDropDownItemClickEvent(this.toolAccordionId, this.config.groupId, button.config.buttonId, eventObject.groupId, eventObject.itemId));
-				});
-			}
 			if (button.$dropDown != null) {
-				button.$dropDown.find(":not(.source-button-indicator)").detach(); // remove spinner or old component, if present...
-				if (button.$dropDown.is(":visible")) {
-					component.getMainDomElement().appendTo(button.$dropDown);
+				button.$dropDown.querySelectorAll<HTMLElement>(":scope :not(.source-button-indicator)").forEach(b => b.remove()); // remove spinner or old component, if present...
+				if ($(button.$dropDown).is(":visible")) {
+					button.$dropDown.appendChild(component.getMainElement());
 				}
 			}
 		}
 	}
 
+	closeDropDown(buttonId: string) {
+		let button = this.buttonsById[buttonId];
+		this.hideDropDown(button);
+	}
+
 	public getMaxOptimizedButtonWidth(): number {
 		return this.buttons
 			.filter(button => button.visible)
 			.reduce((maxWidth, button) => Math.max(maxWidth, button.optimizedWidth), 0);
 	}
 
-	public setEnforcedButtonWidth(enforcedButtonWidth: number) {
-		this.enforcedButtonWidth = enforcedButtonWidth;
-		this.updateRows();
+	public setForcedButtonWidth(forcedButtonWidth: number) {
+		this.forcedButtonWidth = forcedButtonWidth;
+	}
+
+	public setForcedNumberOfColumns(forcedNumberOfColumns: number) {
+		this.forcedNumberOfColumns = forcedNumberOfColumns;
 	}
 
 	public setButtonVisible(buttonId: string, visible: boolean) {
 		const button = this.buttonsById[buttonId];
 		if (button) {
-			button.$buttonWrapper.toggleClass("hidden", !visible);
 			button.visible = visible;
 			this.updateVisibility();
 			this.updateRows();
@@ -406,52 +384,58 @@ class UiButtonGroup {
 
 		if (button) {
 			delete this.buttonsById[buttonId];
-			this.buttons = this.buttons.filter(b => b.config.buttonId !== buttonId);
-			button.$buttonWrapper.detach();
+			this.buttons = this.buttons.filter(b => b.id !== buttonId);
+			button.getMainDomElement().remove();
 		}
 
 		this.updateVisibility();
 		this.updateRows();
 	}
 
-	private updateRows() {
-		let availableWidth = this.$buttonGroupWrapper[0].offsetWidth;
-		if (!this.attachedToDom || !availableWidth) {
+	private lastParameters: {forcedButtonWidth: number, forcedNumberOfColumns: number, availableWidth: number} = null;
+	public updateRows() {
+		let availableWidth = this.$buttonGroupWrapper.offsetWidth;
+		if (availableWidth == 0) {
 			return;
 		}
+		let newParams = {availableWidth, forcedButtonWidth: this.forcedButtonWidth, forcedNumberOfColumns: this.forcedNumberOfColumns};
+		if (deepEquals(this.lastParameters, newParams)) {
+			return;
+		}
+		this.lastParameters = newParams;
 
 		this.$buttonRows.forEach($row => {
-			$row.detach();
-			$row[0].innerHTML = '';
+			$row.remove();
+			$row.innerHTML = '';
 		});
-		let buttonsPerRow = Math.floor(availableWidth / Math.max(16, this.enforcedButtonWidth));
-
-		if (buttonsPerRow === 0) {
-			buttonsPerRow = 1;
-		}
+		let buttonsPerRow = this.forcedNumberOfColumns ?? Math.max(1, Math.floor(availableWidth / Math.max(16, this.forcedButtonWidth)));
+		let buttonWidth = this.forcedNumberOfColumns != null ? availableWidth / this.forcedNumberOfColumns : this.forcedButtonWidth ?? null;
+		
 
 		let visibleButtonsCount = 0;
 		for (let i = 0; i < this.buttons.length; i++) {
 			let button = this.buttons[i];
 			if (button.visible) {
 				let rowIndex = Math.floor(visibleButtonsCount / buttonsPerRow);
-				let $row = this.$buttonRows[rowIndex] || (this.$buttonRows[rowIndex] = $(`<div class="button-row">`));
-				button.$buttonWrapper
-					.css("flex-basis", this.enforcedButtonWidth + "px")
-					.appendTo($row);
+				let $row = this.$buttonRows[rowIndex] || (this.$buttonRows[rowIndex] = parseHtml(`<div class="button-row">`));
+				button.getMainDomElement().style.flexBasis = buttonWidth + "px";
+				$row.appendChild(button.getMainDomElement());
 				visibleButtonsCount++;
 			}
 		}
 		// fill with dummy elements
-		for (let i = visibleButtonsCount; i % buttonsPerRow != 0; i++) {
-			let rowIndex = Math.floor(i / buttonsPerRow);
-			let $row = this.$buttonRows[rowIndex];
-			$row.append(`<div class="row-filler" style="flex-basis: ${this.enforcedButtonWidth}px">`);
+		let numberOfRows = Math.floor(visibleButtonsCount - 1 / buttonsPerRow);
+		if (numberOfRows > 1) { // otherwise distribute space evenly!
+			for (let i = visibleButtonsCount; i % buttonsPerRow != 0; i++) {
+				let rowIndex = Math.floor(i / buttonsPerRow);
+				let $row = this.$buttonRows[rowIndex];
+				$row.appendChild(parseHtml(`<div class="row-filler" style="flex-basis: ${buttonWidth}px">`));
+			}
 		}
 
 		this.$buttonRows.forEach($row => {
-			if ($row.has("*")) {
-				$row.appendTo(this.$buttonGroup);
+			if ($row.children.length > 0) {
+				this.$buttonGroup.appendChild($row);
 			}
 		});
 	}
@@ -467,23 +451,24 @@ class UiButtonGroup {
 
 	private updateVisibility() {
 		let hasVisibleButton = this.buttons.some(b => b.visible);
-		this.$buttonGroupWrapper.toggleClass("hidden", !(this.visible && hasVisibleButton));
+		this.$buttonGroupWrapper.classList.toggle("hidden", !(this.visible && hasVisibleButton));
 	}
 
-	public getMainDomElement(): JQuery {
+	public getMainDomElement(): HTMLElement {
 		return this.$buttonGroupWrapper;
 	}
 
-	public onAttachedToDom() {
-		this.attachedToDom = true;
-		this.buttons.forEach(b => {
-			b.dropDownComponent && (b.dropDownComponent.attachedToDom = true);
-		});
+	public onResize(): void {
 		this.updateRows();
+		this.buttons.forEach(b => {
+			if (b.$dropDown) {
+				this.insertDropdownUnderButtonRow(b);
+			}
+		})
 	}
 
-	public onResize(): void {
-		this.updateRows();
+	setButtonColors(buttonId: string, backgroundColor: string, hoverBackgroundColor: string) {
+		this.buttons.filter(b => b.id === buttonId)[0].setColors(backgroundColor, hoverBackgroundColor);
 	}
 }
 
diff --git a/teamapps-client/ts/modules/tool-container/tool-accordion/UiToolAccordionButton.ts b/teamapps-client/ts/modules/tool-container/tool-accordion/UiToolAccordionButton.ts
new file mode 100644
index 000000000..7397fca46
--- /dev/null
+++ b/teamapps-client/ts/modules/tool-container/tool-accordion/UiToolAccordionButton.ts
@@ -0,0 +1,129 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+import {UiComponent} from "../../UiComponent";
+import {UiToolbarButtonConfig} from "../../../generated/UiToolbarButtonConfig";
+import {enterFullScreen, exitFullScreen, generateUUID, isFullScreen, parseHtml} from "../../Common";
+import {TeamAppsUiContext} from "../../TeamAppsUiContext";
+import {AbstractUiToolContainer} from "../AbstractUiToolContainer";
+import {UiGridTemplateConfig} from "../../../generated/UiGridTemplateConfig";
+import {UiToolAccordion} from "./UiToolAccordion";
+import {TeamAppsEvent} from "../../util/TeamAppsEvent";
+
+export class UiToolAccordionButton {
+
+	public readonly onClick: TeamAppsEvent<void> = new TeamAppsEvent();
+
+	private config: UiToolbarButtonConfig;
+	private $buttonWrapper: HTMLElement;
+	private $button: HTMLElement;
+	private $dropDownCaret: HTMLElement;
+
+	public optimizedWidth: number;
+	public dropDownComponent: UiComponent;
+	public $dropDown: HTMLElement;
+	public $dropDownSourceButtonIndicator: HTMLElement;
+
+	private uuidClass: string = `UiToolbarButton-${generateUUID()}`;
+	private $styleTag: HTMLStyleElement;
+
+	constructor(config: UiToolbarButtonConfig, context: TeamAppsUiContext) {
+		let renderer = context.templateRegistry.createTemplateRenderer(config.template);
+		this.config = config;
+		this.$buttonWrapper = parseHtml(`<div class="toolbar-button-wrapper ${this.uuidClass}" data-buttonId="${config.buttonId}" tabindex="0">
+	${renderer.render(config.recordData)}
+	<div class="toolbar-button-caret ${config.hasDropDown ? '' : 'hidden'}">
+	  <div class="caret"></div>
+	</div>
+	<style></style>
+</div>`);
+		if (this.config.debuggingId != null) {
+			this.$buttonWrapper.setAttribute("data-teamapps-debugging-id", this.config.debuggingId);
+		}
+
+		this.$button = this.$buttonWrapper.firstElementChild as HTMLElement;
+		this.optimizedWidth = AbstractUiToolContainer.optimizeButtonWidth(this.$buttonWrapper, this.$button, (config.template as UiGridTemplateConfig).maxHeight);
+		this.$dropDownCaret = this.$buttonWrapper.querySelector<HTMLElement>(":scope .toolbar-button-caret");
+		this.$buttonWrapper.classList.toggle("hidden", !config.visible);
+		this.$styleTag = this.$buttonWrapper.querySelector(":scope style");
+		this.updateStyles();
+
+		this.$buttonWrapper.addEventListener('click', () => {
+			if (this.config.togglesFullScreenOnComponent) {
+				if (isFullScreen()) {
+					exitFullScreen();
+				} else {
+					enterFullScreen(this.config.togglesFullScreenOnComponent as UiComponent);
+				}
+			}
+			if (this.config.startPlaybackComponent) {
+				(this.config.startPlaybackComponent as any).play();
+			}
+			if (this.config.openNewTabWithUrl) {
+				window.open(this.config.openNewTabWithUrl, '_blank');
+			}
+
+			this.onClick.fire();
+		});
+	}
+
+
+	public get id() {
+		return this.config.buttonId;
+	}
+
+	public get visible() {
+		return this.config.visible;
+	}
+
+	public set visible(visible: boolean) {
+		this.$buttonWrapper.classList.toggle("hidden", !visible)
+		this.config.visible = visible;
+	}
+
+	public getMainDomElement() {
+		return this.$buttonWrapper;
+	}
+
+	public set hasDropDown(hasDropDown: boolean) {
+		this.config.hasDropDown = hasDropDown;
+		this.$dropDownCaret.classList.toggle("hidden", !hasDropDown);
+	}
+
+	public get hasDropDown() {
+		return this.config.hasDropDown;
+	}
+
+	setColors(backgroundColor: string, hoverBackgroundColor: string) {
+		this.config.backgroundColor = backgroundColor;
+		this.config.hoverBackgroundColor = hoverBackgroundColor;
+		this.updateStyles();
+	}
+
+	private updateStyles() {
+		this.$styleTag.innerHTML = '';
+		this.$styleTag.innerText = `
+		.${this.uuidClass} {
+			background-color: ${(this.config.backgroundColor ?? '')} !important;           
+        }
+		.${this.uuidClass}:hover {
+			background-color: ${(this.config.hoverBackgroundColor ?? '')} !important;            
+        }`;
+	}
+}
diff --git a/teamapps-client/ts/modules/tool-container/toolbar/UiToolbar.ts b/teamapps-client/ts/modules/tool-container/toolbar/UiToolbar.ts
index c760d0840..e2ebce5ba 100644
--- a/teamapps-client/ts/modules/tool-container/toolbar/UiToolbar.ts
+++ b/teamapps-client/ts/modules/tool-container/toolbar/UiToolbar.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,25 +17,23 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-import * as $ from "jquery";
-import {TeamAppsEvent} from "../../util/TeamAppsEvent";
+
+import {EventSubscription, TeamAppsEvent} from "../../util/TeamAppsEvent";
 import {UiToolbarCommandHandler, UiToolbarConfig, UiToolbarEventSource} from "../../../generated/UiToolbarConfig";
 import {UiToolbarButtonGroupConfig} from "../../../generated/UiToolbarButtonGroupConfig";
 import {UiToolbarButtonConfig} from "../../../generated/UiToolbarButtonConfig";
 import {UiToolAccordion} from "../tool-accordion/UiToolAccordion";
 import {AbstractUiToolContainer} from "../AbstractUiToolContainer";
-import {OrderedDictionary} from "../../util/OrderedDictionary";
 import {UiDropDown} from "../../micro-components/UiDropDown";
-import {UiComponent} from "../../UiComponent";
 import {TeamAppsUiContext} from "../../TeamAppsUiContext";
-import {AbstractUiToolContainer_ToolbarButtonClickEvent, AbstractUiToolContainer_ToolbarDropDownItemClickEvent} from "../../../generated/AbstractUiToolContainerConfig";
-import {EventFactory} from "../../../generated/EventFactory";
+import {AbstractUiToolContainer_ToolbarButtonClickEvent} from "../../../generated/AbstractUiToolContainerConfig";
 import {TeamAppsUiComponentRegistry} from "../../TeamAppsUiComponentRegistry";
 import {Emptyable} from "../../util/Emptyable";
-import {UiColorConfig} from "../../../generated/UiColorConfig";
-import {createUiColorCssString} from "../../util/CssFormatUtil";
 import {UiToolbarButton} from "./UiToolbarButton";
 import {UiToolbarButtonGroup} from "./UiToolbarButtonGroup";
+import {insertAfter, insertBefore, outerWidthIncludingMargins, parseHtml} from "../../Common";
+import {UiComponent} from "../../UiComponent";
+import {UiToolbarButtonGroupPosition} from "../../../generated/UiToolbarButtonGroupPosition";
 
 interface FQButtonId {
 	groupId: string,
@@ -47,99 +45,112 @@ export type ButtonVisibilities = { fittingButtons: FQButtonId[], nonFittingButto
 
 export class UiToolbar extends AbstractUiToolContainer<UiToolbarConfig> implements Emptyable, UiToolbarCommandHandler, UiToolbarEventSource {
 
-	public readonly onEmptyStateChanged: TeamAppsEvent<boolean> = new TeamAppsEvent<boolean>(this);
+	public readonly onEmptyStateChanged: TeamAppsEvent<boolean> = new TeamAppsEvent<boolean>();
 
-	public readonly onToolbarButtonClick: TeamAppsEvent<AbstractUiToolContainer_ToolbarButtonClickEvent> = new TeamAppsEvent<AbstractUiToolContainer_ToolbarButtonClickEvent>(this);
-	public readonly onToolbarDropDownItemClick: TeamAppsEvent<AbstractUiToolContainer_ToolbarDropDownItemClickEvent> = new TeamAppsEvent<AbstractUiToolContainer_ToolbarDropDownItemClickEvent>(this);
+	public readonly onToolbarButtonClick: TeamAppsEvent<AbstractUiToolContainer_ToolbarButtonClickEvent> = new TeamAppsEvent<AbstractUiToolContainer_ToolbarButtonClickEvent>();
 
 	public static DEFAULT_TOOLBAR_MAX_HEIGHT = 70;
 
-	private buttonGroupsById: OrderedDictionary<UiToolbarButtonGroup> = new OrderedDictionary<UiToolbarButtonGroup>();
+	private buttonGroupsById: Map<string, UiToolbarButtonGroup> = new Map();
+	private buttonGroupEmptyEventSubscriptions: Map<string, EventSubscription> = new Map();
+	private leftButtonGroups: UiToolbarButtonGroup[] = [];
+	private rightButtonGroups: UiToolbarButtonGroup[] = [];
 
-	private _$toolbar: JQuery;
-	private _$backgroundColorDiv: JQuery;
-	private _$innerContainer: JQuery;
-	private $toolbarFiller: JQuery;
-	private _$logo: JQuery;
+	private _$toolbar: HTMLElement;
+	private _$backgroundColorDiv: HTMLElement;
+	private _$innerContainer: HTMLElement;
+	private $toolbarFiller: HTMLElement;
+	private _$logo: HTMLElement;
 	private overflowDropDown: UiDropDown;
 	private overflowToolAccordion: UiToolAccordion;
-	private $overflowDropDownButton: JQuery;
+	private $overflowDropDownButton: HTMLElement;
 	private totalWidthOfOverflowButtons: number;
 
 	constructor(config: UiToolbarConfig, context: TeamAppsUiContext) {
 		super(config, context);
-		this._$toolbar = $(`<div class="UiToolbar teamapps-blurredBackgroundImage" id="${config.id}"></div>`);
-		this._$backgroundColorDiv = $('<div class="background-color-div"></div>')
-			.appendTo(this._$toolbar);
-		this._$innerContainer = $('<div class="inner-container">')
-			.appendTo(this._$backgroundColorDiv);
+		this._$toolbar = parseHtml(`<div class="UiToolbar teamapps-blurredBackgroundImage"></div>`);
+		this._$backgroundColorDiv = parseHtml('<div class="background-color-div"></div>');
+		this._$toolbar.appendChild(this._$backgroundColorDiv);
+		this._$innerContainer = parseHtml('<div class="inner-container">');
+		this._$backgroundColorDiv.appendChild(this._$innerContainer);
 
-		this.$toolbarFiller = $('<div class="toolbar-filler">').appendTo(this._$innerContainer);
+		this.$toolbarFiller = parseHtml('<div class="toolbar-filler">');
+		this._$innerContainer.appendChild(this.$toolbarFiller);
 
 		if (config.logoImage) {
 			this.setLogoImage(config.logoImage);
 		}
 
-		this.$overflowDropDownButton = $('<div class="overflow-dropdown-button toolbar-button-wrapper"><div class="caret"></div></div>');
-		this.$overflowDropDownButton.appendTo(this._$innerContainer);
+		this.$overflowDropDownButton = parseHtml('<div class="overflow-dropdown-button toolbar-button-wrapper"><div class="caret"></div></div>');
+		this._$innerContainer.appendChild(this.$overflowDropDownButton);
 		this.overflowDropDown = new UiDropDown();
 		this.overflowToolAccordion = this.createDropDownAccordion();
 		this.overflowDropDown.setContentComponent(this.overflowToolAccordion);
-		this.$overflowDropDownButton.mousedown(() => {
+		this.$overflowDropDownButton.addEventListener("mousedown", () => {
 			if (!this.overflowDropDown.isOpen) {
 				this.overflowDropDown.open({$reference: this.$overflowDropDownButton, width: Math.min(400, this.totalWidthOfOverflowButtons * 1.2)});
-				this.overflowToolAccordion.attachedToDom = true; // obviously...
 				this.updateButtonOverflow();
 			}
 		});
 
-		for (let i = 0; i < config.buttonGroups.length; i++) {
-			const buttonGroupConfig = config.buttonGroups[i];
-			this.addButtonGroup(buttonGroupConfig);
-		}
+		config.leftButtonGroups && config.leftButtonGroups.forEach(bg => this.addButtonGroup(bg, false))
+		config.rightButtonGroups && config.rightButtonGroups.forEach(bg => this.addButtonGroup(bg, true))
+
+		this.onEmptyStateChanged.addListener(empty =>  {
+			this.getMainElement().classList.toggle("empty", empty)
+		})
+		this.getMainElement().classList.toggle("empty", this.empty);
 	}
 
 	private createDropDownAccordion(): UiToolAccordion {
 		let accordionConfig = $.extend({}, this._config, {
-			buttonGroups: this.buttonGroupsById.values.map(group => $.extend({}, group.getConfig(), {buttons: group.getButtonConfigs()}))
+			buttonGroups: [...this.leftButtonGroups, ...this.rightButtonGroups].map(group => $.extend({}, group.getConfig(), {buttons: group.getButtonConfigs()}))
 		});
 		let toolAccordion = new UiToolAccordion(accordionConfig, this._context);
 		toolAccordion.onToolbarButtonClick.addListener(eventObject => {
 			if (!eventObject.dropDownClickInfo) { //
 				this.overflowDropDown.close();
 			}
-			this.onToolbarButtonClick.fire(EventFactory.createAbstractUiToolContainer_ToolbarButtonClickEvent(this.getId(), eventObject.groupId, eventObject.buttonId, eventObject.dropDownClickInfo));
+			this.onToolbarButtonClick.fire({
+				groupId: eventObject.groupId,
+				buttonId: eventObject.buttonId,
+				dropDownClickInfo: eventObject.dropDownClickInfo
+			});
 		});
 		return toolAccordion;
 	}
 
 
-	public getMainDomElement(): JQuery {
+	public doGetMainElement(): HTMLElement {
 		return this._$toolbar;
 	}
 
 	public setLogoImage(logoImage: string) {
 		if (this._$logo) {
-			this._$logo.detach();
+			this._$logo.remove();
 			this._$logo = null;
 		}
 		if (logoImage) {
-			this._$logo = $(`<div class="logo" style="background-image: url(${logoImage});">`)
-				.appendTo(this._$innerContainer);
+			this._$logo = parseHtml(`<div class="logo" style="background-image: url('${logoImage}');"></div>`);
+			this._$innerContainer.appendChild(this._$logo)
 		}
 	}
 
 	public setDropDownComponent(groupId: string, buttonId: string, component: UiComponent): void {
-		this.buttonGroupsById.getValue(groupId).setDropDownComponent(buttonId, component);
+		this.buttonGroupsById.get(groupId).setDropDownComponent(buttonId, component);
 		this.overflowToolAccordion.setDropDownComponent(groupId, buttonId, component);
 	}
 
 	public setButtonHasDropDown(groupId: string, buttonId: string, hasDropDown: boolean): void {
-		this.buttonGroupsById.getValue(groupId).setButtonHasDropDown(buttonId, hasDropDown);
+		this.buttonGroupsById.get(groupId).setButtonHasDropDown(buttonId, hasDropDown);
+	}
+
+	public closeDropDown(groupId: string, buttonId: string) {
+		this.buttonGroupsById.get(groupId).closeDropDown(buttonId);
 	}
 
 	public setButtonVisible(groupId: string, buttonId: string, visible: boolean) {
-		this.buttonGroupsById.values.forEach(buttonGroup => buttonGroup.setButtonVisible(buttonId, visible));
+		this.buttonGroupsById.forEach(buttonGroup => buttonGroup.setButtonVisible(buttonId, visible));
 		if (this.overflowToolAccordion) {
 			this.overflowToolAccordion.setButtonVisible(groupId, buttonId, visible);
 		}
@@ -147,62 +158,74 @@ export class UiToolbar extends AbstractUiToolContainer<UiToolbarConfig> implemen
 	}
 
 	public setButtonGroupVisible(groupId: string, visible: boolean) {
-		this.buttonGroupsById.getValue(groupId) && this.buttonGroupsById.getValue(groupId).setVisible(visible);
+		this.buttonGroupsById.get(groupId)?.setVisible(visible);
 		if (this.overflowToolAccordion) {
 			this.overflowToolAccordion.setButtonGroupVisible(groupId, visible);
 		}
 		this.updateButtonOverflow();
 	}
 
-	public addButtonGroup(groupConfig: UiToolbarButtonGroupConfig) {
-		let changesFromEmptyToNonEmpty = this.empty && groupConfig != null;
-		const existingButtonGroup = this.buttonGroupsById.getValue(groupConfig.groupId);
+	public addButtonGroup(groupConfig: UiToolbarButtonGroupConfig, rightSide: boolean) {
+		const existingButtonGroup = this.buttonGroupsById.get(groupConfig.groupId);
 		if (existingButtonGroup) {
 			this.removeButtonGroup(groupConfig.groupId);
 		}
 
 		const buttonGroup = new UiToolbarButtonGroup(groupConfig, this, this._context);
+		buttonGroup.getMainDomElement().classList.toggle("right-side", rightSide);
 		buttonGroup.onButtonClicked.addListener(e => {
-			return this.onToolbarButtonClick.fire(EventFactory.createAbstractUiToolContainer_ToolbarButtonClickEvent(this.getId(), groupConfig.groupId, e.buttonId, e.dropDownButtonClickInfo));
-		});
-		buttonGroup.onDropDownItemClicked.addListener(e => {
-			return this.onToolbarDropDownItemClick.fire(EventFactory.createAbstractUiToolContainer_ToolbarDropDownItemClickEvent(this.getId(), groupConfig.groupId, e.buttonId, e.groupId, e.buttonId));
+			return this.onToolbarButtonClick.fire({
+				groupId: groupConfig.groupId,
+				buttonId: e.buttonId,
+				dropDownClickInfo: e.dropDownButtonClickInfo
+			});
 		});
-		this.buttonGroupsById.push(groupConfig.groupId, buttonGroup);
-
-		let allButtonGroups = this.buttonGroupsById.values.sort((group1, group2) => group1.position - group2.position);
-		let otherGroupIndex = 0;
-		for (; otherGroupIndex < allButtonGroups.length; otherGroupIndex++) {
-			let otherGroup = allButtonGroups[otherGroupIndex];
-			if (otherGroup.position > groupConfig.position) {
-				break;
-			}
-		}
-
-		if (allButtonGroups[otherGroupIndex]) {
-			buttonGroup.getMainDomElement().insertBefore(allButtonGroups[otherGroupIndex].getMainDomElement());
+		this.buttonGroupsById.set(groupConfig.groupId, buttonGroup);
+		if (rightSide) {
+			this.rightButtonGroups.push(buttonGroup);
 		} else {
-			buttonGroup.getMainDomElement().insertBefore(this.$toolbarFiller);
+			this.leftButtonGroups.push(buttonGroup);
 		}
 
+		this.insertGroupAtCorrectSortingPosition(buttonGroup, groupConfig.position, rightSide);
+
 		if (this.overflowToolAccordion) {
 			this.overflowToolAccordion.addButtonGroup(groupConfig);
 		}
 		this.updateButtonOverflow();
 
-		if (changesFromEmptyToNonEmpty) {
-			this.onEmptyStateChanged.fire(false);
+		this.buttonGroupEmptyEventSubscriptions.set(buttonGroup.getId(),
+			buttonGroup.onEmptyStateChanged.addListener(eventObject => this.updateEmptyState()));
+		this.updateEmptyState();
+	}
+
+	private insertGroupAtCorrectSortingPosition(buttonGroup: UiToolbarButtonGroup, position: UiToolbarButtonGroupPosition, rightSide: boolean) {
+		let otherButtonGroups = (rightSide ? this.rightButtonGroups: this.leftButtonGroups).sort((group1, group2) => group1.position - group2.position);
+		let otherGroupIndex = 0;
+		for (; otherGroupIndex < otherButtonGroups.length; otherGroupIndex++) {
+			let otherGroup = otherButtonGroups[otherGroupIndex];
+			if (otherGroup.position > position) {
+				break;
+			}
+		}
+
+		if (otherButtonGroups[otherGroupIndex]) {
+			insertBefore(buttonGroup.getMainDomElement(), otherButtonGroups[otherGroupIndex].getMainDomElement())
+		} else if (!rightSide) {
+			insertBefore(buttonGroup.getMainDomElement(), this.$toolbarFiller)
+		} else {
+			insertAfter(buttonGroup.getMainDomElement(), this.$toolbarFiller)
 		}
 	}
 
 	public removeButtonGroup(groupId: string): void {
-		let wasAlreadyEmpty = this.empty;
-
-		const buttonGroup = this.buttonGroupsById.getValue(groupId);
+		const buttonGroup = this.buttonGroupsById.get(groupId);
 
 		if (buttonGroup) {
-			this.buttonGroupsById.remove(groupId);
-			buttonGroup.getMainDomElement().detach();
+			this.buttonGroupsById.delete(groupId);
+			this.leftButtonGroups = this.leftButtonGroups.filter(g => g.getId() !== groupId);
+			this.rightButtonGroups = this.rightButtonGroups.filter(g => g.getId() !== groupId);
+			buttonGroup.getMainDomElement().remove();
 		}
 
 		if (this.overflowToolAccordion) {
@@ -210,13 +233,16 @@ export class UiToolbar extends AbstractUiToolContainer<UiToolbarConfig> implemen
 		}
 		this.updateButtonOverflow();
 
-		if (this.empty && !wasAlreadyEmpty) {
-			this.onEmptyStateChanged.fire(true);
-		}
+		this.buttonGroupEmptyEventSubscriptions.get(buttonGroup.getId())?.unsubscribe();
+		this.updateEmptyState();
+	}
+
+	private updateEmptyState() {
+		this.onEmptyStateChanged.fireIfChanged(this.empty);
 	}
 
 	public addButton(groupId: string, buttonConfig: UiToolbarButtonConfig, neighborButtonId: string, beforeNeighbor: boolean) {
-		this.buttonGroupsById.getValue(groupId) && this.buttonGroupsById.getValue(groupId).addButton(buttonConfig, neighborButtonId, beforeNeighbor);
+		this.buttonGroupsById.get(groupId)?.addButton(buttonConfig, neighborButtonId, beforeNeighbor);
 		if (this.overflowToolAccordion) {
 			this.overflowToolAccordion.addButton(groupId, buttonConfig, neighborButtonId, beforeNeighbor);
 		}
@@ -224,67 +250,68 @@ export class UiToolbar extends AbstractUiToolContainer<UiToolbarConfig> implemen
 	}
 
 	public removeButton(groupId: string, buttonId: string): void {
-		this.buttonGroupsById.values.forEach(group => group.removeButton(buttonId));
+		this.buttonGroupsById.forEach(group => group.removeButton(buttonId));
 		if (this.overflowToolAccordion) {
 			this.overflowToolAccordion.removeButton(groupId, buttonId);
 		}
 		this.updateButtonOverflow();
 	}
 
-	updateButtonGroups(buttonGroups: UiToolbarButtonGroupConfig[]): void {
-		// TODO implement only if really needed
-	}
-
 	public onResize(): void {
 		this.updateButtonOverflow();
 	}
 
 	private updateButtonOverflow() {
-		if (!this.attachedToDom) return;
-		let availableWidth = this._$innerContainer[0].offsetWidth;
-		this._$innerContainer.addClass("overflow-measurement-mode");
+		let availableWidth = this._$innerContainer.offsetWidth;
+		this._$innerContainer.classList.add("overflow-measurement-mode");
 		let logoWidth = 0;
 		if (this._$logo) {
-			this._$logo.removeClass("hidden");
-			logoWidth = this._$logo.outerWidth(true);
+			this._$logo.classList.remove("hidden");
+			logoWidth = outerWidthIncludingMargins(this._$logo);
 		}
-		let overflowDropDownButtonWidth = this.$overflowDropDownButton.removeClass("hidden").outerWidth(true);
+		this.$overflowDropDownButton.classList.remove("hidden")
+		let overflowDropDownButtonWidth = outerWidthIncludingMargins(this.$overflowDropDownButton);
 		let consumedWidth = Math.max(logoWidth, overflowDropDownButtonWidth);
 		let hasOverflowingButton = false;
 		this.totalWidthOfOverflowButtons = 0;
-		for (let group of this.buttonGroupsById.values) {
+		for (let group of [...this.rightButtonGroups, ...this.leftButtonGroups]) {
 			let buttonVisibilityInfo = group.calculateButtonVisibilities(availableWidth - consumedWidth);
 			this.totalWidthOfOverflowButtons += buttonVisibilityInfo.nonFittingButtons.reduce((sum, b) => sum + b.button.optimizedWidth, 0);
 			buttonVisibilityInfo.fittingButtons.forEach(b => {
-				b.button.getMainDomElement().removeClass("moved-to-overflow-dropdown");
+				b.button.getMainDomElement().classList.remove("moved-to-overflow-dropdown");
 				this.overflowToolAccordion.setButtonVisible(group.getId(), b.buttonId, false);
 			});
 			buttonVisibilityInfo.nonFittingButtons.forEach(b => {
-				b.button.getMainDomElement().addClass("moved-to-overflow-dropdown");
+				b.button.getMainDomElement().classList.add("moved-to-overflow-dropdown");
 				this.overflowToolAccordion.setButtonVisible(group.getId(), b.buttonId, true);
 				this.overflowToolAccordion.setDropDownComponent(b.groupId, b.buttonId, b.button.getDropDownComponent()); // move to overflow accordion
 			});
 			buttonVisibilityInfo.hiddenButtons.forEach(b => {
 				this.overflowToolAccordion.setButtonVisible(group.getId(), b.buttonId, false);
 			});
-			consumedWidth += group.isVisible() ? group.getMainDomElement()[0].offsetWidth : 0;
+			consumedWidth += group.isVisible() ? group.getMainDomElement().offsetWidth : 0;
 			hasOverflowingButton = hasOverflowingButton || buttonVisibilityInfo.nonFittingButtons.length > 0;
 		}
-		this.$overflowDropDownButton.toggleClass("hidden", !hasOverflowingButton);
+		this.$overflowDropDownButton.classList.toggle("hidden", !hasOverflowingButton);
 		if (this._$logo) {
-			this._$logo.toggleClass("hidden", hasOverflowingButton);
+			this._$logo.classList.toggle("hidden", hasOverflowingButton);
 		}
-		this._$innerContainer.removeClass("overflow-measurement-mode");
+		this._$innerContainer.classList.remove("overflow-measurement-mode");
 	}
 
 	public get empty() {
-		return this.buttonGroupsById.length == 0;
+		return ![...this.buttonGroupsById.values()].some(group => !group.empty);
 	}
 
 	public destroy(): void {
+		super.destroy();
 		// TODO destroy all dropdowns
 	}
 
+	setButtonColors(groupId: string, buttonId: string, backgroundColor: string, hoverBackgroundColor: string): void {
+		this.buttonGroupsById.get(groupId)?.setButtonColors(buttonId, backgroundColor, hoverBackgroundColor);
+	}
+
 }
 
 
diff --git a/teamapps-client/ts/modules/tool-container/toolbar/UiToolbarButton.ts b/teamapps-client/ts/modules/tool-container/toolbar/UiToolbarButton.ts
index efca5b2ed..f9a397efe 100644
--- a/teamapps-client/ts/modules/tool-container/toolbar/UiToolbarButton.ts
+++ b/teamapps-client/ts/modules/tool-container/toolbar/UiToolbarButton.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -22,22 +22,21 @@ import {UiToolbarButtonConfig} from "../../../generated/UiToolbarButtonConfig";
 import {TeamAppsUiContext} from "../../TeamAppsUiContext";
 import {UiToolbar} from "./UiToolbar";
 import {AbstractUiToolContainer} from "../AbstractUiToolContainer";
-import {UiTextCellTemplateConfig} from "../../../generated/UiTextCellTemplateConfig";
-import {enterFullScreen, exitFullScreen, isFullScreen} from "../../Common";
+import {enterFullScreen, exitFullScreen, generateUUID, isFullScreen, parseHtml, prependChild} from "../../Common";
 import {createUiDropDownButtonClickInfoConfig, UiDropDownButtonClickInfoConfig} from "../../../generated/UiDropDownButtonClickInfoConfig";
-import {UiComponent} from "../../UiComponent";
 import {TeamAppsEvent} from "../../util/TeamAppsEvent";
 import {UiItemView} from "../../UiItemView";
-import * as $ from "jquery";
+
+import {UiGridTemplateConfig} from "../../../generated/UiGridTemplateConfig";
+import {UiComponent} from "../../UiComponent";
 
 export class UiToolbarButton {
 
-	public readonly onClicked: TeamAppsEvent<UiDropDownButtonClickInfoConfig> = new TeamAppsEvent(this);
-	public readonly onDropDownItemClicked: TeamAppsEvent<{groupId: string, itemId: number}> = new TeamAppsEvent(this);
+	public readonly onClicked: TeamAppsEvent<UiDropDownButtonClickInfoConfig> = new TeamAppsEvent();
 
-	private $buttonWrapper: JQuery;
-	private $button: JQuery;
-	private $dropDownCaret: JQuery;
+	private $buttonWrapper: HTMLElement;
+	private $button: HTMLElement;
+	private $dropDownCaret: HTMLElement;
 	public optimizedWidth: number;
 	private visible: boolean;
 
@@ -45,28 +44,41 @@ export class UiToolbarButton {
 	private dropDown: UiDropDown;
 	private dropDownComponent: UiComponent;
 
+	private uuidClass: string = `UiToolbarButton-${generateUUID()}`;
+	private $styleTag: HTMLStyleElement;
+
 	constructor(public config: UiToolbarButtonConfig, private context: TeamAppsUiContext) {
-		this.$buttonWrapper = $(`<div class="toolbar-button-wrapper" data-buttonId="${config.buttonId}">
+		this.$buttonWrapper = parseHtml(`<div class="toolbar-button-wrapper ${this.uuidClass}" data-buttonId="${config.buttonId}">
 	<div class="toolbar-button-caret ${config.hasDropDown ? '' : 'hidden'}">
 	  <div class="caret"></div>
 	</div>
+	<style></style>
 </div>`);
+		if (this.config.debuggingId != null) {
+			this.$buttonWrapper.setAttribute("data-teamapps-debugging-id", this.config.debuggingId);
+		}
 		let renderer = context.templateRegistry.createTemplateRenderer(config.template);
-		this.$button = $(renderer.render(config.recordData)).prependTo(this.$buttonWrapper);
-		this.$dropDownCaret = this.$buttonWrapper.find(".toolbar-button-caret");
-		this.optimizedWidth = AbstractUiToolContainer.optimizeButtonWidth(this.$buttonWrapper, this.$button, (config.template as UiTextCellTemplateConfig).maxHeight || UiToolbar.DEFAULT_TOOLBAR_MAX_HEIGHT);
+		this.$button = parseHtml(renderer.render(config.recordData));
+		prependChild(this.$buttonWrapper, this.$button);
+		this.$dropDownCaret = this.$buttonWrapper.querySelector<HTMLElement>(":scope .toolbar-button-caret");
+		this.optimizedWidth = AbstractUiToolContainer.optimizeButtonWidth(this.$buttonWrapper, this.$button, (config.template as UiGridTemplateConfig).maxHeight);
+		this.$styleTag = this.$buttonWrapper.querySelector(":scope style");
+		this.updateStyles();
 		this.setVisible(config.visible);
 		this.setHasDropDown(config.hasDropDown);
-		this.setDropDownComponent(config.dropDownComponent);
+		this.setDropDownComponent(config.dropDownComponent as UiComponent);
 
-		this.$buttonWrapper.on("mousedown", (e) => {
+		this.$buttonWrapper.addEventListener("mousedown", (e) => {
 			if (this.config.togglesFullScreenOnComponent) {
 				if (isFullScreen()) {
 					exitFullScreen();
 				} else {
-					enterFullScreen(this.context.getComponentById(this.config.togglesFullScreenOnComponent));
+					enterFullScreen(this.config.togglesFullScreenOnComponent as UiComponent);
 				}
 			}
+			if (this.config.startPlaybackComponent) {
+				(this.config.startPlaybackComponent as any).play();
+			}
 			if (this.config.openNewTabWithUrl) {
 				window.open(this.config.openNewTabWithUrl, '_blank');
 			}
@@ -97,9 +109,8 @@ export class UiToolbarButton {
 		this.dropDownComponent = component;
 		if (this.dropDown != null) {
 			this.dropDown.setContentComponent(component);
-			if (component instanceof UiItemView) {
-				component.onItemClicked.addListener(eventObject => {
-					this.onDropDownItemClicked.fire({groupId: eventObject.groupId, itemId: eventObject.itemId});
+			if ((component as any).onItemClicked) {
+				((component as any).onItemClicked as TeamAppsEvent<any>).addListener(eventObject => {
 					this.dropDown.close();
 				});
 			}
@@ -112,7 +123,7 @@ export class UiToolbarButton {
 
 	setVisible(visible: boolean) {
 		this.visible = visible;
-		this.getMainDomElement().toggleClass("hidden", !visible);
+		this.getMainDomElement().classList.toggle("hidden", !visible);
 	}
 
 	isVisible(): boolean {
@@ -121,10 +132,31 @@ export class UiToolbarButton {
 
 	public setHasDropDown(hasDropDown: boolean) {
 		this.hasDropDown = hasDropDown;
-		this.$dropDownCaret.toggleClass("hidden", !hasDropDown);
+		this.$dropDownCaret.classList.toggle("hidden", !hasDropDown);
 	}
 
 	get id() {
 		return this.config.buttonId;
 	}
+
+	setColors(backgroundColor: string, hoverBackgroundColor: string) {
+		this.config.backgroundColor = backgroundColor;
+		this.config.hoverBackgroundColor = hoverBackgroundColor;
+		this.updateStyles();
+	}
+
+	private updateStyles() {
+		this.$styleTag.innerHTML = '';
+		this.$styleTag.innerText = `
+		.${this.uuidClass} {
+			background-color: ${(this.config.backgroundColor ?? '')} !important;            
+        }
+		.${this.uuidClass}:hover {
+			background-color: ${(this.config.hoverBackgroundColor ?? '')} !important;            
+        }`;
+	}
+
+	closeDropDown() {
+		this.dropDown.close();
+	}
 }
diff --git a/teamapps-client/ts/modules/tool-container/toolbar/UiToolbarButtonGroup.ts b/teamapps-client/ts/modules/tool-container/toolbar/UiToolbarButtonGroup.ts
index 8382de3d7..c533cff35 100644
--- a/teamapps-client/ts/modules/tool-container/toolbar/UiToolbarButtonGroup.ts
+++ b/teamapps-client/ts/modules/tool-container/toolbar/UiToolbarButtonGroup.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -21,30 +21,32 @@ import {UiToolbarButtonGroupConfig} from "../../../generated/UiToolbarButtonGrou
 import {OrderedDictionary} from "../../util/OrderedDictionary";
 import {UiToolbarButton} from "./UiToolbarButton";
 import {TeamAppsUiContext} from "../../TeamAppsUiContext";
-import * as $ from "jquery";
+
 import {UiToolbarButtonConfig} from "../../../generated/UiToolbarButtonConfig";
-import {UiComponent} from "../../UiComponent";
 import {ButtonVisibilities, UiToolbar} from "./UiToolbar";
 import {UiDropDownButtonClickInfoConfig} from "../../../generated/UiDropDownButtonClickInfoConfig";
 import {TeamAppsEvent} from "../../util/TeamAppsEvent";
+import {insertAfter, insertBefore, outerWidthIncludingMargins, parseHtml} from "../../Common";
+import {UiComponent} from "../../UiComponent";
+import {Emptyable} from "../../util/Emptyable";
 
-export class UiToolbarButtonGroup {
-	public readonly onButtonClicked: TeamAppsEvent<{buttonId: string, dropDownButtonClickInfo: UiDropDownButtonClickInfoConfig}> = new TeamAppsEvent(this);
-	public readonly onDropDownItemClicked: TeamAppsEvent<{buttonId: string, groupId: string, itemId: number}> = new TeamAppsEvent(this);
+export class UiToolbarButtonGroup implements Emptyable {
+	public readonly onButtonClicked: TeamAppsEvent<{buttonId: string, dropDownButtonClickInfo: UiDropDownButtonClickInfoConfig}> = new TeamAppsEvent();
+	public readonly onEmptyStateChanged: TeamAppsEvent<boolean> = new TeamAppsEvent();
 
 	private config: UiToolbarButtonGroupConfig;
 	private visible: boolean = true;
-	private $buttonGroupWrapper: JQuery;
-	private $buttonGroup: JQuery;
+	private $buttonGroupWrapper: HTMLElement;
+	private $buttonGroup: HTMLElement;
 	private buttons: OrderedDictionary<UiToolbarButton>;
-	private $separator: JQuery;
+	private $separator: HTMLElement;
 	private buttonsShiftedToOverflowDropDown: UiToolbarButton[] = [];
 
 	constructor(buttonGroupConfig: UiToolbarButtonGroupConfig, private toolbar: UiToolbar, private context: TeamAppsUiContext) {
-		const $buttonGroupWrapper = $('<div class="button-group-wrapper"/>');
+		const $buttonGroupWrapper = parseHtml('<div class="button-group-wrapper"></div>');
 
-		const $buttonGroup = $(`<div class="toolbar-button-group" id="${this.toolbarId}_${buttonGroupConfig.groupId}">`)
-			.appendTo($buttonGroupWrapper);
+		const $buttonGroup = parseHtml(`<div class="toolbar-button-group" id="${this.toolbarId}_${buttonGroupConfig.groupId}"></div>`);
+		$buttonGroupWrapper.appendChild($buttonGroup);
 
 		this.config = buttonGroupConfig;
 		this.$buttonGroupWrapper = $buttonGroupWrapper;
@@ -59,15 +61,20 @@ export class UiToolbarButtonGroup {
 		}
 
 		if (buttonGroupConfig.showGroupSeparator) {
-			this.$separator = $('<div class="toolbar-group-separator">');
+			this.$separator = parseHtml('<div class="toolbar-group-separator">');
 			$buttonGroupWrapper.append(this.$separator);
 		}
 
 		this.setVisible(buttonGroupConfig.visible);
 
-
+		this.onEmptyStateChanged.addListener(empty => this.$buttonGroupWrapper.classList.toggle("empty", empty));
+		this.$buttonGroupWrapper.classList.toggle("empty", this.empty);
 	}
 
+	public get empty(): boolean {
+		return !this.buttons.values.some(b => b.isVisible());
+	};
+
 	public getId() {
 		return this.config.groupId;
 	}
@@ -83,7 +90,6 @@ export class UiToolbarButtonGroup {
 	private createButton(buttonConfig: UiToolbarButtonConfig) {
 		const button = new UiToolbarButton(buttonConfig, this.context);
 		button.onClicked.addListener(dropDownButtonClickInfo => this.onButtonClicked.fire({buttonId: buttonConfig.buttonId, dropDownButtonClickInfo}));
-		button.onDropDownItemClicked.addListener(e => this.onDropDownItemClicked.fire({buttonId: buttonConfig.buttonId, ...e}));
 		return button;
 	}
 
@@ -110,14 +116,14 @@ export class UiToolbarButtonGroup {
 		const neighborButton = this.buttons.getValue(neighborButtonId);
 		if (neighborButton) {
 			if (beforeNeighbor) {
-				button.getMainDomElement().insertBefore(neighborButton.getMainDomElement());
+				insertBefore(button.getMainDomElement(), neighborButton.getMainDomElement());
 				this.buttons.insertBeforeValue(buttonConfig.buttonId, button, neighborButton);
 			} else {
-				button.getMainDomElement().insertAfter(neighborButton.getMainDomElement());
+				insertAfter(button.getMainDomElement(), neighborButton.getMainDomElement());
 				this.buttons.insertAfterValue(buttonConfig.buttonId, button, neighborButton);
 			}
 		} else {
-			button.getMainDomElement().appendTo(this.$buttonGroup);
+			this.$buttonGroup.appendChild(button.getMainDomElement());
 			this.buttons.push(buttonConfig.buttonId, button);
 		}
 
@@ -129,7 +135,7 @@ export class UiToolbarButtonGroup {
 
 		if (button) {
 			this.buttons.remove(buttonId);
-			button.getMainDomElement().detach();
+			button.getMainDomElement().remove();
 		}
 
 		// TODO destroy dropdown
@@ -147,10 +153,11 @@ export class UiToolbarButtonGroup {
 	}
 
 	private updateVisibility() {
-		let hasVisibleButton = this.buttons.values.some(button => {
-			return button.isVisible() && this.buttonsShiftedToOverflowDropDown.indexOf(button) === -1;
-		});
-		this.$buttonGroupWrapper.toggleClass("pseudo-hidden", !(this.visible && hasVisibleButton));
+		this.onEmptyStateChanged.fireIfChanged(this.empty);
+	}
+
+	setButtonColors(buttonId: string, backgroundColor: string, hoverBackgroundColor: string) {
+		this.buttons.getValue(buttonId).setColors(backgroundColor, hoverBackgroundColor);
 	}
 
 	public calculateButtonVisibilities(availableWidth: number): ButtonVisibilities {
@@ -159,7 +166,7 @@ export class UiToolbarButtonGroup {
 			nonFittingButtons: [],
 			hiddenButtons: []
 		};
-		let usedWidth = this.$separator ? this.$separator.outerWidth(true) : 0;
+		let usedWidth = this.$separator ? outerWidthIncludingMargins(this.$separator) : 0;
 		this.buttons.values.forEach((button) => {
 			if (this.visible && button.isVisible()) {
 				if (usedWidth + button.optimizedWidth <= availableWidth) {
@@ -179,7 +186,7 @@ export class UiToolbarButtonGroup {
 		return info;
 	}
 
-	public getMainDomElement(): JQuery {
+	public getMainDomElement(): HTMLElement {
 		return this.$buttonGroupWrapper;
 	}
 
@@ -194,4 +201,8 @@ export class UiToolbarButtonGroup {
 	public getConfig() {
 		return this.config;
 	}
+
+	closeDropDown(buttonId: string) {
+		this.buttons.getValue(buttonId)?.closeDropDown();
+	}
 }
diff --git a/teamapps-client/ts/modules/trivial-components/ComboBoxPopper.ts b/teamapps-client/ts/modules/trivial-components/ComboBoxPopper.ts
new file mode 100644
index 000000000..cd28f4ccb
--- /dev/null
+++ b/teamapps-client/ts/modules/trivial-components/ComboBoxPopper.ts
@@ -0,0 +1,82 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+import {createPopper, detectOverflow} from "@popperjs/core";
+import ResizeObserver from "resize-observer-polyfill";
+
+export function createComboBoxPopper($reference: Element, $dropdown: HTMLElement, referenceOutOfViewPortHandler: () => void) {
+	return createPopper($reference, $dropdown, {
+		placement: 'bottom',
+		strategy: "fixed",
+		modifiers: [
+			{
+				name: "flip",
+				options: {
+					fallbackPlacements: ['top']
+				}
+			}, {
+				name: "preventOverflow"
+			}, {
+				name: 'hideDropdownIfFieldOutOfViewport',
+				enabled: true,
+				phase: 'main',
+				requiresIfExists: ['offset'],
+				fn: ({state}) => {
+					let sideObject = detectOverflow(state, {elementContext: "reference"});
+					if (sideObject.left > state.rects.reference.width || sideObject.right > state.rects.reference.width
+						|| sideObject.top > state.rects.reference.height || sideObject.bottom > state.rects.reference.height) {
+						referenceOutOfViewPortHandler?.();
+					}
+				}
+			}, {
+				name: 'dropDownCornerSmoother',
+				enabled: true,
+				phase: 'write',
+				fn: ({state}) => {
+					$reference.classList.toggle("dropdown-flipped", state.placement === 'top');
+					$dropdown.classList.toggle("flipped", state.placement === 'top');
+
+				}
+			}, {
+				name: 'forceCorrectDropDownWidth_EvenIf_TemporarilyOverflowedViewPortAndThereforeScrollbarsCausedResizeBeforeFlip',
+				enabled: true,
+				phase: 'afterWrite',
+				fn: ({state}) => {
+					const comboBoxWidth = state.elements.reference.getBoundingClientRect().width;
+					$dropdown.style.width = comboBoxWidth + "px";
+					$dropdown.classList.toggle("broader-than-combobox", $dropdown.clientWidth > comboBoxWidth)
+				}
+			}, {
+				name: "observeReferenceModifier",
+				enabled: true,
+				phase: "main",
+				effect: ({state, instance}) => {
+					const RO_PROP = "__popperjsResizeObserver__";
+					const {reference} = state.elements;
+					(reference as any)[RO_PROP] = new ResizeObserver(() => instance.update());
+					(reference as any)[RO_PROP].observe(reference);
+					return () => {
+						(reference as any)[RO_PROP].disconnect();
+						delete (reference as any)[RO_PROP];
+					};
+				}
+			}
+		]
+	});
+}
diff --git a/teamapps-client/ts/modules/trivial-components/TrivialCalendarBox.ts b/teamapps-client/ts/modules/trivial-components/TrivialCalendarBox.ts
new file mode 100644
index 000000000..9162ce3b8
--- /dev/null
+++ b/teamapps-client/ts/modules/trivial-components/TrivialCalendarBox.ts
@@ -0,0 +1,270 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+import {NavigationDirection, TrivialComponent} from "./TrivialCore";
+import {LocalDateTime} from "../datetime/LocalDateTime";
+import {parseHtml} from "../Common";
+import {TeamAppsEvent} from "../util/TeamAppsEvent";
+
+export enum WeekDay {
+    MONDAY = 1, TUESDAY, WEDNESDAY, THURSDAY, FRIDAY, SATURDAY, SUNDAY
+}
+export type TimeUnit = 'year'|'month'|'day';
+
+export interface TrivialCalendarBoxConfig {
+    locale?: string,
+    selectedDate?: LocalDateTime,
+    firstDayOfWeek?: WeekDay,
+    highlightKeyboardNavigationState?: boolean
+}
+
+export class TrivialCalendarBox implements TrivialComponent {
+
+    private config: TrivialCalendarBoxConfig;
+
+    private keyboardNavigationState: TimeUnit;
+    private keyboardNavCssClass: string;
+    private selectedDate: LocalDateTime;
+    private $calendarBox: HTMLElement;
+    private $calendarDisplay: HTMLElement;
+    private $yearDisplay: HTMLElement;
+    private $monthDisplay: HTMLElement;
+    private $monthTable: HTMLElement;
+    private $year: HTMLElement;
+    private $month: HTMLElement;
+
+    public readonly onChange = new TeamAppsEvent<{ value: LocalDateTime, timeUnitEdited: TimeUnit}>();
+    public readonly onOnEditingTimeUnitChange = new TeamAppsEvent<TimeUnit>();
+
+    constructor(options: TrivialCalendarBoxConfig = {}) {
+        let now = LocalDateTime.local();
+        this.config = $.extend(<TrivialCalendarBoxConfig> {
+            locale: "en-US",
+            selectedDate: now,
+            firstDayOfWeek: WeekDay.MONDAY,
+            highlightKeyboardNavigationState: false
+        }, options);
+
+        this.keyboardNavigationState = 'day'; // 'year','month','day','hour','minute'
+        this.keyboardNavCssClass = this.config.highlightKeyboardNavigationState ? "keyboard-nav" : "";
+
+        this.selectedDate = this.config.selectedDate ?? now;
+        this.$calendarBox = parseHtml('<div class="tr-calendarbox"></div>');
+        this.$calendarDisplay = parseHtml('<div class="tr-calendar-display"></div>');
+        this.$yearDisplay = parseHtml('<div class="year"><span class="back-button"></span><span class="name"></span><span class="forward-button"></span></div>');
+        this.$calendarDisplay.append(this.$yearDisplay);
+        this.$monthDisplay = parseHtml('<div class="month"><span class="back-button"></span><span class="name"></span><span class="forward-button"></span></div>');
+        this.$calendarDisplay.append(this.$monthDisplay);
+        this.$monthTable = parseHtml('<div class="month-table"></div>');
+        this.$calendarDisplay.append(this.$monthDisplay);
+        this.$year = this.$yearDisplay.querySelector(":scope .name");
+        this.$month = this.$monthDisplay.querySelector(":scope .name");
+
+        this.$yearDisplay.addEventListener("click", () => this.setKeyboardNavigationState("year"));
+        let $yearBackButton = this.$yearDisplay.querySelector(":scope .back-button");
+        $yearBackButton.addEventListener("click", () => this.navigateByUnit("year", "left", true));
+        let $yearForwardButton = this.$yearDisplay.querySelector(":scope .forward-button");
+        $yearForwardButton.addEventListener("click", () => this.navigateByUnit("year", "right", true));
+
+        this.$monthDisplay.addEventListener("click", () => this.setKeyboardNavigationState("month"));
+        let $monthBackButton = this.$monthDisplay.querySelector(":scope .back-button");
+        $monthBackButton.addEventListener("click", () => this.navigateByUnit("month", "left", true));
+        let $monthForwardButton = this.$monthDisplay.querySelector(":scope .forward-button");
+        $monthForwardButton.addEventListener("click", () => this.navigateByUnit("month", "right", true));
+
+        this.$calendarBox.append(this.$calendarDisplay);
+
+        this.updateDisplay();
+    }
+
+    private getDaysForCalendarDisplay(dateInMonthDoBeDisplayed: LocalDateTime) {
+        const firstDayOfMonth = dateInMonthDoBeDisplayed.startOf('month');
+        const firstDayToBeDisplayed = this.firstDayOfWeek(firstDayOfMonth);
+
+        const daysOfMonth: LocalDateTime[] = [];
+        for (let day = firstDayToBeDisplayed; daysOfMonth.length < 42; day = day.plus({day: 1})) {
+            daysOfMonth.push(day);
+        }
+        return daysOfMonth;
+    }
+
+    private firstDayOfWeek(firstDayOfMonth: LocalDateTime): LocalDateTime {
+        return firstDayOfMonth.set({weekday: this.config.firstDayOfWeek <= firstDayOfMonth.weekday ? this.config.firstDayOfWeek : this.config.firstDayOfWeek - 7});
+    }
+
+    private updateDisplay() {
+        this.$year.textContent = "" + this.selectedDate.year;
+        this.$month.textContent = (this.selectedDate.setLocale(this.config.locale).toLocaleString({month: "long"}));
+        this.$monthTable.remove();
+        this.$monthTable = parseHtml('<div class="month-table"></div>');
+        this.$calendarDisplay.append(this.$monthTable);
+
+        const daysToBeDisplayed = this.getDaysForCalendarDisplay(this.selectedDate);
+
+        let $tr = $('<tr>').appendTo(this.$monthTable);
+        let weekDay = this.firstDayOfWeek(LocalDateTime.local()).setLocale(this.config.locale);
+        for (let i = 0; i < 7; i++, weekDay = weekDay.plus({day: 1})) {
+            $tr.append('<th>' + weekDay.toLocaleString({weekday: "narrow"}) + '</th>');
+        }
+        let today = LocalDateTime.local().startOf("day");
+        for (let w = 0; w < daysToBeDisplayed.length / 7; w++) {
+            $tr = $('<tr>').appendTo(this.$monthTable);
+            for (let d = 0; d < 7; d++) {
+                const day = daysToBeDisplayed[w * 7 + d];
+                const $td = $('<td>' + day.day + '</td>');
+                if (day.month == this.selectedDate.month) {
+                    $td.addClass('current-month');
+                } else {
+                    $td.addClass('other-month');
+                }
+                if (day.hasSame(today, 'day')) {
+                    $td.addClass('today');
+                }
+                if (day.hasSame(this.selectedDate, 'day')) {
+                    $td.addClass('selected');
+                    if (this.keyboardNavigationState === 'day') {
+                        $td.addClass(this.keyboardNavCssClass);
+                    }
+                }
+                $td.click(((day: LocalDateTime) => {
+                    this.setKeyboardNavigationState("day");
+                    this.setMonthAndDay(day.month, day.day, true);
+                }).bind(this, day));
+                $tr.append($td);
+            }
+        }
+    }
+
+    public setSelectedDate(dateTime: LocalDateTime) {
+        this.selectedDate = dateTime;
+        this.updateDisplay();
+    }
+
+    public setYear(year: number, fireEvent?: boolean) {
+        this.selectedDate = this.selectedDate.set({year});
+        this.updateDisplay();
+        if (fireEvent) {
+            this.onOnEditingTimeUnitChange.fire('year');
+            this.fireChangeEvents('year');
+        }
+    }
+
+    public setMonth(month: number, fireEvent?: boolean) {
+        this.selectedDate = this.selectedDate.set({month});
+        this.updateDisplay();
+        if (fireEvent) {
+            this.onOnEditingTimeUnitChange.fire('month');
+            this.fireChangeEvents('month');
+        }
+    }
+
+    public setDayOfMonth(day: number, fireEvent?: boolean) {
+        this.selectedDate = this.selectedDate.set({day});
+        this.updateDisplay();
+        if (fireEvent) {
+            this.onOnEditingTimeUnitChange.fire('day');
+            this.fireChangeEvents('day');
+        }
+    }
+
+    public setMonthAndDay(month: number, day: number, fireEvent?: boolean) {
+        this.selectedDate = this.selectedDate.set({month, day});
+        this.updateDisplay();
+        if (fireEvent) {
+            this.onOnEditingTimeUnitChange.fire('day');
+            this.fireChangeEvents('month');
+            this.fireChangeEvents('day');
+        }
+    }
+
+    private fireChangeEvents(timeUnit: TimeUnit) {
+        this.onChange.fire({
+            value: this.getSelectedDate(),
+            timeUnitEdited: timeUnit
+        });
+    }
+
+    public setKeyboardNavigationState(newKeyboardNavigationState: TimeUnit) {
+        this.keyboardNavigationState = newKeyboardNavigationState;
+        if (this.config.highlightKeyboardNavigationState) {
+            let me = this;
+            [this.$yearDisplay, this.$monthDisplay, this.$monthTable.querySelector(':scope td.' + this.keyboardNavCssClass)]
+                .forEach(element => element.classList.remove(me.keyboardNavCssClass));
+            if (this.keyboardNavigationState == 'year') {
+                this.$yearDisplay.classList.add(this.keyboardNavCssClass);
+            } else if (this.keyboardNavigationState == 'month') {
+                this.$monthDisplay.classList.add(this.keyboardNavCssClass);
+            } else if (this.keyboardNavigationState == 'day') {
+                this.$monthTable.querySelector(":scope .selected")?.classList?.add(this.keyboardNavCssClass);
+            } 
+        }
+    }
+
+    public getSelectedDate() {
+        return this.selectedDate;
+    };
+
+    private navigateByUnit(unit: TimeUnit, direction: NavigationDirection, fireEvent: boolean = false): boolean { // returns true if effectively navigated, false if nothing has changed
+        if (unit == 'year') {
+            if (direction == 'down' || direction == 'left') {
+                this.setYear(this.selectedDate.year - 1, fireEvent);
+            } else if (direction == 'up' || direction == 'right') {
+                this.setYear(this.selectedDate.year + 1, fireEvent);
+            }
+            return true;
+        } else if (unit == 'month') {
+            if (direction == 'down' || direction == 'left') {
+                this.setMonth(this.selectedDate.month - 1, fireEvent);
+            } else if (direction == 'up' || direction == 'right') {
+                this.setMonth(this.selectedDate.month + 1, fireEvent);
+            }
+            return true;
+        } else if (unit == 'day') {
+            if (direction == 'down') {
+                this.selectedDate = this.selectedDate.plus({days: 7});
+            } else if (direction == 'left') {
+                this.selectedDate = this.selectedDate.minus({days: 1});
+            } else if (direction == 'up') {
+                this.selectedDate = this.selectedDate.minus({days: 7});
+            } else if (direction == 'right') {
+                this.selectedDate = this.selectedDate.plus({days: 1});
+            }
+            this.updateDisplay();
+            fireEvent && this.fireChangeEvents('day');
+            return true;
+        }
+    }
+
+    public navigate(direction: NavigationDirection) { // returns true if effectively navigated, false if nothing has changed
+        this.navigateByUnit(this.keyboardNavigationState, direction);
+    };
+
+    public navigateTimeUnit(timeUnit: TimeUnit, direction: NavigationDirection) { // returns true if effectively navigated, false if nothing has changed
+        this.navigateByUnit(timeUnit, direction);
+    };
+
+    getMainDomElement(): HTMLElement {
+        return this.$calendarBox;
+    }
+
+    public destroy() {
+        this.$calendarBox.remove();
+    };
+
+}
diff --git a/teamapps-client/ts/modules/trivial-components/TrivialComboBox.ts b/teamapps-client/ts/modules/trivial-components/TrivialComboBox.ts
new file mode 100644
index 000000000..a5779b104
--- /dev/null
+++ b/teamapps-client/ts/modules/trivial-components/TrivialComboBox.ts
@@ -0,0 +1,558 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+import {
+	EditingMode,
+	keyCodes,
+	objectEquals,
+	RenderingFunction,
+	setTimeoutOrDoImmediately,
+	TrivialComponent,
+	unProxyEntry
+} from "./TrivialCore";
+import {Instance as Popper} from '@popperjs/core';
+import {getAutoCompleteOffValue, parseHtml} from "../Common";
+import {DropDownComponent, SelectionDirection} from "./dropdown/DropDownComponent";
+import {createComboBoxPopper} from "./ComboBoxPopper";
+import {TeamAppsEvent} from "../util/TeamAppsEvent";
+import {UiToolButton} from "../micro-components/UiToolButton";
+
+export interface TrivialComboBoxConfig<E> {
+	/**
+	 * Rendering function used to display a _selected_ entry
+	 * (i.e. an entry inside the editor area of the component, not the dropdown).
+	 *
+	 * @param entry
+	 * @return HTML string
+	 * @default `wrapWithDefaultTagWrapper(entryRenderingFunction(entry))`
+	 */
+	selectedEntryRenderingFunction: RenderingFunction<E>,
+
+	/**
+	 * Whether or not to provide auto-completion.
+	 *
+	 * @default `true`
+	 */
+	autoComplete?: boolean,
+
+	/**
+	 * The number of milliseconds to wait until auto-completion is performed.
+	 *
+	 * @default `0`
+	 */
+	autoCompleteDelay?: number,
+
+	/**
+	 * Used to set the editor's text when focusing the component.
+	 * Additionally used to generate an autocompletion string for the current input of the user.
+	 *
+	 * @param entry the currently selected entry in the dropdown
+	 */
+	entryToEditorTextFunction: (entry: E) => string,
+
+	/**
+	 * Creates an entry (object) from a string entered by the user.
+	 *
+	 * @param freeText the text entered by the user
+	 * @default `{ displayValue: freeText, _isFreeTextEntry: true }`
+	 */
+	textToEntryFunction?: (freeText: string) => E | any,
+
+	/**
+	 * The clear button is a the small 'x' at the right of the entry display that can be clicked to clear the selection.
+	 */
+	showClearButton?: boolean,
+
+	/**
+	 * The trigger is the button on the right side of the component that can be clicket to open the dropdown.
+	 *
+	 * @default `true`
+	 */
+	showTrigger?: boolean,
+
+	editingMode?: EditingMode,
+
+	/**
+	 * It `true`, opening the dropdown will be delayed until the result callback of the [[queryFunction]] is called.
+	 *
+	 * @default `false`
+	 */
+	showDropDownOnResultsOnly?: boolean,
+
+	/**
+	 * When typing, preselect the first returned query result.
+	 */
+	preselectFirstQueryResult?: boolean,
+
+	/**
+	 * Text displayed when nothing has been selected/typed.
+	 */
+	placeholderText?: string,
+
+	dropDownMinWidth?: number,
+	dropDownMaxHeight?: number
+}
+
+export class TrivialComboBox<E> implements TrivialComponent {
+
+	public readonly onSelectedEntryChanged = new TeamAppsEvent<E>();
+	public readonly onFocus = new TeamAppsEvent<void>();
+	public readonly onBlur = new TeamAppsEvent<void>();
+	public readonly onBeforeQuery = new TeamAppsEvent<string>();
+	public readonly onBeforeDropdownOpens = new TeamAppsEvent<string>();
+
+	private config: TrivialComboBoxConfig<E>;
+
+	private $comboBox: HTMLElement;
+	private $dropDown: HTMLElement;
+	private $editor: HTMLInputElement;
+	private $selectedEntryWrapper: HTMLElement;
+	private $trigger: HTMLElement;
+	private $clearButton: HTMLElement;
+	private $toolButtonsWrapper: HTMLElement;
+
+	private popper: Popper;
+	private dropDownComponent: DropDownComponent<E>;
+
+	private selectedEntry: E = null;
+
+	private blurCausedByClickInsideComponent = false;
+	private focused: boolean;
+
+	private autoCompleteTimeoutId = -1;
+	private doNoAutoCompleteBecauseBackspaceWasPressed = false;
+
+	private editingMode: EditingMode;
+	private dropDownOpen = false;
+	private isEditorVisible = false;
+
+
+	constructor(options: TrivialComboBoxConfig<E>, dropDownComponent?: DropDownComponent<E>) {
+		this.config = {
+			autoComplete: true,
+			autoCompleteDelay: 0,
+			textToEntryFunction: (freeText: string) => null,
+			showClearButton: false,
+			showTrigger: true,
+			editingMode: "editable", // one of 'editable', 'disabled' and 'readonly'
+			showDropDownOnResultsOnly: false,
+			preselectFirstQueryResult: true,
+			placeholderText: "",
+
+			...options
+		};
+
+		this.$comboBox = parseHtml(`<div class="tr-combobox tr-input-wrapper editor-hidden">
+			<div class="tr-combobox-main-area">
+				<input type="text" class="tr-combobox-editor tr-editor" autocomplete="${getAutoCompleteOffValue()}"></input>
+				<div class="tr-combobox-selected-entry-wrapper"></div>			
+			</div>
+			<div class="tr-tool-buttons">
+			  <div class="tr-tool-button tr-remove-button ${this.config.showClearButton ? '' : 'hidden'}"></div>
+			</div>
+            <div class="tr-trigger ${this.config.showTrigger ? '' : 'hidden'}"><span class="tr-trigger-icon"></span></div>
+        </div>`);
+		this.$selectedEntryWrapper = this.$comboBox.querySelector(':scope .tr-combobox-selected-entry-wrapper');
+		this.$toolButtonsWrapper = this.$comboBox.querySelector(':scope .tr-tool-buttons');
+		this.$clearButton = this.$comboBox.querySelector(':scope .tr-remove-button');
+		this.$clearButton.addEventListener("mousedown", (e) => {
+			this.$editor.value = "";
+			this.setValue(null, true, e);
+		});
+		this.$trigger = this.$comboBox.querySelector(':scope .tr-trigger');
+		this.$dropDown = parseHtml('<div class="tr-dropdown"></div>');
+		this.$dropDown.style.minWidth = this.config.dropDownMinWidth != null ? (this.config.dropDownMinWidth + "px") : null;
+		this.$dropDown.style.maxHeight = this.config.dropDownMaxHeight != null ? (this.config.dropDownMaxHeight + "px") : null
+		this.$dropDown.addEventListener("scroll", e => {
+			e.stopPropagation();
+			e.preventDefault();
+		});
+		this.setEditingMode(this.config.editingMode);
+		this.$editor = this.$comboBox.querySelector(':scope .tr-editor');
+		this.$editor.addEventListener("focus", () => {
+			this.setFocused(true);
+			if (!this.blurCausedByClickInsideComponent) {
+				this.showEditor();
+			}
+		})
+		this.$editor.addEventListener("blur", (e: FocusEvent) => {
+			if (this.blurCausedByClickInsideComponent) {
+				this.$editor.focus();
+				// Don't just unset the blurCausedByClickInsideComponent here! See the comment with hashtag #regainFocus.
+			} else {
+				this.setFocused(false);
+				if (this.isEditorVisible) {
+					let freeTextEntry = this.getFreeTextEntry();
+					if (freeTextEntry != null) {
+						this.setValue(freeTextEntry, true, e);
+					}
+				}
+				this.hideEditor();
+				this.closeDropDown();
+			}
+		})
+		this.$editor.addEventListener("keydown", (e: KeyboardEvent) => {
+			if (keyCodes.isModifierKey(e)) {
+				return;
+			} else if (e.key === "Tab" || e.key === "Enter") {
+				if (this.isEditorVisible) {
+					e.key == "Enter" && e.preventDefault(); // do not submit form
+					let highlightedEntry = this.dropDownComponent.getValue();
+					if (this.dropDownOpen && highlightedEntry) {
+						this.setValue(highlightedEntry, true, e);
+					} else {
+						let freeTextEntry = this.getFreeTextEntry();
+						if (freeTextEntry != null) {
+							this.setValue(freeTextEntry, true, e);
+						}
+					}
+					this.closeDropDown();
+					this.hideEditor();
+				}
+				return;
+			} else if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
+				if (this.dropDownOpen && this.dropDownComponent.handleKeyboardInput(e)) {
+					this.setAndSelectEditorValue(this.dropDownComponent.getValue());
+					e.preventDefault();
+					return;
+				} else {
+					this.showEditor();
+					return; // let the user navigate freely left and right...
+				}
+			} else if (e.key === "Backspace" || e.key === "Delete") {
+				this.doNoAutoCompleteBecauseBackspaceWasPressed = true; // we want query results, but no autocomplete
+				setTimeout(() => this.query(this.getEditorValueLeftOfSelection(), 0)); // asynchronously to make sure the editor has been updated
+			} else if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+				if (!this.isEditorVisible) {
+					this.$editor.select();
+					this.showEditor();
+				}
+				const direction = e.key === "ArrowUp" ? -1 : 1;
+				if (!this.dropDownOpen) {
+					this.query(this.getEditorValueLeftOfSelection(), direction);
+					this.openDropDown(); // directly open the dropdown (the user definitely wants to see it)
+				} else {
+					if (this.dropDownComponent.handleKeyboardInput(e)) {
+						this.setAndSelectEditorValue(this.dropDownComponent.getValue());
+					}
+				}
+				e.preventDefault(); // some browsers move the caret to the beginning on up key
+			} else if (e.key === "Escape") {
+				if (!(!this.isEntrySelected() && this.$editor.value.length > 0 && this.dropDownOpen)) {
+					this.hideEditor();
+					this.$editor.value = "";
+				}
+				this.closeDropDown();
+			}
+		});
+		this.$editor.addEventListener("input", e => {
+			if (!this.isEditorVisible) {
+				this.showEditor();
+				this.$editor.select();
+			}
+			if (!this.config.showDropDownOnResultsOnly) {
+				this.openDropDown();
+			}
+
+			this.query(this.getEditorValueLeftOfSelection(), this.config.preselectFirstQueryResult && this.$editor.value ? 1 : 0);
+		});
+
+		[this.$comboBox, this.$dropDown].forEach(element => {
+			element.addEventListener("mousedown", () => {
+				this.blurCausedByClickInsideComponent = true;
+
+				// #regainFocus
+				// Why don't we just do a "setTimeout(() => this.blurCausedByClickInsideComponent = false);" and check for
+				// the flag in the blur event handler instead of this overly complex handling of "mouseup" and "mousedown" events?
+				// That's because in Firefox, doing $editor.focus() has no effect as long as the mouse is pressed. The
+				// document.activeElement will be document.body until the mouse is released.
+				// So when the user presses somewhere inside the tag combobox (except the $editor), the focus will be lost (blur event)
+				// and re-focusing will have no effect. We HAVE TO wait for the mouseup or mouseout event in order to re-focus.
+			}, true);
+			element.addEventListener("mouseup", () => {
+				if (this.blurCausedByClickInsideComponent) {
+					this.$editor.focus();
+					this.blurCausedByClickInsideComponent = false;
+				}
+			});
+			element.addEventListener("mouseout", () => {
+				if (this.blurCausedByClickInsideComponent) {
+					this.$editor.focus();
+					this.blurCausedByClickInsideComponent = false;
+				}
+			});
+		});
+
+		this.setDropDownComponent(dropDownComponent);
+
+		this.$editor.addEventListener("mousedown", () => {
+			if (this.editingMode === "editable") {
+				if (!this.config.showDropDownOnResultsOnly) {
+					this.openDropDown();
+				}
+				this.query(this.getEditorValueLeftOfSelection());
+			}
+		});
+		this.$trigger.addEventListener("mousedown", () => {
+			if (this.dropDownOpen) {
+				this.closeDropDown();
+				this.showEditor();
+			} else if (this.editingMode === "editable") {
+				this.showEditor();
+				this.$editor.select();
+				this.dropDownComponent.setValue(this.getValue())
+				this.query("", 0);
+				this.openDropDown();
+			}
+		});
+		this.$selectedEntryWrapper.addEventListener("click", () => {
+			if (this.editingMode === "editable") {
+				this.showEditor();
+				this.$editor.select()
+				if (!this.config.showDropDownOnResultsOnly) {
+					this.openDropDown();
+				}
+				this.dropDownComponent.setValue(this.getValue())
+				this.query("", 0);
+			}
+		});
+
+		this.popper = createComboBoxPopper(this.$comboBox, this.$dropDown, () => this.closeDropDown());
+	}
+
+	private setFocused(focused: boolean) {
+		if (focused != this.focused) {
+			if (focused) {
+				this.onFocus.fire();
+			} else {
+				this.onBlur.fire();
+			}
+			this.$comboBox.classList.toggle('focus', focused);
+			this.focused = focused;
+		}
+	}
+
+	private getFreeTextEntry() {
+		let editorValue = this.getEditorValueLeftOfSelection();
+		return editorValue ? this.config.textToEntryFunction(editorValue) : null;
+	}
+
+	private setAndSelectEditorValue(value: E) {
+		if (value != null) {
+			this.$editor.value = this.config.entryToEditorTextFunction(value);
+			this.$editor.select();
+		} else {
+			this.$editor.value = "";
+		}
+	}
+
+	private handleDropDownValueChange(eventData: { value: E; finalSelection: boolean }) {
+		if (eventData.finalSelection) {
+			this.setValue(eventData.value, true);
+			this.closeDropDown();
+			this.hideEditor();
+		}
+	}
+
+	private async query(nonSelectedEditorValue: string, highlightDirection: SelectionDirection = 0) {
+		this.onBeforeQuery.fire(nonSelectedEditorValue);
+		let gotResultsForQuery = await this.dropDownComponent.handleQuery(nonSelectedEditorValue, highlightDirection, this.getValue());
+
+		if (highlightDirection !== 0) {
+			this.autoCompleteIfPossible(this.config.autoCompleteDelay);
+		}
+
+		if (this.config.showDropDownOnResultsOnly && gotResultsForQuery && document.activeElement == this.$editor) {
+			this.openDropDown();
+		}
+	}
+
+	private fireChangeEvents(entry: E, originalEvent?: unknown) {
+		this.onSelectedEntryChanged.fire(unProxyEntry(entry));
+	}
+
+	public setValue(entry: E, fireEventIfChanged?: boolean, originalEvent?: unknown) {
+		let changing = !objectEquals(entry, this.selectedEntry);
+		this.selectedEntry = entry;
+		this.$selectedEntryWrapper.innerHTML = '';
+		let $selectedEntry = parseHtml(this.config.selectedEntryRenderingFunction(entry));
+		if ($selectedEntry != null) {
+			$selectedEntry.classList.add("tr-combobox-entry");
+			this.$selectedEntryWrapper.append($selectedEntry);
+		} else {
+			this.$selectedEntryWrapper.append(parseHtml(`<div class="placeholder-text">${this.config.placeholderText ?? ""}</div>`))
+		}
+		if (entry != null) {
+			this.$editor.value = this.config.entryToEditorTextFunction(entry)
+		} else {
+			this.$editor.value = '';
+		}
+
+		if (changing && fireEventIfChanged) {
+			this.fireChangeEvents(entry, originalEvent);
+		}
+		this.$toolButtonsWrapper.classList.toggle("hidden", entry == null);
+		if (this.isEditorVisible) {
+			this.showEditor(); // reposition editor
+		}
+		if (this.dropDownOpen) {
+			this.popper.update();
+		}
+	}
+
+	private isEntrySelected() {
+		return this.selectedEntry != null;
+	}
+
+	private showEditor() {
+		this.$comboBox.classList.remove("editor-hidden");
+		this.isEditorVisible = true;
+	}
+
+	private hideEditor() {
+		this.$comboBox.classList.add("editor-hidden");
+		this.isEditorVisible = false;
+	}
+
+	private parentElement: Element;
+
+	public openDropDown() {
+		if (this.isDropDownNeeded()) {
+			if (this.getMainDomElement().parentElement !== this.parentElement) {
+				this.popper.destroy();
+				this.popper = createComboBoxPopper(this.$comboBox, this.$dropDown, () => this.closeDropDown());
+				this.parentElement = this.getMainDomElement().parentElement;
+			}
+			if (!this.dropDownOpen) {
+				this.onBeforeDropdownOpens.fire(this.getEditorValueLeftOfSelection());
+				this.$comboBox.classList.add("open");
+				this.popper.update();
+				this.dropDownOpen = true;
+			}
+		}
+	}
+
+	public closeDropDown() {
+		this.$comboBox.classList.remove("open");
+		this.dropDownOpen = false;
+	}
+
+	private getEditorValueLeftOfSelection() {
+		return this.$editor.value.substring(0, Math.min(this.$editor.selectionStart, this.$editor.selectionEnd));
+	}
+
+	private autoCompleteIfPossible(delay?: number) {
+		if (this.config.autoComplete) {
+			clearTimeout(this.autoCompleteTimeoutId);
+			const dropDownValue = this.dropDownComponent.getValue();
+			if (dropDownValue && !this.doNoAutoCompleteBecauseBackspaceWasPressed) {
+				this.autoCompleteTimeoutId = setTimeoutOrDoImmediately(() => {
+					const currentEditorValue = this.getEditorValueLeftOfSelection();
+					const entryAsString = this.config.entryToEditorTextFunction(dropDownValue);
+					if (entryAsString.toLowerCase().indexOf(("" + currentEditorValue).toLowerCase()) === 0) {
+						this.$editor.value = currentEditorValue + entryAsString.substr(currentEditorValue.length);
+						if (document.activeElement == this.$editor) {
+							(this.$editor as any).setSelectionRange(currentEditorValue.length, entryAsString.length);
+						}
+					}
+				}, delay);
+			}
+			this.doNoAutoCompleteBecauseBackspaceWasPressed = false;
+		}
+	}
+
+	private isDropDownNeeded() {
+		return this.editingMode == 'editable';
+	}
+
+	public setEditingMode(newEditingMode: EditingMode) {
+		this.editingMode = newEditingMode;
+		this.$comboBox.classList.remove("editable", "readonly", "disabled");
+		this.$comboBox.classList.add(this.editingMode);
+		if (this.isDropDownNeeded()) {
+			this.$comboBox.append(this.$dropDown);
+		}
+	}
+
+	public getValue(): E {
+		return unProxyEntry(this.selectedEntry);
+	}
+
+	public getDropDownComponent(): DropDownComponent<E> {
+		return this.dropDownComponent;
+	}
+
+	public setDropDownComponent(dropDownComponent: DropDownComponent<E>): void {
+		if (this.dropDownComponent != null) {
+			this.dropDownComponent.onValueChanged.removeListener(this.handleDropDownValueChange);
+			this.$dropDown.innerHTML = '';
+		}
+		this.dropDownComponent = dropDownComponent;
+		this.$dropDown.append(dropDownComponent.getMainDomElement());
+		dropDownComponent.onValueChanged.addListener(this.handleDropDownValueChange.bind(this));
+		dropDownComponent.setValue(this.getValue());
+	}
+
+	public focus() {
+		this.showEditor();
+		this.$editor.select();
+	};
+
+	public getEditor(): Element {
+		return this.$editor;
+	}
+
+	public setShowClearButton(showClearButton: boolean) {
+		this.config.showClearButton = showClearButton;
+		this.$clearButton.classList.toggle('hidden', !this.config.showClearButton);
+	}
+
+	public setShowTrigger(showTrigger: boolean) {
+		this.config.showTrigger = showTrigger;
+		this.$trigger.classList.toggle('hidden', !showTrigger);
+	}
+
+	public setToolButtons(buttons: UiToolButton[]) {
+		Array.from(this.$toolButtonsWrapper.children)
+			.filter(e => e != this.$clearButton)
+			.forEach(e => e.remove());
+		buttons.forEach(b => this.$toolButtonsWrapper.insertBefore(b.getMainElement(), this.$clearButton));
+	}
+
+	public isDropDownOpen(): boolean {
+		return this.dropDownOpen;
+	}
+
+	public destroy() {
+		this.$comboBox.remove();
+		this.$dropDown.remove();
+	};
+
+	getMainDomElement(): HTMLElement {
+		return this.$comboBox;
+	}
+
+	setPlaceholderText(placeholderText: string) {
+		this.config.placeholderText = placeholderText;
+		let $placeholderText: HTMLElement = this.$selectedEntryWrapper.querySelector(":scope .placeholder-text");
+		if ($placeholderText != null) {
+			$placeholderText.innerText = placeholderText ?? "";
+		}
+	}
+}
diff --git a/teamapps-client/ts/modules/trivial-components/TrivialCore.ts b/teamapps-client/ts/modules/trivial-components/TrivialCore.ts
new file mode 100644
index 000000000..c785cc83a
--- /dev/null
+++ b/teamapps-client/ts/modules/trivial-components/TrivialCore.ts
@@ -0,0 +1,458 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+/*
+ *
+ *  Copyright 2016 Yann Massard (https://github.com/yamass) and other contributors
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ *
+ */
+
+import * as Levenshtein from "levenshtein";
+import KeyboardEventBase = JQuery.KeyboardEventBase;
+
+export interface TrivialComponent {
+	getMainDomElement(): HTMLElement;
+
+	destroy(): void;
+}
+
+export type EditingMode = 'editable' | 'disabled' | 'readonly';
+
+export type MatchingOptions = {
+	matchingMode?: 'contains' | 'prefix' | 'prefix-word' | 'prefix-levenshtein' | 'levenshtein',
+	ignoreCase?: boolean,
+	maxLevenshteinDistance?: number
+};
+
+export type Match = {
+	start: number,
+	length: number,
+	distance?: number
+};
+
+export type HighlightDirection = number | null | undefined;
+export type NavigationDirection = "up" | "left" | "down" | "right";
+export type QueryFunction<E> = (queryString: string) => E[] | Promise<E[]>;
+
+/**
+ * Used to render an entry.
+ *
+ * @param entry the entry to render
+ * @return HTML string
+ */
+export type RenderingFunction<E> = (entry: E) => string;
+
+export const keyCodes = {
+	backspace: 8,
+	tab: 9,
+	enter: 13,
+	shift: 16,
+	ctrl: 17,
+	alt: 18,
+	pause: 19,
+	caps_lock: 20,
+	escape: 27,
+	space: 32,
+	page_up: 33,
+	page_down: 34,
+	end: 35,
+	home: 36,
+	left_arrow: 37,
+	up_arrow: 38,
+	right_arrow: 39,
+	down_arrow: 40,
+	insert: 45,
+	"delete": 46,
+	left_window_key: 91,
+	right_window_key: 92,
+	select_key: 93,
+	num_lock: 144,
+	scroll_lock: 145,
+	specialKeys: [8, 9, 13, 16, 17, 18, 19, 20, 27, 33, 34, 35, 36, 37, 38, 39, 40, 45, 46, 91, 92, 93, 144, 145],
+	numberKeys: [48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 96, 97, 98, 99, 100, 101, 102, 103, 104, 105],
+	isSpecialKey: function (keyCode: number) {
+		return this.specialKeys.indexOf(keyCode) != -1;
+	},
+	isDigitKey: function (keyCode: number) {
+		return this.numberKeys.indexOf(keyCode) != -1;
+	},
+	isModifierKey(e: KeyboardEventBase | KeyboardEvent) {
+		return [keyCodes.shift, keyCodes.caps_lock, keyCodes.alt, keyCodes.ctrl, keyCodes.left_window_key, keyCodes.right_window_key]
+			.indexOf(e.which) != -1;
+	}
+};
+
+export interface DefaultEntryStructure {
+	imageUrl?: string,
+	displayValue?: string,
+	additionalInfo?: string,
+	statusColor?: string
+}
+
+export interface DefaultCurrencyEntryStructure {
+	symbol?: string,
+	code?: string,
+	name?: string,
+	exchangeRate?: string | number,
+	exchangeRateBase?: string
+}
+
+export const DEFAULT_RENDERING_FUNCTIONS = {
+	currencySingleLineShort: (entry: DefaultCurrencyEntryStructure) => {
+		entry = entry || {};
+		return `<div class="tr-template-currency-single-line-short">
+          <div class="content-wrapper tr-editor-area"> 
+            <div>${entry.symbol != null ? `<span class="currency-symbol">${entry.symbol || ''}</span>` : ''} ${entry.code != null ? `<span class="currency-code">${entry.code || ''}</span>` : ''}</div> 
+          </div>
+        </div>`;
+	},
+	currency2Line: (entry: DefaultCurrencyEntryStructure) => {
+		entry = entry || {};
+		return `<div class="tr-template-currency-2-lines">
+          <div class="content-wrapper tr-editor-area"> 
+            <div class="main-line">
+              <span class="currency-code">${entry.code || ''}</span>
+              <span class="currency-name">${entry.name || ''}</span>
+            </div> 
+            <div class="additional-info">
+              <span class="currency-symbol">${entry.symbol || ''}</span>&nbsp;
+              ${entry.exchangeRate != null ? `<div class="exchange"> = <span class="exchange-rate">${entry.exchangeRate || ''}</span> <span class="exchange-rate-base">${entry.exchangeRateBase || ''}</span></div>` : ''}
+            </div>
+          </div>
+        </div>`;
+	}
+};
+
+export const DEFAULT_TEMPLATES = {
+	defaultSpinnerTemplate: `<div class="tr-default-spinner"><div class="spinner"></div><div>Fetching data...</div></div>`,
+	defaultNoEntriesTemplate: `<div class="tr-default-no-data-display"><div>No matching entries...</div></div>`
+};
+
+export function wrapWithDefaultTagWrapper(entryHtml: string, deleteButton = true) {
+	return (`<div class="tr-tagcombobox-default-wrapper-template">
+        <div class="tr-tagcombobox-tag-content">
+            ${entryHtml}
+        </div>
+        ${deleteButton ? '<div class="tr-remove-button"></div>' : ''}
+    </div>`);
+}
+
+export function defaultListQueryFunctionFactory<E>(entries: E[], properties: (string | ((entry: E) => any))[], matchingOptions: MatchingOptions): QueryFunction<E> {
+	function filterElements(queryString: string): E[] {
+		const visibleEntries: any[] = [];
+		for (let i = 0; i < entries.length; i++) {
+			const entry = entries[i];
+			for (let j = 0; j < properties.length; j++) {
+				let propertyValue = extractValue(entry, properties[j]);
+				if (!queryString || trivialMatch(propertyValue, queryString, matchingOptions).length > 0) {
+					visibleEntries.push(entry);
+					break;
+				}
+			}
+		}
+		return visibleEntries;
+	}
+
+	return function (queryString: string) {
+		return filterElements(queryString);
+	}
+}
+
+export type PropertyReadAccess<E> = (string | ((entry: E) => any));
+
+export function extractValue<E>(entry: E, property: PropertyReadAccess<E>): any {
+	if (entry == null) {
+		return null;
+	} else if (typeof property === 'string') {
+		return (entry as any)[property];
+	} else if (typeof property === 'function') {
+		return property(entry);
+	}
+}
+
+export function createProxy(delegate: any): any {
+	const proxyConstructor = function () {
+		this._trProxyDelegate = delegate;
+	};
+	proxyConstructor.prototype = delegate;
+	let proxyConstructorTypescriptHack = proxyConstructor as any;
+	return new proxyConstructorTypescriptHack();
+}
+
+export function unProxyEntry(entry: any): any {
+	return entry != null ? (entry._trProxyDelegate || entry) : null;
+}
+
+export function defaultEntryMatchingFunctionFactory(searchedPropertyNames: string[], matchingOptions: MatchingOptions) {
+	return function (entry: any, queryString: string, depth: number) {
+		return searchedPropertyNames
+			.some((propertyName: string) => {
+				const value = entry[propertyName];
+				return value != null && trivialMatch(value.toString(), queryString, matchingOptions).length > 0
+			});
+	};
+}
+
+export function defaultTreeQueryFunctionFactory(topLevelEntries: any[] | (() => any[]), entryMatchingFunction: (entry: any, queryString: string, nodeDepth: number) => boolean, childrenPropertyName: string, expandedPropertyName: string): QueryFunction<any> {
+
+	function findMatchingEntriesAndTheirAncestors(entry: any, queryString: string, nodeDepth: number) {
+		const entryProxy = createProxy(entry);
+		entryProxy[childrenPropertyName] = [];
+		entryProxy[expandedPropertyName] = false;
+		if (entry[childrenPropertyName]) {
+			for (let i = 0; i < entry[childrenPropertyName].length; i++) {
+				const child = entry[childrenPropertyName][i];
+				const childProxy = findMatchingEntriesAndTheirAncestors(child, queryString, nodeDepth + 1);
+				if (childProxy) {
+					entryProxy[childrenPropertyName].push(childProxy);
+					entryProxy[expandedPropertyName] = true;
+				}
+			}
+		}
+		let hasMatchingChildren = entryProxy[childrenPropertyName].length > 0;
+		const matchesItself = entryMatchingFunction(entry, queryString, nodeDepth);
+		if (matchesItself && !hasMatchingChildren) {
+			// still make it expandable!
+			entryProxy[childrenPropertyName] = entry[childrenPropertyName];
+		}
+		return matchesItself || hasMatchingChildren ? entryProxy : null;
+	}
+
+	return function (queryString: string) {
+		let theTopLevelEntries = typeof topLevelEntries === 'function' ? topLevelEntries() : topLevelEntries;
+		if (!queryString) {
+			return theTopLevelEntries;
+		} else {
+			const matchingEntries: any[] = [];
+			for (let i = 0; i < theTopLevelEntries.length; i++) {
+				const topLevelEntry = theTopLevelEntries[i];
+				const entryProxy = findMatchingEntriesAndTheirAncestors(topLevelEntry, queryString, 0);
+				if (entryProxy) {
+					matchingEntries.push(entryProxy);
+				}
+			}
+			return matchingEntries;
+		}
+	}
+}
+
+export function selectElementContents(domElement: Node, start: number, end: number) {
+	if (domElement == null || !document.body.contains(domElement)) {
+		return;
+	}
+	domElement = domElement.firstChild || domElement;
+	end = end || start;
+	const range = document.createRange();
+	//range.selectNodeContents(el);
+	range.setStart(domElement, start);
+	range.setEnd(domElement, end);
+	const sel = window.getSelection();
+	try {
+		sel.removeAllRanges();
+	} catch (e) {
+		// ignore (ie 11 problem, can be ignored even in ie 11)
+	}
+	sel.addRange(range);
+}
+
+export const escapeSpecialRegexCharacter = function (s: string) {
+	return s.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
+};
+
+// see http://stackoverflow.com/a/27014537/524913
+export function objectEquals(x: any, y: any): boolean {
+	'use strict';
+	if (x === null || x === undefined || y === null || y === undefined) {
+		return x === y;
+	}
+	if (x.constructor !== y.constructor) {
+		return false;
+	}
+	if (x instanceof Function) {
+		return x === y;
+	}
+	if (x instanceof RegExp) {
+		return x === y;
+	}
+	if (x === y || x.valueOf() === y.valueOf()) {
+		return true;
+	}
+	if (Array.isArray(x) && x.length !== y.length) {
+		return false;
+	}
+	if (x instanceof Date) {
+		return false;
+	}
+	if (!(x instanceof Object)) {
+		return false;
+	}
+	if (!(y instanceof Object)) {
+		return false;
+	}
+	const p = Object.keys(x);
+	return Object.keys(y).every(function (i) {
+			return p.indexOf(i) !== -1;
+		}) &&
+		p.every(function (i) {
+			return objectEquals(x[i], y[i]);
+		});
+}
+
+/**
+ * @param text
+ * @param searchString
+ * @param options matchingMode: 'prefix', 'prefix-word', 'contain', 'prefix-levenshtein', 'levenshtein';
+ *        ignoreCase: boolean
+ *        maxLevenshteinDistance: integer (number) - only for levenshtein
+ * @returns array of matchers {start, length, distance}
+ */
+export function trivialMatch(text: string, searchString: string, options?: MatchingOptions): Match[] {
+	if (text == null) {
+		return [];
+	}
+	if (typeof text !== "string" /* non-typescript or "any" usage */) {
+		text = "" + text;
+	}
+	if (!searchString) {
+		return [{
+			start: 0,
+			length: text.length
+		}];
+	}
+
+	options = <MatchingOptions>$.extend({
+		matchingMode: 'contains',
+		ignoreCase: true,
+		maxLevenshteinDistance: 3
+	}, options || null);
+
+	if (options.ignoreCase) {
+		text = text.toLowerCase();
+		searchString = searchString.toLowerCase();
+	}
+
+	function findRegexMatches(regex: RegExp) {
+		const matches: Match[] = [];
+		let match: RegExpExecArray;
+		while (match = regex.exec(text)) {
+			matches.push({
+				start: match.index,
+				length: match[0].length
+			});
+		}
+		return matches;
+	}
+
+	function findLevenshteinMatches(text: string, searchString: string) {
+		const levenshtein = new (Levenshtein as any)(text, searchString);
+		//console.log('distance between "' + text + '" and "' + searchString + '" is ' + levenshtein.distance);
+		if (levenshtein.distance <= options.maxLevenshteinDistance) {
+			return [{
+				start: 0,
+				length: searchString.length,
+				distance: levenshtein.distance
+			}];
+		} else {
+			return [];
+		}
+	}
+
+	if (options.matchingMode == 'contains') {
+		searchString = searchString.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&"); // escape all regex special chars
+		return findRegexMatches(new RegExp(searchString, "g"));
+	} else if (options.matchingMode == 'prefix') {
+		searchString = searchString.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&"); // escape all regex special chars
+		return findRegexMatches(new RegExp('^' + searchString, "g"));
+	} else if (options.matchingMode == 'prefix-word') {
+		// ATTENTION: IF YOU CHANGE THIS, MAKE SURE TO EXECUTE THE UNIT TESTS!!
+		searchString = searchString.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&"); // escape all regex special chars
+		if (searchString.charAt(0).match(/^\w/)) {
+			return findRegexMatches(new RegExp('\\b' + searchString, "g"));
+		} else {
+			// search string starts with a non-word character, so \b will possibly not match!
+			// After all, we cannot really decide, what is meant to be a word boundary in this context
+			// (e.g.: "12€" with searchString "€"), so we fall back to "contains" mode.
+			return findRegexMatches(new RegExp(searchString, "g"));
+		}
+	} else if (options.matchingMode == 'prefix-levenshtein') {
+		return findLevenshteinMatches(text.substr(0, Math.min(searchString.length, text.length)), searchString);
+	} else if (options.matchingMode == 'levenshtein') {
+		return findLevenshteinMatches(text, searchString);
+	} else {
+		throw "unknown matchingMode: " + options.matchingMode;
+	}
+}
+
+export function minimallyScrollTo(element: Element | JQuery<Element>, target: Element | JQuery) {
+	let $target = $(target);
+	$(element).each(function () {
+		const $this = $(this);
+
+		const viewPortMinY = $this.scrollTop();
+		const viewPortMaxY = viewPortMinY + $this.innerHeight();
+
+		const targetMinY = $($target).offset().top - $(this).offset().top + $this.scrollTop();
+		const targetMaxY = targetMinY + $target.height();
+
+		if (targetMinY < viewPortMinY) {
+			$this.scrollTop(targetMinY);
+		} else if (targetMaxY > viewPortMaxY) {
+			$this.scrollTop(Math.min(targetMinY, targetMaxY - $this.innerHeight()));
+		}
+
+		const viewPortMinX = $this.scrollLeft();
+		const viewPortMaxX = viewPortMinX + $this.innerWidth();
+
+		const targetMinX = $($target).offset().left - $(this).offset().left + $this.scrollLeft();
+		const targetMaxX = targetMinX + $target.width();
+
+		if (targetMinX < viewPortMinX) {
+			$this.scrollLeft(targetMinX);
+		} else if (targetMaxX > viewPortMaxX) {
+			$this.scrollLeft(Math.min(targetMinX, targetMaxX - $this.innerWidth()));
+		}
+	});
+}
+
+export function setTimeoutOrDoImmediately(f: Function, delay?: number): number {
+	if (delay != null && delay > 0) {
+		return window.setTimeout(f(), delay);
+	} else {
+		return void f();
+	}
+}
+
+export function generateUUID() {
+	return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+		const r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
+		return v.toString(16);
+	});
+}
diff --git a/teamapps-client/ts/modules/trivial-components/TrivialDateTimeField.ts b/teamapps-client/ts/modules/trivial-components/TrivialDateTimeField.ts
new file mode 100644
index 000000000..29afdda54
--- /dev/null
+++ b/teamapps-client/ts/modules/trivial-components/TrivialDateTimeField.ts
@@ -0,0 +1,642 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+
+import {EditingMode, HighlightDirection, keyCodes, selectElementContents, TrivialComponent} from "./TrivialCore";
+import {TrivialCalendarBox} from "./TrivialCalendarBox";
+import {DateSuggestionEngine, getYearMonthDayOrderForLocale} from "../formfield/datetime/DateSuggestionEngine";
+import {TimeSuggestionEngine} from "../formfield/datetime/TimeSuggestionEngine";
+import {place} from "place-to";
+import {createPopper, Instance as Popper} from '@popperjs/core';
+import {TrivialTreeBox} from "./TrivialTreeBox";
+import {DateTime} from "luxon";
+import {
+	createClockIconRenderer,
+	createDateIconRenderer,
+	createDateRenderer,
+	createTimeRenderer
+} from "../formfield/datetime/datetime-rendering";
+import {LocalDateTime} from "../datetime/LocalDateTime";
+import KeyDownEvent = JQuery.KeyDownEvent;
+import DateTimeFormatOptions = Intl.DateTimeFormatOptions;
+import {TeamAppsEvent} from "../util/TeamAppsEvent";
+
+enum Mode {
+	MODE_CALENDAR,
+	MODE_DATE_LIST,
+	MODE_TIME_LIST
+}
+
+export interface TrivialDateTimeFieldConfig {
+	locale?: string,
+	timeZone?: string,
+	dateFormat?: DateTimeFormatOptions,
+	timeFormat?: DateTimeFormatOptions,
+	autoComplete?: boolean,
+	autoCompleteDelay?: number,
+	showTrigger?: boolean,
+	editingMode?: EditingMode,
+	favorPastDates?: boolean
+}
+
+export interface LocalTime {
+	hour: number,
+	minute: number,
+	second?: number
+}
+
+export class TrivialDateTimeField implements TrivialComponent {
+
+	public readonly onFocus = new TeamAppsEvent<void>();
+	public readonly onBlur = new TeamAppsEvent<void>();
+	public readonly onChange = new TeamAppsEvent<DateTime>();
+
+	private config: TrivialDateTimeFieldConfig;
+
+	private dateIconRenderer: (localDateTime: DateTime) => string;
+	private timeIconRenderer: (localDateTime: DateTime) => string;
+	private dateRenderer: (localDateTime: DateTime) => string;
+	private timeRenderer: (localDateTime: DateTime) => string;
+
+	private dateListBox: TrivialTreeBox<DateTime>;
+	private timeListBox: TrivialTreeBox<DateTime>;
+	private calendarBox: TrivialCalendarBox;
+	private _isDropDownOpen = false;
+
+	private value: DateTime = null;
+
+	private blurCausedByClickInsideComponent = false;
+	private focused: boolean;
+	private autoCompleteTimeoutId = -1;
+	private doNoAutoCompleteBecauseBackspaceWasPressed = false;
+	private calendarBoxInitialized = false;
+	private editingMode: string;
+
+	private dropDownMode = Mode.MODE_CALENDAR;
+
+	private $dateTimeField: JQuery;
+	private $dropDown: JQuery;
+	private popper: Popper;
+
+	private $dateIconWrapper: JQuery;
+	private $dateEditor: JQuery;
+	private $timeIconWrapper: JQuery;
+	private $timeEditor: JQuery;
+	private $dropDownTargetElement: JQuery;
+
+	private $dateListBoxWrapper: JQuery;
+	private $timeListBoxWrapper: JQuery;
+	private $calendarBoxWrapper: JQuery;
+
+	private $activeEditor: JQuery;
+
+	private dateSuggestionEngine: DateSuggestionEngine;
+	private timeSuggestionEngine: TimeSuggestionEngine;
+
+	constructor(options: TrivialDateTimeFieldConfig = {}) {
+		options = options || {};
+		this.config = $.extend(<TrivialDateTimeFieldConfig>{
+			locale: "de-DE",
+			timeZone: "UTC",
+			dateFormat: {
+				year: "numeric",
+				month: "2-digit",
+				day: "2-digit"
+			},
+			timeFormat: {
+				hour: "2-digit",
+				minute: "2-digit"
+			},
+			autoComplete: true,
+			autoCompleteDelay: 0,
+			showTrigger: true,
+			editingMode: "editable", // one of 'editable', 'disabled' and 'readonly'
+			favorPastDates: false
+		}, options);
+
+		this.updateRenderers();
+
+		this.$dateTimeField = $(`<div class="tr-datetimefield tr-input-wrapper">
+            <div class="tr-editor-wrapper">
+                <div class="tr-date-icon-wrapper"></div>
+                <div class="tr-date-editor" contenteditable="true"></div>
+                <div class="tr-time-icon-wrapper"></div>
+                <div class="tr-time-editor" contenteditable="true"></div>
+            </div>
+            <div class="tr-trigger"><span class="tr-trigger-icon"></span></div>
+        </div>`);
+
+		let $editorWrapper = this.$dateTimeField.find('.tr-editor-wrapper').appendTo(this.$dateTimeField);
+		this.$dateIconWrapper = $editorWrapper.find('.tr-date-icon-wrapper');
+		this.$dateEditor = $editorWrapper.find('.tr-date-editor');
+		this.$timeIconWrapper = $editorWrapper.find('.tr-time-icon-wrapper');
+		this.$timeEditor = $editorWrapper.find('.tr-time-editor');
+
+		this.$dateIconWrapper.click(() => {
+			this.$activeEditor = this.$dateEditor;
+			this.setDropDownMode(Mode.MODE_CALENDAR);
+			selectElementContents(this.$dateEditor[0], 0, this.$dateEditor.text().length);
+			this.openDropDown();
+		});
+		this.$timeIconWrapper.click(() => {
+			this.$activeEditor = this.$timeEditor;
+			this.setDropDownMode(Mode.MODE_TIME_LIST);
+			selectElementContents(this.$timeEditor[0], 0, this.$timeEditor.text().length);
+			this.queryTime(1);
+			this.openDropDown();
+		});
+
+		this.$dateEditor.focus(() => {
+			this.$activeEditor = this.$dateEditor;
+			this.setDropDownMode(Mode.MODE_CALENDAR);
+			// if (!this.blurCausedByClickInsideComponent) {
+				selectElementContents(this.$dateEditor[0], 0, this.$dateEditor.text().length);
+				this.queryDate(0);
+				this.openDropDown();
+			// }
+		});
+		this.$timeEditor.focus(() => {
+			this.$activeEditor = this.$timeEditor;
+			this.setDropDownMode(Mode.MODE_TIME_LIST);
+			// if (!this.blurCausedByClickInsideComponent) {
+				selectElementContents(this.$timeEditor[0], 0, this.$timeEditor.text().length);
+				this.queryTime(0);
+				this.openDropDown();
+			// }
+		});
+
+
+		const $trigger = this.$dateTimeField.find('.tr-trigger');
+		$trigger.toggle(this.config.showTrigger);
+		$trigger.mousedown(() => {
+			if (this._isDropDownOpen) {
+				this.closeDropDown();
+			} else {
+				this.setDropDownMode(Mode.MODE_CALENDAR);
+				this.calendarBox.setSelectedDate(new LocalDateTime(this.value ?? DateTime.local()));
+				this.$activeEditor = this.$dateEditor;
+				selectElementContents(this.$dateEditor[0], 0, this.$dateEditor.text().length);
+				this.openDropDown();
+			}
+		});
+
+		this.$dropDownTargetElement = $("body");
+		this.$dropDown = $(`<div class="tr-dropdown" style="display: none">
+            <div class="date-listbox"></div>
+            <div class="time-listbox"></div>
+            <div class="calendarbox"></div>
+        </div>`)
+			.scroll(() => {
+				return false;
+			});
+
+		this.setEditingMode(this.config.editingMode);
+
+		this.$dateListBoxWrapper = this.$dropDown.find('.date-listbox');
+		this.dateListBox = new TrivialTreeBox<DateTime>({
+			entryRenderingFunction: this.dateRenderer
+		});
+		this.$dateListBoxWrapper.append(this.dateListBox.getMainDomElement());
+		this.dateListBox.onSelectedEntryChanged.addListener((selectedEntry: DateTime) => {
+			if (selectedEntry) {
+				this.setDate(selectedEntry, true);
+				this.dateListBox.setSelectedEntryById(null);
+				this.closeDropDown();
+			}
+		});
+		this.$timeListBoxWrapper = this.$dropDown.find('.time-listbox');
+		this.timeListBox = new TrivialTreeBox<DateTime>({
+			entryRenderingFunction: this.timeRenderer
+		});
+		this.$timeListBoxWrapper.append(this.timeListBox.getMainDomElement());
+		this.timeListBox.onSelectedEntryChanged.addListener((selectedEntry: DateTime) => {
+			if (selectedEntry) {
+				this.setTime(selectedEntry, true);
+				this.dateListBox.setSelectedEntryById(null);
+				this.closeDropDown();
+			}
+		});
+		this.$calendarBoxWrapper = this.$dropDown.find('.calendarbox');
+
+		this.$dateEditor.add(this.$timeEditor)
+			.focus(
+				() => {
+					this.setFocused(true)
+				}
+			)
+			.blur(
+				() => {
+					if (this.blurCausedByClickInsideComponent) {
+						this.blurCausedByClickInsideComponent = false;
+					} else {
+						this.updateDisplay();
+						this.closeDropDown();
+						this.setFocused(false);
+					}
+				}
+			)
+			.keydown(
+				(e: KeyDownEvent) => {
+					if (keyCodes.isModifierKey(e)) {
+						return;
+					} else if (e.which == keyCodes.tab) {
+						if (!e.shiftKey && document.activeElement == this.$dateEditor[0]
+							|| e.shiftKey && document.activeElement == this.$timeEditor[0]) {
+							this.blurCausedByClickInsideComponent = true;
+						}
+						this.selectHighlightedListBoxEntry();
+						return;
+					} else if (e.which == keyCodes.left_arrow || e.which == keyCodes.right_arrow) {
+						if (this.getActiveEditor() === this.$timeEditor && e.which == keyCodes.left_arrow && window.getSelection().focusOffset === 0) {
+							e.preventDefault();
+							selectElementContents(this.$dateEditor[0], 0, this.$dateEditor.text().length);
+						} else if (this.getActiveEditor() === this.$dateEditor && e.which == keyCodes.right_arrow && window.getSelection().anchorOffset === window.getSelection().focusOffset && window.getSelection().focusOffset === this.$dateEditor.text().length) {
+							e.preventDefault();
+							selectElementContents(this.$timeEditor[0], 0, this.$timeEditor.text().length);
+						}
+						return; // let the user navigate freely left and right...
+					}
+
+					if (e.which == keyCodes.backspace || e.which == keyCodes.delete) {
+						this.doNoAutoCompleteBecauseBackspaceWasPressed = true; // we want query results, but no autocomplete
+					}
+
+					if (e.which == keyCodes.up_arrow || e.which == keyCodes.down_arrow) {
+						this.getActiveEditor().select();
+						const direction = e.which == keyCodes.up_arrow ? -1 : 1;
+						if (this._isDropDownOpen) {
+							if (this.dropDownMode !== Mode.MODE_CALENDAR) {
+								(this.getActiveBox() as TrivialTreeBox<any>).selectNextEntry(direction);
+								this.autoCompleteIfPossible(this.config.autoCompleteDelay);
+							} else if (this.calendarBox != null) {
+								this.getActiveBox().navigate(direction === 1 ? 'down' : 'up');
+								this.autoCompleteIfPossible(this.config.autoCompleteDelay);
+							}
+						} else {
+							this.setDropDownMode(e.currentTarget === this.$dateEditor[0] ? Mode.MODE_DATE_LIST : Mode.MODE_TIME_LIST);
+							this.query(direction);
+							this.openDropDown();
+						}
+						return false; // some browsers move the caret to the beginning on up key
+					} else if (e.which == keyCodes.enter) {
+						if (this._isDropDownOpen) {
+							e.preventDefault(); // do not submit form
+							this.selectHighlightedListBoxEntry();
+							selectElementContents(this.getActiveEditor()[0], 0, this.getActiveEditor().text().length);
+							this.closeDropDown();
+						}
+					} else if (e.which == keyCodes.escape) {
+						e.preventDefault(); // prevent ie from doing its text field magic...
+						if (this._isDropDownOpen) {
+							this.updateDisplay();
+							selectElementContents(this.getActiveEditor()[0], 0, this.getActiveEditor().text().length);
+						}
+						this.closeDropDown();
+					}
+				}
+			);
+
+		[this.$dateEditor, this.$timeEditor].forEach(editor => {
+			editor[0].addEventListener("input", e => {
+				this.setDropDownMode(e.currentTarget === this.$dateEditor[0] ? Mode.MODE_DATE_LIST : Mode.MODE_TIME_LIST);
+				this.openDropDown();
+				this.query(1);
+			})
+		});
+
+		this.setValue(null);
+
+		this.$dateTimeField.add(this.$dropDown).mousedown((e) => {
+			this.blurCausedByClickInsideComponent = true;
+			setTimeout(() => this.blurCausedByClickInsideComponent = false);
+		});
+		this.$activeEditor = this.$dateEditor;
+
+		this.dateSuggestionEngine = new DateSuggestionEngine({
+			locale: this.config.locale,
+			preferredYearMonthDayOrder: getYearMonthDayOrderForLocale(this.config.locale),
+			favorPastDates: this.config.favorPastDates
+		});
+		this.timeSuggestionEngine = new TimeSuggestionEngine();
+
+
+		this.popper = createPopper(this.$dateTimeField[0], this.$dropDown[0], {
+			placement: 'bottom',
+			modifiers: [
+				{
+					name: "flip",
+					options: {
+						fallbackPlacements: ['top']
+					}
+				},
+				{
+					name: "preventOverflow"
+				},
+				{
+					name: 'dropDownCornerSmoother',
+					enabled: true,
+					phase: 'write',
+					fn: ({state}) => {
+						this.$dateTimeField[0].classList.toggle("dropdown-flipped", state.placement === 'top');
+						this.$dateTimeField[0].classList.toggle("flipped", state.placement === 'top');
+					}
+				}
+			]
+		})
+	}
+
+	private setFocused(focused: boolean) {
+		if (focused != this.focused) {
+			if (focused) {
+				this.onFocus.fire();
+			} else {
+				this.onBlur.fire();
+			}
+			this.$dateTimeField[0].classList.toggle('focus', focused);
+			this.focused = focused;
+		}
+	}
+
+	private updateRenderers() {
+		this.dateIconRenderer = createDateIconRenderer(this.config.locale);
+		this.timeIconRenderer = createClockIconRenderer();
+		this.dateRenderer = createDateRenderer(this.config.locale, this.config.dateFormat, true);
+		this.timeRenderer = createTimeRenderer(this.config.locale, this.config.timeFormat, true);
+	}
+
+	private isDropDownNeeded() {
+		return this.editingMode == 'editable';
+	}
+
+	private setDropDownMode(mode: Mode) {
+		this.dropDownMode = mode;
+		if (!this.calendarBoxInitialized && mode === Mode.MODE_CALENDAR) {
+			this.calendarBox = new TrivialCalendarBox({
+				firstDayOfWeek: 1
+			});
+			this.$calendarBoxWrapper.append(this.calendarBox.getMainDomElement());
+			this.calendarBox.setKeyboardNavigationState('month');
+			this.calendarBox.onChange.addListener(({value, timeUnitEdited}) => {
+				this.setDate(value.toZoned(this.config.timeZone));
+				if (timeUnitEdited === 'day') {
+					this.closeDropDown();
+					this.$activeEditor = this.$timeEditor;
+					selectElementContents(this.$timeEditor[0], 0, this.$timeEditor.text().length);
+					this.fireChangeEvents();
+				}
+			});
+			this.calendarBoxInitialized = true;
+		}
+		this.$calendarBoxWrapper.toggle(mode === Mode.MODE_CALENDAR);
+		this.$dateListBoxWrapper.toggle(mode === Mode.MODE_DATE_LIST);
+		this.$timeListBoxWrapper.toggle(mode === Mode.MODE_TIME_LIST);
+	}
+
+	private getActiveBox(): any /*TODO Navigateable*/ {
+		if (this.dropDownMode === Mode.MODE_CALENDAR) {
+			return this.calendarBox;
+		} else if (this.dropDownMode === Mode.MODE_DATE_LIST) {
+			return this.dateListBox;
+		} else {
+			return this.timeListBox;
+		}
+	}
+
+	private getActiveEditor() {
+		return this.$activeEditor;
+	}
+
+
+	private selectHighlightedListBoxEntry() {
+		if (this.dropDownMode === Mode.MODE_DATE_LIST || this.dropDownMode === Mode.MODE_TIME_LIST) {
+			const highlightedEntry = (this.getActiveBox() as TrivialTreeBox<any>).getSelectedEntry();
+			if (this._isDropDownOpen && highlightedEntry) {
+				if (this.getActiveEditor() === this.$dateEditor) {
+					this.setDate(highlightedEntry, true);
+				} else {
+					this.setTime(highlightedEntry, true);
+				}
+			}
+		}
+	}
+
+	private query(direction: number) {
+		if (this.$activeEditor == this.$dateEditor) {
+			this.queryDate(direction);
+		} else {
+			this.queryTime(direction)
+		}
+	}
+
+	private queryDate(highlightDirection: HighlightDirection = 1) {
+		const queryString = this.getNonSelectedEditorValue();
+		let entries: DateTime[] = this.dateSuggestionEngine
+			.generateSuggestions(queryString, LocalDateTime.fromDateTime(DateTime.fromObject({zone: this.config.timeZone})))
+			.map(s => s.toZoned(this.config.timeZone));
+		if (!entries || entries.length === 0) {
+			this.closeDropDown();
+		} else {
+			this.dateListBox.setEntries(entries);
+			this.dateListBox.highlightTextMatches(this.getNonSelectedEditorValue());
+			this.dateListBox.selectNextEntry(highlightDirection);
+			this.autoCompleteIfPossible(this.config.autoCompleteDelay);
+			if (this._isDropDownOpen) {
+				this.openDropDown(); // only for repositioning!
+			}
+		}
+	}
+
+	private queryTime(highlightDirection: HighlightDirection) {
+		const queryString = this.getNonSelectedEditorValue();
+		let entries: DateTime[] = this.timeSuggestionEngine
+			.generateSuggestions(queryString)
+			.map(s => s.toZoned(this.config.timeZone));
+		if (!entries || entries.length === 0) {
+			this.closeDropDown();
+		} else {
+			this.timeListBox.setEntries(entries);
+			this.timeListBox.highlightTextMatches(this.getNonSelectedEditorValue());
+			this.timeListBox.selectNextEntry(highlightDirection);
+			this.autoCompleteIfPossible(this.config.autoCompleteDelay);
+			if (this._isDropDownOpen) {
+				this.openDropDown(); // only for repositioning!
+			}
+		}
+	}
+
+	public getValue(): DateTime {
+		return this.value;
+	};
+
+	private fireChangeEvents() {
+		this.onChange.fire(this.getValue());
+	}
+
+	private setDate(newDateValue: DateTime, fireEvent: boolean = false) {
+		let valuesObject = {
+			year: newDateValue.year, month: newDateValue.month, day: newDateValue.day
+		};
+		this.setValue(this.value == null ? DateTime.fromObject(valuesObject) : this.value.set(valuesObject), fireEvent);
+	}
+
+	private setTime(newTimeValue: DateTime, fireEvent: boolean = false) {
+		let valuesObject = {
+			hour: newTimeValue.hour,
+			minute: newTimeValue.minute,
+			second: newTimeValue.second,
+			millisecond: newTimeValue.millisecond
+		};
+		this.setValue(this.value == null ? DateTime.fromObject(valuesObject) : this.value.set(valuesObject), fireEvent);
+	}
+
+	public setValue(value: DateTime, fireEvent: boolean = false) {
+		this.value = value;
+		this.updateDisplay();
+		if (fireEvent) {
+			this.fireChangeEvents();
+		}
+	}
+
+	private updateDisplay() {
+		if (this.value) {
+			this.$dateEditor.text(this.value.setLocale(this.config.locale).toLocaleString(this.config.dateFormat));
+			this.$dateIconWrapper.empty().append(this.dateIconRenderer(this.value));
+			this.$timeEditor.text(this.value.setLocale(this.config.locale).toLocaleString(this.config.timeFormat));
+			this.$timeIconWrapper.empty().append(this.timeIconRenderer(this.value));
+		} else {
+			this.$dateEditor.text("");
+			this.$dateIconWrapper.empty().append(this.dateIconRenderer(null));
+			this.$timeEditor.text("");
+			this.$timeIconWrapper.empty().append(this.timeIconRenderer(null));
+		}
+	}
+
+	private repositionDropDown() {
+		place(this.$dropDown[0], "top left")
+			.to(this.$dateTimeField[0], "bottom left");
+		this.popper.update();
+		this.$dropDown.width(this.$dateTimeField.width());
+	}
+
+	public openDropDown() {
+		if (this.$dropDown != null) {
+			this.$dateTimeField.addClass("open");
+			this.$dropDown.show();
+			this.repositionDropDown();
+			this._isDropDownOpen = true;
+		}
+	}
+
+	public closeDropDown() {
+		this.$dateTimeField.removeClass("open");
+		this.$dropDown.hide();
+		this._isDropDownOpen = false;
+	}
+
+	private getNonSelectedEditorValue() {
+		const editorText = this.getActiveEditor().text();
+		const selection = window.getSelection();
+		return editorText.substring(0, Math.min(selection.anchorOffset, selection.focusOffset)).replace(String.fromCharCode(160), " ");
+	}
+
+	private autoCompleteIfPossible(delay: number) {
+		if (this.config.autoComplete && (this.dropDownMode === Mode.MODE_DATE_LIST || this.dropDownMode === Mode.MODE_TIME_LIST)) {
+			clearTimeout(this.autoCompleteTimeoutId);
+
+			const listBox = this.getActiveBox() as TrivialTreeBox<any>;
+			const highlightedEntry = listBox.getSelectedEntry();
+			if (highlightedEntry && !this.doNoAutoCompleteBecauseBackspaceWasPressed) {
+				const autoCompletingEntryDisplayValue = highlightedEntry.displayString;
+				if (autoCompletingEntryDisplayValue) {
+					this.autoCompleteTimeoutId = window.setTimeout(() => {
+						const oldEditorValue = this.getNonSelectedEditorValue();
+						let newEditorValue: string;
+						if (autoCompletingEntryDisplayValue.toLowerCase().indexOf(oldEditorValue.toLowerCase()) === 0) {
+							newEditorValue = oldEditorValue + autoCompletingEntryDisplayValue.substr(oldEditorValue.length);
+						} else {
+							newEditorValue = this.getNonSelectedEditorValue();
+						}
+						this.getActiveEditor().text(newEditorValue);
+						// $editor[0].offsetHeight;  // we need this to guarantee that the editor has been updated...
+						if (this.getActiveEditor().is(":focus")) {
+							selectElementContents(this.getActiveEditor()[0], oldEditorValue.length, newEditorValue.length);
+						}
+					}, delay || 0);
+				}
+			}
+			this.doNoAutoCompleteBecauseBackspaceWasPressed = false;
+		}
+	}
+
+	public setEditingMode(newEditingMode: EditingMode) {
+		this.editingMode = newEditingMode;
+		this.$dateTimeField.removeClass("editable readonly disabled").addClass(this.editingMode);
+
+		if (newEditingMode == "editable") {
+			this.$dateEditor[0].setAttribute("contenteditable", "");
+			this.$timeEditor[0].setAttribute("contenteditable", "");
+		} else {
+			this.$dateEditor[0].removeAttribute("contenteditable");
+			this.$timeEditor[0].removeAttribute("contenteditable");
+		}
+
+		if (this.isDropDownNeeded()) {
+			this.$dropDown.appendTo(this.$dropDownTargetElement);
+		}
+	}
+
+	public setLocale(locale: string) {
+		this.config.locale = locale;
+		this.updateDisplay();
+	}
+
+	public setDateFormat(dateFormat: DateTimeFormatOptions) {
+		this.config.dateFormat = dateFormat;
+		this.updateDisplay();
+	}
+
+	public setTimeFormat(timeFormat: DateTimeFormatOptions) {
+		this.config.timeFormat = timeFormat;
+		this.updateDisplay();
+	}
+
+	setLocaleAndFormats(locale: string, dateFormat: DateTimeFormatOptions, timeFormat: DateTimeFormatOptions) {
+		this.config.locale = locale;
+		this.config.dateFormat = dateFormat;
+		this.config.timeFormat = timeFormat;
+		this.updateDisplay();
+	}
+
+	public focus() {
+		selectElementContents(this.getActiveEditor()[0], 0, this.getActiveEditor().text().length);
+	}
+
+	public isDropDownOpen(): boolean {
+		return this._isDropDownOpen;
+	}
+
+	public destroy() {
+		this.$dateTimeField.remove();
+		this.$dropDown.remove();
+	}
+
+	getMainDomElement(): HTMLElement {
+		return this.$dateTimeField[0];
+	}
+}
diff --git a/teamapps-client/ts/modules/trivial-components/TrivialTagComboBox.ts b/teamapps-client/ts/modules/trivial-components/TrivialTagComboBox.ts
new file mode 100644
index 000000000..3af977bf0
--- /dev/null
+++ b/teamapps-client/ts/modules/trivial-components/TrivialTagComboBox.ts
@@ -0,0 +1,786 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+import {
+	DEFAULT_TEMPLATES,
+	EditingMode,
+	escapeSpecialRegexCharacter,
+	generateUUID,
+	keyCodes,
+	RenderingFunction,
+	setTimeoutOrDoImmediately,
+	TrivialComponent,
+	unProxyEntry
+} from "./TrivialCore";
+import {Instance as Popper} from '@popperjs/core';
+import {DropDownComponent, SelectionDirection} from "./dropdown/DropDownComponent";
+import {elementIndex, getAutoCompleteOffValue, insertAfter, insertAtIndex, insertBefore, parseHtml, selectElementContents} from "../Common";
+import {createComboBoxPopper} from "./ComboBoxPopper";
+import {TeamAppsEvent} from "../util/TeamAppsEvent";
+
+export interface TrivialTagComboBoxConfig<E> {
+	/**
+	 * Rendering function used to display a _selected_ entry
+	 * (i.e. an entry inside the editor area of the component, not the dropdown).
+	 *
+	 * @param entry
+	 * @return HTML string
+	 * @default `wrapWithDefaultTagWrapper(entryRenderingFunction(entry))`
+	 */
+	selectedEntryRenderingFunction: RenderingFunction<E>,
+
+	/**
+	 * Performance setting. Defines the maximum number of entries until which text highlighting is performed.
+	 * Set to `0` to disable text highlighting.
+	 *
+	 * @default `100`
+	 */
+	textHighlightingEntryLimit?: number,
+
+	/**
+	 * Whether or not to provide auto-completion.
+	 *
+	 * @default `true`
+	 */
+	autoComplete?: boolean,
+
+	/**
+	 * The number of milliseconds to wait until auto-completion is performed.
+	 *
+	 * @default `0`
+	 */
+	autoCompleteDelay?: number,
+
+	/**
+	 * Used to set the editor's text when focusing the component.
+	 * Additionally used to generate an autocompletion string for the current input of the user.
+	 *
+	 * @param entry the currently selected entry in the dropdown
+	 */
+	entryToEditorTextFunction: (entry: E) => string,
+
+	/**
+	 * List of characters that, when entered by the user, trigger the creation of a tag/entry.
+	 *
+	 * @default `[",", ";"]`
+	 */
+	freeTextSeparators?: string[],
+
+	/**
+	 * Creates an entry (object) from a string entered by the user.
+	 *
+	 * @param freeText the text entered by the user
+	 * @default `{ displayValue: freeText, _isFreeTextEntry: true }`
+	 */
+	freeTextEntryFactory?: (freeText: string) => E | any,
+
+	/**
+	 * The trigger is the button on the right side of the component that can be clicket to open the dropdown.
+	 *
+	 * @default `true`
+	 */
+	showTrigger?: boolean,
+
+	editingMode?: EditingMode,
+
+	/**
+	 * It `true`, opening the dropdown will be delayed until the result callback of the [[queryFunction]] is called.
+	 *
+	 * @default `false`
+	 */
+	showDropDownOnResultsOnly?: boolean,
+
+	/**
+	 * Function deciding whether an entry entered by the user is complete or not (partial).
+	 * A partial entry is an entry that needs more input from the user's side.
+	 *
+	 * @param entry
+	 * @return `true` if the entry is considered complete, `false` if not
+	 * @default always returns `true`
+	 */
+	tagCompleteDecider?: (entry: E) => boolean,
+
+	/**
+	 * Used to merge the current partial tag with the newly selected by the user.
+	 * (composite tags feature)
+	 *
+	 * @param partialEntry the current partial entry
+	 * @param newEntryPart the entry selected/entered by the user
+	 * @return a new entry that will replace the current partial entry. This may in turn be a partial or complete entry.
+	 * @default always returns the `newEntryPart`
+	 */
+	entryMerger?: (partialEntry: E, newEntryPart: E) => E,
+
+	/**
+	 * Whether or not a partial tag should be removed when the component
+	 * looses the focus.
+	 *
+	 * @default `true`
+	 */
+	removePartialTagOnBlur?: boolean,
+
+	/**
+	 * Decides whether the user's input/selection is accepted or not.
+	 * This can serve many purposes, including
+	 *  * implementing duplicate prevention
+	 *  * limiting the number of selectable tags
+	 *  * allowing or disallowing free text entries (this was previously possible using the now removed `allowFreeText` option)
+	 *  * allowing only free text entries of a certain form
+	 *  * ...
+	 *
+	 * @param entry the entry to be accepted or not
+	 * @return `true` if the entry is accepted, `false` if not
+	 * @default accepting all non-free-text entries
+	 */
+	selectionAcceptor?: (entry: E) => boolean,
+
+	/**
+	 * HTML string defining the spinner to be displayed while entries are being retrieved.
+	 */
+	spinnerTemplate?: string
+
+	/**
+	 * This will cause tags to not directly be deleted when pressing the backspace or delete key, but first marked for deletion.
+	 */
+	twoStepDeletion?: boolean;
+
+	/**
+	 * When typing, preselect the first returned query result.
+	 */
+	preselectFirstQueryResult?: boolean,
+
+	/**
+	 * Text displayed when nothing has been selected/typed.
+	 */
+	placeholderText?: string,
+
+	dropDownMinWidth? : number,
+	dropDownMaxHeight? : number
+}
+
+export class TrivialTagComboBox<E> implements TrivialComponent {
+
+	public readonly onValueChanged = new TeamAppsEvent<E[]>();
+	public readonly onFocus = new TeamAppsEvent<void>();
+	public readonly onBlur = new TeamAppsEvent<void>();
+
+	private config: TrivialTagComboBoxConfig<E>;
+
+	private $tagComboBox: HTMLElement;
+	private $dropDown: HTMLElement;
+	private $placeholderText: HTMLElement;
+	private $editor: HTMLInputElement;
+	private $tagArea: HTMLElement;
+	private $trigger: HTMLElement;
+
+	private popper: Popper;
+	private dropDownComponent: DropDownComponent<E>;
+
+	private selectedEntries: Tag<E>[] = [];
+	private tagToBeRemoved: Tag<E> | null;
+	private currentPartialTag: Tag<E> | null;
+
+	private blurCausedByClickInsideComponent = false;
+	private autoCompleteTimeoutId = -1;
+	private doNoAutoCompleteBecauseBackspaceWasPressed = false;
+
+	private editingMode: EditingMode;
+	private _isDropDownOpen = false;
+	private focused: boolean;
+
+
+	constructor(options: TrivialTagComboBoxConfig<E>, dropDownComponent?: DropDownComponent<E>) {
+		this.config = {
+			spinnerTemplate: DEFAULT_TEMPLATES.defaultSpinnerTemplate,
+			textHighlightingEntryLimit: 100,
+			autoComplete: true,
+			autoCompleteDelay: 0,
+			freeTextEntryFactory: (freeText: string) => {
+				return {
+					displayValue: freeText,
+					id: generateUUID(),
+					_isFreeTextEntry: true
+				};
+			},
+			freeTextSeparators: [',', ';'], // TODO function here
+			tagCompleteDecider: (mergedEntry: E) => {
+				return true;
+			},
+			entryMerger: (partialEntry: E, newEntry: E) => {
+				return newEntry;
+			},
+			removePartialTagOnBlur: true,
+			selectionAcceptor: (e: E) => !(e as any)._isFreeTextEntry, // do not allow free text entries by default
+			showTrigger: true,
+			editingMode: "editable", // one of 'editable', 'disabled' and 'readonly'
+			showDropDownOnResultsOnly: false,
+			twoStepDeletion: false,
+			placeholderText: "",
+
+			...options
+		};
+		this.dropDownComponent = dropDownComponent;
+
+		this.$tagComboBox = parseHtml(`<div class="tr-tagcombobox tr-input-wrapper">
+			<div class="tr-tagcombobox-main-area">
+				<div class="placeholder-text"></div>
+				<div class="tr-tagcombobox-tagarea"></div>
+			</div>
+            <div class="tr-trigger ${this.config.showTrigger ? '' : 'hidden'}"><span class="tr-trigger-icon"></span></div>
+        </div>`);
+		this.$tagArea = this.$tagComboBox.querySelector(':scope .tr-tagcombobox-tagarea');
+		this.$placeholderText = this.$tagComboBox.querySelector(':scope .placeholder-text');
+		this.setPlaceholderText(this.config.placeholderText);
+		this.$trigger = this.$tagComboBox.querySelector(':scope .tr-trigger');
+		this.$trigger.addEventListener("mousedown", () => {
+			this.focus();
+			if (this._isDropDownOpen) {
+				this.closeDropDown();
+			} else if (this.editingMode === "editable") {
+				selectElementContents(this.$editor);
+				this.openDropDown();
+				this.query();
+			}
+		});
+		this.$dropDown = parseHtml('<div class="tr-dropdown"></div>');
+		this.$dropDown.style.minWidth = this.config.dropDownMinWidth != null ? (this.config.dropDownMinWidth + "px") : null;
+		this.$dropDown.style.maxHeight = this.config.dropDownMaxHeight != null ? (this.config.dropDownMaxHeight + "px") : null
+		this.$dropDown.addEventListener("scroll", e => {
+			e.stopPropagation();
+			e.preventDefault();
+		});
+		this.setEditingMode(this.config.editingMode);
+		this.$editor = parseHtml(`<span contenteditable="true" class="tagbox-editor" autocomplete="${getAutoCompleteOffValue()}"></span>`);
+		this.$tagArea.append(this.$editor);
+		this.$editor.classList.add("tr-tagcombobox-editor", "tr-editor");
+		this.$editor.addEventListener("focus", () => {
+			this.setFocused(true);
+			this.$tagComboBox.offsetHeight;
+			this.$editor.scrollIntoView({
+				behavior: "smooth",
+				block: "nearest",
+				inline: "nearest"
+			});
+		});
+		this.$editor.addEventListener("blur", (e: FocusEvent) => {
+			if (this.blurCausedByClickInsideComponent) {
+				this.$editor.focus();
+				// Don't just unset the blurCausedByClickInsideComponent here! See the comment with hashtag #regainFocus.
+			} else {
+				this.setFocused(false);
+				this.setTagToBeRemoved(null);
+				this.closeDropDown();
+				if (this.$editor.textContent.trim().length > 0) {
+					this.addTag(this.config.freeTextEntryFactory(this.$editor.textContent), true, e);
+				}
+				if (this.config.removePartialTagOnBlur && this.currentPartialTag != null) {
+					this.cancelPartialTag();
+				}
+				this.$editor.textContent = "";
+			}
+		});
+		this.$editor.addEventListener("keydown", (e: KeyboardEvent) => {
+			if (keyCodes.isModifierKey(e)) {
+				return;
+			} else if (e.which == keyCodes.tab || e.which == keyCodes.enter) {
+				this.setTagToBeRemoved(null);
+				const highlightedEntry = this.dropDownComponent.getValue();
+				if (this._isDropDownOpen && highlightedEntry != null) {
+					this.addTag(highlightedEntry, true, e);
+					e.preventDefault(); // do not tab away from the tag box nor insert a newline character
+				} else if (this.$editor.textContent.trim().length > 0) {
+					this.addTag(this.config.freeTextEntryFactory(this.$editor.textContent), true, e);
+					e.preventDefault(); // do not tab away from the tag box nor insert a newline character
+				} else if (this.currentPartialTag) {
+					if (e.shiftKey) { // we do not want the editor to get the focus right back, so we need to position the $editor intelligently...
+						this.doPreservingFocus(() => insertAfter(this.$editor, this.currentPartialTag.$tagWrapper));
+					} else {
+						this.doPreservingFocus(() => insertBefore(this.$editor, this.currentPartialTag.$tagWrapper));
+					}
+					this.currentPartialTag.$tagWrapper.remove();
+					this.currentPartialTag = null;
+				}
+				this.closeDropDown();
+				if (e.which == keyCodes.enter) {
+					e.preventDefault(); // under any circumstances, prevent the new line to be added to the editor!
+				}
+			} else if (e.which == keyCodes.left_arrow || e.which == keyCodes.right_arrow) {
+				this.setTagToBeRemoved(null);
+				if (this._isDropDownOpen && this.dropDownComponent.handleKeyboardInput(e)) {
+					e.preventDefault();
+					return;
+				} else if (e.which == keyCodes.left_arrow && this.$editor.textContent.length === 0 && window.getSelection().anchorOffset === 0) {
+					if (this.$editor.previousElementSibling != null) {
+						this.doPreservingFocus(() => insertBefore(this.$editor, this.$editor.previousElementSibling));
+						this.focus();
+					}
+				} else if (e.which == keyCodes.right_arrow && this.$editor.textContent.length === 0 && window.getSelection().anchorOffset === 0) {
+					if (this.$editor.nextElementSibling != null) {
+						this.doPreservingFocus(() => insertAfter(this.$editor, this.$editor.nextElementSibling));
+						this.focus();
+					}
+				}
+			} else if (e.which == keyCodes.backspace || e.which == keyCodes.delete) {
+				if (this.$editor.textContent == "") {
+					if (this.currentPartialTag != null) {
+						this.cancelPartialTag();
+						this.focus();
+					} else {
+						const tagToBeRemoved = this.selectedEntries[elementIndex(this.$editor) + (e.which == keyCodes.backspace ? -1 : 0)];
+						if (tagToBeRemoved != null) {
+							if (!this.config.twoStepDeletion || this.tagToBeRemoved === tagToBeRemoved) {
+								this.removeTag(tagToBeRemoved, true, e);
+								this.closeDropDown();
+								this.setTagToBeRemoved(null);
+							} else {
+								this.setTagToBeRemoved(tagToBeRemoved);
+							}
+						}
+					}
+				} else {
+					this.doNoAutoCompleteBecauseBackspaceWasPressed = true; // we want query results, but no autocomplete
+					setTimeout(() => this.query(0)); // asynchronously to make sure the editor has been updated
+				}
+			} else if (e.which == keyCodes.up_arrow || e.which == keyCodes.down_arrow) {
+				this.setTagToBeRemoved(null);
+				const direction = e.which == keyCodes.up_arrow ? -1 : 1;
+				if (!this._isDropDownOpen) {
+					this.query(direction);
+					this.openDropDown(); // directly open the dropdown (the user definitely wants to see it)
+				} else {
+					if (this.dropDownComponent.handleKeyboardInput(e)) {
+						if (this.dropDownComponent.getValue() != null) {
+							this.$editor.textContent = this.config.entryToEditorTextFunction(this.dropDownComponent.getValue())
+							selectElementContents(this.$editor);
+						} else {
+							this.$editor.textContent = "";
+						}
+					}
+				}
+				e.preventDefault(); // some browsers move the caret to the beginning on up key
+			} else if (e.which == keyCodes.escape) {
+				this.setTagToBeRemoved(null);
+				if (this.$editor.textContent.length > 0) {
+					this.$editor.textContent = "";
+				} else if (this.currentPartialTag != null) {
+					this.cancelPartialTag();
+					this.focus();
+				}
+				this.closeDropDown();
+			}
+		});
+		this.$editor.addEventListener("input", e => {
+			this.setTagToBeRemoved(null);
+			if (!this.config.showDropDownOnResultsOnly) {
+				this.openDropDown();
+			}
+
+			function splitStringBySeparatorChars(s: string, separatorChars: string[]) {
+				return s.split(new RegExp("[" + escapeSpecialRegexCharacter(separatorChars.join()) + "]"));
+			}
+
+			if (this.$editor.querySelector(':scope *') != null) {
+				this.$editor.innerHTML = this.$editor.textContent; // removes possible <div> or <br> or whatever the browser likes to put inside...
+			}
+			const editorValueBeforeCursor = this.getNonSelectedEditorValue();
+			if (editorValueBeforeCursor.length > 0) {
+				const tagValuesEnteredByUser = splitStringBySeparatorChars(editorValueBeforeCursor, this.config.freeTextSeparators);
+
+				for (let i = 0; i < tagValuesEnteredByUser.length - 1; i++) {
+					const value = tagValuesEnteredByUser[i].trim();
+					if (value.length > 0) {
+						this.addTag(this.config.freeTextEntryFactory(value), true, e);
+					}
+					this.$editor.textContent = tagValuesEnteredByUser[tagValuesEnteredByUser.length - 1];
+					selectElementContents(this.$editor, this.$editor.textContent.length, this.$editor.textContent.length);
+					this.closeDropDown();
+				}
+			}
+
+			this.query(this.config.preselectFirstQueryResult && this.$editor.textContent ? 1 : 0);
+		})
+		this.$editor.addEventListener("mousedown", () => {
+			if (this.editingMode === "editable") {
+				if (!this.config.showDropDownOnResultsOnly) {
+					this.openDropDown();
+				}
+				this.query();
+			}
+		});
+
+		[this.$tagComboBox, this.$dropDown].forEach(element => {
+			element.addEventListener("mousedown", () => {
+				this.blurCausedByClickInsideComponent = true;
+
+				// #regainFocus
+				// Why don't we just do a "setTimeout(() => this.blurCausedByClickInsideComponent = false);" and check for
+				// the flag in the blur event handler instead of this overly complex handling of "mouseup" and "mousedown" events?
+				// That's because in Firefox, doing $editor.focus() has no effect as long as the mouse is pressed. The
+				// document.activeElement will be document.body until the mouse is released.
+				// So when the user presses somewhere inside the tag combobox (except the $editor), the focus will be lost (blur event)
+				// and re-focusing will have no effect. We HAVE TO wait for the mouseup or mouseout event in order to re-focus.
+			}, true);
+			element.addEventListener("mouseup", () => {
+				if (this.blurCausedByClickInsideComponent) {
+					this.$editor.focus();
+					this.blurCausedByClickInsideComponent = false;
+				}
+			});
+			element.addEventListener("mouseout", () => {
+				if (this.blurCausedByClickInsideComponent) {
+					this.$editor.focus();
+					this.blurCausedByClickInsideComponent = false;
+				}
+			});
+		});
+
+		this.$dropDown.append(this.dropDownComponent.getMainDomElement());
+		this.dropDownComponent.onValueChanged.addListener((eventData) => {
+			if (eventData.finalSelection) {
+				this.setTagToBeRemoved(null);
+				this.addTag(eventData.value, true);
+				this.closeDropDown();
+			}
+		});
+
+		this.$tagArea.addEventListener("mousedown", (e) => {
+			if (this.currentPartialTag == null) {
+				let $nearestTag = this.findNearestTag(e);
+				if ($nearestTag) {
+					const tagBoundingRect = $nearestTag.getBoundingClientRect();
+					const isRightSide = e.clientX > (tagBoundingRect.left + tagBoundingRect.right) / 2;
+					if (isRightSide) {
+						this.doPreservingFocus(() => insertAfter(this.$editor, $nearestTag));
+					} else {
+						this.doPreservingFocus(() => insertBefore(this.$editor, $nearestTag));
+					}
+				}
+			}
+			this.$editor.focus();
+		});
+
+		this.$tagArea.addEventListener("click", (e) => {
+			if (this.editingMode === "editable") {
+				if (!this.config.showDropDownOnResultsOnly) {
+					this.openDropDown();
+				}
+				this.query();
+			}
+		});
+
+		this.popper = createComboBoxPopper(this.$tagComboBox, this.$dropDown, () => this.closeDropDown());
+
+		this.$editor.addEventListener("keyup", () => this.updatePlaceholderTextVisibility());
+	}
+
+	private setFocused(focused: boolean) {
+		if (focused != this.focused) {
+			if (focused) {
+				this.onFocus.fire();
+			} else {
+				this.onBlur.fire();
+			}
+			this.$tagComboBox.classList.toggle('focus', focused);
+			this.focused = focused;
+		}
+	}
+
+	private setTagToBeRemoved(tagToBeRemoved: Tag<E>) {
+		if (this.tagToBeRemoved != null) {
+			this.tagToBeRemoved.$tagWrapper.classList.remove("marked-for-removal");
+		}
+		this.tagToBeRemoved = tagToBeRemoved;
+		if (tagToBeRemoved != null) {
+			tagToBeRemoved.$tagWrapper.classList.add("marked-for-removal");
+		}
+	}
+
+	private cancelPartialTag() {
+		this.doPreservingFocus(() => insertBefore(this.$editor, this.currentPartialTag.$tagWrapper));
+		this.currentPartialTag.$tagWrapper.remove();
+		this.currentPartialTag = null;
+	}
+
+	private findNearestTag(mouseEvent: MouseEvent) {
+		let $nearestTag: HTMLElement = null;
+		let smallestDistanceX = 1000000;
+		for (let i = 0; i < this.selectedEntries.length; i++) {
+			const selectedEntry = this.selectedEntries[i];
+			const $tag = selectedEntry.$tagWrapper;
+			const tagBoundingRect = $tag.getBoundingClientRect();
+			const sameRow = mouseEvent.clientY >= tagBoundingRect.top && mouseEvent.clientY < tagBoundingRect.bottom;
+			const sameCol = mouseEvent.clientX >= tagBoundingRect.left && mouseEvent.clientX < tagBoundingRect.right;
+			const distanceX = sameCol ? 0 : Math.min(Math.abs(mouseEvent.clientX - tagBoundingRect.left), Math.abs(mouseEvent.clientX - tagBoundingRect.right));
+			if (sameRow && distanceX < smallestDistanceX) {
+				$nearestTag = $tag;
+				smallestDistanceX = distanceX;
+				if (distanceX === 0) {
+					break;
+				}
+			}
+		}
+		return $nearestTag;
+	}
+
+	private removeTag(tagToBeRemoved: Tag<E>, fireChangeEvent: boolean = false, originalEvent?: unknown) {
+		const index = this.selectedEntries.indexOf(tagToBeRemoved);
+		if (index > -1) {
+			this.selectedEntries.splice(index, 1);
+		}
+		tagToBeRemoved.$tagWrapper.remove();
+		if (fireChangeEvent) {
+			this.fireChangeEvents(this.getSelectedEntries(), originalEvent);
+		}
+
+		this.updatePlaceholderTextVisibility();
+	}
+
+	private async query(highlightDirection: SelectionDirection = 0) {
+		let gotResultsForQuery = await this.dropDownComponent.handleQuery(this.getNonSelectedEditorValue(), highlightDirection, this.getSelectedEntries()[0] ?? null);
+		this.blurCausedByClickInsideComponent = false; // we won't get any mouseout or mouseup events for entries if they get removed. so do this here proactively
+
+		this.autoCompleteIfPossible(this.config.autoCompleteDelay);
+
+		if (this.config.showDropDownOnResultsOnly && gotResultsForQuery && document.activeElement == this.$editor) {
+			this.openDropDown();
+		}
+	}
+
+	private fireChangeEvents(entries: E[], originalEvent: unknown) {
+		this.onValueChanged.fire(entries.map(unProxyEntry));
+	}
+
+	private addTag(entry: E, fireEvent = false, originalEvent?: unknown, forceAcceptance?: boolean) {
+		if (entry == null) {
+			return; // do nothing
+		}
+		if (!forceAcceptance && !this.config.selectionAcceptor(entry)) {
+			return;
+		}
+
+		let wasPartial = !!this.currentPartialTag;
+		const editorIndex = wasPartial ? elementIndex(this.currentPartialTag.$tagWrapper) : elementIndex(this.$editor);
+		if (wasPartial) {
+			this.doPreservingFocus(() => this.$tagArea.append(this.$editor)); // make sure the event handlers don't get detached when removing the partial tag
+			this.currentPartialTag.$tagWrapper.remove();
+			entry = this.config.entryMerger(this.currentPartialTag.entry, entry);
+		}
+
+		const $entry = parseHtml(this.config.selectedEntryRenderingFunction(entry));
+		const $tagWrapper = parseHtml('<div class="tr-tagcombobox-tag"></div>')
+		$tagWrapper.append($entry);
+
+		const tag = new Tag(entry, $tagWrapper, $entry);
+
+		if (this.config.tagCompleteDecider(entry)) {
+			this.selectedEntries.splice(editorIndex, 0, tag);
+			this.currentPartialTag = null;
+		} else {
+			this.currentPartialTag = tag;
+		}
+
+		this.doPreservingFocus(() => insertAtIndex(this.$tagArea, $tagWrapper, editorIndex));
+
+		let removeButton = $entry.querySelector('.tr-remove-button');
+		if (removeButton != null) {
+			removeButton.addEventListener("click", (e) => {
+				this.removeTag(tag, true, e);
+				return false;
+			});
+		}
+
+		if (this.config.tagCompleteDecider(entry)) {
+			this.doPreservingFocus(() => insertAtIndex(this.$tagArea, this.$editor, editorIndex + 1));
+		} else {
+			this.doPreservingFocus(() => $entry.querySelector('.tr-editor').append(this.$editor));
+		}
+
+		this.$editor.textContent = "";
+		if (document.activeElement == this.$editor) {
+			selectElementContents(this.$editor, 0, 0); // make sure Chrome displays a cursor after changing the content (bug...)
+		}
+
+		if (this.config.tagCompleteDecider(entry) && fireEvent) {
+			this.fireChangeEvents(this.getSelectedEntries(), originalEvent);
+		}
+
+		this.updatePlaceholderTextVisibility();
+	}
+
+	private repositionDropDown() {
+		this.popper.update();
+	}
+
+	private parentElement: Element;
+
+	public openDropDown() {
+		if (this.isDropDownNeeded()) {
+			if (this.getMainDomElement().parentElement !== this.parentElement) {
+				this.popper.destroy();
+				this.popper = createComboBoxPopper(this.$tagComboBox, this.$dropDown, () => this.closeDropDown());
+				this.parentElement = this.getMainDomElement().parentElement;
+			}
+			this.$tagComboBox.classList.add("open");
+			this.repositionDropDown();
+			this._isDropDownOpen = true;
+		}
+	}
+
+	public closeDropDown() {
+		this.$tagComboBox.classList.remove("open");
+		this._isDropDownOpen = false;
+	}
+
+	private getNonSelectedEditorValue() {
+		const editorText = this.$editor.textContent.replace(String.fromCharCode(160), " ");
+		const selection = window.getSelection();
+		if (selection.anchorOffset != selection.focusOffset) {
+			return editorText.substring(0, Math.min((window.getSelection() as any).baseOffset, window.getSelection().focusOffset));
+		} else {
+			return editorText;
+		}
+	}
+
+	private autoCompleteIfPossible(delay?: number) {
+		if (this.config.autoComplete) {
+			clearTimeout(this.autoCompleteTimeoutId);
+			const dropDownValue = this.dropDownComponent.getValue();
+			if (dropDownValue && !this.doNoAutoCompleteBecauseBackspaceWasPressed) {
+				this.autoCompleteTimeoutId = setTimeoutOrDoImmediately(() => {
+					const currentEditorValue = this.getNonSelectedEditorValue();
+					const entryAsString = this.config.entryToEditorTextFunction(dropDownValue);
+					if (entryAsString.toLowerCase().indexOf(("" + currentEditorValue).toLowerCase()) === 0) {
+						this.$editor.textContent = currentEditorValue + entryAsString.substr(currentEditorValue.length);
+						if (document.activeElement == this.$editor) {
+							selectElementContents(this.$editor, currentEditorValue.length, entryAsString.length);
+						}
+					}
+					this.repositionDropDown(); // the auto-complete might cause a line-break, so the dropdown would cover the editor...
+				}, delay || 0);
+			}
+			this.doNoAutoCompleteBecauseBackspaceWasPressed = false;
+		}
+	}
+
+	private isDropDownNeeded() {
+		return this.editingMode == 'editable';
+	}
+
+	private doPreservingFocus(f: Function) {
+		const hadFocus = document.activeElement == this.$editor;
+		let oldValueOfBlurCausedByClickInsideComponent = this.blurCausedByClickInsideComponent;
+		this.blurCausedByClickInsideComponent = true; // prevent triggering the onBlur event etc...
+		try {
+			return f.call(this);
+		} finally {
+			this.blurCausedByClickInsideComponent = oldValueOfBlurCausedByClickInsideComponent;
+			const hasFocus = document.activeElement == this.$editor;
+			if (hadFocus && !hasFocus) {
+				this.$editor.focus();
+			}
+		}
+	}
+
+	public setEditingMode(newEditingMode: EditingMode) {
+		this.editingMode = newEditingMode;
+		this.$tagComboBox.classList.remove("editable", "readonly", "disabled");
+		this.$tagComboBox.classList.add(this.editingMode);
+		if (this.isDropDownNeeded()) {
+			this.$tagComboBox.append(this.$dropDown);
+		}
+	}
+
+	public setSelectedEntries(entries: E[], forceAcceptance?: boolean) {
+		this.selectedEntries
+			.slice() // copy the array as it gets changed during the forEach loop
+			.forEach((e) => this.removeTag(e, false));
+		if (entries) {
+			for (let i = 0; i < entries.length; i++) {
+				this.addTag(entries[i], false, null, forceAcceptance);
+			}
+		}
+	}
+
+	public getSelectedEntries(): E[] {
+		return this.selectedEntries.map(tag => tag.entry);
+	};
+
+	public getDropDownComponent(): DropDownComponent<E> {
+		return this.dropDownComponent;
+	}
+
+	public getCurrentPartialTag() {
+		return this.currentPartialTag;
+	}
+
+	public focus() {
+		this.$editor.focus();
+		selectElementContents(this.$editor, 0, this.$editor.textContent.length); // we need to do this, else the cursor does not appear in Chrome when navigating using left and right keys...
+	}
+
+	public getEditor(): Element {
+		return this.$editor;
+	}
+
+	public getDropDown() {
+		return this.$dropDown;
+	};
+
+	public setShowClearButton(showClearButton: boolean) {
+		// TODO
+	}
+
+	public setShowTrigger(showTrigger: boolean) {
+		this.config.showTrigger = showTrigger;
+		this.$trigger.classList.toggle('hidden', !showTrigger);
+	}
+
+	public isDropDownOpen(): boolean {
+		return this._isDropDownOpen;
+	}
+
+	public destroy() {
+		this.$tagComboBox.remove();
+		this.$dropDown.remove();
+	};
+
+	getMainDomElement(): HTMLElement {
+		return this.$tagComboBox;
+	}
+
+	private updatePlaceholderTextVisibility() {
+		this.$placeholderText.classList.toggle("hidden", this.selectedEntries.length > 0 || !!this.$editor.textContent)
+	}
+
+	private setPlaceholderText(placeholderText: string) {
+		this.$placeholderText.innerText = placeholderText ?? "";
+	}
+}
+
+class Tag<E> {
+	entry: E;
+	$tagWrapper: HTMLElement;
+	$entry: HTMLElement;
+
+	constructor(entry: E, $tagWrapper: HTMLElement, $entry: HTMLElement) {
+		this.entry = entry;
+		this.$tagWrapper = $tagWrapper;
+		this.$entry = $entry;
+	}
+}
diff --git a/teamapps-client/ts/modules/trivial-components/TrivialTree.ts b/teamapps-client/ts/modules/trivial-components/TrivialTree.ts
new file mode 100644
index 000000000..4099d32e1
--- /dev/null
+++ b/teamapps-client/ts/modules/trivial-components/TrivialTree.ts
@@ -0,0 +1,193 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+
+import {ContextMenuEvent, TrivialTreeBox, TrivialTreeBoxConfig} from "./TrivialTreeBox";
+import {
+	DEFAULT_TEMPLATES,
+	TrivialComponent,
+	keyCodes,
+	unProxyEntry
+} from "./TrivialCore";
+import KeyDownEvent = JQuery.KeyDownEvent;
+import {TeamAppsEvent} from "../util/TeamAppsEvent";
+
+export interface TrivialTreeConfig<E> extends TrivialTreeBoxConfig<E> {
+    directSelectionViaArrowKeys?: boolean
+}
+
+export class TrivialTree<E> implements TrivialComponent{
+
+    private config: TrivialTreeConfig<E>;
+
+    public readonly onSelectedEntryChanged = new TeamAppsEvent<E>();
+    public readonly onContextMenu = new TeamAppsEvent<ContextMenuEvent<E>>();
+    public readonly onNodeExpansionStateChanged = new TeamAppsEvent<{node: E, expanded: boolean}>();
+
+    private treeBox: TrivialTreeBox<E>;
+    private entries: E[];
+    private selectedEntryId: any;
+
+    private $componentWrapper: JQuery;
+
+    constructor(options: TrivialTreeConfig<E>) {
+	    let defaultIdFunction = (entry:E) => entry ? (entry as any).id : null;
+	    this.config = $.extend({
+            idFunction: defaultIdFunction,
+            inputValueFunction: defaultIdFunction,
+            childrenProperty: "children",
+		    lazyChildrenFlag: "hasLazyChildren",
+            lazyChildrenQueryFunction: (node: E, resultCallback: Function) => {
+                resultCallback([])
+            },
+            expandedProperty: 'expanded',
+            spinnerTemplate: DEFAULT_TEMPLATES.defaultSpinnerTemplate,
+            noEntriesTemplate: DEFAULT_TEMPLATES.defaultNoEntriesTemplate,
+            entries: null,
+            matchingOptions: {
+                matchingMode: 'contains',
+                ignoreCase: true,
+                maxLevenshteinDistance: 2
+            },
+            directSelectionViaArrowKeys: false,
+            performanceOptimizationSettings: {
+                toManyVisibleItemsRenderDelay: 750,
+                toManyVisibleItemsThreshold: 75
+            }
+        }, options);
+
+        this.entries = this.config.entries;
+
+        this.$componentWrapper = $('<div class="tr-tree" tabindex="0"></div>');
+        this.$componentWrapper.keydown((e:KeyDownEvent) => {
+            if (e.which == keyCodes.up_arrow || e.which == keyCodes.down_arrow) {
+                const direction = e.which == keyCodes.up_arrow ? -1 : 1;
+                if (this.entries != null) {
+                    if (this.config.directSelectionViaArrowKeys) {
+                        this.treeBox.selectNextEntry(direction, false, false, () => true, true, e);
+                    } else {
+                        this.treeBox.selectNextEntry(direction, false);
+                    }
+                    return false; // some browsers move the caret to the beginning on up key
+                }
+            } else if (e.which == keyCodes.left_arrow || e.which == keyCodes.right_arrow) {
+                this.treeBox.setSelectedNodeExpanded(e.which == keyCodes.right_arrow);
+            } else if (e.which == keyCodes.enter) {
+                this.treeBox.setSelectedEntryById(this.config.idFunction(this.treeBox.getSelectedEntry()), true);
+            }
+        });
+
+        this.treeBox = new TrivialTreeBox(this.config);
+        this.$componentWrapper.append(this.treeBox.getMainDomElement());
+        this.treeBox.onNodeExpansionStateChanged.addListener((e)=> {
+            this.onNodeExpansionStateChanged.fire(e);
+        });
+        this.treeBox.onSelectedEntryChanged.addListener(() => {
+            const selectedTreeBoxEntry = this.treeBox.getSelectedEntry();
+            if (selectedTreeBoxEntry) {
+                this.setSelectedEntry(selectedTreeBoxEntry);
+            }
+        });
+        this.treeBox.onContextMenu.addListener(e => this.onContextMenu.fire(e))
+
+        this.setSelectedEntry((this.config.selectedEntryId !== undefined && this.config.selectedEntryId !== null) ? this.findEntryById(this.config.selectedEntryId) : null);
+    }
+
+    public updateEntries(newEntries: E[]) {
+        this.entries = newEntries;
+        this.treeBox.setEntries(newEntries);
+    }
+
+    private findEntries(filterFunction: ((node: E) => boolean)) {
+        let findEntriesInSubTree = (node: E, listOfFoundEntries: E[]) => {
+            if (filterFunction.call(this, node)) {
+                listOfFoundEntries.push(node);
+            }
+            if ((node as any)[this.config.childrenProperty]) {
+                for (let i = 0; i < (node as any)[this.config.childrenProperty].length; i++) {
+                    const child = (node as any)[this.config.childrenProperty][i];
+                    findEntriesInSubTree(child, listOfFoundEntries);
+                }
+            }
+        };
+
+        const matchingEntries: E[] = [];
+        for (let i = 0; i < this.entries.length; i++) {
+            const rootEntry = this.entries[i];
+            findEntriesInSubTree(rootEntry, matchingEntries);
+        }
+        return matchingEntries;
+    }
+
+    private findEntryById(id: string | number) {
+        return this.findEntries((entry: E) => {
+            return this.config.idFunction(entry) === id
+        })[0];
+    }
+
+    private setSelectedEntry(entry: E) {
+        this.selectedEntryId = entry ? this.config.idFunction(entry) : null;
+        this.fireChangeEvents(entry);
+    }
+
+    private fireChangeEvents(entry: E) {
+        this.$componentWrapper.trigger("change");
+        this.onSelectedEntryChanged.fire(unProxyEntry(entry));
+    }
+
+    public getSelectedEntry(): E {
+    	return unProxyEntry(this.treeBox.getSelectedEntry());
+    };
+
+    public updateChildren(parentNodeId: any, children: E[]) {
+        this.treeBox.updateChildren(parentNodeId, children)
+    };
+
+    public updateNode(node: E) {
+        this.treeBox.updateNode(node)
+    };
+
+    public removeNode(nodeId: string | number) {
+        this.treeBox.removeNode(nodeId)
+    };
+
+    public addNode(parentNodeId: string | number, node: E) {
+        this.treeBox.addNode(parentNodeId, node)
+    };
+
+    public addOrUpdateNode(parentNodeId: string | number, node: E, recursiveUpdate = false) {
+        this.treeBox.addOrUpdateNode(parentNodeId, node, recursiveUpdate);
+    }
+
+    public selectNodeById(nodeId: any) {
+        this.treeBox.setSelectedEntryById(nodeId);
+    };
+
+    public getTreeBox() {
+        return this.treeBox;
+    }
+
+    public destroy() {
+        this.$componentWrapper.remove();
+    };
+
+    getMainDomElement(): HTMLElement {
+        return this.$componentWrapper[0];
+    }
+}
diff --git a/teamapps-client/ts/modules/trivial-components/TrivialTreeBox.ts b/teamapps-client/ts/modules/trivial-components/TrivialTreeBox.ts
new file mode 100644
index 000000000..1a07f7f71
--- /dev/null
+++ b/teamapps-client/ts/modules/trivial-components/TrivialTreeBox.ts
@@ -0,0 +1,692 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+
+import {DEFAULT_TEMPLATES, generateUUID, HighlightDirection, MatchingOptions, TrivialComponent} from "./TrivialCore";
+import {highlightMatches} from "./util/highlight";
+import {addDelegatedEventListener, closestAncestor, insertAfter, insertBefore, parseHtml, toggleElementCollapsed} from "../Common";
+import {TeamAppsEvent} from "../util/TeamAppsEvent";
+
+export interface TrivialTreeBoxConfig<E> {
+	/**
+	 * Calculates a unique value for an entry. Used to identify nodes in the tree.
+	 */
+	idFunction?: (entry: E) => number | string,
+
+	/**
+	 * Rendering function used to display a _suggested_ entry
+	 * (i.e. an entry displayed in the dropdown).
+	 *
+	 * @param entry
+	 * @param depth the depth of the entry in the tree
+	 * @return HTML string
+	 * @default Using the `image2LinesTemplate` from `TrivialCore`.
+	 */
+	entryRenderingFunction: (entry: E, depth: number) => string,
+
+	/**
+	 * The initially selected entry. (Caution: use `selectedEntries` for `TrivialTagBox`).
+	 */
+	selectedEntry?: E,
+
+	/**
+	 * The initial list of suggested entries.
+	 */
+	entries?: E[],
+
+	/**
+	 * Used for highlighting suggested entries. Also used by the default filtering functions int `TrivialCore`.
+	 *
+	 * @default `{ matchingMode: 'contains', ignoreCase: true, maxLevenshteinDistance: 1 }`
+	 */
+	matchingOptions?: MatchingOptions,
+
+	/**
+	 * Property used to retrieve the children of a node.
+	 *
+	 * @default `'children'`
+	 */
+	childrenProperty?: string,
+
+	/**
+	 * Property name or function used to determine whether a node has children that need to be lazy-loaded.
+	 *
+	 * @default `'hasLazyChildren'`
+	 */
+	lazyChildrenFlag?: string | ((entry: E) => boolean),
+
+	/**
+	 * Function for retrieving children of a node.
+	 *
+	 * @param node
+	 * @param resultCallback
+	 */
+	lazyChildrenQueryFunction?: (entry: E) => Promise<E[]>,
+
+	/**
+	 * Property used to determine whether a node is expanded or not.
+	 *
+	 * Note: This is subject to being replaced by a function in future versions.
+	 * @default `'expanded'`
+	 */
+	expandedProperty?: string,
+
+	/**
+	 * The ID of the initially selected entry in the tree.
+	 */
+	selectedEntryId?: number | string,
+
+	/**
+	 * Animation duration in milliseconds for expand and collapse animations.
+	 */
+	animationDuration?: number,
+
+	/**
+	 * Whether or not to show the expander controls for parent nodes.
+	 */
+	showExpanders?: boolean,
+
+	/**
+	 * Whether or not to expand a node when it is selected.
+	 */
+	toggleExpansionOnClick?: boolean,
+
+	/**
+	 * Special mode that allows only one path to be expanded.
+	 * Expands all ancestor nodes of the selected node, as well as the selected node itself.
+	 * Collapses all others.
+	 */
+	enforceSingleExpandedPath?: boolean // only one path is expanded at any time
+
+	/**
+	 * Html string defining what to display when the list of results from the `queryFunction` is empty.
+	 */
+	noEntriesTemplate?: string,
+
+	/**
+	 * HTML string defining the spinner to be displayed while lazy children are being retrieved.
+	 */
+	spinnerTemplate?: string,
+
+	/**
+	 * The indentation in pixels used.
+	 *
+	 * If null, use the default value given by the CSS rules.
+	 * If number, indent each depth/level by the given number of pixels.
+	 * If array, indent each depth by the corresponding value in the array.
+	 * If function, indent each depth by the result of the given function (with depth starting at 0).
+	 */
+	indentation?: null | number | number[] | ((depth: number) => number),
+
+	/**
+	 * Function that decides whether a node can be selected.
+	 */
+	selectableDecider?: (entry: E) => boolean,
+
+	selectOnHover?: boolean,
+
+}
+
+export type ContextMenuEvent<E> = {
+	event: MouseEvent,
+	entry: E
+}
+
+class EntryWrapper<E> {
+	public entry: E;
+	public $element: HTMLElement;
+	public children: EntryWrapper<E>[];
+	public readonly depth: number;
+	private _id: string | number;
+
+	constructor(entry: E, public readonly parent: EntryWrapper<E>, private config: TrivialTreeBoxConfig<E> & {
+		elementFactory?: (entry: EntryWrapper<E>) => HTMLElement
+	}) {
+		this.entry = entry;
+		this.depth = parent != null ? parent.depth + 1 : 0;
+		let children: E[] = (this.entry as any)[config.childrenProperty];
+		let hasLazyChildren: boolean = (typeof config.lazyChildrenFlag === 'string') ? !!(this.entry as any)[config.lazyChildrenFlag] : config.lazyChildrenFlag(entry);
+		if (children == null && hasLazyChildren) {
+			this.children = null;
+		} else if (children == null) {
+			this.children = [];
+		} else {
+			this.children = children.map(child => new EntryWrapper(child, this, config));
+		}
+		let id = config.idFunction(entry);
+		this._id = id != null ? id : generateUUID();
+	}
+
+	public get id() {
+		return this._id;
+	}
+
+	public async lazyLoadChildren(): Promise<E[]> {
+		let entries = await this.config.lazyChildrenQueryFunction(this.entry);
+		this.children = entries.map(child => new EntryWrapper(child, this, this.config));
+		return entries;
+	}
+
+	public render() {
+		if (!this.$element) {
+			$(this.config.elementFactory(this));
+		}
+		return this.$element;
+	}
+
+	public isLeaf(): boolean {
+		return this.children != null && this.children.length === 0;
+	}
+
+	public get expanded(): boolean {
+		return !!(this.entry as any)[this.config.expandedProperty] || false;
+	}
+
+	public set expanded(expanded: boolean) {
+		(this.entry as any)[this.config.expandedProperty] = expanded;
+		if (this.$element) {
+			this.$element.classList.toggle("expanded", expanded);
+		}
+	}
+
+	public get $treeEntryAndExpanderWrapper() {
+		return this.$element?.querySelector(":scope > .tr-tree-entry-and-expander-wrapper");
+	}
+
+	public get $childrenWrapper(): HTMLElement {
+		return this.$element?.querySelector(":scope > .tr-tree-entry-children-wrapper")
+	}
+}
+
+export class TrivialTreeBox<E> implements TrivialComponent {
+
+	private config: TrivialTreeBoxConfig<E>;
+
+	public readonly onSelectedEntryChanged = new TeamAppsEvent<E>();
+	public readonly onContextMenu = new TeamAppsEvent<ContextMenuEvent<E>>();
+	public readonly onNodeExpansionStateChanged = new TeamAppsEvent<{node: E, expanded: boolean}>();
+
+	private $componentWrapper: HTMLElement;
+	private $tree: HTMLElement;
+
+	private entries: EntryWrapper<E>[];
+	private selectedEntryId: string | number;
+
+	constructor(options: TrivialTreeBoxConfig<E>) {
+		this.config = $.extend({
+			idFunction: (entry: E) => entry ? (entry as any).id : null,
+			childrenProperty: "children",
+			lazyChildrenFlag: "hasLazyChildren",
+			lazyChildrenQueryFunction: function (node: E, resultCallback: Function) {
+				resultCallback((node as any).children || []);
+			},
+			expandedProperty: 'expanded',
+			spinnerTemplate: DEFAULT_TEMPLATES.defaultSpinnerTemplate,
+			noEntriesTemplate: DEFAULT_TEMPLATES.defaultNoEntriesTemplate,
+			entries: null,
+			selectedEntryId: null,
+			matchingOptions: {
+				matchingMode: 'contains',
+				ignoreCase: true,
+				maxLevenshteinDistance: 2
+			},
+			animationDuration: 70,
+			showExpanders: false,
+			toggleExpansionOnClick: false, // open expandable nodes when they are selected
+			enforceSingleExpandedPath: false, // only one path is expanded at any time
+			indentation: null,
+			selectableDecider: () => true,
+			selectOnHover: false
+		}, options);
+
+		this.$componentWrapper = parseHtml('<div class="tr-treebox"></div>');
+		this.$componentWrapper.classList.toggle("hide-expanders", !this.config.showExpanders);
+
+		this.setEntries(this.config.entries || []);
+
+		this.setSelectedEntryById(this.config.selectedEntryId);
+	}
+
+	private createEntryElement(entry: EntryWrapper<E>) {
+		const $outerEntryWrapper = parseHtml(`<div class="tr-tree-entry-outer-wrapper ${(entry.isLeaf() ? '' : 'has-children')}" data-id="${entry.id}"></div>`);
+		entry.$element = $outerEntryWrapper;
+		const $entryAndExpanderWrapper = $('<div class="tr-tree-entry-and-expander-wrapper"></div>')
+			.appendTo($outerEntryWrapper);
+		($entryAndExpanderWrapper[0] as any).trivialEntryWrapper = entry;
+		for (let k = 0; k < entry.depth; k++) {
+			let indentationWidth: number;
+			if (typeof this.config.indentation === 'number') {
+				indentationWidth = this.config.indentation;
+			} else if (Array.isArray(this.config.indentation)) {
+				indentationWidth = this.config.indentation[Math.min(k, this.config.indentation.length - 1)];
+			} else if (typeof this.config.indentation === 'function') {
+				indentationWidth = this.config.indentation(k);
+			}
+			$entryAndExpanderWrapper.append(`<div class="tr-indent-spacer" ${indentationWidth != null ? `style="width:${indentationWidth}px"` : ''}></div>`);
+		}
+		$('<div class="tr-tree-expander"></div>')
+			.appendTo($entryAndExpanderWrapper);
+		let $entry = $(this.config.entryRenderingFunction(entry.entry, entry.depth));
+		$entry.addClass("tr-tree-entry filterable-item").appendTo($entryAndExpanderWrapper);
+
+		if (entry.id === this.selectedEntryId) {
+			$entryAndExpanderWrapper.addClass("tr-selected-entry");
+		}
+
+		if (!entry.isLeaf()) {
+			this.create$ChildrenWrapper(entry);
+		}
+		this.setNodeExpanded(entry, entry.expanded, false);
+		return $outerEntryWrapper;
+	}
+
+	private create$ChildrenWrapper(entry: EntryWrapper<E>): HTMLElement {
+		let $childrenWrapper: HTMLElement = entry.$childrenWrapper;
+		if ($childrenWrapper == null) {
+			$childrenWrapper = parseHtml('<div class="tr-tree-entry-children-wrapper"></div>');
+			entry.$element.append($childrenWrapper);
+			if (entry.children != null) {
+				if (entry.expanded) {
+					for (let i = 0; i < entry.children.length; i++) {
+						$childrenWrapper.append(this.createEntryElement(entry.children[i]));
+					}
+				}
+			} else {
+				$childrenWrapper.append(this.config.spinnerTemplate);
+			}
+		}
+		return $childrenWrapper;
+	}
+
+	private setNodeExpanded(node: EntryWrapper<E>, expanded: boolean, animate: boolean, fireEvent = true) {
+		let expansionStateChange = node.expanded != expanded;
+
+		if (expanded && this.config.enforceSingleExpandedPath) {
+			const currentlyExpandedNodes = this.findEntries((n) => {
+				return n.expanded;
+			});
+			const newExpandedPath = this.findPathToFirstMatchingNode((n) => {
+				return n === node;
+			});
+			for (let i = 0; i < currentlyExpandedNodes.length; i++) {
+				const currentlyExpandedNode = currentlyExpandedNodes[i];
+				if (newExpandedPath.indexOf(currentlyExpandedNode) === -1) {
+					this.setNodeExpanded(currentlyExpandedNode, false, true, fireEvent);
+				}
+			}
+		}
+
+		node.expanded = expanded;
+
+		if (node.$element) {
+			let nodeHasUnrenderedChildren = (node: EntryWrapper<E>) => {
+				return node.children && node.children.some((child: EntryWrapper<E>) => {
+					return !child.$element || !$.contains(document.documentElement, child.$element);
+				});
+			};
+
+			if (expanded && node.children == null) {
+				node.lazyLoadChildren()
+					.then((children) => this.setChildren(node, children));
+			} else if (expanded && nodeHasUnrenderedChildren(node)) {
+				this.renderChildren(node);
+			}
+			if (expanded) {
+				this.minimallyScrollTo(node.$element);
+			}
+
+			const $childrenWrapper: HTMLElement = node.$childrenWrapper;
+			if ($childrenWrapper != null) {
+				toggleElementCollapsed($childrenWrapper, !expanded, animate ? this.config.animationDuration : 0);
+			}
+		}
+
+		if (expansionStateChange && fireEvent) {
+			this.onNodeExpansionStateChanged.fire({node: node.entry, expanded: expanded});
+		}
+	}
+
+	private setChildren(parentEntryWrapper: EntryWrapper<E>, children: E[]) {
+		parentEntryWrapper.children = children.map(child => this.createEntryWrapper(child, parentEntryWrapper));
+		this.renderChildren(parentEntryWrapper);
+	}
+
+	private renderChildren(node: EntryWrapper<E>) {
+		const $childrenWrapper = this.create$ChildrenWrapper(node);
+		$childrenWrapper.innerHTML = ''; // remove the spinner!
+		if (node.children && node.children.length > 0) {
+			node.children.forEach(child => {
+				$childrenWrapper.append(child.render());
+			});
+		} else {
+			node.$element.classList.remove('has-children', 'expanded');
+		}
+	}
+
+	public setEntries(newEntries: E[]) {
+		newEntries = newEntries || [];
+		this.entries = newEntries.map(e => this.createEntryWrapper(e, null));
+
+		this.$tree && this.$tree.remove();
+		this.$tree = parseHtml('<div class="tr-tree-entryTree"></div>');
+		addDelegatedEventListener(this.$tree, ".tr-tree-expander", "mousedown", (element, ev) => {
+			ev.stopPropagation();
+			ev.stopImmediatePropagation();
+		}, true);
+		addDelegatedEventListener(this.$tree, ".tr-tree-expander", "click", (element, ev) => {
+			let entryWrapper = (closestAncestor(element, ".tr-tree-entry-and-expander-wrapper") as any).trivialEntryWrapper as EntryWrapper<E>;
+			this.setNodeExpanded(entryWrapper, !entryWrapper.expanded, true);
+		});
+		addDelegatedEventListener(this.$tree, ".tr-tree-entry-and-expander-wrapper", "mousedown", (element, ev) => {
+			let entryWrapper = (element as any).trivialEntryWrapper as EntryWrapper<E>;
+			if (this.config.selectableDecider(entryWrapper.entry)) {
+				this.setSelectedEntry(entryWrapper, null, true);
+			}
+			if (entryWrapper && this.config.toggleExpansionOnClick) {
+				this.setNodeExpanded(entryWrapper, !entryWrapper.expanded, true);
+			}
+		});
+		addDelegatedEventListener(this.$tree, ".tr-tree-entry-and-expander-wrapper", "contextmenu", (element, ev) => {
+			let entryWrapper = (element as any).trivialEntryWrapper as EntryWrapper<E>;
+			this.onContextMenu.fire({event: ev, entry: entryWrapper.entry});
+			ev.preventDefault();
+		});
+
+		addDelegatedEventListener(this.$tree, ".tr-tree-entry-and-expander-wrapper", "mouseenter", (element, ev) => {
+			let entryWrapper = (element as any).trivialEntryWrapper as EntryWrapper<E>;
+			if (this.config.selectOnHover && this.config.selectableDecider(entryWrapper.entry)) {
+				this.setSelectedEntry(entryWrapper, ev, false);
+			}
+		}, true);
+
+		if (this.entries.length > 0) {
+			this.entries.forEach(entry => this.$tree.append(entry.render()));
+		} else {
+			this.$tree.append(parseHtml(this.config.noEntriesTemplate));
+		}
+		this.$componentWrapper.append(this.$tree);
+
+		const selectedEntry = this.findEntryById(this.selectedEntryId);
+		if (selectedEntry) {
+			// selected entry in filtered tree? then mark it as selected!
+			this.markSelectedEntry(selectedEntry);
+		}
+	}
+
+	private createEntryWrapper(e: E, parent: EntryWrapper<E>) {
+		return new EntryWrapper(e, parent, {
+			...this.config,
+			elementFactory: (entry: EntryWrapper<E>) => this.createEntryElement(entry)
+		});
+	}
+
+	private findEntries(filterFunction: ((node: EntryWrapper<E>) => boolean), visibleOnly: boolean = false) {
+		let findEntriesInSubTree = (node: EntryWrapper<E>, listOfFoundEntries: EntryWrapper<E>[]) => {
+			if (filterFunction.call(this, node)) {
+				listOfFoundEntries.push(node);
+			}
+			if (!visibleOnly || node.expanded) {
+				if (node.children) {
+					for (let i = 0; i < node.children.length; i++) {
+						const child = node.children[i];
+						findEntriesInSubTree(child, listOfFoundEntries);
+					}
+				}
+			}
+		};
+
+		const matchingEntries: EntryWrapper<E>[] = [];
+		for (let i = 0; i < this.entries.length; i++) {
+			const rootEntry = this.entries[i];
+			findEntriesInSubTree(rootEntry, matchingEntries);
+		}
+		return matchingEntries;
+	}
+
+	private findPathToFirstMatchingNode(predicateFunction: ((node: EntryWrapper<E>, path: EntryWrapper<E>[]) => boolean)): EntryWrapper<E>[] {
+		let searchInSubTree = (node: EntryWrapper<E>, path: EntryWrapper<E>[]): EntryWrapper<E>[] => {
+			if (predicateFunction.call(this, node, path)) {
+				path.push(node);
+				return path;
+			}
+			if (node.children) {
+				const newPath = path.slice();
+				newPath.push(node);
+				for (let i = 0; i < node.children.length; i++) {
+					const child = node.children[i];
+					const result = searchInSubTree(child, newPath);
+					if (result) {
+						return result;
+					}
+				}
+			}
+		};
+
+		for (let i = 0; i < this.entries.length; i++) {
+			const rootEntry = this.entries[i];
+			let path = searchInSubTree(rootEntry, []);
+			if (path) {
+				return path;
+			}
+		}
+	}
+
+	private findEntryById(id: string | number): EntryWrapper<E> {
+		if (id == null) {
+			return null;
+		}
+		return this.findEntries((entry) => {
+			return entry.id === id
+		})[0];
+	}
+
+	private setSelectedEntry(entry: EntryWrapper<E>, originalEvent?: unknown, fireEvents = false) {
+		this.selectedEntryId = entry && entry.id;
+		this.markSelectedEntry(entry);
+		if (fireEvents) {
+			this.fireChangeEvents(entry);
+		}
+	}
+
+	public setSelectedEntryById(nodeId: number | string, fireEvents = false) {
+		let entry = this.findEntryById(nodeId);
+		this.setSelectedEntry(entry, null, fireEvents);
+	}
+
+	private minimallyScrollTo($entryWrapper: HTMLElement) {
+		$entryWrapper.querySelector(":scope > .tr-tree-entry-and-expander-wrapper").scrollIntoView({
+			// behavior: "smooth",
+			block: "nearest"
+		});
+	}
+
+	private markSelectedEntry(entry: EntryWrapper<E>) {
+		this.$tree.querySelectorAll(":scope .tr-selected-entry").forEach(e => e.classList.remove("tr-selected-entry"));
+		if (entry && entry.$element) {
+			const $entryWrapper = entry.$element.querySelector(':scope > .tr-tree-entry-and-expander-wrapper');
+			$entryWrapper.classList.add("tr-selected-entry");
+		}
+	}
+
+	private fireChangeEvents(entry: EntryWrapper<E>) {
+		this.onSelectedEntryChanged.fire(entry.entry);
+	}
+
+	public selectNextEntry(direction: HighlightDirection, rollover = false, selectableOnly = true, matcher: (entry: E) => boolean = () => true, fireEvents = false, originalEvent?: unknown): E {
+		const nextMatchingEntry = this.getNextVisibleEntry(this.getSelectedEntryWrapper(), direction, rollover, selectableOnly, matcher);
+		if (nextMatchingEntry != null) {
+			this.setSelectedEntry(nextMatchingEntry, originalEvent, fireEvents);
+			this.minimallyScrollTo(nextMatchingEntry.$element);
+		}
+		return nextMatchingEntry?.entry;
+	}
+
+	private getNextVisibleEntry(currentEntry: EntryWrapper<E>, direction: HighlightDirection, rollover: boolean, selectableOnly = true, entryMatcher: (entry: E) => boolean = () => true) {
+		let newSelectedElementIndex: number;
+		const visibleEntriesAsList = this.findEntries((entry) => {
+			if (!entry.$element) {
+				return false;
+			} else {
+				return ((!selectableOnly || this.config.selectableDecider(entry.entry)) && entryMatcher(entry.entry)) || entry === currentEntry;
+			}
+		}, true);
+		if (visibleEntriesAsList == null || visibleEntriesAsList.length == 0) {
+			return null;
+		} else if (currentEntry == null && direction > 0) {
+			newSelectedElementIndex = -1 + direction;
+		} else if (currentEntry == null && direction < 0) {
+			newSelectedElementIndex = visibleEntriesAsList.length + direction;
+		} else {
+			const currentSelectedElementIndex = visibleEntriesAsList.indexOf(currentEntry);
+			if (rollover) {
+				newSelectedElementIndex = (currentSelectedElementIndex + visibleEntriesAsList.length + direction) % visibleEntriesAsList.length;
+			} else {
+				newSelectedElementIndex = Math.max(0, Math.min(visibleEntriesAsList.length - 1, currentSelectedElementIndex + direction));
+			}
+		}
+		return visibleEntriesAsList[newSelectedElementIndex];
+	}
+
+	public highlightTextMatches(searchString: string) {
+		this.$tree.remove();
+		for (let i = 0; i < this.entries.length; i++) {
+			const entry = this.entries[i];
+			const $entryElement = entry.$element.querySelectorAll(':scope .tr-tree-entry');
+			highlightMatches($entryElement, searchString, this.config.matchingOptions)
+		}
+		this.$componentWrapper.append(this.$tree);
+	}
+
+	public getSelectedEntry(): E | null {
+		let selectedEntryWrapper = this.getSelectedEntryWrapper();
+		return selectedEntryWrapper != null ? selectedEntryWrapper.entry : null;
+	}
+
+	private getSelectedEntryWrapper() {
+		return (this.selectedEntryId !== undefined && this.selectedEntryId !== null) ? this.findEntryById(this.selectedEntryId) : null;
+	}
+
+	public revealSelectedEntry(animate: boolean = false) {
+		let selectedEntry = this.getSelectedEntryWrapper();
+		if (!selectedEntry) {
+			return;
+		}
+		let currentEntry = selectedEntry;
+		while (currentEntry = currentEntry.parent) {
+			this.setNodeExpanded(currentEntry, true, animate);
+		}
+		this.minimallyScrollTo(selectedEntry.$element);
+	}
+
+	public setSelectedNodeExpanded(expanded: boolean) {
+		let selectedEntry = this.getSelectedEntryWrapper();
+		if (!selectedEntry || selectedEntry.isLeaf()) {
+			return false;
+		} else {
+			let wasExpanded = selectedEntry.expanded;
+			this.setNodeExpanded(selectedEntry, expanded, true);
+			return !wasExpanded != !expanded;
+		}
+	}
+
+	public updateChildren(parentNodeId: string | number, children: E[]) {
+		const node = this.findEntryById(parentNodeId);
+		if (node) {
+			this.setChildren(node, children);
+		} else {
+			console.error("Could not set the children of unknown node with id " + parentNodeId);
+		}
+	};
+
+	public updateNode(node: E, recursive: boolean = false) {
+		const oldNode = this.findEntryById(this.config.idFunction(node));
+		let shouldBeExpanded = (node as any)[this.config.expandedProperty];
+		const expandedStateChanged = oldNode.expanded !== shouldBeExpanded;
+		let parentNode = oldNode.parent;
+		let newEntryWrapper: EntryWrapper<E>;
+		if (recursive) {
+			newEntryWrapper = this.createEntryWrapper(node, parentNode);
+		} else {
+			oldNode.entry = node;
+			let $entry = parseHtml(this.config.entryRenderingFunction(node, oldNode.depth));
+			$entry.classList.add("tr-tree-entry", "filterable-item");
+			let $oldEntry = oldNode.$element.querySelector(":scope .tr-tree-entry");
+			insertBefore($entry, $oldEntry);
+			$oldEntry.remove();
+			newEntryWrapper = oldNode;
+		}
+		if (parentNode) {
+			parentNode.children[parentNode.children.indexOf(oldNode)] = newEntryWrapper;
+		} else {
+			this.entries[this.entries.indexOf(oldNode)] = newEntryWrapper;
+		}
+		if (newEntryWrapper != oldNode) {
+			insertAfter(newEntryWrapper.render(), oldNode.$element);
+			oldNode.$element.remove();
+		}
+		if (expandedStateChanged) {
+			this.setNodeExpanded(newEntryWrapper, shouldBeExpanded as boolean, true)
+		}
+	};
+
+	public removeNode(nodeId: string | number) {
+		const childNode = this.findEntryById(nodeId);
+		if (childNode) {
+			const parentNode = childNode.parent;
+			if (parentNode) {
+				parentNode.children.splice(parentNode.children.indexOf(childNode), 1);
+			} else {
+				this.entries.splice(this.entries.indexOf(childNode), 1);
+			}
+			childNode.$element.remove();
+		}
+	};
+
+	public addNode(parentNodeId: number | string, node: E) {
+		const parentNode = this.findEntryById(parentNodeId);
+		if (parentNode.children == null) {
+			parentNode.children = [];
+		}
+		let newEntryWrapper = this.createEntryWrapper(node, parentNode);
+		let $childrenWrapper = this.create$ChildrenWrapper(parentNode);
+		if (parentNode.children.length === 0) {
+			$childrenWrapper.innerHTML = ''; // remove the spinner!
+		}
+		parentNode.children.push(newEntryWrapper);
+		$childrenWrapper.append(newEntryWrapper.render());
+		parentNode.$element.classList.add('has-children');
+	};
+
+	public addOrUpdateNode(parentNodeId: number | string, node: E, recursiveUpdate = false) {
+		let existingNode = this.findEntryById(this.config.idFunction(node));
+		if (existingNode != null) {
+			this.updateNode(node, recursiveUpdate);
+		} else {
+			this.addNode(parentNodeId, node);
+		}
+	}
+
+	public destroy() {
+		this.$componentWrapper.remove();
+	};
+
+	getMainDomElement(): HTMLElement {
+		return this.$componentWrapper;
+	}
+}
diff --git a/teamapps-client/ts/modules/trivial-components/TrivialUnitBox.ts b/teamapps-client/ts/modules/trivial-components/TrivialUnitBox.ts
new file mode 100644
index 000000000..4c6f41f18
--- /dev/null
+++ b/teamapps-client/ts/modules/trivial-components/TrivialUnitBox.ts
@@ -0,0 +1,492 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+import {
+	DEFAULT_RENDERING_FUNCTIONS,
+	DEFAULT_TEMPLATES,
+	defaultListQueryFunctionFactory,
+	EditingMode,
+	HighlightDirection,
+	keyCodes,
+	QueryFunction,
+	TrivialComponent,
+	unProxyEntry
+} from "./TrivialCore";
+import {Instance as Popper} from '@popperjs/core';
+import {TrivialTreeBox, TrivialTreeBoxConfig} from "./TrivialTreeBox";
+import {NumberParser} from "../util/NumberParser";
+import {DropDownComponent} from "./dropdown/DropDownComponent";
+import {parseHtml} from "../Common";
+import {TeamAppsEvent} from "../util/TeamAppsEvent";
+import {TreeBoxDropdown} from "./dropdown/TreeBoxDropdown";
+import {createComboBoxPopper} from "./ComboBoxPopper";
+import {BigDecimal} from "../util/BigDecimalString";
+
+export interface TrivialUnitBoxConfig<U> extends TrivialTreeBoxConfig<U> {
+	numberFormatFunction: (entry: U) => Intl.NumberFormat,
+	unitDisplayPosition?: 'left' | 'right',
+	allowNullAmount?: boolean,
+	selectedEntryRenderingFunction: (entry: U) => string,
+	amount?: number,
+	queryFunction?: QueryFunction<U>,
+	queryOnNonNumberCharacters?: boolean,
+	openDropdownOnEditorClick?: boolean,
+	showTrigger?: boolean,
+	editingMode?: EditingMode,
+}
+
+export type TrivialUnitBoxChangeEvent<U> = {
+	unitEntry: U,
+	amount: BigDecimal
+}
+
+export class TrivialUnitBox<U> implements TrivialComponent {
+
+	private config: TrivialUnitBoxConfig<U>;
+
+	public readonly onChange = new TeamAppsEvent<TrivialUnitBoxChangeEvent<U>>();
+	public readonly onSelectedEntryChanged = new TeamAppsEvent<U>();
+	public readonly onFocus = new TeamAppsEvent<void>();
+	public readonly onBlur = new TeamAppsEvent<void>();
+
+	private selectedEntry: U;
+	private clickInsideEditorWasWhileNotHavingFocus = false;
+	private blurCausedByClickInsideComponent = false;
+	private $editor: HTMLInputElement;
+	private $unitBox: HTMLElement;
+	private $selectedEntryAndTriggerWrapper: HTMLElement;
+	private $selectedEntryWrapper: HTMLElement;
+	private $dropDown: HTMLElement;
+	private $trigger: HTMLElement;
+	private usingDefaultQueryFunction: boolean;
+
+	private numberParser: NumberParser;
+	private popper: Popper;
+
+	private dropDownComponent: DropDownComponent<U>;
+	private editingMode: EditingMode;
+	private dropDownOpen = false;
+
+
+	constructor(options: TrivialUnitBoxConfig<U>) {
+		this.config = $.extend(<TrivialUnitBoxConfig<U>>{
+			numberFormatFunction: entry => new Intl.NumberFormat("en-US", {
+				useGrouping: true,
+				minimumFractionDigits: 2,
+				maximumFractionDigits: 2
+			}),
+			unitDisplayPosition: 'right', // right or left
+			allowNullAmount: true,
+			entryRenderingFunction: DEFAULT_RENDERING_FUNCTIONS.currency2Line,
+			selectedEntryRenderingFunction: DEFAULT_RENDERING_FUNCTIONS.currencySingleLineShort,
+			noEntriesTemplate: DEFAULT_TEMPLATES.defaultNoEntriesTemplate,
+			entries: null,
+			queryFunction: null, // defined below...
+			queryOnNonNumberCharacters: true,
+			openDropdownOnEditorClick: false,
+			showTrigger: true,
+			matchingOptions: {
+				matchingMode: 'prefix-word',
+				ignoreCase: true,
+				maxLevenshteinDistance: 2
+			},
+			editingMode: 'editable', // one of 'editable', 'disabled' and 'readonly'
+		}, options);
+
+		if (!this.config.queryFunction) {
+			this.config.queryFunction = defaultListQueryFunctionFactory(this.config.entries || [], ["code", "name", "symbol"], this.config.matchingOptions);
+			this.usingDefaultQueryFunction = true;
+		}
+
+		this.$unitBox = parseHtml(`<div class="tr-unitbox tr-input-wrapper">
+			<input type="text" autocomplete="false"></input>
+			<div class="tr-unitbox-selected-entry-and-trigger-wrapper">
+				<div class="tr-unitbox-selected-entry-wrapper"></div>
+				<div class="tr-trigger"><span class="tr-trigger-icon"></div>
+			</div>
+		</div>`);
+		this.$editor = this.$unitBox.querySelector(':scope input');
+		this.$selectedEntryAndTriggerWrapper = this.$unitBox.querySelector(':scope .tr-unitbox-selected-entry-and-trigger-wrapper');
+		this.$selectedEntryWrapper = this.$selectedEntryAndTriggerWrapper.querySelector(':scope .tr-unitbox-selected-entry-wrapper')
+		this.$trigger = this.$selectedEntryAndTriggerWrapper.querySelector(':scope .tr-trigger');
+		if (!this.config.showTrigger) {
+			this.$trigger.classList.add('hidden');
+		}
+		this.$selectedEntryAndTriggerWrapper.addEventListener('mousedown', () => {
+			if (this.dropDownOpen) {
+				this.closeDropDown();
+			} else if (this.editingMode === "editable") {
+				this.openDropDown();
+				this.$editor.focus();
+				this.$editor.selectionStart = this.$editor.selectionEnd = this.config.unitDisplayPosition == "left" ? 0 : Number.MAX_SAFE_INTEGER;
+				this.query();
+			}
+		});
+		this.$dropDown = parseHtml('<div class="tr-dropdown"></div>');
+		this.$dropDown.addEventListener("scroll", e => {
+			e.stopPropagation();
+			e.preventDefault();
+		});
+		this.setEditingMode(this.config.editingMode);
+
+		this.$editor.classList.add("tr-unitbox-editor", "tr-editor")
+		this.$editor.addEventListener("focus", (e) => {
+			if (this.editingMode !== "editable") {
+				this.$editor.blur(); // must not get focus!
+				return false;
+			}
+			if (this.blurCausedByClickInsideComponent) {
+				// do nothing!
+			} else {
+				this.onFocus.fire();
+				this.$unitBox.classList.add('focus');
+				this.cleanupEditorValue();
+			}
+		});
+		this.$editor.addEventListener("blur", () => {
+			if (this.blurCausedByClickInsideComponent) {
+				this.$editor.focus();
+			} else {
+				this.onBlur.fire();
+				this.$unitBox.classList.remove('focus');
+				this.formatEditorValue();
+				this.closeDropDown();
+			}
+		});
+		this.$editor.addEventListener("keydown", (e: KeyboardEvent) => {
+			const usedByDropdownComponent = this.dropDownComponent.handleKeyboardInput(e)
+			if (keyCodes.isModifierKey(e)) {
+				return;
+			} else if (e.key === "Tab" || e.key === "Enter") {
+				e.key === "Enter" && e.preventDefault(); // do not submit form
+				const highlightedEntry = this.dropDownComponent.getValue();
+				if (this.dropDownOpen && highlightedEntry) {
+					this.setSelectedEntry(highlightedEntry, false, e);
+				}
+				this.closeDropDown();
+				this.fireChangeEvents();
+				return;
+			} else if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+				const direction = e.key === "ArrowUp" ? -1 : 1;
+				if (!this.dropDownOpen) {
+					this.openDropDown();
+					this.query(direction);
+				}
+				e.preventDefault(); // some browsers move the caret to the beginning on up key
+			} else if (e.key === "Escape") {
+				this.closeDropDown();
+				this.cleanupEditorValue();
+			}
+		});
+		this.$editor.addEventListener("keyup", (e) => {
+			if (keyCodes.specialKeys.indexOf(e.which) != -1
+				&& e.key !== "Backspace"
+				&& e.key !== "Delete") {
+				return; // ignore
+			}
+			const hasDoubleDecimalSeparator = new RegExp("(?:\\" + this.getDecimalSeparator() + ".*)" + "\\" + this.getDecimalSeparator(), "g").test(this.$editor.value as string);
+			if (hasDoubleDecimalSeparator) {
+				this.cleanupEditorValue();
+			}
+			if (this.config.queryOnNonNumberCharacters) {
+				if (this.getQueryString().length > 0) {
+					this.openDropDown();
+					this.query(1);
+				} else {
+					this.closeDropDown();
+				}
+			}
+		});
+		this.$editor.addEventListener("mousedown", () => {
+			this.clickInsideEditorWasWhileNotHavingFocus = (document.activeElement != this.$editor);
+			if (this.editingMode === "editable") {
+				if (this.config.openDropdownOnEditorClick) {
+					this.openDropDown();
+					this.query();
+				}
+			}
+		});
+		this.$editor.addEventListener("click", ev => {
+			if (this.clickInsideEditorWasWhileNotHavingFocus) {
+				this.$editor.select()
+			}
+		});
+		this.$editor.addEventListener("change", () => {
+			this.fireChangeEvents();
+		});
+
+		[this.$unitBox, this.$dropDown].forEach(el => {
+			el.addEventListener("mousedown", () => {
+				if (document.activeElement == this.$editor) {
+					this.blurCausedByClickInsideComponent = true;
+				}
+			});
+			el.addEventListener("mouseup", () => {
+				if (this.blurCausedByClickInsideComponent) {
+					this.$editor.focus();
+					this.blurCausedByClickInsideComponent = false;
+				}
+			});
+			el.addEventListener("mouseout", () => {
+				if (this.blurCausedByClickInsideComponent) {
+					this.$editor.focus();
+					this.blurCausedByClickInsideComponent = false;
+				}
+			});
+		});
+
+		const listBox = new TrivialTreeBox({
+			selectOnHover: true,
+			...this.config
+		});
+		this.dropDownComponent = new TreeBoxDropdown({
+			queryFunction: this.config.queryFunction,
+			preselectionMatcher: query => true,
+			textHighlightingEntryLimit: 100
+		}, listBox);
+		this.$dropDown.append(this.dropDownComponent.getMainDomElement());
+		this.dropDownComponent.onValueChanged.addListener(({value, finalSelection}) => {
+			if (value && finalSelection) {
+				this.setSelectedEntry(value, true);
+				this.closeDropDown();
+			}
+		});
+
+		this.setUnitDisplayPosition(this.config.unitDisplayPosition);
+		if (this.config.amount != null) {
+			this.$editor.value = this.config.amount.toString();
+		}
+		this.formatEditorValue();
+		this.setSelectedEntry(this.config.selectedEntry || null, false, null);
+
+
+		this.popper = createComboBoxPopper(this.$unitBox, this.$dropDown, () => this.closeDropDown);
+	}
+
+	private getNumberFormat() {
+		return this.config.numberFormatFunction(this.selectedEntry);
+	}
+
+	private getDecimalSeparator() {
+		return NumberParser.getDecimalSeparatorForLocale(this.getNumberFormat().resolvedOptions().locale);
+	}
+
+	private getThousandsSeparator() {
+		return NumberParser.getGroupSeparatorForLocale(this.getNumberFormat().resolvedOptions().locale);
+	}
+
+	private getNumerals() {
+		return NumberParser.getNumeralsForLocale(this.getNumberFormat().resolvedOptions().locale);
+	}
+
+	private getMinFractionDigits() {
+		return this.getNumberFormat().resolvedOptions().minimumFractionDigits;
+	}
+
+	private getMaxFractionDigits() {
+		return this.getNumberFormat().resolvedOptions().maximumFractionDigits;
+	}
+
+	private getQueryString() {
+		return (this.$editor.value || "").toString().replace(new RegExp(`[${this.getDecimalSeparator()}${this.getThousandsSeparator()}${this.getNumerals().join("")}\\s]`, "g"), '').trim();
+	}
+
+	private getEditorValueLocalNumberPart(fillupDecimals = false): string {
+		const rawNumber = (this.$editor.value as string || "").replace(new RegExp(`[^${this.getDecimalSeparator()}${this.getNumerals().join("")}]`, "g"), '').trim();
+		const decimalSeparatorIndex = rawNumber.indexOf(this.getDecimalSeparator());
+
+		let integerPart: string;
+		let fractionalPart: string;
+		if (decimalSeparatorIndex !== -1) {
+			integerPart = rawNumber.substring(0, decimalSeparatorIndex);
+			fractionalPart = rawNumber.substring(decimalSeparatorIndex + 1, rawNumber.length).replace(/\D/g, '');
+		} else {
+			integerPart = rawNumber;
+			fractionalPart = "";
+		}
+
+		if (integerPart.length == 0 && fractionalPart.length == 0) {
+			return "";
+		} else {
+			if (fillupDecimals && fractionalPart.length < this.getMinFractionDigits()) {
+				fractionalPart = fractionalPart + this.getNumerals()[0].repeat(this.getMinFractionDigits() - fractionalPart.length);
+			}
+			if (fractionalPart.length > this.getMaxFractionDigits()) {
+				fractionalPart =  fractionalPart.substr(0, this.getMaxFractionDigits())
+			}
+			return integerPart + (fractionalPart.length > 0 ? this.getDecimalSeparator() + fractionalPart : "");
+		}
+	}
+
+	private localNumberStringToBigDecimal(localizedNumber: string): BigDecimal {
+		if (localizedNumber == null || localizedNumber.length == 0) {
+			return null;
+		}
+		let numerals = this.getNumerals();
+		return BigDecimal.of(localizedNumber
+			.replace(this.getThousandsSeparator(), '')
+			.replace(this.getDecimalSeparator(), '.')
+			.split('').map(c => c == "." ? "." : "" + numerals.indexOf(c))
+			.join(""));
+
+	}
+
+	private async query(highlightDirection?: HighlightDirection) {
+		let gotResultsForQuery = await this.dropDownComponent.handleQuery(this.getQueryString(), highlightDirection, this.getSelectedEntry());
+		if (gotResultsForQuery && document.activeElement == this.$editor) {
+			this.openDropDown();
+		}
+	}
+
+	private fireSelectedEntryChangedEvent() {
+		this.onSelectedEntryChanged.fire(this.selectedEntry);
+	}
+
+	private fireChangeEvents() {
+		this.onChange.fireIfChanged({
+			unitEntry: unProxyEntry(this.selectedEntry),
+			amount: this.getAmount()
+		});
+	}
+
+	public setSelectedEntry(entry: U, fireEvent?: boolean, originalEvent?: unknown) {
+		this.selectedEntry = entry;
+		this.onChange.resetChangeValue();
+		const $selectedEntry = parseHtml(this.config.selectedEntryRenderingFunction(entry));
+		$selectedEntry.classList.add("tr-combobox-entry");
+		this.$selectedEntryWrapper.innerHTML = "";
+		this.$selectedEntryWrapper.append($selectedEntry);
+
+		this.cleanupEditorValue();
+		if (document.activeElement !== this.$editor) {
+			this.formatEditorValue();
+		}
+		if (fireEvent) {
+			this.fireSelectedEntryChangedEvent();
+			this.fireChangeEvents();
+		}
+	}
+
+	private formatEditorValue() {
+		let amount = this.orFallback(this.localNumberStringToBigDecimal(this.getEditorValueLocalNumberPart()));
+		this.$editor.value = amount != null ? amount.format(this.getNumberFormat(), this.$editor == document.activeElement) : "";
+	}
+
+	private orFallback(amount: BigDecimal): BigDecimal {
+		if (amount == null && !this.config.allowNullAmount) {
+			return BigDecimal.of("0");
+		}
+		return amount;
+	}
+
+	private cleanupEditorValue() {
+		if (this.$editor.value) {
+			this.$editor.value = this.getEditorValueLocalNumberPart(true);
+		}
+	}
+
+	private parentElement: Element;
+
+	public openDropDown() {
+		if (this.getMainDomElement().parentElement !== this.parentElement) {
+			this.popper.destroy();
+			this.popper = createComboBoxPopper(this.$unitBox, this.$dropDown, () => this.closeDropDown());
+			this.parentElement = this.getMainDomElement().parentElement;
+		}
+		if (!this.dropDownOpen) {
+			this.$unitBox.classList.add("open");
+			this.popper.update();
+			this.dropDownOpen = true;
+		}
+	}
+
+	public closeDropDown() {
+		this.$unitBox.classList.remove("open");
+		this.dropDownOpen = false;
+	}
+
+	public getAmount(): BigDecimal {
+		const editorValueNumberPart = this.getEditorValueLocalNumberPart();
+		if (editorValueNumberPart.length === 0 && this.config.allowNullAmount) {
+			return null;
+		} else if (editorValueNumberPart.length === 0) {
+			return BigDecimal.of("0");
+		} else {
+			return this.localNumberStringToBigDecimal(this.getEditorValueLocalNumberPart());
+		}
+	}
+
+	private isDropDownNeeded() {
+		return this.editingMode == 'editable' && (this.config.entries && this.config.entries.length > 0 || !this.usingDefaultQueryFunction || this.config.showTrigger);
+	}
+
+	public setEditingMode(newEditingMode: EditingMode) {
+		this.editingMode = newEditingMode;
+		this.$unitBox.classList.remove("editable", "readonly", "disabled");
+		this.$unitBox.classList.add(this.editingMode);
+		this.$editor.readOnly = newEditingMode !== "editable";
+		if (this.isDropDownNeeded()) {
+			this.$unitBox.append(this.$dropDown);
+		}
+	}
+
+	public getSelectedEntry(): U {
+		if (this.selectedEntry == null) {
+			return null;
+		} else {
+			return unProxyEntry(this.selectedEntry);
+		}
+	}
+
+	public setAmount(amount: BigDecimal) {
+		amount = this.orFallback(amount);
+		this.$editor.value = amount != null ? amount.format(this.getNumberFormat()): "";
+		this.onChange.resetChangeValue();
+	}
+
+	public focus() {
+		this.$editor.select();
+	}
+
+	public getEditor(): Element {
+		return this.$editor;
+	}
+
+	public setUnitDisplayPosition(unitDisplayPosition: "left" | "right") {
+		this.config.unitDisplayPosition = unitDisplayPosition;
+		this.$unitBox.classList.toggle('unit-display-left', unitDisplayPosition === 'left');
+		this.$unitBox.classList.toggle('unit-display-right', unitDisplayPosition === 'right');
+	}
+
+	public isDropDownOpen(): boolean {
+		return this.dropDownOpen;
+	}
+
+	public destroy() {
+		this.$unitBox.remove();
+		this.$dropDown.remove();
+	}
+
+	getMainDomElement(): HTMLElement {
+		return this.$unitBox;
+	}
+
+}
+
+
diff --git a/teamapps-client/ts/modules/trivial-components/dropdown/CalendarBoxDropdown.ts b/teamapps-client/ts/modules/trivial-components/dropdown/CalendarBoxDropdown.ts
new file mode 100644
index 000000000..543cb3f48
--- /dev/null
+++ b/teamapps-client/ts/modules/trivial-components/dropdown/CalendarBoxDropdown.ts
@@ -0,0 +1,83 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+import {TeamAppsEvent} from "../../util/TeamAppsEvent";
+import {TrivialCalendarBox} from "../TrivialCalendarBox";
+import {NavigationDirection} from "../TrivialCore";
+import {LocalDateTime} from "../../datetime/LocalDateTime";
+import {DropDownComponent, SelectionDirection} from "./DropDownComponent";
+
+export class CalendarBoxDropdown implements DropDownComponent<LocalDateTime> {
+
+	public readonly onValueChanged: TeamAppsEvent<{ value: LocalDateTime; finalSelection: boolean }> = new TeamAppsEvent();
+
+
+	constructor(
+		private calendarBox: TrivialCalendarBox,
+		private queryFunction: (query: string) => Promise<LocalDateTime | null> | LocalDateTime | null,
+		public defaultDate: LocalDateTime
+	) {
+		this.calendarBox.onChange.addListener(event => {
+			this.onValueChanged.fire({value: event.value, finalSelection: event.timeUnitEdited == "day"});
+		});
+	}
+
+	getMainDomElement(): HTMLElement {
+		return this.calendarBox.getMainDomElement();
+	}
+
+	setValue(value: LocalDateTime): void {
+		this.calendarBox.setSelectedDate(value ?? this.defaultDate ?? LocalDateTime.local());
+	}
+
+	getValue(): LocalDateTime {
+		return this.calendarBox.getSelectedDate();
+	}
+
+	handleKeyboardInput(event: KeyboardEvent): boolean {
+		if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].indexOf(event.code) !== -1) {
+			this.calendarBox.navigateTimeUnit("day", event.code.substr(5).toLowerCase() as NavigationDirection);
+			this.onValueChanged.fire({value: this.calendarBox.getSelectedDate(), finalSelection: false});
+			return true;
+		}
+	}
+
+	async handleQuery(query: string, selectionDirection: SelectionDirection, currentComboBoxValue: LocalDateTime): Promise<boolean> {
+		if (!query && currentComboBoxValue != null) {
+			this.calendarBox.setSelectedDate(currentComboBoxValue);
+		} else {
+			let suggestedDate = await this.queryFunction(query);
+			if (suggestedDate != null) {
+				this.calendarBox.setSelectedDate(suggestedDate);
+				return true;
+			} else {
+				return false;
+			}
+		}
+	}
+
+	destroy(): void {
+		this.calendarBox.destroy();
+	}
+
+	getComponent(): TrivialCalendarBox {
+		return this.calendarBox;
+	}
+
+}
diff --git a/teamapps-client/ts/modules/trivial-components/dropdown/DropDownComponent.ts b/teamapps-client/ts/modules/trivial-components/dropdown/DropDownComponent.ts
new file mode 100644
index 000000000..fc82d4452
--- /dev/null
+++ b/teamapps-client/ts/modules/trivial-components/dropdown/DropDownComponent.ts
@@ -0,0 +1,53 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+import {TrivialComponent} from "../TrivialCore";
+import {TeamAppsEvent} from "../../util/TeamAppsEvent";
+
+export interface DropDownComponent<E> extends TrivialComponent {
+
+	readonly onValueChanged: TeamAppsEvent<{ value: E, finalSelection: boolean }>;
+
+	setValue(value: E): void;
+
+	getValue(): E;
+
+	/**
+	 * @param event
+	 * @return true if the event was processed by this component and should not lead to any other action
+	 */
+	handleKeyboardInput(event: KeyboardEvent): boolean;
+
+	/**
+	 * @param query
+	 * @param selectionDirection
+	 * @param referenceValue normally the current value of the comboBox
+	 * @return true if it got results
+	 */
+	handleQuery(query: string, selectionDirection: SelectionDirection, referenceValue: E): Promise<boolean>;
+
+	getComponent(): TrivialComponent;
+
+}
+
+export enum SelectionDirection {
+	SELECT_FIRST = 1,
+	NO_SELECTION = 0,
+	SELECT_LAST = -1
+}
diff --git a/teamapps-client/ts/modules/trivial-components/dropdown/TreeBoxDropdown.ts b/teamapps-client/ts/modules/trivial-components/dropdown/TreeBoxDropdown.ts
new file mode 100644
index 000000000..b314ea68c
--- /dev/null
+++ b/teamapps-client/ts/modules/trivial-components/dropdown/TreeBoxDropdown.ts
@@ -0,0 +1,105 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+import {DropDownComponent, SelectionDirection} from "./DropDownComponent";
+import {TeamAppsEvent} from "../../util/TeamAppsEvent";
+import {QueryFunction} from "../TrivialCore";
+import {TrivialTreeBox} from "../TrivialTreeBox";
+import { scrollIntoView } from "seamless-scroll-polyfill";
+
+type TreeBoxDropdownConfig<E> = {
+	queryFunction: QueryFunction<E>;
+	/**
+	 * Performance setting. Defines the maximum number of entries until which text highlighting is performed.
+	 * Set to `0` to disable text highlighting.
+	 *
+	 * @default `100`
+	 */
+	textHighlightingEntryLimit?: number;
+	preselectionMatcher: (query: string, entry: E) => boolean;
+};
+
+export class TreeBoxDropdown<E> implements DropDownComponent<E> {
+
+	public readonly onValueChanged: TeamAppsEvent<{ value: E; finalSelection: boolean }> = new TeamAppsEvent();
+
+	private treeBox: TrivialTreeBox<E>;
+	private config: TreeBoxDropdownConfig<E>;
+
+	constructor(config: TreeBoxDropdownConfig<E>, treeBox: TrivialTreeBox<E>) {
+		this.treeBox = treeBox;
+		this.config = {
+			textHighlightingEntryLimit: 100,
+			...config
+		};
+		this.treeBox.onSelectedEntryChanged.addListener(entry => this.onValueChanged.fire({value: entry, finalSelection: true}));
+	}
+
+	getMainDomElement(): HTMLElement {
+		return this.treeBox.getMainDomElement();
+	}
+
+	getValue(): E {
+		return this.treeBox.getSelectedEntry();
+	}
+
+	handleKeyboardInput(event: KeyboardEvent): boolean {
+		if (["ArrowUp", "ArrowDown"].indexOf(event.code) !== -1) {
+			let selectedEntry = this.treeBox.selectNextEntry(event.code == "ArrowUp" ? -1 : 1, true);
+			if (selectedEntry != null) {
+				this.onValueChanged.fire({value: this.treeBox.getSelectedEntry(), finalSelection: false});
+				return true;
+			} else {
+				return false;
+			}
+		} else if (["ArrowRight", "ArrowLeft"].indexOf(event.code) !== -1) {
+			return this.treeBox.setSelectedNodeExpanded(event.code == "ArrowRight");
+		}
+	}
+
+	async handleQuery(query: string, selectionDirection: SelectionDirection, currentComboBoxValue: E): Promise<boolean> {
+		let results = await this.config.queryFunction(query) ?? [];
+		this.treeBox.setEntries(results);
+		this.treeBox.setSelectedEntryById(null); // make sure we don't remember the last selected value and go down/up from it
+		scrollIntoView(this.getMainDomElement(), {block: "nearest", behavior: "smooth"}); // due to Safari iOS not implementing 'block: nearest' correctly, we need to call a polyfill...
+		this.treeBox.highlightTextMatches(results.length <= this.config.textHighlightingEntryLimit ? query : null);
+		if (selectionDirection === 0) {
+			this.treeBox.setSelectedEntryById(null)
+		} else {
+			let selectedEntry = this.treeBox.selectNextEntry(1, false, true, (entry) => this.config.preselectionMatcher(query, entry));
+			if (selectedEntry == null) {
+				this.treeBox.selectNextEntry(1, false);
+			}
+		}
+		return results.length > 0;
+	}
+
+	setValue(value: E): void {
+		// do nothing
+	}
+
+	destroy(): void {
+		this.treeBox.destroy();
+	}
+
+	getComponent(): TrivialTreeBox<E> {
+		return this.treeBox;
+	}
+
+}
diff --git a/teamapps-client/ts/modules/trivial-components/util/highlight.ts b/teamapps-client/ts/modules/trivial-components/util/highlight.ts
new file mode 100644
index 000000000..e4bdd44ef
--- /dev/null
+++ b/teamapps-client/ts/modules/trivial-components/util/highlight.ts
@@ -0,0 +1,95 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+/*
+ *
+ *  Copyright 2016 Yann Massard (https://github.com/yamass) and other contributors
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ *
+ */
+import {MatchingOptions, trivialMatch} from "../TrivialCore";
+
+export type HighlightOptions = MatchingOptions & {
+	highlightClassName?: string
+};
+
+const isIE11 = !((<any>window).ActiveXObject) && "ActiveXObject" in window;
+function normalizeForIE11 (node:Node) {
+	if (!node) { return; }
+	if (node.nodeType == 3) {
+		while (node.nextSibling && node.nextSibling.nodeType == 3) {
+			node.nodeValue += node.nextSibling.nodeValue;
+			node.parentNode.removeChild(node.nextSibling);
+		}
+	} else {
+		normalizeForIE11(node.firstChild);
+	}
+	normalizeForIE11(node.nextSibling);
+}
+
+export function highlightMatches(node: Element|Element[]|NodeListOf<Element>|JQuery, searchString:string, options: HighlightOptions) {
+	let defaultOptions: HighlightOptions = {
+		highlightClassName: 'tr-highlighted-text',
+		matchingMode: 'contains',
+		ignoreCase: true,
+		maxLevenshteinDistance: 3
+	};
+	options = {...defaultOptions, ...options};
+
+	$(node).find('*').each(function () {
+		const $this = $(this);
+
+		$this.find('.' + options.highlightClassName).contents().unwrap();
+		if (isIE11) {
+			normalizeForIE11(this);
+		} else {
+			this.normalize();
+		}
+
+		if (searchString && searchString !== '') {
+			$this.contents().filter(function () {
+				return this.nodeType == 3 && trivialMatch(this.nodeValue, searchString, options).length > 0;
+			}).replaceWith(function () {
+				const oldNodeValue = (this.nodeValue || "");
+				let newNodeValue = "";
+				const matches = trivialMatch(this.nodeValue, searchString, options);
+				let oldMatchEnd = 0;
+				for (let i = 0; i < matches.length; i++) {
+					const match = matches[i];
+					newNodeValue += this.nodeValue.substring(oldMatchEnd, match.start);
+					newNodeValue += "<span class=\"" + options.highlightClassName + "\">" + oldNodeValue.substr(match.start, match.length) + "</span>";
+					oldMatchEnd = match.start + match.length;
+				}
+				newNodeValue += oldNodeValue.substring(oldMatchEnd, oldNodeValue.length);
+				return newNodeValue as any; // type definition does not support string but should...
+			});
+		}
+	});
+}
diff --git a/teamapps-client/ts/modules/tsconfig.json b/teamapps-client/ts/modules/tsconfig.json
index 77a177067..cb24c518b 100644
--- a/teamapps-client/ts/modules/tsconfig.json
+++ b/teamapps-client/ts/modules/tsconfig.json
@@ -3,24 +3,36 @@
     "sourceMap": true,
     "noImplicitAny": true,
     "module": "commonjs",
+    "preserveConstEnums": true,
     "target": "es5",
     "experimentalDecorators": true,
     "alwaysStrict": true,
-    "lib": ["es2017", "dom"],
-    "jsx": "react",
+    "lib": ["es2019", "dom"],
     "allowSyntheticDefaultImports": true,
     "importHelpers": true,
     "moduleResolution": "node",
-    "noEmit": true,
     "declaration": true,
-    "declarationDir": "../../dist/tsd"
+    "declarationDir": "../../dist/tsd",
+    "esModuleInterop": true,
+    "downlevelIteration": true,
+    "removeComments": false
   },
   "files": [
     "index.ts",
+    "../custom-declarations/color-rgba.d.ts",
     "../custom-declarations/jquery.ui.position.d.ts",
     "../custom-declarations/webui-popover.d.ts",
     "../custom-declarations/pickr-widget.d.ts",
-    "../../node_modules/@types/node/index.d.ts"
+    "../custom-declarations/worker-loader.d.ts",
+    "../custom-declarations/d3-flextree.d.ts",
+    "../custom-declarations/image-layout.d.ts",
+    "../custom-declarations/voice-activity-detection.d.ts",
+    "../custom-declarations/mediasoup-v3-client.d.ts",
+    "../custom-declarations/levenshtein.d.ts",
+    "../custom-declarations/ulp.d.ts",
+    "../../node_modules/shaka-player/dist/shaka-player.compiled.debug.d.ts",
+    "../../node_modules/shaka-player/dist/shaka-player.ui.debug.d.ts"
+//    "../../node_modules/@types/node/index.d.ts"
   ],
   "exclude": [
     "../../node_modules"
diff --git a/teamapps-client/ts/modules/util/BigDecimalString.ts b/teamapps-client/ts/modules/util/BigDecimalString.ts
new file mode 100644
index 000000000..1dcc58a86
--- /dev/null
+++ b/teamapps-client/ts/modules/util/BigDecimalString.ts
@@ -0,0 +1,95 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+import {NumberParser} from "./NumberParser";
+
+
+
+export class BigDecimal {
+	private constructor(public readonly value: string) {
+	}
+
+	public static of(value: string): BigDecimal {
+		if (value == null || value.length == null) {
+			return null;
+		}
+		return new BigDecimal(value);
+	}
+
+	public format(numberFormat: Intl.NumberFormat, skipThousandSeparators: boolean = false) {
+		if ((this.value == null || this.value.length === 0)) {
+			return "";
+		}
+
+		let [mainString, decimalString] = this.value.split(".");
+		decimalString = decimalString ?? "";
+
+		let decimalSeparator = NumberParser.getDecimalSeparatorForFormat(numberFormat);
+		let resolvedNumberFormatOptions: ResolvedNumberFormatOptions = numberFormat.resolvedOptions();
+		let numerals = NumberParser.getNumeralsForLocale(resolvedNumberFormatOptions.locale);
+		let roundUpMain = false;
+		if (resolvedNumberFormatOptions.minimumFractionDigits != null) {
+			if (decimalString.length < resolvedNumberFormatOptions.minimumFractionDigits) {
+				decimalString = decimalString + "0".repeat(resolvedNumberFormatOptions.minimumFractionDigits - decimalString.length)
+			} else if (decimalString.length > resolvedNumberFormatOptions.maximumFractionDigits) {
+				const truncatedPart = decimalString.substring(resolvedNumberFormatOptions.maximumFractionDigits);
+				decimalString = decimalString.substr(0, resolvedNumberFormatOptions.maximumFractionDigits);
+				if (truncatedPart.charCodeAt(0) >= "5".charCodeAt(0)) {
+					let incremented = BigInt(decimalString) + BigInt(1);
+					if (incremented.toString().length > decimalString.length) {
+						decimalString = "0".repeat(resolvedNumberFormatOptions.minimumIntegerDigits);
+						roundUpMain = true;
+					} else {
+						decimalString = incremented.toString(10);
+					}
+				}
+			}
+		} else {
+			throw "Could not format amount!";
+		}
+		decimalString.split('').map(digit => numerals[Number(digit)]).join("")
+
+		let mainBigInt = mainString.length > 0 ? BigInt(mainString) : BigInt(0);
+		if (roundUpMain) {
+			mainBigInt += BigInt(1);
+		}
+		mainString = numberFormat.format(mainBigInt).split(decimalSeparator)[0];
+
+		if (skipThousandSeparators) {
+			let thousandSeparator = NumberParser.getGroupSeparatorForLocale(numberFormat.resolvedOptions().locale);
+			mainString.replace(thousandSeparator, "");
+		}
+
+		return `${mainString}${decimalString.length > 0 ? decimalSeparator + decimalString : ""}`;
+	}
+}
+
+export interface ResolvedNumberFormatOptions {
+	locale: string;
+	numberingSystem: string;
+	style: string;
+	currency?: string;
+	currencyDisplay?: string;
+	minimumIntegerDigits?: number;
+	minimumFractionDigits?: number;
+	maximumFractionDigits?: number;
+	minimumSignificantDigits?: number;
+	maximumSignificantDigits?: number;
+	useGrouping: boolean;
+}
diff --git a/teamapps-client/ts/modules/util/Bind.ts b/teamapps-client/ts/modules/util/Bind.ts
index 4d48631b5..f35dd968d 100644
--- a/teamapps-client/ts/modules/util/Bind.ts
+++ b/teamapps-client/ts/modules/util/Bind.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-client/ts/modules/util/ComponentEventSubscriptionManager.ts b/teamapps-client/ts/modules/util/ComponentEventSubscriptionManager.ts
new file mode 100644
index 000000000..78c216931
--- /dev/null
+++ b/teamapps-client/ts/modules/util/ComponentEventSubscriptionManager.ts
@@ -0,0 +1,76 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+
+export const typescriptDeclarationFixConstant = 1;
+
+import {UiEvent} from "../../generated/UiEvent";
+import {EventSubscription, TeamAppsEventListener} from "./TeamAppsEvent";
+import {TeamAppsUiComponentRegistry} from "../TeamAppsUiComponentRegistry";
+
+type EventDescriptor = { name: string, _type: string };
+
+function capitalizeFirstLetter(s: string) {
+	return s.charAt(0).toUpperCase() + s.slice(1);
+}
+
+export class ComponentEventSubscriptionManager {
+
+	private readonly eventDescriptorsByComponentType: Map<string, EventDescriptor[]> = new Map();
+	private readonly subscriptionsByComponent: Map<any, EventSubscription[]> = new Map();
+
+	public registerComponentType(componentType: string, eventDescriptors: EventDescriptor[]) {
+		this.eventDescriptorsByComponentType.set(componentType, eventDescriptors);
+	}
+
+	public registerComponentTypes(componentEventDescriptors: { componentType: string, eventDescriptors: EventDescriptor[] }[],
+								  staticComponentEventDescriptors: { componentType: string, eventDescriptors: EventDescriptor[] }[],
+								  staticEventListener: TeamAppsEventListener<UiEvent>) {
+		componentEventDescriptors.forEach(r => this.registerComponentType(r.componentType, r.eventDescriptors));
+
+		staticComponentEventDescriptors.forEach((value) => {
+			let className = value.componentType as string;
+			let componentClass = TeamAppsUiComponentRegistry.getComponentClassForName(className, false);
+			this.registerListeners(componentClass, value.eventDescriptors, staticEventListener, {});
+		})
+	}
+
+	public registerEventListener(component: any, type: string, eventListener: TeamAppsEventListener<UiEvent>, additionalEventProperties: object) {
+		let eventNames = this.eventDescriptorsByComponentType.get(type);
+		if (eventNames != null) {
+			this.registerListeners(component, eventNames, eventListener, additionalEventProperties);
+		}
+	}
+
+	private registerListeners(component: any, eventNames: EventDescriptor[], eventListener: (eventObject?: UiEvent) => void, additionalEventProperties: object) {
+		let subscriptions = eventNames
+			.map(eventDescriptor => {
+				let listener = (eventObject: any) => eventListener({_type: eventDescriptor._type, ...eventObject, ...additionalEventProperties});
+				return component["on" + capitalizeFirstLetter(eventDescriptor.name)]?.addListener(listener);
+			});
+		this.subscriptionsByComponent.set(component, subscriptions);
+	}
+
+	public unregisterEventListener(component: any) {
+		let subscriptions = this.subscriptionsByComponent.get(component);
+		if (subscriptions != null) {
+			subscriptions.forEach(s => s.unsubscribe());
+		}
+	}
+}
diff --git a/teamapps-client/ts/modules/util/CssFormatUtil.ts b/teamapps-client/ts/modules/util/CssFormatUtil.ts
index 7572086b1..7afc11123 100644
--- a/teamapps-client/ts/modules/util/CssFormatUtil.ts
+++ b/teamapps-client/ts/modules/util/CssFormatUtil.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -18,7 +18,6 @@
  * =========================LICENSE_END==================================
  */
 import {UiTextAlignment} from "../../generated/UiTextAlignment";
-import {UiColorConfig} from "../../generated/UiColorConfig";
 import {UiVerticalElementAlignment} from "../../generated/UiVerticalElementAlignment";
 import {UiHorizontalElementAlignment} from "../../generated/UiHorizontalElementAlignment";
 import {UiSizeType} from "../../generated/UiSizeType";
@@ -30,7 +29,6 @@ import {UiShadowConfig} from "../../generated/UiShadowConfig";
 import {UiSpacingConfig} from "../../generated/UiSpacingConfig";
 import {UiSizingPolicyConfig} from "../../generated/UiSizingPolicyConfig";
 import {UiImageSizing} from "../../generated/UiImageSizing";
-import {image} from "d3-fetch";
 
 export type CssPropertyObject = { [cssProperty: string]: string };
 
@@ -54,16 +52,12 @@ export const cssVerticalAlignmentByUiVerticalAlignment = {
 	[UiVerticalElementAlignment.STRETCH]: 'stretch'
 };
 
-export function createUiColorCssString(uiColor: UiColorConfig) {
-	return uiColor != null ? `rgba(${uiColor.red},${uiColor.green},${uiColor.blue},${uiColor.alpha})` : '';
-}
-
-export function createUiColorCssObject(cssProperty: string, uiColor: UiColorConfig) {
+export function createUiColorCssObject(cssProperty: string, uiColor: string) {
 	if (uiColor == null) {
 		return {};
 	} else {
 		return {
-			[cssProperty]: `rgba(${uiColor.red},${uiColor.green},${uiColor.blue},${uiColor.alpha})`
+			[cssProperty]: uiColor
 		}
 	}
 }
@@ -76,8 +70,8 @@ export function createUiFontStyleCssString(fontStyle: UiFontStyleConfig) {
 	if (fontStyle == null) {
 		return '';
 	} else {
-		return (fontStyle.fontColor ? 'color:' + createUiColorCssString(fontStyle.fontColor) + ';' : '')
-			+ (fontStyle.backgroundColor ? 'background-color:' + createUiColorCssString(fontStyle.backgroundColor) + ';' : '')
+		return (fontStyle.fontColor ? 'color:' + (fontStyle.fontColor ?? '') + ';' : '')
+			+ (fontStyle.backgroundColor ? 'background-color:' + (fontStyle.backgroundColor ?? '') + ';' : '')
 			+ (fontStyle.bold ? 'font-weight:700;' : '')
 			+ (fontStyle.underline ? 'text-decoration:underline;' : '')
 			+ (fontStyle.italic ? 'font-style:italic;' : '')
@@ -86,7 +80,7 @@ export function createUiFontStyleCssString(fontStyle: UiFontStyleConfig) {
 }
 
 export function createUiLineCssString(lineConfig: UiLineConfig) {
-	return lineConfig != null ? `${lineConfig.thickness}px ${UiLineType[lineConfig.type]} ${createUiColorCssString(lineConfig.color)}` : '';
+	return lineConfig != null ? `${lineConfig.thickness}px ${UiLineType[lineConfig.type]} ${(lineConfig.color ?? '')}` : '';
 }
 
 export function createUiBorderCssObject(borderConfig: UiBorderConfig): CssPropertyObject {
@@ -127,7 +121,7 @@ export function createUiShadowCssObject(shadowConfig: UiShadowConfig): CssProper
 		return {};
 	} else {
 		return {
-			"box-shadow": `${shadowConfig.offsetX || 0}px ${shadowConfig.offsetY || 0}px ${shadowConfig.blur}px ${shadowConfig.spread || 0}px ${createUiColorCssString(shadowConfig.color)}`
+			"boxShadow": `${shadowConfig.offsetX || 0}px ${shadowConfig.offsetY || 0}px ${shadowConfig.blur}px ${shadowConfig.spread || 0}px ${(shadowConfig.color ?? '')}`
 		}
 	}
 }
@@ -156,12 +150,16 @@ export function createImageSizingCssObject(imageSizing: UiImageSizing): CssPrope
 	}
 }
 
+export function createUiSpacingValueCssString(spacingConfig: UiSpacingConfig) {
+	return spacingConfig != null ? `${spacingConfig.top}px ${spacingConfig.right}px ${spacingConfig.bottom}px ${spacingConfig.left}px` : null;
+}
+
 export function createUiSpacingCssObject(cssProperty: string, spacingConfig: UiSpacingConfig) {
 	if (spacingConfig == null) {
 		return {};
 	} else {
 		return {
-			[cssProperty]: `${spacingConfig.top}px ${spacingConfig.right}px ${spacingConfig.bottom}px ${spacingConfig.left}px;`
+			[cssProperty]: createUiSpacingValueCssString(spacingConfig)
 		};
 	}
 }
diff --git a/teamapps-client/ts/modules/util/DeferredExecutor.ts b/teamapps-client/ts/modules/util/DeferredExecutor.ts
index e5e6129c2..771d24616 100644
--- a/teamapps-client/ts/modules/util/DeferredExecutor.ts
+++ b/teamapps-client/ts/modules/util/DeferredExecutor.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-client/ts/modules/util/Emptyable.ts b/teamapps-client/ts/modules/util/Emptyable.ts
index ccdb1b72f..a05d25ab9 100644
--- a/teamapps-client/ts/modules/util/Emptyable.ts
+++ b/teamapps-client/ts/modules/util/Emptyable.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-client/ts/modules/util/ExecuteWhenAttached.ts b/teamapps-client/ts/modules/util/ExecuteWhenFirstDisplayed.ts
similarity index 53%
rename from teamapps-client/ts/modules/util/ExecuteWhenAttached.ts
rename to teamapps-client/ts/modules/util/ExecuteWhenFirstDisplayed.ts
index eea6b01a7..1eaddce90 100644
--- a/teamapps-client/ts/modules/util/ExecuteWhenAttached.ts
+++ b/teamapps-client/ts/modules/util/ExecuteWhenFirstDisplayed.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,38 +19,35 @@
  */
 import {DeferredExecutor} from "./DeferredExecutor";
 
-export function executeWhenAttached(onlyOnce?: boolean) {
+export function executeWhenFirstDisplayed(onlyOnce?: boolean) {
 	return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
-
-		modifyOnAttachedToDomIfNotYetDone(target);
-
 		let oldMethod = descriptor.value;
 		descriptor.value = function () {
-			if (!this.__deferredExecutor) {
-				this.__deferredExecutor = new DeferredExecutor();
-				this.__deferredExecutor.ready = this.attachedToDom;
+			if (!this.displayedDeferredExecutor) {
+				console.error("Could not find displayedDeferredExecutor!!");
 			}
 			if (onlyOnce) {
-				this.__deferredExecutor.invokeOnceWhenReady(oldMethod, this, arguments);
+				this.displayedDeferredExecutor.invokeOnceWhenReady(oldMethod, this, arguments);
 			} else {
-				this.__deferredExecutor.invokeWhenReady(oldMethod, this, arguments);
+				this.displayedDeferredExecutor.invokeWhenReady(oldMethod, this, arguments);
 			}
 		};
 	};
 }
 
-function modifyOnAttachedToDomIfNotYetDone(proto: any) {
-	if (!proto.__executeWhenAttachedSupport) {
-		let oldMethod = proto.onAttachedToDom;
-		proto.onAttachedToDom = function () {
-			if (!this.__deferredExecutor) {
-				this.__deferredExecutor = new DeferredExecutor();
+export function executeDeferredExecutorReady(deferredExecutorGetter: () => DeferredExecutor, onlyOnce?: boolean) {
+	return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
+		let oldMethod = descriptor.value;
+		descriptor.value = function () {
+			let deferredExecutor = deferredExecutorGetter();
+			if (onlyOnce) {
+				this.deferredExecutor.invokeOnceWhenReady(oldMethod, this, arguments);
+			} else {
+				this.deferredExecutor.invokeWhenReady(oldMethod, this, arguments);
 			}
-			oldMethod.apply(this, arguments);
-			this.__deferredExecutor.ready = true;
 		};
-		proto.__executeWhenAttachedSupport = true;
-	}
+	};
 }
 
 
+
diff --git a/teamapps-client/ts/modules/util/FakeMediaStreamFactory.ts b/teamapps-client/ts/modules/util/FakeMediaStreamFactory.ts
index 9ef917c5d..a9697b8c8 100644
--- a/teamapps-client/ts/modules/util/FakeMediaStreamFactory.ts
+++ b/teamapps-client/ts/modules/util/FakeMediaStreamFactory.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-client/ts/modules/util/FileUploader.ts b/teamapps-client/ts/modules/util/FileUploader.ts
index 6883b94bd..192299140 100644
--- a/teamapps-client/ts/modules/util/FileUploader.ts
+++ b/teamapps-client/ts/modules/util/FileUploader.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -24,10 +24,10 @@ export class FileUploader {
 
 	private static LOGGER: log.Logger = log.getLogger("UploadItem");
 
-	public readonly onProgress: TeamAppsEvent<number> = new TeamAppsEvent(this);
-	public readonly onSuccess: TeamAppsEvent<string> = new TeamAppsEvent(this);
-	public readonly onError: TeamAppsEvent<void> = new TeamAppsEvent(this);
-	public readonly onComplete: TeamAppsEvent<void> = new TeamAppsEvent(this);
+	public readonly onProgress: TeamAppsEvent<number> = new TeamAppsEvent();
+	public readonly onSuccess: TeamAppsEvent<string> = new TeamAppsEvent();
+	public readonly onError: TeamAppsEvent<void> = new TeamAppsEvent();
+	public readonly onComplete: TeamAppsEvent<void> = new TeamAppsEvent();
 
 	private xhr: JQuery.jqXHR;
 
diff --git a/teamapps-client/ts/modules/util/FullCalendarMonthGrid.ts b/teamapps-client/ts/modules/util/FullCalendarMonthGrid.ts
new file mode 100644
index 000000000..b3d9e8e9f
--- /dev/null
+++ b/teamapps-client/ts/modules/util/FullCalendarMonthGrid.ts
@@ -0,0 +1,665 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+import {generateUUID, parseHtml, parseSvg} from "../Common";
+import * as d3 from "d3";
+import {Selection} from "d3-selection";
+import {addDays, createFormatter, createPlugin, DateFormatter, EventApi, EventStore, View} from "@fullcalendar/core";
+import {toMoment} from "@fullcalendar/moment";
+import moment from "moment-timezone";
+import {Moment} from "moment-timezone";
+import {CalendarEventListPopper} from "../micro-components/CalendarEventListPopper";
+import {ComponentContext} from "@fullcalendar/core/component/Component";
+
+class Segment {
+	constructor(
+		public start: Moment,
+		public end: Moment,
+		public isStart: boolean,
+		public isEnd: boolean,
+		public event: EventApi
+	) {
+	}
+
+	public toString(): string {
+		return this.start.toString() + ' - ' + this.end.toString();
+	}
+}
+
+type DayOccupationColorAmount = {
+	color: string,
+	duration: number,
+	startAngle: number,
+	endAngle: number
+};
+
+interface DisplayedMonth {
+	intervalStart: Moment,
+	intervalEnd: Moment,
+	displayedStart: Moment,
+	displayedEnd: Moment,
+	displayedWeeks: DisplayedWeek[]
+}
+
+type DisplayedWeek = [DisplayedDay, DisplayedDay, DisplayedDay, DisplayedDay, DisplayedDay, DisplayedDay, DisplayedDay];
+type DisplayedDay = {
+	day: Moment,
+	foreignMonth: boolean
+};
+
+export class MonthGridView extends View {
+
+	private width: number;
+	private height: number;
+
+	private $contentElement: HTMLElement;
+	private uuid: string;
+	private _svg: Selection<SVGElement, undefined, HTMLElement, any>;
+
+
+	private readonly padding = 12;
+	private readonly dayColumnWidth = 12;
+	private readonly monthNameHeight = 20;
+	private readonly weekLineHeight = 11.5;
+	private readonly spacingX = 15;
+	private readonly spacingY = 6;
+	private readonly textHangOffset = 4.8;
+
+	private get monthWidth() {
+		return (this.context.options.weekNumbers ? 8 : 7) * this.dayColumnWidth;
+	}
+
+	private get monthHeight() {
+		return this.monthNameHeight + 7 * this.weekLineHeight;
+	}
+
+
+	private maxOccupationTime = 8; //hours
+	private events: EventApi[] = null;
+
+	private weekDayShortNames: string[];
+
+	private eventsPopper: CalendarEventListPopper;
+
+	// called once when the view is instantiated, when the user switches to the view.
+	// initialize member variables or do other setup tasks.
+	public initialize() {
+		this.uuid = "year-" + generateUUID();
+		this.$contentElement = parseHtml(`<div class="fc-month-grid-content" id="${this.uuid}">`);
+		let svgElement: SVGElement = parseSvg('<svg class="svg">');
+		this.$contentElement.append(svgElement);
+		this.el.classList.add('fc-month-grid-view');
+		this.el.appendChild(this.$contentElement);
+		this._svg = d3.select<SVGElement, undefined>(svgElement);
+		this.eventsPopper = new CalendarEventListPopper(svgElement);
+	}
+
+	// will get invoked when the context is set for the first time
+	firstContext(context: ComponentContext): void {
+		super.firstContext(context);
+		this.weekDayShortNames = this.initWeekDayShortNames();
+	}
+
+	destroy(): void {
+		super.destroy();
+		this.eventsPopper.destroy();
+	}
+
+	public updateSize(isResize: boolean, viewHeight: number, isAuto: boolean) {
+		super.updateSize(isResize, viewHeight, isAuto);
+		const newWidth = this.el.offsetWidth;
+		if (viewHeight !== this.height || newWidth !== this.width) {
+			this.width = newWidth;
+			this.height = viewHeight;
+			this.el.style.height = viewHeight + "px";
+			this.updateMonthDisplays();
+		}
+	}
+
+	// reponsible for rendering the given Event Objects
+	public renderEvents(eventStore: EventStore) {
+		this.events = this.context.calendar.getEvents();
+		this.updateMonthDisplays();
+	}
+
+	private getMonthRangesToBeDisplayed(): DisplayedMonth[] {
+		let startMoment = toMoment(this.currentStart, this.context.calendar);
+		let endMoment = toMoment(this.currentEnd, this.context.calendar);
+		const numberOfMonths = endMoment.diff(startMoment, 'month');
+		const displayedMonths: DisplayedMonth[] = [];
+		for (let i = 0; i < numberOfMonths; i++) {
+			let intervalStart = startMoment.clone().add(i, 'month');
+			let intervalEnd = startMoment.clone().add(i + 1, 'month');
+			const monthRange: DisplayedMonth = {
+				intervalStart,
+				intervalEnd,
+				displayedStart: this.startOfWeek(startMoment),
+				displayedEnd: this.startOfWeek(intervalEnd).add(7, "day"),
+				displayedWeeks: this.getDisplayedWeeks(intervalStart)
+			};
+			displayedMonths.push(monthRange);
+		}
+		return displayedMonths;
+	}
+
+	private startOfWeek(m: Moment) {
+		let copy = m.clone();
+		let firstDay = this.context.options.firstDay || 0;
+		while (copy.day() !== firstDay) {
+			copy.add(-1, 'day');
+		}
+		return copy;
+	}
+
+	private getDisplayedWeeks(intervalStart: Moment): DisplayedWeek[] {
+		let weeks: DisplayedWeek[] = [];
+		let month = intervalStart.month();
+		let displayedStart = this.startOfWeek(intervalStart);
+		for (let i = 0; i < 6; i++) {
+			let week = [];
+			for (let j = 0; j < 7; j++) {
+				let day = displayedStart.clone().add(i * 7 + j, 'day');
+				week.push({
+					day: day,
+					foreignMonth: day.month() !== month
+				});
+			}
+			weeks.push(week as DisplayedWeek);
+		}
+		return weeks;
+	}
+
+	private getMonthsPerRow() {
+		let bestNumberOfColumns = Math.ceil(this.width / 270);
+		if (bestNumberOfColumns === 5) {
+			bestNumberOfColumns = 4;
+		} else if (bestNumberOfColumns > 6) {
+			bestNumberOfColumns = 6;
+		}
+		return bestNumberOfColumns;
+	}
+
+	private initWeekDayShortNames(): string[] {
+		let formatter = createFormatter({weekday: 'narrow'});
+		let names = [];
+		for (let i = 0; i < 7; i++) {
+			let date = addDays(new Date(), i);
+			names[date.getDay()] = this.context.dateEnv.format(date, formatter);
+		}
+		return names;
+	}
+
+	private calculateDayOccupationColorsFromEvents(events: EventApi[]) {
+		let segments = this.eventsToSegments(events);
+		let segmentsByDay = this.groupSegmentsByDay(segments);
+
+		let dayOccupationColors: { [dayString: string]: DayOccupationColorAmount[] } = {};
+		Object.keys(segmentsByDay).forEach(dayString => {
+			let segments = segmentsByDay[dayString];
+			dayOccupationColors[dayString] = this.calculateDayOccupationColors(segments);
+		});
+		return dayOccupationColors;
+	}
+
+	private monthNameFormatter: DateFormatter = createFormatter({month: 'long'});
+
+	private updateMonthDisplays() {
+		if (!this.width || !this.height || this.events == null) {
+			return;
+		}
+
+		const dayOccupationColors = this.calculateDayOccupationColorsFromEvents(this.events);
+
+		const monthRanges = this.getMonthRangesToBeDisplayed();
+
+		let bestTileCoverageInfo = this.getBestTileCoverageInfo(monthRanges.length);
+
+		let subTileZoom = Math.max(.8, 1 - (bestTileCoverageInfo.monthTileWidth - this.context.options.minMonthTileWidth) / (3 * this.context.options.minMonthTileWidth));
+
+		let viewBoxWidth: number;
+		let viewBoxHeight: number;
+		let viewBoxOffsetX: number;
+		let viewBoxOffsetY: number;
+		var monthTileWidth = bestTileCoverageInfo.monthTileWidth;
+		if (!bestTileCoverageInfo.needsScroll && this.context.options.maxMonthTileWidth && monthTileWidth > this.context.options.maxMonthTileWidth) {
+			viewBoxWidth = bestTileCoverageInfo.preferredDrawAreaWidth * (monthTileWidth / this.context.options.maxMonthTileWidth);
+			viewBoxHeight = bestTileCoverageInfo.preferredDrawAreaHeight * (monthTileWidth / this.context.options.maxMonthTileWidth);
+			viewBoxOffsetX = (bestTileCoverageInfo.preferredDrawAreaWidth - viewBoxWidth) / 2;
+			viewBoxOffsetY = (bestTileCoverageInfo.preferredDrawAreaHeight - viewBoxHeight) / 2;
+		} else {
+			viewBoxWidth = bestTileCoverageInfo.preferredDrawAreaWidth;
+			viewBoxHeight = bestTileCoverageInfo.preferredDrawAreaHeight;
+			viewBoxOffsetX = 0;
+			viewBoxOffsetY = 0;
+		}
+		this._svg.attr("viewBox", `${viewBoxOffsetX} ${viewBoxOffsetY} ${viewBoxWidth} ${viewBoxHeight}`);
+		var svgHeight = Math.max(this.height, bestTileCoverageInfo.needsScroll ? bestTileCoverageInfo.height : bestTileCoverageInfo.height);
+		this._svg.style("height", svgHeight + "px");
+
+		let calculateMonthPositionTransform = (monthRange: DisplayedMonth, monthIndex: number) => {
+			var colIndex = monthIndex % bestTileCoverageInfo.numberOfCols;
+			var rowIndex = Math.floor(monthIndex / bestTileCoverageInfo.numberOfCols);
+			let x = this.padding + colIndex * (this.monthWidth + this.spacingX);
+			let y = this.padding + rowIndex * (this.monthHeight + this.spacingY);
+			return `translate(${x},${y})`;
+		};
+
+		let _month = this._svg
+			.selectAll("g.fc-month-grid-month")
+			.data(monthRanges);
+		let _monthEnter = _month
+			.enter()
+			.append("g")
+			.classed("fc-month-grid-month", true)
+			.attr("transform", calculateMonthPositionTransform);
+		// _monthEnter.append("rect")
+		// 	.attr("fill", "none")
+		// 	.attr("stroke", "black")
+		// 	.attr("width", this.monthWidth)
+		// 	.attr("height", this.monthHeight);
+		_monthEnter
+			.append("text")
+			.classed("fc-month-grid-month-name", true)
+			.text(monthRange => this.context.dateEnv.format(strippedUtcLikeDate(monthRange.intervalStart), this.monthNameFormatter))
+			.attr("x", 0)
+			.attr("y", 10)
+			.on("click", (monthRange) => this.context.options.navLinkMonthClick && this.context.options.navLinkMonthClick(monthRange.intervalStart.toDate(), d3.event));
+		_month.merge(_monthEnter)
+			.transition()
+			.attr("transform", calculateMonthPositionTransform);
+		_month.exit()
+			.remove();
+
+		let _dayName = _month.merge(_monthEnter)
+			.selectAll("text.fc-month-grid-day-name")
+			.data([
+				this.weekDayShortNames[this.context.options.firstDay],
+				this.weekDayShortNames[(this.context.options.firstDay + 1) % 7],
+				this.weekDayShortNames[(this.context.options.firstDay + 2) % 7],
+				this.weekDayShortNames[(this.context.options.firstDay + 3) % 7],
+				this.weekDayShortNames[(this.context.options.firstDay + 4) % 7],
+				this.weekDayShortNames[(this.context.options.firstDay + 5) % 7],
+				this.weekDayShortNames[(this.context.options.firstDay + 6) % 7]
+			]);
+		var _dayNameEnter = _dayName
+			.enter()
+			.append("text")
+			.classed("fc-month-grid-day-name", true)
+			.text(name => name);
+		_dayName.merge(_dayNameEnter)
+			.attr("transform", (name, i) => `translate(${(i + (this.context.options.weekNumbers ? 1 : 0) + 0.5 /*center!*/) * this.dayColumnWidth}, ${this.monthNameHeight + this.textHangOffset}) scale(${subTileZoom})`);
+
+		let _week = _month.merge(_monthEnter)
+			.selectAll("g.fc-month-grid-week")
+			.data((monthRange) => monthRange.displayedWeeks);
+		let _weekEnter = _week.enter()
+			.append("g")
+			.classed("fc-month-grid-week", true)
+			.attr("transform", (week, i) => `translate(0, ${this.monthNameHeight + (i + 1) * this.weekLineHeight})`);
+		_week.exit()
+			.remove();
+
+		let _weekNumber = _week.merge(_weekEnter)
+			.selectAll("text.fc-month-grid-week-number")
+			.data(week => this.context.options.weekNumbers ? [week[Math.floor(week.length / 2)]] : []);
+		let _weekNumberEnter = _weekNumber.enter()
+			.append("text")
+			.classed("fc-month-grid-week-number", true)
+			.attr("x", 6)
+			.attr("y", this.textHangOffset)
+			.on("click", (d) => this.context.options.navLinkWeekClick && this.context.options.navLinkWeekClick(d.day.toDate(), d3.event));
+		_weekNumber.merge(_weekNumberEnter)
+			.text(day => this.context.dateEnv.computeWeekNumber(day.day.toDate()))
+			.attr("transform", (week, i) => `scale(${subTileZoom})`);
+
+		let _day = _week.merge(_weekEnter)
+			.selectAll("g.fc-month-grid-day")
+			.data(week => week);
+		let occupationRadius = (this.weekLineHeight - .5) / 2 - .7;
+		let occupationCircleCenterOffset = 2.4;
+		let _dayEnter = _day.enter()
+			.append("g")
+			.classed("fc-month-grid-day", true)
+			.call((g) => {
+				g.append("circle")
+					.classed("day-occupation-background-circle", true);
+				g.append("text")
+					.classed("day-number", true);
+			});
+		_dayEnter.on("click", (d) => this.context.options.navLinkDayClick && this.context.options.navLinkDayClick(d.day.toDate(), d3.event));
+		_day.merge(_dayEnter)
+			.attr("transform", (day, dayIndex) => `translate(${((dayIndex % 7) + (this.context.options.weekNumbers ? 1 : 0) + 0.5) * this.dayColumnWidth}, 0) scale(${subTileZoom})`)
+			.call((g) => {
+				g.select(".day-occupation-background-circle")
+					.attr("r", occupationRadius)
+					.attr("cy", occupationCircleCenterOffset);
+				g.select("text.day-number")
+					.text((d) => d.day.date())
+					.attr("y", () => this.textHangOffset);
+			})
+			.classed("free", day => {
+				let dayOccupationColorsForDay = dayOccupationColors[this.getDayString(day.day)];
+				return !dayOccupationColorsForDay || dayOccupationColorsForDay.length === 0;
+			})
+			.classed("other-month", (day: DisplayedDay, dayIndex: number) => {
+				return day.foreignMonth;
+			})
+			.classed("today", d => {
+				return !d.foreignMonth && moment().isSame(d.day, 'day')
+			})
+			.classed("weekend", (day: DisplayedDay, dayIndex: number) => this.context.options.businessHours.daysOfWeek.indexOf(day.day.day()) == -1);
+		_day.exit()
+			.remove();
+
+		_dayEnter.on("pointerenter", (d, i, nodes) => {
+			if (!d.foreignMonth) {
+				var bestTileCoverageInfo = this.getBestTileCoverageInfo(monthRanges.length);
+				let subTileZoom = Math.max(.8, 1 - (bestTileCoverageInfo.monthTileWidth - this.context.options.minMonthTileWidth) / (3 * this.context.options.minMonthTileWidth));
+				var strokeWidth = 1.7 / (subTileZoom * subTileZoom);
+				d3.select(nodes[i])
+					.selectAll("path.day-occupation")
+					.transition()
+					.ease(d3.easeQuad)
+					.duration(200)
+					.style("stroke-width", `${strokeWidth}px`)
+					.attr("d", (occupation: DayOccupationColorAmount, i, groups) => {
+						var radius = occupationRadius + (strokeWidth - 1) / 2;
+						return this.describeArc(0, occupationCircleCenterOffset, radius, occupation.startAngle, occupation.endAngle);
+					});
+				let events = this.getEventsForDay(d);
+				this.updatePopper(d.day, events, nodes[i].querySelector(".day-occupation-background-circle"));
+			}
+		}).on("pointerleave", (d, i, nodes) => {
+			d3.select(nodes[i])
+				.selectAll("path.day-occupation")
+				.transition()
+				.ease(d3.easeQuad)
+				.duration(200)
+				.style("stroke-width", "1px")
+				.attr("d", (occupation: DayOccupationColorAmount, i, groups) => {
+					return this.describeArc(0, occupationCircleCenterOffset, occupationRadius, occupation.startAngle, occupation.endAngle);
+				});
+			this.eventsPopper.setVisible(false, false);
+		});
+
+		let _dayOccupation = _day.merge(_dayEnter).selectAll("path.day-occupation")
+			.data(day => {
+				return day.foreignMonth ? [] : dayOccupationColors[this.getDayString(day.day)] || [];
+			});
+		let _dayOccupationEnter = _dayOccupation.enter()
+			.append("path")
+			.classed("day-occupation", true);
+		_dayOccupation.merge(_dayOccupationEnter)
+			.attr("d", (occupation, i, j) => {
+				return this.describeArc(0, occupationCircleCenterOffset, occupationRadius, occupation.startAngle, occupation.endAngle);
+			})
+			.attr("data-duration-in-hours", (occupation, i, j) => (occupation.duration / 3600000))
+			.style("stroke", occupationColor => {
+				let hslColor = d3.hsl(occupationColor.color);
+				if (hslColor.l > 0.55) {
+					hslColor.l = 0.55;
+				}
+				if (hslColor.s < 0.4) {
+					hslColor.s = 0.4;
+				}
+				return hslColor.toString();
+			});
+
+		_dayOccupation.exit().remove();
+	}
+
+	private getBestTileCoverageInfo(numberOfMonths: number) {
+		const possibleNumberOfColumns = [1, 2, 3, 4, 6, 12];
+		let areaCoverageInfos: { preferredDrawAreaHeight: number; fittingWidth: number; fittingHeight: number; numberOfCols: number; widthCorrectionFactor: number; heightCorrectionFactor: number; numberOfRows: number; fittingCorrectionFactor: number; preferredDrawAreaWidth: number; fittingMonthTileWidth: number, scrollingWidth: number, scrollingHeight: number, scrollingMonthTileWidth: number }[] = [];
+		for (let i = 0; i < possibleNumberOfColumns.length; i++) {
+			const numberOfCols = possibleNumberOfColumns[i];
+			const numberOfRows = Math.ceil(numberOfMonths / numberOfCols);
+			const preferredDrawAreaWidth = 2 * this.padding + numberOfCols * this.monthWidth + (numberOfCols - 1) * this.spacingX;
+			const preferredDrawAreaHeight = 2 * this.padding + numberOfRows * this.monthHeight + (numberOfRows - 1) * this.spacingY;
+
+			const widthCorrectionFactor = this.width / preferredDrawAreaWidth;
+			const heightCorrectionFactor = this.height / preferredDrawAreaHeight;
+			const fittingCorrectionFactor = Math.min(widthCorrectionFactor, heightCorrectionFactor);
+
+			const fittingWidth = fittingCorrectionFactor * preferredDrawAreaWidth;
+			const fittingHeight = fittingCorrectionFactor * preferredDrawAreaHeight;
+			const fittingMonthTileWidth = fittingCorrectionFactor * this.monthWidth;
+
+			const scrollingWidth = widthCorrectionFactor * preferredDrawAreaWidth;
+			const scrollingHeight = widthCorrectionFactor * preferredDrawAreaHeight;
+			const scrollingMonthTileWidth = widthCorrectionFactor * this.monthWidth;
+
+			areaCoverageInfos.push({
+				numberOfCols,
+				numberOfRows,
+				preferredDrawAreaWidth,
+				preferredDrawAreaHeight,
+				widthCorrectionFactor,
+				heightCorrectionFactor,
+				fittingCorrectionFactor,
+				fittingWidth,
+				fittingHeight,
+				fittingMonthTileWidth,
+				scrollingWidth,
+				scrollingHeight,
+				scrollingMonthTileWidth
+			});
+		}
+
+		let bestCoverageInfo = areaCoverageInfos.slice()
+			.sort((a, b) => b.fittingMonthTileWidth - a.fittingMonthTileWidth)[0];
+		const needsScroll = bestCoverageInfo.fittingMonthTileWidth < this.context.options.minMonthTileWidth;
+		if (needsScroll) {
+			bestCoverageInfo = areaCoverageInfos.slice()
+				.filter(info => info.scrollingMonthTileWidth > this.context.options.minMonthTileWidth)
+				.sort((a, b) => a.scrollingHeight - b.scrollingHeight)[0];
+		}
+		if (bestCoverageInfo == null) {
+			bestCoverageInfo = areaCoverageInfos[0]; // fall back to one column
+		}
+
+		return {
+			preferredDrawAreaWidth: bestCoverageInfo.preferredDrawAreaWidth,
+			preferredDrawAreaHeight: bestCoverageInfo.preferredDrawAreaHeight,
+			monthTileWidth: needsScroll ? bestCoverageInfo.scrollingMonthTileWidth : bestCoverageInfo.fittingMonthTileWidth,
+			height: needsScroll ? bestCoverageInfo.scrollingHeight : bestCoverageInfo.fittingHeight,
+			numberOfCols: bestCoverageInfo.numberOfCols,
+			needsScroll: needsScroll
+		};
+	}
+
+	private getEventsForDay(d: DisplayedDay) {
+		let dayStart = d.day;
+		let dayEnd = dayStart.clone().add(1, 'day');
+		return this.events.filter(e => {
+			let eventStart = toMoment(e.start, this.context.calendar);
+			let eventEnd = e.end != null ? toMoment(e.end, this.context.calendar) : eventStart.clone().add(1, 'second');
+			return +eventEnd > +dayStart && +eventStart < +(dayEnd);
+		});
+	}
+
+	private updatePopper(day: Moment, events: EventApi[], dayElement: Element) {
+		let allDayEvents = events.filter(e => e.allDay);
+		let normalEvents = events.filter(e => !e.allDay);
+
+		if (events.length > 0) {
+			this.renderPopperEvents(day, allDayEvents, true);
+			this.renderPopperEvents(day, normalEvents, false);
+			this.eventsPopper.setReferenceElement(dayElement);
+			this.eventsPopper.setVisible(true, false);
+		} else {
+			this.eventsPopper.setVisible(false, false);
+		}
+	}
+
+	private renderPopperEvents(day: Moment, events: EventApi[], allDay: boolean) {
+		const cssClass = allDay ? 'all-day' : '';
+		let allDayEventsHtml = '';
+		events.forEach(event => {
+			allDayEventsHtml += `<div class="fc-event ${cssClass}" style="background-color:${event.backgroundColor};border-color:${event.borderColor};color:${event.textColor}">
+									<div class="fc-content">
+										<span class="fc-time ${allDay ? 'hidden' : ''}">${event.formatRange({hour: 'numeric', minute: 'numeric'})}</span>
+										<span class="fc-title">${event.title}</span>            	
+									</div>
+								</div>`;
+		});
+		let $container = allDay ? this.eventsPopper.$allDayEventsContainer : this.eventsPopper.$normalEventsContainer;
+		$container.innerHTML = allDayEventsHtml;
+		$container.classList.toggle("hidden", events.length === 0);
+
+		let eventRender: (arg: { isMirror: boolean, isStart: boolean, isEnd: boolean, event: EventApi, el: HTMLElement, view: View }) => void = this.context.options.eventRender;
+		if (eventRender != null) {
+			$container.querySelectorAll(':scope .fc-event').forEach((el, i) => {
+				let event = events[i];
+				eventRender({
+					event: event,
+					isMirror: false,
+					isStart: day.isSame(event.start, 'day'),
+					isEnd: day.isSame(event.end, 'day'),
+					el: el as HTMLElement,
+					view: this
+				})
+			});
+		}
+	}
+
+	private describeArc(centerX: number, centerY: number, radius: number, startAngle: number, endAngle: number) {
+		let startX = centerX + (radius * Math.sin(startAngle));
+		let startY = centerY - radius * Math.cos(startAngle);
+		let endX = centerX + (radius * Math.sin(endAngle));
+		let endY = centerY - radius * Math.cos(endAngle);
+		let largeArc = endAngle - startAngle <= Math.PI ? "0" : "1";
+		let arcSweep = endAngle - startAngle <= Math.PI ? "1" : "0";
+		return `M ${startX} ${startY} A ${radius} ${radius} 0 ${largeArc} 1 ${endX} ${endY}`;
+	}
+
+	/* Events
+	 ------------------------------------------------------------------------------------------------------------------*/
+	private eventsToSegments(events: EventApi[]): Segment[] {
+		let segments: Segment[] = [];
+		for (let i = 0; i < events.length; i++) {
+			let event = events[i];
+			segments.push(...this.eventToSegments(event));
+		}
+		return segments;
+	}
+
+	private eventToSegments(event: EventApi): Segment[] {
+		let startMoment = toMoment(event.start, this.context.calendar);
+		let endMoment = event.end != null ? toMoment(event.end, this.context.calendar) : null;
+		if (event.end == null) {
+			let start = startMoment.clone().startOf("day").hour(8);
+			let end = startMoment.clone().startOf("day").hour(16);
+			return [new Segment(moment(start), moment(end), true, true, event)];
+		} else if (startMoment.day() === endMoment.day() && endMoment.valueOf() - startMoment.valueOf() < 86400000 /*day*/) {
+			return [new Segment(startMoment, endMoment, true, true, event)];
+		} else {
+			let segments: Segment[] = [];
+			let segStart = startMoment;
+			let segEnd = startMoment;
+			while (segEnd.valueOf() < endMoment.valueOf()) {
+				segStart = segEnd;
+				segEnd = moment.min(endMoment, segStart.clone().startOf("day").add(1, "day"));
+				segments.push(new Segment(segStart.clone(), segEnd.clone(), +segStart === +event.start, +segEnd === +event.end, event));
+			}
+			return segments;
+		}
+	}
+
+	private groupSegmentsByDay(segments: Segment[]): { [dayString: string]: Segment[] } {
+		let segmentsByDay: { [dayString: string]: Segment[] } = {};
+		for (let i = 0; i < segments.length; i++) {
+			let segment = segments[i];
+			let dayString = this.getDayString(moment(segment.start));
+			if (!segmentsByDay[dayString]) {
+				segmentsByDay[dayString] = [];
+			}
+			segmentsByDay[dayString].push(segment);
+		}
+		return segmentsByDay;
+	}
+
+	private calculateDayOccupationColors(mergableSegments: Segment[]): DayOccupationColorAmount[] {
+		let durationByBackgroundColor: { [color: string]: number } = {};
+		for (let i = 0; i < mergableSegments.length; i++) {
+			let segment: Segment = mergableSegments[i];
+			if (!durationByBackgroundColor[segment.event.backgroundColor]) {
+				durationByBackgroundColor[segment.event.backgroundColor] = 0;
+			}
+			durationByBackgroundColor[segment.event.backgroundColor] += segment.end.valueOf() - segment.start.valueOf();
+		}
+
+		let sortedColorDurations: DayOccupationColorAmount[] = Object.keys(durationByBackgroundColor).map(color => {
+			return {
+				color,
+				duration: durationByBackgroundColor[color],
+				startAngle: null,
+				endAngle: null
+			}
+		}).sort((e1, e2) => e2.duration - e1.duration);
+
+		let totalTime = sortedColorDurations.reduce((sum, colorDuration) => sum + colorDuration.duration, 0);
+		let fullOccupation = Math.max(totalTime, this.maxOccupationTime * 3600000);
+		let timeOffset = 0;
+
+		for (let i = 0; i < sortedColorDurations.length; i++) {
+			let colorDuration = sortedColorDurations[i];
+			colorDuration.startAngle = timeOffset / fullOccupation * 2 * Math.PI;
+			let endAngle = (timeOffset + colorDuration.duration) / fullOccupation * 2 * Math.PI;
+			if (colorDuration.startAngle === 0 && endAngle === 2 * Math.PI) {
+				endAngle -= .0001; // else the arc won't be drawn...
+			}
+			colorDuration.endAngle = endAngle;
+			timeOffset += colorDuration.duration;
+		}
+
+		return sortedColorDurations;
+	}
+
+	// this is faster formatting!
+	private getDayString(d: Moment) {
+		return `${d.year()}-${d.month()}-${d.date()}`;
+	}
+
+}
+
+function strippedUtcLikeDate(m: Moment) {
+	return moment(m).utc().add(m.utcOffset(), 'm').toDate();
+}
+
+export var monthGridViewPlugin = createPlugin({
+	views: {
+		monthGrid: {
+			class: MonthGridView,
+			duration: {
+				months: 12
+			},
+			minMonthTileWidth: 175,
+			maxMonthTileWidth: 0
+		},
+		year: {
+			type: 'monthGrid',
+			duration: {
+				years: 1
+			}
+		}
+	}
+});
+
+
diff --git a/teamapps-client/ts/modules/util/FullCalendarMultiMonthView.ts b/teamapps-client/ts/modules/util/FullCalendarMultiMonthView.ts
deleted file mode 100644
index cc4e6fdd8..000000000
--- a/teamapps-client/ts/modules/util/FullCalendarMultiMonthView.ts
+++ /dev/null
@@ -1,466 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-import * as moment from "moment-timezone";
-import {EventObjectInput} from "fullcalendar/src/types/input-types";
-import * as log from "loglevel";
-import {View} from "fullcalendar";
-import {adjustIfColorTooBright, generateUUID} from "../Common";
-import * as d3 from "d3";
-import {Selection} from "d3-selection";
-import Moment = moment.Moment;
-import Logger = log.Logger;
-
-class Segment {
-	constructor(
-		public start: Moment,
-		public end: Moment,
-		public isStart: boolean,
-		public isEnd: boolean,
-		public event: EventObjectInput
-	) {
-	}
-
-	public toString(): string {
-		return this.start.toString() + ' - ' + this.end.toString();
-	}
-}
-
-type DayOccupationColorAmount = {
-	color: string,
-	duration: number,
-	startAngle: number,
-	endAngle: number
-};
-
-type Range = {
-	start: Moment,
-	end: Moment
-}
-
-const logger: Logger = log.getLogger("MyYearView");
-
-interface Month {
-	intervalStart: Moment,
-	intervalEnd: Moment,
-	start: Moment,
-	end: Moment,
-	intervalUnit: "month"
-}
-type DisplayedWeek = [DisplayedDay, DisplayedDay, DisplayedDay, DisplayedDay, DisplayedDay, DisplayedDay, DisplayedDay];
-type DisplayedDay = {
-	day: Moment,
-	foreignMonth: boolean
-};
-
-// TODO
-export class MultiMonthView extends View {
-
-	private width: number;
-	private height: number;
-
-	private weekNumbersVisible: false; // display week numbers along the side?
-	private $contentElement: JQuery;
-	private uuid: string;
-	private _svg: Selection<SVGElement, undefined, HTMLElement, any>;
-
-	private padding = 15;
-	private spacing = 15;
-	private monthWidth = 93;
-	private monthHeight = 90;
-	private firstDayOffsetX = 17;
-	private dayColumnWidth = 12;
-	private firstWeekLineOffset = 37;
-	private weekLineHeight = 11.5;
-
-	private maxOccupationTime = 8; //hours
-	private events: EventObjectInput[] = [];
-
-	private weekDayShortNames = this.getWeekDayShortNames();
-
-	// called once when the view is instantiated, when the user switches to the view.
-	// initialize member variables or do other setup tasks.
-	public initialize() {
-	}
-
-	// called when another view is selected (and thereby this one is removed from the DOM)
-	public removeElement() {
-		super.removeElement();
-		this.$contentElement = null; // make sure everything gets rebuilt!
-	}
-
-	// responsible for displaying the skeleton of the view within the already-defined
-	// this.el, a jQuery element.
-	public render() {
-		if (this.$contentElement == null) {
-			this.uuid = "year-" + generateUUID();
-			this.$contentElement = $(`<div class="fc-multi-month-content" id="${this.uuid}">`);
-			this.$contentElement.append('<svg class="svg">');
-			this.el
-				.addClass('fc-multi-month-view')
-				.append(this.$contentElement);
-			this._svg = d3.select<SVGElement, undefined>("#" + this.uuid + " svg");
-		}
-	}
-
-	public updateSize(totalHeight: number, isAuto: boolean, isResize: boolean) {
-		super.updateSize(totalHeight, isAuto, isResize);
-		const newWidth = this.el[0].offsetWidth;
-		if (totalHeight !== this.height || newWidth !== this.width) {
-			this.width = newWidth;
-			this.height = totalHeight;
-			this._svg
-				.style("height", this.height + "px")
-				.style("width", this.width + "px");
-			this.updateMonthDisplays();
-		}
-	}
-
-	// reponsible for rendering the given Event Objects
-	public renderEvents(events: EventObjectInput[]) {
-		this.events = events;
-		this.updateMonthDisplays();
-	}
-
-	public destroyEvents() {
-		// responsible for undoing everything in renderEvents
-	}
-
-	// Renders a visual indication of a selection
-	public renderSelection(range: { start: Moment, end: Moment }) {
-		logger.trace("renderSelection");
-	}
-
-	// responsible for undoing everything in renderSelection
-	public destroySelection() {
-		logger.trace("destroySelection");
-	}
-
-	private getMonthRangesToBeDisplayed(): Month[] {
-		const numberOfMonths = this.intervalEnd.diff(this.intervalStart, "month");
-		const firstMonth = this.intervalStart.clone().startOf("month").stripTime();
-		const monthRanges: Month[] = [];
-		for (let i = 0; i < numberOfMonths; i++) {
-			const monthRange: any = {};
-			monthRange.intervalStart = firstMonth.clone().add(i, "month");
-			monthRange.intervalEnd = firstMonth.clone().add(i + 1, "month");
-			monthRange.start = monthRange.intervalStart.clone().startOf("week");
-			monthRange.end = monthRange.intervalEnd.clone().startOf("week").add(1, "week");
-			monthRange.intervalUnit = "month";
-			monthRanges.push(monthRange);
-		}
-		return monthRanges;
-	}
-
-	private getDisplayedWeeks(monthRange: Month): DisplayedWeek[] {
-		let weeks: DisplayedWeek[] = [];
-		let month = monthRange.intervalStart.month();
-		for (let i = 0; i < 6; i++) {
-			let week = [];
-			for (let j = 0; j < 7; j++) {
-				let day = monthRange.start.clone().add(i * 7 + j, "day");
-				week.push({
-					day: day,
-					foreignMonth: day.month() !== month
-				});
-			}
-			weeks.push(week as DisplayedWeek);
-		}
-		return weeks;
-	}
-
-	private getMonthsPerRow() {
-		let bestNumberOfColumns = Math.ceil(this.width / 270);
-		if (bestNumberOfColumns === 5) {
-			bestNumberOfColumns = 4;
-		} else if (bestNumberOfColumns > 6) {
-			bestNumberOfColumns = 6;
-		}
-
-		let bestNumberOfRows = Math.ceil(this.height / 270);
-		if (bestNumberOfRows === 5) {
-			bestNumberOfRows = 4;
-		} else if (bestNumberOfRows > 6) {
-			bestNumberOfRows = 6;
-		}
-
-		if (bestNumberOfColumns <= 2) {
-			return bestNumberOfColumns; // scroll vertically and do not care for vertical space
-		} else {
-			return bestNumberOfColumns > bestNumberOfRows ? bestNumberOfColumns : 12 / bestNumberOfRows;
-		}
-	}
-
-	// Renders the view into `this.el`, which should already be assigned
-	public renderDates() {
-		// this.updateMonthDisplays();
-	}
-
-	/**
-	 * @deprecated use this.weekDayShortNames instead of calculating this all the time
-	 * @returns {any[]}
-	 */
-	private getWeekDayShortNames(): string[] {
-		let names = [];
-		for (let i = 0; i < 7; i++) {
-			names.push(moment.weekdaysMin()[(this.options.firstDay + i) % 7].substring(0, 1));
-		}
-		return names;
-	}
-
-	private calculateDayOccupationColorsFromEvents(events: EventObjectInput[]) {
-		let segments = this.eventsToSegments(events);
-		let segmentsByDay = this.groupSegmentsByDay(segments);
-
-		let dayOccupationColors: { [dayString: string]: DayOccupationColorAmount[] } = {};
-		Object.keys(segmentsByDay).forEach(dayString => {
-			let segments = segmentsByDay[dayString];
-			dayOccupationColors[dayString] = this.calculateDayOccupationColors(segments);
-		});
-		return dayOccupationColors;
-	}
-
-	private updateMonthDisplays() {
-		if (!this.width || !this.height) {
-			return;
-		}
-
-		const dayOccupationColors = this.calculateDayOccupationColorsFromEvents(this.events);
-
-		const monthRanges = this.getMonthRangesToBeDisplayed();
-
-		let numberOfCols = this.getMonthsPerRow();
-		let numberOfRows = monthRanges.length / numberOfCols;
-		let viewBoxWidth = 2 * this.padding + numberOfCols * this.monthWidth + (numberOfCols - 1) * this.spacing;
-		let viewBoxHeight = Math.max(
-			(this.height / this.width) * viewBoxWidth,
-			2 * this.padding + numberOfRows * this.monthHeight + (numberOfRows - 1) * this.spacing
-		);
-		this._svg.attr("viewBox", `0 0 ${viewBoxWidth} ${viewBoxHeight}`);
-		this._svg.style("height", Math.max(this.height, ((this.width / viewBoxWidth) * viewBoxHeight)) + "px");
-		let calculateMonthPositionTransform = (monthRange: Month, monthIndex: number) => {
-			let x = this.padding + (monthIndex % this.getMonthsPerRow()) * (this.monthWidth + this.spacing);
-			let y = this.padding + Math.floor(monthIndex / this.getMonthsPerRow()) * (this.monthHeight + this.spacing);
-			return `translate(${x},${y})`;
-		};
-
-		let _month = this._svg
-			.selectAll("g.UiCalendar-month")
-			.data(monthRanges);
-		let _monthEnter = _month
-			.enter()
-			.append("g")
-			.classed("UiCalendar-month", true)
-			.attr("transform", calculateMonthPositionTransform);
-		_monthEnter
-			.append("text")
-			.classed("UiCalendar-month-name", true)
-			.text(monthRange => monthRange.intervalStart.format("MMMM"))
-			.attr("x", 0)
-			.attr("y", 10);
-		_month.merge(_monthEnter)
-			.transition()
-			.attr("transform", calculateMonthPositionTransform);
-		_month.merge(_monthEnter)
-			.selectAll("text.UiCalendar-day-name")
-			.data(this.weekDayShortNames)
-			.enter()
-			.append("text")
-			.classed("UiCalendar-day-name", true)
-			.text(name => name)
-			.attr("x", (name, i) => this.firstDayOffsetX + i * this.dayColumnWidth)
-			.attr("y", 25);
-		_month.exit()
-			.remove();
-
-		let _week = _month.merge(_monthEnter)
-			.selectAll("g.UiCalendar-week")
-			.data((monthRange) => this.getDisplayedWeeks(monthRange));
-		let _weekEnter = _week.enter()
-			.append("g")
-			.classed("UiCalendar-week", true)
-			.attr("transform", (week, i) => `translate(0, ${this.firstWeekLineOffset + i * this.weekLineHeight})`);
-		_week.exit()
-			.remove();
-		
-		let _weekNumber = _week.merge(_weekEnter)
-			.selectAll("text.UiCalendar-week-number")
-			.data(week => [week[Math.floor(week.length / 2)]]);
-		let _weekNumberEnter = _weekNumber.enter()
-			.append("text")
-			.classed("UiCalendar-week-number", true)
-			.attr("x", 6);
-		_weekNumber.merge(_weekNumberEnter)
-			.text(day => day.day.isoWeek());
-
-		let _day = _week.merge(_weekEnter)
-			.selectAll("g.UiCalendar-day")
-			.data(week => week);
-		let occupationRadius = (this.weekLineHeight - .5) / 2 - .7;
-		let occupationCircleCenterOffset = -2.5;
-		let _dayEnter = _day.enter()
-			.append("g")
-			.classed("UiCalendar-day", true)
-			.attr("transform", (day, dayIndex) => `translate(${this.firstDayOffsetX + (dayIndex % 7) * this.dayColumnWidth}, 0)`)
-			.call((g) => {
-				g.append("text")
-					.classed("day-number", true);
-				g.append("circle")
-					.classed("day-occupation-background-circle", true);
-			});
-		_day.merge(_dayEnter)
-			.call((g) => {
-				g.select("text.day-number")
-					.text((d) => d.day.date());
-				g.select(".day-occupation-background-circle")
-					.attr("r", occupationRadius)
-					.attr("cy", occupationCircleCenterOffset);
-			})
-			.classed("free", day => {
-				let dayOccupationColorsForDay = dayOccupationColors[this.getDayString(day.day)];
-				return !dayOccupationColorsForDay || dayOccupationColorsForDay.length === 0;
-			})
-			.classed("other-month", (day: DisplayedDay, dayIndex: number) => {
-				return day.foreignMonth;
-			})
-			.classed("weekend", (day: DisplayedDay, dayIndex: number) => day.day.isoWeekday() > 5);
-		_day.exit()
-			.remove();
-
-		let _dayOccupation = _day.merge(_dayEnter).selectAll("path.day-occupation")
-			.data(day => {
-				return dayOccupationColors[this.getDayString(day.day)] || [];
-			});
-		let _dayOccupationEnter = _dayOccupation.enter()
-			.append("path")
-			.classed("day-occupation", true);
-		_dayOccupation.merge(_dayOccupationEnter)
-			.attr("d", (occupation, i, j) => {
-				return this.describeArc(0, occupationCircleCenterOffset, occupationRadius, occupation.startAngle, occupation.endAngle);
-			})
-			.attr("data-duration-in-hours", (occupation, i, j) => (occupation.duration / 3600000))
-			.style("stroke", occupationColor => {
-				return adjustIfColorTooBright(occupationColor.color, 210)
-			});
-		_dayOccupation.exit().remove();
-	}
-
-	private describeArc(centerX: number, centerY: number, radius: number, startAngle: number, endAngle: number) {
-		let startX = centerX + (radius * Math.sin(startAngle));
-		let startY = centerY - radius * Math.cos(startAngle);
-		let endX = centerX + (radius * Math.sin(endAngle));
-		let endY = centerY - radius * Math.cos(endAngle);
-		let largeArc = endAngle - startAngle <= Math.PI ? "0" : "1";
-		let arcSweep = endAngle - startAngle <= Math.PI ? "1" : "0";
-		return `M ${startX} ${startY} A ${radius} ${radius} 0 ${largeArc} 1 ${endX} ${endY}`;
-	}
-
-	/* Events
-	 ------------------------------------------------------------------------------------------------------------------*/
-	private eventsToSegments(events: EventObjectInput[]): Segment[] {
-		let segments: Segment[] = [];
-		for (let i = 0; i < events.length; i++) {
-			let event = events[i];
-			segments.push(...this.eventToSegments(event));
-		}
-		return segments;
-	}
-
-	private eventToSegments(event: EventObjectInput): Segment[] {
-		if ((event.start as Moment).day() === (event.end as Moment).day()
-			&& (event.end as Moment).valueOf() - (event.start as Moment).valueOf() < 86400000 /*day*/) {
-			// return [{
-			// 	start: event.start as Moment,
-			// 	end: event.end as Moment,
-			// 	isStart: true,
-			// 	isEnd: true,
-			// 	event: event
-			// }];
-			return [new Segment(event.start as Moment, event.end as Moment, true, true, event)];
-		} else {
-			let segments: Segment[] = [];
-			let segStart = event.start as Moment;
-			let segEnd = event.start as Moment;
-			while (segEnd.valueOf() < (event.end as Moment).valueOf()) {
-				segStart = segEnd;
-				segEnd = moment.min(event.end as Moment, segStart.clone().startOf("day").add(1, "day"));
-				segments.push(new Segment(segStart, segEnd, segStart.isSame(event.start as Moment), segEnd.isSame(event.end as Moment), event));
-			}
-			return segments;
-		}
-	}
-
-	private groupSegmentsByDay(segments: Segment[]): { [dayString: string]: Segment[] } {
-		let segmentsByDay: { [dayString: string]: Segment[] } = {};
-		for (let i = 0; i < segments.length; i++) {
-			let segment = segments[i];
-			let dayString = this.getDayString(segment.start);
-			if (!segmentsByDay[dayString]) {
-				segmentsByDay[dayString] = [];
-			}
-			segmentsByDay[dayString].push(segment);
-		}
-		return segmentsByDay;
-	}
-
-	private calculateDayOccupationColors(mergableSegments: Segment[]): DayOccupationColorAmount[] {
-		let durationByBackgroundColor: { [color: string]: number } = {};
-		for (let i = 0; i < mergableSegments.length; i++) {
-			let segment: Segment = mergableSegments[i];
-			if (!durationByBackgroundColor[segment.event.backgroundColor]) {
-				durationByBackgroundColor[segment.event.backgroundColor] = 0;
-			}
-			durationByBackgroundColor[segment.event.backgroundColor] += segment.end.valueOf() - (segment.start as Moment).valueOf();
-		}
-
-		let sortedColorDurations: DayOccupationColorAmount[] = Object.keys(durationByBackgroundColor).map(color => {
-			return {
-				color,
-				duration: durationByBackgroundColor[color],
-				startAngle: null,
-				endAngle: null
-			}
-		}).sort((e1, e2) => e2.duration - e1.duration);
-
-		let totalTime = sortedColorDurations.reduce((sum, colorDuration) => sum + colorDuration.duration, 0);
-		let fullOccupation = Math.max(totalTime, this.maxOccupationTime * 3600000);
-		let timeOffset = 0;
-
-		for (let i = 0; i < sortedColorDurations.length; i++) {
-			let colorDuration = sortedColorDurations[i];
-			colorDuration.startAngle = timeOffset / fullOccupation * 2 * Math.PI;
-			let endAngle = (timeOffset + colorDuration.duration) / fullOccupation * 2 * Math.PI;
-			if (colorDuration.startAngle === 0 && endAngle === 2 * Math.PI) {
-				endAngle -= .0001; // else the arc won't be drawn...
-			}
-			colorDuration.endAngle = endAngle;
-			timeOffset += colorDuration.duration;
-		}
-
-		return sortedColorDurations;
-	}
-
-	// this is way(!!) faster thang moment.format("YYYY-MM-DD")
-	private getDayString(moment: Moment) {
-		return `${moment.year()}-${moment.month()}-${moment.date()}`;
-	}
-
-}
-
-
diff --git a/teamapps-client/ts/modules/util/IntervalManager.ts b/teamapps-client/ts/modules/util/IntervalManager.ts
index 83decb42d..18e2513bb 100644
--- a/teamapps-client/ts/modules/util/IntervalManager.ts
+++ b/teamapps-client/ts/modules/util/IntervalManager.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -20,43 +20,48 @@
 import {Logger} from "loglevel";
 import * as log from "loglevel";
 
-export class Interval {
-	constructor(public start: number, public end: number) {
-	}
+export type Interval = [number, number]; 
 
-	public toString() {
-		return "Interval[" + new Date(this.start) + " - " + new Date(this.end) + "]";
-	}
+export function intervalToString(interval: Interval) {
+	return "Interval[" + new Date(interval[0]) + " - " + new Date(interval[1]) + "]";
 }
 
 export class IntervalManager {
 	private log: Logger = log.getLogger((<any>IntervalManager.prototype).name || this.constructor.toString().match(/\w+/g)[1]);
 	private _intervals: Interval[] = []; // sorted!
 
-	public addInterval(newInterval: Interval): Interval[] {
+	public addInterval(newInterval: Interval) {
 		this.log.info("Adding interval: " + newInterval);
-		var {firstOverlappingExistingIntervalIndex, lastOverlappingExistingIntervalIndex, firstLaterIntervalIndex} = this.getFirstAndLastOverlappingExistingIntervalIndex(newInterval);
+		let {
+			firstOverlappingExistingIntervalIndex,
+			lastOverlappingExistingIntervalIndex,
+			firstLaterIntervalIndex
+		} = this.getFirstAndLastOverlappingExistingIntervalIndex(newInterval);
 
 		if (firstOverlappingExistingIntervalIndex === null && lastOverlappingExistingIntervalIndex == null) {
 			this._intervals.splice(firstLaterIntervalIndex, 0, newInterval);
 			this.log.info("NO OVERLAP. New intervals: " + this._intervals.map(interval => interval.toString()).join("; "));
-			return [newInterval];
 		} else {
-			var firstOverlappingInterval = this._intervals[firstOverlappingExistingIntervalIndex];
-			var lastOverlappingInterval = this._intervals[lastOverlappingExistingIntervalIndex];
-			var resultingInterval = new Interval(
-				Math.min(firstOverlappingInterval.start, newInterval.start),
-				Math.max(lastOverlappingInterval.end, newInterval.end)
-			);
-			var result = IntervalManager.subtractIntervals(newInterval, this._intervals.slice(firstOverlappingExistingIntervalIndex, lastOverlappingExistingIntervalIndex + 1));
+			const firstOverlappingInterval = this._intervals[firstOverlappingExistingIntervalIndex];
+			const lastOverlappingInterval = this._intervals[lastOverlappingExistingIntervalIndex];
+			const resultingInterval: Interval = [
+				Math.min(firstOverlappingInterval[0], newInterval[0]),
+				Math.max(lastOverlappingInterval[1], newInterval[1])
+			];
 			this._intervals.splice(firstOverlappingExistingIntervalIndex, lastOverlappingExistingIntervalIndex - firstOverlappingExistingIntervalIndex + 1, resultingInterval);
 			this.log.info("Overlap detected, first: " + firstOverlappingInterval + ", last: " + lastOverlappingInterval + ". New intervals: " + this._intervals.map(interval => interval.toString()).join("; "));
-			return result;
 		}
 	}
 
+	public addIntervals(intervals: Interval[]) {
+		intervals.forEach(interval => this.addInterval(interval))
+	}
+
 	public getUncoveredIntervals(interval: Interval): Interval[] {
-		var {firstOverlappingExistingIntervalIndex, lastOverlappingExistingIntervalIndex} = this.getFirstAndLastOverlappingExistingIntervalIndex(interval);
+		let {
+			firstOverlappingExistingIntervalIndex,
+			lastOverlappingExistingIntervalIndex
+		} = this.getFirstAndLastOverlappingExistingIntervalIndex(interval);
 		if (firstOverlappingExistingIntervalIndex === null && lastOverlappingExistingIntervalIndex == null) {
 			return [interval];
 		} else {
@@ -64,19 +69,23 @@ export class IntervalManager {
 		}
 	}
 
+	public getCoveredIntervals(): Interval[] {
+		return this._intervals;
+	}
+
 	private getFirstAndLastOverlappingExistingIntervalIndex(interval: Interval) {
 		let firstOverlappingExistingIntervalIndex = null;
 		let lastOverlappingExistingIntervalIndex = null;
 		let index = 0;
 		for (; index < this._intervals.length; index++) {
-			var existingInterval = this._intervals[index];
+			const existingInterval = this._intervals[index];
 			if (IntervalManager.intervalsOverlap(existingInterval, interval)) {
 				if (firstOverlappingExistingIntervalIndex === null) {
 					firstOverlappingExistingIntervalIndex = index;
 				}
 				lastOverlappingExistingIntervalIndex = index;
 			}
-			if (existingInterval.end > interval.end) {
+			if (existingInterval[1] > interval[1]) {
 				break;
 			}
 		}
@@ -88,21 +97,21 @@ export class IntervalManager {
 	}
 
 	public static intervalsOverlap(existingInterval: Interval, interval: Interval) {
-		return existingInterval.start <= interval.end && existingInterval.end >= interval.start;
+		return existingInterval[0] <= interval[1] && existingInterval[1] >= interval[0];
 	}
 
 	private static subtractIntervals(minuend: Interval, subtrahends: Interval[]): Interval[] {
-		var currentPosition = minuend.start;
-		var difference: Interval[] = [];
-		for (var i = 0; i < subtrahends.length; i++) {
-			var subtrahend = subtrahends[i];
-			if (currentPosition < subtrahend.start) {
-				difference.push(new Interval(currentPosition, subtrahend.start));
+		let currentPosition = minuend[0];
+		const difference: Interval[] = [];
+		for (let i = 0; i < subtrahends.length; i++) {
+			const subtrahend = subtrahends[i];
+			if (currentPosition < subtrahend[0]) {
+				difference.push([currentPosition, subtrahend[0]]);
 			}
-			currentPosition = subtrahend.end;
+			currentPosition = subtrahend[1];
 		}
-		if (currentPosition < minuend.end) {
-			difference.push(new Interval(currentPosition, minuend.end));
+		if (currentPosition < minuend[1]) {
+			difference.push([currentPosition, minuend[1]]);
 		}
 		return difference;
 	}
diff --git a/teamapps-client/ts/modules/util/MultiStreamsMixer.ts b/teamapps-client/ts/modules/util/MultiStreamsMixer.ts
deleted file mode 100644
index 8b2590c36..000000000
--- a/teamapps-client/ts/modules/util/MultiStreamsMixer.ts
+++ /dev/null
@@ -1,315 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-type MediaStreamAudioDestinationNode = AudioNode & { stream: MediaStream };
-export type MediaStreamWithMixiSizingInfo = MediaStream & { fullcanvas?: boolean, width?: number, height?: number, left?: number, top?: number };
-type EnhancedVideoElement = HTMLVideoElement & { mixSizingInfo?: any };
-
-export class MultiStreamsMixer {
-
-	private inputMediaStreams: MediaStreamWithMixiSizingInfo[];
-	private outputMediaStream: MediaStream;
-
-	private videos: EnhancedVideoElement[] = [];
-	private canvas: HTMLCanvasElement & { stream?: MediaStream };
-	private context: CanvasRenderingContext2D;
-
-	public frameInterval = 10;
-	private isStopDrawingFrames = false;
-
-	// use gain node to prevent echo
-	public useGainNode = true;
-	private audioContext: AudioContext & { createMediaStreamDestination(): MediaStreamAudioDestinationNode };
-	private audioDestination: MediaStreamAudioDestinationNode;
-
-	constructor(inputMediaStreams: MediaStreamWithMixiSizingInfo[]) {
-		this.inputMediaStreams = inputMediaStreams;
-		this.canvas = document.createElement('canvas');
-		this.context = this.canvas.getContext('2d');
-		this.canvas.classList.add('pseudo-hidden');
-		(document.body || document.documentElement).appendChild(this.canvas);
-	}
-
-	private static setSrcObject(stream: MediaStream, element: HTMLMediaElement) {
-		if ('srcObject' in element) {
-			element.srcObject = stream;
-		} else if ('mozSrcObject' in element) {
-			(element as any).mozSrcObject = stream;
-		} else if ('createObjectURL' in URL) {
-			(element as any).src = URL.createObjectURL(stream);
-		} else {
-			alert('createObjectURL/srcObject both are not supported.');
-		}
-	}
-
-	private drawVideosToCanvas() {
-		if (this.isStopDrawingFrames) {
-			return;
-		}
-
-		let fullcanvasVideo: EnhancedVideoElement = null;
-		const remaining: EnhancedVideoElement[] = [];
-		this.videos.forEach((video: EnhancedVideoElement) => {
-			if (!video.mixSizingInfo) {
-				video.mixSizingInfo = {};
-			}
-			if (video.mixSizingInfo.fullcanvas) {
-				fullcanvasVideo = video;
-			} else {
-				remaining.push(video);
-			}
-		});
-
-		if (fullcanvasVideo) {
-			this.canvas.width = fullcanvasVideo.mixSizingInfo.width;
-			this.canvas.height = fullcanvasVideo.mixSizingInfo.height;
-		} else if (remaining.length) {
-			const videosLength = this.videos.length;
-			this.canvas.width = videosLength > 1 ? remaining[0].width * 2 : remaining[0].width;
-
-			let height = 1;
-			if (videosLength === 3 || videosLength === 4) {
-				height = 2;
-			}
-			if (videosLength === 5 || videosLength === 6) {
-				height = 3;
-			}
-			if (videosLength === 7 || videosLength === 8) {
-				height = 4;
-			}
-			if (videosLength === 9 || videosLength === 10) {
-				height = 5;
-			}
-			this.canvas.height = remaining[0].height * height;
-		} else {
-			this.canvas.width = 360;
-			this.canvas.height = 240;
-		}
-
-		if (fullcanvasVideo && fullcanvasVideo instanceof HTMLVideoElement) {
-			this.drawImage(fullcanvasVideo);
-		}
-
-		remaining.forEach((video, idx) => {
-			this.drawImage(video, idx);
-		});
-
-		setTimeout(() => this.drawVideosToCanvas(), this.frameInterval);
-	}
-
-	private drawImage(video: EnhancedVideoElement, idx = 0) {
-		if (this.isStopDrawingFrames) {
-			return;
-		}
-
-		let x = 0;
-		let y = 0;
-		let width = video.width;
-		let height = video.height;
-
-		if (idx === 1) {
-			x = video.width;
-		}
-
-		if (idx === 2) {
-			y = video.height;
-		}
-
-		if (idx === 3) {
-			x = video.width;
-			y = video.height;
-		}
-
-		if (idx === 4) {
-			y = video.height * 2;
-		}
-
-		if (idx === 5) {
-			x = video.width;
-			y = video.height * 2;
-		}
-
-		if (idx === 6) {
-			y = video.height * 3;
-		}
-
-		if (idx === 7) {
-			x = video.width;
-			y = video.height * 3;
-		}
-
-		if (typeof video.mixSizingInfo.left !== 'undefined') {
-			x = video.mixSizingInfo.left;
-		}
-
-		if (typeof video.mixSizingInfo.top !== 'undefined') {
-			y = video.mixSizingInfo.top;
-		}
-
-		if (typeof video.mixSizingInfo.width !== 'undefined') {
-			width = video.mixSizingInfo.width;
-		}
-
-		if (typeof video.mixSizingInfo.height !== 'undefined') {
-			height = video.mixSizingInfo.height;
-		}
-
-		this.context.drawImage(video, x, y, width, height);
-
-		if (typeof video.mixSizingInfo.onRender === 'function') {
-			video.mixSizingInfo.onRender(this.context, x, y, width, height, idx);
-		}
-	}
-
-	public getMixedStream() {
-		if (this.outputMediaStream == null) {
-			if (this.inputMediaStreams.length > 1) {
-				const mixedVideoStream = this.getMixedVideoStream();
-				const mixedAudioStream = this.getMixedAudioStream();
-				if (mixedAudioStream) {
-					mixedAudioStream.getTracks().filter((t) => {
-						return t.kind === 'audio';
-					}).forEach((track) => {
-						mixedVideoStream.addTrack(track);
-					});
-				}
-
-				let fullcanvas;
-				this.inputMediaStreams.forEach((stream) => {
-					if (stream.fullcanvas) {
-						fullcanvas = true;
-					}
-				});
-
-				this.drawVideosToCanvas();
-
-				this.outputMediaStream = mixedVideoStream;
-			} else {
-				this.outputMediaStream = this.inputMediaStreams[0];
-			}
-		}
-		return this.outputMediaStream;
-	}
-
-	public getInputMediaStreams() {
-		return this.inputMediaStreams;
-	}
-
-	private getMixedVideoStream() {
-		this.resetVideoStreams();
-
-		const videoStream = new MediaStream();
-
-		const capturedStream = ((this.canvas as any).captureStream && (this.canvas as any).captureStream())
-			|| ((this.canvas as any).mozCaptureStream && (this.canvas as any).mozCaptureStream());
-		capturedStream.getTracks().filter((t: MediaStreamTrack) => {
-			return t.kind === 'video';
-		}).forEach((track: MediaStreamTrack) => {
-			videoStream.addTrack(track);
-		});
-
-		this.canvas.stream = videoStream;
-		return videoStream;
-	}
-
-	private getMixedAudioStream(): MediaStream {
-		this.audioContext = new ((window as any).AudioContext || (window as any).webkitAudioContext || (window as any).mozAudioContext)();
-
-		let gainNode: GainNode;
-		if (this.useGainNode === true) {
-			gainNode = this.audioContext.createGain();
-			gainNode.connect(this.audioContext.destination);
-			gainNode.gain.value = 0; // don't hear self
-		}
-
-		const audioSources: MediaStreamAudioSourceNode[] = [];
-		let audioTracksLength = 0;
-		this.inputMediaStreams.forEach((stream) => {
-			if (!stream.getTracks().filter((t) => {
-				return t.kind === 'audio';
-			}).length) {
-				return;
-			}
-
-			audioTracksLength++;
-
-			const audioSource: MediaStreamAudioSourceNode = this.audioContext.createMediaStreamSource(stream);
-
-			if (this.useGainNode === true) {
-				audioSource.connect(gainNode);
-			}
-
-			audioSources.push(audioSource);
-		});
-
-		if (!audioTracksLength) {
-			return;
-		}
-
-		this.audioDestination = this.audioContext.createMediaStreamDestination();
-		audioSources.forEach((audioSource) => {
-			audioSource.connect(this.audioDestination);
-		});
-		return this.audioDestination.stream;
-	}
-
-	private createVideo(stream: MediaStreamWithMixiSizingInfo): EnhancedVideoElement {
-		const video = document.createElement('video');
-
-		MultiStreamsMixer.setSrcObject(stream, video);
-
-		video.muted = true;
-		video.volume = 0;
-
-		video.width = stream.width;
-		video.height = stream.height;
-
-		video.play();
-
-		return video;
-	}
-
-	public close() {
-		this.inputMediaStreams.forEach(ms => ms.getTracks().forEach(t => t.stop()));
-		this.canvas.remove();
-	};
-
-
-	public resetVideoStreams(streams: MediaStream[] = this.inputMediaStreams) {
-		this.videos = [];
-		if (streams && !Array.isArray(streams)) {
-			streams = [streams];
-		}
-		streams = streams || this.inputMediaStreams;
-
-		// via: @adrian-ber
-		streams.forEach((stream) => {
-			if (!stream.getTracks().filter((t) => {
-				return t.kind === 'video';
-			}).length) {
-				return;
-			}
-
-			const video = this.createVideo(stream);
-			video.mixSizingInfo = stream;
-			this.videos.push(video);
-		});
-	}
-
-}
diff --git a/teamapps-client/ts/modules/util/NumberParser.ts b/teamapps-client/ts/modules/util/NumberParser.ts
new file mode 100644
index 000000000..c4ed76d55
--- /dev/null
+++ b/teamapps-client/ts/modules/util/NumberParser.ts
@@ -0,0 +1,74 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+export class NumberParser {
+
+	private readonly digitsByNumeral: Map<string, string>;
+	private readonly groupSeparatorRegex: RegExp;
+	private readonly decimalSeparatorRegex: RegExp;
+	private readonly numeralRegex: RegExp;
+	private readonly unknownRegex: RegExp;
+
+	constructor(locale: string) {
+		const numerals: string[] = NumberParser.getNumeralsForLocale(locale);
+		this.digitsByNumeral = new Map(numerals.map((d, i) => [d, "" + i]));
+		const decimalSeparator = NumberParser.getDecimalSeparatorForLocale(locale);
+		const groupSeparator = NumberParser.getGroupSeparatorForLocale(locale);
+		this.decimalSeparatorRegex = new RegExp(`[${decimalSeparator}]`);
+		this.groupSeparatorRegex = new RegExp(`[${groupSeparator}]`, "g");
+		this.numeralRegex = new RegExp(`[${numerals.join("")}]`, "g");
+		this.unknownRegex = new RegExp(`[^${numerals.join("")}${groupSeparator}${decimalSeparator}0123456789]`, "g");
+	}
+
+	parse(string: string, allowUnknownCharacters = false) {
+		let numberString = string.trim()
+			.replace(this.groupSeparatorRegex, "")
+			.replace(this.decimalSeparatorRegex, ".")
+			.replace(this.numeralRegex, numeral => this.digitsByNumeral.get(numeral));
+		if (allowUnknownCharacters) {
+			numberString = numberString.replace(this.unknownRegex, "");
+		}
+		return numberString ? +numberString : NaN;
+	}
+
+	public static getNumeralsForLocale(locale: string) {
+		let numerals: string = new Intl.NumberFormat(locale, {useGrouping: false}).format(9876543210);
+		return numerals.split('').reverse();
+	}
+
+	public static getGroupSeparatorForLocale(locale: string) {
+		const parts = new Intl.NumberFormat(locale, {useGrouping: true}).formatToParts(12345.6);
+		return parts.find(d => d.type === "group").value;
+	}
+
+	public static getDecimalSeparatorForLocale(locale: string) {
+		const parts = new Intl.NumberFormat(locale).formatToParts(12345.6);
+		return parts.find(d => d.type === "decimal").value;
+	}
+
+	public static getGroupSeparatorForFormat(format: Intl.NumberFormat) {
+		const parts: any[] = (format as any).formatToParts(12345.6); // TODO add types once typescript has this
+		return parts.find(d => d.type === "group").value;
+	}
+
+	public static getDecimalSeparatorForFormat(format: Intl.NumberFormat) {
+		const parts: any[] = (format as any).formatToParts(5.6); // TODO add types once typescript has this
+		return parts.find(d => d.type === "decimal")?.value ?? '.';
+	}
+}
diff --git a/teamapps-client/ts/modules/util/OrderedDictionary.ts b/teamapps-client/ts/modules/util/OrderedDictionary.ts
index d4c95d3b6..a5d22cabc 100644
--- a/teamapps-client/ts/modules/util/OrderedDictionary.ts
+++ b/teamapps-client/ts/modules/util/OrderedDictionary.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-client/ts/modules/util/QueuedDecorator.ts b/teamapps-client/ts/modules/util/QueuedDecorator.ts
new file mode 100644
index 000000000..47d784efd
--- /dev/null
+++ b/teamapps-client/ts/modules/util/QueuedDecorator.ts
@@ -0,0 +1,82 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+/**
+ * Wraps an async function so that every call is queued (FIFO) until fn finishes
+ *
+ * @param fn your async function
+ * @returns a scheduler with the same parameters, returning the original promise
+ */
+function makeQueue<T extends any[], R>(
+	fn: (...args: T) => Promise<R>,
+): (...args: T) => Promise<R> {
+	interface IJob {
+		args: T;
+		resolvers: Array<{ resolve: (v: R) => void; reject: (e: any) => void; }>;
+	}
+
+	let running = false;
+	const queue: IJob[] = [];
+	const run = (job: IJob) => {
+		running = true;
+		fn(...job.args)
+			.then(res => job.resolvers.forEach(r => r.resolve(res)), err => job.resolvers.forEach(r => r.reject(err)))
+			.finally(() => {
+				const next = queue.shift();
+				running = false;
+				if (next) {
+					run(next);
+				}
+			});
+	};
+
+	return (...args: T): Promise<R> => {
+		return new Promise<R>((resolve, reject) => {
+			if (running) {
+				queue.push({args, resolvers: [{resolve, reject}]});
+			} else {
+				// idle → run immediately
+				run({args, resolvers: [{resolve, reject}]});
+			}
+		});
+	};
+}
+
+/**
+ * Decorator to queue a method call if it is called while the method is already running.
+ */
+function Queued() {
+	return (
+		target: any,
+		propertyKey: string,
+		descriptor: PropertyDescriptor
+	) => {
+		const original = descriptor.value;
+		const wrapperKey = Symbol(`__queue_${propertyKey}`);
+
+		descriptor.value = function(...args: any[]) {
+			// on first call, create & store the queued wrapper bound to this instance
+			if (!this[wrapperKey]) {
+				this[wrapperKey] = makeQueue(original.bind(this));
+			}
+			// delegate to the queued wrapper
+			return this[wrapperKey](...args);
+		};
+	};
+}
diff --git a/teamapps-client/ts/modules/util/RefreshableComponentProxyHandle.ts b/teamapps-client/ts/modules/util/RefreshableComponentProxyHandle.ts
index 0e395a976..552ae809d 100644
--- a/teamapps-client/ts/modules/util/RefreshableComponentProxyHandle.ts
+++ b/teamapps-client/ts/modules/util/RefreshableComponentProxyHandle.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,13 +19,13 @@
  */
 import {insertAtIndex} from "../Common";
 import {TeamAppsEvent} from "./TeamAppsEvent";
-import {UiComponent} from "../UiComponent";
 import {SimpleObjectProxy} from "./SimpleObjectProxy";
 import * as log from "loglevel";
+import {UiComponent} from "../UiComponent";
 
 const logger = log.getLogger("RefreshableComponentProxyHandle");
 
-export class RefreshableComponentProxyHandle<T extends UiComponent> {
+export class RefreshableComponentProxyHandle<T extends UiComponent = UiComponent> {
 	public proxy: T;
 	private _component: T;
 
@@ -63,14 +63,13 @@ export class RefreshableComponentProxyHandle<T extends UiComponent> {
 			}
 		});
 
-		let parentElement: HTMLElement = oldComponent.getMainDomElement()[0].parentElement;
-		const elementIndex = this.getElementIndex(oldComponent.getMainDomElement()[0]);
+		let parentElement: HTMLElement = oldComponent.getMainElement().parentElement;
+		const elementIndex = this.getElementIndex(oldComponent.getMainElement());
 		if (parentElement != null) {
-			insertAtIndex(parentElement, newComponent.getMainDomElement(), elementIndex);
-			newComponent.attachedToDom = true;
+			insertAtIndex(parentElement, newComponent.getMainElement(), elementIndex);
 		}
 
-		oldComponent.getMainDomElement().detach();
+		oldComponent.getMainElement().remove();
 		oldComponent.destroy();
 		this._component = newComponent;
 	}
@@ -80,3 +79,7 @@ export class RefreshableComponentProxyHandle<T extends UiComponent> {
 		return parentElement != null ? Array.from(parentElement.children).indexOf(childElement) : null;
 	}
 }
+
+export function isRefreshableComponentProxyHandle(o: any): o is RefreshableComponentProxyHandle<any> {
+	return o != null && o.proxy && o.component;
+}
diff --git a/teamapps-client/ts/modules/util/ScreenCapturing.ts b/teamapps-client/ts/modules/util/ScreenCapturing.ts
index 1d88062f7..ad4de4021 100644
--- a/teamapps-client/ts/modules/util/ScreenCapturing.ts
+++ b/teamapps-client/ts/modules/util/ScreenCapturing.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -31,11 +31,13 @@ window.addEventListener('message', function (event) {
 
 	// extension notified his presence
 	if (event.data === 'screen-sharing-extension-loaded') {
+		console.log("screen-sharing-extension-loaded", event.data);
 		chromeMediaSource = 'desktop';
 	}
 
 	// extension shared temp sourceId
 	if (event.data.sourceId && screenCallback) {
+		console.log("sourceId!!", event.data);
 		sourceId = event.data.sourceId;
 		screenCallback(event.data.sourceId, event.data.canRequestAudioTrack === true);
 	}
@@ -97,7 +99,7 @@ export const isFirefox = typeof (window as any).InstallTrigger !== 'undefined';
 export const isOpera = !!(window as any).opera || navigator.userAgent.indexOf(' OPR/') >= 0;
 export const isChrome = !!(window as any).chrome && !isOpera;
 
-export function getChromeExtensionStatus(callback: Function, extensionid = 'ajhifddimkapgcifgcodmmfdlknahffk') {
+export function getChromeExtensionStatus(callback: Function, extensionid:string /* 'ajhifddimkapgcifgcodmmfdlknahffk' */) {
 	if (!isChrome) return callback('not-chrome');
 
 	const image = document.createElement('img');
@@ -116,12 +118,8 @@ export function getChromeExtensionStatus(callback: Function, extensionid = 'ajhi
 	};
 }
 
-export async function getScreenConstraintsWithAudio() {
-	return getScreenConstraints(true);
-}
-
 // this function explains how to use above methods/objects
-export async function getScreenConstraints(captureSourceIdWithAudio: boolean = false): Promise<object> {
+export async function getScreenConstraints(options: {captureSourceIdWithAudio?: boolean, maxWidth?: number, maxHeight?: number} = {}): Promise<object> {
 	if (isFirefox) {
 		return {
 			mozMediaSource: 'window',
@@ -129,22 +127,17 @@ export async function getScreenConstraints(captureSourceIdWithAudio: boolean = f
 		};
 	}
 
-	// this statement defines getUserMedia constraints
-	// that will be used to capture content of screen
 	const screenConstraints: any = {
 		mandatory: {
 			chromeMediaSource: chromeMediaSource,
-			maxWidth: screen.width > 1920 ? screen.width : 1920,
-			maxHeight: screen.height > 1080 ? screen.height : 1080
+			maxWidth: options.maxWidth,
+			maxHeight: options.maxHeight
 		},
 		optional: []
 	};
 
-	// this statement verifies chrome extension availability
-	// if installed and available then it will invoke extension API
-	// otherwise it will fallback to command-line based screen capturing API
 	if (chromeMediaSource === 'desktop') {
-		if (captureSourceIdWithAudio) {
+		if (options.captureSourceIdWithAudio) {
 			const sourceIdWithAudio = await getSourceIdWithAudio();
 			screenConstraints.mandatory.chromeMediaSourceId = sourceIdWithAudio.sourceId;
 			if (sourceIdWithAudio.canRequestAudioTrack) {
diff --git a/teamapps-client/ts/modules/util/SimpleObjectProxy.ts b/teamapps-client/ts/modules/util/SimpleObjectProxy.ts
index 9b0b03b19..b52e50538 100644
--- a/teamapps-client/ts/modules/util/SimpleObjectProxy.ts
+++ b/teamapps-client/ts/modules/util/SimpleObjectProxy.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-client/ts/modules/util/StaticIcons.ts b/teamapps-client/ts/modules/util/StaticIcons.ts
index 5f6cd62ad..82fd77b55 100644
--- a/teamapps-client/ts/modules/util/StaticIcons.ts
+++ b/teamapps-client/ts/modules/util/StaticIcons.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-client/ts/modules/util/TeamAppsEvent.ts b/teamapps-client/ts/modules/util/TeamAppsEvent.ts
index 34209b236..2e289f01d 100644
--- a/teamapps-client/ts/modules/util/TeamAppsEvent.ts
+++ b/teamapps-client/ts/modules/util/TeamAppsEvent.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -18,8 +18,14 @@
  * =========================LICENSE_END==================================
  */
 import {debounce, DebounceMode} from "./debounce";
+import {throttle} from "./throttle";
+import {deepEquals} from "../Common";
 
-export type TeamAppsEventListener<EO> = (eventObject?: EO, emitter?: any) => void;
+export type TeamAppsEventListener<EO> = (eventObject?: EO) => void;
+
+export interface EventSubscription {
+	unsubscribe(): void
+}
 
 /**
  * @param EO the event object type
@@ -29,14 +35,24 @@ export class TeamAppsEvent<EO> {
 	private listeners: TeamAppsEventListener<EO>[] = [];
 	private previousEventObject: EO = undefined;
 
-	constructor(private eventSource: any, private debounceDelay = 0, private debounceMode = DebounceMode.BOTH) {
+	public fire: (eventObject: EO) => void;
+
+	constructor(options?: { throttlingMode: "throttle" | "debounce"; delay: number; debounceMode?: DebounceMode }) {
+		if (options?.throttlingMode === "debounce") {
+			this.fire = debounce(this._fire.bind(this), options.delay, options.debounceMode ?? DebounceMode.BOTH);
+		} else if (options?.throttlingMode === "throttle") {
+			this.fire = throttle(this._fire.bind(this), options.delay);
+		} else {
+			this.fire = this._fire.bind(this);
+		}
 	}
 
-	public addListener(fn: TeamAppsEventListener<EO>, allowDuplicates = false) {
+	public addListener(fn: TeamAppsEventListener<EO>, allowDuplicates = false): EventSubscription {
 		if (!allowDuplicates) {
 			this.listeners = this.listeners.filter(l => l !== fn);
 		}
 		this.listeners.push(fn);
+		return {unsubscribe: () => this.removeListener(fn)};
 	};
 
 	public removeListener(fn: TeamAppsEventListener<EO>) {
@@ -48,19 +64,22 @@ export class TeamAppsEvent<EO> {
 
 	private _fire(eventObject: EO) {
 		for (let i = 0; i < this.listeners.length; i++) {
-			this.listeners[i].call(null, eventObject, this.eventSource);
+			this.listeners[i].call(null, eventObject);
 		}
 		this.previousEventObject = eventObject;
 	};
 
-	public fire: (eventObject: EO) => void = debounce(this._fire.bind(this), this.debounceDelay, this.debounceMode);
 
 	public fireIfChanged(eventObject: EO) {
-		if (this.previousEventObject !== eventObject) {
+		if (this.previousEventObject === undefined || !deepEquals(this.previousEventObject, eventObject)) {
 			this.fire(eventObject);
 			this.previousEventObject = eventObject;
 		}
-	};
+	}
+
+	public resetChangeValue() {
+		this.previousEventObject = undefined;
+	}
 
 	public getListeners() {
 		return this.listeners.slice();
diff --git a/teamapps-client/ts/modules/util/UiGridTemplates.ts b/teamapps-client/ts/modules/util/UiGridTemplates.ts
index 35bb1af6d..4580e9fff 100644
--- a/teamapps-client/ts/modules/util/UiGridTemplates.ts
+++ b/teamapps-client/ts/modules/util/UiGridTemplates.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -23,7 +23,6 @@ import {
 	createImageSizingCssObject,
 	createTextAlignmentCssString,
 	createUiBorderCssString,
-	createUiColorCssString,
 	createUiFontStyleCssString,
 	createUiShadowCssString,
 	createUiSpacingCssString,
@@ -31,7 +30,6 @@ import {
 	cssObjectToString,
 	cssVerticalAlignmentByUiVerticalAlignment
 } from "./CssFormatUtil";
-import {IconPathProvider} from "../TeamAppsUiContext";
 import * as log from "loglevel";
 import {UiTextElementConfig} from "../../generated/UiTextElementConfig";
 import {UiBadgeElementConfig} from "../../generated/UiBadgeElementConfig";
@@ -48,32 +46,34 @@ function createTextElementRenderer(element: UiTextElementConfig, additionalCssCl
 		+ (`white-space:${element.wrapLines ? 'normal' : 'nowrap'};`)
 		+ (createUiSpacingCssString("padding", element.padding))
 		+ (createTextAlignmentCssString(element.textAlignment));
-	const backgroundColorCss = element.backgroundColor ? (`background-color: ${createUiColorCssString(element.backgroundColor)};`) : '';
+	const backgroundColorCss = element.backgroundColor ? (`background-color: ${(element.backgroundColor ?? '')};`) : '';
 	return (data: any) => {
-		let value = data[element.dataKey];
+		let value = data[element.property];
 		if (value == null) {
 			return "";
 		} else if (element.fontStyle != null && element.fontStyle.backgroundColor) {
 			return `<div class="grid-template-element UiTextElement wrapper ${additionalCssClass || ''}" style="${elementStyleCssString} ${backgroundColorCss} ${additionalStyles || ''}">
-	<span data-key="${element.dataKey}" style="${fontStyleCssString}">${value || ''}</span>
+	<span data-key="${element.property}" style="${fontStyleCssString}">${value || ''}</span>
 </div>`;
 		} else {
-			return `<span data-key="${element.dataKey}" class="grid-template-element UiTextElement ${additionalCssClass || ''}" style="${fontStyleCssString} ${elementStyleCssString} ${backgroundColorCss} ${additionalStyles || ''}">${value || ''}</span>`;
+			return `<span data-key="${element.property}" class="grid-template-element UiTextElement ${additionalCssClass || ''}" style="${fontStyleCssString} ${elementStyleCssString} ${backgroundColorCss} ${additionalStyles || ''}">${value || ''}</span>`;
 		}
 	};
 }
 
 function createBadgeElementRenderer(element: UiBadgeElementConfig, additionalCss: string): RenderingFunction {
-	const borderStyle = `border: 1px solid ${element.borderColor ? createUiColorCssString(element.borderColor) : 'transparent'};`;
+	const borderStyle = `border: 1px solid ${element.borderColor ? element.borderColor ?? '' : 'transparent'};`;
 	return createTextElementRenderer(element, 'UiBadgeElement', borderStyle + additionalCss);
 }
 
-function createFloatingElementRenderer(element: UiFloatingElementConfig, iconPathProvider: IconPathProvider, additionalCss: string): RenderingFunction {
-	const elementRenderers = element.elements.map(subElement => createElementRenderer(subElement, iconPathProvider));
+function createFloatingElementRenderer(element: UiFloatingElementConfig, additionalCss: string): RenderingFunction {
+	const elementRenderers = element.elements.map(subElement => createElementRenderer(subElement));
 	const wrapCss = `flex-wrap: ${element.wrap ? 'wrap' : 'nowrap'};`;
-	const backgroundColorCss = element.backgroundColor ? (`background-color: ${createUiColorCssString(element.backgroundColor)};`) : '';
+	const backgroundColorCss = element.backgroundColor ? (`background-color: ${(element.backgroundColor ?? '')};`) : '';
+	const alignItemsCss = `align-items: ${element.alignItems ?? 'flex-start'};`;
+	const justifyContentCss = `justify-content: ${element.justifyContent ?? 'start'};`;
 	return (data: any) => {
-		return `<div class='grid-template-element UiFloatingElement' style="${wrapCss} ${backgroundColorCss} ${additionalCss}">${elementRenderers.map(renderer => renderer(data)).join('')}</div>`;
+		return `<div class='grid-template-element UiFloatingElement' style="${wrapCss} ${backgroundColorCss} ${alignItemsCss} ${justifyContentCss} ${additionalCss}">${elementRenderers.map(renderer => renderer(data)).join('')}</div>`;
 	};
 }
 
@@ -84,27 +84,26 @@ function createImageElementRenderer(element: UiImageElementConfig, additionalCss
 		+ createUiSpacingCssString("padding", element.padding)
 		+ createUiShadowCssString(element.shadow)
 		+ cssObjectToString(createImageSizingCssObject(element.imageSizing))
-		+ (element.backgroundColor ? (`background-color: ${createUiColorCssString(element.backgroundColor)};`) : '');
+		+ (element.backgroundColor ? (`background-color: ${(element.backgroundColor ?? '')};`) : '');
 	return (data: any) => {
-		let value = data[element.dataKey];
+		let value = data[element.property];
 		if (value != null) {
 			const backgroundImage = `background-image: url('${value}');`;
-			return `<div data-key="${element.dataKey}" class="grid-template-element UiImageElement" style="${style} ${backgroundImage} ${additionalCss}"></div>`;
+			return `<div data-key="${element.property}" class="grid-template-element UiImageElement" style="${style} ${backgroundImage} ${additionalCss}"></div>`;
 		} else {
 			return '';
 		}
 	};
 }
 
-function createIconElementRenderer(element: UiIconElementConfig, iconPathProvider: IconPathProvider, additionalCss: string): RenderingFunction {
+function createIconElementRenderer(element: UiIconElementConfig, additionalCss: string): RenderingFunction {
 	const style = `width:${element.size}px; height:${element.size}px; background-size:${element.size}px;`;
-	const backgroundColorCss = element.backgroundColor ? (`background-color: ${createUiColorCssString(element.backgroundColor)};`) : '';
+	const backgroundColorCss = element.backgroundColor ? (`background-color: ${(element.backgroundColor ?? '')};`) : '';
 	return (data: any) => {
-		let value = data[element.dataKey];
+		let value = data[element.property];
 		if (value != null) {
-			let iconPath = iconPathProvider.getIconPath(value, element.size);
-			const backgroundImage = iconPath ? `background-image: url('${iconPath}');` : '';
-			return `<div data-key="${element.dataKey}" class="grid-template-element UiIconElement" style="${style} ${backgroundImage} ${backgroundColorCss} ${additionalCss}"></div>`;
+			const backgroundImage = value ? `background-image: url('${value}');` : '';
+			return `<div data-key="${element.property}" class="grid-template-element UiIconElement" style="${style} ${backgroundImage} ${backgroundColorCss} ${additionalCss}"></div>`;
 		} else {
 			return '';
 		}
@@ -113,35 +112,44 @@ function createIconElementRenderer(element: UiIconElementConfig, iconPathProvide
 
 function createGlyphIconElementRenderer(element: UiGlyphIconElementConfig, additionalCss: string): RenderingFunction {
 	const style = `font-size:${element.size}px; text-align: center;`;
-	const backgroundColorCss = element.backgroundColor ? (`background-color: ${createUiColorCssString(element.backgroundColor)};`) : '';
+	const backgroundColorCss = element.backgroundColor ? (`background-color: ${(element.backgroundColor ?? '')};`) : '';
 	return (data: any) => {
-		let value = data[element.dataKey];
+		let value = data[element.property];
 		if (value == null) {
 			return "";
 		} else {
-			return `<div data-key="${element.dataKey}" class="grid-template-element UiGlyphIconElement fas fa-${value}" style="${style} ${backgroundColorCss} ${additionalCss}')"></div>`;
+			return `<div data-key="${element.property}" class="grid-template-element UiGlyphIconElement fas fa-${value}" style="${style} ${backgroundColorCss} ${additionalCss}')"></div>`;
 		}
 	};
 }
 
-function createElementRenderer(element: AbstractUiTemplateElementConfig, iconPathProvider: IconPathProvider, additionalCss = ""): RenderingFunction {
+function createElementRenderer(element: AbstractUiTemplateElementConfig, additionalCss = ""): RenderingFunction {
 	const column = `grid-column: ${element.column + 1} / ${element.column + element.colSpan + 1};`;
 	const row = `grid-row: ${element.row + 1} / ${element.row + element.rowSpan + 1};`;
 	const horizontalAlignmentCss = `justify-self: ${cssHorizontalAlignmentByUiVerticalAlignment[element.horizontalAlignment]};`;
 	const verticalAlignmentCss = `align-self: ${cssVerticalAlignmentByUiVerticalAlignment[element.verticalAlignment]};`;
 
-	let totalCss = additionalCss + column + row + horizontalAlignmentCss + verticalAlignmentCss;
+	let marginCss: string = "";
+	if (additionalCss.indexOf("margin:") === -1) {
+		let marginTop = (element.margin && element.margin.top || 0);
+		let marginRight = (element.margin && element.margin.right || 0);
+		let marginBottom = (element.margin && element.margin.bottom || 0);
+		let marginLeft = (element.margin && element.margin.left || 0);
+		marginCss = `margin: ${marginTop}px ${marginRight}px ${marginBottom}px ${marginLeft}px;`;
+	}
+
+	let totalCss = marginCss + additionalCss + column + row + horizontalAlignmentCss + verticalAlignmentCss;
 
 	if (isUiTextElement(element)) {
 		return createTextElementRenderer(element, null, totalCss);
 	} else if (isUiBadgeElement(element)) {
 		return createBadgeElementRenderer(element, totalCss);
 	} else if (isUiFloatingElement(element)) {
-		return createFloatingElementRenderer(element, iconPathProvider, totalCss);
+		return createFloatingElementRenderer(element, totalCss);
 	} else if (isUiImageElement(element)) {
 		return createImageElementRenderer(element, totalCss);
 	} else if (isUiIconElement(element)) {
-		return createIconElementRenderer(element, iconPathProvider, totalCss);
+		return createIconElementRenderer(element, totalCss);
 	} else if (isUiGlyphIconElement(element)) {
 		return createGlyphIconElementRenderer(element, totalCss);
 	}
@@ -171,7 +179,7 @@ export function isUiGlyphIconElement(element: AbstractUiTemplateElementConfig):
 	return element._type === "UiGlyphIconElement";
 }
 
-export function createGridTemplateRenderer(template: UiGridTemplateConfig, iconPathProvider: IconPathProvider, idPropertyName: string): Renderer {
+export function createGridTemplateRenderer(template: UiGridTemplateConfig, idPropertyName: string): Renderer {
 	const renderers = template.elements.map(element => {
 
 		let startColumn = template.columns[element.column];
@@ -193,23 +201,29 @@ export function createGridTemplateRenderer(template: UiGridTemplateConfig, iconP
 
 		// TODO handle element's own padding!!!
 
-		return createElementRenderer(element, iconPathProvider, marginCss);
+		return createElementRenderer(element, marginCss);
 	});
 
 	const gridTemplateColumnsString = 'grid-template-columns:' + template.columns.map(column => createCssGridRowOrColumnString(column.widthPolicy)).join(" ") + ';';
 	const gridTemplateRowsString = 'grid-template-rows:' + template.rows.map(row => createCssGridRowOrColumnString(row.heightPolicy)).join(" ") + ';';
 	const paddingCss = createUiSpacingCssString("padding", template.padding);
 	const gridGapCss = 'grid-gap:' + template.gridGap + 'px;';
-	const maxWidthCss = template.maxWidth ? `max-width: ${template.maxWidth}px;` : '';
-	const maxHeightCss = template.maxHeight ? `max-height: ${template.maxHeight}px;` : '';
-	const gridCss = `${gridTemplateColumnsString} ${gridTemplateRowsString} ${paddingCss} ${gridGapCss} ${maxWidthCss} ${maxHeightCss}`;
+	const maxWidthCss = template.maxWidth >= 0 ? `max-width: ${template.maxWidth}px;` : '';
+	const maxHeightCss = template.maxHeight >= 0? `max-height: ${template.maxHeight}px;` : '';
+	const minWidthCss = template.minWidth ? `min-width: ${template.minWidth}px;` : '';
+	const minHeightCss = template.minHeight ? `min-height: ${template.minHeight}px;` : '';
+	const backgroundColorCss = template.backgroundColor ? (`background-color: ${(template.backgroundColor ?? '')};`) : '';
+	const borderCss = createUiBorderCssString(template.border);
+	const gridCss = `${gridTemplateColumnsString} ${gridTemplateRowsString} ${paddingCss} ${gridGapCss} ${minWidthCss} ${minHeightCss} ${maxWidthCss} ${maxHeightCss} ${backgroundColorCss} ${borderCss}`;
 
 	return {
 		render: (data: any) => {
 			if (data == null) {
 				return '';
 			} else {
-				return `<div class="UiGridTemplate" style="${gridCss}" ${data[idPropertyName] ? `data-id="${data[idPropertyName]}"` : ''}>
+				let ariaLabel = data[template.ariaLabelProperty];
+				let title = data[template.titleProperty];
+				return `<div class="UiGridTemplate" style="${gridCss}" ${data[idPropertyName] ? `data-id="${data[idPropertyName]}"` : ''} ${ariaLabel != null ? `aria-label="${ariaLabel}"` : ''} ${title != null ? `title="${title}"` : ""}>
 	${renderers.map(renderer => renderer(data)).join("")}
 </div>`;
 			}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/application/ApplicationGroup.java b/teamapps-client/ts/modules/util/UiHtmlTemplates.ts
similarity index 58%
rename from teamapps-ux/src/main/java/org/teamapps/ux/application/ApplicationGroup.java
rename to teamapps-client/ts/modules/util/UiHtmlTemplates.ts
index 71f517c8b..ddfe165ee 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/application/ApplicationGroup.java
+++ b/teamapps-client/ts/modules/util/UiHtmlTemplates.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,34 +17,21 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-package org.teamapps.ux.application;
-
-import org.teamapps.icons.api.Icon;
-
-public interface ApplicationGroup {
-
-	String getId();
-
-	Icon getIcon();
-
-	String getCaption();
-
-	static ApplicationGroup create(String id, Icon icon, String caption) {
-		return new ApplicationGroup() {
-			@Override
-			public String getId() {
-				return id;
-			}
-
-			@Override
-			public Icon getIcon() {
-				return icon;
-			}
-
-			@Override
-			public String getCaption() {
-				return caption;
+import {Renderer} from "../Common";
+import {UiHtmlTemplateConfig} from "../../generated/UiHtmlTemplateConfig";
+
+export function createHtmlTemplateRenderer(template: UiHtmlTemplateConfig, idPropertyName: string): Renderer {
+	return {
+		render: (data: any) => {
+			if (data == null) {
+				return '';
+			} else {
+				let html = template.html.replace(/\{\{(\w+)\}\}/g, (substring, propertyName) => {
+					return data[propertyName] || "";
+				});
+				return html;
 			}
-		};
-	}
+		},
+		template
+	};
 }
diff --git a/teamapps-client/ts/modules/util/UiMustacheTemplates.ts b/teamapps-client/ts/modules/util/UiMustacheTemplates.ts
new file mode 100644
index 000000000..14c4f8f51
--- /dev/null
+++ b/teamapps-client/ts/modules/util/UiMustacheTemplates.ts
@@ -0,0 +1,37 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+import {Renderer} from "../Common";
+import {UiMustacheTemplateConfig} from "../../generated/UiMustacheTemplateConfig";
+import Mustache = require("mustache");
+
+export function createMustacheTemplateRenderer(template: UiMustacheTemplateConfig, idPropertyName: string): Renderer {
+	Mustache.parse(template.templateString);
+
+	return {
+		render: (data: any) => {
+			if (data == null) {
+				return '';
+			} else {
+				return Mustache.render(template.templateString, data);
+			}
+		},
+		template
+	};
+}
diff --git a/teamapps-client/ts/modules/util/UiTextCellTemplates.ts b/teamapps-client/ts/modules/util/UiTextCellTemplates.ts
deleted file mode 100644
index f486b0ca4..000000000
--- a/teamapps-client/ts/modules/util/UiTextCellTemplates.ts
+++ /dev/null
@@ -1,234 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-import {ImageRenderer, Renderer, RenderingFunction, stableSort} from "../Common";
-import {UiTextCellTemplateElement_Align, UiTextCellTemplateElementConfig} from "../../generated/UiTextCellTemplateElementConfig";
-import {UiTextCellTemplateTextElementConfig} from "../../generated/UiTextCellTemplateTextElementConfig";
-import {IconPathProvider} from "../TeamAppsUiContext";
-import {UiTextCellTemplateImageElementConfig} from "../../generated/UiTextCellTemplateImageElementConfig";
-import {UiIconPosition} from "../../generated/UiIconPosition";
-import {UiTextCellTemplate_JustifyLines, UiTextCellTemplateConfig} from "../../generated/UiTextCellTemplateConfig";
-import {UiImageTemplateConfig} from "../../generated/UiImageTemplateConfig";
-import {UiImageFormattingConfig, UiImageFormatting_CornerShape} from "../../generated/UiImageFormattingConfig";
-import CornerShape = UiImageFormatting_CornerShape;
-
-
-let justifyLines2CssClass: { [justifyLines: number]: string } = {
-	[UiTextCellTemplate_JustifyLines.JUSTIFY_TOP]: "justify-lines-top",
-	[UiTextCellTemplate_JustifyLines.JUSTIFY_CENTER]: "justify-lines-center",
-	[UiTextCellTemplate_JustifyLines.JUSTIFY_CENTER_OVERFLOW_BOTTOM]: "justify-lines-center-overflow-bottom"
-};
-
-export function createTextCellTemplateRenderer(template: UiTextCellTemplateConfig, iconPathProvider: IconPathProvider, idPropertyName?: string): Renderer {
-	const minHeightStyle = (template.minHeight ? 'min-height:' + template.minHeight + 'px;' : '');
-	const maxHeightStyle = (template.maxHeight ? 'max-height:' + template.maxHeight + 'px;' : '');
-	const paddingStyle = `padding: ${template.verticalPadding != null ? template.verticalPadding + "px" : ""} ${template.horizontalPadding != null ? template.horizontalPadding + "px" : ""};`;
-	const iconPositionFlexDirection = 'flex-direction:' + {
-		[UiIconPosition.LEFT_TOP]: "row",
-		[UiIconPosition.LEFT_MIDDLE]: "row",
-		[UiIconPosition.LEFT_BOTTOM]: "row",
-		[UiIconPosition.TOP_LEFT]: "column",
-		[UiIconPosition.TOP_CENTER]: "column",
-		[UiIconPosition.TOP_RIGHT]: "column",
-		[UiIconPosition.RIGHT_TOP]: "row-reverse",
-		[UiIconPosition.RIGHT_MIDDLE]: "row-reverse",
-		[UiIconPosition.RIGHT_BOTTOM]: "row-reverse"
-	}[template.iconPosition] + ';';
-
-	let textElementLines: UiTextCellTemplateElementConfig[][] = [];
-	for (let i = 0; i < template.textElements.length; i++) {
-		let textElement = template.textElements[i];
-		const lineIndex = textElement.line;
-		if (!textElementLines[lineIndex]) {
-			textElementLines[lineIndex] = [];
-		}
-		textElementLines[lineIndex].push(textElement);
-	}
-	textElementLines = textElementLines.filter(line => !!line); // remove unused (skipped) line indexes
-	textElementLines.forEach(line => stableSort(line, (a, b) => a.align - b.align));
-
-	let staticElementStyles: string[][] = [];
-	let cellImageRenderingFunctions: ImageRenderer[][] = [];
-	for (let i = 0; i < textElementLines.length; i++) {
-		for (let j = 0; j < textElementLines[i].length; j++) {
-			const element = textElementLines[i][j];
-
-			if (!staticElementStyles[i]) staticElementStyles[i] = [];
-			if (!cellImageRenderingFunctions[i]) cellImageRenderingFunctions[i] = [];
-
-			staticElementStyles[i][j] =
-				(element.marginTop ? `margin-top: ${element.marginTop}px;` : '') +
-				(element.marginLeft ? `margin-left: ${element.marginLeft}px;` : '') +
-				(element.marginBottom ? `margin-bottom: ${element.marginBottom}px;` : '') +
-				(element.marginRight ? `margin-right: ${element.marginRight}px;` : '');
-
-			if (isTextElement(element)) {
-				staticElementStyles[i][j] += ('font-size: ' + (element.fontSize * 100) + '%;') +
-					(element.underline ? 'text-decoration: underline;' : '') +
-					(element.italic ? 'font-style: italic;' : '') +
-					(element.bold ? 'font-weight: 700;' : '') +
-					(element.noWrap ? 'white-space: nowrap;' : 'white-space: normal;')
-			} else if (isImageElement(element)) {
-				cellImageRenderingFunctions[i][j] = createImageTemplateRenderer(element.imageTemplate, iconPathProvider);
-			}
-		}
-	}
-
-	let additionalImageStyle = "";
-	if (template.imageSpacing) {
-		additionalImageStyle += ({
-			[UiIconPosition.LEFT_TOP]: "margin-right",
-			[UiIconPosition.LEFT_MIDDLE]: "margin-right",
-			[UiIconPosition.LEFT_BOTTOM]: "margin-right",
-			[UiIconPosition.TOP_LEFT]: "margin-bottom",
-			[UiIconPosition.TOP_CENTER]: "margin-bottom",
-			[UiIconPosition.TOP_RIGHT]: "margin-bottom",
-			[UiIconPosition.RIGHT_TOP]: "margin-left",
-			[UiIconPosition.RIGHT_MIDDLE]: "margin-left",
-			[UiIconPosition.RIGHT_BOTTOM]: "margin-left"
-		}[template.iconPosition]) + ": " + template.imageSpacing + "px; ";
-	}
-	additionalImageStyle += ({
-		[UiIconPosition.LEFT_TOP]: "align-self: flex-start",
-		[UiIconPosition.LEFT_MIDDLE]: "align-self: center",
-		[UiIconPosition.LEFT_BOTTOM]: "align-self: flex-end",
-		[UiIconPosition.TOP_LEFT]: "align-self: flex-start",
-		[UiIconPosition.TOP_CENTER]: "align-self: center",
-		[UiIconPosition.TOP_RIGHT]: "align-self: flex-end",
-		[UiIconPosition.RIGHT_TOP]: "align-self: flex-start",
-		[UiIconPosition.RIGHT_MIDDLE]: "align-self: center",
-		[UiIconPosition.RIGHT_BOTTOM]: "align-self: flex-en"
-	}[template.iconPosition]) + "; ";
-
-	let imageTemplateRenderingFunction: RenderingFunction = template.imageTemplate ? createImageTemplateRenderer(template.imageTemplate, iconPathProvider, additionalImageStyle) : () => "";
-
-	let renderingFunction = (view: any) => {
-		function value(propertyName: string): any {
-			if (view == null || propertyName == null) {
-				return null;
-			} else {
-				return view[propertyName];
-			}
-		}
-
-		let textElementsString = '';
-		for (let i = 0; i < textElementLines.length; i++) {
-			textElementsString += '<div class="line">';
-			let currentElementAlign = UiTextCellTemplateElement_Align.LEFT;
-			for (let j = 0; j < textElementLines[i].length; j++) {
-				const element = textElementLines[i][j];
-
-				if (currentElementAlign < element.align) {
-					textElementsString += '<div class="line-spacer"></div>';
-					currentElementAlign = element.align;
-				}
-
-				if (isTextElement(element)) {
-					const textColor = (element.color && !element.badge ? 'color: ' + element.color + ';' : '');
-
-					let badgeColorCss;
-					if (element.badgeColorProperty) {
-						badgeColorCss = value(element.badgeColorProperty) ? `background-color: ${value(element.badgeColorProperty)}` : '';
-						if (element.color) {
-							badgeColorCss += value(element.badgeColorProperty) ? '' : `background-color: ${element.color};`;
-						}
-					} else if (element.color) {
-						badgeColorCss = `background-color: ${element.color};`;
-					} else {
-						badgeColorCss = '';
-					}
-
-					const lineHeight = ('line-height: ' + element.lineHeight + ';');
-					if (value(element.propertyName)) {
-						let displayedValue = value(element.propertyName);
-						const textElementContentString = element.badge ? `<span class="badge" style="${textColor} ${badgeColorCss} ${lineHeight}">${displayedValue}</span>` : displayedValue;
-						textElementsString += `<span class="element text-element ${element.noHorizontalSpace ? 'no-horizontal-space' : ''} ${UiTextCellTemplateElement_Align[element.align].toLowerCase()}" data-fieldname="${element.propertyName}" style="${lineHeight}${textColor}${staticElementStyles[i][j]}">${textElementContentString}</span>`;
-					}
-				} else if (isImageElement(element)) {
-					textElementsString += `<span class="element image-element" data-fieldname="' + element.fieldName + '" style="${staticElementStyles[i][j]}">${cellImageRenderingFunctions[i][j](value(element.propertyName))}</span>`
-				}
-			}
-			if (currentElementAlign < UiTextCellTemplateElement_Align.RIGHT) {
-				textElementsString += '<div class="line-spacer"></div>';
-			}
-			textElementsString += "</div>";
-		}
-
-		return `<div class="custom-entry-template-wrapper" ${value(idPropertyName) ? `data-id="${value(idPropertyName)}"` : ''} style="${maxHeightStyle}">           
-    <div class="custom-entry-template" style="${minHeightStyle} ${paddingStyle} ${iconPositionFlexDirection}">
-        ${imageTemplateRenderingFunction(value(template.imagePropertyName))}
-        <div class="content-wrapper tr-editor-area ${justifyLines2CssClass[template.justifyLines]}">
-            <div class="lines-justify-wrapper">
-                ${textElementsString}
-            </div>
-        </div>
-    </div>
-</div>`;
-	};
-	return {
-		render: renderingFunction,
-		template
-	};
-}
-
-function getStylesForImageFormatting(imageFormatting: UiImageFormattingConfig) {
-	let borderRadius;
-	if (imageFormatting.cornerShape === CornerShape.CIRCLE) {
-		borderRadius = Math.max(imageFormatting.width, imageFormatting.height) + 'px';
-	} else if (imageFormatting.cornerShape === CornerShape.ROUNDED) {
-		borderRadius = '3px';
-	} else {
-		borderRadius = '0';
-	}
-	return `width: ${imageFormatting.width ? imageFormatting.width + "px" : "auto"};`
-		+ `height: ${imageFormatting.height ? imageFormatting.height + "px" : "auto"};`
-		+ `${imageFormatting.borderWidth ? 'border-width: ' + imageFormatting.borderWidth + 'px' : 0};`
-		+ `border-radius: ${borderRadius};`
-}
-
-export function createImageTemplateRenderer(imageTemplate: UiImageTemplateConfig, iconPathProvider: IconPathProvider, additionalStyles?: string): ImageRenderer {
-	const staticImageFormattingStyles = getStylesForImageFormatting(imageTemplate.defaultFormatting);
-	const staticIconFormattingStyles = imageTemplate.iconFormatting && getStylesForImageFormatting(imageTemplate.iconFormatting) || staticImageFormattingStyles;
-
-	return (imageIdentifier) => {
-		imageIdentifier = imageIdentifier || imageTemplate.emptyImage;
-		let isIcon = imageIdentifier && imageIdentifier.indexOf('icon:') === 0;
-		let formatting = isIcon && imageTemplate.iconFormatting ? imageTemplate.iconFormatting : imageTemplate.defaultFormatting;
-		let imageUrl = isIcon ? iconPathProvider.getIconPath(imageIdentifier, formatting.width) : imageIdentifier;
-
-		const styles = `border-color: ${imageUrl && formatting.borderColor || 'transparent'};`
-			+ `box-shadow: ${imageUrl && formatting.shadow ? '1px 1px 3px 0 rgba(0, 0, 0, .2)' : 'none'};`
-			+ ` ${isIcon ? staticIconFormattingStyles : staticImageFormattingStyles}`
-			+ ` ${additionalStyles || ''}`;
-
-		if (!formatting.width && !formatting.height) {
-			return `<img class="image-template" style="${styles}" src="${imageUrl || "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAYAAAD0In+KAAAAC0lEQVQYV2NkgAIAABIAAibpyBYAAAAASUVORK5CYII="}"/>`;
-		} else {
-			return `<div class="image-template" style="${styles}; background-image: url(${imageUrl || "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAYAAAD0In+KAAAAC0lEQVQYV2NkgAIAABIAAibpyBYAAAAASUVORK5CYII="}); "></div>`;
-		}
-	}
-}
-
-function isTextElement(element: UiTextCellTemplateElementConfig): element is UiTextCellTemplateTextElementConfig {
-	return element._type === "UiTextCellTemplateTextElement";
-}
-
-function isImageElement(element: UiTextCellTemplateElementConfig): element is UiTextCellTemplateImageElementConfig {
-	return element._type === "UiTextCellTemplateImageElement";
-}
diff --git a/teamapps-client/ts/modules/util/WakeLock.ts b/teamapps-client/ts/modules/util/WakeLock.ts
new file mode 100644
index 000000000..2f61aff84
--- /dev/null
+++ b/teamapps-client/ts/modules/util/WakeLock.ts
@@ -0,0 +1,142 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+import NoSleep from 'nosleep.js';
+import * as log from "loglevel";
+
+const LOGGER: log.Logger = log.getLogger("WakeLock");
+
+interface WakeLockApi {
+	request: (type: 'screen') => Promise<WakeLockSentinel>;
+	isPolyfill?: boolean;
+}
+
+interface WakeLockSentinel extends EventTarget {
+	released: boolean;
+	type: 'screen';
+
+	release(): Promise<void>;
+}
+
+let wakeLockApi: WakeLockApi;
+
+let counter = 0;
+
+// WakeLock polyfill using nosleep.js
+if ('wakeLock' in navigator && 'request' in (navigator as any).wakeLock) {
+	wakeLockApi = (navigator as any).wakeLock;
+} else {
+	wakeLockApi = {
+		request: () => new Promise((resolve, reject) => {
+			const c = counter++;
+			LOGGER.info("Requesting wakelock via nosleep.js polyfill.")
+			const noSleep = new NoSleep();
+			(noSleep as any).noSleepVideo.setAttribute("title", "");
+
+			const enableHandler = async () => {
+				document.removeEventListener('click', enableHandler, false);
+				try {
+					await noSleep.enable();
+					resolve(responseObject);
+				} catch (e) {
+					reject(e);
+				}
+			}
+
+			let listeners: EventListener[] = []
+			const responseObject = {
+				released: false,
+				type: 'screen' as 'screen',
+				release: async () => {
+					noSleep.disable();
+					reject("released before clicked");
+					document.removeEventListener('click', enableHandler, false);
+
+					// HACK: this is needed to make iOS not show the player on the lock screen!!
+					document.body.append((noSleep as any).noSleepVideo);
+					(noSleep as any).noSleepVideo.remove();
+					// end HACK
+
+					listeners.forEach((fn) => fn(null));
+				},
+				addEventListener: (type: string, callback: EventListener) => {
+					listeners.push(callback)
+				},
+				removeEventListener: (type: string, callback: EventListener) => {
+					listeners = listeners.filter((fn) => fn !== callback)
+				},
+				dispatchEvent: () => true,
+				c
+			}
+
+			document.addEventListener('click', enableHandler, false);
+		}),
+		isPolyfill: true
+	};
+}
+
+const wakeLocksByUuid: {
+	[uuid: string]: {
+		wakeLockPromise: Promise<WakeLockSentinel>,
+		visibilityListener: (event: Event) => any
+	}
+} = {};
+
+export async function requestWakeLock(uuid: string): Promise<boolean> {
+	LOGGER.info(`requestWakeLock (${uuid})`)
+	try {
+		let visibilityListener = async () => {
+			if (document.visibilityState === 'visible') {
+				LOGGER.debug(`Visibility changed to visible. (${uuid})`);
+				wakeLocksByUuid[uuid].wakeLockPromise = doRequestWakeLock(uuid);
+			} else if (document.visibilityState === 'hidden') {
+				LOGGER.debug(`Visibility changed to hidden. Releasing wakeLock. (${uuid})`);
+				wakeLocksByUuid[uuid].wakeLockPromise.then(w => w.release());
+			}
+		};
+		wakeLocksByUuid[uuid] = {
+			wakeLockPromise: doRequestWakeLock(uuid),
+			visibilityListener
+		};
+		document.addEventListener('visibilitychange', visibilityListener);
+		return true;
+	} catch (e) {
+		LOGGER.error(`Could not acquire WakeLock! (${uuid})`, e)
+		return false;
+	}
+}
+
+async function doRequestWakeLock(uuid: string) {
+	let wakeLockSentinelPromise = wakeLockApi.request('screen');
+	const wakeLock = await wakeLockSentinelPromise;
+	LOGGER.info(`WakeLock acquired. (${uuid})`);
+	wakeLock.addEventListener('release', (e) => {
+		LOGGER.info(`WakeLock released. (${uuid})`);
+	});
+	return wakeLock;
+}
+
+export async function releaseWakeLock(uuid: string) {
+	LOGGER.info(`releaseWakeLock (${uuid})`)
+	let wakeLocker = wakeLocksByUuid[uuid];
+	if (wakeLocker != null) {
+		wakeLocker.wakeLockPromise.then(w => w.release());
+		document.removeEventListener("visibilitychange", wakeLocker.visibilityListener);
+	}
+}
diff --git a/teamapps-client/ts/modules/util/currencies.ts b/teamapps-client/ts/modules/util/currencies.ts
deleted file mode 100644
index a1fb94210..000000000
--- a/teamapps-client/ts/modules/util/currencies.ts
+++ /dev/null
@@ -1,934 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-export type Currency = {
-	code: string,
-	name: string,
-	alt_name?: string,
-	fullName: string,
-	symbol?: string
-};
-
-export var CURRENCIES: { [code: string]: Currency } = {
-	"AED": {
-		"code": "AED",
-		"name": "Dirhams",
-		"fullName": "United Arab Emirates Dirhams"
-	},
-	"AFN": {
-		"code": "AFN",
-		"name": "Afghanis",
-		"fullName": "Afghan Afghanis",
-		"symbol": "؋"
-	},
-	"ALL": {
-		"code": "ALL",
-		"name": "Leke",
-		"fullName": "Albanian Lek",
-		"symbol": "LEK"
-	},
-	"AMD": {
-		"code": "AMD",
-		"name": "Drams",
-		"fullName": "Armenian Drams"
-	},
-	"ANG": {
-		"code": "ANG",
-		"name": "Guilders",
-		"fullName": "Netherlands Antillean Guilders",
-		"symbol": "ƒ"
-	},
-	"AOA": {
-		"code": "AOA",
-		"name": "Kwanza",
-		"fullName": "Angolan Kwanza"
-	},
-	"ARS": {
-		"code": "ARS",
-		"name": "Pesos",
-		"fullName": "Argentine Pesos",
-		"symbol": "$"
-	},
-	"AUD": {
-		"code": "AUD",
-		"name": "Dollars",
-		"fullName": "Australian Dollars",
-		"symbol": "$"
-	},
-	"AWG": {
-		"alt_name": "Florins",
-		"code": "AWG",
-		"name": "Guilders",
-		"fullName": "Aruban Guilders",
-		"symbol": "ƒ"
-	},
-	"AZN": {
-		"code": "AZN",
-		"name": "New Manats",
-		"fullName": "Azerbaijan New Manats",
-		"symbol": "ман"
-	},
-	"BAM": {
-		"code": "BAM",
-		"name": "Convertible Marka",
-		"fullName": "Convertible Marka",
-		"symbol": "KM"
-	},
-	"BBD": {
-		"code": "BBD",
-		"name": "Dollars",
-		"fullName": "Barbados Dollars",
-		"symbol": "$"
-	},
-	"BDT": {
-		"code": "BDT",
-		"name": "Taka",
-		"fullName": "Bangladeshi Taka"
-	},
-	"BGN": {
-		"code": "BGN",
-		"name": "Leva",
-		"fullName": "Bulgarian Leva",
-		"symbol": "лв"
-	},
-	"BHD": {
-		"code": "BHD",
-		"name": "Dinars",
-		"fullName": "Bahraini Dinars"
-	},
-	"BIF": {
-		"code": "BIF",
-		"name": "Francs",
-		"fullName": "Burundi Francs"
-	},
-	"BMD": {
-		"code": "BMD",
-		"name": "Dollars",
-		"fullName": "Bermudian Dollars",
-		"symbol": "$"
-	},
-	"BND": {
-		"code": "BND",
-		"name": "Dollars",
-		"fullName": "Brunei Dollars",
-		"symbol": "$"
-	},
-	"BOB": {
-		"code": "BOB",
-		"name": "Bolivianos",
-		"fullName": "Bolivianos",
-		"symbol": "$b"
-	},
-	"BRL": {
-		"code": "BRL",
-		"name": "Real",
-		"fullName": "Brazilian Real",
-		"symbol": "R$"
-	},
-	"BSD": {
-		"code": "BSD",
-		"name": "Dollars",
-		"fullName": "Bahamian Dollars",
-		"symbol": "$"
-	},
-	"BTN": {
-		"code": "BTN",
-		"name": "Ngultrum",
-		"fullName": "Bhutan Ngultrum"
-	},
-	"BWP": {
-		"code": "BWP",
-		"name": "Pulas",
-		"fullName": "Botswana Pulas",
-		"symbol": "P"
-	},
-	"BYR": {
-		"code": "BYR",
-		"name": "Rubles",
-		"fullName": "Belarussian Rubles",
-		"symbol": "p."
-	},
-	"BZD": {
-		"code": "BZD",
-		"name": "Dollars",
-		"fullName": "Belize Dollars",
-		"symbol": "BZ$"
-	},
-	"CAD": {
-		"code": "CAD",
-		"name": "Dollars",
-		"fullName": "Canadian Dollars",
-		"symbol": "$"
-	},
-	"CDF": {
-		"code": "CDF",
-		"name": "Franc",
-		"fullName": "Franc"
-	},
-	"CHF": {
-		"code": "CHF",
-		"name": "Switzerland Francs",
-		"fullName": "Switzerland Francs"
-	},
-	"CLP": {
-		"code": "CLP",
-		"name": "Pesos",
-		"fullName": "Chilean Pesos",
-		"symbol": "$"
-	},
-	"CNY": {
-		"code": "CNY",
-		"name": "Yuan Renminbi",
-		"fullName": "Yuan Renminbi",
-		"symbol": "¥"
-	},
-	"COP": {
-		"code": "COP",
-		"name": "Pesos",
-		"fullName": "Colombian Pesos",
-		"symbol": "$"
-	},
-	"CRC": {
-		"code": "CRC",
-		"name": "Colones",
-		"fullName": "Costa Rican Colones",
-		"symbol": "₡"
-	},
-	"CUP": {
-		"code": "CUP",
-		"name": "Pesos",
-		"fullName": "Cuban Pesos",
-		"symbol": "₱"
-	},
-	"CVE": {
-		"code": "CVE",
-		"name": "Escudos",
-		"fullName": "Cape Verde Escudos"
-	},
-	"CZK": {
-		"code": "CZK",
-		"name": "Koruny",
-		"fullName": "Czech Koruny",
-		"symbol": "Kč"
-	},
-	"DJF": {
-		"code": "DJF",
-		"name": "Francs",
-		"fullName": "Djibouti Francs"
-	},
-	"DKK": {
-		"code": "DKK",
-		"name": "Kroner",
-		"fullName": "Danish Kroner",
-		"symbol": "kr"
-	},
-	"DOP": {
-		"code": "DOP",
-		"name": "Pesos",
-		"fullName": "Dominican Pesos",
-		"symbol": "RD$"
-	},
-	"DZD": {
-		"code": "DZD",
-		"name": "Dinars",
-		"fullName": "Algerian Dinar"
-	},
-	"ECS": {
-		"code": "ECS",
-		"name": "Sucre",
-		"fullName": "Ecuador Sucre"
-	},
-	"EEK": {
-		"code": "EEK",
-		"name": "Krooni",
-		"fullName": "Krooni",
-		"symbol": "kr"
-	},
-	"EGP": {
-		"code": "EGP",
-		"name": "Pounds",
-		"fullName": "Egyptian Pounds",
-		"symbol": "£"
-	},
-	"ETB": {
-		"code": "ETB",
-		"name": "Ethopia Birr",
-		"fullName": "Ethopia Birr"
-	},
-	"EUR": {
-		"code": "EUR",
-		"name": "Euro",
-		"fullName": "Euro",
-		"symbol": "€"
-	},
-	"FJD": {
-		"code": "FJD",
-		"name": "Dollar",
-		"fullName": "Fiji Dollar"
-	},
-	"FKP": {
-		"code": "FKP",
-		"name": "Pounds",
-		"fullName": "Falkland Islands Pounds",
-		"symbol": "£"
-	},
-	"GBP": {
-		"code": "GBP",
-		"name": "Pounds",
-		"fullName": "Pound Sterling",
-		"symbol": "£"
-	},
-	"GEL": {
-		"code": "GEL",
-		"name": "Lari",
-		"fullName": "Lari"
-	},
-	"GGP": {
-		"code": "GGP",
-		"name": "Pounds",
-		"fullName": "Pound Sterling",
-		"symbol": "£"
-	},
-	"GHS": {
-		"code": "GHS",
-		"name": "Cedis",
-		"fullName": "Ghanaian Cedis",
-		"symbol": "¢"
-	},
-	"GIP": {
-		"code": "GIP",
-		"name": "Pounds",
-		"fullName": "Gibraltar Pounds",
-		"symbol": "£"
-	},
-	"GMD": {
-		"code": "GMD",
-		"name": "Lari",
-		"fullName": "Gambian Dalasi"
-	},
-	"GNF": {
-		"code": "GNF",
-		"name": "Francs",
-		"fullName": "Guinea Francs"
-	},
-	"GTQ": {
-		"code": "GTQ",
-		"name": "Quetzales",
-		"fullName": "Quetzales",
-		"symbol": "Q"
-	},
-	"GYD": {
-		"code": "GYD",
-		"name": "Dollars",
-		"fullName": "Guyana Dollars"
-	},
-	"HKD": {
-		"code": "HKD",
-		"name": "Dollars",
-		"fullName": "Hong Kong Dollars",
-		"symbol": "$"
-	},
-	"HNL": {
-		"code": "HNL",
-		"name": "Lempiras",
-		"fullName": "Honduaran Lempiras",
-		"symbol": "L"
-	},
-	"HRK": {
-		"code": "HRK",
-		"name": "Kuna",
-		"fullName": "Croatian Kuna",
-		"symbol": "kn"
-	},
-	"HTG": {
-		"code": "HTG",
-		"name": "Haitian Gourde",
-		"fullName": "Haitian Gourde"
-	},
-	"HUF": {
-		"code": "HUF",
-		"name": "Forint",
-		"fullName": "Hungarian Forint",
-		"symbol": "Ft"
-	},
-	"IDR": {
-		"code": "IDR",
-		"name": "Indonesian Rupiahs",
-		"fullName": "Indonesian Rupiahs",
-		"symbol": "Rp"
-	},
-	"ILS": {
-		"code": "ILS",
-		"name": "New Shekels",
-		"fullName": "New Shekels",
-		"symbol": "₪"
-	},
-	"IMP": {
-		"code": "IMP",
-		"name": "Pounds",
-		"fullName": "Pounds",
-		"symbol": "£"
-	},
-	"INR": {
-		"code": "INR",
-		"name": "Rupees",
-		"fullName": "Indian Rupees",
-		"symbol": "₨"
-	},
-	"IQD": {
-		"code": "IQD",
-		"name": "Dinars",
-		"fullName": "Iraqi Dinars"
-	},
-	"IRR": {
-		"code": "IRR",
-		"name": "Riais",
-		"fullName": "Iranian Riais",
-		"symbol": "﷼"
-	},
-	"ISK": {
-		"code": "ISK",
-		"name": "Kronur",
-		"fullName": "Iceland Kronur",
-		"symbol": "kr"
-	},
-	"JEP": {
-		"code": "JEP",
-		"name": "Pounds",
-		"fullName": "Pounds",
-		"symbol": "£"
-	},
-	"JMD": {
-		"code": "JMD",
-		"name": "Dollars",
-		"fullName": "Jamaican Dollars"
-	},
-	"JOD": {
-		"code": "JOD",
-		"name": "Dinars",
-		"fullName": "Jordanian Dinar"
-	},
-	"JPY": {
-		"code": "JPY",
-		"name": "Yen",
-		"fullName": "Japanese Yen",
-		"symbol": "¥"
-	},
-	"KES": {
-		"code": "KES",
-		"name": "Shillings",
-		"fullName": "Kenyan Shillings"
-	},
-	"KGS": {
-		"code": "KGS",
-		"name": "Soms",
-		"fullName": "Soms",
-		"symbol": "лв"
-	},
-	"KHR": {
-		"code": "KHR",
-		"name": "Rieis",
-		"fullName": "Kampuchean Rieis"
-	},
-	"KMF": {
-		"code": "KMF",
-		"name": "Francs",
-		"fullName": "Comoros Francs"
-	},
-	"KPW": {
-		"code": "KPW",
-		"name": "Won",
-		"fullName": "North Korean Won",
-		"symbol": "₩"
-	},
-	"KRW": {
-		"code": "KRW",
-		"name": "Won",
-		"fullName": "Korean Won",
-		"symbol": "₩"
-	},
-	"KWD": {
-		"code": "KWD",
-		"name": "Dinars",
-		"fullName": "Kuwaiti Dinars"
-	},
-	"KYD": {
-		"code": "KYD",
-		"name": "Dollars",
-		"fullName": "Cayman Islands Dollars",
-		"symbol": "$"
-	},
-	"KZT": {
-		"code": "KZT",
-		"name": "Tenege",
-		"fullName": "Kazhakstan Tenege",
-		"symbol": "лв"
-	},
-	"LAK": {
-		"code": "LAK",
-		"name": "Kips",
-		"fullName": "Lao Kips",
-		"symbol": "₭"
-	},
-	"LBP": {
-		"code": "LBP",
-		"name": "Pounds",
-		"fullName": "Lebanese Pounds",
-		"symbol": "£"
-	},
-	"LKR": {
-		"code": "LKR",
-		"name": "Rupees",
-		"fullName": "Sri Lanka Rupees",
-		"symbol": "₨"
-	},
-	"LRD": {
-		"code": "LRD",
-		"name": "Dollars",
-		"fullName": "Liberian Dollars",
-		"symbol": "$"
-	},
-	"LSL": {
-		"code": "LSL",
-		"name": "Maloti",
-		"fullName": "Lesotho Maloti"
-	},
-	"LTL": {
-		"code": "LTL",
-		"name": "Litai",
-		"fullName": "Lithuanian Litai",
-		"symbol": "Lt"
-	},
-	"LVL": {
-		"code": "LVL",
-		"name": "Lati",
-		"fullName": "Latvian Lati",
-		"symbol": "Ls"
-	},
-	"LYD": {
-		"code": "LYD",
-		"name": "Dinars",
-		"fullName": "Libyan Dinars"
-	},
-	"MAD": {
-		"code": "MAD",
-		"name": "Dirhams",
-		"fullName": "Moroccan Dirhams"
-	},
-	"MDL": {
-		"code": "MDL",
-		"name": "Lei",
-		"fullName": "Moldovan Lei"
-	},
-	"MKD": {
-		"code": "MKD",
-		"name": "Macedonian Denar",
-		"fullName": "Macedonian Denar"
-	},
-	"MGA": {
-		"code": "MGA",
-		"name": "Ariary",
-		"fullName": "Ariary"
-	},
-	"MMK": {
-		"code": "MMK",
-		"name": "Kyat",
-		"fullName": "Myanmar Kyat"
-	},
-	"MNK": {
-		"code": "MNK",
-		"name": "Kyats",
-		"fullName": "Kyats"
-	},
-	"MNT": {
-		"code": "MNT",
-		"name": "Tugriks",
-		"fullName": "Mongolian Tugriks",
-		"symbol": "₮"
-	},
-	"MRO": {
-		"code": "MRO",
-		"name": "Ouguiyas",
-		"fullName": "Mauritanian Ouguiyas"
-	},
-	"MUR": {
-		"code": "MUR",
-		"name": "Rupees",
-		"fullName": "Mauritius Rupees",
-		"symbol": "₨"
-	},
-	"MVR": {
-		"code": "MVR",
-		"name": "Rufiyaa",
-		"fullName": "Maldive Rufiyaa"
-	},
-	"MWK": {
-		"code": "MWK",
-		"name": "Kwachas",
-		"fullName": "Malawi Kwachas"
-	},
-	"MXN": {
-		"code": "MXN",
-		"name": "Pesos",
-		"fullName": "Mexican Nuevo Pesos",
-		"symbol": "$"
-	},
-	"MYR": {
-		"code": "MYR",
-		"name": "Ringgits",
-		"fullName": "Malaysian Ringgits",
-		"symbol": "RM"
-	},
-	"MZN": {
-		"code": "MZN",
-		"name": "Meticals",
-		"fullName": "Mozambique Meticals",
-		"symbol": "MT"
-	},
-	"NAD": {
-		"code": "NAD",
-		"name": "Dollars",
-		"fullName": "Namibian Dollars",
-		"symbol": "$"
-	},
-	"NGN": {
-		"code": "NGN",
-		"name": "Nairas",
-		"fullName": "Nigerian Nairas",
-		"symbol": "₦"
-	},
-	"NIO": {
-		"code": "NIO",
-		"name": "Cordobas",
-		"fullName": "Nicaraguan Cordobas Oro",
-		"symbol": "C$"
-	},
-	"NOK": {
-		"code": "NOK",
-		"name": "Kroner",
-		"fullName": "Norwegian Kroner",
-		"symbol": "kr"
-	},
-	"NPR": {
-		"code": "NPR",
-		"name": "Rupees",
-		"fullName": "Nepalese Rupees",
-		"symbol": "₨"
-	},
-	"NZD": {
-		"code": "NZD",
-		"name": "New Zealand Dollars",
-		"fullName": "New Zealand Dollars",
-		"symbol": "$"
-	},
-	"OMR": {
-		"code": "OMR",
-		"name": "Riais",
-		"fullName": "Riais",
-		"symbol": "﷼"
-	},
-	"PAB": {
-		"code": "PAB",
-		"name": "Balboa",
-		"fullName": "Balboa",
-		"symbol": "B/."
-	},
-	"PEN": {
-		"code": "PEN",
-		"name": "Nuevos Soles",
-		"fullName": "Peru Nuevos Soles",
-		"symbol": "S/."
-	},
-	"PGK": {
-		"code": "PGK",
-		"name": "Kina",
-		"fullName": "Kina"
-	},
-	"PHP": {
-		"code": "PHP",
-		"name": "Pesos",
-		"fullName": "Phillippines Pesos",
-		"symbol": "Php"
-	},
-	"PKR": {
-		"code": "PKR",
-		"name": "Rupees",
-		"fullName": "Pakistani Rupees",
-		"symbol": "₨"
-	},
-	"PLN": {
-		"code": "PLN",
-		"name": "Zlotych",
-		"fullName": "Poland Zlotych",
-		"symbol": "zł"
-	},
-	"PYG": {
-		"code": "PYG",
-		"name": "Guarani",
-		"fullName": "Paraguay Guarani",
-		"symbol": "Gs"
-	},
-	"QAR": {
-		"code": "QAR",
-		"name": "Rials",
-		"fullName": "Qatar Rials",
-		"symbol": "﷼"
-	},
-	"RON": {
-		"code": "RON",
-		"name": "New Lei",
-		"fullName": "Romanian New Lei",
-		"symbol": "lei"
-	},
-	"RSD": {
-		"code": "RSD",
-		"name": "Dinars",
-		"fullName": "Serbia Dinars",
-		"symbol": "Дин."
-	},
-	"RUB": {
-		"code": "RUB",
-		"name": "Rubles",
-		"fullName": "Russia Rubles",
-		"symbol": "руб"
-	},
-	"RWF": {
-		"code": "RWF",
-		"name": "Francs",
-		"fullName": "Francs"
-	},
-	"SAR": {
-		"code": "SAR",
-		"name": "Riyals",
-		"fullName": "Saudi Arabia Riyals",
-		"symbol": "﷼"
-	},
-	"SBD": {
-		"code": "SBD",
-		"name": "Dollars",
-		"fullName": "Solomon Islands Dollars",
-		"symbol": "$"
-	},
-	"SCR": {
-		"code": "SCR",
-		"name": "Rupees",
-		"fullName": "Seychelles Rupees",
-		"symbol": "₨"
-	},
-	"SDG": {
-		"code": "SDG",
-		"name": "Pounds",
-		"fullName": "Pounds"
-	},
-	"SEK": {
-		"code": "SEK",
-		"name": "Kronor",
-		"fullName": "Sweden Kronor",
-		"symbol": "kr"
-	},
-	"SGD": {
-		"code": "SGD",
-		"name": "Dollars",
-		"fullName": "Singapore Dollars",
-		"symbol": "$"
-	},
-	"SHP": {
-		"code": "SHP",
-		"name": "Pounds",
-		"fullName": "Saint Helena Pounds",
-		"symbol": "£"
-	},
-	"SLL": {
-		"code": "SLL",
-		"name": "Leones",
-		"fullName": "Leones"
-	},
-	"SOS": {
-		"code": "SOS",
-		"name": "Shillings",
-		"fullName": "Somalia Shillings",
-		"symbol": "S"
-	},
-	"SRD": {
-		"code": "SRD",
-		"name": "Dollars",
-		"fullName": "SurifullName Dollars",
-		"symbol": "$"
-	},
-	"STD": {
-		"code": "STD",
-		"name": "Dobras",
-		"fullName": "Dobras"
-	},
-	"SVC": {
-		"code": "SVC",
-		"name": "Salvadoran Colón",
-		"fullName": "Salvadoran Colón"
-	},
-	"SYP": {
-		"code": "SYP",
-		"name": "Pounds",
-		"fullName": "Syria Pounds",
-		"symbol": "£"
-	},
-	"SZL": {
-		"code": "SZL",
-		"name": "Emalangeni",
-		"fullName": "Emalangeni"
-	},
-	"THB": {
-		"code": "THB",
-		"name": "Baht",
-		"fullName": "Thaliand Baht",
-		"symbol": "฿"
-	},
-	"TJS": {
-		"code": "TJS",
-		"name": "Somoni",
-		"fullName": "Somoni"
-	},
-	"TMM": {
-		"code": "TMM",
-		"name": "Manat",
-		"fullName": "Manat"
-	},
-	"TND": {
-		"code": "TND",
-		"name": "Dinars",
-		"fullName": "Tunisian Dinars"
-	},
-	"TOP": {
-		"code": "TOP",
-		"name": "Pa'anga",
-		"fullName": "Pa'anga"
-	},
-	"TRY": {
-		"code": "TRY",
-		"name": "Lira",
-		"fullName": "Turkey Lira",
-		"symbol": "TL"
-	},
-	"TTD": {
-		"code": "TTD",
-		"name": "Dollars",
-		"fullName": "Trinidad and Tobago Dollars",
-		"symbol": "$"
-	},
-	"TVD": {
-		"code": "TVD",
-		"name": "Tuvalu Dollars",
-		"fullName": "Tuvalu Dollars"
-	},
-	"TWD": {
-		"code": "TWD",
-		"name": "New Dollars",
-		"fullName": "Taiwan New Dollars",
-		"symbol": "NT$"
-	},
-	"TZS": {
-		"code": "TZS",
-		"name": "Shillings",
-		"fullName": "Shillings"
-	},
-	"UAH": {
-		"code": "UAH",
-		"name": "Hryvnia",
-		"fullName": "Ukraine Hryvnia",
-		"symbol": "₴"
-	},
-	"UGX": {
-		"code": "UGX",
-		"name": "Shillings",
-		"fullName": "Shillings"
-	},
-	"USD": {
-		"code": "USD",
-		"name": "Dollars",
-		"fullName": "United States Dollars",
-		"symbol": "$"
-	},
-	"UYU": {
-		"code": "UYU",
-		"name": "Pesos",
-		"fullName": "Uruguay Pesos",
-		"symbol": "$U"
-	},
-	"UZS": {
-		"code": "UZS",
-		"name": "Sums",
-		"fullName": "Uzbekistan Sums",
-		"symbol": "лв"
-	},
-	"VEF": {
-		"code": "VEF",
-		"name": "Bolivares Fuertes",
-		"fullName": "Venezuela Bolivares Fuertes",
-		"symbol": "Bs"
-	},
-	"VND": {
-		"code": "VND",
-		"name": "Dong",
-		"fullName": "Viet Nam Dong",
-		"symbol": "₫"
-	},
-	"XAF": {
-		"code": "XAF",
-		"name": "Communauté Financière Africaine Francs",
-		"fullName": "Communauté Financière Africaine Francs"
-	},
-	"XCD": {
-		"code": "XCD",
-		"name": "East Caribbean Dollars",
-		"fullName": "East Caribbean Dollars",
-		"symbol": "$"
-	},
-	"XOF": {
-		"code": "XOF",
-		"name": "Communauté Financière Africaine Francs",
-		"fullName": "Communauté Financière Africaine Francs"
-	},
-	"XPF": {
-		"code": "XPF",
-		"name": "Comptoirs Français du Pacifique Francs",
-		"fullName": "Comptoirs Français du Pacifique Francs"
-	},
-	"YER": {
-		"code": "YER",
-		"name": "Rials",
-		"fullName": "Yemen Rials",
-		"symbol": "﷼"
-	},
-	"ZAR": {
-		"code": "ZAR",
-		"name": "Rand",
-		"fullName": "South Africa Rand",
-		"symbol": "R"
-	},
-	"ZMK": {
-		"code": "ZMK",
-		"name": "Kwacha",
-		"fullName": "Kwacha"
-	},
-	"ZWD": {
-		"code": "ZWD",
-		"name": "Zimbabwe Dollars",
-		"fullName": "Zimbabwe Dollars",
-		"symbol": "Z$"
-	}
-};
diff --git a/teamapps-client/ts/modules/util/debounce.ts b/teamapps-client/ts/modules/util/debounce.ts
index 4d344dfc5..38e089343 100644
--- a/teamapps-client/ts/modules/util/debounce.ts
+++ b/teamapps-client/ts/modules/util/debounce.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-client/ts/modules/util/draggable.ts b/teamapps-client/ts/modules/util/draggable.ts
new file mode 100644
index 000000000..760a7860c
--- /dev/null
+++ b/teamapps-client/ts/modules/util/draggable.ts
@@ -0,0 +1,83 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+import {Constants} from "../Common";
+
+type Options = {
+	validDragStartDecider?: (e: PointerEvent & TouchEvent) => boolean
+	dragStart: (e: PointerEvent & TouchEvent) => void,
+	drag: (e: PointerEvent & TouchEvent, eventData: EventData) => void,
+	dragEnd: (e: PointerEvent & TouchEvent, eventData: EventData) => void,
+};
+
+type EventData = {
+	x: number;
+	y: number
+	deltaX: number;
+	deltaY: number;
+};
+
+export function draggable($elements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>, callbacks: Options) {
+	let $els: HTMLElement[];
+	$els = $elements instanceof NodeList ? [].slice.call($elements) : [$elements].flat();
+	$els.forEach($element => {
+		$element.addEventListener(`${Constants.POINTER_EVENTS.start}`, (e: PointerEvent & TouchEvent) => {
+			const isSpecialMouseButton = e.button != null && e.button !== 0;
+			const isValidDragStart = callbacks.validDragStartDecider != null ? callbacks.validDragStartDecider(e) : !isSpecialMouseButton
+			if (!isValidDragStart) {
+				return;
+			}
+
+			callbacks.dragStart(e);
+			const startPosition = getEventCoordinates(e);
+			const oldTouchAction = $element.style.touchAction;
+			$element.style.touchAction = 'none'; // important so the browser does not cancel the move (for native scrolling purposes. See https://stackoverflow.com/a/48254578/524913
+
+			let moveHandler = (e: any) => {
+				callbacks.drag(e, createEventData(e, startPosition));
+			};
+			document.addEventListener(`${Constants.POINTER_EVENTS.move}`, moveHandler);
+
+			let endHandler = () => {
+				document.removeEventListener(`${Constants.POINTER_EVENTS.move}`, moveHandler);
+				document.removeEventListener(`${Constants.POINTER_EVENTS.end}`, endHandler);
+				callbacks.dragEnd(e, createEventData(e, startPosition));
+				$element.style.touchAction = oldTouchAction;
+			};
+			document.addEventListener(`${Constants.POINTER_EVENTS.end}`, endHandler);
+		});
+	})
+}
+
+function getEventCoordinates(e: PointerEvent & TouchEvent) {
+	return {
+		x: (e.clientX || e.touches[0].clientX),
+		y: (e.clientY || e.touches[0].clientY)
+	};
+}
+
+function createEventData(e: PointerEvent & TouchEvent, startPosition: { x: number; y: number }): EventData {
+	let coordinates = getEventCoordinates(e);
+	return {
+		x: coordinates.x,
+		y: coordinates.y,
+		deltaX: coordinates.x - startPosition.x,
+		deltaY: coordinates.y - startPosition.y
+	};
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/DataNeededEventData.java b/teamapps-client/ts/modules/util/fullcalendar-moment-timezone.ts
similarity index 60%
rename from teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/DataNeededEventData.java
rename to teamapps-client/ts/modules/util/fullcalendar-moment-timezone.ts
index e6a1b4011..dac46d492 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/DataNeededEventData.java
+++ b/teamapps-client/ts/modules/util/fullcalendar-moment-timezone.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,23 +17,22 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-package org.teamapps.ux.component.timegraph;
+import * as moment from "moment-timezone";
 
-public class DataNeededEventData {
+import { NamedTimeZoneImpl, createPlugin } from '@fullcalendar/core'
 
-	private final int zoomLevelIndex;
-	private final Interval neededIntervalX;
+class MomentNamedTimeZone extends NamedTimeZoneImpl {
 
-	public DataNeededEventData(int zoomLevelIndex, Interval neededIntervalX) {
-		this.zoomLevelIndex = zoomLevelIndex;
-		this.neededIntervalX = neededIntervalX;
+	offsetForArray(a: number[]): number {
+		return (moment as any).tz(a, this.timeZoneName).utcOffset()
 	}
 
-	public int getZoomLevelIndex() {
-		return zoomLevelIndex;
+	timestampToArray(ms: number): number[] {
+		return (moment as any).tz(ms, this.timeZoneName).toArray()
 	}
 
-	public Interval getNeededIntervalX() {
-		return neededIntervalX;
-	}
 }
+
+export default createPlugin({
+	namedTimeZonedImpl: MomentNamedTimeZone
+})
diff --git a/teamapps-client/ts/modules/util/getPlayableVideoCodecs.ts b/teamapps-client/ts/modules/util/getPlayableVideoCodecs.ts
index ac560da0b..39d499771 100644
--- a/teamapps-client/ts/modules/util/getPlayableVideoCodecs.ts
+++ b/teamapps-client/ts/modules/util/getPlayableVideoCodecs.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-client/ts/modules/util/nonRecursive.ts b/teamapps-client/ts/modules/util/nonRecursive.ts
index 6f61a3394..d6ef61d6a 100644
--- a/teamapps-client/ts/modules/util/nonRecursive.ts
+++ b/teamapps-client/ts/modules/util/nonRecursive.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-client/ts/modules/util/postpone.ts b/teamapps-client/ts/modules/util/postpone.ts
new file mode 100644
index 000000000..6ef65f7e3
--- /dev/null
+++ b/teamapps-client/ts/modules/util/postpone.ts
@@ -0,0 +1,68 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+
+
+export function postponeUntil(postponed: Function, predicate: () => boolean, delayInterval = 500, maxDelay = 10000) {
+	let startTime = +new Date();
+	return new Promise((resolve, reject) => {
+		let timeoutId: number;
+
+		function executeOrWait() {
+			if (!predicate()) {
+				if (+new Date() - startTime > maxDelay) {
+					reject("Postponing canceled due to timeout!");
+				} else {
+					timeoutId = window.setTimeout(executeOrWait, delayInterval);
+				}
+				return;
+			} else {
+				resolve(postponed());
+			}
+		}
+
+		executeOrWait();
+	});
+}
+
+export class Postponer {
+	private timeoutId: number;
+
+	postponeUntil(postponed: Function, predicate: () => boolean, delayInterval = 500, maxDelay = 10000) {
+		window.clearTimeout(this.timeoutId);
+
+		let startTime = +new Date();
+		return new Promise((resolve, reject) => {
+			let executeOrWait = () => {
+				if (!predicate()) {
+					if (+new Date() - startTime > maxDelay) {
+						reject("Postponing canceled due to timeout!");
+					} else {
+						this.timeoutId = window.setTimeout(executeOrWait, delayInterval);
+					}
+					return;
+				} else {
+					resolve(postponed());
+				}
+			}
+			executeOrWait();
+		});
+	}
+}
+
diff --git a/teamapps-client/ts/modules/util/precise-float-math.ts b/teamapps-client/ts/modules/util/precise-float-math.ts
new file mode 100644
index 000000000..cb90b59b3
--- /dev/null
+++ b/teamapps-client/ts/modules/util/precise-float-math.ts
@@ -0,0 +1,56 @@
+/**
+ * Basic Problem: JS Floating Point Math is highly inaccurate.
+ * Found this thread: https://stackoverflow.com/questions/11832914/how-to-round-to-at-most-2-decimal-places-if-necessary
+ *
+ * Best solution: Use a library with correct implementation of floating point math.
+ *
+ * - mathjs (CAUTION: not math.js!): https://www.npmjs.com/package/mathjs
+ *   - is basically complete, but is FAT: 732 kB, 188 kB minified
+ *   - see https://bundlephobia.com/package/mathjs@13.1.1
+ *
+ * - decimal.js: https://www.npmjs.com/package/decimal.js
+ *   - still 31.1 kB, 12.3kB minified
+ *   - good: last Publish in 2022 (today: 2024-09-09)
+ *
+ * - currency.js: https://www.npmjs.com/package/currency.js
+ *   - 2.2kB, 1kB minified
+ *   - no dependencies
+ *   - BUT: only compatible with TS allowSyntheticDefaultImports: true + default import
+ *
+ * Second best solution: Use a custom implementation of roundToPrecision
+ * bjesuiter selected (on 2024-09-09):
+ * https://stackoverflow.com/questions/11832914/how-to-round-to-at-most-2-decimal-places-if-necessary#:~:text=Solution%202%3A%20purely%20mathematical%20(Number.EPSILON)
+ *
+ */
+
+// Decimal round (half away from zero)
+export function roundToPrecision(value: number, precision: number): number {
+    const p = Math.pow(10, precision || 0);
+    return Math.round(value * p) / p;
+}
+
+// Decimal ceil
+export function ceilToPrecision(value: number, precision: number): number {
+    const p = Math.pow(10, precision ?? 0);
+    return Math.ceil(value * p) / p;
+}
+
+// Decimal floor
+export function floorToPrecision(value: number, precision: number): number {
+    const p = Math.pow(10, precision ?? 0);
+    return Math.floor(value * p) / p;
+}
+
+// Decimal trunc
+export function truncToPrecision(value: number, precision: number): number {
+    if (value < 0) {
+        return ceilToPrecision(value, precision);
+    } else {
+        return floorToPrecision(value, precision);
+    }
+}
+
+// Format using fixed-point notation
+export function toFixed(value: number, precision: number): string {
+    return roundToPrecision(value, precision).toFixed(precision);
+}
\ No newline at end of file
diff --git a/teamapps-client/ts/modules/util/throttle.ts b/teamapps-client/ts/modules/util/throttle.ts
index 28e75dbf2..5075f84b7 100644
--- a/teamapps-client/ts/modules/util/throttle.ts
+++ b/teamapps-client/ts/modules/util/throttle.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -22,12 +22,29 @@ import {debounce} from "./debounce";
 export function throttledMethod(delay: number) {
 	return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
 		let oldMethod = descriptor.value;
-		descriptor.value = throttle(oldMethod, delay);
+		descriptor.value = function () {
+			if (this['__throttled_' + propertyKey] == null) {
+				this['__throttled_' + propertyKey] = throttle(oldMethod, delay);
+			}
+			this['__throttled_' + propertyKey].apply(this, arguments);
+		}
+	};
+}
+
+export function loadSensitiveThrottling(minDelay: number, executionTimeDelayFactor: number, maxDelay = Number.MAX_SAFE_INTEGER) {
+	return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
+		let oldMethod = descriptor.value;
+		descriptor.value = function () {
+			if (this['__dynamicallyThrottled2_' + propertyKey] == null) {
+				this['__dynamicallyThrottled2_' + propertyKey] = loadSensitiveThrottle(oldMethod, minDelay, executionTimeDelayFactor, maxDelay);
+			}
+			this['__dynamicallyThrottled2_' + propertyKey].apply(this, arguments);
+		}
 	};
 }
 
 /**
- *  Returns a function, whom's execution is limited with a certain delay.
+ *  Returns a function, whose execution is limited with a certain delay.
  *  When the returned function gets called multiple times within a delay cycle, only the last invocation will be executed.
  *
  *  @see debounce
@@ -59,4 +76,59 @@ export function throttle(func: (...args: any[]) => any, delay: number): ((...arg
 	};
 }
 
+/**
+ *  Returns a function, whose execution is dynamically throttled, depending on the actual load. The load is determined by the time it takes from the beginning of the execution
+ *  to a queued task.
+ *
+ * @param func                      function to be throttled
+ * @param minDelay                  minimum throttling delay
+ * @param executionTimeDelayFactor  the factor to multiply with the actual execution time + queue task execution delay
+ * @param maxDelay                  maximum throttling delay
+ */
+export function loadSensitiveThrottle(func: (...args: any[]) => any, minDelay: number, executionTimeDelayFactor: number, maxDelay = Number.MAX_SAFE_INTEGER): ((...args: any[]) => void) {
+	if (minDelay <= 0) {
+		minDelay = 0;
+	}
+	let lastDelay = minDelay;
+	let nextDelay = minDelay;
+	let currentTimeoutId: number;
+	let lastExecutionTimestamp: number = new Date(0).valueOf();
+	let lastArguments: { thisArg: any, args: IArguments };
+
+	function execute() {
+		let startTime = Date.now().valueOf();
+		func.apply(lastArguments.thisArg, lastArguments.args);
+		lastArguments = null;
+		nextDelay = -1;
+		setTimeout(() => {
+			let queueAvailabilityTime = Date.now().valueOf() - startTime;
+			nextDelay = Math.min(maxDelay, Math.max(minDelay, (lastDelay + queueAvailabilityTime * executionTimeDelayFactor) / 2));
+			lastDelay = nextDelay;
+			if (lastArguments != null) {
+				runWrapped.apply(lastArguments.thisArg, lastArguments.args);
+			}
+		});
+		lastExecutionTimestamp = Date.now().valueOf();
+	}
+
+	function runWrapped() {
+		lastArguments = {thisArg: this, args: arguments};
+		if (currentTimeoutId == null) {
+			let now = Date.now().valueOf();
+			if (nextDelay == -1) {
+				return;
+			} else if (now - lastExecutionTimestamp >= nextDelay) {
+				execute();
+			} else {
+				currentTimeoutId = window.setTimeout(() => {
+					execute();
+					currentTimeoutId = null;
+				}, nextDelay - (now - lastExecutionTimestamp))
+			}
+		}
+	}
+
+	return runWrapped;
+}
+
 
diff --git a/teamapps-client/ts/modules/webrtc/GainController.ts b/teamapps-client/ts/modules/webrtc/GainController.ts
new file mode 100644
index 000000000..852ccca12
--- /dev/null
+++ b/teamapps-client/ts/modules/webrtc/GainController.ts
@@ -0,0 +1,81 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+export class GainController {
+
+	private readonly context: AudioContext;
+	private _inputTrack: MediaStreamTrack;
+	private inputStream: MediaStream;
+	private micStreamSource: MediaStreamAudioSourceNode;
+	private readonly gainFilter: GainNode;
+	private readonly destination: MediaStreamAudioDestinationNode;
+	private outputStream: MediaStream;
+	public readonly outputTrack: MediaStreamTrack;
+
+	constructor(initialGain: number) {
+		this.context = new ((window as any).AudioContext || (window as any).webkitAudioContext)()
+		this.inputStream = new MediaStream();
+		this.gainFilter = this.context.createGain();
+		this.gainFilter.gain.value = initialGain;
+		this.destination = this.context.createMediaStreamDestination();
+		this.outputStream = this.destination.stream;
+		this.outputTrack = this.outputStream.getAudioTracks()[0];
+
+		this.gainFilter.connect(this.destination);
+	}
+
+	set inputTrack(inputTrack: MediaStreamTrack) {
+		this.micStreamSource?.disconnect();
+		if (this._inputTrack != null) {
+			this.inputStream?.removeTrack(this._inputTrack);
+		}
+
+		this._inputTrack = inputTrack;
+
+		if (inputTrack != null) {
+			this.inputStream = new MediaStream([inputTrack]);
+			this.micStreamSource = this.context.createMediaStreamSource(this.inputStream);
+			this.micStreamSource.connect(this.gainFilter);
+		}
+	}
+
+	get inputTrack() {
+		return this._inputTrack;
+	}
+
+	get gain(): number {
+		return this.gainFilter.gain.value;
+	}
+
+	set gain(value: number) {
+		this.gainFilter.gain.value = value;
+	}
+
+	// close() {
+	// 	// just make 100% sure everything is closed and released!
+	// 	this.micStreamSource.disconnect();
+	// 	this.inputStream.removeTrack(this.inputTrack);
+	// 	this.context.close();
+	// 	this.gainFilter.disconnect();
+	// 	this.destination.disconnect();
+	// 	this.outputStream.removeTrack(this.outputTrack);
+	// 	this.outputTrack.dispatchEvent(new Event("ended"));
+	// }
+}
+
diff --git a/teamapps-client/ts/modules/webrtc/MediaUtil.ts b/teamapps-client/ts/modules/webrtc/MediaUtil.ts
new file mode 100644
index 000000000..bde8a2cc5
--- /dev/null
+++ b/teamapps-client/ts/modules/webrtc/MediaUtil.ts
@@ -0,0 +1,200 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+import vad, {VoiceActivityDetectionHandle} from "voice-activity-detection";
+import {UiAudioTrackConstraintsConfig} from "../../generated/UiAudioTrackConstraintsConfig";
+import {UiVideoTrackConstraintsConfig} from "../../generated/UiVideoTrackConstraintsConfig";
+import {UiScreenSharingConstraintsConfig} from "../../generated/UiScreenSharingConstraintsConfig";
+import {WebRtcPublishingFailureReason} from "../../generated/WebRtcPublishingFailureReason";
+import {UiMediaDeviceKind} from "../../generated/UiMediaDeviceKind";
+import {createUiMediaDeviceInfoConfig, UiMediaDeviceInfoConfig} from "../../generated/UiMediaDeviceInfoConfig";
+import {listenStreamEnded, mixStreams} from "./utils";
+import {determineVideoSize, MediaStreamWithMixiSizingInfo, MixSizingInfo} from "./MultiStreamsMixer";
+
+export function addVoiceActivityDetectionToMediaStream(mediaStream: MediaStream, onVoiceStart: () => void, onVoiceStop: () => void) {
+	if (((window as any).AudioContext || (window as any).webkitAudioContext) && mediaStream.getAudioTracks().length > 0) {
+		console.log("AudioContext detected");
+		let audioContext = new ((window as any).AudioContext || (window as any).webkitAudioContext)();
+		console.log("AudioContext created");
+		let vadHandle = vad(audioContext, mediaStream, {onVoiceStart, onVoiceStop});
+		console.log("vad attached");
+		listenStreamEnded(mediaStream, () => {
+			vadHandle.destroy();
+		});
+	}
+}
+
+export function addVoiceActivityDetection(audioTrack: MediaStreamTrack, onVoiceStart: () => void, onVoiceStop: () => void): VoiceActivityDetectionHandle {
+	if ((window as any).AudioContext || (window as any).webkitAudioContext) {
+		let audioContext = new ((window as any).AudioContext || (window as any).webkitAudioContext)();
+		let mediaStream = new MediaStream([audioTrack]);
+		let vadHandle = vad(audioContext, mediaStream, {onVoiceStart, onVoiceStop});
+		console.log("VAD attached");
+		let destroy = () => {
+			console.log("destroying VAD");
+			vadHandle.destroy()
+			audioContext.close();
+		};
+		audioTrack.addEventListener("ended", () => destroy());
+		return {
+			connect: () => vadHandle.connect(),
+			disconnect: () => vadHandle.disconnect(),
+			destroy: () => destroy()
+		};
+	} else {
+		return {
+			connect: () => {},
+			disconnect: () => {},
+			destroy: () => {}
+		}
+	}
+}
+
+
+export async function retrieveUserMedia(audioConstraints: UiAudioTrackConstraintsConfig, videoConstraints: UiVideoTrackConstraintsConfig, screenSharingConstraints: UiScreenSharingConstraintsConfig,
+                                        streamEndedHandler: (stream: MediaStream, isDisplay: boolean) => void) {
+	let micCamStream: MediaStream = null;
+	try {
+		if (audioConstraints != null || videoConstraints != null) {
+			micCamStream = await window.navigator.mediaDevices.getUserMedia({audio: audioConstraints, video: createVideoConstraints(videoConstraints)}); // rejected if user denies!
+			listenStreamEnded(micCamStream, () => streamEndedHandler(micCamStream, false));
+		}
+	} catch (e) {
+		throw {
+			exception: e,
+			reason: WebRtcPublishingFailureReason.CAM_MIC_MEDIA_RETRIEVAL_FAILED
+		};
+	}
+
+	let displayStream: MediaStream = null;
+	try {
+		if (screenSharingConstraints != null) {
+			displayStream = await getDisplayStream(screenSharingConstraints); // rejected if user denies!
+			listenStreamEnded(displayStream, () => streamEndedHandler(displayStream, true));
+		}
+	} catch (e) {
+		throw {
+			exception: e,
+			reason: WebRtcPublishingFailureReason.DISPLAY_MEDIA_RETRIEVAL_FAILED
+		};
+	}
+
+	let targetStream: MediaStream;
+	if (displayStream != null && micCamStream != null) {
+		try {
+			let streamsWithMixSizingInfo: MediaStreamWithMixiSizingInfo[] = [];
+			streamsWithMixSizingInfo.push({
+				mediaStream: displayStream,
+				mixSizingInfo: {fullcanvas: true}
+			});
+
+			let cameraMixSizingInfo: MixSizingInfo;
+			if (micCamStream.getVideoTracks().length > 0) {
+				const displayStreamDimensions = await determineVideoSize(displayStream);
+				const mainStreamShortDimension = Math.min(displayStreamDimensions.width, displayStreamDimensions.height);
+				const cameraAspectRatio = micCamStream.getTracks().filter(t => t.kind === "video")[0].getSettings().aspectRatio || 4 / 3;
+				const pictureInPictureHeight = Math.round((25 / 100) * mainStreamShortDimension);
+				const pictureInPictureWidth = Math.round(pictureInPictureHeight * cameraAspectRatio);
+				cameraMixSizingInfo = {
+					width: pictureInPictureWidth,
+					height: pictureInPictureHeight,
+					right: 0,
+					top: 0
+				};
+			} else {
+				cameraMixSizingInfo = {}; // no camera track. audio only. no mix sizing info needed
+			}
+			streamsWithMixSizingInfo.push({mediaStream: micCamStream, mixSizingInfo: cameraMixSizingInfo});
+			targetStream = await mixStreams(streamsWithMixSizingInfo, createDisplayMediaStreamConstraints(screenSharingConstraints), 10);
+		} catch (e) {
+			throw {
+				exception: e,
+				reason: WebRtcPublishingFailureReason.VIDEO_MIXING_FAILED
+			};
+		}
+	} else {
+		targetStream = micCamStream || displayStream;
+	}
+
+	let sourceStreams: MediaStream[] = [];
+	if (micCamStream != null) {
+		sourceStreams.push(micCamStream);
+	}
+	if (displayStream != null) {
+		sourceStreams.push(displayStream);
+	}
+	return {sourceStreams, targetStream};
+}
+
+export function createVideoConstraints(videoConstraints: UiVideoTrackConstraintsConfig): MediaTrackConstraints {
+	return videoConstraints && {
+		...videoConstraints,
+		facingMode: null // TODO UiVideoFacingMode[videoConstraints.facingMode].toLocaleLowerCase() ==> make nullable!!!!
+	};
+}
+
+export function createDisplayMediaStreamConstraints(screenSharingConstraints: UiScreenSharingConstraintsConfig) {
+	return {
+		video: screenSharingConstraints && {
+			frameRate: {max: 5, ideal: 5},
+			width: {max: screenSharingConstraints.maxWidth, ideal: screenSharingConstraints.maxWidth},
+			height: {max: screenSharingConstraints.maxHeight, ideal: screenSharingConstraints.maxHeight}
+		},
+		audio: false, // TODO this might be interesting for sharing the actual computer audio...
+	};
+}
+
+export async function getDisplayStream(screenSharingConstraints: UiScreenSharingConstraintsConfig) {
+	if (canPublishScreen()) {
+		return await (window.navigator.mediaDevices as any).getDisplayMedia(createDisplayMediaStreamConstraints(screenSharingConstraints)) as MediaStream;
+	} else {
+		throw new Error("Cannot share screen! Browser does not provide the corresponding API!");
+	}
+}
+
+export function canPublishScreen() {
+	return (window.navigator.mediaDevices as any).getDisplayMedia != null;
+}
+
+export async function enumerateDevices(): Promise<UiMediaDeviceInfoConfig[]> {
+	const uiMediaDeviceKindByKindString = {
+		'audioinput': UiMediaDeviceKind.AUDIO_INPUT,
+		'videoinput': UiMediaDeviceKind.VIDEO_INPUT,
+		'audiooutput': UiMediaDeviceKind.AUDIO_OUTPUT
+	};
+	try {
+		let stream = await window.navigator.mediaDevices.getUserMedia({audio: true, video: true});
+		stream.getTracks().forEach(t => t.stop()); // close the stream directly!
+	} catch (e) {
+		console.error(e);
+	} finally {
+		try {
+			let devices = await navigator.mediaDevices.enumerateDevices();
+			return devices.map((deviceInfo, i) => createUiMediaDeviceInfoConfig({
+				deviceId: deviceInfo.deviceId,
+				groupId: deviceInfo.groupId,
+				kind: uiMediaDeviceKindByKindString[deviceInfo.kind],
+				label: deviceInfo.label
+			} as UiMediaDeviceInfoConfig))
+				.filter(uiDeviceInfo => uiDeviceInfo.kind != null);
+		} catch (e) {
+			return [];
+		}
+	}
+}
diff --git a/teamapps-client/ts/modules/webrtc/MultiStreamsMixer.ts b/teamapps-client/ts/modules/webrtc/MultiStreamsMixer.ts
new file mode 100644
index 000000000..6d3b48da0
--- /dev/null
+++ b/teamapps-client/ts/modules/webrtc/MultiStreamsMixer.ts
@@ -0,0 +1,322 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+type MediaStreamAudioDestinationNode = AudioNode & { stream: MediaStream };
+export type MixSizingInfo = {
+    fullcanvas?: boolean,
+    width?: number,    // <1: percentage
+    height?: number,   // <1: percentage
+    left?: number,     // <1: percentage
+    top?: number,      // <1: percentage
+    right?: number,    // <1: percentage
+    bottom?: number,   // <1: percentage
+    onRender?: (context: CanvasRenderingContext2D, video: HTMLVideoElement, mixSizingInfo: MixSizingInfo, x: number, y: number, width: number, height: number) => void
+};
+export type MediaStreamWithMixiSizingInfo = {
+    mediaStream: MediaStream,
+    mixSizingInfo: MixSizingInfo
+};
+export type MediaStreamWithMixiSizingInfoAndVideo = MediaStreamWithMixiSizingInfo & { video?: HTMLVideoElement };
+
+export class MultiStreamsMixer {
+    private closed = false;
+    private inputMediaStreams: MediaStreamWithMixiSizingInfoAndVideo[];
+    private outputMediaStream?: MediaStream;
+
+    private canvas: HTMLCanvasElement;
+    private context: CanvasRenderingContext2D | null;
+
+    private frameInterval: number;
+    private isStopDrawingFrames = false;
+
+    private audioContext?: AudioContext & { createMediaStreamDestination(): MediaStreamAudioDestinationNode };
+    private audioDestination?: MediaStreamAudioDestinationNode;
+
+    constructor(inputMediaStreams: MediaStreamWithMixiSizingInfo[], frameRate: number = 10) {
+        if (inputMediaStreams.length === 0) {
+            throw "inputMediaSreams may not be empty!";
+        }
+        this.closed=false;
+        this.frameInterval = 1000 / frameRate;
+        this.inputMediaStreams = inputMediaStreams;
+        this.canvas = document.createElement('canvas');
+        this.context = this.canvas.getContext('2d');
+        this.canvas.style.position = 'absolute';
+        this.canvas.style.left = '-100000px';
+        this.canvas.style.top = '-100000px';
+        (document.body || document.documentElement).appendChild(this.canvas);
+    }
+
+    public async getMixedStream(): Promise<MediaStream> {
+        if (this.outputMediaStream == null) {
+            this.closed=false;
+            const mixedVideoStream = await this.getMixedVideoStream();
+            const mixedAudioStream = this.getMixedAudioStream();
+
+            if (mixedAudioStream) {
+                mixedAudioStream.getTracks().filter((t) => {
+                    return t.kind === 'audio';
+                }).forEach((track) => {
+                    mixedVideoStream.addTrack(track);
+                });
+            }
+            this.drawVideosToCanvas();
+
+            this.outputMediaStream = mixedVideoStream;
+
+            let endListenerAlreadyCalled = false;
+            this.outputMediaStream.getTracks().forEach(track => {
+                track.addEventListener("ended", () => {
+                    let streamAlive = this.outputMediaStream.active && this.outputMediaStream.getTracks().filter(t => t.readyState !== 'ended').length > 0;
+                    if (!endListenerAlreadyCalled && !streamAlive) {
+                        endListenerAlreadyCalled = true;
+                        console.log("Closing MultiStreamsMixer since outputMediaStream has ended.");
+                        this.close();
+                    }
+                });
+            })
+        }
+        return this.outputMediaStream;
+    }
+
+    public getInputMediaStreams() {
+        return this.inputMediaStreams;
+    }
+
+    public close() {
+        if(this && !this.closed){
+            this.closed=true;
+            [this.outputMediaStream].concat(this.inputMediaStreams.map(ms => ms.mediaStream))
+                .forEach(ms => ms && ms.getTracks().forEach(t => {
+                    t.stop();
+                    t.dispatchEvent(new Event("ended"));
+                }));
+            this.canvas.remove();
+        }
+    };
+
+    private drawVideosToCanvas() {
+        if (this.isStopDrawingFrames) {
+            return;
+        }
+
+        let fullcanvasVideo = this.inputMediaStreams.filter(ims => ims.mixSizingInfo.fullcanvas && ims.mediaStream.getVideoTracks().length > 0)[0];
+        let remainingVideos = this.inputMediaStreams.filter(ims => ims !== fullcanvasVideo && ims.mediaStream.getVideoTracks().length > 0);
+
+        if (fullcanvasVideo && this.canvas) {
+            this.canvas.width = fullcanvasVideo.mixSizingInfo.width || (fullcanvasVideo.video != null ? fullcanvasVideo.video.videoWidth : 0);
+            this.canvas.height = fullcanvasVideo.mixSizingInfo.height || (fullcanvasVideo.video != null ? fullcanvasVideo.video.videoHeight : 0);
+        } else {
+            this.canvas.width = 360;
+            this.canvas.height = 240;
+        }
+
+        if (fullcanvasVideo && fullcanvasVideo.video instanceof HTMLVideoElement) {
+            this.drawImage(fullcanvasVideo.video, fullcanvasVideo.mixSizingInfo);
+        }
+
+        remainingVideos.forEach((video) => {
+            if(video.video){
+                this.drawImage(video.video, video.mixSizingInfo);
+            }
+        });
+
+        setTimeout(() => this.drawVideosToCanvas(), this.frameInterval);
+    }
+
+    private drawImage(video: HTMLVideoElement, mixSizingInfo: MixSizingInfo) {
+        if (this.isStopDrawingFrames) {
+            return;
+        }
+
+        let x = 0;
+        let y = 0;
+        let width;
+        let height;
+
+        if (mixSizingInfo.width != null) {
+            if (mixSizingInfo.width >= 1) {
+                width = mixSizingInfo.width;
+            } else {
+                width = this.canvas.width * mixSizingInfo.width;
+            }
+        } else {
+            width = this.canvas.width;
+        }
+        if (mixSizingInfo.height != null) {
+            if (mixSizingInfo.height >= 1) {
+                height = mixSizingInfo.height;
+            } else {
+                height = this.canvas.height * mixSizingInfo.height;
+            }
+        } else {
+            height = this.canvas.height;
+        }
+
+        if (mixSizingInfo.left != null) {
+            if (mixSizingInfo.left >= 1) {
+                x = mixSizingInfo.left;
+            } else {
+                x = this.canvas.width * mixSizingInfo.left;
+            }
+        }
+        if (mixSizingInfo.top != null) {
+            if (mixSizingInfo.top >= 1) {
+                y = mixSizingInfo.top;
+            } else {
+                y = this.canvas.height * mixSizingInfo.top;
+            }
+        }
+        if (mixSizingInfo.right != null) {
+            if (mixSizingInfo.right >= 1) {
+                x = this.canvas.width - width - mixSizingInfo.right;
+            } else {
+                x = this.canvas.width - width - (this.canvas.width * mixSizingInfo.right);
+            }
+        }
+        if (mixSizingInfo.bottom != null) {
+            if (mixSizingInfo.bottom >= 1) {
+                y = this.canvas.height - height - mixSizingInfo.bottom;
+            } else {
+                y = this.canvas.height - height - (this.canvas.height * mixSizingInfo.bottom);
+            }
+        }
+
+
+        if(this.context){
+            this.context.drawImage(video, x, y, width, height);
+
+            if (typeof mixSizingInfo.onRender === 'function') {
+                mixSizingInfo.onRender(this.context, video, mixSizingInfo, x, y, width, height);
+            }
+        }
+
+    }
+
+    private async getMixedVideoStream() {
+        await this.resetVideoStreams();
+
+        const videoStream = new MediaStream();
+
+        const capturedStream = ((this.canvas as any).captureStream && (this.canvas as any).captureStream())
+            || ((this.canvas as any).mozCaptureStream && (this.canvas as any).mozCaptureStream());
+        capturedStream.getTracks().filter((t: MediaStreamTrack) => {
+            return t.kind === 'video';
+        }).forEach((track: MediaStreamTrack) => {
+            videoStream.addTrack(track);
+        });
+
+        return videoStream;
+    }
+
+    private getMixedAudioStream(): MediaStream | undefined {
+        this.audioContext = new ((window as any).AudioContext || (window as any).webkitAudioContext || (window as any).mozAudioContext)();
+        if (!this.audioContext) {
+            return;
+        }
+
+        const audioSources: MediaStreamAudioSourceNode[] = [];
+        let audioTracksLength = 0;
+        this.inputMediaStreams.forEach((stream) => {
+            if (!stream.mediaStream.getTracks().filter((t) => {
+                return t.kind === 'audio';
+            }).length) {
+                return;
+            }
+            audioTracksLength++;
+            if (!this.audioContext) {
+                return;
+            }
+            const audioSource: MediaStreamAudioSourceNode = this.audioContext.createMediaStreamSource(stream.mediaStream);
+
+            audioSources.push(audioSource);
+
+        });
+
+        if (!audioTracksLength) {
+            return;
+        }
+
+        this.audioDestination = this.audioContext.createMediaStreamDestination();
+
+        audioSources.forEach((audioSource) => {
+            if (!this.audioDestination) {
+                return;
+            }
+            audioSource.connect(this.audioDestination);
+        });
+        return this.audioDestination.stream;
+    }
+
+    private static async createVideo(stream: MediaStreamWithMixiSizingInfoAndVideo): Promise<HTMLVideoElement> {
+        const video = document.createElement('video');
+        video.srcObject = stream.mediaStream;
+        video.muted = true;
+        video.volume = 0;
+        await video.play();
+
+        if (stream.mixSizingInfo.width != null && stream.mixSizingInfo.height != null) {
+            video.width = stream.mixSizingInfo.width;
+            video.height = stream.mixSizingInfo.height;
+        } else {
+            let size = await determineVideoSize(stream.mediaStream);
+            video.width = size.width;
+            video.height = size.height;
+        }
+
+        return video;
+    }
+
+    private async resetVideoStreams() {
+        for (let stream of this.inputMediaStreams) {
+            delete stream.video;
+            if (stream.mediaStream.getVideoTracks().length == 0) {
+                continue;
+            }
+
+            stream.video = await MultiStreamsMixer.createVideo(stream);
+        }
+    }
+
+}
+
+export async function determineVideoSize(mediaStream: MediaStream, timeout = 1000): Promise<{ width: number, height: number }> {
+    if (mediaStream.getVideoTracks().length == 0) {
+        return {width: 0, height: 0};
+    }
+    return new Promise((resolve, reject) => {
+        let video:HTMLVideoElement = document.createElement('video');
+        video.style.position = 'absolute';
+        video.style.left = '-100000px';
+        video.style.top = '-100000px';
+        document.body.appendChild(video);
+        video.srcObject = mediaStream;
+        video.muted = true;
+        video.onloadedmetadata = (e) => {
+            resolve({width: video.videoWidth, height: video.videoHeight});
+            video.srcObject = null;
+            video.remove();
+        };
+        setTimeout(() => {
+            reject();
+            video.srcObject = null;
+            video.remove();
+        }, timeout);
+    });
+}
diff --git a/teamapps-client/ts/modules/webrtc/VideoTrackMixer.ts b/teamapps-client/ts/modules/webrtc/VideoTrackMixer.ts
new file mode 100644
index 000000000..092f606ff
--- /dev/null
+++ b/teamapps-client/ts/modules/webrtc/VideoTrackMixer.ts
@@ -0,0 +1,204 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+export type MixSizingInfo = {
+	fullCanvas?: boolean,
+	width?: number,    // <= 1: percentage
+	height?: number,   // <= 1: percentage
+	left?: number,     // <= 1: percentage
+	top?: number,      // <= 1: percentage
+	right?: number,    // <= 1: percentage
+	bottom?: number,   // <= 1: percentage
+	flipX?: boolean,
+	onRender?: (context: CanvasRenderingContext2D, video: HTMLVideoElement, mixSizingInfo: MixSizingInfo, x: number, y: number, width: number, height: number) => void
+};
+export type TrackWithMixSizingInfo = {
+	mediaTrack: MediaStreamTrack,
+	mixSizingInfo: MixSizingInfo
+};
+export type TrackWithMixSizingInfoAndVideo = TrackWithMixSizingInfo & { videoElement?: HTMLVideoElement };
+
+export class VideoTrackMixer {
+	private readonly inputTracks: TrackWithMixSizingInfoAndVideo[];
+	private readonly canvas: HTMLCanvasElement;
+	private readonly context: CanvasRenderingContext2D | null;
+	private readonly frameRate: number;
+
+	private drawVideoIntervalId: number;
+	private outputTrack?: MediaStreamTrack;
+
+	constructor(inputMediaStreamTracks: TrackWithMixSizingInfo[], frameRate: number = 10) {
+		if (inputMediaStreamTracks.length === 0) {
+			throw "inputMediaSreams may not be empty!";
+		}
+		this.frameRate = frameRate;
+		this.inputTracks = inputMediaStreamTracks;
+		this.canvas = document.createElement('canvas');
+		this.context = this.canvas.getContext('2d');
+		this.canvas.style.position = 'absolute';
+		this.canvas.style.left = '-100000px';
+		this.canvas.style.top = '-100000px';
+		this.canvas.style.width = '800px';
+		this.canvas.style.height = '600px';
+	}
+
+	public getMixedTrack(): MediaStreamTrack {
+		(window as any).mixers = (window as any).mixers || [];
+		(window as any).mixers.push(this);
+
+		if (this.outputTrack == null) {
+			(document.body || document.documentElement).appendChild(this.canvas); // TODO check whether this actually needs to get attached to the DOM!
+			for (let track of this.inputTracks) {
+				track.videoElement = createVideoElement(track.mediaTrack);
+			}
+			this.outputTrack = this.getMixedVideoTrack();
+			this.drawVideoIntervalId = window.setInterval(() => this.drawVideosToCanvas(), 1000 / this.frameRate);
+		}
+		return this.outputTrack;
+	}
+
+	private getMixedVideoTrack() {
+		const capturedStream: MediaStream = ((this.canvas as any).captureStream && (this.canvas as any).captureStream(this.frameRate))
+			|| ((this.canvas as any).mozCaptureStream && (this.canvas as any).mozCaptureStream(this.frameRate));
+		return capturedStream.getVideoTracks()[0];
+	}
+
+	private drawVideosToCanvas() {
+		let fullCanvasVideo = this.inputTracks.filter(track => track.mixSizingInfo.fullCanvas)[0];
+		let remainingVideos = this.inputTracks.filter(ims => ims !== fullCanvasVideo);
+
+		if (fullCanvasVideo) {
+			this.canvas.width = fullCanvasVideo.mixSizingInfo.width || fullCanvasVideo.videoElement.videoWidth;
+			this.canvas.height = fullCanvasVideo.mixSizingInfo.height || fullCanvasVideo.videoElement.videoHeight;
+		} else {
+			this.canvas.width = 360;
+			this.canvas.height = 240;
+		}
+
+		if (fullCanvasVideo) {
+			this.drawImage(fullCanvasVideo.videoElement, fullCanvasVideo.mixSizingInfo);
+		}
+
+		remainingVideos.forEach((video) => {
+			this.drawImage(video.videoElement, video.mixSizingInfo);
+		});
+	}
+
+	private drawImage(video: HTMLVideoElement, mixSizingInfo: MixSizingInfo) {
+		let x = 0;
+		let y = 0;
+		let width;
+		let height;
+
+		if (mixSizingInfo.width != null) {
+			if (mixSizingInfo.width >= 1) {
+				width = mixSizingInfo.width;
+			} else {
+				width = this.canvas.width * mixSizingInfo.width;
+			}
+		} else {
+			width = this.canvas.width;
+		}
+		if (mixSizingInfo.height != null) {
+			if (mixSizingInfo.height >= 1) {
+				height = mixSizingInfo.height;
+			} else {
+				height = this.canvas.height * mixSizingInfo.height;
+			}
+		} else {
+			height = this.canvas.height;
+		}
+
+		if (mixSizingInfo.left != null) {
+			if (mixSizingInfo.left >= 1) {
+				x = mixSizingInfo.left;
+			} else {
+				x = this.canvas.width * mixSizingInfo.left;
+			}
+		}
+		if (mixSizingInfo.top != null) {
+			if (mixSizingInfo.top >= 1) {
+				y = mixSizingInfo.top;
+			} else {
+				y = this.canvas.height * mixSizingInfo.top;
+			}
+		}
+		if (mixSizingInfo.right != null) {
+			if (mixSizingInfo.right >= 1) {
+				x = this.canvas.width - width - mixSizingInfo.right;
+			} else {
+				x = this.canvas.width - width - (this.canvas.width * mixSizingInfo.right);
+			}
+		}
+		if (mixSizingInfo.bottom != null) {
+			if (mixSizingInfo.bottom >= 1) {
+				y = this.canvas.height - height - mixSizingInfo.bottom;
+			} else {
+				y = this.canvas.height - height - (this.canvas.height * mixSizingInfo.bottom);
+			}
+		}
+
+
+		if (this.context) {
+			if (mixSizingInfo.flipX) {
+				this.context.save();
+				this.context.scale(-1, 1);
+				this.context.drawImage(video, -x, y, -width, height);
+				this.context.restore();
+			} else {
+				this.context.drawImage(video, x, y, width, height);
+			}
+
+			if (typeof mixSizingInfo.onRender === 'function') {
+				mixSizingInfo.onRender(this.context, video, mixSizingInfo, x, y, width, height);
+			}
+		}
+
+	}
+
+	public close() {
+		this.outputTrack.stop();
+		this.outputTrack = null;
+		this.inputTracks.forEach(inputTrack => {
+			// TODO maybe the getUserDisplay() does not support being retrieved twice!
+			inputTrack.videoElement.srcObject = null;
+		});
+		this.canvas.remove();
+		window.clearInterval(this.drawVideoIntervalId);
+	};
+}
+
+function createVideoElement(videoTrack: MediaStreamTrack) {
+	const video = document.createElement('video');
+	video.srcObject = new MediaStream([videoTrack]);
+	video.muted = true;
+	video.volume = 0;
+
+	video.addEventListener("pause", ev => {
+		console.log("VideoTrackMixer video: pause");
+		this.$video.play(); // happens when the video player gets detached under android while switching views
+	});
+
+	// document.body.appendChild(video);
+	video.style.width = "800px";
+
+	video.play()
+		.catch(e => console.error("Error while play() on mixer source video element!", e));
+	return video;
+}
diff --git a/teamapps-client/ts/modules/webrtc/mediasoup-v3/AudioTrackMixPlayer.ts b/teamapps-client/ts/modules/webrtc/mediasoup-v3/AudioTrackMixPlayer.ts
new file mode 100644
index 000000000..28885b1c1
--- /dev/null
+++ b/teamapps-client/ts/modules/webrtc/mediasoup-v3/AudioTrackMixPlayer.ts
@@ -0,0 +1,56 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+import {TeamAppsEvent} from "../../util/TeamAppsEvent";
+
+export class AudioTrackMixPlayer {
+
+	public readonly onResumeSuccessful: TeamAppsEvent<void> = new TeamAppsEvent();
+	private audioContext: AudioContext;
+
+	constructor() {
+		this.audioContext = new ((window as any).AudioContext || (window as any).webkitAudioContext || (window as any).mozAudioContext)();
+	}
+
+	public async addAudioTrack(track: MediaStreamTrack) {
+		let audioTrackSource = this.audioContext.createMediaStreamSource(new MediaStream([track]));
+		audioTrackSource.connect(this.audioContext.destination);
+		
+		track.addEventListener("ended", () => {
+			// This is probably not necessary, since the audio nodes should die with their mediaStream. See: https://www.w3.org/TR/webaudio/#lifetime-AudioNode
+			// Note that this event is somehow not triggered by Firefox although the track switches to state "ended" as stated in the spec.
+			audioTrackSource.disconnect();
+		});
+	}
+
+	public async tryResume() {
+		if (this.audioContext.state !== "running") {
+			await this.audioContext.resume();
+			if ((this.audioContext.state as string) === "running") {
+				this.onResumeSuccessful.fireIfChanged(null);
+			}
+		} else {
+			this.onResumeSuccessful.fireIfChanged(null);
+		}
+	}
+
+	public getAudioContextState() {
+		return this.audioContext.state;
+	}
+}
diff --git a/teamapps-client/ts/modules/webrtc/mediasoup-v3/UiMediaSoupV3WebRtcClient.ts b/teamapps-client/ts/modules/webrtc/mediasoup-v3/UiMediaSoupV3WebRtcClient.ts
new file mode 100644
index 000000000..a1886565a
--- /dev/null
+++ b/teamapps-client/ts/modules/webrtc/mediasoup-v3/UiMediaSoupV3WebRtcClient.ts
@@ -0,0 +1,741 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+
+import {AbstractUiComponent} from "../../AbstractUiComponent";
+import {TeamAppsUiComponentRegistry} from "../../TeamAppsUiComponentRegistry";
+import {TeamAppsEvent} from "../../util/TeamAppsEvent";
+import {
+	UiMediaSoupV3WebRtcClient_ClickedEvent,
+	UiMediaSoupV3WebRtcClient_ConnectionStateChangedEvent,
+	UiMediaSoupV3WebRtcClient_ContextMenuRequestedEvent,
+	UiMediaSoupV3WebRtcClient_SourceMediaTrackEndedEvent,
+	UiMediaSoupV3WebRtcClient_SourceMediaTrackRetrievalFailedEvent,
+	UiMediaSoupV3WebRtcClient_SubscribingFailedEvent,
+	UiMediaSoupV3WebRtcClient_SubscribingSuccessfulEvent,
+	UiMediaSoupV3WebRtcClient_SubscriptionPlaybackFailedEvent,
+	UiMediaSoupV3WebRtcClient_TrackPublishingFailedEvent,
+	UiMediaSoupV3WebRtcClient_TrackPublishingSuccessfulEvent,
+	UiMediaSoupV3WebRtcClient_VoiceActivityChangedEvent,
+	UiMediaSoupV3WebRtcClientCommandHandler,
+	UiMediaSoupV3WebRtcClientConfig,
+	UiMediaSoupV3WebRtcClientEventSource
+} from "../../../generated/UiMediaSoupV3WebRtcClientConfig";
+import {TeamAppsUiContext} from "../../TeamAppsUiContext";
+import {UiMediaSoupPublishingParametersConfig} from "../../../generated/UiMediaSoupPublishingParametersConfig";
+import {arraysEqual, calculateDisplayModeInnerSize, deepEquals, findClassesByFunction, parseHtml} from "../../Common";
+import {ContextMenu} from "../../micro-components/ContextMenu";
+import {addVoiceActivityDetection, createVideoConstraints, enumerateDevices, getDisplayStream} from "../MediaUtil";
+import {UiPageDisplayMode} from "../../../generated/UiPageDisplayMode";
+import {UiComponent} from "../../UiComponent";
+import {UiMediaSoupPlaybackParametersConfig} from "../../../generated/UiMediaSoupPlaybackParametersConfig";
+import {UiMediaDeviceInfoConfig} from "../../../generated/UiMediaDeviceInfoConfig";
+import {MediaKind} from "mediasoup-client/lib/RtpParameters";
+import {UiAudioTrackConstraintsConfig} from "../../../generated/UiAudioTrackConstraintsConfig";
+import {UiVideoTrackConstraintsConfig} from "../../../generated/UiVideoTrackConstraintsConfig";
+import {UiScreenSharingConstraintsConfig} from "../../../generated/UiScreenSharingConstraintsConfig";
+import {MixSizingInfo, TrackWithMixSizingInfo, VideoTrackMixer} from "../VideoTrackMixer";
+import {determineVideoSize} from "../MultiStreamsMixer";
+import {UiMediaRetrievalFailureReason} from "../../../generated/UiMediaRetrievalFailureReason";
+import {UiSourceMediaTrackType} from "../../../generated/UiSourceMediaTrackType";
+import {ConferenceApi, Utils} from "./lib/avcore.client";
+import {ConferenceInput} from "./lib/avcore";
+import {GainController} from "../GainController";
+import {UiToolButton} from "../../micro-components/UiToolButton";
+import {VoiceActivityDetectionHandle} from "voice-activity-detection";
+
+export class UiMediaSoupV3WebRtcClient extends AbstractUiComponent<UiMediaSoupV3WebRtcClientConfig> implements UiMediaSoupV3WebRtcClientCommandHandler, UiMediaSoupV3WebRtcClientEventSource {
+	public readonly onSourceMediaTrackRetrievalFailed: TeamAppsEvent<UiMediaSoupV3WebRtcClient_SourceMediaTrackRetrievalFailedEvent> = new TeamAppsEvent();
+	public readonly onSourceMediaTrackEnded: TeamAppsEvent<UiMediaSoupV3WebRtcClient_SourceMediaTrackEndedEvent> = new TeamAppsEvent();
+
+	public readonly onTrackPublishingSuccessful: TeamAppsEvent<UiMediaSoupV3WebRtcClient_TrackPublishingSuccessfulEvent> = new TeamAppsEvent();
+	public readonly onTrackPublishingFailed: TeamAppsEvent<UiMediaSoupV3WebRtcClient_TrackPublishingFailedEvent> = new TeamAppsEvent();
+
+	public readonly onSubscribingSuccessful: TeamAppsEvent<UiMediaSoupV3WebRtcClient_SubscribingSuccessfulEvent> = new TeamAppsEvent();
+	public readonly onSubscribingFailed: TeamAppsEvent<UiMediaSoupV3WebRtcClient_SubscribingFailedEvent> = new TeamAppsEvent();
+	public readonly onSubscriptionPlaybackFailed: TeamAppsEvent<UiMediaSoupV3WebRtcClient_SubscriptionPlaybackFailedEvent> = new TeamAppsEvent();
+
+	public readonly onConnectionStateChanged: TeamAppsEvent<UiMediaSoupV3WebRtcClient_ConnectionStateChangedEvent> = new TeamAppsEvent();
+
+	public readonly onVoiceActivityChanged: TeamAppsEvent<UiMediaSoupV3WebRtcClient_VoiceActivityChangedEvent> = new TeamAppsEvent();
+	public readonly onClicked: TeamAppsEvent<UiMediaSoupV3WebRtcClient_ClickedEvent> = new TeamAppsEvent();
+	public readonly onContextMenuRequested: TeamAppsEvent<UiMediaSoupV3WebRtcClient_ContextMenuRequestedEvent> = new TeamAppsEvent();
+
+	private $main: HTMLDivElement;
+	private $image: HTMLImageElement;
+	private $videoContainer: HTMLElement;
+	private $video: HTMLVideoElement;
+	private $profileDisplay: HTMLElement;
+	private $bitrateDisplayWrapper: HTMLElement;
+	private $audioBitrateDisplay: HTMLElement;
+	private $videoBitrateDisplay: HTMLElement;
+	private $toolsAndIconsBar: HTMLElement;
+	private $toolButtons: HTMLElement;
+	private $icons: HTMLImageElement;
+	private $caption: HTMLElement;
+	private $spinner: HTMLElement;
+	private $unmuteButtonWrapper: HTMLElement;
+
+	private contextMenu: ContextMenu;
+	private conferenceClient: ConferenceApi;
+
+	private gainController: GainController;
+	private webcamTrack: MediaStreamTrack;
+	private screenTrack: MediaStreamTrack;
+	private videoTrackMixer: VideoTrackMixer;
+	private targetStream: MediaStream;
+
+	private connectionStatus: {
+		rtcPeerConnectionState: RTCPeerConnectionState | null,
+		shouldHaveAudio: boolean,
+		shouldHaveVideo: boolean,
+		audioBitrate: number,
+		videoBitrate: number
+	} = {
+		rtcPeerConnectionState: null,
+		shouldHaveAudio: false,
+		shouldHaveVideo: false,
+		audioBitrate: 0,
+		videoBitrate: 0
+	};
+	private vad: VoiceActivityDetectionHandle;
+
+	constructor(config: UiMediaSoupV3WebRtcClientConfig, context: TeamAppsUiContext) {
+		super(config, context);
+
+		// debug.enable(
+		// 	'conference-api* mediasoup-client*' //enable conference api and mediasoup client logs
+		// );
+
+
+		this.$main = parseHtml(`<div class="UiMediaSoupV3WebRtcClient state-idle">
+	<div class="video-container">
+		<img class="image"></img>
+		<video class="video" playsinline></video>
+		<div class="tools-and-icons-bar">
+		    <div class="tool-buttons"></div>
+			<div class="icons"></div>
+		</div>
+		<div class="bitrate-display hidden">
+			<div class="bitrate-audio"></div>
+			<div class="bitrate-video"></div>
+		</div>
+		<div class="spinner-wrapper">
+			<div class="spinner teamapps-spinner"></div>
+		</div>
+		<div class="unmute-button-wrapper hidden" style="z-index: 2; position: absolute; top: 0; left: 0">
+			 <img class="unmute-button hidden" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0id2hpdGUiIHdpZHRoPSIxMDAwMHB4IiBoZWlnaHQ9IjEwMDAwcHgiPjxwYXRoIGQ9Ik0xNi41IDEyYzAtMS43Ny0xLjAyLTMuMjktMi41LTQuMDN2Mi4yMWwyLjQ1IDIuNDVjLjAzLS4yLjA1LS40MS4wNS0uNjN6bTIuNSAwYzAgLjk0LS4yIDEuODItLjU0IDIuNjRsMS41MSAxLjUxQzIwLjYzIDE0LjkxIDIxIDEzLjUgMjEgMTJjMC00LjI4LTIuOTktNy44Ni03LTguNzd2Mi4wNmMyLjg5Ljg2IDUgMy41NCA1IDYuNzF6TTQuMjcgM0wzIDQuMjcgNy43MyA5SDN2Nmg0bDUgNXYtNi43M2w0LjI1IDQuMjVjLS42Ny41Mi0xLjQyLjkzLTIuMjUgMS4xOHYyLjA2YzEuMzgtLjMxIDIuNjMtLjk1IDMuNjktMS44MUwxOS43MyAyMSAyMSAxOS43M2wtOS05TDQuMjcgM3pNMTIgNEw5LjkxIDYuMDkgMTIgOC4xOFY0eiIvPjxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz48L3N2Zz4="></img>
+		</div>
+	</div>
+	<div class="caption"></div>
+	<div class="profile hidden">.</div>
+</div>`);
+		this.$image = this.$main.querySelector(":scope .image");
+		this.$videoContainer = this.$main.querySelector(":scope .video-container");
+		this.$video = this.$main.querySelector<HTMLVideoElement>(":scope .video");
+		this.$profileDisplay = this.$main.querySelector(":scope .profile");
+		this.$bitrateDisplayWrapper = this.$main.querySelector(":scope .bitrate-display");
+		this.$audioBitrateDisplay = this.$main.querySelector(":scope .bitrate-audio");
+		this.$videoBitrateDisplay = this.$main.querySelector(":scope .bitrate-video");
+		this.$toolsAndIconsBar = this.$main.querySelector(":scope .tools-and-icons-bar");
+		this.$toolButtons = this.$main.querySelector(":scope .tool-buttons");
+		this.$icons = this.$main.querySelector(":scope .icons");
+		this.$caption = this.$main.querySelector(":scope .caption");
+		this.$spinner = this.$main.querySelector(":scope .spinner");
+		this.$unmuteButtonWrapper = this.$main.querySelector(":scope .unmute-button-wrapper");
+
+		this.contextMenu = new ContextMenu();
+
+		[this.$videoContainer, this.$caption].forEach($element => $element.addEventListener("click", () => {
+			this.onClicked.fire({})
+		}));
+		[this.$videoContainer, this.$caption].forEach($element => $element.addEventListener("contextmenu", (e) => {
+			if (this._config.contextMenuEnabled) {
+				this.contextMenu.open(e, requestId => this.onContextMenuRequested.fire({requestId}))
+			}
+		}));
+		this.$image.addEventListener("load", () => {
+			console.log("load");
+			this.onResize()
+		});
+		this.$video.addEventListener("pause", ev => {
+			console.log("pause");
+			setTimeout(() => {
+				this.$video.play(); // happens when the video player gets detached under android while switching views
+			}, 1000);
+		});
+		["progress", "timeupdate"].forEach(eventName => {
+			this.$video.addEventListener(eventName, ev => {
+				this.updateVideoVisibility();
+				this.onResize()
+			});
+		});
+		["play"].forEach(eventName => {
+			this.$video.addEventListener(eventName, ev => {
+				console.log(eventName);
+				// this.$unmuteButtonWrapper.classList.add("hidden");
+			});
+		});
+		["stalled", "waiting", "ended", "suspend", "abort", "error", "emptied", "pause"].forEach(eventName => {
+			this.$video.addEventListener(eventName, ev => {
+				console.log(eventName);
+			});
+		});
+
+		this._config = {
+			toolButtons: config.toolButtons
+		}; // make sure everything is regarded as new! _config will get set at the end again...
+
+		this.gainController = new GainController(1);
+
+		this.update(config);
+	}
+
+	doGetMainElement(): HTMLElement {
+		return this.$main;
+	}
+
+	private updateStateCssClasses() {
+		const oldStateClasses = findClassesByFunction(this.$main.classList, className => className.startsWith("state-"));
+
+		const newStateClasses: string[] = [];
+		if (!this.connectionStatus.shouldHaveAudio && !this.connectionStatus.shouldHaveVideo) {
+			newStateClasses.push("state-idle");
+		} else if (this.connectionStatus.rtcPeerConnectionState !== "connected") {
+			newStateClasses.push("state-connecting");
+		} else if (this.connectionStatus.shouldHaveAudio && this.connectionStatus.audioBitrate === 0
+			|| this.connectionStatus.shouldHaveVideo && this.connectionStatus.videoBitrate === 0) {
+			newStateClasses.push("state-audio-loading");
+		} else {
+			newStateClasses.push("state-streaming")
+		}
+
+		oldStateClasses.filter(oldClass => newStateClasses.indexOf(oldClass) === -1).forEach(oldClass => this.$main.classList.remove(oldClass));
+		newStateClasses.filter(newClass => oldStateClasses.indexOf(newClass) === -1).forEach(newClass => this.$main.classList.add(newClass));
+	}
+
+	private async stop() {
+		console.log("stop()");
+		if (this.conferenceClient != null) {
+			let conferenceClient = this.conferenceClient;
+			await conferenceClient.close()
+				.catch((e: any) => {
+					console.error("Error while closing conference client! Retrying the hard way.", e);
+					conferenceClient.close(true);
+				});
+			this.vad?.destroy();
+			this.gainController.inputTrack?.stop();
+			this.conferenceClient = null;
+			this.$video.classList.remove("mirrored");
+		}
+		// this.connectionStatus.status = "idle";
+		await this.updatePublishedTracks(null, null, null);
+		this.updateStateCssClasses();
+		this.$video.srcObject = null;
+		this._config.publishingParameters = null;
+		this._config.playbackParameters = null;
+	}
+
+	private updatePromise: Promise<void> = Promise.resolve();
+
+	update(config: UiMediaSoupV3WebRtcClientConfig): void {
+		this.updatePromise = this.updatePromise.finally(() => {
+			return this.updateInternal(config);
+		})
+	}
+
+	async updateInternal(config: UiMediaSoupV3WebRtcClientConfig) {
+		console.log("update()", config);
+		this.$main.classList.toggle("activity-line-visible", config.activityLineVisible);
+		this.$main.style.setProperty("--activity-line-inactive-color", config.activityInactiveColor);
+		this.$main.style.setProperty("--activity-line-inactive-color", config.activityActiveColor);
+
+		this.$bitrateDisplayWrapper.classList.toggle('hidden', !config.bitrateDisplayEnabled);
+
+		if (!arraysEqual(config.toolButtons, this._config.toolButtons)) {
+			this.$toolButtons.innerHTML = '';
+			(config.toolButtons as UiToolButton[]).forEach(toolButton => {
+				this.$toolButtons.append(toolButton.getMainElement());
+			});
+		}
+		if (!arraysEqual(config.icons, this._config.icons)) {
+			this.$icons.innerHTML = '';
+			config.icons.forEach(iconUrl => {
+				const $img = document.createElement("img");
+				$img.classList.add("icon");
+				$img.src = iconUrl;
+				this.$icons.appendChild($img);
+			});
+		}
+
+		this.$caption.classList.toggle("hidden", config.caption == null);
+		this.$caption.innerText = config.caption;
+
+		if (this.$image.src !== config.noVideoImageUrl) { // only do this if actually changed, since the image looses its naturalWidth/naturalHeight for a short (but important!) time!
+			this.$image.src = config.noVideoImageUrl;
+		}
+
+		this.$video.volume = config.playbackVolume;
+		await this.updateConferenceClient(config);
+
+		this._config = config;
+
+		this.updateVideoVisibility();
+		this.onResize();
+	}
+
+	private async updateConferenceClient(config: UiMediaSoupV3WebRtcClientConfig) {
+		if (config.publishingParameters != null && config.playbackParameters != null) {
+			console.error("Cannot publish and playback at the same time. Doing nothing!");
+			return;
+		}
+		const roleChange = this._config.publishingParameters != null && config.playbackParameters != null
+			|| this._config.playbackParameters != null && config.publishingParameters != null;
+		if (roleChange) {
+			await this.stop();
+		}
+		if (config.playbackParameters != null) {
+			await this.updatePlayback(config.playbackParameters, this._config.forceRefreshCount != config.forceRefreshCount);
+		} else if (config.publishingParameters != null) {
+			await this.updatePublishing(config.publishingParameters, this._config.forceRefreshCount != config.forceRefreshCount);
+		} else {
+			this.connectionStatus.shouldHaveAudio = false;
+			this.connectionStatus.shouldHaveVideo = false;
+			await this.stop();
+		}
+		this._config.forceRefreshCount = config.forceRefreshCount;
+	}
+
+	async updatePlayback(newParams: UiMediaSoupPlaybackParametersConfig, forceRefresh: boolean) {
+		this.connectionStatus.shouldHaveAudio = newParams.audio;
+		this.connectionStatus.shouldHaveVideo = newParams.video;
+		this.updateStateCssClasses();
+
+		const oldParams = this._config.playbackParameters;
+		const needsReset = forceRefresh
+			|| oldParams?.server?.url !== newParams?.server?.url || oldParams?.server?.worker !== newParams?.server?.worker
+			|| oldParams?.origin?.url !== newParams?.origin?.url || oldParams?.origin?.worker !== newParams?.origin?.worker
+			|| oldParams?.streamUuid != newParams?.streamUuid;
+		if (needsReset) {
+			console.log("updatePlayback() --> needsReset", oldParams, newParams);
+			await this.stop();
+
+			if (newParams != null) {
+				try {
+					let conferenceApiConfig: ConferenceInput = {
+						stream: newParams.streamUuid,
+						token: newParams.server.token,
+						url: newParams.server.url,
+						worker: newParams.server.worker,
+						origin: newParams.origin,
+						kinds: [...(newParams.audio ? ["audio"] : []), ...(newParams.video ? ["video"] : [])] as MediaKind[],
+						stopTracks: true
+					};
+					console.log("ConferenceApi config: ", conferenceApiConfig);
+					this.conferenceClient = new ConferenceApi(conferenceApiConfig);
+					this.registerStatuslListeners(this.conferenceClient, "playback");
+					const mediaStream = await this.conferenceClient.subscribe();
+					this.$video.muted = false;
+					this.$video.srcObject = mediaStream;
+					this.makeSafariVideoElementObserveMediaStreamTracks(mediaStream);
+
+					this.startVideoPlayback(() => {
+						console.log("Video playback successful.");
+						this.onSubscribingSuccessful.fire({});
+						this.$unmuteButtonWrapper.classList.add("hidden");
+					}, (e) => {
+						console.error("Video playback failed.");
+						this.onSubscribingFailed.fire({errorMessage: e.toString()});
+						this.$unmuteButtonWrapper.classList.remove("hidden");
+					})
+				} catch (error) {
+					console.error("Error while starting playback!", error, error.stack);
+					this.onSubscribingFailed.fire({errorMessage: error.toString()});
+				}
+			}
+		} else {
+			if (oldParams?.audio !== newParams.audio || oldParams.video !== newParams.video) {
+				console.log("updatePlayback() --> needs updateKinds()", newParams);
+				this.conferenceClient.updateKinds([...(newParams.audio ? ["audio"] : []), ...(newParams.video ? ["video"] : [])] as MediaKind[]);
+			}
+		}
+	}
+
+	private startVideoPlayback(successCallback: () => void, errorCallback: (e: Error) => void) {
+		try {
+			const playPromise = this.$video.play();
+			if (playPromise != null) {
+				playPromise.then(() => {
+					successCallback();
+				}).catch((e) => {
+					errorCallback(e);
+				})
+			} else {
+				successCallback();
+			}
+		} catch (e) {
+			errorCallback(e);
+		}
+	}
+
+	private makeSafariVideoElementObserveMediaStreamTracks(mediaStream: MediaStream) {
+		if (Utils.isSafari) {
+			["addtrack", "removetrack"].forEach(eventType => {
+				this.conferenceClient.on(eventType as any, (trackEvent: MediaStreamTrackEvent) => {
+					console.log(eventType);
+					this.$video.srcObject = new MediaStream(mediaStream.getTracks());
+					this.$video.play();
+				});
+			});
+		}
+	}
+
+	async updatePublishing(newParams: UiMediaSoupPublishingParametersConfig, forceRefresh: boolean) {
+		this.connectionStatus.shouldHaveAudio = newParams.audioConstraints != null;
+		this.connectionStatus.shouldHaveVideo = newParams.videoConstraints != null;
+		this.updateStateCssClasses();
+
+		let oldParams = this._config.publishingParameters;
+
+		const needsReset = forceRefresh
+			|| oldParams?.server?.url != newParams?.server?.url
+			|| oldParams?.streamUuid != newParams?.streamUuid
+			|| oldParams?.simulcast !== newParams?.simulcast;
+
+		if (needsReset) {
+			console.log("updatePublishing() --> needsReset", oldParams, newParams);
+			await this.stop();
+			if (newParams != null) {
+				this.targetStream = new MediaStream();
+				this.$video.muted = true;
+				this.$video.srcObject = this.targetStream;
+				try {
+					let conferenceApiConfig: ConferenceInput = {
+						stream: newParams.streamUuid,
+						token: newParams.server.token,
+						url: newParams.server.url,
+						worker: newParams.server.worker,
+						simulcast: newParams.simulcast,
+						stopTracks: false, // never stop the gainController's output track!
+						keyFrameRequestDelay: newParams.keyFrameRequestDelay
+					};
+					console.log("ConferenceApi config: ", conferenceApiConfig);
+					this.conferenceClient = new ConferenceApi(conferenceApiConfig);
+					this.registerStatuslListeners(this.conferenceClient, "publishing");
+					await this.conferenceClient.publish(this.targetStream);
+					this.makeSafariVideoElementObserveMediaStreamTracks(this.targetStream);
+				} catch (e) {
+					console.error('Error while publishing!', e);
+					if (e.statusCode) {
+						console.error("HTTP status code: " + e.statusCode);
+					}
+					this.onTrackPublishingFailed.fire({
+						audio: newParams.audioConstraints != null,
+						video: newParams.videoConstraints != null,
+						errorMessage: e.toString()
+					});
+					await this.stop();
+					this.updateStateCssClasses();
+				}
+			}
+		}
+
+		await this.updatePublishedTracks(newParams.audioConstraints, newParams.videoConstraints, newParams.screenSharingConstraints);
+
+		if (this.conferenceClient != null && newParams?.maxBitrate !== oldParams?.maxBitrate) {
+			await this.conferenceClient.setMaxPublisherBitrate(newParams.maxBitrate);
+		}
+
+		if (this.targetStream.getTracks().length > 0) {
+			this.$video.play(); // do not await - will hang for audio only (don't know why!)
+		}
+		this.$video.classList.toggle("mirrored", (newParams?.videoConstraints != null) && (newParams?.screenSharingConstraints == null));
+	}
+
+	private async updatePublishedTracks(
+		newAudioConstraints: UiAudioTrackConstraintsConfig,
+		newWebcamConstraints: UiVideoTrackConstraintsConfig,
+		newScreenConstraints: UiScreenSharingConstraintsConfig) {
+
+		let oldParams = this._config.publishingParameters;
+		const oldAudioConstraints = oldParams?.audioConstraints;
+		const oldWebcamConstraints = oldParams?.videoConstraints;
+		const oldScreenConstraints = oldParams?.screenSharingConstraints;
+
+		const audioConstraintsChanged = !deepEquals(oldAudioConstraints, newAudioConstraints);
+		const webcamConstraintsChanged = !deepEquals(oldWebcamConstraints, newWebcamConstraints);
+		const screenConstraintsChanged = !deepEquals(oldScreenConstraints, newScreenConstraints);
+
+		if (audioConstraintsChanged) {
+			console.log("updatePublishedTracks() --> audioConstraintsChanged", newAudioConstraints);
+			this.vad?.destroy();
+			this.gainController.inputTrack?.stop(); // this will release the microphone access
+			if (newAudioConstraints != null) {
+				try {
+					let audioTracks = (await window.navigator.mediaDevices.getUserMedia({audio: newAudioConstraints, video: false})) // rejected if user denies!
+						.getAudioTracks();
+					const firstAudioTrack = audioTracks[0];
+					for (let i = 1; i < audioTracks.length; i++) {
+						audioTracks[i].stop(); // stop all but the first (should never be more than one actually!)
+					}
+					firstAudioTrack.addEventListener("ended", () => {
+						if (this.gainController.inputTrack == firstAudioTrack) { // not intended stopping!
+							this.onSourceMediaTrackEnded.fire({trackType: UiSourceMediaTrackType.MIC});
+						}
+					});
+					this.gainController.inputTrack = firstAudioTrack;
+					this.vad = addVoiceActivityDetection(firstAudioTrack, () => this.onVoiceActivityChanged.fire({active: true}), () => this.onVoiceActivityChanged.fire({active: false}));
+				} catch (e) {
+					console.error("Could not get user media: microphone!" + (location.protocol === "http:" ? " Probably due to plain HTTP (no encryption)." : ""), e);
+					this.onSourceMediaTrackRetrievalFailed.fire({reason: UiMediaRetrievalFailureReason.MIC_MEDIA_RETRIEVAL_FAILED});
+				}
+			} else {
+				this.gainController.inputTrack = null;
+			}
+		}
+		this.gainController.gain = newAudioConstraints?.gainFactor ?? 0;
+
+		if (webcamConstraintsChanged) {
+			console.log("updatePublishedTracks() --> webcamConstraintsChanged", newWebcamConstraints);
+			if (this.webcamTrack != null) {
+				this.webcamTrack.stop();
+				this.webcamTrack = null;
+			}
+			if (newWebcamConstraints != null) {
+				try {
+					let videoTracks = (await window.navigator.mediaDevices.getUserMedia({
+						audio: false,
+						video: createVideoConstraints(newWebcamConstraints)
+					})) // rejected if user denies!
+						.getVideoTracks();
+					this.webcamTrack = videoTracks[0];
+					for (let i = 1; i < videoTracks.length; i++) {
+						videoTracks[i].stop(); // stop all but the first (should never be more than one actually!)
+					}
+					this.webcamTrack.addEventListener("ended", () => {
+						if (this.webcamTrack != null) { // not intended stopping!
+							this.onSourceMediaTrackEnded.fire({trackType: UiSourceMediaTrackType.CAM});
+						}
+					})
+				} catch (e) {
+					console.error("Could not get user media: camera!", e);
+					this.onSourceMediaTrackRetrievalFailed.fire({reason: UiMediaRetrievalFailureReason.CAM_MEDIA_RETRIEVAL_FAILED});
+				}
+			}
+		}
+
+		if (screenConstraintsChanged) {
+			console.log("updatePublishedTracks() --> screenConstraintsChanged", newScreenConstraints);
+			if (this.screenTrack != null) {
+				this.screenTrack.stop();
+				this.screenTrack = null;
+			}
+			if (newScreenConstraints != null) {
+				try {
+					let screenTracks = (await getDisplayStream(newScreenConstraints)) // rejected if user denies!
+						.getVideoTracks();
+					this.screenTrack = screenTracks[0];
+					for (let i = 1; i < screenTracks.length; i++) {
+						screenTracks[i].stop(); // stop all but the first (should never be more than one actually!)
+					}
+					this.screenTrack.addEventListener("ended", () => {
+						if (this.screenTrack != null) { // not intended stopping!
+							this.onSourceMediaTrackEnded.fire({trackType: UiSourceMediaTrackType.SCREEN});
+						}
+					});
+				} catch (e) {
+					console.error("Could not get user media: screen!", e);
+					this.onSourceMediaTrackRetrievalFailed.fire({reason: UiMediaRetrievalFailureReason.DISPLAY_MEDIA_RETRIEVAL_FAILED});
+				}
+			}
+		}
+
+		if (webcamConstraintsChanged || screenConstraintsChanged) {
+			if (this.videoTrackMixer != null) {
+				this.videoTrackMixer.close();
+				this.videoTrackMixer = null;
+			}
+
+			if (this.screenTrack != null) { // Chrome does not do simulcast with screen sharing, so we need the mixer...
+				try {
+					let streamsWithMixSizingInfo: TrackWithMixSizingInfo[] = [];
+					streamsWithMixSizingInfo.push({
+						mediaTrack: this.screenTrack,
+						mixSizingInfo: {fullCanvas: true}
+					});
+
+					if (this.webcamTrack) {
+						let webcamMixSizingInfo: MixSizingInfo;
+						const displayStreamDimensions = await determineVideoSize(new MediaStream([this.screenTrack]));
+						const mainStreamShortDimension = Math.min(displayStreamDimensions.width, displayStreamDimensions.height);
+						const cameraAspectRatio = this.webcamTrack.getSettings().aspectRatio || 4 / 3;
+						const pictureInPictureHeight = Math.round((25 / 100) * mainStreamShortDimension);
+						const pictureInPictureWidth = Math.round(pictureInPictureHeight * cameraAspectRatio);
+						webcamMixSizingInfo = {
+							width: pictureInPictureWidth,
+							height: pictureInPictureHeight,
+							right: 0,
+							top: 0,
+							// flipX: true
+						};
+						streamsWithMixSizingInfo.push({mediaTrack: this.webcamTrack, mixSizingInfo: webcamMixSizingInfo});
+					}
+
+					this.videoTrackMixer = await new VideoTrackMixer(streamsWithMixSizingInfo, 15);
+				} catch (e) {
+					this.onSourceMediaTrackRetrievalFailed.fire({reason: UiMediaRetrievalFailureReason.VIDEO_MIXING_FAILED});
+				}
+			}
+		}
+
+		if (this.conferenceClient != null) {
+			if (oldAudioConstraints == null && newAudioConstraints != null) {
+				try {
+					await this.conferenceClient.addTrack(this.gainController.outputTrack);
+					this.onTrackPublishingSuccessful.fire({audio: true, video: false});
+				} catch (e) {
+					console.error("Could not add audio track!", e);
+					this.onTrackPublishingFailed.fire({audio: true, video: false, errorMessage: e.toString()})
+				}
+			} else if (oldAudioConstraints != null && newAudioConstraints == null) {
+				this.targetStream.getAudioTracks().forEach(t => {
+					this.conferenceClient.removeTrack(t);
+				});
+			}
+			if (webcamConstraintsChanged || screenConstraintsChanged) {
+				try {
+					this.targetStream.getVideoTracks().forEach(t => {
+						this.conferenceClient.removeTrack(t);
+					});
+					if (this.videoTrackMixer != null) {
+						console.log("Adding this.videoTrackMixer.getMixedTrack()");
+						await this.conferenceClient.addTrack(this.videoTrackMixer.getMixedTrack());
+					} else if (this.webcamTrack != null) {
+						console.log("Adding this.webcamTrack");
+						await this.conferenceClient.addTrack(this.webcamTrack);
+					} else if (this.screenTrack != null) {
+						console.log("Adding this.screenTrack");
+						await this.conferenceClient.addTrack(this.screenTrack);
+					}
+					if (this.videoTrackMixer != null || this.webcamTrack != null || this.screenTrack != null) {
+						this.onTrackPublishingSuccessful.fire({video: true, audio: false});
+					}
+				} catch (e) {
+					this.onTrackPublishingFailed.fire({video: true, audio: false, errorMessage: e.toString()})
+				}
+			}
+		}
+	}
+
+	private registerStatuslListeners(conferenceClient: ConferenceApi, logPrefix: string) {
+		conferenceClient.on('bitRate', ({bitRate, kind}: { bitRate: any, kind: any }) => {
+			if (kind === 'audio') {
+				this.$audioBitrateDisplay.innerText = (bitRate / 1000).toFixed(1) + "kb/s";
+				this.connectionStatus.audioBitrate = bitRate;
+				this.updateStateCssClasses();
+				// console.log(`${logPrefix} audio bitrate: ${bitRate}`);
+			} else if (kind == "video") {
+				this.$videoBitrateDisplay.innerText = (bitRate / 1000).toFixed(1) + "kb/s";
+				this.connectionStatus.videoBitrate = bitRate;
+				this.updateStateCssClasses();
+				// console.log(`${logPrefix} video bitrate: ${bitRate}`);
+			}
+		});
+		conferenceClient.on('connectionstatechange', (event: any) => {
+			let state: RTCPeerConnectionState = event.state;
+			this.connectionStatus.rtcPeerConnectionState = state;
+			this.updateStateCssClasses();
+			this.onConnectionStateChanged.fire({connected: state === 'connected'});
+		});
+	}
+
+
+	private updateVideoVisibility() {
+		if (this.isVideoShown() || this._config.noVideoImageUrl == null) {
+			this.$image.classList.add('hidden');
+			this.$video.classList.remove('hidden');
+		} else {
+			this.$image.classList.remove('hidden');
+			this.$video.classList.add('hidden');
+		}
+	}
+
+	setActive(active: boolean): void {
+		this.$main.classList.toggle("active", active);
+	}
+
+	private isVideoShown() {
+		return !!(this.$video.currentTime > 0 && !this.$video.paused && !this.$video.ended && this.$video.readyState > 2 && (this.$video.srcObject as MediaStream).getVideoTracks().length > 0);
+	}
+
+	onResize(): void {
+		// this component consists of a video display and a caption. unfortunately, this makes sizing impossible to be calculated by CSS
+		let availableHeight = this.getHeight() - this.$caption.getBoundingClientRect().height; // don't use offsetHeight! It will flicker in Chrome!
+		if (availableHeight <= 0) {
+			this.$video.style.width = "0";
+			this.$video.style.height = "0";
+			return;
+		}
+
+		let displayAreaAspectRatio: number;
+		if (this._config.displayAreaAspectRatio != null) {
+			displayAreaAspectRatio = this._config.displayAreaAspectRatio;
+		} else if (this.isVideoShown() && this.$video.videoWidth > 0) {
+			displayAreaAspectRatio = this.$video.videoWidth / this.$video.videoHeight;
+		} else if (this.$image.naturalWidth) {
+			displayAreaAspectRatio = this.$image.naturalWidth / this.$image.naturalHeight;
+		} else {
+			displayAreaAspectRatio = 4 / 3;
+		}
+
+		this.$videoContainer.style.removeProperty("width");
+		let videoSize = calculateDisplayModeInnerSize(
+			{width: this.getWidth(), height: availableHeight},
+			{width: 100, height: 100 / displayAreaAspectRatio},
+			UiPageDisplayMode.FIT_SIZE,
+			1,
+			false
+		);
+		this.$image.style.width = videoSize.width + "px";
+		this.$image.style.height = videoSize.height + "px";
+		this.$video.style.width = videoSize.width + "px";
+		this.$video.style.height = videoSize.height + "px";
+
+		let spinnerSize = Math.min(this.getWidth(), this.getHeight()) / 4;
+		this.$spinner.style.width = spinnerSize + "px";
+		this.$spinner.style.height = spinnerSize + "px";
+
+		(this._config.toolButtons as UiToolButton[]).forEach(tb => tb.setIconSize(this.$toolsAndIconsBar.offsetHeight))
+	}
+
+	setContextMenuContent(requestId: number, component: UiComponent): void {
+		this.contextMenu.setContent(component, requestId);
+	}
+
+	closeContextMenu(requestId: number): void {
+		this.contextMenu.close(requestId);
+	}
+
+	public static async enumerateDevices(): Promise<UiMediaDeviceInfoConfig[]> {
+		return enumerateDevices();
+	}
+}
+
+TeamAppsUiComponentRegistry.registerComponentClass("UiMediaSoupV3WebRtcClient", UiMediaSoupV3WebRtcClient);
+
diff --git a/teamapps-client/ts/modules/webrtc/mediasoup-v3/lib/avcore.client/conference-api.d.ts b/teamapps-client/ts/modules/webrtc/mediasoup-v3/lib/avcore.client/conference-api.d.ts
new file mode 100644
index 000000000..6d05a4562
--- /dev/null
+++ b/teamapps-client/ts/modules/webrtc/mediasoup-v3/lib/avcore.client/conference-api.d.ts
@@ -0,0 +1,99 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+/// <reference types="node" />
+import {EventEmitter} from "events";
+import {MediaKind} from 'mediasoup-client/lib/RtpParameters';
+import {ConferenceInput, ConsumerLayers} from 'avcore';
+
+export declare interface ConferenceApi {
+	on(event: 'bitRate', listener: ({bitRate: number, kind: MediaKind}: {
+		bitRate: any;
+		kind: any;
+	}) => void): this;
+
+	on(event: 'connectionstatechange', listener: ({state: string}: {
+		state: any;
+	}) => void): this;
+
+	on(event: 'newTransportId', listener: ({id: string}: {
+		id: any;
+	}) => void): this;
+
+	on(event: 'newProducerId', listener: ({id: string, kind: MediaKind}: {
+		id: any;
+		kind: any;
+	}) => void): this;
+
+	on(event: 'newConsumerId', listener: ({id: string, kind: MediaKind}: {
+		id: any;
+		kind: any;
+	}) => void): this;
+
+	on(event: 'addtrack', listener: (event: MediaStreamTrackEvent) => void): this;
+
+	on(event: 'removetrack', listener: (event: MediaStreamTrackEvent) => void): this;
+}
+
+export declare class ConferenceApi extends EventEmitter {
+	private api;
+	private readonly configs;
+	private readonly device;
+	private readonly connectors;
+	private readonly layers;
+	private readonly log;
+	private operation;
+	private transport;
+	private mediaStream?;
+	private transportTimeout;
+	private iceServers;
+	private simulcast;
+	private readonly availableKinds;
+
+	constructor(configs: ConferenceInput);
+
+	setPreferredLayers(layers: ConsumerLayers): Promise<void>;
+
+	addTrack(track: MediaStreamTrack): Promise<void>;
+
+	removeTrack(track: MediaStreamTrack): Promise<void>;
+
+	setMaxPublisherBitrate(bitrate: number): Promise<void>;
+
+	updateKinds(kinds: MediaKind[]): Promise<void>;
+
+	private destroyClient;
+	private createClient;
+	private init;
+
+	publish(mediaStream: MediaStream): Promise<MediaStream>;
+
+	subscribe(): Promise<MediaStream>;
+
+	private unsubscribeTrack;
+	private subscribeTrack;
+	private publishTrack;
+	private listenStats;
+
+	close(hard?: boolean): Promise<void>;
+
+	private closeConnectors;
+	private restartAll;
+	private getTransport;
+}
diff --git a/teamapps-client/ts/modules/webrtc/mediasoup-v3/lib/avcore.client/index.d.ts b/teamapps-client/ts/modules/webrtc/mediasoup-v3/lib/avcore.client/index.d.ts
new file mode 100644
index 000000000..c38b65e04
--- /dev/null
+++ b/teamapps-client/ts/modules/webrtc/mediasoup-v3/lib/avcore.client/index.d.ts
@@ -0,0 +1,21 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+export {ConferenceApi} from './conference-api';
+export {Utils} from './utils';
diff --git a/teamapps-client/ts/modules/webrtc/mediasoup-v3/lib/avcore.client/index.js b/teamapps-client/ts/modules/webrtc/mediasoup-v3/lib/avcore.client/index.js
new file mode 100644
index 000000000..869eebc70
--- /dev/null
+++ b/teamapps-client/ts/modules/webrtc/mediasoup-v3/lib/avcore.client/index.js
@@ -0,0 +1,15488 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+(function webpackUniversalModuleDefinition(root, factory) {
+    if (typeof exports === 'object' && typeof module === 'object')
+        module.exports = factory(require("socket.io-client"), require("axios"));
+    else if (typeof define === 'function' && define.amd)
+        define(["socket.io-client", "axios"], factory);
+    else if (typeof exports === 'object')
+        exports["avcoreClient"] = factory(require("socket.io-client"), require("axios"));
+    else
+        root["avcoreClient"] = factory(root["io"], root["axios"]);
+})(this, (__WEBPACK_EXTERNAL_MODULE__173__, __WEBPACK_EXTERNAL_MODULE__781__) => {
+    return /******/ (() => { // webpackBootstrap
+        /******/
+        var __webpack_modules__ = ({
+
+            /***/ 826:
+            /***/ (function (module, __unused_webpack_exports, __webpack_require__) {
+
+                (function webpackUniversalModuleDefinition(root, factory) {
+                    if (true)
+                        module.exports = factory(__webpack_require__(173), __webpack_require__(781));
+                    else {
+                    }
+                })(this, (__WEBPACK_EXTERNAL_MODULE__173__, __WEBPACK_EXTERNAL_MODULE__781__) => {
+                    return /******/ (() => { // webpackBootstrap
+                        /******/
+                        "use strict";
+                        /******/
+                        var __webpack_modules__ = ({
+
+                            /***/ 781:
+                            /***/ ((module) => {
+
+                                module.exports = __WEBPACK_EXTERNAL_MODULE__781__;
+
+                                /***/
+                            }),
+
+                            /***/ 173:
+                            /***/ ((module) => {
+
+                                module.exports = __WEBPACK_EXTERNAL_MODULE__173__;
+
+                                /***/
+                            })
+
+                            /******/
+                        });
+                        /************************************************************************/
+                        /******/ 	// The module cache
+                        /******/
+                        var __webpack_module_cache__ = {};
+                        /******/
+                        /******/ 	// The require function
+                        /******/
+                        function __nested_webpack_require_1080__(moduleId) {
+                            /******/ 		// Check if module is in cache
+                            /******/
+                            var cachedModule = __webpack_module_cache__[moduleId];
+                            /******/
+                            if (cachedModule !== undefined) {
+                                /******/
+                                return cachedModule.exports;
+                                /******/
+                            }
+                            /******/ 		// Create a new module (and put it into the cache)
+                            /******/
+                            var module = __webpack_module_cache__[moduleId] = {
+                                /******/ 			// no module.id needed
+                                /******/ 			// no module.loaded needed
+                                /******/            exports: {}
+                                /******/
+                            };
+                            /******/
+                            /******/ 		// Execute the module function
+                            /******/
+                            __webpack_modules__[moduleId](module, module.exports, __nested_webpack_require_1080__);
+                            /******/
+                            /******/ 		// Return the exports of the module
+                            /******/
+                            return module.exports;
+                            /******/
+                        }
+
+                        /******/
+                        /************************************************************************/
+                        /******/ 	/* webpack/runtime/compat get default export */
+                        /******/
+                        (() => {
+                            /******/ 		// getDefaultExport function for compatibility with non-harmony modules
+                            /******/
+                            __nested_webpack_require_1080__.n = (module) => {
+                                /******/
+                                var getter = module && module.__esModule ?
+                                    /******/                () => (module['default']) :
+                                    /******/                () => (module);
+                                /******/
+                                __nested_webpack_require_1080__.d(getter, {a: getter});
+                                /******/
+                                return getter;
+                                /******/
+                            };
+                            /******/
+                        })();
+                        /******/
+                        /******/ 	/* webpack/runtime/define property getters */
+                        /******/
+                        (() => {
+                            /******/ 		// define getter functions for harmony exports
+                            /******/
+                            __nested_webpack_require_1080__.d = (exports, definition) => {
+                                /******/
+                                for (var key in definition) {
+                                    /******/
+                                    if (__nested_webpack_require_1080__.o(definition, key) && !__nested_webpack_require_1080__.o(exports, key)) {
+                                        /******/
+                                        Object.defineProperty(exports, key, {enumerable: true, get: definition[key]});
+                                        /******/
+                                    }
+                                    /******/
+                                }
+                                /******/
+                            };
+                            /******/
+                        })();
+                        /******/
+                        /******/ 	/* webpack/runtime/hasOwnProperty shorthand */
+                        /******/
+                        (() => {
+                            /******/
+                            __nested_webpack_require_1080__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+                            /******/
+                        })();
+                        /******/
+                        /******/ 	/* webpack/runtime/make namespace object */
+                        /******/
+                        (() => {
+                            /******/ 		// define __esModule on exports
+                            /******/
+                            __nested_webpack_require_1080__.r = (exports) => {
+                                /******/
+                                if (typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+                                    /******/
+                                    Object.defineProperty(exports, Symbol.toStringTag, {value: 'Module'});
+                                    /******/
+                                }
+                                /******/
+                                Object.defineProperty(exports, '__esModule', {value: true});
+                                /******/
+                            };
+                            /******/
+                        })();
+                        /******/
+                        /************************************************************************/
+                        var __webpack_exports__ = {};
+// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
+                        (() => {
+// ESM COMPAT FLAG
+                            __nested_webpack_require_1080__.r(__webpack_exports__);
+
+// EXPORTS
+                            __nested_webpack_require_1080__.d(__webpack_exports__, {
+                                "ACTION": () => (/* reexport */ ACTION),
+                                "API_OPERATION": () => (/* reexport */ API_OPERATION),
+                                "ERROR": () => (/* reexport */ ERROR),
+                                "EVENT": () => (/* reexport */ EVENT),
+                                "HLS": () => (/* reexport */ HLS),
+                                "MIXER_PIPE_TYPE": () => (/* reexport */ MIXER_PIPE_TYPE),
+                                "MIXER_RENDER_TYPE": () => (/* reexport */ MIXER_RENDER_TYPE),
+                                "MediasoupSocketApi": () => (/* reexport */ MediasoupSocketApi),
+                                "NEXMO": () => (/* reexport */ NEXMO),
+                                "PATH": () => (/* reexport */ PATH),
+                                "REST_ACTIONS": () => (/* reexport */ REST_ACTIONS),
+                                "SOCKET_ONLY_ACTIONS": () => (/* reexport */ SOCKET_ONLY_ACTIONS),
+                                "STAT": () => (/* reexport */ STAT)
+                            });
+
+                            ;// CONCATENATED MODULE: ./src/constants.ts
+                            var ACTION;
+                            (function (ACTION) {
+                                ACTION["GET_SERVER_CONFIGS"] = "getServerConfigs";
+                                ACTION["CREATE_TRANSPORT"] = "createTransport";
+                                ACTION["CONNECT_TRANSPORT"] = "connectTransport";
+                                ACTION["CLOSE_TRANSPORT"] = "closeTransport";
+                                ACTION["PRODUCE"] = "produce";
+                                ACTION["CONSUME"] = "consume";
+                                ACTION["RESUME_CONSUMER"] = "resumeConsumer";
+                                ACTION["PAUSE_CONSUMER"] = "pauseConsumer";
+                                ACTION["CLOSE_CONSUMER"] = "closeConsumer";
+                                ACTION["RESUME_PRODUCER"] = "resumeProducer";
+                                ACTION["PAUSE_PRODUCER"] = "pauseProducer";
+                                ACTION["CLOSE_PRODUCER"] = "closeProducer";
+                                ACTION["FILE_STREAMING"] = "fileStreaming";
+                                ACTION["LIVE_STREAMING"] = "liveStreaming";
+                                ACTION["LIVE_TO_HLS"] = "liveToHls";
+                                ACTION["STOP_FILE_STREAMING"] = "stopFileStreaming";
+                                ACTION["START_RECORDING"] = "startRecording";
+                                ACTION["STOP_RECORDING"] = "stopRecording";
+                                ACTION["CREATE_PIPE_TRANSPORT"] = "createPipeTransport";
+                                ACTION["CONNECT_PIPE_TRANSPORT"] = "connectPipeTransport";
+                                ACTION["SET_PREFERRED_LAYERS"] = "setPreferredLayers";
+                                ACTION["SET_MAX_INCOMING_BITRATE"] = "setMaxIncomingBitrate";
+                                ACTION["PRODUCERS_STATS"] = "producersStats";
+                                ACTION["CONSUMERS_STATS"] = "consumersStats";
+                                ACTION["TRANSPORT_STATS"] = "transportStats";
+                                ACTION["PIPE_TO_REMOTE_PRODUCER"] = "pipeToRemoteProducer";
+                                ACTION["PIPE_FROM_REMOTE_PRODUCER"] = "pipeFromRemoteProducer";
+                                ACTION["WORKER_LOAD"] = "workerLoad";
+                                ACTION["NUM_WORKERS"] = "numWorkers";
+                                ACTION["RECORDED_STREAMS"] = "recordedStreams";
+                                ACTION["STREAM_RECORDINGS"] = "streamRecordings";
+                                ACTION["DELETE_STREAM_RECORDINGS"] = "deleteStreamRecordings";
+                                ACTION["DELETE_RECORDING"] = "deleteRecording";
+                                ACTION["PUSH_TO_SERVER_INPUTS"] = "pushToServerInputs";
+                                ACTION["PULL_FROM_SERVER_INPUTS"] = "pullFromServerInputs";
+                                ACTION["PUSH_TO_SERVER_OPTIONS"] = "pushToServerOptions";
+                                ACTION["PUSH_TO_SERVER"] = "pushToServer";
+                                ACTION["KINDS_BY_FILE"] = "kindsByFile";
+                                ACTION["REQUEST_KEYFRAME"] = "requestKeyframe";
+                                ACTION["LISTEN_STREAM_STARTED"] = "listenStreamStarted";
+                                ACTION["LISTEN_STREAM_STOPPED"] = "listenStreamStopped";
+                                ACTION["MIXER_START"] = "mixerStart";
+                                ACTION["MIXER_CLOSE"] = "mixerClose";
+                                ACTION["MIXER_ADD"] = "mixerAdd";
+                                ACTION["MIXER_REMOVE"] = "mixerRemove";
+                                ACTION["MIXER_UPDATE"] = "mixerUpdate";
+                                ACTION["MIXER_PIPE_START"] = "mixerPipeStart";
+                                ACTION["MIXER_PIPE_STOP"] = "mixerPipeStop";
+                                ACTION["LISTEN_MIXER_STOPPED"] = "listenMixerStopped";
+                            })(ACTION || (ACTION = {}));
+                            const SOCKET_ONLY_ACTIONS = [
+                                ACTION.GET_SERVER_CONFIGS,
+                                ACTION.CREATE_TRANSPORT,
+                                ACTION.CONNECT_TRANSPORT,
+                                ACTION.CLOSE_TRANSPORT,
+                                ACTION.PRODUCE,
+                                ACTION.CONSUME,
+                                ACTION.LISTEN_STREAM_STARTED,
+                                ACTION.LISTEN_STREAM_STOPPED,
+                                ACTION.LISTEN_MIXER_STOPPED,
+                                ACTION.CREATE_PIPE_TRANSPORT,
+                                ACTION.CONNECT_PIPE_TRANSPORT,
+                                ACTION.PIPE_TO_REMOTE_PRODUCER,
+                                ACTION.PIPE_FROM_REMOTE_PRODUCER
+                            ];
+                            const REST_ACTIONS = Object.values(ACTION).filter(a => !SOCKET_ONLY_ACTIONS.includes(a));
+                            var EVENT;
+                            (function (EVENT) {
+                                EVENT["STREAM_STARTED"] = "streamStarted";
+                                EVENT["STREAM_STOPPED"] = "streamStopped";
+                                EVENT["MIXER_STOPPED"] = "mixerStopped";
+                            })(EVENT || (EVENT = {}));
+                            var STAT;
+                            (function (STAT) {
+                                STAT["STATS"] = "stats";
+                                STAT["TRAFFIC"] = "traffic";
+                                STAT["CPU"] = "cpu";
+                            })(STAT || (STAT = {}));
+                            const HLS = {
+                                ROOT: 'hls',
+                                PLAYLIST: 'master.m3u8'
+                            };
+                            var PATH;
+                            (function (PATH) {
+                                PATH["API"] = "api";
+                            })(PATH || (PATH = {}));
+                            const NEXMO = {
+                                PATH: "nexmo",
+                                AUDIO_SAMPLE_RATE: 16000,
+                                AUDIO_CHANNELS: 1
+                            };
+                            var ERROR;
+                            (function (ERROR) {
+                                ERROR[ERROR["UNKNOWN"] = 500] = "UNKNOWN";
+                                ERROR[ERROR["UNAUTHORIZED"] = 401] = "UNAUTHORIZED";
+                                ERROR[ERROR["INVALID_TRANSPORT"] = 530] = "INVALID_TRANSPORT";
+                                ERROR[ERROR["INVALID_PRODUCER"] = 531] = "INVALID_PRODUCER";
+                                ERROR[ERROR["INVALID_CONSUMER"] = 532] = "INVALID_CONSUMER";
+                                ERROR[ERROR["INVALID_STREAM"] = 533] = "INVALID_STREAM";
+                                ERROR[ERROR["INVALID_OPERATION"] = 534] = "INVALID_OPERATION";
+                                ERROR[ERROR["INVALID_WORKER"] = 535] = "INVALID_WORKER";
+                                ERROR[ERROR["INVALID_INPUT"] = 536] = "INVALID_INPUT";
+                                ERROR[ERROR["INVALID_ACTION"] = 537] = "INVALID_ACTION";
+                            })(ERROR || (ERROR = {}));
+                            var API_OPERATION;
+                            (function (API_OPERATION) {
+                                API_OPERATION[API_OPERATION["SUBSCRIBE"] = 0] = "SUBSCRIBE";
+                                API_OPERATION[API_OPERATION["PUBLISH"] = 1] = "PUBLISH";
+                                API_OPERATION[API_OPERATION["RECORDING"] = 2] = "RECORDING";
+                                API_OPERATION[API_OPERATION["STREAMING"] = 3] = "STREAMING";
+                                API_OPERATION[API_OPERATION["MIXER"] = 4] = "MIXER";
+                            })(API_OPERATION || (API_OPERATION = {}));
+                            var MIXER_PIPE_TYPE;
+                            (function (MIXER_PIPE_TYPE) {
+                                MIXER_PIPE_TYPE[MIXER_PIPE_TYPE["LIVE"] = 0] = "LIVE";
+                                MIXER_PIPE_TYPE[MIXER_PIPE_TYPE["RECORDING"] = 1] = "RECORDING";
+                                MIXER_PIPE_TYPE[MIXER_PIPE_TYPE["RTMP"] = 2] = "RTMP";
+                                MIXER_PIPE_TYPE[MIXER_PIPE_TYPE["HLS"] = 3] = "HLS";
+                            })(MIXER_PIPE_TYPE || (MIXER_PIPE_TYPE = {}));
+                            var MIXER_RENDER_TYPE;
+                            (function (MIXER_RENDER_TYPE) {
+                                MIXER_RENDER_TYPE["SCALE"] = "scale";
+                                MIXER_RENDER_TYPE["CROP"] = "crop";
+                                MIXER_RENDER_TYPE["PAD"] = "pad";
+                            })(MIXER_RENDER_TYPE || (MIXER_RENDER_TYPE = {}));
+
+// EXTERNAL MODULE: external {"root":"io","commonjs":"socket.io-client","commonjs2":"socket.io-client","amd":"socket.io-client"}
+                            var external_root_io_commonjs_socket_io_client_commonjs2_socket_io_client_amd_socket_io_client_ = __nested_webpack_require_1080__(173);
+// EXTERNAL MODULE: external {"root":"axios","commonjs2":"axios","commonjs":"axios","amd":"axios"}
+                            var external_root_axios_commonjs2_axios_commonjs_axios_amd_axios_ = __nested_webpack_require_1080__(781);
+                            var external_root_axios_commonjs2_axios_commonjs_axios_amd_axios_default = /*#__PURE__*/__nested_webpack_require_1080__.n(external_root_axios_commonjs2_axios_commonjs_axios_amd_axios_);
+                            ;// CONCATENATED MODULE: ./src/mediasoup-socket-api.ts
+                            var __awaiter = (false) || function (thisArg, _arguments, P, generator) {
+                                function adopt(value) {
+                                    return value instanceof P ? value : new P(function (resolve) {
+                                        resolve(value);
+                                    });
+                                }
+
+                                return new (P || (P = Promise))(function (resolve, reject) {
+                                    function fulfilled(value) {
+                                        try {
+                                            step(generator.next(value));
+                                        } catch (e) {
+                                            reject(e);
+                                        }
+                                    }
+
+                                    function rejected(value) {
+                                        try {
+                                            step(generator["throw"](value));
+                                        } catch (e) {
+                                            reject(e);
+                                        }
+                                    }
+
+                                    function step(result) {
+                                        result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+                                    }
+
+                                    step((generator = generator.apply(thisArg, _arguments || [])).next());
+                                });
+                            };
+
+
+                            class MediasoupSocketApi {
+                                constructor(url, worker, token, log) {
+                                    this.closed = false;
+                                    this.log = log || console.log;
+                                    this.url = url;
+                                    this.worker = worker;
+                                    this.token = token;
+                                }
+
+                                get client() {
+                                    if (!this._client) {
+                                        this._client = (0, external_root_io_commonjs_socket_io_client_commonjs2_socket_io_client_amd_socket_io_client_.io)(this.url, {
+                                            transports: ['websocket'],
+                                            query: {
+                                                mediasoup_worker: this.worker
+                                            },
+                                            auth: {
+                                                token: this.token
+                                            },
+                                            forceNew: true
+                                        });
+                                    }
+                                    return this._client;
+                                }
+
+                                connectSocket() {
+                                    return new Promise((resolve, reject) => {
+                                        if (this.client.connected) {
+                                            resolve();
+                                        } else {
+                                            this.client.on('error', (e) => {
+                                                if (e.message === 'Not enough or too many segments') {
+                                                    e.errorId = ERROR.UNAUTHORIZED;
+                                                } else {
+                                                    e.errorId = ERROR.UNKNOWN;
+                                                }
+                                                reject(e);
+                                            });
+                                            this.client.on('connect', resolve);
+                                        }
+                                    });
+                                }
+
+                                resumeConsumer(json) {
+                                    return __awaiter(this, void 0, void 0, function* () {
+                                        yield this.request(ACTION.RESUME_CONSUMER, json);
+                                    });
+                                }
+
+                                pauseConsumer(json) {
+                                    return __awaiter(this, void 0, void 0, function* () {
+                                        yield this.request(ACTION.PAUSE_CONSUMER, json);
+                                    });
+                                }
+
+                                setPreferredLayers(json) {
+                                    return __awaiter(this, void 0, void 0, function* () {
+                                        yield this.request(ACTION.SET_PREFERRED_LAYERS, json);
+                                    });
+                                }
+
+                                closeConsumer(json) {
+                                    return __awaiter(this, void 0, void 0, function* () {
+                                        yield this.request(ACTION.CLOSE_CONSUMER, json);
+                                    });
+                                }
+
+                                resumeProducer(json) {
+                                    return __awaiter(this, void 0, void 0, function* () {
+                                        yield this.request(ACTION.RESUME_PRODUCER, json);
+                                    });
+                                }
+
+                                pauseProducer(json) {
+                                    return __awaiter(this, void 0, void 0, function* () {
+                                        yield this.request(ACTION.PAUSE_PRODUCER, json);
+                                    });
+                                }
+
+                                closeProducer(json) {
+                                    return __awaiter(this, void 0, void 0, function* () {
+                                        yield this.request(ACTION.CLOSE_PRODUCER, json);
+                                    });
+                                }
+
+                                produce(json) {
+                                    return __awaiter(this, void 0, void 0, function* () {
+                                        return (yield this.request(ACTION.PRODUCE, json));
+                                    });
+                                }
+
+                                consume(json) {
+                                    return __awaiter(this, void 0, void 0, function* () {
+                                        return (yield this.request(ACTION.CONSUME, json));
+                                    });
+                                }
+
+                                createPipeTransport() {
+                                    return __awaiter(this, void 0, void 0, function* () {
+                                        return (yield this.request(ACTION.CREATE_PIPE_TRANSPORT));
+                                    });
+                                }
+
+                                connectPipeTransport(json) {
+                                    return __awaiter(this, void 0, void 0, function* () {
+                                        yield this.request(ACTION.CONNECT_PIPE_TRANSPORT, json);
+                                    });
+                                }
+
+                                closeTransport(json) {
+                                    return __awaiter(this, void 0, void 0, function* () {
+                                        yield this.request(ACTION.CLOSE_TRANSPORT, json);
+                                    });
+                                }
+
+                                getServerConfigs() {
+                                    return __awaiter(this, void 0, void 0, function* () {
+                                        return (yield this.request(ACTION.GET_SERVER_CONFIGS));
+                                    });
+                                }
+
+                                createTransport() {
+                                    return __awaiter(this, void 0, void 0, function* () {
+                                        return (yield this.request(ACTION.CREATE_TRANSPORT));
+                                    });
+                                }
+
+                                connectTransport(json) {
+                                    return __awaiter(this, void 0, void 0, function* () {
+                                        yield this.request(ACTION.CONNECT_TRANSPORT, json);
+                                    });
+                                }
+
+                                setMaxIncomingBitrate(json) {
+                                    return __awaiter(this, void 0, void 0, function* () {
+                                        yield this.request(ACTION.SET_MAX_INCOMING_BITRATE, json);
+                                    });
+                                }
+
+                                producersStats(json) {
+                                    return __awaiter(this, void 0, void 0, function* () {
+                                        return (yield this.request(ACTION.PRODUCERS_STATS, json));
+                                    });
+                                }
+
+                                consumersStats(json) {
+                                    return __awaiter(this, void 0, void 0, function* () {
+                                        return (yield this.request(ACTION.CONSUMERS_STATS, json));
+                                    });
+                                }
+
+                                transportStats(json) {
+                                    return __awaiter(this, void 0, void 0, function* () {
+                                        return (yield this.request(ACTION.TRANSPORT_STATS, json));
+                                    });
+                                }
+
+                                workerLoad() {
+                                    return __awaiter(this, void 0, void 0, function* () {
+                                        return (yield this.request(ACTION.WORKER_LOAD));
+                                    });
+                                }
+
+                                numWorkers() {
+                                    return __awaiter(this, void 0, void 0, function* () {
+                                        return (yield this.request(ACTION.NUM_WORKERS));
+                                    });
+                                }
+
+                                pipeToRemoteProducer(json) {
+                                    return __awaiter(this, void 0, void 0, function* () {
+                                        yield this.request(ACTION.PIPE_TO_REMOTE_PRODUCER, json);
+                                    });
+                                }
+
+                                pipeFromRemoteProducer(json) {
+                                    return __awaiter(this, void 0, void 0, function* () {
+                                        yield this.request(ACTION.PIPE_FROM_REMOTE_PRODUCER, json);
+                                    });
+                                }
+
+                                startRecording(json) {
+                                    return __awaiter(this, void 0, void 0, function* () {
+                                        yield this.request(ACTION.START_RECORDING, json);
+                                    });
+                                }
+
+                                stopRecording(json) {
+                                    return __awaiter(this, void 0, void 0, function* () {
+                                        yield this.request(ACTION.STOP_RECORDING, json);
+                                    });
+                                }
+
+                                fileStreaming(json) {
+                                    return __awaiter(this, void 0, void 0, function* () {
+                                        yield this.request(ACTION.FILE_STREAMING, json);
+                                    });
+                                }
+
+                                stopFileStreaming(json) {
+                                    return __awaiter(this, void 0, void 0, function* () {
+                                        yield this.request(ACTION.STOP_FILE_STREAMING, json);
+                                    });
+                                }
+
+                                recordedStreams() {
+                                    return __awaiter(this, void 0, void 0, function* () {
+                                        return yield this.request(ACTION.RECORDED_STREAMS);
+                                    });
+                                }
+
+                                streamRecordings(json) {
+                                    return __awaiter(this, void 0, void 0, function* () {
+                                        return yield this.request(ACTION.STREAM_RECORDINGS, json);
+                                    });
+                                }
+
+                                deleteStreamRecordings(json) {
+                                    return __awaiter(this, void 0, void 0, function* () {
+                                        yield this.request(ACTION.DELETE_STREAM_RECORDINGS, json);
+                                    });
+                                }
+
+                                deleteRecording(json) {
+                                    return __awaiter(this, void 0, void 0, function* () {
+                                        yield this.request(ACTION.DELETE_RECORDING, json);
+                                    });
+                                }
+
+                                pushToServerInputs(json) {
+                                    return __awaiter(this, void 0, void 0, function* () {
+                                        return yield this.request(ACTION.PUSH_TO_SERVER_INPUTS, json);
+                                    });
+                                }
+
+                                pushToServerOptions(json) {
+                                    return __awaiter(this, void 0, void 0, function* () {
+                                        return yield this.request(ACTION.PUSH_TO_SERVER_OPTIONS, json);
+                                    });
+                                }
+
+                                pushToServer(json) {
+                                    return __awaiter(this, void 0, void 0, function* () {
+                                        yield this.request(ACTION.PUSH_TO_SERVER, json);
+                                    });
+                                }
+
+                                pullFromServerInputs(json) {
+                                    return __awaiter(this, void 0, void 0, function* () {
+                                        return yield this.request(ACTION.PULL_FROM_SERVER_INPUTS, json);
+                                    });
+                                }
+
+                                kindsByFile(json) {
+                                    return __awaiter(this, void 0, void 0, function* () {
+                                        return yield this.request(ACTION.KINDS_BY_FILE, json);
+                                    });
+                                }
+
+                                requestKeyframe(json) {
+                                    return __awaiter(this, void 0, void 0, function* () {
+                                        yield this.request(ACTION.REQUEST_KEYFRAME, json);
+                                    });
+                                }
+
+                                listenStreamStarted(json) {
+                                    return __awaiter(this, void 0, void 0, function* () {
+                                        return yield this.request(ACTION.LISTEN_STREAM_STARTED, json);
+                                    });
+                                }
+
+                                listenStreamStopped(json) {
+                                    return __awaiter(this, void 0, void 0, function* () {
+                                        return yield this.request(ACTION.LISTEN_STREAM_STOPPED, json);
+                                    });
+                                }
+
+                                liveStreaming(json) {
+                                    return __awaiter(this, void 0, void 0, function* () {
+                                        yield this.request(ACTION.LIVE_STREAMING, json);
+                                    });
+                                }
+
+                                liveToHls(json) {
+                                    return __awaiter(this, void 0, void 0, function* () {
+                                        yield this.request(ACTION.LIVE_TO_HLS, json);
+                                    });
+                                }
+
+                                mixerStart(json) {
+                                    return __awaiter(this, void 0, void 0, function* () {
+                                        return yield this.request(ACTION.MIXER_START, json);
+                                    });
+                                }
+
+                                mixerClose(json) {
+                                    return __awaiter(this, void 0, void 0, function* () {
+                                        yield this.request(ACTION.MIXER_CLOSE, json);
+                                    });
+                                }
+
+                                mixerAdd(json) {
+                                    return __awaiter(this, void 0, void 0, function* () {
+                                        yield this.request(ACTION.MIXER_ADD, json);
+                                    });
+                                }
+
+                                mixerUpdate(json) {
+                                    return __awaiter(this, void 0, void 0, function* () {
+                                        yield this.request(ACTION.MIXER_UPDATE, json);
+                                    });
+                                }
+
+                                mixerRemove(json) {
+                                    return __awaiter(this, void 0, void 0, function* () {
+                                        yield this.request(ACTION.MIXER_REMOVE, json);
+                                    });
+                                }
+
+                                mixerPipeStart(json) {
+                                    return __awaiter(this, void 0, void 0, function* () {
+                                        return yield this.request(ACTION.MIXER_PIPE_START, json);
+                                    });
+                                }
+
+                                mixerPipeStop(json) {
+                                    return __awaiter(this, void 0, void 0, function* () {
+                                        yield this.request(ACTION.MIXER_PIPE_STOP, json);
+                                    });
+                                }
+
+                                listenMixerStopped(json) {
+                                    return __awaiter(this, void 0, void 0, function* () {
+                                        return yield this.request(ACTION.LISTEN_MIXER_STOPPED, json);
+                                    });
+                                }
+
+                                clear() {
+                                    this.closed = true;
+                                    if (this._client) {
+                                        this._client.removeAllListeners();
+                                        if (this.client.connected) {
+                                            this._client.disconnect();
+                                        }
+                                    }
+                                }
+
+                                request(action, json = {}) {
+                                    return __awaiter(this, void 0, void 0, function* () {
+                                        if (!this.closed) {
+                                            if (!this._client && !SOCKET_ONLY_ACTIONS.includes(action)) {
+                                                return this.restRequest(action, json);
+                                            } else {
+                                                return this.socketRequest(action, json);
+                                            }
+                                        }
+                                    });
+                                }
+
+                                socketRequest(action, json = {}) {
+                                    return __awaiter(this, void 0, void 0, function* () {
+                                        yield this.connectSocket();
+                                        this.log('sent message', action, JSON.stringify(json));
+                                        return new Promise((resolve, reject) => {
+                                            this.client.emit(action, json, (data) => {
+                                                if (data && typeof data !== 'boolean' && data.hasOwnProperty('errorId')) {
+                                                    this.log('got error', action, JSON.stringify(data));
+                                                    reject(data);
+                                                } else {
+                                                    this.log('got message', action, JSON.stringify(data));
+                                                    resolve(data);
+                                                }
+                                            });
+                                        });
+                                    });
+                                }
+
+                                restRequest(action, json = {}) {
+                                    return __awaiter(this, void 0, void 0, function* () {
+                                        try {
+                                            const {data} = yield external_root_axios_commonjs2_axios_commonjs_axios_amd_axios_default().post(`${this.url}/${PATH.API}/${this.worker}/${action}`, json, {
+                                                headers: {'Content-Type': 'application/json', "Authorization": `Bearer ${this.token}`},
+                                            });
+                                            this.log('got message', action, JSON.stringify(data));
+                                            return data;
+                                        } catch (e) {
+                                            let errorId = ERROR.UNKNOWN;
+                                            this.log('got error', e);
+                                            if (e.response && e.response.status && ERROR[e.response.status]) {
+                                                errorId = e.response.status;
+                                            }
+                                            throw {errorId};
+                                        }
+                                    });
+                                }
+                            }
+
+                            ;// CONCATENATED MODULE: ./src/index.ts
+
+
+                        })();
+
+                        /******/
+                        return __webpack_exports__;
+                        /******/
+                    })()
+                        ;
+                });
+
+                /***/
+            }),
+
+            /***/ 186:
+            /***/ (function (__unused_webpack_module, exports) {
+
+                "use strict";
+
+                var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+                    function adopt(value) {
+                        return value instanceof P ? value : new P(function (resolve) {
+                            resolve(value);
+                        });
+                    }
+
+                    return new (P || (P = Promise))(function (resolve, reject) {
+                        function fulfilled(value) {
+                            try {
+                                step(generator.next(value));
+                            } catch (e) {
+                                reject(e);
+                            }
+                        }
+
+                        function rejected(value) {
+                            try {
+                                step(generator["throw"](value));
+                            } catch (e) {
+                                reject(e);
+                            }
+                        }
+
+                        function step(result) {
+                            result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+                        }
+
+                        step((generator = generator.apply(thisArg, _arguments || [])).next());
+                    });
+                };
+                Object.defineProperty(exports, "__esModule", ({value: true}));
+
+                class AwaitQueue {
+                    constructor({ClosedErrorClass = Error, StoppedErrorClass = Error, RemovedTaskErrorClass = Error} = {
+                        ClosedErrorClass: Error,
+                        StoppedErrorClass: Error,
+                        RemovedTaskErrorClass: Error
+                    }) {
+                        // Closed flag.
+                        this.closed = false;
+                        // Queue of pending tasks.
+                        this.pendingTasks = [];
+                        // Error class used when rejecting a task due to AwaitQueue being closed.
+                        this.ClosedErrorClass = Error;
+                        // Error class used when rejecting a task due to AwaitQueue being stopped.
+                        this.StoppedErrorClass = Error;
+                        // Error class used when removing a pending task when calling removeTask().
+                        this.RemovedTaskErrorClass = Error;
+                        this.ClosedErrorClass = ClosedErrorClass;
+                        this.StoppedErrorClass = StoppedErrorClass;
+                        this.RemovedTaskErrorClass = RemovedTaskErrorClass;
+                    }
+
+                    get size() {
+                        return this.pendingTasks.length;
+                    }
+
+                    close() {
+                        if (this.closed)
+                            return;
+                        this.closed = true;
+                        for (const pendingTask of this.pendingTasks) {
+                            pendingTask.stopped = true;
+                            pendingTask.reject(new this.ClosedErrorClass('AwaitQueue closed'));
+                        }
+                        // Enpty the pending tasks array.
+                        this.pendingTasks.length = 0;
+                    }
+
+                    push(task, name) {
+                        return __awaiter(this, void 0, void 0, function* () {
+                            if (this.closed)
+                                throw new this.ClosedErrorClass('AwaitQueue closed');
+                            if (typeof task !== 'function')
+                                throw new TypeError('given task is not a function');
+                            if (!task.name && name) {
+                                try {
+                                    Object.defineProperty(task, 'name', {value: name});
+                                } catch (error) {
+                                }
+                            }
+                            return new Promise((resolve, reject) => {
+                                const pendingTask = {
+                                    task,
+                                    name,
+                                    resolve,
+                                    reject,
+                                    stopped: false,
+                                    enqueuedAt: new Date(),
+                                    executedAt: undefined
+                                };
+                                // Append task to the queue.
+                                this.pendingTasks.push(pendingTask);
+                                // And run it if this is the only task in the queue.
+                                if (this.pendingTasks.length === 1)
+                                    this.next();
+                            });
+                        });
+                    }
+
+                    removeTask(idx) {
+                        if (idx === 0) {
+                            throw new TypeError('cannot remove task with index 0');
+                        }
+                        const pendingTask = this.pendingTasks[idx];
+                        if (!pendingTask)
+                            return;
+                        this.pendingTasks.splice(idx, 1);
+                        pendingTask.reject(new this.RemovedTaskErrorClass('task removed from the queue'));
+                    }
+
+                    stop() {
+                        if (this.closed)
+                            return;
+                        for (const pendingTask of this.pendingTasks) {
+                            pendingTask.stopped = true;
+                            pendingTask.reject(new this.StoppedErrorClass('AwaitQueue stopped'));
+                        }
+                        // Enpty the pending tasks array.
+                        this.pendingTasks.length = 0;
+                    }
+
+                    dump() {
+                        const now = new Date();
+                        let idx = 0;
+                        return this.pendingTasks.map((pendingTask) => ({
+                            idx: idx++,
+                            task: pendingTask.task,
+                            name: pendingTask.name,
+                            enqueuedTime: pendingTask.executedAt
+                                ? pendingTask.executedAt.getTime() - pendingTask.enqueuedAt.getTime()
+                                : now.getTime() - pendingTask.enqueuedAt.getTime(),
+                            executingTime: pendingTask.executedAt
+                                ? now.getTime() - pendingTask.executedAt.getTime()
+                                : 0
+                        }));
+                    }
+
+                    next() {
+                        return __awaiter(this, void 0, void 0, function* () {
+                            // Take the first pending task.
+                            const pendingTask = this.pendingTasks[0];
+                            if (!pendingTask)
+                                return;
+                            // Execute it.
+                            yield this.executeTask(pendingTask);
+                            // Remove the first pending task (the completed one) from the queue.
+                            this.pendingTasks.shift();
+                            // And continue.
+                            this.next();
+                        });
+                    }
+
+                    executeTask(pendingTask) {
+                        return __awaiter(this, void 0, void 0, function* () {
+                            // If the task is stopped, ignore it.
+                            if (pendingTask.stopped)
+                                return;
+                            pendingTask.executedAt = new Date();
+                            try {
+                                const result = yield pendingTask.task();
+                                // If the task is stopped, ignore it.
+                                if (pendingTask.stopped)
+                                    return;
+                                // Resolve the task with the returned result (if any).
+                                pendingTask.resolve(result);
+                            } catch (error) {
+                                // If the task is stopped, ignore it.
+                                if (pendingTask.stopped)
+                                    return;
+                                // Reject the task with its own error.
+                                pendingTask.reject(error);
+                            }
+                        });
+                    }
+                }
+
+                exports.AwaitQueue = AwaitQueue;
+
+
+                /***/
+            }),
+
+            /***/ 206:
+            /***/ (function (module) {
+
+                !function (e, t) {
+                    true ? module.exports = t() : 0
+                }(this, (function () {
+                    return function (e) {
+                        var t = {};
+
+                        function r(n) {
+                            if (t[n]) return t[n].exports;
+                            var i = t[n] = {i: n, l: !1, exports: {}};
+                            return e[n].call(i.exports, i, i.exports, r), i.l = !0, i.exports
+                        }
+
+                        return r.m = e, r.c = t, r.d = function (e, t, n) {
+                            r.o(e, t) || Object.defineProperty(e, t, {enumerable: !0, get: n})
+                        }, r.r = function (e) {
+                            "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, {value: "Module"}), Object.defineProperty(e, "__esModule", {value: !0})
+                        }, r.t = function (e, t) {
+                            if (1 & t && (e = r(e)), 8 & t) return e;
+                            if (4 & t && "object" == typeof e && e && e.__esModule) return e;
+                            var n = Object.create(null);
+                            if (r.r(n), Object.defineProperty(n, "default", {
+                                enumerable: !0,
+                                value: e
+                            }), 2 & t && "string" != typeof e) for (var i in e) r.d(n, i, function (t) {
+                                return e[t]
+                            }.bind(null, i));
+                            return n
+                        }, r.n = function (e) {
+                            var t = e && e.__esModule ? function () {
+                                return e.default
+                            } : function () {
+                                return e
+                            };
+                            return r.d(t, "a", t), t
+                        }, r.o = function (e, t) {
+                            return Object.prototype.hasOwnProperty.call(e, t)
+                        }, r.p = "", r(r.s = 90)
+                    }({
+                        17: function (e, t, r) {
+                            "use strict";
+                            t.__esModule = !0, t.default = void 0;
+                            var n = r(18), i = function () {
+                                function e() {
+                                }
+
+                                return e.getFirstMatch = function (e, t) {
+                                    var r = t.match(e);
+                                    return r && r.length > 0 && r[1] || ""
+                                }, e.getSecondMatch = function (e, t) {
+                                    var r = t.match(e);
+                                    return r && r.length > 1 && r[2] || ""
+                                }, e.matchAndReturnConst = function (e, t, r) {
+                                    if (e.test(t)) return r
+                                }, e.getWindowsVersionName = function (e) {
+                                    switch (e) {
+                                        case"NT":
+                                            return "NT";
+                                        case"XP":
+                                            return "XP";
+                                        case"NT 5.0":
+                                            return "2000";
+                                        case"NT 5.1":
+                                            return "XP";
+                                        case"NT 5.2":
+                                            return "2003";
+                                        case"NT 6.0":
+                                            return "Vista";
+                                        case"NT 6.1":
+                                            return "7";
+                                        case"NT 6.2":
+                                            return "8";
+                                        case"NT 6.3":
+                                            return "8.1";
+                                        case"NT 10.0":
+                                            return "10";
+                                        default:
+                                            return
+                                    }
+                                }, e.getMacOSVersionName = function (e) {
+                                    var t = e.split(".").splice(0, 2).map((function (e) {
+                                        return parseInt(e, 10) || 0
+                                    }));
+                                    if (t.push(0), 10 === t[0]) switch (t[1]) {
+                                        case 5:
+                                            return "Leopard";
+                                        case 6:
+                                            return "Snow Leopard";
+                                        case 7:
+                                            return "Lion";
+                                        case 8:
+                                            return "Mountain Lion";
+                                        case 9:
+                                            return "Mavericks";
+                                        case 10:
+                                            return "Yosemite";
+                                        case 11:
+                                            return "El Capitan";
+                                        case 12:
+                                            return "Sierra";
+                                        case 13:
+                                            return "High Sierra";
+                                        case 14:
+                                            return "Mojave";
+                                        case 15:
+                                            return "Catalina";
+                                        default:
+                                            return
+                                    }
+                                }, e.getAndroidVersionName = function (e) {
+                                    var t = e.split(".").splice(0, 2).map((function (e) {
+                                        return parseInt(e, 10) || 0
+                                    }));
+                                    if (t.push(0), !(1 === t[0] && t[1] < 5)) return 1 === t[0] && t[1] < 6 ? "Cupcake" : 1 === t[0] && t[1] >= 6 ? "Donut" : 2 === t[0] && t[1] < 2 ? "Eclair" : 2 === t[0] && 2 === t[1] ? "Froyo" : 2 === t[0] && t[1] > 2 ? "Gingerbread" : 3 === t[0] ? "Honeycomb" : 4 === t[0] && t[1] < 1 ? "Ice Cream Sandwich" : 4 === t[0] && t[1] < 4 ? "Jelly Bean" : 4 === t[0] && t[1] >= 4 ? "KitKat" : 5 === t[0] ? "Lollipop" : 6 === t[0] ? "Marshmallow" : 7 === t[0] ? "Nougat" : 8 === t[0] ? "Oreo" : 9 === t[0] ? "Pie" : void 0
+                                }, e.getVersionPrecision = function (e) {
+                                    return e.split(".").length
+                                }, e.compareVersions = function (t, r, n) {
+                                    void 0 === n && (n = !1);
+                                    var i = e.getVersionPrecision(t), s = e.getVersionPrecision(r), a = Math.max(i, s), o = 0,
+                                        u = e.map([t, r], (function (t) {
+                                            var r = a - e.getVersionPrecision(t), n = t + new Array(r + 1).join(".0");
+                                            return e.map(n.split("."), (function (e) {
+                                                return new Array(20 - e.length).join("0") + e
+                                            })).reverse()
+                                        }));
+                                    for (n && (o = a - Math.min(i, s)), a -= 1; a >= o;) {
+                                        if (u[0][a] > u[1][a]) return 1;
+                                        if (u[0][a] === u[1][a]) {
+                                            if (a === o) return 0;
+                                            a -= 1
+                                        } else if (u[0][a] < u[1][a]) return -1
+                                    }
+                                }, e.map = function (e, t) {
+                                    var r, n = [];
+                                    if (Array.prototype.map) return Array.prototype.map.call(e, t);
+                                    for (r = 0; r < e.length; r += 1) n.push(t(e[r]));
+                                    return n
+                                }, e.find = function (e, t) {
+                                    var r, n;
+                                    if (Array.prototype.find) return Array.prototype.find.call(e, t);
+                                    for (r = 0, n = e.length; r < n; r += 1) {
+                                        var i = e[r];
+                                        if (t(i, r)) return i
+                                    }
+                                }, e.assign = function (e) {
+                                    for (var t, r, n = e, i = arguments.length, s = new Array(i > 1 ? i - 1 : 0), a = 1; a < i; a++) s[a - 1] = arguments[a];
+                                    if (Object.assign) return Object.assign.apply(Object, [e].concat(s));
+                                    var o = function () {
+                                        var e = s[t];
+                                        "object" == typeof e && null !== e && Object.keys(e).forEach((function (t) {
+                                            n[t] = e[t]
+                                        }))
+                                    };
+                                    for (t = 0, r = s.length; t < r; t += 1) o();
+                                    return e
+                                }, e.getBrowserAlias = function (e) {
+                                    return n.BROWSER_ALIASES_MAP[e]
+                                }, e.getBrowserTypeByAlias = function (e) {
+                                    return n.BROWSER_MAP[e] || ""
+                                }, e
+                            }();
+                            t.default = i, e.exports = t.default
+                        }, 18: function (e, t, r) {
+                            "use strict";
+                            t.__esModule = !0, t.ENGINE_MAP = t.OS_MAP = t.PLATFORMS_MAP = t.BROWSER_MAP = t.BROWSER_ALIASES_MAP = void 0;
+                            t.BROWSER_ALIASES_MAP = {
+                                "Amazon Silk": "amazon_silk",
+                                "Android Browser": "android",
+                                Bada: "bada",
+                                BlackBerry: "blackberry",
+                                Chrome: "chrome",
+                                Chromium: "chromium",
+                                Electron: "electron",
+                                Epiphany: "epiphany",
+                                Firefox: "firefox",
+                                Focus: "focus",
+                                Generic: "generic",
+                                "Google Search": "google_search",
+                                Googlebot: "googlebot",
+                                "Internet Explorer": "ie",
+                                "K-Meleon": "k_meleon",
+                                Maxthon: "maxthon",
+                                "Microsoft Edge": "edge",
+                                "MZ Browser": "mz",
+                                "NAVER Whale Browser": "naver",
+                                Opera: "opera",
+                                "Opera Coast": "opera_coast",
+                                PhantomJS: "phantomjs",
+                                Puffin: "puffin",
+                                QupZilla: "qupzilla",
+                                QQ: "qq",
+                                QQLite: "qqlite",
+                                Safari: "safari",
+                                Sailfish: "sailfish",
+                                "Samsung Internet for Android": "samsung_internet",
+                                SeaMonkey: "seamonkey",
+                                Sleipnir: "sleipnir",
+                                Swing: "swing",
+                                Tizen: "tizen",
+                                "UC Browser": "uc",
+                                Vivaldi: "vivaldi",
+                                "WebOS Browser": "webos",
+                                WeChat: "wechat",
+                                "Yandex Browser": "yandex",
+                                Roku: "roku"
+                            };
+                            t.BROWSER_MAP = {
+                                amazon_silk: "Amazon Silk",
+                                android: "Android Browser",
+                                bada: "Bada",
+                                blackberry: "BlackBerry",
+                                chrome: "Chrome",
+                                chromium: "Chromium",
+                                electron: "Electron",
+                                epiphany: "Epiphany",
+                                firefox: "Firefox",
+                                focus: "Focus",
+                                generic: "Generic",
+                                googlebot: "Googlebot",
+                                google_search: "Google Search",
+                                ie: "Internet Explorer",
+                                k_meleon: "K-Meleon",
+                                maxthon: "Maxthon",
+                                edge: "Microsoft Edge",
+                                mz: "MZ Browser",
+                                naver: "NAVER Whale Browser",
+                                opera: "Opera",
+                                opera_coast: "Opera Coast",
+                                phantomjs: "PhantomJS",
+                                puffin: "Puffin",
+                                qupzilla: "QupZilla",
+                                qq: "QQ Browser",
+                                qqlite: "QQ Browser Lite",
+                                safari: "Safari",
+                                sailfish: "Sailfish",
+                                samsung_internet: "Samsung Internet for Android",
+                                seamonkey: "SeaMonkey",
+                                sleipnir: "Sleipnir",
+                                swing: "Swing",
+                                tizen: "Tizen",
+                                uc: "UC Browser",
+                                vivaldi: "Vivaldi",
+                                webos: "WebOS Browser",
+                                wechat: "WeChat",
+                                yandex: "Yandex Browser"
+                            };
+                            t.PLATFORMS_MAP = {tablet: "tablet", mobile: "mobile", desktop: "desktop", tv: "tv"};
+                            t.OS_MAP = {
+                                WindowsPhone: "Windows Phone",
+                                Windows: "Windows",
+                                MacOS: "macOS",
+                                iOS: "iOS",
+                                Android: "Android",
+                                WebOS: "WebOS",
+                                BlackBerry: "BlackBerry",
+                                Bada: "Bada",
+                                Tizen: "Tizen",
+                                Linux: "Linux",
+                                ChromeOS: "Chrome OS",
+                                PlayStation4: "PlayStation 4",
+                                Roku: "Roku"
+                            };
+                            t.ENGINE_MAP = {
+                                EdgeHTML: "EdgeHTML",
+                                Blink: "Blink",
+                                Trident: "Trident",
+                                Presto: "Presto",
+                                Gecko: "Gecko",
+                                WebKit: "WebKit"
+                            }
+                        }, 90: function (e, t, r) {
+                            "use strict";
+                            t.__esModule = !0, t.default = void 0;
+                            var n, i = (n = r(91)) && n.__esModule ? n : {default: n}, s = r(18);
+
+                            function a(e, t) {
+                                for (var r = 0; r < t.length; r++) {
+                                    var n = t[r];
+                                    n.enumerable = n.enumerable || !1, n.configurable = !0, "value" in n && (n.writable = !0), Object.defineProperty(e, n.key, n)
+                                }
+                            }
+
+                            var o = function () {
+                                function e() {
+                                }
+
+                                var t, r, n;
+                                return e.getParser = function (e, t) {
+                                    if (void 0 === t && (t = !1), "string" != typeof e) throw new Error("UserAgent should be a string");
+                                    return new i.default(e, t)
+                                }, e.parse = function (e) {
+                                    return new i.default(e).getResult()
+                                }, t = e, n = [{
+                                    key: "BROWSER_MAP", get: function () {
+                                        return s.BROWSER_MAP
+                                    }
+                                }, {
+                                    key: "ENGINE_MAP", get: function () {
+                                        return s.ENGINE_MAP
+                                    }
+                                }, {
+                                    key: "OS_MAP", get: function () {
+                                        return s.OS_MAP
+                                    }
+                                }, {
+                                    key: "PLATFORMS_MAP", get: function () {
+                                        return s.PLATFORMS_MAP
+                                    }
+                                }], (r = null) && a(t.prototype, r), n && a(t, n), e
+                            }();
+                            t.default = o, e.exports = t.default
+                        }, 91: function (e, t, r) {
+                            "use strict";
+                            t.__esModule = !0, t.default = void 0;
+                            var n = u(r(92)), i = u(r(93)), s = u(r(94)), a = u(r(95)), o = u(r(17));
+
+                            function u(e) {
+                                return e && e.__esModule ? e : {default: e}
+                            }
+
+                            var d = function () {
+                                function e(e, t) {
+                                    if (void 0 === t && (t = !1), null == e || "" === e) throw new Error("UserAgent parameter can't be empty");
+                                    this._ua = e, this.parsedResult = {}, !0 !== t && this.parse()
+                                }
+
+                                var t = e.prototype;
+                                return t.getUA = function () {
+                                    return this._ua
+                                }, t.test = function (e) {
+                                    return e.test(this._ua)
+                                }, t.parseBrowser = function () {
+                                    var e = this;
+                                    this.parsedResult.browser = {};
+                                    var t = o.default.find(n.default, (function (t) {
+                                        if ("function" == typeof t.test) return t.test(e);
+                                        if (t.test instanceof Array) return t.test.some((function (t) {
+                                            return e.test(t)
+                                        }));
+                                        throw new Error("Browser's test function is not valid")
+                                    }));
+                                    return t && (this.parsedResult.browser = t.describe(this.getUA())), this.parsedResult.browser
+                                }, t.getBrowser = function () {
+                                    return this.parsedResult.browser ? this.parsedResult.browser : this.parseBrowser()
+                                }, t.getBrowserName = function (e) {
+                                    return e ? String(this.getBrowser().name).toLowerCase() || "" : this.getBrowser().name || ""
+                                }, t.getBrowserVersion = function () {
+                                    return this.getBrowser().version
+                                }, t.getOS = function () {
+                                    return this.parsedResult.os ? this.parsedResult.os : this.parseOS()
+                                }, t.parseOS = function () {
+                                    var e = this;
+                                    this.parsedResult.os = {};
+                                    var t = o.default.find(i.default, (function (t) {
+                                        if ("function" == typeof t.test) return t.test(e);
+                                        if (t.test instanceof Array) return t.test.some((function (t) {
+                                            return e.test(t)
+                                        }));
+                                        throw new Error("Browser's test function is not valid")
+                                    }));
+                                    return t && (this.parsedResult.os = t.describe(this.getUA())), this.parsedResult.os
+                                }, t.getOSName = function (e) {
+                                    var t = this.getOS().name;
+                                    return e ? String(t).toLowerCase() || "" : t || ""
+                                }, t.getOSVersion = function () {
+                                    return this.getOS().version
+                                }, t.getPlatform = function () {
+                                    return this.parsedResult.platform ? this.parsedResult.platform : this.parsePlatform()
+                                }, t.getPlatformType = function (e) {
+                                    void 0 === e && (e = !1);
+                                    var t = this.getPlatform().type;
+                                    return e ? String(t).toLowerCase() || "" : t || ""
+                                }, t.parsePlatform = function () {
+                                    var e = this;
+                                    this.parsedResult.platform = {};
+                                    var t = o.default.find(s.default, (function (t) {
+                                        if ("function" == typeof t.test) return t.test(e);
+                                        if (t.test instanceof Array) return t.test.some((function (t) {
+                                            return e.test(t)
+                                        }));
+                                        throw new Error("Browser's test function is not valid")
+                                    }));
+                                    return t && (this.parsedResult.platform = t.describe(this.getUA())), this.parsedResult.platform
+                                }, t.getEngine = function () {
+                                    return this.parsedResult.engine ? this.parsedResult.engine : this.parseEngine()
+                                }, t.getEngineName = function (e) {
+                                    return e ? String(this.getEngine().name).toLowerCase() || "" : this.getEngine().name || ""
+                                }, t.parseEngine = function () {
+                                    var e = this;
+                                    this.parsedResult.engine = {};
+                                    var t = o.default.find(a.default, (function (t) {
+                                        if ("function" == typeof t.test) return t.test(e);
+                                        if (t.test instanceof Array) return t.test.some((function (t) {
+                                            return e.test(t)
+                                        }));
+                                        throw new Error("Browser's test function is not valid")
+                                    }));
+                                    return t && (this.parsedResult.engine = t.describe(this.getUA())), this.parsedResult.engine
+                                }, t.parse = function () {
+                                    return this.parseBrowser(), this.parseOS(), this.parsePlatform(), this.parseEngine(), this
+                                }, t.getResult = function () {
+                                    return o.default.assign({}, this.parsedResult)
+                                }, t.satisfies = function (e) {
+                                    var t = this, r = {}, n = 0, i = {}, s = 0;
+                                    if (Object.keys(e).forEach((function (t) {
+                                        var a = e[t];
+                                        "string" == typeof a ? (i[t] = a, s += 1) : "object" == typeof a && (r[t] = a, n += 1)
+                                    })), n > 0) {
+                                        var a = Object.keys(r), u = o.default.find(a, (function (e) {
+                                            return t.isOS(e)
+                                        }));
+                                        if (u) {
+                                            var d = this.satisfies(r[u]);
+                                            if (void 0 !== d) return d
+                                        }
+                                        var c = o.default.find(a, (function (e) {
+                                            return t.isPlatform(e)
+                                        }));
+                                        if (c) {
+                                            var f = this.satisfies(r[c]);
+                                            if (void 0 !== f) return f
+                                        }
+                                    }
+                                    if (s > 0) {
+                                        var l = Object.keys(i), h = o.default.find(l, (function (e) {
+                                            return t.isBrowser(e, !0)
+                                        }));
+                                        if (void 0 !== h) return this.compareVersion(i[h])
+                                    }
+                                }, t.isBrowser = function (e, t) {
+                                    void 0 === t && (t = !1);
+                                    var r = this.getBrowserName().toLowerCase(), n = e.toLowerCase(),
+                                        i = o.default.getBrowserTypeByAlias(n);
+                                    return t && i && (n = i.toLowerCase()), n === r
+                                }, t.compareVersion = function (e) {
+                                    var t = [0], r = e, n = !1, i = this.getBrowserVersion();
+                                    if ("string" == typeof i) return ">" === e[0] || "<" === e[0] ? (r = e.substr(1), "=" === e[1] ? (n = !0, r = e.substr(2)) : t = [], ">" === e[0] ? t.push(1) : t.push(-1)) : "=" === e[0] ? r = e.substr(1) : "~" === e[0] && (n = !0, r = e.substr(1)), t.indexOf(o.default.compareVersions(i, r, n)) > -1
+                                }, t.isOS = function (e) {
+                                    return this.getOSName(!0) === String(e).toLowerCase()
+                                }, t.isPlatform = function (e) {
+                                    return this.getPlatformType(!0) === String(e).toLowerCase()
+                                }, t.isEngine = function (e) {
+                                    return this.getEngineName(!0) === String(e).toLowerCase()
+                                }, t.is = function (e, t) {
+                                    return void 0 === t && (t = !1), this.isBrowser(e, t) || this.isOS(e) || this.isPlatform(e)
+                                }, t.some = function (e) {
+                                    var t = this;
+                                    return void 0 === e && (e = []), e.some((function (e) {
+                                        return t.is(e)
+                                    }))
+                                }, e
+                            }();
+                            t.default = d, e.exports = t.default
+                        }, 92: function (e, t, r) {
+                            "use strict";
+                            t.__esModule = !0, t.default = void 0;
+                            var n, i = (n = r(17)) && n.__esModule ? n : {default: n};
+                            var s = /version\/(\d+(\.?_?\d+)+)/i, a = [{
+                                test: [/googlebot/i], describe: function (e) {
+                                    var t = {name: "Googlebot"},
+                                        r = i.default.getFirstMatch(/googlebot\/(\d+(\.\d+))/i, e) || i.default.getFirstMatch(s, e);
+                                    return r && (t.version = r), t
+                                }
+                            }, {
+                                test: [/opera/i], describe: function (e) {
+                                    var t = {name: "Opera"},
+                                        r = i.default.getFirstMatch(s, e) || i.default.getFirstMatch(/(?:opera)[\s/](\d+(\.?_?\d+)+)/i, e);
+                                    return r && (t.version = r), t
+                                }
+                            }, {
+                                test: [/opr\/|opios/i], describe: function (e) {
+                                    var t = {name: "Opera"},
+                                        r = i.default.getFirstMatch(/(?:opr|opios)[\s/](\S+)/i, e) || i.default.getFirstMatch(s, e);
+                                    return r && (t.version = r), t
+                                }
+                            }, {
+                                test: [/SamsungBrowser/i], describe: function (e) {
+                                    var t = {name: "Samsung Internet for Android"},
+                                        r = i.default.getFirstMatch(s, e) || i.default.getFirstMatch(/(?:SamsungBrowser)[\s/](\d+(\.?_?\d+)+)/i, e);
+                                    return r && (t.version = r), t
+                                }
+                            }, {
+                                test: [/Whale/i], describe: function (e) {
+                                    var t = {name: "NAVER Whale Browser"},
+                                        r = i.default.getFirstMatch(s, e) || i.default.getFirstMatch(/(?:whale)[\s/](\d+(?:\.\d+)+)/i, e);
+                                    return r && (t.version = r), t
+                                }
+                            }, {
+                                test: [/MZBrowser/i], describe: function (e) {
+                                    var t = {name: "MZ Browser"},
+                                        r = i.default.getFirstMatch(/(?:MZBrowser)[\s/](\d+(?:\.\d+)+)/i, e) || i.default.getFirstMatch(s, e);
+                                    return r && (t.version = r), t
+                                }
+                            }, {
+                                test: [/focus/i], describe: function (e) {
+                                    var t = {name: "Focus"},
+                                        r = i.default.getFirstMatch(/(?:focus)[\s/](\d+(?:\.\d+)+)/i, e) || i.default.getFirstMatch(s, e);
+                                    return r && (t.version = r), t
+                                }
+                            }, {
+                                test: [/swing/i], describe: function (e) {
+                                    var t = {name: "Swing"},
+                                        r = i.default.getFirstMatch(/(?:swing)[\s/](\d+(?:\.\d+)+)/i, e) || i.default.getFirstMatch(s, e);
+                                    return r && (t.version = r), t
+                                }
+                            }, {
+                                test: [/coast/i], describe: function (e) {
+                                    var t = {name: "Opera Coast"},
+                                        r = i.default.getFirstMatch(s, e) || i.default.getFirstMatch(/(?:coast)[\s/](\d+(\.?_?\d+)+)/i, e);
+                                    return r && (t.version = r), t
+                                }
+                            }, {
+                                test: [/opt\/\d+(?:.?_?\d+)+/i], describe: function (e) {
+                                    var t = {name: "Opera Touch"},
+                                        r = i.default.getFirstMatch(/(?:opt)[\s/](\d+(\.?_?\d+)+)/i, e) || i.default.getFirstMatch(s, e);
+                                    return r && (t.version = r), t
+                                }
+                            }, {
+                                test: [/yabrowser/i], describe: function (e) {
+                                    var t = {name: "Yandex Browser"},
+                                        r = i.default.getFirstMatch(/(?:yabrowser)[\s/](\d+(\.?_?\d+)+)/i, e) || i.default.getFirstMatch(s, e);
+                                    return r && (t.version = r), t
+                                }
+                            }, {
+                                test: [/ucbrowser/i], describe: function (e) {
+                                    var t = {name: "UC Browser"},
+                                        r = i.default.getFirstMatch(s, e) || i.default.getFirstMatch(/(?:ucbrowser)[\s/](\d+(\.?_?\d+)+)/i, e);
+                                    return r && (t.version = r), t
+                                }
+                            }, {
+                                test: [/Maxthon|mxios/i], describe: function (e) {
+                                    var t = {name: "Maxthon"},
+                                        r = i.default.getFirstMatch(s, e) || i.default.getFirstMatch(/(?:Maxthon|mxios)[\s/](\d+(\.?_?\d+)+)/i, e);
+                                    return r && (t.version = r), t
+                                }
+                            }, {
+                                test: [/epiphany/i], describe: function (e) {
+                                    var t = {name: "Epiphany"},
+                                        r = i.default.getFirstMatch(s, e) || i.default.getFirstMatch(/(?:epiphany)[\s/](\d+(\.?_?\d+)+)/i, e);
+                                    return r && (t.version = r), t
+                                }
+                            }, {
+                                test: [/puffin/i], describe: function (e) {
+                                    var t = {name: "Puffin"},
+                                        r = i.default.getFirstMatch(s, e) || i.default.getFirstMatch(/(?:puffin)[\s/](\d+(\.?_?\d+)+)/i, e);
+                                    return r && (t.version = r), t
+                                }
+                            }, {
+                                test: [/sleipnir/i], describe: function (e) {
+                                    var t = {name: "Sleipnir"},
+                                        r = i.default.getFirstMatch(s, e) || i.default.getFirstMatch(/(?:sleipnir)[\s/](\d+(\.?_?\d+)+)/i, e);
+                                    return r && (t.version = r), t
+                                }
+                            }, {
+                                test: [/k-meleon/i], describe: function (e) {
+                                    var t = {name: "K-Meleon"},
+                                        r = i.default.getFirstMatch(s, e) || i.default.getFirstMatch(/(?:k-meleon)[\s/](\d+(\.?_?\d+)+)/i, e);
+                                    return r && (t.version = r), t
+                                }
+                            }, {
+                                test: [/micromessenger/i], describe: function (e) {
+                                    var t = {name: "WeChat"},
+                                        r = i.default.getFirstMatch(/(?:micromessenger)[\s/](\d+(\.?_?\d+)+)/i, e) || i.default.getFirstMatch(s, e);
+                                    return r && (t.version = r), t
+                                }
+                            }, {
+                                test: [/qqbrowser/i], describe: function (e) {
+                                    var t = {name: /qqbrowserlite/i.test(e) ? "QQ Browser Lite" : "QQ Browser"},
+                                        r = i.default.getFirstMatch(/(?:qqbrowserlite|qqbrowser)[/](\d+(\.?_?\d+)+)/i, e) || i.default.getFirstMatch(s, e);
+                                    return r && (t.version = r), t
+                                }
+                            }, {
+                                test: [/msie|trident/i], describe: function (e) {
+                                    var t = {name: "Internet Explorer"}, r = i.default.getFirstMatch(/(?:msie |rv:)(\d+(\.?_?\d+)+)/i, e);
+                                    return r && (t.version = r), t
+                                }
+                            }, {
+                                test: [/\sedg\//i], describe: function (e) {
+                                    var t = {name: "Microsoft Edge"}, r = i.default.getFirstMatch(/\sedg\/(\d+(\.?_?\d+)+)/i, e);
+                                    return r && (t.version = r), t
+                                }
+                            }, {
+                                test: [/edg([ea]|ios)/i], describe: function (e) {
+                                    var t = {name: "Microsoft Edge"}, r = i.default.getSecondMatch(/edg([ea]|ios)\/(\d+(\.?_?\d+)+)/i, e);
+                                    return r && (t.version = r), t
+                                }
+                            }, {
+                                test: [/vivaldi/i], describe: function (e) {
+                                    var t = {name: "Vivaldi"}, r = i.default.getFirstMatch(/vivaldi\/(\d+(\.?_?\d+)+)/i, e);
+                                    return r && (t.version = r), t
+                                }
+                            }, {
+                                test: [/seamonkey/i], describe: function (e) {
+                                    var t = {name: "SeaMonkey"}, r = i.default.getFirstMatch(/seamonkey\/(\d+(\.?_?\d+)+)/i, e);
+                                    return r && (t.version = r), t
+                                }
+                            }, {
+                                test: [/sailfish/i], describe: function (e) {
+                                    var t = {name: "Sailfish"}, r = i.default.getFirstMatch(/sailfish\s?browser\/(\d+(\.\d+)?)/i, e);
+                                    return r && (t.version = r), t
+                                }
+                            }, {
+                                test: [/silk/i], describe: function (e) {
+                                    var t = {name: "Amazon Silk"}, r = i.default.getFirstMatch(/silk\/(\d+(\.?_?\d+)+)/i, e);
+                                    return r && (t.version = r), t
+                                }
+                            }, {
+                                test: [/phantom/i], describe: function (e) {
+                                    var t = {name: "PhantomJS"}, r = i.default.getFirstMatch(/phantomjs\/(\d+(\.?_?\d+)+)/i, e);
+                                    return r && (t.version = r), t
+                                }
+                            }, {
+                                test: [/slimerjs/i], describe: function (e) {
+                                    var t = {name: "SlimerJS"}, r = i.default.getFirstMatch(/slimerjs\/(\d+(\.?_?\d+)+)/i, e);
+                                    return r && (t.version = r), t
+                                }
+                            }, {
+                                test: [/blackberry|\bbb\d+/i, /rim\stablet/i], describe: function (e) {
+                                    var t = {name: "BlackBerry"},
+                                        r = i.default.getFirstMatch(s, e) || i.default.getFirstMatch(/blackberry[\d]+\/(\d+(\.?_?\d+)+)/i, e);
+                                    return r && (t.version = r), t
+                                }
+                            }, {
+                                test: [/(web|hpw)[o0]s/i], describe: function (e) {
+                                    var t = {name: "WebOS Browser"},
+                                        r = i.default.getFirstMatch(s, e) || i.default.getFirstMatch(/w(?:eb)?[o0]sbrowser\/(\d+(\.?_?\d+)+)/i, e);
+                                    return r && (t.version = r), t
+                                }
+                            }, {
+                                test: [/bada/i], describe: function (e) {
+                                    var t = {name: "Bada"}, r = i.default.getFirstMatch(/dolfin\/(\d+(\.?_?\d+)+)/i, e);
+                                    return r && (t.version = r), t
+                                }
+                            }, {
+                                test: [/tizen/i], describe: function (e) {
+                                    var t = {name: "Tizen"},
+                                        r = i.default.getFirstMatch(/(?:tizen\s?)?browser\/(\d+(\.?_?\d+)+)/i, e) || i.default.getFirstMatch(s, e);
+                                    return r && (t.version = r), t
+                                }
+                            }, {
+                                test: [/qupzilla/i], describe: function (e) {
+                                    var t = {name: "QupZilla"},
+                                        r = i.default.getFirstMatch(/(?:qupzilla)[\s/](\d+(\.?_?\d+)+)/i, e) || i.default.getFirstMatch(s, e);
+                                    return r && (t.version = r), t
+                                }
+                            }, {
+                                test: [/firefox|iceweasel|fxios/i], describe: function (e) {
+                                    var t = {name: "Firefox"},
+                                        r = i.default.getFirstMatch(/(?:firefox|iceweasel|fxios)[\s/](\d+(\.?_?\d+)+)/i, e);
+                                    return r && (t.version = r), t
+                                }
+                            }, {
+                                test: [/electron/i], describe: function (e) {
+                                    var t = {name: "Electron"}, r = i.default.getFirstMatch(/(?:electron)\/(\d+(\.?_?\d+)+)/i, e);
+                                    return r && (t.version = r), t
+                                }
+                            }, {
+                                test: [/MiuiBrowser/i], describe: function (e) {
+                                    var t = {name: "Miui"}, r = i.default.getFirstMatch(/(?:MiuiBrowser)[\s/](\d+(\.?_?\d+)+)/i, e);
+                                    return r && (t.version = r), t
+                                }
+                            }, {
+                                test: [/chromium/i], describe: function (e) {
+                                    var t = {name: "Chromium"},
+                                        r = i.default.getFirstMatch(/(?:chromium)[\s/](\d+(\.?_?\d+)+)/i, e) || i.default.getFirstMatch(s, e);
+                                    return r && (t.version = r), t
+                                }
+                            }, {
+                                test: [/chrome|crios|crmo/i], describe: function (e) {
+                                    var t = {name: "Chrome"}, r = i.default.getFirstMatch(/(?:chrome|crios|crmo)\/(\d+(\.?_?\d+)+)/i, e);
+                                    return r && (t.version = r), t
+                                }
+                            }, {
+                                test: [/GSA/i], describe: function (e) {
+                                    var t = {name: "Google Search"}, r = i.default.getFirstMatch(/(?:GSA)\/(\d+(\.?_?\d+)+)/i, e);
+                                    return r && (t.version = r), t
+                                }
+                            }, {
+                                test: function (e) {
+                                    var t = !e.test(/like android/i), r = e.test(/android/i);
+                                    return t && r
+                                }, describe: function (e) {
+                                    var t = {name: "Android Browser"}, r = i.default.getFirstMatch(s, e);
+                                    return r && (t.version = r), t
+                                }
+                            }, {
+                                test: [/playstation 4/i], describe: function (e) {
+                                    var t = {name: "PlayStation 4"}, r = i.default.getFirstMatch(s, e);
+                                    return r && (t.version = r), t
+                                }
+                            }, {
+                                test: [/safari|applewebkit/i], describe: function (e) {
+                                    var t = {name: "Safari"}, r = i.default.getFirstMatch(s, e);
+                                    return r && (t.version = r), t
+                                }
+                            }, {
+                                test: [/.*/i], describe: function (e) {
+                                    var t = -1 !== e.search("\\(") ? /^(.*)\/(.*)[ \t]\((.*)/ : /^(.*)\/(.*) /;
+                                    return {name: i.default.getFirstMatch(t, e), version: i.default.getSecondMatch(t, e)}
+                                }
+                            }];
+                            t.default = a, e.exports = t.default
+                        }, 93: function (e, t, r) {
+                            "use strict";
+                            t.__esModule = !0, t.default = void 0;
+                            var n, i = (n = r(17)) && n.__esModule ? n : {default: n}, s = r(18);
+                            var a = [{
+                                test: [/Roku\/DVP/], describe: function (e) {
+                                    var t = i.default.getFirstMatch(/Roku\/DVP-(\d+\.\d+)/i, e);
+                                    return {name: s.OS_MAP.Roku, version: t}
+                                }
+                            }, {
+                                test: [/windows phone/i], describe: function (e) {
+                                    var t = i.default.getFirstMatch(/windows phone (?:os)?\s?(\d+(\.\d+)*)/i, e);
+                                    return {name: s.OS_MAP.WindowsPhone, version: t}
+                                }
+                            }, {
+                                test: [/windows /i], describe: function (e) {
+                                    var t = i.default.getFirstMatch(/Windows ((NT|XP)( \d\d?.\d)?)/i, e),
+                                        r = i.default.getWindowsVersionName(t);
+                                    return {name: s.OS_MAP.Windows, version: t, versionName: r}
+                                }
+                            }, {
+                                test: [/Macintosh(.*?) FxiOS(.*?)\//], describe: function (e) {
+                                    var t = {name: s.OS_MAP.iOS}, r = i.default.getSecondMatch(/(Version\/)(\d[\d.]+)/, e);
+                                    return r && (t.version = r), t
+                                }
+                            }, {
+                                test: [/macintosh/i], describe: function (e) {
+                                    var t = i.default.getFirstMatch(/mac os x (\d+(\.?_?\d+)+)/i, e).replace(/[_\s]/g, "."),
+                                        r = i.default.getMacOSVersionName(t), n = {name: s.OS_MAP.MacOS, version: t};
+                                    return r && (n.versionName = r), n
+                                }
+                            }, {
+                                test: [/(ipod|iphone|ipad)/i], describe: function (e) {
+                                    var t = i.default.getFirstMatch(/os (\d+([_\s]\d+)*) like mac os x/i, e).replace(/[_\s]/g, ".");
+                                    return {name: s.OS_MAP.iOS, version: t}
+                                }
+                            }, {
+                                test: function (e) {
+                                    var t = !e.test(/like android/i), r = e.test(/android/i);
+                                    return t && r
+                                }, describe: function (e) {
+                                    var t = i.default.getFirstMatch(/android[\s/-](\d+(\.\d+)*)/i, e),
+                                        r = i.default.getAndroidVersionName(t), n = {name: s.OS_MAP.Android, version: t};
+                                    return r && (n.versionName = r), n
+                                }
+                            }, {
+                                test: [/(web|hpw)[o0]s/i], describe: function (e) {
+                                    var t = i.default.getFirstMatch(/(?:web|hpw)[o0]s\/(\d+(\.\d+)*)/i, e), r = {name: s.OS_MAP.WebOS};
+                                    return t && t.length && (r.version = t), r
+                                }
+                            }, {
+                                test: [/blackberry|\bbb\d+/i, /rim\stablet/i], describe: function (e) {
+                                    var t = i.default.getFirstMatch(/rim\stablet\sos\s(\d+(\.\d+)*)/i, e) || i.default.getFirstMatch(/blackberry\d+\/(\d+([_\s]\d+)*)/i, e) || i.default.getFirstMatch(/\bbb(\d+)/i, e);
+                                    return {name: s.OS_MAP.BlackBerry, version: t}
+                                }
+                            }, {
+                                test: [/bada/i], describe: function (e) {
+                                    var t = i.default.getFirstMatch(/bada\/(\d+(\.\d+)*)/i, e);
+                                    return {name: s.OS_MAP.Bada, version: t}
+                                }
+                            }, {
+                                test: [/tizen/i], describe: function (e) {
+                                    var t = i.default.getFirstMatch(/tizen[/\s](\d+(\.\d+)*)/i, e);
+                                    return {name: s.OS_MAP.Tizen, version: t}
+                                }
+                            }, {
+                                test: [/linux/i], describe: function () {
+                                    return {name: s.OS_MAP.Linux}
+                                }
+                            }, {
+                                test: [/CrOS/], describe: function () {
+                                    return {name: s.OS_MAP.ChromeOS}
+                                }
+                            }, {
+                                test: [/PlayStation 4/], describe: function (e) {
+                                    var t = i.default.getFirstMatch(/PlayStation 4[/\s](\d+(\.\d+)*)/i, e);
+                                    return {name: s.OS_MAP.PlayStation4, version: t}
+                                }
+                            }];
+                            t.default = a, e.exports = t.default
+                        }, 94: function (e, t, r) {
+                            "use strict";
+                            t.__esModule = !0, t.default = void 0;
+                            var n, i = (n = r(17)) && n.__esModule ? n : {default: n}, s = r(18);
+                            var a = [{
+                                test: [/googlebot/i], describe: function () {
+                                    return {type: "bot", vendor: "Google"}
+                                }
+                            }, {
+                                test: [/huawei/i], describe: function (e) {
+                                    var t = i.default.getFirstMatch(/(can-l01)/i, e) && "Nova",
+                                        r = {type: s.PLATFORMS_MAP.mobile, vendor: "Huawei"};
+                                    return t && (r.model = t), r
+                                }
+                            }, {
+                                test: [/nexus\s*(?:7|8|9|10).*/i], describe: function () {
+                                    return {type: s.PLATFORMS_MAP.tablet, vendor: "Nexus"}
+                                }
+                            }, {
+                                test: [/ipad/i], describe: function () {
+                                    return {type: s.PLATFORMS_MAP.tablet, vendor: "Apple", model: "iPad"}
+                                }
+                            }, {
+                                test: [/Macintosh(.*?) FxiOS(.*?)\//], describe: function () {
+                                    return {type: s.PLATFORMS_MAP.tablet, vendor: "Apple", model: "iPad"}
+                                }
+                            }, {
+                                test: [/kftt build/i], describe: function () {
+                                    return {type: s.PLATFORMS_MAP.tablet, vendor: "Amazon", model: "Kindle Fire HD 7"}
+                                }
+                            }, {
+                                test: [/silk/i], describe: function () {
+                                    return {type: s.PLATFORMS_MAP.tablet, vendor: "Amazon"}
+                                }
+                            }, {
+                                test: [/tablet(?! pc)/i], describe: function () {
+                                    return {type: s.PLATFORMS_MAP.tablet}
+                                }
+                            }, {
+                                test: function (e) {
+                                    var t = e.test(/ipod|iphone/i), r = e.test(/like (ipod|iphone)/i);
+                                    return t && !r
+                                }, describe: function (e) {
+                                    var t = i.default.getFirstMatch(/(ipod|iphone)/i, e);
+                                    return {type: s.PLATFORMS_MAP.mobile, vendor: "Apple", model: t}
+                                }
+                            }, {
+                                test: [/nexus\s*[0-6].*/i, /galaxy nexus/i], describe: function () {
+                                    return {type: s.PLATFORMS_MAP.mobile, vendor: "Nexus"}
+                                }
+                            }, {
+                                test: [/[^-]mobi/i], describe: function () {
+                                    return {type: s.PLATFORMS_MAP.mobile}
+                                }
+                            }, {
+                                test: function (e) {
+                                    return "blackberry" === e.getBrowserName(!0)
+                                }, describe: function () {
+                                    return {type: s.PLATFORMS_MAP.mobile, vendor: "BlackBerry"}
+                                }
+                            }, {
+                                test: function (e) {
+                                    return "bada" === e.getBrowserName(!0)
+                                }, describe: function () {
+                                    return {type: s.PLATFORMS_MAP.mobile}
+                                }
+                            }, {
+                                test: function (e) {
+                                    return "windows phone" === e.getBrowserName()
+                                }, describe: function () {
+                                    return {type: s.PLATFORMS_MAP.mobile, vendor: "Microsoft"}
+                                }
+                            }, {
+                                test: function (e) {
+                                    var t = Number(String(e.getOSVersion()).split(".")[0]);
+                                    return "android" === e.getOSName(!0) && t >= 3
+                                }, describe: function () {
+                                    return {type: s.PLATFORMS_MAP.tablet}
+                                }
+                            }, {
+                                test: function (e) {
+                                    return "android" === e.getOSName(!0)
+                                }, describe: function () {
+                                    return {type: s.PLATFORMS_MAP.mobile}
+                                }
+                            }, {
+                                test: function (e) {
+                                    return "macos" === e.getOSName(!0)
+                                }, describe: function () {
+                                    return {type: s.PLATFORMS_MAP.desktop, vendor: "Apple"}
+                                }
+                            }, {
+                                test: function (e) {
+                                    return "windows" === e.getOSName(!0)
+                                }, describe: function () {
+                                    return {type: s.PLATFORMS_MAP.desktop}
+                                }
+                            }, {
+                                test: function (e) {
+                                    return "linux" === e.getOSName(!0)
+                                }, describe: function () {
+                                    return {type: s.PLATFORMS_MAP.desktop}
+                                }
+                            }, {
+                                test: function (e) {
+                                    return "playstation 4" === e.getOSName(!0)
+                                }, describe: function () {
+                                    return {type: s.PLATFORMS_MAP.tv}
+                                }
+                            }, {
+                                test: function (e) {
+                                    return "roku" === e.getOSName(!0)
+                                }, describe: function () {
+                                    return {type: s.PLATFORMS_MAP.tv}
+                                }
+                            }];
+                            t.default = a, e.exports = t.default
+                        }, 95: function (e, t, r) {
+                            "use strict";
+                            t.__esModule = !0, t.default = void 0;
+                            var n, i = (n = r(17)) && n.__esModule ? n : {default: n}, s = r(18);
+                            var a = [{
+                                test: function (e) {
+                                    return "microsoft edge" === e.getBrowserName(!0)
+                                }, describe: function (e) {
+                                    if (/\sedg\//i.test(e)) return {name: s.ENGINE_MAP.Blink};
+                                    var t = i.default.getFirstMatch(/edge\/(\d+(\.?_?\d+)+)/i, e);
+                                    return {name: s.ENGINE_MAP.EdgeHTML, version: t}
+                                }
+                            }, {
+                                test: [/trident/i], describe: function (e) {
+                                    var t = {name: s.ENGINE_MAP.Trident}, r = i.default.getFirstMatch(/trident\/(\d+(\.?_?\d+)+)/i, e);
+                                    return r && (t.version = r), t
+                                }
+                            }, {
+                                test: function (e) {
+                                    return e.test(/presto/i)
+                                }, describe: function (e) {
+                                    var t = {name: s.ENGINE_MAP.Presto}, r = i.default.getFirstMatch(/presto\/(\d+(\.?_?\d+)+)/i, e);
+                                    return r && (t.version = r), t
+                                }
+                            }, {
+                                test: function (e) {
+                                    var t = e.test(/gecko/i), r = e.test(/like gecko/i);
+                                    return t && !r
+                                }, describe: function (e) {
+                                    var t = {name: s.ENGINE_MAP.Gecko}, r = i.default.getFirstMatch(/gecko\/(\d+(\.?_?\d+)+)/i, e);
+                                    return r && (t.version = r), t
+                                }
+                            }, {
+                                test: [/(apple)?webkit\/537\.36/i], describe: function () {
+                                    return {name: s.ENGINE_MAP.Blink}
+                                }
+                            }, {
+                                test: [/(apple)?webkit/i], describe: function (e) {
+                                    var t = {name: s.ENGINE_MAP.WebKit}, r = i.default.getFirstMatch(/webkit\/(\d+(\.?_?\d+)+)/i, e);
+                                    return r && (t.version = r), t
+                                }
+                            }];
+                            t.default = a, e.exports = t.default
+                        }
+                    })
+                }));
+
+                /***/
+            }),
+
+            /***/ 435:
+            /***/ ((module) => {
+
+                /**
+                 * Helpers.
+                 */
+
+                var s = 1000;
+                var m = s * 60;
+                var h = m * 60;
+                var d = h * 24;
+                var w = d * 7;
+                var y = d * 365.25;
+
+                /**
+                 * Parse or format the given `val`.
+                 *
+                 * Options:
+                 *
+                 *  - `long` verbose formatting [false]
+                 *
+                 * @param {String|Number} val
+                 * @param {Object} [options]
+                 * @throws {Error} throw an error if val is not a non-empty string or a number
+                 * @return {String|Number}
+                 * @api public
+                 */
+
+                module.exports = function (val, options) {
+                    options = options || {};
+                    var type = typeof val;
+                    if (type === 'string' && val.length > 0) {
+                        return parse(val);
+                    } else if (type === 'number' && isFinite(val)) {
+                        return options.long ? fmtLong(val) : fmtShort(val);
+                    }
+                    throw new Error(
+                        'val is not a non-empty string or a valid number. val=' +
+                        JSON.stringify(val)
+                    );
+                };
+
+                /**
+                 * Parse the given `str` and return milliseconds.
+                 *
+                 * @param {String} str
+                 * @return {Number}
+                 * @api private
+                 */
+
+                function parse(str) {
+                    str = String(str);
+                    if (str.length > 100) {
+                        return;
+                    }
+                    var match = /^(-?(?:\d+)?\.?\d+) *(milliseconds?|msecs?|ms|seconds?|secs?|s|minutes?|mins?|m|hours?|hrs?|h|days?|d|weeks?|w|years?|yrs?|y)?$/i.exec(
+                        str
+                    );
+                    if (!match) {
+                        return;
+                    }
+                    var n = parseFloat(match[1]);
+                    var type = (match[2] || 'ms').toLowerCase();
+                    switch (type) {
+                        case 'years':
+                        case 'year':
+                        case 'yrs':
+                        case 'yr':
+                        case 'y':
+                            return n * y;
+                        case 'weeks':
+                        case 'week':
+                        case 'w':
+                            return n * w;
+                        case 'days':
+                        case 'day':
+                        case 'd':
+                            return n * d;
+                        case 'hours':
+                        case 'hour':
+                        case 'hrs':
+                        case 'hr':
+                        case 'h':
+                            return n * h;
+                        case 'minutes':
+                        case 'minute':
+                        case 'mins':
+                        case 'min':
+                        case 'm':
+                            return n * m;
+                        case 'seconds':
+                        case 'second':
+                        case 'secs':
+                        case 'sec':
+                        case 's':
+                            return n * s;
+                        case 'milliseconds':
+                        case 'millisecond':
+                        case 'msecs':
+                        case 'msec':
+                        case 'ms':
+                            return n;
+                        default:
+                            return undefined;
+                    }
+                }
+
+                /**
+                 * Short format for `ms`.
+                 *
+                 * @param {Number} ms
+                 * @return {String}
+                 * @api private
+                 */
+
+                function fmtShort(ms) {
+                    var msAbs = Math.abs(ms);
+                    if (msAbs >= d) {
+                        return Math.round(ms / d) + 'd';
+                    }
+                    if (msAbs >= h) {
+                        return Math.round(ms / h) + 'h';
+                    }
+                    if (msAbs >= m) {
+                        return Math.round(ms / m) + 'm';
+                    }
+                    if (msAbs >= s) {
+                        return Math.round(ms / s) + 's';
+                    }
+                    return ms + 'ms';
+                }
+
+                /**
+                 * Long format for `ms`.
+                 *
+                 * @param {Number} ms
+                 * @return {String}
+                 * @api private
+                 */
+
+                function fmtLong(ms) {
+                    var msAbs = Math.abs(ms);
+                    if (msAbs >= d) {
+                        return plural(ms, msAbs, d, 'day');
+                    }
+                    if (msAbs >= h) {
+                        return plural(ms, msAbs, h, 'hour');
+                    }
+                    if (msAbs >= m) {
+                        return plural(ms, msAbs, m, 'minute');
+                    }
+                    if (msAbs >= s) {
+                        return plural(ms, msAbs, s, 'second');
+                    }
+                    return ms + ' ms';
+                }
+
+                /**
+                 * Pluralization helper.
+                 */
+
+                function plural(ms, msAbs, n, name) {
+                    var isPlural = msAbs >= n * 1.5;
+                    return Math.round(ms / n) + ' ' + name + (isPlural ? 's' : '');
+                }
+
+
+                /***/
+            }),
+
+            /***/ 227:
+            /***/ ((module, exports, __webpack_require__) => {
+
+                /* eslint-env browser */
+
+                /**
+                 * This is the web browser implementation of `debug()`.
+                 */
+
+                exports.formatArgs = formatArgs;
+                exports.save = save;
+                exports.load = load;
+                exports.useColors = useColors;
+                exports.storage = localstorage();
+                exports.destroy = (() => {
+                    let warned = false;
+
+                    return () => {
+                        if (!warned) {
+                            warned = true;
+                            console.warn('Instance method `debug.destroy()` is deprecated and no longer does anything. It will be removed in the next major version of `debug`.');
+                        }
+                    };
+                })();
+
+                /**
+                 * Colors.
+                 */
+
+                exports.colors = [
+                    '#0000CC',
+                    '#0000FF',
+                    '#0033CC',
+                    '#0033FF',
+                    '#0066CC',
+                    '#0066FF',
+                    '#0099CC',
+                    '#0099FF',
+                    '#00CC00',
+                    '#00CC33',
+                    '#00CC66',
+                    '#00CC99',
+                    '#00CCCC',
+                    '#00CCFF',
+                    '#3300CC',
+                    '#3300FF',
+                    '#3333CC',
+                    '#3333FF',
+                    '#3366CC',
+                    '#3366FF',
+                    '#3399CC',
+                    '#3399FF',
+                    '#33CC00',
+                    '#33CC33',
+                    '#33CC66',
+                    '#33CC99',
+                    '#33CCCC',
+                    '#33CCFF',
+                    '#6600CC',
+                    '#6600FF',
+                    '#6633CC',
+                    '#6633FF',
+                    '#66CC00',
+                    '#66CC33',
+                    '#9900CC',
+                    '#9900FF',
+                    '#9933CC',
+                    '#9933FF',
+                    '#99CC00',
+                    '#99CC33',
+                    '#CC0000',
+                    '#CC0033',
+                    '#CC0066',
+                    '#CC0099',
+                    '#CC00CC',
+                    '#CC00FF',
+                    '#CC3300',
+                    '#CC3333',
+                    '#CC3366',
+                    '#CC3399',
+                    '#CC33CC',
+                    '#CC33FF',
+                    '#CC6600',
+                    '#CC6633',
+                    '#CC9900',
+                    '#CC9933',
+                    '#CCCC00',
+                    '#CCCC33',
+                    '#FF0000',
+                    '#FF0033',
+                    '#FF0066',
+                    '#FF0099',
+                    '#FF00CC',
+                    '#FF00FF',
+                    '#FF3300',
+                    '#FF3333',
+                    '#FF3366',
+                    '#FF3399',
+                    '#FF33CC',
+                    '#FF33FF',
+                    '#FF6600',
+                    '#FF6633',
+                    '#FF9900',
+                    '#FF9933',
+                    '#FFCC00',
+                    '#FFCC33'
+                ];
+
+                /**
+                 * Currently only WebKit-based Web Inspectors, Firefox >= v31,
+                 * and the Firebug extension (any Firefox version) are known
+                 * to support "%c" CSS customizations.
+                 *
+                 * TODO: add a `localStorage` variable to explicitly enable/disable colors
+                 */
+
+// eslint-disable-next-line complexity
+                function useColors() {
+                    // NB: In an Electron preload script, document will be defined but not fully
+                    // initialized. Since we know we're in Chrome, we'll just detect this case
+                    // explicitly
+                    if (typeof window !== 'undefined' && window.process && (window.process.type === 'renderer' || window.process.__nwjs)) {
+                        return true;
+                    }
+
+                    // Internet Explorer and Edge do not support colors.
+                    if (typeof navigator !== 'undefined' && navigator.userAgent && navigator.userAgent.toLowerCase().match(/(edge|trident)\/(\d+)/)) {
+                        return false;
+                    }
+
+                    // Is webkit? http://stackoverflow.com/a/16459606/376773
+                    // document is undefined in react-native: https://github.com/facebook/react-native/pull/1632
+                    return (typeof document !== 'undefined' && document.documentElement && document.documentElement.style && document.documentElement.style.WebkitAppearance) ||
+                        // Is firebug? http://stackoverflow.com/a/398120/376773
+                        (typeof window !== 'undefined' && window.console && (window.console.firebug || (window.console.exception && window.console.table))) ||
+                        // Is firefox >= v31?
+                        // https://developer.mozilla.org/en-US/docs/Tools/Web_Console#Styling_messages
+                        (typeof navigator !== 'undefined' && navigator.userAgent && navigator.userAgent.toLowerCase().match(/firefox\/(\d+)/) && parseInt(RegExp.$1, 10) >= 31) ||
+                        // Double check webkit in userAgent just in case we are in a worker
+                        (typeof navigator !== 'undefined' && navigator.userAgent && navigator.userAgent.toLowerCase().match(/applewebkit\/(\d+)/));
+                }
+
+                /**
+                 * Colorize log arguments if enabled.
+                 *
+                 * @api public
+                 */
+
+                function formatArgs(args) {
+                    args[0] = (this.useColors ? '%c' : '') +
+                        this.namespace +
+                        (this.useColors ? ' %c' : ' ') +
+                        args[0] +
+                        (this.useColors ? '%c ' : ' ') +
+                        '+' + module.exports.humanize(this.diff);
+
+                    if (!this.useColors) {
+                        return;
+                    }
+
+                    const c = 'color: ' + this.color;
+                    args.splice(1, 0, c, 'color: inherit');
+
+                    // The final "%c" is somewhat tricky, because there could be other
+                    // arguments passed either before or after the %c, so we need to
+                    // figure out the correct index to insert the CSS into
+                    let index = 0;
+                    let lastC = 0;
+                    args[0].replace(/%[a-zA-Z%]/g, match => {
+                        if (match === '%%') {
+                            return;
+                        }
+                        index++;
+                        if (match === '%c') {
+                            // We only are interested in the *last* %c
+                            // (the user may have provided their own)
+                            lastC = index;
+                        }
+                    });
+
+                    args.splice(lastC, 0, c);
+                }
+
+                /**
+                 * Invokes `console.debug()` when available.
+                 * No-op when `console.debug` is not a "function".
+                 * If `console.debug` is not available, falls back
+                 * to `console.log`.
+                 *
+                 * @api public
+                 */
+                exports.log = console.debug || console.log || (() => {
+                });
+
+                /**
+                 * Save `namespaces`.
+                 *
+                 * @param {String} namespaces
+                 * @api private
+                 */
+                function save(namespaces) {
+                    try {
+                        if (namespaces) {
+                            exports.storage.setItem('debug', namespaces);
+                        } else {
+                            exports.storage.removeItem('debug');
+                        }
+                    } catch (error) {
+                        // Swallow
+                        // XXX (@Qix-) should we be logging these?
+                    }
+                }
+
+                /**
+                 * Load `namespaces`.
+                 *
+                 * @return {String} returns the previously persisted debug modes
+                 * @api private
+                 */
+                function load() {
+                    let r;
+                    try {
+                        r = exports.storage.getItem('debug');
+                    } catch (error) {
+                        // Swallow
+                        // XXX (@Qix-) should we be logging these?
+                    }
+
+                    // If debug isn't set in LS, and we're in Electron, try to load $DEBUG
+                    if (!r && typeof process !== 'undefined' && 'env' in process) {
+                        r = process.env.DEBUG;
+                    }
+
+                    return r;
+                }
+
+                /**
+                 * Localstorage attempts to return the localstorage.
+                 *
+                 * This is necessary because safari throws
+                 * when a user disables cookies/localstorage
+                 * and you attempt to access it.
+                 *
+                 * @return {LocalStorage}
+                 * @api private
+                 */
+
+                function localstorage() {
+                    try {
+                        // TVMLKit (Apple TV JS Runtime) does not have a window object, just localStorage in the global context
+                        // The Browser also has localStorage in the global context.
+                        return localStorage;
+                    } catch (error) {
+                        // Swallow
+                        // XXX (@Qix-) should we be logging these?
+                    }
+                }
+
+                module.exports = __webpack_require__(447)(exports);
+
+                const {formatters} = module.exports;
+
+                /**
+                 * Map %j to `JSON.stringify()`, since no Web Inspectors do that by default.
+                 */
+
+                formatters.j = function (v) {
+                    try {
+                        return JSON.stringify(v);
+                    } catch (error) {
+                        return '[UnexpectedJSONParseError]: ' + error.message;
+                    }
+                };
+
+
+                /***/
+            }),
+
+            /***/ 447:
+            /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+
+                /**
+                 * This is the common logic for both the Node.js and web browser
+                 * implementations of `debug()`.
+                 */
+
+                function setup(env) {
+                    createDebug.debug = createDebug;
+                    createDebug.default = createDebug;
+                    createDebug.coerce = coerce;
+                    createDebug.disable = disable;
+                    createDebug.enable = enable;
+                    createDebug.enabled = enabled;
+                    createDebug.humanize = __webpack_require__(435);
+                    createDebug.destroy = destroy;
+
+                    Object.keys(env).forEach(key => {
+                        createDebug[key] = env[key];
+                    });
+
+                    /**
+                     * The currently active debug mode names, and names to skip.
+                     */
+
+                    createDebug.names = [];
+                    createDebug.skips = [];
+
+                    /**
+                     * Map of special "%n" handling functions, for the debug "format" argument.
+                     *
+                     * Valid key names are a single, lower or upper-case letter, i.e. "n" and "N".
+                     */
+                    createDebug.formatters = {};
+
+                    /**
+                     * Selects a color for a debug namespace
+                     * @param {String} namespace The namespace string for the debug instance to be colored
+                     * @return {Number|String} An ANSI color code for the given namespace
+                     * @api private
+                     */
+                    function selectColor(namespace) {
+                        let hash = 0;
+
+                        for (let i = 0; i < namespace.length; i++) {
+                            hash = ((hash << 5) - hash) + namespace.charCodeAt(i);
+                            hash |= 0; // Convert to 32bit integer
+                        }
+
+                        return createDebug.colors[Math.abs(hash) % createDebug.colors.length];
+                    }
+
+                    createDebug.selectColor = selectColor;
+
+                    /**
+                     * Create a debugger with the given `namespace`.
+                     *
+                     * @param {String} namespace
+                     * @return {Function}
+                     * @api public
+                     */
+                    function createDebug(namespace) {
+                        let prevTime;
+                        let enableOverride = null;
+                        let namespacesCache;
+                        let enabledCache;
+
+                        function debug(...args) {
+                            // Disabled?
+                            if (!debug.enabled) {
+                                return;
+                            }
+
+                            const self = debug;
+
+                            // Set `diff` timestamp
+                            const curr = Number(new Date());
+                            const ms = curr - (prevTime || curr);
+                            self.diff = ms;
+                            self.prev = prevTime;
+                            self.curr = curr;
+                            prevTime = curr;
+
+                            args[0] = createDebug.coerce(args[0]);
+
+                            if (typeof args[0] !== 'string') {
+                                // Anything else let's inspect with %O
+                                args.unshift('%O');
+                            }
+
+                            // Apply any `formatters` transformations
+                            let index = 0;
+                            args[0] = args[0].replace(/%([a-zA-Z%])/g, (match, format) => {
+                                // If we encounter an escaped % then don't increase the array index
+                                if (match === '%%') {
+                                    return '%';
+                                }
+                                index++;
+                                const formatter = createDebug.formatters[format];
+                                if (typeof formatter === 'function') {
+                                    const val = args[index];
+                                    match = formatter.call(self, val);
+
+                                    // Now we need to remove `args[index]` since it's inlined in the `format`
+                                    args.splice(index, 1);
+                                    index--;
+                                }
+                                return match;
+                            });
+
+                            // Apply env-specific formatting (colors, etc.)
+                            createDebug.formatArgs.call(self, args);
+
+                            const logFn = self.log || createDebug.log;
+                            logFn.apply(self, args);
+                        }
+
+                        debug.namespace = namespace;
+                        debug.useColors = createDebug.useColors();
+                        debug.color = createDebug.selectColor(namespace);
+                        debug.extend = extend;
+                        debug.destroy = createDebug.destroy; // XXX Temporary. Will be removed in the next major release.
+
+                        Object.defineProperty(debug, 'enabled', {
+                            enumerable: true,
+                            configurable: false,
+                            get: () => {
+                                if (enableOverride !== null) {
+                                    return enableOverride;
+                                }
+                                if (namespacesCache !== createDebug.namespaces) {
+                                    namespacesCache = createDebug.namespaces;
+                                    enabledCache = createDebug.enabled(namespace);
+                                }
+
+                                return enabledCache;
+                            },
+                            set: v => {
+                                enableOverride = v;
+                            }
+                        });
+
+                        // Env-specific initialization logic for debug instances
+                        if (typeof createDebug.init === 'function') {
+                            createDebug.init(debug);
+                        }
+
+                        return debug;
+                    }
+
+                    function extend(namespace, delimiter) {
+                        const newDebug = createDebug(this.namespace + (typeof delimiter === 'undefined' ? ':' : delimiter) + namespace);
+                        newDebug.log = this.log;
+                        return newDebug;
+                    }
+
+                    /**
+                     * Enables a debug mode by namespaces. This can include modes
+                     * separated by a colon and wildcards.
+                     *
+                     * @param {String} namespaces
+                     * @api public
+                     */
+                    function enable(namespaces) {
+                        createDebug.save(namespaces);
+                        createDebug.namespaces = namespaces;
+
+                        createDebug.names = [];
+                        createDebug.skips = [];
+
+                        let i;
+                        const split = (typeof namespaces === 'string' ? namespaces : '').split(/[\s,]+/);
+                        const len = split.length;
+
+                        for (i = 0; i < len; i++) {
+                            if (!split[i]) {
+                                // ignore empty strings
+                                continue;
+                            }
+
+                            namespaces = split[i].replace(/\*/g, '.*?');
+
+                            if (namespaces[0] === '-') {
+                                createDebug.skips.push(new RegExp('^' + namespaces.slice(1) + '$'));
+                            } else {
+                                createDebug.names.push(new RegExp('^' + namespaces + '$'));
+                            }
+                        }
+                    }
+
+                    /**
+                     * Disable debug output.
+                     *
+                     * @return {String} namespaces
+                     * @api public
+                     */
+                    function disable() {
+                        const namespaces = [
+                            ...createDebug.names.map(toNamespace),
+                            ...createDebug.skips.map(toNamespace).map(namespace => '-' + namespace)
+                        ].join(',');
+                        createDebug.enable('');
+                        return namespaces;
+                    }
+
+                    /**
+                     * Returns true if the given mode name is enabled, false otherwise.
+                     *
+                     * @param {String} name
+                     * @return {Boolean}
+                     * @api public
+                     */
+                    function enabled(name) {
+                        if (name[name.length - 1] === '*') {
+                            return true;
+                        }
+
+                        let i;
+                        let len;
+
+                        for (i = 0, len = createDebug.skips.length; i < len; i++) {
+                            if (createDebug.skips[i].test(name)) {
+                                return false;
+                            }
+                        }
+
+                        for (i = 0, len = createDebug.names.length; i < len; i++) {
+                            if (createDebug.names[i].test(name)) {
+                                return true;
+                            }
+                        }
+
+                        return false;
+                    }
+
+                    /**
+                     * Convert regexp to namespace
+                     *
+                     * @param {RegExp} regxep
+                     * @return {String} namespace
+                     * @api private
+                     */
+                    function toNamespace(regexp) {
+                        return regexp.toString()
+                            .substring(2, regexp.toString().length - 2)
+                            .replace(/\.\*\?$/, '*');
+                    }
+
+                    /**
+                     * Coerce `val`.
+                     *
+                     * @param {Mixed} val
+                     * @return {Mixed}
+                     * @api private
+                     */
+                    function coerce(val) {
+                        if (val instanceof Error) {
+                            return val.stack || val.message;
+                        }
+                        return val;
+                    }
+
+                    /**
+                     * XXX DO NOT USE. This is a temporary stub function.
+                     * XXX It WILL be removed in the next major release.
+                     */
+                    function destroy() {
+                        console.warn('Instance method `debug.destroy()` is deprecated and no longer does anything. It will be removed in the next major version of `debug`.');
+                    }
+
+                    createDebug.enable(createDebug.load());
+
+                    return createDebug;
+                }
+
+                module.exports = setup;
+
+
+                /***/
+            }),
+
+            /***/ 187:
+            /***/ ((module) => {
+
+                "use strict";
+// Copyright Joyent, Inc. and other Node contributors.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a
+// copy of this software and associated documentation files (the
+// "Software"), to deal in the Software without restriction, including
+// without limitation the rights to use, copy, modify, merge, publish,
+// distribute, sublicense, and/or sell copies of the Software, and to permit
+// persons to whom the Software is furnished to do so, subject to the
+// following conditions:
+//
+// The above copyright notice and this permission notice shall be included
+// in all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+// OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN
+// NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
+// DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
+// OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE
+// USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+
+                var R = typeof Reflect === 'object' ? Reflect : null
+                var ReflectApply = R && typeof R.apply === 'function'
+                    ? R.apply
+                    : function ReflectApply(target, receiver, args) {
+                        return Function.prototype.apply.call(target, receiver, args);
+                    }
+
+                var ReflectOwnKeys
+                if (R && typeof R.ownKeys === 'function') {
+                    ReflectOwnKeys = R.ownKeys
+                } else if (Object.getOwnPropertySymbols) {
+                    ReflectOwnKeys = function ReflectOwnKeys(target) {
+                        return Object.getOwnPropertyNames(target)
+                            .concat(Object.getOwnPropertySymbols(target));
+                    };
+                } else {
+                    ReflectOwnKeys = function ReflectOwnKeys(target) {
+                        return Object.getOwnPropertyNames(target);
+                    };
+                }
+
+                function ProcessEmitWarning(warning) {
+                    if (console && console.warn) console.warn(warning);
+                }
+
+                var NumberIsNaN = Number.isNaN || function NumberIsNaN(value) {
+                    return value !== value;
+                }
+
+                function EventEmitter() {
+                    EventEmitter.init.call(this);
+                }
+
+                module.exports = EventEmitter;
+                module.exports.once = once;
+
+// Backwards-compat with node 0.10.x
+                EventEmitter.EventEmitter = EventEmitter;
+
+                EventEmitter.prototype._events = undefined;
+                EventEmitter.prototype._eventsCount = 0;
+                EventEmitter.prototype._maxListeners = undefined;
+
+// By default EventEmitters will print a warning if more than 10 listeners are
+// added to it. This is a useful default which helps finding memory leaks.
+                var defaultMaxListeners = 10;
+
+                function checkListener(listener) {
+                    if (typeof listener !== 'function') {
+                        throw new TypeError('The "listener" argument must be of type Function. Received type ' + typeof listener);
+                    }
+                }
+
+                Object.defineProperty(EventEmitter, 'defaultMaxListeners', {
+                    enumerable: true,
+                    get: function () {
+                        return defaultMaxListeners;
+                    },
+                    set: function (arg) {
+                        if (typeof arg !== 'number' || arg < 0 || NumberIsNaN(arg)) {
+                            throw new RangeError('The value of "defaultMaxListeners" is out of range. It must be a non-negative number. Received ' + arg + '.');
+                        }
+                        defaultMaxListeners = arg;
+                    }
+                });
+
+                EventEmitter.init = function () {
+
+                    if (this._events === undefined ||
+                        this._events === Object.getPrototypeOf(this)._events) {
+                        this._events = Object.create(null);
+                        this._eventsCount = 0;
+                    }
+
+                    this._maxListeners = this._maxListeners || undefined;
+                };
+
+// Obviously not all Emitters should be limited to 10. This function allows
+// that to be increased. Set to zero for unlimited.
+                EventEmitter.prototype.setMaxListeners = function setMaxListeners(n) {
+                    if (typeof n !== 'number' || n < 0 || NumberIsNaN(n)) {
+                        throw new RangeError('The value of "n" is out of range. It must be a non-negative number. Received ' + n + '.');
+                    }
+                    this._maxListeners = n;
+                    return this;
+                };
+
+                function _getMaxListeners(that) {
+                    if (that._maxListeners === undefined)
+                        return EventEmitter.defaultMaxListeners;
+                    return that._maxListeners;
+                }
+
+                EventEmitter.prototype.getMaxListeners = function getMaxListeners() {
+                    return _getMaxListeners(this);
+                };
+
+                EventEmitter.prototype.emit = function emit(type) {
+                    var args = [];
+                    for (var i = 1; i < arguments.length; i++) args.push(arguments[i]);
+                    var doError = (type === 'error');
+
+                    var events = this._events;
+                    if (events !== undefined)
+                        doError = (doError && events.error === undefined);
+                    else if (!doError)
+                        return false;
+
+                    // If there is no 'error' event listener then throw.
+                    if (doError) {
+                        var er;
+                        if (args.length > 0)
+                            er = args[0];
+                        if (er instanceof Error) {
+                            // Note: The comments on the `throw` lines are intentional, they show
+                            // up in Node's output if this results in an unhandled exception.
+                            throw er; // Unhandled 'error' event
+                        }
+                        // At least give some kind of context to the user
+                        var err = new Error('Unhandled error.' + (er ? ' (' + er.message + ')' : ''));
+                        err.context = er;
+                        throw err; // Unhandled 'error' event
+                    }
+
+                    var handler = events[type];
+
+                    if (handler === undefined)
+                        return false;
+
+                    if (typeof handler === 'function') {
+                        ReflectApply(handler, this, args);
+                    } else {
+                        var len = handler.length;
+                        var listeners = arrayClone(handler, len);
+                        for (var i = 0; i < len; ++i)
+                            ReflectApply(listeners[i], this, args);
+                    }
+
+                    return true;
+                };
+
+                function _addListener(target, type, listener, prepend) {
+                    var m;
+                    var events;
+                    var existing;
+
+                    checkListener(listener);
+
+                    events = target._events;
+                    if (events === undefined) {
+                        events = target._events = Object.create(null);
+                        target._eventsCount = 0;
+                    } else {
+                        // To avoid recursion in the case that type === "newListener"! Before
+                        // adding it to the listeners, first emit "newListener".
+                        if (events.newListener !== undefined) {
+                            target.emit('newListener', type,
+                                listener.listener ? listener.listener : listener);
+
+                            // Re-assign `events` because a newListener handler could have caused the
+                            // this._events to be assigned to a new object
+                            events = target._events;
+                        }
+                        existing = events[type];
+                    }
+
+                    if (existing === undefined) {
+                        // Optimize the case of one listener. Don't need the extra array object.
+                        existing = events[type] = listener;
+                        ++target._eventsCount;
+                    } else {
+                        if (typeof existing === 'function') {
+                            // Adding the second element, need to change to array.
+                            existing = events[type] =
+                                prepend ? [listener, existing] : [existing, listener];
+                            // If we've already got an array, just append.
+                        } else if (prepend) {
+                            existing.unshift(listener);
+                        } else {
+                            existing.push(listener);
+                        }
+
+                        // Check for listener leak
+                        m = _getMaxListeners(target);
+                        if (m > 0 && existing.length > m && !existing.warned) {
+                            existing.warned = true;
+                            // No error code for this since it is a Warning
+                            // eslint-disable-next-line no-restricted-syntax
+                            var w = new Error('Possible EventEmitter memory leak detected. ' +
+                                existing.length + ' ' + String(type) + ' listeners ' +
+                                'added. Use emitter.setMaxListeners() to ' +
+                                'increase limit');
+                            w.name = 'MaxListenersExceededWarning';
+                            w.emitter = target;
+                            w.type = type;
+                            w.count = existing.length;
+                            ProcessEmitWarning(w);
+                        }
+                    }
+
+                    return target;
+                }
+
+                EventEmitter.prototype.addListener = function addListener(type, listener) {
+                    return _addListener(this, type, listener, false);
+                };
+
+                EventEmitter.prototype.on = EventEmitter.prototype.addListener;
+
+                EventEmitter.prototype.prependListener =
+                    function prependListener(type, listener) {
+                        return _addListener(this, type, listener, true);
+                    };
+
+                function onceWrapper() {
+                    if (!this.fired) {
+                        this.target.removeListener(this.type, this.wrapFn);
+                        this.fired = true;
+                        if (arguments.length === 0)
+                            return this.listener.call(this.target);
+                        return this.listener.apply(this.target, arguments);
+                    }
+                }
+
+                function _onceWrap(target, type, listener) {
+                    var state = {fired: false, wrapFn: undefined, target: target, type: type, listener: listener};
+                    var wrapped = onceWrapper.bind(state);
+                    wrapped.listener = listener;
+                    state.wrapFn = wrapped;
+                    return wrapped;
+                }
+
+                EventEmitter.prototype.once = function once(type, listener) {
+                    checkListener(listener);
+                    this.on(type, _onceWrap(this, type, listener));
+                    return this;
+                };
+
+                EventEmitter.prototype.prependOnceListener =
+                    function prependOnceListener(type, listener) {
+                        checkListener(listener);
+                        this.prependListener(type, _onceWrap(this, type, listener));
+                        return this;
+                    };
+
+// Emits a 'removeListener' event if and only if the listener was removed.
+                EventEmitter.prototype.removeListener =
+                    function removeListener(type, listener) {
+                        var list, events, position, i, originalListener;
+
+                        checkListener(listener);
+
+                        events = this._events;
+                        if (events === undefined)
+                            return this;
+
+                        list = events[type];
+                        if (list === undefined)
+                            return this;
+
+                        if (list === listener || list.listener === listener) {
+                            if (--this._eventsCount === 0)
+                                this._events = Object.create(null);
+                            else {
+                                delete events[type];
+                                if (events.removeListener)
+                                    this.emit('removeListener', type, list.listener || listener);
+                            }
+                        } else if (typeof list !== 'function') {
+                            position = -1;
+
+                            for (i = list.length - 1; i >= 0; i--) {
+                                if (list[i] === listener || list[i].listener === listener) {
+                                    originalListener = list[i].listener;
+                                    position = i;
+                                    break;
+                                }
+                            }
+
+                            if (position < 0)
+                                return this;
+
+                            if (position === 0)
+                                list.shift();
+                            else {
+                                spliceOne(list, position);
+                            }
+
+                            if (list.length === 1)
+                                events[type] = list[0];
+
+                            if (events.removeListener !== undefined)
+                                this.emit('removeListener', type, originalListener || listener);
+                        }
+
+                        return this;
+                    };
+
+                EventEmitter.prototype.off = EventEmitter.prototype.removeListener;
+
+                EventEmitter.prototype.removeAllListeners =
+                    function removeAllListeners(type) {
+                        var listeners, events, i;
+
+                        events = this._events;
+                        if (events === undefined)
+                            return this;
+
+                        // not listening for removeListener, no need to emit
+                        if (events.removeListener === undefined) {
+                            if (arguments.length === 0) {
+                                this._events = Object.create(null);
+                                this._eventsCount = 0;
+                            } else if (events[type] !== undefined) {
+                                if (--this._eventsCount === 0)
+                                    this._events = Object.create(null);
+                                else
+                                    delete events[type];
+                            }
+                            return this;
+                        }
+
+                        // emit removeListener for all listeners on all events
+                        if (arguments.length === 0) {
+                            var keys = Object.keys(events);
+                            var key;
+                            for (i = 0; i < keys.length; ++i) {
+                                key = keys[i];
+                                if (key === 'removeListener') continue;
+                                this.removeAllListeners(key);
+                            }
+                            this.removeAllListeners('removeListener');
+                            this._events = Object.create(null);
+                            this._eventsCount = 0;
+                            return this;
+                        }
+
+                        listeners = events[type];
+
+                        if (typeof listeners === 'function') {
+                            this.removeListener(type, listeners);
+                        } else if (listeners !== undefined) {
+                            // LIFO order
+                            for (i = listeners.length - 1; i >= 0; i--) {
+                                this.removeListener(type, listeners[i]);
+                            }
+                        }
+
+                        return this;
+                    };
+
+                function _listeners(target, type, unwrap) {
+                    var events = target._events;
+
+                    if (events === undefined)
+                        return [];
+
+                    var evlistener = events[type];
+                    if (evlistener === undefined)
+                        return [];
+
+                    if (typeof evlistener === 'function')
+                        return unwrap ? [evlistener.listener || evlistener] : [evlistener];
+
+                    return unwrap ?
+                        unwrapListeners(evlistener) : arrayClone(evlistener, evlistener.length);
+                }
+
+                EventEmitter.prototype.listeners = function listeners(type) {
+                    return _listeners(this, type, true);
+                };
+
+                EventEmitter.prototype.rawListeners = function rawListeners(type) {
+                    return _listeners(this, type, false);
+                };
+
+                EventEmitter.listenerCount = function (emitter, type) {
+                    if (typeof emitter.listenerCount === 'function') {
+                        return emitter.listenerCount(type);
+                    } else {
+                        return listenerCount.call(emitter, type);
+                    }
+                };
+
+                EventEmitter.prototype.listenerCount = listenerCount;
+
+                function listenerCount(type) {
+                    var events = this._events;
+
+                    if (events !== undefined) {
+                        var evlistener = events[type];
+
+                        if (typeof evlistener === 'function') {
+                            return 1;
+                        } else if (evlistener !== undefined) {
+                            return evlistener.length;
+                        }
+                    }
+
+                    return 0;
+                }
+
+                EventEmitter.prototype.eventNames = function eventNames() {
+                    return this._eventsCount > 0 ? ReflectOwnKeys(this._events) : [];
+                };
+
+                function arrayClone(arr, n) {
+                    var copy = new Array(n);
+                    for (var i = 0; i < n; ++i)
+                        copy[i] = arr[i];
+                    return copy;
+                }
+
+                function spliceOne(list, index) {
+                    for (; index + 1 < list.length; index++)
+                        list[index] = list[index + 1];
+                    list.pop();
+                }
+
+                function unwrapListeners(arr) {
+                    var ret = new Array(arr.length);
+                    for (var i = 0; i < ret.length; ++i) {
+                        ret[i] = arr[i].listener || arr[i];
+                    }
+                    return ret;
+                }
+
+                function once(emitter, name) {
+                    return new Promise(function (resolve, reject) {
+                        function errorListener(err) {
+                            emitter.removeListener(name, resolver);
+                            reject(err);
+                        }
+
+                        function resolver() {
+                            if (typeof emitter.removeListener === 'function') {
+                                emitter.removeListener('error', errorListener);
+                            }
+                            resolve([].slice.call(arguments));
+                        };
+
+                        eventTargetAgnosticAddListener(emitter, name, resolver, {once: true});
+                        if (name !== 'error') {
+                            addErrorHandlerIfEventEmitter(emitter, errorListener, {once: true});
+                        }
+                    });
+                }
+
+                function addErrorHandlerIfEventEmitter(emitter, handler, flags) {
+                    if (typeof emitter.on === 'function') {
+                        eventTargetAgnosticAddListener(emitter, 'error', handler, flags);
+                    }
+                }
+
+                function eventTargetAgnosticAddListener(emitter, name, listener, flags) {
+                    if (typeof emitter.on === 'function') {
+                        if (flags.once) {
+                            emitter.once(name, listener);
+                        } else {
+                            emitter.on(name, listener);
+                        }
+                    } else if (typeof emitter.addEventListener === 'function') {
+                        // EventTarget does not have `error` event semantics like Node
+                        // EventEmitters, we do not listen for `error` events here.
+                        emitter.addEventListener(name, function wrapListener(arg) {
+                            // IE does not have builtin `{ once: true }` support so we
+                            // have to do it manually.
+                            if (flags.once) {
+                                emitter.removeEventListener(name, wrapListener);
+                            }
+                            listener(arg);
+                        });
+                    } else {
+                        throw new TypeError('The "emitter" argument must be of type EventEmitter. Received type ' + typeof emitter);
+                    }
+                }
+
+
+                /***/
+            }),
+
+            /***/ 855:
+            /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+                const debug = __webpack_require__(227)('h264-profile-level-id');
+
+                /* eslint-disable no-console */
+                debug.log = console.info.bind(console);
+                /* eslint-enable no-console */
+
+                const ProfileConstrainedBaseline = 1;
+                const ProfileBaseline = 2;
+                const ProfileMain = 3;
+                const ProfileConstrainedHigh = 4;
+                const ProfileHigh = 5;
+
+                exports.ProfileConstrainedBaseline = ProfileConstrainedBaseline;
+                exports.ProfileBaseline = ProfileBaseline;
+                exports.ProfileMain = ProfileMain;
+                exports.ProfileConstrainedHigh = ProfileConstrainedHigh;
+                exports.ProfileHigh = ProfileHigh;
+
+// All values are equal to ten times the level number, except level 1b which is
+// special.
+                const Level1_b = 0;
+                const Level1 = 10;
+                const Level1_1 = 11;
+                const Level1_2 = 12;
+                const Level1_3 = 13;
+                const Level2 = 20;
+                const Level2_1 = 21;
+                const Level2_2 = 22;
+                const Level3 = 30;
+                const Level3_1 = 31;
+                const Level3_2 = 32;
+                const Level4 = 40;
+                const Level4_1 = 41;
+                const Level4_2 = 42;
+                const Level5 = 50;
+                const Level5_1 = 51;
+                const Level5_2 = 52;
+
+                exports.Level1_b = Level1_b;
+                exports.Level1 = Level1;
+                exports.Level1_1 = Level1_1;
+                exports.Level1_2 = Level1_2;
+                exports.Level1_3 = Level1_3;
+                exports.Level2 = Level2;
+                exports.Level2_1 = Level2_1;
+                exports.Level2_2 = Level2_2;
+                exports.Level3 = Level3;
+                exports.Level3_1 = Level3_1;
+                exports.Level3_2 = Level3_2;
+                exports.Level4 = Level4;
+                exports.Level4_1 = Level4_1;
+                exports.Level4_2 = Level4_2;
+                exports.Level5 = Level5;
+                exports.Level5_1 = Level5_1;
+                exports.Level5_2 = Level5_2;
+
+                class ProfileLevelId {
+                    constructor(profile, level) {
+                        this.profile = profile;
+                        this.level = level;
+                    }
+                }
+
+                exports.ProfileLevelId = ProfileLevelId;
+
+// Default ProfileLevelId.
+//
+// TODO: The default should really be profile Baseline and level 1 according to
+// the spec: https://tools.ietf.org/html/rfc6184#section-8.1. In order to not
+// break backwards compatibility with older versions of WebRTC where external
+// codecs don't have any parameters, use profile ConstrainedBaseline level 3_1
+// instead. This workaround will only be done in an interim period to allow
+// external clients to update their code.
+//
+// http://crbug/webrtc/6337.
+                const DefaultProfileLevelId =
+                    new ProfileLevelId(ProfileConstrainedBaseline, Level3_1);
+
+// For level_idc=11 and profile_idc=0x42, 0x4D, or 0x58, the constraint set3
+// flag specifies if level 1b or level 1.1 is used.
+                const ConstraintSet3Flag = 0x10;
+
+// Class for matching bit patterns such as "x1xx0000" where 'x' is allowed to be
+// either 0 or 1.
+                class BitPattern {
+                    constructor(str) {
+                        this._mask = ~byteMaskString('x', str);
+                        this._maskedValue = byteMaskString('1', str);
+                    }
+
+                    isMatch(value) {
+                        return this._maskedValue === (value & this._mask);
+                    }
+                }
+
+// Class for converting between profile_idc/profile_iop to Profile.
+                class ProfilePattern {
+                    constructor(profile_idc, profile_iop, profile) {
+                        this.profile_idc = profile_idc;
+                        this.profile_iop = profile_iop;
+                        this.profile = profile;
+                    }
+                }
+
+// This is from https://tools.ietf.org/html/rfc6184#section-8.1.
+                const ProfilePatterns =
+                    [
+                        new ProfilePattern(0x42, new BitPattern('x1xx0000'), ProfileConstrainedBaseline),
+                        new ProfilePattern(0x4D, new BitPattern('1xxx0000'), ProfileConstrainedBaseline),
+                        new ProfilePattern(0x58, new BitPattern('11xx0000'), ProfileConstrainedBaseline),
+                        new ProfilePattern(0x42, new BitPattern('x0xx0000'), ProfileBaseline),
+                        new ProfilePattern(0x58, new BitPattern('10xx0000'), ProfileBaseline),
+                        new ProfilePattern(0x4D, new BitPattern('0x0x0000'), ProfileMain),
+                        new ProfilePattern(0x64, new BitPattern('00000000'), ProfileHigh),
+                        new ProfilePattern(0x64, new BitPattern('00001100'), ProfileConstrainedHigh)
+                    ];
+
+                /**
+                 * Parse profile level id that is represented as a string of 3 hex bytes.
+                 * Nothing will be returned if the string is not a recognized H264 profile
+                 * level id.
+                 *
+                 * @param {String} str - profile-level-id value as a string of 3 hex bytes.
+                 *
+                 * @returns {ProfileLevelId}
+                 */
+                exports.parseProfileLevelId = function (str) {
+                    // The string should consist of 3 bytes in hexadecimal format.
+                    if (typeof str !== 'string' || str.length !== 6)
+                        return null;
+
+                    const profile_level_id_numeric = parseInt(str, 16);
+
+                    if (profile_level_id_numeric === 0)
+                        return null;
+
+                    // Separate into three bytes.
+                    const level_idc = profile_level_id_numeric & 0xFF;
+                    const profile_iop = (profile_level_id_numeric >> 8) & 0xFF;
+                    const profile_idc = (profile_level_id_numeric >> 16) & 0xFF;
+
+                    // Parse level based on level_idc and constraint set 3 flag.
+                    let level;
+
+                    switch (level_idc) {
+                        case Level1_1: {
+                            level = (profile_iop & ConstraintSet3Flag) !== 0 ? Level1_b : Level1_1;
+                            break;
+                        }
+                        case Level1:
+                        case Level1_2:
+                        case Level1_3:
+                        case Level2:
+                        case Level2_1:
+                        case Level2_2:
+                        case Level3:
+                        case Level3_1:
+                        case Level3_2:
+                        case Level4:
+                        case Level4_1:
+                        case Level4_2:
+                        case Level5:
+                        case Level5_1:
+                        case Level5_2: {
+                            level = level_idc;
+                            break;
+                        }
+                        // Unrecognized level_idc.
+                        default: {
+                            debug('parseProfileLevelId() | unrecognized level_idc:%s', level_idc);
+
+                            return null;
+                        }
+                    }
+
+                    // Parse profile_idc/profile_iop into a Profile enum.
+                    for (const pattern of ProfilePatterns) {
+                        if (
+                            profile_idc === pattern.profile_idc &&
+                            pattern.profile_iop.isMatch(profile_iop)
+                        ) {
+                            return new ProfileLevelId(pattern.profile, level);
+                        }
+                    }
+
+                    debug('parseProfileLevelId() | unrecognized profile_idc/profile_iop combination');
+
+                    return null;
+                };
+
+                /**
+                 * Returns canonical string representation as three hex bytes of the profile
+                 * level id, or returns nothing for invalid profile level ids.
+                 *
+                 * @param {ProfileLevelId} profile_level_id
+                 *
+                 * @returns {String}
+                 */
+                exports.profileLevelIdToString = function (profile_level_id) {
+                    // Handle special case level == 1b.
+                    if (profile_level_id.level == Level1_b) {
+                        switch (profile_level_id.profile) {
+                            case ProfileConstrainedBaseline: {
+                                return '42f00b';
+                            }
+                            case ProfileBaseline: {
+                                return '42100b';
+                            }
+                            case ProfileMain: {
+                                return '4d100b';
+                            }
+                            // Level 1_b is not allowed for other profiles.
+                            default: {
+                                debug(
+                                    'profileLevelIdToString() | Level 1_b not is allowed for profile:%s',
+                                    profile_level_id.profile);
+
+                                return null;
+                            }
+                        }
+                    }
+
+                    let profile_idc_iop_string;
+
+                    switch (profile_level_id.profile) {
+                        case ProfileConstrainedBaseline: {
+                            profile_idc_iop_string = '42e0';
+                            break;
+                        }
+                        case ProfileBaseline: {
+                            profile_idc_iop_string = '4200';
+                            break;
+                        }
+                        case ProfileMain: {
+                            profile_idc_iop_string = '4d00';
+                            break;
+                        }
+                        case ProfileConstrainedHigh: {
+                            profile_idc_iop_string = '640c';
+                            break;
+                        }
+                        case ProfileHigh: {
+                            profile_idc_iop_string = '6400';
+                            break;
+                        }
+                        default: {
+                            debug(
+                                'profileLevelIdToString() | unrecognized profile:%s',
+                                profile_level_id.profile);
+
+                            return null;
+                        }
+                    }
+
+                    let levelStr = (profile_level_id.level).toString(16);
+
+                    if (levelStr.length === 1)
+                        levelStr = `0${levelStr}`;
+
+                    return `${profile_idc_iop_string}${levelStr}`;
+                };
+
+                /**
+                 * Parse profile level id that is represented as a string of 3 hex bytes
+                 * contained in an SDP key-value map. A default profile level id will be
+                 * returned if the profile-level-id key is missing. Nothing will be returned if
+                 * the key is present but the string is invalid.
+                 *
+                 * @param {Object} [params={}] - Codec parameters object.
+                 *
+                 * @returns {ProfileLevelId}
+                 */
+                exports.parseSdpProfileLevelId = function (params = {}) {
+                    const profile_level_id = params['profile-level-id'];
+
+                    return !profile_level_id
+                        ? DefaultProfileLevelId
+                        : exports.parseProfileLevelId(profile_level_id);
+                };
+
+                /**
+                 * Returns true if the parameters have the same H264 profile, i.e. the same
+                 * H264 profile (Baseline, High, etc).
+                 *
+                 * @param {Object} [params1={}] - Codec parameters object.
+                 * @param {Object} [params2={}] - Codec parameters object.
+                 *
+                 * @returns {Boolean}
+                 */
+                exports.isSameProfile = function (params1 = {}, params2 = {}) {
+                    const profile_level_id_1 = exports.parseSdpProfileLevelId(params1);
+                    const profile_level_id_2 = exports.parseSdpProfileLevelId(params2);
+
+                    // Compare H264 profiles, but not levels.
+                    return Boolean(
+                        profile_level_id_1 &&
+                        profile_level_id_2 &&
+                        profile_level_id_1.profile === profile_level_id_2.profile
+                    );
+                };
+
+                /**
+                 * Generate codec parameters that will be used as answer in an SDP negotiation
+                 * based on local supported parameters and remote offered parameters. Both
+                 * local_supported_params and remote_offered_params represent sendrecv media
+                 * descriptions, i.e they are a mix of both encode and decode capabilities. In
+                 * theory, when the profile in local_supported_params represent a strict superset
+                 * of the profile in remote_offered_params, we could limit the profile in the
+                 * answer to the profile in remote_offered_params.
+                 *
+                 * However, to simplify the code, each supported H264 profile should be listed
+                 * explicitly in the list of local supported codecs, even if they are redundant.
+                 * Then each local codec in the list should be tested one at a time against the
+                 * remote codec, and only when the profiles are equal should this function be
+                 * called. Therefore, this function does not need to handle profile intersection,
+                 * and the profile of local_supported_params and remote_offered_params must be
+                 * equal before calling this function. The parameters that are used when
+                 * negotiating are the level part of profile-level-id and level-asymmetry-allowed.
+                 *
+                 * @param {Object} [local_supported_params={}]
+                 * @param {Object} [remote_offered_params={}]
+                 *
+                 * @returns {String} Canonical string representation as three hex bytes of the
+                 *   profile level id, or null if no one of the params have profile-level-id.
+                 *
+                 * @throws {TypeError} If Profile mismatch or invalid params.
+                 */
+                exports.generateProfileLevelIdForAnswer = function (
+                    local_supported_params = {},
+                    remote_offered_params = {}
+                ) {
+                    // If both local and remote params do not contain profile-level-id, they are
+                    // both using the default profile. In this case, don't return anything.
+                    if (
+                        !local_supported_params['profile-level-id'] &&
+                        !remote_offered_params['profile-level-id']
+                    ) {
+                        debug(
+                            'generateProfileLevelIdForAnswer() | no profile-level-id in local and remote params');
+
+                        return null;
+                    }
+
+                    // Parse profile-level-ids.
+                    const local_profile_level_id =
+                        exports.parseSdpProfileLevelId(local_supported_params);
+                    const remote_profile_level_id =
+                        exports.parseSdpProfileLevelId(remote_offered_params);
+
+                    // The local and remote codec must have valid and equal H264 Profiles.
+                    if (!local_profile_level_id)
+                        throw new TypeError('invalid local_profile_level_id');
+
+                    if (!remote_profile_level_id)
+                        throw new TypeError('invalid remote_profile_level_id');
+
+                    if (local_profile_level_id.profile !== remote_profile_level_id.profile)
+                        throw new TypeError('H264 Profile mismatch');
+
+                    // Parse level information.
+                    const level_asymmetry_allowed = (
+                        isLevelAsymmetryAllowed(local_supported_params) &&
+                        isLevelAsymmetryAllowed(remote_offered_params)
+                    );
+
+                    const local_level = local_profile_level_id.level;
+                    const remote_level = remote_profile_level_id.level;
+                    const min_level = minLevel(local_level, remote_level);
+
+                    // Determine answer level. When level asymmetry is not allowed, level upgrade
+                    // is not allowed, i.e., the level in the answer must be equal to or lower
+                    // than the level in the offer.
+                    const answer_level = level_asymmetry_allowed ? local_level : min_level;
+
+                    debug(
+                        'generateProfileLevelIdForAnswer() | result: [profile:%s, level:%s]',
+                        local_profile_level_id.profile, answer_level);
+
+                    // Return the resulting profile-level-id for the answer parameters.
+                    return exports.profileLevelIdToString(
+                        new ProfileLevelId(local_profile_level_id.profile, answer_level));
+                };
+
+// Convert a string of 8 characters into a byte where the positions containing
+// character c will have their bit set. For example, c = 'x', str = "x1xx0000"
+// will return 0b10110000.
+                function byteMaskString(c, str) {
+                    return (
+                        ((str[0] === c) << 7) | ((str[1] === c) << 6) | ((str[2] === c) << 5) |
+                        ((str[3] === c) << 4) | ((str[4] === c) << 3) | ((str[5] === c) << 2) |
+                        ((str[6] === c) << 1) | ((str[7] === c) << 0)
+                    );
+                }
+
+// Compare H264 levels and handle the level 1b case.
+                function isLessLevel(a, b) {
+                    if (a === Level1_b)
+                        return b !== Level1 && b !== Level1_b;
+
+                    if (b === Level1_b)
+                        return a !== Level1;
+
+                    return a < b;
+                }
+
+                function minLevel(a, b) {
+                    return isLessLevel(a, b) ? a : b;
+                }
+
+                function isLevelAsymmetryAllowed(params = {}) {
+                    const level_asymmetry_allowed = params['level-asymmetry-allowed'];
+
+                    return (
+                        level_asymmetry_allowed === 1 ||
+                        level_asymmetry_allowed === '1'
+                    );
+                }
+
+
+                /***/
+            }),
+
+            /***/ 514:
+            /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+                "use strict";
+
+                Object.defineProperty(exports, "__esModule", ({value: true}));
+                exports.Consumer = void 0;
+                const Logger_1 = __webpack_require__(562);
+                const EnhancedEventEmitter_1 = __webpack_require__(493);
+                const errors_1 = __webpack_require__(992);
+                const logger = new Logger_1.Logger('Consumer');
+
+                class Consumer extends EnhancedEventEmitter_1.EnhancedEventEmitter {
+                    constructor({id, localId, producerId, rtpReceiver, track, rtpParameters, appData}) {
+                        super();
+                        // Closed flag.
+                        this._closed = false;
+                        // Observer instance.
+                        this._observer = new EnhancedEventEmitter_1.EnhancedEventEmitter();
+                        logger.debug('constructor()');
+                        this._id = id;
+                        this._localId = localId;
+                        this._producerId = producerId;
+                        this._rtpReceiver = rtpReceiver;
+                        this._track = track;
+                        this._rtpParameters = rtpParameters;
+                        this._paused = !track.enabled;
+                        this._appData = appData || {};
+                        this._onTrackEnded = this._onTrackEnded.bind(this);
+                        this._handleTrack();
+                    }
+
+                    /**
+                     * Consumer id.
+                     */
+                    get id() {
+                        return this._id;
+                    }
+
+                    /**
+                     * Local id.
+                     */
+                    get localId() {
+                        return this._localId;
+                    }
+
+                    /**
+                     * Associated Producer id.
+                     */
+                    get producerId() {
+                        return this._producerId;
+                    }
+
+                    /**
+                     * Whether the Consumer is closed.
+                     */
+                    get closed() {
+                        return this._closed;
+                    }
+
+                    /**
+                     * Media kind.
+                     */
+                    get kind() {
+                        return this._track.kind;
+                    }
+
+                    /**
+                     * Associated RTCRtpReceiver.
+                     */
+                    get rtpReceiver() {
+                        return this._rtpReceiver;
+                    }
+
+                    /**
+                     * The associated track.
+                     */
+                    get track() {
+                        return this._track;
+                    }
+
+                    /**
+                     * RTP parameters.
+                     */
+                    get rtpParameters() {
+                        return this._rtpParameters;
+                    }
+
+                    /**
+                     * Whether the Consumer is paused.
+                     */
+                    get paused() {
+                        return this._paused;
+                    }
+
+                    /**
+                     * App custom data.
+                     */
+                    get appData() {
+                        return this._appData;
+                    }
+
+                    /**
+                     * Invalid setter.
+                     */
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    set appData(appData) {
+                        throw new Error('cannot override appData object');
+                    }
+
+                    get observer() {
+                        return this._observer;
+                    }
+
+                    /**
+                     * Closes the Consumer.
+                     */
+                    close() {
+                        if (this._closed)
+                            return;
+                        logger.debug('close()');
+                        this._closed = true;
+                        this._destroyTrack();
+                        this.emit('@close');
+                        // Emit observer event.
+                        this._observer.safeEmit('close');
+                    }
+
+                    /**
+                     * Transport was closed.
+                     */
+                    transportClosed() {
+                        if (this._closed)
+                            return;
+                        logger.debug('transportClosed()');
+                        this._closed = true;
+                        this._destroyTrack();
+                        this.safeEmit('transportclose');
+                        // Emit observer event.
+                        this._observer.safeEmit('close');
+                    }
+
+                    /**
+                     * Get associated RTCRtpReceiver stats.
+                     */
+                    async getStats() {
+                        if (this._closed)
+                            throw new errors_1.InvalidStateError('closed');
+                        return new Promise((resolve, reject) => {
+                            this.safeEmit('@getstats', resolve, reject);
+                        });
+                    }
+
+                    /**
+                     * Pauses receiving media.
+                     */
+                    pause() {
+                        logger.debug('pause()');
+                        if (this._closed) {
+                            logger.error('pause() | Consumer closed');
+                            return;
+                        }
+                        if (this._paused) {
+                            logger.debug('pause() | Consumer is already paused');
+                            return;
+                        }
+                        this._paused = true;
+                        this._track.enabled = false;
+                        this.emit('@pause');
+                        // Emit observer event.
+                        this._observer.safeEmit('pause');
+                    }
+
+                    /**
+                     * Resumes receiving media.
+                     */
+                    resume() {
+                        logger.debug('resume()');
+                        if (this._closed) {
+                            logger.error('resume() | Consumer closed');
+                            return;
+                        }
+                        if (!this._paused) {
+                            logger.debug('resume() | Consumer is already resumed');
+                            return;
+                        }
+                        this._paused = false;
+                        this._track.enabled = true;
+                        this.emit('@resume');
+                        // Emit observer event.
+                        this._observer.safeEmit('resume');
+                    }
+
+                    _onTrackEnded() {
+                        logger.debug('track "ended" event');
+                        this.safeEmit('trackended');
+                        // Emit observer event.
+                        this._observer.safeEmit('trackended');
+                    }
+
+                    _handleTrack() {
+                        this._track.addEventListener('ended', this._onTrackEnded);
+                    }
+
+                    _destroyTrack() {
+                        try {
+                            this._track.removeEventListener('ended', this._onTrackEnded);
+                            this._track.stop();
+                        } catch (error) {
+                        }
+                    }
+                }
+
+                exports.Consumer = Consumer;
+
+
+                /***/
+            }),
+
+            /***/ 623:
+            /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+                "use strict";
+
+                Object.defineProperty(exports, "__esModule", ({value: true}));
+                exports.DataConsumer = void 0;
+                const Logger_1 = __webpack_require__(562);
+                const EnhancedEventEmitter_1 = __webpack_require__(493);
+                const logger = new Logger_1.Logger('DataConsumer');
+
+                class DataConsumer extends EnhancedEventEmitter_1.EnhancedEventEmitter {
+                    constructor({id, dataProducerId, dataChannel, sctpStreamParameters, appData}) {
+                        super();
+                        // Closed flag.
+                        this._closed = false;
+                        // Observer instance.
+                        this._observer = new EnhancedEventEmitter_1.EnhancedEventEmitter();
+                        logger.debug('constructor()');
+                        this._id = id;
+                        this._dataProducerId = dataProducerId;
+                        this._dataChannel = dataChannel;
+                        this._sctpStreamParameters = sctpStreamParameters;
+                        this._appData = appData || {};
+                        this._handleDataChannel();
+                    }
+
+                    /**
+                     * DataConsumer id.
+                     */
+                    get id() {
+                        return this._id;
+                    }
+
+                    /**
+                     * Associated DataProducer id.
+                     */
+                    get dataProducerId() {
+                        return this._dataProducerId;
+                    }
+
+                    /**
+                     * Whether the DataConsumer is closed.
+                     */
+                    get closed() {
+                        return this._closed;
+                    }
+
+                    /**
+                     * SCTP stream parameters.
+                     */
+                    get sctpStreamParameters() {
+                        return this._sctpStreamParameters;
+                    }
+
+                    /**
+                     * DataChannel readyState.
+                     */
+                    get readyState() {
+                        return this._dataChannel.readyState;
+                    }
+
+                    /**
+                     * DataChannel label.
+                     */
+                    get label() {
+                        return this._dataChannel.label;
+                    }
+
+                    /**
+                     * DataChannel protocol.
+                     */
+                    get protocol() {
+                        return this._dataChannel.protocol;
+                    }
+
+                    /**
+                     * DataChannel binaryType.
+                     */
+                    get binaryType() {
+                        return this._dataChannel.binaryType;
+                    }
+
+                    /**
+                     * Set DataChannel binaryType.
+                     */
+                    set binaryType(binaryType) {
+                        this._dataChannel.binaryType = binaryType;
+                    }
+
+                    /**
+                     * App custom data.
+                     */
+                    get appData() {
+                        return this._appData;
+                    }
+
+                    /**
+                     * Invalid setter.
+                     */
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    set appData(appData) {
+                        throw new Error('cannot override appData object');
+                    }
+
+                    get observer() {
+                        return this._observer;
+                    }
+
+                    /**
+                     * Closes the DataConsumer.
+                     */
+                    close() {
+                        if (this._closed)
+                            return;
+                        logger.debug('close()');
+                        this._closed = true;
+                        this._dataChannel.close();
+                        this.emit('@close');
+                        // Emit observer event.
+                        this._observer.safeEmit('close');
+                    }
+
+                    /**
+                     * Transport was closed.
+                     */
+                    transportClosed() {
+                        if (this._closed)
+                            return;
+                        logger.debug('transportClosed()');
+                        this._closed = true;
+                        this._dataChannel.close();
+                        this.safeEmit('transportclose');
+                        // Emit observer event.
+                        this._observer.safeEmit('close');
+                    }
+
+                    _handleDataChannel() {
+                        this._dataChannel.addEventListener('open', () => {
+                            if (this._closed)
+                                return;
+                            logger.debug('DataChannel "open" event');
+                            this.safeEmit('open');
+                        });
+                        this._dataChannel.addEventListener('error', (event) => {
+                            if (this._closed)
+                                return;
+                            let {error} = event;
+                            if (!error)
+                                error = new Error('unknown DataChannel error');
+                            if (error.errorDetail === 'sctp-failure') {
+                                logger.error('DataChannel SCTP error [sctpCauseCode:%s]: %s', error.sctpCauseCode, error.message);
+                            } else {
+                                logger.error('DataChannel "error" event: %o', error);
+                            }
+                            this.safeEmit('error', error);
+                        });
+                        this._dataChannel.addEventListener('close', () => {
+                            if (this._closed)
+                                return;
+                            logger.warn('DataChannel "close" event');
+                            this._closed = true;
+                            this.emit('@close');
+                            this.safeEmit('close');
+                        });
+                        this._dataChannel.addEventListener('message', (event) => {
+                            if (this._closed)
+                                return;
+                            this.safeEmit('message', event.data);
+                        });
+                    }
+                }
+
+                exports.DataConsumer = DataConsumer;
+
+
+                /***/
+            }),
+
+            /***/ 504:
+            /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+                "use strict";
+
+                Object.defineProperty(exports, "__esModule", ({value: true}));
+                exports.DataProducer = void 0;
+                const Logger_1 = __webpack_require__(562);
+                const EnhancedEventEmitter_1 = __webpack_require__(493);
+                const errors_1 = __webpack_require__(992);
+                const logger = new Logger_1.Logger('DataProducer');
+
+                class DataProducer extends EnhancedEventEmitter_1.EnhancedEventEmitter {
+                    constructor({id, dataChannel, sctpStreamParameters, appData}) {
+                        super();
+                        // Closed flag.
+                        this._closed = false;
+                        // Observer instance.
+                        this._observer = new EnhancedEventEmitter_1.EnhancedEventEmitter();
+                        logger.debug('constructor()');
+                        this._id = id;
+                        this._dataChannel = dataChannel;
+                        this._sctpStreamParameters = sctpStreamParameters;
+                        this._appData = appData || {};
+                        this._handleDataChannel();
+                    }
+
+                    /**
+                     * DataProducer id.
+                     */
+                    get id() {
+                        return this._id;
+                    }
+
+                    /**
+                     * Whether the DataProducer is closed.
+                     */
+                    get closed() {
+                        return this._closed;
+                    }
+
+                    /**
+                     * SCTP stream parameters.
+                     */
+                    get sctpStreamParameters() {
+                        return this._sctpStreamParameters;
+                    }
+
+                    /**
+                     * DataChannel readyState.
+                     */
+                    get readyState() {
+                        return this._dataChannel.readyState;
+                    }
+
+                    /**
+                     * DataChannel label.
+                     */
+                    get label() {
+                        return this._dataChannel.label;
+                    }
+
+                    /**
+                     * DataChannel protocol.
+                     */
+                    get protocol() {
+                        return this._dataChannel.protocol;
+                    }
+
+                    /**
+                     * DataChannel bufferedAmount.
+                     */
+                    get bufferedAmount() {
+                        return this._dataChannel.bufferedAmount;
+                    }
+
+                    /**
+                     * DataChannel bufferedAmountLowThreshold.
+                     */
+                    get bufferedAmountLowThreshold() {
+                        return this._dataChannel.bufferedAmountLowThreshold;
+                    }
+
+                    /**
+                     * Set DataChannel bufferedAmountLowThreshold.
+                     */
+                    set bufferedAmountLowThreshold(bufferedAmountLowThreshold) {
+                        this._dataChannel.bufferedAmountLowThreshold = bufferedAmountLowThreshold;
+                    }
+
+                    /**
+                     * App custom data.
+                     */
+                    get appData() {
+                        return this._appData;
+                    }
+
+                    /**
+                     * Invalid setter.
+                     */
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    set appData(appData) {
+                        throw new Error('cannot override appData object');
+                    }
+
+                    get observer() {
+                        return this._observer;
+                    }
+
+                    /**
+                     * Closes the DataProducer.
+                     */
+                    close() {
+                        if (this._closed)
+                            return;
+                        logger.debug('close()');
+                        this._closed = true;
+                        this._dataChannel.close();
+                        this.emit('@close');
+                        // Emit observer event.
+                        this._observer.safeEmit('close');
+                    }
+
+                    /**
+                     * Transport was closed.
+                     */
+                    transportClosed() {
+                        if (this._closed)
+                            return;
+                        logger.debug('transportClosed()');
+                        this._closed = true;
+                        this._dataChannel.close();
+                        this.safeEmit('transportclose');
+                        // Emit observer event.
+                        this._observer.safeEmit('close');
+                    }
+
+                    /**
+                     * Send a message.
+                     *
+                     * @param {String|Blob|ArrayBuffer|ArrayBufferView} data.
+                     */
+                    send(data) {
+                        logger.debug('send()');
+                        if (this._closed)
+                            throw new errors_1.InvalidStateError('closed');
+                        this._dataChannel.send(data);
+                    }
+
+                    _handleDataChannel() {
+                        this._dataChannel.addEventListener('open', () => {
+                            if (this._closed)
+                                return;
+                            logger.debug('DataChannel "open" event');
+                            this.safeEmit('open');
+                        });
+                        this._dataChannel.addEventListener('error', (event) => {
+                            if (this._closed)
+                                return;
+                            let {error} = event;
+                            if (!error)
+                                error = new Error('unknown DataChannel error');
+                            if (error.errorDetail === 'sctp-failure') {
+                                logger.error('DataChannel SCTP error [sctpCauseCode:%s]: %s', error.sctpCauseCode, error.message);
+                            } else {
+                                logger.error('DataChannel "error" event: %o', error);
+                            }
+                            this.safeEmit('error', error);
+                        });
+                        this._dataChannel.addEventListener('close', () => {
+                            if (this._closed)
+                                return;
+                            logger.warn('DataChannel "close" event');
+                            this._closed = true;
+                            this.emit('@close');
+                            this.safeEmit('close');
+                        });
+                        this._dataChannel.addEventListener('message', () => {
+                            if (this._closed)
+                                return;
+                            logger.warn('DataChannel "message" event in a DataProducer, message discarded');
+                        });
+                        this._dataChannel.addEventListener('bufferedamountlow', () => {
+                            if (this._closed)
+                                return;
+                            this.safeEmit('bufferedamountlow');
+                        });
+                    }
+                }
+
+                exports.DataProducer = DataProducer;
+
+
+                /***/
+            }),
+
+            /***/ 120:
+            /***/ (function (__unused_webpack_module, exports, __webpack_require__) {
+
+                "use strict";
+
+                /* global RTCRtpTransceiver */
+                var __createBinding = (this && this.__createBinding) || (Object.create ? (function (o, m, k, k2) {
+                    if (k2 === undefined) k2 = k;
+                    var desc = Object.getOwnPropertyDescriptor(m, k);
+                    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+                        desc = {
+                            enumerable: true, get: function () {
+                                return m[k];
+                            }
+                        };
+                    }
+                    Object.defineProperty(o, k2, desc);
+                }) : (function (o, m, k, k2) {
+                    if (k2 === undefined) k2 = k;
+                    o[k2] = m[k];
+                }));
+                var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function (o, v) {
+                    Object.defineProperty(o, "default", {enumerable: true, value: v});
+                }) : function (o, v) {
+                    o["default"] = v;
+                });
+                var __importStar = (this && this.__importStar) || function (mod) {
+                    if (mod && mod.__esModule) return mod;
+                    var result = {};
+                    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+                    __setModuleDefault(result, mod);
+                    return result;
+                };
+                var __importDefault = (this && this.__importDefault) || function (mod) {
+                    return (mod && mod.__esModule) ? mod : {"default": mod};
+                };
+                Object.defineProperty(exports, "__esModule", ({value: true}));
+                exports.Device = exports.detectDevice = void 0;
+                const bowser_1 = __importDefault(__webpack_require__(206));
+                const Logger_1 = __webpack_require__(562);
+                const EnhancedEventEmitter_1 = __webpack_require__(493);
+                const errors_1 = __webpack_require__(992);
+                const utils = __importStar(__webpack_require__(347));
+                const ortc = __importStar(__webpack_require__(280));
+                const Transport_1 = __webpack_require__(202);
+                const Chrome74_1 = __webpack_require__(656);
+                const Chrome70_1 = __webpack_require__(372);
+                const Chrome67_1 = __webpack_require__(697);
+                const Chrome55_1 = __webpack_require__(564);
+                const Firefox60_1 = __webpack_require__(419);
+                const Safari12_1 = __webpack_require__(862);
+                const Safari11_1 = __webpack_require__(205);
+                const Edge11_1 = __webpack_require__(392);
+                const ReactNative_1 = __webpack_require__(414);
+                const logger = new Logger_1.Logger('Device');
+
+                function detectDevice() {
+                    // React-Native.
+                    // NOTE: react-native-webrtc >= 1.75.0 is required.
+                    if (typeof navigator === 'object' && navigator.product === 'ReactNative') {
+                        if (typeof RTCPeerConnection === 'undefined') {
+                            logger.warn('this._detectDevice() | unsupported ReactNative without RTCPeerConnection');
+                            return undefined;
+                        }
+                        logger.debug('this._detectDevice() | ReactNative handler chosen');
+                        return 'ReactNative';
+                    }
+                    // Browser.
+                    else if (typeof navigator === 'object' && typeof navigator.userAgent === 'string') {
+                        const ua = navigator.userAgent;
+                        const browser = bowser_1.default.getParser(ua);
+                        const engine = browser.getEngine();
+                        // Chrome, Chromium, and Edge.
+                        if (browser.satisfies({chrome: '>=74', chromium: '>=74', 'microsoft edge': '>=88'})) {
+                            return 'Chrome74';
+                        } else if (browser.satisfies({chrome: '>=70', chromium: '>=70'})) {
+                            return 'Chrome70';
+                        } else if (browser.satisfies({chrome: '>=67', chromium: '>=67'})) {
+                            return 'Chrome67';
+                        } else if (browser.satisfies({chrome: '>=55', chromium: '>=55'})) {
+                            return 'Chrome55';
+                        }
+                        // Firefox.
+                        else if (browser.satisfies({firefox: '>=60'})) {
+                            return 'Firefox60';
+                        }
+                        // Firefox on iOS.
+                        else if (browser.satisfies({ios: {OS: '>=14.3', firefox: '>=30.0'}})) {
+                            return 'Safari12';
+                        }
+                        // Safari with Unified-Plan support enabled.
+                        else if (browser.satisfies({safari: '>=12.0'}) &&
+                            typeof RTCRtpTransceiver !== 'undefined' &&
+                            RTCRtpTransceiver.prototype.hasOwnProperty('currentDirection')) {
+                            return 'Safari12';
+                        }
+                        // Safari with Plab-B support.
+                        else if (browser.satisfies({safari: '>=11'})) {
+                            return 'Safari11';
+                        }
+                        // Old Edge with ORTC support.
+                        else if (browser.satisfies({'microsoft edge': '>=11'}) &&
+                            browser.satisfies({'microsoft edge': '<=18'})) {
+                            return 'Edge11';
+                        }
+                        // Best effort for Chromium based browsers.
+                        else if (engine.name && engine.name.toLowerCase() === 'blink') {
+                            const match = ua.match(/(?:(?:Chrome|Chromium))[ /](\w+)/i);
+                            if (match) {
+                                const version = Number(match[1]);
+                                if (version >= 74) {
+                                    return 'Chrome74';
+                                } else if (version >= 70) {
+                                    return 'Chrome70';
+                                } else if (version >= 67) {
+                                    return 'Chrome67';
+                                } else {
+                                    return 'Chrome55';
+                                }
+                            } else {
+                                return 'Chrome74';
+                            }
+                        }
+                        // Unsupported browser.
+                        else {
+                            logger.warn('this._detectDevice() | browser not supported [name:%s, version:%s]', browser.getBrowserName(), browser.getBrowserVersion());
+                            return undefined;
+                        }
+                    }
+                    // Unknown device.
+                    else {
+                        logger.warn('this._detectDevice() | unknown device');
+                        return undefined;
+                    }
+                }
+
+                exports.detectDevice = detectDevice;
+
+                class Device {
+                    /**
+                     * Create a new Device to connect to mediasoup server.
+                     *
+                     * @throws {UnsupportedError} if device is not supported.
+                     */
+                    constructor({handlerName, handlerFactory, Handler} = {}) {
+                        // Loaded flag.
+                        this._loaded = false;
+                        // Observer instance.
+                        this._observer = new EnhancedEventEmitter_1.EnhancedEventEmitter();
+                        logger.debug('constructor()');
+                        // Handle deprecated option.
+                        if (Handler) {
+                            logger.warn('constructor() | Handler option is DEPRECATED, use handlerName or handlerFactory instead');
+                            if (typeof Handler === 'string')
+                                handlerName = Handler;
+                            else
+                                throw new TypeError('non string Handler option no longer supported, use handlerFactory instead');
+                        }
+                        if (handlerName && handlerFactory) {
+                            throw new TypeError('just one of handlerName or handlerInterface can be given');
+                        }
+                        if (handlerFactory) {
+                            this._handlerFactory = handlerFactory;
+                        } else {
+                            if (handlerName) {
+                                logger.debug('constructor() | handler given: %s', handlerName);
+                            } else {
+                                handlerName = detectDevice();
+                                if (handlerName)
+                                    logger.debug('constructor() | detected handler: %s', handlerName);
+                                else
+                                    throw new errors_1.UnsupportedError('device not supported');
+                            }
+                            switch (handlerName) {
+                                case 'Chrome74':
+                                    this._handlerFactory = Chrome74_1.Chrome74.createFactory();
+                                    break;
+                                case 'Chrome70':
+                                    this._handlerFactory = Chrome70_1.Chrome70.createFactory();
+                                    break;
+                                case 'Chrome67':
+                                    this._handlerFactory = Chrome67_1.Chrome67.createFactory();
+                                    break;
+                                case 'Chrome55':
+                                    this._handlerFactory = Chrome55_1.Chrome55.createFactory();
+                                    break;
+                                case 'Firefox60':
+                                    this._handlerFactory = Firefox60_1.Firefox60.createFactory();
+                                    break;
+                                case 'Safari12':
+                                    this._handlerFactory = Safari12_1.Safari12.createFactory();
+                                    break;
+                                case 'Safari11':
+                                    this._handlerFactory = Safari11_1.Safari11.createFactory();
+                                    break;
+                                case 'Edge11':
+                                    this._handlerFactory = Edge11_1.Edge11.createFactory();
+                                    break;
+                                case 'ReactNative':
+                                    this._handlerFactory = ReactNative_1.ReactNative.createFactory();
+                                    break;
+                                default:
+                                    throw new TypeError(`unknown handlerName "${handlerName}"`);
+                            }
+                        }
+                        // Create a temporal handler to get its name.
+                        const handler = this._handlerFactory();
+                        this._handlerName = handler.name;
+                        handler.close();
+                        this._extendedRtpCapabilities = undefined;
+                        this._recvRtpCapabilities = undefined;
+                        this._canProduceByKind =
+                            {
+                                audio: false,
+                                video: false
+                            };
+                        this._sctpCapabilities = undefined;
+                    }
+
+                    /**
+                     * The RTC handler name.
+                     */
+                    get handlerName() {
+                        return this._handlerName;
+                    }
+
+                    /**
+                     * Whether the Device is loaded.
+                     */
+                    get loaded() {
+                        return this._loaded;
+                    }
+
+                    /**
+                     * RTP capabilities of the Device for receiving media.
+                     *
+                     * @throws {InvalidStateError} if not loaded.
+                     */
+                    get rtpCapabilities() {
+                        if (!this._loaded)
+                            throw new errors_1.InvalidStateError('not loaded');
+                        return this._recvRtpCapabilities;
+                    }
+
+                    /**
+                     * SCTP capabilities of the Device.
+                     *
+                     * @throws {InvalidStateError} if not loaded.
+                     */
+                    get sctpCapabilities() {
+                        if (!this._loaded)
+                            throw new errors_1.InvalidStateError('not loaded');
+                        return this._sctpCapabilities;
+                    }
+
+                    get observer() {
+                        return this._observer;
+                    }
+
+                    /**
+                     * Initialize the Device.
+                     */
+                    async load({routerRtpCapabilities}) {
+                        logger.debug('load() [routerRtpCapabilities:%o]', routerRtpCapabilities);
+                        routerRtpCapabilities = utils.clone(routerRtpCapabilities, undefined);
+                        // Temporal handler to get its capabilities.
+                        let handler;
+                        try {
+                            if (this._loaded)
+                                throw new errors_1.InvalidStateError('already loaded');
+                            // This may throw.
+                            ortc.validateRtpCapabilities(routerRtpCapabilities);
+                            handler = this._handlerFactory();
+                            const nativeRtpCapabilities = await handler.getNativeRtpCapabilities();
+                            logger.debug('load() | got native RTP capabilities:%o', nativeRtpCapabilities);
+                            // This may throw.
+                            ortc.validateRtpCapabilities(nativeRtpCapabilities);
+                            // Get extended RTP capabilities.
+                            this._extendedRtpCapabilities = ortc.getExtendedRtpCapabilities(nativeRtpCapabilities, routerRtpCapabilities);
+                            logger.debug('load() | got extended RTP capabilities:%o', this._extendedRtpCapabilities);
+                            // Check whether we can produce audio/video.
+                            this._canProduceByKind.audio =
+                                ortc.canSend('audio', this._extendedRtpCapabilities);
+                            this._canProduceByKind.video =
+                                ortc.canSend('video', this._extendedRtpCapabilities);
+                            // Generate our receiving RTP capabilities for receiving media.
+                            this._recvRtpCapabilities =
+                                ortc.getRecvRtpCapabilities(this._extendedRtpCapabilities);
+                            // This may throw.
+                            ortc.validateRtpCapabilities(this._recvRtpCapabilities);
+                            logger.debug('load() | got receiving RTP capabilities:%o', this._recvRtpCapabilities);
+                            // Generate our SCTP capabilities.
+                            this._sctpCapabilities = await handler.getNativeSctpCapabilities();
+                            logger.debug('load() | got native SCTP capabilities:%o', this._sctpCapabilities);
+                            // This may throw.
+                            ortc.validateSctpCapabilities(this._sctpCapabilities);
+                            logger.debug('load() succeeded');
+                            this._loaded = true;
+                            handler.close();
+                        } catch (error) {
+                            if (handler)
+                                handler.close();
+                            throw error;
+                        }
+                    }
+
+                    /**
+                     * Whether we can produce audio/video.
+                     *
+                     * @throws {InvalidStateError} if not loaded.
+                     * @throws {TypeError} if wrong arguments.
+                     */
+                    canProduce(kind) {
+                        if (!this._loaded)
+                            throw new errors_1.InvalidStateError('not loaded');
+                        else if (kind !== 'audio' && kind !== 'video')
+                            throw new TypeError(`invalid kind "${kind}"`);
+                        return this._canProduceByKind[kind];
+                    }
+
+                    /**
+                     * Creates a Transport for sending media.
+                     *
+                     * @throws {InvalidStateError} if not loaded.
+                     * @throws {TypeError} if wrong arguments.
+                     */
+                    createSendTransport({
+                                            id,
+                                            iceParameters,
+                                            iceCandidates,
+                                            dtlsParameters,
+                                            sctpParameters,
+                                            iceServers,
+                                            iceTransportPolicy,
+                                            additionalSettings,
+                                            proprietaryConstraints,
+                                            appData
+                                        }) {
+                        logger.debug('createSendTransport()');
+                        return this._createTransport({
+                            direction: 'send',
+                            id: id,
+                            iceParameters: iceParameters,
+                            iceCandidates: iceCandidates,
+                            dtlsParameters: dtlsParameters,
+                            sctpParameters: sctpParameters,
+                            iceServers: iceServers,
+                            iceTransportPolicy: iceTransportPolicy,
+                            additionalSettings: additionalSettings,
+                            proprietaryConstraints: proprietaryConstraints,
+                            appData: appData
+                        });
+                    }
+
+                    /**
+                     * Creates a Transport for receiving media.
+                     *
+                     * @throws {InvalidStateError} if not loaded.
+                     * @throws {TypeError} if wrong arguments.
+                     */
+                    createRecvTransport({
+                                            id,
+                                            iceParameters,
+                                            iceCandidates,
+                                            dtlsParameters,
+                                            sctpParameters,
+                                            iceServers,
+                                            iceTransportPolicy,
+                                            additionalSettings,
+                                            proprietaryConstraints,
+                                            appData
+                                        }) {
+                        logger.debug('createRecvTransport()');
+                        return this._createTransport({
+                            direction: 'recv',
+                            id: id,
+                            iceParameters: iceParameters,
+                            iceCandidates: iceCandidates,
+                            dtlsParameters: dtlsParameters,
+                            sctpParameters: sctpParameters,
+                            iceServers: iceServers,
+                            iceTransportPolicy: iceTransportPolicy,
+                            additionalSettings: additionalSettings,
+                            proprietaryConstraints: proprietaryConstraints,
+                            appData: appData
+                        });
+                    }
+
+                    _createTransport({
+                                         direction,
+                                         id,
+                                         iceParameters,
+                                         iceCandidates,
+                                         dtlsParameters,
+                                         sctpParameters,
+                                         iceServers,
+                                         iceTransportPolicy,
+                                         additionalSettings,
+                                         proprietaryConstraints,
+                                         appData
+                                     }) {
+                        if (!this._loaded)
+                            throw new errors_1.InvalidStateError('not loaded');
+                        else if (typeof id !== 'string')
+                            throw new TypeError('missing id');
+                        else if (typeof iceParameters !== 'object')
+                            throw new TypeError('missing iceParameters');
+                        else if (!Array.isArray(iceCandidates))
+                            throw new TypeError('missing iceCandidates');
+                        else if (typeof dtlsParameters !== 'object')
+                            throw new TypeError('missing dtlsParameters');
+                        else if (sctpParameters && typeof sctpParameters !== 'object')
+                            throw new TypeError('wrong sctpParameters');
+                        else if (appData && typeof appData !== 'object')
+                            throw new TypeError('if given, appData must be an object');
+                        // Create a new Transport.
+                        const transport = new Transport_1.Transport({
+                            direction,
+                            id,
+                            iceParameters,
+                            iceCandidates,
+                            dtlsParameters,
+                            sctpParameters,
+                            iceServers,
+                            iceTransportPolicy,
+                            additionalSettings,
+                            proprietaryConstraints,
+                            appData,
+                            handlerFactory: this._handlerFactory,
+                            extendedRtpCapabilities: this._extendedRtpCapabilities,
+                            canProduceByKind: this._canProduceByKind
+                        });
+                        // Emit observer event.
+                        this._observer.safeEmit('newtransport', transport);
+                        return transport;
+                    }
+                }
+
+                exports.Device = Device;
+
+
+                /***/
+            }),
+
+            /***/ 493:
+            /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+                "use strict";
+
+                Object.defineProperty(exports, "__esModule", ({value: true}));
+                exports.EnhancedEventEmitter = void 0;
+                const events_1 = __webpack_require__(187);
+                const Logger_1 = __webpack_require__(562);
+                const logger = new Logger_1.Logger('EnhancedEventEmitter');
+
+                class EnhancedEventEmitter extends events_1.EventEmitter {
+                    constructor() {
+                        super();
+                        this.setMaxListeners(Infinity);
+                    }
+
+                    emit(eventName, ...args) {
+                        return super.emit(eventName, ...args);
+                    }
+
+                    /**
+                     * Special addition to the EventEmitter API.
+                     */
+                    safeEmit(eventName, ...args) {
+                        const numListeners = super.listenerCount(eventName);
+                        try {
+                            return super.emit(eventName, ...args);
+                        } catch (error) {
+                            logger.error('safeEmit() | event listener threw an error [eventName:%s]:%o', eventName, error);
+                            return Boolean(numListeners);
+                        }
+                    }
+
+                    on(eventName, listener) {
+                        super.on(eventName, listener);
+                        return this;
+                    }
+
+                    off(eventName, listener) {
+                        super.off(eventName, listener);
+                        return this;
+                    }
+
+                    addListener(eventName, listener) {
+                        super.on(eventName, listener);
+                        return this;
+                    }
+
+                    prependListener(eventName, listener) {
+                        super.prependListener(eventName, listener);
+                        return this;
+                    }
+
+                    once(eventName, listener) {
+                        super.once(eventName, listener);
+                        return this;
+                    }
+
+                    prependOnceListener(eventName, listener) {
+                        super.prependOnceListener(eventName, listener);
+                        return this;
+                    }
+
+                    removeListener(eventName, listener) {
+                        super.off(eventName, listener);
+                        return this;
+                    }
+
+                    removeAllListeners(eventName) {
+                        super.removeAllListeners(eventName);
+                        return this;
+                    }
+
+                    listenerCount(eventName) {
+                        return super.listenerCount(eventName);
+                    }
+
+                    listeners(eventName) {
+                        return super.listeners(eventName);
+                    }
+
+                    rawListeners(eventName) {
+                        return super.rawListeners(eventName);
+                    }
+                }
+
+                exports.EnhancedEventEmitter = EnhancedEventEmitter;
+
+
+                /***/
+            }),
+
+            /***/ 562:
+            /***/ (function (__unused_webpack_module, exports, __webpack_require__) {
+
+                "use strict";
+
+                var __importDefault = (this && this.__importDefault) || function (mod) {
+                    return (mod && mod.__esModule) ? mod : {"default": mod};
+                };
+                Object.defineProperty(exports, "__esModule", ({value: true}));
+                exports.Logger = void 0;
+                const debug_1 = __importDefault(__webpack_require__(227));
+                const APP_NAME = 'mediasoup-client';
+
+                class Logger {
+                    constructor(prefix) {
+                        if (prefix) {
+                            this._debug = (0, debug_1.default)(`${APP_NAME}:${prefix}`);
+                            this._warn = (0, debug_1.default)(`${APP_NAME}:WARN:${prefix}`);
+                            this._error = (0, debug_1.default)(`${APP_NAME}:ERROR:${prefix}`);
+                        } else {
+                            this._debug = (0, debug_1.default)(APP_NAME);
+                            this._warn = (0, debug_1.default)(`${APP_NAME}:WARN`);
+                            this._error = (0, debug_1.default)(`${APP_NAME}:ERROR`);
+                        }
+                        /* eslint-disable no-console */
+                        this._debug.log = console.info.bind(console);
+                        this._warn.log = console.warn.bind(console);
+                        this._error.log = console.error.bind(console);
+                        /* eslint-enable no-console */
+                    }
+
+                    get debug() {
+                        return this._debug;
+                    }
+
+                    get warn() {
+                        return this._warn;
+                    }
+
+                    get error() {
+                        return this._error;
+                    }
+                }
+
+                exports.Logger = Logger;
+
+
+                /***/
+            }),
+
+            /***/ 569:
+            /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+                "use strict";
+
+                Object.defineProperty(exports, "__esModule", ({value: true}));
+                exports.Producer = void 0;
+                const Logger_1 = __webpack_require__(562);
+                const EnhancedEventEmitter_1 = __webpack_require__(493);
+                const errors_1 = __webpack_require__(992);
+                const logger = new Logger_1.Logger('Producer');
+
+                class Producer extends EnhancedEventEmitter_1.EnhancedEventEmitter {
+                    constructor({id, localId, rtpSender, track, rtpParameters, stopTracks, disableTrackOnPause, zeroRtpOnPause, appData}) {
+                        super();
+                        // Closed flag.
+                        this._closed = false;
+                        // Observer instance.
+                        this._observer = new EnhancedEventEmitter_1.EnhancedEventEmitter();
+                        logger.debug('constructor()');
+                        this._id = id;
+                        this._localId = localId;
+                        this._rtpSender = rtpSender;
+                        this._track = track;
+                        this._kind = track.kind;
+                        this._rtpParameters = rtpParameters;
+                        this._paused = disableTrackOnPause ? !track.enabled : false;
+                        this._maxSpatialLayer = undefined;
+                        this._stopTracks = stopTracks;
+                        this._disableTrackOnPause = disableTrackOnPause;
+                        this._zeroRtpOnPause = zeroRtpOnPause;
+                        this._appData = appData || {};
+                        this._onTrackEnded = this._onTrackEnded.bind(this);
+                        // NOTE: Minor issue. If zeroRtpOnPause is true, we cannot emit the
+                        // '@replacetrack' event here, so RTCRtpSender.track won't be null.
+                        this._handleTrack();
+                    }
+
+                    /**
+                     * Producer id.
+                     */
+                    get id() {
+                        return this._id;
+                    }
+
+                    /**
+                     * Local id.
+                     */
+                    get localId() {
+                        return this._localId;
+                    }
+
+                    /**
+                     * Whether the Producer is closed.
+                     */
+                    get closed() {
+                        return this._closed;
+                    }
+
+                    /**
+                     * Media kind.
+                     */
+                    get kind() {
+                        return this._kind;
+                    }
+
+                    /**
+                     * Associated RTCRtpSender.
+                     */
+                    get rtpSender() {
+                        return this._rtpSender;
+                    }
+
+                    /**
+                     * The associated track.
+                     */
+                    get track() {
+                        return this._track;
+                    }
+
+                    /**
+                     * RTP parameters.
+                     */
+                    get rtpParameters() {
+                        return this._rtpParameters;
+                    }
+
+                    /**
+                     * Whether the Producer is paused.
+                     */
+                    get paused() {
+                        return this._paused;
+                    }
+
+                    /**
+                     * Max spatial layer.
+                     *
+                     * @type {Number | undefined}
+                     */
+                    get maxSpatialLayer() {
+                        return this._maxSpatialLayer;
+                    }
+
+                    /**
+                     * App custom data.
+                     */
+                    get appData() {
+                        return this._appData;
+                    }
+
+                    /**
+                     * Invalid setter.
+                     */
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    set appData(appData) {
+                        throw new Error('cannot override appData object');
+                    }
+
+                    get observer() {
+                        return this._observer;
+                    }
+
+                    /**
+                     * Closes the Producer.
+                     */
+                    close() {
+                        if (this._closed)
+                            return;
+                        logger.debug('close()');
+                        this._closed = true;
+                        this._destroyTrack();
+                        this.emit('@close');
+                        // Emit observer event.
+                        this._observer.safeEmit('close');
+                    }
+
+                    /**
+                     * Transport was closed.
+                     */
+                    transportClosed() {
+                        if (this._closed)
+                            return;
+                        logger.debug('transportClosed()');
+                        this._closed = true;
+                        this._destroyTrack();
+                        this.safeEmit('transportclose');
+                        // Emit observer event.
+                        this._observer.safeEmit('close');
+                    }
+
+                    /**
+                     * Get associated RTCRtpSender stats.
+                     */
+                    async getStats() {
+                        if (this._closed)
+                            throw new errors_1.InvalidStateError('closed');
+                        return new Promise((resolve, reject) => {
+                            this.safeEmit('@getstats', resolve, reject);
+                        });
+                    }
+
+                    /**
+                     * Pauses sending media.
+                     */
+                    pause() {
+                        logger.debug('pause()');
+                        if (this._closed) {
+                            logger.error('pause() | Producer closed');
+                            return;
+                        }
+                        this._paused = true;
+                        if (this._track && this._disableTrackOnPause) {
+                            this._track.enabled = false;
+                        }
+                        if (this._zeroRtpOnPause) {
+                            new Promise((resolve, reject) => {
+                                this.safeEmit('@pause', resolve, reject);
+                            }).catch(() => {
+                            });
+                        }
+                        // Emit observer event.
+                        this._observer.safeEmit('pause');
+                    }
+
+                    /**
+                     * Resumes sending media.
+                     */
+                    resume() {
+                        logger.debug('resume()');
+                        if (this._closed) {
+                            logger.error('resume() | Producer closed');
+                            return;
+                        }
+                        this._paused = false;
+                        if (this._track && this._disableTrackOnPause) {
+                            this._track.enabled = true;
+                        }
+                        if (this._zeroRtpOnPause) {
+                            new Promise((resolve, reject) => {
+                                this.safeEmit('@resume', resolve, reject);
+                            }).catch(() => {
+                            });
+                        }
+                        // Emit observer event.
+                        this._observer.safeEmit('resume');
+                    }
+
+                    /**
+                     * Replaces the current track with a new one or null.
+                     */
+                    async replaceTrack({track}) {
+                        logger.debug('replaceTrack() [track:%o]', track);
+                        if (this._closed) {
+                            // This must be done here. Otherwise there is no chance to stop the given
+                            // track.
+                            if (track && this._stopTracks) {
+                                try {
+                                    track.stop();
+                                } catch (error) {
+                                }
+                            }
+                            throw new errors_1.InvalidStateError('closed');
+                        } else if (track && track.readyState === 'ended') {
+                            throw new errors_1.InvalidStateError('track ended');
+                        }
+                        // Do nothing if this is the same track as the current handled one.
+                        if (track === this._track) {
+                            logger.debug('replaceTrack() | same track, ignored');
+                            return;
+                        }
+                        await new Promise((resolve, reject) => {
+                            this.safeEmit('@replacetrack', track, resolve, reject);
+                        });
+                        // Destroy the previous track.
+                        this._destroyTrack();
+                        // Set the new track.
+                        this._track = track;
+                        // If this Producer was paused/resumed and the state of the new
+                        // track does not match, fix it.
+                        if (this._track && this._disableTrackOnPause) {
+                            if (!this._paused)
+                                this._track.enabled = true;
+                            else if (this._paused)
+                                this._track.enabled = false;
+                        }
+                        // Handle the effective track.
+                        this._handleTrack();
+                    }
+
+                    /**
+                     * Sets the video max spatial layer to be sent.
+                     */
+                    async setMaxSpatialLayer(spatialLayer) {
+                        if (this._closed)
+                            throw new errors_1.InvalidStateError('closed');
+                        else if (this._kind !== 'video')
+                            throw new errors_1.UnsupportedError('not a video Producer');
+                        else if (typeof spatialLayer !== 'number')
+                            throw new TypeError('invalid spatialLayer');
+                        if (spatialLayer === this._maxSpatialLayer)
+                            return;
+                        await new Promise((resolve, reject) => {
+                            this.safeEmit('@setmaxspatiallayer', spatialLayer, resolve, reject);
+                        }).catch(() => {
+                        });
+                        this._maxSpatialLayer = spatialLayer;
+                    }
+
+                    async setRtpEncodingParameters(params) {
+                        if (this._closed)
+                            throw new errors_1.InvalidStateError('closed');
+                        else if (typeof params !== 'object')
+                            throw new TypeError('invalid params');
+                        await new Promise((resolve, reject) => {
+                            this.safeEmit('@setrtpencodingparameters', params, resolve, reject);
+                        });
+                    }
+
+                    _onTrackEnded() {
+                        logger.debug('track "ended" event');
+                        this.safeEmit('trackended');
+                        // Emit observer event.
+                        this._observer.safeEmit('trackended');
+                    }
+
+                    _handleTrack() {
+                        if (!this._track)
+                            return;
+                        this._track.addEventListener('ended', this._onTrackEnded);
+                    }
+
+                    _destroyTrack() {
+                        if (!this._track)
+                            return;
+                        try {
+                            this._track.removeEventListener('ended', this._onTrackEnded);
+                            // Just stop the track unless the app set stopTracks: false.
+                            if (this._stopTracks)
+                                this._track.stop();
+                        } catch (error) {
+                        }
+                    }
+                }
+
+                exports.Producer = Producer;
+
+
+                /***/
+            }),
+
+            /***/ 879:
+            /***/ ((__unused_webpack_module, exports) => {
+
+                "use strict";
+
+                /**
+                 * The RTP capabilities define what mediasoup or an endpoint can receive at
+                 * media level.
+                 */
+                Object.defineProperty(exports, "__esModule", ({value: true}));
+
+
+                /***/
+            }),
+
+            /***/ 669:
+            /***/ ((__unused_webpack_module, exports) => {
+
+                "use strict";
+
+                Object.defineProperty(exports, "__esModule", ({value: true}));
+
+
+                /***/
+            }),
+
+            /***/ 202:
+            /***/ (function (__unused_webpack_module, exports, __webpack_require__) {
+
+                "use strict";
+
+                var __createBinding = (this && this.__createBinding) || (Object.create ? (function (o, m, k, k2) {
+                    if (k2 === undefined) k2 = k;
+                    var desc = Object.getOwnPropertyDescriptor(m, k);
+                    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+                        desc = {
+                            enumerable: true, get: function () {
+                                return m[k];
+                            }
+                        };
+                    }
+                    Object.defineProperty(o, k2, desc);
+                }) : (function (o, m, k, k2) {
+                    if (k2 === undefined) k2 = k;
+                    o[k2] = m[k];
+                }));
+                var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function (o, v) {
+                    Object.defineProperty(o, "default", {enumerable: true, value: v});
+                }) : function (o, v) {
+                    o["default"] = v;
+                });
+                var __importStar = (this && this.__importStar) || function (mod) {
+                    if (mod && mod.__esModule) return mod;
+                    var result = {};
+                    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+                    __setModuleDefault(result, mod);
+                    return result;
+                };
+                Object.defineProperty(exports, "__esModule", ({value: true}));
+                exports.Transport = void 0;
+                const awaitqueue_1 = __webpack_require__(186);
+                const Logger_1 = __webpack_require__(562);
+                const EnhancedEventEmitter_1 = __webpack_require__(493);
+                const errors_1 = __webpack_require__(992);
+                const utils = __importStar(__webpack_require__(347));
+                const ortc = __importStar(__webpack_require__(280));
+                const Producer_1 = __webpack_require__(569);
+                const Consumer_1 = __webpack_require__(514);
+                const DataProducer_1 = __webpack_require__(504);
+                const DataConsumer_1 = __webpack_require__(623);
+                const logger = new Logger_1.Logger('Transport');
+
+                class ConsumerCreationTask {
+                    constructor(consumerOptions) {
+                        this.consumerOptions = consumerOptions;
+                        this.promise = new Promise((resolve, reject) => {
+                            this.resolve = resolve;
+                            this.reject = reject;
+                        });
+                    }
+                }
+
+                class Transport extends EnhancedEventEmitter_1.EnhancedEventEmitter {
+                    constructor({
+                                    direction,
+                                    id,
+                                    iceParameters,
+                                    iceCandidates,
+                                    dtlsParameters,
+                                    sctpParameters,
+                                    iceServers,
+                                    iceTransportPolicy,
+                                    additionalSettings,
+                                    proprietaryConstraints,
+                                    appData,
+                                    handlerFactory,
+                                    extendedRtpCapabilities,
+                                    canProduceByKind
+                                }) {
+                        super();
+                        // Closed flag.
+                        this._closed = false;
+                        // Transport connection state.
+                        this._connectionState = 'new';
+                        // Map of Producers indexed by id.
+                        this._producers = new Map();
+                        // Map of Consumers indexed by id.
+                        this._consumers = new Map();
+                        // Map of DataProducers indexed by id.
+                        this._dataProducers = new Map();
+                        // Map of DataConsumers indexed by id.
+                        this._dataConsumers = new Map();
+                        // Whether the Consumer for RTP probation has been created.
+                        this._probatorConsumerCreated = false;
+                        // AwaitQueue instance to make async tasks happen sequentially.
+                        this._awaitQueue = new awaitqueue_1.AwaitQueue({ClosedErrorClass: errors_1.InvalidStateError});
+                        // Consumer creation tasks awaiting to be processed.
+                        this._pendingConsumerTasks = [];
+                        // Consumer creation in progress flag.
+                        this._consumerCreationInProgress = false;
+                        // Consumers pending to be paused.
+                        this._pendingPauseConsumers = new Map();
+                        // Consumer pause in progress flag.
+                        this._consumerPauseInProgress = false;
+                        // Consumers pending to be resumed.
+                        this._pendingResumeConsumers = new Map();
+                        // Consumer resume in progress flag.
+                        this._consumerResumeInProgress = false;
+                        // Consumers pending to be closed.
+                        this._pendingCloseConsumers = new Map();
+                        // Consumer close in progress flag.
+                        this._consumerCloseInProgress = false;
+                        // Observer instance.
+                        this._observer = new EnhancedEventEmitter_1.EnhancedEventEmitter();
+                        logger.debug('constructor() [id:%s, direction:%s]', id, direction);
+                        this._id = id;
+                        this._direction = direction;
+                        this._extendedRtpCapabilities = extendedRtpCapabilities;
+                        this._canProduceByKind = canProduceByKind;
+                        this._maxSctpMessageSize =
+                            sctpParameters ? sctpParameters.maxMessageSize : null;
+                        // Clone and sanitize additionalSettings.
+                        additionalSettings = utils.clone(additionalSettings, {});
+                        delete additionalSettings.iceServers;
+                        delete additionalSettings.iceTransportPolicy;
+                        delete additionalSettings.bundlePolicy;
+                        delete additionalSettings.rtcpMuxPolicy;
+                        delete additionalSettings.sdpSemantics;
+                        this._handler = handlerFactory();
+                        this._handler.run({
+                            direction,
+                            iceParameters,
+                            iceCandidates,
+                            dtlsParameters,
+                            sctpParameters,
+                            iceServers,
+                            iceTransportPolicy,
+                            additionalSettings,
+                            proprietaryConstraints,
+                            extendedRtpCapabilities
+                        });
+                        this._appData = appData || {};
+                        this._handleHandler();
+                    }
+
+                    /**
+                     * Transport id.
+                     */
+                    get id() {
+                        return this._id;
+                    }
+
+                    /**
+                     * Whether the Transport is closed.
+                     */
+                    get closed() {
+                        return this._closed;
+                    }
+
+                    /**
+                     * Transport direction.
+                     */
+                    get direction() {
+                        return this._direction;
+                    }
+
+                    /**
+                     * RTC handler instance.
+                     */
+                    get handler() {
+                        return this._handler;
+                    }
+
+                    /**
+                     * Connection state.
+                     */
+                    get connectionState() {
+                        return this._connectionState;
+                    }
+
+                    /**
+                     * App custom data.
+                     */
+                    get appData() {
+                        return this._appData;
+                    }
+
+                    /**
+                     * Invalid setter.
+                     */
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    set appData(appData) {
+                        throw new Error('cannot override appData object');
+                    }
+
+                    get observer() {
+                        return this._observer;
+                    }
+
+                    /**
+                     * Close the Transport.
+                     */
+                    close() {
+                        if (this._closed)
+                            return;
+                        logger.debug('close()');
+                        this._closed = true;
+                        // Close the AwaitQueue.
+                        this._awaitQueue.close();
+                        // Close the handler.
+                        this._handler.close();
+                        // Close all Producers.
+                        for (const producer of this._producers.values()) {
+                            producer.transportClosed();
+                        }
+                        this._producers.clear();
+                        // Close all Consumers.
+                        for (const consumer of this._consumers.values()) {
+                            consumer.transportClosed();
+                        }
+                        this._consumers.clear();
+                        // Close all DataProducers.
+                        for (const dataProducer of this._dataProducers.values()) {
+                            dataProducer.transportClosed();
+                        }
+                        this._dataProducers.clear();
+                        // Close all DataConsumers.
+                        for (const dataConsumer of this._dataConsumers.values()) {
+                            dataConsumer.transportClosed();
+                        }
+                        this._dataConsumers.clear();
+                        // Emit observer event.
+                        this._observer.safeEmit('close');
+                    }
+
+                    /**
+                     * Get associated Transport (RTCPeerConnection) stats.
+                     *
+                     * @returns {RTCStatsReport}
+                     */
+                    async getStats() {
+                        if (this._closed)
+                            throw new errors_1.InvalidStateError('closed');
+                        return this._handler.getTransportStats();
+                    }
+
+                    /**
+                     * Restart ICE connection.
+                     */
+                    async restartIce({iceParameters}) {
+                        logger.debug('restartIce()');
+                        if (this._closed)
+                            throw new errors_1.InvalidStateError('closed');
+                        else if (!iceParameters)
+                            throw new TypeError('missing iceParameters');
+                        // Enqueue command.
+                        return this._awaitQueue.push(async () => this._handler.restartIce(iceParameters), 'transport.restartIce()');
+                    }
+
+                    /**
+                     * Update ICE servers.
+                     */
+                    async updateIceServers({iceServers} = {}) {
+                        logger.debug('updateIceServers()');
+                        if (this._closed)
+                            throw new errors_1.InvalidStateError('closed');
+                        else if (!Array.isArray(iceServers))
+                            throw new TypeError('missing iceServers');
+                        // Enqueue command.
+                        return this._awaitQueue.push(async () => this._handler.updateIceServers(iceServers), 'transport.updateIceServers()');
+                    }
+
+                    /**
+                     * Create a Producer.
+                     */
+                    async produce({
+                                      track,
+                                      encodings,
+                                      codecOptions,
+                                      codec,
+                                      stopTracks = true,
+                                      disableTrackOnPause = true,
+                                      zeroRtpOnPause = false,
+                                      appData = {}
+                                  } = {}) {
+                        logger.debug('produce() [track:%o]', track);
+                        if (!track)
+                            throw new TypeError('missing track');
+                        else if (this._direction !== 'send')
+                            throw new errors_1.UnsupportedError('not a sending Transport');
+                        else if (!this._canProduceByKind[track.kind])
+                            throw new errors_1.UnsupportedError(`cannot produce ${track.kind}`);
+                        else if (track.readyState === 'ended')
+                            throw new errors_1.InvalidStateError('track ended');
+                        else if (this.listenerCount('connect') === 0 && this._connectionState === 'new')
+                            throw new TypeError('no "connect" listener set into this transport');
+                        else if (this.listenerCount('produce') === 0)
+                            throw new TypeError('no "produce" listener set into this transport');
+                        else if (appData && typeof appData !== 'object')
+                            throw new TypeError('if given, appData must be an object');
+                        // Enqueue command.
+                        return this._awaitQueue.push(async () => {
+                            let normalizedEncodings;
+                            if (encodings && !Array.isArray(encodings)) {
+                                throw TypeError('encodings must be an array');
+                            } else if (encodings && encodings.length === 0) {
+                                normalizedEncodings = undefined;
+                            } else if (encodings) {
+                                normalizedEncodings = encodings
+                                    .map((encoding) => {
+                                        const normalizedEncoding = {active: true};
+                                        if (encoding.active === false)
+                                            normalizedEncoding.active = false;
+                                        if (typeof encoding.dtx === 'boolean')
+                                            normalizedEncoding.dtx = encoding.dtx;
+                                        if (typeof encoding.scalabilityMode === 'string')
+                                            normalizedEncoding.scalabilityMode = encoding.scalabilityMode;
+                                        if (typeof encoding.scaleResolutionDownBy === 'number')
+                                            normalizedEncoding.scaleResolutionDownBy = encoding.scaleResolutionDownBy;
+                                        if (typeof encoding.maxBitrate === 'number')
+                                            normalizedEncoding.maxBitrate = encoding.maxBitrate;
+                                        if (typeof encoding.maxFramerate === 'number')
+                                            normalizedEncoding.maxFramerate = encoding.maxFramerate;
+                                        if (typeof encoding.adaptivePtime === 'boolean')
+                                            normalizedEncoding.adaptivePtime = encoding.adaptivePtime;
+                                        if (typeof encoding.priority === 'string')
+                                            normalizedEncoding.priority = encoding.priority;
+                                        if (typeof encoding.networkPriority === 'string')
+                                            normalizedEncoding.networkPriority = encoding.networkPriority;
+                                        return normalizedEncoding;
+                                    });
+                            }
+                            const {localId, rtpParameters, rtpSender} = await this._handler.send({
+                                track,
+                                encodings: normalizedEncodings,
+                                codecOptions,
+                                codec
+                            });
+                            try {
+                                // This will fill rtpParameters's missing fields with default values.
+                                ortc.validateRtpParameters(rtpParameters);
+                                const {id} = await new Promise((resolve, reject) => {
+                                    this.safeEmit('produce', {
+                                        kind: track.kind,
+                                        rtpParameters,
+                                        appData
+                                    }, resolve, reject);
+                                });
+                                const producer = new Producer_1.Producer({
+                                    id,
+                                    localId,
+                                    rtpSender,
+                                    track,
+                                    rtpParameters,
+                                    stopTracks,
+                                    disableTrackOnPause,
+                                    zeroRtpOnPause,
+                                    appData
+                                });
+                                this._producers.set(producer.id, producer);
+                                this._handleProducer(producer);
+                                // Emit observer event.
+                                this._observer.safeEmit('newproducer', producer);
+                                return producer;
+                            } catch (error) {
+                                this._handler.stopSending(localId)
+                                    .catch(() => {
+                                    });
+                                throw error;
+                            }
+                        }, 'transport.produce()')
+                            // This catch is needed to stop the given track if the command above
+                            // failed due to closed Transport.
+                            .catch((error) => {
+                                if (stopTracks) {
+                                    try {
+                                        track.stop();
+                                    } catch (error2) {
+                                    }
+                                }
+                                throw error;
+                            });
+                    }
+
+                    /**
+                     * Create a Consumer to consume a remote Producer.
+                     */
+                    async consume({id, producerId, kind, rtpParameters, appData = {}}) {
+                        logger.debug('consume()');
+                        rtpParameters = utils.clone(rtpParameters, undefined);
+                        if (this._closed)
+                            throw new errors_1.InvalidStateError('closed');
+                        else if (this._direction !== 'recv')
+                            throw new errors_1.UnsupportedError('not a receiving Transport');
+                        else if (typeof id !== 'string')
+                            throw new TypeError('missing id');
+                        else if (typeof producerId !== 'string')
+                            throw new TypeError('missing producerId');
+                        else if (kind !== 'audio' && kind !== 'video')
+                            throw new TypeError(`invalid kind '${kind}'`);
+                        else if (this.listenerCount('connect') === 0 && this._connectionState === 'new')
+                            throw new TypeError('no "connect" listener set into this transport');
+                        else if (appData && typeof appData !== 'object')
+                            throw new TypeError('if given, appData must be an object');
+                        // Ensure the device can consume it.
+                        const canConsume = ortc.canReceive(rtpParameters, this._extendedRtpCapabilities);
+                        if (!canConsume)
+                            throw new errors_1.UnsupportedError('cannot consume this Producer');
+                        const consumerCreationTask = new ConsumerCreationTask({
+                            id,
+                            producerId,
+                            kind,
+                            rtpParameters,
+                            appData
+                        });
+                        // Store the Consumer creation task.
+                        this._pendingConsumerTasks.push(consumerCreationTask);
+                        // There is no Consumer creation in progress, create it now.
+                        if (this._consumerCreationInProgress === false) {
+                            this._createPendingConsumers();
+                        }
+                        return consumerCreationTask.promise;
+                    }
+
+                    /**
+                     * Create a DataProducer
+                     */
+                    async produceData({ordered = true, maxPacketLifeTime, maxRetransmits, label = '', protocol = '', appData = {}} = {}) {
+                        logger.debug('produceData()');
+                        if (this._direction !== 'send')
+                            throw new errors_1.UnsupportedError('not a sending Transport');
+                        else if (!this._maxSctpMessageSize)
+                            throw new errors_1.UnsupportedError('SCTP not enabled by remote Transport');
+                        else if (this.listenerCount('connect') === 0 && this._connectionState === 'new')
+                            throw new TypeError('no "connect" listener set into this transport');
+                        else if (this.listenerCount('producedata') === 0)
+                            throw new TypeError('no "producedata" listener set into this transport');
+                        else if (appData && typeof appData !== 'object')
+                            throw new TypeError('if given, appData must be an object');
+                        if (maxPacketLifeTime || maxRetransmits)
+                            ordered = false;
+                        // Enqueue command.
+                        return this._awaitQueue.push(async () => {
+                            const {dataChannel, sctpStreamParameters} = await this._handler.sendDataChannel({
+                                ordered,
+                                maxPacketLifeTime,
+                                maxRetransmits,
+                                label,
+                                protocol
+                            });
+                            // This will fill sctpStreamParameters's missing fields with default values.
+                            ortc.validateSctpStreamParameters(sctpStreamParameters);
+                            const {id} = await new Promise((resolve, reject) => {
+                                this.safeEmit('producedata', {
+                                    sctpStreamParameters,
+                                    label,
+                                    protocol,
+                                    appData
+                                }, resolve, reject);
+                            });
+                            const dataProducer = new DataProducer_1.DataProducer({id, dataChannel, sctpStreamParameters, appData});
+                            this._dataProducers.set(dataProducer.id, dataProducer);
+                            this._handleDataProducer(dataProducer);
+                            // Emit observer event.
+                            this._observer.safeEmit('newdataproducer', dataProducer);
+                            return dataProducer;
+                        }, 'transport.produceData()');
+                    }
+
+                    /**
+                     * Create a DataConsumer
+                     */
+                    async consumeData({id, dataProducerId, sctpStreamParameters, label = '', protocol = '', appData = {}}) {
+                        logger.debug('consumeData()');
+                        sctpStreamParameters = utils.clone(sctpStreamParameters, undefined);
+                        if (this._closed)
+                            throw new errors_1.InvalidStateError('closed');
+                        else if (this._direction !== 'recv')
+                            throw new errors_1.UnsupportedError('not a receiving Transport');
+                        else if (!this._maxSctpMessageSize)
+                            throw new errors_1.UnsupportedError('SCTP not enabled by remote Transport');
+                        else if (typeof id !== 'string')
+                            throw new TypeError('missing id');
+                        else if (typeof dataProducerId !== 'string')
+                            throw new TypeError('missing dataProducerId');
+                        else if (this.listenerCount('connect') === 0 && this._connectionState === 'new')
+                            throw new TypeError('no "connect" listener set into this transport');
+                        else if (appData && typeof appData !== 'object')
+                            throw new TypeError('if given, appData must be an object');
+                        // This may throw.
+                        ortc.validateSctpStreamParameters(sctpStreamParameters);
+                        // Enqueue command.
+                        return this._awaitQueue.push(async () => {
+                            const {dataChannel} = await this._handler.receiveDataChannel({
+                                sctpStreamParameters,
+                                label,
+                                protocol
+                            });
+                            const dataConsumer = new DataConsumer_1.DataConsumer({
+                                id,
+                                dataProducerId,
+                                dataChannel,
+                                sctpStreamParameters,
+                                appData
+                            });
+                            this._dataConsumers.set(dataConsumer.id, dataConsumer);
+                            this._handleDataConsumer(dataConsumer);
+                            // Emit observer event.
+                            this._observer.safeEmit('newdataconsumer', dataConsumer);
+                            return dataConsumer;
+                        }, 'transport.consumeData()');
+                    }
+
+                    // This method is guaranteed to never throw.
+                    async _createPendingConsumers() {
+                        this._consumerCreationInProgress = true;
+                        this._awaitQueue.push(async () => {
+                            if (this._pendingConsumerTasks.length === 0) {
+                                logger.debug('_createPendingConsumers() | there is no Consumer to be created');
+                                return;
+                            }
+                            const pendingConsumerTasks = [...this._pendingConsumerTasks];
+                            // Clear pending Consumer tasks.
+                            this._pendingConsumerTasks = [];
+                            // Video Consumer in order to create the probator.
+                            let videoConsumerForProbator = undefined;
+                            // Fill options list.
+                            const optionsList = [];
+                            for (const task of pendingConsumerTasks) {
+                                const {id, kind, rtpParameters} = task.consumerOptions;
+                                optionsList.push({
+                                    trackId: id,
+                                    kind: kind,
+                                    rtpParameters
+                                });
+                            }
+                            try {
+                                const results = await this._handler.receive(optionsList);
+                                for (let idx = 0; idx < results.length; idx++) {
+                                    const task = pendingConsumerTasks[idx];
+                                    const result = results[idx];
+                                    const {id, producerId, kind, rtpParameters, appData} = task.consumerOptions;
+                                    const {localId, rtpReceiver, track} = result;
+                                    const consumer = new Consumer_1.Consumer({
+                                        id: id,
+                                        localId,
+                                        producerId: producerId,
+                                        rtpReceiver,
+                                        track,
+                                        rtpParameters,
+                                        appData
+                                    });
+                                    this._consumers.set(consumer.id, consumer);
+                                    this._handleConsumer(consumer);
+                                    // If this is the first video Consumer and the Consumer for RTP probation
+                                    // has not yet been created, it's time to create it.
+                                    if (!this._probatorConsumerCreated && !videoConsumerForProbator && kind === 'video') {
+                                        videoConsumerForProbator = consumer;
+                                    }
+                                    // Emit observer event.
+                                    this._observer.safeEmit('newconsumer', consumer);
+                                    task.resolve(consumer);
+                                }
+                            } catch (error) {
+                                for (const task of pendingConsumerTasks) {
+                                    task.reject(error);
+                                }
+                            }
+                            // If RTP probation must be handled, do it now.
+                            if (videoConsumerForProbator) {
+                                try {
+                                    const probatorRtpParameters = ortc.generateProbatorRtpParameters(videoConsumerForProbator.rtpParameters);
+                                    await this._handler.receive([{
+                                        trackId: 'probator',
+                                        kind: 'video',
+                                        rtpParameters: probatorRtpParameters
+                                    }]);
+                                    logger.debug('_createPendingConsumers() | Consumer for RTP probation created');
+                                    this._probatorConsumerCreated = true;
+                                } catch (error) {
+                                    logger.error('_createPendingConsumers() | failed to create Consumer for RTP probation:%o', error);
+                                }
+                            }
+                        }, 'transport._createPendingConsumers()')
+                            .then(() => {
+                                this._consumerCreationInProgress = false;
+                                // There are pending Consumer tasks, enqueue their creation.
+                                if (this._pendingConsumerTasks.length > 0) {
+                                    this._createPendingConsumers();
+                                }
+                            })
+                            // NOTE: We only get here when the await queue is closed.
+                            .catch(() => {
+                            });
+                    }
+
+                    _pausePendingConsumers() {
+                        this._consumerPauseInProgress = true;
+                        this._awaitQueue.push(async () => {
+                            if (this._pendingPauseConsumers.size === 0) {
+                                logger.debug('_pausePendingConsumers() | there is no Consumer to be paused');
+                                return;
+                            }
+                            const pendingPauseConsumers = Array.from(this._pendingPauseConsumers.values());
+                            // Clear pending pause Consumer map.
+                            this._pendingPauseConsumers.clear();
+                            try {
+                                const localIds = pendingPauseConsumers
+                                    .map((consumer) => consumer.localId);
+                                await this._handler.pauseReceiving(localIds);
+                            } catch (error) {
+                                logger.error('_pausePendingConsumers() | failed to pause Consumers:', error);
+                            }
+                        }, 'transport._pausePendingConsumers')
+                            .then(() => {
+                                this._consumerPauseInProgress = false;
+                                // There are pending Consumers to be paused, do it.
+                                if (this._pendingPauseConsumers.size > 0) {
+                                    this._pausePendingConsumers();
+                                }
+                            })
+                            // NOTE: We only get here when the await queue is closed.
+                            .catch(() => {
+                            });
+                    }
+
+                    _resumePendingConsumers() {
+                        this._consumerResumeInProgress = true;
+                        this._awaitQueue.push(async () => {
+                            if (this._pendingResumeConsumers.size === 0) {
+                                logger.debug('_resumePendingConsumers() | there is no Consumer to be resumed');
+                                return;
+                            }
+                            const pendingResumeConsumers = Array.from(this._pendingResumeConsumers.values());
+                            // Clear pending resume Consumer map.
+                            this._pendingResumeConsumers.clear();
+                            try {
+                                const localIds = pendingResumeConsumers
+                                    .map((consumer) => consumer.localId);
+                                await this._handler.resumeReceiving(localIds);
+                            } catch (error) {
+                                logger.error('_resumePendingConsumers() | failed to resume Consumers:', error);
+                            }
+                        }, 'transport._resumePendingConsumers')
+                            .then(() => {
+                                this._consumerResumeInProgress = false;
+                                // There are pending Consumer to be resumed, do it.
+                                if (this._pendingResumeConsumers.size > 0) {
+                                    this._resumePendingConsumers();
+                                }
+                            })
+                            // NOTE: We only get here when the await queue is closed.
+                            .catch(() => {
+                            });
+                    }
+
+                    _closePendingConsumers() {
+                        this._consumerCloseInProgress = true;
+                        this._awaitQueue.push(async () => {
+                            if (this._pendingCloseConsumers.size === 0) {
+                                logger.debug('_closePendingConsumers() | there is no Consumer to be closed');
+                                return;
+                            }
+                            const pendingCloseConsumers = Array.from(this._pendingCloseConsumers.values());
+                            // Clear pending close Consumer map.
+                            this._pendingCloseConsumers.clear();
+                            try {
+                                await this._handler.stopReceiving(pendingCloseConsumers.map((consumer) => consumer.localId));
+                            } catch (error) {
+                                logger.error('_closePendingConsumers() | failed to close Consumers:', error);
+                            }
+                        }, 'transport._closePendingConsumers')
+                            .then(() => {
+                                this._consumerCloseInProgress = false;
+                                // There are pending Consumer to be resumed, do it.
+                                if (this._pendingCloseConsumers.size > 0) {
+                                    this._closePendingConsumers();
+                                }
+                            })
+                            // NOTE: We only get here when the await queue is closed.
+                            .catch(() => {
+                            });
+                    }
+
+                    _handleHandler() {
+                        const handler = this._handler;
+                        handler.on('@connect', ({dtlsParameters}, callback, errback) => {
+                            if (this._closed) {
+                                errback(new errors_1.InvalidStateError('closed'));
+                                return;
+                            }
+                            this.safeEmit('connect', {dtlsParameters}, callback, errback);
+                        });
+                        handler.on('@connectionstatechange', (connectionState) => {
+                            if (connectionState === this._connectionState)
+                                return;
+                            logger.debug('connection state changed to %s', connectionState);
+                            this._connectionState = connectionState;
+                            if (!this._closed)
+                                this.safeEmit('connectionstatechange', connectionState);
+                        });
+                    }
+
+                    _handleProducer(producer) {
+                        producer.on('@close', () => {
+                            this._producers.delete(producer.id);
+                            if (this._closed)
+                                return;
+                            this._awaitQueue.push(async () => this._handler.stopSending(producer.localId), 'producer @close event')
+                                .catch((error) => logger.warn('producer.close() failed:%o', error));
+                        });
+                        producer.on('@pause', (callback, errback) => {
+                            this._awaitQueue.push(async () => this._handler.pauseSending(producer.localId), 'producer @pause event')
+                                .then(callback)
+                                .catch(errback);
+                        });
+                        producer.on('@resume', (callback, errback) => {
+                            this._awaitQueue.push(async () => this._handler.resumeSending(producer.localId), 'producer @resume event')
+                                .then(callback)
+                                .catch(errback);
+                        });
+                        producer.on('@replacetrack', (track, callback, errback) => {
+                            this._awaitQueue.push(async () => this._handler.replaceTrack(producer.localId, track), 'producer @replacetrack event')
+                                .then(callback)
+                                .catch(errback);
+                        });
+                        producer.on('@setmaxspatiallayer', (spatialLayer, callback, errback) => {
+                            this._awaitQueue.push(async () => (this._handler.setMaxSpatialLayer(producer.localId, spatialLayer)), 'producer @setmaxspatiallayer event')
+                                .then(callback)
+                                .catch(errback);
+                        });
+                        producer.on('@setrtpencodingparameters', (params, callback, errback) => {
+                            this._awaitQueue.push(async () => (this._handler.setRtpEncodingParameters(producer.localId, params)), 'producer @setrtpencodingparameters event')
+                                .then(callback)
+                                .catch(errback);
+                        });
+                        producer.on('@getstats', (callback, errback) => {
+                            if (this._closed)
+                                return errback(new errors_1.InvalidStateError('closed'));
+                            this._handler.getSenderStats(producer.localId)
+                                .then(callback)
+                                .catch(errback);
+                        });
+                    }
+
+                    _handleConsumer(consumer) {
+                        consumer.on('@close', () => {
+                            this._consumers.delete(consumer.id);
+                            this._pendingPauseConsumers.delete(consumer.id);
+                            this._pendingResumeConsumers.delete(consumer.id);
+                            if (this._closed)
+                                return;
+                            // Store the Consumer into the close list.
+                            this._pendingCloseConsumers.set(consumer.id, consumer);
+                            // There is no Consumer close in progress, do it now.
+                            if (this._consumerCloseInProgress === false) {
+                                this._closePendingConsumers();
+                            }
+                        });
+                        consumer.on('@pause', () => {
+                            // If Consumer is pending to be resumed, remove from pending resume list.
+                            if (this._pendingResumeConsumers.has(consumer.id)) {
+                                this._pendingResumeConsumers.delete(consumer.id);
+                            }
+                            // Store the Consumer into the pending list.
+                            this._pendingPauseConsumers.set(consumer.id, consumer);
+                            // There is no Consumer pause in progress, do it now.
+                            if (this._consumerPauseInProgress === false) {
+                                this._pausePendingConsumers();
+                            }
+                        });
+                        consumer.on('@resume', () => {
+                            // If Consumer is pending to be paused, remove from pending pause list.
+                            if (this._pendingPauseConsumers.has(consumer.id)) {
+                                this._pendingPauseConsumers.delete(consumer.id);
+                            }
+                            // Store the Consumer into the pending list.
+                            this._pendingResumeConsumers.set(consumer.id, consumer);
+                            // There is no Consumer resume in progress, do it now.
+                            if (this._consumerResumeInProgress === false) {
+                                this._resumePendingConsumers();
+                            }
+                        });
+                        consumer.on('@getstats', (callback, errback) => {
+                            if (this._closed)
+                                return errback(new errors_1.InvalidStateError('closed'));
+                            this._handler.getReceiverStats(consumer.localId)
+                                .then(callback)
+                                .catch(errback);
+                        });
+                    }
+
+                    _handleDataProducer(dataProducer) {
+                        dataProducer.on('@close', () => {
+                            this._dataProducers.delete(dataProducer.id);
+                        });
+                    }
+
+                    _handleDataConsumer(dataConsumer) {
+                        dataConsumer.on('@close', () => {
+                            this._dataConsumers.delete(dataConsumer.id);
+                        });
+                    }
+                }
+
+                exports.Transport = Transport;
+
+
+                /***/
+            }),
+
+            /***/ 992:
+            /***/ ((__unused_webpack_module, exports) => {
+
+                "use strict";
+
+                Object.defineProperty(exports, "__esModule", ({value: true}));
+                exports.InvalidStateError = exports.UnsupportedError = void 0;
+
+                /**
+                 * Error indicating not support for something.
+                 */
+                class UnsupportedError extends Error {
+                    constructor(message) {
+                        super(message);
+                        this.name = 'UnsupportedError';
+                        if (Error.hasOwnProperty('captureStackTrace')) // Just in V8.
+                        {
+                            // @ts-ignore
+                            Error.captureStackTrace(this, UnsupportedError);
+                        } else {
+                            this.stack = (new Error(message)).stack;
+                        }
+                    }
+                }
+
+                exports.UnsupportedError = UnsupportedError;
+
+                /**
+                 * Error produced when calling a method in an invalid state.
+                 */
+                class InvalidStateError extends Error {
+                    constructor(message) {
+                        super(message);
+                        this.name = 'InvalidStateError';
+                        if (Error.hasOwnProperty('captureStackTrace')) // Just in V8.
+                        {
+                            // @ts-ignore
+                            Error.captureStackTrace(this, InvalidStateError);
+                        } else {
+                            this.stack = (new Error(message)).stack;
+                        }
+                    }
+                }
+
+                exports.InvalidStateError = InvalidStateError;
+
+
+                /***/
+            }),
+
+            /***/ 564:
+            /***/ (function (__unused_webpack_module, exports, __webpack_require__) {
+
+                "use strict";
+
+                var __createBinding = (this && this.__createBinding) || (Object.create ? (function (o, m, k, k2) {
+                    if (k2 === undefined) k2 = k;
+                    var desc = Object.getOwnPropertyDescriptor(m, k);
+                    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+                        desc = {
+                            enumerable: true, get: function () {
+                                return m[k];
+                            }
+                        };
+                    }
+                    Object.defineProperty(o, k2, desc);
+                }) : (function (o, m, k, k2) {
+                    if (k2 === undefined) k2 = k;
+                    o[k2] = m[k];
+                }));
+                var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function (o, v) {
+                    Object.defineProperty(o, "default", {enumerable: true, value: v});
+                }) : function (o, v) {
+                    o["default"] = v;
+                });
+                var __importStar = (this && this.__importStar) || function (mod) {
+                    if (mod && mod.__esModule) return mod;
+                    var result = {};
+                    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+                    __setModuleDefault(result, mod);
+                    return result;
+                };
+                Object.defineProperty(exports, "__esModule", ({value: true}));
+                exports.Chrome55 = void 0;
+                const sdpTransform = __importStar(__webpack_require__(766));
+                const Logger_1 = __webpack_require__(562);
+                const errors_1 = __webpack_require__(992);
+                const utils = __importStar(__webpack_require__(347));
+                const ortc = __importStar(__webpack_require__(280));
+                const sdpCommonUtils = __importStar(__webpack_require__(267));
+                const sdpPlanBUtils = __importStar(__webpack_require__(875));
+                const HandlerInterface_1 = __webpack_require__(316);
+                const RemoteSdp_1 = __webpack_require__(910);
+                const logger = new Logger_1.Logger('Chrome55');
+                const SCTP_NUM_STREAMS = {OS: 1024, MIS: 1024};
+
+                class Chrome55 extends HandlerInterface_1.HandlerInterface {
+                    constructor() {
+                        super();
+                        // Local stream for sending.
+                        this._sendStream = new MediaStream();
+                        // Map of sending MediaStreamTracks indexed by localId.
+                        this._mapSendLocalIdTrack = new Map();
+                        // Next sending localId.
+                        this._nextSendLocalId = 0;
+                        // Map of MID, RTP parameters and RTCRtpReceiver indexed by local id.
+                        // Value is an Object with mid, rtpParameters and rtpReceiver.
+                        this._mapRecvLocalIdInfo = new Map();
+                        // Whether a DataChannel m=application section has been created.
+                        this._hasDataChannelMediaSection = false;
+                        // Sending DataChannel id value counter. Incremented for each new DataChannel.
+                        this._nextSendSctpStreamId = 0;
+                        // Got transport local and remote parameters.
+                        this._transportReady = false;
+                    }
+
+                    /**
+                     * Creates a factory function.
+                     */
+                    static createFactory() {
+                        return () => new Chrome55();
+                    }
+
+                    get name() {
+                        return 'Chrome55';
+                    }
+
+                    close() {
+                        logger.debug('close()');
+                        // Close RTCPeerConnection.
+                        if (this._pc) {
+                            try {
+                                this._pc.close();
+                            } catch (error) {
+                            }
+                        }
+                        this.emit('@close');
+                    }
+
+                    async getNativeRtpCapabilities() {
+                        logger.debug('getNativeRtpCapabilities()');
+                        const pc = new RTCPeerConnection({
+                            iceServers: [],
+                            iceTransportPolicy: 'all',
+                            bundlePolicy: 'max-bundle',
+                            rtcpMuxPolicy: 'require',
+                            sdpSemantics: 'plan-b'
+                        });
+                        try {
+                            const offer = await pc.createOffer({
+                                offerToReceiveAudio: true,
+                                offerToReceiveVideo: true
+                            });
+                            try {
+                                pc.close();
+                            } catch (error) {
+                            }
+                            const sdpObject = sdpTransform.parse(offer.sdp);
+                            const nativeRtpCapabilities = sdpCommonUtils.extractRtpCapabilities({sdpObject});
+                            return nativeRtpCapabilities;
+                        } catch (error) {
+                            try {
+                                pc.close();
+                            } catch (error2) {
+                            }
+                            throw error;
+                        }
+                    }
+
+                    async getNativeSctpCapabilities() {
+                        logger.debug('getNativeSctpCapabilities()');
+                        return {
+                            numStreams: SCTP_NUM_STREAMS
+                        };
+                    }
+
+                    run({
+                            direction,
+                            iceParameters,
+                            iceCandidates,
+                            dtlsParameters,
+                            sctpParameters,
+                            iceServers,
+                            iceTransportPolicy,
+                            additionalSettings,
+                            proprietaryConstraints,
+                            extendedRtpCapabilities
+                        }) {
+                        logger.debug('run()');
+                        this._direction = direction;
+                        this._remoteSdp = new RemoteSdp_1.RemoteSdp({
+                            iceParameters,
+                            iceCandidates,
+                            dtlsParameters,
+                            sctpParameters,
+                            planB: true
+                        });
+                        this._sendingRtpParametersByKind =
+                            {
+                                audio: ortc.getSendingRtpParameters('audio', extendedRtpCapabilities),
+                                video: ortc.getSendingRtpParameters('video', extendedRtpCapabilities)
+                            };
+                        this._sendingRemoteRtpParametersByKind =
+                            {
+                                audio: ortc.getSendingRemoteRtpParameters('audio', extendedRtpCapabilities),
+                                video: ortc.getSendingRemoteRtpParameters('video', extendedRtpCapabilities)
+                            };
+                        if (dtlsParameters.role && dtlsParameters.role !== 'auto') {
+                            this._forcedLocalDtlsRole = dtlsParameters.role === 'server'
+                                ? 'client'
+                                : 'server';
+                        }
+                        this._pc = new RTCPeerConnection({
+                            iceServers: iceServers || [],
+                            iceTransportPolicy: iceTransportPolicy || 'all',
+                            bundlePolicy: 'max-bundle',
+                            rtcpMuxPolicy: 'require',
+                            sdpSemantics: 'plan-b',
+                            ...additionalSettings
+                        }, proprietaryConstraints);
+                        // Handle RTCPeerConnection connection status.
+                        this._pc.addEventListener('iceconnectionstatechange', () => {
+                            switch (this._pc.iceConnectionState) {
+                                case 'checking':
+                                    this.emit('@connectionstatechange', 'connecting');
+                                    break;
+                                case 'connected':
+                                case 'completed':
+                                    this.emit('@connectionstatechange', 'connected');
+                                    break;
+                                case 'failed':
+                                    this.emit('@connectionstatechange', 'failed');
+                                    break;
+                                case 'disconnected':
+                                    this.emit('@connectionstatechange', 'disconnected');
+                                    break;
+                                case 'closed':
+                                    this.emit('@connectionstatechange', 'closed');
+                                    break;
+                            }
+                        });
+                    }
+
+                    async updateIceServers(iceServers) {
+                        logger.debug('updateIceServers()');
+                        const configuration = this._pc.getConfiguration();
+                        configuration.iceServers = iceServers;
+                        this._pc.setConfiguration(configuration);
+                    }
+
+                    async restartIce(iceParameters) {
+                        logger.debug('restartIce()');
+                        // Provide the remote SDP handler with new remote ICE parameters.
+                        this._remoteSdp.updateIceParameters(iceParameters);
+                        if (!this._transportReady)
+                            return;
+                        if (this._direction === 'send') {
+                            const offer = await this._pc.createOffer({iceRestart: true});
+                            logger.debug('restartIce() | calling pc.setLocalDescription() [offer:%o]', offer);
+                            await this._pc.setLocalDescription(offer);
+                            const answer = {type: 'answer', sdp: this._remoteSdp.getSdp()};
+                            logger.debug('restartIce() | calling pc.setRemoteDescription() [answer:%o]', answer);
+                            await this._pc.setRemoteDescription(answer);
+                        } else {
+                            const offer = {type: 'offer', sdp: this._remoteSdp.getSdp()};
+                            logger.debug('restartIce() | calling pc.setRemoteDescription() [offer:%o]', offer);
+                            await this._pc.setRemoteDescription(offer);
+                            const answer = await this._pc.createAnswer();
+                            logger.debug('restartIce() | calling pc.setLocalDescription() [answer:%o]', answer);
+                            await this._pc.setLocalDescription(answer);
+                        }
+                    }
+
+                    async getTransportStats() {
+                        return this._pc.getStats();
+                    }
+
+                    async send({track, encodings, codecOptions, codec}) {
+                        var _a;
+                        this._assertSendDirection();
+                        logger.debug('send() [kind:%s, track.id:%s]', track.kind, track.id);
+                        if (codec) {
+                            logger.warn('send() | codec selection is not available in %s handler', this.name);
+                        }
+                        this._sendStream.addTrack(track);
+                        this._pc.addStream(this._sendStream);
+                        let offer = await this._pc.createOffer();
+                        let localSdpObject = sdpTransform.parse(offer.sdp);
+                        let offerMediaObject;
+                        const sendingRtpParameters = utils.clone(this._sendingRtpParametersByKind[track.kind], {});
+                        sendingRtpParameters.codecs =
+                            ortc.reduceCodecs(sendingRtpParameters.codecs);
+                        const sendingRemoteRtpParameters = utils.clone(this._sendingRemoteRtpParametersByKind[track.kind], {});
+                        sendingRemoteRtpParameters.codecs =
+                            ortc.reduceCodecs(sendingRemoteRtpParameters.codecs);
+                        if (!this._transportReady) {
+                            await this._setupTransport({
+                                localDtlsRole: (_a = this._forcedLocalDtlsRole) !== null && _a !== void 0 ? _a : 'client',
+                                localSdpObject
+                            });
+                        }
+                        if (track.kind === 'video' && encodings && encodings.length > 1) {
+                            logger.debug('send() | enabling simulcast');
+                            localSdpObject = sdpTransform.parse(offer.sdp);
+                            offerMediaObject = localSdpObject.media.find((m) => m.type === 'video');
+                            sdpPlanBUtils.addLegacySimulcast({
+                                offerMediaObject,
+                                track,
+                                numStreams: encodings.length
+                            });
+                            offer = {type: 'offer', sdp: sdpTransform.write(localSdpObject)};
+                        }
+                        logger.debug('send() | calling pc.setLocalDescription() [offer:%o]', offer);
+                        await this._pc.setLocalDescription(offer);
+                        localSdpObject = sdpTransform.parse(this._pc.localDescription.sdp);
+                        offerMediaObject = localSdpObject.media
+                            .find((m) => m.type === track.kind);
+                        // Set RTCP CNAME.
+                        sendingRtpParameters.rtcp.cname =
+                            sdpCommonUtils.getCname({offerMediaObject});
+                        // Set RTP encodings.
+                        sendingRtpParameters.encodings =
+                            sdpPlanBUtils.getRtpEncodings({offerMediaObject, track});
+                        // Complete encodings with given values.
+                        if (encodings) {
+                            for (let idx = 0; idx < sendingRtpParameters.encodings.length; ++idx) {
+                                if (encodings[idx])
+                                    Object.assign(sendingRtpParameters.encodings[idx], encodings[idx]);
+                            }
+                        }
+                        // If VP8 and there is effective simulcast, add scalabilityMode to each
+                        // encoding.
+                        if (sendingRtpParameters.encodings.length > 1 &&
+                            sendingRtpParameters.codecs[0].mimeType.toLowerCase() === 'video/vp8') {
+                            for (const encoding of sendingRtpParameters.encodings) {
+                                encoding.scalabilityMode = 'S1T3';
+                            }
+                        }
+                        this._remoteSdp.send({
+                            offerMediaObject,
+                            offerRtpParameters: sendingRtpParameters,
+                            answerRtpParameters: sendingRemoteRtpParameters,
+                            codecOptions
+                        });
+                        const answer = {type: 'answer', sdp: this._remoteSdp.getSdp()};
+                        logger.debug('send() | calling pc.setRemoteDescription() [answer:%o]', answer);
+                        await this._pc.setRemoteDescription(answer);
+                        const localId = String(this._nextSendLocalId);
+                        this._nextSendLocalId++;
+                        // Insert into the map.
+                        this._mapSendLocalIdTrack.set(localId, track);
+                        return {
+                            localId: localId,
+                            rtpParameters: sendingRtpParameters
+                        };
+                    }
+
+                    async stopSending(localId) {
+                        this._assertSendDirection();
+                        logger.debug('stopSending() [localId:%s]', localId);
+                        const track = this._mapSendLocalIdTrack.get(localId);
+                        if (!track)
+                            throw new Error('track not found');
+                        this._mapSendLocalIdTrack.delete(localId);
+                        this._sendStream.removeTrack(track);
+                        this._pc.addStream(this._sendStream);
+                        const offer = await this._pc.createOffer();
+                        logger.debug('stopSending() | calling pc.setLocalDescription() [offer:%o]', offer);
+                        try {
+                            await this._pc.setLocalDescription(offer);
+                        } catch (error) {
+                            // NOTE: If there are no sending tracks, setLocalDescription() will fail with
+                            // "Failed to create channels". If so, ignore it.
+                            if (this._sendStream.getTracks().length === 0) {
+                                logger.warn('stopSending() | ignoring expected error due no sending tracks: %s', error.toString());
+                                return;
+                            }
+                            throw error;
+                        }
+                        if (this._pc.signalingState === 'stable')
+                            return;
+                        const answer = {type: 'answer', sdp: this._remoteSdp.getSdp()};
+                        logger.debug('stopSending() | calling pc.setRemoteDescription() [answer:%o]', answer);
+                        await this._pc.setRemoteDescription(answer);
+                    }
+
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    async pauseSending(localId) {
+                        // Unimplemented.
+                    }
+
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    async resumeSending(localId) {
+                        // Unimplemented.
+                    }
+
+                    async replaceTrack(
+                        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                        localId, track) {
+                        throw new errors_1.UnsupportedError('not implemented');
+                    }
+
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    async setMaxSpatialLayer(localId, spatialLayer) {
+                        throw new errors_1.UnsupportedError(' not implemented');
+                    }
+
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    async setRtpEncodingParameters(localId, params) {
+                        throw new errors_1.UnsupportedError('not supported');
+                    }
+
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    async getSenderStats(localId) {
+                        throw new errors_1.UnsupportedError('not implemented');
+                    }
+
+                    async sendDataChannel({ordered, maxPacketLifeTime, maxRetransmits, label, protocol}) {
+                        var _a;
+                        this._assertSendDirection();
+                        const options = {
+                            negotiated: true,
+                            id: this._nextSendSctpStreamId,
+                            ordered,
+                            maxPacketLifeTime,
+                            maxRetransmitTime: maxPacketLifeTime,
+                            maxRetransmits,
+                            protocol
+                        };
+                        logger.debug('sendDataChannel() [options:%o]', options);
+                        const dataChannel = this._pc.createDataChannel(label, options);
+                        // Increase next id.
+                        this._nextSendSctpStreamId =
+                            ++this._nextSendSctpStreamId % SCTP_NUM_STREAMS.MIS;
+                        // If this is the first DataChannel we need to create the SDP answer with
+                        // m=application section.
+                        if (!this._hasDataChannelMediaSection) {
+                            const offer = await this._pc.createOffer();
+                            const localSdpObject = sdpTransform.parse(offer.sdp);
+                            const offerMediaObject = localSdpObject.media
+                                .find((m) => m.type === 'application');
+                            if (!this._transportReady) {
+                                await this._setupTransport({
+                                    localDtlsRole: (_a = this._forcedLocalDtlsRole) !== null && _a !== void 0 ? _a : 'client',
+                                    localSdpObject
+                                });
+                            }
+                            logger.debug('sendDataChannel() | calling pc.setLocalDescription() [offer:%o]', offer);
+                            await this._pc.setLocalDescription(offer);
+                            this._remoteSdp.sendSctpAssociation({offerMediaObject});
+                            const answer = {type: 'answer', sdp: this._remoteSdp.getSdp()};
+                            logger.debug('sendDataChannel() | calling pc.setRemoteDescription() [answer:%o]', answer);
+                            await this._pc.setRemoteDescription(answer);
+                            this._hasDataChannelMediaSection = true;
+                        }
+                        const sctpStreamParameters = {
+                            streamId: options.id,
+                            ordered: options.ordered,
+                            maxPacketLifeTime: options.maxPacketLifeTime,
+                            maxRetransmits: options.maxRetransmits
+                        };
+                        return {dataChannel, sctpStreamParameters};
+                    }
+
+                    async receive(optionsList) {
+                        var _a;
+                        this._assertRecvDirection();
+                        const results = [];
+                        for (const options of optionsList) {
+                            const {trackId, kind, rtpParameters} = options;
+                            logger.debug('receive() [trackId:%s, kind:%s]', trackId, kind);
+                            const mid = kind;
+                            const streamId = rtpParameters.rtcp.cname;
+                            this._remoteSdp.receive({
+                                mid,
+                                kind,
+                                offerRtpParameters: rtpParameters,
+                                streamId,
+                                trackId
+                            });
+                        }
+                        const offer = {type: 'offer', sdp: this._remoteSdp.getSdp()};
+                        logger.debug('receive() | calling pc.setRemoteDescription() [offer:%o]', offer);
+                        await this._pc.setRemoteDescription(offer);
+                        let answer = await this._pc.createAnswer();
+                        const localSdpObject = sdpTransform.parse(answer.sdp);
+                        for (const options of optionsList) {
+                            const {kind, rtpParameters} = options;
+                            const mid = kind;
+                            const answerMediaObject = localSdpObject.media
+                                .find((m) => String(m.mid) === mid);
+                            // May need to modify codec parameters in the answer based on codec
+                            // parameters in the offer.
+                            sdpCommonUtils.applyCodecParameters({
+                                offerRtpParameters: rtpParameters,
+                                answerMediaObject
+                            });
+                        }
+                        answer = {type: 'answer', sdp: sdpTransform.write(localSdpObject)};
+                        if (!this._transportReady) {
+                            await this._setupTransport({
+                                localDtlsRole: (_a = this._forcedLocalDtlsRole) !== null && _a !== void 0 ? _a : 'client',
+                                localSdpObject
+                            });
+                        }
+                        logger.debug('receive() | calling pc.setLocalDescription() [answer:%o]', answer);
+                        await this._pc.setLocalDescription(answer);
+                        for (const options of optionsList) {
+                            const {kind, trackId, rtpParameters} = options;
+                            const mid = kind;
+                            const localId = trackId;
+                            const streamId = rtpParameters.rtcp.cname;
+                            const stream = this._pc.getRemoteStreams()
+                                .find((s) => s.id === streamId);
+                            const track = stream.getTrackById(localId);
+                            if (!track)
+                                throw new Error('remote track not found');
+                            // Insert into the map.
+                            this._mapRecvLocalIdInfo.set(localId, {mid, rtpParameters});
+                            results.push({localId, track});
+                        }
+                        return results;
+                    }
+
+                    async stopReceiving(localIds) {
+                        this._assertRecvDirection();
+                        for (const localId of localIds) {
+                            logger.debug('stopReceiving() [localId:%s]', localId);
+                            const {mid, rtpParameters} = this._mapRecvLocalIdInfo.get(localId) || {};
+                            // Remove from the map.
+                            this._mapRecvLocalIdInfo.delete(localId);
+                            this._remoteSdp.planBStopReceiving({mid: mid, offerRtpParameters: rtpParameters});
+                        }
+                        const offer = {type: 'offer', sdp: this._remoteSdp.getSdp()};
+                        logger.debug('stopReceiving() | calling pc.setRemoteDescription() [offer:%o]', offer);
+                        await this._pc.setRemoteDescription(offer);
+                        const answer = await this._pc.createAnswer();
+                        logger.debug('stopReceiving() | calling pc.setLocalDescription() [answer:%o]', answer);
+                        await this._pc.setLocalDescription(answer);
+                    }
+
+                    async pauseReceiving(
+                        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                        localIds) {
+                        // Unimplemented.
+                    }
+
+                    async resumeReceiving(
+                        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                        localIds) {
+                        // Unimplemented.
+                    }
+
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    async getReceiverStats(localId) {
+                        throw new errors_1.UnsupportedError('not implemented');
+                    }
+
+                    async receiveDataChannel({sctpStreamParameters, label, protocol}) {
+                        var _a;
+                        this._assertRecvDirection();
+                        const {streamId, ordered, maxPacketLifeTime, maxRetransmits} = sctpStreamParameters;
+                        const options = {
+                            negotiated: true,
+                            id: streamId,
+                            ordered,
+                            maxPacketLifeTime,
+                            maxRetransmitTime: maxPacketLifeTime,
+                            maxRetransmits,
+                            protocol
+                        };
+                        logger.debug('receiveDataChannel() [options:%o]', options);
+                        const dataChannel = this._pc.createDataChannel(label, options);
+                        // If this is the first DataChannel we need to create the SDP offer with
+                        // m=application section.
+                        if (!this._hasDataChannelMediaSection) {
+                            this._remoteSdp.receiveSctpAssociation({oldDataChannelSpec: true});
+                            const offer = {type: 'offer', sdp: this._remoteSdp.getSdp()};
+                            logger.debug('receiveDataChannel() | calling pc.setRemoteDescription() [offer:%o]', offer);
+                            await this._pc.setRemoteDescription(offer);
+                            const answer = await this._pc.createAnswer();
+                            if (!this._transportReady) {
+                                const localSdpObject = sdpTransform.parse(answer.sdp);
+                                await this._setupTransport({
+                                    localDtlsRole: (_a = this._forcedLocalDtlsRole) !== null && _a !== void 0 ? _a : 'client',
+                                    localSdpObject
+                                });
+                            }
+                            logger.debug('receiveDataChannel() | calling pc.setRemoteDescription() [answer:%o]', answer);
+                            await this._pc.setLocalDescription(answer);
+                            this._hasDataChannelMediaSection = true;
+                        }
+                        return {dataChannel};
+                    }
+
+                    async _setupTransport({localDtlsRole, localSdpObject}) {
+                        if (!localSdpObject)
+                            localSdpObject = sdpTransform.parse(this._pc.localDescription.sdp);
+                        // Get our local DTLS parameters.
+                        const dtlsParameters = sdpCommonUtils.extractDtlsParameters({sdpObject: localSdpObject});
+                        // Set our DTLS role.
+                        dtlsParameters.role = localDtlsRole;
+                        // Update the remote DTLS role in the SDP.
+                        this._remoteSdp.updateDtlsRole(localDtlsRole === 'client' ? 'server' : 'client');
+                        // Need to tell the remote transport about our parameters.
+                        await new Promise((resolve, reject) => {
+                            this.safeEmit('@connect', {dtlsParameters}, resolve, reject);
+                        });
+                        this._transportReady = true;
+                    }
+
+                    _assertSendDirection() {
+                        if (this._direction !== 'send') {
+                            throw new Error('method can just be called for handlers with "send" direction');
+                        }
+                    }
+
+                    _assertRecvDirection() {
+                        if (this._direction !== 'recv') {
+                            throw new Error('method can just be called for handlers with "recv" direction');
+                        }
+                    }
+                }
+
+                exports.Chrome55 = Chrome55;
+
+
+                /***/
+            }),
+
+            /***/ 697:
+            /***/ (function (__unused_webpack_module, exports, __webpack_require__) {
+
+                "use strict";
+
+                var __createBinding = (this && this.__createBinding) || (Object.create ? (function (o, m, k, k2) {
+                    if (k2 === undefined) k2 = k;
+                    var desc = Object.getOwnPropertyDescriptor(m, k);
+                    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+                        desc = {
+                            enumerable: true, get: function () {
+                                return m[k];
+                            }
+                        };
+                    }
+                    Object.defineProperty(o, k2, desc);
+                }) : (function (o, m, k, k2) {
+                    if (k2 === undefined) k2 = k;
+                    o[k2] = m[k];
+                }));
+                var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function (o, v) {
+                    Object.defineProperty(o, "default", {enumerable: true, value: v});
+                }) : function (o, v) {
+                    o["default"] = v;
+                });
+                var __importStar = (this && this.__importStar) || function (mod) {
+                    if (mod && mod.__esModule) return mod;
+                    var result = {};
+                    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+                    __setModuleDefault(result, mod);
+                    return result;
+                };
+                Object.defineProperty(exports, "__esModule", ({value: true}));
+                exports.Chrome67 = void 0;
+                const sdpTransform = __importStar(__webpack_require__(766));
+                const Logger_1 = __webpack_require__(562);
+                const utils = __importStar(__webpack_require__(347));
+                const ortc = __importStar(__webpack_require__(280));
+                const sdpCommonUtils = __importStar(__webpack_require__(267));
+                const sdpPlanBUtils = __importStar(__webpack_require__(875));
+                const HandlerInterface_1 = __webpack_require__(316);
+                const RemoteSdp_1 = __webpack_require__(910);
+                const logger = new Logger_1.Logger('Chrome67');
+                const SCTP_NUM_STREAMS = {OS: 1024, MIS: 1024};
+
+                class Chrome67 extends HandlerInterface_1.HandlerInterface {
+                    constructor() {
+                        super();
+                        // Local stream for sending.
+                        this._sendStream = new MediaStream();
+                        // Map of RTCRtpSender indexed by localId.
+                        this._mapSendLocalIdRtpSender = new Map();
+                        // Next sending localId.
+                        this._nextSendLocalId = 0;
+                        // Map of MID, RTP parameters and RTCRtpReceiver indexed by local id.
+                        // Value is an Object with mid, rtpParameters and rtpReceiver.
+                        this._mapRecvLocalIdInfo = new Map();
+                        // Whether a DataChannel m=application section has been created.
+                        this._hasDataChannelMediaSection = false;
+                        // Sending DataChannel id value counter. Incremented for each new DataChannel.
+                        this._nextSendSctpStreamId = 0;
+                        // Got transport local and remote parameters.
+                        this._transportReady = false;
+                    }
+
+                    /**
+                     * Creates a factory function.
+                     */
+                    static createFactory() {
+                        return () => new Chrome67();
+                    }
+
+                    get name() {
+                        return 'Chrome67';
+                    }
+
+                    close() {
+                        logger.debug('close()');
+                        // Close RTCPeerConnection.
+                        if (this._pc) {
+                            try {
+                                this._pc.close();
+                            } catch (error) {
+                            }
+                        }
+                        this.emit('@close');
+                    }
+
+                    async getNativeRtpCapabilities() {
+                        logger.debug('getNativeRtpCapabilities()');
+                        const pc = new RTCPeerConnection({
+                            iceServers: [],
+                            iceTransportPolicy: 'all',
+                            bundlePolicy: 'max-bundle',
+                            rtcpMuxPolicy: 'require',
+                            sdpSemantics: 'plan-b'
+                        });
+                        try {
+                            const offer = await pc.createOffer({
+                                offerToReceiveAudio: true,
+                                offerToReceiveVideo: true
+                            });
+                            try {
+                                pc.close();
+                            } catch (error) {
+                            }
+                            const sdpObject = sdpTransform.parse(offer.sdp);
+                            const nativeRtpCapabilities = sdpCommonUtils.extractRtpCapabilities({sdpObject});
+                            return nativeRtpCapabilities;
+                        } catch (error) {
+                            try {
+                                pc.close();
+                            } catch (error2) {
+                            }
+                            throw error;
+                        }
+                    }
+
+                    async getNativeSctpCapabilities() {
+                        logger.debug('getNativeSctpCapabilities()');
+                        return {
+                            numStreams: SCTP_NUM_STREAMS
+                        };
+                    }
+
+                    run({
+                            direction,
+                            iceParameters,
+                            iceCandidates,
+                            dtlsParameters,
+                            sctpParameters,
+                            iceServers,
+                            iceTransportPolicy,
+                            additionalSettings,
+                            proprietaryConstraints,
+                            extendedRtpCapabilities
+                        }) {
+                        logger.debug('run()');
+                        this._direction = direction;
+                        this._remoteSdp = new RemoteSdp_1.RemoteSdp({
+                            iceParameters,
+                            iceCandidates,
+                            dtlsParameters,
+                            sctpParameters,
+                            planB: true
+                        });
+                        this._sendingRtpParametersByKind =
+                            {
+                                audio: ortc.getSendingRtpParameters('audio', extendedRtpCapabilities),
+                                video: ortc.getSendingRtpParameters('video', extendedRtpCapabilities)
+                            };
+                        this._sendingRemoteRtpParametersByKind =
+                            {
+                                audio: ortc.getSendingRemoteRtpParameters('audio', extendedRtpCapabilities),
+                                video: ortc.getSendingRemoteRtpParameters('video', extendedRtpCapabilities)
+                            };
+                        if (dtlsParameters.role && dtlsParameters.role !== 'auto') {
+                            this._forcedLocalDtlsRole = dtlsParameters.role === 'server'
+                                ? 'client'
+                                : 'server';
+                        }
+                        this._pc = new RTCPeerConnection({
+                            iceServers: iceServers || [],
+                            iceTransportPolicy: iceTransportPolicy || 'all',
+                            bundlePolicy: 'max-bundle',
+                            rtcpMuxPolicy: 'require',
+                            sdpSemantics: 'plan-b',
+                            ...additionalSettings
+                        }, proprietaryConstraints);
+                        // Handle RTCPeerConnection connection status.
+                        this._pc.addEventListener('iceconnectionstatechange', () => {
+                            switch (this._pc.iceConnectionState) {
+                                case 'checking':
+                                    this.emit('@connectionstatechange', 'connecting');
+                                    break;
+                                case 'connected':
+                                case 'completed':
+                                    this.emit('@connectionstatechange', 'connected');
+                                    break;
+                                case 'failed':
+                                    this.emit('@connectionstatechange', 'failed');
+                                    break;
+                                case 'disconnected':
+                                    this.emit('@connectionstatechange', 'disconnected');
+                                    break;
+                                case 'closed':
+                                    this.emit('@connectionstatechange', 'closed');
+                                    break;
+                            }
+                        });
+                    }
+
+                    async updateIceServers(iceServers) {
+                        logger.debug('updateIceServers()');
+                        const configuration = this._pc.getConfiguration();
+                        configuration.iceServers = iceServers;
+                        this._pc.setConfiguration(configuration);
+                    }
+
+                    async restartIce(iceParameters) {
+                        logger.debug('restartIce()');
+                        // Provide the remote SDP handler with new remote ICE parameters.
+                        this._remoteSdp.updateIceParameters(iceParameters);
+                        if (!this._transportReady)
+                            return;
+                        if (this._direction === 'send') {
+                            const offer = await this._pc.createOffer({iceRestart: true});
+                            logger.debug('restartIce() | calling pc.setLocalDescription() [offer:%o]', offer);
+                            await this._pc.setLocalDescription(offer);
+                            const answer = {type: 'answer', sdp: this._remoteSdp.getSdp()};
+                            logger.debug('restartIce() | calling pc.setRemoteDescription() [answer:%o]', answer);
+                            await this._pc.setRemoteDescription(answer);
+                        } else {
+                            const offer = {type: 'offer', sdp: this._remoteSdp.getSdp()};
+                            logger.debug('restartIce() | calling pc.setRemoteDescription() [offer:%o]', offer);
+                            await this._pc.setRemoteDescription(offer);
+                            const answer = await this._pc.createAnswer();
+                            logger.debug('restartIce() | calling pc.setLocalDescription() [answer:%o]', answer);
+                            await this._pc.setLocalDescription(answer);
+                        }
+                    }
+
+                    async getTransportStats() {
+                        return this._pc.getStats();
+                    }
+
+                    async send({track, encodings, codecOptions, codec}) {
+                        var _a;
+                        this._assertSendDirection();
+                        logger.debug('send() [kind:%s, track.id:%s]', track.kind, track.id);
+                        if (codec) {
+                            logger.warn('send() | codec selection is not available in %s handler', this.name);
+                        }
+                        this._sendStream.addTrack(track);
+                        this._pc.addTrack(track, this._sendStream);
+                        let offer = await this._pc.createOffer();
+                        let localSdpObject = sdpTransform.parse(offer.sdp);
+                        let offerMediaObject;
+                        const sendingRtpParameters = utils.clone(this._sendingRtpParametersByKind[track.kind], {});
+                        sendingRtpParameters.codecs =
+                            ortc.reduceCodecs(sendingRtpParameters.codecs);
+                        const sendingRemoteRtpParameters = utils.clone(this._sendingRemoteRtpParametersByKind[track.kind], {});
+                        sendingRemoteRtpParameters.codecs =
+                            ortc.reduceCodecs(sendingRemoteRtpParameters.codecs);
+                        if (!this._transportReady) {
+                            await this._setupTransport({
+                                localDtlsRole: (_a = this._forcedLocalDtlsRole) !== null && _a !== void 0 ? _a : 'client',
+                                localSdpObject
+                            });
+                        }
+                        if (track.kind === 'video' && encodings && encodings.length > 1) {
+                            logger.debug('send() | enabling simulcast');
+                            localSdpObject = sdpTransform.parse(offer.sdp);
+                            offerMediaObject = localSdpObject.media
+                                .find((m) => m.type === 'video');
+                            sdpPlanBUtils.addLegacySimulcast({
+                                offerMediaObject,
+                                track,
+                                numStreams: encodings.length
+                            });
+                            offer = {type: 'offer', sdp: sdpTransform.write(localSdpObject)};
+                        }
+                        logger.debug('send() | calling pc.setLocalDescription() [offer:%o]', offer);
+                        await this._pc.setLocalDescription(offer);
+                        localSdpObject = sdpTransform.parse(this._pc.localDescription.sdp);
+                        offerMediaObject = localSdpObject.media
+                            .find((m) => m.type === track.kind);
+                        // Set RTCP CNAME.
+                        sendingRtpParameters.rtcp.cname =
+                            sdpCommonUtils.getCname({offerMediaObject});
+                        // Set RTP encodings.
+                        sendingRtpParameters.encodings =
+                            sdpPlanBUtils.getRtpEncodings({offerMediaObject, track});
+                        // Complete encodings with given values.
+                        if (encodings) {
+                            for (let idx = 0; idx < sendingRtpParameters.encodings.length; ++idx) {
+                                if (encodings[idx])
+                                    Object.assign(sendingRtpParameters.encodings[idx], encodings[idx]);
+                            }
+                        }
+                        // If VP8 and there is effective simulcast, add scalabilityMode to each
+                        // encoding.
+                        if (sendingRtpParameters.encodings.length > 1 &&
+                            sendingRtpParameters.codecs[0].mimeType.toLowerCase() === 'video/vp8') {
+                            for (const encoding of sendingRtpParameters.encodings) {
+                                encoding.scalabilityMode = 'S1T3';
+                            }
+                        }
+                        this._remoteSdp.send({
+                            offerMediaObject,
+                            offerRtpParameters: sendingRtpParameters,
+                            answerRtpParameters: sendingRemoteRtpParameters,
+                            codecOptions
+                        });
+                        const answer = {type: 'answer', sdp: this._remoteSdp.getSdp()};
+                        logger.debug('send() | calling pc.setRemoteDescription() [answer:%o]', answer);
+                        await this._pc.setRemoteDescription(answer);
+                        const localId = String(this._nextSendLocalId);
+                        this._nextSendLocalId++;
+                        const rtpSender = this._pc.getSenders()
+                            .find((s) => s.track === track);
+                        // Insert into the map.
+                        this._mapSendLocalIdRtpSender.set(localId, rtpSender);
+                        return {
+                            localId: localId,
+                            rtpParameters: sendingRtpParameters,
+                            rtpSender
+                        };
+                    }
+
+                    async stopSending(localId) {
+                        this._assertSendDirection();
+                        logger.debug('stopSending() [localId:%s]', localId);
+                        const rtpSender = this._mapSendLocalIdRtpSender.get(localId);
+                        if (!rtpSender)
+                            throw new Error('associated RTCRtpSender not found');
+                        this._pc.removeTrack(rtpSender);
+                        if (rtpSender.track)
+                            this._sendStream.removeTrack(rtpSender.track);
+                        this._mapSendLocalIdRtpSender.delete(localId);
+                        const offer = await this._pc.createOffer();
+                        logger.debug('stopSending() | calling pc.setLocalDescription() [offer:%o]', offer);
+                        try {
+                            await this._pc.setLocalDescription(offer);
+                        } catch (error) {
+                            // NOTE: If there are no sending tracks, setLocalDescription() will fail with
+                            // "Failed to create channels". If so, ignore it.
+                            if (this._sendStream.getTracks().length === 0) {
+                                logger.warn('stopSending() | ignoring expected error due no sending tracks: %s', error.toString());
+                                return;
+                            }
+                            throw error;
+                        }
+                        if (this._pc.signalingState === 'stable')
+                            return;
+                        const answer = {type: 'answer', sdp: this._remoteSdp.getSdp()};
+                        logger.debug('stopSending() | calling pc.setRemoteDescription() [answer:%o]', answer);
+                        await this._pc.setRemoteDescription(answer);
+                    }
+
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    async pauseSending(localId) {
+                        // Unimplemented.
+                    }
+
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    async resumeSending(localId) {
+                        // Unimplemented.
+                    }
+
+                    async replaceTrack(localId, track) {
+                        this._assertSendDirection();
+                        if (track) {
+                            logger.debug('replaceTrack() [localId:%s, track.id:%s]', localId, track.id);
+                        } else {
+                            logger.debug('replaceTrack() [localId:%s, no track]', localId);
+                        }
+                        const rtpSender = this._mapSendLocalIdRtpSender.get(localId);
+                        if (!rtpSender)
+                            throw new Error('associated RTCRtpSender not found');
+                        const oldTrack = rtpSender.track;
+                        await rtpSender.replaceTrack(track);
+                        // Remove the old track from the local stream.
+                        if (oldTrack)
+                            this._sendStream.removeTrack(oldTrack);
+                        // Add the new track to the local stream.
+                        if (track)
+                            this._sendStream.addTrack(track);
+                    }
+
+                    async setMaxSpatialLayer(localId, spatialLayer) {
+                        this._assertSendDirection();
+                        logger.debug('setMaxSpatialLayer() [localId:%s, spatialLayer:%s]', localId, spatialLayer);
+                        const rtpSender = this._mapSendLocalIdRtpSender.get(localId);
+                        if (!rtpSender)
+                            throw new Error('associated RTCRtpSender not found');
+                        const parameters = rtpSender.getParameters();
+                        parameters.encodings.forEach((encoding, idx) => {
+                            if (idx <= spatialLayer)
+                                encoding.active = true;
+                            else
+                                encoding.active = false;
+                        });
+                        await rtpSender.setParameters(parameters);
+                    }
+
+                    async setRtpEncodingParameters(localId, params) {
+                        this._assertSendDirection();
+                        logger.debug('setRtpEncodingParameters() [localId:%s, params:%o]', localId, params);
+                        const rtpSender = this._mapSendLocalIdRtpSender.get(localId);
+                        if (!rtpSender)
+                            throw new Error('associated RTCRtpSender not found');
+                        const parameters = rtpSender.getParameters();
+                        parameters.encodings.forEach((encoding, idx) => {
+                            parameters.encodings[idx] = {...encoding, ...params};
+                        });
+                        await rtpSender.setParameters(parameters);
+                    }
+
+                    async getSenderStats(localId) {
+                        this._assertSendDirection();
+                        const rtpSender = this._mapSendLocalIdRtpSender.get(localId);
+                        if (!rtpSender)
+                            throw new Error('associated RTCRtpSender not found');
+                        return rtpSender.getStats();
+                    }
+
+                    async sendDataChannel({ordered, maxPacketLifeTime, maxRetransmits, label, protocol}) {
+                        var _a;
+                        this._assertSendDirection();
+                        const options = {
+                            negotiated: true,
+                            id: this._nextSendSctpStreamId,
+                            ordered,
+                            maxPacketLifeTime,
+                            maxRetransmitTime: maxPacketLifeTime,
+                            maxRetransmits,
+                            protocol
+                        };
+                        logger.debug('sendDataChannel() [options:%o]', options);
+                        const dataChannel = this._pc.createDataChannel(label, options);
+                        // Increase next id.
+                        this._nextSendSctpStreamId =
+                            ++this._nextSendSctpStreamId % SCTP_NUM_STREAMS.MIS;
+                        // If this is the first DataChannel we need to create the SDP answer with
+                        // m=application section.
+                        if (!this._hasDataChannelMediaSection) {
+                            const offer = await this._pc.createOffer();
+                            const localSdpObject = sdpTransform.parse(offer.sdp);
+                            const offerMediaObject = localSdpObject.media
+                                .find((m) => m.type === 'application');
+                            if (!this._transportReady) {
+                                await this._setupTransport({
+                                    localDtlsRole: (_a = this._forcedLocalDtlsRole) !== null && _a !== void 0 ? _a : 'client',
+                                    localSdpObject
+                                });
+                            }
+                            logger.debug('sendDataChannel() | calling pc.setLocalDescription() [offer:%o]', offer);
+                            await this._pc.setLocalDescription(offer);
+                            this._remoteSdp.sendSctpAssociation({offerMediaObject});
+                            const answer = {type: 'answer', sdp: this._remoteSdp.getSdp()};
+                            logger.debug('sendDataChannel() | calling pc.setRemoteDescription() [answer:%o]', answer);
+                            await this._pc.setRemoteDescription(answer);
+                            this._hasDataChannelMediaSection = true;
+                        }
+                        const sctpStreamParameters = {
+                            streamId: options.id,
+                            ordered: options.ordered,
+                            maxPacketLifeTime: options.maxPacketLifeTime,
+                            maxRetransmits: options.maxRetransmits
+                        };
+                        return {dataChannel, sctpStreamParameters};
+                    }
+
+                    async receive(
+                        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                        optionsList) {
+                        var _a;
+                        this._assertRecvDirection();
+                        const results = [];
+                        for (const options of optionsList) {
+                            const {trackId, kind, rtpParameters} = options;
+                            logger.debug('receive() [trackId:%s, kind:%s]', trackId, kind);
+                            const mid = kind;
+                            this._remoteSdp.receive({
+                                mid,
+                                kind,
+                                offerRtpParameters: rtpParameters,
+                                streamId: rtpParameters.rtcp.cname,
+                                trackId
+                            });
+                        }
+                        const offer = {type: 'offer', sdp: this._remoteSdp.getSdp()};
+                        logger.debug('receive() | calling pc.setRemoteDescription() [offer:%o]', offer);
+                        await this._pc.setRemoteDescription(offer);
+                        let answer = await this._pc.createAnswer();
+                        const localSdpObject = sdpTransform.parse(answer.sdp);
+                        for (const options of optionsList) {
+                            const {kind, rtpParameters} = options;
+                            const mid = kind;
+                            const answerMediaObject = localSdpObject.media
+                                .find((m) => String(m.mid) === mid);
+                            // May need to modify codec parameters in the answer based on codec
+                            // parameters in the offer.
+                            sdpCommonUtils.applyCodecParameters({
+                                offerRtpParameters: rtpParameters,
+                                answerMediaObject
+                            });
+                        }
+                        answer = {type: 'answer', sdp: sdpTransform.write(localSdpObject)};
+                        if (!this._transportReady) {
+                            await this._setupTransport({
+                                localDtlsRole: (_a = this._forcedLocalDtlsRole) !== null && _a !== void 0 ? _a : 'client',
+                                localSdpObject
+                            });
+                        }
+                        logger.debug('receive() | calling pc.setLocalDescription() [answer:%o]', answer);
+                        await this._pc.setLocalDescription(answer);
+                        for (const options of optionsList) {
+                            const {kind, trackId, rtpParameters} = options;
+                            const localId = trackId;
+                            const mid = kind;
+                            const rtpReceiver = this._pc.getReceivers()
+                                .find((r) => r.track && r.track.id === localId);
+                            if (!rtpReceiver)
+                                throw new Error('new RTCRtpReceiver not');
+                            // Insert into the map.
+                            this._mapRecvLocalIdInfo.set(localId, {mid, rtpParameters, rtpReceiver});
+                            results.push({
+                                localId,
+                                track: rtpReceiver.track,
+                                rtpReceiver
+                            });
+                        }
+                        return results;
+                    }
+
+                    async stopReceiving(localIds) {
+                        this._assertRecvDirection();
+                        for (const localId of localIds) {
+                            logger.debug('stopReceiving() [localId:%s]', localId);
+                            const {mid, rtpParameters} = this._mapRecvLocalIdInfo.get(localId) || {};
+                            // Remove from the map.
+                            this._mapRecvLocalIdInfo.delete(localId);
+                            this._remoteSdp.planBStopReceiving({mid: mid, offerRtpParameters: rtpParameters});
+                        }
+                        const offer = {type: 'offer', sdp: this._remoteSdp.getSdp()};
+                        logger.debug('stopReceiving() | calling pc.setRemoteDescription() [offer:%o]', offer);
+                        await this._pc.setRemoteDescription(offer);
+                        const answer = await this._pc.createAnswer();
+                        logger.debug('stopReceiving() | calling pc.setLocalDescription() [answer:%o]', answer);
+                        await this._pc.setLocalDescription(answer);
+                    }
+
+                    async pauseReceiving(
+                        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                        localIds) {
+                        // Unimplemented.
+                    }
+
+                    async resumeReceiving(
+                        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                        localIds) {
+                        // Unimplemented.
+                    }
+
+                    async getReceiverStats(localId) {
+                        this._assertRecvDirection();
+                        const {rtpReceiver} = this._mapRecvLocalIdInfo.get(localId) || {};
+                        if (!rtpReceiver)
+                            throw new Error('associated RTCRtpReceiver not found');
+                        return rtpReceiver.getStats();
+                    }
+
+                    async receiveDataChannel({sctpStreamParameters, label, protocol}) {
+                        var _a;
+                        this._assertRecvDirection();
+                        const {streamId, ordered, maxPacketLifeTime, maxRetransmits} = sctpStreamParameters;
+                        const options = {
+                            negotiated: true,
+                            id: streamId,
+                            ordered,
+                            maxPacketLifeTime,
+                            maxRetransmitTime: maxPacketLifeTime,
+                            maxRetransmits,
+                            protocol
+                        };
+                        logger.debug('receiveDataChannel() [options:%o]', options);
+                        const dataChannel = this._pc.createDataChannel(label, options);
+                        // If this is the first DataChannel we need to create the SDP offer with
+                        // m=application section.
+                        if (!this._hasDataChannelMediaSection) {
+                            this._remoteSdp.receiveSctpAssociation({oldDataChannelSpec: true});
+                            const offer = {type: 'offer', sdp: this._remoteSdp.getSdp()};
+                            logger.debug('receiveDataChannel() | calling pc.setRemoteDescription() [offer:%o]', offer);
+                            await this._pc.setRemoteDescription(offer);
+                            const answer = await this._pc.createAnswer();
+                            if (!this._transportReady) {
+                                const localSdpObject = sdpTransform.parse(answer.sdp);
+                                await this._setupTransport({
+                                    localDtlsRole: (_a = this._forcedLocalDtlsRole) !== null && _a !== void 0 ? _a : 'client',
+                                    localSdpObject
+                                });
+                            }
+                            logger.debug('receiveDataChannel() | calling pc.setRemoteDescription() [answer:%o]', answer);
+                            await this._pc.setLocalDescription(answer);
+                            this._hasDataChannelMediaSection = true;
+                        }
+                        return {dataChannel};
+                    }
+
+                    async _setupTransport({localDtlsRole, localSdpObject}) {
+                        if (!localSdpObject)
+                            localSdpObject = sdpTransform.parse(this._pc.localDescription.sdp);
+                        // Get our local DTLS parameters.
+                        const dtlsParameters = sdpCommonUtils.extractDtlsParameters({sdpObject: localSdpObject});
+                        // Set our DTLS role.
+                        dtlsParameters.role = localDtlsRole;
+                        // Update the remote DTLS role in the SDP.
+                        this._remoteSdp.updateDtlsRole(localDtlsRole === 'client' ? 'server' : 'client');
+                        // Need to tell the remote transport about our parameters.
+                        await new Promise((resolve, reject) => {
+                            this.safeEmit('@connect', {dtlsParameters}, resolve, reject);
+                        });
+                        this._transportReady = true;
+                    }
+
+                    _assertSendDirection() {
+                        if (this._direction !== 'send') {
+                            throw new Error('method can just be called for handlers with "send" direction');
+                        }
+                    }
+
+                    _assertRecvDirection() {
+                        if (this._direction !== 'recv') {
+                            throw new Error('method can just be called for handlers with "recv" direction');
+                        }
+                    }
+                }
+
+                exports.Chrome67 = Chrome67;
+
+
+                /***/
+            }),
+
+            /***/ 372:
+            /***/ (function (__unused_webpack_module, exports, __webpack_require__) {
+
+                "use strict";
+
+                var __createBinding = (this && this.__createBinding) || (Object.create ? (function (o, m, k, k2) {
+                    if (k2 === undefined) k2 = k;
+                    var desc = Object.getOwnPropertyDescriptor(m, k);
+                    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+                        desc = {
+                            enumerable: true, get: function () {
+                                return m[k];
+                            }
+                        };
+                    }
+                    Object.defineProperty(o, k2, desc);
+                }) : (function (o, m, k, k2) {
+                    if (k2 === undefined) k2 = k;
+                    o[k2] = m[k];
+                }));
+                var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function (o, v) {
+                    Object.defineProperty(o, "default", {enumerable: true, value: v});
+                }) : function (o, v) {
+                    o["default"] = v;
+                });
+                var __importStar = (this && this.__importStar) || function (mod) {
+                    if (mod && mod.__esModule) return mod;
+                    var result = {};
+                    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+                    __setModuleDefault(result, mod);
+                    return result;
+                };
+                Object.defineProperty(exports, "__esModule", ({value: true}));
+                exports.Chrome70 = void 0;
+                const sdpTransform = __importStar(__webpack_require__(766));
+                const Logger_1 = __webpack_require__(562);
+                const utils = __importStar(__webpack_require__(347));
+                const ortc = __importStar(__webpack_require__(280));
+                const sdpCommonUtils = __importStar(__webpack_require__(267));
+                const sdpUnifiedPlanUtils = __importStar(__webpack_require__(72));
+                const HandlerInterface_1 = __webpack_require__(316);
+                const RemoteSdp_1 = __webpack_require__(910);
+                const scalabilityModes_1 = __webpack_require__(770);
+                const logger = new Logger_1.Logger('Chrome70');
+                const SCTP_NUM_STREAMS = {OS: 1024, MIS: 1024};
+
+                class Chrome70 extends HandlerInterface_1.HandlerInterface {
+                    constructor() {
+                        super();
+                        // Map of RTCTransceivers indexed by MID.
+                        this._mapMidTransceiver = new Map();
+                        // Local stream for sending.
+                        this._sendStream = new MediaStream();
+                        // Whether a DataChannel m=application section has been created.
+                        this._hasDataChannelMediaSection = false;
+                        // Sending DataChannel id value counter. Incremented for each new DataChannel.
+                        this._nextSendSctpStreamId = 0;
+                        // Got transport local and remote parameters.
+                        this._transportReady = false;
+                    }
+
+                    /**
+                     * Creates a factory function.
+                     */
+                    static createFactory() {
+                        return () => new Chrome70();
+                    }
+
+                    get name() {
+                        return 'Chrome70';
+                    }
+
+                    close() {
+                        logger.debug('close()');
+                        // Close RTCPeerConnection.
+                        if (this._pc) {
+                            try {
+                                this._pc.close();
+                            } catch (error) {
+                            }
+                        }
+                        this.emit('@close');
+                    }
+
+                    async getNativeRtpCapabilities() {
+                        logger.debug('getNativeRtpCapabilities()');
+                        const pc = new RTCPeerConnection({
+                            iceServers: [],
+                            iceTransportPolicy: 'all',
+                            bundlePolicy: 'max-bundle',
+                            rtcpMuxPolicy: 'require',
+                            sdpSemantics: 'unified-plan'
+                        });
+                        try {
+                            pc.addTransceiver('audio');
+                            pc.addTransceiver('video');
+                            const offer = await pc.createOffer();
+                            try {
+                                pc.close();
+                            } catch (error) {
+                            }
+                            const sdpObject = sdpTransform.parse(offer.sdp);
+                            const nativeRtpCapabilities = sdpCommonUtils.extractRtpCapabilities({sdpObject});
+                            return nativeRtpCapabilities;
+                        } catch (error) {
+                            try {
+                                pc.close();
+                            } catch (error2) {
+                            }
+                            throw error;
+                        }
+                    }
+
+                    async getNativeSctpCapabilities() {
+                        logger.debug('getNativeSctpCapabilities()');
+                        return {
+                            numStreams: SCTP_NUM_STREAMS
+                        };
+                    }
+
+                    run({
+                            direction,
+                            iceParameters,
+                            iceCandidates,
+                            dtlsParameters,
+                            sctpParameters,
+                            iceServers,
+                            iceTransportPolicy,
+                            additionalSettings,
+                            proprietaryConstraints,
+                            extendedRtpCapabilities
+                        }) {
+                        logger.debug('run()');
+                        this._direction = direction;
+                        this._remoteSdp = new RemoteSdp_1.RemoteSdp({
+                            iceParameters,
+                            iceCandidates,
+                            dtlsParameters,
+                            sctpParameters
+                        });
+                        this._sendingRtpParametersByKind =
+                            {
+                                audio: ortc.getSendingRtpParameters('audio', extendedRtpCapabilities),
+                                video: ortc.getSendingRtpParameters('video', extendedRtpCapabilities)
+                            };
+                        this._sendingRemoteRtpParametersByKind =
+                            {
+                                audio: ortc.getSendingRemoteRtpParameters('audio', extendedRtpCapabilities),
+                                video: ortc.getSendingRemoteRtpParameters('video', extendedRtpCapabilities)
+                            };
+                        if (dtlsParameters.role && dtlsParameters.role !== 'auto') {
+                            this._forcedLocalDtlsRole = dtlsParameters.role === 'server'
+                                ? 'client'
+                                : 'server';
+                        }
+                        this._pc = new RTCPeerConnection({
+                            iceServers: iceServers || [],
+                            iceTransportPolicy: iceTransportPolicy || 'all',
+                            bundlePolicy: 'max-bundle',
+                            rtcpMuxPolicy: 'require',
+                            sdpSemantics: 'unified-plan',
+                            ...additionalSettings
+                        }, proprietaryConstraints);
+                        // Handle RTCPeerConnection connection status.
+                        this._pc.addEventListener('iceconnectionstatechange', () => {
+                            switch (this._pc.iceConnectionState) {
+                                case 'checking':
+                                    this.emit('@connectionstatechange', 'connecting');
+                                    break;
+                                case 'connected':
+                                case 'completed':
+                                    this.emit('@connectionstatechange', 'connected');
+                                    break;
+                                case 'failed':
+                                    this.emit('@connectionstatechange', 'failed');
+                                    break;
+                                case 'disconnected':
+                                    this.emit('@connectionstatechange', 'disconnected');
+                                    break;
+                                case 'closed':
+                                    this.emit('@connectionstatechange', 'closed');
+                                    break;
+                            }
+                        });
+                    }
+
+                    async updateIceServers(iceServers) {
+                        logger.debug('updateIceServers()');
+                        const configuration = this._pc.getConfiguration();
+                        configuration.iceServers = iceServers;
+                        this._pc.setConfiguration(configuration);
+                    }
+
+                    async restartIce(iceParameters) {
+                        logger.debug('restartIce()');
+                        // Provide the remote SDP handler with new remote ICE parameters.
+                        this._remoteSdp.updateIceParameters(iceParameters);
+                        if (!this._transportReady)
+                            return;
+                        if (this._direction === 'send') {
+                            const offer = await this._pc.createOffer({iceRestart: true});
+                            logger.debug('restartIce() | calling pc.setLocalDescription() [offer:%o]', offer);
+                            await this._pc.setLocalDescription(offer);
+                            const answer = {type: 'answer', sdp: this._remoteSdp.getSdp()};
+                            logger.debug('restartIce() | calling pc.setRemoteDescription() [answer:%o]', answer);
+                            await this._pc.setRemoteDescription(answer);
+                        } else {
+                            const offer = {type: 'offer', sdp: this._remoteSdp.getSdp()};
+                            logger.debug('restartIce() | calling pc.setRemoteDescription() [offer:%o]', offer);
+                            await this._pc.setRemoteDescription(offer);
+                            const answer = await this._pc.createAnswer();
+                            logger.debug('restartIce() | calling pc.setLocalDescription() [answer:%o]', answer);
+                            await this._pc.setLocalDescription(answer);
+                        }
+                    }
+
+                    async getTransportStats() {
+                        return this._pc.getStats();
+                    }
+
+                    async send({track, encodings, codecOptions, codec}) {
+                        var _a;
+                        this._assertSendDirection();
+                        logger.debug('send() [kind:%s, track.id:%s]', track.kind, track.id);
+                        const sendingRtpParameters = utils.clone(this._sendingRtpParametersByKind[track.kind], {});
+                        // This may throw.
+                        sendingRtpParameters.codecs =
+                            ortc.reduceCodecs(sendingRtpParameters.codecs, codec);
+                        const sendingRemoteRtpParameters = utils.clone(this._sendingRemoteRtpParametersByKind[track.kind], {});
+                        // This may throw.
+                        sendingRemoteRtpParameters.codecs =
+                            ortc.reduceCodecs(sendingRemoteRtpParameters.codecs, codec);
+                        const mediaSectionIdx = this._remoteSdp.getNextMediaSectionIdx();
+                        const transceiver = this._pc.addTransceiver(track, {direction: 'sendonly', streams: [this._sendStream]});
+                        let offer = await this._pc.createOffer();
+                        let localSdpObject = sdpTransform.parse(offer.sdp);
+                        let offerMediaObject;
+                        if (!this._transportReady) {
+                            await this._setupTransport({
+                                localDtlsRole: (_a = this._forcedLocalDtlsRole) !== null && _a !== void 0 ? _a : 'client',
+                                localSdpObject
+                            });
+                        }
+                        if (encodings && encodings.length > 1) {
+                            logger.debug('send() | enabling legacy simulcast');
+                            localSdpObject = sdpTransform.parse(offer.sdp);
+                            offerMediaObject = localSdpObject.media[mediaSectionIdx.idx];
+                            sdpUnifiedPlanUtils.addLegacySimulcast({
+                                offerMediaObject,
+                                numStreams: encodings.length
+                            });
+                            offer = {type: 'offer', sdp: sdpTransform.write(localSdpObject)};
+                        }
+                        // Special case for VP9 with SVC.
+                        let hackVp9Svc = false;
+                        const layers = (0, scalabilityModes_1.parse)((encodings || [{}])[0].scalabilityMode);
+                        if (encodings &&
+                            encodings.length === 1 &&
+                            layers.spatialLayers > 1 &&
+                            sendingRtpParameters.codecs[0].mimeType.toLowerCase() === 'video/vp9') {
+                            logger.debug('send() | enabling legacy simulcast for VP9 SVC');
+                            hackVp9Svc = true;
+                            localSdpObject = sdpTransform.parse(offer.sdp);
+                            offerMediaObject = localSdpObject.media[mediaSectionIdx.idx];
+                            sdpUnifiedPlanUtils.addLegacySimulcast({
+                                offerMediaObject,
+                                numStreams: layers.spatialLayers
+                            });
+                            offer = {type: 'offer', sdp: sdpTransform.write(localSdpObject)};
+                        }
+                        logger.debug('send() | calling pc.setLocalDescription() [offer:%o]', offer);
+                        await this._pc.setLocalDescription(offer);
+                        // If encodings are given, apply them now.
+                        if (encodings) {
+                            logger.debug('send() | applying given encodings');
+                            const parameters = transceiver.sender.getParameters();
+                            for (let idx = 0; idx < (parameters.encodings || []).length; ++idx) {
+                                const encoding = parameters.encodings[idx];
+                                const desiredEncoding = encodings[idx];
+                                // Should not happen but just in case.
+                                if (!desiredEncoding)
+                                    break;
+                                parameters.encodings[idx] = Object.assign(encoding, desiredEncoding);
+                            }
+                            await transceiver.sender.setParameters(parameters);
+                        }
+                        // We can now get the transceiver.mid.
+                        const localId = transceiver.mid;
+                        // Set MID.
+                        sendingRtpParameters.mid = localId;
+                        localSdpObject = sdpTransform.parse(this._pc.localDescription.sdp);
+                        offerMediaObject = localSdpObject.media[mediaSectionIdx.idx];
+                        // Set RTCP CNAME.
+                        sendingRtpParameters.rtcp.cname =
+                            sdpCommonUtils.getCname({offerMediaObject});
+                        // Set RTP encodings.
+                        sendingRtpParameters.encodings =
+                            sdpUnifiedPlanUtils.getRtpEncodings({offerMediaObject});
+                        // Complete encodings with given values.
+                        if (encodings) {
+                            for (let idx = 0; idx < sendingRtpParameters.encodings.length; ++idx) {
+                                if (encodings[idx])
+                                    Object.assign(sendingRtpParameters.encodings[idx], encodings[idx]);
+                            }
+                        }
+                        // Hack for VP9 SVC.
+                        if (hackVp9Svc) {
+                            sendingRtpParameters.encodings = [sendingRtpParameters.encodings[0]];
+                        }
+                        // If VP8 or H264 and there is effective simulcast, add scalabilityMode to
+                        // each encoding.
+                        if (sendingRtpParameters.encodings.length > 1 &&
+                            (sendingRtpParameters.codecs[0].mimeType.toLowerCase() === 'video/vp8' ||
+                                sendingRtpParameters.codecs[0].mimeType.toLowerCase() === 'video/h264')) {
+                            for (const encoding of sendingRtpParameters.encodings) {
+                                encoding.scalabilityMode = 'S1T3';
+                            }
+                        }
+                        this._remoteSdp.send({
+                            offerMediaObject,
+                            reuseMid: mediaSectionIdx.reuseMid,
+                            offerRtpParameters: sendingRtpParameters,
+                            answerRtpParameters: sendingRemoteRtpParameters,
+                            codecOptions
+                        });
+                        const answer = {type: 'answer', sdp: this._remoteSdp.getSdp()};
+                        logger.debug('send() | calling pc.setRemoteDescription() [answer:%o]', answer);
+                        await this._pc.setRemoteDescription(answer);
+                        // Store in the map.
+                        this._mapMidTransceiver.set(localId, transceiver);
+                        return {
+                            localId,
+                            rtpParameters: sendingRtpParameters,
+                            rtpSender: transceiver.sender
+                        };
+                    }
+
+                    async stopSending(localId) {
+                        this._assertSendDirection();
+                        logger.debug('stopSending() [localId:%s]', localId);
+                        const transceiver = this._mapMidTransceiver.get(localId);
+                        if (!transceiver)
+                            throw new Error('associated RTCRtpTransceiver not found');
+                        transceiver.sender.replaceTrack(null);
+                        this._pc.removeTrack(transceiver.sender);
+                        this._remoteSdp.closeMediaSection(transceiver.mid);
+                        const offer = await this._pc.createOffer();
+                        logger.debug('stopSending() | calling pc.setLocalDescription() [offer:%o]', offer);
+                        await this._pc.setLocalDescription(offer);
+                        const answer = {type: 'answer', sdp: this._remoteSdp.getSdp()};
+                        logger.debug('stopSending() | calling pc.setRemoteDescription() [answer:%o]', answer);
+                        await this._pc.setRemoteDescription(answer);
+                        this._mapMidTransceiver.delete(localId);
+                    }
+
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    async pauseSending(localId) {
+                        // Unimplemented.
+                    }
+
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    async resumeSending(localId) {
+                        // Unimplemented.
+                    }
+
+                    async replaceTrack(localId, track) {
+                        this._assertSendDirection();
+                        if (track) {
+                            logger.debug('replaceTrack() [localId:%s, track.id:%s]', localId, track.id);
+                        } else {
+                            logger.debug('replaceTrack() [localId:%s, no track]', localId);
+                        }
+                        const transceiver = this._mapMidTransceiver.get(localId);
+                        if (!transceiver)
+                            throw new Error('associated RTCRtpTransceiver not found');
+                        await transceiver.sender.replaceTrack(track);
+                    }
+
+                    async setMaxSpatialLayer(localId, spatialLayer) {
+                        this._assertSendDirection();
+                        logger.debug('setMaxSpatialLayer() [localId:%s, spatialLayer:%s]', localId, spatialLayer);
+                        const transceiver = this._mapMidTransceiver.get(localId);
+                        if (!transceiver)
+                            throw new Error('associated RTCRtpTransceiver not found');
+                        const parameters = transceiver.sender.getParameters();
+                        parameters.encodings.forEach((encoding, idx) => {
+                            if (idx <= spatialLayer)
+                                encoding.active = true;
+                            else
+                                encoding.active = false;
+                        });
+                        await transceiver.sender.setParameters(parameters);
+                    }
+
+                    async setRtpEncodingParameters(localId, params) {
+                        this._assertSendDirection();
+                        logger.debug('setRtpEncodingParameters() [localId:%s, params:%o]', localId, params);
+                        const transceiver = this._mapMidTransceiver.get(localId);
+                        if (!transceiver)
+                            throw new Error('associated RTCRtpTransceiver not found');
+                        const parameters = transceiver.sender.getParameters();
+                        parameters.encodings.forEach((encoding, idx) => {
+                            parameters.encodings[idx] = {...encoding, ...params};
+                        });
+                        await transceiver.sender.setParameters(parameters);
+                    }
+
+                    async getSenderStats(localId) {
+                        this._assertSendDirection();
+                        const transceiver = this._mapMidTransceiver.get(localId);
+                        if (!transceiver)
+                            throw new Error('associated RTCRtpTransceiver not found');
+                        return transceiver.sender.getStats();
+                    }
+
+                    async sendDataChannel({ordered, maxPacketLifeTime, maxRetransmits, label, protocol}) {
+                        var _a;
+                        this._assertSendDirection();
+                        const options = {
+                            negotiated: true,
+                            id: this._nextSendSctpStreamId,
+                            ordered,
+                            maxPacketLifeTime,
+                            maxRetransmitTime: maxPacketLifeTime,
+                            maxRetransmits,
+                            protocol
+                        };
+                        logger.debug('sendDataChannel() [options:%o]', options);
+                        const dataChannel = this._pc.createDataChannel(label, options);
+                        // Increase next id.
+                        this._nextSendSctpStreamId =
+                            ++this._nextSendSctpStreamId % SCTP_NUM_STREAMS.MIS;
+                        // If this is the first DataChannel we need to create the SDP answer with
+                        // m=application section.
+                        if (!this._hasDataChannelMediaSection) {
+                            const offer = await this._pc.createOffer();
+                            const localSdpObject = sdpTransform.parse(offer.sdp);
+                            const offerMediaObject = localSdpObject.media
+                                .find((m) => m.type === 'application');
+                            if (!this._transportReady) {
+                                await this._setupTransport({
+                                    localDtlsRole: (_a = this._forcedLocalDtlsRole) !== null && _a !== void 0 ? _a : 'client',
+                                    localSdpObject
+                                });
+                            }
+                            logger.debug('sendDataChannel() | calling pc.setLocalDescription() [offer:%o]', offer);
+                            await this._pc.setLocalDescription(offer);
+                            this._remoteSdp.sendSctpAssociation({offerMediaObject});
+                            const answer = {type: 'answer', sdp: this._remoteSdp.getSdp()};
+                            logger.debug('sendDataChannel() | calling pc.setRemoteDescription() [answer:%o]', answer);
+                            await this._pc.setRemoteDescription(answer);
+                            this._hasDataChannelMediaSection = true;
+                        }
+                        const sctpStreamParameters = {
+                            streamId: options.id,
+                            ordered: options.ordered,
+                            maxPacketLifeTime: options.maxPacketLifeTime,
+                            maxRetransmits: options.maxRetransmits
+                        };
+                        return {dataChannel, sctpStreamParameters};
+                    }
+
+                    async receive(optionsList) {
+                        var _a;
+                        this._assertRecvDirection();
+                        const results = [];
+                        const mapLocalId = new Map();
+                        for (const options of optionsList) {
+                            const {trackId, kind, rtpParameters} = options;
+                            logger.debug('receive() [trackId:%s, kind:%s]', trackId, kind);
+                            const localId = rtpParameters.mid || String(this._mapMidTransceiver.size);
+                            mapLocalId.set(trackId, localId);
+                            this._remoteSdp.receive({
+                                mid: localId,
+                                kind,
+                                offerRtpParameters: rtpParameters,
+                                streamId: rtpParameters.rtcp.cname,
+                                trackId
+                            });
+                        }
+                        const offer = {type: 'offer', sdp: this._remoteSdp.getSdp()};
+                        logger.debug('receive() | calling pc.setRemoteDescription() [offer:%o]', offer);
+                        await this._pc.setRemoteDescription(offer);
+                        let answer = await this._pc.createAnswer();
+                        const localSdpObject = sdpTransform.parse(answer.sdp);
+                        for (const options of optionsList) {
+                            const {trackId, rtpParameters} = options;
+                            const localId = mapLocalId.get(trackId);
+                            const answerMediaObject = localSdpObject.media
+                                .find((m) => String(m.mid) === localId);
+                            // May need to modify codec parameters in the answer based on codec
+                            // parameters in the offer.
+                            sdpCommonUtils.applyCodecParameters({
+                                offerRtpParameters: rtpParameters,
+                                answerMediaObject
+                            });
+                        }
+                        answer = {type: 'answer', sdp: sdpTransform.write(localSdpObject)};
+                        if (!this._transportReady) {
+                            await this._setupTransport({
+                                localDtlsRole: (_a = this._forcedLocalDtlsRole) !== null && _a !== void 0 ? _a : 'client',
+                                localSdpObject
+                            });
+                        }
+                        logger.debug('receive() | calling pc.setLocalDescription() [answer:%o]', answer);
+                        await this._pc.setLocalDescription(answer);
+                        for (const options of optionsList) {
+                            const {trackId} = options;
+                            const localId = mapLocalId.get(trackId);
+                            const transceiver = this._pc.getTransceivers()
+                                .find((t) => t.mid === localId);
+                            if (!transceiver)
+                                throw new Error('new RTCRtpTransceiver not found');
+                            // Store in the map.
+                            this._mapMidTransceiver.set(localId, transceiver);
+                            results.push({
+                                localId,
+                                track: transceiver.receiver.track,
+                                rtpReceiver: transceiver.receiver
+                            });
+                        }
+                        return results;
+                    }
+
+                    async stopReceiving(localIds) {
+                        this._assertRecvDirection();
+                        for (const localId of localIds) {
+                            logger.debug('stopReceiving() [localId:%s]', localId);
+                            const transceiver = this._mapMidTransceiver.get(localId);
+                            if (!transceiver)
+                                throw new Error('associated RTCRtpTransceiver not found');
+                            this._remoteSdp.closeMediaSection(transceiver.mid);
+                        }
+                        const offer = {type: 'offer', sdp: this._remoteSdp.getSdp()};
+                        logger.debug('stopReceiving() | calling pc.setRemoteDescription() [offer:%o]', offer);
+                        await this._pc.setRemoteDescription(offer);
+                        const answer = await this._pc.createAnswer();
+                        logger.debug('stopReceiving() | calling pc.setLocalDescription() [answer:%o]', answer);
+                        await this._pc.setLocalDescription(answer);
+                        for (const localId of localIds) {
+                            this._mapMidTransceiver.delete(localId);
+                        }
+                    }
+
+                    async pauseReceiving(
+                        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                        localIds) {
+                        // Unimplemented.
+                    }
+
+                    async resumeReceiving(
+                        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                        localIds) {
+                        // Unimplemented.
+                    }
+
+                    async getReceiverStats(localId) {
+                        this._assertRecvDirection();
+                        const transceiver = this._mapMidTransceiver.get(localId);
+                        if (!transceiver)
+                            throw new Error('associated RTCRtpTransceiver not found');
+                        return transceiver.receiver.getStats();
+                    }
+
+                    async receiveDataChannel({sctpStreamParameters, label, protocol}) {
+                        var _a;
+                        this._assertRecvDirection();
+                        const {streamId, ordered, maxPacketLifeTime, maxRetransmits} = sctpStreamParameters;
+                        const options = {
+                            negotiated: true,
+                            id: streamId,
+                            ordered,
+                            maxPacketLifeTime,
+                            maxRetransmitTime: maxPacketLifeTime,
+                            maxRetransmits,
+                            protocol
+                        };
+                        logger.debug('receiveDataChannel() [options:%o]', options);
+                        const dataChannel = this._pc.createDataChannel(label, options);
+                        // If this is the first DataChannel we need to create the SDP offer with
+                        // m=application section.
+                        if (!this._hasDataChannelMediaSection) {
+                            this._remoteSdp.receiveSctpAssociation();
+                            const offer = {type: 'offer', sdp: this._remoteSdp.getSdp()};
+                            logger.debug('receiveDataChannel() | calling pc.setRemoteDescription() [offer:%o]', offer);
+                            await this._pc.setRemoteDescription(offer);
+                            const answer = await this._pc.createAnswer();
+                            if (!this._transportReady) {
+                                const localSdpObject = sdpTransform.parse(answer.sdp);
+                                await this._setupTransport({
+                                    localDtlsRole: (_a = this._forcedLocalDtlsRole) !== null && _a !== void 0 ? _a : 'client',
+                                    localSdpObject
+                                });
+                            }
+                            logger.debug('receiveDataChannel() | calling pc.setRemoteDescription() [answer:%o]', answer);
+                            await this._pc.setLocalDescription(answer);
+                            this._hasDataChannelMediaSection = true;
+                        }
+                        return {dataChannel};
+                    }
+
+                    async _setupTransport({localDtlsRole, localSdpObject}) {
+                        if (!localSdpObject)
+                            localSdpObject = sdpTransform.parse(this._pc.localDescription.sdp);
+                        // Get our local DTLS parameters.
+                        const dtlsParameters = sdpCommonUtils.extractDtlsParameters({sdpObject: localSdpObject});
+                        // Set our DTLS role.
+                        dtlsParameters.role = localDtlsRole;
+                        // Update the remote DTLS role in the SDP.
+                        this._remoteSdp.updateDtlsRole(localDtlsRole === 'client' ? 'server' : 'client');
+                        // Need to tell the remote transport about our parameters.
+                        await new Promise((resolve, reject) => {
+                            this.safeEmit('@connect', {dtlsParameters}, resolve, reject);
+                        });
+                        this._transportReady = true;
+                    }
+
+                    _assertSendDirection() {
+                        if (this._direction !== 'send') {
+                            throw new Error('method can just be called for handlers with "send" direction');
+                        }
+                    }
+
+                    _assertRecvDirection() {
+                        if (this._direction !== 'recv') {
+                            throw new Error('method can just be called for handlers with "recv" direction');
+                        }
+                    }
+                }
+
+                exports.Chrome70 = Chrome70;
+
+
+                /***/
+            }),
+
+            /***/ 656:
+            /***/ (function (__unused_webpack_module, exports, __webpack_require__) {
+
+                "use strict";
+
+                var __createBinding = (this && this.__createBinding) || (Object.create ? (function (o, m, k, k2) {
+                    if (k2 === undefined) k2 = k;
+                    var desc = Object.getOwnPropertyDescriptor(m, k);
+                    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+                        desc = {
+                            enumerable: true, get: function () {
+                                return m[k];
+                            }
+                        };
+                    }
+                    Object.defineProperty(o, k2, desc);
+                }) : (function (o, m, k, k2) {
+                    if (k2 === undefined) k2 = k;
+                    o[k2] = m[k];
+                }));
+                var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function (o, v) {
+                    Object.defineProperty(o, "default", {enumerable: true, value: v});
+                }) : function (o, v) {
+                    o["default"] = v;
+                });
+                var __importStar = (this && this.__importStar) || function (mod) {
+                    if (mod && mod.__esModule) return mod;
+                    var result = {};
+                    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+                    __setModuleDefault(result, mod);
+                    return result;
+                };
+                Object.defineProperty(exports, "__esModule", ({value: true}));
+                exports.Chrome74 = void 0;
+                const sdpTransform = __importStar(__webpack_require__(766));
+                const Logger_1 = __webpack_require__(562);
+                const utils = __importStar(__webpack_require__(347));
+                const ortc = __importStar(__webpack_require__(280));
+                const sdpCommonUtils = __importStar(__webpack_require__(267));
+                const sdpUnifiedPlanUtils = __importStar(__webpack_require__(72));
+                const HandlerInterface_1 = __webpack_require__(316);
+                const RemoteSdp_1 = __webpack_require__(910);
+                const scalabilityModes_1 = __webpack_require__(770);
+                const logger = new Logger_1.Logger('Chrome74');
+                const SCTP_NUM_STREAMS = {OS: 1024, MIS: 1024};
+
+                class Chrome74 extends HandlerInterface_1.HandlerInterface {
+                    constructor() {
+                        super();
+                        // Map of RTCTransceivers indexed by MID.
+                        this._mapMidTransceiver = new Map();
+                        // Local stream for sending.
+                        this._sendStream = new MediaStream();
+                        // Whether a DataChannel m=application section has been created.
+                        this._hasDataChannelMediaSection = false;
+                        // Sending DataChannel id value counter. Incremented for each new DataChannel.
+                        this._nextSendSctpStreamId = 0;
+                        // Got transport local and remote parameters.
+                        this._transportReady = false;
+                    }
+
+                    /**
+                     * Creates a factory function.
+                     */
+                    static createFactory() {
+                        return () => new Chrome74();
+                    }
+
+                    get name() {
+                        return 'Chrome74';
+                    }
+
+                    close() {
+                        logger.debug('close()');
+                        // Close RTCPeerConnection.
+                        if (this._pc) {
+                            try {
+                                this._pc.close();
+                            } catch (error) {
+                            }
+                        }
+                        this.emit('@close');
+                    }
+
+                    async getNativeRtpCapabilities() {
+                        logger.debug('getNativeRtpCapabilities()');
+                        const pc = new RTCPeerConnection({
+                            iceServers: [],
+                            iceTransportPolicy: 'all',
+                            bundlePolicy: 'max-bundle',
+                            rtcpMuxPolicy: 'require',
+                            sdpSemantics: 'unified-plan'
+                        });
+                        try {
+                            pc.addTransceiver('audio');
+                            pc.addTransceiver('video');
+                            const offer = await pc.createOffer();
+                            try {
+                                pc.close();
+                            } catch (error) {
+                            }
+                            const sdpObject = sdpTransform.parse(offer.sdp);
+                            const nativeRtpCapabilities = sdpCommonUtils.extractRtpCapabilities({sdpObject});
+                            return nativeRtpCapabilities;
+                        } catch (error) {
+                            try {
+                                pc.close();
+                            } catch (error2) {
+                            }
+                            throw error;
+                        }
+                    }
+
+                    async getNativeSctpCapabilities() {
+                        logger.debug('getNativeSctpCapabilities()');
+                        return {
+                            numStreams: SCTP_NUM_STREAMS
+                        };
+                    }
+
+                    run({
+                            direction,
+                            iceParameters,
+                            iceCandidates,
+                            dtlsParameters,
+                            sctpParameters,
+                            iceServers,
+                            iceTransportPolicy,
+                            additionalSettings,
+                            proprietaryConstraints,
+                            extendedRtpCapabilities
+                        }) {
+                        logger.debug('run()');
+                        this._direction = direction;
+                        this._remoteSdp = new RemoteSdp_1.RemoteSdp({
+                            iceParameters,
+                            iceCandidates,
+                            dtlsParameters,
+                            sctpParameters
+                        });
+                        this._sendingRtpParametersByKind =
+                            {
+                                audio: ortc.getSendingRtpParameters('audio', extendedRtpCapabilities),
+                                video: ortc.getSendingRtpParameters('video', extendedRtpCapabilities)
+                            };
+                        this._sendingRemoteRtpParametersByKind =
+                            {
+                                audio: ortc.getSendingRemoteRtpParameters('audio', extendedRtpCapabilities),
+                                video: ortc.getSendingRemoteRtpParameters('video', extendedRtpCapabilities)
+                            };
+                        if (dtlsParameters.role && dtlsParameters.role !== 'auto') {
+                            this._forcedLocalDtlsRole = dtlsParameters.role === 'server'
+                                ? 'client'
+                                : 'server';
+                        }
+                        this._pc = new RTCPeerConnection({
+                            iceServers: iceServers || [],
+                            iceTransportPolicy: iceTransportPolicy || 'all',
+                            bundlePolicy: 'max-bundle',
+                            rtcpMuxPolicy: 'require',
+                            sdpSemantics: 'unified-plan',
+                            ...additionalSettings
+                        }, proprietaryConstraints);
+                        // Handle RTCPeerConnection connection status.
+                        this._pc.addEventListener('iceconnectionstatechange', () => {
+                            switch (this._pc.iceConnectionState) {
+                                case 'checking':
+                                    this.emit('@connectionstatechange', 'connecting');
+                                    break;
+                                case 'connected':
+                                case 'completed':
+                                    this.emit('@connectionstatechange', 'connected');
+                                    break;
+                                case 'failed':
+                                    this.emit('@connectionstatechange', 'failed');
+                                    break;
+                                case 'disconnected':
+                                    this.emit('@connectionstatechange', 'disconnected');
+                                    break;
+                                case 'closed':
+                                    this.emit('@connectionstatechange', 'closed');
+                                    break;
+                            }
+                        });
+                    }
+
+                    async updateIceServers(iceServers) {
+                        logger.debug('updateIceServers()');
+                        const configuration = this._pc.getConfiguration();
+                        configuration.iceServers = iceServers;
+                        this._pc.setConfiguration(configuration);
+                    }
+
+                    async restartIce(iceParameters) {
+                        logger.debug('restartIce()');
+                        // Provide the remote SDP handler with new remote ICE parameters.
+                        this._remoteSdp.updateIceParameters(iceParameters);
+                        if (!this._transportReady)
+                            return;
+                        if (this._direction === 'send') {
+                            const offer = await this._pc.createOffer({iceRestart: true});
+                            logger.debug('restartIce() | calling pc.setLocalDescription() [offer:%o]', offer);
+                            await this._pc.setLocalDescription(offer);
+                            const answer = {type: 'answer', sdp: this._remoteSdp.getSdp()};
+                            logger.debug('restartIce() | calling pc.setRemoteDescription() [answer:%o]', answer);
+                            await this._pc.setRemoteDescription(answer);
+                        } else {
+                            const offer = {type: 'offer', sdp: this._remoteSdp.getSdp()};
+                            logger.debug('restartIce() | calling pc.setRemoteDescription() [offer:%o]', offer);
+                            await this._pc.setRemoteDescription(offer);
+                            const answer = await this._pc.createAnswer();
+                            logger.debug('restartIce() | calling pc.setLocalDescription() [answer:%o]', answer);
+                            await this._pc.setLocalDescription(answer);
+                        }
+                    }
+
+                    async getTransportStats() {
+                        return this._pc.getStats();
+                    }
+
+                    async send({track, encodings, codecOptions, codec}) {
+                        var _a;
+                        this._assertSendDirection();
+                        logger.debug('send() [kind:%s, track.id:%s]', track.kind, track.id);
+                        if (encodings && encodings.length > 1) {
+                            encodings.forEach((encoding, idx) => {
+                                encoding.rid = `r${idx}`;
+                            });
+                        }
+                        const sendingRtpParameters = utils.clone(this._sendingRtpParametersByKind[track.kind], {});
+                        // This may throw.
+                        sendingRtpParameters.codecs =
+                            ortc.reduceCodecs(sendingRtpParameters.codecs, codec);
+                        const sendingRemoteRtpParameters = utils.clone(this._sendingRemoteRtpParametersByKind[track.kind], {});
+                        // This may throw.
+                        sendingRemoteRtpParameters.codecs =
+                            ortc.reduceCodecs(sendingRemoteRtpParameters.codecs, codec);
+                        const mediaSectionIdx = this._remoteSdp.getNextMediaSectionIdx();
+                        const transceiver = this._pc.addTransceiver(track, {
+                            direction: 'sendonly',
+                            streams: [this._sendStream],
+                            sendEncodings: encodings
+                        });
+                        let offer = await this._pc.createOffer();
+                        let localSdpObject = sdpTransform.parse(offer.sdp);
+                        let offerMediaObject;
+                        if (!this._transportReady) {
+                            await this._setupTransport({
+                                localDtlsRole: (_a = this._forcedLocalDtlsRole) !== null && _a !== void 0 ? _a : 'client',
+                                localSdpObject
+                            });
+                        }
+                        // Special case for VP9 with SVC.
+                        let hackVp9Svc = false;
+                        const layers = (0, scalabilityModes_1.parse)((encodings || [{}])[0].scalabilityMode);
+                        if (encodings &&
+                            encodings.length === 1 &&
+                            layers.spatialLayers > 1 &&
+                            sendingRtpParameters.codecs[0].mimeType.toLowerCase() === 'video/vp9') {
+                            logger.debug('send() | enabling legacy simulcast for VP9 SVC');
+                            hackVp9Svc = true;
+                            localSdpObject = sdpTransform.parse(offer.sdp);
+                            offerMediaObject = localSdpObject.media[mediaSectionIdx.idx];
+                            sdpUnifiedPlanUtils.addLegacySimulcast({
+                                offerMediaObject,
+                                numStreams: layers.spatialLayers
+                            });
+                            offer = {type: 'offer', sdp: sdpTransform.write(localSdpObject)};
+                        }
+                        logger.debug('send() | calling pc.setLocalDescription() [offer:%o]', offer);
+                        await this._pc.setLocalDescription(offer);
+                        // We can now get the transceiver.mid.
+                        const localId = transceiver.mid;
+                        // Set MID.
+                        sendingRtpParameters.mid = localId;
+                        localSdpObject = sdpTransform.parse(this._pc.localDescription.sdp);
+                        offerMediaObject = localSdpObject.media[mediaSectionIdx.idx];
+                        // Set RTCP CNAME.
+                        sendingRtpParameters.rtcp.cname =
+                            sdpCommonUtils.getCname({offerMediaObject});
+                        // Set RTP encodings by parsing the SDP offer if no encodings are given.
+                        if (!encodings) {
+                            sendingRtpParameters.encodings =
+                                sdpUnifiedPlanUtils.getRtpEncodings({offerMediaObject});
+                        }
+                            // Set RTP encodings by parsing the SDP offer and complete them with given
+                        // one if just a single encoding has been given.
+                        else if (encodings.length === 1) {
+                            let newEncodings = sdpUnifiedPlanUtils.getRtpEncodings({offerMediaObject});
+                            Object.assign(newEncodings[0], encodings[0]);
+                            // Hack for VP9 SVC.
+                            if (hackVp9Svc)
+                                newEncodings = [newEncodings[0]];
+                            sendingRtpParameters.encodings = newEncodings;
+                        }
+                        // Otherwise if more than 1 encoding are given use them verbatim.
+                        else {
+                            sendingRtpParameters.encodings = encodings;
+                        }
+                        // If VP8 or H264 and there is effective simulcast, add scalabilityMode to
+                        // each encoding.
+                        if (sendingRtpParameters.encodings.length > 1 &&
+                            (sendingRtpParameters.codecs[0].mimeType.toLowerCase() === 'video/vp8' ||
+                                sendingRtpParameters.codecs[0].mimeType.toLowerCase() === 'video/h264')) {
+                            for (const encoding of sendingRtpParameters.encodings) {
+                                encoding.scalabilityMode = 'S1T3';
+                            }
+                        }
+                        this._remoteSdp.send({
+                            offerMediaObject,
+                            reuseMid: mediaSectionIdx.reuseMid,
+                            offerRtpParameters: sendingRtpParameters,
+                            answerRtpParameters: sendingRemoteRtpParameters,
+                            codecOptions,
+                            extmapAllowMixed: true
+                        });
+                        const answer = {type: 'answer', sdp: this._remoteSdp.getSdp()};
+                        logger.debug('send() | calling pc.setRemoteDescription() [answer:%o]', answer);
+                        await this._pc.setRemoteDescription(answer);
+                        // Store in the map.
+                        this._mapMidTransceiver.set(localId, transceiver);
+                        return {
+                            localId,
+                            rtpParameters: sendingRtpParameters,
+                            rtpSender: transceiver.sender
+                        };
+                    }
+
+                    async stopSending(localId) {
+                        this._assertSendDirection();
+                        logger.debug('stopSending() [localId:%s]', localId);
+                        const transceiver = this._mapMidTransceiver.get(localId);
+                        if (!transceiver)
+                            throw new Error('associated RTCRtpTransceiver not found');
+                        transceiver.sender.replaceTrack(null);
+                        this._pc.removeTrack(transceiver.sender);
+                        this._remoteSdp.closeMediaSection(transceiver.mid);
+                        const offer = await this._pc.createOffer();
+                        logger.debug('stopSending() | calling pc.setLocalDescription() [offer:%o]', offer);
+                        await this._pc.setLocalDescription(offer);
+                        const answer = {type: 'answer', sdp: this._remoteSdp.getSdp()};
+                        logger.debug('stopSending() | calling pc.setRemoteDescription() [answer:%o]', answer);
+                        await this._pc.setRemoteDescription(answer);
+                        this._mapMidTransceiver.delete(localId);
+                    }
+
+                    async pauseSending(localId) {
+                        this._assertSendDirection();
+                        logger.debug('pauseSending() [localId:%s]', localId);
+                        const transceiver = this._mapMidTransceiver.get(localId);
+                        if (!transceiver)
+                            throw new Error('associated RTCRtpTransceiver not found');
+                        transceiver.direction = 'inactive';
+                        const offer = await this._pc.createOffer();
+                        logger.debug('pauseSending() | calling pc.setLocalDescription() [offer:%o]', offer);
+                        await this._pc.setLocalDescription(offer);
+                        const answer = {type: 'answer', sdp: this._remoteSdp.getSdp()};
+                        logger.debug('pauseSending() | calling pc.setRemoteDescription() [answer:%o]', answer);
+                        await this._pc.setRemoteDescription(answer);
+                    }
+
+                    async resumeSending(localId) {
+                        this._assertSendDirection();
+                        logger.debug('resumeSending() [localId:%s]', localId);
+                        const transceiver = this._mapMidTransceiver.get(localId);
+                        if (!transceiver)
+                            throw new Error('associated RTCRtpTransceiver not found');
+                        transceiver.direction = 'sendonly';
+                        const offer = await this._pc.createOffer();
+                        logger.debug('resumeSending() | calling pc.setLocalDescription() [offer:%o]', offer);
+                        await this._pc.setLocalDescription(offer);
+                        const answer = {type: 'answer', sdp: this._remoteSdp.getSdp()};
+                        logger.debug('resumeSending() | calling pc.setRemoteDescription() [answer:%o]', answer);
+                        await this._pc.setRemoteDescription(answer);
+                    }
+
+                    async replaceTrack(localId, track) {
+                        this._assertSendDirection();
+                        if (track) {
+                            logger.debug('replaceTrack() [localId:%s, track.id:%s]', localId, track.id);
+                        } else {
+                            logger.debug('replaceTrack() [localId:%s, no track]', localId);
+                        }
+                        const transceiver = this._mapMidTransceiver.get(localId);
+                        if (!transceiver)
+                            throw new Error('associated RTCRtpTransceiver not found');
+                        await transceiver.sender.replaceTrack(track);
+                    }
+
+                    async setMaxSpatialLayer(localId, spatialLayer) {
+                        this._assertSendDirection();
+                        logger.debug('setMaxSpatialLayer() [localId:%s, spatialLayer:%s]', localId, spatialLayer);
+                        const transceiver = this._mapMidTransceiver.get(localId);
+                        if (!transceiver)
+                            throw new Error('associated RTCRtpTransceiver not found');
+                        const parameters = transceiver.sender.getParameters();
+                        parameters.encodings.forEach((encoding, idx) => {
+                            if (idx <= spatialLayer)
+                                encoding.active = true;
+                            else
+                                encoding.active = false;
+                        });
+                        await transceiver.sender.setParameters(parameters);
+                    }
+
+                    async setRtpEncodingParameters(localId, params) {
+                        this._assertSendDirection();
+                        logger.debug('setRtpEncodingParameters() [localId:%s, params:%o]', localId, params);
+                        const transceiver = this._mapMidTransceiver.get(localId);
+                        if (!transceiver)
+                            throw new Error('associated RTCRtpTransceiver not found');
+                        const parameters = transceiver.sender.getParameters();
+                        parameters.encodings.forEach((encoding, idx) => {
+                            parameters.encodings[idx] = {...encoding, ...params};
+                        });
+                        await transceiver.sender.setParameters(parameters);
+                    }
+
+                    async getSenderStats(localId) {
+                        this._assertSendDirection();
+                        const transceiver = this._mapMidTransceiver.get(localId);
+                        if (!transceiver)
+                            throw new Error('associated RTCRtpTransceiver not found');
+                        return transceiver.sender.getStats();
+                    }
+
+                    async sendDataChannel({ordered, maxPacketLifeTime, maxRetransmits, label, protocol}) {
+                        var _a;
+                        this._assertSendDirection();
+                        const options = {
+                            negotiated: true,
+                            id: this._nextSendSctpStreamId,
+                            ordered,
+                            maxPacketLifeTime,
+                            maxRetransmits,
+                            protocol
+                        };
+                        logger.debug('sendDataChannel() [options:%o]', options);
+                        const dataChannel = this._pc.createDataChannel(label, options);
+                        // Increase next id.
+                        this._nextSendSctpStreamId =
+                            ++this._nextSendSctpStreamId % SCTP_NUM_STREAMS.MIS;
+                        // If this is the first DataChannel we need to create the SDP answer with
+                        // m=application section.
+                        if (!this._hasDataChannelMediaSection) {
+                            const offer = await this._pc.createOffer();
+                            const localSdpObject = sdpTransform.parse(offer.sdp);
+                            const offerMediaObject = localSdpObject.media
+                                .find((m) => m.type === 'application');
+                            if (!this._transportReady) {
+                                await this._setupTransport({
+                                    localDtlsRole: (_a = this._forcedLocalDtlsRole) !== null && _a !== void 0 ? _a : 'client',
+                                    localSdpObject
+                                });
+                            }
+                            logger.debug('sendDataChannel() | calling pc.setLocalDescription() [offer:%o]', offer);
+                            await this._pc.setLocalDescription(offer);
+                            this._remoteSdp.sendSctpAssociation({offerMediaObject});
+                            const answer = {type: 'answer', sdp: this._remoteSdp.getSdp()};
+                            logger.debug('sendDataChannel() | calling pc.setRemoteDescription() [answer:%o]', answer);
+                            await this._pc.setRemoteDescription(answer);
+                            this._hasDataChannelMediaSection = true;
+                        }
+                        const sctpStreamParameters = {
+                            streamId: options.id,
+                            ordered: options.ordered,
+                            maxPacketLifeTime: options.maxPacketLifeTime,
+                            maxRetransmits: options.maxRetransmits
+                        };
+                        return {dataChannel, sctpStreamParameters};
+                    }
+
+                    async receive(optionsList) {
+                        var _a;
+                        this._assertRecvDirection();
+                        const results = [];
+                        const mapLocalId = new Map();
+                        for (const options of optionsList) {
+                            const {trackId, kind, rtpParameters} = options;
+                            logger.debug('receive() [trackId:%s, kind:%s]', trackId, kind);
+                            const localId = rtpParameters.mid || String(this._mapMidTransceiver.size);
+                            mapLocalId.set(trackId, localId);
+                            this._remoteSdp.receive({
+                                mid: localId,
+                                kind,
+                                offerRtpParameters: rtpParameters,
+                                streamId: rtpParameters.rtcp.cname,
+                                trackId
+                            });
+                        }
+                        const offer = {type: 'offer', sdp: this._remoteSdp.getSdp()};
+                        logger.debug('receive() | calling pc.setRemoteDescription() [offer:%o]', offer);
+                        await this._pc.setRemoteDescription(offer);
+                        let answer = await this._pc.createAnswer();
+                        const localSdpObject = sdpTransform.parse(answer.sdp);
+                        for (const options of optionsList) {
+                            const {trackId, rtpParameters} = options;
+                            const localId = mapLocalId.get(trackId);
+                            const answerMediaObject = localSdpObject.media
+                                .find((m) => String(m.mid) === localId);
+                            // May need to modify codec parameters in the answer based on codec
+                            // parameters in the offer.
+                            sdpCommonUtils.applyCodecParameters({
+                                offerRtpParameters: rtpParameters,
+                                answerMediaObject
+                            });
+                        }
+                        answer = {type: 'answer', sdp: sdpTransform.write(localSdpObject)};
+                        if (!this._transportReady) {
+                            await this._setupTransport({
+                                localDtlsRole: (_a = this._forcedLocalDtlsRole) !== null && _a !== void 0 ? _a : 'client',
+                                localSdpObject
+                            });
+                        }
+                        logger.debug('receive() | calling pc.setLocalDescription() [answer:%o]', answer);
+                        await this._pc.setLocalDescription(answer);
+                        for (const options of optionsList) {
+                            const {trackId} = options;
+                            const localId = mapLocalId.get(trackId);
+                            const transceiver = this._pc.getTransceivers()
+                                .find((t) => t.mid === localId);
+                            if (!transceiver) {
+                                throw new Error('new RTCRtpTransceiver not found');
+                            } else {
+                                // Store in the map.
+                                this._mapMidTransceiver.set(localId, transceiver);
+                                results.push({
+                                    localId,
+                                    track: transceiver.receiver.track,
+                                    rtpReceiver: transceiver.receiver
+                                });
+                            }
+                        }
+                        return results;
+                    }
+
+                    async stopReceiving(localIds) {
+                        this._assertRecvDirection();
+                        for (const localId of localIds) {
+                            logger.debug('stopReceiving() [localId:%s]', localId);
+                            const transceiver = this._mapMidTransceiver.get(localId);
+                            if (!transceiver)
+                                throw new Error('associated RTCRtpTransceiver not found');
+                            this._remoteSdp.closeMediaSection(transceiver.mid);
+                        }
+                        const offer = {type: 'offer', sdp: this._remoteSdp.getSdp()};
+                        logger.debug('stopReceiving() | calling pc.setRemoteDescription() [offer:%o]', offer);
+                        await this._pc.setRemoteDescription(offer);
+                        const answer = await this._pc.createAnswer();
+                        logger.debug('stopReceiving() | calling pc.setLocalDescription() [answer:%o]', answer);
+                        await this._pc.setLocalDescription(answer);
+                        for (const localId of localIds) {
+                            this._mapMidTransceiver.delete(localId);
+                        }
+                    }
+
+                    async pauseReceiving(localIds) {
+                        this._assertRecvDirection();
+                        for (const localId of localIds) {
+                            logger.debug('pauseReceiving() [localId:%s]', localId);
+                            const transceiver = this._mapMidTransceiver.get(localId);
+                            if (!transceiver)
+                                throw new Error('associated RTCRtpTransceiver not found');
+                            transceiver.direction = 'inactive';
+                        }
+                        const offer = {type: 'offer', sdp: this._remoteSdp.getSdp()};
+                        logger.debug('pauseReceiving() | calling pc.setRemoteDescription() [offer:%o]', offer);
+                        await this._pc.setRemoteDescription(offer);
+                        const answer = await this._pc.createAnswer();
+                        logger.debug('pauseReceiving() | calling pc.setLocalDescription() [answer:%o]', answer);
+                        await this._pc.setLocalDescription(answer);
+                    }
+
+                    async resumeReceiving(localIds) {
+                        this._assertRecvDirection();
+                        for (const localId of localIds) {
+                            logger.debug('resumeReceiving() [localId:%s]', localId);
+                            const transceiver = this._mapMidTransceiver.get(localId);
+                            if (!transceiver)
+                                throw new Error('associated RTCRtpTransceiver not found');
+                            transceiver.direction = 'recvonly';
+                        }
+                        const offer = {type: 'offer', sdp: this._remoteSdp.getSdp()};
+                        logger.debug('resumeReceiving() | calling pc.setRemoteDescription() [offer:%o]', offer);
+                        await this._pc.setRemoteDescription(offer);
+                        const answer = await this._pc.createAnswer();
+                        logger.debug('resumeReceiving() | calling pc.setLocalDescription() [answer:%o]', answer);
+                        await this._pc.setLocalDescription(answer);
+                    }
+
+                    async getReceiverStats(localId) {
+                        this._assertRecvDirection();
+                        const transceiver = this._mapMidTransceiver.get(localId);
+                        if (!transceiver)
+                            throw new Error('associated RTCRtpTransceiver not found');
+                        return transceiver.receiver.getStats();
+                    }
+
+                    async receiveDataChannel({sctpStreamParameters, label, protocol}) {
+                        var _a;
+                        this._assertRecvDirection();
+                        const {streamId, ordered, maxPacketLifeTime, maxRetransmits} = sctpStreamParameters;
+                        const options = {
+                            negotiated: true,
+                            id: streamId,
+                            ordered,
+                            maxPacketLifeTime,
+                            maxRetransmits,
+                            protocol
+                        };
+                        logger.debug('receiveDataChannel() [options:%o]', options);
+                        const dataChannel = this._pc.createDataChannel(label, options);
+                        // If this is the first DataChannel we need to create the SDP offer with
+                        // m=application section.
+                        if (!this._hasDataChannelMediaSection) {
+                            this._remoteSdp.receiveSctpAssociation();
+                            const offer = {type: 'offer', sdp: this._remoteSdp.getSdp()};
+                            logger.debug('receiveDataChannel() | calling pc.setRemoteDescription() [offer:%o]', offer);
+                            await this._pc.setRemoteDescription(offer);
+                            const answer = await this._pc.createAnswer();
+                            if (!this._transportReady) {
+                                const localSdpObject = sdpTransform.parse(answer.sdp);
+                                await this._setupTransport({
+                                    localDtlsRole: (_a = this._forcedLocalDtlsRole) !== null && _a !== void 0 ? _a : 'client',
+                                    localSdpObject
+                                });
+                            }
+                            logger.debug('receiveDataChannel() | calling pc.setRemoteDescription() [answer:%o]', answer);
+                            await this._pc.setLocalDescription(answer);
+                            this._hasDataChannelMediaSection = true;
+                        }
+                        return {dataChannel};
+                    }
+
+                    async _setupTransport({localDtlsRole, localSdpObject}) {
+                        if (!localSdpObject)
+                            localSdpObject = sdpTransform.parse(this._pc.localDescription.sdp);
+                        // Get our local DTLS parameters.
+                        const dtlsParameters = sdpCommonUtils.extractDtlsParameters({sdpObject: localSdpObject});
+                        // Set our DTLS role.
+                        dtlsParameters.role = localDtlsRole;
+                        // Update the remote DTLS role in the SDP.
+                        this._remoteSdp.updateDtlsRole(localDtlsRole === 'client' ? 'server' : 'client');
+                        // Need to tell the remote transport about our parameters.
+                        await new Promise((resolve, reject) => {
+                            this.safeEmit('@connect', {dtlsParameters}, resolve, reject);
+                        });
+                        this._transportReady = true;
+                    }
+
+                    _assertSendDirection() {
+                        if (this._direction !== 'send') {
+                            throw new Error('method can just be called for handlers with "send" direction');
+                        }
+                    }
+
+                    _assertRecvDirection() {
+                        if (this._direction !== 'recv') {
+                            throw new Error('method can just be called for handlers with "recv" direction');
+                        }
+                    }
+                }
+
+                exports.Chrome74 = Chrome74;
+
+
+                /***/
+            }),
+
+            /***/ 392:
+            /***/ (function (__unused_webpack_module, exports, __webpack_require__) {
+
+                "use strict";
+
+                var __createBinding = (this && this.__createBinding) || (Object.create ? (function (o, m, k, k2) {
+                    if (k2 === undefined) k2 = k;
+                    var desc = Object.getOwnPropertyDescriptor(m, k);
+                    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+                        desc = {
+                            enumerable: true, get: function () {
+                                return m[k];
+                            }
+                        };
+                    }
+                    Object.defineProperty(o, k2, desc);
+                }) : (function (o, m, k, k2) {
+                    if (k2 === undefined) k2 = k;
+                    o[k2] = m[k];
+                }));
+                var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function (o, v) {
+                    Object.defineProperty(o, "default", {enumerable: true, value: v});
+                }) : function (o, v) {
+                    o["default"] = v;
+                });
+                var __importStar = (this && this.__importStar) || function (mod) {
+                    if (mod && mod.__esModule) return mod;
+                    var result = {};
+                    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+                    __setModuleDefault(result, mod);
+                    return result;
+                };
+                Object.defineProperty(exports, "__esModule", ({value: true}));
+                exports.Edge11 = void 0;
+                const Logger_1 = __webpack_require__(562);
+                const errors_1 = __webpack_require__(992);
+                const utils = __importStar(__webpack_require__(347));
+                const ortc = __importStar(__webpack_require__(280));
+                const edgeUtils = __importStar(__webpack_require__(635));
+                const HandlerInterface_1 = __webpack_require__(316);
+                const logger = new Logger_1.Logger('Edge11');
+
+                class Edge11 extends HandlerInterface_1.HandlerInterface {
+                    constructor() {
+                        super();
+                        // Map of RTCRtpSenders indexed by id.
+                        this._rtpSenders = new Map();
+                        // Map of RTCRtpReceivers indexed by id.
+                        this._rtpReceivers = new Map();
+                        // Next localId for sending tracks.
+                        this._nextSendLocalId = 0;
+                        // Got transport local and remote parameters.
+                        this._transportReady = false;
+                    }
+
+                    /**
+                     * Creates a factory function.
+                     */
+                    static createFactory() {
+                        return () => new Edge11();
+                    }
+
+                    get name() {
+                        return 'Edge11';
+                    }
+
+                    close() {
+                        logger.debug('close()');
+                        // Close the ICE gatherer.
+                        // NOTE: Not yet implemented by Edge.
+                        try {
+                            this._iceGatherer.close();
+                        } catch (error) {
+                        }
+                        // Close the ICE transport.
+                        try {
+                            this._iceTransport.stop();
+                        } catch (error) {
+                        }
+                        // Close the DTLS transport.
+                        try {
+                            this._dtlsTransport.stop();
+                        } catch (error) {
+                        }
+                        // Close RTCRtpSenders.
+                        for (const rtpSender of this._rtpSenders.values()) {
+                            try {
+                                rtpSender.stop();
+                            } catch (error) {
+                            }
+                        }
+                        // Close RTCRtpReceivers.
+                        for (const rtpReceiver of this._rtpReceivers.values()) {
+                            try {
+                                rtpReceiver.stop();
+                            } catch (error) {
+                            }
+                        }
+                        this.emit('@close');
+                    }
+
+                    async getNativeRtpCapabilities() {
+                        logger.debug('getNativeRtpCapabilities()');
+                        return edgeUtils.getCapabilities();
+                    }
+
+                    async getNativeSctpCapabilities() {
+                        logger.debug('getNativeSctpCapabilities()');
+                        return {
+                            numStreams: {OS: 0, MIS: 0}
+                        };
+                    }
+
+                    run({
+                            direction, // eslint-disable-line @typescript-eslint/no-unused-vars
+                            iceParameters, iceCandidates, dtlsParameters, sctpParameters, // eslint-disable-line @typescript-eslint/no-unused-vars
+                            iceServers, iceTransportPolicy, additionalSettings, // eslint-disable-line @typescript-eslint/no-unused-vars
+                            proprietaryConstraints, // eslint-disable-line @typescript-eslint/no-unused-vars
+                            extendedRtpCapabilities
+                        }) {
+                        logger.debug('run()');
+                        this._sendingRtpParametersByKind =
+                            {
+                                audio: ortc.getSendingRtpParameters('audio', extendedRtpCapabilities),
+                                video: ortc.getSendingRtpParameters('video', extendedRtpCapabilities)
+                            };
+                        this._remoteIceParameters = iceParameters;
+                        this._remoteIceCandidates = iceCandidates;
+                        this._remoteDtlsParameters = dtlsParameters;
+                        this._cname = `CNAME-${utils.generateRandomNumber()}`;
+                        this._setIceGatherer({iceServers, iceTransportPolicy});
+                        this._setIceTransport();
+                        this._setDtlsTransport();
+                    }
+
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    async updateIceServers(iceServers) {
+                        // NOTE: Edge 11 does not implement iceGatherer.gater().
+                        throw new errors_1.UnsupportedError('not supported');
+                    }
+
+                    async restartIce(iceParameters) {
+                        logger.debug('restartIce()');
+                        this._remoteIceParameters = iceParameters;
+                        if (!this._transportReady)
+                            return;
+                        logger.debug('restartIce() | calling iceTransport.start()');
+                        this._iceTransport.start(this._iceGatherer, iceParameters, 'controlling');
+                        for (const candidate of this._remoteIceCandidates) {
+                            this._iceTransport.addRemoteCandidate(candidate);
+                        }
+                        this._iceTransport.addRemoteCandidate({});
+                    }
+
+                    async getTransportStats() {
+                        return this._iceTransport.getStats();
+                    }
+
+                    async send(
+                        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                        {track, encodings, codecOptions, codec}) {
+                        logger.debug('send() [kind:%s, track.id:%s]', track.kind, track.id);
+                        if (!this._transportReady)
+                            await this._setupTransport({localDtlsRole: 'server'});
+                        logger.debug('send() | calling new RTCRtpSender()');
+                        const rtpSender = new RTCRtpSender(track, this._dtlsTransport);
+                        const rtpParameters = utils.clone(this._sendingRtpParametersByKind[track.kind], {});
+                        rtpParameters.codecs = ortc.reduceCodecs(rtpParameters.codecs, codec);
+                        const useRtx = rtpParameters.codecs
+                            .some((_codec) => /.+\/rtx$/i.test(_codec.mimeType));
+                        if (!encodings)
+                            encodings = [{}];
+                        for (const encoding of encodings) {
+                            encoding.ssrc = utils.generateRandomNumber();
+                            if (useRtx)
+                                encoding.rtx = {ssrc: utils.generateRandomNumber()};
+                        }
+                        rtpParameters.encodings = encodings;
+                        // Fill RTCRtpParameters.rtcp.
+                        rtpParameters.rtcp =
+                            {
+                                cname: this._cname,
+                                reducedSize: true,
+                                mux: true
+                            };
+                        // NOTE: Convert our standard RTCRtpParameters into those that Edge
+                        // expects.
+                        const edgeRtpParameters = edgeUtils.mangleRtpParameters(rtpParameters);
+                        logger.debug('send() | calling rtpSender.send() [params:%o]', edgeRtpParameters);
+                        await rtpSender.send(edgeRtpParameters);
+                        const localId = String(this._nextSendLocalId);
+                        this._nextSendLocalId++;
+                        // Store it.
+                        this._rtpSenders.set(localId, rtpSender);
+                        return {localId, rtpParameters, rtpSender};
+                    }
+
+                    async stopSending(localId) {
+                        logger.debug('stopSending() [localId:%s]', localId);
+                        const rtpSender = this._rtpSenders.get(localId);
+                        if (!rtpSender)
+                            throw new Error('RTCRtpSender not found');
+                        this._rtpSenders.delete(localId);
+                        try {
+                            logger.debug('stopSending() | calling rtpSender.stop()');
+                            rtpSender.stop();
+                        } catch (error) {
+                            logger.warn('stopSending() | rtpSender.stop() failed:%o', error);
+                            throw error;
+                        }
+                    }
+
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    async pauseSending(localId) {
+                        // Unimplemented.
+                    }
+
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    async resumeSending(localId) {
+                        // Unimplemented.
+                    }
+
+                    async replaceTrack(localId, track) {
+                        if (track) {
+                            logger.debug('replaceTrack() [localId:%s, track.id:%s]', localId, track.id);
+                        } else {
+                            logger.debug('replaceTrack() [localId:%s, no track]', localId);
+                        }
+                        const rtpSender = this._rtpSenders.get(localId);
+                        if (!rtpSender)
+                            throw new Error('RTCRtpSender not found');
+                        rtpSender.setTrack(track);
+                    }
+
+                    async setMaxSpatialLayer(localId, spatialLayer) {
+                        logger.debug('setMaxSpatialLayer() [localId:%s, spatialLayer:%s]', localId, spatialLayer);
+                        const rtpSender = this._rtpSenders.get(localId);
+                        if (!rtpSender)
+                            throw new Error('RTCRtpSender not found');
+                        const parameters = rtpSender.getParameters();
+                        parameters.encodings
+                            .forEach((encoding, idx) => {
+                                if (idx <= spatialLayer)
+                                    encoding.active = true;
+                                else
+                                    encoding.active = false;
+                            });
+                        await rtpSender.setParameters(parameters);
+                    }
+
+                    async setRtpEncodingParameters(localId, params) {
+                        logger.debug('setRtpEncodingParameters() [localId:%s, params:%o]', localId, params);
+                        const rtpSender = this._rtpSenders.get(localId);
+                        if (!rtpSender)
+                            throw new Error('RTCRtpSender not found');
+                        const parameters = rtpSender.getParameters();
+                        parameters.encodings.forEach((encoding, idx) => {
+                            parameters.encodings[idx] = {...encoding, ...params};
+                        });
+                        await rtpSender.setParameters(parameters);
+                    }
+
+                    async getSenderStats(localId) {
+                        const rtpSender = this._rtpSenders.get(localId);
+                        if (!rtpSender)
+                            throw new Error('RTCRtpSender not found');
+                        return rtpSender.getStats();
+                    }
+
+                    async sendDataChannel(
+                        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                        options) {
+                        throw new errors_1.UnsupportedError('not implemented');
+                    }
+
+                    async receive(optionsList) {
+                        const results = [];
+                        for (const options of optionsList) {
+                            const {trackId, kind} = options;
+                            logger.debug('receive() [trackId:%s, kind:%s]', trackId, kind);
+                        }
+                        if (!this._transportReady)
+                            await this._setupTransport({localDtlsRole: 'server'});
+                        for (const options of optionsList) {
+                            const {trackId, kind, rtpParameters} = options;
+                            logger.debug('receive() | calling new RTCRtpReceiver()');
+                            const rtpReceiver = new RTCRtpReceiver(this._dtlsTransport, kind);
+                            rtpReceiver.addEventListener('error', (event) => {
+                                logger.error('rtpReceiver "error" event [event:%o]', event);
+                            });
+                            // NOTE: Convert our standard RTCRtpParameters into those that Edge
+                            // expects.
+                            const edgeRtpParameters = edgeUtils.mangleRtpParameters(rtpParameters);
+                            logger.debug('receive() | calling rtpReceiver.receive() [params:%o]', edgeRtpParameters);
+                            await rtpReceiver.receive(edgeRtpParameters);
+                            const localId = trackId;
+                            // Store it.
+                            this._rtpReceivers.set(localId, rtpReceiver);
+                            results.push({
+                                localId,
+                                track: rtpReceiver.track,
+                                rtpReceiver
+                            });
+                        }
+                        return results;
+                    }
+
+                    async stopReceiving(localIds) {
+                        for (const localId of localIds) {
+                            logger.debug('stopReceiving() [localId:%s]', localId);
+                            const rtpReceiver = this._rtpReceivers.get(localId);
+                            if (!rtpReceiver)
+                                throw new Error('RTCRtpReceiver not found');
+                            this._rtpReceivers.delete(localId);
+                            try {
+                                logger.debug('stopReceiving() | calling rtpReceiver.stop()');
+                                rtpReceiver.stop();
+                            } catch (error) {
+                                logger.warn('stopReceiving() | rtpReceiver.stop() failed:%o', error);
+                            }
+                        }
+                    }
+
+                    async pauseReceiving(
+                        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                        localIds) {
+                        // Unimplemented.
+                    }
+
+                    async resumeReceiving(
+                        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                        localIds) {
+                        // Unimplemented.
+                    }
+
+                    async getReceiverStats(localId) {
+                        const rtpReceiver = this._rtpReceivers.get(localId);
+                        if (!rtpReceiver)
+                            throw new Error('RTCRtpReceiver not found');
+                        return rtpReceiver.getStats();
+                    }
+
+                    async receiveDataChannel(
+                        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                        options) {
+                        throw new errors_1.UnsupportedError('not implemented');
+                    }
+
+                    _setIceGatherer({iceServers, iceTransportPolicy}) {
+                        // @ts-ignore
+                        const iceGatherer = new RTCIceGatherer({
+                            iceServers: iceServers || [],
+                            gatherPolicy: iceTransportPolicy || 'all'
+                        });
+                        iceGatherer.addEventListener('error', (event) => {
+                            logger.error('iceGatherer "error" event [event:%o]', event);
+                        });
+                        // NOTE: Not yet implemented by Edge, which starts gathering automatically.
+                        try {
+                            iceGatherer.gather();
+                        } catch (error) {
+                            logger.debug('_setIceGatherer() | iceGatherer.gather() failed: %s', error.toString());
+                        }
+                        this._iceGatherer = iceGatherer;
+                    }
+
+                    _setIceTransport() {
+                        const iceTransport = new RTCIceTransport(this._iceGatherer);
+                        // NOTE: Not yet implemented by Edge.
+                        iceTransport.addEventListener('statechange', () => {
+                            switch (iceTransport.state) {
+                                case 'checking':
+                                    this.emit('@connectionstatechange', 'connecting');
+                                    break;
+                                case 'connected':
+                                case 'completed':
+                                    this.emit('@connectionstatechange', 'connected');
+                                    break;
+                                case 'failed':
+                                    this.emit('@connectionstatechange', 'failed');
+                                    break;
+                                case 'disconnected':
+                                    this.emit('@connectionstatechange', 'disconnected');
+                                    break;
+                                case 'closed':
+                                    this.emit('@connectionstatechange', 'closed');
+                                    break;
+                            }
+                        });
+                        // NOTE: Not standard, but implemented by Edge.
+                        iceTransport.addEventListener('icestatechange', () => {
+                            switch (iceTransport.state) {
+                                case 'checking':
+                                    this.emit('@connectionstatechange', 'connecting');
+                                    break;
+                                case 'connected':
+                                case 'completed':
+                                    this.emit('@connectionstatechange', 'connected');
+                                    break;
+                                case 'failed':
+                                    this.emit('@connectionstatechange', 'failed');
+                                    break;
+                                case 'disconnected':
+                                    this.emit('@connectionstatechange', 'disconnected');
+                                    break;
+                                case 'closed':
+                                    this.emit('@connectionstatechange', 'closed');
+                                    break;
+                            }
+                        });
+                        iceTransport.addEventListener('candidatepairchange', (event) => {
+                            logger.debug('iceTransport "candidatepairchange" event [pair:%o]', event.pair);
+                        });
+                        this._iceTransport = iceTransport;
+                    }
+
+                    _setDtlsTransport() {
+                        const dtlsTransport = new RTCDtlsTransport(this._iceTransport);
+                        // NOTE: Not yet implemented by Edge.
+                        dtlsTransport.addEventListener('statechange', () => {
+                            logger.debug('dtlsTransport "statechange" event [state:%s]', dtlsTransport.state);
+                        });
+                        // NOTE: Not standard, but implemented by Edge.
+                        dtlsTransport.addEventListener('dtlsstatechange', () => {
+                            logger.debug('dtlsTransport "dtlsstatechange" event [state:%s]', dtlsTransport.state);
+                            if (dtlsTransport.state === 'closed')
+                                this.emit('@connectionstatechange', 'closed');
+                        });
+                        dtlsTransport.addEventListener('error', (event) => {
+                            logger.error('dtlsTransport "error" event [event:%o]', event);
+                        });
+                        this._dtlsTransport = dtlsTransport;
+                    }
+
+                    async _setupTransport({localDtlsRole}) {
+                        logger.debug('_setupTransport()');
+                        // Get our local DTLS parameters.
+                        const dtlsParameters = this._dtlsTransport.getLocalParameters();
+                        dtlsParameters.role = localDtlsRole;
+                        // Need to tell the remote transport about our parameters.
+                        await new Promise((resolve, reject) => {
+                            this.safeEmit('@connect', {dtlsParameters}, resolve, reject);
+                        });
+                        // Start the RTCIceTransport.
+                        this._iceTransport.start(this._iceGatherer, this._remoteIceParameters, 'controlling');
+                        // Add remote ICE candidates.
+                        for (const candidate of this._remoteIceCandidates) {
+                            this._iceTransport.addRemoteCandidate(candidate);
+                        }
+                        // Also signal a 'complete' candidate as per spec.
+                        // NOTE: It should be {complete: true} but Edge prefers {}.
+                        // NOTE: If we don't signal end of candidates, the Edge RTCIceTransport
+                        // won't enter the 'completed' state.
+                        this._iceTransport.addRemoteCandidate({});
+                        // NOTE: Edge does not like SHA less than 256.
+                        this._remoteDtlsParameters.fingerprints = this._remoteDtlsParameters.fingerprints
+                            .filter((fingerprint) => {
+                                return (fingerprint.algorithm === 'sha-256' ||
+                                    fingerprint.algorithm === 'sha-384' ||
+                                    fingerprint.algorithm === 'sha-512');
+                            });
+                        // Start the RTCDtlsTransport.
+                        this._dtlsTransport.start(this._remoteDtlsParameters);
+                        this._transportReady = true;
+                    }
+                }
+
+                exports.Edge11 = Edge11;
+
+
+                /***/
+            }),
+
+            /***/ 419:
+            /***/ (function (__unused_webpack_module, exports, __webpack_require__) {
+
+                "use strict";
+
+                var __createBinding = (this && this.__createBinding) || (Object.create ? (function (o, m, k, k2) {
+                    if (k2 === undefined) k2 = k;
+                    var desc = Object.getOwnPropertyDescriptor(m, k);
+                    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+                        desc = {
+                            enumerable: true, get: function () {
+                                return m[k];
+                            }
+                        };
+                    }
+                    Object.defineProperty(o, k2, desc);
+                }) : (function (o, m, k, k2) {
+                    if (k2 === undefined) k2 = k;
+                    o[k2] = m[k];
+                }));
+                var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function (o, v) {
+                    Object.defineProperty(o, "default", {enumerable: true, value: v});
+                }) : function (o, v) {
+                    o["default"] = v;
+                });
+                var __importStar = (this && this.__importStar) || function (mod) {
+                    if (mod && mod.__esModule) return mod;
+                    var result = {};
+                    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+                    __setModuleDefault(result, mod);
+                    return result;
+                };
+                Object.defineProperty(exports, "__esModule", ({value: true}));
+                exports.Firefox60 = void 0;
+                const sdpTransform = __importStar(__webpack_require__(766));
+                const Logger_1 = __webpack_require__(562);
+                const errors_1 = __webpack_require__(992);
+                const utils = __importStar(__webpack_require__(347));
+                const ortc = __importStar(__webpack_require__(280));
+                const sdpCommonUtils = __importStar(__webpack_require__(267));
+                const sdpUnifiedPlanUtils = __importStar(__webpack_require__(72));
+                const HandlerInterface_1 = __webpack_require__(316);
+                const RemoteSdp_1 = __webpack_require__(910);
+                const logger = new Logger_1.Logger('Firefox60');
+                const SCTP_NUM_STREAMS = {OS: 16, MIS: 2048};
+
+                class Firefox60 extends HandlerInterface_1.HandlerInterface {
+                    constructor() {
+                        super();
+                        // Map of RTCTransceivers indexed by MID.
+                        this._mapMidTransceiver = new Map();
+                        // Local stream for sending.
+                        this._sendStream = new MediaStream();
+                        // Whether a DataChannel m=application section has been created.
+                        this._hasDataChannelMediaSection = false;
+                        // Sending DataChannel id value counter. Incremented for each new DataChannel.
+                        this._nextSendSctpStreamId = 0;
+                        // Got transport local and remote parameters.
+                        this._transportReady = false;
+                    }
+
+                    /**
+                     * Creates a factory function.
+                     */
+                    static createFactory() {
+                        return () => new Firefox60();
+                    }
+
+                    get name() {
+                        return 'Firefox60';
+                    }
+
+                    close() {
+                        logger.debug('close()');
+                        // Close RTCPeerConnection.
+                        if (this._pc) {
+                            try {
+                                this._pc.close();
+                            } catch (error) {
+                            }
+                        }
+                        this.emit('@close');
+                    }
+
+                    async getNativeRtpCapabilities() {
+                        logger.debug('getNativeRtpCapabilities()');
+                        const pc = new RTCPeerConnection({
+                            iceServers: [],
+                            iceTransportPolicy: 'all',
+                            bundlePolicy: 'max-bundle',
+                            rtcpMuxPolicy: 'require'
+                        });
+                        // NOTE: We need to add a real video track to get the RID extension mapping.
+                        const canvas = document.createElement('canvas');
+                        // NOTE: Otherwise Firefox fails in next line.
+                        canvas.getContext('2d');
+                        const fakeStream = canvas.captureStream();
+                        const fakeVideoTrack = fakeStream.getVideoTracks()[0];
+                        try {
+                            pc.addTransceiver('audio', {direction: 'sendrecv'});
+                            const videoTransceiver = pc.addTransceiver(fakeVideoTrack, {direction: 'sendrecv'});
+                            const parameters = videoTransceiver.sender.getParameters();
+                            const encodings = [
+                                {rid: 'r0', maxBitrate: 100000},
+                                {rid: 'r1', maxBitrate: 500000}
+                            ];
+                            parameters.encodings = encodings;
+                            await videoTransceiver.sender.setParameters(parameters);
+                            const offer = await pc.createOffer();
+                            try {
+                                canvas.remove();
+                            } catch (error) {
+                            }
+                            try {
+                                fakeVideoTrack.stop();
+                            } catch (error) {
+                            }
+                            try {
+                                pc.close();
+                            } catch (error) {
+                            }
+                            const sdpObject = sdpTransform.parse(offer.sdp);
+                            const nativeRtpCapabilities = sdpCommonUtils.extractRtpCapabilities({sdpObject});
+                            return nativeRtpCapabilities;
+                        } catch (error) {
+                            try {
+                                canvas.remove();
+                            } catch (error2) {
+                            }
+                            try {
+                                fakeVideoTrack.stop();
+                            } catch (error2) {
+                            }
+                            try {
+                                pc.close();
+                            } catch (error2) {
+                            }
+                            throw error;
+                        }
+                    }
+
+                    async getNativeSctpCapabilities() {
+                        logger.debug('getNativeSctpCapabilities()');
+                        return {
+                            numStreams: SCTP_NUM_STREAMS
+                        };
+                    }
+
+                    run({
+                            direction,
+                            iceParameters,
+                            iceCandidates,
+                            dtlsParameters,
+                            sctpParameters,
+                            iceServers,
+                            iceTransportPolicy,
+                            additionalSettings,
+                            proprietaryConstraints,
+                            extendedRtpCapabilities
+                        }) {
+                        logger.debug('run()');
+                        this._direction = direction;
+                        this._remoteSdp = new RemoteSdp_1.RemoteSdp({
+                            iceParameters,
+                            iceCandidates,
+                            dtlsParameters,
+                            sctpParameters
+                        });
+                        this._sendingRtpParametersByKind =
+                            {
+                                audio: ortc.getSendingRtpParameters('audio', extendedRtpCapabilities),
+                                video: ortc.getSendingRtpParameters('video', extendedRtpCapabilities)
+                            };
+                        this._sendingRemoteRtpParametersByKind =
+                            {
+                                audio: ortc.getSendingRemoteRtpParameters('audio', extendedRtpCapabilities),
+                                video: ortc.getSendingRemoteRtpParameters('video', extendedRtpCapabilities)
+                            };
+                        this._pc = new RTCPeerConnection({
+                            iceServers: iceServers || [],
+                            iceTransportPolicy: iceTransportPolicy || 'all',
+                            bundlePolicy: 'max-bundle',
+                            rtcpMuxPolicy: 'require',
+                            ...additionalSettings
+                        }, proprietaryConstraints);
+                        // Handle RTCPeerConnection connection status.
+                        this._pc.addEventListener('iceconnectionstatechange', () => {
+                            switch (this._pc.iceConnectionState) {
+                                case 'checking':
+                                    this.emit('@connectionstatechange', 'connecting');
+                                    break;
+                                case 'connected':
+                                case 'completed':
+                                    this.emit('@connectionstatechange', 'connected');
+                                    break;
+                                case 'failed':
+                                    this.emit('@connectionstatechange', 'failed');
+                                    break;
+                                case 'disconnected':
+                                    this.emit('@connectionstatechange', 'disconnected');
+                                    break;
+                                case 'closed':
+                                    this.emit('@connectionstatechange', 'closed');
+                                    break;
+                            }
+                        });
+                    }
+
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    async updateIceServers(iceServers) {
+                        // NOTE: Firefox does not implement pc.setConfiguration().
+                        throw new errors_1.UnsupportedError('not supported');
+                    }
+
+                    async restartIce(iceParameters) {
+                        logger.debug('restartIce()');
+                        // Provide the remote SDP handler with new remote ICE parameters.
+                        this._remoteSdp.updateIceParameters(iceParameters);
+                        if (!this._transportReady)
+                            return;
+                        if (this._direction === 'send') {
+                            const offer = await this._pc.createOffer({iceRestart: true});
+                            logger.debug('restartIce() | calling pc.setLocalDescription() [offer:%o]', offer);
+                            await this._pc.setLocalDescription(offer);
+                            const answer = {type: 'answer', sdp: this._remoteSdp.getSdp()};
+                            logger.debug('restartIce() | calling pc.setRemoteDescription() [answer:%o]', answer);
+                            await this._pc.setRemoteDescription(answer);
+                        } else {
+                            const offer = {type: 'offer', sdp: this._remoteSdp.getSdp()};
+                            logger.debug('restartIce() | calling pc.setRemoteDescription() [offer:%o]', offer);
+                            await this._pc.setRemoteDescription(offer);
+                            const answer = await this._pc.createAnswer();
+                            logger.debug('restartIce() | calling pc.setLocalDescription() [answer:%o]', answer);
+                            await this._pc.setLocalDescription(answer);
+                        }
+                    }
+
+                    async getTransportStats() {
+                        return this._pc.getStats();
+                    }
+
+                    async send({track, encodings, codecOptions, codec}) {
+                        this._assertSendDirection();
+                        logger.debug('send() [kind:%s, track.id:%s]', track.kind, track.id);
+                        if (encodings) {
+                            encodings = utils.clone(encodings, []);
+                            if (encodings.length > 1) {
+                                encodings.forEach((encoding, idx) => {
+                                    encoding.rid = `r${idx}`;
+                                });
+                                // Clone the encodings and reverse them because Firefox likes them
+                                // from high to low.
+                                encodings.reverse();
+                            }
+                        }
+                        const sendingRtpParameters = utils.clone(this._sendingRtpParametersByKind[track.kind], {});
+                        // This may throw.
+                        sendingRtpParameters.codecs =
+                            ortc.reduceCodecs(sendingRtpParameters.codecs, codec);
+                        const sendingRemoteRtpParameters = utils.clone(this._sendingRemoteRtpParametersByKind[track.kind], {});
+                        // This may throw.
+                        sendingRemoteRtpParameters.codecs =
+                            ortc.reduceCodecs(sendingRemoteRtpParameters.codecs, codec);
+                        // NOTE: Firefox fails sometimes to properly anticipate the closed media
+                        // section that it should use, so don't reuse closed media sections.
+                        //   https://github.com/versatica/mediasoup-client/issues/104
+                        //
+                        // const mediaSectionIdx = this._remoteSdp!.getNextMediaSectionIdx();
+                        const transceiver = this._pc.addTransceiver(track, {direction: 'sendonly', streams: [this._sendStream]});
+                        // NOTE: This is not spec compliants. Encodings should be given in addTransceiver
+                        // second argument, but Firefox does not support it.
+                        if (encodings) {
+                            const parameters = transceiver.sender.getParameters();
+                            parameters.encodings = encodings;
+                            await transceiver.sender.setParameters(parameters);
+                        }
+                        const offer = await this._pc.createOffer();
+                        let localSdpObject = sdpTransform.parse(offer.sdp);
+                        // In Firefox use DTLS role client even if we are the "offerer" since
+                        // Firefox does not respect ICE-Lite.
+                        if (!this._transportReady)
+                            await this._setupTransport({localDtlsRole: 'client', localSdpObject});
+                        logger.debug('send() | calling pc.setLocalDescription() [offer:%o]', offer);
+                        await this._pc.setLocalDescription(offer);
+                        // We can now get the transceiver.mid.
+                        const localId = transceiver.mid;
+                        // Set MID.
+                        sendingRtpParameters.mid = localId;
+                        localSdpObject = sdpTransform.parse(this._pc.localDescription.sdp);
+                        const offerMediaObject = localSdpObject.media[localSdpObject.media.length - 1];
+                        // Set RTCP CNAME.
+                        sendingRtpParameters.rtcp.cname =
+                            sdpCommonUtils.getCname({offerMediaObject});
+                        // Set RTP encodings by parsing the SDP offer if no encodings are given.
+                        if (!encodings) {
+                            sendingRtpParameters.encodings =
+                                sdpUnifiedPlanUtils.getRtpEncodings({offerMediaObject});
+                        }
+                            // Set RTP encodings by parsing the SDP offer and complete them with given
+                        // one if just a single encoding has been given.
+                        else if (encodings.length === 1) {
+                            const newEncodings = sdpUnifiedPlanUtils.getRtpEncodings({offerMediaObject});
+                            Object.assign(newEncodings[0], encodings[0]);
+                            sendingRtpParameters.encodings = newEncodings;
+                        }
+                            // Otherwise if more than 1 encoding are given use them verbatim (but
+                        // reverse them back since we reversed them above to satisfy Firefox).
+                        else {
+                            sendingRtpParameters.encodings = encodings.reverse();
+                        }
+                        // If VP8 or H264 and there is effective simulcast, add scalabilityMode to
+                        // each encoding.
+                        if (sendingRtpParameters.encodings.length > 1 &&
+                            (sendingRtpParameters.codecs[0].mimeType.toLowerCase() === 'video/vp8' ||
+                                sendingRtpParameters.codecs[0].mimeType.toLowerCase() === 'video/h264')) {
+                            for (const encoding of sendingRtpParameters.encodings) {
+                                encoding.scalabilityMode = 'S1T3';
+                            }
+                        }
+                        this._remoteSdp.send({
+                            offerMediaObject,
+                            offerRtpParameters: sendingRtpParameters,
+                            answerRtpParameters: sendingRemoteRtpParameters,
+                            codecOptions,
+                            extmapAllowMixed: true
+                        });
+                        const answer = {type: 'answer', sdp: this._remoteSdp.getSdp()};
+                        logger.debug('send() | calling pc.setRemoteDescription() [answer:%o]', answer);
+                        await this._pc.setRemoteDescription(answer);
+                        // Store in the map.
+                        this._mapMidTransceiver.set(localId, transceiver);
+                        return {
+                            localId,
+                            rtpParameters: sendingRtpParameters,
+                            rtpSender: transceiver.sender
+                        };
+                    }
+
+                    async stopSending(localId) {
+                        logger.debug('stopSending() [localId:%s]', localId);
+                        const transceiver = this._mapMidTransceiver.get(localId);
+                        if (!transceiver)
+                            throw new Error('associated transceiver not found');
+                        transceiver.sender.replaceTrack(null);
+                        this._pc.removeTrack(transceiver.sender);
+                        // NOTE: Cannot use closeMediaSection() due to the the note above in send()
+                        // method.
+                        // this._remoteSdp!.closeMediaSection(transceiver.mid);
+                        this._remoteSdp.disableMediaSection(transceiver.mid);
+                        const offer = await this._pc.createOffer();
+                        logger.debug('stopSending() | calling pc.setLocalDescription() [offer:%o]', offer);
+                        await this._pc.setLocalDescription(offer);
+                        const answer = {type: 'answer', sdp: this._remoteSdp.getSdp()};
+                        logger.debug('stopSending() | calling pc.setRemoteDescription() [answer:%o]', answer);
+                        await this._pc.setRemoteDescription(answer);
+                        this._mapMidTransceiver.delete(localId);
+                    }
+
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    async pauseSending(localId) {
+                        this._assertSendDirection();
+                        logger.debug('pauseSending() [localId:%s]', localId);
+                        const transceiver = this._mapMidTransceiver.get(localId);
+                        if (!transceiver)
+                            throw new Error('associated RTCRtpTransceiver not found');
+                        transceiver.direction = 'inactive';
+                        const offer = await this._pc.createOffer();
+                        logger.debug('pauseSending() | calling pc.setLocalDescription() [offer:%o]', offer);
+                        await this._pc.setLocalDescription(offer);
+                        const answer = {type: 'answer', sdp: this._remoteSdp.getSdp()};
+                        logger.debug('pauseSending() | calling pc.setRemoteDescription() [answer:%o]', answer);
+                        await this._pc.setRemoteDescription(answer);
+                    }
+
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    async resumeSending(localId) {
+                        this._assertSendDirection();
+                        logger.debug('resumeSending() [localId:%s]', localId);
+                        const transceiver = this._mapMidTransceiver.get(localId);
+                        if (!transceiver)
+                            throw new Error('associated RTCRtpTransceiver not found');
+                        transceiver.direction = 'sendonly';
+                        const offer = await this._pc.createOffer();
+                        logger.debug('resumeSending() | calling pc.setLocalDescription() [offer:%o]', offer);
+                        await this._pc.setLocalDescription(offer);
+                        const answer = {type: 'answer', sdp: this._remoteSdp.getSdp()};
+                        logger.debug('resumeSending() | calling pc.setRemoteDescription() [answer:%o]', answer);
+                        await this._pc.setRemoteDescription(answer);
+                    }
+
+                    async replaceTrack(localId, track) {
+                        this._assertSendDirection();
+                        if (track) {
+                            logger.debug('replaceTrack() [localId:%s, track.id:%s]', localId, track.id);
+                        } else {
+                            logger.debug('replaceTrack() [localId:%s, no track]', localId);
+                        }
+                        const transceiver = this._mapMidTransceiver.get(localId);
+                        if (!transceiver)
+                            throw new Error('associated RTCRtpTransceiver not found');
+                        await transceiver.sender.replaceTrack(track);
+                    }
+
+                    async setMaxSpatialLayer(localId, spatialLayer) {
+                        this._assertSendDirection();
+                        logger.debug('setMaxSpatialLayer() [localId:%s, spatialLayer:%s]', localId, spatialLayer);
+                        const transceiver = this._mapMidTransceiver.get(localId);
+                        if (!transceiver)
+                            throw new Error('associated transceiver not found');
+                        const parameters = transceiver.sender.getParameters();
+                        // NOTE: We require encodings given from low to high, however Firefox
+                        // requires them in reverse order, so do magic here.
+                        spatialLayer = parameters.encodings.length - 1 - spatialLayer;
+                        parameters.encodings.forEach((encoding, idx) => {
+                            if (idx >= spatialLayer)
+                                encoding.active = true;
+                            else
+                                encoding.active = false;
+                        });
+                        await transceiver.sender.setParameters(parameters);
+                    }
+
+                    async setRtpEncodingParameters(localId, params) {
+                        this._assertSendDirection();
+                        logger.debug('setRtpEncodingParameters() [localId:%s, params:%o]', localId, params);
+                        const transceiver = this._mapMidTransceiver.get(localId);
+                        if (!transceiver)
+                            throw new Error('associated RTCRtpTransceiver not found');
+                        const parameters = transceiver.sender.getParameters();
+                        parameters.encodings.forEach((encoding, idx) => {
+                            parameters.encodings[idx] = {...encoding, ...params};
+                        });
+                        await transceiver.sender.setParameters(parameters);
+                    }
+
+                    async getSenderStats(localId) {
+                        this._assertSendDirection();
+                        const transceiver = this._mapMidTransceiver.get(localId);
+                        if (!transceiver)
+                            throw new Error('associated RTCRtpTransceiver not found');
+                        return transceiver.sender.getStats();
+                    }
+
+                    async sendDataChannel({ordered, maxPacketLifeTime, maxRetransmits, label, protocol}) {
+                        this._assertSendDirection();
+                        const options = {
+                            negotiated: true,
+                            id: this._nextSendSctpStreamId,
+                            ordered,
+                            maxPacketLifeTime,
+                            maxRetransmits,
+                            protocol
+                        };
+                        logger.debug('sendDataChannel() [options:%o]', options);
+                        const dataChannel = this._pc.createDataChannel(label, options);
+                        // Increase next id.
+                        this._nextSendSctpStreamId =
+                            ++this._nextSendSctpStreamId % SCTP_NUM_STREAMS.MIS;
+                        // If this is the first DataChannel we need to create the SDP answer with
+                        // m=application section.
+                        if (!this._hasDataChannelMediaSection) {
+                            const offer = await this._pc.createOffer();
+                            const localSdpObject = sdpTransform.parse(offer.sdp);
+                            const offerMediaObject = localSdpObject.media
+                                .find((m) => m.type === 'application');
+                            if (!this._transportReady)
+                                await this._setupTransport({localDtlsRole: 'client', localSdpObject});
+                            logger.debug('sendDataChannel() | calling pc.setLocalDescription() [offer:%o]', offer);
+                            await this._pc.setLocalDescription(offer);
+                            this._remoteSdp.sendSctpAssociation({offerMediaObject});
+                            const answer = {type: 'answer', sdp: this._remoteSdp.getSdp()};
+                            logger.debug('sendDataChannel() | calling pc.setRemoteDescription() [answer:%o]', answer);
+                            await this._pc.setRemoteDescription(answer);
+                            this._hasDataChannelMediaSection = true;
+                        }
+                        const sctpStreamParameters = {
+                            streamId: options.id,
+                            ordered: options.ordered,
+                            maxPacketLifeTime: options.maxPacketLifeTime,
+                            maxRetransmits: options.maxRetransmits
+                        };
+                        return {dataChannel, sctpStreamParameters};
+                    }
+
+                    async receive(
+                        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                        optionsList) {
+                        this._assertRecvDirection();
+                        const results = [];
+                        const mapLocalId = new Map();
+                        for (const options of optionsList) {
+                            const {trackId, kind, rtpParameters} = options;
+                            logger.debug('receive() [trackId:%s, kind:%s]', trackId, kind);
+                            const localId = rtpParameters.mid || String(this._mapMidTransceiver.size);
+                            mapLocalId.set(trackId, localId);
+                            this._remoteSdp.receive({
+                                mid: localId,
+                                kind,
+                                offerRtpParameters: rtpParameters,
+                                streamId: rtpParameters.rtcp.cname,
+                                trackId
+                            });
+                        }
+                        const offer = {type: 'offer', sdp: this._remoteSdp.getSdp()};
+                        logger.debug('receive() | calling pc.setRemoteDescription() [offer:%o]', offer);
+                        await this._pc.setRemoteDescription(offer);
+                        let answer = await this._pc.createAnswer();
+                        const localSdpObject = sdpTransform.parse(answer.sdp);
+                        for (const options of optionsList) {
+                            const {trackId, rtpParameters} = options;
+                            const localId = mapLocalId.get(trackId);
+                            const answerMediaObject = localSdpObject.media
+                                .find((m) => String(m.mid) === localId);
+                            // May need to modify codec parameters in the answer based on codec
+                            // parameters in the offer.
+                            sdpCommonUtils.applyCodecParameters({
+                                offerRtpParameters: rtpParameters,
+                                answerMediaObject
+                            });
+                            answer = {type: 'answer', sdp: sdpTransform.write(localSdpObject)};
+                        }
+                        if (!this._transportReady)
+                            await this._setupTransport({localDtlsRole: 'client', localSdpObject});
+                        logger.debug('receive() | calling pc.setLocalDescription() [answer:%o]', answer);
+                        await this._pc.setLocalDescription(answer);
+                        for (const options of optionsList) {
+                            const {trackId} = options;
+                            const localId = mapLocalId.get(trackId);
+                            const transceiver = this._pc.getTransceivers()
+                                .find((t) => t.mid === localId);
+                            if (!transceiver)
+                                throw new Error('new RTCRtpTransceiver not found');
+                            // Store in the map.
+                            this._mapMidTransceiver.set(localId, transceiver);
+                            results.push({
+                                localId,
+                                track: transceiver.receiver.track,
+                                rtpReceiver: transceiver.receiver
+                            });
+                        }
+                        return results;
+                    }
+
+                    async stopReceiving(localIds) {
+                        this._assertRecvDirection();
+                        for (const localId of localIds) {
+                            logger.debug('stopReceiving() [localId:%s]', localId);
+                            const transceiver = this._mapMidTransceiver.get(localId);
+                            if (!transceiver)
+                                throw new Error('associated RTCRtpTransceiver not found');
+                            this._remoteSdp.closeMediaSection(transceiver.mid);
+                        }
+                        const offer = {type: 'offer', sdp: this._remoteSdp.getSdp()};
+                        logger.debug('stopReceiving() | calling pc.setRemoteDescription() [offer:%o]', offer);
+                        await this._pc.setRemoteDescription(offer);
+                        const answer = await this._pc.createAnswer();
+                        logger.debug('stopReceiving() | calling pc.setLocalDescription() [answer:%o]', answer);
+                        await this._pc.setLocalDescription(answer);
+                        for (const localId of localIds) {
+                            this._mapMidTransceiver.delete(localId);
+                        }
+                    }
+
+                    async pauseReceiving(localIds) {
+                        this._assertRecvDirection();
+                        for (const localId of localIds) {
+                            logger.debug('pauseReceiving() [localId:%s]', localId);
+                            const transceiver = this._mapMidTransceiver.get(localId);
+                            if (!transceiver)
+                                throw new Error('associated RTCRtpTransceiver not found');
+                            transceiver.direction = 'inactive';
+                        }
+                        const offer = {type: 'offer', sdp: this._remoteSdp.getSdp()};
+                        logger.debug('pauseReceiving() | calling pc.setRemoteDescription() [offer:%o]', offer);
+                        await this._pc.setRemoteDescription(offer);
+                        const answer = await this._pc.createAnswer();
+                        logger.debug('pauseReceiving() | calling pc.setLocalDescription() [answer:%o]', answer);
+                        await this._pc.setLocalDescription(answer);
+                    }
+
+                    async resumeReceiving(localIds) {
+                        this._assertRecvDirection();
+                        for (const localId of localIds) {
+                            logger.debug('resumeReceiving() [localId:%s]', localId);
+                            const transceiver = this._mapMidTransceiver.get(localId);
+                            if (!transceiver)
+                                throw new Error('associated RTCRtpTransceiver not found');
+                            transceiver.direction = 'recvonly';
+                        }
+                        const offer = {type: 'offer', sdp: this._remoteSdp.getSdp()};
+                        logger.debug('resumeReceiving() | calling pc.setRemoteDescription() [offer:%o]', offer);
+                        await this._pc.setRemoteDescription(offer);
+                        const answer = await this._pc.createAnswer();
+                        logger.debug('resumeReceiving() | calling pc.setLocalDescription() [answer:%o]', answer);
+                        await this._pc.setLocalDescription(answer);
+                    }
+
+                    async getReceiverStats(localId) {
+                        this._assertRecvDirection();
+                        const transceiver = this._mapMidTransceiver.get(localId);
+                        if (!transceiver)
+                            throw new Error('associated RTCRtpTransceiver not found');
+                        return transceiver.receiver.getStats();
+                    }
+
+                    async receiveDataChannel({sctpStreamParameters, label, protocol}) {
+                        this._assertRecvDirection();
+                        const {streamId, ordered, maxPacketLifeTime, maxRetransmits} = sctpStreamParameters;
+                        const options = {
+                            negotiated: true,
+                            id: streamId,
+                            ordered,
+                            maxPacketLifeTime,
+                            maxRetransmits,
+                            protocol
+                        };
+                        logger.debug('receiveDataChannel() [options:%o]', options);
+                        const dataChannel = this._pc.createDataChannel(label, options);
+                        // If this is the first DataChannel we need to create the SDP offer with
+                        // m=application section.
+                        if (!this._hasDataChannelMediaSection) {
+                            this._remoteSdp.receiveSctpAssociation();
+                            const offer = {type: 'offer', sdp: this._remoteSdp.getSdp()};
+                            logger.debug('receiveDataChannel() | calling pc.setRemoteDescription() [offer:%o]', offer);
+                            await this._pc.setRemoteDescription(offer);
+                            const answer = await this._pc.createAnswer();
+                            if (!this._transportReady) {
+                                const localSdpObject = sdpTransform.parse(answer.sdp);
+                                await this._setupTransport({localDtlsRole: 'client', localSdpObject});
+                            }
+                            logger.debug('receiveDataChannel() | calling pc.setRemoteDescription() [answer:%o]', answer);
+                            await this._pc.setLocalDescription(answer);
+                            this._hasDataChannelMediaSection = true;
+                        }
+                        return {dataChannel};
+                    }
+
+                    async _setupTransport({localDtlsRole, localSdpObject}) {
+                        if (!localSdpObject)
+                            localSdpObject = sdpTransform.parse(this._pc.localDescription.sdp);
+                        // Get our local DTLS parameters.
+                        const dtlsParameters = sdpCommonUtils.extractDtlsParameters({sdpObject: localSdpObject});
+                        // Set our DTLS role.
+                        dtlsParameters.role = localDtlsRole;
+                        // Update the remote DTLS role in the SDP.
+                        this._remoteSdp.updateDtlsRole(localDtlsRole === 'client' ? 'server' : 'client');
+                        // Need to tell the remote transport about our parameters.
+                        await new Promise((resolve, reject) => {
+                            this.safeEmit('@connect', {dtlsParameters}, resolve, reject);
+                        });
+                        this._transportReady = true;
+                    }
+
+                    _assertSendDirection() {
+                        if (this._direction !== 'send') {
+                            throw new Error('method can just be called for handlers with "send" direction');
+                        }
+                    }
+
+                    _assertRecvDirection() {
+                        if (this._direction !== 'recv') {
+                            throw new Error('method can just be called for handlers with "recv" direction');
+                        }
+                    }
+                }
+
+                exports.Firefox60 = Firefox60;
+
+
+                /***/
+            }),
+
+            /***/ 316:
+            /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+                "use strict";
+
+                Object.defineProperty(exports, "__esModule", ({value: true}));
+                exports.HandlerInterface = void 0;
+                const EnhancedEventEmitter_1 = __webpack_require__(493);
+
+                class HandlerInterface extends EnhancedEventEmitter_1.EnhancedEventEmitter {
+                    constructor() {
+                        super();
+                    }
+                }
+
+                exports.HandlerInterface = HandlerInterface;
+
+
+                /***/
+            }),
+
+            /***/ 414:
+            /***/ (function (__unused_webpack_module, exports, __webpack_require__) {
+
+                "use strict";
+
+                var __createBinding = (this && this.__createBinding) || (Object.create ? (function (o, m, k, k2) {
+                    if (k2 === undefined) k2 = k;
+                    var desc = Object.getOwnPropertyDescriptor(m, k);
+                    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+                        desc = {
+                            enumerable: true, get: function () {
+                                return m[k];
+                            }
+                        };
+                    }
+                    Object.defineProperty(o, k2, desc);
+                }) : (function (o, m, k, k2) {
+                    if (k2 === undefined) k2 = k;
+                    o[k2] = m[k];
+                }));
+                var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function (o, v) {
+                    Object.defineProperty(o, "default", {enumerable: true, value: v});
+                }) : function (o, v) {
+                    o["default"] = v;
+                });
+                var __importStar = (this && this.__importStar) || function (mod) {
+                    if (mod && mod.__esModule) return mod;
+                    var result = {};
+                    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+                    __setModuleDefault(result, mod);
+                    return result;
+                };
+                Object.defineProperty(exports, "__esModule", ({value: true}));
+                exports.ReactNative = void 0;
+                const sdpTransform = __importStar(__webpack_require__(766));
+                const Logger_1 = __webpack_require__(562);
+                const errors_1 = __webpack_require__(992);
+                const utils = __importStar(__webpack_require__(347));
+                const ortc = __importStar(__webpack_require__(280));
+                const sdpCommonUtils = __importStar(__webpack_require__(267));
+                const sdpPlanBUtils = __importStar(__webpack_require__(875));
+                const HandlerInterface_1 = __webpack_require__(316);
+                const RemoteSdp_1 = __webpack_require__(910);
+                const logger = new Logger_1.Logger('ReactNative');
+                const SCTP_NUM_STREAMS = {OS: 1024, MIS: 1024};
+
+                class ReactNative extends HandlerInterface_1.HandlerInterface {
+                    constructor() {
+                        super();
+                        // Local stream for sending.
+                        this._sendStream = new MediaStream();
+                        // Map of sending MediaStreamTracks indexed by localId.
+                        this._mapSendLocalIdTrack = new Map();
+                        // Next sending localId.
+                        this._nextSendLocalId = 0;
+                        // Map of MID, RTP parameters and RTCRtpReceiver indexed by local id.
+                        // Value is an Object with mid, rtpParameters and rtpReceiver.
+                        this._mapRecvLocalIdInfo = new Map();
+                        // Whether a DataChannel m=application section has been created.
+                        this._hasDataChannelMediaSection = false;
+                        // Sending DataChannel id value counter. Incremented for each new DataChannel.
+                        this._nextSendSctpStreamId = 0;
+                        // Got transport local and remote parameters.
+                        this._transportReady = false;
+                    }
+
+                    /**
+                     * Creates a factory function.
+                     */
+                    static createFactory() {
+                        return () => new ReactNative();
+                    }
+
+                    get name() {
+                        return 'ReactNative';
+                    }
+
+                    close() {
+                        logger.debug('close()');
+                        // Free/dispose native MediaStream but DO NOT free/dispose native
+                        // MediaStreamTracks (that is parent's business).
+                        // @ts-ignore (proprietary API in react-native-webrtc).
+                        this._sendStream.release(/* releaseTracks */ false);
+                        // Close RTCPeerConnection.
+                        if (this._pc) {
+                            try {
+                                this._pc.close();
+                            } catch (error) {
+                            }
+                        }
+                        this.emit('@close');
+                    }
+
+                    async getNativeRtpCapabilities() {
+                        logger.debug('getNativeRtpCapabilities()');
+                        const pc = new RTCPeerConnection({
+                            iceServers: [],
+                            iceTransportPolicy: 'all',
+                            bundlePolicy: 'max-bundle',
+                            rtcpMuxPolicy: 'require',
+                            sdpSemantics: 'plan-b'
+                        });
+                        try {
+                            const offer = await pc.createOffer({
+                                offerToReceiveAudio: true,
+                                offerToReceiveVideo: true
+                            });
+                            try {
+                                pc.close();
+                            } catch (error) {
+                            }
+                            const sdpObject = sdpTransform.parse(offer.sdp);
+                            const nativeRtpCapabilities = sdpCommonUtils.extractRtpCapabilities({sdpObject});
+                            return nativeRtpCapabilities;
+                        } catch (error) {
+                            try {
+                                pc.close();
+                            } catch (error2) {
+                            }
+                            throw error;
+                        }
+                    }
+
+                    async getNativeSctpCapabilities() {
+                        logger.debug('getNativeSctpCapabilities()');
+                        return {
+                            numStreams: SCTP_NUM_STREAMS
+                        };
+                    }
+
+                    run({
+                            direction,
+                            iceParameters,
+                            iceCandidates,
+                            dtlsParameters,
+                            sctpParameters,
+                            iceServers,
+                            iceTransportPolicy,
+                            additionalSettings,
+                            proprietaryConstraints,
+                            extendedRtpCapabilities
+                        }) {
+                        logger.debug('run()');
+                        this._direction = direction;
+                        this._remoteSdp = new RemoteSdp_1.RemoteSdp({
+                            iceParameters,
+                            iceCandidates,
+                            dtlsParameters,
+                            sctpParameters,
+                            planB: true
+                        });
+                        this._sendingRtpParametersByKind =
+                            {
+                                audio: ortc.getSendingRtpParameters('audio', extendedRtpCapabilities),
+                                video: ortc.getSendingRtpParameters('video', extendedRtpCapabilities)
+                            };
+                        this._sendingRemoteRtpParametersByKind =
+                            {
+                                audio: ortc.getSendingRemoteRtpParameters('audio', extendedRtpCapabilities),
+                                video: ortc.getSendingRemoteRtpParameters('video', extendedRtpCapabilities)
+                            };
+                        if (dtlsParameters.role && dtlsParameters.role !== 'auto') {
+                            this._forcedLocalDtlsRole = dtlsParameters.role === 'server'
+                                ? 'client'
+                                : 'server';
+                        }
+                        this._pc = new RTCPeerConnection({
+                            iceServers: iceServers || [],
+                            iceTransportPolicy: iceTransportPolicy || 'all',
+                            bundlePolicy: 'max-bundle',
+                            rtcpMuxPolicy: 'require',
+                            sdpSemantics: 'plan-b',
+                            ...additionalSettings
+                        }, proprietaryConstraints);
+                        // Handle RTCPeerConnection connection status.
+                        this._pc.addEventListener('iceconnectionstatechange', () => {
+                            switch (this._pc.iceConnectionState) {
+                                case 'checking':
+                                    this.emit('@connectionstatechange', 'connecting');
+                                    break;
+                                case 'connected':
+                                case 'completed':
+                                    this.emit('@connectionstatechange', 'connected');
+                                    break;
+                                case 'failed':
+                                    this.emit('@connectionstatechange', 'failed');
+                                    break;
+                                case 'disconnected':
+                                    this.emit('@connectionstatechange', 'disconnected');
+                                    break;
+                                case 'closed':
+                                    this.emit('@connectionstatechange', 'closed');
+                                    break;
+                            }
+                        });
+                    }
+
+                    async updateIceServers(iceServers) {
+                        logger.debug('updateIceServers()');
+                        const configuration = this._pc.getConfiguration();
+                        configuration.iceServers = iceServers;
+                        this._pc.setConfiguration(configuration);
+                    }
+
+                    async restartIce(iceParameters) {
+                        logger.debug('restartIce()');
+                        // Provide the remote SDP handler with new remote ICE parameters.
+                        this._remoteSdp.updateIceParameters(iceParameters);
+                        if (!this._transportReady)
+                            return;
+                        if (this._direction === 'send') {
+                            const offer = await this._pc.createOffer({iceRestart: true});
+                            logger.debug('restartIce() | calling pc.setLocalDescription() [offer:%o]', offer);
+                            await this._pc.setLocalDescription(offer);
+                            const answer = {type: 'answer', sdp: this._remoteSdp.getSdp()};
+                            logger.debug('restartIce() | calling pc.setRemoteDescription() [answer:%o]', answer);
+                            await this._pc.setRemoteDescription(answer);
+                        } else {
+                            const offer = {type: 'offer', sdp: this._remoteSdp.getSdp()};
+                            logger.debug('restartIce() | calling pc.setRemoteDescription() [offer:%o]', offer);
+                            await this._pc.setRemoteDescription(offer);
+                            const answer = await this._pc.createAnswer();
+                            logger.debug('restartIce() | calling pc.setLocalDescription() [answer:%o]', answer);
+                            await this._pc.setLocalDescription(answer);
+                        }
+                    }
+
+                    async getTransportStats() {
+                        return this._pc.getStats();
+                    }
+
+                    async send({track, encodings, codecOptions, codec}) {
+                        var _a;
+                        this._assertSendDirection();
+                        logger.debug('send() [kind:%s, track.id:%s]', track.kind, track.id);
+                        if (codec) {
+                            logger.warn('send() | codec selection is not available in %s handler', this.name);
+                        }
+                        this._sendStream.addTrack(track);
+                        this._pc.addStream(this._sendStream);
+                        let offer = await this._pc.createOffer();
+                        let localSdpObject = sdpTransform.parse(offer.sdp);
+                        let offerMediaObject;
+                        const sendingRtpParameters = utils.clone(this._sendingRtpParametersByKind[track.kind], {});
+                        sendingRtpParameters.codecs =
+                            ortc.reduceCodecs(sendingRtpParameters.codecs);
+                        const sendingRemoteRtpParameters = utils.clone(this._sendingRemoteRtpParametersByKind[track.kind], {});
+                        sendingRemoteRtpParameters.codecs =
+                            ortc.reduceCodecs(sendingRemoteRtpParameters.codecs);
+                        if (!this._transportReady) {
+                            await this._setupTransport({
+                                localDtlsRole: (_a = this._forcedLocalDtlsRole) !== null && _a !== void 0 ? _a : 'client',
+                                localSdpObject
+                            });
+                        }
+                        if (track.kind === 'video' && encodings && encodings.length > 1) {
+                            logger.debug('send() | enabling simulcast');
+                            localSdpObject = sdpTransform.parse(offer.sdp);
+                            offerMediaObject = localSdpObject.media
+                                .find((m) => m.type === 'video');
+                            sdpPlanBUtils.addLegacySimulcast({
+                                offerMediaObject,
+                                track,
+                                numStreams: encodings.length
+                            });
+                            offer = {type: 'offer', sdp: sdpTransform.write(localSdpObject)};
+                        }
+                        logger.debug('send() | calling pc.setLocalDescription() [offer:%o]', offer);
+                        await this._pc.setLocalDescription(offer);
+                        localSdpObject = sdpTransform.parse(this._pc.localDescription.sdp);
+                        offerMediaObject = localSdpObject.media
+                            .find((m) => m.type === track.kind);
+                        // Set RTCP CNAME.
+                        sendingRtpParameters.rtcp.cname =
+                            sdpCommonUtils.getCname({offerMediaObject});
+                        // Set RTP encodings.
+                        sendingRtpParameters.encodings =
+                            sdpPlanBUtils.getRtpEncodings({offerMediaObject, track});
+                        // Complete encodings with given values.
+                        if (encodings) {
+                            for (let idx = 0; idx < sendingRtpParameters.encodings.length; ++idx) {
+                                if (encodings[idx])
+                                    Object.assign(sendingRtpParameters.encodings[idx], encodings[idx]);
+                            }
+                        }
+                        // If VP8 or H264 and there is effective simulcast, add scalabilityMode to
+                        // each encoding.
+                        if (sendingRtpParameters.encodings.length > 1 &&
+                            (sendingRtpParameters.codecs[0].mimeType.toLowerCase() === 'video/vp8' ||
+                                sendingRtpParameters.codecs[0].mimeType.toLowerCase() === 'video/h264')) {
+                            for (const encoding of sendingRtpParameters.encodings) {
+                                encoding.scalabilityMode = 'S1T3';
+                            }
+                        }
+                        this._remoteSdp.send({
+                            offerMediaObject,
+                            offerRtpParameters: sendingRtpParameters,
+                            answerRtpParameters: sendingRemoteRtpParameters,
+                            codecOptions
+                        });
+                        const answer = {type: 'answer', sdp: this._remoteSdp.getSdp()};
+                        logger.debug('send() | calling pc.setRemoteDescription() [answer:%o]', answer);
+                        await this._pc.setRemoteDescription(answer);
+                        const localId = String(this._nextSendLocalId);
+                        this._nextSendLocalId++;
+                        // Insert into the map.
+                        this._mapSendLocalIdTrack.set(localId, track);
+                        return {
+                            localId: localId,
+                            rtpParameters: sendingRtpParameters
+                        };
+                    }
+
+                    async stopSending(localId) {
+                        this._assertSendDirection();
+                        logger.debug('stopSending() [localId:%s]', localId);
+                        const track = this._mapSendLocalIdTrack.get(localId);
+                        if (!track)
+                            throw new Error('track not found');
+                        this._mapSendLocalIdTrack.delete(localId);
+                        this._sendStream.removeTrack(track);
+                        this._pc.addStream(this._sendStream);
+                        const offer = await this._pc.createOffer();
+                        logger.debug('stopSending() | calling pc.setLocalDescription() [offer:%o]', offer);
+                        try {
+                            await this._pc.setLocalDescription(offer);
+                        } catch (error) {
+                            // NOTE: If there are no sending tracks, setLocalDescription() will fail with
+                            // "Failed to create channels". If so, ignore it.
+                            if (this._sendStream.getTracks().length === 0) {
+                                logger.warn('stopSending() | ignoring expected error due no sending tracks: %s', error.toString());
+                                return;
+                            }
+                            throw error;
+                        }
+                        if (this._pc.signalingState === 'stable')
+                            return;
+                        const answer = {type: 'answer', sdp: this._remoteSdp.getSdp()};
+                        logger.debug('stopSending() | calling pc.setRemoteDescription() [answer:%o]', answer);
+                        await this._pc.setRemoteDescription(answer);
+                    }
+
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    async pauseSending(localId) {
+                        // Unimplemented.
+                    }
+
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    async resumeSending(localId) {
+                        // Unimplemented.
+                    }
+
+                    async replaceTrack(
+                        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                        localId, track) {
+                        throw new errors_1.UnsupportedError('not implemented');
+                    }
+
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    async setMaxSpatialLayer(localId, spatialLayer) {
+                        throw new errors_1.UnsupportedError('not implemented');
+                    }
+
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    async setRtpEncodingParameters(localId, params) {
+                        throw new errors_1.UnsupportedError('not implemented');
+                    }
+
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    async getSenderStats(localId) {
+                        throw new errors_1.UnsupportedError('not implemented');
+                    }
+
+                    async sendDataChannel({ordered, maxPacketLifeTime, maxRetransmits, label, protocol}) {
+                        var _a;
+                        this._assertSendDirection();
+                        const options = {
+                            negotiated: true,
+                            id: this._nextSendSctpStreamId,
+                            ordered,
+                            maxPacketLifeTime,
+                            maxRetransmitTime: maxPacketLifeTime,
+                            maxRetransmits,
+                            protocol
+                        };
+                        logger.debug('sendDataChannel() [options:%o]', options);
+                        const dataChannel = this._pc.createDataChannel(label, options);
+                        // Increase next id.
+                        this._nextSendSctpStreamId =
+                            ++this._nextSendSctpStreamId % SCTP_NUM_STREAMS.MIS;
+                        // If this is the first DataChannel we need to create the SDP answer with
+                        // m=application section.
+                        if (!this._hasDataChannelMediaSection) {
+                            const offer = await this._pc.createOffer();
+                            const localSdpObject = sdpTransform.parse(offer.sdp);
+                            const offerMediaObject = localSdpObject.media
+                                .find((m) => m.type === 'application');
+                            if (!this._transportReady) {
+                                await this._setupTransport({
+                                    localDtlsRole: (_a = this._forcedLocalDtlsRole) !== null && _a !== void 0 ? _a : 'client',
+                                    localSdpObject
+                                });
+                            }
+                            logger.debug('sendDataChannel() | calling pc.setLocalDescription() [offer:%o]', offer);
+                            await this._pc.setLocalDescription(offer);
+                            this._remoteSdp.sendSctpAssociation({offerMediaObject});
+                            const answer = {type: 'answer', sdp: this._remoteSdp.getSdp()};
+                            logger.debug('sendDataChannel() | calling pc.setRemoteDescription() [answer:%o]', answer);
+                            await this._pc.setRemoteDescription(answer);
+                            this._hasDataChannelMediaSection = true;
+                        }
+                        const sctpStreamParameters = {
+                            streamId: options.id,
+                            ordered: options.ordered,
+                            maxPacketLifeTime: options.maxPacketLifeTime,
+                            maxRetransmits: options.maxRetransmits
+                        };
+                        return {dataChannel, sctpStreamParameters};
+                    }
+
+                    async receive(optionsList) {
+                        var _a;
+                        this._assertRecvDirection();
+                        const results = [];
+                        const mapStreamId = new Map();
+                        for (const options of optionsList) {
+                            const {trackId, kind, rtpParameters} = options;
+                            logger.debug('receive() [trackId:%s, kind:%s]', trackId, kind);
+                            const mid = kind;
+                            let streamId = rtpParameters.rtcp.cname;
+                            // NOTE: In React-Native we cannot reuse the same remote MediaStream for new
+                            // remote tracks. This is because react-native-webrtc does not react on new
+                            // tracks generated within already existing streams, so force the streamId
+                            // to be different.
+                            logger.debug('receive() | forcing a random remote streamId to avoid well known bug in react-native-webrtc');
+                            streamId += `-hack-${utils.generateRandomNumber()}`;
+                            mapStreamId.set(trackId, streamId);
+                            this._remoteSdp.receive({
+                                mid,
+                                kind,
+                                offerRtpParameters: rtpParameters,
+                                streamId,
+                                trackId
+                            });
+                        }
+                        const offer = {type: 'offer', sdp: this._remoteSdp.getSdp()};
+                        logger.debug('receive() | calling pc.setRemoteDescription() [offer:%o]', offer);
+                        await this._pc.setRemoteDescription(offer);
+                        let answer = await this._pc.createAnswer();
+                        const localSdpObject = sdpTransform.parse(answer.sdp);
+                        for (const options of optionsList) {
+                            const {kind, rtpParameters} = options;
+                            const mid = kind;
+                            const answerMediaObject = localSdpObject.media
+                                .find((m) => String(m.mid) === mid);
+                            // May need to modify codec parameters in the answer based on codec
+                            // parameters in the offer.
+                            sdpCommonUtils.applyCodecParameters({
+                                offerRtpParameters: rtpParameters,
+                                answerMediaObject
+                            });
+                        }
+                        answer = {type: 'answer', sdp: sdpTransform.write(localSdpObject)};
+                        if (!this._transportReady) {
+                            await this._setupTransport({
+                                localDtlsRole: (_a = this._forcedLocalDtlsRole) !== null && _a !== void 0 ? _a : 'client',
+                                localSdpObject
+                            });
+                        }
+                        logger.debug('receive() | calling pc.setLocalDescription() [answer:%o]', answer);
+                        await this._pc.setLocalDescription(answer);
+                        for (const options of optionsList) {
+                            const {kind, trackId, rtpParameters} = options;
+                            const localId = trackId;
+                            const mid = kind;
+                            const streamId = mapStreamId.get(trackId);
+                            const stream = this._pc.getRemoteStreams()
+                                .find((s) => s.id === streamId);
+                            const track = stream.getTrackById(localId);
+                            if (!track)
+                                throw new Error('remote track not found');
+                            // Insert into the map.
+                            this._mapRecvLocalIdInfo.set(localId, {mid, rtpParameters});
+                            results.push({localId, track});
+                        }
+                        return results;
+                    }
+
+                    async stopReceiving(localIds) {
+                        this._assertRecvDirection();
+                        for (const localId of localIds) {
+                            logger.debug('stopReceiving() [localId:%s]', localId);
+                            const {mid, rtpParameters} = this._mapRecvLocalIdInfo.get(localId) || {};
+                            // Remove from the map.
+                            this._mapRecvLocalIdInfo.delete(localId);
+                            this._remoteSdp.planBStopReceiving({mid: mid, offerRtpParameters: rtpParameters});
+                        }
+                        const offer = {type: 'offer', sdp: this._remoteSdp.getSdp()};
+                        logger.debug('stopReceiving() | calling pc.setRemoteDescription() [offer:%o]', offer);
+                        await this._pc.setRemoteDescription(offer);
+                        const answer = await this._pc.createAnswer();
+                        logger.debug('stopReceiving() | calling pc.setLocalDescription() [answer:%o]', answer);
+                        await this._pc.setLocalDescription(answer);
+                    }
+
+                    async pauseReceiving(
+                        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                        localIds) {
+                        // Unimplemented.
+                    }
+
+                    async resumeReceiving(
+                        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                        localIds) {
+                        // Unimplemented.
+                    }
+
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    async getReceiverStats(localId) {
+                        throw new errors_1.UnsupportedError('not implemented');
+                    }
+
+                    async receiveDataChannel({sctpStreamParameters, label, protocol}) {
+                        var _a;
+                        this._assertRecvDirection();
+                        const {streamId, ordered, maxPacketLifeTime, maxRetransmits} = sctpStreamParameters;
+                        const options = {
+                            negotiated: true,
+                            id: streamId,
+                            ordered,
+                            maxPacketLifeTime,
+                            maxRetransmitTime: maxPacketLifeTime,
+                            maxRetransmits,
+                            protocol
+                        };
+                        logger.debug('receiveDataChannel() [options:%o]', options);
+                        const dataChannel = this._pc.createDataChannel(label, options);
+                        // If this is the first DataChannel we need to create the SDP offer with
+                        // m=application section.
+                        if (!this._hasDataChannelMediaSection) {
+                            this._remoteSdp.receiveSctpAssociation({oldDataChannelSpec: true});
+                            const offer = {type: 'offer', sdp: this._remoteSdp.getSdp()};
+                            logger.debug('receiveDataChannel() | calling pc.setRemoteDescription() [offer:%o]', offer);
+                            await this._pc.setRemoteDescription(offer);
+                            const answer = await this._pc.createAnswer();
+                            if (!this._transportReady) {
+                                const localSdpObject = sdpTransform.parse(answer.sdp);
+                                await this._setupTransport({
+                                    localDtlsRole: (_a = this._forcedLocalDtlsRole) !== null && _a !== void 0 ? _a : 'client',
+                                    localSdpObject
+                                });
+                            }
+                            logger.debug('receiveDataChannel() | calling pc.setRemoteDescription() [answer:%o]', answer);
+                            await this._pc.setLocalDescription(answer);
+                            this._hasDataChannelMediaSection = true;
+                        }
+                        return {dataChannel};
+                    }
+
+                    async _setupTransport({localDtlsRole, localSdpObject}) {
+                        if (!localSdpObject)
+                            localSdpObject = sdpTransform.parse(this._pc.localDescription.sdp);
+                        // Get our local DTLS parameters.
+                        const dtlsParameters = sdpCommonUtils.extractDtlsParameters({sdpObject: localSdpObject});
+                        // Set our DTLS role.
+                        dtlsParameters.role = localDtlsRole;
+                        // Update the remote DTLS role in the SDP.
+                        this._remoteSdp.updateDtlsRole(localDtlsRole === 'client' ? 'server' : 'client');
+                        // Need to tell the remote transport about our parameters.
+                        await new Promise((resolve, reject) => {
+                            this.safeEmit('@connect', {dtlsParameters}, resolve, reject);
+                        });
+                        this._transportReady = true;
+                    }
+
+                    _assertSendDirection() {
+                        if (this._direction !== 'send') {
+                            throw new Error('method can just be called for handlers with "send" direction');
+                        }
+                    }
+
+                    _assertRecvDirection() {
+                        if (this._direction !== 'recv') {
+                            throw new Error('method can just be called for handlers with "recv" direction');
+                        }
+                    }
+                }
+
+                exports.ReactNative = ReactNative;
+
+
+                /***/
+            }),
+
+            /***/ 205:
+            /***/ (function (__unused_webpack_module, exports, __webpack_require__) {
+
+                "use strict";
+
+                var __createBinding = (this && this.__createBinding) || (Object.create ? (function (o, m, k, k2) {
+                    if (k2 === undefined) k2 = k;
+                    var desc = Object.getOwnPropertyDescriptor(m, k);
+                    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+                        desc = {
+                            enumerable: true, get: function () {
+                                return m[k];
+                            }
+                        };
+                    }
+                    Object.defineProperty(o, k2, desc);
+                }) : (function (o, m, k, k2) {
+                    if (k2 === undefined) k2 = k;
+                    o[k2] = m[k];
+                }));
+                var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function (o, v) {
+                    Object.defineProperty(o, "default", {enumerable: true, value: v});
+                }) : function (o, v) {
+                    o["default"] = v;
+                });
+                var __importStar = (this && this.__importStar) || function (mod) {
+                    if (mod && mod.__esModule) return mod;
+                    var result = {};
+                    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+                    __setModuleDefault(result, mod);
+                    return result;
+                };
+                Object.defineProperty(exports, "__esModule", ({value: true}));
+                exports.Safari11 = void 0;
+                const sdpTransform = __importStar(__webpack_require__(766));
+                const Logger_1 = __webpack_require__(562);
+                const utils = __importStar(__webpack_require__(347));
+                const ortc = __importStar(__webpack_require__(280));
+                const sdpCommonUtils = __importStar(__webpack_require__(267));
+                const sdpPlanBUtils = __importStar(__webpack_require__(875));
+                const HandlerInterface_1 = __webpack_require__(316);
+                const RemoteSdp_1 = __webpack_require__(910);
+                const logger = new Logger_1.Logger('Safari11');
+                const SCTP_NUM_STREAMS = {OS: 1024, MIS: 1024};
+
+                class Safari11 extends HandlerInterface_1.HandlerInterface {
+                    constructor() {
+                        super();
+                        // Local stream for sending.
+                        this._sendStream = new MediaStream();
+                        // Map of RTCRtpSender indexed by localId.
+                        this._mapSendLocalIdRtpSender = new Map();
+                        // Next sending localId.
+                        this._nextSendLocalId = 0;
+                        // Map of MID, RTP parameters and RTCRtpReceiver indexed by local id.
+                        // Value is an Object with mid, rtpParameters and rtpReceiver.
+                        this._mapRecvLocalIdInfo = new Map();
+                        // Whether a DataChannel m=application section has been created.
+                        this._hasDataChannelMediaSection = false;
+                        // Sending DataChannel id value counter. Incremented for each new DataChannel.
+                        this._nextSendSctpStreamId = 0;
+                        // Got transport local and remote parameters.
+                        this._transportReady = false;
+                    }
+
+                    /**
+                     * Creates a factory function.
+                     */
+                    static createFactory() {
+                        return () => new Safari11();
+                    }
+
+                    get name() {
+                        return 'Safari11';
+                    }
+
+                    close() {
+                        logger.debug('close()');
+                        // Close RTCPeerConnection.
+                        if (this._pc) {
+                            try {
+                                this._pc.close();
+                            } catch (error) {
+                            }
+                        }
+                        this.emit('@close');
+                    }
+
+                    async getNativeRtpCapabilities() {
+                        logger.debug('getNativeRtpCapabilities()');
+                        const pc = new RTCPeerConnection({
+                            iceServers: [],
+                            iceTransportPolicy: 'all',
+                            bundlePolicy: 'max-bundle',
+                            rtcpMuxPolicy: 'require',
+                            sdpSemantics: 'plan-b'
+                        });
+                        try {
+                            const offer = await pc.createOffer({
+                                offerToReceiveAudio: true,
+                                offerToReceiveVideo: true
+                            });
+                            try {
+                                pc.close();
+                            } catch (error) {
+                            }
+                            const sdpObject = sdpTransform.parse(offer.sdp);
+                            const nativeRtpCapabilities = sdpCommonUtils.extractRtpCapabilities({sdpObject});
+                            return nativeRtpCapabilities;
+                        } catch (error) {
+                            try {
+                                pc.close();
+                            } catch (error2) {
+                            }
+                            throw error;
+                        }
+                    }
+
+                    async getNativeSctpCapabilities() {
+                        logger.debug('getNativeSctpCapabilities()');
+                        return {
+                            numStreams: SCTP_NUM_STREAMS
+                        };
+                    }
+
+                    run({
+                            direction,
+                            iceParameters,
+                            iceCandidates,
+                            dtlsParameters,
+                            sctpParameters,
+                            iceServers,
+                            iceTransportPolicy,
+                            additionalSettings,
+                            proprietaryConstraints,
+                            extendedRtpCapabilities
+                        }) {
+                        logger.debug('run()');
+                        this._direction = direction;
+                        this._remoteSdp = new RemoteSdp_1.RemoteSdp({
+                            iceParameters,
+                            iceCandidates,
+                            dtlsParameters,
+                            sctpParameters,
+                            planB: true
+                        });
+                        this._sendingRtpParametersByKind =
+                            {
+                                audio: ortc.getSendingRtpParameters('audio', extendedRtpCapabilities),
+                                video: ortc.getSendingRtpParameters('video', extendedRtpCapabilities)
+                            };
+                        this._sendingRemoteRtpParametersByKind =
+                            {
+                                audio: ortc.getSendingRemoteRtpParameters('audio', extendedRtpCapabilities),
+                                video: ortc.getSendingRemoteRtpParameters('video', extendedRtpCapabilities)
+                            };
+                        if (dtlsParameters.role && dtlsParameters.role !== 'auto') {
+                            this._forcedLocalDtlsRole = dtlsParameters.role === 'server'
+                                ? 'client'
+                                : 'server';
+                        }
+                        this._pc = new RTCPeerConnection({
+                            iceServers: iceServers || [],
+                            iceTransportPolicy: iceTransportPolicy || 'all',
+                            bundlePolicy: 'max-bundle',
+                            rtcpMuxPolicy: 'require',
+                            ...additionalSettings
+                        }, proprietaryConstraints);
+                        // Handle RTCPeerConnection connection status.
+                        this._pc.addEventListener('iceconnectionstatechange', () => {
+                            switch (this._pc.iceConnectionState) {
+                                case 'checking':
+                                    this.emit('@connectionstatechange', 'connecting');
+                                    break;
+                                case 'connected':
+                                case 'completed':
+                                    this.emit('@connectionstatechange', 'connected');
+                                    break;
+                                case 'failed':
+                                    this.emit('@connectionstatechange', 'failed');
+                                    break;
+                                case 'disconnected':
+                                    this.emit('@connectionstatechange', 'disconnected');
+                                    break;
+                                case 'closed':
+                                    this.emit('@connectionstatechange', 'closed');
+                                    break;
+                            }
+                        });
+                    }
+
+                    async updateIceServers(iceServers) {
+                        logger.debug('updateIceServers()');
+                        const configuration = this._pc.getConfiguration();
+                        configuration.iceServers = iceServers;
+                        this._pc.setConfiguration(configuration);
+                    }
+
+                    async restartIce(iceParameters) {
+                        logger.debug('restartIce()');
+                        // Provide the remote SDP handler with new remote ICE parameters.
+                        this._remoteSdp.updateIceParameters(iceParameters);
+                        if (!this._transportReady)
+                            return;
+                        if (this._direction === 'send') {
+                            const offer = await this._pc.createOffer({iceRestart: true});
+                            logger.debug('restartIce() | calling pc.setLocalDescription() [offer:%o]', offer);
+                            await this._pc.setLocalDescription(offer);
+                            const answer = {type: 'answer', sdp: this._remoteSdp.getSdp()};
+                            logger.debug('restartIce() | calling pc.setRemoteDescription() [answer:%o]', answer);
+                            await this._pc.setRemoteDescription(answer);
+                        } else {
+                            const offer = {type: 'offer', sdp: this._remoteSdp.getSdp()};
+                            logger.debug('restartIce() | calling pc.setRemoteDescription() [offer:%o]', offer);
+                            await this._pc.setRemoteDescription(offer);
+                            const answer = await this._pc.createAnswer();
+                            logger.debug('restartIce() | calling pc.setLocalDescription() [answer:%o]', answer);
+                            await this._pc.setLocalDescription(answer);
+                        }
+                    }
+
+                    async getTransportStats() {
+                        return this._pc.getStats();
+                    }
+
+                    async send({track, encodings, codecOptions, codec}) {
+                        var _a;
+                        this._assertSendDirection();
+                        logger.debug('send() [kind:%s, track.id:%s]', track.kind, track.id);
+                        if (codec) {
+                            logger.warn('send() | codec selection is not available in %s handler', this.name);
+                        }
+                        this._sendStream.addTrack(track);
+                        this._pc.addTrack(track, this._sendStream);
+                        let offer = await this._pc.createOffer();
+                        let localSdpObject = sdpTransform.parse(offer.sdp);
+                        let offerMediaObject;
+                        const sendingRtpParameters = utils.clone(this._sendingRtpParametersByKind[track.kind], {});
+                        sendingRtpParameters.codecs =
+                            ortc.reduceCodecs(sendingRtpParameters.codecs);
+                        const sendingRemoteRtpParameters = utils.clone(this._sendingRemoteRtpParametersByKind[track.kind], {});
+                        sendingRemoteRtpParameters.codecs =
+                            ortc.reduceCodecs(sendingRemoteRtpParameters.codecs);
+                        if (!this._transportReady) {
+                            await this._setupTransport({
+                                localDtlsRole: (_a = this._forcedLocalDtlsRole) !== null && _a !== void 0 ? _a : 'client',
+                                localSdpObject
+                            });
+                        }
+                        if (track.kind === 'video' && encodings && encodings.length > 1) {
+                            logger.debug('send() | enabling simulcast');
+                            localSdpObject = sdpTransform.parse(offer.sdp);
+                            offerMediaObject = localSdpObject.media.find((m) => m.type === 'video');
+                            sdpPlanBUtils.addLegacySimulcast({
+                                offerMediaObject,
+                                track,
+                                numStreams: encodings.length
+                            });
+                            offer = {type: 'offer', sdp: sdpTransform.write(localSdpObject)};
+                        }
+                        logger.debug('send() | calling pc.setLocalDescription() [offer:%o]', offer);
+                        await this._pc.setLocalDescription(offer);
+                        localSdpObject = sdpTransform.parse(this._pc.localDescription.sdp);
+                        offerMediaObject = localSdpObject.media
+                            .find((m) => m.type === track.kind);
+                        // Set RTCP CNAME.
+                        sendingRtpParameters.rtcp.cname =
+                            sdpCommonUtils.getCname({offerMediaObject});
+                        // Set RTP encodings.
+                        sendingRtpParameters.encodings =
+                            sdpPlanBUtils.getRtpEncodings({offerMediaObject, track});
+                        // Complete encodings with given values.
+                        if (encodings) {
+                            for (let idx = 0; idx < sendingRtpParameters.encodings.length; ++idx) {
+                                if (encodings[idx])
+                                    Object.assign(sendingRtpParameters.encodings[idx], encodings[idx]);
+                            }
+                        }
+                        // If VP8 and there is effective simulcast, add scalabilityMode to each
+                        // encoding.
+                        if (sendingRtpParameters.encodings.length > 1 &&
+                            sendingRtpParameters.codecs[0].mimeType.toLowerCase() === 'video/vp8') {
+                            for (const encoding of sendingRtpParameters.encodings) {
+                                encoding.scalabilityMode = 'S1T3';
+                            }
+                        }
+                        this._remoteSdp.send({
+                            offerMediaObject,
+                            offerRtpParameters: sendingRtpParameters,
+                            answerRtpParameters: sendingRemoteRtpParameters,
+                            codecOptions
+                        });
+                        const answer = {type: 'answer', sdp: this._remoteSdp.getSdp()};
+                        logger.debug('send() | calling pc.setRemoteDescription() [answer:%o]', answer);
+                        await this._pc.setRemoteDescription(answer);
+                        const localId = String(this._nextSendLocalId);
+                        this._nextSendLocalId++;
+                        const rtpSender = this._pc.getSenders()
+                            .find((s) => s.track === track);
+                        // Insert into the map.
+                        this._mapSendLocalIdRtpSender.set(localId, rtpSender);
+                        return {
+                            localId: localId,
+                            rtpParameters: sendingRtpParameters,
+                            rtpSender
+                        };
+                    }
+
+                    async stopSending(localId) {
+                        this._assertSendDirection();
+                        const rtpSender = this._mapSendLocalIdRtpSender.get(localId);
+                        if (!rtpSender)
+                            throw new Error('associated RTCRtpSender not found');
+                        if (rtpSender.track)
+                            this._sendStream.removeTrack(rtpSender.track);
+                        this._mapSendLocalIdRtpSender.delete(localId);
+                        const offer = await this._pc.createOffer();
+                        logger.debug('stopSending() | calling pc.setLocalDescription() [offer:%o]', offer);
+                        try {
+                            await this._pc.setLocalDescription(offer);
+                        } catch (error) {
+                            // NOTE: If there are no sending tracks, setLocalDescription() will fail with
+                            // "Failed to create channels". If so, ignore it.
+                            if (this._sendStream.getTracks().length === 0) {
+                                logger.warn('stopSending() | ignoring expected error due no sending tracks: %s', error.toString());
+                                return;
+                            }
+                            throw error;
+                        }
+                        if (this._pc.signalingState === 'stable')
+                            return;
+                        const answer = {type: 'answer', sdp: this._remoteSdp.getSdp()};
+                        logger.debug('stopSending() | calling pc.setRemoteDescription() [answer:%o]', answer);
+                        await this._pc.setRemoteDescription(answer);
+                    }
+
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    async pauseSending(localId) {
+                        // Unimplemented.
+                    }
+
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    async resumeSending(localId) {
+                        // Unimplemented.
+                    }
+
+                    async replaceTrack(localId, track) {
+                        this._assertSendDirection();
+                        if (track) {
+                            logger.debug('replaceTrack() [localId:%s, track.id:%s]', localId, track.id);
+                        } else {
+                            logger.debug('replaceTrack() [localId:%s, no track]', localId);
+                        }
+                        const rtpSender = this._mapSendLocalIdRtpSender.get(localId);
+                        if (!rtpSender)
+                            throw new Error('associated RTCRtpSender not found');
+                        const oldTrack = rtpSender.track;
+                        await rtpSender.replaceTrack(track);
+                        // Remove the old track from the local stream.
+                        if (oldTrack)
+                            this._sendStream.removeTrack(oldTrack);
+                        // Add the new track to the local stream.
+                        if (track)
+                            this._sendStream.addTrack(track);
+                    }
+
+                    async setMaxSpatialLayer(localId, spatialLayer) {
+                        this._assertSendDirection();
+                        logger.debug('setMaxSpatialLayer() [localId:%s, spatialLayer:%s]', localId, spatialLayer);
+                        const rtpSender = this._mapSendLocalIdRtpSender.get(localId);
+                        if (!rtpSender)
+                            throw new Error('associated RTCRtpSender not found');
+                        const parameters = rtpSender.getParameters();
+                        parameters.encodings.forEach((encoding, idx) => {
+                            if (idx <= spatialLayer)
+                                encoding.active = true;
+                            else
+                                encoding.active = false;
+                        });
+                        await rtpSender.setParameters(parameters);
+                    }
+
+                    async setRtpEncodingParameters(localId, params) {
+                        this._assertSendDirection();
+                        logger.debug('setRtpEncodingParameters() [localId:%s, params:%o]', localId, params);
+                        const rtpSender = this._mapSendLocalIdRtpSender.get(localId);
+                        if (!rtpSender)
+                            throw new Error('associated RTCRtpSender not found');
+                        const parameters = rtpSender.getParameters();
+                        parameters.encodings.forEach((encoding, idx) => {
+                            parameters.encodings[idx] = {...encoding, ...params};
+                        });
+                        await rtpSender.setParameters(parameters);
+                    }
+
+                    async getSenderStats(localId) {
+                        this._assertSendDirection();
+                        const rtpSender = this._mapSendLocalIdRtpSender.get(localId);
+                        if (!rtpSender)
+                            throw new Error('associated RTCRtpSender not found');
+                        return rtpSender.getStats();
+                    }
+
+                    async sendDataChannel({ordered, maxPacketLifeTime, maxRetransmits, label, protocol}) {
+                        var _a;
+                        this._assertSendDirection();
+                        const options = {
+                            negotiated: true,
+                            id: this._nextSendSctpStreamId,
+                            ordered,
+                            maxPacketLifeTime,
+                            maxRetransmits,
+                            protocol
+                        };
+                        logger.debug('sendDataChannel() [options:%o]', options);
+                        const dataChannel = this._pc.createDataChannel(label, options);
+                        // Increase next id.
+                        this._nextSendSctpStreamId =
+                            ++this._nextSendSctpStreamId % SCTP_NUM_STREAMS.MIS;
+                        // If this is the first DataChannel we need to create the SDP answer with
+                        // m=application section.
+                        if (!this._hasDataChannelMediaSection) {
+                            const offer = await this._pc.createOffer();
+                            const localSdpObject = sdpTransform.parse(offer.sdp);
+                            const offerMediaObject = localSdpObject.media
+                                .find((m) => m.type === 'application');
+                            if (!this._transportReady) {
+                                await this._setupTransport({
+                                    localDtlsRole: (_a = this._forcedLocalDtlsRole) !== null && _a !== void 0 ? _a : 'client',
+                                    localSdpObject
+                                });
+                            }
+                            logger.debug('sendDataChannel() | calling pc.setLocalDescription() [offer:%o]', offer);
+                            await this._pc.setLocalDescription(offer);
+                            this._remoteSdp.sendSctpAssociation({offerMediaObject});
+                            const answer = {type: 'answer', sdp: this._remoteSdp.getSdp()};
+                            logger.debug('sendDataChannel() | calling pc.setRemoteDescription() [answer:%o]', answer);
+                            await this._pc.setRemoteDescription(answer);
+                            this._hasDataChannelMediaSection = true;
+                        }
+                        const sctpStreamParameters = {
+                            streamId: options.id,
+                            ordered: options.ordered,
+                            maxPacketLifeTime: options.maxPacketLifeTime,
+                            maxRetransmits: options.maxRetransmits
+                        };
+                        return {dataChannel, sctpStreamParameters};
+                    }
+
+                    async receive(optionsList) {
+                        var _a;
+                        this._assertRecvDirection();
+                        const results = [];
+                        for (const options of optionsList) {
+                            const {trackId, kind, rtpParameters} = options;
+                            logger.debug('receive() [trackId:%s, kind:%s]', trackId, kind);
+                            const mid = kind;
+                            this._remoteSdp.receive({
+                                mid,
+                                kind,
+                                offerRtpParameters: rtpParameters,
+                                streamId: rtpParameters.rtcp.cname,
+                                trackId
+                            });
+                        }
+                        const offer = {type: 'offer', sdp: this._remoteSdp.getSdp()};
+                        logger.debug('receive() | calling pc.setRemoteDescription() [offer:%o]', offer);
+                        await this._pc.setRemoteDescription(offer);
+                        let answer = await this._pc.createAnswer();
+                        const localSdpObject = sdpTransform.parse(answer.sdp);
+                        for (const options of optionsList) {
+                            const {kind, rtpParameters} = options;
+                            const mid = kind;
+                            const answerMediaObject = localSdpObject.media
+                                .find((m) => String(m.mid) === mid);
+                            // May need to modify codec parameters in the answer based on codec
+                            // parameters in the offer.
+                            sdpCommonUtils.applyCodecParameters({
+                                offerRtpParameters: rtpParameters,
+                                answerMediaObject
+                            });
+                        }
+                        answer = {type: 'answer', sdp: sdpTransform.write(localSdpObject)};
+                        if (!this._transportReady) {
+                            await this._setupTransport({
+                                localDtlsRole: (_a = this._forcedLocalDtlsRole) !== null && _a !== void 0 ? _a : 'client',
+                                localSdpObject
+                            });
+                        }
+                        logger.debug('receive() | calling pc.setLocalDescription() [answer:%o]', answer);
+                        await this._pc.setLocalDescription(answer);
+                        for (const options of optionsList) {
+                            const {kind, trackId, rtpParameters} = options;
+                            const mid = kind;
+                            const localId = trackId;
+                            const rtpReceiver = this._pc.getReceivers()
+                                .find((r) => r.track && r.track.id === localId);
+                            if (!rtpReceiver)
+                                throw new Error('new RTCRtpReceiver not');
+                            // Insert into the map.
+                            this._mapRecvLocalIdInfo.set(localId, {mid, rtpParameters, rtpReceiver});
+                            results.push({
+                                localId,
+                                track: rtpReceiver.track,
+                                rtpReceiver
+                            });
+                        }
+                        return results;
+                    }
+
+                    async stopReceiving(localIds) {
+                        this._assertRecvDirection();
+                        for (const localId of localIds) {
+                            logger.debug('stopReceiving() [localId:%s]', localId);
+                            const {mid, rtpParameters} = this._mapRecvLocalIdInfo.get(localId) || {};
+                            // Remove from the map.
+                            this._mapRecvLocalIdInfo.delete(localId);
+                            this._remoteSdp.planBStopReceiving({mid: mid, offerRtpParameters: rtpParameters});
+                        }
+                        const offer = {type: 'offer', sdp: this._remoteSdp.getSdp()};
+                        logger.debug('stopReceiving() | calling pc.setRemoteDescription() [offer:%o]', offer);
+                        await this._pc.setRemoteDescription(offer);
+                        const answer = await this._pc.createAnswer();
+                        logger.debug('stopReceiving() | calling pc.setLocalDescription() [answer:%o]', answer);
+                        await this._pc.setLocalDescription(answer);
+                    }
+
+                    async getReceiverStats(localId) {
+                        this._assertRecvDirection();
+                        const {rtpReceiver} = this._mapRecvLocalIdInfo.get(localId) || {};
+                        if (!rtpReceiver)
+                            throw new Error('associated RTCRtpReceiver not found');
+                        return rtpReceiver.getStats();
+                    }
+
+                    async pauseReceiving(
+                        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                        localIds) {
+                        // Unimplemented.
+                    }
+
+                    async resumeReceiving(
+                        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                        localIds) {
+                        // Unimplemented.
+                    }
+
+                    async receiveDataChannel({sctpStreamParameters, label, protocol}) {
+                        var _a;
+                        this._assertRecvDirection();
+                        const {streamId, ordered, maxPacketLifeTime, maxRetransmits} = sctpStreamParameters;
+                        const options = {
+                            negotiated: true,
+                            id: streamId,
+                            ordered,
+                            maxPacketLifeTime,
+                            maxRetransmits,
+                            protocol
+                        };
+                        logger.debug('receiveDataChannel() [options:%o]', options);
+                        const dataChannel = this._pc.createDataChannel(label, options);
+                        // If this is the first DataChannel we need to create the SDP offer with
+                        // m=application section.
+                        if (!this._hasDataChannelMediaSection) {
+                            this._remoteSdp.receiveSctpAssociation({oldDataChannelSpec: true});
+                            const offer = {type: 'offer', sdp: this._remoteSdp.getSdp()};
+                            logger.debug('receiveDataChannel() | calling pc.setRemoteDescription() [offer:%o]', offer);
+                            await this._pc.setRemoteDescription(offer);
+                            const answer = await this._pc.createAnswer();
+                            if (!this._transportReady) {
+                                const localSdpObject = sdpTransform.parse(answer.sdp);
+                                await this._setupTransport({
+                                    localDtlsRole: (_a = this._forcedLocalDtlsRole) !== null && _a !== void 0 ? _a : 'client',
+                                    localSdpObject
+                                });
+                            }
+                            logger.debug('receiveDataChannel() | calling pc.setRemoteDescription() [answer:%o]', answer);
+                            await this._pc.setLocalDescription(answer);
+                            this._hasDataChannelMediaSection = true;
+                        }
+                        return {dataChannel};
+                    }
+
+                    async _setupTransport({localDtlsRole, localSdpObject}) {
+                        if (!localSdpObject)
+                            localSdpObject = sdpTransform.parse(this._pc.localDescription.sdp);
+                        // Get our local DTLS parameters.
+                        const dtlsParameters = sdpCommonUtils.extractDtlsParameters({sdpObject: localSdpObject});
+                        // Set our DTLS role.
+                        dtlsParameters.role = localDtlsRole;
+                        // Update the remote DTLS role in the SDP.
+                        this._remoteSdp.updateDtlsRole(localDtlsRole === 'client' ? 'server' : 'client');
+                        // Need to tell the remote transport about our parameters.
+                        await new Promise((resolve, reject) => {
+                            this.safeEmit('@connect', {dtlsParameters}, resolve, reject);
+                        });
+                        this._transportReady = true;
+                    }
+
+                    _assertSendDirection() {
+                        if (this._direction !== 'send') {
+                            throw new Error('method can just be called for handlers with "send" direction');
+                        }
+                    }
+
+                    _assertRecvDirection() {
+                        if (this._direction !== 'recv') {
+                            throw new Error('method can just be called for handlers with "recv" direction');
+                        }
+                    }
+                }
+
+                exports.Safari11 = Safari11;
+
+
+                /***/
+            }),
+
+            /***/ 862:
+            /***/ (function (__unused_webpack_module, exports, __webpack_require__) {
+
+                "use strict";
+
+                var __createBinding = (this && this.__createBinding) || (Object.create ? (function (o, m, k, k2) {
+                    if (k2 === undefined) k2 = k;
+                    var desc = Object.getOwnPropertyDescriptor(m, k);
+                    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+                        desc = {
+                            enumerable: true, get: function () {
+                                return m[k];
+                            }
+                        };
+                    }
+                    Object.defineProperty(o, k2, desc);
+                }) : (function (o, m, k, k2) {
+                    if (k2 === undefined) k2 = k;
+                    o[k2] = m[k];
+                }));
+                var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function (o, v) {
+                    Object.defineProperty(o, "default", {enumerable: true, value: v});
+                }) : function (o, v) {
+                    o["default"] = v;
+                });
+                var __importStar = (this && this.__importStar) || function (mod) {
+                    if (mod && mod.__esModule) return mod;
+                    var result = {};
+                    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+                    __setModuleDefault(result, mod);
+                    return result;
+                };
+                Object.defineProperty(exports, "__esModule", ({value: true}));
+                exports.Safari12 = void 0;
+                const sdpTransform = __importStar(__webpack_require__(766));
+                const Logger_1 = __webpack_require__(562);
+                const utils = __importStar(__webpack_require__(347));
+                const ortc = __importStar(__webpack_require__(280));
+                const sdpCommonUtils = __importStar(__webpack_require__(267));
+                const sdpUnifiedPlanUtils = __importStar(__webpack_require__(72));
+                const HandlerInterface_1 = __webpack_require__(316);
+                const RemoteSdp_1 = __webpack_require__(910);
+                const logger = new Logger_1.Logger('Safari12');
+                const SCTP_NUM_STREAMS = {OS: 1024, MIS: 1024};
+
+                class Safari12 extends HandlerInterface_1.HandlerInterface {
+                    constructor() {
+                        super();
+                        // Map of RTCTransceivers indexed by MID.
+                        this._mapMidTransceiver = new Map();
+                        // Local stream for sending.
+                        this._sendStream = new MediaStream();
+                        // Whether a DataChannel m=application section has been created.
+                        this._hasDataChannelMediaSection = false;
+                        // Sending DataChannel id value counter. Incremented for each new DataChannel.
+                        this._nextSendSctpStreamId = 0;
+                        // Got transport local and remote parameters.
+                        this._transportReady = false;
+                    }
+
+                    /**
+                     * Creates a factory function.
+                     */
+                    static createFactory() {
+                        return () => new Safari12();
+                    }
+
+                    get name() {
+                        return 'Safari12';
+                    }
+
+                    close() {
+                        logger.debug('close()');
+                        // Close RTCPeerConnection.
+                        if (this._pc) {
+                            try {
+                                this._pc.close();
+                            } catch (error) {
+                            }
+                        }
+                        this.emit('@close');
+                    }
+
+                    async getNativeRtpCapabilities() {
+                        logger.debug('getNativeRtpCapabilities()');
+                        const pc = new RTCPeerConnection({
+                            iceServers: [],
+                            iceTransportPolicy: 'all',
+                            bundlePolicy: 'max-bundle',
+                            rtcpMuxPolicy: 'require'
+                        });
+                        try {
+                            pc.addTransceiver('audio');
+                            pc.addTransceiver('video');
+                            const offer = await pc.createOffer();
+                            try {
+                                pc.close();
+                            } catch (error) {
+                            }
+                            const sdpObject = sdpTransform.parse(offer.sdp);
+                            const nativeRtpCapabilities = sdpCommonUtils.extractRtpCapabilities({sdpObject});
+                            return nativeRtpCapabilities;
+                        } catch (error) {
+                            try {
+                                pc.close();
+                            } catch (error2) {
+                            }
+                            throw error;
+                        }
+                    }
+
+                    async getNativeSctpCapabilities() {
+                        logger.debug('getNativeSctpCapabilities()');
+                        return {
+                            numStreams: SCTP_NUM_STREAMS
+                        };
+                    }
+
+                    run({
+                            direction,
+                            iceParameters,
+                            iceCandidates,
+                            dtlsParameters,
+                            sctpParameters,
+                            iceServers,
+                            iceTransportPolicy,
+                            additionalSettings,
+                            proprietaryConstraints,
+                            extendedRtpCapabilities
+                        }) {
+                        logger.debug('run()');
+                        this._direction = direction;
+                        this._remoteSdp = new RemoteSdp_1.RemoteSdp({
+                            iceParameters,
+                            iceCandidates,
+                            dtlsParameters,
+                            sctpParameters
+                        });
+                        this._sendingRtpParametersByKind =
+                            {
+                                audio: ortc.getSendingRtpParameters('audio', extendedRtpCapabilities),
+                                video: ortc.getSendingRtpParameters('video', extendedRtpCapabilities)
+                            };
+                        this._sendingRemoteRtpParametersByKind =
+                            {
+                                audio: ortc.getSendingRemoteRtpParameters('audio', extendedRtpCapabilities),
+                                video: ortc.getSendingRemoteRtpParameters('video', extendedRtpCapabilities)
+                            };
+                        if (dtlsParameters.role && dtlsParameters.role !== 'auto') {
+                            this._forcedLocalDtlsRole = dtlsParameters.role === 'server'
+                                ? 'client'
+                                : 'server';
+                        }
+                        this._pc = new RTCPeerConnection({
+                            iceServers: iceServers || [],
+                            iceTransportPolicy: iceTransportPolicy || 'all',
+                            bundlePolicy: 'max-bundle',
+                            rtcpMuxPolicy: 'require',
+                            ...additionalSettings
+                        }, proprietaryConstraints);
+                        // Handle RTCPeerConnection connection status.
+                        this._pc.addEventListener('iceconnectionstatechange', () => {
+                            switch (this._pc.iceConnectionState) {
+                                case 'checking':
+                                    this.emit('@connectionstatechange', 'connecting');
+                                    break;
+                                case 'connected':
+                                case 'completed':
+                                    this.emit('@connectionstatechange', 'connected');
+                                    break;
+                                case 'failed':
+                                    this.emit('@connectionstatechange', 'failed');
+                                    break;
+                                case 'disconnected':
+                                    this.emit('@connectionstatechange', 'disconnected');
+                                    break;
+                                case 'closed':
+                                    this.emit('@connectionstatechange', 'closed');
+                                    break;
+                            }
+                        });
+                    }
+
+                    async updateIceServers(iceServers) {
+                        logger.debug('updateIceServers()');
+                        const configuration = this._pc.getConfiguration();
+                        configuration.iceServers = iceServers;
+                        this._pc.setConfiguration(configuration);
+                    }
+
+                    async restartIce(iceParameters) {
+                        logger.debug('restartIce()');
+                        // Provide the remote SDP handler with new remote ICE parameters.
+                        this._remoteSdp.updateIceParameters(iceParameters);
+                        if (!this._transportReady)
+                            return;
+                        if (this._direction === 'send') {
+                            const offer = await this._pc.createOffer({iceRestart: true});
+                            logger.debug('restartIce() | calling pc.setLocalDescription() [offer:%o]', offer);
+                            await this._pc.setLocalDescription(offer);
+                            const answer = {type: 'answer', sdp: this._remoteSdp.getSdp()};
+                            logger.debug('restartIce() | calling pc.setRemoteDescription() [answer:%o]', answer);
+                            await this._pc.setRemoteDescription(answer);
+                        } else {
+                            const offer = {type: 'offer', sdp: this._remoteSdp.getSdp()};
+                            logger.debug('restartIce() | calling pc.setRemoteDescription() [offer:%o]', offer);
+                            await this._pc.setRemoteDescription(offer);
+                            const answer = await this._pc.createAnswer();
+                            logger.debug('restartIce() | calling pc.setLocalDescription() [answer:%o]', answer);
+                            await this._pc.setLocalDescription(answer);
+                        }
+                    }
+
+                    async getTransportStats() {
+                        return this._pc.getStats();
+                    }
+
+                    async send({track, encodings, codecOptions, codec}) {
+                        var _a;
+                        this._assertSendDirection();
+                        logger.debug('send() [kind:%s, track.id:%s]', track.kind, track.id);
+                        const sendingRtpParameters = utils.clone(this._sendingRtpParametersByKind[track.kind], {});
+                        // This may throw.
+                        sendingRtpParameters.codecs =
+                            ortc.reduceCodecs(sendingRtpParameters.codecs, codec);
+                        const sendingRemoteRtpParameters = utils.clone(this._sendingRemoteRtpParametersByKind[track.kind], {});
+                        // This may throw.
+                        sendingRemoteRtpParameters.codecs =
+                            ortc.reduceCodecs(sendingRemoteRtpParameters.codecs, codec);
+                        const mediaSectionIdx = this._remoteSdp.getNextMediaSectionIdx();
+                        const transceiver = this._pc.addTransceiver(track, {direction: 'sendonly', streams: [this._sendStream]});
+                        let offer = await this._pc.createOffer();
+                        let localSdpObject = sdpTransform.parse(offer.sdp);
+                        let offerMediaObject;
+                        if (!this._transportReady) {
+                            await this._setupTransport({
+                                localDtlsRole: (_a = this._forcedLocalDtlsRole) !== null && _a !== void 0 ? _a : 'client',
+                                localSdpObject
+                            });
+                        }
+                        if (encodings && encodings.length > 1) {
+                            logger.debug('send() | enabling legacy simulcast');
+                            localSdpObject = sdpTransform.parse(offer.sdp);
+                            offerMediaObject = localSdpObject.media[mediaSectionIdx.idx];
+                            sdpUnifiedPlanUtils.addLegacySimulcast({
+                                offerMediaObject,
+                                numStreams: encodings.length
+                            });
+                            offer = {type: 'offer', sdp: sdpTransform.write(localSdpObject)};
+                        }
+                        logger.debug('send() | calling pc.setLocalDescription() [offer:%o]', offer);
+                        await this._pc.setLocalDescription(offer);
+                        // We can now get the transceiver.mid.
+                        const localId = transceiver.mid;
+                        // Set MID.
+                        sendingRtpParameters.mid = localId;
+                        localSdpObject = sdpTransform.parse(this._pc.localDescription.sdp);
+                        offerMediaObject = localSdpObject.media[mediaSectionIdx.idx];
+                        // Set RTCP CNAME.
+                        sendingRtpParameters.rtcp.cname =
+                            sdpCommonUtils.getCname({offerMediaObject});
+                        // Set RTP encodings.
+                        sendingRtpParameters.encodings =
+                            sdpUnifiedPlanUtils.getRtpEncodings({offerMediaObject});
+                        // Complete encodings with given values.
+                        if (encodings) {
+                            for (let idx = 0; idx < sendingRtpParameters.encodings.length; ++idx) {
+                                if (encodings[idx])
+                                    Object.assign(sendingRtpParameters.encodings[idx], encodings[idx]);
+                            }
+                        }
+                        // If VP8 or H264 and there is effective simulcast, add scalabilityMode to
+                        // each encoding.
+                        if (sendingRtpParameters.encodings.length > 1 &&
+                            (sendingRtpParameters.codecs[0].mimeType.toLowerCase() === 'video/vp8' ||
+                                sendingRtpParameters.codecs[0].mimeType.toLowerCase() === 'video/h264')) {
+                            for (const encoding of sendingRtpParameters.encodings) {
+                                encoding.scalabilityMode = 'S1T3';
+                            }
+                        }
+                        this._remoteSdp.send({
+                            offerMediaObject,
+                            reuseMid: mediaSectionIdx.reuseMid,
+                            offerRtpParameters: sendingRtpParameters,
+                            answerRtpParameters: sendingRemoteRtpParameters,
+                            codecOptions
+                        });
+                        const answer = {type: 'answer', sdp: this._remoteSdp.getSdp()};
+                        logger.debug('send() | calling pc.setRemoteDescription() [answer:%o]', answer);
+                        await this._pc.setRemoteDescription(answer);
+                        // Store in the map.
+                        this._mapMidTransceiver.set(localId, transceiver);
+                        return {
+                            localId,
+                            rtpParameters: sendingRtpParameters,
+                            rtpSender: transceiver.sender
+                        };
+                    }
+
+                    async stopSending(localId) {
+                        this._assertSendDirection();
+                        logger.debug('stopSending() [localId:%s]', localId);
+                        const transceiver = this._mapMidTransceiver.get(localId);
+                        if (!transceiver)
+                            throw new Error('associated RTCRtpTransceiver not found');
+                        transceiver.sender.replaceTrack(null);
+                        this._pc.removeTrack(transceiver.sender);
+                        this._remoteSdp.closeMediaSection(transceiver.mid);
+                        const offer = await this._pc.createOffer();
+                        logger.debug('stopSending() | calling pc.setLocalDescription() [offer:%o]', offer);
+                        await this._pc.setLocalDescription(offer);
+                        const answer = {type: 'answer', sdp: this._remoteSdp.getSdp()};
+                        logger.debug('stopSending() | calling pc.setRemoteDescription() [answer:%o]', answer);
+                        await this._pc.setRemoteDescription(answer);
+                        this._mapMidTransceiver.delete(localId);
+                    }
+
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    async pauseSending(localId) {
+                        this._assertSendDirection();
+                        logger.debug('pauseSending() [localId:%s]', localId);
+                        const transceiver = this._mapMidTransceiver.get(localId);
+                        if (!transceiver)
+                            throw new Error('associated RTCRtpTransceiver not found');
+                        transceiver.direction = 'inactive';
+                        const offer = await this._pc.createOffer();
+                        logger.debug('pauseSending() | calling pc.setLocalDescription() [offer:%o]', offer);
+                        await this._pc.setLocalDescription(offer);
+                        const answer = {type: 'answer', sdp: this._remoteSdp.getSdp()};
+                        logger.debug('pauseSending() | calling pc.setRemoteDescription() [answer:%o]', answer);
+                        await this._pc.setRemoteDescription(answer);
+                    }
+
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    async resumeSending(localId) {
+                        this._assertSendDirection();
+                        logger.debug('resumeSending() [localId:%s]', localId);
+                        const transceiver = this._mapMidTransceiver.get(localId);
+                        if (!transceiver)
+                            throw new Error('associated RTCRtpTransceiver not found');
+                        transceiver.direction = 'sendonly';
+                        const offer = await this._pc.createOffer();
+                        logger.debug('resumeSending() | calling pc.setLocalDescription() [offer:%o]', offer);
+                        await this._pc.setLocalDescription(offer);
+                        const answer = {type: 'answer', sdp: this._remoteSdp.getSdp()};
+                        logger.debug('resumeSending() | calling pc.setRemoteDescription() [answer:%o]', answer);
+                        await this._pc.setRemoteDescription(answer);
+                    }
+
+                    async replaceTrack(localId, track) {
+                        this._assertSendDirection();
+                        if (track) {
+                            logger.debug('replaceTrack() [localId:%s, track.id:%s]', localId, track.id);
+                        } else {
+                            logger.debug('replaceTrack() [localId:%s, no track]', localId);
+                        }
+                        const transceiver = this._mapMidTransceiver.get(localId);
+                        if (!transceiver)
+                            throw new Error('associated RTCRtpTransceiver not found');
+                        await transceiver.sender.replaceTrack(track);
+                    }
+
+                    async setMaxSpatialLayer(localId, spatialLayer) {
+                        this._assertSendDirection();
+                        logger.debug('setMaxSpatialLayer() [localId:%s, spatialLayer:%s]', localId, spatialLayer);
+                        const transceiver = this._mapMidTransceiver.get(localId);
+                        if (!transceiver)
+                            throw new Error('associated RTCRtpTransceiver not found');
+                        const parameters = transceiver.sender.getParameters();
+                        parameters.encodings.forEach((encoding, idx) => {
+                            if (idx <= spatialLayer)
+                                encoding.active = true;
+                            else
+                                encoding.active = false;
+                        });
+                        await transceiver.sender.setParameters(parameters);
+                    }
+
+                    async setRtpEncodingParameters(localId, params) {
+                        this._assertSendDirection();
+                        logger.debug('setRtpEncodingParameters() [localId:%s, params:%o]', localId, params);
+                        const transceiver = this._mapMidTransceiver.get(localId);
+                        if (!transceiver)
+                            throw new Error('associated RTCRtpTransceiver not found');
+                        const parameters = transceiver.sender.getParameters();
+                        parameters.encodings.forEach((encoding, idx) => {
+                            parameters.encodings[idx] = {...encoding, ...params};
+                        });
+                        await transceiver.sender.setParameters(parameters);
+                    }
+
+                    async getSenderStats(localId) {
+                        this._assertSendDirection();
+                        const transceiver = this._mapMidTransceiver.get(localId);
+                        if (!transceiver)
+                            throw new Error('associated RTCRtpTransceiver not found');
+                        return transceiver.sender.getStats();
+                    }
+
+                    async sendDataChannel({ordered, maxPacketLifeTime, maxRetransmits, label, protocol}) {
+                        var _a;
+                        this._assertSendDirection();
+                        const options = {
+                            negotiated: true,
+                            id: this._nextSendSctpStreamId,
+                            ordered,
+                            maxPacketLifeTime,
+                            maxRetransmits,
+                            protocol
+                        };
+                        logger.debug('sendDataChannel() [options:%o]', options);
+                        const dataChannel = this._pc.createDataChannel(label, options);
+                        // Increase next id.
+                        this._nextSendSctpStreamId =
+                            ++this._nextSendSctpStreamId % SCTP_NUM_STREAMS.MIS;
+                        // If this is the first DataChannel we need to create the SDP answer with
+                        // m=application section.
+                        if (!this._hasDataChannelMediaSection) {
+                            const offer = await this._pc.createOffer();
+                            const localSdpObject = sdpTransform.parse(offer.sdp);
+                            const offerMediaObject = localSdpObject.media
+                                .find((m) => m.type === 'application');
+                            if (!this._transportReady) {
+                                await this._setupTransport({
+                                    localDtlsRole: (_a = this._forcedLocalDtlsRole) !== null && _a !== void 0 ? _a : 'client',
+                                    localSdpObject
+                                });
+                            }
+                            logger.debug('sendDataChannel() | calling pc.setLocalDescription() [offer:%o]', offer);
+                            await this._pc.setLocalDescription(offer);
+                            this._remoteSdp.sendSctpAssociation({offerMediaObject});
+                            const answer = {type: 'answer', sdp: this._remoteSdp.getSdp()};
+                            logger.debug('sendDataChannel() | calling pc.setRemoteDescription() [answer:%o]', answer);
+                            await this._pc.setRemoteDescription(answer);
+                            this._hasDataChannelMediaSection = true;
+                        }
+                        const sctpStreamParameters = {
+                            streamId: options.id,
+                            ordered: options.ordered,
+                            maxPacketLifeTime: options.maxPacketLifeTime,
+                            maxRetransmits: options.maxRetransmits
+                        };
+                        return {dataChannel, sctpStreamParameters};
+                    }
+
+                    async receive(optionsList) {
+                        var _a;
+                        this._assertRecvDirection();
+                        const results = [];
+                        const mapLocalId = new Map();
+                        for (const options of optionsList) {
+                            const {trackId, kind, rtpParameters} = options;
+                            logger.debug('receive() [trackId:%s, kind:%s]', trackId, kind);
+                            const localId = rtpParameters.mid || String(this._mapMidTransceiver.size);
+                            mapLocalId.set(trackId, localId);
+                            this._remoteSdp.receive({
+                                mid: localId,
+                                kind,
+                                offerRtpParameters: rtpParameters,
+                                streamId: rtpParameters.rtcp.cname,
+                                trackId
+                            });
+                        }
+                        const offer = {type: 'offer', sdp: this._remoteSdp.getSdp()};
+                        logger.debug('receive() | calling pc.setRemoteDescription() [offer:%o]', offer);
+                        await this._pc.setRemoteDescription(offer);
+                        let answer = await this._pc.createAnswer();
+                        const localSdpObject = sdpTransform.parse(answer.sdp);
+                        for (const options of optionsList) {
+                            const {trackId, rtpParameters} = options;
+                            const localId = mapLocalId.get(trackId);
+                            const answerMediaObject = localSdpObject.media
+                                .find((m) => String(m.mid) === localId);
+                            // May need to modify codec parameters in the answer based on codec
+                            // parameters in the offer.
+                            sdpCommonUtils.applyCodecParameters({
+                                offerRtpParameters: rtpParameters,
+                                answerMediaObject
+                            });
+                        }
+                        answer = {type: 'answer', sdp: sdpTransform.write(localSdpObject)};
+                        if (!this._transportReady) {
+                            await this._setupTransport({
+                                localDtlsRole: (_a = this._forcedLocalDtlsRole) !== null && _a !== void 0 ? _a : 'client',
+                                localSdpObject
+                            });
+                        }
+                        logger.debug('receive() | calling pc.setLocalDescription() [answer:%o]', answer);
+                        await this._pc.setLocalDescription(answer);
+                        for (const options of optionsList) {
+                            const {trackId} = options;
+                            const localId = mapLocalId.get(trackId);
+                            const transceiver = this._pc.getTransceivers()
+                                .find((t) => t.mid === localId);
+                            if (!transceiver)
+                                throw new Error('new RTCRtpTransceiver not found');
+                            // Store in the map.
+                            this._mapMidTransceiver.set(localId, transceiver);
+                            results.push({
+                                localId,
+                                track: transceiver.receiver.track,
+                                rtpReceiver: transceiver.receiver
+                            });
+                        }
+                        return results;
+                    }
+
+                    async stopReceiving(localIds) {
+                        this._assertRecvDirection();
+                        for (const localId of localIds) {
+                            logger.debug('stopReceiving() [localId:%s]', localId);
+                            const transceiver = this._mapMidTransceiver.get(localId);
+                            if (!transceiver)
+                                throw new Error('associated RTCRtpTransceiver not found');
+                            this._remoteSdp.closeMediaSection(transceiver.mid);
+                        }
+                        const offer = {type: 'offer', sdp: this._remoteSdp.getSdp()};
+                        logger.debug('stopReceiving() | calling pc.setRemoteDescription() [offer:%o]', offer);
+                        await this._pc.setRemoteDescription(offer);
+                        const answer = await this._pc.createAnswer();
+                        logger.debug('stopReceiving() | calling pc.setLocalDescription() [answer:%o]', answer);
+                        await this._pc.setLocalDescription(answer);
+                        for (const localId of localIds) {
+                            this._mapMidTransceiver.delete(localId);
+                        }
+                    }
+
+                    async pauseReceiving(localIds) {
+                        this._assertRecvDirection();
+                        for (const localId of localIds) {
+                            logger.debug('pauseReceiving() [localId:%s]', localId);
+                            const transceiver = this._mapMidTransceiver.get(localId);
+                            if (!transceiver)
+                                throw new Error('associated RTCRtpTransceiver not found');
+                            transceiver.direction = 'inactive';
+                        }
+                        const offer = {type: 'offer', sdp: this._remoteSdp.getSdp()};
+                        logger.debug('pauseReceiving() | calling pc.setRemoteDescription() [offer:%o]', offer);
+                        await this._pc.setRemoteDescription(offer);
+                        const answer = await this._pc.createAnswer();
+                        logger.debug('pauseReceiving() | calling pc.setLocalDescription() [answer:%o]', answer);
+                        await this._pc.setLocalDescription(answer);
+                    }
+
+                    async resumeReceiving(localIds) {
+                        this._assertRecvDirection();
+                        for (const localId of localIds) {
+                            logger.debug('resumeReceiving() [localId:%s]', localId);
+                            const transceiver = this._mapMidTransceiver.get(localId);
+                            if (!transceiver)
+                                throw new Error('associated RTCRtpTransceiver not found');
+                            transceiver.direction = 'recvonly';
+                        }
+                        const offer = {type: 'offer', sdp: this._remoteSdp.getSdp()};
+                        logger.debug('resumeReceiving() | calling pc.setRemoteDescription() [offer:%o]', offer);
+                        await this._pc.setRemoteDescription(offer);
+                        const answer = await this._pc.createAnswer();
+                        logger.debug('resumeReceiving() | calling pc.setLocalDescription() [answer:%o]', answer);
+                        await this._pc.setLocalDescription(answer);
+                    }
+
+                    async getReceiverStats(localId) {
+                        this._assertRecvDirection();
+                        const transceiver = this._mapMidTransceiver.get(localId);
+                        if (!transceiver)
+                            throw new Error('associated RTCRtpTransceiver not found');
+                        return transceiver.receiver.getStats();
+                    }
+
+                    async receiveDataChannel({sctpStreamParameters, label, protocol}) {
+                        var _a;
+                        this._assertRecvDirection();
+                        const {streamId, ordered, maxPacketLifeTime, maxRetransmits} = sctpStreamParameters;
+                        const options = {
+                            negotiated: true,
+                            id: streamId,
+                            ordered,
+                            maxPacketLifeTime,
+                            maxRetransmits,
+                            protocol
+                        };
+                        logger.debug('receiveDataChannel() [options:%o]', options);
+                        const dataChannel = this._pc.createDataChannel(label, options);
+                        // If this is the first DataChannel we need to create the SDP offer with
+                        // m=application section.
+                        if (!this._hasDataChannelMediaSection) {
+                            this._remoteSdp.receiveSctpAssociation();
+                            const offer = {type: 'offer', sdp: this._remoteSdp.getSdp()};
+                            logger.debug('receiveDataChannel() | calling pc.setRemoteDescription() [offer:%o]', offer);
+                            await this._pc.setRemoteDescription(offer);
+                            const answer = await this._pc.createAnswer();
+                            if (!this._transportReady) {
+                                const localSdpObject = sdpTransform.parse(answer.sdp);
+                                await this._setupTransport({
+                                    localDtlsRole: (_a = this._forcedLocalDtlsRole) !== null && _a !== void 0 ? _a : 'client',
+                                    localSdpObject
+                                });
+                            }
+                            logger.debug('receiveDataChannel() | calling pc.setRemoteDescription() [answer:%o]', answer);
+                            await this._pc.setLocalDescription(answer);
+                            this._hasDataChannelMediaSection = true;
+                        }
+                        return {dataChannel};
+                    }
+
+                    async _setupTransport({localDtlsRole, localSdpObject}) {
+                        if (!localSdpObject)
+                            localSdpObject = sdpTransform.parse(this._pc.localDescription.sdp);
+                        // Get our local DTLS parameters.
+                        const dtlsParameters = sdpCommonUtils.extractDtlsParameters({sdpObject: localSdpObject});
+                        // Set our DTLS role.
+                        dtlsParameters.role = localDtlsRole;
+                        // Update the remote DTLS role in the SDP.
+                        this._remoteSdp.updateDtlsRole(localDtlsRole === 'client' ? 'server' : 'client');
+                        // Need to tell the remote transport about our parameters.
+                        await new Promise((resolve, reject) => {
+                            this.safeEmit('@connect', {dtlsParameters}, resolve, reject);
+                        });
+                        this._transportReady = true;
+                    }
+
+                    _assertSendDirection() {
+                        if (this._direction !== 'send') {
+                            throw new Error('method can just be called for handlers with "send" direction');
+                        }
+                    }
+
+                    _assertRecvDirection() {
+                        if (this._direction !== 'recv') {
+                            throw new Error('method can just be called for handlers with "recv" direction');
+                        }
+                    }
+                }
+
+                exports.Safari12 = Safari12;
+
+
+                /***/
+            }),
+
+            /***/ 635:
+            /***/ (function (__unused_webpack_module, exports, __webpack_require__) {
+
+                "use strict";
+
+                var __createBinding = (this && this.__createBinding) || (Object.create ? (function (o, m, k, k2) {
+                    if (k2 === undefined) k2 = k;
+                    var desc = Object.getOwnPropertyDescriptor(m, k);
+                    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+                        desc = {
+                            enumerable: true, get: function () {
+                                return m[k];
+                            }
+                        };
+                    }
+                    Object.defineProperty(o, k2, desc);
+                }) : (function (o, m, k, k2) {
+                    if (k2 === undefined) k2 = k;
+                    o[k2] = m[k];
+                }));
+                var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function (o, v) {
+                    Object.defineProperty(o, "default", {enumerable: true, value: v});
+                }) : function (o, v) {
+                    o["default"] = v;
+                });
+                var __importStar = (this && this.__importStar) || function (mod) {
+                    if (mod && mod.__esModule) return mod;
+                    var result = {};
+                    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+                    __setModuleDefault(result, mod);
+                    return result;
+                };
+                Object.defineProperty(exports, "__esModule", ({value: true}));
+                exports.mangleRtpParameters = exports.getCapabilities = void 0;
+                const utils = __importStar(__webpack_require__(347));
+
+                /**
+                 * Normalize ORTC based Edge's RTCRtpReceiver.getCapabilities() to produce a full
+                 * compliant ORTC RTCRtpCapabilities.
+                 */
+                function getCapabilities() {
+                    const nativeCaps = RTCRtpReceiver.getCapabilities();
+                    const caps = utils.clone(nativeCaps, {});
+                    for (const codec of caps.codecs) {
+                        // Rename numChannels to channels.
+                        codec.channels = codec.numChannels;
+                        delete codec.numChannels;
+                        // Add mimeType.
+                        codec.mimeType = codec.mimeType || `${codec.kind}/${codec.name}`;
+                        // NOTE: Edge sets some numeric parameters as string rather than number. Fix them.
+                        if (codec.parameters) {
+                            const parameters = codec.parameters;
+                            if (parameters.apt)
+                                parameters.apt = Number(parameters.apt);
+                            if (parameters['packetization-mode'])
+                                parameters['packetization-mode'] = Number(parameters['packetization-mode']);
+                        }
+                        // Delete emty parameter String in rtcpFeedback.
+                        for (const feedback of codec.rtcpFeedback || []) {
+                            if (!feedback.parameter)
+                                feedback.parameter = '';
+                        }
+                    }
+                    return caps;
+                }
+
+                exports.getCapabilities = getCapabilities;
+
+                /**
+                 * Generate RTCRtpParameters as ORTC based Edge likes.
+                 */
+                function mangleRtpParameters(rtpParameters) {
+                    const params = utils.clone(rtpParameters, {});
+                    // Rename mid to muxId.
+                    if (params.mid) {
+                        params.muxId = params.mid;
+                        delete params.mid;
+                    }
+                    for (const codec of params.codecs) {
+                        // Rename channels to numChannels.
+                        if (codec.channels) {
+                            codec.numChannels = codec.channels;
+                            delete codec.channels;
+                        }
+                        // Add codec.name (requried by Edge).
+                        if (codec.mimeType && !codec.name)
+                            codec.name = codec.mimeType.split('/')[1];
+                        // Remove mimeType.
+                        delete codec.mimeType;
+                    }
+                    return params;
+                }
+
+                exports.mangleRtpParameters = mangleRtpParameters;
+
+
+                /***/
+            }),
+
+            /***/ 698:
+            /***/ (function (__unused_webpack_module, exports, __webpack_require__) {
+
+                "use strict";
+
+                var __createBinding = (this && this.__createBinding) || (Object.create ? (function (o, m, k, k2) {
+                    if (k2 === undefined) k2 = k;
+                    var desc = Object.getOwnPropertyDescriptor(m, k);
+                    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+                        desc = {
+                            enumerable: true, get: function () {
+                                return m[k];
+                            }
+                        };
+                    }
+                    Object.defineProperty(o, k2, desc);
+                }) : (function (o, m, k, k2) {
+                    if (k2 === undefined) k2 = k;
+                    o[k2] = m[k];
+                }));
+                var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function (o, v) {
+                    Object.defineProperty(o, "default", {enumerable: true, value: v});
+                }) : function (o, v) {
+                    o["default"] = v;
+                });
+                var __importStar = (this && this.__importStar) || function (mod) {
+                    if (mod && mod.__esModule) return mod;
+                    var result = {};
+                    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+                    __setModuleDefault(result, mod);
+                    return result;
+                };
+                Object.defineProperty(exports, "__esModule", ({value: true}));
+                exports.OfferMediaSection = exports.AnswerMediaSection = exports.MediaSection = void 0;
+                const utils = __importStar(__webpack_require__(347));
+
+                class MediaSection {
+                    constructor({iceParameters, iceCandidates, dtlsParameters, planB = false}) {
+                        this._mediaObject = {};
+                        this._planB = planB;
+                        if (iceParameters) {
+                            this.setIceParameters(iceParameters);
+                        }
+                        if (iceCandidates) {
+                            this._mediaObject.candidates = [];
+                            for (const candidate of iceCandidates) {
+                                const candidateObject = {};
+                                // mediasoup does mandates rtcp-mux so candidates component is always
+                                // RTP (1).
+                                candidateObject.component = 1;
+                                candidateObject.foundation = candidate.foundation;
+                                candidateObject.ip = candidate.ip;
+                                candidateObject.port = candidate.port;
+                                candidateObject.priority = candidate.priority;
+                                candidateObject.transport = candidate.protocol;
+                                candidateObject.type = candidate.type;
+                                if (candidate.tcpType)
+                                    candidateObject.tcptype = candidate.tcpType;
+                                this._mediaObject.candidates.push(candidateObject);
+                            }
+                            this._mediaObject.endOfCandidates = 'end-of-candidates';
+                            this._mediaObject.iceOptions = 'renomination';
+                        }
+                        if (dtlsParameters) {
+                            this.setDtlsRole(dtlsParameters.role);
+                        }
+                    }
+
+                    get mid() {
+                        return String(this._mediaObject.mid);
+                    }
+
+                    get closed() {
+                        return this._mediaObject.port === 0;
+                    }
+
+                    getObject() {
+                        return this._mediaObject;
+                    }
+
+                    setIceParameters(iceParameters) {
+                        this._mediaObject.iceUfrag = iceParameters.usernameFragment;
+                        this._mediaObject.icePwd = iceParameters.password;
+                    }
+
+                    disable() {
+                        this._mediaObject.direction = 'inactive';
+                        delete this._mediaObject.ext;
+                        delete this._mediaObject.ssrcs;
+                        delete this._mediaObject.ssrcGroups;
+                        delete this._mediaObject.simulcast;
+                        delete this._mediaObject.simulcast_03;
+                        delete this._mediaObject.rids;
+                    }
+
+                    close() {
+                        this._mediaObject.direction = 'inactive';
+                        this._mediaObject.port = 0;
+                        delete this._mediaObject.ext;
+                        delete this._mediaObject.ssrcs;
+                        delete this._mediaObject.ssrcGroups;
+                        delete this._mediaObject.simulcast;
+                        delete this._mediaObject.simulcast_03;
+                        delete this._mediaObject.rids;
+                        delete this._mediaObject.extmapAllowMixed;
+                    }
+                }
+
+                exports.MediaSection = MediaSection;
+
+                class AnswerMediaSection extends MediaSection {
+                    constructor({
+                                    iceParameters,
+                                    iceCandidates,
+                                    dtlsParameters,
+                                    sctpParameters,
+                                    plainRtpParameters,
+                                    planB = false,
+                                    offerMediaObject,
+                                    offerRtpParameters,
+                                    answerRtpParameters,
+                                    codecOptions,
+                                    extmapAllowMixed = false
+                                }) {
+                        super({iceParameters, iceCandidates, dtlsParameters, planB});
+                        this._mediaObject.mid = String(offerMediaObject.mid);
+                        this._mediaObject.type = offerMediaObject.type;
+                        this._mediaObject.protocol = offerMediaObject.protocol;
+                        if (!plainRtpParameters) {
+                            this._mediaObject.connection = {ip: '127.0.0.1', version: 4};
+                            this._mediaObject.port = 7;
+                        } else {
+                            this._mediaObject.connection =
+                                {
+                                    ip: plainRtpParameters.ip,
+                                    version: plainRtpParameters.ipVersion
+                                };
+                            this._mediaObject.port = plainRtpParameters.port;
+                        }
+                        switch (offerMediaObject.type) {
+                            case 'audio':
+                            case 'video': {
+                                this._mediaObject.direction = 'recvonly';
+                                this._mediaObject.rtp = [];
+                                this._mediaObject.rtcpFb = [];
+                                this._mediaObject.fmtp = [];
+                                for (const codec of answerRtpParameters.codecs) {
+                                    const rtp = {
+                                        payload: codec.payloadType,
+                                        codec: getCodecName(codec),
+                                        rate: codec.clockRate
+                                    };
+                                    if (codec.channels > 1)
+                                        rtp.encoding = codec.channels;
+                                    this._mediaObject.rtp.push(rtp);
+                                    const codecParameters = utils.clone(codec.parameters, {});
+                                    if (codecOptions) {
+                                        const {
+                                            opusStereo,
+                                            opusFec,
+                                            opusDtx,
+                                            opusMaxPlaybackRate,
+                                            opusMaxAverageBitrate,
+                                            opusPtime,
+                                            videoGoogleStartBitrate,
+                                            videoGoogleMaxBitrate,
+                                            videoGoogleMinBitrate
+                                        } = codecOptions;
+                                        const offerCodec = offerRtpParameters.codecs
+                                            .find((c) => (c.payloadType === codec.payloadType));
+                                        switch (codec.mimeType.toLowerCase()) {
+                                            case 'audio/opus': {
+                                                if (opusStereo !== undefined) {
+                                                    offerCodec.parameters['sprop-stereo'] = opusStereo ? 1 : 0;
+                                                    codecParameters.stereo = opusStereo ? 1 : 0;
+                                                }
+                                                if (opusFec !== undefined) {
+                                                    offerCodec.parameters.useinbandfec = opusFec ? 1 : 0;
+                                                    codecParameters.useinbandfec = opusFec ? 1 : 0;
+                                                }
+                                                if (opusDtx !== undefined) {
+                                                    offerCodec.parameters.usedtx = opusDtx ? 1 : 0;
+                                                    codecParameters.usedtx = opusDtx ? 1 : 0;
+                                                }
+                                                if (opusMaxPlaybackRate !== undefined) {
+                                                    codecParameters.maxplaybackrate = opusMaxPlaybackRate;
+                                                }
+                                                if (opusMaxAverageBitrate !== undefined) {
+                                                    codecParameters.maxaveragebitrate = opusMaxAverageBitrate;
+                                                }
+                                                if (opusPtime !== undefined) {
+                                                    offerCodec.parameters.ptime = opusPtime;
+                                                    codecParameters.ptime = opusPtime;
+                                                }
+                                                break;
+                                            }
+                                            case 'video/vp8':
+                                            case 'video/vp9':
+                                            case 'video/h264':
+                                            case 'video/h265': {
+                                                if (videoGoogleStartBitrate !== undefined)
+                                                    codecParameters['x-google-start-bitrate'] = videoGoogleStartBitrate;
+                                                if (videoGoogleMaxBitrate !== undefined)
+                                                    codecParameters['x-google-max-bitrate'] = videoGoogleMaxBitrate;
+                                                if (videoGoogleMinBitrate !== undefined)
+                                                    codecParameters['x-google-min-bitrate'] = videoGoogleMinBitrate;
+                                                break;
+                                            }
+                                        }
+                                    }
+                                    const fmtp = {
+                                        payload: codec.payloadType,
+                                        config: ''
+                                    };
+                                    for (const key of Object.keys(codecParameters)) {
+                                        if (fmtp.config)
+                                            fmtp.config += ';';
+                                        fmtp.config += `${key}=${codecParameters[key]}`;
+                                    }
+                                    if (fmtp.config)
+                                        this._mediaObject.fmtp.push(fmtp);
+                                    for (const fb of codec.rtcpFeedback) {
+                                        this._mediaObject.rtcpFb.push({
+                                            payload: codec.payloadType,
+                                            type: fb.type,
+                                            subtype: fb.parameter
+                                        });
+                                    }
+                                }
+                                this._mediaObject.payloads = answerRtpParameters.codecs
+                                    .map((codec) => codec.payloadType)
+                                    .join(' ');
+                                this._mediaObject.ext = [];
+                                for (const ext of answerRtpParameters.headerExtensions) {
+                                    // Don't add a header extension if not present in the offer.
+                                    const found = (offerMediaObject.ext || [])
+                                        .some((localExt) => localExt.uri === ext.uri);
+                                    if (!found)
+                                        continue;
+                                    this._mediaObject.ext.push({
+                                        uri: ext.uri,
+                                        value: ext.id
+                                    });
+                                }
+                                // Allow both 1 byte and 2 bytes length header extensions.
+                                if (extmapAllowMixed &&
+                                    offerMediaObject.extmapAllowMixed === 'extmap-allow-mixed') {
+                                    this._mediaObject.extmapAllowMixed = 'extmap-allow-mixed';
+                                }
+                                // Simulcast.
+                                if (offerMediaObject.simulcast) {
+                                    this._mediaObject.simulcast =
+                                        {
+                                            dir1: 'recv',
+                                            list1: offerMediaObject.simulcast.list1
+                                        };
+                                    this._mediaObject.rids = [];
+                                    for (const rid of offerMediaObject.rids || []) {
+                                        if (rid.direction !== 'send')
+                                            continue;
+                                        this._mediaObject.rids.push({
+                                            id: rid.id,
+                                            direction: 'recv'
+                                        });
+                                    }
+                                }
+                                // Simulcast (draft version 03).
+                                else if (offerMediaObject.simulcast_03) {
+                                    // eslint-disable-next-line camelcase
+                                    this._mediaObject.simulcast_03 =
+                                        {
+                                            value: offerMediaObject.simulcast_03.value.replace(/send/g, 'recv')
+                                        };
+                                    this._mediaObject.rids = [];
+                                    for (const rid of offerMediaObject.rids || []) {
+                                        if (rid.direction !== 'send')
+                                            continue;
+                                        this._mediaObject.rids.push({
+                                            id: rid.id,
+                                            direction: 'recv'
+                                        });
+                                    }
+                                }
+                                this._mediaObject.rtcpMux = 'rtcp-mux';
+                                this._mediaObject.rtcpRsize = 'rtcp-rsize';
+                                if (this._planB && this._mediaObject.type === 'video')
+                                    this._mediaObject.xGoogleFlag = 'conference';
+                                break;
+                            }
+                            case 'application': {
+                                // New spec.
+                                if (typeof offerMediaObject.sctpPort === 'number') {
+                                    this._mediaObject.payloads = 'webrtc-datachannel';
+                                    this._mediaObject.sctpPort = sctpParameters.port;
+                                    this._mediaObject.maxMessageSize = sctpParameters.maxMessageSize;
+                                }
+                                // Old spec.
+                                else if (offerMediaObject.sctpmap) {
+                                    this._mediaObject.payloads = sctpParameters.port;
+                                    this._mediaObject.sctpmap =
+                                        {
+                                            app: 'webrtc-datachannel',
+                                            sctpmapNumber: sctpParameters.port,
+                                            maxMessageSize: sctpParameters.maxMessageSize
+                                        };
+                                }
+                                break;
+                            }
+                        }
+                    }
+
+                    setDtlsRole(role) {
+                        switch (role) {
+                            case 'client':
+                                this._mediaObject.setup = 'active';
+                                break;
+                            case 'server':
+                                this._mediaObject.setup = 'passive';
+                                break;
+                            case 'auto':
+                                this._mediaObject.setup = 'actpass';
+                                break;
+                        }
+                    }
+                }
+
+                exports.AnswerMediaSection = AnswerMediaSection;
+
+                class OfferMediaSection extends MediaSection {
+                    constructor({
+                                    iceParameters,
+                                    iceCandidates,
+                                    dtlsParameters,
+                                    sctpParameters,
+                                    plainRtpParameters,
+                                    planB = false,
+                                    mid,
+                                    kind,
+                                    offerRtpParameters,
+                                    streamId,
+                                    trackId,
+                                    oldDataChannelSpec = false
+                                }) {
+                        super({iceParameters, iceCandidates, dtlsParameters, planB});
+                        this._mediaObject.mid = String(mid);
+                        this._mediaObject.type = kind;
+                        if (!plainRtpParameters) {
+                            this._mediaObject.connection = {ip: '127.0.0.1', version: 4};
+                            if (!sctpParameters)
+                                this._mediaObject.protocol = 'UDP/TLS/RTP/SAVPF';
+                            else
+                                this._mediaObject.protocol = 'UDP/DTLS/SCTP';
+                            this._mediaObject.port = 7;
+                        } else {
+                            this._mediaObject.connection =
+                                {
+                                    ip: plainRtpParameters.ip,
+                                    version: plainRtpParameters.ipVersion
+                                };
+                            this._mediaObject.protocol = 'RTP/AVP';
+                            this._mediaObject.port = plainRtpParameters.port;
+                        }
+                        switch (kind) {
+                            case 'audio':
+                            case 'video': {
+                                this._mediaObject.direction = 'sendonly';
+                                this._mediaObject.rtp = [];
+                                this._mediaObject.rtcpFb = [];
+                                this._mediaObject.fmtp = [];
+                                if (!this._planB)
+                                    this._mediaObject.msid = `${streamId || '-'} ${trackId}`;
+                                for (const codec of offerRtpParameters.codecs) {
+                                    const rtp = {
+                                        payload: codec.payloadType,
+                                        codec: getCodecName(codec),
+                                        rate: codec.clockRate
+                                    };
+                                    if (codec.channels > 1)
+                                        rtp.encoding = codec.channels;
+                                    this._mediaObject.rtp.push(rtp);
+                                    const fmtp = {
+                                        payload: codec.payloadType,
+                                        config: ''
+                                    };
+                                    for (const key of Object.keys(codec.parameters)) {
+                                        if (fmtp.config)
+                                            fmtp.config += ';';
+                                        fmtp.config += `${key}=${codec.parameters[key]}`;
+                                    }
+                                    if (fmtp.config)
+                                        this._mediaObject.fmtp.push(fmtp);
+                                    for (const fb of codec.rtcpFeedback) {
+                                        this._mediaObject.rtcpFb.push({
+                                            payload: codec.payloadType,
+                                            type: fb.type,
+                                            subtype: fb.parameter
+                                        });
+                                    }
+                                }
+                                this._mediaObject.payloads = offerRtpParameters.codecs
+                                    .map((codec) => codec.payloadType)
+                                    .join(' ');
+                                this._mediaObject.ext = [];
+                                for (const ext of offerRtpParameters.headerExtensions) {
+                                    this._mediaObject.ext.push({
+                                        uri: ext.uri,
+                                        value: ext.id
+                                    });
+                                }
+                                this._mediaObject.rtcpMux = 'rtcp-mux';
+                                this._mediaObject.rtcpRsize = 'rtcp-rsize';
+                                const encoding = offerRtpParameters.encodings[0];
+                                const ssrc = encoding.ssrc;
+                                const rtxSsrc = (encoding.rtx && encoding.rtx.ssrc)
+                                    ? encoding.rtx.ssrc
+                                    : undefined;
+                                this._mediaObject.ssrcs = [];
+                                this._mediaObject.ssrcGroups = [];
+                                if (offerRtpParameters.rtcp.cname) {
+                                    this._mediaObject.ssrcs.push({
+                                        id: ssrc,
+                                        attribute: 'cname',
+                                        value: offerRtpParameters.rtcp.cname
+                                    });
+                                }
+                                if (this._planB) {
+                                    this._mediaObject.ssrcs.push({
+                                        id: ssrc,
+                                        attribute: 'msid',
+                                        value: `${streamId || '-'} ${trackId}`
+                                    });
+                                }
+                                if (rtxSsrc) {
+                                    if (offerRtpParameters.rtcp.cname) {
+                                        this._mediaObject.ssrcs.push({
+                                            id: rtxSsrc,
+                                            attribute: 'cname',
+                                            value: offerRtpParameters.rtcp.cname
+                                        });
+                                    }
+                                    if (this._planB) {
+                                        this._mediaObject.ssrcs.push({
+                                            id: rtxSsrc,
+                                            attribute: 'msid',
+                                            value: `${streamId || '-'} ${trackId}`
+                                        });
+                                    }
+                                    // Associate original and retransmission SSRCs.
+                                    this._mediaObject.ssrcGroups.push({
+                                        semantics: 'FID',
+                                        ssrcs: `${ssrc} ${rtxSsrc}`
+                                    });
+                                }
+                                break;
+                            }
+                            case 'application': {
+                                // New spec.
+                                if (!oldDataChannelSpec) {
+                                    this._mediaObject.payloads = 'webrtc-datachannel';
+                                    this._mediaObject.sctpPort = sctpParameters.port;
+                                    this._mediaObject.maxMessageSize = sctpParameters.maxMessageSize;
+                                }
+                                // Old spec.
+                                else {
+                                    this._mediaObject.payloads = sctpParameters.port;
+                                    this._mediaObject.sctpmap =
+                                        {
+                                            app: 'webrtc-datachannel',
+                                            sctpmapNumber: sctpParameters.port,
+                                            maxMessageSize: sctpParameters.maxMessageSize
+                                        };
+                                }
+                                break;
+                            }
+                        }
+                    }
+
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    setDtlsRole(role) {
+                        // Always 'actpass'.
+                        this._mediaObject.setup = 'actpass';
+                    }
+
+                    planBReceive({offerRtpParameters, streamId, trackId}) {
+                        const encoding = offerRtpParameters.encodings[0];
+                        const ssrc = encoding.ssrc;
+                        const rtxSsrc = (encoding.rtx && encoding.rtx.ssrc)
+                            ? encoding.rtx.ssrc
+                            : undefined;
+                        const payloads = this._mediaObject.payloads.split(' ');
+                        for (const codec of offerRtpParameters.codecs) {
+                            if (payloads.includes(String(codec.payloadType))) {
+                                continue;
+                            }
+                            const rtp = {
+                                payload: codec.payloadType,
+                                codec: getCodecName(codec),
+                                rate: codec.clockRate
+                            };
+                            if (codec.channels > 1)
+                                rtp.encoding = codec.channels;
+                            this._mediaObject.rtp.push(rtp);
+                            const fmtp = {
+                                payload: codec.payloadType,
+                                config: ''
+                            };
+                            for (const key of Object.keys(codec.parameters)) {
+                                if (fmtp.config)
+                                    fmtp.config += ';';
+                                fmtp.config += `${key}=${codec.parameters[key]}`;
+                            }
+                            if (fmtp.config)
+                                this._mediaObject.fmtp.push(fmtp);
+                            for (const fb of codec.rtcpFeedback) {
+                                this._mediaObject.rtcpFb.push({
+                                    payload: codec.payloadType,
+                                    type: fb.type,
+                                    subtype: fb.parameter
+                                });
+                            }
+                        }
+                        this._mediaObject.payloads += ` ${offerRtpParameters
+                            .codecs
+                            .filter((codec) => !this._mediaObject.payloads.includes(codec.payloadType))
+                            .map((codec) => codec.payloadType)
+                            .join(' ')}`;
+                        this._mediaObject.payloads = this._mediaObject.payloads.trim();
+                        if (offerRtpParameters.rtcp.cname) {
+                            this._mediaObject.ssrcs.push({
+                                id: ssrc,
+                                attribute: 'cname',
+                                value: offerRtpParameters.rtcp.cname
+                            });
+                        }
+                        this._mediaObject.ssrcs.push({
+                            id: ssrc,
+                            attribute: 'msid',
+                            value: `${streamId || '-'} ${trackId}`
+                        });
+                        if (rtxSsrc) {
+                            if (offerRtpParameters.rtcp.cname) {
+                                this._mediaObject.ssrcs.push({
+                                    id: rtxSsrc,
+                                    attribute: 'cname',
+                                    value: offerRtpParameters.rtcp.cname
+                                });
+                            }
+                            this._mediaObject.ssrcs.push({
+                                id: rtxSsrc,
+                                attribute: 'msid',
+                                value: `${streamId || '-'} ${trackId}`
+                            });
+                            // Associate original and retransmission SSRCs.
+                            this._mediaObject.ssrcGroups.push({
+                                semantics: 'FID',
+                                ssrcs: `${ssrc} ${rtxSsrc}`
+                            });
+                        }
+                    }
+
+                    planBStopReceiving({offerRtpParameters}) {
+                        const encoding = offerRtpParameters.encodings[0];
+                        const ssrc = encoding.ssrc;
+                        const rtxSsrc = (encoding.rtx && encoding.rtx.ssrc)
+                            ? encoding.rtx.ssrc
+                            : undefined;
+                        this._mediaObject.ssrcs = this._mediaObject.ssrcs
+                            .filter((s) => s.id !== ssrc && s.id !== rtxSsrc);
+                        if (rtxSsrc) {
+                            this._mediaObject.ssrcGroups = this._mediaObject.ssrcGroups
+                                .filter((group) => group.ssrcs !== `${ssrc} ${rtxSsrc}`);
+                        }
+                    }
+                }
+
+                exports.OfferMediaSection = OfferMediaSection;
+
+                function getCodecName(codec) {
+                    const MimeTypeRegex = new RegExp('^(audio|video)/(.+)', 'i');
+                    const mimeTypeMatch = MimeTypeRegex.exec(codec.mimeType);
+                    if (!mimeTypeMatch)
+                        throw new TypeError('invalid codec.mimeType');
+                    return mimeTypeMatch[2];
+                }
+
+
+                /***/
+            }),
+
+            /***/ 910:
+            /***/ (function (__unused_webpack_module, exports, __webpack_require__) {
+
+                "use strict";
+
+                var __createBinding = (this && this.__createBinding) || (Object.create ? (function (o, m, k, k2) {
+                    if (k2 === undefined) k2 = k;
+                    var desc = Object.getOwnPropertyDescriptor(m, k);
+                    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+                        desc = {
+                            enumerable: true, get: function () {
+                                return m[k];
+                            }
+                        };
+                    }
+                    Object.defineProperty(o, k2, desc);
+                }) : (function (o, m, k, k2) {
+                    if (k2 === undefined) k2 = k;
+                    o[k2] = m[k];
+                }));
+                var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function (o, v) {
+                    Object.defineProperty(o, "default", {enumerable: true, value: v});
+                }) : function (o, v) {
+                    o["default"] = v;
+                });
+                var __importStar = (this && this.__importStar) || function (mod) {
+                    if (mod && mod.__esModule) return mod;
+                    var result = {};
+                    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+                    __setModuleDefault(result, mod);
+                    return result;
+                };
+                Object.defineProperty(exports, "__esModule", ({value: true}));
+                exports.RemoteSdp = void 0;
+                const sdpTransform = __importStar(__webpack_require__(766));
+                const Logger_1 = __webpack_require__(562);
+                const MediaSection_1 = __webpack_require__(698);
+                const logger = new Logger_1.Logger('RemoteSdp');
+
+                class RemoteSdp {
+                    constructor({iceParameters, iceCandidates, dtlsParameters, sctpParameters, plainRtpParameters, planB = false}) {
+                        // MediaSection instances with same order as in the SDP.
+                        this._mediaSections = [];
+                        // MediaSection indices indexed by MID.
+                        this._midToIndex = new Map();
+                        this._iceParameters = iceParameters;
+                        this._iceCandidates = iceCandidates;
+                        this._dtlsParameters = dtlsParameters;
+                        this._sctpParameters = sctpParameters;
+                        this._plainRtpParameters = plainRtpParameters;
+                        this._planB = planB;
+                        this._sdpObject =
+                            {
+                                version: 0,
+                                origin: {
+                                    address: '0.0.0.0',
+                                    ipVer: 4,
+                                    netType: 'IN',
+                                    sessionId: 10000,
+                                    sessionVersion: 0,
+                                    username: 'mediasoup-client'
+                                },
+                                name: '-',
+                                timing: {start: 0, stop: 0},
+                                media: []
+                            };
+                        // If ICE parameters are given, add ICE-Lite indicator.
+                        if (iceParameters && iceParameters.iceLite) {
+                            this._sdpObject.icelite = 'ice-lite';
+                        }
+                        // If DTLS parameters are given, assume WebRTC and BUNDLE.
+                        if (dtlsParameters) {
+                            this._sdpObject.msidSemantic = {semantic: 'WMS', token: '*'};
+                            // NOTE: We take the latest fingerprint.
+                            const numFingerprints = this._dtlsParameters.fingerprints.length;
+                            this._sdpObject.fingerprint =
+                                {
+                                    type: dtlsParameters.fingerprints[numFingerprints - 1].algorithm,
+                                    hash: dtlsParameters.fingerprints[numFingerprints - 1].value
+                                };
+                            this._sdpObject.groups = [{type: 'BUNDLE', mids: ''}];
+                        }
+                        // If there are plain RPT parameters, override SDP origin.
+                        if (plainRtpParameters) {
+                            this._sdpObject.origin.address = plainRtpParameters.ip;
+                            this._sdpObject.origin.ipVer = plainRtpParameters.ipVersion;
+                        }
+                    }
+
+                    updateIceParameters(iceParameters) {
+                        logger.debug('updateIceParameters() [iceParameters:%o]', iceParameters);
+                        this._iceParameters = iceParameters;
+                        this._sdpObject.icelite = iceParameters.iceLite ? 'ice-lite' : undefined;
+                        for (const mediaSection of this._mediaSections) {
+                            mediaSection.setIceParameters(iceParameters);
+                        }
+                    }
+
+                    updateDtlsRole(role) {
+                        logger.debug('updateDtlsRole() [role:%s]', role);
+                        this._dtlsParameters.role = role;
+                        for (const mediaSection of this._mediaSections) {
+                            mediaSection.setDtlsRole(role);
+                        }
+                    }
+
+                    getNextMediaSectionIdx() {
+                        // If a closed media section is found, return its index.
+                        for (let idx = 0; idx < this._mediaSections.length; ++idx) {
+                            const mediaSection = this._mediaSections[idx];
+                            if (mediaSection.closed)
+                                return {idx, reuseMid: mediaSection.mid};
+                        }
+                        // If no closed media section is found, return next one.
+                        return {idx: this._mediaSections.length};
+                    }
+
+                    send({offerMediaObject, reuseMid, offerRtpParameters, answerRtpParameters, codecOptions, extmapAllowMixed = false}) {
+                        const mediaSection = new MediaSection_1.AnswerMediaSection({
+                            iceParameters: this._iceParameters,
+                            iceCandidates: this._iceCandidates,
+                            dtlsParameters: this._dtlsParameters,
+                            plainRtpParameters: this._plainRtpParameters,
+                            planB: this._planB,
+                            offerMediaObject,
+                            offerRtpParameters,
+                            answerRtpParameters,
+                            codecOptions,
+                            extmapAllowMixed
+                        });
+                        // Unified-Plan with closed media section replacement.
+                        if (reuseMid) {
+                            this._replaceMediaSection(mediaSection, reuseMid);
+                        }
+                        // Unified-Plan or Plan-B with different media kind.
+                        else if (!this._midToIndex.has(mediaSection.mid)) {
+                            this._addMediaSection(mediaSection);
+                        }
+                        // Plan-B with same media kind.
+                        else {
+                            this._replaceMediaSection(mediaSection);
+                        }
+                    }
+
+                    receive({mid, kind, offerRtpParameters, streamId, trackId}) {
+                        const idx = this._midToIndex.get(mid);
+                        let mediaSection;
+                        if (idx !== undefined)
+                            mediaSection = this._mediaSections[idx];
+                        // Unified-Plan or different media kind.
+                        if (!mediaSection) {
+                            mediaSection = new MediaSection_1.OfferMediaSection({
+                                iceParameters: this._iceParameters,
+                                iceCandidates: this._iceCandidates,
+                                dtlsParameters: this._dtlsParameters,
+                                plainRtpParameters: this._plainRtpParameters,
+                                planB: this._planB,
+                                mid,
+                                kind,
+                                offerRtpParameters,
+                                streamId,
+                                trackId
+                            });
+                            // Let's try to recycle a closed media section (if any).
+                            // NOTE: Yes, we can recycle a closed m=audio section with a new m=video.
+                            const oldMediaSection = this._mediaSections.find((m) => (m.closed));
+                            if (oldMediaSection) {
+                                this._replaceMediaSection(mediaSection, oldMediaSection.mid);
+                            } else {
+                                this._addMediaSection(mediaSection);
+                            }
+                        }
+                        // Plan-B.
+                        else {
+                            mediaSection.planBReceive({offerRtpParameters, streamId, trackId});
+                            this._replaceMediaSection(mediaSection);
+                        }
+                    }
+
+                    disableMediaSection(mid) {
+                        const idx = this._midToIndex.get(mid);
+                        if (idx === undefined) {
+                            throw new Error(`no media section found with mid '${mid}'`);
+                        }
+                        const mediaSection = this._mediaSections[idx];
+                        mediaSection.disable();
+                    }
+
+                    closeMediaSection(mid) {
+                        const idx = this._midToIndex.get(mid);
+                        if (idx === undefined) {
+                            throw new Error(`no media section found with mid '${mid}'`);
+                        }
+                        const mediaSection = this._mediaSections[idx];
+                        // NOTE: Closing the first m section is a pain since it invalidates the
+                        // bundled transport, so let's avoid it.
+                        if (mid === this._firstMid) {
+                            logger.debug('closeMediaSection() | cannot close first media section, disabling it instead [mid:%s]', mid);
+                            this.disableMediaSection(mid);
+                            return;
+                        }
+                        mediaSection.close();
+                        // Regenerate BUNDLE mids.
+                        this._regenerateBundleMids();
+                    }
+
+                    planBStopReceiving({mid, offerRtpParameters}) {
+                        const idx = this._midToIndex.get(mid);
+                        if (idx === undefined) {
+                            throw new Error(`no media section found with mid '${mid}'`);
+                        }
+                        const mediaSection = this._mediaSections[idx];
+                        mediaSection.planBStopReceiving({offerRtpParameters});
+                        this._replaceMediaSection(mediaSection);
+                    }
+
+                    sendSctpAssociation({offerMediaObject}) {
+                        const mediaSection = new MediaSection_1.AnswerMediaSection({
+                            iceParameters: this._iceParameters,
+                            iceCandidates: this._iceCandidates,
+                            dtlsParameters: this._dtlsParameters,
+                            sctpParameters: this._sctpParameters,
+                            plainRtpParameters: this._plainRtpParameters,
+                            offerMediaObject
+                        });
+                        this._addMediaSection(mediaSection);
+                    }
+
+                    receiveSctpAssociation({oldDataChannelSpec = false} = {}) {
+                        const mediaSection = new MediaSection_1.OfferMediaSection({
+                            iceParameters: this._iceParameters,
+                            iceCandidates: this._iceCandidates,
+                            dtlsParameters: this._dtlsParameters,
+                            sctpParameters: this._sctpParameters,
+                            plainRtpParameters: this._plainRtpParameters,
+                            mid: 'datachannel',
+                            kind: 'application',
+                            oldDataChannelSpec
+                        });
+                        this._addMediaSection(mediaSection);
+                    }
+
+                    getSdp() {
+                        // Increase SDP version.
+                        this._sdpObject.origin.sessionVersion++;
+                        return sdpTransform.write(this._sdpObject);
+                    }
+
+                    _addMediaSection(newMediaSection) {
+                        if (!this._firstMid)
+                            this._firstMid = newMediaSection.mid;
+                        // Add to the vector.
+                        this._mediaSections.push(newMediaSection);
+                        // Add to the map.
+                        this._midToIndex.set(newMediaSection.mid, this._mediaSections.length - 1);
+                        // Add to the SDP object.
+                        this._sdpObject.media.push(newMediaSection.getObject());
+                        // Regenerate BUNDLE mids.
+                        this._regenerateBundleMids();
+                    }
+
+                    _replaceMediaSection(newMediaSection, reuseMid) {
+                        // Store it in the map.
+                        if (typeof reuseMid === 'string') {
+                            const idx = this._midToIndex.get(reuseMid);
+                            if (idx === undefined) {
+                                throw new Error(`no media section found for reuseMid '${reuseMid}'`);
+                            }
+                            const oldMediaSection = this._mediaSections[idx];
+                            // Replace the index in the vector with the new media section.
+                            this._mediaSections[idx] = newMediaSection;
+                            // Update the map.
+                            this._midToIndex.delete(oldMediaSection.mid);
+                            this._midToIndex.set(newMediaSection.mid, idx);
+                            // Update the SDP object.
+                            this._sdpObject.media[idx] = newMediaSection.getObject();
+                            // Regenerate BUNDLE mids.
+                            this._regenerateBundleMids();
+                        } else {
+                            const idx = this._midToIndex.get(newMediaSection.mid);
+                            if (idx === undefined) {
+                                throw new Error(`no media section found with mid '${newMediaSection.mid}'`);
+                            }
+                            // Replace the index in the vector with the new media section.
+                            this._mediaSections[idx] = newMediaSection;
+                            // Update the SDP object.
+                            this._sdpObject.media[idx] = newMediaSection.getObject();
+                        }
+                    }
+
+                    _regenerateBundleMids() {
+                        if (!this._dtlsParameters)
+                            return;
+                        this._sdpObject.groups[0].mids = this._mediaSections
+                            .filter((mediaSection) => !mediaSection.closed)
+                            .map((mediaSection) => mediaSection.mid)
+                            .join(' ');
+                    }
+                }
+
+                exports.RemoteSdp = RemoteSdp;
+
+
+                /***/
+            }),
+
+            /***/ 267:
+            /***/ (function (__unused_webpack_module, exports, __webpack_require__) {
+
+                "use strict";
+
+                var __createBinding = (this && this.__createBinding) || (Object.create ? (function (o, m, k, k2) {
+                    if (k2 === undefined) k2 = k;
+                    var desc = Object.getOwnPropertyDescriptor(m, k);
+                    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+                        desc = {
+                            enumerable: true, get: function () {
+                                return m[k];
+                            }
+                        };
+                    }
+                    Object.defineProperty(o, k2, desc);
+                }) : (function (o, m, k, k2) {
+                    if (k2 === undefined) k2 = k;
+                    o[k2] = m[k];
+                }));
+                var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function (o, v) {
+                    Object.defineProperty(o, "default", {enumerable: true, value: v});
+                }) : function (o, v) {
+                    o["default"] = v;
+                });
+                var __importStar = (this && this.__importStar) || function (mod) {
+                    if (mod && mod.__esModule) return mod;
+                    var result = {};
+                    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+                    __setModuleDefault(result, mod);
+                    return result;
+                };
+                Object.defineProperty(exports, "__esModule", ({value: true}));
+                exports.applyCodecParameters = exports.getCname = exports.extractDtlsParameters = exports.extractRtpCapabilities = void 0;
+                const sdpTransform = __importStar(__webpack_require__(766));
+
+                function extractRtpCapabilities({sdpObject}) {
+                    // Map of RtpCodecParameters indexed by payload type.
+                    const codecsMap = new Map();
+                    // Array of RtpHeaderExtensions.
+                    const headerExtensions = [];
+                    // Whether a m=audio/video section has been already found.
+                    let gotAudio = false;
+                    let gotVideo = false;
+                    for (const m of sdpObject.media) {
+                        const kind = m.type;
+                        switch (kind) {
+                            case 'audio': {
+                                if (gotAudio)
+                                    continue;
+                                gotAudio = true;
+                                break;
+                            }
+                            case 'video': {
+                                if (gotVideo)
+                                    continue;
+                                gotVideo = true;
+                                break;
+                            }
+                            default: {
+                                continue;
+                            }
+                        }
+                        // Get codecs.
+                        for (const rtp of m.rtp) {
+                            const codec = {
+                                kind: kind,
+                                mimeType: `${kind}/${rtp.codec}`,
+                                preferredPayloadType: rtp.payload,
+                                clockRate: rtp.rate,
+                                channels: rtp.encoding,
+                                parameters: {},
+                                rtcpFeedback: []
+                            };
+                            codecsMap.set(codec.preferredPayloadType, codec);
+                        }
+                        // Get codec parameters.
+                        for (const fmtp of m.fmtp || []) {
+                            const parameters = sdpTransform.parseParams(fmtp.config);
+                            const codec = codecsMap.get(fmtp.payload);
+                            if (!codec)
+                                continue;
+                            // Specials case to convert parameter value to string.
+                            if (parameters && parameters.hasOwnProperty('profile-level-id'))
+                                parameters['profile-level-id'] = String(parameters['profile-level-id']);
+                            codec.parameters = parameters;
+                        }
+                        // Get RTCP feedback for each codec.
+                        for (const fb of m.rtcpFb || []) {
+                            const codec = codecsMap.get(fb.payload);
+                            if (!codec)
+                                continue;
+                            const feedback = {
+                                type: fb.type,
+                                parameter: fb.subtype
+                            };
+                            if (!feedback.parameter)
+                                delete feedback.parameter;
+                            codec.rtcpFeedback.push(feedback);
+                        }
+                        // Get RTP header extensions.
+                        for (const ext of m.ext || []) {
+                            // Ignore encrypted extensions (not yet supported in mediasoup).
+                            if (ext['encrypt-uri'])
+                                continue;
+                            const headerExtension = {
+                                kind: kind,
+                                uri: ext.uri,
+                                preferredId: ext.value
+                            };
+                            headerExtensions.push(headerExtension);
+                        }
+                    }
+                    const rtpCapabilities = {
+                        codecs: Array.from(codecsMap.values()),
+                        headerExtensions: headerExtensions
+                    };
+                    return rtpCapabilities;
+                }
+
+                exports.extractRtpCapabilities = extractRtpCapabilities;
+
+                function extractDtlsParameters({sdpObject}) {
+                    const mediaObject = (sdpObject.media || [])
+                        .find((m) => (m.iceUfrag && m.port !== 0));
+                    if (!mediaObject)
+                        throw new Error('no active media section found');
+                    const fingerprint = mediaObject.fingerprint || sdpObject.fingerprint;
+                    let role;
+                    switch (mediaObject.setup) {
+                        case 'active':
+                            role = 'client';
+                            break;
+                        case 'passive':
+                            role = 'server';
+                            break;
+                        case 'actpass':
+                            role = 'auto';
+                            break;
+                    }
+                    const dtlsParameters = {
+                        role,
+                        fingerprints: [
+                            {
+                                algorithm: fingerprint.type,
+                                value: fingerprint.hash
+                            }
+                        ]
+                    };
+                    return dtlsParameters;
+                }
+
+                exports.extractDtlsParameters = extractDtlsParameters;
+
+                function getCname({offerMediaObject}) {
+                    const ssrcCnameLine = (offerMediaObject.ssrcs || [])
+                        .find((line) => line.attribute === 'cname');
+                    if (!ssrcCnameLine)
+                        return '';
+                    return ssrcCnameLine.value;
+                }
+
+                exports.getCname = getCname;
+
+                /**
+                 * Apply codec parameters in the given SDP m= section answer based on the
+                 * given RTP parameters of an offer.
+                 */
+                function applyCodecParameters({offerRtpParameters, answerMediaObject}) {
+                    for (const codec of offerRtpParameters.codecs) {
+                        const mimeType = codec.mimeType.toLowerCase();
+                        // Avoid parsing codec parameters for unhandled codecs.
+                        if (mimeType !== 'audio/opus')
+                            continue;
+                        const rtp = (answerMediaObject.rtp || [])
+                            .find((r) => r.payload === codec.payloadType);
+                        if (!rtp)
+                            continue;
+                        // Just in case.
+                        answerMediaObject.fmtp = answerMediaObject.fmtp || [];
+                        let fmtp = answerMediaObject.fmtp
+                            .find((f) => f.payload === codec.payloadType);
+                        if (!fmtp) {
+                            fmtp = {payload: codec.payloadType, config: ''};
+                            answerMediaObject.fmtp.push(fmtp);
+                        }
+                        const parameters = sdpTransform.parseParams(fmtp.config);
+                        switch (mimeType) {
+                            case 'audio/opus': {
+                                const spropStereo = codec.parameters['sprop-stereo'];
+                                if (spropStereo !== undefined)
+                                    parameters.stereo = spropStereo ? 1 : 0;
+                                break;
+                            }
+                        }
+                        // Write the codec fmtp.config back.
+                        fmtp.config = '';
+                        for (const key of Object.keys(parameters)) {
+                            if (fmtp.config)
+                                fmtp.config += ';';
+                            fmtp.config += `${key}=${parameters[key]}`;
+                        }
+                    }
+                }
+
+                exports.applyCodecParameters = applyCodecParameters;
+
+
+                /***/
+            }),
+
+            /***/ 875:
+            /***/ ((__unused_webpack_module, exports) => {
+
+                "use strict";
+
+                Object.defineProperty(exports, "__esModule", ({value: true}));
+                exports.addLegacySimulcast = exports.getRtpEncodings = void 0;
+
+                function getRtpEncodings({offerMediaObject, track}) {
+                    // First media SSRC (or the only one).
+                    let firstSsrc;
+                    const ssrcs = new Set();
+                    for (const line of offerMediaObject.ssrcs || []) {
+                        if (line.attribute !== 'msid')
+                            continue;
+                        const trackId = line.value.split(' ')[1];
+                        if (trackId === track.id) {
+                            const ssrc = line.id;
+                            ssrcs.add(ssrc);
+                            if (!firstSsrc)
+                                firstSsrc = ssrc;
+                        }
+                    }
+                    if (ssrcs.size === 0)
+                        throw new Error(`a=ssrc line with msid information not found [track.id:${track.id}]`);
+                    const ssrcToRtxSsrc = new Map();
+                    // First assume RTX is used.
+                    for (const line of offerMediaObject.ssrcGroups || []) {
+                        if (line.semantics !== 'FID')
+                            continue;
+                        let [ssrc, rtxSsrc] = line.ssrcs.split(/\s+/);
+                        ssrc = Number(ssrc);
+                        rtxSsrc = Number(rtxSsrc);
+                        if (ssrcs.has(ssrc)) {
+                            // Remove both the SSRC and RTX SSRC from the set so later we know that they
+                            // are already handled.
+                            ssrcs.delete(ssrc);
+                            ssrcs.delete(rtxSsrc);
+                            // Add to the map.
+                            ssrcToRtxSsrc.set(ssrc, rtxSsrc);
+                        }
+                    }
+                    // If the set of SSRCs is not empty it means that RTX is not being used, so take
+                    // media SSRCs from there.
+                    for (const ssrc of ssrcs) {
+                        // Add to the map.
+                        ssrcToRtxSsrc.set(ssrc, null);
+                    }
+                    const encodings = [];
+                    for (const [ssrc, rtxSsrc] of ssrcToRtxSsrc) {
+                        const encoding = {ssrc};
+                        if (rtxSsrc)
+                            encoding.rtx = {ssrc: rtxSsrc};
+                        encodings.push(encoding);
+                    }
+                    return encodings;
+                }
+
+                exports.getRtpEncodings = getRtpEncodings;
+
+                /**
+                 * Adds multi-ssrc based simulcast into the given SDP media section offer.
+                 */
+                function addLegacySimulcast({offerMediaObject, track, numStreams}) {
+                    if (numStreams <= 1)
+                        throw new TypeError('numStreams must be greater than 1');
+                    let firstSsrc;
+                    let firstRtxSsrc;
+                    let streamId;
+                    // Get the SSRC.
+                    const ssrcMsidLine = (offerMediaObject.ssrcs || [])
+                        .find((line) => {
+                            if (line.attribute !== 'msid')
+                                return false;
+                            const trackId = line.value.split(' ')[1];
+                            if (trackId === track.id) {
+                                firstSsrc = line.id;
+                                streamId = line.value.split(' ')[0];
+                                return true;
+                            } else {
+                                return false;
+                            }
+                        });
+                    if (!ssrcMsidLine)
+                        throw new Error(`a=ssrc line with msid information not found [track.id:${track.id}]`);
+                    // Get the SSRC for RTX.
+                    (offerMediaObject.ssrcGroups || [])
+                        .some((line) => {
+                            if (line.semantics !== 'FID')
+                                return false;
+                            const ssrcs = line.ssrcs.split(/\s+/);
+                            if (Number(ssrcs[0]) === firstSsrc) {
+                                firstRtxSsrc = Number(ssrcs[1]);
+                                return true;
+                            } else {
+                                return false;
+                            }
+                        });
+                    const ssrcCnameLine = offerMediaObject.ssrcs
+                        .find((line) => (line.attribute === 'cname' && line.id === firstSsrc));
+                    if (!ssrcCnameLine)
+                        throw new Error(`a=ssrc line with cname information not found [track.id:${track.id}]`);
+                    const cname = ssrcCnameLine.value;
+                    const ssrcs = [];
+                    const rtxSsrcs = [];
+                    for (let i = 0; i < numStreams; ++i) {
+                        ssrcs.push(firstSsrc + i);
+                        if (firstRtxSsrc)
+                            rtxSsrcs.push(firstRtxSsrc + i);
+                    }
+                    offerMediaObject.ssrcGroups = offerMediaObject.ssrcGroups || [];
+                    offerMediaObject.ssrcs = offerMediaObject.ssrcs || [];
+                    offerMediaObject.ssrcGroups.push({
+                        semantics: 'SIM',
+                        ssrcs: ssrcs.join(' ')
+                    });
+                    for (let i = 0; i < ssrcs.length; ++i) {
+                        const ssrc = ssrcs[i];
+                        offerMediaObject.ssrcs.push({
+                            id: ssrc,
+                            attribute: 'cname',
+                            value: cname
+                        });
+                        offerMediaObject.ssrcs.push({
+                            id: ssrc,
+                            attribute: 'msid',
+                            value: `${streamId} ${track.id}`
+                        });
+                    }
+                    for (let i = 0; i < rtxSsrcs.length; ++i) {
+                        const ssrc = ssrcs[i];
+                        const rtxSsrc = rtxSsrcs[i];
+                        offerMediaObject.ssrcs.push({
+                            id: rtxSsrc,
+                            attribute: 'cname',
+                            value: cname
+                        });
+                        offerMediaObject.ssrcs.push({
+                            id: rtxSsrc,
+                            attribute: 'msid',
+                            value: `${streamId} ${track.id}`
+                        });
+                        offerMediaObject.ssrcGroups.push({
+                            semantics: 'FID',
+                            ssrcs: `${ssrc} ${rtxSsrc}`
+                        });
+                    }
+                }
+
+                exports.addLegacySimulcast = addLegacySimulcast;
+
+
+                /***/
+            }),
+
+            /***/ 72:
+            /***/ ((__unused_webpack_module, exports) => {
+
+                "use strict";
+
+                Object.defineProperty(exports, "__esModule", ({value: true}));
+                exports.addLegacySimulcast = exports.getRtpEncodings = void 0;
+
+                function getRtpEncodings({offerMediaObject}) {
+                    const ssrcs = new Set();
+                    for (const line of offerMediaObject.ssrcs || []) {
+                        const ssrc = line.id;
+                        ssrcs.add(ssrc);
+                    }
+                    if (ssrcs.size === 0)
+                        throw new Error('no a=ssrc lines found');
+                    const ssrcToRtxSsrc = new Map();
+                    // First assume RTX is used.
+                    for (const line of offerMediaObject.ssrcGroups || []) {
+                        if (line.semantics !== 'FID')
+                            continue;
+                        let [ssrc, rtxSsrc] = line.ssrcs.split(/\s+/);
+                        ssrc = Number(ssrc);
+                        rtxSsrc = Number(rtxSsrc);
+                        if (ssrcs.has(ssrc)) {
+                            // Remove both the SSRC and RTX SSRC from the set so later we know that they
+                            // are already handled.
+                            ssrcs.delete(ssrc);
+                            ssrcs.delete(rtxSsrc);
+                            // Add to the map.
+                            ssrcToRtxSsrc.set(ssrc, rtxSsrc);
+                        }
+                    }
+                    // If the set of SSRCs is not empty it means that RTX is not being used, so take
+                    // media SSRCs from there.
+                    for (const ssrc of ssrcs) {
+                        // Add to the map.
+                        ssrcToRtxSsrc.set(ssrc, null);
+                    }
+                    const encodings = [];
+                    for (const [ssrc, rtxSsrc] of ssrcToRtxSsrc) {
+                        const encoding = {ssrc};
+                        if (rtxSsrc)
+                            encoding.rtx = {ssrc: rtxSsrc};
+                        encodings.push(encoding);
+                    }
+                    return encodings;
+                }
+
+                exports.getRtpEncodings = getRtpEncodings;
+
+                /**
+                 * Adds multi-ssrc based simulcast into the given SDP media section offer.
+                 */
+                function addLegacySimulcast({offerMediaObject, numStreams}) {
+                    if (numStreams <= 1)
+                        throw new TypeError('numStreams must be greater than 1');
+                    // Get the SSRC.
+                    const ssrcMsidLine = (offerMediaObject.ssrcs || [])
+                        .find((line) => line.attribute === 'msid');
+                    if (!ssrcMsidLine)
+                        throw new Error('a=ssrc line with msid information not found');
+                    const [streamId, trackId] = ssrcMsidLine.value.split(' ');
+                    const firstSsrc = ssrcMsidLine.id;
+                    let firstRtxSsrc;
+                    // Get the SSRC for RTX.
+                    (offerMediaObject.ssrcGroups || [])
+                        .some((line) => {
+                            if (line.semantics !== 'FID')
+                                return false;
+                            const ssrcs = line.ssrcs.split(/\s+/);
+                            if (Number(ssrcs[0]) === firstSsrc) {
+                                firstRtxSsrc = Number(ssrcs[1]);
+                                return true;
+                            } else {
+                                return false;
+                            }
+                        });
+                    const ssrcCnameLine = offerMediaObject.ssrcs
+                        .find((line) => line.attribute === 'cname');
+                    if (!ssrcCnameLine)
+                        throw new Error('a=ssrc line with cname information not found');
+                    const cname = ssrcCnameLine.value;
+                    const ssrcs = [];
+                    const rtxSsrcs = [];
+                    for (let i = 0; i < numStreams; ++i) {
+                        ssrcs.push(firstSsrc + i);
+                        if (firstRtxSsrc)
+                            rtxSsrcs.push(firstRtxSsrc + i);
+                    }
+                    offerMediaObject.ssrcGroups = [];
+                    offerMediaObject.ssrcs = [];
+                    offerMediaObject.ssrcGroups.push({
+                        semantics: 'SIM',
+                        ssrcs: ssrcs.join(' ')
+                    });
+                    for (let i = 0; i < ssrcs.length; ++i) {
+                        const ssrc = ssrcs[i];
+                        offerMediaObject.ssrcs.push({
+                            id: ssrc,
+                            attribute: 'cname',
+                            value: cname
+                        });
+                        offerMediaObject.ssrcs.push({
+                            id: ssrc,
+                            attribute: 'msid',
+                            value: `${streamId} ${trackId}`
+                        });
+                    }
+                    for (let i = 0; i < rtxSsrcs.length; ++i) {
+                        const ssrc = ssrcs[i];
+                        const rtxSsrc = rtxSsrcs[i];
+                        offerMediaObject.ssrcs.push({
+                            id: rtxSsrc,
+                            attribute: 'cname',
+                            value: cname
+                        });
+                        offerMediaObject.ssrcs.push({
+                            id: rtxSsrc,
+                            attribute: 'msid',
+                            value: `${streamId} ${trackId}`
+                        });
+                        offerMediaObject.ssrcGroups.push({
+                            semantics: 'FID',
+                            ssrcs: `${ssrc} ${rtxSsrc}`
+                        });
+                    }
+                }
+
+                exports.addLegacySimulcast = addLegacySimulcast;
+
+
+                /***/
+            }),
+
+            /***/ 960:
+            /***/ (function (__unused_webpack_module, exports, __webpack_require__) {
+
+                "use strict";
+
+                var __createBinding = (this && this.__createBinding) || (Object.create ? (function (o, m, k, k2) {
+                    if (k2 === undefined) k2 = k;
+                    var desc = Object.getOwnPropertyDescriptor(m, k);
+                    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+                        desc = {
+                            enumerable: true, get: function () {
+                                return m[k];
+                            }
+                        };
+                    }
+                    Object.defineProperty(o, k2, desc);
+                }) : (function (o, m, k, k2) {
+                    if (k2 === undefined) k2 = k;
+                    o[k2] = m[k];
+                }));
+                var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function (o, v) {
+                    Object.defineProperty(o, "default", {enumerable: true, value: v});
+                }) : function (o, v) {
+                    o["default"] = v;
+                });
+                var __importStar = (this && this.__importStar) || function (mod) {
+                    if (mod && mod.__esModule) return mod;
+                    var result = {};
+                    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+                    __setModuleDefault(result, mod);
+                    return result;
+                };
+                var __importDefault = (this && this.__importDefault) || function (mod) {
+                    return (mod && mod.__esModule) ? mod : {"default": mod};
+                };
+                Object.defineProperty(exports, "__esModule", ({value: true}));
+                exports.debug = exports.parseScalabilityMode = exports.detectDevice = exports.Device = exports.version = exports.types = void 0;
+                const debug_1 = __importDefault(__webpack_require__(227));
+                exports.debug = debug_1.default;
+                const Device_1 = __webpack_require__(120);
+                Object.defineProperty(exports, "Device", ({
+                    enumerable: true, get: function () {
+                        return Device_1.Device;
+                    }
+                }));
+                Object.defineProperty(exports, "detectDevice", ({
+                    enumerable: true, get: function () {
+                        return Device_1.detectDevice;
+                    }
+                }));
+                const types = __importStar(__webpack_require__(53));
+                exports.types = types;
+                /**
+                 * Expose mediasoup-client version.
+                 */
+                exports.version = '3.6.57';
+                /**
+                 * Expose parseScalabilityMode() function.
+                 */
+                var scalabilityModes_1 = __webpack_require__(770);
+                Object.defineProperty(exports, "parseScalabilityMode", ({
+                    enumerable: true, get: function () {
+                        return scalabilityModes_1.parse;
+                    }
+                }));
+
+
+                /***/
+            }),
+
+            /***/ 280:
+            /***/ (function (__unused_webpack_module, exports, __webpack_require__) {
+
+                "use strict";
+
+                var __createBinding = (this && this.__createBinding) || (Object.create ? (function (o, m, k, k2) {
+                    if (k2 === undefined) k2 = k;
+                    var desc = Object.getOwnPropertyDescriptor(m, k);
+                    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+                        desc = {
+                            enumerable: true, get: function () {
+                                return m[k];
+                            }
+                        };
+                    }
+                    Object.defineProperty(o, k2, desc);
+                }) : (function (o, m, k, k2) {
+                    if (k2 === undefined) k2 = k;
+                    o[k2] = m[k];
+                }));
+                var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function (o, v) {
+                    Object.defineProperty(o, "default", {enumerable: true, value: v});
+                }) : function (o, v) {
+                    o["default"] = v;
+                });
+                var __importStar = (this && this.__importStar) || function (mod) {
+                    if (mod && mod.__esModule) return mod;
+                    var result = {};
+                    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+                    __setModuleDefault(result, mod);
+                    return result;
+                };
+                Object.defineProperty(exports, "__esModule", ({value: true}));
+                exports.canReceive = exports.canSend = exports.generateProbatorRtpParameters = exports.reduceCodecs = exports.getSendingRemoteRtpParameters = exports.getSendingRtpParameters = exports.getRecvRtpCapabilities = exports.getExtendedRtpCapabilities = exports.validateSctpStreamParameters = exports.validateSctpParameters = exports.validateNumSctpStreams = exports.validateSctpCapabilities = exports.validateRtcpParameters = exports.validateRtpEncodingParameters = exports.validateRtpHeaderExtensionParameters = exports.validateRtpCodecParameters = exports.validateRtpParameters = exports.validateRtpHeaderExtension = exports.validateRtcpFeedback = exports.validateRtpCodecCapability = exports.validateRtpCapabilities = void 0;
+                const h264 = __importStar(__webpack_require__(855));
+                const utils = __importStar(__webpack_require__(347));
+                const RTP_PROBATOR_MID = 'probator';
+                const RTP_PROBATOR_SSRC = 1234;
+                const RTP_PROBATOR_CODEC_PAYLOAD_TYPE = 127;
+
+                /**
+                 * Validates RtpCapabilities. It may modify given data by adding missing
+                 * fields with default values.
+                 * It throws if invalid.
+                 */
+                function validateRtpCapabilities(caps) {
+                    if (typeof caps !== 'object')
+                        throw new TypeError('caps is not an object');
+                    // codecs is optional. If unset, fill with an empty array.
+                    if (caps.codecs && !Array.isArray(caps.codecs))
+                        throw new TypeError('caps.codecs is not an array');
+                    else if (!caps.codecs)
+                        caps.codecs = [];
+                    for (const codec of caps.codecs) {
+                        validateRtpCodecCapability(codec);
+                    }
+                    // headerExtensions is optional. If unset, fill with an empty array.
+                    if (caps.headerExtensions && !Array.isArray(caps.headerExtensions))
+                        throw new TypeError('caps.headerExtensions is not an array');
+                    else if (!caps.headerExtensions)
+                        caps.headerExtensions = [];
+                    for (const ext of caps.headerExtensions) {
+                        validateRtpHeaderExtension(ext);
+                    }
+                }
+
+                exports.validateRtpCapabilities = validateRtpCapabilities;
+
+                /**
+                 * Validates RtpCodecCapability. It may modify given data by adding missing
+                 * fields with default values.
+                 * It throws if invalid.
+                 */
+                function validateRtpCodecCapability(codec) {
+                    const MimeTypeRegex = new RegExp('^(audio|video)/(.+)', 'i');
+                    if (typeof codec !== 'object')
+                        throw new TypeError('codec is not an object');
+                    // mimeType is mandatory.
+                    if (!codec.mimeType || typeof codec.mimeType !== 'string')
+                        throw new TypeError('missing codec.mimeType');
+                    const mimeTypeMatch = MimeTypeRegex.exec(codec.mimeType);
+                    if (!mimeTypeMatch)
+                        throw new TypeError('invalid codec.mimeType');
+                    // Just override kind with media component of mimeType.
+                    codec.kind = mimeTypeMatch[1].toLowerCase();
+                    // preferredPayloadType is optional.
+                    if (codec.preferredPayloadType && typeof codec.preferredPayloadType !== 'number')
+                        throw new TypeError('invalid codec.preferredPayloadType');
+                    // clockRate is mandatory.
+                    if (typeof codec.clockRate !== 'number')
+                        throw new TypeError('missing codec.clockRate');
+                    // channels is optional. If unset, set it to 1 (just if audio).
+                    if (codec.kind === 'audio') {
+                        if (typeof codec.channels !== 'number')
+                            codec.channels = 1;
+                    } else {
+                        delete codec.channels;
+                    }
+                    // parameters is optional. If unset, set it to an empty object.
+                    if (!codec.parameters || typeof codec.parameters !== 'object')
+                        codec.parameters = {};
+                    for (const key of Object.keys(codec.parameters)) {
+                        let value = codec.parameters[key];
+                        if (value === undefined) {
+                            codec.parameters[key] = '';
+                            value = '';
+                        }
+                        if (typeof value !== 'string' && typeof value !== 'number') {
+                            throw new TypeError(`invalid codec parameter [key:${key}s, value:${value}]`);
+                        }
+                        // Specific parameters validation.
+                        if (key === 'apt') {
+                            if (typeof value !== 'number')
+                                throw new TypeError('invalid codec apt parameter');
+                        }
+                    }
+                    // rtcpFeedback is optional. If unset, set it to an empty array.
+                    if (!codec.rtcpFeedback || !Array.isArray(codec.rtcpFeedback))
+                        codec.rtcpFeedback = [];
+                    for (const fb of codec.rtcpFeedback) {
+                        validateRtcpFeedback(fb);
+                    }
+                }
+
+                exports.validateRtpCodecCapability = validateRtpCodecCapability;
+
+                /**
+                 * Validates RtcpFeedback. It may modify given data by adding missing
+                 * fields with default values.
+                 * It throws if invalid.
+                 */
+                function validateRtcpFeedback(fb) {
+                    if (typeof fb !== 'object')
+                        throw new TypeError('fb is not an object');
+                    // type is mandatory.
+                    if (!fb.type || typeof fb.type !== 'string')
+                        throw new TypeError('missing fb.type');
+                    // parameter is optional. If unset set it to an empty string.
+                    if (!fb.parameter || typeof fb.parameter !== 'string')
+                        fb.parameter = '';
+                }
+
+                exports.validateRtcpFeedback = validateRtcpFeedback;
+
+                /**
+                 * Validates RtpHeaderExtension. It may modify given data by adding missing
+                 * fields with default values.
+                 * It throws if invalid.
+                 */
+                function validateRtpHeaderExtension(ext) {
+                    if (typeof ext !== 'object')
+                        throw new TypeError('ext is not an object');
+                    // kind is mandatory.
+                    if (ext.kind !== 'audio' && ext.kind !== 'video')
+                        throw new TypeError('invalid ext.kind');
+                    // uri is mandatory.
+                    if (!ext.uri || typeof ext.uri !== 'string')
+                        throw new TypeError('missing ext.uri');
+                    // preferredId is mandatory.
+                    if (typeof ext.preferredId !== 'number')
+                        throw new TypeError('missing ext.preferredId');
+                    // preferredEncrypt is optional. If unset set it to false.
+                    if (ext.preferredEncrypt && typeof ext.preferredEncrypt !== 'boolean')
+                        throw new TypeError('invalid ext.preferredEncrypt');
+                    else if (!ext.preferredEncrypt)
+                        ext.preferredEncrypt = false;
+                    // direction is optional. If unset set it to sendrecv.
+                    if (ext.direction && typeof ext.direction !== 'string')
+                        throw new TypeError('invalid ext.direction');
+                    else if (!ext.direction)
+                        ext.direction = 'sendrecv';
+                }
+
+                exports.validateRtpHeaderExtension = validateRtpHeaderExtension;
+
+                /**
+                 * Validates RtpParameters. It may modify given data by adding missing
+                 * fields with default values.
+                 * It throws if invalid.
+                 */
+                function validateRtpParameters(params) {
+                    if (typeof params !== 'object')
+                        throw new TypeError('params is not an object');
+                    // mid is optional.
+                    if (params.mid && typeof params.mid !== 'string')
+                        throw new TypeError('params.mid is not a string');
+                    // codecs is mandatory.
+                    if (!Array.isArray(params.codecs))
+                        throw new TypeError('missing params.codecs');
+                    for (const codec of params.codecs) {
+                        validateRtpCodecParameters(codec);
+                    }
+                    // headerExtensions is optional. If unset, fill with an empty array.
+                    if (params.headerExtensions && !Array.isArray(params.headerExtensions))
+                        throw new TypeError('params.headerExtensions is not an array');
+                    else if (!params.headerExtensions)
+                        params.headerExtensions = [];
+                    for (const ext of params.headerExtensions) {
+                        validateRtpHeaderExtensionParameters(ext);
+                    }
+                    // encodings is optional. If unset, fill with an empty array.
+                    if (params.encodings && !Array.isArray(params.encodings))
+                        throw new TypeError('params.encodings is not an array');
+                    else if (!params.encodings)
+                        params.encodings = [];
+                    for (const encoding of params.encodings) {
+                        validateRtpEncodingParameters(encoding);
+                    }
+                    // rtcp is optional. If unset, fill with an empty object.
+                    if (params.rtcp && typeof params.rtcp !== 'object')
+                        throw new TypeError('params.rtcp is not an object');
+                    else if (!params.rtcp)
+                        params.rtcp = {};
+                    validateRtcpParameters(params.rtcp);
+                }
+
+                exports.validateRtpParameters = validateRtpParameters;
+
+                /**
+                 * Validates RtpCodecParameters. It may modify given data by adding missing
+                 * fields with default values.
+                 * It throws if invalid.
+                 */
+                function validateRtpCodecParameters(codec) {
+                    const MimeTypeRegex = new RegExp('^(audio|video)/(.+)', 'i');
+                    if (typeof codec !== 'object')
+                        throw new TypeError('codec is not an object');
+                    // mimeType is mandatory.
+                    if (!codec.mimeType || typeof codec.mimeType !== 'string')
+                        throw new TypeError('missing codec.mimeType');
+                    const mimeTypeMatch = MimeTypeRegex.exec(codec.mimeType);
+                    if (!mimeTypeMatch)
+                        throw new TypeError('invalid codec.mimeType');
+                    // payloadType is mandatory.
+                    if (typeof codec.payloadType !== 'number')
+                        throw new TypeError('missing codec.payloadType');
+                    // clockRate is mandatory.
+                    if (typeof codec.clockRate !== 'number')
+                        throw new TypeError('missing codec.clockRate');
+                    const kind = mimeTypeMatch[1].toLowerCase();
+                    // channels is optional. If unset, set it to 1 (just if audio).
+                    if (kind === 'audio') {
+                        if (typeof codec.channels !== 'number')
+                            codec.channels = 1;
+                    } else {
+                        delete codec.channels;
+                    }
+                    // parameters is optional. If unset, set it to an empty object.
+                    if (!codec.parameters || typeof codec.parameters !== 'object')
+                        codec.parameters = {};
+                    for (const key of Object.keys(codec.parameters)) {
+                        let value = codec.parameters[key];
+                        if (value === undefined) {
+                            codec.parameters[key] = '';
+                            value = '';
+                        }
+                        if (typeof value !== 'string' && typeof value !== 'number') {
+                            throw new TypeError(`invalid codec parameter [key:${key}s, value:${value}]`);
+                        }
+                        // Specific parameters validation.
+                        if (key === 'apt') {
+                            if (typeof value !== 'number')
+                                throw new TypeError('invalid codec apt parameter');
+                        }
+                    }
+                    // rtcpFeedback is optional. If unset, set it to an empty array.
+                    if (!codec.rtcpFeedback || !Array.isArray(codec.rtcpFeedback))
+                        codec.rtcpFeedback = [];
+                    for (const fb of codec.rtcpFeedback) {
+                        validateRtcpFeedback(fb);
+                    }
+                }
+
+                exports.validateRtpCodecParameters = validateRtpCodecParameters;
+
+                /**
+                 * Validates RtpHeaderExtensionParameteters. It may modify given data by adding missing
+                 * fields with default values.
+                 * It throws if invalid.
+                 */
+                function validateRtpHeaderExtensionParameters(ext) {
+                    if (typeof ext !== 'object')
+                        throw new TypeError('ext is not an object');
+                    // uri is mandatory.
+                    if (!ext.uri || typeof ext.uri !== 'string')
+                        throw new TypeError('missing ext.uri');
+                    // id is mandatory.
+                    if (typeof ext.id !== 'number')
+                        throw new TypeError('missing ext.id');
+                    // encrypt is optional. If unset set it to false.
+                    if (ext.encrypt && typeof ext.encrypt !== 'boolean')
+                        throw new TypeError('invalid ext.encrypt');
+                    else if (!ext.encrypt)
+                        ext.encrypt = false;
+                    // parameters is optional. If unset, set it to an empty object.
+                    if (!ext.parameters || typeof ext.parameters !== 'object')
+                        ext.parameters = {};
+                    for (const key of Object.keys(ext.parameters)) {
+                        let value = ext.parameters[key];
+                        if (value === undefined) {
+                            ext.parameters[key] = '';
+                            value = '';
+                        }
+                        if (typeof value !== 'string' && typeof value !== 'number')
+                            throw new TypeError('invalid header extension parameter');
+                    }
+                }
+
+                exports.validateRtpHeaderExtensionParameters = validateRtpHeaderExtensionParameters;
+
+                /**
+                 * Validates RtpEncodingParameters. It may modify given data by adding missing
+                 * fields with default values.
+                 * It throws if invalid.
+                 */
+                function validateRtpEncodingParameters(encoding) {
+                    if (typeof encoding !== 'object')
+                        throw new TypeError('encoding is not an object');
+                    // ssrc is optional.
+                    if (encoding.ssrc && typeof encoding.ssrc !== 'number')
+                        throw new TypeError('invalid encoding.ssrc');
+                    // rid is optional.
+                    if (encoding.rid && typeof encoding.rid !== 'string')
+                        throw new TypeError('invalid encoding.rid');
+                    // rtx is optional.
+                    if (encoding.rtx && typeof encoding.rtx !== 'object') {
+                        throw new TypeError('invalid encoding.rtx');
+                    } else if (encoding.rtx) {
+                        // RTX ssrc is mandatory if rtx is present.
+                        if (typeof encoding.rtx.ssrc !== 'number')
+                            throw new TypeError('missing encoding.rtx.ssrc');
+                    }
+                    // dtx is optional. If unset set it to false.
+                    if (!encoding.dtx || typeof encoding.dtx !== 'boolean')
+                        encoding.dtx = false;
+                    // scalabilityMode is optional.
+                    if (encoding.scalabilityMode && typeof encoding.scalabilityMode !== 'string')
+                        throw new TypeError('invalid encoding.scalabilityMode');
+                }
+
+                exports.validateRtpEncodingParameters = validateRtpEncodingParameters;
+
+                /**
+                 * Validates RtcpParameters. It may modify given data by adding missing
+                 * fields with default values.
+                 * It throws if invalid.
+                 */
+                function validateRtcpParameters(rtcp) {
+                    if (typeof rtcp !== 'object')
+                        throw new TypeError('rtcp is not an object');
+                    // cname is optional.
+                    if (rtcp.cname && typeof rtcp.cname !== 'string')
+                        throw new TypeError('invalid rtcp.cname');
+                    // reducedSize is optional. If unset set it to true.
+                    if (!rtcp.reducedSize || typeof rtcp.reducedSize !== 'boolean')
+                        rtcp.reducedSize = true;
+                }
+
+                exports.validateRtcpParameters = validateRtcpParameters;
+
+                /**
+                 * Validates SctpCapabilities. It may modify given data by adding missing
+                 * fields with default values.
+                 * It throws if invalid.
+                 */
+                function validateSctpCapabilities(caps) {
+                    if (typeof caps !== 'object')
+                        throw new TypeError('caps is not an object');
+                    // numStreams is mandatory.
+                    if (!caps.numStreams || typeof caps.numStreams !== 'object')
+                        throw new TypeError('missing caps.numStreams');
+                    validateNumSctpStreams(caps.numStreams);
+                }
+
+                exports.validateSctpCapabilities = validateSctpCapabilities;
+
+                /**
+                 * Validates NumSctpStreams. It may modify given data by adding missing
+                 * fields with default values.
+                 * It throws if invalid.
+                 */
+                function validateNumSctpStreams(numStreams) {
+                    if (typeof numStreams !== 'object')
+                        throw new TypeError('numStreams is not an object');
+                    // OS is mandatory.
+                    if (typeof numStreams.OS !== 'number')
+                        throw new TypeError('missing numStreams.OS');
+                    // MIS is mandatory.
+                    if (typeof numStreams.MIS !== 'number')
+                        throw new TypeError('missing numStreams.MIS');
+                }
+
+                exports.validateNumSctpStreams = validateNumSctpStreams;
+
+                /**
+                 * Validates SctpParameters. It may modify given data by adding missing
+                 * fields with default values.
+                 * It throws if invalid.
+                 */
+                function validateSctpParameters(params) {
+                    if (typeof params !== 'object')
+                        throw new TypeError('params is not an object');
+                    // port is mandatory.
+                    if (typeof params.port !== 'number')
+                        throw new TypeError('missing params.port');
+                    // OS is mandatory.
+                    if (typeof params.OS !== 'number')
+                        throw new TypeError('missing params.OS');
+                    // MIS is mandatory.
+                    if (typeof params.MIS !== 'number')
+                        throw new TypeError('missing params.MIS');
+                    // maxMessageSize is mandatory.
+                    if (typeof params.maxMessageSize !== 'number')
+                        throw new TypeError('missing params.maxMessageSize');
+                }
+
+                exports.validateSctpParameters = validateSctpParameters;
+
+                /**
+                 * Validates SctpStreamParameters. It may modify given data by adding missing
+                 * fields with default values.
+                 * It throws if invalid.
+                 */
+                function validateSctpStreamParameters(params) {
+                    if (typeof params !== 'object')
+                        throw new TypeError('params is not an object');
+                    // streamId is mandatory.
+                    if (typeof params.streamId !== 'number')
+                        throw new TypeError('missing params.streamId');
+                    // ordered is optional.
+                    let orderedGiven = false;
+                    if (typeof params.ordered === 'boolean')
+                        orderedGiven = true;
+                    else
+                        params.ordered = true;
+                    // maxPacketLifeTime is optional.
+                    if (params.maxPacketLifeTime && typeof params.maxPacketLifeTime !== 'number')
+                        throw new TypeError('invalid params.maxPacketLifeTime');
+                    // maxRetransmits is optional.
+                    if (params.maxRetransmits && typeof params.maxRetransmits !== 'number')
+                        throw new TypeError('invalid params.maxRetransmits');
+                    if (params.maxPacketLifeTime && params.maxRetransmits)
+                        throw new TypeError('cannot provide both maxPacketLifeTime and maxRetransmits');
+                    if (orderedGiven &&
+                        params.ordered &&
+                        (params.maxPacketLifeTime || params.maxRetransmits)) {
+                        throw new TypeError('cannot be ordered with maxPacketLifeTime or maxRetransmits');
+                    } else if (!orderedGiven && (params.maxPacketLifeTime || params.maxRetransmits)) {
+                        params.ordered = false;
+                    }
+                    // label is optional.
+                    if (params.label && typeof params.label !== 'string')
+                        throw new TypeError('invalid params.label');
+                    // protocol is optional.
+                    if (params.protocol && typeof params.protocol !== 'string')
+                        throw new TypeError('invalid params.protocol');
+                }
+
+                exports.validateSctpStreamParameters = validateSctpStreamParameters;
+
+                /**
+                 * Generate extended RTP capabilities for sending and receiving.
+                 */
+                function getExtendedRtpCapabilities(localCaps, remoteCaps) {
+                    const extendedRtpCapabilities = {
+                        codecs: [],
+                        headerExtensions: []
+                    };
+                    // Match media codecs and keep the order preferred by remoteCaps.
+                    for (const remoteCodec of remoteCaps.codecs || []) {
+                        if (isRtxCodec(remoteCodec))
+                            continue;
+                        const matchingLocalCodec = (localCaps.codecs || [])
+                            .find((localCodec) => (matchCodecs(localCodec, remoteCodec, {strict: true, modify: true})));
+                        if (!matchingLocalCodec)
+                            continue;
+                        const extendedCodec = {
+                            mimeType: matchingLocalCodec.mimeType,
+                            kind: matchingLocalCodec.kind,
+                            clockRate: matchingLocalCodec.clockRate,
+                            channels: matchingLocalCodec.channels,
+                            localPayloadType: matchingLocalCodec.preferredPayloadType,
+                            localRtxPayloadType: undefined,
+                            remotePayloadType: remoteCodec.preferredPayloadType,
+                            remoteRtxPayloadType: undefined,
+                            localParameters: matchingLocalCodec.parameters,
+                            remoteParameters: remoteCodec.parameters,
+                            rtcpFeedback: reduceRtcpFeedback(matchingLocalCodec, remoteCodec)
+                        };
+                        extendedRtpCapabilities.codecs.push(extendedCodec);
+                    }
+                    // Match RTX codecs.
+                    for (const extendedCodec of extendedRtpCapabilities.codecs) {
+                        const matchingLocalRtxCodec = localCaps.codecs
+                            .find((localCodec) => (isRtxCodec(localCodec) &&
+                                localCodec.parameters.apt === extendedCodec.localPayloadType));
+                        const matchingRemoteRtxCodec = remoteCaps.codecs
+                            .find((remoteCodec) => (isRtxCodec(remoteCodec) &&
+                                remoteCodec.parameters.apt === extendedCodec.remotePayloadType));
+                        if (matchingLocalRtxCodec && matchingRemoteRtxCodec) {
+                            extendedCodec.localRtxPayloadType = matchingLocalRtxCodec.preferredPayloadType;
+                            extendedCodec.remoteRtxPayloadType = matchingRemoteRtxCodec.preferredPayloadType;
+                        }
+                    }
+                    // Match header extensions.
+                    for (const remoteExt of remoteCaps.headerExtensions) {
+                        const matchingLocalExt = localCaps.headerExtensions
+                            .find((localExt) => (matchHeaderExtensions(localExt, remoteExt)));
+                        if (!matchingLocalExt)
+                            continue;
+                        const extendedExt = {
+                            kind: remoteExt.kind,
+                            uri: remoteExt.uri,
+                            sendId: matchingLocalExt.preferredId,
+                            recvId: remoteExt.preferredId,
+                            encrypt: matchingLocalExt.preferredEncrypt,
+                            direction: 'sendrecv'
+                        };
+                        switch (remoteExt.direction) {
+                            case 'sendrecv':
+                                extendedExt.direction = 'sendrecv';
+                                break;
+                            case 'recvonly':
+                                extendedExt.direction = 'sendonly';
+                                break;
+                            case 'sendonly':
+                                extendedExt.direction = 'recvonly';
+                                break;
+                            case 'inactive':
+                                extendedExt.direction = 'inactive';
+                                break;
+                        }
+                        extendedRtpCapabilities.headerExtensions.push(extendedExt);
+                    }
+                    return extendedRtpCapabilities;
+                }
+
+                exports.getExtendedRtpCapabilities = getExtendedRtpCapabilities;
+
+                /**
+                 * Generate RTP capabilities for receiving media based on the given extended
+                 * RTP capabilities.
+                 */
+                function getRecvRtpCapabilities(extendedRtpCapabilities) {
+                    const rtpCapabilities = {
+                        codecs: [],
+                        headerExtensions: []
+                    };
+                    for (const extendedCodec of extendedRtpCapabilities.codecs) {
+                        const codec = {
+                            mimeType: extendedCodec.mimeType,
+                            kind: extendedCodec.kind,
+                            preferredPayloadType: extendedCodec.remotePayloadType,
+                            clockRate: extendedCodec.clockRate,
+                            channels: extendedCodec.channels,
+                            parameters: extendedCodec.localParameters,
+                            rtcpFeedback: extendedCodec.rtcpFeedback
+                        };
+                        rtpCapabilities.codecs.push(codec);
+                        // Add RTX codec.
+                        if (!extendedCodec.remoteRtxPayloadType)
+                            continue;
+                        const rtxCodec = {
+                            mimeType: `${extendedCodec.kind}/rtx`,
+                            kind: extendedCodec.kind,
+                            preferredPayloadType: extendedCodec.remoteRtxPayloadType,
+                            clockRate: extendedCodec.clockRate,
+                            parameters: {
+                                apt: extendedCodec.remotePayloadType
+                            },
+                            rtcpFeedback: []
+                        };
+                        rtpCapabilities.codecs.push(rtxCodec);
+                        // TODO: In the future, we need to add FEC, CN, etc, codecs.
+                    }
+                    for (const extendedExtension of extendedRtpCapabilities.headerExtensions) {
+                        // Ignore RTP extensions not valid for receiving.
+                        if (extendedExtension.direction !== 'sendrecv' &&
+                            extendedExtension.direction !== 'recvonly') {
+                            continue;
+                        }
+                        const ext = {
+                            kind: extendedExtension.kind,
+                            uri: extendedExtension.uri,
+                            preferredId: extendedExtension.recvId,
+                            preferredEncrypt: extendedExtension.encrypt,
+                            direction: extendedExtension.direction
+                        };
+                        rtpCapabilities.headerExtensions.push(ext);
+                    }
+                    return rtpCapabilities;
+                }
+
+                exports.getRecvRtpCapabilities = getRecvRtpCapabilities;
+
+                /**
+                 * Generate RTP parameters of the given kind for sending media.
+                 * NOTE: mid, encodings and rtcp fields are left empty.
+                 */
+                function getSendingRtpParameters(kind, extendedRtpCapabilities) {
+                    const rtpParameters = {
+                        mid: undefined,
+                        codecs: [],
+                        headerExtensions: [],
+                        encodings: [],
+                        rtcp: {}
+                    };
+                    for (const extendedCodec of extendedRtpCapabilities.codecs) {
+                        if (extendedCodec.kind !== kind)
+                            continue;
+                        const codec = {
+                            mimeType: extendedCodec.mimeType,
+                            payloadType: extendedCodec.localPayloadType,
+                            clockRate: extendedCodec.clockRate,
+                            channels: extendedCodec.channels,
+                            parameters: extendedCodec.localParameters,
+                            rtcpFeedback: extendedCodec.rtcpFeedback
+                        };
+                        rtpParameters.codecs.push(codec);
+                        // Add RTX codec.
+                        if (extendedCodec.localRtxPayloadType) {
+                            const rtxCodec = {
+                                mimeType: `${extendedCodec.kind}/rtx`,
+                                payloadType: extendedCodec.localRtxPayloadType,
+                                clockRate: extendedCodec.clockRate,
+                                parameters: {
+                                    apt: extendedCodec.localPayloadType
+                                },
+                                rtcpFeedback: []
+                            };
+                            rtpParameters.codecs.push(rtxCodec);
+                        }
+                    }
+                    for (const extendedExtension of extendedRtpCapabilities.headerExtensions) {
+                        // Ignore RTP extensions of a different kind and those not valid for sending.
+                        if ((extendedExtension.kind && extendedExtension.kind !== kind) ||
+                            (extendedExtension.direction !== 'sendrecv' &&
+                                extendedExtension.direction !== 'sendonly')) {
+                            continue;
+                        }
+                        const ext = {
+                            uri: extendedExtension.uri,
+                            id: extendedExtension.sendId,
+                            encrypt: extendedExtension.encrypt,
+                            parameters: {}
+                        };
+                        rtpParameters.headerExtensions.push(ext);
+                    }
+                    return rtpParameters;
+                }
+
+                exports.getSendingRtpParameters = getSendingRtpParameters;
+
+                /**
+                 * Generate RTP parameters of the given kind suitable for the remote SDP answer.
+                 */
+                function getSendingRemoteRtpParameters(kind, extendedRtpCapabilities) {
+                    const rtpParameters = {
+                        mid: undefined,
+                        codecs: [],
+                        headerExtensions: [],
+                        encodings: [],
+                        rtcp: {}
+                    };
+                    for (const extendedCodec of extendedRtpCapabilities.codecs) {
+                        if (extendedCodec.kind !== kind)
+                            continue;
+                        const codec = {
+                            mimeType: extendedCodec.mimeType,
+                            payloadType: extendedCodec.localPayloadType,
+                            clockRate: extendedCodec.clockRate,
+                            channels: extendedCodec.channels,
+                            parameters: extendedCodec.remoteParameters,
+                            rtcpFeedback: extendedCodec.rtcpFeedback
+                        };
+                        rtpParameters.codecs.push(codec);
+                        // Add RTX codec.
+                        if (extendedCodec.localRtxPayloadType) {
+                            const rtxCodec = {
+                                mimeType: `${extendedCodec.kind}/rtx`,
+                                payloadType: extendedCodec.localRtxPayloadType,
+                                clockRate: extendedCodec.clockRate,
+                                parameters: {
+                                    apt: extendedCodec.localPayloadType
+                                },
+                                rtcpFeedback: []
+                            };
+                            rtpParameters.codecs.push(rtxCodec);
+                        }
+                    }
+                    for (const extendedExtension of extendedRtpCapabilities.headerExtensions) {
+                        // Ignore RTP extensions of a different kind and those not valid for sending.
+                        if ((extendedExtension.kind && extendedExtension.kind !== kind) ||
+                            (extendedExtension.direction !== 'sendrecv' &&
+                                extendedExtension.direction !== 'sendonly')) {
+                            continue;
+                        }
+                        const ext = {
+                            uri: extendedExtension.uri,
+                            id: extendedExtension.sendId,
+                            encrypt: extendedExtension.encrypt,
+                            parameters: {}
+                        };
+                        rtpParameters.headerExtensions.push(ext);
+                    }
+                    // Reduce codecs' RTCP feedback. Use Transport-CC if available, REMB otherwise.
+                    if (rtpParameters.headerExtensions.some((ext) => (ext.uri === 'http://www.ietf.org/id/draft-holmer-rmcat-transport-wide-cc-extensions-01'))) {
+                        for (const codec of rtpParameters.codecs) {
+                            codec.rtcpFeedback = (codec.rtcpFeedback || [])
+                                .filter((fb) => fb.type !== 'goog-remb');
+                        }
+                    } else if (rtpParameters.headerExtensions.some((ext) => (ext.uri === 'http://www.webrtc.org/experiments/rtp-hdrext/abs-send-time'))) {
+                        for (const codec of rtpParameters.codecs) {
+                            codec.rtcpFeedback = (codec.rtcpFeedback || [])
+                                .filter((fb) => fb.type !== 'transport-cc');
+                        }
+                    } else {
+                        for (const codec of rtpParameters.codecs) {
+                            codec.rtcpFeedback = (codec.rtcpFeedback || [])
+                                .filter((fb) => (fb.type !== 'transport-cc' &&
+                                    fb.type !== 'goog-remb'));
+                        }
+                    }
+                    return rtpParameters;
+                }
+
+                exports.getSendingRemoteRtpParameters = getSendingRemoteRtpParameters;
+
+                /**
+                 * Reduce given codecs by returning an array of codecs "compatible" with the
+                 * given capability codec. If no capability codec is given, take the first
+                 * one(s).
+                 *
+                 * Given codecs must be generated by ortc.getSendingRtpParameters() or
+                 * ortc.getSendingRemoteRtpParameters().
+                 *
+                 * The returned array of codecs also include a RTX codec if available.
+                 */
+                function reduceCodecs(codecs, capCodec) {
+                    const filteredCodecs = [];
+                    // If no capability codec is given, take the first one (and RTX).
+                    if (!capCodec) {
+                        filteredCodecs.push(codecs[0]);
+                        if (isRtxCodec(codecs[1]))
+                            filteredCodecs.push(codecs[1]);
+                    }
+                    // Otherwise look for a compatible set of codecs.
+                    else {
+                        for (let idx = 0; idx < codecs.length; ++idx) {
+                            if (matchCodecs(codecs[idx], capCodec)) {
+                                filteredCodecs.push(codecs[idx]);
+                                if (isRtxCodec(codecs[idx + 1]))
+                                    filteredCodecs.push(codecs[idx + 1]);
+                                break;
+                            }
+                        }
+                        if (filteredCodecs.length === 0)
+                            throw new TypeError('no matching codec found');
+                    }
+                    return filteredCodecs;
+                }
+
+                exports.reduceCodecs = reduceCodecs;
+
+                /**
+                 * Create RTP parameters for a Consumer for the RTP probator.
+                 */
+                function generateProbatorRtpParameters(videoRtpParameters) {
+                    // Clone given reference video RTP parameters.
+                    videoRtpParameters = utils.clone(videoRtpParameters, {});
+                    // This may throw.
+                    validateRtpParameters(videoRtpParameters);
+                    const rtpParameters = {
+                        mid: RTP_PROBATOR_MID,
+                        codecs: [],
+                        headerExtensions: [],
+                        encodings: [{ssrc: RTP_PROBATOR_SSRC}],
+                        rtcp: {cname: 'probator'}
+                    };
+                    rtpParameters.codecs.push(videoRtpParameters.codecs[0]);
+                    rtpParameters.codecs[0].payloadType = RTP_PROBATOR_CODEC_PAYLOAD_TYPE;
+                    rtpParameters.headerExtensions = videoRtpParameters.headerExtensions;
+                    return rtpParameters;
+                }
+
+                exports.generateProbatorRtpParameters = generateProbatorRtpParameters;
+
+                /**
+                 * Whether media can be sent based on the given RTP capabilities.
+                 */
+                function canSend(kind, extendedRtpCapabilities) {
+                    return extendedRtpCapabilities.codecs.some((codec) => codec.kind === kind);
+                }
+
+                exports.canSend = canSend;
+
+                /**
+                 * Whether the given RTP parameters can be received with the given RTP
+                 * capabilities.
+                 */
+                function canReceive(rtpParameters, extendedRtpCapabilities) {
+                    // This may throw.
+                    validateRtpParameters(rtpParameters);
+                    if (rtpParameters.codecs.length === 0)
+                        return false;
+                    const firstMediaCodec = rtpParameters.codecs[0];
+                    return extendedRtpCapabilities.codecs
+                        .some((codec) => codec.remotePayloadType === firstMediaCodec.payloadType);
+                }
+
+                exports.canReceive = canReceive;
+
+                function isRtxCodec(codec) {
+                    if (!codec)
+                        return false;
+                    return /.+\/rtx$/i.test(codec.mimeType);
+                }
+
+                function matchCodecs(aCodec, bCodec, {strict = false, modify = false} = {}) {
+                    const aMimeType = aCodec.mimeType.toLowerCase();
+                    const bMimeType = bCodec.mimeType.toLowerCase();
+                    if (aMimeType !== bMimeType)
+                        return false;
+                    if (aCodec.clockRate !== bCodec.clockRate)
+                        return false;
+                    if (aCodec.channels !== bCodec.channels)
+                        return false;
+                    // Per codec special checks.
+                    switch (aMimeType) {
+                        case 'video/h264': {
+                            if (strict) {
+                                const aPacketizationMode = aCodec.parameters['packetization-mode'] || 0;
+                                const bPacketizationMode = bCodec.parameters['packetization-mode'] || 0;
+                                if (aPacketizationMode !== bPacketizationMode)
+                                    return false;
+                                if (!h264.isSameProfile(aCodec.parameters, bCodec.parameters))
+                                    return false;
+                                let selectedProfileLevelId;
+                                try {
+                                    selectedProfileLevelId =
+                                        h264.generateProfileLevelIdForAnswer(aCodec.parameters, bCodec.parameters);
+                                } catch (error) {
+                                    return false;
+                                }
+                                if (modify) {
+                                    if (selectedProfileLevelId) {
+                                        aCodec.parameters['profile-level-id'] = selectedProfileLevelId;
+                                        bCodec.parameters['profile-level-id'] = selectedProfileLevelId;
+                                    } else {
+                                        delete aCodec.parameters['profile-level-id'];
+                                        delete bCodec.parameters['profile-level-id'];
+                                    }
+                                }
+                            }
+                            break;
+                        }
+                        case 'video/vp9': {
+                            if (strict) {
+                                const aProfileId = aCodec.parameters['profile-id'] || 0;
+                                const bProfileId = bCodec.parameters['profile-id'] || 0;
+                                if (aProfileId !== bProfileId)
+                                    return false;
+                            }
+                            break;
+                        }
+                    }
+                    return true;
+                }
+
+                function matchHeaderExtensions(aExt, bExt) {
+                    if (aExt.kind && bExt.kind && aExt.kind !== bExt.kind)
+                        return false;
+                    if (aExt.uri !== bExt.uri)
+                        return false;
+                    return true;
+                }
+
+                function reduceRtcpFeedback(codecA, codecB) {
+                    const reducedRtcpFeedback = [];
+                    for (const aFb of codecA.rtcpFeedback || []) {
+                        const matchingBFb = (codecB.rtcpFeedback || [])
+                            .find((bFb) => (bFb.type === aFb.type &&
+                                (bFb.parameter === aFb.parameter || (!bFb.parameter && !aFb.parameter))));
+                        if (matchingBFb)
+                            reducedRtcpFeedback.push(matchingBFb);
+                    }
+                    return reducedRtcpFeedback;
+                }
+
+
+                /***/
+            }),
+
+            /***/ 770:
+            /***/ ((__unused_webpack_module, exports) => {
+
+                "use strict";
+
+                Object.defineProperty(exports, "__esModule", ({value: true}));
+                exports.parse = void 0;
+                const ScalabilityModeRegex = new RegExp('^[LS]([1-9]\\d{0,1})T([1-9]\\d{0,1})');
+
+                function parse(scalabilityMode) {
+                    const match = ScalabilityModeRegex.exec(scalabilityMode || '');
+                    if (match) {
+                        return {
+                            spatialLayers: Number(match[1]),
+                            temporalLayers: Number(match[2])
+                        };
+                    } else {
+                        return {
+                            spatialLayers: 1,
+                            temporalLayers: 1
+                        };
+                    }
+                }
+
+                exports.parse = parse;
+
+
+                /***/
+            }),
+
+            /***/ 53:
+            /***/ (function (__unused_webpack_module, exports, __webpack_require__) {
+
+                "use strict";
+
+                var __createBinding = (this && this.__createBinding) || (Object.create ? (function (o, m, k, k2) {
+                    if (k2 === undefined) k2 = k;
+                    var desc = Object.getOwnPropertyDescriptor(m, k);
+                    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+                        desc = {
+                            enumerable: true, get: function () {
+                                return m[k];
+                            }
+                        };
+                    }
+                    Object.defineProperty(o, k2, desc);
+                }) : (function (o, m, k, k2) {
+                    if (k2 === undefined) k2 = k;
+                    o[k2] = m[k];
+                }));
+                var __exportStar = (this && this.__exportStar) || function (m, exports) {
+                    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+                };
+                Object.defineProperty(exports, "__esModule", ({value: true}));
+                __exportStar(__webpack_require__(120), exports);
+                __exportStar(__webpack_require__(202), exports);
+                __exportStar(__webpack_require__(569), exports);
+                __exportStar(__webpack_require__(514), exports);
+                __exportStar(__webpack_require__(504), exports);
+                __exportStar(__webpack_require__(623), exports);
+                __exportStar(__webpack_require__(879), exports);
+                __exportStar(__webpack_require__(669), exports);
+                __exportStar(__webpack_require__(316), exports);
+                __exportStar(__webpack_require__(992), exports);
+
+
+                /***/
+            }),
+
+            /***/ 347:
+            /***/ ((__unused_webpack_module, exports) => {
+
+                "use strict";
+
+                Object.defineProperty(exports, "__esModule", ({value: true}));
+                exports.generateRandomNumber = exports.clone = void 0;
+
+                /**
+                 * Clones the given data.
+                 */
+                function clone(data, defaultValue) {
+                    if (typeof data === 'undefined')
+                        return defaultValue;
+                    return JSON.parse(JSON.stringify(data));
+                }
+
+                exports.clone = clone;
+
+                /**
+                 * Generates a random positive integer.
+                 */
+                function generateRandomNumber() {
+                    return Math.round(Math.random() * 10000000);
+                }
+
+                exports.generateRandomNumber = generateRandomNumber;
+
+
+                /***/
+            }),
+
+            /***/ 692:
+            /***/ ((module) => {
+
+                var grammar = module.exports = {
+                    v: [{
+                        name: 'version',
+                        reg: /^(\d*)$/
+                    }],
+                    o: [{
+                        // o=- 20518 0 IN IP4 203.0.113.1
+                        // NB: sessionId will be a String in most cases because it is huge
+                        name: 'origin',
+                        reg: /^(\S*) (\d*) (\d*) (\S*) IP(\d) (\S*)/,
+                        names: ['username', 'sessionId', 'sessionVersion', 'netType', 'ipVer', 'address'],
+                        format: '%s %s %d %s IP%d %s'
+                    }],
+                    // default parsing of these only (though some of these feel outdated)
+                    s: [{name: 'name'}],
+                    i: [{name: 'description'}],
+                    u: [{name: 'uri'}],
+                    e: [{name: 'email'}],
+                    p: [{name: 'phone'}],
+                    z: [{name: 'timezones'}], // TODO: this one can actually be parsed properly...
+                    r: [{name: 'repeats'}],   // TODO: this one can also be parsed properly
+                    // k: [{}], // outdated thing ignored
+                    t: [{
+                        // t=0 0
+                        name: 'timing',
+                        reg: /^(\d*) (\d*)/,
+                        names: ['start', 'stop'],
+                        format: '%d %d'
+                    }],
+                    c: [{
+                        // c=IN IP4 10.47.197.26
+                        name: 'connection',
+                        reg: /^IN IP(\d) (\S*)/,
+                        names: ['version', 'ip'],
+                        format: 'IN IP%d %s'
+                    }],
+                    b: [{
+                        // b=AS:4000
+                        push: 'bandwidth',
+                        reg: /^(TIAS|AS|CT|RR|RS):(\d*)/,
+                        names: ['type', 'limit'],
+                        format: '%s:%s'
+                    }],
+                    m: [{
+                        // m=video 51744 RTP/AVP 126 97 98 34 31
+                        // NB: special - pushes to session
+                        // TODO: rtp/fmtp should be filtered by the payloads found here?
+                        reg: /^(\w*) (\d*) ([\w/]*)(?: (.*))?/,
+                        names: ['type', 'port', 'protocol', 'payloads'],
+                        format: '%s %d %s %s'
+                    }],
+                    a: [
+                        {
+                            // a=rtpmap:110 opus/48000/2
+                            push: 'rtp',
+                            reg: /^rtpmap:(\d*) ([\w\-.]*)(?:\s*\/(\d*)(?:\s*\/(\S*))?)?/,
+                            names: ['payload', 'codec', 'rate', 'encoding'],
+                            format: function (o) {
+                                return (o.encoding)
+                                    ? 'rtpmap:%d %s/%s/%s'
+                                    : o.rate
+                                        ? 'rtpmap:%d %s/%s'
+                                        : 'rtpmap:%d %s';
+                            }
+                        },
+                        {
+                            // a=fmtp:108 profile-level-id=24;object=23;bitrate=64000
+                            // a=fmtp:111 minptime=10; useinbandfec=1
+                            push: 'fmtp',
+                            reg: /^fmtp:(\d*) ([\S| ]*)/,
+                            names: ['payload', 'config'],
+                            format: 'fmtp:%d %s'
+                        },
+                        {
+                            // a=control:streamid=0
+                            name: 'control',
+                            reg: /^control:(.*)/,
+                            format: 'control:%s'
+                        },
+                        {
+                            // a=rtcp:65179 IN IP4 193.84.77.194
+                            name: 'rtcp',
+                            reg: /^rtcp:(\d*)(?: (\S*) IP(\d) (\S*))?/,
+                            names: ['port', 'netType', 'ipVer', 'address'],
+                            format: function (o) {
+                                return (o.address != null)
+                                    ? 'rtcp:%d %s IP%d %s'
+                                    : 'rtcp:%d';
+                            }
+                        },
+                        {
+                            // a=rtcp-fb:98 trr-int 100
+                            push: 'rtcpFbTrrInt',
+                            reg: /^rtcp-fb:(\*|\d*) trr-int (\d*)/,
+                            names: ['payload', 'value'],
+                            format: 'rtcp-fb:%s trr-int %d'
+                        },
+                        {
+                            // a=rtcp-fb:98 nack rpsi
+                            push: 'rtcpFb',
+                            reg: /^rtcp-fb:(\*|\d*) ([\w-_]*)(?: ([\w-_]*))?/,
+                            names: ['payload', 'type', 'subtype'],
+                            format: function (o) {
+                                return (o.subtype != null)
+                                    ? 'rtcp-fb:%s %s %s'
+                                    : 'rtcp-fb:%s %s';
+                            }
+                        },
+                        {
+                            // a=extmap:2 urn:ietf:params:rtp-hdrext:toffset
+                            // a=extmap:1/recvonly URI-gps-string
+                            // a=extmap:3 urn:ietf:params:rtp-hdrext:encrypt urn:ietf:params:rtp-hdrext:smpte-tc 25@600/24
+                            push: 'ext',
+                            reg: /^extmap:(\d+)(?:\/(\w+))?(?: (urn:ietf:params:rtp-hdrext:encrypt))? (\S*)(?: (\S*))?/,
+                            names: ['value', 'direction', 'encrypt-uri', 'uri', 'config'],
+                            format: function (o) {
+                                return (
+                                    'extmap:%d' +
+                                    (o.direction ? '/%s' : '%v') +
+                                    (o['encrypt-uri'] ? ' %s' : '%v') +
+                                    ' %s' +
+                                    (o.config ? ' %s' : '')
+                                );
+                            }
+                        },
+                        {
+                            // a=extmap-allow-mixed
+                            name: 'extmapAllowMixed',
+                            reg: /^(extmap-allow-mixed)/
+                        },
+                        {
+                            // a=crypto:1 AES_CM_128_HMAC_SHA1_80 inline:PS1uQCVeeCFCanVmcjkpPywjNWhcYD0mXXtxaVBR|2^20|1:32
+                            push: 'crypto',
+                            reg: /^crypto:(\d*) ([\w_]*) (\S*)(?: (\S*))?/,
+                            names: ['id', 'suite', 'config', 'sessionConfig'],
+                            format: function (o) {
+                                return (o.sessionConfig != null)
+                                    ? 'crypto:%d %s %s %s'
+                                    : 'crypto:%d %s %s';
+                            }
+                        },
+                        {
+                            // a=setup:actpass
+                            name: 'setup',
+                            reg: /^setup:(\w*)/,
+                            format: 'setup:%s'
+                        },
+                        {
+                            // a=connection:new
+                            name: 'connectionType',
+                            reg: /^connection:(new|existing)/,
+                            format: 'connection:%s'
+                        },
+                        {
+                            // a=mid:1
+                            name: 'mid',
+                            reg: /^mid:([^\s]*)/,
+                            format: 'mid:%s'
+                        },
+                        {
+                            // a=msid:0c8b064d-d807-43b4-b434-f92a889d8587 98178685-d409-46e0-8e16-7ef0db0db64a
+                            name: 'msid',
+                            reg: /^msid:(.*)/,
+                            format: 'msid:%s'
+                        },
+                        {
+                            // a=ptime:20
+                            name: 'ptime',
+                            reg: /^ptime:(\d*(?:\.\d*)*)/,
+                            format: 'ptime:%d'
+                        },
+                        {
+                            // a=maxptime:60
+                            name: 'maxptime',
+                            reg: /^maxptime:(\d*(?:\.\d*)*)/,
+                            format: 'maxptime:%d'
+                        },
+                        {
+                            // a=sendrecv
+                            name: 'direction',
+                            reg: /^(sendrecv|recvonly|sendonly|inactive)/
+                        },
+                        {
+                            // a=ice-lite
+                            name: 'icelite',
+                            reg: /^(ice-lite)/
+                        },
+                        {
+                            // a=ice-ufrag:F7gI
+                            name: 'iceUfrag',
+                            reg: /^ice-ufrag:(\S*)/,
+                            format: 'ice-ufrag:%s'
+                        },
+                        {
+                            // a=ice-pwd:x9cml/YzichV2+XlhiMu8g
+                            name: 'icePwd',
+                            reg: /^ice-pwd:(\S*)/,
+                            format: 'ice-pwd:%s'
+                        },
+                        {
+                            // a=fingerprint:SHA-1 00:11:22:33:44:55:66:77:88:99:AA:BB:CC:DD:EE:FF:00:11:22:33
+                            name: 'fingerprint',
+                            reg: /^fingerprint:(\S*) (\S*)/,
+                            names: ['type', 'hash'],
+                            format: 'fingerprint:%s %s'
+                        },
+                        {
+                            // a=candidate:0 1 UDP 2113667327 203.0.113.1 54400 typ host
+                            // a=candidate:1162875081 1 udp 2113937151 192.168.34.75 60017 typ host generation 0 network-id 3 network-cost 10
+                            // a=candidate:3289912957 2 udp 1845501695 193.84.77.194 60017 typ srflx raddr 192.168.34.75 rport 60017 generation 0 network-id 3 network-cost 10
+                            // a=candidate:229815620 1 tcp 1518280447 192.168.150.19 60017 typ host tcptype active generation 0 network-id 3 network-cost 10
+                            // a=candidate:3289912957 2 tcp 1845501695 193.84.77.194 60017 typ srflx raddr 192.168.34.75 rport 60017 tcptype passive generation 0 network-id 3 network-cost 10
+                            push: 'candidates',
+                            reg: /^candidate:(\S*) (\d*) (\S*) (\d*) (\S*) (\d*) typ (\S*)(?: raddr (\S*) rport (\d*))?(?: tcptype (\S*))?(?: generation (\d*))?(?: network-id (\d*))?(?: network-cost (\d*))?/,
+                            names: ['foundation', 'component', 'transport', 'priority', 'ip', 'port', 'type', 'raddr', 'rport', 'tcptype', 'generation', 'network-id', 'network-cost'],
+                            format: function (o) {
+                                var str = 'candidate:%s %d %s %d %s %d typ %s';
+
+                                str += (o.raddr != null) ? ' raddr %s rport %d' : '%v%v';
+
+                                // NB: candidate has three optional chunks, so %void middles one if it's missing
+                                str += (o.tcptype != null) ? ' tcptype %s' : '%v';
+
+                                if (o.generation != null) {
+                                    str += ' generation %d';
+                                }
+
+                                str += (o['network-id'] != null) ? ' network-id %d' : '%v';
+                                str += (o['network-cost'] != null) ? ' network-cost %d' : '%v';
+                                return str;
+                            }
+                        },
+                        {
+                            // a=end-of-candidates (keep after the candidates line for readability)
+                            name: 'endOfCandidates',
+                            reg: /^(end-of-candidates)/
+                        },
+                        {
+                            // a=remote-candidates:1 203.0.113.1 54400 2 203.0.113.1 54401 ...
+                            name: 'remoteCandidates',
+                            reg: /^remote-candidates:(.*)/,
+                            format: 'remote-candidates:%s'
+                        },
+                        {
+                            // a=ice-options:google-ice
+                            name: 'iceOptions',
+                            reg: /^ice-options:(\S*)/,
+                            format: 'ice-options:%s'
+                        },
+                        {
+                            // a=ssrc:2566107569 cname:t9YU8M1UxTF8Y1A1
+                            push: 'ssrcs',
+                            reg: /^ssrc:(\d*) ([\w_-]*)(?::(.*))?/,
+                            names: ['id', 'attribute', 'value'],
+                            format: function (o) {
+                                var str = 'ssrc:%d';
+                                if (o.attribute != null) {
+                                    str += ' %s';
+                                    if (o.value != null) {
+                                        str += ':%s';
+                                    }
+                                }
+                                return str;
+                            }
+                        },
+                        {
+                            // a=ssrc-group:FEC 1 2
+                            // a=ssrc-group:FEC-FR 3004364195 1080772241
+                            push: 'ssrcGroups',
+                            // token-char = %x21 / %x23-27 / %x2A-2B / %x2D-2E / %x30-39 / %x41-5A / %x5E-7E
+                            reg: /^ssrc-group:([\x21\x23\x24\x25\x26\x27\x2A\x2B\x2D\x2E\w]*) (.*)/,
+                            names: ['semantics', 'ssrcs'],
+                            format: 'ssrc-group:%s %s'
+                        },
+                        {
+                            // a=msid-semantic: WMS Jvlam5X3SX1OP6pn20zWogvaKJz5Hjf9OnlV
+                            name: 'msidSemantic',
+                            reg: /^msid-semantic:\s?(\w*) (\S*)/,
+                            names: ['semantic', 'token'],
+                            format: 'msid-semantic: %s %s' // space after ':' is not accidental
+                        },
+                        {
+                            // a=group:BUNDLE audio video
+                            push: 'groups',
+                            reg: /^group:(\w*) (.*)/,
+                            names: ['type', 'mids'],
+                            format: 'group:%s %s'
+                        },
+                        {
+                            // a=rtcp-mux
+                            name: 'rtcpMux',
+                            reg: /^(rtcp-mux)/
+                        },
+                        {
+                            // a=rtcp-rsize
+                            name: 'rtcpRsize',
+                            reg: /^(rtcp-rsize)/
+                        },
+                        {
+                            // a=sctpmap:5000 webrtc-datachannel 1024
+                            name: 'sctpmap',
+                            reg: /^sctpmap:([\w_/]*) (\S*)(?: (\S*))?/,
+                            names: ['sctpmapNumber', 'app', 'maxMessageSize'],
+                            format: function (o) {
+                                return (o.maxMessageSize != null)
+                                    ? 'sctpmap:%s %s %s'
+                                    : 'sctpmap:%s %s';
+                            }
+                        },
+                        {
+                            // a=x-google-flag:conference
+                            name: 'xGoogleFlag',
+                            reg: /^x-google-flag:([^\s]*)/,
+                            format: 'x-google-flag:%s'
+                        },
+                        {
+                            // a=rid:1 send max-width=1280;max-height=720;max-fps=30;depend=0
+                            push: 'rids',
+                            reg: /^rid:([\d\w]+) (\w+)(?: ([\S| ]*))?/,
+                            names: ['id', 'direction', 'params'],
+                            format: function (o) {
+                                return (o.params) ? 'rid:%s %s %s' : 'rid:%s %s';
+                            }
+                        },
+                        {
+                            // a=imageattr:97 send [x=800,y=640,sar=1.1,q=0.6] [x=480,y=320] recv [x=330,y=250]
+                            // a=imageattr:* send [x=800,y=640] recv *
+                            // a=imageattr:100 recv [x=320,y=240]
+                            push: 'imageattrs',
+                            reg: new RegExp(
+                                // a=imageattr:97
+                                '^imageattr:(\\d+|\\*)' +
+                                // send [x=800,y=640,sar=1.1,q=0.6] [x=480,y=320]
+                                '[\\s\\t]+(send|recv)[\\s\\t]+(\\*|\\[\\S+\\](?:[\\s\\t]+\\[\\S+\\])*)' +
+                                // recv [x=330,y=250]
+                                '(?:[\\s\\t]+(recv|send)[\\s\\t]+(\\*|\\[\\S+\\](?:[\\s\\t]+\\[\\S+\\])*))?'
+                            ),
+                            names: ['pt', 'dir1', 'attrs1', 'dir2', 'attrs2'],
+                            format: function (o) {
+                                return 'imageattr:%s %s %s' + (o.dir2 ? ' %s %s' : '');
+                            }
+                        },
+                        {
+                            // a=simulcast:send 1,2,3;~4,~5 recv 6;~7,~8
+                            // a=simulcast:recv 1;4,5 send 6;7
+                            name: 'simulcast',
+                            reg: new RegExp(
+                                // a=simulcast:
+                                '^simulcast:' +
+                                // send 1,2,3;~4,~5
+                                '(send|recv) ([a-zA-Z0-9\\-_~;,]+)' +
+                                // space + recv 6;~7,~8
+                                '(?:\\s?(send|recv) ([a-zA-Z0-9\\-_~;,]+))?' +
+                                // end
+                                '$'
+                            ),
+                            names: ['dir1', 'list1', 'dir2', 'list2'],
+                            format: function (o) {
+                                return 'simulcast:%s %s' + (o.dir2 ? ' %s %s' : '');
+                            }
+                        },
+                        {
+                            // old simulcast draft 03 (implemented by Firefox)
+                            //   https://tools.ietf.org/html/draft-ietf-mmusic-sdp-simulcast-03
+                            // a=simulcast: recv pt=97;98 send pt=97
+                            // a=simulcast: send rid=5;6;7 paused=6,7
+                            name: 'simulcast_03',
+                            reg: /^simulcast:[\s\t]+([\S+\s\t]+)$/,
+                            names: ['value'],
+                            format: 'simulcast: %s'
+                        },
+                        {
+                            // a=framerate:25
+                            // a=framerate:29.97
+                            name: 'framerate',
+                            reg: /^framerate:(\d+(?:$|\.\d+))/,
+                            format: 'framerate:%s'
+                        },
+                        {
+                            // RFC4570
+                            // a=source-filter: incl IN IP4 239.5.2.31 10.1.15.5
+                            name: 'sourceFilter',
+                            reg: /^source-filter: *(excl|incl) (\S*) (IP4|IP6|\*) (\S*) (.*)/,
+                            names: ['filterMode', 'netType', 'addressTypes', 'destAddress', 'srcList'],
+                            format: 'source-filter: %s %s %s %s %s'
+                        },
+                        {
+                            // a=bundle-only
+                            name: 'bundleOnly',
+                            reg: /^(bundle-only)/
+                        },
+                        {
+                            // a=label:1
+                            name: 'label',
+                            reg: /^label:(.+)/,
+                            format: 'label:%s'
+                        },
+                        {
+                            // RFC version 26 for SCTP over DTLS
+                            // https://tools.ietf.org/html/draft-ietf-mmusic-sctp-sdp-26#section-5
+                            name: 'sctpPort',
+                            reg: /^sctp-port:(\d+)$/,
+                            format: 'sctp-port:%s'
+                        },
+                        {
+                            // RFC version 26 for SCTP over DTLS
+                            // https://tools.ietf.org/html/draft-ietf-mmusic-sctp-sdp-26#section-6
+                            name: 'maxMessageSize',
+                            reg: /^max-message-size:(\d+)$/,
+                            format: 'max-message-size:%s'
+                        },
+                        {
+                            // RFC7273
+                            // a=ts-refclk:ptp=IEEE1588-2008:39-A7-94-FF-FE-07-CB-D0:37
+                            push: 'tsRefClocks',
+                            reg: /^ts-refclk:([^\s=]*)(?:=(\S*))?/,
+                            names: ['clksrc', 'clksrcExt'],
+                            format: function (o) {
+                                return 'ts-refclk:%s' + (o.clksrcExt != null ? '=%s' : '');
+                            }
+                        },
+                        {
+                            // RFC7273
+                            // a=mediaclk:direct=963214424
+                            name: 'mediaClk',
+                            reg: /^mediaclk:(?:id=(\S*))? *([^\s=]*)(?:=(\S*))?(?: *rate=(\d+)\/(\d+))?/,
+                            names: ['id', 'mediaClockName', 'mediaClockValue', 'rateNumerator', 'rateDenominator'],
+                            format: function (o) {
+                                var str = 'mediaclk:';
+                                str += (o.id != null ? 'id=%s %s' : '%v%s');
+                                str += (o.mediaClockValue != null ? '=%s' : '');
+                                str += (o.rateNumerator != null ? ' rate=%s' : '');
+                                str += (o.rateDenominator != null ? '/%s' : '');
+                                return str;
+                            }
+                        },
+                        {
+                            // a=keywds:keywords
+                            name: 'keywords',
+                            reg: /^keywds:(.+)$/,
+                            format: 'keywds:%s'
+                        },
+                        {
+                            // a=content:main
+                            name: 'content',
+                            reg: /^content:(.+)/,
+                            format: 'content:%s'
+                        },
+                        // BFCP https://tools.ietf.org/html/rfc4583
+                        {
+                            // a=floorctrl:c-s
+                            name: 'bfcpFloorCtrl',
+                            reg: /^floorctrl:(c-only|s-only|c-s)/,
+                            format: 'floorctrl:%s'
+                        },
+                        {
+                            // a=confid:1
+                            name: 'bfcpConfId',
+                            reg: /^confid:(\d+)/,
+                            format: 'confid:%s'
+                        },
+                        {
+                            // a=userid:1
+                            name: 'bfcpUserId',
+                            reg: /^userid:(\d+)/,
+                            format: 'userid:%s'
+                        },
+                        {
+                            // a=floorid:1
+                            name: 'bfcpFloorId',
+                            reg: /^floorid:(.+) (?:m-stream|mstrm):(.+)/,
+                            names: ['id', 'mStream'],
+                            format: 'floorid:%s mstrm:%s'
+                        },
+                        {
+                            // any a= that we don't understand is kept verbatim on media.invalid
+                            push: 'invalid',
+                            names: ['value']
+                        }
+                    ]
+                };
+
+// set sensible defaults to avoid polluting the grammar with boring details
+                Object.keys(grammar).forEach(function (key) {
+                    var objs = grammar[key];
+                    objs.forEach(function (obj) {
+                        if (!obj.reg) {
+                            obj.reg = /(.*)/;
+                        }
+                        if (!obj.format) {
+                            obj.format = '%s';
+                        }
+                    });
+                });
+
+
+                /***/
+            }),
+
+            /***/ 766:
+            /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+                var parser = __webpack_require__(962);
+                var writer = __webpack_require__(776);
+
+                exports.write = writer;
+                exports.parse = parser.parse;
+                exports.parseParams = parser.parseParams;
+                exports.parseFmtpConfig = parser.parseFmtpConfig; // Alias of parseParams().
+                exports.parsePayloads = parser.parsePayloads;
+                exports.parseRemoteCandidates = parser.parseRemoteCandidates;
+                exports.parseImageAttributes = parser.parseImageAttributes;
+                exports.parseSimulcastStreamList = parser.parseSimulcastStreamList;
+
+
+                /***/
+            }),
+
+            /***/ 962:
+            /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+                var toIntIfInt = function (v) {
+                    return String(Number(v)) === v ? Number(v) : v;
+                };
+
+                var attachProperties = function (match, location, names, rawName) {
+                    if (rawName && !names) {
+                        location[rawName] = toIntIfInt(match[1]);
+                    } else {
+                        for (var i = 0; i < names.length; i += 1) {
+                            if (match[i + 1] != null) {
+                                location[names[i]] = toIntIfInt(match[i + 1]);
+                            }
+                        }
+                    }
+                };
+
+                var parseReg = function (obj, location, content) {
+                    var needsBlank = obj.name && obj.names;
+                    if (obj.push && !location[obj.push]) {
+                        location[obj.push] = [];
+                    } else if (needsBlank && !location[obj.name]) {
+                        location[obj.name] = {};
+                    }
+                    var keyLocation = obj.push ?
+                        {} :  // blank object that will be pushed
+                        needsBlank ? location[obj.name] : location; // otherwise, named location or root
+
+                    attachProperties(content.match(obj.reg), keyLocation, obj.names, obj.name);
+
+                    if (obj.push) {
+                        location[obj.push].push(keyLocation);
+                    }
+                };
+
+                var grammar = __webpack_require__(692);
+                var validLine = RegExp.prototype.test.bind(/^([a-z])=(.*)/);
+
+                exports.parse = function (sdp) {
+                    var session = {}
+                        , media = []
+                        , location = session; // points at where properties go under (one of the above)
+
+                    // parse lines we understand
+                    sdp.split(/(\r\n|\r|\n)/).filter(validLine).forEach(function (l) {
+                        var type = l[0];
+                        var content = l.slice(2);
+                        if (type === 'm') {
+                            media.push({rtp: [], fmtp: []});
+                            location = media[media.length - 1]; // point at latest media line
+                        }
+
+                        for (var j = 0; j < (grammar[type] || []).length; j += 1) {
+                            var obj = grammar[type][j];
+                            if (obj.reg.test(content)) {
+                                return parseReg(obj, location, content);
+                            }
+                        }
+                    });
+
+                    session.media = media; // link it up
+                    return session;
+                };
+
+                var paramReducer = function (acc, expr) {
+                    var s = expr.split(/=(.+)/, 2);
+                    if (s.length === 2) {
+                        acc[s[0]] = toIntIfInt(s[1]);
+                    } else if (s.length === 1 && expr.length > 1) {
+                        acc[s[0]] = undefined;
+                    }
+                    return acc;
+                };
+
+                exports.parseParams = function (str) {
+                    return str.split(/;\s?/).reduce(paramReducer, {});
+                };
+
+// For backward compatibility - alias will be removed in 3.0.0
+                exports.parseFmtpConfig = exports.parseParams;
+
+                exports.parsePayloads = function (str) {
+                    return str.toString().split(' ').map(Number);
+                };
+
+                exports.parseRemoteCandidates = function (str) {
+                    var candidates = [];
+                    var parts = str.split(' ').map(toIntIfInt);
+                    for (var i = 0; i < parts.length; i += 3) {
+                        candidates.push({
+                            component: parts[i],
+                            ip: parts[i + 1],
+                            port: parts[i + 2]
+                        });
+                    }
+                    return candidates;
+                };
+
+                exports.parseImageAttributes = function (str) {
+                    return str.split(' ').map(function (item) {
+                        return item.substring(1, item.length - 1).split(',').reduce(paramReducer, {});
+                    });
+                };
+
+                exports.parseSimulcastStreamList = function (str) {
+                    return str.split(';').map(function (stream) {
+                        return stream.split(',').map(function (format) {
+                            var scid, paused = false;
+
+                            if (format[0] !== '~') {
+                                scid = toIntIfInt(format);
+                            } else {
+                                scid = toIntIfInt(format.substring(1, format.length));
+                                paused = true;
+                            }
+
+                            return {
+                                scid: scid,
+                                paused: paused
+                            };
+                        });
+                    });
+                };
+
+
+                /***/
+            }),
+
+            /***/ 776:
+            /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+                var grammar = __webpack_require__(692);
+
+// customized util.format - discards excess arguments and can void middle ones
+                var formatRegExp = /%[sdv%]/g;
+                var format = function (formatStr) {
+                    var i = 1;
+                    var args = arguments;
+                    var len = args.length;
+                    return formatStr.replace(formatRegExp, function (x) {
+                        if (i >= len) {
+                            return x; // missing argument
+                        }
+                        var arg = args[i];
+                        i += 1;
+                        switch (x) {
+                            case '%%':
+                                return '%';
+                            case '%s':
+                                return String(arg);
+                            case '%d':
+                                return Number(arg);
+                            case '%v':
+                                return '';
+                        }
+                    });
+                    // NB: we discard excess arguments - they are typically undefined from makeLine
+                };
+
+                var makeLine = function (type, obj, location) {
+                    var str = obj.format instanceof Function ?
+                        (obj.format(obj.push ? location : location[obj.name])) :
+                        obj.format;
+
+                    var args = [type + '=' + str];
+                    if (obj.names) {
+                        for (var i = 0; i < obj.names.length; i += 1) {
+                            var n = obj.names[i];
+                            if (obj.name) {
+                                args.push(location[obj.name][n]);
+                            } else { // for mLine and push attributes
+                                args.push(location[obj.names[i]]);
+                            }
+                        }
+                    } else {
+                        args.push(location[obj.name]);
+                    }
+                    return format.apply(null, args);
+                };
+
+// RFC specified order
+// TODO: extend this with all the rest
+                var defaultOuterOrder = [
+                    'v', 'o', 's', 'i',
+                    'u', 'e', 'p', 'c',
+                    'b', 't', 'r', 'z', 'a'
+                ];
+                var defaultInnerOrder = ['i', 'c', 'b', 'a'];
+
+
+                module.exports = function (session, opts) {
+                    opts = opts || {};
+                    // ensure certain properties exist
+                    if (session.version == null) {
+                        session.version = 0; // 'v=0' must be there (only defined version atm)
+                    }
+                    if (session.name == null) {
+                        session.name = ' '; // 's= ' must be there if no meaningful name set
+                    }
+                    session.media.forEach(function (mLine) {
+                        if (mLine.payloads == null) {
+                            mLine.payloads = '';
+                        }
+                    });
+
+                    var outerOrder = opts.outerOrder || defaultOuterOrder;
+                    var innerOrder = opts.innerOrder || defaultInnerOrder;
+                    var sdp = [];
+
+                    // loop through outerOrder for matching properties on session
+                    outerOrder.forEach(function (type) {
+                        grammar[type].forEach(function (obj) {
+                            if (obj.name in session && session[obj.name] != null) {
+                                sdp.push(makeLine(type, obj, session));
+                            } else if (obj.push in session && session[obj.push] != null) {
+                                session[obj.push].forEach(function (el) {
+                                    sdp.push(makeLine(type, obj, el));
+                                });
+                            }
+                        });
+                    });
+
+                    // then for each media line, follow the innerOrder
+                    session.media.forEach(function (mLine) {
+                        sdp.push(makeLine('m', grammar.m[0], mLine));
+
+                        innerOrder.forEach(function (type) {
+                            grammar[type].forEach(function (obj) {
+                                if (obj.name in mLine && mLine[obj.name] != null) {
+                                    sdp.push(makeLine(type, obj, mLine));
+                                } else if (obj.push in mLine && mLine[obj.push] != null) {
+                                    mLine[obj.push].forEach(function (el) {
+                                        sdp.push(makeLine(type, obj, el));
+                                    });
+                                }
+                            });
+                        });
+                    });
+
+                    return sdp.join('\r\n') + '\r\n';
+                };
+
+
+                /***/
+            }),
+
+            /***/ 781:
+            /***/ ((module) => {
+
+                "use strict";
+                module.exports = __WEBPACK_EXTERNAL_MODULE__781__;
+
+                /***/
+            }),
+
+            /***/ 173:
+            /***/ ((module) => {
+
+                "use strict";
+                module.exports = __WEBPACK_EXTERNAL_MODULE__173__;
+
+                /***/
+            })
+
+            /******/
+        });
+        /************************************************************************/
+        /******/ 	// The module cache
+        /******/
+        var __webpack_module_cache__ = {};
+        /******/
+        /******/ 	// The require function
+        /******/
+        function __webpack_require__(moduleId) {
+            /******/ 		// Check if module is in cache
+            /******/
+            var cachedModule = __webpack_module_cache__[moduleId];
+            /******/
+            if (cachedModule !== undefined) {
+                /******/
+                return cachedModule.exports;
+                /******/
+            }
+            /******/ 		// Create a new module (and put it into the cache)
+            /******/
+            var module = __webpack_module_cache__[moduleId] = {
+                /******/ 			// no module.id needed
+                /******/ 			// no module.loaded needed
+                /******/            exports: {}
+                /******/
+            };
+            /******/
+            /******/ 		// Execute the module function
+            /******/
+            __webpack_modules__[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+            /******/
+            /******/ 		// Return the exports of the module
+            /******/
+            return module.exports;
+            /******/
+        }
+
+        /******/
+        /************************************************************************/
+        /******/ 	/* webpack/runtime/define property getters */
+        /******/
+        (() => {
+            /******/ 		// define getter functions for harmony exports
+            /******/
+            __webpack_require__.d = (exports, definition) => {
+                /******/
+                for (var key in definition) {
+                    /******/
+                    if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
+                        /******/
+                        Object.defineProperty(exports, key, {enumerable: true, get: definition[key]});
+                        /******/
+                    }
+                    /******/
+                }
+                /******/
+            };
+            /******/
+        })();
+        /******/
+        /******/ 	/* webpack/runtime/hasOwnProperty shorthand */
+        /******/
+        (() => {
+            /******/
+            __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+            /******/
+        })();
+        /******/
+        /******/ 	/* webpack/runtime/make namespace object */
+        /******/
+        (() => {
+            /******/ 		// define __esModule on exports
+            /******/
+            __webpack_require__.r = (exports) => {
+                /******/
+                if (typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+                    /******/
+                    Object.defineProperty(exports, Symbol.toStringTag, {value: 'Module'});
+                    /******/
+                }
+                /******/
+                Object.defineProperty(exports, '__esModule', {value: true});
+                /******/
+            };
+            /******/
+        })();
+        /******/
+        /************************************************************************/
+        var __webpack_exports__ = {};
+// This entry need to be wrapped in an IIFE because it need to be in strict mode.
+        (() => {
+            "use strict";
+// ESM COMPAT FLAG
+            __webpack_require__.r(__webpack_exports__);
+
+// EXPORTS
+            __webpack_require__.d(__webpack_exports__, {
+                "ConferenceApi": () => (/* reexport */ ConferenceApi),
+                "Utils": () => (/* reexport */ Utils)
+            });
+
+// EXTERNAL MODULE: ./node_modules/events/events.js
+            var events = __webpack_require__(187);
+// EXTERNAL MODULE: ./node_modules/mediasoup-client/lib/index.js
+            var lib = __webpack_require__(960);
+// EXTERNAL MODULE: ./node_modules/debug/src/browser.js
+            var browser = __webpack_require__(227);
+// EXTERNAL MODULE: ../api/dist/index.js
+            var dist = __webpack_require__(826);
+            ;// CONCATENATED MODULE: ./src/conference-api.ts
+            var __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
+                function adopt(value) {
+                    return value instanceof P ? value : new P(function (resolve) {
+                        resolve(value);
+                    });
+                }
+
+                return new (P || (P = Promise))(function (resolve, reject) {
+                    function fulfilled(value) {
+                        try {
+                            step(generator.next(value));
+                        } catch (e) {
+                            reject(e);
+                        }
+                    }
+
+                    function rejected(value) {
+                        try {
+                            step(generator["throw"](value));
+                        } catch (e) {
+                            reject(e);
+                        }
+                    }
+
+                    function step(result) {
+                        result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+                    }
+
+                    step((generator = generator.apply(thisArg, _arguments || [])).next());
+                });
+            };
+
+
+            class ConferenceApi extends events.EventEmitter {
+                constructor(configs) {
+                    super();
+                    this.connectors = new Map();
+                    this.layers = new Map();
+                    this.availableKinds = [];
+                    this.configs = Object.assign({
+                        worker: 0, stopTracks: true, kinds: ['video', 'audio'], maxIncomingBitrate: 0, timeout: {
+                            stats: 1000,
+                            transport: 3000,
+                            consumer: 5000
+                        }
+                    }, configs);
+                    this.log = (0, browser.debug)(`conference-api [${this.configs.stream}]:`);
+                    this.createClient();
+                    this.device = new lib.Device();
+                }
+
+                setPreferredLayers(layers) {
+                    return __awaiter(this, void 0, void 0, function* () {
+                        if (this.operation === dist.API_OPERATION.SUBSCRIBE) {
+                            const kind = 'video';
+                            this.layers.set(kind, layers);
+                            const consumer = this.connectors.get(kind);
+                            if (consumer && typeof consumer !== 'number') {
+                                try {
+                                    yield this.api.setPreferredLayers({consumerId: consumer.id, layers});
+                                } catch (e) {
+                                }
+                            }
+                        }
+                    });
+                }
+
+                addTrack(track) {
+                    return __awaiter(this, void 0, void 0, function* () {
+                        this.log('addTrack', track);
+                        if (this.operation === dist.API_OPERATION.PUBLISH && this.mediaStream) {
+                            const kind = track.kind;
+                            if (!this.configs.kinds.includes(kind)) {
+                                this.configs.kinds.push(kind);
+                            }
+                            this.mediaStream.addTrack(track);
+                            this.emit("addtrack", new MediaStreamTrackEvent("addtrack", {track}));
+                            yield this.publishTrack(track);
+                        }
+                    });
+                }
+
+                removeTrack(track) {
+                    return __awaiter(this, void 0, void 0, function* () {
+                        this.log('removeTrack', track);
+                        if (this.operation === dist.API_OPERATION.PUBLISH && this.mediaStream) {
+                            this.mediaStream.removeTrack(track);
+                            this.emit("removetrack", new MediaStreamTrackEvent("removetrack", {track}));
+                            const producer = this.connectors.get(track.kind);
+                            if (producer && typeof producer !== 'number') {
+                                producer.close();
+                            }
+                        }
+                    });
+                }
+
+                setMaxPublisherBitrate(bitrate) {
+                    return __awaiter(this, void 0, void 0, function* () {
+                        this.configs.maxIncomingBitrate = bitrate;
+                        if (this.transport) {
+                            yield this.api.setMaxIncomingBitrate({transportId: this.transport.id, bitrate});
+                        }
+                    });
+                }
+
+                updateKinds(kinds) {
+                    return __awaiter(this, void 0, void 0, function* () {
+                        if (this.operation === dist.API_OPERATION.SUBSCRIBE) {
+                            this.log('updateKinds', kinds);
+                            const oldKinds = this.configs.kinds;
+                            this.configs.kinds = kinds;
+                            for (const kind of oldKinds) {
+                                if (!kinds.includes(kind)) {
+                                    this.unsubscribeTrack(kind);
+                                }
+                            }
+                            const promises = [];
+                            for (const kind of kinds) {
+                                if (!this.connectors.get(kind) && this.availableKinds.includes(kind)) {
+                                    promises.push(this.subscribeTrack(kind));
+                                }
+                            }
+                            yield Promise.all(promises);
+                        }
+                    });
+                }
+
+                destroyClient() {
+                    if (this.api) {
+                        this.api.clear();
+                    }
+                }
+
+                createClient() {
+                    this.api = new dist.MediasoupSocketApi(this.configs.url, this.configs.worker, this.configs.token, this.log);
+                    const api = this;
+                    this.api.client.on('disconnect', () => __awaiter(this, void 0, void 0, function* () {
+                        yield new Promise(resolve => setTimeout(resolve, 1000));
+                        yield api.restartAll();
+                    }));
+                }
+
+                init(operation) {
+                    return __awaiter(this, void 0, void 0, function* () {
+                        if (this.operation) {
+                            throw new Error("Already processing");
+                        }
+                        this.operation = operation;
+                        if (!this.device.loaded) {
+                            const {routerRtpCapabilities, iceServers, simulcast, timeout} = yield this.api.getServerConfigs();
+                            if (routerRtpCapabilities.headerExtensions) {
+                                routerRtpCapabilities.headerExtensions = routerRtpCapabilities.headerExtensions.filter((ext) => ext.uri !== 'urn:3gpp:video-orientation');
+                            }
+                            yield this.device.load({routerRtpCapabilities});
+                            this.iceServers = iceServers;
+                            this.simulcast = simulcast;
+                            this.configs.timeout = Object.assign(Object.assign({}, this.configs.timeout), timeout);
+                        }
+                        yield this.getTransport();
+                    });
+                }
+
+                publish(mediaStream) {
+                    return __awaiter(this, void 0, void 0, function* () {
+                        yield this.init(dist.API_OPERATION.PUBLISH);
+                        this.mediaStream = mediaStream;
+                        yield Promise.all(mediaStream.getTracks().map(track => this.publishTrack(track)));
+                        return mediaStream;
+                    });
+                }
+
+                subscribe() {
+                    return __awaiter(this, void 0, void 0, function* () {
+                        console.log('subscribe');
+                        yield this.init(dist.API_OPERATION.SUBSCRIBE);
+                        const mediaStream = this.mediaStream || new MediaStream();
+                        this.mediaStream = mediaStream;
+                        const {stream} = this.configs;
+                        const promises = [];
+                        this.api.client.on(dist.EVENT.STREAM_STARTED, ({stream, kind}) => __awaiter(this, void 0, void 0, function* () {
+                            if (!this.availableKinds.includes(kind)) {
+                                this.availableKinds.push(kind);
+                            }
+                            this.unsubscribeTrack(kind);
+                            console.log('on stream started', kind);
+                            if (this.configs.kinds.includes(kind)) {
+                                yield this.subscribeTrack(kind);
+                            }
+                        }));
+                        this.api.client.on(dist.EVENT.STREAM_STOPPED, ({stream, kind}) => __awaiter(this, void 0, void 0, function* () {
+                            if (this.availableKinds.includes(kind)) {
+                                this.availableKinds.splice(this.availableKinds.indexOf(kind), 1);
+                            }
+                            console.log('on stream stopped', kind);
+                            this.unsubscribeTrack(kind);
+                        }));
+                        let origin;
+                        if (this.configs.origin && (this.configs.url !== this.configs.origin.url || this.configs.worker !== this.configs.origin.worker)) {
+                            const {token, worker, url} = this.configs;
+                            origin = {
+                                target: {url, worker, token},
+                                source: {
+                                    url: this.configs.origin.url,
+                                    worker: this.configs.origin.worker,
+                                    token: this.configs.origin.token || token,
+                                }
+                            };
+                        }
+                        for (const kind of ['audio', 'video']) {
+                            promises.push(this.api.listenStreamStarted({stream, kind, origin}), this.api.listenStreamStopped({
+                                stream,
+                                kind
+                            }));
+                        }
+                        yield Promise.all(promises);
+                        return mediaStream;
+                    });
+                }
+
+                unsubscribeTrack(kind) {
+                    const connector = this.connectors.get(kind);
+                    if (connector) {
+                        if (typeof connector !== 'number') {
+                            connector.close();
+                        } else {
+                            this.connectors.delete(kind);
+                        }
+                    }
+                }
+
+                subscribeTrack(kind) {
+                    return __awaiter(this, void 0, void 0, function* () {
+                        const d = Math.random();
+                        console.log('new connector', d);
+                        this.connectors.set(kind, d);
+                        const {stream} = this.configs;
+                        const api = this;
+                        const rtpCapabilities = this.device.rtpCapabilities;
+                        try {
+                            if (!this.transport) {
+                                throw {errorId: dist.ERROR.INVALID_TRANSPORT};
+                            }
+                            const consumeData = {rtpCapabilities, stream, kind, transportId: this.transport.id};
+                            const data = yield this.api.consume(consumeData);
+                            const layers = this.layers.get(kind);
+                            if (layers) {
+                                try {
+                                    yield this.api.setPreferredLayers({consumerId: data.id, layers});
+                                } catch (e) {
+                                }
+                            }
+                            const consumer = yield this.transport.consume(data);
+                            consumer.observer.on('close', () => __awaiter(this, void 0, void 0, function* () {
+                                if (this.mediaStream) {
+                                    consumer.track.stop();
+                                    this.mediaStream.removeTrack(consumer.track);
+                                    this.emit("removetrack", new MediaStreamTrackEvent("removetrack", {track: consumer.track}));
+                                }
+                                if (this.transport && !this.transport.closed) {
+                                    const _consumer = this.connectors.get(kind);
+                                    try {
+                                        yield this.api.closeConsumer({consumerId: consumer.id});
+                                    } catch (e) {
+                                    }
+                                    if (_consumer && typeof _consumer !== 'number' && consumer.id === _consumer.id) {
+                                        this.connectors.delete(consumer.track.kind);
+                                    }
+                                }
+                            }));
+                            if (this.connectors.get(kind) === d && this.configs.kinds.includes(kind)) {
+                                this.connectors.set(kind, consumer);
+                                this.emit('newConsumerId', {id: consumer.id, kind});
+                                this.listenStats(consumer, 'inbound-rtp');
+                                yield api.api.resumeConsumer({consumerId: consumer.id});
+                                if (this.mediaStream) {
+                                    this.mediaStream.addTrack(consumer.track);
+                                    this.emit("addtrack", new MediaStreamTrackEvent("addtrack", {track: consumer.track}));
+                                }
+                            } else {
+                                console.log('wrong connector', this.connectors.get(kind));
+                                this.unsubscribeTrack(kind);
+                            }
+                        } catch (e) {
+                            if (e) {
+                                if (e.errorId === dist.ERROR.INVALID_STREAM) {
+                                } else if (e.errorId === dist.ERROR.INVALID_TRANSPORT || e.errorId === dist.ERROR.INVALID_CONSUMER) {
+                                    this.restartAll().then(() => {
+                                    }).catch(() => {
+                                    });
+                                } else {
+                                    throw e;
+                                }
+                            }
+                        }
+                    });
+                }
+
+                publishTrack(track) {
+                    return __awaiter(this, void 0, void 0, function* () {
+                        const kind = track.kind;
+                        if (this.configs.kinds.includes(kind)) {
+                            track.addEventListener('ended', () => __awaiter(this, void 0, void 0, function* () {
+                                yield this.removeTrack(track);
+                            }));
+                            const params = {track, stopTracks: false};
+                            if (this.configs.simulcast && kind === 'video' && this.simulcast) {
+                                if (this.simulcast.encodings) {
+                                    params.encodings = this.simulcast.encodings;
+                                }
+                                if (this.simulcast.codecOptions) {
+                                    params.codecOptions = this.simulcast.codecOptions;
+                                }
+                            }
+                            const producer = yield this.transport.produce(params);
+                            producer.observer.on('close', () => __awaiter(this, void 0, void 0, function* () {
+                                const producer = this.connectors.get(kind);
+                                if (producer && typeof producer !== 'number') {
+                                    this.connectors.delete(kind);
+                                    try {
+                                        yield this.api.closeProducer({producerId: producer.id});
+                                    } catch (e) {
+                                    }
+                                }
+                            }));
+                            this.listenStats(producer, 'outbound-rtp');
+                            this.connectors.set(kind, producer);
+                            this.emit('newProducerId', {id: producer.id, kind});
+                        }
+                    });
+                }
+
+                listenStats(target, type) {
+                    let lastBytes = 0;
+                    let lastBytesTime = Date.now();
+                    const bytesField = type === 'inbound-rtp' ? 'bytesReceived' : 'bytesSent';
+                    target.observer.on('close', () => {
+                        this.emit('bitRate', {bitRate: 0, kind: target.kind});
+                    });
+                    const getStats = () => {
+                        if (target && !target.closed) {
+                            target.getStats().then((stats) => __awaiter(this, void 0, void 0, function* () {
+                                if (target && !target.closed) {
+                                    if (stats['size']) {
+                                        stats.forEach((s) => {
+                                            if (s && s.type === type) {
+                                                if (s[bytesField] && s[bytesField] > lastBytes) {
+                                                    const bitRate = Math.round((s[bytesField] - lastBytes) / (Date.now() - lastBytesTime) * 1000 * 8);
+                                                    this.emit('bitRate', {bitRate, kind: target.kind});
+                                                    lastBytes = s[bytesField];
+                                                    lastBytesTime = Date.now();
+                                                }
+                                            }
+                                        });
+                                    } else {
+                                        this.emit('bitRate', {bitRate: 0, kind: target.kind});
+                                    }
+                                    setTimeout(getStats, this.configs.timeout.stats);
+                                }
+                            }));
+                        }
+                    };
+                    getStats();
+                }
+
+                close(hard = true) {
+                    return __awaiter(this, void 0, void 0, function* () {
+                        if (this.transport) {
+                            if (!this.transport.closed) {
+                                this.transport.close();
+                            }
+                            const transportId = this.transport.id;
+                            delete this.transport;
+                            try {
+                                yield this.api.closeTransport({transportId});
+                            } catch (e) {
+                            }
+                            this.emit('connectionstatechange', {state: 'disconnected'});
+                        }
+                        if ((hard || this.operation === dist.API_OPERATION.SUBSCRIBE) && this.mediaStream && this.configs.stopTracks) {
+                            console.log('stopping tracks');
+                            this.mediaStream.getTracks().forEach(function (track) {
+                                track.stop();
+                            });
+                        }
+                        yield this.closeConnectors();
+                        delete this.operation;
+                        if (hard && this.api) {
+                            this.api.clear();
+                        }
+                    });
+                }
+
+                closeConnectors() {
+                    return __awaiter(this, void 0, void 0, function* () {
+                        if (this.connectors.size) {
+                            yield new Promise(resolve => {
+                                this.connectors.forEach((connector, kind) => {
+                                    this.connectors.delete(kind);
+                                    try {
+                                        if (connector && typeof connector !== 'number') {
+                                            connector.close();
+                                        }
+                                    } catch (e) {
+                                    }
+                                    if (!this.connectors.size) {
+                                        resolve(null);
+                                    }
+                                });
+                            });
+                        }
+                    });
+                }
+
+                restartAll() {
+                    return __awaiter(this, void 0, void 0, function* () {
+                        const operation = this.operation;
+                        this.destroyClient();
+                        yield this.close(false);
+                        this.createClient();
+                        if (operation === dist.API_OPERATION.SUBSCRIBE) {
+                            yield this.subscribe();
+                        } else if (operation === dist.API_OPERATION.PUBLISH && this.mediaStream) {
+                            yield this.publish(this.mediaStream);
+                        }
+                    });
+                }
+
+                getTransport() {
+                    return __awaiter(this, void 0, void 0, function* () {
+                        if (!this.transport) {
+                            const api = this;
+                            const data = yield this.api.createTransport();
+                            if (this.iceServers) {
+                                data.iceServers = this.iceServers;
+                            }
+                            if (this.operation === dist.API_OPERATION.SUBSCRIBE) {
+                                this.transport = this.device.createRecvTransport(data);
+                            } else if (this.operation === dist.API_OPERATION.PUBLISH) {
+                                this.transport = this.device.createSendTransport(data);
+                            }
+                            this.emit('newTransportId', {id: this.transport.id});
+                            if (this.configs.maxIncomingBitrate) {
+                                yield this.api.setMaxIncomingBitrate({
+                                    transportId: this.transport.id,
+                                    bitrate: this.configs.maxIncomingBitrate
+                                });
+                            }
+                            this.transport.on('connect', ({dtlsParameters}, callback, errback) => {
+                                api.api.connectTransport({
+                                    transportId: this.transport.id,
+                                    dtlsParameters
+                                }).then(callback).catch(errback);
+                            });
+                            if (this.operation === dist.API_OPERATION.PUBLISH) {
+                                this.transport.on('produce', ({
+                                                                  kind,
+                                                                  rtpParameters
+                                                              }, callback, errback) => __awaiter(this, void 0, void 0, function* () {
+                                    try {
+                                        const data = yield api.api.produce({
+                                            transportId: this.transport.id,
+                                            stream: api.configs.stream,
+                                            kind,
+                                            rtpParameters,
+                                            keyFrameRequestDelay: api.configs.keyFrameRequestDelay
+                                        });
+                                        callback(data);
+                                    } catch (err) {
+                                        errback(err);
+                                    }
+                                }));
+                            }
+                            this.transport.on('connectionstatechange', (state) => __awaiter(this, void 0, void 0, function* () {
+                                this.emit('connectionstatechange', {state});
+                                switch (state) {
+                                    case 'connected':
+                                        if (this.transportTimeout) {
+                                            clearTimeout(this.transportTimeout);
+                                        }
+                                        break;
+                                    case 'failed':
+                                    case 'disconnected':
+                                        break;
+                                }
+                            }));
+                        }
+                        return this.transport;
+                    });
+                }
+            }
+
+            ;// CONCATENATED MODULE: ./src/utils.ts
+            var utils_awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
+                function adopt(value) {
+                    return value instanceof P ? value : new P(function (resolve) {
+                        resolve(value);
+                    });
+                }
+
+                return new (P || (P = Promise))(function (resolve, reject) {
+                    function fulfilled(value) {
+                        try {
+                            step(generator.next(value));
+                        } catch (e) {
+                            reject(e);
+                        }
+                    }
+
+                    function rejected(value) {
+                        try {
+                            step(generator["throw"](value));
+                        } catch (e) {
+                            reject(e);
+                        }
+                    }
+
+                    function step(result) {
+                        result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+                    }
+
+                    step((generator = generator.apply(thisArg, _arguments || [])).next());
+                });
+            };
+
+            class Utils {
+                static getUserMedia(constraints, isDisplay = false) {
+                    return utils_awaiter(this, void 0, void 0, function* () {
+                        if (isDisplay) {
+                            return yield navigator.mediaDevices.getDisplayMedia(constraints);
+                        } else {
+                            return yield navigator.mediaDevices.getUserMedia(constraints);
+                        }
+                    });
+                }
+            }
+
+            Utils.isFirefox = typeof window.InstallTrigger !== 'undefined';
+            Utils.isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
+            Utils.isChrome = !!window.chrome && !Utils.isOpera;
+            Utils.isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+
+            ;// CONCATENATED MODULE: ./src/index.ts
+
+
+        })();
+
+        /******/
+        return __webpack_exports__;
+        /******/
+    })()
+        ;
+});
diff --git a/teamapps-client/ts/modules/webrtc/mediasoup-v3/lib/avcore.client/utils.d.ts b/teamapps-client/ts/modules/webrtc/mediasoup-v3/lib/avcore.client/utils.d.ts
new file mode 100644
index 000000000..ea98ab1f4
--- /dev/null
+++ b/teamapps-client/ts/modules/webrtc/mediasoup-v3/lib/avcore.client/utils.d.ts
@@ -0,0 +1,27 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+export declare class Utils {
+	static getUserMedia(constraints: MediaStreamConstraints, isDisplay?: boolean): Promise<MediaStream>;
+
+	static isFirefox: boolean;
+	static isOpera: boolean;
+	static isChrome: boolean;
+	static isSafari: boolean;
+}
diff --git a/teamapps-client/ts/modules/webrtc/mediasoup-v3/lib/avcore/client-interfaces.d.ts b/teamapps-client/ts/modules/webrtc/mediasoup-v3/lib/avcore/client-interfaces.d.ts
new file mode 100644
index 000000000..9d97f570f
--- /dev/null
+++ b/teamapps-client/ts/modules/webrtc/mediasoup-v3/lib/avcore/client-interfaces.d.ts
@@ -0,0 +1,381 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+import {MediaKind, RtpCapabilities, RtpEncodingParameters, RtpParameters} from 'mediasoup-client/lib/RtpParameters';
+import {ProducerCodecOptions} from 'mediasoup-client/lib/Producer';
+import {DtlsParameters} from 'mediasoup-client/lib/Transport';
+import {MIXER_PIPE_TYPE, MIXER_RENDER_TYPE} from './constants';
+
+export declare type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
+
+export interface ConsumerData {
+	consumerId: string;
+}
+
+export interface ConsumerPreferredLayers extends ConsumerData {
+	layers: ConsumerLayers;
+}
+
+export interface ConsumerLayers {
+	spatialLayer: number;
+	temporalLayer?: number;
+}
+
+export interface ProducerData {
+	producerId: string;
+}
+
+export interface ProduceRequest extends StreamKindData {
+	transportId: string;
+	rtpParameters: RtpParameters;
+	paused?: boolean;
+	keyFrameRequestDelay?: number;
+	appData?: any;
+}
+
+export interface ProduceResponse {
+	id: string;
+}
+
+export interface ConsumeResponse {
+	producerId: string;
+	id: string;
+	kind: MediaKind;
+	rtpParameters: RtpParameters;
+	type: string;
+	producerPaused: boolean;
+}
+
+export interface ConsumeRequestOriginDataServer extends ConferenceInputOrigin {
+	token: string;
+}
+
+export interface ConsumeRequestOriginData {
+	source: ConsumeRequestOriginDataServer;
+	target: ConsumeRequestOriginDataServer;
+}
+
+export interface ConsumeRequest extends StreamKindData {
+	rtpCapabilities: RtpCapabilities;
+	transportId: string;
+}
+
+export interface PipeToRemoteProducerRequest extends StreamKindData {
+	origin: ConsumeRequestOriginData;
+	sameHost: boolean;
+}
+
+export interface PipeFromRemoteProducerRequest extends ProducerData, StreamKindData {
+	workerId: number;
+}
+
+export interface PipeTransportData {
+	pipeTransportId: string;
+	ip: string;
+	port: number;
+}
+
+export interface PipeTransportConnectData extends PipeTransportData {
+	transportId: string;
+}
+
+export interface WorkerLoadData {
+	currentLoad: number;
+}
+
+export interface NumWorkersData {
+	num: number;
+}
+
+export interface StatsInput {
+	ids: string[];
+}
+
+export interface StatsOutput {
+	[x: string]: {};
+}
+
+export interface TransportData {
+	transportId: string;
+}
+
+export interface TransportBitrateData extends TransportData {
+	bitrate: number;
+}
+
+export interface IceSever {
+	urls: string[];
+	username?: string;
+	credential?: string;
+}
+
+export interface Simulcast {
+	encodings?: RtpEncodingParameters[];
+	codecOptions?: ProducerCodecOptions;
+}
+
+export interface ServerConfigs {
+	routerRtpCapabilities: RtpCapabilities;
+	iceServers?: IceSever[];
+	simulcast?: Simulcast;
+	timeout?: {
+		stats: number;
+		transport: number;
+		consumer: number;
+	};
+}
+
+export interface ConnectTransportRequest extends TransportData {
+	transportId: string;
+	dtlsParameters: DtlsParameters;
+}
+
+export interface RecordingData extends StreamKindsData {
+}
+
+export interface RecordingRequest extends StreamKindsData {
+	layer?: number;
+	origin?: ConsumeRequestOriginData;
+}
+
+export interface KindsOptionsData extends SizeData {
+	kinds: MediaKind[];
+}
+
+export interface SizeData {
+	width?: number;
+	height?: number;
+}
+
+export interface KindsData {
+	kinds?: MediaKind[];
+}
+
+export interface StreamKindsData extends StreamData {
+	kinds?: MediaKind[];
+}
+
+export interface StreamKindData extends StreamData {
+	kind: MediaKind;
+}
+
+export interface StreamListenData extends StreamKindData {
+	origin?: ConsumeRequestOriginData;
+}
+
+export interface StreamData {
+	stream: string;
+}
+
+export interface StreamFileRequest extends StreamKindsData, KindsByFileInput, StreamingOptions, PushSimulcastInput {
+	restartOnExit?: boolean;
+	additionalInputOptions?: string[];
+}
+
+export interface LiveStreamRequest extends StreamKindsData, StreamingOptions, PushSimulcastInput {
+	url: string;
+	restartOnExit?: boolean;
+}
+
+export interface BitrateOptions {
+	videoBitrate?: string;
+}
+
+export interface MixerCreateOptions extends SizeData {
+	frameRate?: number;
+	audioSampleRate?: number;
+	audioChannels?: number;
+}
+
+export interface StreamingOptions extends BitrateOptions, MixerCreateOptions {
+}
+
+export interface KindsByFileInput {
+	filePath: string;
+	relativePath?: boolean;
+}
+
+export interface PushStreamInputsResponse {
+	options: string[];
+}
+
+export interface PushStreamInputsRequest extends PullStreamInputsRequest, PushStreamInputsResponse {
+}
+
+export interface PushStreamOptionsResponse {
+	portsData: {
+		[kind in MediaKind]?: PortData;
+	};
+	listenIp: string;
+}
+
+export interface PortData {
+	payloadType: number;
+	ssrcs: number[];
+	rtpPort: number;
+	rtcpPort: number;
+	bindRtpPort?: number;
+	bindRtcpPort?: number;
+}
+
+export interface PushSimulcastInput {
+	simulcast?: SizeData[];
+}
+
+export interface PushStreamOptionsRequest extends PullStreamInputsRequest, PushSimulcastInput {
+	bindPorts?: boolean;
+}
+
+export interface PushStreamRequest extends StreamKindsData {
+	options: string[];
+	restartOnExit?: boolean;
+	app?: string;
+	stdIn?: string;
+}
+
+export interface TransportListenIp {
+	ip: string;
+	announcedIp?: string;
+}
+
+export interface PullStreamInputsRequest extends StreamKindsData {
+	listenIp?: TransportListenIp | string;
+	layer?: number;
+}
+
+export interface PullStreamInputsResponse {
+	sdp: string;
+	consumerIds: {
+		[id: string]: string;
+	};
+}
+
+export interface ConferenceServer {
+	url: string;
+	worker: number;
+}
+
+export interface ConferenceInputOrigin extends ConferenceServer {
+	token?: string;
+}
+
+export interface ConferenceInput {
+	stopTracks?: boolean;
+	worker?: number;
+	url: string;
+	origin?: ConferenceInputOrigin;
+	stream: string;
+	token: string;
+	simulcast?: boolean;
+	kinds?: MediaKind[];
+	maxIncomingBitrate?: number;
+	keyFrameRequestDelay?: number;
+}
+
+export interface ConferenceConfigTimeout {
+	stats: number;
+	transport: number;
+	consumer: number;
+}
+
+export interface ConferenceConfig extends ConferenceInput {
+	worker: number;
+	kinds: MediaKind[];
+	maxIncomingBitrate: number;
+	timeout: ConferenceConfigTimeout;
+}
+
+export interface ListData {
+	list: string[];
+}
+
+export interface FilePathInput {
+	filePath: string;
+}
+
+export interface MixerInput {
+	mixerId: string;
+}
+
+export interface MixerOptions {
+	x: number;
+	y: number;
+	width: number;
+	height: number;
+	z: number;
+	renderType?: MIXER_RENDER_TYPE;
+}
+
+export interface MixerUpdateData extends MixerInput, StreamData {
+	options: MixerOptions;
+}
+
+export interface MixerAddVideoData extends MixerUpdateData {
+	kind: 'video';
+}
+
+export interface MixerAddAudioData extends MixerInput, StreamData {
+	kind: 'audio';
+}
+
+export interface MixerRemoveData extends MixerInput, StreamKindData {
+}
+
+export interface MixerPipeData extends MixerInput, KindsData {
+}
+
+export interface MixerHlsFormatOptions extends SizeData {
+	videoBitrate: number;
+}
+
+export interface MixerPipeLiveData extends MixerPipeData, StreamData, PushSimulcastInput {
+	type: MIXER_PIPE_TYPE.LIVE;
+}
+
+export interface MixerPipeRecordingData extends MixerPipeData {
+	type: MIXER_PIPE_TYPE.RECORDING;
+}
+
+export interface HlsData {
+	formats?: MixerHlsFormatOptions[];
+	numChunks?: number;
+	chunkDuration?: number;
+}
+
+export interface MixerPipeHlsData extends MixerPipeData, HlsData {
+	type: MIXER_PIPE_TYPE.HLS;
+	formats: MixerHlsFormatOptions[];
+}
+
+export interface MixerPipeRtmpData extends MixerPipeData {
+	type: MIXER_PIPE_TYPE.RTMP;
+	url: string;
+}
+
+export interface MixerPipeInput {
+	pipeId: string;
+}
+
+export interface MixerPipeStopInput extends MixerPipeInput, MixerInput {
+}
+
+export interface LiveToHlsRequest extends StreamKindsData, HlsData {
+	url: string;
+	restartOnExit?: boolean;
+}
diff --git a/teamapps-client/ts/modules/webrtc/mediasoup-v3/lib/avcore/constants.d.ts b/teamapps-client/ts/modules/webrtc/mediasoup-v3/lib/avcore/constants.d.ts
new file mode 100644
index 000000000..c3e999217
--- /dev/null
+++ b/teamapps-client/ts/modules/webrtc/mediasoup-v3/lib/avcore/constants.d.ts
@@ -0,0 +1,134 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+export declare enum ACTION {
+	GET_SERVER_CONFIGS = "getServerConfigs",
+	CREATE_TRANSPORT = "createTransport",
+	CONNECT_TRANSPORT = "connectTransport",
+	CLOSE_TRANSPORT = "closeTransport",
+	PRODUCE = "produce",
+	CONSUME = "consume",
+	RESUME_CONSUMER = "resumeConsumer",
+	PAUSE_CONSUMER = "pauseConsumer",
+	CLOSE_CONSUMER = "closeConsumer",
+	RESUME_PRODUCER = "resumeProducer",
+	PAUSE_PRODUCER = "pauseProducer",
+	CLOSE_PRODUCER = "closeProducer",
+	FILE_STREAMING = "fileStreaming",
+	LIVE_STREAMING = "liveStreaming",
+	LIVE_TO_HLS = "liveToHls",
+	STOP_FILE_STREAMING = "stopFileStreaming",
+	START_RECORDING = "startRecording",
+	STOP_RECORDING = "stopRecording",
+	CREATE_PIPE_TRANSPORT = "createPipeTransport",
+	CONNECT_PIPE_TRANSPORT = "connectPipeTransport",
+	SET_PREFERRED_LAYERS = "setPreferredLayers",
+	SET_MAX_INCOMING_BITRATE = "setMaxIncomingBitrate",
+	PRODUCERS_STATS = "producersStats",
+	CONSUMERS_STATS = "consumersStats",
+	TRANSPORT_STATS = "transportStats",
+	PIPE_TO_REMOTE_PRODUCER = "pipeToRemoteProducer",
+	PIPE_FROM_REMOTE_PRODUCER = "pipeFromRemoteProducer",
+	WORKER_LOAD = "workerLoad",
+	NUM_WORKERS = "numWorkers",
+	RECORDED_STREAMS = "recordedStreams",
+	STREAM_RECORDINGS = "streamRecordings",
+	DELETE_STREAM_RECORDINGS = "deleteStreamRecordings",
+	DELETE_RECORDING = "deleteRecording",
+	PUSH_TO_SERVER_INPUTS = "pushToServerInputs",
+	PULL_FROM_SERVER_INPUTS = "pullFromServerInputs",
+	PUSH_TO_SERVER_OPTIONS = "pushToServerOptions",
+	PUSH_TO_SERVER = "pushToServer",
+	KINDS_BY_FILE = "kindsByFile",
+	REQUEST_KEYFRAME = "requestKeyframe",
+	LISTEN_STREAM_STARTED = "listenStreamStarted",
+	LISTEN_STREAM_STOPPED = "listenStreamStopped",
+	MIXER_START = "mixerStart",
+	MIXER_CLOSE = "mixerClose",
+	MIXER_ADD = "mixerAdd",
+	MIXER_REMOVE = "mixerRemove",
+	MIXER_UPDATE = "mixerUpdate",
+	MIXER_PIPE_START = "mixerPipeStart",
+	MIXER_PIPE_STOP = "mixerPipeStop",
+	LISTEN_MIXER_STOPPED = "listenMixerStopped"
+}
+
+export declare const SOCKET_ONLY_ACTIONS: ACTION[];
+export declare const REST_ACTIONS: ACTION[];
+
+export declare enum EVENT {
+	STREAM_STARTED = "streamStarted",
+	STREAM_STOPPED = "streamStopped",
+	MIXER_STOPPED = "mixerStopped"
+}
+
+export declare enum STAT {
+	STATS = "stats",
+	TRAFFIC = "traffic",
+	CPU = "cpu"
+}
+
+export declare const HLS: {
+	ROOT: string;
+	PLAYLIST: string;
+};
+
+export declare enum PATH {
+	API = "api"
+}
+
+export declare const NEXMO: {
+	PATH: string;
+	AUDIO_SAMPLE_RATE: number;
+	AUDIO_CHANNELS: number;
+};
+
+export declare enum ERROR {
+	UNKNOWN = 500,
+	UNAUTHORIZED = 401,
+	INVALID_TRANSPORT = 530,
+	INVALID_PRODUCER = 531,
+	INVALID_CONSUMER = 532,
+	INVALID_STREAM = 533,
+	INVALID_OPERATION = 534,
+	INVALID_WORKER = 535,
+	INVALID_INPUT = 536,
+	INVALID_ACTION = 537
+}
+
+export declare enum API_OPERATION {
+	SUBSCRIBE = 0,
+	PUBLISH = 1,
+	RECORDING = 2,
+	STREAMING = 3,
+	MIXER = 4
+}
+
+export declare enum MIXER_PIPE_TYPE {
+	LIVE = 0,
+	RECORDING = 1,
+	RTMP = 2,
+	HLS = 3
+}
+
+export declare enum MIXER_RENDER_TYPE {
+	SCALE = "scale",
+	CROP = "crop",
+	PAD = "pad"
+}
diff --git a/teamapps-client/ts/modules/webrtc/mediasoup-v3/lib/avcore/i-mediasoup-api.d.ts b/teamapps-client/ts/modules/webrtc/mediasoup-v3/lib/avcore/i-mediasoup-api.d.ts
new file mode 100644
index 000000000..49b7f1fc7
--- /dev/null
+++ b/teamapps-client/ts/modules/webrtc/mediasoup-v3/lib/avcore/i-mediasoup-api.d.ts
@@ -0,0 +1,188 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+import {TransportOptions} from 'mediasoup-client/lib/Transport';
+import {ACTION, EVENT} from './constants';
+import {
+	ConnectTransportRequest,
+	ConsumerData,
+	ConsumeRequest,
+	ConsumeResponse,
+	ConsumerPreferredLayers,
+	NumWorkersData,
+	PipeFromRemoteProducerRequest,
+	PipeToRemoteProducerRequest,
+	PipeTransportConnectData,
+	PipeTransportData,
+	ProducerData,
+	ProduceRequest,
+	ProduceResponse,
+	ServerConfigs,
+	RecordingData,
+	StatsInput,
+	StatsOutput,
+	StreamFileRequest,
+	TransportBitrateData,
+	TransportData,
+	WorkerLoadData,
+	ListData,
+	StreamData,
+	FilePathInput,
+	PullStreamInputsRequest,
+	PushStreamInputsRequest,
+	PullStreamInputsResponse,
+	PushStreamInputsResponse,
+	RecordingRequest,
+	StreamKindsData,
+	KindsByFileInput,
+	KindsOptionsData,
+	PushStreamOptionsResponse,
+	PushStreamOptionsRequest,
+	PushStreamRequest,
+	LiveStreamRequest,
+	StreamKindData,
+	StreamListenData,
+	MixerInput,
+	MixerAddAudioData,
+	MixerAddVideoData,
+	MixerUpdateData,
+	MixerRemoveData,
+	MixerPipeLiveData,
+	MixerPipeRecordingData,
+	MixerPipeRtmpData,
+	MixerPipeInput,
+	MixerPipeStopInput,
+	MixerCreateOptions,
+	MixerPipeHlsData,
+	LiveToHlsRequest
+} from './client-interfaces';
+
+export interface IMediasoupApiClient {
+	on(event: 'error', listener: (error: any) => void): this;
+
+	on(event: 'connect', listener: (data: any) => void): this;
+
+	on(event: 'disconnect', listener: (data: any) => void): this;
+
+	on(event: EVENT.STREAM_STARTED, listener: (json: StreamKindData) => void): this;
+
+	on(event: EVENT.STREAM_STOPPED, listener: (json: StreamKindData) => void): this;
+
+	on(event: EVENT.MIXER_STOPPED, listener: (json: MixerInput) => void): this;
+}
+
+export interface IMediasoupApi extends Record<ACTION, (json: {}) => Promise<{} | void>> {
+	readonly client: IMediasoupApiClient;
+
+	[ACTION.RESUME_CONSUMER](json: ConsumerData): Promise<void>;
+
+	[ACTION.PAUSE_CONSUMER](json: ConsumerData): Promise<void>;
+
+	[ACTION.SET_PREFERRED_LAYERS](json: ConsumerPreferredLayers): Promise<void>;
+
+	[ACTION.RESUME_PRODUCER](json: ProducerData): Promise<void>;
+
+	[ACTION.PAUSE_PRODUCER](json: ProducerData): Promise<void>;
+
+	[ACTION.CLOSE_PRODUCER](json: ProducerData): Promise<void>;
+
+	[ACTION.PRODUCE](json: ProduceRequest): Promise<ProduceResponse>;
+
+	[ACTION.CONSUME](json: ConsumeRequest): Promise<ConsumeResponse>;
+
+	[ACTION.CREATE_PIPE_TRANSPORT](): Promise<PipeTransportData>;
+
+	[ACTION.CONNECT_PIPE_TRANSPORT](json: PipeTransportConnectData): Promise<void>;
+
+	[ACTION.CLOSE_TRANSPORT](json: TransportData): Promise<void>;
+
+	[ACTION.GET_SERVER_CONFIGS](): Promise<ServerConfigs>;
+
+	[ACTION.CREATE_TRANSPORT](): Promise<TransportOptions>;
+
+	[ACTION.CONNECT_TRANSPORT](json: ConnectTransportRequest): Promise<void>;
+
+	[ACTION.FILE_STREAMING](json: StreamFileRequest): Promise<void>;
+
+	[ACTION.LIVE_STREAMING](json: LiveStreamRequest): Promise<void>;
+
+	[ACTION.LIVE_TO_HLS](json: LiveToHlsRequest): Promise<void>;
+
+	[ACTION.STOP_FILE_STREAMING](json: StreamKindsData): Promise<void>;
+
+	[ACTION.START_RECORDING](json: RecordingRequest): Promise<void>;
+
+	[ACTION.STOP_RECORDING](json: RecordingData): Promise<void>;
+
+	[ACTION.SET_MAX_INCOMING_BITRATE](json: TransportBitrateData): Promise<void>;
+
+	[ACTION.TRANSPORT_STATS](json: StatsInput): Promise<StatsOutput>;
+
+	[ACTION.CONSUMERS_STATS](json: StatsInput): Promise<StatsOutput>;
+
+	[ACTION.PRODUCERS_STATS](json: StatsInput): Promise<StatsOutput>;
+
+	[ACTION.PIPE_TO_REMOTE_PRODUCER](json: PipeToRemoteProducerRequest): Promise<void>;
+
+	[ACTION.PIPE_FROM_REMOTE_PRODUCER](json: PipeFromRemoteProducerRequest): Promise<void>;
+
+	[ACTION.WORKER_LOAD](): Promise<WorkerLoadData>;
+
+	[ACTION.NUM_WORKERS](): Promise<NumWorkersData>;
+
+	[ACTION.RECORDED_STREAMS](): Promise<ListData>;
+
+	[ACTION.STREAM_RECORDINGS](json: StreamData): Promise<ListData>;
+
+	[ACTION.DELETE_STREAM_RECORDINGS](json: StreamData): Promise<void>;
+
+	[ACTION.DELETE_RECORDING](json: FilePathInput): Promise<void>;
+
+	[ACTION.PUSH_TO_SERVER_INPUTS](json: PushStreamInputsRequest): Promise<PushStreamInputsResponse>;
+
+	[ACTION.PUSH_TO_SERVER_OPTIONS](json: PushStreamOptionsRequest): Promise<PushStreamOptionsResponse>;
+
+	[ACTION.PUSH_TO_SERVER](json: PushStreamRequest): Promise<void>;
+
+	[ACTION.PULL_FROM_SERVER_INPUTS](json: PullStreamInputsRequest): Promise<PullStreamInputsResponse>;
+
+	[ACTION.KINDS_BY_FILE](json: KindsByFileInput): Promise<KindsOptionsData>;
+
+	[ACTION.REQUEST_KEYFRAME](json: ConsumerData): Promise<void>;
+
+	[ACTION.LISTEN_STREAM_STARTED](json: StreamListenData): Promise<boolean>;
+
+	[ACTION.LISTEN_STREAM_STOPPED](json: StreamKindData): Promise<boolean>;
+
+	[ACTION.MIXER_START](json: MixerCreateOptions): Promise<MixerInput>;
+
+	[ACTION.MIXER_CLOSE](json: MixerInput): Promise<void>;
+
+	[ACTION.MIXER_ADD](json: MixerAddAudioData | MixerAddVideoData): Promise<void>;
+
+	[ACTION.MIXER_UPDATE](json: MixerUpdateData): Promise<void>;
+
+	[ACTION.MIXER_REMOVE](json: MixerRemoveData): Promise<void>;
+
+	[ACTION.MIXER_PIPE_START](json: MixerPipeLiveData | MixerPipeRecordingData | MixerPipeRtmpData | MixerPipeHlsData): Promise<MixerPipeInput>;
+
+	[ACTION.MIXER_PIPE_STOP](json: MixerPipeStopInput): Promise<void>;
+
+	[ACTION.LISTEN_MIXER_STOPPED](json: MixerInput): Promise<boolean>;
+}
diff --git a/teamapps-client/ts/test/Common_adjustIfColorTooBright_Test.ts b/teamapps-client/ts/modules/webrtc/mediasoup-v3/lib/avcore/index.d.ts
similarity index 67%
rename from teamapps-client/ts/test/Common_adjustIfColorTooBright_Test.ts
rename to teamapps-client/ts/modules/webrtc/mediasoup-v3/lib/avcore/index.d.ts
index 1e837753e..62cace109 100644
--- a/teamapps-client/ts/test/Common_adjustIfColorTooBright_Test.ts
+++ b/teamapps-client/ts/modules/webrtc/mediasoup-v3/lib/avcore/index.d.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,15 +17,9 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-describe('hexColorStringToRgb', function () {
-
-    it('converts', function () {
-        expect(hexColorStringToRgb("#fff")).toEqual({
-            r: 255,
-            g: 255,
-            b: 255
-        });
-    });
-
-});
-
+export {
+	ERROR, ACTION, API_OPERATION, EVENT, STAT, MIXER_PIPE_TYPE, NEXMO, HLS, PATH, SOCKET_ONLY_ACTIONS, REST_ACTIONS, MIXER_RENDER_TYPE
+} from './constants';
+export {IMediasoupApi, IMediasoupApiClient} from './i-mediasoup-api';
+export * from './client-interfaces';
+export * from './mediasoup-socket-api';
diff --git a/teamapps-client/ts/modules/webrtc/mediasoup-v3/lib/avcore/index.js b/teamapps-client/ts/modules/webrtc/mediasoup-v3/lib/avcore/index.js
new file mode 100644
index 000000000..638c5c12a
--- /dev/null
+++ b/teamapps-client/ts/modules/webrtc/mediasoup-v3/lib/avcore/index.js
@@ -0,0 +1,758 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+(function webpackUniversalModuleDefinition(root, factory) {
+    if (typeof exports === 'object' && typeof module === 'object')
+        module.exports = factory(require("socket.io-client"), require("axios"));
+    else if (typeof define === 'function' && define.amd)
+        define(["socket.io-client", "axios"], factory);
+    else if (typeof exports === 'object')
+        exports["avcore"] = factory(require("socket.io-client"), require("axios"));
+    else
+        root["avcore"] = factory(root["io"], root["axios"]);
+})(this, (__WEBPACK_EXTERNAL_MODULE__173__, __WEBPACK_EXTERNAL_MODULE__781__) => {
+    return /******/ (() => { // webpackBootstrap
+        /******/
+        "use strict";
+        /******/
+        var __webpack_modules__ = ({
+
+            /***/ 781:
+            /***/ ((module) => {
+
+                module.exports = __WEBPACK_EXTERNAL_MODULE__781__;
+
+                /***/
+            }),
+
+            /***/ 173:
+            /***/ ((module) => {
+
+                module.exports = __WEBPACK_EXTERNAL_MODULE__173__;
+
+                /***/
+            })
+
+            /******/
+        });
+        /************************************************************************/
+        /******/ 	// The module cache
+        /******/
+        var __webpack_module_cache__ = {};
+        /******/
+        /******/ 	// The require function
+        /******/
+        function __webpack_require__(moduleId) {
+            /******/ 		// Check if module is in cache
+            /******/
+            var cachedModule = __webpack_module_cache__[moduleId];
+            /******/
+            if (cachedModule !== undefined) {
+                /******/
+                return cachedModule.exports;
+                /******/
+            }
+            /******/ 		// Create a new module (and put it into the cache)
+            /******/
+            var module = __webpack_module_cache__[moduleId] = {
+                /******/ 			// no module.id needed
+                /******/ 			// no module.loaded needed
+                /******/            exports: {}
+                /******/
+            };
+            /******/
+            /******/ 		// Execute the module function
+            /******/
+            __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+            /******/
+            /******/ 		// Return the exports of the module
+            /******/
+            return module.exports;
+            /******/
+        }
+
+        /******/
+        /************************************************************************/
+        /******/ 	/* webpack/runtime/compat get default export */
+        /******/
+        (() => {
+            /******/ 		// getDefaultExport function for compatibility with non-harmony modules
+            /******/
+            __webpack_require__.n = (module) => {
+                /******/
+                var getter = module && module.__esModule ?
+                    /******/                () => (module['default']) :
+                    /******/                () => (module);
+                /******/
+                __webpack_require__.d(getter, {a: getter});
+                /******/
+                return getter;
+                /******/
+            };
+            /******/
+        })();
+        /******/
+        /******/ 	/* webpack/runtime/define property getters */
+        /******/
+        (() => {
+            /******/ 		// define getter functions for harmony exports
+            /******/
+            __webpack_require__.d = (exports, definition) => {
+                /******/
+                for (var key in definition) {
+                    /******/
+                    if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
+                        /******/
+                        Object.defineProperty(exports, key, {enumerable: true, get: definition[key]});
+                        /******/
+                    }
+                    /******/
+                }
+                /******/
+            };
+            /******/
+        })();
+        /******/
+        /******/ 	/* webpack/runtime/hasOwnProperty shorthand */
+        /******/
+        (() => {
+            /******/
+            __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+            /******/
+        })();
+        /******/
+        /******/ 	/* webpack/runtime/make namespace object */
+        /******/
+        (() => {
+            /******/ 		// define __esModule on exports
+            /******/
+            __webpack_require__.r = (exports) => {
+                /******/
+                if (typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+                    /******/
+                    Object.defineProperty(exports, Symbol.toStringTag, {value: 'Module'});
+                    /******/
+                }
+                /******/
+                Object.defineProperty(exports, '__esModule', {value: true});
+                /******/
+            };
+            /******/
+        })();
+        /******/
+        /************************************************************************/
+        var __webpack_exports__ = {};
+// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
+        (() => {
+// ESM COMPAT FLAG
+            __webpack_require__.r(__webpack_exports__);
+
+// EXPORTS
+            __webpack_require__.d(__webpack_exports__, {
+                "ACTION": () => (/* reexport */ ACTION),
+                "API_OPERATION": () => (/* reexport */ API_OPERATION),
+                "ERROR": () => (/* reexport */ ERROR),
+                "EVENT": () => (/* reexport */ EVENT),
+                "HLS": () => (/* reexport */ HLS),
+                "MIXER_PIPE_TYPE": () => (/* reexport */ MIXER_PIPE_TYPE),
+                "MIXER_RENDER_TYPE": () => (/* reexport */ MIXER_RENDER_TYPE),
+                "MediasoupSocketApi": () => (/* reexport */ MediasoupSocketApi),
+                "NEXMO": () => (/* reexport */ NEXMO),
+                "PATH": () => (/* reexport */ PATH),
+                "REST_ACTIONS": () => (/* reexport */ REST_ACTIONS),
+                "SOCKET_ONLY_ACTIONS": () => (/* reexport */ SOCKET_ONLY_ACTIONS),
+                "STAT": () => (/* reexport */ STAT)
+            });
+
+            ;// CONCATENATED MODULE: ./src/constants.ts
+            var ACTION;
+            (function (ACTION) {
+                ACTION["GET_SERVER_CONFIGS"] = "getServerConfigs";
+                ACTION["CREATE_TRANSPORT"] = "createTransport";
+                ACTION["CONNECT_TRANSPORT"] = "connectTransport";
+                ACTION["CLOSE_TRANSPORT"] = "closeTransport";
+                ACTION["PRODUCE"] = "produce";
+                ACTION["CONSUME"] = "consume";
+                ACTION["RESUME_CONSUMER"] = "resumeConsumer";
+                ACTION["PAUSE_CONSUMER"] = "pauseConsumer";
+                ACTION["CLOSE_CONSUMER"] = "closeConsumer";
+                ACTION["RESUME_PRODUCER"] = "resumeProducer";
+                ACTION["PAUSE_PRODUCER"] = "pauseProducer";
+                ACTION["CLOSE_PRODUCER"] = "closeProducer";
+                ACTION["FILE_STREAMING"] = "fileStreaming";
+                ACTION["LIVE_STREAMING"] = "liveStreaming";
+                ACTION["LIVE_TO_HLS"] = "liveToHls";
+                ACTION["STOP_FILE_STREAMING"] = "stopFileStreaming";
+                ACTION["START_RECORDING"] = "startRecording";
+                ACTION["STOP_RECORDING"] = "stopRecording";
+                ACTION["CREATE_PIPE_TRANSPORT"] = "createPipeTransport";
+                ACTION["CONNECT_PIPE_TRANSPORT"] = "connectPipeTransport";
+                ACTION["SET_PREFERRED_LAYERS"] = "setPreferredLayers";
+                ACTION["SET_MAX_INCOMING_BITRATE"] = "setMaxIncomingBitrate";
+                ACTION["PRODUCERS_STATS"] = "producersStats";
+                ACTION["CONSUMERS_STATS"] = "consumersStats";
+                ACTION["TRANSPORT_STATS"] = "transportStats";
+                ACTION["PIPE_TO_REMOTE_PRODUCER"] = "pipeToRemoteProducer";
+                ACTION["PIPE_FROM_REMOTE_PRODUCER"] = "pipeFromRemoteProducer";
+                ACTION["WORKER_LOAD"] = "workerLoad";
+                ACTION["NUM_WORKERS"] = "numWorkers";
+                ACTION["RECORDED_STREAMS"] = "recordedStreams";
+                ACTION["STREAM_RECORDINGS"] = "streamRecordings";
+                ACTION["DELETE_STREAM_RECORDINGS"] = "deleteStreamRecordings";
+                ACTION["DELETE_RECORDING"] = "deleteRecording";
+                ACTION["PUSH_TO_SERVER_INPUTS"] = "pushToServerInputs";
+                ACTION["PULL_FROM_SERVER_INPUTS"] = "pullFromServerInputs";
+                ACTION["PUSH_TO_SERVER_OPTIONS"] = "pushToServerOptions";
+                ACTION["PUSH_TO_SERVER"] = "pushToServer";
+                ACTION["KINDS_BY_FILE"] = "kindsByFile";
+                ACTION["REQUEST_KEYFRAME"] = "requestKeyframe";
+                ACTION["LISTEN_STREAM_STARTED"] = "listenStreamStarted";
+                ACTION["LISTEN_STREAM_STOPPED"] = "listenStreamStopped";
+                ACTION["MIXER_START"] = "mixerStart";
+                ACTION["MIXER_CLOSE"] = "mixerClose";
+                ACTION["MIXER_ADD"] = "mixerAdd";
+                ACTION["MIXER_REMOVE"] = "mixerRemove";
+                ACTION["MIXER_UPDATE"] = "mixerUpdate";
+                ACTION["MIXER_PIPE_START"] = "mixerPipeStart";
+                ACTION["MIXER_PIPE_STOP"] = "mixerPipeStop";
+                ACTION["LISTEN_MIXER_STOPPED"] = "listenMixerStopped";
+            })(ACTION || (ACTION = {}));
+            const SOCKET_ONLY_ACTIONS = [
+                ACTION.GET_SERVER_CONFIGS,
+                ACTION.CREATE_TRANSPORT,
+                ACTION.CONNECT_TRANSPORT,
+                ACTION.CLOSE_TRANSPORT,
+                ACTION.PRODUCE,
+                ACTION.CONSUME,
+                ACTION.LISTEN_STREAM_STARTED,
+                ACTION.LISTEN_STREAM_STOPPED,
+                ACTION.LISTEN_MIXER_STOPPED,
+                ACTION.CREATE_PIPE_TRANSPORT,
+                ACTION.CONNECT_PIPE_TRANSPORT,
+                ACTION.PIPE_TO_REMOTE_PRODUCER,
+                ACTION.PIPE_FROM_REMOTE_PRODUCER
+            ];
+            const REST_ACTIONS = Object.values(ACTION).filter(a => !SOCKET_ONLY_ACTIONS.includes(a));
+            var EVENT;
+            (function (EVENT) {
+                EVENT["STREAM_STARTED"] = "streamStarted";
+                EVENT["STREAM_STOPPED"] = "streamStopped";
+                EVENT["MIXER_STOPPED"] = "mixerStopped";
+            })(EVENT || (EVENT = {}));
+            var STAT;
+            (function (STAT) {
+                STAT["STATS"] = "stats";
+                STAT["TRAFFIC"] = "traffic";
+                STAT["CPU"] = "cpu";
+            })(STAT || (STAT = {}));
+            const HLS = {
+                ROOT: 'hls',
+                PLAYLIST: 'master.m3u8'
+            };
+            var PATH;
+            (function (PATH) {
+                PATH["API"] = "api";
+            })(PATH || (PATH = {}));
+            const NEXMO = {
+                PATH: "nexmo",
+                AUDIO_SAMPLE_RATE: 16000,
+                AUDIO_CHANNELS: 1
+            };
+            var ERROR;
+            (function (ERROR) {
+                ERROR[ERROR["UNKNOWN"] = 500] = "UNKNOWN";
+                ERROR[ERROR["UNAUTHORIZED"] = 401] = "UNAUTHORIZED";
+                ERROR[ERROR["INVALID_TRANSPORT"] = 530] = "INVALID_TRANSPORT";
+                ERROR[ERROR["INVALID_PRODUCER"] = 531] = "INVALID_PRODUCER";
+                ERROR[ERROR["INVALID_CONSUMER"] = 532] = "INVALID_CONSUMER";
+                ERROR[ERROR["INVALID_STREAM"] = 533] = "INVALID_STREAM";
+                ERROR[ERROR["INVALID_OPERATION"] = 534] = "INVALID_OPERATION";
+                ERROR[ERROR["INVALID_WORKER"] = 535] = "INVALID_WORKER";
+                ERROR[ERROR["INVALID_INPUT"] = 536] = "INVALID_INPUT";
+                ERROR[ERROR["INVALID_ACTION"] = 537] = "INVALID_ACTION";
+            })(ERROR || (ERROR = {}));
+            var API_OPERATION;
+            (function (API_OPERATION) {
+                API_OPERATION[API_OPERATION["SUBSCRIBE"] = 0] = "SUBSCRIBE";
+                API_OPERATION[API_OPERATION["PUBLISH"] = 1] = "PUBLISH";
+                API_OPERATION[API_OPERATION["RECORDING"] = 2] = "RECORDING";
+                API_OPERATION[API_OPERATION["STREAMING"] = 3] = "STREAMING";
+                API_OPERATION[API_OPERATION["MIXER"] = 4] = "MIXER";
+            })(API_OPERATION || (API_OPERATION = {}));
+            var MIXER_PIPE_TYPE;
+            (function (MIXER_PIPE_TYPE) {
+                MIXER_PIPE_TYPE[MIXER_PIPE_TYPE["LIVE"] = 0] = "LIVE";
+                MIXER_PIPE_TYPE[MIXER_PIPE_TYPE["RECORDING"] = 1] = "RECORDING";
+                MIXER_PIPE_TYPE[MIXER_PIPE_TYPE["RTMP"] = 2] = "RTMP";
+                MIXER_PIPE_TYPE[MIXER_PIPE_TYPE["HLS"] = 3] = "HLS";
+            })(MIXER_PIPE_TYPE || (MIXER_PIPE_TYPE = {}));
+            var MIXER_RENDER_TYPE;
+            (function (MIXER_RENDER_TYPE) {
+                MIXER_RENDER_TYPE["SCALE"] = "scale";
+                MIXER_RENDER_TYPE["CROP"] = "crop";
+                MIXER_RENDER_TYPE["PAD"] = "pad";
+            })(MIXER_RENDER_TYPE || (MIXER_RENDER_TYPE = {}));
+
+// EXTERNAL MODULE: external {"root":"io","commonjs":"socket.io-client","commonjs2":"socket.io-client","amd":"socket.io-client"}
+            var external_root_io_commonjs_socket_io_client_commonjs2_socket_io_client_amd_socket_io_client_ = __webpack_require__(173);
+// EXTERNAL MODULE: external {"root":"axios","commonjs2":"axios","commonjs":"axios","amd":"axios"}
+            var external_root_axios_commonjs2_axios_commonjs_axios_amd_axios_ = __webpack_require__(781);
+            var external_root_axios_commonjs2_axios_commonjs_axios_amd_axios_default = /*#__PURE__*/__webpack_require__.n(external_root_axios_commonjs2_axios_commonjs_axios_amd_axios_);
+            ;// CONCATENATED MODULE: ./src/mediasoup-socket-api.ts
+            var __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
+                function adopt(value) {
+                    return value instanceof P ? value : new P(function (resolve) {
+                        resolve(value);
+                    });
+                }
+
+                return new (P || (P = Promise))(function (resolve, reject) {
+                    function fulfilled(value) {
+                        try {
+                            step(generator.next(value));
+                        } catch (e) {
+                            reject(e);
+                        }
+                    }
+
+                    function rejected(value) {
+                        try {
+                            step(generator["throw"](value));
+                        } catch (e) {
+                            reject(e);
+                        }
+                    }
+
+                    function step(result) {
+                        result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+                    }
+
+                    step((generator = generator.apply(thisArg, _arguments || [])).next());
+                });
+            };
+
+
+            class MediasoupSocketApi {
+                constructor(url, worker, token, log) {
+                    this.closed = false;
+                    this.log = log || console.log;
+                    this.url = url;
+                    this.worker = worker;
+                    this.token = token;
+                }
+
+                get client() {
+                    if (!this._client) {
+                        this._client = (0, external_root_io_commonjs_socket_io_client_commonjs2_socket_io_client_amd_socket_io_client_.io)(this.url, {
+                            transports: ['websocket'],
+                            query: {
+                                mediasoup_worker: this.worker
+                            },
+                            auth: {
+                                token: this.token
+                            },
+                            forceNew: true
+                        });
+                    }
+                    return this._client;
+                }
+
+                connectSocket() {
+                    return new Promise((resolve, reject) => {
+                        if (this.client.connected) {
+                            resolve();
+                        } else {
+                            this.client.on('error', (e) => {
+                                if (e.message === 'Not enough or too many segments') {
+                                    e.errorId = ERROR.UNAUTHORIZED;
+                                } else {
+                                    e.errorId = ERROR.UNKNOWN;
+                                }
+                                reject(e);
+                            });
+                            this.client.on('connect', resolve);
+                        }
+                    });
+                }
+
+                resumeConsumer(json) {
+                    return __awaiter(this, void 0, void 0, function* () {
+                        yield this.request(ACTION.RESUME_CONSUMER, json);
+                    });
+                }
+
+                pauseConsumer(json) {
+                    return __awaiter(this, void 0, void 0, function* () {
+                        yield this.request(ACTION.PAUSE_CONSUMER, json);
+                    });
+                }
+
+                setPreferredLayers(json) {
+                    return __awaiter(this, void 0, void 0, function* () {
+                        yield this.request(ACTION.SET_PREFERRED_LAYERS, json);
+                    });
+                }
+
+                closeConsumer(json) {
+                    return __awaiter(this, void 0, void 0, function* () {
+                        yield this.request(ACTION.CLOSE_CONSUMER, json);
+                    });
+                }
+
+                resumeProducer(json) {
+                    return __awaiter(this, void 0, void 0, function* () {
+                        yield this.request(ACTION.RESUME_PRODUCER, json);
+                    });
+                }
+
+                pauseProducer(json) {
+                    return __awaiter(this, void 0, void 0, function* () {
+                        yield this.request(ACTION.PAUSE_PRODUCER, json);
+                    });
+                }
+
+                closeProducer(json) {
+                    return __awaiter(this, void 0, void 0, function* () {
+                        yield this.request(ACTION.CLOSE_PRODUCER, json);
+                    });
+                }
+
+                produce(json) {
+                    return __awaiter(this, void 0, void 0, function* () {
+                        return (yield this.request(ACTION.PRODUCE, json));
+                    });
+                }
+
+                consume(json) {
+                    return __awaiter(this, void 0, void 0, function* () {
+                        return (yield this.request(ACTION.CONSUME, json));
+                    });
+                }
+
+                createPipeTransport() {
+                    return __awaiter(this, void 0, void 0, function* () {
+                        return (yield this.request(ACTION.CREATE_PIPE_TRANSPORT));
+                    });
+                }
+
+                connectPipeTransport(json) {
+                    return __awaiter(this, void 0, void 0, function* () {
+                        yield this.request(ACTION.CONNECT_PIPE_TRANSPORT, json);
+                    });
+                }
+
+                closeTransport(json) {
+                    return __awaiter(this, void 0, void 0, function* () {
+                        yield this.request(ACTION.CLOSE_TRANSPORT, json);
+                    });
+                }
+
+                getServerConfigs() {
+                    return __awaiter(this, void 0, void 0, function* () {
+                        return (yield this.request(ACTION.GET_SERVER_CONFIGS));
+                    });
+                }
+
+                createTransport() {
+                    return __awaiter(this, void 0, void 0, function* () {
+                        return (yield this.request(ACTION.CREATE_TRANSPORT));
+                    });
+                }
+
+                connectTransport(json) {
+                    return __awaiter(this, void 0, void 0, function* () {
+                        yield this.request(ACTION.CONNECT_TRANSPORT, json);
+                    });
+                }
+
+                setMaxIncomingBitrate(json) {
+                    return __awaiter(this, void 0, void 0, function* () {
+                        yield this.request(ACTION.SET_MAX_INCOMING_BITRATE, json);
+                    });
+                }
+
+                producersStats(json) {
+                    return __awaiter(this, void 0, void 0, function* () {
+                        return (yield this.request(ACTION.PRODUCERS_STATS, json));
+                    });
+                }
+
+                consumersStats(json) {
+                    return __awaiter(this, void 0, void 0, function* () {
+                        return (yield this.request(ACTION.CONSUMERS_STATS, json));
+                    });
+                }
+
+                transportStats(json) {
+                    return __awaiter(this, void 0, void 0, function* () {
+                        return (yield this.request(ACTION.TRANSPORT_STATS, json));
+                    });
+                }
+
+                workerLoad() {
+                    return __awaiter(this, void 0, void 0, function* () {
+                        return (yield this.request(ACTION.WORKER_LOAD));
+                    });
+                }
+
+                numWorkers() {
+                    return __awaiter(this, void 0, void 0, function* () {
+                        return (yield this.request(ACTION.NUM_WORKERS));
+                    });
+                }
+
+                pipeToRemoteProducer(json) {
+                    return __awaiter(this, void 0, void 0, function* () {
+                        yield this.request(ACTION.PIPE_TO_REMOTE_PRODUCER, json);
+                    });
+                }
+
+                pipeFromRemoteProducer(json) {
+                    return __awaiter(this, void 0, void 0, function* () {
+                        yield this.request(ACTION.PIPE_FROM_REMOTE_PRODUCER, json);
+                    });
+                }
+
+                startRecording(json) {
+                    return __awaiter(this, void 0, void 0, function* () {
+                        yield this.request(ACTION.START_RECORDING, json);
+                    });
+                }
+
+                stopRecording(json) {
+                    return __awaiter(this, void 0, void 0, function* () {
+                        yield this.request(ACTION.STOP_RECORDING, json);
+                    });
+                }
+
+                fileStreaming(json) {
+                    return __awaiter(this, void 0, void 0, function* () {
+                        yield this.request(ACTION.FILE_STREAMING, json);
+                    });
+                }
+
+                stopFileStreaming(json) {
+                    return __awaiter(this, void 0, void 0, function* () {
+                        yield this.request(ACTION.STOP_FILE_STREAMING, json);
+                    });
+                }
+
+                recordedStreams() {
+                    return __awaiter(this, void 0, void 0, function* () {
+                        return yield this.request(ACTION.RECORDED_STREAMS);
+                    });
+                }
+
+                streamRecordings(json) {
+                    return __awaiter(this, void 0, void 0, function* () {
+                        return yield this.request(ACTION.STREAM_RECORDINGS, json);
+                    });
+                }
+
+                deleteStreamRecordings(json) {
+                    return __awaiter(this, void 0, void 0, function* () {
+                        yield this.request(ACTION.DELETE_STREAM_RECORDINGS, json);
+                    });
+                }
+
+                deleteRecording(json) {
+                    return __awaiter(this, void 0, void 0, function* () {
+                        yield this.request(ACTION.DELETE_RECORDING, json);
+                    });
+                }
+
+                pushToServerInputs(json) {
+                    return __awaiter(this, void 0, void 0, function* () {
+                        return yield this.request(ACTION.PUSH_TO_SERVER_INPUTS, json);
+                    });
+                }
+
+                pushToServerOptions(json) {
+                    return __awaiter(this, void 0, void 0, function* () {
+                        return yield this.request(ACTION.PUSH_TO_SERVER_OPTIONS, json);
+                    });
+                }
+
+                pushToServer(json) {
+                    return __awaiter(this, void 0, void 0, function* () {
+                        yield this.request(ACTION.PUSH_TO_SERVER, json);
+                    });
+                }
+
+                pullFromServerInputs(json) {
+                    return __awaiter(this, void 0, void 0, function* () {
+                        return yield this.request(ACTION.PULL_FROM_SERVER_INPUTS, json);
+                    });
+                }
+
+                kindsByFile(json) {
+                    return __awaiter(this, void 0, void 0, function* () {
+                        return yield this.request(ACTION.KINDS_BY_FILE, json);
+                    });
+                }
+
+                requestKeyframe(json) {
+                    return __awaiter(this, void 0, void 0, function* () {
+                        yield this.request(ACTION.REQUEST_KEYFRAME, json);
+                    });
+                }
+
+                listenStreamStarted(json) {
+                    return __awaiter(this, void 0, void 0, function* () {
+                        return yield this.request(ACTION.LISTEN_STREAM_STARTED, json);
+                    });
+                }
+
+                listenStreamStopped(json) {
+                    return __awaiter(this, void 0, void 0, function* () {
+                        return yield this.request(ACTION.LISTEN_STREAM_STOPPED, json);
+                    });
+                }
+
+                liveStreaming(json) {
+                    return __awaiter(this, void 0, void 0, function* () {
+                        yield this.request(ACTION.LIVE_STREAMING, json);
+                    });
+                }
+
+                liveToHls(json) {
+                    return __awaiter(this, void 0, void 0, function* () {
+                        yield this.request(ACTION.LIVE_TO_HLS, json);
+                    });
+                }
+
+                mixerStart(json) {
+                    return __awaiter(this, void 0, void 0, function* () {
+                        return yield this.request(ACTION.MIXER_START, json);
+                    });
+                }
+
+                mixerClose(json) {
+                    return __awaiter(this, void 0, void 0, function* () {
+                        yield this.request(ACTION.MIXER_CLOSE, json);
+                    });
+                }
+
+                mixerAdd(json) {
+                    return __awaiter(this, void 0, void 0, function* () {
+                        yield this.request(ACTION.MIXER_ADD, json);
+                    });
+                }
+
+                mixerUpdate(json) {
+                    return __awaiter(this, void 0, void 0, function* () {
+                        yield this.request(ACTION.MIXER_UPDATE, json);
+                    });
+                }
+
+                mixerRemove(json) {
+                    return __awaiter(this, void 0, void 0, function* () {
+                        yield this.request(ACTION.MIXER_REMOVE, json);
+                    });
+                }
+
+                mixerPipeStart(json) {
+                    return __awaiter(this, void 0, void 0, function* () {
+                        return yield this.request(ACTION.MIXER_PIPE_START, json);
+                    });
+                }
+
+                mixerPipeStop(json) {
+                    return __awaiter(this, void 0, void 0, function* () {
+                        yield this.request(ACTION.MIXER_PIPE_STOP, json);
+                    });
+                }
+
+                listenMixerStopped(json) {
+                    return __awaiter(this, void 0, void 0, function* () {
+                        return yield this.request(ACTION.LISTEN_MIXER_STOPPED, json);
+                    });
+                }
+
+                clear() {
+                    this.closed = true;
+                    if (this._client) {
+                        this._client.removeAllListeners();
+                        if (this.client.connected) {
+                            this._client.disconnect();
+                        }
+                    }
+                }
+
+                request(action, json = {}) {
+                    return __awaiter(this, void 0, void 0, function* () {
+                        if (!this.closed) {
+                            if (!this._client && !SOCKET_ONLY_ACTIONS.includes(action)) {
+                                return this.restRequest(action, json);
+                            } else {
+                                return this.socketRequest(action, json);
+                            }
+                        }
+                    });
+                }
+
+                socketRequest(action, json = {}) {
+                    return __awaiter(this, void 0, void 0, function* () {
+                        yield this.connectSocket();
+                        this.log('sent message', action, JSON.stringify(json));
+                        return new Promise((resolve, reject) => {
+                            this.client.emit(action, json, (data) => {
+                                if (data && typeof data !== 'boolean' && data.hasOwnProperty('errorId')) {
+                                    this.log('got error', action, JSON.stringify(data));
+                                    reject(data);
+                                } else {
+                                    this.log('got message', action, JSON.stringify(data));
+                                    resolve(data);
+                                }
+                            });
+                        });
+                    });
+                }
+
+                restRequest(action, json = {}) {
+                    return __awaiter(this, void 0, void 0, function* () {
+                        try {
+                            const {data} = yield external_root_axios_commonjs2_axios_commonjs_axios_amd_axios_default().post(`${this.url}/${PATH.API}/${this.worker}/${action}`, json, {
+                                headers: {'Content-Type': 'application/json', "Authorization": `Bearer ${this.token}`},
+                            });
+                            this.log('got message', action, JSON.stringify(data));
+                            return data;
+                        } catch (e) {
+                            let errorId = ERROR.UNKNOWN;
+                            this.log('got error', e);
+                            if (e.response && e.response.status && ERROR[e.response.status]) {
+                                errorId = e.response.status;
+                            }
+                            throw {errorId};
+                        }
+                    });
+                }
+            }
+
+            ;// CONCATENATED MODULE: ./src/index.ts
+
+
+        })();
+
+        /******/
+        return __webpack_exports__;
+        /******/
+    })()
+        ;
+});
diff --git a/teamapps-client/ts/modules/webrtc/mediasoup-v3/lib/avcore/mediasoup-socket-api.d.ts b/teamapps-client/ts/modules/webrtc/mediasoup-v3/lib/avcore/mediasoup-socket-api.d.ts
new file mode 100644
index 000000000..f75c4caf6
--- /dev/null
+++ b/teamapps-client/ts/modules/webrtc/mediasoup-v3/lib/avcore/mediasoup-socket-api.d.ts
@@ -0,0 +1,198 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+import {Socket} from 'socket.io-client';
+import {
+	ConnectTransportRequest,
+	ConsumerData,
+	ConsumeRequest,
+	ConsumeResponse,
+	ConsumerPreferredLayers,
+	NumWorkersData,
+	PipeFromRemoteProducerRequest,
+	PipeToRemoteProducerRequest,
+	PipeTransportConnectData,
+	PipeTransportData,
+	ProducerData,
+	ProduceRequest,
+	ProduceResponse,
+	ServerConfigs,
+	RecordingData,
+	StatsInput,
+	StatsOutput,
+	StreamFileRequest,
+	TransportBitrateData,
+	TransportData,
+	WorkerLoadData,
+	ListData,
+	StreamData,
+	FilePathInput,
+	PushStreamInputsRequest,
+	PushStreamInputsResponse,
+	PullStreamInputsRequest,
+	PullStreamInputsResponse,
+	RecordingRequest,
+	StreamKindsData,
+	LiveStreamRequest,
+	KindsByFileInput,
+	KindsOptionsData,
+	PushStreamOptionsRequest,
+	PushStreamOptionsResponse,
+	PushStreamRequest,
+	StreamKindData,
+	StreamListenData,
+	MixerUpdateData,
+	MixerRemoveData,
+	MixerInput,
+	MixerAddAudioData,
+	MixerAddVideoData,
+	MixerPipeLiveData,
+	MixerPipeInput,
+	MixerPipeRtmpData,
+	MixerPipeRecordingData,
+	MixerPipeStopInput,
+	MixerCreateOptions,
+	Omit,
+	MixerPipeHlsData,
+	LiveToHlsRequest
+} from './client-interfaces';
+import {TransportOptions} from 'mediasoup-client/lib/Transport';
+import {IMediasoupApi, IMediasoupApiClient} from './i-mediasoup-api';
+
+export interface ApiSocket extends Omit<Socket, "on">, IMediasoupApiClient {
+}
+
+export declare class MediasoupSocketApi implements IMediasoupApi {
+	private readonly log;
+	private _client;
+	private readonly url;
+	private readonly worker;
+	private readonly token;
+	private closed;
+
+	constructor(url: string, worker: number, token: string, log?: typeof console.log);
+
+	get client(): ApiSocket;
+
+	private connectSocket;
+
+	resumeConsumer(json: ConsumerData): Promise<void>;
+
+	pauseConsumer(json: ConsumerData): Promise<void>;
+
+	setPreferredLayers(json: ConsumerPreferredLayers): Promise<void>;
+
+	closeConsumer(json: ConsumerData): Promise<void>;
+
+	resumeProducer(json: ProducerData): Promise<void>;
+
+	pauseProducer(json: ProducerData): Promise<void>;
+
+	closeProducer(json: ProducerData): Promise<void>;
+
+	produce(json: ProduceRequest): Promise<ProduceResponse>;
+
+	consume(json: ConsumeRequest): Promise<ConsumeResponse>;
+
+	createPipeTransport(): Promise<PipeTransportData>;
+
+	connectPipeTransport(json: PipeTransportConnectData): Promise<void>;
+
+	closeTransport(json: TransportData): Promise<void>;
+
+	getServerConfigs(): Promise<ServerConfigs>;
+
+	createTransport(): Promise<TransportOptions>;
+
+	connectTransport(json: ConnectTransportRequest): Promise<void>;
+
+	setMaxIncomingBitrate(json: TransportBitrateData): Promise<void>;
+
+	producersStats(json: StatsInput): Promise<StatsOutput>;
+
+	consumersStats(json: StatsInput): Promise<StatsOutput>;
+
+	transportStats(json: StatsInput): Promise<StatsOutput>;
+
+	workerLoad(): Promise<WorkerLoadData>;
+
+	numWorkers(): Promise<NumWorkersData>;
+
+	pipeToRemoteProducer(json: PipeToRemoteProducerRequest): Promise<void>;
+
+	pipeFromRemoteProducer(json: PipeFromRemoteProducerRequest): Promise<void>;
+
+	startRecording(json: RecordingRequest): Promise<void>;
+
+	stopRecording(json: RecordingData): Promise<void>;
+
+	fileStreaming(json: StreamFileRequest): Promise<void>;
+
+	stopFileStreaming(json: StreamKindsData): Promise<void>;
+
+	recordedStreams(): Promise<ListData>;
+
+	streamRecordings(json: StreamData): Promise<ListData>;
+
+	deleteStreamRecordings(json: StreamData): Promise<void>;
+
+	deleteRecording(json: FilePathInput): Promise<void>;
+
+	pushToServerInputs(json: PushStreamInputsRequest): Promise<PushStreamInputsResponse>;
+
+	pushToServerOptions(json: PushStreamOptionsRequest): Promise<PushStreamOptionsResponse>;
+
+	pushToServer(json: PushStreamRequest): Promise<void>;
+
+	pullFromServerInputs(json: PullStreamInputsRequest): Promise<PullStreamInputsResponse>;
+
+	kindsByFile(json: KindsByFileInput): Promise<KindsOptionsData>;
+
+	requestKeyframe(json: ConsumerData): Promise<void>;
+
+	listenStreamStarted(json: StreamListenData): Promise<boolean>;
+
+	listenStreamStopped(json: StreamKindData): Promise<boolean>;
+
+	liveStreaming(json: LiveStreamRequest): Promise<void>;
+
+	liveToHls(json: LiveToHlsRequest): Promise<void>;
+
+	mixerStart(json: MixerCreateOptions): Promise<MixerInput>;
+
+	mixerClose(json: MixerInput): Promise<void>;
+
+	mixerAdd(json: MixerAddAudioData | MixerAddVideoData): Promise<void>;
+
+	mixerUpdate(json: MixerUpdateData): Promise<void>;
+
+	mixerRemove(json: MixerRemoveData): Promise<void>;
+
+	mixerPipeStart(json: MixerPipeLiveData | MixerPipeRecordingData | MixerPipeRtmpData | MixerPipeHlsData): Promise<MixerPipeInput>;
+
+	mixerPipeStop(json: MixerPipeStopInput): Promise<void>;
+
+	listenMixerStopped(json: MixerInput): Promise<boolean>;
+
+	clear(): void;
+
+	private request;
+	private socketRequest;
+	private restRequest;
+}
diff --git a/teamapps-client/ts/modules/webrtc/test.html b/teamapps-client/ts/modules/webrtc/test.html
new file mode 100644
index 000000000..b9c7e00d3
--- /dev/null
+++ b/teamapps-client/ts/modules/webrtc/test.html
@@ -0,0 +1,173 @@
+<!DOCTYPE html>
+<!--
+  ========================LICENSE_START=================================
+  TeamApps
+  ---
+  Copyright (C) 2014 - 2026 TeamApps.org
+  ---
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+  
+       http://www.apache.org/licenses/LICENSE-2.0
+  
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+  =========================LICENSE_END==================================
+  -->
+
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+
+<audio id="audio1" controls></audio>
+<audio id="audio2" controls></audio>
+<button id="switch">switch</button>
+<button id="stopInputTrack">stop input track (for testing)</button>
+
+<script type="module">
+
+    class GainController {
+
+        #context;
+        #inputTrack;
+        #inputStream;
+        #micStreamSource;
+        #gainFilter;
+        #destination;
+        #outputStream;
+        #outputTrack;
+
+        constructor(inputTrack, initialGain) {
+            this.#inputTrack = inputTrack;
+            this.#context = new AudioContext();
+            this.#inputStream = new MediaStream([inputTrack]);
+            this.#micStreamSource = this.#context.createMediaStreamSource(this.#inputStream);
+            this.#gainFilter = this.#context.createGain();
+            this.#gainFilter.gain.value = initialGain;
+            this.#destination = this.#context.createMediaStreamDestination();
+            this.#outputStream = this.#destination.stream;
+            this.#outputTrack = this.#outputStream.getAudioTracks()[0];
+
+            this.#micStreamSource.connect(this.#gainFilter);
+            this.#gainFilter.connect(this.#destination);
+        }
+
+        set inputTrack(inputTrack) {
+            this.#micStreamSource.disconnect();
+            if (this.#inputTrack != null) {
+                this.#inputStream.removeTrack(this.#inputTrack);
+            }
+
+            this.#inputTrack = inputTrack;
+            if (inputTrack != null) {
+                this.#inputStream = new MediaStream([inputTrack]);
+                this.#micStreamSource = this.#context.createMediaStreamSource(this.#inputStream);
+                this.#micStreamSource.connect(this.#gainFilter);
+            }
+        }
+
+        get outputTrack() {
+            return this.#outputTrack;
+        }
+
+        get gain() {
+            return this.#gainFilter.gain.value;
+        }
+
+        set gain(value) {
+            this.#gainFilter.gain.value = value;
+        }
+
+        close() {
+            // just make 100% sure everything is closed and released!
+            this.#micStreamSource.disconnect();
+            this.#inputStream.removeTrack(this.#inputTrack);
+            this.#context.close();
+            this.#gainFilter.disconnect();
+            this.#destination.disconnect();
+            this.#outputStream.removeTrack(this.#outputTrack);
+            this.#outputTrack.dispatchEvent(new Event("ended"));
+        }
+    }
+
+
+    let mediaStream = await window.navigator.mediaDevices.getUserMedia({
+        audio: {
+            autoGainControl: true,
+            channelCount: 1,
+            noiseSuppression: true,
+            echoCancellation: true
+        }, video: false
+    });
+
+
+    // =========
+
+    let audioTrack = mediaStream.getAudioTracks()[0];
+
+    // =========
+
+    let gainController = new GainController(audioTrack, 1);
+    gainController.outputTrack.addEventListener("ended", () => console.log("gainController.outputTrack ended"))
+    gainController.outputTrack.addEventListener("", () => console.log("gainController.outputTrack ended"))
+
+    audioTrack.addEventListener("ended", () => gainController.close());
+
+    document.getElementById("audio1").srcObject = mediaStream;
+    let resultMediaStream = new MediaStream([gainController.outputTrack]);
+    let audio2 = document.getElementById("audio2");
+    audio2.srcObject = resultMediaStream;
+
+
+    ["abort", "canplay", "canplaythrough", "durationchange", "emptied", "ended", "error", "loadeddata", "loadedmetadata", "loadstart", "pause", "play", "playing", "progress", "ratechange", "seeked", "seeking", "stalled", "suspend", "timeupdate", "volumechange", "waiting",]
+        .forEach(name => audio2.addEventListener(name, () => console.log("audio2." + name)));
+    ["abort", "canplay", "canplaythrough", "durationchange", "emptied", "ended", "error", "loadeddata", "loadedmetadata", "loadstart", "pause", "play", "playing", "progress", "ratechange", "seeked", "seeking", "stalled", "suspend", "timeupdate", "volumechange", "waiting",]
+        .forEach(name => resultMediaStream.addEventListener(name, () => console.log("resultMediaStream." + name)));
+    ["ended", "mute", "overconstrained", "unmute",]
+        .forEach(name => gainController.outputTrack.addEventListener(name, () => console.log("outputTrack." + name)));
+
+
+
+    document.getElementById("switch").addEventListener("click", async () => {
+        mediaStream.removeTrack(audioTrack);
+        audioTrack.stop()
+        audioTrack.enabled = false;
+        let newMediaStream = await window.navigator.mediaDevices.getUserMedia({
+            audio: {
+                autoGainControl: false,
+                channelCount: 1,
+                noiseSuppression: false,
+                echoCancellation: false
+            }, video: false
+        });
+        audio2.srcObject = null;
+        
+        gainController.inputTrack = null;
+
+            gainController.inputTrack = newMediaStream.getAudioTracks()[0];            
+
+        audio2.srcObject = new MediaStream([gainController.outputTrack]);
+    });
+    document.getElementById("stopInputTrack").addEventListener("click", async () => {
+        audioTrack.stop();
+    });
+
+</script>
+
+
+<div style="position:relative; background-color: #eeeeee; height: 10vh; display: flex;">
+    <div style="height: 100%; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAElJREFUKFNjZGBg+M8AAYxQGp0Cy4MkQQxcimCa/iMrQDcZhU/IJLgzKFKI1XMwE/F5CCyH7hl0p8ANQA8emLUwT8BthCkkGOAAtNAQByJdFWoAAAAASUVORK5CYII='); background-size: contain; background-repeat: no-repeat">
+        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAAtJREFUGFdjYAACAAAFAAGq1chRAAAAAElFTkSuQmCC"
+             style="height: 100%; width: auto"/>
+    </div>
+</div>
+
+</body>
+</html>
diff --git a/teamapps-client/ts/modules/webrtc/utils.ts b/teamapps-client/ts/modules/webrtc/utils.ts
new file mode 100644
index 000000000..97df4d01f
--- /dev/null
+++ b/teamapps-client/ts/modules/webrtc/utils.ts
@@ -0,0 +1,85 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+import {MediaStreamWithMixiSizingInfo, MultiStreamsMixer} from './MultiStreamsMixer';
+
+interface MediaDevicesExtended extends MediaDevices {
+	getDisplayMedia: (constraints: MediaStreamConstraints) => Promise<MediaStream>
+}
+
+export async function getUserMedia(constraints: MediaStreamConstraints, isDisplay: boolean = false): Promise<MediaStream> {
+	if (isDisplay) {
+		return await (navigator.mediaDevices as MediaDevicesExtended).getDisplayMedia(constraints);
+	} else {
+		return await navigator.mediaDevices.getUserMedia(constraints);
+	}
+}
+
+export async function mixStreams(inputMediaStreams: MediaStreamWithMixiSizingInfo[], constraints?: MediaStreamConstraints, frameRate: number = 10): Promise<MediaStream | undefined> {
+	let active = true;
+	const mixer = new MultiStreamsMixer(inputMediaStreams, frameRate);
+	const mixerStream: MediaStream = await mixer.getMixedStream();
+	const tracks: MediaStreamTrack[] = mixerStream.getTracks();
+	for (let track of tracks) {
+		if (constraints && (track.kind === 'audio' || track.kind === 'video')) {
+			const constraint: boolean | MediaTrackConstraints | undefined = constraints[track.kind];
+			if (constraint && constraint !== true) {
+				try {
+					await track.applyConstraints(constraint)
+				} catch (e) {
+				}
+			}
+		}
+	}
+	listenStreamEnded(mixerStream, () => {
+		if (active) {
+			console.log('closing mixer');
+			active = false;
+			mixer.close();
+		}
+	});
+	for (const inputData of inputMediaStreams) {
+		listenStreamEnded(inputData.mediaStream, () => {
+			if (active) {
+				console.log('closing mixer');
+				active = false;
+				mixer.close();
+			}
+		});
+	}
+	return mixerStream;
+}
+
+export function testStreamActive(stream: MediaStream): boolean {
+	return stream.active && stream.getTracks().filter(t => t.readyState !== 'ended').length > 0;
+}
+
+export function listenStreamEnded(stream: MediaStream, listener: () => void): void {
+	let active = true;
+	const tracks: MediaStreamTrack[] = stream.getTracks();
+
+	for (let track of tracks) {
+		track.addEventListener("ended", () => {
+			if (active && !testStreamActive(stream)) {
+				active = false;
+				listener();
+			}
+		});
+	}
+}
diff --git a/teamapps-client/ts/modules/workspace-layout/ChildWindowViewContainer.ts b/teamapps-client/ts/modules/workspace-layout/ChildWindowViewContainer.ts
index 867e85542..23f007b5a 100644
--- a/teamapps-client/ts/modules/workspace-layout/ChildWindowViewContainer.ts
+++ b/teamapps-client/ts/modules/workspace-layout/ChildWindowViewContainer.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -20,7 +20,6 @@
 import * as log from "loglevel";
 import {UiRelativeWorkSpaceViewPosition} from "../../generated/UiRelativeWorkSpaceViewPosition";
 import {DeferredExecutor} from "../util/DeferredExecutor";
-import {UiToolbarConfig} from "../../generated/UiToolbarConfig";
 import {UiComponentConfig} from "../../generated/UiComponentConfig";
 import {UiWorkSpaceLayoutViewConfig} from "../../generated/UiWorkSpaceLayoutViewConfig";
 import {ViewInfo} from "./ViewInfo";
@@ -28,11 +27,11 @@ import {UiWorkSpaceLayout, UiWorkspaceLayoutSubWindowProtocol_INIT_OK} from "./U
 import {UiSplitSizePolicy} from "../../generated/UiSplitSizePolicy";
 import {generateUUID} from "../Common";
 import {ViewContainer, ViewContainerListener} from "./ViewContainer";
-import {UiComponent} from "../UiComponent";
 import {UiEvent} from "../../generated/UiEvent";
 import {UiWorkSpaceLayoutItemConfig} from "../../generated/UiWorkSpaceLayoutItemConfig";
 import {TeamAppsUiContext, TeamAppsUiContextInternalApi} from "../TeamAppsUiContext";
 import {WindowLayoutDescriptor} from "./WindowLayoutDescriptor";
+import {UiComponent} from "../UiComponent";
 
 export interface ChildWindowViewContainerListener extends ViewContainerListener {
 	handleInitialized(windowId: string, initialViewInfo: ViewInfo): void;
@@ -118,7 +117,8 @@ export class ChildWindowViewContainer implements ViewContainer {
 			this.listener.handleLocalLayoutChangedByUser(e.data.windowId);
 		} else if (e.data._type === 'REGISTER_COMPONENT') {
 			const componentId = e.data.componentId;
-			(this.context as TeamAppsUiContextInternalApi).registerComponent(new Proxy({}, {
+			const teamappsType = e.data.teamappsType;
+			(this.context as TeamAppsUiContextInternalApi).registerClientObject(new Proxy({}, {
 				get: (target, property, receiver) => {
 					if (property === 'getId') {
 						return () => componentId;
@@ -129,7 +129,7 @@ export class ChildWindowViewContainer implements ViewContainer {
 						}
 					}
 				}
-			}) as UiComponent<UiComponentConfig>);
+			}) as UiComponent<UiComponentConfig>, componentId, teamappsType);
 		} else if (e.data._type === 'EVENT') {
 			this.listener.handleUiEvent(e.data.eventObject);
 		} else if (e.data._type === 'CHILD_WINDOW_CREATED') {
diff --git a/teamapps-client/ts/modules/workspace-layout/ItemTree.ts b/teamapps-client/ts/modules/workspace-layout/ItemTree.ts
index 23c168269..50dba5aa4 100644
--- a/teamapps-client/ts/modules/workspace-layout/ItemTree.ts
+++ b/teamapps-client/ts/modules/workspace-layout/ItemTree.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,10 +19,10 @@
  */
 import * as log from "loglevel";
 import {UiComponentConfig} from "../../generated/UiComponentConfig";
-import {UiComponent} from "../UiComponent";
 import {SplitPaneItem} from "./SplitPaneItem";
 import {View} from "./View";
 import {TabPanelItem} from "./TabPanelItem";
+import {UiComponent} from "../UiComponent";
 
 
 export interface ItemTreeItem<C extends UiComponent<UiComponentConfig> = UiComponent<UiComponentConfig>> {
diff --git a/teamapps-client/ts/modules/workspace-layout/LayoutDescriptorApplyer.ts b/teamapps-client/ts/modules/workspace-layout/LayoutDescriptorApplyer.ts
index dcce20133..a5465c1ac 100644
--- a/teamapps-client/ts/modules/workspace-layout/LayoutDescriptorApplyer.ts
+++ b/teamapps-client/ts/modules/workspace-layout/LayoutDescriptorApplyer.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -30,6 +30,7 @@ import {UiWorkSpaceLayoutViewConfig} from "../../generated/UiWorkSpaceLayoutView
 import {TeamAppsUiContext} from "../TeamAppsUiContext";
 import {isSplitPanelDescriptor, isTabPanelDescriptor} from "./UiWorkSpaceLayout";
 import {UiViewGroupPanelState} from "../../generated/UiViewGroupPanelState";
+import {UiComponent} from "../UiComponent";
 
 export class LayoutDescriptorApplyer {
 
@@ -44,7 +45,7 @@ export class LayoutDescriptorApplyer {
 	private clientItemStash: { [itemId: string]: ItemTreeItem } = {};
 
 	constructor(
-		private $rootItemContainer: JQuery,
+		private $rootItemContainer: HTMLElement,
 		private viewGroupFactory: (config: UiWorkSpaceLayoutViewGroupItemConfig, parent: SplitPaneItem) => TabPanelItem,
 		private setViewGroupPanelStateFunction: (viewGroupItem: TabPanelItem, panelState: UiViewGroupPanelState) => void,
 		private context: TeamAppsUiContext
@@ -107,7 +108,7 @@ export class LayoutDescriptorApplyer {
 			let correspondingDescriptorItem = this.descriptorItemById[clientSideItem.id];
 			if (correspondingDescriptorItem != null) {
 				this.clientItemStash[clientSideItem.id] = clientSideItem;
-				clientSideItem.component.getMainDomElement().detach();
+				clientSideItem.component.getMainElement().remove();
 				this.cleanupUnknownClientItems(clientSideItem, correspondingDescriptorItem, null);
 			} else {
 				// not referenced in the descriptor! however, descendants might well be referenced in the descriptor!
@@ -128,7 +129,7 @@ export class LayoutDescriptorApplyer {
 				}
 			} else {
 				// this is the root item!
-				clientSideItem.component.getMainDomElement().detach();
+				clientSideItem.component.getMainElement().remove();
 			}
 		}
 	}
@@ -139,7 +140,7 @@ export class LayoutDescriptorApplyer {
 		viewsNotFoundInDescriptorItem.forEach((tab: View) => {
 			let viewIsReferencedAnywhereInRootDescriptor = this.descriptorViewNames.indexOf(tab.viewName) !== -1;
 			if (viewIsReferencedAnywhereInRootDescriptor) {
-				tab.component.getMainDomElement().detach();
+				tab.component.getMainElement().remove();
 				viewGroup.removeTab(tab);
 			} else {
 				// will not be used anymore in any way! just remove and destroy
@@ -176,7 +177,7 @@ export class LayoutDescriptorApplyer {
 				}
 				item.parent = parent;
 			} else {
-				this.$rootItemContainer.append(item.component.getMainDomElement());
+				this.$rootItemContainer.append(item.component.getMainElement());
 			}
 		}
 
@@ -216,7 +217,7 @@ export class LayoutDescriptorApplyer {
 			} else {
 				let newViewConfig = newViewConfigs.filter(view => view.viewName === viewName)[0];
 				if (newViewConfig != null) {
-					let view = new View(newViewConfig.viewName, newViewConfig.tabIcon, newViewConfig.tabCaption, newViewConfig.tabCloseable, newViewConfig.lazyLoading, newViewConfig.visible, newViewConfig.component);
+					let view = new View(newViewConfig.viewName, newViewConfig.tabIcon, newViewConfig.tabCaption, newViewConfig.tabCloseable, newViewConfig.lazyLoading, newViewConfig.visible, newViewConfig.component as UiComponent);
 					tabPanelItem.addTab(view, selected);
 				} else {
 					LayoutDescriptorApplyer.logger.error("View item references non-existing view: " + viewName);
diff --git a/teamapps-client/ts/modules/workspace-layout/LocalViewContainer.ts b/teamapps-client/ts/modules/workspace-layout/LocalViewContainer.ts
index a83cdb69f..205b31fc1 100644
--- a/teamapps-client/ts/modules/workspace-layout/LocalViewContainer.ts
+++ b/teamapps-client/ts/modules/workspace-layout/LocalViewContainer.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -24,17 +24,15 @@ import {UiPanel} from "../UiPanel";
 import {UiWorkSpaceLayoutViewConfig} from "../../generated/UiWorkSpaceLayoutViewConfig";
 import {UiComponentConfig} from "../../generated/UiComponentConfig";
 import {UiWorkSpaceLayout, UiWorkspaceLayoutDndDataTransfer} from "./UiWorkSpaceLayout";
-import * as $ from "jquery";
+
 import {UiSplitDirection} from "../../generated/UiSplitDirection";
 import {UiSplitSizePolicy} from "../../generated/UiSplitSizePolicy";
-import {generateUUID, getMicrosoftBrowserVersion} from "../Common";
+import {css, generateUUID, getMicrosoftBrowserVersion, parseHtml} from "../Common";
 import {bind} from "../util/Bind";
-import {UiComponent} from "../UiComponent";
 import {UiToolbar} from "../tool-container/toolbar/UiToolbar";
 import {createUiWorkSpaceLayoutSplitItemConfig} from "../../generated/UiWorkSpaceLayoutSplitItemConfig";
 import {UiWorkSpaceLayoutItemConfig} from "../../generated/UiWorkSpaceLayoutItemConfig";
 import {createUiWorkSpaceLayoutViewGroupItemConfig, UiWorkSpaceLayoutViewGroupItemConfig} from "../../generated/UiWorkSpaceLayoutViewGroupItemConfig";
-import {EventFactory} from "../../generated/EventFactory";
 import {TeamAppsUiContext} from "../TeamAppsUiContext";
 import {SplitPaneItem} from "./SplitPaneItem";
 import {View} from "./View";
@@ -45,6 +43,8 @@ import {RelativeDropPosition} from "./RelativeDropPosition";
 import {WindowLayoutDescriptor} from "./WindowLayoutDescriptor";
 import {LayoutDescriptorApplyer} from "./LayoutDescriptorApplyer";
 import {UiViewGroupPanelState} from "../../generated/UiViewGroupPanelState";
+import {UiComponent} from "../UiComponent";
+import {UiMultiProgressDisplay} from "../UiDefaultMultiProgressDisplay";
 
 export class LocalViewContainer implements ViewContainer {
 
@@ -54,18 +54,19 @@ export class LocalViewContainer implements ViewContainer {
 	private itemTree = new ItemTree();
 	private _toolbar: UiToolbar;
 
-	private $mainDiv: JQuery;
-	private $toolbarContainer: JQuery;
-	private $contentContainer: JQuery;
-	private $dndActiveRectangle: JQuery;
-	private $dndImage: JQuery;
+	private $mainDiv: HTMLElement;
+	private $toolbarContainer: HTMLElement;
+	private $contentContainer: HTMLElement;
+	private $dndActiveRectangle: HTMLElement;
+	private $dndImage: HTMLElement;
 	private lastDndEventType: string;
-	private _attachedToDom: boolean = false;
 
-	private $maximizationContainerWrapper: JQuery;
-	private $maximizationContainer: JQuery;
-	private $normalContainerOfMaximizedTabPanel: JQuery;
-	private $minimizedViewsBar: JQuery;
+	private $maximizationContainerWrapper: HTMLElement;
+	private $maximizationContainer: HTMLElement;
+	private $normalContainerOfMaximizedTabPanel: HTMLElement;
+	private $minimizedViewsBar: HTMLElement;
+	private $progressContainer: HTMLElement;
+	private multiProgressDisplay: UiMultiProgressDisplay;
 	private viewEventsSuppressed: boolean;
 
 	constructor(private workSpaceLayout: UiWorkSpaceLayout,
@@ -73,25 +74,33 @@ export class LocalViewContainer implements ViewContainer {
 	            viewConfigs: UiWorkSpaceLayoutViewConfig[],
 	            initialLayout: UiWorkSpaceLayoutItemConfig,
 	            private context: TeamAppsUiContext,
-	            private listener: ViewContainerListener) {
-		this.$mainDiv = $(`<div data-id="${this.workSpaceLayoutId}" class="UiWorkSpaceLayout">
+	            private listener: ViewContainerListener,
+	            multiProgressDisplay: UiMultiProgressDisplay) {
+		this.$mainDiv = parseHtml(`<div data-id="${this.workSpaceLayoutId}" class="UiWorkSpaceLayout">
     <div class="toolbar-container"></div>
     <div class="content-container-wrapper">
 	    <div class="content-container"></div>
-		<div class="dnd-target-rectangle"></div>
+		<div class="dnd-target-rectangle hidden"></div>
 		<div class="dnd-drag-image"></div>
 	</div>
-	<div class="minimized-tabpanel-bar"></div>
+	<div class="bottom-bar">
+		<div class="minimized-tabpanel-button-container"></div>
+		<div class="progress-container"></div>
+	</div>
 </div>`);
 
-		this.$toolbarContainer = this.$mainDiv.find('.toolbar-container');
-		this.$contentContainer = this.$mainDiv.find('.content-container');
-		this.$dndActiveRectangle = this.$mainDiv.find('.dnd-target-rectangle');
-		this.$dndImage = this.$mainDiv.find('.dnd-drag-image');
-		this.$minimizedViewsBar = this.$mainDiv.find('.minimized-tabpanel-bar');
+		this.$toolbarContainer = this.$mainDiv.querySelector<HTMLElement>(':scope .toolbar-container');
+		this.$contentContainer = this.$mainDiv.querySelector<HTMLElement>(':scope .content-container');
+		this.$dndActiveRectangle = this.$mainDiv.querySelector<HTMLElement>(':scope .dnd-target-rectangle');
+		this.$dndImage = this.$mainDiv.querySelector<HTMLElement>(':scope .dnd-drag-image');
+		this.$minimizedViewsBar = this.$mainDiv.querySelector<HTMLElement>(':scope .minimized-tabpanel-button-container');
+		this.$progressContainer = this.$mainDiv.querySelector<HTMLElement>(':scope .progress-container');
+		
+		this.setMultiProgressDisplay(multiProgressDisplay);
 
-		this.$maximizationContainerWrapper = $(`<div class="UiWorkSpaceLayout-maximization-container-wrapper"><div class="UiWorkSpaceLayout-maximization-container"></div></div>`).appendTo(document.body);
-		this.$maximizationContainer = this.$maximizationContainerWrapper.find('.UiWorkSpaceLayout-maximization-container');
+		this.$maximizationContainerWrapper = parseHtml(`<div class="UiWorkSpaceLayout-maximization-container-wrapper"><div class="UiWorkSpaceLayout-maximization-container"></div></div>`);
+		document.body.appendChild(this.$maximizationContainerWrapper);
+		this.$maximizationContainer = this.$maximizationContainerWrapper.querySelector<HTMLElement>(':scope .UiWorkSpaceLayout-maximization-container');
 
 		if (initialLayout) {
 			this.redefineLayout(initialLayout, viewConfigs);
@@ -104,7 +113,7 @@ export class LocalViewContainer implements ViewContainer {
 
 		let srcTabPanel = null;
 
-		this.$mainDiv[0].addEventListener('dragstart', (e) => {
+		this.$mainDiv.addEventListener('dragstart', (e) => {
 			this.lastDndEventType = 'dragstart';
 
 			let target = e.target as HTMLElement;
@@ -117,11 +126,11 @@ export class LocalViewContainer implements ViewContainer {
 					let view = this.itemTree.getViewByName(viewName);
 					srcTabPanel = matchingTabPanel;
 					try {
-						let $tabButton = matchingTabPanel.component.getMainDomElement().find(`.tab-button[data-tab-name=${viewName}]`)[0];
+						let $tabButton = matchingTabPanel.component.getMainElement().querySelector<HTMLElement>(`:scope .tab-button[data-tab-name=${viewName}]`);
 						if ($tabButton) {
-							this.$dndImage[0].innerHTML = $tabButton.outerHTML;
-							this.$dndImage.find('.tab-button').removeClass('hidden');
-							e.dataTransfer.setDragImage(this.$dndImage[0], 0, 0);
+							this.$dndImage.innerHTML = $tabButton.outerHTML;
+							this.$dndImage.querySelector<HTMLElement>(':scope .tab-button').classList.remove('hidden');
+							e.dataTransfer.setDragImage(this.$dndImage, 0, 0);
 						}
 					} catch (e) {
 						// microsoft browsers do not support this...
@@ -142,10 +151,10 @@ export class LocalViewContainer implements ViewContainer {
 				}
 			}
 		});
-		this.$mainDiv[0].addEventListener('dragenter', (e) => {
+		this.$mainDiv.addEventListener('dragenter', (e) => {
 			this.lastDndEventType = 'dragenter';
 		});
-		this.$mainDiv[0].addEventListener('dragover', (e) => {
+		this.$mainDiv.addEventListener('dragover', (e) => {
 			this.lastDndEventType = 'dragover';
 
 			if (e.dataTransfer != null && e.dataTransfer.types != null && !e.dataTransfer.types.includes(LocalViewContainer.DND_MIME_TYPE)) {
@@ -156,86 +165,86 @@ export class LocalViewContainer implements ViewContainer {
 
 			if (dropPosition) {
 				e.dataTransfer.dropEffect = 'move';
-				this.$dndActiveRectangle.show();
+				this.$dndActiveRectangle.classList.remove("hidden");
 
 				if (dropPosition.tabPanel) {
-					let $tabPanelContentWrapper = dropPosition.tabPanel.component.getMainDomElement().find('.tabpanel-content-wrapper');
-					let tabPanelContentRect = $tabPanelContentWrapper[0].getBoundingClientRect();
+					let $tabPanelContentWrapper = dropPosition.tabPanel.component.getMainElement().querySelector<HTMLElement>(':scope .tabpanel-content-wrapper');
+					let tabPanelContentRect = $tabPanelContentWrapper.getBoundingClientRect();
 
 					if (dropPosition.relativeDropPosition === RelativeDropPosition.TAB) {
-						this.$dndActiveRectangle.position({
+						$(this.$dndActiveRectangle).position({
 							my: "left top",
 							at: "left top",
 							of: $tabPanelContentWrapper
 						});
-						this.$dndActiveRectangle.css({width: tabPanelContentRect.width, height: tabPanelContentRect.height});
+						css(this.$dndActiveRectangle, {width: tabPanelContentRect.width + "px", height: tabPanelContentRect.height + "px"});
 					} else if (dropPosition.relativeDropPosition === RelativeDropPosition.LEFT) {
-						this.$dndActiveRectangle.position({
+						$(this.$dndActiveRectangle).position({
 							my: "left top",
 							at: "left top",
 							of: $tabPanelContentWrapper
 						});
-						this.$dndActiveRectangle.css({width: tabPanelContentRect.width / 2, height: tabPanelContentRect.height});
+						css(this.$dndActiveRectangle, {width: tabPanelContentRect.width / 2 + "px", height: tabPanelContentRect.height + "px"});
 					} else if (dropPosition.relativeDropPosition === RelativeDropPosition.RIGHT) {
-						this.$dndActiveRectangle.position({
+						$(this.$dndActiveRectangle).position({
 							my: "right top",
 							at: "right top",
 							of: $tabPanelContentWrapper
 						});
-						this.$dndActiveRectangle.css({width: tabPanelContentRect.width / 2, height: tabPanelContentRect.height});
+						css(this.$dndActiveRectangle, {width: tabPanelContentRect.width / 2 + "px", height: tabPanelContentRect.height + "px"});
 					} else if (dropPosition.relativeDropPosition === RelativeDropPosition.TOP) {
-						this.$dndActiveRectangle.position({
+						$(this.$dndActiveRectangle).position({
 							my: "left top",
 							at: "left top",
 							of: $tabPanelContentWrapper
 						});
-						this.$dndActiveRectangle.css({width: tabPanelContentRect.width, height: tabPanelContentRect.height / 2});
+						css(this.$dndActiveRectangle, {width: tabPanelContentRect.width + "px", height: tabPanelContentRect.height / 2 + "px"});
 					} else if (dropPosition.relativeDropPosition === RelativeDropPosition.BOTTOM) {
-						this.$dndActiveRectangle.position({
+						$(this.$dndActiveRectangle).position({
 							my: "left bottom",
 							at: "left bottom",
 							of: $tabPanelContentWrapper
 						});
-						this.$dndActiveRectangle.css({width: tabPanelContentRect.width, height: tabPanelContentRect.height / 2});
+						css(this.$dndActiveRectangle, {width: tabPanelContentRect.width + "px", height: tabPanelContentRect.height / 2 + "px"});
 					}
 				} else {
 					let $workSpaceLayout = this.$contentContainer;
-					let workSpaceLayoutRect = $workSpaceLayout[0].getBoundingClientRect();
+					let workSpaceLayoutRect = $workSpaceLayout.getBoundingClientRect();
 
 					if (dropPosition.relativeDropPosition === RelativeDropPosition.LEFT) {
-						this.$dndActiveRectangle.position({
+						$(this.$dndActiveRectangle).position({
 							my: "left top",
 							at: "left top",
 							of: $workSpaceLayout
 						});
-						this.$dndActiveRectangle.css({width: workSpaceLayoutRect.width / 3, height: workSpaceLayoutRect.height});
+						css(this.$dndActiveRectangle, {width: workSpaceLayoutRect.width / 3 + "px", height: workSpaceLayoutRect.height + "px"});
 					} else if (dropPosition.relativeDropPosition === RelativeDropPosition.RIGHT) {
-						this.$dndActiveRectangle.position({
+						$(this.$dndActiveRectangle).position({
 							my: "right top",
 							at: "right top",
 							of: $workSpaceLayout
 						});
-						this.$dndActiveRectangle.css({width: workSpaceLayoutRect.width / 3, height: workSpaceLayoutRect.height});
+						css(this.$dndActiveRectangle, {width: workSpaceLayoutRect.width / 3 + "px", height: workSpaceLayoutRect.height + "px"});
 					} else if (dropPosition.relativeDropPosition === RelativeDropPosition.TOP) {
-						this.$dndActiveRectangle.position({
+						$(this.$dndActiveRectangle).position({
 							my: "left top",
 							at: "left top",
 							of: $workSpaceLayout
 						});
-						this.$dndActiveRectangle.css({width: workSpaceLayoutRect.width, height: workSpaceLayoutRect.height / 3});
+						css(this.$dndActiveRectangle, {width: workSpaceLayoutRect.width + "px", height: workSpaceLayoutRect.height / 3 + "px"});
 					} else if (dropPosition.relativeDropPosition === RelativeDropPosition.BOTTOM) {
-						this.$dndActiveRectangle.position({
+						$(this.$dndActiveRectangle).position({
 							my: "left bottom",
 							at: "left bottom",
 							of: $workSpaceLayout
 						});
-						this.$dndActiveRectangle.css({width: workSpaceLayoutRect.width, height: workSpaceLayoutRect.height / 3});
+						css(this.$dndActiveRectangle, {width: workSpaceLayoutRect.width + "px", height: workSpaceLayoutRect.height / 3 + "px"});
 					}
 				}
 
 
 			} else {
-				this.$dndActiveRectangle.hide();
+				this.$dndActiveRectangle.classList.add("hidden");
 			}
 
 			if (e.preventDefault) {
@@ -243,43 +252,48 @@ export class LocalViewContainer implements ViewContainer {
 			}
 			return false;
 		});
-		this.$mainDiv[0].addEventListener('dragleave', (e) => {
+		this.$mainDiv.addEventListener('dragleave', (e) => {
 			this.lastDndEventType = 'dragleave';
-			this.$dndActiveRectangle.hide();
+			this.$dndActiveRectangle.classList.add("hidden");
 		});
-		this.$mainDiv[0].addEventListener('drop', (e) => {
-			this.$dndActiveRectangle.hide();
+		this.$mainDiv.addEventListener('drop', (e) => {
+			this.$dndActiveRectangle.classList.add("hidden");
 
 			let dropPosition = this.determineDropPosition(e);
 			let dataTransferString = e.dataTransfer.getData(LocalViewContainer.DND_MIME_TYPE);
 			if (dropPosition && dataTransferString != null) {
 				let dataTransfer = JSON.parse(dataTransferString) as UiWorkspaceLayoutDndDataTransfer;
 				if (this.context.sessionId === dataTransfer.sourceUiSessionId && dataTransfer.sourceWorkspaceLayoutId === this.workSpaceLayoutId) {
-					if (dataTransfer.sourceWindowId === this.windowId) {
-						if (dropPosition.tabPanel) {
-							if (dropPosition.relativeDropPosition === RelativeDropPosition.TAB) {
-								this.moveViewToTab(dataTransfer.viewName, dropPosition.tabPanel.tabs[0].viewName);
+					this.viewEventsSuppressed = true;
+					try {
+						if (dataTransfer.sourceWindowId === this.windowId) {
+							if (dropPosition.tabPanel) {
+								if (dropPosition.relativeDropPosition === RelativeDropPosition.TAB) {
+									this.moveViewToTab(dataTransfer.viewName, dropPosition.tabPanel.tabs[0].viewName);
+								} else {
+									let uiRelativeWorkSpaceViewPosition = UiRelativeWorkSpaceViewPosition[RelativeDropPosition[dropPosition.relativeDropPosition] as keyof typeof UiRelativeWorkSpaceViewPosition];
+									this.moveViewRelativeToOtherView(dataTransfer.viewName, dropPosition.tabPanel.tabs[0].viewName, uiRelativeWorkSpaceViewPosition, UiSplitSizePolicy.RELATIVE, .5);
+								}
 							} else {
 								let uiRelativeWorkSpaceViewPosition = UiRelativeWorkSpaceViewPosition[RelativeDropPosition[dropPosition.relativeDropPosition] as keyof typeof UiRelativeWorkSpaceViewPosition];
-								this.moveViewRelativeToOtherView(dataTransfer.viewName, dropPosition.tabPanel.tabs[0].viewName, uiRelativeWorkSpaceViewPosition, UiSplitSizePolicy.RELATIVE, .5);
+								let isFirst = dropPosition.relativeDropPosition === RelativeDropPosition.LEFT || dropPosition.relativeDropPosition === RelativeDropPosition.TOP;
+								this.moveViewToTopLevel(dataTransfer.viewName, this.windowId, uiRelativeWorkSpaceViewPosition, UiSplitSizePolicy.RELATIVE, isFirst ? .3 : .7);
 							}
 						} else {
-							let uiRelativeWorkSpaceViewPosition = UiRelativeWorkSpaceViewPosition[RelativeDropPosition[dropPosition.relativeDropPosition] as keyof typeof UiRelativeWorkSpaceViewPosition];
-							let isFirst = dropPosition.relativeDropPosition === RelativeDropPosition.LEFT || dropPosition.relativeDropPosition === RelativeDropPosition.TOP;
-							this.moveViewToTopLevel(dataTransfer.viewName, this.windowId, uiRelativeWorkSpaceViewPosition, UiSplitSizePolicy.RELATIVE, isFirst ? .3 : .7);
-						}
-						this.listener.handleLocalLayoutChangedByUser(this.windowId);
-					} else {
-						if (this.workSpaceLayoutId === dataTransfer.sourceWorkspaceLayoutId) {
-							this.listener.handleViewDroppedFromOtherWindow(dataTransfer.sourceWindowId, this.windowId, {
-								viewName: dataTransfer.viewName,
-								tabIcon: dataTransfer.tabIcon,
-								tabCaption: dataTransfer.tabCaption,
-								tabCloseable: dataTransfer.tabCloseable,
-								lazyLoading: dataTransfer.lazyLoading,
-								visible: dataTransfer.visible
-							}, dropPosition.tabPanel && dropPosition.tabPanel.tabs[0].viewName, dropPosition.relativeDropPosition);
+							if (this.workSpaceLayoutId === dataTransfer.sourceWorkspaceLayoutId) {
+								this.listener.handleViewDroppedFromOtherWindow(dataTransfer.sourceWindowId, this.windowId, {
+									viewName: dataTransfer.viewName,
+									tabIcon: dataTransfer.tabIcon,
+									tabCaption: dataTransfer.tabCaption,
+									tabCloseable: dataTransfer.tabCloseable,
+									lazyLoading: dataTransfer.lazyLoading,
+									visible: dataTransfer.visible
+								}, dropPosition.tabPanel && dropPosition.tabPanel.tabs[0].viewName, dropPosition.relativeDropPosition);
+							}
 						}
+					} finally {
+						this.viewEventsSuppressed = false;
+						this.listener.handleLocalLayoutChangedByUser(this.windowId)
 					}
 				} else {
 					LocalViewContainer.logger.warn("The user dropped a view from another UiWorkSpaceLayout. Not accepting this.");
@@ -288,15 +302,15 @@ export class LocalViewContainer implements ViewContainer {
 				return false;
 			}
 		}, false);
-		this.$mainDiv[0].addEventListener('dragend', (e: DragEvent) => {
-			this.$dndActiveRectangle.hide();
+		this.$mainDiv.addEventListener('dragend', (e: DragEvent) => {
+			this.$dndActiveRectangle.classList.add("hidden");
 			const dropEffect = e.dataTransfer.dropEffect;
 			const target = e.target as HTMLElement;
 			const viewName = this.getViewNameForDragTarget(target);
 			const dropSuccessful = dropEffect === 'move';
 			let droppedOutsideWorkSpaceLayout = this.lastDndEventType === 'dragleave';
 			if (droppedOutsideWorkSpaceLayout && !dropSuccessful) {
-				this.createSubWindow(viewName);
+				// this.createSubWindow(viewName); TODO I had to comment this out since when canceling drag and drop using escape, there is not way to tell whether it was a drop outside the window or a canceled drop...
 			} else if (droppedOutsideWorkSpaceLayout && dropSuccessful) {
 				// The other window will request a view refresh. This component will intercept it and register the windowDelegate...
 			} else {
@@ -312,22 +326,18 @@ export class LocalViewContainer implements ViewContainer {
 
 	public setToolbar(toolbar: UiToolbar): void {
 		if (this._toolbar) {
-			this.$toolbarContainer[0].innerHTML = '';
+			this.$toolbarContainer.innerHTML = '';
 		}
 		this._toolbar = toolbar;
 		if (toolbar) {
-			this._toolbar.getMainDomElement().appendTo(this.$toolbarContainer);
-			this._toolbar.attachedToDom = this.attachedToDom;
+			this.$toolbarContainer.appendChild(this._toolbar.getMainElement());
 			this._toolbar.onEmptyStateChanged.addListener(() => this.updateToolbarVisibility());
 		}
 		this.updateToolbarVisibility();
 	}
 
 	private updateToolbarVisibility() {
-		this.$toolbarContainer.toggleClass('hidden', this._toolbar == null || this._toolbar.empty);
-		if (this._toolbar) {
-			this._toolbar.reLayout();
-		}
+		this.$toolbarContainer.classList.toggle('hidden', this._toolbar == null || this._toolbar.empty);
 	}
 
 	public getViewInfo(viewName: string) {
@@ -379,7 +389,7 @@ export class LocalViewContainer implements ViewContainer {
 	}
 
 	private determineDropPosition(e: MouseEvent): { tabPanel?: TabPanelItem, relativeDropPosition: RelativeDropPosition } {
-		let workSpaceLayoutRect = this.$contentContainer[0].getBoundingClientRect();
+		let workSpaceLayoutRect = this.$contentContainer.getBoundingClientRect();
 
 		if (e.pageY - workSpaceLayoutRect.top < 12) {
 			return {relativeDropPosition: RelativeDropPosition.TOP};
@@ -395,8 +405,8 @@ export class LocalViewContainer implements ViewContainer {
 
 		if (matchingTabPanel != null) {
 			let view = matchingTabPanel.tabs[0];
-			let tabPanelContentWrapper = matchingTabPanel.component.getMainDomElement().find('.tabpanel-content-wrapper');
-			let tabPanelContentRect = tabPanelContentWrapper[0].getBoundingClientRect();
+			let tabPanelContentWrapper = matchingTabPanel.component.getMainElement().querySelector<HTMLElement>(':scope .tabpanel-content-wrapper');
+			let tabPanelContentRect = tabPanelContentWrapper.getBoundingClientRect();
 			const relativeEventX = (e.pageX - tabPanelContentRect.left) / tabPanelContentRect.width;
 			const relativeEventY = (e.pageY - tabPanelContentRect.top) / tabPanelContentRect.height;
 
@@ -421,8 +431,8 @@ export class LocalViewContainer implements ViewContainer {
 	private findParentTabPanel(target: HTMLElement): TabPanelItem {
 		let allTabPanelItems = this.itemTree.getAllTabPanelItems();
 		let matchingTabPanel: TabPanelItem;
-		while (target != null && target != this.$mainDiv[0]) {
-			matchingTabPanel = allTabPanelItems.filter(item => item.component.getMainDomElement()[0] === target)[0];
+		while (target != null && target != this.$mainDiv) {
+			matchingTabPanel = allTabPanelItems.filter(item => item.component.getMainElement() === target)[0];
 			if (matchingTabPanel) {
 				break;
 			} else {
@@ -437,8 +447,7 @@ export class LocalViewContainer implements ViewContainer {
 			this.itemTree.rootItem.component.onEmptyStateChanged.removeListener(this.onRootItemEmptyStateChanged);
 		}
 		this.itemTree.rootItem = item;
-		item.component.getMainDomElement().appendTo(this.$contentContainer);
-		item.component.attachedToDom = this.attachedToDom;
+		this.$contentContainer.appendChild(item.component.getMainElement());
 		if (isEmptyable(item.component)) {
 			item.component.onEmptyStateChanged.addListener(this.onRootItemEmptyStateChanged);
 			this.onRootItemEmptyStateChanged(item.component.empty);
@@ -447,41 +456,48 @@ export class LocalViewContainer implements ViewContainer {
 
 	@bind
 	private onRootItemEmptyStateChanged(empty: boolean) {
-		this.$contentContainer.toggleClass("hidden", empty)
+		this.$contentContainer.classList.toggle("hidden", empty)
 	}
 
 	@bind
 	private createTabPanelItem(config: UiWorkSpaceLayoutViewGroupItemConfig, parent: SplitPaneItem) {
 		let tabPanelItem = new TabPanelItem(config.id, config.persistent, parent, this.context);
-		tabPanelItem.onTabSelected.addListener(this.tabSelected);
+		tabPanelItem.onTabSelected.addListener(eventObject => this.tabSelected(eventObject, tabPanelItem));
 		tabPanelItem.onTabNeedsRefresh.addListener(this.tabNeedsRefresh);
 		tabPanelItem.onPanelStateChangeTriggered.addListener(panelState => this.setViewGroupPanelState2(tabPanelItem, panelState, true));
 		tabPanelItem.onTabClosed.addListener(tabId => {
 			if (tabPanelItem.tabs.length === 0) {
 				this.setViewGroupPanelState2(tabPanelItem, UiViewGroupPanelState.NORMAL, false);
 			}
-			this.workSpaceLayout.onViewClosed.fire(EventFactory.createUiWorkSpaceLayout_ViewClosedEvent(this.workSpaceLayoutId, tabId));
+			this.workSpaceLayout.onViewClosed.fire({
+				viewName: tabId
+			});
 		});
 		return tabPanelItem;
 	}
 
-	@bind
 	private tabSelected(eventObject: { tabPanelItemId: string, tabId: string }, tabPanelItem: TabPanelItem) {
 		let otherViewNames = tabPanelItem.tabs.map(tab => tab.viewName).filter(otherViewName => otherViewName !== eventObject.tabId);
 		if (!this.viewEventsSuppressed) {
-			this.workSpaceLayout.onViewSelected.fire(EventFactory.createUiWorkSpaceLayout_ViewSelectedEvent(this.workSpaceLayoutId, eventObject.tabPanelItemId, eventObject.tabId, otherViewNames));
+			this.workSpaceLayout.onViewSelected.fire({
+				viewGroupId: eventObject.tabPanelItemId,
+				viewName: eventObject.tabId,
+				siblingViewNames: otherViewNames
+			});
 		}
 	}
 
 	@bind
 	private tabNeedsRefresh(eventObject: { tabId: string }) {
 		if (!this.viewEventsSuppressed) {
-			this.workSpaceLayout.onViewNeedsRefresh.fire(EventFactory.createUiWorkSpaceLayout_ViewNeedsRefreshEvent(this.workSpaceLayoutId, eventObject.tabId));
+			this.workSpaceLayout.onViewNeedsRefresh.fire({
+				viewName: eventObject.tabId
+			});
 		}
 	}
 
 	private createView(newViewConfig: UiWorkSpaceLayoutViewConfig) {
-		return new View(newViewConfig.viewName, newViewConfig.tabIcon, newViewConfig.tabCaption, newViewConfig.tabCloseable, newViewConfig.lazyLoading, newViewConfig.visible, newViewConfig.component);
+		return new View(newViewConfig.viewName, newViewConfig.tabIcon, newViewConfig.tabCaption, newViewConfig.tabCloseable, newViewConfig.lazyLoading, newViewConfig.visible, newViewConfig.component as UiComponent);
 	}
 
 	addViewToTopLevel(newViewConfig: UiWorkSpaceLayoutViewConfig, windowId: string, relativePosition: UiRelativeWorkSpaceViewPosition, sizePolicy: UiSplitSizePolicy, referenceChildSize: number): void {
@@ -521,13 +537,13 @@ export class LocalViewContainer implements ViewContainer {
 			newTabPanelItem.addTab(view, true);
 
 			if (existingTabPanelIsPosition === 'FIRST') {
-				oldParent.component.firstChildComponent.getMainDomElement().detach();
+				oldParent.component.firstChildComponent.getMainElement().remove();
 				oldParent.firstChild = newSplitPaneItem;
 			} else if (existingTabPanelIsPosition === 'LAST') {
-				oldParent.component.lastChildComponent.getMainDomElement().detach();
+				oldParent.component.lastChildComponent.getMainElement().remove();
 				oldParent.lastChild = newSplitPaneItem;
 			} else { // siblingTabPanelItem is root!
-				siblingTabPanelItem.component.getMainDomElement().detach();
+				siblingTabPanelItem.component.getMainElement().remove();
 				this.setRootItem(newSplitPaneItem);
 			}
 
@@ -543,7 +559,7 @@ export class LocalViewContainer implements ViewContainer {
 				let isVerticalSplit = [UiRelativeWorkSpaceViewPosition.LEFT, UiRelativeWorkSpaceViewPosition.RIGHT].indexOf(relativePosition) !== -1;
 				let splitPaneItem = new SplitPaneItem(generateUUID(), null, isVerticalSplit ? UiSplitDirection.VERTICAL : UiSplitDirection.HORIZONTAL, sizePolicy, referenceChildSize, this.context);
 				let oldRootItem = this.itemTree.rootItem;
-				oldRootItem.component.getMainDomElement().detach();
+				oldRootItem.component.getMainElement().remove();
 				this.setRootItem(splitPaneItem);
 
 				let newTabPanelItem = this.createTabPanelItem({id: generateUUID(), viewNames: []}, splitPaneItem);
@@ -555,9 +571,6 @@ export class LocalViewContainer implements ViewContainer {
 				splitPaneItem.lastChild = newItemWillBeFirstChild ? oldRootItem : newTabPanelItem;
 			}
 		}
-		if (view.component) {
-			view.component.attachedToDom = this._attachedToDom;
-		}
 		this.itemTree.updateIndex();
 	}
 
@@ -588,11 +601,11 @@ export class LocalViewContainer implements ViewContainer {
 			let siblingItem: ItemTreeItem<UiComponent<UiComponentConfig>>;
 			if (tabPanelItemIsFirstChild) {
 				siblingItem = parentSplitPaneItem.lastChild;
-				siblingItem.component.getMainDomElement().detach();
+				siblingItem.component.getMainElement().remove();
 				parentSplitPaneItem.lastChild = null;
 			} else {
 				siblingItem = parentSplitPaneItem.firstChild;
-				siblingItem.component.getMainDomElement().detach();
+				siblingItem.component.getMainElement().remove();
 				parentSplitPaneItem.firstChild = null;
 			}
 			let grandParentSplitPaneItem = parentSplitPaneItem.parent;
@@ -605,7 +618,7 @@ export class LocalViewContainer implements ViewContainer {
 				}
 			} else {
 				parentSplitPaneItem.component.destroy();
-				parentSplitPaneItem.component.getMainDomElement().detach();
+				parentSplitPaneItem.component.getMainElement().remove();
 				this.setRootItem(siblingItem);
 				siblingItem.parent = null;
 			}
@@ -621,7 +634,7 @@ export class LocalViewContainer implements ViewContainer {
 		if (viewName === newSiblingName && view.parent.tabs.length <= 1) {
 			return; // would not have any effect anyway
 		}
-		view.component.getMainDomElement().detach();
+		view.component.getMainElement().remove();
 		this.removeView(viewName, false);
 		this.addViewItemToNewPosition(view, newSiblingName, relativePosition, sizePolicy, referenceChildSize);
 	}
@@ -631,7 +644,7 @@ export class LocalViewContainer implements ViewContainer {
 		if (viewName === newSiblingName) {
 			return; // would not have any effect anyway
 		}
-		view.component.getMainDomElement().detach();
+		view.component.getMainElement().remove();
 		this.removeView(viewName, false);
 		this.itemTree.getViewByName(newSiblingName).parent.addTab(view, true);
 		this.itemTree.updateIndex();
@@ -640,9 +653,6 @@ export class LocalViewContainer implements ViewContainer {
 	public refreshViewComponent(viewName: string, component: UiComponent) {
 		let view = this.itemTree.getViewByName(viewName);
 		view.component = component;
-		if (view.component) {
-			view.component.attachedToDom = this._attachedToDom;
-		}
 	}
 
 	refreshViewAttributes(viewName: string, tabIcon: string, tabCaption: string, tabCloseable: boolean, visible: boolean): void {
@@ -662,7 +672,7 @@ export class LocalViewContainer implements ViewContainer {
 			(viewGroupItem, panelState) => this.setViewGroupPanelState(viewGroupItem.id, panelState),
 			this.context
 		).apply(this.itemTree.rootItem, newLayout, addedViewConfigs);
-		this.setRootItem(newRootItem)
+		this.setRootItem(newRootItem);
 	}
 
 	selectViewTab(viewName: string) {
@@ -702,60 +712,34 @@ export class LocalViewContainer implements ViewContainer {
 		}
 		tabPanelItem.state = UiViewGroupPanelState.MINIMIZED;
 		this.$minimizedViewsBar.append(tabPanelItem.$minimizedTrayButton);
-		this.reLayout();
 	}
 
 	private maximizeTabPanel(tabPanelItem: TabPanelItem) {
-		const $element = tabPanelItem.component.getMainDomElement();
-		this.$normalContainerOfMaximizedTabPanel = $element.parent();
-		this.$maximizationContainerWrapper.addClass("show");
-		this.$maximizationContainer.append($element).addClass("animated zoomIn");
-		tabPanelItem.component.reLayout();
+		const $element = tabPanelItem.component.getMainElement();
+		this.$normalContainerOfMaximizedTabPanel = $element.parentElement;
+		this.$maximizationContainerWrapper.classList.add("show");
+		this.$maximizationContainer.append($element);
+		this.$maximizationContainer.classList.add("animate__animated", "animate__zoomIn");
 		tabPanelItem.state = UiViewGroupPanelState.MAXIMIZED;
 	}
 
 	private restoreTabPanel(tabPanelItem: TabPanelItem) {
 		if (tabPanelItem.state === UiViewGroupPanelState.MAXIMIZED) {
-			const $element = tabPanelItem.component.getMainDomElement();
-			this.$maximizationContainerWrapper.removeClass("show");
-			this.$maximizationContainer.append($element).removeClass("animated zoomIn");
-			$element.appendTo(this.$normalContainerOfMaximizedTabPanel);
+			const $element = tabPanelItem.component.getMainElement();
+			this.$maximizationContainerWrapper.classList.remove("show");
+			this.$maximizationContainer.append($element);
+			this.$maximizationContainer.classList.remove("animate__animated", "animate__zoomIn");
+			this.$normalContainerOfMaximizedTabPanel.appendChild($element);
 			tabPanelItem.state = UiViewGroupPanelState.NORMAL;
-			tabPanelItem.component.reLayout();
 		} else if (tabPanelItem.state === UiViewGroupPanelState.MINIMIZED) {
-			tabPanelItem.$minimizedTrayButton.detach();
+			tabPanelItem.$minimizedTrayButton.remove();
 			tabPanelItem.state = UiViewGroupPanelState.NORMAL;
-			tabPanelItem.component.reLayout();
-		}
-	}
-
-	public set attachedToDom(attachedToDom: boolean) {
-		let wasAttachedToDom = this._attachedToDom;
-		this._attachedToDom = attachedToDom;
-		if (attachedToDom && !wasAttachedToDom) {
-			this.onAttachedToDom();
 		}
 	}
 
-	public get attachedToDom() {
-		return this._attachedToDom;
-	}
-
-	private onAttachedToDom() {
-		if (this._toolbar) this._toolbar.attachedToDom = true;
-		if (this.itemTree.rootItem.component) this.itemTree.rootItem.component.attachedToDom = true;
-	}
-
-	reLayout() {
-		this.$contentContainer.css("overflow", "hidden"); // enforce container size (from flex layout) over children sizes!
-		this._toolbar && this._toolbar.reLayout();
-		this.itemTree.rootItem && this.itemTree.rootItem.component.reLayout();
-		this.$contentContainer.css("overflow", "visible");
-	}
-
 	destroy() {
 		if (this.itemTree.rootItem.component) this.itemTree.rootItem.component.destroy();
-		this.$maximizationContainerWrapper.detach();
+		this.$maximizationContainerWrapper.remove();
 	}
 
 	getMainDomElement() {
@@ -791,9 +775,17 @@ export class LocalViewContainer implements ViewContainer {
 				if (selectedTabId != null) { // might be completely empty!
 					let selectedView: View = tabPanelItem.tabs.filter(tab => tab.viewName === selectedTabId)[0];
 					if (selectedView.component == null && selectedView.lazyLoading) {
-						this.workSpaceLayout.onViewNeedsRefresh.fire(EventFactory.createUiWorkSpaceLayout_ViewNeedsRefreshEvent(this.workSpaceLayoutId, selectedTabId));
+						this.workSpaceLayout.onViewNeedsRefresh.fire({
+							viewName: selectedTabId
+						});
 					}
 				}
 			});
 	}
+
+	setMultiProgressDisplay(multiProgressDisplay: UiMultiProgressDisplay) {
+		this.multiProgressDisplay && this.multiProgressDisplay.getMainElement().remove();
+		this.multiProgressDisplay = multiProgressDisplay;
+		multiProgressDisplay && this.$progressContainer.appendChild(multiProgressDisplay.getMainElement());
+	}
 }
diff --git a/teamapps-client/ts/modules/workspace-layout/RelativeDropPosition.ts b/teamapps-client/ts/modules/workspace-layout/RelativeDropPosition.ts
index 3555737b8..3929f1ba9 100644
--- a/teamapps-client/ts/modules/workspace-layout/RelativeDropPosition.ts
+++ b/teamapps-client/ts/modules/workspace-layout/RelativeDropPosition.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-client/ts/modules/workspace-layout/SplitPaneItem.ts b/teamapps-client/ts/modules/workspace-layout/SplitPaneItem.ts
index 1e9bd8e02..a262adb0c 100644
--- a/teamapps-client/ts/modules/workspace-layout/SplitPaneItem.ts
+++ b/teamapps-client/ts/modules/workspace-layout/SplitPaneItem.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -23,8 +23,8 @@ import {TeamAppsUiContext} from "../TeamAppsUiContext";
 import {UiSplitDirection} from "../../generated/UiSplitDirection";
 import {UiSplitSizePolicy} from "../../generated/UiSplitSizePolicy";
 import {ItemTreeItem} from "./ItemTree";
-import {UiComponent} from "../UiComponent";
 import {generateUUID} from "../Common";
+import {UiComponent} from "../UiComponent";
 
 export class SplitPaneItem implements ItemTreeItem<UiSplitPane> {
 	id: string;
diff --git a/teamapps-client/ts/modules/workspace-layout/TabPanelItem.ts b/teamapps-client/ts/modules/workspace-layout/TabPanelItem.ts
index 9a243c917..2a6d813ce 100644
--- a/teamapps-client/ts/modules/workspace-layout/TabPanelItem.ts
+++ b/teamapps-client/ts/modules/workspace-layout/TabPanelItem.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -22,15 +22,15 @@ import {TeamAppsEvent} from "../util/TeamAppsEvent";
 import {UiComponentConfig} from "../../generated/UiComponentConfig";
 import {TeamAppsUiContext} from "../TeamAppsUiContext";
 import {UiTabPanel} from "../UiTabPanel";
-import * as $ from "jquery";
+
 import {UiTabPanelTabStyle} from "../../generated/UiTabPanelTabStyle";
 import {ItemTreeItem} from "./ItemTree";
-import {UiComponent} from "../UiComponent";
 import {View} from "./View";
 import {SplitPaneItem} from "./SplitPaneItem";
-import {generateUUID} from "../Common";
+import {generateUUID, parseHtml} from "../Common";
 import {UiViewGroupPanelState} from "../../generated/UiViewGroupPanelState";
 import {UiWindowButtonType} from "../../generated/UiWindowButtonType";
+import {UiComponent} from "../UiComponent";
 
 class MinimizableTabPanel extends UiTabPanel {
 
@@ -62,12 +62,12 @@ export class TabPanelItem implements ItemTreeItem<UiTabPanel> {
 		return this._tabs.map(tab => tab.view);
 	}
 
-	$minimizedTrayButton: JQuery = $(`<div class="minimized-tabpanel-button"></div>`);
+	$minimizedTrayButton: HTMLElement = parseHtml(`<div class="minimized-tabpanel-button"></div>`);
 
-	public readonly onTabSelected: TeamAppsEvent<{ tabPanelItemId: string, tabId: string }> = new TeamAppsEvent(this);
-	public readonly onTabNeedsRefresh: TeamAppsEvent<{ tabId: string }> = new TeamAppsEvent(this);
-	public readonly onTabClosed: TeamAppsEvent<string> = new TeamAppsEvent(this);
-	public readonly onPanelStateChangeTriggered: TeamAppsEvent<UiViewGroupPanelState> = new TeamAppsEvent(this);
+	public readonly onTabSelected: TeamAppsEvent<{ tabPanelItemId: string, tabId: string }> = new TeamAppsEvent();
+	public readonly onTabNeedsRefresh: TeamAppsEvent<{ tabId: string }> = new TeamAppsEvent();
+	public readonly onTabClosed: TeamAppsEvent<string> = new TeamAppsEvent();
+	public readonly onPanelStateChangeTriggered: TeamAppsEvent<UiViewGroupPanelState> = new TeamAppsEvent();
 
 	private _state: UiViewGroupPanelState = UiViewGroupPanelState.NORMAL;
 
@@ -108,7 +108,7 @@ export class TabPanelItem implements ItemTreeItem<UiTabPanel> {
 
 	private createWindowButtonList(closeButton?: boolean): UiWindowButtonType[] {
 		let toolButtons: UiWindowButtonType[] = [UiWindowButtonType.MINIMIZE, UiWindowButtonType.MAXIMIZE_RESTORE];
-		if (closeButton != null) {
+		if (closeButton) {
 			toolButtons.push(UiWindowButtonType.CLOSE);
 		}
 		return toolButtons;
@@ -165,7 +165,7 @@ export class TabPanelItem implements ItemTreeItem<UiTabPanel> {
 	}
 
 	public updateTab(viewName: string, component: UiComponent<UiComponentConfig>) {
-		this.component.setTabContent(viewName, component);
+		this.component.setTabContent(viewName, component, true);
 		this.updateWindowToolButtons();
 	}
 
@@ -186,7 +186,7 @@ export class TabPanelItem implements ItemTreeItem<UiTabPanel> {
 			this.component.setWindowButtons(this.createWindowButtonList());
 		} else {
 			this._tabs.forEach(tab => {
-				tab.view.setWindowButtons(this.createWindowButtonList(true));
+				tab.view.setWindowButtons(this.createWindowButtonList(tab.view.tabCloseable));
 			});
 		}
 	}
@@ -207,11 +207,11 @@ export class TabPanelItem implements ItemTreeItem<UiTabPanel> {
 
 	private updateMinimizedButton() {
 		let iconSize = this.context.config.optimizedForTouch ? 16 : 12;
-		this.$minimizedTrayButton[0].innerHTML = '';
+		this.$minimizedTrayButton.innerHTML = '';
 		// noinspection CssUnknownTarget
-		this.$minimizedTrayButton.append(`<div class="tab-icon img img-${iconSize}" style="background-image: url('/resources/window-restore-grey.png')"></div>`);
-		this._tabs.forEach(tab => this.$minimizedTrayButton.append(`<div class="tab-icon img img-${iconSize}" style="background-image: url('${this.context.getIconPath(tab.view.tabIcon, iconSize)}')"></div>`));
-		this.$minimizedTrayButton.click(() => this.onPanelStateChangeTriggered.fire(UiViewGroupPanelState.NORMAL));
+		this.$minimizedTrayButton.append(parseHtml(`<div class="tab-icon img img-${iconSize}" style="background-image: url('/resources/window-restore-grey.png')"></div>`));
+		this._tabs.forEach(tab => this.$minimizedTrayButton.append(parseHtml(`<div class="tab-icon img img-${iconSize}" style="background-image: url('${tab.view.tabIcon}')"></div>`)));
+		this.$minimizedTrayButton.addEventListener("click", () => this.onPanelStateChangeTriggered.fire(UiViewGroupPanelState.NORMAL));
 	}
 
 	get state(): UiViewGroupPanelState {
diff --git a/teamapps-client/ts/modules/workspace-layout/UiWorkSpaceLayout.ts b/teamapps-client/ts/modules/workspace-layout/UiWorkSpaceLayout.ts
index 7b0f451d4..336d6e0a1 100644
--- a/teamapps-client/ts/modules/workspace-layout/UiWorkSpaceLayout.ts
+++ b/teamapps-client/ts/modules/workspace-layout/UiWorkSpaceLayout.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,7 +17,6 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-import {UiComponentConfig} from "../../generated/UiComponentConfig";
 import {TeamAppsEvent} from "../util/TeamAppsEvent";
 import {UiConfigurationConfig} from "../../generated/UiConfigurationConfig";
 import {
@@ -25,19 +24,19 @@ import {
 	UiWorkSpaceLayout_ChildWindowCreationFailedEvent,
 	UiWorkSpaceLayout_LayoutChangedEvent,
 	UiWorkSpaceLayout_ViewClosedEvent,
-	UiWorkSpaceLayout_ViewDraggedToNewWindowEvent, UiWorkSpaceLayout_ViewGroupPanelStateChangedEvent,
+	UiWorkSpaceLayout_ViewDraggedToNewWindowEvent,
+	UiWorkSpaceLayout_ViewGroupPanelStateChangedEvent,
 	UiWorkSpaceLayout_ViewNeedsRefreshEvent,
 	UiWorkSpaceLayout_ViewSelectedEvent,
 	UiWorkSpaceLayoutCommandHandler,
-	UiWorkSpaceLayoutConfig, UiWorkSpaceLayoutEventSource
+	UiWorkSpaceLayoutConfig,
+	UiWorkSpaceLayoutEventSource
 } from "../../generated/UiWorkSpaceLayoutConfig";
-import {UiToolbarConfig} from "../../generated/UiToolbarConfig";
 import {UiWorkSpaceLayoutViewConfig} from "../../generated/UiWorkSpaceLayoutViewConfig";
 import {UiWorkSpaceLayoutItemConfig} from "../../generated/UiWorkSpaceLayoutItemConfig";
-import {UiComponent} from "../UiComponent";
+import {AbstractUiComponent} from "../AbstractUiComponent";
 import {TeamAppsUiContext, TeamAppsUiContextInternalApi} from "../TeamAppsUiContext";
 import {UiSplitSizePolicy} from "../../generated/UiSplitSizePolicy";
-import {EventFactory} from "../../generated/EventFactory";
 import {UiRelativeWorkSpaceViewPosition} from "../../generated/UiRelativeWorkSpaceViewPosition";
 import {TeamAppsUiComponentRegistry} from "../TeamAppsUiComponentRegistry";
 import {ViewInfo} from "./ViewInfo";
@@ -51,6 +50,9 @@ import {UiWorkSpaceLayoutSplitItemConfig} from "../../generated/UiWorkSpaceLayou
 import {UiTemplateConfig} from "../../generated/UiTemplateConfig";
 import {UiViewGroupPanelState} from "../../generated/UiViewGroupPanelState";
 import {UiToolbar} from "../tool-container/toolbar/UiToolbar";
+import {UiComponent} from "../UiComponent";
+import {UiProgressDisplay} from "../UiProgressDisplay";
+import {UiMultiProgressDisplay} from "../UiDefaultMultiProgressDisplay";
 
 export type UiWorkspaceLayoutSubWindowProtocol_INIT_OK = {
 	_type: 'INIT_OK',
@@ -77,16 +79,16 @@ export type UiWorkspaceLayoutDndDataTransfer = {
 	visible: boolean
 }
 
-export class UiWorkSpaceLayout extends UiComponent<UiWorkSpaceLayoutConfig> implements UiWorkSpaceLayoutCommandHandler, UiWorkSpaceLayoutEventSource {
+export class UiWorkSpaceLayout extends AbstractUiComponent<UiWorkSpaceLayoutConfig> implements UiWorkSpaceLayoutCommandHandler, UiWorkSpaceLayoutEventSource {
 
-	public readonly onLayoutChanged: TeamAppsEvent<UiWorkSpaceLayout_LayoutChangedEvent> = new TeamAppsEvent(this);
-	public readonly onViewDraggedToNewWindow: TeamAppsEvent<UiWorkSpaceLayout_ViewDraggedToNewWindowEvent> = new TeamAppsEvent(this);
-	public readonly onViewNeedsRefresh: TeamAppsEvent<UiWorkSpaceLayout_ViewNeedsRefreshEvent> = new TeamAppsEvent(this);
-	public readonly onChildWindowCreationFailed: TeamAppsEvent<UiWorkSpaceLayout_ChildWindowCreationFailedEvent> = new TeamAppsEvent(this);
-	public readonly onChildWindowClosed: TeamAppsEvent<UiWorkSpaceLayout_ChildWindowClosedEvent> = new TeamAppsEvent(this);
-	public readonly onViewSelected: TeamAppsEvent<UiWorkSpaceLayout_ViewSelectedEvent> = new TeamAppsEvent(this);
-	public readonly onViewClosed: TeamAppsEvent<UiWorkSpaceLayout_ViewClosedEvent> = new TeamAppsEvent(this);
-	public readonly onViewGroupPanelStateChanged: TeamAppsEvent<UiWorkSpaceLayout_ViewGroupPanelStateChangedEvent> = new TeamAppsEvent(this);
+	public readonly onLayoutChanged: TeamAppsEvent<UiWorkSpaceLayout_LayoutChangedEvent> = new TeamAppsEvent();
+	public readonly onViewDraggedToNewWindow: TeamAppsEvent<UiWorkSpaceLayout_ViewDraggedToNewWindowEvent> = new TeamAppsEvent();
+	public readonly onViewNeedsRefresh: TeamAppsEvent<UiWorkSpaceLayout_ViewNeedsRefreshEvent> = new TeamAppsEvent();
+	public readonly onChildWindowCreationFailed: TeamAppsEvent<UiWorkSpaceLayout_ChildWindowCreationFailedEvent> = new TeamAppsEvent();
+	public readonly onChildWindowClosed: TeamAppsEvent<UiWorkSpaceLayout_ChildWindowClosedEvent> = new TeamAppsEvent();
+	public readonly onViewSelected: TeamAppsEvent<UiWorkSpaceLayout_ViewSelectedEvent> = new TeamAppsEvent();
+	public readonly onViewClosed: TeamAppsEvent<UiWorkSpaceLayout_ViewClosedEvent> = new TeamAppsEvent();
+	public readonly onViewGroupPanelStateChanged: TeamAppsEvent<UiWorkSpaceLayout_ViewGroupPanelStateChangedEvent> = new TeamAppsEvent();
 
 	public static readonly ROOT_WINDOW_ID: string = "ROOT_WINDOW";
 
@@ -110,9 +112,9 @@ export class UiWorkSpaceLayout extends UiComponent<UiWorkSpaceLayoutConfig> impl
 			handleChildWindowCreationFailed: (viewName: string) => this.handleChildWindowCreationFailed(viewName),
 			handleViewDroppedFromOtherWindow: (sourceWindowId, targetWindowId, viewInfo, existingViewName, relativePosition) => this.handleViewDroppedFromOtherWindow(sourceWindowId, targetWindowId, viewInfo, existingViewName, relativePosition),
 			handleLocalLayoutChangedByUser: (windowId: string) => this.handleLocalLayoutChangedByUser(windowId)
-		});
+		}, config.multiProgressDisplay as UiProgressDisplay);
 
-		this.localViewContainer.setToolbar(config.toolbar);
+		this.localViewContainer.setToolbar(config.toolbar as UiToolbar);
 
 		this.viewContainersByWindowId[this.windowId] = this.localViewContainer;
 	}
@@ -129,16 +131,22 @@ export class UiWorkSpaceLayout extends UiComponent<UiWorkSpaceLayoutConfig> impl
 					handleInitialized: async (windowId: string, initialViewInfo: ViewInfo) => {
 						await this.moveViewToTopLevel(initialViewInfo.viewName, childWindowId, null, null, null);
 						const layout = await this.getCurrentLayout();
-						this.onViewDraggedToNewWindow.fire(EventFactory.createUiWorkSpaceLayout_ViewDraggedToNewWindowEvent(this.getId(), windowId, initialViewInfo.viewName, layout));
+						this.onViewDraggedToNewWindow.fire({
+							windowId: windowId,
+							viewName: initialViewInfo.viewName,
+							layoutsByWindowId: layout
+						});
 					},
 					handleClosed: (childWindowViewContainer: ChildWindowViewContainer) => {
-						this.onChildWindowClosed.fire(EventFactory.createUiWorkSpaceLayout_ChildWindowClosedEvent(this.getId(), childWindowId));
+						this.onChildWindowClosed.fire({
+							windowId: childWindowId
+						});
 						delete this.viewContainersByWindowId[childWindowViewContainer.windowId];
 					},
 					handleUiEvent: (uiEvent) => {
 						// On the one hand, this is an event that gets emitted by (or at least bypassed through) the workspaceLayout.
 						// But the workspace layout should not be seen as the emitter!
-						(this._context as any as TeamAppsUiContextInternalApi).fireEvent(uiEvent);
+						(this._context as any as TeamAppsUiContextInternalApi).sendEvent(uiEvent);
 					}
 				});
 			this.viewContainersByWindowId[childWindowId] = childWindowViewContainer;
@@ -153,7 +161,9 @@ export class UiWorkSpaceLayout extends UiComponent<UiWorkSpaceLayoutConfig> impl
 
 	private handleChildWindowCreationFailed(viewName: string) {
 		if (this.isRootWindow) {
-			this.onChildWindowCreationFailed.fire(EventFactory.createUiWorkSpaceLayout_ChildWindowCreationFailedEvent(this.getId(), viewName))
+			this.onChildWindowCreationFailed.fire({
+				viewName: viewName
+			})
 		} else {
 			this.rootWindowMessagePort.postMessage({
 				_type: 'CHILD_WINDOW_CREATION_FAILED',
@@ -294,7 +304,14 @@ export class UiWorkSpaceLayout extends UiComponent<UiWorkSpaceLayoutConfig> impl
 	}
 
 	private async fireLayoutChanged() {
-		this.onLayoutChanged.fire(EventFactory.createUiWorkSpaceLayout_LayoutChangedEvent(this.getId(), await this.getCurrentLayout()));
+		let layout = await this.getCurrentLayout();
+		if (layout[UiWorkSpaceLayout.ROOT_WINDOW_ID] == null) {
+			return; // event during initialization. Not worth it.
+		}
+
+		this.onLayoutChanged.fire({
+			layoutsByWindowId: layout
+		});
 	}
 
 	private async getViewContainerByViewName(viewName: string): Promise<ViewContainer> {
@@ -384,10 +401,6 @@ export class UiWorkSpaceLayout extends UiComponent<UiWorkSpaceLayoutConfig> impl
 		};
 	}
 
-	public onResize(): void {
-		this.localViewContainer.reLayout();
-	}
-
 	public setToolbar(toolbar: UiToolbar): void {
 		this.localViewContainer.setToolbar(toolbar);
 	}
@@ -412,20 +425,24 @@ export class UiWorkSpaceLayout extends UiComponent<UiWorkSpaceLayoutConfig> impl
 		return this.localViewContainer.getLayoutDescriptor();
 	}
 
-	public getMainDomElement(): JQuery {
+	public doGetMainElement(): HTMLElement {
 		return this.localViewContainer.getMainDomElement();
 	}
 
-	protected onAttachedToDom() {
-		this.localViewContainer.attachedToDom = true;
-	}
-
 	public destroy(): void {
+		super.destroy();
 		this.localViewContainer.destroy();
 	}
 
 	fireViewGroupPanelStateChanged(viewGroupId: string, panelState: UiViewGroupPanelState) {
-		this.onViewGroupPanelStateChanged.fire(EventFactory.createUiWorkSpaceLayout_ViewGroupPanelStateChangedEvent(this.getId(), viewGroupId, panelState));
+		this.onViewGroupPanelStateChanged.fire({
+			viewGroupId: viewGroupId,
+			panelState: panelState
+		});
+	}
+
+	setMultiProgressDisplay(multiProgressDisplay: UiMultiProgressDisplay): void {
+		this.localViewContainer.setMultiProgressDisplay(multiProgressDisplay);
 	}
 }
 
diff --git a/teamapps-client/ts/modules/workspace-layout/UiWorkSpaceLayoutChildWindowTeamAppsUiContext.ts b/teamapps-client/ts/modules/workspace-layout/UiWorkSpaceLayoutChildWindowTeamAppsUiContext.ts
index af4c4e73b..9fa4a9155 100644
--- a/teamapps-client/ts/modules/workspace-layout/UiWorkSpaceLayoutChildWindowTeamAppsUiContext.ts
+++ b/teamapps-client/ts/modules/workspace-layout/UiWorkSpaceLayoutChildWindowTeamAppsUiContext.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,27 +17,28 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-import * as $ from "jquery";
+
 import * as log from "loglevel";
 import {UiWorkSpaceLayout, UiWorkspaceLayoutSubWindowProtocol_INIT_OK} from "./UiWorkSpaceLayout";
 import {UiRootPanel} from "../UiRootPanel";
 import {UiComponentConfig} from "../../generated/UiComponentConfig";
 import {TeamAppsUiContext, TeamAppsUiContextInternalApi} from "../TeamAppsUiContext";
-import {UiComponent} from "../UiComponent";
-import {getIconPath, logException} from "../Common";
+import {logException} from "../Common";
 import {UiConfigurationConfig} from "../../generated/UiConfigurationConfig";
 import {UiEvent} from "../../generated/UiEvent";
-import {EventRegistrator} from "../../generated/EventRegistrator";
+import {ComponentEventSubscriptionManager} from "../util/ComponentEventSubscriptionManager";
 import {TeamAppsUiComponentRegistry} from "../TeamAppsUiComponentRegistry";
 import {TemplateRegistry} from "../TemplateRegistry";
 import {TeamAppsEvent} from "../util/TeamAppsEvent";
 import {UiCommand} from "../../generated/UiCommand";
+import {UiComponent} from "../UiComponent";
+import {componentEventDescriptors, staticComponentEventDescriptors} from "../../generated/ComponentEventDescriptors";
 
 export class UiWorkSpaceLayoutChildWindowTeamAppsUiContext implements TeamAppsUiContext, TeamAppsUiContextInternalApi {
 
 	private static logger: log.Logger = log.getLogger("UiWorkSpaceLayoutChildWindowTeamAppsUiContext");
 
-	public readonly onStaticMethodCommandInvocation: TeamAppsEvent<UiCommand> = new TeamAppsEvent(this);
+	public readonly onStaticMethodCommandInvocation: TeamAppsEvent<UiCommand> = new TeamAppsEvent();
 	private _sessionId: string;
 	public readonly isHighDensityScreen: boolean;
 	public config: UiConfigurationConfig;
@@ -48,12 +49,17 @@ export class UiWorkSpaceLayoutChildWindowTeamAppsUiContext implements TeamAppsUi
 	private _executingCommand: boolean = false;
 	private components: { [identifier: string]: UiComponent<UiComponentConfig> } = {};
 
+	private componentEventSubscriptionManager: ComponentEventSubscriptionManager;
+
 	constructor() {
+		this.componentEventSubscriptionManager = new ComponentEventSubscriptionManager();
+		this.componentEventSubscriptionManager.registerComponentTypes(componentEventDescriptors, staticComponentEventDescriptors, this.sendEvent);
+
 		this.isHighDensityScreen = ((window.matchMedia && (window.matchMedia('only screen and (min-resolution: 124dpi), only screen and (min-resolution: 1.3dppx), only screen and (min-resolution: 48.8dpcm)').matches || window.matchMedia('only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 2.6/2), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (min-device-pixel-ratio: 1.3)').matches)) || (window.devicePixelRatio && window.devicePixelRatio > 1.3));
 		if (this.isHighDensityScreen) {
-			$(document.body).addClass('high-density-screen');
+			document.body.classList.add('high-density-screen');
 		}
-		window.onmessage = (e) => {
+		window.onmessage = (e: MessageEvent) => {
 			if (e.origin !== location.origin || e.ports.length === 0) {
 				return;
 			}
@@ -73,8 +79,7 @@ export class UiWorkSpaceLayoutChildWindowTeamAppsUiContext implements TeamAppsUi
 					UiRootPanel.setConfig(messageObject.uiConfiguration, this);
 					UiRootPanel.registerTemplates(messageObject.registeredTemplates, this);
 					// TODO set background image!
-					rootPanel.getMainDomElement().appendTo(document.body);
-					rootPanel.attachedToDom = true;
+					document.body.appendChild(rootPanel.getMainElement());
 					this.workSpaceLayout = new UiWorkSpaceLayout({
 						_type: "UiWorkSpaceLayout",
 						id: messageObject.workspaceLayoutId,
@@ -83,8 +88,8 @@ export class UiWorkSpaceLayoutChildWindowTeamAppsUiContext implements TeamAppsUi
 						toolbar: null,
 						childWindowPageTitle: messageObject.childWindowPageTitle,
 					}, this, messageObject.windowId, this.parentWindowMessagePort);
-					this.registerComponent(this.workSpaceLayout);
-					rootPanel.addChildComponent(this.workSpaceLayout, true);
+					this.registerClientObject(this.workSpaceLayout, messageObject.workspaceLayoutId, "UiWorkSpaceLayout");
+					rootPanel.setContent(this.workSpaceLayout);
 				} else if (messageObject._type === "COMMAND") {
 					const commandMethodName = messageObject.methodName as string;
 					if (messageObject.componentId) {
@@ -138,36 +143,42 @@ export class UiWorkSpaceLayoutChildWindowTeamAppsUiContext implements TeamAppsUi
 		return this._executingCommand;
 	}
 
-	fireEvent(eventObject: UiEvent): void {
+	sendEvent(eventObject: UiEvent): void {
 		this.parentWindowMessagePort.postMessage({
 			_type: "EVENT",
 			eventObject
 		})
 	}
 
-	registerComponent(component: UiComponent<UiComponentConfig>): void {
-		this.components[component.getId()] = component;
-		EventRegistrator.registerForEvents(component, component.getTeamAppsType(), (eventObject: UiEvent) => this.fireEvent(eventObject));
+	registerClientObject(component: UiComponent<UiComponentConfig>, id: string, teamappsType: string): void {
+		this.components[id] = component;
+		this.componentEventSubscriptionManager.registerEventListener(component, teamappsType, (eventObject: UiEvent) => this.sendEvent(eventObject), {id: id})
 
-		if (component.getId() !== this.workSpaceLayout.getId()) {
+		if (id !== this.workSpaceLayout.getId()) {
 			this.parentWindowMessagePort.postMessage({
 				_type: "REGISTER_COMPONENT",
-				componentId: component.getId()
+				componentId: id,
+				teamappsType: teamappsType
 			});
 		}
 	}
 
-	destroyComponent(component: UiComponent): void {
-		component.getMainDomElement().detach();
-		component.destroy();
-		delete this.components[component.getId()];
+	destroyClientObject(id: string): void {
+		let c = this.components[id];
+		if (c == null) {
+			UiWorkSpaceLayoutChildWindowTeamAppsUiContext.logger.error("Could not find component to destroy: " + id)
+		}
+		c.getMainElement().remove();
+		c.destroy();
+		delete this.components[id];
+		this.componentEventSubscriptionManager.unregisterEventListener(c)
 	}
 
-	public createAndRegisterComponent(config: UiComponentConfig) {
+	public createClientObject(config: UiComponentConfig) {
 		let component: UiComponent<UiComponentConfig>;
 		if ((TeamAppsUiComponentRegistry.getComponentClassForName(config._type))) {
 			component = new (TeamAppsUiComponentRegistry.getComponentClassForName(config._type))(config, this);
-			this.registerComponent(component);
+			this.registerClientObject(component, config.id, config._type);
 			return component;
 		} else {
 			UiWorkSpaceLayoutChildWindowTeamAppsUiContext.logger.error("Unknown component type: " + config._type);
@@ -175,14 +186,10 @@ export class UiWorkSpaceLayoutChildWindowTeamAppsUiContext implements TeamAppsUi
 		}
 	}
 
-	public getComponentById(id: string): UiComponent<UiComponentConfig> {
+	public getClientObjectById(id: string): UiComponent<UiComponentConfig> {
 		return this.components[id];
 	}
 
-	getIconPath(iconName: string, iconSize: number, ignoreRetina?: boolean): string {
-		return getIconPath(this, iconName, iconSize, ignoreRetina);
-	}
-
 	refreshComponent(config: UiComponentConfig): void {
 		console.error("TODO refreshComponent"); // TODO #componentRef
 	}
diff --git a/teamapps-client/ts/modules/workspace-layout/View.ts b/teamapps-client/ts/modules/workspace-layout/View.ts
index cabb6f62a..1390f0d06 100644
--- a/teamapps-client/ts/modules/workspace-layout/View.ts
+++ b/teamapps-client/ts/modules/workspace-layout/View.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -20,16 +20,16 @@
 import {UiPanel} from "../UiPanel";
 import {UiComponentConfig} from "../../generated/UiComponentConfig";
 import {bind} from "../util/Bind";
-import {UiComponent} from "../UiComponent";
 import {TabPanelItem} from "./TabPanelItem";
 import {ViewInfo} from "./ViewInfo";
 import {UiWindowButtonType} from "../../generated/UiWindowButtonType";
 import {UiPanel_WindowButtonClickedEvent} from "../../generated/UiPanelConfig";
 import {TeamAppsEvent} from "../util/TeamAppsEvent";
+import {UiComponent} from "../UiComponent";
 
 export class View implements ViewInfo {
 
-	public readonly onPanelWindowButtonClicked: TeamAppsEvent<UiWindowButtonType> = new TeamAppsEvent(this);
+	public readonly onPanelWindowButtonClicked: TeamAppsEvent<UiWindowButtonType> = new TeamAppsEvent();
 
 	private _parent: TabPanelItem;
 	private _component: UiComponent<UiComponentConfig>;
diff --git a/teamapps-client/ts/modules/workspace-layout/ViewContainer.ts b/teamapps-client/ts/modules/workspace-layout/ViewContainer.ts
index 0b63be36c..9eadf05a4 100644
--- a/teamapps-client/ts/modules/workspace-layout/ViewContainer.ts
+++ b/teamapps-client/ts/modules/workspace-layout/ViewContainer.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,7 +19,6 @@
  */
 import {UiRelativeWorkSpaceViewPosition} from "../../generated/UiRelativeWorkSpaceViewPosition";
 import {UiWorkSpaceLayoutItemConfig} from "../../generated/UiWorkSpaceLayoutItemConfig";
-import {UiComponentConfig} from "../../generated/UiComponentConfig";
 import {UiWorkSpaceLayoutViewConfig} from "../../generated/UiWorkSpaceLayoutViewConfig";
 import {ViewInfo} from "./ViewInfo";
 import {UiSplitSizePolicy} from "../../generated/UiSplitSizePolicy";
diff --git a/teamapps-client/ts/modules/workspace-layout/ViewInfo.ts b/teamapps-client/ts/modules/workspace-layout/ViewInfo.ts
index d28f1e525..b1283f62a 100644
--- a/teamapps-client/ts/modules/workspace-layout/ViewInfo.ts
+++ b/teamapps-client/ts/modules/workspace-layout/ViewInfo.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-client/ts/modules/workspace-layout/WindowLayoutDescriptor.ts b/teamapps-client/ts/modules/workspace-layout/WindowLayoutDescriptor.ts
index a0c1e98c3..1d44d9051 100644
--- a/teamapps-client/ts/modules/workspace-layout/WindowLayoutDescriptor.ts
+++ b/teamapps-client/ts/modules/workspace-layout/WindowLayoutDescriptor.ts
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-client/ts/shared/ReconnectingWebSocketConnection.ts b/teamapps-client/ts/shared/ReconnectingWebSocketConnection.ts
deleted file mode 100644
index db28a076f..000000000
--- a/teamapps-client/ts/shared/ReconnectingWebSocketConnection.ts
+++ /dev/null
@@ -1,193 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-import {AbstractServerMessageConfig} from "../generated/AbstractServerMessageConfig";
-import {AbstractClientMessageConfig} from "../generated/AbstractClientMessageConfig";
-import * as log from "loglevel";
-import * as stringify from "json-stable-stringify";
-import {Inflate, Deflate} from "pako";
-
-export interface ReconnectingCompressingWebSocketConnectionListener {
-	onConnected: () => void;
-	onMessage: (messageObject: AbstractServerMessageConfig) => void;
-	onConnectionLost: () => void;
-	onReconnected: () => void;
-}
-
-export class ReconnectingCompressingWebSocketConnection {
-
-	private static logger: log.Logger = log.getLogger("ReconnectingCompressingWebSocketConnection");
-
-	private url: string;
-	private connection: WebSocket;
-	private initialConnection = true;
-	private inflator: ZlibStreamingInflator;
-	private deflator: ZlibStreamingDeflator;
-	private closed: any;
-
-	constructor(url: string, private listener: ReconnectingCompressingWebSocketConnectionListener) {
-		this.url = url;
-		this.reconnect();
-	}
-
-	public isConnected() {
-		return this.connection != null && this.connection.readyState === WebSocket.OPEN;
-	};
-
-	public send(object: AbstractClientMessageConfig) {
-		let jsonString = stringify(object, {
-			cmp: (a, b) => {
-				let aIsUnderscore = a.key[0] === '_';
-				let bIsUnderscore = b.key[0] === '_';
-				return (aIsUnderscore && !bIsUnderscore) ? -1 : (!aIsUnderscore && bIsUnderscore) ? 1 : 0;
-			}
-		});
-		const compressed = this.deflator.deflateData(jsonString);
-		this.connection.send(compressed);
-	};
-
-	private reconnect() {
-		if (this.closed) {
-			return;
-		}
-
-		ReconnectingCompressingWebSocketConnection.log(`Connecting to ${this.url}`);
-
-		this.connection = new WebSocket(this.url);
-		this.connection.binaryType = 'arraybuffer';
-
-		this.connection.onopen = () => {
-			this.inflator = new ZlibStreamingInflator();
-			this.deflator = new ZlibStreamingDeflator();
-
-			if (this.initialConnection) {
-				ReconnectingCompressingWebSocketConnection.log("Connected.");
-				this.listener.onConnected();
-				this.initialConnection = false;
-			} else {
-				ReconnectingCompressingWebSocketConnection.log("Reconnected.");
-				this.listener.onReconnected();
-			}
-		};
-		this.connection.onclose = () => {
-			console.warn('Websocket connection CLOSED!');
-			this.listener.onConnectionLost();
-			this.connection = null;
-			setTimeout(() => this.reconnect(), 2000);
-		};
-		this.connection.onerror = (error) => {
-			ReconnectingCompressingWebSocketConnection.log('WebSocket error: ' + error);
-		};
-		this.connection.onmessage = (e) => {
-			let jsonString: string;
-			try {
-				let data: ArrayBuffer = e.data;
-
-				/*
-				 * It might make sense in the future to split up large messages into multiple frames.
-				 * However, it seems that browsers don't have any problems with receiving (very) large frames, neither do Servlet containers have sending them.
-				 * Servlet containers only has a limitation receiving frames (see MAX_BINARY_CLIENT_MESSAGE_SIZE).
-				 */
-				// data = this.splitMessageConcatenator.pushData(data);
-
-				jsonString = this.inflator.inflateData(data);
-			} catch (err) {
-				ReconnectingCompressingWebSocketConnection.log("Error while inflating message: " + jsonString + "\n" + err);
-				return;
-			}
-			if (jsonString) {
-				try {
-					this.listener.onMessage(JSON.parse(jsonString));
-				} catch (err) {
-					ReconnectingCompressingWebSocketConnection.log("Error while parsing message JSON: " + jsonString + "\n" + err);
-				}
-			}
-		};
-	}
-
-	public stopReconnecting() {
-		this.closed = true;
-	}
-
-	public close() {
-		this.stopReconnecting();
-		this.connection.close();
-	}
-
-	private static log(message: string) {
-		console.log("Connection: " + message);
-	}
-}
-
-class SplitMessageConcatenator {
-	private dataBuffer = new Uint8Array(10 * 1024 * 1024); // 10 MB
-	private dataBufferFillSize = 0;
-
-	public pushData(data: any): Uint8Array | null {
-		let uintArray = new Uint8Array(data);
-		let lastMessageFlag = uintArray[0];
-		this.dataBuffer.set(uintArray.slice(1), this.dataBufferFillSize);
-		this.dataBufferFillSize += uintArray.length - 1;
-
-		let completeMessageData: Uint8Array;
-		if (lastMessageFlag) {
-			completeMessageData = this.dataBuffer.slice(0, this.dataBufferFillSize);
-			this.dataBufferFillSize = 0;
-		} else {
-			console.warn("Receiving large (splitted) message!");
-		}
-		return completeMessageData;
-	}
-}
-
-class ZlibStreamingInflator {
-	private inflate: Inflate;
-	private currentInflatedData: string;
-
-	constructor() {
-		this.inflate = new Inflate({to: 'string'});
-		this.inflate.onData = (data: string) => this.currentInflatedData += data;
-	}
-
-	public inflateData(data: ArrayBuffer | Uint8Array): string {
-		this.currentInflatedData = "";
-		this.inflate.push(data, 2); // will update currentInflatedData synchronously!
-		return this.currentInflatedData;
-	}
-}
-
-class ZlibStreamingDeflator {
-	private deflate: Deflate;
-	private currentInflatedData: Uint8Array = new Uint8Array(20 * 1024 * 1024); // 20 MB
-	private currentInflatedDataFillSize = 0;
-
-	constructor() {
-		this.deflate = new Deflate();
-		this.deflate.onData = (data: Uint8Array) => {
-			this.currentInflatedData.set(data, this.currentInflatedDataFillSize);
-			this.currentInflatedDataFillSize += data.length;
-		}
-	}
-
-	public deflateData(data: string): Uint8Array {
-		this.currentInflatedDataFillSize = 0;
-		this.deflate.push(data, 2); // will update currentInflatedData synchronously!
-		return this.currentInflatedData.slice(0, this.currentInflatedDataFillSize)
-	}
-}
diff --git a/teamapps-client/ts/test/TimeRangeManagerTest.ts b/teamapps-client/ts/test/TimeRangeManagerTest.ts
deleted file mode 100644
index 0600c7db9..000000000
--- a/teamapps-client/ts/test/TimeRangeManagerTest.ts
+++ /dev/null
@@ -1,105 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-describe('IntervalManager', function () {
-
-    it('is initially empty', function () {
-        var intervalManager:IntervalManager = new IntervalManager();
-        expect(intervalManager.intervals.length).toBe(0);
-    });
-
-    it('adds the first interval as is', function () {
-        var intervalManager:IntervalManager = new IntervalManager();
-        var interval = {start: 100, end: 200};
-
-        var result = intervalManager.addInterval(interval);
-
-        expect(result).toEqual([interval]);
-        expect(intervalManager.intervals.length).toBe(1);
-        expect(intervalManager.intervals[0]).toEqual(interval);
-    });
-
-    it('adds uncovered intervals as is', function () {
-        var intervalManager:IntervalManager = new IntervalManager();
-        var interval1 = {start: 100, end: 200};
-        intervalManager.addInterval(interval1);
-
-        var interval2 = {start: 300, end: 400};
-        var result = intervalManager.addInterval(interval2);
-
-        expect(result).toEqual([interval2]);
-        expect(intervalManager.intervals.length).toBe(2);
-        expect(intervalManager.intervals).toEqual([interval1, interval2]);
-    });
-
-    it('merges adjacent intervals (exactly adjacent)', function () {
-        var intervalManager:IntervalManager = new IntervalManager();
-        intervalManager.addInterval({start: 100, end: 200});
-
-        var interval2 = {start: 200, end: 400};
-        var result = intervalManager.addInterval(interval2);
-        expect(result).toEqual([interval2]);
-        expect(intervalManager.intervals.length).toBe(1);
-        expect(intervalManager.intervals).toEqual([{start: 100, end: 400}]);
-
-        var interval3 = {start: 50, end: 100};
-        result = intervalManager.addInterval(interval3);
-        expect(result).toEqual([interval3]);
-        expect(intervalManager.intervals.length).toBe(1);
-        expect(intervalManager.intervals).toEqual([{start: 50, end: 400}]);
-    });
-
-    it('returns the missing intervals when adding a super interval', function () {
-        var intervalManager:IntervalManager = new IntervalManager();
-        intervalManager.addInterval({start: 100, end: 200});
-        intervalManager.addInterval({start: 300, end: 400});
-
-        var newInterval = {start: 50, end: 450};
-        var result = intervalManager.addInterval(newInterval);
-        expect(result).toEqual([{start: 50, end: 100}, {start: 200, end: 300}, {start: 400, end: 450}]);
-
-        expect(intervalManager.intervals.length).toBe(1);
-        expect(intervalManager.intervals).toEqual([{start: 50, end: 450}]);
-    });
-
-    it('merges intervals if added interval overlaps them', function () {
-        var intervalManager:IntervalManager = new IntervalManager();
-        intervalManager.addInterval({start: 100, end: 200});
-        intervalManager.addInterval({start: 300, end: 400});
-
-        var newInterval = {start: 150, end: 350};
-        var result = intervalManager.addInterval(newInterval);
-        expect(result).toEqual([{start: 200, end: 300}]);
-
-        expect(intervalManager.intervals.length).toBe(1);
-        expect(intervalManager.intervals).toEqual([{start: 100, end: 400}]);
-    });
-
-    it('returns an empty array if the interval is already covered', function () {
-        var intervalManager:IntervalManager = new IntervalManager();
-        intervalManager.addInterval({start: 100, end: 200});
-
-        expect(intervalManager.addInterval({start: 100, end: 200})).toEqual([]);
-        expect(intervalManager.addInterval({start: 101, end: 199})).toEqual([]);
-
-        expect(intervalManager.intervals.length).toBe(1);
-        expect(intervalManager.intervals).toEqual([{start: 100, end: 200}]);
-    });
-});
-
diff --git a/teamapps-client/ts/test/UiCalendarViewFullCalendarEventSourceTest.ts b/teamapps-client/ts/test/UiCalendarViewFullCalendarEventSourceTest.ts
deleted file mode 100644
index e2f343657..000000000
--- a/teamapps-client/ts/test/UiCalendarViewFullCalendarEventSourceTest.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-describe('UiCalendarFullCalendarEventSource', function () {
-
-    var contextSpy:TeamAppsUiContext;
-
-    beforeEach(function () {
-        contextSpy = {
-            createComponent: null,
-            fireEvent: null,
-            config: null,
-            getIconPath: null
-        };
-
-        spyOn(contextSpy, 'fireEvent');
-    });
-
-
-    xit('fires teamapps event when called and has no data', function () {
-        var eventSource = new UiCalendarFullCalendarEventSource(contextSpy, "myCalendarView");
-
-        var start = moment("2015-01-01 00:00:00.000+00:00");
-        var end = moment("2015-02-01 00:00:00.000+00:00");
-        eventSource.events(start, end, 'UTC', null);
-
-        expect(contextSpy.fireEvent.calls.count()).toBe(1);
-        expect(contextSpy.fireEvent.calls.argsFor(0)[0].rangeStart).toBe(start.valueOf());
-        expect(contextSpy.fireEvent.calls.argsFor(0)[0].rangeEnd).toBe(end.valueOf());
-    });
-
-    xit('requests only the data needed, when part of data is present', function () {
-        var eventSource = new UiCalendarFullCalendarEventSource(contextSpy, "myCalendarView");
-        eventSource.addEvents();
-
-        var start = moment("2015-01-01 00:00:00.000+00:00");
-        var end = moment("2015-02-01 00:00:00.000+00:00");
-        eventSource.events(start, end, 'UTC', null);
-
-        expect(contextSpy.fireEvent.calls.count()).toBe(1);
-        expect(contextSpy.fireEvent.calls.argsFor(0)[0].rangeStart).toBe(start.valueOf());
-        expect(contextSpy.fireEvent.calls.argsFor(0)[0].rangeEnd).toBe(end.valueOf());
-    });
-
-
-});
-
diff --git a/teamapps-client/ts/test/UiCompositeFieldTest.ts b/teamapps-client/ts/test/UiCompositeFieldTest.ts
deleted file mode 100644
index de743ef19..000000000
--- a/teamapps-client/ts/test/UiCompositeFieldTest.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-import Column = Column;
-describe('UiCompositeField.calculateColumnWidths()', function () {
-
-    function column(values: any): Column {
-        let defaults = {
-            _type: null,
-            width: 0,
-            minWidth: 0,
-            maxWidth: 0,
-            index: 0,
-            calculatedWidth: null,
-            $col: null
-        };
-        return {...defaults, ...values};
-    }
-
-    it('calculates the column widths relative to the minWidth values if there is not enough available width for all minWidths', () => {
-        let columns = [
-            column({minWidth: 100, width: 100}),
-            column({minWidth: 60, width: .5}),
-            column({minWidth: 40, width: .1})
-        ];
-
-        console.log(columns[0]);
-        UiCompositeField.calculateColumnWidths(columns, 100);
-
-        expect(columns.map(c => c.calculatedWidth)).toEqual(['50%', '30%', '20%']);
-    });
-
-});
diff --git a/teamapps-client/ts/worker/CommunicationWorker.ts b/teamapps-client/ts/worker/CommunicationWorker.ts
deleted file mode 100644
index 575703f96..000000000
--- a/teamapps-client/ts/worker/CommunicationWorker.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-import {UiCommand} from "../generated/UiCommand";
-import {TeamAppsConnectionImpl} from "../shared/TeamAppsConnectionImpl";
-
-(function (self: ServiceWorkerGlobalScope) {
-
-	let sessionConnection: TeamAppsConnectionImpl;
-	let isInitializationMessage = true;
-
-	self.onmessage = function (e) {
-		if (isInitializationMessage) {
-			sessionConnection = new TeamAppsConnectionImpl(
-				e.data.webSocketUrl,
-				e.data.sessionId,
-				e.data.clientInfo,
-				{
-					onConnectionInitialized: () => postMessage({_type: "onConnectionInitialized"}),
-					onConnectionErrorOrBroken: (reason, message) => postMessage({_type: "onConnectionBroken", reason, message}),
-					executeCommand: (uiCommand: UiCommand) => postMessage({_type: "onCommand", uiCommand}),
-					executeCommands: (uiCommands: UiCommand[]) => postMessage({_type: "onCommands", uiCommands})
-				}
-			);
-			isInitializationMessage = false;
-		} else {
-			sessionConnection.sendEvent(e.data.event);
-		}
-	};
-
-})(self as ServiceWorkerGlobalScope);
diff --git a/teamapps-client/x.css b/teamapps-client/x.css
new file mode 100644
index 000000000..277df7e18
--- /dev/null
+++ b/teamapps-client/x.css
@@ -0,0 +1,62 @@
+* {
+    margin: 0;
+    box-sizing: border-box;
+}
+
+
+.window {
+    width: 600px;
+    height: 400px;
+    position: absolute;
+
+    .resizer {
+        position: absolute;
+        z-index: 1;
+        user-select: none;
+        &.t, &.b { width: 100%;height: 14px; }
+        &.l, &.r { width: 14px;height: 100%; }
+        &.t { cursor: n-resize; top: -5px; }
+        &.b { cursor: s-resize; bottom: -5px; }
+        &.l { cursor: w-resize; left: -5px; }
+        &.r { cursor: e-resize; right: -5px; }
+        &.corner {
+            width: 22px;
+            height: 22px;
+            z-index: 2;
+            &.t.l { cursor: nw-resize; top: -5px; left: -5px; }
+            &.t.r { cursor: ne-resize; top: -5px; right: -5px; }
+            &.b.l { cursor: sw-resize; bottom: -5px; left: -5px; }
+            &.b.r { cursor: se-resize; bottom: -5px; right: -5px; }
+        }
+    }
+
+    .body {
+        border-radius: 15px;
+        overflow: hidden;
+        height: 100%;
+        background: #f4f4f4;
+        border: 1px solid #8c8c8c;
+        .topbar {
+            width: 100%;
+            height: 40px;
+            background: #8c8c8c;
+            display: flex;
+            align-items: center;
+            padding: 0 10px;
+            .btns {
+                display: flex;
+                gap: 9px;
+                user-select: none;
+                div {
+                    height: 14px;
+                    width: 14px;
+                    border-radius: 50%;
+                    &:nth-child(1) { background:#FF5F58; }
+                    &:nth-child(2) { background:#FFBE2F; }
+                    &:nth-child(3) { background:#2AC940; }
+                }
+            }
+        }
+    }
+
+}
\ No newline at end of file
diff --git a/teamapps-client/x.html b/teamapps-client/x.html
new file mode 100644
index 000000000..1cc27331f
--- /dev/null
+++ b/teamapps-client/x.html
@@ -0,0 +1,160 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+    <link rel="stylesheet" href="./x.css">
+</head>
+<body>
+<div class="window">
+    <div class="resizer corner t l"></div>
+    <div class="resizer corner t r"></div>
+    <div class="resizer corner b l"></div>
+    <div class="resizer corner b r"></div>
+    <div class="resizer t"></div>
+    <div class="resizer b"></div>
+    <div class="resizer l"></div>
+    <div class="resizer r"></div>
+    <div class="body">
+        <div class="topbar">
+            <div class="btns">
+                <div></div>
+                <div></div>
+                <div></div>
+            </div>
+        </div>
+        <!-- your content here -->
+    </div>
+</div>
+
+<script>
+    const xwindow = document.querySelector(".window")
+    const topbar = document.querySelector(".topbar")
+    topbar.addEventListener("mousedown", mousedown)
+
+    const minWidth = 400;
+    const minHeight = 300;
+    const limitByViewPort = true;
+
+
+    function mousedown(e) {
+        const initialRect = getBoundingPageRect(xwindow);
+        const initialMouseX = e.pageX
+        const initialMouseY = e.pageY
+
+        window.addEventListener("mousemove", mousemove)
+        window.addEventListener("mouseup", mouseup)
+
+        function mousemove(e) {
+            const totalDeltaX = e.pageX - initialMouseX;
+            const totalDeltaY = e.pageY - initialMouseY;
+
+            const viewPortRect = getViewportRect();
+
+            const minX = limitByViewPort ? viewPortRect.left : Number.NEGATIVE_INFINITY;
+            const maxX = limitByViewPort ? viewPortRect.right - initialRect.width : Number.POSITIVE_INFINITY;
+            const minY = limitByViewPort ? viewPortRect.top : Number.NEGATIVE_INFINITY;
+            const maxY = limitByViewPort ? viewPortRect.bottom - initialRect.height : Number.POSITIVE_INFINITY;
+
+            xwindow.style.left = Math.min(maxX, Math.max(minX, initialRect.x + totalDeltaX)) + "px"
+            xwindow.style.top = Math.min(maxY, Math.max(minY, initialRect.y + totalDeltaY)) + "px"
+        }
+
+        function mouseup() {
+            window.removeEventListener("mousemove", mousemove)
+            window.removeEventListener("mouseup", mouseup)
+        }
+    }
+
+    const resizers = document.querySelectorAll(".resizer")
+    for (let resizer of resizers) {
+        resizer.addEventListener("mousedown", mousedown)
+
+        function mousedown(e) {
+            const currentResizer = e.target
+            const initialRect = getBoundingPageRect(xwindow);
+            const initialMouseX = e.pageX
+            const initialMouseY = e.pageY
+
+            window.addEventListener("mousemove", mousemove)
+            window.addEventListener("mouseup", mouseup)
+
+            function mousemove(e) {
+                const totalDeltaX = e.pageX - initialMouseX;
+                const totalDeltaY = e.pageY - initialMouseY;
+
+                const viewPortRect = getViewportRect();
+
+                if (currentResizer.classList.contains("t")) {
+                    const minYDueToViewPort = limitByViewPort ? viewPortRect.top : Number.NEGATIVE_INFINITY;
+                    const maxYDueToMinHeight = initialRect.bottom - minHeight;
+
+                    const newTop = Math.max(minYDueToViewPort, Math.min(maxYDueToMinHeight, initialRect.y + totalDeltaY));
+                    const newHeight = Math.max(minHeight, initialRect.bottom - newTop);
+
+                    xwindow.style.top = newTop + "px"
+                    xwindow.style.height = newHeight + "px"
+                }
+                if (currentResizer.classList.contains("b")) {
+                    const maxHeight = limitByViewPort ? viewPortRect.bottom - initialRect.top : Number.POSITIVE_INFINITY;
+                    const newHeight = Math.min(maxHeight, Math.max(minHeight, initialRect.height + totalDeltaY));
+                    xwindow.style.height = newHeight + "px";
+                }
+                if (currentResizer.classList.contains("l")) {
+                    const minXDueToViewPort = limitByViewPort ? viewPortRect.left : Number.NEGATIVE_INFINITY;
+                    const maxXDueToMinWidth = initialRect.right - minWidth;
+
+                    const newLeft = Math.max(minXDueToViewPort, Math.min(maxXDueToMinWidth, initialRect.x + totalDeltaX));
+                    const newWidth = Math.max(minWidth, initialRect.right - newLeft);
+
+                    xwindow.style.left = newLeft + "px"
+                    xwindow.style.width = newWidth + "px"
+                }
+                if (currentResizer.classList.contains("r")) {
+                    const maxWidth = limitByViewPort ? viewPortRect.right - initialRect.left : Number.POSITIVE_INFINITY;
+                    const newWidth = Math.min(maxWidth, Math.max(minWidth, initialRect.width + totalDeltaX));
+                    xwindow.style.width = newWidth + "px";
+                }
+            }
+
+            function mouseup() {
+                window.removeEventListener("mousemove", mousemove)
+                window.removeEventListener("mouseup", mouseup)
+            }
+        }
+    }
+
+    function getBoundingPageRect(element) {
+        const rect = element.getBoundingClientRect();
+        const scrollLeft = window.scrollX || document.documentElement.scrollLeft;
+        const scrollTop = window.scrollY || document.documentElement.scrollTop;
+
+        return {
+            left: rect.left + scrollLeft,
+            top: rect.top + scrollTop,
+            x: rect.left + scrollLeft,
+            y: rect.top + scrollTop,
+            right: rect.right + scrollLeft,
+            bottom: rect.bottom + scrollTop,
+            width: rect.width,
+            height: rect.height
+        };
+    }
+
+    function getViewportRect() {
+        const scrollLeft = window.scrollX || document.documentElement.scrollLeft;
+        const scrollTop = window.scrollY || document.documentElement.scrollTop;
+        return {
+            left: scrollLeft,
+            top: scrollTop,
+            x: scrollLeft,
+            y: scrollTop,
+            right: scrollLeft + window.innerWidth,
+            bottom: scrollTop + window.innerHeight,
+            width: window.innerWidth,
+            height: window.innerHeight
+        };
+    }
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/teamapps-client/yarn.lock b/teamapps-client/yarn.lock
index b05d0ad93..a04dab9d7 100644
--- a/teamapps-client/yarn.lock
+++ b/teamapps-client/yarn.lock
@@ -2,593 +2,1850 @@
 # yarn lockfile v1
 
 
-"@types/bootstrap-notify@^3.1.33":
-  version "3.1.33"
-  resolved "https://registry.yarnpkg.com/@types/bootstrap-notify/-/bootstrap-notify-3.1.33.tgz#572d484f57c777fa446a173138985c7dcc3f3944"
+"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz"
+  integrity sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==
+  dependencies:
+    "@babel/highlight" "^7.10.4"
+
+"@babel/core@^7.1.0", "@babel/core@^7.7.5":
+  version "7.11.6"
+  resolved "https://registry.npmjs.org/@babel/core/-/core-7.11.6.tgz"
+  integrity sha512-Wpcv03AGnmkgm6uS6k8iwhIwTrcP0m17TL1n1sy7qD0qelDu4XNeW0dN0mHfa+Gei211yDaLoEe/VlbXQzM4Bg==
+  dependencies:
+    "@babel/code-frame" "^7.10.4"
+    "@babel/generator" "^7.11.6"
+    "@babel/helper-module-transforms" "^7.11.0"
+    "@babel/helpers" "^7.10.4"
+    "@babel/parser" "^7.11.5"
+    "@babel/template" "^7.10.4"
+    "@babel/traverse" "^7.11.5"
+    "@babel/types" "^7.11.5"
+    convert-source-map "^1.7.0"
+    debug "^4.1.0"
+    gensync "^1.0.0-beta.1"
+    json5 "^2.1.2"
+    lodash "^4.17.19"
+    resolve "^1.3.2"
+    semver "^5.4.1"
+    source-map "^0.5.0"
+
+"@babel/generator@^7.11.5", "@babel/generator@^7.11.6":
+  version "7.11.6"
+  resolved "https://registry.npmjs.org/@babel/generator/-/generator-7.11.6.tgz"
+  integrity sha512-DWtQ1PV3r+cLbySoHrwn9RWEgKMBLLma4OBQloPRyDYvc5msJM9kvTLo1YnlJd1P/ZuKbdli3ijr5q3FvAF3uA==
+  dependencies:
+    "@babel/types" "^7.11.5"
+    jsesc "^2.5.1"
+    source-map "^0.5.0"
+
+"@babel/helper-function-name@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.10.4.tgz"
+  integrity sha512-YdaSyz1n8gY44EmN7x44zBn9zQ1Ry2Y+3GTA+3vH6Mizke1Vw0aWDM66FOYEPw8//qKkmqOckrGgTYa+6sceqQ==
+  dependencies:
+    "@babel/helper-get-function-arity" "^7.10.4"
+    "@babel/template" "^7.10.4"
+    "@babel/types" "^7.10.4"
+
+"@babel/helper-get-function-arity@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.10.4.tgz"
+  integrity sha512-EkN3YDB+SRDgiIUnNgcmiD361ti+AVbL3f3Henf6dqqUyr5dMsorno0lJWJuLhDhkI5sYEpgj6y9kB8AOU1I2A==
+  dependencies:
+    "@babel/types" "^7.10.4"
+
+"@babel/helper-member-expression-to-functions@^7.10.4":
+  version "7.11.0"
+  resolved "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.11.0.tgz"
+  integrity sha512-JbFlKHFntRV5qKw3YC0CvQnDZ4XMwgzzBbld7Ly4Mj4cbFy3KywcR8NtNctRToMWJOVvLINJv525Gd6wwVEx/Q==
+  dependencies:
+    "@babel/types" "^7.11.0"
+
+"@babel/helper-module-imports@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.10.4.tgz"
+  integrity sha512-nEQJHqYavI217oD9+s5MUBzk6x1IlvoS9WTPfgG43CbMEeStE0v+r+TucWdx8KFGowPGvyOkDT9+7DHedIDnVw==
+  dependencies:
+    "@babel/types" "^7.10.4"
+
+"@babel/helper-module-transforms@^7.11.0":
+  version "7.11.0"
+  resolved "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.11.0.tgz"
+  integrity sha512-02EVu8COMuTRO1TAzdMtpBPbe6aQ1w/8fePD2YgQmxZU4gpNWaL9gK3Jp7dxlkUlUCJOTaSeA+Hrm1BRQwqIhg==
+  dependencies:
+    "@babel/helper-module-imports" "^7.10.4"
+    "@babel/helper-replace-supers" "^7.10.4"
+    "@babel/helper-simple-access" "^7.10.4"
+    "@babel/helper-split-export-declaration" "^7.11.0"
+    "@babel/template" "^7.10.4"
+    "@babel/types" "^7.11.0"
+    lodash "^4.17.19"
+
+"@babel/helper-optimise-call-expression@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.10.4.tgz"
+  integrity sha512-n3UGKY4VXwXThEiKrgRAoVPBMqeoPgHVqiHZOanAJCG9nQUL2pLRQirUzl0ioKclHGpGqRgIOkgcIJaIWLpygg==
+  dependencies:
+    "@babel/types" "^7.10.4"
+
+"@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.8.0":
+  version "7.10.4"
+  resolved "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.4.tgz"
+  integrity sha512-O4KCvQA6lLiMU9l2eawBPMf1xPP8xPfB3iEQw150hOVTqj/rfXz0ThTb4HEzqQfs2Bmo5Ay8BzxfzVtBrr9dVg==
+
+"@babel/helper-replace-supers@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.10.4.tgz"
+  integrity sha512-sPxZfFXocEymYTdVK1UNmFPBN+Hv5mJkLPsYWwGBxZAxaWfFu+xqp7b6qWD0yjNuNL2VKc6L5M18tOXUP7NU0A==
+  dependencies:
+    "@babel/helper-member-expression-to-functions" "^7.10.4"
+    "@babel/helper-optimise-call-expression" "^7.10.4"
+    "@babel/traverse" "^7.10.4"
+    "@babel/types" "^7.10.4"
+
+"@babel/helper-simple-access@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.10.4.tgz"
+  integrity sha512-0fMy72ej/VEvF8ULmX6yb5MtHG4uH4Dbd6I/aHDb/JVg0bbivwt9Wg+h3uMvX+QSFtwr5MeItvazbrc4jtRAXw==
   dependencies:
-    "@types/jquery" "*"
+    "@babel/template" "^7.10.4"
+    "@babel/types" "^7.10.4"
 
-"@types/canvas-gauges@^2.1.1":
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/@types/canvas-gauges/-/canvas-gauges-2.1.1.tgz#e3a0c2eca56778e38791a4c3b7403ec4a20726c4"
+"@babel/helper-split-export-declaration@^7.11.0":
+  version "7.11.0"
+  resolved "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.11.0.tgz"
+  integrity sha512-74Vejvp6mHkGE+m+k5vHY93FX2cAtrw1zXrZXRlG4l410Nm9PxfEiVTn1PjDPV5SnmieiueY4AFg2xqhNFuuZg==
+  dependencies:
+    "@babel/types" "^7.11.0"
 
-"@types/ckeditor@0.x":
-  version "0.0.50"
-  resolved "https://registry.yarnpkg.com/@types/ckeditor/-/ckeditor-0.0.50.tgz#cfbc65f4f04d13c584a591969b3a580ea225ab29"
+"@babel/helper-validator-identifier@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz"
+  integrity sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw==
 
-"@types/d3-array@*":
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/@types/d3-array/-/d3-array-1.2.4.tgz#7088445c8717ba1fba416a1df7bbd11cc72a3763"
+"@babel/helpers@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.npmjs.org/@babel/helpers/-/helpers-7.10.4.tgz"
+  integrity sha512-L2gX/XeUONeEbI78dXSrJzGdz4GQ+ZTA/aazfUsFaWjSe95kiCuOZ5HsXvkiw3iwF+mFHSRUfJU8t6YavocdXA==
+  dependencies:
+    "@babel/template" "^7.10.4"
+    "@babel/traverse" "^7.10.4"
+    "@babel/types" "^7.10.4"
 
-"@types/d3-axis@*":
-  version "1.0.11"
-  resolved "https://registry.yarnpkg.com/@types/d3-axis/-/d3-axis-1.0.11.tgz#efd975f9fec14c2afd03828f3acec0ef97d37c3b"
+"@babel/highlight@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.npmjs.org/@babel/highlight/-/highlight-7.10.4.tgz"
+  integrity sha512-i6rgnR/YgPEQzZZnbTHHuZdlE8qyoBNalD6F+q4vAFlcMEcqmkoG+mPqJYJCo63qPf74+Y1UZsl3l6f7/RIkmA==
   dependencies:
-    "@types/d3-selection" "*"
+    "@babel/helper-validator-identifier" "^7.10.4"
+    chalk "^2.0.0"
+    js-tokens "^4.0.0"
 
-"@types/d3-brush@*":
-  version "1.0.9"
-  resolved "https://registry.yarnpkg.com/@types/d3-brush/-/d3-brush-1.0.9.tgz#c71070845946eeee4cf330e04123a3997e6476bf"
+"@babel/parser@^7.1.0", "@babel/parser@^7.10.4", "@babel/parser@^7.11.5":
+  version "7.11.5"
+  resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.11.5.tgz"
+  integrity sha512-X9rD8qqm695vgmeaQ4fvz/o3+Wk4ZzQvSHkDBgpYKxpD4qTAUm88ZKtHkVqIOsYFFbIQ6wQYhC6q7pjqVK0E0Q==
+
+"@babel/plugin-syntax-async-generators@^7.8.4":
+  version "7.8.4"
+  resolved "https://registry.npmjs.org/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz"
+  integrity sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-bigint@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.npmjs.org/@babel/plugin-syntax-bigint/-/plugin-syntax-bigint-7.8.3.tgz"
+  integrity sha512-wnTnFlG+YxQm3vDxpGE57Pj0srRU4sHE/mDkt1qv2YJJSeUAec2ma4WLUnUPeKjyrfntVwe/N6dCXpU+zL3Npg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-class-properties@^7.8.3":
+  version "7.10.4"
+  resolved "https://registry.npmjs.org/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.10.4.tgz"
+  integrity sha512-GCSBF7iUle6rNugfURwNmCGG3Z/2+opxAMLs1nND4bhEG5PuxTIggDBoeYYSujAlLtsupzOHYJQgPS3pivwXIA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-syntax-import-meta@^7.8.3":
+  version "7.10.4"
+  resolved "https://registry.npmjs.org/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz"
+  integrity sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-syntax-json-strings@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.npmjs.org/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz"
+  integrity sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==
   dependencies:
-    "@types/d3-selection" "*"
+    "@babel/helper-plugin-utils" "^7.8.0"
 
-"@types/d3-chord@*":
-  version "1.0.8"
-  resolved "https://registry.yarnpkg.com/@types/d3-chord/-/d3-chord-1.0.8.tgz#08c0fbb10281be0a5b3fdf48c9c081af02f79fb6"
+"@babel/plugin-syntax-logical-assignment-operators@^7.8.3":
+  version "7.10.4"
+  resolved "https://registry.npmjs.org/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz"
+  integrity sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
 
-"@types/d3-collection@*":
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/@types/d3-collection/-/d3-collection-1.0.7.tgz#829e1db477d6bbbcdc038cbc489f22798752d707"
+"@babel/plugin-syntax-nullish-coalescing-operator@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.npmjs.org/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz"
+  integrity sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
 
-"@types/d3-color@*":
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@types/d3-color/-/d3-color-1.2.1.tgz#26141c3c554e320edd40726b793570a3ae57397e"
+"@babel/plugin-syntax-numeric-separator@^7.8.3":
+  version "7.10.4"
+  resolved "https://registry.npmjs.org/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.4.tgz"
+  integrity sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
 
-"@types/d3-contour@*":
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/@types/d3-contour/-/d3-contour-1.2.2.tgz#b32256b55aed9e2113f88a8ea23846e357fa386c"
+"@babel/plugin-syntax-object-rest-spread@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.npmjs.org/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz"
+  integrity sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==
   dependencies:
-    "@types/d3-array" "*"
-    "@types/geojson" "*"
+    "@babel/helper-plugin-utils" "^7.8.0"
 
-"@types/d3-dispatch@*":
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/@types/d3-dispatch/-/d3-dispatch-1.0.6.tgz#19b173f669cd2ab7dd3d862e8037aae1a98c7508"
+"@babel/plugin-syntax-optional-catch-binding@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.npmjs.org/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz"
+  integrity sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
 
-"@types/d3-drag@*":
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@types/d3-drag/-/d3-drag-1.2.1.tgz#6394bcf2f6414140b3b0d521259cadc6fa1da926"
+"@babel/plugin-syntax-optional-chaining@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.npmjs.org/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz"
+  integrity sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==
   dependencies:
-    "@types/d3-selection" "*"
+    "@babel/helper-plugin-utils" "^7.8.0"
 
-"@types/d3-dsv@*":
-  version "1.0.33"
-  resolved "https://registry.yarnpkg.com/@types/d3-dsv/-/d3-dsv-1.0.33.tgz#18de1867927f7ec898671aef82f730f16d4c7fcb"
+"@babel/template@^7.10.4", "@babel/template@^7.3.3":
+  version "7.10.4"
+  resolved "https://registry.npmjs.org/@babel/template/-/template-7.10.4.tgz"
+  integrity sha512-ZCjD27cGJFUB6nmCB1Enki3r+L5kJveX9pq1SvAUKoICy6CZ9yD8xO086YXdYhvNjBdnekm4ZnaP5yC8Cs/1tA==
+  dependencies:
+    "@babel/code-frame" "^7.10.4"
+    "@babel/parser" "^7.10.4"
+    "@babel/types" "^7.10.4"
 
-"@types/d3-ease@*":
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/@types/d3-ease/-/d3-ease-1.0.7.tgz#93a301868be9e15061f3d44343b1ab3f8acb6f09"
+"@babel/traverse@^7.1.0", "@babel/traverse@^7.10.4", "@babel/traverse@^7.11.5":
+  version "7.11.5"
+  resolved "https://registry.npmjs.org/@babel/traverse/-/traverse-7.11.5.tgz"
+  integrity sha512-EjiPXt+r7LiCZXEfRpSJd+jUMnBd4/9OUv7Nx3+0u9+eimMwJmG0Q98lw4/289JCoxSE8OolDMNZaaF/JZ69WQ==
+  dependencies:
+    "@babel/code-frame" "^7.10.4"
+    "@babel/generator" "^7.11.5"
+    "@babel/helper-function-name" "^7.10.4"
+    "@babel/helper-split-export-declaration" "^7.11.0"
+    "@babel/parser" "^7.11.5"
+    "@babel/types" "^7.11.5"
+    debug "^4.1.0"
+    globals "^11.1.0"
+    lodash "^4.17.19"
 
-"@types/d3-fetch@*":
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/@types/d3-fetch/-/d3-fetch-1.1.2.tgz#a59921477e25850ca6b3353e03d5d29e5a0e8e03"
+"@babel/types@^7.0.0", "@babel/types@^7.10.4", "@babel/types@^7.11.0", "@babel/types@^7.11.5", "@babel/types@^7.3.0", "@babel/types@^7.3.3":
+  version "7.11.5"
+  resolved "https://registry.npmjs.org/@babel/types/-/types-7.11.5.tgz"
+  integrity sha512-bvM7Qz6eKnJVFIn+1LPtjlBFPVN5jNDc1XmN15vWe7Q3DPBufWWsLiIvUu7xW87uTG6QoggpIDnUgLQvPheU+Q==
   dependencies:
-    "@types/d3-dsv" "*"
+    "@babel/helper-validator-identifier" "^7.10.4"
+    lodash "^4.17.19"
+    to-fast-properties "^2.0.0"
 
-"@types/d3-force@*":
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/@types/d3-force/-/d3-force-1.1.1.tgz#185c18b77932df63457894bd36d0d6e9692546c0"
+"@bcoe/v8-coverage@^0.2.3":
+  version "0.2.3"
+  resolved "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz"
+  integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@types/d3-format@*":
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/@types/d3-format/-/d3-format-1.3.0.tgz#c5e115fac8e6861ce656fe9861892b22f6b0cfcb"
+"@cnakazawa/watch@^1.0.3":
+  version "1.0.4"
+  resolved "https://registry.npmjs.org/@cnakazawa/watch/-/watch-1.0.4.tgz"
+  integrity sha512-v9kIhKwjeZThiWrLmj0y17CWoyddASLj9O2yvbZkbvw/N3rWOYy9zkV66ursAoVr0mV15bL8g0c4QZUE6cdDoQ==
+  dependencies:
+    exec-sh "^0.3.2"
+    minimist "^1.2.0"
 
-"@types/d3-geo@*":
-  version "1.10.3"
-  resolved "https://registry.yarnpkg.com/@types/d3-geo/-/d3-geo-1.10.3.tgz#3c01b2baa480e1108301096328dc2837e7ff4d8a"
+"@esbuild/aix-ppc64@0.25.1":
+  version "0.25.1"
+  resolved "https://registry.yarnpkg.com/@esbuild/aix-ppc64/-/aix-ppc64-0.25.1.tgz#c33cf6bbee34975626b01b80451cbb72b4c6c91d"
+  integrity sha512-kfYGy8IdzTGy+z0vFGvExZtxkFlA4zAxgKEahG9KE1ScBjpQnFsNOX8KTU5ojNru5ed5CVoJYXFtoxaq5nFbjQ==
+
+"@esbuild/android-arm64@0.25.1":
+  version "0.25.1"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.25.1.tgz#ea766015c7d2655164f22100d33d7f0308a28d6d"
+  integrity sha512-50tM0zCJW5kGqgG7fQ7IHvQOcAn9TKiVRuQ/lN0xR+T2lzEFvAi1ZcS8DiksFcEpf1t/GYOeOfCAgDHFpkiSmA==
+
+"@esbuild/android-arm@0.25.1":
+  version "0.25.1"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.25.1.tgz#e84d2bf2fe2e6177a0facda3a575b2139fd3cb9c"
+  integrity sha512-dp+MshLYux6j/JjdqVLnMglQlFu+MuVeNrmT5nk6q07wNhCdSnB7QZj+7G8VMUGh1q+vj2Bq8kRsuyA00I/k+Q==
+
+"@esbuild/android-x64@0.25.1":
+  version "0.25.1"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.25.1.tgz#58337bee3bc6d78d10425e5500bd11370cfdfbed"
+  integrity sha512-GCj6WfUtNldqUzYkN/ITtlhwQqGWu9S45vUXs7EIYf+7rCiiqH9bCloatO9VhxsL0Pji+PF4Lz2XXCES+Q8hDw==
+
+"@esbuild/darwin-arm64@0.25.1":
+  version "0.25.1"
+  resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.25.1.tgz#a46805c1c585d451aa83be72500bd6e8495dd591"
+  integrity sha512-5hEZKPf+nQjYoSr/elb62U19/l1mZDdqidGfmFutVUjjUZrOazAtwK+Kr+3y0C/oeJfLlxo9fXb1w7L+P7E4FQ==
+
+"@esbuild/darwin-x64@0.25.1":
+  version "0.25.1"
+  resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.25.1.tgz#0643e003bb238c63fc93ddbee7d26a003be3cd98"
+  integrity sha512-hxVnwL2Dqs3fM1IWq8Iezh0cX7ZGdVhbTfnOy5uURtao5OIVCEyj9xIzemDi7sRvKsuSdtCAhMKarxqtlyVyfA==
+
+"@esbuild/freebsd-arm64@0.25.1":
+  version "0.25.1"
+  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.1.tgz#cff18da5469c09986b93e87979de5d6872fe8f8e"
+  integrity sha512-1MrCZs0fZa2g8E+FUo2ipw6jw5qqQiH+tERoS5fAfKnRx6NXH31tXBKI3VpmLijLH6yriMZsxJtaXUyFt/8Y4A==
+
+"@esbuild/freebsd-x64@0.25.1":
+  version "0.25.1"
+  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.25.1.tgz#362fc09c2de14987621c1878af19203c46365dde"
+  integrity sha512-0IZWLiTyz7nm0xuIs0q1Y3QWJC52R8aSXxe40VUxm6BB1RNmkODtW6LHvWRrGiICulcX7ZvyH6h5fqdLu4gkww==
+
+"@esbuild/linux-arm64@0.25.1":
+  version "0.25.1"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.25.1.tgz#aa90d5b02efc97a271e124e6d1cea490634f7498"
+  integrity sha512-jaN3dHi0/DDPelk0nLcXRm1q7DNJpjXy7yWaWvbfkPvI+7XNSc/lDOnCLN7gzsyzgu6qSAmgSvP9oXAhP973uQ==
+
+"@esbuild/linux-arm@0.25.1":
+  version "0.25.1"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.25.1.tgz#dfcefcbac60a20918b19569b4b657844d39db35a"
+  integrity sha512-NdKOhS4u7JhDKw9G3cY6sWqFcnLITn6SqivVArbzIaf3cemShqfLGHYMx8Xlm/lBit3/5d7kXvriTUGa5YViuQ==
+
+"@esbuild/linux-ia32@0.25.1":
+  version "0.25.1"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.25.1.tgz#6f9527077ccb7953ed2af02e013d4bac69f13754"
+  integrity sha512-OJykPaF4v8JidKNGz8c/q1lBO44sQNUQtq1KktJXdBLn1hPod5rE/Hko5ugKKZd+D2+o1a9MFGUEIUwO2YfgkQ==
+
+"@esbuild/linux-loong64@0.25.1":
+  version "0.25.1"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.25.1.tgz#287d2412a5456e5860c2839d42a4b51284d1697c"
+  integrity sha512-nGfornQj4dzcq5Vp835oM/o21UMlXzn79KobKlcs3Wz9smwiifknLy4xDCLUU0BWp7b/houtdrgUz7nOGnfIYg==
+
+"@esbuild/linux-mips64el@0.25.1":
+  version "0.25.1"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.25.1.tgz#530574b9e1bc5d20f7a4f44c5f045e26f3783d57"
+  integrity sha512-1osBbPEFYwIE5IVB/0g2X6i1qInZa1aIoj1TdL4AaAb55xIIgbg8Doq6a5BzYWgr+tEcDzYH67XVnTmUzL+nXg==
+
+"@esbuild/linux-ppc64@0.25.1":
+  version "0.25.1"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.25.1.tgz#5d7e6b283a0b321ea42c6bc0abeb9eb99c1f5589"
+  integrity sha512-/6VBJOwUf3TdTvJZ82qF3tbLuWsscd7/1w+D9LH0W/SqUgM5/JJD0lrJ1fVIfZsqB6RFmLCe0Xz3fmZc3WtyVg==
+
+"@esbuild/linux-riscv64@0.25.1":
+  version "0.25.1"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.25.1.tgz#14fa0cd073c26b4ee2465d18cd1e18eea7859fa8"
+  integrity sha512-nSut/Mx5gnilhcq2yIMLMe3Wl4FK5wx/o0QuuCLMtmJn+WeWYoEGDN1ipcN72g1WHsnIbxGXd4i/MF0gTcuAjQ==
+
+"@esbuild/linux-s390x@0.25.1":
+  version "0.25.1"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.25.1.tgz#e677b4b9d1b384098752266ccaa0d52a420dc1aa"
+  integrity sha512-cEECeLlJNfT8kZHqLarDBQso9a27o2Zd2AQ8USAEoGtejOrCYHNtKP8XQhMDJMtthdF4GBmjR2au3x1udADQQQ==
+
+"@esbuild/linux-x64@0.25.1":
+  version "0.25.1"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.25.1.tgz#f1c796b78fff5ce393658313e8c58613198d9954"
+  integrity sha512-xbfUhu/gnvSEg+EGovRc+kjBAkrvtk38RlerAzQxvMzlB4fXpCFCeUAYzJvrnhFtdeyVCDANSjJvOvGYoeKzFA==
+
+"@esbuild/netbsd-arm64@0.25.1":
+  version "0.25.1"
+  resolved "https://registry.yarnpkg.com/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.1.tgz#0d280b7dfe3973f111b02d5fe9f3063b92796d29"
+  integrity sha512-O96poM2XGhLtpTh+s4+nP7YCCAfb4tJNRVZHfIE7dgmax+yMP2WgMd2OecBuaATHKTHsLWHQeuaxMRnCsH8+5g==
+
+"@esbuild/netbsd-x64@0.25.1":
+  version "0.25.1"
+  resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.25.1.tgz#be663893931a4bb3f3a009c5cc24fa9681cc71c0"
+  integrity sha512-X53z6uXip6KFXBQ+Krbx25XHV/NCbzryM6ehOAeAil7X7oa4XIq+394PWGnwaSQ2WRA0KI6PUO6hTO5zeF5ijA==
+
+"@esbuild/openbsd-arm64@0.25.1":
+  version "0.25.1"
+  resolved "https://registry.yarnpkg.com/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.1.tgz#d9021b884233673a05dc1cc26de0bf325d824217"
+  integrity sha512-Na9T3szbXezdzM/Kfs3GcRQNjHzM6GzFBeU1/6IV/npKP5ORtp9zbQjvkDJ47s6BCgaAZnnnu/cY1x342+MvZg==
+
+"@esbuild/openbsd-x64@0.25.1":
+  version "0.25.1"
+  resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.25.1.tgz#9f1dc1786ed2e2938c404b06bcc48be9a13250de"
+  integrity sha512-T3H78X2h1tszfRSf+txbt5aOp/e7TAz3ptVKu9Oyir3IAOFPGV6O9c2naym5TOriy1l0nNf6a4X5UXRZSGX/dw==
+
+"@esbuild/sunos-x64@0.25.1":
+  version "0.25.1"
+  resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.25.1.tgz#89aac24a4b4115959b3f790192cf130396696c27"
+  integrity sha512-2H3RUvcmULO7dIE5EWJH8eubZAI4xw54H1ilJnRNZdeo8dTADEZ21w6J22XBkXqGJbe0+wnNJtw3UXRoLJnFEg==
+
+"@esbuild/win32-arm64@0.25.1":
+  version "0.25.1"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.25.1.tgz#354358647a6ea98ea6d243bf48bdd7a434999582"
+  integrity sha512-GE7XvrdOzrb+yVKB9KsRMq+7a2U/K5Cf/8grVFRAGJmfADr/e/ODQ134RK2/eeHqYV5eQRFxb1hY7Nr15fv1NQ==
+
+"@esbuild/win32-ia32@0.25.1":
+  version "0.25.1"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.25.1.tgz#8cea7340f2647eba951a041dc95651e3908cd4cb"
+  integrity sha512-uOxSJCIcavSiT6UnBhBzE8wy3n0hOkJsBOzy7HDAuTDE++1DJMRRVCPGisULScHL+a/ZwdXPpXD3IyFKjA7K8A==
+
+"@esbuild/win32-x64@0.25.1":
+  version "0.25.1"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.25.1.tgz#7d79922cb2d88f9048f06393dbf62d2e4accb584"
+  integrity sha512-Y1EQdcfwMSeQN/ujR5VayLOJ1BHaK+ssyk0AEzPjC+t1lITgsnccPqFjb6V+LsTp/9Iov4ysfjxLaGJ9RPtkVg==
+
+"@fullcalendar/core@4.4.2":
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/@fullcalendar/core/-/core-4.4.2.tgz#864abe98cce4497a163c01a8fc30389f15d3d4e1"
+  integrity sha512-vq7KQGuAJ1ieFG5tUqwxwUwmXYtblFOTjHaLAVHo6iEPB52mS7DS45VJfkhaQmX4+5/+BHRpg82G1qkuAINwtg==
+
+"@fullcalendar/daygrid@4.4.2":
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/@fullcalendar/daygrid/-/daygrid-4.4.2.tgz#568bfb3c7cc97f83b57cf3aef0fa3ed1bf6eda16"
+  integrity sha512-axjfMhxEXHShV3r2TZjf+2niJ1C6LdAxkHKmg7mVq4jXtUQHOldU5XsjV0v2lUAt1urJBFi2zajfK8798ukL3Q==
+
+"@fullcalendar/daygrid@~4.4.0":
+  version "4.4.0"
+  resolved "https://registry.npmjs.org/@fullcalendar/daygrid/-/daygrid-4.4.0.tgz"
+  integrity sha512-pDfvL0XZxKHTZ4VFOmwaYe3LmuABEIZsEopeqQ8y5O6BDen9KCbJqgHeCI8FpASSBd6bNlUx7il7EHdSoHhgIw==
+
+"@fullcalendar/interaction@4.4.2":
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/@fullcalendar/interaction/-/interaction-4.4.2.tgz#0a6be06538f843b6f0f4e9b4de87a5e3ec3629fb"
+  integrity sha512-3ItpGFnxcYQT4NClqhq93QTQwOI8x3mlMf5M4DgK5avVaSzpv9g8p+opqeotK2yzpFeINps06cuQyB1h7vcv1Q==
+
+"@fullcalendar/moment-timezone@4.4.2":
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/@fullcalendar/moment-timezone/-/moment-timezone-4.4.2.tgz#e4639791c7aa76f79cb670273e07d41bc65bbf47"
+  integrity sha512-8CjGpBdrQqDh60y6BQJScR2OcCNghPrMFNXd5L9PkU6ktfoYJapTyPZNddCXPPFiPJJdEmarU+RxPxgkl/EP9g==
+
+"@fullcalendar/moment@4.4.2":
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/@fullcalendar/moment/-/moment-4.4.2.tgz#c770dc11d3cd6d13ed93988fb58a57e76fb31770"
+  integrity sha512-PBrjxxDEG3RO+8SOA3a1YA7yoGI3bgnltiGY3ehOtJwFIMsUQDSSr5aMoWyRpz7MXgp2YOQY5rzMEIp2A8eK9w==
+
+"@fullcalendar/timegrid@4.4.2":
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/@fullcalendar/timegrid/-/timegrid-4.4.2.tgz#9d5b26204cd2b0928e7498c54f758a6d07b15191"
+  integrity sha512-M5an7qii8OUmI4ogY47k5pn2j/qUbLp6sa6Vo0gO182HR5pb9YtrEZnoQhnScok+I0BkDkLFzMQoiAMTjBm2PQ==
+  dependencies:
+    "@fullcalendar/daygrid" "~4.4.0"
+
+"@istanbuljs/load-nyc-config@^1.0.0":
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz"
+  integrity sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==
   dependencies:
-    "@types/geojson" "*"
+    camelcase "^5.3.1"
+    find-up "^4.1.0"
+    get-package-type "^0.1.0"
+    js-yaml "^3.13.1"
+    resolve-from "^5.0.0"
 
-"@types/d3-hierarchy@*":
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/@types/d3-hierarchy/-/d3-hierarchy-1.1.4.tgz#b04dfcb1f2074da789ada10fe4942d13f0bce421"
+"@istanbuljs/schema@^0.1.2":
+  version "0.1.2"
+  resolved "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.2.tgz"
+  integrity sha512-tsAQNx32a8CoFhjhijUIhI4kccIAgmGhy8LZMZgGfmXcpMbPRUqn5LWmgRttILi6yeGmBJd2xsPkFMs0PzgPCw==
 
-"@types/d3-interpolate@*":
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/@types/d3-interpolate/-/d3-interpolate-1.3.0.tgz#65b9627900bfdd82474875d9b23d574a4388af7c"
+"@jest/console@^26.5.2":
+  version "26.5.2"
+  resolved "https://registry.npmjs.org/@jest/console/-/console-26.5.2.tgz"
+  integrity sha512-lJELzKINpF1v74DXHbCRIkQ/+nUV1M+ntj+X1J8LxCgpmJZjfLmhFejiMSbjjD66fayxl5Z06tbs3HMyuik6rw==
   dependencies:
-    "@types/d3-color" "*"
+    "@jest/types" "^26.5.2"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    jest-message-util "^26.5.2"
+    jest-util "^26.5.2"
+    slash "^3.0.0"
+
+"@jest/core@^26.5.3":
+  version "26.5.3"
+  resolved "https://registry.npmjs.org/@jest/core/-/core-26.5.3.tgz"
+  integrity sha512-CiU0UKFF1V7KzYTVEtFbFmGLdb2g4aTtY0WlyUfLgj/RtoTnJFhh50xKKr7OYkdmBUlGFSa2mD1TU3UZ6OLd4g==
+  dependencies:
+    "@jest/console" "^26.5.2"
+    "@jest/reporters" "^26.5.3"
+    "@jest/test-result" "^26.5.2"
+    "@jest/transform" "^26.5.2"
+    "@jest/types" "^26.5.2"
+    "@types/node" "*"
+    ansi-escapes "^4.2.1"
+    chalk "^4.0.0"
+    exit "^0.1.2"
+    graceful-fs "^4.2.4"
+    jest-changed-files "^26.5.2"
+    jest-config "^26.5.3"
+    jest-haste-map "^26.5.2"
+    jest-message-util "^26.5.2"
+    jest-regex-util "^26.0.0"
+    jest-resolve "^26.5.2"
+    jest-resolve-dependencies "^26.5.3"
+    jest-runner "^26.5.3"
+    jest-runtime "^26.5.3"
+    jest-snapshot "^26.5.3"
+    jest-util "^26.5.2"
+    jest-validate "^26.5.3"
+    jest-watcher "^26.5.2"
+    micromatch "^4.0.2"
+    p-each-series "^2.1.0"
+    rimraf "^3.0.0"
+    slash "^3.0.0"
+    strip-ansi "^6.0.0"
+
+"@jest/environment@^26.5.2":
+  version "26.5.2"
+  resolved "https://registry.npmjs.org/@jest/environment/-/environment-26.5.2.tgz"
+  integrity sha512-YjhCD/Zhkz0/1vdlS/QN6QmuUdDkpgBdK4SdiVg4Y19e29g4VQYN5Xg8+YuHjdoWGY7wJHMxc79uDTeTOy9Ngw==
+  dependencies:
+    "@jest/fake-timers" "^26.5.2"
+    "@jest/types" "^26.5.2"
+    "@types/node" "*"
+    jest-mock "^26.5.2"
 
-"@types/d3-path@*":
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/@types/d3-path/-/d3-path-1.0.7.tgz#a0736fceed688a695f48265a82ff7a3369414b81"
+"@jest/fake-timers@^26.5.2":
+  version "26.5.2"
+  resolved "https://registry.npmjs.org/@jest/fake-timers/-/fake-timers-26.5.2.tgz"
+  integrity sha512-09Hn5Oraqt36V1akxQeWMVL0fR9c6PnEhpgLaYvREXZJAh2H2Y+QLCsl0g7uMoJeoWJAuz4tozk1prbR1Fc1sw==
+  dependencies:
+    "@jest/types" "^26.5.2"
+    "@sinonjs/fake-timers" "^6.0.1"
+    "@types/node" "*"
+    jest-message-util "^26.5.2"
+    jest-mock "^26.5.2"
+    jest-util "^26.5.2"
+
+"@jest/globals@^26.5.3":
+  version "26.5.3"
+  resolved "https://registry.npmjs.org/@jest/globals/-/globals-26.5.3.tgz"
+  integrity sha512-7QztI0JC2CuB+Wx1VdnOUNeIGm8+PIaqngYsZXQCkH2QV0GFqzAYc9BZfU0nuqA6cbYrWh5wkuMzyii3P7deug==
+  dependencies:
+    "@jest/environment" "^26.5.2"
+    "@jest/types" "^26.5.2"
+    expect "^26.5.3"
+
+"@jest/reporters@^26.5.3":
+  version "26.5.3"
+  resolved "https://registry.npmjs.org/@jest/reporters/-/reporters-26.5.3.tgz"
+  integrity sha512-X+vR0CpfMQzYcYmMFKNY9n4jklcb14Kffffp7+H/MqitWnb0440bW2L76NGWKAa+bnXhNoZr+lCVtdtPmfJVOQ==
+  dependencies:
+    "@bcoe/v8-coverage" "^0.2.3"
+    "@jest/console" "^26.5.2"
+    "@jest/test-result" "^26.5.2"
+    "@jest/transform" "^26.5.2"
+    "@jest/types" "^26.5.2"
+    chalk "^4.0.0"
+    collect-v8-coverage "^1.0.0"
+    exit "^0.1.2"
+    glob "^7.1.2"
+    graceful-fs "^4.2.4"
+    istanbul-lib-coverage "^3.0.0"
+    istanbul-lib-instrument "^4.0.3"
+    istanbul-lib-report "^3.0.0"
+    istanbul-lib-source-maps "^4.0.0"
+    istanbul-reports "^3.0.2"
+    jest-haste-map "^26.5.2"
+    jest-resolve "^26.5.2"
+    jest-util "^26.5.2"
+    jest-worker "^26.5.0"
+    slash "^3.0.0"
+    source-map "^0.6.0"
+    string-length "^4.0.1"
+    terminal-link "^2.0.0"
+    v8-to-istanbul "^6.0.1"
+  optionalDependencies:
+    node-notifier "^8.0.0"
 
-"@types/d3-polygon@*":
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/@types/d3-polygon/-/d3-polygon-1.0.6.tgz#db25c630a2afb9191fe51ba61dd37baee9dd44c7"
+"@jest/source-map@^26.5.0":
+  version "26.5.0"
+  resolved "https://registry.npmjs.org/@jest/source-map/-/source-map-26.5.0.tgz"
+  integrity sha512-jWAw9ZwYHJMe9eZq/WrsHlwF8E3hM9gynlcDpOyCb9bR8wEd9ZNBZCi7/jZyzHxC7t3thZ10gO2IDhu0bPKS5g==
+  dependencies:
+    callsites "^3.0.0"
+    graceful-fs "^4.2.4"
+    source-map "^0.6.0"
 
-"@types/d3-quadtree@*":
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/@types/d3-quadtree/-/d3-quadtree-1.0.6.tgz#45da9e603688ba90eedd3d40f6e504764e06e493"
+"@jest/test-result@^26.5.2":
+  version "26.5.2"
+  resolved "https://registry.npmjs.org/@jest/test-result/-/test-result-26.5.2.tgz"
+  integrity sha512-E/Zp6LURJEGSCWpoMGmCFuuEI1OWuI3hmZwmULV0GsgJBh7u0rwqioxhRU95euUuviqBDN8ruX/vP/4bwYolXw==
+  dependencies:
+    "@jest/console" "^26.5.2"
+    "@jest/types" "^26.5.2"
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    collect-v8-coverage "^1.0.0"
+
+"@jest/test-sequencer@^26.5.3":
+  version "26.5.3"
+  resolved "https://registry.npmjs.org/@jest/test-sequencer/-/test-sequencer-26.5.3.tgz"
+  integrity sha512-Wqzb7aQ13L3T47xHdpUqYMOpiqz6Dx2QDDghp5AV/eUDXR7JieY+E1s233TQlNyl+PqtqgjVokmyjzX/HA51BA==
+  dependencies:
+    "@jest/test-result" "^26.5.2"
+    graceful-fs "^4.2.4"
+    jest-haste-map "^26.5.2"
+    jest-runner "^26.5.3"
+    jest-runtime "^26.5.3"
+
+"@jest/transform@^26.5.2":
+  version "26.5.2"
+  resolved "https://registry.npmjs.org/@jest/transform/-/transform-26.5.2.tgz"
+  integrity sha512-AUNjvexh+APhhmS8S+KboPz+D3pCxPvEAGduffaAJYxIFxGi/ytZQkrqcKDUU0ERBAo5R7087fyOYr2oms1seg==
+  dependencies:
+    "@babel/core" "^7.1.0"
+    "@jest/types" "^26.5.2"
+    babel-plugin-istanbul "^6.0.0"
+    chalk "^4.0.0"
+    convert-source-map "^1.4.0"
+    fast-json-stable-stringify "^2.0.0"
+    graceful-fs "^4.2.4"
+    jest-haste-map "^26.5.2"
+    jest-regex-util "^26.0.0"
+    jest-util "^26.5.2"
+    micromatch "^4.0.2"
+    pirates "^4.0.1"
+    slash "^3.0.0"
+    source-map "^0.6.1"
+    write-file-atomic "^3.0.0"
 
-"@types/d3-random@*":
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/@types/d3-random/-/d3-random-1.1.1.tgz#38647ce2ff4ce7d0d56974334c1c4092513c8b9f"
+"@jest/types@^26.5.2":
+  version "26.5.2"
+  resolved "https://registry.npmjs.org/@jest/types/-/types-26.5.2.tgz"
+  integrity sha512-QDs5d0gYiyetI8q+2xWdkixVQMklReZr4ltw7GFDtb4fuJIBCE6mzj2LnitGqCuAlLap6wPyb8fpoHgwZz5fdg==
+  dependencies:
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    "@types/istanbul-reports" "^3.0.0"
+    "@types/node" "*"
+    "@types/yargs" "^15.0.0"
+    chalk "^4.0.0"
 
-"@types/d3-scale-chromatic@*":
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/@types/d3-scale-chromatic/-/d3-scale-chromatic-1.3.0.tgz#b8b58a7a262a583fc1c95ce851d5a75811875034"
+"@jest/types@^26.6.2":
+  version "26.6.2"
+  resolved "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz"
+  integrity sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==
+  dependencies:
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    "@types/istanbul-reports" "^3.0.0"
+    "@types/node" "*"
+    "@types/yargs" "^15.0.0"
+    chalk "^4.0.0"
 
-"@types/d3-scale@*":
+"@mapbox/geojson-rewind@^0.5.2":
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/@mapbox/geojson-rewind/-/geojson-rewind-0.5.2.tgz#591a5d71a9cd1da1a0bf3420b3bea31b0fc7946a"
+  integrity sha512-tJaT+RbYGJYStt7wI3cq4Nl4SXxG8W7JDG5DMJu97V25RnbNg3QtQtf+KD+VLjNpWKYsRvXDNmNrBgEETr1ifA==
+  dependencies:
+    get-stream "^6.0.1"
+    minimist "^1.2.6"
+
+"@mapbox/jsonlint-lines-primitives@^2.0.2", "@mapbox/jsonlint-lines-primitives@~2.0.2":
   version "2.0.2"
-  resolved "https://registry.yarnpkg.com/@types/d3-scale/-/d3-scale-2.0.2.tgz#61145948aa1a52ab31384766cd013308699112b3"
+  resolved "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz"
+  integrity sha1-zlblOfg1UrWNENZy6k1vya3HsjQ=
+
+"@mapbox/point-geometry@0.1.0", "@mapbox/point-geometry@^0.1.0", "@mapbox/point-geometry@~0.1.0":
+  version "0.1.0"
+  resolved "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz"
+  integrity sha1-ioP5M1x4YO/6Lu7KJUMyqgru2PI=
+
+"@mapbox/tiny-sdf@^2.0.6":
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/@mapbox/tiny-sdf/-/tiny-sdf-2.0.6.tgz#9a1d33e5018093e88f6a4df2343e886056287282"
+  integrity sha512-qMqa27TLw+ZQz5Jk+RcwZGH7BQf5G/TrutJhspsca/3SHwmgKQ1iq+d3Jxz5oysPVYTGP6aXxCo5Lk9Er6YBAA==
+
+"@mapbox/unitbezier@^0.0.1":
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/@mapbox/unitbezier/-/unitbezier-0.0.1.tgz#d32deb66c7177e9e9dfc3bbd697083e2e657ff01"
+  integrity sha512-nMkuDXFv60aBr9soUG5q+GvZYL+2KZHVvsqFCzqnkGEf46U2fvmytHaEVc1/YZbiLn8X+eR3QzX1+dwDO1lxlw==
+
+"@mapbox/vector-tile@^1.3.1":
+  version "1.3.1"
+  resolved "https://registry.npmjs.org/@mapbox/vector-tile/-/vector-tile-1.3.1.tgz"
+  integrity sha512-MCEddb8u44/xfQ3oD+Srl/tNcQoqTw3goGk2oLsrFxOTc3dUp+kAnby3PvAeeBYSMSjSPD1nd1AJA6W49WnoUw==
   dependencies:
-    "@types/d3-time" "*"
+    "@mapbox/point-geometry" "~0.1.0"
 
-"@types/d3-selection@*":
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/@types/d3-selection/-/d3-selection-1.3.2.tgz#dd5661a560ba9ce3aba823c424b8d4a1bc7e833f"
+"@mapbox/whoots-js@^3.1.0":
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/@mapbox/whoots-js/-/whoots-js-3.1.0.tgz"
+  integrity sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q==
+
+"@napi-rs/canvas-android-arm64@0.1.68":
+  version "0.1.68"
+  resolved "https://registry.yarnpkg.com/@napi-rs/canvas-android-arm64/-/canvas-android-arm64-0.1.68.tgz#505e788487776a146a45f1923fc38d01b2d676a2"
+  integrity sha512-h1KcSR4LKLfRfzeBH65xMxbWOGa1OtMFQbCMVlxPCkN1Zr+2gK+70pXO5ktojIYcUrP6KDcOwoc8clho5ccM/w==
+
+"@napi-rs/canvas-darwin-arm64@0.1.68":
+  version "0.1.68"
+  resolved "https://registry.yarnpkg.com/@napi-rs/canvas-darwin-arm64/-/canvas-darwin-arm64-0.1.68.tgz#525e389971ce66c53e27fef1457a4970ed5cc7f2"
+  integrity sha512-/VURlrAD4gDoxW1GT/b0nP3fRz/fhxmHI/xznTq2FTwkQLPOlLkDLCvTmQ7v6LtGKdc2Ed6rvYpRan+JXThInQ==
+
+"@napi-rs/canvas-darwin-x64@0.1.68":
+  version "0.1.68"
+  resolved "https://registry.yarnpkg.com/@napi-rs/canvas-darwin-x64/-/canvas-darwin-x64-0.1.68.tgz#97f91b6a6f2b765ee47e69edf68e822cfed649e7"
+  integrity sha512-tEpvGR6vCLTo1Tx9wmDnoOKROpw57wiCWwCpDOuVlj/7rqEJOUYr9ixW4aRJgmeGBrZHgevI0EURys2ER6whmg==
+
+"@napi-rs/canvas-linux-arm-gnueabihf@0.1.68":
+  version "0.1.68"
+  resolved "https://registry.yarnpkg.com/@napi-rs/canvas-linux-arm-gnueabihf/-/canvas-linux-arm-gnueabihf-0.1.68.tgz#28566dfe9e3728b31ff08031035bf534f9f2f8d9"
+  integrity sha512-U9xbJsumPOiAYeAFZMlHf62b9dGs2HJ6Q5xt7xTB0uEyPeurwhgYBWGgabdsEidyj38YuzI/c3LGBbSQB3vagw==
+
+"@napi-rs/canvas-linux-arm64-gnu@0.1.68":
+  version "0.1.68"
+  resolved "https://registry.yarnpkg.com/@napi-rs/canvas-linux-arm64-gnu/-/canvas-linux-arm64-gnu-0.1.68.tgz#80cc5356edb0e15f82bf44929f27b91e95be8aae"
+  integrity sha512-KFkn8wEm3mPnWD4l8+OUUkxylSJuN5q9PnJRZJgv15RtCA1bgxIwTkBhI/+xuyVMcHqON9sXq7cDkEJtHm35dg==
+
+"@napi-rs/canvas-linux-arm64-musl@0.1.68":
+  version "0.1.68"
+  resolved "https://registry.yarnpkg.com/@napi-rs/canvas-linux-arm64-musl/-/canvas-linux-arm64-musl-0.1.68.tgz#7f0d6dfa7508e37ba9d52867e6c6e1448dec238f"
+  integrity sha512-IQzts91rCdOALXBWQxLZRCEDrfFTGDtNRJMNu+2SKZ1uT8cmPQkPwVk5rycvFpvgAcmiFiOSCp1aRrlfU8KPpQ==
+
+"@napi-rs/canvas-linux-riscv64-gnu@0.1.68":
+  version "0.1.68"
+  resolved "https://registry.yarnpkg.com/@napi-rs/canvas-linux-riscv64-gnu/-/canvas-linux-riscv64-gnu-0.1.68.tgz#050ea7e7f6cb57bc8b8310235e066a0ffd50d385"
+  integrity sha512-e9AS5UttoIKqXSmBzKZdd3NErSVyOEYzJfNOCGtafGk1//gibTwQXGlSXmAKuErqMp09pyk9aqQRSYzm1AQfBw==
+
+"@napi-rs/canvas-linux-x64-gnu@0.1.68":
+  version "0.1.68"
+  resolved "https://registry.yarnpkg.com/@napi-rs/canvas-linux-x64-gnu/-/canvas-linux-x64-gnu-0.1.68.tgz#fa8361125da2a0a914a234a626b0f28b27332b8f"
+  integrity sha512-Pa/I36VE3j57I3Obhrr+J48KGFfkZk2cJN/2NmW/vCgmoF7kCP6aTVq5n+cGdGWLd/cN9CJ9JvNwEoMRDghu0g==
+
+"@napi-rs/canvas-linux-x64-musl@0.1.68":
+  version "0.1.68"
+  resolved "https://registry.yarnpkg.com/@napi-rs/canvas-linux-x64-musl/-/canvas-linux-x64-musl-0.1.68.tgz#a9eefc4e82189dca64f400c921b0387acf990f6f"
+  integrity sha512-9c6rkc5195wNxuUHJdf4/mmnq433OQey9TNvQ9LspJazvHbfSkTij8wtKjASVQsJyPDva4fkWOeV/OQ7cLw0GQ==
+
+"@napi-rs/canvas-win32-x64-msvc@0.1.68":
+  version "0.1.68"
+  resolved "https://registry.yarnpkg.com/@napi-rs/canvas-win32-x64-msvc/-/canvas-win32-x64-msvc-0.1.68.tgz#07e879f1c1759a31724871cc6202aba6a3b580f2"
+  integrity sha512-Fc5Dez23u0FoSATurT6/w1oMytiRnKWEinHivdMvXpge6nG4YvhrASrtqMk8dGJMVQpHr8QJYF45rOrx2YU2Aw==
+
+"@napi-rs/canvas@^0.1.67":
+  version "0.1.68"
+  resolved "https://registry.yarnpkg.com/@napi-rs/canvas/-/canvas-0.1.68.tgz#265af2971aafcfeb60dbb591c7dc03c3f6e247f1"
+  integrity sha512-LQESrePLEBLvhuFkXx9jjBXRC2ClYsO5mqQ1m/puth5z9SOuM3N/B3vDuqnC3RJFktDktyK9khGvo7dTkqO9uQ==
+  optionalDependencies:
+    "@napi-rs/canvas-android-arm64" "0.1.68"
+    "@napi-rs/canvas-darwin-arm64" "0.1.68"
+    "@napi-rs/canvas-darwin-x64" "0.1.68"
+    "@napi-rs/canvas-linux-arm-gnueabihf" "0.1.68"
+    "@napi-rs/canvas-linux-arm64-gnu" "0.1.68"
+    "@napi-rs/canvas-linux-arm64-musl" "0.1.68"
+    "@napi-rs/canvas-linux-riscv64-gnu" "0.1.68"
+    "@napi-rs/canvas-linux-x64-gnu" "0.1.68"
+    "@napi-rs/canvas-linux-x64-musl" "0.1.68"
+    "@napi-rs/canvas-win32-x64-msvc" "0.1.68"
+"@maplibre/maplibre-gl-style-spec@^23.3.0":
+  version "23.3.0"
+  resolved "https://registry.yarnpkg.com/@maplibre/maplibre-gl-style-spec/-/maplibre-gl-style-spec-23.3.0.tgz#b69ab48cb3abead4e49213396c8f83492638b97c"
+  integrity sha512-IGJtuBbaGzOUgODdBRg66p8stnwj9iDXkgbYKoYcNiiQmaez5WVRfXm4b03MCDwmZyX93csbfHFWEJJYHnn5oA==
+  dependencies:
+    "@mapbox/jsonlint-lines-primitives" "~2.0.2"
+    "@mapbox/unitbezier" "^0.0.1"
+    json-stringify-pretty-compact "^4.0.0"
+    minimist "^1.2.8"
+    quickselect "^3.0.0"
+    rw "^1.3.3"
+    tinyqueue "^3.0.0"
+"@polka/url@^1.0.0-next.9":
+  version "1.0.0-next.11"
+  resolved "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.11.tgz"
+  integrity sha512-3NsZsJIA/22P3QUyrEDNA2D133H4j224twJrdipXN38dpnIOzAbUDtOwkcJ5pXmn75w7LSQDjA4tO9dm1XlqlA==
+
+"@popperjs/core@^2.6.0":
+  version "2.6.0"
+  resolved "https://registry.npmjs.org/@popperjs/core/-/core-2.6.0.tgz"
+  integrity sha512-cPqjjzuFWNK3BSKLm0abspP0sp/IGOli4p5I5fKFAzdS8fvjdOwDCfZqAaIiXd9lPkOWi3SUUfZof3hEb7J/uw==
+
+"@sinonjs/commons@^1.7.0":
+  version "1.8.1"
+  resolved "https://registry.npmjs.org/@sinonjs/commons/-/commons-1.8.1.tgz"
+  integrity sha512-892K+kWUUi3cl+LlqEWIDrhvLgdL79tECi8JZUyq6IviKy/DNhuzCRlbHUjxK89f4ypPMMaFnFuR9Ie6DoIMsw==
+  dependencies:
+    type-detect "4.0.8"
+
+"@sinonjs/fake-timers@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.npmjs.org/@sinonjs/fake-timers/-/fake-timers-6.0.1.tgz"
+  integrity sha512-MZPUxrmFubI36XS1DI3qmI0YdN1gks62JtFZvxR67ljjSNCeK6U08Zx4msEWOXuofgqUt6zPHSi1H9fbjR/NRA==
+  dependencies:
+    "@sinonjs/commons" "^1.7.0"
+
+"@socket.io/component-emitter@~3.1.0":
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz"
+  integrity sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg==
+
+"@tanstack/virtual-core@^3.13.11":
+  version "3.13.18"
+  resolved "https://registry.yarnpkg.com/@tanstack/virtual-core/-/virtual-core-3.13.18.tgz#586e3c1fe08547ee6abf87e8fb7c99087b9c47ff"
+  integrity sha512-Mx86Hqu1k39icq2Zusq+Ey2J6dDWTjDvEv43PJtRCoEYTLyfaPnxIQ6iy7YAOK0NV/qOEmZQ/uCufrppZxTgcg==
+
+"@turf/circle@^6.5.0":
+  version "6.5.0"
+  resolved "https://registry.yarnpkg.com/@turf/circle/-/circle-6.5.0.tgz#dc017d8c0131d1d212b7c06f76510c22bbeb093c"
+  integrity sha512-oU1+Kq9DgRnoSbWFHKnnUdTmtcRUMmHoV9DjTXu9vOLNV5OWtAAh1VZ+mzsioGGzoDNT/V5igbFOkMfBQc0B6A==
+  dependencies:
+    "@turf/destination" "^6.5.0"
+    "@turf/helpers" "^6.5.0"
+
+"@turf/destination@^6.5.0":
+  version "6.5.0"
+  resolved "https://registry.yarnpkg.com/@turf/destination/-/destination-6.5.0.tgz#30a84702f9677d076130e0440d3223ae503fdae1"
+  integrity sha512-4cnWQlNC8d1tItOz9B4pmJdWpXqS0vEvv65bI/Pj/genJnsL7evI0/Xw42RvEGROS481MPiU80xzvwxEvhQiMQ==
+  dependencies:
+    "@turf/helpers" "^6.5.0"
+    "@turf/invariant" "^6.5.0"
 
-"@types/d3-shape@*":
+"@turf/helpers@^6.5.0":
+  version "6.5.0"
+  resolved "https://registry.yarnpkg.com/@turf/helpers/-/helpers-6.5.0.tgz#f79af094bd6b8ce7ed2bd3e089a8493ee6cae82e"
+  integrity sha512-VbI1dV5bLFzohYYdgqwikdMVpe7pJ9X3E+dlr425wa2/sMJqYDhTO++ec38/pcPvPE6oD9WEEeU3Xu3gza+VPw==
+
+"@turf/invariant@^6.5.0":
+  version "6.5.0"
+  resolved "https://registry.yarnpkg.com/@turf/invariant/-/invariant-6.5.0.tgz#970afc988023e39c7ccab2341bd06979ddc7463f"
+  integrity sha512-Wv8PRNCtPD31UVbdJE/KVAWKe7l6US+lJItRR/HOEW3eh+U/JwRCSUl/KZ7bmjM/C+zLNoreM2TU6OoLACs4eg==
+  dependencies:
+    "@turf/helpers" "^6.5.0"
+
+"@types/anymatch@*":
+  version "1.3.1"
+  resolved "https://registry.npmjs.org/@types/anymatch/-/anymatch-1.3.1.tgz"
+  integrity sha512-/+CRPXpBDpo2RK9C68N3b2cOvO0Cf5B9aPijHsoDQTHivnGSObdOF2BRQOYjojWTDy6nQvMjmqRXIxH55VjxxA==
+
+"@types/babel__core@^7.0.0", "@types/babel__core@^7.1.7":
+  version "7.1.10"
+  resolved "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.1.10.tgz"
+  integrity sha512-x8OM8XzITIMyiwl5Vmo2B1cR1S1Ipkyv4mdlbJjMa1lmuKvKY9FrBbEANIaMlnWn5Rf7uO+rC/VgYabNkE17Hw==
+  dependencies:
+    "@babel/parser" "^7.1.0"
+    "@babel/types" "^7.0.0"
+    "@types/babel__generator" "*"
+    "@types/babel__template" "*"
+    "@types/babel__traverse" "*"
+
+"@types/babel__generator@*":
+  version "7.6.2"
+  resolved "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.6.2.tgz"
+  integrity sha512-MdSJnBjl+bdwkLskZ3NGFp9YcXGx5ggLpQQPqtgakVhsWK0hTtNYhjpZLlWQTviGTvF8at+Bvli3jV7faPdgeQ==
+  dependencies:
+    "@babel/types" "^7.0.0"
+
+"@types/babel__template@*":
+  version "7.0.3"
+  resolved "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.0.3.tgz"
+  integrity sha512-uCoznIPDmnickEi6D0v11SBpW0OuVqHJCa7syXqQHy5uktSCreIlt0iglsCnmvz8yCb38hGcWeseA8cWJSwv5Q==
+  dependencies:
+    "@babel/parser" "^7.1.0"
+    "@babel/types" "^7.0.0"
+
+"@types/babel__traverse@*", "@types/babel__traverse@^7.0.4", "@types/babel__traverse@^7.0.6":
+  version "7.0.15"
+  resolved "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.0.15.tgz"
+  integrity sha512-Pzh9O3sTK8V6I1olsXpCfj2k/ygO2q1X0vhhnDrEQyYLHZesWz+zMZMVcwXLCYf0U36EtmyYaFGPfXlTtDHe3A==
+  dependencies:
+    "@babel/types" "^7.3.0"
+
+"@types/canvas-gauges@^2.1.1":
+  version "2.1.2"
+  resolved "https://registry.npmjs.org/@types/canvas-gauges/-/canvas-gauges-2.1.2.tgz"
+  integrity sha512-oWCq0XjsTBXPtMKXoW23ORbMWguC2Fa8o5NiZVYiUoQMMrpNLKj1E+LDznlMpcib3iyWVIy+TEpc/ea6LMbW3Q==
+
+"@types/d3-array@^1":
+  version "1.2.9"
+  resolved "https://registry.npmjs.org/@types/d3-array/-/d3-array-1.2.9.tgz"
+  integrity sha512-E/7RgPr2ylT5dWG0CswMi9NpFcjIEDqLcUSBgNHe/EMahfqYaTx4zhcggG3khqoEB/leY4Vl6nTSbwLUPjXceA==
+
+"@types/d3-axis@^1":
+  version "1.0.16"
+  resolved "https://registry.npmjs.org/@types/d3-axis/-/d3-axis-1.0.16.tgz"
+  integrity sha512-p7085weOmo4W+DzlRRVC/7OI/jugaKbVa6WMQGCQscaMylcbuaVEGk7abJLNyGVFLeCBNrHTdDiqRGnzvL0nXQ==
+  dependencies:
+    "@types/d3-selection" "^1"
+
+"@types/d3-brush@^1":
+  version "1.1.5"
+  resolved "https://registry.npmjs.org/@types/d3-brush/-/d3-brush-1.1.5.tgz"
+  integrity sha512-4zGkBafJf5zCsBtLtvDj/pNMo5X9+Ii/1hUz0GvQ+wEwelUBm2AbIDAzJnp2hLDFF307o0fhxmmocHclhXC+tw==
+  dependencies:
+    "@types/d3-selection" "^1"
+
+"@types/d3-chord@^1":
+  version "1.0.11"
+  resolved "https://registry.npmjs.org/@types/d3-chord/-/d3-chord-1.0.11.tgz"
+  integrity sha512-0DdfJ//bxyW3G9Nefwq/LDgazSKNN8NU0lBT3Cza6uVuInC2awMNsAcv1oKyRFLn9z7kXClH5XjwpveZjuz2eg==
+
+"@types/d3-collection@*":
+  version "1.0.10"
+  resolved "https://registry.npmjs.org/@types/d3-collection/-/d3-collection-1.0.10.tgz"
+  integrity sha512-54Fdv8u5JbuXymtmXm2SYzi1x/Svt+jfWBU5junkhrCewL92VjqtCBDn97coBRVwVFmYNnVTNDyV8gQyPYfm+A==
+
+"@types/d3-color@^1":
+  version "1.4.2"
+  resolved "https://registry.npmjs.org/@types/d3-color/-/d3-color-1.4.2.tgz"
+  integrity sha512-fYtiVLBYy7VQX+Kx7wU/uOIkGQn8aAEY8oWMoyja3N4dLd8Yf6XgSIR/4yWvMuveNOH5VShnqCgRqqh/UNanBA==
+
+"@types/d3-contour@^1":
+  version "1.3.3"
+  resolved "https://registry.npmjs.org/@types/d3-contour/-/d3-contour-1.3.3.tgz"
+  integrity sha512-LxwmGIfVJIc1cKs7ZFRQ1FbtXpfH7QTXYRdMIJsFP71uCMdF6jJ0XZakYDX6Hn4yZkLf+7V8FgD34yCcok+5Ww==
+  dependencies:
+    "@types/d3-array" "^1"
+    "@types/geojson" "*"
+
+"@types/d3-dispatch@^1":
+  version "1.0.9"
+  resolved "https://registry.npmjs.org/@types/d3-dispatch/-/d3-dispatch-1.0.9.tgz"
+  integrity sha512-zJ44YgjqALmyps+II7b1mZLhrtfV/FOxw9owT87mrweGWcg+WK5oiJX2M3SYJ0XUAExBduarysfgbR11YxzojQ==
+
+"@types/d3-drag@^1":
+  version "1.2.5"
+  resolved "https://registry.npmjs.org/@types/d3-drag/-/d3-drag-1.2.5.tgz"
+  integrity sha512-7NeTnfolst1Js3Vs7myctBkmJWu6DMI3k597AaHUX98saHjHWJ6vouT83UrpE+xfbSceHV+8A0JgxuwgqgmqWw==
+  dependencies:
+    "@types/d3-selection" "^1"
+
+"@types/d3-dsv@^1":
+  version "1.2.1"
+  resolved "https://registry.npmjs.org/@types/d3-dsv/-/d3-dsv-1.2.1.tgz"
+  integrity sha512-LLmJmjiqp/fTNEdij5bIwUJ6P6TVNk5hKM9/uk5RPO2YNgEu9XvKO0dJ7Iqd3psEdmZN1m7gB1bOsjr4HmO2BA==
+
+"@types/d3-ease@^1":
+  version "1.0.10"
+  resolved "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-1.0.10.tgz"
+  integrity sha512-fMFTCzd8DOwruE9zlu2O8ci5ct+U5jkGcDS+cH+HCidnJlDs0MZ+TuSVCFtEzh4E5MasItwy+HvgoFtxPHa5Cw==
+
+"@types/d3-fetch@^1":
+  version "1.2.2"
+  resolved "https://registry.npmjs.org/@types/d3-fetch/-/d3-fetch-1.2.2.tgz"
+  integrity sha512-rtFs92GugtV/NpiJQd0WsmGLcg52tIL0uF0bKbbJg231pR9JEb6HT4AUwrtuLq3lOeKdLBhsjV14qb0pMmd0Aw==
+  dependencies:
+    "@types/d3-dsv" "^1"
+
+"@types/d3-force@^1":
   version "1.2.4"
-  resolved "https://registry.yarnpkg.com/@types/d3-shape/-/d3-shape-1.2.4.tgz#e65585f2254d83ae42c47af2e730dd9b97952996"
+  resolved "https://registry.npmjs.org/@types/d3-force/-/d3-force-1.2.4.tgz"
+  integrity sha512-fkorLTKvt6AQbFBQwn4aq7h9rJ4c7ZVcPMGB8X6eFFveAyMZcv7t7m6wgF4Eg93rkPgPORU7sAho1QSHNcZu6w==
+
+"@types/d3-format@^1":
+  version "1.4.2"
+  resolved "https://registry.npmjs.org/@types/d3-format/-/d3-format-1.4.2.tgz"
+  integrity sha512-WeGCHAs7PHdZYq6lwl/+jsl+Nfc1J2W1kNcMeIMYzQsT6mtBDBgtJ/rcdjZ0k0rVIvqEZqhhuD5TK/v3P2gFHQ==
+
+"@types/d3-geo@^1":
+  version "1.12.3"
+  resolved "https://registry.npmjs.org/@types/d3-geo/-/d3-geo-1.12.3.tgz"
+  integrity sha512-yZbPb7/5DyL/pXkeOmZ7L5ySpuGr4H48t1cuALjnJy5sXQqmSSAYBiwa6Ya/XpWKX2rJqGDDubmh3nOaopOpeA==
   dependencies:
-    "@types/d3-path" "*"
+    "@types/geojson" "*"
 
-"@types/d3-time-format@*":
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/@types/d3-time-format/-/d3-time-format-2.1.0.tgz#011e0fb7937be34a9a8f580ae1e2f2f1336a8a22"
+"@types/d3-hierarchy@^1":
+  version "1.1.8"
+  resolved "https://registry.npmjs.org/@types/d3-hierarchy/-/d3-hierarchy-1.1.8.tgz"
+  integrity sha512-AbStKxNyWiMDQPGDguG2Kuhlq1Sv539pZSxYbx4UZeYkutpPwXCcgyiRrlV4YH64nIOsKx7XVnOMy9O7rJsXkg==
 
-"@types/d3-time@*":
+"@types/d3-interpolate@^1":
+  version "1.4.2"
+  resolved "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-1.4.2.tgz"
+  integrity sha512-ylycts6llFf8yAEs1tXzx2loxxzDZHseuhPokrqKprTQSTcD3JbJI1omZP1rphsELZO3Q+of3ff0ZS7+O6yVzg==
+  dependencies:
+    "@types/d3-color" "^1"
+
+"@types/d3-path@^1":
   version "1.0.9"
-  resolved "https://registry.yarnpkg.com/@types/d3-time/-/d3-time-1.0.9.tgz#c2cf05a3cd51f810b8d8a9bbca0c74030d4e535e"
+  resolved "https://registry.npmjs.org/@types/d3-path/-/d3-path-1.0.9.tgz"
+  integrity sha512-NaIeSIBiFgSC6IGUBjZWcscUJEq7vpVu7KthHN8eieTV9d9MqkSOZLH4chq1PmcKy06PNe3axLeKmRIyxJ+PZQ==
 
-"@types/d3-timer@*":
+"@types/d3-polygon@^1":
   version "1.0.8"
-  resolved "https://registry.yarnpkg.com/@types/d3-timer/-/d3-timer-1.0.8.tgz#a3441d9605367059e14ad8c3494132143cbc8d58"
+  resolved "https://registry.npmjs.org/@types/d3-polygon/-/d3-polygon-1.0.8.tgz"
+  integrity sha512-1TOJPXCBJC9V3+K3tGbTqD/CsqLyv/YkTXAcwdsZzxqw5cvpdnCuDl42M4Dvi8XzMxZNCT9pL4ibrK2n4VmAcw==
+
+"@types/d3-quadtree@^1":
+  version "1.0.9"
+  resolved "https://registry.npmjs.org/@types/d3-quadtree/-/d3-quadtree-1.0.9.tgz"
+  integrity sha512-5E0OJJn2QVavITFEc1AQlI8gLcIoDZcTKOD3feKFckQVmFV4CXhqRFt83tYNVNIN4ZzRkjlAMavJa1ldMhf5rA==
 
-"@types/d3-transition@*":
+"@types/d3-random@^1":
   version "1.1.3"
-  resolved "https://registry.yarnpkg.com/@types/d3-transition/-/d3-transition-1.1.3.tgz#efcf4941dae22135d595514ba488f4f370d396b0"
+  resolved "https://registry.npmjs.org/@types/d3-random/-/d3-random-1.1.3.tgz"
+  integrity sha512-XXR+ZbFCoOd4peXSMYJzwk0/elP37WWAzS/DG+90eilzVbUSsgKhBcWqylGWe+lA2ubgr7afWAOBaBxRgMUrBQ==
+
+"@types/d3-scale-chromatic@^1":
+  version "1.5.1"
+  resolved "https://registry.npmjs.org/@types/d3-scale-chromatic/-/d3-scale-chromatic-1.5.1.tgz"
+  integrity sha512-7FtJYrmXTEWLykShjYhoGuDNR/Bda0+tstZMkFj4RRxUEryv16AGh3be21tqg84B6KfEwiZyEpBcTyPyU+GWjg==
+
+"@types/d3-scale@^2":
+  version "2.2.6"
+  resolved "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-2.2.6.tgz"
+  integrity sha512-CHu34T5bGrJOeuhGxyiz9Xvaa9PlsIaQoOqjDg7zqeGj2x0rwPhGquiy03unigvcMxmvY0hEaAouT0LOFTLpIw==
+  dependencies:
+    "@types/d3-time" "^1"
+
+"@types/d3-scale@^3.2.0":
+  version "3.2.0"
+  resolved "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-3.2.0.tgz"
+  integrity sha512-AhnhueLSDQtS3ZpymlzKqT0siMToe/+mhIFf3UcH/hzlWnqPfPigb3vIFgpEL8k9KARx41t3qQGVFc9awYWpEg==
+  dependencies:
+    "@types/d3-time" "*"
+
+"@types/d3-selection@^1":
+  version "1.4.3"
+  resolved "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-1.4.3.tgz"
+  integrity sha512-GjKQWVZO6Sa96HiKO6R93VBE8DUW+DDkFpIMf9vpY5S78qZTlRRSNUsHr/afDpF7TvLDV7VxrUFOWW7vdIlYkA==
+
+"@types/d3-shape@^1":
+  version "1.3.8"
+  resolved "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-1.3.8.tgz"
+  integrity sha512-gqfnMz6Fd5H6GOLYixOZP/xlrMtJms9BaS+6oWxTKHNqPGZ93BkWWupQSCYm6YHqx6h9wjRupuJb90bun6ZaYg==
+  dependencies:
+    "@types/d3-path" "^1"
+
+"@types/d3-time-format@^2":
+  version "2.3.1"
+  resolved "https://registry.npmjs.org/@types/d3-time-format/-/d3-time-format-2.3.1.tgz"
+  integrity sha512-fck0Z9RGfIQn3GJIEKVrp15h9m6Vlg0d5XXeiE/6+CQiBmMDZxfR21XtjEPuDeg7gC3bBM0SdieA5XF3GW1wKA==
+
+"@types/d3-time@*":
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.0.tgz"
+  integrity sha512-sZLCdHvBUcNby1cB6Fd3ZBrABbjz3v1Vm90nysCQ6Vt7vd6e/h9Lt7SiJUoEX0l4Dzc7P5llKyhqSi1ycSf1Hg==
+
+"@types/d3-time@^1":
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/@types/d3-time/-/d3-time-1.1.1.tgz"
+  integrity sha512-ULX7LoqXTCYtM+tLYOaeAJK7IwCT+4Gxlm2MaH0ErKLi07R5lh8NHCAyWcDkCCmx1AfRcBEV6H9QE9R25uP7jw==
+
+"@types/d3-timer@^1":
+  version "1.0.10"
+  resolved "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-1.0.10.tgz"
+  integrity sha512-ZnAbquVqy+4ZjdW0cY6URp+qF/AzTVNda2jYyOzpR2cPT35FTXl78s15Bomph9+ckOiI1TtkljnWkwbIGAb6rg==
+
+"@types/d3-transition@^1":
+  version "1.3.2"
+  resolved "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-1.3.2.tgz"
+  integrity sha512-J+a3SuF/E7wXbOSN19p8ZieQSFIm5hU2Egqtndbc54LXaAEOpLfDx4sBu/PKAKzHOdgKK1wkMhINKqNh4aoZAg==
   dependencies:
-    "@types/d3-selection" "*"
+    "@types/d3-selection" "^1"
 
 "@types/d3-voronoi@*":
-  version "1.1.8"
-  resolved "https://registry.yarnpkg.com/@types/d3-voronoi/-/d3-voronoi-1.1.8.tgz#a039cb8368bce4efc1a70aebe744d210851cf1a7"
+  version "1.1.9"
+  resolved "https://registry.npmjs.org/@types/d3-voronoi/-/d3-voronoi-1.1.9.tgz"
+  integrity sha512-DExNQkaHd1F3dFPvGA/Aw2NGyjMln6E9QzsiqOcBgnE+VInYnFBHBBySbZQts6z6xD+5jTfKCP7M4OqMyVjdwQ==
 
-"@types/d3-zoom@*":
-  version "1.7.2"
-  resolved "https://registry.yarnpkg.com/@types/d3-zoom/-/d3-zoom-1.7.2.tgz#ee67f063199c179949d83b6b1e6166207de5f06e"
+"@types/d3-zoom@^1":
+  version "1.8.3"
+  resolved "https://registry.npmjs.org/@types/d3-zoom/-/d3-zoom-1.8.3.tgz"
+  integrity sha512-3kHkL6sPiDdbfGhzlp5gIHyu3kULhtnHTTAl3UBZVtWB1PzcLL8vdmz5mTx7plLiUqOA2Y+yT2GKjt/TdA2p7Q==
   dependencies:
-    "@types/d3-interpolate" "*"
-    "@types/d3-selection" "*"
+    "@types/d3-interpolate" "^1"
+    "@types/d3-selection" "^1"
 
 "@types/d3@5.x":
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/@types/d3/-/d3-5.0.1.tgz#37fe11947b511b0adbfcb2ac9dd15914f0420c7d"
-  dependencies:
-    "@types/d3-array" "*"
-    "@types/d3-axis" "*"
-    "@types/d3-brush" "*"
-    "@types/d3-chord" "*"
+  version "5.16.4"
+  resolved "https://registry.npmjs.org/@types/d3/-/d3-5.16.4.tgz"
+  integrity sha512-2u0O9iP1MubFiQ+AhR1id4Egs+07BLtvRATG6IL2Gs9+KzdrfaxCKNq5hxEyw1kxwsqB/lCgr108XuHcKtb/5w==
+  dependencies:
+    "@types/d3-array" "^1"
+    "@types/d3-axis" "^1"
+    "@types/d3-brush" "^1"
+    "@types/d3-chord" "^1"
     "@types/d3-collection" "*"
-    "@types/d3-color" "*"
-    "@types/d3-contour" "*"
-    "@types/d3-dispatch" "*"
-    "@types/d3-drag" "*"
-    "@types/d3-dsv" "*"
-    "@types/d3-ease" "*"
-    "@types/d3-fetch" "*"
-    "@types/d3-force" "*"
-    "@types/d3-format" "*"
-    "@types/d3-geo" "*"
-    "@types/d3-hierarchy" "*"
-    "@types/d3-interpolate" "*"
-    "@types/d3-path" "*"
-    "@types/d3-polygon" "*"
-    "@types/d3-quadtree" "*"
-    "@types/d3-random" "*"
-    "@types/d3-scale" "*"
-    "@types/d3-scale-chromatic" "*"
-    "@types/d3-selection" "*"
-    "@types/d3-shape" "*"
-    "@types/d3-time" "*"
-    "@types/d3-time-format" "*"
-    "@types/d3-timer" "*"
-    "@types/d3-transition" "*"
+    "@types/d3-color" "^1"
+    "@types/d3-contour" "^1"
+    "@types/d3-dispatch" "^1"
+    "@types/d3-drag" "^1"
+    "@types/d3-dsv" "^1"
+    "@types/d3-ease" "^1"
+    "@types/d3-fetch" "^1"
+    "@types/d3-force" "^1"
+    "@types/d3-format" "^1"
+    "@types/d3-geo" "^1"
+    "@types/d3-hierarchy" "^1"
+    "@types/d3-interpolate" "^1"
+    "@types/d3-path" "^1"
+    "@types/d3-polygon" "^1"
+    "@types/d3-quadtree" "^1"
+    "@types/d3-random" "^1"
+    "@types/d3-scale" "^2"
+    "@types/d3-scale-chromatic" "^1"
+    "@types/d3-selection" "^1"
+    "@types/d3-shape" "^1"
+    "@types/d3-time" "^1"
+    "@types/d3-time-format" "^2"
+    "@types/d3-timer" "^1"
+    "@types/d3-transition" "^1"
     "@types/d3-voronoi" "*"
-    "@types/d3-zoom" "*"
+    "@types/d3-zoom" "^1"
+
+"@types/debug@^4.1.7":
+  version "4.1.7"
+  resolved "https://registry.npmjs.org/@types/debug/-/debug-4.1.7.tgz"
+  integrity sha512-9AonUzyTjXXhEOa0DnqpzZi6VHlqKMswga9EXjpXnnqxwLtdvPPtlO8evrI5D9S6asFRCQ6v+wpiUKbw+vKqyg==
+  dependencies:
+    "@types/ms" "*"
+
+"@types/events@*", "@types/events@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/@types/events/-/events-3.0.0.tgz"
+  integrity sha512-EaObqwIvayI5a8dCzhFrjKzVwKLxjoG9T6Ppd5CEo07LRKfQ8Yokw54r5+Wq7FaBQ+yXRvQAYPrHwya1/UFt9g==
+
+"@types/geojson-vt@3.2.5":
+  version "3.2.5"
+  resolved "https://registry.yarnpkg.com/@types/geojson-vt/-/geojson-vt-3.2.5.tgz#b6c356874991d9ab4207533476dfbcdb21e38408"
+  integrity sha512-qDO7wqtprzlpe8FfQ//ClPV9xiuoh2nkIgiouIptON9w5jvD/fA4szvP9GBlDVdJ5dldAl0kX/sy3URbWwLx0g==
+  dependencies:
+    "@types/geojson" "*"
 
 "@types/geojson@*":
-  version "7946.0.4"
-  resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.4.tgz#4e049756383c3f055dd8f3d24e63fb543e98eb07"
+  version "7946.0.8"
+  resolved "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.8.tgz"
+  integrity sha512-1rkryxURpr6aWP7R786/UQOkJ3PcpQiWkAXBmdWc7ryFWqN6a4xfK7BtjXvFBKO9LjQ+MWQSWxYeZX1OApnArA==
+
+"@types/geojson@^7946.0.16":
+  version "7946.0.16"
+  resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.16.tgz#8ebe53d69efada7044454e3305c19017d97ced2a"
+  integrity sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==
+
+"@types/glob@^7.1.1":
+  version "7.1.1"
+  resolved "https://registry.npmjs.org/@types/glob/-/glob-7.1.1.tgz"
+  integrity sha512-1Bh06cbWJUHMC97acuD6UMG29nMt0Aqz1vF3guLfG+kHHJhy3AyohZFFxYk2f7Q1SQIrNwvncxAE0N/9s70F2w==
+  dependencies:
+    "@types/events" "*"
+    "@types/minimatch" "*"
+    "@types/node" "*"
+
+"@types/graceful-fs@^4.1.2":
+  version "4.1.3"
+  resolved "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.3.tgz"
+  integrity sha512-AiHRaEB50LQg0pZmm659vNBb9f4SJ0qrAnteuzhSeAUcJKxoYgEnprg/83kppCnc2zvtCKbdZry1a5pVY3lOTQ==
+  dependencies:
+    "@types/node" "*"
+
+"@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0", "@types/istanbul-lib-coverage@^2.0.1":
+  version "2.0.3"
+  resolved "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz"
+  integrity sha512-sz7iLqvVUg1gIedBOvlkxPlc8/uVzyS5OwGz1cKjXzkl3FpL3al0crU8YGU1WoHkxn0Wxbw5tyi6hvzJKNzFsw==
+
+"@types/istanbul-lib-report@*":
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz"
+  integrity sha512-plGgXAPfVKFoYfa9NpYDAkseG+g6Jr294RqeqcqDixSbU34MZVJRi/P+7Y8GDpzkEwLaGZZOpKIEmeVZNtKsrg==
+  dependencies:
+    "@types/istanbul-lib-coverage" "*"
+
+"@types/istanbul-reports@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.0.tgz"
+  integrity sha512-nwKNbvnwJ2/mndE9ItP/zc2TCzw6uuodnF4EHYWD+gCQDVBuRQL5UzbZD0/ezy1iKsFU2ZQiDqg4M9dN4+wZgA==
+  dependencies:
+    "@types/istanbul-lib-report" "*"
+
+"@types/jest@^26.0.22":
+  version "26.0.22"
+  resolved "https://registry.npmjs.org/@types/jest/-/jest-26.0.22.tgz"
+  integrity sha512-eeWwWjlqxvBxc4oQdkueW5OF/gtfSceKk4OnOAGlUSwS/liBRtZppbJuz1YkgbrbfGOoeBHun9fOvXnjNwrSOw==
+  dependencies:
+    jest-diff "^26.0.0"
+    pretty-format "^26.0.0"
 
 "@types/jquery@*":
-  version "3.3.21"
-  resolved "https://registry.yarnpkg.com/@types/jquery/-/jquery-3.3.21.tgz#850a8411ccf86f86f0d418eee002697bf8da3c9a"
+  version "3.5.5"
+  resolved "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.5.tgz"
+  integrity sha512-6RXU9Xzpc6vxNrS6FPPapN1SxSHgQ336WC6Jj/N8q30OiaBZ00l1GBgeP7usjVZPivSkGUfL1z/WW6TX989M+w==
   dependencies:
     "@types/sizzle" "*"
 
-"@types/jquery@3.3.2":
-  version "3.3.2"
-  resolved "https://registry.yarnpkg.com/@types/jquery/-/jquery-3.3.2.tgz#8700226bdde24b6f98e3a60126dbaab3b2a3ab41"
+"@types/jquery@^3.3.38":
+  version "3.3.38"
+  resolved "https://registry.npmjs.org/@types/jquery/-/jquery-3.3.38.tgz"
+  integrity sha512-nkDvmx7x/6kDM5guu/YpXkGZ/Xj/IwGiLDdKM99YA5Vag7pjGyTJ8BNUh/6hxEn/sEu5DKtyRgnONJ7EmOoKrA==
+  dependencies:
+    "@types/sizzle" "*"
 
 "@types/jqueryui@1.x":
-  version "1.12.6"
-  resolved "https://registry.yarnpkg.com/@types/jqueryui/-/jqueryui-1.12.6.tgz#71bb4154c11d3d7048264b935965adfc5a6c5a50"
+  version "1.12.10"
+  resolved "https://registry.npmjs.org/@types/jqueryui/-/jqueryui-1.12.10.tgz"
+  integrity sha512-T8sctslWIiLl/2EHEQQfKCB92S9bMKBaeE3+iBRbSERMK/1gzyfqjaIEksduB4eUEsKq+Ji0Y+qVbiXQwI2Mwg==
   dependencies:
     "@types/jquery" "*"
 
+"@types/jsdom@^16.2.4":
+  version "16.2.5"
+  resolved "https://registry.npmjs.org/@types/jsdom/-/jsdom-16.2.5.tgz"
+  integrity sha512-k/ZaTXtReAjwWu0clU0KLS53dyqZnA8mm+jwKFeFrvufXgICp+VNbskETFxKKAguv0pkaEKTax5MaRmvalM+TA==
+  dependencies:
+    "@types/node" "*"
+    "@types/parse5" "*"
+    "@types/tough-cookie" "*"
+
 "@types/json-stable-stringify@^1.0.32":
   version "1.0.32"
-  resolved "https://registry.yarnpkg.com/@types/json-stable-stringify/-/json-stable-stringify-1.0.32.tgz#121f6917c4389db3923640b2e68de5fa64dda88e"
+  resolved "https://registry.npmjs.org/@types/json-stable-stringify/-/json-stable-stringify-1.0.32.tgz"
+  integrity sha512-q9Q6+eUEGwQkv4Sbst3J4PNgDOvpuVuKj79Hl/qnmBMEIPzB5QoFRUtjcgcg2xNUZyYUGXBk5wYIBKHt0A+Mxw==
+
+"@types/leaflet-draw@^1.0.0":
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/@types/leaflet-draw/-/leaflet-draw-1.0.2.tgz"
+  integrity sha512-rHlpibY3yXJ1g/ArFMR++y3HvTh5s58KwpsNKSxQT49e64ODzLPesTLhkbFF8Fhs3CbHm0qfeEIcw0oFRMP43w==
+  dependencies:
+    "@types/leaflet" "*"
 
 "@types/leaflet.heat@^0.2.0":
   version "0.2.0"
-  resolved "https://registry.yarnpkg.com/@types/leaflet.heat/-/leaflet.heat-0.2.0.tgz#f1b964fc0c360a94c4f1d1536a95df7468a458c5"
+  resolved "https://registry.npmjs.org/@types/leaflet.heat/-/leaflet.heat-0.2.0.tgz"
+  integrity sha512-j/vfitsOOR7AU63/mlshqr88a6uZUObkvc55b3XkR2p7q0FFr021NMNineVhn1uT8BYfEETFraQCo/IZZpV3QQ==
   dependencies:
     "@types/leaflet" "*"
 
-"@types/leaflet@*", "@types/leaflet@^1.2.5":
-  version "1.2.11"
-  resolved "https://registry.yarnpkg.com/@types/leaflet/-/leaflet-1.2.11.tgz#a80f6d49a200698a24351e93dae654308cacf239"
+"@types/leaflet@*", "@types/leaflet@^1.4.6":
+  version "1.5.8"
+  resolved "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.5.8.tgz"
+  integrity sha512-qpi5n4LmwenUFZ+VZ7ytRgHK+ZAclIvloL2zoKCmmj244WD2hBcLbUZ6Szvajfe3sIkSYEJ8WZ1p9VYl8tRsMA==
   dependencies:
     "@types/geojson" "*"
 
-"@types/loglevel@^1.5.3":
-  version "1.5.3"
-  resolved "https://registry.yarnpkg.com/@types/loglevel/-/loglevel-1.5.3.tgz#adfce55383edc5998a2170ad581b3e23d6adb5b8"
+"@types/loglevel@^1.6.3":
+  version "1.6.3"
+  resolved "https://registry.npmjs.org/@types/loglevel/-/loglevel-1.6.3.tgz"
+  integrity sha512-v2YWQQgqtNXAzybOT9qV3CIJqSeoaMUwmBfIMTQdvhsWUybYic/zNGccKH494naWKJ7zUm+VTgFepJfTrbCCJQ==
+  dependencies:
+    loglevel "*"
+
+"@types/luxon@^1.25.0":
+  version "1.25.0"
+  resolved "https://registry.npmjs.org/@types/luxon/-/luxon-1.25.0.tgz"
+  integrity sha512-iIJp2CP6C32gVqI08HIYnzqj55tlLnodIBMCcMf28q9ckqMfMzocCmIzd9JWI/ALLPMUiTkCu1JGv3FFtu6t3g==
+
+"@types/mapbox__point-geometry@*", "@types/mapbox__point-geometry@^0.1.4":
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/@types/mapbox__point-geometry/-/mapbox__point-geometry-0.1.4.tgz#0ef017b75eedce02ff6243b4189210e2e6d5e56d"
+  integrity sha512-mUWlSxAmYLfwnRBmgYV86tgYmMIICX4kza8YnE/eIlywGe2XoOxlpVnXWwir92xRLjwyarqwpu2EJKD2pk0IUA==
+
+"@types/mapbox__vector-tile@^1.3.4":
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/@types/mapbox__vector-tile/-/mapbox__vector-tile-1.3.4.tgz#ad757441ef1d34628d9e098afd9c91423c1f8734"
+  integrity sha512-bpd8dRn9pr6xKvuEBQup8pwQfD4VUyqO/2deGjfpe6AwC8YRlyEipvefyRJUSiCJTZuCb8Pl1ciVV5ekqJ96Bg==
+  dependencies:
+    "@types/geojson" "*"
+    "@types/mapbox__point-geometry" "*"
+    "@types/pbf" "*"
 
 "@types/md5@^2.1.32":
   version "2.1.33"
-  resolved "https://registry.yarnpkg.com/@types/md5/-/md5-2.1.33.tgz#8c8dba30df4ad0e92296424f08c4898dd808e8df"
+  resolved "https://registry.npmjs.org/@types/md5/-/md5-2.1.33.tgz"
+  integrity sha512-8+X960EtKLoSblhauxLKy3zzotagjoj3Jt1Tx9oaxUdZEPIBl+mkrUz6PNKpzJgkrKSN9YgkWTA29c0KnLshmA==
   dependencies:
     "@types/node" "*"
 
+"@types/minimatch@*":
+  version "3.0.3"
+  resolved "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz"
+  integrity sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA==
+
 "@types/moment-timezone@^0.5.4":
-  version "0.5.9"
-  resolved "https://registry.yarnpkg.com/@types/moment-timezone/-/moment-timezone-0.5.9.tgz#1a34ef6ba2e4578b9ca399ed5eec57525ad1d4a7"
+  version "0.5.12"
+  resolved "https://registry.npmjs.org/@types/moment-timezone/-/moment-timezone-0.5.12.tgz"
+  integrity sha512-hnHH2+Efg2vExr/dSz+IX860nSiyk9Sk4pJF2EmS11lRpMcNXeB4KBW5xcgw2QPsb9amTXdsVNEe5IoJXiT0uw==
   dependencies:
     moment ">=2.14.0"
 
+"@types/ms@*":
+  version "0.7.31"
+  resolved "https://registry.npmjs.org/@types/ms/-/ms-0.7.31.tgz"
+  integrity sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA==
+
 "@types/mustache@^0.8.30":
-  version "0.8.31"
-  resolved "https://registry.yarnpkg.com/@types/mustache/-/mustache-0.8.31.tgz#7c86cbf74f7733f9e3bdc28817623927eb386616"
+  version "0.8.32"
+  resolved "https://registry.npmjs.org/@types/mustache/-/mustache-0.8.32.tgz"
+  integrity sha512-RTVWV485OOf4+nO2+feurk0chzHkSjkjALiejpHltyuMf/13fGymbbNNFrSKdSSUg1TIwzszXdWsVirxgqYiFA==
 
 "@types/node@*":
-  version "10.12.0"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-10.12.0.tgz#ea6dcbddbc5b584c83f06c60e82736d8fbb0c235"
+  version "13.7.4"
+  resolved "https://registry.npmjs.org/@types/node/-/node-13.7.4.tgz"
+  integrity sha512-oVeL12C6gQS/GAExndigSaLxTrKpQPxewx9bOcwfvJiJge4rr7wNaph4J+ns5hrmIV2as5qxqN8YKthn9qh0jw==
+
+"@types/node@^12.6.6":
+  version "12.12.28"
+  resolved "https://registry.npmjs.org/@types/node/-/node-12.12.28.tgz"
+  integrity sha512-g73GJYJDXgf0jqg+P9S8h2acWbDXNkoCX8DLtJVu7Fkn788pzQ/oJsrdJz/2JejRf/SjfZaAhsw+3nd1D5EWGg==
+
+"@types/normalize-package-data@^2.4.0":
+  version "2.4.0"
+  resolved "https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.0.tgz"
+  integrity sha512-f5j5b/Gf71L+dbqxIpQ4Z2WlmI/mPJ0fOkGGmFgtb6sAu97EPczzbS3/tJKxmcYDj55OX6ssqwDAWOHIYDRDGA==
 
 "@types/nouislider@^9.0.4":
-  version "9.0.4"
-  resolved "https://registry.yarnpkg.com/@types/nouislider/-/nouislider-9.0.4.tgz#5a79a22c5cd25a012b782829c331b46c8bec8947"
+  version "9.0.6"
+  resolved "https://registry.npmjs.org/@types/nouislider/-/nouislider-9.0.6.tgz"
+  integrity sha512-ASkRBlWX5qiAucW08jS2/ZGKJQWqx/JWJ52fU7LCLRRtfOaOCqYsZmBYJdIG3j+MRX2ZSaB0nglFujPGckLn4Q==
   dependencies:
     "@types/wnumb" "*"
 
-"@types/pako@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@types/pako/-/pako-1.0.0.tgz#eaae8364d1b7f752e263bc3fd68dfec98e6136c5"
+"@types/parse5@*":
+  version "5.0.3"
+  resolved "https://registry.npmjs.org/@types/parse5/-/parse5-5.0.3.tgz"
+  integrity sha512-kUNnecmtkunAoQ3CnjmMkzNU/gtxG8guhi+Fk2U/kOpIKjIMKnXGp4IJCgQJrXSgMsWYimYG4TGjz/UzbGEBTw==
 
-"@types/quill@^1.3.6":
-  version "1.3.10"
-  resolved "https://registry.yarnpkg.com/@types/quill/-/quill-1.3.10.tgz#dc1f7b6587f7ee94bdf5291bc92289f6f0497613"
+"@types/pbf@*", "@types/pbf@^3.0.5":
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/@types/pbf/-/pbf-3.0.5.tgz#a9495a58d8c75be4ffe9a0bd749a307715c07404"
+  integrity sha512-j3pOPiEcWZ34R6a6mN07mUkM4o4Lwf6hPNt8eilOeZhTFbxFXmKhvXl9Y28jotFPaI1bpPDJsbCprUoNke6OrA==
+
+"@types/prettier@^2.0.0":
+  version "2.1.2"
+  resolved "https://registry.npmjs.org/@types/prettier/-/prettier-2.1.2.tgz"
+  integrity sha512-IiPhNnenzkqdSdQH3ifk9LoX7oQe61ZlDdDO4+MUv6FyWdPGDPr26gCPVs3oguZEMq//nFZZpwUZcVuNJsG+DQ==
+
+"@types/prop-types@*":
+  version "15.7.3"
+  resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz"
+  integrity sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==
+
+"@types/q@^1.5.1":
+  version "1.5.2"
+  resolved "https://registry.npmjs.org/@types/q/-/q-1.5.2.tgz"
+  integrity sha512-ce5d3q03Ex0sy4R14722Rmt6MT07Ua+k4FwDfdcToYJcMKNtRVQvJ6JCAPdAmAnbRb6CsX6aYb9m96NGod9uTw==
+
+"@types/react-dom@^17.0.0":
+  version "17.0.0"
+  resolved "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.0.tgz"
+  integrity sha512-lUqY7OlkF/RbNtD5nIq7ot8NquXrdFrjSOR6+w9a9RFQevGi1oZO1dcJbXMeONAPKtZ2UrZOEJ5UOCVsxbLk/g==
   dependencies:
-    parchment "^1.1.2"
+    "@types/react" "*"
+
+"@types/react@*", "@types/react@^17.0.0":
+  version "17.0.0"
+  resolved "https://registry.npmjs.org/@types/react/-/react-17.0.0.tgz"
+  integrity sha512-aj/L7RIMsRlWML3YB6KZiXB3fV2t41+5RBGYF8z+tAKU43Px8C3cYUZsDvf1/+Bm4FK21QWBrDutu8ZJ/70qOw==
+  dependencies:
+    "@types/prop-types" "*"
+    csstype "^3.0.2"
 
 "@types/sizzle@*":
-  version "2.3.2"
-  resolved "https://registry.yarnpkg.com/@types/sizzle/-/sizzle-2.3.2.tgz#a811b8c18e2babab7d542b3365887ae2e4d9de47"
+  version "2.3.3"
+  resolved "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.3.tgz"
+  integrity sha512-JYM8x9EGF163bEyhdJBpR2QX1R5naCJHC8ucJylJ3w9/CVBaskdQ8WqBf8MmQrd1kRvp/a4TS8HJ+bxzR7ZJYQ==
 
 "@types/slick-carousel@^1.6.32":
-  version "1.6.32"
-  resolved "https://registry.yarnpkg.com/@types/slick-carousel/-/slick-carousel-1.6.32.tgz#b0a6379e969fc3085fb0e487cd1f73bee6c2f48c"
-  dependencies:
-    "@types/jquery" "*"
-
-"@types/slickgrid@2.x":
-  version "2.1.26"
-  resolved "https://registry.yarnpkg.com/@types/slickgrid/-/slickgrid-2.1.26.tgz#79e00f7d4cf21f9e6d157940a599ee6523ec4e15"
+  version "1.6.34"
+  resolved "https://registry.npmjs.org/@types/slick-carousel/-/slick-carousel-1.6.34.tgz"
+  integrity sha512-LdsK0BLNYqe3uBuWCBwzGQVy+8g8LDe3u1XGlaOelrDD07cjJGVVoKBSyKieK4dmfqilmP+DJp7lNRaTI7rRAg==
   dependencies:
     "@types/jquery" "*"
 
-"@types/tinymce@^4.5.16":
-  version "4.5.16"
-  resolved "http://registry.npmjs.org/@types/tinymce/-/tinymce-4.5.16.tgz#d6184583296d9bef5c0fe1c00457e45950009094"
+"@types/slickgrid@^2.1.32":
+  version "2.1.32"
+  resolved "https://registry.yarnpkg.com/@types/slickgrid/-/slickgrid-2.1.32.tgz#94a64f6e76b2f9542d43c1ae033640e9e3289708"
+  integrity sha512-TeILZVW3Gc+LX9s5BbRxfK3GVOaX+jCRMYAJv9puFY+FLbCqmMGB/AbrHvlLU4k/JwaEWtzbVCNO5H/v1inA+g==
   dependencies:
     "@types/jquery" "*"
 
-"@types/wnumb@*", "@types/wnumb@^1.0.28":
-  version "1.0.28"
-  resolved "https://registry.yarnpkg.com/@types/wnumb/-/wnumb-1.0.28.tgz#b50a1d059698681318ffd3b50ae75c73a534c553"
+"@types/source-list-map@*":
+  version "0.1.2"
+  resolved "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz"
+  integrity sha512-K5K+yml8LTo9bWJI/rECfIPrGgxdpeNbj+d53lwN4QjW1MCwlkhUms+gtdzigTeUyBr09+u8BwOIY3MXvHdcsA==
 
-"@types/youtube@^0.0.32":
-  version "0.0.32"
-  resolved "https://registry.yarnpkg.com/@types/youtube/-/youtube-0.0.32.tgz#b53ebc75e6646d7dc46295b8eceb5f1e596f68ae"
+"@types/stack-utils@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.0.tgz"
+  integrity sha512-RJJrrySY7A8havqpGObOB4W92QXKJo63/jFLLgpvOtsGUqbQZ9Sbgl35KMm1DjC6j7AvmmU2bIno+3IyEaemaw==
 
-"@webassemblyjs/ast@1.7.8":
-  version "1.7.8"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.7.8.tgz#f31f480debeef957f01b623f27eabc695fa4fe8f"
+"@types/supercluster@^7.1.3":
+  version "7.1.3"
+  resolved "https://registry.yarnpkg.com/@types/supercluster/-/supercluster-7.1.3.tgz#1a1bc2401b09174d9c9e44124931ec7874a72b27"
+  integrity sha512-Z0pOY34GDFl3Q6hUFYf3HkTwKEE02e7QgtJppBt+beEAxnyOpJua+voGFvxINBHa06GwLFFym7gRPY2SiKIfIA==
   dependencies:
-    "@webassemblyjs/helper-module-context" "1.7.8"
-    "@webassemblyjs/helper-wasm-bytecode" "1.7.8"
-    "@webassemblyjs/wast-parser" "1.7.8"
-
-"@webassemblyjs/floating-point-hex-parser@1.7.8":
-  version "1.7.8"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.7.8.tgz#1b3ed0e27e384032254e9322fc646dd3e70ef1b9"
+    "@types/geojson" "*"
 
-"@webassemblyjs/helper-api-error@1.7.8":
-  version "1.7.8"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-api-error/-/helper-api-error-1.7.8.tgz#a2b49c11f615e736f815ec927f035dcfa690d572"
+"@types/tapable@*":
+  version "1.0.5"
+  resolved "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.5.tgz"
+  integrity sha512-/gG2M/Imw7cQFp8PGvz/SwocNrmKFjFsm5Pb8HdbHkZ1K8pmuPzOX4VeVoiEecFCVf4CsN1r3/BRvx+6sNqwtQ==
 
-"@webassemblyjs/helper-buffer@1.7.8":
-  version "1.7.8"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-buffer/-/helper-buffer-1.7.8.tgz#3fc66bfa09c1c60e824cf3d5887826fac062877d"
+"@types/tough-cookie@*":
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-4.0.0.tgz"
+  integrity sha512-I99sngh224D0M7XgW1s120zxCt3VYQ3IQsuw3P3jbq5GG4yc79+ZjyKznyOGIQrflfylLgcfekeZW/vk0yng6A==
 
-"@webassemblyjs/helper-code-frame@1.7.8":
-  version "1.7.8"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-code-frame/-/helper-code-frame-1.7.8.tgz#cc5a7e9522b70e7580df056dfd34020cf29645b0"
+"@types/uglify-js@*":
+  version "3.0.4"
+  resolved "https://registry.npmjs.org/@types/uglify-js/-/uglify-js-3.0.4.tgz"
+  integrity sha512-SudIN9TRJ+v8g5pTG8RRCqfqTMNqgWCKKd3vtynhGzkIIjxaicNAMuY5TRadJ6tzDu3Dotf3ngaMILtmOdmWEQ==
   dependencies:
-    "@webassemblyjs/wast-printer" "1.7.8"
-
-"@webassemblyjs/helper-fsm@1.7.8":
-  version "1.7.8"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-fsm/-/helper-fsm-1.7.8.tgz#fe4607430af466912797c21acafd3046080182ea"
-
-"@webassemblyjs/helper-module-context@1.7.8":
-  version "1.7.8"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-module-context/-/helper-module-context-1.7.8.tgz#3c2e7ee93d14ff4768ba66fb1be42fdc9dc7160a"
+    source-map "^0.6.1"
 
-"@webassemblyjs/helper-wasm-bytecode@1.7.8":
-  version "1.7.8"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.7.8.tgz#89bdb78cd6dd5209ae2ed2925de78d0f0e00b6f0"
+"@types/webpack-sources@*":
+  version "0.1.6"
+  resolved "https://registry.npmjs.org/@types/webpack-sources/-/webpack-sources-0.1.6.tgz"
+  integrity sha512-FtAWR7wR5ocJ9+nP137DV81tveD/ZgB1sadnJ/axUGM3BUVfRPx8oQNMtv3JNfTeHx3VP7cXiyfR/jmtEsVHsQ==
+  dependencies:
+    "@types/node" "*"
+    "@types/source-list-map" "*"
+    source-map "^0.6.1"
 
-"@webassemblyjs/helper-wasm-section@1.7.8":
-  version "1.7.8"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.7.8.tgz#c68ef7d26a6fc12421b2e6e56f9bc810dfb33e87"
+"@types/webpack@^4.4.31":
+  version "4.41.6"
+  resolved "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.6.tgz"
+  integrity sha512-iWRpV5Ej+8uKrgxp6jXz3v7ZTjgtuMXY+rsxQjFNU0hYCnHkpA7vtiNffgxjuxX4feFHBbz0IF76OzX2OqDYPw==
   dependencies:
-    "@webassemblyjs/ast" "1.7.8"
-    "@webassemblyjs/helper-buffer" "1.7.8"
-    "@webassemblyjs/helper-wasm-bytecode" "1.7.8"
-    "@webassemblyjs/wasm-gen" "1.7.8"
+    "@types/anymatch" "*"
+    "@types/node" "*"
+    "@types/tapable" "*"
+    "@types/uglify-js" "*"
+    "@types/webpack-sources" "*"
+    source-map "^0.6.0"
 
-"@webassemblyjs/ieee754@1.7.8":
-  version "1.7.8"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/ieee754/-/ieee754-1.7.8.tgz#1f37974b13cb486a9237e73ce04cac7a2f1265ed"
+"@types/wnumb@*", "@types/wnumb@^1.0.28":
+  version "1.2.0"
+  resolved "https://registry.npmjs.org/@types/wnumb/-/wnumb-1.2.0.tgz"
+  integrity sha512-74+3MQqSTrDUtYisxrE8xbrTxmc3pi3G+yr1/TKNrMD7nfXIgUSgYeOu5R7g6Nsn/hl1GxKZ5VW2BuOQg9aLYg==
+
+"@types/yargs-parser@*":
+  version "15.0.0"
+  resolved "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-15.0.0.tgz"
+  integrity sha512-FA/BWv8t8ZWJ+gEOnLLd8ygxH/2UFbAvgEonyfN6yWGLKc7zVjbpl2Y4CTjid9h2RfgPP6SEt6uHwEOply00yw==
+
+"@types/yargs@^15.0.0":
+  version "15.0.8"
+  resolved "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.8.tgz"
+  integrity sha512-b0BYzFUzBpOhPjpl1wtAHU994jBeKF4TKVlT7ssFv44T617XNcPdRoG4AzHLVshLzlrF7i3lTelH7UbuNYV58Q==
+  dependencies:
+    "@types/yargs-parser" "*"
+
+"@types/youtube@^0.0.38":
+  version "0.0.38"
+  resolved "https://registry.npmjs.org/@types/youtube/-/youtube-0.0.38.tgz"
+  integrity sha512-rS0nLlnnZIvOfBNT4957rkKRMHjHxutoVhSEzowocYgNiTMVBmN+Hbkf/L3TeGMMtts9uKZ9gw7O2JLHREVnIw==
+
+"@webassemblyjs/ast@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.9.0.tgz#bd850604b4042459a5a41cd7d338cbed695ed964"
+  integrity sha512-C6wW5L+b7ogSDVqymbkkvuW9kruN//YisMED04xzeBBqjHa2FYnmvOlS6Xj68xWQRgWvI9cIglsjFowH/RJyEA==
+  dependencies:
+    "@webassemblyjs/helper-module-context" "1.9.0"
+    "@webassemblyjs/helper-wasm-bytecode" "1.9.0"
+    "@webassemblyjs/wast-parser" "1.9.0"
+
+"@webassemblyjs/floating-point-hex-parser@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.9.0.tgz#3c3d3b271bddfc84deb00f71344438311d52ffb4"
+  integrity sha512-TG5qcFsS8QB4g4MhrxK5TqfdNe7Ey/7YL/xN+36rRjl/BlGE/NcBvJcqsRgCP6Z92mRE+7N50pRIi8SmKUbcQA==
+
+"@webassemblyjs/helper-api-error@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-api-error/-/helper-api-error-1.9.0.tgz#203f676e333b96c9da2eeab3ccef33c45928b6a2"
+  integrity sha512-NcMLjoFMXpsASZFxJ5h2HZRcEhDkvnNFOAKneP5RbKRzaWJN36NC4jqQHKwStIhGXu5mUWlUUk7ygdtrO8lbmw==
+
+"@webassemblyjs/helper-buffer@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-buffer/-/helper-buffer-1.9.0.tgz#a1442d269c5feb23fcbc9ef759dac3547f29de00"
+  integrity sha512-qZol43oqhq6yBPx7YM3m9Bv7WMV9Eevj6kMi6InKOuZxhw+q9hOkvq5e/PpKSiLfyetpaBnogSbNCfBwyB00CA==
+
+"@webassemblyjs/helper-code-frame@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-code-frame/-/helper-code-frame-1.9.0.tgz#647f8892cd2043a82ac0c8c5e75c36f1d9159f27"
+  integrity sha512-ERCYdJBkD9Vu4vtjUYe8LZruWuNIToYq/ME22igL+2vj2dQ2OOujIZr3MEFvfEaqKoVqpsFKAGsRdBSBjrIvZA==
+  dependencies:
+    "@webassemblyjs/wast-printer" "1.9.0"
+
+"@webassemblyjs/helper-fsm@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-fsm/-/helper-fsm-1.9.0.tgz#c05256b71244214671f4b08ec108ad63b70eddb8"
+  integrity sha512-OPRowhGbshCb5PxJ8LocpdX9Kl0uB4XsAjl6jH/dWKlk/mzsANvhwbiULsaiqT5GZGT9qinTICdj6PLuM5gslw==
+
+"@webassemblyjs/helper-module-context@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-module-context/-/helper-module-context-1.9.0.tgz#25d8884b76839871a08a6c6f806c3979ef712f07"
+  integrity sha512-MJCW8iGC08tMk2enck1aPW+BE5Cw8/7ph/VGZxwyvGbJwjktKkDK7vy7gAmMDx88D7mhDTCNKAW5tED+gZ0W8g==
+  dependencies:
+    "@webassemblyjs/ast" "1.9.0"
+
+"@webassemblyjs/helper-wasm-bytecode@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.9.0.tgz#4fed8beac9b8c14f8c58b70d124d549dd1fe5790"
+  integrity sha512-R7FStIzyNcd7xKxCZH5lE0Bqy+hGTwS3LJjuv1ZVxd9O7eHCedSdrId/hMOd20I+v8wDXEn+bjfKDLzTepoaUw==
+
+"@webassemblyjs/helper-wasm-section@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.9.0.tgz#5a4138d5a6292ba18b04c5ae49717e4167965346"
+  integrity sha512-XnMB8l3ek4tvrKUUku+IVaXNHz2YsJyOOmz+MMkZvh8h1uSJpSen6vYnw3IoQ7WwEuAhL8Efjms1ZWjqh2agvw==
+  dependencies:
+    "@webassemblyjs/ast" "1.9.0"
+    "@webassemblyjs/helper-buffer" "1.9.0"
+    "@webassemblyjs/helper-wasm-bytecode" "1.9.0"
+    "@webassemblyjs/wasm-gen" "1.9.0"
+
+"@webassemblyjs/ieee754@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/ieee754/-/ieee754-1.9.0.tgz#15c7a0fbaae83fb26143bbacf6d6df1702ad39e4"
+  integrity sha512-dcX8JuYU/gvymzIHc9DgxTzUUTLexWwt8uCTWP3otys596io0L5aW02Gb1RjYpx2+0Jus1h4ZFqjla7umFniTg==
   dependencies:
     "@xtuc/ieee754" "^1.2.0"
 
-"@webassemblyjs/leb128@1.7.8":
-  version "1.7.8"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/leb128/-/leb128-1.7.8.tgz#1bee83426819192db2ea1a234b84c7ebc6d34c1f"
-  dependencies:
-    "@xtuc/long" "4.2.1"
-
-"@webassemblyjs/utf8@1.7.8":
-  version "1.7.8"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/utf8/-/utf8-1.7.8.tgz#2b489d5cf43e0aebb93d8e2d792aff9879c61f05"
-
-"@webassemblyjs/wasm-edit@1.7.8":
-  version "1.7.8"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-edit/-/wasm-edit-1.7.8.tgz#f8bdbe7088718eca27b1c349bb7c06b8a457950c"
-  dependencies:
-    "@webassemblyjs/ast" "1.7.8"
-    "@webassemblyjs/helper-buffer" "1.7.8"
-    "@webassemblyjs/helper-wasm-bytecode" "1.7.8"
-    "@webassemblyjs/helper-wasm-section" "1.7.8"
-    "@webassemblyjs/wasm-gen" "1.7.8"
-    "@webassemblyjs/wasm-opt" "1.7.8"
-    "@webassemblyjs/wasm-parser" "1.7.8"
-    "@webassemblyjs/wast-printer" "1.7.8"
-
-"@webassemblyjs/wasm-gen@1.7.8":
-  version "1.7.8"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-gen/-/wasm-gen-1.7.8.tgz#7e8abf1545eae74ac6781d545c034af3cfd0c7d5"
-  dependencies:
-    "@webassemblyjs/ast" "1.7.8"
-    "@webassemblyjs/helper-wasm-bytecode" "1.7.8"
-    "@webassemblyjs/ieee754" "1.7.8"
-    "@webassemblyjs/leb128" "1.7.8"
-    "@webassemblyjs/utf8" "1.7.8"
-
-"@webassemblyjs/wasm-opt@1.7.8":
-  version "1.7.8"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-opt/-/wasm-opt-1.7.8.tgz#7ada6e211914728fce02ff0ff9c344edc6d41f26"
-  dependencies:
-    "@webassemblyjs/ast" "1.7.8"
-    "@webassemblyjs/helper-buffer" "1.7.8"
-    "@webassemblyjs/wasm-gen" "1.7.8"
-    "@webassemblyjs/wasm-parser" "1.7.8"
-
-"@webassemblyjs/wasm-parser@1.7.8":
-  version "1.7.8"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-parser/-/wasm-parser-1.7.8.tgz#dac47c291fb6a3e63529aecd647592cd34afbf94"
-  dependencies:
-    "@webassemblyjs/ast" "1.7.8"
-    "@webassemblyjs/helper-api-error" "1.7.8"
-    "@webassemblyjs/helper-wasm-bytecode" "1.7.8"
-    "@webassemblyjs/ieee754" "1.7.8"
-    "@webassemblyjs/leb128" "1.7.8"
-    "@webassemblyjs/utf8" "1.7.8"
-
-"@webassemblyjs/wast-parser@1.7.8":
-  version "1.7.8"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-parser/-/wast-parser-1.7.8.tgz#f8aab9a450c048c1f9537695c89faeb92fabfba5"
-  dependencies:
-    "@webassemblyjs/ast" "1.7.8"
-    "@webassemblyjs/floating-point-hex-parser" "1.7.8"
-    "@webassemblyjs/helper-api-error" "1.7.8"
-    "@webassemblyjs/helper-code-frame" "1.7.8"
-    "@webassemblyjs/helper-fsm" "1.7.8"
-    "@xtuc/long" "4.2.1"
-
-"@webassemblyjs/wast-printer@1.7.8":
-  version "1.7.8"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-printer/-/wast-printer-1.7.8.tgz#e7e965782c1912f6a965f14a53ff43d8ad0403a5"
-  dependencies:
-    "@webassemblyjs/ast" "1.7.8"
-    "@webassemblyjs/wast-parser" "1.7.8"
-    "@xtuc/long" "4.2.1"
+"@webassemblyjs/leb128@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/leb128/-/leb128-1.9.0.tgz#f19ca0b76a6dc55623a09cffa769e838fa1e1c95"
+  integrity sha512-ENVzM5VwV1ojs9jam6vPys97B/S65YQtv/aanqnU7D8aSoHFX8GyhGg0CMfyKNIHBuAVjy3tlzd5QMMINa7wpw==
+  dependencies:
+    "@xtuc/long" "4.2.2"
+
+"@webassemblyjs/utf8@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/utf8/-/utf8-1.9.0.tgz#04d33b636f78e6a6813227e82402f7637b6229ab"
+  integrity sha512-GZbQlWtopBTP0u7cHrEx+73yZKrQoBMpwkGEIqlacljhXCkVM1kMQge/Mf+csMJAjEdSwhOyLAS0AoR3AG5P8w==
+
+"@webassemblyjs/wasm-edit@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-edit/-/wasm-edit-1.9.0.tgz#3fe6d79d3f0f922183aa86002c42dd256cfee9cf"
+  integrity sha512-FgHzBm80uwz5M8WKnMTn6j/sVbqilPdQXTWraSjBwFXSYGirpkSWE2R9Qvz9tNiTKQvoKILpCuTjBKzOIm0nxw==
+  dependencies:
+    "@webassemblyjs/ast" "1.9.0"
+    "@webassemblyjs/helper-buffer" "1.9.0"
+    "@webassemblyjs/helper-wasm-bytecode" "1.9.0"
+    "@webassemblyjs/helper-wasm-section" "1.9.0"
+    "@webassemblyjs/wasm-gen" "1.9.0"
+    "@webassemblyjs/wasm-opt" "1.9.0"
+    "@webassemblyjs/wasm-parser" "1.9.0"
+    "@webassemblyjs/wast-printer" "1.9.0"
+
+"@webassemblyjs/wasm-gen@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-gen/-/wasm-gen-1.9.0.tgz#50bc70ec68ded8e2763b01a1418bf43491a7a49c"
+  integrity sha512-cPE3o44YzOOHvlsb4+E9qSqjc9Qf9Na1OO/BHFy4OI91XDE14MjFN4lTMezzaIWdPqHnsTodGGNP+iRSYfGkjA==
+  dependencies:
+    "@webassemblyjs/ast" "1.9.0"
+    "@webassemblyjs/helper-wasm-bytecode" "1.9.0"
+    "@webassemblyjs/ieee754" "1.9.0"
+    "@webassemblyjs/leb128" "1.9.0"
+    "@webassemblyjs/utf8" "1.9.0"
+
+"@webassemblyjs/wasm-opt@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-opt/-/wasm-opt-1.9.0.tgz#2211181e5b31326443cc8112eb9f0b9028721a61"
+  integrity sha512-Qkjgm6Anhm+OMbIL0iokO7meajkzQD71ioelnfPEj6r4eOFuqm4YC3VBPqXjFyyNwowzbMD+hizmprP/Fwkl2A==
+  dependencies:
+    "@webassemblyjs/ast" "1.9.0"
+    "@webassemblyjs/helper-buffer" "1.9.0"
+    "@webassemblyjs/wasm-gen" "1.9.0"
+    "@webassemblyjs/wasm-parser" "1.9.0"
+
+"@webassemblyjs/wasm-parser@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-parser/-/wasm-parser-1.9.0.tgz#9d48e44826df4a6598294aa6c87469d642fff65e"
+  integrity sha512-9+wkMowR2AmdSWQzsPEjFU7njh8HTO5MqO8vjwEHuM+AMHioNqSBONRdr0NQQ3dVQrzp0s8lTcYqzUdb7YgELA==
+  dependencies:
+    "@webassemblyjs/ast" "1.9.0"
+    "@webassemblyjs/helper-api-error" "1.9.0"
+    "@webassemblyjs/helper-wasm-bytecode" "1.9.0"
+    "@webassemblyjs/ieee754" "1.9.0"
+    "@webassemblyjs/leb128" "1.9.0"
+    "@webassemblyjs/utf8" "1.9.0"
+
+"@webassemblyjs/wast-parser@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-parser/-/wast-parser-1.9.0.tgz#3031115d79ac5bd261556cecc3fa90a3ef451914"
+  integrity sha512-qsqSAP3QQ3LyZjNC/0jBJ/ToSxfYJ8kYyuiGvtn/8MK89VrNEfwj7BPQzJVHi0jGTRK2dGdJ5PRqhtjzoww+bw==
+  dependencies:
+    "@webassemblyjs/ast" "1.9.0"
+    "@webassemblyjs/floating-point-hex-parser" "1.9.0"
+    "@webassemblyjs/helper-api-error" "1.9.0"
+    "@webassemblyjs/helper-code-frame" "1.9.0"
+    "@webassemblyjs/helper-fsm" "1.9.0"
+    "@xtuc/long" "4.2.2"
+
+"@webassemblyjs/wast-printer@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-printer/-/wast-printer-1.9.0.tgz#4935d54c85fef637b00ce9f52377451d00d47899"
+  integrity sha512-2J0nE95rHXHyQ24cWjMKJ1tqB/ds8z/cyeOZxJhcb+rW+SQASVjuznUSmdz5GpVJTzU8JkhYut0D3siFDD6wsA==
+  dependencies:
+    "@webassemblyjs/ast" "1.9.0"
+    "@webassemblyjs/wast-parser" "1.9.0"
+    "@xtuc/long" "4.2.2"
 
 "@xtuc/ieee754@^1.2.0":
   version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@xtuc/ieee754/-/ieee754-1.2.0.tgz#eef014a3145ae477a1cbc00cd1e552336dceb790"
+  resolved "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz"
+  integrity sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==
 
-"@xtuc/long@4.2.1":
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/@xtuc/long/-/long-4.2.1.tgz#5c85d662f76fa1d34575766c5dcd6615abcd30d8"
+"@xtuc/long@4.2.2":
+  version "4.2.2"
+  resolved "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz"
+  integrity sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==
 
-abbrev@1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
+abab@^2.0.3:
+  version "2.0.5"
+  resolved "https://registry.npmjs.org/abab/-/abab-2.0.5.tgz"
+  integrity sha512-9IK9EadsbHo6jLWIpxpR6pL0sazTXV6+SQv25ZB+F7Bj9mJNaOc4nCRabwd5M/JwmUa8idz6Eci6eKfJryPs6Q==
 
-accepts@~1.3.4, accepts@~1.3.5:
-  version "1.3.5"
-  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.5.tgz#eb777df6011723a3b14e8a72c0805c8e86746bd2"
+accepts@~1.3.4, accepts@~1.3.5, accepts@~1.3.7:
+  version "1.3.7"
+  resolved "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz"
+  integrity sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==
   dependencies:
-    mime-types "~2.1.18"
-    negotiator "0.6.1"
+    mime-types "~2.1.24"
+    negotiator "0.6.2"
 
-acorn-dynamic-import@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/acorn-dynamic-import/-/acorn-dynamic-import-3.0.0.tgz#901ceee4c7faaef7e07ad2a47e890675da50a278"
+acorn-globals@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.npmjs.org/acorn-globals/-/acorn-globals-6.0.0.tgz"
+  integrity sha512-ZQl7LOWaF5ePqqcX4hLuv/bLXYQNfNWw2c0/yX/TsPRKamzHcTGQnlCjHT3TsmkOUVEPS3crCxiPfdzE/Trlhg==
   dependencies:
-    acorn "^5.0.0"
+    acorn "^7.1.1"
+    acorn-walk "^7.1.1"
 
-acorn@^5.0.0, acorn@^5.6.2:
-  version "5.7.3"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.3.tgz#67aa231bf8812974b85235a96771eb6bd07ea279"
+acorn-jsx@^5.3.1:
+  version "5.3.1"
+  resolved "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.1.tgz"
+  integrity sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng==
+
+acorn-walk@^7.1.1:
+  version "7.2.0"
+  resolved "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz"
+  integrity sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==
+
+acorn-walk@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.0.0.tgz"
+  integrity sha512-oZRad/3SMOI/pxbbmqyurIx7jHw1wZDcR9G44L8pUVFEomX/0dH89SrM1KaDXuv1NpzAXz6Op/Xu/Qd5XXzdEA==
+
+acorn@^6.4.1:
+  version "6.4.2"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.4.2.tgz#35866fd710528e92de10cf06016498e47e39e1e6"
+  integrity sha512-XtGIhXwF8YM8bJhGxG5kXgjkEuNGLTkoYqVE+KMR+aspr4KGYmKYg7yUe3KghyQ9yheNwLnjmzh/7+gfDBmHCQ==
+
+acorn@^7.1.1:
+  version "7.4.1"
+  resolved "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz"
+  integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
+
+acorn@^8.0.4:
+  version "8.0.4"
+  resolved "https://registry.npmjs.org/acorn/-/acorn-8.0.4.tgz"
+  integrity sha512-XNP0PqF1XD19ZlLKvB7cMmnZswW4C/03pRHgirB30uSJTaS3A3V1/P4sS3HPvFmjoriPCJQs+JDSbm4bL1TxGQ==
+
+aggregate-error@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.0.1.tgz"
+  integrity sha512-quoaXsZ9/BLNae5yiNoUz+Nhkwz83GhWwtYFglcjEQB2NDHCIpApbqXxIFnm4Pq/Nvhrsq5sYJFyohrrxnTGAA==
+  dependencies:
+    clean-stack "^2.0.0"
+    indent-string "^4.0.0"
 
 ajv-errors@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/ajv-errors/-/ajv-errors-1.0.0.tgz#ecf021fa108fd17dfb5e6b383f2dd233e31ffc59"
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.1.tgz"
+  integrity sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==
 
-ajv-keywords@^3.1.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.2.0.tgz#e86b819c602cf8821ad637413698f1dec021847a"
+ajv-keywords@^3.1.0, ajv-keywords@^3.4.1:
+  version "3.4.1"
+  resolved "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.4.1.tgz"
+  integrity sha512-RO1ibKvd27e6FEShVFfPALuHI3WjSVNeK5FIsmme/LYRNxjKuNj+Dt7bucLa6NdSv3JcVTyMlm9kGR84z1XpaQ==
 
-ajv@^5.0.0, ajv@^5.3.0:
+ajv@^5.0.0:
   version "5.5.2"
-  resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.5.2.tgz#73b5eeca3fab653e3d3f9422b341ad42205dc965"
+  resolved "https://registry.npmjs.org/ajv/-/ajv-5.5.2.tgz"
+  integrity sha1-c7Xuyj+rZT49P5Qis0GtQiBdyWU=
   dependencies:
     co "^4.6.0"
     fast-deep-equal "^1.0.0"
     fast-json-stable-stringify "^2.0.0"
     json-schema-traverse "^0.3.0"
 
-ajv@^6.1.0:
-  version "6.5.4"
-  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.5.4.tgz#247d5274110db653706b550fcc2b797ca28cfc59"
+ajv@^6.1.0, ajv@^6.10.2, ajv@^6.5.5:
+  version "6.11.0"
+  resolved "https://registry.npmjs.org/ajv/-/ajv-6.11.0.tgz"
+  integrity sha512-nCprB/0syFYy9fVYU1ox1l2KN8S9I+tziH8D4zdZuLT3N6RMlGSGt5FSTpAiHB/Whv8Qs1cWHma1aMKZyaHRKA==
   dependencies:
-    fast-deep-equal "^2.0.1"
+    fast-deep-equal "^3.1.1"
     fast-json-stable-stringify "^2.0.0"
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
-alphanum-sort@^1.0.1, alphanum-sort@^1.0.2:
+ajv@^6.12.0:
+  version "6.12.2"
+  resolved "https://registry.npmjs.org/ajv/-/ajv-6.12.2.tgz"
+  integrity sha512-k+V+hzjm5q/Mr8ef/1Y9goCmlsK4I6Sm74teeyGvFk1XrOsbsKLjEdrvny42CZ+a8sXbk8KWpY/bDwS+FLL2UQ==
+  dependencies:
+    fast-deep-equal "^3.1.1"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.4.1"
+    uri-js "^4.2.2"
+
+almost-equal@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/almost-equal/-/almost-equal-1.1.0.tgz"
+  integrity sha1-+FHGMROHV5lCdqou++jfowZszN0=
+
+alphanum-sort@^1.0.0:
   version "1.0.2"
-  resolved "https://registry.yarnpkg.com/alphanum-sort/-/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3"
+  resolved "https://registry.npmjs.org/alphanum-sort/-/alphanum-sort-1.0.2.tgz"
+  integrity sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=
+
+analyser-frequency-average@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/analyser-frequency-average/-/analyser-frequency-average-1.0.0.tgz"
+  integrity sha1-LlNj0C8hZ722HR7QQkQDcVtxmoY=
+  dependencies:
+    audio-frequency-to-index "^2.0.0"
 
-animate.css@^3.6.1:
-  version "3.7.0"
-  resolved "https://registry.yarnpkg.com/animate.css/-/animate.css-3.7.0.tgz#5de25d1ee5fba11ba6a1e2c4fa568f512eb7d4da"
+animate.css@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.npmjs.org/animate.css/-/animate.css-4.1.0.tgz"
+  integrity sha512-0aVcfWDeU9ykV6vjn1P67ZSs01jxoUQZCGaYbkk0SIIelIG8kUdLrIkua1+VabHfTtsSivDRMMn0ILPvZum2gw==
 
 ansi-colors@^3.0.0:
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-3.2.1.tgz#9638047e4213f3428a11944a7d4b31cba0a3ff95"
+  version "3.2.4"
+  resolved "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.4.tgz"
+  integrity sha512-hHUXGagefjN2iRrID63xckIvotOXOojhQKWIPUZ4mNUZ9nLZW+7FMNoE1lOkEhNWYsx/7ysGIuJYCiMAA9FnrA==
+
+ansi-escapes@^4.2.1:
+  version "4.3.1"
+  resolved "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.1.tgz"
+  integrity sha512-JWF7ocqNrp8u9oqpgV+wH5ftbt+cfvv+PTjOvKLT3AdYly/LmORARfEVT1iyjwN+4MqE5UmVKoAdIBqeoCHgLA==
+  dependencies:
+    type-fest "^0.11.0"
 
 ansi-html@0.0.7:
   version "0.0.7"
-  resolved "https://registry.yarnpkg.com/ansi-html/-/ansi-html-0.0.7.tgz#813584021962a9e9e6fd039f940d12f56ca7859e"
+  resolved "https://registry.npmjs.org/ansi-html/-/ansi-html-0.0.7.tgz"
+  integrity sha1-gTWEAhliqenm/QOflA0S9WynhZ4=
 
 ansi-regex@^2.0.0:
   version "2.1.1"
-  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
+  resolved "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz"
+  integrity sha1-w7M6te42DYbg5ijwRorn7yfWVN8=
 
 ansi-regex@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-3.0.0.tgz#ed0317c322064f79466c02966bddb605ab37d998"
+  resolved "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz"
+  integrity sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=
+
+ansi-regex@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz"
+  integrity sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==
+
+ansi-regex@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz"
+  integrity sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==
 
 ansi-styles@^2.2.1:
   version "2.2.1"
-  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
+  resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz"
+  integrity sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=
 
-ansi-styles@^3.2.1:
+ansi-styles@^3.2.0, ansi-styles@^3.2.1:
   version "3.2.1"
-  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
+  resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz"
+  integrity sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==
   dependencies:
     color-convert "^1.9.0"
 
+ansi-styles@^4.0.0, ansi-styles@^4.1.0:
+  version "4.3.0"
+  resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz"
+  integrity sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==
+  dependencies:
+    color-convert "^2.0.1"
+
 anymatch@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-2.0.0.tgz#bcb24b4f37934d9aa7ac17b4adaf89e7c76ef2eb"
+  resolved "https://registry.npmjs.org/anymatch/-/anymatch-2.0.0.tgz"
+  integrity sha512-5teOsQWABXHHBFP9y3skS5P3d/WfWXpv3FUpy+LorMrNYaT9pI4oLMQX7jzQ2KklNpGpWHzdCXTDT2Y3XGlZBw==
   dependencies:
     micromatch "^3.1.4"
     normalize-path "^2.1.1"
 
-aproba@^1.0.3, aproba@^1.1.1:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
+anymatch@^3.0.3:
+  version "3.1.1"
+  resolved "https://registry.npmjs.org/anymatch/-/anymatch-3.1.1.tgz"
+  integrity sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==
+  dependencies:
+    normalize-path "^3.0.0"
+    picomatch "^2.0.4"
 
-are-we-there-yet@~1.1.2:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz#4b35c2944f062a8bfcda66410760350fe9ddfc21"
+anymatch@~3.1.2:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.3.tgz#790c58b19ba1720a84205b57c618d5ad8524973e"
+  integrity sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==
   dependencies:
-    delegates "^1.0.0"
-    readable-stream "^2.0.6"
+    normalize-path "^3.0.0"
+    picomatch "^2.0.4"
+
+aproba@^1.1.1:
+  version "1.2.0"
+  resolved "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz"
+  integrity sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==
 
 argparse@^1.0.7:
   version "1.0.10"
-  resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
+  resolved "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz"
+  integrity sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==
   dependencies:
     sprintf-js "~1.0.2"
 
+argparse@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz"
+  integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
+
 arr-diff@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-4.0.0.tgz#d6461074febfec71e7e15235761a329a5dc7c520"
+  resolved "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz"
+  integrity sha1-1kYQdP6/7HHn4VI1dhoyml3HxSA=
 
 arr-flatten@^1.1.0:
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/arr-flatten/-/arr-flatten-1.1.0.tgz#36048bbff4e7b47e136644316c99669ea5ae91f1"
+  resolved "https://registry.npmjs.org/arr-flatten/-/arr-flatten-1.1.0.tgz"
+  integrity sha512-L3hKV5R/p5o81R7O02IGnwpDmkp6E982XhtbuwSe3O4qOtMMMtodicASA1Cny2U+aCXcNpml+m4dPsvsJ3jatg==
 
 arr-union@^3.1.0:
   version "3.1.0"
-  resolved "https://registry.yarnpkg.com/arr-union/-/arr-union-3.1.0.tgz#e39b09aea9def866a8f206e288af63919bae39c4"
+  resolved "https://registry.npmjs.org/arr-union/-/arr-union-3.1.0.tgz"
+  integrity sha1-45sJrqne+Gao8gbiiK9jkZuuOcQ=
 
 array-flatten@1.1.1:
   version "1.1.1"
-  resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
+  resolved "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz"
+  integrity sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=
 
 array-flatten@^2.1.0:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-2.1.1.tgz#426bb9da84090c1838d812c8150af20a8331e296"
+  version "2.1.2"
+  resolved "https://registry.npmjs.org/array-flatten/-/array-flatten-2.1.2.tgz"
+  integrity sha512-hNfzcOV8W4NdualtqBFPyVO+54DSJuZGY9qT4pRroB6S9e3iiido2ISIC5h9R2sPJ8H3FHCIiEnsv1lPXO3KtQ==
 
 array-union@^1.0.1:
   version "1.0.2"
-  resolved "https://registry.yarnpkg.com/array-union/-/array-union-1.0.2.tgz#9a34410e4f4e3da23dea375be5be70f24778ec39"
+  resolved "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz"
+  integrity sha1-mjRBDk9OPaI96jdb5b5w8kd47Dk=
   dependencies:
     array-uniq "^1.0.1"
 
 array-uniq@^1.0.1:
   version "1.0.3"
-  resolved "https://registry.yarnpkg.com/array-uniq/-/array-uniq-1.0.3.tgz#af6ac877a25cc7f74e058894753858dfdb24fdb6"
+  resolved "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz"
+  integrity sha1-r2rId6Jcx/dOBYiUdThY39sk/bY=
 
 array-unique@^0.3.2:
   version "0.3.2"
-  resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428"
-
-arrify@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
+  resolved "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz"
+  integrity sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=
 
 asap@~2.0.3:
   version "2.0.6"
-  resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
+  resolved "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz"
+  integrity sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=
 
 asn1.js@^4.0.0:
   version "4.10.1"
-  resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-4.10.1.tgz#b9c2bf5805f1e64aadeed6df3a2bfafb5a73f5a0"
+  resolved "https://registry.npmjs.org/asn1.js/-/asn1.js-4.10.1.tgz"
+  integrity sha512-p32cOF5q0Zqs9uBiONKYLm6BClCoBCM5O9JfeUSlnQLBTxYdTK+pW+nXflm8UkKd2UYlEbYz5qEi0JuZR9ckSw==
   dependencies:
     bn.js "^4.0.0"
     inherits "^2.0.1"
@@ -596,71 +1853,92 @@ asn1.js@^4.0.0:
 
 asn1@~0.2.3:
   version "0.2.4"
-  resolved "https://registry.yarnpkg.com/asn1/-/asn1-0.2.4.tgz#8d2475dfab553bb33e77b54e59e880bb8ce23136"
+  resolved "https://registry.npmjs.org/asn1/-/asn1-0.2.4.tgz"
+  integrity sha512-jxwzQpLQjSmWXgwaCZE9Nz+glAG01yF1QnWgbhGwHI5A6FRIEY6IVqtHhIepHqI7/kyEyQEagBC5mBEFlIYvdg==
   dependencies:
     safer-buffer "~2.1.0"
 
 assert-plus@1.0.0, assert-plus@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-1.0.0.tgz#f12e0f3c5d77b0b1cdd9146942e4e96c1e4dd525"
+  resolved "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz"
+  integrity sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=
 
 assert@^1.1.1:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/assert/-/assert-1.4.1.tgz#99912d591836b5a6f5b345c0f07eefc08fc65d91"
+  version "1.5.0"
+  resolved "https://registry.npmjs.org/assert/-/assert-1.5.0.tgz"
+  integrity sha512-EDsgawzwoun2CZkCgtxJbv392v4nbk9XDD06zI+kQYoBM/3RBWLlEyJARDOmhAAosBjWACEkKL6S+lIZtcAubA==
   dependencies:
+    object-assign "^4.1.1"
     util "0.10.3"
 
 assign-symbols@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/assign-symbols/-/assign-symbols-1.0.0.tgz#59667f41fadd4f20ccbc2bb96b8d4f7f78ec0367"
+  resolved "https://registry.npmjs.org/assign-symbols/-/assign-symbols-1.0.0.tgz"
+  integrity sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c=
 
-async-each@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d"
+async-each@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/async-each/-/async-each-1.0.3.tgz"
+  integrity sha512-z/WhQ5FPySLdvREByI2vZiTWwCnF0moMJ1hK9YQwDTHKh6I7/uSckMetoRGb5UBZPC1z0jlw+n/XCgjeH7y1AQ==
 
-async@^1.5.2:
-  version "1.5.2"
-  resolved "http://registry.npmjs.org/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
+async-limiter@~1.0.0:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz"
+  integrity sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==
 
-async@^2.4.1, async@^2.5.0:
-  version "2.6.1"
-  resolved "https://registry.yarnpkg.com/async/-/async-2.6.1.tgz#b245a23ca71930044ec53fa46aa00a3e87c6a610"
+async@^2.4.1, async@^2.5.0, async@^2.6.2:
+  version "2.6.3"
+  resolved "https://registry.npmjs.org/async/-/async-2.6.3.tgz"
+  integrity sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==
   dependencies:
-    lodash "^4.17.10"
+    lodash "^4.17.14"
 
 asynckit@^0.4.0:
   version "0.4.0"
-  resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
+  resolved "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz"
+  integrity sha1-x57Zf380y48robyXkLzDZkdLS3k=
 
-atob@^2.1.1:
+atob@^2.1.2:
   version "2.1.2"
-  resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
+  resolved "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz"
+  integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
 
-autoprefixer@^6.3.1:
-  version "6.7.7"
-  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-6.7.7.tgz#1dbd1c835658e35ce3f9984099db00585c782014"
+audio-frequency-to-index@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/audio-frequency-to-index/-/audio-frequency-to-index-2.0.0.tgz"
+  integrity sha1-TEvKnzv+w4x3Oqa1YEwRetyYLUU=
   dependencies:
-    browserslist "^1.7.6"
-    caniuse-db "^1.0.30000634"
-    normalize-range "^0.1.2"
-    num2fraction "^1.2.2"
-    postcss "^5.2.16"
-    postcss-value-parser "^3.2.3"
+    clamp "^1.0.1"
+
+autolinker@^3.11.1:
+  version "3.12.0"
+  resolved "https://registry.npmjs.org/autolinker/-/autolinker-3.12.0.tgz"
+  integrity sha512-iQAz75LAZ0dmlaMaIXX0Z+X4yuI6gxONZ14h0YTO0j/3d9DltyD+qkbINpocVZ8oCjMSJUdBeRfrXzGf/zvGZQ==
+  dependencies:
+    tslib "^1.9.3"
 
-autoprefixer@latest:
-  version "9.2.1"
-  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.2.1.tgz#1f2f1179ceed4711b7ab064dbd5c3f9e83d9dc62"
+autoprefixer@^9.6.1:
+  version "9.7.4"
+  resolved "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.7.4.tgz"
+  integrity sha512-g0Ya30YrMBAEZk60lp+qfX5YQllG+S5W3GYCFvyHTvhOki0AEQJLPEcIuGRsqVwLi8FvXPVtwTGhfr38hVpm0g==
   dependencies:
-    browserslist "^4.2.1"
-    caniuse-lite "^1.0.30000892"
+    browserslist "^4.8.3"
+    caniuse-lite "^1.0.30001020"
+    chalk "^2.4.2"
     normalize-range "^0.1.2"
     num2fraction "^1.2.2"
-    postcss "^7.0.5"
-    postcss-value-parser "^3.3.1"
+    postcss "^7.0.26"
+    postcss-value-parser "^4.0.2"
+
+awaitqueue@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.npmjs.org/awaitqueue/-/awaitqueue-2.4.0.tgz"
+  integrity sha512-9nTnPxVuxiuKFTHslm9ltnekUECJidOQ5kE6JpZUH77KrKqStQuWUW7JPB2GJZ7rOwWLcbToHiIXle/nJe1VpQ==
 
 awesome-typescript-loader@^5.0.0:
   version "5.2.1"
-  resolved "https://registry.yarnpkg.com/awesome-typescript-loader/-/awesome-typescript-loader-5.2.1.tgz#a41daf7847515f4925cdbaa3075d61f289e913fc"
+  resolved "https://registry.npmjs.org/awesome-typescript-loader/-/awesome-typescript-loader-5.2.1.tgz"
+  integrity sha512-slv66OAJB8orL+UUaTI3pKlLorwIvS4ARZzYR9iJJyGsEgOqueMfOMdKySWzZ73vIkEe3fcwFgsKMg4d8zyb1g==
   dependencies:
     chalk "^2.4.1"
     enhanced-resolve "^4.0.0"
@@ -673,35 +1951,96 @@ awesome-typescript-loader@^5.0.0:
 
 aws-sign2@~0.7.0:
   version "0.7.0"
-  resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
+  resolved "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz"
+  integrity sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg=
 
 aws4@^1.8.0:
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.8.0.tgz#f0e003d9ca9e7f59c7a508945d7b2ef9a04a542f"
-
-babel-code-frame@^6.22.0, babel-code-frame@^6.26.0:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b"
-  dependencies:
-    chalk "^1.1.3"
-    esutils "^2.0.2"
-    js-tokens "^3.0.2"
-
-balanced-match@^0.4.2:
-  version "0.4.2"
-  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-0.4.2.tgz#cb3f3e3c732dc0f01ee70b403f302e61d7709838"
+  version "1.9.1"
+  resolved "https://registry.npmjs.org/aws4/-/aws4-1.9.1.tgz"
+  integrity sha512-wMHVg2EOHaMRxbzgFJ9gtjOOCrI80OHLG14rxi28XwOW8ux6IiEbRCGGGqCtdAIg4FQCbW20k9RsT4y3gJlFug==
+
+axios@^0.27.2:
+  version "0.27.2"
+  resolved "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz"
+  integrity sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==
+  dependencies:
+    follow-redirects "^1.14.9"
+    form-data "^4.0.0"
+
+babel-jest@^26.5.2:
+  version "26.5.2"
+  resolved "https://registry.npmjs.org/babel-jest/-/babel-jest-26.5.2.tgz"
+  integrity sha512-U3KvymF3SczA3vOL/cgiUFOznfMET+XDIXiWnoJV45siAp2pLMG8i2+/MGZlAC3f/F6Q40LR4M4qDrWZ9wkK8A==
+  dependencies:
+    "@jest/transform" "^26.5.2"
+    "@jest/types" "^26.5.2"
+    "@types/babel__core" "^7.1.7"
+    babel-plugin-istanbul "^6.0.0"
+    babel-preset-jest "^26.5.0"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.4"
+    slash "^3.0.0"
+
+babel-plugin-istanbul@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-6.0.0.tgz"
+  integrity sha512-AF55rZXpe7trmEylbaE1Gv54wn6rwU03aptvRoVIGP8YykoSxqdVLV1TfwflBCE/QtHmqtP8SWlTENqbK8GCSQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@istanbuljs/load-nyc-config" "^1.0.0"
+    "@istanbuljs/schema" "^0.1.2"
+    istanbul-lib-instrument "^4.0.0"
+    test-exclude "^6.0.0"
+
+babel-plugin-jest-hoist@^26.5.0:
+  version "26.5.0"
+  resolved "https://registry.npmjs.org/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-26.5.0.tgz"
+  integrity sha512-ck17uZFD3CDfuwCLATWZxkkuGGFhMij8quP8CNhwj8ek1mqFgbFzRJ30xwC04LLscj/aKsVFfRST+b5PT7rSuw==
+  dependencies:
+    "@babel/template" "^7.3.3"
+    "@babel/types" "^7.3.3"
+    "@types/babel__core" "^7.0.0"
+    "@types/babel__traverse" "^7.0.6"
+
+babel-preset-current-node-syntax@^0.1.3:
+  version "0.1.4"
+  resolved "https://registry.npmjs.org/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-0.1.4.tgz"
+  integrity sha512-5/INNCYhUGqw7VbVjT/hb3ucjgkVHKXY7lX3ZjlN4gm565VyFmJUrJ/h+h16ECVB38R/9SF6aACydpKMLZ/c9w==
+  dependencies:
+    "@babel/plugin-syntax-async-generators" "^7.8.4"
+    "@babel/plugin-syntax-bigint" "^7.8.3"
+    "@babel/plugin-syntax-class-properties" "^7.8.3"
+    "@babel/plugin-syntax-import-meta" "^7.8.3"
+    "@babel/plugin-syntax-json-strings" "^7.8.3"
+    "@babel/plugin-syntax-logical-assignment-operators" "^7.8.3"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
+    "@babel/plugin-syntax-numeric-separator" "^7.8.3"
+    "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.3"
+
+babel-preset-jest@^26.5.0:
+  version "26.5.0"
+  resolved "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-26.5.0.tgz"
+  integrity sha512-F2vTluljhqkiGSJGBg/jOruA8vIIIL11YrxRcO7nviNTMbbofPSHwnm8mgP7d/wS7wRSexRoI6X1A6T74d4LQA==
+  dependencies:
+    babel-plugin-jest-hoist "^26.5.0"
+    babel-preset-current-node-syntax "^0.1.3"
 
 balanced-match@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
+  resolved "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz"
+  integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c=
 
 base64-js@^1.0.2:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.3.0.tgz#cab1e6118f051095e58b5281aea8c1cd22bfc0e3"
+  version "1.3.1"
+  resolved "https://registry.npmjs.org/base64-js/-/base64-js-1.3.1.tgz"
+  integrity sha512-mLQ4i2QO1ytvGWFWmcngKO//JXAQueZvwEKtjgQFM4jIK0kU+ytMfplL8j+n5mspOfjHwoAg+9yhb7BwAHm36g==
 
 base@^0.11.1:
   version "0.11.2"
-  resolved "https://registry.yarnpkg.com/base/-/base-0.11.2.tgz#7bde5ced145b6d551a90db87f83c558b4eb48a8f"
+  resolved "https://registry.npmjs.org/base/-/base-0.11.2.tgz"
+  integrity sha512-5T6P4xPgpp0YDFvSWwEZ4NoE3aM4QBQXDzmVbraCkFj8zHM+mba8SyqB5DbZWyR7mYHo6Y7BdQo3MoA4m0TeQg==
   dependencies:
     cache-base "^1.0.1"
     class-utils "^0.3.5"
@@ -713,48 +2052,73 @@ base@^0.11.1:
 
 batch@0.6.1:
   version "0.6.1"
-  resolved "https://registry.yarnpkg.com/batch/-/batch-0.6.1.tgz#dc34314f4e679318093fc760272525f94bf25c16"
+  resolved "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz"
+  integrity sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY=
 
 bcrypt-pbkdf@^1.0.0:
   version "1.0.2"
-  resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz#a4301d389b6a43f9b67ff3ca11a3f6637e360e9e"
+  resolved "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz"
+  integrity sha1-pDAdOJtqQ/m2f/PKEaP2Y342Dp4=
   dependencies:
     tweetnacl "^0.14.3"
 
 big.js@^3.1.3:
   version "3.2.0"
-  resolved "https://registry.yarnpkg.com/big.js/-/big.js-3.2.0.tgz#a5fc298b81b9e0dca2e458824784b65c52ba588e"
+  resolved "https://registry.npmjs.org/big.js/-/big.js-3.2.0.tgz"
+  integrity sha512-+hN/Zh2D08Mx65pZ/4g5bsmNiZUuChDiQfTUQ7qJr4/kuopCr88xZsAXv6mBoZEsUI4OuGHlX59qE94K2mMW8Q==
+
+big.js@^5.2.2:
+  version "5.2.2"
+  resolved "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz"
+  integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==
 
 binary-extensions@^1.0.0:
-  version "1.12.0"
-  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.12.0.tgz#c2d780f53d45bba8317a8902d4ceeaf3a6385b14"
+  version "1.13.1"
+  resolved "https://registry.npmjs.org/binary-extensions/-/binary-extensions-1.13.1.tgz"
+  integrity sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw==
 
-bluebird@^3.5.1:
-  version "3.5.2"
-  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.2.tgz#1be0908e054a751754549c270489c1505d4ab15a"
+binary-extensions@^2.0.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.3.0.tgz#f6e14a97858d327252200242d4ccfe522c445522"
+  integrity sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==
+
+bindings@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/bindings/-/bindings-1.5.0.tgz#10353c9e945334bc0511a6d90b38fbc7c9c504df"
+  integrity sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==
+  dependencies:
+    file-uri-to-path "1.0.0"
+
+bluebird@^3.5.5:
+  version "3.7.2"
+  resolved "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz"
+  integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
 
-bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.1.1, bn.js@^4.4.0:
-  version "4.11.8"
-  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.8.tgz#2cde09eb5ee341f484746bb0309b3253b1b1442f"
+bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.1.1, bn.js@^4.11.9:
+  version "4.12.0"
+  resolved "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz"
+  integrity sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==
 
-body-parser@1.18.3:
-  version "1.18.3"
-  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.18.3.tgz#5b292198ffdd553b3a0f20ded0592b956955c8b4"
+body-parser@1.19.0:
+  version "1.19.0"
+  resolved "https://registry.npmjs.org/body-parser/-/body-parser-1.19.0.tgz"
+  integrity sha512-dhEPs72UPbDnAQJ9ZKMNTP6ptJaionhP5cBb541nXPlW60Jepo9RV/a4fX4XWW9CuFNK22krhrj1+rgzifNCsw==
   dependencies:
-    bytes "3.0.0"
+    bytes "3.1.0"
     content-type "~1.0.4"
     debug "2.6.9"
     depd "~1.1.2"
-    http-errors "~1.6.3"
-    iconv-lite "0.4.23"
+    http-errors "1.7.2"
+    iconv-lite "0.4.24"
     on-finished "~2.3.0"
-    qs "6.5.2"
-    raw-body "2.3.3"
-    type-is "~1.6.16"
+    qs "6.7.0"
+    raw-body "2.4.0"
+    type-is "~1.6.17"
 
 bonjour@^3.5.0:
   version "3.5.0"
-  resolved "https://registry.yarnpkg.com/bonjour/-/bonjour-3.5.0.tgz#8e890a183d8ee9a2393b3844c691a42bcf7bc9f5"
+  resolved "https://registry.npmjs.org/bonjour/-/bonjour-3.5.0.tgz"
+  integrity sha1-jokKGD2O6aI5OzhExpGkK897yfU=
   dependencies:
     array-flatten "^2.1.0"
     deep-equal "^1.0.1"
@@ -763,32 +2127,38 @@ bonjour@^3.5.0:
     multicast-dns "^6.0.1"
     multicast-dns-service-types "^1.1.0"
 
-boolbase@~1.0.0:
+boolbase@^1.0.0, boolbase@~1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
-
-bootstrap-notify@^3.1.3:
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/bootstrap-notify/-/bootstrap-notify-3.1.3.tgz#7e98b3a696cf452a7b56727f0b3316a90037c10b"
+  resolved "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz"
+  integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
 
-bootstrap@3.x:
-  version "3.3.7"
-  resolved "http://registry.npmjs.org/bootstrap/-/bootstrap-3.3.7.tgz#5a389394549f23330875a3b150656574f8a9eb71"
+bootstrap@^3.4.1:
+  version "3.4.1"
+  resolved "https://registry.npmjs.org/bootstrap/-/bootstrap-3.4.1.tgz"
+  integrity sha512-yN5oZVmRCwe5aKwzRj6736nSmKDX7pLYwsXiCj/EYmo16hODaBiT4En5btW/jhBF/seV+XMx3aYwukYC3A49DA==
 
 bower@1.x:
-  version "1.8.4"
-  resolved "https://registry.yarnpkg.com/bower/-/bower-1.8.4.tgz#e7876a076deb8137f7d06525dc5e8c66db82f28a"
+  version "1.8.8"
+  resolved "https://registry.npmjs.org/bower/-/bower-1.8.8.tgz"
+  integrity sha512-1SrJnXnkP9soITHptSO+ahx3QKp3cVzn8poI6ujqc5SeOkg5iqM1pK9H+DSc2OQ8SnO0jC/NG4Ur/UIwy7574A==
+
+bowser@^2.11.0:
+  version "2.11.0"
+  resolved "https://registry.npmjs.org/bowser/-/bowser-2.11.0.tgz"
+  integrity sha512-AlcaJBi/pqqJBIQ8U9Mcpc9i8Aqxn88Skv5d+xBX006BY5u8N3mGLHa5Lgppa7L/HfwgwLgZ6NYs+Ag6uUmJRA==
 
 brace-expansion@^1.1.7:
   version "1.1.11"
-  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
+  resolved "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz"
+  integrity sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==
   dependencies:
     balanced-match "^1.0.0"
     concat-map "0.0.1"
 
-braces@^2.3.0, braces@^2.3.1:
+braces@^2.3.1, braces@^2.3.2:
   version "2.3.2"
-  resolved "https://registry.yarnpkg.com/braces/-/braces-2.3.2.tgz#5979fd3f14cd531565e5fa2df1abfff1dfaee729"
+  resolved "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz"
+  integrity sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==
   dependencies:
     arr-flatten "^1.1.0"
     array-unique "^0.3.2"
@@ -801,13 +2171,34 @@ braces@^2.3.0, braces@^2.3.1:
     split-string "^3.0.2"
     to-regex "^3.0.1"
 
-brorand@^1.0.1:
+braces@^3.0.1:
+  version "3.0.2"
+  resolved "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz"
+  integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
+  dependencies:
+    fill-range "^7.0.1"
+
+braces@~3.0.2:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.3.tgz#490332f40919452272d55a8480adc0c441358789"
+  integrity sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==
+  dependencies:
+    fill-range "^7.1.1"
+
+brorand@^1.0.1, brorand@^1.1.0:
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f"
+  resolved "https://registry.npmjs.org/brorand/-/brorand-1.1.0.tgz"
+  integrity sha1-EsJe/kCkXjwyPrhnWgoM5XsiNx8=
+
+browser-process-hrtime@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz"
+  integrity sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==
 
 browserify-aes@^1.0.0, browserify-aes@^1.0.4:
   version "1.2.0"
-  resolved "http://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz#326734642f403dabc3003209853bb70ad428ef48"
+  resolved "https://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz"
+  integrity sha512-+7CHXqGuspUn/Sl5aO7Ea0xWGAtETPXNSAjHo48JfLdPWcMng33Xe4znFvQweqc/uzk5zSOI3H52CYnjCfb5hA==
   dependencies:
     buffer-xor "^1.0.3"
     cipher-base "^1.0.0"
@@ -818,7 +2209,8 @@ browserify-aes@^1.0.0, browserify-aes@^1.0.4:
 
 browserify-cipher@^1.0.0:
   version "1.0.1"
-  resolved "https://registry.yarnpkg.com/browserify-cipher/-/browserify-cipher-1.0.1.tgz#8d6474c1b870bfdabcd3bcfcc1934a10e94f15f0"
+  resolved "https://registry.npmjs.org/browserify-cipher/-/browserify-cipher-1.0.1.tgz"
+  integrity sha512-sPhkz0ARKbf4rRQt2hTpAHqn47X3llLkUGn+xEJzLjwY8LRs2p0v7ljvI5EyoRO/mexrNunNECisZs+gw2zz1w==
   dependencies:
     browserify-aes "^1.0.4"
     browserify-des "^1.0.0"
@@ -826,7 +2218,8 @@ browserify-cipher@^1.0.0:
 
 browserify-des@^1.0.0:
   version "1.0.2"
-  resolved "https://registry.yarnpkg.com/browserify-des/-/browserify-des-1.0.2.tgz#3af4f1f59839403572f1c66204375f7a7f703e9c"
+  resolved "https://registry.npmjs.org/browserify-des/-/browserify-des-1.0.2.tgz"
+  integrity sha512-BioO1xf3hFwz4kc6iBhI3ieDFompMhrMlnDFC4/0/vd5MokpuAc3R+LYbwTA9A5Yc9pq9UYPqffKpW2ObuwX5A==
   dependencies:
     cipher-base "^1.0.1"
     des.js "^1.0.0"
@@ -835,14 +2228,16 @@ browserify-des@^1.0.0:
 
 browserify-rsa@^4.0.0:
   version "4.0.1"
-  resolved "http://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.0.1.tgz#21e0abfaf6f2029cf2fafb133567a701d4135524"
+  resolved "https://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.0.1.tgz"
+  integrity sha1-IeCr+vbyApzy+vsTNWenAdQTVSQ=
   dependencies:
     bn.js "^4.1.0"
     randombytes "^2.0.1"
 
 browserify-sign@^4.0.0:
   version "4.0.4"
-  resolved "https://registry.yarnpkg.com/browserify-sign/-/browserify-sign-4.0.4.tgz#aa4eb68e5d7b658baa6bf6a57e630cbd7a93d298"
+  resolved "https://registry.npmjs.org/browserify-sign/-/browserify-sign-4.0.4.tgz"
+  integrity sha1-qk62jl17ZYuqa/alfmMMvXqT0pg=
   dependencies:
     bn.js "^4.1.1"
     browserify-rsa "^4.0.0"
@@ -854,40 +2249,55 @@ browserify-sign@^4.0.0:
 
 browserify-zlib@^0.2.0:
   version "0.2.0"
-  resolved "https://registry.yarnpkg.com/browserify-zlib/-/browserify-zlib-0.2.0.tgz#2869459d9aa3be245fe8fe2ca1f46e2e7f54d73f"
+  resolved "https://registry.npmjs.org/browserify-zlib/-/browserify-zlib-0.2.0.tgz"
+  integrity sha512-Z942RysHXmJrhqk88FmKBVq/v5tqmSkDz7p54G/MGyjMnCFFnC79XWNbg+Vta8W6Wb2qtSZTSxIGkJrRpCFEiA==
   dependencies:
     pako "~1.0.5"
 
-browserslist@^1.3.6, browserslist@^1.5.2, browserslist@^1.7.6:
-  version "1.7.7"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-1.7.7.tgz#0bd76704258be829b2398bb50e4b62d1a166b0b9"
+browserslist@^4.0.0, browserslist@^4.8.3:
+  version "4.16.6"
+  resolved "https://registry.npmjs.org/browserslist/-/browserslist-4.16.6.tgz"
+  integrity sha512-Wspk/PqO+4W9qp5iUTJsa1B/QrYn1keNCcEP5OvP7WBwT4KaDly0uONYmC6Xa3Z5IqnUgS0KcgLYu1l74x0ZXQ==
   dependencies:
-    caniuse-db "^1.0.30000639"
-    electron-to-chromium "^1.2.7"
+    caniuse-lite "^1.0.30001219"
+    colorette "^1.2.2"
+    electron-to-chromium "^1.3.723"
+    escalade "^3.1.1"
+    node-releases "^1.1.71"
 
-browserslist@^4.2.1:
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.3.1.tgz#453e46e74b0663ec5d764cdac3e5ac52bd776038"
+bs-logger@0.x:
+  version "0.2.6"
+  resolved "https://registry.npmjs.org/bs-logger/-/bs-logger-0.2.6.tgz"
+  integrity sha512-pd8DCoxmbgc7hyPKOvxtqNcjYoOsABPQdcCUjGp3d42VR2CX1ORhk2A87oqqu5R1kk+76nsxZupkmyd+MVtCog==
   dependencies:
-    caniuse-lite "^1.0.30000893"
-    electron-to-chromium "^1.3.80"
-    node-releases "^1.0.0-alpha.14"
+    fast-json-stable-stringify "2.x"
 
-buffer-from@^1.0.0:
+bser@2.1.1:
+  version "2.1.1"
+  resolved "https://registry.npmjs.org/bser/-/bser-2.1.1.tgz"
+  integrity sha512-gQxTNE/GAfIIrmHLUE3oJyp5FO6HRBfhjnw4/wMmA63ZGDJnWBmgY/lyQBpnDUkGmAhbSe39tx2d/iTOAfglwQ==
+  dependencies:
+    node-int64 "^0.4.0"
+
+buffer-from@1.x, buffer-from@^1.0.0:
   version "1.1.1"
-  resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef"
+  resolved "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz"
+  integrity sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==
 
 buffer-indexof@^1.0.0:
   version "1.1.1"
-  resolved "https://registry.yarnpkg.com/buffer-indexof/-/buffer-indexof-1.1.1.tgz#52fabcc6a606d1a00302802648ef68f639da268c"
+  resolved "https://registry.npmjs.org/buffer-indexof/-/buffer-indexof-1.1.1.tgz"
+  integrity sha512-4/rOEg86jivtPTeOUUT61jJO1Ya1TrR/OkqCSZDyq84WJh3LuuiphBYJN+fm5xufIk4XAFcEwte/8WzC8If/1g==
 
 buffer-xor@^1.0.3:
   version "1.0.3"
-  resolved "https://registry.yarnpkg.com/buffer-xor/-/buffer-xor-1.0.3.tgz#26e61ed1422fb70dd42e6e36729ed51d855fe8d9"
+  resolved "https://registry.npmjs.org/buffer-xor/-/buffer-xor-1.0.3.tgz"
+  integrity sha1-JuYe0UIvtw3ULm42cp7VHYVf6Nk=
 
 buffer@^4.3.0:
-  version "4.9.1"
-  resolved "http://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz#6d1bb601b07a4efced97094132093027c95bc298"
+  version "4.9.2"
+  resolved "https://registry.npmjs.org/buffer/-/buffer-4.9.2.tgz"
+  integrity sha512-xq+q3SRMOxGivLhBNaUdC64hDTQwejJ+H0T/NB1XMtTVEwNTrfFF3gAxiyW0Bu/xWEGhjVKgUcMhCrUy2+uCWg==
   dependencies:
     base64-js "^1.0.2"
     ieee754 "^1.1.4"
@@ -895,37 +2305,73 @@ buffer@^4.3.0:
 
 builtin-modules@^1.1.1:
   version "1.1.1"
-  resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-1.1.1.tgz#270f076c5a72c02f5b65a47df94c5fe3a278892f"
+  resolved "https://registry.npmjs.org/builtin-modules/-/builtin-modules-1.1.1.tgz"
+  integrity sha1-Jw8HbFpywC9bZaR9+Uxf46J4iS8=
 
 builtin-status-codes@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz#85982878e21b98e1c66425e03d0174788f569ee8"
+  resolved "https://registry.npmjs.org/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz"
+  integrity sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug=
 
 bytes@3.0.0:
   version "3.0.0"
-  resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048"
+  resolved "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz"
+  integrity sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=
 
-cacache@^10.0.1, cacache@^10.0.4:
-  version "10.0.4"
-  resolved "https://registry.yarnpkg.com/cacache/-/cacache-10.0.4.tgz#6452367999eff9d4188aefd9a14e9d7c6a263460"
-  dependencies:
-    bluebird "^3.5.1"
-    chownr "^1.0.1"
-    glob "^7.1.2"
-    graceful-fs "^4.1.11"
-    lru-cache "^4.1.1"
-    mississippi "^2.0.0"
+bytes@3.1.0:
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz"
+  integrity sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==
+
+cacache@^12.0.2, cacache@^12.0.3:
+  version "12.0.3"
+  resolved "https://registry.npmjs.org/cacache/-/cacache-12.0.3.tgz"
+  integrity sha512-kqdmfXEGFepesTuROHMs3MpFLWrPkSSpRqOw80RCflZXy/khxaArvFrQ7uJxSUduzAufc6G0g1VUCOZXxWavPw==
+  dependencies:
+    bluebird "^3.5.5"
+    chownr "^1.1.1"
+    figgy-pudding "^3.5.1"
+    glob "^7.1.4"
+    graceful-fs "^4.1.15"
+    infer-owner "^1.0.3"
+    lru-cache "^5.1.1"
+    mississippi "^3.0.0"
     mkdirp "^0.5.1"
     move-concurrently "^1.0.1"
     promise-inflight "^1.0.1"
-    rimraf "^2.6.2"
-    ssri "^5.2.4"
-    unique-filename "^1.1.0"
+    rimraf "^2.6.3"
+    ssri "^6.0.1"
+    unique-filename "^1.1.1"
     y18n "^4.0.0"
 
+cacache@^13.0.1:
+  version "13.0.1"
+  resolved "https://registry.npmjs.org/cacache/-/cacache-13.0.1.tgz"
+  integrity sha512-5ZvAxd05HDDU+y9BVvcqYu2LLXmPnQ0hW62h32g4xBTgL/MppR4/04NHfj/ycM2y6lmTnbw6HVi+1eN0Psba6w==
+  dependencies:
+    chownr "^1.1.2"
+    figgy-pudding "^3.5.1"
+    fs-minipass "^2.0.0"
+    glob "^7.1.4"
+    graceful-fs "^4.2.2"
+    infer-owner "^1.0.4"
+    lru-cache "^5.1.1"
+    minipass "^3.0.0"
+    minipass-collect "^1.0.2"
+    minipass-flush "^1.0.5"
+    minipass-pipeline "^1.2.2"
+    mkdirp "^0.5.1"
+    move-concurrently "^1.0.1"
+    p-map "^3.0.0"
+    promise-inflight "^1.0.1"
+    rimraf "^2.7.1"
+    ssri "^7.0.0"
+    unique-filename "^1.1.1"
+
 cache-base@^1.0.1:
   version "1.0.1"
-  resolved "https://registry.yarnpkg.com/cache-base/-/cache-base-1.0.1.tgz#0a7f46416831c8b662ee36fe4e7c59d76f666ab2"
+  resolved "https://registry.npmjs.org/cache-base/-/cache-base-1.0.1.tgz"
+  integrity sha512-AKcdTnFSWATd5/GCPRxr2ChwIJ85CeyrEyjRHlKxQ56d4XJMGym0uAiKn0xbLOGOl3+yRpOTi484dVCEc5AUzQ==
   dependencies:
     collection-visit "^1.0.0"
     component-emitter "^1.2.1"
@@ -937,45 +2383,93 @@ cache-base@^1.0.1:
     union-value "^1.0.0"
     unset-value "^1.0.0"
 
+caller-callsite@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/caller-callsite/-/caller-callsite-2.0.0.tgz"
+  integrity sha1-hH4PzgoiN1CpoCfFSzNzGtMVQTQ=
+  dependencies:
+    callsites "^2.0.0"
+
+caller-path@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/caller-path/-/caller-path-2.0.0.tgz"
+  integrity sha1-Ro+DBE42mrIBD6xfBs7uFbsssfQ=
+  dependencies:
+    caller-callsite "^2.0.0"
+
+callsites@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/callsites/-/callsites-2.0.0.tgz"
+  integrity sha1-BuuE8A7qQT2oav/vrL/7Ngk7PFA=
+
+callsites@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz"
+  integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
+
 camel-case@3.0.x:
   version "3.0.0"
-  resolved "https://registry.yarnpkg.com/camel-case/-/camel-case-3.0.0.tgz#ca3c3688a4e9cf3a4cda777dc4dcbc713249cf73"
+  resolved "https://registry.npmjs.org/camel-case/-/camel-case-3.0.0.tgz"
+  integrity sha1-yjw2iKTpzzpM2nd9xNy8cTJJz3M=
   dependencies:
     no-case "^2.2.0"
     upper-case "^1.1.1"
 
-camelcase@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-4.1.0.tgz#d545635be1e33c542649c69173e5de6acfae34dd"
+camelcase@^5.0.0, camelcase@^5.3.1:
+  version "5.3.1"
+  resolved "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz"
+  integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
 
-caniuse-api@^1.5.2:
-  version "1.6.1"
-  resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-1.6.1.tgz#b534e7c734c4f81ec5fbe8aca2ad24354b962c6c"
+camelcase@^6.0.0:
+  version "6.1.0"
+  resolved "https://registry.npmjs.org/camelcase/-/camelcase-6.1.0.tgz"
+  integrity sha512-WCMml9ivU60+8rEJgELlFp1gxFcEGxwYleE3bziHEDeqsqAWGHdimB7beBFGjLzVNgPGyDsfgXLQEYMpmIFnVQ==
+
+caniuse-api@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz"
+  integrity sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==
   dependencies:
-    browserslist "^1.3.6"
-    caniuse-db "^1.0.30000529"
+    browserslist "^4.0.0"
+    caniuse-lite "^1.0.0"
     lodash.memoize "^4.1.2"
     lodash.uniq "^4.5.0"
 
-caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639:
-  version "1.0.30000893"
-  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000893.tgz#2781b8d2ce50d8dd9d091425461b528ca4556c07"
-
-caniuse-lite@^1.0.30000892, caniuse-lite@^1.0.30000893:
-  version "1.0.30000893"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000893.tgz#284b20932bd41b93e21626975f2050cb01561986"
+caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001020, caniuse-lite@^1.0.30001219:
+  version "1.0.30001234"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001234.tgz"
+  integrity sha512-a3gjUVKkmwLdNysa1xkUAwN2VfJUJyVW47rsi3aCbkRCtbHAfo+rOsCqVw29G6coQ8gzAPb5XBXwiGHwme3isA==
 
 canvas-gauges@^2.1.5:
   version "2.1.5"
-  resolved "https://registry.yarnpkg.com/canvas-gauges/-/canvas-gauges-2.1.5.tgz#62e461280ccf7eaa254486291130289a790a7d3f"
+  resolved "https://registry.npmjs.org/canvas-gauges/-/canvas-gauges-2.1.5.tgz"
+  integrity sha512-7GUd1uukePQPQPIoM8Sh4UrG8om+2RG+D8WN5BCkIp9wAfByzPuZZinsUkfFCyRrEOZ/rhuwBfFnb1ld8IfNrw==
+
+capture-exit@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/capture-exit/-/capture-exit-2.0.0.tgz"
+  integrity sha512-PiT/hQmTonHhl/HFGN+Lx3JJUznrVYJ3+AQsnthneZbvW7x+f08Tk7yLJTLEOUvBTbduLeeBkxEaYXUOUrRq6g==
+  dependencies:
+    rsvp "^4.8.4"
 
 caseless@~0.12.0:
   version "0.12.0"
-  resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
+  resolved "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz"
+  integrity sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=
+
+chalk@2.4.2, chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.0, chalk@^2.4.1, chalk@^2.4.2:
+  version "2.4.2"
+  resolved "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz"
+  integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
+  dependencies:
+    ansi-styles "^3.2.1"
+    escape-string-regexp "^1.0.5"
+    supports-color "^5.3.0"
 
 chalk@^1.1.3:
   version "1.1.3"
-  resolved "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
+  resolved "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz"
+  integrity sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=
   dependencies:
     ansi-styles "^2.2.1"
     escape-string-regexp "^1.0.2"
@@ -983,67 +2477,92 @@ chalk@^1.1.3:
     strip-ansi "^3.0.0"
     supports-color "^2.0.0"
 
-chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.0, chalk@^2.3.1, chalk@^2.4.1:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.1.tgz#18c49ab16a037b6eb0152cc83e3471338215b66e"
+chalk@^4.0.0, chalk@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz"
+  integrity sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==
   dependencies:
-    ansi-styles "^3.2.1"
-    escape-string-regexp "^1.0.5"
-    supports-color "^5.3.0"
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
+char-regex@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz"
+  integrity sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==
 
 charenc@~0.0.1:
   version "0.0.2"
-  resolved "https://registry.yarnpkg.com/charenc/-/charenc-0.0.2.tgz#c0a1d2f3a7092e03774bfa83f14c0fc5790a8667"
+  resolved "https://registry.npmjs.org/charenc/-/charenc-0.0.2.tgz"
+  integrity sha1-wKHS86cJLgN3S/qD8UwPxXkKhmc=
 
-chokidar@^2.0.0, chokidar@^2.0.2:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.0.4.tgz#356ff4e2b0e8e43e322d18a372460bbcf3accd26"
+chokidar@^2.1.8:
+  version "2.1.8"
+  resolved "https://registry.npmjs.org/chokidar/-/chokidar-2.1.8.tgz"
+  integrity sha512-ZmZUazfOzf0Nve7duiCKD23PFSCs4JPoYyccjUFF3aQkQadqBhfzhjkwBH2mNOG9cTBwhamM37EIsIkZw3nRgg==
   dependencies:
     anymatch "^2.0.0"
-    async-each "^1.0.0"
-    braces "^2.3.0"
+    async-each "^1.0.1"
+    braces "^2.3.2"
     glob-parent "^3.1.0"
-    inherits "^2.0.1"
+    inherits "^2.0.3"
     is-binary-path "^1.0.0"
     is-glob "^4.0.0"
-    lodash.debounce "^4.0.8"
-    normalize-path "^2.1.1"
+    normalize-path "^3.0.0"
     path-is-absolute "^1.0.0"
-    readdirp "^2.0.0"
-    upath "^1.0.5"
+    readdirp "^2.2.1"
+    upath "^1.1.1"
+  optionalDependencies:
+    fsevents "^1.2.7"
+
+chokidar@^3.4.1:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.6.0.tgz#197c6cc669ef2a8dc5e7b4d97ee4e092c3eb0d5b"
+  integrity sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==
+  dependencies:
+    anymatch "~3.1.2"
+    braces "~3.0.2"
+    glob-parent "~5.1.2"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.6.0"
   optionalDependencies:
-    fsevents "^1.2.2"
+    fsevents "~2.3.2"
 
-chownr@^1.0.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.1.tgz#54726b8b8fff4df053c42187e801fb4412df1494"
+chownr@^1.1.1, chownr@^1.1.2:
+  version "1.1.4"
+  resolved "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz"
+  integrity sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==
 
-chrome-trace-event@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.0.tgz#45a91bd2c20c9411f0963b5aaeb9a1b95e09cc48"
+chrome-trace-event@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.2.tgz"
+  integrity sha512-9e/zx1jw7B4CO+c/RXoCsfg/x1AfUBioy4owYH0bJprEYAx5hRFLRhWBqHAG57D0ZM4H7vxbP7bPe0VwhQRYDQ==
   dependencies:
     tslib "^1.9.0"
 
+ci-info@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/ci-info/-/ci-info-2.0.0.tgz"
+  integrity sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==
+
 cipher-base@^1.0.0, cipher-base@^1.0.1, cipher-base@^1.0.3:
   version "1.0.4"
-  resolved "https://registry.yarnpkg.com/cipher-base/-/cipher-base-1.0.4.tgz#8760e4ecc272f4c363532f926d874aae2c1397de"
+  resolved "https://registry.npmjs.org/cipher-base/-/cipher-base-1.0.4.tgz"
+  integrity sha512-Kkht5ye6ZGmwv40uUDZztayT2ThLQGfnj/T71N/XzeZeo3nf8foyW7zGTsPYkEya3m5f3cAypH+qe7YOrM1U2Q==
   dependencies:
     inherits "^2.0.1"
     safe-buffer "^5.0.1"
 
-ckeditor@4.x:
-  version "4.10.1"
-  resolved "https://registry.yarnpkg.com/ckeditor/-/ckeditor-4.10.1.tgz#e0230b05a5470ef070be9ab9ba444fea418ebc78"
-
-clap@^1.0.9:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/clap/-/clap-1.2.3.tgz#4f36745b32008492557f46412d66d50cb99bce51"
-  dependencies:
-    chalk "^1.1.3"
+clamp@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/clamp/-/clamp-1.0.1.tgz"
+  integrity sha1-ZqDmQBGBbjcZaCj9yMjBRzEshjQ=
 
 class-utils@^0.3.5:
   version "0.3.6"
-  resolved "https://registry.yarnpkg.com/class-utils/-/class-utils-0.3.6.tgz#f93369ae8b9a7ce02fd41faad0ca83033190c463"
+  resolved "https://registry.npmjs.org/class-utils/-/class-utils-0.3.6.tgz"
+  integrity sha512-qOhPa/Fj7s6TY8H8esGu5QNpMMQxz79h+urzrNYN6mn+9BnxlDGf5QZ+XeCDsxSjPqsSR56XOZOJmpeurnLMeg==
   dependencies:
     arr-union "^3.1.0"
     define-property "^0.2.5"
@@ -1051,208 +2570,309 @@ class-utils@^0.3.5:
     static-extend "^0.1.1"
 
 clean-css@4.2.x:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.1.tgz#2d411ef76b8569b6d0c84068dabe85b0aa5e5c17"
+  version "4.2.3"
+  resolved "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz"
+  integrity sha512-VcMWDN54ZN/DS+g58HYL5/n4Zrqe8vHJpGA8KdgUXFU4fuP/aHNw8eld9SyEIyabIMJX/0RaY/fplOo5hYLSFA==
   dependencies:
     source-map "~0.6.0"
 
-clean-webpack-plugin@^0.1.19:
-  version "0.1.19"
-  resolved "https://registry.yarnpkg.com/clean-webpack-plugin/-/clean-webpack-plugin-0.1.19.tgz#ceda8bb96b00fe168e9b080272960d20fdcadd6d"
+clean-stack@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz"
+  integrity sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==
+
+clean-webpack-plugin@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/clean-webpack-plugin/-/clean-webpack-plugin-3.0.0.tgz"
+  integrity sha512-MciirUH5r+cYLGCOL5JX/ZLzOZbVr1ot3Fw+KcvbhUb6PM+yycqd9ZhIlcigQ5gl+XhppNmw3bEFuaaMNyLj3A==
   dependencies:
-    rimraf "^2.6.1"
+    "@types/webpack" "^4.4.31"
+    del "^4.1.1"
 
 cli-cursor@^2.1.0:
   version "2.1.0"
-  resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-2.1.0.tgz#b35dac376479facc3e94747d41d0d0f5238ffcb5"
+  resolved "https://registry.npmjs.org/cli-cursor/-/cli-cursor-2.1.0.tgz"
+  integrity sha1-s12sN2R5+sw+lHR9QdDQ9SOP/LU=
   dependencies:
     restore-cursor "^2.0.0"
 
-cli-spinners@^1.1.0:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/cli-spinners/-/cli-spinners-1.3.1.tgz#002c1990912d0d59580c93bd36c056de99e4259a"
+cli-spinners@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.2.0.tgz"
+  integrity sha512-tgU3fKwzYjiLEQgPMD9Jt+JjHVL9kW93FiIMX/l7rivvOD4/LL0Mf7gda3+4U2KJBloybwgj5KEoQgGRioMiKQ==
 
 cliui@^4.0.0:
   version "4.1.0"
-  resolved "https://registry.yarnpkg.com/cliui/-/cliui-4.1.0.tgz#348422dbe82d800b3022eef4f6ac10bf2e4d1b49"
+  resolved "https://registry.npmjs.org/cliui/-/cliui-4.1.0.tgz"
+  integrity sha512-4FG+RSG9DL7uEwRUZXZn3SS34DiDPfzP0VOiEwtUWlE+AR2EIg+hSyvrIgUUfhdgR/UkAeW2QHgeP+hWrXs7jQ==
   dependencies:
     string-width "^2.1.1"
     strip-ansi "^4.0.0"
     wrap-ansi "^2.0.0"
 
+cliui@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz"
+  integrity sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==
+  dependencies:
+    string-width "^3.1.0"
+    strip-ansi "^5.2.0"
+    wrap-ansi "^5.1.0"
+
+cliui@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz"
+  integrity sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==
+  dependencies:
+    string-width "^4.2.0"
+    strip-ansi "^6.0.0"
+    wrap-ansi "^6.2.0"
+
 clone@^1.0.2:
   version "1.0.4"
-  resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
+  resolved "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz"
+  integrity sha1-2jCcwmPfFZlMaIypAheco8fNfH4=
 
-clone@^2.1.1, clone@^2.1.2:
+clone@^2.1.2:
   version "2.1.2"
-  resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f"
+  resolved "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz"
+  integrity sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=
 
 co@^4.6.0:
   version "4.6.0"
-  resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
+  resolved "https://registry.npmjs.org/co/-/co-4.6.0.tgz"
+  integrity sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=
 
-coa@~1.0.1:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/coa/-/coa-1.0.4.tgz#a9ef153660d6a86a8bdec0289a5c684d217432fd"
+coa@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.npmjs.org/coa/-/coa-2.0.2.tgz"
+  integrity sha512-q5/jG+YQnSy4nRTV4F7lPepBJZ8qBNJJDBuJdoejDyLXgmL7IEo+Le2JDZudFTFt7mrCqIRaSjws4ygRCTCAXA==
   dependencies:
+    "@types/q" "^1.5.1"
+    chalk "^2.4.1"
     q "^1.1.2"
 
 code-point-at@^1.0.0:
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
+  resolved "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz"
+  integrity sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=
+
+collect-v8-coverage@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz"
+  integrity sha512-iBPtljfCNcTKNAto0KEtDfZ3qzjJvqE3aTGZsbhjSBlorqpXJlaWWtPO35D+ZImoC3KWejX64o+yPGxhWSTzfg==
 
 collection-visit@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/collection-visit/-/collection-visit-1.0.0.tgz#4bc0373c164bc3291b4d368c829cf1a80a59dca0"
+  resolved "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz"
+  integrity sha1-S8A3PBZLwykbTTaMgpzxqApZ3KA=
   dependencies:
     map-visit "^1.0.0"
     object-visit "^1.0.0"
 
-color-convert@^1.3.0, color-convert@^1.9.0:
+color-convert@^1.9.0, color-convert@^1.9.1:
   version "1.9.3"
-  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
+  resolved "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz"
+  integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
   dependencies:
     color-name "1.1.3"
 
+color-convert@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz"
+  integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==
+  dependencies:
+    color-name "~1.1.4"
+
 color-name@1.1.3:
   version "1.1.3"
-  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
+  resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz"
+  integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
 
-color-name@^1.0.0:
+color-name@^1.0.0, color-name@~1.1.4:
   version "1.1.4"
-  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
+  resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz"
+  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
-color-string@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/color-string/-/color-string-0.3.0.tgz#27d46fb67025c5c2fa25993bfbf579e47841b991"
+color-parse@^1.3.8:
+  version "1.3.8"
+  resolved "https://registry.npmjs.org/color-parse/-/color-parse-1.3.8.tgz"
+  integrity sha512-1Y79qFv0n1xair3lNMTNeoFvmc3nirMVBij24zbs1f13+7fPpQClMg5b4AuKXLt3szj7BRlHMCXHplkce6XlmA==
   dependencies:
     color-name "^1.0.0"
+    defined "^1.0.0"
+    is-plain-obj "^1.1.0"
 
-color@^0.11.0:
-  version "0.11.4"
-  resolved "http://registry.npmjs.org/color/-/color-0.11.4.tgz#6d7b5c74fb65e841cd48792ad1ed5e07b904d764"
+color-rgba@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.npmjs.org/color-rgba/-/color-rgba-2.1.1.tgz"
+  integrity sha512-VaX97wsqrMwLSOR6H7rU1Doa2zyVdmShabKrPEIFywLlHoibgD3QW9Dw6fSqM4+H/LfjprDNAUUW31qEQcGzNw==
   dependencies:
-    clone "^1.0.2"
-    color-convert "^1.3.0"
-    color-string "^0.3.0"
+    clamp "^1.0.1"
+    color-parse "^1.3.8"
+    color-space "^1.14.6"
 
-colormin@^1.0.5:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/colormin/-/colormin-1.1.2.tgz#ea2f7420a72b96881a38aae59ec124a6f7298133"
+color-space@^1.14.6:
+  version "1.16.0"
+  resolved "https://registry.npmjs.org/color-space/-/color-space-1.16.0.tgz"
+  integrity sha512-A6WMiFzunQ8KEPFmj02OnnoUnqhmSaHaZ/0LVFcPTdlvm8+3aMJ5x1HRHy3bDHPkovkf4sS0f4wsVvwk71fKkg==
   dependencies:
-    color "^0.11.0"
-    css-color-names "0.0.4"
-    has "^1.0.1"
+    hsluv "^0.0.3"
+    mumath "^3.3.4"
 
-colors@~1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/colors/-/colors-1.1.2.tgz#168a4701756b6a7f51a12ce0c97bfa28c084ed63"
+color-string@^1.5.2:
+  version "1.5.3"
+  resolved "https://registry.npmjs.org/color-string/-/color-string-1.5.3.tgz"
+  integrity sha512-dC2C5qeWoYkxki5UAXapdjqO672AM4vZuPGRQfO8b5HKuKGBbKWpITyDYN7TOFKvRW7kOgAn3746clDBMDJyQw==
+  dependencies:
+    color-name "^1.0.0"
+    simple-swizzle "^0.2.2"
 
-combined-stream@^1.0.6, combined-stream@~1.0.6:
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.7.tgz#2d1d24317afb8abe95d6d2c0b07b57813539d828"
+color@^3.0.0:
+  version "3.1.2"
+  resolved "https://registry.npmjs.org/color/-/color-3.1.2.tgz"
+  integrity sha512-vXTJhHebByxZn3lDvDJYw4lR5+uB3vuoHsuYA5AKuxRVn5wzzIfQKGLBmgdVRHKTJYeK5rvJcHnrd0Li49CFpg==
+  dependencies:
+    color-convert "^1.9.1"
+    color-string "^1.5.2"
+
+colorette@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.npmjs.org/colorette/-/colorette-1.2.2.tgz"
+  integrity sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==
+
+combined-stream@^1.0.6, combined-stream@^1.0.8, combined-stream@~1.0.6:
+  version "1.0.8"
+  resolved "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz"
+  integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
   dependencies:
     delayed-stream "~1.0.0"
 
-commander@2, commander@^2.12.1:
-  version "2.19.0"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.19.0.tgz#f6198aa84e5b83c46054b94ddedbfed5ee9ff12a"
+commander@2, commander@^2.12.1, commander@^2.20.0:
+  version "2.20.3"
+  resolved "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz"
+  integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
 
-commander@2.17.x, commander@~2.17.1:
+commander@2.17.x:
   version "2.17.1"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.17.1.tgz#bd77ab7de6de94205ceacc72f1716d29f20a77bf"
+  resolved "https://registry.npmjs.org/commander/-/commander-2.17.1.tgz"
+  integrity sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg==
 
-commander@~2.13.0:
-  version "2.13.0"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.13.0.tgz#6964bca67685df7c1f1430c584f07d7597885b9c"
+commander@^6.2.0:
+  version "6.2.1"
+  resolved "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz"
+  integrity sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==
+
+commander@~2.19.0:
+  version "2.19.0"
+  resolved "https://registry.npmjs.org/commander/-/commander-2.19.0.tgz"
+  integrity sha512-6tvAOO+D6OENvRAh524Dh9jcfKTYDQAqvqezbCW82xj5X0pSrcpxtvRKHLG0yBY6SD7PSDrJaj+0AiOcKVd1Xg==
 
 commondir@^1.0.1:
   version "1.0.1"
-  resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
+  resolved "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz"
+  integrity sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=
 
 component-emitter@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.2.1.tgz#137918d6d78283f7df7a6b7c5a63e140e69425e6"
+  version "1.3.0"
+  resolved "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz"
+  integrity sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==
 
-compressible@~2.0.14:
-  version "2.0.15"
-  resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.15.tgz#857a9ab0a7e5a07d8d837ed43fe2defff64fe212"
+compressible@~2.0.16:
+  version "2.0.18"
+  resolved "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz"
+  integrity sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==
   dependencies:
-    mime-db ">= 1.36.0 < 2"
+    mime-db ">= 1.43.0 < 2"
 
-compression-webpack-plugin@^1.1.8:
-  version "1.1.12"
-  resolved "https://registry.yarnpkg.com/compression-webpack-plugin/-/compression-webpack-plugin-1.1.12.tgz#becd2aec620ace96bb3fe9a42a55cf48acc8b4d4"
+compression-webpack-plugin@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/compression-webpack-plugin/-/compression-webpack-plugin-3.1.0.tgz"
+  integrity sha512-iqTHj3rADN4yHwXMBrQa/xrncex/uEQy8QHlaTKxGchT/hC0SdlJlmL/5eRqffmWq2ep0/Romw6Ld39JjTR/ug==
   dependencies:
-    cacache "^10.0.1"
-    find-cache-dir "^1.0.0"
+    cacache "^13.0.1"
+    find-cache-dir "^3.0.0"
     neo-async "^2.5.0"
-    serialize-javascript "^1.4.0"
+    schema-utils "^2.6.1"
+    serialize-javascript "^2.1.2"
     webpack-sources "^1.0.1"
 
-compression@^1.5.2:
-  version "1.7.3"
-  resolved "https://registry.yarnpkg.com/compression/-/compression-1.7.3.tgz#27e0e176aaf260f7f2c2813c3e440adb9f1993db"
+compression@^1.7.4:
+  version "1.7.4"
+  resolved "https://registry.npmjs.org/compression/-/compression-1.7.4.tgz"
+  integrity sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ==
   dependencies:
     accepts "~1.3.5"
     bytes "3.0.0"
-    compressible "~2.0.14"
+    compressible "~2.0.16"
     debug "2.6.9"
-    on-headers "~1.0.1"
+    on-headers "~1.0.2"
     safe-buffer "5.1.2"
     vary "~1.1.2"
 
 concat-map@0.0.1:
   version "0.0.1"
-  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
+  resolved "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz"
+  integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=
 
 concat-stream@^1.5.0:
   version "1.6.2"
-  resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.2.tgz#904bdf194cd3122fc675c77fc4ac3d4ff0fd1a34"
+  resolved "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz"
+  integrity sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==
   dependencies:
     buffer-from "^1.0.0"
     inherits "^2.0.3"
     readable-stream "^2.2.2"
     typedarray "^0.0.6"
 
-connect-history-api-fallback@^1.3.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/connect-history-api-fallback/-/connect-history-api-fallback-1.5.0.tgz#b06873934bc5e344fef611a196a6faae0aee015a"
+connect-history-api-fallback@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.npmjs.org/connect-history-api-fallback/-/connect-history-api-fallback-1.6.0.tgz"
+  integrity sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg==
 
 console-browserify@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/console-browserify/-/console-browserify-1.1.0.tgz#f0241c45730a9fc6323b206dbf38edc741d0bb10"
-  dependencies:
-    date-now "^0.1.4"
-
-console-control-strings@^1.0.0, console-control-strings@~1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e"
+  version "1.2.0"
+  resolved "https://registry.npmjs.org/console-browserify/-/console-browserify-1.2.0.tgz"
+  integrity sha512-ZMkYO/LkF17QvCPqM0gxw8yUzigAOZOSWSHg91FH6orS7vcEj5dVZTidN2fQ14yBSdg97RqhSNwLUXInd52OTA==
 
 constants-browserify@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-1.0.0.tgz#c20b96d8c617748aaf1c16021760cd27fcb8cb75"
+  resolved "https://registry.npmjs.org/constants-browserify/-/constants-browserify-1.0.0.tgz"
+  integrity sha1-wguW2MYXdIqvHBYCF2DNJ/y4y3U=
 
-content-disposition@0.5.2:
-  version "0.5.2"
-  resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.2.tgz#0cf68bb9ddf5f2be7961c3a85178cb85dba78cb4"
+content-disposition@0.5.3:
+  version "0.5.3"
+  resolved "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.3.tgz"
+  integrity sha512-ExO0774ikEObIAEV9kDo50o+79VCUdEB6n6lzKgGwupcVeRlhrj3qGAfwq8G6uBJjkqLrhT0qEYFcWng8z1z0g==
+  dependencies:
+    safe-buffer "5.1.2"
 
 content-type@~1.0.4:
   version "1.0.4"
-  resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
+  resolved "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz"
+  integrity sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==
+
+convert-source-map@^1.4.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.7.0.tgz"
+  integrity sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==
+  dependencies:
+    safe-buffer "~5.1.1"
 
 cookie-signature@1.0.6:
   version "1.0.6"
-  resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
+  resolved "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz"
+  integrity sha1-4wOogrNCzD7oylE6eZmXNNqzriw=
 
-cookie@0.3.1:
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.3.1.tgz#e7e0a1f9ef43b4c8ba925c5c5a96e806d16873bb"
+cookie@0.4.0:
+  version "0.4.0"
+  resolved "https://registry.npmjs.org/cookie/-/cookie-0.4.0.tgz"
+  integrity sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg==
 
 copy-concurrently@^1.0.0:
   version "1.0.5"
-  resolved "https://registry.yarnpkg.com/copy-concurrently/-/copy-concurrently-1.0.5.tgz#92297398cae34937fcafd6ec8139c18051f0b5e0"
+  resolved "https://registry.npmjs.org/copy-concurrently/-/copy-concurrently-1.0.5.tgz"
+  integrity sha512-f2domd9fsVDFtaFcbaRZuYXwtdmnzqbADSwhSWYxYB/Q8zsdUUFMXVRwXGDMWmbEzAn1kdRrtI1T/KTFOL4X2A==
   dependencies:
     aproba "^1.1.1"
     fs-write-stream-atomic "^1.0.8"
@@ -1263,44 +2883,59 @@ copy-concurrently@^1.0.0:
 
 copy-descriptor@^0.1.0:
   version "0.1.1"
-  resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
+  resolved "https://registry.npmjs.org/copy-descriptor/-/copy-descriptor-0.1.1.tgz"
+  integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
 
-copy-webpack-plugin@^4.4.2:
-  version "4.5.4"
-  resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-4.5.4.tgz#f2b2782b3cd5225535c3dc166a80067e7d940f27"
+copy-webpack-plugin@^5.0.3:
+  version "5.1.1"
+  resolved "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-5.1.1.tgz"
+  integrity sha512-P15M5ZC8dyCjQHWwd4Ia/dm0SgVvZJMYeykVIVYXbGyqO4dWB5oyPHp9i7wjwo5LhtlhKbiBCdS2NvM07Wlybg==
   dependencies:
-    cacache "^10.0.4"
-    find-cache-dir "^1.0.0"
+    cacache "^12.0.3"
+    find-cache-dir "^2.1.0"
+    glob-parent "^3.1.0"
     globby "^7.1.1"
-    is-glob "^4.0.0"
-    loader-utils "^1.1.0"
+    is-glob "^4.0.1"
+    loader-utils "^1.2.3"
     minimatch "^3.0.4"
-    p-limit "^1.0.0"
-    serialize-javascript "^1.4.0"
+    normalize-path "^3.0.0"
+    p-limit "^2.2.1"
+    schema-utils "^1.0.0"
+    serialize-javascript "^2.1.2"
+    webpack-log "^2.0.0"
+
+core-js@^3.6.5:
+  version "3.8.1"
+  resolved "https://registry.npmjs.org/core-js/-/core-js-3.8.1.tgz"
+  integrity sha512-9Id2xHY1W7m8hCl8NkhQn5CufmF/WuR30BTRewvCXc1aZd3kMECwNZ69ndLbekKfakw9Rf2Xyc+QR6E7Gg+obg==
 
 core-util-is@1.0.2, core-util-is@~1.0.0:
   version "1.0.2"
-  resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
+  resolved "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz"
+  integrity sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=
 
-cosmiconfig@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-4.0.0.tgz#760391549580bbd2df1e562bc177b13c290972dc"
+cosmiconfig@^5.0.0:
+  version "5.2.1"
+  resolved "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-5.2.1.tgz"
+  integrity sha512-H65gsXo1SKjf8zmrJ67eJk8aIRKV5ff2D4uKZIBZShbhGSpEmsQOPW/SKMKYhSTrqR7ufy6RP69rPogdaPh/kA==
   dependencies:
+    import-fresh "^2.0.0"
     is-directory "^0.3.1"
-    js-yaml "^3.9.0"
+    js-yaml "^3.13.1"
     parse-json "^4.0.0"
-    require-from-string "^2.0.1"
 
 create-ecdh@^4.0.0:
   version "4.0.3"
-  resolved "https://registry.yarnpkg.com/create-ecdh/-/create-ecdh-4.0.3.tgz#c9111b6f33045c4697f144787f9254cdc77c45ff"
+  resolved "https://registry.npmjs.org/create-ecdh/-/create-ecdh-4.0.3.tgz"
+  integrity sha512-GbEHQPMOswGpKXM9kCWVrremUcBmjteUaQ01T9rkKCPDXfUHX0IoP9LpHYo2NPFampa4e+/pFDc3jQdxrxQLaw==
   dependencies:
     bn.js "^4.1.0"
     elliptic "^6.0.0"
 
 create-hash@^1.1.0, create-hash@^1.1.2:
   version "1.2.0"
-  resolved "http://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz#889078af11a63756bcfb59bd221996be3a9ef196"
+  resolved "https://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz"
+  integrity sha512-z00bCGNHDG8mHAkP7CtT1qVu+bFQUPjYq/4Iv3C3kWjTFV10zIjfSoeqXo9Asws8gwSHDGj/hl2u4OGIjapeCg==
   dependencies:
     cipher-base "^1.0.1"
     inherits "^2.0.1"
@@ -1310,7 +2945,8 @@ create-hash@^1.1.0, create-hash@^1.1.2:
 
 create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
   version "1.1.7"
-  resolved "http://registry.npmjs.org/create-hmac/-/create-hmac-1.1.7.tgz#69170c78b3ab957147b2b8b04572e47ead2243ff"
+  resolved "https://registry.npmjs.org/create-hmac/-/create-hmac-1.1.7.tgz"
+  integrity sha512-MJG9liiZ+ogc4TzUwuvbER1JRdgvUFSB5+VR/g5h82fGaIRWMWddtKBHi7/sVhfjQZ6SehlyhvQYrcYkaUIpLg==
   dependencies:
     cipher-base "^1.0.3"
     create-hash "^1.1.0"
@@ -1320,15 +2956,16 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
     sha.js "^2.4.8"
 
 cross-env@^5.1.4:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-5.2.0.tgz#6ecd4c015d5773e614039ee529076669b9d126f2"
+  version "5.2.1"
+  resolved "https://registry.npmjs.org/cross-env/-/cross-env-5.2.1.tgz"
+  integrity sha512-1yHhtcfAd1r4nwQgknowuUNfIT9E8dOMMspC36g45dN+iD1blloi7xp8X/xAIDnjHWyt1uQ8PHk2fkNaym7soQ==
   dependencies:
     cross-spawn "^6.0.5"
-    is-windows "^1.0.0"
 
-cross-spawn@^6.0.0, cross-spawn@^6.0.5:
+cross-spawn@6.0.5, cross-spawn@^6.0.0, cross-spawn@^6.0.5:
   version "6.0.5"
-  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
+  resolved "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz"
+  integrity sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==
   dependencies:
     nice-try "^1.0.4"
     path-key "^2.0.1"
@@ -1336,13 +2973,24 @@ cross-spawn@^6.0.0, cross-spawn@^6.0.5:
     shebang-command "^1.2.0"
     which "^1.2.9"
 
+cross-spawn@^7.0.0:
+  version "7.0.3"
+  resolved "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz"
+  integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
+  dependencies:
+    path-key "^3.1.0"
+    shebang-command "^2.0.0"
+    which "^2.0.1"
+
 crypt@~0.0.1:
   version "0.0.2"
-  resolved "https://registry.yarnpkg.com/crypt/-/crypt-0.0.2.tgz#88d7ff7ec0dfb86f713dc87bbb42d044d3e6c41b"
+  resolved "https://registry.npmjs.org/crypt/-/crypt-0.0.2.tgz"
+  integrity sha1-iNf/fsDfuG9xPch7u0LQRNPmxBs=
 
 crypto-browserify@^3.11.0:
   version "3.12.0"
-  resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.12.0.tgz#396cf9f3137f03e4b8e532c58f698254e00f80ec"
+  resolved "https://registry.npmjs.org/crypto-browserify/-/crypto-browserify-3.12.0.tgz"
+  integrity sha512-fz4spIh+znjO2VjL+IdhEpRJ3YN6sMzITSBijk6FK2UvTqruSQW+/cCZTSNsMiZNvUeq0CqurF+dAbyiGOY6Wg==
   dependencies:
     browserify-cipher "^1.0.0"
     browserify-sign "^4.0.0"
@@ -1356,113 +3004,206 @@ crypto-browserify@^3.11.0:
     randombytes "^2.0.0"
     randomfill "^1.0.3"
 
-css-color-names@0.0.4:
+css-color-names@0.0.4, css-color-names@^0.0.4:
   version "0.0.4"
-  resolved "http://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
+  resolved "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz"
+  integrity sha1-gIrcLnnPhHOAabZGyyDsJ762KeA=
 
-css-loader@^0.28.11:
-  version "0.28.11"
-  resolved "http://registry.npmjs.org/css-loader/-/css-loader-0.28.11.tgz#c3f9864a700be2711bb5a2462b2389b1a392dab7"
-  dependencies:
-    babel-code-frame "^6.26.0"
-    css-selector-tokenizer "^0.7.0"
-    cssnano "^3.10.0"
-    icss-utils "^2.1.0"
-    loader-utils "^1.0.2"
-    lodash.camelcase "^4.3.0"
-    object-assign "^4.1.1"
-    postcss "^5.0.6"
-    postcss-modules-extract-imports "^1.2.0"
-    postcss-modules-local-by-default "^1.2.0"
-    postcss-modules-scope "^1.1.0"
-    postcss-modules-values "^1.3.0"
-    postcss-value-parser "^3.3.0"
-    source-list-map "^2.0.0"
+css-declaration-sorter@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-4.0.1.tgz"
+  integrity sha512-BcxQSKTSEEQUftYpBVnsH4SF05NTuBokb19/sBt6asXGKZ/6VP7PLG1CBCkFDYOnhXhPh0jMhO6xZ71oYHXHBA==
+  dependencies:
+    postcss "^7.0.1"
+    timsort "^0.3.0"
+
+css-loader@^3.0.0:
+  version "3.4.2"
+  resolved "https://registry.npmjs.org/css-loader/-/css-loader-3.4.2.tgz"
+  integrity sha512-jYq4zdZT0oS0Iykt+fqnzVLRIeiPWhka+7BqPn+oSIpWJAHak5tmB/WZrJ2a21JhCeFyNnnlroSl8c+MtVndzA==
+  dependencies:
+    camelcase "^5.3.1"
+    cssesc "^3.0.0"
+    icss-utils "^4.1.1"
+    loader-utils "^1.2.3"
+    normalize-path "^3.0.0"
+    postcss "^7.0.23"
+    postcss-modules-extract-imports "^2.0.0"
+    postcss-modules-local-by-default "^3.0.2"
+    postcss-modules-scope "^2.1.1"
+    postcss-modules-values "^3.0.0"
+    postcss-value-parser "^4.0.2"
+    schema-utils "^2.6.0"
+
+css-select-base-adapter@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz"
+  integrity sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==
 
 css-select@^1.1.0:
   version "1.2.0"
-  resolved "http://registry.npmjs.org/css-select/-/css-select-1.2.0.tgz#2b3a110539c5355f1cd8d314623e870b121ec858"
+  resolved "https://registry.npmjs.org/css-select/-/css-select-1.2.0.tgz"
+  integrity sha1-KzoRBTnFNV8c2NMUYj6HCxIeyFg=
   dependencies:
     boolbase "~1.0.0"
     css-what "2.1"
     domutils "1.5.1"
     nth-check "~1.0.1"
 
-css-selector-tokenizer@^0.7.0:
-  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.7.0.tgz#e6988474ae8c953477bf5e7efecfceccd9cf4c86"
+css-select@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/css-select/-/css-select-2.1.0.tgz"
+  integrity sha512-Dqk7LQKpwLoH3VovzZnkzegqNSuAziQyNZUcrdDM401iY+R5NkGBXGmtO05/yaXQziALuPogeG0b7UAgjnTJTQ==
+  dependencies:
+    boolbase "^1.0.0"
+    css-what "^3.2.1"
+    domutils "^1.7.0"
+    nth-check "^1.0.2"
+
+css-tree@1.0.0-alpha.37:
+  version "1.0.0-alpha.37"
+  resolved "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz"
+  integrity sha512-DMxWJg0rnz7UgxKT0Q1HU/L9BeJI0M6ksor0OgqOnF+aRCDWg/N2641HmVyU9KVIu0OVVWOb2IpC9A+BJRnejg==
   dependencies:
-    cssesc "^0.1.0"
-    fastparse "^1.1.1"
-    regexpu-core "^1.0.0"
+    mdn-data "2.0.4"
+    source-map "^0.6.1"
 
 css-what@2.1:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.2.tgz#c0876d9d0480927d7d4920dcd72af3595649554d"
+  version "2.1.3"
+  resolved "https://registry.npmjs.org/css-what/-/css-what-2.1.3.tgz"
+  integrity sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg==
 
-cssesc@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-0.1.0.tgz#c814903e45623371a0477b40109aaafbeeaddbb4"
+css-what@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.npmjs.org/css-what/-/css-what-3.2.1.tgz"
+  integrity sha512-WwOrosiQTvyms+Ti5ZC5vGEK0Vod3FTt1ca+payZqvKuGJF+dq7bG63DstxtN0dpm6FxY27a/zS3Wten+gEtGw==
+
+cssesc@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz"
+  integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
+
+cssnano-preset-default@^4.0.7:
+  version "4.0.7"
+  resolved "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-4.0.7.tgz"
+  integrity sha512-x0YHHx2h6p0fCl1zY9L9roD7rnlltugGu7zXSKQx6k2rYw0Hi3IqxcoAGF7u9Q5w1nt7vK0ulxV8Lo+EvllGsA==
+  dependencies:
+    css-declaration-sorter "^4.0.1"
+    cssnano-util-raw-cache "^4.0.1"
+    postcss "^7.0.0"
+    postcss-calc "^7.0.1"
+    postcss-colormin "^4.0.3"
+    postcss-convert-values "^4.0.1"
+    postcss-discard-comments "^4.0.2"
+    postcss-discard-duplicates "^4.0.2"
+    postcss-discard-empty "^4.0.1"
+    postcss-discard-overridden "^4.0.1"
+    postcss-merge-longhand "^4.0.11"
+    postcss-merge-rules "^4.0.3"
+    postcss-minify-font-values "^4.0.2"
+    postcss-minify-gradients "^4.0.2"
+    postcss-minify-params "^4.0.2"
+    postcss-minify-selectors "^4.0.2"
+    postcss-normalize-charset "^4.0.1"
+    postcss-normalize-display-values "^4.0.2"
+    postcss-normalize-positions "^4.0.2"
+    postcss-normalize-repeat-style "^4.0.2"
+    postcss-normalize-string "^4.0.2"
+    postcss-normalize-timing-functions "^4.0.2"
+    postcss-normalize-unicode "^4.0.1"
+    postcss-normalize-url "^4.0.1"
+    postcss-normalize-whitespace "^4.0.2"
+    postcss-ordered-values "^4.1.2"
+    postcss-reduce-initial "^4.0.3"
+    postcss-reduce-transforms "^4.0.2"
+    postcss-svgo "^4.0.2"
+    postcss-unique-selectors "^4.0.1"
+
+cssnano-util-get-arguments@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/cssnano-util-get-arguments/-/cssnano-util-get-arguments-4.0.0.tgz"
+  integrity sha1-7ToIKZ8h11dBsg87gfGU7UnMFQ8=
+
+cssnano-util-get-match@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/cssnano-util-get-match/-/cssnano-util-get-match-4.0.0.tgz"
+  integrity sha1-wOTKB/U4a7F+xeUiULT1lhNlFW0=
+
+cssnano-util-raw-cache@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.npmjs.org/cssnano-util-raw-cache/-/cssnano-util-raw-cache-4.0.1.tgz"
+  integrity sha512-qLuYtWK2b2Dy55I8ZX3ky1Z16WYsx544Q0UWViebptpwn/xDBmog2TLg4f+DBMg1rJ6JDWtn96WHbOKDWt1WQA==
+  dependencies:
+    postcss "^7.0.0"
+
+cssnano-util-same-parent@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.npmjs.org/cssnano-util-same-parent/-/cssnano-util-same-parent-4.0.1.tgz"
+  integrity sha512-WcKx5OY+KoSIAxBW6UBBRay1U6vkYheCdjyVNDm85zt5K9mHoGOfsOsqIszfAqrQQFIIKgjh2+FDgIj/zsl21Q==
 
-cssnano@^3.10.0:
-  version "3.10.0"
-  resolved "http://registry.npmjs.org/cssnano/-/cssnano-3.10.0.tgz#4f38f6cea2b9b17fa01490f23f1dc68ea65c1c38"
+cssnano@^4.1.10:
+  version "4.1.10"
+  resolved "https://registry.npmjs.org/cssnano/-/cssnano-4.1.10.tgz"
+  integrity sha512-5wny+F6H4/8RgNlaqab4ktc3e0/blKutmq8yNlBFXA//nSFFAqAngjNVRzUvCgYROULmZZUoosL/KSoZo5aUaQ==
   dependencies:
-    autoprefixer "^6.3.1"
-    decamelize "^1.1.2"
-    defined "^1.0.0"
-    has "^1.0.1"
-    object-assign "^4.0.1"
-    postcss "^5.0.14"
-    postcss-calc "^5.2.0"
-    postcss-colormin "^2.1.8"
-    postcss-convert-values "^2.3.4"
-    postcss-discard-comments "^2.0.4"
-    postcss-discard-duplicates "^2.0.1"
-    postcss-discard-empty "^2.0.1"
-    postcss-discard-overridden "^0.1.1"
-    postcss-discard-unused "^2.2.1"
-    postcss-filter-plugins "^2.0.0"
-    postcss-merge-idents "^2.1.5"
-    postcss-merge-longhand "^2.0.1"
-    postcss-merge-rules "^2.0.3"
-    postcss-minify-font-values "^1.0.2"
-    postcss-minify-gradients "^1.0.1"
-    postcss-minify-params "^1.0.4"
-    postcss-minify-selectors "^2.0.4"
-    postcss-normalize-charset "^1.1.0"
-    postcss-normalize-url "^3.0.7"
-    postcss-ordered-values "^2.1.0"
-    postcss-reduce-idents "^2.2.2"
-    postcss-reduce-initial "^1.0.0"
-    postcss-reduce-transforms "^1.0.3"
-    postcss-svgo "^2.1.1"
-    postcss-unique-selectors "^2.0.2"
-    postcss-value-parser "^3.2.3"
-    postcss-zindex "^2.0.1"
-
-csso@~2.3.1:
-  version "2.3.2"
-  resolved "https://registry.yarnpkg.com/csso/-/csso-2.3.2.tgz#ddd52c587033f49e94b71fc55569f252e8ff5f85"
+    cosmiconfig "^5.0.0"
+    cssnano-preset-default "^4.0.7"
+    is-resolvable "^1.0.0"
+    postcss "^7.0.0"
+
+csso@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.npmjs.org/csso/-/csso-4.0.2.tgz"
+  integrity sha512-kS7/oeNVXkHWxby5tHVxlhjizRCSv8QdU7hB2FpdAibDU8FjTAolhNjKNTiLzXtUrKT6HwClE81yXwEk1309wg==
   dependencies:
-    clap "^1.0.9"
-    source-map "^0.5.3"
+    css-tree "1.0.0-alpha.37"
 
-cyclist@~0.2.2:
-  version "0.2.2"
-  resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-0.2.2.tgz#1b33792e11e914a2fd6d6ed6447464444e5fa640"
+cssom@^0.4.4:
+  version "0.4.4"
+  resolved "https://registry.npmjs.org/cssom/-/cssom-0.4.4.tgz"
+  integrity sha512-p3pvU7r1MyyqbTk+WbNJIgJjG2VmTIaB10rI93LzVPrmDJKkzKYMtxxyAvQXR/NS6otuzveI7+7BBq3SjBS2mw==
+
+cssom@~0.3.6:
+  version "0.3.8"
+  resolved "https://registry.npmjs.org/cssom/-/cssom-0.3.8.tgz"
+  integrity sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==
+
+cssstyle@^2.2.0:
+  version "2.3.0"
+  resolved "https://registry.npmjs.org/cssstyle/-/cssstyle-2.3.0.tgz"
+  integrity sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==
+  dependencies:
+    cssom "~0.3.6"
+
+csstype@^3.0.2:
+  version "3.0.5"
+  resolved "https://registry.npmjs.org/csstype/-/csstype-3.0.5.tgz"
+  integrity sha512-uVDi8LpBUKQj6sdxNaTetL6FpeCqTjOvAQuQUa/qAqq8oOd4ivkbhgnqayl0dnPal8Tb/yB1tF+gOvCBiicaiQ==
+
+cyclist@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz"
+  integrity sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=
 
 d3-array@1, d3-array@^1.1.1, d3-array@^1.2.0:
   version "1.2.4"
-  resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-1.2.4.tgz#635ce4d5eea759f6f605863dbcfc30edc737f71f"
+  resolved "https://registry.npmjs.org/d3-array/-/d3-array-1.2.4.tgz"
+  integrity sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw==
+
+d3-array@^2.3.0:
+  version "2.8.0"
+  resolved "https://registry.npmjs.org/d3-array/-/d3-array-2.8.0.tgz"
+  integrity sha512-6V272gsOeg7+9pTW1jSYOR1QE37g95I3my1hBmY+vOUNHRrk9yt4OTz/gK7PMkVAVDrYYq4mq3grTiZ8iJdNIw==
 
 d3-axis@1:
   version "1.0.12"
-  resolved "https://registry.yarnpkg.com/d3-axis/-/d3-axis-1.0.12.tgz#cdf20ba210cfbb43795af33756886fb3638daac9"
+  resolved "https://registry.npmjs.org/d3-axis/-/d3-axis-1.0.12.tgz"
+  integrity sha512-ejINPfPSNdGFKEOAtnBtdkpr24c4d4jsei6Lg98mxf424ivoDP2956/5HDpIAtmHo85lqT4pruy+zEgvRUBqaQ==
 
 d3-brush@1:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/d3-brush/-/d3-brush-1.0.6.tgz#33691f2032d9db6c5d8cb684ff255a9883629e21"
+  version "1.1.6"
+  resolved "https://registry.npmjs.org/d3-brush/-/d3-brush-1.1.6.tgz"
+  integrity sha512-7RW+w7HfMCPyZLifTz/UnJmI5kdkXtpCbombUSs8xniAyo0vIbrDzDwUJB6eJOgl9u5DQOt2TQlYumxzD1SvYA==
   dependencies:
     d3-dispatch "1"
     d3-drag "1"
@@ -1472,57 +3213,79 @@ d3-brush@1:
 
 d3-chord@1:
   version "1.0.6"
-  resolved "https://registry.yarnpkg.com/d3-chord/-/d3-chord-1.0.6.tgz#309157e3f2db2c752f0280fedd35f2067ccbb15f"
+  resolved "https://registry.npmjs.org/d3-chord/-/d3-chord-1.0.6.tgz"
+  integrity sha512-JXA2Dro1Fxw9rJe33Uv+Ckr5IrAa74TlfDEhE/jfLOaXegMQFQTAgAw9WnZL8+HxVBRXaRGCkrNU7pJeylRIuA==
   dependencies:
     d3-array "1"
     d3-path "1"
 
 d3-collection@1:
   version "1.0.7"
-  resolved "https://registry.yarnpkg.com/d3-collection/-/d3-collection-1.0.7.tgz#349bd2aa9977db071091c13144d5e4f16b5b310e"
+  resolved "https://registry.npmjs.org/d3-collection/-/d3-collection-1.0.7.tgz"
+  integrity sha512-ii0/r5f4sjKNTfh84Di+DpztYwqKhEyUlKoPrzUFfeSkWxjW49xU2QzO9qrPrNkpdI0XJkfzvmTu8V2Zylln6A==
 
 d3-color@1:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-1.2.3.tgz#6c67bb2af6df3cc8d79efcc4d3a3e83e28c8048f"
+  version "1.4.1"
+  resolved "https://registry.npmjs.org/d3-color/-/d3-color-1.4.1.tgz"
+  integrity sha512-p2sTHSLCJI2QKunbGb7ocOh7DgTAn8IrLx21QRc/BSnodXM4sv6aLQlnfpvehFMLZEfBc6g9pH9SWQccFYfJ9Q==
+
+"d3-color@1 - 2":
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/d3-color/-/d3-color-2.0.0.tgz"
+  integrity sha512-SPXi0TSKPD4g9tw0NMZFnR95XVgUZiBH+uUTqQuDu1OsE2zomHU7ho0FISciaPvosimixwHFl3WHLGabv6dDgQ==
 
 d3-contour@1:
   version "1.3.2"
-  resolved "https://registry.yarnpkg.com/d3-contour/-/d3-contour-1.3.2.tgz#652aacd500d2264cb3423cee10db69f6f59bead3"
+  resolved "https://registry.npmjs.org/d3-contour/-/d3-contour-1.3.2.tgz"
+  integrity sha512-hoPp4K/rJCu0ladiH6zmJUEz6+u3lgR+GSm/QdM2BBvDraU39Vr7YdDCicJcxP1z8i9B/2dJLgDC1NcvlF8WCg==
   dependencies:
     d3-array "^1.1.1"
 
 d3-dispatch@1:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/d3-dispatch/-/d3-dispatch-1.0.5.tgz#e25c10a186517cd6c82dd19ea018f07e01e39015"
+  version "1.0.6"
+  resolved "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-1.0.6.tgz"
+  integrity sha512-fVjoElzjhCEy+Hbn8KygnmMS7Or0a9sI2UzGwoB7cCtvI1XpVN9GpoYlnb3xt2YV66oXYb1fLJ8GMvP4hdU1RA==
 
 d3-drag@1:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/d3-drag/-/d3-drag-1.2.3.tgz#46e206ad863ec465d88c588098a1df444cd33c64"
+  version "1.2.5"
+  resolved "https://registry.npmjs.org/d3-drag/-/d3-drag-1.2.5.tgz"
+  integrity sha512-rD1ohlkKQwMZYkQlYVCrSFxsWPzI97+W+PaEIBNTMxRuxz9RF0Hi5nJWHGVJ3Om9d2fRTe1yOBINJyy/ahV95w==
   dependencies:
     d3-dispatch "1"
     d3-selection "1"
 
 d3-dsv@1:
-  version "1.0.10"
-  resolved "https://registry.yarnpkg.com/d3-dsv/-/d3-dsv-1.0.10.tgz#4371c489a2a654a297aca16fcaf605a6f31a6f51"
+  version "1.2.0"
+  resolved "https://registry.npmjs.org/d3-dsv/-/d3-dsv-1.2.0.tgz"
+  integrity sha512-9yVlqvZcSOMhCYzniHE7EVUws7Fa1zgw+/EAV2BxJoG3ME19V6BQFBwI855XQDsxyOuG7NibqRMTtiF/Qup46g==
   dependencies:
     commander "2"
     iconv-lite "0.4"
     rw "1"
 
 d3-ease@1:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/d3-ease/-/d3-ease-1.0.5.tgz#8ce59276d81241b1b72042d6af2d40e76d936ffb"
+  version "1.0.7"
+  resolved "https://registry.npmjs.org/d3-ease/-/d3-ease-1.0.7.tgz"
+  integrity sha512-lx14ZPYkhNx0s/2HX5sLFUI3mbasHjSSpwO/KaaNACweVwxUruKyWVcb293wMv1RqTPZyZ8kSZ2NogUZNcLOFQ==
 
 d3-fetch@1:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/d3-fetch/-/d3-fetch-1.1.2.tgz#957c8fbc6d4480599ba191b1b2518bf86b3e1be2"
+  version "1.2.0"
+  resolved "https://registry.npmjs.org/d3-fetch/-/d3-fetch-1.2.0.tgz"
+  integrity sha512-yC78NBVcd2zFAyR/HnUiBS7Lf6inSCoWcSxFfw8FYL7ydiqe80SazNwoffcqOfs95XaLo7yebsmQqDKSsXUtvA==
   dependencies:
     d3-dsv "1"
 
+d3-flextree@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.npmjs.org/d3-flextree/-/d3-flextree-2.1.1.tgz"
+  integrity sha512-P0SK6bRm0PT5ZZON8Lh/aOcFfr4rO53kaYCXCgwBCvsHJcYjtOb8fNrgmpOmCMCgfrT9EczXzD8wqEO8mlkBrA==
+  dependencies:
+    d3-hierarchy "^1.1.5"
+
 d3-force@1:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/d3-force/-/d3-force-1.1.2.tgz#16664d0ac71d8727ef5effe0b374feac8050d6cd"
+  version "1.2.1"
+  resolved "https://registry.npmjs.org/d3-force/-/d3-force-1.2.1.tgz"
+  integrity sha512-HHvehyaiUlVo5CxBJ0yF/xny4xoaxFxDnBXNvNcfW9adORGZfyNF1dj6DGLKyk4Yh3brP/1h3rnDzdIAwL08zg==
   dependencies:
     d3-collection "1"
     d3-dispatch "1"
@@ -1530,51 +3293,87 @@ d3-force@1:
     d3-timer "1"
 
 d3-format@1:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-1.3.2.tgz#6a96b5e31bcb98122a30863f7d92365c00603562"
+  version "1.4.5"
+  resolved "https://registry.npmjs.org/d3-format/-/d3-format-1.4.5.tgz"
+  integrity sha512-J0piedu6Z8iB6TbIGfZgDzfXxUFN3qQRMofy2oPdXzQibYGqPB/9iMcxr/TGalU+2RsyDO+U4f33id8tbnSRMQ==
+
+"d3-format@1 - 2":
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/d3-format/-/d3-format-2.0.0.tgz"
+  integrity sha512-Ab3S6XuE/Q+flY96HXT0jOXcM4EAClYFnRGY5zsjRGNy6qCYrQsMffs7cV5Q9xejb35zxW5hf/guKw34kvIKsA==
 
 d3-geo@1:
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/d3-geo/-/d3-geo-1.11.1.tgz#3f35e582c0d29296618b02a8ade0fdffb2c0e63c"
+  version "1.12.1"
+  resolved "https://registry.npmjs.org/d3-geo/-/d3-geo-1.12.1.tgz"
+  integrity sha512-XG4d1c/UJSEX9NfU02KwBL6BYPj8YKHxgBEw5om2ZnTRSbIcego6dhHwcxuSR3clxh0EpE38os1DVPOmnYtTPg==
   dependencies:
     d3-array "1"
 
-d3-hierarchy@1:
-  version "1.1.8"
-  resolved "https://registry.yarnpkg.com/d3-hierarchy/-/d3-hierarchy-1.1.8.tgz#7a6317bd3ed24e324641b6f1e76e978836b008cc"
+d3-hierarchy@1, d3-hierarchy@^1.1.5:
+  version "1.1.9"
+  resolved "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-1.1.9.tgz"
+  integrity sha512-j8tPxlqh1srJHAtxfvOUwKNYJkQuBFdM1+JAUfq6xqH5eAqf93L7oG1NVqDa4CpFZNvnNKtCYEUC8KY9yEn9lQ==
 
 d3-interpolate@1:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-1.3.2.tgz#417d3ebdeb4bc4efcc8fd4361c55e4040211fd68"
+  version "1.4.0"
+  resolved "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-1.4.0.tgz"
+  integrity sha512-V9znK0zc3jOPV4VD2zZn0sDhZU3WAE2bmlxdIwwQPPzPjvyLkd8B3JUVdS1IDUFDkWZ72c9qnv1GK2ZagTZ8EA==
   dependencies:
     d3-color "1"
 
+"d3-interpolate@1.2.0 - 2":
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-2.0.1.tgz"
+  integrity sha512-c5UhwwTs/yybcmTpAVqwSFl6vrQ8JZJoT5F7xNFK9pymv5C0Ymcc9/LIJHtYIggg/yS9YHw8i8O8tgb9pupjeQ==
+  dependencies:
+    d3-color "1 - 2"
+
+d3-luxon@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/d3-luxon/-/d3-luxon-1.0.2.tgz"
+  integrity sha512-9jUmUPE0X5J2OUDnWXHlrxXf+plcFXZBAlEyBQ5JEG7+Q1fkNgRSuWDh5PNm2RPONYT40qwg7JlZ3fLsYHE0zQ==
+  dependencies:
+    "@types/d3-scale" "^3.2.0"
+    d3-array "^2.3.0"
+    d3-format "1 - 2"
+    d3-interpolate "1.2.0 - 2"
+    d3-scale "^3.2.3"
+    d3-time "1 - 2"
+    d3-time-format "2 - 3"
+    luxon "^1.25.0"
+
 d3-path@1:
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-1.0.7.tgz#8de7cd693a75ac0b5480d3abaccd94793e58aae8"
+  version "1.0.9"
+  resolved "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz"
+  integrity sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==
 
 d3-polygon@1:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/d3-polygon/-/d3-polygon-1.0.5.tgz#9a645a0a64ff6cbf9efda96ee0b4a6909184c363"
+  version "1.0.6"
+  resolved "https://registry.npmjs.org/d3-polygon/-/d3-polygon-1.0.6.tgz"
+  integrity sha512-k+RF7WvI08PC8reEoXa/w2nSg5AUMTi+peBD9cmFc+0ixHfbs4QmxxkarVal1IkVkgxVuk9JSHhJURHiyHKAuQ==
 
 d3-quadtree@1:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/d3-quadtree/-/d3-quadtree-1.0.5.tgz#305394840b01f51a341a0da5008585e837fe7e9b"
+  version "1.0.7"
+  resolved "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-1.0.7.tgz"
+  integrity sha512-RKPAeXnkC59IDGD0Wu5mANy0Q2V28L+fNe65pOCXVdVuTJS3WPKaJlFHer32Rbh9gIo9qMuJXio8ra4+YmIymA==
 
 d3-random@1:
   version "1.1.2"
-  resolved "https://registry.yarnpkg.com/d3-random/-/d3-random-1.1.2.tgz#2833be7c124360bf9e2d3fd4f33847cfe6cab291"
+  resolved "https://registry.npmjs.org/d3-random/-/d3-random-1.1.2.tgz"
+  integrity sha512-6AK5BNpIFqP+cx/sreKzNjWbwZQCSUatxq+pPRmFIQaWuoD+NrbVWw7YWpHiXpCQ/NanKdtGDuB+VQcZDaEmYQ==
 
 d3-scale-chromatic@1:
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/d3-scale-chromatic/-/d3-scale-chromatic-1.3.3.tgz#dad4366f0edcb288f490128979c3c793583ed3c0"
+  version "1.5.0"
+  resolved "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-1.5.0.tgz"
+  integrity sha512-ACcL46DYImpRFMBcpk9HhtIyC7bTBR4fNOPxwVSl0LfulDAwyiHyPOTqcDG1+t5d4P9W7t/2NAuWu59aKko/cg==
   dependencies:
     d3-color "1"
     d3-interpolate "1"
 
 d3-scale@2:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/d3-scale/-/d3-scale-2.1.2.tgz#4e932b7b60182aee9073ede8764c98423e5f9a94"
+  version "2.2.2"
+  resolved "https://registry.npmjs.org/d3-scale/-/d3-scale-2.2.2.tgz"
+  integrity sha512-LbeEvGgIb8UMcAa0EATLNX0lelKWGYDQiPdHj+gLblGVhGLyNbaCn3EvrJf0A3Y/uOOU5aD6MTh5ZFCdEwGiCw==
   dependencies:
     d3-array "^1.2.0"
     d3-collection "1"
@@ -1583,33 +3382,62 @@ d3-scale@2:
     d3-time "1"
     d3-time-format "2"
 
+d3-scale@^3.2.3:
+  version "3.2.3"
+  resolved "https://registry.npmjs.org/d3-scale/-/d3-scale-3.2.3.tgz"
+  integrity sha512-8E37oWEmEzj57bHcnjPVOBS3n4jqakOeuv1EDdQSiSrYnMCBdMd3nc4HtKk7uia8DUHcY/CGuJ42xxgtEYrX0g==
+  dependencies:
+    d3-array "^2.3.0"
+    d3-format "1 - 2"
+    d3-interpolate "1.2.0 - 2"
+    d3-time "1 - 2"
+    d3-time-format "2 - 3"
+
 d3-selection@1, d3-selection@^1.1.0:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/d3-selection/-/d3-selection-1.3.2.tgz#6e70a9df60801c8af28ac24d10072d82cbfdf652"
+  version "1.4.2"
+  resolved "https://registry.npmjs.org/d3-selection/-/d3-selection-1.4.2.tgz"
+  integrity sha512-SJ0BqYihzOjDnnlfyeHT0e30k0K1+5sR3d5fNueCNeuhZTnGw4M4o8mqJchSwgKMXCNFo+e2VTChiSJ0vYtXkg==
 
 d3-shape@1:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-1.2.2.tgz#f9dba3777a5825f9a8ce8bc928da08c17679e9a7"
+  version "1.3.7"
+  resolved "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz"
+  integrity sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==
   dependencies:
     d3-path "1"
 
 d3-time-format@2:
-  version "2.1.3"
-  resolved "https://registry.yarnpkg.com/d3-time-format/-/d3-time-format-2.1.3.tgz#ae06f8e0126a9d60d6364eac5b1533ae1bac826b"
+  version "2.3.0"
+  resolved "https://registry.npmjs.org/d3-time-format/-/d3-time-format-2.3.0.tgz"
+  integrity sha512-guv6b2H37s2Uq/GefleCDtbe0XZAuy7Wa49VGkPVPMfLL9qObgBST3lEHJBMUp8S7NdLQAGIvr2KXk8Hc98iKQ==
   dependencies:
     d3-time "1"
 
+"d3-time-format@2 - 3":
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/d3-time-format/-/d3-time-format-3.0.0.tgz"
+  integrity sha512-UXJh6EKsHBTjopVqZBhFysQcoXSv/5yLONZvkQ5Kk3qbwiUYkdX17Xa1PT6U1ZWXGGfB1ey5L8dKMlFq2DO0Ag==
+  dependencies:
+    d3-time "1 - 2"
+
 d3-time@1:
-  version "1.0.10"
-  resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-1.0.10.tgz#8259dd71288d72eeacfd8de281c4bf5c7393053c"
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/d3-time/-/d3-time-1.1.0.tgz"
+  integrity sha512-Xh0isrZ5rPYYdqhAVk8VLnMEidhz5aP7htAADH6MfzgmmicPkTo8LhkLxci61/lCB7n7UmE3bN0leRt+qvkLxA==
+
+"d3-time@1 - 2":
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/d3-time/-/d3-time-2.0.0.tgz"
+  integrity sha512-2mvhstTFcMvwStWd9Tj3e6CEqtOivtD8AUiHT8ido/xmzrI9ijrUUihZ6nHuf/vsScRBonagOdj0Vv+SEL5G3Q==
 
 d3-timer@1:
-  version "1.0.9"
-  resolved "https://registry.yarnpkg.com/d3-timer/-/d3-timer-1.0.9.tgz#f7bb8c0d597d792ff7131e1c24a36dd471a471ba"
+  version "1.0.10"
+  resolved "https://registry.npmjs.org/d3-timer/-/d3-timer-1.0.10.tgz"
+  integrity sha512-B1JDm0XDaQC+uvo4DT79H0XmBskgS3l6Ve+1SBCfxgmtIb1AVrPIoqd+nPSv+loMX8szQ0sVUhGngL7D5QPiXw==
 
 d3-transition@1:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/d3-transition/-/d3-transition-1.1.3.tgz#3a435b05ce9cef9524fe0d38121cfb6905331ca6"
+  version "1.3.2"
+  resolved "https://registry.npmjs.org/d3-transition/-/d3-transition-1.3.2.tgz"
+  integrity sha512-sc0gRU4PFqZ47lPVHloMn9tlPcv8jxgOQg+0zjhfZXMQuvppjG6YuwdMBE0TuqCZjeJkLecku/l9R0JPcRhaDA==
   dependencies:
     d3-color "1"
     d3-dispatch "1"
@@ -1618,13 +3446,15 @@ d3-transition@1:
     d3-selection "^1.1.0"
     d3-timer "1"
 
-d3-voronoi@1:
+d3-voronoi@1, d3-voronoi@^1.1.4:
   version "1.1.4"
-  resolved "https://registry.yarnpkg.com/d3-voronoi/-/d3-voronoi-1.1.4.tgz#dd3c78d7653d2bb359284ae478645d95944c8297"
+  resolved "https://registry.npmjs.org/d3-voronoi/-/d3-voronoi-1.1.4.tgz"
+  integrity sha512-dArJ32hchFsrQ8uMiTBLq256MpnZjeuBtdHpaDlYuQyjU0CVzCJl/BVW+SkszaAeH95D/8gxqAhgx0ouAWAfRg==
 
 d3-zoom@1:
-  version "1.7.3"
-  resolved "https://registry.yarnpkg.com/d3-zoom/-/d3-zoom-1.7.3.tgz#f444effdc9055c38077c4299b4df999eb1d47ccb"
+  version "1.8.3"
+  resolved "https://registry.npmjs.org/d3-zoom/-/d3-zoom-1.8.3.tgz"
+  integrity sha512-VoLXTK4wvy1a0JpH2Il+F2CiOhVu7VRXWF5M/LroMIh3/zBAC3WAt7QoIvPibOavVo20hN6/37vwAsdBejLyKQ==
   dependencies:
     d3-dispatch "1"
     d3-drag "1"
@@ -1632,9 +3462,10 @@ d3-zoom@1:
     d3-selection "1"
     d3-transition "1"
 
-d3@5.x:
-  version "5.7.0"
-  resolved "https://registry.yarnpkg.com/d3/-/d3-5.7.0.tgz#f189d338bdde62acf02f308918e0ec34dd7568f9"
+d3@^5.9.7:
+  version "5.16.0"
+  resolved "https://registry.npmjs.org/d3/-/d3-5.16.0.tgz"
+  integrity sha512-4PL5hHaHwX4m7Zr1UapXW23apo6pexCgdetdJ5kTmADpG/7T9Gkxw0M0tf/pjoB63ezCCm0u5UaFYy2aMt0Mcw==
   dependencies:
     d3-array "1"
     d3-axis "1"
@@ -1670,440 +3501,725 @@ d3@5.x:
 
 "d3v3@npm:d3@3.x":
   version "3.5.17"
-  resolved "https://registry.yarnpkg.com/d3/-/d3-3.5.17.tgz#bc46748004378b21a360c9fc7cf5231790762fb8"
+  resolved "https://registry.npmjs.org/d3/-/d3-3.5.17.tgz"
+  integrity sha1-vEZ0gAQ3iyGjYMn8fPUjF5B2L7g=
 
-d@1:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/d/-/d-1.0.0.tgz#754bb5bfe55451da69a58b94d45f4c5b0462d58f"
+d@1, d@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/d/-/d-1.0.1.tgz"
+  integrity sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==
   dependencies:
-    es5-ext "^0.10.9"
+    es5-ext "^0.10.50"
+    type "^1.0.1"
 
 dashdash@^1.12.0:
   version "1.14.1"
-  resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.1.tgz#853cfa0f7cbe2fed5de20326b8dd581035f6e2f0"
+  resolved "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz"
+  integrity sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=
   dependencies:
     assert-plus "^1.0.0"
 
-date-now@^0.1.4:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"
+data-urls@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/data-urls/-/data-urls-2.0.0.tgz"
+  integrity sha512-X5eWTSXO/BJmpdIKCRuKUgSCgAN0OwliVK3yPKbwIWU1Tdw5BRajxlzMidvh+gwko9AfQ9zIj52pzF91Q3YAvQ==
+  dependencies:
+    abab "^2.0.3"
+    whatwg-mimetype "^2.3.0"
+    whatwg-url "^8.0.0"
 
-debug@2.6.9, debug@^2.1.2, debug@^2.2.0, debug@^2.3.3, debug@^2.6.6, debug@^2.6.8:
+debug@2.6.9, debug@^2.2.0, debug@^2.3.3:
   version "2.6.9"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
+  resolved "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz"
+  integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
   dependencies:
     ms "2.0.0"
 
-debug@=3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
+debug@^3.1.1, debug@^3.2.5:
+  version "3.2.6"
+  resolved "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz"
+  integrity sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==
   dependencies:
-    ms "2.0.0"
+    ms "^2.1.1"
 
-debug@^3.1.0:
-  version "3.2.6"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
+debug@^4.1.0, debug@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz"
+  integrity sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==
   dependencies:
     ms "^2.1.1"
 
-decamelize@^1.1.2:
+debug@^4.3.4, debug@~4.3.1, debug@~4.3.2:
+  version "4.3.4"
+  resolved "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz"
+  integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
+  dependencies:
+    ms "2.1.2"
+
+decamelize@^1.2.0:
   version "1.2.0"
-  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
+  resolved "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz"
+  integrity sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=
 
-decamelize@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-2.0.0.tgz#656d7bbc8094c4c788ea53c5840908c9c7d063c7"
-  dependencies:
-    xregexp "4.0.0"
+decimal.js@^10.2.0:
+  version "10.2.1"
+  resolved "https://registry.npmjs.org/decimal.js/-/decimal.js-10.2.1.tgz"
+  integrity sha512-KaL7+6Fw6i5A2XSnsbhm/6B+NuEA7TZ4vqxnd5tXz9sbKtrN9Srj8ab4vKVdK8YAqZO9P1kg45Y6YLoduPf+kw==
 
 decode-uri-component@^0.2.0:
   version "0.2.0"
-  resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545"
+  resolved "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz"
+  integrity sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=
 
 deep-equal@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.0.1.tgz#f5d260292b660e084eff4cdbc9f08ad3247448b5"
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.1.tgz"
+  integrity sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==
+  dependencies:
+    is-arguments "^1.0.4"
+    is-date-object "^1.0.1"
+    is-regex "^1.0.4"
+    object-is "^1.0.1"
+    object-keys "^1.1.1"
+    regexp.prototype.flags "^1.2.0"
 
-deep-extend@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.6.0.tgz#c4fa7c95404a17a9c3e8ca7e1537312b736330ac"
+deep-is@~0.1.3:
+  version "0.1.3"
+  resolved "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz"
+  integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=
+
+deepmerge@^4.2.2:
+  version "4.2.2"
+  resolved "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz"
+  integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==
 
-default-gateway@^2.6.0:
-  version "2.7.2"
-  resolved "https://registry.yarnpkg.com/default-gateway/-/default-gateway-2.7.2.tgz#b7ef339e5e024b045467af403d50348db4642d0f"
+default-gateway@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.npmjs.org/default-gateway/-/default-gateway-4.2.0.tgz"
+  integrity sha512-h6sMrVB1VMWVrW13mSc6ia/DwYYw5MN6+exNu1OaJeFac5aSAvwM7lZ0NVfTABuSkQelr4h5oebg3KB1XPdjgA==
   dependencies:
-    execa "^0.10.0"
+    execa "^1.0.0"
     ip-regex "^2.1.0"
 
 defaults@^1.0.3:
   version "1.0.3"
-  resolved "https://registry.yarnpkg.com/defaults/-/defaults-1.0.3.tgz#c656051e9817d9ff08ed881477f3fe4019f3ef7d"
+  resolved "https://registry.npmjs.org/defaults/-/defaults-1.0.3.tgz"
+  integrity sha1-xlYFHpgX2f8I7YgUd/P+QBnz730=
   dependencies:
     clone "^1.0.2"
 
-define-properties@^1.1.2:
+define-properties@^1.1.2, define-properties@^1.1.3:
   version "1.1.3"
-  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.3.tgz#cf88da6cbee26fe6db7094f61d870cbd84cee9f1"
+  resolved "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz"
+  integrity sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==
   dependencies:
     object-keys "^1.0.12"
 
 define-property@^0.2.5:
   version "0.2.5"
-  resolved "https://registry.yarnpkg.com/define-property/-/define-property-0.2.5.tgz#c35b1ef918ec3c990f9a5bc57be04aacec5c8116"
+  resolved "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz"
+  integrity sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=
   dependencies:
     is-descriptor "^0.1.0"
 
 define-property@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/define-property/-/define-property-1.0.0.tgz#769ebaaf3f4a63aad3af9e8d304c9bbe79bfb0e6"
+  resolved "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz"
+  integrity sha1-dp66rz9KY6rTr56NMEybvnm/sOY=
   dependencies:
     is-descriptor "^1.0.0"
 
 define-property@^2.0.2:
   version "2.0.2"
-  resolved "https://registry.yarnpkg.com/define-property/-/define-property-2.0.2.tgz#d459689e8d654ba77e02a817f8710d702cb16e9d"
+  resolved "https://registry.npmjs.org/define-property/-/define-property-2.0.2.tgz"
+  integrity sha512-jwK2UV4cnPpbcG7+VRARKTZPUWowwXA8bzH5NP6ud0oeAxyYPuGZUAC7hMugpCdz4BeSZl2Dl9k66CHJ/46ZYQ==
   dependencies:
     is-descriptor "^1.0.2"
     isobject "^3.0.1"
 
 defined@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/defined/-/defined-1.0.0.tgz#c98d9bcef75674188e110969151199e39b1fa693"
+  resolved "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz"
+  integrity sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM=
 
-del@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/del/-/del-3.0.0.tgz#53ecf699ffcbcb39637691ab13baf160819766e5"
+del@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.npmjs.org/del/-/del-4.1.1.tgz"
+  integrity sha512-QwGuEUouP2kVwQenAsOof5Fv8K9t3D8Ca8NxcXKrIpEHjTXK5J2nXLdP+ALI1cgv8wj7KuwBhTwBkOZSJKM5XQ==
   dependencies:
+    "@types/glob" "^7.1.1"
     globby "^6.1.0"
-    is-path-cwd "^1.0.0"
-    is-path-in-cwd "^1.0.0"
-    p-map "^1.1.1"
-    pify "^3.0.0"
-    rimraf "^2.2.8"
-
-delayed-stream@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
+    is-path-cwd "^2.0.0"
+    is-path-in-cwd "^2.0.0"
+    p-map "^2.0.0"
+    pify "^4.0.1"
+    rimraf "^2.6.3"
 
-delegates@^1.0.0:
+delayed-stream@~1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
+  resolved "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz"
+  integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk=
 
 depd@~1.1.2:
   version "1.1.2"
-  resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
+  resolved "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz"
+  integrity sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=
 
 des.js@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/des.js/-/des.js-1.0.0.tgz#c074d2e2aa6a8a9a07dbd61f9a15c2cd83ec8ecc"
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/des.js/-/des.js-1.0.1.tgz"
+  integrity sha512-Q0I4pfFrv2VPd34/vfLrFOoRmlYj3OV50i7fskps1jZWK1kApMWWT9G6RRUeYedLcBDIhnSDaUvJMb3AhUlaEA==
   dependencies:
     inherits "^2.0.1"
     minimalistic-assert "^1.0.0"
 
 destroy@~1.0.4:
   version "1.0.4"
-  resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80"
+  resolved "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz"
+  integrity sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=
 
-detect-libc@^1.0.2:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
+detect-file@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/detect-file/-/detect-file-1.0.0.tgz"
+  integrity sha1-8NZtA2cqglyxtzvbP+YjEMjlUrc=
+
+detect-newline@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/detect-newline/-/detect-newline-3.1.0.tgz"
+  integrity sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==
 
-detect-node@^2.0.3:
+detect-node@^2.0.4:
   version "2.0.4"
-  resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.0.4.tgz#014ee8f8f669c5c58023da64b8179c083a28c46c"
+  resolved "https://registry.npmjs.org/detect-node/-/detect-node-2.0.4.tgz"
+  integrity sha512-ZIzRpLJrOj7jjP2miAtgqIfmzbxa4ZOr5jJc601zklsfEx9oTzmmj2nVpIPRpNlRTIh8lc1kyViIY7BWSGNmKw==
 
-diff@^3.2.0:
-  version "3.5.0"
-  resolved "https://registry.yarnpkg.com/diff/-/diff-3.5.0.tgz#800c0dd1e0a8bfbc95835c202ad220fe317e5a12"
+diff-sequences@^26.5.0:
+  version "26.5.0"
+  resolved "https://registry.npmjs.org/diff-sequences/-/diff-sequences-26.5.0.tgz"
+  integrity sha512-ZXx86srb/iYy6jG71k++wBN9P9J05UNQ5hQHQd9MtMPvcqXPx/vKU69jfHV637D00Q2gSgPk2D+jSx3l1lDW/Q==
+
+diff-sequences@^26.6.2:
+  version "26.6.2"
+  resolved "https://registry.npmjs.org/diff-sequences/-/diff-sequences-26.6.2.tgz"
+  integrity sha512-Mv/TDa3nZ9sbc5soK+OoA74BsS3mL37yixCvUAQkiuA4Wz6YtwP/K47n2rv2ovzHZvoiQeA5FTQOschKkEwB0Q==
+
+diff@^4.0.1:
+  version "4.0.2"
+  resolved "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz"
+  integrity sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==
 
 diffie-hellman@^5.0.0:
   version "5.0.3"
-  resolved "http://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz#40e8ee98f55a2149607146921c63e1ae5f3d2875"
+  resolved "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz"
+  integrity sha512-kqag/Nl+f3GwyK25fhUMYj81BUOrZ9IuJsjIcDE5icNM9FJHAVm3VcUDxdLPoQtTuUylWm6ZIknYJwwaPxsUzg==
   dependencies:
     bn.js "^4.1.0"
     miller-rabin "^4.0.0"
     randombytes "^2.0.0"
 
 dir-glob@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-2.0.0.tgz#0b205d2b6aef98238ca286598a8204d29d0a0034"
+  version "2.2.2"
+  resolved "https://registry.npmjs.org/dir-glob/-/dir-glob-2.2.2.tgz"
+  integrity sha512-f9LBi5QWzIW3I6e//uxZoLBlUt9kcp66qo0sSCxL6YZKc75R1c4MFCoe/LaZiBGmgujvQdxc5Bn3QhfyvK5Hsw==
   dependencies:
-    arrify "^1.0.1"
     path-type "^3.0.0"
 
 dns-equal@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/dns-equal/-/dns-equal-1.0.0.tgz#b39e7f1da6eb0a75ba9c17324b34753c47e0654d"
+  resolved "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz"
+  integrity sha1-s55/HabrCnW6nBcySzR1PEfgZU0=
 
 dns-packet@^1.3.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/dns-packet/-/dns-packet-1.3.1.tgz#12aa426981075be500b910eedcd0b47dd7deda5a"
+  version "1.3.4"
+  resolved "https://registry.npmjs.org/dns-packet/-/dns-packet-1.3.4.tgz"
+  integrity sha512-BQ6F4vycLXBvdrJZ6S3gZewt6rcrks9KBgM9vrhW+knGRqc8uEdT7fuCwloc7nny5xNoMJ17HGH0R/6fpo8ECA==
   dependencies:
     ip "^1.1.0"
     safe-buffer "^5.0.1"
 
 dns-txt@^2.0.2:
   version "2.0.2"
-  resolved "https://registry.yarnpkg.com/dns-txt/-/dns-txt-2.0.2.tgz#b91d806f5d27188e4ab3e7d107d881a1cc4642b6"
+  resolved "https://registry.npmjs.org/dns-txt/-/dns-txt-2.0.2.tgz"
+  integrity sha1-uR2Ab10nGI5Ks+fRB9iBocxGQrY=
   dependencies:
     buffer-indexof "^1.0.0"
 
-dom-converter@~0.2:
+dom-converter@^0.2:
   version "0.2.0"
-  resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.2.0.tgz#6721a9daee2e293682955b6afe416771627bb768"
+  resolved "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz"
+  integrity sha512-gd3ypIPfOMr9h5jIKq8E3sHOTCjeirnl0WK5ZdS1AW0Odt0b1PaWaHdJ4Qk4klv+YB9aJBS7mESXjFoDQPu6DA==
   dependencies:
     utila "~0.4"
 
 dom-serializer@0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.0.tgz#073c697546ce0780ce23be4a28e293e40bc30c82"
+  version "0.2.2"
+  resolved "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz"
+  integrity sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==
   dependencies:
-    domelementtype "~1.1.1"
-    entities "~1.1.1"
+    domelementtype "^2.0.1"
+    entities "^2.0.0"
 
 dom-walk@^0.1.0:
   version "0.1.1"
-  resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.1.tgz#672226dc74c8f799ad35307df936aba11acd6018"
+  resolved "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.1.tgz"
+  integrity sha1-ZyIm3HTI95mtNTB9+TaroRrNYBg=
 
 domain-browser@^1.1.1:
   version "1.2.0"
-  resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.2.0.tgz#3d31f50191a6749dd1375a7f522e823d42e54eda"
+  resolved "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz"
+  integrity sha512-jnjyiM6eRyZl2H+W8Q/zLMA481hzi0eszAaBUzIVnmYVDBbnLxVNnfu1HgEBvCbL+71FrxMl3E6lpKH7Ge3OXA==
 
-domelementtype@1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.2.1.tgz#578558ef23befac043a1abb0db07635509393479"
+domelementtype@1, domelementtype@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz"
+  integrity sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==
 
-domelementtype@~1.1.1:
-  version "1.1.3"
-  resolved "http://registry.npmjs.org/domelementtype/-/domelementtype-1.1.3.tgz#bd28773e2642881aec51544924299c5cd822185b"
+domelementtype@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/domelementtype/-/domelementtype-2.0.1.tgz"
+  integrity sha512-5HOHUDsYZWV8FGWN0Njbr/Rn7f/eWSQi1v7+HsUVwXgn8nWWlL64zKDkS0n8ZmQ3mlWOMuXOnR+7Nx/5tMO5AQ==
 
-domhandler@2.1:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-2.1.0.tgz#d2646f5e57f6c3bab11cf6cb05d3c0acf7412594"
+domexception@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/domexception/-/domexception-2.0.1.tgz"
+  integrity sha512-yxJ2mFy/sibVQlu5qHjOkf9J3K6zgmCxgJ94u2EdvDOV09H+32LtRswEcUsmUWN72pVLOEnTSRaIVVzVQgS0dg==
   dependencies:
-    domelementtype "1"
+    webidl-conversions "^5.0.0"
 
-domutils@1.1:
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.1.6.tgz#bddc3de099b9a2efacc51c623f28f416ecc57485"
+domhandler@^2.3.0:
+  version "2.4.2"
+  resolved "https://registry.npmjs.org/domhandler/-/domhandler-2.4.2.tgz"
+  integrity sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==
   dependencies:
     domelementtype "1"
 
 domutils@1.5.1:
   version "1.5.1"
-  resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.5.1.tgz#dcd8488a26f563d61079e48c9f7b7e32373682cf"
+  resolved "https://registry.npmjs.org/domutils/-/domutils-1.5.1.tgz"
+  integrity sha1-3NhIiib1Y9YQeeSMn3t+Mjc2gs8=
   dependencies:
     dom-serializer "0"
     domelementtype "1"
 
-duplexer2@^0.1.2:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/duplexer2/-/duplexer2-0.1.4.tgz#8b12dab878c0d69e3e7891051662a32fc6bddcc1"
+domutils@^1.5.1, domutils@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz"
+  integrity sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==
   dependencies:
-    readable-stream "^2.0.2"
+    dom-serializer "0"
+    domelementtype "1"
+
+dot-prop@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.npmjs.org/dot-prop/-/dot-prop-5.2.0.tgz"
+  integrity sha512-uEUyaDKoSQ1M4Oq8l45hSE26SnTxL6snNnqvK/VWx5wJhmff5z0FUVJDKDanor/6w3kzE3i7XZOk+7wC0EXr1A==
+  dependencies:
+    is-obj "^2.0.0"
+
+duplexer@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz"
+  integrity sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==
 
 duplexify@^3.4.2, duplexify@^3.6.0:
-  version "3.6.1"
-  resolved "https://registry.yarnpkg.com/duplexify/-/duplexify-3.6.1.tgz#b1a7a29c4abfd639585efaecce80d666b1e34125"
+  version "3.7.1"
+  resolved "https://registry.npmjs.org/duplexify/-/duplexify-3.7.1.tgz"
+  integrity sha512-07z8uv2wMyS51kKhD1KsdXJg5WQ6t93RneqRxUHnskXVtlYYkLqM0gqStQZ3pj073g687jPCHrqNfCzawLYh5g==
   dependencies:
     end-of-stream "^1.0.0"
     inherits "^2.0.1"
     readable-stream "^2.0.0"
     stream-shift "^1.0.0"
 
+earcut@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/earcut/-/earcut-3.0.1.tgz#f60b3f671c5657cca9d3e131c5527c5dde00ef38"
+  integrity sha512-0l1/0gOjESMeQyYaK5IDiPNvFeu93Z/cO0TjZh9eZ1vyCtZnA7KMZ8rQggpsJHIbGSdrqYq9OhuveadOVHCshw==
+
 ecc-jsbn@~0.1.1:
   version "0.1.2"
-  resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz#3a83a904e54353287874c564b7549386849a98c9"
+  resolved "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz"
+  integrity sha1-OoOpBOVDUyh4dMVkt1SThoSamMk=
   dependencies:
     jsbn "~0.1.0"
     safer-buffer "^2.1.0"
 
 ee-first@1.1.1:
   version "1.1.1"
-  resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
+  resolved "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz"
+  integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
 
-electron-to-chromium@^1.2.7, electron-to-chromium@^1.3.80:
-  version "1.3.80"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.80.tgz#e99ec7efe64c2c6a269d3885ff411ea88852fa53"
+electron-to-chromium@^1.3.723:
+  version "1.3.748"
+  resolved "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.748.tgz"
+  integrity sha512-fmIKfYALVeEybk/L2ucdgt7jN3JsbGtg3K9pmF/MRWgkeADBI1VSAa5IzdG2gZwTxsnsrFtdMpOTSM5mrBRKVQ==
 
 elliptic@^6.0.0:
-  version "6.4.1"
-  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.4.1.tgz#c2d0b7776911b86722c632c3c06c60f2f819939a"
+  version "6.5.4"
+  resolved "https://registry.npmjs.org/elliptic/-/elliptic-6.5.4.tgz"
+  integrity sha512-iLhC6ULemrljPZb+QutR5TQGB+pdW6KGD5RSegS+8sorOZT+rdQFbsQFJgvN3eRqNALqJer4oQ16YvJHlU8hzQ==
   dependencies:
-    bn.js "^4.4.0"
-    brorand "^1.0.1"
+    bn.js "^4.11.9"
+    brorand "^1.1.0"
     hash.js "^1.0.0"
-    hmac-drbg "^1.0.0"
-    inherits "^2.0.1"
-    minimalistic-assert "^1.0.0"
-    minimalistic-crypto-utils "^1.0.0"
+    hmac-drbg "^1.0.1"
+    inherits "^2.0.4"
+    minimalistic-assert "^1.0.1"
+    minimalistic-crypto-utils "^1.0.1"
+
+eme-encryption-scheme-polyfill@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/eme-encryption-scheme-polyfill/-/eme-encryption-scheme-polyfill-2.2.1.tgz#1f9db4ce8690a7150bc1ba80bd1519b8486e3443"
+  integrity sha512-GzgrLuZPYGijd8oaKuBqYv3Tc2oruDZM3V2982KOuy/PA1N3zwMe+/oIXJYfZ3BH3PwW5nONdBBE+VY6jlwbrw==
+
+emittery@^0.7.1:
+  version "0.7.1"
+  resolved "https://registry.npmjs.org/emittery/-/emittery-0.7.1.tgz"
+  integrity sha512-d34LN4L6h18Bzz9xpoku2nPwKxCPlPMr3EEKTkoEBi+1/+b0lcRkRJ1UVyyZaKNeqGR3swcGl6s390DNO4YVgQ==
+
+emoji-regex@^7.0.1:
+  version "7.0.3"
+  resolved "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz"
+  integrity sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==
+
+emoji-regex@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz"
+  integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
 
 emojis-list@^2.0.0:
   version "2.1.0"
-  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
+  resolved "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz"
+  integrity sha1-TapNnbAPmBmIDHn6RXrlsJof04k=
+
+emojis-list@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz"
+  integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==
 
 encodeurl@~1.0.2:
   version "1.0.2"
-  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
+  resolved "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz"
+  integrity sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=
 
 end-of-stream@^1.0.0, end-of-stream@^1.1.0:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.1.tgz#ed29634d19baba463b6ce6b80a37213eab71ec43"
+  version "1.4.4"
+  resolved "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz"
+  integrity sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==
   dependencies:
     once "^1.4.0"
 
-enhanced-resolve@^4.0.0, enhanced-resolve@^4.1.0:
+engine.io-client@~6.2.1:
+  version "6.2.2"
+  resolved "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.2.2.tgz"
+  integrity sha512-8ZQmx0LQGRTYkHuogVZuGSpDqYZtCM/nv8zQ68VZ+JkOpazJ7ICdsSpaO6iXwvaU30oFg5QJOJWj8zWqhbKjkQ==
+  dependencies:
+    "@socket.io/component-emitter" "~3.1.0"
+    debug "~4.3.1"
+    engine.io-parser "~5.0.3"
+    ws "~8.2.3"
+    xmlhttprequest-ssl "~2.0.0"
+
+engine.io-parser@~5.0.3:
+  version "5.0.4"
+  resolved "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.0.4.tgz"
+  integrity sha512-+nVFp+5z1E3HcToEnO7ZIj3g+3k9389DvWtvJZz0T6/eOCPIyyxehFcedoYrZQrp0LgQbD9pPXhpMBKMd5QURg==
+
+enhanced-resolve@4.1.0:
   version "4.1.0"
-  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-4.1.0.tgz#41c7e0bfdfe74ac1ffe1e57ad6a5c6c9f3742a7f"
+  resolved "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-4.1.0.tgz"
+  integrity sha512-F/7vkyTtyc/llOIn8oWclcB25KdRaiPBpZYDgJHgh/UHtpgT2p2eldQgtQnLtUvfMKPKxbRaQM/hHkvLHt1Vng==
   dependencies:
     graceful-fs "^4.1.2"
     memory-fs "^0.4.0"
     tapable "^1.0.0"
 
-entities@~1.1.1:
+enhanced-resolve@^4.0.0:
+  version "4.1.1"
+  resolved "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-4.1.1.tgz"
+  integrity sha512-98p2zE+rL7/g/DzMHMTF4zZlCgeVdJ7yr6xzEpJRYwFYrGi9ANdn5DnJURg6RpBkyk60XYDnWIv51VfIhfNGuA==
+  dependencies:
+    graceful-fs "^4.1.2"
+    memory-fs "^0.5.0"
+    tapable "^1.0.0"
+
+enhanced-resolve@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-4.5.0.tgz#2f3cfd84dbe3b487f18f2db2ef1e064a571ca5ec"
+  integrity sha512-Nv9m36S/vxpsI+Hc4/ZGRs0n9mXqSWGGq49zxb/cJfPAQMbUtttJAlNPS4AQzaBdw/pKskw5bMbekT/Y7W/Wlg==
+  dependencies:
+    graceful-fs "^4.1.2"
+    memory-fs "^0.5.0"
+    tapable "^1.0.0"
+
+entities@^1.1.1:
   version "1.1.2"
-  resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.2.tgz#bdfa735299664dfafd34529ed4f8522a275fea56"
+  resolved "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz"
+  integrity sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==
+
+entities@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/entities/-/entities-2.0.0.tgz"
+  integrity sha512-D9f7V0JSRwIxlRI2mjMqufDrRDnx8p+eEOz7aUM9SuvF8gsBzra0/6tbjl1m8eQHrZlYj6PxqE00hZ1SAIKPLw==
 
 errno@^0.1.1, errno@^0.1.3, errno@~0.1.7:
   version "0.1.7"
-  resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.7.tgz#4684d71779ad39af177e3f007996f7c67c852618"
+  resolved "https://registry.npmjs.org/errno/-/errno-0.1.7.tgz"
+  integrity sha512-MfrRBDWzIWifgq6tJj60gkAwtLNb6sQPlcFrSOflcP1aFmmruKQ2wRnze/8V6kgyz7H3FF8Npzv78mZ7XLLflg==
   dependencies:
     prr "~1.0.1"
 
 error-ex@^1.3.1:
   version "1.3.2"
-  resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
+  resolved "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz"
+  integrity sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==
   dependencies:
     is-arrayish "^0.2.1"
 
 error-stack-parser@^2.0.0:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/error-stack-parser/-/error-stack-parser-2.0.2.tgz#4ae8dbaa2bf90a8b450707b9149dcabca135520d"
+  version "2.0.6"
+  resolved "https://registry.npmjs.org/error-stack-parser/-/error-stack-parser-2.0.6.tgz"
+  integrity sha512-d51brTeqC+BHlwF0BhPtcYgF5nlzf9ZZ0ZIUQNZpc9ZB9qw5IJ2diTrBY9jlCJkTLITYPjmiX6OWCwH+fuyNgQ==
   dependencies:
-    stackframe "^1.0.4"
+    stackframe "^1.1.1"
 
-es-abstract@^1.5.1:
-  version "1.12.0"
-  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.12.0.tgz#9dbbdd27c6856f0001421ca18782d786bf8a6165"
+es-abstract@^1.17.0-next.1, es-abstract@^1.17.2:
+  version "1.17.4"
+  resolved "https://registry.npmjs.org/es-abstract/-/es-abstract-1.17.4.tgz"
+  integrity sha512-Ae3um/gb8F0mui/jPL+QiqmglkUsaQf7FwBEHYIFkztkneosu9imhqHpBzQ3h1vit8t5iQ74t6PEVvphBZiuiQ==
   dependencies:
-    es-to-primitive "^1.1.1"
+    es-to-primitive "^1.2.1"
     function-bind "^1.1.1"
-    has "^1.0.1"
-    is-callable "^1.1.3"
-    is-regex "^1.0.4"
+    has "^1.0.3"
+    has-symbols "^1.0.1"
+    is-callable "^1.1.5"
+    is-regex "^1.0.5"
+    object-inspect "^1.7.0"
+    object-keys "^1.1.1"
+    object.assign "^4.1.0"
+    string.prototype.trimleft "^2.1.1"
+    string.prototype.trimright "^2.1.1"
 
-es-to-primitive@^1.1.1:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.0.tgz#edf72478033456e8dda8ef09e00ad9650707f377"
+es-to-primitive@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz"
+  integrity sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==
   dependencies:
     is-callable "^1.1.4"
     is-date-object "^1.0.1"
     is-symbol "^1.0.2"
 
-es5-ext@^0.10.35, es5-ext@^0.10.9, es5-ext@~0.10.14:
-  version "0.10.46"
-  resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.46.tgz#efd99f67c5a7ec789baa3daa7f79870388f7f572"
+es5-ext@^0.10.35, es5-ext@^0.10.50:
+  version "0.10.53"
+  resolved "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.53.tgz"
+  integrity sha512-Xs2Stw6NiNHWypzRTY1MtaG/uJlwCk8kH81920ma8mvN8Xq1gsfhZvpkImLQArw8AHnv8MT2I45J3c0R8slE+Q==
   dependencies:
     es6-iterator "~2.0.3"
-    es6-symbol "~3.1.1"
-    next-tick "1"
+    es6-symbol "~3.1.3"
+    next-tick "~1.0.0"
 
 es6-iterator@~2.0.3:
   version "2.0.3"
-  resolved "https://registry.yarnpkg.com/es6-iterator/-/es6-iterator-2.0.3.tgz#a7de889141a05a94b0854403b2d0a0fbfa98f3b7"
+  resolved "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz"
+  integrity sha1-p96IkUGgWpSwhUQDstCg+/qY87c=
   dependencies:
     d "1"
     es5-ext "^0.10.35"
     es6-symbol "^3.1.1"
 
-es6-symbol@^3.1.1, es6-symbol@~3.1.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/es6-symbol/-/es6-symbol-3.1.1.tgz#bf00ef4fdab6ba1b46ecb7b629b4c7ed5715cc77"
+es6-symbol@^3.1.1, es6-symbol@~3.1.3:
+  version "3.1.3"
+  resolved "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.3.tgz"
+  integrity sha512-NJ6Yn3FuDinBaBRWl/q5X/s4koRHBrgKAu+yGI6JCBeiu3qrcbJhwT2GeR/EXVfylRk8dpQVJoLEFhK+Mu31NA==
   dependencies:
-    d "1"
-    es5-ext "~0.10.14"
+    d "^1.0.1"
+    ext "^1.1.2"
+
+esbuild-loader@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/esbuild-loader/-/esbuild-loader-4.3.0.tgz#70a19717290cf59c6ac55b26782dbcf84378ccb4"
+  integrity sha512-D7HeJNdkDKKMarPQO/3dlJT6RwN2YJO7ENU6RPlpOz5YxSHnUNi2yvW41Bckvi1EVwctIaLzlb0ni5ag2GINYA==
+  dependencies:
+    esbuild "^0.25.0"
+    get-tsconfig "^4.7.0"
+    loader-utils "^2.0.4"
+    webpack-sources "^1.4.3"
+
+esbuild@^0.25.0, esbuild@^0.25.1:
+  version "0.25.1"
+  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.25.1.tgz#a16b8d070b6ad4871935277bda6ccfe852e3fa2f"
+  integrity sha512-BGO5LtrGC7vxnqucAe/rmvKdJllfGaYWdyABvyMoXQlfYMb2bbRuReWR5tEGE//4LcNJj9XrkovTqNYRFZHAMQ==
+  optionalDependencies:
+    "@esbuild/aix-ppc64" "0.25.1"
+    "@esbuild/android-arm" "0.25.1"
+    "@esbuild/android-arm64" "0.25.1"
+    "@esbuild/android-x64" "0.25.1"
+    "@esbuild/darwin-arm64" "0.25.1"
+    "@esbuild/darwin-x64" "0.25.1"
+    "@esbuild/freebsd-arm64" "0.25.1"
+    "@esbuild/freebsd-x64" "0.25.1"
+    "@esbuild/linux-arm" "0.25.1"
+    "@esbuild/linux-arm64" "0.25.1"
+    "@esbuild/linux-ia32" "0.25.1"
+    "@esbuild/linux-loong64" "0.25.1"
+    "@esbuild/linux-mips64el" "0.25.1"
+    "@esbuild/linux-ppc64" "0.25.1"
+    "@esbuild/linux-riscv64" "0.25.1"
+    "@esbuild/linux-s390x" "0.25.1"
+    "@esbuild/linux-x64" "0.25.1"
+    "@esbuild/netbsd-arm64" "0.25.1"
+    "@esbuild/netbsd-x64" "0.25.1"
+    "@esbuild/openbsd-arm64" "0.25.1"
+    "@esbuild/openbsd-x64" "0.25.1"
+    "@esbuild/sunos-x64" "0.25.1"
+    "@esbuild/win32-arm64" "0.25.1"
+    "@esbuild/win32-ia32" "0.25.1"
+    "@esbuild/win32-x64" "0.25.1"
+
+escalade@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz"
+  integrity sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==
 
 escape-html@~1.0.3:
   version "1.0.3"
-  resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
+  resolved "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz"
+  integrity sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=
 
 escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
   version "1.0.5"
-  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
+  resolved "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz"
+  integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
 
-eslint-scope@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-4.0.0.tgz#50bf3071e9338bcdc43331794a0cb533f0136172"
+escape-string-regexp@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz"
+  integrity sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==
+
+escodegen@^1.14.1:
+  version "1.14.3"
+  resolved "https://registry.npmjs.org/escodegen/-/escodegen-1.14.3.tgz"
+  integrity sha512-qFcX0XJkdg+PB3xjZZG/wKSuT1PnQWx57+TVSjIMmILd2yC/6ByYElPwJnslDsuWuSAp4AwJGumarAAmJch5Kw==
+  dependencies:
+    esprima "^4.0.1"
+    estraverse "^4.2.0"
+    esutils "^2.0.2"
+    optionator "^0.8.1"
+  optionalDependencies:
+    source-map "~0.6.1"
+
+eslint-scope@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.npmjs.org/eslint-scope/-/eslint-scope-4.0.3.tgz"
+  integrity sha512-p7VutNr1O/QrxysMo3E45FjYDTeXBy0iTltPFNSqKAIfjDSXC+4dj+qfyuD8bfAXrW/y6lW3O76VaYNPKfpKrg==
   dependencies:
     esrecurse "^4.1.0"
     estraverse "^4.1.1"
 
-esprima@^2.6.0:
-  version "2.7.3"
-  resolved "https://registry.yarnpkg.com/esprima/-/esprima-2.7.3.tgz#96e3b70d5779f6ad49cd032673d1c312767ba581"
-
-esprima@^4.0.0:
+esprima@^4.0.0, esprima@^4.0.1:
   version "4.0.1"
-  resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
+  resolved "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz"
+  integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
 
 esrecurse@^4.1.0:
   version "4.2.1"
-  resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.2.1.tgz#007a3b9fdbc2b3bb87e4879ea19c92fdbd3942cf"
+  resolved "https://registry.npmjs.org/esrecurse/-/esrecurse-4.2.1.tgz"
+  integrity sha512-64RBB++fIOAXPw3P9cy89qfMlvZEXZkqqJkjqqXIvzP5ezRZjW+lPWjw35UX/3EhUPFYbg5ER4JYgDw4007/DQ==
   dependencies:
     estraverse "^4.1.0"
 
-estraverse@^4.1.0, estraverse@^4.1.1:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.2.0.tgz#0dee3fed31fcd469618ce7342099fc1afa0bdb13"
+estraverse@^4.1.0, estraverse@^4.1.1, estraverse@^4.2.0:
+  version "4.3.0"
+  resolved "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz"
+  integrity sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==
 
 esutils@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.2.tgz#0abf4f1caa5bcb1f7a9d8acc6dea4faaa04bac9b"
+  version "2.0.3"
+  resolved "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz"
+  integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
 
 etag@~1.8.1:
   version "1.8.1"
-  resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
+  resolved "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz"
+  integrity sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=
 
-eventemitter3@^2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-2.0.3.tgz#b5e1079b59fb5e1ba2771c0a993be060a58c99ba"
+event-target-shim@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz"
+  integrity sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==
 
-eventemitter3@^3.0.0:
+eventemitter3@^4.0.0:
+  version "4.0.7"
+  resolved "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz"
+  integrity sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==
+
+events@^3.0.0:
   version "3.1.0"
-  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-3.1.0.tgz#090b4d6cdbd645ed10bf750d4b5407942d7ba163"
+  resolved "https://registry.npmjs.org/events/-/events-3.1.0.tgz"
+  integrity sha512-Rv+u8MLHNOdMjTAFeT3nCjHn2aGlx435FP/sDHNaRhDEMwyI/aB22Kj2qIN8R0cw3z28psEQLYwxVKLsKrMgWg==
 
-events@^1.0.0:
-  version "1.1.1"
-  resolved "http://registry.npmjs.org/events/-/events-1.1.1.tgz#9ebdb7635ad099c70dcc4c2a1f5004288e8bd924"
+events@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.npmjs.org/events/-/events-3.3.0.tgz"
+  integrity sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==
 
-eventsource@0.1.6:
-  version "0.1.6"
-  resolved "https://registry.yarnpkg.com/eventsource/-/eventsource-0.1.6.tgz#0acede849ed7dd1ccc32c811bb11b944d4f29232"
+eventsource@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.npmjs.org/eventsource/-/eventsource-1.0.7.tgz"
+  integrity sha512-4Ln17+vVT0k8aWq+t/bF5arcS3EpT9gYtW66EPacdj/mAFevznsnyoHLPy2BA8gbIQeIHoPsvwmfBftfcG//BQ==
   dependencies:
-    original ">=0.0.5"
+    original "^1.0.0"
 
 evp_bytestokey@^1.0.0, evp_bytestokey@^1.0.3:
   version "1.0.3"
-  resolved "https://registry.yarnpkg.com/evp_bytestokey/-/evp_bytestokey-1.0.3.tgz#7fcbdb198dc71959432efe13842684e0525acb02"
+  resolved "https://registry.npmjs.org/evp_bytestokey/-/evp_bytestokey-1.0.3.tgz"
+  integrity sha512-/f2Go4TognH/KvCISP7OUsHn85hT9nUkxxA9BEWxFn+Oj9o8ZNLm/40hdlgSLyuOimsrTKLUMEorQexp/aPQeA==
   dependencies:
     md5.js "^1.3.4"
     safe-buffer "^5.1.1"
 
-execa@^0.10.0:
-  version "0.10.0"
-  resolved "https://registry.yarnpkg.com/execa/-/execa-0.10.0.tgz#ff456a8f53f90f8eccc71a96d11bdfc7f082cb50"
+exec-sh@^0.3.2:
+  version "0.3.4"
+  resolved "https://registry.npmjs.org/exec-sh/-/exec-sh-0.3.4.tgz"
+  integrity sha512-sEFIkc61v75sWeOe72qyrqg2Qg0OuLESziUDk/O/z2qgS15y2gWVFrI6f2Qn/qw/0/NCfCEsmNA4zOjkwEZT1A==
+
+execa@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/execa/-/execa-1.0.0.tgz"
+  integrity sha512-adbxcyWV46qiHyvSp50TKt05tB4tK3HcmF7/nxfAdhnox83seTDbwnaqKO4sXRy7roHAIFqJP/Rw/AuEbX61LA==
   dependencies:
     cross-spawn "^6.0.0"
-    get-stream "^3.0.0"
+    get-stream "^4.0.0"
     is-stream "^1.1.0"
     npm-run-path "^2.0.0"
     p-finally "^1.0.0"
     signal-exit "^3.0.0"
     strip-eof "^1.0.0"
 
+execa@^4.0.0:
+  version "4.0.3"
+  resolved "https://registry.npmjs.org/execa/-/execa-4.0.3.tgz"
+  integrity sha512-WFDXGHckXPWZX19t1kCsXzOpqX9LWYNqn4C+HqZlk/V0imTkzJZqf87ZBhvpHaftERYknpk0fjSylnXVlVgI0A==
+  dependencies:
+    cross-spawn "^7.0.0"
+    get-stream "^5.0.0"
+    human-signals "^1.1.1"
+    is-stream "^2.0.0"
+    merge-stream "^2.0.0"
+    npm-run-path "^4.0.0"
+    onetime "^5.1.0"
+    signal-exit "^3.0.2"
+    strip-final-newline "^2.0.0"
+
+exit@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz"
+  integrity sha1-BjJjj42HfMghB9MKD/8aF8uhzQw=
+
 expand-brackets@^2.1.4:
   version "2.1.4"
-  resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-2.1.4.tgz#b77735e315ce30f6b6eff0f83b04151a22449622"
+  resolved "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz"
+  integrity sha1-t3c14xXOMPa27/D4OwQVGiJEliI=
   dependencies:
     debug "^2.3.3"
     define-property "^0.2.5"
@@ -2113,68 +4229,100 @@ expand-brackets@^2.1.4:
     snapdragon "^0.8.1"
     to-regex "^3.0.1"
 
+expand-tilde@^2.0.0, expand-tilde@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.npmjs.org/expand-tilde/-/expand-tilde-2.0.2.tgz"
+  integrity sha1-l+gBqgUt8CRU3kawK/YhZCzchQI=
+  dependencies:
+    homedir-polyfill "^1.0.1"
+
+expect@^26.5.3:
+  version "26.5.3"
+  resolved "https://registry.npmjs.org/expect/-/expect-26.5.3.tgz"
+  integrity sha512-kkpOhGRWGOr+TEFUnYAjfGvv35bfP+OlPtqPIJpOCR9DVtv8QV+p8zG0Edqafh80fsjeE+7RBcVUq1xApnYglw==
+  dependencies:
+    "@jest/types" "^26.5.2"
+    ansi-styles "^4.0.0"
+    jest-get-type "^26.3.0"
+    jest-matcher-utils "^26.5.2"
+    jest-message-util "^26.5.2"
+    jest-regex-util "^26.0.0"
+
 exports-loader@^0.7.0:
   version "0.7.0"
-  resolved "https://registry.yarnpkg.com/exports-loader/-/exports-loader-0.7.0.tgz#84881c784dea6036b8e1cd1dac3da9b6409e21a5"
+  resolved "https://registry.npmjs.org/exports-loader/-/exports-loader-0.7.0.tgz"
+  integrity sha512-RKwCrO4A6IiKm0pG3c9V46JxIHcDplwwGJn6+JJ1RcVnh/WSGJa0xkmk5cRVtgOPzCAtTMGj2F7nluh9L0vpSA==
   dependencies:
     loader-utils "^1.1.0"
     source-map "0.5.0"
 
-express@^4.16.2:
-  version "4.16.4"
-  resolved "https://registry.yarnpkg.com/express/-/express-4.16.4.tgz#fddef61926109e24c515ea97fd2f1bdbf62df12e"
+express@^4.17.1:
+  version "4.17.1"
+  resolved "https://registry.npmjs.org/express/-/express-4.17.1.tgz"
+  integrity sha512-mHJ9O79RqluphRrcw2X/GTh3k9tVv8YcoyY4Kkh4WDMUYKRZUq0h1o0w2rrrxBqM7VoeUVqgb27xlEMXTnYt4g==
   dependencies:
-    accepts "~1.3.5"
+    accepts "~1.3.7"
     array-flatten "1.1.1"
-    body-parser "1.18.3"
-    content-disposition "0.5.2"
+    body-parser "1.19.0"
+    content-disposition "0.5.3"
     content-type "~1.0.4"
-    cookie "0.3.1"
+    cookie "0.4.0"
     cookie-signature "1.0.6"
     debug "2.6.9"
     depd "~1.1.2"
     encodeurl "~1.0.2"
     escape-html "~1.0.3"
     etag "~1.8.1"
-    finalhandler "1.1.1"
+    finalhandler "~1.1.2"
     fresh "0.5.2"
     merge-descriptors "1.0.1"
     methods "~1.1.2"
     on-finished "~2.3.0"
-    parseurl "~1.3.2"
+    parseurl "~1.3.3"
     path-to-regexp "0.1.7"
-    proxy-addr "~2.0.4"
-    qs "6.5.2"
-    range-parser "~1.2.0"
+    proxy-addr "~2.0.5"
+    qs "6.7.0"
+    range-parser "~1.2.1"
     safe-buffer "5.1.2"
-    send "0.16.2"
-    serve-static "1.13.2"
-    setprototypeof "1.1.0"
-    statuses "~1.4.0"
-    type-is "~1.6.16"
+    send "0.17.1"
+    serve-static "1.14.1"
+    setprototypeof "1.1.1"
+    statuses "~1.5.0"
+    type-is "~1.6.18"
     utils-merge "1.0.1"
     vary "~1.1.2"
 
+ext@^1.1.2:
+  version "1.4.0"
+  resolved "https://registry.npmjs.org/ext/-/ext-1.4.0.tgz"
+  integrity sha512-Key5NIsUxdqKg3vIsdw9dSuXpPCQ297y6wBjL30edxwPgt2E44WcWBZey/ZvUc6sERLTxKdyCu4gZFmUbk1Q7A==
+  dependencies:
+    type "^2.0.0"
+
 extend-shallow@^2.0.1:
   version "2.0.1"
-  resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-2.0.1.tgz#51af7d614ad9a9f610ea1bafbb989d6b1c56890f"
+  resolved "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz"
+  integrity sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=
   dependencies:
     is-extendable "^0.1.0"
 
 extend-shallow@^3.0.0, extend-shallow@^3.0.2:
   version "3.0.2"
-  resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-3.0.2.tgz#26a71aaf073b39fb2127172746131c2704028db8"
+  resolved "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz"
+  integrity sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=
   dependencies:
     assign-symbols "^1.0.0"
     is-extendable "^1.0.1"
 
-extend@^3.0.1, extend@^3.0.2, extend@~3.0.2:
+extend@~3.0.2:
   version "3.0.2"
-  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
+  resolved "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz"
+  integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==
 
 extglob@^2.0.4:
   version "2.0.4"
-  resolved "https://registry.yarnpkg.com/extglob/-/extglob-2.0.4.tgz#ad00fe4dc612a9232e8718711dc5cb5ab0285543"
+  resolved "https://registry.npmjs.org/extglob/-/extglob-2.0.4.tgz"
+  integrity sha512-Nmb6QXkELsuBr24CJSkilo6UHHgbekK5UiZgfE6UHD3Eb27YC6oD+bhcT+tJ6cl8dmsgdQxnWlcry8ksBIBLpw==
   dependencies:
     array-unique "^0.3.2"
     define-property "^1.0.0"
@@ -2187,7 +4335,8 @@ extglob@^2.0.4:
 
 extract-text-webpack-plugin@^3.0.2:
   version "3.0.2"
-  resolved "https://registry.yarnpkg.com/extract-text-webpack-plugin/-/extract-text-webpack-plugin-3.0.2.tgz#5f043eaa02f9750a9258b78c0a6e0dc1408fb2f7"
+  resolved "https://registry.npmjs.org/extract-text-webpack-plugin/-/extract-text-webpack-plugin-3.0.2.tgz"
+  integrity sha512-bt/LZ4m5Rqt/Crl2HiKuAl/oqg0psx1tsTLkvWbJen1CtD+fftkZhMaQ9HOtY2gWsl2Wq+sABmMVi9z3DhKWQQ==
   dependencies:
     async "^2.4.1"
     loader-utils "^1.1.0"
@@ -2196,120 +4345,197 @@ extract-text-webpack-plugin@^3.0.2:
 
 extsprintf@1.3.0:
   version "1.3.0"
-  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05"
+  resolved "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz"
+  integrity sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=
 
 extsprintf@^1.2.0:
   version "1.4.0"
-  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.0.tgz#e2689f8f356fad62cca65a3a91c5df5f9551692f"
+  resolved "https://registry.npmjs.org/extsprintf/-/extsprintf-1.4.0.tgz"
+  integrity sha1-4mifjzVvrWLMplo6kcXfX5VRaS8=
+
+fake-mediastreamtrack@^1.1.6:
+  version "1.1.6"
+  resolved "https://registry.npmjs.org/fake-mediastreamtrack/-/fake-mediastreamtrack-1.1.6.tgz"
+  integrity sha512-lcoO5oPsW57istAsnjvQxNjBEahi18OdUhWfmEewwfPfzNZnji5OXuodQM+VnUPi/1HnQRJ6gBUjbt1TNXrkjQ==
+  dependencies:
+    event-target-shim "^5.0.1"
+    uuid "^8.1.0"
 
 fast-deep-equal@^1.0.0:
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz#c053477817c86b51daa853c81e059b733d023614"
-
-fast-deep-equal@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz#7b05218ddf9667bf7f370bf7fdb2cb15fdd0aa49"
+  resolved "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz"
+  integrity sha1-wFNHeBfIa1HaqFPIHgWbcz0CNhQ=
 
-fast-diff@1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.1.2.tgz#4b62c42b8e03de3f848460b639079920695d0154"
+fast-deep-equal@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.1.tgz"
+  integrity sha512-8UEa58QDLauDNfpbrX55Q9jrGHThw2ZMdOky5Gl1CDtVeJDPVrG4Jxx1N8jw2gkWaff5UUuX1KJd+9zGe2B+ZA==
 
-fast-json-stable-stringify@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz#d5142c0caee6b1189f87d3a76111064f86c8bbf2"
+fast-json-stable-stringify@2.x, fast-json-stable-stringify@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz"
+  integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==
 
-fastparse@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.1.tgz#d1e2643b38a94d7583b479060e6c4affc94071f8"
+fast-levenshtein@~2.0.6:
+  version "2.0.6"
+  resolved "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz"
+  integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
 
 faye-websocket@^0.10.0:
   version "0.10.0"
-  resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.10.0.tgz#4e492f8d04dfb6f89003507f6edbf2d501e7c6f4"
+  resolved "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.10.0.tgz"
+  integrity sha1-TkkvjQTftviQA1B/btvy1QHnxvQ=
   dependencies:
     websocket-driver ">=0.5.1"
 
-faye-websocket@~0.11.0:
-  version "0.11.1"
-  resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.11.1.tgz#f0efe18c4f56e4f40afc7e06c719fd5ee6188f38"
+faye-websocket@~0.11.1:
+  version "0.11.3"
+  resolved "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.3.tgz"
+  integrity sha512-D2y4bovYpzziGgbHYtGCMjlJM36vAl/y+xUyn1C+FVx8szd1E+86KwVw6XvYSzOP8iMpm1X0I4xJD+QtUb36OA==
   dependencies:
     websocket-driver ">=0.5.1"
 
-file-loader@^1.1.11:
-  version "1.1.11"
-  resolved "http://registry.npmjs.org/file-loader/-/file-loader-1.1.11.tgz#6fe886449b0f2a936e43cabaac0cdbfb369506f8"
+fb-watchman@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/fb-watchman/-/fb-watchman-2.0.1.tgz"
+  integrity sha512-DkPJKQeY6kKwmuMretBhr7G6Vodr7bFwDYTXIkfG1gjvNpaxBTQV3PbXg6bR1c1UP4jPOX0jHUbbHANL9vRjVg==
   dependencies:
-    loader-utils "^1.0.2"
-    schema-utils "^0.4.5"
+    bser "2.1.1"
+
+figgy-pudding@^3.5.1:
+  version "3.5.2"
+  resolved "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.2.tgz"
+  integrity sha512-0btnI/H8f2pavGMN8w40mlSKOfTK2SVJmBfBeVIj3kNw0swwgzyRq0d5TJVOwodFmtvpPeWPN/MCcfuWF0Ezbw==
+
+file-loader@^4.0.0:
+  version "4.3.0"
+  resolved "https://registry.npmjs.org/file-loader/-/file-loader-4.3.0.tgz"
+  integrity sha512-aKrYPYjF1yG3oX0kWRrqrSMfgftm7oJW5M+m4owoldH5C51C0RkIwB++JbRvEW3IU6/ZG5n8UvEcdgwOt2UOWA==
+  dependencies:
+    loader-utils "^1.2.3"
+    schema-utils "^2.5.0"
+
+file-uri-to-path@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz#553a7b8446ff6f684359c445f1e37a05dacc33dd"
+  integrity sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==
 
 fill-range@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-4.0.0.tgz#d544811d428f98eb06a63dc402d2403c328c38f7"
+  resolved "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz"
+  integrity sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=
   dependencies:
     extend-shallow "^2.0.1"
     is-number "^3.0.0"
     repeat-string "^1.6.1"
     to-regex-range "^2.1.0"
 
-finalhandler@1.1.1:
-  version "1.1.1"
-  resolved "http://registry.npmjs.org/finalhandler/-/finalhandler-1.1.1.tgz#eebf4ed840079c83f4249038c9d703008301b105"
+fill-range@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz"
+  integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==
+  dependencies:
+    to-regex-range "^5.0.1"
+
+fill-range@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.1.1.tgz#44265d3cac07e3ea7dc247516380643754a05292"
+  integrity sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==
+  dependencies:
+    to-regex-range "^5.0.1"
+
+finalhandler@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz"
+  integrity sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==
   dependencies:
     debug "2.6.9"
     encodeurl "~1.0.2"
     escape-html "~1.0.3"
     on-finished "~2.3.0"
-    parseurl "~1.3.2"
-    statuses "~1.4.0"
+    parseurl "~1.3.3"
+    statuses "~1.5.0"
     unpipe "~1.0.0"
 
-find-cache-dir@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-1.0.0.tgz#9288e3e9e3cc3748717d39eade17cf71fc30ee6f"
+find-cache-dir@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-2.1.0.tgz"
+  integrity sha512-Tq6PixE0w/VMFfCgbONnkiQIVol/JJL7nRMi20fqzA4NRs9AfeqMGeRdPi3wIhYkxjeBaWh2rxwapn5Tu3IqOQ==
   dependencies:
     commondir "^1.0.1"
-    make-dir "^1.0.0"
-    pkg-dir "^2.0.0"
+    make-dir "^2.0.0"
+    pkg-dir "^3.0.0"
 
-find-up@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/find-up/-/find-up-2.1.0.tgz#45d1b7e506c717ddd482775a2b77920a3c0c57a7"
+find-cache-dir@^3.0.0:
+  version "3.2.0"
+  resolved "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.2.0.tgz"
+  integrity sha512-1JKclkYYsf1q9WIJKLZa9S9muC+08RIjzAlLrK4QcYLJMS6mk9yombQ9qf+zJ7H9LS800k0s44L4sDq9VYzqyg==
   dependencies:
-    locate-path "^2.0.0"
+    commondir "^1.0.1"
+    make-dir "^3.0.0"
+    pkg-dir "^4.1.0"
 
 find-up@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.yarnpkg.com/find-up/-/find-up-3.0.0.tgz#49169f1d7993430646da61ecc5ae355c21c97b73"
+  resolved "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz"
+  integrity sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==
   dependencies:
     locate-path "^3.0.0"
 
-flatten@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782"
+find-up@^4.0.0, find-up@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz"
+  integrity sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==
+  dependencies:
+    locate-path "^5.0.0"
+    path-exists "^4.0.0"
 
-flush-write-stream@^1.0.0:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/flush-write-stream/-/flush-write-stream-1.0.3.tgz#c5d586ef38af6097650b49bc41b55fabb19f35bd"
+findup-sync@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/findup-sync/-/findup-sync-3.0.0.tgz"
+  integrity sha512-YbffarhcicEhOrm4CtrwdKBdCuz576RLdhJDsIfvNtxUuhdRet1qZcsMjqbePtAseKdAnDyM/IyXbu7PRPRLYg==
   dependencies:
-    inherits "^2.0.1"
-    readable-stream "^2.0.4"
+    detect-file "^1.0.0"
+    is-glob "^4.0.0"
+    micromatch "^3.0.4"
+    resolve-dir "^1.0.1"
 
-follow-redirects@^1.0.0:
-  version "1.5.9"
-  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.5.9.tgz#c9ed9d748b814a39535716e531b9196a845d89c6"
+flush-write-stream@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/flush-write-stream/-/flush-write-stream-1.1.1.tgz"
+  integrity sha512-3Z4XhFZ3992uIq0XOqb9AreonueSYphE6oYbpt5+3u06JWklbsPkNv3ZKkP9Bz/r+1MWCaMoSQ28P85+1Yc77w==
   dependencies:
-    debug "=3.1.0"
+    inherits "^2.0.3"
+    readable-stream "^2.3.6"
+
+follow-redirects@^1.0.0, follow-redirects@^1.14.9:
+  version "1.15.1"
+  resolved "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.1.tgz"
+  integrity sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA==
 
 for-in@^1.0.2:
   version "1.0.2"
-  resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
+  resolved "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz"
+  integrity sha1-gQaNKVqBQuwKxybG4iAMMPttXoA=
 
 forever-agent@~0.6.1:
   version "0.6.1"
-  resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91"
+  resolved "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz"
+  integrity sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=
+
+form-data@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz"
+  integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.8"
+    mime-types "^2.1.12"
 
 form-data@~2.3.2:
   version "2.3.3"
-  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.3.3.tgz#dcce52c05f644f298c6a7ab936bd724ceffbf3a6"
+  resolved "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz"
+  integrity sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==
   dependencies:
     asynckit "^0.4.0"
     combined-stream "^1.0.6"
@@ -2317,21 +4543,25 @@ form-data@~2.3.2:
 
 forwarded@~0.1.2:
   version "0.1.2"
-  resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84"
+  resolved "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz"
+  integrity sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ=
 
 fragment-cache@^0.2.1:
   version "0.2.1"
-  resolved "https://registry.yarnpkg.com/fragment-cache/-/fragment-cache-0.2.1.tgz#4290fad27f13e89be7f33799c6bc5a0abfff0d19"
+  resolved "https://registry.npmjs.org/fragment-cache/-/fragment-cache-0.2.1.tgz"
+  integrity sha1-QpD60n8T6Jvn8zeZxrxaCr//DRk=
   dependencies:
     map-cache "^0.2.2"
 
 fresh@0.5.2:
   version "0.5.2"
-  resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
+  resolved "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz"
+  integrity sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=
 
 friendly-errors-webpack-plugin@^1.6.1:
   version "1.7.0"
-  resolved "https://registry.yarnpkg.com/friendly-errors-webpack-plugin/-/friendly-errors-webpack-plugin-1.7.0.tgz#efc86cbb816224565861a1be7a9d84d0aafea136"
+  resolved "https://registry.npmjs.org/friendly-errors-webpack-plugin/-/friendly-errors-webpack-plugin-1.7.0.tgz"
+  integrity sha512-K27M3VK30wVoOarP651zDmb93R9zF28usW4ocaK3mfQeIEI5BPht/EzZs5E8QLLwbLRJQMwscAjDxYPb1FuNiw==
   dependencies:
     chalk "^1.1.3"
     error-stack-parser "^2.0.0"
@@ -2339,20 +4569,23 @@ friendly-errors-webpack-plugin@^1.6.1:
 
 from2@^2.1.0:
   version "2.3.0"
-  resolved "https://registry.yarnpkg.com/from2/-/from2-2.3.0.tgz#8bfb5502bde4a4d36cfdeea007fcca21d7e382af"
+  resolved "https://registry.npmjs.org/from2/-/from2-2.3.0.tgz"
+  integrity sha1-i/tVAr3kpNNs/e6gB/zKIdfjgq8=
   dependencies:
     inherits "^2.0.1"
     readable-stream "^2.0.0"
 
-fs-minipass@^1.2.5:
-  version "1.2.5"
-  resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-1.2.5.tgz#06c277218454ec288df77ada54a03b8702aacb9d"
+fs-minipass@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz"
+  integrity sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==
   dependencies:
-    minipass "^2.2.1"
+    minipass "^3.0.0"
 
 fs-write-stream-atomic@^1.0.8:
   version "1.0.10"
-  resolved "https://registry.yarnpkg.com/fs-write-stream-atomic/-/fs-write-stream-atomic-1.0.10.tgz#b47df53493ef911df75731e70a9ded0189db40c9"
+  resolved "https://registry.npmjs.org/fs-write-stream-atomic/-/fs-write-stream-atomic-1.0.10.tgz"
+  integrity sha1-tH31NJPvkR33VzHnCp3tAYnbQMk=
   dependencies:
     graceful-fs "^4.1.2"
     iferr "^0.1.5"
@@ -2361,67 +4594,119 @@ fs-write-stream-atomic@^1.0.8:
 
 fs.realpath@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
+  resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
+  integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8=
 
-fsevents@^1.2.2:
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.2.4.tgz#f41dcb1af2582af3692da36fc55cbd8e1041c426"
+fsevents@^1.2.7:
+  version "1.2.13"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.2.13.tgz#f325cb0455592428bcf11b383370ef70e3bfcc38"
+  integrity sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==
   dependencies:
-    nan "^2.9.2"
-    node-pre-gyp "^0.10.0"
+    bindings "^1.5.0"
+    nan "^2.12.1"
 
-fullcalendar@^3.9.0:
-  version "3.9.0"
-  resolved "http://registry.npmjs.org/fullcalendar/-/fullcalendar-3.9.0.tgz#b608a9989f3416f0b1d526c6bdfeeaf2ac79eda5"
-  dependencies:
-    jquery "2 - 3"
-    moment "^2.20.1"
+fsevents@^2.1.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
+  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
+
+fsevents@~2.3.2:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
+  integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
 
 function-bind@^1.1.1:
   version "1.1.1"
-  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
+  resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz"
+  integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
 
-gauge@~2.7.3:
-  version "2.7.4"
-  resolved "https://registry.yarnpkg.com/gauge/-/gauge-2.7.4.tgz#2c03405c7538c39d7eb37b317022e325fb018bf7"
-  dependencies:
-    aproba "^1.0.3"
-    console-control-strings "^1.0.0"
-    has-unicode "^2.0.0"
-    object-assign "^4.1.0"
-    signal-exit "^3.0.0"
-    string-width "^1.0.1"
-    strip-ansi "^3.0.1"
-    wide-align "^1.1.0"
+gensync@^1.0.0-beta.1:
+  version "1.0.0-beta.1"
+  resolved "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.1.tgz"
+  integrity sha512-r8EC6NO1sngH/zdD9fiRDLdcgnbayXah+mLgManTaIZJqEC1MZstmnox8KpnI2/fxQwrp5OpCOYWLp4rBl4Jcg==
+
+geojson-vt@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/geojson-vt/-/geojson-vt-4.0.2.tgz#1162f6c7d61a0ba305b1030621e6e111f847828a"
+  integrity sha512-AV9ROqlNqoZEIJGfm1ncNjEXfkz2hdFlZf0qkVfmkwdKa8vj7H16YUOT81rJw1rdFhyEDlN2Tds91p/glzbl5A==
 
 get-caller-file@^1.0.1:
   version "1.0.3"
-  resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.3.tgz#f978fa4c90d1dfe7ff2d6beda2a515e713bdcf4a"
+  resolved "https://registry.npmjs.org/get-caller-file/-/get-caller-file-1.0.3.tgz"
+  integrity sha512-3t6rVToeoZfYSGd8YoLFR2DJkiQrIiUrGcjvFX2mDw3bn6k2OtwHN0TNCLbBO+w8qTvimhDkv+LSscbJY1vE6w==
 
-get-stream@^3.0.0:
-  version "3.0.0"
-  resolved "http://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz#8e943d1358dc37555054ecbe2edb05aa174ede14"
+get-caller-file@^2.0.1:
+  version "2.0.5"
+  resolved "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz"
+  integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
+
+get-package-type@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.npmjs.org/get-package-type/-/get-package-type-0.1.0.tgz"
+  integrity sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==
+
+get-stream@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz"
+  integrity sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==
+  dependencies:
+    pump "^3.0.0"
+
+get-stream@^5.0.0:
+  version "5.2.0"
+  resolved "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz"
+  integrity sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==
+  dependencies:
+    pump "^3.0.0"
+
+get-tsconfig@^4.7.0:
+  version "4.10.0"
+  resolved "https://registry.yarnpkg.com/get-tsconfig/-/get-tsconfig-4.10.0.tgz#403a682b373a823612475a4c2928c7326fc0f6bb"
+  integrity sha512-kGzZ3LWWQcGIAmg6iWvXn0ei6WDtV26wzHRMwDSzmAbcXrTEXxHy6IehI6/4eT6VRKyMP1eF1VqwrVUmE/LR7A==
+  dependencies:
+    resolve-pkg-maps "^1.0.0"
+
+get-stream@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-6.0.1.tgz#a262d8eef67aced57c2852ad6167526a43cbf7b7"
+  integrity sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==
 
 get-value@^2.0.3, get-value@^2.0.6:
   version "2.0.6"
-  resolved "https://registry.yarnpkg.com/get-value/-/get-value-2.0.6.tgz#dc15ca1c672387ca76bd37ac0a395ba2042a2c28"
+  resolved "https://registry.npmjs.org/get-value/-/get-value-2.0.6.tgz"
+  integrity sha1-3BXKHGcjh8p2vTesCjlbogQqLCg=
 
 getpass@^0.1.1:
   version "0.1.7"
-  resolved "https://registry.yarnpkg.com/getpass/-/getpass-0.1.7.tgz#5eff8e3e684d569ae4cb2b1282604e8ba62149fa"
+  resolved "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz"
+  integrity sha1-Xv+OPmhNVprkyysSgmBOi6YhSfo=
   dependencies:
     assert-plus "^1.0.0"
 
+gl-matrix@^3.4.3:
+  version "3.4.3"
+  resolved "https://registry.yarnpkg.com/gl-matrix/-/gl-matrix-3.4.3.tgz#fc1191e8320009fd4d20e9339595c6041ddc22c9"
+  integrity sha512-wcCp8vu8FT22BnvKVPjXa/ICBWRq/zjFfdofZy1WSpQZpphblv12/bOQLBC1rMM7SGOFS9ltVmKOHil5+Ml7gA==
+
 glob-parent@^3.1.0:
   version "3.1.0"
-  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-3.1.0.tgz#9e6af6299d8d3bd2bd40430832bd113df906c5ae"
+  resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz"
+  integrity sha1-nmr2KZ2NO9K9QEMIMr0RPfkGxa4=
   dependencies:
     is-glob "^3.1.0"
     path-dirname "^1.0.0"
 
-glob@^7.0.3, glob@^7.0.5, glob@^7.1.1, glob@^7.1.2:
-  version "7.1.3"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.3.tgz#3960832d3f1574108342dafd3a67b332c0969df1"
+glob-parent@~5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
+  integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
+  dependencies:
+    is-glob "^4.0.1"
+
+glob@^7.0.3, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4:
+  version "7.1.6"
+  resolved "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz"
+  integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
   dependencies:
     fs.realpath "^1.0.0"
     inflight "^1.0.4"
@@ -2430,20 +4715,68 @@ glob@^7.0.3, glob@^7.0.5, glob@^7.1.1, glob@^7.1.2:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-global-modules-path@^2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/global-modules-path/-/global-modules-path-2.3.0.tgz#b0e2bac6beac39745f7db5c59d26a36a0b94f7dc"
+global-modules@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/global-modules/-/global-modules-2.0.0.tgz"
+  integrity sha512-NGbfmJBp9x8IxyJSd1P+otYK8vonoJactOogrVfFRIAEY1ukil8RSKDz2Yo7wh1oihl51l/r6W4epkeKJHqL8A==
+  dependencies:
+    global-prefix "^3.0.0"
+
+global-modules@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/global-modules/-/global-modules-1.0.0.tgz"
+  integrity sha512-sKzpEkf11GpOFuw0Zzjzmt4B4UZwjOcG757PPvrfhxcLFbq0wpsgpOqxpxtxFiCG4DtG93M6XRVbF2oGdev7bg==
+  dependencies:
+    global-prefix "^1.0.1"
+    is-windows "^1.0.1"
+    resolve-dir "^1.0.0"
+
+global-prefix@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/global-prefix/-/global-prefix-1.0.2.tgz"
+  integrity sha1-2/dDxsFJklk8ZVVoy2btMsASLr4=
+  dependencies:
+    expand-tilde "^2.0.2"
+    homedir-polyfill "^1.0.1"
+    ini "^1.3.4"
+    is-windows "^1.0.1"
+    which "^1.2.14"
+
+global-prefix@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/global-prefix/-/global-prefix-3.0.0.tgz"
+  integrity sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==
+  dependencies:
+    ini "^1.3.5"
+    kind-of "^6.0.2"
+    which "^1.3.1"
+
+global-prefix@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/global-prefix/-/global-prefix-4.0.0.tgz#e9cc79aab9be1d03287e156a3f912dd0895463ed"
+  integrity sha512-w0Uf9Y9/nyHinEk5vMJKRie+wa4kR5hmDbEhGGds/kG1PwGLLHKRoNMeJOyCQjjBkANlnScqgzcFwGHgmgLkVA==
+  dependencies:
+    ini "^4.1.3"
+    kind-of "^6.0.3"
+    which "^4.0.0"
 
 global@^4.3.1:
-  version "4.3.2"
-  resolved "https://registry.yarnpkg.com/global/-/global-4.3.2.tgz#e76989268a6c74c38908b1305b10fc0e394e9d0f"
+  version "4.4.0"
+  resolved "https://registry.npmjs.org/global/-/global-4.4.0.tgz"
+  integrity sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==
   dependencies:
     min-document "^2.19.0"
-    process "~0.5.1"
+    process "^0.11.10"
+
+globals@^11.1.0:
+  version "11.12.0"
+  resolved "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz"
+  integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
 
 globby@^6.1.0:
   version "6.1.0"
-  resolved "https://registry.yarnpkg.com/globby/-/globby-6.1.0.tgz#f5a6d70e8395e21c858fb0489d64df02424d506c"
+  resolved "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz"
+  integrity sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=
   dependencies:
     array-union "^1.0.1"
     glob "^7.0.3"
@@ -2453,7 +4786,8 @@ globby@^6.1.0:
 
 globby@^7.1.1:
   version "7.1.1"
-  resolved "https://registry.yarnpkg.com/globby/-/globby-7.1.1.tgz#fb2ccff9401f8600945dfada97440cca972b8680"
+  resolved "https://registry.npmjs.org/globby/-/globby-7.1.1.tgz"
+  integrity sha1-+yzP+UAfhgCUXfral0QMypcrhoA=
   dependencies:
     array-union "^1.0.1"
     dir-glob "^2.0.0"
@@ -2462,54 +4796,74 @@ globby@^7.1.1:
     pify "^3.0.0"
     slash "^1.0.0"
 
-graceful-fs@^4.1.11, graceful-fs@^4.1.2:
-  version "4.1.11"
-  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
+graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.2.2, graceful-fs@^4.2.4:
+  version "4.2.4"
+  resolved "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.4.tgz"
+  integrity sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==
 
 growly@^1.3.0:
   version "1.3.0"
-  resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
+  resolved "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz"
+  integrity sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=
 
-handle-thing@^1.2.5:
-  version "1.2.5"
-  resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-1.2.5.tgz#fd7aad726bf1a5fd16dfc29b2f7a6601d27139c4"
+gzip-size@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz"
+  integrity sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==
+  dependencies:
+    duplexer "^0.1.2"
+
+h264-profile-level-id@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/h264-profile-level-id/-/h264-profile-level-id-1.0.1.tgz"
+  integrity sha512-D3Rln/jKNjKDW5ZTJTK3niSoOGE+pFqPvRHHVgQN3G7umcn/zWGPUo8Q8VpDj16x3hKz++zVviRNRmXu5cpN+Q==
+  dependencies:
+    debug "^4.1.1"
+
+handle-thing@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.0.tgz"
+  integrity sha512-d4sze1JNC454Wdo2fkuyzCr6aHcbL6PGGuFAz0Li/NcOm1tCHGnWDRmJP85dh9IhQErTc2svWFEX5xHIOo//kQ==
 
 har-schema@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-2.0.0.tgz#a94c2224ebcac04782a0d9035521f24735b7ec92"
+  resolved "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz"
+  integrity sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI=
 
-har-validator@~5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-5.1.0.tgz#44657f5688a22cfd4b72486e81b3a3fb11742c29"
+har-validator@~5.1.3:
+  version "5.1.3"
+  resolved "https://registry.npmjs.org/har-validator/-/har-validator-5.1.3.tgz"
+  integrity sha512-sNvOCzEQNr/qrvJgc3UG/kD4QtlHycrzwS+6mfTrrSq97BvaYcPZZI1ZSqGSPR73Cxn4LKTD4PttRwfU7jWq5g==
   dependencies:
-    ajv "^5.3.0"
+    ajv "^6.5.5"
     har-schema "^2.0.0"
 
 has-ansi@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91"
+  resolved "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz"
+  integrity sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=
   dependencies:
     ansi-regex "^2.0.0"
 
-has-flag@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-1.0.0.tgz#9d9e793165ce017a00f00418c43f942a7b1d11fa"
-
 has-flag@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
+  resolved "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz"
+  integrity sha1-tdRU3CGZriJWmfNGfloH87lVuv0=
 
-has-symbols@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.0.tgz#ba1a8f1af2a0fc39650f5c850367704122063b44"
+has-flag@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz"
+  integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
 
-has-unicode@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
+has-symbols@^1.0.0, has-symbols@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.1.tgz"
+  integrity sha512-PLcsoqu++dmEIZB+6totNFKq/7Do+Z0u4oT0zKOJNl3lYK6vGwwu2hjHs+68OEZbTjiUE9bgOABXbP/GvrS0Kg==
 
 has-value@^0.3.1:
   version "0.3.1"
-  resolved "https://registry.yarnpkg.com/has-value/-/has-value-0.3.1.tgz#7b1f58bada62ca827ec0a2078025654845995e1f"
+  resolved "https://registry.npmjs.org/has-value/-/has-value-0.3.1.tgz"
+  integrity sha1-ex9YutpiyoJ+wKIHgCVlSEWZXh8=
   dependencies:
     get-value "^2.0.3"
     has-values "^0.1.4"
@@ -2517,7 +4871,8 @@ has-value@^0.3.1:
 
 has-value@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/has-value/-/has-value-1.0.0.tgz#18b281da585b1c5c51def24c930ed29a0be6b177"
+  resolved "https://registry.npmjs.org/has-value/-/has-value-1.0.0.tgz"
+  integrity sha1-GLKB2lhbHFxR3vJMkw7SmgvmsXc=
   dependencies:
     get-value "^2.0.6"
     has-values "^1.0.0"
@@ -2525,79 +4880,135 @@ has-value@^1.0.0:
 
 has-values@^0.1.4:
   version "0.1.4"
-  resolved "https://registry.yarnpkg.com/has-values/-/has-values-0.1.4.tgz#6d61de95d91dfca9b9a02089ad384bff8f62b771"
+  resolved "https://registry.npmjs.org/has-values/-/has-values-0.1.4.tgz"
+  integrity sha1-bWHeldkd/Km5oCCJrThL/49it3E=
 
 has-values@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/has-values/-/has-values-1.0.0.tgz#95b0b63fec2146619a6fe57fe75628d5a39efe4f"
+  resolved "https://registry.npmjs.org/has-values/-/has-values-1.0.0.tgz"
+  integrity sha1-lbC2P+whRmGab+V/51Yo1aOe/k8=
   dependencies:
     is-number "^3.0.0"
     kind-of "^4.0.0"
 
-has@^1.0.1:
+has@^1.0.0, has@^1.0.3:
   version "1.0.3"
-  resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796"
+  resolved "https://registry.npmjs.org/has/-/has-1.0.3.tgz"
+  integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==
   dependencies:
     function-bind "^1.1.1"
 
 hash-base@^3.0.0:
   version "3.0.4"
-  resolved "https://registry.yarnpkg.com/hash-base/-/hash-base-3.0.4.tgz#5fc8686847ecd73499403319a6b0a3f3f6ae4918"
+  resolved "https://registry.npmjs.org/hash-base/-/hash-base-3.0.4.tgz"
+  integrity sha1-X8hoaEfs1zSZQDMZprCj8/auSRg=
   dependencies:
     inherits "^2.0.1"
     safe-buffer "^5.0.1"
 
 hash.js@^1.0.0, hash.js@^1.0.3:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/hash.js/-/hash.js-1.1.5.tgz#e38ab4b85dfb1e0c40fe9265c0e9b54854c23812"
+  version "1.1.7"
+  resolved "https://registry.npmjs.org/hash.js/-/hash.js-1.1.7.tgz"
+  integrity sha512-taOaskGt4z4SOANNseOviYDvjEJinIkRgmp7LbKP2YTTmVxWBl87s/uzK9r+44BclBSp2X7K1hqeNfz9JbBeXA==
   dependencies:
     inherits "^2.0.3"
     minimalistic-assert "^1.0.1"
 
-he@1.1.x:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd"
+he@1.2.x:
+  version "1.2.0"
+  resolved "https://registry.npmjs.org/he/-/he-1.2.0.tgz"
+  integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
-hmac-drbg@^1.0.0:
+hex-color-regex@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz"
+  integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
+
+hmac-drbg@^1.0.1:
   version "1.0.1"
-  resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
+  resolved "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz"
+  integrity sha1-0nRXAQJabHdabFRXk+1QL8DGSaE=
   dependencies:
     hash.js "^1.0.3"
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
+homedir-polyfill@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz"
+  integrity sha512-eSmmWE5bZTK2Nou4g0AI3zZ9rswp7GRKoKXS1BLUkvPviOqs4YTN1djQIqrXy9k5gEtdLPy86JjRwsNM9tnDcA==
+  dependencies:
+    parse-passwd "^1.0.0"
+
+hosted-git-info@^2.1.4:
+  version "2.8.9"
+  resolved "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz"
+  integrity sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==
+
 hpack.js@^2.1.6:
   version "2.1.6"
-  resolved "https://registry.yarnpkg.com/hpack.js/-/hpack.js-2.1.6.tgz#87774c0949e513f42e84575b3c45681fade2a0b2"
+  resolved "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz"
+  integrity sha1-h3dMCUnlE/QuhFdbPEVoH63ioLI=
   dependencies:
     inherits "^2.0.1"
     obuf "^1.0.0"
     readable-stream "^2.0.1"
     wbuf "^1.1.0"
 
+hsl-regex@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/hsl-regex/-/hsl-regex-1.0.0.tgz"
+  integrity sha1-1JMwx4ntgZ4nakwNJy3/owsY/m4=
+
+hsla-regex@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/hsla-regex/-/hsla-regex-1.0.0.tgz"
+  integrity sha1-wc56MWjIxmFAM6S194d/OyJfnDg=
+
+hsluv@^0.0.3:
+  version "0.0.3"
+  resolved "https://registry.npmjs.org/hsluv/-/hsluv-0.0.3.tgz"
+  integrity sha1-gpEH2vtKn4tSoYCe0C4JHq3mdUw=
+
 html-comment-regex@^1.1.0:
   version "1.1.2"
-  resolved "https://registry.yarnpkg.com/html-comment-regex/-/html-comment-regex-1.1.2.tgz#97d4688aeb5c81886a364faa0cad1dda14d433a7"
+  resolved "https://registry.npmjs.org/html-comment-regex/-/html-comment-regex-1.1.2.tgz"
+  integrity sha512-P+M65QY2JQ5Y0G9KKdlDpo0zK+/OHptU5AaBwUfAIDJZk1MYf32Frm84EcOytfJE0t5JvkAnKlmjsXDnWzCJmQ==
+
+html-encoding-sniffer@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz"
+  integrity sha512-D5JbOMBIR/TVZkubHT+OyT2705QvogUW4IBn6nHd756OwieSF9aDYFj4dv6HHEVGYbHaLETa3WggZYWWMyy3ZQ==
+  dependencies:
+    whatwg-encoding "^1.0.5"
 
-html-entities@^1.2.0:
+html-entities@^1.2.1:
   version "1.2.1"
-  resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.2.1.tgz#0df29351f0721163515dfb9e5543e5f6eed5162f"
+  resolved "https://registry.npmjs.org/html-entities/-/html-entities-1.2.1.tgz"
+  integrity sha1-DfKTUfByEWNRXfueVUPl9u7VFi8=
+
+html-escaper@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz"
+  integrity sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==
 
 html-minifier@^3.2.3:
-  version "3.5.20"
-  resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.5.20.tgz#7b19fd3caa0cb79f7cde5ee5c3abdf8ecaa6bb14"
+  version "3.5.21"
+  resolved "https://registry.npmjs.org/html-minifier/-/html-minifier-3.5.21.tgz"
+  integrity sha512-LKUKwuJDhxNa3uf/LPR/KVjm/l3rBqtYeCOAekvG8F1vItxMUpueGd94i/asDDr8/1u7InxzFA5EeGjhhG5mMA==
   dependencies:
     camel-case "3.0.x"
     clean-css "4.2.x"
     commander "2.17.x"
-    he "1.1.x"
+    he "1.2.x"
     param-case "2.1.x"
     relateurl "0.2.x"
     uglify-js "3.4.x"
 
 html-webpack-plugin@^3.2.0:
   version "3.2.0"
-  resolved "http://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-3.2.0.tgz#b01abbd723acaaa7b37b6af4492ebda03d9dd37b"
+  resolved "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-3.2.0.tgz"
+  integrity sha1-sBq71yOsqqeze2r0SS69oD2d03s=
   dependencies:
     html-minifier "^3.2.3"
     loader-utils "^0.2.16"
@@ -2607,52 +5018,83 @@ html-webpack-plugin@^3.2.0:
     toposort "^1.0.0"
     util.promisify "1.0.0"
 
-htmlparser2@~3.3.0:
-  version "3.3.0"
-  resolved "http://registry.npmjs.org/htmlparser2/-/htmlparser2-3.3.0.tgz#cc70d05a59f6542e43f0e685c982e14c924a9efe"
+htmlparser2@^3.3.0:
+  version "3.10.1"
+  resolved "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz"
+  integrity sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ==
   dependencies:
-    domelementtype "1"
-    domhandler "2.1"
-    domutils "1.1"
-    readable-stream "1.0"
+    domelementtype "^1.3.1"
+    domhandler "^2.3.0"
+    domutils "^1.5.1"
+    entities "^1.1.1"
+    inherits "^2.0.1"
+    readable-stream "^3.1.1"
 
 http-deceiver@^1.2.7:
   version "1.2.7"
-  resolved "https://registry.yarnpkg.com/http-deceiver/-/http-deceiver-1.2.7.tgz#fa7168944ab9a519d337cb0bec7284dc3e723d87"
+  resolved "https://registry.npmjs.org/http-deceiver/-/http-deceiver-1.2.7.tgz"
+  integrity sha1-+nFolEq5pRnTN8sL7HKE3D5yPYc=
+
+http-errors@1.7.2:
+  version "1.7.2"
+  resolved "https://registry.npmjs.org/http-errors/-/http-errors-1.7.2.tgz"
+  integrity sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==
+  dependencies:
+    depd "~1.1.2"
+    inherits "2.0.3"
+    setprototypeof "1.1.1"
+    statuses ">= 1.5.0 < 2"
+    toidentifier "1.0.0"
 
-http-errors@1.6.3, http-errors@~1.6.2, http-errors@~1.6.3:
+http-errors@~1.6.2:
   version "1.6.3"
-  resolved "http://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz#8b55680bb4be283a0b5bf4ea2e38580be1d9320d"
+  resolved "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz"
+  integrity sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=
   dependencies:
     depd "~1.1.2"
     inherits "2.0.3"
     setprototypeof "1.1.0"
     statuses ">= 1.4.0 < 2"
 
-http-parser-js@>=0.4.0:
-  version "0.4.13"
-  resolved "https://registry.yarnpkg.com/http-parser-js/-/http-parser-js-0.4.13.tgz#3bd6d6fde6e3172c9334c3b33b6c193d80fe1137"
-
-http-proxy-middleware@~0.18.0:
-  version "0.18.0"
-  resolved "http://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-0.18.0.tgz#0987e6bb5a5606e5a69168d8f967a87f15dd8aab"
+http-errors@~1.7.2:
+  version "1.7.3"
+  resolved "https://registry.npmjs.org/http-errors/-/http-errors-1.7.3.tgz"
+  integrity sha512-ZTTX0MWrsQ2ZAhA1cejAwDLycFsd7I7nVtnkT3Ol0aqodaKW+0CTZDQ1uBv5whptCnc8e8HeRRJxRs0kmm/Qfw==
   dependencies:
-    http-proxy "^1.16.2"
+    depd "~1.1.2"
+    inherits "2.0.4"
+    setprototypeof "1.1.1"
+    statuses ">= 1.5.0 < 2"
+    toidentifier "1.0.0"
+
+"http-parser-js@>=0.4.0 <0.4.11":
+  version "0.4.10"
+  resolved "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.4.10.tgz"
+  integrity sha1-ksnBN0w1CF912zWexWzCV8u5P6Q=
+
+http-proxy-middleware@0.19.1:
+  version "0.19.1"
+  resolved "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-0.19.1.tgz"
+  integrity sha512-yHYTgWMQO8VvwNS22eLLloAkvungsKdKTLO8AJlftYIKNfJr3GK3zK0ZCfzDDGUBttdGc8xFy1mCitvNKQtC3Q==
+  dependencies:
+    http-proxy "^1.17.0"
     is-glob "^4.0.0"
-    lodash "^4.17.5"
-    micromatch "^3.1.9"
+    lodash "^4.17.11"
+    micromatch "^3.1.10"
 
-http-proxy@^1.16.2:
-  version "1.17.0"
-  resolved "https://registry.yarnpkg.com/http-proxy/-/http-proxy-1.17.0.tgz#7ad38494658f84605e2f6db4436df410f4e5be9a"
+http-proxy@^1.17.0:
+  version "1.18.1"
+  resolved "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz"
+  integrity sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==
   dependencies:
-    eventemitter3 "^3.0.0"
+    eventemitter3 "^4.0.0"
     follow-redirects "^1.0.0"
     requires-port "^1.0.0"
 
 http-signature@~1.2.0:
   version "1.2.0"
-  resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.2.0.tgz#9aecd925114772f3d95b65a60abb8f7c18fbace1"
+  resolved "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz"
+  integrity sha1-muzZJRFHcvPZW2WmCruPfBj7rOE=
   dependencies:
     assert-plus "^1.0.0"
     jsprim "^1.2.2"
@@ -2660,186 +5102,287 @@ http-signature@~1.2.0:
 
 https-browserify@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
+  resolved "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz"
+  integrity sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=
 
-iconv-lite@0.4, iconv-lite@^0.4.4:
-  version "0.4.24"
-  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
-  dependencies:
-    safer-buffer ">= 2.1.2 < 3"
+human-signals@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/human-signals/-/human-signals-1.1.1.tgz"
+  integrity sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==
 
-iconv-lite@0.4.23:
-  version "0.4.23"
-  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.23.tgz#297871f63be507adcfbfca715d0cd0eed84e9a63"
+iconv-lite@0.4, iconv-lite@0.4.24:
+  version "0.4.24"
+  resolved "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz"
+  integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
   dependencies:
     safer-buffer ">= 2.1.2 < 3"
 
-icss-replace-symbols@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz#06ea6f83679a7749e386cfe1fe812ae5db223ded"
-
-icss-utils@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-2.1.0.tgz#83f0a0ec378bf3246178b6c2ad9136f135b1c962"
+icss-utils@^4.0.0, icss-utils@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.npmjs.org/icss-utils/-/icss-utils-4.1.1.tgz"
+  integrity sha512-4aFq7wvWyMHKgxsH8QQtGpvbASCf+eM3wPRLI6R+MgAnTCZ6STYsRvttLvRWK0Nfif5piF394St3HeJDaljGPA==
   dependencies:
-    postcss "^6.0.1"
+    postcss "^7.0.14"
 
-ieee754@^1.1.4:
-  version "1.1.12"
-  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.12.tgz#50bf24e5b9c8bb98af4964c941cdb0918da7b60b"
+ieee754@^1.1.12, ieee754@^1.1.4:
+  version "1.2.1"
+  resolved "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz"
+  integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
 
 iferr@^0.1.5:
   version "0.1.5"
-  resolved "https://registry.yarnpkg.com/iferr/-/iferr-0.1.5.tgz#c60eed69e6d8fdb6b3104a1fcbca1c192dc5b501"
-
-ignore-walk@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/ignore-walk/-/ignore-walk-3.0.1.tgz#a83e62e7d272ac0e3b551aaa82831a19b69f82f8"
-  dependencies:
-    minimatch "^3.0.4"
+  resolved "https://registry.npmjs.org/iferr/-/iferr-0.1.5.tgz"
+  integrity sha1-xg7taebY/bazEEofy8ocGS3FtQE=
 
 ignore@^3.3.5:
   version "3.3.10"
-  resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.10.tgz#0a97fb876986e8081c631160f8f9f389157f0043"
+  resolved "https://registry.npmjs.org/ignore/-/ignore-3.3.10.tgz"
+  integrity sha512-Pgs951kaMm5GXP7MOvxERINe3gsaVjUWFm+UZPSq9xYriQAksyhg0csnS0KXSNRD5NmNdapXEpjxG49+AKh/ug==
+
+image-layout@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.npmjs.org/image-layout/-/image-layout-0.4.1.tgz"
+  integrity sha1-4kBDfSJq0Nm52ET6GEb2GZKxoYo=
 
 image-size@~0.5.0:
   version "0.5.5"
-  resolved "https://registry.yarnpkg.com/image-size/-/image-size-0.5.5.tgz#09dfd4ab9d20e29eb1c3e80b8990378df9e3cb9c"
+  resolved "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz"
+  integrity sha1-Cd/Uq50g4p6xw+gLiZA3jfnjy5w=
 
 import-cwd@^2.0.0:
   version "2.1.0"
-  resolved "https://registry.yarnpkg.com/import-cwd/-/import-cwd-2.1.0.tgz#aa6cf36e722761285cb371ec6519f53e2435b0a9"
+  resolved "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz"
+  integrity sha1-qmzzbnInYShcs3HsZRn1PiQ1sKk=
   dependencies:
     import-from "^2.1.0"
 
+import-fresh@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/import-fresh/-/import-fresh-2.0.0.tgz"
+  integrity sha1-2BNVwVYS04bGH53dOSLUMEgipUY=
+  dependencies:
+    caller-path "^2.0.0"
+    resolve-from "^3.0.0"
+
 import-from@^2.1.0:
   version "2.1.0"
-  resolved "https://registry.yarnpkg.com/import-from/-/import-from-2.1.0.tgz#335db7f2a7affd53aaa471d4b8021dee36b7f3b1"
+  resolved "https://registry.npmjs.org/import-from/-/import-from-2.1.0.tgz"
+  integrity sha1-M1238qev/VOqpHHUuAId7ja387E=
   dependencies:
     resolve-from "^3.0.0"
 
-import-local@^2.0.0:
+import-local@2.0.0, import-local@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/import-local/-/import-local-2.0.0.tgz#55070be38a5993cf18ef6db7e961f5bee5c5a09d"
+  resolved "https://registry.npmjs.org/import-local/-/import-local-2.0.0.tgz"
+  integrity sha512-b6s04m3O+s3CGSbqDIyP4R6aAwAeYlVq9+WUWep6iHa8ETRf9yei1U48C5MmfJmV9AiLYYBKPMq/W+/WRpQmCQ==
   dependencies:
     pkg-dir "^3.0.0"
     resolve-cwd "^2.0.0"
 
+import-local@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.npmjs.org/import-local/-/import-local-3.0.2.tgz"
+  integrity sha512-vjL3+w0oulAVZ0hBHnxa/Nm5TAurf9YLQJDhqRZyqb+VKGOB6LU8t9H1Nr5CIo16vh9XfJTOoHwU0B71S557gA==
+  dependencies:
+    pkg-dir "^4.2.0"
+    resolve-cwd "^3.0.0"
+
 imurmurhash@^0.1.4:
   version "0.1.4"
-  resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
+  resolved "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz"
+  integrity sha1-khi5srkoojixPcT7a21XbyMUU+o=
+
+indent-string@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz"
+  integrity sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==
 
 indexes-of@^1.0.1:
   version "1.0.1"
-  resolved "https://registry.yarnpkg.com/indexes-of/-/indexes-of-1.0.1.tgz#f30f716c8e2bd346c7b67d3df3915566a7c05607"
+  resolved "https://registry.npmjs.org/indexes-of/-/indexes-of-1.0.1.tgz"
+  integrity sha1-8w9xbI4r00bHtn0985FVZqfAVgc=
 
-indexof@0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/indexof/-/indexof-0.0.1.tgz#82dc336d232b9062179d05ab3293a66059fd435d"
+infer-owner@^1.0.3, infer-owner@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.npmjs.org/infer-owner/-/infer-owner-1.0.4.tgz"
+  integrity sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A==
 
 inflight@^1.0.4:
   version "1.0.6"
-  resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
+  resolved "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz"
+  integrity sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=
   dependencies:
     once "^1.3.0"
     wrappy "1"
 
-inherits@2, inherits@2.0.3, inherits@^2.0.1, inherits@^2.0.3, inherits@~2.0.1, inherits@~2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
+inherits@2, inherits@2.0.4, inherits@^2.0.1, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.1, inherits@~2.0.3:
+  version "2.0.4"
+  resolved "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz"
+  integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
 
 inherits@2.0.1:
   version "2.0.1"
-  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.1.tgz#b17d08d326b4423e568eff719f91b0b1cbdf69f1"
+  resolved "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
+  integrity sha1-sX0I0ya0Qj5Wjv9xn5GwscvfafE=
 
-ini@~1.3.0:
-  version "1.3.5"
-  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
+inherits@2.0.3:
+  version "2.0.3"
+  resolved "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz"
+  integrity sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=
 
-internal-ip@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/internal-ip/-/internal-ip-3.0.1.tgz#df5c99876e1d2eb2ea2d74f520e3f669a00ece27"
+ini@^1.3.4, ini@^1.3.5:
+  version "1.3.8"
+  resolved "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz"
+  integrity sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==
+
+ini@^4.1.3:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-4.1.3.tgz#4c359675a6071a46985eb39b14e4a2c0ec98a795"
+  integrity sha512-X7rqawQBvfdjS10YU1y1YVreA3SsLrW9dX2CewP2EbBJM4ypVNLDkO5y04gejPwKIY9lR+7r9gn3rFPt/kmWFg==
+
+internal-ip@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.npmjs.org/internal-ip/-/internal-ip-4.3.0.tgz"
+  integrity sha512-S1zBo1D6zcsyuC6PMmY5+55YMILQ9av8lotMx447Bq6SAgo/sDK6y6uUKmuYhW7eacnIhFfsPmCNYdDzsnnDCg==
   dependencies:
-    default-gateway "^2.6.0"
-    ipaddr.js "^1.5.2"
+    default-gateway "^4.2.0"
+    ipaddr.js "^1.9.0"
 
-interpret@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.1.0.tgz#7ed1b1410c6a0e0f78cf95d3b8440c63f78b8614"
+interpret@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.npmjs.org/interpret/-/interpret-1.2.0.tgz"
+  integrity sha512-mT34yGKMNceBQUoVn7iCDKDntA7SC6gycMAWzGx1z/CMCTV7b2AAtXlo3nRyHZ1FelRkQbQjprHSYGwzLtkVbw==
 
 invert-kv@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/invert-kv/-/invert-kv-2.0.0.tgz#7393f5afa59ec9ff5f67a27620d11c226e3eec02"
+  resolved "https://registry.npmjs.org/invert-kv/-/invert-kv-2.0.0.tgz"
+  integrity sha512-wPVv/y/QQ/Uiirj/vh3oP+1Ww+AWehmi1g5fFWGPF6IpCBCDVrhgHRMvrLfdYcwDh3QJbGXDW4JAuzxElLSqKA==
 
 ip-regex@^2.1.0:
   version "2.1.0"
-  resolved "https://registry.yarnpkg.com/ip-regex/-/ip-regex-2.1.0.tgz#fa78bf5d2e6913c911ce9f819ee5146bb6d844e9"
+  resolved "https://registry.npmjs.org/ip-regex/-/ip-regex-2.1.0.tgz"
+  integrity sha1-+ni/XS5pE8kRzp+BnuUUa7bYROk=
 
 ip@^1.1.0, ip@^1.1.5:
   version "1.1.5"
-  resolved "https://registry.yarnpkg.com/ip/-/ip-1.1.5.tgz#bdded70114290828c0a039e72ef25f5aaec4354a"
+  resolved "https://registry.npmjs.org/ip/-/ip-1.1.5.tgz"
+  integrity sha1-vd7XARQpCCjAoDnnLvJfWq7ENUo=
 
-ipaddr.js@1.8.0:
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.8.0.tgz#eaa33d6ddd7ace8f7f6fe0c9ca0440e706738b1e"
+ipaddr.js@1.9.0:
+  version "1.9.0"
+  resolved "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.0.tgz"
+  integrity sha512-M4Sjn6N/+O6/IXSJseKqHoFc+5FdGJ22sXqnjTpdZweHK64MzEPAyQZyEU3R/KRv2GLoa7nNtg/C2Ev6m7z+eA==
 
-ipaddr.js@^1.5.2:
-  version "1.8.1"
-  resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.8.1.tgz#fa4b79fa47fd3def5e3b159825161c0a519c9427"
+ipaddr.js@^1.9.0:
+  version "1.9.1"
+  resolved "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz"
+  integrity sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==
 
 is-absolute-url@^2.0.0:
   version "2.1.0"
-  resolved "https://registry.yarnpkg.com/is-absolute-url/-/is-absolute-url-2.1.0.tgz#50530dfb84fcc9aa7dbe7852e83a37b93b9f2aa6"
+  resolved "https://registry.npmjs.org/is-absolute-url/-/is-absolute-url-2.1.0.tgz"
+  integrity sha1-UFMN+4T8yap9vnhS6Do3uTufKqY=
+
+is-absolute-url@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.npmjs.org/is-absolute-url/-/is-absolute-url-3.0.3.tgz"
+  integrity sha512-opmNIX7uFnS96NtPmhWQgQx6/NYFgsUXYMllcfzwWKUMwfo8kku1TvE6hkNcH+Q1ts5cMVrsY7j0bxXQDciu9Q==
 
 is-accessor-descriptor@^0.1.6:
   version "0.1.6"
-  resolved "https://registry.yarnpkg.com/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz#a9e12cb3ae8d876727eeef3843f8a0897b5c98d6"
+  resolved "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz"
+  integrity sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=
   dependencies:
     kind-of "^3.0.2"
 
 is-accessor-descriptor@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz#169c2f6d3df1f992618072365c9b0ea1f6878656"
+  resolved "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz"
+  integrity sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==
   dependencies:
     kind-of "^6.0.0"
 
+is-arguments@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.npmjs.org/is-arguments/-/is-arguments-1.0.4.tgz"
+  integrity sha512-xPh0Rmt8NE65sNzvyUmWgI1tz3mKq74lGA0mL8LYZcoIzKOzDh6HmrYm3d18k60nHerC8A9Km8kYu87zfSFnLA==
+
 is-arrayish@^0.2.1:
   version "0.2.1"
-  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
+  resolved "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz"
+  integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=
+
+is-arrayish@^0.3.1:
+  version "0.3.2"
+  resolved "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz"
+  integrity sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==
 
 is-binary-path@^1.0.0:
   version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-1.0.1.tgz#75f16642b480f187a711c814161fd3a4a7655898"
+  resolved "https://registry.npmjs.org/is-binary-path/-/is-binary-path-1.0.1.tgz"
+  integrity sha1-dfFmQrSA8YenEcgUFh/TpKdlWJg=
   dependencies:
     binary-extensions "^1.0.0"
 
+is-binary-path@~2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
+  integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
+  dependencies:
+    binary-extensions "^2.0.0"
+
 is-buffer@^1.1.5, is-buffer@~1.1.1:
   version "1.1.6"
-  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
+  resolved "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz"
+  integrity sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==
 
-is-callable@^1.1.3, is-callable@^1.1.4:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.4.tgz#1e1adf219e1eeb684d691f9d6a05ff0d30a24d75"
+is-callable@^1.1.4, is-callable@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.npmjs.org/is-callable/-/is-callable-1.1.5.tgz"
+  integrity sha512-ESKv5sMCJB2jnHTWZ3O5itG+O128Hsus4K4Qh1h2/cgn2vbgnLSVqfV46AeJA9D5EeeLa9w81KUXMtn34zhX+Q==
+
+is-ci@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/is-ci/-/is-ci-2.0.0.tgz"
+  integrity sha512-YfJT7rkpQB0updsdHLGWrvhBJfcfzNNawYDNIyQXJz0IViGf75O8EBPKSdvw2rF+LGCsX4FZ8tcr3b19LcZq4w==
+  dependencies:
+    ci-info "^2.0.0"
+
+is-color-stop@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/is-color-stop/-/is-color-stop-1.1.0.tgz"
+  integrity sha1-z/9HGu5N1cnhWFmPvhKWe1za00U=
+  dependencies:
+    css-color-names "^0.0.4"
+    hex-color-regex "^1.1.0"
+    hsl-regex "^1.0.0"
+    hsla-regex "^1.0.0"
+    rgb-regex "^1.0.1"
+    rgba-regex "^1.0.0"
 
 is-data-descriptor@^0.1.4:
   version "0.1.4"
-  resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz#0b5ee648388e2c860282e793f1856fec3f301b56"
+  resolved "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz"
+  integrity sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=
   dependencies:
     kind-of "^3.0.2"
 
 is-data-descriptor@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz#d84876321d0e7add03990406abbbbd36ba9268c7"
+  resolved "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz"
+  integrity sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==
   dependencies:
     kind-of "^6.0.0"
 
 is-date-object@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.1.tgz#9aa20eb6aeebbff77fbd33e74ca01b33581d3a16"
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.2.tgz"
+  integrity sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g==
 
 is-descriptor@^0.1.0:
   version "0.1.6"
-  resolved "https://registry.yarnpkg.com/is-descriptor/-/is-descriptor-0.1.6.tgz#366d8240dde487ca51823b1ab9f07a10a78251ca"
+  resolved "https://registry.npmjs.org/is-descriptor/-/is-descriptor-0.1.6.tgz"
+  integrity sha512-avDYr0SB3DwO9zsMov0gKCESFYqCnE4hq/4z3TdUlukEy5t9C0YRq7HLrsN52NAcqXKaepeCD0n+B0arnVG3Hg==
   dependencies:
     is-accessor-descriptor "^0.1.6"
     is-data-descriptor "^0.1.4"
@@ -2847,7 +5390,8 @@ is-descriptor@^0.1.0:
 
 is-descriptor@^1.0.0, is-descriptor@^1.0.2:
   version "1.0.2"
-  resolved "https://registry.yarnpkg.com/is-descriptor/-/is-descriptor-1.0.2.tgz#3b159746a66604b04f8c81524ba365c5f14d86ec"
+  resolved "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz"
+  integrity sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==
   dependencies:
     is-accessor-descriptor "^1.0.0"
     is-data-descriptor "^1.0.0"
@@ -2855,291 +5399,915 @@ is-descriptor@^1.0.0, is-descriptor@^1.0.2:
 
 is-directory@^0.3.1:
   version "0.3.1"
-  resolved "https://registry.yarnpkg.com/is-directory/-/is-directory-0.3.1.tgz#61339b6f2475fc772fd9c9d83f5c8575dc154ae1"
+  resolved "https://registry.npmjs.org/is-directory/-/is-directory-0.3.1.tgz"
+  integrity sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE=
+
+is-docker@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.npmjs.org/is-docker/-/is-docker-2.1.1.tgz"
+  integrity sha512-ZOoqiXfEwtGknTiuDEy8pN2CfE3TxMHprvNer1mXiqwkOT77Rw3YVrUQ52EqAOU3QAWDQ+bQdx7HJzrv7LS2Hw==
 
 is-extendable@^0.1.0, is-extendable@^0.1.1:
   version "0.1.1"
-  resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89"
+  resolved "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz"
+  integrity sha1-YrEQ4omkcUGOPsNqYX1HLjAd/Ik=
 
 is-extendable@^1.0.1:
   version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-1.0.1.tgz#a7470f9e426733d81bd81e1155264e3a3507cab4"
+  resolved "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz"
+  integrity sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==
   dependencies:
     is-plain-object "^2.0.4"
 
 is-extglob@^2.1.0, is-extglob@^2.1.1:
   version "2.1.1"
-  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
+  resolved "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz"
+  integrity sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=
 
 is-fullwidth-code-point@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz#ef9e31386f031a7f0d643af82fde50c457ef00cb"
+  resolved "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz"
+  integrity sha1-754xOG8DGn8NZDr4L95QxFfvAMs=
   dependencies:
     number-is-nan "^1.0.0"
 
 is-fullwidth-code-point@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f"
+  resolved "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz"
+  integrity sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=
+
+is-fullwidth-code-point@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz"
+  integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
+
+is-generator-fn@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/is-generator-fn/-/is-generator-fn-2.1.0.tgz"
+  integrity sha512-cTIB4yPYL/Grw0EaSzASzg6bBy9gqCofvWN8okThAYIxKJZC+udlRAmGbM0XLeniEJSs8uEgHPGuHSe1XsOLSQ==
 
 is-glob@^3.1.0:
   version "3.1.0"
-  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-3.1.0.tgz#7ba5ae24217804ac70707b96922567486cc3e84a"
+  resolved "https://registry.npmjs.org/is-glob/-/is-glob-3.1.0.tgz"
+  integrity sha1-e6WuJCF4BKxwcHuWkiVnSGzD6Eo=
   dependencies:
     is-extglob "^2.1.0"
 
-is-glob@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.0.tgz#9521c76845cc2610a85203ddf080a958c2ffabc0"
+is-glob@^4.0.0, is-glob@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz"
+  integrity sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==
+  dependencies:
+    is-extglob "^2.1.1"
+
+is-glob@~4.0.1:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084"
+  integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==
   dependencies:
     is-extglob "^2.1.1"
 
 is-number@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.yarnpkg.com/is-number/-/is-number-3.0.0.tgz#24fd6201a4782cf50561c810276afc7d12d71195"
+  resolved "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz"
+  integrity sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=
   dependencies:
     kind-of "^3.0.2"
 
-is-path-cwd@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-path-cwd/-/is-path-cwd-1.0.0.tgz#d225ec23132e89edd38fda767472e62e65f1106d"
+is-number@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz"
+  integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
 
-is-path-in-cwd@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-path-in-cwd/-/is-path-in-cwd-1.0.1.tgz#5ac48b345ef675339bd6c7a48a912110b241cf52"
+is-obj@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/is-obj/-/is-obj-2.0.0.tgz"
+  integrity sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==
+
+is-path-cwd@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.npmjs.org/is-path-cwd/-/is-path-cwd-2.2.0.tgz"
+  integrity sha512-w942bTcih8fdJPJmQHFzkS76NEP8Kzzvmw92cXsazb8intwLqPibPPdXf4ANdKV3rYMuuQYGIWtvz9JilB3NFQ==
+
+is-path-in-cwd@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/is-path-in-cwd/-/is-path-in-cwd-2.1.0.tgz"
+  integrity sha512-rNocXHgipO+rvnP6dk3zI20RpOtrAM/kzbB258Uw5BWr3TpXi861yzjo16Dn4hUox07iw5AyeMLHWsujkjzvRQ==
   dependencies:
-    is-path-inside "^1.0.0"
+    is-path-inside "^2.1.0"
 
-is-path-inside@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-1.0.1.tgz#8ef5b7de50437a3fdca6b4e865ef7aa55cb48036"
+is-path-inside@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/is-path-inside/-/is-path-inside-2.1.0.tgz"
+  integrity sha512-wiyhTzfDWsvwAW53OBWF5zuvaOGlZ6PwYxAbPVDhpm+gM09xKQGjBq/8uYN12aDvMxnAnq3dxTyoSoRNmg5YFg==
   dependencies:
-    path-is-inside "^1.0.1"
+    path-is-inside "^1.0.2"
 
-is-plain-obj@^1.0.0:
+is-plain-obj@^1.0.0, is-plain-obj@^1.1.0:
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-1.1.0.tgz#71a50c8429dfca773c92a390a4a03b39fcd51d3e"
+  resolved "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz"
+  integrity sha1-caUMhCnfync8kqOQpKA7OfzVHT4=
 
-is-plain-object@^2.0.1, is-plain-object@^2.0.3, is-plain-object@^2.0.4:
+is-plain-object@^2.0.3, is-plain-object@^2.0.4:
   version "2.0.4"
-  resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677"
+  resolved "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz"
+  integrity sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==
   dependencies:
     isobject "^3.0.1"
 
-is-regex@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.0.4.tgz#5517489b547091b0930e095654ced25ee97e9491"
+is-potential-custom-element-name@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.0.tgz"
+  integrity sha1-DFLlS8yjkbssSUsh6GJtczbG45c=
+
+is-regex@^1.0.4, is-regex@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.npmjs.org/is-regex/-/is-regex-1.0.5.tgz"
+  integrity sha512-vlKW17SNq44owv5AQR3Cq0bQPEb8+kF3UKZ2fiZNOWtztYE5i0CzCZxFDwO58qAOWtxdBRVO/V5Qin1wjCqFYQ==
   dependencies:
-    has "^1.0.1"
+    has "^1.0.3"
+
+is-resolvable@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/is-resolvable/-/is-resolvable-1.1.0.tgz"
+  integrity sha512-qgDYXFSR5WvEfuS5dMj6oTMEbrrSaM0CrFk2Yiq/gXnBvD9pMa2jGXxyhGLfvhZpuMZe18CJpFxAt3CRs42NMg==
 
 is-stream@^1.1.0:
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
+  resolved "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz"
+  integrity sha1-EtSj3U5o4Lec6428hBc66A2RykQ=
 
-is-svg@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/is-svg/-/is-svg-2.1.0.tgz#cf61090da0d9efbcab8722deba6f032208dbb0e9"
+is-stream@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/is-stream/-/is-stream-2.0.0.tgz"
+  integrity sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==
+
+is-svg@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/is-svg/-/is-svg-3.0.0.tgz"
+  integrity sha512-gi4iHK53LR2ujhLVVj+37Ykh9GLqYHX6JOVXbLAucaG/Cqw9xwdFOjDM2qeifLs1sF1npXXFvDu0r5HNgCMrzQ==
   dependencies:
     html-comment-regex "^1.1.0"
 
 is-symbol@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.2.tgz#a055f6ae57192caee329e7a860118b497a950f38"
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.3.tgz"
+  integrity sha512-OwijhaRSgqvhm/0ZdAcXNZt9lYdKFpcRDT5ULUuYXPoT794UNOdU+gpT6Rzo7b4V2HUl/op6GqY894AZwv9faQ==
   dependencies:
-    has-symbols "^1.0.0"
+    has-symbols "^1.0.1"
 
-is-typedarray@~1.0.0:
+is-typedarray@^1.0.0, is-typedarray@~1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
+  resolved "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz"
+  integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=
 
-is-windows@^1.0.0, is-windows@^1.0.2:
+is-windows@^1.0.1, is-windows@^1.0.2:
   version "1.0.2"
-  resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
+  resolved "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz"
+  integrity sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==
 
 is-wsl@^1.1.0:
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-1.1.0.tgz#1f16e4aa22b04d1336b66188a66af3c600c3a66d"
+  resolved "https://registry.npmjs.org/is-wsl/-/is-wsl-1.1.0.tgz"
+  integrity sha1-HxbkqiKwTRM2tmGIpmrzxgDDpm0=
 
-isarray@0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
+is-wsl@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz"
+  integrity sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==
+  dependencies:
+    is-docker "^2.0.0"
 
 isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
+  resolved "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz"
+  integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
 
 isexe@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
+  resolved "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz"
+  integrity sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=
+
+isexe@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/isexe/-/isexe-3.1.1.tgz#4a407e2bd78ddfb14bea0c27c6f7072dde775f0d"
+  integrity sha512-LpB/54B+/2J5hqQ7imZHfdU31OlgQqx7ZicVlkm9kzg9/w8GKLEcFfJl/t7DCEDueOyBAD6zCCwTO6Fzs0NoEQ==
 
 isobject@^2.0.0:
   version "2.1.0"
-  resolved "https://registry.yarnpkg.com/isobject/-/isobject-2.1.0.tgz#f065561096a3f1da2ef46272f815c840d87e0c89"
+  resolved "https://registry.npmjs.org/isobject/-/isobject-2.1.0.tgz"
+  integrity sha1-8GVWEJaj8dou9GJy+BXIQNh+DIk=
   dependencies:
     isarray "1.0.0"
 
 isobject@^3.0.0, isobject@^3.0.1:
   version "3.0.1"
-  resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
+  resolved "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz"
+  integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8=
 
 isstream@~0.1.2:
   version "0.1.2"
-  resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
+  resolved "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz"
+  integrity sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=
 
-jasmine-core@^2.3.4:
-  version "2.99.1"
-  resolved "https://registry.yarnpkg.com/jasmine-core/-/jasmine-core-2.99.1.tgz#e6400df1e6b56e130b61c4bcd093daa7f6e8ca15"
+istanbul-lib-coverage@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.0.0.tgz"
+  integrity sha512-UiUIqxMgRDET6eR+o5HbfRYP1l0hqkWOs7vNxC/mggutCMUIhWMm8gAHb8tHlyfD3/l6rlgNA5cKdDzEAf6hEg==
 
-jquery-ui@>=1.8.0, jquery-ui@^1.12.1:
-  version "1.12.1"
-  resolved "https://registry.yarnpkg.com/jquery-ui/-/jquery-ui-1.12.1.tgz#bcb4045c8dd0539c134bc1488cdd3e768a7a9e51"
+istanbul-lib-instrument@^4.0.0, istanbul-lib-instrument@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-4.0.3.tgz"
+  integrity sha512-BXgQl9kf4WTCPCCpmFGoJkz/+uhvm7h7PFKUYxh7qarQd3ER33vHG//qaE8eN25l07YqZPpHXU9I09l/RD5aGQ==
+  dependencies:
+    "@babel/core" "^7.7.5"
+    "@istanbuljs/schema" "^0.1.2"
+    istanbul-lib-coverage "^3.0.0"
+    semver "^6.3.0"
 
-"jquery@2 - 3", jquery@3.x, jquery@>=1.8.0, jquery@^3.2.1:
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.3.1.tgz#958ce29e81c9790f31be7792df5d4d95fc57fbca"
+istanbul-lib-report@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz"
+  integrity sha512-wcdi+uAKzfiGT2abPpKZ0hSU1rGQjUQnLvtY5MpQ7QCTahD3VODhcu4wcfY1YtkGaDD5yuydOLINXsfbus9ROw==
+  dependencies:
+    istanbul-lib-coverage "^3.0.0"
+    make-dir "^3.0.0"
+    supports-color "^7.1.0"
 
-js-base64@^2.1.9:
-  version "2.4.9"
-  resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.4.9.tgz#748911fb04f48a60c4771b375cac45a80df11c03"
+istanbul-lib-source-maps@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/istanbul-lib-source-maps/-/istanbul-lib-source-maps-4.0.0.tgz"
+  integrity sha512-c16LpFRkR8vQXyHZ5nLpY35JZtzj1PQY1iZmesUbf1FZHbIupcWfjgOXBY9YHkLEQ6puz1u4Dgj6qmU/DisrZg==
+  dependencies:
+    debug "^4.1.1"
+    istanbul-lib-coverage "^3.0.0"
+    source-map "^0.6.1"
 
-js-tokens@^3.0.2:
+istanbul-reports@^3.0.2:
   version "3.0.2"
-  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
+  resolved "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-3.0.2.tgz"
+  integrity sha512-9tZvz7AiR3PEDNGiV9vIouQ/EAcqMXFmkcA1CDFTwOB98OZVDL0PH9glHotf5Ugp6GCOTypfzGWI/OqjWNCRUw==
+  dependencies:
+    html-escaper "^2.0.0"
+    istanbul-lib-report "^3.0.0"
 
-js-yaml@^3.7.0, js-yaml@^3.9.0:
-  version "3.12.0"
-  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.12.0.tgz#eaed656ec8344f10f527c6bfa1b6e2244de167d1"
+jasmine-core@^3.4.0:
+  version "3.5.0"
+  resolved "https://registry.npmjs.org/jasmine-core/-/jasmine-core-3.5.0.tgz"
+  integrity sha512-nCeAiw37MIMA9w9IXso7bRaLl+c/ef3wnxsoSAlYrzS+Ot0zTG6nU8G/cIfGkqpkjX2wNaIW9RFG0TwIFnG6bA==
+
+jest-changed-files@^26.5.2:
+  version "26.5.2"
+  resolved "https://registry.npmjs.org/jest-changed-files/-/jest-changed-files-26.5.2.tgz"
+  integrity sha512-qSmssmiIdvM5BWVtyK/nqVpN3spR5YyvkvPqz1x3BR1bwIxsWmU/MGwLoCrPNLbkG2ASAKfvmJpOduEApBPh2w==
+  dependencies:
+    "@jest/types" "^26.5.2"
+    execa "^4.0.0"
+    throat "^5.0.0"
+
+jest-cli@^26.5.3:
+  version "26.5.3"
+  resolved "https://registry.npmjs.org/jest-cli/-/jest-cli-26.5.3.tgz"
+  integrity sha512-HkbSvtugpSXBf2660v9FrNVUgxvPkssN8CRGj9gPM8PLhnaa6zziFiCEKQAkQS4uRzseww45o0TR+l6KeRYV9A==
+  dependencies:
+    "@jest/core" "^26.5.3"
+    "@jest/test-result" "^26.5.2"
+    "@jest/types" "^26.5.2"
+    chalk "^4.0.0"
+    exit "^0.1.2"
+    graceful-fs "^4.2.4"
+    import-local "^3.0.2"
+    is-ci "^2.0.0"
+    jest-config "^26.5.3"
+    jest-util "^26.5.2"
+    jest-validate "^26.5.3"
+    prompts "^2.0.1"
+    yargs "^15.4.1"
+
+jest-config@^26.5.3:
+  version "26.5.3"
+  resolved "https://registry.npmjs.org/jest-config/-/jest-config-26.5.3.tgz"
+  integrity sha512-NVhZiIuN0GQM6b6as4CI5FSCyXKxdrx5ACMCcv/7Pf+TeCajJhJc+6dwgdAVPyerUFB9pRBIz3bE7clSrRge/w==
+  dependencies:
+    "@babel/core" "^7.1.0"
+    "@jest/test-sequencer" "^26.5.3"
+    "@jest/types" "^26.5.2"
+    babel-jest "^26.5.2"
+    chalk "^4.0.0"
+    deepmerge "^4.2.2"
+    glob "^7.1.1"
+    graceful-fs "^4.2.4"
+    jest-environment-jsdom "^26.5.2"
+    jest-environment-node "^26.5.2"
+    jest-get-type "^26.3.0"
+    jest-jasmine2 "^26.5.3"
+    jest-regex-util "^26.0.0"
+    jest-resolve "^26.5.2"
+    jest-util "^26.5.2"
+    jest-validate "^26.5.3"
+    micromatch "^4.0.2"
+    pretty-format "^26.5.2"
+
+jest-diff@^26.0.0:
+  version "26.6.2"
+  resolved "https://registry.npmjs.org/jest-diff/-/jest-diff-26.6.2.tgz"
+  integrity sha512-6m+9Z3Gv9wN0WFVasqjCL/06+EFCMTqDEUl/b87HYK2rAPTyfz4ZIuSlPhY51PIQRWx5TaxeF1qmXKe9gfN3sA==
+  dependencies:
+    chalk "^4.0.0"
+    diff-sequences "^26.6.2"
+    jest-get-type "^26.3.0"
+    pretty-format "^26.6.2"
+
+jest-diff@^26.5.2:
+  version "26.5.2"
+  resolved "https://registry.npmjs.org/jest-diff/-/jest-diff-26.5.2.tgz"
+  integrity sha512-HCSWDUGwsov5oTlGzrRM+UPJI/Dpqi9jzeV0fdRNi3Ch5bnoXhnyJMmVg2juv9081zLIy3HGPI5mcuGgXM2xRA==
+  dependencies:
+    chalk "^4.0.0"
+    diff-sequences "^26.5.0"
+    jest-get-type "^26.3.0"
+    pretty-format "^26.5.2"
+
+jest-docblock@^26.0.0:
+  version "26.0.0"
+  resolved "https://registry.npmjs.org/jest-docblock/-/jest-docblock-26.0.0.tgz"
+  integrity sha512-RDZ4Iz3QbtRWycd8bUEPxQsTlYazfYn/h5R65Fc6gOfwozFhoImx+affzky/FFBuqISPTqjXomoIGJVKBWoo0w==
+  dependencies:
+    detect-newline "^3.0.0"
+
+jest-each@^26.5.2:
+  version "26.5.2"
+  resolved "https://registry.npmjs.org/jest-each/-/jest-each-26.5.2.tgz"
+  integrity sha512-w7D9FNe0m2D3yZ0Drj9CLkyF/mGhmBSULMQTypzAKR746xXnjUrK8GUJdlLTWUF6dd0ks3MtvGP7/xNFr9Aphg==
+  dependencies:
+    "@jest/types" "^26.5.2"
+    chalk "^4.0.0"
+    jest-get-type "^26.3.0"
+    jest-util "^26.5.2"
+    pretty-format "^26.5.2"
+
+jest-environment-jsdom@^26.5.2:
+  version "26.5.2"
+  resolved "https://registry.npmjs.org/jest-environment-jsdom/-/jest-environment-jsdom-26.5.2.tgz"
+  integrity sha512-fWZPx0bluJaTQ36+PmRpvUtUlUFlGGBNyGX1SN3dLUHHMcQ4WseNEzcGGKOw4U5towXgxI4qDoI3vwR18H0RTw==
+  dependencies:
+    "@jest/environment" "^26.5.2"
+    "@jest/fake-timers" "^26.5.2"
+    "@jest/types" "^26.5.2"
+    "@types/node" "*"
+    jest-mock "^26.5.2"
+    jest-util "^26.5.2"
+    jsdom "^16.4.0"
+
+jest-environment-node@^26.5.2:
+  version "26.5.2"
+  resolved "https://registry.npmjs.org/jest-environment-node/-/jest-environment-node-26.5.2.tgz"
+  integrity sha512-YHjnDsf/GKFCYMGF1V+6HF7jhY1fcLfLNBDjhAOvFGvt6d8vXvNdJGVM7uTZ2VO/TuIyEFhPGaXMX5j3h7fsrA==
+  dependencies:
+    "@jest/environment" "^26.5.2"
+    "@jest/fake-timers" "^26.5.2"
+    "@jest/types" "^26.5.2"
+    "@types/node" "*"
+    jest-mock "^26.5.2"
+    jest-util "^26.5.2"
+
+jest-get-type@^26.3.0:
+  version "26.3.0"
+  resolved "https://registry.npmjs.org/jest-get-type/-/jest-get-type-26.3.0.tgz"
+  integrity sha512-TpfaviN1R2pQWkIihlfEanwOXK0zcxrKEE4MlU6Tn7keoXdN6/3gK/xl0yEh8DOunn5pOVGKf8hB4R9gVh04ig==
+
+jest-haste-map@^26.5.2:
+  version "26.5.2"
+  resolved "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-26.5.2.tgz"
+  integrity sha512-lJIAVJN3gtO3k4xy+7i2Xjtwh8CfPcH08WYjZpe9xzveDaqGw9fVNCpkYu6M525wKFVkLmyi7ku+DxCAP1lyMA==
   dependencies:
-    argparse "^1.0.7"
-    esprima "^4.0.0"
+    "@jest/types" "^26.5.2"
+    "@types/graceful-fs" "^4.1.2"
+    "@types/node" "*"
+    anymatch "^3.0.3"
+    fb-watchman "^2.0.0"
+    graceful-fs "^4.2.4"
+    jest-regex-util "^26.0.0"
+    jest-serializer "^26.5.0"
+    jest-util "^26.5.2"
+    jest-worker "^26.5.0"
+    micromatch "^4.0.2"
+    sane "^4.0.3"
+    walker "^1.0.7"
+  optionalDependencies:
+    fsevents "^2.1.2"
+
+jest-jasmine2@^26.5.3:
+  version "26.5.3"
+  resolved "https://registry.npmjs.org/jest-jasmine2/-/jest-jasmine2-26.5.3.tgz"
+  integrity sha512-nFlZOpnGlNc7y/+UkkeHnvbOM+rLz4wB1AimgI9QhtnqSZte0wYjbAm8hf7TCwXlXgDwZxAXo6z0a2Wzn9FoOg==
+  dependencies:
+    "@babel/traverse" "^7.1.0"
+    "@jest/environment" "^26.5.2"
+    "@jest/source-map" "^26.5.0"
+    "@jest/test-result" "^26.5.2"
+    "@jest/types" "^26.5.2"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    co "^4.6.0"
+    expect "^26.5.3"
+    is-generator-fn "^2.0.0"
+    jest-each "^26.5.2"
+    jest-matcher-utils "^26.5.2"
+    jest-message-util "^26.5.2"
+    jest-runtime "^26.5.3"
+    jest-snapshot "^26.5.3"
+    jest-util "^26.5.2"
+    pretty-format "^26.5.2"
+    throat "^5.0.0"
+
+jest-leak-detector@^26.5.2:
+  version "26.5.2"
+  resolved "https://registry.npmjs.org/jest-leak-detector/-/jest-leak-detector-26.5.2.tgz"
+  integrity sha512-h7ia3dLzBFItmYERaLPEtEKxy3YlcbcRSjj0XRNJgBEyODuu+3DM2o62kvIFvs3PsaYoIIv+e+nLRI61Dj1CNw==
+  dependencies:
+    jest-get-type "^26.3.0"
+    pretty-format "^26.5.2"
+
+jest-matcher-utils@^26.5.2:
+  version "26.5.2"
+  resolved "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-26.5.2.tgz"
+  integrity sha512-W9GO9KBIC4gIArsNqDUKsLnhivaqf8MSs6ujO/JDcPIQrmY+aasewweXVET8KdrJ6ADQaUne5UzysvF/RR7JYA==
+  dependencies:
+    chalk "^4.0.0"
+    jest-diff "^26.5.2"
+    jest-get-type "^26.3.0"
+    pretty-format "^26.5.2"
+
+jest-message-util@^26.5.2:
+  version "26.5.2"
+  resolved "https://registry.npmjs.org/jest-message-util/-/jest-message-util-26.5.2.tgz"
+  integrity sha512-Ocp9UYZ5Jl15C5PNsoDiGEk14A4NG0zZKknpWdZGoMzJuGAkVt10e97tnEVMYpk7LnQHZOfuK2j/izLBMcuCZw==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    "@jest/types" "^26.5.2"
+    "@types/stack-utils" "^2.0.0"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.4"
+    micromatch "^4.0.2"
+    slash "^3.0.0"
+    stack-utils "^2.0.2"
+
+jest-mock@^26.5.2:
+  version "26.5.2"
+  resolved "https://registry.npmjs.org/jest-mock/-/jest-mock-26.5.2.tgz"
+  integrity sha512-9SiU4b5PtO51v0MtJwVRqeGEroH66Bnwtq4ARdNP7jNXbpT7+ByeWNAk4NeT/uHfNSVDXEXgQo1XRuwEqS6Rdw==
+  dependencies:
+    "@jest/types" "^26.5.2"
+    "@types/node" "*"
+
+jest-pnp-resolver@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz"
+  integrity sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==
+
+jest-regex-util@^26.0.0:
+  version "26.0.0"
+  resolved "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-26.0.0.tgz"
+  integrity sha512-Gv3ZIs/nA48/Zvjrl34bf+oD76JHiGDUxNOVgUjh3j890sblXryjY4rss71fPtD/njchl6PSE2hIhvyWa1eT0A==
+
+jest-resolve-dependencies@^26.5.3:
+  version "26.5.3"
+  resolved "https://registry.npmjs.org/jest-resolve-dependencies/-/jest-resolve-dependencies-26.5.3.tgz"
+  integrity sha512-+KMDeke/BFK+mIQ2IYSyBz010h7zQaVt4Xie6cLqUGChorx66vVeQVv4ErNoMwInnyYHi1Ud73tDS01UbXbfLQ==
+  dependencies:
+    "@jest/types" "^26.5.2"
+    jest-regex-util "^26.0.0"
+    jest-snapshot "^26.5.3"
+
+jest-resolve@^26.5.2:
+  version "26.5.2"
+  resolved "https://registry.npmjs.org/jest-resolve/-/jest-resolve-26.5.2.tgz"
+  integrity sha512-XsPxojXGRA0CoDD7Vis59ucz2p3cQFU5C+19tz3tLEAlhYKkK77IL0cjYjikY9wXnOaBeEdm1rOgSJjbZWpcZg==
+  dependencies:
+    "@jest/types" "^26.5.2"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.4"
+    jest-pnp-resolver "^1.2.2"
+    jest-util "^26.5.2"
+    read-pkg-up "^7.0.1"
+    resolve "^1.17.0"
+    slash "^3.0.0"
+
+jest-runner@^26.5.3:
+  version "26.5.3"
+  resolved "https://registry.npmjs.org/jest-runner/-/jest-runner-26.5.3.tgz"
+  integrity sha512-qproP0Pq7IIule+263W57k2+8kWCszVJTC9TJWGUz0xJBr+gNiniGXlG8rotd0XxwonD5UiJloYoSO5vbUr5FQ==
+  dependencies:
+    "@jest/console" "^26.5.2"
+    "@jest/environment" "^26.5.2"
+    "@jest/test-result" "^26.5.2"
+    "@jest/types" "^26.5.2"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    emittery "^0.7.1"
+    exit "^0.1.2"
+    graceful-fs "^4.2.4"
+    jest-config "^26.5.3"
+    jest-docblock "^26.0.0"
+    jest-haste-map "^26.5.2"
+    jest-leak-detector "^26.5.2"
+    jest-message-util "^26.5.2"
+    jest-resolve "^26.5.2"
+    jest-runtime "^26.5.3"
+    jest-util "^26.5.2"
+    jest-worker "^26.5.0"
+    source-map-support "^0.5.6"
+    throat "^5.0.0"
+
+jest-runtime@^26.5.3:
+  version "26.5.3"
+  resolved "https://registry.npmjs.org/jest-runtime/-/jest-runtime-26.5.3.tgz"
+  integrity sha512-IDjalmn2s/Tc4GvUwhPHZ0iaXCdMRq5p6taW9P8RpU+FpG01O3+H8z+p3rDCQ9mbyyyviDgxy/LHPLzrIOKBkQ==
+  dependencies:
+    "@jest/console" "^26.5.2"
+    "@jest/environment" "^26.5.2"
+    "@jest/fake-timers" "^26.5.2"
+    "@jest/globals" "^26.5.3"
+    "@jest/source-map" "^26.5.0"
+    "@jest/test-result" "^26.5.2"
+    "@jest/transform" "^26.5.2"
+    "@jest/types" "^26.5.2"
+    "@types/yargs" "^15.0.0"
+    chalk "^4.0.0"
+    collect-v8-coverage "^1.0.0"
+    exit "^0.1.2"
+    glob "^7.1.3"
+    graceful-fs "^4.2.4"
+    jest-config "^26.5.3"
+    jest-haste-map "^26.5.2"
+    jest-message-util "^26.5.2"
+    jest-mock "^26.5.2"
+    jest-regex-util "^26.0.0"
+    jest-resolve "^26.5.2"
+    jest-snapshot "^26.5.3"
+    jest-util "^26.5.2"
+    jest-validate "^26.5.3"
+    slash "^3.0.0"
+    strip-bom "^4.0.0"
+    yargs "^15.4.1"
+
+jest-serializer@^26.5.0:
+  version "26.5.0"
+  resolved "https://registry.npmjs.org/jest-serializer/-/jest-serializer-26.5.0.tgz"
+  integrity sha512-+h3Gf5CDRlSLdgTv7y0vPIAoLgX/SI7T4v6hy+TEXMgYbv+ztzbg5PSN6mUXAT/hXYHvZRWm+MaObVfqkhCGxA==
+  dependencies:
+    "@types/node" "*"
+    graceful-fs "^4.2.4"
+
+jest-snapshot@^26.5.3:
+  version "26.5.3"
+  resolved "https://registry.npmjs.org/jest-snapshot/-/jest-snapshot-26.5.3.tgz"
+  integrity sha512-ZgAk0Wm0JJ75WS4lGaeRfa0zIgpL0KD595+XmtwlIEMe8j4FaYHyZhP1LNOO+8fXq7HJ3hll54+sFV9X4+CGVw==
+  dependencies:
+    "@babel/types" "^7.0.0"
+    "@jest/types" "^26.5.2"
+    "@types/babel__traverse" "^7.0.4"
+    "@types/prettier" "^2.0.0"
+    chalk "^4.0.0"
+    expect "^26.5.3"
+    graceful-fs "^4.2.4"
+    jest-diff "^26.5.2"
+    jest-get-type "^26.3.0"
+    jest-haste-map "^26.5.2"
+    jest-matcher-utils "^26.5.2"
+    jest-message-util "^26.5.2"
+    jest-resolve "^26.5.2"
+    natural-compare "^1.4.0"
+    pretty-format "^26.5.2"
+    semver "^7.3.2"
+
+jest-util@^26.1.0:
+  version "26.6.2"
+  resolved "https://registry.npmjs.org/jest-util/-/jest-util-26.6.2.tgz"
+  integrity sha512-MDW0fKfsn0OI7MS7Euz6h8HNDXVQ0gaM9uW6RjfDmd1DAFcaxX9OqIakHIqhbnmF08Cf2DLDG+ulq8YQQ0Lp0Q==
+  dependencies:
+    "@jest/types" "^26.6.2"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.4"
+    is-ci "^2.0.0"
+    micromatch "^4.0.2"
+
+jest-util@^26.5.2:
+  version "26.5.2"
+  resolved "https://registry.npmjs.org/jest-util/-/jest-util-26.5.2.tgz"
+  integrity sha512-WTL675bK+GSSAYgS8z9FWdCT2nccO1yTIplNLPlP0OD8tUk/H5IrWKMMRudIQQ0qp8bb4k+1Qa8CxGKq9qnYdg==
+  dependencies:
+    "@jest/types" "^26.5.2"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.4"
+    is-ci "^2.0.0"
+    micromatch "^4.0.2"
+
+jest-validate@^26.5.3:
+  version "26.5.3"
+  resolved "https://registry.npmjs.org/jest-validate/-/jest-validate-26.5.3.tgz"
+  integrity sha512-LX07qKeAtY+lsU0o3IvfDdN5KH9OulEGOMN1sFo6PnEf5/qjS1LZIwNk9blcBeW94pQUI9dLN9FlDYDWI5tyaA==
+  dependencies:
+    "@jest/types" "^26.5.2"
+    camelcase "^6.0.0"
+    chalk "^4.0.0"
+    jest-get-type "^26.3.0"
+    leven "^3.1.0"
+    pretty-format "^26.5.2"
+
+jest-watcher@^26.5.2:
+  version "26.5.2"
+  resolved "https://registry.npmjs.org/jest-watcher/-/jest-watcher-26.5.2.tgz"
+  integrity sha512-i3m1NtWzF+FXfJ3ljLBB/WQEp4uaNhX7QcQUWMokcifFTUQBDFyUMEwk0JkJ1kopHbx7Een3KX0Q7+9koGM/Pw==
+  dependencies:
+    "@jest/test-result" "^26.5.2"
+    "@jest/types" "^26.5.2"
+    "@types/node" "*"
+    ansi-escapes "^4.2.1"
+    chalk "^4.0.0"
+    jest-util "^26.5.2"
+    string-length "^4.0.1"
+
+jest-worker@^26.5.0:
+  version "26.5.0"
+  resolved "https://registry.npmjs.org/jest-worker/-/jest-worker-26.5.0.tgz"
+  integrity sha512-kTw66Dn4ZX7WpjZ7T/SUDgRhapFRKWmisVAF0Rv4Fu8SLFD7eLbqpLvbxVqYhSgaWa7I+bW7pHnbyfNsH6stug==
+  dependencies:
+    "@types/node" "*"
+    merge-stream "^2.0.0"
+    supports-color "^7.0.0"
+
+jest@^26.5.3:
+  version "26.5.3"
+  resolved "https://registry.npmjs.org/jest/-/jest-26.5.3.tgz"
+  integrity sha512-uJi3FuVSLmkZrWvaDyaVTZGLL8WcfynbRnFXyAHuEtYiSZ+ijDDIMOw1ytmftK+y/+OdAtsG9QrtbF7WIBmOyA==
+  dependencies:
+    "@jest/core" "^26.5.3"
+    import-local "^3.0.2"
+    jest-cli "^26.5.3"
 
-js-yaml@~3.7.0:
-  version "3.7.0"
-  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.7.0.tgz#5c967ddd837a9bfdca5f2de84253abe8a1c03b80"
+jquery-ui@^1.12.1:
+  version "1.12.1"
+  resolved "https://registry.npmjs.org/jquery-ui/-/jquery-ui-1.12.1.tgz"
+  integrity sha1-vLQEXI3QU5wTS8FIjN0+dop6nlE=
+
+jquery@>=3.0.0:
+  version "3.6.3"
+  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.6.3.tgz#23ed2ffed8a19e048814f13391a19afcdba160e6"
+  integrity sha512-bZ5Sy3YzKo9Fyc8wH2iIQK4JImJ6R0GWI9kL1/k7Z91ZBNgkRXE6U0JfHIizZbort8ZunhSI3jw9I6253ahKfg==
+
+jquery@^3.5.1:
+  version "3.5.1"
+  resolved "https://registry.npmjs.org/jquery/-/jquery-3.5.1.tgz"
+  integrity sha512-XwIBPqcMn57FxfT+Go5pzySnm4KWkT1Tv7gjrpT1srtf8Weynl6R273VJ5GjkRb51IzMp5nbaPjJXMWeju2MKg==
+
+js-tokens@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz"
+  integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
+
+js-yaml@^3.13.1:
+  version "3.13.1"
+  resolved "https://registry.npmjs.org/js-yaml/-/js-yaml-3.13.1.tgz"
+  integrity sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==
   dependencies:
     argparse "^1.0.7"
-    esprima "^2.6.0"
+    esprima "^4.0.0"
 
 jsbn@~0.1.0:
   version "0.1.1"
-  resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
-
-jsesc@~0.5.0:
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
+  resolved "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz"
+  integrity sha1-peZUwuWi3rXyAdls77yoDA7y9RM=
+
+jsdom@^16.4.0:
+  version "16.4.0"
+  resolved "https://registry.npmjs.org/jsdom/-/jsdom-16.4.0.tgz"
+  integrity sha512-lYMm3wYdgPhrl7pDcRmvzPhhrGVBeVhPIqeHjzeiHN3DFmD1RBpbExbi8vU7BJdH8VAZYovR8DMt0PNNDM7k8w==
+  dependencies:
+    abab "^2.0.3"
+    acorn "^7.1.1"
+    acorn-globals "^6.0.0"
+    cssom "^0.4.4"
+    cssstyle "^2.2.0"
+    data-urls "^2.0.0"
+    decimal.js "^10.2.0"
+    domexception "^2.0.1"
+    escodegen "^1.14.1"
+    html-encoding-sniffer "^2.0.1"
+    is-potential-custom-element-name "^1.0.0"
+    nwsapi "^2.2.0"
+    parse5 "5.1.1"
+    request "^2.88.2"
+    request-promise-native "^1.0.8"
+    saxes "^5.0.0"
+    symbol-tree "^3.2.4"
+    tough-cookie "^3.0.1"
+    w3c-hr-time "^1.0.2"
+    w3c-xmlserializer "^2.0.0"
+    webidl-conversions "^6.1.0"
+    whatwg-encoding "^1.0.5"
+    whatwg-mimetype "^2.3.0"
+    whatwg-url "^8.0.0"
+    ws "^7.2.3"
+    xml-name-validator "^3.0.0"
+
+jsesc@^2.5.1:
+  version "2.5.2"
+  resolved "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz"
+  integrity sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==
 
 json-parse-better-errors@^1.0.1, json-parse-better-errors@^1.0.2:
   version "1.0.2"
-  resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"
+  resolved "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz"
+  integrity sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==
+
+json-parse-even-better-errors@^2.3.0:
+  version "2.3.1"
+  resolved "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz"
+  integrity sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==
 
 json-schema-traverse@^0.3.0:
   version "0.3.1"
-  resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.3.1.tgz#349a6d44c53a51de89b40805c5d5e59b417d3340"
+  resolved "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.3.1.tgz"
+  integrity sha1-NJptRMU6Ud6JtAgFxdXlm0F9M0A=
 
 json-schema-traverse@^0.4.1:
   version "0.4.1"
-  resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660"
+  resolved "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz"
+  integrity sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==
 
 json-schema@0.2.3:
   version "0.2.3"
-  resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.2.3.tgz#b480c892e59a2f05954ce727bd3f2a4e882f9e13"
+  resolved "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz"
+  integrity sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM=
 
 json-stable-stringify@^1.0.1:
   version "1.0.1"
-  resolved "https://registry.yarnpkg.com/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz#9a759d39c5f2ff503fd5300646ed445f88c4f9af"
+  resolved "https://registry.npmjs.org/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz"
+  integrity sha1-mnWdOcXy/1A/1TAGRu1EX4jE+a8=
   dependencies:
     jsonify "~0.0.0"
 
+json-stringify-pretty-compact@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/json-stringify-pretty-compact/-/json-stringify-pretty-compact-4.0.0.tgz#cf4844770bddee3cb89a6170fe4b00eee5dbf1d4"
+  integrity sha512-3CNZ2DnrpByG9Nqj6Xo8vqbjT4F6N+tb4Gb28ESAZjYZ5yqvmc56J+/kuIwkaAMOyblTQhUW7PxMkUb8Q36N3Q==
+
 json-stringify-safe@~5.0.1:
   version "5.0.1"
-  resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
+  resolved "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz"
+  integrity sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=
 
 json3@^3.3.2:
-  version "3.3.2"
-  resolved "https://registry.yarnpkg.com/json3/-/json3-3.3.2.tgz#3c0434743df93e2f5c42aee7b19bcb483575f4e1"
+  version "3.3.3"
+  resolved "https://registry.npmjs.org/json3/-/json3-3.3.3.tgz"
+  integrity sha512-c7/8mbUsKigAbLkD5B010BK4D9LZm7A1pNItkEwiUZRpIN66exu/e7YQWysGun+TRKaJp8MhemM+VkfWv42aCA==
+
+json5@2.x:
+  version "2.2.0"
+  resolved "https://registry.npmjs.org/json5/-/json5-2.2.0.tgz"
+  integrity sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==
+  dependencies:
+    minimist "^1.2.5"
 
 json5@^0.5.0:
   version "0.5.1"
-  resolved "http://registry.npmjs.org/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821"
+  resolved "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz"
+  integrity sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=
+
+json5@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz"
+  integrity sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==
+  dependencies:
+    minimist "^1.2.0"
+
+json5@^2.1.2:
+  version "2.1.3"
+  resolved "https://registry.npmjs.org/json5/-/json5-2.1.3.tgz"
+  integrity sha512-KXPvOm8K9IJKFM0bmdn8QXh7udDh1g/giieX0NLCaMnb4hEiVFqnop2ImTXCc5e0/oHz3LTqmHGtExn5hfMkOA==
+  dependencies:
+    minimist "^1.2.5"
 
 jsonify@~0.0.0:
   version "0.0.0"
-  resolved "https://registry.yarnpkg.com/jsonify/-/jsonify-0.0.0.tgz#2c74b6ee41d93ca51b7b5aaee8f503631d252a73"
+  resolved "https://registry.npmjs.org/jsonify/-/jsonify-0.0.0.tgz"
+  integrity sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM=
 
 jsprim@^1.2.2:
   version "1.4.1"
-  resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-1.4.1.tgz#313e66bc1e5cc06e438bc1b7499c2e5c56acb6a2"
+  resolved "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz"
+  integrity sha1-MT5mvB5cwG5Di8G3SZwuXFastqI=
   dependencies:
     assert-plus "1.0.0"
     extsprintf "1.3.0"
     json-schema "0.2.3"
     verror "1.10.0"
 
+jsqr-es6@^1.2.0-3:
+  version "1.2.0-3"
+  resolved "https://registry.npmjs.org/jsqr-es6/-/jsqr-es6-1.2.0-3.tgz"
+  integrity sha512-A3j4av6EBnTZUyI2odwhpyqO0fQPepguSRKWEFefyU4yeKqSgfSf0/G8IAsQxS/ErnmQuW67z4hCVm0zKMHepg==
+
 jstz@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/jstz/-/jstz-2.0.0.tgz#fd02f4ebdc7843c83e7ad1f157aecf46bf1f7647"
+  version "2.1.1"
+  resolved "https://registry.npmjs.org/jstz/-/jstz-2.1.1.tgz"
+  integrity sha512-8hfl5RD6P7rEeIbzStBz3h4f+BQHfq/ABtoU6gXKQv5OcZhnmrIpG7e1pYaZ8hS9e0mp+bxUj08fnDUbKctYyA==
+
+kdbush@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/kdbush/-/kdbush-4.0.2.tgz#2f7b7246328b4657dd122b6c7f025fbc2c868e39"
+  integrity sha512-WbCVYJ27Sz8zi9Q7Q0xHC+05iwkm3Znipc2XTlrnJbsHMYktW4hPhXUE8Ys1engBrvffoSCqbil1JQAa7clRpA==
 
-killable@^1.0.0:
+killable@^1.0.1:
   version "1.0.1"
-  resolved "https://registry.yarnpkg.com/killable/-/killable-1.0.1.tgz#4c8ce441187a061c7474fb87ca08e2a638194892"
+  resolved "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz"
+  integrity sha512-LzqtLKlUwirEUyl/nicirVmNiPvYs7l5n8wOPP7fyJVpUPkvCnW/vuiXGpylGUlnPDnB7311rARzAt3Mhswpjg==
 
 kind-of@^3.0.2, kind-of@^3.0.3, kind-of@^3.2.0:
   version "3.2.2"
-  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.2.2.tgz#31ea21a734bab9bbb0f32466d893aea51e4a3c64"
+  resolved "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz"
+  integrity sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=
   dependencies:
     is-buffer "^1.1.5"
 
 kind-of@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-4.0.0.tgz#20813df3d712928b207378691a45066fae72dd57"
+  resolved "https://registry.npmjs.org/kind-of/-/kind-of-4.0.0.tgz"
+  integrity sha1-IIE989cSkosgc3hpGkUGb65y3Vc=
   dependencies:
     is-buffer "^1.1.5"
 
 kind-of@^5.0.0:
   version "5.1.0"
-  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-5.1.0.tgz#729c91e2d857b7a419a1f9aa65685c4c33f5845d"
+  resolved "https://registry.npmjs.org/kind-of/-/kind-of-5.1.0.tgz"
+  integrity sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==
 
-kind-of@^6.0.0, kind-of@^6.0.2:
-  version "6.0.2"
-  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.2.tgz#01146b36a6218e64e58f3a8d66de5d7fc6f6d051"
+kind-of@^6.0.0, kind-of@^6.0.2, kind-of@^6.0.3:
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
+  integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
+
+kleur@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz"
+  integrity sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==
 
 last-call-webpack-plugin@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.yarnpkg.com/last-call-webpack-plugin/-/last-call-webpack-plugin-3.0.0.tgz#9742df0e10e3cf46e5c0381c2de90d3a7a2d7555"
+  resolved "https://registry.npmjs.org/last-call-webpack-plugin/-/last-call-webpack-plugin-3.0.0.tgz"
+  integrity sha512-7KI2l2GIZa9p2spzPIVZBYyNKkN+e/SQPpnjlTiPhdbDW3F86tdKKELxKpzJ5sgU19wQWsACULZmpTPYHeWO5w==
   dependencies:
     lodash "^4.17.5"
     webpack-sources "^1.1.0"
 
 lcid@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/lcid/-/lcid-2.0.0.tgz#6ef5d2df60e52f82eb228a4c373e8d1f397253cf"
+  resolved "https://registry.npmjs.org/lcid/-/lcid-2.0.0.tgz"
+  integrity sha512-avPEb8P8EGnwXKClwsNUgryVjllcRqtMYa49NTsbQagYuT1DcXnl1915oxWjoyGrXR6zH/Y0Zc96xWsPcoDKeA==
   dependencies:
     invert-kv "^2.0.0"
 
+leaflet-draw@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.npmjs.org/leaflet-draw/-/leaflet-draw-1.0.4.tgz"
+  integrity sha512-rsQ6saQO5ST5Aj6XRFylr5zvarWgzWnrg46zQ1MEOEIHsppdC/8hnN8qMoFvACsPvTioAuysya/TVtog15tyAQ==
+
 leaflet.heat@^0.2.0:
   version "0.2.0"
-  resolved "https://registry.yarnpkg.com/leaflet.heat/-/leaflet.heat-0.2.0.tgz#109d8cf586f0adee41f05aff031e27a77fecc229"
+  resolved "https://registry.npmjs.org/leaflet.heat/-/leaflet.heat-0.2.0.tgz"
+  integrity sha1-EJ2M9Ybwre5B8Fr/Ax4np3/swik=
 
 leaflet.markercluster@^1.3.0:
   version "1.4.1"
-  resolved "https://registry.yarnpkg.com/leaflet.markercluster/-/leaflet.markercluster-1.4.1.tgz#b53f2c4f2ca7306ddab1dbb6f1861d5e8aa6c5e5"
+  resolved "https://registry.npmjs.org/leaflet.markercluster/-/leaflet.markercluster-1.4.1.tgz"
+  integrity sha512-ZSEpE/EFApR0bJ1w/dUGwTSUvWlpalKqIzkaYdYB7jaftQA/Y2Jav+eT4CMtEYFj+ZK4mswP13Q2acnPBnhGOw==
 
-leaflet@^1.3.1:
-  version "1.3.4"
-  resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.3.4.tgz#7f006ea5832603b53d7269ef5c595fd773060a40"
+leaflet@^1.5.1:
+  version "1.6.0"
+  resolved "https://registry.npmjs.org/leaflet/-/leaflet-1.6.0.tgz"
+  integrity sha512-CPkhyqWUKZKFJ6K8umN5/D2wrJ2+/8UIpXppY7QDnUZW5bZL5+SEI2J7GBpwh4LIupOKqbNSQXgqmrEJopHVNQ==
 
-less-loader@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/less-loader/-/less-loader-4.1.0.tgz#2c1352c5b09a4f84101490274fd51674de41363e"
+less-loader@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.npmjs.org/less-loader/-/less-loader-6.1.0.tgz"
+  integrity sha512-/jLzOwLyqJ7Kt3xg5sHHkXtOyShWwFj410K9Si9WO+/h8rmYxxkSR0A3/hFEntWudE20zZnWMtpMYnLzqTVdUA==
   dependencies:
-    clone "^2.1.1"
-    loader-utils "^1.1.0"
-    pify "^3.0.0"
+    clone "^2.1.2"
+    less "^3.11.1"
+    loader-utils "^2.0.0"
+    schema-utils "^2.6.6"
 
-less@3.9.0:
-  version "3.9.0"
-  resolved "https://registry.yarnpkg.com/less/-/less-3.9.0.tgz#b7511c43f37cf57dc87dffd9883ec121289b1474"
+less@^3.11.1:
+  version "3.11.1"
+  resolved "https://registry.npmjs.org/less/-/less-3.11.1.tgz"
+  integrity sha512-tlWX341RECuTOvoDIvtFqXsKj072hm3+9ymRBe76/mD6O5ZZecnlAOVDlWAleF2+aohFrxNidXhv2773f6kY7g==
   dependencies:
     clone "^2.1.2"
+    tslib "^1.10.0"
   optionalDependencies:
     errno "^0.1.1"
     graceful-fs "^4.1.2"
@@ -3150,122 +6318,246 @@ less@3.9.0:
     request "^2.83.0"
     source-map "~0.6.0"
 
+leven@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz"
+  integrity sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==
+
 levenshtein@^1.0.5:
   version "1.0.5"
-  resolved "https://registry.yarnpkg.com/levenshtein/-/levenshtein-1.0.5.tgz#3911737a9cb56da345d008f55782c6f138979ba3"
+  resolved "https://registry.npmjs.org/levenshtein/-/levenshtein-1.0.5.tgz"
+  integrity sha1-ORFzepy1baNF0Aj1V4LG8TiXm6M=
 
-loader-runner@^2.3.0:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.3.1.tgz#026f12fe7c3115992896ac02ba022ba92971b979"
+levn@~0.3.0:
+  version "0.3.0"
+  resolved "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz"
+  integrity sha1-OwmSTt+fCDwEkP3UwLxEIeBHZO4=
+  dependencies:
+    prelude-ls "~1.1.2"
+    type-check "~0.3.2"
+
+lines-and-columns@^1.1.6:
+  version "1.1.6"
+  resolved "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz"
+  integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=
+
+loader-runner@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.npmjs.org/loader-runner/-/loader-runner-2.4.0.tgz"
+  integrity sha512-Jsmr89RcXGIwivFY21FcRrisYZfvLMTWx5kOLc+JTxtpBOG6xML0vzbc6SEQG2FO9/4Fc3wW4LVcB5DmGflaRw==
+
+loader-utils@1.2.3:
+  version "1.2.3"
+  resolved "https://registry.npmjs.org/loader-utils/-/loader-utils-1.2.3.tgz"
+  integrity sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA==
+  dependencies:
+    big.js "^5.2.2"
+    emojis-list "^2.0.0"
+    json5 "^1.0.1"
 
 loader-utils@^0.2.16:
   version "0.2.17"
-  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-0.2.17.tgz#f86e6374d43205a6e6c60e9196f17c0299bfb348"
+  resolved "https://registry.npmjs.org/loader-utils/-/loader-utils-0.2.17.tgz"
+  integrity sha1-+G5jdNQyBabmxg6RlvF8Apm/s0g=
   dependencies:
     big.js "^3.1.3"
     emojis-list "^2.0.0"
     json5 "^0.5.0"
     object-assign "^4.0.1"
 
-loader-utils@^1.0.0, loader-utils@^1.0.2, loader-utils@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.1.0.tgz#c98aef488bcceda2ffb5e2de646d6a754429f5cd"
+loader-utils@^1.0.0, loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.3:
+  version "1.4.0"
+  resolved "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz"
+  integrity sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==
   dependencies:
-    big.js "^3.1.3"
-    emojis-list "^2.0.0"
-    json5 "^0.5.0"
+    big.js "^5.2.2"
+    emojis-list "^3.0.0"
+    json5 "^1.0.1"
 
-locate-path@^2.0.0:
+loader-utils@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
+  resolved "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz"
+  integrity sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==
   dependencies:
-    p-locate "^2.0.0"
-    path-exists "^3.0.0"
+    big.js "^5.2.2"
+    emojis-list "^3.0.0"
+    json5 "^2.1.2"
+
+loader-utils@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.4.tgz#8b5cb38b5c34a9a018ee1fc0e6a066d1dfcc528c"
+  integrity sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==
+  dependencies:
+    big.js "^5.2.2"
+    emojis-list "^3.0.0"
+    json5 "^2.1.2"
 
 locate-path@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-3.0.0.tgz#dbec3b3ab759758071b58fe59fc41871af21400e"
+  resolved "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz"
+  integrity sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==
   dependencies:
     p-locate "^3.0.0"
     path-exists "^3.0.0"
 
-lodash.camelcase@^4.3.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
-
-lodash.debounce@^4.0.8:
-  version "4.0.8"
-  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
+locate-path@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz"
+  integrity sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==
+  dependencies:
+    p-locate "^4.1.0"
 
 lodash.memoize@^4.1.2:
   version "4.1.2"
-  resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
+  resolved "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz"
+  integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=
+
+lodash.sortby@^4.7.0:
+  version "4.7.0"
+  resolved "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz"
+  integrity sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=
 
 lodash.uniq@^4.5.0:
   version "4.5.0"
-  resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
+  resolved "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz"
+  integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
-lodash@^4.17.10, lodash@^4.17.3, lodash@^4.17.5:
-  version "4.17.11"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
+lodash@4.x, lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.3, lodash@^4.17.5:
+  version "4.17.21"
+  resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
 log-symbols@^2.1.0, log-symbols@^2.2.0:
   version "2.2.0"
-  resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-2.2.0.tgz#5740e1c5d6f0dfda4ad9323b5332107ef6b4c40a"
+  resolved "https://registry.npmjs.org/log-symbols/-/log-symbols-2.2.0.tgz"
+  integrity sha512-VeIAFslyIerEJLXHziedo2basKbMKtTw3vfn5IzG0XTjhAVEJyNHnL2p7vc+wBDSdQuUpNw3M2u6xb9QsAY5Eg==
   dependencies:
     chalk "^2.0.1"
 
-loglevel@1.x, loglevel@^1.4.1:
-  version "1.6.1"
-  resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.6.1.tgz#e0fc95133b6ef276cdc8887cdaf24aa6f156f8fa"
+loglevel@*, loglevel@^1.6.6:
+  version "1.6.7"
+  resolved "https://registry.npmjs.org/loglevel/-/loglevel-1.6.7.tgz"
+  integrity sha512-cY2eLFrQSAfVPhCgH1s7JI73tMbg9YC3v3+ZHVW67sBS7UxWzNEk/ZBbSfLykBWHp33dqqtOv82gjhKEi81T/A==
+
+loglevel@1.6.3:
+  version "1.6.3"
+  resolved "https://registry.npmjs.org/loglevel/-/loglevel-1.6.3.tgz"
+  integrity sha512-LoEDv5pgpvWgPF4kNYuIp0qqSJVWak/dML0RY74xlzMZiT9w77teNAwKYKWBTYjlokMirg+o3jBwp+vlLrcfAA==
 
 loglevelnext@^1.0.1:
   version "1.0.5"
-  resolved "https://registry.yarnpkg.com/loglevelnext/-/loglevelnext-1.0.5.tgz#36fc4f5996d6640f539ff203ba819641680d75a2"
+  resolved "https://registry.npmjs.org/loglevelnext/-/loglevelnext-1.0.5.tgz"
+  integrity sha512-V/73qkPuJmx4BcBF19xPBr+0ZRVBhc4POxvZTZdMeXpJ4NItXSJ/MSwuFT0kQJlCbXvdlZoQQ/418bS1y9Jh6A==
   dependencies:
     es6-symbol "^3.1.1"
     object.assign "^4.1.0"
 
 lower-case@^1.1.1:
   version "1.1.4"
-  resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-1.1.4.tgz#9a2cabd1b9e8e0ae993a4bf7d5875c39c42e8eac"
+  resolved "https://registry.npmjs.org/lower-case/-/lower-case-1.1.4.tgz"
+  integrity sha1-miyr0bno4K6ZOkv31YdcOcQujqw=
 
-lru-cache@^4.1.1:
-  version "4.1.3"
-  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.3.tgz#a1175cf3496dfc8436c156c334b4955992bce69c"
+lru-cache@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz"
+  integrity sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==
+  dependencies:
+    yallist "^3.0.2"
+
+lru-cache@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz"
+  integrity sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==
   dependencies:
-    pseudomap "^1.0.2"
-    yallist "^2.1.2"
+    yallist "^4.0.0"
 
-make-dir@^1.0.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-1.3.0.tgz#79c1033b80515bd6d24ec9933e860ca75ee27f0c"
+luxon@^1.25.0:
+  version "1.25.0"
+  resolved "https://registry.npmjs.org/luxon/-/luxon-1.25.0.tgz"
+  integrity sha512-hEgLurSH8kQRjY6i4YLey+mcKVAWXbDNlZRmM6AgWDJ1cY3atl8Ztf5wEY7VBReFbmGnwQPz7KYJblL8B2k0jQ==
+
+make-dir@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz"
+  integrity sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==
   dependencies:
-    pify "^3.0.0"
+    pify "^4.0.1"
+    semver "^5.6.0"
+
+make-dir@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.npmjs.org/make-dir/-/make-dir-3.0.2.tgz"
+  integrity sha512-rYKABKutXa6vXTXhoV18cBE7PaewPXHe/Bdq4v+ZLMhxbWApkFFplT0LcbMW+6BbjnQXzZ/sAvSE/JdguApG5w==
+  dependencies:
+    semver "^6.0.0"
+
+make-error@1.x:
+  version "1.3.6"
+  resolved "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz"
+  integrity sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==
+
+makeerror@1.0.x:
+  version "1.0.11"
+  resolved "https://registry.npmjs.org/makeerror/-/makeerror-1.0.11.tgz"
+  integrity sha1-4BpckQnyr3lmDk6LlYd5AYT1qWw=
+  dependencies:
+    tmpl "1.0.x"
 
 map-age-cleaner@^0.1.1:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/map-age-cleaner/-/map-age-cleaner-0.1.2.tgz#098fb15538fd3dbe461f12745b0ca8568d4e3f74"
+  version "0.1.3"
+  resolved "https://registry.npmjs.org/map-age-cleaner/-/map-age-cleaner-0.1.3.tgz"
+  integrity sha512-bJzx6nMoP6PDLPBFmg7+xRKeFZvFboMrGlxmNj9ClvX53KrmvM5bXFXEWjbz4cz1AFn+jWJ9z/DJSz7hrs0w3w==
   dependencies:
     p-defer "^1.0.0"
 
 map-cache@^0.2.2:
   version "0.2.2"
-  resolved "https://registry.yarnpkg.com/map-cache/-/map-cache-0.2.2.tgz#c32abd0bd6525d9b051645bb4f26ac5dc98a0dbf"
+  resolved "https://registry.npmjs.org/map-cache/-/map-cache-0.2.2.tgz"
+  integrity sha1-wyq9C9ZSXZsFFkW7TyasXcmKDb8=
 
 map-visit@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/map-visit/-/map-visit-1.0.0.tgz#ecdca8f13144e660f1b5bd41f12f3479d98dfb8f"
+  resolved "https://registry.npmjs.org/map-visit/-/map-visit-1.0.0.tgz"
+  integrity sha1-7Nyo8TFE5mDxtb1B8S80edmN+48=
   dependencies:
     object-visit "^1.0.0"
 
-math-expression-evaluator@^1.2.14:
-  version "1.2.17"
-  resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz#de819fdbcd84dccd8fae59c6aeb79615b9d266ac"
+maplibre-gl@^5.6.1:
+  version "5.6.1"
+  resolved "https://registry.yarnpkg.com/maplibre-gl/-/maplibre-gl-5.6.1.tgz#d6fd215f14274aef9b695cd2a34eb3b4ad788049"
+  integrity sha512-TTSfoTaF7RqKUR9wR5qDxCHH2J1XfZ1E85luiLOx0h8r50T/LnwAwwfV0WVNh9o8dA7rwt57Ucivf1emyeukXg==
+  dependencies:
+    "@mapbox/geojson-rewind" "^0.5.2"
+    "@mapbox/jsonlint-lines-primitives" "^2.0.2"
+    "@mapbox/point-geometry" "^0.1.0"
+    "@mapbox/tiny-sdf" "^2.0.6"
+    "@mapbox/unitbezier" "^0.0.1"
+    "@mapbox/vector-tile" "^1.3.1"
+    "@mapbox/whoots-js" "^3.1.0"
+    "@maplibre/maplibre-gl-style-spec" "^23.3.0"
+    "@types/geojson" "^7946.0.16"
+    "@types/geojson-vt" "3.2.5"
+    "@types/mapbox__point-geometry" "^0.1.4"
+    "@types/mapbox__vector-tile" "^1.3.4"
+    "@types/pbf" "^3.0.5"
+    "@types/supercluster" "^7.1.3"
+    earcut "^3.0.1"
+    geojson-vt "^4.0.2"
+    gl-matrix "^3.4.3"
+    global-prefix "^4.0.0"
+    kdbush "^4.0.2"
+    murmurhash-js "^1.0.0"
+    pbf "^3.3.0"
+    potpack "^2.0.0"
+    quickselect "^3.0.0"
+    supercluster "^8.0.1"
+    tinyqueue "^3.0.0"
+    vt-pbf "^3.1.3"
 
 md5.js@^1.3.4:
   version "1.3.5"
-  resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
+  resolved "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz"
+  integrity sha512-xitP+WxNPcTTOgnTJcrhM0xvdPepipPSf3I8EIpGKeFLjt3PlJLIDG3u8EX53ZIubkb+5U2+3rELYpEhHhzdkg==
   dependencies:
     hash-base "^3.0.0"
     inherits "^2.0.1"
@@ -3273,48 +6565,90 @@ md5.js@^1.3.4:
 
 md5@^2.2.1:
   version "2.2.1"
-  resolved "https://registry.yarnpkg.com/md5/-/md5-2.2.1.tgz#53ab38d5fe3c8891ba465329ea23fac0540126f9"
+  resolved "https://registry.npmjs.org/md5/-/md5-2.2.1.tgz"
+  integrity sha1-U6s41f48iJG6RlMp6iP6wFQBJvk=
   dependencies:
     charenc "~0.0.1"
     crypt "~0.0.1"
     is-buffer "~1.1.1"
 
+mdn-data@2.0.4:
+  version "2.0.4"
+  resolved "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz"
+  integrity sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==
+
 media-typer@0.3.0:
   version "0.3.0"
-  resolved "http://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
+  resolved "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz"
+  integrity sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=
 
-mediaelement@4.2.9:
-  version "4.2.9"
-  resolved "https://registry.yarnpkg.com/mediaelement/-/mediaelement-4.2.9.tgz#6ea844f188c0be88127ae825fdb6bd2364a53600"
+mediaelement@^4.2.16:
+  version "4.2.16"
+  resolved "https://registry.npmjs.org/mediaelement/-/mediaelement-4.2.16.tgz"
+  integrity sha512-5GinxsRpVA36w6tAD6nTqVSiZ0LzIhqUrzD8wzOAtZPPM7NOwOBtz6Oa85VemS+3Jvoo38jM1RvNqwKYJBBxtQ==
   dependencies:
     global "^4.3.1"
 
+mediasoup-client@^3.6.28:
+  version "3.6.52"
+  resolved "https://registry.npmjs.org/mediasoup-client/-/mediasoup-client-3.6.52.tgz"
+  integrity sha512-7N8DB9zVzJ7Ac0L8RWQuq0ofHzz3FqYmWsWSTXi9R3DePM895q4A47bZkxFbSe8aCOGSGXsUWT+r7ALihYHn+A==
+  dependencies:
+    "@types/debug" "^4.1.7"
+    "@types/events" "^3.0.0"
+    awaitqueue "^2.4.0"
+    bowser "^2.11.0"
+    debug "^4.3.4"
+    events "^3.3.0"
+    fake-mediastreamtrack "^1.1.6"
+    h264-profile-level-id "^1.0.1"
+    sdp-transform "^2.14.1"
+    supports-color "^9.2.2"
+
 mem@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/mem/-/mem-4.0.0.tgz#6437690d9471678f6cc83659c00cbafcd6b0cdaf"
+  version "4.3.0"
+  resolved "https://registry.npmjs.org/mem/-/mem-4.3.0.tgz"
+  integrity sha512-qX2bG48pTqYRVmDB37rn/6PT7LcR8T7oAX3bf99u1Tt1nzxYfxkgqDwUwolPlXweM0XzBOBFzSx4kfp7KP1s/w==
   dependencies:
     map-age-cleaner "^0.1.1"
-    mimic-fn "^1.0.0"
-    p-is-promise "^1.1.0"
+    mimic-fn "^2.0.0"
+    p-is-promise "^2.0.0"
 
-memory-fs@^0.4.0, memory-fs@~0.4.1:
+memory-fs@^0.4.0, memory-fs@^0.4.1:
   version "0.4.1"
-  resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
+  resolved "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz"
+  integrity sha1-OpoguEYlI+RHz7x+i7gO1me/xVI=
+  dependencies:
+    errno "^0.1.3"
+    readable-stream "^2.0.1"
+
+memory-fs@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.npmjs.org/memory-fs/-/memory-fs-0.5.0.tgz"
+  integrity sha512-jA0rdU5KoQMC0e6ppoNRtpp6vjFq6+NY7r8hywnC7V+1Xj/MtHwGIbB1QaK/dunyjWteJzmkpd7ooeWg10T7GA==
   dependencies:
     errno "^0.1.3"
     readable-stream "^2.0.1"
 
 merge-descriptors@1.0.1:
   version "1.0.1"
-  resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
+  resolved "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz"
+  integrity sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=
+
+merge-stream@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz"
+  integrity sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==
 
 methods@~1.1.2:
   version "1.1.2"
-  resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
+  resolved "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz"
+  integrity sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=
 
-micromatch@^3.1.10, micromatch@^3.1.4, micromatch@^3.1.8, micromatch@^3.1.9:
+micromatch@^3.0.4, micromatch@^3.1.10, micromatch@^3.1.4, micromatch@^3.1.9:
   version "3.1.10"
-  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-3.1.10.tgz#70859bc95c9840952f359a068a3fc49f9ecfac23"
+  resolved "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz"
+  integrity sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==
   dependencies:
     arr-diff "^4.0.0"
     array-unique "^0.3.2"
@@ -3330,91 +6664,140 @@ micromatch@^3.1.10, micromatch@^3.1.4, micromatch@^3.1.8, micromatch@^3.1.9:
     snapdragon "^0.8.1"
     to-regex "^3.0.2"
 
+micromatch@^4.0.0, micromatch@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.npmjs.org/micromatch/-/micromatch-4.0.2.tgz"
+  integrity sha512-y7FpHSbMUMoyPbYUSzO6PaZ6FyRnQOpHuKwbo1G+Knck95XVU4QAiKdGEnj5wwoS7PlOgthX/09u5iFJ+aYf5Q==
+  dependencies:
+    braces "^3.0.1"
+    picomatch "^2.0.5"
+
 miller-rabin@^4.0.0:
   version "4.0.1"
-  resolved "https://registry.yarnpkg.com/miller-rabin/-/miller-rabin-4.0.1.tgz#f080351c865b0dc562a8462966daa53543c78a4d"
+  resolved "https://registry.npmjs.org/miller-rabin/-/miller-rabin-4.0.1.tgz"
+  integrity sha512-115fLhvZVqWwHPbClyntxEVfVDfl9DLLTuJvq3g2O/Oxi8AiNouAHvDSzHS0viUJc+V5vm3eq91Xwqn9dp4jRA==
   dependencies:
     bn.js "^4.0.0"
     brorand "^1.0.1"
 
-"mime-db@>= 1.36.0 < 2", mime-db@~1.37.0:
-  version "1.37.0"
-  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.37.0.tgz#0b6a0ce6fdbe9576e25f1f2d2fde8830dc0ad0d8"
+mime-db@1.43.0, "mime-db@>= 1.43.0 < 2":
+  version "1.43.0"
+  resolved "https://registry.npmjs.org/mime-db/-/mime-db-1.43.0.tgz"
+  integrity sha512-+5dsGEEovYbT8UY9yD7eE4XTc4UwJ1jBYlgaQQF38ENsKR3wj/8q8RFZrF9WIZpB2V1ArTVFUva8sAul1NzRzQ==
 
-mime-types@^2.1.12, mime-types@~2.1.17, mime-types@~2.1.18, mime-types@~2.1.19:
-  version "2.1.21"
-  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.21.tgz#28995aa1ecb770742fe6ae7e58f9181c744b3f96"
+mime-types@^2.1.12, mime-types@~2.1.17, mime-types@~2.1.19, mime-types@~2.1.24:
+  version "2.1.26"
+  resolved "https://registry.npmjs.org/mime-types/-/mime-types-2.1.26.tgz"
+  integrity sha512-01paPWYgLrkqAyrlDorC1uDwl2p3qZT7yl806vW7DvDoxwXi46jsjFbg+WdwotBIk6/MbEhO/dh5aZ5sNj/dWQ==
   dependencies:
-    mime-db "~1.37.0"
+    mime-db "1.43.0"
 
-mime@1.4.1:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/mime/-/mime-1.4.1.tgz#121f9ebc49e3766f311a76e1fa1c8003c4b03aa6"
-
-mime@^1.4.1:
+mime@1.6.0, mime@^1.4.1:
   version "1.6.0"
-  resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
+  resolved "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz"
+  integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
 
-mime@^2.0.3, mime@^2.3.1:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/mime/-/mime-2.3.1.tgz#b1621c54d63b97c47d3cfe7f7215f7d64517c369"
+mime@^2.3.1:
+  version "2.4.7"
+  resolved "https://registry.npmjs.org/mime/-/mime-2.4.7.tgz"
+  integrity sha512-dhNd1uA2u397uQk3Nv5LM4lm93WYDUXFn3Fu291FJerns4jyTudqhIWe4W04YLy7Uk1tm1Ore04NpjRvQp/NPA==
+
+mime@^2.4.4:
+  version "2.4.4"
+  resolved "https://registry.npmjs.org/mime/-/mime-2.4.4.tgz"
+  integrity sha512-LRxmNwziLPT828z+4YkNzloCFC2YM4wrB99k+AV5ZbEyfGNWfG8SO1FUXLmLDBSo89NrJZ4DIWeLjy1CHGhMGA==
 
 mimic-fn@^1.0.0:
   version "1.2.0"
-  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.2.0.tgz#820c86a39334640e99516928bd03fca88057d022"
+  resolved "https://registry.npmjs.org/mimic-fn/-/mimic-fn-1.2.0.tgz"
+  integrity sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==
+
+mimic-fn@^2.0.0, mimic-fn@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz"
+  integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
 
 min-document@^2.19.0:
   version "2.19.0"
-  resolved "https://registry.yarnpkg.com/min-document/-/min-document-2.19.0.tgz#7bd282e3f5842ed295bb748cdd9f1ffa2c824685"
+  resolved "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz"
+  integrity sha1-e9KC4/WELtKVu3SM3Z8f+iyCRoU=
   dependencies:
     dom-walk "^0.1.0"
 
-mini-css-extract-plugin@^0.4.0:
-  version "0.4.4"
-  resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.4.4.tgz#c10410a004951bd3cedac1da69053940fccb625d"
+mini-css-extract-plugin@^0.8.0:
+  version "0.8.2"
+  resolved "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.8.2.tgz"
+  integrity sha512-a3Y4of27Wz+mqK3qrcd3VhYz6cU0iW5x3Sgvqzbj+XmlrSizmvu8QQMl5oMYJjgHOC4iyt+w7l4umP+dQeW3bw==
   dependencies:
     loader-utils "^1.1.0"
+    normalize-url "1.9.1"
     schema-utils "^1.0.0"
     webpack-sources "^1.1.0"
 
 minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1:
   version "1.0.1"
-  resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"
+  resolved "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz"
+  integrity sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==
 
-minimalistic-crypto-utils@^1.0.0, minimalistic-crypto-utils@^1.0.1:
+minimalistic-crypto-utils@^1.0.1:
   version "1.0.1"
-  resolved "https://registry.yarnpkg.com/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz#f6c00c1c0b082246e5c4d99dfb8c7c083b2b582a"
+  resolved "https://registry.npmjs.org/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz"
+  integrity sha1-9sAMHAsIIkblxNmd+4x8CDsrWCo=
 
 minimatch@^3.0.4:
   version "3.0.4"
-  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
+  resolved "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz"
+  integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==
   dependencies:
     brace-expansion "^1.1.7"
 
 minimist@0.0.8:
   version "0.0.8"
-  resolved "http://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
+  resolved "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz"
+  integrity sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=
 
-minimist@^1.2.0:
-  version "1.2.0"
-  resolved "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
+minimist@^1.1.1, minimist@^1.2.0, minimist@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz"
+  integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
 
-minipass@^2.2.1, minipass@^2.3.3:
-  version "2.3.4"
-  resolved "https://registry.yarnpkg.com/minipass/-/minipass-2.3.4.tgz#4768d7605ed6194d6d576169b9e12ef71e9d9957"
+minimist@^1.2.6, minimist@^1.2.8:
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c"
+  integrity sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==
+
+minipass-collect@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/minipass-collect/-/minipass-collect-1.0.2.tgz"
+  integrity sha512-6T6lH0H8OG9kITm/Jm6tdooIbogG9e0tLgpY6mphXSm/A9u8Nq1ryBG+Qspiub9LjWlBPsPS3tWQ/Botq4FdxA==
   dependencies:
-    safe-buffer "^5.1.2"
-    yallist "^3.0.0"
+    minipass "^3.0.0"
 
-minizlib@^1.1.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-1.1.1.tgz#6734acc045a46e61d596a43bb9d9cd326e19cc42"
+minipass-flush@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.npmjs.org/minipass-flush/-/minipass-flush-1.0.5.tgz"
+  integrity sha512-JmQSYYpPUqX5Jyn1mXaRwOda1uQ8HP5KAT/oDSLCzt1BYRhQU0/hDtsB1ufZfEEzMZ9aAVmsBw8+FWsIXlClWw==
   dependencies:
-    minipass "^2.2.1"
+    minipass "^3.0.0"
 
-mississippi@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/mississippi/-/mississippi-2.0.0.tgz#3442a508fafc28500486feea99409676e4ee5a6f"
+minipass-pipeline@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.npmjs.org/minipass-pipeline/-/minipass-pipeline-1.2.2.tgz"
+  integrity sha512-3JS5A2DKhD2g0Gg8x3yamO0pj7YeKGwVlDS90pF++kxptwx/F+B//roxf9SqYil5tQo65bijy+dAuAFZmYOouA==
+  dependencies:
+    minipass "^3.0.0"
+
+minipass@^3.0.0, minipass@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.npmjs.org/minipass/-/minipass-3.1.1.tgz"
+  integrity sha512-UFqVihv6PQgwj8/yTGvl9kPz7xIAY+R5z6XYjRInD3Gk3qx6QGSD6zEcpeG4Dy/lQnv1J6zv8ejV90hyYIKf3w==
+  dependencies:
+    yallist "^4.0.0"
+
+mississippi@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/mississippi/-/mississippi-3.0.0.tgz"
+  integrity sha512-x471SsVjUtBRtcvd4BzKE9kFC+/2TeWgKCgw0bZcw1b9l2X3QX5vCWgF+KaZaYm87Ss//rHnWryupDrgLvmSkA==
   dependencies:
     concat-stream "^1.5.0"
     duplexify "^3.4.2"
@@ -3422,41 +6805,54 @@ mississippi@^2.0.0:
     flush-write-stream "^1.0.0"
     from2 "^2.1.0"
     parallel-transform "^1.1.0"
-    pump "^2.0.1"
+    pump "^3.0.0"
     pumpify "^1.3.3"
     stream-each "^1.1.0"
     through2 "^2.0.0"
 
 mixin-deep@^1.2.0:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/mixin-deep/-/mixin-deep-1.3.1.tgz#a49e7268dce1a0d9698e45326c5626df3543d0fe"
+  version "1.3.2"
+  resolved "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.2.tgz"
+  integrity sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA==
   dependencies:
     for-in "^1.0.2"
     is-extendable "^1.0.1"
 
-mkdirp@0.5.x, mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkdirp@~0.5.1:
+mkdirp@1.x:
+  version "1.0.4"
+  resolved "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz"
+  integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
+
+mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.1:
   version "0.5.1"
-  resolved "http://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
+  resolved "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz"
+  integrity sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=
   dependencies:
     minimist "0.0.8"
 
-moment-jdateformatparser@^1.1.0:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/moment-jdateformatparser/-/moment-jdateformatparser-1.2.1.tgz#336c41ef7a6db8021d7ca086385a35fb8a648456"
+mkdirp@^0.5.3:
+  version "0.5.6"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.6.tgz#7def03d2432dcae4ba1d611445c48396062255f6"
+  integrity sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==
+  dependencies:
+    minimist "^1.2.6"
 
-moment-timezone@^0.5.14:
-  version "0.5.21"
-  resolved "https://registry.yarnpkg.com/moment-timezone/-/moment-timezone-0.5.21.tgz#3cba247d84492174dbf71de2a9848fa13207b845"
+moment-timezone@^0.5.26:
+  version "0.5.28"
+  resolved "https://registry.npmjs.org/moment-timezone/-/moment-timezone-0.5.28.tgz"
+  integrity sha512-TDJkZvAyKIVWg5EtVqRzU97w0Rb0YVbfpqyjgu6GwXCAohVRqwZjf4fOzDE6p1Ch98Sro/8hQQi65WDXW5STPw==
   dependencies:
     moment ">= 2.9.0"
 
-"moment@>= 2.9.0", moment@>=2.14.0, moment@^2.20.1, moment@^2.21.0, moment@^2.22.0:
-  version "2.22.2"
-  resolved "https://registry.yarnpkg.com/moment/-/moment-2.22.2.tgz#3c257f9839fc0e93ff53149632239eb90783ff66"
+"moment@>= 2.9.0", moment@>=2.14.0, moment@^2.21.0:
+  version "2.24.0"
+  resolved "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz"
+  integrity sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==
 
 move-concurrently@^1.0.1:
   version "1.0.1"
-  resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
+  resolved "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz"
+  integrity sha1-viwAX9oy4LKa8fBdfEszIUxwH5I=
   dependencies:
     aproba "^1.1.1"
     copy-concurrently "^1.0.0"
@@ -3467,41 +6863,58 @@ move-concurrently@^1.0.1:
 
 ms@2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
+  resolved "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz"
+  integrity sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=
 
-ms@^2.1.1:
+ms@2.1.1:
   version "2.1.1"
-  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.1.tgz#30a5864eb3ebb0a66f2ebe6d727af06a09d86e0a"
+  resolved "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz"
+  integrity sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==
+
+ms@2.1.2, ms@^2.1.1:
+  version "2.1.2"
+  resolved "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz"
+  integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
 
 multicast-dns-service-types@^1.1.0:
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz#899f11d9686e5e05cb91b35d5f0e63b773cfc901"
+  resolved "https://registry.npmjs.org/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz"
+  integrity sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE=
 
 multicast-dns@^6.0.1:
   version "6.2.3"
-  resolved "https://registry.yarnpkg.com/multicast-dns/-/multicast-dns-6.2.3.tgz#a0ec7bd9055c4282f790c3c82f4e28db3b31b229"
+  resolved "https://registry.npmjs.org/multicast-dns/-/multicast-dns-6.2.3.tgz"
+  integrity sha512-ji6J5enbMyGRHIAkAOu3WdV8nggqviKCEKtXcOqfphZZtQrmHKycfynJ2V7eVPUA4NhJ6V7Wf4TmGbTwKE9B6g==
   dependencies:
     dns-packet "^1.3.1"
     thunky "^1.0.2"
 
-multipipe@latest:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/multipipe/-/multipipe-2.0.3.tgz#2305ecf8f69cc67737f507c460e6aec0a41eacfb"
+mumath@^3.3.4:
+  version "3.3.4"
+  resolved "https://registry.npmjs.org/mumath/-/mumath-3.3.4.tgz"
+  integrity sha1-SNSg8P2MrU57Mglu6JsWGmPTC78=
   dependencies:
-    duplexer2 "^0.1.2"
-    object-assign "^4.1.0"
+    almost-equal "^1.1.0"
 
-mustache@^2.3.0:
-  version "2.3.2"
-  resolved "https://registry.yarnpkg.com/mustache/-/mustache-2.3.2.tgz#a6d4d9c3f91d13359ab889a812954f9230a3d0c5"
+murmurhash-js@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/murmurhash-js/-/murmurhash-js-1.0.0.tgz"
+  integrity sha1-sGJ44h/Gw3+lMTcysEEry2rhX1E=
+
+mustache@^3.0.1:
+  version "3.2.1"
+  resolved "https://registry.npmjs.org/mustache/-/mustache-3.2.1.tgz"
+  integrity sha512-RERvMFdLpaFfSRIEe632yDm5nsd0SDKn8hGmcUwswnyiE5mtdZLDybtHAz6hjJhawokF0hXvGLtx9mrQfm6FkA==
 
-nan@^2.9.2:
-  version "2.11.1"
-  resolved "https://registry.yarnpkg.com/nan/-/nan-2.11.1.tgz#90e22bccb8ca57ea4cd37cc83d3819b52eea6766"
+nan@^2.12.1:
+  version "2.16.0"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.16.0.tgz#664f43e45460fb98faf00edca0bb0d7b8dce7916"
+  integrity sha512-UdAqHyFngu7TfQKsCBgAA6pWDkT8MAO7d0jyOecVhN5354xbLqdn8mV9Tat9gepAupm0bt2DbeaSC8vS52MuFA==
 
 nanomatch@^1.2.9:
   version "1.2.13"
-  resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
+  resolved "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz"
+  integrity sha512-fpoe2T0RbHwBTBUOftAfBPaDEi06ufaUai0mE6Yn1kacc3SnTErfb/h+X94VXzI64rKFHYImXSvdwGGCmwOqCA==
   dependencies:
     arr-diff "^4.0.0"
     array-unique "^0.3.2"
@@ -3515,43 +6928,52 @@ nanomatch@^1.2.9:
     snapdragon "^0.8.1"
     to-regex "^3.0.1"
 
-needle@^2.2.1:
-  version "2.2.4"
-  resolved "https://registry.yarnpkg.com/needle/-/needle-2.2.4.tgz#51931bff82533b1928b7d1d69e01f1b00ffd2a4e"
-  dependencies:
-    debug "^2.1.2"
-    iconv-lite "^0.4.4"
-    sax "^1.2.4"
+natural-compare@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz"
+  integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=
 
-negotiator@0.6.1:
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.1.tgz#2b327184e8992101177b28563fb5e7102acd0ca9"
+negotiator@0.6.2:
+  version "0.6.2"
+  resolved "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz"
+  integrity sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw==
 
-neo-async@^2.5.0:
-  version "2.6.0"
-  resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.0.tgz#b9d15e4d71c6762908654b5183ed38b753340835"
+neo-async@^2.5.0, neo-async@^2.6.1:
+  version "2.6.1"
+  resolved "https://registry.npmjs.org/neo-async/-/neo-async-2.6.1.tgz"
+  integrity sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==
 
-next-tick@1:
+next-tick@~1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c"
+  resolved "https://registry.npmjs.org/next-tick/-/next-tick-1.0.0.tgz"
+  integrity sha1-yobR/ogoFpsBICCOPchCS524NCw=
 
 nice-try@^1.0.4:
   version "1.0.5"
-  resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
+  resolved "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz"
+  integrity sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==
 
 no-case@^2.2.0:
   version "2.3.2"
-  resolved "https://registry.yarnpkg.com/no-case/-/no-case-2.3.2.tgz#60b813396be39b3f1288a4c1ed5d1e7d28b464ac"
+  resolved "https://registry.npmjs.org/no-case/-/no-case-2.3.2.tgz"
+  integrity sha512-rmTZ9kz+f3rCvK2TD1Ue/oZlns7OGoIWP4fc3llxxRXlOkHKoWPPWJOfFYpITabSow43QJbRIoHQXtt10VldyQ==
   dependencies:
     lower-case "^1.1.1"
 
-node-forge@0.7.5:
-  version "0.7.5"
-  resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.7.5.tgz#6c152c345ce11c52f465c2abd957e8639cd674df"
+node-forge@0.9.0:
+  version "0.9.0"
+  resolved "https://registry.npmjs.org/node-forge/-/node-forge-0.9.0.tgz"
+  integrity sha512-7ASaDa3pD+lJ3WvXFsxekJQelBKRpne+GOVbLbtHYdd7pFspyeuJHnWfLplGf3SwKGbfs/aYl5V/JCIaHVUKKQ==
 
-node-libs-browser@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/node-libs-browser/-/node-libs-browser-2.1.0.tgz#5f94263d404f6e44767d726901fff05478d600df"
+node-int64@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.npmjs.org/node-int64/-/node-int64-0.4.0.tgz"
+  integrity sha1-h6kGXNs1XTGC2PlM4RGIuCXGijs=
+
+node-libs-browser@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.npmjs.org/node-libs-browser/-/node-libs-browser-2.2.1.tgz"
+  integrity sha512-h/zcD8H9kaDZ9ALUWwlBUDo6TKF8a7qBSCSEGfjTVIYeqsioSKaAX+BN7NgiMGp6iSIXZ3PxgCu8KS3b71YK5Q==
   dependencies:
     assert "^1.1.1"
     browserify-zlib "^0.2.0"
@@ -3560,10 +6982,10 @@ node-libs-browser@^2.0.0:
     constants-browserify "^1.0.0"
     crypto-browserify "^3.11.0"
     domain-browser "^1.1.1"
-    events "^1.0.0"
+    events "^3.0.0"
     https-browserify "^1.0.0"
     os-browserify "^0.3.0"
-    path-browserify "0.0.0"
+    path-browserify "0.0.1"
     process "^0.11.10"
     punycode "^1.2.4"
     querystring-es3 "^0.2.0"
@@ -3574,376 +6996,506 @@ node-libs-browser@^2.0.0:
     timers-browserify "^2.0.4"
     tty-browserify "0.0.0"
     url "^0.11.0"
-    util "^0.10.3"
-    vm-browserify "0.0.4"
+    util "^0.11.0"
+    vm-browserify "^1.0.1"
+
+node-modules-regexp@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/node-modules-regexp/-/node-modules-regexp-1.0.0.tgz"
+  integrity sha1-jZ2+KJZKSsVxLpExZCEHxx6Q7EA=
 
-node-notifier@^5.2.1:
-  version "5.3.0"
-  resolved "https://registry.yarnpkg.com/node-notifier/-/node-notifier-5.3.0.tgz#c77a4a7b84038733d5fb351aafd8a268bfe19a01"
+node-notifier@^8.0.0, node-notifier@^8.0.1:
+  version "8.0.1"
+  resolved "https://registry.npmjs.org/node-notifier/-/node-notifier-8.0.1.tgz"
+  integrity sha512-BvEXF+UmsnAfYfoapKM9nGxnP+Wn7P91YfXmrKnfcYCx6VBeoN5Ez5Ogck6I8Bi5k4RlpqRYaw75pAwzX9OphA==
   dependencies:
     growly "^1.3.0"
-    semver "^5.5.0"
+    is-wsl "^2.2.0"
+    semver "^7.3.2"
     shellwords "^0.1.1"
-    which "^1.3.0"
-
-node-pre-gyp@^0.10.0:
-  version "0.10.3"
-  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.10.3.tgz#3070040716afdc778747b61b6887bf78880b80fc"
-  dependencies:
-    detect-libc "^1.0.2"
-    mkdirp "^0.5.1"
-    needle "^2.2.1"
-    nopt "^4.0.1"
-    npm-packlist "^1.1.6"
-    npmlog "^4.0.2"
-    rc "^1.2.7"
-    rimraf "^2.6.1"
-    semver "^5.3.0"
-    tar "^4"
+    uuid "^8.3.0"
+    which "^2.0.2"
 
-node-releases@^1.0.0-alpha.14:
-  version "1.0.0-alpha.14"
-  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.0.0-alpha.14.tgz#da9e2780add4bbb59ad890af9e2018a1d9c0034b"
-  dependencies:
-    semver "^5.3.0"
+node-releases@^1.1.71:
+  version "1.1.72"
+  resolved "https://registry.npmjs.org/node-releases/-/node-releases-1.1.72.tgz"
+  integrity sha512-LLUo+PpH3dU6XizX3iVoubUNheF/owjXCZZ5yACDxNnPtgFuludV1ZL3ayK1kVep42Rmm0+R9/Y60NQbZ2bifw==
 
-nopt@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/nopt/-/nopt-4.0.1.tgz#d0d4685afd5415193c8c7505602d0d17cd64474d"
+normalize-package-data@^2.5.0:
+  version "2.5.0"
+  resolved "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz"
+  integrity sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==
   dependencies:
-    abbrev "1"
-    osenv "^0.1.4"
+    hosted-git-info "^2.1.4"
+    resolve "^1.10.0"
+    semver "2 || 3 || 4 || 5"
+    validate-npm-package-license "^3.0.1"
 
 normalize-path@^2.1.1:
   version "2.1.1"
-  resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-2.1.1.tgz#1ab28b556e198363a8c1a6f7e6fa20137fe6aed9"
+  resolved "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz"
+  integrity sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=
   dependencies:
     remove-trailing-separator "^1.0.1"
 
+normalize-path@^3.0.0, normalize-path@~3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz"
+  integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
+
 normalize-range@^0.1.2:
   version "0.1.2"
-  resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
+  resolved "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz"
+  integrity sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=
 
-normalize-url@^1.4.0:
+normalize-url@1.9.1:
   version "1.9.1"
-  resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-1.9.1.tgz#2cc0d66b31ea23036458436e3620d85954c66c3c"
+  resolved "https://registry.npmjs.org/normalize-url/-/normalize-url-1.9.1.tgz"
+  integrity sha1-LMDWazHqIwNkWENuNiDYWVTGbDw=
   dependencies:
     object-assign "^4.0.1"
     prepend-http "^1.0.0"
     query-string "^4.1.0"
     sort-keys "^1.0.0"
 
-nouislider@^11.1.0:
-  version "11.1.0"
-  resolved "http://registry.npmjs.org/nouislider/-/nouislider-11.1.0.tgz#1768eb5b854917325d41b96f2dc4eb3757d73381"
-
-npm-bundled@^1.0.1:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-1.0.5.tgz#3c1732b7ba936b3a10325aef616467c0ccbcc979"
+normalize-url@^3.0.0:
+  version "3.3.0"
+  resolved "https://registry.npmjs.org/normalize-url/-/normalize-url-3.3.0.tgz"
+  integrity sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==
 
-npm-packlist@^1.1.6:
-  version "1.1.12"
-  resolved "https://registry.yarnpkg.com/npm-packlist/-/npm-packlist-1.1.12.tgz#22bde2ebc12e72ca482abd67afc51eb49377243a"
-  dependencies:
-    ignore-walk "^3.0.1"
-    npm-bundled "^1.0.1"
+nosleep.js@^0.12.0:
+  version "0.12.0"
+  resolved "https://registry.npmjs.org/nosleep.js/-/nosleep.js-0.12.0.tgz"
+  integrity sha512-9d1HbpKLh3sdWlhXMhU6MMH+wQzKkrgfRkYV0EBdvt99YJfj0ilCJrWRDYG2130Tm4GXbEoTCx5b34JSaP+HhA==
 
 npm-run-path@^2.0.0:
   version "2.0.2"
-  resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
+  resolved "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz"
+  integrity sha1-NakjLfo11wZ7TLLd8jV7GHFTbF8=
   dependencies:
     path-key "^2.0.0"
 
-npmlog@^4.0.2:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"
+npm-run-path@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz"
+  integrity sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==
   dependencies:
-    are-we-there-yet "~1.1.2"
-    console-control-strings "~1.1.0"
-    gauge "~2.7.3"
-    set-blocking "~2.0.0"
+    path-key "^3.0.0"
 
-nth-check@~1.0.1:
+nth-check@^1.0.2, nth-check@~1.0.1:
   version "1.0.2"
-  resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-1.0.2.tgz#b2bd295c37e3dd58a3bf0700376663ba4d9cf05c"
+  resolved "https://registry.npmjs.org/nth-check/-/nth-check-1.0.2.tgz"
+  integrity sha512-WeBOdju8SnzPN5vTUJYxYUxLeXpCaVP5i5e0LF8fg7WORF2Wd7wFX/pk0tYZk7s8T+J7VLy0Da6J1+wCT0AtHg==
   dependencies:
     boolbase "~1.0.0"
 
 num2fraction@^1.2.2:
   version "1.2.2"
-  resolved "https://registry.yarnpkg.com/num2fraction/-/num2fraction-1.2.2.tgz#6f682b6a027a4e9ddfa4564cd2589d1d4e669ede"
+  resolved "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz"
+  integrity sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=
 
 number-is-nan@^1.0.0:
   version "1.0.1"
-  resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
+  resolved "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz"
+  integrity sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=
+
+nwsapi@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.0.tgz"
+  integrity sha512-h2AatdwYH+JHiZpv7pt/gSX1XoRGb7L/qSIeuqA6GwYoF9w1vP1cw42TO0aI2pNyshRK5893hNSl+1//vHK7hQ==
 
 oauth-sign@~0.9.0:
   version "0.9.0"
-  resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.9.0.tgz#47a7b016baa68b5fa0ecf3dee08a85c679ac6455"
+  resolved "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz"
+  integrity sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==
 
 object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
   version "4.1.1"
-  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
+  resolved "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz"
+  integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
 
 object-copy@^0.1.0:
   version "0.1.0"
-  resolved "https://registry.yarnpkg.com/object-copy/-/object-copy-0.1.0.tgz#7e7d858b781bd7c991a41ba975ed3812754e998c"
+  resolved "https://registry.npmjs.org/object-copy/-/object-copy-0.1.0.tgz"
+  integrity sha1-fn2Fi3gb18mRpBupde04EnVOmYw=
   dependencies:
     copy-descriptor "^0.1.0"
     define-property "^0.2.5"
     kind-of "^3.0.3"
 
-object-keys@^1.0.11, object-keys@^1.0.12:
-  version "1.0.12"
-  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.0.12.tgz#09c53855377575310cca62f55bb334abff7b3ed2"
+object-inspect@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.npmjs.org/object-inspect/-/object-inspect-1.7.0.tgz"
+  integrity sha512-a7pEHdh1xKIAgTySUGgLMx/xwDZskN1Ud6egYYN3EdRW4ZMPNEDUTF+hwy2LUC+Bl+SyLXANnwz/jyh/qutKUw==
+
+object-is@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/object-is/-/object-is-1.0.2.tgz"
+  integrity sha512-Epah+btZd5wrrfjkJZq1AOB9O6OxUQto45hzFd7lXGrpHPGE0W1k+426yrZV+k6NJOzLNNW/nVsmZdIWsAqoOQ==
+
+object-keys@^1.0.11, object-keys@^1.0.12, object-keys@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz"
+  integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
 
 object-visit@^1.0.0:
   version "1.0.1"
-  resolved "https://registry.yarnpkg.com/object-visit/-/object-visit-1.0.1.tgz#f79c4493af0c5377b59fe39d395e41042dd045bb"
+  resolved "https://registry.npmjs.org/object-visit/-/object-visit-1.0.1.tgz"
+  integrity sha1-95xEk68MU3e1n+OdOV5BBC3QRbs=
   dependencies:
     isobject "^3.0.0"
 
 object.assign@^4.1.0:
   version "4.1.0"
-  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.0.tgz#968bf1100d7956bb3ca086f006f846b3bc4008da"
+  resolved "https://registry.npmjs.org/object.assign/-/object.assign-4.1.0.tgz"
+  integrity sha512-exHJeq6kBKj58mqGyTQ9DFvrZC/eR6OwxzoM9YRoGBqrXYonaFyGiFMuc9VZrXf7DarreEwMpurG3dd+CNyW5w==
   dependencies:
     define-properties "^1.1.2"
     function-bind "^1.1.1"
     has-symbols "^1.0.0"
     object-keys "^1.0.11"
 
-object.getownpropertydescriptors@^2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.0.3.tgz#8758c846f5b407adab0f236e0986f14b051caa16"
+object.getownpropertydescriptors@^2.0.3, object.getownpropertydescriptors@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.0.tgz"
+  integrity sha512-Z53Oah9A3TdLoblT7VKJaTDdXdT+lQO+cNpKVnya5JDe9uLvzu1YyY1yFDFrcxrlRgWrEFH0jJtD/IbuwjcEVg==
   dependencies:
-    define-properties "^1.1.2"
-    es-abstract "^1.5.1"
+    define-properties "^1.1.3"
+    es-abstract "^1.17.0-next.1"
 
 object.pick@^1.3.0:
   version "1.3.0"
-  resolved "https://registry.yarnpkg.com/object.pick/-/object.pick-1.3.0.tgz#87a10ac4c1694bd2e1cbf53591a66141fb5dd747"
+  resolved "https://registry.npmjs.org/object.pick/-/object.pick-1.3.0.tgz"
+  integrity sha1-h6EKxMFpS9Lhy/U1kaZhQftd10c=
   dependencies:
     isobject "^3.0.1"
 
-obuf@^1.0.0, obuf@^1.1.1:
+object.values@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/object.values/-/object.values-1.1.1.tgz"
+  integrity sha512-WTa54g2K8iu0kmS/us18jEmdv1a4Wi//BZ/DTVYEcH0XhLM5NYdpDHja3gt57VrZLcNAO2WGA+KpWsDBaHt6eA==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.0-next.1"
+    function-bind "^1.1.1"
+    has "^1.0.3"
+
+obuf@^1.0.0, obuf@^1.1.2:
   version "1.1.2"
-  resolved "https://registry.yarnpkg.com/obuf/-/obuf-1.1.2.tgz#09bea3343d41859ebd446292d11c9d4db619084e"
+  resolved "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz"
+  integrity sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==
 
 on-finished@~2.3.0:
   version "2.3.0"
-  resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.3.0.tgz#20f1336481b083cd75337992a16971aa2d906947"
+  resolved "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz"
+  integrity sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=
   dependencies:
     ee-first "1.1.1"
 
-on-headers@~1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/on-headers/-/on-headers-1.0.1.tgz#928f5d0f470d49342651ea6794b0857c100693f7"
+on-headers@~1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/on-headers/-/on-headers-1.0.2.tgz"
+  integrity sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==
 
 once@^1.3.0, once@^1.3.1, once@^1.4.0:
   version "1.4.0"
-  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
+  resolved "https://registry.npmjs.org/once/-/once-1.4.0.tgz"
+  integrity sha1-WDsap3WWHUsROsF9nFC6753Xa9E=
   dependencies:
     wrappy "1"
 
 onetime@^2.0.0:
   version "2.0.1"
-  resolved "https://registry.yarnpkg.com/onetime/-/onetime-2.0.1.tgz#067428230fd67443b2794b22bba528b6867962d4"
+  resolved "https://registry.npmjs.org/onetime/-/onetime-2.0.1.tgz"
+  integrity sha1-BnQoIw/WdEOyeUsiu6UotoZ5YtQ=
   dependencies:
     mimic-fn "^1.0.0"
 
-opn@^5.1.0:
-  version "5.4.0"
-  resolved "https://registry.yarnpkg.com/opn/-/opn-5.4.0.tgz#cb545e7aab78562beb11aa3bfabc7042e1761035"
+onetime@^5.1.0:
+  version "5.1.2"
+  resolved "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz"
+  integrity sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==
+  dependencies:
+    mimic-fn "^2.1.0"
+
+opener@^1.5.2:
+  version "1.5.2"
+  resolved "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz"
+  integrity sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==
+
+opn@^5.5.0:
+  version "5.5.0"
+  resolved "https://registry.npmjs.org/opn/-/opn-5.5.0.tgz"
+  integrity sha512-PqHpggC9bLV0VeWcdKhkpxY+3JTzetLSqTCWL/z/tFIbI6G8JCjondXklT1JinczLz2Xib62sSp0T/gKT4KksA==
   dependencies:
     is-wsl "^1.1.0"
 
-optimize-css-assets-webpack-plugin@^4.0.1:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/optimize-css-assets-webpack-plugin/-/optimize-css-assets-webpack-plugin-4.0.3.tgz#4f714e276b279700892c4a6202b7e22812d6f683"
+optimize-css-assets-webpack-plugin@^5.0.3:
+  version "5.0.3"
+  resolved "https://registry.npmjs.org/optimize-css-assets-webpack-plugin/-/optimize-css-assets-webpack-plugin-5.0.3.tgz"
+  integrity sha512-q9fbvCRS6EYtUKKSwI87qm2IxlyJK5b4dygW1rKUBT6mMDhdG5e5bZT63v6tnJR9F9FB/H5a0HTmtw+laUBxKA==
   dependencies:
-    cssnano "^3.10.0"
+    cssnano "^4.1.10"
     last-call-webpack-plugin "^3.0.0"
 
-ora@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/ora/-/ora-2.1.0.tgz#6caf2830eb924941861ec53a173799e008b51e5b"
+optionator@^0.8.1:
+  version "0.8.3"
+  resolved "https://registry.npmjs.org/optionator/-/optionator-0.8.3.tgz"
+  integrity sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA==
   dependencies:
-    chalk "^2.3.1"
+    deep-is "~0.1.3"
+    fast-levenshtein "~2.0.6"
+    levn "~0.3.0"
+    prelude-ls "~1.1.2"
+    type-check "~0.3.2"
+    word-wrap "~1.2.3"
+
+ora@^3.4.0:
+  version "3.4.0"
+  resolved "https://registry.npmjs.org/ora/-/ora-3.4.0.tgz"
+  integrity sha512-eNwHudNbO1folBP3JsZ19v9azXWtQZjICdr3Q0TDPIaeBQ3mXLrh54wM+er0+hSp+dWKf+Z8KM58CYzEyIYxYg==
+  dependencies:
+    chalk "^2.4.2"
     cli-cursor "^2.1.0"
-    cli-spinners "^1.1.0"
+    cli-spinners "^2.0.0"
     log-symbols "^2.2.0"
-    strip-ansi "^4.0.0"
+    strip-ansi "^5.2.0"
     wcwidth "^1.0.1"
 
-original@>=0.0.5:
+original@^1.0.0:
   version "1.0.2"
-  resolved "https://registry.yarnpkg.com/original/-/original-1.0.2.tgz#e442a61cffe1c5fd20a65f3261c26663b303f25f"
+  resolved "https://registry.npmjs.org/original/-/original-1.0.2.tgz"
+  integrity sha512-hyBVl6iqqUOJ8FqRe+l/gS8H+kKYjrEndd5Pm1MfBtsEKA038HkkdbAl/72EAXGyonD/PFsvmVG+EvcIpliMBg==
   dependencies:
     url-parse "^1.4.3"
 
 os-browserify@^0.3.0:
   version "0.3.0"
-  resolved "https://registry.yarnpkg.com/os-browserify/-/os-browserify-0.3.0.tgz#854373c7f5c2315914fc9bfc6bd8238fdda1ec27"
+  resolved "https://registry.npmjs.org/os-browserify/-/os-browserify-0.3.0.tgz"
+  integrity sha1-hUNzx/XCMVkU/Jv8a9gjj92h7Cc=
 
-os-homedir@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3"
-
-os-locale@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-3.0.1.tgz#3b014fbf01d87f60a1e5348d80fe870dc82c4620"
+os-locale@^3.0.0, os-locale@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/os-locale/-/os-locale-3.1.0.tgz"
+  integrity sha512-Z8l3R4wYWM40/52Z+S265okfFj8Kt2cC2MKY+xNi3kFs+XGI7WXu/I309QQQYbRW4ijiZ+yxs9pqEhJh0DqW3Q==
   dependencies:
-    execa "^0.10.0"
+    execa "^1.0.0"
     lcid "^2.0.0"
     mem "^4.0.0"
 
-os-tmpdir@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
-
-osenv@^0.1.4:
-  version "0.1.5"
-  resolved "https://registry.yarnpkg.com/osenv/-/osenv-0.1.5.tgz#85cdfafaeb28e8677f416e287592b5f3f49ea410"
-  dependencies:
-    os-homedir "^1.0.0"
-    os-tmpdir "^1.0.0"
-
 p-defer@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/p-defer/-/p-defer-1.0.0.tgz#9f6eb182f6c9aa8cd743004a7d4f96b196b0fb0c"
+  resolved "https://registry.npmjs.org/p-defer/-/p-defer-1.0.0.tgz"
+  integrity sha1-n26xgvbJqozXQwBKfU+WsZaw+ww=
+
+p-each-series@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/p-each-series/-/p-each-series-2.1.0.tgz"
+  integrity sha512-ZuRs1miPT4HrjFa+9fRfOFXxGJfORgelKV9f9nNOWw2gl6gVsRaVDOQP0+MI0G0wGKns1Yacsu0GjOFbTK0JFQ==
 
 p-finally@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-1.0.0.tgz#3fbcfb15b899a44123b34b6dcc18b724336a2cae"
-
-p-is-promise@^1.1.0:
-  version "1.1.0"
-  resolved "http://registry.npmjs.org/p-is-promise/-/p-is-promise-1.1.0.tgz#9c9456989e9f6588017b0434d56097675c3da05e"
+  resolved "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz"
+  integrity sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4=
 
-p-limit@^1.0.0, p-limit@^1.1.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.3.0.tgz#b86bd5f0c25690911c7590fcbfc2010d54b3ccb8"
-  dependencies:
-    p-try "^1.0.0"
+p-is-promise@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/p-is-promise/-/p-is-promise-2.1.0.tgz"
+  integrity sha512-Y3W0wlRPK8ZMRbNq97l4M5otioeA5lm1z7bkNkxCka8HSPjR0xRWmpCmc9utiaLP9Jb1eD8BgeIxTW4AIF45Pg==
 
-p-limit@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.0.0.tgz#e624ed54ee8c460a778b3c9f3670496ff8a57aec"
+p-limit@^2.0.0, p-limit@^2.2.0, p-limit@^2.2.1:
+  version "2.2.2"
+  resolved "https://registry.npmjs.org/p-limit/-/p-limit-2.2.2.tgz"
+  integrity sha512-WGR+xHecKTr7EbUEhyLSh5Dube9JtdiG78ufaeLxTgpudf/20KqyMioIUZJAezlTIi6evxuoUs9YXc11cU+yzQ==
   dependencies:
     p-try "^2.0.0"
 
-p-locate@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-2.0.0.tgz#20a0103b222a70c8fd39cc2e580680f3dde5ec43"
-  dependencies:
-    p-limit "^1.1.0"
-
 p-locate@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-3.0.0.tgz#322d69a05c0264b25997d9f40cd8a891ab0064a4"
+  resolved "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz"
+  integrity sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==
   dependencies:
     p-limit "^2.0.0"
 
-p-map@^1.1.1:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/p-map/-/p-map-1.2.0.tgz#e4e94f311eabbc8633a1e79908165fca26241b6b"
+p-locate@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz"
+  integrity sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==
+  dependencies:
+    p-limit "^2.2.0"
 
-p-try@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/p-try/-/p-try-1.0.0.tgz#cbc79cdbaf8fd4228e13f621f2b1a237c1b207b3"
+p-map@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/p-map/-/p-map-2.1.0.tgz"
+  integrity sha512-y3b8Kpd8OAN444hxfBbFfj1FY/RjtTd8tzYwhUqNYXx0fXx2iX4maP4Qr6qhIKbQXI02wTLAda4fYUbDagTUFw==
+
+p-map@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/p-map/-/p-map-3.0.0.tgz"
+  integrity sha512-d3qXVTF/s+W+CdJ5A29wywV2n8CQQYahlgz2bFiA+4eVNJbHJodPZ+/gXwPGh0bOqA+j8S+6+ckmvLGPk1QpxQ==
+  dependencies:
+    aggregate-error "^3.0.0"
+
+p-retry@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/p-retry/-/p-retry-3.0.1.tgz"
+  integrity sha512-XE6G4+YTTkT2a0UWb2kjZe8xNwf8bIbnqpc/IS/idOBVhyves0mK5OJgeocjx7q5pvX/6m23xuzVPYT1uGM73w==
+  dependencies:
+    retry "^0.12.0"
 
 p-try@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.0.0.tgz#85080bb87c64688fa47996fe8f7dfbe8211760b1"
+  version "2.2.0"
+  resolved "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz"
+  integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
 
 pako@~1.0.5:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.6.tgz#0101211baa70c4bca4a0f63f2206e97b7dfaf258"
+  version "1.0.11"
+  resolved "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz"
+  integrity sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==
 
 parallel-transform@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/parallel-transform/-/parallel-transform-1.1.0.tgz#d410f065b05da23081fcd10f28854c29bda33b06"
+  version "1.2.0"
+  resolved "https://registry.npmjs.org/parallel-transform/-/parallel-transform-1.2.0.tgz"
+  integrity sha512-P2vSmIu38uIlvdcU7fDkyrxj33gTUy/ABO5ZUbGowxNCopBq/OoD42bP4UmMrJoPyk4Uqf0mu3mtWBhHCZD8yg==
   dependencies:
-    cyclist "~0.2.2"
+    cyclist "^1.0.1"
     inherits "^2.0.3"
     readable-stream "^2.1.5"
 
 param-case@2.1.x:
   version "2.1.1"
-  resolved "https://registry.yarnpkg.com/param-case/-/param-case-2.1.1.tgz#df94fd8cf6531ecf75e6bef9a0858fbc72be2247"
+  resolved "https://registry.npmjs.org/param-case/-/param-case-2.1.1.tgz"
+  integrity sha1-35T9jPZTHs915r75oIWPvHK+Ikc=
   dependencies:
     no-case "^2.2.0"
 
-parchment@^1.1.2, parchment@^1.1.4:
-  version "1.1.4"
-  resolved "http://registry.npmjs.org/parchment/-/parchment-1.1.4.tgz#aeded7ab938fe921d4c34bc339ce1168bc2ffde5"
-
 parse-asn1@^5.0.0:
-  version "5.1.1"
-  resolved "http://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.1.tgz#f6bf293818332bd0dab54efb16087724745e6ca8"
+  version "5.1.5"
+  resolved "https://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.5.tgz"
+  integrity sha512-jkMYn1dcJqF6d5CpU689bq7w/b5ALS9ROVSpQDPrZsqqesUJii9qutvoT5ltGedNXMO2e16YUWIghG9KxaViTQ==
   dependencies:
     asn1.js "^4.0.0"
     browserify-aes "^1.0.0"
     create-hash "^1.1.0"
     evp_bytestokey "^1.0.0"
     pbkdf2 "^3.0.3"
+    safe-buffer "^5.1.1"
 
 parse-json@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-4.0.0.tgz#be35f5425be1f7f6c747184f98a788cb99477ee0"
+  resolved "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz"
+  integrity sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=
   dependencies:
     error-ex "^1.3.1"
     json-parse-better-errors "^1.0.1"
 
-parseurl@~1.3.2:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.2.tgz#fc289d4ed8993119460c156253262cdc8de65bf3"
+parse-json@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.npmjs.org/parse-json/-/parse-json-5.1.0.tgz"
+  integrity sha512-+mi/lmVVNKFNVyLXV31ERiy2CY5E1/F6QtJFEzoChPRwwngMNXRDQ9GJ5WdE2Z2P4AujsOi0/+2qHID68KwfIQ==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    error-ex "^1.3.1"
+    json-parse-even-better-errors "^2.3.0"
+    lines-and-columns "^1.1.6"
+
+parse-passwd@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/parse-passwd/-/parse-passwd-1.0.0.tgz"
+  integrity sha1-bVuTSkVpk7I9N/QKOC1vFmao5cY=
+
+parse5@5.1.1:
+  version "5.1.1"
+  resolved "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz"
+  integrity sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==
+
+parseurl@~1.3.2, parseurl@~1.3.3:
+  version "1.3.3"
+  resolved "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz"
+  integrity sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==
 
 pascalcase@^0.1.1:
   version "0.1.1"
-  resolved "https://registry.yarnpkg.com/pascalcase/-/pascalcase-0.1.1.tgz#b363e55e8006ca6fe21784d2db22bd15d7917f14"
+  resolved "https://registry.npmjs.org/pascalcase/-/pascalcase-0.1.1.tgz"
+  integrity sha1-s2PlXoAGym/iF4TS2yK9FdeRfxQ=
 
-path-browserify@0.0.0:
-  version "0.0.0"
-  resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-0.0.0.tgz#a0b870729aae214005b7d5032ec2cbbb0fb4451a"
+path-browserify@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.npmjs.org/path-browserify/-/path-browserify-0.0.1.tgz"
+  integrity sha512-BapA40NHICOS+USX9SN4tyhq+A2RrN/Ws5F0Z5aMHDp98Fl86lX8Oti8B7uN93L4Ifv4fHOEA+pQw87gmMO/lQ==
 
 path-dirname@^1.0.0:
   version "1.0.2"
-  resolved "https://registry.yarnpkg.com/path-dirname/-/path-dirname-1.0.2.tgz#cc33d24d525e099a5388c0336c6e32b9160609e0"
+  resolved "https://registry.npmjs.org/path-dirname/-/path-dirname-1.0.2.tgz"
+  integrity sha1-zDPSTVJeCZpTiMAzbG4yuRYGCeA=
 
 path-exists@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515"
+  resolved "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz"
+  integrity sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=
+
+path-exists@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz"
+  integrity sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==
 
 path-is-absolute@^1.0.0:
   version "1.0.1"
-  resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
+  resolved "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz"
+  integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18=
 
-path-is-inside@^1.0.1:
+path-is-inside@^1.0.2:
   version "1.0.2"
-  resolved "https://registry.yarnpkg.com/path-is-inside/-/path-is-inside-1.0.2.tgz#365417dede44430d1c11af61027facf074bdfc53"
+  resolved "https://registry.npmjs.org/path-is-inside/-/path-is-inside-1.0.2.tgz"
+  integrity sha1-NlQX3t5EQw0cEa9hAn+s8HS9/FM=
 
 path-key@^2.0.0, path-key@^2.0.1:
   version "2.0.1"
-  resolved "https://registry.yarnpkg.com/path-key/-/path-key-2.0.1.tgz#411cadb574c5a140d3a4b1910d40d80cc9f40b40"
+  resolved "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz"
+  integrity sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=
 
-path-parse@^1.0.5:
+path-key@^3.0.0, path-key@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz"
+  integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
+
+path-parse@^1.0.6:
   version "1.0.6"
-  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c"
+  resolved "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz"
+  integrity sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==
 
 path-to-regexp@0.1.7:
   version "0.1.7"
-  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
+  resolved "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz"
+  integrity sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=
 
 path-type@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.yarnpkg.com/path-type/-/path-type-3.0.0.tgz#cef31dc8e0a1a3bb0d105c0cd97cf3bf47f4e36f"
+  resolved "https://registry.npmjs.org/path-type/-/path-type-3.0.0.tgz"
+  integrity sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==
   dependencies:
     pify "^3.0.0"
 
+pbf@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.npmjs.org/pbf/-/pbf-3.2.1.tgz"
+  integrity sha512-ClrV7pNOn7rtmoQVF4TS1vyU0WhYRnP92fzbfF75jAIwpnzdJXf8iTd4CMEqO4yUenH6NDqLiwjqlh6QgZzgLQ==
+  dependencies:
+    ieee754 "^1.1.12"
+    resolve-protobuf-schema "^2.1.0"
+
+pbf@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/pbf/-/pbf-3.3.0.tgz#1790f3d99118333cc7f498de816028a346ef367f"
+  integrity sha512-XDF38WCH3z5OV/OVa8GKUNtLAyneuzbCisx7QUCF8Q6Nutx0WnJrQe5O+kOtBlLfRNUws98Y58Lblp+NJG5T4Q==
+  dependencies:
+    ieee754 "^1.1.12"
+    resolve-protobuf-schema "^2.1.0"
+
 pbkdf2@^3.0.3:
   version "3.0.17"
-  resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.0.17.tgz#976c206530617b14ebb32114239f7b09336e93a6"
+  resolved "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.0.17.tgz"
+  integrity sha512-U/il5MsrZp7mGg3mSQfn742na2T+1/vHDCG5/iTI3X9MKUuYUZVLQhyRsg06mCgDBTd57TxzgZt7P+fYfjRLtA==
   dependencies:
     create-hash "^1.1.2"
     create-hmac "^1.1.4"
@@ -3951,388 +7503,545 @@ pbkdf2@^3.0.3:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
+pdfjs-dist@^5.0.375:
+  version "5.0.375"
+  resolved "https://registry.yarnpkg.com/pdfjs-dist/-/pdfjs-dist-5.0.375.tgz#1c846d5befa451fa20dcedbc1d08f33b0c70542c"
+  integrity sha512-QDRlEVldf/cX88CElGAyRhjqNOO69kmB3HZlalDAfqJ/IvmqJNkipomhBZy4cWATfLVlkQTXE3H4yFvMF2uPsg==
+  optionalDependencies:
+    "@napi-rs/canvas" "^0.1.67"
+
 performance-now@^2.1.0:
   version "2.1.0"
-  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
+  resolved "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz"
+  integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
 
 pickr-widget@0.3.1:
   version "0.3.1"
-  resolved "https://registry.yarnpkg.com/pickr-widget/-/pickr-widget-0.3.1.tgz#73d4b316975f5948968b8e527dd8523d27f2c96f"
+  resolved "https://registry.npmjs.org/pickr-widget/-/pickr-widget-0.3.1.tgz"
+  integrity sha512-cY/6aSmGrZ0z6WAufRwa78e+9JtLvIiYeLM69iFLCwVMHHVKZ4KibdlLYdATBuctacZI2N3eYhlZUdiIGUp/2g==
+
+picomatch@^2.0.4:
+  version "2.2.2"
+  resolved "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz"
+  integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==
+
+picomatch@^2.0.5:
+  version "2.2.1"
+  resolved "https://registry.npmjs.org/picomatch/-/picomatch-2.2.1.tgz"
+  integrity sha512-ISBaA8xQNmwELC7eOjqFKMESB2VIqt4PPDD0nsS95b/9dZXvVKOlz9keMSnoGGKcOHXfTvDD6WMaRoSc9UuhRA==
+
+picomatch@^2.2.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
+  integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
 
 pify@^2.0.0:
   version "2.3.0"
-  resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
+  resolved "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz"
+  integrity sha1-7RQaasBDqEnqWISY59yosVMw6Qw=
 
 pify@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.yarnpkg.com/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176"
+  resolved "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz"
+  integrity sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=
+
+pify@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz"
+  integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==
 
 pinkie-promise@^2.0.0:
   version "2.0.1"
-  resolved "https://registry.yarnpkg.com/pinkie-promise/-/pinkie-promise-2.0.1.tgz#2135d6dfa7a358c069ac9b178776288228450ffa"
+  resolved "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz"
+  integrity sha1-ITXW36ejWMBprJsXh3YogihFD/o=
   dependencies:
     pinkie "^2.0.0"
 
 pinkie@^2.0.0:
   version "2.0.4"
-  resolved "https://registry.yarnpkg.com/pinkie/-/pinkie-2.0.4.tgz#72556b80cfa0d48a974e80e77248e80ed4f7f870"
+  resolved "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz"
+  integrity sha1-clVrgM+g1IqXToDnckjoDtT3+HA=
 
-pkg-dir@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-2.0.0.tgz#f6d5d1109e19d63edf428e0bd57e12777615334b"
+pirates@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.npmjs.org/pirates/-/pirates-4.0.1.tgz"
+  integrity sha512-WuNqLTbMI3tmfef2TKxlQmAiLHKtFhlsCZnPIpuv2Ow0RDVO8lfy1Opf4NUzlMXLjPl+Men7AuVdX6TA+s+uGA==
   dependencies:
-    find-up "^2.1.0"
+    node-modules-regexp "^1.0.0"
 
 pkg-dir@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-3.0.0.tgz#2749020f239ed990881b1f71210d51eb6523bea3"
+  resolved "https://registry.npmjs.org/pkg-dir/-/pkg-dir-3.0.0.tgz"
+  integrity sha512-/E57AYkoeQ25qkxMj5PBOVgF8Kiu/h7cYS30Z5+R7WaiCCBfLq58ZI/dSeaEKb9WVJV5n/03QwrN3IeWIFllvw==
   dependencies:
     find-up "^3.0.0"
 
+pkg-dir@^4.1.0, pkg-dir@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz"
+  integrity sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==
+  dependencies:
+    find-up "^4.0.0"
+
 place-to@^0.1.2:
   version "0.1.2"
-  resolved "https://registry.yarnpkg.com/place-to/-/place-to-0.1.2.tgz#9d16f14a3d82d35c78e92d877adcb4a80aab693e"
-
-popper.js@^1.0.2, popper.js@^1.14.4:
-  version "1.14.4"
-  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.14.4.tgz#8eec1d8ff02a5a3a152dd43414a15c7b79fd69b6"
+  resolved "https://registry.npmjs.org/place-to/-/place-to-0.1.2.tgz"
+  integrity sha512-ICVrRcC0AwYgxzLJIKedQM2rrT7iEkKa+7h7MhnurgzyD3PZgOrd/9j7PcE/vahSjR4zko3jrYmEJ19PAAqhBA==
 
-portfinder@^1.0.9:
-  version "1.0.18"
-  resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.18.tgz#cf1106ff336fd4329b7ce32fda7d17d62c6bcf37"
+portfinder@^1.0.25:
+  version "1.0.25"
+  resolved "https://registry.npmjs.org/portfinder/-/portfinder-1.0.25.tgz"
+  integrity sha512-6ElJnHBbxVA1XSLgBp7G1FiCkQdlqGzuF7DswL5tcea+E8UpuvPU7beVAjjRwCioTS9ZluNbu+ZyRvgTsmqEBg==
   dependencies:
-    async "^1.5.2"
-    debug "^2.2.0"
-    mkdirp "0.5.x"
+    async "^2.6.2"
+    debug "^3.1.1"
+    mkdirp "^0.5.1"
 
 posix-character-classes@^0.1.0:
   version "0.1.1"
-  resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
-
-postcss-calc@^5.2.0:
-  version "5.3.1"
-  resolved "http://registry.npmjs.org/postcss-calc/-/postcss-calc-5.3.1.tgz#77bae7ca928ad85716e2fda42f261bf7c1d65b5e"
-  dependencies:
-    postcss "^5.0.2"
-    postcss-message-helpers "^2.0.0"
-    reduce-css-calc "^1.2.6"
-
-postcss-colormin@^2.1.8:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/postcss-colormin/-/postcss-colormin-2.2.2.tgz#6631417d5f0e909a3d7ec26b24c8a8d1e4f96e4b"
-  dependencies:
-    colormin "^1.0.5"
-    postcss "^5.0.13"
-    postcss-value-parser "^3.2.3"
+  resolved "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz"
+  integrity sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=
 
-postcss-convert-values@^2.3.4:
-  version "2.6.1"
-  resolved "https://registry.yarnpkg.com/postcss-convert-values/-/postcss-convert-values-2.6.1.tgz#bbd8593c5c1fd2e3d1c322bb925dcae8dae4d62d"
+postcss-calc@^7.0.1:
+  version "7.0.2"
+  resolved "https://registry.npmjs.org/postcss-calc/-/postcss-calc-7.0.2.tgz"
+  integrity sha512-rofZFHUg6ZIrvRwPeFktv06GdbDYLcGqh9EwiMutZg+a0oePCCw1zHOEiji6LCpyRcjTREtPASuUqeAvYlEVvQ==
   dependencies:
-    postcss "^5.0.11"
-    postcss-value-parser "^3.1.2"
+    postcss "^7.0.27"
+    postcss-selector-parser "^6.0.2"
+    postcss-value-parser "^4.0.2"
 
-postcss-discard-comments@^2.0.4:
-  version "2.0.4"
-  resolved "http://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-2.0.4.tgz#befe89fafd5b3dace5ccce51b76b81514be00e3d"
+postcss-colormin@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-4.0.3.tgz"
+  integrity sha512-WyQFAdDZpExQh32j0U0feWisZ0dmOtPl44qYmJKkq9xFWY3p+4qnRzCHeNrkeRhwPHz9bQ3mo0/yVkaply0MNw==
   dependencies:
-    postcss "^5.0.14"
+    browserslist "^4.0.0"
+    color "^3.0.0"
+    has "^1.0.0"
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
 
-postcss-discard-duplicates@^2.0.1:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-discard-duplicates/-/postcss-discard-duplicates-2.1.0.tgz#b9abf27b88ac188158a5eb12abcae20263b91932"
+postcss-convert-values@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.npmjs.org/postcss-convert-values/-/postcss-convert-values-4.0.1.tgz"
+  integrity sha512-Kisdo1y77KUC0Jmn0OXU/COOJbzM8cImvw1ZFsBgBgMgb1iL23Zs/LXRe3r+EZqM3vGYKdQ2YJVQ5VkJI+zEJQ==
   dependencies:
-    postcss "^5.0.4"
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
 
-postcss-discard-empty@^2.0.1:
-  version "2.1.0"
-  resolved "http://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-2.1.0.tgz#d2b4bd9d5ced5ebd8dcade7640c7d7cd7f4f92b5"
+postcss-discard-comments@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-4.0.2.tgz"
+  integrity sha512-RJutN259iuRf3IW7GZyLM5Sw4GLTOH8FmsXBnv8Ab/Tc2k4SR4qbV4DNbyyY4+Sjo362SyDmW2DQ7lBSChrpkg==
   dependencies:
-    postcss "^5.0.14"
+    postcss "^7.0.0"
 
-postcss-discard-overridden@^0.1.1:
-  version "0.1.1"
-  resolved "http://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-0.1.1.tgz#8b1eaf554f686fb288cd874c55667b0aa3668d58"
+postcss-discard-duplicates@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-4.0.2.tgz"
+  integrity sha512-ZNQfR1gPNAiXZhgENFfEglF93pciw0WxMkJeVmw8eF+JZBbMD7jp6C67GqJAXVZP2BWbOztKfbsdmMp/k8c6oQ==
   dependencies:
-    postcss "^5.0.16"
+    postcss "^7.0.0"
 
-postcss-discard-unused@^2.2.1:
-  version "2.2.3"
-  resolved "http://registry.npmjs.org/postcss-discard-unused/-/postcss-discard-unused-2.2.3.tgz#bce30b2cc591ffc634322b5fb3464b6d934f4433"
+postcss-discard-empty@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-4.0.1.tgz"
+  integrity sha512-B9miTzbznhDjTfjvipfHoqbWKwd0Mj+/fL5s1QOz06wufguil+Xheo4XpOnc4NqKYBCNqqEzgPv2aPBIJLox0w==
   dependencies:
-    postcss "^5.0.14"
-    uniqs "^2.0.0"
+    postcss "^7.0.0"
 
-postcss-filter-plugins@^2.0.0:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/postcss-filter-plugins/-/postcss-filter-plugins-2.0.3.tgz#82245fdf82337041645e477114d8e593aa18b8ec"
+postcss-discard-overridden@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-4.0.1.tgz"
+  integrity sha512-IYY2bEDD7g1XM1IDEsUT4//iEYCxAmP5oDSFMVU/JVvT7gh+l4fmjciLqGgwjdWpQIdb0Che2VX00QObS5+cTg==
   dependencies:
-    postcss "^5.0.4"
+    postcss "^7.0.0"
 
 postcss-load-config@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-2.0.0.tgz#f1312ddbf5912cd747177083c5ef7a19d62ee484"
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-2.1.0.tgz"
+  integrity sha512-4pV3JJVPLd5+RueiVVB+gFOAa7GWc25XQcMp86Zexzke69mKf6Nx9LRcQywdz7yZI9n1udOxmLuAwTBypypF8Q==
   dependencies:
-    cosmiconfig "^4.0.0"
+    cosmiconfig "^5.0.0"
     import-cwd "^2.0.0"
 
-postcss-loader@^2.1.5:
-  version "2.1.6"
-  resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-2.1.6.tgz#1d7dd7b17c6ba234b9bed5af13e0bea40a42d740"
+postcss-loader@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/postcss-loader/-/postcss-loader-3.0.0.tgz"
+  integrity sha512-cLWoDEY5OwHcAjDnkyRQzAXfs2jrKjXpO/HQFcc5b5u/r7aa471wdmChmwfnv7x2u840iat/wi0lQ5nbRgSkUA==
   dependencies:
     loader-utils "^1.1.0"
-    postcss "^6.0.0"
+    postcss "^7.0.0"
     postcss-load-config "^2.0.0"
-    schema-utils "^0.4.0"
-
-postcss-merge-idents@^2.1.5:
-  version "2.1.7"
-  resolved "http://registry.npmjs.org/postcss-merge-idents/-/postcss-merge-idents-2.1.7.tgz#4c5530313c08e1d5b3bbf3d2bbc747e278eea270"
-  dependencies:
-    has "^1.0.1"
-    postcss "^5.0.10"
-    postcss-value-parser "^3.1.1"
+    schema-utils "^1.0.0"
 
-postcss-merge-longhand@^2.0.1:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-merge-longhand/-/postcss-merge-longhand-2.0.2.tgz#23d90cd127b0a77994915332739034a1a4f3d658"
+postcss-merge-longhand@^4.0.11:
+  version "4.0.11"
+  resolved "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-4.0.11.tgz"
+  integrity sha512-alx/zmoeXvJjp7L4mxEMjh8lxVlDFX1gqWHzaaQewwMZiVhLo42TEClKaeHbRf6J7j82ZOdTJ808RtN0ZOZwvw==
   dependencies:
-    postcss "^5.0.4"
+    css-color-names "0.0.4"
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
+    stylehacks "^4.0.0"
 
-postcss-merge-rules@^2.0.3:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/postcss-merge-rules/-/postcss-merge-rules-2.1.2.tgz#d1df5dfaa7b1acc3be553f0e9e10e87c61b5f721"
-  dependencies:
-    browserslist "^1.5.2"
-    caniuse-api "^1.5.2"
-    postcss "^5.0.4"
-    postcss-selector-parser "^2.2.2"
+postcss-merge-rules@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.npmjs.org/postcss-merge-rules/-/postcss-merge-rules-4.0.3.tgz"
+  integrity sha512-U7e3r1SbvYzO0Jr3UT/zKBVgYYyhAz0aitvGIYOYK5CPmkNih+WDSsS5tvPrJ8YMQYlEMvsZIiqmn7HdFUaeEQ==
+  dependencies:
+    browserslist "^4.0.0"
+    caniuse-api "^3.0.0"
+    cssnano-util-same-parent "^4.0.0"
+    postcss "^7.0.0"
+    postcss-selector-parser "^3.0.0"
     vendors "^1.0.0"
 
-postcss-message-helpers@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-message-helpers/-/postcss-message-helpers-2.0.0.tgz#a4f2f4fab6e4fe002f0aed000478cdf52f9ba60e"
-
-postcss-minify-font-values@^1.0.2:
-  version "1.0.5"
-  resolved "http://registry.npmjs.org/postcss-minify-font-values/-/postcss-minify-font-values-1.0.5.tgz#4b58edb56641eba7c8474ab3526cafd7bbdecb69"
-  dependencies:
-    object-assign "^4.0.1"
-    postcss "^5.0.4"
-    postcss-value-parser "^3.0.2"
-
-postcss-minify-gradients@^1.0.1:
-  version "1.0.5"
-  resolved "http://registry.npmjs.org/postcss-minify-gradients/-/postcss-minify-gradients-1.0.5.tgz#5dbda11373703f83cfb4a3ea3881d8d75ff5e6e1"
-  dependencies:
-    postcss "^5.0.12"
-    postcss-value-parser "^3.3.0"
-
-postcss-minify-params@^1.0.4:
-  version "1.2.2"
-  resolved "http://registry.npmjs.org/postcss-minify-params/-/postcss-minify-params-1.2.2.tgz#ad2ce071373b943b3d930a3fa59a358c28d6f1f3"
-  dependencies:
-    alphanum-sort "^1.0.1"
-    postcss "^5.0.2"
-    postcss-value-parser "^3.0.2"
+postcss-minify-font-values@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.npmjs.org/postcss-minify-font-values/-/postcss-minify-font-values-4.0.2.tgz"
+  integrity sha512-j85oO6OnRU9zPf04+PZv1LYIYOprWm6IA6zkXkrJXyRveDEuQggG6tvoy8ir8ZwjLxLuGfNkCZEQG7zan+Hbtg==
+  dependencies:
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
+
+postcss-minify-gradients@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.npmjs.org/postcss-minify-gradients/-/postcss-minify-gradients-4.0.2.tgz"
+  integrity sha512-qKPfwlONdcf/AndP1U8SJ/uzIJtowHlMaSioKzebAXSG4iJthlWC9iSWznQcX4f66gIWX44RSA841HTHj3wK+Q==
+  dependencies:
+    cssnano-util-get-arguments "^4.0.0"
+    is-color-stop "^1.0.0"
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
+
+postcss-minify-params@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.npmjs.org/postcss-minify-params/-/postcss-minify-params-4.0.2.tgz"
+  integrity sha512-G7eWyzEx0xL4/wiBBJxJOz48zAKV2WG3iZOqVhPet/9geefm/Px5uo1fzlHu+DOjT+m0Mmiz3jkQzVHe6wxAWg==
+  dependencies:
+    alphanum-sort "^1.0.0"
+    browserslist "^4.0.0"
+    cssnano-util-get-arguments "^4.0.0"
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
     uniqs "^2.0.0"
 
-postcss-minify-selectors@^2.0.4:
-  version "2.1.1"
-  resolved "http://registry.npmjs.org/postcss-minify-selectors/-/postcss-minify-selectors-2.1.1.tgz#b2c6a98c0072cf91b932d1a496508114311735bf"
+postcss-minify-selectors@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.npmjs.org/postcss-minify-selectors/-/postcss-minify-selectors-4.0.2.tgz"
+  integrity sha512-D5S1iViljXBj9kflQo4YutWnJmwm8VvIsU1GeXJGiG9j8CIg9zs4voPMdQDUmIxetUOh60VilsNzCiAFTOqu3g==
   dependencies:
-    alphanum-sort "^1.0.2"
-    has "^1.0.1"
-    postcss "^5.0.14"
-    postcss-selector-parser "^2.0.0"
+    alphanum-sort "^1.0.0"
+    has "^1.0.0"
+    postcss "^7.0.0"
+    postcss-selector-parser "^3.0.0"
 
-postcss-modules-extract-imports@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-1.2.0.tgz#66140ecece38ef06bf0d3e355d69bf59d141ea85"
+postcss-modules-extract-imports@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-2.0.0.tgz"
+  integrity sha512-LaYLDNS4SG8Q5WAWqIJgdHPJrDDr/Lv775rMBFUbgjTz6j34lUznACHcdRWroPvXANP2Vj7yNK57vp9eFqzLWQ==
   dependencies:
-    postcss "^6.0.1"
+    postcss "^7.0.5"
 
-postcss-modules-local-by-default@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-1.2.0.tgz#f7d80c398c5a393fa7964466bd19500a7d61c069"
+postcss-modules-local-by-default@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-3.0.2.tgz"
+  integrity sha512-jM/V8eqM4oJ/22j0gx4jrp63GSvDH6v86OqyTHHUvk4/k1vceipZsaymiZ5PvocqZOl5SFHiFJqjs3la0wnfIQ==
   dependencies:
-    css-selector-tokenizer "^0.7.0"
-    postcss "^6.0.1"
+    icss-utils "^4.1.1"
+    postcss "^7.0.16"
+    postcss-selector-parser "^6.0.2"
+    postcss-value-parser "^4.0.0"
 
-postcss-modules-scope@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-1.1.0.tgz#d6ea64994c79f97b62a72b426fbe6056a194bb90"
+postcss-modules-scope@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-2.1.1.tgz"
+  integrity sha512-OXRUPecnHCg8b9xWvldG/jUpRIGPNRka0r4D4j0ESUU2/5IOnpsjfPPmDprM3Ih8CgZ8FXjWqaniK5v4rWt3oQ==
   dependencies:
-    css-selector-tokenizer "^0.7.0"
-    postcss "^6.0.1"
+    postcss "^7.0.6"
+    postcss-selector-parser "^6.0.0"
 
-postcss-modules-values@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-1.3.0.tgz#ecffa9d7e192518389f42ad0e83f72aec456ea20"
+postcss-modules-values@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-3.0.0.tgz"
+  integrity sha512-1//E5jCBrZ9DmRX+zCtmQtRSV6PV42Ix7Bzj9GbwJceduuf7IqP8MgeTXuRDHOWj2m0VzZD5+roFWDuU8RQjcg==
   dependencies:
-    icss-replace-symbols "^1.1.0"
-    postcss "^6.0.1"
+    icss-utils "^4.0.0"
+    postcss "^7.0.6"
 
-postcss-normalize-charset@^1.1.0:
-  version "1.1.1"
-  resolved "http://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-1.1.1.tgz#ef9ee71212d7fe759c78ed162f61ed62b5cb93f1"
+postcss-normalize-charset@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-4.0.1.tgz"
+  integrity sha512-gMXCrrlWh6G27U0hF3vNvR3w8I1s2wOBILvA87iNXaPvSNo5uZAMYsZG7XjCUf1eVxuPfyL4TJ7++SGZLc9A3g==
+  dependencies:
+    postcss "^7.0.0"
+
+postcss-normalize-display-values@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.npmjs.org/postcss-normalize-display-values/-/postcss-normalize-display-values-4.0.2.tgz"
+  integrity sha512-3F2jcsaMW7+VtRMAqf/3m4cPFhPD3EFRgNs18u+k3lTJJlVe7d0YPO+bnwqo2xg8YiRpDXJI2u8A0wqJxMsQuQ==
+  dependencies:
+    cssnano-util-get-match "^4.0.0"
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
+
+postcss-normalize-positions@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.npmjs.org/postcss-normalize-positions/-/postcss-normalize-positions-4.0.2.tgz"
+  integrity sha512-Dlf3/9AxpxE+NF1fJxYDeggi5WwV35MXGFnnoccP/9qDtFrTArZ0D0R+iKcg5WsUd8nUYMIl8yXDCtcrT8JrdA==
+  dependencies:
+    cssnano-util-get-arguments "^4.0.0"
+    has "^1.0.0"
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
+
+postcss-normalize-repeat-style@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.npmjs.org/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-4.0.2.tgz"
+  integrity sha512-qvigdYYMpSuoFs3Is/f5nHdRLJN/ITA7huIoCyqqENJe9PvPmLhNLMu7QTjPdtnVf6OcYYO5SHonx4+fbJE1+Q==
+  dependencies:
+    cssnano-util-get-arguments "^4.0.0"
+    cssnano-util-get-match "^4.0.0"
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
+
+postcss-normalize-string@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.npmjs.org/postcss-normalize-string/-/postcss-normalize-string-4.0.2.tgz"
+  integrity sha512-RrERod97Dnwqq49WNz8qo66ps0swYZDSb6rM57kN2J+aoyEAJfZ6bMx0sx/F9TIEX0xthPGCmeyiam/jXif0eA==
+  dependencies:
+    has "^1.0.0"
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
+
+postcss-normalize-timing-functions@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.npmjs.org/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-4.0.2.tgz"
+  integrity sha512-acwJY95edP762e++00Ehq9L4sZCEcOPyaHwoaFOhIwWCDfik6YvqsYNxckee65JHLKzuNSSmAdxwD2Cud1Z54A==
+  dependencies:
+    cssnano-util-get-match "^4.0.0"
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
+
+postcss-normalize-unicode@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.npmjs.org/postcss-normalize-unicode/-/postcss-normalize-unicode-4.0.1.tgz"
+  integrity sha512-od18Uq2wCYn+vZ/qCOeutvHjB5jm57ToxRaMeNuf0nWVHaP9Hua56QyMF6fs/4FSUnVIw0CBPsU0K4LnBPwYwg==
   dependencies:
-    postcss "^5.0.5"
+    browserslist "^4.0.0"
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
 
-postcss-normalize-url@^3.0.7:
-  version "3.0.8"
-  resolved "http://registry.npmjs.org/postcss-normalize-url/-/postcss-normalize-url-3.0.8.tgz#108f74b3f2fcdaf891a2ffa3ea4592279fc78222"
+postcss-normalize-url@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.npmjs.org/postcss-normalize-url/-/postcss-normalize-url-4.0.1.tgz"
+  integrity sha512-p5oVaF4+IHwu7VpMan/SSpmpYxcJMtkGppYf0VbdH5B6hN8YNmVyJLuY9FmLQTzY3fag5ESUUHDqM+heid0UVA==
   dependencies:
     is-absolute-url "^2.0.0"
-    normalize-url "^1.4.0"
-    postcss "^5.0.14"
-    postcss-value-parser "^3.2.3"
+    normalize-url "^3.0.0"
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
 
-postcss-ordered-values@^2.1.0:
-  version "2.2.3"
-  resolved "https://registry.yarnpkg.com/postcss-ordered-values/-/postcss-ordered-values-2.2.3.tgz#eec6c2a67b6c412a8db2042e77fe8da43f95c11d"
+postcss-normalize-whitespace@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.npmjs.org/postcss-normalize-whitespace/-/postcss-normalize-whitespace-4.0.2.tgz"
+  integrity sha512-tO8QIgrsI3p95r8fyqKV+ufKlSHh9hMJqACqbv2XknufqEDhDvbguXGBBqxw9nsQoXWf0qOqppziKJKHMD4GtA==
   dependencies:
-    postcss "^5.0.4"
-    postcss-value-parser "^3.0.1"
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
 
-postcss-reduce-idents@^2.2.2:
-  version "2.4.0"
-  resolved "http://registry.npmjs.org/postcss-reduce-idents/-/postcss-reduce-idents-2.4.0.tgz#c2c6d20cc958284f6abfbe63f7609bf409059ad3"
+postcss-ordered-values@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.npmjs.org/postcss-ordered-values/-/postcss-ordered-values-4.1.2.tgz"
+  integrity sha512-2fCObh5UanxvSxeXrtLtlwVThBvHn6MQcu4ksNT2tsaV2Fg76R2CV98W7wNSlX+5/pFwEyaDwKLLoEV7uRybAw==
   dependencies:
-    postcss "^5.0.4"
-    postcss-value-parser "^3.0.2"
+    cssnano-util-get-arguments "^4.0.0"
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
 
-postcss-reduce-initial@^1.0.0:
-  version "1.0.1"
-  resolved "http://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-1.0.1.tgz#68f80695f045d08263a879ad240df8dd64f644ea"
+postcss-reduce-initial@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-4.0.3.tgz"
+  integrity sha512-gKWmR5aUulSjbzOfD9AlJiHCGH6AEVLaM0AV+aSioxUDd16qXP1PCh8d1/BGVvpdWn8k/HiK7n6TjeoXN1F7DA==
   dependencies:
-    postcss "^5.0.4"
+    browserslist "^4.0.0"
+    caniuse-api "^3.0.0"
+    has "^1.0.0"
+    postcss "^7.0.0"
 
-postcss-reduce-transforms@^1.0.3:
-  version "1.0.4"
-  resolved "http://registry.npmjs.org/postcss-reduce-transforms/-/postcss-reduce-transforms-1.0.4.tgz#ff76f4d8212437b31c298a42d2e1444025771ae1"
+postcss-reduce-transforms@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.npmjs.org/postcss-reduce-transforms/-/postcss-reduce-transforms-4.0.2.tgz"
+  integrity sha512-EEVig1Q2QJ4ELpJXMZR8Vt5DQx8/mo+dGWSR7vWXqcob2gQLyQGsionYcGKATXvQzMPn6DSN1vTN7yFximdIAg==
   dependencies:
-    has "^1.0.1"
-    postcss "^5.0.8"
-    postcss-value-parser "^3.0.1"
+    cssnano-util-get-match "^4.0.0"
+    has "^1.0.0"
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
 
-postcss-selector-parser@^2.0.0, postcss-selector-parser@^2.2.2:
-  version "2.2.3"
-  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-2.2.3.tgz#f9437788606c3c9acee16ffe8d8b16297f27bb90"
+postcss-selector-parser@^3.0.0:
+  version "3.1.2"
+  resolved "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-3.1.2.tgz"
+  integrity sha512-h7fJ/5uWuRVyOtkO45pnt1Ih40CEleeyCHzipqAZO2e5H20g25Y48uYnFUiShvY4rZWNJ/Bib/KVPmanaCtOhA==
   dependencies:
-    flatten "^1.0.2"
+    dot-prop "^5.2.0"
     indexes-of "^1.0.1"
     uniq "^1.0.1"
 
-postcss-svgo@^2.1.1:
-  version "2.1.6"
-  resolved "http://registry.npmjs.org/postcss-svgo/-/postcss-svgo-2.1.6.tgz#b6df18aa613b666e133f08adb5219c2684ac108d"
+postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2:
+  version "6.0.2"
+  resolved "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.2.tgz"
+  integrity sha512-36P2QR59jDTOAiIkqEprfJDsoNrvwFei3eCqKd1Y0tUsBimsq39BLp7RD+JWny3WgB1zGhJX8XVePwm9k4wdBg==
   dependencies:
-    is-svg "^2.0.0"
-    postcss "^5.0.14"
-    postcss-value-parser "^3.2.3"
-    svgo "^0.7.0"
+    cssesc "^3.0.0"
+    indexes-of "^1.0.1"
+    uniq "^1.0.1"
 
-postcss-unique-selectors@^2.0.2:
-  version "2.0.2"
-  resolved "http://registry.npmjs.org/postcss-unique-selectors/-/postcss-unique-selectors-2.0.2.tgz#981d57d29ddcb33e7b1dfe1fd43b8649f933ca1d"
+postcss-svgo@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-4.0.2.tgz"
+  integrity sha512-C6wyjo3VwFm0QgBy+Fu7gCYOkCmgmClghO+pjcxvrcBKtiKt0uCF+hvbMO1fyv5BMImRK90SMb+dwUnfbGd+jw==
   dependencies:
-    alphanum-sort "^1.0.1"
-    postcss "^5.0.4"
-    uniqs "^2.0.0"
-
-postcss-value-parser@^3.0.1, postcss-value-parser@^3.0.2, postcss-value-parser@^3.1.1, postcss-value-parser@^3.1.2, postcss-value-parser@^3.2.3, postcss-value-parser@^3.3.0, postcss-value-parser@^3.3.1:
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
+    is-svg "^3.0.0"
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
+    svgo "^1.0.0"
 
-postcss-zindex@^2.0.1:
-  version "2.2.0"
-  resolved "http://registry.npmjs.org/postcss-zindex/-/postcss-zindex-2.2.0.tgz#d2109ddc055b91af67fc4cb3b025946639d2af22"
+postcss-unique-selectors@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.npmjs.org/postcss-unique-selectors/-/postcss-unique-selectors-4.0.1.tgz"
+  integrity sha512-+JanVaryLo9QwZjKrmJgkI4Fn8SBgRO6WXQBJi7KiAVPlmxikB5Jzc4EvXMT2H0/m0RjrVVm9rGNhZddm/8Spg==
   dependencies:
-    has "^1.0.1"
-    postcss "^5.0.4"
+    alphanum-sort "^1.0.0"
+    postcss "^7.0.0"
     uniqs "^2.0.0"
 
-postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.16, postcss@^5.0.2, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.6, postcss@^5.0.8, postcss@^5.2.16:
-  version "5.2.18"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.18.tgz#badfa1497d46244f6390f58b319830d9107853c5"
-  dependencies:
-    chalk "^1.1.3"
-    js-base64 "^2.1.9"
-    source-map "^0.5.6"
-    supports-color "^3.2.3"
+postcss-value-parser@^3.0.0:
+  version "3.3.1"
+  resolved "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz"
+  integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
 
-postcss@^6.0.0, postcss@^6.0.1:
-  version "6.0.23"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.23.tgz#61c82cc328ac60e677645f979054eb98bc0e3324"
-  dependencies:
-    chalk "^2.4.1"
-    source-map "^0.6.1"
-    supports-color "^5.4.0"
+postcss-value-parser@^4.0.0, postcss-value-parser@^4.0.2:
+  version "4.0.3"
+  resolved "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.0.3.tgz"
+  integrity sha512-N7h4pG+Nnu5BEIzyeaaIYWs0LI5XC40OrRh5L60z0QjFsqGWcHcbkBvpe1WYpcIS9yQ8sOi/vIPt1ejQCrMVrg==
 
-postcss@^7.0.5:
-  version "7.0.5"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.5.tgz#70e6443e36a6d520b0fd4e7593fcca3635ee9f55"
+postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.16, postcss@^7.0.23, postcss@^7.0.26, postcss@^7.0.27, postcss@^7.0.5, postcss@^7.0.6:
+  version "7.0.27"
+  resolved "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz"
+  integrity sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==
   dependencies:
-    chalk "^2.4.1"
+    chalk "^2.4.2"
     source-map "^0.6.1"
-    supports-color "^5.5.0"
+    supports-color "^6.1.0"
+
+potpack@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/potpack/-/potpack-2.0.0.tgz#61f4dd2dc4b3d5e996e3698c0ec9426d0e169104"
+  integrity sha512-Q+/tYsFU9r7xoOJ+y/ZTtdVQwTWfzjbiXBDMM/JKUux3+QPP02iUuIoeBQ+Ot6oEDlC+/PGjB/5A3K7KKb7hcw==
+
+preact@^10.5.7:
+  version "10.5.7"
+  resolved "https://registry.npmjs.org/preact/-/preact-10.5.7.tgz"
+  integrity sha512-4oEpz75t/0UNcwmcsjk+BIcDdk68oao+7kxcpc1hQPNs2Oo3ZL9xFz8UBf350mxk/VEdD41L5b4l2dE3Ug3RYg==
+
+prelude-ls@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz"
+  integrity sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=
 
 prepend-http@^1.0.0:
   version "1.0.4"
-  resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
+  resolved "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz"
+  integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=
 
 pretty-error@^2.0.2:
   version "2.1.1"
-  resolved "https://registry.yarnpkg.com/pretty-error/-/pretty-error-2.1.1.tgz#5f4f87c8f91e5ae3f3ba87ab4cf5e03b1a17f1a3"
+  resolved "https://registry.npmjs.org/pretty-error/-/pretty-error-2.1.1.tgz"
+  integrity sha1-X0+HyPkeWuPzuoerTPXgOxoX8aM=
   dependencies:
     renderkid "^2.0.1"
     utila "~0.4"
 
+pretty-format@^26.0.0, pretty-format@^26.6.2:
+  version "26.6.2"
+  resolved "https://registry.npmjs.org/pretty-format/-/pretty-format-26.6.2.tgz"
+  integrity sha512-7AeGuCYNGmycyQbCqd/3PWH4eOoX/OiCa0uphp57NVTeAGdJGaAliecxwBDHYQCIvrW7aDBZCYeNTP/WX69mkg==
+  dependencies:
+    "@jest/types" "^26.6.2"
+    ansi-regex "^5.0.0"
+    ansi-styles "^4.0.0"
+    react-is "^17.0.1"
+
+pretty-format@^26.5.2:
+  version "26.5.2"
+  resolved "https://registry.npmjs.org/pretty-format/-/pretty-format-26.5.2.tgz"
+  integrity sha512-VizyV669eqESlkOikKJI8Ryxl/kPpbdLwNdPs2GrbQs18MpySB5S0Yo0N7zkg2xTRiFq4CFw8ct5Vg4a0xP0og==
+  dependencies:
+    "@jest/types" "^26.5.2"
+    ansi-regex "^5.0.0"
+    ansi-styles "^4.0.0"
+    react-is "^16.12.0"
+
 process-nextick-args@~2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.0.tgz#a37d732f4271b4ab1ad070d35508e8290788ffaa"
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz"
+  integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==
 
 process@^0.11.10:
   version "0.11.10"
-  resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
-
-process@~0.5.1:
-  version "0.5.2"
-  resolved "https://registry.yarnpkg.com/process/-/process-0.5.2.tgz#1638d8a8e34c2f440a91db95ab9aeb677fc185cf"
+  resolved "https://registry.npmjs.org/process/-/process-0.11.10.tgz"
+  integrity sha1-czIwDoQBYb2j5podHZGn1LwW8YI=
 
 promise-inflight@^1.0.1:
   version "1.0.1"
-  resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
+  resolved "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz"
+  integrity sha1-mEcocL8igTL8vdhoEputEsPAKeM=
 
 promise@^7.1.1:
   version "7.3.1"
-  resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
+  resolved "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz"
+  integrity sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==
   dependencies:
     asap "~2.0.3"
 
-proxy-addr@~2.0.4:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.4.tgz#ecfc733bf22ff8c6f407fa275327b9ab67e48b93"
+prompts@^2.0.1:
+  version "2.3.2"
+  resolved "https://registry.npmjs.org/prompts/-/prompts-2.3.2.tgz"
+  integrity sha512-Q06uKs2CkNYVID0VqwfAl9mipo99zkBv/n2JtWY89Yxa3ZabWSrs0e2KTudKVa3peLUvYXMefDqIleLPVUBZMA==
+  dependencies:
+    kleur "^3.0.3"
+    sisteransi "^1.0.4"
+
+protocol-buffers-schema@^3.3.1:
+  version "3.4.0"
+  resolved "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.4.0.tgz"
+  integrity sha512-G/2kcamPF2S49W5yaMGdIpkG6+5wZF0fzBteLKgEHjbNzqjZQ85aAs1iJGto31EJaSTkNvHs5IXuHSaTLWBAiA==
+
+proxy-addr@~2.0.5:
+  version "2.0.5"
+  resolved "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.5.tgz"
+  integrity sha512-t/7RxHXPH6cJtP0pRG6smSr9QJidhB+3kXu0KgXnbGYMgzEnUxRQ4/LDdfOwZEMyIh3/xHb8PX3t+lfL9z+YVQ==
   dependencies:
     forwarded "~0.1.2"
-    ipaddr.js "1.8.0"
+    ipaddr.js "1.9.0"
 
 prr@~1.0.1:
   version "1.0.1"
-  resolved "https://registry.yarnpkg.com/prr/-/prr-1.0.1.tgz#d3fc114ba06995a45ec6893f484ceb1d78f5f476"
-
-pseudomap@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
+  resolved "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz"
+  integrity sha1-0/wRS6BplaRexok/SEzrHXj19HY=
 
-psl@^1.1.24:
-  version "1.1.29"
-  resolved "https://registry.yarnpkg.com/psl/-/psl-1.1.29.tgz#60f580d360170bb722a797cc704411e6da850c67"
+psl@^1.1.28:
+  version "1.7.0"
+  resolved "https://registry.npmjs.org/psl/-/psl-1.7.0.tgz"
+  integrity sha512-5NsSEDv8zY70ScRnOTn7bK7eanl2MvFrOrS/R6x+dBt5g1ghnj9Zv90kO8GwT8gxcu2ANyFprnFYB85IogIJOQ==
 
 public-encrypt@^4.0.0:
   version "4.0.3"
-  resolved "https://registry.yarnpkg.com/public-encrypt/-/public-encrypt-4.0.3.tgz#4fcc9d77a07e48ba7527e7cbe0de33d0701331e0"
+  resolved "https://registry.npmjs.org/public-encrypt/-/public-encrypt-4.0.3.tgz"
+  integrity sha512-zVpa8oKZSz5bTMTFClc1fQOnyyEzpl5ozpi1B5YcvBrdohMjH2rfsBtyXcuNuwjsDIXmBYlF2N5FlJYhR29t8Q==
   dependencies:
     bn.js "^4.1.0"
     browserify-rsa "^4.0.0"
@@ -4341,16 +8050,26 @@ public-encrypt@^4.0.0:
     randombytes "^2.0.1"
     safe-buffer "^5.1.2"
 
-pump@^2.0.0, pump@^2.0.1:
+pump@^2.0.0:
   version "2.0.1"
-  resolved "https://registry.yarnpkg.com/pump/-/pump-2.0.1.tgz#12399add6e4cf7526d973cbc8b5ce2e2908b3909"
+  resolved "https://registry.npmjs.org/pump/-/pump-2.0.1.tgz"
+  integrity sha512-ruPMNRkN3MHP1cWJc9OWr+T/xDP0jhXYCLfJcBuX54hhfIBnaQmAUMfDcG4DM5UMWByBbJY69QSphm3jtDKIkA==
+  dependencies:
+    end-of-stream "^1.1.0"
+    once "^1.3.1"
+
+pump@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz"
+  integrity sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==
   dependencies:
     end-of-stream "^1.1.0"
     once "^1.3.1"
 
 pumpify@^1.3.3:
   version "1.5.1"
-  resolved "https://registry.yarnpkg.com/pumpify/-/pumpify-1.5.1.tgz#36513be246ab27570b1a374a5ce278bfd74370ce"
+  resolved "https://registry.npmjs.org/pumpify/-/pumpify-1.5.1.tgz"
+  integrity sha512-oClZI37HvuUJJxSKKrC17bZ9Cu0ZYhEAGPsPUy9KlMUmv9dKX2o77RUmq7f3XjIxbwyGwYzbzQ1L2Ks8sIradQ==
   dependencies:
     duplexify "^3.6.0"
     inherits "^2.0.3"
@@ -4358,104 +8077,146 @@ pumpify@^1.3.3:
 
 punycode@1.3.2:
   version "1.3.2"
-  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.3.2.tgz#9653a036fb7c1ee42342f2325cceefea3926c48d"
+  resolved "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz"
+  integrity sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0=
 
-punycode@^1.2.4, punycode@^1.4.1:
+punycode@^1.2.4:
   version "1.4.1"
-  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
+  resolved "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz"
+  integrity sha1-wNWmOycYgArY4esPpSachN1BhF4=
 
-punycode@^2.1.0:
+punycode@^2.1.0, punycode@^2.1.1:
   version "2.1.1"
-  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
+  resolved "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz"
+  integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
 
 q@^1.1.2:
   version "1.5.1"
-  resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
+  resolved "https://registry.npmjs.org/q/-/q-1.5.1.tgz"
+  integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=
+
+qs@6.7.0:
+  version "6.7.0"
+  resolved "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz"
+  integrity sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==
 
-qs@6.5.2, qs@~6.5.2:
+qs@~6.5.2:
   version "6.5.2"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
+  resolved "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz"
+  integrity sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==
 
 query-string@^4.1.0:
   version "4.3.4"
-  resolved "https://registry.yarnpkg.com/query-string/-/query-string-4.3.4.tgz#bbb693b9ca915c232515b228b1a02b609043dbeb"
+  resolved "https://registry.npmjs.org/query-string/-/query-string-4.3.4.tgz"
+  integrity sha1-u7aTucqRXCMlFbIosaArYJBD2+s=
   dependencies:
     object-assign "^4.1.0"
     strict-uri-encode "^1.0.0"
 
 querystring-es3@^0.2.0:
   version "0.2.1"
-  resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73"
+  resolved "https://registry.npmjs.org/querystring-es3/-/querystring-es3-0.2.1.tgz"
+  integrity sha1-nsYfeQSYdXB9aUFFlv2Qek1xHnM=
 
 querystring@0.2.0:
   version "0.2.0"
-  resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620"
-
-querystringify@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.1.0.tgz#7ded8dfbf7879dcc60d0a644ac6754b283ad17ef"
+  resolved "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz"
+  integrity sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=
 
-quill-delta@^3.6.2:
-  version "3.6.3"
-  resolved "https://registry.yarnpkg.com/quill-delta/-/quill-delta-3.6.3.tgz#b19fd2b89412301c60e1ff213d8d860eac0f1032"
-  dependencies:
-    deep-equal "^1.0.1"
-    extend "^3.0.2"
-    fast-diff "1.1.2"
+querystringify@^2.1.1:
+  version "2.2.0"
+  resolved "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz"
+  integrity sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==
 
-quill@1.x:
-  version "1.3.6"
-  resolved "http://registry.npmjs.org/quill/-/quill-1.3.6.tgz#99f4de1fee85925a0d7d4163b6d8328f23317a4d"
-  dependencies:
-    clone "^2.1.1"
-    deep-equal "^1.0.1"
-    eventemitter3 "^2.0.3"
-    extend "^3.0.1"
-    parchment "^1.1.4"
-    quill-delta "^3.6.2"
+quickselect@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/quickselect/-/quickselect-3.0.0.tgz#a37fc953867d56f095a20ac71c6d27063d2de603"
+  integrity sha512-XdjUArbK4Bm5fLLvlm5KpTFOiOThgfWWI4axAZDWg4E/0mKdZyI9tNEfds27qCi1ze/vwTR16kvmmGhRra3c2g==
 
 randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.0.6.tgz#d302c522948588848a8d300c932b44c24231da80"
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz"
+  integrity sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==
   dependencies:
     safe-buffer "^5.1.0"
 
 randomfill@^1.0.3:
   version "1.0.4"
-  resolved "https://registry.yarnpkg.com/randomfill/-/randomfill-1.0.4.tgz#c92196fc86ab42be983f1bf31778224931d61458"
+  resolved "https://registry.npmjs.org/randomfill/-/randomfill-1.0.4.tgz"
+  integrity sha512-87lcbR8+MhcWcUiQ+9e+Rwx8MyR2P7qnt15ynUlbm3TU/fjbgz4GsvfSUDTemtCCtVCqb4ZcEFlyPNTh9bBTLw==
   dependencies:
     randombytes "^2.0.5"
     safe-buffer "^5.1.0"
 
-range-parser@^1.0.3, range-parser@~1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.0.tgz#f49be6b487894ddc40dcc94a322f611092e00d5e"
+range-parser@^1.2.1, range-parser@~1.2.1:
+  version "1.2.1"
+  resolved "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz"
+  integrity sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==
 
-raw-body@2.3.3:
-  version "2.3.3"
-  resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.3.3.tgz#1b324ece6b5706e153855bc1148c65bb7f6ea0c3"
+raw-body@2.4.0:
+  version "2.4.0"
+  resolved "https://registry.npmjs.org/raw-body/-/raw-body-2.4.0.tgz"
+  integrity sha512-4Oz8DUIwdvoa5qMJelxipzi/iJIi40O5cGV1wNYp5hvZP8ZN0T+jiNkL0QepXs+EsQ9XJ8ipEDoiH70ySUJP3Q==
   dependencies:
-    bytes "3.0.0"
-    http-errors "1.6.3"
-    iconv-lite "0.4.23"
+    bytes "3.1.0"
+    http-errors "1.7.2"
+    iconv-lite "0.4.24"
     unpipe "1.0.0"
 
-raw-loader@^0.5.1:
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/raw-loader/-/raw-loader-0.5.1.tgz#0c3d0beaed8a01c966d9787bf778281252a979aa"
+raw-loader@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/raw-loader/-/raw-loader-3.1.0.tgz"
+  integrity sha512-lzUVMuJ06HF4rYveaz9Tv0WRlUMxJ0Y1hgSkkgg+50iEdaI0TthyEDe08KIHb0XsF6rn8WYTqPCaGTZg3sX+qA==
+  dependencies:
+    loader-utils "^1.1.0"
+    schema-utils "^2.0.1"
+
+react-is@^16.12.0:
+  version "16.13.1"
+  resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
+  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
+
+react-is@^17.0.1:
+  version "17.0.2"
+  resolved "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz"
+  integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
+
+react-jsx-parser@^1.28.1:
+  version "1.28.1"
+  resolved "https://registry.npmjs.org/react-jsx-parser/-/react-jsx-parser-1.28.1.tgz"
+  integrity sha512-cZVdccm7tfeciIKiweg9GmhMe+r0+TZXcJWL/FZ4sVZebNdQvW7f0PVSGVwKN6p3zIhX/1T/4URFbQ/uuoX98w==
+  dependencies:
+    "@types/jsdom" "^16.2.4"
+    acorn "^8.0.4"
+    acorn-jsx "^5.3.1"
+    core-js "^3.6.5"
+  optionalDependencies:
+    "@types/react" "^17.0.0"
+    "@types/react-dom" "^17.0.0"
 
-rc@^1.2.7:
-  version "1.2.8"
-  resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"
+read-pkg-up@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-7.0.1.tgz"
+  integrity sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==
   dependencies:
-    deep-extend "^0.6.0"
-    ini "~1.3.0"
-    minimist "^1.2.0"
-    strip-json-comments "~2.0.1"
+    find-up "^4.1.0"
+    read-pkg "^5.2.0"
+    type-fest "^0.8.1"
+
+read-pkg@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz"
+  integrity sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==
+  dependencies:
+    "@types/normalize-package-data" "^2.4.0"
+    normalize-package-data "^2.5.0"
+    parse-json "^5.0.0"
+    type-fest "^0.6.0"
 
-"readable-stream@1 || 2", readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.4, readable-stream@^2.0.6, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.2.9, readable-stream@^2.3.3, readable-stream@^2.3.6:
-  version "2.3.6"
-  resolved "http://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz#b11c27d88b8ff1fbe070643cf94b0c79ae1b0aaf"
+"readable-stream@1 || 2", readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.3.3, readable-stream@^2.3.6, readable-stream@~2.3.6:
+  version "2.3.7"
+  resolved "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz"
+  integrity sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==
   dependencies:
     core-util-is "~1.0.0"
     inherits "~2.0.3"
@@ -4465,95 +8226,98 @@ rc@^1.2.7:
     string_decoder "~1.1.1"
     util-deprecate "~1.0.1"
 
-readable-stream@1.0:
-  version "1.0.34"
-  resolved "http://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz#125820e34bc842d2f2aaafafe4c2916ee32c157c"
+readable-stream@^3.0.6, readable-stream@^3.1.1:
+  version "3.6.0"
+  resolved "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz"
+  integrity sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==
   dependencies:
-    core-util-is "~1.0.0"
-    inherits "~2.0.1"
-    isarray "0.0.1"
-    string_decoder "~0.10.x"
+    inherits "^2.0.3"
+    string_decoder "^1.1.1"
+    util-deprecate "^1.0.1"
 
-readdirp@^2.0.0:
+readdirp@^2.2.1:
   version "2.2.1"
-  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-2.2.1.tgz#0e87622a3325aa33e892285caf8b4e846529a525"
+  resolved "https://registry.npmjs.org/readdirp/-/readdirp-2.2.1.tgz"
+  integrity sha512-1JU/8q+VgFZyxwrJ+SVIOsh+KywWGpds3NTqikiKpDMZWScmAYyKIgqkO+ARvNWJfXeXR1zxz7aHF4u4CyH6vQ==
   dependencies:
     graceful-fs "^4.1.11"
     micromatch "^3.1.10"
     readable-stream "^2.0.2"
 
-reduce-css-calc@^1.2.6:
-  version "1.3.0"
-  resolved "http://registry.npmjs.org/reduce-css-calc/-/reduce-css-calc-1.3.0.tgz#747c914e049614a4c9cfbba629871ad1d2927716"
-  dependencies:
-    balanced-match "^0.4.2"
-    math-expression-evaluator "^1.2.14"
-    reduce-function-call "^1.0.1"
-
-reduce-function-call@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/reduce-function-call/-/reduce-function-call-1.0.2.tgz#5a200bf92e0e37751752fe45b0ab330fd4b6be99"
+readdirp@~3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
+  integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==
   dependencies:
-    balanced-match "^0.4.2"
-
-regenerate@^1.2.1:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.0.tgz#4a856ec4b56e4077c557589cae85e7a4c8869a11"
+    picomatch "^2.2.1"
 
 regex-not@^1.0.0, regex-not@^1.0.2:
   version "1.0.2"
-  resolved "https://registry.yarnpkg.com/regex-not/-/regex-not-1.0.2.tgz#1f4ece27e00b0b65e0247a6810e6a85d83a5752c"
+  resolved "https://registry.npmjs.org/regex-not/-/regex-not-1.0.2.tgz"
+  integrity sha512-J6SDjUgDxQj5NusnOtdFxDwN/+HWykR8GELwctJ7mdqhcyy1xEc4SRFHUXvxTp661YaVKAjfRLZ9cCqS6tn32A==
   dependencies:
     extend-shallow "^3.0.2"
     safe-regex "^1.1.0"
 
-regexpu-core@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-1.0.0.tgz#86a763f58ee4d7c2f6b102e4764050de7ed90c6b"
-  dependencies:
-    regenerate "^1.2.1"
-    regjsgen "^0.2.0"
-    regjsparser "^0.1.4"
-
-regjsgen@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.2.0.tgz#6c016adeac554f75823fe37ac05b92d5a4edb1f7"
-
-regjsparser@^0.1.4:
-  version "0.1.5"
-  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.1.5.tgz#7ee8f84dc6fa792d3fd0ae228d24bd949ead205c"
+regexp.prototype.flags@^1.2.0:
+  version "1.3.0"
+  resolved "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.3.0.tgz"
+  integrity sha512-2+Q0C5g951OlYlJz6yu5/M33IcsESLlLfsyIaLJaG4FA2r4yP8MvVMJUUP/fVBkSpbbbZlS5gynbEWLipiiXiQ==
   dependencies:
-    jsesc "~0.5.0"
+    define-properties "^1.1.3"
+    es-abstract "^1.17.0-next.1"
 
 relateurl@0.2.x:
   version "0.2.7"
-  resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
+  resolved "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz"
+  integrity sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=
 
 remove-trailing-separator@^1.0.1:
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
+  resolved "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz"
+  integrity sha1-wkvOKig62tW8P1jg1IJJuSN52O8=
 
 renderkid@^2.0.1:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/renderkid/-/renderkid-2.0.2.tgz#12d310f255360c07ad8fde253f6c9e9de372d2aa"
+  version "2.0.3"
+  resolved "https://registry.npmjs.org/renderkid/-/renderkid-2.0.3.tgz"
+  integrity sha512-z8CLQp7EZBPCwCnncgf9C4XAi3WR0dv+uWu/PjIyhhAb5d6IJ/QZqlHFprHeKT+59//V6BNUsLbvN8+2LarxGA==
   dependencies:
     css-select "^1.1.0"
-    dom-converter "~0.2"
-    htmlparser2 "~3.3.0"
+    dom-converter "^0.2"
+    htmlparser2 "^3.3.0"
     strip-ansi "^3.0.0"
     utila "^0.4.0"
 
 repeat-element@^1.1.2:
   version "1.1.3"
-  resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.3.tgz#782e0d825c0c5a3bb39731f84efee6b742e6b1ce"
+  resolved "https://registry.npmjs.org/repeat-element/-/repeat-element-1.1.3.tgz"
+  integrity sha512-ahGq0ZnV5m5XtZLMb+vP76kcAM5nkLqk0lpqAuojSKGgQtn4eRi4ZZGm2olo2zKFH+sMsWaqOCW1dqAnOru72g==
 
 repeat-string@^1.6.1:
   version "1.6.1"
-  resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
+  resolved "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz"
+  integrity sha1-jcrkcOHIirwtYA//Sndihtp15jc=
+
+request-promise-core@1.1.4:
+  version "1.1.4"
+  resolved "https://registry.npmjs.org/request-promise-core/-/request-promise-core-1.1.4.tgz"
+  integrity sha512-TTbAfBBRdWD7aNNOoVOBH4pN/KigV6LyapYNNlAPA8JwbovRti1E88m3sYAwsLi5ryhPKsE9APwnjFTgdUjTpw==
+  dependencies:
+    lodash "^4.17.19"
+
+request-promise-native@^1.0.8:
+  version "1.0.9"
+  resolved "https://registry.npmjs.org/request-promise-native/-/request-promise-native-1.0.9.tgz"
+  integrity sha512-wcW+sIUiWnKgNY0dqCpOZkUbF/I+YPi+f09JZIDa39Ec+q82CpSYniDp+ISgTTbKmnpJWASeJBPZmoxH84wt3g==
+  dependencies:
+    request-promise-core "1.1.4"
+    stealthy-require "^1.1.1"
+    tough-cookie "^2.3.3"
 
-request@^2.83.0:
-  version "2.88.0"
-  resolved "https://registry.yarnpkg.com/request/-/request-2.88.0.tgz#9c2fca4f7d35b592efe57c7f0a55e81052124fef"
+request@^2.83.0, request@^2.88.2:
+  version "2.88.2"
+  resolved "https://registry.npmjs.org/request/-/request-2.88.2.tgz"
+  integrity sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==
   dependencies:
     aws-sign2 "~0.7.0"
     aws4 "^1.8.0"
@@ -4562,7 +8326,7 @@ request@^2.83.0:
     extend "~3.0.2"
     forever-agent "~0.6.1"
     form-data "~2.3.2"
-    har-validator "~5.1.0"
+    har-validator "~5.1.3"
     http-signature "~1.2.0"
     is-typedarray "~1.0.0"
     isstream "~0.1.2"
@@ -4572,136 +8336,307 @@ request@^2.83.0:
     performance-now "^2.1.0"
     qs "~6.5.2"
     safe-buffer "^5.1.2"
-    tough-cookie "~2.4.3"
+    tough-cookie "~2.5.0"
     tunnel-agent "^0.6.0"
     uuid "^3.3.2"
 
 require-directory@^2.1.1:
   version "2.1.1"
-  resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
-
-require-from-string@^2.0.1:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-2.0.2.tgz#89a7fdd938261267318eafe14f9c32e598c36909"
+  resolved "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz"
+  integrity sha1-jGStX9MNqxyXbiNE/+f3kqam30I=
 
 require-main-filename@^1.0.1:
   version "1.0.1"
-  resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-1.0.1.tgz#97f717b69d48784f5f526a6c5aa8ffdda055a4d1"
+  resolved "https://registry.npmjs.org/require-main-filename/-/require-main-filename-1.0.1.tgz"
+  integrity sha1-l/cXtp1IeE9fUmpsWqj/3aBVpNE=
+
+require-main-filename@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz"
+  integrity sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==
 
 requires-port@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
+  resolved "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz"
+  integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=
+
+resize-observer-polyfill@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz"
+  integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
 
 resolve-cwd@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"
+  resolved "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-2.0.0.tgz"
+  integrity sha1-AKn3OHVW4nA46uIyyqNypqWbZlo=
   dependencies:
     resolve-from "^3.0.0"
 
+resolve-cwd@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-3.0.0.tgz"
+  integrity sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==
+  dependencies:
+    resolve-from "^5.0.0"
+
+resolve-dir@^1.0.0, resolve-dir@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/resolve-dir/-/resolve-dir-1.0.1.tgz"
+  integrity sha1-eaQGRMNivoLybv/nOcm7U4IEb0M=
+  dependencies:
+    expand-tilde "^2.0.0"
+    global-modules "^1.0.0"
+
 resolve-from@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-3.0.0.tgz#b22c7af7d9d6881bc8b6e653335eebcb0a188748"
+  resolved "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz"
+  integrity sha1-six699nWiBvItuZTM17rywoYh0g=
+
+resolve-from@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz"
+  integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==
+
+resolve-pkg-maps@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz#616b3dc2c57056b5588c31cdf4b3d64db133720f"
+  integrity sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==
+
+resolve-protobuf-schema@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/resolve-protobuf-schema/-/resolve-protobuf-schema-2.1.0.tgz"
+  integrity sha512-kI5ffTiZWmJaS/huM8wZfEMer1eRd7oJQhDuxeCLe3t7N7mX3z94CN0xPxBQxFYQTSNz9T0i+v6inKqSdK8xrQ==
+  dependencies:
+    protocol-buffers-schema "^3.3.1"
 
 resolve-url@^0.2.1:
   version "0.2.1"
-  resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
+  resolved "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz"
+  integrity sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=
+
+resolve@^1.10.0, resolve@^1.17.0:
+  version "1.17.0"
+  resolved "https://registry.npmjs.org/resolve/-/resolve-1.17.0.tgz"
+  integrity sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w==
+  dependencies:
+    path-parse "^1.0.6"
 
 resolve@^1.3.2:
-  version "1.8.1"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.8.1.tgz#82f1ec19a423ac1fbd080b0bab06ba36e84a7a26"
+  version "1.15.1"
+  resolved "https://registry.npmjs.org/resolve/-/resolve-1.15.1.tgz"
+  integrity sha512-84oo6ZTtoTUpjgNEr5SJyzQhzL72gaRodsSfyxC/AXRvwu0Yse9H8eF9IpGo7b8YetZhlI6v7ZQ6bKBFV/6S7w==
   dependencies:
-    path-parse "^1.0.5"
+    path-parse "^1.0.6"
 
 restore-cursor@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-2.0.0.tgz#9f7ee287f82fd326d4fd162923d62129eee0dfaf"
+  resolved "https://registry.npmjs.org/restore-cursor/-/restore-cursor-2.0.0.tgz"
+  integrity sha1-n37ih/gv0ybU/RYpI9YhKe7g368=
   dependencies:
     onetime "^2.0.0"
     signal-exit "^3.0.2"
 
 ret@~0.1.10:
   version "0.1.15"
-  resolved "https://registry.yarnpkg.com/ret/-/ret-0.1.15.tgz#b8a4825d5bdb1fc3f6f53c2bc33f81388681c7bc"
+  resolved "https://registry.npmjs.org/ret/-/ret-0.1.15.tgz"
+  integrity sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==
+
+retry@^0.12.0:
+  version "0.12.0"
+  resolved "https://registry.npmjs.org/retry/-/retry-0.12.0.tgz"
+  integrity sha1-G0KmJmoh8HQh0bC1S33BZ7AcATs=
+
+rgb-regex@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/rgb-regex/-/rgb-regex-1.0.1.tgz"
+  integrity sha1-wODWiC3w4jviVKR16O3UGRX+rrE=
 
-rimraf@^2.2.8, rimraf@^2.4.4, rimraf@^2.5.4, rimraf@^2.6.1, rimraf@^2.6.2:
-  version "2.6.2"
-  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.2.tgz#2ed8150d24a16ea8651e6d6ef0f47c4158ce7a36"
+rgba-regex@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/rgba-regex/-/rgba-regex-1.0.0.tgz"
+  integrity sha1-QzdOLiyglosO8VI0YLfXMP8i7rM=
+
+rimraf@^2.4.4, rimraf@^2.5.4, rimraf@^2.6.3, rimraf@^2.7.1:
+  version "2.7.1"
+  resolved "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz"
+  integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
+  dependencies:
+    glob "^7.1.3"
+
+rimraf@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz"
+  integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
   dependencies:
-    glob "^7.0.5"
+    glob "^7.1.3"
 
 ripemd160@^2.0.0, ripemd160@^2.0.1:
   version "2.0.2"
-  resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-2.0.2.tgz#a1c1a6f624751577ba5d07914cbc92850585890c"
+  resolved "https://registry.npmjs.org/ripemd160/-/ripemd160-2.0.2.tgz"
+  integrity sha512-ii4iagi25WusVoiC4B4lq7pbXfAp3D9v5CwfkY33vffw2+pkDjY1D8GaN7spsxvCSx8dkPqOZCEZyfxcmJG2IA==
   dependencies:
     hash-base "^3.0.0"
     inherits "^2.0.1"
 
+rsvp@^4.8.4:
+  version "4.8.5"
+  resolved "https://registry.npmjs.org/rsvp/-/rsvp-4.8.5.tgz"
+  integrity sha512-nfMOlASu9OnRJo1mbEk2cz0D56a1MBNrJ7orjRZQG10XDyuvwksKbuXNp6qa+kbn839HwjwhBzhFmdsaEAfauA==
+
 run-queue@^1.0.0, run-queue@^1.0.3:
   version "1.0.3"
-  resolved "https://registry.yarnpkg.com/run-queue/-/run-queue-1.0.3.tgz#e848396f057d223f24386924618e25694161ec47"
+  resolved "https://registry.npmjs.org/run-queue/-/run-queue-1.0.3.tgz"
+  integrity sha1-6Eg5bwV9Ij8kOGkkYY4laUFh7Ec=
   dependencies:
     aproba "^1.1.1"
 
-rw@1:
+rw@1, rw@^1.3.3:
   version "1.3.3"
-  resolved "https://registry.yarnpkg.com/rw/-/rw-1.3.3.tgz#3f862dfa91ab766b14885ef4d01124bfda074fb4"
+  resolved "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz"
+  integrity sha1-P4Yt+pGrdmsUiF700BEkv9oHT7Q=
 
-safe-buffer@5.1.2, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@^5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
+safe-buffer@5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   version "5.1.2"
-  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
+  resolved "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz"
+  integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
+
+safe-buffer@>=5.1.0, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@^5.1.2, safe-buffer@~5.2.0:
+  version "5.2.1"
+  resolved "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz"
+  integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
 
 safe-regex@^1.1.0:
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/safe-regex/-/safe-regex-1.1.0.tgz#40a3669f3b077d1e943d44629e157dd48023bf2e"
+  resolved "https://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz"
+  integrity sha1-QKNmnzsHfR6UPURinhV91IAjvy4=
   dependencies:
     ret "~0.1.10"
 
 "safer-buffer@>= 2.1.2 < 3", safer-buffer@^2.0.2, safer-buffer@^2.1.0, safer-buffer@~2.1.0:
   version "2.1.2"
-  resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
+  resolved "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz"
+  integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
-sax@^1.2.4, sax@~1.2.1:
+sane@^4.0.3:
+  version "4.1.0"
+  resolved "https://registry.npmjs.org/sane/-/sane-4.1.0.tgz"
+  integrity sha512-hhbzAgTIX8O7SHfp2c8/kREfEn4qO/9q8C9beyY6+tvZ87EpoZ3i1RIEvp27YBswnNbY9mWd6paKVmKbAgLfZA==
+  dependencies:
+    "@cnakazawa/watch" "^1.0.3"
+    anymatch "^2.0.0"
+    capture-exit "^2.0.0"
+    exec-sh "^0.3.2"
+    execa "^1.0.0"
+    fb-watchman "^2.0.0"
+    micromatch "^3.1.4"
+    minimist "^1.1.1"
+    walker "~1.0.5"
+
+sax@~1.2.4:
   version "1.2.4"
-  resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
+  resolved "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz"
+  integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
+
+saxes@^5.0.0:
+  version "5.0.1"
+  resolved "https://registry.npmjs.org/saxes/-/saxes-5.0.1.tgz"
+  integrity sha512-5LBh1Tls8c9xgGjw3QrMwETmTMVk0oFgvrFSvWx62llR2hcEInrKNZ2GZCCuuy2lvWrdl5jhbpeqc5hRYKFOcw==
+  dependencies:
+    xmlchars "^2.2.0"
 
 schema-utils@^0.3.0:
   version "0.3.0"
-  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.3.0.tgz#f5877222ce3e931edae039f17eb3716e7137f8cf"
+  resolved "https://registry.npmjs.org/schema-utils/-/schema-utils-0.3.0.tgz"
+  integrity sha1-9YdyIs4+kx7a4DnxfrNxbnE3+M8=
   dependencies:
     ajv "^5.0.0"
 
-schema-utils@^0.4.0, schema-utils@^0.4.4, schema-utils@^0.4.5:
+schema-utils@^0.4.0:
   version "0.4.7"
-  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.4.7.tgz#ba74f597d2be2ea880131746ee17d0a093c68187"
+  resolved "https://registry.npmjs.org/schema-utils/-/schema-utils-0.4.7.tgz"
+  integrity sha512-v/iwU6wvwGK8HbU9yi3/nhGzP0yGSuhQMzL6ySiec1FSrZZDkhm4noOSWzrNFo/jEc+SJY6jRTwuwbSXJPDUnQ==
   dependencies:
     ajv "^6.1.0"
     ajv-keywords "^3.1.0"
 
 schema-utils@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-1.0.0.tgz#0b79a93204d7b600d4b2850d1f66c2a34951c770"
+  resolved "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz"
+  integrity sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==
   dependencies:
     ajv "^6.1.0"
     ajv-errors "^1.0.0"
     ajv-keywords "^3.1.0"
 
+schema-utils@^2.0.1, schema-utils@^2.5.0, schema-utils@^2.6.0, schema-utils@^2.6.1:
+  version "2.6.4"
+  resolved "https://registry.npmjs.org/schema-utils/-/schema-utils-2.6.4.tgz"
+  integrity sha512-VNjcaUxVnEeun6B2fiiUDjXXBtD4ZSH7pdbfIu1pOFwgptDPLMo/z9jr4sUfsjFVPqDCEin/F7IYlq7/E6yDbQ==
+  dependencies:
+    ajv "^6.10.2"
+    ajv-keywords "^3.4.1"
+
+schema-utils@^2.6.6:
+  version "2.6.6"
+  resolved "https://registry.npmjs.org/schema-utils/-/schema-utils-2.6.6.tgz"
+  integrity sha512-wHutF/WPSbIi9x6ctjGGk2Hvl0VOz5l3EKEuKbjPlB30mKZUzb9A5k9yEXRX3pwyqVLPvpfZZEllaFq/M718hA==
+  dependencies:
+    ajv "^6.12.0"
+    ajv-keywords "^3.4.1"
+
+sdp-transform@^2.14.1:
+  version "2.14.1"
+  resolved "https://registry.npmjs.org/sdp-transform/-/sdp-transform-2.14.1.tgz"
+  integrity sha512-RjZyX3nVwJyCuTo5tGPx+PZWkDMCg7oOLpSlhjDdZfwUoNqG1mM8nyj31IGHyaPWXhjbP7cdK3qZ2bmkJ1GzRw==
+
+seamless-scroll-polyfill@^2.3.4:
+  version "2.3.4"
+  resolved "https://registry.yarnpkg.com/seamless-scroll-polyfill/-/seamless-scroll-polyfill-2.3.4.tgz#d2fd1833993a2ad41a3ac319c65dc839bf0746d5"
+  integrity sha512-Biobd4LDoeFODX1bfiru84GveSajzFELFB3ejMZsRR2TpD73W46uEZYAEqSx5RtKpN2umhGWaoSRivs0ZcHp9g==
+
 select-hose@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
+  resolved "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz"
+  integrity sha1-Yl2GWPhlr0Psliv8N2o3NZpJlMo=
+
+selfsigned@^1.10.7:
+  version "1.10.7"
+  resolved "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.7.tgz"
+  integrity sha512-8M3wBCzeWIJnQfl43IKwOmC4H/RAp50S8DF60znzjW5GVqTcSe2vWclt7hmYVPkKPlHWOu5EaWOMZ2Y6W8ZXTA==
+  dependencies:
+    node-forge "0.9.0"
+
+semver-regex@^3.1.1:
+  version "3.1.3"
+  resolved "https://registry.npmjs.org/semver-regex/-/semver-regex-3.1.3.tgz"
+  integrity sha512-Aqi54Mk9uYTjVexLnR67rTyBusmwd04cLkHy9hNvk3+G3nT2Oyg7E0l4XVbOaNwIvQ3hHeYxGcyEy+mKreyBFQ==
+
+"semver@2 || 3 || 4 || 5", semver@^5.3.0, semver@^5.4.1, semver@^5.5.0, semver@^5.6.0:
+  version "5.7.1"
+  resolved "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz"
+  integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
 
-selfsigned@^1.9.1:
-  version "1.10.4"
-  resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-1.10.4.tgz#cdd7eccfca4ed7635d47a08bf2d5d3074092e2cd"
+semver@7.x:
+  version "7.3.5"
+  resolved "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz"
+  integrity sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==
   dependencies:
-    node-forge "0.7.5"
+    lru-cache "^6.0.0"
 
-semver@^5.3.0, semver@^5.5.0:
-  version "5.6.0"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-5.6.0.tgz#7e74256fbaa49c75aa7c7a205cc22799cac80004"
+semver@^6.0.0, semver@^6.3.0:
+  version "6.3.0"
+  resolved "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz"
+  integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
 
-send@0.16.2:
-  version "0.16.2"
-  resolved "https://registry.yarnpkg.com/send/-/send-0.16.2.tgz#6ecca1e0f8c156d141597559848df64730a6bbc1"
+semver@^7.3.2:
+  version "7.3.2"
+  resolved "https://registry.npmjs.org/semver/-/semver-7.3.2.tgz"
+  integrity sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==
+
+send@0.17.1:
+  version "0.17.1"
+  resolved "https://registry.npmjs.org/send/-/send-0.17.1.tgz"
+  integrity sha512-BsVKsiGcQMFwT8UxypobUKyv7irCNRHk1T0G680vk88yf6LBByGcZJOTJCrTP2xVN6yI+XjPJcNuE3V4fT9sAg==
   dependencies:
     debug "2.6.9"
     depd "~1.1.2"
@@ -4710,20 +8645,22 @@ send@0.16.2:
     escape-html "~1.0.3"
     etag "~1.8.1"
     fresh "0.5.2"
-    http-errors "~1.6.2"
-    mime "1.4.1"
-    ms "2.0.0"
+    http-errors "~1.7.2"
+    mime "1.6.0"
+    ms "2.1.1"
     on-finished "~2.3.0"
-    range-parser "~1.2.0"
-    statuses "~1.4.0"
+    range-parser "~1.2.1"
+    statuses "~1.5.0"
 
-serialize-javascript@^1.4.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-1.5.0.tgz#1aa336162c88a890ddad5384baebc93a655161fe"
+serialize-javascript@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-2.1.2.tgz"
+  integrity sha512-rs9OggEUF0V4jUSecXazOYsLfu7OGK2qIn3c7IPBiffz32XniEp/TX9Xmc9LQfK2nQ2QKHvZ2oygKUGU0lG4jQ==
 
-serve-index@^1.7.2:
+serve-index@^1.9.1:
   version "1.9.1"
-  resolved "https://registry.yarnpkg.com/serve-index/-/serve-index-1.9.1.tgz#d3768d69b1e7d82e5ce050fff5b453bea12a9239"
+  resolved "https://registry.npmjs.org/serve-index/-/serve-index-1.9.1.tgz"
+  integrity sha1-03aNabHn2C5c4FD/9bRTvqEqkjk=
   dependencies:
     accepts "~1.3.4"
     batch "0.6.1"
@@ -4733,31 +8670,25 @@ serve-index@^1.7.2:
     mime-types "~2.1.17"
     parseurl "~1.3.2"
 
-serve-static@1.13.2:
-  version "1.13.2"
-  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.13.2.tgz#095e8472fd5b46237db50ce486a43f4b86c6cec1"
+serve-static@1.14.1:
+  version "1.14.1"
+  resolved "https://registry.npmjs.org/serve-static/-/serve-static-1.14.1.tgz"
+  integrity sha512-JMrvUwE54emCYWlTI+hGrGv5I8dEwmco/00EvkzIIsR7MqrHonbD9pO2MOfFnpFntl7ecpZs+3mW+XbQZu9QCg==
   dependencies:
     encodeurl "~1.0.2"
     escape-html "~1.0.3"
-    parseurl "~1.3.2"
-    send "0.16.2"
+    parseurl "~1.3.3"
+    send "0.17.1"
 
-set-blocking@^2.0.0, set-blocking@~2.0.0:
+set-blocking@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
-
-set-value@^0.4.3:
-  version "0.4.3"
-  resolved "https://registry.yarnpkg.com/set-value/-/set-value-0.4.3.tgz#7db08f9d3d22dc7f78e53af3c3bf4666ecdfccf1"
-  dependencies:
-    extend-shallow "^2.0.1"
-    is-extendable "^0.1.1"
-    is-plain-object "^2.0.1"
-    to-object-path "^0.3.0"
+  resolved "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz"
+  integrity sha1-BF+XgtARrppoA93TgrJDkrPYkPc=
 
-set-value@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/set-value/-/set-value-2.0.0.tgz#71ae4a88f0feefbbf52d1ea604f3fb315ebb6274"
+set-value@^2.0.0, set-value@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/set-value/-/set-value-2.0.1.tgz"
+  integrity sha512-JxHc1weCN68wRY0fhCoXpyK55m/XPHafOmK4UWD7m2CI14GMcFypt4w/0+NV5f/ZMby2F6S2wwA7fgynh9gWSw==
   dependencies:
     extend-shallow "^2.0.1"
     is-extendable "^0.1.1"
@@ -4766,59 +8697,115 @@ set-value@^2.0.0:
 
 setimmediate@^1.0.4:
   version "1.0.5"
-  resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
+  resolved "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz"
+  integrity sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=
 
 setprototypeof@1.1.0:
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.1.0.tgz#d0bd85536887b6fe7c0d818cb962d9d91c54e656"
+  resolved "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz"
+  integrity sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==
+
+setprototypeof@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz"
+  integrity sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw==
 
 sha.js@^2.4.0, sha.js@^2.4.8:
   version "2.4.11"
-  resolved "http://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz#37a5cf0b81ecbc6943de109ba2960d1b26584ae7"
+  resolved "https://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz"
+  integrity sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==
   dependencies:
     inherits "^2.0.1"
     safe-buffer "^5.0.1"
 
-shaka-player@2.x:
-  version "2.4.4"
-  resolved "https://registry.yarnpkg.com/shaka-player/-/shaka-player-2.4.4.tgz#bade8ff6b9a4bb649899d10cd4ffd05781dd79ab"
+shaka-player@^4.13.0:
+  version "4.13.6"
+  resolved "https://registry.yarnpkg.com/shaka-player/-/shaka-player-4.13.6.tgz#667eeff7d824e756a5c7055c95ac1652199bba5d"
+  integrity sha512-SNmypJaKH3sfdOk/qCCK2CgbPCaE9y3fhxwX3d8u4OmRyY/D3Th9SQEBLKQBWu/zsIOQPV+tyN4NCG7CCRkYbg==
+  dependencies:
+    eme-encryption-scheme-polyfill "^2.2.1"
 
 shebang-command@^1.2.0:
   version "1.2.0"
-  resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
+  resolved "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz"
+  integrity sha1-RKrGW2lbAzmJaMOfNj/uXer98eo=
   dependencies:
     shebang-regex "^1.0.0"
 
+shebang-command@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz"
+  integrity sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==
+  dependencies:
+    shebang-regex "^3.0.0"
+
 shebang-regex@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3"
+  resolved "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz"
+  integrity sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=
+
+shebang-regex@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz"
+  integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
 
 shellwords@^0.1.1:
   version "0.1.1"
-  resolved "https://registry.yarnpkg.com/shellwords/-/shellwords-0.1.1.tgz#d6b9181c1a48d397324c84871efbcfc73fc0654b"
+  resolved "https://registry.npmjs.org/shellwords/-/shellwords-0.1.1.tgz"
+  integrity sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==
 
 signal-exit@^3.0.0, signal-exit@^3.0.2:
   version "3.0.2"
-  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
+  resolved "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz"
+  integrity sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=
+
+simple-swizzle@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz"
+  integrity sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=
+  dependencies:
+    is-arrayish "^0.3.1"
+
+sirv@^1.0.7:
+  version "1.0.10"
+  resolved "https://registry.npmjs.org/sirv/-/sirv-1.0.10.tgz"
+  integrity sha512-H5EZCoZaggEUQy8ocKsF7WAToGuZhjJlLvM3XOef46CbdIgbNeQ1p32N1PCuCjkVYwrAVOSMacN6CXXgIzuspg==
+  dependencies:
+    "@polka/url" "^1.0.0-next.9"
+    mime "^2.3.1"
+    totalist "^1.0.0"
+
+sisteransi@^1.0.4:
+  version "1.0.5"
+  resolved "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz"
+  integrity sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==
 
 slash@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/slash/-/slash-1.0.0.tgz#c41f2f6c39fc16d1cd17ad4b5d896114ae470d55"
+  resolved "https://registry.npmjs.org/slash/-/slash-1.0.0.tgz"
+  integrity sha1-xB8vbDn8FtHNF61LXYlhFK5HDVU=
+
+slash@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz"
+  integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
 
 slick-carousel@^1.8.1:
   version "1.8.1"
-  resolved "https://registry.yarnpkg.com/slick-carousel/-/slick-carousel-1.8.1.tgz#a4bfb29014887bb66ce528b90bd0cda262cc8f8d"
+  resolved "https://registry.npmjs.org/slick-carousel/-/slick-carousel-1.8.1.tgz"
+  integrity sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA==
 
-"slickgrid@https://github.com/yamass/SlickGrid.git#d8ed005670faae0635ec5abad2f5ed20bf454812":
-  version "2.3.21"
-  resolved "https://github.com/yamass/SlickGrid.git#d8ed005670faae0635ec5abad2f5ed20bf454812"
+slickgrid@yamass/SlickGrid:
+  version "3.0.4"
+  resolved "https://codeload.github.com/yamass/SlickGrid/tar.gz/fe73a2ba35675f5ca360eddc343b35ffc683b644"
   dependencies:
-    jquery ">=1.8.0"
-    jquery-ui ">=1.8.0"
+    jquery ">=3.0.0"
+    sortablejs "^1.15.0"
 
 snapdragon-node@^2.0.1:
   version "2.1.1"
-  resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b"
+  resolved "https://registry.npmjs.org/snapdragon-node/-/snapdragon-node-2.1.1.tgz"
+  integrity sha512-O27l4xaMYt/RSQ5TR3vpWCAB5Kb/czIcqUFOM/C4fYcLnbZUc1PkjTAMjof2pBWaSTwOUd6qUHcFGVGj7aIwnw==
   dependencies:
     define-property "^1.0.0"
     isobject "^3.0.0"
@@ -4826,13 +8813,15 @@ snapdragon-node@^2.0.1:
 
 snapdragon-util@^3.0.1:
   version "3.0.1"
-  resolved "https://registry.yarnpkg.com/snapdragon-util/-/snapdragon-util-3.0.1.tgz#f956479486f2acd79700693f6f7b805e45ab56e2"
+  resolved "https://registry.npmjs.org/snapdragon-util/-/snapdragon-util-3.0.1.tgz"
+  integrity sha512-mbKkMdQKsjX4BAL4bRYTj21edOf8cN7XHdYUJEe+Zn99hVEYcMvKPct1IqNe7+AZPirn8BCDOQBHQZknqmKlZQ==
   dependencies:
     kind-of "^3.2.0"
 
 snapdragon@^0.8.1:
   version "0.8.2"
-  resolved "https://registry.yarnpkg.com/snapdragon/-/snapdragon-0.8.2.tgz#64922e7c565b0e14204ba1aa7d6964278d25182d"
+  resolved "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz"
+  integrity sha512-FtyOnWN/wCHTVXOMwvSv26d+ko5vWlIDD6zoUJ7LW8vh+ZBC8QdljveRP+crNrtBwioEUWy/4dMtbBjA4ioNlg==
   dependencies:
     base "^0.11.1"
     debug "^2.2.0"
@@ -4843,110 +8832,186 @@ snapdragon@^0.8.1:
     source-map-resolve "^0.5.0"
     use "^3.1.0"
 
-sockjs-client@1.1.5:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/sockjs-client/-/sockjs-client-1.1.5.tgz#1bb7c0f7222c40f42adf14f4442cbd1269771a83"
+socket.io-client@^4.5.1:
+  version "4.5.1"
+  resolved "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.5.1.tgz"
+  integrity sha512-e6nLVgiRYatS+AHXnOnGi4ocOpubvOUCGhyWw8v+/FxW8saHkinG6Dfhi9TU0Kt/8mwJIAASxvw6eujQmjdZVA==
   dependencies:
-    debug "^2.6.6"
-    eventsource "0.1.6"
-    faye-websocket "~0.11.0"
-    inherits "^2.0.1"
+    "@socket.io/component-emitter" "~3.1.0"
+    debug "~4.3.2"
+    engine.io-client "~6.2.1"
+    socket.io-parser "~4.2.0"
+
+socket.io-parser@~4.2.0:
+  version "4.2.0"
+  resolved "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.0.tgz"
+  integrity sha512-tLfmEwcEwnlQTxFB7jibL/q2+q8dlVQzj4JdRLJ/W/G1+Fu9VSxCx1Lo+n1HvXxKnM//dUuD0xgiA7tQf57Vng==
+  dependencies:
+    "@socket.io/component-emitter" "~3.1.0"
+    debug "~4.3.1"
+
+sockjs-client@1.4.0:
+  version "1.4.0"
+  resolved "https://registry.npmjs.org/sockjs-client/-/sockjs-client-1.4.0.tgz"
+  integrity sha512-5zaLyO8/nri5cua0VtOrFXBPK1jbL4+1cebT/mmKA1E1ZXOvJrII75bPu0l0k843G/+iAbhEqzyKr0w/eCCj7g==
+  dependencies:
+    debug "^3.2.5"
+    eventsource "^1.0.7"
+    faye-websocket "~0.11.1"
+    inherits "^2.0.3"
     json3 "^3.3.2"
-    url-parse "^1.1.8"
+    url-parse "^1.4.3"
 
 sockjs@0.3.19:
   version "0.3.19"
-  resolved "https://registry.yarnpkg.com/sockjs/-/sockjs-0.3.19.tgz#d976bbe800af7bd20ae08598d582393508993c0d"
+  resolved "https://registry.npmjs.org/sockjs/-/sockjs-0.3.19.tgz"
+  integrity sha512-V48klKZl8T6MzatbLlzzRNhMepEys9Y4oGFpypBFFn1gLI/QQ9HtLLyWJNbPlwGLelOVOEijUbTTJeLLI59jLw==
   dependencies:
     faye-websocket "^0.10.0"
     uuid "^3.0.1"
 
 sort-keys@^1.0.0:
   version "1.1.2"
-  resolved "https://registry.yarnpkg.com/sort-keys/-/sort-keys-1.1.2.tgz#441b6d4d346798f1b4e49e8920adfba0e543f9ad"
+  resolved "https://registry.npmjs.org/sort-keys/-/sort-keys-1.1.2.tgz"
+  integrity sha1-RBttTTRnmPG05J6JIK37oOVD+a0=
   dependencies:
     is-plain-obj "^1.0.0"
 
+sortablejs@^1.15.0:
+  version "1.15.0"
+  resolved "https://registry.yarnpkg.com/sortablejs/-/sortablejs-1.15.0.tgz#53230b8aa3502bb77a29e2005808ffdb4a5f7e2a"
+  integrity sha512-bv9qgVMjUMf89wAvM6AxVvS/4MX3sPeN0+agqShejLU5z5GX4C75ow1O2e5k4L6XItUyAK3gH6AxSbXrOM5e8w==
+
 source-list-map@^2.0.0:
   version "2.0.1"
-  resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
+  resolved "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz"
+  integrity sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==
 
 source-map-loader@^0.2.3:
   version "0.2.4"
-  resolved "https://registry.yarnpkg.com/source-map-loader/-/source-map-loader-0.2.4.tgz#c18b0dc6e23bf66f6792437557c569a11e072271"
+  resolved "https://registry.npmjs.org/source-map-loader/-/source-map-loader-0.2.4.tgz"
+  integrity sha512-OU6UJUty+i2JDpTItnizPrlpOIBLmQbWMuBg9q5bVtnHACqw1tn9nNwqJLbv0/00JjnJb/Ee5g5WS5vrRv7zIQ==
   dependencies:
     async "^2.5.0"
     loader-utils "^1.1.0"
 
 source-map-resolve@^0.5.0:
-  version "0.5.2"
-  resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.2.tgz#72e2cc34095543e43b2c62b2c4c10d4a9054f259"
+  version "0.5.3"
+  resolved "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.3.tgz"
+  integrity sha512-Htz+RnsXWk5+P2slx5Jh3Q66vhQj1Cllm0zvnaY98+NFx+Dv2CF/f5O/t8x+KaNdrdIAsruNzoh/KpialbqAnw==
   dependencies:
-    atob "^2.1.1"
+    atob "^2.1.2"
     decode-uri-component "^0.2.0"
     resolve-url "^0.2.1"
     source-map-url "^0.4.0"
     urix "^0.1.0"
 
-source-map-support@^0.5.3:
-  version "0.5.9"
-  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.9.tgz#41bc953b2534267ea2d605bccfa7bfa3111ced5f"
+source-map-support@^0.5.3, source-map-support@~0.5.12:
+  version "0.5.16"
+  resolved "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.16.tgz"
+  integrity sha512-efyLRJDr68D9hBBNIPWFjhpFzURh+KJykQwvMyW5UiZzYwoF6l4YMMDIJJEyFWxWCqfyxLzz6tSfUFR+kXXsVQ==
+  dependencies:
+    buffer-from "^1.0.0"
+    source-map "^0.6.0"
+
+source-map-support@^0.5.6:
+  version "0.5.19"
+  resolved "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz"
+  integrity sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==
   dependencies:
     buffer-from "^1.0.0"
     source-map "^0.6.0"
 
 source-map-url@^0.4.0:
   version "0.4.0"
-  resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.0.tgz#3e935d7ddd73631b97659956d55128e87b5084a3"
+  resolved "https://registry.npmjs.org/source-map-url/-/source-map-url-0.4.0.tgz"
+  integrity sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=
 
 source-map@0.5.0:
   version "0.5.0"
-  resolved "http://registry.npmjs.org/source-map/-/source-map-0.5.0.tgz#0fe96503ac86a5adb5de63f4e412ae4872cdbe86"
+  resolved "https://registry.npmjs.org/source-map/-/source-map-0.5.0.tgz"
+  integrity sha1-D+llA6yGpa213mP05BKuSHLNvoY=
 
-source-map@^0.5.3, source-map@^0.5.6:
+source-map@^0.5.0, source-map@^0.5.6:
   version "0.5.7"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
+  resolved "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz"
+  integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
 
 source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, source-map@~0.6.1:
   version "0.6.1"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
+  resolved "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz"
+  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
 
-spdy-transport@^2.0.18:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/spdy-transport/-/spdy-transport-2.1.0.tgz#4bbb15aaffed0beefdd56ad61dbdc8ba3e2cb7a1"
+source-map@^0.7.3:
+  version "0.7.3"
+  resolved "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz"
+  integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
+
+spdx-correct@^3.0.0:
+  version "3.1.1"
+  resolved "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.1.tgz"
+  integrity sha512-cOYcUWwhCuHCXi49RhFRCyJEK3iPj1Ziz9DpViV3tbZOwXD49QzIN3MpOLJNxh2qwq2lJJZaKMVw9qNi4jTC0w==
+  dependencies:
+    spdx-expression-parse "^3.0.0"
+    spdx-license-ids "^3.0.0"
+
+spdx-exceptions@^2.1.0:
+  version "2.3.0"
+  resolved "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz"
+  integrity sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==
+
+spdx-expression-parse@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz"
+  integrity sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==
+  dependencies:
+    spdx-exceptions "^2.1.0"
+    spdx-license-ids "^3.0.0"
+
+spdx-license-ids@^3.0.0:
+  version "3.0.6"
+  resolved "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.6.tgz"
+  integrity sha512-+orQK83kyMva3WyPf59k1+Y525csj5JejicWut55zeTWANuN17qSiSLUXWtzHeNWORSvT7GLDJ/E/XiIWoXBTw==
+
+spdy-transport@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/spdy-transport/-/spdy-transport-3.0.0.tgz"
+  integrity sha512-hsLVFE5SjA6TCisWeJXFKniGGOpBgMLmerfO2aCyCU5s7nJ/rpAepqmFifv/GCbSbueEeAJJnmSQ2rKC/g8Fcw==
   dependencies:
-    debug "^2.6.8"
-    detect-node "^2.0.3"
+    debug "^4.1.0"
+    detect-node "^2.0.4"
     hpack.js "^2.1.6"
-    obuf "^1.1.1"
-    readable-stream "^2.2.9"
-    safe-buffer "^5.0.1"
-    wbuf "^1.7.2"
+    obuf "^1.1.2"
+    readable-stream "^3.0.6"
+    wbuf "^1.7.3"
 
-spdy@^3.4.1:
-  version "3.4.7"
-  resolved "https://registry.yarnpkg.com/spdy/-/spdy-3.4.7.tgz#42ff41ece5cc0f99a3a6c28aabb73f5c3b03acbc"
+spdy@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.npmjs.org/spdy/-/spdy-4.0.1.tgz"
+  integrity sha512-HeZS3PBdMA+sZSu0qwpCxl3DeALD5ASx8pAX0jZdKXSpPWbQ6SYGnlg3BBmYLx5LtiZrmkAZfErCm2oECBcioA==
   dependencies:
-    debug "^2.6.8"
-    handle-thing "^1.2.5"
+    debug "^4.1.0"
+    handle-thing "^2.0.0"
     http-deceiver "^1.2.7"
-    safe-buffer "^5.0.1"
     select-hose "^2.0.0"
-    spdy-transport "^2.0.18"
+    spdy-transport "^3.0.0"
 
 split-string@^3.0.1, split-string@^3.0.2:
   version "3.1.0"
-  resolved "https://registry.yarnpkg.com/split-string/-/split-string-3.1.0.tgz#7cb09dda3a86585705c64b39a6466038682e8fe2"
+  resolved "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz"
+  integrity sha512-NzNVhJDYpwceVVii8/Hu6DKfD2G+NrQHlS/V/qgv763EYudVwEcMQNxd2lh+0VrUByXN/oJkl5grOhYWvQUYiw==
   dependencies:
     extend-shallow "^3.0.0"
 
 sprintf-js@~1.0.2:
   version "1.0.3"
-  resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
+  resolved "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz"
+  integrity sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=
 
 sshpk@^1.7.0:
-  version "1.15.1"
-  resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.15.1.tgz#b79a089a732e346c6e0714830f36285cd38191a2"
+  version "1.16.1"
+  resolved "https://registry.npmjs.org/sshpk/-/sshpk-1.16.1.tgz"
+  integrity sha512-HXXqVUq7+pcKeLqqZj6mHFUMvXtOJt1uoUx09pFW6011inTMxqI8BA8PM95myrIyyKwdnzjdFjLiE6KBPVtJIg==
   dependencies:
     asn1 "~0.2.3"
     assert-plus "^1.0.0"
@@ -4958,48 +9023,76 @@ sshpk@^1.7.0:
     safer-buffer "^2.0.2"
     tweetnacl "~0.14.0"
 
-ssri@^5.2.4:
-  version "5.3.0"
-  resolved "https://registry.yarnpkg.com/ssri/-/ssri-5.3.0.tgz#ba3872c9c6d33a0704a7d71ff045e5ec48999d06"
+ssri@^6.0.1:
+  version "6.0.2"
+  resolved "https://registry.npmjs.org/ssri/-/ssri-6.0.2.tgz"
+  integrity sha512-cepbSq/neFK7xB6A50KHN0xHDotYzq58wWCa5LeWqnPrHG8GzfEjO/4O8kpmcGW+oaxkvhEJCWgbgNk4/ZV93Q==
+  dependencies:
+    figgy-pudding "^3.5.1"
+
+ssri@^7.0.0:
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/ssri/-/ssri-7.1.0.tgz"
+  integrity sha512-77/WrDZUWocK0mvA5NTRQyveUf+wsrIc6vyrxpS8tVvYBcX215QbafrJR3KtkpskIzoFLqqNuuYQvxaMjXJ/0g==
   dependencies:
-    safe-buffer "^5.1.1"
+    figgy-pudding "^3.5.1"
+    minipass "^3.1.1"
 
-stackframe@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/stackframe/-/stackframe-1.0.4.tgz#357b24a992f9427cba6b545d96a14ed2cbca187b"
+stable@^0.1.8:
+  version "0.1.8"
+  resolved "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz"
+  integrity sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==
+
+stack-utils@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.npmjs.org/stack-utils/-/stack-utils-2.0.2.tgz"
+  integrity sha512-0H7QK2ECz3fyZMzQ8rH0j2ykpfbnd20BFtfg/SqVC2+sCTtcw0aDTGB7dk+de4U4uUeuz6nOtJcrkFFLG1B0Rg==
+  dependencies:
+    escape-string-regexp "^2.0.0"
+
+stackframe@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/stackframe/-/stackframe-1.1.1.tgz"
+  integrity sha512-0PlYhdKh6AfFxRyK/v+6/k+/mMfyiEBbTM5L94D0ZytQnJ166wuwoTYLHFWGbs2dpA8Rgq763KGWmN1EQEYHRQ==
 
 static-extend@^0.1.1:
   version "0.1.2"
-  resolved "https://registry.yarnpkg.com/static-extend/-/static-extend-0.1.2.tgz#60809c39cbff55337226fd5e0b520f341f1fb5c6"
+  resolved "https://registry.npmjs.org/static-extend/-/static-extend-0.1.2.tgz"
+  integrity sha1-YICcOcv/VTNyJv1eC1IPNB8ftcY=
   dependencies:
     define-property "^0.2.5"
     object-copy "^0.1.0"
 
-"statuses@>= 1.4.0 < 2":
+"statuses@>= 1.4.0 < 2", "statuses@>= 1.5.0 < 2", statuses@~1.5.0:
   version "1.5.0"
-  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
+  resolved "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz"
+  integrity sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=
 
-statuses@~1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.4.0.tgz#bb73d446da2796106efcc1b601a253d6c46bd087"
+stealthy-require@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/stealthy-require/-/stealthy-require-1.1.1.tgz"
+  integrity sha1-NbCYdbT/SfJqd35QmzCQoyJr8ks=
 
 stream-browserify@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-2.0.1.tgz#66266ee5f9bdb9940a4e4514cafb43bb71e5c9db"
+  version "2.0.2"
+  resolved "https://registry.npmjs.org/stream-browserify/-/stream-browserify-2.0.2.tgz"
+  integrity sha512-nX6hmklHs/gr2FuxYDltq8fJA1GDlxKQCz8O/IM4atRqBH8OORmBNgfvW5gG10GT/qQ9u0CzIvr2X5Pkt6ntqg==
   dependencies:
     inherits "~2.0.1"
     readable-stream "^2.0.2"
 
 stream-each@^1.1.0:
   version "1.2.3"
-  resolved "https://registry.yarnpkg.com/stream-each/-/stream-each-1.2.3.tgz#ebe27a0c389b04fbcc233642952e10731afa9bae"
+  resolved "https://registry.npmjs.org/stream-each/-/stream-each-1.2.3.tgz"
+  integrity sha512-vlMC2f8I2u/bZGqkdfLQW/13Zihpej/7PmSiMQsbYddxuTsJp8vRe2x2FvVExZg7FaOds43ROAuFJwPR4MTZLw==
   dependencies:
     end-of-stream "^1.1.0"
     stream-shift "^1.0.0"
 
 stream-http@^2.7.2:
   version "2.8.3"
-  resolved "https://registry.yarnpkg.com/stream-http/-/stream-http-2.8.3.tgz#b2d242469288a5a27ec4fe8933acf623de6514fc"
+  resolved "https://registry.npmjs.org/stream-http/-/stream-http-2.8.3.tgz"
+  integrity sha512-+TSkfINHDo4J+ZobQLWiMouQYB+UVYFttRA94FpEzzJ7ZdqcL4uUUQ7WkdkI4DSozGmgBUE/a47L+38PenXhUw==
   dependencies:
     builtin-status-codes "^3.0.0"
     inherits "^2.0.1"
@@ -5008,198 +9101,462 @@ stream-http@^2.7.2:
     xtend "^4.0.0"
 
 stream-shift@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.0.tgz#d5c752825e5367e786f78e18e445ea223a155952"
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/stream-shift/-/stream-shift-1.0.1.tgz"
+  integrity sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ==
 
 strict-uri-encode@^1.0.0:
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"
+  resolved "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz"
+  integrity sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=
+
+string-length@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.npmjs.org/string-length/-/string-length-4.0.1.tgz"
+  integrity sha512-PKyXUd0LK0ePjSOnWn34V2uD6acUWev9uy0Ft05k0E8xRW+SKcA0F7eMr7h5xlzfn+4O3N+55rduYyet3Jk+jw==
+  dependencies:
+    char-regex "^1.0.2"
+    strip-ansi "^6.0.0"
 
 string-width@^1.0.1:
   version "1.0.2"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3"
+  resolved "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz"
+  integrity sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=
   dependencies:
     code-point-at "^1.0.0"
     is-fullwidth-code-point "^1.0.0"
     strip-ansi "^3.0.0"
 
-"string-width@^1.0.2 || 2", string-width@^2.0.0, string-width@^2.1.1:
+string-width@^2.0.0, string-width@^2.1.1:
   version "2.1.1"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-2.1.1.tgz#ab93f27a8dc13d28cac815c462143a6d9012ae9e"
+  resolved "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz"
+  integrity sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==
   dependencies:
     is-fullwidth-code-point "^2.0.0"
     strip-ansi "^4.0.0"
 
-string_decoder@^1.0.0, string_decoder@~1.1.1:
+string-width@^3.0.0, string-width@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz"
+  integrity sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==
+  dependencies:
+    emoji-regex "^7.0.1"
+    is-fullwidth-code-point "^2.0.0"
+    strip-ansi "^5.1.0"
+
+string-width@^4.1.0, string-width@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.0.tgz"
+  integrity sha512-zUz5JD+tgqtuDjMhwIg5uFVV3dtqZ9yQJlZVfq4I01/K5Paj5UHj7VyrQOJvzawSVlKpObApbfD0Ed6yJc+1eg==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.0"
+
+string.prototype.trimleft@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.npmjs.org/string.prototype.trimleft/-/string.prototype.trimleft-2.1.1.tgz"
+  integrity sha512-iu2AGd3PuP5Rp7x2kEZCrB2Nf41ehzh+goo8TV7z8/XDBbsvc6HQIlUl9RjkZ4oyrW1XM5UwlGl1oVEaDjg6Ag==
+  dependencies:
+    define-properties "^1.1.3"
+    function-bind "^1.1.1"
+
+string.prototype.trimright@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.npmjs.org/string.prototype.trimright/-/string.prototype.trimright-2.1.1.tgz"
+  integrity sha512-qFvWL3/+QIgZXVmJBfpHmxLB7xsUXz6HsUmP8+5dRaC3Q7oKUv9Vo6aMCRZC1smrtyECFsIT30PqBJ1gTjAs+g==
+  dependencies:
+    define-properties "^1.1.3"
+    function-bind "^1.1.1"
+
+string_decoder@^1.0.0, string_decoder@^1.1.1:
+  version "1.3.0"
+  resolved "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz"
+  integrity sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==
+  dependencies:
+    safe-buffer "~5.2.0"
+
+string_decoder@~1.1.1:
   version "1.1.1"
-  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
+  resolved "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz"
+  integrity sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==
   dependencies:
     safe-buffer "~5.1.0"
 
-string_decoder@~0.10.x:
-  version "0.10.31"
-  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94"
+strip-ansi@^3.0.0, strip-ansi@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz"
+  integrity sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=
+  dependencies:
+    ansi-regex "^2.0.0"
+
+strip-ansi@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz"
+  integrity sha1-qEeQIusaw2iocTibY1JixQXuNo8=
+  dependencies:
+    ansi-regex "^3.0.0"
+
+strip-ansi@^5.0.0, strip-ansi@^5.1.0, strip-ansi@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz"
+  integrity sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==
+  dependencies:
+    ansi-regex "^4.1.0"
 
-strip-ansi@^3.0.0, strip-ansi@^3.0.1:
-  version "3.0.1"
-  resolved "http://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz#6a385fb8853d952d5ff05d0e8aaf94278dc63dcf"
+strip-ansi@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz"
+  integrity sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==
   dependencies:
-    ansi-regex "^2.0.0"
+    ansi-regex "^5.0.0"
 
-strip-ansi@^4.0.0:
+strip-bom@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-4.0.0.tgz#a8479022eb1ac368a871389b635262c505ee368f"
-  dependencies:
-    ansi-regex "^3.0.0"
+  resolved "https://registry.npmjs.org/strip-bom/-/strip-bom-4.0.0.tgz"
+  integrity sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==
 
 strip-eof@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/strip-eof/-/strip-eof-1.0.0.tgz#bb43ff5598a6eb05d89b59fcd129c983313606bf"
+  resolved "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz"
+  integrity sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=
 
-strip-json-comments@~2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
+strip-final-newline@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz"
+  integrity sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==
 
-style-loader@^0.20.2:
-  version "0.20.3"
-  resolved "http://registry.npmjs.org/style-loader/-/style-loader-0.20.3.tgz#ebef06b89dec491bcb1fdb3452e913a6fd1c10c4"
+style-loader@^0.23.1:
+  version "0.23.1"
+  resolved "https://registry.npmjs.org/style-loader/-/style-loader-0.23.1.tgz"
+  integrity sha512-XK+uv9kWwhZMZ1y7mysB+zoihsEj4wneFWAS5qoiLwzW0WzSqMrrsIy+a3zkQJq0ipFtBpX5W3MqyRIBF/WFGg==
   dependencies:
     loader-utils "^1.1.0"
-    schema-utils "^0.4.5"
+    schema-utils "^1.0.0"
 
-supports-color@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
+stylehacks@^4.0.0:
+  version "4.0.3"
+  resolved "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz"
+  integrity sha512-7GlLk9JwlElY4Y6a/rmbH2MhVlTyVmiJd1PfTCqFaIBEGMYNsrO/v3SeGTdhBThLg4Z+NbOk/qFMwCa+J+3p/g==
+  dependencies:
+    browserslist "^4.0.0"
+    postcss "^7.0.0"
+    postcss-selector-parser "^3.0.0"
 
-supports-color@^3.2.3:
-  version "3.2.3"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.2.3.tgz#65ac0504b3954171d8a64946b2ae3cbb8a5f54f6"
+supercluster@^8.0.1:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/supercluster/-/supercluster-8.0.1.tgz#9946ba123538e9e9ab15de472531f604e7372df5"
+  integrity sha512-IiOea5kJ9iqzD2t7QJq/cREyLHTtSmUT6gQsweojg9WH2sYJqZK9SswTu6jrscO6D1G5v5vYZ9ru/eq85lXeZQ==
+  dependencies:
+    kdbush "^4.0.2"
+
+supports-color@6.1.0, supports-color@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz"
+  integrity sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==
   dependencies:
-    has-flag "^1.0.0"
+    has-flag "^3.0.0"
+
+supports-color@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz"
+  integrity sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=
 
-supports-color@^5.1.0, supports-color@^5.3.0, supports-color@^5.4.0, supports-color@^5.5.0:
+supports-color@^5.3.0:
   version "5.5.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
+  resolved "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz"
+  integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
   dependencies:
     has-flag "^3.0.0"
 
-svgo@^0.7.0:
-  version "0.7.2"
-  resolved "https://registry.yarnpkg.com/svgo/-/svgo-0.7.2.tgz#9f5772413952135c6fefbf40afe6a4faa88b4bb5"
+supports-color@^7.0.0:
+  version "7.2.0"
+  resolved "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz"
+  integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==
+  dependencies:
+    has-flag "^4.0.0"
+
+supports-color@^7.1.0:
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz"
+  integrity sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==
+  dependencies:
+    has-flag "^4.0.0"
+
+supports-color@^9.2.2:
+  version "9.2.2"
+  resolved "https://registry.npmjs.org/supports-color/-/supports-color-9.2.2.tgz"
+  integrity sha512-XC6g/Kgux+rJXmwokjm9ECpD6k/smUoS5LKlUCcsYr4IY3rW0XyAympon2RmxGrlnZURMpg5T18gWDP9CsHXFA==
+
+supports-hyperlinks@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/supports-hyperlinks/-/supports-hyperlinks-2.1.0.tgz"
+  integrity sha512-zoE5/e+dnEijk6ASB6/qrK+oYdm2do1hjoLWrqUC/8WEIW1gbxFcKuBof7sW8ArN6e+AYvsE8HBGiVRWL/F5CA==
+  dependencies:
+    has-flag "^4.0.0"
+    supports-color "^7.0.0"
+
+svgo@^1.0.0:
+  version "1.3.2"
+  resolved "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz"
+  integrity sha512-yhy/sQYxR5BkC98CY7o31VGsg014AKLEPxdfhora76l36hD9Rdy5NZA/Ocn6yayNPgSamYdtX2rFJdcv07AYVw==
   dependencies:
-    coa "~1.0.1"
-    colors "~1.1.2"
-    csso "~2.3.1"
-    js-yaml "~3.7.0"
+    chalk "^2.4.1"
+    coa "^2.0.2"
+    css-select "^2.0.0"
+    css-select-base-adapter "^0.1.1"
+    css-tree "1.0.0-alpha.37"
+    csso "^4.0.2"
+    js-yaml "^3.13.1"
     mkdirp "~0.5.1"
-    sax "~1.2.1"
-    whet.extend "~0.9.9"
+    object.values "^1.1.0"
+    sax "~1.2.4"
+    stable "^0.1.8"
+    unquote "~1.1.1"
+    util.promisify "~1.0.0"
+
+symbol-tree@^3.2.4:
+  version "3.2.4"
+  resolved "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz"
+  integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==
+
+sync-pom-version-to-package@^1.6.1:
+  version "1.6.1"
+  resolved "https://registry.npmjs.org/sync-pom-version-to-package/-/sync-pom-version-to-package-1.6.1.tgz"
+  integrity sha512-coZldGGzWKwAnQ30Uc5WKWPEF1iA5IsMfaH9BJfGvOn3xv/sMG7uyCwCXn4R8xBcHECwpjuqopJuFj0CTLvw1w==
+  dependencies:
+    argparse "^2.0.1"
+    semver-regex "^3.1.1"
+    xml-parser "^1.2.1"
 
-tapable@^1.0.0, tapable@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.0.tgz#0d076a172e3d9ba088fd2272b2668fb8d194b78c"
+tapable@^1.0.0, tapable@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz"
+  integrity sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==
 
-tar@^4:
-  version "4.4.6"
-  resolved "https://registry.yarnpkg.com/tar/-/tar-4.4.6.tgz#63110f09c00b4e60ac8bcfe1bf3c8660235fbc9b"
+terminal-link@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.npmjs.org/terminal-link/-/terminal-link-2.1.1.tgz"
+  integrity sha512-un0FmiRUQNr5PJqy9kP7c40F5BOfpGlYTrxonDChEZB7pzZxRNp/bt+ymiy9/npwXya9KH99nJ/GXFIiUkYGFQ==
   dependencies:
-    chownr "^1.0.1"
-    fs-minipass "^1.2.5"
-    minipass "^2.3.3"
-    minizlib "^1.1.0"
-    mkdirp "^0.5.0"
-    safe-buffer "^5.1.2"
-    yallist "^3.0.2"
+    ansi-escapes "^4.2.1"
+    supports-hyperlinks "^2.0.0"
+
+terra-draw-maplibre-gl-adapter@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/terra-draw-maplibre-gl-adapter/-/terra-draw-maplibre-gl-adapter-1.1.1.tgz#eb42cdb62a362fb207c71e2d2e6f697a1a441576"
+  integrity sha512-PkrhUO2sVuc8dviOzzfKyEAuToEKcy1UWOQ/EtdNXx+dPAw8WuCXOhXJpf+M1yi02z+v6mRMq/7h8sRs2fBeng==
+
+terra-draw@^1.10.0:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/terra-draw/-/terra-draw-1.10.0.tgz#5c6abc6fd21a2d998f94d1e9736100e46188d742"
+  integrity sha512-7lM6AmNxKWsrls/SZ+qoVTqD74NBrwq0a4fMBvKcvHmteJ72FUluujn72s4nkASbeS4X199Hn+7KI9uiBiKlVQ==
+
+terser-webpack-plugin@^1.3.0, terser-webpack-plugin@^1.4.3:
+  version "1.4.3"
+  resolved "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.3.tgz"
+  integrity sha512-QMxecFz/gHQwteWwSo5nTc6UaICqN1bMedC5sMtUc7y3Ha3Q8y6ZO0iCR8pq4RJC8Hjf0FEPEHZqcMB/+DFCrA==
+  dependencies:
+    cacache "^12.0.2"
+    find-cache-dir "^2.1.0"
+    is-wsl "^1.1.0"
+    schema-utils "^1.0.0"
+    serialize-javascript "^2.1.2"
+    source-map "^0.6.1"
+    terser "^4.1.2"
+    webpack-sources "^1.4.0"
+    worker-farm "^1.7.0"
+
+terser@^4.1.2:
+  version "4.6.3"
+  resolved "https://registry.npmjs.org/terser/-/terser-4.6.3.tgz"
+  integrity sha512-Lw+ieAXmY69d09IIc/yqeBqXpEQIpDGZqT34ui1QWXIUpR2RjbqEkT8X7Lgex19hslSqcWM5iMN2kM11eMsESQ==
+  dependencies:
+    commander "^2.20.0"
+    source-map "~0.6.1"
+    source-map-support "~0.5.12"
+
+test-exclude@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.npmjs.org/test-exclude/-/test-exclude-6.0.0.tgz"
+  integrity sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==
+  dependencies:
+    "@istanbuljs/schema" "^0.1.2"
+    glob "^7.1.4"
+    minimatch "^3.0.4"
+
+throat@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.npmjs.org/throat/-/throat-5.0.0.tgz"
+  integrity sha512-fcwX4mndzpLQKBS1DVYhGAcYaYt7vsHNIvQV+WXMvnow5cgjPphq5CaayLaGsjRdSCKZFNGt7/GYAuXaNOiYCA==
 
 through2@^2.0.0:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.3.tgz#0004569b37c7c74ba39c43f3ced78d1ad94140be"
+  version "2.0.5"
+  resolved "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz"
+  integrity sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==
   dependencies:
-    readable-stream "^2.1.5"
+    readable-stream "~2.3.6"
     xtend "~4.0.1"
 
 thunky@^1.0.2:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/thunky/-/thunky-1.0.3.tgz#f5df732453407b09191dae73e2a8cc73f381a826"
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz"
+  integrity sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==
 
 timers-browserify@^2.0.4:
-  version "2.0.10"
-  resolved "https://registry.yarnpkg.com/timers-browserify/-/timers-browserify-2.0.10.tgz#1d28e3d2aadf1d5a5996c4e9f95601cd053480ae"
+  version "2.0.11"
+  resolved "https://registry.npmjs.org/timers-browserify/-/timers-browserify-2.0.11.tgz"
+  integrity sha512-60aV6sgJ5YEbzUdn9c8kYGIqOubPoUdqQCul3SBAsRCZ40s6Y5cMcrW4dt3/k/EsbLVJNl9n6Vz3fTc+k2GeKQ==
   dependencies:
     setimmediate "^1.0.4"
 
-tiny-slider@^2.8.8:
-  version "2.8.8"
-  resolved "https://registry.yarnpkg.com/tiny-slider/-/tiny-slider-2.8.8.tgz#a9cc4a8cc18e081022110583c0931164257910f3"
+timsort@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz"
+  integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
+
+tinymce-i18n@^18.12.25:
+  version "18.12.25"
+  resolved "https://registry.npmjs.org/tinymce-i18n/-/tinymce-i18n-18.12.25.tgz"
+  integrity sha512-+VsZcwxW94yGov63ZNM0K4cMAqMnY7yl+rv09tU4efRj+V2CUj4QeejptQtjxjRdEdCVQvB9HjDaz4UzHaEQlw==
 
-tinymce-i18n@^18.5.8:
-  version "18.10.7"
-  resolved "https://registry.yarnpkg.com/tinymce-i18n/-/tinymce-i18n-18.10.7.tgz#954336cda6a8a0da83c3d7cef44a136ea4b7f271"
+tinymce@5.10.5:
+  version "5.10.5"
+  resolved "https://registry.yarnpkg.com/tinymce/-/tinymce-5.10.5.tgz#02aef6a67e915f1559e51fa8fb007270d9666778"
+  integrity sha512-nFKtLhmoRtExBxUfv06JlkbQWux5D+d115vxSRAqUmccZdrtpFvOIYwZmikvulLdM9pfEpvO0B+RQ2qFV/+R7w==
+
+tinyqueue@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/tinyqueue/-/tinyqueue-3.0.0.tgz#101ea761ccc81f979e29200929e78f1556e3661e"
+  integrity sha512-gRa9gwYU3ECmQYv3lslts5hxuIa90veaEcxDYuu3QGOIAEM2mOZkVHp48ANJuu1CURtRdHKUBY5Lm1tHV+sD4g==
 
-tinymce@^4.7.13:
-  version "4.8.3"
-  resolved "https://registry.yarnpkg.com/tinymce/-/tinymce-4.8.3.tgz#fdfe92121a5431fc6e2f295346f781cd200db3b9"
+tmpl@1.0.x:
+  version "1.0.4"
+  resolved "https://registry.npmjs.org/tmpl/-/tmpl-1.0.4.tgz"
+  integrity sha1-I2QN17QtAEM5ERQIIOXPRA5SHdE=
 
 to-arraybuffer@^1.0.0:
   version "1.0.1"
-  resolved "https://registry.yarnpkg.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43"
+  resolved "https://registry.npmjs.org/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz"
+  integrity sha1-fSKbH8xjfkZsoIEYCDanqr/4P0M=
+
+to-fast-properties@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz"
+  integrity sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=
 
 to-object-path@^0.3.0:
   version "0.3.0"
-  resolved "https://registry.yarnpkg.com/to-object-path/-/to-object-path-0.3.0.tgz#297588b7b0e7e0ac08e04e672f85c1f4999e17af"
+  resolved "https://registry.npmjs.org/to-object-path/-/to-object-path-0.3.0.tgz"
+  integrity sha1-KXWIt7Dn4KwI4E5nL4XB9JmeF68=
   dependencies:
     kind-of "^3.0.2"
 
 to-regex-range@^2.1.0:
   version "2.1.1"
-  resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-2.1.1.tgz#7c80c17b9dfebe599e27367e0d4dd5590141db38"
+  resolved "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz"
+  integrity sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=
   dependencies:
     is-number "^3.0.0"
     repeat-string "^1.6.1"
 
+to-regex-range@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz"
+  integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
+  dependencies:
+    is-number "^7.0.0"
+
 to-regex@^3.0.1, to-regex@^3.0.2:
   version "3.0.2"
-  resolved "https://registry.yarnpkg.com/to-regex/-/to-regex-3.0.2.tgz#13cfdd9b336552f30b51f33a8ae1b42a7a7599ce"
+  resolved "https://registry.npmjs.org/to-regex/-/to-regex-3.0.2.tgz"
+  integrity sha512-FWtleNAtZ/Ki2qtqej2CXTOayOH9bHDQF+Q48VpWyDXjbYxA4Yz8iDB31zXOBUlOHHKidDbqGVrTUvQMPmBGBw==
   dependencies:
     define-property "^2.0.2"
     extend-shallow "^3.0.2"
     regex-not "^1.0.2"
     safe-regex "^1.1.0"
 
-tooltip.js@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/tooltip.js/-/tooltip.js-1.3.0.tgz#c56115ce9e4b549edda0b306a3e439a17262181d"
-  dependencies:
-    popper.js "^1.0.2"
+toidentifier@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz"
+  integrity sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==
 
 toposort@^1.0.0:
   version "1.0.7"
-  resolved "https://registry.yarnpkg.com/toposort/-/toposort-1.0.7.tgz#2e68442d9f64ec720b8cc89e6443ac6caa950029"
+  resolved "https://registry.npmjs.org/toposort/-/toposort-1.0.7.tgz"
+  integrity sha1-LmhELZ9k7HILjMieZEOsbKqVACk=
+
+totalist@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/totalist/-/totalist-1.1.0.tgz"
+  integrity sha512-gduQwd1rOdDMGxFG1gEvhV88Oirdo2p+KjoYFU7k2g+i7n6AFFbDQ5kMPUsW0pNbfQsB/cwXvT1i4Bue0s9g5g==
 
-tough-cookie@~2.4.3:
-  version "2.4.3"
-  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.4.3.tgz#53f36da3f47783b0925afa06ff9f3b165280f781"
+tough-cookie@^2.3.3, tough-cookie@~2.5.0:
+  version "2.5.0"
+  resolved "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz"
+  integrity sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==
   dependencies:
-    psl "^1.1.24"
-    punycode "^1.4.1"
+    psl "^1.1.28"
+    punycode "^2.1.1"
 
-trivial-components@0.3.23:
-  version "0.3.23"
-  resolved "https://registry.yarnpkg.com/trivial-components/-/trivial-components-0.3.23.tgz#39dbedf88f53b249726883dcbb63b1500693b28b"
+tough-cookie@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/tough-cookie/-/tough-cookie-3.0.1.tgz"
+  integrity sha512-yQyJ0u4pZsv9D4clxO69OEjLWYw+jbgspjTue4lTQZLfV0c5l1VmK2y1JK8E9ahdpltPOaAThPcp5nKPUgSnsg==
   dependencies:
-    jquery "^3.2.1"
-    levenshtein "^1.0.5"
-    moment "^2.22.0"
-    moment-timezone "^0.5.14"
-    place-to "^0.1.2"
+    ip-regex "^2.1.0"
+    psl "^1.1.28"
+    punycode "^2.1.1"
 
-tslib@^1.8.0, tslib@^1.8.1, tslib@^1.9.0:
-  version "1.9.3"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.3.tgz#d7e4dd79245d85428c4d7e4822a79917954ca286"
+tr46@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.npmjs.org/tr46/-/tr46-2.0.2.tgz"
+  integrity sha512-3n1qG+/5kg+jrbTzwAykB5yRYtQCTqOGKq5U5PE3b0a1/mzo6snDhjGS0zJVJunO0NrT3Dg1MLy5TjWP/UJppg==
+  dependencies:
+    punycode "^2.1.1"
+
+ts-jest@^26.5.4:
+  version "26.5.4"
+  resolved "https://registry.npmjs.org/ts-jest/-/ts-jest-26.5.4.tgz"
+  integrity sha512-I5Qsddo+VTm94SukBJ4cPimOoFZsYTeElR2xy6H2TOVs+NsvgYglW8KuQgKoApOKuaU/Ix/vrF9ebFZlb5D2Pg==
+  dependencies:
+    bs-logger "0.x"
+    buffer-from "1.x"
+    fast-json-stable-stringify "2.x"
+    jest-util "^26.1.0"
+    json5 "2.x"
+    lodash "4.x"
+    make-error "1.x"
+    mkdirp "1.x"
+    semver "7.x"
+    yargs-parser "20.x"
+
+ts-loader@^6.0.4:
+  version "6.2.1"
+  resolved "https://registry.npmjs.org/ts-loader/-/ts-loader-6.2.1.tgz"
+  integrity sha512-Dd9FekWuABGgjE1g0TlQJ+4dFUfYGbYcs52/HQObE0ZmUNjQlmLAS7xXsSzy23AMaMwipsx5sNHvoEpT2CZq1g==
+  dependencies:
+    chalk "^2.3.0"
+    enhanced-resolve "^4.0.0"
+    loader-utils "^1.0.2"
+    micromatch "^4.0.0"
+    semver "^6.0.0"
+
+tslib@^1.10.0, tslib@^1.8.0, tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
+  version "1.11.0"
+  resolved "https://registry.npmjs.org/tslib/-/tslib-1.11.0.tgz"
+  integrity sha512-BmndXUtiTn/VDDrJzQE7Mm22Ix3PxgLltW9bSNLoeCY31gnG2OPx0QqJnuc9oMIKioYrz487i6K9o4Pdn0j+Kg==
+
+tslib@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz"
+  integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==
 
 tslint-loader@^3.5.3:
   version "3.5.4"
-  resolved "https://registry.yarnpkg.com/tslint-loader/-/tslint-loader-3.5.4.tgz#052af7f0772434451ea1b247bb55407f878a4c40"
+  resolved "https://registry.npmjs.org/tslint-loader/-/tslint-loader-3.5.4.tgz"
+  integrity sha512-jBHNNppXut6SgZ7CsTBh+6oMwVum9n8azbmcYSeMlsABhWWoHwjq631vIFXef3VSd75cCdX3rc6kstsB7rSVVw==
   dependencies:
     loader-utils "^1.0.2"
     mkdirp "^0.5.1"
@@ -5207,310 +9564,506 @@ tslint-loader@^3.5.3:
     rimraf "^2.4.4"
     semver "^5.3.0"
 
-tslint@5.x:
-  version "5.11.0"
-  resolved "https://registry.yarnpkg.com/tslint/-/tslint-5.11.0.tgz#98f30c02eae3cde7006201e4c33cb08b48581eed"
+tslint@^5.18.0:
+  version "5.20.1"
+  resolved "https://registry.npmjs.org/tslint/-/tslint-5.20.1.tgz"
+  integrity sha512-EcMxhzCFt8k+/UP5r8waCf/lzmeSyVlqxqMEDQE7rWYiQky8KpIBz1JAoYXfROHrPZ1XXd43q8yQnULOLiBRQg==
   dependencies:
-    babel-code-frame "^6.22.0"
+    "@babel/code-frame" "^7.0.0"
     builtin-modules "^1.1.1"
     chalk "^2.3.0"
     commander "^2.12.1"
-    diff "^3.2.0"
+    diff "^4.0.1"
     glob "^7.1.1"
-    js-yaml "^3.7.0"
+    js-yaml "^3.13.1"
     minimatch "^3.0.4"
+    mkdirp "^0.5.1"
     resolve "^1.3.2"
     semver "^5.3.0"
     tslib "^1.8.0"
-    tsutils "^2.27.2"
+    tsutils "^2.29.0"
 
-tsutils@^2.27.2:
+tsutils@^2.29.0:
   version "2.29.0"
-  resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-2.29.0.tgz#32b488501467acbedd4b85498673a0812aca0b99"
+  resolved "https://registry.npmjs.org/tsutils/-/tsutils-2.29.0.tgz"
+  integrity sha512-g5JVHCIJwzfISaXpXE1qvNalca5Jwob6FjI4AoPlqMusJ6ftFE7IkkFoMhVLRgK+4Kx3gkzb8UZK5t5yTTvEmA==
   dependencies:
     tslib "^1.8.1"
 
 tty-browserify@0.0.0:
   version "0.0.0"
-  resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6"
+  resolved "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz"
+  integrity sha1-oVe6QC2iTpv5V/mqadUk7tQpAaY=
 
 tunnel-agent@^0.6.0:
   version "0.6.0"
-  resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.6.0.tgz#27a5dea06b36b04a0a9966774b290868f0fc40fd"
+  resolved "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz"
+  integrity sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=
   dependencies:
     safe-buffer "^5.0.1"
 
 tweetnacl@^0.14.3, tweetnacl@~0.14.0:
   version "0.14.5"
-  resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"
+  resolved "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz"
+  integrity sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=
+
+type-check@~0.3.2:
+  version "0.3.2"
+  resolved "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz"
+  integrity sha1-WITKtRLPHTVeP7eE8wgEsrUg23I=
+  dependencies:
+    prelude-ls "~1.1.2"
+
+type-detect@4.0.8:
+  version "4.0.8"
+  resolved "https://registry.npmjs.org/type-detect/-/type-detect-4.0.8.tgz"
+  integrity sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==
+
+type-fest@^0.11.0:
+  version "0.11.0"
+  resolved "https://registry.npmjs.org/type-fest/-/type-fest-0.11.0.tgz"
+  integrity sha512-OdjXJxnCN1AvyLSzeKIgXTXxV+99ZuXl3Hpo9XpJAv9MBcHrrJOQ5kV7ypXOuQie+AmWG25hLbiKdwYTifzcfQ==
+
+type-fest@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.npmjs.org/type-fest/-/type-fest-0.6.0.tgz"
+  integrity sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==
 
-type-is@~1.6.16:
-  version "1.6.16"
-  resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.16.tgz#f89ce341541c672b25ee7ae3c73dee3b2be50194"
+type-fest@^0.8.1:
+  version "0.8.1"
+  resolved "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz"
+  integrity sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==
+
+type-is@~1.6.17, type-is@~1.6.18:
+  version "1.6.18"
+  resolved "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz"
+  integrity sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==
   dependencies:
     media-typer "0.3.0"
-    mime-types "~2.1.18"
+    mime-types "~2.1.24"
+
+type@^1.0.1:
+  version "1.2.0"
+  resolved "https://registry.npmjs.org/type/-/type-1.2.0.tgz"
+  integrity sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg==
+
+type@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/type/-/type-2.0.0.tgz"
+  integrity sha512-KBt58xCHry4Cejnc2ISQAF7QY+ORngsWfxezO68+12hKV6lQY8P/psIkcbjeHWn7MqcgciWJyCCevFMJdIXpow==
+
+typedarray-to-buffer@^3.1.5:
+  version "3.1.5"
+  resolved "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz"
+  integrity sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==
+  dependencies:
+    is-typedarray "^1.0.0"
 
 typedarray@^0.0.6:
   version "0.0.6"
-  resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
+  resolved "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz"
+  integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
-typescript@2.9.2:
-  version "2.9.2"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.9.2.tgz#1cbf61d05d6b96269244eb6a3bce4bd914e0f00c"
+typeface-roboto@^0.0.54:
+  version "0.0.54"
+  resolved "https://registry.npmjs.org/typeface-roboto/-/typeface-roboto-0.0.54.tgz"
+  integrity sha512-sOFA1FXgP0gOgBYlS6irwq6hHYA370KE3dPlgYEJHL3PJd5X8gQE0RmL79ONif6fL5JZuGDj+rtOrFeOqz5IZQ==
 
-uglify-es@^3.3.4:
-  version "3.3.9"
-  resolved "https://registry.yarnpkg.com/uglify-es/-/uglify-es-3.3.9.tgz#0c1c4f0700bed8dbc124cdb304d2592ca203e677"
-  dependencies:
-    commander "~2.13.0"
-    source-map "~0.6.1"
+typescript@~4.5.0:
+  version "4.5.5"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.5.5.tgz#d8c953832d28924a9e3d37c73d729c846c5896f3"
+  integrity sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA==
 
 uglify-js@3.4.x:
-  version "3.4.9"
-  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.4.9.tgz#af02f180c1207d76432e473ed24a28f4a782bae3"
+  version "3.4.10"
+  resolved "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.10.tgz"
+  integrity sha512-Y2VsbPVs0FIshJztycsO2SfPk7/KAF/T72qzv9u5EpQ4kB2hQoHlhNQTsNyy6ul7lQtqJN/AoWeS23OzEiEFxw==
   dependencies:
-    commander "~2.17.1"
+    commander "~2.19.0"
     source-map "~0.6.1"
 
-uglifyjs-webpack-plugin@^1.2.4, uglifyjs-webpack-plugin@^1.2.5:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/uglifyjs-webpack-plugin/-/uglifyjs-webpack-plugin-1.3.0.tgz#75f548160858163a08643e086d5fefe18a5d67de"
-  dependencies:
-    cacache "^10.0.4"
-    find-cache-dir "^1.0.0"
-    schema-utils "^0.4.5"
-    serialize-javascript "^1.4.0"
-    source-map "^0.6.1"
-    uglify-es "^3.3.4"
-    webpack-sources "^1.1.0"
-    worker-farm "^1.5.2"
+ulp@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/ulp/-/ulp-1.0.1.tgz#e3a4a5b4de9bd0faae63e4544ee63a0d9bd34bc5"
+  integrity sha512-fXPzKroJ6XJXrepjd4AIHfeN84qUtZfLojIPYExlF/rm/BWb8/2o64lsGEKSMSwjH9X6VKmDv9+zbd+ZNHa4nw==
 
 union-value@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/union-value/-/union-value-1.0.0.tgz#5c71c34cb5bad5dcebe3ea0cd08207ba5aa1aea4"
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz"
+  integrity sha512-tJfXmxMeWYnczCVs7XAEvIV7ieppALdyepWMkHkwciRpZraG/xwT+s2JN8+pr1+8jCRf80FFzvr+MpQeeoF4Xg==
   dependencies:
     arr-union "^3.1.0"
     get-value "^2.0.6"
     is-extendable "^0.1.1"
-    set-value "^0.4.3"
+    set-value "^2.0.1"
 
 uniq@^1.0.1:
   version "1.0.1"
-  resolved "https://registry.yarnpkg.com/uniq/-/uniq-1.0.1.tgz#b31c5ae8254844a3a8281541ce2b04b865a734ff"
+  resolved "https://registry.npmjs.org/uniq/-/uniq-1.0.1.tgz"
+  integrity sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8=
 
 uniqs@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/uniqs/-/uniqs-2.0.0.tgz#ffede4b36b25290696e6e165d4a59edb998e6b02"
+  resolved "https://registry.npmjs.org/uniqs/-/uniqs-2.0.0.tgz"
+  integrity sha1-/+3ks2slKQaW5uFl1KWe25mOawI=
 
-unique-filename@^1.1.0:
+unique-filename@^1.1.1:
   version "1.1.1"
-  resolved "https://registry.yarnpkg.com/unique-filename/-/unique-filename-1.1.1.tgz#1d69769369ada0583103a1e6ae87681b56573230"
+  resolved "https://registry.npmjs.org/unique-filename/-/unique-filename-1.1.1.tgz"
+  integrity sha512-Vmp0jIp2ln35UTXuryvjzkjGdRyf9b2lTXuSYUiPmzRcl3FDtYqAwOnTJkAngD9SWhnoJzDbTKwaOrZ+STtxNQ==
   dependencies:
     unique-slug "^2.0.0"
 
 unique-slug@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/unique-slug/-/unique-slug-2.0.1.tgz#5e9edc6d1ce8fb264db18a507ef9bd8544451ca6"
+  version "2.0.2"
+  resolved "https://registry.npmjs.org/unique-slug/-/unique-slug-2.0.2.tgz"
+  integrity sha512-zoWr9ObaxALD3DOPfjPSqxt4fnZiWblxHIgeWqW8x7UqDzEtHEQLzji2cuJYQFCU6KmoJikOYAZlrTHHebjx2w==
   dependencies:
     imurmurhash "^0.1.4"
 
 unpipe@1.0.0, unpipe@~1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
+  resolved "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz"
+  integrity sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=
+
+unquote@~1.1.1:
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/unquote/-/unquote-1.1.1.tgz"
+  integrity sha1-j97XMk7G6IoP+LkF58CYzcCG1UQ=
 
 unset-value@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/unset-value/-/unset-value-1.0.0.tgz#8376873f7d2335179ffb1e6fc3a8ed0dfc8ab559"
+  resolved "https://registry.npmjs.org/unset-value/-/unset-value-1.0.0.tgz"
+  integrity sha1-g3aHP30jNRef+x5vw6jtDfyKtVk=
   dependencies:
     has-value "^0.3.1"
     isobject "^3.0.0"
 
-upath@^1.0.5:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/upath/-/upath-1.1.0.tgz#35256597e46a581db4793d0ce47fa9aebfc9fabd"
+upath@^1.1.1:
+  version "1.2.0"
+  resolved "https://registry.npmjs.org/upath/-/upath-1.2.0.tgz"
+  integrity sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==
 
 upper-case@^1.1.1:
   version "1.1.3"
-  resolved "https://registry.yarnpkg.com/upper-case/-/upper-case-1.1.3.tgz#f6b4501c2ec4cdd26ba78be7222961de77621598"
+  resolved "https://registry.npmjs.org/upper-case/-/upper-case-1.1.3.tgz"
+  integrity sha1-9rRQHC7EzdJrp4vnIilh3ndiFZg=
 
 uri-js@^4.2.2:
   version "4.2.2"
-  resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.2.2.tgz#94c540e1ff772956e2299507c010aea6c8838eb0"
+  resolved "https://registry.npmjs.org/uri-js/-/uri-js-4.2.2.tgz"
+  integrity sha512-KY9Frmirql91X2Qgjry0Wd4Y+YTdrdZheS8TFwvkbLWf/G5KNJDCh6pKL5OZctEW4+0Baa5idK2ZQuELRwPznQ==
   dependencies:
     punycode "^2.1.0"
 
 urix@^0.1.0:
   version "0.1.0"
-  resolved "https://registry.yarnpkg.com/urix/-/urix-0.1.0.tgz#da937f7a62e21fec1fd18d49b35c2935067a6c72"
+  resolved "https://registry.npmjs.org/urix/-/urix-0.1.0.tgz"
+  integrity sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=
 
-url-loader@^1.0.1:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-1.1.2.tgz#b971d191b83af693c5e3fea4064be9e1f2d7f8d8"
+url-loader@^2.0.1:
+  version "2.3.0"
+  resolved "https://registry.npmjs.org/url-loader/-/url-loader-2.3.0.tgz"
+  integrity sha512-goSdg8VY+7nPZKUEChZSEtW5gjbS66USIGCeSJ1OVOJ7Yfuh/36YxCwMi5HVEJh6mqUYOoy3NJ0vlOMrWsSHog==
   dependencies:
-    loader-utils "^1.1.0"
-    mime "^2.0.3"
-    schema-utils "^1.0.0"
+    loader-utils "^1.2.3"
+    mime "^2.4.4"
+    schema-utils "^2.5.0"
 
-url-parse@^1.1.8, url-parse@^1.4.3:
-  version "1.4.3"
-  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.4.3.tgz#bfaee455c889023219d757e045fa6a684ec36c15"
+url-parse@^1.4.3:
+  version "1.5.1"
+  resolved "https://registry.npmjs.org/url-parse/-/url-parse-1.5.1.tgz"
+  integrity sha512-HOfCOUJt7iSYzEx/UqgtwKRMC6EU91NFhsCHMv9oM03VJcVo2Qrp8T8kI9D7amFf1cu+/3CEhgb3rF9zL7k85Q==
   dependencies:
-    querystringify "^2.0.0"
+    querystringify "^2.1.1"
     requires-port "^1.0.0"
 
 url@^0.11.0:
   version "0.11.0"
-  resolved "https://registry.yarnpkg.com/url/-/url-0.11.0.tgz#3838e97cfc60521eb73c525a8e55bfdd9e2e28f1"
+  resolved "https://registry.npmjs.org/url/-/url-0.11.0.tgz"
+  integrity sha1-ODjpfPxgUh63PFJajlW/3Z4uKPE=
   dependencies:
     punycode "1.3.2"
     querystring "0.2.0"
 
 use@^3.1.0:
   version "3.1.1"
-  resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"
+  resolved "https://registry.npmjs.org/use/-/use-3.1.1.tgz"
+  integrity sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==
 
-util-deprecate@~1.0.1:
+util-deprecate@^1.0.1, util-deprecate@~1.0.1:
   version "1.0.2"
-  resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
+  resolved "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz"
+  integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=
 
 util.promisify@1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/util.promisify/-/util.promisify-1.0.0.tgz#440f7165a459c9a16dc145eb8e72f35687097030"
+  resolved "https://registry.npmjs.org/util.promisify/-/util.promisify-1.0.0.tgz"
+  integrity sha512-i+6qA2MPhvoKLuxnJNpXAGhg7HphQOSUq2LKMZD0m15EiskXUkMvKdF4Uui0WYeCUGea+o2cw/ZuwehtfsrNkA==
   dependencies:
     define-properties "^1.1.2"
     object.getownpropertydescriptors "^2.0.3"
 
+util.promisify@~1.0.0:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/util.promisify/-/util.promisify-1.0.1.tgz"
+  integrity sha512-g9JpC/3He3bm38zsLupWryXHoEcS22YHthuPQSJdMy6KNrzIRzWqcsHzD/WUnqe45whVou4VIsPew37DoXWNrA==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.2"
+    has-symbols "^1.0.1"
+    object.getownpropertydescriptors "^2.1.0"
+
 util@0.10.3:
   version "0.10.3"
-  resolved "https://registry.yarnpkg.com/util/-/util-0.10.3.tgz#7afb1afe50805246489e3db7fe0ed379336ac0f9"
+  resolved "https://registry.npmjs.org/util/-/util-0.10.3.tgz"
+  integrity sha1-evsa/lCAUkZInj23/g7TeTNqwPk=
   dependencies:
     inherits "2.0.1"
 
-util@^0.10.3:
-  version "0.10.4"
-  resolved "https://registry.yarnpkg.com/util/-/util-0.10.4.tgz#3aa0125bfe668a4672de58857d3ace27ecb76901"
+util@^0.11.0:
+  version "0.11.1"
+  resolved "https://registry.npmjs.org/util/-/util-0.11.1.tgz"
+  integrity sha512-HShAsny+zS2TZfaXxD9tYj4HQGlBezXZMZuM/S5PKLLoZkShZiGk9o5CzukI1LVHZvjdvZ2Sj1aW/Ndn2NB/HQ==
   dependencies:
     inherits "2.0.3"
 
 utila@^0.4.0, utila@~0.4:
   version "0.4.0"
-  resolved "https://registry.yarnpkg.com/utila/-/utila-0.4.0.tgz#8a16a05d445657a3aea5eecc5b12a4fa5379772c"
+  resolved "https://registry.npmjs.org/utila/-/utila-0.4.0.tgz"
+  integrity sha1-ihagXURWV6Oupe7MWxKk+lN5dyw=
 
 utils-merge@1.0.1:
   version "1.0.1"
-  resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
+  resolved "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz"
+  integrity sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=
 
 uuid@^3.0.1, uuid@^3.1.0, uuid@^3.3.2:
-  version "3.3.2"
-  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.3.2.tgz#1b4af4955eb3077c501c23872fc6513811587131"
+  version "3.4.0"
+  resolved "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz"
+  integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
 
-v8-compile-cache@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.0.2.tgz#a428b28bb26790734c4fc8bc9fa106fccebf6a6c"
+uuid@^8.1.0:
+  version "8.3.2"
+  resolved "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz"
+  integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
+
+uuid@^8.3.0:
+  version "8.3.1"
+  resolved "https://registry.npmjs.org/uuid/-/uuid-8.3.1.tgz"
+  integrity sha512-FOmRr+FmWEIG8uhZv6C2bTgEVXsHk08kE7mPlrBbEe+c3r9pjceVPgupIfNIhc4yx55H69OXANrUaSuu9eInKg==
+
+v8-compile-cache@2.0.3:
+  version "2.0.3"
+  resolved "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.0.3.tgz"
+  integrity sha512-CNmdbwQMBjwr9Gsmohvm0pbL954tJrNzf6gWL3K+QMQf00PF7ERGrEiLgjuU3mKreLC2MeGhUsNV9ybTbLgd3w==
+
+v8-to-istanbul@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-6.0.1.tgz"
+  integrity sha512-PzM1WlqquhBvsV+Gco6WSFeg1AGdD53ccMRkFeyHRE/KRZaVacPOmQYP3EeVgDBtKD2BJ8kgynBQ5OtKiHCH+w==
+  dependencies:
+    "@types/istanbul-lib-coverage" "^2.0.1"
+    convert-source-map "^1.6.0"
+    source-map "^0.7.3"
+
+validate-npm-package-license@^3.0.1:
+  version "3.0.4"
+  resolved "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz"
+  integrity sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==
+  dependencies:
+    spdx-correct "^3.0.0"
+    spdx-expression-parse "^3.0.0"
 
 vary@~1.1.2:
   version "1.1.2"
-  resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
+  resolved "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz"
+  integrity sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=
 
 vendors@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/vendors/-/vendors-1.0.2.tgz#7fcb5eef9f5623b156bcea89ec37d63676f21801"
+  version "1.0.4"
+  resolved "https://registry.npmjs.org/vendors/-/vendors-1.0.4.tgz"
+  integrity sha512-/juG65kTL4Cy2su4P8HjtkTxk6VmJDiOPBufWniqQ6wknac6jNiXS9vU+hO3wgusiyqWlzTbVHi0dyJqRONg3w==
 
 verror@1.10.0:
   version "1.10.0"
-  resolved "https://registry.yarnpkg.com/verror/-/verror-1.10.0.tgz#3a105ca17053af55d6e270c1f8288682e18da400"
+  resolved "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz"
+  integrity sha1-OhBcoXBTr1XW4nDB+CiGguGNpAA=
   dependencies:
     assert-plus "^1.0.0"
     core-util-is "1.0.2"
     extsprintf "^1.2.0"
 
-vm-browserify@0.0.4:
-  version "0.0.4"
-  resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-0.0.4.tgz#5d7ea45bbef9e4a6ff65f95438e0a87c357d5a73"
+vm-browserify@^1.0.1:
+  version "1.1.2"
+  resolved "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz"
+  integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
+
+voice-activity-detection@^0.0.5:
+  version "0.0.5"
+  resolved "https://registry.npmjs.org/voice-activity-detection/-/voice-activity-detection-0.0.5.tgz"
+  integrity sha512-Ezq+k0cICI67XR/R9KvTRhJ7/u6U0Zk9I+8VNs3hHTAvB6cA3glCa+cHgCRWSW/SV6cRrufSQsV1YxpNtsQb1g==
   dependencies:
-    indexof "0.0.1"
+    analyser-frequency-average "^1.0.0"
 
-watchpack@^1.5.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.6.0.tgz#4bc12c2ebe8aa277a71f1d3f14d685c7b446cd00"
+vt-pbf@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/vt-pbf/-/vt-pbf-3.1.3.tgz#68fd150756465e2edae1cc5c048e063916dcfaac"
+  integrity sha512-2LzDFzt0mZKZ9IpVF2r69G9bXaP2Q2sArJCmcCgvfTdCCZzSyz4aCLoQyUilu37Ll56tCblIZrXFIjNUpGIlmA==
+  dependencies:
+    "@mapbox/point-geometry" "0.1.0"
+    "@mapbox/vector-tile" "^1.3.1"
+    pbf "^3.2.1"
+
+w3c-hr-time@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz"
+  integrity sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==
+  dependencies:
+    browser-process-hrtime "^1.0.0"
+
+w3c-xmlserializer@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-2.0.0.tgz"
+  integrity sha512-4tzD0mF8iSiMiNs30BiLO3EpfGLZUT2MSX/G+o7ZywDzliWQ3OPtTZ0PTC3B3ca1UAf4cJMHB+2Bf56EriJuRA==
+  dependencies:
+    xml-name-validator "^3.0.0"
+
+walker@^1.0.7, walker@~1.0.5:
+  version "1.0.7"
+  resolved "https://registry.npmjs.org/walker/-/walker-1.0.7.tgz"
+  integrity sha1-L3+bj9ENZ3JisYqITijRlhjgKPs=
+  dependencies:
+    makeerror "1.0.x"
+
+watchpack-chokidar2@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/watchpack-chokidar2/-/watchpack-chokidar2-2.0.1.tgz#38500072ee6ece66f3769936950ea1771be1c957"
+  integrity sha512-nCFfBIPKr5Sh61s4LPpy1Wtfi0HE8isJ3d2Yb5/Ppw2P2B/3eVSEBjKfN0fmHJSK14+31KwMKmcrzs2GM4P0Ww==
+  dependencies:
+    chokidar "^2.1.8"
+
+watchpack@^1.7.4:
+  version "1.7.5"
+  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.7.5.tgz#1267e6c55e0b9b5be44c2023aed5437a2c26c453"
+  integrity sha512-9P3MWk6SrKjHsGkLT2KHXdQ/9SNkyoJbabxnKOoJepsvJjJG8uYTR3yTPxPQvNDI3w4Nz1xnE0TLHK4RIVe/MQ==
   dependencies:
-    chokidar "^2.0.2"
     graceful-fs "^4.1.2"
     neo-async "^2.5.0"
+  optionalDependencies:
+    chokidar "^3.4.1"
+    watchpack-chokidar2 "^2.0.1"
 
-wbuf@^1.1.0, wbuf@^1.7.2:
+wbuf@^1.1.0, wbuf@^1.7.3:
   version "1.7.3"
-  resolved "https://registry.yarnpkg.com/wbuf/-/wbuf-1.7.3.tgz#c1d8d149316d3ea852848895cb6a0bfe887b87df"
+  resolved "https://registry.npmjs.org/wbuf/-/wbuf-1.7.3.tgz"
+  integrity sha512-O84QOnr0icsbFGLS0O3bI5FswxzRr8/gHwWkDlQFskhSPryQXvrTMxjxGP4+iWYoauLoBvfDpkrOauZ+0iZpDA==
   dependencies:
     minimalistic-assert "^1.0.0"
 
 wcwidth@^1.0.1:
   version "1.0.1"
-  resolved "https://registry.yarnpkg.com/wcwidth/-/wcwidth-1.0.1.tgz#f0b0dcf915bc5ff1528afadb2c0e17b532da2fe8"
+  resolved "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz"
+  integrity sha1-8LDc+RW8X/FSivrbLA4XtTLaL+g=
   dependencies:
     defaults "^1.0.3"
 
-webpack-cli@^3.1.2:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/webpack-cli/-/webpack-cli-3.1.2.tgz#17d7e01b77f89f884a2bbf9db545f0f6a648e746"
-  dependencies:
-    chalk "^2.4.1"
-    cross-spawn "^6.0.5"
-    enhanced-resolve "^4.1.0"
-    global-modules-path "^2.3.0"
-    import-local "^2.0.0"
-    interpret "^1.1.0"
-    loader-utils "^1.1.0"
-    supports-color "^5.5.0"
-    v8-compile-cache "^2.0.2"
-    yargs "^12.0.2"
+webidl-conversions@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-5.0.0.tgz"
+  integrity sha512-VlZwKPCkYKxQgeSbH5EyngOmRp7Ww7I9rQLERETtf5ofd9pGeswWiOtogpEO850jziPRarreGxn5QIiTqpb2wA==
 
-webpack-dev-middleware@3.4.0:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-3.4.0.tgz#1132fecc9026fd90f0ecedac5cbff75d1fb45890"
-  dependencies:
-    memory-fs "~0.4.1"
-    mime "^2.3.1"
-    range-parser "^1.0.3"
+webidl-conversions@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-6.1.0.tgz"
+  integrity sha512-qBIvFLGiBpLjfwmYAaHPXsn+ho5xZnGvyGvsarywGNc8VyQJUMHJ8OBKGGrPER0okBeMDaan4mNBlgBROxuI8w==
+
+webpack-bundle-analyzer@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.3.0.tgz"
+  integrity sha512-J3TPm54bPARx6QG8z4cKBszahnUglcv70+N+8gUqv2I5KOFHJbzBiLx+pAp606so0X004fxM7hqRu10MLjJifA==
+  dependencies:
+    acorn "^8.0.4"
+    acorn-walk "^8.0.0"
+    chalk "^4.1.0"
+    commander "^6.2.0"
+    gzip-size "^6.0.0"
+    lodash "^4.17.20"
+    opener "^1.5.2"
+    sirv "^1.0.7"
+    ws "^7.3.1"
+
+webpack-cli@^3.3.6:
+  version "3.3.11"
+  resolved "https://registry.npmjs.org/webpack-cli/-/webpack-cli-3.3.11.tgz"
+  integrity sha512-dXlfuml7xvAFwYUPsrtQAA9e4DOe58gnzSxhgrO/ZM/gyXTBowrsYeubyN4mqGhYdpXMFNyQ6emjJS9M7OBd4g==
+  dependencies:
+    chalk "2.4.2"
+    cross-spawn "6.0.5"
+    enhanced-resolve "4.1.0"
+    findup-sync "3.0.0"
+    global-modules "2.0.0"
+    import-local "2.0.0"
+    interpret "1.2.0"
+    loader-utils "1.2.3"
+    supports-color "6.1.0"
+    v8-compile-cache "2.0.3"
+    yargs "13.2.4"
+
+webpack-dev-middleware@^3.7.2:
+  version "3.7.2"
+  resolved "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-3.7.2.tgz"
+  integrity sha512-1xC42LxbYoqLNAhV6YzTYacicgMZQTqRd27Sim9wn5hJrX3I5nxYy1SxSd4+gjUFsz1dQFj+yEe6zEVmSkeJjw==
+  dependencies:
+    memory-fs "^0.4.1"
+    mime "^2.4.4"
+    mkdirp "^0.5.1"
+    range-parser "^1.2.1"
     webpack-log "^2.0.0"
 
-webpack-dev-server@^3.1.9:
-  version "3.1.9"
-  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-3.1.9.tgz#8b32167624d2faff40dcedc2cbce17ed1f34d3e0"
+webpack-dev-server@^3.7.2:
+  version "3.10.3"
+  resolved "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-3.10.3.tgz"
+  integrity sha512-e4nWev8YzEVNdOMcNzNeCN947sWJNd43E5XvsJzbAL08kGc2frm1tQ32hTJslRS+H65LCb/AaUCYU7fjHCpDeQ==
   dependencies:
     ansi-html "0.0.7"
     bonjour "^3.5.0"
-    chokidar "^2.0.0"
-    compression "^1.5.2"
-    connect-history-api-fallback "^1.3.0"
-    debug "^3.1.0"
-    del "^3.0.0"
-    express "^4.16.2"
-    html-entities "^1.2.0"
-    http-proxy-middleware "~0.18.0"
+    chokidar "^2.1.8"
+    compression "^1.7.4"
+    connect-history-api-fallback "^1.6.0"
+    debug "^4.1.1"
+    del "^4.1.1"
+    express "^4.17.1"
+    html-entities "^1.2.1"
+    http-proxy-middleware "0.19.1"
     import-local "^2.0.0"
-    internal-ip "^3.0.1"
+    internal-ip "^4.3.0"
     ip "^1.1.5"
-    killable "^1.0.0"
-    loglevel "^1.4.1"
-    opn "^5.1.0"
-    portfinder "^1.0.9"
+    is-absolute-url "^3.0.3"
+    killable "^1.0.1"
+    loglevel "^1.6.6"
+    opn "^5.5.0"
+    p-retry "^3.0.1"
+    portfinder "^1.0.25"
     schema-utils "^1.0.0"
-    selfsigned "^1.9.1"
-    serve-index "^1.7.2"
+    selfsigned "^1.10.7"
+    semver "^6.3.0"
+    serve-index "^1.9.1"
     sockjs "0.3.19"
-    sockjs-client "1.1.5"
-    spdy "^3.4.1"
-    strip-ansi "^3.0.0"
-    supports-color "^5.1.0"
-    webpack-dev-middleware "3.4.0"
+    sockjs-client "1.4.0"
+    spdy "^4.0.1"
+    strip-ansi "^3.0.1"
+    supports-color "^6.1.0"
+    url "^0.11.0"
+    webpack-dev-middleware "^3.7.2"
     webpack-log "^2.0.0"
-    yargs "12.0.2"
+    ws "^6.2.1"
+    yargs "12.0.5"
 
 webpack-log@^1.2.0:
   version "1.2.0"
-  resolved "https://registry.yarnpkg.com/webpack-log/-/webpack-log-1.2.0.tgz#a4b34cda6b22b518dbb0ab32e567962d5c72a43d"
+  resolved "https://registry.npmjs.org/webpack-log/-/webpack-log-1.2.0.tgz"
+  integrity sha512-U9AnICnu50HXtiqiDxuli5gLB5PGBo7VvcHx36jRZHwK4vzOYLbImqT4lwWwoMHdQWwEKw736fCHEekokTEKHA==
   dependencies:
     chalk "^2.1.0"
     log-symbols "^2.1.0"
@@ -5519,148 +10072,288 @@ webpack-log@^1.2.0:
 
 webpack-log@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/webpack-log/-/webpack-log-2.0.0.tgz#5b7928e0637593f119d32f6227c1e0ac31e1b47f"
+  resolved "https://registry.npmjs.org/webpack-log/-/webpack-log-2.0.0.tgz"
+  integrity sha512-cX8G2vR/85UYG59FgkoMamwHUIkSSlV3bBMRsbxVXVUk2j6NleCKjQ/WE9eYg9WY4w25O9w8wKP4rzNZFmUcUg==
   dependencies:
     ansi-colors "^3.0.0"
     uuid "^3.3.2"
 
 webpack-merge@^4.1.4:
-  version "4.1.4"
-  resolved "https://registry.yarnpkg.com/webpack-merge/-/webpack-merge-4.1.4.tgz#0fde38eabf2d5fd85251c24a5a8c48f8a3f4eb7b"
+  version "4.2.2"
+  resolved "https://registry.npmjs.org/webpack-merge/-/webpack-merge-4.2.2.tgz"
+  integrity sha512-TUE1UGoTX2Cd42j3krGYqObZbOD+xF7u28WB7tfUordytSjbWTIjK/8V0amkBfTYN4/pB/GIDlJZZ657BGG19g==
   dependencies:
-    lodash "^4.17.5"
+    lodash "^4.17.15"
 
-webpack-sources@^1.0.1, webpack-sources@^1.1.0, webpack-sources@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.3.0.tgz#2a28dcb9f1f45fe960d8f1493252b5ee6530fa85"
+webpack-sources@^1.0.1, webpack-sources@^1.1.0, webpack-sources@^1.4.0, webpack-sources@^1.4.1, webpack-sources@^1.4.3:
+  version "1.4.3"
+  resolved "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.4.3.tgz"
+  integrity sha512-lgTS3Xhv1lCOKo7SA5TjKXMjpSM4sBjNV5+q2bqesbSPs5FjGmU6jjtBSkX9b4qW87vDIsCIlUPOEhbZrMdjeQ==
   dependencies:
     source-list-map "^2.0.0"
     source-map "~0.6.1"
 
-webpack@^4.22.0:
-  version "4.22.0"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.22.0.tgz#b168111e2e7b05f5169ac484e79e62093ec39e0d"
-  dependencies:
-    "@webassemblyjs/ast" "1.7.8"
-    "@webassemblyjs/helper-module-context" "1.7.8"
-    "@webassemblyjs/wasm-edit" "1.7.8"
-    "@webassemblyjs/wasm-parser" "1.7.8"
-    acorn "^5.6.2"
-    acorn-dynamic-import "^3.0.0"
-    ajv "^6.1.0"
-    ajv-keywords "^3.1.0"
-    chrome-trace-event "^1.0.0"
-    enhanced-resolve "^4.1.0"
-    eslint-scope "^4.0.0"
+webpack@^4.47.0:
+  version "4.47.0"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.47.0.tgz#8b8a02152d7076aeb03b61b47dad2eeed9810ebc"
+  integrity sha512-td7fYwgLSrky3fI1EuU5cneU4+pbH6GgOfuKNS1tNPcfdGinGELAqsb/BP4nnvZyKSG2i/xFGU7+n2PvZA8HJQ==
+  dependencies:
+    "@webassemblyjs/ast" "1.9.0"
+    "@webassemblyjs/helper-module-context" "1.9.0"
+    "@webassemblyjs/wasm-edit" "1.9.0"
+    "@webassemblyjs/wasm-parser" "1.9.0"
+    acorn "^6.4.1"
+    ajv "^6.10.2"
+    ajv-keywords "^3.4.1"
+    chrome-trace-event "^1.0.2"
+    enhanced-resolve "^4.5.0"
+    eslint-scope "^4.0.3"
     json-parse-better-errors "^1.0.2"
-    loader-runner "^2.3.0"
-    loader-utils "^1.1.0"
-    memory-fs "~0.4.1"
-    micromatch "^3.1.8"
-    mkdirp "~0.5.0"
-    neo-async "^2.5.0"
-    node-libs-browser "^2.0.0"
-    schema-utils "^0.4.4"
-    tapable "^1.1.0"
-    uglifyjs-webpack-plugin "^1.2.4"
-    watchpack "^1.5.0"
-    webpack-sources "^1.3.0"
+    loader-runner "^2.4.0"
+    loader-utils "^1.2.3"
+    memory-fs "^0.4.1"
+    micromatch "^3.1.10"
+    mkdirp "^0.5.3"
+    neo-async "^2.6.1"
+    node-libs-browser "^2.2.1"
+    schema-utils "^1.0.0"
+    tapable "^1.1.3"
+    terser-webpack-plugin "^1.4.3"
+    watchpack "^1.7.4"
+    webpack-sources "^1.4.1"
 
 websocket-driver@>=0.5.1:
-  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/websocket-driver/-/websocket-driver-0.7.0.tgz#0caf9d2d755d93aee049d4bdd0d3fe2cca2a24eb"
+  version "0.7.3"
+  resolved "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.3.tgz"
+  integrity sha512-bpxWlvbbB459Mlipc5GBzzZwhoZgGEZLuqPaR0INBGnPAY1vdBX6hPnoFXiw+3yWxDuHyQjO2oXTMyS8A5haFg==
   dependencies:
-    http-parser-js ">=0.4.0"
+    http-parser-js ">=0.4.0 <0.4.11"
+    safe-buffer ">=5.1.0"
     websocket-extensions ">=0.1.1"
 
 websocket-extensions@>=0.1.1:
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.3.tgz#5d2ff22977003ec687a4b87073dfbbac146ccf29"
+  version "0.1.4"
+  resolved "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.4.tgz"
+  integrity sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==
 
 webui-popover@^1.2.18:
   version "1.2.18"
-  resolved "https://registry.yarnpkg.com/webui-popover/-/webui-popover-1.2.18.tgz#85a2f10fdb73874177e5c42e9fa4918c15567771"
+  resolved "https://registry.npmjs.org/webui-popover/-/webui-popover-1.2.18.tgz"
+  integrity sha1-haLxD9tzh0F35cQun6SRjBVWd3E=
+
+whatwg-encoding@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-1.0.5.tgz"
+  integrity sha512-b5lim54JOPN9HtzvK9HFXvBma/rnfFeqsic0hSpjtDbVxR3dJKLc+KB4V6GgiGOvl7CY/KNh8rxSo9DKQrnUEw==
+  dependencies:
+    iconv-lite "0.4.24"
+
+whatwg-mimetype@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz"
+  integrity sha512-M4yMwr6mAnQz76TbJm914+gPpB/nCwvZbJU28cUD6dR004SAxDLOOSUaB1JDRqLtaOV/vi0IC5lEAGFgrjGv/g==
 
-whet.extend@~0.9.9:
-  version "0.9.9"
-  resolved "https://registry.yarnpkg.com/whet.extend/-/whet.extend-0.9.9.tgz#f877d5bf648c97e5aa542fadc16d6a259b9c11a1"
+whatwg-url@^8.0.0:
+  version "8.4.0"
+  resolved "https://registry.npmjs.org/whatwg-url/-/whatwg-url-8.4.0.tgz"
+  integrity sha512-vwTUFf6V4zhcPkWp/4CQPr1TW9Ml6SF4lVyaIMBdJw5i6qUUJ1QWM4Z6YYVkfka0OUIzVo/0aNtGVGk256IKWw==
+  dependencies:
+    lodash.sortby "^4.7.0"
+    tr46 "^2.0.2"
+    webidl-conversions "^6.1.0"
 
 which-module@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
+  resolved "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz"
+  integrity sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=
 
-which@^1.2.9, which@^1.3.0:
+which@^1.2.14, which@^1.2.9, which@^1.3.1:
   version "1.3.1"
-  resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
+  resolved "https://registry.npmjs.org/which/-/which-1.3.1.tgz"
+  integrity sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==
   dependencies:
     isexe "^2.0.0"
 
-wide-align@^1.1.0:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/wide-align/-/wide-align-1.1.3.tgz#ae074e6bdc0c14a431e804e624549c633b000457"
+which@^2.0.1, which@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.npmjs.org/which/-/which-2.0.2.tgz"
+  integrity sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==
+  dependencies:
+    isexe "^2.0.0"
+
+which@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/which/-/which-4.0.0.tgz#cd60b5e74503a3fbcfbf6cd6b4138a8bae644c1a"
+  integrity sha512-GlaYyEb07DPxYCKhKzplCWBJtvxZcZMrL+4UkrTSJHHPyZU4mYYTv3qaOe77H7EODLSSopAUFAc6W8U4yqvscg==
   dependencies:
-    string-width "^1.0.2 || 2"
+    isexe "^3.1.1"
 
 wnumb@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/wnumb/-/wnumb-1.1.0.tgz#fcecb88050869bdf384dacbfd612325980c93ddc"
+  version "1.2.0"
+  resolved "https://registry.npmjs.org/wnumb/-/wnumb-1.2.0.tgz"
+  integrity sha512-eYut5K/dW7usfk/Mwm6nxBNoTPp/uP7PlXld+hhg7lDtHLdHFnNclywGYM9BRC7Ohd4JhwuHg+vmOUGfd3NhVA==
 
-worker-farm@^1.5.2:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/worker-farm/-/worker-farm-1.6.0.tgz#aecc405976fab5a95526180846f0dba288f3a4a0"
+word-wrap@~1.2.3:
+  version "1.2.3"
+  resolved "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz"
+  integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==
+
+worker-farm@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.npmjs.org/worker-farm/-/worker-farm-1.7.0.tgz"
+  integrity sha512-rvw3QTZc8lAxyVrqcSGVm5yP/IJ2UcB3U0graE3LCFoZ0Yn2x4EoVSqJKdB/T5M+FLcRPjz4TDacRf3OCfNUzw==
   dependencies:
     errno "~0.1.7"
 
 worker-loader@2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/worker-loader/-/worker-loader-2.0.0.tgz#45fda3ef76aca815771a89107399ee4119b430ac"
+  resolved "https://registry.npmjs.org/worker-loader/-/worker-loader-2.0.0.tgz"
+  integrity sha512-tnvNp4K3KQOpfRnD20m8xltE3eWh89Ye+5oj7wXEEHKac1P4oZ6p9oTj8/8ExqoSBnk9nu5Pr4nKfQ1hn2APJw==
   dependencies:
     loader-utils "^1.0.0"
     schema-utils "^0.4.0"
 
 wrap-ansi@^2.0.0:
   version "2.1.0"
-  resolved "http://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz#d8fc3d284dd05794fe84973caecdd1cf824fdd85"
+  resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz"
+  integrity sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=
   dependencies:
     string-width "^1.0.1"
     strip-ansi "^3.0.1"
 
+wrap-ansi@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz"
+  integrity sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==
+  dependencies:
+    ansi-styles "^3.2.0"
+    string-width "^3.0.0"
+    strip-ansi "^5.0.0"
+
+wrap-ansi@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz"
+  integrity sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
 wrappy@1:
   version "1.0.2"
-  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+  resolved "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz"
+  integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
 
-xregexp@4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/xregexp/-/xregexp-4.0.0.tgz#e698189de49dd2a18cc5687b05e17c8e43943020"
+write-file-atomic@^3.0.0:
+  version "3.0.3"
+  resolved "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-3.0.3.tgz"
+  integrity sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==
+  dependencies:
+    imurmurhash "^0.1.4"
+    is-typedarray "^1.0.0"
+    signal-exit "^3.0.2"
+    typedarray-to-buffer "^3.1.5"
+
+ws@^6.2.1:
+  version "6.2.1"
+  resolved "https://registry.npmjs.org/ws/-/ws-6.2.1.tgz"
+  integrity sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA==
+  dependencies:
+    async-limiter "~1.0.0"
+
+ws@^7.2.3:
+  version "7.3.1"
+  resolved "https://registry.npmjs.org/ws/-/ws-7.3.1.tgz"
+  integrity sha512-D3RuNkynyHmEJIpD2qrgVkc9DQ23OrN/moAwZX4L8DfvszsJxpjQuUq3LMx6HoYji9fbIOBY18XWBsAux1ZZUA==
+
+ws@^7.3.1:
+  version "7.4.1"
+  resolved "https://registry.npmjs.org/ws/-/ws-7.4.1.tgz"
+  integrity sha512-pTsP8UAfhy3sk1lSk/O/s4tjD0CRwvMnzvwr4OKGX7ZvqZtUyx4KIJB5JWbkykPoc55tixMGgTNoh3k4FkNGFQ==
+
+ws@~8.2.3:
+  version "8.2.3"
+  resolved "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz"
+  integrity sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==
+
+xml-name-validator@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-3.0.0.tgz"
+  integrity sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw==
+
+xml-parser@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.npmjs.org/xml-parser/-/xml-parser-1.2.1.tgz"
+  integrity sha1-wx9MNPKXXbgq0BMiISBZJzYVb80=
+  dependencies:
+    debug "^2.2.0"
+
+xmlchars@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz"
+  integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==
+
+xmlhttprequest-ssl@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz"
+  integrity sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A==
 
 xtend@^4.0.0, xtend@~4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.1.tgz#a5c6d532be656e23db820efb943a1f04998d63af"
+  version "4.0.2"
+  resolved "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz"
+  integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
 
 "y18n@^3.2.1 || ^4.0.0", y18n@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.0.tgz#95ef94f85ecc81d007c264e190a120f0a3c8566b"
+  resolved "https://registry.npmjs.org/y18n/-/y18n-4.0.0.tgz"
+  integrity sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w==
 
-yallist@^2.1.2:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52"
+yallist@^3.0.2:
+  version "3.1.1"
+  resolved "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz"
+  integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==
 
-yallist@^3.0.0, yallist@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.0.2.tgz#8452b4bb7e83c7c188d8041c1a837c773d6d8bb9"
+yallist@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz"
+  integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
+
+yargs-parser@20.x:
+  version "20.2.7"
+  resolved "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.7.tgz"
+  integrity sha512-FiNkvbeHzB/syOjIUxFDCnhSfzAL8R5vs40MgLFBorXACCOAEaWu0gRZl14vG8MR9AOJIZbmkjhusqBYZ3HTHw==
+
+yargs-parser@^11.1.1:
+  version "11.1.1"
+  resolved "https://registry.npmjs.org/yargs-parser/-/yargs-parser-11.1.1.tgz"
+  integrity sha512-C6kB/WJDiaxONLJQnF8ccx9SEeoTTLek8RVbaOIsrAUS8VrBEXfmeSnCZxygc+XC2sNMBIwOOnfcxiynjHsVSQ==
+  dependencies:
+    camelcase "^5.0.0"
+    decamelize "^1.2.0"
+
+yargs-parser@^13.1.0:
+  version "13.1.1"
+  resolved "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.1.tgz"
+  integrity sha512-oVAVsHz6uFrg3XQheFII8ESO2ssAf9luWuAd6Wexsu4F3OtIW0o8IribPXYrD4WC24LWtPrJlGy87y5udK+dxQ==
+  dependencies:
+    camelcase "^5.0.0"
+    decamelize "^1.2.0"
 
-yargs-parser@^10.1.0:
-  version "10.1.0"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-10.1.0.tgz#7202265b89f7e9e9f2e5765e0fe735a905edbaa8"
+yargs-parser@^18.1.2:
+  version "18.1.3"
+  resolved "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz"
+  integrity sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==
   dependencies:
-    camelcase "^4.1.0"
+    camelcase "^5.0.0"
+    decamelize "^1.2.0"
 
-yargs@12.0.2, yargs@^12.0.2:
-  version "12.0.2"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-12.0.2.tgz#fe58234369392af33ecbef53819171eff0f5aadc"
+yargs@12.0.5:
+  version "12.0.5"
+  resolved "https://registry.npmjs.org/yargs/-/yargs-12.0.5.tgz"
+  integrity sha512-Lhz8TLaYnxq/2ObqHDql8dX8CJi97oHxrjUcYtzKbbykPtVW9WB+poxI+NM2UIzsMgNCZTIf0AQwsjK5yMAqZw==
   dependencies:
     cliui "^4.0.0"
-    decamelize "^2.0.0"
+    decamelize "^1.2.0"
     find-up "^3.0.0"
     get-caller-file "^1.0.1"
     os-locale "^3.0.0"
@@ -5670,4 +10363,38 @@ yargs@12.0.2, yargs@^12.0.2:
     string-width "^2.0.0"
     which-module "^2.0.0"
     y18n "^3.2.1 || ^4.0.0"
-    yargs-parser "^10.1.0"
+    yargs-parser "^11.1.1"
+
+yargs@13.2.4:
+  version "13.2.4"
+  resolved "https://registry.npmjs.org/yargs/-/yargs-13.2.4.tgz"
+  integrity sha512-HG/DWAJa1PAnHT9JAhNa8AbAv3FPaiLzioSjCcmuXXhP8MlpHO5vwls4g4j6n30Z74GVQj8Xa62dWVx1QCGklg==
+  dependencies:
+    cliui "^5.0.0"
+    find-up "^3.0.0"
+    get-caller-file "^2.0.1"
+    os-locale "^3.1.0"
+    require-directory "^2.1.1"
+    require-main-filename "^2.0.0"
+    set-blocking "^2.0.0"
+    string-width "^3.0.0"
+    which-module "^2.0.0"
+    y18n "^4.0.0"
+    yargs-parser "^13.1.0"
+
+yargs@^15.4.1:
+  version "15.4.1"
+  resolved "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz"
+  integrity sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==
+  dependencies:
+    cliui "^6.0.0"
+    decamelize "^1.2.0"
+    find-up "^4.1.0"
+    get-caller-file "^2.0.1"
+    require-directory "^2.1.1"
+    require-main-filename "^2.0.0"
+    set-blocking "^2.0.0"
+    string-width "^4.2.0"
+    which-module "^2.0.0"
+    y18n "^4.0.0"
+    yargs-parser "^18.1.2"
diff --git a/teamapps-common/pom.xml b/teamapps-common/pom.xml
index 99cea0626..4809edeb2 100644
--- a/teamapps-common/pom.xml
+++ b/teamapps-common/pom.xml
@@ -3,7 +3,7 @@
     <parent>
         <artifactId>teamapps</artifactId>
         <groupId>org.teamapps</groupId>
-        <version>0.9.8-SNAPSHOT</version>
+        <version>0.9.208-SNAPSHOT</version>
     </parent>
     <modelVersion>4.0.0</modelVersion>
 
@@ -33,16 +33,23 @@
         </developer>
     </developers>
 
-    <dependencies>
-        <dependency>
-            <groupId>junit</groupId>
-            <artifactId>junit</artifactId>
-            <scope>test</scope>
-        </dependency>
-        <dependency>
-            <groupId>org.assertj</groupId>
-            <artifactId>assertj-core</artifactId>
-        </dependency>
-    </dependencies>
+    <build>
+        <resources>
+            <resource>
+                <directory>src/main/resources</directory>
+                <filtering>true</filtering>
+                <includes>
+                    <include>**/teamAppsVersion.txt</include>
+                </includes>
+            </resource>
+            <resource>
+                <directory>src/main/resources</directory>
+                <filtering>false</filtering>
+                <excludes>
+                    <exclude>**/teamAppsVersion.txt</exclude>
+                </excludes>
+            </resource>
+        </resources>
+    </build>
 
 </project>
\ No newline at end of file
diff --git a/teamapps-common/src/main/java/org/teamapps/common/TeamAppsVersion.java b/teamapps-common/src/main/java/org/teamapps/common/TeamAppsVersion.java
new file mode 100644
index 000000000..082cb62f4
--- /dev/null
+++ b/teamapps-common/src/main/java/org/teamapps/common/TeamAppsVersion.java
@@ -0,0 +1,29 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.common;
+
+import org.teamapps.common.util.ClassPathResourceUtil;
+
+public class TeamAppsVersion {
+
+	public static final String TEAMAPPS_VERSION = ClassPathResourceUtil.readResourceToString("teamAppsVersion.txt");
+	public static final String TEAMAPPS_DEV_SERVER_VERSION = "DEV";
+
+}
diff --git a/teamapps-common/src/main/java/org/teamapps/common/format/Color.java b/teamapps-common/src/main/java/org/teamapps/common/format/Color.java
index 9aeb9e8fd..94a8ac884 100644
--- a/teamapps-common/src/main/java/org/teamapps/common/format/Color.java
+++ b/teamapps-common/src/main/java/org/teamapps/common/format/Color.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,524 +19,471 @@
  */
 package org.teamapps.common.format;
 
-public class Color {
-
-	public static final Color WHITE = new Color(255, 255, 255, 1);
-	public static final Color BLACK = new Color(0, 0, 0, 1);
-	public static final Color TRANSPARENT = new Color(0, 0, 0, 0);
-
-	public static final Color GRAY = new Color(128, 128, 128);
-	public static final Color GRAY_STANDARD = new Color(119, 119, 119);
-	public static final Color LIGHT_GRAY = new Color(211, 211, 211);
-	public static final Color SILVER = new Color(192, 192, 192);
-	public static final Color DIM_GRAY = new Color(105, 105, 105);
-	public static final Color RED = new Color(255, 0, 0);
-	public static final Color DARK_RED = new Color(139, 0, 0);
-	public static final Color FIRE_BRICK = new Color(178, 34, 34);
-	public static final Color CRIMSON = new Color(220, 20, 60);
-	public static final Color ORANGE_RED = new Color(255, 69, 0);
-	public static final Color CORAL = new Color(255, 127, 80);
-	public static final Color DARK_ORANGE = new Color(255, 140, 0);
-	public static final Color ORANGE = new Color(255, 165, 0);
-	public static final Color YELLOW = new Color(255, 255, 0);
-	public static final Color LIGHT_YELLOW = new Color(255, 255, 224);
-	public static final Color KHAKI = new Color(240, 230, 140);
-	public static final Color DARK_KHAKI = new Color(189, 183, 107);
-	public static final Color GOLD = new Color(255, 215, 0);
-	public static final Color BLUE = new Color(0, 0, 255);
-	public static final Color DARK_BLUE = new Color(0, 0, 139);
-	public static final Color MIDNIGHT_BLUE = new Color(25, 25, 112);
-	public static final Color LIGHT_BLUE = new Color(173, 216, 230);
-	public static final Color SKY_BLUE = new Color(135, 206, 235);
-	public static final Color DEEP_SKY_BLUE = new Color(0, 191, 255);
-	public static final Color NAVY = new Color(0, 0, 128);
-	public static final Color GREEN = new Color(0, 128, 0);
-	public static final Color DARK_GREEN = new Color(0, 100, 0);
-	public static final Color LIGHT_GREEN = new Color(144, 238, 144);
-	public static final Color LIME_GREEN = new Color(50, 205, 50);
-	public static final Color PURPLE = new Color(128, 0, 128);
-	public static final Color BLUE_VIOLET = new Color(138, 43, 226);
-	public static final Color INDIGO = new Color(75, 0, 130);
-	public static final Color BROWN = new Color(165, 42, 42);
-	public static final Color SADDLE_BROWN = new Color(139, 69, 19);
-	public static final Color CHOCOLATE = new Color(210, 105, 30);
-	public static final Color TEAL = new Color(0, 128, 128);
-
-	public static final Color BOOTSTRAP_PRIMARY = new Color(51, 122, 183);
-	public static final Color BOOTSTRAP_SUCCESS = new Color(92, 184, 92);
-	public static final Color BOOTSTRAP_INFO = new Color(91, 192, 222);
-	public static final Color BOOTSTRAP_WARNING = new Color(240, 173, 78);
-	public static final Color BOOTSTRAP_DANGER = new Color(217, 83, 79);
-
-	public static final Color MATERIAL_RED_50 = new Color(255, 235, 238);
-	public static final Color MATERIAL_RED_100 = new Color(255, 205, 210);
-	public static final Color MATERIAL_RED_200 = new Color(239, 154, 154);
-	public static final Color MATERIAL_RED_300 = new Color(229, 115, 115);
-	public static final Color MATERIAL_RED_400 = new Color(239, 83, 80);
-	public static final Color MATERIAL_RED_500 = new Color(244, 67, 54);
-	public static final Color MATERIAL_RED_600 = new Color(229, 57, 53);
-	public static final Color MATERIAL_RED_700 = new Color(211, 47, 47);
-	public static final Color MATERIAL_RED_800 = new Color(198, 40, 40);
-	public static final Color MATERIAL_RED_900 = new Color(183, 28, 28);
-	public static final Color MATERIAL_RED_A100 = new Color(255, 138, 128);
-	public static final Color MATERIAL_RED_A200 = new Color(255, 82, 82);
-	public static final Color MATERIAL_RED_A400 = new Color(255, 23, 68);
-	public static final Color MATERIAL_RED_A700 = new Color(213, 0, 0);
-	public static final Color MATERIAL_PINK_50 = new Color(252, 228, 236);
-	public static final Color MATERIAL_PINK_100 = new Color(248, 187, 208);
-	public static final Color MATERIAL_PINK_200 = new Color(244, 143, 177);
-	public static final Color MATERIAL_PINK_300 = new Color(240, 98, 146);
-	public static final Color MATERIAL_PINK_400 = new Color(236, 64, 122);
-	public static final Color MATERIAL_PINK_500 = new Color(233, 30, 99);
-	public static final Color MATERIAL_PINK_600 = new Color(216, 27, 96);
-	public static final Color MATERIAL_PINK_700 = new Color(194, 24, 91);
-	public static final Color MATERIAL_PINK_800 = new Color(173, 20, 87);
-	public static final Color MATERIAL_PINK_900 = new Color(136, 14, 79);
-	public static final Color MATERIAL_PINK_A100 = new Color(255, 128, 171);
-	public static final Color MATERIAL_PINK_A200 = new Color(255, 64, 129);
-	public static final Color MATERIAL_PINK_A400 = new Color(245, 0, 87);
-	public static final Color MATERIAL_PINK_A700 = new Color(197, 17, 98);
-	public static final Color MATERIAL_PURPLE_50 = new Color(243, 229, 245);
-	public static final Color MATERIAL_PURPLE_100 = new Color(225, 190, 231);
-	public static final Color MATERIAL_PURPLE_200 = new Color(206, 147, 216);
-	public static final Color MATERIAL_PURPLE_300 = new Color(186, 104, 200);
-	public static final Color MATERIAL_PURPLE_400 = new Color(171, 71, 188);
-	public static final Color MATERIAL_PURPLE_500 = new Color(156, 39, 176);
-	public static final Color MATERIAL_PURPLE_600 = new Color(142, 36, 170);
-	public static final Color MATERIAL_PURPLE_700 = new Color(123, 31, 162);
-	public static final Color MATERIAL_PURPLE_800 = new Color(106, 27, 154);
-	public static final Color MATERIAL_PURPLE_900 = new Color(74, 20, 140);
-	public static final Color MATERIAL_PURPLE_A100 = new Color(234, 128, 252);
-	public static final Color MATERIAL_PURPLE_A200 = new Color(224, 64, 251);
-	public static final Color MATERIAL_PURPLE_A400 = new Color(213, 0, 249);
-	public static final Color MATERIAL_PURPLE_A700 = new Color(170, 0, 255);
-	public static final Color MATERIAL_DEEP_PURPLE_50 = new Color(237, 231, 246);
-	public static final Color MATERIAL_DEEP_PURPLE_100 = new Color(209, 196, 233);
-	public static final Color MATERIAL_DEEP_PURPLE_200 = new Color(179, 157, 219);
-	public static final Color MATERIAL_DEEP_PURPLE_300 = new Color(149, 117, 205);
-	public static final Color MATERIAL_DEEP_PURPLE_400 = new Color(126, 87, 194);
-	public static final Color MATERIAL_DEEP_PURPLE_500 = new Color(103, 58, 183);
-	public static final Color MATERIAL_DEEP_PURPLE_600 = new Color(94, 53, 177);
-	public static final Color MATERIAL_DEEP_PURPLE_700 = new Color(81, 45, 168);
-	public static final Color MATERIAL_DEEP_PURPLE_800 = new Color(69, 39, 160);
-	public static final Color MATERIAL_DEEP_PURPLE_900 = new Color(49, 27, 146);
-	public static final Color MATERIAL_DEEP_PURPLE_A100 = new Color(179, 136, 255);
-	public static final Color MATERIAL_DEEP_PURPLE_A200 = new Color(124, 77, 255);
-	public static final Color MATERIAL_DEEP_PURPLE_A400 = new Color(101, 31, 255);
-	public static final Color MATERIAL_DEEP_PURPLE_A700 = new Color(98, 0, 234);
-	public static final Color MATERIAL_INDIGO_50 = new Color(232, 234, 246);
-	public static final Color MATERIAL_INDIGO_100 = new Color(197, 202, 233);
-	public static final Color MATERIAL_INDIGO_200 = new Color(159, 168, 218);
-	public static final Color MATERIAL_INDIGO_300 = new Color(121, 134, 203);
-	public static final Color MATERIAL_INDIGO_400 = new Color(92, 107, 192);
-	public static final Color MATERIAL_INDIGO_500 = new Color(63, 81, 181);
-	public static final Color MATERIAL_INDIGO_600 = new Color(57, 73, 171);
-	public static final Color MATERIAL_INDIGO_700 = new Color(48, 63, 159);
-	public static final Color MATERIAL_INDIGO_800 = new Color(40, 53, 147);
-	public static final Color MATERIAL_INDIGO_900 = new Color(26, 35, 126);
-	public static final Color MATERIAL_INDIGO_A100 = new Color(140, 158, 255);
-	public static final Color MATERIAL_INDIGO_A200 = new Color(83, 109, 254);
-	public static final Color MATERIAL_INDIGO_A400 = new Color(61, 90, 254);
-	public static final Color MATERIAL_INDIGO_A700 = new Color(48, 79, 254);
-	public static final Color MATERIAL_BLUE_50 = new Color(227, 242, 253);
-	public static final Color MATERIAL_BLUE_100 = new Color(187, 222, 251);
-	public static final Color MATERIAL_BLUE_200 = new Color(144, 202, 249);
-	public static final Color MATERIAL_BLUE_300 = new Color(100, 181, 246);
-	public static final Color MATERIAL_BLUE_400 = new Color(66, 165, 245);
-	public static final Color MATERIAL_BLUE_500 = new Color(33, 150, 243);
-	public static final Color MATERIAL_BLUE_600 = new Color(30, 136, 229);
-	public static final Color MATERIAL_BLUE_700 = new Color(25, 118, 210);
-	public static final Color MATERIAL_BLUE_800 = new Color(21, 101, 192);
-	public static final Color MATERIAL_BLUE_900 = new Color(13, 71, 161);
-	public static final Color MATERIAL_BLUE_A100 = new Color(130, 177, 255);
-	public static final Color MATERIAL_BLUE_A200 = new Color(68, 138, 255);
-	public static final Color MATERIAL_BLUE_A400 = new Color(41, 121, 255);
-	public static final Color MATERIAL_BLUE_A700 = new Color(41, 98, 255);
-	public static final Color MATERIAL_LIGHT_BLUE_50 = new Color(225, 245, 254);
-	public static final Color MATERIAL_LIGHT_BLUE_100 = new Color(179, 229, 252);
-	public static final Color MATERIAL_LIGHT_BLUE_200 = new Color(129, 212, 250);
-	public static final Color MATERIAL_LIGHT_BLUE_300 = new Color(79, 195, 247);
-	public static final Color MATERIAL_LIGHT_BLUE_400 = new Color(41, 182, 252);
-	public static final Color MATERIAL_LIGHT_BLUE_500 = new Color(3, 169, 244);
-	public static final Color MATERIAL_LIGHT_BLUE_600 = new Color(3, 155, 229);
-	public static final Color MATERIAL_LIGHT_BLUE_700 = new Color(2, 136, 209);
-	public static final Color MATERIAL_LIGHT_BLUE_800 = new Color(2, 119, 189);
-	public static final Color MATERIAL_LIGHT_BLUE_900 = new Color(1, 87, 155);
-	public static final Color MATERIAL_LIGHT_BLUE_A100 = new Color(128, 216, 255);
-	public static final Color MATERIAL_LIGHT_BLUE_A200 = new Color(64, 196, 255);
-	public static final Color MATERIAL_LIGHT_BLUE_A400 = new Color(0, 176, 255);
-	public static final Color MATERIAL_LIGHT_BLUE_A700 = new Color(0, 145, 234);
-	public static final Color MATERIAL_CYAN_50 = new Color(224, 247, 250);
-	public static final Color MATERIAL_CYAN_100 = new Color(178, 235, 242);
-	public static final Color MATERIAL_CYAN_200 = new Color(128, 222, 234);
-	public static final Color MATERIAL_CYAN_300 = new Color(77, 208, 225);
-	public static final Color MATERIAL_CYAN_400 = new Color(38, 198, 218);
-	public static final Color MATERIAL_CYAN_500 = new Color(0, 188, 212);
-	public static final Color MATERIAL_CYAN_600 = new Color(0, 172, 193);
-	public static final Color MATERIAL_CYAN_700 = new Color(0, 151, 167);
-	public static final Color MATERIAL_CYAN_800 = new Color(0, 131, 143);
-	public static final Color MATERIAL_CYAN_900 = new Color(0, 96, 100);
-	public static final Color MATERIAL_CYAN_A100 = new Color(132, 255, 255);
-	public static final Color MATERIAL_CYAN_A200 = new Color(24, 255, 255);
-	public static final Color MATERIAL_CYAN_A400 = new Color(0, 229, 255);
-	public static final Color MATERIAL_CYAN_A700 = new Color(0, 184, 212);
-	public static final Color MATERIAL_TEAL_50 = new Color(224, 242, 241);
-	public static final Color MATERIAL_TEAL_100 = new Color(178, 223, 219);
-	public static final Color MATERIAL_TEAL_200 = new Color(128, 203, 196);
-	public static final Color MATERIAL_TEAL_300 = new Color(77, 182, 172);
-	public static final Color MATERIAL_TEAL_400 = new Color(38, 166, 154);
-	public static final Color MATERIAL_TEAL_500 = new Color(0, 150, 136);
-	public static final Color MATERIAL_TEAL_600 = new Color(0, 137, 123);
-	public static final Color MATERIAL_TEAL_700 = new Color(0, 121, 107);
-	public static final Color MATERIAL_TEAL_800 = new Color(0, 105, 92);
-	public static final Color MATERIAL_TEAL_900 = new Color(0, 77, 64);
-	public static final Color MATERIAL_TEAL_A100 = new Color(167, 255, 235);
-	public static final Color MATERIAL_TEAL_A200 = new Color(100, 255, 218);
-	public static final Color MATERIAL_TEAL_A400 = new Color(29, 233, 182);
-	public static final Color MATERIAL_TEAL_A700 = new Color(0, 191, 165);
-	public static final Color MATERIAL_GREEN_50 = new Color(232, 245, 233);
-	public static final Color MATERIAL_GREEN_100 = new Color(200, 230, 201);
-	public static final Color MATERIAL_GREEN_200 = new Color(165, 214, 167);
-	public static final Color MATERIAL_GREEN_300 = new Color(129, 199, 132);
-	public static final Color MATERIAL_GREEN_400 = new Color(102, 187, 106);
-	public static final Color MATERIAL_GREEN_500 = new Color(76, 175, 80);
-	public static final Color MATERIAL_GREEN_600 = new Color(67, 160, 71);
-	public static final Color MATERIAL_GREEN_700 = new Color(56, 142, 60);
-	public static final Color MATERIAL_GREEN_800 = new Color(46, 125, 50);
-	public static final Color MATERIAL_GREEN_900 = new Color(27, 94, 32);
-	public static final Color MATERIAL_GREEN_A100 = new Color(185, 246, 202);
-	public static final Color MATERIAL_GREEN_A200 = new Color(105, 240, 174);
-	public static final Color MATERIAL_GREEN_A400 = new Color(0, 230, 118);
-	public static final Color MATERIAL_GREEN_A700 = new Color(0, 200, 83);
-	public static final Color MATERIAL_LIGHT_GREEN_50 = new Color(241, 248, 233);
-	public static final Color MATERIAL_LIGHT_GREEN_100 = new Color(220, 237, 200);
-	public static final Color MATERIAL_LIGHT_GREEN_200 = new Color(197, 225, 165);
-	public static final Color MATERIAL_LIGHT_GREEN_300 = new Color(174, 213, 129);
-	public static final Color MATERIAL_LIGHT_GREEN_400 = new Color(156, 204, 101);
-	public static final Color MATERIAL_LIGHT_GREEN_500 = new Color(139, 195, 74);
-	public static final Color MATERIAL_LIGHT_GREEN_600 = new Color(124, 179, 66);
-	public static final Color MATERIAL_LIGHT_GREEN_700 = new Color(104, 159, 56);
-	public static final Color MATERIAL_LIGHT_GREEN_800 = new Color(85, 139, 47);
-	public static final Color MATERIAL_LIGHT_GREEN_900 = new Color(51, 105, 30);
-	public static final Color MATERIAL_LIGHT_GREEN_A100 = new Color(204, 255, 144);
-	public static final Color MATERIAL_LIGHT_GREEN_A200 = new Color(178, 255, 89);
-	public static final Color MATERIAL_LIGHT_GREEN_A400 = new Color(118, 255, 3);
-	public static final Color MATERIAL_LIGHT_GREEN_A700 = new Color(100, 221, 23);
-	public static final Color MATERIAL_LIME_50 = new Color(249, 251, 231);
-	public static final Color MATERIAL_LIME_100 = new Color(240, 244, 195);
-	public static final Color MATERIAL_LIME_200 = new Color(230, 238, 156);
-	public static final Color MATERIAL_LIME_300 = new Color(220, 231, 117);
-	public static final Color MATERIAL_LIME_400 = new Color(212, 225, 87);
-	public static final Color MATERIAL_LIME_500 = new Color(205, 220, 57);
-	public static final Color MATERIAL_LIME_600 = new Color(192, 202, 51);
-	public static final Color MATERIAL_LIME_700 = new Color(164, 180, 43);
-	public static final Color MATERIAL_LIME_800 = new Color(158, 157, 36);
-	public static final Color MATERIAL_LIME_900 = new Color(130, 119, 23);
-	public static final Color MATERIAL_LIME_A100 = new Color(244, 255, 129);
-	public static final Color MATERIAL_LIME_A200 = new Color(238, 255, 65);
-	public static final Color MATERIAL_LIME_A400 = new Color(198, 255, 0);
-	public static final Color MATERIAL_LIME_A700 = new Color(174, 234, 0);
-	public static final Color MATERIAL_YELLOW_50 = new Color(255, 253, 231);
-	public static final Color MATERIAL_YELLOW_100 = new Color(255, 249, 196);
-	public static final Color MATERIAL_YELLOW_200 = new Color(255, 245, 144);
-	public static final Color MATERIAL_YELLOW_300 = new Color(255, 241, 118);
-	public static final Color MATERIAL_YELLOW_400 = new Color(255, 238, 88);
-	public static final Color MATERIAL_YELLOW_500 = new Color(255, 235, 59);
-	public static final Color MATERIAL_YELLOW_600 = new Color(253, 216, 53);
-	public static final Color MATERIAL_YELLOW_700 = new Color(251, 192, 45);
-	public static final Color MATERIAL_YELLOW_800 = new Color(249, 168, 37);
-	public static final Color MATERIAL_YELLOW_900 = new Color(245, 127, 23);
-	public static final Color MATERIAL_YELLOW_A100 = new Color(255, 255, 130);
-	public static final Color MATERIAL_YELLOW_A200 = new Color(255, 255, 0);
-	public static final Color MATERIAL_YELLOW_A400 = new Color(255, 234, 0);
-	public static final Color MATERIAL_YELLOW_A700 = new Color(255, 214, 0);
-	public static final Color MATERIAL_AMBER_50 = new Color(255, 248, 225);
-	public static final Color MATERIAL_AMBER_100 = new Color(255, 236, 179);
-	public static final Color MATERIAL_AMBER_200 = new Color(255, 224, 130);
-	public static final Color MATERIAL_AMBER_300 = new Color(255, 213, 79);
-	public static final Color MATERIAL_AMBER_400 = new Color(255, 202, 40);
-	public static final Color MATERIAL_AMBER_500 = new Color(255, 193, 7);
-	public static final Color MATERIAL_AMBER_600 = new Color(255, 179, 0);
-	public static final Color MATERIAL_AMBER_700 = new Color(255, 160, 0);
-	public static final Color MATERIAL_AMBER_800 = new Color(255, 143, 0);
-	public static final Color MATERIAL_AMBER_900 = new Color(255, 111, 0);
-	public static final Color MATERIAL_AMBER_A100 = new Color(255, 229, 127);
-	public static final Color MATERIAL_AMBER_A200 = new Color(255, 215, 64);
-	public static final Color MATERIAL_AMBER_A400 = new Color(255, 196, 0);
-	public static final Color MATERIAL_AMBER_A700 = new Color(255, 171, 0);
-	public static final Color MATERIAL_ORANGE_50 = new Color(255, 243, 224);
-	public static final Color MATERIAL_ORANGE_100 = new Color(255, 224, 178);
-	public static final Color MATERIAL_ORANGE_200 = new Color(255, 204, 128);
-	public static final Color MATERIAL_ORANGE_300 = new Color(255, 183, 77);
-	public static final Color MATERIAL_ORANGE_400 = new Color(255, 167, 38);
-	public static final Color MATERIAL_ORANGE_500 = new Color(255, 152, 0);
-	public static final Color MATERIAL_ORANGE_600 = new Color(251, 140, 0);
-	public static final Color MATERIAL_ORANGE_700 = new Color(245, 124, 0);
-	public static final Color MATERIAL_ORANGE_800 = new Color(239, 108, 0);
-	public static final Color MATERIAL_ORANGE_900 = new Color(230, 81, 0);
-	public static final Color MATERIAL_ORANGE_A100 = new Color(255, 209, 128);
-	public static final Color MATERIAL_ORANGE_A200 = new Color(255, 171, 64);
-	public static final Color MATERIAL_ORANGE_A400 = new Color(255, 145, 0);
-	public static final Color MATERIAL_ORANGE_A700 = new Color(255, 109, 0);
-	public static final Color MATERIAL_DEEP_ORANGE_50 = new Color(251, 233, 167);
-	public static final Color MATERIAL_DEEP_ORANGE_100 = new Color(255, 204, 188);
-	public static final Color MATERIAL_DEEP_ORANGE_200 = new Color(255, 171, 145);
-	public static final Color MATERIAL_DEEP_ORANGE_300 = new Color(255, 138, 101);
-	public static final Color MATERIAL_DEEP_ORANGE_400 = new Color(255, 112, 67);
-	public static final Color MATERIAL_DEEP_ORANGE_500 = new Color(255, 87, 34);
-	public static final Color MATERIAL_DEEP_ORANGE_600 = new Color(244, 81, 30);
-	public static final Color MATERIAL_DEEP_ORANGE_700 = new Color(230, 74, 25);
-	public static final Color MATERIAL_DEEP_ORANGE_800 = new Color(216, 67, 21);
-	public static final Color MATERIAL_DEEP_ORANGE_900 = new Color(191, 54, 12);
-	public static final Color MATERIAL_DEEP_ORANGE_A100 = new Color(255, 158, 128);
-	public static final Color MATERIAL_DEEP_ORANGE_A200 = new Color(255, 110, 64);
-	public static final Color MATERIAL_DEEP_ORANGE_A400 = new Color(255, 61, 0);
-	public static final Color MATERIAL_DEEP_ORANGE_A700 = new Color(221, 38, 0);
-	public static final Color MATERIAL_BROWN_50 = new Color(239, 235, 233);
-	public static final Color MATERIAL_BROWN_100 = new Color(215, 204, 200);
-	public static final Color MATERIAL_BROWN_200 = new Color(188, 170, 164);
-	public static final Color MATERIAL_BROWN_300 = new Color(161, 136, 127);
-	public static final Color MATERIAL_BROWN_400 = new Color(141, 110, 99);
-	public static final Color MATERIAL_BROWN_500 = new Color(121, 85, 72);
-	public static final Color MATERIAL_BROWN_600 = new Color(109, 76, 65);
-	public static final Color MATERIAL_BROWN_700 = new Color(93, 64, 55);
-	public static final Color MATERIAL_BROWN_800 = new Color(78, 52, 46);
-	public static final Color MATERIAL_BROWN_900 = new Color(62, 39, 35);
-	public static final Color MATERIAL_GREY_50 = new Color(250, 250, 250);
-	public static final Color MATERIAL_GREY_100 = new Color(245, 245, 245);
-	public static final Color MATERIAL_GREY_200 = new Color(238, 238, 238);
-	public static final Color MATERIAL_GREY_300 = new Color(224, 224, 224);
-	public static final Color MATERIAL_GREY_400 = new Color(189, 189, 189);
-	public static final Color MATERIAL_GREY_500 = new Color(158, 158, 158);
-	public static final Color MATERIAL_GREY_600 = new Color(117, 117, 117);
-	public static final Color MATERIAL_GREY_700 = new Color(97, 97, 97);
-	public static final Color MATERIAL_GREY_800 = new Color(66, 66, 66);
-	public static final Color MATERIAL_GREY_900 = new Color(33, 33, 33);
-	public static final Color MATERIAL_BLACK_1000 = new Color(0, 0, 0);
-	public static final Color MATERIAL_WHITE_1000 = new Color(255, 255, 255);
-	public static final Color MATERIAL_BLUE_GREY_50 = new Color(236, 239, 241);
-	public static final Color MATERIAL_BLUE_GREY_100 = new Color(207, 216, 220);
-	public static final Color MATERIAL_BLUE_GREY_200 = new Color(176, 187, 197);
-	public static final Color MATERIAL_BLUE_GREY_300 = new Color(144, 164, 174);
-	public static final Color MATERIAL_BLUE_GREY_400 = new Color(120, 144, 156);
-	public static final Color MATERIAL_BLUE_GREY_500 = new Color(96, 125, 139);
-	public static final Color MATERIAL_BLUE_GREY_600 = new Color(84, 110, 122);
-	public static final Color MATERIAL_BLUE_GREY_700 = new Color(69, 90, 100);
-	public static final Color MATERIAL_BLUE_GREY_800 = new Color(55, 71, 79);
-	public static final Color MATERIAL_BLUE_GREY_900 = new Color(38, 50, 56);
-
-	private final int red;
-	private final int green;
-	private final int blue;
-	private final float alpha;
-
-	public static Color from(java.awt.Color color) {
-		return new Color(color.getRed(), color.getGreen(), color.getBlue(), ((float) color.getAlpha()) / 255);
-	}
-
-	public static Color from(java.awt.Color color, float alpha) {
-		return new Color(color.getRed(), color.getGreen(), color.getBlue(), alpha);
-	}
-
-	public static Color fromHsba(float h, float s, float b, float alpha) {
-		int rgb = java.awt.Color.HSBtoRGB(h, s, b);
-		return fromRgbaValue((rgb << 8) | (((int) (alpha * 255)) & 0xff));
-	}
-
-	public static Color fromRgbValue(int rgb) {
-		int r = (rgb & 0x00ff0000) >> 16;
-		int g = (rgb & 0x0000ff00) >> 8;
-		int b = (rgb & 0x000000ff);
-		return new Color(r, g, b);
-	}
-
-	public static Color fromRgbaValue(int rgba) {
-		int r = (rgba >> 24) & 0xff;
-		int g = (rgba >> 16) & 0xff;
-		int b = (rgba >> 8) & 0xff;
-		int a = rgba & 0xff;
-		return new Color(r, g, b, a);
-	}
-
-	public static Color fromHex(String hex) {
-		if (hex.startsWith("#")) {
-			hex = hex.substring(1);
-		}
-		int r = Integer.valueOf(hex.substring(0, 2), 16);
-		int g = Integer.valueOf(hex.substring(2, 4), 16);
-		int b = Integer.valueOf(hex.substring(4, 6), 16);
-		int a = hex.length() == 8 ? Integer.valueOf(hex.substring(6, 8), 16) : 1;
-
-		return new Color(r, g, b, a);
-	}
-
-	public static Color withAlpha(Color color, float alpha) {
-		if (color == null) {
-			return null;
-		}
-		return color.withAlpha(alpha);
+public interface Color {
+
+	String toHtmlColorString();
+
+	
+	// ======== static ========
+
+	RgbaColor TRANSPARENT = new RgbaColor(0, 0, 0, 0);
+
+	RgbaColor ALICE_BLUE = new RgbaColor(240, 248, 255);
+	RgbaColor ANTIQUE_WHITE = new RgbaColor(250, 235, 215);
+	RgbaColor AQUA = new RgbaColor(0, 255, 255);
+	RgbaColor AQUA_MARINE = new RgbaColor(127, 255, 212);
+	RgbaColor AZURE = new RgbaColor(240, 255, 255);
+	RgbaColor BEIGE = new RgbaColor(245, 245, 220);
+	RgbaColor BISQUE = new RgbaColor(255, 228, 196);
+	RgbaColor BLACK = new RgbaColor(0, 0, 0);
+	RgbaColor BLANCHED_ALMOND = new RgbaColor(255, 235, 205);
+	RgbaColor BLUE = new RgbaColor(0, 0, 255);
+	RgbaColor BLUE_VIOLET = new RgbaColor(138, 43, 226);
+	RgbaColor BROWN = new RgbaColor(165, 42, 42);
+	RgbaColor BURLY_WOOD = new RgbaColor(222, 184, 135);
+	RgbaColor CADET_BLUE = new RgbaColor(95, 158, 160);
+	RgbaColor CHARTREUSE = new RgbaColor(127, 255, 0);
+	RgbaColor CHOCOLATE = new RgbaColor(210, 105, 30);
+	RgbaColor CORAL = new RgbaColor(255, 127, 80);
+	RgbaColor CORN_FLOWER_BLUE = new RgbaColor(100, 149, 237);
+	RgbaColor CORN_SILK = new RgbaColor(255, 248, 220);
+	RgbaColor CRIMSON = new RgbaColor(220, 20, 60);
+	RgbaColor CYAN = new RgbaColor(0, 255, 255);
+	RgbaColor DARK_BLUE = new RgbaColor(0, 0, 139);
+	RgbaColor DARK_CYAN = new RgbaColor(0, 139, 139);
+	RgbaColor DARK_GOLDEN_ROD = new RgbaColor(184, 134, 11);
+	RgbaColor DARK_GRAY = new RgbaColor(169, 169, 169);
+	RgbaColor DARK_GREEN = new RgbaColor(0, 100, 0);
+	RgbaColor DARK_GREY = new RgbaColor(169, 169, 169);
+	RgbaColor DARK_KHAKI = new RgbaColor(189, 183, 107);
+	RgbaColor DARK_MAGENTA = new RgbaColor(139, 0, 139);
+	RgbaColor DARK_OLIVE_GREEN = new RgbaColor(85, 107, 47);
+	RgbaColor DARK_ORANGE = new RgbaColor(255, 140, 0);
+	RgbaColor DARK_ORCHID = new RgbaColor(153, 50, 204);
+	RgbaColor DARK_RED = new RgbaColor(139, 0, 0);
+	RgbaColor DARK_SALMON = new RgbaColor(233, 150, 122);
+	RgbaColor DARK_SEA_GREEN = new RgbaColor(143, 188, 143);
+	RgbaColor DARK_SLATE_BLUE = new RgbaColor(72, 61, 139);
+	RgbaColor DARK_SLATE_GRAY = new RgbaColor(47, 79, 79);
+	RgbaColor DARK_SLATE_GREY = new RgbaColor(47, 79, 79);
+	RgbaColor DARK_TURQUOISE = new RgbaColor(0, 206, 209);
+	RgbaColor DARK_VIOLET = new RgbaColor(148, 0, 211);
+	RgbaColor DEEP_PINK = new RgbaColor(255, 20, 147);
+	RgbaColor DEEP_SKY_BLUE = new RgbaColor(0, 191, 255);
+	RgbaColor DIMG_RAY = new RgbaColor(105, 105, 105);
+	RgbaColor DIMG_REY = new RgbaColor(105, 105, 105);
+	RgbaColor DODGER_BLUE = new RgbaColor(30, 144, 255);
+	RgbaColor FIRE_BRICK = new RgbaColor(178, 34, 34);
+	RgbaColor FLORAL_WHITE = new RgbaColor(255, 250, 240);
+	RgbaColor FOREST_GREEN = new RgbaColor(34, 139, 34);
+	RgbaColor FUCHSIA = new RgbaColor(255, 0, 255);
+	RgbaColor GAINSBORO = new RgbaColor(220, 220, 220);
+	RgbaColor GHOST_WHITE = new RgbaColor(248, 248, 255);
+	RgbaColor GOLD = new RgbaColor(255, 215, 0);
+	RgbaColor GOLDEN_ROD = new RgbaColor(218, 165, 32);
+	RgbaColor GRAY = new RgbaColor(128, 128, 128);
+	RgbaColor GREEN = new RgbaColor(0, 128, 0);
+	RgbaColor GREEN_YELLOW = new RgbaColor(173, 255, 47);
+	RgbaColor GREY = new RgbaColor(128, 128, 128);
+	RgbaColor HONEY_DEW = new RgbaColor(240, 255, 240);
+	RgbaColor HOT_PINK = new RgbaColor(255, 105, 180);
+	RgbaColor INDIAN_RED = new RgbaColor(205, 92, 92);
+	RgbaColor INDIGO = new RgbaColor(75, 0, 130);
+	RgbaColor IVORY = new RgbaColor(255, 255, 240);
+	RgbaColor KHAKI = new RgbaColor(240, 230, 140);
+	RgbaColor LAVENDER = new RgbaColor(230, 230, 250);
+	RgbaColor LAVENDER_BLUSH = new RgbaColor(255, 240, 245);
+	RgbaColor LAWN_GREEN = new RgbaColor(124, 252, 0);
+	RgbaColor LEMON_CHIFFON = new RgbaColor(255, 250, 205);
+	RgbaColor LIGHT_BLUE = new RgbaColor(173, 216, 230);
+	RgbaColor LIGHT_CORAL = new RgbaColor(240, 128, 128);
+	RgbaColor LIGHT_CYAN = new RgbaColor(224, 255, 255);
+	RgbaColor LIGHT_GOLDEN_ROD_YELLOW = new RgbaColor(250, 250, 210);
+	RgbaColor LIGHT_GRAY = new RgbaColor(211, 211, 211);
+	RgbaColor LIGHT_GREEN = new RgbaColor(144, 238, 144);
+	RgbaColor LIGHT_GREY = new RgbaColor(211, 211, 211);
+	RgbaColor LIGHT_PINK = new RgbaColor(255, 182, 193);
+	RgbaColor LIGHT_SALMON = new RgbaColor(255, 160, 122);
+	RgbaColor LIGHT_SEA_GREEN = new RgbaColor(32, 178, 170);
+	RgbaColor LIGHT_SKY_BLUE = new RgbaColor(135, 206, 250);
+	RgbaColor LIGHT_SLATE_GRAY = new RgbaColor(119, 136, 153);
+	RgbaColor LIGHT_SLATE_GREY = new RgbaColor(119, 136, 153);
+	RgbaColor LIGHT_STEEL_BLUE = new RgbaColor(176, 196, 222);
+	RgbaColor LIGHT_YELLOW = new RgbaColor(255, 255, 224);
+	RgbaColor LIME = new RgbaColor(0, 255, 0);
+	RgbaColor LIME_GREEN = new RgbaColor(50, 205, 50);
+	RgbaColor LINEN = new RgbaColor(250, 240, 230);
+	RgbaColor MAGENTA = new RgbaColor(255, 0, 255);
+	RgbaColor MAROON = new RgbaColor(128, 0, 0);
+	RgbaColor MEDIUM_AQUA_MARINE = new RgbaColor(102, 205, 170);
+	RgbaColor MEDIUM_BLUE = new RgbaColor(0, 0, 205);
+	RgbaColor MEDIUM_ORCHID = new RgbaColor(186, 85, 211);
+	RgbaColor MEDIUM_PURPLE = new RgbaColor(147, 112, 219);
+	RgbaColor MEDIUM_SEAG_REEN = new RgbaColor(60, 179, 113);
+	RgbaColor MEDIUM_SLATE_BLUE = new RgbaColor(123, 104, 238);
+	RgbaColor MEDIUM_SPRING_GREEN = new RgbaColor(0, 250, 154);
+	RgbaColor MEDIUM_TURQUOISE = new RgbaColor(72, 209, 204);
+	RgbaColor MEDIUM_VIOLET_RED = new RgbaColor(199, 21, 133);
+	RgbaColor MIDNIGHT_BLUE = new RgbaColor(25, 25, 112);
+	RgbaColor MINT_CREAM = new RgbaColor(245, 255, 250);
+	RgbaColor MISTY_ROSE = new RgbaColor(255, 228, 225);
+	RgbaColor MOCCASIN = new RgbaColor(255, 228, 181);
+	RgbaColor NAVAJO_WHITE = new RgbaColor(255, 222, 173);
+	RgbaColor NAVY = new RgbaColor(0, 0, 128);
+	RgbaColor OLD_LACE = new RgbaColor(253, 245, 230);
+	RgbaColor OLIVE = new RgbaColor(128, 128, 0);
+	RgbaColor OLIVE_DRAB = new RgbaColor(107, 142, 35);
+	RgbaColor ORANGE = new RgbaColor(255, 165, 0);
+	RgbaColor ORANGE_RED = new RgbaColor(255, 69, 0);
+	RgbaColor ORCHID = new RgbaColor(218, 112, 214);
+	RgbaColor PALE_GOLDEN_ROD = new RgbaColor(238, 232, 170);
+	RgbaColor PALE_GREEN = new RgbaColor(152, 251, 152);
+	RgbaColor PALE_TURQUOISE = new RgbaColor(175, 238, 238);
+	RgbaColor PALE_VIOLET_RED = new RgbaColor(219, 112, 147);
+	RgbaColor PAPAYA_WHIP = new RgbaColor(255, 239, 213);
+	RgbaColor PEACH_PUFF = new RgbaColor(255, 218, 185);
+	RgbaColor PERU = new RgbaColor(205, 133, 63);
+	RgbaColor PINK = new RgbaColor(255, 192, 203);
+	RgbaColor PLUM = new RgbaColor(221, 160, 221);
+	RgbaColor POWDER_BLUE = new RgbaColor(176, 224, 230);
+	RgbaColor PURPLE = new RgbaColor(128, 0, 128);
+	RgbaColor RED = new RgbaColor(255, 0, 0);
+	RgbaColor ROSY_BROWN = new RgbaColor(188, 143, 143);
+	RgbaColor ROYAL_BLUE = new RgbaColor(65, 105, 225);
+	RgbaColor SADDLE_BROWN = new RgbaColor(139, 69, 19);
+	RgbaColor SALMON = new RgbaColor(250, 128, 114);
+	RgbaColor SANDY_BROWN = new RgbaColor(244, 164, 96);
+	RgbaColor SEA_GREEN = new RgbaColor(46, 139, 87);
+	RgbaColor SEA_SHELL = new RgbaColor(255, 245, 238);
+	RgbaColor SIENNA = new RgbaColor(160, 82, 45);
+	RgbaColor SILVER = new RgbaColor(192, 192, 192);
+	RgbaColor SKY_BLUE = new RgbaColor(135, 206, 235);
+	RgbaColor SLATE_BLUE = new RgbaColor(106, 90, 205);
+	RgbaColor SLATE_GRAY = new RgbaColor(112, 128, 144);
+	RgbaColor SLATE_GREY = new RgbaColor(112, 128, 144);
+	RgbaColor SNOW = new RgbaColor(255, 250, 250);
+	RgbaColor SPRING_GREEN = new RgbaColor(0, 255, 127);
+	RgbaColor STEEL_BLUE = new RgbaColor(70, 130, 180);
+	RgbaColor TAN = new RgbaColor(210, 180, 140);
+	RgbaColor TEAL = new RgbaColor(0, 128, 128);
+	RgbaColor THISTLE = new RgbaColor(216, 191, 216);
+	RgbaColor TOMATO = new RgbaColor(255, 99, 71);
+	RgbaColor TURQUOISE = new RgbaColor(64, 224, 208);
+	RgbaColor VIOLET = new RgbaColor(238, 130, 238);
+	RgbaColor WHEAT = new RgbaColor(245, 222, 179);
+	RgbaColor WHITE = new RgbaColor(255, 255, 255);
+	RgbaColor WHITE_SMOKE = new RgbaColor(245, 245, 245);
+	RgbaColor YELLOW = new RgbaColor(255, 255, 0);
+	RgbaColor YELLOW_GREEN = new RgbaColor(154, 205, 50);
+
+	RgbaColor GRAY_STANDARD = new RgbaColor(119, 119, 119);
+	RgbaColor DIM_GRAY = new RgbaColor(105, 105, 105);
+
+	CssStringColor PRIMARY = fromVariableName("--ta-color-primary");
+	CssStringColor SUCCESS = fromVariableName("--ta-color-success");
+	CssStringColor INFO = fromVariableName("--ta-color-info");
+	CssStringColor WARNING = fromVariableName("--ta-color-warning");
+	CssStringColor DANGER = fromVariableName("--ta-color-danger");
+
+	RgbaColor MATERIAL_RED_50 = new RgbaColor(255, 235, 238);
+	RgbaColor MATERIAL_RED_100 = new RgbaColor(255, 205, 210);
+	RgbaColor MATERIAL_RED_200 = new RgbaColor(239, 154, 154);
+	RgbaColor MATERIAL_RED_300 = new RgbaColor(229, 115, 115);
+	RgbaColor MATERIAL_RED_400 = new RgbaColor(239, 83, 80);
+	RgbaColor MATERIAL_RED_500 = new RgbaColor(244, 67, 54);
+	RgbaColor MATERIAL_RED_600 = new RgbaColor(229, 57, 53);
+	RgbaColor MATERIAL_RED_700 = new RgbaColor(211, 47, 47);
+	RgbaColor MATERIAL_RED_800 = new RgbaColor(198, 40, 40);
+	RgbaColor MATERIAL_RED_900 = new RgbaColor(183, 28, 28);
+	RgbaColor MATERIAL_RED_A100 = new RgbaColor(255, 138, 128);
+	RgbaColor MATERIAL_RED_A200 = new RgbaColor(255, 82, 82);
+	RgbaColor MATERIAL_RED_A400 = new RgbaColor(255, 23, 68);
+	RgbaColor MATERIAL_RED_A700 = new RgbaColor(213, 0, 0);
+	RgbaColor MATERIAL_PINK_50 = new RgbaColor(252, 228, 236);
+	RgbaColor MATERIAL_PINK_100 = new RgbaColor(248, 187, 208);
+	RgbaColor MATERIAL_PINK_200 = new RgbaColor(244, 143, 177);
+	RgbaColor MATERIAL_PINK_300 = new RgbaColor(240, 98, 146);
+	RgbaColor MATERIAL_PINK_400 = new RgbaColor(236, 64, 122);
+	RgbaColor MATERIAL_PINK_500 = new RgbaColor(233, 30, 99);
+	RgbaColor MATERIAL_PINK_600 = new RgbaColor(216, 27, 96);
+	RgbaColor MATERIAL_PINK_700 = new RgbaColor(194, 24, 91);
+	RgbaColor MATERIAL_PINK_800 = new RgbaColor(173, 20, 87);
+	RgbaColor MATERIAL_PINK_900 = new RgbaColor(136, 14, 79);
+	RgbaColor MATERIAL_PINK_A100 = new RgbaColor(255, 128, 171);
+	RgbaColor MATERIAL_PINK_A200 = new RgbaColor(255, 64, 129);
+	RgbaColor MATERIAL_PINK_A400 = new RgbaColor(245, 0, 87);
+	RgbaColor MATERIAL_PINK_A700 = new RgbaColor(197, 17, 98);
+	RgbaColor MATERIAL_PURPLE_50 = new RgbaColor(243, 229, 245);
+	RgbaColor MATERIAL_PURPLE_100 = new RgbaColor(225, 190, 231);
+	RgbaColor MATERIAL_PURPLE_200 = new RgbaColor(206, 147, 216);
+	RgbaColor MATERIAL_PURPLE_300 = new RgbaColor(186, 104, 200);
+	RgbaColor MATERIAL_PURPLE_400 = new RgbaColor(171, 71, 188);
+	RgbaColor MATERIAL_PURPLE_500 = new RgbaColor(156, 39, 176);
+	RgbaColor MATERIAL_PURPLE_600 = new RgbaColor(142, 36, 170);
+	RgbaColor MATERIAL_PURPLE_700 = new RgbaColor(123, 31, 162);
+	RgbaColor MATERIAL_PURPLE_800 = new RgbaColor(106, 27, 154);
+	RgbaColor MATERIAL_PURPLE_900 = new RgbaColor(74, 20, 140);
+	RgbaColor MATERIAL_PURPLE_A100 = new RgbaColor(234, 128, 252);
+	RgbaColor MATERIAL_PURPLE_A200 = new RgbaColor(224, 64, 251);
+	RgbaColor MATERIAL_PURPLE_A400 = new RgbaColor(213, 0, 249);
+	RgbaColor MATERIAL_PURPLE_A700 = new RgbaColor(170, 0, 255);
+	RgbaColor MATERIAL_DEEP_PURPLE_50 = new RgbaColor(237, 231, 246);
+	RgbaColor MATERIAL_DEEP_PURPLE_100 = new RgbaColor(209, 196, 233);
+	RgbaColor MATERIAL_DEEP_PURPLE_200 = new RgbaColor(179, 157, 219);
+	RgbaColor MATERIAL_DEEP_PURPLE_300 = new RgbaColor(149, 117, 205);
+	RgbaColor MATERIAL_DEEP_PURPLE_400 = new RgbaColor(126, 87, 194);
+	RgbaColor MATERIAL_DEEP_PURPLE_500 = new RgbaColor(103, 58, 183);
+	RgbaColor MATERIAL_DEEP_PURPLE_600 = new RgbaColor(94, 53, 177);
+	RgbaColor MATERIAL_DEEP_PURPLE_700 = new RgbaColor(81, 45, 168);
+	RgbaColor MATERIAL_DEEP_PURPLE_800 = new RgbaColor(69, 39, 160);
+	RgbaColor MATERIAL_DEEP_PURPLE_900 = new RgbaColor(49, 27, 146);
+	RgbaColor MATERIAL_DEEP_PURPLE_A100 = new RgbaColor(179, 136, 255);
+	RgbaColor MATERIAL_DEEP_PURPLE_A200 = new RgbaColor(124, 77, 255);
+	RgbaColor MATERIAL_DEEP_PURPLE_A400 = new RgbaColor(101, 31, 255);
+	RgbaColor MATERIAL_DEEP_PURPLE_A700 = new RgbaColor(98, 0, 234);
+	RgbaColor MATERIAL_INDIGO_50 = new RgbaColor(232, 234, 246);
+	RgbaColor MATERIAL_INDIGO_100 = new RgbaColor(197, 202, 233);
+	RgbaColor MATERIAL_INDIGO_200 = new RgbaColor(159, 168, 218);
+	RgbaColor MATERIAL_INDIGO_300 = new RgbaColor(121, 134, 203);
+	RgbaColor MATERIAL_INDIGO_400 = new RgbaColor(92, 107, 192);
+	RgbaColor MATERIAL_INDIGO_500 = new RgbaColor(63, 81, 181);
+	RgbaColor MATERIAL_INDIGO_600 = new RgbaColor(57, 73, 171);
+	RgbaColor MATERIAL_INDIGO_700 = new RgbaColor(48, 63, 159);
+	RgbaColor MATERIAL_INDIGO_800 = new RgbaColor(40, 53, 147);
+	RgbaColor MATERIAL_INDIGO_900 = new RgbaColor(26, 35, 126);
+	RgbaColor MATERIAL_INDIGO_A100 = new RgbaColor(140, 158, 255);
+	RgbaColor MATERIAL_INDIGO_A200 = new RgbaColor(83, 109, 254);
+	RgbaColor MATERIAL_INDIGO_A400 = new RgbaColor(61, 90, 254);
+	RgbaColor MATERIAL_INDIGO_A700 = new RgbaColor(48, 79, 254);
+	RgbaColor MATERIAL_BLUE_50 = new RgbaColor(227, 242, 253);
+	RgbaColor MATERIAL_BLUE_100 = new RgbaColor(187, 222, 251);
+	RgbaColor MATERIAL_BLUE_200 = new RgbaColor(144, 202, 249);
+	RgbaColor MATERIAL_BLUE_300 = new RgbaColor(100, 181, 246);
+	RgbaColor MATERIAL_BLUE_400 = new RgbaColor(66, 165, 245);
+	RgbaColor MATERIAL_BLUE_500 = new RgbaColor(33, 150, 243);
+	RgbaColor MATERIAL_BLUE_600 = new RgbaColor(30, 136, 229);
+	RgbaColor MATERIAL_BLUE_700 = new RgbaColor(25, 118, 210);
+	RgbaColor MATERIAL_BLUE_800 = new RgbaColor(21, 101, 192);
+	RgbaColor MATERIAL_BLUE_900 = new RgbaColor(13, 71, 161);
+	RgbaColor MATERIAL_BLUE_A100 = new RgbaColor(130, 177, 255);
+	RgbaColor MATERIAL_BLUE_A200 = new RgbaColor(68, 138, 255);
+	RgbaColor MATERIAL_BLUE_A400 = new RgbaColor(41, 121, 255);
+	RgbaColor MATERIAL_BLUE_A700 = new RgbaColor(41, 98, 255);
+	RgbaColor MATERIAL_LIGHT_BLUE_50 = new RgbaColor(225, 245, 254);
+	RgbaColor MATERIAL_LIGHT_BLUE_100 = new RgbaColor(179, 229, 252);
+	RgbaColor MATERIAL_LIGHT_BLUE_200 = new RgbaColor(129, 212, 250);
+	RgbaColor MATERIAL_LIGHT_BLUE_300 = new RgbaColor(79, 195, 247);
+	RgbaColor MATERIAL_LIGHT_BLUE_400 = new RgbaColor(41, 182, 252);
+	RgbaColor MATERIAL_LIGHT_BLUE_500 = new RgbaColor(3, 169, 244);
+	RgbaColor MATERIAL_LIGHT_BLUE_600 = new RgbaColor(3, 155, 229);
+	RgbaColor MATERIAL_LIGHT_BLUE_700 = new RgbaColor(2, 136, 209);
+	RgbaColor MATERIAL_LIGHT_BLUE_800 = new RgbaColor(2, 119, 189);
+	RgbaColor MATERIAL_LIGHT_BLUE_900 = new RgbaColor(1, 87, 155);
+	RgbaColor MATERIAL_LIGHT_BLUE_A100 = new RgbaColor(128, 216, 255);
+	RgbaColor MATERIAL_LIGHT_BLUE_A200 = new RgbaColor(64, 196, 255);
+	RgbaColor MATERIAL_LIGHT_BLUE_A400 = new RgbaColor(0, 176, 255);
+	RgbaColor MATERIAL_LIGHT_BLUE_A700 = new RgbaColor(0, 145, 234);
+	RgbaColor MATERIAL_CYAN_50 = new RgbaColor(224, 247, 250);
+	RgbaColor MATERIAL_CYAN_100 = new RgbaColor(178, 235, 242);
+	RgbaColor MATERIAL_CYAN_200 = new RgbaColor(128, 222, 234);
+	RgbaColor MATERIAL_CYAN_300 = new RgbaColor(77, 208, 225);
+	RgbaColor MATERIAL_CYAN_400 = new RgbaColor(38, 198, 218);
+	RgbaColor MATERIAL_CYAN_500 = new RgbaColor(0, 188, 212);
+	RgbaColor MATERIAL_CYAN_600 = new RgbaColor(0, 172, 193);
+	RgbaColor MATERIAL_CYAN_700 = new RgbaColor(0, 151, 167);
+	RgbaColor MATERIAL_CYAN_800 = new RgbaColor(0, 131, 143);
+	RgbaColor MATERIAL_CYAN_900 = new RgbaColor(0, 96, 100);
+	RgbaColor MATERIAL_CYAN_A100 = new RgbaColor(132, 255, 255);
+	RgbaColor MATERIAL_CYAN_A200 = new RgbaColor(24, 255, 255);
+	RgbaColor MATERIAL_CYAN_A400 = new RgbaColor(0, 229, 255);
+	RgbaColor MATERIAL_CYAN_A700 = new RgbaColor(0, 184, 212);
+	RgbaColor MATERIAL_TEAL_50 = new RgbaColor(224, 242, 241);
+	RgbaColor MATERIAL_TEAL_100 = new RgbaColor(178, 223, 219);
+	RgbaColor MATERIAL_TEAL_200 = new RgbaColor(128, 203, 196);
+	RgbaColor MATERIAL_TEAL_300 = new RgbaColor(77, 182, 172);
+	RgbaColor MATERIAL_TEAL_400 = new RgbaColor(38, 166, 154);
+	RgbaColor MATERIAL_TEAL_500 = new RgbaColor(0, 150, 136);
+	RgbaColor MATERIAL_TEAL_600 = new RgbaColor(0, 137, 123);
+	RgbaColor MATERIAL_TEAL_700 = new RgbaColor(0, 121, 107);
+	RgbaColor MATERIAL_TEAL_800 = new RgbaColor(0, 105, 92);
+	RgbaColor MATERIAL_TEAL_900 = new RgbaColor(0, 77, 64);
+	RgbaColor MATERIAL_TEAL_A100 = new RgbaColor(167, 255, 235);
+	RgbaColor MATERIAL_TEAL_A200 = new RgbaColor(100, 255, 218);
+	RgbaColor MATERIAL_TEAL_A400 = new RgbaColor(29, 233, 182);
+	RgbaColor MATERIAL_TEAL_A700 = new RgbaColor(0, 191, 165);
+	RgbaColor MATERIAL_GREEN_50 = new RgbaColor(232, 245, 233);
+	RgbaColor MATERIAL_GREEN_100 = new RgbaColor(200, 230, 201);
+	RgbaColor MATERIAL_GREEN_200 = new RgbaColor(165, 214, 167);
+	RgbaColor MATERIAL_GREEN_300 = new RgbaColor(129, 199, 132);
+	RgbaColor MATERIAL_GREEN_400 = new RgbaColor(102, 187, 106);
+	RgbaColor MATERIAL_GREEN_500 = new RgbaColor(76, 175, 80);
+	RgbaColor MATERIAL_GREEN_600 = new RgbaColor(67, 160, 71);
+	RgbaColor MATERIAL_GREEN_700 = new RgbaColor(56, 142, 60);
+	RgbaColor MATERIAL_GREEN_800 = new RgbaColor(46, 125, 50);
+	RgbaColor MATERIAL_GREEN_900 = new RgbaColor(27, 94, 32);
+	RgbaColor MATERIAL_GREEN_A100 = new RgbaColor(185, 246, 202);
+	RgbaColor MATERIAL_GREEN_A200 = new RgbaColor(105, 240, 174);
+	RgbaColor MATERIAL_GREEN_A400 = new RgbaColor(0, 230, 118);
+	RgbaColor MATERIAL_GREEN_A700 = new RgbaColor(0, 200, 83);
+	RgbaColor MATERIAL_LIGHT_GREEN_50 = new RgbaColor(241, 248, 233);
+	RgbaColor MATERIAL_LIGHT_GREEN_100 = new RgbaColor(220, 237, 200);
+	RgbaColor MATERIAL_LIGHT_GREEN_200 = new RgbaColor(197, 225, 165);
+	RgbaColor MATERIAL_LIGHT_GREEN_300 = new RgbaColor(174, 213, 129);
+	RgbaColor MATERIAL_LIGHT_GREEN_400 = new RgbaColor(156, 204, 101);
+	RgbaColor MATERIAL_LIGHT_GREEN_500 = new RgbaColor(139, 195, 74);
+	RgbaColor MATERIAL_LIGHT_GREEN_600 = new RgbaColor(124, 179, 66);
+	RgbaColor MATERIAL_LIGHT_GREEN_700 = new RgbaColor(104, 159, 56);
+	RgbaColor MATERIAL_LIGHT_GREEN_800 = new RgbaColor(85, 139, 47);
+	RgbaColor MATERIAL_LIGHT_GREEN_900 = new RgbaColor(51, 105, 30);
+	RgbaColor MATERIAL_LIGHT_GREEN_A100 = new RgbaColor(204, 255, 144);
+	RgbaColor MATERIAL_LIGHT_GREEN_A200 = new RgbaColor(178, 255, 89);
+	RgbaColor MATERIAL_LIGHT_GREEN_A400 = new RgbaColor(118, 255, 3);
+	RgbaColor MATERIAL_LIGHT_GREEN_A700 = new RgbaColor(100, 221, 23);
+	RgbaColor MATERIAL_LIME_50 = new RgbaColor(249, 251, 231);
+	RgbaColor MATERIAL_LIME_100 = new RgbaColor(240, 244, 195);
+	RgbaColor MATERIAL_LIME_200 = new RgbaColor(230, 238, 156);
+	RgbaColor MATERIAL_LIME_300 = new RgbaColor(220, 231, 117);
+	RgbaColor MATERIAL_LIME_400 = new RgbaColor(212, 225, 87);
+	RgbaColor MATERIAL_LIME_500 = new RgbaColor(205, 220, 57);
+	RgbaColor MATERIAL_LIME_600 = new RgbaColor(192, 202, 51);
+	RgbaColor MATERIAL_LIME_700 = new RgbaColor(164, 180, 43);
+	RgbaColor MATERIAL_LIME_800 = new RgbaColor(158, 157, 36);
+	RgbaColor MATERIAL_LIME_900 = new RgbaColor(130, 119, 23);
+	RgbaColor MATERIAL_LIME_A100 = new RgbaColor(244, 255, 129);
+	RgbaColor MATERIAL_LIME_A200 = new RgbaColor(238, 255, 65);
+	RgbaColor MATERIAL_LIME_A400 = new RgbaColor(198, 255, 0);
+	RgbaColor MATERIAL_LIME_A700 = new RgbaColor(174, 234, 0);
+	RgbaColor MATERIAL_YELLOW_50 = new RgbaColor(255, 253, 231);
+	RgbaColor MATERIAL_YELLOW_100 = new RgbaColor(255, 249, 196);
+	RgbaColor MATERIAL_YELLOW_200 = new RgbaColor(255, 245, 144);
+	RgbaColor MATERIAL_YELLOW_300 = new RgbaColor(255, 241, 118);
+	RgbaColor MATERIAL_YELLOW_400 = new RgbaColor(255, 238, 88);
+	RgbaColor MATERIAL_YELLOW_500 = new RgbaColor(255, 235, 59);
+	RgbaColor MATERIAL_YELLOW_600 = new RgbaColor(253, 216, 53);
+	RgbaColor MATERIAL_YELLOW_700 = new RgbaColor(251, 192, 45);
+	RgbaColor MATERIAL_YELLOW_800 = new RgbaColor(249, 168, 37);
+	RgbaColor MATERIAL_YELLOW_900 = new RgbaColor(245, 127, 23);
+	RgbaColor MATERIAL_YELLOW_A100 = new RgbaColor(255, 255, 130);
+	RgbaColor MATERIAL_YELLOW_A200 = new RgbaColor(255, 255, 0);
+	RgbaColor MATERIAL_YELLOW_A400 = new RgbaColor(255, 234, 0);
+	RgbaColor MATERIAL_YELLOW_A700 = new RgbaColor(255, 214, 0);
+	RgbaColor MATERIAL_AMBER_50 = new RgbaColor(255, 248, 225);
+	RgbaColor MATERIAL_AMBER_100 = new RgbaColor(255, 236, 179);
+	RgbaColor MATERIAL_AMBER_200 = new RgbaColor(255, 224, 130);
+	RgbaColor MATERIAL_AMBER_300 = new RgbaColor(255, 213, 79);
+	RgbaColor MATERIAL_AMBER_400 = new RgbaColor(255, 202, 40);
+	RgbaColor MATERIAL_AMBER_500 = new RgbaColor(255, 193, 7);
+	RgbaColor MATERIAL_AMBER_600 = new RgbaColor(255, 179, 0);
+	RgbaColor MATERIAL_AMBER_700 = new RgbaColor(255, 160, 0);
+	RgbaColor MATERIAL_AMBER_800 = new RgbaColor(255, 143, 0);
+	RgbaColor MATERIAL_AMBER_900 = new RgbaColor(255, 111, 0);
+	RgbaColor MATERIAL_AMBER_A100 = new RgbaColor(255, 229, 127);
+	RgbaColor MATERIAL_AMBER_A200 = new RgbaColor(255, 215, 64);
+	RgbaColor MATERIAL_AMBER_A400 = new RgbaColor(255, 196, 0);
+	RgbaColor MATERIAL_AMBER_A700 = new RgbaColor(255, 171, 0);
+	RgbaColor MATERIAL_ORANGE_50 = new RgbaColor(255, 243, 224);
+	RgbaColor MATERIAL_ORANGE_100 = new RgbaColor(255, 224, 178);
+	RgbaColor MATERIAL_ORANGE_200 = new RgbaColor(255, 204, 128);
+	RgbaColor MATERIAL_ORANGE_300 = new RgbaColor(255, 183, 77);
+	RgbaColor MATERIAL_ORANGE_400 = new RgbaColor(255, 167, 38);
+	RgbaColor MATERIAL_ORANGE_500 = new RgbaColor(255, 152, 0);
+	RgbaColor MATERIAL_ORANGE_600 = new RgbaColor(251, 140, 0);
+	RgbaColor MATERIAL_ORANGE_700 = new RgbaColor(245, 124, 0);
+	RgbaColor MATERIAL_ORANGE_800 = new RgbaColor(239, 108, 0);
+	RgbaColor MATERIAL_ORANGE_900 = new RgbaColor(230, 81, 0);
+	RgbaColor MATERIAL_ORANGE_A100 = new RgbaColor(255, 209, 128);
+	RgbaColor MATERIAL_ORANGE_A200 = new RgbaColor(255, 171, 64);
+	RgbaColor MATERIAL_ORANGE_A400 = new RgbaColor(255, 145, 0);
+	RgbaColor MATERIAL_ORANGE_A700 = new RgbaColor(255, 109, 0);
+	RgbaColor MATERIAL_DEEP_ORANGE_50 = new RgbaColor(251, 233, 167);
+	RgbaColor MATERIAL_DEEP_ORANGE_100 = new RgbaColor(255, 204, 188);
+	RgbaColor MATERIAL_DEEP_ORANGE_200 = new RgbaColor(255, 171, 145);
+	RgbaColor MATERIAL_DEEP_ORANGE_300 = new RgbaColor(255, 138, 101);
+	RgbaColor MATERIAL_DEEP_ORANGE_400 = new RgbaColor(255, 112, 67);
+	RgbaColor MATERIAL_DEEP_ORANGE_500 = new RgbaColor(255, 87, 34);
+	RgbaColor MATERIAL_DEEP_ORANGE_600 = new RgbaColor(244, 81, 30);
+	RgbaColor MATERIAL_DEEP_ORANGE_700 = new RgbaColor(230, 74, 25);
+	RgbaColor MATERIAL_DEEP_ORANGE_800 = new RgbaColor(216, 67, 21);
+	RgbaColor MATERIAL_DEEP_ORANGE_900 = new RgbaColor(191, 54, 12);
+	RgbaColor MATERIAL_DEEP_ORANGE_A100 = new RgbaColor(255, 158, 128);
+	RgbaColor MATERIAL_DEEP_ORANGE_A200 = new RgbaColor(255, 110, 64);
+	RgbaColor MATERIAL_DEEP_ORANGE_A400 = new RgbaColor(255, 61, 0);
+	RgbaColor MATERIAL_DEEP_ORANGE_A700 = new RgbaColor(221, 38, 0);
+	RgbaColor MATERIAL_BROWN_50 = new RgbaColor(239, 235, 233);
+	RgbaColor MATERIAL_BROWN_100 = new RgbaColor(215, 204, 200);
+	RgbaColor MATERIAL_BROWN_200 = new RgbaColor(188, 170, 164);
+	RgbaColor MATERIAL_BROWN_300 = new RgbaColor(161, 136, 127);
+	RgbaColor MATERIAL_BROWN_400 = new RgbaColor(141, 110, 99);
+	RgbaColor MATERIAL_BROWN_500 = new RgbaColor(121, 85, 72);
+	RgbaColor MATERIAL_BROWN_600 = new RgbaColor(109, 76, 65);
+	RgbaColor MATERIAL_BROWN_700 = new RgbaColor(93, 64, 55);
+	RgbaColor MATERIAL_BROWN_800 = new RgbaColor(78, 52, 46);
+	RgbaColor MATERIAL_BROWN_900 = new RgbaColor(62, 39, 35);
+	RgbaColor MATERIAL_GREY_50 = new RgbaColor(250, 250, 250);
+	RgbaColor MATERIAL_GREY_100 = new RgbaColor(245, 245, 245);
+	RgbaColor MATERIAL_GREY_200 = new RgbaColor(238, 238, 238);
+	RgbaColor MATERIAL_GREY_300 = new RgbaColor(224, 224, 224);
+	RgbaColor MATERIAL_GREY_400 = new RgbaColor(189, 189, 189);
+	RgbaColor MATERIAL_GREY_500 = new RgbaColor(158, 158, 158);
+	RgbaColor MATERIAL_GREY_600 = new RgbaColor(117, 117, 117);
+	RgbaColor MATERIAL_GREY_700 = new RgbaColor(97, 97, 97);
+	RgbaColor MATERIAL_GREY_800 = new RgbaColor(66, 66, 66);
+	RgbaColor MATERIAL_GREY_900 = new RgbaColor(33, 33, 33);
+	RgbaColor MATERIAL_BLACK_1000 = new RgbaColor(0, 0, 0);
+	RgbaColor MATERIAL_WHITE_1000 = new RgbaColor(255, 255, 255);
+	RgbaColor MATERIAL_BLUE_GREY_50 = new RgbaColor(236, 239, 241);
+	RgbaColor MATERIAL_BLUE_GREY_100 = new RgbaColor(207, 216, 220);
+	RgbaColor MATERIAL_BLUE_GREY_200 = new RgbaColor(176, 187, 197);
+	RgbaColor MATERIAL_BLUE_GREY_300 = new RgbaColor(144, 164, 174);
+	RgbaColor MATERIAL_BLUE_GREY_400 = new RgbaColor(120, 144, 156);
+	RgbaColor MATERIAL_BLUE_GREY_500 = new RgbaColor(96, 125, 139);
+	RgbaColor MATERIAL_BLUE_GREY_600 = new RgbaColor(84, 110, 122);
+	RgbaColor MATERIAL_BLUE_GREY_700 = new RgbaColor(69, 90, 100);
+	RgbaColor MATERIAL_BLUE_GREY_800 = new RgbaColor(55, 71, 79);
+	RgbaColor MATERIAL_BLUE_GREY_900 = new RgbaColor(38, 50, 56);
+
+	static CssStringColor fromVariableName(String variableName) {
+		return CssStringColor.fromVariableName(variableName);
 	}
 
-	public Color withAlpha(float alpha) {
-		return new Color(getRed(), getGreen(), getBlue(), alpha);
+	static RgbaColor fromAwtColor(java.awt.Color color) {
+		return RgbaColor.fromAwtColor(color);
 	}
 
-	public Color(int red, int green, int blue) {
-		this.red = red;
-		this.green = green;
-		this.blue = blue;
-		this.alpha = 1;
+	static RgbaColor fromAwtColor(java.awt.Color color, float alpha) {
+		return RgbaColor.fromAwtColor(color, alpha);
 	}
 
-	public Color(int red, int green, int blue, float alpha) {
-		this.red = red;
-		this.green = green;
-		this.blue = blue;
-		this.alpha = alpha;
+	static RgbaColor fromHsba(float h, float s, float b, float alpha) {
+		return RgbaColor.fromHsba(h, s, b, alpha);
 	}
 
-	public String toHtmlColorString() {
-		if (alpha == 1) {
-			return "rgb(" + red + "," + green + "," + blue + ")";
-		}
-		return "rgba(" + red + "," + green + "," + blue + "," + alpha + ")";
+	static RgbaColor fromRgb(int red, int green, int blue) {
+		return new RgbaColor(red, green, blue);
 	}
 
-	public int getRed() {
-		return red;
+	static RgbaColor fromRgba(int red, int green, int blue, float alpha) {
+		return new RgbaColor(red, green, blue, alpha);
 	}
 
-	public int getGreen() {
-		return green;
+	static RgbaColor fromRgbValue(int rgb) {
+		return RgbaColor.fromRgbValue(rgb);
 	}
 
-	public int getBlue() {
-		return blue;
+	static RgbaColor fromRgbaValue(int rgba) {
+		return RgbaColor.fromRgbaValue(rgba);
 	}
 
-	public float getAlpha() {
-		return alpha;
+	static RgbaColor fromHex(String hex) {
+		return RgbaColor.fromHex(hex);
 	}
 
-	public Color withBrightness(float brightnessZeroToOne) {
-		float boundedBrightness = Math.max(0, Math.min(brightnessZeroToOne, 1));
-		float[] hsb = java.awt.Color.RGBtoHSB(red, green, blue, null);
-		return fromHsba(hsb[0], hsb[1], boundedBrightness, alpha);
-	}
-
-	public Color withLuminance(float luminanceZeroToOne) {
-		float[] hsl = rgbToHsl(red, green, blue);
-		return fromHsla(hsl[0], hsl[1], luminanceZeroToOne, alpha);
-	}
-
-	public static float[] rgbToHsl(int red, int green, int blue) {
-		float r = red / 255f;
-		float g = green / 255f;
-		float b = blue / 255f;
-
-		float min = Math.min(r, Math.min(g, b));
-		float max = Math.max(r, Math.max(g, b));
-
-		float h;
-		if (max == min) {
-			h = 0;
-		} else if (max == r) {
-			h = (g - b) / (6 * (max - min));
-		} else if (max == g) {
-			h = ((b - r) / (6 * (max - min))) + 1 / 3f;
-		} else /* max == b */ {
-			h = ((r - g) / (6 * (max - min))) + 2 / 3f;
-		}
-
-		if (h < 0) {
-			h += 1;
-		} else if (h > 1) {
-			h -= 1;
-		}
-
-		float l = (max + min) / 2;
-
-		float s;
-		if (max == min) {
-			s = 0;
-		} else if (l <= .5f) {
-			s = (max - min) / (max + min);
+	static Color fromHtmlString(String value) {
+		if (value.trim().startsWith("var(")) {
+			return new CssStringColor(value);
 		} else {
-			s = (max - min) / (2 - max - min);
+			return RgbaColor.fromHtmlString(value);
 		}
-
-		return new float[]{h, s, l};
 	}
 
-	public static Color fromHsla(float h, float s, float l, float alpha) {
-		float q;
-		if (l < 0.5) {
-			q = l * (1 + s);
-		} else {
-			q = (l + s) - (s * l);
-		}
-
-		float p = 2 * l - q;
-
-		float r = Math.min(Math.max(0, hueToRgbComponent(p, q, h + (1.0f / 3.0f))), 1.0f);
-		float g = Math.min(Math.max(0, hueToRgbComponent(p, q, h)), 1.0f);
-		float b = Math.min(Math.max(0, hueToRgbComponent(p, q, h + (2.0f / 3.0f))), 1.0f);
-
-		return new Color(Math.round(r * 255), Math.round(g * 255), Math.round(b * 255), alpha);
-	}
-
-	private static float hueToRgbComponent(float p, float q, float h) {
-		if (h < 0) {
-			h += 1;
-		} else if (h > 1) {
-			h -= 1;
-		}
-		if (6 * h < 1) {
-			return p + ((q - p) * 6 * h);
-		} else if (2 * h < 1) {
-			return q;
-		} else if (3 * h < 2) {
-			return p + ((q - p) * 6 * ((2.0f / 3.0f) - h));
-		} else {
-			return p;
-		}
-	}
-
-
-	@Override
-	public String toString() {
-		return "Color{red=" + red + ", green=" + green + ", blue=" + blue + ", alpha=" + alpha + '}';
-	}
-
-	@Override
-	public boolean equals(Object o) {
-		if (this == o) {
-			return true;
-		}
-		if (o == null || getClass() != o.getClass()) {
-			return false;
-		}
-
-		Color color = (Color) o;
-
-		if (red != color.red) {
-			return false;
-		}
-		if (green != color.green) {
-			return false;
-		}
-		if (blue != color.blue) {
-			return false;
-		}
-		return Float.compare(color.alpha, alpha) == 0;
-	}
-
-	@Override
-	public int hashCode() {
-		int result = red;
-		result = 31 * result + green;
-		result = 31 * result + blue;
-		result = 31 * result + (alpha != +0.0f ? Float.floatToIntBits(alpha) : 0);
-		return result;
-	}
 }
diff --git a/teamapps-common/src/main/java/org/teamapps/common/format/CssStandardColors.java b/teamapps-common/src/main/java/org/teamapps/common/format/CssStandardColors.java
new file mode 100644
index 000000000..2626d1fd4
--- /dev/null
+++ b/teamapps-common/src/main/java/org/teamapps/common/format/CssStandardColors.java
@@ -0,0 +1,179 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.common.format;
+
+import java.util.Map;
+
+import static java.util.Map.entry;
+
+public class CssStandardColors {
+
+	public static final Map<String, RgbaColor> CSS_STANDARD_COLORS_BY_NAME = Map.ofEntries(
+			entry("aliceblue", Color.ALICE_BLUE),
+			entry("antiquewhite", Color.ANTIQUE_WHITE),
+			entry("aqua", Color.AQUA),
+			entry("aquamarine", Color.AQUA_MARINE),
+			entry("azure", Color.AZURE),
+			entry("beige", Color.BEIGE),
+			entry("bisque", Color.BISQUE),
+			entry("black", Color.BLACK),
+			entry("blanchedalmond", Color.BLANCHED_ALMOND),
+			entry("blue", Color.BLUE),
+			entry("blueviolet", Color.BLUE_VIOLET),
+			entry("brown", Color.BROWN),
+			entry("burlywood", Color.BURLY_WOOD),
+			entry("cadetblue", Color.CADET_BLUE),
+			entry("chartreuse", Color.CHARTREUSE),
+			entry("chocolate", Color.CHOCOLATE),
+			entry("coral", Color.CORAL),
+			entry("cornflowerblue", Color.CORN_FLOWER_BLUE),
+			entry("cornsilk", Color.CORN_SILK),
+			entry("crimson", Color.CRIMSON),
+			entry("cyan", Color.CYAN),
+			entry("darkblue", Color.DARK_BLUE),
+			entry("darkcyan", Color.DARK_CYAN),
+			entry("darkgoldenrod", Color.DARK_GOLDEN_ROD),
+			entry("darkgray", Color.DARK_GRAY),
+			entry("darkgreen", Color.DARK_GREEN),
+			entry("darkgrey", Color.DARK_GREY),
+			entry("darkkhaki", Color.DARK_KHAKI),
+			entry("darkmagenta", Color.DARK_MAGENTA),
+			entry("darkolivegreen", Color.DARK_OLIVE_GREEN),
+			entry("darkorange", Color.DARK_ORANGE),
+			entry("darkorchid", Color.DARK_ORCHID),
+			entry("darkred", Color.DARK_RED),
+			entry("darksalmon", Color.DARK_SALMON),
+			entry("darkseagreen", Color.DARK_SEA_GREEN),
+			entry("darkslateblue", Color.DARK_SLATE_BLUE),
+			entry("darkslategray", Color.DARK_SLATE_GRAY),
+			entry("darkslategrey", Color.DARK_SLATE_GREY),
+			entry("darkturquoise", Color.DARK_TURQUOISE),
+			entry("darkviolet", Color.DARK_VIOLET),
+			entry("deeppink", Color.DEEP_PINK),
+			entry("deepskyblue", Color.DEEP_SKY_BLUE),
+			entry("dimgray", Color.DIMG_RAY),
+			entry("dimgrey", Color.DIMG_REY),
+			entry("dodgerblue", Color.DODGER_BLUE),
+			entry("firebrick", Color.FIRE_BRICK),
+			entry("floralwhite", Color.FLORAL_WHITE),
+			entry("forestgreen", Color.FOREST_GREEN),
+			entry("fuchsia", Color.FUCHSIA),
+			entry("gainsboro", Color.GAINSBORO),
+			entry("ghostwhite", Color.GHOST_WHITE),
+			entry("gold", Color.GOLD),
+			entry("goldenrod", Color.GOLDEN_ROD),
+			entry("gray", Color.GRAY),
+			entry("green", Color.GREEN),
+			entry("greenyellow", Color.GREEN_YELLOW),
+			entry("grey", Color.GREY),
+			entry("honeydew", Color.HONEY_DEW),
+			entry("hotpink", Color.HOT_PINK),
+			entry("indianred", Color.INDIAN_RED),
+			entry("indigo", Color.INDIGO),
+			entry("ivory", Color.IVORY),
+			entry("khaki", Color.KHAKI),
+			entry("lavender", Color.LAVENDER),
+			entry("lavenderblush", Color.LAVENDER_BLUSH),
+			entry("lawngreen", Color.LAWN_GREEN),
+			entry("lemonchiffon", Color.LEMON_CHIFFON),
+			entry("lightblue", Color.LIGHT_BLUE),
+			entry("lightcoral", Color.LIGHT_CORAL),
+			entry("lightcyan", Color.LIGHT_CYAN),
+			entry("lightgoldenrodyellow", Color.LIGHT_GOLDEN_ROD_YELLOW),
+			entry("lightgray", Color.LIGHT_GRAY),
+			entry("lightgreen", Color.LIGHT_GREEN),
+			entry("lightgrey", Color.LIGHT_GREY),
+			entry("lightpink", Color.LIGHT_PINK),
+			entry("lightsalmon", Color.LIGHT_SALMON),
+			entry("lightseagreen", Color.LIGHT_SEA_GREEN),
+			entry("lightskyblue", Color.LIGHT_SKY_BLUE),
+			entry("lightslategray", Color.LIGHT_SLATE_GRAY),
+			entry("lightslategrey", Color.LIGHT_SLATE_GREY),
+			entry("lightsteelblue", Color.LIGHT_STEEL_BLUE),
+			entry("lightyellow", Color.LIGHT_YELLOW),
+			entry("lime", Color.LIME),
+			entry("limegreen", Color.LIME_GREEN),
+			entry("linen", Color.LINEN),
+			entry("magenta", Color.MAGENTA),
+			entry("maroon", Color.MAROON),
+			entry("mediumaquamarine", Color.MEDIUM_AQUA_MARINE),
+			entry("mediumblue", Color.MEDIUM_BLUE),
+			entry("mediumorchid", Color.MEDIUM_ORCHID),
+			entry("mediumpurple", Color.MEDIUM_PURPLE),
+			entry("mediumseagreen", Color.MEDIUM_SEAG_REEN),
+			entry("mediumslateblue", Color.MEDIUM_SLATE_BLUE),
+			entry("mediumspringgreen", Color.MEDIUM_SPRING_GREEN),
+			entry("mediumturquoise", Color.MEDIUM_TURQUOISE),
+			entry("mediumvioletred", Color.MEDIUM_VIOLET_RED),
+			entry("midnightblue", Color.MIDNIGHT_BLUE),
+			entry("mintcream", Color.MINT_CREAM),
+			entry("mistyrose", Color.MISTY_ROSE),
+			entry("moccasin", Color.MOCCASIN),
+			entry("navajowhite", Color.NAVAJO_WHITE),
+			entry("navy", Color.NAVY),
+			entry("oldlace", Color.OLD_LACE),
+			entry("olive", Color.OLIVE),
+			entry("olivedrab", Color.OLIVE_DRAB),
+			entry("orange", Color.ORANGE),
+			entry("orangered", Color.ORANGE_RED),
+			entry("orchid", Color.ORCHID),
+			entry("palegoldenrod", Color.PALE_GOLDEN_ROD),
+			entry("palegreen", Color.PALE_GREEN),
+			entry("paleturquoise", Color.PALE_TURQUOISE),
+			entry("palevioletred", Color.PALE_VIOLET_RED),
+			entry("papayawhip", Color.PAPAYA_WHIP),
+			entry("peachpuff", Color.PEACH_PUFF),
+			entry("peru", Color.PERU),
+			entry("pink", Color.PINK),
+			entry("plum", Color.PLUM),
+			entry("powderblue", Color.POWDER_BLUE),
+			entry("purple", Color.PURPLE),
+			entry("red", Color.RED),
+			entry("rosybrown", Color.ROSY_BROWN),
+			entry("royalblue", Color.ROYAL_BLUE),
+			entry("saddlebrown", Color.SADDLE_BROWN),
+			entry("salmon", Color.SALMON),
+			entry("sandybrown", Color.SANDY_BROWN),
+			entry("seagreen", Color.SEA_GREEN),
+			entry("seashell", Color.SEA_SHELL),
+			entry("sienna", Color.SIENNA),
+			entry("silver", Color.SILVER),
+			entry("skyblue", Color.SKY_BLUE),
+			entry("slateblue", Color.SLATE_BLUE),
+			entry("slategray", Color.SLATE_GRAY),
+			entry("slategrey", Color.SLATE_GREY),
+			entry("snow", Color.SNOW),
+			entry("springgreen", Color.SPRING_GREEN),
+			entry("steelblue", Color.STEEL_BLUE),
+			entry("tan", Color.TAN),
+			entry("teal", Color.TEAL),
+			entry("thistle", Color.THISTLE),
+			entry("tomato", Color.TOMATO),
+			entry("turquoise", Color.TURQUOISE),
+			entry("violet", Color.VIOLET),
+			entry("wheat", Color.WHEAT),
+			entry("white", Color.WHITE),
+			entry("whitesmoke", Color.WHITE_SMOKE),
+			entry("yellow", Color.YELLOW),
+			entry("yellowgreen", Color.YELLOW_GREEN)
+	);
+
+
+}
diff --git a/teamapps-common/src/main/java/org/teamapps/common/format/CssStringColor.java b/teamapps-common/src/main/java/org/teamapps/common/format/CssStringColor.java
new file mode 100644
index 000000000..e101d5fe3
--- /dev/null
+++ b/teamapps-common/src/main/java/org/teamapps/common/format/CssStringColor.java
@@ -0,0 +1,45 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.common.format;
+
+public class CssStringColor implements Color {
+
+	private final String colorString;
+
+	public CssStringColor(String colorString) {
+		this.colorString = colorString;
+	}
+
+	public String getColorString() {
+		return colorString;
+	}
+
+	@Override
+	public String toHtmlColorString() {
+		return colorString;
+	}
+
+	public static CssStringColor fromVariableName(String variableName) {
+		if (variableName.startsWith("--")) {
+			variableName = variableName.substring(2);
+		}
+		return new CssStringColor("var(--" + variableName + ")");
+	}
+}
diff --git a/teamapps-common/src/main/java/org/teamapps/common/format/RgbaColor.java b/teamapps-common/src/main/java/org/teamapps/common/format/RgbaColor.java
new file mode 100644
index 000000000..1b005568c
--- /dev/null
+++ b/teamapps-common/src/main/java/org/teamapps/common/format/RgbaColor.java
@@ -0,0 +1,351 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.common.format;
+
+import java.util.regex.Matcher;
+import java.util.regex.Pattern;
+
+public class RgbaColor implements Color {
+
+	private static final Pattern RGBA_PATTERN = Pattern.compile("rgba\\(\\s*([\\d.]+)\\s*,\\s*([\\d.]+)\\s*,\\s*([\\d.]+)\\s*,\\s*([\\d.]+%?)\\s*\\)");
+	private static final Pattern RGB_PATTERN = Pattern.compile("rgb\\(\\s*([\\d.]+)\\s*,\\s*([\\d.]+)\\s*,\\s*([\\d.]+)\\s*\\)");
+	private static final Pattern HSLA_PATTERN = Pattern.compile("hsla\\(\\s*([\\d.]+)\\s*,\\s*([\\d.]+%)\\s*,\\s*([\\d.]+%)\\s*,\\s*([\\d.]+%?)\\s*\\)");
+	private static final Pattern HSL_PATTERN = Pattern.compile("hsl\\(\\s*([\\d.]+)\\s*,\\s*([\\d.]+%)\\s*,\\s*([\\d.]+%)\\s*\\)");
+
+	/**
+	 * 0-255
+	 */
+	private final int red;
+	/**
+	 * 0-255
+	 */
+	private final int green;
+	/**
+	 * 0-255
+	 */
+	private final int blue;
+	/**
+	 * 0-1
+	 */
+	private final float alpha;
+
+	public RgbaColor withAlpha(float alpha) {
+		return new RgbaColor(getRed(), getGreen(), getBlue(), alpha);
+	}
+
+	public RgbaColor(int red, int green, int blue) {
+		this.red = red;
+		this.green = green;
+		this.blue = blue;
+		this.alpha = 1;
+	}
+
+	public RgbaColor(int red, int green, int blue, float alpha) {
+		this.red = red;
+		this.green = green;
+		this.blue = blue;
+		this.alpha = alpha;
+	}
+
+	@Override
+	public String toHtmlColorString() {
+		// Note that we are not using the more compact hex notation, since it is not URL-safe (hash character).
+		return toRgbColorString();
+	}
+
+	public String toHtmlHexColorString() {
+		if (alpha == 1) {
+			return String.format("#%06X", 0xFFFFFF & (red << 16 | green << 8 | blue));
+		} else {
+			return String.format("#%08X", red << 24 | green << 16 | blue << 8 | (int) (alpha * 255));
+		}
+	}
+
+	public String toRgbColorString() {
+		if (alpha == 1) {
+			return "rgb(" + red + "," + green + "," + blue + ")";
+		} else {
+			return "rgba(" + red + "," + green + "," + blue + "," + alpha + ")";
+		}
+	}
+
+	public int getRed() {
+		return red;
+	}
+
+	public int getGreen() {
+		return green;
+	}
+
+	public int getBlue() {
+		return blue;
+	}
+
+	public float getHue() {
+		return rgbToHsl(red, green, blue)[0];
+	}
+
+	public float getSaturation() {
+		return rgbToHsl(red, green, blue)[1];
+	}
+
+	public float getLuminance() {
+		return rgbToHsl(red, green, blue)[2];
+	}
+
+	public float getAlpha() {
+		return alpha;
+	}
+
+	public RgbaColor withBrightness(float brightnessZeroToOne) {
+		float boundedBrightness = Math.max(0, Math.min(brightnessZeroToOne, 1));
+		float[] hsb = java.awt.Color.RGBtoHSB(red, green, blue, null);
+		return Color.fromHsba(hsb[0], hsb[1], boundedBrightness, alpha);
+	}
+
+	public RgbaColor withLuminance(float luminanceZeroToOne) {
+		float[] hsl = rgbToHsl(red, green, blue);
+		return fromHsla(hsl[0], hsl[1], luminanceZeroToOne, alpha);
+	}
+
+	public static float[] rgbToHsl(int red, int green, int blue) {
+		float r = red / 255f;
+		float g = green / 255f;
+		float b = blue / 255f;
+
+		float min = Math.min(r, Math.min(g, b));
+		float max = Math.max(r, Math.max(g, b));
+
+		float h;
+		if (max == min) {
+			h = 0;
+		} else if (max == r) {
+			h = (g - b) / (6 * (max - min));
+		} else if (max == g) {
+			h = ((b - r) / (6 * (max - min))) + 1 / 3f;
+		} else /* max == b */ {
+			h = ((r - g) / (6 * (max - min))) + 2 / 3f;
+		}
+
+		if (h < 0) {
+			h += 1;
+		} else if (h > 1) {
+			h -= 1;
+		}
+
+		float l = (max + min) / 2;
+
+		float s;
+		if (max == min) {
+			s = 0;
+		} else if (l <= .5f) {
+			s = (max - min) / (max + min);
+		} else {
+			s = (max - min) / (2 - max - min);
+		}
+
+		return new float[]{h, s, l};
+	}
+
+	/**
+	 * @param h     0-1
+	 * @param s     0-1
+	 * @param l     0-1
+	 * @param alpha 0-1
+	 */
+	public static RgbaColor fromHsla(float h, float s, float l, float alpha) {
+		float q;
+		if (l < 0.5) {
+			q = l * (1 + s);
+		} else {
+			q = (l + s) - (s * l);
+		}
+
+		float p = 2 * l - q;
+
+		float r = Math.min(Math.max(0, hueToRgbComponent(p, q, h + (1.0f / 3.0f))), 1.0f);
+		float g = Math.min(Math.max(0, hueToRgbComponent(p, q, h)), 1.0f);
+		float b = Math.min(Math.max(0, hueToRgbComponent(p, q, h + (2.0f / 3.0f))), 1.0f);
+
+		return new RgbaColor(Math.round(r * 255), Math.round(g * 255), Math.round(b * 255), alpha);
+	}
+
+	private static float hueToRgbComponent(float p, float q, float h) {
+		if (h < 0) {
+			h += 1;
+		} else if (h > 1) {
+			h -= 1;
+		}
+		if (6 * h < 1) {
+			return p + ((q - p) * 6 * h);
+		} else if (2 * h < 1) {
+			return q;
+		} else if (3 * h < 2) {
+			return p + ((q - p) * 6 * ((2.0f / 3.0f) - h));
+		} else {
+			return p;
+		}
+	}
+
+
+	@Override
+	public String toString() {
+		return "Color{red=" + red + ", green=" + green + ", blue=" + blue + ", alpha=" + alpha + '}';
+	}
+
+	@Override
+	public boolean equals(Object o) {
+		if (this == o) {
+			return true;
+		}
+		if (o == null || getClass() != o.getClass()) {
+			return false;
+		}
+
+		RgbaColor color = (RgbaColor) o;
+
+		if (red != color.red) {
+			return false;
+		}
+		if (green != color.green) {
+			return false;
+		}
+		if (blue != color.blue) {
+			return false;
+		}
+		return Float.compare(color.alpha, alpha) == 0;
+	}
+
+	@Override
+	public int hashCode() {
+		int result = red;
+		result = 31 * result + green;
+		result = 31 * result + blue;
+		result = 31 * result + (alpha != +0.0f ? Float.floatToIntBits(alpha) : 0);
+		return result;
+	}
+
+	public static RgbaColor fromAwtColor(java.awt.Color color) {
+		return new RgbaColor(color.getRed(), color.getGreen(), color.getBlue(), ((float) color.getAlpha()) / 255);
+	}
+
+	public static RgbaColor fromAwtColor(java.awt.Color color, float alpha) {
+		return new RgbaColor(color.getRed(), color.getGreen(), color.getBlue(), alpha);
+	}
+
+	public static RgbaColor fromHsba(float h, float s, float b, float alpha) {
+		int rgb = java.awt.Color.HSBtoRGB(h, s, b);
+		return fromRgbaValue((rgb << 8) | (((int) (alpha * 255)) & 0xff));
+	}
+
+	public static RgbaColor fromRgb(int red, int green, int blue) {
+		return new RgbaColor(red, green, blue);
+	}
+
+	public static RgbaColor fromRgba(int red, int green, int blue, float alpha) {
+		return new RgbaColor(red, green, blue, alpha);
+	}
+
+	public static RgbaColor fromRgbValue(int rgb) {
+		int r = (rgb & 0x00ff0000) >> 16;
+		int g = (rgb & 0x0000ff00) >> 8;
+		int b = (rgb & 0x000000ff);
+		return new RgbaColor(r, g, b);
+	}
+
+	public static RgbaColor fromRgbaValue(int rgba) {
+		int r = (rgba >> 24) & 0xff;
+		int g = (rgba >> 16) & 0xff;
+		int b = (rgba >> 8) & 0xff;
+		float a = (rgba & 0xff) / 255f;
+		return new RgbaColor(r, g, b, a);
+	}
+
+	public static RgbaColor fromHex(String hex) {
+		if (hex.startsWith("#")) {
+			hex = hex.substring(1);
+		}
+		if (hex.length() == 3) {
+			int r = Integer.parseInt(hex, 0, 1, 16);
+			int g = Integer.parseInt(hex, 1, 2, 16);
+			int b = Integer.parseInt(hex, 2, 3, 16);
+			return new RgbaColor((r << 4) + r, (g << 4) + g, (b << 4) + b);
+		} else {
+			int r = Integer.parseInt(hex, 0, 2, 16);
+			int g = Integer.parseInt(hex, 2, 4, 16);
+			int b = Integer.parseInt(hex, 4, 6, 16);
+			int a = hex.length() == 8 ? Integer.parseInt(hex, 6, 8, 16) : 255;
+			return new RgbaColor(r, g, b, ((float) a) / 255);
+		}
+
+	}
+
+	public static RgbaColor fromHtmlString(String value) {
+		value = value.trim();
+		if (value.startsWith("rgba")) {
+			Matcher matcher = RgbaColor.RGBA_PATTERN.matcher(value);
+			if (matcher.find()) {
+				int r = (int) Float.parseFloat(matcher.group(1));
+				int g = (int) Float.parseFloat(matcher.group(2));
+				int b = (int) Float.parseFloat(matcher.group(3));
+				float a = parseCssFloatingPointNumber(matcher.group(4));
+				return new RgbaColor(r, g, b, a);
+			}
+		} else if (value.startsWith("rgb")) {
+			Matcher matcher = RgbaColor.RGB_PATTERN.matcher(value);
+			if (matcher.find()) {
+				int r = (int) Float.parseFloat(matcher.group(1));
+				int g = (int) Float.parseFloat(matcher.group(2));
+				int b = (int) Float.parseFloat(matcher.group(3));
+				return new RgbaColor(r, g, b);
+			}
+		} else if (value.startsWith("#")) {
+			return fromHex(value);
+		} else if (value.startsWith("hsla")) {
+			Matcher matcher = RgbaColor.HSLA_PATTERN.matcher(value);
+			if (matcher.find()) {
+				float h = Float.parseFloat(matcher.group(1)) / 255f;
+				float s = parseCssFloatingPointNumber(matcher.group(2));
+				float l = parseCssFloatingPointNumber(matcher.group(3));
+				float a = parseCssFloatingPointNumber(matcher.group(4));
+				return RgbaColor.fromHsla(h, s, l, a);
+			}
+		} else if (value.startsWith("hsl")) {
+			Matcher matcher = RgbaColor.HSL_PATTERN.matcher(value);
+			if (matcher.find()) {
+				float h = Float.parseFloat(matcher.group(1)) / 255f;
+				float s = parseCssFloatingPointNumber(matcher.group(2));
+				float l = parseCssFloatingPointNumber(matcher.group(3));
+				return RgbaColor.fromHsla(h, s, l, 1);
+			}
+		}
+		return CssStandardColors.CSS_STANDARD_COLORS_BY_NAME.get(value);
+	}
+
+	private static float parseCssFloatingPointNumber(String s) {
+		float a;
+		if (s.endsWith("%")) {
+			a = Integer.parseInt(s.substring(0, s.length() - 1)) / 100f;
+		} else {
+			a = Float.parseFloat(s);
+		}
+		return a;
+	}
+}
diff --git a/teamapps-common/src/main/java/org/teamapps/common/util/ClassPathResourceUtil.java b/teamapps-common/src/main/java/org/teamapps/common/util/ClassPathResourceUtil.java
new file mode 100644
index 000000000..5996b803e
--- /dev/null
+++ b/teamapps-common/src/main/java/org/teamapps/common/util/ClassPathResourceUtil.java
@@ -0,0 +1,63 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.common.util;
+
+import java.io.BufferedReader;
+import java.io.ByteArrayOutputStream;
+import java.io.InputStream;
+import java.io.InputStreamReader;
+import java.util.stream.Collectors;
+
+public class ClassPathResourceUtil {
+
+	private ClassPathResourceUtil() {}
+
+	public static String readResourceToString(String resourceName) {
+		InputStream is = getResourceAsStream(resourceName);
+		if (is != null) {
+			BufferedReader reader = new BufferedReader(new InputStreamReader(is));
+			return reader.lines().collect(Collectors.joining(System.lineSeparator()));
+		} else {
+			throw new IllegalArgumentException("Could not find resource: " + resourceName);
+		}
+	}
+
+	public static InputStream getResourceAsStream(String resourceName) {
+		InputStream is = ClassPathResourceUtil.class.getClassLoader().getResourceAsStream(resourceName);
+		if (is == null) {
+			is = ClassLoader.getSystemResourceAsStream(resourceName);
+		}
+		return is;
+	}
+
+	public static byte[] readResourceToByteArray(String resourceName) {
+		return readInputStreamToByteArray(getResourceAsStream(resourceName));
+	}
+
+	public static byte[] readInputStreamToByteArray(InputStream is) {
+		try {
+			ByteArrayOutputStream buffer = new ByteArrayOutputStream();
+			is.transferTo(buffer);
+			return buffer.toByteArray();
+		} catch (Exception e) {
+			throw ExceptionUtil.softenedException(e);
+		}
+	}
+}
diff --git a/teamapps-common/src/main/java/org/teamapps/common/util/ExceptionUtil.java b/teamapps-common/src/main/java/org/teamapps/common/util/ExceptionUtil.java
new file mode 100644
index 000000000..406f328f1
--- /dev/null
+++ b/teamapps-common/src/main/java/org/teamapps/common/util/ExceptionUtil.java
@@ -0,0 +1,59 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.common.util;
+
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+
+import java.lang.invoke.MethodHandles;
+import java.util.concurrent.Callable;
+
+public class ExceptionUtil {
+
+	private static final Logger LOGGER = LoggerFactory.getLogger(MethodHandles.lookup().lookupClass());
+
+	private ExceptionUtil() {}
+
+	public static void softenExceptions(RunnableWithExceptions runnable) {
+		try {
+			runnable.run();
+		} catch (Exception e) {
+			throw softenedException(e);
+		}
+	}
+
+	public static <V> V softenExceptions(Callable<V> callable) {
+		try {
+			return callable.call();
+		} catch (Exception e) {
+			throw softenedException(e);
+		}
+	}
+
+	public static <T extends RuntimeException> T softenedException(final Throwable e) {
+		return uncheck(e);
+	}
+
+	@SuppressWarnings("unchecked")
+	private static <T extends Throwable> T uncheck(Throwable throwable) throws T {
+		throw (T) throwable;
+	}
+
+}
diff --git a/teamapps-common/src/main/java/org/teamapps/common/util/RunnableWithExceptions.java b/teamapps-common/src/main/java/org/teamapps/common/util/RunnableWithExceptions.java
new file mode 100644
index 000000000..003d47a34
--- /dev/null
+++ b/teamapps-common/src/main/java/org/teamapps/common/util/RunnableWithExceptions.java
@@ -0,0 +1,26 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.common.util;
+
+public interface RunnableWithExceptions {
+
+	void run() throws Exception;
+
+}
diff --git a/teamapps-common/src/main/resources/teamAppsVersion.txt b/teamapps-common/src/main/resources/teamAppsVersion.txt
new file mode 100644
index 000000000..f2ab45c3b
--- /dev/null
+++ b/teamapps-common/src/main/resources/teamAppsVersion.txt
@@ -0,0 +1 @@
+${project.version}
\ No newline at end of file
diff --git a/teamapps-common/src/test/java/org/teamapps/common/format/RgbaColorTest.java b/teamapps-common/src/test/java/org/teamapps/common/format/RgbaColorTest.java
new file mode 100644
index 000000000..f5a7c6eb4
--- /dev/null
+++ b/teamapps-common/src/test/java/org/teamapps/common/format/RgbaColorTest.java
@@ -0,0 +1,137 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.common.format;
+
+import org.junit.Test;
+
+import static org.assertj.core.api.Assertions.assertThat;
+import static org.junit.Assert.assertEquals;
+import static org.junit.Assert.assertNotNull;
+
+
+public class RgbaColorTest {
+
+	@Test
+	public void testRgbToHsl() throws Exception {
+		assertThat(RgbaColor.rgbToHsl(255, 255, 255)).containsExactly(0, 0, 1);
+		assertThat(RgbaColor.rgbToHsl(255, 0, 0)).containsExactly(0, 1, .5f);
+		assertThat(RgbaColor.rgbToHsl(0, 255, 0)).containsExactly(1 / 3f, 1, .5f);
+		assertThat(RgbaColor.rgbToHsl(0, 0, 255)).containsExactly(2 / 3f, 1, .5f);
+		assertThat(RgbaColor.rgbToHsl(0, 0, 0)).containsExactly(0, 0, 0);
+	}
+
+	@Test
+	public void testFromHsla() throws Exception {
+		testColorToAndFromHsl(RgbaColor.MATERIAL_GREEN_300);
+		testColorToAndFromHsl(RgbaColor.MATERIAL_RED_500);
+		testColorToAndFromHsl(RgbaColor.MATERIAL_BLUE_300);
+		testColorToAndFromHsl(RgbaColor.MATERIAL_PURPLE_300);
+		testColorToAndFromHsl(RgbaColor.MATERIAL_ORANGE_300);
+		testColorToAndFromHsl(RgbaColor.MATERIAL_PINK_500);
+		testColorToAndFromHsl(RgbaColor.MATERIAL_YELLOW_400);
+	}
+
+	private void testColorToAndFromHsl(RgbaColor c) {
+		float[] hsl = RgbaColor.rgbToHsl(c.getRed(), c.getGreen(), c.getBlue());
+		assertEquals(c, RgbaColor.fromHsla(hsl[0], hsl[1], hsl[2], 1));
+	}
+
+	@Test
+	public void fromHtmlString_rgba() throws Exception {
+		assertRgba(RgbaColor.fromHtmlString("rgba(1, 2, 3, 0)"), 1, 2, 3, 0);
+		assertRgba(RgbaColor.fromHtmlString("rgba( 255  , 254  ,  253 ,  0.1 )"), 255, 254, 253, 0.1f);
+		assertRgba(RgbaColor.fromHtmlString("rgba(0, 0, 0, .99)"), 0, 0, 0, .99f);
+		assertRgba(RgbaColor.fromHtmlString("rgba(0, 0, 0, 50%)"), 0, 0, 0, .5f);
+	}
+
+	@Test
+	public void fromHtmlString_rgb() throws Exception {
+		assertRgba(RgbaColor.fromHtmlString("rgb(1, 2, 3)"), 1, 2, 3, 1);
+		assertRgba(RgbaColor.fromHtmlString("rgb(  255 ,  254  , 253  )"), 255, 254, 253, 1);
+		assertRgba(RgbaColor.fromHtmlString("rgb(0, 0, 0)"), 0, 0, 0, 1);
+	}
+
+	@Test
+	public void fromHtmlString_hex() throws Exception {
+		assertRgba(RgbaColor.fromHtmlString("#010203"), 1, 2, 3, 1);
+		assertRgba(RgbaColor.fromHtmlString(" #fffefd "), 0xff, 0xfe, 0xfd, 1);
+		assertRgba(RgbaColor.fromHtmlString("#000000"), 0, 0, 0, 1);
+		assertRgba(RgbaColor.fromHtmlString("#123"), 0x11, 0x22, 0x33, 1);
+	}
+
+	@Test
+	public void fromHtmlString_hsla() throws Exception {
+		assertHsla(RgbaColor.fromHtmlString("hsla(0, 50%, 30%, .1)"), 0, .5f, .3f, .1f);
+		assertHsla(RgbaColor.fromHtmlString("hsla(  75 ,  50%  , 10%  , 20% )"), 75 / 255f, .5f, .1f, .2f);
+	}
+
+	@Test
+	public void fromHtmlString_hsl() throws Exception {
+		assertHsla(RgbaColor.fromHtmlString("hsl(0, 50%, 30%)"), 0, .5f, .3f, 1);
+		assertHsla(RgbaColor.fromHtmlString("hsl(  75 ,  50%  , 10%  )"), 75 / 255f, .5f, .1f, 1);
+	}
+
+	@Test
+	public void fromHtmlString_standardColor() throws Exception {
+		assertRgba(RgbaColor.fromHtmlString("floralwhite"), 255, 250, 240, 1);
+	}
+
+	@Test
+	public void testToHtmlHexColorString() {
+		assertThat(Color.fromRgb(0xFF, 0x0, 0x0).toHtmlHexColorString()).isEqualTo("#FF0000");
+		assertThat(Color.fromRgb(0x0, 0xFF, 0x0).toHtmlHexColorString()).isEqualTo("#00FF00");
+		assertThat(Color.fromRgb(0x0, 0x0, 0xFF).toHtmlHexColorString()).isEqualTo("#0000FF");
+		assertThat(Color.fromRgb(0x1, 0x1, 0x1).toHtmlHexColorString()).isEqualTo("#010101");
+
+		assertThat(Color.fromRgba(0xFF, 0x0, 0x0, 0.75f).toHtmlHexColorString()).isEqualTo("#FF0000BF");
+		assertThat(Color.fromRgba(0x0, 0xFF, 0x0, 0.75f).toHtmlHexColorString()).isEqualTo("#00FF00BF");
+		assertThat(Color.fromRgba(0x0, 0x0, 0xFF, 0.75f).toHtmlHexColorString()).isEqualTo("#0000FFBF");
+		assertThat(Color.fromRgba(0x1, 0x1, 0x1, 0.75f).toHtmlHexColorString()).isEqualTo("#010101BF");
+		assertThat(Color.fromRgba(0xFF, 0x0, 0x0, 0.05f).toHtmlHexColorString()).isEqualTo("#FF00000C");
+		assertThat(Color.fromRgba(0x0, 0x0, 0xFF, 0.05f).toHtmlHexColorString()).isEqualTo("#0000FF0C");
+
+		assertThat(Color.fromRgba(0xFF, 0x0, 0x0, 1).toHtmlHexColorString()).isEqualTo("#FF0000");
+		assertThat(Color.fromRgba(0x0, 0xFF, 0x0, 1).toHtmlHexColorString()).isEqualTo("#00FF00");
+		assertThat(Color.fromRgba(0x0, 0x0, 0xFF, 1).toHtmlHexColorString()).isEqualTo("#0000FF");
+		assertThat(Color.fromRgba(0x1, 0x1, 0x1, 1).toHtmlHexColorString()).isEqualTo("#010101");
+
+		assertThat(Color.fromRgba(0xFF, 0x0, 0x0, 0).toHtmlHexColorString()).isEqualTo("#FF000000");
+		assertThat(Color.fromRgba(0x0, 0xFF, 0x0, 0).toHtmlHexColorString()).isEqualTo("#00FF0000");
+		assertThat(Color.fromRgba(0x0, 0x0, 0xFF, 0).toHtmlHexColorString()).isEqualTo("#0000FF00");
+		assertThat(Color.fromRgba(0x1, 0x1, 0x1, 0).toHtmlHexColorString()).isEqualTo("#01010100");
+	}
+
+	private void assertRgba(RgbaColor color, int r, int g, int b, float a) {
+		assertNotNull(color);
+		assertEquals(r, color.getRed());
+		assertEquals(g, color.getGreen());
+		assertEquals(b, color.getBlue());
+		assertEquals(a, color.getAlpha(), .0001);
+	}
+
+	private void assertHsla(RgbaColor color, float h, float s, float l, float a) {
+		assertNotNull(color);
+		assertEquals(h, color.getHue(), .01);
+		assertEquals(s, color.getSaturation(), .01);
+		assertEquals(l, color.getLuminance(), .01);
+		assertEquals(a, color.getAlpha(), .01);
+	}
+
+}
diff --git a/teamapps-common/src/test/java/org/teamapps/ux/component/format/ColorTest.java b/teamapps-common/src/test/java/org/teamapps/ux/component/format/ColorTest.java
deleted file mode 100644
index 468a72b71..000000000
--- a/teamapps-common/src/test/java/org/teamapps/ux/component/format/ColorTest.java
+++ /dev/null
@@ -1,55 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.ux.component.format;
-
-import org.junit.Assert;
-import org.junit.Test;
-import org.teamapps.common.format.Color;
-
-import static org.assertj.core.api.Assertions.assertThat;
-
-
-public class ColorTest {
-
-	@Test
-	public void testRgbToHsl() throws Exception {
-		assertThat(Color.rgbToHsl(255, 255, 255)).containsExactly(0, 0, 1);
-		assertThat(Color.rgbToHsl(255, 0, 0)).containsExactly(0, 1, .5f);
-		assertThat(Color.rgbToHsl(0, 255, 0)).containsExactly(1/3f, 1, .5f);
-		assertThat(Color.rgbToHsl(0, 0, 255)).containsExactly(2/3f, 1, .5f);
-		assertThat(Color.rgbToHsl(0, 0, 0)).containsExactly(0, 0, 0);
-	}
-
-	@Test
-	public void test() throws Exception {
-		testColorToAndFromHsl(Color.MATERIAL_GREEN_300);
-		testColorToAndFromHsl(Color.MATERIAL_RED_500);
-		testColorToAndFromHsl(Color.MATERIAL_BLUE_300);
-		testColorToAndFromHsl(Color.MATERIAL_PURPLE_300);
-		testColorToAndFromHsl(Color.MATERIAL_ORANGE_300);
-		testColorToAndFromHsl(Color.MATERIAL_PINK_500);
-		testColorToAndFromHsl(Color.MATERIAL_YELLOW_400);
-	}
-
-	private void testColorToAndFromHsl(Color c) {
-		float[] hsl = Color.rgbToHsl(c.getRed(), c.getGreen(), c.getBlue());
-		Assert.assertEquals(c, Color.fromHsla(hsl[0], hsl[1], hsl[2], 1));
-	}
-}
diff --git a/teamapps-icon/pom.xml b/teamapps-icon/pom.xml
index e7f0777a5..1b46ab4c8 100644
--- a/teamapps-icon/pom.xml
+++ b/teamapps-icon/pom.xml
@@ -3,12 +3,11 @@
     <parent>
         <artifactId>teamapps</artifactId>
         <groupId>org.teamapps</groupId>
-        <version>0.9.8-SNAPSHOT</version>
+        <version>0.9.208-SNAPSHOT</version>
     </parent>
     <modelVersion>4.0.0</modelVersion>
 
     <artifactId>teamapps-icon</artifactId>
-
     <name>TeamApps Icon</name>
     <description>TeamApps Icon</description>
     <url>https://github.com/teamapps-org/teamapps</url>
@@ -34,17 +33,15 @@
     </developers>
 
     <dependencies>
-
         <dependency>
             <groupId>commons-io</groupId>
             <artifactId>commons-io</artifactId>
         </dependency>
-
         <dependency>
             <groupId>net.coobird</groupId>
             <artifactId>thumbnailator</artifactId>
+            <version>0.4.20</version>
         </dependency>
-
     </dependencies>
 
 </project>
\ No newline at end of file
diff --git a/teamapps-ux/src/main/java/org/teamapps/data/value/filter/FilterType.java b/teamapps-icon/src/main/java/org/teamapps/icons/Icon.java
similarity index 57%
rename from teamapps-ux/src/main/java/org/teamapps/data/value/filter/FilterType.java
rename to teamapps-icon/src/main/java/org/teamapps/icons/Icon.java
index 150ae7ed1..e77707be6 100644
--- a/teamapps-ux/src/main/java/org/teamapps/data/value/filter/FilterType.java
+++ b/teamapps-icon/src/main/java/org/teamapps/icons/Icon.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,24 +17,24 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-package org.teamapps.data.value.filter;
+package org.teamapps.icons;
 
-public enum FilterType {
+/**
+ * @param <ICON> Must be a self class reference.
+ * @param <STYLE> The style class these icons support.
+ */
+public interface Icon<ICON extends Icon<ICON, STYLE>, STYLE> {
 
-	/*
-	NumericFilter: type: equal, unequal, smaller, smallerOrEqual, greater, greaterOrEqual, interval, intervalInclusive; value, value2
-	TextFilter: type: equal, unequal, startsWith, startsNotWith, wildcard, unequal wildcard, phrase, unequal phrase, String query
-	BooleanFilter: true, false
+	/**
+	 * Creates a copy of this icon with the specified style. The style may be null!
+	 * @param style The style to apply. May be null!
+	 * @return A copy of this icon with the specified style.
+	 */
+	ICON withStyle(STYLE style);
 
+	/**
+	 * @return The style of this icon. May be null!
 	 */
-	ALL_MATCHING,
-	AND,
-	OR,
-	NUMERIC,
-	NUMERIC_RANGE,
-	TEXT,
-	BOOLEAN,
-	ID_VALUE,
-	FULL_TEXT,
+	STYLE getStyle();
 
 }
diff --git a/teamapps-icon/src/main/java/org/teamapps/icons/IconDecoderContext.java b/teamapps-icon/src/main/java/org/teamapps/icons/IconDecoderContext.java
new file mode 100644
index 000000000..169c58e12
--- /dev/null
+++ b/teamapps-icon/src/main/java/org/teamapps/icons/IconDecoderContext.java
@@ -0,0 +1,26 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.icons;
+
+public interface IconDecoderContext {
+
+	Icon<?, ?> decodeIcon(String qualifiedEncodedIcon);
+
+}
diff --git a/teamapps-icon/src/main/java/org/teamapps/icons/IconEncoderContext.java b/teamapps-icon/src/main/java/org/teamapps/icons/IconEncoderContext.java
new file mode 100644
index 000000000..6eb5c093f
--- /dev/null
+++ b/teamapps-icon/src/main/java/org/teamapps/icons/IconEncoderContext.java
@@ -0,0 +1,26 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.icons;
+
+public interface IconEncoderContext {
+
+	String encodeIcon(Icon<?, ?> icon);
+
+}
diff --git a/teamapps-icon/src/main/java/org/teamapps/icons/IconLibraryRegistry.java b/teamapps-icon/src/main/java/org/teamapps/icons/IconLibraryRegistry.java
new file mode 100644
index 000000000..490a17438
--- /dev/null
+++ b/teamapps-icon/src/main/java/org/teamapps/icons/IconLibraryRegistry.java
@@ -0,0 +1,131 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.icons;
+
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+import org.teamapps.icons.spi.*;
+
+import java.lang.annotation.Annotation;
+import java.lang.invoke.MethodHandles;
+import java.util.Arrays;
+import java.util.HashMap;
+import java.util.Map;
+import java.util.Objects;
+
+public class IconLibraryRegistry {
+
+	private static final Logger LOGGER = LoggerFactory.getLogger(MethodHandles.lookup().lookupClass());
+
+	private final Map<Class<? extends Icon<?, ?>>, String> libraryNameByIconClass = new HashMap<>();
+	private final Map<String, IconEncoder> encodersByLibraryName = new HashMap<>();
+	private final Map<String, IconDecoder> decodersByLibraryName = new HashMap<>();
+	private final Map<String, IconLoader> loadersByLibraryName = new HashMap<>();
+	private final Map<String, Object> defaultIconStylesByLibraryName = new HashMap<>();
+
+
+	public <I extends Icon<I, S>, S> IconEncoder<I> getIconEncoder(Class<I> iconClass) {
+		registerIconLibrary(iconClass);
+		String libraryName = libraryNameByIconClass.get(iconClass);
+		return encodersByLibraryName.get(libraryName);
+	}
+
+	public <I extends Icon<I, S>, S> IconDecoder<I> getIconDecoder(String libraryName) {
+		return decodersByLibraryName.get(libraryName); // may be null, if no icon of this type has ever been encoded
+	}
+
+	public <I extends Icon<I, S>, S> IconLoader<I> getIconLoader(String libraryName) {
+		return loadersByLibraryName.get(libraryName);
+	}
+
+	public <S, I extends Icon<I, S>> S getDefaultStyle(Class<I> iconClass) {
+		return (S) defaultIconStylesByLibraryName.get(getLibraryName(iconClass));
+	}
+
+	public String getLibraryName(Icon<?, ?> icon) {
+		return getLibraryName(icon.getClass());
+	}
+
+	public <I extends Icon<I, S>, S> String getLibraryName(Class<I> iconClass) {
+		registerIconLibrary(iconClass);
+		return libraryNameByIconClass.get(iconClass);
+	}
+
+	public <I extends Icon<I, S>, S> void registerIconLibrary(Class<I> iconClass) {
+		if (!libraryNameByIconClass.containsKey(iconClass)) {
+			IconLibrary libraryAnnotation = findAnnotation(iconClass, IconLibrary.class);
+			if (libraryAnnotation != null) {
+				IconEncoder<I> iconEncoder;
+				try {
+					iconEncoder = libraryAnnotation.encoder().getDeclaredConstructor().newInstance();
+				} catch (Exception e) {
+					LOGGER.error("Could not create icon encoder for icon class " + iconClass, e);
+					throw new RuntimeException(e);
+				}
+				IconDecoder<I> iconDecoder;
+				try {
+					iconDecoder = libraryAnnotation.decoder().getDeclaredConstructor().newInstance();
+				} catch (Exception e) {
+					LOGGER.error("Could not create icon decoder for icon class " + iconClass, e);
+					throw new RuntimeException(e);
+				}
+				IconLoader<I> iconLoader;
+				try {
+					iconLoader = libraryAnnotation.loader().getDeclaredConstructor().newInstance();
+				} catch (Exception e) {
+					LOGGER.error("Could not create icon loader for icon class " + iconClass, e);
+					throw new RuntimeException(e);
+				}
+				DefaultStyleSupplier<S> defaultStyleSupplier;
+				try {
+					defaultStyleSupplier = libraryAnnotation.defaultStyleSupplier().getDeclaredConstructor().newInstance();
+				} catch (Exception e) {
+					LOGGER.error("Could not create defaultStyleSupplier for icon class " + iconClass, e);
+					throw new RuntimeException(e);
+				}
+				registerIconLibrary(iconClass, libraryAnnotation.name(), iconEncoder, iconDecoder, iconLoader, defaultStyleSupplier.getDefaultStyle());
+			}
+		}
+	}
+
+	public <I extends Icon<I, S>, S> void registerIconLibrary(Class<I> iconClass, String libraryName, IconEncoder<I> iconEncoder, IconDecoder<I> iconDecoder, IconLoader<I> iconLoader, S defaultStyle) {
+		synchronized (this) {
+			if (!libraryNameByIconClass.containsKey(iconClass)) {
+				libraryNameByIconClass.put(iconClass, libraryName);
+				encodersByLibraryName.put(libraryName, iconEncoder);
+				decodersByLibraryName.put(libraryName, iconDecoder);
+				loadersByLibraryName.put(libraryName, iconLoader);
+				defaultIconStylesByLibraryName.put(libraryName, defaultStyle);
+			}
+		}
+	}
+
+	private static <A extends Annotation> A findAnnotation(Class<?> clazz, Class<A> annotationClass) {
+		A annotation = clazz.getAnnotation(annotationClass);
+		if (annotation != null) {
+			return annotation;
+		}
+		return Arrays.stream(clazz.getInterfaces())
+				.map(i -> findAnnotation(i, annotationClass))
+				.filter(Objects::nonNull)
+				.findFirst()
+				.orElseGet(() -> findAnnotation(clazz.getSuperclass(), annotationClass));
+	}
+}
diff --git a/teamapps-icon/src/main/java/org/teamapps/icons/IconLoaderContext.java b/teamapps-icon/src/main/java/org/teamapps/icons/IconLoaderContext.java
new file mode 100644
index 000000000..ef24e95f9
--- /dev/null
+++ b/teamapps-icon/src/main/java/org/teamapps/icons/IconLoaderContext.java
@@ -0,0 +1,26 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.icons;
+
+public interface IconLoaderContext {
+
+	IconResource loadIcon(Icon<?, ?> icon, int size);
+
+}
diff --git a/teamapps-icon/src/main/java/org/teamapps/icons/IconProvider.java b/teamapps-icon/src/main/java/org/teamapps/icons/IconProvider.java
new file mode 100644
index 000000000..6c9afb093
--- /dev/null
+++ b/teamapps-icon/src/main/java/org/teamapps/icons/IconProvider.java
@@ -0,0 +1,139 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.icons;
+
+import org.teamapps.icons.cache.IconCache;
+import org.teamapps.icons.cache.FileIconCache;
+import org.teamapps.icons.spi.IconDecoder;
+import org.teamapps.icons.spi.IconEncoder;
+import org.teamapps.icons.spi.IconLoader;
+
+import java.io.IOException;
+import java.nio.file.Files;
+
+public class IconProvider implements IconLoaderContext, IconDecoderContext {
+
+	private final IconLibraryRegistry iconLibraryRegistry;
+	private final IconCache iconCache;
+
+	public IconProvider(IconLibraryRegistry iconLibraryRegistry) {
+		this.iconLibraryRegistry = iconLibraryRegistry;
+		try {
+			this.iconCache = new FileIconCache(Files.createTempDirectory("teamapps-icon-cache").toFile());
+		} catch (IOException e) {
+			throw new RuntimeException(e);
+		}
+	}
+
+	public IconProvider(IconLibraryRegistry iconLibraryRegistry, IconCache iconCache) {
+		this.iconLibraryRegistry = iconLibraryRegistry;
+		this.iconCache = iconCache;
+	}
+
+	/**
+	 * Encodes the given icon. Does not provide any fallback style mechanism. If the icon's style is null, it is encoded without style.
+	 * @return the encoded icon
+	 */
+	public String encodeIcon(Icon<?, ?> icon) {
+		return getLibraryName(icon) + "." + getIconEncoder(icon.getClass()).encodeIcon(icon, this::encodeIcon);
+	}
+
+	@Override
+	public Icon<?, ?> decodeIcon(String qualifiedEncodedIcon) {
+		String libraryName = getLibraryName(qualifiedEncodedIcon);
+		IconDecoder iconDecoder = iconLibraryRegistry.getIconDecoder(libraryName);
+		String encodedIconString = qualifiedEncodedIcon.substring(libraryName.length() + 1);
+		return iconDecoder.decodeIcon(encodedIconString, this);
+	}
+
+	public IconResource loadIcon(String qualifiedEncodedIcon, int size) {
+		if (iconCache != null) {
+			IconResource cachedIcon = iconCache.getIcon(qualifiedEncodedIcon, size);
+			if (cachedIcon != null) {
+				return cachedIcon;
+			}
+		}
+
+		String libraryName = getLibraryName(qualifiedEncodedIcon);
+		IconDecoder iconDecoder = iconLibraryRegistry.getIconDecoder(libraryName);
+		String encodedIconString = qualifiedEncodedIcon.substring(libraryName.length() + 1);
+		Icon icon = iconDecoder.decodeIcon(encodedIconString, this);
+
+		IconResource iconResource = loadIconWithoutCaching(icon, size);
+		if (iconResource == null) {
+			return null;
+		}
+
+		if (iconCache != null) {
+			iconCache.putIcon(qualifiedEncodedIcon, size, iconResource);
+		}
+
+		return iconResource;
+	}
+
+	@Override
+	public IconResource loadIcon(Icon<?, ?> icon, int size) {
+		return loadIconWithoutCaching(icon, size);
+	}
+
+	private IconResource loadIconWithoutCaching(Icon<?, ?> icon, int size) {
+		String libraryName = getLibraryName(icon);
+		IconLoader iconLoader = iconLibraryRegistry.getIconLoader(libraryName);
+		IconResource iconResource = iconLoader.loadIcon(icon, size, this);
+		if (iconResource == null) {
+			return null;
+		}
+
+		if (iconResource.getIconType().isRasterImage() && iconResource.getSize() > 0 && size > 0 &&  iconResource.getSize() != size) {
+			byte[] resizedIconBytes = new PngIconResizer().resizeIcon(iconResource.getBytes(), size);
+			iconResource = new IconResource(resizedIconBytes, IconType.PNG, size);
+		}
+		return iconResource;
+	}
+
+	public <I extends Icon<I, S>, S> IconEncoder<I> getIconEncoder(Class<I> iconClass) {
+		return iconLibraryRegistry.getIconEncoder(iconClass);
+	}
+
+	public <I extends Icon<I, S>, S> IconDecoder<I> getIconDecoder(String libraryName) {
+		return iconLibraryRegistry.getIconDecoder(libraryName);
+	}
+
+	public <I extends Icon<I, S>, S> String getLibraryName(Icon icon) {
+		return iconLibraryRegistry.getLibraryName(icon);
+	}
+
+	public <I extends Icon<I, S>, S> void registerIconLibrary(Class<I> iconClass) {
+		iconLibraryRegistry.registerIconLibrary(iconClass);
+	}
+
+	public <I extends Icon<I, S>, S> void registerIconLibrary(Class<I> iconClass, String libraryName, IconEncoder<I> iconEncoder, IconDecoder<I> iconDecoder, IconLoader<I> iconLoader, S defaultStyle) {
+		iconLibraryRegistry.registerIconLibrary(iconClass, libraryName, iconEncoder, iconDecoder, iconLoader, defaultStyle);
+	}
+
+	public <I extends Icon<I, S>, S> S getDefaultStyle(Class<I> iconClass) {
+		return iconLibraryRegistry.getDefaultStyle(iconClass);
+	}
+
+	private String getLibraryName(String qualifiedEncodedIcon) {
+		int firstDotIndex = qualifiedEncodedIcon.indexOf('.');
+		return qualifiedEncodedIcon.substring(0, firstDotIndex);
+	}
+}
diff --git a/teamapps-icon/src/main/java/org/teamapps/icons/systemprovider/IconResource.java b/teamapps-icon/src/main/java/org/teamapps/icons/IconResource.java
similarity index 59%
rename from teamapps-icon/src/main/java/org/teamapps/icons/systemprovider/IconResource.java
rename to teamapps-icon/src/main/java/org/teamapps/icons/IconResource.java
index ce456ad07..5477e5990 100644
--- a/teamapps-icon/src/main/java/org/teamapps/icons/systemprovider/IconResource.java
+++ b/teamapps-icon/src/main/java/org/teamapps/icons/IconResource.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,26 +17,26 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-package org.teamapps.icons.systemprovider;
+package org.teamapps.icons;
 
-import java.io.ByteArrayInputStream;
-import java.io.InputStream;
-import java.util.Date;
-
-public class IconResource  {
-
-    private static final Date LAST_MODIFIED = new Date();
+public class IconResource {
 
     private final byte[] bytes;
-    private final String mimeType;
+    private final IconType iconType;
+    private final int size;
 
-    public IconResource(byte[] bytes, String mimeType) {
-        this.bytes = bytes;
-        this.mimeType = mimeType;
+    public IconResource(byte[] bytes, IconType iconType) {
+        this(bytes, iconType, -1);
     }
 
-    public InputStream getInputStream() {
-        return new ByteArrayInputStream(bytes);
+    public IconResource(byte[] bytes, IconType iconType, int size) {
+        this.bytes = bytes;
+        this.iconType = iconType;
+        this.size = size;
+
+        if (iconType.isRasterImage() && size <= 0) {
+            throw new IllegalArgumentException("iconSize is required for non-scalable icons.");
+        }
     }
 
     public byte[] getBytes() {
@@ -47,15 +47,15 @@ public long getLength() {
         return bytes.length;
     }
 
-    public Date getLastModified() {
-        return LAST_MODIFIED;
+    public IconType getIconType() {
+        return iconType;
     }
 
-    public Date getExpires() {
-        return new Date(System.currentTimeMillis() + 86_400_000L * 60);
+    public String getMimeType() {
+        return iconType.getMimeType();
     }
 
-    public String getMimeType() {
-        return mimeType;
+    public int getSize() {
+        return size;
     }
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/application/validation/RecordValueChange.java b/teamapps-icon/src/main/java/org/teamapps/icons/IconType.java
similarity index 61%
rename from teamapps-ux/src/main/java/org/teamapps/ux/application/validation/RecordValueChange.java
rename to teamapps-icon/src/main/java/org/teamapps/icons/IconType.java
index dcc8546d0..0acbde733 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/application/validation/RecordValueChange.java
+++ b/teamapps-icon/src/main/java/org/teamapps/icons/IconType.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,24 +17,26 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-package org.teamapps.ux.application.validation;
+package org.teamapps.icons;
 
-public class RecordValueChange {
+public enum IconType {
 
-    private final String propertyName;
-    private final Object value;
+    PNG("image/png", true),
+    SVG("image/svg+xml", false);
 
-    public RecordValueChange(String propertyName, Object value) {
-        this.propertyName = propertyName;
-        this.value = value;
-    }
+    private final String mimeType;
+    private final boolean rasterImage;
 
-    public String getPropertyName() {
-        return propertyName;
+    IconType(String mimeType, boolean rasterImage) {
+        this.mimeType = mimeType;
+        this.rasterImage = rasterImage;
     }
 
-    public Object getValue() {
-        return value;
+    public String getMimeType() {
+        return mimeType;
     }
 
+    public boolean isRasterImage() {
+        return rasterImage;
+    }
 }
diff --git a/teamapps-icon/src/main/java/org/teamapps/icons/systemprovider/ResizingIconProvider.java b/teamapps-icon/src/main/java/org/teamapps/icons/PngIconResizer.java
similarity index 86%
rename from teamapps-icon/src/main/java/org/teamapps/icons/systemprovider/ResizingIconProvider.java
rename to teamapps-icon/src/main/java/org/teamapps/icons/PngIconResizer.java
index 945ffa45f..8a14595be 100644
--- a/teamapps-icon/src/main/java/org/teamapps/icons/systemprovider/ResizingIconProvider.java
+++ b/teamapps-icon/src/main/java/org/teamapps/icons/PngIconResizer.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,18 +17,19 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-package org.teamapps.icons.systemprovider;
+package org.teamapps.icons;
 
 import net.coobird.thumbnailator.Thumbnails;
 
+import java.io.ByteArrayInputStream;
 import java.io.ByteArrayOutputStream;
 import java.io.IOException;
 import java.io.InputStream;
 
-public class ResizingIconProvider {
+public class PngIconResizer {
 
 	public byte[] resizeIcon(byte[] bytes, int size) {
-		InputStream inputStream = IconUtils.getInputStream(bytes);
+		InputStream inputStream = new ByteArrayInputStream(bytes);
 		return resizeIcon(inputStream, size);
 	}
 
diff --git a/teamapps-icon/src/main/java/org/teamapps/icons/SessionIconProvider.java b/teamapps-icon/src/main/java/org/teamapps/icons/SessionIconProvider.java
new file mode 100644
index 000000000..f9c04dacc
--- /dev/null
+++ b/teamapps-icon/src/main/java/org/teamapps/icons/SessionIconProvider.java
@@ -0,0 +1,83 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.icons;
+
+import org.teamapps.icons.spi.IconDecoder;
+import org.teamapps.icons.spi.IconEncoder;
+import org.teamapps.icons.spi.IconLoader;
+
+import java.util.HashMap;
+import java.util.Map;
+
+/**
+ * TeamApps session-specific icon provider. Allows for custom (session-specific) default styles per icon library.
+ */
+public class SessionIconProvider {
+
+	private final IconProvider iconProvider;
+
+	private final Map<Class<? extends Icon>, Object> defaultStyleByIconClass = new HashMap<>();
+
+	public SessionIconProvider(IconProvider iconProvider) {
+		this.iconProvider = iconProvider;
+	}
+
+	public <I extends Icon<I, S>, S> String encodeIcon(I icon) {
+		return encodeIcon(icon, false);
+	}
+
+	public <I extends Icon<I, S>, S> String encodeIcon(I icon, boolean fallbackToDefaultStyle) {
+		IconEncoder encoder = iconProvider.getIconEncoder(icon.getClass());
+
+		if (icon.getStyle() == null && fallbackToDefaultStyle) {
+			S style =  (S) defaultStyleByIconClass.computeIfAbsent(icon.getClass(), iClass -> iconProvider.getDefaultStyle(iClass));
+			icon = icon.withStyle(style);
+		}
+
+		return iconProvider.getLibraryName(icon) + "."
+				+ encoder.encodeIcon(icon, i -> encodeIcon((Icon) i, fallbackToDefaultStyle));
+	}
+
+	public Icon<?, ?> decodeIcon(String qualifiedEncodedIconString) {
+		return iconProvider.decodeIcon(qualifiedEncodedIconString);
+	}
+
+	public IconResource loadIcon(String qualifiedEncodedIconString, int size) {
+		return iconProvider.loadIcon(qualifiedEncodedIconString, size);
+	}
+
+	public IconResource loadIcon(Icon<?, ?> icon, int size) {
+		return iconProvider.loadIcon(icon, size);
+	}
+
+	public <I extends Icon<I, S>, S> void registerIconLibrary(Class<I> iconClass) {
+		iconProvider.registerIconLibrary(iconClass);
+	}
+
+	public <I extends Icon<I, S>, S> void registerIconLibrary(Class<I> iconClass, String libraryName, IconEncoder<I> iconEncoder, IconDecoder<I> iconDecoder, IconLoader<I> iconLoader, S defaultStyle) {
+		iconProvider.registerIconLibrary(iconClass, libraryName, iconEncoder, iconDecoder, iconLoader, defaultStyle);
+	}
+
+	public <I extends Icon<I, S>, S> void setDefaultStyleForIconClass(Class<I> iconClass, S defaultStyle) {
+		iconProvider.registerIconLibrary(iconClass);
+		defaultStyleByIconClass.put(iconClass, defaultStyle);
+	}
+
+}
diff --git a/teamapps-icon/src/main/java/org/teamapps/icons/api/CompositeIcon.java b/teamapps-icon/src/main/java/org/teamapps/icons/api/CompositeIcon.java
deleted file mode 100644
index 3814adda5..000000000
--- a/teamapps-icon/src/main/java/org/teamapps/icons/api/CompositeIcon.java
+++ /dev/null
@@ -1,86 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.icons.api;
-
-public class CompositeIcon implements Icon {
-
-	public static final String COMPOSED_ICON_PREFIX = "x-multi-icon.";
-	public static final String SUB_ICON_MARKER = ".x-sub-";
-	public static final String BOTTOM_RIGHT_SUB_ICON = SUB_ICON_MARKER + "1.";
-	public static final String BOTTOM_LEFT_SUB_ICON = SUB_ICON_MARKER + "2.";
-	public static final String TOP_LEFT_SUB_ICON = SUB_ICON_MARKER + "3.";
-	public static final String TOP_RIGHT_SUB_ICON = SUB_ICON_MARKER + "4.";
-
-	private Icon baseIcon;
-	private	Icon bottomRightIcon;
-	private	Icon bottomLeftIcon;
-	private	Icon topLeftIcon;
-	private	Icon topRightIcon;
-
-	public static CompositeIcon of(Icon baseIcon, Icon bottomRightIcon) {
-		return new CompositeIcon(baseIcon, bottomRightIcon);
-	}
-
-	public static CompositeIcon of(Icon baseIcon, Icon bottomRightIcon, Icon bottomLeftIcon, Icon topLeftIcon, Icon topRightIcon) {
-		return new CompositeIcon(baseIcon, bottomRightIcon, bottomLeftIcon, topLeftIcon, topRightIcon);
-	}
-
-	public CompositeIcon(Icon baseIcon) {
-		this.baseIcon = baseIcon;
-	}
-
-	public CompositeIcon(Icon baseIcon, Icon bottomRightIcon) {
-		this.baseIcon = baseIcon;
-		this.bottomRightIcon = bottomRightIcon;
-	}
-
-	public CompositeIcon(Icon baseIcon, Icon bottomRightIcon, Icon bottomLeftIcon, Icon topLeftIcon, Icon topRightIcon) {
-		this.baseIcon = baseIcon;
-		this.bottomRightIcon = bottomRightIcon;
-		this.bottomLeftIcon = bottomLeftIcon;
-		this.topLeftIcon = topLeftIcon;
-		this.topRightIcon = topRightIcon;
-	}
-
-	@Override
-	public String getQualifiedIconId(IconTheme theme, boolean baseStyle) {
-		StringBuilder sb = new StringBuilder();
-		sb.append(COMPOSED_ICON_PREFIX);
-		sb.append(baseIcon.getQualifiedIconId(theme, baseStyle));
-		if (bottomRightIcon != null) {
-			sb.append(BOTTOM_RIGHT_SUB_ICON);
-			sb.append(bottomRightIcon.getQualifiedIconId(theme, false));
-		}
-		if (bottomLeftIcon != null) {
-			sb.append(BOTTOM_LEFT_SUB_ICON);
-			sb.append(bottomLeftIcon.getQualifiedIconId(theme, false));
-		}
-		if (topLeftIcon != null) {
-			sb.append(TOP_LEFT_SUB_ICON);
-			sb.append(topLeftIcon.getQualifiedIconId(theme, false));
-		}
-		if (topRightIcon != null) {
-			sb.append(TOP_RIGHT_SUB_ICON);
-			sb.append(topRightIcon.getQualifiedIconId(theme, false));
-		}
-
-		return sb.toString();
-	}
-}
diff --git a/teamapps-icon/src/main/java/org/teamapps/icons/api/CustomIconStyle.java b/teamapps-icon/src/main/java/org/teamapps/icons/api/CustomIconStyle.java
deleted file mode 100644
index 70614435b..000000000
--- a/teamapps-icon/src/main/java/org/teamapps/icons/api/CustomIconStyle.java
+++ /dev/null
@@ -1,96 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.icons.api;
-
-import java.awt.*;
-
-public class CustomIconStyle implements IconStyle {
-
-	private String styleId;
-	private String styleName;
-	private String baseStyleId;
-	private boolean canBeUseAsSubIcon;
-	private Color[] searchColors;
-	private Color[] replaceColors;
-	private int matchFuzzinessThreshold = 25;
-
-	public CustomIconStyle(String styleId, String styleName, String baseStyleId, boolean canBeUseAsSubIcon, Color searchColor, Color replaceColor) {
-		this.styleId = styleId;
-		this.styleName = styleName;
-		this.baseStyleId = baseStyleId;
-		this.canBeUseAsSubIcon = canBeUseAsSubIcon;
-		this.searchColors = new Color[] {searchColor};
-		this.replaceColors = new Color[] {replaceColor};
-	}
-
-	public CustomIconStyle(String styleId, String styleName, String baseStyleId, boolean canBeUseAsSubIcon, Color[] searchColors, Color[] replaceColors) {
-		this.styleId = styleId;
-		this.styleName = styleName;
-		this.baseStyleId = baseStyleId;
-		this.canBeUseAsSubIcon = canBeUseAsSubIcon;
-		this.searchColors = searchColors;
-		this.replaceColors = replaceColors;
-	}
-
-	public CustomIconStyle(String styleId, String styleName, String baseStyleId, boolean canBeUseAsSubIcon, Color[] searchColors, Color[] replaceColors, int matchFuzzinessThreshold) {
-		this.styleId = styleId;
-		this.styleName = styleName;
-		this.baseStyleId = baseStyleId;
-		this.canBeUseAsSubIcon = canBeUseAsSubIcon;
-		this.searchColors = searchColors;
-		this.replaceColors = replaceColors;
-		this.matchFuzzinessThreshold = matchFuzzinessThreshold;
-	}
-
-
-	public String getStyleId() {
-		return styleId;
-	}
-
-	@Override
-	public String getStyleName() {
-		return styleName;
-	}
-
-	@Override
-	public boolean canBeUsedAsSubIcon() {
-		return canBeUseAsSubIcon;
-	}
-
-	public String getBaseStyleId() {
-		return baseStyleId;
-	}
-
-	public Color[] getSearchColors() {
-		return searchColors;
-	}
-
-	public Color[] getReplaceColors() {
-		return replaceColors;
-	}
-
-	public int getMatchFuzzinessThreshold() {
-		return matchFuzzinessThreshold;
-	}
-
-	public void setMatchFuzzinessThreshold(int matchFuzzinessThreshold) {
-		this.matchFuzzinessThreshold = matchFuzzinessThreshold;
-	}
-}
diff --git a/teamapps-icon/src/main/java/org/teamapps/icons/api/StyledCompositeIcon.java b/teamapps-icon/src/main/java/org/teamapps/icons/api/StyledCompositeIcon.java
deleted file mode 100644
index 64dd1ce9c..000000000
--- a/teamapps-icon/src/main/java/org/teamapps/icons/api/StyledCompositeIcon.java
+++ /dev/null
@@ -1,158 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.icons.api;
-
-import static org.teamapps.icons.api.CompositeIcon.*;
-
-public class StyledCompositeIcon implements Icon {
-
-	private StyledIcon baseIcon;
-	private	StyledIcon bottomRightIcon;
-	private	StyledIcon bottomLeftIcon;
-	private	StyledIcon topLeftIcon;
-	private	StyledIcon topRightIcon;
-
-	public static boolean isComposedIcon(String icon) {
-		if (icon != null && icon.startsWith(COMPOSED_ICON_PREFIX)) {
-			return true;
-		}
-		return false;
-	}
-
-	public static StyledCompositeIcon parse(String icon) {
-		if (icon == null) {
-			return null;
-		}
-		if (!icon.startsWith(COMPOSED_ICON_PREFIX)) {
-			StyledIcon baseIcon = StyledIcon.parseIcon(icon);
-			return new StyledCompositeIcon(baseIcon);
-		}
-		icon = icon.substring(COMPOSED_ICON_PREFIX.length());
-
-		int pos = icon.indexOf(SUB_ICON_MARKER);
-		if (pos < 0) {
-			StyledIcon baseIcon = StyledIcon.parseIcon(icon);
-			return new StyledCompositeIcon(baseIcon);
-		}
-		String baseIconId = icon.substring(0, pos);
-		StyledIcon baseIcon = StyledIcon.parseIcon(baseIconId);
-		StyledCompositeIcon composedIcon = new StyledCompositeIcon(baseIcon);
-		while (pos >= 0) {
-			int index = Integer.parseInt(icon.substring(pos + SUB_ICON_MARKER.length(), pos + SUB_ICON_MARKER.length() + 1));
-			int subIconStartPos = pos + SUB_ICON_MARKER.length() + 2;
-			pos = icon.indexOf(SUB_ICON_MARKER, subIconStartPos);
-			String subIcon = null;
-			if (pos < 0) {
-				subIcon = icon.substring(subIconStartPos);
-			} else {
-				subIcon = icon.substring(subIconStartPos, pos);
-			}
-			composedIcon.setSubIconByIndex(subIcon, index);
-		}
-		return composedIcon;
-	}
-
-	private void setSubIconByIndex(String subIconId, int index) {
-		StyledIcon subIcon = StyledIcon.parseIcon(subIconId);
-		switch (index) {
-			case 1:
-				bottomRightIcon = subIcon;
-				break;
-			case 2:
-				bottomLeftIcon = subIcon;
-				break;
-			case 3:
-				topLeftIcon = subIcon;
-				break;
-			case 4:
-				topRightIcon = subIcon;
-				break;
-		}
-	}
-
-	public StyledCompositeIcon(StyledIcon baseIcon) {
-		this.baseIcon = baseIcon;
-	}
-
-	public StyledCompositeIcon(StyledIcon baseIcon, StyledIcon bottomRightIcon, StyledIcon bottomLeftIcon, StyledIcon topLeftIcon, StyledIcon topRightIcon) {
-		this.baseIcon = baseIcon;
-		this.bottomRightIcon = bottomRightIcon;
-		this.bottomLeftIcon = bottomLeftIcon;
-		this.topLeftIcon = topLeftIcon;
-		this.topRightIcon = topRightIcon;
-	}
-
-	public StyledIcon getBaseIcon() {
-		return baseIcon;
-	}
-
-	public StyledIcon getBottomLeftIcon() {
-		return bottomLeftIcon;
-	}
-
-	public StyledIcon getBottomRightIcon() {
-		return bottomRightIcon;
-	}
-
-	public StyledIcon getTopLeftIcon() {
-		return topLeftIcon;
-	}
-
-	public StyledIcon getTopRightIcon() {
-		return topRightIcon;
-	}
-
-	@Override
-	public String getQualifiedIconId(IconTheme theme, boolean baseStyle) {
-		StringBuilder sb = new StringBuilder();
-		sb.append(COMPOSED_ICON_PREFIX);
-		sb.append(baseIcon.getQualifiedIconId());
-		if (bottomRightIcon != null) {
-			sb.append(BOTTOM_RIGHT_SUB_ICON);
-			sb.append(bottomRightIcon.getQualifiedIconId());
-		}
-		if (bottomLeftIcon != null) {
-			sb.append(BOTTOM_LEFT_SUB_ICON);
-			sb.append(bottomLeftIcon.getQualifiedIconId());
-		}
-		if (topLeftIcon != null) {
-			sb.append(TOP_LEFT_SUB_ICON);
-			sb.append(topLeftIcon.getQualifiedIconId());
-		}
-		if (topRightIcon != null) {
-			sb.append(TOP_RIGHT_SUB_ICON);
-			sb.append(topRightIcon.getQualifiedIconId());
-		}
-		return sb.toString();
-	}
-
-	@Override
-	public String toString() {
-		return "StyledComposedIcon{" +
-				"baseIcon=" + baseIcon +
-				", bottomLeftIcon=" + bottomLeftIcon +
-				", bottomRightIcon=" + bottomRightIcon +
-				", topLeftIcon=" + topLeftIcon +
-				", topRightIcon=" + topRightIcon +
-				'}';
-	}
-
-
-}
diff --git a/teamapps-icon/src/main/java/org/teamapps/icons/api/StyledIcon.java b/teamapps-icon/src/main/java/org/teamapps/icons/api/StyledIcon.java
deleted file mode 100644
index 26a4e6e7d..000000000
--- a/teamapps-icon/src/main/java/org/teamapps/icons/api/StyledIcon.java
+++ /dev/null
@@ -1,76 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.icons.api;
-
-public class StyledIcon implements SimpleIcon {
-
-	private String iconLibraryId;
-	private String styleId;
-	private String iconName;
-
-	public static StyledIcon parseIcon(String styledIconId) {
-		String[] parts = styledIconId.split(SEPARATOR_PATTERN);
-		String iconLibraryId = parts[0];
-		String styleId = parts[1];
-		int pos = iconLibraryId.length() + SEPARATOR.length() + styleId.length() + SEPARATOR.length();
-		String iconName = styledIconId.substring(pos);
-		return new StyledIcon(iconLibraryId, styleId, iconName);
-	}
-
-	public StyledIcon(String iconLibraryId, String styleId, String iconName) {
-		this.iconLibraryId = iconLibraryId;
-		this.styleId = styleId;
-		this.iconName = iconName;
-	}
-
-	@Override
-	public String getIconName() {
-		return iconName;
-	}
-
-	@Override
-	public String getIconLibraryId() {
-		return iconLibraryId;
-	}
-
-	public String getStyleId() {
-		return styleId;
-	}
-
-	public String getQualifiedIconId(IconTheme theme, boolean baseStyle) {
-		return getQualifiedIconId();
-	}
-
-	public String getQualifiedIconId() {
-		return getIconLibraryId() + SEPARATOR +
-				styleId + SEPARATOR +
-				getIconName();
-	}
-
-	@Override
-	public String toString() {
-		return "StyledIcon{" +
-				"iconLibraryId='" + iconLibraryId + '\'' +
-				", styleId='" + styleId + '\'' +
-				", iconName='" + iconName + '\'' +
-				'}';
-	}
-
-}
diff --git a/teamapps-icon/src/main/java/org/teamapps/icons/cache/FileIconCache.java b/teamapps-icon/src/main/java/org/teamapps/icons/cache/FileIconCache.java
new file mode 100644
index 000000000..c75a2ec97
--- /dev/null
+++ b/teamapps-icon/src/main/java/org/teamapps/icons/cache/FileIconCache.java
@@ -0,0 +1,133 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.icons.cache;
+
+import org.apache.commons.io.IOUtils;
+import org.teamapps.icons.IconResource;
+import org.teamapps.icons.IconType;
+
+import java.io.File;
+import java.io.FileInputStream;
+import java.io.FileOutputStream;
+import java.io.IOException;
+import java.nio.charset.StandardCharsets;
+import java.util.Map;
+import java.util.Objects;
+import java.util.UUID;
+import java.util.concurrent.ConcurrentHashMap;
+
+public class FileIconCache implements IconCache {
+
+	private final File cacheDirectory;
+	private final Map<EncodedIconStringAndSize, File> cachedFilesByEncodedIconString = new ConcurrentHashMap<>();
+
+	public FileIconCache() {
+		try {
+			cacheDirectory = File.createTempFile("icon-cache", "temp").getParentFile();
+		} catch (IOException e) {
+			throw new RuntimeException(e);
+		}
+	}
+
+	public FileIconCache(File cacheDirectory) {
+		this.cacheDirectory = cacheDirectory;
+	}
+
+	@Override
+	public IconResource getIcon(String encodedIconString, int size) {
+		File file = cachedFilesByEncodedIconString.get(new EncodedIconStringAndSize(encodedIconString, size));
+		return file != null ? readFromFile(file) : null;
+	}
+
+	@Override
+	public void putIcon(String encodedIconString, int size, IconResource iconResource) {
+		if (iconResource == null || iconResource.getBytes().length == 0) {
+			return;
+		}
+		File file = new File(cacheDirectory, UUID.randomUUID().toString());
+		writeToFile(iconResource, file);
+		cachedFilesByEncodedIconString.put(new EncodedIconStringAndSize(encodedIconString, size), file);
+	}
+
+	private static IconResource readFromFile(File file) {
+		if (file.exists()) {
+			try {
+				FileInputStream inputStream = new FileInputStream(file);
+				int typeLength = inputStream.read();
+				String typeString = new String(inputStream.readNBytes(typeLength), StandardCharsets.US_ASCII);
+				IconType iconType = IconType.valueOf(typeString);
+				byte[] iconBytes = IOUtils.toByteArray(inputStream);
+				return new IconResource(iconBytes, iconType);
+			} catch (IOException e) {
+				e.printStackTrace();
+			}
+		}
+		return null;
+	}
+
+	private boolean writeToFile(IconResource iconResource, File file) {
+		try {
+			FileOutputStream fos = new FileOutputStream(file);
+			fos.write(iconResource.getIconType().name().length());
+			fos.write(iconResource.getIconType().name().getBytes(StandardCharsets.US_ASCII));
+			fos.write(iconResource.getBytes());
+			return true;
+		} catch (IOException e) {
+			e.printStackTrace();
+		}
+		return false;
+	}
+
+	private static String bytesToHex(byte[] hash) {
+		StringBuilder hexString = new StringBuilder(2 * hash.length);
+		for (int i = 0; i < hash.length; i++) {
+			String hex = Integer.toHexString(0xff & hash[i]);
+			if (hex.length() == 1) {
+				hexString.append('0');
+			}
+			hexString.append(hex);
+		}
+		return hexString.toString();
+	}
+
+	private static class EncodedIconStringAndSize {
+		String encodedIconString;
+		int size;
+
+		public EncodedIconStringAndSize(String encodedIconString, int size) {
+			this.encodedIconString = encodedIconString;
+			this.size = size;
+		}
+
+		@Override
+		public boolean equals(Object o) {
+			if (this == o) return true;
+			if (o == null || getClass() != o.getClass()) return false;
+			EncodedIconStringAndSize that = (EncodedIconStringAndSize) o;
+			return size == that.size &&
+					Objects.equals(encodedIconString, that.encodedIconString);
+		}
+
+		@Override
+		public int hashCode() {
+			return Objects.hash(encodedIconString, size);
+		}
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/application/ApplicationInfo.java b/teamapps-icon/src/main/java/org/teamapps/icons/cache/IconCache.java
similarity index 72%
rename from teamapps-ux/src/main/java/org/teamapps/ux/application/ApplicationInfo.java
rename to teamapps-icon/src/main/java/org/teamapps/icons/cache/IconCache.java
index 2e77b1a8b..4270c46fb 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/application/ApplicationInfo.java
+++ b/teamapps-icon/src/main/java/org/teamapps/icons/cache/IconCache.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,20 +17,14 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-package org.teamapps.ux.application;
+package org.teamapps.icons.cache;
 
-import org.teamapps.icons.api.Icon;
+import org.teamapps.icons.IconResource;
 
-public interface ApplicationInfo {
+public interface IconCache {
 
-	ApplicationGroup getApplicationGroup();
-
-	String getName();
-
-	Icon getIcon();
-
-	String getTitle();
-
-	String getDescription();
+	IconResource getIcon(String encodedIconString, int size);
 
+	void putIcon(String encodedIconString, int size, IconResource iconResource);
+	
 }
diff --git a/teamapps-icon/src/main/java/org/teamapps/icons/cache/NoOpIconCache.java b/teamapps-icon/src/main/java/org/teamapps/icons/cache/NoOpIconCache.java
new file mode 100644
index 000000000..21be74dce
--- /dev/null
+++ b/teamapps-icon/src/main/java/org/teamapps/icons/cache/NoOpIconCache.java
@@ -0,0 +1,36 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.icons.cache;
+
+import org.teamapps.icons.IconResource;
+
+public class NoOpIconCache implements IconCache {
+
+	@Override
+	public IconResource getIcon(String encodedIconString, int size) {
+		return null;
+	}
+
+	@Override
+	public void putIcon(String encodedIconString, int size, IconResource iconResource) {
+		// do not cache
+	}
+	
+}
diff --git a/teamapps-icon/src/main/java/org/teamapps/icons/composite/CompositeIcon.java b/teamapps-icon/src/main/java/org/teamapps/icons/composite/CompositeIcon.java
new file mode 100644
index 000000000..7d9440166
--- /dev/null
+++ b/teamapps-icon/src/main/java/org/teamapps/icons/composite/CompositeIcon.java
@@ -0,0 +1,85 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.icons.composite;
+
+import org.teamapps.icons.Icon;
+import org.teamapps.icons.spi.IconLibrary;
+
+@IconLibrary(
+		name = "composite",
+		encoder = CompositeIconEncoder.class,
+		decoder = CompositeIconDecoder.class,
+		loader = CompositeIconLoader.class,
+		defaultStyleSupplier = CompositeIconDefaultStyleSupplier.class
+)
+public class CompositeIcon implements Icon<CompositeIcon, Void> {
+
+	private final Icon baseIcon;
+	private	final Icon bottomRightIcon;
+	private	final Icon bottomLeftIcon;
+	private	final Icon topLeftIcon;
+	private	final Icon topRightIcon;
+
+	public static CompositeIcon of(Icon baseIcon, Icon bottomRightIcon) {
+		return new CompositeIcon(baseIcon, bottomRightIcon, null, null, null);
+	}
+
+	public static CompositeIcon of(Icon baseIcon, Icon bottomRightIcon, Icon bottomLeftIcon, Icon topLeftIcon, Icon topRightIcon) {
+		return new CompositeIcon(baseIcon, bottomRightIcon, bottomLeftIcon, topLeftIcon, topRightIcon);
+	}
+
+	private CompositeIcon(Icon baseIcon, Icon bottomRightIcon, Icon bottomLeftIcon, Icon topLeftIcon, Icon topRightIcon) {
+		this.baseIcon = baseIcon;
+		this.bottomRightIcon = bottomRightIcon;
+		this.bottomLeftIcon = bottomLeftIcon;
+		this.topLeftIcon = topLeftIcon;
+		this.topRightIcon = topRightIcon;
+	}
+
+	public Icon getBaseIcon() {
+		return baseIcon;
+	}
+
+	public Icon getBottomRightIcon() {
+		return bottomRightIcon;
+	}
+
+	public Icon getBottomLeftIcon() {
+		return bottomLeftIcon;
+	}
+
+	public Icon getTopLeftIcon() {
+		return topLeftIcon;
+	}
+
+	public Icon getTopRightIcon() {
+		return topRightIcon;
+	}
+
+	@Override
+	public CompositeIcon withStyle(Void unused) {
+		return this;
+	}
+
+	@Override
+	public Void getStyle() {
+		return null;
+	}
+}
diff --git a/teamapps-icon/src/main/java/org/teamapps/icons/composite/CompositeIconDecoder.java b/teamapps-icon/src/main/java/org/teamapps/icons/composite/CompositeIconDecoder.java
new file mode 100644
index 000000000..68f4886e0
--- /dev/null
+++ b/teamapps-icon/src/main/java/org/teamapps/icons/composite/CompositeIconDecoder.java
@@ -0,0 +1,60 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.icons.composite;
+
+import org.teamapps.icons.Icon;
+import org.teamapps.icons.IconDecoderContext;
+import org.teamapps.icons.spi.IconDecoder;
+
+import java.util.HashMap;
+import java.util.Map;
+
+import static org.teamapps.icons.util.IconEncodeDecodeUtil.findClosingParenthesisPosition;
+
+public class CompositeIconDecoder implements IconDecoder<CompositeIcon> {
+
+	@Override
+	public CompositeIcon decodeIcon(String encodedIconString, IconDecoderContext context) {
+		Map<Integer, String> subIconDescriptionsByPositionIndex = extractSubIconDescriptions(encodedIconString);
+
+		Icon<?, ?> baseIcon = context.decodeIcon(subIconDescriptionsByPositionIndex.get(0));
+		Icon<?, ?> bottomRight = subIconDescriptionsByPositionIndex.containsKey(1) ? context.decodeIcon(subIconDescriptionsByPositionIndex.get(1)) : null;
+		Icon<?, ?> bottomLeft = subIconDescriptionsByPositionIndex.containsKey(2) ? context.decodeIcon(subIconDescriptionsByPositionIndex.get(2)) : null;
+		Icon<?, ?> topLeft = subIconDescriptionsByPositionIndex.containsKey(3) ? context.decodeIcon(subIconDescriptionsByPositionIndex.get(3)) : null;
+		Icon<?, ?> topRight = subIconDescriptionsByPositionIndex.containsKey(4) ? context.decodeIcon(subIconDescriptionsByPositionIndex.get(4)) : null;
+		
+		return CompositeIcon.of(baseIcon, bottomRight, bottomLeft, topLeft, topRight);
+	}
+
+	private Map<Integer, String> extractSubIconDescriptions(String encodedIconString) {
+		Map<Integer, String> subIconDescriptions = new HashMap<>();
+		int pos = 0;
+		while (pos < encodedIconString.length()) {
+			int iconPositionIndex = encodedIconString.charAt(pos) - 48;
+			pos += 2;
+			int endPos = findClosingParenthesisPosition(encodedIconString, pos);
+			String encodedSubIconString = encodedIconString.substring(pos, endPos);
+			pos = endPos + 1;
+			subIconDescriptions.put(iconPositionIndex, encodedSubIconString);
+		}
+		return subIconDescriptions;
+	}
+
+}
diff --git a/teamapps-icon/src/main/java/org/teamapps/icons/composite/CompositeIconDefaultStyleSupplier.java b/teamapps-icon/src/main/java/org/teamapps/icons/composite/CompositeIconDefaultStyleSupplier.java
new file mode 100644
index 000000000..d912b9a2c
--- /dev/null
+++ b/teamapps-icon/src/main/java/org/teamapps/icons/composite/CompositeIconDefaultStyleSupplier.java
@@ -0,0 +1,29 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.icons.composite;
+
+import org.teamapps.icons.spi.DefaultStyleSupplier;
+
+public class CompositeIconDefaultStyleSupplier implements DefaultStyleSupplier<Void> {
+	@Override
+	public Void getDefaultStyle() {
+		return null;
+	}
+}
diff --git a/teamapps-icon/src/main/java/org/teamapps/icons/composite/CompositeIconEncoder.java b/teamapps-icon/src/main/java/org/teamapps/icons/composite/CompositeIconEncoder.java
new file mode 100644
index 000000000..985141bc3
--- /dev/null
+++ b/teamapps-icon/src/main/java/org/teamapps/icons/composite/CompositeIconEncoder.java
@@ -0,0 +1,55 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.icons.composite;
+
+import org.teamapps.icons.spi.IconEncoder;
+import org.teamapps.icons.IconEncoderContext;
+
+public class CompositeIconEncoder implements IconEncoder<CompositeIcon> {
+
+	@Override
+	public String encodeIcon(CompositeIcon icon, IconEncoderContext context) {
+		StringBuilder sb = new StringBuilder()
+				.append("0(")
+				.append(context.encodeIcon(icon.getBaseIcon()))
+				.append(")");
+		if (icon.getBottomRightIcon() != null) {
+			sb.append("1(");
+			sb.append(context.encodeIcon(icon.getBottomRightIcon()));
+			sb.append(")");
+		}
+		if (icon.getBottomLeftIcon() != null) {
+			sb.append("2(");
+			sb.append(context.encodeIcon(icon.getBottomLeftIcon()));
+			sb.append(")");
+		}
+		if (icon.getTopLeftIcon() != null) {
+			sb.append("3(");
+			sb.append(context.encodeIcon(icon.getTopLeftIcon()));
+			sb.append(")");
+		}
+		if (icon.getTopRightIcon() != null) {
+			sb.append("4(");
+			sb.append(context.encodeIcon(icon.getTopRightIcon()));
+			sb.append(")");
+		}
+		return sb.toString();
+	}
+}
diff --git a/teamapps-icon/src/main/java/org/teamapps/icons/composite/CompositeIconLoader.java b/teamapps-icon/src/main/java/org/teamapps/icons/composite/CompositeIconLoader.java
new file mode 100644
index 000000000..57cebf639
--- /dev/null
+++ b/teamapps-icon/src/main/java/org/teamapps/icons/composite/CompositeIconLoader.java
@@ -0,0 +1,84 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.icons.composite;
+
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+import org.teamapps.icons.IconLoaderContext;
+import org.teamapps.icons.IconResource;
+import org.teamapps.icons.IconType;
+import org.teamapps.icons.spi.IconLoader;
+
+import java.lang.invoke.MethodHandles;
+import java.util.Objects;
+import java.util.stream.Stream;
+
+public class CompositeIconLoader implements IconLoader<CompositeIcon> {
+
+	private static final Logger LOGGER = LoggerFactory.getLogger(MethodHandles.lookup().lookupClass());
+
+	private final PngIconComposer pngIconComposer = new PngIconComposer();
+	private final SvgIconComposer svgIconComposer = new SvgIconComposer();
+
+	@Override
+	public IconResource loadIcon(CompositeIcon icon, int size, IconLoaderContext context) {
+		IconResource baseIconResource = context.loadIcon(icon.getBaseIcon(), size);
+		if (baseIconResource == null) {
+			return null;
+		}
+
+		IconResource bottomRightResource = icon.getBottomRightIcon() != null? context.loadIcon(icon.getBottomRightIcon(), size / 2) : null;
+		IconResource bottomLeftResource = icon.getBottomLeftIcon() != null? context.loadIcon(icon.getBottomLeftIcon(), size / 2) : null;
+		IconResource topLeftResource = icon.getTopLeftIcon() != null? context.loadIcon(icon.getTopLeftIcon(), size / 2) : null;
+		IconResource topRightResource = icon.getTopRightIcon() != null? context.loadIcon(icon.getTopRightIcon(), size / 2) : null;
+
+		boolean iconsCompatible = Stream.of(bottomRightResource, bottomLeftResource, topLeftResource, topRightResource)
+				.filter(Objects::nonNull)
+				.allMatch(iconResource -> iconResource.getIconType().equals(baseIconResource.getIconType()));
+
+		if (!iconsCompatible) {
+			LOGGER.error("Sub-icons do not have the same type as base icon: " + baseIconResource.getIconType());
+			return baseIconResource;
+		}
+
+		if (baseIconResource.getIconType() == IconType.SVG) {
+			byte[] composedIconBytes = svgIconComposer.compose(
+					baseIconResource.getBytes(),
+					bottomRightResource != null ? bottomRightResource.getBytes() : null,
+					bottomLeftResource != null ? bottomLeftResource.getBytes() : null,
+					topLeftResource != null ? topLeftResource.getBytes() : null,
+					topRightResource != null ? topRightResource.getBytes() : null
+			);
+			return new IconResource(composedIconBytes, IconType.SVG);
+		} else if (baseIconResource.getIconType() == IconType.PNG) {
+			byte[] composedIconBytes = pngIconComposer.compose(
+					size,
+					baseIconResource.getBytes(),
+					bottomRightResource != null ? bottomRightResource.getBytes() : null,
+					bottomLeftResource != null ? bottomLeftResource.getBytes() : null,
+					topLeftResource != null ? topLeftResource.getBytes() : null,
+					topRightResource != null ? topRightResource.getBytes() : null
+			);
+			return new IconResource(composedIconBytes, IconType.PNG);
+		} else {
+			return baseIconResource;
+		}
+	}
+}
diff --git a/teamapps-icon/src/main/java/org/teamapps/icons/systemprovider/CompositeIconProvider.java b/teamapps-icon/src/main/java/org/teamapps/icons/composite/PngIconComposer.java
similarity index 76%
rename from teamapps-icon/src/main/java/org/teamapps/icons/systemprovider/CompositeIconProvider.java
rename to teamapps-icon/src/main/java/org/teamapps/icons/composite/PngIconComposer.java
index 1e48d582d..3875a3e34 100644
--- a/teamapps-icon/src/main/java/org/teamapps/icons/systemprovider/CompositeIconProvider.java
+++ b/teamapps-icon/src/main/java/org/teamapps/icons/composite/PngIconComposer.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,35 +17,36 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-package org.teamapps.icons.systemprovider;
+package org.teamapps.icons.composite;
 
 import net.coobird.thumbnailator.Thumbnails;
 import net.coobird.thumbnailator.geometry.Positions;
 
 import javax.imageio.ImageIO;
 import java.awt.image.BufferedImage;
+import java.io.ByteArrayInputStream;
 import java.io.ByteArrayOutputStream;
 import java.io.IOException;
 
-public class CompositeIconProvider {
+public class PngIconComposer {
 
-	public byte[] createComposedIcon(int size, byte[] baseIcon, byte[] bottomRight, byte[] bottomLeft, byte[] topLeft, byte[] topRight) {
+	public byte[] compose(int size, byte[] baseIcon, byte[] bottomRight, byte[] bottomLeft, byte[] topLeft, byte[] topRight) {
 		try {
-			BufferedImage image = ImageIO.read(IconUtils.getInputStream(baseIcon));
+			BufferedImage image = ImageIO.read(new ByteArrayInputStream(baseIcon));
 			if (bottomRight != null) {
-				BufferedImage subIcon = ImageIO.read(IconUtils.getInputStream(bottomRight));
+				BufferedImage subIcon = ImageIO.read(new ByteArrayInputStream(bottomRight));
 				image = Thumbnails.of(image).size(size, size).watermark(Positions.BOTTOM_RIGHT, subIcon, 1.0f).asBufferedImage();
 			}
 			if (bottomLeft != null) {
-				BufferedImage subIcon = ImageIO.read(IconUtils.getInputStream(bottomLeft));
+				BufferedImage subIcon = ImageIO.read(new ByteArrayInputStream(bottomLeft));
 				image = Thumbnails.of(image).size(size, size).watermark(Positions.BOTTOM_LEFT, subIcon, 1.0f).asBufferedImage();
 			}
 			if (topLeft != null) {
-				BufferedImage subIcon = ImageIO.read(IconUtils.getInputStream(topLeft));
+				BufferedImage subIcon = ImageIO.read(new ByteArrayInputStream(topLeft));
 				image = Thumbnails.of(image).size(size, size).watermark(Positions.TOP_LEFT, subIcon, 1.0f).asBufferedImage();
 			}
 			if (topRight != null) {
-				BufferedImage subIcon = ImageIO.read(IconUtils.getInputStream(topRight));
+				BufferedImage subIcon = ImageIO.read(new ByteArrayInputStream(topRight));
 				image = Thumbnails.of(image).size(size, size).watermark(Positions.TOP_RIGHT, subIcon, 1.0f).asBufferedImage();
 			}
 			ByteArrayOutputStream bos = new ByteArrayOutputStream();
diff --git a/teamapps-icon/src/main/java/org/teamapps/icons/systemprovider/CompositeSvgProvider.java b/teamapps-icon/src/main/java/org/teamapps/icons/composite/SvgIconComposer.java
similarity index 88%
rename from teamapps-icon/src/main/java/org/teamapps/icons/systemprovider/CompositeSvgProvider.java
rename to teamapps-icon/src/main/java/org/teamapps/icons/composite/SvgIconComposer.java
index 9fe8c922c..3a929bd0c 100644
--- a/teamapps-icon/src/main/java/org/teamapps/icons/systemprovider/CompositeSvgProvider.java
+++ b/teamapps-icon/src/main/java/org/teamapps/icons/composite/SvgIconComposer.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,13 +17,13 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-package org.teamapps.icons.systemprovider;
+package org.teamapps.icons.composite;
 
 import java.nio.charset.StandardCharsets;
 
-public class CompositeSvgProvider {
+public class SvgIconComposer {
 
-	public byte[] createComposedIcon(int size, byte[] baseIcon, byte[] bottomRight, byte[] bottomLeft, byte[] topLeft, byte[] topRight) {
+	public byte[] compose(byte[] baseIcon, byte[] bottomRight, byte[] bottomLeft, byte[] topLeft, byte[] topRight) {
 		String svg = createSvg(baseIcon);
 		svg = svg.substring(0, svg.lastIndexOf("</svg>"));
 
diff --git a/teamapps-ux/src/main/java/org/teamapps/data/value/MutableDataRecord.java b/teamapps-icon/src/main/java/org/teamapps/icons/spi/DefaultStyleSupplier.java
similarity index 70%
rename from teamapps-ux/src/main/java/org/teamapps/data/value/MutableDataRecord.java
rename to teamapps-icon/src/main/java/org/teamapps/icons/spi/DefaultStyleSupplier.java
index 4d001fa87..6527bf8fc 100644
--- a/teamapps-ux/src/main/java/org/teamapps/data/value/MutableDataRecord.java
+++ b/teamapps-icon/src/main/java/org/teamapps/icons/spi/DefaultStyleSupplier.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,17 +17,18 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-package org.teamapps.data.value;
-
-import com.fasterxml.jackson.annotation.JsonAnySetter;
+package org.teamapps.icons.spi;
 
 /**
- * @deprecated will get removed soon
+ * Provides the default style for an icon library.
+ * <p>
+ * Implementations MUST provide a default constructor!
+ *
+ * @param <STYLE> The style class
+ * @see IconLibrary
  */
-@Deprecated
-public interface MutableDataRecord extends DataRecord {
+public interface DefaultStyleSupplier<STYLE> {
 
-	@JsonAnySetter
-	MutableDataRecord setValue(String key, Object value);
+	STYLE getDefaultStyle();
 
 }
diff --git a/teamapps-icon/src/main/java/org/teamapps/icons/spi/IconDecoder.java b/teamapps-icon/src/main/java/org/teamapps/icons/spi/IconDecoder.java
new file mode 100644
index 000000000..7a545e02b
--- /dev/null
+++ b/teamapps-icon/src/main/java/org/teamapps/icons/spi/IconDecoder.java
@@ -0,0 +1,48 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.icons.spi;
+
+import org.teamapps.icons.Icon;
+import org.teamapps.icons.IconDecoderContext;
+
+/**
+ * Decodes icons from an encoded icon {@link String}s such as they are produced by the {@link IconEncoder}.
+ * <p>
+ * Implementations MUST provide a default constructor!
+ *
+ * @param <ICON>  The icon class this provider will return.
+ */
+public interface IconDecoder<ICON extends Icon<ICON, ?>> {
+
+	/**
+	 * Decodes an icon from an encoded icon {@link String}.
+	 * <p>
+	 * Implementations MUST return an icon, even if the requested size is not available.
+	 * In this case, a larger or smaller icon should be returned.
+	 * The resizing will be done elsewhere.
+	 * <p>
+	 * Implementations MUST support unstyled icons.
+	 *
+	 * @param encodedIconString The encoded icon String as produced by the corresponding {@link IconEncoder}.
+	 * @return The icon.
+	 */
+	ICON decodeIcon(String encodedIconString, IconDecoderContext context);
+
+}
diff --git a/teamapps-icon/src/main/java/org/teamapps/icons/spi/IconEncoder.java b/teamapps-icon/src/main/java/org/teamapps/icons/spi/IconEncoder.java
new file mode 100644
index 000000000..8fc08fe03
--- /dev/null
+++ b/teamapps-icon/src/main/java/org/teamapps/icons/spi/IconEncoder.java
@@ -0,0 +1,56 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.icons.spi;
+
+import org.teamapps.icons.Icon;
+import org.teamapps.icons.IconEncoderContext;
+
+/**
+ * Responsible for creating {@link String} representations for icons. These strings will get parsed by the corresponding
+ * {@link IconDecoder}.
+ * <p>
+ * A String representation may be an arbitrary String, as long as it is an allowed String for URL path segments.
+ * It should be safe to use <code>a-z A-Z 0-9 . - _ ~ ! $ ' ( ) * + , ; = : @</code>.
+ * If the String contains parenthesis ("(" or ")"), it must make sure to close any opening one of them.
+ * <p>
+ * Implementations MUST be able to encode unstyled icons, i.e. icons that have no style set (null).
+ * <p>
+ * Implementations MUST provide a default constructor!
+ *
+ * @param <ICON>  The icon class this encoder can handle.
+ */
+public interface IconEncoder<ICON extends Icon<ICON, ?>> {
+
+	/**
+	 * Creates a string representation of the provided icon.
+	 * <p>
+	 * The string representation may be an arbitrary string, as long as it is an allowed string for URL path segments.
+	 * It should be safe to use <code>a-z A-Z 0-9 . - _ ~ ! $ ' ( ) * + , ; = : @</code>.
+	 * If the String contains parenthesis ("(" or ")"), it must make sure to close any opening one of them.
+	 * <p>
+	 * Note that this method MUST support encoding unstyled icons, i.e. icons that have no style set (null).
+	 *
+	 * @param icon    The icon to encode.
+	 * @param context
+	 * @return The encoded icon
+	 */
+	String encodeIcon(ICON icon, IconEncoderContext context);
+
+}
diff --git a/teamapps-icon/src/main/java/org/teamapps/icons/spi/IconLibrary.java b/teamapps-icon/src/main/java/org/teamapps/icons/spi/IconLibrary.java
new file mode 100644
index 000000000..09a0da1f8
--- /dev/null
+++ b/teamapps-icon/src/main/java/org/teamapps/icons/spi/IconLibrary.java
@@ -0,0 +1,58 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.icons.spi;
+
+import java.lang.annotation.Retention;
+import java.lang.annotation.RetentionPolicy;
+
+/**
+ * Defines an IconLibrary. Icon classes SHOULD be annotated with this annotation.
+ * <p>
+ * All of the classes specified in this annotation MUST provide a default constructor!
+ */
+@Retention(RetentionPolicy.RUNTIME)
+public @interface IconLibrary {
+
+	/**
+	 * @return The name of this icon library. Should consist only of characters, digits and underscores. No "." allowed!
+	 */
+	String name();
+
+	/**
+	 * @return The {@link IconEncoder} class that handles these icons.
+	 */
+	Class<? extends IconEncoder> encoder();
+
+	/**
+	 * @return The {@link IconDecoder} class that handles these icons.
+	 */
+	Class<? extends IconDecoder> decoder();
+
+	/**
+	 * @return The {@link IconLoader} class that handles these icons.
+	 */
+	Class<? extends IconLoader> loader();
+
+	/**
+	 * @return A supplier class supplying the default style for this icon library.
+	 */
+	Class<? extends DefaultStyleSupplier> defaultStyleSupplier();
+
+}
diff --git a/teamapps-icon/src/main/java/org/teamapps/icons/spi/IconLoader.java b/teamapps-icon/src/main/java/org/teamapps/icons/spi/IconLoader.java
new file mode 100644
index 000000000..55057bc30
--- /dev/null
+++ b/teamapps-icon/src/main/java/org/teamapps/icons/spi/IconLoader.java
@@ -0,0 +1,45 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.icons.spi;
+
+import org.teamapps.icons.Icon;
+import org.teamapps.icons.IconLoaderContext;
+import org.teamapps.icons.IconResource;
+
+/**
+ * Loads icons, providing them in binary form.
+ *
+ * @param <ICON>  The icon class this encoder can handle.
+ */
+public interface IconLoader<ICON extends Icon<ICON, ?>> {
+
+	/**
+	 * Loads an icon.
+	 * <p>
+	 * The specified icon MUST have a style set (unless the STYLE type is {@link Void}). Callers need to ensure this!
+	 * <p>
+	 * Implementations MAY therefore assume the icon's to be styled.
+	 *
+	 * @param size The size of the requested icon.
+	 * @return The icon in binary form and type and size of the icon (as {@link IconResource}), or null, if the icon could not be loaded.
+	 */
+	IconResource loadIcon(ICON icon, int size, IconLoaderContext context);
+
+}
diff --git a/teamapps-icon/src/main/java/org/teamapps/icons/systemprovider/CachingIconProvider.java b/teamapps-icon/src/main/java/org/teamapps/icons/systemprovider/CachingIconProvider.java
deleted file mode 100644
index 9eefb1014..000000000
--- a/teamapps-icon/src/main/java/org/teamapps/icons/systemprovider/CachingIconProvider.java
+++ /dev/null
@@ -1,94 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.icons.systemprovider;
-
-import org.apache.commons.io.IOUtils;
-
-import java.io.*;
-
-public class CachingIconProvider {
-
-	private File cacheDirectory;
-
-	public CachingIconProvider()  {
-		try {
-			cacheDirectory = File.createTempFile("icon-cache", "temp").getParentFile();
-		} catch (IOException e) {
-			e.printStackTrace();
-		}
-	}
-
-	public CachingIconProvider(File cacheDirectory) {
-		this.cacheDirectory = cacheDirectory;
-	}
-
-	public byte[] getCachedIcon(int size, String iconId) {
-		File icon = createFilePath(size, iconId);
-		return getCachedFile(icon);
-	}
-
-	public byte[] getCachedIcon(String libraryId, String styleId, int size, String iconName) {
-		File icon = createFilePath(libraryId, styleId, size, iconName);
-		return getCachedFile(icon);
-	}
-
-	private byte[] getCachedFile(File file) {
-		if (file.exists()) {
-			try {
-				return IOUtils.toByteArray(new FileInputStream(file));
-			} catch (IOException e) {
-				e.printStackTrace();
-			}
-		}
-		return null;
-	}
-
-	public boolean puIconInCache(int size, String iconId, byte[] bytes) {
-		if (bytes == null || bytes.length == 0) {
-			return false;
-		}
-		File icon = createFilePath(size, iconId);
-		return writeCacheFile(icon, bytes);
-	}
-
-	public boolean putIconInCache(String libraryId, String styleId, int size, String iconName, byte[] bytes) {
-		File icon = createFilePath(libraryId, styleId, size, iconName);
-		return writeCacheFile(icon, bytes);
-	}
-
-	private boolean writeCacheFile(File file, byte[] bytes) {
-		try {
-			FileOutputStream fos = new FileOutputStream(file);
-			fos.write(bytes);
-			return true;
-		} catch (IOException e) {
-			e.printStackTrace();
-		}
-		return false;
-	}
-
-	private File createFilePath(String libraryId, String styleId, int size, String iconName) {
-		return new File(cacheDirectory, libraryId + "." + styleId + "." + size + "." + iconName + ".png");
-	}
-
-	private File createFilePath(int size, String iconId) {
-		return new File(cacheDirectory, size + "." + iconId + ".png");
-	}
-}
diff --git a/teamapps-icon/src/main/java/org/teamapps/icons/systemprovider/StylingIconProvider.java b/teamapps-icon/src/main/java/org/teamapps/icons/systemprovider/StylingIconProvider.java
deleted file mode 100644
index 8d2cc4146..000000000
--- a/teamapps-icon/src/main/java/org/teamapps/icons/systemprovider/StylingIconProvider.java
+++ /dev/null
@@ -1,471 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.icons.systemprovider;
-
-import org.teamapps.icons.api.CustomIconStyle;
-
-import javax.imageio.ImageIO;
-import java.awt.*;
-import java.awt.image.BufferedImage;
-import java.awt.image.WritableRaster;
-import java.io.ByteArrayInputStream;
-import java.io.ByteArrayOutputStream;
-
-public class StylingIconProvider {
-
-	private static final Color COLOR_1 = new Color(255, 30, 30);
-	private static final Color COLOR_2 = new Color(30, 255, 30);
-	private static final Color COLOR_3 = new Color(30, 30, 255);
-	private static final Color COLOR_4 = new Color(255, 255, 30);
-	private static final Color COLOR_5 = new Color(255, 30, 255);
-
-	private static final Color[] SEARCH_COLORS = new Color[] {COLOR_1, COLOR_2, COLOR_3, COLOR_4, COLOR_5};
-	private static final Color[] SEARCH_COLORS_WITH_BASE = new Color[] {Color.BLACK, Color.WHITE, COLOR_1, COLOR_2, COLOR_3, COLOR_4, COLOR_5};
-
-	public static final Color WHITE = new Color(255, 255, 255, 1);
-	public static final Color BLACK = new Color(0, 0, 0, 1);
-
-	public static final Color GRAY = new Color(128, 128, 128);
-	public static final Color GRAY_STANDARD = new Color(119, 119, 119);
-	public static final Color LIGHT_GRAY = new Color(211, 211, 211);
-	public static final Color SILVER = new Color(192, 192, 192);
-	public static final Color DIM_GRAY = new Color(105, 105, 105);
-	public static final Color RED = new Color(255, 0, 0);
-	public static final Color DARK_RED = new Color(139, 0, 0);
-	public static final Color FIRE_BRICK = new Color(178, 34, 34);
-	public static final Color CRIMSON = new Color(220, 20, 60);
-	public static final Color ORANGE_RED = new Color(255, 69, 0);
-	public static final Color CORAL = new Color(255, 127, 80);
-	public static final Color DARK_ORANGE = new Color(255, 140, 0);
-	public static final Color ORANGE = new Color(255, 165, 0);
-	public static final Color YELLOW = new Color(255, 255, 0);
-	public static final Color LIGHT_YELLOW = new Color(255, 255, 224);
-	public static final Color KHAKI = new Color(240, 230, 140);
-	public static final Color DARK_KHAKI = new Color(189, 183, 107);
-	public static final Color GOLD = new Color(255, 215, 0);
-	public static final Color BLUE = new Color(0, 0, 255);
-	public static final Color DARK_BLUE = new Color(0, 0, 139);
-	public static final Color MIDNIGHT_BLUE = new Color(25, 25, 112);
-	public static final Color LIGHT_BLUE = new Color(173, 216, 230);
-	public static final Color SKY_BLUE = new Color(135, 206, 235);
-	public static final Color DEEP_SKY_BLUE = new Color(0, 191, 255);
-	public static final Color NAVY = new Color(0, 0, 128);
-	public static final Color GREEN = new Color(0, 128, 0);
-	public static final Color DARK_GREEN = new Color(0, 100, 0);
-	public static final Color LIGHT_GREEN = new Color(144, 238, 144);
-	public static final Color LIME_GREEN = new Color(50, 205, 50);
-	public static final Color PURPLE = new Color(128, 0, 128);
-	public static final Color BLUE_VIOLET = new Color(138, 43, 226);
-	public static final Color INDIGO = new Color(75, 0, 130);
-	public static final Color BROWN = new Color(165, 42, 42);
-	public static final Color SADDLE_BROWN = new Color(139, 69, 19);
-	public static final Color CHOCOLATE = new Color(210, 105, 30);
-	public static final Color TEAL = new Color(0, 128, 128);
-
-	public static final Color BOOTSTRAP_PRIMARY = new Color(51, 122, 183);
-	public static final Color BOOTSTRAP_SUCCESS = new Color(92, 184, 92);
-	public static final Color BOOTSTRAP_INFO = new Color(91, 192, 222);
-	public static final Color BOOTSTRAP_WARNING = new Color(240, 173, 78);
-	public static final Color BOOTSTRAP_DANGER = new Color(217, 83, 79);
-
-	public static final Color MATERIAL_RED_50 = new Color(255, 235, 238);
-	public static final Color MATERIAL_RED_100 = new Color(255, 205, 210);
-	public static final Color MATERIAL_RED_200 = new Color(239, 154, 154);
-	public static final Color MATERIAL_RED_300 = new Color(229, 115, 115);
-	public static final Color MATERIAL_RED_400 = new Color(239, 83, 80);
-	public static final Color MATERIAL_RED_500 = new Color(244, 67, 54);
-	public static final Color MATERIAL_RED_600 = new Color(229, 57, 53);
-	public static final Color MATERIAL_RED_700 = new Color(211, 47, 47);
-	public static final Color MATERIAL_RED_800 = new Color(198, 40, 40);
-	public static final Color MATERIAL_RED_900 = new Color(183, 28, 28);
-	public static final Color MATERIAL_RED_A100 = new Color(255, 138, 128);
-	public static final Color MATERIAL_RED_A200 = new Color(255, 82, 82);
-	public static final Color MATERIAL_RED_A400 = new Color(255, 23, 68);
-	public static final Color MATERIAL_RED_A700 = new Color(213, 0, 0);
-	public static final Color MATERIAL_PINK_50 = new Color(252, 228, 236);
-	public static final Color MATERIAL_PINK_100 = new Color(248, 187, 208);
-	public static final Color MATERIAL_PINK_200 = new Color(244, 143, 177);
-	public static final Color MATERIAL_PINK_300 = new Color(240, 98, 146);
-	public static final Color MATERIAL_PINK_400 = new Color(236, 64, 122);
-	public static final Color MATERIAL_PINK_500 = new Color(233, 30, 99);
-	public static final Color MATERIAL_PINK_600 = new Color(216, 27, 96);
-	public static final Color MATERIAL_PINK_700 = new Color(194, 24, 91);
-	public static final Color MATERIAL_PINK_800 = new Color(173, 20, 87);
-	public static final Color MATERIAL_PINK_900 = new Color(136, 14, 79);
-	public static final Color MATERIAL_PINK_A100 = new Color(255, 128, 171);
-	public static final Color MATERIAL_PINK_A200 = new Color(255, 64, 129);
-	public static final Color MATERIAL_PINK_A400 = new Color(245, 0, 87);
-	public static final Color MATERIAL_PINK_A700 = new Color(197, 17, 98);
-	public static final Color MATERIAL_PURPLE_50 = new Color(243, 229, 245);
-	public static final Color MATERIAL_PURPLE_100 = new Color(225, 190, 231);
-	public static final Color MATERIAL_PURPLE_200 = new Color(206, 147, 216);
-	public static final Color MATERIAL_PURPLE_300 = new Color(186, 104, 200);
-	public static final Color MATERIAL_PURPLE_400 = new Color(171, 71, 188);
-	public static final Color MATERIAL_PURPLE_500 = new Color(156, 39, 176);
-	public static final Color MATERIAL_PURPLE_600 = new Color(142, 36, 170);
-	public static final Color MATERIAL_PURPLE_700 = new Color(123, 31, 162);
-	public static final Color MATERIAL_PURPLE_800 = new Color(106, 27, 154);
-	public static final Color MATERIAL_PURPLE_900 = new Color(74, 20, 140);
-	public static final Color MATERIAL_PURPLE_A100 = new Color(234, 128, 252);
-	public static final Color MATERIAL_PURPLE_A200 = new Color(224, 64, 251);
-	public static final Color MATERIAL_PURPLE_A400 = new Color(213, 0, 249);
-	public static final Color MATERIAL_PURPLE_A700 = new Color(170, 0, 255);
-	public static final Color MATERIAL_DEEP_PURPLE_50 = new Color(237, 231, 246);
-	public static final Color MATERIAL_DEEP_PURPLE_100 = new Color(209, 196, 233);
-	public static final Color MATERIAL_DEEP_PURPLE_200 = new Color(179, 157, 219);
-	public static final Color MATERIAL_DEEP_PURPLE_300 = new Color(149, 117, 205);
-	public static final Color MATERIAL_DEEP_PURPLE_400 = new Color(126, 87, 194);
-	public static final Color MATERIAL_DEEP_PURPLE_500 = new Color(103, 58, 183);
-	public static final Color MATERIAL_DEEP_PURPLE_600 = new Color(94, 53, 177);
-	public static final Color MATERIAL_DEEP_PURPLE_700 = new Color(81, 45, 168);
-	public static final Color MATERIAL_DEEP_PURPLE_800 = new Color(69, 39, 160);
-	public static final Color MATERIAL_DEEP_PURPLE_900 = new Color(49, 27, 146);
-	public static final Color MATERIAL_DEEP_PURPLE_A100 = new Color(179, 136, 255);
-	public static final Color MATERIAL_DEEP_PURPLE_A200 = new Color(124, 77, 255);
-	public static final Color MATERIAL_DEEP_PURPLE_A400 = new Color(101, 31, 255);
-	public static final Color MATERIAL_DEEP_PURPLE_A700 = new Color(98, 0, 234);
-	public static final Color MATERIAL_INDIGO_50 = new Color(232, 234, 246);
-	public static final Color MATERIAL_INDIGO_100 = new Color(197, 202, 233);
-	public static final Color MATERIAL_INDIGO_200 = new Color(159, 168, 218);
-	public static final Color MATERIAL_INDIGO_300 = new Color(121, 134, 203);
-	public static final Color MATERIAL_INDIGO_400 = new Color(92, 107, 192);
-	public static final Color MATERIAL_INDIGO_500 = new Color(63, 81, 181);
-	public static final Color MATERIAL_INDIGO_600 = new Color(57, 73, 171);
-	public static final Color MATERIAL_INDIGO_700 = new Color(48, 63, 159);
-	public static final Color MATERIAL_INDIGO_800 = new Color(40, 53, 147);
-	public static final Color MATERIAL_INDIGO_900 = new Color(26, 35, 126);
-	public static final Color MATERIAL_INDIGO_A100 = new Color(140, 158, 255);
-	public static final Color MATERIAL_INDIGO_A200 = new Color(83, 109, 254);
-	public static final Color MATERIAL_INDIGO_A400 = new Color(61, 90, 254);
-	public static final Color MATERIAL_INDIGO_A700 = new Color(48, 79, 254);
-	public static final Color MATERIAL_BLUE_50 = new Color(227, 242, 253);
-	public static final Color MATERIAL_BLUE_100 = new Color(187, 222, 251);
-	public static final Color MATERIAL_BLUE_200 = new Color(144, 202, 249);
-	public static final Color MATERIAL_BLUE_300 = new Color(100, 181, 246);
-	public static final Color MATERIAL_BLUE_400 = new Color(66, 165, 245);
-	public static final Color MATERIAL_BLUE_500 = new Color(33, 150, 243);
-	public static final Color MATERIAL_BLUE_600 = new Color(30, 136, 229);
-	public static final Color MATERIAL_BLUE_700 = new Color(25, 118, 210);
-	public static final Color MATERIAL_BLUE_800 = new Color(21, 101, 192);
-	public static final Color MATERIAL_BLUE_900 = new Color(13, 71, 161);
-	public static final Color MATERIAL_BLUE_A100 = new Color(130, 177, 255);
-	public static final Color MATERIAL_BLUE_A200 = new Color(68, 138, 255);
-	public static final Color MATERIAL_BLUE_A400 = new Color(41, 121, 255);
-	public static final Color MATERIAL_BLUE_A700 = new Color(41, 98, 255);
-	public static final Color MATERIAL_LIGHT_BLUE_50 = new Color(225, 245, 254);
-	public static final Color MATERIAL_LIGHT_BLUE_100 = new Color(179, 229, 252);
-	public static final Color MATERIAL_LIGHT_BLUE_200 = new Color(129, 212, 250);
-	public static final Color MATERIAL_LIGHT_BLUE_300 = new Color(79, 195, 247);
-	public static final Color MATERIAL_LIGHT_BLUE_400 = new Color(41, 182, 252);
-	public static final Color MATERIAL_LIGHT_BLUE_500 = new Color(3, 169, 244);
-	public static final Color MATERIAL_LIGHT_BLUE_600 = new Color(3, 155, 229);
-	public static final Color MATERIAL_LIGHT_BLUE_700 = new Color(2, 136, 209);
-	public static final Color MATERIAL_LIGHT_BLUE_800 = new Color(2, 119, 189);
-	public static final Color MATERIAL_LIGHT_BLUE_900 = new Color(1, 87, 155);
-	public static final Color MATERIAL_LIGHT_BLUE_A100 = new Color(128, 216, 255);
-	public static final Color MATERIAL_LIGHT_BLUE_A200 = new Color(64, 196, 255);
-	public static final Color MATERIAL_LIGHT_BLUE_A400 = new Color(0, 176, 255);
-	public static final Color MATERIAL_LIGHT_BLUE_A700 = new Color(0, 145, 234);
-	public static final Color MATERIAL_CYAN_50 = new Color(224, 247, 250);
-	public static final Color MATERIAL_CYAN_100 = new Color(178, 235, 242);
-	public static final Color MATERIAL_CYAN_200 = new Color(128, 222, 234);
-	public static final Color MATERIAL_CYAN_300 = new Color(77, 208, 225);
-	public static final Color MATERIAL_CYAN_400 = new Color(38, 198, 218);
-	public static final Color MATERIAL_CYAN_500 = new Color(0, 188, 212);
-	public static final Color MATERIAL_CYAN_600 = new Color(0, 172, 193);
-	public static final Color MATERIAL_CYAN_700 = new Color(0, 151, 167);
-	public static final Color MATERIAL_CYAN_800 = new Color(0, 131, 143);
-	public static final Color MATERIAL_CYAN_900 = new Color(0, 96, 100);
-	public static final Color MATERIAL_CYAN_A100 = new Color(132, 255, 255);
-	public static final Color MATERIAL_CYAN_A200 = new Color(24, 255, 255);
-	public static final Color MATERIAL_CYAN_A400 = new Color(0, 229, 255);
-	public static final Color MATERIAL_CYAN_A700 = new Color(0, 184, 212);
-	public static final Color MATERIAL_TEAL_50 = new Color(224, 242, 241);
-	public static final Color MATERIAL_TEAL_100 = new Color(178, 223, 219);
-	public static final Color MATERIAL_TEAL_200 = new Color(128, 203, 196);
-	public static final Color MATERIAL_TEAL_300 = new Color(77, 182, 172);
-	public static final Color MATERIAL_TEAL_400 = new Color(38, 166, 154);
-	public static final Color MATERIAL_TEAL_500 = new Color(0, 150, 136);
-	public static final Color MATERIAL_TEAL_600 = new Color(0, 137, 123);
-	public static final Color MATERIAL_TEAL_700 = new Color(0, 121, 107);
-	public static final Color MATERIAL_TEAL_800 = new Color(0, 105, 92);
-	public static final Color MATERIAL_TEAL_900 = new Color(0, 77, 64);
-	public static final Color MATERIAL_TEAL_A100 = new Color(167, 255, 235);
-	public static final Color MATERIAL_TEAL_A200 = new Color(100, 255, 218);
-	public static final Color MATERIAL_TEAL_A400 = new Color(29, 233, 182);
-	public static final Color MATERIAL_TEAL_A700 = new Color(0, 191, 165);
-	public static final Color MATERIAL_GREEN_50 = new Color(232, 245, 233);
-	public static final Color MATERIAL_GREEN_100 = new Color(200, 230, 201);
-	public static final Color MATERIAL_GREEN_200 = new Color(165, 214, 167);
-	public static final Color MATERIAL_GREEN_300 = new Color(129, 199, 132);
-	public static final Color MATERIAL_GREEN_400 = new Color(102, 187, 106);
-	public static final Color MATERIAL_GREEN_500 = new Color(76, 175, 80);
-	public static final Color MATERIAL_GREEN_600 = new Color(67, 160, 71);
-	public static final Color MATERIAL_GREEN_700 = new Color(56, 142, 60);
-	public static final Color MATERIAL_GREEN_800 = new Color(46, 125, 50);
-	public static final Color MATERIAL_GREEN_900 = new Color(27, 94, 32);
-	public static final Color MATERIAL_GREEN_A100 = new Color(185, 246, 202);
-	public static final Color MATERIAL_GREEN_A200 = new Color(105, 240, 174);
-	public static final Color MATERIAL_GREEN_A400 = new Color(0, 230, 118);
-	public static final Color MATERIAL_GREEN_A700 = new Color(0, 200, 83);
-	public static final Color MATERIAL_LIGHT_GREEN_50 = new Color(241, 248, 233);
-	public static final Color MATERIAL_LIGHT_GREEN_100 = new Color(220, 237, 200);
-	public static final Color MATERIAL_LIGHT_GREEN_200 = new Color(197, 225, 165);
-	public static final Color MATERIAL_LIGHT_GREEN_300 = new Color(174, 213, 129);
-	public static final Color MATERIAL_LIGHT_GREEN_400 = new Color(156, 204, 101);
-	public static final Color MATERIAL_LIGHT_GREEN_500 = new Color(139, 195, 74);
-	public static final Color MATERIAL_LIGHT_GREEN_600 = new Color(124, 179, 66);
-	public static final Color MATERIAL_LIGHT_GREEN_700 = new Color(104, 159, 56);
-	public static final Color MATERIAL_LIGHT_GREEN_800 = new Color(85, 139, 47);
-	public static final Color MATERIAL_LIGHT_GREEN_900 = new Color(51, 105, 30);
-	public static final Color MATERIAL_LIGHT_GREEN_A100 = new Color(204, 255, 144);
-	public static final Color MATERIAL_LIGHT_GREEN_A200 = new Color(178, 255, 89);
-	public static final Color MATERIAL_LIGHT_GREEN_A400 = new Color(118, 255, 3);
-	public static final Color MATERIAL_LIGHT_GREEN_A700 = new Color(100, 221, 23);
-	public static final Color MATERIAL_LIME_50 = new Color(249, 251, 231);
-	public static final Color MATERIAL_LIME_100 = new Color(240, 244, 195);
-	public static final Color MATERIAL_LIME_200 = new Color(230, 238, 156);
-	public static final Color MATERIAL_LIME_300 = new Color(220, 231, 117);
-	public static final Color MATERIAL_LIME_400 = new Color(212, 225, 87);
-	public static final Color MATERIAL_LIME_500 = new Color(205, 220, 57);
-	public static final Color MATERIAL_LIME_600 = new Color(192, 202, 51);
-	public static final Color MATERIAL_LIME_700 = new Color(164, 180, 43);
-	public static final Color MATERIAL_LIME_800 = new Color(158, 157, 36);
-	public static final Color MATERIAL_LIME_900 = new Color(130, 119, 23);
-	public static final Color MATERIAL_LIME_A100 = new Color(244, 255, 129);
-	public static final Color MATERIAL_LIME_A200 = new Color(238, 255, 65);
-	public static final Color MATERIAL_LIME_A400 = new Color(198, 255, 0);
-	public static final Color MATERIAL_LIME_A700 = new Color(174, 234, 0);
-	public static final Color MATERIAL_YELLOW_50 = new Color(255, 253, 231);
-	public static final Color MATERIAL_YELLOW_100 = new Color(255, 249, 196);
-	public static final Color MATERIAL_YELLOW_200 = new Color(255, 245, 144);
-	public static final Color MATERIAL_YELLOW_300 = new Color(255, 241, 118);
-	public static final Color MATERIAL_YELLOW_400 = new Color(255, 238, 88);
-	public static final Color MATERIAL_YELLOW_500 = new Color(255, 235, 59);
-	public static final Color MATERIAL_YELLOW_600 = new Color(253, 216, 53);
-	public static final Color MATERIAL_YELLOW_700 = new Color(251, 192, 45);
-	public static final Color MATERIAL_YELLOW_800 = new Color(249, 168, 37);
-	public static final Color MATERIAL_YELLOW_900 = new Color(245, 127, 23);
-	public static final Color MATERIAL_YELLOW_A100 = new Color(255, 255, 130);
-	public static final Color MATERIAL_YELLOW_A200 = new Color(255, 255, 0);
-	public static final Color MATERIAL_YELLOW_A400 = new Color(255, 234, 0);
-	public static final Color MATERIAL_YELLOW_A700 = new Color(255, 214, 0);
-	public static final Color MATERIAL_AMBER_50 = new Color(255, 248, 225);
-	public static final Color MATERIAL_AMBER_100 = new Color(255, 236, 179);
-	public static final Color MATERIAL_AMBER_200 = new Color(255, 224, 130);
-	public static final Color MATERIAL_AMBER_300 = new Color(255, 213, 79);
-	public static final Color MATERIAL_AMBER_400 = new Color(255, 202, 40);
-	public static final Color MATERIAL_AMBER_500 = new Color(255, 193, 7);
-	public static final Color MATERIAL_AMBER_600 = new Color(255, 179, 0);
-	public static final Color MATERIAL_AMBER_700 = new Color(255, 160, 0);
-	public static final Color MATERIAL_AMBER_800 = new Color(255, 143, 0);
-	public static final Color MATERIAL_AMBER_900 = new Color(255, 111, 0);
-	public static final Color MATERIAL_AMBER_A100 = new Color(255, 229, 127);
-	public static final Color MATERIAL_AMBER_A200 = new Color(255, 215, 64);
-	public static final Color MATERIAL_AMBER_A400 = new Color(255, 196, 0);
-	public static final Color MATERIAL_AMBER_A700 = new Color(255, 171, 0);
-	public static final Color MATERIAL_ORANGE_50 = new Color(255, 243, 224);
-	public static final Color MATERIAL_ORANGE_100 = new Color(255, 224, 178);
-	public static final Color MATERIAL_ORANGE_200 = new Color(255, 204, 128);
-	public static final Color MATERIAL_ORANGE_300 = new Color(255, 183, 77);
-	public static final Color MATERIAL_ORANGE_400 = new Color(255, 167, 38);
-	public static final Color MATERIAL_ORANGE_500 = new Color(255, 152, 0);
-	public static final Color MATERIAL_ORANGE_600 = new Color(251, 140, 0);
-	public static final Color MATERIAL_ORANGE_700 = new Color(245, 124, 0);
-	public static final Color MATERIAL_ORANGE_800 = new Color(239, 108, 0);
-	public static final Color MATERIAL_ORANGE_900 = new Color(230, 81, 0);
-	public static final Color MATERIAL_ORANGE_A100 = new Color(255, 209, 128);
-	public static final Color MATERIAL_ORANGE_A200 = new Color(255, 171, 64);
-	public static final Color MATERIAL_ORANGE_A400 = new Color(255, 145, 0);
-	public static final Color MATERIAL_ORANGE_A700 = new Color(255, 109, 0);
-	public static final Color MATERIAL_DEEP_ORANGE_50 = new Color(251, 233, 167);
-	public static final Color MATERIAL_DEEP_ORANGE_100 = new Color(255, 204, 188);
-	public static final Color MATERIAL_DEEP_ORANGE_200 = new Color(255, 171, 145);
-	public static final Color MATERIAL_DEEP_ORANGE_300 = new Color(255, 138, 101);
-	public static final Color MATERIAL_DEEP_ORANGE_400 = new Color(255, 112, 67);
-	public static final Color MATERIAL_DEEP_ORANGE_500 = new Color(255, 87, 34);
-	public static final Color MATERIAL_DEEP_ORANGE_600 = new Color(244, 81, 30);
-	public static final Color MATERIAL_DEEP_ORANGE_700 = new Color(230, 74, 25);
-	public static final Color MATERIAL_DEEP_ORANGE_800 = new Color(216, 67, 21);
-	public static final Color MATERIAL_DEEP_ORANGE_900 = new Color(191, 54, 12);
-	public static final Color MATERIAL_DEEP_ORANGE_A100 = new Color(255, 158, 128);
-	public static final Color MATERIAL_DEEP_ORANGE_A200 = new Color(255, 110, 64);
-	public static final Color MATERIAL_DEEP_ORANGE_A400 = new Color(255, 61, 0);
-	public static final Color MATERIAL_DEEP_ORANGE_A700 = new Color(221, 38, 0);
-	public static final Color MATERIAL_BROWN_50 = new Color(239, 235, 233);
-	public static final Color MATERIAL_BROWN_100 = new Color(215, 204, 200);
-	public static final Color MATERIAL_BROWN_200 = new Color(188, 170, 164);
-	public static final Color MATERIAL_BROWN_300 = new Color(161, 136, 127);
-	public static final Color MATERIAL_BROWN_400 = new Color(141, 110, 99);
-	public static final Color MATERIAL_BROWN_500 = new Color(121, 85, 72);
-	public static final Color MATERIAL_BROWN_600 = new Color(109, 76, 65);
-	public static final Color MATERIAL_BROWN_700 = new Color(93, 64, 55);
-	public static final Color MATERIAL_BROWN_800 = new Color(78, 52, 46);
-	public static final Color MATERIAL_BROWN_900 = new Color(62, 39, 35);
-	public static final Color MATERIAL_GREY_50 = new Color(250, 250, 250);
-	public static final Color MATERIAL_GREY_100 = new Color(245, 245, 245);
-	public static final Color MATERIAL_GREY_200 = new Color(238, 238, 238);
-	public static final Color MATERIAL_GREY_300 = new Color(224, 224, 224);
-	public static final Color MATERIAL_GREY_400 = new Color(189, 189, 189);
-	public static final Color MATERIAL_GREY_500 = new Color(158, 158, 158);
-	public static final Color MATERIAL_GREY_600 = new Color(117, 117, 117);
-	public static final Color MATERIAL_GREY_700 = new Color(97, 97, 97);
-	public static final Color MATERIAL_GREY_800 = new Color(66, 66, 66);
-	public static final Color MATERIAL_GREY_900 = new Color(33, 33, 33);
-	public static final Color MATERIAL_BLACK_1000 = new Color(0, 0, 0);
-	public static final Color MATERIAL_WHITE_1000 = new Color(255, 255, 255);
-	public static final Color MATERIAL_BLUE_GREY_50 = new Color(236, 239, 241);
-	public static final Color MATERIAL_BLUE_GREY_100 = new Color(207, 216, 220);
-	public static final Color MATERIAL_BLUE_GREY_200 = new Color(176, 187, 197);
-	public static final Color MATERIAL_BLUE_GREY_300 = new Color(144, 164, 174);
-	public static final Color MATERIAL_BLUE_GREY_400 = new Color(120, 144, 156);
-	public static final Color MATERIAL_BLUE_GREY_500 = new Color(96, 125, 139);
-	public static final Color MATERIAL_BLUE_GREY_600 = new Color(84, 110, 122);
-	public static final Color MATERIAL_BLUE_GREY_700 = new Color(69, 90, 100);
-	public static final Color MATERIAL_BLUE_GREY_800 = new Color(55, 71, 79);
-	public static final Color MATERIAL_BLUE_GREY_900 = new Color(38, 50, 56);
-
-	public byte[] styleIcon(CustomIconStyle customIconStyle, byte[] imageBytes) {
-		return convertImage(imageBytes, customIconStyle.getSearchColors(), customIconStyle.getReplaceColors(), customIconStyle.getMatchFuzzinessThreshold());
-	}
-
-	public byte[] convertImage(byte[] imageBytes, Color[] search, Color[] replace, int colorMatchingThreshold) {
-		try {
-			BufferedImage image = ImageIO.read(new ByteArrayInputStream(imageBytes));
-			//colorImage(image, search, replace, colorMatchingThreshold);
-			recolorImage(image, search, replace, colorMatchingThreshold);
-			ByteArrayOutputStream bos = new ByteArrayOutputStream();
-			ImageIO.write(image, "png", bos);
-			return bos.toByteArray();
-		} catch (Exception ex) {
-			ex.printStackTrace();
-		}
-		return null;
-	}
-
-	private void colorImage(BufferedImage image, Color[] search, Color[] replace, int threshold) {
-		int width = image.getWidth();
-		int height = image.getHeight();
-		WritableRaster raster = image.getRaster();
-		for (int xx = 0; xx < width; xx++) {
-			for (int yy = 0; yy < height; yy++) {
-				int[] col = raster.getPixel(xx, yy, (int[]) null);
-				for (int i = 0; i < search.length; i++) {
-					if (isMatch(col, search[i], threshold)) {
-						replace(col, replace[i]);
-						raster.setPixel(xx, yy, col);
-					}
-				}
-			}
-		}
-	}
-
-	private boolean isMatch(int[] col, Color color, int threshold) {
-		int diffRed = Math.abs(col[0] - color.getRed());
-		int diffGreen = Math.abs(col[1] - color.getGreen());
-		int difBlue = Math.abs(col[2] - color.getBlue());
-		int maxDiff = threshold;
-		if (diffRed < maxDiff && diffGreen < maxDiff && difBlue < maxDiff) {
-			return true;
-		}
-		return false;
-	}
-
-	private void recolorImage(BufferedImage image, Color[] search, Color[] replace, int threshold) {
-		int width = image.getWidth();
-		int height = image.getHeight();
-		WritableRaster raster = image.getRaster();
-		for (int xx = 0; xx < width; xx++) {
-			for (int yy = 0; yy < height; yy++) {
-				int[] col = raster.getPixel(xx, yy, (int[]) null);
-				int bestMatchIndex = -1;
-				float bestMatch = 1000;
-				for (int i = 0; i < replace.length; i++) {
-					float matchDiff = calculateMatchDiff(col, search[i], threshold);
-					if (matchDiff >= 0 && matchDiff < bestMatch) {
-						bestMatchIndex = i;
-						bestMatch = matchDiff;
-					}
-				}
-				if (bestMatchIndex >= 0) {
-					int[] convertedColor = convertColor(col, search[bestMatchIndex], replace[bestMatchIndex], threshold);
-					if (convertedColor != null) {
-						raster.setPixel(xx, yy, convertedColor);
-					}
-				}
-			}
-		}
-	}
-
-	private float calculateMatchDiff(int[] rasterColor, Color searchColor, int threshold) {
-		float[] hsb = Color.RGBtoHSB(rasterColor[0], rasterColor[1], rasterColor[2], null);
-		float hue = hsb[0];
-		float saturation = hsb[1];
-		float brightness = hsb[2];
-
-		float[] hsbSearch = Color.RGBtoHSB(searchColor.getRed(), searchColor.getGreen(), searchColor.getBlue(), null);
-		float hueSearch = hsbSearch[0];
-
-		return Math.abs(hue - hueSearch);
-	}
-
-	private int[] convertColor(int[] rasterColor, Color searchColor, Color replaceColor, int threshold) {
-		float[] hsb = Color.RGBtoHSB(rasterColor[0], rasterColor[1], rasterColor[2], null);
-		float[] hsbSearch = Color.RGBtoHSB(searchColor.getRed(), searchColor.getGreen(), searchColor.getBlue(), null);
-
-		float diffHue = hsbSearch[0] - hsb[0];
-		float diffSaturation = hsbSearch[1] - hsb[1];
-		float diffBrightness = hsbSearch[2] - hsb[2];
-
-
-		float[] hsbReplace = Color.RGBtoHSB(replaceColor.getRed(), replaceColor.getGreen(), replaceColor.getBlue(), null);
-
-		float hue = hsbReplace[0] - diffHue;
-
-		float saturation = hsbReplace[1] - diffSaturation;
-		if (saturation > 1) saturation = 1;
-		if (saturation < 0) saturation = 0;
-		float brightness = hsbReplace[2] - diffBrightness;
-		if (brightness > 1) brightness = 1;
-		if (brightness < 0) brightness = 0;
-
-		Color hsbColor = Color.getHSBColor(hue, saturation, brightness);
-		rasterColor[0] = hsbColor.getRed();
-		rasterColor[1] = hsbColor.getGreen();
-		rasterColor[2] = hsbColor.getBlue();
-		return rasterColor;
-	}
-
-	private boolean isMatchExact(int[] col, Color color) {
-		if (col[0] == color.getRed() && col[1] == color.getGreen() && col[2] == color.getBlue()) {
-			return true;
-		}
-		return false;
-	}
-
-	private void replace(int[] col, Color color) {
-		col[0] = color.getRed();
-		col[1] = color.getGreen();
-		col[2] = color.getBlue();
-	}
-
-
-
-}
diff --git a/teamapps-icon/src/main/java/org/teamapps/icons/systemprovider/SystemIconProvider.java b/teamapps-icon/src/main/java/org/teamapps/icons/systemprovider/SystemIconProvider.java
deleted file mode 100644
index fc3148690..000000000
--- a/teamapps-icon/src/main/java/org/teamapps/icons/systemprovider/SystemIconProvider.java
+++ /dev/null
@@ -1,241 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.icons.systemprovider;
-
-import org.teamapps.icons.api.*;
-import org.teamapps.icons.provider.IconProvider;
-
-import java.io.File;
-import java.util.HashMap;
-import java.util.Map;
-import java.util.Set;
-
-public class SystemIconProvider {
-
-	private IconProvider standardIconProvider;
-	private Map<String, IconProvider> iconProviderByStyleId = new HashMap<>();
-	private Map<String, IconProvider> iconProviderByLibraryId = new HashMap<>();
-	private Map<String, CustomIconStyle> customIconStyleByStyleId = new HashMap<>();
-
-	private CachingIconProvider cachingIconProvider;
-	private ResizingIconProvider resizingIconProvider = new ResizingIconProvider();
-	private StylingIconProvider stylingIconProvider = new StylingIconProvider();
-	private CompositeIconProvider compositeIconProvider = new CompositeIconProvider();
-	private CompositeSvgProvider compositeSvgProvider = new CompositeSvgProvider();
-
-	public SystemIconProvider() {
-		cachingIconProvider = new CachingIconProvider();
-	}
-
-	public SystemIconProvider(File cachingDirectory) {
-		cachingIconProvider = new CachingIconProvider(cachingDirectory);
-	}
-
-	public IconResource getIcon(int size, String qualifiedIconId) {
-		boolean isSVG = qualifiedIconId.endsWith(".svg");
-		byte[] bytes = getIconBytes(size, isSVG, qualifiedIconId);
-		if (bytes != null) {
-			String mimeType = isSVG ? "image/svg+xml" : "image/png";
-			return new IconResource(bytes, mimeType);
-		} else {
-			return null;
-		}
-	}
-
-	public byte[] getIconBytes(int size, boolean isSVG, String qualifiedIconId) {
-		try {
-			boolean composed = StyledCompositeIcon.isComposedIcon(qualifiedIconId);
-			if (composed) {
-				return getComposedIcon(size, qualifiedIconId, isSVG);
-			} else {
-				return getSingleIcon(size, qualifiedIconId);
-			}
-		} catch (Exception e) {
-			e.printStackTrace();
-		}
-		return null;
-	}
-
-	private byte[] getSingleIcon(int size, StyledIcon styledIcon) {
-		if (styledIcon == null) {
-			return null;
-		}
-		return getSingleIcon(size, styledIcon.getQualifiedIconId());
-	}
-
-	private byte[] getSingleIcon(int size, String qualifiedIconId) {
-		byte[] cachedIcon = cachingIconProvider.getCachedIcon(size, qualifiedIconId);
-		if (cachedIcon != null) {
-			return cachedIcon;
-		}
-		StyledIcon styledIcon = StyledIcon.parseIcon(qualifiedIconId);
-		if (styledIcon == null) {
-			return null;
-		}
-		String iconLibraryId = styledIcon.getIconLibraryId();
-		String styleId = styledIcon.getStyleId();
-		String iconName = styledIcon.getIconName();
-
-		String providerStyleId = styleId;
-		CustomIconStyle customIconStyle = customIconStyleByStyleId.get(styleId);
-		if (customIconStyle != null) {
-			providerStyleId = customIconStyle.getBaseStyleId();
-		}
-
-		IconProvider iconProvider = getIconProvider(iconLibraryId, providerStyleId);
-
-		if (iconProvider == null) {
-			return null;
-		}
-
-		byte[] iconBytes = null;
-		boolean convertedIcon = false;
-
-		if (iconProvider.getAvailableIconSizes() != null && !iconProvider.getAvailableIconSizes().isEmpty() && !iconProvider.getAvailableIconSizes().contains(size)) {
-			convertedIcon = true;
-			int resizeSize = calculateResizeSize(size, iconProvider.getAvailableIconSizes());
-			byte[] icon = iconProvider.getIcon(providerStyleId, resizeSize, iconName);
-			iconBytes = resizingIconProvider.resizeIcon(icon, size);
-		} else {
-			iconBytes = iconProvider.getIcon(providerStyleId, size, iconName);
-		}
-
-		if (customIconStyle != null && iconBytes != null && !qualifiedIconId.contains(".flag_")) {
-			convertedIcon = true;
-			iconBytes = stylingIconProvider.styleIcon(customIconStyle, iconBytes);
-		}
-
-		if (convertedIcon) {
-			cachingIconProvider.puIconInCache(size, qualifiedIconId, iconBytes);
-		}
-		return iconBytes;
-	}
-
-	private IconProvider getIconProvider(String iconLibraryId, String styleId) {
-		IconProvider iconProvider = null;
-		if (standardIconProvider.getIconLibraryId().equals(iconLibraryId)) {
-			iconProvider = standardIconProvider;
-		}
-		if (iconProvider == null) {
-			iconProvider = iconProviderByLibraryId.get(iconLibraryId);
-		}
-		if (iconProvider == null) {
-			iconProvider = iconProviderByStyleId.get(styleId);
-		}
-		return iconProvider;
-	}
-
-
-	private int calculateResizeSize(int requiredSize, Set<Integer> availableSizes) {
-		int bestFit = calculateResizeSize(requiredSize, availableSizes, 2, 4, 3, 1.5d);
-		if (bestFit > 0) {
-			return bestFit;
-		}
-		for (Integer size : availableSizes) {
-			if (bestFit == 0) {
-				bestFit = size;
-			} else if (bestFit < requiredSize * 2 && size > bestFit) {
-				bestFit = size;
-			}
-		}
-		return bestFit;
-	}
-
-	private int calculateResizeSize(int requiredSize, Set<Integer> availableSizes, double ... factors) {
-		for (double factor : factors) {
-			if (availableSizes.contains((int) (requiredSize * factor))) {
-				return (int) (requiredSize * factor);
-			}
-		}
-		return 0;
-	}
-
-	private byte[] getComposedSvgIcon(int size, String qualifiedIconId) {
-		byte[] cachedIcon = cachingIconProvider.getCachedIcon(size, qualifiedIconId);
-		if (cachedIcon != null) {
-			return cachedIcon;
-		}
-		StyledCompositeIcon composedIcon = StyledCompositeIcon.parse(qualifiedIconId);
-		if (composedIcon == null) {
-			return null;
-		}
-
-
-		byte[] iconBytes = null;
-
-		cachingIconProvider.puIconInCache(size, qualifiedIconId, iconBytes);
-
-		return iconBytes;
-	}
-
-	private byte[] getComposedIcon(int size, String qualifiedIconId, boolean isSVG) {
-		byte[] cachedIcon = cachingIconProvider.getCachedIcon(size, qualifiedIconId);
-		if (cachedIcon != null) {
-			return cachedIcon;
-		}
-		StyledCompositeIcon composedIcon = StyledCompositeIcon.parse(qualifiedIconId);
-		if (composedIcon == null) {
-			return null;
-		}
-
-		byte[] baseIcon = getSingleIcon(size, composedIcon.getBaseIcon());
-		byte[] bottomRight = getSingleIcon(size / 2, composedIcon.getBottomRightIcon());
-		byte[] bottomLeft = getSingleIcon(size / 2, composedIcon.getBottomLeftIcon());
-		byte[] topLeft = getSingleIcon(size / 2, composedIcon.getTopLeftIcon());
-		byte[] topRight = getSingleIcon(size / 2, composedIcon.getTopRightIcon());
-
-		byte[] iconBytes = null;
-		if (isSVG) {
-			iconBytes = compositeSvgProvider.createComposedIcon(size, baseIcon, bottomRight, bottomLeft, topLeft, topRight);
-		} else {
-			iconBytes = compositeIconProvider.createComposedIcon(size, baseIcon, bottomRight, bottomLeft, topLeft, topRight);
-		}
-
-		cachingIconProvider.puIconInCache(size, qualifiedIconId, iconBytes);
-
-		return iconBytes;
-	}
-
-	public IconProvider getStandardIconProvider() {
-		return standardIconProvider;
-	}
-
-	public void registerStandardIconProvider(IconProvider iconProvider) {
-		standardIconProvider = iconProvider;
-		registerCustomIconProvider(iconProvider);
-	}
-
-	public void registerCustomIconProvider(IconProvider<?> iconProvider) {
-		for (IconStyle iconStyle : iconProvider.getAvailableIconStyles()) {
-			if (iconStyle instanceof CustomIconStyle) {
-				customIconStyleByStyleId.put(iconStyle.getStyleId(), (CustomIconStyle) iconStyle);
-			} else {
-				iconProviderByStyleId.put(iconStyle.getStyleId(), iconProvider);
-			}
-		}
-		iconProviderByLibraryId.put(iconProvider.getIconLibraryId(), iconProvider);
-	}
-
-	public void registerCustomIconStyle(CustomIconStyle customIconStyle) {
-		customIconStyleByStyleId.put(customIconStyle.getStyleId(), customIconStyle);
-	}
-
-
-}
diff --git a/teamapps-icon/src/main/java/org/teamapps/icons/util/IconEncodeDecodeUtil.java b/teamapps-icon/src/main/java/org/teamapps/icons/util/IconEncodeDecodeUtil.java
new file mode 100644
index 000000000..ce6a13eb3
--- /dev/null
+++ b/teamapps-icon/src/main/java/org/teamapps/icons/util/IconEncodeDecodeUtil.java
@@ -0,0 +1,39 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.icons.util;
+
+public class IconEncodeDecodeUtil {
+
+	public static int findClosingParenthesisPosition(String text, int openingParenthesisPosition) {
+		int openCounter = 1;
+		int pos = openingParenthesisPosition;
+		while (openCounter > 0 && pos < text.length()) {
+			pos++;
+			char c = text.charAt(pos);
+			if (c == '(') {
+				openCounter++;
+			} else if (c == ')') {
+				openCounter--;
+			}
+		}
+		return pos == text.length() ? -1 : pos;
+	}
+
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/data/value/filter/AbstractFilter.java b/teamapps-icon/src/test/java/org/teamapps/icon/TestIcon.java
similarity index 71%
rename from teamapps-ux/src/main/java/org/teamapps/data/value/filter/AbstractFilter.java
rename to teamapps-icon/src/test/java/org/teamapps/icon/TestIcon.java
index 95d092a0f..5fa9b9180 100644
--- a/teamapps-ux/src/main/java/org/teamapps/data/value/filter/AbstractFilter.java
+++ b/teamapps-icon/src/test/java/org/teamapps/icon/TestIcon.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,19 +17,24 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-package org.teamapps.data.value.filter;
+package org.teamapps.icon;
 
-public abstract class AbstractFilter implements Filter {
+import org.teamapps.icons.Icon;
 
-	private final String property;
+//@IconLibrary("example")
+public enum TestIcon implements Icon<TestIcon, Void> {
 
-	public AbstractFilter(String property) {
-		this.property = property;
+	A, B;
+
+	@Override
+	public TestIcon withStyle(Void unused) {
+		return this;
 	}
 
 	@Override
-	public String getProperty() {
-		return property;
+	public Void getStyle() {
+		return null;
 	}
 
+
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/animation/Animation.java b/teamapps-icon/src/test/java/org/teamapps/icon/TestIconEncoder.java
similarity index 69%
rename from teamapps-ux/src/main/java/org/teamapps/ux/component/animation/Animation.java
rename to teamapps-icon/src/test/java/org/teamapps/icon/TestIconEncoder.java
index 94144b5ab..e8af1ae97 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/animation/Animation.java
+++ b/teamapps-icon/src/test/java/org/teamapps/icon/TestIconEncoder.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,15 +17,16 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-package org.teamapps.ux.component.animation;
+package org.teamapps.icon;
 
-import org.teamapps.dto.UiComponentRevealAnimation;
+import org.teamapps.icons.spi.IconEncoder;
+import org.teamapps.icons.IconEncoderContext;
 
-public enum Animation {
+public class TestIconEncoder implements IconEncoder<TestIcon> {
 
-	NONE, FADE_ZOOM_GROW, FADE_ZOOM_SHRINK;
-
-	public UiComponentRevealAnimation toUiComponentRevealAnimation() {
-		return UiComponentRevealAnimation.valueOf(name());
+	@Override
+	public String encodeIcon(TestIcon icon, IconEncoderContext context) {
+		return icon.name();
 	}
+
 }
diff --git a/teamapps-icon/src/test/java/org/teamapps/icons/composite/CompositeIconDecoderTest.java b/teamapps-icon/src/test/java/org/teamapps/icons/composite/CompositeIconDecoderTest.java
new file mode 100644
index 000000000..8b90312a4
--- /dev/null
+++ b/teamapps-icon/src/test/java/org/teamapps/icons/composite/CompositeIconDecoderTest.java
@@ -0,0 +1,38 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.icons.composite;
+
+import org.junit.Assert;
+import org.junit.Test;
+import org.teamapps.icon.TestIcon;
+
+public class CompositeIconDecoderTest {
+
+	@Test
+	public void testDecode() throws Exception {
+		CompositeIcon compositeIcon = new CompositeIconDecoder().decodeIcon("0(x)3(x)", qualifiedEncodedIcon -> TestIcon.A);
+		Assert.assertEquals(TestIcon.A, compositeIcon.getBaseIcon());
+		Assert.assertEquals(TestIcon.A, compositeIcon.getTopLeftIcon());
+		Assert.assertNull(compositeIcon.getBottomRightIcon());
+		Assert.assertNull(compositeIcon.getBottomLeftIcon());
+		Assert.assertNull(compositeIcon.getTopRightIcon());
+	}
+
+}
diff --git a/teamapps-material-icon-provider/pom.xml b/teamapps-material-icon-provider/pom.xml
index 7f07fd2a2..efbc59a93 100644
--- a/teamapps-material-icon-provider/pom.xml
+++ b/teamapps-material-icon-provider/pom.xml
@@ -3,7 +3,7 @@
     <parent>
         <artifactId>teamapps</artifactId>
         <groupId>org.teamapps</groupId>
-        <version>0.9.8-SNAPSHOT</version>
+        <version>0.9.208-SNAPSHOT</version>
     </parent>
     <modelVersion>4.0.0</modelVersion>
 
@@ -37,11 +37,13 @@
         <dependency>
             <groupId>org.teamapps</groupId>
             <artifactId>teamapps-icon</artifactId>
+            <scope>provided</scope>
         </dependency>
 
         <dependency>
             <groupId>org.teamapps</groupId>
             <artifactId>teamapps-common</artifactId>
+            <scope>provided</scope>
         </dependency>
 
         <dependency>
@@ -53,4 +55,25 @@
 
 
 
+    <build>
+        <plugins>
+            <plugin>
+                <groupId>org.apache.maven.plugins</groupId>
+                <artifactId>maven-source-plugin</artifactId>
+                <version>3.3.1</version>
+                <executions>
+                    <execution>
+                        <id>generate-sources-jar</id>
+                        <goals>
+                            <goal>jar</goal>
+                        </goals>
+                        <configuration>
+                            <excludeResources>true</excludeResources>
+                        </configuration>
+                    </execution>
+                </executions>
+            </plugin>
+        </plugins>
+    </build>
+
 </project>
\ No newline at end of file
diff --git a/teamapps-material-icon-provider/src/main/java/org/teamapps/icon/material/AbstractMaterialIconStyle.java b/teamapps-material-icon-provider/src/main/java/org/teamapps/icon/material/AbstractMaterialIconStyle.java
deleted file mode 100644
index 803978f0d..000000000
--- a/teamapps-material-icon-provider/src/main/java/org/teamapps/icon/material/AbstractMaterialIconStyle.java
+++ /dev/null
@@ -1,85 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.icon.material;
-
-import org.teamapps.icons.api.IconStyle;
-
-public abstract class AbstractMaterialIconStyle implements IconStyle {
-
-    private final String styleId;
-    private final StyleType styleType;
-    private String styleName;
-    private boolean canBeUsedAsSubIcon;
-
-    public AbstractMaterialIconStyle(String styleId, StyleType styleType) {
-        this.styleId = styleId;
-        this.styleType = styleType;
-    }
-
-    public AbstractMaterialIconStyle(String styleId, StyleType styleType, String styleName, boolean canBeUsedAsSubIcon) {
-        this.styleId = styleId;
-        this.styleType = styleType;
-        this.styleName = styleName;
-        this.canBeUsedAsSubIcon = canBeUsedAsSubIcon;
-    }
-
-    public void setStyleName(String styleName) {
-        this.styleName = styleName;
-    }
-
-    public void setCanBeUsedAsSubIcon(boolean canBeUsedAsSubIcon) {
-        this.canBeUsedAsSubIcon = canBeUsedAsSubIcon;
-    }
-
-    public StyleType getStyleType() {
-        return styleType;
-    }
-
-    @Override
-    public String getStyleId() {
-        return styleId;
-    }
-
-    @Override
-    public String getStyleName() {
-        return styleName;
-    }
-
-    @Override
-    public boolean canBeUsedAsSubIcon() {
-        return canBeUsedAsSubIcon;
-    }
-
-    public abstract String applyStyle(String svg);
-
-    public String applyStyle(String svg, String styleTags) {
-        int pos = svg.indexOf('>');
-        return svg.substring(0, pos + 2) + styleTags + svg.substring(pos + 1, svg.length());
-    }
-
-    public String createStyleTags(String ... colors) {
-        StringBuilder sb = new StringBuilder("<style>\n");
-        for (int i = 1; i <= colors.length; i++) {
-            sb.append(".teamapps-color-").append(i).append(" {").append("color:").append(colors[i - 1]).append("}");
-        }
-        sb.append("\n</style>");
-        return sb.toString();
-    }
-}
diff --git a/teamapps-material-icon-provider/src/main/java/org/teamapps/icon/material/MaterialIcon.java b/teamapps-material-icon-provider/src/main/java/org/teamapps/icon/material/MaterialIcon.java
index 610cb8997..f3cc31e04 100644
--- a/teamapps-material-icon-provider/src/main/java/org/teamapps/icon/material/MaterialIcon.java
+++ b/teamapps-material-icon-provider/src/main/java/org/teamapps/icon/material/MaterialIcon.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,963 +19,994 @@
  */
 package org.teamapps.icon.material;
 
-import org.teamapps.icons.api.Icon;
-import org.teamapps.icons.api.SimpleIcon;
-import org.teamapps.icons.api.StyledIcon;
+import org.teamapps.icons.Icon;
+import org.teamapps.icons.spi.IconLibrary;
 
-public enum MaterialIcon implements SimpleIcon {
+import java.util.Collection;
+import java.util.HashMap;
+import java.util.Map;
 
-    ROTATION_3D("3d_rotation"),
-    AC_UNIT("ac_unit"),
-    ACCESS_ALARM("access_alarm"),
-    ACCESS_ALARMS("access_alarms"),
-    ACCESS_TIME("access_time"),
-    ACCESSIBILITY("accessibility"),
-    ACCESSIBLE("accessible"),
-    ACCOUNT_BALANCE("account_balance"),
-    ACCOUNT_BALANCE_WALLET("account_balance_wallet"),
-    ACCOUNT_BOX("account_box"),
-    ACCOUNT_CIRCLE("account_circle"),
-    ADB("adb"),
-    ADD("add"),
-    ADD_A_PHOTO("add_a_photo"),
-    ADD_ALARM("add_alarm"),
-    ADD_ALERT("add_alert"),
-    ADD_BOX("add_box"),
-    ADD_CIRCLE("add_circle"),
-    ADD_CIRCLE_OUTLINE("add_circle_outline"),
-    ADD_LOCATION("add_location"),
-    ADD_SHOPPING_CART("add_shopping_cart"),
-    ADD_TO_PHOTOS("add_to_photos"),
-    ADD_TO_QUEUE("add_to_queue"),
-    ADJUST("adjust"),
-    AIRLINE_SEAT_FLAT("airline_seat_flat"),
-    AIRLINE_SEAT_FLAT_ANGLED("airline_seat_flat_angled"),
-    AIRLINE_SEAT_INDIVIDUAL_SUITE("airline_seat_individual_suite"),
-    AIRLINE_SEAT_LEGROOM_EXTRA("airline_seat_legroom_extra"),
-    AIRLINE_SEAT_LEGROOM_NORMAL("airline_seat_legroom_normal"),
-    AIRLINE_SEAT_LEGROOM_REDUCED("airline_seat_legroom_reduced"),
-    AIRLINE_SEAT_RECLINE_EXTRA("airline_seat_recline_extra"),
-    AIRLINE_SEAT_RECLINE_NORMAL("airline_seat_recline_normal"),
-    AIRPLANE_MODE_ACTIVE("airplanemode_active"),
-    AIRPLANE_MODE_INACTIVE("airplanemode_inactive"),
-    AIRPLAY("airplay"),
-    AIRPORT_SHUTTLE("airport_shuttle"),
-    ALARM("alarm"),
-    ALARM_ADD("alarm_add"),
-    ALARM_OFF("alarm_off"),
-    ALARM_ON("alarm_on"),
-    ALBUM("album"),
-    ALL_INCLUSIVE("all_inclusive"),
-    ALL_OUT("all_out"),
-    ANDROID("android"),
-    ANNOUNCEMENT("announcement"),
-    APPS("apps"),
-    ARCHIVE("archive"),
-    ARROW_BACK("arrow_back"),
-    ARROW_DOWNWARD("arrow_downward"),
-    ARROW_DROP_DOWN("arrow_drop_down"),
-    ARROW_DROP_DOWN_CIRCLE("arrow_drop_down_circle"),
-    ARROW_DROP_UP("arrow_drop_up"),
-    ARROW_FORWARD("arrow_forward"),
-    ARROW_UPWARD("arrow_upward"),
-    ART_TRACK("art_track"),
-    ASPECT_RATIO("aspect_ratio"),
-    ASSESSMENT("assessment"),
-    ASSIGNMENT("assignment"),
-    ASSIGNMENT_IND("assignment_ind"),
-    ASSIGNMENT_LATE("assignment_late"),
-    ASSIGNMENT_RETURN("assignment_return"),
-    ASSIGNMENT_RETURNED("assignment_returned"),
-    ASSIGNMENT_TURNED_IN("assignment_turned_in"),
-    ASSISTANT("assistant"),
-    ASSISTANT_PHOTO("assistant_photo"),
-    ATTACH_FILE("attach_file"),
-    ATTACH_MONEY("attach_money"),
-    ATTACHMENT("attachment"),
-    AUDIO_TRACK("audiotrack"),
-    AUTO_RENEW("autorenew"),
-    AV_TIMER("av_timer"),
-    BACKSPACE("backspace"),
-    BACKUP("backup"),
-    BATTERY_ALERT("battery_alert"),
-    BATTERY_CHARGING_FULL("battery_charging_full"),
-    BATTERY_FULL("battery_full"),
-    BATTERY_STD("battery_std"),
-    BATTERY_UNKNOWN("battery_unknown"),
-    BEACH_ACCESS("beach_access"),
-    BEEN_HERE("beenhere"),
-    BLOCK("block"),
-    BLUETOOTH("bluetooth"),
-    BLUETOOTH_AUDIO("bluetooth_audio"),
-    BLUETOOTH_CONNECTED("bluetooth_connected"),
-    BLUETOOTH_DISABLED("bluetooth_disabled"),
-    BLUETOOTH_SEARCHING("bluetooth_searching"),
-    BLUR_CIRCULAR("blur_circular"),
-    BLUR_LINEAR("blur_linear"),
-    BLUR_OFF("blur_off"),
-    BLUR_ON("blur_on"),
-    BOOK("book"),
-    BOOKMARK("bookmark"),
-    BOOKMARK_BORDER("bookmark_border"),
-    BORDER_ALL("border_all"),
-    BORDER_BOTTOM("border_bottom"),
-    BORDER_CLEAR("border_clear"),
-    BORDER_COLOR("border_color"),
-    BORDER_HORIZONTAL("border_horizontal"),
-    BORDER_INNER("border_inner"),
-    BORDER_LEFT("border_left"),
-    BORDER_OUTER("border_outer"),
-    BORDER_RIGHT("border_right"),
-    BORDER_STYLE("border_style"),
-    BORDER_TOP("border_top"),
-    BORDER_VERTICAL("border_vertical"),
-    BRANDING_WATERMARK("branding_watermark"),
-    BRIGHTNESS_1("brightness_1"),
-    BRIGHTNESS_2("brightness_2"),
-    BRIGHTNESS_3("brightness_3"),
-    BRIGHTNESS_4("brightness_4"),
-    BRIGHTNESS_5("brightness_5"),
-    BRIGHTNESS_6("brightness_6"),
-    BRIGHTNESS_7("brightness_7"),
-    BRIGHTNESS_AUTO("brightness_auto"),
-    BRIGHTNESS_HIGH("brightness_high"),
-    BRIGHTNESS_LOW("brightness_low"),
-    BRIGHTNESS_MEDIUM("brightness_medium"),
-    BROKEN_IMAGE("broken_image"),
-    BRUSH("brush"),
-    BUBBLE_CHART("bubble_chart"),
-    BUG_REPORT("bug_report"),
-    BUILD("build"),
-    BURST_MODE("burst_mode"),
-    BUSINESS("business"),
-    BUSINESS_CENTER("business_center"),
-    CACHED("cached"),
-    CAKE("cake"),
-    CALL("call"),
-    CALL_END("call_end"),
-    CALL_MADE("call_made"),
-    CALL_MERGE("call_merge"),
-    CALL_MISSED("call_missed"),
-    CALL_MISSED_OUTGOING("call_missed_outgoing"),
-    CALL_RECEIVED("call_received"),
-    CALL_SPLIT("call_split"),
-    CALL_TO_ACTION("call_to_action"),
-    CAMERA("camera"),
-    CAMERA_ALT("camera_alt"),
-    CAMERA_ENHANCE("camera_enhance"),
-    CAMERA_FRONT("camera_front"),
-    CAMERA_REAR("camera_rear"),
-    CAMERA_ROLL("camera_roll"),
-    CANCEL("cancel"),
-    CARD_GIFTCARD("card_giftcard"),
-    CARD_MEMBERSHIP("card_membership"),
-    CARD_TRAVEL("card_travel"),
-    CASINO("casino"),
-    CAST("cast"),
-    CAST_CONNECTED("cast_connected"),
-    CENTER_FOCUS_STRONG("center_focus_strong"),
-    CENTER_FOCUS_WEAK("center_focus_weak"),
-    CHANGE_HISTORY("change_history"),
-    CHAT("chat"),
-    CHAT_BUBBLE("chat_bubble"),
-    CHAT_BUBBLE_OUTLINE("chat_bubble_outline"),
-    CHECK("check"),
-    CHECK_BOX("check_box"),
-    CHECK_BOX_OUTLINE_BLANK("check_box_outline_blank"),
-    CHECK_CIRCLE("check_circle"),
-    CHEVRON_LEFT("chevron_left"),
-    CHEVRON_RIGHT("chevron_right"),
-    CHILD_CARE("child_care"),
-    CHILD_FRIENDLY("child_friendly"),
-    CHROME_READER_MODE("chrome_reader_mode"),
-    CLASS("class"),
-    CLEAR("clear"),
-    CLEAR_ALL("clear_all"),
-    CLOSE("close"),
-    CLOSED_CAPTION("closed_caption"),
-    CLOUD("cloud"),
-    CLOUD_CIRCLE("cloud_circle"),
-    CLOUD_DONE("cloud_done"),
-    CLOUD_DOWNLOAD("cloud_download"),
-    CLOUD_OFF("cloud_off"),
-    CLOUD_QUEUE("cloud_queue"),
-    CLOUD_UPLOAD("cloud_upload"),
-    CODE("code"),
-    COLLECTIONS("collections"),
-    COLLECTIONS_BOOKMARK("collections_bookmark"),
-    COLOR_LENS("color_lens"),
-    COLORIZE("colorize"),
-    COMMENT("comment"),
-    COMPARE("compare"),
-    COMPARE_ARROWS("compare_arrows"),
-    COMPUTER("computer"),
-    CONFIRMATION_NUMBER("confirmation_number"),
-    CONTACT_MAIL("contact_mail"),
-    CONTACT_PHONE("contact_phone"),
-    CONTACTS("contacts"),
-    CONTENT_COPY("content_copy"),
-    CONTENT_CUT("content_cut"),
-    CONTENT_PASTE("content_paste"),
-    CONTROL_POINT("control_point"),
-    CONTROL_POINT_DUPLICATE("control_point_duplicate"),
-    COPYRIGHT("copyright"),
-    CREATE("create"),
-    CREATE_NEW_FOLDER("create_new_folder"),
-    CREDIT_CARD("credit_card"),
-    CROP("crop"),
-    CROP_16_9("crop_16_9"),
-    CROP_3_2("crop_3_2"),
-    CROP_5_4("crop_5_4"),
-    CROP_7_5("crop_7_5"),
-    CROP_DIN("crop_din"),
-    CROP_FREE("crop_free"),
-    CROP_LANDSCAPE("crop_landscape"),
-    CROP_ORIGINAL("crop_original"),
-    CROP_PORTRAIT("crop_portrait"),
-    CROP_ROTATE("crop_rotate"),
-    CROP_SQUARE("crop_square"),
-    DASHBOARD("dashboard"),
-    DATA_USAGE("data_usage"),
-    DATE_RANGE("date_range"),
-    DEHAZE("dehaze"),
-    DELETE("delete"),
-    DELETE_FOREVER("delete_forever"),
-    DELETE_SWEEP("delete_sweep"),
-    DESCRIPTION("description"),
-    DESKTOP_MAC("desktop_mac"),
-    DESKTOP_WINDOWS("desktop_windows"),
-    DETAILS("details"),
-    DEVELOPER_BOARD("developer_board"),
-    DEVELOPER_MODE("developer_mode"),
-    DEVICE_HUB("device_hub"),
-    DEVICES("devices"),
-    DEVICES_OTHER("devices_other"),
-    DIALER_SIP("dialer_sip"),
-    DIALPAD("dialpad"),
-    DIRECTIONS("directions"),
-    DIRECTIONS_BIKE("directions_bike"),
-    DIRECTIONS_BOAT("directions_boat"),
-    DIRECTIONS_BUS("directions_bus"),
-    DIRECTIONS_CAR("directions_car"),
-    DIRECTIONS_RAILWAY("directions_railway"),
-    DIRECTIONS_RUN("directions_run"),
-    DIRECTIONS_SUBWAY("directions_subway"),
-    DIRECTIONS_TRANSIT("directions_transit"),
-    DIRECTIONS_WALK("directions_walk"),
-    DISC_FULL("disc_full"),
-    DNS("dns"),
-    DO_NOT_DISTURB("do_not_disturb"),
-    DO_NOT_DISTURB_ALT("do_not_disturb_alt"),
-    DO_NOT_DISTURB_OFF("do_not_disturb_off"),
-    DO_NOT_DISTURB_ON("do_not_disturb_on"),
-    DOCK("dock"),
-    DOMAIN("domain"),
-    DONE("done"),
-    DONE_ALL("done_all"),
-    DONUT_LARGE("donut_large"),
-    DONUT_SMALL("donut_small"),
-    DRAFTS("drafts"),
-    DRAG_HANDLE("drag_handle"),
-    DRIVE_ETA("drive_eta"),
-    DVR("dvr"),
-    EDIT("edit"),
-    EDIT_LOCATION("edit_location"),
-    EJECT("eject"),
-    EMAIL("email"),
-    ENHANCED_ENCRYPTION("enhanced_encryption"),
-    EQUALIZER("equalizer"),
-    ERROR("error"),
-    ERROR_OUTLINE("error_outline"),
-    EURO_SYMBOL("euro_symbol"),
-    EV_STATION("ev_station"),
-    EVENT("event"),
-    EVENT_AVAILABLE("event_available"),
-    EVENT_BUSY("event_busy"),
-    EVENT_NOTE("event_note"),
-    EVENT_SEAT("event_seat"),
-    EXIT_TO_APP("exit_to_app"),
-    EXPAND_LESS("expand_less"),
-    EXPAND_MORE("expand_more"),
-    EXPLICIT("explicit"),
-    EXPLORE("explore"),
-    EXPOSURE("exposure"),
-    EXPOSURE_NEG_1("exposure_neg_1"),
-    EXPOSURE_NEG_2("exposure_neg_2"),
-    EXPOSURE_PLUS_1("exposure_plus_1"),
-    EXPOSURE_PLUS_2("exposure_plus_2"),
-    EXPOSURE_ZERO("exposure_zero"),
-    EXTENSION("extension"),
-    FACE("face"),
-    FAST_FORWARD("fast_forward"),
-    FAST_REWIND("fast_rewind"),
-    FAVORITE("favorite"),
-    FAVORITE_BORDER("favorite_border"),
-    FEATURED_PLAY_LIST("featured_play_list"),
-    FEATURED_VIDEO("featured_video"),
-    FEEDBACK("feedback"),
-    FIBER_DVR("fiber_dvr"),
-    FIBER_MANUAL_RECORD("fiber_manual_record"),
-    FIBER_NEW("fiber_new"),
-    FIBER_PIN("fiber_pin"),
-    FIBER_SMART_RECORD("fiber_smart_record"),
-    FILE_DOWNLOAD("file_download"),
-    FILE_UPLOAD("file_upload"),
-    FILTER("filter"),
-    FILTER_1("filter_1"),
-    FILTER_2("filter_2"),
-    FILTER_3("filter_3"),
-    FILTER_4("filter_4"),
-    FILTER_5("filter_5"),
-    FILTER_6("filter_6"),
-    FILTER_7("filter_7"),
-    FILTER_8("filter_8"),
-    FILTER_9("filter_9"),
-    FILTER_9_PLUS("filter_9_plus"),
-    FILTER_B_AND_W("filter_b_and_w"),
-    FILTER_CENTER_FOCUS("filter_center_focus"),
-    FILTER_DRAMA("filter_drama"),
-    FILTER_FRAMES("filter_frames"),
-    FILTER_HDR("filter_hdr"),
-    FILTER_LIST("filter_list"),
-    FILTER_NONE("filter_none"),
-    FILTER_TILT_SHIFT("filter_tilt_shift"),
-    FILTER_VINTAGE("filter_vintage"),
-    FIND_IN_PAGE("find_in_page"),
-    FIND_REPLACE("find_replace"),
-    FINGERPRINT("fingerprint"),
-    FIRST_PAGE("first_page"),
-    FITNESS_CENTER("fitness_center"),
-    FLAG("flag"),
-    FLARE("flare"),
-    FLASH_AUTO("flash_auto"),
-    FLASH_OFF("flash_off"),
-    FLASH_ON("flash_on"),
-    FLIGHT("flight"),
-    FLIGHT_LAND("flight_land"),
-    FLIGHT_TAKEOFF("flight_takeoff"),
-    FLIP("flip"),
-    FLIP_TO_BACK("flip_to_back"),
-    FLIP_TO_FRONT("flip_to_front"),
-    FOLDER("folder"),
-    FOLDER_OPEN("folder_open"),
-    FOLDER_SHARED("folder_shared"),
-    FOLDER_SPECIAL("folder_special"),
-    FONT_DOWNLOAD("font_download"),
-    FORMAT_ALIGN_CENTER("format_align_center"),
-    FORMAT_ALIGN_JUSTIFY("format_align_justify"),
-    FORMAT_ALIGN_LEFT("format_align_left"),
-    FORMAT_ALIGN_RIGHT("format_align_right"),
-    FORMAT_BOLD("format_bold"),
-    FORMAT_CLEAR("format_clear"),
-    FORMAT_COLOR_FILL("format_color_fill"),
-    FORMAT_COLOR_RESET("format_color_reset"),
-    FORMAT_COLOR_TEXT("format_color_text"),
-    FORMAT_INDENT_DECREASE("format_indent_decrease"),
-    FORMAT_INDENT_INCREASE("format_indent_increase"),
-    FORMAT_ITALIC("format_italic"),
-    FORMAT_LINE_SPACING("format_line_spacing"),
-    FORMAT_LIST_BULLETED("format_list_bulleted"),
-    FORMAT_LIST_NUMBERED("format_list_numbered"),
-    FORMAT_PAINT("format_paint"),
-    FORMAT_QUOTE("format_quote"),
-    FORMAT_SHAPES("format_shapes"),
-    FORMAT_SIZE("format_size"),
-    FORMAT_STRIKETHROUGH("format_strikethrough"),
-    FORMAT_TEXTDIRECTION_L_TO_R("format_textdirection_l_to_r"),
-    FORMAT_TEXTDIRECTION_R_TO_L("format_textdirection_r_to_l"),
-    FORMAT_UNDERLINED("format_underlined"),
-    FORUM("forum"),
-    FORWARD("forward"),
-    FORWARD_10("forward_10"),
-    FORWARD_30("forward_30"),
-    FORWARD_5("forward_5"),
-    FREE_BREAKFAST("free_breakfast"),
-    FULLSCREEN("fullscreen"),
-    FULLSCREEN_EXIT("fullscreen_exit"),
-    FUNCTIONS("functions"),
-    G_TRANSLATE("g_translate"),
-    GAMEPAD("gamepad"),
-    GAMES("games"),
-    GAVEL("gavel"),
-    GESTURE("gesture"),
-    GET_APP("get_app"),
-    GIF("gif"),
-    GOLF_COURSE("golf_course"),
-    GPS_FIXED("gps_fixed"),
-    GPS_NOT_FIXED("gps_not_fixed"),
-    GPS_OFF("gps_off"),
-    GRADE("grade"),
-    GRADIENT("gradient"),
-    GRAIN("grain"),
-    GRAPHIC_EQ("graphic_eq"),
-    GRID_OFF("grid_off"),
-    GRID_ON("grid_on"),
-    GROUP("group"),
-    GROUP_ADD("group_add"),
-    GROUP_WORK("group_work"),
-    HD("hd"),
-    HDR_OFF("hdr_off"),
-    HDR_ON("hdr_on"),
-    HDR_STRONG("hdr_strong"),
-    HDR_WEAK("hdr_weak"),
-    HEADSET("headset"),
-    HEADSET_MIC("headset_mic"),
-    HEALING("healing"),
-    HEARING("hearing"),
-    HELP("help"),
-    HELP_OUTLINE("help_outline"),
-    HIGH_QUALITY("high_quality"),
-    HIGHLIGHT("highlight"),
-    HIGHLIGHT_OFF("highlight_off"),
-    HISTORY("history"),
-    HOME("home"),
-    HOT_TUB("hot_tub"),
-    HOTEL("hotel"),
-    HOURGLASS_EMPTY("hourglass_empty"),
-    HOURGLASS_FULL("hourglass_full"),
-    HTTP("http"),
-    HTTPS("https"),
-    IMAGE("image"),
-    IMAGE_ASPECT_RATIO("image_aspect_ratio"),
-    IMPORT_CONTACTS("import_contacts"),
-    IMPORT_EXPORT("import_export"),
-    IMPORTANT_DEVICES("important_devices"),
-    INBOX("inbox"),
-    INDETERMINATE_CHECK_BOX("indeterminate_check_box"),
-    INFO("info"),
-    INFO_OUTLINE("info_outline"),
-    INPUT("input"),
-    INSERT_CHART("insert_chart"),
-    INSERT_COMMENT("insert_comment"),
-    INSERT_DRIVE_FILE("insert_drive_file"),
-    INSERT_EMOTICON("insert_emoticon"),
-    INSERT_INVITATION("insert_invitation"),
-    INSERT_LINK("insert_link"),
-    INSERT_PHOTO("insert_photo"),
-    INVERT_COLORS("invert_colors"),
-    INVERT_COLORS_OFF("invert_colors_off"),
-    ISO("iso"),
-    KEYBOARD("keyboard"),
-    KEYBOARD_ARROW_DOWN("keyboard_arrow_down"),
-    KEYBOARD_ARROW_LEFT("keyboard_arrow_left"),
-    KEYBOARD_ARROW_RIGHT("keyboard_arrow_right"),
-    KEYBOARD_ARROW_UP("keyboard_arrow_up"),
-    KEYBOARD_BACKSPACE("keyboard_backspace"),
-    KEYBOARD_CAPSLOCK("keyboard_capslock"),
-    KEYBOARD_HIDE("keyboard_hide"),
-    KEYBOARD_RETURN("keyboard_return"),
-    KEYBOARD_TAB("keyboard_tab"),
-    KEYBOARD_VOICE("keyboard_voice"),
-    KITCHEN("kitchen"),
-    LABEL("label"),
-    LABEL_OUTLINE("label_outline"),
-    LANDSCAPE("landscape"),
-    LANGUAGE("language"),
-    LAPTOP("laptop"),
-    LAPTOP_CHROMEBOOK("laptop_chromebook"),
-    LAPTOP_MAC("laptop_mac"),
-    LAPTOP_WINDOWS("laptop_windows"),
-    LAST_PAGE("last_page"),
-    LAUNCH("launch"),
-    LAYERS("layers"),
-    LAYERS_CLEAR("layers_clear"),
-    LEAK_ADD("leak_add"),
-    LEAK_REMOVE("leak_remove"),
-    LENS("lens"),
-    LIBRARY_ADD("library_add"),
-    LIBRARY_BOOKS("library_books"),
-    LIBRARY_MUSIC("library_music"),
-    LIGHTBULB_OUTLINE("lightbulb_outline"),
-    LINE_STYLE("line_style"),
-    LINE_WEIGHT("line_weight"),
-    LINEAR_SCALE("linear_scale"),
-    LINK("link"),
-    LINKED_CAMERA("linked_camera"),
-    LIST("list"),
-    LIVE_HELP("live_help"),
-    LIVE_TV("live_tv"),
-    LOCAL_ACTIVITY("local_activity"),
-    LOCAL_AIRPORT("local_airport"),
-    LOCAL_ATM("local_atm"),
-    LOCAL_BAR("local_bar"),
-    LOCAL_CAFE("local_cafe"),
-    LOCAL_CAR_WASH("local_car_wash"),
-    LOCAL_CONVENIENCE_STORE("local_convenience_store"),
-    LOCAL_DINING("local_dining"),
-    LOCAL_DRINK("local_drink"),
-    LOCAL_FLORIST("local_florist"),
-    LOCAL_GAS_STATION("local_gas_station"),
-    LOCAL_GROCERY_STORE("local_grocery_store"),
-    LOCAL_HOSPITAL("local_hospital"),
-    LOCAL_HOTEL("local_hotel"),
-    LOCAL_LAUNDRY_SERVICE("local_laundry_service"),
-    LOCAL_LIBRARY("local_library"),
-    LOCAL_MALL("local_mall"),
-    LOCAL_MOVIES("local_movies"),
-    LOCAL_OFFER("local_offer"),
-    LOCAL_PARKING("local_parking"),
-    LOCAL_PHARMACY("local_pharmacy"),
-    LOCAL_PHONE("local_phone"),
-    LOCAL_PIZZA("local_pizza"),
-    LOCAL_PLAY("local_play"),
-    LOCAL_POST_OFFICE("local_post_office"),
-    LOCAL_PRINTSHOP("local_printshop"),
-    LOCAL_SEE("local_see"),
-    LOCAL_SHIPPING("local_shipping"),
-    LOCAL_TAXI("local_taxi"),
-    LOCATION_CITY("location_city"),
-    LOCATION_DISABLED("location_disabled"),
-    LOCATION_OFF("location_off"),
-    LOCATION_ON("location_on"),
-    LOCATION_SEARCHING("location_searching"),
-    LOCK("lock"),
-    LOCK_OPEN("lock_open"),
-    LOCK_OUTLINE("lock_outline"),
-    LOOKS("looks"),
-    LOOKS_3("looks_3"),
-    LOOKS_4("looks_4"),
-    LOOKS_5("looks_5"),
-    LOOKS_6("looks_6"),
-    LOOKS_ONE("looks_one"),
-    LOOKS_TWO("looks_two"),
-    LOOP("loop"),
-    LOUPE("loupe"),
-    LOW_PRIORITY("low_priority"),
-    LOYALTY("loyalty"),
-    MAIL("mail"),
-    MAIL_OUTLINE("mail_outline"),
-    MAP("map"),
-    MARK_UNREAD("markunread"),
-    MARK_UNREAD_MAILBOX("markunread_mailbox"),
-    MEMORY("memory"),
-    MENU("menu"),
-    MERGE_TYPE("merge_type"),
-    MESSAGE("message"),
-    MIC("mic"),
-    MIC_NONE("mic_none"),
-    MIC_OFF("mic_off"),
-    MMS("mms"),
-    MODE_COMMENT("mode_comment"),
-    MODE_EDIT("mode_edit"),
-    MONETIZATION_ON("monetization_on"),
-    MONEY_OFF("money_off"),
-    MONOCHROME_PHOTOS("monochrome_photos"),
-    MOOD("mood"),
-    MOOD_BAD("mood_bad"),
-    MORE("more"),
-    MORE_HORIZ("more_horiz"),
-    MORE_VERT("more_vert"),
-    MOTORCYCLE("motorcycle"),
-    MOUSE("mouse"),
-    MOVE_TO_INBOX("move_to_inbox"),
-    MOVIE("movie"),
-    MOVIE_CREATION("movie_creation"),
-    MOVIE_FILTER("movie_filter"),
-    MULTILINE_CHART("multiline_chart"),
-    MUSIC_NOTE("music_note"),
-    MUSIC_VIDEO("music_video"),
-    MY_LOCATION("my_location"),
-    NATURE("nature"),
-    NATURE_PEOPLE("nature_people"),
-    NAVIGATE_BEFORE("navigate_before"),
-    NAVIGATE_NEXT("navigate_next"),
-    NAVIGATION("navigation"),
-    NEAR_ME("near_me"),
-    NETWORK_CELL("network_cell"),
-    NETWORK_CHECK("network_check"),
-    NETWORK_LOCKED("network_locked"),
-    NETWORK_WIFI("network_wifi"),
-    NEW_RELEASES("new_releases"),
-    NEXT_WEEK("next_week"),
-    NFC("nfc"),
-    NO_ENCRYPTION("no_encryption"),
-    NO_SIM("no_sim"),
-    NOT_INTERESTED("not_interested"),
-    NOTE("note"),
-    NOTE_ADD("note_add"),
-    NOTIFICATIONS("notifications"),
-    NOTIFICATIONS_ACTIVE("notifications_active"),
-    NOTIFICATIONS_NONE("notifications_none"),
-    NOTIFICATIONS_OFF("notifications_off"),
-    NOTIFICATIONS_PAUSED("notifications_paused"),
-    OFFLINE_PIN("offline_pin"),
-    ON_DEMAND_VIDEO("ondemand_video"),
-    OPACITY("opacity"),
-    OPEN_IN_BROWSER("open_in_browser"),
-    OPEN_IN_NEW("open_in_new"),
-    OPEN_WITH("open_with"),
-    PAGES("pages"),
-    PAGE_VIEW("pageview"),
-    PALETTE("palette"),
-    PAN_TOOL("pan_tool"),
-    PANORAMA("panorama"),
-    PANORAMA_FISH_EYE("panorama_fish_eye"),
-    PANORAMA_HORIZONTAL("panorama_horizontal"),
-    PANORAMA_VERTICAL("panorama_vertical"),
-    PANORAMA_WIDE_ANGLE("panorama_wide_angle"),
-    PARTY_MODE("party_mode"),
-    PAUSE("pause"),
-    PAUSE_CIRCLE_FILLED("pause_circle_filled"),
-    PAUSE_CIRCLE_OUTLINE("pause_circle_outline"),
-    PAYMENT("payment"),
-    PEOPLE("people"),
-    PEOPLE_OUTLINE("people_outline"),
-    PERM_CAMERA_MIC("perm_camera_mic"),
-    PERM_CONTACT_CALENDAR("perm_contact_calendar"),
-    PERM_DATA_SETTING("perm_data_setting"),
-    PERM_DEVICE_INFORMATION("perm_device_information"),
-    PERM_IDENTITY("perm_identity"),
-    PERM_MEDIA("perm_media"),
-    PERM_PHONE_MSG("perm_phone_msg"),
-    PERM_SCAN_WIFI("perm_scan_wifi"),
-    PERSON("person"),
-    PERSON_ADD("person_add"),
-    PERSON_OUTLINE("person_outline"),
-    PERSON_PIN("person_pin"),
-    PERSON_PIN_CIRCLE("person_pin_circle"),
-    PERSONAL_VIDEO("personal_video"),
-    PETS("pets"),
-    PHONE("phone"),
-    PHONE_ANDROID("phone_android"),
-    PHONE_BLUETOOTH_SPEAKER("phone_bluetooth_speaker"),
-    PHONE_FORWARDED("phone_forwarded"),
-    PHONE_IN_TALK("phone_in_talk"),
-    PHONE_IPHONE("phone_iphone"),
-    PHONE_LOCKED("phone_locked"),
-    PHONE_MISSED("phone_missed"),
-    PHONE_PAUSED("phone_paused"),
-    PHONE_LINK("phonelink"),
-    PHONE_LINK_ERASE("phonelink_erase"),
-    PHONE_LINK_LOCK("phonelink_lock"),
-    PHONE_LINK_OFF("phonelink_off"),
-    PHONE_LINK_RING("phonelink_ring"),
-    PHONE_LINK_SETUP("phonelink_setup"),
-    PHOTO("photo"),
-    PHOTO_ALBUM("photo_album"),
-    PHOTO_CAMERA("photo_camera"),
-    PHOTO_FILTER("photo_filter"),
-    PHOTO_LIBRARY("photo_library"),
-    PHOTO_SIZE_SELECT_ACTUAL("photo_size_select_actual"),
-    PHOTO_SIZE_SELECT_LARGE("photo_size_select_large"),
-    PHOTO_SIZE_SELECT_SMALL("photo_size_select_small"),
-    PICTURE_AS_PDF("picture_as_pdf"),
-    PICTURE_IN_PICTURE("picture_in_picture"),
-    PICTURE_IN_PICTURE_ALT("picture_in_picture_alt"),
-    PIE_CHART("pie_chart"),
-    PIE_CHART_OUTLINED("pie_chart_outlined"),
-    PIN_DROP("pin_drop"),
-    PLACE("place"),
-    PLAY_ARROW("play_arrow"),
-    PLAY_CIRCLE_FILLED("play_circle_filled"),
-    PLAY_CIRCLE_OUTLINE("play_circle_outline"),
-    PLAY_FOR_WORK("play_for_work"),
-    PLAYLIST_ADD("playlist_add"),
-    PLAYLIST_ADD_CHECK("playlist_add_check"),
-    PLAYLIST_PLAY("playlist_play"),
-    PLUS_ONE("plus_one"),
-    POLL("poll"),
-    POLYMER("polymer"),
-    POOL("pool"),
-    PORTABLE_WIFI_OFF("portable_wifi_off"),
-    PORTRAIT("portrait"),
-    POWER("power"),
-    POWER_INPUT("power_input"),
-    POWER_SETTINGS_NEW("power_settings_new"),
-    PREGNANT_WOMAN("pregnant_woman"),
-    PRESENT_TO_ALL("present_to_all"),
-    PRINT("print"),
-    PRIORITY_HIGH("priority_high"),
-    PUBLIC("public"),
-    PUBLISH("publish"),
-    QUERY_BUILDER("query_builder"),
-    QUESTION_ANSWER("question_answer"),
-    QUEUE("queue"),
-    QUEUE_MUSIC("queue_music"),
-    QUEUE_PLAY_NEXT("queue_play_next"),
-    RADIO("radio"),
-    RADIO_BUTTON_CHECKED("radio_button_checked"),
-    RADIO_BUTTON_UNCHECKED("radio_button_unchecked"),
-    RATE_REVIEW("rate_review"),
-    RECEIPT("receipt"),
-    RECENT_ACTORS("recent_actors"),
-    RECORD_VOICE_OVER("record_voice_over"),
-    REDEEM("redeem"),
-    REDO("redo"),
-    REFRESH("refresh"),
-    REMOVE("remove"),
-    REMOVE_CIRCLE("remove_circle"),
-    REMOVE_CIRCLE_OUTLINE("remove_circle_outline"),
-    REMOVE_FROM_QUEUE("remove_from_queue"),
-    REMOVE_RED_EYE("remove_red_eye"),
-    REMOVE_SHOPPING_CART("remove_shopping_cart"),
-    REORDER("reorder"),
-    REPEAT("repeat"),
-    REPEAT_ONE("repeat_one"),
-    REPLAY("replay"),
-    REPLAY_10("replay_10"),
-    REPLAY_30("replay_30"),
-    REPLAY_5("replay_5"),
-    REPLY("reply"),
-    REPLY_ALL("reply_all"),
-    REPORT("report"),
-    REPORT_PROBLEM("report_problem"),
-    RESTAURANT("restaurant"),
-    RESTAURANT_MENU("restaurant_menu"),
-    RESTORE("restore"),
-    RESTORE_PAGE("restore_page"),
-    RING_VOLUME("ring_volume"),
-    ROOM("room"),
-    ROOM_SERVICE("room_service"),
-    ROTATE_90_DEGREES_CCW("rotate_90_degrees_ccw"),
-    ROTATE_LEFT("rotate_left"),
-    ROTATE_RIGHT("rotate_right"),
-    ROUNDED_CORNER("rounded_corner"),
-    ROUTER("router"),
-    ROWING("rowing"),
-    RSS_FEED("rss_feed"),
-    RV_HOOKUP("rv_hookup"),
-    SATELLITE("satellite"),
-    SAVE("save"),
-    SCANNER("scanner"),
-    SCHEDULE("schedule"),
-    SCHOOL("school"),
-    SCREEN_LOCK_LANDSCAPE("screen_lock_landscape"),
-    SCREEN_LOCK_PORTRAIT("screen_lock_portrait"),
-    SCREEN_LOCK_ROTATION("screen_lock_rotation"),
-    SCREEN_ROTATION("screen_rotation"),
-    SCREEN_SHARE("screen_share"),
-    SD_CARD("sd_card"),
-    SD_STORAGE("sd_storage"),
-    SEARCH("search"),
-    SECURITY("security"),
-    SELECT_ALL("select_all"),
-    SEND("send"),
-    SENTIMENT_DISSATISFIED("sentiment_dissatisfied"),
-    SENTIMENT_NEUTRAL("sentiment_neutral"),
-    SENTIMENT_SATISFIED("sentiment_satisfied"),
-    SENTIMENT_VERY_DISSATISFIED("sentiment_very_dissatisfied"),
-    SENTIMENT_VERY_SATISFIED("sentiment_very_satisfied"),
-    SETTINGS("settings"),
-    SETTINGS_APPLICATIONS("settings_applications"),
-    SETTINGS_BACKUP_RESTORE("settings_backup_restore"),
-    SETTINGS_BLUETOOTH("settings_bluetooth"),
-    SETTINGS_BRIGHTNESS("settings_brightness"),
-    SETTINGS_CELL("settings_cell"),
-    SETTINGS_ETHERNET("settings_ethernet"),
-    SETTINGS_INPUT_ANTENNA("settings_input_antenna"),
-    SETTINGS_INPUT_COMPONENT("settings_input_component"),
-    SETTINGS_INPUT_COMPOSITE("settings_input_composite"),
-    SETTINGS_INPUT_HDMI("settings_input_hdmi"),
-    SETTINGS_INPUT_SVIDEO("settings_input_svideo"),
-    SETTINGS_OVERSCAN("settings_overscan"),
-    SETTINGS_PHONE("settings_phone"),
-    SETTINGS_POWER("settings_power"),
-    SETTINGS_REMOTE("settings_remote"),
-    SETTINGS_SYSTEM_DAYDREAM("settings_system_daydream"),
-    SETTINGS_VOICE("settings_voice"),
-    SHARE("share"),
-    SHOP("shop"),
-    SHOP_TWO("shop_two"),
-    SHOPPING_BASKET("shopping_basket"),
-    SHOPPING_CART("shopping_cart"),
-    SHORT_TEXT("short_text"),
-    SHOW_CHART("show_chart"),
-    SHUFFLE("shuffle"),
-    SIGNAL_CELLULAR_4_BAR("signal_cellular_4_bar"),
-    SIGNAL_CELLULAR_CONNECTED_NO_INTERNET_4_BAR("signal_cellular_connected_no_internet_4_bar"),
-    SIGNAL_CELLULAR_NO_SIM("signal_cellular_no_sim"),
-    SIGNAL_CELLULAR_NULL("signal_cellular_null"),
-    SIGNAL_CELLULAR_OFF("signal_cellular_off"),
-    SIGNAL_WIFI_4_BAR("signal_wifi_4_bar"),
-    SIGNAL_WIFI_4_BAR_LOCK("signal_wifi_4_bar_lock"),
-    SIGNAL_WIFI_OFF("signal_wifi_off"),
-    SIM_CARD("sim_card"),
-    SIM_CARD_ALERT("sim_card_alert"),
-    SKIP_NEXT("skip_next"),
-    SKIP_PREVIOUS("skip_previous"),
-    SLIDESHOW("slideshow"),
-    SLOW_MOTION_VIDEO("slow_motion_video"),
-    SMARTPHONE("smartphone"),
-    SMOKE_FREE("smoke_free"),
-    SMOKING_ROOMS("smoking_rooms"),
-    SMS("sms"),
-    SMS_FAILED("sms_failed"),
-    SNOOZE("snooze"),
-    SORT("sort"),
-    SORT_BY_ALPHA("sort_by_alpha"),
-    SPA("spa"),
-    SPACE_BAR("space_bar"),
-    SPEAKER("speaker"),
-    SPEAKER_GROUP("speaker_group"),
-    SPEAKER_NOTES("speaker_notes"),
-    SPEAKER_NOTES_OFF("speaker_notes_off"),
-    SPEAKER_PHONE("speaker_phone"),
-    SPELLCHECK("spellcheck"),
-    STAR("star"),
-    STAR_BORDER("star_border"),
-    STAR_HALF("star_half"),
-    STARS("stars"),
-    STAY_CURRENT_LANDSCAPE("stay_current_landscape"),
-    STAY_CURRENT_PORTRAIT("stay_current_portrait"),
-    STAY_PRIMARY_LANDSCAPE("stay_primary_landscape"),
-    STAY_PRIMARY_PORTRAIT("stay_primary_portrait"),
-    STOP("stop"),
-    STOP_SCREEN_SHARE("stop_screen_share"),
-    STORAGE("storage"),
-    STORE("store"),
-    STORE_MALL_DIRECTORY("store_mall_directory"),
-    STRAIGHTEN("straighten"),
-    STREET_VIEW("streetview"),
-    STRIKETHROUGH_S("strikethrough_s"),
-    STYLE("style"),
-    SUBDIRECTORY_ARROW_LEFT("subdirectory_arrow_left"),
-    SUBDIRECTORY_ARROW_RIGHT("subdirectory_arrow_right"),
-    SUBJECT("subject"),
-    SUBSCRIPTIONS("subscriptions"),
-    SUBTITLES("subtitles"),
-    SUBWAY("subway"),
-    SUPERVISOR_ACCOUNT("supervisor_account"),
-    SURROUND_SOUND("surround_sound"),
-    SWAP_CALLS("swap_calls"),
-    SWAP_HORIZ("swap_horiz"),
-    SWAP_VERT("swap_vert"),
-    SWAP_VERTICAL_CIRCLE("swap_vertical_circle"),
-    SWITCH_CAMERA("switch_camera"),
-    SWITCH_VIDEO("switch_video"),
-    SYNC("sync"),
-    SYNC_DISABLED("sync_disabled"),
-    SYNC_PROBLEM("sync_problem"),
-    SYSTEM_UPDATE("system_update"),
-    SYSTEM_UPDATE_ALT("system_update_alt"),
-    TAB("tab"),
-    TAB_UNSELECTED("tab_unselected"),
-    TABLET("tablet"),
-    TABLET_ANDROID("tablet_android"),
-    TABLET_MAC("tablet_mac"),
-    TAG_FACES("tag_faces"),
-    TAP_AND_PLAY("tap_and_play"),
-    TERRAIN("terrain"),
-    TEXT_FIELDS("text_fields"),
-    TEXT_FORMAT("text_format"),
-    TEXT_SMS("textsms"),
-    TEXTURE("texture"),
-    THEATERS("theaters"),
-    THUMB_DOWN("thumb_down"),
-    THUMB_UP("thumb_up"),
-    THUMBS_UP_DOWN("thumbs_up_down"),
-    TIME_TO_LEAVE("time_to_leave"),
-    TIME_LAPSE("timelapse"),
-    TIMELINE("timeline"),
-    TIMER("timer"),
-    TIMER_10("timer_10"),
-    TIMER_3("timer_3"),
-    TIMER_OFF("timer_off"),
-    TITLE("title"),
-    TOC("toc"),
-    TODAY("today"),
-    TOLL("toll"),
-    TONALITY("tonality"),
-    TOUCH_APP("touch_app"),
-    TOYS("toys"),
-    TRACK_CHANGES("track_changes"),
-    TRAFFIC("traffic"),
-    TRAIN("train"),
-    TRAM("tram"),
-    TRANSFER_WITHIN_A_STATION("transfer_within_a_station"),
-    TRANSFORM("transform"),
-    TRANSLATE("translate"),
-    TRENDING_DOWN("trending_down"),
-    TRENDING_FLAT("trending_flat"),
-    TRENDING_UP("trending_up"),
-    TUNE("tune"),
-    TURNED_IN("turned_in"),
-    TURNED_IN_NOT("turned_in_not"),
-    TV("tv"),
-    UNARCHIVE("unarchive"),
-    UNDO("undo"),
-    UNFOLD_LESS("unfold_less"),
-    UNFOLD_MORE("unfold_more"),
-    UPDATE("update"),
-    USB("usb"),
-    VERIFIED_USER("verified_user"),
-    VERTICAL_ALIGN_BOTTOM("vertical_align_bottom"),
-    VERTICAL_ALIGN_CENTER("vertical_align_center"),
-    VERTICAL_ALIGN_TOP("vertical_align_top"),
-    VIBRATION("vibration"),
-    VIDEO_CALL("video_call"),
-    VIDEO_LABEL("video_label"),
-    VIDEO_LIBRARY("video_library"),
-    VIDEO_CAM("videocam"),
-    VIDEO_CAM_OFF("videocam_off"),
-    VIDEO_GAME_ASSET("videogame_asset"),
-    VIEW_AGENDA("view_agenda"),
-    VIEW_ARRAY("view_array"),
-    VIEW_CAROUSEL("view_carousel"),
-    VIEW_COLUMN("view_column"),
-    VIEW_COMFY("view_comfy"),
-    VIEW_COMPACT("view_compact"),
-    VIEW_DAY("view_day"),
-    VIEW_HEADLINE("view_headline"),
-    VIEW_LIST("view_list"),
-    VIEW_MODULE("view_module"),
-    VIEW_QUILT("view_quilt"),
-    VIEW_STREAM("view_stream"),
-    VIEW_WEEK("view_week"),
-    VIGNETTE("vignette"),
-    VISIBILITY("visibility"),
-    VISIBILITY_OFF("visibility_off"),
-    VOICE_CHAT("voice_chat"),
-    VOICE_MAIL("voicemail"),
-    VOLUME_DOWN("volume_down"),
-    VOLUME_MUTE("volume_mute"),
-    VOLUME_OFF("volume_off"),
-    VOLUME_UP("volume_up"),
-    VPN_KEY("vpn_key"),
-    VPN_LOCK("vpn_lock"),
-    WALLPAPER("wallpaper"),
-    WARNING("warning"),
-    WATCH("watch"),
-    WATCH_LATER("watch_later"),
-    WB_AUTO("wb_auto"),
-    WB_CLOUDY("wb_cloudy"),
-    WB_INCANDESCENT("wb_incandescent"),
-    WB_IRIDESCENT("wb_iridescent"),
-    WB_SUNNY("wb_sunny"),
-    WC("wc"),
-    WEB("web"),
-    WEB_ASSET("web_asset"),
-    WEEKEND("weekend"),
-    WHATSHOT("whatshot"),
-    WIDGETS("widgets"),
-    WIFI("wifi"),
-    WIFI_LOCK("wifi_lock"),
-    WIFI_TETHERING("wifi_tethering"),
-    WORK("work"),
-    WRAP_TEXT("wrap_text"),
-    YOUTUBE_SEARCHED_FOR("youtube_searched_for"),
-    ZOOM_IN("zoom_in"),
-    ZOOM_OUT("zoom_out"),
-    ZOOM_OUT_MAP("zoom_out_map"),
-    ;
+@IconLibrary(
+		name = "material",
+		encoder = MaterialIconEncoder.class,
+		decoder = MaterialIconDecoder.class,
+		loader = MaterialIconLoader.class,
+		defaultStyleSupplier = MaterialIconDefaultIconSupplier.class
+)
+public class MaterialIcon implements Icon<MaterialIcon, MaterialIconStyle> {
 
-    private String iconName;
+	private static final Map<String, MaterialIcon> ICONS_BY_NAME = new HashMap<>();
 
-    MaterialIcon(String iconName) {
-        this.iconName = iconName;
-    }
+	public static final MaterialIcon ROTATION_3D = create("3d_rotation");
+	public static final MaterialIcon AC_UNIT = create("ac_unit");
+	public static final MaterialIcon ACCESS_ALARM = create("access_alarm");
+	public static final MaterialIcon ACCESS_ALARMS = create("access_alarms");
+	public static final MaterialIcon ACCESS_TIME = create("access_time");
+	public static final MaterialIcon ACCESSIBILITY = create("accessibility");
+	public static final MaterialIcon ACCESSIBLE = create("accessible");
+	public static final MaterialIcon ACCOUNT_BALANCE = create("account_balance");
+	public static final MaterialIcon ACCOUNT_BALANCE_WALLET = create("account_balance_wallet");
+	public static final MaterialIcon ACCOUNT_BOX = create("account_box");
+	public static final MaterialIcon ACCOUNT_CIRCLE = create("account_circle");
+	public static final MaterialIcon ADB = create("adb");
+	public static final MaterialIcon ADD = create("add");
+	public static final MaterialIcon ADD_A_PHOTO = create("add_a_photo");
+	public static final MaterialIcon ADD_ALARM = create("add_alarm");
+	public static final MaterialIcon ADD_ALERT = create("add_alert");
+	public static final MaterialIcon ADD_BOX = create("add_box");
+	public static final MaterialIcon ADD_CIRCLE = create("add_circle");
+	public static final MaterialIcon ADD_CIRCLE_OUTLINE = create("add_circle_outline");
+	public static final MaterialIcon ADD_LOCATION = create("add_location");
+	public static final MaterialIcon ADD_SHOPPING_CART = create("add_shopping_cart");
+	public static final MaterialIcon ADD_TO_PHOTOS = create("add_to_photos");
+	public static final MaterialIcon ADD_TO_QUEUE = create("add_to_queue");
+	public static final MaterialIcon ADJUST = create("adjust");
+	public static final MaterialIcon AIRLINE_SEAT_FLAT = create("airline_seat_flat");
+	public static final MaterialIcon AIRLINE_SEAT_FLAT_ANGLED = create("airline_seat_flat_angled");
+	public static final MaterialIcon AIRLINE_SEAT_INDIVIDUAL_SUITE = create("airline_seat_individual_suite");
+	public static final MaterialIcon AIRLINE_SEAT_LEGROOM_EXTRA = create("airline_seat_legroom_extra");
+	public static final MaterialIcon AIRLINE_SEAT_LEGROOM_NORMAL = create("airline_seat_legroom_normal");
+	public static final MaterialIcon AIRLINE_SEAT_LEGROOM_REDUCED = create("airline_seat_legroom_reduced");
+	public static final MaterialIcon AIRLINE_SEAT_RECLINE_EXTRA = create("airline_seat_recline_extra");
+	public static final MaterialIcon AIRLINE_SEAT_RECLINE_NORMAL = create("airline_seat_recline_normal");
+	public static final MaterialIcon AIRPLANE_MODE_ACTIVE = create("airplanemode_active");
+	public static final MaterialIcon AIRPLANE_MODE_INACTIVE = create("airplanemode_inactive");
+	public static final MaterialIcon AIRPLAY = create("airplay");
+	public static final MaterialIcon AIRPORT_SHUTTLE = create("airport_shuttle");
+	public static final MaterialIcon ALARM = create("alarm");
+	public static final MaterialIcon ALARM_ADD = create("alarm_add");
+	public static final MaterialIcon ALARM_OFF = create("alarm_off");
+	public static final MaterialIcon ALARM_ON = create("alarm_on");
+	public static final MaterialIcon ALBUM = create("album");
+	public static final MaterialIcon ALL_INCLUSIVE = create("all_inclusive");
+	public static final MaterialIcon ALL_OUT = create("all_out");
+	public static final MaterialIcon ANDROID = create("android");
+	public static final MaterialIcon ANNOUNCEMENT = create("announcement");
+	public static final MaterialIcon APPS = create("apps");
+	public static final MaterialIcon ARCHIVE = create("archive");
+	public static final MaterialIcon ARROW_BACK = create("arrow_back");
+	public static final MaterialIcon ARROW_DOWNWARD = create("arrow_downward");
+	public static final MaterialIcon ARROW_DROP_DOWN = create("arrow_drop_down");
+	public static final MaterialIcon ARROW_DROP_DOWN_CIRCLE = create("arrow_drop_down_circle");
+	public static final MaterialIcon ARROW_DROP_UP = create("arrow_drop_up");
+	public static final MaterialIcon ARROW_FORWARD = create("arrow_forward");
+	public static final MaterialIcon ARROW_UPWARD = create("arrow_upward");
+	public static final MaterialIcon ART_TRACK = create("art_track");
+	public static final MaterialIcon ASPECT_RATIO = create("aspect_ratio");
+	public static final MaterialIcon ASSESSMENT = create("assessment");
+	public static final MaterialIcon ASSIGNMENT = create("assignment");
+	public static final MaterialIcon ASSIGNMENT_IND = create("assignment_ind");
+	public static final MaterialIcon ASSIGNMENT_LATE = create("assignment_late");
+	public static final MaterialIcon ASSIGNMENT_RETURN = create("assignment_return");
+	public static final MaterialIcon ASSIGNMENT_RETURNED = create("assignment_returned");
+	public static final MaterialIcon ASSIGNMENT_TURNED_IN = create("assignment_turned_in");
+	public static final MaterialIcon ASSISTANT = create("assistant");
+	public static final MaterialIcon ASSISTANT_PHOTO = create("assistant_photo");
+	public static final MaterialIcon ATTACH_FILE = create("attach_file");
+	public static final MaterialIcon ATTACH_MONEY = create("attach_money");
+	public static final MaterialIcon ATTACHMENT = create("attachment");
+	public static final MaterialIcon AUDIO_TRACK = create("audiotrack");
+	public static final MaterialIcon AUTO_RENEW = create("autorenew");
+	public static final MaterialIcon AV_TIMER = create("av_timer");
+	public static final MaterialIcon BACKSPACE = create("backspace");
+	public static final MaterialIcon BACKUP = create("backup");
+	public static final MaterialIcon BATTERY_ALERT = create("battery_alert");
+	public static final MaterialIcon BATTERY_CHARGING_FULL = create("battery_charging_full");
+	public static final MaterialIcon BATTERY_FULL = create("battery_full");
+	public static final MaterialIcon BATTERY_STD = create("battery_std");
+	public static final MaterialIcon BATTERY_UNKNOWN = create("battery_unknown");
+	public static final MaterialIcon BEACH_ACCESS = create("beach_access");
+	public static final MaterialIcon BEEN_HERE = create("beenhere");
+	public static final MaterialIcon BLOCK = create("block");
+	public static final MaterialIcon BLUETOOTH = create("bluetooth");
+	public static final MaterialIcon BLUETOOTH_AUDIO = create("bluetooth_audio");
+	public static final MaterialIcon BLUETOOTH_CONNECTED = create("bluetooth_connected");
+	public static final MaterialIcon BLUETOOTH_DISABLED = create("bluetooth_disabled");
+	public static final MaterialIcon BLUETOOTH_SEARCHING = create("bluetooth_searching");
+	public static final MaterialIcon BLUR_CIRCULAR = create("blur_circular");
+	public static final MaterialIcon BLUR_LINEAR = create("blur_linear");
+	public static final MaterialIcon BLUR_OFF = create("blur_off");
+	public static final MaterialIcon BLUR_ON = create("blur_on");
+	public static final MaterialIcon BOOK = create("book");
+	public static final MaterialIcon BOOKMARK = create("bookmark");
+	public static final MaterialIcon BOOKMARK_BORDER = create("bookmark_border");
+	public static final MaterialIcon BORDER_ALL = create("border_all");
+	public static final MaterialIcon BORDER_BOTTOM = create("border_bottom");
+	public static final MaterialIcon BORDER_CLEAR = create("border_clear");
+	public static final MaterialIcon BORDER_COLOR = create("border_color");
+	public static final MaterialIcon BORDER_HORIZONTAL = create("border_horizontal");
+	public static final MaterialIcon BORDER_INNER = create("border_inner");
+	public static final MaterialIcon BORDER_LEFT = create("border_left");
+	public static final MaterialIcon BORDER_OUTER = create("border_outer");
+	public static final MaterialIcon BORDER_RIGHT = create("border_right");
+	public static final MaterialIcon BORDER_STYLE = create("border_style");
+	public static final MaterialIcon BORDER_TOP = create("border_top");
+	public static final MaterialIcon BORDER_VERTICAL = create("border_vertical");
+	public static final MaterialIcon BRANDING_WATERMARK = create("branding_watermark");
+	public static final MaterialIcon BRIGHTNESS_1 = create("brightness_1");
+	public static final MaterialIcon BRIGHTNESS_2 = create("brightness_2");
+	public static final MaterialIcon BRIGHTNESS_3 = create("brightness_3");
+	public static final MaterialIcon BRIGHTNESS_4 = create("brightness_4");
+	public static final MaterialIcon BRIGHTNESS_5 = create("brightness_5");
+	public static final MaterialIcon BRIGHTNESS_6 = create("brightness_6");
+	public static final MaterialIcon BRIGHTNESS_7 = create("brightness_7");
+	public static final MaterialIcon BRIGHTNESS_AUTO = create("brightness_auto");
+	public static final MaterialIcon BRIGHTNESS_HIGH = create("brightness_high");
+	public static final MaterialIcon BRIGHTNESS_LOW = create("brightness_low");
+	public static final MaterialIcon BRIGHTNESS_MEDIUM = create("brightness_medium");
+	public static final MaterialIcon BROKEN_IMAGE = create("broken_image");
+	public static final MaterialIcon BRUSH = create("brush");
+	public static final MaterialIcon BUBBLE_CHART = create("bubble_chart");
+	public static final MaterialIcon BUG_REPORT = create("bug_report");
+	public static final MaterialIcon BUILD = create("build");
+	public static final MaterialIcon BURST_MODE = create("burst_mode");
+	public static final MaterialIcon BUSINESS = create("business");
+	public static final MaterialIcon BUSINESS_CENTER = create("business_center");
+	public static final MaterialIcon CACHED = create("cached");
+	public static final MaterialIcon CAKE = create("cake");
+	public static final MaterialIcon CALL = create("call");
+	public static final MaterialIcon CALL_END = create("call_end");
+	public static final MaterialIcon CALL_MADE = create("call_made");
+	public static final MaterialIcon CALL_MERGE = create("call_merge");
+	public static final MaterialIcon CALL_MISSED = create("call_missed");
+	public static final MaterialIcon CALL_MISSED_OUTGOING = create("call_missed_outgoing");
+	public static final MaterialIcon CALL_RECEIVED = create("call_received");
+	public static final MaterialIcon CALL_SPLIT = create("call_split");
+	public static final MaterialIcon CALL_TO_ACTION = create("call_to_action");
+	public static final MaterialIcon CAMERA = create("camera");
+	public static final MaterialIcon CAMERA_ALT = create("camera_alt");
+	public static final MaterialIcon CAMERA_ENHANCE = create("camera_enhance");
+	public static final MaterialIcon CAMERA_FRONT = create("camera_front");
+	public static final MaterialIcon CAMERA_REAR = create("camera_rear");
+	public static final MaterialIcon CAMERA_ROLL = create("camera_roll");
+	public static final MaterialIcon CANCEL = create("cancel");
+	public static final MaterialIcon CARD_GIFTCARD = create("card_giftcard");
+	public static final MaterialIcon CARD_MEMBERSHIP = create("card_membership");
+	public static final MaterialIcon CARD_TRAVEL = create("card_travel");
+	public static final MaterialIcon CASINO = create("casino");
+	public static final MaterialIcon CAST = create("cast");
+	public static final MaterialIcon CAST_CONNECTED = create("cast_connected");
+	public static final MaterialIcon CENTER_FOCUS_STRONG = create("center_focus_strong");
+	public static final MaterialIcon CENTER_FOCUS_WEAK = create("center_focus_weak");
+	public static final MaterialIcon CHANGE_HISTORY = create("change_history");
+	public static final MaterialIcon CHAT = create("chat");
+	public static final MaterialIcon CHAT_BUBBLE = create("chat_bubble");
+	public static final MaterialIcon CHAT_BUBBLE_OUTLINE = create("chat_bubble_outline");
+	public static final MaterialIcon CHECK = create("check");
+	public static final MaterialIcon CHECK_BOX = create("check_box");
+	public static final MaterialIcon CHECK_BOX_OUTLINE_BLANK = create("check_box_outline_blank");
+	public static final MaterialIcon CHECK_CIRCLE = create("check_circle");
+	public static final MaterialIcon CHEVRON_LEFT = create("chevron_left");
+	public static final MaterialIcon CHEVRON_RIGHT = create("chevron_right");
+	public static final MaterialIcon CHILD_CARE = create("child_care");
+	public static final MaterialIcon CHILD_FRIENDLY = create("child_friendly");
+	public static final MaterialIcon CHROME_READER_MODE = create("chrome_reader_mode");
+	public static final MaterialIcon CLASS = create("class");
+	public static final MaterialIcon CLEAR = create("clear");
+	public static final MaterialIcon CLEAR_ALL = create("clear_all");
+	public static final MaterialIcon CLOSE = create("close");
+	public static final MaterialIcon CLOSED_CAPTION = create("closed_caption");
+	public static final MaterialIcon CLOUD = create("cloud");
+	public static final MaterialIcon CLOUD_CIRCLE = create("cloud_circle");
+	public static final MaterialIcon CLOUD_DONE = create("cloud_done");
+	public static final MaterialIcon CLOUD_DOWNLOAD = create("cloud_download");
+	public static final MaterialIcon CLOUD_OFF = create("cloud_off");
+	public static final MaterialIcon CLOUD_QUEUE = create("cloud_queue");
+	public static final MaterialIcon CLOUD_UPLOAD = create("cloud_upload");
+	public static final MaterialIcon CODE = create("code");
+	public static final MaterialIcon COLLECTIONS = create("collections");
+	public static final MaterialIcon COLLECTIONS_BOOKMARK = create("collections_bookmark");
+	public static final MaterialIcon COLOR_LENS = create("color_lens");
+	public static final MaterialIcon COLORIZE = create("colorize");
+	public static final MaterialIcon COMMENT = create("comment");
+	public static final MaterialIcon COMPARE = create("compare");
+	public static final MaterialIcon COMPARE_ARROWS = create("compare_arrows");
+	public static final MaterialIcon COMPUTER = create("computer");
+	public static final MaterialIcon CONFIRMATION_NUMBER = create("confirmation_number");
+	public static final MaterialIcon CONTACT_MAIL = create("contact_mail");
+	public static final MaterialIcon CONTACT_PHONE = create("contact_phone");
+	public static final MaterialIcon CONTACTS = create("contacts");
+	public static final MaterialIcon CONTENT_COPY = create("content_copy");
+	public static final MaterialIcon CONTENT_CUT = create("content_cut");
+	public static final MaterialIcon CONTENT_PASTE = create("content_paste");
+	public static final MaterialIcon CONTROL_POINT = create("control_point");
+	public static final MaterialIcon CONTROL_POINT_DUPLICATE = create("control_point_duplicate");
+	public static final MaterialIcon COPYRIGHT = create("copyright");
+	public static final MaterialIcon CREATE = create("create");
+	public static final MaterialIcon CREATE_NEW_FOLDER = create("create_new_folder");
+	public static final MaterialIcon CREDIT_CARD = create("credit_card");
+	public static final MaterialIcon CROP = create("crop");
+	public static final MaterialIcon CROP_16_9 = create("crop_16_9");
+	public static final MaterialIcon CROP_3_2 = create("crop_3_2");
+	public static final MaterialIcon CROP_5_4 = create("crop_5_4");
+	public static final MaterialIcon CROP_7_5 = create("crop_7_5");
+	public static final MaterialIcon CROP_DIN = create("crop_din");
+	public static final MaterialIcon CROP_FREE = create("crop_free");
+	public static final MaterialIcon CROP_LANDSCAPE = create("crop_landscape");
+	public static final MaterialIcon CROP_ORIGINAL = create("crop_original");
+	public static final MaterialIcon CROP_PORTRAIT = create("crop_portrait");
+	public static final MaterialIcon CROP_ROTATE = create("crop_rotate");
+	public static final MaterialIcon CROP_SQUARE = create("crop_square");
+	public static final MaterialIcon DASHBOARD = create("dashboard");
+	public static final MaterialIcon DATA_USAGE = create("data_usage");
+	public static final MaterialIcon DATE_RANGE = create("date_range");
+	public static final MaterialIcon DEHAZE = create("dehaze");
+	public static final MaterialIcon DELETE = create("delete");
+	public static final MaterialIcon DELETE_FOREVER = create("delete_forever");
+	public static final MaterialIcon DELETE_SWEEP = create("delete_sweep");
+	public static final MaterialIcon DESCRIPTION = create("description");
+	public static final MaterialIcon DESKTOP_MAC = create("desktop_mac");
+	public static final MaterialIcon DESKTOP_WINDOWS = create("desktop_windows");
+	public static final MaterialIcon DETAILS = create("details");
+	public static final MaterialIcon DEVELOPER_BOARD = create("developer_board");
+	public static final MaterialIcon DEVELOPER_MODE = create("developer_mode");
+	public static final MaterialIcon DEVICE_HUB = create("device_hub");
+	public static final MaterialIcon DEVICES = create("devices");
+	public static final MaterialIcon DEVICES_OTHER = create("devices_other");
+	public static final MaterialIcon DIALER_SIP = create("dialer_sip");
+	public static final MaterialIcon DIALPAD = create("dialpad");
+	public static final MaterialIcon DIRECTIONS = create("directions");
+	public static final MaterialIcon DIRECTIONS_BIKE = create("directions_bike");
+	public static final MaterialIcon DIRECTIONS_BOAT = create("directions_boat");
+	public static final MaterialIcon DIRECTIONS_BUS = create("directions_bus");
+	public static final MaterialIcon DIRECTIONS_CAR = create("directions_car");
+	public static final MaterialIcon DIRECTIONS_RAILWAY = create("directions_railway");
+	public static final MaterialIcon DIRECTIONS_RUN = create("directions_run");
+	public static final MaterialIcon DIRECTIONS_SUBWAY = create("directions_subway");
+	public static final MaterialIcon DIRECTIONS_TRANSIT = create("directions_transit");
+	public static final MaterialIcon DIRECTIONS_WALK = create("directions_walk");
+	public static final MaterialIcon DISC_FULL = create("disc_full");
+	public static final MaterialIcon DNS = create("dns");
+	public static final MaterialIcon DO_NOT_DISTURB = create("do_not_disturb");
+	public static final MaterialIcon DO_NOT_DISTURB_ALT = create("do_not_disturb_alt");
+	public static final MaterialIcon DO_NOT_DISTURB_OFF = create("do_not_disturb_off");
+	public static final MaterialIcon DO_NOT_DISTURB_ON = create("do_not_disturb_on");
+	public static final MaterialIcon DOCK = create("dock");
+	public static final MaterialIcon DOMAIN = create("domain");
+	public static final MaterialIcon DONE = create("done");
+	public static final MaterialIcon DONE_ALL = create("done_all");
+	public static final MaterialIcon DONUT_LARGE = create("donut_large");
+	public static final MaterialIcon DONUT_SMALL = create("donut_small");
+	public static final MaterialIcon DRAFTS = create("drafts");
+	public static final MaterialIcon DRAG_HANDLE = create("drag_handle");
+	public static final MaterialIcon DRIVE_ETA = create("drive_eta");
+	public static final MaterialIcon DVR = create("dvr");
+	public static final MaterialIcon EDIT = create("edit");
+	public static final MaterialIcon EDIT_LOCATION = create("edit_location");
+	public static final MaterialIcon EJECT = create("eject");
+	public static final MaterialIcon EMAIL = create("email");
+	public static final MaterialIcon ENHANCED_ENCRYPTION = create("enhanced_encryption");
+	public static final MaterialIcon EQUALIZER = create("equalizer");
+	public static final MaterialIcon ERROR = create("error");
+	public static final MaterialIcon ERROR_OUTLINE = create("error_outline");
+	public static final MaterialIcon EURO_SYMBOL = create("euro_symbol");
+	public static final MaterialIcon EV_STATION = create("ev_station");
+	public static final MaterialIcon EVENT = create("event");
+	public static final MaterialIcon EVENT_AVAILABLE = create("event_available");
+	public static final MaterialIcon EVENT_BUSY = create("event_busy");
+	public static final MaterialIcon EVENT_NOTE = create("event_note");
+	public static final MaterialIcon EVENT_SEAT = create("event_seat");
+	public static final MaterialIcon EXIT_TO_APP = create("exit_to_app");
+	public static final MaterialIcon EXPAND_LESS = create("expand_less");
+	public static final MaterialIcon EXPAND_MORE = create("expand_more");
+	public static final MaterialIcon EXPLICIT = create("explicit");
+	public static final MaterialIcon EXPLORE = create("explore");
+	public static final MaterialIcon EXPOSURE = create("exposure");
+	public static final MaterialIcon EXPOSURE_NEG_1 = create("exposure_neg_1");
+	public static final MaterialIcon EXPOSURE_NEG_2 = create("exposure_neg_2");
+	public static final MaterialIcon EXPOSURE_PLUS_1 = create("exposure_plus_1");
+	public static final MaterialIcon EXPOSURE_PLUS_2 = create("exposure_plus_2");
+	public static final MaterialIcon EXPOSURE_ZERO = create("exposure_zero");
+	public static final MaterialIcon EXTENSION = create("extension");
+	public static final MaterialIcon FACE = create("face");
+	public static final MaterialIcon FAST_FORWARD = create("fast_forward");
+	public static final MaterialIcon FAST_REWIND = create("fast_rewind");
+	public static final MaterialIcon FAVORITE = create("favorite");
+	public static final MaterialIcon FAVORITE_BORDER = create("favorite_border");
+	public static final MaterialIcon FEATURED_PLAY_LIST = create("featured_play_list");
+	public static final MaterialIcon FEATURED_VIDEO = create("featured_video");
+	public static final MaterialIcon FEEDBACK = create("feedback");
+	public static final MaterialIcon FIBER_DVR = create("fiber_dvr");
+	public static final MaterialIcon FIBER_MANUAL_RECORD = create("fiber_manual_record");
+	public static final MaterialIcon FIBER_NEW = create("fiber_new");
+	public static final MaterialIcon FIBER_PIN = create("fiber_pin");
+	public static final MaterialIcon FIBER_SMART_RECORD = create("fiber_smart_record");
+	public static final MaterialIcon FILE_DOWNLOAD = create("file_download");
+	public static final MaterialIcon FILE_UPLOAD = create("file_upload");
+	public static final MaterialIcon FILTER = create("filter");
+	public static final MaterialIcon FILTER_1 = create("filter_1");
+	public static final MaterialIcon FILTER_2 = create("filter_2");
+	public static final MaterialIcon FILTER_3 = create("filter_3");
+	public static final MaterialIcon FILTER_4 = create("filter_4");
+	public static final MaterialIcon FILTER_5 = create("filter_5");
+	public static final MaterialIcon FILTER_6 = create("filter_6");
+	public static final MaterialIcon FILTER_7 = create("filter_7");
+	public static final MaterialIcon FILTER_8 = create("filter_8");
+	public static final MaterialIcon FILTER_9 = create("filter_9");
+	public static final MaterialIcon FILTER_9_PLUS = create("filter_9_plus");
+	public static final MaterialIcon FILTER_B_AND_W = create("filter_b_and_w");
+	public static final MaterialIcon FILTER_CENTER_FOCUS = create("filter_center_focus");
+	public static final MaterialIcon FILTER_DRAMA = create("filter_drama");
+	public static final MaterialIcon FILTER_FRAMES = create("filter_frames");
+	public static final MaterialIcon FILTER_HDR = create("filter_hdr");
+	public static final MaterialIcon FILTER_LIST = create("filter_list");
+	public static final MaterialIcon FILTER_NONE = create("filter_none");
+	public static final MaterialIcon FILTER_TILT_SHIFT = create("filter_tilt_shift");
+	public static final MaterialIcon FILTER_VINTAGE = create("filter_vintage");
+	public static final MaterialIcon FIND_IN_PAGE = create("find_in_page");
+	public static final MaterialIcon FIND_REPLACE = create("find_replace");
+	public static final MaterialIcon FINGERPRINT = create("fingerprint");
+	public static final MaterialIcon FIRST_PAGE = create("first_page");
+	public static final MaterialIcon FITNESS_CENTER = create("fitness_center");
+	public static final MaterialIcon FLAG = create("flag");
+	public static final MaterialIcon FLARE = create("flare");
+	public static final MaterialIcon FLASH_AUTO = create("flash_auto");
+	public static final MaterialIcon FLASH_OFF = create("flash_off");
+	public static final MaterialIcon FLASH_ON = create("flash_on");
+	public static final MaterialIcon FLIGHT = create("flight");
+	public static final MaterialIcon FLIGHT_LAND = create("flight_land");
+	public static final MaterialIcon FLIGHT_TAKEOFF = create("flight_takeoff");
+	public static final MaterialIcon FLIP = create("flip");
+	public static final MaterialIcon FLIP_TO_BACK = create("flip_to_back");
+	public static final MaterialIcon FLIP_TO_FRONT = create("flip_to_front");
+	public static final MaterialIcon FOLDER = create("folder");
+	public static final MaterialIcon FOLDER_OPEN = create("folder_open");
+	public static final MaterialIcon FOLDER_SHARED = create("folder_shared");
+	public static final MaterialIcon FOLDER_SPECIAL = create("folder_special");
+	public static final MaterialIcon FONT_DOWNLOAD = create("font_download");
+	public static final MaterialIcon FORMAT_ALIGN_CENTER = create("format_align_center");
+	public static final MaterialIcon FORMAT_ALIGN_JUSTIFY = create("format_align_justify");
+	public static final MaterialIcon FORMAT_ALIGN_LEFT = create("format_align_left");
+	public static final MaterialIcon FORMAT_ALIGN_RIGHT = create("format_align_right");
+	public static final MaterialIcon FORMAT_BOLD = create("format_bold");
+	public static final MaterialIcon FORMAT_CLEAR = create("format_clear");
+	public static final MaterialIcon FORMAT_COLOR_FILL = create("format_color_fill");
+	public static final MaterialIcon FORMAT_COLOR_RESET = create("format_color_reset");
+	public static final MaterialIcon FORMAT_COLOR_TEXT = create("format_color_text");
+	public static final MaterialIcon FORMAT_INDENT_DECREASE = create("format_indent_decrease");
+	public static final MaterialIcon FORMAT_INDENT_INCREASE = create("format_indent_increase");
+	public static final MaterialIcon FORMAT_ITALIC = create("format_italic");
+	public static final MaterialIcon FORMAT_LINE_SPACING = create("format_line_spacing");
+	public static final MaterialIcon FORMAT_LIST_BULLETED = create("format_list_bulleted");
+	public static final MaterialIcon FORMAT_LIST_NUMBERED = create("format_list_numbered");
+	public static final MaterialIcon FORMAT_PAINT = create("format_paint");
+	public static final MaterialIcon FORMAT_QUOTE = create("format_quote");
+	public static final MaterialIcon FORMAT_SHAPES = create("format_shapes");
+	public static final MaterialIcon FORMAT_SIZE = create("format_size");
+	public static final MaterialIcon FORMAT_STRIKETHROUGH = create("format_strikethrough");
+	public static final MaterialIcon FORMAT_TEXTDIRECTION_L_TO_R = create("format_textdirection_l_to_r");
+	public static final MaterialIcon FORMAT_TEXTDIRECTION_R_TO_L = create("format_textdirection_r_to_l");
+	public static final MaterialIcon FORMAT_UNDERLINED = create("format_underlined");
+	public static final MaterialIcon FORUM = create("forum");
+	public static final MaterialIcon FORWARD = create("forward");
+	public static final MaterialIcon FORWARD_10 = create("forward_10");
+	public static final MaterialIcon FORWARD_30 = create("forward_30");
+	public static final MaterialIcon FORWARD_5 = create("forward_5");
+	public static final MaterialIcon FREE_BREAKFAST = create("free_breakfast");
+	public static final MaterialIcon FULLSCREEN = create("fullscreen");
+	public static final MaterialIcon FULLSCREEN_EXIT = create("fullscreen_exit");
+	public static final MaterialIcon FUNCTIONS = create("functions");
+	public static final MaterialIcon G_TRANSLATE = create("g_translate");
+	public static final MaterialIcon GAMEPAD = create("gamepad");
+	public static final MaterialIcon GAMES = create("games");
+	public static final MaterialIcon GAVEL = create("gavel");
+	public static final MaterialIcon GESTURE = create("gesture");
+	public static final MaterialIcon GET_APP = create("get_app");
+	public static final MaterialIcon GIF = create("gif");
+	public static final MaterialIcon GOLF_COURSE = create("golf_course");
+	public static final MaterialIcon GPS_FIXED = create("gps_fixed");
+	public static final MaterialIcon GPS_NOT_FIXED = create("gps_not_fixed");
+	public static final MaterialIcon GPS_OFF = create("gps_off");
+	public static final MaterialIcon GRADE = create("grade");
+	public static final MaterialIcon GRADIENT = create("gradient");
+	public static final MaterialIcon GRAIN = create("grain");
+	public static final MaterialIcon GRAPHIC_EQ = create("graphic_eq");
+	public static final MaterialIcon GRID_OFF = create("grid_off");
+	public static final MaterialIcon GRID_ON = create("grid_on");
+	public static final MaterialIcon GROUP = create("group");
+	public static final MaterialIcon GROUP_ADD = create("group_add");
+	public static final MaterialIcon GROUP_WORK = create("group_work");
+	public static final MaterialIcon HD = create("hd");
+	public static final MaterialIcon HDR_OFF = create("hdr_off");
+	public static final MaterialIcon HDR_ON = create("hdr_on");
+	public static final MaterialIcon HDR_STRONG = create("hdr_strong");
+	public static final MaterialIcon HDR_WEAK = create("hdr_weak");
+	public static final MaterialIcon HEADSET = create("headset");
+	public static final MaterialIcon HEADSET_MIC = create("headset_mic");
+	public static final MaterialIcon HEALING = create("healing");
+	public static final MaterialIcon HEARING = create("hearing");
+	public static final MaterialIcon HELP = create("help");
+	public static final MaterialIcon HELP_OUTLINE = create("help_outline");
+	public static final MaterialIcon HIGH_QUALITY = create("high_quality");
+	public static final MaterialIcon HIGHLIGHT = create("highlight");
+	public static final MaterialIcon HIGHLIGHT_OFF = create("highlight_off");
+	public static final MaterialIcon HISTORY = create("history");
+	public static final MaterialIcon HOME = create("home");
+	public static final MaterialIcon HOT_TUB = create("hot_tub");
+	public static final MaterialIcon HOTEL = create("hotel");
+	public static final MaterialIcon HOURGLASS_EMPTY = create("hourglass_empty");
+	public static final MaterialIcon HOURGLASS_FULL = create("hourglass_full");
+	public static final MaterialIcon HTTP = create("http");
+	public static final MaterialIcon HTTPS = create("https");
+	public static final MaterialIcon IMAGE = create("image");
+	public static final MaterialIcon IMAGE_ASPECT_RATIO = create("image_aspect_ratio");
+	public static final MaterialIcon IMPORT_CONTACTS = create("import_contacts");
+	public static final MaterialIcon IMPORT_EXPORT = create("import_export");
+	public static final MaterialIcon IMPORTANT_DEVICES = create("important_devices");
+	public static final MaterialIcon INBOX = create("inbox");
+	public static final MaterialIcon INDETERMINATE_CHECK_BOX = create("indeterminate_check_box");
+	public static final MaterialIcon INFO = create("info");
+	public static final MaterialIcon INFO_OUTLINE = create("info_outline");
+	public static final MaterialIcon INPUT = create("input");
+	public static final MaterialIcon INSERT_CHART = create("insert_chart");
+	public static final MaterialIcon INSERT_COMMENT = create("insert_comment");
+	public static final MaterialIcon INSERT_DRIVE_FILE = create("insert_drive_file");
+	public static final MaterialIcon INSERT_EMOTICON = create("insert_emoticon");
+	public static final MaterialIcon INSERT_INVITATION = create("insert_invitation");
+	public static final MaterialIcon INSERT_LINK = create("insert_link");
+	public static final MaterialIcon INSERT_PHOTO = create("insert_photo");
+	public static final MaterialIcon INVERT_COLORS = create("invert_colors");
+	public static final MaterialIcon INVERT_COLORS_OFF = create("invert_colors_off");
+	public static final MaterialIcon ISO = create("iso");
+	public static final MaterialIcon KEYBOARD = create("keyboard");
+	public static final MaterialIcon KEYBOARD_ARROW_DOWN = create("keyboard_arrow_down");
+	public static final MaterialIcon KEYBOARD_ARROW_LEFT = create("keyboard_arrow_left");
+	public static final MaterialIcon KEYBOARD_ARROW_RIGHT = create("keyboard_arrow_right");
+	public static final MaterialIcon KEYBOARD_ARROW_UP = create("keyboard_arrow_up");
+	public static final MaterialIcon KEYBOARD_BACKSPACE = create("keyboard_backspace");
+	public static final MaterialIcon KEYBOARD_CAPSLOCK = create("keyboard_capslock");
+	public static final MaterialIcon KEYBOARD_HIDE = create("keyboard_hide");
+	public static final MaterialIcon KEYBOARD_RETURN = create("keyboard_return");
+	public static final MaterialIcon KEYBOARD_TAB = create("keyboard_tab");
+	public static final MaterialIcon KEYBOARD_VOICE = create("keyboard_voice");
+	public static final MaterialIcon KITCHEN = create("kitchen");
+	public static final MaterialIcon LABEL = create("label");
+	public static final MaterialIcon LABEL_OUTLINE = create("label_outline");
+	public static final MaterialIcon LANDSCAPE = create("landscape");
+	public static final MaterialIcon LANGUAGE = create("language");
+	public static final MaterialIcon LAPTOP = create("laptop");
+	public static final MaterialIcon LAPTOP_CHROMEBOOK = create("laptop_chromebook");
+	public static final MaterialIcon LAPTOP_MAC = create("laptop_mac");
+	public static final MaterialIcon LAPTOP_WINDOWS = create("laptop_windows");
+	public static final MaterialIcon LAST_PAGE = create("last_page");
+	public static final MaterialIcon LAUNCH = create("launch");
+	public static final MaterialIcon LAYERS = create("layers");
+	public static final MaterialIcon LAYERS_CLEAR = create("layers_clear");
+	public static final MaterialIcon LEAK_ADD = create("leak_add");
+	public static final MaterialIcon LEAK_REMOVE = create("leak_remove");
+	public static final MaterialIcon LENS = create("lens");
+	public static final MaterialIcon LIBRARY_ADD = create("library_add");
+	public static final MaterialIcon LIBRARY_BOOKS = create("library_books");
+	public static final MaterialIcon LIBRARY_MUSIC = create("library_music");
+	public static final MaterialIcon LIGHTBULB_OUTLINE = create("lightbulb_outline");
+	public static final MaterialIcon LINE_STYLE = create("line_style");
+	public static final MaterialIcon LINE_WEIGHT = create("line_weight");
+	public static final MaterialIcon LINEAR_SCALE = create("linear_scale");
+	public static final MaterialIcon LINK = create("link");
+	public static final MaterialIcon LINKED_CAMERA = create("linked_camera");
+	public static final MaterialIcon LIST = create("list");
+	public static final MaterialIcon LIVE_HELP = create("live_help");
+	public static final MaterialIcon LIVE_TV = create("live_tv");
+	public static final MaterialIcon LOCAL_ACTIVITY = create("local_activity");
+	public static final MaterialIcon LOCAL_AIRPORT = create("local_airport");
+	public static final MaterialIcon LOCAL_ATM = create("local_atm");
+	public static final MaterialIcon LOCAL_BAR = create("local_bar");
+	public static final MaterialIcon LOCAL_CAFE = create("local_cafe");
+	public static final MaterialIcon LOCAL_CAR_WASH = create("local_car_wash");
+	public static final MaterialIcon LOCAL_CONVENIENCE_STORE = create("local_convenience_store");
+	public static final MaterialIcon LOCAL_DINING = create("local_dining");
+	public static final MaterialIcon LOCAL_DRINK = create("local_drink");
+	public static final MaterialIcon LOCAL_FLORIST = create("local_florist");
+	public static final MaterialIcon LOCAL_GAS_STATION = create("local_gas_station");
+	public static final MaterialIcon LOCAL_GROCERY_STORE = create("local_grocery_store");
+	public static final MaterialIcon LOCAL_HOSPITAL = create("local_hospital");
+	public static final MaterialIcon LOCAL_HOTEL = create("local_hotel");
+	public static final MaterialIcon LOCAL_LAUNDRY_SERVICE = create("local_laundry_service");
+	public static final MaterialIcon LOCAL_LIBRARY = create("local_library");
+	public static final MaterialIcon LOCAL_MALL = create("local_mall");
+	public static final MaterialIcon LOCAL_MOVIES = create("local_movies");
+	public static final MaterialIcon LOCAL_OFFER = create("local_offer");
+	public static final MaterialIcon LOCAL_PARKING = create("local_parking");
+	public static final MaterialIcon LOCAL_PHARMACY = create("local_pharmacy");
+	public static final MaterialIcon LOCAL_PHONE = create("local_phone");
+	public static final MaterialIcon LOCAL_PIZZA = create("local_pizza");
+	public static final MaterialIcon LOCAL_PLAY = create("local_play");
+	public static final MaterialIcon LOCAL_POST_OFFICE = create("local_post_office");
+	public static final MaterialIcon LOCAL_PRINTSHOP = create("local_printshop");
+	public static final MaterialIcon LOCAL_SEE = create("local_see");
+	public static final MaterialIcon LOCAL_SHIPPING = create("local_shipping");
+	public static final MaterialIcon LOCAL_TAXI = create("local_taxi");
+	public static final MaterialIcon LOCATION_CITY = create("location_city");
+	public static final MaterialIcon LOCATION_DISABLED = create("location_disabled");
+	public static final MaterialIcon LOCATION_OFF = create("location_off");
+	public static final MaterialIcon LOCATION_ON = create("location_on");
+	public static final MaterialIcon LOCATION_SEARCHING = create("location_searching");
+	public static final MaterialIcon LOCK = create("lock");
+	public static final MaterialIcon LOCK_OPEN = create("lock_open");
+	public static final MaterialIcon LOCK_OUTLINE = create("lock_outline");
+	public static final MaterialIcon LOOKS = create("looks");
+	public static final MaterialIcon LOOKS_3 = create("looks_3");
+	public static final MaterialIcon LOOKS_4 = create("looks_4");
+	public static final MaterialIcon LOOKS_5 = create("looks_5");
+	public static final MaterialIcon LOOKS_6 = create("looks_6");
+	public static final MaterialIcon LOOKS_ONE = create("looks_one");
+	public static final MaterialIcon LOOKS_TWO = create("looks_two");
+	public static final MaterialIcon LOOP = create("loop");
+	public static final MaterialIcon LOUPE = create("loupe");
+	public static final MaterialIcon LOW_PRIORITY = create("low_priority");
+	public static final MaterialIcon LOYALTY = create("loyalty");
+	public static final MaterialIcon MAIL = create("mail");
+	public static final MaterialIcon MAIL_OUTLINE = create("mail_outline");
+	public static final MaterialIcon MAP = create("map");
+	public static final MaterialIcon MARK_UNREAD = create("markunread");
+	public static final MaterialIcon MARK_UNREAD_MAILBOX = create("markunread_mailbox");
+	public static final MaterialIcon MEMORY = create("memory");
+	public static final MaterialIcon MENU = create("menu");
+	public static final MaterialIcon MERGE_TYPE = create("merge_type");
+	public static final MaterialIcon MESSAGE = create("message");
+	public static final MaterialIcon MIC = create("mic");
+	public static final MaterialIcon MIC_NONE = create("mic_none");
+	public static final MaterialIcon MIC_OFF = create("mic_off");
+	public static final MaterialIcon MMS = create("mms");
+	public static final MaterialIcon MODE_COMMENT = create("mode_comment");
+	public static final MaterialIcon MODE_EDIT = create("mode_edit");
+	public static final MaterialIcon MONETIZATION_ON = create("monetization_on");
+	public static final MaterialIcon MONEY_OFF = create("money_off");
+	public static final MaterialIcon MONOCHROME_PHOTOS = create("monochrome_photos");
+	public static final MaterialIcon MOOD = create("mood");
+	public static final MaterialIcon MOOD_BAD = create("mood_bad");
+	public static final MaterialIcon MORE = create("more");
+	public static final MaterialIcon MORE_HORIZ = create("more_horiz");
+	public static final MaterialIcon MORE_VERT = create("more_vert");
+	public static final MaterialIcon MOTORCYCLE = create("motorcycle");
+	public static final MaterialIcon MOUSE = create("mouse");
+	public static final MaterialIcon MOVE_TO_INBOX = create("move_to_inbox");
+	public static final MaterialIcon MOVIE = create("movie");
+	public static final MaterialIcon MOVIE_CREATION = create("movie_creation");
+	public static final MaterialIcon MOVIE_FILTER = create("movie_filter");
+	public static final MaterialIcon MULTILINE_CHART = create("multiline_chart");
+	public static final MaterialIcon MUSIC_NOTE = create("music_note");
+	public static final MaterialIcon MUSIC_VIDEO = create("music_video");
+	public static final MaterialIcon MY_LOCATION = create("my_location");
+	public static final MaterialIcon NATURE = create("nature");
+	public static final MaterialIcon NATURE_PEOPLE = create("nature_people");
+	public static final MaterialIcon NAVIGATE_BEFORE = create("navigate_before");
+	public static final MaterialIcon NAVIGATE_NEXT = create("navigate_next");
+	public static final MaterialIcon NAVIGATION = create("navigation");
+	public static final MaterialIcon NEAR_ME = create("near_me");
+	public static final MaterialIcon NETWORK_CELL = create("network_cell");
+	public static final MaterialIcon NETWORK_CHECK = create("network_check");
+	public static final MaterialIcon NETWORK_LOCKED = create("network_locked");
+	public static final MaterialIcon NETWORK_WIFI = create("network_wifi");
+	public static final MaterialIcon NEW_RELEASES = create("new_releases");
+	public static final MaterialIcon NEXT_WEEK = create("next_week");
+	public static final MaterialIcon NFC = create("nfc");
+	public static final MaterialIcon NO_ENCRYPTION = create("no_encryption");
+	public static final MaterialIcon NO_SIM = create("no_sim");
+	public static final MaterialIcon NOT_INTERESTED = create("not_interested");
+	public static final MaterialIcon NOTE = create("note");
+	public static final MaterialIcon NOTE_ADD = create("note_add");
+	public static final MaterialIcon NOTIFICATIONS = create("notifications");
+	public static final MaterialIcon NOTIFICATIONS_ACTIVE = create("notifications_active");
+	public static final MaterialIcon NOTIFICATIONS_NONE = create("notifications_none");
+	public static final MaterialIcon NOTIFICATIONS_OFF = create("notifications_off");
+	public static final MaterialIcon NOTIFICATIONS_PAUSED = create("notifications_paused");
+	public static final MaterialIcon OFFLINE_PIN = create("offline_pin");
+	public static final MaterialIcon ON_DEMAND_VIDEO = create("ondemand_video");
+	public static final MaterialIcon OPACITY = create("opacity");
+	public static final MaterialIcon OPEN_IN_BROWSER = create("open_in_browser");
+	public static final MaterialIcon OPEN_IN_NEW = create("open_in_new");
+	public static final MaterialIcon OPEN_WITH = create("open_with");
+	public static final MaterialIcon PAGES = create("pages");
+	public static final MaterialIcon PAGE_VIEW = create("pageview");
+	public static final MaterialIcon PALETTE = create("palette");
+	public static final MaterialIcon PAN_TOOL = create("pan_tool");
+	public static final MaterialIcon PANORAMA = create("panorama");
+	public static final MaterialIcon PANORAMA_FISH_EYE = create("panorama_fish_eye");
+	public static final MaterialIcon PANORAMA_HORIZONTAL = create("panorama_horizontal");
+	public static final MaterialIcon PANORAMA_VERTICAL = create("panorama_vertical");
+	public static final MaterialIcon PANORAMA_WIDE_ANGLE = create("panorama_wide_angle");
+	public static final MaterialIcon PARTY_MODE = create("party_mode");
+	public static final MaterialIcon PAUSE = create("pause");
+	public static final MaterialIcon PAUSE_CIRCLE_FILLED = create("pause_circle_filled");
+	public static final MaterialIcon PAUSE_CIRCLE_OUTLINE = create("pause_circle_outline");
+	public static final MaterialIcon PAYMENT = create("payment");
+	public static final MaterialIcon PEOPLE = create("people");
+	public static final MaterialIcon PEOPLE_OUTLINE = create("people_outline");
+	public static final MaterialIcon PERM_CAMERA_MIC = create("perm_camera_mic");
+	public static final MaterialIcon PERM_CONTACT_CALENDAR = create("perm_contact_calendar");
+	public static final MaterialIcon PERM_DATA_SETTING = create("perm_data_setting");
+	public static final MaterialIcon PERM_DEVICE_INFORMATION = create("perm_device_information");
+	public static final MaterialIcon PERM_IDENTITY = create("perm_identity");
+	public static final MaterialIcon PERM_MEDIA = create("perm_media");
+	public static final MaterialIcon PERM_PHONE_MSG = create("perm_phone_msg");
+	public static final MaterialIcon PERM_SCAN_WIFI = create("perm_scan_wifi");
+	public static final MaterialIcon PERSON = create("person");
+	public static final MaterialIcon PERSON_ADD = create("person_add");
+	public static final MaterialIcon PERSON_OUTLINE = create("person_outline");
+	public static final MaterialIcon PERSON_PIN = create("person_pin");
+	public static final MaterialIcon PERSON_PIN_CIRCLE = create("person_pin_circle");
+	public static final MaterialIcon PERSONAL_VIDEO = create("personal_video");
+	public static final MaterialIcon PETS = create("pets");
+	public static final MaterialIcon PHONE = create("phone");
+	public static final MaterialIcon PHONE_ANDROID = create("phone_android");
+	public static final MaterialIcon PHONE_BLUETOOTH_SPEAKER = create("phone_bluetooth_speaker");
+	public static final MaterialIcon PHONE_FORWARDED = create("phone_forwarded");
+	public static final MaterialIcon PHONE_IN_TALK = create("phone_in_talk");
+	public static final MaterialIcon PHONE_IPHONE = create("phone_iphone");
+	public static final MaterialIcon PHONE_LOCKED = create("phone_locked");
+	public static final MaterialIcon PHONE_MISSED = create("phone_missed");
+	public static final MaterialIcon PHONE_PAUSED = create("phone_paused");
+	public static final MaterialIcon PHONE_LINK = create("phonelink");
+	public static final MaterialIcon PHONE_LINK_ERASE = create("phonelink_erase");
+	public static final MaterialIcon PHONE_LINK_LOCK = create("phonelink_lock");
+	public static final MaterialIcon PHONE_LINK_OFF = create("phonelink_off");
+	public static final MaterialIcon PHONE_LINK_RING = create("phonelink_ring");
+	public static final MaterialIcon PHONE_LINK_SETUP = create("phonelink_setup");
+	public static final MaterialIcon PHOTO = create("photo");
+	public static final MaterialIcon PHOTO_ALBUM = create("photo_album");
+	public static final MaterialIcon PHOTO_CAMERA = create("photo_camera");
+	public static final MaterialIcon PHOTO_FILTER = create("photo_filter");
+	public static final MaterialIcon PHOTO_LIBRARY = create("photo_library");
+	public static final MaterialIcon PHOTO_SIZE_SELECT_ACTUAL = create("photo_size_select_actual");
+	public static final MaterialIcon PHOTO_SIZE_SELECT_LARGE = create("photo_size_select_large");
+	public static final MaterialIcon PHOTO_SIZE_SELECT_SMALL = create("photo_size_select_small");
+	public static final MaterialIcon PICTURE_AS_PDF = create("picture_as_pdf");
+	public static final MaterialIcon PICTURE_IN_PICTURE = create("picture_in_picture");
+	public static final MaterialIcon PICTURE_IN_PICTURE_ALT = create("picture_in_picture_alt");
+	public static final MaterialIcon PIE_CHART = create("pie_chart");
+	public static final MaterialIcon PIE_CHART_OUTLINED = create("pie_chart_outlined");
+	public static final MaterialIcon PIN_DROP = create("pin_drop");
+	public static final MaterialIcon PLACE = create("place");
+	public static final MaterialIcon PLAY_ARROW = create("play_arrow");
+	public static final MaterialIcon PLAY_CIRCLE_FILLED = create("play_circle_filled");
+	public static final MaterialIcon PLAY_CIRCLE_OUTLINE = create("play_circle_outline");
+	public static final MaterialIcon PLAY_FOR_WORK = create("play_for_work");
+	public static final MaterialIcon PLAYLIST_ADD = create("playlist_add");
+	public static final MaterialIcon PLAYLIST_ADD_CHECK = create("playlist_add_check");
+	public static final MaterialIcon PLAYLIST_PLAY = create("playlist_play");
+	public static final MaterialIcon PLUS_ONE = create("plus_one");
+	public static final MaterialIcon POLL = create("poll");
+	public static final MaterialIcon POLYMER = create("polymer");
+	public static final MaterialIcon POOL = create("pool");
+	public static final MaterialIcon PORTABLE_WIFI_OFF = create("portable_wifi_off");
+	public static final MaterialIcon PORTRAIT = create("portrait");
+	public static final MaterialIcon POWER = create("power");
+	public static final MaterialIcon POWER_INPUT = create("power_input");
+	public static final MaterialIcon POWER_SETTINGS_NEW = create("power_settings_new");
+	public static final MaterialIcon PREGNANT_WOMAN = create("pregnant_woman");
+	public static final MaterialIcon PRESENT_TO_ALL = create("present_to_all");
+	public static final MaterialIcon PRINT = create("print");
+	public static final MaterialIcon PRIORITY_HIGH = create("priority_high");
+	public static final MaterialIcon PUBLIC = create("public");
+	public static final MaterialIcon PUBLISH = create("publish");
+	public static final MaterialIcon QUERY_BUILDER = create("query_builder");
+	public static final MaterialIcon QUESTION_ANSWER = create("question_answer");
+	public static final MaterialIcon QUEUE = create("queue");
+	public static final MaterialIcon QUEUE_MUSIC = create("queue_music");
+	public static final MaterialIcon QUEUE_PLAY_NEXT = create("queue_play_next");
+	public static final MaterialIcon RADIO = create("radio");
+	public static final MaterialIcon RADIO_BUTTON_CHECKED = create("radio_button_checked");
+	public static final MaterialIcon RADIO_BUTTON_UNCHECKED = create("radio_button_unchecked");
+	public static final MaterialIcon RATE_REVIEW = create("rate_review");
+	public static final MaterialIcon RECEIPT = create("receipt");
+	public static final MaterialIcon RECENT_ACTORS = create("recent_actors");
+	public static final MaterialIcon RECORD_VOICE_OVER = create("record_voice_over");
+	public static final MaterialIcon REDEEM = create("redeem");
+	public static final MaterialIcon REDO = create("redo");
+	public static final MaterialIcon REFRESH = create("refresh");
+	public static final MaterialIcon REMOVE = create("remove");
+	public static final MaterialIcon REMOVE_CIRCLE = create("remove_circle");
+	public static final MaterialIcon REMOVE_CIRCLE_OUTLINE = create("remove_circle_outline");
+	public static final MaterialIcon REMOVE_FROM_QUEUE = create("remove_from_queue");
+	public static final MaterialIcon REMOVE_RED_EYE = create("remove_red_eye");
+	public static final MaterialIcon REMOVE_SHOPPING_CART = create("remove_shopping_cart");
+	public static final MaterialIcon REORDER = create("reorder");
+	public static final MaterialIcon REPEAT = create("repeat");
+	public static final MaterialIcon REPEAT_ONE = create("repeat_one");
+	public static final MaterialIcon REPLAY = create("replay");
+	public static final MaterialIcon REPLAY_10 = create("replay_10");
+	public static final MaterialIcon REPLAY_30 = create("replay_30");
+	public static final MaterialIcon REPLAY_5 = create("replay_5");
+	public static final MaterialIcon REPLY = create("reply");
+	public static final MaterialIcon REPLY_ALL = create("reply_all");
+	public static final MaterialIcon REPORT = create("report");
+	public static final MaterialIcon REPORT_PROBLEM = create("report_problem");
+	public static final MaterialIcon RESTAURANT = create("restaurant");
+	public static final MaterialIcon RESTAURANT_MENU = create("restaurant_menu");
+	public static final MaterialIcon RESTORE = create("restore");
+	public static final MaterialIcon RESTORE_PAGE = create("restore_page");
+	public static final MaterialIcon RING_VOLUME = create("ring_volume");
+	public static final MaterialIcon ROOM = create("room");
+	public static final MaterialIcon ROOM_SERVICE = create("room_service");
+	public static final MaterialIcon ROTATE_90_DEGREES_CCW = create("rotate_90_degrees_ccw");
+	public static final MaterialIcon ROTATE_LEFT = create("rotate_left");
+	public static final MaterialIcon ROTATE_RIGHT = create("rotate_right");
+	public static final MaterialIcon ROUNDED_CORNER = create("rounded_corner");
+	public static final MaterialIcon ROUTER = create("router");
+	public static final MaterialIcon ROWING = create("rowing");
+	public static final MaterialIcon RSS_FEED = create("rss_feed");
+	public static final MaterialIcon RV_HOOKUP = create("rv_hookup");
+	public static final MaterialIcon SATELLITE = create("satellite");
+	public static final MaterialIcon SAVE = create("save");
+	public static final MaterialIcon SCANNER = create("scanner");
+	public static final MaterialIcon SCHEDULE = create("schedule");
+	public static final MaterialIcon SCHOOL = create("school");
+	public static final MaterialIcon SCREEN_LOCK_LANDSCAPE = create("screen_lock_landscape");
+	public static final MaterialIcon SCREEN_LOCK_PORTRAIT = create("screen_lock_portrait");
+	public static final MaterialIcon SCREEN_LOCK_ROTATION = create("screen_lock_rotation");
+	public static final MaterialIcon SCREEN_ROTATION = create("screen_rotation");
+	public static final MaterialIcon SCREEN_SHARE = create("screen_share");
+	public static final MaterialIcon SD_CARD = create("sd_card");
+	public static final MaterialIcon SD_STORAGE = create("sd_storage");
+	public static final MaterialIcon SEARCH = create("search");
+	public static final MaterialIcon SECURITY = create("security");
+	public static final MaterialIcon SELECT_ALL = create("select_all");
+	public static final MaterialIcon SEND = create("send");
+	public static final MaterialIcon SENTIMENT_DISSATISFIED = create("sentiment_dissatisfied");
+	public static final MaterialIcon SENTIMENT_NEUTRAL = create("sentiment_neutral");
+	public static final MaterialIcon SENTIMENT_SATISFIED = create("sentiment_satisfied");
+	public static final MaterialIcon SENTIMENT_VERY_DISSATISFIED = create("sentiment_very_dissatisfied");
+	public static final MaterialIcon SENTIMENT_VERY_SATISFIED = create("sentiment_very_satisfied");
+	public static final MaterialIcon SETTINGS = create("settings");
+	public static final MaterialIcon SETTINGS_APPLICATIONS = create("settings_applications");
+	public static final MaterialIcon SETTINGS_BACKUP_RESTORE = create("settings_backup_restore");
+	public static final MaterialIcon SETTINGS_BLUETOOTH = create("settings_bluetooth");
+	public static final MaterialIcon SETTINGS_BRIGHTNESS = create("settings_brightness");
+	public static final MaterialIcon SETTINGS_CELL = create("settings_cell");
+	public static final MaterialIcon SETTINGS_ETHERNET = create("settings_ethernet");
+	public static final MaterialIcon SETTINGS_INPUT_ANTENNA = create("settings_input_antenna");
+	public static final MaterialIcon SETTINGS_INPUT_COMPONENT = create("settings_input_component");
+	public static final MaterialIcon SETTINGS_INPUT_COMPOSITE = create("settings_input_composite");
+	public static final MaterialIcon SETTINGS_INPUT_HDMI = create("settings_input_hdmi");
+	public static final MaterialIcon SETTINGS_INPUT_SVIDEO = create("settings_input_svideo");
+	public static final MaterialIcon SETTINGS_OVERSCAN = create("settings_overscan");
+	public static final MaterialIcon SETTINGS_PHONE = create("settings_phone");
+	public static final MaterialIcon SETTINGS_POWER = create("settings_power");
+	public static final MaterialIcon SETTINGS_REMOTE = create("settings_remote");
+	public static final MaterialIcon SETTINGS_SYSTEM_DAYDREAM = create("settings_system_daydream");
+	public static final MaterialIcon SETTINGS_VOICE = create("settings_voice");
+	public static final MaterialIcon SHARE = create("share");
+	public static final MaterialIcon SHOP = create("shop");
+	public static final MaterialIcon SHOP_TWO = create("shop_two");
+	public static final MaterialIcon SHOPPING_BASKET = create("shopping_basket");
+	public static final MaterialIcon SHOPPING_CART = create("shopping_cart");
+	public static final MaterialIcon SHORT_TEXT = create("short_text");
+	public static final MaterialIcon SHOW_CHART = create("show_chart");
+	public static final MaterialIcon SHUFFLE = create("shuffle");
+	public static final MaterialIcon SIGNAL_CELLULAR_4_BAR = create("signal_cellular_4_bar");
+	public static final MaterialIcon SIGNAL_CELLULAR_CONNECTED_NO_INTERNET_4_BAR = create("signal_cellular_connected_no_internet_4_bar");
+	public static final MaterialIcon SIGNAL_CELLULAR_NO_SIM = create("signal_cellular_no_sim");
+	public static final MaterialIcon SIGNAL_CELLULAR_NULL = create("signal_cellular_null");
+	public static final MaterialIcon SIGNAL_CELLULAR_OFF = create("signal_cellular_off");
+	public static final MaterialIcon SIGNAL_WIFI_4_BAR = create("signal_wifi_4_bar");
+	public static final MaterialIcon SIGNAL_WIFI_4_BAR_LOCK = create("signal_wifi_4_bar_lock");
+	public static final MaterialIcon SIGNAL_WIFI_OFF = create("signal_wifi_off");
+	public static final MaterialIcon SIM_CARD = create("sim_card");
+	public static final MaterialIcon SIM_CARD_ALERT = create("sim_card_alert");
+	public static final MaterialIcon SKIP_NEXT = create("skip_next");
+	public static final MaterialIcon SKIP_PREVIOUS = create("skip_previous");
+	public static final MaterialIcon SLIDESHOW = create("slideshow");
+	public static final MaterialIcon SLOW_MOTION_VIDEO = create("slow_motion_video");
+	public static final MaterialIcon SMARTPHONE = create("smartphone");
+	public static final MaterialIcon SMOKE_FREE = create("smoke_free");
+	public static final MaterialIcon SMOKING_ROOMS = create("smoking_rooms");
+	public static final MaterialIcon SMS = create("sms");
+	public static final MaterialIcon SMS_FAILED = create("sms_failed");
+	public static final MaterialIcon SNOOZE = create("snooze");
+	public static final MaterialIcon SORT = create("sort");
+	public static final MaterialIcon SORT_BY_ALPHA = create("sort_by_alpha");
+	public static final MaterialIcon SPA = create("spa");
+	public static final MaterialIcon SPACE_BAR = create("space_bar");
+	public static final MaterialIcon SPEAKER = create("speaker");
+	public static final MaterialIcon SPEAKER_GROUP = create("speaker_group");
+	public static final MaterialIcon SPEAKER_NOTES = create("speaker_notes");
+	public static final MaterialIcon SPEAKER_NOTES_OFF = create("speaker_notes_off");
+	public static final MaterialIcon SPEAKER_PHONE = create("speaker_phone");
+	public static final MaterialIcon SPELLCHECK = create("spellcheck");
+	public static final MaterialIcon STAR = create("star");
+	public static final MaterialIcon STAR_BORDER = create("star_border");
+	public static final MaterialIcon STAR_HALF = create("star_half");
+	public static final MaterialIcon STARS = create("stars");
+	public static final MaterialIcon STAY_CURRENT_LANDSCAPE = create("stay_current_landscape");
+	public static final MaterialIcon STAY_CURRENT_PORTRAIT = create("stay_current_portrait");
+	public static final MaterialIcon STAY_PRIMARY_LANDSCAPE = create("stay_primary_landscape");
+	public static final MaterialIcon STAY_PRIMARY_PORTRAIT = create("stay_primary_portrait");
+	public static final MaterialIcon STOP = create("stop");
+	public static final MaterialIcon STOP_SCREEN_SHARE = create("stop_screen_share");
+	public static final MaterialIcon STORAGE = create("storage");
+	public static final MaterialIcon STORE = create("store");
+	public static final MaterialIcon STORE_MALL_DIRECTORY = create("store_mall_directory");
+	public static final MaterialIcon STRAIGHTEN = create("straighten");
+	public static final MaterialIcon STREET_VIEW = create("streetview");
+	public static final MaterialIcon STRIKETHROUGH_S = create("strikethrough_s");
+	public static final MaterialIcon STYLE = create("style");
+	public static final MaterialIcon SUBDIRECTORY_ARROW_LEFT = create("subdirectory_arrow_left");
+	public static final MaterialIcon SUBDIRECTORY_ARROW_RIGHT = create("subdirectory_arrow_right");
+	public static final MaterialIcon SUBJECT = create("subject");
+	public static final MaterialIcon SUBSCRIPTIONS = create("subscriptions");
+	public static final MaterialIcon SUBTITLES = create("subtitles");
+	public static final MaterialIcon SUBWAY = create("subway");
+	public static final MaterialIcon SUPERVISOR_ACCOUNT = create("supervisor_account");
+	public static final MaterialIcon SURROUND_SOUND = create("surround_sound");
+	public static final MaterialIcon SWAP_CALLS = create("swap_calls");
+	public static final MaterialIcon SWAP_HORIZ = create("swap_horiz");
+	public static final MaterialIcon SWAP_VERT = create("swap_vert");
+	public static final MaterialIcon SWAP_VERTICAL_CIRCLE = create("swap_vertical_circle");
+	public static final MaterialIcon SWITCH_CAMERA = create("switch_camera");
+	public static final MaterialIcon SWITCH_VIDEO = create("switch_video");
+	public static final MaterialIcon SYNC = create("sync");
+	public static final MaterialIcon SYNC_DISABLED = create("sync_disabled");
+	public static final MaterialIcon SYNC_PROBLEM = create("sync_problem");
+	public static final MaterialIcon SYSTEM_UPDATE = create("system_update");
+	public static final MaterialIcon SYSTEM_UPDATE_ALT = create("system_update_alt");
+	public static final MaterialIcon TAB = create("tab");
+	public static final MaterialIcon TAB_UNSELECTED = create("tab_unselected");
+	public static final MaterialIcon TABLET = create("tablet");
+	public static final MaterialIcon TABLET_ANDROID = create("tablet_android");
+	public static final MaterialIcon TABLET_MAC = create("tablet_mac");
+	public static final MaterialIcon TAG_FACES = create("tag_faces");
+	public static final MaterialIcon TAP_AND_PLAY = create("tap_and_play");
+	public static final MaterialIcon TERRAIN = create("terrain");
+	public static final MaterialIcon TEXT_FIELDS = create("text_fields");
+	public static final MaterialIcon TEXT_FORMAT = create("text_format");
+	public static final MaterialIcon TEXT_SMS = create("textsms");
+	public static final MaterialIcon TEXTURE = create("texture");
+	public static final MaterialIcon THEATERS = create("theaters");
+	public static final MaterialIcon THUMB_DOWN = create("thumb_down");
+	public static final MaterialIcon THUMB_UP = create("thumb_up");
+	public static final MaterialIcon THUMBS_UP_DOWN = create("thumbs_up_down");
+	public static final MaterialIcon TIME_TO_LEAVE = create("time_to_leave");
+	public static final MaterialIcon TIME_LAPSE = create("timelapse");
+	public static final MaterialIcon TIMELINE = create("timeline");
+	public static final MaterialIcon TIMER = create("timer");
+	public static final MaterialIcon TIMER_10 = create("timer_10");
+	public static final MaterialIcon TIMER_3 = create("timer_3");
+	public static final MaterialIcon TIMER_OFF = create("timer_off");
+	public static final MaterialIcon TITLE = create("title");
+	public static final MaterialIcon TOC = create("toc");
+	public static final MaterialIcon TODAY = create("today");
+	public static final MaterialIcon TOLL = create("toll");
+	public static final MaterialIcon TONALITY = create("tonality");
+	public static final MaterialIcon TOUCH_APP = create("touch_app");
+	public static final MaterialIcon TOYS = create("toys");
+	public static final MaterialIcon TRACK_CHANGES = create("track_changes");
+	public static final MaterialIcon TRAFFIC = create("traffic");
+	public static final MaterialIcon TRAIN = create("train");
+	public static final MaterialIcon TRAM = create("tram");
+	public static final MaterialIcon TRANSFER_WITHIN_A_STATION = create("transfer_within_a_station");
+	public static final MaterialIcon TRANSFORM = create("transform");
+	public static final MaterialIcon TRANSLATE = create("translate");
+	public static final MaterialIcon TRENDING_DOWN = create("trending_down");
+	public static final MaterialIcon TRENDING_FLAT = create("trending_flat");
+	public static final MaterialIcon TRENDING_UP = create("trending_up");
+	public static final MaterialIcon TUNE = create("tune");
+	public static final MaterialIcon TURNED_IN = create("turned_in");
+	public static final MaterialIcon TURNED_IN_NOT = create("turned_in_not");
+	public static final MaterialIcon TV = create("tv");
+	public static final MaterialIcon UNARCHIVE = create("unarchive");
+	public static final MaterialIcon UNDO = create("undo");
+	public static final MaterialIcon UNFOLD_LESS = create("unfold_less");
+	public static final MaterialIcon UNFOLD_MORE = create("unfold_more");
+	public static final MaterialIcon UPDATE = create("update");
+	public static final MaterialIcon USB = create("usb");
+	public static final MaterialIcon VERIFIED_USER = create("verified_user");
+	public static final MaterialIcon VERTICAL_ALIGN_BOTTOM = create("vertical_align_bottom");
+	public static final MaterialIcon VERTICAL_ALIGN_CENTER = create("vertical_align_center");
+	public static final MaterialIcon VERTICAL_ALIGN_TOP = create("vertical_align_top");
+	public static final MaterialIcon VIBRATION = create("vibration");
+	public static final MaterialIcon VIDEO_CALL = create("video_call");
+	public static final MaterialIcon VIDEO_LABEL = create("video_label");
+	public static final MaterialIcon VIDEO_LIBRARY = create("video_library");
+	public static final MaterialIcon VIDEO_CAM = create("videocam");
+	public static final MaterialIcon VIDEO_CAM_OFF = create("videocam_off");
+	public static final MaterialIcon VIDEO_GAME_ASSET = create("videogame_asset");
+	public static final MaterialIcon VIEW_AGENDA = create("view_agenda");
+	public static final MaterialIcon VIEW_ARRAY = create("view_array");
+	public static final MaterialIcon VIEW_CAROUSEL = create("view_carousel");
+	public static final MaterialIcon VIEW_COLUMN = create("view_column");
+	public static final MaterialIcon VIEW_COMFY = create("view_comfy");
+	public static final MaterialIcon VIEW_COMPACT = create("view_compact");
+	public static final MaterialIcon VIEW_DAY = create("view_day");
+	public static final MaterialIcon VIEW_HEADLINE = create("view_headline");
+	public static final MaterialIcon VIEW_LIST = create("view_list");
+	public static final MaterialIcon VIEW_MODULE = create("view_module");
+	public static final MaterialIcon VIEW_QUILT = create("view_quilt");
+	public static final MaterialIcon VIEW_STREAM = create("view_stream");
+	public static final MaterialIcon VIEW_WEEK = create("view_week");
+	public static final MaterialIcon VIGNETTE = create("vignette");
+	public static final MaterialIcon VISIBILITY = create("visibility");
+	public static final MaterialIcon VISIBILITY_OFF = create("visibility_off");
+	public static final MaterialIcon VOICE_CHAT = create("voice_chat");
+	public static final MaterialIcon VOICE_MAIL = create("voicemail");
+	public static final MaterialIcon VOLUME_DOWN = create("volume_down");
+	public static final MaterialIcon VOLUME_MUTE = create("volume_mute");
+	public static final MaterialIcon VOLUME_OFF = create("volume_off");
+	public static final MaterialIcon VOLUME_UP = create("volume_up");
+	public static final MaterialIcon VPN_KEY = create("vpn_key");
+	public static final MaterialIcon VPN_LOCK = create("vpn_lock");
+	public static final MaterialIcon WALLPAPER = create("wallpaper");
+	public static final MaterialIcon WARNING = create("warning");
+	public static final MaterialIcon WATCH = create("watch");
+	public static final MaterialIcon WATCH_LATER = create("watch_later");
+	public static final MaterialIcon WB_AUTO = create("wb_auto");
+	public static final MaterialIcon WB_CLOUDY = create("wb_cloudy");
+	public static final MaterialIcon WB_INCANDESCENT = create("wb_incandescent");
+	public static final MaterialIcon WB_IRIDESCENT = create("wb_iridescent");
+	public static final MaterialIcon WB_SUNNY = create("wb_sunny");
+	public static final MaterialIcon WC = create("wc");
+	public static final MaterialIcon WEB = create("web");
+	public static final MaterialIcon WEB_ASSET = create("web_asset");
+	public static final MaterialIcon WEEKEND = create("weekend");
+	public static final MaterialIcon WHATSHOT = create("whatshot");
+	public static final MaterialIcon WIDGETS = create("widgets");
+	public static final MaterialIcon WIFI = create("wifi");
+	public static final MaterialIcon WIFI_LOCK = create("wifi_lock");
+	public static final MaterialIcon WIFI_TETHERING = create("wifi_tethering");
+	public static final MaterialIcon WORK = create("work");
+	public static final MaterialIcon WRAP_TEXT = create("wrap_text");
+	public static final MaterialIcon YOUTUBE_SEARCHED_FOR = create("youtube_searched_for");
+	public static final MaterialIcon ZOOM_IN = create("zoom_in");
+	public static final MaterialIcon ZOOM_OUT = create("zoom_out");
+	public static final MaterialIcon ZOOM_OUT_MAP = create("zoom_out_map");
 
-    @Override
-    public String getIconName() {
-        return iconName + ".svg";
-    }
+	private static MaterialIcon create(String name) {
+		MaterialIcon icon = new MaterialIcon(name);
+		ICONS_BY_NAME.put(name, icon);
+		return icon;
+	}
 
-    @Override
-    public String getIconLibraryId() {
-        return MaterialIconProvider.LIBRARY_ID;
-    }
+	public static Collection<MaterialIcon> getAllIcons() {
+		return ICONS_BY_NAME.values();
+	}
 
-    public Icon withStyle(AbstractMaterialIconStyle style) {
-        return new StyledIcon(getIconLibraryId(), style.getStyleId(), getIconName());
-    }
+	public static MaterialIcon forName(String name) {
+		return ICONS_BY_NAME.get(name);
+	}
+
+	private final String iconName;
+	private final MaterialIconStyle style;
+
+	private MaterialIcon(String iconName) {
+		this(iconName, null);
+	}
+
+	private MaterialIcon(String iconName, MaterialIconStyle style) {
+		this.iconName = iconName;
+		this.style = style;
+	}
+
+	public String getIconName() {
+		return iconName;
+	}
+
+	@Override
+	public MaterialIcon withStyle(MaterialIconStyle style) {
+		return new MaterialIcon(iconName, style);
+	}
+
+	@Override
+	public MaterialIconStyle getStyle() {
+		return style;
+	}
 }
diff --git a/teamapps-material-icon-provider/src/main/java/org/teamapps/icon/material/MaterialIconDecoder.java b/teamapps-material-icon-provider/src/main/java/org/teamapps/icon/material/MaterialIconDecoder.java
new file mode 100644
index 000000000..7d631e362
--- /dev/null
+++ b/teamapps-material-icon-provider/src/main/java/org/teamapps/icon/material/MaterialIconDecoder.java
@@ -0,0 +1,52 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.icon.material;
+
+import org.teamapps.icons.IconDecoderContext;
+import org.teamapps.icons.spi.IconDecoder;
+
+import java.util.ArrayList;
+import java.util.List;
+
+public class MaterialIconDecoder implements IconDecoder<MaterialIcon> {
+
+	@Override
+	public MaterialIcon decodeIcon(String encodedIconString, IconDecoderContext context) {
+		String[] parts = encodedIconString.split("\\.");
+
+		String iconName = parts[0];
+
+		if (parts.length == 1) {
+			return MaterialIcon.forName(iconName);
+		} else {
+			MaterialIconStyleType styleType = MaterialIconStyleType.valueOf(parts[1]);
+			List<String> colors = new ArrayList<>();
+			for (int i = 2; i < parts.length; i++) {
+				if (parts[i].length() > 0) {
+					colors.add(parts[i]);
+				}
+			}
+			MaterialIconStyle style = new MaterialIconStyle(styleType, colors.toArray(String[]::new));
+
+			return MaterialIcon.forName(iconName).withStyle(style);
+		}
+	}
+
+}
diff --git a/teamapps-material-icon-provider/src/main/java/org/teamapps/icon/material/GradientOutlineStyle.java b/teamapps-material-icon-provider/src/main/java/org/teamapps/icon/material/MaterialIconDefaultIconSupplier.java
similarity index 71%
rename from teamapps-material-icon-provider/src/main/java/org/teamapps/icon/material/GradientOutlineStyle.java
rename to teamapps-material-icon-provider/src/main/java/org/teamapps/icon/material/MaterialIconDefaultIconSupplier.java
index 36cdcd7f0..4da3bc081 100644
--- a/teamapps-material-icon-provider/src/main/java/org/teamapps/icon/material/GradientOutlineStyle.java
+++ b/teamapps-material-icon-provider/src/main/java/org/teamapps/icon/material/MaterialIconDefaultIconSupplier.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,9 +19,13 @@
  */
 package org.teamapps.icon.material;
 
-public class GradientOutlineStyle extends MultiColorStyle {
+import org.teamapps.icons.spi.DefaultStyleSupplier;
 
-    public GradientOutlineStyle(String styleId, String color1, String color2, String color3) {
-        super(styleId, StyleType.GRADIENT_OUTLINE, color1, color2, color3);
-    }
+public class MaterialIconDefaultIconSupplier implements DefaultStyleSupplier<MaterialIconStyle> {
+
+	@Override
+	public MaterialIconStyle getDefaultStyle() {
+		return MaterialIconStyles.PLAIN_SHADOW_BLUE_700;
+	}
+	
 }
diff --git a/teamapps-material-icon-provider/src/main/java/org/teamapps/icon/material/MaterialIconEncoder.java b/teamapps-material-icon-provider/src/main/java/org/teamapps/icon/material/MaterialIconEncoder.java
new file mode 100644
index 000000000..f5975d640
--- /dev/null
+++ b/teamapps-material-icon-provider/src/main/java/org/teamapps/icon/material/MaterialIconEncoder.java
@@ -0,0 +1,37 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.icon.material;
+
+import org.teamapps.icons.IconEncoderContext;
+import org.teamapps.icons.spi.IconEncoder;
+
+public class MaterialIconEncoder implements IconEncoder<MaterialIcon> {
+
+	@Override
+	public String encodeIcon(MaterialIcon icon, IconEncoderContext context) {
+		MaterialIconStyle style = icon.getStyle();
+		if (style == null) {
+			return icon.getIconName();
+		} else {
+			return icon.getIconName() + "." + style.getStyleType() + "." + String.join(".", style.getColors());
+		}
+	}
+
+}
diff --git a/teamapps-material-icon-provider/src/main/java/org/teamapps/icon/material/MaterialIconLoader.java b/teamapps-material-icon-provider/src/main/java/org/teamapps/icon/material/MaterialIconLoader.java
new file mode 100644
index 000000000..0d2b70d08
--- /dev/null
+++ b/teamapps-material-icon-provider/src/main/java/org/teamapps/icon/material/MaterialIconLoader.java
@@ -0,0 +1,58 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.icon.material;
+
+import org.apache.commons.io.IOUtils;
+import org.teamapps.icons.IconLoaderContext;
+import org.teamapps.icons.IconResource;
+import org.teamapps.icons.IconType;
+import org.teamapps.icons.spi.IconLoader;
+
+import java.io.IOException;
+import java.io.InputStream;
+import java.nio.charset.StandardCharsets;
+
+public class MaterialIconLoader implements IconLoader<MaterialIcon> {
+
+	@Override
+	public IconResource loadIcon(MaterialIcon icon, int size, IconLoaderContext context) {
+		return new IconResource(getSVG(icon.getIconName(), icon.getStyle()), IconType.SVG);
+	}
+
+	private byte[] getSVG(String iconName, MaterialIconStyle style) {
+		if (!iconName.endsWith(".svg")) {
+			iconName += ".svg";
+		}
+
+		try (InputStream inputStream = getClass().getResourceAsStream("/org/teamapps/icon/material/" + style.getStyleType().getPackageName() + "/" + iconName)){
+			if (inputStream == null) {
+				return null;
+			}
+			String svg = IOUtils.toString(inputStream, StandardCharsets.UTF_8);
+			svg = svg.replace("<desc>add icon - Licensed under Apache License v2.0 (http://www.apache.org/licenses/LICENSE-2.0) - Created with Iconfu.com - Derivative work of Material icons (Copyright Google Inc.)</desc>", "");
+			svg = style.applyStyle(svg);
+			return svg.getBytes(StandardCharsets.UTF_8);
+		} catch (IOException e) {
+			e.printStackTrace();
+		}
+		return null;
+	}
+
+}
diff --git a/teamapps-material-icon-provider/src/main/java/org/teamapps/icon/material/MaterialIconProvider.java b/teamapps-material-icon-provider/src/main/java/org/teamapps/icon/material/MaterialIconProvider.java
deleted file mode 100644
index c7877aa32..000000000
--- a/teamapps-material-icon-provider/src/main/java/org/teamapps/icon/material/MaterialIconProvider.java
+++ /dev/null
@@ -1,149 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.icon.material;
-
-import org.apache.commons.io.IOUtils;
-import org.teamapps.common.format.Color;
-import org.teamapps.icons.api.IconStyle;
-import org.teamapps.icons.provider.SvgIconProvider;
-
-import java.io.IOException;
-import java.io.InputStream;
-import java.nio.charset.StandardCharsets;
-import java.util.*;
-
-public class MaterialIconProvider implements SvgIconProvider<IconStyle> {
-
-    public static final String LIBRARY_ID = "material";
-
-
-    private Map<String, AbstractMaterialIconStyle> styleById = new HashMap<>();
-    private Map<String, String> svgByStyleAndName = new HashMap<>();
-
-    public MaterialIconProvider() {
-        MaterialIconStyles.getBaseStyles().forEach(this::addIconStyle);
-    }
-
-    public void addIconStyle(AbstractMaterialIconStyle iconStyle) {
-        styleById.put(iconStyle.getStyleId(), iconStyle);
-    }
-
-    public void addPlainStyle(String styleId, String color) {
-        addIconStyle(new PlainStyle(styleId, color));
-    }
-
-    public void addPlainShadowStyle(String styleId, String color) {
-        addIconStyle(new PlainShadowStyle(styleId, color));
-    }
-
-    public void addOutlineStyle(String styleId, String color) {
-        addIconStyle(new OutlineStyle(styleId, color));
-    }
-
-    public void addOutlineFilledStyle(String styleId, String color) {
-        addIconStyle(new OutlineFilledStyle(styleId, color));
-    }
-
-    public void addGradientStyle(String styleId, String color1, String color2, String color3) {
-        addIconStyle(new GradientStyle(styleId, color1, color2, color3));
-    }
-
-    @Override
-    public String getInnerSvg(IconStyle style, String iconName) {
-        String svg = getSVG(style.getStyleId(), iconName);
-        if (svg != null) {
-            //todo remove svg tags
-        }
-        return null;
-    }
-
-    @Override
-    public byte[] getIcon(String styleId, int size, String iconName) {
-        String svg = getSVG(styleId, iconName);
-        if (svg != null) {
-            return svg.getBytes(StandardCharsets.UTF_8);
-        } else {
-            return null;
-        }
-    }
-
-    private String getSVG(String styleId, String iconName) {
-        if (!iconName.endsWith(".svg")) {
-            iconName += ".svg";
-        }
-        String key = styleId + ":" + iconName;
-        String svg = svgByStyleAndName.get(key);
-        if (svg != null) {
-            return svg;
-        }
-        AbstractMaterialIconStyle iconStyle = styleById.get(styleId);
-        if (iconStyle == null) {
-            return null;
-        }
-
-
-        InputStream inputStream = getClass().getResourceAsStream("/org/teamapps/icon/material/" + iconStyle.getStyleType().getPackageName() + "/" + iconName);
-        if (inputStream == null) {
-            return null;
-        }
-        try {
-            svg = IOUtils.toString(inputStream, StandardCharsets.UTF_8);
-            svg = svg.replace("<desc>add icon - Licensed under Apache License v2.0 (http://www.apache.org/licenses/LICENSE-2.0) - Created with Iconfu.com - Derivative work of Material icons (Copyright Google Inc.)</desc>", "");
-            svg = iconStyle.applyStyle(svg);
-            svgByStyleAndName.put(key, svg);
-            return svg;
-        } catch (IOException e) {
-            e.printStackTrace();
-        }
-        return null;
-    }
-
-
-    @Override
-    public String getIconLibraryId() {
-        return LIBRARY_ID;
-    }
-
-    @Override
-    public Set<Integer> getAvailableIconSizes() {
-        return null;
-    }
-
-    @Override
-    public Set<IconStyle> getAvailableIconStyles() {
-        return new HashSet<>(styleById.values());
-    }
-
-    @Override
-    public IconStyle getDefaultDesktopStyle() {
-        return MaterialIconStyles.PLAIN_GREY_700;
-    }
-
-    @Override
-    public IconStyle getDefaultMobileStyle() {
-        return MaterialIconStyles.PLAIN_GREY_700;
-    }
-
-    @Override
-    public IconStyle getDefaultSubIconStyle() {
-        return MaterialIconStyles.PLAIN_GREY_700;
-    }
-
-}
diff --git a/teamapps-material-icon-provider/src/main/java/org/teamapps/icon/material/MaterialIconStyle.java b/teamapps-material-icon-provider/src/main/java/org/teamapps/icon/material/MaterialIconStyle.java
new file mode 100644
index 000000000..d42683f81
--- /dev/null
+++ b/teamapps-material-icon-provider/src/main/java/org/teamapps/icon/material/MaterialIconStyle.java
@@ -0,0 +1,69 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.icon.material;
+
+import org.teamapps.common.format.Color;
+
+import java.util.Arrays;
+
+public class MaterialIconStyle {
+
+	private final MaterialIconStyleType styleType;
+	private final String[] colors;
+
+	public MaterialIconStyle(MaterialIconStyleType styleType, String... colors) {
+		this.styleType = styleType;
+		this.colors = colors;
+	}
+
+	public MaterialIconStyle(MaterialIconStyleType styleType, Color... colors) {
+		this.styleType = styleType;
+		this.colors = Arrays.stream(colors)
+				.map(Color::toHtmlColorString)
+				.toArray(String[]::new);
+	}
+
+	public MaterialIconStyleType getStyleType() {
+		return styleType;
+	}
+
+	public String[] getColors() {
+		return colors;
+	}
+
+	public String applyStyle(String svg) {
+		String styleTags = createStyleTags(colors);
+		return applyStyle(svg, styleTags);
+	}
+
+	private String applyStyle(String svg, String styleTags) {
+		int pos = svg.indexOf('>');
+		return svg.substring(0, pos + 2) + styleTags + svg.substring(pos + 1);
+	}
+
+	private String createStyleTags(String... colors) {
+		StringBuilder sb = new StringBuilder("<style>\n");
+		for (int i = 1; i <= colors.length; i++) {
+			sb.append(".teamapps-color-").append(i).append(" {").append("color:").append(colors[i - 1]).append("}");
+		}
+		sb.append("\n</style>");
+		return sb.toString();
+	}
+}
diff --git a/teamapps-material-icon-provider/src/main/java/org/teamapps/icon/material/StyleType.java b/teamapps-material-icon-provider/src/main/java/org/teamapps/icon/material/MaterialIconStyleType.java
similarity index 61%
rename from teamapps-material-icon-provider/src/main/java/org/teamapps/icon/material/StyleType.java
rename to teamapps-material-icon-provider/src/main/java/org/teamapps/icon/material/MaterialIconStyleType.java
index ffbb1233a..49b2c3e5d 100644
--- a/teamapps-material-icon-provider/src/main/java/org/teamapps/icon/material/StyleType.java
+++ b/teamapps-material-icon-provider/src/main/java/org/teamapps/icon/material/MaterialIconStyleType.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,25 +19,30 @@
  */
 package org.teamapps.icon.material;
 
-public enum StyleType {
-
-    PLAIN("plain"),
-    PLAIN_SHADOW("shadow"),
-    STICKER("sticker"),
-    OUTLINE("outline"),
-    OUTLINE_FILLED("outlinefilled"),
-    GRADIENT("gradient"),
-    GRADIENT_OUTLINE("gradientoutline"),
+public enum MaterialIconStyleType {
 
+    PLAIN("plain", false),
+    PLAIN_SHADOW("shadow", false),
+    STICKER("sticker", false),
+    OUTLINE("outline", false),
+    OUTLINE_FILLED("outlinefilled", false),
+    GRADIENT("gradient", true),
+    GRADIENT_OUTLINE("gradientoutline", true),
     ;
 
-    private String packageName;
+    private final String packageName;
+    private final boolean multiColor;
 
-    StyleType(String packageName) {
+    MaterialIconStyleType(String packageName, boolean multiColor) {
         this.packageName = packageName;
+        this.multiColor = multiColor;
     }
 
     public String getPackageName() {
         return packageName;
     }
+
+    public boolean isMultiColor() {
+        return multiColor;
+    }
 }
diff --git a/teamapps-material-icon-provider/src/main/java/org/teamapps/icon/material/MaterialIconStyles.java b/teamapps-material-icon-provider/src/main/java/org/teamapps/icon/material/MaterialIconStyles.java
index 975229e09..89741aca5 100644
--- a/teamapps-material-icon-provider/src/main/java/org/teamapps/icon/material/MaterialIconStyles.java
+++ b/teamapps-material-icon-provider/src/main/java/org/teamapps/icon/material/MaterialIconStyles.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,1357 +19,1359 @@
  */
 package org.teamapps.icon.material;
 
+import org.teamapps.common.format.RgbaColor;
 import org.teamapps.common.format.Color;
 
 import java.util.ArrayList;
 import java.util.List;
 
+import static org.teamapps.icon.material.MaterialIconStyleType.*;
+
 public class MaterialIconStyles {
 
-	private static List<AbstractMaterialIconStyle> baseStyles = new ArrayList<>();
+	private static final List<MaterialIconStyle> baseStyles = new ArrayList<>();
 
 
 
 	//GRADIENT styles:
-	public static final AbstractMaterialIconStyle GRADIENT_1 = addBaseStyle(new GradientStyle("gradient_1", Color.MATERIAL_YELLOW_300.toHtmlColorString(), Color.MATERIAL_DEEP_ORANGE_600.toHtmlColorString(), Color.MATERIAL_RED_900.toHtmlColorString()));
+	public static final MaterialIconStyle GRADIENT_1 = addBaseStyle(new MaterialIconStyle(GRADIENT, RgbaColor.MATERIAL_YELLOW_300.toHtmlColorString(), RgbaColor.MATERIAL_DEEP_ORANGE_600.toHtmlColorString(), RgbaColor.MATERIAL_RED_900.toHtmlColorString()));
 
-	public static final AbstractMaterialIconStyle GRADIENT_ORANGE = addBaseStyle(new GradientStyle("gradient_orange", Color.fromHex("f7ffa2").toHtmlColorString(), Color.fromHex("ffbc3b").toHtmlColorString(), Color.fromHex("ff5b22").toHtmlColorString()));
-	public static final AbstractMaterialIconStyle GRADIENT_RED = addBaseStyle(new GradientStyle("gradient_red", Color.fromHex("fff38a").toHtmlColorString(), Color.fromHex("ff5a5a").toHtmlColorString(), Color.fromHex("e60057").toHtmlColorString()));
-	public static final AbstractMaterialIconStyle GRADIENT_PINK = addBaseStyle(new GradientStyle("gradient_pink", Color.fromHex("ffa79e").toHtmlColorString(), Color.fromHex("ee3eec").toHtmlColorString(), Color.fromHex("9d18f1").toHtmlColorString()));
-	public static final AbstractMaterialIconStyle GRADIENT_BLUE = addBaseStyle(new GradientStyle("gradient_blue", Color.fromHex("9dffbd").toHtmlColorString(), Color.fromHex("21f6ee").toHtmlColorString(), Color.fromHex("0f7bf5").toHtmlColorString()));
-	public static final AbstractMaterialIconStyle GRADIENT_GREEN = addBaseStyle(new GradientStyle("gradient_green", Color.fromHex("ecffa2").toHtmlColorString(), Color.fromHex("77f01e").toHtmlColorString(), Color.fromHex("00ded6").toHtmlColorString()));
+	public static final MaterialIconStyle GRADIENT_ORANGE = addBaseStyle(new MaterialIconStyle(GRADIENT, Color.fromHex("f7ffa2").toHtmlColorString(), Color.fromHex("ffbc3b").toHtmlColorString(), Color.fromHex("ff5b22").toHtmlColorString()));
+	public static final MaterialIconStyle GRADIENT_RED = addBaseStyle(new MaterialIconStyle(GRADIENT, Color.fromHex("fff38a").toHtmlColorString(), Color.fromHex("ff5a5a").toHtmlColorString(), Color.fromHex("e60057").toHtmlColorString()));
+	public static final MaterialIconStyle GRADIENT_PINK = addBaseStyle(new MaterialIconStyle(GRADIENT, Color.fromHex("ffa79e").toHtmlColorString(), Color.fromHex("ee3eec").toHtmlColorString(), Color.fromHex("9d18f1").toHtmlColorString()));
+	public static final MaterialIconStyle GRADIENT_BLUE = addBaseStyle(new MaterialIconStyle(GRADIENT, Color.fromHex("9dffbd").toHtmlColorString(), Color.fromHex("21f6ee").toHtmlColorString(), Color.fromHex("0f7bf5").toHtmlColorString()));
+	public static final MaterialIconStyle GRADIENT_GREEN = addBaseStyle(new MaterialIconStyle(GRADIENT, Color.fromHex("ecffa2").toHtmlColorString(), Color.fromHex("77f01e").toHtmlColorString(), Color.fromHex("00ded6").toHtmlColorString()));
 
 
 	//GRADIENT OUTLINE styles:
-	public static final AbstractMaterialIconStyle GRADIENT_OUTLINE_1 = addBaseStyle(new GradientOutlineStyle("gradient_outline_1", Color.MATERIAL_YELLOW_300.toHtmlColorString(), Color.MATERIAL_DEEP_ORANGE_600.toHtmlColorString(), Color.MATERIAL_RED_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle GRADIENT_OUTLINE_ORANGE = addBaseStyle(new GradientStyle("gradient_outline_orange", Color.fromHex("f7ffa2").toHtmlColorString(), Color.fromHex("ffbc3b").toHtmlColorString(), Color.fromHex("ff5b22").toHtmlColorString()));
-	public static final AbstractMaterialIconStyle GRADIENT_OUTLINE_RED = addBaseStyle(new GradientStyle("gradient_outline_red", Color.fromHex("fff38a").toHtmlColorString(), Color.fromHex("ff5a5a").toHtmlColorString(), Color.fromHex("e60057").toHtmlColorString()));
-	public static final AbstractMaterialIconStyle GRADIENT_OUTLINE_PINK = addBaseStyle(new GradientStyle("gradient_outline_pink", Color.fromHex("ffa79e").toHtmlColorString(), Color.fromHex("ee3eec").toHtmlColorString(), Color.fromHex("9d18f1").toHtmlColorString()));
-	public static final AbstractMaterialIconStyle GRADIENT_OUTLINE_BLUE = addBaseStyle(new GradientStyle("gradient_outline_blue", Color.fromHex("9dffbd").toHtmlColorString(), Color.fromHex("21f6ee").toHtmlColorString(), Color.fromHex("0f7bf5").toHtmlColorString()));
-	public static final AbstractMaterialIconStyle GRADIENT_OUTLINE_GREEN = addBaseStyle(new GradientStyle("gradient_outline_green", Color.fromHex("ecffa2").toHtmlColorString(), Color.fromHex("77f01e").toHtmlColorString(), Color.fromHex("00ded6").toHtmlColorString()));
+	public static final MaterialIconStyle GRADIENT_OUTLINE_1 = addBaseStyle(new MaterialIconStyle(GRADIENT_OUTLINE, RgbaColor.MATERIAL_YELLOW_300.toHtmlColorString(), RgbaColor.MATERIAL_DEEP_ORANGE_600.toHtmlColorString(), RgbaColor.MATERIAL_RED_900.toHtmlColorString()));
+	public static final MaterialIconStyle GRADIENT_OUTLINE_ORANGE = addBaseStyle(new MaterialIconStyle(GRADIENT_OUTLINE, Color.fromHex("f7ffa2").toHtmlColorString(), Color.fromHex("ffbc3b").toHtmlColorString(), Color.fromHex("ff5b22").toHtmlColorString()));
+	public static final MaterialIconStyle GRADIENT_OUTLINE_RED = addBaseStyle(new MaterialIconStyle(GRADIENT_OUTLINE, Color.fromHex("fff38a").toHtmlColorString(), Color.fromHex("ff5a5a").toHtmlColorString(), Color.fromHex("e60057").toHtmlColorString()));
+	public static final MaterialIconStyle GRADIENT_OUTLINE_PINK = addBaseStyle(new MaterialIconStyle(GRADIENT_OUTLINE, Color.fromHex("ffa79e").toHtmlColorString(), Color.fromHex("ee3eec").toHtmlColorString(), Color.fromHex("9d18f1").toHtmlColorString()));
+	public static final MaterialIconStyle GRADIENT_OUTLINE_BLUE = addBaseStyle(new MaterialIconStyle(GRADIENT_OUTLINE, Color.fromHex("9dffbd").toHtmlColorString(), Color.fromHex("21f6ee").toHtmlColorString(), Color.fromHex("0f7bf5").toHtmlColorString()));
+	public static final MaterialIconStyle GRADIENT_OUTLINE_GREEN = addBaseStyle(new MaterialIconStyle(GRADIENT_OUTLINE, Color.fromHex("ecffa2").toHtmlColorString(), Color.fromHex("77f01e").toHtmlColorString(), Color.fromHex("00ded6").toHtmlColorString()));
 
 	//PLAIN styles:
-	public static final AbstractMaterialIconStyle PLAIN_BOOTSTRAP_PRIMARY = addBaseStyle(new PlainStyle("plain_bootstrap_primary", Color.BOOTSTRAP_PRIMARY.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_BOOTSTRAP_SUCCESS = addBaseStyle(new PlainStyle("plain_bootstrap_success", Color.BOOTSTRAP_SUCCESS.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_BOOTSTRAP_INFO = addBaseStyle(new PlainStyle("plain_bootstrap_info", Color.BOOTSTRAP_INFO.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_BOOTSTRAP_WARNING = addBaseStyle(new PlainStyle("plain_bootstrap_warning", Color.BOOTSTRAP_WARNING.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_BOOTSTRAP_DANGER = addBaseStyle(new PlainStyle("plain_bootstrap_danger", Color.BOOTSTRAP_DANGER.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_RED_50 = addBaseStyle(new PlainStyle("plain_red_50", Color.MATERIAL_RED_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_RED_100 = addBaseStyle(new PlainStyle("plain_red_100", Color.MATERIAL_RED_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_RED_200 = addBaseStyle(new PlainStyle("plain_red_200", Color.MATERIAL_RED_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_RED_300 = addBaseStyle(new PlainStyle("plain_red_300", Color.MATERIAL_RED_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_RED_400 = addBaseStyle(new PlainStyle("plain_red_400", Color.MATERIAL_RED_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_RED_500 = addBaseStyle(new PlainStyle("plain_red_500", Color.MATERIAL_RED_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_RED_600 = addBaseStyle(new PlainStyle("plain_red_600", Color.MATERIAL_RED_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_RED_700 = addBaseStyle(new PlainStyle("plain_red_700", Color.MATERIAL_RED_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_RED_800 = addBaseStyle(new PlainStyle("plain_red_800", Color.MATERIAL_RED_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_RED_900 = addBaseStyle(new PlainStyle("plain_red_900", Color.MATERIAL_RED_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_RED_A100 = addBaseStyle(new PlainStyle("plain_red_a100", Color.MATERIAL_RED_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_RED_A200 = addBaseStyle(new PlainStyle("plain_red_a200", Color.MATERIAL_RED_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_RED_A400 = addBaseStyle(new PlainStyle("plain_red_a400", Color.MATERIAL_RED_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_RED_A700 = addBaseStyle(new PlainStyle("plain_red_a700", Color.MATERIAL_RED_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_PINK_50 = addBaseStyle(new PlainStyle("plain_pink_50", Color.MATERIAL_PINK_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_PINK_100 = addBaseStyle(new PlainStyle("plain_pink_100", Color.MATERIAL_PINK_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_PINK_200 = addBaseStyle(new PlainStyle("plain_pink_200", Color.MATERIAL_PINK_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_PINK_300 = addBaseStyle(new PlainStyle("plain_pink_300", Color.MATERIAL_PINK_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_PINK_400 = addBaseStyle(new PlainStyle("plain_pink_400", Color.MATERIAL_PINK_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_PINK_500 = addBaseStyle(new PlainStyle("plain_pink_500", Color.MATERIAL_PINK_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_PINK_600 = addBaseStyle(new PlainStyle("plain_pink_600", Color.MATERIAL_PINK_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_PINK_700 = addBaseStyle(new PlainStyle("plain_pink_700", Color.MATERIAL_PINK_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_PINK_800 = addBaseStyle(new PlainStyle("plain_pink_800", Color.MATERIAL_PINK_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_PINK_900 = addBaseStyle(new PlainStyle("plain_pink_900", Color.MATERIAL_PINK_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_PINK_A100 = addBaseStyle(new PlainStyle("plain_pink_a100", Color.MATERIAL_PINK_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_PINK_A200 = addBaseStyle(new PlainStyle("plain_pink_a200", Color.MATERIAL_PINK_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_PINK_A400 = addBaseStyle(new PlainStyle("plain_pink_a400", Color.MATERIAL_PINK_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_PINK_A700 = addBaseStyle(new PlainStyle("plain_pink_a700", Color.MATERIAL_PINK_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_PURPLE_50 = addBaseStyle(new PlainStyle("plain_purple_50", Color.MATERIAL_PURPLE_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_PURPLE_100 = addBaseStyle(new PlainStyle("plain_purple_100", Color.MATERIAL_PURPLE_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_PURPLE_200 = addBaseStyle(new PlainStyle("plain_purple_200", Color.MATERIAL_PURPLE_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_PURPLE_300 = addBaseStyle(new PlainStyle("plain_purple_300", Color.MATERIAL_PURPLE_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_PURPLE_400 = addBaseStyle(new PlainStyle("plain_purple_400", Color.MATERIAL_PURPLE_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_PURPLE_500 = addBaseStyle(new PlainStyle("plain_purple_500", Color.MATERIAL_PURPLE_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_PURPLE_600 = addBaseStyle(new PlainStyle("plain_purple_600", Color.MATERIAL_PURPLE_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_PURPLE_700 = addBaseStyle(new PlainStyle("plain_purple_700", Color.MATERIAL_PURPLE_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_PURPLE_800 = addBaseStyle(new PlainStyle("plain_purple_800", Color.MATERIAL_PURPLE_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_PURPLE_900 = addBaseStyle(new PlainStyle("plain_purple_900", Color.MATERIAL_PURPLE_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_PURPLE_A100 = addBaseStyle(new PlainStyle("plain_purple_a100", Color.MATERIAL_PURPLE_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_PURPLE_A200 = addBaseStyle(new PlainStyle("plain_purple_a200", Color.MATERIAL_PURPLE_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_PURPLE_A400 = addBaseStyle(new PlainStyle("plain_purple_a400", Color.MATERIAL_PURPLE_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_PURPLE_A700 = addBaseStyle(new PlainStyle("plain_purple_a700", Color.MATERIAL_PURPLE_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_DEEP_PURPLE_50 = addBaseStyle(new PlainStyle("plain_deep_purple_50", Color.MATERIAL_DEEP_PURPLE_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_DEEP_PURPLE_100 = addBaseStyle(new PlainStyle("plain_deep_purple_100", Color.MATERIAL_DEEP_PURPLE_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_DEEP_PURPLE_200 = addBaseStyle(new PlainStyle("plain_deep_purple_200", Color.MATERIAL_DEEP_PURPLE_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_DEEP_PURPLE_300 = addBaseStyle(new PlainStyle("plain_deep_purple_300", Color.MATERIAL_DEEP_PURPLE_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_DEEP_PURPLE_400 = addBaseStyle(new PlainStyle("plain_deep_purple_400", Color.MATERIAL_DEEP_PURPLE_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_DEEP_PURPLE_500 = addBaseStyle(new PlainStyle("plain_deep_purple_500", Color.MATERIAL_DEEP_PURPLE_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_DEEP_PURPLE_600 = addBaseStyle(new PlainStyle("plain_deep_purple_600", Color.MATERIAL_DEEP_PURPLE_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_DEEP_PURPLE_700 = addBaseStyle(new PlainStyle("plain_deep_purple_700", Color.MATERIAL_DEEP_PURPLE_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_DEEP_PURPLE_800 = addBaseStyle(new PlainStyle("plain_deep_purple_800", Color.MATERIAL_DEEP_PURPLE_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_DEEP_PURPLE_900 = addBaseStyle(new PlainStyle("plain_deep_purple_900", Color.MATERIAL_DEEP_PURPLE_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_DEEP_PURPLE_A100 = addBaseStyle(new PlainStyle("plain_deep_purple_a100", Color.MATERIAL_DEEP_PURPLE_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_DEEP_PURPLE_A200 = addBaseStyle(new PlainStyle("plain_deep_purple_a200", Color.MATERIAL_DEEP_PURPLE_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_DEEP_PURPLE_A400 = addBaseStyle(new PlainStyle("plain_deep_purple_a400", Color.MATERIAL_DEEP_PURPLE_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_DEEP_PURPLE_A700 = addBaseStyle(new PlainStyle("plain_deep_purple_a700", Color.MATERIAL_DEEP_PURPLE_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_INDIGO_50 = addBaseStyle(new PlainStyle("plain_indigo_50", Color.MATERIAL_INDIGO_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_INDIGO_100 = addBaseStyle(new PlainStyle("plain_indigo_100", Color.MATERIAL_INDIGO_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_INDIGO_200 = addBaseStyle(new PlainStyle("plain_indigo_200", Color.MATERIAL_INDIGO_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_INDIGO_300 = addBaseStyle(new PlainStyle("plain_indigo_300", Color.MATERIAL_INDIGO_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_INDIGO_400 = addBaseStyle(new PlainStyle("plain_indigo_400", Color.MATERIAL_INDIGO_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_INDIGO_500 = addBaseStyle(new PlainStyle("plain_indigo_500", Color.MATERIAL_INDIGO_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_INDIGO_600 = addBaseStyle(new PlainStyle("plain_indigo_600", Color.MATERIAL_INDIGO_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_INDIGO_700 = addBaseStyle(new PlainStyle("plain_indigo_700", Color.MATERIAL_INDIGO_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_INDIGO_800 = addBaseStyle(new PlainStyle("plain_indigo_800", Color.MATERIAL_INDIGO_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_INDIGO_900 = addBaseStyle(new PlainStyle("plain_indigo_900", Color.MATERIAL_INDIGO_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_INDIGO_A100 = addBaseStyle(new PlainStyle("plain_indigo_a100", Color.MATERIAL_INDIGO_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_INDIGO_A200 = addBaseStyle(new PlainStyle("plain_indigo_a200", Color.MATERIAL_INDIGO_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_INDIGO_A400 = addBaseStyle(new PlainStyle("plain_indigo_a400", Color.MATERIAL_INDIGO_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_INDIGO_A700 = addBaseStyle(new PlainStyle("plain_indigo_a700", Color.MATERIAL_INDIGO_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_BLUE_50 = addBaseStyle(new PlainStyle("plain_blue_50", Color.MATERIAL_BLUE_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_BLUE_100 = addBaseStyle(new PlainStyle("plain_blue_100", Color.MATERIAL_BLUE_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_BLUE_200 = addBaseStyle(new PlainStyle("plain_blue_200", Color.MATERIAL_BLUE_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_BLUE_300 = addBaseStyle(new PlainStyle("plain_blue_300", Color.MATERIAL_BLUE_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_BLUE_400 = addBaseStyle(new PlainStyle("plain_blue_400", Color.MATERIAL_BLUE_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_BLUE_500 = addBaseStyle(new PlainStyle("plain_blue_500", Color.MATERIAL_BLUE_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_BLUE_600 = addBaseStyle(new PlainStyle("plain_blue_600", Color.MATERIAL_BLUE_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_BLUE_700 = addBaseStyle(new PlainStyle("plain_blue_700", Color.MATERIAL_BLUE_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_BLUE_800 = addBaseStyle(new PlainStyle("plain_blue_800", Color.MATERIAL_BLUE_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_BLUE_900 = addBaseStyle(new PlainStyle("plain_blue_900", Color.MATERIAL_BLUE_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_BLUE_A100 = addBaseStyle(new PlainStyle("plain_blue_a100", Color.MATERIAL_BLUE_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_BLUE_A200 = addBaseStyle(new PlainStyle("plain_blue_a200", Color.MATERIAL_BLUE_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_BLUE_A400 = addBaseStyle(new PlainStyle("plain_blue_a400", Color.MATERIAL_BLUE_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_BLUE_A700 = addBaseStyle(new PlainStyle("plain_blue_a700", Color.MATERIAL_BLUE_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_LIGHT_BLUE_50 = addBaseStyle(new PlainStyle("plain_light_blue_50", Color.MATERIAL_LIGHT_BLUE_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_LIGHT_BLUE_100 = addBaseStyle(new PlainStyle("plain_light_blue_100", Color.MATERIAL_LIGHT_BLUE_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_LIGHT_BLUE_200 = addBaseStyle(new PlainStyle("plain_light_blue_200", Color.MATERIAL_LIGHT_BLUE_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_LIGHT_BLUE_300 = addBaseStyle(new PlainStyle("plain_light_blue_300", Color.MATERIAL_LIGHT_BLUE_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_LIGHT_BLUE_400 = addBaseStyle(new PlainStyle("plain_light_blue_400", Color.MATERIAL_LIGHT_BLUE_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_LIGHT_BLUE_500 = addBaseStyle(new PlainStyle("plain_light_blue_500", Color.MATERIAL_LIGHT_BLUE_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_LIGHT_BLUE_600 = addBaseStyle(new PlainStyle("plain_light_blue_600", Color.MATERIAL_LIGHT_BLUE_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_LIGHT_BLUE_700 = addBaseStyle(new PlainStyle("plain_light_blue_700", Color.MATERIAL_LIGHT_BLUE_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_LIGHT_BLUE_800 = addBaseStyle(new PlainStyle("plain_light_blue_800", Color.MATERIAL_LIGHT_BLUE_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_LIGHT_BLUE_900 = addBaseStyle(new PlainStyle("plain_light_blue_900", Color.MATERIAL_LIGHT_BLUE_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_LIGHT_BLUE_A100 = addBaseStyle(new PlainStyle("plain_light_blue_a100", Color.MATERIAL_LIGHT_BLUE_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_LIGHT_BLUE_A200 = addBaseStyle(new PlainStyle("plain_light_blue_a200", Color.MATERIAL_LIGHT_BLUE_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_LIGHT_BLUE_A400 = addBaseStyle(new PlainStyle("plain_light_blue_a400", Color.MATERIAL_LIGHT_BLUE_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_LIGHT_BLUE_A700 = addBaseStyle(new PlainStyle("plain_light_blue_a700", Color.MATERIAL_LIGHT_BLUE_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_CYAN_50 = addBaseStyle(new PlainStyle("plain_cyan_50", Color.MATERIAL_CYAN_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_CYAN_100 = addBaseStyle(new PlainStyle("plain_cyan_100", Color.MATERIAL_CYAN_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_CYAN_200 = addBaseStyle(new PlainStyle("plain_cyan_200", Color.MATERIAL_CYAN_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_CYAN_300 = addBaseStyle(new PlainStyle("plain_cyan_300", Color.MATERIAL_CYAN_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_CYAN_400 = addBaseStyle(new PlainStyle("plain_cyan_400", Color.MATERIAL_CYAN_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_CYAN_500 = addBaseStyle(new PlainStyle("plain_cyan_500", Color.MATERIAL_CYAN_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_CYAN_600 = addBaseStyle(new PlainStyle("plain_cyan_600", Color.MATERIAL_CYAN_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_CYAN_700 = addBaseStyle(new PlainStyle("plain_cyan_700", Color.MATERIAL_CYAN_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_CYAN_800 = addBaseStyle(new PlainStyle("plain_cyan_800", Color.MATERIAL_CYAN_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_CYAN_900 = addBaseStyle(new PlainStyle("plain_cyan_900", Color.MATERIAL_CYAN_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_CYAN_A100 = addBaseStyle(new PlainStyle("plain_cyan_a100", Color.MATERIAL_CYAN_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_CYAN_A200 = addBaseStyle(new PlainStyle("plain_cyan_a200", Color.MATERIAL_CYAN_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_CYAN_A400 = addBaseStyle(new PlainStyle("plain_cyan_a400", Color.MATERIAL_CYAN_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_CYAN_A700 = addBaseStyle(new PlainStyle("plain_cyan_a700", Color.MATERIAL_CYAN_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_TEAL_50 = addBaseStyle(new PlainStyle("plain_teal_50", Color.MATERIAL_TEAL_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_TEAL_100 = addBaseStyle(new PlainStyle("plain_teal_100", Color.MATERIAL_TEAL_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_TEAL_200 = addBaseStyle(new PlainStyle("plain_teal_200", Color.MATERIAL_TEAL_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_TEAL_300 = addBaseStyle(new PlainStyle("plain_teal_300", Color.MATERIAL_TEAL_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_TEAL_400 = addBaseStyle(new PlainStyle("plain_teal_400", Color.MATERIAL_TEAL_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_TEAL_500 = addBaseStyle(new PlainStyle("plain_teal_500", Color.MATERIAL_TEAL_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_TEAL_600 = addBaseStyle(new PlainStyle("plain_teal_600", Color.MATERIAL_TEAL_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_TEAL_700 = addBaseStyle(new PlainStyle("plain_teal_700", Color.MATERIAL_TEAL_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_TEAL_800 = addBaseStyle(new PlainStyle("plain_teal_800", Color.MATERIAL_TEAL_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_TEAL_900 = addBaseStyle(new PlainStyle("plain_teal_900", Color.MATERIAL_TEAL_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_TEAL_A100 = addBaseStyle(new PlainStyle("plain_teal_a100", Color.MATERIAL_TEAL_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_TEAL_A200 = addBaseStyle(new PlainStyle("plain_teal_a200", Color.MATERIAL_TEAL_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_TEAL_A400 = addBaseStyle(new PlainStyle("plain_teal_a400", Color.MATERIAL_TEAL_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_TEAL_A700 = addBaseStyle(new PlainStyle("plain_teal_a700", Color.MATERIAL_TEAL_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_GREEN_50 = addBaseStyle(new PlainStyle("plain_green_50", Color.MATERIAL_GREEN_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_GREEN_100 = addBaseStyle(new PlainStyle("plain_green_100", Color.MATERIAL_GREEN_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_GREEN_200 = addBaseStyle(new PlainStyle("plain_green_200", Color.MATERIAL_GREEN_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_GREEN_300 = addBaseStyle(new PlainStyle("plain_green_300", Color.MATERIAL_GREEN_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_GREEN_400 = addBaseStyle(new PlainStyle("plain_green_400", Color.MATERIAL_GREEN_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_GREEN_500 = addBaseStyle(new PlainStyle("plain_green_500", Color.MATERIAL_GREEN_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_GREEN_600 = addBaseStyle(new PlainStyle("plain_green_600", Color.MATERIAL_GREEN_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_GREEN_700 = addBaseStyle(new PlainStyle("plain_green_700", Color.MATERIAL_GREEN_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_GREEN_800 = addBaseStyle(new PlainStyle("plain_green_800", Color.MATERIAL_GREEN_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_GREEN_900 = addBaseStyle(new PlainStyle("plain_green_900", Color.MATERIAL_GREEN_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_GREEN_A100 = addBaseStyle(new PlainStyle("plain_green_a100", Color.MATERIAL_GREEN_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_GREEN_A200 = addBaseStyle(new PlainStyle("plain_green_a200", Color.MATERIAL_GREEN_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_GREEN_A400 = addBaseStyle(new PlainStyle("plain_green_a400", Color.MATERIAL_GREEN_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_GREEN_A700 = addBaseStyle(new PlainStyle("plain_green_a700", Color.MATERIAL_GREEN_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_LIGHT_GREEN_50 = addBaseStyle(new PlainStyle("plain_light_green_50", Color.MATERIAL_LIGHT_GREEN_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_LIGHT_GREEN_100 = addBaseStyle(new PlainStyle("plain_light_green_100", Color.MATERIAL_LIGHT_GREEN_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_LIGHT_GREEN_200 = addBaseStyle(new PlainStyle("plain_light_green_200", Color.MATERIAL_LIGHT_GREEN_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_LIGHT_GREEN_300 = addBaseStyle(new PlainStyle("plain_light_green_300", Color.MATERIAL_LIGHT_GREEN_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_LIGHT_GREEN_400 = addBaseStyle(new PlainStyle("plain_light_green_400", Color.MATERIAL_LIGHT_GREEN_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_LIGHT_GREEN_500 = addBaseStyle(new PlainStyle("plain_light_green_500", Color.MATERIAL_LIGHT_GREEN_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_LIGHT_GREEN_600 = addBaseStyle(new PlainStyle("plain_light_green_600", Color.MATERIAL_LIGHT_GREEN_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_LIGHT_GREEN_700 = addBaseStyle(new PlainStyle("plain_light_green_700", Color.MATERIAL_LIGHT_GREEN_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_LIGHT_GREEN_800 = addBaseStyle(new PlainStyle("plain_light_green_800", Color.MATERIAL_LIGHT_GREEN_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_LIGHT_GREEN_900 = addBaseStyle(new PlainStyle("plain_light_green_900", Color.MATERIAL_LIGHT_GREEN_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_LIGHT_GREEN_A100 = addBaseStyle(new PlainStyle("plain_light_green_a100", Color.MATERIAL_LIGHT_GREEN_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_LIGHT_GREEN_A200 = addBaseStyle(new PlainStyle("plain_light_green_a200", Color.MATERIAL_LIGHT_GREEN_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_LIGHT_GREEN_A400 = addBaseStyle(new PlainStyle("plain_light_green_a400", Color.MATERIAL_LIGHT_GREEN_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_LIGHT_GREEN_A700 = addBaseStyle(new PlainStyle("plain_light_green_a700", Color.MATERIAL_LIGHT_GREEN_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_LIME_50 = addBaseStyle(new PlainStyle("plain_lime_50", Color.MATERIAL_LIME_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_LIME_100 = addBaseStyle(new PlainStyle("plain_lime_100", Color.MATERIAL_LIME_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_LIME_200 = addBaseStyle(new PlainStyle("plain_lime_200", Color.MATERIAL_LIME_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_LIME_300 = addBaseStyle(new PlainStyle("plain_lime_300", Color.MATERIAL_LIME_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_LIME_400 = addBaseStyle(new PlainStyle("plain_lime_400", Color.MATERIAL_LIME_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_LIME_500 = addBaseStyle(new PlainStyle("plain_lime_500", Color.MATERIAL_LIME_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_LIME_600 = addBaseStyle(new PlainStyle("plain_lime_600", Color.MATERIAL_LIME_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_LIME_700 = addBaseStyle(new PlainStyle("plain_lime_700", Color.MATERIAL_LIME_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_LIME_800 = addBaseStyle(new PlainStyle("plain_lime_800", Color.MATERIAL_LIME_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_LIME_900 = addBaseStyle(new PlainStyle("plain_lime_900", Color.MATERIAL_LIME_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_LIME_A100 = addBaseStyle(new PlainStyle("plain_lime_a100", Color.MATERIAL_LIME_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_LIME_A200 = addBaseStyle(new PlainStyle("plain_lime_a200", Color.MATERIAL_LIME_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_LIME_A400 = addBaseStyle(new PlainStyle("plain_lime_a400", Color.MATERIAL_LIME_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_LIME_A700 = addBaseStyle(new PlainStyle("plain_lime_a700", Color.MATERIAL_LIME_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_YELLOW_50 = addBaseStyle(new PlainStyle("plain_yellow_50", Color.MATERIAL_YELLOW_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_YELLOW_100 = addBaseStyle(new PlainStyle("plain_yellow_100", Color.MATERIAL_YELLOW_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_YELLOW_200 = addBaseStyle(new PlainStyle("plain_yellow_200", Color.MATERIAL_YELLOW_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_YELLOW_300 = addBaseStyle(new PlainStyle("plain_yellow_300", Color.MATERIAL_YELLOW_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_YELLOW_400 = addBaseStyle(new PlainStyle("plain_yellow_400", Color.MATERIAL_YELLOW_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_YELLOW_500 = addBaseStyle(new PlainStyle("plain_yellow_500", Color.MATERIAL_YELLOW_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_YELLOW_600 = addBaseStyle(new PlainStyle("plain_yellow_600", Color.MATERIAL_YELLOW_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_YELLOW_700 = addBaseStyle(new PlainStyle("plain_yellow_700", Color.MATERIAL_YELLOW_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_YELLOW_800 = addBaseStyle(new PlainStyle("plain_yellow_800", Color.MATERIAL_YELLOW_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_YELLOW_900 = addBaseStyle(new PlainStyle("plain_yellow_900", Color.MATERIAL_YELLOW_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_YELLOW_A100 = addBaseStyle(new PlainStyle("plain_yellow_a100", Color.MATERIAL_YELLOW_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_YELLOW_A200 = addBaseStyle(new PlainStyle("plain_yellow_a200", Color.MATERIAL_YELLOW_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_YELLOW_A400 = addBaseStyle(new PlainStyle("plain_yellow_a400", Color.MATERIAL_YELLOW_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_YELLOW_A700 = addBaseStyle(new PlainStyle("plain_yellow_a700", Color.MATERIAL_YELLOW_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_AMBER_50 = addBaseStyle(new PlainStyle("plain_amber_50", Color.MATERIAL_AMBER_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_AMBER_100 = addBaseStyle(new PlainStyle("plain_amber_100", Color.MATERIAL_AMBER_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_AMBER_200 = addBaseStyle(new PlainStyle("plain_amber_200", Color.MATERIAL_AMBER_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_AMBER_300 = addBaseStyle(new PlainStyle("plain_amber_300", Color.MATERIAL_AMBER_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_AMBER_400 = addBaseStyle(new PlainStyle("plain_amber_400", Color.MATERIAL_AMBER_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_AMBER_500 = addBaseStyle(new PlainStyle("plain_amber_500", Color.MATERIAL_AMBER_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_AMBER_600 = addBaseStyle(new PlainStyle("plain_amber_600", Color.MATERIAL_AMBER_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_AMBER_700 = addBaseStyle(new PlainStyle("plain_amber_700", Color.MATERIAL_AMBER_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_AMBER_800 = addBaseStyle(new PlainStyle("plain_amber_800", Color.MATERIAL_AMBER_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_AMBER_900 = addBaseStyle(new PlainStyle("plain_amber_900", Color.MATERIAL_AMBER_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_AMBER_A100 = addBaseStyle(new PlainStyle("plain_amber_a100", Color.MATERIAL_AMBER_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_AMBER_A200 = addBaseStyle(new PlainStyle("plain_amber_a200", Color.MATERIAL_AMBER_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_AMBER_A400 = addBaseStyle(new PlainStyle("plain_amber_a400", Color.MATERIAL_AMBER_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_AMBER_A700 = addBaseStyle(new PlainStyle("plain_amber_a700", Color.MATERIAL_AMBER_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_ORANGE_50 = addBaseStyle(new PlainStyle("plain_orange_50", Color.MATERIAL_ORANGE_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_ORANGE_100 = addBaseStyle(new PlainStyle("plain_orange_100", Color.MATERIAL_ORANGE_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_ORANGE_200 = addBaseStyle(new PlainStyle("plain_orange_200", Color.MATERIAL_ORANGE_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_ORANGE_300 = addBaseStyle(new PlainStyle("plain_orange_300", Color.MATERIAL_ORANGE_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_ORANGE_400 = addBaseStyle(new PlainStyle("plain_orange_400", Color.MATERIAL_ORANGE_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_ORANGE_500 = addBaseStyle(new PlainStyle("plain_orange_500", Color.MATERIAL_ORANGE_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_ORANGE_600 = addBaseStyle(new PlainStyle("plain_orange_600", Color.MATERIAL_ORANGE_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_ORANGE_700 = addBaseStyle(new PlainStyle("plain_orange_700", Color.MATERIAL_ORANGE_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_ORANGE_800 = addBaseStyle(new PlainStyle("plain_orange_800", Color.MATERIAL_ORANGE_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_ORANGE_900 = addBaseStyle(new PlainStyle("plain_orange_900", Color.MATERIAL_ORANGE_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_ORANGE_A100 = addBaseStyle(new PlainStyle("plain_orange_a100", Color.MATERIAL_ORANGE_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_ORANGE_A200 = addBaseStyle(new PlainStyle("plain_orange_a200", Color.MATERIAL_ORANGE_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_ORANGE_A400 = addBaseStyle(new PlainStyle("plain_orange_a400", Color.MATERIAL_ORANGE_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_ORANGE_A700 = addBaseStyle(new PlainStyle("plain_orange_a700", Color.MATERIAL_ORANGE_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_DEEP_ORANGE_50 = addBaseStyle(new PlainStyle("plain_deep_orange_50", Color.MATERIAL_DEEP_ORANGE_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_DEEP_ORANGE_100 = addBaseStyle(new PlainStyle("plain_deep_orange_100", Color.MATERIAL_DEEP_ORANGE_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_DEEP_ORANGE_200 = addBaseStyle(new PlainStyle("plain_deep_orange_200", Color.MATERIAL_DEEP_ORANGE_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_DEEP_ORANGE_300 = addBaseStyle(new PlainStyle("plain_deep_orange_300", Color.MATERIAL_DEEP_ORANGE_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_DEEP_ORANGE_400 = addBaseStyle(new PlainStyle("plain_deep_orange_400", Color.MATERIAL_DEEP_ORANGE_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_DEEP_ORANGE_500 = addBaseStyle(new PlainStyle("plain_deep_orange_500", Color.MATERIAL_DEEP_ORANGE_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_DEEP_ORANGE_600 = addBaseStyle(new PlainStyle("plain_deep_orange_600", Color.MATERIAL_DEEP_ORANGE_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_DEEP_ORANGE_700 = addBaseStyle(new PlainStyle("plain_deep_orange_700", Color.MATERIAL_DEEP_ORANGE_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_DEEP_ORANGE_800 = addBaseStyle(new PlainStyle("plain_deep_orange_800", Color.MATERIAL_DEEP_ORANGE_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_DEEP_ORANGE_900 = addBaseStyle(new PlainStyle("plain_deep_orange_900", Color.MATERIAL_DEEP_ORANGE_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_DEEP_ORANGE_A100 = addBaseStyle(new PlainStyle("plain_deep_orange_a100", Color.MATERIAL_DEEP_ORANGE_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_DEEP_ORANGE_A200 = addBaseStyle(new PlainStyle("plain_deep_orange_a200", Color.MATERIAL_DEEP_ORANGE_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_DEEP_ORANGE_A400 = addBaseStyle(new PlainStyle("plain_deep_orange_a400", Color.MATERIAL_DEEP_ORANGE_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_DEEP_ORANGE_A700 = addBaseStyle(new PlainStyle("plain_deep_orange_a700", Color.MATERIAL_DEEP_ORANGE_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_BROWN_50 = addBaseStyle(new PlainStyle("plain_brown_50", Color.MATERIAL_BROWN_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_BROWN_100 = addBaseStyle(new PlainStyle("plain_brown_100", Color.MATERIAL_BROWN_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_BROWN_200 = addBaseStyle(new PlainStyle("plain_brown_200", Color.MATERIAL_BROWN_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_BROWN_300 = addBaseStyle(new PlainStyle("plain_brown_300", Color.MATERIAL_BROWN_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_BROWN_400 = addBaseStyle(new PlainStyle("plain_brown_400", Color.MATERIAL_BROWN_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_BROWN_500 = addBaseStyle(new PlainStyle("plain_brown_500", Color.MATERIAL_BROWN_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_BROWN_600 = addBaseStyle(new PlainStyle("plain_brown_600", Color.MATERIAL_BROWN_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_BROWN_700 = addBaseStyle(new PlainStyle("plain_brown_700", Color.MATERIAL_BROWN_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_BROWN_800 = addBaseStyle(new PlainStyle("plain_brown_800", Color.MATERIAL_BROWN_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_BROWN_900 = addBaseStyle(new PlainStyle("plain_brown_900", Color.MATERIAL_BROWN_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_GREY_50 = addBaseStyle(new PlainStyle("plain_grey_50", Color.MATERIAL_GREY_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_GREY_100 = addBaseStyle(new PlainStyle("plain_grey_100", Color.MATERIAL_GREY_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_GREY_200 = addBaseStyle(new PlainStyle("plain_grey_200", Color.MATERIAL_GREY_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_GREY_300 = addBaseStyle(new PlainStyle("plain_grey_300", Color.MATERIAL_GREY_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_GREY_400 = addBaseStyle(new PlainStyle("plain_grey_400", Color.MATERIAL_GREY_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_GREY_500 = addBaseStyle(new PlainStyle("plain_grey_500", Color.MATERIAL_GREY_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_GREY_600 = addBaseStyle(new PlainStyle("plain_grey_600", Color.MATERIAL_GREY_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_GREY_700 = addBaseStyle(new PlainStyle("plain_grey_700", Color.MATERIAL_GREY_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_GREY_800 = addBaseStyle(new PlainStyle("plain_grey_800", Color.MATERIAL_GREY_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_GREY_900 = addBaseStyle(new PlainStyle("plain_grey_900", Color.MATERIAL_GREY_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_BLACK_1000 = addBaseStyle(new PlainStyle("plain_black_1000", Color.MATERIAL_BLACK_1000.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_WHITE_1000 = addBaseStyle(new PlainStyle("plain_white_1000", Color.MATERIAL_WHITE_1000.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_BLUE_GREY_50 = addBaseStyle(new PlainStyle("plain_blue_grey_50", Color.MATERIAL_BLUE_GREY_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_BLUE_GREY_100 = addBaseStyle(new PlainStyle("plain_blue_grey_100", Color.MATERIAL_BLUE_GREY_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_BLUE_GREY_200 = addBaseStyle(new PlainStyle("plain_blue_grey_200", Color.MATERIAL_BLUE_GREY_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_BLUE_GREY_300 = addBaseStyle(new PlainStyle("plain_blue_grey_300", Color.MATERIAL_BLUE_GREY_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_BLUE_GREY_400 = addBaseStyle(new PlainStyle("plain_blue_grey_400", Color.MATERIAL_BLUE_GREY_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_BLUE_GREY_500 = addBaseStyle(new PlainStyle("plain_blue_grey_500", Color.MATERIAL_BLUE_GREY_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_BLUE_GREY_600 = addBaseStyle(new PlainStyle("plain_blue_grey_600", Color.MATERIAL_BLUE_GREY_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_BLUE_GREY_700 = addBaseStyle(new PlainStyle("plain_blue_grey_700", Color.MATERIAL_BLUE_GREY_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_BLUE_GREY_800 = addBaseStyle(new PlainStyle("plain_blue_grey_800", Color.MATERIAL_BLUE_GREY_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_BLUE_GREY_900 = addBaseStyle(new PlainStyle("plain_blue_grey_900", Color.MATERIAL_BLUE_GREY_900.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_PRIMARY = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.PRIMARY.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SUCCESS = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.SUCCESS.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_INFO = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.INFO.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_WARNING = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.WARNING.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_DANGER = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.DANGER.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_RED_50 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_RED_50.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_RED_100 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_RED_100.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_RED_200 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_RED_200.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_RED_300 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_RED_300.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_RED_400 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_RED_400.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_RED_500 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_RED_500.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_RED_600 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_RED_600.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_RED_700 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_RED_700.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_RED_800 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_RED_800.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_RED_900 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_RED_900.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_RED_A100 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_RED_A100.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_RED_A200 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_RED_A200.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_RED_A400 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_RED_A400.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_RED_A700 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_RED_A700.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_PINK_50 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_PINK_50.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_PINK_100 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_PINK_100.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_PINK_200 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_PINK_200.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_PINK_300 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_PINK_300.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_PINK_400 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_PINK_400.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_PINK_500 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_PINK_500.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_PINK_600 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_PINK_600.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_PINK_700 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_PINK_700.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_PINK_800 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_PINK_800.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_PINK_900 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_PINK_900.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_PINK_A100 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_PINK_A100.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_PINK_A200 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_PINK_A200.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_PINK_A400 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_PINK_A400.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_PINK_A700 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_PINK_A700.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_PURPLE_50 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_PURPLE_50.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_PURPLE_100 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_PURPLE_100.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_PURPLE_200 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_PURPLE_200.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_PURPLE_300 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_PURPLE_300.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_PURPLE_400 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_PURPLE_400.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_PURPLE_500 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_PURPLE_500.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_PURPLE_600 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_PURPLE_600.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_PURPLE_700 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_PURPLE_700.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_PURPLE_800 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_PURPLE_800.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_PURPLE_900 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_PURPLE_900.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_PURPLE_A100 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_PURPLE_A100.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_PURPLE_A200 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_PURPLE_A200.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_PURPLE_A400 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_PURPLE_A400.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_PURPLE_A700 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_PURPLE_A700.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_DEEP_PURPLE_50 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_DEEP_PURPLE_50.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_DEEP_PURPLE_100 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_DEEP_PURPLE_100.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_DEEP_PURPLE_200 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_DEEP_PURPLE_200.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_DEEP_PURPLE_300 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_DEEP_PURPLE_300.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_DEEP_PURPLE_400 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_DEEP_PURPLE_400.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_DEEP_PURPLE_500 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_DEEP_PURPLE_500.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_DEEP_PURPLE_600 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_DEEP_PURPLE_600.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_DEEP_PURPLE_700 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_DEEP_PURPLE_700.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_DEEP_PURPLE_800 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_DEEP_PURPLE_800.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_DEEP_PURPLE_900 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_DEEP_PURPLE_900.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_DEEP_PURPLE_A100 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_DEEP_PURPLE_A100.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_DEEP_PURPLE_A200 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_DEEP_PURPLE_A200.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_DEEP_PURPLE_A400 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_DEEP_PURPLE_A400.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_DEEP_PURPLE_A700 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_DEEP_PURPLE_A700.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_INDIGO_50 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_INDIGO_50.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_INDIGO_100 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_INDIGO_100.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_INDIGO_200 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_INDIGO_200.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_INDIGO_300 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_INDIGO_300.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_INDIGO_400 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_INDIGO_400.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_INDIGO_500 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_INDIGO_500.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_INDIGO_600 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_INDIGO_600.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_INDIGO_700 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_INDIGO_700.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_INDIGO_800 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_INDIGO_800.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_INDIGO_900 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_INDIGO_900.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_INDIGO_A100 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_INDIGO_A100.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_INDIGO_A200 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_INDIGO_A200.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_INDIGO_A400 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_INDIGO_A400.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_INDIGO_A700 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_INDIGO_A700.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_BLUE_50 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_BLUE_50.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_BLUE_100 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_BLUE_100.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_BLUE_200 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_BLUE_200.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_BLUE_300 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_BLUE_300.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_BLUE_400 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_BLUE_400.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_BLUE_500 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_BLUE_500.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_BLUE_600 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_BLUE_600.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_BLUE_700 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_BLUE_700.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_BLUE_800 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_BLUE_800.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_BLUE_900 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_BLUE_900.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_BLUE_A100 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_BLUE_A100.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_BLUE_A200 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_BLUE_A200.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_BLUE_A400 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_BLUE_A400.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_BLUE_A700 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_BLUE_A700.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_LIGHT_BLUE_50 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_LIGHT_BLUE_50.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_LIGHT_BLUE_100 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_LIGHT_BLUE_100.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_LIGHT_BLUE_200 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_LIGHT_BLUE_200.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_LIGHT_BLUE_300 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_LIGHT_BLUE_300.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_LIGHT_BLUE_400 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_LIGHT_BLUE_400.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_LIGHT_BLUE_500 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_LIGHT_BLUE_500.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_LIGHT_BLUE_600 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_LIGHT_BLUE_600.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_LIGHT_BLUE_700 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_LIGHT_BLUE_700.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_LIGHT_BLUE_800 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_LIGHT_BLUE_800.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_LIGHT_BLUE_900 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_LIGHT_BLUE_900.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_LIGHT_BLUE_A100 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_LIGHT_BLUE_A100.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_LIGHT_BLUE_A200 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_LIGHT_BLUE_A200.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_LIGHT_BLUE_A400 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_LIGHT_BLUE_A400.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_LIGHT_BLUE_A700 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_LIGHT_BLUE_A700.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_CYAN_50 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_CYAN_50.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_CYAN_100 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_CYAN_100.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_CYAN_200 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_CYAN_200.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_CYAN_300 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_CYAN_300.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_CYAN_400 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_CYAN_400.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_CYAN_500 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_CYAN_500.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_CYAN_600 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_CYAN_600.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_CYAN_700 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_CYAN_700.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_CYAN_800 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_CYAN_800.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_CYAN_900 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_CYAN_900.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_CYAN_A100 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_CYAN_A100.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_CYAN_A200 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_CYAN_A200.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_CYAN_A400 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_CYAN_A400.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_CYAN_A700 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_CYAN_A700.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_TEAL_50 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_TEAL_50.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_TEAL_100 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_TEAL_100.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_TEAL_200 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_TEAL_200.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_TEAL_300 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_TEAL_300.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_TEAL_400 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_TEAL_400.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_TEAL_500 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_TEAL_500.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_TEAL_600 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_TEAL_600.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_TEAL_700 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_TEAL_700.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_TEAL_800 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_TEAL_800.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_TEAL_900 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_TEAL_900.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_TEAL_A100 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_TEAL_A100.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_TEAL_A200 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_TEAL_A200.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_TEAL_A400 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_TEAL_A400.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_TEAL_A700 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_TEAL_A700.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_GREEN_50 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_GREEN_50.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_GREEN_100 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_GREEN_100.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_GREEN_200 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_GREEN_200.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_GREEN_300 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_GREEN_300.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_GREEN_400 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_GREEN_400.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_GREEN_500 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_GREEN_500.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_GREEN_600 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_GREEN_600.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_GREEN_700 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_GREEN_700.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_GREEN_800 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_GREEN_800.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_GREEN_900 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_GREEN_900.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_GREEN_A100 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_GREEN_A100.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_GREEN_A200 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_GREEN_A200.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_GREEN_A400 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_GREEN_A400.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_GREEN_A700 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_GREEN_A700.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_LIGHT_GREEN_50 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_LIGHT_GREEN_50.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_LIGHT_GREEN_100 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_LIGHT_GREEN_100.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_LIGHT_GREEN_200 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_LIGHT_GREEN_200.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_LIGHT_GREEN_300 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_LIGHT_GREEN_300.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_LIGHT_GREEN_400 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_LIGHT_GREEN_400.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_LIGHT_GREEN_500 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_LIGHT_GREEN_500.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_LIGHT_GREEN_600 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_LIGHT_GREEN_600.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_LIGHT_GREEN_700 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_LIGHT_GREEN_700.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_LIGHT_GREEN_800 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_LIGHT_GREEN_800.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_LIGHT_GREEN_900 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_LIGHT_GREEN_900.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_LIGHT_GREEN_A100 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_LIGHT_GREEN_A100.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_LIGHT_GREEN_A200 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_LIGHT_GREEN_A200.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_LIGHT_GREEN_A400 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_LIGHT_GREEN_A400.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_LIGHT_GREEN_A700 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_LIGHT_GREEN_A700.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_LIME_50 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_LIME_50.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_LIME_100 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_LIME_100.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_LIME_200 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_LIME_200.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_LIME_300 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_LIME_300.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_LIME_400 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_LIME_400.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_LIME_500 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_LIME_500.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_LIME_600 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_LIME_600.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_LIME_700 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_LIME_700.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_LIME_800 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_LIME_800.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_LIME_900 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_LIME_900.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_LIME_A100 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_LIME_A100.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_LIME_A200 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_LIME_A200.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_LIME_A400 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_LIME_A400.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_LIME_A700 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_LIME_A700.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_YELLOW_50 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_YELLOW_50.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_YELLOW_100 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_YELLOW_100.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_YELLOW_200 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_YELLOW_200.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_YELLOW_300 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_YELLOW_300.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_YELLOW_400 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_YELLOW_400.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_YELLOW_500 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_YELLOW_500.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_YELLOW_600 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_YELLOW_600.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_YELLOW_700 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_YELLOW_700.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_YELLOW_800 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_YELLOW_800.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_YELLOW_900 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_YELLOW_900.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_YELLOW_A100 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_YELLOW_A100.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_YELLOW_A200 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_YELLOW_A200.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_YELLOW_A400 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_YELLOW_A400.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_YELLOW_A700 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_YELLOW_A700.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_AMBER_50 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_AMBER_50.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_AMBER_100 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_AMBER_100.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_AMBER_200 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_AMBER_200.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_AMBER_300 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_AMBER_300.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_AMBER_400 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_AMBER_400.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_AMBER_500 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_AMBER_500.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_AMBER_600 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_AMBER_600.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_AMBER_700 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_AMBER_700.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_AMBER_800 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_AMBER_800.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_AMBER_900 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_AMBER_900.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_AMBER_A100 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_AMBER_A100.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_AMBER_A200 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_AMBER_A200.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_AMBER_A400 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_AMBER_A400.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_AMBER_A700 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_AMBER_A700.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_ORANGE_50 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_ORANGE_50.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_ORANGE_100 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_ORANGE_100.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_ORANGE_200 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_ORANGE_200.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_ORANGE_300 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_ORANGE_300.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_ORANGE_400 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_ORANGE_400.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_ORANGE_500 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_ORANGE_500.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_ORANGE_600 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_ORANGE_600.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_ORANGE_700 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_ORANGE_700.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_ORANGE_800 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_ORANGE_800.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_ORANGE_900 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_ORANGE_900.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_ORANGE_A100 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_ORANGE_A100.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_ORANGE_A200 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_ORANGE_A200.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_ORANGE_A400 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_ORANGE_A400.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_ORANGE_A700 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_ORANGE_A700.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_DEEP_ORANGE_50 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_DEEP_ORANGE_50.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_DEEP_ORANGE_100 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_DEEP_ORANGE_100.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_DEEP_ORANGE_200 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_DEEP_ORANGE_200.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_DEEP_ORANGE_300 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_DEEP_ORANGE_300.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_DEEP_ORANGE_400 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_DEEP_ORANGE_400.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_DEEP_ORANGE_500 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_DEEP_ORANGE_500.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_DEEP_ORANGE_600 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_DEEP_ORANGE_600.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_DEEP_ORANGE_700 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_DEEP_ORANGE_700.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_DEEP_ORANGE_800 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_DEEP_ORANGE_800.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_DEEP_ORANGE_900 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_DEEP_ORANGE_900.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_DEEP_ORANGE_A100 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_DEEP_ORANGE_A100.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_DEEP_ORANGE_A200 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_DEEP_ORANGE_A200.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_DEEP_ORANGE_A400 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_DEEP_ORANGE_A400.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_DEEP_ORANGE_A700 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_DEEP_ORANGE_A700.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_BROWN_50 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_BROWN_50.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_BROWN_100 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_BROWN_100.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_BROWN_200 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_BROWN_200.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_BROWN_300 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_BROWN_300.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_BROWN_400 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_BROWN_400.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_BROWN_500 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_BROWN_500.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_BROWN_600 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_BROWN_600.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_BROWN_700 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_BROWN_700.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_BROWN_800 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_BROWN_800.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_BROWN_900 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_BROWN_900.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_GREY_50 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_GREY_50.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_GREY_100 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_GREY_100.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_GREY_200 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_GREY_200.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_GREY_300 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_GREY_300.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_GREY_400 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_GREY_400.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_GREY_500 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_GREY_500.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_GREY_600 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_GREY_600.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_GREY_700 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_GREY_700.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_GREY_800 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_GREY_800.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_GREY_900 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_GREY_900.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_BLACK_1000 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_BLACK_1000.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_WHITE_1000 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_WHITE_1000.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_BLUE_GREY_50 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_BLUE_GREY_50.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_BLUE_GREY_100 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_BLUE_GREY_100.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_BLUE_GREY_200 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_BLUE_GREY_200.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_BLUE_GREY_300 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_BLUE_GREY_300.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_BLUE_GREY_400 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_BLUE_GREY_400.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_BLUE_GREY_500 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_BLUE_GREY_500.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_BLUE_GREY_600 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_BLUE_GREY_600.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_BLUE_GREY_700 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_BLUE_GREY_700.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_BLUE_GREY_800 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_BLUE_GREY_800.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_BLUE_GREY_900 = addBaseStyle(new MaterialIconStyle(PLAIN, RgbaColor.MATERIAL_BLUE_GREY_900.toHtmlColorString()));
 
 	//PLAIN_SHADOW styles:
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_BOOTSTRAP_PRIMARY = addBaseStyle(new PlainShadowStyle("plain_shadow_bootstrap_primary", Color.BOOTSTRAP_PRIMARY.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_BOOTSTRAP_SUCCESS = addBaseStyle(new PlainShadowStyle("plain_shadow_bootstrap_success", Color.BOOTSTRAP_SUCCESS.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_BOOTSTRAP_INFO = addBaseStyle(new PlainShadowStyle("plain_shadow_bootstrap_info", Color.BOOTSTRAP_INFO.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_BOOTSTRAP_WARNING = addBaseStyle(new PlainShadowStyle("plain_shadow_bootstrap_warning", Color.BOOTSTRAP_WARNING.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_BOOTSTRAP_DANGER = addBaseStyle(new PlainShadowStyle("plain_shadow_bootstrap_danger", Color.BOOTSTRAP_DANGER.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_RED_50 = addBaseStyle(new PlainShadowStyle("plain_shadow_red_50", Color.MATERIAL_RED_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_RED_100 = addBaseStyle(new PlainShadowStyle("plain_shadow_red_100", Color.MATERIAL_RED_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_RED_200 = addBaseStyle(new PlainShadowStyle("plain_shadow_red_200", Color.MATERIAL_RED_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_RED_300 = addBaseStyle(new PlainShadowStyle("plain_shadow_red_300", Color.MATERIAL_RED_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_RED_400 = addBaseStyle(new PlainShadowStyle("plain_shadow_red_400", Color.MATERIAL_RED_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_RED_500 = addBaseStyle(new PlainShadowStyle("plain_shadow_red_500", Color.MATERIAL_RED_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_RED_600 = addBaseStyle(new PlainShadowStyle("plain_shadow_red_600", Color.MATERIAL_RED_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_RED_700 = addBaseStyle(new PlainShadowStyle("plain_shadow_red_700", Color.MATERIAL_RED_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_RED_800 = addBaseStyle(new PlainShadowStyle("plain_shadow_red_800", Color.MATERIAL_RED_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_RED_900 = addBaseStyle(new PlainShadowStyle("plain_shadow_red_900", Color.MATERIAL_RED_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_RED_A100 = addBaseStyle(new PlainShadowStyle("plain_shadow_red_a100", Color.MATERIAL_RED_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_RED_A200 = addBaseStyle(new PlainShadowStyle("plain_shadow_red_a200", Color.MATERIAL_RED_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_RED_A400 = addBaseStyle(new PlainShadowStyle("plain_shadow_red_a400", Color.MATERIAL_RED_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_RED_A700 = addBaseStyle(new PlainShadowStyle("plain_shadow_red_a700", Color.MATERIAL_RED_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_PINK_50 = addBaseStyle(new PlainShadowStyle("plain_shadow_pink_50", Color.MATERIAL_PINK_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_PINK_100 = addBaseStyle(new PlainShadowStyle("plain_shadow_pink_100", Color.MATERIAL_PINK_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_PINK_200 = addBaseStyle(new PlainShadowStyle("plain_shadow_pink_200", Color.MATERIAL_PINK_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_PINK_300 = addBaseStyle(new PlainShadowStyle("plain_shadow_pink_300", Color.MATERIAL_PINK_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_PINK_400 = addBaseStyle(new PlainShadowStyle("plain_shadow_pink_400", Color.MATERIAL_PINK_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_PINK_500 = addBaseStyle(new PlainShadowStyle("plain_shadow_pink_500", Color.MATERIAL_PINK_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_PINK_600 = addBaseStyle(new PlainShadowStyle("plain_shadow_pink_600", Color.MATERIAL_PINK_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_PINK_700 = addBaseStyle(new PlainShadowStyle("plain_shadow_pink_700", Color.MATERIAL_PINK_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_PINK_800 = addBaseStyle(new PlainShadowStyle("plain_shadow_pink_800", Color.MATERIAL_PINK_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_PINK_900 = addBaseStyle(new PlainShadowStyle("plain_shadow_pink_900", Color.MATERIAL_PINK_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_PINK_A100 = addBaseStyle(new PlainShadowStyle("plain_shadow_pink_a100", Color.MATERIAL_PINK_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_PINK_A200 = addBaseStyle(new PlainShadowStyle("plain_shadow_pink_a200", Color.MATERIAL_PINK_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_PINK_A400 = addBaseStyle(new PlainShadowStyle("plain_shadow_pink_a400", Color.MATERIAL_PINK_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_PINK_A700 = addBaseStyle(new PlainShadowStyle("plain_shadow_pink_a700", Color.MATERIAL_PINK_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_PURPLE_50 = addBaseStyle(new PlainShadowStyle("plain_shadow_purple_50", Color.MATERIAL_PURPLE_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_PURPLE_100 = addBaseStyle(new PlainShadowStyle("plain_shadow_purple_100", Color.MATERIAL_PURPLE_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_PURPLE_200 = addBaseStyle(new PlainShadowStyle("plain_shadow_purple_200", Color.MATERIAL_PURPLE_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_PURPLE_300 = addBaseStyle(new PlainShadowStyle("plain_shadow_purple_300", Color.MATERIAL_PURPLE_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_PURPLE_400 = addBaseStyle(new PlainShadowStyle("plain_shadow_purple_400", Color.MATERIAL_PURPLE_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_PURPLE_500 = addBaseStyle(new PlainShadowStyle("plain_shadow_purple_500", Color.MATERIAL_PURPLE_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_PURPLE_600 = addBaseStyle(new PlainShadowStyle("plain_shadow_purple_600", Color.MATERIAL_PURPLE_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_PURPLE_700 = addBaseStyle(new PlainShadowStyle("plain_shadow_purple_700", Color.MATERIAL_PURPLE_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_PURPLE_800 = addBaseStyle(new PlainShadowStyle("plain_shadow_purple_800", Color.MATERIAL_PURPLE_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_PURPLE_900 = addBaseStyle(new PlainShadowStyle("plain_shadow_purple_900", Color.MATERIAL_PURPLE_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_PURPLE_A100 = addBaseStyle(new PlainShadowStyle("plain_shadow_purple_a100", Color.MATERIAL_PURPLE_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_PURPLE_A200 = addBaseStyle(new PlainShadowStyle("plain_shadow_purple_a200", Color.MATERIAL_PURPLE_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_PURPLE_A400 = addBaseStyle(new PlainShadowStyle("plain_shadow_purple_a400", Color.MATERIAL_PURPLE_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_PURPLE_A700 = addBaseStyle(new PlainShadowStyle("plain_shadow_purple_a700", Color.MATERIAL_PURPLE_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_DEEP_PURPLE_50 = addBaseStyle(new PlainShadowStyle("plain_shadow_deep_purple_50", Color.MATERIAL_DEEP_PURPLE_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_DEEP_PURPLE_100 = addBaseStyle(new PlainShadowStyle("plain_shadow_deep_purple_100", Color.MATERIAL_DEEP_PURPLE_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_DEEP_PURPLE_200 = addBaseStyle(new PlainShadowStyle("plain_shadow_deep_purple_200", Color.MATERIAL_DEEP_PURPLE_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_DEEP_PURPLE_300 = addBaseStyle(new PlainShadowStyle("plain_shadow_deep_purple_300", Color.MATERIAL_DEEP_PURPLE_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_DEEP_PURPLE_400 = addBaseStyle(new PlainShadowStyle("plain_shadow_deep_purple_400", Color.MATERIAL_DEEP_PURPLE_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_DEEP_PURPLE_500 = addBaseStyle(new PlainShadowStyle("plain_shadow_deep_purple_500", Color.MATERIAL_DEEP_PURPLE_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_DEEP_PURPLE_600 = addBaseStyle(new PlainShadowStyle("plain_shadow_deep_purple_600", Color.MATERIAL_DEEP_PURPLE_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_DEEP_PURPLE_700 = addBaseStyle(new PlainShadowStyle("plain_shadow_deep_purple_700", Color.MATERIAL_DEEP_PURPLE_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_DEEP_PURPLE_800 = addBaseStyle(new PlainShadowStyle("plain_shadow_deep_purple_800", Color.MATERIAL_DEEP_PURPLE_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_DEEP_PURPLE_900 = addBaseStyle(new PlainShadowStyle("plain_shadow_deep_purple_900", Color.MATERIAL_DEEP_PURPLE_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_DEEP_PURPLE_A100 = addBaseStyle(new PlainShadowStyle("plain_shadow_deep_purple_a100", Color.MATERIAL_DEEP_PURPLE_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_DEEP_PURPLE_A200 = addBaseStyle(new PlainShadowStyle("plain_shadow_deep_purple_a200", Color.MATERIAL_DEEP_PURPLE_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_DEEP_PURPLE_A400 = addBaseStyle(new PlainShadowStyle("plain_shadow_deep_purple_a400", Color.MATERIAL_DEEP_PURPLE_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_DEEP_PURPLE_A700 = addBaseStyle(new PlainShadowStyle("plain_shadow_deep_purple_a700", Color.MATERIAL_DEEP_PURPLE_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_INDIGO_50 = addBaseStyle(new PlainShadowStyle("plain_shadow_indigo_50", Color.MATERIAL_INDIGO_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_INDIGO_100 = addBaseStyle(new PlainShadowStyle("plain_shadow_indigo_100", Color.MATERIAL_INDIGO_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_INDIGO_200 = addBaseStyle(new PlainShadowStyle("plain_shadow_indigo_200", Color.MATERIAL_INDIGO_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_INDIGO_300 = addBaseStyle(new PlainShadowStyle("plain_shadow_indigo_300", Color.MATERIAL_INDIGO_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_INDIGO_400 = addBaseStyle(new PlainShadowStyle("plain_shadow_indigo_400", Color.MATERIAL_INDIGO_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_INDIGO_500 = addBaseStyle(new PlainShadowStyle("plain_shadow_indigo_500", Color.MATERIAL_INDIGO_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_INDIGO_600 = addBaseStyle(new PlainShadowStyle("plain_shadow_indigo_600", Color.MATERIAL_INDIGO_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_INDIGO_700 = addBaseStyle(new PlainShadowStyle("plain_shadow_indigo_700", Color.MATERIAL_INDIGO_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_INDIGO_800 = addBaseStyle(new PlainShadowStyle("plain_shadow_indigo_800", Color.MATERIAL_INDIGO_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_INDIGO_900 = addBaseStyle(new PlainShadowStyle("plain_shadow_indigo_900", Color.MATERIAL_INDIGO_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_INDIGO_A100 = addBaseStyle(new PlainShadowStyle("plain_shadow_indigo_a100", Color.MATERIAL_INDIGO_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_INDIGO_A200 = addBaseStyle(new PlainShadowStyle("plain_shadow_indigo_a200", Color.MATERIAL_INDIGO_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_INDIGO_A400 = addBaseStyle(new PlainShadowStyle("plain_shadow_indigo_a400", Color.MATERIAL_INDIGO_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_INDIGO_A700 = addBaseStyle(new PlainShadowStyle("plain_shadow_indigo_a700", Color.MATERIAL_INDIGO_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_BLUE_50 = addBaseStyle(new PlainShadowStyle("plain_shadow_blue_50", Color.MATERIAL_BLUE_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_BLUE_100 = addBaseStyle(new PlainShadowStyle("plain_shadow_blue_100", Color.MATERIAL_BLUE_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_BLUE_200 = addBaseStyle(new PlainShadowStyle("plain_shadow_blue_200", Color.MATERIAL_BLUE_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_BLUE_300 = addBaseStyle(new PlainShadowStyle("plain_shadow_blue_300", Color.MATERIAL_BLUE_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_BLUE_400 = addBaseStyle(new PlainShadowStyle("plain_shadow_blue_400", Color.MATERIAL_BLUE_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_BLUE_500 = addBaseStyle(new PlainShadowStyle("plain_shadow_blue_500", Color.MATERIAL_BLUE_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_BLUE_600 = addBaseStyle(new PlainShadowStyle("plain_shadow_blue_600", Color.MATERIAL_BLUE_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_BLUE_700 = addBaseStyle(new PlainShadowStyle("plain_shadow_blue_700", Color.MATERIAL_BLUE_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_BLUE_800 = addBaseStyle(new PlainShadowStyle("plain_shadow_blue_800", Color.MATERIAL_BLUE_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_BLUE_900 = addBaseStyle(new PlainShadowStyle("plain_shadow_blue_900", Color.MATERIAL_BLUE_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_BLUE_A100 = addBaseStyle(new PlainShadowStyle("plain_shadow_blue_a100", Color.MATERIAL_BLUE_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_BLUE_A200 = addBaseStyle(new PlainShadowStyle("plain_shadow_blue_a200", Color.MATERIAL_BLUE_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_BLUE_A400 = addBaseStyle(new PlainShadowStyle("plain_shadow_blue_a400", Color.MATERIAL_BLUE_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_BLUE_A700 = addBaseStyle(new PlainShadowStyle("plain_shadow_blue_a700", Color.MATERIAL_BLUE_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_LIGHT_BLUE_50 = addBaseStyle(new PlainShadowStyle("plain_shadow_light_blue_50", Color.MATERIAL_LIGHT_BLUE_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_LIGHT_BLUE_100 = addBaseStyle(new PlainShadowStyle("plain_shadow_light_blue_100", Color.MATERIAL_LIGHT_BLUE_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_LIGHT_BLUE_200 = addBaseStyle(new PlainShadowStyle("plain_shadow_light_blue_200", Color.MATERIAL_LIGHT_BLUE_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_LIGHT_BLUE_300 = addBaseStyle(new PlainShadowStyle("plain_shadow_light_blue_300", Color.MATERIAL_LIGHT_BLUE_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_LIGHT_BLUE_400 = addBaseStyle(new PlainShadowStyle("plain_shadow_light_blue_400", Color.MATERIAL_LIGHT_BLUE_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_LIGHT_BLUE_500 = addBaseStyle(new PlainShadowStyle("plain_shadow_light_blue_500", Color.MATERIAL_LIGHT_BLUE_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_LIGHT_BLUE_600 = addBaseStyle(new PlainShadowStyle("plain_shadow_light_blue_600", Color.MATERIAL_LIGHT_BLUE_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_LIGHT_BLUE_700 = addBaseStyle(new PlainShadowStyle("plain_shadow_light_blue_700", Color.MATERIAL_LIGHT_BLUE_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_LIGHT_BLUE_800 = addBaseStyle(new PlainShadowStyle("plain_shadow_light_blue_800", Color.MATERIAL_LIGHT_BLUE_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_LIGHT_BLUE_900 = addBaseStyle(new PlainShadowStyle("plain_shadow_light_blue_900", Color.MATERIAL_LIGHT_BLUE_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_LIGHT_BLUE_A100 = addBaseStyle(new PlainShadowStyle("plain_shadow_light_blue_a100", Color.MATERIAL_LIGHT_BLUE_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_LIGHT_BLUE_A200 = addBaseStyle(new PlainShadowStyle("plain_shadow_light_blue_a200", Color.MATERIAL_LIGHT_BLUE_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_LIGHT_BLUE_A400 = addBaseStyle(new PlainShadowStyle("plain_shadow_light_blue_a400", Color.MATERIAL_LIGHT_BLUE_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_LIGHT_BLUE_A700 = addBaseStyle(new PlainShadowStyle("plain_shadow_light_blue_a700", Color.MATERIAL_LIGHT_BLUE_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_CYAN_50 = addBaseStyle(new PlainShadowStyle("plain_shadow_cyan_50", Color.MATERIAL_CYAN_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_CYAN_100 = addBaseStyle(new PlainShadowStyle("plain_shadow_cyan_100", Color.MATERIAL_CYAN_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_CYAN_200 = addBaseStyle(new PlainShadowStyle("plain_shadow_cyan_200", Color.MATERIAL_CYAN_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_CYAN_300 = addBaseStyle(new PlainShadowStyle("plain_shadow_cyan_300", Color.MATERIAL_CYAN_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_CYAN_400 = addBaseStyle(new PlainShadowStyle("plain_shadow_cyan_400", Color.MATERIAL_CYAN_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_CYAN_500 = addBaseStyle(new PlainShadowStyle("plain_shadow_cyan_500", Color.MATERIAL_CYAN_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_CYAN_600 = addBaseStyle(new PlainShadowStyle("plain_shadow_cyan_600", Color.MATERIAL_CYAN_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_CYAN_700 = addBaseStyle(new PlainShadowStyle("plain_shadow_cyan_700", Color.MATERIAL_CYAN_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_CYAN_800 = addBaseStyle(new PlainShadowStyle("plain_shadow_cyan_800", Color.MATERIAL_CYAN_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_CYAN_900 = addBaseStyle(new PlainShadowStyle("plain_shadow_cyan_900", Color.MATERIAL_CYAN_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_CYAN_A100 = addBaseStyle(new PlainShadowStyle("plain_shadow_cyan_a100", Color.MATERIAL_CYAN_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_CYAN_A200 = addBaseStyle(new PlainShadowStyle("plain_shadow_cyan_a200", Color.MATERIAL_CYAN_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_CYAN_A400 = addBaseStyle(new PlainShadowStyle("plain_shadow_cyan_a400", Color.MATERIAL_CYAN_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_CYAN_A700 = addBaseStyle(new PlainShadowStyle("plain_shadow_cyan_a700", Color.MATERIAL_CYAN_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_TEAL_50 = addBaseStyle(new PlainShadowStyle("plain_shadow_teal_50", Color.MATERIAL_TEAL_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_TEAL_100 = addBaseStyle(new PlainShadowStyle("plain_shadow_teal_100", Color.MATERIAL_TEAL_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_TEAL_200 = addBaseStyle(new PlainShadowStyle("plain_shadow_teal_200", Color.MATERIAL_TEAL_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_TEAL_300 = addBaseStyle(new PlainShadowStyle("plain_shadow_teal_300", Color.MATERIAL_TEAL_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_TEAL_400 = addBaseStyle(new PlainShadowStyle("plain_shadow_teal_400", Color.MATERIAL_TEAL_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_TEAL_500 = addBaseStyle(new PlainShadowStyle("plain_shadow_teal_500", Color.MATERIAL_TEAL_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_TEAL_600 = addBaseStyle(new PlainShadowStyle("plain_shadow_teal_600", Color.MATERIAL_TEAL_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_TEAL_700 = addBaseStyle(new PlainShadowStyle("plain_shadow_teal_700", Color.MATERIAL_TEAL_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_TEAL_800 = addBaseStyle(new PlainShadowStyle("plain_shadow_teal_800", Color.MATERIAL_TEAL_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_TEAL_900 = addBaseStyle(new PlainShadowStyle("plain_shadow_teal_900", Color.MATERIAL_TEAL_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_TEAL_A100 = addBaseStyle(new PlainShadowStyle("plain_shadow_teal_a100", Color.MATERIAL_TEAL_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_TEAL_A200 = addBaseStyle(new PlainShadowStyle("plain_shadow_teal_a200", Color.MATERIAL_TEAL_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_TEAL_A400 = addBaseStyle(new PlainShadowStyle("plain_shadow_teal_a400", Color.MATERIAL_TEAL_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_TEAL_A700 = addBaseStyle(new PlainShadowStyle("plain_shadow_teal_a700", Color.MATERIAL_TEAL_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_GREEN_50 = addBaseStyle(new PlainShadowStyle("plain_shadow_green_50", Color.MATERIAL_GREEN_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_GREEN_100 = addBaseStyle(new PlainShadowStyle("plain_shadow_green_100", Color.MATERIAL_GREEN_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_GREEN_200 = addBaseStyle(new PlainShadowStyle("plain_shadow_green_200", Color.MATERIAL_GREEN_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_GREEN_300 = addBaseStyle(new PlainShadowStyle("plain_shadow_green_300", Color.MATERIAL_GREEN_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_GREEN_400 = addBaseStyle(new PlainShadowStyle("plain_shadow_green_400", Color.MATERIAL_GREEN_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_GREEN_500 = addBaseStyle(new PlainShadowStyle("plain_shadow_green_500", Color.MATERIAL_GREEN_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_GREEN_600 = addBaseStyle(new PlainShadowStyle("plain_shadow_green_600", Color.MATERIAL_GREEN_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_GREEN_700 = addBaseStyle(new PlainShadowStyle("plain_shadow_green_700", Color.MATERIAL_GREEN_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_GREEN_800 = addBaseStyle(new PlainShadowStyle("plain_shadow_green_800", Color.MATERIAL_GREEN_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_GREEN_900 = addBaseStyle(new PlainShadowStyle("plain_shadow_green_900", Color.MATERIAL_GREEN_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_GREEN_A100 = addBaseStyle(new PlainShadowStyle("plain_shadow_green_a100", Color.MATERIAL_GREEN_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_GREEN_A200 = addBaseStyle(new PlainShadowStyle("plain_shadow_green_a200", Color.MATERIAL_GREEN_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_GREEN_A400 = addBaseStyle(new PlainShadowStyle("plain_shadow_green_a400", Color.MATERIAL_GREEN_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_GREEN_A700 = addBaseStyle(new PlainShadowStyle("plain_shadow_green_a700", Color.MATERIAL_GREEN_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_LIGHT_GREEN_50 = addBaseStyle(new PlainShadowStyle("plain_shadow_light_green_50", Color.MATERIAL_LIGHT_GREEN_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_LIGHT_GREEN_100 = addBaseStyle(new PlainShadowStyle("plain_shadow_light_green_100", Color.MATERIAL_LIGHT_GREEN_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_LIGHT_GREEN_200 = addBaseStyle(new PlainShadowStyle("plain_shadow_light_green_200", Color.MATERIAL_LIGHT_GREEN_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_LIGHT_GREEN_300 = addBaseStyle(new PlainShadowStyle("plain_shadow_light_green_300", Color.MATERIAL_LIGHT_GREEN_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_LIGHT_GREEN_400 = addBaseStyle(new PlainShadowStyle("plain_shadow_light_green_400", Color.MATERIAL_LIGHT_GREEN_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_LIGHT_GREEN_500 = addBaseStyle(new PlainShadowStyle("plain_shadow_light_green_500", Color.MATERIAL_LIGHT_GREEN_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_LIGHT_GREEN_600 = addBaseStyle(new PlainShadowStyle("plain_shadow_light_green_600", Color.MATERIAL_LIGHT_GREEN_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_LIGHT_GREEN_700 = addBaseStyle(new PlainShadowStyle("plain_shadow_light_green_700", Color.MATERIAL_LIGHT_GREEN_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_LIGHT_GREEN_800 = addBaseStyle(new PlainShadowStyle("plain_shadow_light_green_800", Color.MATERIAL_LIGHT_GREEN_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_LIGHT_GREEN_900 = addBaseStyle(new PlainShadowStyle("plain_shadow_light_green_900", Color.MATERIAL_LIGHT_GREEN_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_LIGHT_GREEN_A100 = addBaseStyle(new PlainShadowStyle("plain_shadow_light_green_a100", Color.MATERIAL_LIGHT_GREEN_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_LIGHT_GREEN_A200 = addBaseStyle(new PlainShadowStyle("plain_shadow_light_green_a200", Color.MATERIAL_LIGHT_GREEN_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_LIGHT_GREEN_A400 = addBaseStyle(new PlainShadowStyle("plain_shadow_light_green_a400", Color.MATERIAL_LIGHT_GREEN_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_LIGHT_GREEN_A700 = addBaseStyle(new PlainShadowStyle("plain_shadow_light_green_a700", Color.MATERIAL_LIGHT_GREEN_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_LIME_50 = addBaseStyle(new PlainShadowStyle("plain_shadow_lime_50", Color.MATERIAL_LIME_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_LIME_100 = addBaseStyle(new PlainShadowStyle("plain_shadow_lime_100", Color.MATERIAL_LIME_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_LIME_200 = addBaseStyle(new PlainShadowStyle("plain_shadow_lime_200", Color.MATERIAL_LIME_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_LIME_300 = addBaseStyle(new PlainShadowStyle("plain_shadow_lime_300", Color.MATERIAL_LIME_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_LIME_400 = addBaseStyle(new PlainShadowStyle("plain_shadow_lime_400", Color.MATERIAL_LIME_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_LIME_500 = addBaseStyle(new PlainShadowStyle("plain_shadow_lime_500", Color.MATERIAL_LIME_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_LIME_600 = addBaseStyle(new PlainShadowStyle("plain_shadow_lime_600", Color.MATERIAL_LIME_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_LIME_700 = addBaseStyle(new PlainShadowStyle("plain_shadow_lime_700", Color.MATERIAL_LIME_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_LIME_800 = addBaseStyle(new PlainShadowStyle("plain_shadow_lime_800", Color.MATERIAL_LIME_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_LIME_900 = addBaseStyle(new PlainShadowStyle("plain_shadow_lime_900", Color.MATERIAL_LIME_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_LIME_A100 = addBaseStyle(new PlainShadowStyle("plain_shadow_lime_a100", Color.MATERIAL_LIME_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_LIME_A200 = addBaseStyle(new PlainShadowStyle("plain_shadow_lime_a200", Color.MATERIAL_LIME_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_LIME_A400 = addBaseStyle(new PlainShadowStyle("plain_shadow_lime_a400", Color.MATERIAL_LIME_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_LIME_A700 = addBaseStyle(new PlainShadowStyle("plain_shadow_lime_a700", Color.MATERIAL_LIME_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_YELLOW_50 = addBaseStyle(new PlainShadowStyle("plain_shadow_yellow_50", Color.MATERIAL_YELLOW_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_YELLOW_100 = addBaseStyle(new PlainShadowStyle("plain_shadow_yellow_100", Color.MATERIAL_YELLOW_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_YELLOW_200 = addBaseStyle(new PlainShadowStyle("plain_shadow_yellow_200", Color.MATERIAL_YELLOW_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_YELLOW_300 = addBaseStyle(new PlainShadowStyle("plain_shadow_yellow_300", Color.MATERIAL_YELLOW_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_YELLOW_400 = addBaseStyle(new PlainShadowStyle("plain_shadow_yellow_400", Color.MATERIAL_YELLOW_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_YELLOW_500 = addBaseStyle(new PlainShadowStyle("plain_shadow_yellow_500", Color.MATERIAL_YELLOW_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_YELLOW_600 = addBaseStyle(new PlainShadowStyle("plain_shadow_yellow_600", Color.MATERIAL_YELLOW_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_YELLOW_700 = addBaseStyle(new PlainShadowStyle("plain_shadow_yellow_700", Color.MATERIAL_YELLOW_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_YELLOW_800 = addBaseStyle(new PlainShadowStyle("plain_shadow_yellow_800", Color.MATERIAL_YELLOW_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_YELLOW_900 = addBaseStyle(new PlainShadowStyle("plain_shadow_yellow_900", Color.MATERIAL_YELLOW_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_YELLOW_A100 = addBaseStyle(new PlainShadowStyle("plain_shadow_yellow_a100", Color.MATERIAL_YELLOW_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_YELLOW_A200 = addBaseStyle(new PlainShadowStyle("plain_shadow_yellow_a200", Color.MATERIAL_YELLOW_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_YELLOW_A400 = addBaseStyle(new PlainShadowStyle("plain_shadow_yellow_a400", Color.MATERIAL_YELLOW_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_YELLOW_A700 = addBaseStyle(new PlainShadowStyle("plain_shadow_yellow_a700", Color.MATERIAL_YELLOW_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_AMBER_50 = addBaseStyle(new PlainShadowStyle("plain_shadow_amber_50", Color.MATERIAL_AMBER_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_AMBER_100 = addBaseStyle(new PlainShadowStyle("plain_shadow_amber_100", Color.MATERIAL_AMBER_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_AMBER_200 = addBaseStyle(new PlainShadowStyle("plain_shadow_amber_200", Color.MATERIAL_AMBER_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_AMBER_300 = addBaseStyle(new PlainShadowStyle("plain_shadow_amber_300", Color.MATERIAL_AMBER_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_AMBER_400 = addBaseStyle(new PlainShadowStyle("plain_shadow_amber_400", Color.MATERIAL_AMBER_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_AMBER_500 = addBaseStyle(new PlainShadowStyle("plain_shadow_amber_500", Color.MATERIAL_AMBER_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_AMBER_600 = addBaseStyle(new PlainShadowStyle("plain_shadow_amber_600", Color.MATERIAL_AMBER_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_AMBER_700 = addBaseStyle(new PlainShadowStyle("plain_shadow_amber_700", Color.MATERIAL_AMBER_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_AMBER_800 = addBaseStyle(new PlainShadowStyle("plain_shadow_amber_800", Color.MATERIAL_AMBER_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_AMBER_900 = addBaseStyle(new PlainShadowStyle("plain_shadow_amber_900", Color.MATERIAL_AMBER_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_AMBER_A100 = addBaseStyle(new PlainShadowStyle("plain_shadow_amber_a100", Color.MATERIAL_AMBER_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_AMBER_A200 = addBaseStyle(new PlainShadowStyle("plain_shadow_amber_a200", Color.MATERIAL_AMBER_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_AMBER_A400 = addBaseStyle(new PlainShadowStyle("plain_shadow_amber_a400", Color.MATERIAL_AMBER_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_AMBER_A700 = addBaseStyle(new PlainShadowStyle("plain_shadow_amber_a700", Color.MATERIAL_AMBER_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_ORANGE_50 = addBaseStyle(new PlainShadowStyle("plain_shadow_orange_50", Color.MATERIAL_ORANGE_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_ORANGE_100 = addBaseStyle(new PlainShadowStyle("plain_shadow_orange_100", Color.MATERIAL_ORANGE_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_ORANGE_200 = addBaseStyle(new PlainShadowStyle("plain_shadow_orange_200", Color.MATERIAL_ORANGE_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_ORANGE_300 = addBaseStyle(new PlainShadowStyle("plain_shadow_orange_300", Color.MATERIAL_ORANGE_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_ORANGE_400 = addBaseStyle(new PlainShadowStyle("plain_shadow_orange_400", Color.MATERIAL_ORANGE_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_ORANGE_500 = addBaseStyle(new PlainShadowStyle("plain_shadow_orange_500", Color.MATERIAL_ORANGE_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_ORANGE_600 = addBaseStyle(new PlainShadowStyle("plain_shadow_orange_600", Color.MATERIAL_ORANGE_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_ORANGE_700 = addBaseStyle(new PlainShadowStyle("plain_shadow_orange_700", Color.MATERIAL_ORANGE_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_ORANGE_800 = addBaseStyle(new PlainShadowStyle("plain_shadow_orange_800", Color.MATERIAL_ORANGE_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_ORANGE_900 = addBaseStyle(new PlainShadowStyle("plain_shadow_orange_900", Color.MATERIAL_ORANGE_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_ORANGE_A100 = addBaseStyle(new PlainShadowStyle("plain_shadow_orange_a100", Color.MATERIAL_ORANGE_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_ORANGE_A200 = addBaseStyle(new PlainShadowStyle("plain_shadow_orange_a200", Color.MATERIAL_ORANGE_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_ORANGE_A400 = addBaseStyle(new PlainShadowStyle("plain_shadow_orange_a400", Color.MATERIAL_ORANGE_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_ORANGE_A700 = addBaseStyle(new PlainShadowStyle("plain_shadow_orange_a700", Color.MATERIAL_ORANGE_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_DEEP_ORANGE_50 = addBaseStyle(new PlainShadowStyle("plain_shadow_deep_orange_50", Color.MATERIAL_DEEP_ORANGE_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_DEEP_ORANGE_100 = addBaseStyle(new PlainShadowStyle("plain_shadow_deep_orange_100", Color.MATERIAL_DEEP_ORANGE_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_DEEP_ORANGE_200 = addBaseStyle(new PlainShadowStyle("plain_shadow_deep_orange_200", Color.MATERIAL_DEEP_ORANGE_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_DEEP_ORANGE_300 = addBaseStyle(new PlainShadowStyle("plain_shadow_deep_orange_300", Color.MATERIAL_DEEP_ORANGE_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_DEEP_ORANGE_400 = addBaseStyle(new PlainShadowStyle("plain_shadow_deep_orange_400", Color.MATERIAL_DEEP_ORANGE_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_DEEP_ORANGE_500 = addBaseStyle(new PlainShadowStyle("plain_shadow_deep_orange_500", Color.MATERIAL_DEEP_ORANGE_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_DEEP_ORANGE_600 = addBaseStyle(new PlainShadowStyle("plain_shadow_deep_orange_600", Color.MATERIAL_DEEP_ORANGE_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_DEEP_ORANGE_700 = addBaseStyle(new PlainShadowStyle("plain_shadow_deep_orange_700", Color.MATERIAL_DEEP_ORANGE_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_DEEP_ORANGE_800 = addBaseStyle(new PlainShadowStyle("plain_shadow_deep_orange_800", Color.MATERIAL_DEEP_ORANGE_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_DEEP_ORANGE_900 = addBaseStyle(new PlainShadowStyle("plain_shadow_deep_orange_900", Color.MATERIAL_DEEP_ORANGE_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_DEEP_ORANGE_A100 = addBaseStyle(new PlainShadowStyle("plain_shadow_deep_orange_a100", Color.MATERIAL_DEEP_ORANGE_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_DEEP_ORANGE_A200 = addBaseStyle(new PlainShadowStyle("plain_shadow_deep_orange_a200", Color.MATERIAL_DEEP_ORANGE_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_DEEP_ORANGE_A400 = addBaseStyle(new PlainShadowStyle("plain_shadow_deep_orange_a400", Color.MATERIAL_DEEP_ORANGE_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_DEEP_ORANGE_A700 = addBaseStyle(new PlainShadowStyle("plain_shadow_deep_orange_a700", Color.MATERIAL_DEEP_ORANGE_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_BROWN_50 = addBaseStyle(new PlainShadowStyle("plain_shadow_brown_50", Color.MATERIAL_BROWN_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_BROWN_100 = addBaseStyle(new PlainShadowStyle("plain_shadow_brown_100", Color.MATERIAL_BROWN_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_BROWN_200 = addBaseStyle(new PlainShadowStyle("plain_shadow_brown_200", Color.MATERIAL_BROWN_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_BROWN_300 = addBaseStyle(new PlainShadowStyle("plain_shadow_brown_300", Color.MATERIAL_BROWN_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_BROWN_400 = addBaseStyle(new PlainShadowStyle("plain_shadow_brown_400", Color.MATERIAL_BROWN_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_BROWN_500 = addBaseStyle(new PlainShadowStyle("plain_shadow_brown_500", Color.MATERIAL_BROWN_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_BROWN_600 = addBaseStyle(new PlainShadowStyle("plain_shadow_brown_600", Color.MATERIAL_BROWN_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_BROWN_700 = addBaseStyle(new PlainShadowStyle("plain_shadow_brown_700", Color.MATERIAL_BROWN_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_BROWN_800 = addBaseStyle(new PlainShadowStyle("plain_shadow_brown_800", Color.MATERIAL_BROWN_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_BROWN_900 = addBaseStyle(new PlainShadowStyle("plain_shadow_brown_900", Color.MATERIAL_BROWN_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_GREY_50 = addBaseStyle(new PlainShadowStyle("plain_shadow_grey_50", Color.MATERIAL_GREY_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_GREY_100 = addBaseStyle(new PlainShadowStyle("plain_shadow_grey_100", Color.MATERIAL_GREY_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_GREY_200 = addBaseStyle(new PlainShadowStyle("plain_shadow_grey_200", Color.MATERIAL_GREY_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_GREY_300 = addBaseStyle(new PlainShadowStyle("plain_shadow_grey_300", Color.MATERIAL_GREY_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_GREY_400 = addBaseStyle(new PlainShadowStyle("plain_shadow_grey_400", Color.MATERIAL_GREY_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_GREY_500 = addBaseStyle(new PlainShadowStyle("plain_shadow_grey_500", Color.MATERIAL_GREY_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_GREY_600 = addBaseStyle(new PlainShadowStyle("plain_shadow_grey_600", Color.MATERIAL_GREY_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_GREY_700 = addBaseStyle(new PlainShadowStyle("plain_shadow_grey_700", Color.MATERIAL_GREY_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_GREY_800 = addBaseStyle(new PlainShadowStyle("plain_shadow_grey_800", Color.MATERIAL_GREY_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_GREY_900 = addBaseStyle(new PlainShadowStyle("plain_shadow_grey_900", Color.MATERIAL_GREY_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_BLACK_1000 = addBaseStyle(new PlainShadowStyle("plain_shadow_black_1000", Color.MATERIAL_BLACK_1000.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_WHITE_1000 = addBaseStyle(new PlainShadowStyle("plain_shadow_white_1000", Color.MATERIAL_WHITE_1000.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_BLUE_GREY_50 = addBaseStyle(new PlainShadowStyle("plain_shadow_blue_grey_50", Color.MATERIAL_BLUE_GREY_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_BLUE_GREY_100 = addBaseStyle(new PlainShadowStyle("plain_shadow_blue_grey_100", Color.MATERIAL_BLUE_GREY_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_BLUE_GREY_200 = addBaseStyle(new PlainShadowStyle("plain_shadow_blue_grey_200", Color.MATERIAL_BLUE_GREY_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_BLUE_GREY_300 = addBaseStyle(new PlainShadowStyle("plain_shadow_blue_grey_300", Color.MATERIAL_BLUE_GREY_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_BLUE_GREY_400 = addBaseStyle(new PlainShadowStyle("plain_shadow_blue_grey_400", Color.MATERIAL_BLUE_GREY_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_BLUE_GREY_500 = addBaseStyle(new PlainShadowStyle("plain_shadow_blue_grey_500", Color.MATERIAL_BLUE_GREY_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_BLUE_GREY_600 = addBaseStyle(new PlainShadowStyle("plain_shadow_blue_grey_600", Color.MATERIAL_BLUE_GREY_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_BLUE_GREY_700 = addBaseStyle(new PlainShadowStyle("plain_shadow_blue_grey_700", Color.MATERIAL_BLUE_GREY_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_BLUE_GREY_800 = addBaseStyle(new PlainShadowStyle("plain_shadow_blue_grey_800", Color.MATERIAL_BLUE_GREY_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle PLAIN_SHADOW_BLUE_GREY_900 = addBaseStyle(new PlainShadowStyle("plain_shadow_blue_grey_900", Color.MATERIAL_BLUE_GREY_900.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_PRIMARY = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.PRIMARY.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_SUCCESS = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.SUCCESS.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_INFO = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.INFO.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_WARNING = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.WARNING.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_DANGER = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.DANGER.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_RED_50 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_RED_50.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_RED_100 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_RED_100.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_RED_200 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_RED_200.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_RED_300 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_RED_300.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_RED_400 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_RED_400.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_RED_500 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_RED_500.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_RED_600 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_RED_600.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_RED_700 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_RED_700.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_RED_800 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_RED_800.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_RED_900 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_RED_900.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_RED_A100 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_RED_A100.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_RED_A200 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_RED_A200.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_RED_A400 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_RED_A400.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_RED_A700 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_RED_A700.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_PINK_50 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_PINK_50.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_PINK_100 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_PINK_100.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_PINK_200 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_PINK_200.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_PINK_300 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_PINK_300.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_PINK_400 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_PINK_400.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_PINK_500 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_PINK_500.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_PINK_600 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_PINK_600.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_PINK_700 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_PINK_700.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_PINK_800 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_PINK_800.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_PINK_900 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_PINK_900.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_PINK_A100 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_PINK_A100.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_PINK_A200 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_PINK_A200.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_PINK_A400 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_PINK_A400.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_PINK_A700 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_PINK_A700.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_PURPLE_50 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_PURPLE_50.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_PURPLE_100 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_PURPLE_100.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_PURPLE_200 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_PURPLE_200.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_PURPLE_300 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_PURPLE_300.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_PURPLE_400 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_PURPLE_400.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_PURPLE_500 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_PURPLE_500.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_PURPLE_600 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_PURPLE_600.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_PURPLE_700 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_PURPLE_700.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_PURPLE_800 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_PURPLE_800.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_PURPLE_900 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_PURPLE_900.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_PURPLE_A100 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_PURPLE_A100.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_PURPLE_A200 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_PURPLE_A200.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_PURPLE_A400 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_PURPLE_A400.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_PURPLE_A700 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_PURPLE_A700.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_DEEP_PURPLE_50 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_DEEP_PURPLE_50.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_DEEP_PURPLE_100 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_DEEP_PURPLE_100.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_DEEP_PURPLE_200 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_DEEP_PURPLE_200.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_DEEP_PURPLE_300 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_DEEP_PURPLE_300.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_DEEP_PURPLE_400 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_DEEP_PURPLE_400.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_DEEP_PURPLE_500 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_DEEP_PURPLE_500.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_DEEP_PURPLE_600 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_DEEP_PURPLE_600.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_DEEP_PURPLE_700 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_DEEP_PURPLE_700.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_DEEP_PURPLE_800 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_DEEP_PURPLE_800.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_DEEP_PURPLE_900 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_DEEP_PURPLE_900.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_DEEP_PURPLE_A100 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_DEEP_PURPLE_A100.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_DEEP_PURPLE_A200 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_DEEP_PURPLE_A200.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_DEEP_PURPLE_A400 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_DEEP_PURPLE_A400.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_DEEP_PURPLE_A700 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_DEEP_PURPLE_A700.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_INDIGO_50 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_INDIGO_50.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_INDIGO_100 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_INDIGO_100.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_INDIGO_200 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_INDIGO_200.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_INDIGO_300 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_INDIGO_300.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_INDIGO_400 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_INDIGO_400.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_INDIGO_500 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_INDIGO_500.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_INDIGO_600 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_INDIGO_600.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_INDIGO_700 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_INDIGO_700.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_INDIGO_800 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_INDIGO_800.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_INDIGO_900 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_INDIGO_900.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_INDIGO_A100 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_INDIGO_A100.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_INDIGO_A200 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_INDIGO_A200.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_INDIGO_A400 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_INDIGO_A400.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_INDIGO_A700 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_INDIGO_A700.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_BLUE_50 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_BLUE_50.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_BLUE_100 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_BLUE_100.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_BLUE_200 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_BLUE_200.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_BLUE_300 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_BLUE_300.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_BLUE_400 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_BLUE_400.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_BLUE_500 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_BLUE_500.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_BLUE_600 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_BLUE_600.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_BLUE_700 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_BLUE_700.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_BLUE_800 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_BLUE_800.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_BLUE_900 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_BLUE_900.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_BLUE_A100 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_BLUE_A100.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_BLUE_A200 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_BLUE_A200.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_BLUE_A400 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_BLUE_A400.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_BLUE_A700 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_BLUE_A700.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_LIGHT_BLUE_50 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_LIGHT_BLUE_50.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_LIGHT_BLUE_100 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_LIGHT_BLUE_100.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_LIGHT_BLUE_200 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_LIGHT_BLUE_200.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_LIGHT_BLUE_300 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_LIGHT_BLUE_300.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_LIGHT_BLUE_400 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_LIGHT_BLUE_400.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_LIGHT_BLUE_500 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_LIGHT_BLUE_500.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_LIGHT_BLUE_600 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_LIGHT_BLUE_600.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_LIGHT_BLUE_700 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_LIGHT_BLUE_700.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_LIGHT_BLUE_800 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_LIGHT_BLUE_800.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_LIGHT_BLUE_900 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_LIGHT_BLUE_900.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_LIGHT_BLUE_A100 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_LIGHT_BLUE_A100.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_LIGHT_BLUE_A200 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_LIGHT_BLUE_A200.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_LIGHT_BLUE_A400 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_LIGHT_BLUE_A400.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_LIGHT_BLUE_A700 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_LIGHT_BLUE_A700.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_CYAN_50 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_CYAN_50.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_CYAN_100 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_CYAN_100.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_CYAN_200 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_CYAN_200.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_CYAN_300 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_CYAN_300.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_CYAN_400 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_CYAN_400.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_CYAN_500 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_CYAN_500.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_CYAN_600 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_CYAN_600.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_CYAN_700 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_CYAN_700.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_CYAN_800 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_CYAN_800.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_CYAN_900 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_CYAN_900.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_CYAN_A100 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_CYAN_A100.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_CYAN_A200 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_CYAN_A200.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_CYAN_A400 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_CYAN_A400.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_CYAN_A700 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_CYAN_A700.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_TEAL_50 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_TEAL_50.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_TEAL_100 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_TEAL_100.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_TEAL_200 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_TEAL_200.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_TEAL_300 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_TEAL_300.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_TEAL_400 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_TEAL_400.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_TEAL_500 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_TEAL_500.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_TEAL_600 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_TEAL_600.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_TEAL_700 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_TEAL_700.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_TEAL_800 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_TEAL_800.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_TEAL_900 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_TEAL_900.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_TEAL_A100 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_TEAL_A100.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_TEAL_A200 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_TEAL_A200.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_TEAL_A400 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_TEAL_A400.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_TEAL_A700 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_TEAL_A700.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_GREEN_50 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_GREEN_50.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_GREEN_100 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_GREEN_100.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_GREEN_200 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_GREEN_200.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_GREEN_300 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_GREEN_300.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_GREEN_400 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_GREEN_400.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_GREEN_500 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_GREEN_500.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_GREEN_600 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_GREEN_600.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_GREEN_700 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_GREEN_700.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_GREEN_800 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_GREEN_800.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_GREEN_900 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_GREEN_900.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_GREEN_A100 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_GREEN_A100.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_GREEN_A200 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_GREEN_A200.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_GREEN_A400 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_GREEN_A400.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_GREEN_A700 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_GREEN_A700.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_LIGHT_GREEN_50 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_LIGHT_GREEN_50.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_LIGHT_GREEN_100 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_LIGHT_GREEN_100.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_LIGHT_GREEN_200 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_LIGHT_GREEN_200.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_LIGHT_GREEN_300 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_LIGHT_GREEN_300.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_LIGHT_GREEN_400 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_LIGHT_GREEN_400.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_LIGHT_GREEN_500 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_LIGHT_GREEN_500.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_LIGHT_GREEN_600 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_LIGHT_GREEN_600.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_LIGHT_GREEN_700 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_LIGHT_GREEN_700.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_LIGHT_GREEN_800 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_LIGHT_GREEN_800.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_LIGHT_GREEN_900 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_LIGHT_GREEN_900.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_LIGHT_GREEN_A100 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_LIGHT_GREEN_A100.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_LIGHT_GREEN_A200 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_LIGHT_GREEN_A200.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_LIGHT_GREEN_A400 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_LIGHT_GREEN_A400.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_LIGHT_GREEN_A700 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_LIGHT_GREEN_A700.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_LIME_50 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_LIME_50.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_LIME_100 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_LIME_100.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_LIME_200 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_LIME_200.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_LIME_300 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_LIME_300.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_LIME_400 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_LIME_400.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_LIME_500 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_LIME_500.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_LIME_600 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_LIME_600.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_LIME_700 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_LIME_700.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_LIME_800 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_LIME_800.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_LIME_900 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_LIME_900.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_LIME_A100 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_LIME_A100.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_LIME_A200 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_LIME_A200.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_LIME_A400 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_LIME_A400.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_LIME_A700 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_LIME_A700.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_YELLOW_50 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_YELLOW_50.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_YELLOW_100 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_YELLOW_100.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_YELLOW_200 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_YELLOW_200.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_YELLOW_300 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_YELLOW_300.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_YELLOW_400 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_YELLOW_400.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_YELLOW_500 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_YELLOW_500.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_YELLOW_600 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_YELLOW_600.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_YELLOW_700 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_YELLOW_700.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_YELLOW_800 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_YELLOW_800.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_YELLOW_900 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_YELLOW_900.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_YELLOW_A100 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_YELLOW_A100.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_YELLOW_A200 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_YELLOW_A200.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_YELLOW_A400 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_YELLOW_A400.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_YELLOW_A700 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_YELLOW_A700.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_AMBER_50 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_AMBER_50.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_AMBER_100 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_AMBER_100.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_AMBER_200 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_AMBER_200.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_AMBER_300 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_AMBER_300.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_AMBER_400 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_AMBER_400.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_AMBER_500 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_AMBER_500.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_AMBER_600 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_AMBER_600.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_AMBER_700 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_AMBER_700.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_AMBER_800 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_AMBER_800.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_AMBER_900 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_AMBER_900.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_AMBER_A100 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_AMBER_A100.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_AMBER_A200 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_AMBER_A200.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_AMBER_A400 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_AMBER_A400.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_AMBER_A700 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_AMBER_A700.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_ORANGE_50 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_ORANGE_50.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_ORANGE_100 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_ORANGE_100.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_ORANGE_200 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_ORANGE_200.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_ORANGE_300 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_ORANGE_300.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_ORANGE_400 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_ORANGE_400.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_ORANGE_500 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_ORANGE_500.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_ORANGE_600 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_ORANGE_600.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_ORANGE_700 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_ORANGE_700.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_ORANGE_800 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_ORANGE_800.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_ORANGE_900 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_ORANGE_900.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_ORANGE_A100 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_ORANGE_A100.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_ORANGE_A200 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_ORANGE_A200.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_ORANGE_A400 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_ORANGE_A400.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_ORANGE_A700 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_ORANGE_A700.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_DEEP_ORANGE_50 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_DEEP_ORANGE_50.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_DEEP_ORANGE_100 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_DEEP_ORANGE_100.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_DEEP_ORANGE_200 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_DEEP_ORANGE_200.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_DEEP_ORANGE_300 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_DEEP_ORANGE_300.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_DEEP_ORANGE_400 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_DEEP_ORANGE_400.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_DEEP_ORANGE_500 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_DEEP_ORANGE_500.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_DEEP_ORANGE_600 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_DEEP_ORANGE_600.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_DEEP_ORANGE_700 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_DEEP_ORANGE_700.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_DEEP_ORANGE_800 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_DEEP_ORANGE_800.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_DEEP_ORANGE_900 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_DEEP_ORANGE_900.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_DEEP_ORANGE_A100 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_DEEP_ORANGE_A100.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_DEEP_ORANGE_A200 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_DEEP_ORANGE_A200.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_DEEP_ORANGE_A400 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_DEEP_ORANGE_A400.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_DEEP_ORANGE_A700 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_DEEP_ORANGE_A700.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_BROWN_50 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_BROWN_50.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_BROWN_100 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_BROWN_100.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_BROWN_200 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_BROWN_200.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_BROWN_300 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_BROWN_300.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_BROWN_400 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_BROWN_400.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_BROWN_500 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_BROWN_500.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_BROWN_600 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_BROWN_600.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_BROWN_700 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_BROWN_700.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_BROWN_800 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_BROWN_800.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_BROWN_900 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_BROWN_900.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_GREY_50 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_GREY_50.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_GREY_100 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_GREY_100.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_GREY_200 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_GREY_200.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_GREY_300 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_GREY_300.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_GREY_400 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_GREY_400.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_GREY_500 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_GREY_500.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_GREY_600 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_GREY_600.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_GREY_700 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_GREY_700.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_GREY_800 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_GREY_800.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_GREY_900 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_GREY_900.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_BLACK_1000 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_BLACK_1000.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_WHITE_1000 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_WHITE_1000.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_BLUE_GREY_50 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_BLUE_GREY_50.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_BLUE_GREY_100 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_BLUE_GREY_100.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_BLUE_GREY_200 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_BLUE_GREY_200.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_BLUE_GREY_300 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_BLUE_GREY_300.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_BLUE_GREY_400 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_BLUE_GREY_400.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_BLUE_GREY_500 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_BLUE_GREY_500.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_BLUE_GREY_600 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_BLUE_GREY_600.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_BLUE_GREY_700 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_BLUE_GREY_700.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_BLUE_GREY_800 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_BLUE_GREY_800.toHtmlColorString()));
+	public static final MaterialIconStyle PLAIN_SHADOW_BLUE_GREY_900 = addBaseStyle(new MaterialIconStyle(PLAIN_SHADOW, RgbaColor.MATERIAL_BLUE_GREY_900.toHtmlColorString()));
 
 	//PLAIN_SHADOW styles:
-	public static final AbstractMaterialIconStyle STICKER_BOOTSTRAP_PRIMARY = addBaseStyle(new StickerStyle("sticker_bootstrap_primary", Color.BOOTSTRAP_PRIMARY.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_BOOTSTRAP_SUCCESS = addBaseStyle(new StickerStyle("sticker_bootstrap_success", Color.BOOTSTRAP_SUCCESS.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_BOOTSTRAP_INFO = addBaseStyle(new StickerStyle("sticker_bootstrap_info", Color.BOOTSTRAP_INFO.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_BOOTSTRAP_WARNING = addBaseStyle(new StickerStyle("sticker_bootstrap_warning", Color.BOOTSTRAP_WARNING.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_BOOTSTRAP_DANGER = addBaseStyle(new StickerStyle("sticker_bootstrap_danger", Color.BOOTSTRAP_DANGER.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_RED_50 = addBaseStyle(new StickerStyle("sticker_red_50", Color.MATERIAL_RED_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_RED_100 = addBaseStyle(new StickerStyle("sticker_red_100", Color.MATERIAL_RED_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_RED_200 = addBaseStyle(new StickerStyle("sticker_red_200", Color.MATERIAL_RED_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_RED_300 = addBaseStyle(new StickerStyle("sticker_red_300", Color.MATERIAL_RED_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_RED_400 = addBaseStyle(new StickerStyle("sticker_red_400", Color.MATERIAL_RED_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_RED_500 = addBaseStyle(new StickerStyle("sticker_red_500", Color.MATERIAL_RED_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_RED_600 = addBaseStyle(new StickerStyle("sticker_red_600", Color.MATERIAL_RED_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_RED_700 = addBaseStyle(new StickerStyle("sticker_red_700", Color.MATERIAL_RED_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_RED_800 = addBaseStyle(new StickerStyle("sticker_red_800", Color.MATERIAL_RED_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_RED_900 = addBaseStyle(new StickerStyle("sticker_red_900", Color.MATERIAL_RED_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_RED_A100 = addBaseStyle(new StickerStyle("sticker_red_a100", Color.MATERIAL_RED_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_RED_A200 = addBaseStyle(new StickerStyle("sticker_red_a200", Color.MATERIAL_RED_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_RED_A400 = addBaseStyle(new StickerStyle("sticker_red_a400", Color.MATERIAL_RED_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_RED_A700 = addBaseStyle(new StickerStyle("sticker_red_a700", Color.MATERIAL_RED_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_PINK_50 = addBaseStyle(new StickerStyle("sticker_pink_50", Color.MATERIAL_PINK_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_PINK_100 = addBaseStyle(new StickerStyle("sticker_pink_100", Color.MATERIAL_PINK_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_PINK_200 = addBaseStyle(new StickerStyle("sticker_pink_200", Color.MATERIAL_PINK_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_PINK_300 = addBaseStyle(new StickerStyle("sticker_pink_300", Color.MATERIAL_PINK_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_PINK_400 = addBaseStyle(new StickerStyle("sticker_pink_400", Color.MATERIAL_PINK_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_PINK_500 = addBaseStyle(new StickerStyle("sticker_pink_500", Color.MATERIAL_PINK_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_PINK_600 = addBaseStyle(new StickerStyle("sticker_pink_600", Color.MATERIAL_PINK_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_PINK_700 = addBaseStyle(new StickerStyle("sticker_pink_700", Color.MATERIAL_PINK_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_PINK_800 = addBaseStyle(new StickerStyle("sticker_pink_800", Color.MATERIAL_PINK_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_PINK_900 = addBaseStyle(new StickerStyle("sticker_pink_900", Color.MATERIAL_PINK_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_PINK_A100 = addBaseStyle(new StickerStyle("sticker_pink_a100", Color.MATERIAL_PINK_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_PINK_A200 = addBaseStyle(new StickerStyle("sticker_pink_a200", Color.MATERIAL_PINK_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_PINK_A400 = addBaseStyle(new StickerStyle("sticker_pink_a400", Color.MATERIAL_PINK_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_PINK_A700 = addBaseStyle(new StickerStyle("sticker_pink_a700", Color.MATERIAL_PINK_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_PURPLE_50 = addBaseStyle(new StickerStyle("sticker_purple_50", Color.MATERIAL_PURPLE_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_PURPLE_100 = addBaseStyle(new StickerStyle("sticker_purple_100", Color.MATERIAL_PURPLE_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_PURPLE_200 = addBaseStyle(new StickerStyle("sticker_purple_200", Color.MATERIAL_PURPLE_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_PURPLE_300 = addBaseStyle(new StickerStyle("sticker_purple_300", Color.MATERIAL_PURPLE_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_PURPLE_400 = addBaseStyle(new StickerStyle("sticker_purple_400", Color.MATERIAL_PURPLE_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_PURPLE_500 = addBaseStyle(new StickerStyle("sticker_purple_500", Color.MATERIAL_PURPLE_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_PURPLE_600 = addBaseStyle(new StickerStyle("sticker_purple_600", Color.MATERIAL_PURPLE_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_PURPLE_700 = addBaseStyle(new StickerStyle("sticker_purple_700", Color.MATERIAL_PURPLE_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_PURPLE_800 = addBaseStyle(new StickerStyle("sticker_purple_800", Color.MATERIAL_PURPLE_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_PURPLE_900 = addBaseStyle(new StickerStyle("sticker_purple_900", Color.MATERIAL_PURPLE_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_PURPLE_A100 = addBaseStyle(new StickerStyle("sticker_purple_a100", Color.MATERIAL_PURPLE_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_PURPLE_A200 = addBaseStyle(new StickerStyle("sticker_purple_a200", Color.MATERIAL_PURPLE_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_PURPLE_A400 = addBaseStyle(new StickerStyle("sticker_purple_a400", Color.MATERIAL_PURPLE_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_PURPLE_A700 = addBaseStyle(new StickerStyle("sticker_purple_a700", Color.MATERIAL_PURPLE_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_DEEP_PURPLE_50 = addBaseStyle(new StickerStyle("sticker_deep_purple_50", Color.MATERIAL_DEEP_PURPLE_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_DEEP_PURPLE_100 = addBaseStyle(new StickerStyle("sticker_deep_purple_100", Color.MATERIAL_DEEP_PURPLE_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_DEEP_PURPLE_200 = addBaseStyle(new StickerStyle("sticker_deep_purple_200", Color.MATERIAL_DEEP_PURPLE_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_DEEP_PURPLE_300 = addBaseStyle(new StickerStyle("sticker_deep_purple_300", Color.MATERIAL_DEEP_PURPLE_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_DEEP_PURPLE_400 = addBaseStyle(new StickerStyle("sticker_deep_purple_400", Color.MATERIAL_DEEP_PURPLE_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_DEEP_PURPLE_500 = addBaseStyle(new StickerStyle("sticker_deep_purple_500", Color.MATERIAL_DEEP_PURPLE_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_DEEP_PURPLE_600 = addBaseStyle(new StickerStyle("sticker_deep_purple_600", Color.MATERIAL_DEEP_PURPLE_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_DEEP_PURPLE_700 = addBaseStyle(new StickerStyle("sticker_deep_purple_700", Color.MATERIAL_DEEP_PURPLE_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_DEEP_PURPLE_800 = addBaseStyle(new StickerStyle("sticker_deep_purple_800", Color.MATERIAL_DEEP_PURPLE_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_DEEP_PURPLE_900 = addBaseStyle(new StickerStyle("sticker_deep_purple_900", Color.MATERIAL_DEEP_PURPLE_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_DEEP_PURPLE_A100 = addBaseStyle(new StickerStyle("sticker_deep_purple_a100", Color.MATERIAL_DEEP_PURPLE_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_DEEP_PURPLE_A200 = addBaseStyle(new StickerStyle("sticker_deep_purple_a200", Color.MATERIAL_DEEP_PURPLE_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_DEEP_PURPLE_A400 = addBaseStyle(new StickerStyle("sticker_deep_purple_a400", Color.MATERIAL_DEEP_PURPLE_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_DEEP_PURPLE_A700 = addBaseStyle(new StickerStyle("sticker_deep_purple_a700", Color.MATERIAL_DEEP_PURPLE_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_INDIGO_50 = addBaseStyle(new StickerStyle("sticker_indigo_50", Color.MATERIAL_INDIGO_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_INDIGO_100 = addBaseStyle(new StickerStyle("sticker_indigo_100", Color.MATERIAL_INDIGO_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_INDIGO_200 = addBaseStyle(new StickerStyle("sticker_indigo_200", Color.MATERIAL_INDIGO_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_INDIGO_300 = addBaseStyle(new StickerStyle("sticker_indigo_300", Color.MATERIAL_INDIGO_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_INDIGO_400 = addBaseStyle(new StickerStyle("sticker_indigo_400", Color.MATERIAL_INDIGO_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_INDIGO_500 = addBaseStyle(new StickerStyle("sticker_indigo_500", Color.MATERIAL_INDIGO_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_INDIGO_600 = addBaseStyle(new StickerStyle("sticker_indigo_600", Color.MATERIAL_INDIGO_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_INDIGO_700 = addBaseStyle(new StickerStyle("sticker_indigo_700", Color.MATERIAL_INDIGO_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_INDIGO_800 = addBaseStyle(new StickerStyle("sticker_indigo_800", Color.MATERIAL_INDIGO_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_INDIGO_900 = addBaseStyle(new StickerStyle("sticker_indigo_900", Color.MATERIAL_INDIGO_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_INDIGO_A100 = addBaseStyle(new StickerStyle("sticker_indigo_a100", Color.MATERIAL_INDIGO_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_INDIGO_A200 = addBaseStyle(new StickerStyle("sticker_indigo_a200", Color.MATERIAL_INDIGO_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_INDIGO_A400 = addBaseStyle(new StickerStyle("sticker_indigo_a400", Color.MATERIAL_INDIGO_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_INDIGO_A700 = addBaseStyle(new StickerStyle("sticker_indigo_a700", Color.MATERIAL_INDIGO_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_BLUE_50 = addBaseStyle(new StickerStyle("sticker_blue_50", Color.MATERIAL_BLUE_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_BLUE_100 = addBaseStyle(new StickerStyle("sticker_blue_100", Color.MATERIAL_BLUE_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_BLUE_200 = addBaseStyle(new StickerStyle("sticker_blue_200", Color.MATERIAL_BLUE_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_BLUE_300 = addBaseStyle(new StickerStyle("sticker_blue_300", Color.MATERIAL_BLUE_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_BLUE_400 = addBaseStyle(new StickerStyle("sticker_blue_400", Color.MATERIAL_BLUE_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_BLUE_500 = addBaseStyle(new StickerStyle("sticker_blue_500", Color.MATERIAL_BLUE_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_BLUE_600 = addBaseStyle(new StickerStyle("sticker_blue_600", Color.MATERIAL_BLUE_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_BLUE_700 = addBaseStyle(new StickerStyle("sticker_blue_700", Color.MATERIAL_BLUE_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_BLUE_800 = addBaseStyle(new StickerStyle("sticker_blue_800", Color.MATERIAL_BLUE_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_BLUE_900 = addBaseStyle(new StickerStyle("sticker_blue_900", Color.MATERIAL_BLUE_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_BLUE_A100 = addBaseStyle(new StickerStyle("sticker_blue_a100", Color.MATERIAL_BLUE_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_BLUE_A200 = addBaseStyle(new StickerStyle("sticker_blue_a200", Color.MATERIAL_BLUE_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_BLUE_A400 = addBaseStyle(new StickerStyle("sticker_blue_a400", Color.MATERIAL_BLUE_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_BLUE_A700 = addBaseStyle(new StickerStyle("sticker_blue_a700", Color.MATERIAL_BLUE_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_LIGHT_BLUE_50 = addBaseStyle(new StickerStyle("sticker_light_blue_50", Color.MATERIAL_LIGHT_BLUE_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_LIGHT_BLUE_100 = addBaseStyle(new StickerStyle("sticker_light_blue_100", Color.MATERIAL_LIGHT_BLUE_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_LIGHT_BLUE_200 = addBaseStyle(new StickerStyle("sticker_light_blue_200", Color.MATERIAL_LIGHT_BLUE_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_LIGHT_BLUE_300 = addBaseStyle(new StickerStyle("sticker_light_blue_300", Color.MATERIAL_LIGHT_BLUE_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_LIGHT_BLUE_400 = addBaseStyle(new StickerStyle("sticker_light_blue_400", Color.MATERIAL_LIGHT_BLUE_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_LIGHT_BLUE_500 = addBaseStyle(new StickerStyle("sticker_light_blue_500", Color.MATERIAL_LIGHT_BLUE_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_LIGHT_BLUE_600 = addBaseStyle(new StickerStyle("sticker_light_blue_600", Color.MATERIAL_LIGHT_BLUE_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_LIGHT_BLUE_700 = addBaseStyle(new StickerStyle("sticker_light_blue_700", Color.MATERIAL_LIGHT_BLUE_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_LIGHT_BLUE_800 = addBaseStyle(new StickerStyle("sticker_light_blue_800", Color.MATERIAL_LIGHT_BLUE_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_LIGHT_BLUE_900 = addBaseStyle(new StickerStyle("sticker_light_blue_900", Color.MATERIAL_LIGHT_BLUE_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_LIGHT_BLUE_A100 = addBaseStyle(new StickerStyle("sticker_light_blue_a100", Color.MATERIAL_LIGHT_BLUE_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_LIGHT_BLUE_A200 = addBaseStyle(new StickerStyle("sticker_light_blue_a200", Color.MATERIAL_LIGHT_BLUE_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_LIGHT_BLUE_A400 = addBaseStyle(new StickerStyle("sticker_light_blue_a400", Color.MATERIAL_LIGHT_BLUE_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_LIGHT_BLUE_A700 = addBaseStyle(new StickerStyle("sticker_light_blue_a700", Color.MATERIAL_LIGHT_BLUE_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_CYAN_50 = addBaseStyle(new StickerStyle("sticker_cyan_50", Color.MATERIAL_CYAN_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_CYAN_100 = addBaseStyle(new StickerStyle("sticker_cyan_100", Color.MATERIAL_CYAN_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_CYAN_200 = addBaseStyle(new StickerStyle("sticker_cyan_200", Color.MATERIAL_CYAN_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_CYAN_300 = addBaseStyle(new StickerStyle("sticker_cyan_300", Color.MATERIAL_CYAN_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_CYAN_400 = addBaseStyle(new StickerStyle("sticker_cyan_400", Color.MATERIAL_CYAN_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_CYAN_500 = addBaseStyle(new StickerStyle("sticker_cyan_500", Color.MATERIAL_CYAN_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_CYAN_600 = addBaseStyle(new StickerStyle("sticker_cyan_600", Color.MATERIAL_CYAN_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_CYAN_700 = addBaseStyle(new StickerStyle("sticker_cyan_700", Color.MATERIAL_CYAN_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_CYAN_800 = addBaseStyle(new StickerStyle("sticker_cyan_800", Color.MATERIAL_CYAN_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_CYAN_900 = addBaseStyle(new StickerStyle("sticker_cyan_900", Color.MATERIAL_CYAN_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_CYAN_A100 = addBaseStyle(new StickerStyle("sticker_cyan_a100", Color.MATERIAL_CYAN_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_CYAN_A200 = addBaseStyle(new StickerStyle("sticker_cyan_a200", Color.MATERIAL_CYAN_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_CYAN_A400 = addBaseStyle(new StickerStyle("sticker_cyan_a400", Color.MATERIAL_CYAN_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_CYAN_A700 = addBaseStyle(new StickerStyle("sticker_cyan_a700", Color.MATERIAL_CYAN_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_TEAL_50 = addBaseStyle(new StickerStyle("sticker_teal_50", Color.MATERIAL_TEAL_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_TEAL_100 = addBaseStyle(new StickerStyle("sticker_teal_100", Color.MATERIAL_TEAL_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_TEAL_200 = addBaseStyle(new StickerStyle("sticker_teal_200", Color.MATERIAL_TEAL_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_TEAL_300 = addBaseStyle(new StickerStyle("sticker_teal_300", Color.MATERIAL_TEAL_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_TEAL_400 = addBaseStyle(new StickerStyle("sticker_teal_400", Color.MATERIAL_TEAL_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_TEAL_500 = addBaseStyle(new StickerStyle("sticker_teal_500", Color.MATERIAL_TEAL_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_TEAL_600 = addBaseStyle(new StickerStyle("sticker_teal_600", Color.MATERIAL_TEAL_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_TEAL_700 = addBaseStyle(new StickerStyle("sticker_teal_700", Color.MATERIAL_TEAL_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_TEAL_800 = addBaseStyle(new StickerStyle("sticker_teal_800", Color.MATERIAL_TEAL_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_TEAL_900 = addBaseStyle(new StickerStyle("sticker_teal_900", Color.MATERIAL_TEAL_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_TEAL_A100 = addBaseStyle(new StickerStyle("sticker_teal_a100", Color.MATERIAL_TEAL_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_TEAL_A200 = addBaseStyle(new StickerStyle("sticker_teal_a200", Color.MATERIAL_TEAL_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_TEAL_A400 = addBaseStyle(new StickerStyle("sticker_teal_a400", Color.MATERIAL_TEAL_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_TEAL_A700 = addBaseStyle(new StickerStyle("sticker_teal_a700", Color.MATERIAL_TEAL_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_GREEN_50 = addBaseStyle(new StickerStyle("sticker_green_50", Color.MATERIAL_GREEN_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_GREEN_100 = addBaseStyle(new StickerStyle("sticker_green_100", Color.MATERIAL_GREEN_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_GREEN_200 = addBaseStyle(new StickerStyle("sticker_green_200", Color.MATERIAL_GREEN_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_GREEN_300 = addBaseStyle(new StickerStyle("sticker_green_300", Color.MATERIAL_GREEN_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_GREEN_400 = addBaseStyle(new StickerStyle("sticker_green_400", Color.MATERIAL_GREEN_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_GREEN_500 = addBaseStyle(new StickerStyle("sticker_green_500", Color.MATERIAL_GREEN_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_GREEN_600 = addBaseStyle(new StickerStyle("sticker_green_600", Color.MATERIAL_GREEN_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_GREEN_700 = addBaseStyle(new StickerStyle("sticker_green_700", Color.MATERIAL_GREEN_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_GREEN_800 = addBaseStyle(new StickerStyle("sticker_green_800", Color.MATERIAL_GREEN_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_GREEN_900 = addBaseStyle(new StickerStyle("sticker_green_900", Color.MATERIAL_GREEN_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_GREEN_A100 = addBaseStyle(new StickerStyle("sticker_green_a100", Color.MATERIAL_GREEN_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_GREEN_A200 = addBaseStyle(new StickerStyle("sticker_green_a200", Color.MATERIAL_GREEN_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_GREEN_A400 = addBaseStyle(new StickerStyle("sticker_green_a400", Color.MATERIAL_GREEN_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_GREEN_A700 = addBaseStyle(new StickerStyle("sticker_green_a700", Color.MATERIAL_GREEN_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_LIGHT_GREEN_50 = addBaseStyle(new StickerStyle("sticker_light_green_50", Color.MATERIAL_LIGHT_GREEN_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_LIGHT_GREEN_100 = addBaseStyle(new StickerStyle("sticker_light_green_100", Color.MATERIAL_LIGHT_GREEN_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_LIGHT_GREEN_200 = addBaseStyle(new StickerStyle("sticker_light_green_200", Color.MATERIAL_LIGHT_GREEN_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_LIGHT_GREEN_300 = addBaseStyle(new StickerStyle("sticker_light_green_300", Color.MATERIAL_LIGHT_GREEN_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_LIGHT_GREEN_400 = addBaseStyle(new StickerStyle("sticker_light_green_400", Color.MATERIAL_LIGHT_GREEN_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_LIGHT_GREEN_500 = addBaseStyle(new StickerStyle("sticker_light_green_500", Color.MATERIAL_LIGHT_GREEN_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_LIGHT_GREEN_600 = addBaseStyle(new StickerStyle("sticker_light_green_600", Color.MATERIAL_LIGHT_GREEN_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_LIGHT_GREEN_700 = addBaseStyle(new StickerStyle("sticker_light_green_700", Color.MATERIAL_LIGHT_GREEN_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_LIGHT_GREEN_800 = addBaseStyle(new StickerStyle("sticker_light_green_800", Color.MATERIAL_LIGHT_GREEN_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_LIGHT_GREEN_900 = addBaseStyle(new StickerStyle("sticker_light_green_900", Color.MATERIAL_LIGHT_GREEN_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_LIGHT_GREEN_A100 = addBaseStyle(new StickerStyle("sticker_light_green_a100", Color.MATERIAL_LIGHT_GREEN_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_LIGHT_GREEN_A200 = addBaseStyle(new StickerStyle("sticker_light_green_a200", Color.MATERIAL_LIGHT_GREEN_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_LIGHT_GREEN_A400 = addBaseStyle(new StickerStyle("sticker_light_green_a400", Color.MATERIAL_LIGHT_GREEN_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_LIGHT_GREEN_A700 = addBaseStyle(new StickerStyle("sticker_light_green_a700", Color.MATERIAL_LIGHT_GREEN_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_LIME_50 = addBaseStyle(new StickerStyle("sticker_lime_50", Color.MATERIAL_LIME_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_LIME_100 = addBaseStyle(new StickerStyle("sticker_lime_100", Color.MATERIAL_LIME_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_LIME_200 = addBaseStyle(new StickerStyle("sticker_lime_200", Color.MATERIAL_LIME_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_LIME_300 = addBaseStyle(new StickerStyle("sticker_lime_300", Color.MATERIAL_LIME_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_LIME_400 = addBaseStyle(new StickerStyle("sticker_lime_400", Color.MATERIAL_LIME_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_LIME_500 = addBaseStyle(new StickerStyle("sticker_lime_500", Color.MATERIAL_LIME_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_LIME_600 = addBaseStyle(new StickerStyle("sticker_lime_600", Color.MATERIAL_LIME_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_LIME_700 = addBaseStyle(new StickerStyle("sticker_lime_700", Color.MATERIAL_LIME_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_LIME_800 = addBaseStyle(new StickerStyle("sticker_lime_800", Color.MATERIAL_LIME_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_LIME_900 = addBaseStyle(new StickerStyle("sticker_lime_900", Color.MATERIAL_LIME_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_LIME_A100 = addBaseStyle(new StickerStyle("sticker_lime_a100", Color.MATERIAL_LIME_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_LIME_A200 = addBaseStyle(new StickerStyle("sticker_lime_a200", Color.MATERIAL_LIME_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_LIME_A400 = addBaseStyle(new StickerStyle("sticker_lime_a400", Color.MATERIAL_LIME_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_LIME_A700 = addBaseStyle(new StickerStyle("sticker_lime_a700", Color.MATERIAL_LIME_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_YELLOW_50 = addBaseStyle(new StickerStyle("sticker_yellow_50", Color.MATERIAL_YELLOW_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_YELLOW_100 = addBaseStyle(new StickerStyle("sticker_yellow_100", Color.MATERIAL_YELLOW_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_YELLOW_200 = addBaseStyle(new StickerStyle("sticker_yellow_200", Color.MATERIAL_YELLOW_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_YELLOW_300 = addBaseStyle(new StickerStyle("sticker_yellow_300", Color.MATERIAL_YELLOW_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_YELLOW_400 = addBaseStyle(new StickerStyle("sticker_yellow_400", Color.MATERIAL_YELLOW_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_YELLOW_500 = addBaseStyle(new StickerStyle("sticker_yellow_500", Color.MATERIAL_YELLOW_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_YELLOW_600 = addBaseStyle(new StickerStyle("sticker_yellow_600", Color.MATERIAL_YELLOW_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_YELLOW_700 = addBaseStyle(new StickerStyle("sticker_yellow_700", Color.MATERIAL_YELLOW_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_YELLOW_800 = addBaseStyle(new StickerStyle("sticker_yellow_800", Color.MATERIAL_YELLOW_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_YELLOW_900 = addBaseStyle(new StickerStyle("sticker_yellow_900", Color.MATERIAL_YELLOW_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_YELLOW_A100 = addBaseStyle(new StickerStyle("sticker_yellow_a100", Color.MATERIAL_YELLOW_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_YELLOW_A200 = addBaseStyle(new StickerStyle("sticker_yellow_a200", Color.MATERIAL_YELLOW_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_YELLOW_A400 = addBaseStyle(new StickerStyle("sticker_yellow_a400", Color.MATERIAL_YELLOW_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_YELLOW_A700 = addBaseStyle(new StickerStyle("sticker_yellow_a700", Color.MATERIAL_YELLOW_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_AMBER_50 = addBaseStyle(new StickerStyle("sticker_amber_50", Color.MATERIAL_AMBER_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_AMBER_100 = addBaseStyle(new StickerStyle("sticker_amber_100", Color.MATERIAL_AMBER_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_AMBER_200 = addBaseStyle(new StickerStyle("sticker_amber_200", Color.MATERIAL_AMBER_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_AMBER_300 = addBaseStyle(new StickerStyle("sticker_amber_300", Color.MATERIAL_AMBER_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_AMBER_400 = addBaseStyle(new StickerStyle("sticker_amber_400", Color.MATERIAL_AMBER_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_AMBER_500 = addBaseStyle(new StickerStyle("sticker_amber_500", Color.MATERIAL_AMBER_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_AMBER_600 = addBaseStyle(new StickerStyle("sticker_amber_600", Color.MATERIAL_AMBER_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_AMBER_700 = addBaseStyle(new StickerStyle("sticker_amber_700", Color.MATERIAL_AMBER_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_AMBER_800 = addBaseStyle(new StickerStyle("sticker_amber_800", Color.MATERIAL_AMBER_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_AMBER_900 = addBaseStyle(new StickerStyle("sticker_amber_900", Color.MATERIAL_AMBER_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_AMBER_A100 = addBaseStyle(new StickerStyle("sticker_amber_a100", Color.MATERIAL_AMBER_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_AMBER_A200 = addBaseStyle(new StickerStyle("sticker_amber_a200", Color.MATERIAL_AMBER_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_AMBER_A400 = addBaseStyle(new StickerStyle("sticker_amber_a400", Color.MATERIAL_AMBER_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_AMBER_A700 = addBaseStyle(new StickerStyle("sticker_amber_a700", Color.MATERIAL_AMBER_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_ORANGE_50 = addBaseStyle(new StickerStyle("sticker_orange_50", Color.MATERIAL_ORANGE_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_ORANGE_100 = addBaseStyle(new StickerStyle("sticker_orange_100", Color.MATERIAL_ORANGE_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_ORANGE_200 = addBaseStyle(new StickerStyle("sticker_orange_200", Color.MATERIAL_ORANGE_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_ORANGE_300 = addBaseStyle(new StickerStyle("sticker_orange_300", Color.MATERIAL_ORANGE_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_ORANGE_400 = addBaseStyle(new StickerStyle("sticker_orange_400", Color.MATERIAL_ORANGE_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_ORANGE_500 = addBaseStyle(new StickerStyle("sticker_orange_500", Color.MATERIAL_ORANGE_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_ORANGE_600 = addBaseStyle(new StickerStyle("sticker_orange_600", Color.MATERIAL_ORANGE_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_ORANGE_700 = addBaseStyle(new StickerStyle("sticker_orange_700", Color.MATERIAL_ORANGE_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_ORANGE_800 = addBaseStyle(new StickerStyle("sticker_orange_800", Color.MATERIAL_ORANGE_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_ORANGE_900 = addBaseStyle(new StickerStyle("sticker_orange_900", Color.MATERIAL_ORANGE_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_ORANGE_A100 = addBaseStyle(new StickerStyle("sticker_orange_a100", Color.MATERIAL_ORANGE_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_ORANGE_A200 = addBaseStyle(new StickerStyle("sticker_orange_a200", Color.MATERIAL_ORANGE_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_ORANGE_A400 = addBaseStyle(new StickerStyle("sticker_orange_a400", Color.MATERIAL_ORANGE_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_ORANGE_A700 = addBaseStyle(new StickerStyle("sticker_orange_a700", Color.MATERIAL_ORANGE_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_DEEP_ORANGE_50 = addBaseStyle(new StickerStyle("sticker_deep_orange_50", Color.MATERIAL_DEEP_ORANGE_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_DEEP_ORANGE_100 = addBaseStyle(new StickerStyle("sticker_deep_orange_100", Color.MATERIAL_DEEP_ORANGE_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_DEEP_ORANGE_200 = addBaseStyle(new StickerStyle("sticker_deep_orange_200", Color.MATERIAL_DEEP_ORANGE_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_DEEP_ORANGE_300 = addBaseStyle(new StickerStyle("sticker_deep_orange_300", Color.MATERIAL_DEEP_ORANGE_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_DEEP_ORANGE_400 = addBaseStyle(new StickerStyle("sticker_deep_orange_400", Color.MATERIAL_DEEP_ORANGE_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_DEEP_ORANGE_500 = addBaseStyle(new StickerStyle("sticker_deep_orange_500", Color.MATERIAL_DEEP_ORANGE_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_DEEP_ORANGE_600 = addBaseStyle(new StickerStyle("sticker_deep_orange_600", Color.MATERIAL_DEEP_ORANGE_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_DEEP_ORANGE_700 = addBaseStyle(new StickerStyle("sticker_deep_orange_700", Color.MATERIAL_DEEP_ORANGE_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_DEEP_ORANGE_800 = addBaseStyle(new StickerStyle("sticker_deep_orange_800", Color.MATERIAL_DEEP_ORANGE_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_DEEP_ORANGE_900 = addBaseStyle(new StickerStyle("sticker_deep_orange_900", Color.MATERIAL_DEEP_ORANGE_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_DEEP_ORANGE_A100 = addBaseStyle(new StickerStyle("sticker_deep_orange_a100", Color.MATERIAL_DEEP_ORANGE_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_DEEP_ORANGE_A200 = addBaseStyle(new StickerStyle("sticker_deep_orange_a200", Color.MATERIAL_DEEP_ORANGE_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_DEEP_ORANGE_A400 = addBaseStyle(new StickerStyle("sticker_deep_orange_a400", Color.MATERIAL_DEEP_ORANGE_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_DEEP_ORANGE_A700 = addBaseStyle(new StickerStyle("sticker_deep_orange_a700", Color.MATERIAL_DEEP_ORANGE_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_BROWN_50 = addBaseStyle(new StickerStyle("sticker_brown_50", Color.MATERIAL_BROWN_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_BROWN_100 = addBaseStyle(new StickerStyle("sticker_brown_100", Color.MATERIAL_BROWN_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_BROWN_200 = addBaseStyle(new StickerStyle("sticker_brown_200", Color.MATERIAL_BROWN_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_BROWN_300 = addBaseStyle(new StickerStyle("sticker_brown_300", Color.MATERIAL_BROWN_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_BROWN_400 = addBaseStyle(new StickerStyle("sticker_brown_400", Color.MATERIAL_BROWN_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_BROWN_500 = addBaseStyle(new StickerStyle("sticker_brown_500", Color.MATERIAL_BROWN_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_BROWN_600 = addBaseStyle(new StickerStyle("sticker_brown_600", Color.MATERIAL_BROWN_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_BROWN_700 = addBaseStyle(new StickerStyle("sticker_brown_700", Color.MATERIAL_BROWN_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_BROWN_800 = addBaseStyle(new StickerStyle("sticker_brown_800", Color.MATERIAL_BROWN_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_BROWN_900 = addBaseStyle(new StickerStyle("sticker_brown_900", Color.MATERIAL_BROWN_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_GREY_50 = addBaseStyle(new StickerStyle("sticker_grey_50", Color.MATERIAL_GREY_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_GREY_100 = addBaseStyle(new StickerStyle("sticker_grey_100", Color.MATERIAL_GREY_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_GREY_200 = addBaseStyle(new StickerStyle("sticker_grey_200", Color.MATERIAL_GREY_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_GREY_300 = addBaseStyle(new StickerStyle("sticker_grey_300", Color.MATERIAL_GREY_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_GREY_400 = addBaseStyle(new StickerStyle("sticker_grey_400", Color.MATERIAL_GREY_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_GREY_500 = addBaseStyle(new StickerStyle("sticker_grey_500", Color.MATERIAL_GREY_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_GREY_600 = addBaseStyle(new StickerStyle("sticker_grey_600", Color.MATERIAL_GREY_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_GREY_700 = addBaseStyle(new StickerStyle("sticker_grey_700", Color.MATERIAL_GREY_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_GREY_800 = addBaseStyle(new StickerStyle("sticker_grey_800", Color.MATERIAL_GREY_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_GREY_900 = addBaseStyle(new StickerStyle("sticker_grey_900", Color.MATERIAL_GREY_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_BLACK_1000 = addBaseStyle(new StickerStyle("sticker_black_1000", Color.MATERIAL_BLACK_1000.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_WHITE_1000 = addBaseStyle(new StickerStyle("sticker_white_1000", Color.MATERIAL_WHITE_1000.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_BLUE_GREY_50 = addBaseStyle(new StickerStyle("sticker_blue_grey_50", Color.MATERIAL_BLUE_GREY_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_BLUE_GREY_100 = addBaseStyle(new StickerStyle("sticker_blue_grey_100", Color.MATERIAL_BLUE_GREY_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_BLUE_GREY_200 = addBaseStyle(new StickerStyle("sticker_blue_grey_200", Color.MATERIAL_BLUE_GREY_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_BLUE_GREY_300 = addBaseStyle(new StickerStyle("sticker_blue_grey_300", Color.MATERIAL_BLUE_GREY_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_BLUE_GREY_400 = addBaseStyle(new StickerStyle("sticker_blue_grey_400", Color.MATERIAL_BLUE_GREY_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_BLUE_GREY_500 = addBaseStyle(new StickerStyle("sticker_blue_grey_500", Color.MATERIAL_BLUE_GREY_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_BLUE_GREY_600 = addBaseStyle(new StickerStyle("sticker_blue_grey_600", Color.MATERIAL_BLUE_GREY_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_BLUE_GREY_700 = addBaseStyle(new StickerStyle("sticker_blue_grey_700", Color.MATERIAL_BLUE_GREY_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_BLUE_GREY_800 = addBaseStyle(new StickerStyle("sticker_blue_grey_800", Color.MATERIAL_BLUE_GREY_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle STICKER_BLUE_GREY_900 = addBaseStyle(new StickerStyle("sticker_blue_grey_900", Color.MATERIAL_BLUE_GREY_900.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_PRIMARY = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.PRIMARY.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_SUCCESS = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.SUCCESS.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_INFO = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.INFO.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_WARNING = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.WARNING.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_DANGER = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.DANGER.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_RED_50 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_RED_50.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_RED_100 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_RED_100.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_RED_200 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_RED_200.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_RED_300 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_RED_300.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_RED_400 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_RED_400.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_RED_500 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_RED_500.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_RED_600 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_RED_600.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_RED_700 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_RED_700.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_RED_800 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_RED_800.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_RED_900 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_RED_900.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_RED_A100 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_RED_A100.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_RED_A200 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_RED_A200.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_RED_A400 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_RED_A400.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_RED_A700 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_RED_A700.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_PINK_50 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_PINK_50.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_PINK_100 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_PINK_100.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_PINK_200 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_PINK_200.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_PINK_300 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_PINK_300.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_PINK_400 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_PINK_400.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_PINK_500 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_PINK_500.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_PINK_600 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_PINK_600.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_PINK_700 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_PINK_700.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_PINK_800 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_PINK_800.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_PINK_900 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_PINK_900.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_PINK_A100 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_PINK_A100.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_PINK_A200 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_PINK_A200.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_PINK_A400 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_PINK_A400.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_PINK_A700 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_PINK_A700.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_PURPLE_50 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_PURPLE_50.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_PURPLE_100 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_PURPLE_100.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_PURPLE_200 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_PURPLE_200.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_PURPLE_300 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_PURPLE_300.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_PURPLE_400 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_PURPLE_400.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_PURPLE_500 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_PURPLE_500.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_PURPLE_600 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_PURPLE_600.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_PURPLE_700 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_PURPLE_700.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_PURPLE_800 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_PURPLE_800.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_PURPLE_900 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_PURPLE_900.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_PURPLE_A100 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_PURPLE_A100.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_PURPLE_A200 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_PURPLE_A200.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_PURPLE_A400 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_PURPLE_A400.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_PURPLE_A700 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_PURPLE_A700.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_DEEP_PURPLE_50 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_DEEP_PURPLE_50.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_DEEP_PURPLE_100 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_DEEP_PURPLE_100.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_DEEP_PURPLE_200 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_DEEP_PURPLE_200.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_DEEP_PURPLE_300 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_DEEP_PURPLE_300.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_DEEP_PURPLE_400 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_DEEP_PURPLE_400.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_DEEP_PURPLE_500 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_DEEP_PURPLE_500.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_DEEP_PURPLE_600 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_DEEP_PURPLE_600.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_DEEP_PURPLE_700 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_DEEP_PURPLE_700.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_DEEP_PURPLE_800 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_DEEP_PURPLE_800.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_DEEP_PURPLE_900 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_DEEP_PURPLE_900.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_DEEP_PURPLE_A100 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_DEEP_PURPLE_A100.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_DEEP_PURPLE_A200 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_DEEP_PURPLE_A200.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_DEEP_PURPLE_A400 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_DEEP_PURPLE_A400.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_DEEP_PURPLE_A700 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_DEEP_PURPLE_A700.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_INDIGO_50 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_INDIGO_50.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_INDIGO_100 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_INDIGO_100.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_INDIGO_200 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_INDIGO_200.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_INDIGO_300 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_INDIGO_300.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_INDIGO_400 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_INDIGO_400.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_INDIGO_500 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_INDIGO_500.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_INDIGO_600 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_INDIGO_600.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_INDIGO_700 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_INDIGO_700.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_INDIGO_800 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_INDIGO_800.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_INDIGO_900 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_INDIGO_900.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_INDIGO_A100 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_INDIGO_A100.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_INDIGO_A200 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_INDIGO_A200.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_INDIGO_A400 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_INDIGO_A400.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_INDIGO_A700 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_INDIGO_A700.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_BLUE_50 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_BLUE_50.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_BLUE_100 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_BLUE_100.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_BLUE_200 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_BLUE_200.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_BLUE_300 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_BLUE_300.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_BLUE_400 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_BLUE_400.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_BLUE_500 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_BLUE_500.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_BLUE_600 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_BLUE_600.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_BLUE_700 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_BLUE_700.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_BLUE_800 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_BLUE_800.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_BLUE_900 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_BLUE_900.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_BLUE_A100 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_BLUE_A100.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_BLUE_A200 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_BLUE_A200.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_BLUE_A400 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_BLUE_A400.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_BLUE_A700 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_BLUE_A700.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_LIGHT_BLUE_50 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_LIGHT_BLUE_50.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_LIGHT_BLUE_100 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_LIGHT_BLUE_100.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_LIGHT_BLUE_200 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_LIGHT_BLUE_200.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_LIGHT_BLUE_300 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_LIGHT_BLUE_300.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_LIGHT_BLUE_400 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_LIGHT_BLUE_400.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_LIGHT_BLUE_500 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_LIGHT_BLUE_500.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_LIGHT_BLUE_600 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_LIGHT_BLUE_600.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_LIGHT_BLUE_700 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_LIGHT_BLUE_700.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_LIGHT_BLUE_800 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_LIGHT_BLUE_800.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_LIGHT_BLUE_900 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_LIGHT_BLUE_900.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_LIGHT_BLUE_A100 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_LIGHT_BLUE_A100.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_LIGHT_BLUE_A200 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_LIGHT_BLUE_A200.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_LIGHT_BLUE_A400 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_LIGHT_BLUE_A400.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_LIGHT_BLUE_A700 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_LIGHT_BLUE_A700.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_CYAN_50 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_CYAN_50.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_CYAN_100 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_CYAN_100.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_CYAN_200 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_CYAN_200.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_CYAN_300 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_CYAN_300.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_CYAN_400 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_CYAN_400.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_CYAN_500 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_CYAN_500.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_CYAN_600 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_CYAN_600.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_CYAN_700 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_CYAN_700.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_CYAN_800 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_CYAN_800.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_CYAN_900 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_CYAN_900.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_CYAN_A100 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_CYAN_A100.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_CYAN_A200 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_CYAN_A200.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_CYAN_A400 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_CYAN_A400.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_CYAN_A700 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_CYAN_A700.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_TEAL_50 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_TEAL_50.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_TEAL_100 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_TEAL_100.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_TEAL_200 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_TEAL_200.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_TEAL_300 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_TEAL_300.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_TEAL_400 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_TEAL_400.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_TEAL_500 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_TEAL_500.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_TEAL_600 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_TEAL_600.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_TEAL_700 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_TEAL_700.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_TEAL_800 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_TEAL_800.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_TEAL_900 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_TEAL_900.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_TEAL_A100 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_TEAL_A100.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_TEAL_A200 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_TEAL_A200.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_TEAL_A400 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_TEAL_A400.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_TEAL_A700 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_TEAL_A700.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_GREEN_50 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_GREEN_50.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_GREEN_100 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_GREEN_100.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_GREEN_200 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_GREEN_200.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_GREEN_300 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_GREEN_300.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_GREEN_400 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_GREEN_400.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_GREEN_500 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_GREEN_500.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_GREEN_600 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_GREEN_600.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_GREEN_700 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_GREEN_700.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_GREEN_800 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_GREEN_800.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_GREEN_900 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_GREEN_900.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_GREEN_A100 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_GREEN_A100.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_GREEN_A200 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_GREEN_A200.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_GREEN_A400 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_GREEN_A400.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_GREEN_A700 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_GREEN_A700.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_LIGHT_GREEN_50 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_LIGHT_GREEN_50.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_LIGHT_GREEN_100 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_LIGHT_GREEN_100.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_LIGHT_GREEN_200 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_LIGHT_GREEN_200.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_LIGHT_GREEN_300 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_LIGHT_GREEN_300.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_LIGHT_GREEN_400 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_LIGHT_GREEN_400.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_LIGHT_GREEN_500 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_LIGHT_GREEN_500.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_LIGHT_GREEN_600 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_LIGHT_GREEN_600.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_LIGHT_GREEN_700 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_LIGHT_GREEN_700.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_LIGHT_GREEN_800 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_LIGHT_GREEN_800.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_LIGHT_GREEN_900 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_LIGHT_GREEN_900.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_LIGHT_GREEN_A100 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_LIGHT_GREEN_A100.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_LIGHT_GREEN_A200 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_LIGHT_GREEN_A200.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_LIGHT_GREEN_A400 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_LIGHT_GREEN_A400.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_LIGHT_GREEN_A700 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_LIGHT_GREEN_A700.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_LIME_50 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_LIME_50.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_LIME_100 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_LIME_100.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_LIME_200 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_LIME_200.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_LIME_300 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_LIME_300.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_LIME_400 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_LIME_400.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_LIME_500 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_LIME_500.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_LIME_600 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_LIME_600.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_LIME_700 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_LIME_700.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_LIME_800 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_LIME_800.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_LIME_900 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_LIME_900.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_LIME_A100 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_LIME_A100.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_LIME_A200 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_LIME_A200.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_LIME_A400 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_LIME_A400.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_LIME_A700 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_LIME_A700.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_YELLOW_50 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_YELLOW_50.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_YELLOW_100 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_YELLOW_100.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_YELLOW_200 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_YELLOW_200.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_YELLOW_300 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_YELLOW_300.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_YELLOW_400 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_YELLOW_400.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_YELLOW_500 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_YELLOW_500.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_YELLOW_600 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_YELLOW_600.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_YELLOW_700 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_YELLOW_700.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_YELLOW_800 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_YELLOW_800.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_YELLOW_900 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_YELLOW_900.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_YELLOW_A100 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_YELLOW_A100.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_YELLOW_A200 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_YELLOW_A200.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_YELLOW_A400 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_YELLOW_A400.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_YELLOW_A700 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_YELLOW_A700.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_AMBER_50 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_AMBER_50.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_AMBER_100 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_AMBER_100.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_AMBER_200 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_AMBER_200.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_AMBER_300 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_AMBER_300.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_AMBER_400 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_AMBER_400.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_AMBER_500 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_AMBER_500.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_AMBER_600 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_AMBER_600.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_AMBER_700 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_AMBER_700.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_AMBER_800 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_AMBER_800.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_AMBER_900 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_AMBER_900.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_AMBER_A100 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_AMBER_A100.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_AMBER_A200 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_AMBER_A200.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_AMBER_A400 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_AMBER_A400.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_AMBER_A700 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_AMBER_A700.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_ORANGE_50 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_ORANGE_50.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_ORANGE_100 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_ORANGE_100.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_ORANGE_200 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_ORANGE_200.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_ORANGE_300 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_ORANGE_300.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_ORANGE_400 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_ORANGE_400.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_ORANGE_500 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_ORANGE_500.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_ORANGE_600 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_ORANGE_600.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_ORANGE_700 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_ORANGE_700.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_ORANGE_800 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_ORANGE_800.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_ORANGE_900 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_ORANGE_900.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_ORANGE_A100 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_ORANGE_A100.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_ORANGE_A200 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_ORANGE_A200.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_ORANGE_A400 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_ORANGE_A400.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_ORANGE_A700 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_ORANGE_A700.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_DEEP_ORANGE_50 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_DEEP_ORANGE_50.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_DEEP_ORANGE_100 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_DEEP_ORANGE_100.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_DEEP_ORANGE_200 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_DEEP_ORANGE_200.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_DEEP_ORANGE_300 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_DEEP_ORANGE_300.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_DEEP_ORANGE_400 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_DEEP_ORANGE_400.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_DEEP_ORANGE_500 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_DEEP_ORANGE_500.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_DEEP_ORANGE_600 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_DEEP_ORANGE_600.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_DEEP_ORANGE_700 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_DEEP_ORANGE_700.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_DEEP_ORANGE_800 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_DEEP_ORANGE_800.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_DEEP_ORANGE_900 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_DEEP_ORANGE_900.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_DEEP_ORANGE_A100 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_DEEP_ORANGE_A100.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_DEEP_ORANGE_A200 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_DEEP_ORANGE_A200.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_DEEP_ORANGE_A400 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_DEEP_ORANGE_A400.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_DEEP_ORANGE_A700 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_DEEP_ORANGE_A700.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_BROWN_50 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_BROWN_50.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_BROWN_100 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_BROWN_100.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_BROWN_200 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_BROWN_200.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_BROWN_300 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_BROWN_300.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_BROWN_400 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_BROWN_400.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_BROWN_500 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_BROWN_500.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_BROWN_600 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_BROWN_600.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_BROWN_700 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_BROWN_700.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_BROWN_800 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_BROWN_800.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_BROWN_900 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_BROWN_900.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_GREY_50 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_GREY_50.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_GREY_100 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_GREY_100.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_GREY_200 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_GREY_200.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_GREY_300 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_GREY_300.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_GREY_400 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_GREY_400.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_GREY_500 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_GREY_500.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_GREY_600 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_GREY_600.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_GREY_700 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_GREY_700.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_GREY_800 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_GREY_800.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_GREY_900 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_GREY_900.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_BLACK_1000 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_BLACK_1000.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_WHITE_1000 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_WHITE_1000.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_BLUE_GREY_50 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_BLUE_GREY_50.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_BLUE_GREY_100 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_BLUE_GREY_100.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_BLUE_GREY_200 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_BLUE_GREY_200.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_BLUE_GREY_300 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_BLUE_GREY_300.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_BLUE_GREY_400 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_BLUE_GREY_400.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_BLUE_GREY_500 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_BLUE_GREY_500.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_BLUE_GREY_600 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_BLUE_GREY_600.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_BLUE_GREY_700 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_BLUE_GREY_700.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_BLUE_GREY_800 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_BLUE_GREY_800.toHtmlColorString()));
+	public static final MaterialIconStyle STICKER_BLUE_GREY_900 = addBaseStyle(new MaterialIconStyle(STICKER, RgbaColor.MATERIAL_BLUE_GREY_900.toHtmlColorString()));
 
 	//OUTLINE styles:
-	public static final AbstractMaterialIconStyle OUTLINE_BOOTSTRAP_PRIMARY = addBaseStyle(new OutlineStyle("outline_bootstrap_primary", Color.BOOTSTRAP_PRIMARY.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_BOOTSTRAP_SUCCESS = addBaseStyle(new OutlineStyle("outline_bootstrap_success", Color.BOOTSTRAP_SUCCESS.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_BOOTSTRAP_INFO = addBaseStyle(new OutlineStyle("outline_bootstrap_info", Color.BOOTSTRAP_INFO.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_BOOTSTRAP_WARNING = addBaseStyle(new OutlineStyle("outline_bootstrap_warning", Color.BOOTSTRAP_WARNING.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_BOOTSTRAP_DANGER = addBaseStyle(new OutlineStyle("outline_bootstrap_danger", Color.BOOTSTRAP_DANGER.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_RED_50 = addBaseStyle(new OutlineStyle("outline_red_50", Color.MATERIAL_RED_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_RED_100 = addBaseStyle(new OutlineStyle("outline_red_100", Color.MATERIAL_RED_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_RED_200 = addBaseStyle(new OutlineStyle("outline_red_200", Color.MATERIAL_RED_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_RED_300 = addBaseStyle(new OutlineStyle("outline_red_300", Color.MATERIAL_RED_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_RED_400 = addBaseStyle(new OutlineStyle("outline_red_400", Color.MATERIAL_RED_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_RED_500 = addBaseStyle(new OutlineStyle("outline_red_500", Color.MATERIAL_RED_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_RED_600 = addBaseStyle(new OutlineStyle("outline_red_600", Color.MATERIAL_RED_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_RED_700 = addBaseStyle(new OutlineStyle("outline_red_700", Color.MATERIAL_RED_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_RED_800 = addBaseStyle(new OutlineStyle("outline_red_800", Color.MATERIAL_RED_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_RED_900 = addBaseStyle(new OutlineStyle("outline_red_900", Color.MATERIAL_RED_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_RED_A100 = addBaseStyle(new OutlineStyle("outline_red_a100", Color.MATERIAL_RED_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_RED_A200 = addBaseStyle(new OutlineStyle("outline_red_a200", Color.MATERIAL_RED_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_RED_A400 = addBaseStyle(new OutlineStyle("outline_red_a400", Color.MATERIAL_RED_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_RED_A700 = addBaseStyle(new OutlineStyle("outline_red_a700", Color.MATERIAL_RED_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_PINK_50 = addBaseStyle(new OutlineStyle("outline_pink_50", Color.MATERIAL_PINK_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_PINK_100 = addBaseStyle(new OutlineStyle("outline_pink_100", Color.MATERIAL_PINK_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_PINK_200 = addBaseStyle(new OutlineStyle("outline_pink_200", Color.MATERIAL_PINK_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_PINK_300 = addBaseStyle(new OutlineStyle("outline_pink_300", Color.MATERIAL_PINK_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_PINK_400 = addBaseStyle(new OutlineStyle("outline_pink_400", Color.MATERIAL_PINK_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_PINK_500 = addBaseStyle(new OutlineStyle("outline_pink_500", Color.MATERIAL_PINK_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_PINK_600 = addBaseStyle(new OutlineStyle("outline_pink_600", Color.MATERIAL_PINK_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_PINK_700 = addBaseStyle(new OutlineStyle("outline_pink_700", Color.MATERIAL_PINK_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_PINK_800 = addBaseStyle(new OutlineStyle("outline_pink_800", Color.MATERIAL_PINK_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_PINK_900 = addBaseStyle(new OutlineStyle("outline_pink_900", Color.MATERIAL_PINK_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_PINK_A100 = addBaseStyle(new OutlineStyle("outline_pink_a100", Color.MATERIAL_PINK_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_PINK_A200 = addBaseStyle(new OutlineStyle("outline_pink_a200", Color.MATERIAL_PINK_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_PINK_A400 = addBaseStyle(new OutlineStyle("outline_pink_a400", Color.MATERIAL_PINK_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_PINK_A700 = addBaseStyle(new OutlineStyle("outline_pink_a700", Color.MATERIAL_PINK_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_PURPLE_50 = addBaseStyle(new OutlineStyle("outline_purple_50", Color.MATERIAL_PURPLE_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_PURPLE_100 = addBaseStyle(new OutlineStyle("outline_purple_100", Color.MATERIAL_PURPLE_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_PURPLE_200 = addBaseStyle(new OutlineStyle("outline_purple_200", Color.MATERIAL_PURPLE_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_PURPLE_300 = addBaseStyle(new OutlineStyle("outline_purple_300", Color.MATERIAL_PURPLE_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_PURPLE_400 = addBaseStyle(new OutlineStyle("outline_purple_400", Color.MATERIAL_PURPLE_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_PURPLE_500 = addBaseStyle(new OutlineStyle("outline_purple_500", Color.MATERIAL_PURPLE_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_PURPLE_600 = addBaseStyle(new OutlineStyle("outline_purple_600", Color.MATERIAL_PURPLE_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_PURPLE_700 = addBaseStyle(new OutlineStyle("outline_purple_700", Color.MATERIAL_PURPLE_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_PURPLE_800 = addBaseStyle(new OutlineStyle("outline_purple_800", Color.MATERIAL_PURPLE_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_PURPLE_900 = addBaseStyle(new OutlineStyle("outline_purple_900", Color.MATERIAL_PURPLE_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_PURPLE_A100 = addBaseStyle(new OutlineStyle("outline_purple_a100", Color.MATERIAL_PURPLE_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_PURPLE_A200 = addBaseStyle(new OutlineStyle("outline_purple_a200", Color.MATERIAL_PURPLE_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_PURPLE_A400 = addBaseStyle(new OutlineStyle("outline_purple_a400", Color.MATERIAL_PURPLE_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_PURPLE_A700 = addBaseStyle(new OutlineStyle("outline_purple_a700", Color.MATERIAL_PURPLE_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_DEEP_PURPLE_50 = addBaseStyle(new OutlineStyle("outline_deep_purple_50", Color.MATERIAL_DEEP_PURPLE_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_DEEP_PURPLE_100 = addBaseStyle(new OutlineStyle("outline_deep_purple_100", Color.MATERIAL_DEEP_PURPLE_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_DEEP_PURPLE_200 = addBaseStyle(new OutlineStyle("outline_deep_purple_200", Color.MATERIAL_DEEP_PURPLE_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_DEEP_PURPLE_300 = addBaseStyle(new OutlineStyle("outline_deep_purple_300", Color.MATERIAL_DEEP_PURPLE_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_DEEP_PURPLE_400 = addBaseStyle(new OutlineStyle("outline_deep_purple_400", Color.MATERIAL_DEEP_PURPLE_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_DEEP_PURPLE_500 = addBaseStyle(new OutlineStyle("outline_deep_purple_500", Color.MATERIAL_DEEP_PURPLE_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_DEEP_PURPLE_600 = addBaseStyle(new OutlineStyle("outline_deep_purple_600", Color.MATERIAL_DEEP_PURPLE_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_DEEP_PURPLE_700 = addBaseStyle(new OutlineStyle("outline_deep_purple_700", Color.MATERIAL_DEEP_PURPLE_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_DEEP_PURPLE_800 = addBaseStyle(new OutlineStyle("outline_deep_purple_800", Color.MATERIAL_DEEP_PURPLE_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_DEEP_PURPLE_900 = addBaseStyle(new OutlineStyle("outline_deep_purple_900", Color.MATERIAL_DEEP_PURPLE_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_DEEP_PURPLE_A100 = addBaseStyle(new OutlineStyle("outline_deep_purple_a100", Color.MATERIAL_DEEP_PURPLE_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_DEEP_PURPLE_A200 = addBaseStyle(new OutlineStyle("outline_deep_purple_a200", Color.MATERIAL_DEEP_PURPLE_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_DEEP_PURPLE_A400 = addBaseStyle(new OutlineStyle("outline_deep_purple_a400", Color.MATERIAL_DEEP_PURPLE_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_DEEP_PURPLE_A700 = addBaseStyle(new OutlineStyle("outline_deep_purple_a700", Color.MATERIAL_DEEP_PURPLE_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_INDIGO_50 = addBaseStyle(new OutlineStyle("outline_indigo_50", Color.MATERIAL_INDIGO_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_INDIGO_100 = addBaseStyle(new OutlineStyle("outline_indigo_100", Color.MATERIAL_INDIGO_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_INDIGO_200 = addBaseStyle(new OutlineStyle("outline_indigo_200", Color.MATERIAL_INDIGO_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_INDIGO_300 = addBaseStyle(new OutlineStyle("outline_indigo_300", Color.MATERIAL_INDIGO_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_INDIGO_400 = addBaseStyle(new OutlineStyle("outline_indigo_400", Color.MATERIAL_INDIGO_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_INDIGO_500 = addBaseStyle(new OutlineStyle("outline_indigo_500", Color.MATERIAL_INDIGO_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_INDIGO_600 = addBaseStyle(new OutlineStyle("outline_indigo_600", Color.MATERIAL_INDIGO_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_INDIGO_700 = addBaseStyle(new OutlineStyle("outline_indigo_700", Color.MATERIAL_INDIGO_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_INDIGO_800 = addBaseStyle(new OutlineStyle("outline_indigo_800", Color.MATERIAL_INDIGO_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_INDIGO_900 = addBaseStyle(new OutlineStyle("outline_indigo_900", Color.MATERIAL_INDIGO_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_INDIGO_A100 = addBaseStyle(new OutlineStyle("outline_indigo_a100", Color.MATERIAL_INDIGO_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_INDIGO_A200 = addBaseStyle(new OutlineStyle("outline_indigo_a200", Color.MATERIAL_INDIGO_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_INDIGO_A400 = addBaseStyle(new OutlineStyle("outline_indigo_a400", Color.MATERIAL_INDIGO_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_INDIGO_A700 = addBaseStyle(new OutlineStyle("outline_indigo_a700", Color.MATERIAL_INDIGO_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_BLUE_50 = addBaseStyle(new OutlineStyle("outline_blue_50", Color.MATERIAL_BLUE_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_BLUE_100 = addBaseStyle(new OutlineStyle("outline_blue_100", Color.MATERIAL_BLUE_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_BLUE_200 = addBaseStyle(new OutlineStyle("outline_blue_200", Color.MATERIAL_BLUE_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_BLUE_300 = addBaseStyle(new OutlineStyle("outline_blue_300", Color.MATERIAL_BLUE_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_BLUE_400 = addBaseStyle(new OutlineStyle("outline_blue_400", Color.MATERIAL_BLUE_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_BLUE_500 = addBaseStyle(new OutlineStyle("outline_blue_500", Color.MATERIAL_BLUE_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_BLUE_600 = addBaseStyle(new OutlineStyle("outline_blue_600", Color.MATERIAL_BLUE_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_BLUE_700 = addBaseStyle(new OutlineStyle("outline_blue_700", Color.MATERIAL_BLUE_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_BLUE_800 = addBaseStyle(new OutlineStyle("outline_blue_800", Color.MATERIAL_BLUE_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_BLUE_900 = addBaseStyle(new OutlineStyle("outline_blue_900", Color.MATERIAL_BLUE_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_BLUE_A100 = addBaseStyle(new OutlineStyle("outline_blue_a100", Color.MATERIAL_BLUE_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_BLUE_A200 = addBaseStyle(new OutlineStyle("outline_blue_a200", Color.MATERIAL_BLUE_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_BLUE_A400 = addBaseStyle(new OutlineStyle("outline_blue_a400", Color.MATERIAL_BLUE_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_BLUE_A700 = addBaseStyle(new OutlineStyle("outline_blue_a700", Color.MATERIAL_BLUE_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_LIGHT_BLUE_50 = addBaseStyle(new OutlineStyle("outline_light_blue_50", Color.MATERIAL_LIGHT_BLUE_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_LIGHT_BLUE_100 = addBaseStyle(new OutlineStyle("outline_light_blue_100", Color.MATERIAL_LIGHT_BLUE_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_LIGHT_BLUE_200 = addBaseStyle(new OutlineStyle("outline_light_blue_200", Color.MATERIAL_LIGHT_BLUE_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_LIGHT_BLUE_300 = addBaseStyle(new OutlineStyle("outline_light_blue_300", Color.MATERIAL_LIGHT_BLUE_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_LIGHT_BLUE_400 = addBaseStyle(new OutlineStyle("outline_light_blue_400", Color.MATERIAL_LIGHT_BLUE_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_LIGHT_BLUE_500 = addBaseStyle(new OutlineStyle("outline_light_blue_500", Color.MATERIAL_LIGHT_BLUE_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_LIGHT_BLUE_600 = addBaseStyle(new OutlineStyle("outline_light_blue_600", Color.MATERIAL_LIGHT_BLUE_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_LIGHT_BLUE_700 = addBaseStyle(new OutlineStyle("outline_light_blue_700", Color.MATERIAL_LIGHT_BLUE_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_LIGHT_BLUE_800 = addBaseStyle(new OutlineStyle("outline_light_blue_800", Color.MATERIAL_LIGHT_BLUE_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_LIGHT_BLUE_900 = addBaseStyle(new OutlineStyle("outline_light_blue_900", Color.MATERIAL_LIGHT_BLUE_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_LIGHT_BLUE_A100 = addBaseStyle(new OutlineStyle("outline_light_blue_a100", Color.MATERIAL_LIGHT_BLUE_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_LIGHT_BLUE_A200 = addBaseStyle(new OutlineStyle("outline_light_blue_a200", Color.MATERIAL_LIGHT_BLUE_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_LIGHT_BLUE_A400 = addBaseStyle(new OutlineStyle("outline_light_blue_a400", Color.MATERIAL_LIGHT_BLUE_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_LIGHT_BLUE_A700 = addBaseStyle(new OutlineStyle("outline_light_blue_a700", Color.MATERIAL_LIGHT_BLUE_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_CYAN_50 = addBaseStyle(new OutlineStyle("outline_cyan_50", Color.MATERIAL_CYAN_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_CYAN_100 = addBaseStyle(new OutlineStyle("outline_cyan_100", Color.MATERIAL_CYAN_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_CYAN_200 = addBaseStyle(new OutlineStyle("outline_cyan_200", Color.MATERIAL_CYAN_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_CYAN_300 = addBaseStyle(new OutlineStyle("outline_cyan_300", Color.MATERIAL_CYAN_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_CYAN_400 = addBaseStyle(new OutlineStyle("outline_cyan_400", Color.MATERIAL_CYAN_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_CYAN_500 = addBaseStyle(new OutlineStyle("outline_cyan_500", Color.MATERIAL_CYAN_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_CYAN_600 = addBaseStyle(new OutlineStyle("outline_cyan_600", Color.MATERIAL_CYAN_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_CYAN_700 = addBaseStyle(new OutlineStyle("outline_cyan_700", Color.MATERIAL_CYAN_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_CYAN_800 = addBaseStyle(new OutlineStyle("outline_cyan_800", Color.MATERIAL_CYAN_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_CYAN_900 = addBaseStyle(new OutlineStyle("outline_cyan_900", Color.MATERIAL_CYAN_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_CYAN_A100 = addBaseStyle(new OutlineStyle("outline_cyan_a100", Color.MATERIAL_CYAN_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_CYAN_A200 = addBaseStyle(new OutlineStyle("outline_cyan_a200", Color.MATERIAL_CYAN_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_CYAN_A400 = addBaseStyle(new OutlineStyle("outline_cyan_a400", Color.MATERIAL_CYAN_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_CYAN_A700 = addBaseStyle(new OutlineStyle("outline_cyan_a700", Color.MATERIAL_CYAN_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_TEAL_50 = addBaseStyle(new OutlineStyle("outline_teal_50", Color.MATERIAL_TEAL_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_TEAL_100 = addBaseStyle(new OutlineStyle("outline_teal_100", Color.MATERIAL_TEAL_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_TEAL_200 = addBaseStyle(new OutlineStyle("outline_teal_200", Color.MATERIAL_TEAL_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_TEAL_300 = addBaseStyle(new OutlineStyle("outline_teal_300", Color.MATERIAL_TEAL_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_TEAL_400 = addBaseStyle(new OutlineStyle("outline_teal_400", Color.MATERIAL_TEAL_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_TEAL_500 = addBaseStyle(new OutlineStyle("outline_teal_500", Color.MATERIAL_TEAL_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_TEAL_600 = addBaseStyle(new OutlineStyle("outline_teal_600", Color.MATERIAL_TEAL_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_TEAL_700 = addBaseStyle(new OutlineStyle("outline_teal_700", Color.MATERIAL_TEAL_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_TEAL_800 = addBaseStyle(new OutlineStyle("outline_teal_800", Color.MATERIAL_TEAL_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_TEAL_900 = addBaseStyle(new OutlineStyle("outline_teal_900", Color.MATERIAL_TEAL_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_TEAL_A100 = addBaseStyle(new OutlineStyle("outline_teal_a100", Color.MATERIAL_TEAL_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_TEAL_A200 = addBaseStyle(new OutlineStyle("outline_teal_a200", Color.MATERIAL_TEAL_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_TEAL_A400 = addBaseStyle(new OutlineStyle("outline_teal_a400", Color.MATERIAL_TEAL_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_TEAL_A700 = addBaseStyle(new OutlineStyle("outline_teal_a700", Color.MATERIAL_TEAL_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_GREEN_50 = addBaseStyle(new OutlineStyle("outline_green_50", Color.MATERIAL_GREEN_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_GREEN_100 = addBaseStyle(new OutlineStyle("outline_green_100", Color.MATERIAL_GREEN_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_GREEN_200 = addBaseStyle(new OutlineStyle("outline_green_200", Color.MATERIAL_GREEN_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_GREEN_300 = addBaseStyle(new OutlineStyle("outline_green_300", Color.MATERIAL_GREEN_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_GREEN_400 = addBaseStyle(new OutlineStyle("outline_green_400", Color.MATERIAL_GREEN_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_GREEN_500 = addBaseStyle(new OutlineStyle("outline_green_500", Color.MATERIAL_GREEN_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_GREEN_600 = addBaseStyle(new OutlineStyle("outline_green_600", Color.MATERIAL_GREEN_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_GREEN_700 = addBaseStyle(new OutlineStyle("outline_green_700", Color.MATERIAL_GREEN_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_GREEN_800 = addBaseStyle(new OutlineStyle("outline_green_800", Color.MATERIAL_GREEN_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_GREEN_900 = addBaseStyle(new OutlineStyle("outline_green_900", Color.MATERIAL_GREEN_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_GREEN_A100 = addBaseStyle(new OutlineStyle("outline_green_a100", Color.MATERIAL_GREEN_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_GREEN_A200 = addBaseStyle(new OutlineStyle("outline_green_a200", Color.MATERIAL_GREEN_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_GREEN_A400 = addBaseStyle(new OutlineStyle("outline_green_a400", Color.MATERIAL_GREEN_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_GREEN_A700 = addBaseStyle(new OutlineStyle("outline_green_a700", Color.MATERIAL_GREEN_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_LIGHT_GREEN_50 = addBaseStyle(new OutlineStyle("outline_light_green_50", Color.MATERIAL_LIGHT_GREEN_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_LIGHT_GREEN_100 = addBaseStyle(new OutlineStyle("outline_light_green_100", Color.MATERIAL_LIGHT_GREEN_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_LIGHT_GREEN_200 = addBaseStyle(new OutlineStyle("outline_light_green_200", Color.MATERIAL_LIGHT_GREEN_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_LIGHT_GREEN_300 = addBaseStyle(new OutlineStyle("outline_light_green_300", Color.MATERIAL_LIGHT_GREEN_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_LIGHT_GREEN_400 = addBaseStyle(new OutlineStyle("outline_light_green_400", Color.MATERIAL_LIGHT_GREEN_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_LIGHT_GREEN_500 = addBaseStyle(new OutlineStyle("outline_light_green_500", Color.MATERIAL_LIGHT_GREEN_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_LIGHT_GREEN_600 = addBaseStyle(new OutlineStyle("outline_light_green_600", Color.MATERIAL_LIGHT_GREEN_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_LIGHT_GREEN_700 = addBaseStyle(new OutlineStyle("outline_light_green_700", Color.MATERIAL_LIGHT_GREEN_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_LIGHT_GREEN_800 = addBaseStyle(new OutlineStyle("outline_light_green_800", Color.MATERIAL_LIGHT_GREEN_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_LIGHT_GREEN_900 = addBaseStyle(new OutlineStyle("outline_light_green_900", Color.MATERIAL_LIGHT_GREEN_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_LIGHT_GREEN_A100 = addBaseStyle(new OutlineStyle("outline_light_green_a100", Color.MATERIAL_LIGHT_GREEN_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_LIGHT_GREEN_A200 = addBaseStyle(new OutlineStyle("outline_light_green_a200", Color.MATERIAL_LIGHT_GREEN_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_LIGHT_GREEN_A400 = addBaseStyle(new OutlineStyle("outline_light_green_a400", Color.MATERIAL_LIGHT_GREEN_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_LIGHT_GREEN_A700 = addBaseStyle(new OutlineStyle("outline_light_green_a700", Color.MATERIAL_LIGHT_GREEN_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_LIME_50 = addBaseStyle(new OutlineStyle("outline_lime_50", Color.MATERIAL_LIME_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_LIME_100 = addBaseStyle(new OutlineStyle("outline_lime_100", Color.MATERIAL_LIME_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_LIME_200 = addBaseStyle(new OutlineStyle("outline_lime_200", Color.MATERIAL_LIME_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_LIME_300 = addBaseStyle(new OutlineStyle("outline_lime_300", Color.MATERIAL_LIME_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_LIME_400 = addBaseStyle(new OutlineStyle("outline_lime_400", Color.MATERIAL_LIME_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_LIME_500 = addBaseStyle(new OutlineStyle("outline_lime_500", Color.MATERIAL_LIME_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_LIME_600 = addBaseStyle(new OutlineStyle("outline_lime_600", Color.MATERIAL_LIME_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_LIME_700 = addBaseStyle(new OutlineStyle("outline_lime_700", Color.MATERIAL_LIME_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_LIME_800 = addBaseStyle(new OutlineStyle("outline_lime_800", Color.MATERIAL_LIME_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_LIME_900 = addBaseStyle(new OutlineStyle("outline_lime_900", Color.MATERIAL_LIME_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_LIME_A100 = addBaseStyle(new OutlineStyle("outline_lime_a100", Color.MATERIAL_LIME_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_LIME_A200 = addBaseStyle(new OutlineStyle("outline_lime_a200", Color.MATERIAL_LIME_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_LIME_A400 = addBaseStyle(new OutlineStyle("outline_lime_a400", Color.MATERIAL_LIME_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_LIME_A700 = addBaseStyle(new OutlineStyle("outline_lime_a700", Color.MATERIAL_LIME_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_YELLOW_50 = addBaseStyle(new OutlineStyle("outline_yellow_50", Color.MATERIAL_YELLOW_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_YELLOW_100 = addBaseStyle(new OutlineStyle("outline_yellow_100", Color.MATERIAL_YELLOW_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_YELLOW_200 = addBaseStyle(new OutlineStyle("outline_yellow_200", Color.MATERIAL_YELLOW_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_YELLOW_300 = addBaseStyle(new OutlineStyle("outline_yellow_300", Color.MATERIAL_YELLOW_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_YELLOW_400 = addBaseStyle(new OutlineStyle("outline_yellow_400", Color.MATERIAL_YELLOW_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_YELLOW_500 = addBaseStyle(new OutlineStyle("outline_yellow_500", Color.MATERIAL_YELLOW_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_YELLOW_600 = addBaseStyle(new OutlineStyle("outline_yellow_600", Color.MATERIAL_YELLOW_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_YELLOW_700 = addBaseStyle(new OutlineStyle("outline_yellow_700", Color.MATERIAL_YELLOW_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_YELLOW_800 = addBaseStyle(new OutlineStyle("outline_yellow_800", Color.MATERIAL_YELLOW_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_YELLOW_900 = addBaseStyle(new OutlineStyle("outline_yellow_900", Color.MATERIAL_YELLOW_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_YELLOW_A100 = addBaseStyle(new OutlineStyle("outline_yellow_a100", Color.MATERIAL_YELLOW_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_YELLOW_A200 = addBaseStyle(new OutlineStyle("outline_yellow_a200", Color.MATERIAL_YELLOW_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_YELLOW_A400 = addBaseStyle(new OutlineStyle("outline_yellow_a400", Color.MATERIAL_YELLOW_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_YELLOW_A700 = addBaseStyle(new OutlineStyle("outline_yellow_a700", Color.MATERIAL_YELLOW_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_AMBER_50 = addBaseStyle(new OutlineStyle("outline_amber_50", Color.MATERIAL_AMBER_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_AMBER_100 = addBaseStyle(new OutlineStyle("outline_amber_100", Color.MATERIAL_AMBER_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_AMBER_200 = addBaseStyle(new OutlineStyle("outline_amber_200", Color.MATERIAL_AMBER_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_AMBER_300 = addBaseStyle(new OutlineStyle("outline_amber_300", Color.MATERIAL_AMBER_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_AMBER_400 = addBaseStyle(new OutlineStyle("outline_amber_400", Color.MATERIAL_AMBER_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_AMBER_500 = addBaseStyle(new OutlineStyle("outline_amber_500", Color.MATERIAL_AMBER_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_AMBER_600 = addBaseStyle(new OutlineStyle("outline_amber_600", Color.MATERIAL_AMBER_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_AMBER_700 = addBaseStyle(new OutlineStyle("outline_amber_700", Color.MATERIAL_AMBER_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_AMBER_800 = addBaseStyle(new OutlineStyle("outline_amber_800", Color.MATERIAL_AMBER_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_AMBER_900 = addBaseStyle(new OutlineStyle("outline_amber_900", Color.MATERIAL_AMBER_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_AMBER_A100 = addBaseStyle(new OutlineStyle("outline_amber_a100", Color.MATERIAL_AMBER_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_AMBER_A200 = addBaseStyle(new OutlineStyle("outline_amber_a200", Color.MATERIAL_AMBER_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_AMBER_A400 = addBaseStyle(new OutlineStyle("outline_amber_a400", Color.MATERIAL_AMBER_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_AMBER_A700 = addBaseStyle(new OutlineStyle("outline_amber_a700", Color.MATERIAL_AMBER_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_ORANGE_50 = addBaseStyle(new OutlineStyle("outline_orange_50", Color.MATERIAL_ORANGE_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_ORANGE_100 = addBaseStyle(new OutlineStyle("outline_orange_100", Color.MATERIAL_ORANGE_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_ORANGE_200 = addBaseStyle(new OutlineStyle("outline_orange_200", Color.MATERIAL_ORANGE_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_ORANGE_300 = addBaseStyle(new OutlineStyle("outline_orange_300", Color.MATERIAL_ORANGE_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_ORANGE_400 = addBaseStyle(new OutlineStyle("outline_orange_400", Color.MATERIAL_ORANGE_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_ORANGE_500 = addBaseStyle(new OutlineStyle("outline_orange_500", Color.MATERIAL_ORANGE_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_ORANGE_600 = addBaseStyle(new OutlineStyle("outline_orange_600", Color.MATERIAL_ORANGE_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_ORANGE_700 = addBaseStyle(new OutlineStyle("outline_orange_700", Color.MATERIAL_ORANGE_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_ORANGE_800 = addBaseStyle(new OutlineStyle("outline_orange_800", Color.MATERIAL_ORANGE_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_ORANGE_900 = addBaseStyle(new OutlineStyle("outline_orange_900", Color.MATERIAL_ORANGE_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_ORANGE_A100 = addBaseStyle(new OutlineStyle("outline_orange_a100", Color.MATERIAL_ORANGE_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_ORANGE_A200 = addBaseStyle(new OutlineStyle("outline_orange_a200", Color.MATERIAL_ORANGE_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_ORANGE_A400 = addBaseStyle(new OutlineStyle("outline_orange_a400", Color.MATERIAL_ORANGE_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_ORANGE_A700 = addBaseStyle(new OutlineStyle("outline_orange_a700", Color.MATERIAL_ORANGE_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_DEEP_ORANGE_50 = addBaseStyle(new OutlineStyle("outline_deep_orange_50", Color.MATERIAL_DEEP_ORANGE_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_DEEP_ORANGE_100 = addBaseStyle(new OutlineStyle("outline_deep_orange_100", Color.MATERIAL_DEEP_ORANGE_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_DEEP_ORANGE_200 = addBaseStyle(new OutlineStyle("outline_deep_orange_200", Color.MATERIAL_DEEP_ORANGE_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_DEEP_ORANGE_300 = addBaseStyle(new OutlineStyle("outline_deep_orange_300", Color.MATERIAL_DEEP_ORANGE_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_DEEP_ORANGE_400 = addBaseStyle(new OutlineStyle("outline_deep_orange_400", Color.MATERIAL_DEEP_ORANGE_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_DEEP_ORANGE_500 = addBaseStyle(new OutlineStyle("outline_deep_orange_500", Color.MATERIAL_DEEP_ORANGE_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_DEEP_ORANGE_600 = addBaseStyle(new OutlineStyle("outline_deep_orange_600", Color.MATERIAL_DEEP_ORANGE_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_DEEP_ORANGE_700 = addBaseStyle(new OutlineStyle("outline_deep_orange_700", Color.MATERIAL_DEEP_ORANGE_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_DEEP_ORANGE_800 = addBaseStyle(new OutlineStyle("outline_deep_orange_800", Color.MATERIAL_DEEP_ORANGE_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_DEEP_ORANGE_900 = addBaseStyle(new OutlineStyle("outline_deep_orange_900", Color.MATERIAL_DEEP_ORANGE_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_DEEP_ORANGE_A100 = addBaseStyle(new OutlineStyle("outline_deep_orange_a100", Color.MATERIAL_DEEP_ORANGE_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_DEEP_ORANGE_A200 = addBaseStyle(new OutlineStyle("outline_deep_orange_a200", Color.MATERIAL_DEEP_ORANGE_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_DEEP_ORANGE_A400 = addBaseStyle(new OutlineStyle("outline_deep_orange_a400", Color.MATERIAL_DEEP_ORANGE_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_DEEP_ORANGE_A700 = addBaseStyle(new OutlineStyle("outline_deep_orange_a700", Color.MATERIAL_DEEP_ORANGE_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_BROWN_50 = addBaseStyle(new OutlineStyle("outline_brown_50", Color.MATERIAL_BROWN_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_BROWN_100 = addBaseStyle(new OutlineStyle("outline_brown_100", Color.MATERIAL_BROWN_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_BROWN_200 = addBaseStyle(new OutlineStyle("outline_brown_200", Color.MATERIAL_BROWN_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_BROWN_300 = addBaseStyle(new OutlineStyle("outline_brown_300", Color.MATERIAL_BROWN_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_BROWN_400 = addBaseStyle(new OutlineStyle("outline_brown_400", Color.MATERIAL_BROWN_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_BROWN_500 = addBaseStyle(new OutlineStyle("outline_brown_500", Color.MATERIAL_BROWN_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_BROWN_600 = addBaseStyle(new OutlineStyle("outline_brown_600", Color.MATERIAL_BROWN_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_BROWN_700 = addBaseStyle(new OutlineStyle("outline_brown_700", Color.MATERIAL_BROWN_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_BROWN_800 = addBaseStyle(new OutlineStyle("outline_brown_800", Color.MATERIAL_BROWN_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_BROWN_900 = addBaseStyle(new OutlineStyle("outline_brown_900", Color.MATERIAL_BROWN_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_GREY_50 = addBaseStyle(new OutlineStyle("outline_grey_50", Color.MATERIAL_GREY_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_GREY_100 = addBaseStyle(new OutlineStyle("outline_grey_100", Color.MATERIAL_GREY_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_GREY_200 = addBaseStyle(new OutlineStyle("outline_grey_200", Color.MATERIAL_GREY_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_GREY_300 = addBaseStyle(new OutlineStyle("outline_grey_300", Color.MATERIAL_GREY_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_GREY_400 = addBaseStyle(new OutlineStyle("outline_grey_400", Color.MATERIAL_GREY_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_GREY_500 = addBaseStyle(new OutlineStyle("outline_grey_500", Color.MATERIAL_GREY_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_GREY_600 = addBaseStyle(new OutlineStyle("outline_grey_600", Color.MATERIAL_GREY_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_GREY_700 = addBaseStyle(new OutlineStyle("outline_grey_700", Color.MATERIAL_GREY_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_GREY_800 = addBaseStyle(new OutlineStyle("outline_grey_800", Color.MATERIAL_GREY_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_GREY_900 = addBaseStyle(new OutlineStyle("outline_grey_900", Color.MATERIAL_GREY_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_BLACK_1000 = addBaseStyle(new OutlineStyle("outline_black_1000", Color.MATERIAL_BLACK_1000.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_WHITE_1000 = addBaseStyle(new OutlineStyle("outline_white_1000", Color.MATERIAL_WHITE_1000.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_BLUE_GREY_50 = addBaseStyle(new OutlineStyle("outline_blue_grey_50", Color.MATERIAL_BLUE_GREY_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_BLUE_GREY_100 = addBaseStyle(new OutlineStyle("outline_blue_grey_100", Color.MATERIAL_BLUE_GREY_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_BLUE_GREY_200 = addBaseStyle(new OutlineStyle("outline_blue_grey_200", Color.MATERIAL_BLUE_GREY_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_BLUE_GREY_300 = addBaseStyle(new OutlineStyle("outline_blue_grey_300", Color.MATERIAL_BLUE_GREY_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_BLUE_GREY_400 = addBaseStyle(new OutlineStyle("outline_blue_grey_400", Color.MATERIAL_BLUE_GREY_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_BLUE_GREY_500 = addBaseStyle(new OutlineStyle("outline_blue_grey_500", Color.MATERIAL_BLUE_GREY_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_BLUE_GREY_600 = addBaseStyle(new OutlineStyle("outline_blue_grey_600", Color.MATERIAL_BLUE_GREY_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_BLUE_GREY_700 = addBaseStyle(new OutlineStyle("outline_blue_grey_700", Color.MATERIAL_BLUE_GREY_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_BLUE_GREY_800 = addBaseStyle(new OutlineStyle("outline_blue_grey_800", Color.MATERIAL_BLUE_GREY_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_BLUE_GREY_900 = addBaseStyle(new OutlineStyle("outline_blue_grey_900", Color.MATERIAL_BLUE_GREY_900.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_PRIMARY = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.PRIMARY.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_SUCCESS = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.SUCCESS.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_INFO = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.INFO.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_WARNING = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.WARNING.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_DANGER = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.DANGER.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_RED_50 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_RED_50.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_RED_100 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_RED_100.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_RED_200 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_RED_200.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_RED_300 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_RED_300.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_RED_400 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_RED_400.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_RED_500 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_RED_500.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_RED_600 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_RED_600.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_RED_700 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_RED_700.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_RED_800 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_RED_800.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_RED_900 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_RED_900.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_RED_A100 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_RED_A100.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_RED_A200 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_RED_A200.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_RED_A400 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_RED_A400.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_RED_A700 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_RED_A700.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_PINK_50 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_PINK_50.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_PINK_100 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_PINK_100.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_PINK_200 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_PINK_200.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_PINK_300 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_PINK_300.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_PINK_400 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_PINK_400.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_PINK_500 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_PINK_500.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_PINK_600 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_PINK_600.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_PINK_700 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_PINK_700.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_PINK_800 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_PINK_800.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_PINK_900 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_PINK_900.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_PINK_A100 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_PINK_A100.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_PINK_A200 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_PINK_A200.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_PINK_A400 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_PINK_A400.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_PINK_A700 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_PINK_A700.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_PURPLE_50 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_PURPLE_50.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_PURPLE_100 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_PURPLE_100.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_PURPLE_200 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_PURPLE_200.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_PURPLE_300 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_PURPLE_300.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_PURPLE_400 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_PURPLE_400.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_PURPLE_500 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_PURPLE_500.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_PURPLE_600 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_PURPLE_600.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_PURPLE_700 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_PURPLE_700.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_PURPLE_800 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_PURPLE_800.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_PURPLE_900 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_PURPLE_900.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_PURPLE_A100 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_PURPLE_A100.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_PURPLE_A200 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_PURPLE_A200.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_PURPLE_A400 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_PURPLE_A400.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_PURPLE_A700 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_PURPLE_A700.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_DEEP_PURPLE_50 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_DEEP_PURPLE_50.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_DEEP_PURPLE_100 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_DEEP_PURPLE_100.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_DEEP_PURPLE_200 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_DEEP_PURPLE_200.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_DEEP_PURPLE_300 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_DEEP_PURPLE_300.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_DEEP_PURPLE_400 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_DEEP_PURPLE_400.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_DEEP_PURPLE_500 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_DEEP_PURPLE_500.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_DEEP_PURPLE_600 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_DEEP_PURPLE_600.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_DEEP_PURPLE_700 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_DEEP_PURPLE_700.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_DEEP_PURPLE_800 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_DEEP_PURPLE_800.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_DEEP_PURPLE_900 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_DEEP_PURPLE_900.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_DEEP_PURPLE_A100 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_DEEP_PURPLE_A100.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_DEEP_PURPLE_A200 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_DEEP_PURPLE_A200.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_DEEP_PURPLE_A400 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_DEEP_PURPLE_A400.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_DEEP_PURPLE_A700 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_DEEP_PURPLE_A700.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_INDIGO_50 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_INDIGO_50.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_INDIGO_100 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_INDIGO_100.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_INDIGO_200 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_INDIGO_200.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_INDIGO_300 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_INDIGO_300.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_INDIGO_400 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_INDIGO_400.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_INDIGO_500 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_INDIGO_500.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_INDIGO_600 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_INDIGO_600.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_INDIGO_700 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_INDIGO_700.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_INDIGO_800 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_INDIGO_800.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_INDIGO_900 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_INDIGO_900.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_INDIGO_A100 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_INDIGO_A100.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_INDIGO_A200 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_INDIGO_A200.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_INDIGO_A400 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_INDIGO_A400.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_INDIGO_A700 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_INDIGO_A700.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_BLUE_50 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_BLUE_50.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_BLUE_100 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_BLUE_100.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_BLUE_200 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_BLUE_200.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_BLUE_300 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_BLUE_300.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_BLUE_400 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_BLUE_400.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_BLUE_500 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_BLUE_500.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_BLUE_600 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_BLUE_600.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_BLUE_700 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_BLUE_700.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_BLUE_800 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_BLUE_800.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_BLUE_900 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_BLUE_900.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_BLUE_A100 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_BLUE_A100.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_BLUE_A200 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_BLUE_A200.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_BLUE_A400 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_BLUE_A400.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_BLUE_A700 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_BLUE_A700.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_LIGHT_BLUE_50 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_LIGHT_BLUE_50.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_LIGHT_BLUE_100 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_LIGHT_BLUE_100.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_LIGHT_BLUE_200 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_LIGHT_BLUE_200.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_LIGHT_BLUE_300 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_LIGHT_BLUE_300.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_LIGHT_BLUE_400 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_LIGHT_BLUE_400.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_LIGHT_BLUE_500 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_LIGHT_BLUE_500.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_LIGHT_BLUE_600 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_LIGHT_BLUE_600.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_LIGHT_BLUE_700 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_LIGHT_BLUE_700.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_LIGHT_BLUE_800 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_LIGHT_BLUE_800.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_LIGHT_BLUE_900 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_LIGHT_BLUE_900.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_LIGHT_BLUE_A100 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_LIGHT_BLUE_A100.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_LIGHT_BLUE_A200 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_LIGHT_BLUE_A200.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_LIGHT_BLUE_A400 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_LIGHT_BLUE_A400.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_LIGHT_BLUE_A700 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_LIGHT_BLUE_A700.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_CYAN_50 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_CYAN_50.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_CYAN_100 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_CYAN_100.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_CYAN_200 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_CYAN_200.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_CYAN_300 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_CYAN_300.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_CYAN_400 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_CYAN_400.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_CYAN_500 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_CYAN_500.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_CYAN_600 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_CYAN_600.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_CYAN_700 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_CYAN_700.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_CYAN_800 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_CYAN_800.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_CYAN_900 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_CYAN_900.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_CYAN_A100 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_CYAN_A100.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_CYAN_A200 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_CYAN_A200.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_CYAN_A400 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_CYAN_A400.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_CYAN_A700 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_CYAN_A700.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_TEAL_50 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_TEAL_50.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_TEAL_100 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_TEAL_100.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_TEAL_200 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_TEAL_200.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_TEAL_300 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_TEAL_300.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_TEAL_400 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_TEAL_400.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_TEAL_500 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_TEAL_500.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_TEAL_600 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_TEAL_600.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_TEAL_700 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_TEAL_700.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_TEAL_800 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_TEAL_800.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_TEAL_900 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_TEAL_900.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_TEAL_A100 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_TEAL_A100.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_TEAL_A200 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_TEAL_A200.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_TEAL_A400 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_TEAL_A400.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_TEAL_A700 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_TEAL_A700.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_GREEN_50 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_GREEN_50.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_GREEN_100 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_GREEN_100.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_GREEN_200 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_GREEN_200.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_GREEN_300 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_GREEN_300.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_GREEN_400 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_GREEN_400.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_GREEN_500 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_GREEN_500.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_GREEN_600 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_GREEN_600.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_GREEN_700 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_GREEN_700.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_GREEN_800 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_GREEN_800.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_GREEN_900 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_GREEN_900.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_GREEN_A100 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_GREEN_A100.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_GREEN_A200 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_GREEN_A200.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_GREEN_A400 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_GREEN_A400.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_GREEN_A700 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_GREEN_A700.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_LIGHT_GREEN_50 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_LIGHT_GREEN_50.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_LIGHT_GREEN_100 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_LIGHT_GREEN_100.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_LIGHT_GREEN_200 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_LIGHT_GREEN_200.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_LIGHT_GREEN_300 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_LIGHT_GREEN_300.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_LIGHT_GREEN_400 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_LIGHT_GREEN_400.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_LIGHT_GREEN_500 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_LIGHT_GREEN_500.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_LIGHT_GREEN_600 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_LIGHT_GREEN_600.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_LIGHT_GREEN_700 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_LIGHT_GREEN_700.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_LIGHT_GREEN_800 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_LIGHT_GREEN_800.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_LIGHT_GREEN_900 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_LIGHT_GREEN_900.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_LIGHT_GREEN_A100 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_LIGHT_GREEN_A100.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_LIGHT_GREEN_A200 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_LIGHT_GREEN_A200.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_LIGHT_GREEN_A400 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_LIGHT_GREEN_A400.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_LIGHT_GREEN_A700 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_LIGHT_GREEN_A700.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_LIME_50 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_LIME_50.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_LIME_100 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_LIME_100.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_LIME_200 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_LIME_200.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_LIME_300 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_LIME_300.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_LIME_400 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_LIME_400.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_LIME_500 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_LIME_500.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_LIME_600 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_LIME_600.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_LIME_700 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_LIME_700.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_LIME_800 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_LIME_800.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_LIME_900 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_LIME_900.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_LIME_A100 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_LIME_A100.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_LIME_A200 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_LIME_A200.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_LIME_A400 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_LIME_A400.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_LIME_A700 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_LIME_A700.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_YELLOW_50 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_YELLOW_50.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_YELLOW_100 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_YELLOW_100.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_YELLOW_200 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_YELLOW_200.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_YELLOW_300 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_YELLOW_300.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_YELLOW_400 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_YELLOW_400.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_YELLOW_500 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_YELLOW_500.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_YELLOW_600 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_YELLOW_600.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_YELLOW_700 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_YELLOW_700.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_YELLOW_800 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_YELLOW_800.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_YELLOW_900 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_YELLOW_900.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_YELLOW_A100 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_YELLOW_A100.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_YELLOW_A200 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_YELLOW_A200.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_YELLOW_A400 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_YELLOW_A400.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_YELLOW_A700 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_YELLOW_A700.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_AMBER_50 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_AMBER_50.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_AMBER_100 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_AMBER_100.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_AMBER_200 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_AMBER_200.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_AMBER_300 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_AMBER_300.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_AMBER_400 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_AMBER_400.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_AMBER_500 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_AMBER_500.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_AMBER_600 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_AMBER_600.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_AMBER_700 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_AMBER_700.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_AMBER_800 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_AMBER_800.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_AMBER_900 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_AMBER_900.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_AMBER_A100 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_AMBER_A100.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_AMBER_A200 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_AMBER_A200.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_AMBER_A400 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_AMBER_A400.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_AMBER_A700 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_AMBER_A700.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_ORANGE_50 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_ORANGE_50.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_ORANGE_100 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_ORANGE_100.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_ORANGE_200 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_ORANGE_200.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_ORANGE_300 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_ORANGE_300.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_ORANGE_400 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_ORANGE_400.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_ORANGE_500 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_ORANGE_500.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_ORANGE_600 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_ORANGE_600.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_ORANGE_700 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_ORANGE_700.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_ORANGE_800 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_ORANGE_800.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_ORANGE_900 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_ORANGE_900.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_ORANGE_A100 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_ORANGE_A100.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_ORANGE_A200 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_ORANGE_A200.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_ORANGE_A400 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_ORANGE_A400.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_ORANGE_A700 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_ORANGE_A700.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_DEEP_ORANGE_50 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_DEEP_ORANGE_50.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_DEEP_ORANGE_100 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_DEEP_ORANGE_100.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_DEEP_ORANGE_200 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_DEEP_ORANGE_200.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_DEEP_ORANGE_300 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_DEEP_ORANGE_300.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_DEEP_ORANGE_400 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_DEEP_ORANGE_400.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_DEEP_ORANGE_500 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_DEEP_ORANGE_500.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_DEEP_ORANGE_600 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_DEEP_ORANGE_600.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_DEEP_ORANGE_700 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_DEEP_ORANGE_700.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_DEEP_ORANGE_800 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_DEEP_ORANGE_800.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_DEEP_ORANGE_900 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_DEEP_ORANGE_900.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_DEEP_ORANGE_A100 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_DEEP_ORANGE_A100.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_DEEP_ORANGE_A200 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_DEEP_ORANGE_A200.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_DEEP_ORANGE_A400 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_DEEP_ORANGE_A400.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_DEEP_ORANGE_A700 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_DEEP_ORANGE_A700.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_BROWN_50 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_BROWN_50.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_BROWN_100 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_BROWN_100.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_BROWN_200 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_BROWN_200.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_BROWN_300 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_BROWN_300.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_BROWN_400 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_BROWN_400.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_BROWN_500 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_BROWN_500.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_BROWN_600 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_BROWN_600.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_BROWN_700 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_BROWN_700.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_BROWN_800 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_BROWN_800.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_BROWN_900 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_BROWN_900.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_GREY_50 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_GREY_50.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_GREY_100 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_GREY_100.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_GREY_200 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_GREY_200.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_GREY_300 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_GREY_300.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_GREY_400 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_GREY_400.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_GREY_500 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_GREY_500.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_GREY_600 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_GREY_600.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_GREY_700 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_GREY_700.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_GREY_800 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_GREY_800.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_GREY_900 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_GREY_900.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_BLACK_1000 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_BLACK_1000.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_WHITE_1000 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_WHITE_1000.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_BLUE_GREY_50 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_BLUE_GREY_50.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_BLUE_GREY_100 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_BLUE_GREY_100.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_BLUE_GREY_200 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_BLUE_GREY_200.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_BLUE_GREY_300 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_BLUE_GREY_300.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_BLUE_GREY_400 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_BLUE_GREY_400.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_BLUE_GREY_500 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_BLUE_GREY_500.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_BLUE_GREY_600 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_BLUE_GREY_600.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_BLUE_GREY_700 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_BLUE_GREY_700.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_BLUE_GREY_800 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_BLUE_GREY_800.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_BLUE_GREY_900 = addBaseStyle(new MaterialIconStyle(OUTLINE, RgbaColor.MATERIAL_BLUE_GREY_900.toHtmlColorString()));
 
 	//OUTLINE_FILLED styles:
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_BOOTSTRAP_PRIMARY = addBaseStyle(new OutlineFilledStyle("outline_filled_bootstrap_primary", Color.BOOTSTRAP_PRIMARY.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_BOOTSTRAP_SUCCESS = addBaseStyle(new OutlineFilledStyle("outline_filled_bootstrap_success", Color.BOOTSTRAP_SUCCESS.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_BOOTSTRAP_INFO = addBaseStyle(new OutlineFilledStyle("outline_filled_bootstrap_info", Color.BOOTSTRAP_INFO.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_BOOTSTRAP_WARNING = addBaseStyle(new OutlineFilledStyle("outline_filled_bootstrap_warning", Color.BOOTSTRAP_WARNING.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_BOOTSTRAP_DANGER = addBaseStyle(new OutlineFilledStyle("outline_filled_bootstrap_danger", Color.BOOTSTRAP_DANGER.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_RED_50 = addBaseStyle(new OutlineFilledStyle("outline_filled_red_50", Color.MATERIAL_RED_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_RED_100 = addBaseStyle(new OutlineFilledStyle("outline_filled_red_100", Color.MATERIAL_RED_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_RED_200 = addBaseStyle(new OutlineFilledStyle("outline_filled_red_200", Color.MATERIAL_RED_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_RED_300 = addBaseStyle(new OutlineFilledStyle("outline_filled_red_300", Color.MATERIAL_RED_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_RED_400 = addBaseStyle(new OutlineFilledStyle("outline_filled_red_400", Color.MATERIAL_RED_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_RED_500 = addBaseStyle(new OutlineFilledStyle("outline_filled_red_500", Color.MATERIAL_RED_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_RED_600 = addBaseStyle(new OutlineFilledStyle("outline_filled_red_600", Color.MATERIAL_RED_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_RED_700 = addBaseStyle(new OutlineFilledStyle("outline_filled_red_700", Color.MATERIAL_RED_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_RED_800 = addBaseStyle(new OutlineFilledStyle("outline_filled_red_800", Color.MATERIAL_RED_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_RED_900 = addBaseStyle(new OutlineFilledStyle("outline_filled_red_900", Color.MATERIAL_RED_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_RED_A100 = addBaseStyle(new OutlineFilledStyle("outline_filled_red_a100", Color.MATERIAL_RED_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_RED_A200 = addBaseStyle(new OutlineFilledStyle("outline_filled_red_a200", Color.MATERIAL_RED_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_RED_A400 = addBaseStyle(new OutlineFilledStyle("outline_filled_red_a400", Color.MATERIAL_RED_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_RED_A700 = addBaseStyle(new OutlineFilledStyle("outline_filled_red_a700", Color.MATERIAL_RED_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_PINK_50 = addBaseStyle(new OutlineFilledStyle("outline_filled_pink_50", Color.MATERIAL_PINK_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_PINK_100 = addBaseStyle(new OutlineFilledStyle("outline_filled_pink_100", Color.MATERIAL_PINK_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_PINK_200 = addBaseStyle(new OutlineFilledStyle("outline_filled_pink_200", Color.MATERIAL_PINK_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_PINK_300 = addBaseStyle(new OutlineFilledStyle("outline_filled_pink_300", Color.MATERIAL_PINK_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_PINK_400 = addBaseStyle(new OutlineFilledStyle("outline_filled_pink_400", Color.MATERIAL_PINK_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_PINK_500 = addBaseStyle(new OutlineFilledStyle("outline_filled_pink_500", Color.MATERIAL_PINK_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_PINK_600 = addBaseStyle(new OutlineFilledStyle("outline_filled_pink_600", Color.MATERIAL_PINK_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_PINK_700 = addBaseStyle(new OutlineFilledStyle("outline_filled_pink_700", Color.MATERIAL_PINK_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_PINK_800 = addBaseStyle(new OutlineFilledStyle("outline_filled_pink_800", Color.MATERIAL_PINK_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_PINK_900 = addBaseStyle(new OutlineFilledStyle("outline_filled_pink_900", Color.MATERIAL_PINK_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_PINK_A100 = addBaseStyle(new OutlineFilledStyle("outline_filled_pink_a100", Color.MATERIAL_PINK_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_PINK_A200 = addBaseStyle(new OutlineFilledStyle("outline_filled_pink_a200", Color.MATERIAL_PINK_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_PINK_A400 = addBaseStyle(new OutlineFilledStyle("outline_filled_pink_a400", Color.MATERIAL_PINK_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_PINK_A700 = addBaseStyle(new OutlineFilledStyle("outline_filled_pink_a700", Color.MATERIAL_PINK_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_PURPLE_50 = addBaseStyle(new OutlineFilledStyle("outline_filled_purple_50", Color.MATERIAL_PURPLE_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_PURPLE_100 = addBaseStyle(new OutlineFilledStyle("outline_filled_purple_100", Color.MATERIAL_PURPLE_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_PURPLE_200 = addBaseStyle(new OutlineFilledStyle("outline_filled_purple_200", Color.MATERIAL_PURPLE_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_PURPLE_300 = addBaseStyle(new OutlineFilledStyle("outline_filled_purple_300", Color.MATERIAL_PURPLE_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_PURPLE_400 = addBaseStyle(new OutlineFilledStyle("outline_filled_purple_400", Color.MATERIAL_PURPLE_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_PURPLE_500 = addBaseStyle(new OutlineFilledStyle("outline_filled_purple_500", Color.MATERIAL_PURPLE_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_PURPLE_600 = addBaseStyle(new OutlineFilledStyle("outline_filled_purple_600", Color.MATERIAL_PURPLE_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_PURPLE_700 = addBaseStyle(new OutlineFilledStyle("outline_filled_purple_700", Color.MATERIAL_PURPLE_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_PURPLE_800 = addBaseStyle(new OutlineFilledStyle("outline_filled_purple_800", Color.MATERIAL_PURPLE_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_PURPLE_900 = addBaseStyle(new OutlineFilledStyle("outline_filled_purple_900", Color.MATERIAL_PURPLE_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_PURPLE_A100 = addBaseStyle(new OutlineFilledStyle("outline_filled_purple_a100", Color.MATERIAL_PURPLE_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_PURPLE_A200 = addBaseStyle(new OutlineFilledStyle("outline_filled_purple_a200", Color.MATERIAL_PURPLE_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_PURPLE_A400 = addBaseStyle(new OutlineFilledStyle("outline_filled_purple_a400", Color.MATERIAL_PURPLE_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_PURPLE_A700 = addBaseStyle(new OutlineFilledStyle("outline_filled_purple_a700", Color.MATERIAL_PURPLE_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_DEEP_PURPLE_50 = addBaseStyle(new OutlineFilledStyle("outline_filled_deep_purple_50", Color.MATERIAL_DEEP_PURPLE_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_DEEP_PURPLE_100 = addBaseStyle(new OutlineFilledStyle("outline_filled_deep_purple_100", Color.MATERIAL_DEEP_PURPLE_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_DEEP_PURPLE_200 = addBaseStyle(new OutlineFilledStyle("outline_filled_deep_purple_200", Color.MATERIAL_DEEP_PURPLE_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_DEEP_PURPLE_300 = addBaseStyle(new OutlineFilledStyle("outline_filled_deep_purple_300", Color.MATERIAL_DEEP_PURPLE_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_DEEP_PURPLE_400 = addBaseStyle(new OutlineFilledStyle("outline_filled_deep_purple_400", Color.MATERIAL_DEEP_PURPLE_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_DEEP_PURPLE_500 = addBaseStyle(new OutlineFilledStyle("outline_filled_deep_purple_500", Color.MATERIAL_DEEP_PURPLE_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_DEEP_PURPLE_600 = addBaseStyle(new OutlineFilledStyle("outline_filled_deep_purple_600", Color.MATERIAL_DEEP_PURPLE_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_DEEP_PURPLE_700 = addBaseStyle(new OutlineFilledStyle("outline_filled_deep_purple_700", Color.MATERIAL_DEEP_PURPLE_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_DEEP_PURPLE_800 = addBaseStyle(new OutlineFilledStyle("outline_filled_deep_purple_800", Color.MATERIAL_DEEP_PURPLE_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_DEEP_PURPLE_900 = addBaseStyle(new OutlineFilledStyle("outline_filled_deep_purple_900", Color.MATERIAL_DEEP_PURPLE_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_DEEP_PURPLE_A100 = addBaseStyle(new OutlineFilledStyle("outline_filled_deep_purple_a100", Color.MATERIAL_DEEP_PURPLE_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_DEEP_PURPLE_A200 = addBaseStyle(new OutlineFilledStyle("outline_filled_deep_purple_a200", Color.MATERIAL_DEEP_PURPLE_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_DEEP_PURPLE_A400 = addBaseStyle(new OutlineFilledStyle("outline_filled_deep_purple_a400", Color.MATERIAL_DEEP_PURPLE_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_DEEP_PURPLE_A700 = addBaseStyle(new OutlineFilledStyle("outline_filled_deep_purple_a700", Color.MATERIAL_DEEP_PURPLE_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_INDIGO_50 = addBaseStyle(new OutlineFilledStyle("outline_filled_indigo_50", Color.MATERIAL_INDIGO_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_INDIGO_100 = addBaseStyle(new OutlineFilledStyle("outline_filled_indigo_100", Color.MATERIAL_INDIGO_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_INDIGO_200 = addBaseStyle(new OutlineFilledStyle("outline_filled_indigo_200", Color.MATERIAL_INDIGO_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_INDIGO_300 = addBaseStyle(new OutlineFilledStyle("outline_filled_indigo_300", Color.MATERIAL_INDIGO_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_INDIGO_400 = addBaseStyle(new OutlineFilledStyle("outline_filled_indigo_400", Color.MATERIAL_INDIGO_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_INDIGO_500 = addBaseStyle(new OutlineFilledStyle("outline_filled_indigo_500", Color.MATERIAL_INDIGO_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_INDIGO_600 = addBaseStyle(new OutlineFilledStyle("outline_filled_indigo_600", Color.MATERIAL_INDIGO_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_INDIGO_700 = addBaseStyle(new OutlineFilledStyle("outline_filled_indigo_700", Color.MATERIAL_INDIGO_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_INDIGO_800 = addBaseStyle(new OutlineFilledStyle("outline_filled_indigo_800", Color.MATERIAL_INDIGO_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_INDIGO_900 = addBaseStyle(new OutlineFilledStyle("outline_filled_indigo_900", Color.MATERIAL_INDIGO_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_INDIGO_A100 = addBaseStyle(new OutlineFilledStyle("outline_filled_indigo_a100", Color.MATERIAL_INDIGO_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_INDIGO_A200 = addBaseStyle(new OutlineFilledStyle("outline_filled_indigo_a200", Color.MATERIAL_INDIGO_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_INDIGO_A400 = addBaseStyle(new OutlineFilledStyle("outline_filled_indigo_a400", Color.MATERIAL_INDIGO_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_INDIGO_A700 = addBaseStyle(new OutlineFilledStyle("outline_filled_indigo_a700", Color.MATERIAL_INDIGO_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_BLUE_50 = addBaseStyle(new OutlineFilledStyle("outline_filled_blue_50", Color.MATERIAL_BLUE_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_BLUE_100 = addBaseStyle(new OutlineFilledStyle("outline_filled_blue_100", Color.MATERIAL_BLUE_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_BLUE_200 = addBaseStyle(new OutlineFilledStyle("outline_filled_blue_200", Color.MATERIAL_BLUE_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_BLUE_300 = addBaseStyle(new OutlineFilledStyle("outline_filled_blue_300", Color.MATERIAL_BLUE_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_BLUE_400 = addBaseStyle(new OutlineFilledStyle("outline_filled_blue_400", Color.MATERIAL_BLUE_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_BLUE_500 = addBaseStyle(new OutlineFilledStyle("outline_filled_blue_500", Color.MATERIAL_BLUE_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_BLUE_600 = addBaseStyle(new OutlineFilledStyle("outline_filled_blue_600", Color.MATERIAL_BLUE_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_BLUE_700 = addBaseStyle(new OutlineFilledStyle("outline_filled_blue_700", Color.MATERIAL_BLUE_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_BLUE_800 = addBaseStyle(new OutlineFilledStyle("outline_filled_blue_800", Color.MATERIAL_BLUE_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_BLUE_900 = addBaseStyle(new OutlineFilledStyle("outline_filled_blue_900", Color.MATERIAL_BLUE_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_BLUE_A100 = addBaseStyle(new OutlineFilledStyle("outline_filled_blue_a100", Color.MATERIAL_BLUE_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_BLUE_A200 = addBaseStyle(new OutlineFilledStyle("outline_filled_blue_a200", Color.MATERIAL_BLUE_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_BLUE_A400 = addBaseStyle(new OutlineFilledStyle("outline_filled_blue_a400", Color.MATERIAL_BLUE_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_BLUE_A700 = addBaseStyle(new OutlineFilledStyle("outline_filled_blue_a700", Color.MATERIAL_BLUE_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_LIGHT_BLUE_50 = addBaseStyle(new OutlineFilledStyle("outline_filled_light_blue_50", Color.MATERIAL_LIGHT_BLUE_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_LIGHT_BLUE_100 = addBaseStyle(new OutlineFilledStyle("outline_filled_light_blue_100", Color.MATERIAL_LIGHT_BLUE_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_LIGHT_BLUE_200 = addBaseStyle(new OutlineFilledStyle("outline_filled_light_blue_200", Color.MATERIAL_LIGHT_BLUE_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_LIGHT_BLUE_300 = addBaseStyle(new OutlineFilledStyle("outline_filled_light_blue_300", Color.MATERIAL_LIGHT_BLUE_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_LIGHT_BLUE_400 = addBaseStyle(new OutlineFilledStyle("outline_filled_light_blue_400", Color.MATERIAL_LIGHT_BLUE_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_LIGHT_BLUE_500 = addBaseStyle(new OutlineFilledStyle("outline_filled_light_blue_500", Color.MATERIAL_LIGHT_BLUE_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_LIGHT_BLUE_600 = addBaseStyle(new OutlineFilledStyle("outline_filled_light_blue_600", Color.MATERIAL_LIGHT_BLUE_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_LIGHT_BLUE_700 = addBaseStyle(new OutlineFilledStyle("outline_filled_light_blue_700", Color.MATERIAL_LIGHT_BLUE_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_LIGHT_BLUE_800 = addBaseStyle(new OutlineFilledStyle("outline_filled_light_blue_800", Color.MATERIAL_LIGHT_BLUE_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_LIGHT_BLUE_900 = addBaseStyle(new OutlineFilledStyle("outline_filled_light_blue_900", Color.MATERIAL_LIGHT_BLUE_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_LIGHT_BLUE_A100 = addBaseStyle(new OutlineFilledStyle("outline_filled_light_blue_a100", Color.MATERIAL_LIGHT_BLUE_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_LIGHT_BLUE_A200 = addBaseStyle(new OutlineFilledStyle("outline_filled_light_blue_a200", Color.MATERIAL_LIGHT_BLUE_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_LIGHT_BLUE_A400 = addBaseStyle(new OutlineFilledStyle("outline_filled_light_blue_a400", Color.MATERIAL_LIGHT_BLUE_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_LIGHT_BLUE_A700 = addBaseStyle(new OutlineFilledStyle("outline_filled_light_blue_a700", Color.MATERIAL_LIGHT_BLUE_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_CYAN_50 = addBaseStyle(new OutlineFilledStyle("outline_filled_cyan_50", Color.MATERIAL_CYAN_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_CYAN_100 = addBaseStyle(new OutlineFilledStyle("outline_filled_cyan_100", Color.MATERIAL_CYAN_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_CYAN_200 = addBaseStyle(new OutlineFilledStyle("outline_filled_cyan_200", Color.MATERIAL_CYAN_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_CYAN_300 = addBaseStyle(new OutlineFilledStyle("outline_filled_cyan_300", Color.MATERIAL_CYAN_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_CYAN_400 = addBaseStyle(new OutlineFilledStyle("outline_filled_cyan_400", Color.MATERIAL_CYAN_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_CYAN_500 = addBaseStyle(new OutlineFilledStyle("outline_filled_cyan_500", Color.MATERIAL_CYAN_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_CYAN_600 = addBaseStyle(new OutlineFilledStyle("outline_filled_cyan_600", Color.MATERIAL_CYAN_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_CYAN_700 = addBaseStyle(new OutlineFilledStyle("outline_filled_cyan_700", Color.MATERIAL_CYAN_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_CYAN_800 = addBaseStyle(new OutlineFilledStyle("outline_filled_cyan_800", Color.MATERIAL_CYAN_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_CYAN_900 = addBaseStyle(new OutlineFilledStyle("outline_filled_cyan_900", Color.MATERIAL_CYAN_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_CYAN_A100 = addBaseStyle(new OutlineFilledStyle("outline_filled_cyan_a100", Color.MATERIAL_CYAN_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_CYAN_A200 = addBaseStyle(new OutlineFilledStyle("outline_filled_cyan_a200", Color.MATERIAL_CYAN_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_CYAN_A400 = addBaseStyle(new OutlineFilledStyle("outline_filled_cyan_a400", Color.MATERIAL_CYAN_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_CYAN_A700 = addBaseStyle(new OutlineFilledStyle("outline_filled_cyan_a700", Color.MATERIAL_CYAN_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_TEAL_50 = addBaseStyle(new OutlineFilledStyle("outline_filled_teal_50", Color.MATERIAL_TEAL_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_TEAL_100 = addBaseStyle(new OutlineFilledStyle("outline_filled_teal_100", Color.MATERIAL_TEAL_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_TEAL_200 = addBaseStyle(new OutlineFilledStyle("outline_filled_teal_200", Color.MATERIAL_TEAL_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_TEAL_300 = addBaseStyle(new OutlineFilledStyle("outline_filled_teal_300", Color.MATERIAL_TEAL_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_TEAL_400 = addBaseStyle(new OutlineFilledStyle("outline_filled_teal_400", Color.MATERIAL_TEAL_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_TEAL_500 = addBaseStyle(new OutlineFilledStyle("outline_filled_teal_500", Color.MATERIAL_TEAL_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_TEAL_600 = addBaseStyle(new OutlineFilledStyle("outline_filled_teal_600", Color.MATERIAL_TEAL_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_TEAL_700 = addBaseStyle(new OutlineFilledStyle("outline_filled_teal_700", Color.MATERIAL_TEAL_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_TEAL_800 = addBaseStyle(new OutlineFilledStyle("outline_filled_teal_800", Color.MATERIAL_TEAL_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_TEAL_900 = addBaseStyle(new OutlineFilledStyle("outline_filled_teal_900", Color.MATERIAL_TEAL_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_TEAL_A100 = addBaseStyle(new OutlineFilledStyle("outline_filled_teal_a100", Color.MATERIAL_TEAL_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_TEAL_A200 = addBaseStyle(new OutlineFilledStyle("outline_filled_teal_a200", Color.MATERIAL_TEAL_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_TEAL_A400 = addBaseStyle(new OutlineFilledStyle("outline_filled_teal_a400", Color.MATERIAL_TEAL_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_TEAL_A700 = addBaseStyle(new OutlineFilledStyle("outline_filled_teal_a700", Color.MATERIAL_TEAL_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_GREEN_50 = addBaseStyle(new OutlineFilledStyle("outline_filled_green_50", Color.MATERIAL_GREEN_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_GREEN_100 = addBaseStyle(new OutlineFilledStyle("outline_filled_green_100", Color.MATERIAL_GREEN_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_GREEN_200 = addBaseStyle(new OutlineFilledStyle("outline_filled_green_200", Color.MATERIAL_GREEN_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_GREEN_300 = addBaseStyle(new OutlineFilledStyle("outline_filled_green_300", Color.MATERIAL_GREEN_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_GREEN_400 = addBaseStyle(new OutlineFilledStyle("outline_filled_green_400", Color.MATERIAL_GREEN_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_GREEN_500 = addBaseStyle(new OutlineFilledStyle("outline_filled_green_500", Color.MATERIAL_GREEN_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_GREEN_600 = addBaseStyle(new OutlineFilledStyle("outline_filled_green_600", Color.MATERIAL_GREEN_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_GREEN_700 = addBaseStyle(new OutlineFilledStyle("outline_filled_green_700", Color.MATERIAL_GREEN_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_GREEN_800 = addBaseStyle(new OutlineFilledStyle("outline_filled_green_800", Color.MATERIAL_GREEN_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_GREEN_900 = addBaseStyle(new OutlineFilledStyle("outline_filled_green_900", Color.MATERIAL_GREEN_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_GREEN_A100 = addBaseStyle(new OutlineFilledStyle("outline_filled_green_a100", Color.MATERIAL_GREEN_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_GREEN_A200 = addBaseStyle(new OutlineFilledStyle("outline_filled_green_a200", Color.MATERIAL_GREEN_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_GREEN_A400 = addBaseStyle(new OutlineFilledStyle("outline_filled_green_a400", Color.MATERIAL_GREEN_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_GREEN_A700 = addBaseStyle(new OutlineFilledStyle("outline_filled_green_a700", Color.MATERIAL_GREEN_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_LIGHT_GREEN_50 = addBaseStyle(new OutlineFilledStyle("outline_filled_light_green_50", Color.MATERIAL_LIGHT_GREEN_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_LIGHT_GREEN_100 = addBaseStyle(new OutlineFilledStyle("outline_filled_light_green_100", Color.MATERIAL_LIGHT_GREEN_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_LIGHT_GREEN_200 = addBaseStyle(new OutlineFilledStyle("outline_filled_light_green_200", Color.MATERIAL_LIGHT_GREEN_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_LIGHT_GREEN_300 = addBaseStyle(new OutlineFilledStyle("outline_filled_light_green_300", Color.MATERIAL_LIGHT_GREEN_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_LIGHT_GREEN_400 = addBaseStyle(new OutlineFilledStyle("outline_filled_light_green_400", Color.MATERIAL_LIGHT_GREEN_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_LIGHT_GREEN_500 = addBaseStyle(new OutlineFilledStyle("outline_filled_light_green_500", Color.MATERIAL_LIGHT_GREEN_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_LIGHT_GREEN_600 = addBaseStyle(new OutlineFilledStyle("outline_filled_light_green_600", Color.MATERIAL_LIGHT_GREEN_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_LIGHT_GREEN_700 = addBaseStyle(new OutlineFilledStyle("outline_filled_light_green_700", Color.MATERIAL_LIGHT_GREEN_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_LIGHT_GREEN_800 = addBaseStyle(new OutlineFilledStyle("outline_filled_light_green_800", Color.MATERIAL_LIGHT_GREEN_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_LIGHT_GREEN_900 = addBaseStyle(new OutlineFilledStyle("outline_filled_light_green_900", Color.MATERIAL_LIGHT_GREEN_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_LIGHT_GREEN_A100 = addBaseStyle(new OutlineFilledStyle("outline_filled_light_green_a100", Color.MATERIAL_LIGHT_GREEN_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_LIGHT_GREEN_A200 = addBaseStyle(new OutlineFilledStyle("outline_filled_light_green_a200", Color.MATERIAL_LIGHT_GREEN_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_LIGHT_GREEN_A400 = addBaseStyle(new OutlineFilledStyle("outline_filled_light_green_a400", Color.MATERIAL_LIGHT_GREEN_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_LIGHT_GREEN_A700 = addBaseStyle(new OutlineFilledStyle("outline_filled_light_green_a700", Color.MATERIAL_LIGHT_GREEN_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_LIME_50 = addBaseStyle(new OutlineFilledStyle("outline_filled_lime_50", Color.MATERIAL_LIME_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_LIME_100 = addBaseStyle(new OutlineFilledStyle("outline_filled_lime_100", Color.MATERIAL_LIME_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_LIME_200 = addBaseStyle(new OutlineFilledStyle("outline_filled_lime_200", Color.MATERIAL_LIME_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_LIME_300 = addBaseStyle(new OutlineFilledStyle("outline_filled_lime_300", Color.MATERIAL_LIME_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_LIME_400 = addBaseStyle(new OutlineFilledStyle("outline_filled_lime_400", Color.MATERIAL_LIME_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_LIME_500 = addBaseStyle(new OutlineFilledStyle("outline_filled_lime_500", Color.MATERIAL_LIME_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_LIME_600 = addBaseStyle(new OutlineFilledStyle("outline_filled_lime_600", Color.MATERIAL_LIME_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_LIME_700 = addBaseStyle(new OutlineFilledStyle("outline_filled_lime_700", Color.MATERIAL_LIME_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_LIME_800 = addBaseStyle(new OutlineFilledStyle("outline_filled_lime_800", Color.MATERIAL_LIME_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_LIME_900 = addBaseStyle(new OutlineFilledStyle("outline_filled_lime_900", Color.MATERIAL_LIME_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_LIME_A100 = addBaseStyle(new OutlineFilledStyle("outline_filled_lime_a100", Color.MATERIAL_LIME_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_LIME_A200 = addBaseStyle(new OutlineFilledStyle("outline_filled_lime_a200", Color.MATERIAL_LIME_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_LIME_A400 = addBaseStyle(new OutlineFilledStyle("outline_filled_lime_a400", Color.MATERIAL_LIME_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_LIME_A700 = addBaseStyle(new OutlineFilledStyle("outline_filled_lime_a700", Color.MATERIAL_LIME_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_YELLOW_50 = addBaseStyle(new OutlineFilledStyle("outline_filled_yellow_50", Color.MATERIAL_YELLOW_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_YELLOW_100 = addBaseStyle(new OutlineFilledStyle("outline_filled_yellow_100", Color.MATERIAL_YELLOW_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_YELLOW_200 = addBaseStyle(new OutlineFilledStyle("outline_filled_yellow_200", Color.MATERIAL_YELLOW_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_YELLOW_300 = addBaseStyle(new OutlineFilledStyle("outline_filled_yellow_300", Color.MATERIAL_YELLOW_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_YELLOW_400 = addBaseStyle(new OutlineFilledStyle("outline_filled_yellow_400", Color.MATERIAL_YELLOW_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_YELLOW_500 = addBaseStyle(new OutlineFilledStyle("outline_filled_yellow_500", Color.MATERIAL_YELLOW_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_YELLOW_600 = addBaseStyle(new OutlineFilledStyle("outline_filled_yellow_600", Color.MATERIAL_YELLOW_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_YELLOW_700 = addBaseStyle(new OutlineFilledStyle("outline_filled_yellow_700", Color.MATERIAL_YELLOW_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_YELLOW_800 = addBaseStyle(new OutlineFilledStyle("outline_filled_yellow_800", Color.MATERIAL_YELLOW_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_YELLOW_900 = addBaseStyle(new OutlineFilledStyle("outline_filled_yellow_900", Color.MATERIAL_YELLOW_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_YELLOW_A100 = addBaseStyle(new OutlineFilledStyle("outline_filled_yellow_a100", Color.MATERIAL_YELLOW_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_YELLOW_A200 = addBaseStyle(new OutlineFilledStyle("outline_filled_yellow_a200", Color.MATERIAL_YELLOW_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_YELLOW_A400 = addBaseStyle(new OutlineFilledStyle("outline_filled_yellow_a400", Color.MATERIAL_YELLOW_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_YELLOW_A700 = addBaseStyle(new OutlineFilledStyle("outline_filled_yellow_a700", Color.MATERIAL_YELLOW_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_AMBER_50 = addBaseStyle(new OutlineFilledStyle("outline_filled_amber_50", Color.MATERIAL_AMBER_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_AMBER_100 = addBaseStyle(new OutlineFilledStyle("outline_filled_amber_100", Color.MATERIAL_AMBER_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_AMBER_200 = addBaseStyle(new OutlineFilledStyle("outline_filled_amber_200", Color.MATERIAL_AMBER_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_AMBER_300 = addBaseStyle(new OutlineFilledStyle("outline_filled_amber_300", Color.MATERIAL_AMBER_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_AMBER_400 = addBaseStyle(new OutlineFilledStyle("outline_filled_amber_400", Color.MATERIAL_AMBER_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_AMBER_500 = addBaseStyle(new OutlineFilledStyle("outline_filled_amber_500", Color.MATERIAL_AMBER_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_AMBER_600 = addBaseStyle(new OutlineFilledStyle("outline_filled_amber_600", Color.MATERIAL_AMBER_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_AMBER_700 = addBaseStyle(new OutlineFilledStyle("outline_filled_amber_700", Color.MATERIAL_AMBER_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_AMBER_800 = addBaseStyle(new OutlineFilledStyle("outline_filled_amber_800", Color.MATERIAL_AMBER_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_AMBER_900 = addBaseStyle(new OutlineFilledStyle("outline_filled_amber_900", Color.MATERIAL_AMBER_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_AMBER_A100 = addBaseStyle(new OutlineFilledStyle("outline_filled_amber_a100", Color.MATERIAL_AMBER_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_AMBER_A200 = addBaseStyle(new OutlineFilledStyle("outline_filled_amber_a200", Color.MATERIAL_AMBER_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_AMBER_A400 = addBaseStyle(new OutlineFilledStyle("outline_filled_amber_a400", Color.MATERIAL_AMBER_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_AMBER_A700 = addBaseStyle(new OutlineFilledStyle("outline_filled_amber_a700", Color.MATERIAL_AMBER_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_ORANGE_50 = addBaseStyle(new OutlineFilledStyle("outline_filled_orange_50", Color.MATERIAL_ORANGE_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_ORANGE_100 = addBaseStyle(new OutlineFilledStyle("outline_filled_orange_100", Color.MATERIAL_ORANGE_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_ORANGE_200 = addBaseStyle(new OutlineFilledStyle("outline_filled_orange_200", Color.MATERIAL_ORANGE_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_ORANGE_300 = addBaseStyle(new OutlineFilledStyle("outline_filled_orange_300", Color.MATERIAL_ORANGE_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_ORANGE_400 = addBaseStyle(new OutlineFilledStyle("outline_filled_orange_400", Color.MATERIAL_ORANGE_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_ORANGE_500 = addBaseStyle(new OutlineFilledStyle("outline_filled_orange_500", Color.MATERIAL_ORANGE_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_ORANGE_600 = addBaseStyle(new OutlineFilledStyle("outline_filled_orange_600", Color.MATERIAL_ORANGE_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_ORANGE_700 = addBaseStyle(new OutlineFilledStyle("outline_filled_orange_700", Color.MATERIAL_ORANGE_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_ORANGE_800 = addBaseStyle(new OutlineFilledStyle("outline_filled_orange_800", Color.MATERIAL_ORANGE_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_ORANGE_900 = addBaseStyle(new OutlineFilledStyle("outline_filled_orange_900", Color.MATERIAL_ORANGE_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_ORANGE_A100 = addBaseStyle(new OutlineFilledStyle("outline_filled_orange_a100", Color.MATERIAL_ORANGE_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_ORANGE_A200 = addBaseStyle(new OutlineFilledStyle("outline_filled_orange_a200", Color.MATERIAL_ORANGE_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_ORANGE_A400 = addBaseStyle(new OutlineFilledStyle("outline_filled_orange_a400", Color.MATERIAL_ORANGE_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_ORANGE_A700 = addBaseStyle(new OutlineFilledStyle("outline_filled_orange_a700", Color.MATERIAL_ORANGE_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_DEEP_ORANGE_50 = addBaseStyle(new OutlineFilledStyle("outline_filled_deep_orange_50", Color.MATERIAL_DEEP_ORANGE_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_DEEP_ORANGE_100 = addBaseStyle(new OutlineFilledStyle("outline_filled_deep_orange_100", Color.MATERIAL_DEEP_ORANGE_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_DEEP_ORANGE_200 = addBaseStyle(new OutlineFilledStyle("outline_filled_deep_orange_200", Color.MATERIAL_DEEP_ORANGE_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_DEEP_ORANGE_300 = addBaseStyle(new OutlineFilledStyle("outline_filled_deep_orange_300", Color.MATERIAL_DEEP_ORANGE_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_DEEP_ORANGE_400 = addBaseStyle(new OutlineFilledStyle("outline_filled_deep_orange_400", Color.MATERIAL_DEEP_ORANGE_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_DEEP_ORANGE_500 = addBaseStyle(new OutlineFilledStyle("outline_filled_deep_orange_500", Color.MATERIAL_DEEP_ORANGE_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_DEEP_ORANGE_600 = addBaseStyle(new OutlineFilledStyle("outline_filled_deep_orange_600", Color.MATERIAL_DEEP_ORANGE_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_DEEP_ORANGE_700 = addBaseStyle(new OutlineFilledStyle("outline_filled_deep_orange_700", Color.MATERIAL_DEEP_ORANGE_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_DEEP_ORANGE_800 = addBaseStyle(new OutlineFilledStyle("outline_filled_deep_orange_800", Color.MATERIAL_DEEP_ORANGE_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_DEEP_ORANGE_900 = addBaseStyle(new OutlineFilledStyle("outline_filled_deep_orange_900", Color.MATERIAL_DEEP_ORANGE_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_DEEP_ORANGE_A100 = addBaseStyle(new OutlineFilledStyle("outline_filled_deep_orange_a100", Color.MATERIAL_DEEP_ORANGE_A100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_DEEP_ORANGE_A200 = addBaseStyle(new OutlineFilledStyle("outline_filled_deep_orange_a200", Color.MATERIAL_DEEP_ORANGE_A200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_DEEP_ORANGE_A400 = addBaseStyle(new OutlineFilledStyle("outline_filled_deep_orange_a400", Color.MATERIAL_DEEP_ORANGE_A400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_DEEP_ORANGE_A700 = addBaseStyle(new OutlineFilledStyle("outline_filled_deep_orange_a700", Color.MATERIAL_DEEP_ORANGE_A700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_BROWN_50 = addBaseStyle(new OutlineFilledStyle("outline_filled_brown_50", Color.MATERIAL_BROWN_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_BROWN_100 = addBaseStyle(new OutlineFilledStyle("outline_filled_brown_100", Color.MATERIAL_BROWN_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_BROWN_200 = addBaseStyle(new OutlineFilledStyle("outline_filled_brown_200", Color.MATERIAL_BROWN_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_BROWN_300 = addBaseStyle(new OutlineFilledStyle("outline_filled_brown_300", Color.MATERIAL_BROWN_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_BROWN_400 = addBaseStyle(new OutlineFilledStyle("outline_filled_brown_400", Color.MATERIAL_BROWN_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_BROWN_500 = addBaseStyle(new OutlineFilledStyle("outline_filled_brown_500", Color.MATERIAL_BROWN_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_BROWN_600 = addBaseStyle(new OutlineFilledStyle("outline_filled_brown_600", Color.MATERIAL_BROWN_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_BROWN_700 = addBaseStyle(new OutlineFilledStyle("outline_filled_brown_700", Color.MATERIAL_BROWN_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_BROWN_800 = addBaseStyle(new OutlineFilledStyle("outline_filled_brown_800", Color.MATERIAL_BROWN_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_BROWN_900 = addBaseStyle(new OutlineFilledStyle("outline_filled_brown_900", Color.MATERIAL_BROWN_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_GREY_50 = addBaseStyle(new OutlineFilledStyle("outline_filled_grey_50", Color.MATERIAL_GREY_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_GREY_100 = addBaseStyle(new OutlineFilledStyle("outline_filled_grey_100", Color.MATERIAL_GREY_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_GREY_200 = addBaseStyle(new OutlineFilledStyle("outline_filled_grey_200", Color.MATERIAL_GREY_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_GREY_300 = addBaseStyle(new OutlineFilledStyle("outline_filled_grey_300", Color.MATERIAL_GREY_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_GREY_400 = addBaseStyle(new OutlineFilledStyle("outline_filled_grey_400", Color.MATERIAL_GREY_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_GREY_500 = addBaseStyle(new OutlineFilledStyle("outline_filled_grey_500", Color.MATERIAL_GREY_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_GREY_600 = addBaseStyle(new OutlineFilledStyle("outline_filled_grey_600", Color.MATERIAL_GREY_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_GREY_700 = addBaseStyle(new OutlineFilledStyle("outline_filled_grey_700", Color.MATERIAL_GREY_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_GREY_800 = addBaseStyle(new OutlineFilledStyle("outline_filled_grey_800", Color.MATERIAL_GREY_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_GREY_900 = addBaseStyle(new OutlineFilledStyle("outline_filled_grey_900", Color.MATERIAL_GREY_900.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_BLACK_1000 = addBaseStyle(new OutlineFilledStyle("outline_filled_black_1000", Color.MATERIAL_BLACK_1000.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_WHITE_1000 = addBaseStyle(new OutlineFilledStyle("outline_filled_white_1000", Color.MATERIAL_WHITE_1000.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_BLUE_GREY_50 = addBaseStyle(new OutlineFilledStyle("outline_filled_blue_grey_50", Color.MATERIAL_BLUE_GREY_50.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_BLUE_GREY_100 = addBaseStyle(new OutlineFilledStyle("outline_filled_blue_grey_100", Color.MATERIAL_BLUE_GREY_100.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_BLUE_GREY_200 = addBaseStyle(new OutlineFilledStyle("outline_filled_blue_grey_200", Color.MATERIAL_BLUE_GREY_200.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_BLUE_GREY_300 = addBaseStyle(new OutlineFilledStyle("outline_filled_blue_grey_300", Color.MATERIAL_BLUE_GREY_300.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_BLUE_GREY_400 = addBaseStyle(new OutlineFilledStyle("outline_filled_blue_grey_400", Color.MATERIAL_BLUE_GREY_400.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_BLUE_GREY_500 = addBaseStyle(new OutlineFilledStyle("outline_filled_blue_grey_500", Color.MATERIAL_BLUE_GREY_500.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_BLUE_GREY_600 = addBaseStyle(new OutlineFilledStyle("outline_filled_blue_grey_600", Color.MATERIAL_BLUE_GREY_600.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_BLUE_GREY_700 = addBaseStyle(new OutlineFilledStyle("outline_filled_blue_grey_700", Color.MATERIAL_BLUE_GREY_700.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_BLUE_GREY_800 = addBaseStyle(new OutlineFilledStyle("outline_filled_blue_grey_800", Color.MATERIAL_BLUE_GREY_800.toHtmlColorString()));
-	public static final AbstractMaterialIconStyle OUTLINE_FILLED_BLUE_GREY_900 = addBaseStyle(new OutlineFilledStyle("outline_filled_blue_grey_900", Color.MATERIAL_BLUE_GREY_900.toHtmlColorString()));
-
+	public static final MaterialIconStyle OUTLINE_FILLED_PRIMARY = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.PRIMARY.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_SUCCESS = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.SUCCESS.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_INFO = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.INFO.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_WARNING = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.WARNING.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_DANGER = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.DANGER.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_RED_50 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_RED_50.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_RED_100 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_RED_100.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_RED_200 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_RED_200.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_RED_300 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_RED_300.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_RED_400 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_RED_400.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_RED_500 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_RED_500.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_RED_600 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_RED_600.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_RED_700 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_RED_700.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_RED_800 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_RED_800.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_RED_900 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_RED_900.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_RED_A100 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_RED_A100.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_RED_A200 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_RED_A200.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_RED_A400 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_RED_A400.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_RED_A700 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_RED_A700.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_PINK_50 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_PINK_50.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_PINK_100 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_PINK_100.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_PINK_200 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_PINK_200.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_PINK_300 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_PINK_300.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_PINK_400 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_PINK_400.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_PINK_500 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_PINK_500.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_PINK_600 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_PINK_600.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_PINK_700 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_PINK_700.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_PINK_800 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_PINK_800.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_PINK_900 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_PINK_900.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_PINK_A100 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_PINK_A100.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_PINK_A200 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_PINK_A200.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_PINK_A400 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_PINK_A400.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_PINK_A700 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_PINK_A700.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_PURPLE_50 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_PURPLE_50.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_PURPLE_100 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_PURPLE_100.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_PURPLE_200 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_PURPLE_200.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_PURPLE_300 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_PURPLE_300.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_PURPLE_400 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_PURPLE_400.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_PURPLE_500 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_PURPLE_500.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_PURPLE_600 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_PURPLE_600.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_PURPLE_700 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_PURPLE_700.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_PURPLE_800 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_PURPLE_800.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_PURPLE_900 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_PURPLE_900.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_PURPLE_A100 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_PURPLE_A100.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_PURPLE_A200 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_PURPLE_A200.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_PURPLE_A400 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_PURPLE_A400.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_PURPLE_A700 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_PURPLE_A700.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_DEEP_PURPLE_50 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_DEEP_PURPLE_50.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_DEEP_PURPLE_100 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_DEEP_PURPLE_100.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_DEEP_PURPLE_200 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_DEEP_PURPLE_200.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_DEEP_PURPLE_300 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_DEEP_PURPLE_300.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_DEEP_PURPLE_400 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_DEEP_PURPLE_400.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_DEEP_PURPLE_500 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_DEEP_PURPLE_500.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_DEEP_PURPLE_600 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_DEEP_PURPLE_600.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_DEEP_PURPLE_700 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_DEEP_PURPLE_700.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_DEEP_PURPLE_800 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_DEEP_PURPLE_800.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_DEEP_PURPLE_900 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_DEEP_PURPLE_900.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_DEEP_PURPLE_A100 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_DEEP_PURPLE_A100.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_DEEP_PURPLE_A200 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_DEEP_PURPLE_A200.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_DEEP_PURPLE_A400 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_DEEP_PURPLE_A400.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_DEEP_PURPLE_A700 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_DEEP_PURPLE_A700.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_INDIGO_50 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_INDIGO_50.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_INDIGO_100 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_INDIGO_100.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_INDIGO_200 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_INDIGO_200.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_INDIGO_300 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_INDIGO_300.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_INDIGO_400 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_INDIGO_400.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_INDIGO_500 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_INDIGO_500.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_INDIGO_600 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_INDIGO_600.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_INDIGO_700 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_INDIGO_700.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_INDIGO_800 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_INDIGO_800.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_INDIGO_900 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_INDIGO_900.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_INDIGO_A100 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_INDIGO_A100.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_INDIGO_A200 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_INDIGO_A200.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_INDIGO_A400 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_INDIGO_A400.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_INDIGO_A700 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_INDIGO_A700.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_BLUE_50 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_BLUE_50.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_BLUE_100 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_BLUE_100.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_BLUE_200 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_BLUE_200.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_BLUE_300 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_BLUE_300.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_BLUE_400 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_BLUE_400.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_BLUE_500 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_BLUE_500.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_BLUE_600 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_BLUE_600.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_BLUE_700 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_BLUE_700.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_BLUE_800 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_BLUE_800.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_BLUE_900 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_BLUE_900.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_BLUE_A100 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_BLUE_A100.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_BLUE_A200 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_BLUE_A200.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_BLUE_A400 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_BLUE_A400.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_BLUE_A700 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_BLUE_A700.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_LIGHT_BLUE_50 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_LIGHT_BLUE_50.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_LIGHT_BLUE_100 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_LIGHT_BLUE_100.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_LIGHT_BLUE_200 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_LIGHT_BLUE_200.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_LIGHT_BLUE_300 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_LIGHT_BLUE_300.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_LIGHT_BLUE_400 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_LIGHT_BLUE_400.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_LIGHT_BLUE_500 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_LIGHT_BLUE_500.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_LIGHT_BLUE_600 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_LIGHT_BLUE_600.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_LIGHT_BLUE_700 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_LIGHT_BLUE_700.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_LIGHT_BLUE_800 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_LIGHT_BLUE_800.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_LIGHT_BLUE_900 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_LIGHT_BLUE_900.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_LIGHT_BLUE_A100 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_LIGHT_BLUE_A100.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_LIGHT_BLUE_A200 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_LIGHT_BLUE_A200.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_LIGHT_BLUE_A400 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_LIGHT_BLUE_A400.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_LIGHT_BLUE_A700 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_LIGHT_BLUE_A700.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_CYAN_50 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_CYAN_50.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_CYAN_100 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_CYAN_100.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_CYAN_200 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_CYAN_200.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_CYAN_300 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_CYAN_300.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_CYAN_400 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_CYAN_400.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_CYAN_500 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_CYAN_500.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_CYAN_600 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_CYAN_600.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_CYAN_700 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_CYAN_700.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_CYAN_800 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_CYAN_800.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_CYAN_900 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_CYAN_900.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_CYAN_A100 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_CYAN_A100.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_CYAN_A200 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_CYAN_A200.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_CYAN_A400 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_CYAN_A400.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_CYAN_A700 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_CYAN_A700.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_TEAL_50 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_TEAL_50.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_TEAL_100 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_TEAL_100.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_TEAL_200 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_TEAL_200.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_TEAL_300 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_TEAL_300.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_TEAL_400 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_TEAL_400.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_TEAL_500 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_TEAL_500.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_TEAL_600 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_TEAL_600.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_TEAL_700 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_TEAL_700.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_TEAL_800 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_TEAL_800.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_TEAL_900 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_TEAL_900.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_TEAL_A100 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_TEAL_A100.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_TEAL_A200 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_TEAL_A200.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_TEAL_A400 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_TEAL_A400.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_TEAL_A700 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_TEAL_A700.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_GREEN_50 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_GREEN_50.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_GREEN_100 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_GREEN_100.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_GREEN_200 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_GREEN_200.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_GREEN_300 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_GREEN_300.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_GREEN_400 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_GREEN_400.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_GREEN_500 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_GREEN_500.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_GREEN_600 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_GREEN_600.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_GREEN_700 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_GREEN_700.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_GREEN_800 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_GREEN_800.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_GREEN_900 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_GREEN_900.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_GREEN_A100 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_GREEN_A100.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_GREEN_A200 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_GREEN_A200.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_GREEN_A400 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_GREEN_A400.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_GREEN_A700 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_GREEN_A700.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_LIGHT_GREEN_50 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_LIGHT_GREEN_50.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_LIGHT_GREEN_100 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_LIGHT_GREEN_100.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_LIGHT_GREEN_200 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_LIGHT_GREEN_200.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_LIGHT_GREEN_300 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_LIGHT_GREEN_300.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_LIGHT_GREEN_400 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_LIGHT_GREEN_400.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_LIGHT_GREEN_500 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_LIGHT_GREEN_500.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_LIGHT_GREEN_600 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_LIGHT_GREEN_600.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_LIGHT_GREEN_700 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_LIGHT_GREEN_700.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_LIGHT_GREEN_800 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_LIGHT_GREEN_800.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_LIGHT_GREEN_900 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_LIGHT_GREEN_900.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_LIGHT_GREEN_A100 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_LIGHT_GREEN_A100.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_LIGHT_GREEN_A200 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_LIGHT_GREEN_A200.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_LIGHT_GREEN_A400 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_LIGHT_GREEN_A400.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_LIGHT_GREEN_A700 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_LIGHT_GREEN_A700.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_LIME_50 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_LIME_50.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_LIME_100 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_LIME_100.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_LIME_200 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_LIME_200.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_LIME_300 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_LIME_300.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_LIME_400 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_LIME_400.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_LIME_500 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_LIME_500.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_LIME_600 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_LIME_600.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_LIME_700 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_LIME_700.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_LIME_800 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_LIME_800.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_LIME_900 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_LIME_900.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_LIME_A100 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_LIME_A100.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_LIME_A200 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_LIME_A200.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_LIME_A400 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_LIME_A400.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_LIME_A700 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_LIME_A700.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_YELLOW_50 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_YELLOW_50.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_YELLOW_100 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_YELLOW_100.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_YELLOW_200 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_YELLOW_200.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_YELLOW_300 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_YELLOW_300.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_YELLOW_400 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_YELLOW_400.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_YELLOW_500 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_YELLOW_500.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_YELLOW_600 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_YELLOW_600.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_YELLOW_700 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_YELLOW_700.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_YELLOW_800 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_YELLOW_800.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_YELLOW_900 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_YELLOW_900.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_YELLOW_A100 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_YELLOW_A100.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_YELLOW_A200 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_YELLOW_A200.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_YELLOW_A400 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_YELLOW_A400.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_YELLOW_A700 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_YELLOW_A700.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_AMBER_50 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_AMBER_50.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_AMBER_100 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_AMBER_100.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_AMBER_200 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_AMBER_200.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_AMBER_300 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_AMBER_300.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_AMBER_400 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_AMBER_400.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_AMBER_500 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_AMBER_500.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_AMBER_600 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_AMBER_600.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_AMBER_700 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_AMBER_700.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_AMBER_800 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_AMBER_800.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_AMBER_900 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_AMBER_900.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_AMBER_A100 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_AMBER_A100.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_AMBER_A200 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_AMBER_A200.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_AMBER_A400 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_AMBER_A400.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_AMBER_A700 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_AMBER_A700.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_ORANGE_50 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_ORANGE_50.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_ORANGE_100 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_ORANGE_100.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_ORANGE_200 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_ORANGE_200.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_ORANGE_300 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_ORANGE_300.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_ORANGE_400 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_ORANGE_400.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_ORANGE_500 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_ORANGE_500.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_ORANGE_600 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_ORANGE_600.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_ORANGE_700 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_ORANGE_700.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_ORANGE_800 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_ORANGE_800.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_ORANGE_900 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_ORANGE_900.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_ORANGE_A100 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_ORANGE_A100.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_ORANGE_A200 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_ORANGE_A200.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_ORANGE_A400 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_ORANGE_A400.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_ORANGE_A700 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_ORANGE_A700.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_DEEP_ORANGE_50 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_DEEP_ORANGE_50.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_DEEP_ORANGE_100 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_DEEP_ORANGE_100.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_DEEP_ORANGE_200 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_DEEP_ORANGE_200.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_DEEP_ORANGE_300 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_DEEP_ORANGE_300.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_DEEP_ORANGE_400 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_DEEP_ORANGE_400.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_DEEP_ORANGE_500 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_DEEP_ORANGE_500.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_DEEP_ORANGE_600 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_DEEP_ORANGE_600.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_DEEP_ORANGE_700 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_DEEP_ORANGE_700.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_DEEP_ORANGE_800 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_DEEP_ORANGE_800.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_DEEP_ORANGE_900 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_DEEP_ORANGE_900.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_DEEP_ORANGE_A100 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_DEEP_ORANGE_A100.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_DEEP_ORANGE_A200 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_DEEP_ORANGE_A200.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_DEEP_ORANGE_A400 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_DEEP_ORANGE_A400.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_DEEP_ORANGE_A700 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_DEEP_ORANGE_A700.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_BROWN_50 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_BROWN_50.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_BROWN_100 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_BROWN_100.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_BROWN_200 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_BROWN_200.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_BROWN_300 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_BROWN_300.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_BROWN_400 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_BROWN_400.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_BROWN_500 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_BROWN_500.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_BROWN_600 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_BROWN_600.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_BROWN_700 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_BROWN_700.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_BROWN_800 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_BROWN_800.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_BROWN_900 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_BROWN_900.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_GREY_50 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_GREY_50.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_GREY_100 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_GREY_100.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_GREY_200 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_GREY_200.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_GREY_300 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_GREY_300.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_GREY_400 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_GREY_400.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_GREY_500 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_GREY_500.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_GREY_600 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_GREY_600.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_GREY_700 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_GREY_700.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_GREY_800 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_GREY_800.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_GREY_900 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_GREY_900.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_BLACK_1000 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_BLACK_1000.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_WHITE_1000 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_WHITE_1000.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_BLUE_GREY_50 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_BLUE_GREY_50.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_BLUE_GREY_100 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_BLUE_GREY_100.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_BLUE_GREY_200 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_BLUE_GREY_200.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_BLUE_GREY_300 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_BLUE_GREY_300.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_BLUE_GREY_400 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_BLUE_GREY_400.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_BLUE_GREY_500 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_BLUE_GREY_500.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_BLUE_GREY_600 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_BLUE_GREY_600.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_BLUE_GREY_700 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_BLUE_GREY_700.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_BLUE_GREY_800 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_BLUE_GREY_800.toHtmlColorString()));
+	public static final MaterialIconStyle OUTLINE_FILLED_BLUE_GREY_900 = addBaseStyle(new MaterialIconStyle(OUTLINE_FILLED, RgbaColor.MATERIAL_BLUE_GREY_900.toHtmlColorString()));
 
-	protected static AbstractMaterialIconStyle addBaseStyle(AbstractMaterialIconStyle style) {
+	protected static MaterialIconStyle addBaseStyle(MaterialIconStyle style) {
 		baseStyles.add(style);
 		return style;
 	}
 
-	public static List<AbstractMaterialIconStyle> getBaseStyles() {
+	public static List<MaterialIconStyle> getBaseStyles() {
 		return baseStyles;
 	}
 }
diff --git a/teamapps-material-icon-provider/src/main/java/org/teamapps/icon/material/MultiColorStyle.java b/teamapps-material-icon-provider/src/main/java/org/teamapps/icon/material/MultiColorStyle.java
deleted file mode 100644
index 380bdc61a..000000000
--- a/teamapps-material-icon-provider/src/main/java/org/teamapps/icon/material/MultiColorStyle.java
+++ /dev/null
@@ -1,53 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.icon.material;
-
-public abstract class MultiColorStyle extends AbstractMaterialIconStyle {
-
-    private final String color1;
-    private final String color2;
-    private final String color3;
-
-    public MultiColorStyle(String styleId, StyleType styleType, String color1, String color2, String color3) {
-        super(styleId, styleType);
-        this.color1 = color1;
-        this.color2 = color2;
-        this.color3 = color3;
-    }
-
-    public String getColor1() {
-        return color1;
-    }
-
-    public String getColor2() {
-        return color2;
-    }
-
-    public String getColor3() {
-        return color3;
-    }
-
-    @Override
-    public String applyStyle(String svg) {
-        String styleTags = createStyleTags(color1, color2, color3);
-        return applyStyle(svg, styleTags);
-    }
-
-}
diff --git a/teamapps-material-icon-provider/src/main/java/org/teamapps/icon/material/PlainShadowStyle.java b/teamapps-material-icon-provider/src/main/java/org/teamapps/icon/material/PlainShadowStyle.java
deleted file mode 100644
index a54f8ed39..000000000
--- a/teamapps-material-icon-provider/src/main/java/org/teamapps/icon/material/PlainShadowStyle.java
+++ /dev/null
@@ -1,27 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.icon.material;
-
-public class PlainShadowStyle extends SingleColorStyle {
-
-    public PlainShadowStyle(String styleId, String color) {
-        super(styleId, StyleType.PLAIN_SHADOW, color);
-    }
-}
diff --git a/teamapps-server-jetty-embedded/.classpath b/teamapps-server-jetty-embedded/.classpath
new file mode 100644
index 000000000..df66b20f8
--- /dev/null
+++ b/teamapps-server-jetty-embedded/.classpath
@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<classpath>
+	<classpathentry kind="src" output="target/classes" path="src/main/java">
+		<attributes>
+			<attribute name="optional" value="true"/>
+			<attribute name="maven.pomderived" value="true"/>
+		</attributes>
+	</classpathentry>
+	<classpathentry excluding="**" kind="src" output="target/classes" path="src/main/resources">
+		<attributes>
+			<attribute name="maven.pomderived" value="true"/>
+			<attribute name="optional" value="true"/>
+		</attributes>
+	</classpathentry>
+	<classpathentry kind="src" output="target/test-classes" path="src/test/java">
+		<attributes>
+			<attribute name="optional" value="true"/>
+			<attribute name="maven.pomderived" value="true"/>
+			<attribute name="test" value="true"/>
+		</attributes>
+	</classpathentry>
+	<classpathentry excluding="**" kind="src" output="target/test-classes" path="src/test/resources">
+		<attributes>
+			<attribute name="maven.pomderived" value="true"/>
+			<attribute name="test" value="true"/>
+			<attribute name="optional" value="true"/>
+		</attributes>
+	</classpathentry>
+	<classpathentry kind="con" path="org.eclipse.jdt.launching.JRE_CONTAINER/org.eclipse.jdt.internal.debug.ui.launcher.StandardVMType/JavaSE-17">
+		<attributes>
+			<attribute name="maven.pomderived" value="true"/>
+		</attributes>
+	</classpathentry>
+	<classpathentry kind="con" path="org.eclipse.m2e.MAVEN2_CLASSPATH_CONTAINER">
+		<attributes>
+			<attribute name="maven.pomderived" value="true"/>
+		</attributes>
+	</classpathentry>
+	<classpathentry kind="src" path="target/generated-sources/annotations">
+		<attributes>
+			<attribute name="optional" value="true"/>
+			<attribute name="maven.pomderived" value="true"/>
+			<attribute name="ignore_optional_problems" value="true"/>
+			<attribute name="m2e-apt" value="true"/>
+		</attributes>
+	</classpathentry>
+	<classpathentry kind="src" output="target/test-classes" path="target/generated-test-sources/test-annotations">
+		<attributes>
+			<attribute name="optional" value="true"/>
+			<attribute name="maven.pomderived" value="true"/>
+			<attribute name="ignore_optional_problems" value="true"/>
+			<attribute name="m2e-apt" value="true"/>
+			<attribute name="test" value="true"/>
+		</attributes>
+	</classpathentry>
+	<classpathentry kind="output" path="target/classes"/>
+</classpath>
diff --git a/teamapps-server-jetty-embedded/.project b/teamapps-server-jetty-embedded/.project
new file mode 100644
index 000000000..4c4dfe115
--- /dev/null
+++ b/teamapps-server-jetty-embedded/.project
@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<projectDescription>
+	<name>teamapps-server-jetty-embedded</name>
+	<comment></comment>
+	<projects>
+	</projects>
+	<buildSpec>
+		<buildCommand>
+			<name>org.eclipse.jdt.core.javabuilder</name>
+			<arguments>
+			</arguments>
+		</buildCommand>
+		<buildCommand>
+			<name>org.eclipse.m2e.core.maven2Builder</name>
+			<arguments>
+			</arguments>
+		</buildCommand>
+	</buildSpec>
+	<natures>
+		<nature>org.eclipse.jdt.core.javanature</nature>
+		<nature>org.eclipse.m2e.core.maven2Nature</nature>
+	</natures>
+	<filteredResources>
+		<filter>
+			<id>1766427126552</id>
+			<name></name>
+			<type>30</type>
+			<matcher>
+				<id>org.eclipse.core.resources.regexFilterMatcher</id>
+				<arguments>node_modules|\.git|__CREATED_BY_JAVA_LANGUAGE_SERVER__</arguments>
+			</matcher>
+		</filter>
+	</filteredResources>
+</projectDescription>
diff --git a/teamapps-server-jetty-embedded/.settings/org.eclipse.core.resources.prefs b/teamapps-server-jetty-embedded/.settings/org.eclipse.core.resources.prefs
new file mode 100644
index 000000000..cdfe4f1b6
--- /dev/null
+++ b/teamapps-server-jetty-embedded/.settings/org.eclipse.core.resources.prefs
@@ -0,0 +1,5 @@
+eclipse.preferences.version=1
+encoding//src/main/java=UTF-8
+encoding//src/test/java=UTF-8
+encoding//src/test/resources=UTF-8
+encoding/<project>=UTF-8
diff --git a/teamapps-server-jetty-embedded/.settings/org.eclipse.jdt.apt.core.prefs b/teamapps-server-jetty-embedded/.settings/org.eclipse.jdt.apt.core.prefs
new file mode 100644
index 000000000..d4313d4b2
--- /dev/null
+++ b/teamapps-server-jetty-embedded/.settings/org.eclipse.jdt.apt.core.prefs
@@ -0,0 +1,2 @@
+eclipse.preferences.version=1
+org.eclipse.jdt.apt.aptEnabled=false
diff --git a/teamapps-server-jetty-embedded/.settings/org.eclipse.jdt.core.prefs b/teamapps-server-jetty-embedded/.settings/org.eclipse.jdt.core.prefs
new file mode 100644
index 000000000..c9d1e5535
--- /dev/null
+++ b/teamapps-server-jetty-embedded/.settings/org.eclipse.jdt.core.prefs
@@ -0,0 +1,9 @@
+eclipse.preferences.version=1
+org.eclipse.jdt.core.compiler.codegen.targetPlatform=17
+org.eclipse.jdt.core.compiler.compliance=17
+org.eclipse.jdt.core.compiler.problem.enablePreviewFeatures=disabled
+org.eclipse.jdt.core.compiler.problem.forbiddenReference=warning
+org.eclipse.jdt.core.compiler.problem.reportPreviewFeatures=ignore
+org.eclipse.jdt.core.compiler.processAnnotations=disabled
+org.eclipse.jdt.core.compiler.release=disabled
+org.eclipse.jdt.core.compiler.source=17
diff --git a/teamapps-server-jetty-embedded/.settings/org.eclipse.m2e.core.prefs b/teamapps-server-jetty-embedded/.settings/org.eclipse.m2e.core.prefs
new file mode 100644
index 000000000..f897a7f1c
--- /dev/null
+++ b/teamapps-server-jetty-embedded/.settings/org.eclipse.m2e.core.prefs
@@ -0,0 +1,4 @@
+activeProfiles=
+eclipse.preferences.version=1
+resolveWorkspaceProjects=true
+version=1
diff --git a/teamapps-server-jetty-embedded/pom.xml b/teamapps-server-jetty-embedded/pom.xml
index b16ee5ad4..6984f5888 100644
--- a/teamapps-server-jetty-embedded/pom.xml
+++ b/teamapps-server-jetty-embedded/pom.xml
@@ -3,7 +3,7 @@
     <parent>
         <artifactId>teamapps</artifactId>
         <groupId>org.teamapps</groupId>
-        <version>0.9.8-SNAPSHOT</version>
+        <version>0.9.208-SNAPSHOT</version>
     </parent>
     <modelVersion>4.0.0</modelVersion>
 
@@ -33,20 +33,36 @@
         </developer>
     </developers>
 
+    <properties>
+        <jetty.version>12.0.12</jetty.version>
+    </properties>
+
     <dependencies>
         <dependency>
-            <groupId>org.eclipse.jetty</groupId>
-            <artifactId>jetty-webapp</artifactId>
+            <groupId>org.eclipse.jetty.ee10</groupId>
+            <artifactId>jetty-ee10-webapp</artifactId>
             <version>${jetty.version}</version>
+            <exclusions>
+                <exclusion>
+                    <groupId>org.slf4j</groupId>
+                    <artifactId>slf4j-api</artifactId>
+                </exclusion>
+            </exclusions>
         </dependency>
         <dependency>
-            <groupId>org.eclipse.jetty.websocket</groupId>
-            <artifactId>javax-websocket-server-impl</artifactId>
+            <groupId>org.eclipse.jetty.ee10.websocket</groupId>
+            <artifactId>jetty-ee10-websocket-jakarta-server</artifactId>
             <version>${jetty.version}</version>
+            <exclusions>
+                <exclusion>
+                    <groupId>org.slf4j</groupId>
+                    <artifactId>slf4j-api</artifactId>
+                </exclusion>
+            </exclusions>
         </dependency>
         <dependency>
             <groupId>org.teamapps</groupId>
-            <artifactId>teamapps-ux-servlet</artifactId>
+            <artifactId>teamapps-ux</artifactId>
         </dependency>
         <dependency>
             <groupId>org.teamapps</groupId>
@@ -59,8 +75,4 @@
             <scope>test</scope>
         </dependency>
     </dependencies>
-    <properties>
-        <jetty.version>9.4.12.v20180830</jetty.version>
-    </properties>
-
 </project>
\ No newline at end of file
diff --git a/teamapps-server-jetty-embedded/src/main/java/org/teamapps/server/jetty/embedded/TeamAppsJettyEmbeddedServer.java b/teamapps-server-jetty-embedded/src/main/java/org/teamapps/server/jetty/embedded/TeamAppsJettyEmbeddedServer.java
index d8b5b2369..37f0e4c35 100644
--- a/teamapps-server-jetty-embedded/src/main/java/org/teamapps/server/jetty/embedded/TeamAppsJettyEmbeddedServer.java
+++ b/teamapps-server-jetty-embedded/src/main/java/org/teamapps/server/jetty/embedded/TeamAppsJettyEmbeddedServer.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,46 +19,87 @@
  */
 package org.teamapps.server.jetty.embedded;
 
+import jakarta.servlet.ServletContextListener;
+import org.eclipse.jetty.ee10.webapp.Configuration;
+import org.eclipse.jetty.ee10.webapp.WebAppContext;
+import org.eclipse.jetty.ee10.webapp.WebXmlConfiguration;
+import org.eclipse.jetty.ee10.websocket.jakarta.server.config.JakartaWebSocketServletContainerInitializer;
 import org.eclipse.jetty.server.Server;
-import org.eclipse.jetty.webapp.Configuration;
-import org.eclipse.jetty.webapp.WebAppContext;
-import org.eclipse.jetty.webapp.WebXmlConfiguration;
-import org.eclipse.jetty.websocket.jsr356.server.deploy.WebSocketServerContainerInitializer;
+import org.eclipse.jetty.server.handler.gzip.GzipHandler;
 import org.teamapps.client.ClientCodeExtractor;
+import org.teamapps.config.TeamAppsConfiguration;
+import org.teamapps.core.TeamAppsCore;
+import org.teamapps.util.threading.CompletableFutureChainSequentialExecutorFactory;
 import org.teamapps.ux.servlet.TeamAppsServletContextListener;
 import org.teamapps.webcontroller.WebController;
 
-import javax.servlet.ServletException;
-import java.io.File;
+import java.io.IOException;
 import java.nio.file.Files;
+import java.nio.file.Path;
+import java.util.ArrayList;
+import java.util.List;
 
 public class TeamAppsJettyEmbeddedServer {
 
-	private final WebController webController;
-	private final File webAppDirectory;
-	private final Server server;
+	public static final int DEFAULT_PORT = 8080;
 
-	public TeamAppsJettyEmbeddedServer(WebController webController, File webAppDirectory) throws ServletException {
-		this(webController, webAppDirectory, 8080);
-	}
+	private final TeamAppsCore teamAppsCore;
+	private final Path webAppDirectory;
+	private final List<ServletContextListener> customServletContextListeners = new ArrayList<>();
+
+	private final Server server;
+	private final WebAppContext webapp;
 
-	public TeamAppsJettyEmbeddedServer(WebController webController, File webAppDirectory, int port) throws ServletException {
-		this.webController = webController;
+	public TeamAppsJettyEmbeddedServer(WebController webController, Path webAppDirectory, TeamAppsConfiguration config, int port, boolean globalGzipCompression) {
+		teamAppsCore = new TeamAppsCore(config, new CompletableFutureChainSequentialExecutorFactory(config.getMaxNumberOfSessionExecutorThreads()), webController);
 		this.webAppDirectory = webAppDirectory;
 
 		server = new Server(port);
-		WebAppContext webapp = new WebAppContext();
+		webapp = new WebAppContext();
+		webapp.setClassLoader(TeamAppsJettyEmbeddedServer.class.getClassLoader());
 		webapp.setConfigurations(new Configuration[]{new WebXmlConfiguration()});
+		webapp.getHiddenClassMatcher().exclude("org.eclipse.jetty.");
 		webapp.setContextPath("/");
-		// webapp.setInitParameter("teamapps.webController.className", "...");
-		webapp.addEventListener(new TeamAppsServletContextListener(webController));
-		webapp.setResourceBase(webAppDirectory.getAbsolutePath());
-		server.setHandler(webapp);
-		WebSocketServerContainerInitializer.configureContext(webapp);
+		webapp.addEventListener(new TeamAppsServletContextListener(teamAppsCore));
+		webapp.setBaseResourceAsPath(webAppDirectory.toAbsolutePath());
+		webapp.setInitParameter("org.eclipse.jetty.servlet.Default.dirAllowed", "false");
+		webapp.setInitParameter("org.eclipse.jetty.servlet.Default.precompressed", "true");
+		// The following will not actually set the secure flag on the cookie if the session is started without encryption.
+		// Use getWebapp().getSessionHandler().getSessionCookieConfig().setSecure(true) if you want to force secure cookies.
+		webapp.getSessionHandler().setSecureRequestOnly(true);
+		if (globalGzipCompression) {
+			GzipHandler gzipHandler = new GzipHandler();
+			gzipHandler.setInflateBufferSize(32 * 1024);
+			server.setHandler(gzipHandler); // GZIP handler set at the server level will apply compression to everything, including resources and dynamic content
+			gzipHandler.setHandler(webapp);
+		} else {
+			server.setHandler(webapp);
+		}
+		JakartaWebSocketServletContainerInitializer.configure(webapp, null);
+	}
+
+	public Server getServer() {
+		return server;
+	}
+
+	public WebAppContext getWebapp() {
+		return webapp;
+	}
+
+	public TeamAppsCore getTeamAppsCore() {
+		return teamAppsCore;
+	}
+
+	public void addServletContextListener(ServletContextListener servletContextListener) {
+		if (server.isRunning()) {
+			throw new IllegalStateException("ServletContextListeners need to be registered before the server is started!");
+		}
+		this.customServletContextListeners.add(servletContextListener);
 	}
 
 	public void start() throws Exception {
-		ClientCodeExtractor.initializeWebserverDirectory(webAppDirectory);
+		ClientCodeExtractor.initializeWebserverDirectory(webAppDirectory.toFile());
+		customServletContextListeners.forEach(webapp::addEventListener);
 		server.start();
 		server.join();
 	}
@@ -67,16 +108,50 @@ public void stop() throws Exception {
 		server.stop();
 	}
 
-	public Server getServer() {
-		return server;
+	public static Builder builder(WebController webController) {
+		return new Builder(webController);
 	}
 
-	public static void main(String[] args) throws Exception {
-		if (args.length < 2) {
-			System.err.println("Usage: webControllerClass [webappDirectory]");
-			return;
+	public static class Builder {
+
+		private final WebController webController;
+		private Path webAppDirectory;
+		private TeamAppsConfiguration config = new TeamAppsConfiguration();
+		private int port = DEFAULT_PORT;
+		private boolean globalGzipCompression;
+
+		public Builder(WebController webController) {
+			this.webController = webController;
+		}
+
+		public Builder setWebAppDirectory(Path webAppDirectory) {
+			this.webAppDirectory = webAppDirectory;
+			return this;
+		}
+
+		public Builder setConfig(TeamAppsConfiguration config) {
+			this.config = config;
+			return this;
+		}
+
+		public Builder setPort(int port) {
+			this.port = port;
+			return this;
+		}
+
+		public Builder setGlobalGzipCompression(boolean globalGzipCompression) {
+			this.globalGzipCompression = globalGzipCompression;
+			return this;
+		}
+
+		public TeamAppsJettyEmbeddedServer build() throws IOException {
+			if (webAppDirectory == null) {
+				webAppDirectory = Files.createTempDirectory("teamapps");
+			}
+			webAppDirectory = webAppDirectory.toRealPath();
+
+			return new TeamAppsJettyEmbeddedServer(webController, webAppDirectory, config, port, globalGzipCompression);
 		}
-		WebController webController = (WebController) Class.forName(args[0]).getConstructor().newInstance();
-		new TeamAppsJettyEmbeddedServer(webController, Files.createTempDirectory("sf").toFile(), 8080).start();
 	}
+
 }
diff --git a/teamapps-server-jetty-embedded/src/test/java/org/teamapps/server/jetty/embedded/TeamAppsJettyEmbeddedServerTest.java b/teamapps-server-jetty-embedded/src/test/java/org/teamapps/server/jetty/embedded/TeamAppsJettyEmbeddedServerTest.java
index 231f5c75d..aa1ee9f80 100644
--- a/teamapps-server-jetty-embedded/src/test/java/org/teamapps/server/jetty/embedded/TeamAppsJettyEmbeddedServerTest.java
+++ b/teamapps-server-jetty-embedded/src/test/java/org/teamapps/server/jetty/embedded/TeamAppsJettyEmbeddedServerTest.java
@@ -2,14 +2,14 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * 
+ *
  *      http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
@@ -19,21 +19,23 @@
  */
 package org.teamapps.server.jetty.embedded;
 
-import com.google.common.io.Files;
-import org.teamapps.icon.material.MaterialIcon;
-import org.teamapps.webcontroller.WebController;
+import java.util.Locale;
+import org.teamapps.ux.component.pdfviewer.PdfViewerTestHarness;
+import org.teamapps.ux.component.rootpanel.RootPanel;
 import org.teamapps.ux.session.SessionContext;
 
 public class TeamAppsJettyEmbeddedServerTest {
 
-	public static void main(String[] args) throws Exception {
-
-		WebController controller = (SessionContext context) -> {
-			context.showNotification(MaterialIcon.MESSAGE, "Hello World");
-		};
-
-		new TeamAppsJettyEmbeddedServer(controller, Files.createTempDir(), 8081).start();
-
-	}
+    public static void main(String[] args) throws Exception {
+        TeamAppsJettyEmbeddedServer.builder((SessionContext sessionContext) -> {
+            sessionContext.setLocale(Locale.US);
+            RootPanel rootPanel = sessionContext.addRootPanel();
 
+            PdfViewerTestHarness pdfViewerHarness = new PdfViewerTestHarness();
+            rootPanel.setContent(pdfViewerHarness);
+        })
+            .setPort(8082)
+            .build()
+            .start();
+    }
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/util/UiUtil.java b/teamapps-server-jetty-embedded/src/test/java/org/teamapps/server/jetty/embedded/User.java
similarity index 71%
rename from teamapps-ux/src/main/java/org/teamapps/util/UiUtil.java
rename to teamapps-server-jetty-embedded/src/test/java/org/teamapps/server/jetty/embedded/User.java
index 3a74b2221..fd5340d6a 100644
--- a/teamapps-ux/src/main/java/org/teamapps/util/UiUtil.java
+++ b/teamapps-server-jetty-embedded/src/test/java/org/teamapps/server/jetty/embedded/User.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,15 +17,14 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-package org.teamapps.util;
+package org.teamapps.server.jetty.embedded;
 
 import org.teamapps.common.format.Color;
-import org.teamapps.dto.UiColor;
+import org.teamapps.icons.Icon;
 
-public final class UiUtil {
-
-	public static UiColor createUiColor(Color color) {
-		return color != null ? new UiColor(color.getRed(), color.getGreen(), color.getBlue()).setAlpha(color.getAlpha()) : null;
+public record User(Icon<?, ?> icon, String firstName, Color color) {
+	@Override
+	public String toString() {
+		return firstName;
 	}
-
 }
diff --git a/teamapps-server-jetty-embedded/src/test/resources/test.pdf b/teamapps-server-jetty-embedded/src/test/resources/test.pdf
new file mode 100644
index 000000000..75e03fe72
Binary files /dev/null and b/teamapps-server-jetty-embedded/src/test/resources/test.pdf differ
diff --git a/teamapps-server-tomcat-embedded/pom.xml b/teamapps-server-tomcat-embedded/pom.xml
deleted file mode 100644
index 0cd423632..000000000
--- a/teamapps-server-tomcat-embedded/pom.xml
+++ /dev/null
@@ -1,70 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
-    <parent>
-        <artifactId>teamapps</artifactId>
-        <groupId>org.teamapps</groupId>
-        <version>0.9.8-SNAPSHOT</version>
-    </parent>
-    <modelVersion>4.0.0</modelVersion>
-
-    <artifactId>teamapps-server-tomcat-embedded</artifactId>
-
-    <name>TeamApps Server Tomcat Embedded</name>
-    <description>TeamApps Server Tomcat Embedded</description>
-    <url>https://github.com/teamapps-org/teamapps</url>
-    <licenses>
-        <license>
-            <name>Apache License, Version 2.0</name>
-            <url>https://www.apache.org/licenses/LICENSE-2.0.txt</url>
-            <distribution>repo</distribution>
-            <comments>A business-friendly OSS license</comments>
-        </license>
-    </licenses>
-    <developers>
-        <developer>
-            <name>Matthias Bernstein</name>
-            <email>matthias.bernstein@teamapps.org</email>
-            <id>matthias-bernstein</id>
-        </developer>
-        <developer>
-            <name>Yann Massard</name>
-            <email>yann.massard@teamapps.org</email>
-            <id>yamass</id>
-        </developer>
-    </developers>
-
-    <properties>
-        <tomcat.version>9.0.16</tomcat.version>
-    </properties>
-
-    <dependencies>
-
-        <dependency>
-            <groupId>org.apache.tomcat.embed</groupId>
-            <artifactId>tomcat-embed-core</artifactId>
-            <version>${tomcat.version}</version>
-        </dependency>
-        <dependency>
-            <groupId>org.apache.tomcat.embed</groupId>
-            <artifactId>tomcat-embed-websocket</artifactId>
-            <version>${tomcat.version}</version>
-        </dependency>
-
-        <dependency>
-            <groupId>org.teamapps</groupId>
-            <artifactId>teamapps-ux-servlet</artifactId>
-        </dependency>
-        <dependency>
-            <groupId>org.teamapps</groupId>
-            <artifactId>teamapps-client</artifactId>
-        </dependency>
-
-
-        <dependency>
-            <groupId>org.slf4j</groupId>
-            <artifactId>slf4j-simple</artifactId>
-            <scope>test</scope>
-        </dependency>
-    </dependencies>
-
-</project>
\ No newline at end of file
diff --git a/teamapps-server-tomcat-embedded/src/main/java/org/teamapps/server/tomcat/embedded/TeamAppsTomcatEmbeddedServer.java b/teamapps-server-tomcat-embedded/src/main/java/org/teamapps/server/tomcat/embedded/TeamAppsTomcatEmbeddedServer.java
deleted file mode 100644
index e3924aee7..000000000
--- a/teamapps-server-tomcat-embedded/src/main/java/org/teamapps/server/tomcat/embedded/TeamAppsTomcatEmbeddedServer.java
+++ /dev/null
@@ -1,111 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.server.tomcat.embedded;
-
-import org.apache.catalina.Context;
-import org.apache.catalina.LifecycleState;
-import org.apache.catalina.Wrapper;
-import org.apache.catalina.servlets.DefaultServlet;
-import org.apache.catalina.startup.Tomcat;
-import org.apache.tomcat.websocket.server.WsSci;
-import org.teamapps.client.ClientCodeExtractor;
-import org.teamapps.webcontroller.WebController;
-import org.teamapps.ux.servlet.TeamAppsServletContextListener;
-
-import javax.servlet.ServletContextEvent;
-import javax.servlet.ServletException;
-import javax.servlet.http.HttpServletRequest;
-import javax.servlet.http.HttpServletRequestWrapper;
-import javax.servlet.http.HttpServletResponse;
-import java.io.File;
-import java.io.IOException;
-
-public class TeamAppsTomcatEmbeddedServer {
-
-	private final WebController webController;
-	private final File webAppDirectory;
-	private Tomcat server;
-
-	boolean initialized = false;
-
-	public TeamAppsTomcatEmbeddedServer(WebController webController, File webAppDirectory) {
-		this.webController = webController;
-		this.webAppDirectory = webAppDirectory;
-	}
-
-	public void start(int port) throws Exception {
-		ClientCodeExtractor.initializeWebserverDirectory(webAppDirectory);
-
-		server = new Tomcat();
-		server.setPort(port);
-		Context context = server.addContext("", webAppDirectory.getAbsolutePath());
-		TeamAppsServletContextListener listener = new TeamAppsServletContextListener(webController);
-
-		context.addServletContainerInitializer(new WsSci(), null);
-		context.addServletContainerInitializer((c, servletContext) -> {
-			listener.contextInitialized(new ServletContextEvent(context.getServletContext()));
-		}, null);
-		context.addLifecycleListener(event -> {
-			if (event.getLifecycle().getState() == LifecycleState.DESTROYING) {
-				listener.contextDestroyed(new ServletContextEvent(context.getServletContext()));
-				initialized = false;
-			}
-		});
-
-		DefaultServlet defaultServlet = new DefaultServlet() {
-			@Override
-			protected void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException {
-				if (request.getPathInfo() == null || request.getPathInfo().equals("/")) {
-					super.doGet(new HttpServletRequestWrapper(request) {
-						@Override
-						public String getPathInfo() {
-							return "/index.html";
-						}
-					}, response);
-				} else {
-					super.doGet(request, response);
-				}
-			}
-		};
-		Wrapper wrapper = Tomcat.addServlet(context, "default", defaultServlet);
-		wrapper.addInitParameter("listings", "true");
-		wrapper.addMapping("/*");
-
-		server.getConnector();
-		server.start();
-	}
-
-	public void start() throws Exception {
-		this.start(8080);
-	}
-
-	public void stop() throws Exception {
-		server.stop();
-	}
-
-	public static void main(String[] args) throws Exception {
-		if (args.length < 2) {
-			System.err.println("Usage: webControllerClass [webappDirectory]");
-		}
-		WebController webController = (WebController) Class.forName(args[0]).getConstructor().newInstance();
-		new TeamAppsTomcatEmbeddedServer(webController, new File(args[1])).start();
-	}
-
-}
diff --git a/teamapps-server-undertow-embedded/pom.xml b/teamapps-server-undertow-embedded/pom.xml
index aa7eef780..ca9bfa610 100644
--- a/teamapps-server-undertow-embedded/pom.xml
+++ b/teamapps-server-undertow-embedded/pom.xml
@@ -3,7 +3,7 @@
     <parent>
         <artifactId>teamapps</artifactId>
         <groupId>org.teamapps</groupId>
-        <version>0.9.8-SNAPSHOT</version>
+        <version>0.9.208-SNAPSHOT</version>
     </parent>
     <modelVersion>4.0.0</modelVersion>
 
@@ -33,36 +33,41 @@
         </developer>
     </developers>
 
+    <properties>
+        <undertow.version>2.3.18.Final</undertow.version>
+    </properties>
+
     <dependencies>
         <dependency>
             <groupId>io.undertow</groupId>
             <artifactId>undertow-servlet</artifactId>
-            <version>2.0.17.Final</version>
+            <version>${undertow.version}</version>
         </dependency>
-
         <dependency>
             <groupId>io.undertow</groupId>
             <artifactId>undertow-websockets-jsr</artifactId>
-            <version>2.0.17.Final</version>
+            <version>${undertow.version}</version>
+        </dependency>
+        <dependency>
+            <groupId>org.slf4j</groupId>
+            <artifactId>log4j-over-slf4j</artifactId>
+            <version>${slf4j-version}</version>
         </dependency>
-
 
         <dependency>
             <groupId>org.teamapps</groupId>
-            <artifactId>teamapps-ux-servlet</artifactId>
+            <artifactId>teamapps-ux</artifactId>
         </dependency>
         <dependency>
             <groupId>org.teamapps</groupId>
             <artifactId>teamapps-client</artifactId>
         </dependency>
 
-
         <dependency>
             <groupId>org.slf4j</groupId>
             <artifactId>slf4j-simple</artifactId>
             <scope>test</scope>
         </dependency>
-
     </dependencies>
 
 </project>
\ No newline at end of file
diff --git a/teamapps-server-undertow-embedded/src/main/java/org/teamapps/server/undertow/embedded/TeamAppsUndertowEmbeddedServer.java b/teamapps-server-undertow-embedded/src/main/java/org/teamapps/server/undertow/embedded/TeamAppsUndertowEmbeddedServer.java
index 1876498d5..528d4c1ad 100644
--- a/teamapps-server-undertow-embedded/src/main/java/org/teamapps/server/undertow/embedded/TeamAppsUndertowEmbeddedServer.java
+++ b/teamapps-server-undertow-embedded/src/main/java/org/teamapps/server/undertow/embedded/TeamAppsUndertowEmbeddedServer.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -23,74 +23,126 @@
 import io.undertow.server.HttpHandler;
 import io.undertow.server.handlers.resource.FileResourceManager;
 import io.undertow.servlet.Servlets;
-import io.undertow.servlet.api.DeploymentInfo;
-import io.undertow.servlet.api.DeploymentManager;
-import io.undertow.servlet.api.ListenerInfo;
-import io.undertow.servlet.api.ServletContainer;
+import io.undertow.servlet.api.*;
 import io.undertow.servlet.util.ImmediateInstanceHandle;
+import io.undertow.websockets.extensions.PerMessageDeflateHandshake;
 import io.undertow.websockets.jsr.WebSocketDeploymentInfo;
 import org.teamapps.client.ClientCodeExtractor;
-import org.teamapps.webcontroller.WebController;
+import org.teamapps.config.TeamAppsConfiguration;
+import org.teamapps.core.TeamAppsCore;
+import org.teamapps.util.threading.CompletableFutureChainSequentialExecutorFactory;
 import org.teamapps.ux.servlet.TeamAppsServletContextListener;
+import org.teamapps.webcontroller.WebController;
 
+import jakarta.servlet.ServletContextListener;
 import java.io.File;
+import java.io.IOException;
+import java.nio.file.Files;
+import java.util.ArrayList;
+import java.util.List;
+import java.util.function.Function;
 
 public class TeamAppsUndertowEmbeddedServer {
 
-    private final WebController webController;
-    private final File webAppDirectory;
-    private Undertow server;
-
-    public TeamAppsUndertowEmbeddedServer(WebController webController, File webAppDirectory) {
-        this.webController = webController;
-        this.webAppDirectory = webAppDirectory;
-    }
-
-    public void start(int port, String host) throws Exception {
-        ClientCodeExtractor.initializeWebserverDirectory(webAppDirectory);
-
-        TeamAppsServletContextListener servletContextListener = new TeamAppsServletContextListener(webController);
-
-        ClassLoader classLoader = ClassLoader.getSystemClassLoader();
-        DeploymentInfo deploymentInfo = new DeploymentInfo()
-                .setContextPath("/")
-                .addWelcomePage("index.html")
-                .setDeploymentName("teamapps")
-                .addListener(new ListenerInfo(TeamAppsServletContextListener.class, () -> new ImmediateInstanceHandle<>(servletContextListener)))
-                .setResourceManager(new FileResourceManager(webAppDirectory.getAbsoluteFile()))
-                .setAllowNonStandardWrappers(true)
-                .addServletContextAttribute(WebSocketDeploymentInfo.ATTRIBUTE_NAME, new WebSocketDeploymentInfo())
-                .setClassLoader(classLoader);
-
-        ServletContainer servletContainer = Servlets.defaultContainer();
-        DeploymentManager deploymentManager = servletContainer.addDeployment(deploymentInfo);
-        deploymentManager.deploy();
-
-        HttpHandler httpHandler = deploymentManager.start();
-        server = Undertow.builder()
-                .addHttpListener(8080, "0.0.0.0")
-                .setHandler(httpHandler)
-                .build();
-        server.start();
-
-    }
-    public void start(int port) throws Exception {
-        this.start(port,"0.0.0.0" );
-    }
-    public void start() throws Exception {
-        this.start(8080, "0.0.0.0");
-    }
-
-    public void stop() throws Exception {
-        server.stop();
-    }
-
-    public static void main(String[] args) throws Exception {
-        if (args.length < 2) {
-            System.err.println("Usage: webControllerClass [webappDirectory]");
-        }
-        WebController webController = (WebController) Class.forName(args[0]).getConstructor().newInstance();
-        new TeamAppsUndertowEmbeddedServer(webController, new File(args[1])).start();
-    }
+	private final TeamAppsCore teamAppsCore;
+	private final File webAppDirectory;
+	private final List<ServletContextListener> customServletContextListeners = new ArrayList<>();
+	private Function<DeploymentInfo, DeploymentInfo> deploymentInfoManipulator;
+
+	private final int port;
+	private Undertow server;
+	private boolean started;
+
+	public TeamAppsUndertowEmbeddedServer(WebController webController) throws IOException {
+		this(webController, Files.createTempDirectory("teamapps").toFile(), new TeamAppsConfiguration());
+	}
+
+	public TeamAppsUndertowEmbeddedServer(WebController webController, int port) throws IOException {
+		this(webController, Files.createTempDirectory("teamapps").toFile(), new TeamAppsConfiguration(), port);
+	}
+
+	public TeamAppsUndertowEmbeddedServer(WebController webController, TeamAppsConfiguration config) throws IOException {
+		this(webController, Files.createTempDirectory("teamapps").toFile(), config, 8080);
+	}
+
+	public TeamAppsUndertowEmbeddedServer(WebController webController, TeamAppsConfiguration config, int port) throws IOException {
+		this(webController, Files.createTempDirectory("teamapps").toFile(), config, port);
+	}
+
+	public TeamAppsUndertowEmbeddedServer(WebController webController, File webAppDirectory, int port) throws IOException {
+		this(webController, webAppDirectory, new TeamAppsConfiguration(), port);
+	}
+
+	public TeamAppsUndertowEmbeddedServer(WebController webController, File webAppDirectory, TeamAppsConfiguration config) throws IOException {
+		this(webController, webAppDirectory, config, 8080);
+	}
+
+	public TeamAppsUndertowEmbeddedServer(WebController webController, File webAppDirectory, TeamAppsConfiguration config, int port) throws IOException {
+		this.teamAppsCore = new TeamAppsCore(config, new CompletableFutureChainSequentialExecutorFactory(config.getMaxNumberOfSessionExecutorThreads()), webController);
+		this.webAppDirectory = webAppDirectory.toPath().toRealPath().toFile();
+		this.port = port;
+	}
+
+	public TeamAppsCore getTeamAppsCore() {
+		return teamAppsCore;
+	}
+
+	public void addServletContextListener(ServletContextListener servletContextListener) {
+		if (started) {
+			throw new IllegalStateException("ServletContextListeners need to be registered before the server is started!");
+		}
+		this.customServletContextListeners.add(servletContextListener);
+	}
+
+	public void setDeploymentInfoCallback(Function<DeploymentInfo, DeploymentInfo> deploymentInfoCallback) {
+		if (started) {
+			throw new IllegalStateException("deploymentInfoManipulator need to be registered before the server is started!");
+		}
+		this.deploymentInfoManipulator = deploymentInfoCallback;
+	}
+
+	public void start() throws Exception {
+		this.started = true;
+		ClientCodeExtractor.initializeWebserverDirectory(webAppDirectory);
+
+		TeamAppsServletContextListener servletContextListener = new TeamAppsServletContextListener(teamAppsCore);
+
+		ClassLoader classLoader = ClassLoader.getSystemClassLoader();
+		DeploymentInfo deploymentInfo = new DeploymentInfo()
+				.setContextPath("/")
+				.addWelcomePage("index.html")
+				.setDeploymentName("teamapps")
+				.addListener(new ListenerInfo(ServletContextListener.class, () -> new ImmediateInstanceHandle<>(servletContextListener)))
+				.setResourceManager(new FileResourceManager(webAppDirectory.getAbsoluteFile()))
+				.setAllowNonStandardWrappers(true)
+				.addServletContextAttribute(WebSocketDeploymentInfo.ATTRIBUTE_NAME, new WebSocketDeploymentInfo()
+						.addExtension(new PerMessageDeflateHandshake(false, 6)))
+				.setClassLoader(classLoader);
+
+		if (deploymentInfoManipulator != null ) {
+			deploymentInfoManipulator.apply(deploymentInfo);
+		}
+
+		customServletContextListeners.forEach(l ->
+				deploymentInfo.addListener(new ListenerInfo(ServletContextListener.class, () -> new ImmediateInstanceHandle<>(l))));
+
+		ServletContainer servletContainer = Servlets.defaultContainer();
+		DeploymentManager deploymentManager = servletContainer.addDeployment(deploymentInfo);
+		deploymentManager.deploy();
+
+		HttpHandler httpHandler = deploymentManager.start();
+		server = Undertow.builder()
+				.addHttpListener(port, "0.0.0.0")
+				.setHandler(httpHandler)
+				.setIoThreads(Math.max(Runtime.getRuntime().availableProcessors() * 4, 10))
+				.setWorkerThreads(Math.max(Runtime.getRuntime().availableProcessors() * 8, 10))
+				.build();
+		server.start();
+
+	}
+
+	public void stop() throws Exception {
+		server.stop();
+	}
 
 }
diff --git a/teamapps-server-undertow-embedded/src/test/java/org/teamapps/server/undertow/embedded/TeamAppsUndertowEmbeddedServerTest.java b/teamapps-server-undertow-embedded/src/test/java/org/teamapps/server/undertow/embedded/TeamAppsUndertowEmbeddedServerTest.java
index 442af8d33..3ce63191c 100644
--- a/teamapps-server-undertow-embedded/src/test/java/org/teamapps/server/undertow/embedded/TeamAppsUndertowEmbeddedServerTest.java
+++ b/teamapps-server-undertow-embedded/src/test/java/org/teamapps/server/undertow/embedded/TeamAppsUndertowEmbeddedServerTest.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,7 +19,6 @@
  */
 package org.teamapps.server.undertow.embedded;
 
-import com.google.common.io.Files;
 import org.teamapps.icon.material.MaterialIcon;
 import org.teamapps.ux.session.SessionContext;
 import org.teamapps.webcontroller.WebController;
@@ -28,7 +27,8 @@ public class TeamAppsUndertowEmbeddedServerTest {
 
 	public static void main(String[] args) throws Exception {
 		WebController controller = (SessionContext context) -> context.showNotification(MaterialIcon.MESSAGE, "Hello World");
-		new TeamAppsUndertowEmbeddedServer(controller, Files.createTempDir()).start(8081, "127.0.0.2");
+		new TeamAppsUndertowEmbeddedServer(controller)
+				.start();
 	}
 
 }
diff --git a/teamapps-ui-api/pom.xml b/teamapps-ui-api/pom.xml
index e344b9cba..7caa348fa 100644
--- a/teamapps-ui-api/pom.xml
+++ b/teamapps-ui-api/pom.xml
@@ -3,7 +3,7 @@
     <parent>
         <artifactId>teamapps</artifactId>
         <groupId>org.teamapps</groupId>
-        <version>0.9.8-SNAPSHOT</version>
+        <version>0.9.208-SNAPSHOT</version>
     </parent>
     <modelVersion>4.0.0</modelVersion>
 
@@ -39,10 +39,6 @@
             <artifactId>teamapps-ui-dsl</artifactId>
             <scope>test</scope>
         </dependency>
-        <dependency>
-            <groupId>com.googlecode.json-simple</groupId>
-            <artifactId>json-simple</artifactId>
-        </dependency>
 
         <dependency>
             <groupId>com.fasterxml.jackson.core</groupId>
@@ -56,6 +52,11 @@
             <groupId>com.fasterxml.jackson.core</groupId>
             <artifactId>jackson-annotations</artifactId>
         </dependency>
+        <dependency>
+            <groupId>com.ibm.icu</groupId>
+            <artifactId>icu4j</artifactId>
+            <version>76.1</version>
+        </dependency>
 
     </dependencies>
 
@@ -64,7 +65,7 @@
         <plugins>
             <plugin>
                 <artifactId>maven-clean-plugin</artifactId>
-                <version>2.6.1</version>
+                <version>3.4.0</version>
                 <configuration>
                     <filesets>
                         <fileset>
@@ -76,7 +77,7 @@
             <plugin>
                 <groupId>org.codehaus.mojo</groupId>
                 <artifactId>exec-maven-plugin</artifactId>
-                <version>1.3.2</version>
+                <version>3.3.0</version>
                 <executions>
                     <execution>
                         <id>generate DTOs</id>
@@ -107,7 +108,7 @@
             <plugin>
                 <groupId>org.codehaus.mojo</groupId>
                 <artifactId>build-helper-maven-plugin</artifactId>
-                <version>1.9.1</version>
+                <version>3.5.0</version>
                 <executions>
                     <execution>
                         <phase>generate-sources</phase>
diff --git a/teamapps-ui-api/src/main/dto/Css.dto b/teamapps-ui-api/src/main/dto/Css.dto
index 085bb008e..529fde9ea 100644
--- a/teamapps-ui-api/src/main/dto/Css.dto
+++ b/teamapps-ui-api/src/main/dto/Css.dto
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ui-api/src/main/dto/Protocol.dto b/teamapps-ui-api/src/main/dto/Protocol.dto
index 11fddaea4..5eb66bcfb 100644
--- a/teamapps-ui-api/src/main/dto/Protocol.dto
+++ b/teamapps-ui-api/src/main/dto/Protocol.dto
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -39,6 +39,10 @@ class EVENT extends AbstractClientPayloadMessage {
     required UiEvent uiEvent;
 }
 
+class QUERY extends AbstractClientPayloadMessage {
+    required UiQuery uiQuery;
+}
+
 class CMD_RESULT extends AbstractClientPayloadMessage {
 	required int cmdId;
 	required Object result;
@@ -56,11 +60,6 @@ class KEEPALIVE extends AbstractClientMessage {
 class TERMINATE extends AbstractClientMessage {
 }
 
-class CLIENT_ERROR extends AbstractServerMessage {
-    required enum { EXCEPTION } reason;
-    String message;
-}
-
 @TypeScriptFactory
 class UiClientInfo {
 	String ip;
@@ -74,18 +73,96 @@ class UiClientInfo {
 	String timezoneIana;
 	int timezoneOffsetMinutes;
 	List<String> clientTokens;
-	String clientUrl;
+	UiLocation location;
 	Dictionary<Object> clientParameters;
+	String teamAppsVersion;
 }
 
+@TypeScriptFactory
+class UiLocation {
+
+	/**
+	 * Returns the complete URL.
+	 * <p>
+	 * Non-null.
+	 */
+	String href;
+
+	/**
+	 * Returns the URL's origin.
+	 * <p>
+	 * The origin is a String containing the Unicode serialization of the origin of the represented URL.
+	 * <p>
+	 * That is, for a URL using the http or https, the scheme followed by '://', followed by the domain, followed by ':',
+	 * followed by the port, if explicitly specified.
+	 * <p>
+	 * Non-null.
+	 */
+	String origin;
+
+	/**
+	 * Returns the URL's protocol scheme.
+	 * <p>
+	 * Non-null.
+	 */
+	String protocol;
+
+	/**
+	 * Returns the URL's host and port (if different from the default port for the scheme).
+	 * <p>
+	 * Non-null.
+	 */
+	String host;
+
+	/**
+	 * Returns the URL's hostname. This may be the domain name (DNS), the IPv4 address (e.g. "93.184.216.34"),
+	 * or IPv6 address in brackets (e.g. "[2606:2800:220:1:248:1893:25c8:1946]"), depending on the URL.
+	 * <p>
+	 * Non-null.
+	 */
+	String hostname;
+
+	/**
+	 * Returns the URL's port number.
+	 * <p>
+	 * Note that this can be null if the port number is not explicitly specified in the URL.
+	 */
+	Integer port;
+
+	/**
+	 * Returns the URL's path. This can (by the JavaScript spec) be an empty string (""), a single slash "/", or any path string.
+	 * <p>
+	 * Non-null.
+	 */
+	String pathname;
+
+	/**
+	 * Returns the URL's query (including the leading "?" if non-empty).
+	 * <p>
+	 * Non-null (empty string if empty).
+	 */
+	String search;
+
+	/**
+	 * Returns the URL's fragment (includes leading "#" if non-empty)
+	 * <p>
+	 * Non-null (empty string if empty).
+	 */
+	String hash;
+
+}
 
 abstract class AbstractServerMessage { }
 
 class INIT_OK extends AbstractServerMessage {
+	required int minRequestedCommands = 5;
+	required int maxRequestedCommands = 20;
+	required int sentEventsBufferSize = 500;
+	required long keepaliveInterval = 25000;
 }
 
 class INIT_NOK extends AbstractServerMessage {
-	required enum {SESSION_NOT_FOUND} reason;
+	required UiSessionClosingReason reason;
 }
 
 class REINIT_OK extends AbstractServerMessage {
@@ -93,18 +170,39 @@ class REINIT_OK extends AbstractServerMessage {
 }
 
 class REINIT_NOK extends AbstractServerMessage {
-    required enum {SESSION_NOT_FOUND, COMMAND_ID_NOT_FOUND} reason;
+    required UiSessionClosingReason reason;
 }
 
-class SERVER_ERROR extends AbstractServerMessage {
-    required enum {
-		SESSION_NOT_FOUND,
-		EXCEPTION,
-		CMD_REQUEST_TOO_LARGE // the client is requesting a too high amount of commands
-    } reason;
+class PING extends AbstractServerMessage { // Actively request a keepalive message from the client.
+}
+
+class SESSION_CLOSED extends AbstractServerMessage {
+    required UiSessionClosingReason reason;
     String message;
 }
 
+enum UiSessionClosingReason {
+	// EXPIRED
+	SESSION_NOT_FOUND,    			// reacting to unknown client
+	SESSION_TIMEOUT,      			// actively sent by server
+	TERMINATED_BY_CLIENT, 			// got leaving beacon
+
+	// ERROR
+	SERVER_SIDE_ERROR,    			// every uncaught exception on the server side within the client's SessionContext...
+	COMMANDS_OVERFLOW,    			// server-side command queue filled up
+	REINIT_COMMAND_ID_NOT_FOUND, 	// server did not find the command id the client would like to resume at
+	CMD_REQUEST_TOO_LARGE, 			// the client is requesting a too high amount of commands
+	WRONG_TEAMAPPS_VERSION,          // The client is connecting with another teamapps version than the server serves.
+
+	// TERMINATED
+	TERMINATED_BY_APPLICATION 		// SessionContext.destroy() called
+}
+
 class MULTI_CMD extends AbstractServerMessage {
-    required List<Object> cmds; // the CMS class does not get generated!
+    required List<Object> cmds; // the CMD class does not get generated!
+}
+
+class QUERY_RESULT extends AbstractServerMessage {
+    required int queryId;
+    required Object result;
 }
diff --git a/teamapps-ui-api/src/main/dto/Script.dto b/teamapps-ui-api/src/main/dto/Script.dto
new file mode 100644
index 000000000..b99d4d54e
--- /dev/null
+++ b/teamapps-ui-api/src/main/dto/Script.dto
@@ -0,0 +1,24 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+class UiScript extends UiComponent {
+    required String script;
+
+    command callFunction(String name, List<Object> parameters);
+}
diff --git a/teamapps-ui-api/src/main/dto/UiAbsoluteLayout.dto b/teamapps-ui-api/src/main/dto/UiAbsoluteLayout.dto
index 4147f50c4..d468d54b8 100644
--- a/teamapps-ui-api/src/main/dto/UiAbsoluteLayout.dto
+++ b/teamapps-ui-api/src/main/dto/UiAbsoluteLayout.dto
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ui-api/src/main/dto/UiAnimation.dto b/teamapps-ui-api/src/main/dto/UiAnimation.dto
index 1269df74f..01ffe4778 100644
--- a/teamapps-ui-api/src/main/dto/UiAnimation.dto
+++ b/teamapps-ui-api/src/main/dto/UiAnimation.dto
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,40 +17,37 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-enum UiMobileLayoutAnimation {
-	NONE,
-	FORWARD,
-	BACKWARD,
-	FADE_ZOOM_IN, // TODO
-	FADE_ZOOM_OUT // TODO
-}
-
-enum UiComponentRevealAnimation {
-	NONE,
-	FADE_ZOOM_GROW,
-	FADE_ZOOM_SHRINK
-}
-
-
 enum UiEntranceAnimation {
-	LIGHTSPEED_IN,
+	BACK_IN_DOWN,
+	BACK_IN_LEFT,
+	BACK_IN_RIGHT,
+	BACK_IN_UP,
+
+	LIGHT_SPEED_IN_RIGHT,
+	LIGHT_SPEED_IN_LEFT,
+	JACK_IN_THE_BOX,
 	ROLL_IN,
+
 	ZOOM_IN,
 	ZOOM_IN_DOWN,
 	ZOOM_IN_LEFT,
 	ZOOM_IN_RIGHT,
 	ZOOM_IN_UP,
+
 	SLIDE_IN_UP,
 	SLIDE_IN_DOWN,
 	SLIDE_IN_LEFT,
 	SLIDE_IN_RIGHT,
+
 	ROTATE_IN,
 	ROTATE_IN_DOWNLEFT,
 	ROTATE_IN_DOWNRIGHT,
 	ROTATE_IN_UPLEFT,
 	ROTATE_IN_UPRIGHT,
+
 	FLIP_IN_X,
 	FLIP_IN_Y,
+
 	FADE_IN,
 	FADE_IN_DOWN,
 	FADE_IN_DOWNBIG,
@@ -60,33 +57,49 @@ enum UiEntranceAnimation {
 	FADE_IN_RIGHTBIG,
 	FADE_IN_UP,
 	FADE_IN_UPBIG,
+	FADE_IN_TOP_LEFT,
+	FADE_IN_TOP_RIGHT,
+	FADE_IN_BOTTOM_LEFT,
+	FADE_IN_BOTTOM_RIGHT,
+
 	BOUNCE_IN,
 	BOUNCE_IN_DOWN,
 	BOUNCE_IN_LEFT,
 	BOUNCE_IN_RIGHT,
-	BOUNCE_IN_UP
+	BOUNCE_IN_UP;
 }
 
 enum UiExitAnimation {
-	LIGHTSPEED_OUT,
+	BACK_OUT_DOWN,
+	BACK_OUT_LEFT,
+	BACK_OUT_RIGHT,
+	BACK_OUT_UP,
+
+	LIGHT_SPEED_OUT_RIGHT,
+	LIGHT_SPEED_OUT_LEFT,
 	ROLL_OUT,
 	HINGE,
+
 	ZOOM_OUT,
 	ZOOM_OUT_DOWN,
 	ZOOM_OUT_LEFT,
 	ZOOM_OUT_RIGHT,
 	ZOOM_OUT_UP,
+
 	SLIDE_OUT_UP,
 	SLIDE_OUT_DOWN,
 	SLIDE_OUT_LEFT,
 	SLIDE_OUT_RIGHT,
+
 	ROTATE_OUT,
 	ROTATE_OUT_DOWNLEFT,
 	ROTATE_OUT_DOWNRIGHT,
 	ROTATE_OUT_UPLEFT,
 	ROTATE_OUT_UPRIGHT,
+
 	FLIP_OUT_X,
 	FLIP_OUT_Y,
+
 	FADE_OUT,
 	FADE_OUT_DOWN,
 	FADE_OUT_DOWNBIG,
@@ -96,9 +109,100 @@ enum UiExitAnimation {
 	FADE_OUT_RIGHTBIG,
 	FADE_OUT_UP,
 	FADE_OUT_UPBIG,
+	FADE_OUT_TOP_LEFT,
+	FADE_OUT_TOP_RIGHT,
+	FADE_OUT_BOTTOM_RIGHT,
+	FADE_OUT_BOTTOM_LEFT,
+
 	BOUNCE_OUT,
 	BOUNCE_OUT_DOWN,
 	BOUNCE_OUT_LEFT,
 	BOUNCE_OUT_RIGHT,
-	BOUNCE_OUT_UP
+	BOUNCE_OUT_UP;
+}
+
+enum UiRepeatableAnimation {
+	BOUNCE,
+	FLASH,
+	PULSE,
+	RUBBER_BAND,
+	SHAKE_X,
+	SHAKE_Y,
+	HEAD_SHAKE,
+	SWING,
+	TADA,
+	WOBBLE,
+	JELLO,
+	HEART_BEAT,
+	FLIP,
+
+	// custom
+	BLINK,
+	BLINK_SUBTLE
+}
+
+enum UiPageTransition {
+	MOVE_TO_LEFT_VS_MOVE_FROM_RIGHT,
+	MOVE_TO_RIGHT_VS_MOVE_FROM_LEFT,
+	MOVE_TO_TOP_VS_MOVE_FROM_BOTTOM,
+	MOVE_TO_BOTTOM_VS_MOVE_FROM_TOP,
+	FADE_VS_MOVE_FROM_RIGHT,
+	FADE_VS_MOVE_FROM_LEFT,
+	FADE_VS_MOVE_FROM_BOTTOM,
+	FADE_VS_MOVE_FROM_TOP,
+	MOVE_TO_LEFT_FADE_VS_MOVE_FROM_RIGHT_FADE,
+	MOVE_TO_RIGHT_FADE_VS_MOVE_FROM_LEFT_FADE,
+	MOVE_TO_TOP_FADE_VS_MOVE_FROM_BOTTOM_FADE,
+	MOVE_TO_BOTTOM_FADE_VS_MOVE_FROM_TOP_FADE,
+	SCALE_DOWN_VS_MOVE_FROM_RIGHT,
+	SCALE_DOWN_VS_MOVE_FROM_LEFT,
+	SCALE_DOWN_VS_MOVE_FROM_BOTTOM,
+	SCALE_DOWN_VS_MOVE_FROM_TOP,
+	SCALE_DOWN_VS_SCALE_UP_DOWN,
+	SCALE_DOWN_UP_VS_SCALE_UP,
+	MOVE_TO_LEFT_VS_SCALE_UP,
+	MOVE_TO_RIGHT_VS_SCALE_UP,
+	MOVE_TO_TOP_VS_SCALE_UP,
+	MOVE_TO_BOTTOM_VS_SCALE_UP,
+	SCALE_DOWN_CENTER_VS_SCALE_UP_CENTER,
+	ROTATE_RIGHT_SIDE_FIRST_VS_MOVE_FROM_RIGHT,
+	ROTATE_LEFT_SIDE_FIRST_VS_MOVE_FROM_LEFT,
+	ROTATE_TOP_SIDE_FIRST_VS_MOVE_FROM_TOP,
+	ROTATE_BOTTOM_SIDE_FIRST_VS_MOVE_FROM_BOTTOM,
+	FLIP_OUT_RIGHT_VS_FLIP_IN_LEFT,
+	FLIP_OUT_LEFT_VS_FLIP_IN_RIGHT,
+	FLIP_OUT_TOP_VS_FLIP_IN_BOTTOM,
+	FLIP_OUT_BOTTOM_VS_FLIP_IN_TOP,
+	ROTATE_FALL_VS_SCALE_UP,
+	ROTATE_OUT_NEWSPAPER_VS_ROTATE_IN_NEWSPAPER,
+	ROTATE_PUSH_LEFT_VS_MOVE_FROM_RIGHT,
+	ROTATE_PUSH_RIGHT_VS_MOVE_FROM_LEFT,
+	ROTATE_PUSH_TOP_VS_MOVE_FROM_BOTTOM,
+	ROTATE_PUSH_BOTTOM_VS_MOVE_FROM_TOP,
+	ROTATE_PUSH_LEFT_VS_ROTATE_PULL_RIGHT,
+	ROTATE_PUSH_RIGHT_VS_ROTATE_PULL_LEFT,
+	ROTATE_PUSH_TOP_VS_ROTATE_PULL_BOTTOM,
+	ROTATE_PUSH_BOTTOM_VS_ROTATE_PULL_TOP,
+	ROTATE_FOLD_LEFT_VS_MOVE_FROM_RIGHT_FADE,
+	ROTATE_FOLD_RIGHT_VS_MOVE_FROM_LEFT_FADE,
+	ROTATE_FOLD_TOP_VS_MOVE_FROM_BOTTOM_FADE,
+	ROTATE_FOLD_BOTTOM_VS_MOVE_FROM_TOP_FADE,
+	MOVE_TO_RIGHT_FADE_VS_ROTATE_UNFOLD_LEFT,
+	MOVE_TO_LEFT_FADE_VS_ROTATE_UNFOLD_RIGHT,
+	MOVE_TO_BOTTOM_FADE_VS_ROTATE_UNFOLD_TOP,
+	MOVE_TO_TOP_FADE_VS_ROTATE_UNFOLD_BOTTOM,
+	ROTATE_ROOM_LEFT_OUT_VS_ROTATE_ROOM_LEFT_IN,
+	ROTATE_ROOM_RIGHT_OUT_VS_ROTATE_ROOM_RIGHT_IN,
+	ROTATE_ROOM_TOP_OUT_VS_ROTATE_ROOM_TOP_IN,
+	ROTATE_ROOM_BOTTOM_OUT_VS_ROTATE_ROOM_BOTTOM_IN,
+	ROTATE_CUBE_LEFT_OUT_VS_ROTATE_CUBE_LEFT_IN,
+	ROTATE_CUBE_RIGHT_OUT_VS_ROTATE_CUBE_RIGHT_IN,
+	ROTATE_CUBE_TOP_OUT_VS_ROTATE_CUBE_TOP_IN,
+	ROTATE_CUBE_BOTTOM_OUT_VS_ROTATE_CUBE_BOTTOM_IN,
+	ROTATE_CAROUSEL_LEFT_OUT_VS_ROTATE_CAROUSEL_LEFT_IN,
+	ROTATE_CAROUSEL_RIGHT_OUT_VS_ROTATE_CAROUSEL_RIGHT_IN,
+	ROTATE_CAROUSEL_TOP_OUT_VS_ROTATE_CAROUSEL_TOP_IN,
+	ROTATE_CAROUSEL_BOTTOM_OUT_VS_ROTATE_CAROUSEL_BOTTOM_IN,
+	ROTATE_SIDES_OUT_VS_ROTATE_SIDES_IN,
+	ROTATE_SLIDE_OUT_VS_ROTATE_SLIDE_IN
 }
diff --git a/teamapps-ui-api/src/main/dto/UiAudioLevelIndicator.dto b/teamapps-ui-api/src/main/dto/UiAudioLevelIndicator.dto
new file mode 100644
index 000000000..a930e7fa4
--- /dev/null
+++ b/teamapps-ui-api/src/main/dto/UiAudioLevelIndicator.dto
@@ -0,0 +1,25 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+class UiAudioLevelIndicator extends UiComponent {
+    String deviceId;
+    int barWidth;
+    
+    command setDeviceId(String deviceId);
+}
diff --git a/teamapps-ui-api/src/main/dto/UiCalendar.dto b/teamapps-ui-api/src/main/dto/UiCalendar.dto
index 43bed0159..b7fc3370a 100644
--- a/teamapps-ui-api/src/main/dto/UiCalendar.dto
+++ b/teamapps-ui-api/src/main/dto/UiCalendar.dto
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -40,11 +40,18 @@ class UiCalendar extends UiComponent {
 	boolean showWeekNumbers = true;
 	int businessHoursStart = 8;
 	int businessHoursEnd = 17;
-	UiWeekDay firstDayOfWeek = null; // if set, overrides default set via UiConfiguration.firstDayOfWeek
+	UiWeekDay firstDayOfWeek = null;
 	List<UiWeekDay> workingDays = java.util.Arrays.asList(UiWeekDay.MONDAY, UiWeekDay.TUESDAY, UiWeekDay.WEDNESDAY, UiWeekDay.THURSDAY, UiWeekDay.FRIDAY);
-	UiColor tableHeaderBackgroundColor = new UiColor(255, 255, 255);
-    UiColor defaultBackgroundColor = new UiColor(154, 204, 228);
-    UiColor defaultBorderColor = new UiColor(154, 204, 228);
+	String tableHeaderBackgroundColor = "rgb(255, 255, 255)";
+    String defaultBackgroundColor = "rgb(154, 204, 228)";
+    String defaultBorderColor = "rgb(154, 204, 228)";
+
+    boolean navigateOnHeaderClicks = true;
+    int minYearViewMonthTileWidth = 175;
+    int maxYearViewMonthTileWidth = 0;
+
+    String locale;
+    String timeZoneId = "UTC";
 
 	command setViewMode(UiCalendarViewMode viewMode);
 	command setDisplayedDate(long date);
@@ -53,10 +60,15 @@ class UiCalendar extends UiComponent {
 	command setCalendarData(List<UiCalendarEventClientRecord> events);
 	command clearCalendar();
 	command registerTemplate(String id, UiTemplate template);
+	command setTimeZoneId(String timeZoneId);
 
 	event eventClicked(int eventId, boolean isDoubleClick);
 	event eventMoved(int eventId, long newStart, long newEnd); // fired when an event gets moved or resized
 	event dayClicked(long date, boolean isDoubleClick);
+	event intervalSelected(long start, long end, boolean allDay);
+	event dayHeaderClicked(long date);
+	event weekHeaderClicked(int year, int week, long weekStartDate);
+	event monthHeaderClicked(int year, int month, long monthStartDate);
 	event viewChanged(
 		UiCalendarViewMode viewMode,
 		long mainIntervalStart, long mainIntervalEnd, // the interval the calendar currently formally represents. (e.g. 1. January 2016 0:00 to 1 February 2016 0:00)
diff --git a/teamapps-ui-api/src/main/dto/UiChart.dto b/teamapps-ui-api/src/main/dto/UiChart.dto
index 0db08930c..d7fabef0c 100644
--- a/teamapps-ui-api/src/main/dto/UiChart.dto
+++ b/teamapps-ui-api/src/main/dto/UiChart.dto
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -61,7 +61,7 @@ enum UiChartLegendStyle {
 class UiChartNamedDataPoint {
 	required String name;
 	required double y;
-	UiColor color;
+	String color;
 }
 
 class UiChartDataPoint2D {
@@ -111,8 +111,8 @@ class UiChartDataPoint3D {
 //    required UiBasicChartSeriesType seriesType;
 //    AbstractUiChartData[] values; //values - represents the array of {x,y} data points
 //    String key; //key  - the name of the series.
-//    UiColor color;  //color - optional: choose your own line color.
-//    UiColor secondaryColor; //e.g. for area
+//    String color;  //color - optional: choose your own line color.
+//    String secondaryColor; //e.g. for area
 //    UiLineChartCurveType curveType;
 //    boolean showDataLabels; //data labels to be displayed for each point of data in the series
 //    String dashStyle; //e.g. "3, 3"
diff --git a/teamapps-ui-api/src/main/dto/UiChatView.dto b/teamapps-ui-api/src/main/dto/UiChatView.dto
index a90e821b9..4e8326c0e 100644
--- a/teamapps-ui-api/src/main/dto/UiChatView.dto
+++ b/teamapps-ui-api/src/main/dto/UiChatView.dto
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -18,19 +18,28 @@
  * =========================LICENSE_END==================================
  */
 class UiChatDisplay extends UiComponent {
-	List<UiChatMessage> messages;
-	boolean includesFirstMessage;
+	UiChatMessageBatch initialMessages;
+    boolean contextMenuEnabled = false;
+    String deletedMessageIcon;
 
-	command addChatMessages(List<UiChatMessage> chatMessages, boolean prepend, boolean includesFirstMessage);
-	command replaceChatMessages(List<UiChatMessage> chatMessages, boolean includesFirstMessage);
+	command addMessages(UiChatMessageBatch messages);
+	command updateMessage(UiChatMessage message);
+	command deleteMessage(int messageId);
+	command clearMessages(UiChatMessageBatch messages);
+    command closeContextMenu();
 
-	event previousMessagesRequested(String earliestKnownMessageId);
+	query requestPreviousMessages() returns UiChatMessageBatch;
+    query requestContextMenu(int chatMessageId) returns UiComponent*;
 }
 
 class UiChatInput extends UiComponent {
 	required String defaultFileIcon;
 	long maxBytesPerUpload = 5000000;
 	String uploadUrl = "/upload";
+	int messageLengthLimit = 10000;
+	boolean attachmentsEnabled;
+
+	command setAttachmentsEnabled(boolean attachmentsEnabled);
 
 	event messageSent(UiNewChatMessage message);
 	event uploadTooLarge(String fileItemUuid, String fileName, String mimeType, long sizeInBytes);
@@ -42,13 +51,19 @@ class UiChatInput extends UiComponent {
 	event fileItemRemoved(String fileItemUuid);
 }
 
+class UiChatMessageBatch {
+    required List<UiChatMessage> messages;
+    required boolean containsFirstMessage;
+}
+
 class UiChatMessage {
-	String id;
+	int id;
 	String userImageUrl;
 	String userNickname;
 	String text;
 	List<UiChatPhoto> photos;
 	List<UiChatFile> files;
+	boolean deleted;
 }
 
 class UiChatPhoto {
@@ -60,6 +75,7 @@ class UiChatPhoto {
 class UiChatFile {
 	String name;
 	String icon;
+	long length;
 	String thumbnailUrl;
 	String downloadUrl;
 }
diff --git a/teamapps-ui-api/src/main/dto/UiClientObject.dto b/teamapps-ui-api/src/main/dto/UiClientObject.dto
new file mode 100644
index 000000000..8ee4e7c83
--- /dev/null
+++ b/teamapps-ui-api/src/main/dto/UiClientObject.dto
@@ -0,0 +1,22 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+class UiClientObject {
+	@Referenceable String id;
+}
diff --git a/teamapps-ui-api/src/main/dto/UiClientRecord.dto b/teamapps-ui-api/src/main/dto/UiClientRecord.dto
index 03f079248..eebceb6ef 100644
--- a/teamapps-ui-api/src/main/dto/UiClientRecord.dto
+++ b/teamapps-ui-api/src/main/dto/UiClientRecord.dto
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -30,6 +30,7 @@ class UiHierarchicalClientRecord extends UiIdentifiableClientRecord {
 	Integer parentId;
 	boolean expanded;
 	boolean lazyChildren;
+	boolean selectable = true;
 }
 
 class UiTreeRecord extends UiHierarchicalClientRecord {
@@ -41,17 +42,19 @@ class UiComboBoxTreeRecord extends UiTreeRecord {
 }
 
 class UiCalendarEventClientRecord extends UiIdentifiableClientRecord {
-    String templateId; // null == use asString
+    String timeGridTemplateId;   // null = use default
+    String dayGridTemplateId;    // null = use default
+    String monthGridTemplateId;  // null = use default
+
 	long start;
     long end;
     boolean allDay;
     boolean allowDragOperations;
-    UiColor backgroundColor;
-    UiColor borderColor;
-    UiCalendarEventRenderingStyle rendering;
-}
 
-class UiMapMarkerClientRecord extends UiIdentifiableClientRecord {
-	UiMapLocation location;
-    String templateId; // null == use asString
+    String icon;
+    String title;
+
+    String backgroundColor;
+    String borderColor;
+    UiCalendarEventRenderingStyle rendering;
 }
diff --git a/teamapps-ui-api/src/main/dto/UiCollapsible.dto b/teamapps-ui-api/src/main/dto/UiCollapsible.dto
new file mode 100644
index 000000000..0faacad3b
--- /dev/null
+++ b/teamapps-ui-api/src/main/dto/UiCollapsible.dto
@@ -0,0 +1,31 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+class UiCollapsible extends UiComponent {
+    String icon;
+    String caption;
+    UiComponent* content;
+    boolean collapsed;
+
+    command setContent(UiComponent* content);
+    command setIconAndCaption(String icon, String caption);
+    command setCollapsed(boolean collapsed);
+
+    event collapseStateChanged(boolean collapsed);
+}
diff --git a/teamapps-ui-api/src/main/dto/UiComponent.dto b/teamapps-ui-api/src/main/dto/UiComponent.dto
index 218139e05..9575e2bcf 100644
--- a/teamapps-ui-api/src/main/dto/UiComponent.dto
+++ b/teamapps-ui-api/src/main/dto/UiComponent.dto
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,11 +17,15 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-class UiComponent {
-	@Referenceable required String id;
+class UiComponent extends UiClientObject {
+	String debuggingId;
 	boolean visible = true;
 	Dictionary<Dictionary<String>> stylesBySelector;
+	Dictionary<Dictionary<Boolean>> classNamesBySelector;
+	Dictionary<Dictionary<String>> attributesBySelector; // "__ta-deleted-attribute__" for removing attributes
 
 	command setVisible(boolean visible);
 	command setStyle(String selector, Dictionary<String> styles);
+	command setClassNames(String selector, Dictionary<Boolean> classNames);
+	command setAttributes(String selector, Dictionary<String> attributes);
 }
diff --git a/teamapps-ui-api/src/main/dto/UiConfig.dto b/teamapps-ui-api/src/main/dto/UiConfiguration.dto
similarity index 60%
rename from teamapps-ui-api/src/main/dto/UiConfig.dto
rename to teamapps-ui-api/src/main/dto/UiConfiguration.dto
index aca58f817..74001d0ca 100644
--- a/teamapps-ui-api/src/main/dto/UiConfig.dto
+++ b/teamapps-ui-api/src/main/dto/UiConfiguration.dto
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -18,17 +18,13 @@
  * =========================LICENSE_END==================================
  */
 class UiConfiguration {
-	String isoLanguage = "en"; //the language for the user, i.e. the UI localization
-	String timeZoneId = "Europe/Berlin"; //the time zone to use, if null use the system time zone
-	String dateFormat = "yyyy-MM-dd"; // see Java SimpleDateFormat. On the client side, this is translated to a moment.js pattern
-	String timeFormat = "HH:mm"; // see Java SimpleDateFormat. On the client side, this is translated to a moment.js pattern
-	UiWeekDay firstDayOfWeek = UiWeekDay.MONDAY; // for calendar views
-	String decimalSeparator = ".";
-	String thousandsSeparator = "";
-
+    String locale = "en"; // general locale of the UI
 	String themeClassName = null; // null = default theme, others: "theme-modern", ...
 	boolean optimizedForTouch = false; // @MB #mobile This needs to be set to true if you want touch-friendly ui. I separated this from the naive "inside UiMobileLayout" approach to be able to support touch interaction in normal-style layout (UiSplitPanes etc...)
-	String iconPath = "icons"; //URL to retrieve icons, 16x16 icons are retrieved as path/16/, 32x32 icons path/32/ etc.
+	ClosedSessionHandlingType closedSessionHandling;
 }
 
-
+enum ClosedSessionHandlingType {
+    MESSAGE_WINDOW,
+    REFRESH_PAGE
+}
diff --git a/teamapps-ui-api/src/main/dto/UiContextMenu.dto b/teamapps-ui-api/src/main/dto/UiContextMenu.dto
index cec53d1fc..c20ce857a 100644
--- a/teamapps-ui-api/src/main/dto/UiContextMenu.dto
+++ b/teamapps-ui-api/src/main/dto/UiContextMenu.dto
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ui-api/src/main/dto/UiDateTimeFormatDescriptor.dto b/teamapps-ui-api/src/main/dto/UiDateTimeFormatDescriptor.dto
new file mode 100644
index 000000000..f0b40b5b2
--- /dev/null
+++ b/teamapps-ui-api/src/main/dto/UiDateTimeFormatDescriptor.dto
@@ -0,0 +1,77 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+class UiDateTimeFormatDescriptor {
+
+	// either dateStyle and/or timeStyle can be set, or the other fields. Both does not work. Exception: hourCycle
+	UiFullLongMediumShortType dateStyle;
+	UiFullLongMediumShortType timeStyle;
+
+	Integer fractionalSecondDigits;
+	UiDayPeriodType dayPeriod;
+	UiHourCycleType hourCycle;
+
+	UiLongShortNarrowType weekday;
+	UiLongShortNarrowType era;
+	UiNumericType year;
+	UiNumericOrLongShortNarrowType month;
+	UiNumericType day;
+	UiNumericType hour;
+	UiNumericType minute;
+	UiNumericType second;
+}
+
+enum UiDayPeriodType {
+    NARROW = "narrow",
+    SHORT = "short",
+    LONG = "long";
+}
+
+enum UiHourCycleType {
+    H11 = "h11", // 0-11
+    H12 = "h12", // 1-12
+    H23 = "h23", // 0-23
+    H24 = "h24"; // 1-24
+}
+
+enum UiFullLongMediumShortType {
+    FULL = "full",
+    LONG = "long",
+    MEDIUM = "medium",
+    SHORT = "short";
+}
+
+enum UiLongShortNarrowType {
+    LONG = "long",
+    SHORT = "short",
+    NARROW = "narrow";
+}
+
+enum UiNumericType {
+    NUMERIC = "numeric",
+    TWO_DIGIT = "2-digit";
+}
+
+enum UiNumericOrLongShortNarrowType {
+    NUMERIC = "numeric",
+    TWO_DIGIT = "2-digit",
+    LONG = "long",
+    SHORT = "short",
+    NARROW = "narrow";
+}
diff --git a/teamapps-ui-api/src/main/dto/UiDiv.dto b/teamapps-ui-api/src/main/dto/UiDiv.dto
new file mode 100644
index 000000000..1e0a1ce7e
--- /dev/null
+++ b/teamapps-ui-api/src/main/dto/UiDiv.dto
@@ -0,0 +1,24 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+class UiDiv extends UiComponent {
+    UiComponent* content;
+
+    command setContent(UiComponent* content);
+}
diff --git a/teamapps-ui-api/src/main/dto/UiDocumentViewer.dto b/teamapps-ui-api/src/main/dto/UiDocumentViewer.dto
index a2c0c34de..c7851b2d0 100644
--- a/teamapps-ui-api/src/main/dto/UiDocumentViewer.dto
+++ b/teamapps-ui-api/src/main/dto/UiDocumentViewer.dto
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ui-api/src/main/dto/UiField.dto b/teamapps-ui-api/src/main/dto/UiField.dto
deleted file mode 100644
index a251f860a..000000000
--- a/teamapps-ui-api/src/main/dto/UiField.dto
+++ /dev/null
@@ -1,454 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-enum UiFieldEditingMode {
-	EDITABLE,
-	EDITABLE_IF_FOCUSED, // UiGridForm and UiCompositeField only!!
-	DISABLED,
-	READONLY
-}
-
-abstract class UiField extends UiComponent {
-	UiFieldEditingMode editingMode = UiFieldEditingMode.EDITABLE;
-	Object value;
-	List<UiFieldMessage> fieldMessages;
-
-	event valueChanged(Object value);
-
-	command setEditingMode(UiFieldEditingMode editingMode);
-	command setValue(Object value);
-    command focus();
-	command setFieldMessages(List<UiFieldMessage> fieldMessages);
-}
-
-interface UiTextInputHandlingField {
-	event textInput(String enteredString);
-	event specialKeyPressed(UiSpecialKey key); // CAUTION: unfiltered at the moment. E.g. ComboBox selection via ENTER or TextField reset via ESCAPE
-}
-
-enum UiSpecialKey {
-	ENTER, ESCAPE
-}
-
-class UiComponentField extends UiField {
-	UiComponent* component;
-	int width; // 0 = the width will be determined by the component's content and context
-	int height; // 0 = the height will be determined by the component's content and context
-	UiBorder border;
-	UiColor backgroundColor = new UiColor(255, 255, 255);
-
-	command setComponent(UiComponent* component);
-	command setSize(int width, int height);
-	command setBorder(UiBorder border);
-	command setBackgroundColor(UiColor backgroundColor);
-}
-
-class UiTextField extends UiField implements UiTextInputHandlingField {
-	int maxCharacters; //if > 0, do not allow to enter more than this number of characters
-	boolean showClearButton;
-	String emptyText;
-
-	command setMaxCharacters(int maxCharacters);
-	command setShowClearButton(boolean showClearButton);
-	command setEmptyText(String emptyText);
-}
-
-class UiPasswordField extends UiTextField {
-	boolean sendValueAsMd5;
-	String salt; // if sendValueAsMd5 == true and salt != null, then submit md5(salt + md5(fieldValue))
-
-	command setSendValueAsMd5(boolean sendValueAsMd5);
-	command setSalt(String salt);
-}
-
-class UiMultiLineTextField extends UiTextField {
-	int minHeight = 150;
-	int maxHeight = 150;
-
-	command setMinHeight(int minHeight);
-	command setMaxHeight(int maxHeight);
-	command append(String s, boolean scrollToBottom);
-}
-
-enum UiToolbarVisibilityMode {
-	HIDDEN, VISIBLE, VISIBLE_IF_FOCUSED
-}
-
-class UiRichTextEditor extends UiField implements UiTextInputHandlingField {
-	String uploadUrl = "/upload";
-	long maxImageFileSizeInBytes = 5000000;
-	UiToolbarVisibilityMode toolbarVisibilityMode = UiToolbarVisibilityMode.VISIBLE_IF_FOCUSED;
-	int minHeight = 150;
-	int maxHeight = 150;
-
-	event imageUploadTooLarge(String fileName, String mimeType, long sizeInBytes);
-	event imageUploadStarted(String fileName, String mimeType, long sizeInBytes, int incompleteUploadsCount);
-	event imageUploadSuccessful(String fileUuid, String name, String mimeType, long sizeInBytes, int incompleteUploadsCount);
-	event imageUploadFailed(String name, String mimeType, long sizeInBytes, int incompleteUploadsCount);
-
-	command setMinHeight(int minHeight);
-	command setMaxHeight(int maxHeight);
-	command setUploadUrl(String uploadUrl);
-	command setMaxImageFileSizeInBytes(long maxImageFileSizeInBytes);
-	command setUploadedImageUrl(String fileUuid, String url);
-	command setToolbarVisibilityMode(UiToolbarVisibilityMode toolbarVisibilityMode);
-}
-
-class UiDisplayField extends UiField {
-	boolean showBorder; //if true, show a border like for text fields
-	boolean showHtml; //if true, treat the value as valid HTML
-	boolean removeStyleTags = true;
-
-	command setShowBorder(boolean showBorder);
-	command setShowHtml(boolean showHtml);
-	command setRemoveStyleTags(boolean removeStyleTags);
-}
-
-class UiLabel extends UiField {
-	required String caption; // this is only displayed if value == null
-	String icon;
-	UiField* targetField; // if != null, this is the field that gets focused when this label gets clicked. This label also appears/disappears synchronously to its target field
-
-	event clicked();
-
-	command setCaption(String caption);
-	command setIcon(String icon);
-	command setTargetField(UiField* targetField);
-}
-
-// StringValue
-class UiImageField extends UiField {
-	int width; // 0 = the width will be determined by the component's content and context
-	int height; // 0 = the height will be determined by the component's content and context
-    UiBorder border;
-    UiShadow shadow;
-	UiImageSizing imageSizing = UiImageSizing.CONTAIN;
-
-	command setSize(int width, int height);
-	command setBorder(UiBorder border);
-	command setShadow(UiShadow shadow);
-	command setImageSizing(UiImageSizing imageSizing );
-}
-
-class UiNumberField extends UiField implements UiTextInputHandlingField {
-	int precision = -1; //if == 0 then don't show fractions, if < 0 then show the available precision of the current number
-	String emptyText;
-	boolean showClearButton;
-	double minValue = Double.MIN_VALUE;
-    double maxValue = Double.MAX_VALUE;
-    UiNumberFieldSliderMode sliderMode = UiNumberFieldSliderMode.DISABLED;
-    double sliderStep = 1;
-    boolean commitOnSliderChange = true;
-
-    command setMinValue(double min);
-    command setMaxValue(double max);
-    command setSliderMode(UiNumberFieldSliderMode sliderMode);
-    command setSliderStep(double step);
-    command setCommitOnSliderChange(boolean commitOnSliderChange);
-	command setPrecision(int displayPrecision);
-	command setEmptyText(String emptyText);
-	command setShowClearButton(boolean showClearButton);
-}
-
-enum UiNumberFieldSliderMode {
-	DISABLED, VISIBLE, VISIBLE_IF_FOCUSED
-}
-
-// the read-only view (e.g. in a table) shows the currency indicator as part of the value text (e.g. "23.00 EUR" or "23.50 €")
-//the value is always a long in cents for accuracy
-class UiCurrencyField extends UiField implements UiTextInputHandlingField {
-	String defaultCurrencyCode; // the selected or default currency code (ISO 4217 - e.g. "USD", "EUR"). Nullable. However, the user has to select a currency.
-	List<String> currencyCodeList; //list of ISO 4217 currencies - e.g. "USD", "EUR", etc. to be displayed as dropdown selection if available
-	int precision = 2;
-	boolean showCurrencyBeforeAmount; // If true, the currency indicator is on the left of the amount. If false, it is on the right of the amount.
-	boolean showCurrencySymbol; // If false, show "EUR", "USD", etc. as selected value of dropdown button. If true, show "$" for "USD", "€" for "EUR". The dopdown list shows always both ISO code and currency symbol (e.g. "$ (USD)" or "€ (EUR)"). Use "¤" as generic symbol (as defined in ISO standard).
-	boolean alphaKeysQueryForCurrency = true; //if true a hit on e will query all currencies starting with e; autocomplete (TODO) should be activated; field will act like a combobox -> if the value is 10.50 and typing u it should display the sugestion list containing 10.50 USD or 10.50 $ (USD)
-
-	command setDefaultCurrencyCode(String defaultCurrencyCode);
-	command setCurrencyCodeList(List<String> currencyCodeList);
-	command setShowCurrencyBeforeAmount(boolean showCurrencyBeforeAmount);
-	command setShowCurrencySymbol(boolean showCurrencySymbol);
-}
-
-/**
-TODO:
-FORM
-  uploaded files section:
-	- custom items (UiTextCell) with remove button ("x")
-	- floating or list style
-	- on click (server side handling)
-		a) download file
-		b) render dropdown underneath the file // how??
-  files to be uploaded section:
-	- same as currently implemented
-  add files button:
-	- same as currently implemented
-	- set color, icon, text, height
-	- hide when max number of files reached
-LIST
-  uploaded files section:
-	- custom items (UiTextCell)
-	- always floating
-	- on click (server side handling)
-		a) download file
-		b) render dropdown underneath the file
-TABLE (editable mode)
-  uploaded files section:
-	- same as list
-	- on click open UiWindow (non-modal?) with a form containing only the UiFileField.
-  DnD:
-	- only if not performance breaking --> opens window
- */
-class UiFileField extends UiField {
-	required UiTemplate itemTemplate; // template for rendering the uploaded files section. All data for this section comes from the server (field value)
-	long maxBytesPerFile = 5000000;
-	String uploadUrl = "/upload"; // May point anywhere.
-	String fileTooLargeMessage = "File too large!";
-	String uploadErrorMessage = "Error while transmitting file...";
-	UiFileFieldDisplayType displayType = UiFileFieldDisplayType.LIST;
-	int maxFiles; // the max number of files to be uploaded in total for this field
-	required UiTemplate uploadButtonTemplate;
-	required Object uploadButtonData;
-	boolean showEntriesAsButtonsOnHover = false;
-
-    event uploadTooLarge(String fileItemUuid, String fileName, String mimeType, long sizeInBytes);
-	event uploadStarted(String fileItemUuid, String fileName, String mimeType, long sizeInBytes, int incompleteUploadsCount);
-	event uploadCanceled(String fileItemUuid, String fileName, String mimeType, long sizeInBytes, int incompleteUploadsCount);
-	event uploadFailed(String fileItemUuid, String fileName, String mimeType, long sizeInBytes, int incompleteUploadsCount);
-	event uploadSuccessful(String fileItemUuid, String uploadedFileUuid, String fileName, String mimeType, long sizeInBytes, int incompleteUploadsCount);
-	event fileItemClicked(int clientId);
-	event fileItemRemoveButtonClicked(int clientId);
-
-	command replaceFileItem(String fileItemUuid, UiIdentifiableClientRecord data);
-	command setItemTemplate(UiTemplate itemTemplate);
-	command setMaxBytesPerFile(long maxBytesPerFile);
-	command setUploadUrl(String uploadUrl);
-	command setDisplayType (UiFileFieldDisplayType displayType);
-	command setMaxFiles(int maxFiles);
-	command setUploadButtonTemplate(UiTemplate uploadButtonTemplate);
-    command setUploadButtonData(Object uploadButtonData);
-    command setShowEntriesAsButtonsOnHover(boolean showEntriesAsButtonsOnHover);
-}
-
-enum UiFileFieldDisplayType {
-	LIST, FLOATING
-}
-
-class UiCheckBox extends UiField {
-	String caption; // displayed on the right side of the checkbox
-	UiColor backgroundColor = new UiColor(255, 255, 255);
-	UiColor checkColor = new UiColor(70, 70, 70);
-	UiColor borderColor = new UiColor(123, 123, 123);
-
-	command setCaption(String caption);
-	command setBackgroundColor(UiColor backgroundColor);
-	command setCheckColor(UiColor checkColor);
-	command setBorderColor(UiColor borderColor);
-}
-
-abstract class AbstractUiTimeField extends UiField implements UiTextInputHandlingField {
-    boolean showDropDownButton = true;
-    String timeFormat = null; // if null, UiConfiguration.timeFormat applies
-    boolean showClearButton;
-
-    command setShowDropDownButton(boolean showDropDownButton);
-    command setTimeFormat(String timeFormat);
-    command setShowClearButton(boolean showClearButton);
-}
-
-class UiLocalTimeField extends AbstractUiTimeField {
-}
-
-class UiInstantTimeField extends AbstractUiTimeField {
-	String timeZoneId = null; // if null, UiConfiguration.timeZoneId applies
-
-	command setTimeZoneId(String timeZoneId);
-}
-
-abstract class AbstractUiDateField extends UiField implements UiTextInputHandlingField {
-    boolean showDropDownButton = true;
-	boolean favorPastDates = false;
-	String dateFormat = null; // if null, UiConfiguration.dateFormat applies
-	boolean showClearButton;
-
-	command setShowDropDownButton(boolean showDropDownButton);
-	command setFavorPastDates(boolean favorPastDates);
-	command setDateFormat(String dateFormat);
-	command setShowClearButton(boolean showClearButton);
-}
-
-class UiLocalDateField extends AbstractUiDateField {
-}
-
-class UiInstantDateField extends AbstractUiDateField {
-	String timeZoneId = null; // if null, UiConfiguration.timeZoneId applies
-
-	command setTimeZoneId(String timeZoneId);
-}
-
-abstract class AbstractUiDateTimeField extends UiField {
-	boolean showDropDownButton = true;
-	boolean favorPastDates = false; // TODO!!!
-	String dateFormat = null; // if null, UiConfiguration.dateFormat applies
-	String timeFormat = null; // if null, UiConfiguration.timeFormat applies
-
-	command setShowDropDownButton(boolean showDropDownButton);
-	command setFavorPastDates(boolean favorPastDates);
-	command setDateFormat(String dateFormat);
-	command setTimeFormat(String timeFormat);
-}
-
-class UiLocalDateTimeField extends AbstractUiDateTimeField {
-}
-
-class UiInstantDateTimeField extends AbstractUiDateTimeField {
-	String timeZoneId = null; // if null, UiConfiguration.timeZoneId applies
-
-	command setTimeZoneId(String timeZoneId);
-}
-
-class UiButton extends UiField {
-	required UiTemplate template;
-	required Object templateRecord;
-
-	int minDropDownWidth = 450;
-	int minDropDownHeight = 200;
-	boolean openDropDownIfNotSet = false;
-	UiComponent* dropDownComponent;
-
-	command setTemplate(UiTemplate template, Object templateRecord);
-	command setTemplateRecord(Object templateRecord);
-	command setDropDownSize(int minDropDownWidth, int minDropDownHeight);
-	command setOpenDropDownIfNotSet(boolean openDropDownIfNotSet);
-	command setDropDownComponent(UiComponent* dropDownComponent);
-
-	event dropDownOpened();
-}
-
-/**
-Sub-fields' are evaluated directly against the main Object of the Form/Table.
-*/
-class UiCompositeField extends UiField { // TODO #ux
-	required List<UiColumnDefinition> columnDefinitions;
-    required List<Integer> rowHeights;
-    required List<UiCompositeSubField> subFields;
-    int horizontalCellSpacing = 2;
-    int verticalCellSpacing = 2;
-    int padding = 0;
-    boolean drawFieldBorders;
-}
-
-class UiColumnDefinition {
-	required float width; // values <1 are treated relative widths. Values >= 1 are treated fixed/absolute widths in px.
-	required int minWidth;
-}
-
-class UiCompositeSubField {
-	required String propertyName;
-	required int row;
-	required int col;
-	required UiField* field;
-	int rowSpan = 1;
-	int colSpan = 1;
-	int tabIndex = 0; // tab-index within the UiCompositeField*. Lower values are first. Default is 0. <0: focusable but not reachable via tab; 0: focusable and reachable via tab, ordered by its position; >0: focusable, order defined by tabindex
-	String visibilityPropertyName; // nullable; name of a boolean field in the record data which determines whether this subField is to be displayed. If multiple visible subfields are in the same position, the last one must be shown and the others are hidden AND a warning must be written to the console.
-}
-
-/**********************************************************************************************************************
-*
-*                                                    C O M B O B O X
-*
-***********************************************************************************************************************/
-
-
-enum UiTextMatchingMode {
-	PREFIX,
-	PREFIX_WORD,
-	CONTAINS,
-	SIMILARITY
-}
-
-class UiComboBox extends UiField implements UiTextInputHandlingField {
-	Dictionary<UiTemplate> templates;
-	List<UiComboBoxTreeRecord> staticData; //if available, use this as data source
-	List<String> staticDataMatchPropertyNames; // Fields that are matched against if staticData is specified. If null, use "asString" property
-	UiTextMatchingMode textMatchingMode = UiTextMatchingMode.CONTAINS; // only filter on client-side if staticList != null. SIMILARITY_MATCH allows levenshtein distance of 3
-
-	boolean showDropDownButton = true;
-	boolean showDropDownAfterResultsArrive = false;
-	boolean highlightFirstResultEntry = true;
-	boolean showHighlighting; // TODO highlight any line of the template, but only corresponding to the textMatchingMode
-	boolean autoComplete = true; // if true, by typing any letter, the first matching will be selected (keeping all not yet entered letters int the text box selected)
-	int textHighlightingEntryLimit = 100;
-	boolean allowAnyText;
-	boolean showClearButton;
-	boolean animate;
-	boolean showExpanders = true;
-
-	event lazyChildDataRequested(int parentId);
-
-	command setDropDownData(List<UiComboBoxTreeRecord> data);
-	command setChildNodes(int parentId, List<UiComboBoxTreeRecord> children);
-	command registerTemplate(String id, UiTemplate template);
-	command replaceFreeTextEntry(String freeText, UiComboBoxTreeRecord newEntry);
-}
-
-class UiTagComboBox extends UiComboBox {
-	int maxEntries; // if 0, then the list is unbounded
-	enum {SINGLE_LINE, MULTI_LINE, SINGLE_TAG_PER_LINE} wrappingMode = WrappingMode.MULTI_LINE;
-	boolean distinct = true; // if true, do not allow the same entry to be selected multiple times!
-}
-
-//// the read-only view (e.g. in a table) shows the currency indicator as part of the value text (e.g. "23.00 EUR" or "23.50 €")
-////the value is always a long in cents for accuracy
-//class UiUnitBox extends UiComboBox {
-//	List<Object> staticData; //list of ISO 4217 currencies - e.g. "USD", "EUR", etc. to be displayed as dropdown selection if available
-//	int precision = 2;
-//	boolean showUnitBeforeAmount; // If true, the currency indicator is on the left of the amount. If false, it is on the right of the amount.
-//	boolean alphaKeysQueryForCurrency = true; //if true a hit on e will query all currencies starting with e; autocomplete (TODO) should be activated; field will act like a combobox -> if the value is 10.50 and typing u it should display the sugestion list containing 10.50 USD or 10.50 $ (USD)
-//
-//	command setDropDownData(List<Object> data);
-//	command setShowUnitBeforeAmount(boolean showCurrencyBeforeAmount);
-//}
-
-class UiSlider extends UiField {
-	double min = 0;
-	double max = 100;
-	double step = 1;
-	int displayedDecimals = 0;
-	UiColor selectionColor = new UiColor(51, 122, 183);
-	String tooltipPrefix;
-	String tooltipPostfix;
-	boolean humanReadableFileSize = false;
-
-	command setMin(double min);
-	command setMax(double max);
-	command setStep(double step);
-	command setDisplayedDecimals(int displayedDecimals);
-	command setSelectionColor(UiColor selectionColor);
-	command setTooltipPrefix(String tooltipPrefi);
-	command setTooltipPostfix(String tooltipPostfi);
-	command setHumanReadableFileSize(boolean humanReadableFileSize);
-}
-
-class UiColorPicker extends UiField {
-	UiColor defaultColor = new UiColor(0, 0, 0);
-	String saveButtonCaption = "Save";
-    String clearButtonCaption = "Clear";
-}
diff --git a/teamapps-ui-api/src/main/dto/UiFieldGroup.dto b/teamapps-ui-api/src/main/dto/UiFieldGroup.dto
new file mode 100644
index 000000000..27297185c
--- /dev/null
+++ b/teamapps-ui-api/src/main/dto/UiFieldGroup.dto
@@ -0,0 +1,24 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+class UiFieldGroup extends UiComponent {
+	List<UiField*> fields;
+
+	command setFields(List<UiField*> fields);
+}
diff --git a/teamapps-ui-api/src/main/dto/UiFieldMessage.dto b/teamapps-ui-api/src/main/dto/UiFieldMessage.dto
index 5b3b2d6fb..a6333a521 100644
--- a/teamapps-ui-api/src/main/dto/UiFieldMessage.dto
+++ b/teamapps-ui-api/src/main/dto/UiFieldMessage.dto
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ui-api/src/main/dto/UiFlexContainer.dto b/teamapps-ui-api/src/main/dto/UiFlexContainer.dto
index 1068f9946..a987e5407 100644
--- a/teamapps-ui-api/src/main/dto/UiFlexContainer.dto
+++ b/teamapps-ui-api/src/main/dto/UiFlexContainer.dto
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -22,39 +22,41 @@ class UiFlexContainer extends UiComponent {
 
 	UiCssFlexDirection flexDirection = UiCssFlexDirection.ROW;
 	UiCssAlignItems alignItems = UiCssAlignItems.STRETCH;
-	UiCssJustifyContent justifyContent = UiCssJustifyContent.FLEX_START;
+	UiCssJustifyContent justifyContent = UiCssJustifyContent.START;
+	String gap;
 
 	command addComponent(UiComponent* component);
 	command removeComponent(UiComponent* component);
 }
 
 enum UiCssFlexDirection {
-	ROW,
-    ROW_REVERSE,
-    COLUMN,
-    COLUMN_REVERSE,
-    INITIAL,
-    INHERIT
+	ROW = "row",
+    ROW_REVERSE = "row-reverse",
+    COLUMN = "column",
+    COLUMN_REVERSE = "column-reverse",
+    INITIAL = "initial",
+    INHERIT = "inherit"
 }
 
 enum UiCssAlignItems {
-	STRETCH,
-    CENTER,
-    FLEX_START,
-    FLEX_END,
-    BASELINE,
-    INITIAL,
-    INHERIT
+	STRETCH = "stretch",
+    CENTER = "center",
+    FLEX_START = "flex-start",
+    FLEX_END = "flex-end",
+    BASELINE = "baseline",
+    INITIAL = "initial",
+    INHERIT = "inherit"
 }
 
 enum UiCssJustifyContent {
-	FLEX_START,
-	FLEX_END,
-	CENTER,
-	SPACE_BETWEEN,
-	SPACE_AROUND,
-	INITIAL,
-	INHERIT
+	START = "flex-start",
+	END = "flex-end",
+	CENTER = "center",
+	SPACE_BETWEEN = "space-between",
+	SPACE_AROUND = "space-around",
+	SPACE_EVENLY = "space-evenly",
+	INITIAL = "initial",
+	INHERIT = "inherit"
 }
 
 	
diff --git a/teamapps-ui-api/src/main/dto/UiFloatingComponent.dto b/teamapps-ui-api/src/main/dto/UiFloatingComponent.dto
new file mode 100644
index 000000000..541033ce0
--- /dev/null
+++ b/teamapps-ui-api/src/main/dto/UiFloatingComponent.dto
@@ -0,0 +1,53 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+class UiFloatingComponent extends UiComponent {
+
+	UiComponent* containerComponent;
+	UiComponent* contentComponent;
+	int width; // 0 = full width, -1 = auto
+	int height; // 0 = full height, -1 = auto
+	int marginX;
+	int marginY;
+	UiFloatingComponentPosition position;
+
+    String backgroundColor;
+    String expanderHandleColor;
+
+    boolean collapsible = true;
+    boolean expanded = true;
+
+	command setContentComponent(UiComponent* contentComponent);
+	command setExpanded(boolean expanded);
+	command setPosition(UiFloatingComponentPosition position);
+	command setDimensions(int width, int height);
+	command setMargins(int marginX, int marginY);
+	command setBackgroundColor(String backgroundColor);
+	command setExpanderHandleColor(String expanderHandleColor);
+
+	event expandedOrCollapsed(boolean expanded);
+
+}
+
+enum UiFloatingComponentPosition {
+	TOP_LEFT = "top-left",
+	TOP_RIGHT = "top-right",
+	BOTTOM_LEFT = "bottom-left",
+	BOTTOM_RIGHT = "bottom-right"
+}
diff --git a/teamapps-ui-api/src/main/dto/UiGauge.dto b/teamapps-ui-api/src/main/dto/UiGauge.dto
index e1a04452c..0c995ae94 100644
--- a/teamapps-ui-api/src/main/dto/UiGauge.dto
+++ b/teamapps-ui-api/src/main/dto/UiGauge.dto
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ui-api/src/main/dto/UiGridForm.dto b/teamapps-ui-api/src/main/dto/UiGridForm.dto
index 07a4f0777..25134facf 100644
--- a/teamapps-ui-api/src/main/dto/UiGridForm.dto
+++ b/teamapps-ui-api/src/main/dto/UiGridForm.dto
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -18,14 +18,12 @@
  * =========================LICENSE_END==================================
  */
 class UiGridForm extends UiComponent {
-	required String recordTypeId;
-
-	required List<UiField*> fields;
+	required List<UiComponent*> fields;
 	required List<UiFormLayoutPolicy> layoutPolicies;
 
 	command updateLayoutPolicies(List<UiFormLayoutPolicy> layoutPolicies);
 	command setSectionCollapsed(String sectionId, boolean collapsed);
-	command addOrReplaceField(UiField* field);
+	command addOrReplaceField(UiComponent* field);
 
 	event sectionCollapsedStateChanged(String sectionId, boolean collapsed);
 }
@@ -44,7 +42,7 @@ class UiFormSection {
     UiSpacing padding;
     UiBorder border;
     UiShadow shadow;
-    UiColor backgroundColor;
+    String backgroundColor;
     boolean collapsible;
     boolean collapsed;
     boolean visible = true;
@@ -60,7 +58,7 @@ interface UiFormSectionPlacement extends UiGridPlacement {
 }
 
 class UiFormSectionFieldPlacement implements UiFormSectionPlacement {
-	required UiField* field;
+	required UiComponent* field;
 }
 
 class UiFormSectionFloatingFieldsPlacement implements UiFormSectionPlacement {
@@ -72,7 +70,7 @@ class UiFormSectionFloatingFieldsPlacement implements UiFormSectionPlacement {
 }
 
 class UiFormSectionFloatingField {
-	required UiField* field;
+	required UiComponent* field;
 	int minWidth;
 	int maxWidth;
 	int minHeight;
diff --git a/teamapps-ui-api/src/main/dto/UiGridLayout.dto b/teamapps-ui-api/src/main/dto/UiGridLayout.dto
index 8a8ef5884..99164cdb8 100644
--- a/teamapps-ui-api/src/main/dto/UiGridLayout.dto
+++ b/teamapps-ui-api/src/main/dto/UiGridLayout.dto
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -44,7 +44,7 @@ class UiGridLayout {
     UiSpacing padding;
     UiBorder border;
     UiShadow shadow;
-    UiColor backgroundColor;
+    String backgroundColor;
     int gridGap = 7;
     UiVerticalElementAlignment verticalAlignment = UiVerticalElementAlignment.STRETCH;
     UiHorizontalElementAlignment horizontalAlignment = UiHorizontalElementAlignment.STRETCH;
diff --git a/teamapps-ui-api/src/main/dto/UiGridTemplate.dto b/teamapps-ui-api/src/main/dto/UiGridTemplate.dto
index fd4962ec3..8a0ce0fbe 100644
--- a/teamapps-ui-api/src/main/dto/UiGridTemplate.dto
+++ b/teamapps-ui-api/src/main/dto/UiGridTemplate.dto
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -27,10 +27,14 @@ class UiGridTemplate implements UiTemplate {
     int maxHeight = 0;
     UiSpacing padding;
     int gridGap = 0;
+    String backgroundColor;
+    UiBorder border;
+    String ariaLabelProperty;
+    String titleProperty;
 }
 
 abstract class AbstractUiTemplateElement {
-	required String dataKey;
+	required String property;
     required int row;
     required int column;
     int rowSpan = 1;
@@ -38,7 +42,7 @@ abstract class AbstractUiTemplateElement {
     UiHorizontalElementAlignment horizontalAlignment = UiHorizontalElementAlignment.LEFT;
     UiVerticalElementAlignment verticalAlignment = UiVerticalElementAlignment.CENTER;
     UiSpacing margin;
-    UiColor backgroundColor; 
+    String backgroundColor;
 }
 
 class UiTextElement extends AbstractUiTemplateElement {
@@ -51,12 +55,14 @@ class UiTextElement extends AbstractUiTemplateElement {
 
 class UiBadgeElement extends UiTextElement {
 	// the badge background color is defined by the font background color. This only makes the element look like a badge.
-	UiColor borderColor;
+	String borderColor;
 }
 
 class UiFloatingElement extends AbstractUiTemplateElement {
 	required List<AbstractUiTemplateElement> elements;
 	boolean wrap;
+    UiCssAlignItems alignItems;
+    UiCssJustifyContent justifyContent;
 }
 
 class UiImageElement extends AbstractUiTemplateElement {
@@ -78,7 +84,7 @@ class UiIconElement extends AbstractUiTemplateElement {
 
 class UiGlyphIconElement extends AbstractUiTemplateElement {
 	required int size;
-	UiColor fontColor;
+	String fontColor;
 }
 
 enum UiHorizontalElementAlignment {
@@ -104,17 +110,9 @@ enum UiTextAlignment {
 
 // ========== Format =============
 
-@TypeScriptFactory
-class UiColor {
-	required int red;
-	required int green;
-	required int blue;
-	float alpha = 1f;
-}
-
 class UiFontStyle {
-	UiColor fontColor;
-	UiColor backgroundColor;
+	String fontColor;
+	String backgroundColor;
 	boolean bold;
 	boolean underline;
 	boolean italic;
@@ -143,7 +141,7 @@ class UiBorder {
 }
 
 class UiShadow {
-	required UiColor color;
+	required String color;
 	required float blur;
 	float offsetX;
 	float offsetY;
@@ -159,7 +157,7 @@ enum UiSizeType {
 
 class UiLine {
 	required float thickness;
-	required UiColor color;
+	required String color;
 	UiLineType type = UiLineType.SOLID;
 }
 
diff --git a/teamapps-ui-api/src/main/dto/UiHtmlTemplate.dto b/teamapps-ui-api/src/main/dto/UiHtmlTemplate.dto
new file mode 100644
index 000000000..72d221244
--- /dev/null
+++ b/teamapps-ui-api/src/main/dto/UiHtmlTemplate.dto
@@ -0,0 +1,22 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+class UiHtmlTemplate implements UiTemplate {
+	required String html;
+}
diff --git a/teamapps-ui-api/src/main/dto/UiHtmlView.dto b/teamapps-ui-api/src/main/dto/UiHtmlView.dto
new file mode 100644
index 000000000..71ee49e5b
--- /dev/null
+++ b/teamapps-ui-api/src/main/dto/UiHtmlView.dto
@@ -0,0 +1,29 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+class UiHtmlView extends UiComponent {
+	String html;
+
+	Dictionary<List<UiComponent*>> componentsByContainerElementSelector;
+	Dictionary<String> contentHtmlByContainerElementSelector;
+
+	command addComponent(String containerElementSelector, UiComponent* component, boolean clearContainer);
+	command removeComponent(UiComponent* component);
+	command setContentHtml(String containerElementSelector, String html);
+}
diff --git a/teamapps-ui-api/src/main/dto/UiIFrame.dto b/teamapps-ui-api/src/main/dto/UiIFrame.dto
index c919302f2..56d9449b2 100644
--- a/teamapps-ui-api/src/main/dto/UiIFrame.dto
+++ b/teamapps-ui-api/src/main/dto/UiIFrame.dto
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ui-api/src/main/dto/UiImageCropper.dto b/teamapps-ui-api/src/main/dto/UiImageCropper.dto
index fea8b67fb..45a10b136 100644
--- a/teamapps-ui-api/src/main/dto/UiImageCropper.dto
+++ b/teamapps-ui-api/src/main/dto/UiImageCropper.dto
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ui-api/src/main/dto/UiImageDisplay.dto b/teamapps-ui-api/src/main/dto/UiImageDisplay.dto
index 539548918..70840994b 100644
--- a/teamapps-ui-api/src/main/dto/UiImageDisplay.dto
+++ b/teamapps-ui-api/src/main/dto/UiImageDisplay.dto
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ui-api/src/main/dto/UiInfiniteItemView.dto b/teamapps-ui-api/src/main/dto/UiInfiniteItemView.dto
index 4b7b17bcf..437c92cd3 100644
--- a/teamapps-ui-api/src/main/dto/UiInfiniteItemView.dto
+++ b/teamapps-ui-api/src/main/dto/UiInfiniteItemView.dto
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -24,8 +24,11 @@ class UiInfiniteItemView extends UiComponent {
 	List<UiIdentifiableClientRecord> data;
 	int totalNumberOfRecords = 0;
 	int horizontalItemMargin = 0;
+	boolean autoHeight = false; // make this component set its own height using totalNumberOfRecords! Use with max-height to preserve infinite scrolling!
 	UiItemJustification itemJustification = UiItemJustification.LEFT;
 	UiVerticalItemAlignment verticalItemAlignment = UiVerticalItemAlignment.STRETCH;
+	boolean contextMenuEnabled = false;
+	boolean selectionEnabled;
 
 	command addData(int startIndex, List<UiIdentifiableClientRecord> data, int totalNumberOfRecords, boolean clear);
 	command removeData(List<Integer> ids);
@@ -34,7 +37,58 @@ class UiInfiniteItemView extends UiComponent {
     command setHorizontalItemMargin(int horizontalItemMargin);
     command setItemJustification(UiItemJustification itemJustification);
     command setVerticalItemAlignment(UiVerticalItemAlignment verticalItemAlignment);
+    command setContextMenuContent(int requestId, UiComponent* component);
+    command closeContextMenu(int requestId);
 
-	event dataRequest(int startIndex, int length); //sent when the virtual view port gets outside of the buffered data
-	event itemClicked(int recordId, boolean isRightMouseButton, boolean isDoubleClick);
+	event displayedRangeChanged(int startIndex, int length, List<Integer> displayedRecordIds, UiInfiniteItemViewDataRequest dataRequest);
+	event itemClicked(int recordId, boolean isDoubleClick);
+	event contextMenuRequested(int requestId, int recordId);
+}
+
+class UiInfiniteItemView2 extends UiComponent {
+	required UiTemplate itemTemplate;
+
+	float itemWidth = 0; // 0: full width, 0<x<1: relative width, >=1: fixed width
+	float itemHeight = 100;
+	float horizontalSpacing;
+	float verticalSpacing;
+	float itemPositionAnimationTime; // ms
+	UiHorizontalElementAlignment itemContentHorizontalAlignment = UiHorizontalElementAlignment.CENTER;
+	UiVerticalElementAlignment itemContentVerticalAlignment = UiVerticalElementAlignment.STRETCH;
+	UiItemJustification rowHorizontalAlignment = UiItemJustification.SPACE_AROUND;
+//	boolean autoHeight = false; // TODO make this component set its own height using totalNumberOfRecords! Use with max-height to preserve infinite scrolling!
+
+	boolean contextMenuEnabled;
+	boolean selectionEnabled;
+
+	command setData(int startIndex, List<Integer> recordIds, List<UiInfiniteItemViewClientRecord> newRecords, int totalNumberOfRecords);
+
+	command setItemTemplate(UiTemplate itemTemplate);
+    command setItemWidth(float itemWidth);
+    command setItemHeight(float itemHeight);
+    command setHorizontalSpacing(float horizontalSpacing);
+    command setVerticalSpacing(float verticalSpacing);
+    command setItemContentHorizontalAlignment(UiHorizontalElementAlignment itemContentHorizontalAlignment);
+    command setItemContentVerticalAlignment(UiVerticalElementAlignment itemContentVerticalAlignment);
+    command setRowHorizontalAlignment(UiItemJustification rowHorizontalAlignment);
+    command setItemPositionAnimationTime(int animationMillis);
+    command setSelectionEnabled(boolean selectionEnabled);
+    command setSelectedRecord(Integer uiRecordId);
+
+    command setContextMenuContent(int requestId, UiComponent* component);
+    command closeContextMenu(int requestId);
+
+	event displayedRangeChanged(int startIndex, int length);
+	event itemClicked(int recordId, boolean isDoubleClick);
+	event contextMenuRequested(int requestId, int recordId);
+}
+
+@TypeScriptFactory
+class UiInfiniteItemViewDataRequest {
+	required int startIndex;
+	required int length;
+}
+
+class UiInfiniteItemViewClientRecord extends UiIdentifiableClientRecord {
+	boolean selected;
 }
diff --git a/teamapps-ui-api/src/main/dto/UiItemView.dto b/teamapps-ui-api/src/main/dto/UiItemView.dto
index 07686287d..5ffe0532f 100644
--- a/teamapps-ui-api/src/main/dto/UiItemView.dto
+++ b/teamapps-ui-api/src/main/dto/UiItemView.dto
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -61,7 +61,7 @@ enum UiItemViewFloatStyle {
 }
 
 enum UiItemJustification {
-	LEFT, RIGHT, CENTER, SPACE_AROUND, SPACE_BETWEEN
+	LEFT, RIGHT, CENTER, SPACE_AROUND, SPACE_BETWEEN, SPACE_EVENLY
 }
 
 enum UiVerticalItemAlignment {
diff --git a/teamapps-ui-api/src/main/dto/UiLayout.dto b/teamapps-ui-api/src/main/dto/UiLayout.dto
index 0b01775b6..6741c2f53 100644
--- a/teamapps-ui-api/src/main/dto/UiLayout.dto
+++ b/teamapps-ui-api/src/main/dto/UiLayout.dto
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -27,15 +27,12 @@ class UiApplicationLayout extends UiComponent {
 
 class UiMobileLayout extends UiComponent {
 	UiToolbar* toolbar;
-	List<UiComponent*> views;  // TODO #componentRef No more necessary...
-	String initialViewId; // TODO #componentRef replace viewId with UiComponentReference...
+	UiComponent* initialView;
 	UiNavigationBar* navigationBar;
 
 	command setToolbar(UiToolbar* toolbar); // null removes the toolbar
 	command setNavigationBar(UiNavigationBar* navBar); // null removes the navigation bar
-	command addView(UiComponent* view); // TODO #componentRef No more necessary... Preloading by instantiation :-)
-	command showView(String viewId, UiMobileLayoutAnimation animation); // TODO #componentRef replace viewId with UiComponentReference...
-	command removeView(String viewId); // // TODO #componentRef No more necessary...
+	command showView(UiComponent* component, UiPageTransition animation, int animationDuration);
 }
 
 interface Emptyable {
diff --git a/teamapps-ui-api/src/main/dto/UiLinkButton.dto b/teamapps-ui-api/src/main/dto/UiLinkButton.dto
new file mode 100644
index 000000000..083a10fdd
--- /dev/null
+++ b/teamapps-ui-api/src/main/dto/UiLinkButton.dto
@@ -0,0 +1,33 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+class UiLinkButton extends UiComponent {
+	String text;
+	String url = null; // null = still render as link but do not open a page
+	UiLinkTarget target = UiLinkTarget.BLANK;
+	String onClickJavaScript;
+
+	command update(UiLinkButton config);
+
+	event clicked();
+}
+
+enum UiLinkTarget {
+	SELF, BLANK, PARENT, TOP;
+}
diff --git a/teamapps-ui-api/src/main/dto/UiLiveStreamPlayer.dto b/teamapps-ui-api/src/main/dto/UiLiveStreamPlayer.dto
index 43d52ff6f..ab86d55e8 100644
--- a/teamapps-ui-api/src/main/dto/UiLiveStreamPlayer.dto
+++ b/teamapps-ui-api/src/main/dto/UiLiveStreamPlayer.dto
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ui-api/src/main/dto/UiMap.dto b/teamapps-ui-api/src/main/dto/UiMap.dto
index 5f6fef197..afbea54ba 100644
--- a/teamapps-ui-api/src/main/dto/UiMap.dto
+++ b/teamapps-ui-api/src/main/dto/UiMap.dto
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,43 +19,72 @@
  */
 class UiMap extends UiComponent {
 	required Dictionary<UiTemplate> markerTemplates;
+	String accessToken;
+	UiMapConfig mapConfig;
+
 	UiMapType mapType = UiMapType.MAP_BOX_STREETS;
 	int zoomLevel = 5;
 	UiMapLocation mapPosition;
-	Dictionary<UiMapPolyline> polylines;
+	Dictionary<AbstractUiMapShape> shapes;
 	List<UiMapMarkerClientRecord> markers;
+	UiMapMarkerCluster markerCluster;
 
 	command registerTemplate(String id, UiTemplate template);
 	command addMarker(UiMapMarkerClientRecord marker);
 	command removeMarker(int id);
 	command setMapMarkerCluster(UiMapMarkerCluster cluster);
-	command addPolyline(String lineId, UiMapPolyline polyline);
-	command addPolylinePoints(String lineId, List<UiMapLocation> points);
-	command removePolyline(String lineId);
+
+	command addShape(String shapeId, AbstractUiMapShape shape);
+	command updateShape(String shapeId, AbstractUiMapShape shape);
+	command removeShape(String shapeId);
+	command clearShapes();
+	command clearMarkers();
+	command clearMarkerCluster();
+	command clearHeatMap();
+
+	command startDrawingShape(UiMapShapeType shapeType, UiShapeProperties shapeProperties);
+	command stopDrawingShape();
+	
 	command setZoomLevel(int zoom);
 	command setLocation(UiMapLocation location);
 	command setMapType(UiMapType mapType);
 	command setHeatMap(UiHeatMapData data);
+	command fitBounds(UiMapLocation southWest, UiMapLocation northEast);
 
 	event zoomLevelChanged(int zoomLevel);
 	event locationChanged(UiMapLocation center, UiMapArea displayedArea);
 	event mapClicked(UiMapLocation location);
 	event markerClicked(int markerId);
+	event shapeDrawn(String shapeId, AbstractUiMapShape shape);
+}
+
+class UiMapConfig {
+	String urlTemplate;
+	String id = "";
+	int minZoom = 1;
+	int maxZoom = 18;
+	String attribution = "";
 }
 
 enum UiMapType {
 	INTERNAL,
+	INTERNAL_DARK,
+	INTERNAL_DARK_HIGH_RES,
 	MAP_BOX_STREETS,
 	MAP_BOX_STREETS_BASIC,
 	MAP_BOX_STREETS_SATELLITE,
 	MAP_BOX_SATELLITE,
 	MAP_BOX_RUN_BIKE_HIKE,
+	MAP_BOX_DARK,
 	MAP_BOX_EMERALD,
 	MAP_BOX_OUTDOORS,
 	MAP_QUEST_OSM, MAP_QUEST_SATELLITE,
 	OSM_TOPO_MAP,
 	NASA_EARTH_AT_NIGHT,
-	INFO_WEATHER_TEMPERATURE
+	INFO_WEATHER_TEMPERATURE,
+	THUNDERFOREST_DARK,
+	THUNDERFOREST_TRANSPORT,
+	WIKIMEDIA
 }
 
 @TypeScriptFactory
@@ -72,15 +101,34 @@ class UiMapArea {
 	required float maxLongitude;
 }
 
-class UiMapPolyline {
-	required List<UiMapLocation> path;
-	UiShapeProperties shapeProperties;
+class UiMapMarkerClientRecord extends UiIdentifiableClientRecord {
+	UiMapLocation location;
+    String templateId; // null == use asString
+    UiMapMarkerAnchor anchor;
+    int offsetPixelsX;
+    int offsetPixelsY;
+}
+
+enum UiMapMarkerAnchor {
+	CENTER = "center",
+	TOP = "top",
+	BOTTOM = "bottom",
+	LEFT = "left",
+	RIGHT = "right",
+	TOP_LEFT = "top-left",
+	TOP_RIGHT = "top-right",
+	BOTTOM_LEFT = "bottom-left",
+	BOTTOM_RIGHT = "bottom-right";
 }
 
-class UiMapMarkerCluster {
+class UiMapMarkers {
 	required List<UiMapMarkerClientRecord> markers;
 }
 
+class UiMapMarkerCluster extends UiMapMarkers {
+	int clusterRadius = 100;
+}
+
 class UiHeatMapData {
 	required List<UiHeatMapDataElement> elements;
 	int maxCount = 10;
@@ -94,11 +142,51 @@ class UiHeatMapDataElement {
 	required int count;
 }
 
+enum UiMapShapeType {
+	CIRCLE,
+    POLYGON,
+    POLYLINE,
+    RECTANGLE;
+}
+
+abstract class AbstractUiMapShape {
+	UiShapeProperties shapeProperties;
+}
+
+
+abstract class AbstractUiMapShapeChange {
+}
+
+@TypeScriptFactory
+class UiMapCircle extends AbstractUiMapShape {
+	UiMapLocation center;
+	int radius; // meters
+}
+
+@TypeScriptFactory
+class UiMapPolygon extends AbstractUiMapShape {
+	List<UiMapLocation> path;
+}
+
+@TypeScriptFactory
+class UiMapPolyline extends AbstractUiMapShape {
+	List<UiMapLocation> path;
+}
+
+
+class UiPolylineAppend extends AbstractUiMapShapeChange {
+    required List<UiMapLocation> appendedPath;
+}
+
+@TypeScriptFactory
+class UiMapRectangle extends AbstractUiMapShape {
+	UiMapLocation l1;
+	UiMapLocation l2;
+}
+
 class UiShapeProperties {
-  String strokeColor = "#0000FF";
-  float strokeOpacity = 0.8f;
-  float strokeWeight = 2f;
-  String strokeDashArray;
-  String fillColor = "#0000FF";
-  float fillOpacity = 0.4f;
+  String strokeColor;
+  float strokeWeight;
+  List<Float> strokeDashArray;
+  String fillColor;
 }
diff --git a/teamapps-ui-api/src/main/dto/UiMap2.dto b/teamapps-ui-api/src/main/dto/UiMap2.dto
new file mode 100644
index 000000000..8fb8c5388
--- /dev/null
+++ b/teamapps-ui-api/src/main/dto/UiMap2.dto
@@ -0,0 +1,68 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+class UiMap2 extends UiComponent {
+	required Dictionary<UiTemplate> markerTemplates;
+	String styleUrl;
+	boolean displayAttributionControl;
+	boolean displayNavigationControl;
+	boolean displayVoronoiCells;
+
+	float zoomLevel = 5;
+	UiMapLocation mapPosition;
+	Dictionary<AbstractUiMapShape> shapes;
+	List<UiMapMarkerClientRecord> markers;
+	UiMapMarkerCluster markerCluster;
+	UiHeatMapData heatMap;
+
+	command registerTemplate(String id, UiTemplate template);
+	command addMarker(UiMapMarkerClientRecord marker);
+	command removeMarker(int id);
+	command clearMarkers();
+	command addMarkers(UiMapMarkers markers);
+	command setDisplayVoronoiCells(boolean enable);
+
+	command setMapMarkerCluster(UiMapMarkerCluster cluster);
+	command addMarkerToCluster(UiMapMarkerClientRecord marker);
+
+	command setHeatMap(UiHeatMapData data);
+
+	command addShape(String shapeId, AbstractUiMapShape shape);
+	command updateShape(String shapeId, AbstractUiMapShape shape);
+	command changeShape(String shapeId, AbstractUiMapShapeChange change);
+	command removeShape(String shapeId);
+	command clearShapes();
+
+	command startDrawingShape(UiMapShapeType shapeType, UiShapeProperties shapeProperties);
+	command stopDrawingShape();
+	
+	command setZoomLevel(float zoom);
+	command setLocation(UiMapLocation location, long animationDurationMillis, float targetZoomLevel);
+	command setStyleUrl(String styleUrl);
+
+	command fitBounds(UiMapLocation southWest, UiMapLocation northEast);
+
+	event zoomLevelChanged(float zoomLevel);
+	event locationChanged(UiMapLocation center, UiMapArea displayedArea);
+	event mapClicked(UiMapLocation location);
+	event markerClicked(int markerId);
+	event shapeDrawn(String shapeId, AbstractUiMapShape shape);
+}
+
+
diff --git a/teamapps-ui-api/src/main/dto/UiMediaPlayer.dto b/teamapps-ui-api/src/main/dto/UiMediaPlayer.dto
index a83a65b82..6ee67f808 100644
--- a/teamapps-ui-api/src/main/dto/UiMediaPlayer.dto
+++ b/teamapps-ui-api/src/main/dto/UiMediaPlayer.dto
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -49,9 +49,9 @@ class UiVideoPlayer extends UiComponent {
 	boolean autoplay;
 	boolean showControls;
 	String posterImageUrl;
-	enum {CONTAIN, COVER, ORIGINAL} posterImageSize = PosterImageSize.CONTAIN;
+	UiPosterImageSize posterImageSize = UiPosterImageSize.CONTAIN;
 	int sendPlayerProgressEventsEachXSeconds = 1; // if 0, then send NO events
-	UiColor backgroundColor = new UiColor(68, 68, 68);
+	String backgroundColor = "rgb(68, 68, 68)";
 	UiMediaPreloadMode preloadMode;
 
 	command setUrl(String url);
@@ -63,6 +63,11 @@ class UiVideoPlayer extends UiComponent {
 
 	event errorLoading();
 	event playerProgress(int positionInSeconds);
+	event ended();
+}
+
+enum UiPosterImageSize {
+    CONTAIN, COVER, FILL
 }
 
 enum UiMediaPreloadMode {
diff --git a/teamapps-ui-api/src/main/dto/UiMediaSoupWebRtcClient.dto b/teamapps-ui-api/src/main/dto/UiMediaSoupWebRtcClient.dto
new file mode 100644
index 000000000..3aa0643d0
--- /dev/null
+++ b/teamapps-ui-api/src/main/dto/UiMediaSoupWebRtcClient.dto
@@ -0,0 +1,157 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+class UiMediaSoupV3WebRtcClient extends UiComponent {
+	Float displayAreaAspectRatio = 4/3f;  // width / height. Makes the display always use this aspect ratio. If null, use 100% of available space
+	boolean activityLineVisible;
+	String activityInactiveColor;
+	String activityActiveColor;
+	List<UiToolButton*> toolButtons;
+	List<String> icons;
+	String caption;
+	String noVideoImageUrl;
+	WebRtcClientSpinnerPolicy spinnerPolicy;
+	double playbackVolume = 1; // 0-1
+	boolean contextMenuEnabled = false;
+	boolean bitrateDisplayEnabled = false;
+	int forceRefreshCount = 0;
+	
+	// only one (or none) of the following must be set:
+	UiMediaSoupPublishingParameters publishingParameters;
+    UiMediaSoupPlaybackParameters playbackParameters;
+	
+	command update(UiMediaSoupV3WebRtcClient config);
+	command setActive(boolean active);
+	command setContextMenuContent(int requestId, UiComponent* component);
+	command closeContextMenu(int requestId);
+
+	event sourceMediaTrackRetrievalFailed(UiMediaRetrievalFailureReason reason);
+	event sourceMediaTrackEnded(UiSourceMediaTrackType trackType); // otherwise cam/mic
+	event trackPublishingSuccessful(boolean audio, boolean video);
+	event trackPublishingFailed(boolean audio, boolean video, String errorMessage);
+	event connectionStateChanged(boolean connected);
+	event subscribingSuccessful();
+	event subscribingFailed(String errorMessage);
+	event subscriptionPlaybackFailed(String errorMessage);
+	event voiceActivityChanged(boolean active);
+	event clicked();
+	event contextMenuRequested(int requestId);
+
+	static command enumerateDevices() returns List<UiMediaDeviceInfo>;
+}
+
+@TypeScriptFactory
+class UiMediaDeviceInfo {
+	 String deviceId;
+	 String groupId;
+	 UiMediaDeviceKind kind;
+	 String label;
+}
+
+enum UiMediaDeviceKind {
+    AUDIO_INPUT, AUDIO_OUTPUT, VIDEO_INPUT
+}
+
+enum WebRtcPublishingFailureReason {
+	MIC_MEDIA_RETRIEVAL_FAILED,
+	CAM_MEDIA_RETRIEVAL_FAILED,
+	CAM_MIC_MEDIA_RETRIEVAL_FAILED,
+	DISPLAY_MEDIA_RETRIEVAL_FAILED,
+	VIDEO_MIXING_FAILED,
+	CONNECTION_ESTABLISHMENT_FAILED
+}
+
+enum UiSourceMediaTrackType {
+	CAM, MIC, SCREEN;
+}
+
+enum UiMediaRetrievalFailureReason {
+	MIC_MEDIA_RETRIEVAL_FAILED,
+	CAM_MEDIA_RETRIEVAL_FAILED,
+	DISPLAY_MEDIA_RETRIEVAL_FAILED,
+	VIDEO_MIXING_FAILED
+}
+
+enum WebRtcClientSpinnerPolicy {
+	NEVER,
+	WHILE_CONNECTING,
+	WHEN_NOT_STREAMING
+}
+
+class UiMediaSoupPublishingParameters {
+	String streamUuid;
+	UiMediaServerUrlAndToken server;
+
+	UiAudioTrackConstraints audioConstraints;
+	UiVideoTrackConstraints videoConstraints;
+	UiScreenSharingConstraints screenSharingConstraints;
+
+	boolean simulcast;
+	long minBitrate;
+	long maxBitrate;
+	long keyFrameRequestDelay = 2500; // milliseconds
+}
+
+class UiMediaServerUrlAndToken {
+	required String url;
+	required int worker;
+    required String token;
+}
+
+class UiMediaSoupPlaybackParameters {
+	String streamUuid;
+	UiMediaServerUrlAndToken server; // the server/worker from which to receive the stream
+	UiMediaServerUrlAndToken origin; // the origin server/worker, if the stream is cascaded (scaling via origin/edge); may be null
+
+	boolean audio;
+	boolean video;
+
+	long minBitrate;
+	long maxBitrate;
+}
+
+class UiAudioTrackConstraints {
+	String deviceId;
+    int channelCount = 1;
+    boolean autoGainControl = true;
+    double gainFactor;
+    boolean echoCancellation = true;
+    boolean noiseSuppression = true;
+}
+
+class UiVideoTrackConstraints {
+	String deviceId;
+    Double aspectRatio;
+	Integer width;
+	Integer height;
+    UiVideoFacingMode facingMode = UiVideoFacingMode.USER;
+    double frameRate = 20;
+}
+
+class UiScreenSharingConstraints {
+	Integer maxWidth;
+	Integer maxHeight;
+}
+
+enum UiVideoFacingMode {
+	USER, // The video source is facing toward the user; this includes, for example, the front-facing camera on a smartphone.
+	ENVIRONMENT, // The video source is facing away from the user, thereby viewing their environment. This is the back camera on a smartphone.
+	LEFT, // The video source is facing toward the user but to their left, such as a camera aimed toward the user but over their left shoulder.
+	RIGHT; // The video source is facing toward the user but to their right, such as a camera aimed toward the user but over their right shoulder.
+}
diff --git a/teamapps-ui-api/src/main/dto/UiMustacheTemplate.dto b/teamapps-ui-api/src/main/dto/UiMustacheTemplate.dto
new file mode 100644
index 000000000..2a284bd3c
--- /dev/null
+++ b/teamapps-ui-api/src/main/dto/UiMustacheTemplate.dto
@@ -0,0 +1,22 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+class UiMustacheTemplate implements UiTemplate {
+	required String templateString;
+}
diff --git a/teamapps-ui-api/src/main/dto/UiNavigationBar.dto b/teamapps-ui-api/src/main/dto/UiNavigationBar.dto
index f23314555..be27a1f7a 100644
--- a/teamapps-ui-api/src/main/dto/UiNavigationBar.dto
+++ b/teamapps-ui-api/src/main/dto/UiNavigationBar.dto
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -20,19 +20,21 @@
 class UiNavigationBar extends UiComponent {
 	required UiTemplate buttonTemplate;
 	List<UiNavigationBarButton> buttons;
-	UiColor backgroundColor = new UiColor(255, 255, 255).setAlpha(0.84f);
-	UiColor borderColor;
+	String backgroundColor = "rgba(255, 255, 255, 0.84)";
+	String borderColor;
 	List<UiComponent*> fanOutComponents;
+	UiMultiProgressDisplay* multiProgressDisplay;
 
 	command setButtons(List<UiNavigationBarButton> buttons);
 	command setButtonVisible(String buttonId, boolean visible);
-	command setBackgroundColor(UiColor backgroundColor);
-	command setBorderColor(UiColor borderColor);
+	command setBackgroundColor(String backgroundColor);
+	command setBorderColor(String borderColor);
 
 	command addFanOutComponent(UiComponent* fanOutComponent); // TODO #componentRef No more necessary?
 	command removeFanOutComponent(UiComponent* fanOutComponent); // TODO #componentRef No more necessary?
 	command showFanOutComponent(UiComponent* fanOutComponent);
 	command hideFanOutComponent();
+	command setMultiProgressDisplay(UiMultiProgressDisplay* multiProgressDisplay);
 
 	event buttonClicked(String buttonId, String visibleFanOutComponentId);
 	event fanoutClosedDueToClickOutsideFanout();
diff --git a/teamapps-ui-api/src/main/dto/UiNetworkGraph.dto b/teamapps-ui-api/src/main/dto/UiNetworkGraph.dto
index 527da1825..421b3c972 100644
--- a/teamapps-ui-api/src/main/dto/UiNetworkGraph.dto
+++ b/teamapps-ui-api/src/main/dto/UiNetworkGraph.dto
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -26,32 +26,52 @@ class UiNetworkGraph extends UiComponent{
 	float alpha = 0.1f;
 	int charge = -300;
 	int distance = 30;
+	int strength = -30;
 	String highlightColor;
+	int animationDuration = 1000;
 
 	command setZoomFactor(float zoomFactor);
 	command setGravity(float gravity);
 	command setCharge(int charge, boolean overrideNodeCharge);
-	command setDistance(int distance, boolean overrideLinkDistance);
+	command setDistance(float linkDistance, float nodeDistance);
 
-	event handleNodeClick(String nodeId);
+	command zoomAllNodesIntoView(int animationDuration);
+	command addNodesAndLinks(List<UiNetworkNode> nodes, List<UiNetworkLink> links);
+	command removeNodesAndLinks(List<String> nodeIds, Dictionary<List<String>> linksBySourceNodeId);
+
+	event nodeClicked(String nodeId);
+	event nodeDoubleClicked(String nodeId);
+	event nodeExpandedOrCollapsed(String nodeId, boolean expanded);
 }
 
 class UiNetworkNode {
-	required String nodeId;
-	required String caption;
-	required String imageId;
-	required int size;
-	int charge = -300;
-	float border;
-	String borderColor;
+	required String id;
+	required int width;
+	required int height;
+
+	String backgroundColor = "rgb(255, 255, 255)";
+	String borderColor = "rgb(100, 100, 100)";
+	float borderWidth = 1;
+	float borderRadius = 0;
+
+	float distanceFactor = 0.6f;
+
+	UiTreeGraphNodeImage image;
+	UiTreeGraphNodeIcon icon;
+
+	UiTemplate template;     // will get embedded using foreignObject
+	UiClientRecord record;   // will get embedded using foreignObject
+
+	enum {NOT_EXPANDABLE, EXPANDED, COLLAPSED} expandState;
 }
 
 class UiNetworkLink {
-	required int source;
-	required int target;
-	float width = 1.5f;
-	int distance = 30;
-	String color = "#333";
+	required String source;
+	required String target;
+	String lineColor = "rgb(127, 127, 127)";
+	float lineWidth = 1.5f;
+	String lineDashArray;
+	int linkLength;
 }
 
 class UiNetworkImage {
diff --git a/teamapps-ui-api/src/main/dto/UiNotification.dto b/teamapps-ui-api/src/main/dto/UiNotification.dto
index 9af371185..df22b4deb 100644
--- a/teamapps-ui-api/src/main/dto/UiNotification.dto
+++ b/teamapps-ui-api/src/main/dto/UiNotification.dto
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,15 +17,56 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-class UiNotification {
-	required UiTemplate template;
-	required Object data;
-	UiColor backgroundColor;
-	enum {TOP_LEFT, TOP_CENTER, TOP_RIGHT, BOTTOM_LEFT, BOTTOM_CENTER, BOTTOM_RIGHT} position = Position.TOP_RIGHT;
+enum UiNotificationPosition {
+	TOP_LEFT, TOP_CENTER, TOP_RIGHT, BOTTOM_LEFT, BOTTOM_CENTER, BOTTOM_RIGHT
+}
+
+class UiNotification extends UiComponent {
+	String backgroundColor;
+	UiSpacing padding;
+
+	boolean dismissible = true;
 	int displayTimeInMillis = 3000; // 0 = display until user closes it actively
-	boolean dismissable = true;
-	boolean showProgressBar = false;
-	UiEntranceAnimation entranceAnimation = UiEntranceAnimation.FADE_IN;
-	UiExitAnimation exitAnimation = UiExitAnimation.FADE_OUT; // beware that some exit animations do not seem to work with some of the entrance animations (example: ROLL_IN and HINGE)
+	boolean progressBarVisible = false;
+
+	UiComponent* content;
+	int contentHeight = 0; // <= 0: auto
+
+	command close();
+	command update(UiNotification config);
+
+	event opened();
+	event closed(boolean byUser);
 }
 
+class UiNotificationBar extends UiComponent {
+	List<UiNotificationBarItem> initialItems;
+
+	command addItem(UiNotificationBarItem item);
+	command updateItem(UiNotificationBarItem item);
+	command removeItem(String id, UiExitAnimation exitAnimation);
+
+	event itemClicked(String id);
+	event itemActionLinkClicked(String id);
+	event itemClosed(String id, boolean wasTimeout);
+}
+
+class UiNotificationBarItem {
+	String id;
+
+	String icon;
+	UiRepeatableAnimation iconAnimation;
+	String text;
+	String actionLinkText;
+	String backgroundColor;
+	String borderColor;
+	String textColor;
+	String actionLinkColor;
+	UiSpacing padding;
+	UiEntranceAnimation entranceAnimation;
+	UiExitAnimation exitAnimation;
+
+	boolean dismissible = true;
+	int displayTimeInMillis = 3000; // 0 <= display until user closes it actively
+	boolean progressBarVisible = false;
+}
diff --git a/teamapps-ui-api/src/main/dto/UiPageView.dto b/teamapps-ui-api/src/main/dto/UiPageView.dto
index 56bab0410..9a64d84a2 100644
--- a/teamapps-ui-api/src/main/dto/UiPageView.dto
+++ b/teamapps-ui-api/src/main/dto/UiPageView.dto
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -31,10 +31,10 @@ class UiPageViewBlock {
 }
 
 class UiMessagePageViewBlock extends UiPageViewBlock {
-	String creatorImageUrl;
-	UiPageViewBlockCreatorImageAlignment creatorImageAlignment = UiPageViewBlockCreatorImageAlignment.LEFT;
-	String headLine;
-	String text; // rich text!
+	UiTemplate topTemplate;
+	UiClientRecord topRecord;
+	UiHorizontalElementAlignment topRecordAlignment;
+	String html;
 	List<String> imageUrls;
 }
 
diff --git a/teamapps-ui-api/src/main/dto/UiPanel.dto b/teamapps-ui-api/src/main/dto/UiPanel.dto
index 98a6ee2c8..ab5e9cda9 100644
--- a/teamapps-ui-api/src/main/dto/UiPanel.dto
+++ b/teamapps-ui-api/src/main/dto/UiPanel.dto
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -20,6 +20,7 @@
 class UiPanel extends UiComponent {
 	String icon;
 	String title;
+	String badge;
 	UiPanelHeaderField leftHeaderField;
 	UiPanelHeaderField rightHeaderField;
 	enum {LEFT_COMPONENT_FIRST, RIGHT_COMPONENT_FIRST} headerComponentMinimizationPolicy = HeaderComponentMinimizationPolicy.LEFT_COMPONENT_FIRST;
@@ -38,6 +39,7 @@ class UiPanel extends UiComponent {
 	command setRightHeaderField(UiPanelHeaderField field);
 	command setTitle(String title);
 	command setIcon(String icon);
+	command setBadge(String badge);
 	command setToolbar(UiToolbar* toolbar); //if null, remove toolbar
 	command setMaximized(boolean maximized);
 	command setWindowButtons(List<UiWindowButtonType> windowButtons);
@@ -57,20 +59,28 @@ class UiPanelHeaderField {
 class UiWindow extends UiPanel {
 	boolean modal = true;
 	int width = 0; // 0 = full width
-	int height = 0; // 0 = full height
-	UiColor headerBackgroundColor = new UiColor(190, 190, 190).setAlpha(.72f);
-	UiColor modalBackgroundDimmingColor = new UiColor(0, 0, 0).setAlpha(.2f);
+	int height = 0; // 0 = full height, -1 = auto
+    int minWidth = 0;
+    int minHeight = 0;
+	boolean resizable;
+	boolean movable;
+    boolean keepInViewport = true;
+	String headerBackgroundColor = "rgba(190, 190, 190, .72)";
+	String modalBackgroundDimmingColor = "rgba(0, 0, 0, .2)";
     boolean closeable; // show "close" special tool button
     boolean closeOnEscape; // close if the user presses escape
     boolean closeOnClickOutside; // close if the user clicks onto the area outside the window
 
+	command show(int animationDuration);
 	command close(int animationDuration);
 	command setCloseable(boolean closeable);
 	command setCloseOnEscape(boolean closeOnEscape);
 	command setCloseOnClickOutside(boolean closeOnClickOutside);
 	command setModal(boolean modal);
-	command setModalBackgroundDimmingColor(UiColor modalBackgroundDimmingColor);
+	command setModalBackgroundDimmingColor(String modalBackgroundDimmingColor);
 	command setSize(int width, int height);
+
+	event closed();
 }
 
 class UiElegantPanel extends UiComponent {
diff --git a/teamapps-ui-api/src/main/dto/UiPdfViewer.dto b/teamapps-ui-api/src/main/dto/UiPdfViewer.dto
new file mode 100644
index 000000000..88fd44d25
--- /dev/null
+++ b/teamapps-ui-api/src/main/dto/UiPdfViewer.dto
@@ -0,0 +1,50 @@
+
+
+class UiPdfViewer extends UiComponent {
+    String url;
+    boolean showDevTools;
+
+    UiPdfZoomMode zoomMode;
+    UiPdfViewMode viewMode;
+    int padding = 0;
+    int pageSpacing = 5;
+    float zoomFactor = 1f;
+    String backgroundColor;
+    String borderColor;
+	UiBorder pageBorder;
+
+    command setUrl(String url);
+    command setShowDevTools(boolean showDevTools);
+    command showPage(int page);
+    command setViewMode(UiPdfViewMode viewMode);
+	command setZoomFactor(float zoomFactor);
+	command setZoomMode(UiPdfZoomMode zoomMode);
+	command setPageBorder(UiBorder pageBorder);
+	command setPadding(int padding);
+	command setPageSpacing(int pageSpacing);
+
+	// changes the bg color of the canvasContainer
+	// @bjesuiter note: all setBackgroundColor functions of this repo use a string for passing the color
+	// It's probably a string one could directly plug into css.
+	// I tried using a "Color" class, but this seems to not exist, so for simplicity I also went with a string.
+	command setBackgroundColor(String cssColor);
+	command setBorderColor(String cssColor);
+
+    event pdfInitialized(int numberOfPages);
+    event zoomFactorAutoChanged(float zoomFactor);
+    event pdfLoadFailed(String url, String errorMessage);
+}
+
+enum UiPdfViewMode {
+    SINGLE_PAGE,
+    CONTINUOUS,
+	CONTINUOUS_VIRTUAL
+}
+
+enum UiPdfZoomMode {
+	// UiPdfZoomMode.TO_HEIGHT === height of one pdf page should fit into the container
+    TO_HEIGHT,
+	// UiPdfZoomMode.TO_WIDTH === pdf page width should be as close as possible to width of container
+    TO_WIDTH,
+    MANUAL
+}
diff --git a/teamapps-ui-api/src/main/dto/UiPlayground.dto b/teamapps-ui-api/src/main/dto/UiPlayground.dto
new file mode 100644
index 000000000..5571bcef0
--- /dev/null
+++ b/teamapps-ui-api/src/main/dto/UiPlayground.dto
@@ -0,0 +1,7 @@
+class UiPlayground extends UiComponent {
+    String title;
+
+    command setTitle(String title);
+
+    event rendered();
+}
diff --git a/teamapps-ui-api/src/main/dto/UiPopup.dto b/teamapps-ui-api/src/main/dto/UiPopup.dto
new file mode 100644
index 000000000..b653602e9
--- /dev/null
+++ b/teamapps-ui-api/src/main/dto/UiPopup.dto
@@ -0,0 +1,38 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+class UiPopup extends UiComponent {
+	UiComponent* contentComponent;
+	int width; // 0 = full width, -1 = auto
+	int height; // 0 = full height, -1 = auto
+	int x; 
+	int y; 
+    String backgroundColor;
+	boolean modal = false;
+	String dimmingColor = "rgba(0, 0, 0, .2)";
+    boolean closeOnEscape; // close if the user presses escape
+    boolean closeOnClickOutside; // close if the user clicks onto the area outside the window
+
+	command setBackgroundColor(String backgroundColor);
+	command setDimmingColor(String backgroundColor);
+	command setPosition(int x, int y);
+	command setDimensions(int width, int height);
+
+	command close();
+}
diff --git a/teamapps-ux-servlet/src/main/java/org/teamapps/ux/servlet/util/ZlibStatefulDeflater.java b/teamapps-ui-api/src/main/dto/UiProgressDisplay.dto
similarity index 50%
rename from teamapps-ux-servlet/src/main/java/org/teamapps/ux/servlet/util/ZlibStatefulDeflater.java
rename to teamapps-ui-api/src/main/dto/UiProgressDisplay.dto
index 1ed803340..883ebde66 100644
--- a/teamapps-ux-servlet/src/main/java/org/teamapps/ux/servlet/util/ZlibStatefulDeflater.java
+++ b/teamapps-ui-api/src/main/dto/UiProgressDisplay.dto
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,26 +17,39 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-package org.teamapps.ux.servlet.util;
 
-import java.io.ByteArrayOutputStream;
-import java.util.zip.Deflater;
+enum UiProgressStatus {
+	NOT_YET_STARTED = "not-yet-started",
+	RUNNING = "running",
+	CANCELLATION_REQUESTED = "cancellation-requested",
+	CANCELED = "canceled",
+	COMPLETE = "complete",
+	FAILED = "failed"
+}
+
+class UiProgressDisplay extends UiComponent {
+	String icon;
+	String taskName;
+	String statusMessage;
+	double progress;
+	UiProgressStatus status;
+	boolean cancelable;
 
-public class ZlibStatefulDeflater {
+    command update(UiProgressDisplay config);
 
-	private Deflater deflater = new Deflater();
+    event clicked();
+    event cancelButtonClicked();
+}
 
-	public byte[] deflate(byte[] data) {
-		deflater.setInput(data);
+class UiMultiProgressDisplay extends UiComponent {
+	int runningCount;
+	List<String> statusMessages;
 
-		ByteArrayOutputStream byteArrayOutputStream = new ByteArrayOutputStream();
-		byte[] outputBuffer = new byte[Math.max(50, data.length)]; // must at least fit the fixed size zlib header + dictionary
-		do {
-			int compressedDataLength = deflater.deflate(outputBuffer, 0, outputBuffer.length, Deflater.SYNC_FLUSH);
-			byteArrayOutputStream.write(outputBuffer, 0, compressedDataLength);
-		} while (!deflater.needsInput());
+	command update(UiDefaultMultiProgressDisplay config);
+
+	event clicked();
+}
 
-		return byteArrayOutputStream.toByteArray();
-	}
+class UiDefaultMultiProgressDisplay extends UiMultiProgressDisplay {
 
 }
diff --git a/teamapps-ui-api/src/main/dto/UiQrCodeScanner.dto b/teamapps-ui-api/src/main/dto/UiQrCodeScanner.dto
new file mode 100644
index 000000000..8c0603eba
--- /dev/null
+++ b/teamapps-ui-api/src/main/dto/UiQrCodeScanner.dto
@@ -0,0 +1,29 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+class UiQrCodeScanner extends UiComponent {
+	boolean scanning;
+	boolean stopsScanningAtFirstResult;
+
+	command startScanning(boolean stopScanningAtFirstResult);
+	command stopScanning();
+	command switchCamera();
+
+	event qrCodeDetected(String code);
+}
diff --git a/teamapps-ui-api/src/main/dto/UiRootPanel.dto b/teamapps-ui-api/src/main/dto/UiRootPanel.dto
index 0ae34c4d5..b9038ec23 100644
--- a/teamapps-ui-api/src/main/dto/UiRootPanel.dto
+++ b/teamapps-ui-api/src/main/dto/UiRootPanel.dto
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -18,19 +18,20 @@
  * =========================LICENSE_END==================================
  */
 class UiRootPanel extends UiComponent {
-	List<UiComponent*> childComponents;
-	String visibleChildComponentId;
+	UiComponent* content;
 
-	command addChildComponent(UiComponent* childComponent, boolean show); // TODO #componentRef No more necessary... Preloading by instantiation :-)
-	command setVisibleChildComponent(String childComponentId, UiComponentRevealAnimation animation, long animationDuration); // TODO #componentRef replace childComponentId with UiComponentReference...
-    command removeChildComponent(String childComponentId); // TODO #componentRef No more necessary...
+	command setContent(UiComponent* content, UiPageTransition transition, long animationDuration);
+
+    static command setGlobalKeyEventsEnabled(boolean unmodified, boolean modifiedWithAltKey, boolean modifiedWithCtrlKey, boolean modifiedWithMetaKey, boolean includeRepeats, boolean keyDown, boolean keyUp);
+	static event globalKeyEventOccurred(KeyEventType eventType, String sourceComponentId, String code, boolean isComposing, String key, int charCode, int keyCode, String locale, int location, boolean repeat, boolean altKey, boolean ctrlKey, boolean shiftKey, boolean metaKey);
 
 	static command createComponent(UiComponent component);
-	static command destroyComponent(UiComponent* component);
+	static command destroyComponent(String id);
 	static command refreshComponent(UiComponent component);
 
 	static command setConfig(UiConfiguration config);
 	static command setThemeClassName(String theme);
+	static command setSessionMessageWindows(UiWindow* expiredMessageWindow, UiWindow* errorMessageWindow, UiWindow* terminatedMessageWindow);
 
 	static command setPageTitle(String pageTitle);
 	static command buildRootPanel(String containerElementId, UiRootPanel* uiRootPanel); // containerDomSelector == null --> body
@@ -41,17 +42,42 @@ class UiRootPanel extends UiComponent {
     static command removeClientToken(String token);
     static command clearClientTokens();
 
-	static command showWindow(UiWindow* window, int animationDuration);
-	static command closeWindow(String windowId, int animationDuration);
     static command downloadFile(String fileUrl, String downloadFileName);
 	static command registerBackgroundImage(String id, String image, String blurredImage); // downloads the image without displaying it.
 	static command setBackgroundImage(String id, int animationDuration = 1000); // cross-fading to some pre-registered background image
-	static command setBackgroundColor(UiColor color, int animationDuration = 1000);
+	static command setBackgroundColor(String color, int animationDuration = 1000);
 	static command exitFullScreen();
-	static command showNotification(UiNotification notification);
+	static command showNotification(UiNotification* notification, UiNotificationPosition position, UiEntranceAnimation entranceAnimation, UiExitAnimation exitAnimation);
 	static command showDialogMessage(String icon, String title, String message, List<UiGenericErrorMessageOption> options);
+
+	static command showPopup(UiPopup* popup);
+	static command showPopupAtCurrentMousePosition(UiPopup* popup);
+
+	// uuid is a server-generated id for this particular lock. Multiple locks are possible!
+	static command requestWakeLock(String uuid) returns boolean;
+	static command releaseWakeLock(String uuid);
+
+	static command goToUrl(String url, boolean blankPage);
+
+	static command changeNavigationHistoryState(String pathOrUrl, boolean fireEvent, boolean push);
+	static command navigateForward(int steps);
+
+	static command setFavicon(String url);
+	static command setTitle(String title);
+
+    static event navigationStateChange(UiLocation location, boolean triggeredBrowserNavigation);
+
+    static event customMessage(String type, String message);
+}
+
+enum KeyEventType {
+    KEY_DOWN, KEY_UP
 }
 
 enum UiGenericErrorMessageOption {
 	OK, RELOAD
 }
+
+enum UiNavigationStateChangeType {
+	PUSH, REPLACE
+}
diff --git a/teamapps-ui-api/src/main/dto/UiRule.dto b/teamapps-ui-api/src/main/dto/UiRule.dto
deleted file mode 100644
index 4053d2160..000000000
--- a/teamapps-ui-api/src/main/dto/UiRule.dto
+++ /dev/null
@@ -1,54 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-class UiValueMatcher {
-	required enum {EQUALS, LESSER, LESSER_EQUALS, GREATER, GREATER_EQUALS, CONTAINS, STARTS_WITH, ENDS_WITH, MINIMUM_SIZE, MAXIMUM_SIZE, REGEX_MATCH, CONTAINS_REGEX, CONTAINS_SCRIPT, CONTAINS_SCRIPT_TYPE, CONTAINS_ONLY_SCRIPT_TYPE } comparator;
-	boolean caseSensitive = false;
-	boolean invertMatch;
-	required Object compareValue; //on CONTAINS_SCRIPT_TYPE the value is the enum name as String
-}
-
-class UiMatcherRule {
-	required List<UiValueMatcher> valueMatcher;
-	boolean executeRuleIfAnyMatcherMatches = true; //if false, all matchers have to match to fire the rule
-}
-
-class UiValidationRule extends UiMatcherRule {
-	enum {POPUP_WINDOW, NOTIFICATION, INLINE } displayType = DisplayType.INLINE;
-	required String errorMessage;
-	boolean markFieldsThatRuleMatches = true; //if true, mark all the fields that would match the rule, e.g. with red border
-	boolean checkOnFieldUpdate = true; //if false, the rule will only be checked before the form data or the row data are sent to the server
-}
-
-class UiFormattingRule extends UiMatcherRule {
-	String icon;
-	String color;
-	String borderColor;
-	String backgroundColor;
-	boolean bold;
-	boolean underline;
-	boolean italic;
-}
-
-class UiVisibilityRule extends UiMatcherRule {
-	required enum {SHOW_ON_MATCH, HIDE_ON_MATCH, SHOW_ON_MATCH_AND_HIDE_IF_NO_MATCH} actionType;
-	List<String> propertyNames;
-	List<String> fieldGroupIds;
-}
-
diff --git a/teamapps-ui-api/src/main/dto/UiScriptType.dto b/teamapps-ui-api/src/main/dto/UiScriptType.dto
index 8fc1461e0..d3a663b9c 100644
--- a/teamapps-ui-api/src/main/dto/UiScriptType.dto
+++ b/teamapps-ui-api/src/main/dto/UiScriptType.dto
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ui-api/src/main/dto/UiShakaPlayer.dto b/teamapps-ui-api/src/main/dto/UiShakaPlayer.dto
new file mode 100644
index 000000000..e743b00b2
--- /dev/null
+++ b/teamapps-ui-api/src/main/dto/UiShakaPlayer.dto
@@ -0,0 +1,104 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+class UiShakaPlayer extends UiComponent {
+    String hlsUrl;
+    String dashUrl;
+    String posterImageUrl;
+    UiPosterImageSize posterImageSize = UiPosterImageSize.CONTAIN;
+    int timeUpdateEventThrottleMillis;
+    String backgroundColor;
+    boolean autoplay;
+    UiTrackLabelFormat trackLabelFormat;
+    boolean videoDisabled;
+    long timeMillis;
+    String preferredAudioLanguage;
+    boolean bigPlayButtonEnabled;
+    int controlFadeDelaySeconds;
+    List<UiShakaPlayerControlPanelElementType> controlPanelElements;
+
+	command setUrls(String hlsUrl, String dashUrl);
+    command play();
+    command pause();
+    command jumpTo(long timeMillis);
+	command selectAudioLanguage(String language, String role);
+
+	event errorLoading();
+	event manifestLoaded(UiShakaManifest manifest);
+	event timeUpdate(long timeMillis);
+	event ended();
+	event skipClicked(boolean forward, long playbackTimeMillis);
+
+	static command setDistinctManifestAudioTracksFixEnabled(boolean enabled);
+}
+
+enum UiShakaPlayerControlPanelElementType {
+      REWIND                  = "rewind"                ,
+      FAST_FORWARD            = "fast_forward"          ,
+      SKIP_BACK               = "skip_back"             ,
+      SKIP_FORWARD            = "skip_forward"          ,
+      PLAY_PAUSE              = "play_pause"            ,
+      TIME_AND_DURATION       = "time_and_duration"     ,
+      SPACER                  = "spacer"                ,
+      MUTE                    = "mute"                  ,
+      VOLUME                  = "volume"                ,
+      FULLSCREEN              = "fullscreen"            ,
+      OVERFLOW_MENU           = "overflow_menu"
+}
+
+enum UiTrackLabelFormat {
+	LABEL,
+	LANGUAGE,
+	LANGUAGE_ROLE,
+	ROLE;
+}
+
+class UiShakaManifest {
+    required List<UiShakaManifestVariant> variants;
+}
+
+class UiShakaManifestVariant {
+	int id;
+	UiShakaAudioStream audio;
+	UiShakaVideoStream video;
+	int bandwidth;
+}
+
+abstract class UiAbstractShakaStream {
+	int id;
+	String originalId;
+	String mimeType;
+	String codecs;
+	int bandwidth;
+	String label;
+	List<String> roles;
+}
+
+class UiShakaAudioStream extends UiAbstractShakaStream {
+    String language;
+    int channelsCount;
+    int audioSamplingRate;
+}
+
+class UiShakaVideoStream extends UiAbstractShakaStream {
+    int frameRate;
+    String pixelAspectRatio;
+    int width;
+    int height;
+}
diff --git a/teamapps-ui-api/src/main/dto/UiSplitPane.dto b/teamapps-ui-api/src/main/dto/UiSplitPane.dto
index 4b5b0cc98..788526ff6 100644
--- a/teamapps-ui-api/src/main/dto/UiSplitPane.dto
+++ b/teamapps-ui-api/src/main/dto/UiSplitPane.dto
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ui-api/src/main/dto/UiTabPanel.dto b/teamapps-ui-api/src/main/dto/UiTabPanel.dto
index bb4d84e92..31f2ffc5c 100644
--- a/teamapps-ui-api/src/main/dto/UiTabPanel.dto
+++ b/teamapps-ui-api/src/main/dto/UiTabPanel.dto
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -20,11 +20,15 @@
 class UiTabPanel extends UiComponent implements Emptyable {
 	List<UiTab> tabs;
 	String selectedTabId; // TODO
+	String tabBarHeight;
+    boolean fillTabBarWidth;
 	boolean hideTabBarIfSingleTab = false; // if true and there is only one tab, then the tab bar is hidden. Tool buttons pop up when hovering over the top 50px of the tab panel.
 	UiTabPanelTabStyle tabStyle = UiTabPanelTabStyle.BLOCKS; // if true and there is only one tab, then the tab bar is hidden.
 	List<UiToolButton*> toolButtons; // shown inside a right-aligned space in the tab bar
 	List<UiWindowButtonType> windowButtons;
 
+    command setTabBarHeight(String tabBarHeight);
+    command setFillTabBarWidth(boolean fillTabBarWidth);
 	command setHideTabBarIfSingleTab(boolean hideTabBarIfSingleTab);
 	command setTabStyle(UiTabPanelTabStyle tabStyle);
 	command setToolButtons(List<UiToolButton*> toolButtons);
diff --git a/teamapps-ui-api/src/main/dto/UiTable.dto b/teamapps-ui-api/src/main/dto/UiTable.dto
index bb9d24f61..07abd8800 100644
--- a/teamapps-ui-api/src/main/dto/UiTable.dto
+++ b/teamapps-ui-api/src/main/dto/UiTable.dto
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -22,17 +22,22 @@ enum UiSortDirection {
 }
 
 class UiTableColumn {
-	required String propertyName;
+	required String name;
 	required String icon;
 	required String title;
 	required UiField* field;
+	UiTemplate displayTemplate;
 	int minWidth;
 	int defaultWidth;
 	int maxWidth;
 	boolean sortable = true;
 	boolean resizeable = true;
+	boolean visible = true;
 	boolean hiddenIfOnlyEmptyCellsVisible = false;
 	List<UiFieldMessage> messages;
+	UiTextAlignment headerAlignment;
+	UiField* headerRowField;
+	UiField* footerRowField;
 }
 
 class UiTable extends UiComponent {
@@ -42,19 +47,19 @@ class UiTable extends UiComponent {
 	boolean forceFitWidth; //if true, force the widths of all columns to fit into the available space of the list
 	int rowHeight = 28;
 	boolean stripedRows = true;
-	UiColor stripedRowColorEven = new UiColor(255, 255, 255);
-	UiColor stripedRowColorOdd = new UiColor(0, 0, 0).setAlpha(0.05f);
+	String stripedRowColorEven = "rgb(255, 255, 255)";
+	String stripedRowColorOdd = "rgba(0, 0, 0, 0.05)";
 	boolean hideHeaders; //if true, do not show any headers
 	boolean allowMultiRowSelection = true;
-	UiColor selectionColor = new UiColor(222, 238, 255); // null = default color
+	String selectionColor = "rgb(222, 238, 255)"; // null = default color
 	int rowBorderWidth = 1; // even in list mode! the border will be there but transparent!
-	UiColor rowBorderColor = new UiColor(204, 204, 204);
+	String rowBorderColor = "rgb(204, 204, 204)";
 
 	boolean showRowCheckBoxes; //if true, show check boxes on the left
 	boolean showNumbering; //if true, show numbering on the left
+	boolean textSelectionEnabled;
+	boolean autoHeight;
 
-	List<UiTableClientRecord> tableData; //if available the initial table data
-	int totalNumberOfRecords;
 	String sortField; //if available the table is initially sorted by this field
 	UiSortDirection sortDirection = UiSortDirection.ASC;
 
@@ -66,19 +71,18 @@ class UiTable extends UiComponent {
 
 	UiSelectionFrame selectionFrame;
 
+	boolean contextMenuEnabled = false;
+
+    command updateRefreshableConfig(UiRefreshableTableConfigUpdate config);
 	command clearTable();
-	command addData(int startRowIndex, List<UiTableClientRecord> data, int totalNumberOfRecords, String sortField, UiSortDirection sortDirection, boolean clearTableCache);
-	command removeData(List<Integer> ids);
-	command insertRows(int index, List<UiTableClientRecord> data);
-	command deleteRows(List<Integer> ids);
-    command updateRecord(UiTableClientRecord record);
+	command updateData(int startIndex, List<Integer> recordIds, List<UiTableClientRecord> newRecords, int totalNumberOfRecords);
+	command setSorting(String sortField, UiSortDirection sortDirection);
     command setCellValue(int recordId, String columnPropertyName, Object value);
-	command setChildrenData(int parentRecordId, List<UiTableClientRecord> data);
 	command markTableField(int recordId, String columnPropertyName, boolean mark); //mark or unmark the field to indicate errors or missing data
 	command clearAllFieldMarkings();
 	command setRecordBold(int recordId, boolean bold); //TODO
-	command selectRows(List<Integer> recordIds, boolean scrollToFirstRecord /* TODO */);
-	command editCellIfAvailable(int recordId, String propertyName);
+	command selectRecords(List<Integer> recordIds, boolean scrollToFirstRecord);
+	command selectRows(List<Integer> rowIndexes, boolean scrollToFirstRowIndex);
 	command cancelEditingCell(int recordId, String propertyName);
 	command focusCell(int recordId, String columnPropertyName);
     command setSingleCellMessages(int recordId, String columnPropertyName, List<UiFieldMessage> messages);
@@ -86,14 +90,18 @@ class UiTable extends UiComponent {
     command setColumnMessages(String columnPropertyName, List<UiFieldMessage> messages);
     command addColumns(List<UiTableColumn> column, int index);
     command removeColumns(List<String> columnName);
+    command setColumnVisibility(String columnPropertyName, boolean visible);
+	command setContextMenuContent(int requestId, UiComponent* component);
+	command closeContextMenu(int requestId);
 
+	event cellClicked(int recordId, String columnPropertyName);
 	event cellEditingStarted(int recordId, String columnPropertyName, Object currentValue);
 	event cellEditingStopped(int recordId, String columnPropertyName);
-	event rowSelected(int recordId, boolean isRightMouseButton /* TODO */, boolean isDoubleClick /* TODO */); // TODO what if the user selects more than one row?
-	event multipleRowsSelected(List<Integer> recordIds); // send this event if the user selects more than one row. In this case, do not send rowSelected
+	event cellValueChanged(int recordId, String columnPropertyName, Object value);
+	event rowsSelected(List<Integer> recordIds);
 	event sortingChanged(String sortField, UiSortDirection sortDirection); // sent when the user clicks on a sortable header column
-	event displayedRangeChanged(int startIndex, int length, List<Integer> displayedRecordIds, UiTableDataRequest dataRequest); //sent when the virtual view port gets outside of the buffered data, if sortField is not empty require sorting via this field
-	event requestNestedData(int recordId);
+	event displayedRangeChanged(int startIndex, int length);
+	event contextMenuRequested(int requestId, int recordId);
 
 	event fieldOrderChange(String columnPropertyName, int position); //zero based
 	event columnSizeChange(String columnPropertyName, int size);
@@ -101,17 +109,31 @@ class UiTable extends UiComponent {
 	// =========== header/footer row ("outerRow") ===========
 	boolean showHeaderRow = false;
     int headerRowBorderWidth = 1; // even in list mode! the border will be there but transparent!
-    UiColor headerRowBorderColor = new UiColor(204, 204, 204);
+    String headerRowBorderColor = "rgb(204, 204, 204)";
     int headerRowHeight = 28;
-    UiColor headerRowBackgroundColor = new UiColor(0, 0, 0).setAlpha(0.05f);
-    Dictionary<UiField*> headerRowFields;
+    String headerRowBackgroundColor = "rgba(0, 0, 0, 0.05)";
+    command setHeaderRowField(String columnName, UiField* field);
 
 	boolean showFooterRow = false;
     int footerRowBorderWidth = 1; // even in list mode! the border will be there but transparent!
-    UiColor footerRowBorderColor = new UiColor(204, 204, 204);
+    String footerRowBorderColor = "rgb(204, 204, 204)";
     int footerRowHeight = 28;
-    UiColor footerRowBackgroundColor = new UiColor(0, 0, 0).setAlpha(0.05f);
-    Dictionary<UiField*> footerRowFields;
+    String footerRowBackgroundColor = "rgba(0, 0, 0, 0.05)";
+    command setFooterRowField(String columnName, UiField* field);
+}
+
+class UiRefreshableTableConfigUpdate {
+    boolean forceFitWidth;
+    int rowHeight;
+    boolean allowMultiRowSelection;
+    int rowBorderWidth;
+    boolean textSelectionEnabled;
+    boolean editable;
+    boolean showHeaderRow;
+    int headerRowHeight;
+    boolean showFooterRow;
+    int footerRowHeight;
+    boolean autoHeight;
 }
 
 @TypeScriptFactory
@@ -128,7 +150,7 @@ class UiTableCellMessages {
 }
 
 class UiSelectionFrame {
-	UiColor color = new UiColor(102, 174, 232);
+	String color = "rgb(102, 174, 232)";
 	int borderWidth = 2;
 	int animationDuration = 100; // ms
 	int glowingWidth = 5;
@@ -141,4 +163,6 @@ class UiTableClientRecord extends UiIdentifiableClientRecord {
 	List<String> markings;
 	boolean selected;
 	boolean bold;
+	Dictionary<String> cssStyle;
+	Dictionary<Dictionary<Object>> displayTemplateValues;
 }
diff --git a/teamapps-ui-api/src/main/dto/UiTemplate.dto b/teamapps-ui-api/src/main/dto/UiTemplate.dto
index 49eb1bdb6..1cdab9869 100644
--- a/teamapps-ui-api/src/main/dto/UiTemplate.dto
+++ b/teamapps-ui-api/src/main/dto/UiTemplate.dto
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -25,66 +25,3 @@ class UiTemplateReference implements UiTemplate {
 	required String templateId;
 }
 
-class UiTextCellTemplate implements UiTemplate {
-	UiImageTemplate imageTemplate;
-	String imagePropertyName;
-	UiIconPosition iconPosition = UiIconPosition.LEFT_MIDDLE;
-	int imageSpacing = 0;
-	int horizontalPadding = 2;
-	int verticalPadding = 2;
-	required List<UiTextCellTemplateElement> textElements;
-	int minHeight;
-	int maxHeight;
-	enum {
-		JUSTIFY_TOP,
-		JUSTIFY_CENTER,
-		JUSTIFY_CENTER_OVERFLOW_BOTTOM
-	} justifyLines = JustifyLines.JUSTIFY_CENTER_OVERFLOW_BOTTOM;
-}
-
-abstract class UiTextCellTemplateElement {
-	required int line; //starting with 0 (y-coordinate)
-	required int elementIndex; //starting with 0; (x-coordinate)
-	required String propertyName; //the name of the property in the record
-	enum {LEFT, CENTERED, RIGHT} align = Align.LEFT;
-	int marginTop;
-	int marginLeft;
-	int marginBottom;
-	int marginRight;
-}
-
-
-class UiTextCellTemplateTextElement extends UiTextCellTemplateElement {
-	String color; //if color is empty use default color
-	boolean bold;
-	boolean underline;
-	boolean italic;
-	boolean badge;
-	boolean noWrap; // if true: no line wrapping
-	String badgeColorProperty; // badge color is determined as follows: evaluate(badgeColorProperty) || color || a decent blue
-	float fontSize = 1; // relative to the default font size
-	float lineHeight = 1.1f; // relative to the font size (!!)
-	boolean noHorizontalSpace; //if true, text elements are concatenated without space in between
-}
-
-class UiTextCellTemplateImageElement extends UiTextCellTemplateElement {
-	required UiImageTemplate imageTemplate;
-}
-
-class UiImageTemplate { //if value starts with 'icon:', then use icon path of the config (e.g. icons-path/empty-value)
-	required UiImageFormatting defaultFormatting;
-	UiImageFormatting iconFormatting; //if not set use defaultFormatting
-	String emptyImage;
-}
-
-class UiImageFormatting {
-	int width; //if width AND height are 0 use the actual image width
-	int height; //if width AND height are 0 use the actual image height
-	enum { ORIGINAL, ROUNDED, CIRCLE } cornerShape = CornerShape.ROUNDED;
-	boolean shadow = false;
-	float borderWidth = 0;
-	String borderColor;
-}
-
-enum UiIconPosition {TOP_LEFT, TOP_CENTER, TOP_RIGHT, LEFT_TOP, LEFT_MIDDLE, LEFT_BOTTOM, RIGHT_TOP, RIGHT_MIDDLE, RIGHT_BOTTOM}
-
diff --git a/teamapps-ui-api/src/main/dto/UiTextColorMarkerField.dto b/teamapps-ui-api/src/main/dto/UiTextColorMarkerField.dto
new file mode 100644
index 000000000..94fa42f49
--- /dev/null
+++ b/teamapps-ui-api/src/main/dto/UiTextColorMarkerField.dto
@@ -0,0 +1,46 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+class UiTextColorMarkerField extends UiField {
+    List<UiTextColorMarkerFieldMarkerDefinition> markerDefinitions;
+    boolean toolbarEnabled;
+
+    command setMarkerDefinitions(List<UiTextColorMarkerFieldMarkerDefinition> markerDefinitions, UiTextColorMarkerFieldValue newValue);
+    command setToolbarEnabled(boolean enabled);
+
+    event textSelected(int start, int end);
+}
+
+class UiTextColorMarkerFieldMarkerDefinition {
+    required int id;
+    String borderColor;
+    String backgroundColor;
+    String hint;
+}
+
+class UiTextColorMarkerFieldValue {
+    required String text;
+    required List<UiTextColorMarkerFieldMarker> markers;
+}
+
+class UiTextColorMarkerFieldMarker {
+    required int markerDefinitionId;
+    required int start;
+    required int end;
+}
diff --git a/teamapps-ui-api/src/main/dto/UiTimeGraph.dto b/teamapps-ui-api/src/main/dto/UiTimeGraph.dto
index 2fb1e6e37..d8261c079 100644
--- a/teamapps-ui-api/src/main/dto/UiTimeGraph.dto
+++ b/teamapps-ui-api/src/main/dto/UiTimeGraph.dto
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -22,25 +22,26 @@ class UiTimeGraph extends UiComponent {
 	required UiLongInterval intervalX;
 	required List<UiTimeChartZoomLevel> zoomLevels;
 	required int maxPixelsBetweenDataPoints;  // ... before switching to higher zoom level
-	required Dictionary<UiLineChartLineFormat> lineFormats;
+	required List<UiGraph> graphs;
 	UiScaleType yScaleType = UiScaleType.LINEAR;
 	UiLineChartMouseScrollZoomPanMode mouseScrollZoomPanMode = UiLineChartMouseScrollZoomPanMode.ENABLED;
+	String locale;
+	String timeZoneId = null;
 
 	command setIntervalX(UiLongInterval intervalX);
 	command setMaxPixelsBetweenDataPoints(int maxPixelsBetweenDataPoints);
-	command addData(int zoomLevel, UiLongInterval intervalX, Dictionary<List<UiTimeGraphDataPoint>> data);
-	command resetAllData(List<UiTimeChartZoomLevel> newZoomLevels); // client will request data again (corresponding to zoom and component size)
-	command replaceAllData(List<UiTimeChartZoomLevel> newZoomLevels, int zoomLevel, UiLongInterval intervalX, Dictionary<List<UiTimeGraphDataPoint>> data); // acts similar to resetAllData() + addData(), but without the extra round trip of a client request for the new data
+	command addData(int zoomLevel, Dictionary<UiGraphData> data);
+	command resetGraphData(String graphId); // client will request data again (corresponding to zoom and component size)
+	command resetAllData(UiLongInterval intervalX, List<UiTimeChartZoomLevel> newZoomLevels); // resets all data
 	command setMouseScrollZoomPanMode(UiLineChartMouseScrollZoomPanMode mouseScrollZoomPanMode);
 	command setSelectedInterval(UiLongInterval intervalX);
-	command setLineFormats(Dictionary<UiLineChartLineFormat> lineFormats);
-	
-	command setIntervalY(String lineId, UiLongInterval intervalY);
-	command setYScaleType(String lineId, UiScaleType yScaleType);
-	command setYScaleZoomMode(String lineId, UiLineChartYScaleZoomMode yScaleZoomMode);
-
-	event dataNeeded(int zoomLevelIndex, UiLongInterval neededIntervalX);
-	event zoomed(UiLongInterval intervalX, int zoomLevelIndex);
+
+	command setGraphs(List<UiGraph> graphs);
+	command addOrUpdateGraph(UiGraph graph);
+
+	command zoomTo(UiLongInterval intervalX);
+
+	event zoomed(UiLongInterval displayedInterval, int zoomLevelIndex, double millisecondsPerPixel, Dictionary<List<UiLongInterval>> neededIntervalsByGraphId);
 	event intervalSelected(UiLongInterval intervalX);
 }
 
@@ -60,28 +61,83 @@ class UiTimeChartZoomLevel {
 	required long approximateMillisecondsPerDataPoint;
 }
 
-class UiLineChartLineFormat {
+// ==== GRAPHS
+
+interface UiGraph {
+	String id;
+	boolean yAxisVisible;
+	String yAxisColor;
+	String yAxisLabel;
+	int maxTickDigits;
+	UiScaleType yScaleType;
+	UiLongInterval intervalY;
+	UiLineChartYScaleZoomMode yScaleZoomMode;
+	boolean yZeroLineVisible;
+}
+
+class UiLineGraph implements UiGraph {
+	String dataSeriesId;
 	UiLineChartCurveType graphType = UiLineChartCurveType.MONOTONE;
     float dataDotRadius;
-    UiColor lineColorScaleMin = new UiColor(73, 128, 192);
-    UiColor lineColorScaleMax = new UiColor(73, 128, 192);
-    UiColor areaColorScaleMin = new UiColor(255, 255, 255).setAlpha(0f);
-    UiColor areaColorScaleMax = new UiColor(255, 255, 255).setAlpha(0f);
-    UiColor yAxisColor = new UiColor(0, 0, 0);
-
-    UiScaleType yScaleType = UiScaleType.LINEAR;
-    UiLongInterval intervalY;
-	UiLineChartYScaleZoomMode yScaleZoomMode = UiLineChartYScaleZoomMode.DYNAMIC_INCLUDING_ZERO;
+    String lineColorScaleMin;
+    String lineColorScaleMax;
+    String areaColorScaleMin;
+    String areaColorScaleMax;
+}
+
+class UiHoseGraph implements UiGraph {
+	String upperBoundDataSeriesId;
+	String middleLineDataSeriesId;
+	String lowerBoundDataSeriesId;
+	UiLineChartCurveType graphType = UiLineChartCurveType.MONOTONE;
+    float dataDotRadius;
+    String areaColor;
+    boolean stripedArea;
+    String middleLineColor;
+	String lowerLineColor;
+	String upperLineColor;
+}
+
+class UiIncidentGraph implements UiGraph {
+    // no config at the moment...
 }
 
-class UiTimeGraphSeriesData {
-    required List<UiTimeGraphDataPoint> data;
+class UiGraphGroup implements UiGraph {
+	List<UiGraph> graphs;
 }
 
-class UiTimeGraphDataPoint {
+// ==== DATA
+
+interface UiGraphData {
+     required UiLongInterval interval;
+}
+class UiLineGraphData implements UiGraphData {
+    required List<UiLineGraphDataPoint> dataPoints;
+}
+class UiLineGraphDataPoint {
 	required double x;
 	required double y;
 }
+class UiIncidentGraphData implements UiGraphData {
+    required List<UiIncidentGraphDataPoint> dataPoints;
+}
+class UiIncidentGraphDataPoint {
+    required double x1;
+	required double x2;
+	required double y;
+	required String color;
+	required String tooltipHtml;
+}
+class UiHoseGraphData implements UiGraphData {
+    required UiLineGraphData lowerLineData;
+    required UiLineGraphData middleLineData;
+    required UiLineGraphData upperLineData;
+}
+class UiGraphGroupData implements UiGraphData {
+    required Dictionary<UiGraphData> graphDataByGraphId;
+}
+
+
 
 @TypeScriptFactory
 class UiLongInterval {
@@ -101,6 +157,8 @@ enum UiLineChartCurveType {
 }
 
 enum UiScaleType {
-	LINEAR, LOG10
+	LINEAR,
+	LOG10,
+	SYMLOG // see https://github.com/d3/d3-scale/blob/main/README.md#symlog-scales
 }
 
diff --git a/teamapps-ui-api/src/main/dto/UiToolButton.dto b/teamapps-ui-api/src/main/dto/UiToolButton.dto
index 70be34e86..dfcabbd16 100644
--- a/teamapps-ui-api/src/main/dto/UiToolButton.dto
+++ b/teamapps-ui-api/src/main/dto/UiToolButton.dto
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,9 +19,12 @@
  */
 @TypeScriptFactory
 class UiToolButton extends UiComponent {
-	required String icon; // hack to make the ux ToolButton not require SessionContext
+	required String icon;
+	Integer iconSize; // if null, default (defined by css)
+    String caption;
 	required String popoverText;
 	boolean grayOutIfNotHovered = true;
+	String title;
 
 	int minDropDownWidth = 450;
 	int minDropDownHeight = 200;
@@ -29,11 +32,14 @@ class UiToolButton extends UiComponent {
 	UiComponent* dropDownComponent;
 
     command setIcon(String icon);
-    command setPopoverText(String popoverText);
+    command setIconSize(Integer iconSize);
+    command setCaption(String caption);
+    command setTitle(String title);
     command setGrayOutIfNotHovered(boolean grayOutIfNotHovered);
 	command setDropDownSize(int minDropDownWidth, int minDropDownHeight);
 	command setOpenDropDownIfNotSet(boolean openDropDownIfNotSet);
 	command setDropDownComponent(UiComponent* dropDownComponent);
+	command closeDropDown();
 
 	event clicked();
 	event dropDownOpened();
diff --git a/teamapps-ui-api/src/main/dto/UiToolbar.dto b/teamapps-ui-api/src/main/dto/UiToolbar.dto
index 5981f08d2..8789391bc 100644
--- a/teamapps-ui-api/src/main/dto/UiToolbar.dto
+++ b/teamapps-ui-api/src/main/dto/UiToolbar.dto
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -18,23 +18,23 @@
  * =========================LICENSE_END==================================
  */
 abstract class AbstractUiToolContainer extends UiComponent {
-	required List<UiToolbarButtonGroup> buttonGroups; // horizontally aligned (no flow)
-	UiColor backgroundColor = new UiColor(255, 255, 255).setAlpha(0.84f);
+	required List<UiToolbarButtonGroup> leftButtonGroups; // horizontally aligned (no flow)
+	required List<UiToolbarButtonGroup> rightButtonGroups; // horizontally aligned (no flow)
+	String backgroundColor = "rgba(255, 255, 255, 0.84)";
 
 	command setButtonVisible(String groupId, String buttonId, boolean visible);
+	command setButtonColors(String groupId, String buttonId, String backgroundColor, String hoverBackgroundColor);
 	command setButtonGroupVisible(String groupId, boolean visible);
 	command addButton(String groupId, UiToolbarButton button, String neighborButtonId, boolean beforeNeighbor); //if neighborButtonId is empty, add at last position
 	command removeButton(String groupId, String buttonId);
-	command addButtonGroup(UiToolbarButtonGroup group);
+	command addButtonGroup(UiToolbarButtonGroup group, boolean rightSide);
 	command removeButtonGroup(String groupId);
 	
 	command setButtonHasDropDown(String groupId, String buttonId, boolean hasDropDown);
 	command setDropDownComponent(String groupId, String buttonId, UiComponent* component);
-	
-	command updateButtonGroups(List<UiToolbarButtonGroup> buttonGroups); // TODO not implemented. really needed?
+	command closeDropDown(String groupId, String buttonId);
 
 	event toolbarButtonClick(String groupId, String buttonId, UiDropDownButtonClickInfo dropDownClickInfo); // dropDownInfo is null for non-dropdown buttons!
-	event toolbarDropDownItemClick(String groupId, String buttonId, String dropDownGroupId, Object dropDownItemId);
 }
 
 enum UiToolbarButtonGroupPosition {
@@ -62,14 +62,19 @@ class UiToolbarButtonGroup {
 
 class UiToolbarButton {
 	required String buttonId;
+	String debuggingId;
 	required UiTemplate template;
 	boolean visible = true;
 	required Object recordData;
-	String togglesFullScreenOnComponent; // If this is set, this button makes the specified component enter fullscreen. The button still sends events to the server.
 	String openNewTabWithUrl; // If this is set, when the user clicks this button, the specified URL is navigated to in a new tab. The button still sends events to the server.
+	UiComponent* togglesFullScreenOnComponent; // If this is set, this button makes the specified component will enter fullscreen. The button still sends events to the server.
+	UiComponent* startPlaybackComponent; // If this is set, when the user clicks this button, the play() method of the specified component will be called (if it has such a method).
 	boolean hasDropDown;
 	UiComponent* dropDownComponent;
 	int dropDownPanelWidth = 450;
+
+	String backgroundColor;
+	String hoverBackgroundColor;
 }
 
 @TypeScriptFactory
diff --git a/teamapps-ui-api/src/main/dto/UiTree.dto b/teamapps-ui-api/src/main/dto/UiTree.dto
index 0c39d2d5e..d68cc5698 100644
--- a/teamapps-ui-api/src/main/dto/UiTree.dto
+++ b/teamapps-ui-api/src/main/dto/UiTree.dto
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -23,12 +23,12 @@ class UiTree extends UiComponent {
 
 	List<UiTreeRecord> initialData; //if available, use this as data source
 	Integer selectedNodeId;
-	UiTextMatchingMode textMatchingMode = UiTextMatchingMode.CONTAINS;
-	
+
 	boolean animate;
 	boolean showExpanders = true;
 	boolean openOnSelection = false;
 	boolean enforceSingleExpandedPath = false;
+	boolean contextMenuEnabled;
 
 	int indentation = 15; // indentation in pixels per level
 
@@ -36,8 +36,12 @@ class UiTree extends UiComponent {
 	command bulkUpdate(List<Integer> nodesToBeRemoved, List<UiTreeRecord> nodesToBeAdded);
 	command setSelectedNode(Integer recordId); // null = none selected
 	command registerTemplate(String id, UiTemplate template);
+    command setContextMenuContent(int requestId, UiComponent* component);
+    command closeContextMenu(int requestId);
 
 	event textInput(String text);
 	event nodeSelected(int nodeId); // TODO boolean isRightMouseButton, boolean isDoubleClick
+	event nodeExpansionChanged(int nodeId, boolean expanded);
 	event requestTreeData(int parentNodeId);
+    event contextMenuRequested(int requestId, int recordId);
 }
diff --git a/teamapps-ui-api/src/main/dto/UiTreeGraph.dto b/teamapps-ui-api/src/main/dto/UiTreeGraph.dto
new file mode 100644
index 000000000..0c693a6b7
--- /dev/null
+++ b/teamapps-ui-api/src/main/dto/UiTreeGraph.dto
@@ -0,0 +1,98 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+class UiTreeGraph extends UiComponent {
+    List<UiTreeGraphNode> nodes;
+
+	String backgroundColor = "rgba(0, 0, 0, 0)";
+    float zoomFactor = 1;
+    boolean compact;
+
+    int verticalLayerGap;
+    int sideListIndent;
+    int sideListVerticalGap;
+    int horizontalSiblingGap;
+    int horizontalNonSignlingGap;
+
+    command update(UiTreeGraph config);
+
+    command setZoomFactor(float zoomFactor); // > 0
+    command setNodes(List<UiTreeGraphNode> nodes);
+    command addNode(UiTreeGraphNode node);
+    command removeNode(String nodeId);
+    command setNodeExpanded(String nodeId, boolean expanded);
+    command updateNode(UiTreeGraphNode node);
+
+    command moveToRootNode();
+    command moveToNode(String nodeId);
+
+    event nodeClicked(String nodeId);
+    event nodeExpandedOrCollapsed(String nodeId, boolean expanded, boolean lazyLoad);
+    event parentExpandedOrCollapsed(String nodeId, boolean expanded, boolean lazyLoad);
+    event sideListExpandedOrCollapsed(String nodeId, boolean expanded);
+}
+
+class UiBaseTreeGraphNode {
+	required String id;
+    required int width;
+    required int height;
+    String backgroundColor = "rgb(255, 255, 255)";
+    String borderColor = "rgb(100, 100, 100)";
+    float borderWidth = 1;
+    float borderRadius = 0;
+
+    UiTreeGraphNodeImage image;
+    UiTreeGraphNodeIcon icon;
+
+    UiTemplate template;     // will get embedded using foreignObject
+    UiClientRecord record;   // will get embedded using foreignObject
+
+    String connectorLineColor = "rgb(100, 100, 100)"; // line to parent node
+    int connectorLineWidth;
+    String dashArray;
+}
+
+class UiTreeGraphNode extends UiBaseTreeGraphNode{
+    String parentId;
+    boolean parentExpandable = false;
+    boolean parentExpanded = true;
+
+    boolean expanded;
+    boolean hasLazyChildren = false;
+
+    List<UiBaseTreeGraphNode> sideListNodes;
+    boolean sideListExpanded;
+}
+
+class UiTreeGraphNodeImage {
+    required String url;
+    required int width;
+    required int height;
+    int centerTopDistance; //top distance of image center from top-left corner of node, e.g. -10 and height 30 means image will be 25 pixels above the top line of the node
+    int centerLeftDistance; //left distance of image center from top-left corner of node
+    enum { ORIGINAL, ROUNDED, CIRCLE } cornerShape = CornerShape.ROUNDED;
+    boolean shadow = false;
+    float borderWidth = 0;
+    String borderColor = "rgb(100, 100, 100)";
+}
+
+class UiTreeGraphNodeIcon {
+    required String icon;
+    required int size; //width = height
+}
diff --git a/teamapps-ui-api/src/main/dto/UiWebRtc.dto b/teamapps-ui-api/src/main/dto/UiWebRtc.dto
index 7ef96c609..4a9dc003f 100644
--- a/teamapps-ui-api/src/main/dto/UiWebRtc.dto
+++ b/teamapps-ui-api/src/main/dto/UiWebRtc.dto
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ui-api/src/main/dto/UiWorkspaceLayout.dto b/teamapps-ui-api/src/main/dto/UiWorkspaceLayout.dto
index 8937b7160..d3c006bc4 100644
--- a/teamapps-ui-api/src/main/dto/UiWorkspaceLayout.dto
+++ b/teamapps-ui-api/src/main/dto/UiWorkspaceLayout.dto
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -24,6 +24,7 @@ class UiWorkSpaceLayout extends UiComponent {
 	UiToolbar* toolbar;
 	String newWindowBackgroundImage;
 	String newWindowBlurredBackgroundImage;
+	UiMultiProgressDisplay* multiProgressDisplay;
 
 	command setToolbar(UiToolbar* toolbar);
 
@@ -43,6 +44,7 @@ class UiWorkSpaceLayout extends UiComponent {
 	command refreshViewComponent(String viewName, UiComponent* component);
 	command selectView(String viewName);
 	command setViewGroupPanelState(String viewGroupId, UiViewGroupPanelState panelState);
+	command setMultiProgressDisplay(UiMultiProgressDisplay* multiProgressDisplay);
 
     event layoutChanged(Dictionary<UiWorkSpaceLayoutItem> layoutsByWindowId); // root window has id "ROOT_WINDOW" TODO not yet sure if these events should get a little more fine-grained...
     event viewDraggedToNewWindow(String windowId, String viewName, Dictionary<UiWorkSpaceLayoutItem> layoutsByWindowId);
diff --git a/teamapps-ui-api/src/main/dto/fields/UiButton.dto b/teamapps-ui-api/src/main/dto/fields/UiButton.dto
new file mode 100644
index 000000000..1910400ae
--- /dev/null
+++ b/teamapps-ui-api/src/main/dto/fields/UiButton.dto
@@ -0,0 +1,40 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+class UiButton extends UiField {
+	required UiTemplate template;
+	required Object templateRecord;
+
+	int minDropDownWidth = 450;
+	int minDropDownHeight = 200;
+	boolean openDropDownIfNotSet = false;
+	UiComponent* dropDownComponent;
+	String onClickJavaScript;
+
+	command setTemplate(UiTemplate template, Object templateRecord);
+	command setTemplateRecord(Object templateRecord);
+	command setDropDownSize(int minDropDownWidth, int minDropDownHeight);
+	command setOpenDropDownIfNotSet(boolean openDropDownIfNotSet);
+	command setDropDownComponent(UiComponent* dropDownComponent);
+	command closeDropDown();
+	command setOnClickJavaScript(String onClickJavaScript);
+
+	event clicked();
+	event dropDownOpened();
+}
diff --git a/teamapps-ui-api/src/main/dto/fields/UiCheckBox.dto b/teamapps-ui-api/src/main/dto/fields/UiCheckBox.dto
new file mode 100644
index 000000000..26104a933
--- /dev/null
+++ b/teamapps-ui-api/src/main/dto/fields/UiCheckBox.dto
@@ -0,0 +1,31 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+class UiCheckBox extends UiField {
+	String caption; // displayed on the right side of the checkbox
+	String backgroundColor = "rgb(255, 255, 255)";
+	String checkColor = "rgb(70, 70, 70)";
+	String borderColor = "rgb(123, 123, 123)";
+	boolean htmlEnabled = false;
+
+	command setCaption(String caption);
+	command setBackgroundColor(String backgroundColor);
+	command setCheckColor(String checkColor);
+	command setBorderColor(String borderColor);
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/data/value/DataType.java b/teamapps-ui-api/src/main/dto/fields/UiColorPicker.dto
similarity index 79%
rename from teamapps-ux/src/main/java/org/teamapps/data/value/DataType.java
rename to teamapps-ui-api/src/main/dto/fields/UiColorPicker.dto
index 4f071b4ad..c9bd560fa 100644
--- a/teamapps-ux/src/main/java/org/teamapps/data/value/DataType.java
+++ b/teamapps-ui-api/src/main/dto/fields/UiColorPicker.dto
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,19 +17,8 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-package org.teamapps.data.value;
-
-public enum  DataType {
-
-	INT,
-	LONG,
-	FLOAT,
-	DOUBLE,
-	BOOLEAN,
-	STRING,
-	MONEY,
-	RECORD,
-	RECORD_LIST,
-	CAPTION,
-
+class UiColorPicker extends UiField {
+	String defaultColor = "rgb(0, 0, 0)";
+	String saveButtonCaption = "Save";
+    String clearButtonCaption = "Clear";
 }
diff --git a/teamapps-ui-api/src/main/dto/fields/UiComboBox.dto b/teamapps-ui-api/src/main/dto/fields/UiComboBox.dto
new file mode 100644
index 000000000..8bd65f016
--- /dev/null
+++ b/teamapps-ui-api/src/main/dto/fields/UiComboBox.dto
@@ -0,0 +1,49 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+
+abstract class AbstractUiComboBox extends UiField implements UiTextInputHandlingField {
+    Dictionary<UiTemplate> templates;
+    boolean showDropDownButton = true;
+    boolean showDropDownAfterResultsArrive = false;
+    boolean highlightFirstResultEntry = true;
+    boolean showHighlighting; // TODO highlight any line of the template, but only corresponding to the textMatchingMode
+    boolean autoComplete = true; // if true, by typing any letter, the first matching will be selected (keeping all not yet entered letters int the text box selected)
+    int textHighlightingEntryLimit = 100;
+    boolean allowAnyText;
+    boolean showClearButton;
+    boolean animate;
+    boolean showExpanders = true;
+    String placeholderText;
+    Integer dropDownMinWidth;
+    Integer dropDownMaxHeight;
+
+    query lazyChildren(int parentId) returns List<UiComboBoxTreeRecord>;
+    query retrieveDropdownEntries(String queryString) returns List<UiComboBoxTreeRecord>;
+
+    command registerTemplate(String id, UiTemplate template);
+    command replaceFreeTextEntry(String freeText, UiComboBoxTreeRecord newEntry);
+}
+
+
+class UiComboBox extends AbstractUiComboBox {
+	List<UiToolButton*> toolButtons;
+
+    command setToolButtons(List<UiToolButton*> toolButtons);
+}
diff --git a/teamapps-ui-api/src/main/dto/fields/UiComponentField.dto b/teamapps-ui-api/src/main/dto/fields/UiComponentField.dto
new file mode 100644
index 000000000..42d22b4b0
--- /dev/null
+++ b/teamapps-ui-api/src/main/dto/fields/UiComponentField.dto
@@ -0,0 +1,28 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+class UiComponentField extends UiField {
+	UiComponent* component;
+	int height; // 0 = the height will be determined by the component's content and context
+	boolean bordered;
+
+	command setComponent(UiComponent* component);
+	command setHeight(int height);
+	command setBordered(boolean bordered);
+}
diff --git a/teamapps-ui-api/src/main/dto/fields/UiCompositeField.dto b/teamapps-ui-api/src/main/dto/fields/UiCompositeField.dto
new file mode 100644
index 000000000..cb696c741
--- /dev/null
+++ b/teamapps-ui-api/src/main/dto/fields/UiCompositeField.dto
@@ -0,0 +1,47 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+/**
+Sub-fields' are evaluated directly against the main Object of the Form/Table.
+*/
+class UiCompositeField extends UiField { // TODO #ux
+	required List<UiColumnDefinition> columnDefinitions;
+    required List<Integer> rowHeights;
+    required List<UiCompositeSubField> subFields;
+    int horizontalCellSpacing = 2;
+    int verticalCellSpacing = 2;
+    int padding = 0;
+    boolean drawFieldBorders;
+}
+
+class UiColumnDefinition {
+	required float width; // values <1 are treated relative widths. Values >= 1 are treated fixed/absolute widths in px.
+	required int minWidth;
+}
+
+class UiCompositeSubField {
+	required String propertyName;
+	required int row;
+	required int col;
+	required UiField* field;
+	int rowSpan = 1;
+	int colSpan = 1;
+	int tabIndex = 0; // tab-index within the UiCompositeField*. Lower values are first. Default is 0. <0: focusable but not reachable via tab; 0: focusable and reachable via tab, ordered by its position; >0: focusable, order defined by tabindex
+	String visibilityPropertyName; // nullable; name of a boolean field in the record data which determines whether this subField is to be displayed. If multiple visible subfields are in the same position, the last one must be shown and the others are hidden AND a warning must be written to the console.
+}
diff --git a/teamapps-ui-api/src/main/dto/fields/UiCurrencyField.dto b/teamapps-ui-api/src/main/dto/fields/UiCurrencyField.dto
new file mode 100644
index 000000000..84fa5132a
--- /dev/null
+++ b/teamapps-ui-api/src/main/dto/fields/UiCurrencyField.dto
@@ -0,0 +1,48 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+// the read-only view (e.g. in a table) shows the currency indicator as part of the value text (e.g. "23.00 EUR" or "23.50 €")
+//the value is always a long in cents for accuracy
+class UiCurrencyField extends UiField implements UiTextInputHandlingField {
+	String locale;
+	List<UiCurrencyUnit> currencyUnits; //list of ISO 4217 currencies - e.g. "USD", "EUR", etc. to be displayed as dropdown selection if available
+	int fixedPrecision = -1; // if >= 0, this overwrites the corresponding currency unit precision
+	boolean showCurrencyBeforeAmount; // If true, the currency indicator is on the left of the amount. If false, it is on the right of the amount.
+	boolean showCurrencySymbol; // If false, show "EUR", "USD", etc. as selected value of dropdown button. If true, show "$" for "USD", "€" for "EUR". The dopdown list shows always both ISO code and currency symbol (e.g. "$ (USD)" or "€ (EUR)"). Use "¤" as generic symbol (as defined in ISO standard).
+	boolean alphaKeysQueryForCurrency = true; //if true a hit on e will query all currencies starting with e; autocomplete
+
+	command setLocale(String locale);
+	command setCurrencyUnits(List<UiCurrencyUnit> currencyUnits);
+	command setFixedPrecision(int fixedPrecision);
+	command setShowCurrencyBeforeAmount(boolean showCurrencyBeforeAmount);
+	command setShowCurrencySymbol(boolean showCurrencySymbol);
+}
+
+class UiCurrencyUnit {
+    String code;
+    int fractionDigits;
+    String name;
+    String symbol;
+}
+
+@TypeScriptFactory
+class UiCurrencyValue {
+	required UiCurrencyUnit currencyUnit;
+	required String amount; // big decimal!
+}
diff --git a/teamapps-ui-api/src/main/dto/fields/UiDateField.dto b/teamapps-ui-api/src/main/dto/fields/UiDateField.dto
new file mode 100644
index 000000000..74ed3719d
--- /dev/null
+++ b/teamapps-ui-api/src/main/dto/fields/UiDateField.dto
@@ -0,0 +1,40 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+@TypeScriptFactory
+class UiLocalDate {
+    required int year;
+    required int month;
+    required int day;
+}
+
+class UiLocalDateField extends UiField {
+    boolean showDropDownButton = true;
+	boolean showClearButton;
+	boolean favorPastDates = false;
+	String locale;
+	UiDateTimeFormatDescriptor dateFormat = null; // if null, UiConfiguration.dateFormat applies
+	UiLocalDate defaultSuggestionDate; // null == today
+	boolean shuffledFormatSuggestionsEnabled;
+	enum {CALENDAR, CALENDAR_SUGGESTION_LIST, SUGGESTION_LIST} dropDownMode = DropDownMode.CALENDAR_SUGGESTION_LIST;
+	String placeholderText;
+	boolean calendarIconEnabled;
+
+    command update(UiLocalDateField config);
+}
diff --git a/teamapps-ui-api/src/main/dto/fields/UiDateTimeField.dto b/teamapps-ui-api/src/main/dto/fields/UiDateTimeField.dto
new file mode 100644
index 000000000..742598def
--- /dev/null
+++ b/teamapps-ui-api/src/main/dto/fields/UiDateTimeField.dto
@@ -0,0 +1,39 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+abstract class AbstractUiDateTimeField extends UiField {
+	boolean showDropDownButton = true;
+	boolean favorPastDates = false; // TODO!!!
+	String locale;
+	UiDateTimeFormatDescriptor dateFormat = null; // if null, UiConfiguration.dateFormat applies
+	UiDateTimeFormatDescriptor timeFormat = null; // if null, UiConfiguration.timeFormat applies
+
+	command setShowDropDownButton(boolean showDropDownButton);
+	command setFavorPastDates(boolean favorPastDates);
+	command setLocaleAndFormats(String locale, UiDateTimeFormatDescriptor dateFormat, UiDateTimeFormatDescriptor timeFormat);
+}
+
+class UiLocalDateTimeField extends AbstractUiDateTimeField {
+}
+
+class UiInstantDateTimeField extends AbstractUiDateTimeField {
+	String timeZoneId = null; // if null, UiConfiguration.timeZoneId applies
+
+	command setTimeZoneId(String timeZoneId);
+}
diff --git a/teamapps-ui-api/src/main/dto/fields/UiDisplayField.dto b/teamapps-ui-api/src/main/dto/fields/UiDisplayField.dto
new file mode 100644
index 000000000..092204dff
--- /dev/null
+++ b/teamapps-ui-api/src/main/dto/fields/UiDisplayField.dto
@@ -0,0 +1,28 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+class UiDisplayField extends UiField {
+	boolean showBorder; //if true, show a border like for text fields
+	boolean showHtml; //if true, treat the value as valid HTML
+	boolean removeStyleTags = true;
+
+	command setShowBorder(boolean showBorder);
+	command setShowHtml(boolean showHtml);
+	command setRemoveStyleTags(boolean removeStyleTags);
+}
diff --git a/teamapps-ui-api/src/main/dto/fields/UiField.dto b/teamapps-ui-api/src/main/dto/fields/UiField.dto
new file mode 100644
index 000000000..7dbc7d714
--- /dev/null
+++ b/teamapps-ui-api/src/main/dto/fields/UiField.dto
@@ -0,0 +1,40 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+enum UiFieldEditingMode {
+	EDITABLE,
+	EDITABLE_IF_FOCUSED, // UiGridForm and UiCompositeField only!!
+	DISABLED,
+	READONLY
+}
+
+abstract class UiField extends UiComponent {
+	UiFieldEditingMode editingMode = UiFieldEditingMode.EDITABLE;
+	Object value;
+	List<UiFieldMessage> fieldMessages;
+
+	event valueChanged(Object value);
+	event focusGained(); // I'd love to just call this focus, but the current state of communication protocol does not allow for duplicate names (even vs command).
+	event blur();
+
+	command setEditingMode(UiFieldEditingMode editingMode);
+	command setValue(Object value);
+    command focus();
+	command setFieldMessages(List<UiFieldMessage> fieldMessages);
+}
diff --git a/teamapps-ui-api/src/main/dto/fields/UiFileField.dto b/teamapps-ui-api/src/main/dto/fields/UiFileField.dto
new file mode 100644
index 000000000..818369765
--- /dev/null
+++ b/teamapps-ui-api/src/main/dto/fields/UiFileField.dto
@@ -0,0 +1,136 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+
+
+/**
+TODO:
+FORM
+  uploaded files section:
+	- custom items (UiTextCell) with remove button ("x")
+	- floating or list style
+	- on click (server side handling)
+		a) download file
+		b) render dropdown underneath the file // how??
+  files to be uploaded section:
+	- same as currently implemented
+  add files button:
+	- same as currently implemented
+	- set color, icon, text, height
+	- hide when max number of files reached
+LIST
+  uploaded files section:
+	- custom items (UiTextCell)
+	- always floating
+	- on click (server side handling)
+		a) download file
+		b) render dropdown underneath the file
+TABLE (editable mode)
+  uploaded files section:
+	- same as list
+	- on click open UiWindow (non-modal?) with a form containing only the UiFileField.
+  DnD:
+	- only if not performance breaking --> opens window
+ */
+class UiFileField extends UiField {
+	required UiTemplate itemTemplate; // template for rendering the uploaded files section. All data for this section comes from the server (field value)
+	long maxBytesPerFile = 5000000;
+	String uploadUrl = "/upload"; // May point anywhere.
+	String fileTooLargeMessage = "File too large!";
+	String uploadErrorMessage = "Error while transmitting file...";
+	UiFileFieldDisplayType displayType = UiFileFieldDisplayType.LIST;
+	int maxFiles; // the max number of files to be uploaded in total for this field
+	List<String> acceptedFileTypes;
+	required UiTemplate uploadButtonTemplate;
+	required Object uploadButtonData;
+	boolean showEntriesAsButtonsOnHover = false;
+
+    event uploadTooLarge(String fileItemUuid, String fileName, String mimeType, long sizeInBytes);
+	event uploadStarted(String fileItemUuid, String fileName, String mimeType, long sizeInBytes, int incompleteUploadsCount);
+	event uploadCanceled(String fileItemUuid, String fileName, String mimeType, long sizeInBytes, int incompleteUploadsCount);
+	event uploadFailed(String fileItemUuid, String fileName, String mimeType, long sizeInBytes, int incompleteUploadsCount);
+	event uploadSuccessful(String fileItemUuid, String uploadedFileUuid, String fileName, String mimeType, long sizeInBytes, int incompleteUploadsCount);
+	event fileItemClicked(int clientId);
+	event fileItemRemoveButtonClicked(int clientId);
+
+	command replaceFileItem(String fileItemUuid, UiIdentifiableClientRecord data);
+	command setItemTemplate(UiTemplate itemTemplate);
+	command setMaxBytesPerFile(long maxBytesPerFile);
+	command setUploadUrl(String uploadUrl);
+	command setDisplayType (UiFileFieldDisplayType displayType);
+	command setMaxFiles(int maxFiles);
+	command setAcceptedFileTypes(List<String> acceptedFileTypes);
+	command setUploadButtonTemplate(UiTemplate uploadButtonTemplate);
+    command setUploadButtonData(Object uploadButtonData);
+    command setShowEntriesAsButtonsOnHover(boolean showEntriesAsButtonsOnHover);
+    command cancelAllUploads();
+    command cancelUpload(String fileItemUuid);
+}
+
+enum UiFileFieldDisplayType {
+	LIST, FLOATING
+}
+
+class UiSimpleFileField extends UiField {
+	String browseButtonIcon;
+	String browseButtonCaption = "Select";
+	String uploadUrl = "/upload"; // May point anywhere.
+	long maxBytesPerFile = 5000000;
+	String fileTooLargeMessage = "File too large!";
+	String uploadErrorMessage = "Error while transmitting file...";
+	int maxFiles = 0; // the max number of files to be uploaded in total for this field
+    List<String> acceptedFileTypes;
+	UiFileFieldDisplayType displayMode = UiFileFieldDisplayType.LIST;
+
+	List<UiFileItem> fileItems;
+
+	event uploadInitiatedByUser(String uuid, String fileName, String mimeType, long sizeInBytes);
+    event uploadTooLarge(String fileItemUuid);
+	event uploadStarted(String fileItemUuid);
+	event uploadCanceled(String fileItemUuid);
+	event uploadFailed(String fileItemUuid);
+	event uploadSuccessful(String fileItemUuid, String uploadedFileUuid);
+	event fileItemClicked(String fileItemUuid);
+	event fileItemRemoved(String fileItemUuid);
+
+	command addFileItem(UiFileItem item);
+	command updateFileItem(UiFileItem item);
+	command removeFileItem(String itemUuid);
+
+	command setBrowseButtonIcon(String browseButtonIcon);
+	command setBrowseButtonCaption(String browseButtonCaption);
+	command setUploadUrl(String uploadUrl);
+	command setMaxBytesPerFile(long maxBytesPerFile);
+	command setFileTooLargeMessage(String fileTooLargeMessage);
+	command setUploadErrorMessage(String uploadErrorMessage);
+	command setMaxFiles(int maxFiles);
+	command setAcceptedFileTypes(List<String> acceptedFileTypes);
+	command setDisplayMode(UiFileFieldDisplayType displayType);
+}
+
+@TypeScriptFactory
+class UiFileItem {
+	String uuid;
+	String icon;
+	String thumbnail;
+	String fileName;
+	String description;
+	long size;
+	String linkUrl; // If not null, the click triggers a new tab/window to open with the url. If null, nothing happens on click, except the fileItemClicked event being triggered.
+}
diff --git a/teamapps-ui-api/src/main/dto/fields/UiImageField.dto b/teamapps-ui-api/src/main/dto/fields/UiImageField.dto
new file mode 100644
index 000000000..571282b2e
--- /dev/null
+++ b/teamapps-ui-api/src/main/dto/fields/UiImageField.dto
@@ -0,0 +1,29 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+class UiImageField extends UiField {
+	String width; // css
+	String height; // css
+    UiBorder border;
+    UiShadow shadow;
+	UiImageSizing imageSizing = UiImageSizing.CONTAIN;
+	String backgroundColor = "transparent";
+
+	command update(UiImageField config);
+}
diff --git a/teamapps-ui-api/src/main/dto/fields/UiLabel.dto b/teamapps-ui-api/src/main/dto/fields/UiLabel.dto
new file mode 100644
index 000000000..48da26285
--- /dev/null
+++ b/teamapps-ui-api/src/main/dto/fields/UiLabel.dto
@@ -0,0 +1,30 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+class UiLabel extends UiField {
+	required String caption; // this is only displayed if value == null
+	String icon;
+	UiComponent* targetComponent; // if != null, this is the field that gets focused when this label gets clicked. This label also appears/disappears synchronously to its target field
+
+	event clicked();
+
+	command setCaption(String caption);
+	command setIcon(String icon);
+	command setTargetComponent(UiField* targetField);
+}
diff --git a/teamapps-ui-api/src/main/dto/fields/UiNumberField.dto b/teamapps-ui-api/src/main/dto/fields/UiNumberField.dto
new file mode 100644
index 000000000..d72e68d27
--- /dev/null
+++ b/teamapps-ui-api/src/main/dto/fields/UiNumberField.dto
@@ -0,0 +1,44 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+class UiNumberField extends UiField implements UiTextInputHandlingField {
+  	String locale;
+	int precision = -1; //if == 0 then don't show fractions, if < 0 then show the available precision of the current number
+	String placeholderText;
+	boolean showClearButton;
+	double minValue = Double.MIN_VALUE;
+    double maxValue = Double.MAX_VALUE;
+    UiNumberFieldSliderMode sliderMode = UiNumberFieldSliderMode.DISABLED;
+    double sliderStep = 1;
+    boolean commitOnSliderChange = true;
+
+    command setMinValue(double min);
+    command setMaxValue(double max);
+    command setSliderMode(UiNumberFieldSliderMode sliderMode);
+    command setSliderStep(double step);
+    command setCommitOnSliderChange(boolean commitOnSliderChange);
+	command setPrecision(int displayPrecision);
+	command setPlaceholderText(String placeholderText);
+	command setShowClearButton(boolean showClearButton);
+	command setLocale(String locale);
+}
+
+enum UiNumberFieldSliderMode {
+	DISABLED, VISIBLE, VISIBLE_IF_FOCUSED, SLIDER_ONLY
+}
diff --git a/teamapps-ui-api/src/main/dto/fields/UiPictureChooser.dto b/teamapps-ui-api/src/main/dto/fields/UiPictureChooser.dto
new file mode 100644
index 000000000..b7142996d
--- /dev/null
+++ b/teamapps-ui-api/src/main/dto/fields/UiPictureChooser.dto
@@ -0,0 +1,49 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+
+
+class UiPictureChooser extends UiField {
+	String uploadUrl = "/upload"; // May point anywhere.
+	long maxFileSize = 5000000;
+	String fileTooLargeMessage = "File too large!";
+	String uploadErrorMessage = "Error while transmitting file...";
+
+	String browseButtonIcon;
+    String deleteButtonIcon;
+
+    int imageDisplayWidth;
+    int imageDisplayHeight;
+
+	UiFileItem fileItem;
+
+	event uploadInitiatedByUser(String fileName, String mimeType, long sizeInBytes);
+    event uploadTooLarge(String fileName, String mimeType, long sizeInBytes);
+	event uploadStarted(String fileName, String mimeType, long sizeInBytes);
+	event uploadCanceled(String fileName, String mimeType, long sizeInBytes);
+	event uploadFailed(String fileName, String mimeType, long sizeInBytes);
+	event uploadSuccessful(String fileName, String mimeType, long sizeInBytes, String uploadedFileUuid);
+
+	command setBrowseButtonIcon(String browseButtonIcon);
+	command setUploadUrl(String uploadUrl);
+	command setMaxFileSize(long maxFileSize);
+	command setFileTooLargeMessage(String fileTooLargeMessage);
+	command setUploadErrorMessage(String uploadErrorMessage);
+	command cancelUpload();
+}
diff --git a/teamapps-ui-api/src/main/dto/fields/UiRichTextEditor.dto b/teamapps-ui-api/src/main/dto/fields/UiRichTextEditor.dto
new file mode 100644
index 000000000..0159958c4
--- /dev/null
+++ b/teamapps-ui-api/src/main/dto/fields/UiRichTextEditor.dto
@@ -0,0 +1,46 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+enum UiToolbarVisibilityMode {
+	HIDDEN, VISIBLE, VISIBLE_IF_FOCUSED
+}
+
+class UiRichTextEditor extends UiField implements UiTextInputHandlingField {
+    String locale;
+    boolean imageUploadEnabled;
+	String uploadUrl = "/upload";
+	long maxImageFileSizeInBytes = 5000000;
+	UiToolbarVisibilityMode toolbarVisibilityMode = UiToolbarVisibilityMode.VISIBLE_IF_FOCUSED;
+	int minHeight = 150;
+	int maxHeight = 150;
+	boolean printPluginEnabled;
+
+	event imageUploadTooLarge(String fileName, String mimeType, long sizeInBytes);
+	event imageUploadStarted(String fileName, String mimeType, long sizeInBytes, int incompleteUploadsCount);
+	event imageUploadSuccessful(String fileUuid, String name, String mimeType, long sizeInBytes, int incompleteUploadsCount);
+	event imageUploadFailed(String name, String mimeType, long sizeInBytes, int incompleteUploadsCount);
+
+	command setMinHeight(int minHeight);
+	command setMaxHeight(int maxHeight);
+	command setUploadUrl(String uploadUrl);
+	command setMaxImageFileSizeInBytes(long maxImageFileSizeInBytes);
+	command setUploadedImageUrl(String fileUuid, String url);
+	command setToolbarVisibilityMode(UiToolbarVisibilityMode toolbarVisibilityMode);
+	command commitTransientValue() returns String;
+}
diff --git a/teamapps-server-tomcat-embedded/src/test/java/org/teamapps/server/tomcat/embedded/TeamAppsTomcatEmbeddedServerTest.java b/teamapps-ui-api/src/main/dto/fields/UiSlider.dto
similarity index 53%
rename from teamapps-server-tomcat-embedded/src/test/java/org/teamapps/server/tomcat/embedded/TeamAppsTomcatEmbeddedServerTest.java
rename to teamapps-ui-api/src/main/dto/fields/UiSlider.dto
index 7801ee2fe..ef48d4102 100644
--- a/teamapps-server-tomcat-embedded/src/test/java/org/teamapps/server/tomcat/embedded/TeamAppsTomcatEmbeddedServerTest.java
+++ b/teamapps-ui-api/src/main/dto/fields/UiSlider.dto
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,24 +17,22 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-package org.teamapps.server.tomcat.embedded;
-
-import com.google.common.io.Files;
-import org.teamapps.icon.material.MaterialIcon;
-import org.teamapps.webcontroller.WebController;
-import org.teamapps.ux.session.SessionContext;
-
-public class TeamAppsTomcatEmbeddedServerTest {
-
-	public static void main(String[] args) throws Exception {
-
-		WebController controller = (SessionContext context) -> {
-			context.showNotification(MaterialIcon.MESSAGE, "Hello World");
-		};
-
-		new TeamAppsTomcatEmbeddedServer(controller, Files.createTempDir()).start(8081);
-
-	}
-
-
+class UiSlider extends UiField {
+	double min = 0;
+	double max = 100;
+	double step = 1;
+	int displayedDecimals = 0;
+	String selectionColor = "rgb(51, 122, 183)";
+	String tooltipPrefix;
+	String tooltipPostfix;
+	boolean humanReadableFileSize = false;
+
+	command setMin(double min);
+	command setMax(double max);
+	command setStep(double step);
+	command setDisplayedDecimals(int displayedDecimals);
+	command setSelectionColor(String selectionColor);
+	command setTooltipPrefix(String tooltipPrefi);
+	command setTooltipPostfix(String tooltipPostfi);
+	command setHumanReadableFileSize(boolean humanReadableFileSize);
 }
diff --git a/teamapps-ui-api/src/main/dto/fields/UiTagComboBox.dto b/teamapps-ui-api/src/main/dto/fields/UiTagComboBox.dto
new file mode 100644
index 000000000..22705abd1
--- /dev/null
+++ b/teamapps-ui-api/src/main/dto/fields/UiTagComboBox.dto
@@ -0,0 +1,25 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+class UiTagComboBox extends AbstractUiComboBox {
+	int maxEntries; // if 0, then the list is unbounded
+	enum {SINGLE_LINE, MULTI_LINE, SINGLE_TAG_PER_LINE} wrappingMode = WrappingMode.MULTI_LINE;
+	boolean distinct = true; // if true, do not allow the same entry to be selected multiple times!
+	boolean twoStepDeletion; // This will cause tags to not directly be deleted when pressing the backspace or delete key, but first marked for deletion.
+}
diff --git a/teamapps-ui-api/src/main/dto/fields/UiTemplateField.dto b/teamapps-ui-api/src/main/dto/fields/UiTemplateField.dto
new file mode 100644
index 000000000..c8b366f0f
--- /dev/null
+++ b/teamapps-ui-api/src/main/dto/fields/UiTemplateField.dto
@@ -0,0 +1,26 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+class UiTemplateField extends UiField {
+	UiTemplate template;
+
+	command update(UiTemplateField config);
+
+	event clicked();
+}
diff --git a/teamapps-ui-api/src/main/dto/fields/UiTextField.dto b/teamapps-ui-api/src/main/dto/fields/UiTextField.dto
new file mode 100644
index 000000000..911d54b96
--- /dev/null
+++ b/teamapps-ui-api/src/main/dto/fields/UiTextField.dto
@@ -0,0 +1,55 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+interface UiTextInputHandlingField {
+	event textInput(String enteredString);
+	event specialKeyPressed(UiSpecialKey key); // CAUTION: unfiltered at the moment. E.g. ComboBox selection via ENTER or TextField reset via ESCAPE
+}
+
+enum UiSpecialKey {
+	ENTER, ESCAPE
+}
+
+class UiTextField extends UiField implements UiTextInputHandlingField {
+	int maxCharacters; //if > 0, do not allow to enter more than this number of characters
+	boolean showClearButton;
+	String placeholderText;
+	boolean autofill = false; // browser feature
+
+	command setMaxCharacters(int maxCharacters);
+	command setShowClearButton(boolean showClearButton);
+	command setPlaceholderText(String placeholderText);
+}
+
+class UiPasswordField extends UiTextField {
+	boolean sendValueAsMd5;
+	String salt; // if sendValueAsMd5 == true and salt != null, then submit md5(salt + md5(fieldValue))
+	boolean autofill = false;
+	boolean passwordVisibilityToggleEnabled;
+
+	command setSendValueAsMd5(boolean sendValueAsMd5);
+	command setSalt(String salt);
+	command setPasswordVisibilityToggleEnabled(boolean enabled);
+}
+
+class UiMultiLineTextField extends UiTextField {
+	boolean adjustHeightToContent = false;
+
+	command append(String s, boolean scrollToBottom);
+}
diff --git a/teamapps-ui-api/src/main/dto/fields/UiTimeField.dto b/teamapps-ui-api/src/main/dto/fields/UiTimeField.dto
new file mode 100644
index 000000000..e1650b987
--- /dev/null
+++ b/teamapps-ui-api/src/main/dto/fields/UiTimeField.dto
@@ -0,0 +1,34 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+abstract class AbstractUiTimeField extends UiField implements UiTextInputHandlingField {
+    boolean showDropDownButton = true;
+    boolean showClearButton;
+    String locale;
+    UiDateTimeFormatDescriptor timeFormat = null; // if null, UiConfiguration.timeFormat applies
+    boolean clockIconEnabled;
+
+    command setShowDropDownButton(boolean showDropDownButton);
+    command setShowClearButton(boolean showClearButton);
+    command setLocaleAndTimeFormat(String locale, UiDateTimeFormatDescriptor timeFormat);
+    command setClockIconEnabled(boolean clockIconEnabled);
+}
+
+class UiLocalTimeField extends AbstractUiTimeField {
+}
diff --git a/teamapps-ui-api/src/main/dto/test.dto b/teamapps-ui-api/src/main/dto/test.dto
index 07f9f3485..a0736e83a 100644
--- a/teamapps-ui-api/src/main/dto/test.dto
+++ b/teamapps-ui-api/src/main/dto/test.dto
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -78,6 +78,6 @@ class UiTemplateTestContainer extends UiComponent {
 *
 ***********************************************************************************************************************/
 
-class UiReactTestComponent extends UiComponent {
-
-}
+//class UiReactTestComponent extends UiComponent {
+//
+//}
diff --git a/teamapps-ux/src/main/java/org/teamapps/server/ServletRegistration.java b/teamapps-ui-api/src/main/java/org/teamapps/dto/CopyOnWriteLeakyCache.java
similarity index 55%
rename from teamapps-ux/src/main/java/org/teamapps/server/ServletRegistration.java
rename to teamapps-ui-api/src/main/java/org/teamapps/dto/CopyOnWriteLeakyCache.java
index da8fa5086..7c870a98b 100644
--- a/teamapps-ux/src/main/java/org/teamapps/server/ServletRegistration.java
+++ b/teamapps-ui-api/src/main/java/org/teamapps/dto/CopyOnWriteLeakyCache.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,32 +17,28 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-package org.teamapps.server;
+package org.teamapps.dto;
 
-import javax.servlet.Servlet;
-import java.util.Collection;
 import java.util.Collections;
+import java.util.HashMap;
+import java.util.Map;
+import java.util.function.Function;
 
-public class ServletRegistration {
+public class CopyOnWriteLeakyCache<K, V> {
 
-	private final Servlet servlet;
-	private final Collection<String> mappings;
+	private Map<K, V> map = Collections.emptyMap(); // invariant: this map is never directly modified, only copied!
 
-	public ServletRegistration(Servlet servlet, String mapping) {
-		this.servlet = servlet;
-		this.mappings = Collections.singleton(mapping);
+	public V computeIfAbsent(K key, Function<K, V> computeFunction) {
+		V value = map.get(key);
+		if (value != null) {
+			return value;
+		} else {
+			HashMap<K, V> mapCopy = new HashMap<>(map);
+			value = computeFunction.apply(key);
+			mapCopy.put(key, value);
+			map = mapCopy;
+			return value;
+		}
 	}
 
-	public ServletRegistration(Servlet servlet, Collection<String> mappings) {
-		this.servlet = servlet;
-		this.mappings = mappings;
-	}
-
-	public Servlet getServlet() {
-		return servlet;
-	}
-
-	public Collection<String> getMappings() {
-		return mappings;
-	}
 }
diff --git a/teamapps-ui-api/src/main/java/org/teamapps/dto/ObjectDeserializer.java b/teamapps-ui-api/src/main/java/org/teamapps/dto/ObjectDeserializer.java
index 14378bc85..664aa9ca5 100644
--- a/teamapps-ui-api/src/main/java/org/teamapps/dto/ObjectDeserializer.java
+++ b/teamapps-ui-api/src/main/java/org/teamapps/dto/ObjectDeserializer.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ui-api/src/main/java/org/teamapps/dto/ObjectSerializer.java b/teamapps-ui-api/src/main/java/org/teamapps/dto/ObjectSerializer.java
index 33cbbddf2..865cdc7f2 100644
--- a/teamapps-ui-api/src/main/java/org/teamapps/dto/ObjectSerializer.java
+++ b/teamapps-ui-api/src/main/java/org/teamapps/dto/ObjectSerializer.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -21,29 +21,23 @@
 
 import com.fasterxml.jackson.annotation.JsonTypeInfo;
 import com.fasterxml.jackson.core.JsonGenerator;
-import com.fasterxml.jackson.core.JsonProcessingException;
-import com.fasterxml.jackson.databind.BeanDescription;
-import com.fasterxml.jackson.databind.JavaType;
-import com.fasterxml.jackson.databind.JsonSerializer;
-import com.fasterxml.jackson.databind.ObjectMapper;
-import com.fasterxml.jackson.databind.SerializerProvider;
+import com.fasterxml.jackson.databind.*;
 import com.fasterxml.jackson.databind.introspect.BeanPropertyDefinition;
 import com.fasterxml.jackson.databind.jsontype.TypeSerializer;
 import com.fasterxml.jackson.databind.jsontype.impl.StdTypeResolverBuilder;
 import com.fasterxml.jackson.databind.ser.std.EnumSerializer;
 
 import java.io.IOException;
-import java.util.HashMap;
+import java.lang.reflect.Modifier;
 import java.util.List;
 import java.util.Map;
-import java.util.concurrent.ConcurrentHashMap;
 
 public class ObjectSerializer extends JsonSerializer<Object> {
 
 	private final StdTypeResolverBuilder typeResolverBuilder;
 	private final TeamAppsJacksonTypeIdResolver typeIdResolver;
-	private HashMap<Class<?>, TypeSerializer> typeSerializersCache = new HashMap<>();
-	private final Map<Class, BeanDescription> beanDescriptionsCache = new ConcurrentHashMap<>();
+	private final CopyOnWriteLeakyCache<Class<?>, TypeSerializer> typeSerializersCache = new CopyOnWriteLeakyCache<>();
+	private final CopyOnWriteLeakyCache<Class<?>, BeanDescription> beanDescriptionsCache = new CopyOnWriteLeakyCache<>();
 
 	public ObjectSerializer() {
 		typeIdResolver = new TeamAppsJacksonTypeIdResolver();
@@ -53,7 +47,7 @@ public ObjectSerializer() {
 				.typeProperty("_type");
 	}
 
-	public void serialize(Object value, JsonGenerator gen, SerializerProvider serializers) throws IOException, JsonProcessingException {
+	public void serialize(Object value, JsonGenerator gen, SerializerProvider serializers) throws IOException {
 		if (value == null) {
 			gen.writeNull();
 		} else if (value instanceof List) {
@@ -89,7 +83,7 @@ public void serialize(Object value, JsonGenerator gen, SerializerProvider serial
 	}
 
 	public void serializeWithType(Object value, JsonGenerator gen, SerializerProvider serializers, TypeSerializer typeSer) throws IOException {
-		if (List.class.isInstance(value) || Map.class.isInstance(value)) {
+		if (value instanceof List || value instanceof Map) {
 			serialize(value, gen, serializers);
 		} else {
 			serializers.findValueSerializer(value.getClass()).serializeWithType(value, gen, serializers, typeSer);
@@ -109,7 +103,8 @@ public void serializeEnum(Enum value, JsonGenerator gen, SerializerProvider seri
 		});
 
 		for (BeanPropertyDefinition property : beanDescription.findProperties()) {
-			if (property.getName().equals("declaringClass")) {
+			if (Modifier.isStatic(property.getField().getModifiers())
+				|| property.getName().equals("declaringClass")) {
 				continue;
 			}
 			Object propertyValue = property.getAccessor().getValue(value);
diff --git a/teamapps-ui-api/src/main/java/org/teamapps/dto/TeamAppsJacksonTypeIdResolver.java b/teamapps-ui-api/src/main/java/org/teamapps/dto/TeamAppsJacksonTypeIdResolver.java
index 1bcd3b836..444cd96a6 100644
--- a/teamapps-ui-api/src/main/java/org/teamapps/dto/TeamAppsJacksonTypeIdResolver.java
+++ b/teamapps-ui-api/src/main/java/org/teamapps/dto/TeamAppsJacksonTypeIdResolver.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -30,16 +30,27 @@
 import java.util.stream.Collectors;
 
 /**
- * THIS IS GENERATED CODE!
- * PLEASE DO NOT MODIFY - ALL YOUR WORK WOULD BE LOST!
+ * This TypeIdResolver provides type ids for all TeamApps UI API classes.
+ * Additionally it also provides type ids for all classes that get serialized, so they can be deserialized in the future.
+ * <p>
+ * Ratio: Components are allowed to send and receive.
+ * <p>
+ * On the sending side, this enables app developers to send arbitrary data for templates. E.g., a MustacheTemplate might be filled using
+ * a list of deep json structures.
+ * <p>
+ * On the receiving side, this is technically not necessary, since all data that comes from UiComponents might be defined as UiObjects.
+ * However, component developers might decide to send back arbitrary object (in original or changed state) that were previously sent to the
+ * client. This approach is not recommended but possible. Since only classes that have ever been serialized can be deserialized, there is
+ * no security risk in technically allowing {@link Object} values (unless developers send security critical classes, which we regard as
+ * very unlikely).
  */
-
 public class TeamAppsJacksonTypeIdResolver implements TypeIdResolver {
 
 	private static final Map<String, JavaType> JAVA_TYPE_BY_ID = new ConcurrentHashMap<>();
 	private static final Map<Class, String> ID_BY_CLASS = new ConcurrentHashMap<>();
 
 	public TeamAppsJacksonTypeIdResolver() {
+		// register all ui classes for de/serialization
 		UiObjectJacksonTypeIdMaps.CLASS_BY_ID.forEach((typeId, clazz) -> {
 			registerPojoClass(clazz, typeId);
 		});
@@ -79,6 +90,7 @@ public String idFromValueAndType(Object obj, Class<?> clazz) {
 		if (id != null) {
 			return id;
 		} else {
+			// classes that are serialized may also be deserialized
 			return registerPojoClass(clazz);
 		}
 	}
diff --git a/teamapps-ui-api/src/main/java/org/teamapps/dto/UiComponentId.java b/teamapps-ui-api/src/main/java/org/teamapps/dto/UiComponentId.java
index 00bc0258b..7deb1c1ee 100644
--- a/teamapps-ui-api/src/main/java/org/teamapps/dto/UiComponentId.java
+++ b/teamapps-ui-api/src/main/java/org/teamapps/dto/UiComponentId.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ui-api/src/test/java/org/teamapps/dto/CopyOnWriteLeakyCacheTest.java b/teamapps-ui-api/src/test/java/org/teamapps/dto/CopyOnWriteLeakyCacheTest.java
new file mode 100644
index 000000000..fa5f09ec1
--- /dev/null
+++ b/teamapps-ui-api/src/test/java/org/teamapps/dto/CopyOnWriteLeakyCacheTest.java
@@ -0,0 +1,61 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.dto;
+
+import org.junit.Test;
+
+import java.lang.reflect.Field;
+import java.util.Map;
+import java.util.concurrent.CompletableFuture;
+import java.util.concurrent.ExecutionException;
+import java.util.stream.IntStream;
+
+import static org.assertj.core.api.Assertions.assertThat;
+
+public class CopyOnWriteLeakyCacheTest {
+
+	@Test
+	public void computeIfAbsent() throws ExecutionException, InterruptedException, IllegalAccessException, NoSuchFieldException {
+		CopyOnWriteLeakyCache<Integer, String> cache = new CopyOnWriteLeakyCache<>();
+
+		CompletableFuture[] completableFutures = IntStream.range(0, 10)
+				.mapToObj(threadNumber -> CompletableFuture.runAsync(() -> {
+					for (int i = 0; i < 10_000; i++) {
+						cache.computeIfAbsent(i % 100, ii -> {
+							try {
+								Thread.sleep(1);
+							} catch (InterruptedException e) {
+								e.printStackTrace();
+							}
+							return "v" + ii;
+						});
+					}
+				}))
+				.toArray(CompletableFuture[]::new);
+		CompletableFuture.allOf(completableFutures).get();
+
+		Field cacheField = CopyOnWriteLeakyCache.class.getDeclaredField("map");
+		cacheField.setAccessible(true);
+		Map<Integer, String> map = (Map<Integer, String>) cacheField.get(cache);
+		for (int i = 0; i < 100; i++) {
+			assertThat(map.get(i)).isEqualTo("v" + i); // Note that this assertion may indeed fail, since the cache is leaky regarding concurrencly - but it is very unlikely!
+		}
+	}
+}
diff --git a/teamapps-ui-api/src/test/java/org/teamapps/dto/SerializerTest.java b/teamapps-ui-api/src/test/java/org/teamapps/dto/SerializerTest.java
index 811df6886..6968f658b 100644
--- a/teamapps-ui-api/src/test/java/org/teamapps/dto/SerializerTest.java
+++ b/teamapps-ui-api/src/test/java/org/teamapps/dto/SerializerTest.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -21,6 +21,7 @@
 
 import com.fasterxml.jackson.databind.JsonMappingException;
 import com.fasterxml.jackson.databind.ObjectMapper;
+import org.assertj.core.api.Assertions;
 import org.junit.Assert;
 import org.junit.Test;
 import org.teamapps.dto.testpojo.MyEnum;
@@ -34,6 +35,8 @@
 import java.util.List;
 import java.util.Map;
 
+import static org.assertj.core.api.Assertions.assertThat;
+
 public class SerializerTest {
 
 	@Test
@@ -77,14 +80,14 @@ public void serializeMap() throws Exception {
 
 	@Test
 	public void serializeUiObject() throws Exception {
-		String json = new ObjectMapper().writeValueAsString(new ObjectReferencePojo(new UiCurrencyValue(123, "EUR")));
-		Assert.assertEquals("{\"o\":{\"_type\":\"UiCurrencyValue\",\"value\":123,\"currencyCode\":\"EUR\"}}", json);
+		String json = new ObjectMapper().writeValueAsString(new ObjectReferencePojo(new UiCurrencyValue(new UiCurrencyUnit().setCode("EUR").setFractionDigits(2).setSymbol("€").setName("Euro"), "123")));
+		Assert.assertEquals("{\"o\":{\"_type\":\"UiCurrencyValue\",\"currencyUnit\":{\"_type\":\"UiCurrencyUnit\",\"code\":\"EUR\",\"fractionDigits\":2,\"name\":\"Euro\",\"symbol\":\"€\"},\"amount\":\"123\"}}", json);
 	}
 
 	@Test
 	public void serializeEnum() throws Exception {
 		String json = new ObjectMapper().writeValueAsString(new ObjectReferencePojo(MyEnum.A));
-		Assert.assertEquals("{\"o\":{\"_type\":\"org.teamapps.dto.testpojo.MyEnum\",\"_name\":\"A\",\"i\":111,\"s\":\"a\"}}", json);
+		assertThat(json).isEqualTo("{\"o\":{\"_type\":\"org.teamapps.dto.testpojo.MyEnum\",\"_name\":\"A\",\"i\":111,\"s\":\"a\"}}");
 	}
 
 	// ===========
@@ -137,12 +140,12 @@ public void deserializeMap() throws Exception {
 		Assert.assertEquals("nestedPojoX", ((Pojo) ((Map) map.get("nestedMapKey")).get("nestedPojo")).getX());
 	}
 
-	@Test
-	public void deserializeUiObject() throws Exception {
-		ObjectReferencePojo p = new ObjectMapper().readValue("{\"o\":{\"_type\":\"UiCurrencyValue\",\"value\":123,\"currencyCode\":\"EUR\"}}", ObjectReferencePojo.class);
-		Assert.assertEquals(123, ((UiCurrencyValue) p.getO()).getValue());
-		Assert.assertEquals("EUR", ((UiCurrencyValue) p.getO()).getCurrencyCode());
-	}
+//	@Test
+//	public void deserializeUiObject() throws Exception {
+//		ObjectReferencePojo p = new ObjectMapper().readValue("{\"o\":{\"_type\":\"UiCurrencyValue\",\"value\":123,\"currencyCode\":\"EUR\"}}", ObjectReferencePojo.class);
+//		Assert.assertEquals(123, ((UiCurrencyValue) p.getO()).getValue());
+//		Assert.assertEquals("EUR", ((UiCurrencyValue) p.getO()).getCurrencyCode());
+//	}
 
 	@Test
 	public void deserializeEnum() throws Exception {
diff --git a/teamapps-ui-api/src/test/java/org/teamapps/dto/testpojo/MyEnum.java b/teamapps-ui-api/src/test/java/org/teamapps/dto/testpojo/MyEnum.java
index 7178605bd..7e1db4388 100644
--- a/teamapps-ui-api/src/test/java/org/teamapps/dto/testpojo/MyEnum.java
+++ b/teamapps-ui-api/src/test/java/org/teamapps/dto/testpojo/MyEnum.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ui-api/src/test/java/org/teamapps/dto/testpojo/ObjectReferencePojo.java b/teamapps-ui-api/src/test/java/org/teamapps/dto/testpojo/ObjectReferencePojo.java
index 49decac0b..be273c50d 100644
--- a/teamapps-ui-api/src/test/java/org/teamapps/dto/testpojo/ObjectReferencePojo.java
+++ b/teamapps-ui-api/src/test/java/org/teamapps/dto/testpojo/ObjectReferencePojo.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ui-api/src/test/java/org/teamapps/dto/testpojo/Pojo.java b/teamapps-ui-api/src/test/java/org/teamapps/dto/testpojo/Pojo.java
index 74a292ff9..901f472bd 100644
--- a/teamapps-ui-api/src/test/java/org/teamapps/dto/testpojo/Pojo.java
+++ b/teamapps-ui-api/src/test/java/org/teamapps/dto/testpojo/Pojo.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ui-api/src/test/java/org/teamapps/dto/testpojo/UnregisteredPojo.java b/teamapps-ui-api/src/test/java/org/teamapps/dto/testpojo/UnregisteredPojo.java
index fff8f5092..eb854d0ad 100644
--- a/teamapps-ui-api/src/test/java/org/teamapps/dto/testpojo/UnregisteredPojo.java
+++ b/teamapps-ui-api/src/test/java/org/teamapps/dto/testpojo/UnregisteredPojo.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ui-dsl/pom.xml b/teamapps-ui-dsl/pom.xml
index dd74373c4..39cf8531f 100644
--- a/teamapps-ui-dsl/pom.xml
+++ b/teamapps-ui-dsl/pom.xml
@@ -3,7 +3,7 @@
     <parent>
         <artifactId>teamapps</artifactId>
         <groupId>org.teamapps</groupId>
-        <version>0.9.8-SNAPSHOT</version>
+        <version>0.9.208-SNAPSHOT</version>
     </parent>
     <modelVersion>4.0.0</modelVersion>
 
@@ -34,7 +34,7 @@
     </developers>
 
     <properties>
-        <antlr.version>4.7.1</antlr.version>
+        <antlr.version>4.13.1</antlr.version>
     </properties>
 
     <dependencies>
@@ -46,17 +46,7 @@
         <dependency>
             <groupId>org.antlr</groupId>
             <artifactId>ST4</artifactId>
-        </dependency>
-        <dependency>
-            <groupId>com.googlecode.json-simple</groupId>
-            <artifactId>json-simple</artifactId>
-            <version>1.1.1</version>
-            <exclusions>
-                <exclusion>
-                    <artifactId>junit</artifactId>
-                    <groupId>junit</groupId>
-                </exclusion>
-            </exclusions>
+            <version>4.3.4</version>
         </dependency>
         <dependency>
             <groupId>org.apache.commons</groupId>
@@ -68,16 +58,6 @@
             <artifactId>guava</artifactId>
         </dependency>
 
-
-        <dependency>
-            <groupId>junit</groupId>
-            <artifactId>junit</artifactId>
-        </dependency>
-        <dependency>
-            <groupId>org.assertj</groupId>
-            <artifactId>assertj-core</artifactId>
-        </dependency>
-
     </dependencies>
 
     <build>
@@ -91,6 +71,9 @@
                         <goals>
                             <goal>antlr4</goal>
                         </goals>
+                        <configuration>
+                            <sourceDirectory>${basedir}/src/main/antlr</sourceDirectory>
+                        </configuration>
                     </execution>
                 </executions>
                 <dependencies>
diff --git a/teamapps-ui-dsl/src/main/antlr4/org/teamapps/dto/TeamAppsDto.g4 b/teamapps-ui-dsl/src/main/antlr/TeamAppsDto.g4
similarity index 91%
rename from teamapps-ui-dsl/src/main/antlr4/org/teamapps/dto/TeamAppsDto.g4
rename to teamapps-ui-dsl/src/main/antlr/TeamAppsDto.g4
index 4e4316070..7cbb046fa 100644
--- a/teamapps-ui-dsl/src/main/antlr4/org/teamapps/dto/TeamAppsDto.g4
+++ b/teamapps-ui-dsl/src/main/antlr/TeamAppsDto.g4
@@ -1,18 +1,21 @@
 grammar TeamAppsDto;
 
+@header {
+package org.teamapps.dto;
+}
+
 classCollection : typeDeclaration*;
 
 typeDeclaration : classDeclaration | interfaceDeclaration | enumDeclaration;
 
-enumDeclaration : stringJsonValuesAnnotation? 'enum' Identifier '{' (enumConstant (',' enumConstant)*)? ';'? '}' ;
-stringJsonValuesAnnotation : '@SerializeAsString';
-enumConstant : Identifier;
+enumDeclaration : 'enum' Identifier '{' (enumConstant (',' enumConstant)*)? ';'? '}' ;
+enumConstant : Identifier ('=' StringLiteral)?;
 
 classDeclaration  : typescriptFactoryAnnotation? abstractModifier? 'class' Identifier superClassDecl? implementsDecl? '{'
-	(propertyDeclaration|commandDeclaration|eventDeclaration|subCommandDeclaration|subEventDeclaration)*
+	(propertyDeclaration|commandDeclaration|eventDeclaration|queryDeclaration)*
 '}';
 interfaceDeclaration  : 'interface' Identifier superInterfaceDecl? '{'
-	(propertyDeclaration|commandDeclaration|eventDeclaration|subCommandDeclaration|subEventDeclaration)*
+	(propertyDeclaration|commandDeclaration|eventDeclaration|queryDeclaration)*
 '}';
 superClassDecl: 'extends' Identifier;
 superInterfaceDecl: 'extends' classList;
@@ -20,9 +23,8 @@ implementsDecl: 'implements' classList;
 classList: ((Identifier ',')* Identifier)?;
 propertyDeclaration : referenceableAnnotation? requiredModifier? type Identifier (defaultValueAssignment)? ';';
 commandDeclaration : staticModifier? 'command' Identifier '(' ((formalParameterWithDefault ',')* formalParameterWithDefault)? ')' ('returns' type)? ';';
-eventDeclaration : 'event' Identifier '(' ((formalParameterWithDefault ',')* formalParameterWithDefault)? ')' ';';
-subCommandDeclaration : 'subcommand' Identifier '(' ((formalParameterWithDefault ',')* formalParameterWithDefault)? ')' ';';
-subEventDeclaration : 'subevent' Identifier '(' ((formalParameterWithDefault ',')* formalParameterWithDefault)? ')' ';';
+eventDeclaration : staticModifier? 'event' Identifier '(' ((formalParameterWithDefault ',')* formalParameterWithDefault)? ')' ';';
+queryDeclaration : 'query' Identifier '(' ((formalParameterWithDefault ',')* formalParameterWithDefault)? ')' 'returns' type ';';
 formalParameter : type Identifier;
 formalParameterWithDefault : type Identifier (defaultValueAssignment)?;
 
diff --git a/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/ClassCollectionValidator.java b/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/ClassCollectionValidator.java
index 1f3f38ceb..d3ab0d8d1 100644
--- a/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/ClassCollectionValidator.java
+++ b/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/ClassCollectionValidator.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/FileUtils.java b/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/FileUtils.java
index 6d49b38a7..7e8629adc 100644
--- a/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/FileUtils.java
+++ b/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/FileUtils.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/ParserFactory.java b/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/ParserFactory.java
index 501768c50..454c45b82 100644
--- a/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/ParserFactory.java
+++ b/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/ParserFactory.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/StGroupFactory.java b/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/StGroupFactory.java
index 17c32c170..b66134ae8 100644
--- a/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/StGroupFactory.java
+++ b/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/StGroupFactory.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -21,16 +21,7 @@
 
 import org.stringtemplate.v4.STGroupFile;
 import org.teamapps.dto.TeamAppsDtoParser;
-import org.teamapps.dto.generate.adapter.ClassDeclarationContextModelAdaptor;
-import org.teamapps.dto.generate.adapter.CommandDeclarationContextModelAdaptor;
-import org.teamapps.dto.generate.adapter.EnumDeclarationContextModelAdapter;
-import org.teamapps.dto.generate.adapter.EventDeclarationContextModelAdaptor;
-import org.teamapps.dto.generate.adapter.InterfaceDeclarationContextModelAdaptor;
-import org.teamapps.dto.generate.adapter.PojoModelAdaptor;
-import org.teamapps.dto.generate.adapter.PropertyDeclarationContextModelAdaptor;
-import org.teamapps.dto.generate.adapter.SubCommandDeclarationContextModelAdaptor;
-import org.teamapps.dto.generate.adapter.SubEventDeclarationContextModelAdaptor;
-import org.teamapps.dto.generate.adapter.TypeContextModelAdaptor;
+import org.teamapps.dto.generate.adapter.*;
 
 public class StGroupFactory {
     public static STGroupFile createStGroup(
@@ -46,8 +37,7 @@ public static STGroupFile createStGroup(
         stGroup.registerModelAdaptor(TeamAppsDtoParser.EnumDeclarationContext.class, new EnumDeclarationContextModelAdapter());
         stGroup.registerModelAdaptor(TeamAppsDtoParser.EventDeclarationContext.class, new EventDeclarationContextModelAdaptor(model));
         stGroup.registerModelAdaptor(TeamAppsDtoParser.CommandDeclarationContext.class, new CommandDeclarationContextModelAdaptor(model));
-        stGroup.registerModelAdaptor(TeamAppsDtoParser.SubEventDeclarationContext.class, new SubEventDeclarationContextModelAdaptor(model));
-        stGroup.registerModelAdaptor(TeamAppsDtoParser.SubCommandDeclarationContext.class, new SubCommandDeclarationContextModelAdaptor(model));
+        stGroup.registerModelAdaptor(TeamAppsDtoParser.QueryDeclarationContext.class, new QueryDeclarationContextModelAdaptor(model));
         stGroup.registerModelAdaptor(TeamAppsDtoParser.PropertyDeclarationContext.class, new PropertyDeclarationContextModelAdaptor());
         stGroup.registerModelAdaptor(TeamAppsDtoParser.TypeContext.class, new TypeContextModelAdaptor(model));
         return stGroup;
diff --git a/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/StringRenderer.java b/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/StringRenderer.java
index 34747bc0f..ceec968c9 100644
--- a/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/StringRenderer.java
+++ b/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/StringRenderer.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/StringTemplatesErrorListener.java b/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/StringTemplatesErrorListener.java
index b66d1e3d1..9825cc389 100644
--- a/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/StringTemplatesErrorListener.java
+++ b/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/StringTemplatesErrorListener.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/TeamAppsDtoModel.java b/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/TeamAppsDtoModel.java
index 21fed20f5..ec2df6afd 100644
--- a/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/TeamAppsDtoModel.java
+++ b/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/TeamAppsDtoModel.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -22,14 +22,9 @@
 import com.google.common.collect.Streams;
 import org.antlr.v4.runtime.ParserRuleContext;
 import org.antlr.v4.runtime.RuleContext;
-import org.teamapps.dto.TeamAppsDtoParser;
-
-import java.util.ArrayList;
-import java.util.Collections;
-import java.util.List;
-import java.util.Objects;
-import java.util.Optional;
-import java.util.Set;
+import org.teamapps.dto.TeamAppsDtoParser.*;
+
+import java.util.*;
 import java.util.concurrent.ConcurrentHashMap;
 import java.util.function.Function;
 import java.util.function.Predicate;
@@ -38,79 +33,70 @@
 
 public class TeamAppsDtoModel {
 
-	private final List<TeamAppsDtoParser.ClassDeclarationContext> classDeclarations = new ArrayList<>();
-	private final List<TeamAppsDtoParser.InterfaceDeclarationContext> interfaceDeclarations = new ArrayList<>();
-	private final List<TeamAppsDtoParser.EnumDeclarationContext> enumDeclarations = new ArrayList<>();
-	private final List<TeamAppsDtoParser.EventDeclarationContext> eventDeclarations;
-	private final List<TeamAppsDtoParser.CommandDeclarationContext> commandDeclarations;
-	private final List<TeamAppsDtoParser.SubEventDeclarationContext> subEventDeclarations;
-	private final List<TeamAppsDtoParser.SubCommandDeclarationContext> subCommandDeclarations;
+	private final List<ClassDeclarationContext> classDeclarations = new ArrayList<>();
+	private final List<InterfaceDeclarationContext> interfaceDeclarations = new ArrayList<>();
+	private final List<EnumDeclarationContext> enumDeclarations = new ArrayList<>();
+	private final List<EventDeclarationContext> eventDeclarations;
+	private final List<QueryDeclarationContext> queryDeclarations;
+	private final List<CommandDeclarationContext> commandDeclarations;
 	private final List<ParserRuleContext> classesAndInterfacesReferencedForSubEvents;
 
-	public TeamAppsDtoModel(TeamAppsDtoParser.ClassCollectionContext classCollectionContext) {
+	public TeamAppsDtoModel(ClassCollectionContext classCollectionContext) {
 		this(Collections.singletonList(classCollectionContext));
 	}
 
-	public TeamAppsDtoModel(List<TeamAppsDtoParser.ClassCollectionContext> classCollectionContexts) {
+	public TeamAppsDtoModel(List<ClassCollectionContext> classCollectionContexts) {
 		classCollectionContexts.forEach(classCollectionContext -> {
-			List<TeamAppsDtoParser.TypeDeclarationContext> typeDeclarations = classCollectionContext.typeDeclaration();
+			List<TypeDeclarationContext> typeDeclarations = classCollectionContext.typeDeclaration();
 			classDeclarations.addAll(extractClassDeclarations(typeDeclarations));
 			interfaceDeclarations.addAll(extractInterfaceDeclarations(typeDeclarations));
 			enumDeclarations.addAll(extractEnumDeclarations(typeDeclarations));
 		});
 		eventDeclarations = extractEventDeclarations();
+		queryDeclarations = extractQueryDeclarations();
 		commandDeclarations = extractCommandDeclarations();
-		subEventDeclarations = extractSubEventDeclarations();
-		subCommandDeclarations = extractSubCommandDeclarations();
 		classesAndInterfacesReferencedForSubEvents = extractClassesAndInterfacesReferencedForSubEvents();
 	}
 
-	private List<TeamAppsDtoParser.ClassDeclarationContext> extractClassDeclarations(List<TeamAppsDtoParser.TypeDeclarationContext> types) {
+	private List<ClassDeclarationContext> extractClassDeclarations(List<TypeDeclarationContext> types) {
 		return types.stream()
 				.filter(typeContext -> typeContext.classDeclaration() != null)
 				.map(typeContext -> typeContext.classDeclaration())
 				.collect(Collectors.toList());
 	}
 
-	private List<TeamAppsDtoParser.InterfaceDeclarationContext> extractInterfaceDeclarations(List<TeamAppsDtoParser.TypeDeclarationContext> types) {
+	private List<InterfaceDeclarationContext> extractInterfaceDeclarations(List<TypeDeclarationContext> types) {
 		return types.stream()
 				.filter(typeContext -> typeContext.interfaceDeclaration() != null)
 				.map(typeContext -> typeContext.interfaceDeclaration())
 				.collect(Collectors.toList());
 	}
 
-	private List<TeamAppsDtoParser.EnumDeclarationContext> extractEnumDeclarations(List<TeamAppsDtoParser.TypeDeclarationContext> types) {
+	private List<EnumDeclarationContext> extractEnumDeclarations(List<TypeDeclarationContext> types) {
 		return types.stream()
 				.filter(typeContext -> typeContext.enumDeclaration() != null)
 				.map(typeContext -> typeContext.enumDeclaration())
 				.collect(Collectors.toList());
 	}
 
-	private List<TeamAppsDtoParser.EventDeclarationContext> extractEventDeclarations() {
+	private List<EventDeclarationContext> extractEventDeclarations() {
 		return Stream.concat(
 				classDeclarations.stream().flatMap(c -> c.eventDeclaration().stream()),
 				interfaceDeclarations.stream().flatMap(i -> i.eventDeclaration().stream())
 		).collect(Collectors.toList());
 	}
 
-	private List<TeamAppsDtoParser.CommandDeclarationContext> extractCommandDeclarations() {
-		return Stream.concat(
-				classDeclarations.stream().flatMap(c -> c.commandDeclaration().stream()),
-				interfaceDeclarations.stream().flatMap(i -> i.commandDeclaration().stream())
-		).collect(Collectors.toList());
-	}
-
-	private List<TeamAppsDtoParser.SubEventDeclarationContext> extractSubEventDeclarations() {
+	private List<QueryDeclarationContext> extractQueryDeclarations() {
 		return Stream.concat(
-				classDeclarations.stream().flatMap(c -> c.subEventDeclaration().stream()),
-				interfaceDeclarations.stream().flatMap(i -> i.subEventDeclaration().stream())
+				classDeclarations.stream().flatMap(c -> c.queryDeclaration().stream()),
+				interfaceDeclarations.stream().flatMap(i -> i.queryDeclaration().stream())
 		).collect(Collectors.toList());
 	}
 
-	private List<TeamAppsDtoParser.SubCommandDeclarationContext> extractSubCommandDeclarations() {
+	private List<CommandDeclarationContext> extractCommandDeclarations() {
 		return Stream.concat(
-				classDeclarations.stream().flatMap(c -> c.subCommandDeclaration().stream()),
-				interfaceDeclarations.stream().flatMap(i -> i.subCommandDeclaration().stream())
+				classDeclarations.stream().flatMap(c -> c.commandDeclaration().stream()),
+				interfaceDeclarations.stream().flatMap(i -> i.commandDeclaration().stream())
 		).collect(Collectors.toList());
 	}
 
@@ -124,40 +110,36 @@ private List<ParserRuleContext> extractClassesAndInterfacesReferencedForSubEvent
 				.collect(Collectors.toList());
 	}
 
-	public List<TeamAppsDtoParser.ClassDeclarationContext> getClassDeclarations() {
+	public List<ClassDeclarationContext> getClassDeclarations() {
 		return classDeclarations;
 	}
 
-	public List<TeamAppsDtoParser.InterfaceDeclarationContext> getInterfaceDeclarations() {
+	public List<InterfaceDeclarationContext> getInterfaceDeclarations() {
 		return interfaceDeclarations;
 	}
 
-	public List<TeamAppsDtoParser.EnumDeclarationContext> getEnumDeclarations() {
+	public List<EnumDeclarationContext> getEnumDeclarations() {
 		return enumDeclarations;
 	}
 
-	public List<TeamAppsDtoParser.EventDeclarationContext> getEventDeclarations() {
+	public List<EventDeclarationContext> getEventDeclarations() {
 		return eventDeclarations;
 	}
 
-	public List<TeamAppsDtoParser.CommandDeclarationContext> getCommandDeclarations() {
-		return commandDeclarations;
+	public List<QueryDeclarationContext> getQueryDeclarations() {
+		return queryDeclarations;
 	}
 
-	public List<TeamAppsDtoParser.SubEventDeclarationContext> getSubEventDeclarations() {
-		return subEventDeclarations;
-	}
-
-	public List<TeamAppsDtoParser.SubCommandDeclarationContext> getSubCommandDeclarations() {
-		return subCommandDeclarations;
+	public List<CommandDeclarationContext> getCommandDeclarations() {
+		return commandDeclarations;
 	}
 
 	public List<ParserRuleContext> getClassesAndInterfacesReferencedForSubEvents() {
 		return classesAndInterfacesReferencedForSubEvents;
 	}
 
-	public TeamAppsDtoParser.ClassDeclarationContext findReferencedClass(TeamAppsDtoParser.TypeContext typeContext) {
-		TeamAppsDtoParser.TypeReferenceContext typeReferenceContext = typeContext.typeReference();
+	public ClassDeclarationContext findReferencedClass(TypeContext typeContext) {
+		TypeReferenceContext typeReferenceContext = typeContext.typeReference();
 		if (typeReferenceContext == null) {
 			return null;
 		}
@@ -176,8 +158,8 @@ public TeamAppsDtoParser.ClassDeclarationContext findReferencedClass(TeamAppsDto
 				});
 	}
 
-	public TeamAppsDtoParser.InterfaceDeclarationContext findReferencedInterface(TeamAppsDtoParser.TypeContext typeContext) {
-		TeamAppsDtoParser.TypeReferenceContext typeReferenceContext = typeContext.typeReference();
+	public InterfaceDeclarationContext findReferencedInterface(TypeContext typeContext) {
+		TypeReferenceContext typeReferenceContext = typeContext.typeReference();
 		if (typeReferenceContext == null) {
 			return null;
 		}
@@ -196,7 +178,7 @@ public TeamAppsDtoParser.InterfaceDeclarationContext findReferencedInterface(Tea
 				});
 	}
 
-	public TeamAppsDtoParser.ClassDeclarationContext findClassByName(String className, boolean throwExceptionIfNotFound) {
+	public ClassDeclarationContext findClassByName(String className, boolean throwExceptionIfNotFound) {
 		return classDeclarations.stream()
 				.filter(otherClassDeclarationContext -> otherClassDeclarationContext.Identifier().getText().equals(className))
 				.findFirst().orElseGet(() -> {
@@ -208,8 +190,8 @@ public TeamAppsDtoParser.ClassDeclarationContext findClassByName(String classNam
 				});
 	}
 
-	public TeamAppsDtoParser.EnumDeclarationContext findReferencedEnum(TeamAppsDtoParser.TypeContext typeContext) {
-		TeamAppsDtoParser.TypeReferenceContext typeRef = typeContext.typeReference();
+	public EnumDeclarationContext findReferencedEnum(TypeContext typeContext) {
+		TypeReferenceContext typeRef = typeContext.typeReference();
 		if (typeRef == null) {
 			return null;
 		}
@@ -236,8 +218,8 @@ public static <T extends RuleContext> T findAncestorOfType(RuleContext ruleConte
 		return null;
 	}
 
-	public List<TeamAppsDtoParser.ClassDeclarationContext> findAllSuperClasses(TeamAppsDtoParser.ClassDeclarationContext clazzContext) {
-		List<TeamAppsDtoParser.ClassDeclarationContext> superClasses = new ArrayList<>();
+	public List<ClassDeclarationContext> findAllSuperClasses(ClassDeclarationContext clazzContext) {
+		List<ClassDeclarationContext> superClasses = new ArrayList<>();
 		clazzContext = findSuperClass(clazzContext);
 		while (clazzContext != null) {
 			superClasses.add(clazzContext);
@@ -246,32 +228,32 @@ public List<TeamAppsDtoParser.ClassDeclarationContext> findAllSuperClasses(TeamA
 		return superClasses;
 	}
 
-	public List<TeamAppsDtoParser.ClassDeclarationContext> findSelfAndAllSuperClasses(TeamAppsDtoParser.ClassDeclarationContext clazzContext) {
-		List<TeamAppsDtoParser.ClassDeclarationContext> allSuperClasses = findAllSuperClasses(clazzContext);
+	public List<ClassDeclarationContext> findSelfAndAllSuperClasses(ClassDeclarationContext clazzContext) {
+		List<ClassDeclarationContext> allSuperClasses = findAllSuperClasses(clazzContext);
 		allSuperClasses.add(0, clazzContext);
 		return allSuperClasses;
 	}
 
-	public List<TeamAppsDtoParser.ClassDeclarationContext> findAllSubClasses(TeamAppsDtoParser.ClassDeclarationContext clazzContext) {
+	public List<ClassDeclarationContext> findAllSubClasses(ClassDeclarationContext clazzContext) {
 		return classDeclarations.stream()
 				.filter(otherClass -> findAllSuperClasses(otherClass).contains(clazzContext))
 				.collect(Collectors.toList());
 	}
 
-	public List<TeamAppsDtoParser.ClassDeclarationContext> findAllSubClasses(TeamAppsDtoParser.InterfaceDeclarationContext interfaceContext) {
+	public List<ClassDeclarationContext> findAllSubClasses(InterfaceDeclarationContext interfaceContext) {
 		return classDeclarations.stream()
 				.filter(classContext -> findAllImplementedInterfaces(classContext).contains(interfaceContext))
 				.collect(Collectors.toList());
 	}
 
-	public List<TeamAppsDtoParser.InterfaceDeclarationContext> findAllSubInterfaces(TeamAppsDtoParser.InterfaceDeclarationContext interfaceContext) {
+	public List<InterfaceDeclarationContext> findAllSubInterfaces(InterfaceDeclarationContext interfaceContext) {
 		return interfaceDeclarations.stream()
 				.filter(interf -> findSuperInterfaces(interf).contains(interfaceContext))
 				.collect(Collectors.toList());
 	}
 
-	public List<TeamAppsDtoParser.PropertyDeclarationContext> findAllProperties(TeamAppsDtoParser.ClassDeclarationContext clazzContext) {
-		List<TeamAppsDtoParser.ClassDeclarationContext> selfAndAllSuperClasses = findSelfAndAllSuperClasses(clazzContext);
+	public List<PropertyDeclarationContext> findAllProperties(ClassDeclarationContext clazzContext) {
+		List<ClassDeclarationContext> selfAndAllSuperClasses = findSelfAndAllSuperClasses(clazzContext);
 		Collections.reverse(selfAndAllSuperClasses);
 		return Stream.concat(
 				selfAndAllSuperClasses.stream()
@@ -285,7 +267,7 @@ public List<TeamAppsDtoParser.PropertyDeclarationContext> findAllProperties(Team
 				.collect(Collectors.toList());
 	}
 
-	public List<TeamAppsDtoParser.PropertyDeclarationContext> findAllProperties(TeamAppsDtoParser.InterfaceDeclarationContext interfaceContext) {
+	public List<PropertyDeclarationContext> findAllProperties(InterfaceDeclarationContext interfaceContext) {
 		return findAllSuperInterfacesAndSelf(interfaceContext).stream()
 				.flatMap(interf -> interf.propertyDeclaration().stream())
 				.filter(distinctByKey(property -> property.Identifier().getText()))
@@ -297,16 +279,16 @@ public <T> Predicate<T> distinctByKey(Function<? super T, ?> keyExtractor) {
 		return t -> seen.add(keyExtractor.apply(t));
 	}
 
-	public List<TeamAppsDtoParser.PropertyDeclarationContext> filterRequiredProperties(List<TeamAppsDtoParser.PropertyDeclarationContext> propertyDeclarations, boolean required) {
+	public List<PropertyDeclarationContext> filterRequiredProperties(List<PropertyDeclarationContext> propertyDeclarations, boolean required) {
 		return propertyDeclarations.stream()
 				.filter(p -> required ^ p.requiredModifier() == null)
 				.collect(Collectors.toList());
 	}
 
-	public TeamAppsDtoParser.ClassDeclarationContext findSuperClass(TeamAppsDtoParser.ClassDeclarationContext clazzContext) {
+	public ClassDeclarationContext findSuperClass(ClassDeclarationContext clazzContext) {
 		if (clazzContext.superClassDecl() != null) {
 			String superClassName = clazzContext.superClassDecl().Identifier().getText();
-			TeamAppsDtoParser.ClassDeclarationContext superClass = findClassByName(superClassName, true);
+			ClassDeclarationContext superClass = findClassByName(superClassName, true);
 			if (superClass == null) {
 				throw new IllegalArgumentException("Cannot find super class of " + clazzContext.Identifier().getText() + " with name: " + superClassName);
 			}
@@ -316,9 +298,9 @@ public TeamAppsDtoParser.ClassDeclarationContext findSuperClass(TeamAppsDtoParse
 		}
 	}
 
-	public List<TeamAppsDtoParser.InterfaceDeclarationContext> findAllSuperInterfaces(TeamAppsDtoParser.InterfaceDeclarationContext interfaceContext) {
+	public List<InterfaceDeclarationContext> findAllSuperInterfaces(InterfaceDeclarationContext interfaceContext) {
 		if (interfaceContext.superInterfaceDecl() != null) {
-			List<TeamAppsDtoParser.InterfaceDeclarationContext> superInterfaces = findSuperInterfaces(interfaceContext);
+			List<InterfaceDeclarationContext> superInterfaces = findSuperInterfaces(interfaceContext);
 			superInterfaces.addAll(superInterfaces.stream().flatMap(si -> findAllSuperInterfaces(si).stream()).collect(Collectors.toList()));
 			return superInterfaces.stream().distinct().collect(Collectors.toList());
 		} else {
@@ -326,7 +308,7 @@ public List<TeamAppsDtoParser.InterfaceDeclarationContext> findAllSuperInterface
 		}
 	}
 
-	public List<TeamAppsDtoParser.InterfaceDeclarationContext> findSuperInterfaces(TeamAppsDtoParser.InterfaceDeclarationContext interfaceContext) {
+	public List<InterfaceDeclarationContext> findSuperInterfaces(InterfaceDeclarationContext interfaceContext) {
 		if (interfaceContext.superInterfaceDecl() != null) {
 			return interfaceContext.superInterfaceDecl().classList().Identifier().stream()
 					.map(identifier -> identifier.getText())
@@ -337,7 +319,7 @@ public List<TeamAppsDtoParser.InterfaceDeclarationContext> findSuperInterfaces(T
 		}
 	}
 
-	public List<TeamAppsDtoParser.InterfaceDeclarationContext> findAllImplementedInterfaces(TeamAppsDtoParser.ClassDeclarationContext classContext) {
+	public List<InterfaceDeclarationContext> findAllImplementedInterfaces(ClassDeclarationContext classContext) {
 		return findSelfAndAllSuperClasses(classContext).stream()
 				.flatMap(clazz -> clazz.implementsDecl() != null ? clazz.implementsDecl().classList().Identifier().stream()
 						.map(identifier -> findInterfaceByName(identifier.getText(), true))
@@ -345,7 +327,7 @@ public List<TeamAppsDtoParser.InterfaceDeclarationContext> findAllImplementedInt
 				.collect(Collectors.toList());
 	}
 
-	public List<TeamAppsDtoParser.InterfaceDeclarationContext> getDirectlyImplementedInterfaces(TeamAppsDtoParser.ClassDeclarationContext classContext) {
+	public List<InterfaceDeclarationContext> getDirectlyImplementedInterfaces(ClassDeclarationContext classContext) {
 		if (classContext.implementsDecl() != null) {
 			return classContext.implementsDecl().classList().Identifier().stream()
 					.map(identifier -> findInterfaceByName(identifier.getText(), true))
@@ -355,7 +337,7 @@ public List<TeamAppsDtoParser.InterfaceDeclarationContext> getDirectlyImplemente
 		}
 	}
 
-	public TeamAppsDtoParser.InterfaceDeclarationContext findInterfaceByName(String name, boolean throwExceptionIfNotFound) {
+	public InterfaceDeclarationContext findInterfaceByName(String name, boolean throwExceptionIfNotFound) {
 		return interfaceDeclarations.stream()
 				.filter(interfaceDeclaration -> interfaceDeclaration.Identifier().getText().equals(name))
 				.findAny().orElseGet(() -> {
@@ -367,21 +349,21 @@ public TeamAppsDtoParser.InterfaceDeclarationContext findInterfaceByName(String
 				});
 	}
 
-	public List<TeamAppsDtoParser.ClassDeclarationContext> findAllImplementingClasses(TeamAppsDtoParser.InterfaceDeclarationContext interfaceContext) {
+	public List<ClassDeclarationContext> findAllImplementingClasses(InterfaceDeclarationContext interfaceContext) {
 		return classDeclarations.stream()
 				.filter(clazz -> findAllImplementedInterfaces(clazz).contains(interfaceContext)).collect(Collectors.toList());
 	}
 
-	public List<TeamAppsDtoParser.InterfaceDeclarationContext> findAllSuperInterfacesAndSelf(TeamAppsDtoParser.InterfaceDeclarationContext interfaceContext) {
-		List<TeamAppsDtoParser.InterfaceDeclarationContext> superInterfacesAndSelf = findAllSuperInterfaces(interfaceContext);
+	public List<InterfaceDeclarationContext> findAllSuperInterfacesAndSelf(InterfaceDeclarationContext interfaceContext) {
+		List<InterfaceDeclarationContext> superInterfacesAndSelf = findAllSuperInterfaces(interfaceContext);
 		superInterfacesAndSelf.add(0, interfaceContext);
 		return superInterfacesAndSelf;
 	}
 
-	public List<TeamAppsDtoParser.PropertyDeclarationContext> getSimplePropertiesSortedByRelevance(List<TeamAppsDtoParser.PropertyDeclarationContext> properties) {
+	public List<PropertyDeclarationContext> getSimplePropertiesSortedByRelevance(List<PropertyDeclarationContext> properties) {
 		return properties.stream()
 				.sorted((p1, p2) -> {
-					Function<TeamAppsDtoParser.PropertyDeclarationContext, Integer> getPriority = (p) -> {
+					Function<PropertyDeclarationContext, Integer> getPriority = (p) -> {
 						if (p.Identifier().getText().equals("id")) {
 							return 50;
 						} else if (p.Identifier().getText().equals("name")) {
@@ -401,18 +383,18 @@ public List<TeamAppsDtoParser.PropertyDeclarationContext> getSimplePropertiesSor
 				.collect(Collectors.toList());
 	}
 
-	public List<TeamAppsDtoParser.PropertyDeclarationContext> findPropertiesNotImplementedBySuperClasses(TeamAppsDtoParser.ClassDeclarationContext classContext) {
-		List<TeamAppsDtoParser.PropertyDeclarationContext> properties = findAllProperties(classContext);
-		TeamAppsDtoParser.ClassDeclarationContext superClass = findSuperClass(classContext);
+	public List<PropertyDeclarationContext> findPropertiesNotImplementedBySuperClasses(ClassDeclarationContext classContext) {
+		List<PropertyDeclarationContext> properties = findAllProperties(classContext);
+		ClassDeclarationContext superClass = findSuperClass(classContext);
 		if (superClass != null) {
 			properties.removeAll(findAllProperties(superClass));
 		}
 		return properties;
 	}
 
-	public List<ParserRuleContext> findSuperClassAndDirectlyImplementedInterfaces(TeamAppsDtoParser.ClassDeclarationContext classContext) {
-		TeamAppsDtoParser.ClassDeclarationContext superClass = findSuperClass(classContext);
-		List<TeamAppsDtoParser.InterfaceDeclarationContext> directlyImplementedInterfaces = getDirectlyImplementedInterfaces(classContext);
+	public List<ParserRuleContext> findSuperClassAndDirectlyImplementedInterfaces(ClassDeclarationContext classContext) {
+		ClassDeclarationContext superClass = findSuperClass(classContext);
+		List<InterfaceDeclarationContext> directlyImplementedInterfaces = getDirectlyImplementedInterfaces(classContext);
 
 		List<ParserRuleContext> result = new ArrayList<>();
 		if (superClass != null) {
@@ -422,8 +404,8 @@ public List<ParserRuleContext> findSuperClassAndDirectlyImplementedInterfaces(Te
 		return result;
 	}
 
-	public List<TeamAppsDtoParser.CommandDeclarationContext> getAllCommands(TeamAppsDtoParser.ClassDeclarationContext classContext) {
-		List<TeamAppsDtoParser.CommandDeclarationContext> commands = Stream.concat(
+	public List<CommandDeclarationContext> getAllCommands(ClassDeclarationContext classContext) {
+		List<CommandDeclarationContext> commands = Stream.concat(
 				findSelfAndAllSuperClasses(classContext).stream()
 						.flatMap(clazz -> clazz.commandDeclaration().stream()),
 				findAllImplementedInterfaces(classContext).stream()
@@ -436,15 +418,15 @@ public List<TeamAppsDtoParser.CommandDeclarationContext> getAllCommands(TeamApps
 		return commands;
 	}
 
-	public List<TeamAppsDtoParser.CommandDeclarationContext> getAllCommands(TeamAppsDtoParser.InterfaceDeclarationContext interfaceContext) {
+	public List<CommandDeclarationContext> getAllCommands(InterfaceDeclarationContext interfaceContext) {
 		return findAllSuperInterfacesAndSelf(interfaceContext).stream()
 				.flatMap(interf -> interf.commandDeclaration().stream())
 				.filter(distinctByKey(command -> command.Identifier().getText()))
 				.collect(Collectors.toList());
 	}
 
-	public List<TeamAppsDtoParser.EventDeclarationContext> getAllEvents(TeamAppsDtoParser.ClassDeclarationContext classContext) {
-		List<TeamAppsDtoParser.EventDeclarationContext> events = Stream.concat(
+	public List<EventDeclarationContext> getAllEvents(ClassDeclarationContext classContext) {
+		List<EventDeclarationContext> events = Stream.concat(
 				findSelfAndAllSuperClasses(classContext).stream()
 						.flatMap(clazz -> clazz.eventDeclaration().stream()),
 				findAllImplementedInterfaces(classContext).stream()
@@ -457,56 +439,35 @@ public List<TeamAppsDtoParser.EventDeclarationContext> getAllEvents(TeamAppsDtoP
 		return events;
 	}
 
-	public List<TeamAppsDtoParser.EventDeclarationContext> getAllEvents(TeamAppsDtoParser.InterfaceDeclarationContext interfaceContext) {
+	public List<EventDeclarationContext> getAllEvents(InterfaceDeclarationContext interfaceContext) {
 		return findAllSuperInterfacesAndSelf(interfaceContext).stream()
 				.flatMap(interf -> interf.eventDeclaration().stream())
 				.filter(distinctByKey(event -> event.Identifier().getText()))
 				.collect(Collectors.toList());
 	}
 
-	public List<TeamAppsDtoParser.SubCommandDeclarationContext> getAllSubCommands(TeamAppsDtoParser.ClassDeclarationContext classContext) {
-		List<TeamAppsDtoParser.SubCommandDeclarationContext> commands = Stream.concat(
-				findSelfAndAllSuperClasses(classContext).stream()
-						.flatMap(clazz -> clazz.subCommandDeclaration().stream()),
-				findAllImplementedInterfaces(classContext).stream()
-						.flatMap(interf -> interf.subCommandDeclaration().stream())
-
-		)
-				.filter(distinctByKey(command -> command.Identifier().getText()))
-				.collect(Collectors.toList());
-		Collections.reverse(commands);
-		return commands;
-	}
-
-	public List<TeamAppsDtoParser.SubCommandDeclarationContext> getAllSubCommands(TeamAppsDtoParser.InterfaceDeclarationContext interfaceContext) {
-		return findAllSuperInterfacesAndSelf(interfaceContext).stream()
-				.flatMap(interf -> interf.subCommandDeclaration().stream())
-				.filter(distinctByKey(command -> command.Identifier().getText()))
-				.collect(Collectors.toList());
-	}
-
-	public List<TeamAppsDtoParser.SubEventDeclarationContext> getAllSubEvents(TeamAppsDtoParser.ClassDeclarationContext classContext) {
-		List<TeamAppsDtoParser.SubEventDeclarationContext> events = Stream.concat(
+	public List<QueryDeclarationContext> getAllQueries(ClassDeclarationContext classContext) {
+		List<QueryDeclarationContext> queries = Stream.concat(
 				findSelfAndAllSuperClasses(classContext).stream()
-						.flatMap(clazz -> clazz.subEventDeclaration().stream()),
+						.flatMap(clazz -> clazz.queryDeclaration().stream()),
 				findAllImplementedInterfaces(classContext).stream()
-						.flatMap(interf -> interf.subEventDeclaration().stream())
+						.flatMap(interf -> interf.queryDeclaration().stream())
 
 		)
-				.filter(distinctByKey(event -> event.Identifier().getText()))
+				.filter(distinctByKey(query -> query.Identifier().getText()))
 				.collect(Collectors.toList());
-		Collections.reverse(events);
-		return events;
+		Collections.reverse(queries);
+		return queries;
 	}
 
-	public List<TeamAppsDtoParser.SubEventDeclarationContext> getAllSubEvents(TeamAppsDtoParser.InterfaceDeclarationContext interfaceContext) {
+	public List<QueryDeclarationContext> getAllQueries(InterfaceDeclarationContext interfaceContext) {
 		return findAllSuperInterfacesAndSelf(interfaceContext).stream()
-				.flatMap(interf -> interf.subEventDeclaration().stream())
-				.filter(distinctByKey(event -> event.Identifier().getText()))
+				.flatMap(interf -> interf.queryDeclaration().stream())
+				.filter(distinctByKey(query -> query.Identifier().getText()))
 				.collect(Collectors.toList());
 	}
 
-	public List<ParserRuleContext> superClassAndDirectlyImplementedInterfacesWithCommands(TeamAppsDtoParser.ClassDeclarationContext classContext) {
+	public List<ParserRuleContext> superClassAndDirectlyImplementedInterfacesWithCommands(ClassDeclarationContext classContext) {
 		return Stream.concat(
 				Optional.ofNullable(findSuperClass(classContext))
 						.filter(clazz -> !getAllCommands(clazz).isEmpty())
@@ -516,17 +477,7 @@ public List<ParserRuleContext> superClassAndDirectlyImplementedInterfacesWithCom
 		).collect(Collectors.toList());
 	}
 
-	public List<ParserRuleContext> superClassAndDirectlyImplementedInterfacesWithSubCommands(TeamAppsDtoParser.ClassDeclarationContext classContext) {
-		return Stream.concat(
-				Optional.ofNullable(findSuperClass(classContext))
-						.filter(clazz -> !getAllSubCommands(clazz).isEmpty())
-						.map(Stream::of).orElseGet(Stream::empty),
-				getDirectlyImplementedInterfaces(classContext).stream()
-						.filter(interf -> !getAllSubCommands(interf).isEmpty())
-		).collect(Collectors.toList());
-	}
-
-	public List<ParserRuleContext> superClassAndDirectlyImplementedInterfacesWithEvents(TeamAppsDtoParser.ClassDeclarationContext classContext) {
+	public List<ParserRuleContext> superClassAndDirectlyImplementedInterfacesWithEvents(ClassDeclarationContext classContext) {
 		return Stream.concat(
 				Optional.ofNullable(findSuperClass(classContext))
 						.filter(clazz -> !getAllEvents(clazz).isEmpty())
@@ -536,113 +487,20 @@ public List<ParserRuleContext> superClassAndDirectlyImplementedInterfacesWithEve
 		).collect(Collectors.toList());
 	}
 
-	public List<ParserRuleContext> superClassAndDirectlyImplementedInterfacesWithSubEvents(TeamAppsDtoParser.ClassDeclarationContext classContext) {
-		return Stream.concat(
-				Optional.ofNullable(findSuperClass(classContext))
-						.filter(clazz -> !getAllSubEvents(clazz).isEmpty())
-						.map(Stream::of).orElseGet(Stream::empty),
-				getDirectlyImplementedInterfaces(classContext).stream()
-						.filter(interf -> !getAllSubEvents(interf).isEmpty())
-		).collect(Collectors.toList());
-	}
-
-	public List<ParserRuleContext> getSuperInterfacesWithCommands(TeamAppsDtoParser.InterfaceDeclarationContext interfaceContext) {
+	public List<ParserRuleContext> getSuperInterfacesWithCommands(InterfaceDeclarationContext interfaceContext) {
 		return findSuperInterfaces(interfaceContext).stream()
 				.filter(itf -> !getAllCommands(itf).isEmpty())
 				.collect(Collectors.toList());
 	}
 
-	public List<ParserRuleContext> getSuperInterfacesWithSubCommands(TeamAppsDtoParser.InterfaceDeclarationContext interfaceContext) {
-		return findSuperInterfaces(interfaceContext).stream()
-				.filter(itf -> !getAllSubCommands(itf).isEmpty())
-				.collect(Collectors.toList());
-	}
-
-	public List<ParserRuleContext> getSuperInterfacesWithEvents(TeamAppsDtoParser.InterfaceDeclarationContext interfaceContext) {
+	public List<ParserRuleContext> getSuperInterfacesWithEvents(InterfaceDeclarationContext interfaceContext) {
 		return findSuperInterfaces(interfaceContext).stream()
 				.filter(itf -> !getAllEvents(itf).isEmpty())
 				.collect(Collectors.toList());
 	}
 
-	public List<ParserRuleContext> getSuperInterfacesWithSubEvents(TeamAppsDtoParser.InterfaceDeclarationContext interfaceContext) {
-		return findSuperInterfaces(interfaceContext).stream()
-				.filter(itf -> !getAllSubEvents(itf).isEmpty())
-				.collect(Collectors.toList());
-	}
-
-	public boolean interfaceOrDescendantHasSubCommandDeclarations(TeamAppsDtoParser.InterfaceDeclarationContext interf) {
-		boolean hasOwnSubCommands = interf.subCommandDeclaration().size() > 0;
-		if (hasOwnSubCommands) {
-			return true;
-		} else {
-			return findAllSubClasses(interf).stream().anyMatch(subClass -> subClass.subCommandDeclaration().size() > 0)
-					|| findAllSubInterfaces(interf).stream().anyMatch(subInterface -> subInterface.subCommandDeclaration().size() > 0);
-		}
-	}
-
-	public boolean classOrSubClassHasSubCommandDeclarations(TeamAppsDtoParser.ClassDeclarationContext classContext) {
-		boolean hasOwnSubCommands = classContext.subCommandDeclaration().size() > 0;
-		if (hasOwnSubCommands) {
-			return true;
-		} else {
-			return findAllSubClasses(classContext).stream().anyMatch(subClass -> subClass.subCommandDeclaration().size() > 0);
-		}
-	}
-
-	public boolean interfaceOrDescendantHasSubEventDeclarations(TeamAppsDtoParser.InterfaceDeclarationContext interf) {
-		boolean referencedForSubEvents = isDescendantOfClassOrInterfaceReferencedForSubEvents(interf);
-		boolean hasOwnOrInheritedSubEvents = findAllSuperInterfacesAndSelf(interf).stream().anyMatch(i -> !i.subEventDeclaration().isEmpty());
-		return referencedForSubEvents || hasOwnOrInheritedSubEvents;
-//		if (hasOwnOrInheritedSubEvents) {
-//			return true;
-//		} else {
-//			boolean subInterfaceDeclaresSubEvent = findAllSubInterfaces(interf).stream().anyMatch(subInterface -> subInterface.subEventDeclaration().size() > 0);
-//			List<TeamAppsDtoParser.ClassDeclarationContext> allSubClasses = findAllSubClasses(interf);
-//			boolean subClassDeclaresSubEvent = allSubClasses.stream()
-//					.anyMatch(subClass -> subClass.subEventDeclaration().size() > 0);
-//			boolean subClassInheritsSubEventFromInterface = allSubClasses.stream()
-//					.flatMap(subClass -> findAllImplementedInterfaces(subClass).stream())
-//					.anyMatch(subClassImplementedInterface -> subClassImplementedInterface.subEventDeclaration().size() > 0);
-//			return subInterfaceDeclaresSubEvent || subClassDeclaresSubEvent || subClassInheritsSubEventFromInterface;
-//		}
-	}
-
-	public boolean classOrSubClassHasSubEventDeclarations(TeamAppsDtoParser.ClassDeclarationContext classContext) {
-		boolean referencedForSubEvents = isDescendantOfClassOrInterfaceReferencedForSubEvents(classContext);
-		boolean classHierarchyDeclaresSubEvents = findSelfAndAllSuperClasses(classContext).stream().anyMatch(i -> !i.subEventDeclaration().isEmpty());
-		boolean inheritsSubEventsFromInterfaces = findAllImplementedInterfaces(classContext).stream().anyMatch(i -> !i.subEventDeclaration().isEmpty());
-		return referencedForSubEvents || classHierarchyDeclaresSubEvents || inheritsSubEventsFromInterfaces;
-//		if (referencedForSubEvents || classHierarchyDeclaresSubEvents || inheritsSubEventsFromInterfaces) {
-//			return true;
-//		} else {
-//			List<TeamAppsDtoParser.ClassDeclarationContext> subClasses = findAllSubClasses(classContext);
-//			boolean subClassDeclaresSubEvent = subClasses.stream().anyMatch(subClass -> subClass.subEventDeclaration().size() > 0);
-//			boolean subClassInheritsSubEventFromInterface = subClasses.stream()
-//					.flatMap(subClass -> findAllImplementedInterfaces(subClass).stream())
-//					.anyMatch(subClassImplementedInterface -> subClassImplementedInterface.subEventDeclaration().size() > 0);
-//			return subClassDeclaresSubEvent || subClassInheritsSubEventFromInterface;
-//		}
-	}
-
-	public List<TeamAppsDtoParser.SubEventDeclarationContext> findAllSubEventsInHierarchy(TeamAppsDtoParser.ClassDeclarationContext classContext) {
-		List<TeamAppsDtoParser.ClassDeclarationContext> allSubClasses = findAllSubClasses(classContext);
-		allSubClasses.add(classContext);
-		return allSubClasses.stream()
-				.flatMap(c -> getAllSubEvents(c).stream())
-				.filter(distinctByKey(subEvent -> subEvent.Identifier().getText()))
-				.collect(Collectors.toList());
-	}
-
-	public List<TeamAppsDtoParser.SubEventDeclarationContext> findAllSubEventsInHierarchy(TeamAppsDtoParser.InterfaceDeclarationContext classContext) {
-		List<TeamAppsDtoParser.ClassDeclarationContext> allSubClasses = findAllSubClasses(classContext);
-		return allSubClasses.stream()
-				.flatMap(c -> getAllSubEvents(c).stream())
-				.filter(distinctByKey(subEvent -> subEvent.Identifier().getText()))
-				.collect(Collectors.toList());
-	}
-
 	private ParserRuleContext findClassOrInterfaceByName(String referencedClassName) {
-		TeamAppsDtoParser.ClassDeclarationContext clazz = findClassByName(referencedClassName, false);
+		ClassDeclarationContext clazz = findClassByName(referencedClassName, false);
 		if (clazz != null) {
 			return clazz;
 		} else {
@@ -650,34 +508,34 @@ private ParserRuleContext findClassOrInterfaceByName(String referencedClassName)
 		}
 	}
 
-	public boolean isDescendantOfClassOrInterfaceReferencedForSubEvents(TeamAppsDtoParser.ClassDeclarationContext classContext) {
+	public boolean isDescendantOfClassOrInterfaceReferencedForSubEvents(ClassDeclarationContext classContext) {
 		boolean implementsInterfaceReferencedForSubEvent = findAllImplementedInterfaces(classContext).removeAll(classesAndInterfacesReferencedForSubEvents);
 		boolean hasSuperClassReferencedForSubEvents = findSelfAndAllSuperClasses(classContext).removeAll(classesAndInterfacesReferencedForSubEvents);
 		return implementsInterfaceReferencedForSubEvent || hasSuperClassReferencedForSubEvents;
 	}
 
-	public boolean isDescendantOfClassOrInterfaceReferencedForSubEvents(TeamAppsDtoParser.InterfaceDeclarationContext interfaceContext) {
+	public boolean isDescendantOfClassOrInterfaceReferencedForSubEvents(InterfaceDeclarationContext interfaceContext) {
 		return findAllSuperInterfacesAndSelf(interfaceContext).removeAll(classesAndInterfacesReferencedForSubEvents);
 	}
 
 	public static ParserRuleContext getDeclaringClassOrInterface(ParserRuleContext element) {
-		if (element instanceof TeamAppsDtoParser.ClassDeclarationContext || element instanceof TeamAppsDtoParser.InterfaceDeclarationContext) {
+		if (element instanceof ClassDeclarationContext || element instanceof InterfaceDeclarationContext) {
 			return element;
 		}
-		TeamAppsDtoParser.ClassDeclarationContext clazz = findAncestorOfType(element, TeamAppsDtoParser.ClassDeclarationContext.class);
+		ClassDeclarationContext clazz = findAncestorOfType(element, ClassDeclarationContext.class);
 		if (clazz != null) {
 			return clazz;
 		} else {
-			return findAncestorOfType(element, TeamAppsDtoParser.InterfaceDeclarationContext.class);
+			return findAncestorOfType(element, InterfaceDeclarationContext.class);
 		}
 	}
 
 	public static String getDeclaringClassOrInterfaceName(ParserRuleContext element) {
 		ParserRuleContext declaringClassOrInterface = getDeclaringClassOrInterface(element);
-		if (declaringClassOrInterface instanceof TeamAppsDtoParser.ClassDeclarationContext) {
-			return ((TeamAppsDtoParser.ClassDeclarationContext) declaringClassOrInterface).Identifier().getText();
-		} else if (declaringClassOrInterface instanceof TeamAppsDtoParser.InterfaceDeclarationContext) {
-			return ((TeamAppsDtoParser.InterfaceDeclarationContext) declaringClassOrInterface).Identifier().getText();
+		if (declaringClassOrInterface instanceof ClassDeclarationContext) {
+			return ((ClassDeclarationContext) declaringClassOrInterface).Identifier().getText();
+		} else if (declaringClassOrInterface instanceof InterfaceDeclarationContext) {
+			return ((InterfaceDeclarationContext) declaringClassOrInterface).Identifier().getText();
 		} else {
 			return null;
 		}
@@ -692,50 +550,44 @@ public List<ParserRuleContext> getAllClassesAndInterfacesWithEvents() {
 		).collect(Collectors.toList());
 	}
 
-	public List<ParserRuleContext> getAllClassesAndInterfacesWithSubEvents() {
+	public List<ParserRuleContext> getAllClassesAndInterfacesWithQueries() {
 		return Stream.concat(
 				classDeclarations.stream()
-						.filter(classDeclarationContext -> !getAllSubEvents(classDeclarationContext).isEmpty()),
+						.filter(classDeclarationContext -> !getAllQueries(classDeclarationContext).isEmpty()),
 				interfaceDeclarations.stream()
-						.filter(interfaceDeclarationContext -> !getAllSubEvents(interfaceDeclarationContext).isEmpty())
+						.filter(interfaceDeclarationContext -> !getAllQueries(interfaceDeclarationContext).isEmpty())
 		).collect(Collectors.toList());
 	}
 
-	private ParserRuleContext findReferencedClassOrInterface(TeamAppsDtoParser.TypeContext type) {
-		TeamAppsDtoParser.ClassDeclarationContext referencedClass = findReferencedClass(type);
+	private ParserRuleContext findReferencedClassOrInterface(TypeContext type) {
+		ClassDeclarationContext referencedClass = findReferencedClass(type);
 		return referencedClass != null ? referencedClass : findReferencedInterface(type);
 	}
 
-	public List<ParserRuleContext> findAllReferencedClassesAndInterfaces(TeamAppsDtoParser.ClassDeclarationContext classContext) {
+	public List<ParserRuleContext> findAllReferencedClassesAndInterfaces(ClassDeclarationContext classContext) {
 		return Stream.of(
 				findSuperClassAndDirectlyImplementedInterfaces(classContext).stream(),
+				findSuperClassAndDirectlyImplementedInterfaces(classContext).stream()
+						.flatMap(c -> c instanceof ClassDeclarationContext
+								? findAllReferencedClassesAndInterfaces(((ClassDeclarationContext) c)).stream()
+								: findAllReferencedClassesAndInterfaces(((InterfaceDeclarationContext) c)).stream()),
 				classContext.propertyDeclaration().stream()
-						.map(p -> findReferencedClassOrInterface(p.type()))
-						.filter(c -> c != classContext),
+						.map(p -> findReferencedClassOrInterface(p.type())),
 				classContext.commandDeclaration().stream()
 						.flatMap(cd -> cd.formalParameterWithDefault().stream())
-						.map(fp -> findReferencedClassOrInterface(fp.type()))
-						.filter(c -> c != classContext),
+						.map(fp -> findReferencedClassOrInterface(fp.type())),
 				classContext.eventDeclaration().stream()
 						.flatMap(cd -> cd.formalParameterWithDefault().stream())
 						.map(fp -> findReferencedClassOrInterface(fp.type()))
-						.filter(c -> c != classContext),
-				classContext.subCommandDeclaration().stream()
-						.flatMap(cd -> cd.formalParameterWithDefault().stream())
-						.map(fp -> findReferencedClassOrInterface(fp.type()))
-						.filter(c -> c != classContext),
-				classContext.subEventDeclaration().stream()
-						.flatMap(cd -> cd.formalParameterWithDefault().stream())
-						.map(fp -> findReferencedClassOrInterface(fp.type()))
-						.filter(c -> c != classContext)
 		)
 				.flatMap(Function.identity())
 				.filter(Objects::nonNull)
+				.filter(c -> c != classContext)
 				.distinct()
 				.collect(Collectors.toList());
 	}
 
-	public List<TeamAppsDtoParser.EnumDeclarationContext> findAllReferencedEnums(TeamAppsDtoParser.ClassDeclarationContext classContext) {
+	public List<EnumDeclarationContext> findAllReferencedEnums(ClassDeclarationContext classContext) {
 		return Stream.of(
 				classContext.propertyDeclaration().stream()
 						.map(p -> findReferencedEnum(p.type())),
@@ -743,12 +595,6 @@ public List<TeamAppsDtoParser.EnumDeclarationContext> findAllReferencedEnums(Tea
 						.flatMap(cd -> cd.formalParameterWithDefault().stream())
 						.map(fp -> findReferencedEnum(fp.type())),
 				classContext.eventDeclaration().stream()
-						.flatMap(cd -> cd.formalParameterWithDefault().stream())
-						.map(fp -> findReferencedEnum(fp.type())),
-				classContext.subCommandDeclaration().stream()
-						.flatMap(cd -> cd.formalParameterWithDefault().stream())
-						.map(fp -> findReferencedEnum(fp.type())),
-				classContext.subEventDeclaration().stream()
 						.flatMap(cd -> cd.formalParameterWithDefault().stream())
 						.map(fp -> findReferencedEnum(fp.type()))
 		).flatMap(Function.identity())
@@ -757,37 +603,27 @@ public List<TeamAppsDtoParser.EnumDeclarationContext> findAllReferencedEnums(Tea
 				.collect(Collectors.toList());
 	}
 
-	public List<ParserRuleContext> findAllReferencedClassesAndInterfaces(TeamAppsDtoParser.InterfaceDeclarationContext interfaceContext) {
+	public List<ParserRuleContext> findAllReferencedClassesAndInterfaces(InterfaceDeclarationContext interfaceContext) {
 		return Stream.of(
 				findAllSuperInterfaces(interfaceContext).stream()
 						.map(interfDecl -> (ParserRuleContext) interfDecl),
 				interfaceContext.propertyDeclaration().stream()
-						.map(p -> findReferencedClassOrInterface(p.type()))
-						.filter(c -> c != interfaceContext),
+						.map(p -> findReferencedClassOrInterface(p.type())),
 				interfaceContext.commandDeclaration().stream()
 						.flatMap(cd -> cd.formalParameterWithDefault().stream())
-						.map(fp -> findReferencedClassOrInterface(fp.type()))
-						.filter(c -> c != interfaceContext),
+						.map(fp -> findReferencedClassOrInterface(fp.type())),
 				interfaceContext.eventDeclaration().stream()
 						.flatMap(cd -> cd.formalParameterWithDefault().stream())
 						.map(fp -> findReferencedClassOrInterface(fp.type()))
-						.filter(c -> c != interfaceContext),
-				interfaceContext.subCommandDeclaration().stream()
-						.flatMap(cd -> cd.formalParameterWithDefault().stream())
-						.map(fp -> findReferencedClassOrInterface(fp.type()))
-						.filter(c -> c != interfaceContext),
-				interfaceContext.subEventDeclaration().stream()
-						.flatMap(cd -> cd.formalParameterWithDefault().stream())
-						.map(fp -> findReferencedClassOrInterface(fp.type()))
-						.filter(c -> c != interfaceContext)
 		)
 				.flatMap(Function.identity())
 				.filter(Objects::nonNull)
+				.filter(c -> c != interfaceContext)
 				.distinct()
 				.collect(Collectors.toList());
 	}
 
-	public List<TeamAppsDtoParser.EnumDeclarationContext> findAllReferencedEnums(TeamAppsDtoParser.InterfaceDeclarationContext interfaceContext) {
+	public List<EnumDeclarationContext> findAllReferencedEnums(InterfaceDeclarationContext interfaceContext) {
 		return Stream.of(
 				interfaceContext.propertyDeclaration().stream()
 						.map(p -> findReferencedEnum(p.type())),
@@ -795,12 +631,6 @@ public List<TeamAppsDtoParser.EnumDeclarationContext> findAllReferencedEnums(Tea
 						.flatMap(cd -> cd.formalParameterWithDefault().stream())
 						.map(fp -> findReferencedEnum(fp.type())),
 				interfaceContext.eventDeclaration().stream()
-						.flatMap(cd -> cd.formalParameterWithDefault().stream())
-						.map(fp -> findReferencedEnum(fp.type())),
-				interfaceContext.subCommandDeclaration().stream()
-						.flatMap(cd -> cd.formalParameterWithDefault().stream())
-						.map(fp -> findReferencedEnum(fp.type())),
-				interfaceContext.subEventDeclaration().stream()
 						.flatMap(cd -> cd.formalParameterWithDefault().stream())
 						.map(fp -> findReferencedEnum(fp.type()))
 		).flatMap(Function.identity())
@@ -809,7 +639,7 @@ public List<TeamAppsDtoParser.EnumDeclarationContext> findAllReferencedEnums(Tea
 				.collect(Collectors.toList());
 	}
 
-	public List<ParserRuleContext> findAllReferencedClassesAndInterfaces(TeamAppsDtoParser.EventDeclarationContext eventContext) {
+	public List<ParserRuleContext> findAllReferencedClassesAndInterfaces(EventDeclarationContext eventContext) {
 		return eventContext.formalParameterWithDefault().stream()
 				.map(p -> findReferencedClassOrInterface(p.type()))
 				.filter(Objects::nonNull)
@@ -817,23 +647,7 @@ public List<ParserRuleContext> findAllReferencedClassesAndInterfaces(TeamAppsDto
 				.collect(Collectors.toList());
 	}
 
-	public List<TeamAppsDtoParser.EnumDeclarationContext> findAllReferencedEnums(TeamAppsDtoParser.EventDeclarationContext eventDeclarationContext) {
-		return eventDeclarationContext.formalParameterWithDefault().stream()
-				.map(p -> findReferencedEnum(p.type()))
-				.filter(Objects::nonNull)
-				.distinct()
-				.collect(Collectors.toList());
-	}
-
-	public List<ParserRuleContext> findAllReferencedClassesAndInterfaces(TeamAppsDtoParser.SubEventDeclarationContext eventContext) {
-		return eventContext.formalParameterWithDefault().stream()
-				.map(p -> findReferencedClassOrInterface(p.type()))
-				.filter(Objects::nonNull)
-				.distinct()
-				.collect(Collectors.toList());
-	}
-
-	public List<TeamAppsDtoParser.EnumDeclarationContext> findAllReferencedEnums(TeamAppsDtoParser.SubEventDeclarationContext eventDeclarationContext) {
+	public List<EnumDeclarationContext> findAllReferencedEnums(EventDeclarationContext eventDeclarationContext) {
 		return eventDeclarationContext.formalParameterWithDefault().stream()
 				.map(p -> findReferencedEnum(p.type()))
 				.filter(Objects::nonNull)
@@ -850,44 +664,34 @@ public List<ParserRuleContext> findAllClassesInterfacesAndEnumsReferencedByEvent
 				.collect(Collectors.toList());
 	}
 
-	public List<ParserRuleContext> findAllClassesInterfacesAndEnumsReferencedBySubEvents() {
-		return subEventDeclarations.stream().flatMap(ed -> Stream.concat(
-				findAllReferencedClassesAndInterfaces(ed).stream(),
-				findAllReferencedEnums(ed).stream()
-		))
-				.distinct()
-				.collect(Collectors.toList());
-	}
-
-
-	public List<TeamAppsDtoParser.PropertyDeclarationContext> findAllNotYetImplementedProperties(TeamAppsDtoParser.ClassDeclarationContext classContext) {
+	public List<PropertyDeclarationContext> findAllNotYetImplementedProperties(ClassDeclarationContext classContext) {
 		return Streams.concat(
 				classContext.propertyDeclaration().stream(),
 				findAllImplementedInterfaces(classContext).stream()
 						.flatMap(interf -> interf.propertyDeclaration().stream())
-		).filter(distinctByKey(TeamAppsDtoParser.PropertyDeclarationContext::Identifier))
+		).filter(distinctByKey(PropertyDeclarationContext::Identifier))
 				.collect(Collectors.toList());
 	}
 
-	public static boolean isReferenceType(TeamAppsDtoParser.TypeContext type) {
+	public static boolean isReferenceType(TypeContext type) {
 		return type.typeReference() != null && type.typeReference().referenceTypeModifier() != null;
 	}
 
-	public boolean isReferenceableClass(TeamAppsDtoParser.ClassDeclarationContext clazz) {
+	public boolean isReferenceableClass(ClassDeclarationContext clazz) {
 		return findSelfNearestAncestorClassWithReferenceableAttribute(clazz) != null;
 	}
 
-	public boolean isReferenceableBaseClass(TeamAppsDtoParser.ClassDeclarationContext clazz) {
+	public boolean isReferenceableBaseClass(ClassDeclarationContext clazz) {
 		return findSelfNearestAncestorClassWithReferenceableAttribute(clazz) == clazz;
 	}
 
-	public TeamAppsDtoParser.ClassDeclarationContext findSelfNearestAncestorClassWithReferenceableAttribute(TeamAppsDtoParser.ClassDeclarationContext clazz) {
+	public ClassDeclarationContext findSelfNearestAncestorClassWithReferenceableAttribute(ClassDeclarationContext clazz) {
 		return findSelfAndAllSuperClasses(clazz).stream()
 				.filter(c -> c.propertyDeclaration().stream().anyMatch(p -> p.referenceableAnnotation() != null))
 				.findFirst().orElse(null);
 	}
 
-	public Object getReferenceableProperties(TeamAppsDtoParser.ClassDeclarationContext classContext) {
+	public Object getReferenceableProperties(ClassDeclarationContext classContext) {
 		return findAllProperties(classContext).stream()
 				.filter(p -> p.referenceableAnnotation() != null)
 				.collect(Collectors.toList());
diff --git a/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/TeamAppsDtoModelValidator.java b/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/TeamAppsDtoModelValidator.java
index 22a88d404..fecc276c0 100644
--- a/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/TeamAppsDtoModelValidator.java
+++ b/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/TeamAppsDtoModelValidator.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/TeamAppsGeneratorUtil.java b/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/TeamAppsGeneratorUtil.java
index 25fe48b12..0bfa2f047 100644
--- a/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/TeamAppsGeneratorUtil.java
+++ b/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/TeamAppsGeneratorUtil.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -23,29 +23,24 @@
 
 import java.io.File;
 import java.io.FileInputStream;
+import java.io.IOException;
 import java.io.InputStreamReader;
-import java.util.Arrays;
+import java.nio.charset.StandardCharsets;
+import java.nio.file.Files;
+import java.nio.file.Paths;
 import java.util.List;
 import java.util.stream.Collectors;
 
 public class TeamAppsGeneratorUtil {
 
-	public static List<File> getFilesInDirectory(File sourceDir) {
-		File[] files = sourceDir.listFiles();
-		if (files == null) {
-			throw new IllegalArgumentException("Directory does not exist: " + sourceDir);
-		}
-		return Arrays.asList(files);
-	}
-
-	public static List<TeamAppsDtoParser.ClassCollectionContext> parseClassCollections(File sourceDir) {
-		return TeamAppsGeneratorUtil.getFilesInDirectory(sourceDir).stream()
+	public static List<TeamAppsDtoParser.ClassCollectionContext> parseClassCollections(File sourceDir) throws IOException {
+		return Files.find(Paths.get(sourceDir.getPath()), Integer.MAX_VALUE, (filePath, fileAttr) -> fileAttr.isRegularFile() && filePath.toString().endsWith(".dto"))
 				.map(dtoFile -> {
 					try {
-						InputStreamReader reader = new InputStreamReader(new FileInputStream(dtoFile), "UTF-8");
+						InputStreamReader reader = new InputStreamReader(new FileInputStream(dtoFile.toFile()), StandardCharsets.UTF_8);
 						return ParserFactory.createParser(reader).classCollection();
 					} catch (Exception e1) {
-						throw new IllegalArgumentException("Exception while parsing " + dtoFile.getPath() + ": " + e1.getMessage(), e1);
+						throw new IllegalArgumentException("Exception while parsing " + dtoFile + ": " + e1.getMessage(), e1);
 					}
 				})
 				.collect(Collectors.toList());
diff --git a/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/TeamAppsJavaDtoGenerator.java b/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/TeamAppsJavaDtoGenerator.java
index 662c376fc..92e85bfc2 100644
--- a/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/TeamAppsJavaDtoGenerator.java
+++ b/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/TeamAppsJavaDtoGenerator.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -31,7 +31,6 @@
 import java.io.IOException;
 import java.io.Writer;
 import java.util.ArrayList;
-import java.util.List;
 
 public class TeamAppsJavaDtoGenerator {
     private final static Logger logger = LoggerFactory.getLogger(TeamAppsJavaDtoGenerator.class);
@@ -50,8 +49,10 @@ public static void main(String[] args) throws IOException {
         File targetDir = new File(args[1]);
         String packageName = args[2];
 
-        List<TeamAppsDtoParser.ClassCollectionContext> classCollections = TeamAppsGeneratorUtil.parseClassCollections(sourceDir);
-        new TeamAppsJavaDtoGenerator(packageName, new TeamAppsDtoModel(classCollections)).generate(targetDir);
+        System.out.println("Generating Java from " + sourceDir.getAbsolutePath() + " to " + targetDir.getAbsolutePath() + " with package name " + packageName);
+
+        new TeamAppsJavaDtoGenerator(packageName, new TeamAppsDtoModel(TeamAppsGeneratorUtil.parseClassCollections(sourceDir)))
+                .generate(targetDir);
     }
 
     public TeamAppsJavaDtoGenerator(TeamAppsDtoModel model) throws IOException {
@@ -85,12 +86,14 @@ public void generate(File targetDir) throws IOException {
         generateObjectTypeEnum(new FileWriter(new File(parentDir, "UiObjectType.java")));
         generateUiObjectBaseClass(new FileWriter(new File(parentDir, "UiObject.java")));
 
-        generateComponentEventBaseClass(new FileWriter(new File(parentDir, "UiEvent.java")));
-        generateSubEventBaseClass(new FileWriter(new File(parentDir, "UiSubEvent.java")));
+        generateUiEventBaseClass(new FileWriter(new File(parentDir, "UiEvent.java")));
         generateEventEnum(new FileWriter(new File(parentDir, "UiEventType.java")));
-        generateSubEventEnum(new FileWriter(new File(parentDir, "UiSubEventType.java")));
+
+        generateUiQueryBaseClass(new FileWriter(new File(parentDir, "UiQuery.java")));
+        generateQueryEnum(new FileWriter(new File(parentDir, "UiQueryType.java")));
+
         generateComponentCommandBaseClass(new FileWriter(new File(parentDir, "UiCommand.java")));
-        generateSubCommandBaseClass(new FileWriter(new File(parentDir, "UiSubCommand.java")));
+
         generateJacksonTypeIdMaps(new FileWriter(new File(parentDir, "UiObjectJacksonTypeIdMaps.java")));
     }
 
@@ -130,7 +133,7 @@ void generateEnum(TeamAppsDtoParser.EnumDeclarationContext enumContext, Writer w
         writer.close();
     }
 
-    void generateComponentEventBaseClass(Writer writer) throws IOException {
+    void generateUiEventBaseClass(Writer writer) throws IOException {
         ST template = stGroup.getInstanceOf("uiEventBaseClass")
                 .add("package", packageName)
                 .add("allEventDeclarations", model.getEventDeclarations());
@@ -139,10 +142,10 @@ void generateComponentEventBaseClass(Writer writer) throws IOException {
         writer.close();
     }
 
-    void generateSubEventBaseClass(Writer writer) throws IOException {
-        ST template = stGroup.getInstanceOf("uiSubEventBaseClass")
+    void generateUiQueryBaseClass(Writer writer) throws IOException {
+        ST template = stGroup.getInstanceOf("uiQueryBaseClass")
                 .add("package", packageName)
-                .add("allEventDeclarations", model.getSubEventDeclarations());
+                .add("allQueryDeclarations", model.getQueryDeclarations());
         AutoIndentWriter out = new AutoIndentWriter(writer);
         template.write(out, new StringTemplatesErrorListener());
         writer.close();
@@ -157,15 +160,6 @@ void generateComponentCommandBaseClass(Writer writer) throws IOException {
         writer.close();
     }
 
-    void generateSubCommandBaseClass(Writer writer) throws IOException {
-        ST template = stGroup.getInstanceOf("uiSubCommandBaseClass")
-                .add("package", packageName)
-                .add("allCommandDeclarations", model.getSubCommandDeclarations());
-        AutoIndentWriter out = new AutoIndentWriter(writer);
-        template.write(out, new StringTemplatesErrorListener());
-        writer.close();
-    }
-
     void generateObjectTypeEnum(Writer writer) throws IOException {
         ST template = stGroup.getInstanceOf("uiObjectTypeEnum")
                 .add("package", packageName)
@@ -187,18 +181,16 @@ void generateUiObjectBaseClass(Writer writer) throws IOException {
     void generateEventEnum(Writer writer) throws IOException {
         ST template = stGroup.getInstanceOf("uiEventEnum")
                 .add("package", packageName)
-                .add("eventKind", "Event")
                 .add("allEventDeclarations", model.getEventDeclarations());
         AutoIndentWriter out = new AutoIndentWriter(writer);
         template.write(out, new StringTemplatesErrorListener());
         writer.close();
     }
 
-    void generateSubEventEnum(Writer writer) throws IOException {
-        ST template = stGroup.getInstanceOf("uiEventEnum")
+    void generateQueryEnum(Writer writer) throws IOException {
+        ST template = stGroup.getInstanceOf("uiQueryEnum")
                 .add("package", packageName)
-                .add("eventKind", "SubEvent")
-                .add("allEventDeclarations", model.getSubEventDeclarations());
+                .add("allQueryDeclarations", model.getQueryDeclarations());
         AutoIndentWriter out = new AutoIndentWriter(writer);
         template.write(out, new StringTemplatesErrorListener());
         writer.close();
@@ -209,9 +201,8 @@ void generateJacksonTypeIdMaps(Writer writer) throws IOException {
         allJsonSerializableClasses.addAll(model.getClassDeclarations());
         allJsonSerializableClasses.addAll(model.getInterfaceDeclarations());
         allJsonSerializableClasses.addAll(model.getCommandDeclarations());
-        allJsonSerializableClasses.addAll(model.getSubCommandDeclarations());
         allJsonSerializableClasses.addAll(model.getEventDeclarations());
-        allJsonSerializableClasses.addAll(model.getSubEventDeclarations());
+        allJsonSerializableClasses.addAll(model.getQueryDeclarations());
         ST template = stGroup.getInstanceOf("jacksonTypeIdMaps")
                 .add("package", packageName)
                 .add("allJsonSerializableClasses", allJsonSerializableClasses);
diff --git a/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/TeamAppsTypeScriptGenerator.java b/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/TeamAppsTypeScriptGenerator.java
index ddd9c6edf..f53418885 100644
--- a/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/TeamAppsTypeScriptGenerator.java
+++ b/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/TeamAppsTypeScriptGenerator.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -28,12 +28,9 @@
 import org.teamapps.dto.TeamAppsDtoParser;
 
 import java.io.File;
-import java.io.FileInputStream;
 import java.io.FileWriter;
 import java.io.IOException;
-import java.io.InputStreamReader;
 import java.io.Writer;
-import java.util.Collections;
 import java.util.List;
 import java.util.stream.Collectors;
 
@@ -52,17 +49,10 @@ public static void main(String[] args) throws IOException {
         File sourceDir = new File(args[0]);
         File targetDir = new File(args[1]);
 
-        List<TeamAppsDtoParser.ClassCollectionContext> classCollections = TeamAppsGeneratorUtil.getFilesInDirectory(sourceDir).stream()
-                .map(dtoFile -> {
-                    try {
-                        InputStreamReader reader = new InputStreamReader(new FileInputStream(dtoFile), "UTF-8");
-                        return ParserFactory.createParser(reader).classCollection();
-                    } catch (Exception e1) {
-                        throw new IllegalArgumentException(e1);
-                    }
-                })
-                .collect(Collectors.toList());
-        new TeamAppsTypeScriptGenerator(new TeamAppsDtoModel(classCollections)).generate(targetDir);
+        System.out.println("Generating TypeScript from " + sourceDir.getAbsolutePath() + " to " + targetDir.getAbsolutePath());
+
+        new TeamAppsTypeScriptGenerator(new TeamAppsDtoModel(TeamAppsGeneratorUtil.parseClassCollections(sourceDir)))
+                .generate(targetDir);
     }
 
     public TeamAppsTypeScriptGenerator(TeamAppsDtoModel model) {
@@ -88,17 +78,12 @@ public void generate(File targetDir) throws IOException {
 
         generateCommandBaseDefinition(new FileWriter(new File(parentDir, "UiCommand.ts")));
         generateCommandExecutor(model.getCommandDeclarations(), new FileWriter(new File(parentDir, "CommandExecutor.ts")));
-        generateEventRegistrator(model.getAllClassesAndInterfacesWithEvents(), new FileWriter(new File(parentDir, "EventRegistrator.ts")));
 
-        generateEventFactory(model.getAllClassesAndInterfacesWithEvents(), model.findAllClassesInterfacesAndEnumsReferencedByEvents(), new FileWriter(new File(parentDir, "EventFactory.ts")));
-        generateSubEventFactory(model.getAllClassesAndInterfacesWithSubEvents(), model.findAllClassesInterfacesAndEnumsReferencedBySubEvents(), new FileWriter(new File(parentDir, "SubEventFactory.ts")));
         generateEventBaseDefinition(model.getEventDeclarations(), new FileWriter(new File(parentDir, "UiEvent.ts")));
+        generateEventRegistrator(model.getAllClassesAndInterfacesWithEvents(), new FileWriter(new File(parentDir, "ComponentEventDescriptors.ts")));
 
-//	    generateSubCommandBaseDefinition(new FileWriter(new File(parentDir, "UiSubCommand.ts")));
-//	    generateSubCommandExecutor(model.getSubCommandDeclarations(), new FileWriter(new File(parentDir, "SubCommandExecutor.ts")));
-
-//        generateSubEventBaseDefinition(model.getSubEventDeclarations(), new FileWriter(new File(parentDir, "UiSubEvent.ts")));
-//        generateSubEventRegistrator(model.getClassesAndInterfacesReferencedForSubEvents(), new FileWriter(new File(parentDir, "SubEventRegistrator.ts")));
+        generateQueryBaseDefinition(model.getEventDeclarations(), new FileWriter(new File(parentDir, "UiQuery.ts")));
+        generateQueryFunctionAdder(model.getAllClassesAndInterfacesWithQueries(), new FileWriter(new File(parentDir, "QueryFunctionAdder.ts")));
     }
 
 	public void generateEnum(TeamAppsDtoParser.EnumDeclarationContext enumContext, Writer writer) throws IOException {
@@ -135,41 +120,6 @@ public void generateCommandExecutor(List<TeamAppsDtoParser.CommandDeclarationCon
         writer.close();
     }
 
-	public void generateSubCommandBaseDefinition(Writer writer) throws IOException {
-		ST template = stGroup.getInstanceOf("uiSubCommandBaseDefinition");
-		AutoIndentWriter out = new AutoIndentWriter(writer);
-		template.write(out, new StringTemplatesErrorListener());
-		writer.close();
-	}
-
-    public void generateSubCommandExecutor(List<TeamAppsDtoParser.SubCommandDeclarationContext> commandDeclarationContexts, Writer writer) throws IOException {
-        ST template = stGroup.getInstanceOf("commandExecutor")
-                .add("name", "SubCommandExecutor")
-                .add("nonStaticCommands", commandDeclarationContexts)
-                .add("staticCommands", Collections.emptyList());
-        AutoIndentWriter out = new AutoIndentWriter(writer);
-        template.write(out, new StringTemplatesErrorListener());
-        writer.close();
-    }
-
-    public void generateEventFactory(List<ParserRuleContext> allClassesAndInterfacesWithEvents, List<ParserRuleContext> allClassesInterfacesAndEnumsReferencedByEvents, Writer writer) throws IOException {
-        ST template = stGroup.getInstanceOf("eventFactory")
-                .add("allClassesAndInterfacesWithEvents", allClassesAndInterfacesWithEvents)
-                .add("allClassesInterfacesAndEnumsReferencedByEvents", allClassesInterfacesAndEnumsReferencedByEvents);
-        AutoIndentWriter out = new AutoIndentWriter(writer);
-        template.write(out, new StringTemplatesErrorListener());
-        writer.close();
-    }
-
-    public void generateSubEventFactory(List<ParserRuleContext> allClassesAndInterfacesWithSubEvents, List<ParserRuleContext> allClassesInterfacesAndEnumsReferencedBySubEvents, Writer writer) throws IOException {
-        ST template = stGroup.getInstanceOf("subEventFactory")
-                .add("allClassesAndInterfacesWithSubEvents", allClassesAndInterfacesWithSubEvents)
-                .add("allClassesInterfacesAndEnumsReferencedBySubEvents", allClassesInterfacesAndEnumsReferencedBySubEvents);
-        AutoIndentWriter out = new AutoIndentWriter(writer);
-        template.write(out, new StringTemplatesErrorListener());
-        writer.close();
-    }
-
     public void generateCommandBaseDefinition(Writer writer) throws IOException {
         ST template = stGroup.getInstanceOf("uiCommandBaseDefinition");
         AutoIndentWriter out = new AutoIndentWriter(writer);
@@ -178,32 +128,30 @@ public void generateCommandBaseDefinition(Writer writer) throws IOException {
     }
 
     public void generateEventBaseDefinition(List<TeamAppsDtoParser.EventDeclarationContext> eventDeclarations, Writer writer) throws IOException {
-        ST template = stGroup.getInstanceOf("uiEventBaseDefinition")
-                .add("eventDeclarations", eventDeclarations);
+        ST template = stGroup.getInstanceOf("uiEventBaseDefinition");
         AutoIndentWriter out = new AutoIndentWriter(writer);
         template.write(out, new StringTemplatesErrorListener());
         writer.close();
     }
 
-    public void generateSubEventBaseDefinition(List<TeamAppsDtoParser.SubEventDeclarationContext> subEventDeclarations, Writer writer) throws IOException {
-        ST template = stGroup.getInstanceOf("uiSubEventBaseDefinition")
-                .add("subEventDeclarations", subEventDeclarations);
+    public void generateQueryBaseDefinition(List<TeamAppsDtoParser.EventDeclarationContext> eventDeclarations, Writer writer) throws IOException {
+        ST template = stGroup.getInstanceOf("uiQueryBaseDefinition");
         AutoIndentWriter out = new AutoIndentWriter(writer);
         template.write(out, new StringTemplatesErrorListener());
         writer.close();
     }
 
     public void generateEventRegistrator(List<ParserRuleContext> classAndInterfaceContexts, Writer writer) throws IOException {
-        ST template = stGroup.getInstanceOf("eventRegistrator")
+        ST template = stGroup.getInstanceOf("componentEventDescriptors")
 		        .add("classesAndInterfacesWithEvents", classAndInterfaceContexts);
         AutoIndentWriter out = new AutoIndentWriter(writer);
         template.write(out, new StringTemplatesErrorListener());
         writer.close();
     }
 
-    public void generateSubEventRegistrator(List<ParserRuleContext> classAndInterfaceContexts, Writer writer) throws IOException {
-        ST template = stGroup.getInstanceOf("subEventRegistrator")
-		        .add("classesAndInterfacesReferencedForSubEvents", classAndInterfaceContexts);
+    public void generateQueryFunctionAdder(List<ParserRuleContext> classAndInterfaceContexts, Writer writer) throws IOException {
+        ST template = stGroup.getInstanceOf("queryFunctionAdder")
+		        .add("classesAndInterfacesWithQueries", classAndInterfaceContexts);
         AutoIndentWriter out = new AutoIndentWriter(writer);
         template.write(out, new StringTemplatesErrorListener());
         writer.close();
diff --git a/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/adapter/ClassDeclarationContextModelAdaptor.java b/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/adapter/ClassDeclarationContextModelAdaptor.java
index 526b3ed73..54cdc6798 100644
--- a/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/adapter/ClassDeclarationContextModelAdaptor.java
+++ b/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/adapter/ClassDeclarationContextModelAdaptor.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -55,34 +55,40 @@ public Object getProperty(Interpreter interpreter, ST seld, Object o, Object pro
             return astUtil.findSuperClassAndDirectlyImplementedInterfaces(classContext);
         } else if ("hasCommands".equals(propertyName)) {
             return !astUtil.getAllCommands(classContext).isEmpty();
-        } else if ("hasSubCommands".equals(propertyName)) {
-            return !astUtil.getAllSubCommands(classContext).isEmpty();
-        }  else if ("nonStaticCommandDeclaration".equals(propertyName)) {
+        }  else if ("nonStaticCommandDeclarations".equals(propertyName)) {
             return classContext.commandDeclaration().stream()
                     .filter(cmd -> cmd.staticModifier() == null)
                     .collect(Collectors.toList());
+        }  else if ("nonStaticEventDeclarations".equals(propertyName)) {
+            return classContext.eventDeclaration().stream()
+                    .filter(cmd -> cmd.staticModifier() == null)
+                    .collect(Collectors.toList());
         } else if ("hasEvents".equals(propertyName)) {
             return !astUtil.getAllEvents(classContext).isEmpty();
         } else if ("allEvents".equals(propertyName)) {
             return astUtil.getAllEvents(classContext);
-        } else if ("hasSubEvents".equals(propertyName)) {
-            return !astUtil.getAllSubEvents(classContext).isEmpty();
+        } else if ("allNonStaticEvents".equals(propertyName)) {
+            return astUtil.getAllEvents(classContext).stream()
+                    .filter(eventDeclarationContext -> eventDeclarationContext.staticModifier() == null)
+                    .collect(Collectors.toList());
+        } else if ("allStaticEvents".equals(propertyName)) {
+            return astUtil.getAllEvents(classContext).stream()
+                    .filter(eventDeclarationContext -> eventDeclarationContext.staticModifier() != null)
+                    .collect(Collectors.toList());
+        } else if ("allQueries".equals(propertyName)) {
+            return astUtil.getAllQueries(classContext);
         } else if ("superClassAndDirectlyImplementedInterfacesWithCommands".equals(propertyName)) {
             return astUtil.superClassAndDirectlyImplementedInterfacesWithCommands(classContext);
-        } else if ("superClassAndDirectlyImplementedInterfacesWithSubCommands".equals(propertyName)) {
-            return astUtil.superClassAndDirectlyImplementedInterfacesWithSubCommands(classContext);
         } else if ("superClassAndDirectlyImplementedInterfacesWithEvents".equals(propertyName)) {
             return astUtil.superClassAndDirectlyImplementedInterfacesWithEvents(classContext);
-        } else if ("superClassAndDirectlyImplementedInterfacesWithSubEvents".equals(propertyName)) {
-            return astUtil.superClassAndDirectlyImplementedInterfacesWithSubEvents(classContext);
-        } else if ("allSubEventsInHierarchy".equals(propertyName)) {
-            return astUtil.findAllSubEventsInHierarchy(classContext);
         } else if ("subEventBaseClassName".equals(propertyName)) {
             return classContext.Identifier().getText() + "SubEvent";
         } else if ("isDescendantOfClassOrInterfaceReferencedForSubEvents".equals(propertyName)) {
             return astUtil.isDescendantOfClassOrInterfaceReferencedForSubEvents(classContext);
         } else if ("allSubClasses".equals(propertyName)) {
             return astUtil.findAllSubClasses(classContext);
+        } else if ("hasSubTypes".equals(propertyName)) {
+            return astUtil.findAllSubClasses(classContext).size() > 0;
         } else if ("inlineEnumProperties".equals(propertyName)) {
             return classContext.propertyDeclaration().stream().filter(p -> p.type().inlineEnum() != null).collect(Collectors.toList());
         } else if ("allReferencedClassesAndInterfaces".equals(propertyName)) {
@@ -101,10 +107,6 @@ public Object getProperty(Interpreter interpreter, ST seld, Object o, Object pro
             return astUtil.getReferenceableProperties(classContext);
         } else if ("referenceableBaseClass".equals(propertyName)) {
             return astUtil.isReferenceableBaseClass(classContext);
-        } else if ("subCommandInterfaceNeeded".equals(propertyName)) {
-            return astUtil.classOrSubClassHasSubCommandDeclarations(classContext);
-        } else if ("subEventInterfaceNeeded".equals(propertyName)) {
-            return astUtil.classOrSubClassHasSubEventDeclarations(classContext);
         } else {
             return super.getProperty(interpreter, seld, o, property, propertyName);
         }
diff --git a/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/adapter/CommandDeclarationContextModelAdaptor.java b/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/adapter/CommandDeclarationContextModelAdaptor.java
index ef275dd59..79bfa23fd 100644
--- a/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/adapter/CommandDeclarationContextModelAdaptor.java
+++ b/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/adapter/CommandDeclarationContextModelAdaptor.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/adapter/EnumDeclarationContextModelAdapter.java b/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/adapter/EnumDeclarationContextModelAdapter.java
index d7a25ce20..b2840670a 100644
--- a/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/adapter/EnumDeclarationContextModelAdapter.java
+++ b/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/adapter/EnumDeclarationContextModelAdapter.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -20,9 +20,24 @@
 package org.teamapps.dto.generate.adapter;
 
 import org.apache.commons.lang3.StringUtils;
+import org.stringtemplate.v4.Interpreter;
+import org.stringtemplate.v4.ST;
+import org.stringtemplate.v4.misc.STNoSuchPropertyException;
 import org.teamapps.dto.TeamAppsDtoParser;
 
 public class EnumDeclarationContextModelAdapter extends ReferencableEntityModelAdaptor<TeamAppsDtoParser.EnumDeclarationContext> {
+
+	@Override
+	public Object getProperty(Interpreter interpreter, ST self, Object o, Object property, String propertyName) throws STNoSuchPropertyException {
+		TeamAppsDtoParser.EnumDeclarationContext enumContext = (TeamAppsDtoParser.EnumDeclarationContext) o;
+		switch (propertyName) {
+			case "hasStringValues":
+				return enumContext.enumConstant().stream().allMatch(ec -> ec.StringLiteral() != null);
+			default:
+				return super.getProperty(interpreter, self, o, property, propertyName);
+		}
+	}
+
 	@Override
 	protected String getTypeScriptIdentifier(TeamAppsDtoParser.EnumDeclarationContext node) {
 		return node.Identifier().getText();
diff --git a/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/adapter/EventDeclarationContextModelAdaptor.java b/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/adapter/EventDeclarationContextModelAdaptor.java
index af753e200..80eab0de8 100644
--- a/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/adapter/EventDeclarationContextModelAdaptor.java
+++ b/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/adapter/EventDeclarationContextModelAdaptor.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -115,9 +115,11 @@ protected String getJavaClassName(TeamAppsDtoParser.EventDeclarationContext node
         return TeamAppsDtoModel.getDeclaringClassOrInterfaceName(node) + "." + StringUtils.capitalize(node.Identifier().getText()) + "Event";
     }
 
-	private List<TeamAppsDtoParser.FormalParameterWithDefaultContext> getAllParameters(TeamAppsDtoParser.EventDeclarationContext commandContext) {
-        ArrayList<TeamAppsDtoParser.FormalParameterWithDefaultContext> allProperties = new ArrayList<>(commandContext.formalParameterWithDefault());
-        allProperties.add(0, COMPONENT_ID_PARAMETER);
+	private List<TeamAppsDtoParser.FormalParameterWithDefaultContext> getAllParameters(TeamAppsDtoParser.EventDeclarationContext eventContext) {
+        ArrayList<TeamAppsDtoParser.FormalParameterWithDefaultContext> allProperties = new ArrayList<>(eventContext.formalParameterWithDefault());
+        if (eventContext.staticModifier() == null) {
+			allProperties.add(0, COMPONENT_ID_PARAMETER);
+		}
         return allProperties;
     }
 
diff --git a/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/adapter/InterfaceDeclarationContextModelAdaptor.java b/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/adapter/InterfaceDeclarationContextModelAdaptor.java
index a2a1152cc..d9765743d 100644
--- a/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/adapter/InterfaceDeclarationContextModelAdaptor.java
+++ b/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/adapter/InterfaceDeclarationContextModelAdaptor.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -57,36 +57,40 @@ public Object getProperty(Interpreter interpreter, ST seld, Object o, Object pro
 			return astUtil.findAllSubClasses(interfaceContext);
 		} else if ("allSuperInterfaces".equals(propertyName)) {
 			return astUtil.findAllSuperInterfaces(interfaceContext);
-		} else if ("allSubEventsInHierarchy".equals(propertyName)) {
-			return astUtil.findAllSubEventsInHierarchy(interfaceContext);
 		} else if ("subEventBaseClassName".equals(propertyName)) {
 			return interfaceContext.Identifier().getText() + "SubEvent";
 		} else if ("isDescendantOfClassOrInterfaceReferencedForSubEvents".equals(propertyName)) {
 			return astUtil.isDescendantOfClassOrInterfaceReferencedForSubEvents(interfaceContext);
 		} else if ("allImplementingClasses".equals(propertyName)) {
 			return astUtil.findAllImplementingClasses(interfaceContext);
-		} else if ("nonStaticCommandDeclaration".equals(propertyName)) {
+		} else if ("nonStaticCommandDeclarations".equals(propertyName)) {
 			return interfaceContext.commandDeclaration().stream()
 					.filter(cmd -> cmd.staticModifier() == null)
 					.collect(Collectors.toList());
+		} else if ("nonStaticEventDeclarations".equals(propertyName)) {
+			return interfaceContext.eventDeclaration().stream()
+					.filter(cmd -> cmd.staticModifier() == null)
+					.collect(Collectors.toList());
 		} else if ("hasCommands".equals(propertyName)) {
 			return !astUtil.getAllCommands(interfaceContext).isEmpty();
-		} else if ("hasSubCommands".equals(propertyName)) {
-			return !astUtil.getAllSubCommands(interfaceContext).isEmpty();
 		} else if ("hasEvents".equals(propertyName)) {
 			return !astUtil.getAllEvents(interfaceContext).isEmpty();
 		} else if ("allEvents".equals(propertyName)) {
 			return astUtil.getAllEvents(interfaceContext);
-		} else if ("hasSubEvents".equals(propertyName)) {
-			return !astUtil.getAllSubEvents(interfaceContext).isEmpty();
+		} else if ("allNonStaticEvents".equals(propertyName)) {
+			return astUtil.getAllEvents(interfaceContext).stream()
+					.filter(eventDeclarationContext -> eventDeclarationContext.staticModifier() == null)
+					.collect(Collectors.toList());
+		} else if ("allStaticEvents".equals(propertyName)) {
+			return astUtil.getAllEvents(interfaceContext).stream()
+					.filter(eventDeclarationContext -> eventDeclarationContext.staticModifier() != null)
+					.collect(Collectors.toList());
+		} else if ("allQueries".equals(propertyName)) {
+			return astUtil.getAllQueries(interfaceContext);
 		} else if ("superInterfacesWithCommands".equals(propertyName)) {
 			return astUtil.getSuperInterfacesWithCommands(interfaceContext);
-		} else if ("superInterfacesWithSubCommands".equals(propertyName)) {
-			return astUtil.getSuperInterfacesWithSubCommands(interfaceContext);
 		} else if ("superInterfacesWithEvents".equals(propertyName)) {
 			return astUtil.getSuperInterfacesWithEvents(interfaceContext);
-		} else if ("superInterfacesWithSubEvents".equals(propertyName)) {
-			return astUtil.getSuperInterfacesWithSubEvents(interfaceContext);
 		} else if ("inlineEnumProperties".equals(propertyName)) {
 			return interfaceContext.propertyDeclaration().stream().filter(p -> p.type().inlineEnum() != null).collect(Collectors.toList());
 		} else if ("allReferencedClassesAndInterfaces".equals(propertyName)) {
@@ -95,10 +99,6 @@ public Object getProperty(Interpreter interpreter, ST seld, Object o, Object pro
 			return astUtil.findAllReferencedEnums(interfaceContext);
 		} else if ("simplePropertiesByRelevance".equals(propertyName)) {
 			return astUtil.getSimplePropertiesSortedByRelevance(astUtil.findAllProperties(interfaceContext));
-		} else if ("subCommandInterfaceNeeded".equals(propertyName)) {
-			return astUtil.interfaceOrDescendantHasSubCommandDeclarations(interfaceContext);
-		} else if ("subEventInterfaceNeeded".equals(propertyName)) {
-			return astUtil.interfaceOrDescendantHasSubEventDeclarations(interfaceContext);
 		} else {
 			return super.getProperty(interpreter, seld, o, property, propertyName);
 		}
diff --git a/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/adapter/PojoModelAdaptor.java b/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/adapter/PojoModelAdaptor.java
index a0bde4050..25fe12c10 100644
--- a/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/adapter/PojoModelAdaptor.java
+++ b/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/adapter/PojoModelAdaptor.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/adapter/PropertyDeclarationContextModelAdaptor.java b/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/adapter/PropertyDeclarationContextModelAdaptor.java
index 6d3dce6d2..8be4f9ef3 100644
--- a/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/adapter/PropertyDeclarationContextModelAdaptor.java
+++ b/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/adapter/PropertyDeclarationContextModelAdaptor.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/adapter/SubEventDeclarationContextModelAdaptor.java b/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/adapter/QueryDeclarationContextModelAdaptor.java
similarity index 62%
rename from teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/adapter/SubEventDeclarationContextModelAdaptor.java
rename to teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/adapter/QueryDeclarationContextModelAdaptor.java
index 88b01ec08..accf6e5de 100644
--- a/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/adapter/SubEventDeclarationContextModelAdaptor.java
+++ b/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/adapter/QueryDeclarationContextModelAdaptor.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -23,41 +23,49 @@
 import org.stringtemplate.v4.Interpreter;
 import org.stringtemplate.v4.ST;
 import org.stringtemplate.v4.misc.STNoSuchPropertyException;
-import org.teamapps.dto.generate.TeamAppsDtoModel;
 import org.teamapps.dto.TeamAppsDtoParser;
+import org.teamapps.dto.generate.ParserFactory;
+import org.teamapps.dto.generate.TeamAppsDtoModel;
 
+import java.io.IOException;
+import java.io.StringReader;
+import java.util.ArrayList;
+import java.util.List;
 import java.util.function.Function;
 import java.util.stream.Collectors;
 
-public class SubEventDeclarationContextModelAdaptor extends ReferencableEntityModelAdaptor<TeamAppsDtoParser.SubEventDeclarationContext> {
+public class QueryDeclarationContextModelAdaptor extends ReferencableEntityModelAdaptor<TeamAppsDtoParser.QueryDeclarationContext> {
 
+    private static final TeamAppsDtoParser.FormalParameterWithDefaultContext COMPONENT_ID_PARAMETER;
     private final TeamAppsDtoModel astUtil;
 
-    public SubEventDeclarationContextModelAdaptor(TeamAppsDtoModel astUtil) {
+    static {
+        try {
+            COMPONENT_ID_PARAMETER = ParserFactory.createParser(new StringReader("UiComponentId componentId")).formalParameterWithDefault();
+        } catch (IOException e) {
+            throw new IllegalStateException(e);
+        }
+    }
+
+    public QueryDeclarationContextModelAdaptor(TeamAppsDtoModel astUtil) {
         this.astUtil = astUtil;
     }
 
     @Override
     public Object getProperty(Interpreter interpreter, ST seld, Object o, Object property, String propertyName) throws STNoSuchPropertyException {
-        TeamAppsDtoParser.SubEventDeclarationContext subEventContext = (TeamAppsDtoParser.SubEventDeclarationContext) o;
+        TeamAppsDtoParser.QueryDeclarationContext queryContext = (TeamAppsDtoParser.QueryDeclarationContext) o;
         if ("declaringClass".equals(propertyName)) {
-            return TeamAppsDtoModel.getDeclaringClassOrInterface(subEventContext);
+            return TeamAppsDtoModel.getDeclaringClassOrInterface(queryContext);
         } else if ("typeScriptInterfaceName".equals(propertyName)) {
-            return astUtil.getDeclaringClassOrInterfaceName(subEventContext) + "_" + StringUtils.capitalize(subEventContext.Identifier().getText()) + "SubEvent";
+            return TeamAppsDtoModel.getDeclaringClassOrInterfaceName(queryContext) + "_" + StringUtils.capitalize(queryContext.Identifier().getText()) + "Query";
         } else if ("allProperties".equals(propertyName)) {
-            return subEventContext.formalParameterWithDefault();
+            return getAllParameters(queryContext);
         } else if ("allRequiredProperties".equals(propertyName)) {
-            return subEventContext.formalParameterWithDefault();
+            return getAllParameters(queryContext);
         } else if ("requiredPropertiesNotImplementedBySuperClasses".equals(propertyName)) {
-            return subEventContext.formalParameterWithDefault();
-        } else if ("superClassDecl".equals(propertyName)) {
-            return null;
-        } else if ("allSubClasses".equals(propertyName)) {
-            return null;
-        } else if ("allNonRequiredProperties".equals(propertyName)) {
-            return null;
+            return getAllParameters(queryContext);
         } else if ("simplePropertiesByRelevance".equals(propertyName)) {
-            return subEventContext.formalParameterWithDefault().stream()
+            return getAllParameters(queryContext).stream()
                     .sorted((p1, p2) -> {
                         Function<TeamAppsDtoParser.FormalParameterWithDefaultContext, Integer> getPriority = (p) -> {
                             if (p.Identifier().getText().equals("id")) {
@@ -77,28 +85,30 @@ public Object getProperty(Interpreter interpreter, ST seld, Object o, Object pro
                         return getPriority.apply(p2) - getPriority.apply(p1);
                     })
                     .collect(Collectors.toList());
-        } else if ("allReferencedClassesAndInterfaces".equals(propertyName)) {
-            return astUtil.findAllReferencedClassesAndInterfaces(subEventContext);
-        } else if ("allReferencedEnums".equals(propertyName)) {
-            return astUtil.findAllReferencedEnums(subEventContext);
         } else {
             return super.getProperty(interpreter, seld, o, property, propertyName);
         }
     }
 
     @Override
-    protected String getTypeScriptIdentifier(TeamAppsDtoParser.SubEventDeclarationContext node) {
-        return getDeclaringTypeScriptFileBaseName(node) + "_" + StringUtils.capitalize(node.Identifier().getText()) + "SubEvent";
+    protected String getTypeScriptIdentifier(TeamAppsDtoParser.QueryDeclarationContext node) {
+        return getDeclaringTypeScriptFileBaseName(node) + "_" + StringUtils.capitalize(node.Identifier().getText()) + "Query";
     }
 
     @Override
-    protected String getJsonIdentifier(TeamAppsDtoParser.SubEventDeclarationContext node) {
+    protected String getJsonIdentifier(TeamAppsDtoParser.QueryDeclarationContext node) {
         return TeamAppsDtoModel.getDeclaringClassOrInterfaceName(node) + "." + node.Identifier().getText();
     }
 
-    @Override
-    protected String getJavaClassName(TeamAppsDtoParser.SubEventDeclarationContext node) {
-        return TeamAppsDtoModel.getDeclaringClassOrInterfaceName(node) + "." + StringUtils.capitalize(node.Identifier().getText()) + "SubEvent";
+	@Override
+	protected String getJavaClassName(TeamAppsDtoParser.QueryDeclarationContext node) {
+        return TeamAppsDtoModel.getDeclaringClassOrInterfaceName(node) + "." + StringUtils.capitalize(node.Identifier().getText()) + "Query";
+    }
+
+	private List<TeamAppsDtoParser.FormalParameterWithDefaultContext> getAllParameters(TeamAppsDtoParser.QueryDeclarationContext commandContext) {
+        ArrayList<TeamAppsDtoParser.FormalParameterWithDefaultContext> allProperties = new ArrayList<>(commandContext.formalParameterWithDefault());
+        allProperties.add(0, COMPONENT_ID_PARAMETER);
+        return allProperties;
     }
 
 }
diff --git a/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/adapter/ReferencableEntityModelAdaptor.java b/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/adapter/ReferencableEntityModelAdaptor.java
index c985aecb7..f4a62a6eb 100644
--- a/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/adapter/ReferencableEntityModelAdaptor.java
+++ b/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/adapter/ReferencableEntityModelAdaptor.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/adapter/SubCommandDeclarationContextModelAdaptor.java b/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/adapter/SubCommandDeclarationContextModelAdaptor.java
deleted file mode 100644
index c554b0a69..000000000
--- a/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/adapter/SubCommandDeclarationContextModelAdaptor.java
+++ /dev/null
@@ -1,93 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.dto.generate.adapter;
-
-import org.apache.commons.lang3.StringUtils;
-import org.stringtemplate.v4.Interpreter;
-import org.stringtemplate.v4.ST;
-import org.stringtemplate.v4.misc.STNoSuchPropertyException;
-import org.teamapps.dto.generate.TeamAppsDtoModel;
-import org.teamapps.dto.TeamAppsDtoParser;
-
-import java.util.function.Function;
-import java.util.stream.Collectors;
-
-public class SubCommandDeclarationContextModelAdaptor extends ReferencableEntityModelAdaptor<TeamAppsDtoParser.SubCommandDeclarationContext> {
-
-	private final TeamAppsDtoModel astUtil;
-
-	public SubCommandDeclarationContextModelAdaptor(TeamAppsDtoModel astUtil) {
-		this.astUtil = astUtil;
-	}
-
-	@Override
-	public Object getProperty(Interpreter interpreter, ST seld, Object o, Object property, String propertyName) throws STNoSuchPropertyException {
-		TeamAppsDtoParser.SubCommandDeclarationContext subCommandContext = (TeamAppsDtoParser.SubCommandDeclarationContext) o;
-		if ("declaringClass".equals(propertyName)) {
-			return TeamAppsDtoModel.getDeclaringClassOrInterface(subCommandContext);
-		} else if ("allProperties".equals(propertyName)) {
-			return subCommandContext.formalParameterWithDefault();
-		} else if ("allRequiredProperties".equals(propertyName)) {
-			return subCommandContext.formalParameterWithDefault();
-		} else if ("requiredPropertiesNotImplementedBySuperClasses".equals(propertyName)) {
-			return subCommandContext.formalParameterWithDefault();
-		} else if ("superClassDecl".equals(propertyName)) {
-			return null;
-		} else if ("simplePropertiesByRelevance".equals(propertyName)) {
-			return subCommandContext.formalParameterWithDefault().stream()
-					.sorted((p1, p2) -> {
-						Function<TeamAppsDtoParser.FormalParameterWithDefaultContext, Integer> getPriority = (p) -> {
-							if (p.Identifier().getText().equals("id")) {
-								return 50;
-							} else if (p.Identifier().getText().equals("name")) {
-								return 40;
-							} else if (p.Identifier().getText().contains("Id")) {
-								return 30;
-							} else if (p.Identifier().getText().contains("Name")) {
-								return 20;
-							} else if (astUtil.findReferencedClass(p.type()) == null) {
-								return 10;
-							} else {
-								return 0;
-							}
-						};
-						return getPriority.apply(p2) - getPriority.apply(p1);
-					})
-					.collect(Collectors.toList());
-		} else {
-			return super.getProperty(interpreter, seld, o, property, propertyName);
-		}
-	}
-
-	@Override
-	protected String getTypeScriptIdentifier(TeamAppsDtoParser.SubCommandDeclarationContext node) {
-		return getDeclaringTypeScriptFileBaseName(node) + "_" + StringUtils.capitalize(node.Identifier().getText()) + "SubCommand";
-	}
-
-	@Override
-	protected String getJsonIdentifier(TeamAppsDtoParser.SubCommandDeclarationContext node) {
-		return TeamAppsDtoModel.getDeclaringClassOrInterfaceName(node) + "." + node.Identifier().getText();
-	}
-
-	@Override
-	protected String getJavaClassName(TeamAppsDtoParser.SubCommandDeclarationContext node) {
-		return TeamAppsDtoModel.getDeclaringClassOrInterfaceName(node) + "." + StringUtils.capitalize(node.Identifier().getText()) + "SubCommand";
-	}
-}
diff --git a/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/adapter/TypeContextModelAdaptor.java b/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/adapter/TypeContextModelAdaptor.java
index d618ab710..2a52ab004 100644
--- a/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/adapter/TypeContextModelAdaptor.java
+++ b/teamapps-ui-dsl/src/main/java/org/teamapps/dto/generate/adapter/TypeContextModelAdaptor.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -207,7 +207,7 @@ private String getTypeScriptType(TeamAppsDtoParser.TypeContext typeContext) {
 		} else if (isUiComponentId(typeContext)) {
 			return "string";
 		} else if (isReference(typeContext)) {
-			return "any";
+			return "unknown";
 		} else if (IMPLICITELY_REFERENCEABLE_CLASSES.contains(typeContext.getText())) {
 			return typeContext.getText();
 		} else if (isTypeScriptConfigSuffixed(typeContext)) {
diff --git a/teamapps-ui-dsl/src/main/resources/org/teamapps/dto/TeamAppsJavaDtoGenerator.stg b/teamapps-ui-dsl/src/main/resources/org/teamapps/dto/TeamAppsJavaDtoGenerator.stg
index 3537fe910..f9592f66f 100644
--- a/teamapps-ui-dsl/src/main/resources/org/teamapps/dto/TeamAppsJavaDtoGenerator.stg
+++ b/teamapps-ui-dsl/src/main/resources/org/teamapps/dto/TeamAppsJavaDtoGenerator.stg
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,9 +19,13 @@
  */
 class(c, package) ::= <<
 <javaFilePrelude(package)>
+<if(c.hasSubTypes)>
 @JsonTypeInfo(use = JsonTypeInfo.Id.CUSTOM, property = "_type")
 @JsonTypeIdResolver(TeamAppsJacksonTypeIdResolver.class)
 @JsonInclude(JsonInclude.Include.NON_NULL)
+<else>
+@JsonTypeInfo(use = JsonTypeInfo.Id.CUSTOM, property = "_type", defaultImpl = <c.Identifier>.class)
+<endif>
 public <if(c.abstractModifier)>abstract <endif>class <c.Identifier> <if(c.superClassDecl)>extends <c.superClassDecl.Identifier> <endif>implements <if(c.implementsDecl)><c.implementsDecl.classList.Identifier:{id|<id>}; separator=", ">, <endif>UiObject {
 
 	<c.inlineEnumProperties:inlineEnum(); separator="\n\n">
@@ -40,15 +44,10 @@ public <if(c.abstractModifier)>abstract <endif>class <c.Identifier> <if(c.superC
 
 	<c.eventDeclaration:eventClass(); separator="\n\n">
 
-	<c.commandDeclaration:commandClass(); separator="\n\n">
-
-	<if(c.subCommandInterfaceNeeded)><subCommandInterface(c)><endif>
-
-	<if(c.subEventInterfaceNeeded)><subEventInterface(c)><endif>
+	<c.queryDeclaration:queryClass(); separator="\n\n">
 
-	<c.subEventDeclaration:subEventClass(); separator="\n\n">
+	<c.commandDeclaration:commandClass(); separator="\n\n">
 
-	<c.subCommandDeclaration:subCommandClass(); separator="\n\n">
 }>>
 
 classReference(c, package) ::= <<
@@ -81,15 +80,10 @@ public interface <i.Identifier> extends <if(i.superInterfaceDecl)><i.superInterf
 
 	<i.eventDeclaration:eventClass(); separator="\n\n">
 
-	<i.commandDeclaration:commandClass(); separator="\n\n">
-
-	<if(i.subCommandInterfaceNeeded)><subCommandInterface(i)><endif>
-
-	<if(i.subEventInterfaceNeeded)><subEventInterface(i)><endif>
+	<i.queryDeclaration:queryClass(); separator="\n\n">
 
-	<i.subEventDeclaration:subEventClass(); separator="\n\n">
+	<i.commandDeclaration:commandClass(); separator="\n\n">
 
-	<i.subCommandDeclaration:subCommandClass(); separator="\n\n">
 }>>
 
 javaFilePrelude(package) ::= <<
@@ -207,21 +201,32 @@ public enum <propertyDeclaration.Identifier.text; format="cap"> {
 enumClass(e, package) ::= <<
 <javaFilePrelude(package)>
 public enum <e.Identifier> {
-	<e.enumConstant:{e|<e.Identifier>}; separator=", ">;
+	<e.enumConstant:enumConstant(e.hasStringValues); separator=",\n">;
 
-	<if(!e.stringJsonValuesAnnotation)>
-	@com.fasterxml.jackson.annotation.JsonValue
-	public int jsonValue() {
-		return ordinal();
+	<if(e.hasStringValues)>
+	private final String jsonValue;
+
+	<e.Identifier>(String jsonValue) {
+		this.jsonValue = jsonValue;
 	}
-	<else>
+
 	@com.fasterxml.jackson.annotation.JsonValue
 	public String jsonValue() {
-		return toString();
+		return jsonValue;
 	}
+	<else>
+    @com.fasterxml.jackson.annotation.JsonValue
+    public int jsonValue() {
+        return ordinal();
+    }
 	<endif>
 }>>
 
+
+enumConstant(ec, hasStringValues) ::= <<
+	<ec.Identifier><if(hasStringValues)>(<ec.StringLiteral>)<endif>
+>>
+
 eventClass(ed) ::= <<
 public static class <ed.Identifier.text; format="cap">Event implements UiEvent {
 
@@ -229,40 +234,40 @@ public static class <ed.Identifier.text; format="cap">Event implements UiEvent {
 
 	<constructor(ed, "Event")>
 
-	<uiEventTypeGetter(ed, "Event")>
+	<typeGetter(ed, "Event")>
 
 	<toString(ed)>
 
 	<ed.allProperties:getter(); separator="\n\n">
 
+    <if(ed.staticModifier)>
+    public String getComponentId() {
+        return null;
+    }
+    <endif>
+
 }
 >>
 
-subEventClass(ed) ::= <<
-public static class <ed.Identifier.text; format="cap">SubEvent implements <ed.declaringClass.Identifier>SubEvent<if (ed.declaringClass.isInterface && ed.declaringClass.allImplementingClasses)>, <ed.declaringClass.allImplementingClasses:{c|<c.Identifier>.<c.Identifier>SubEvent}; separator=", "><endif> {
-
-	<ed.allProperties:propertyDeclaration(); separator="\n">
-
-	<constructor(ed, "SubEvent")>
+queryClass(qd) ::= <<
+public static class <qd.Identifier.text; format="cap">Query implements UiQuery {
 
-	<uiEventTypeGetter(ed, "SubEvent")>
+	<qd.allProperties:propertyDeclaration(); separator="\n">
 
-	<toString(ed)>
+	<constructor(qd, "Query")>
 
-	<ed.allProperties:getter(); separator="\n\n">
+	<typeGetter(qd, "Query")>
 
-}
->>
+	<toString(qd)>
 
-subEventInterface(c) ::= <<
-public static interface <c.Identifier.text>SubEvent <if(c.superClassAndDirectlyImplementedInterfaces)>extends <c.superClassAndDirectlyImplementedInterfaces:{c|<c.Identifier>SubEvent};  separator=", "><else>extends UiSubEvent<endif> {
+	<qd.allProperties:getter(); separator="\n\n">
 
 }
 >>
 
-uiEventTypeGetter(e, eventKind) ::= <<
-public Ui<eventKind>Type getUi<eventKind>Type() {
-	return Ui<eventKind>Type.<e.parent.Identifier.text; format="javaConstant">_<e.Identifier.text; format="javaConstant">;
+typeGetter(e, kind) ::= <<
+public Ui<kind>Type getUi<kind>Type() {
+	return Ui<kind>Type.<e.parent.Identifier.text; format="javaConstant">_<e.Identifier.text; format="javaConstant">;
 }
 >>
 
@@ -286,26 +291,6 @@ public static class <cmd.Identifier.text; format="cap">Command implements UiComm
 }
 >>
 
-subCommandClass(cmd) ::= <<
-public static class <cmd.Identifier.text; format="cap">SubCommand implements <cmd.declaringClass.Identifier.text>SubCommand {
-
-	<cmd.allProperties:propertyDeclaration(); separator="\n">
-
-	<constructor(cmd, "SubCommand")>
-
-	<toString(cmd)>
-
-	<cmd.allProperties:getter(); separator="\n\n">
-
-}
->>
-
-subCommandInterface(c) ::= <<
-public static interface <c.Identifier.text>SubCommand <if(c.superClassAndDirectlyImplementedInterfaces)>extends <c.superClassAndDirectlyImplementedInterfaces:{c|<c.Identifier>SubCommand};  separator=", "><else>extends UiSubCommand<endif> {
-
-}
->>
-
 uiObjectTypeEnum(package, allClasses) ::= <<
 <javaFilePrelude(package)>
 
@@ -349,15 +334,17 @@ public interface UiEvent {
 }
 >>
 
-uiSubEventBaseClass(package, allEventDeclarations) ::= <<
+uiQueryBaseClass(package, allQueryDeclarations) ::= <<
 <javaFilePrelude(package)>
 
 @JsonTypeInfo(use = JsonTypeInfo.Id.CUSTOM, property = "_type")
 @JsonTypeIdResolver(TeamAppsJacksonTypeIdResolver.class)
 @JsonInclude(JsonInclude.Include.NON_NULL)
-public interface UiSubEvent {
+public interface UiQuery {
 
-	UiSubEventType getUiSubEventType();
+	String getComponentId();
+
+	UiQueryType getUiQueryType();
 
 }
 >>
@@ -375,46 +362,55 @@ public interface UiObject {
 }
 >>
 
-uiEventEnum(package, eventKind, allEventDeclarations) ::= <<
+uiEventEnum(package, allEventDeclarations) ::= <<
 <javaFilePrelude(package)>
 
-public enum Ui<eventKind>Type {
+public enum UiEventType {
 
-	<allEventDeclarations:{e|<e.parent.Identifier.text; format="javaConstant">_<e.Identifier.text; format="javaConstant">(<e.parent.Identifier.text>.<e.Identifier.text; format="cap"><eventKind>.class)}; separator=",\n">;
+	<allEventDeclarations:{e|<e.parent.Identifier.text; format="javaConstant">_<e.Identifier.text; format="javaConstant">(<e.parent.Identifier.text>.<e.Identifier.text; format="cap">Event.class)}; separator=",\n">;
 
-	private final Class\<? extends Ui<eventKind>\> apiClass;
+	private final Class\<? extends UiEvent> apiClass;
 
-	Ui<eventKind>Type(Class\<? extends Ui<eventKind>\> apiClass) {
+	UiEventType(Class\<? extends UiEvent> apiClass) {
 		this.apiClass = apiClass;
 	}
 
-	public Class\<? extends Ui<eventKind>\> getApiClass() {
+	public Class\<? extends UiEvent> getApiClass() {
 		return apiClass;
 	}
 
 }
 >>
 
-uiCommandBaseClass(package, allCommandDeclarations) ::= <<
+uiQueryEnum(package, allQueryDeclarations) ::= <<
 <javaFilePrelude(package)>
 
-@JsonTypeInfo(use = JsonTypeInfo.Id.CUSTOM, property = "_type")
-@JsonTypeIdResolver(TeamAppsJacksonTypeIdResolver.class)
-@JsonInclude(JsonInclude.Include.NON_NULL)
-public interface UiCommand\<RESULT> {
+public enum UiQueryType {
 
-	String getComponentId();
+	<allQueryDeclarations:{e|<e.parent.Identifier.text; format="javaConstant">_<e.Identifier.text; format="javaConstant">(<e.parent.Identifier.text>.<e.Identifier.text; format="cap">Query.class)}; separator=",\n">;
+
+	private final Class\<? extends UiQuery> apiClass;
+
+	UiQueryType(Class\<? extends UiQuery> apiClass) {
+		this.apiClass = apiClass;
+	}
+
+	public Class\<? extends UiQuery> getApiClass() {
+		return apiClass;
+	}
 
 }
 >>
 
-uiSubCommandBaseClass(package, allCommandDeclarations) ::= <<
+uiCommandBaseClass(package, allCommandDeclarations) ::= <<
 <javaFilePrelude(package)>
 
 @JsonTypeInfo(use = JsonTypeInfo.Id.CUSTOM, property = "_type")
 @JsonTypeIdResolver(TeamAppsJacksonTypeIdResolver.class)
 @JsonInclude(JsonInclude.Include.NON_NULL)
-public interface UiSubCommand {
+public interface UiCommand\<RESULT> {
+
+	String getComponentId();
 
 }
 >>
diff --git a/teamapps-ui-dsl/src/main/resources/org/teamapps/dto/TeamAppsTypeScriptGenerator.stg b/teamapps-ui-dsl/src/main/resources/org/teamapps/dto/TeamAppsTypeScriptGenerator.stg
index 76b725958..b304ee305 100644
--- a/teamapps-ui-dsl/src/main/resources/org/teamapps/dto/TeamAppsTypeScriptGenerator.stg
+++ b/teamapps-ui-dsl/src/main/resources/org/teamapps/dto/TeamAppsTypeScriptGenerator.stg
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -28,23 +28,21 @@ export const typescriptDeclarationFixConstant = 1;
 classConfigDefinition(c) ::= <<
 <typeScriptFilePrelude()>
 
-import {UiEvent} from "./UiEvent";
 import {UiCommand} from "./UiCommand";
-<! import {UiSubEvent} from "./UiSubEvent";!>
-<! import {UiSubCommand} from "./UiSubCommand";!>
+import {UiEvent} from "./UiEvent";
+import {UiQuery} from "./UiQuery";
 import {TeamAppsEvent} from "../modules/util/TeamAppsEvent";
 <c.allReferencedClassesAndInterfaces:{c|import {<c.Identifier>Config\} from "./<c.Identifier>Config";}; separator="\n">
 <c.allReferencedEnums:{e|import {<e.Identifier>\} from "./<e.Identifier>";}; separator="\n">
 <c.superClassAndDirectlyImplementedInterfacesWithCommands:{c|import {<c.Identifier>CommandHandler\} from "./<c.Identifier>Config";}; separator="\n">
 <c.superClassAndDirectlyImplementedInterfacesWithEvents:{c|import {<c.Identifier>EventSource\} from "./<c.Identifier>Config";}; separator="\n">
-<c.superClassAndDirectlyImplementedInterfacesWithSubCommands:{c|import {<c.Identifier>SubCommandHandler\} from "./<c.Identifier>Config";}; separator="\n">
-<c.superClassAndDirectlyImplementedInterfacesWithSubEvents:{c|import {<c.Identifier>SubEventSource\} from "./<c.Identifier>Config";}; separator="\n">
 
 <c.inlineEnumProperties:inlineEnum(); separator="\n\n">
 
 export interface <c.Identifier.text>Config <if(c.superClassAndDirectlyImplementedInterfaces)>extends <c.superClassAndDirectlyImplementedInterfaces:{c|<c.Identifier>Config};  separator=", "> <endif>{
 	_type?: string;
 	<c.propertyDeclaration:typeScriptPropertyDeclaration(false); separator=";\n">
+	<c.queryDeclaration:queryDeclaration(); separator=";\n">
 }
 
 <if(c.referenceableBaseClass)>
@@ -65,52 +63,41 @@ export function create<c.Identifier.text; format="cap">Config(<c.allRequiredProp
 
 <if(c.hasCommands)>
 export interface <c.Identifier.text>CommandHandler <if(c.superClassAndDirectlyImplementedInterfacesWithCommands)>extends <c.superClassAndDirectlyImplementedInterfacesWithCommands:{c|<c.Identifier>CommandHandler}; separator=", "> <endif>{
-	<c.nonStaticCommandDeclaration:commandMethodStub(); separator="\n">
+	<c.nonStaticCommandDeclarations:commandMethodStub(); separator="\n">
 }
 <endif>
 
 <if(c.hasEvents)>
 export interface <c.Identifier>EventSource <if(c.superClassAndDirectlyImplementedInterfacesWithEvents)>extends <c.superClassAndDirectlyImplementedInterfacesWithEvents:{c|<c.Identifier>EventSource}; separator=", "> <endif>{
-	<c.eventDeclaration:teamAppsEventDeclaration(); separator="\n">
+	<c.nonStaticEventDeclarations:teamAppsEventDeclaration(); separator="\n">
 }
 <endif>
 
-<if(c.hasSubCommands)>
-export interface <c.Identifier.text>SubCommandHandler <if(c.superClassAndDirectlyImplementedInterfacesWithSubCommands)>extends <c.superClassAndDirectlyImplementedInterfacesWithSubCommands:{c|<c.Identifier>SubCommandHandler}; separator=", "> <endif>{
-	<c.subCommandDeclaration:commandMethodStub(); separator="\n">
-}
-<endif>
+<c.eventDeclaration:eventInterface(); separator="\n\n">
 
-<if(c.subEventInterfaceNeeded)>
-export interface <c.Identifier>SubEventSource <if(c.superClassAndDirectlyImplementedInterfacesWithSubEvents)>extends <c.superClassAndDirectlyImplementedInterfacesWithSubEvents:{c|<c.Identifier>SubEventSource}; separator=", "> <endif>{
-	<c.subEventDeclaration:teamAppsEventDeclaration(); separator="\n">
-}
-<endif>
-
-<if(c.eventDeclaration)>
-<c.eventDeclaration:eventInterface("UiEvent"); separator="\n\n">
-<endif>
-
-<if(c.subEventDeclaration)>
-<c.subEventDeclaration:eventInterface("UiSubEvent"); separator="\n\n">
-<endif>
+<c.queryDeclaration:queryInterface(); separator="\n\n">
 >>
 
 commandMethodStub(cmd) ::= <<
-<cmd.Identifier>(<cmd.formalParameterWithDefault:parameter(false); separator=", ">): void;
+<cmd.Identifier>(<cmd.formalParameterWithDefault:parameter(false); separator=", ">): <if(cmd.type)>Promise\<<cmd.type.typeScriptType>\>|<cmd.type.typeScriptType><else>any<endif>;
 >>
 
 teamAppsEventDeclaration(evt) ::= <<
 on<evt.Identifier.text; format="cap">: TeamAppsEvent\<<evt.typeScriptInterfaceName>\>;
 >>
 
-eventInterface(evt, eventKind) ::= <<
-export interface <evt.typeScriptInterfaceName> extends <eventKind> {
-	_type: "<evt._type>";
+eventInterface(evt) ::= <<
+export interface <evt.typeScriptInterfaceName> extends UiEvent {
 	<evt.formalParameterWithDefault:typeScriptPropertyDeclaration(true); separator=";\n">
 }
 >>
 
+queryInterface(q) ::= <<
+export interface <q.typeScriptInterfaceName> extends UiQuery {
+	<q.formalParameterWithDefault:typeScriptPropertyDeclaration(true); separator=";\n">
+}
+>>
+
 parameter(p, optional) ::= "<p.Identifier><if(optional)>?<endif>: <p.type.typeScriptType>"
 
 interfaceConfigDefinition(c) ::= <<
@@ -118,26 +105,23 @@ interfaceConfigDefinition(c) ::= <<
 
 import {UiEvent} from "./UiEvent";
 import {UiCommand} from "./UiCommand";
-<! import {UiSubEvent} from "./UiSubEvent"; !>
-<! import {UiSubCommand} from "./UiSubCommand"; !>
 import {TeamAppsEvent} from "../modules/util/TeamAppsEvent";
 <c.allReferencedClassesAndInterfaces:{c|import {<c.Identifier>Config\} from "./<c.Identifier>Config";}; separator="\n">
 <c.allReferencedEnums:{e|import {<e.Identifier>\} from "./<e.Identifier>";}; separator="\n">
 <c.superClassAndDirectlyImplementedInterfacesWithCommands:{c|import {<c.Identifier>CommandHandler\} from "./<c.Identifier>Config";}; separator="\n">
 <c.superClassAndDirectlyImplementedInterfacesWithEvents:{c|import {<c.Identifier>EventSource\} from "./<c.Identifier>Config";}; separator="\n">
-<c.superClassAndDirectlyImplementedInterfacesWithSubCommands:{c|import {<c.Identifier>SubCommandHandler\} from "./<c.Identifier>Config";}; separator="\n">
-<c.superClassAndDirectlyImplementedInterfacesWithSubEvents:{c|import {<c.Identifier>SubEventSource\} from "./<c.Identifier>Config";}; separator="\n">
 
 <c.inlineEnumProperties:inlineEnum(); separator="\n\n">
 
 export interface <c.Identifier.text>Config <if(c.superInterfaces)>extends <c.superInterfaces:{superInterface|<superInterface.Identifier>Config}; separator=", "> <endif>{
 	_type?: string;
 	<c.propertyDeclaration:typeScriptPropertyDeclaration(false); separator=";\n">
+	<c.queryDeclaration:queryDeclaration(); separator=";\n">
 }
 
 <if(c.hasCommands)>
 export interface <c.Identifier.text>CommandHandler <if(c.superInterfacesWithCommands)>extends <c.superInterfacesWithCommands:{c|<c.Identifier>CommandHandler}; separator=", "> <endif>{
-	<c.nonStaticCommandDeclaration:commandMethodStub(); separator="\n">
+	<c.nonStaticCommandDeclarations:commandMethodStub(); separator="\n">
 }
 <endif>
 
@@ -147,25 +131,9 @@ export interface <c.Identifier>EventSource <if(c.superInterfacesWithEvents)>exte
 }
 <endif>
 
-<if(c.hasSubCommands)>
-export interface <c.Identifier.text>SubCommandHandler <if(c.superInterfacesWithSubCommands)>extends <c.superInterfacesWithSubCommands:{c|<c.Identifier>SubCommandHandler}; separator=", "> <endif>{
-	<c.subCommandDeclaration:commandMethodStub(); separator="\n">
-}
-<endif>
+<c.eventDeclaration:eventInterface(); separator="\n\n">
 
-<if(c.subEventInterfaceNeeded)>
-export interface <c.Identifier>SubEventSource <if(c.superInterfacesWithSubEvents)>extends <c.superInterfacesWithSubEvents:{c|<c.Identifier>SubEventSource}; separator=", "> <endif>{
-	<c.subEventDeclaration:teamAppsEventDeclaration(); separator="\n">
-}
-<endif>
-
-<if(c.eventDeclaration)>
-<c.eventDeclaration:eventInterface("UiEvent"); separator="\n\n">
-<endif>
-
-<if(c.subEventDeclaration)>
-<c.subEventDeclaration:eventInterface("UiSubEvent")>
-<endif>
+<c.queryDeclaration:queryInterface(); separator="\n\n">
 >>
 
 inlineEnum(propertyDeclaration) ::= <<
@@ -178,13 +146,17 @@ typeScriptPropertyDeclaration(p, forceRequired) ::= <<
 <p.Identifier.text><if(!p.requiredModifier && !forceRequired)>?<endif>: <p.type.typeScriptType>
 >>
 
+queryDeclaration(q) ::= <<
+<q.Identifier.text>: (query: <q.typeScriptInterfaceName>) => Promise\<<q.type.typeScriptType>\>
+>>
+
 enum(e) ::= <<
 <typeScriptFilePrelude()>
 export enum <e.Identifier> {
-	<if(!e.stringJsonValuesAnnotation)>
-	<e.enumConstant:{e|<e.Identifier>}; separator=", ">
+	<if(e.hasStringValues)>
+	<e.enumConstant:{ec|<ec.Identifier> = <ec.StringLiteral>}; separator=", ">
 	<else>
-	<e.enumConstant:{e|<e.Identifier> = "<e.Identifier>"}; separator=", ">
+	<e.enumConstant:{ec|<ec.Identifier>}; separator=", ">
 	<endif>
 }
 >>
@@ -193,8 +165,8 @@ commandExecutor(nonStaticCommands, staticCommands, name) ::= <<
 <typeScriptFilePrelude()>
 
 <if (staticCommands)>
-import {UiComponent} from "../modules/UiComponent";
-import {UiComponentReference} from "./UiComponentConfig";
+import {UiClientObject} from "../modules/UiClientObject";
+import {UiClientObjectReference} from "./UiClientObjectConfig";
 import {TeamAppsUiComponentRegistry} from "../modules/TeamAppsUiComponentRegistry";
 import {TeamAppsUiContext} from "../modules/TeamAppsUiContext";
 <endif>
@@ -208,119 +180,68 @@ export class <name> {
 		<staticCommands:staticCommandExecutorEntry(); separator=",\n">
 	};
 
-	constructor(private componentRegistry: (reference: UiComponentReference) => UiComponent) {
-	}
-
-	private getComponentForReference(reference: UiComponentReference) {
-		this.componentRegistry(reference);
-	}
-
-	public executeCommand(targetObject: any, command: any) {
-		return this.commandExecutorsByCommandName[command._type](targetObject, command);
+	public async executeCommand(targetObject: any, command: any) {
+		return await this.commandExecutorsByCommandName[command._type](targetObject, command);
 	}
 
-	public executeStaticCommand(command: any, context: TeamAppsUiContext) {
-		return this.staticCommandExecutorsByCommandName[command._type](command, context);
+	public async executeStaticCommand(command: any, context: TeamAppsUiContext) {
+		return await this.staticCommandExecutorsByCommandName[command._type](command, context);
 	}
 }
 >>
 nonStaticCommandExecutorEntry(command) ::= <<
-    '<command._type>': (targetObject: any, command: any) => {
-		targetObject.<command.Identifier>(<command.formalParameterWithDefault:commandExecutorMethodInvocationParameter(); separator=", ">);
+    '<command._type>': async (targetObject: any, command: any) => {
+		return await targetObject.<command.Identifier>(<command.formalParameterWithDefault:commandExecutorMethodInvocationParameter(); separator=", ">);
 	}
 >>
 staticCommandExecutorEntry(command) ::= <<
-    '<command._type>': (command: any, context: TeamAppsUiContext) => {
-		(TeamAppsUiComponentRegistry.getComponentClassForName("<command.declaringClass.Identifier>") as any).<command.Identifier>(<command.formalParameterWithDefault:commandExecutorMethodInvocationParameter(); separator=", "><if (command.formalParameterWithDefault)>, <endif>context);
+    '<command._type>': async (command: any, context: TeamAppsUiContext) => {
+		return await (TeamAppsUiComponentRegistry.getComponentClassForName("<command.declaringClass.Identifier>") as any).<command.Identifier>(<command.formalParameterWithDefault:commandExecutorMethodInvocationParameter(); separator=", "><if (command.formalParameterWithDefault)>, <endif>context);
 	}
 >>
 commandExecutorMethodInvocationParameter(p) ::= "command.<p.Identifier>"
 
-eventRegistrator(classesAndInterfacesWithEvents) ::= <<
+componentEventDescriptors(classesAndInterfacesWithEvents) ::= <<
 <typeScriptFilePrelude()>
 
-import {UiEvent} from "./UiEvent";
-import {TeamAppsEventListener} from "../modules/util/TeamAppsEvent";
+export var staticComponentEventDescriptors = [
+    <classesAndInterfacesWithEvents:eventNamesObject(true); separator=",\n">
+];
 
-export class EventRegistrator {
-	public static registerForEvents(eventSource: any, type: string, eventHandler: TeamAppsEventListener\<UiEvent>) {
-		switch (type) {
-			<classesAndInterfacesWithEvents:eventRegistrations(); separator="\n">
-		}
-	}
-}
+export var componentEventDescriptors = [
+    <classesAndInterfacesWithEvents:eventNamesObject(false); separator=",\n">
+];
 >>
 
-eventRegistrations(c) ::= <<
-case "<c.Identifier.text>":
-	<c.allEvents:eventRegistration(); separator="\n">
-	break;
->>
-
-subEventRegistrator(classesAndInterfacesReferencedForSubEvents) ::= <<
-<typeScriptFilePrelude()>
-
-<! import {UiSubEvent} from "./UiSubEvent"; !>
-import {TeamAppsEventListener} from "../modules/util/TeamAppsEvent";
-
-export class SubEventRegistrator {
-	<classesAndInterfacesReferencedForSubEvents:subEventRegistrations(); separator="\n">
-}
->>
-
-subEventRegistrations(c) ::= <<
-public static registerFor<c.Identifier>SubEvents(eventSource: any, eventHandler: TeamAppsEventListener\<UiSubEvent>) {
-	<c.allSubEventsInHierarchy:eventRegistration(); separator="\n">
-}
+eventNamesObject(c, static) ::= <<
+<if(static)>{ componentType: "<c.Identifier.text>", eventDescriptors: [<c.allStaticEvents:{e|{name: "<e.Identifier.text>", _type: "<e._type>"\}}; separator=", ">] }<else>{ componentType: "<c.Identifier.text>", eventDescriptors: [<c.allNonStaticEvents:{e|{name: "<e.Identifier.text>", _type: "<e._type>"\}}; separator=", ">] }<endif>
 >>
 
-eventRegistration(evt) ::= <<
-	 eventSource.on<evt.Identifier.text; format="cap"> && eventSource.on<evt.Identifier.text; format="cap">.addListener(eventHandler);
->>
 
-eventFactory(allClassesAndInterfacesWithEvents, allClassesInterfacesAndEnumsReferencedByEvents) ::= <<
+queryFunctionAdder(classesAndInterfacesWithQueries) ::= <<
 <typeScriptFilePrelude()>
 
-<! import {UiSubEvent\} from "./UiSubEvent"; !>
-<allClassesAndInterfacesWithEvents:{c|<c.eventDeclaration:{e|import {<e.typeScriptInterfaceName>\} from "./<c.Identifier>Config"}; separator="\n">}; separator="\n">
-<allClassesInterfacesAndEnumsReferencedByEvents:{rc|import {<rc.typeScriptIdentifier>\} from "./<rc.declaringTypeScriptFileBaseName>";}; separator="\n">
-
-export class EventFactory {
-
-	<allClassesAndInterfacesWithEvents:{c|<c.eventDeclaration:eventFactoryMethod()>}; separator="\n">
+import {UiClientObjectConfig} from "./UiClientObjectConfig";
+import {UiQuery} from "./UiQuery";
+<classesAndInterfacesWithQueries:{c|import {<c.Identifier>Config\} from "./<c.Identifier>Config";}; separator="\n">
 
+export class QueryFunctionAdder {
+	public static addQueryFunctionsToConfig(config: UiClientObjectConfig, queryCallback: (componentId: string, queryTypeId: string, queryObject: UiQuery) => Promise\<any>) {
+		switch (config._type) {
+		    <classesAndInterfacesWithQueries:queryConfigAdditions(); separator="\n">
+		}
+	}
 }
 >>
 
-eventFactoryMethod(event) ::= <<
-    public static create<event.typeScriptInterfaceName>(componentId:string<if(event.formalParameterWithDefault)>, <endif><event.formalParameterWithDefault:{p|<p.Identifier>: <p.type.typeScriptType>}; separator=", ">): <event.typeScriptInterfaceName> {
-        return {
-            _type: "<event._type>",
-            componentId: componentId,
-            <event.formalParameterWithDefault:{p|<p.Identifier>: <p.Identifier>}; separator=",\n">
-        };
-    }
+queryConfigAdditions(c) ::= <<
+case "<c.Identifier.text>":
+	<c.allQueries:queryConfigAddition(c); separator="\n">
+	break;
 >>
 
-subEventFactory(allClassesAndInterfacesWithSubEvents, allClassesInterfacesAndEnumsReferencedBySubEvents) ::= <<
-<typeScriptFilePrelude()>
-
-<allClassesAndInterfacesWithSubEvents:{c|<c.subEventDeclaration:{e|import {<e.typeScriptInterfaceName>\} from "./<c.Identifier>Config"}; separator="\n">}; separator="\n">
-<allClassesInterfacesAndEnumsReferencedBySubEvents:{rc|import {<rc.typeScriptIdentifier>\} from "./<rc.declaringTypeScriptFileBaseName>";}; separator="\n">
-
-export class SubEventFactory {
-
-	<allClassesAndInterfacesWithSubEvents:{c|<c.subEventDeclaration:subEventFactoryMethod()>}; separator="\n">
-
-}
->>
-subEventFactoryMethod(subEvent) ::= <<
-    public static create<subEvent.typeScriptInterfaceName>(<subEvent.formalParameterWithDefault:{p|<p.Identifier>: <p.type.typeScriptType>}; separator=", ">): <subEvent.typeScriptInterfaceName> {
-        return {
-            _type: "<subEvent._type>",
-            <subEvent.formalParameterWithDefault:{p|<p.Identifier>: <p.Identifier>}; separator=",\n">
-        };
-    }
+queryConfigAddition(q, c) ::= <<
+    (config as <c.Identifier.text>Config).<q.Identifier> = (queryObject: UiQuery) => queryCallback(config.id, "<q._type>", queryObject);
 >>
 
 uiCommandBaseDefinition() ::= <<
@@ -332,28 +253,20 @@ export interface UiCommand {
 }
 >>
 
-uiEventBaseDefinition(eventDeclarations) ::= <<
+uiEventBaseDefinition() ::= <<
 <typeScriptFilePrelude()>
 export interface UiEvent {
-	_type: <eventDeclarations:{event|"<event._type>"}; separator="\n\t\t\t| ">;
-	componentId: string;
-	[key: string]: any;
+    _type?: string;
+    componentId?: string;
 }
 >>
 
-uiSubCommandBaseDefinition() ::= <<
+uiQueryBaseDefinition() ::= <<
 <typeScriptFilePrelude()>
-export interface UiSubCommand {
-	_type: string;
-	[key: string]: any;
+export interface UiQuery {
+    _type?: string;
+    componentId?: string;
 }
 >>
 
-uiSubEventBaseDefinition(subEventDeclarations) ::= <<
-<typeScriptFilePrelude()>
-export interface UiSubEvent {
-	_type: string;
-	[key: string]: any;
-}
->>
 
diff --git a/teamapps-ui-dsl/src/test/java/org/teamapps/dto/generate/GeneratorTestUtil.java b/teamapps-ui-dsl/src/test/java/org/teamapps/dto/generate/GeneratorTestUtil.java
index a663a8e29..09d06b22b 100644
--- a/teamapps-ui-dsl/src/test/java/org/teamapps/dto/generate/GeneratorTestUtil.java
+++ b/teamapps-ui-dsl/src/test/java/org/teamapps/dto/generate/GeneratorTestUtil.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -25,7 +25,7 @@
 import java.io.File;
 import java.io.IOException;
 import java.net.URL;
-import java.nio.charset.Charset;
+import java.nio.charset.StandardCharsets;
 
 public class GeneratorTestUtil {
 
@@ -33,10 +33,9 @@ public static void compareCodeWithResource(String expectedResultResourceName, St
 		String expected = readResourceToString(expectedResultResourceName);
 
 //		Assert.assertEquals(expected, actual);
-//		Assertions.assertThat(actual).isEqualToNormalizingWhitespace(expected);
 
 		try {
-			Files.write(actual, new File("src/test/resources/" + expectedResultResourceName), Charset.forName("UTF-8"));
+			Files.asCharSink(new File("src/test/resources/" + expectedResultResourceName).getAbsoluteFile(), StandardCharsets.UTF_8).write(actual);
 		} catch (IOException e) {
 			e.printStackTrace();
 		}
@@ -55,7 +54,7 @@ public static String readResourceToString(String resourceName) {
 			return null;
 		}
 		try {
-			return Resources.toString(url, Charset.forName("UTF-8"));
+			return Resources.toString(url, StandardCharsets.UTF_8);
 		} catch (IOException e) {
 			e.printStackTrace();
 			return null; // yes, just because we want to see the actual result ;-)
diff --git a/teamapps-ui-dsl/src/test/java/org/teamapps/dto/generate/TeamAppsDtoModelTest.java b/teamapps-ui-dsl/src/test/java/org/teamapps/dto/generate/TeamAppsDtoModelTest.java
index ca481c35e..bd99d93c4 100644
--- a/teamapps-ui-dsl/src/test/java/org/teamapps/dto/generate/TeamAppsDtoModelTest.java
+++ b/teamapps-ui-dsl/src/test/java/org/teamapps/dto/generate/TeamAppsDtoModelTest.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,16 +19,10 @@
  */
 package org.teamapps.dto.generate;
 
-import org.antlr.v4.runtime.ParserRuleContext;
-import org.assertj.core.api.Assertions;
-import org.junit.Test;
 import org.teamapps.dto.TeamAppsDtoParser;
 
 import java.io.IOException;
 import java.io.StringReader;
-import java.util.List;
-
-import static org.junit.Assert.assertEquals;
 
 public class TeamAppsDtoModelTest {
 
@@ -37,45 +31,4 @@ private static TeamAppsDtoModel createModel(String dslString) throws IOException
 		return new TeamAppsDtoModel(classCollectionContext);
 	}
 
-	@Test
-	public void getClassesAndInterfacesReferencedForSubEvents() throws Exception {
-		TeamAppsDtoModel model = createModel("interface I { subevent i(int i); }"
-				+ "class M { subevent m(int m); }"
-				+ "class N extends M { subevent n(int n); }"
-				+ "class A { event x(String a1, subevent<M> a2); }"
-				+ "class B { event y(String b1, subevent<M> b2); }");
-
-		List<ParserRuleContext> result = model.getClassesAndInterfacesReferencedForSubEvents();
-
-		Assertions.assertThat(result).extracting(parserRuleContext -> {
-			if (parserRuleContext instanceof TeamAppsDtoParser.ClassDeclarationContext) {
-				return ((TeamAppsDtoParser.ClassDeclarationContext) parserRuleContext).Identifier().getText();
-			} else {
-				return ((TeamAppsDtoParser.InterfaceDeclarationContext) parserRuleContext).Identifier().getText();
-			}
-		}).containsExactly("M");
-	}
-
-	@Test
-	public void testFindAllSubEventsInHierarchy() throws Exception {
-		TeamAppsDtoModel model = createModel("interface I { subevent i(int i); }"
-				+ "interface I2 { subevent i2(int i2); }"
-				+ "class M implements I { subevent m(int m); }"
-				+ "class N extends M implements I2 { subevent n(int n); }"
-				+ "class A { event x(String x1, subevent<M> x2); }");
-
-		List<TeamAppsDtoParser.SubEventDeclarationContext> result = model.findAllSubEventsInHierarchy(model.findClassByName("M", false));
-
-		Assertions.assertThat(result).extracting(subEventDeclarationContext -> subEventDeclarationContext.Identifier().getText())
-				.containsExactlyInAnyOrder("i", "i2", "m", "n");
-	}
-
-	@Test
-	public void testFindAncestorOfType() throws Exception {
-		TeamAppsDtoModel model = createModel("interface I { subevent i(int i); }");
-		TeamAppsDtoParser.SubEventDeclarationContext subEvent = model.getSubEventDeclarations().get(0);
-		TeamAppsDtoParser.InterfaceDeclarationContext result = model.findAncestorOfType(subEvent, TeamAppsDtoParser.InterfaceDeclarationContext.class);
-
-		assertEquals("I", result.Identifier().getText());
-	}
 }
diff --git a/teamapps-ui-dsl/src/test/java/org/teamapps/dto/generate/TeamAppsJavaDtoGeneratorTest.java b/teamapps-ui-dsl/src/test/java/org/teamapps/dto/generate/TeamAppsJavaDtoGeneratorTest.java
index 170e6738b..c8acdb34f 100644
--- a/teamapps-ui-dsl/src/test/java/org/teamapps/dto/generate/TeamAppsJavaDtoGeneratorTest.java
+++ b/teamapps-ui-dsl/src/test/java/org/teamapps/dto/generate/TeamAppsJavaDtoGeneratorTest.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -74,6 +74,7 @@ public void interfaces() throws Exception {
 						+ " command x(String x);"
 						+ " command x2(String x2) returns boolean;"
 						+ " event y(String y);"
+						+ " query q(String y) returns int;"
 						+ "}",
 				"A",
 				"org/teamapps/dto/TeamAppsJavaDtoGeneratorTest_interfaces.java"
@@ -104,62 +105,6 @@ public void fromJsonWithEnums() throws Exception {
 		);
 	}
 
-	@Test
-	public void classWithSubEvent() throws Exception {
-		executeClassTest(
-				"class A { subevent x(String b); }",
-				"A",
-				"org/teamapps/dto/TeamAppsJavaDtoGeneratorTest_classWithSubEvent.java"
-		);
-	}
-
-	@Test
-	public void interfaceWithSubEvent() throws Exception {
-		executeInterfaceTest(
-				"interface A { subevent x(String b); }",
-				"A",
-				"org/teamapps/dto/TeamAppsJavaDtoGeneratorTest_interfaceWithSubEvent.java"
-		);
-	}
-
-	@Test
-	public void classHierarchyWithSubEvents() throws Exception {
-		String dslString = "interface X { subevent x(String x); }"
-				+ "class A { subevent a(String a); }"
-				+ "class B extends A implements X { subevent b(String b); }"
-				+ "class C extends B { subevent c(String c); }";
-		executeClassTest(
-				dslString,
-				"B",
-				"org/teamapps/dto/TeamAppsJavaDtoGeneratorTest_classHierarchyWithSubEvents_B.java"
-		);
-		executeClassTest(
-				dslString,
-				"C",
-				"org/teamapps/dto/TeamAppsJavaDtoGeneratorTest_classHierarchyWithSubEvents_C.java"
-		);
-	}
-
-	@Test
-	public void subCommandReference() throws Exception {
-		String dslString = "class A { command a(String a, subcommand<X> sub); }";
-		executeClassTest(
-				dslString,
-				"A",
-				"org/teamapps/dto/TeamAppsJavaDtoGeneratorTest_subCommandReference.java"
-		);
-	}
-
-	@Test
-	public void subEventReference() throws Exception {
-		String dslString = "class A { event a(String a, subevent<X> sub); }";
-		executeClassTest(
-				dslString,
-				"A",
-				"org/teamapps/dto/TeamAppsJavaDtoGeneratorTest_subEventReference.java"
-		);
-	}
-
 	@Test
 	public void staticCommands() throws Exception {
 		String dslString = "abstract class A { static command a(String b); }";
diff --git a/teamapps-ui-dsl/src/test/java/org/teamapps/dto/generate/TeamAppsTypeScriptDtoGeneratorTest.java b/teamapps-ui-dsl/src/test/java/org/teamapps/dto/generate/TeamAppsTypeScriptDtoGeneratorTest.java
index 922ee83aa..c454a7502 100644
--- a/teamapps-ui-dsl/src/test/java/org/teamapps/dto/generate/TeamAppsTypeScriptDtoGeneratorTest.java
+++ b/teamapps-ui-dsl/src/test/java/org/teamapps/dto/generate/TeamAppsTypeScriptDtoGeneratorTest.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,12 +19,14 @@
  */
 package org.teamapps.dto.generate;
 
+import org.antlr.v4.runtime.ParserRuleContext;
 import org.junit.Test;
 import org.teamapps.dto.TeamAppsDtoParser;
 
 import java.io.IOException;
 import java.io.StringReader;
 import java.io.StringWriter;
+import java.util.List;
 
 public class TeamAppsTypeScriptDtoGeneratorTest {
 
@@ -59,8 +61,10 @@ public void interfaces() throws Exception {
 				"interface A { "
 						+ " required String a;"
 						+ " String b;"
-						+ " command x(String x);"
+						+ " command x1(String x);"
+						+ " command x2(String x) returns List<Integer>;"
 						+ " event y(String y);"
+						+ " query z(String s) returns List<String>;"
 						+ "}",
 				"A",
 				"org/teamapps/dto/TeamAppsTypeScriptGeneratorTest_interfaces.tsd"
@@ -148,8 +152,8 @@ public void referenceToEnumListGeneratesCorrespondingImport() throws Exception {
 	@Test
 	public void importStatementsForSuperClassCommandAndEventHandler() throws Exception {
 		executeClassTest(
-				"\tclass A {command a(); event b(); subcommand c(); subevent d();}\n"
-						+ "\tinterface I {command i(); event j(); subcommand k(); subevent l();}\n"
+				"\tclass A {command a(); event b();}\n"
+						+ "\tinterface I {command i(); event j();}\n"
 						+ "\tclass B extends A implements I {}",
 				"B",
 				"org/teamapps/dto/TeamAppsTypeScriptGeneratorTest_importStatementsForSuperClassCommandAndEventHandler.tsd"
@@ -171,7 +175,7 @@ public void plainObjects() throws Exception {
 		executeClassTest(
 				dslString,
 				"A",
-				"org/teamapps/dto/TeamAppsJavaDtoGeneratorTest_plainObjects.tsd"
+				"org/teamapps/dto/TeamAppsTypeScriptDtoGeneratorTest_plainObjects.tsd"
 		);
 	}
 
@@ -188,6 +192,29 @@ public void commandExecutor() throws Exception {
 		GeneratorTestUtil.compareCodeWithResource("org/teamapps/dto/TeamAppsTypeScriptGeneratorTest_commandExecutor.tsd", stringWriter.toString());
 	}
 
+	@Test
+	public void queries() throws Exception {
+		String dslString = "interface X { query queryEntries(int x) returns List<String>; }";
+		executeInterfaceTest(
+				dslString,
+				"X",
+				"org/teamapps/dto/TeamAppsTypeScriptDtoGeneratorTest_interfacesWithQueries.tsd"
+		);
+	}
+
+	@Test
+	public void queryFunctionAdder() throws Exception {
+		String dslString = "interface X { query queryEntries(int x) returns List<String>; }";
+		TeamAppsDtoParser.ClassCollectionContext classCollectionContext = ParserFactory.createParser(new StringReader(dslString)).classCollection();
+		TeamAppsDtoModel model = new TeamAppsDtoModel(classCollectionContext);
+
+		StringWriter stringWriter = new StringWriter();
+		final List<ParserRuleContext> allClassesAndInterfacesWithQueries = model.getAllClassesAndInterfacesWithQueries();
+		new TeamAppsTypeScriptGenerator(model).generateQueryFunctionAdder(allClassesAndInterfacesWithQueries, stringWriter);
+
+		GeneratorTestUtil.compareCodeWithResource("org/teamapps/dto/TeamAppsTypeScriptDtoGeneratorTest_queryFunctionAdder.tsd", stringWriter.toString());
+	}
+
 	private void executeClassTest(String dslString, String className, String expectedResultResourceName) throws IOException {
 		TeamAppsDtoParser.ClassCollectionContext classCollectionContext = ParserFactory.createParser(new StringReader(
 				dslString
diff --git a/teamapps-ui-dsl/src/test/java/org/teamapps/dto/generate/TeamappsDtoLanguageTest.java b/teamapps-ui-dsl/src/test/java/org/teamapps/dto/generate/TeamappsDtoLanguageTest.java
index 9d5b15645..beb41ba1d 100644
--- a/teamapps-ui-dsl/src/test/java/org/teamapps/dto/generate/TeamappsDtoLanguageTest.java
+++ b/teamapps-ui-dsl/src/test/java/org/teamapps/dto/generate/TeamappsDtoLanguageTest.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -52,40 +52,4 @@ public void testListProperty() throws IOException {
 		parser.classDeclaration();
 	}
 
-	@Test
-	public void testSubCommandDeclarations() throws IOException {
-		TeamAppsDtoParser parser = ParserFactory.createParser(new StringReader("class A {\n"
-				+ "  subcommand hallo(String x);"
-				+ "  subcommand blah(String x, int y);"
-				+ "}"));
-		parser.classDeclaration();
-	}
-
-	@Test
-	public void testSubEventDeclarations() throws IOException {
-		TeamAppsDtoParser parser = ParserFactory.createParser(new StringReader("class A {\n"
-				+ "  subevent hallo(String x);"
-				+ "  subevent blah(String x, int y);"
-				+ "}"));
-		parser.classDeclaration();
-	}
-
-	@Test
-	public void testSubCommandReferences() throws IOException {
-		TeamAppsDtoParser parser = ParserFactory.createParser(new StringReader("class A {\n"
-				+ "  subcommand<UiButton> subCommand;"
-				+ "  command blah(String x, subcommand<UiField> subCommand);"
-				+ "}"));
-		parser.classDeclaration();
-	}
-
-	@Test
-	public void testSubEventReferences() throws IOException {
-		TeamAppsDtoParser parser = ParserFactory.createParser(new StringReader("class A {\n"
-				+ "  subevent<UiButton> subEvent;"
-				+ "  event blah(String x, subevent<UiField> subEvent);"
-				+ "}"));
-		parser.classDeclaration();
-	}
-
 }
diff --git a/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsJavaDtoGeneratorTest_classProperties.java b/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsJavaDtoGeneratorTest_classProperties.java
index b2593356c..59a7f5825 100644
--- a/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsJavaDtoGeneratorTest_classProperties.java
+++ b/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsJavaDtoGeneratorTest_classProperties.java
@@ -19,9 +19,7 @@
  * THIS IS GENERATED CODE!
  * PLEASE DO NOT MODIFY - ALL YOUR WORK WOULD BE LOST!
  */
-@JsonTypeInfo(use = JsonTypeInfo.Id.CUSTOM, property = "_type")
-@JsonTypeIdResolver(TeamAppsJacksonTypeIdResolver.class)
-@JsonInclude(JsonInclude.Include.NON_NULL)
+@JsonTypeInfo(use = JsonTypeInfo.Id.CUSTOM, property = "_type", defaultImpl = A.class)
 public class A implements UiObject {
 
 
@@ -85,6 +83,4 @@ public A setC(List<Long> c) {
 
 
 
-
-
 }
\ No newline at end of file
diff --git a/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsJavaDtoGeneratorTest_classesImplementTheirInterfaces.java b/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsJavaDtoGeneratorTest_classesImplementTheirInterfaces.java
index efb75da76..5f66dfbb7 100644
--- a/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsJavaDtoGeneratorTest_classesImplementTheirInterfaces.java
+++ b/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsJavaDtoGeneratorTest_classesImplementTheirInterfaces.java
@@ -19,9 +19,7 @@
  * THIS IS GENERATED CODE!
  * PLEASE DO NOT MODIFY - ALL YOUR WORK WOULD BE LOST!
  */
-@JsonTypeInfo(use = JsonTypeInfo.Id.CUSTOM, property = "_type")
-@JsonTypeIdResolver(TeamAppsJacksonTypeIdResolver.class)
-@JsonInclude(JsonInclude.Include.NON_NULL)
+@JsonTypeInfo(use = JsonTypeInfo.Id.CUSTOM, property = "_type", defaultImpl = D.class)
 public class D extends A implements B, C, UiObject {
 
 
@@ -73,6 +71,4 @@ public D setBProperty(String bProperty) {
 
 
 
-
-
 }
\ No newline at end of file
diff --git a/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsJavaDtoGeneratorTest_dictionaryOfList.java b/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsJavaDtoGeneratorTest_dictionaryOfList.java
index fb9112913..405093400 100644
--- a/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsJavaDtoGeneratorTest_dictionaryOfList.java
+++ b/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsJavaDtoGeneratorTest_dictionaryOfList.java
@@ -19,9 +19,7 @@
  * THIS IS GENERATED CODE!
  * PLEASE DO NOT MODIFY - ALL YOUR WORK WOULD BE LOST!
  */
-@JsonTypeInfo(use = JsonTypeInfo.Id.CUSTOM, property = "_type")
-@JsonTypeIdResolver(TeamAppsJacksonTypeIdResolver.class)
-@JsonInclude(JsonInclude.Include.NON_NULL)
+@JsonTypeInfo(use = JsonTypeInfo.Id.CUSTOM, property = "_type", defaultImpl = A.class)
 public class A implements UiObject {
 
 
@@ -56,6 +54,4 @@ public A setX(Map<String, List<X>> x) {
 
 
 
-
-
 }
\ No newline at end of file
diff --git a/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsJavaDtoGeneratorTest_doubleInheritedInterfaceProperties.java b/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsJavaDtoGeneratorTest_doubleInheritedInterfaceProperties.java
index e149c0308..63be89f19 100644
--- a/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsJavaDtoGeneratorTest_doubleInheritedInterfaceProperties.java
+++ b/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsJavaDtoGeneratorTest_doubleInheritedInterfaceProperties.java
@@ -19,9 +19,7 @@
  * THIS IS GENERATED CODE!
  * PLEASE DO NOT MODIFY - ALL YOUR WORK WOULD BE LOST!
  */
-@JsonTypeInfo(use = JsonTypeInfo.Id.CUSTOM, property = "_type")
-@JsonTypeIdResolver(TeamAppsJacksonTypeIdResolver.class)
-@JsonInclude(JsonInclude.Include.NON_NULL)
+@JsonTypeInfo(use = JsonTypeInfo.Id.CUSTOM, property = "_type", defaultImpl = D.class)
 public class D extends A implements B, C, UiObject {
 
 
@@ -67,6 +65,4 @@ public D setBProperty(String bProperty) {
 
 
 
-
-
 }
\ No newline at end of file
diff --git a/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsJavaDtoGeneratorTest_fromJsonWithEnums.java b/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsJavaDtoGeneratorTest_fromJsonWithEnums.java
index 561d2b984..ba4ea25a3 100644
--- a/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsJavaDtoGeneratorTest_fromJsonWithEnums.java
+++ b/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsJavaDtoGeneratorTest_fromJsonWithEnums.java
@@ -19,9 +19,7 @@
  * THIS IS GENERATED CODE!
  * PLEASE DO NOT MODIFY - ALL YOUR WORK WOULD BE LOST!
  */
-@JsonTypeInfo(use = JsonTypeInfo.Id.CUSTOM, property = "_type")
-@JsonTypeIdResolver(TeamAppsJacksonTypeIdResolver.class)
-@JsonInclude(JsonInclude.Include.NON_NULL)
+@JsonTypeInfo(use = JsonTypeInfo.Id.CUSTOM, property = "_type", defaultImpl = C.class)
 public class C implements UiObject {
 
 
@@ -56,6 +54,4 @@ public C setE(E e) {
 
 
 
-
-
 }
\ No newline at end of file
diff --git a/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsJavaDtoGeneratorTest_interfaceInteritance.java b/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsJavaDtoGeneratorTest_interfaceInteritance.java
index 479986e5b..5f6530905 100644
--- a/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsJavaDtoGeneratorTest_interfaceInteritance.java
+++ b/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsJavaDtoGeneratorTest_interfaceInteritance.java
@@ -31,6 +31,4 @@ public interface B extends A, UiObject {
 
 
 
-
-
 }
\ No newline at end of file
diff --git a/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsJavaDtoGeneratorTest_interfaces.java b/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsJavaDtoGeneratorTest_interfaces.java
index 956c1519d..e5dfc0704 100644
--- a/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsJavaDtoGeneratorTest_interfaces.java
+++ b/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsJavaDtoGeneratorTest_interfaces.java
@@ -71,6 +71,48 @@ public String getY() {
 
 	}
 
+	public static class QQuery implements UiQuery {
+
+		@UiComponentId protected String componentId;
+		protected String y;
+
+		/**
+		 * @deprecated Only for Jackson deserialization. Use the other constructor instead.
+		 */
+		@Deprecated
+		public QQuery() {
+			// default constructor for Jackson
+		}
+
+		public QQuery(String componentId, String y) {
+			this.componentId = componentId;
+			this.y = y;
+		}
+
+		public UiQueryType getUiQueryType() {
+			return UiQueryType.A_Q;
+		}
+
+		@SuppressWarnings("unchecked")
+		public String toString() {
+			return new StringBuilder(getClass().getSimpleName()).append(": ")
+					.append("componentId=" + componentId).append(", ")
+					.append("y=" + y)
+					.toString();
+		}
+
+		@com.fasterxml.jackson.annotation.JsonGetter("componentId")
+		public String getComponentId() {
+			return componentId;
+		}
+
+		@com.fasterxml.jackson.annotation.JsonGetter("y")
+		public String getY() {
+			return y;
+		}
+
+	}
+
 	public static class XCommand implements UiCommand<Void> {
 
 		@UiComponentId protected String componentId;
@@ -147,7 +189,4 @@ public String getX2() {
 
 	}
 
-
-
-
 }
\ No newline at end of file
diff --git a/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsJavaDtoGeneratorTest_plainObjects.java b/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsJavaDtoGeneratorTest_plainObjects.java
index 0d9cff28d..c36e7f3b2 100644
--- a/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsJavaDtoGeneratorTest_plainObjects.java
+++ b/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsJavaDtoGeneratorTest_plainObjects.java
@@ -19,9 +19,7 @@
  * THIS IS GENERATED CODE!
  * PLEASE DO NOT MODIFY - ALL YOUR WORK WOULD BE LOST!
  */
-@JsonTypeInfo(use = JsonTypeInfo.Id.CUSTOM, property = "_type")
-@JsonTypeIdResolver(TeamAppsJacksonTypeIdResolver.class)
-@JsonInclude(JsonInclude.Include.NON_NULL)
+@JsonTypeInfo(use = JsonTypeInfo.Id.CUSTOM, property = "_type", defaultImpl = A.class)
 public class A implements UiObject {
 
 
@@ -90,6 +88,4 @@ public A setZ(Map<String, Object> z) {
 
 
 
-
-
 }
\ No newline at end of file
diff --git a/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsJavaDtoGeneratorTest_staticCommands.java b/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsJavaDtoGeneratorTest_staticCommands.java
index 433df343d..18f71a303 100644
--- a/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsJavaDtoGeneratorTest_staticCommands.java
+++ b/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsJavaDtoGeneratorTest_staticCommands.java
@@ -19,9 +19,7 @@
  * THIS IS GENERATED CODE!
  * PLEASE DO NOT MODIFY - ALL YOUR WORK WOULD BE LOST!
  */
-@JsonTypeInfo(use = JsonTypeInfo.Id.CUSTOM, property = "_type")
-@JsonTypeIdResolver(TeamAppsJacksonTypeIdResolver.class)
-@JsonInclude(JsonInclude.Include.NON_NULL)
+@JsonTypeInfo(use = JsonTypeInfo.Id.CUSTOM, property = "_type", defaultImpl = A.class)
 public abstract class A implements UiObject {
 
 
@@ -39,6 +37,7 @@ public String toString() {
 
 
 
+
 	public static class ACommand implements UiCommand<Void> {
 
 		protected String b;
@@ -73,7 +72,4 @@ public String getComponentId() {
 
 	}
 
-
-
-
 }
\ No newline at end of file
diff --git a/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsTypeScriptDtoGeneratorTest_interfacesWithQueries.tsd b/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsTypeScriptDtoGeneratorTest_interfacesWithQueries.tsd
new file mode 100644
index 000000000..748956677
--- /dev/null
+++ b/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsTypeScriptDtoGeneratorTest_interfacesWithQueries.tsd
@@ -0,0 +1,20 @@
+/**
+ * THIS IS GENERATED CODE!
+ * PLEASE DO NOT MODIFY - ALL YOUR WORK WOULD BE LOST!
+ */
+export const typescriptDeclarationFixConstant = 1;
+
+import {UiEvent} from "./UiEvent";
+import {UiCommand} from "./UiCommand";
+import {TeamAppsEvent} from "../modules/util/TeamAppsEvent";
+
+
+export interface XConfig {
+	_type?: string;
+	queryEntries: (query: X_QueryEntriesQuery) => Promise<string[]>
+}
+
+
+export interface X_QueryEntriesQuery extends UiQuery {
+	x: number
+}
\ No newline at end of file
diff --git a/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsJavaDtoGeneratorTest_plainObjects.tsd b/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsTypeScriptDtoGeneratorTest_plainObjects.tsd
similarity index 91%
rename from teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsJavaDtoGeneratorTest_plainObjects.tsd
rename to teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsTypeScriptDtoGeneratorTest_plainObjects.tsd
index ea769e306..39db44312 100644
--- a/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsJavaDtoGeneratorTest_plainObjects.tsd
+++ b/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsTypeScriptDtoGeneratorTest_plainObjects.tsd
@@ -4,8 +4,9 @@
  */
 export const typescriptDeclarationFixConstant = 1;
 
-import {UiEvent} from "./UiEvent";
 import {UiCommand} from "./UiCommand";
+import {UiEvent} from "./UiEvent";
+import {UiQuery} from "./UiQuery";
 import {TeamAppsEvent} from "../modules/util/TeamAppsEvent";
 
 
@@ -16,3 +17,4 @@ export interface AConfig {
 	z?: {[name: string]: any}
 }
 
+
diff --git a/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsTypeScriptDtoGeneratorTest_queryFunctionAdder.tsd b/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsTypeScriptDtoGeneratorTest_queryFunctionAdder.tsd
new file mode 100644
index 000000000..0d0e84f64
--- /dev/null
+++ b/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsTypeScriptDtoGeneratorTest_queryFunctionAdder.tsd
@@ -0,0 +1,19 @@
+/**
+ * THIS IS GENERATED CODE!
+ * PLEASE DO NOT MODIFY - ALL YOUR WORK WOULD BE LOST!
+ */
+export const typescriptDeclarationFixConstant = 1;
+
+import {UiClientObjectConfig} from "./UiClientObjectConfig";
+import {UiQuery} from "./UiQuery";
+import {XConfig} from "./XConfig";
+
+export class QueryFunctionAdder {
+	public static addQueryFunctionsToConfig(config: UiClientObjectConfig, queryCallback: (componentId: string, queryTypeId: string, queryObject: UiQuery) => Promise<any>) {
+		switch (config._type) {
+		    case "X":
+		    	    (config as XConfig).queryEntries = (queryObject: UiQuery) => queryCallback(config.id, "X.queryEntries", queryObject);
+		    	break;
+		}
+	}
+}
\ No newline at end of file
diff --git a/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsTypeScriptGeneratorTest_classCommandInteritance.tsd b/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsTypeScriptGeneratorTest_classCommandInteritance.tsd
index 62b48b993..4f1d75311 100644
--- a/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsTypeScriptGeneratorTest_classCommandInteritance.tsd
+++ b/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsTypeScriptGeneratorTest_classCommandInteritance.tsd
@@ -4,8 +4,9 @@
  */
 export const typescriptDeclarationFixConstant = 1;
 
-import {UiEvent} from "./UiEvent";
 import {UiCommand} from "./UiCommand";
+import {UiEvent} from "./UiEvent";
+import {UiQuery} from "./UiQuery";
 import {TeamAppsEvent} from "../modules/util/TeamAppsEvent";
 import {BConfig} from "./BConfig";
 import {AConfig} from "./AConfig";
@@ -21,7 +22,7 @@ export interface CConfig extends BConfig, AConfig {
 }
 
 export interface CCommandHandler extends BCommandHandler, ACommandHandler {
-	x3(y3: string): void;
+	x3(y3: string): any;
 }
 
 export interface CEventSource extends BEventSource, AEventSource {
@@ -29,6 +30,5 @@ export interface CEventSource extends BEventSource, AEventSource {
 }
 
 export interface C_Z3Event extends UiEvent {
-	_type: "C.z3";
 }
 
diff --git a/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsTypeScriptGeneratorTest_classProperties.tsd b/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsTypeScriptGeneratorTest_classProperties.tsd
index 1baf87018..8911d9eb2 100644
--- a/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsTypeScriptGeneratorTest_classProperties.tsd
+++ b/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsTypeScriptGeneratorTest_classProperties.tsd
@@ -4,8 +4,9 @@
  */
 export const typescriptDeclarationFixConstant = 1;
 
-import {UiEvent} from "./UiEvent";
 import {UiCommand} from "./UiCommand";
+import {UiEvent} from "./UiEvent";
+import {UiQuery} from "./UiQuery";
 import {TeamAppsEvent} from "../modules/util/TeamAppsEvent";
 
 
@@ -16,3 +17,4 @@ export interface AConfig {
 	c?: number[]
 }
 
+
diff --git a/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsTypeScriptGeneratorTest_classTypeScriptFactoryMethod.tsd b/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsTypeScriptGeneratorTest_classTypeScriptFactoryMethod.tsd
index 052dda21b..2e1036bea 100644
--- a/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsTypeScriptGeneratorTest_classTypeScriptFactoryMethod.tsd
+++ b/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsTypeScriptGeneratorTest_classTypeScriptFactoryMethod.tsd
@@ -4,8 +4,9 @@
  */
 export const typescriptDeclarationFixConstant = 1;
 
-import {UiEvent} from "./UiEvent";
 import {UiCommand} from "./UiCommand";
+import {UiEvent} from "./UiEvent";
+import {UiQuery} from "./UiQuery";
 import {TeamAppsEvent} from "../modules/util/TeamAppsEvent";
 
 
@@ -25,3 +26,4 @@ export function createAConfig(req1: string, req2: number, nonRequiredProperties?
 	};
 }
 
+
diff --git a/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsTypeScriptGeneratorTest_classTypeScriptFactoryMethodWithOnlyNonRequiredParameters.tsd b/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsTypeScriptGeneratorTest_classTypeScriptFactoryMethodWithOnlyNonRequiredParameters.tsd
index 33ec4e457..a0c45e096 100644
--- a/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsTypeScriptGeneratorTest_classTypeScriptFactoryMethodWithOnlyNonRequiredParameters.tsd
+++ b/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsTypeScriptGeneratorTest_classTypeScriptFactoryMethodWithOnlyNonRequiredParameters.tsd
@@ -4,8 +4,9 @@
  */
 export const typescriptDeclarationFixConstant = 1;
 
-import {UiEvent} from "./UiEvent";
 import {UiCommand} from "./UiCommand";
+import {UiEvent} from "./UiEvent";
+import {UiQuery} from "./UiQuery";
 import {TeamAppsEvent} from "../modules/util/TeamAppsEvent";
 
 
@@ -22,3 +23,4 @@ export function createAConfig(nonRequiredProperties?: {nonReq1?: string, nonReq2
 	};
 }
 
+
diff --git a/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsTypeScriptGeneratorTest_classTypeScriptFactoryMethodWithOnlyRequiredParameters.tsd b/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsTypeScriptGeneratorTest_classTypeScriptFactoryMethodWithOnlyRequiredParameters.tsd
index 024163900..7d106eee9 100644
--- a/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsTypeScriptGeneratorTest_classTypeScriptFactoryMethodWithOnlyRequiredParameters.tsd
+++ b/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsTypeScriptGeneratorTest_classTypeScriptFactoryMethodWithOnlyRequiredParameters.tsd
@@ -4,8 +4,9 @@
  */
 export const typescriptDeclarationFixConstant = 1;
 
-import {UiEvent} from "./UiEvent";
 import {UiCommand} from "./UiCommand";
+import {UiEvent} from "./UiEvent";
+import {UiQuery} from "./UiQuery";
 import {TeamAppsEvent} from "../modules/util/TeamAppsEvent";
 
 
@@ -22,3 +23,4 @@ export function createAConfig(req1: string, req2: number): AConfig {
 	};
 }
 
+
diff --git a/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsTypeScriptGeneratorTest_classTypeScriptFactoryMethodWithoutParameters.tsd b/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsTypeScriptGeneratorTest_classTypeScriptFactoryMethodWithoutParameters.tsd
index 8cc59bca5..7fd670961 100644
--- a/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsTypeScriptGeneratorTest_classTypeScriptFactoryMethodWithoutParameters.tsd
+++ b/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsTypeScriptGeneratorTest_classTypeScriptFactoryMethodWithoutParameters.tsd
@@ -4,8 +4,9 @@
  */
 export const typescriptDeclarationFixConstant = 1;
 
-import {UiEvent} from "./UiEvent";
 import {UiCommand} from "./UiCommand";
+import {UiEvent} from "./UiEvent";
+import {UiQuery} from "./UiQuery";
 import {TeamAppsEvent} from "../modules/util/TeamAppsEvent";
 
 
@@ -19,3 +20,4 @@ export function createAConfig(): AConfig {
 	};
 }
 
+
diff --git a/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsTypeScriptGeneratorTest_classesImplementTheirInterfaces.tsd b/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsTypeScriptGeneratorTest_classesImplementTheirInterfaces.tsd
index 386d4b081..666bc579d 100644
--- a/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsTypeScriptGeneratorTest_classesImplementTheirInterfaces.tsd
+++ b/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsTypeScriptGeneratorTest_classesImplementTheirInterfaces.tsd
@@ -4,8 +4,9 @@
  */
 export const typescriptDeclarationFixConstant = 1;
 
-import {UiEvent} from "./UiEvent";
 import {UiCommand} from "./UiCommand";
+import {UiEvent} from "./UiEvent";
+import {UiQuery} from "./UiQuery";
 import {TeamAppsEvent} from "../modules/util/TeamAppsEvent";
 import {AConfig} from "./AConfig";
 import {BConfig} from "./BConfig";
@@ -16,3 +17,4 @@ export interface DConfig extends AConfig, BConfig, CConfig {
 	_type?: string;
 }
 
+
diff --git a/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsTypeScriptGeneratorTest_commandExecutor.tsd b/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsTypeScriptGeneratorTest_commandExecutor.tsd
index 459bb67fd..fc4774e87 100644
--- a/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsTypeScriptGeneratorTest_commandExecutor.tsd
+++ b/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsTypeScriptGeneratorTest_commandExecutor.tsd
@@ -4,36 +4,29 @@
  */
 export const typescriptDeclarationFixConstant = 1;
 
-import {UiComponent} from "../modules/UiComponent";
-import {UiComponentReference} from "./UiComponentConfig";
+import {UiClientObject} from "../modules/UiClientObject";
+import {UiClientObjectReference} from "./UiClientObjectConfig";
 import {TeamAppsUiComponentRegistry} from "../modules/TeamAppsUiComponentRegistry";
 import {TeamAppsUiContext} from "../modules/TeamAppsUiContext";
 
 export class CommandExecutor {
 	private commandExecutorsByCommandName: {[commandName: string]: (targetObject: any, command: any) => void} = {
-		    'A.nonStaticCommand': (targetObject: any, command: any) => {
-				targetObject.nonStaticCommand(command.x);
+		    'A.nonStaticCommand': async (targetObject: any, command: any) => {
+				return await targetObject.nonStaticCommand(command.x);
 			}
 	};
 
 	private staticCommandExecutorsByCommandName: {[commandName: string]: (command: any, context: TeamAppsUiContext) => void} = {
-		    'A.staticCommand': (command: any, context: TeamAppsUiContext) => {
-				(TeamAppsUiComponentRegistry.getComponentClassForName("A") as any).staticCommand(command.x, context);
+		    'A.staticCommand': async (command: any, context: TeamAppsUiContext) => {
+				return await (TeamAppsUiComponentRegistry.getComponentClassForName("A") as any).staticCommand(command.x, context);
 			}
 	};
 
-	constructor(private componentRegistry: (reference: UiComponentReference) => UiComponent) {
+	public async executeCommand(targetObject: any, command: any) {
+		return await this.commandExecutorsByCommandName[command._type](targetObject, command);
 	}
 
-	private getComponentForReference(reference: UiComponentReference) {
-		this.componentRegistry(reference);
-	}
-
-	public executeCommand(targetObject: any, command: any) {
-		return this.commandExecutorsByCommandName[command._type](targetObject, command);
-	}
-
-	public executeStaticCommand(command: any, context: TeamAppsUiContext) {
-		return this.staticCommandExecutorsByCommandName[command._type](command, context);
+	public async executeStaticCommand(command: any, context: TeamAppsUiContext) {
+		return await this.staticCommandExecutorsByCommandName[command._type](command, context);
 	}
 }
\ No newline at end of file
diff --git a/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsTypeScriptGeneratorTest_importStatementsForSuperClassCommandAndEventHandler.tsd b/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsTypeScriptGeneratorTest_importStatementsForSuperClassCommandAndEventHandler.tsd
index d7092549e..7512f5abf 100644
--- a/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsTypeScriptGeneratorTest_importStatementsForSuperClassCommandAndEventHandler.tsd
+++ b/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsTypeScriptGeneratorTest_importStatementsForSuperClassCommandAndEventHandler.tsd
@@ -4,8 +4,9 @@
  */
 export const typescriptDeclarationFixConstant = 1;
 
-import {UiEvent} from "./UiEvent";
 import {UiCommand} from "./UiCommand";
+import {UiEvent} from "./UiEvent";
+import {UiQuery} from "./UiQuery";
 import {TeamAppsEvent} from "../modules/util/TeamAppsEvent";
 import {AConfig} from "./AConfig";
 import {IConfig} from "./IConfig";
@@ -13,10 +14,6 @@ import {ACommandHandler} from "./AConfig";
 import {ICommandHandler} from "./IConfig";
 import {AEventSource} from "./AConfig";
 import {IEventSource} from "./IConfig";
-import {ASubCommandHandler} from "./AConfig";
-import {ISubCommandHandler} from "./IConfig";
-import {ASubEventSource} from "./AConfig";
-import {ISubEventSource} from "./IConfig";
 
 
 export interface BConfig extends AConfig, IConfig {
@@ -29,9 +26,4 @@ export interface BCommandHandler extends ACommandHandler, ICommandHandler {
 export interface BEventSource extends AEventSource, IEventSource {
 }
 
-export interface BSubCommandHandler extends ASubCommandHandler, ISubCommandHandler {
-}
-
-export interface BSubEventSource extends ASubEventSource, ISubEventSource {
-}
 
diff --git a/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsTypeScriptGeneratorTest_interfaceInteritance.tsd b/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsTypeScriptGeneratorTest_interfaceInteritance.tsd
index 0c3d73628..1533efe9b 100644
--- a/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsTypeScriptGeneratorTest_interfaceInteritance.tsd
+++ b/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsTypeScriptGeneratorTest_interfaceInteritance.tsd
@@ -15,3 +15,4 @@ export interface BConfig extends AConfig {
 	b?: string
 }
 
+
diff --git a/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsTypeScriptGeneratorTest_interfaces.tsd b/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsTypeScriptGeneratorTest_interfaces.tsd
index 70dfcebab..a84a693a2 100644
--- a/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsTypeScriptGeneratorTest_interfaces.tsd
+++ b/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsTypeScriptGeneratorTest_interfaces.tsd
@@ -13,10 +13,12 @@ export interface AConfig {
 	_type?: string;
 	a: string;
 	b?: string
+	z: (query: A_ZQuery) => Promise<string[]>
 }
 
 export interface ACommandHandler {
-	x(x: string): void;
+	x1(x: string): any;
+	x2(x: string): Promise<number[]>|number[];
 }
 
 export interface AEventSource {
@@ -24,7 +26,9 @@ export interface AEventSource {
 }
 
 export interface A_YEvent extends UiEvent {
-	_type: "A.y";
 	y: string
 }
 
+export interface A_ZQuery extends UiQuery {
+	s: string
+}
\ No newline at end of file
diff --git a/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsTypeScriptGeneratorTest_referenceToClassListGeneratesCorrespondingImport.tsd b/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsTypeScriptGeneratorTest_referenceToClassListGeneratesCorrespondingImport.tsd
index 8862627e4..42bdfbff0 100644
--- a/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsTypeScriptGeneratorTest_referenceToClassListGeneratesCorrespondingImport.tsd
+++ b/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsTypeScriptGeneratorTest_referenceToClassListGeneratesCorrespondingImport.tsd
@@ -4,8 +4,9 @@
  */
 export const typescriptDeclarationFixConstant = 1;
 
-import {UiEvent} from "./UiEvent";
 import {UiCommand} from "./UiCommand";
+import {UiEvent} from "./UiEvent";
+import {UiQuery} from "./UiQuery";
 import {TeamAppsEvent} from "../modules/util/TeamAppsEvent";
 import {AConfig} from "./AConfig";
 
@@ -15,3 +16,4 @@ export interface BConfig {
 	aObjects?: AConfig[]
 }
 
+
diff --git a/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsTypeScriptGeneratorTest_referenceToEnumListGeneratesCorrespondingImport.tsd b/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsTypeScriptGeneratorTest_referenceToEnumListGeneratesCorrespondingImport.tsd
index a21b0f176..6c0961c08 100644
--- a/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsTypeScriptGeneratorTest_referenceToEnumListGeneratesCorrespondingImport.tsd
+++ b/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsTypeScriptGeneratorTest_referenceToEnumListGeneratesCorrespondingImport.tsd
@@ -4,8 +4,9 @@
  */
 export const typescriptDeclarationFixConstant = 1;
 
-import {UiEvent} from "./UiEvent";
 import {UiCommand} from "./UiCommand";
+import {UiEvent} from "./UiEvent";
+import {UiQuery} from "./UiQuery";
 import {TeamAppsEvent} from "../modules/util/TeamAppsEvent";
 import {UiWeekDay} from "./UiWeekDay";
 
@@ -15,3 +16,4 @@ export interface UiCalendarConfig {
 	workingDays?: UiWeekDay[]
 }
 
+
diff --git a/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsTypeScriptGeneratorTest_staticCommands.tsd b/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsTypeScriptGeneratorTest_staticCommands.tsd
index 083533aa1..88b12e85c 100644
--- a/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsTypeScriptGeneratorTest_staticCommands.tsd
+++ b/teamapps-ui-dsl/src/test/resources/org/teamapps/dto/TeamAppsTypeScriptGeneratorTest_staticCommands.tsd
@@ -4,8 +4,9 @@
  */
 export const typescriptDeclarationFixConstant = 1;
 
-import {UiEvent} from "./UiEvent";
 import {UiCommand} from "./UiCommand";
+import {UiEvent} from "./UiEvent";
+import {UiQuery} from "./UiQuery";
 import {TeamAppsEvent} from "../modules/util/TeamAppsEvent";
 
 
@@ -16,3 +17,4 @@ export interface AConfig {
 export interface ACommandHandler {
 }
 
+
diff --git a/teamapps-ux-servlet/pom.xml b/teamapps-ux-servlet/pom.xml
deleted file mode 100644
index b1abf8b32..000000000
--- a/teamapps-ux-servlet/pom.xml
+++ /dev/null
@@ -1,56 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
-    <parent>
-        <artifactId>teamapps</artifactId>
-        <groupId>org.teamapps</groupId>
-        <version>0.9.8-SNAPSHOT</version>
-    </parent>
-    <modelVersion>4.0.0</modelVersion>
-
-    <artifactId>teamapps-ux-servlet</artifactId>
-
-    <name>TeamApps UX Servlet</name>
-    <description>TeamApps UX Servlet</description>
-    <url>https://github.com/teamapps-org/teamapps</url>
-    <licenses>
-        <license>
-            <name>Apache License, Version 2.0</name>
-            <url>https://www.apache.org/licenses/LICENSE-2.0.txt</url>
-            <distribution>repo</distribution>
-            <comments>A business-friendly OSS license</comments>
-        </license>
-    </licenses>
-    <developers>
-        <developer>
-            <name>Matthias Bernstein</name>
-            <email>matthias.bernstein@teamapps.org</email>
-            <id>matthias-bernstein</id>
-        </developer>
-        <developer>
-            <name>Yann Massard</name>
-            <email>yann.massard@teamapps.org</email>
-            <id>yamass</id>
-        </developer>
-    </developers>
-
-    <dependencies>
-        <dependency>
-            <groupId>org.teamapps</groupId>
-            <artifactId>teamapps-ux</artifactId>
-        </dependency>
-        <dependency>
-            <groupId>javax</groupId>
-            <artifactId>javaee-web-api</artifactId>
-            <scope>provided</scope>
-        </dependency>
-
-        <dependency>
-            <groupId>org.assertj</groupId>
-            <artifactId>assertj-core</artifactId>
-            <scope>test</scope>
-        </dependency>
-
-    </dependencies>
-
-
-</project>
\ No newline at end of file
diff --git a/teamapps-ux-servlet/src/main/java/org/teamapps/ux/servlet/TeamAppsCommunicationEndpoint.java b/teamapps-ux-servlet/src/main/java/org/teamapps/ux/servlet/TeamAppsCommunicationEndpoint.java
deleted file mode 100644
index 9109f52dd..000000000
--- a/teamapps-ux-servlet/src/main/java/org/teamapps/ux/servlet/TeamAppsCommunicationEndpoint.java
+++ /dev/null
@@ -1,243 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.ux.servlet;
-
-import com.fasterxml.jackson.core.JsonProcessingException;
-import com.fasterxml.jackson.databind.ObjectMapper;
-import org.slf4j.Logger;
-import org.slf4j.LoggerFactory;
-import org.teamapps.dto.AbstractClientMessage;
-import org.teamapps.dto.AbstractServerMessage;
-import org.teamapps.dto.CMD_REQUEST;
-import org.teamapps.dto.CMD_RESULT;
-import org.teamapps.dto.EVENT;
-import org.teamapps.dto.INIT;
-import org.teamapps.dto.KEEPALIVE;
-import org.teamapps.dto.REINIT;
-import org.teamapps.dto.SERVER_ERROR;
-import org.teamapps.dto.TERMINATE;
-import org.teamapps.ux.servlet.util.ZipRatioAnalyzer;
-import org.teamapps.ux.servlet.util.ZlibStatefulDeflater;
-import org.teamapps.ux.servlet.util.ZlibStatefulInflater;
-import org.teamapps.json.TeamAppsObjectMapperFactory;
-import org.teamapps.uisession.QualifiedUiSessionId;
-import org.teamapps.uisession.SendingErrorHandler;
-import org.teamapps.uisession.SessionClosingReason;
-import org.teamapps.uisession.TeamAppsSessionNotFoundException;
-import org.teamapps.uisession.TeamAppsUiSessionManager;
-
-import javax.servlet.http.HttpSession;
-import javax.websocket.CloseReason;
-import javax.websocket.Endpoint;
-import javax.websocket.EndpointConfig;
-import javax.websocket.MessageHandler;
-import javax.websocket.SendHandler;
-import javax.websocket.SendResult;
-import javax.websocket.Session;
-import java.io.IOException;
-import java.nio.ByteBuffer;
-import java.nio.charset.StandardCharsets;
-import java.util.Map;
-
-public class TeamAppsCommunicationEndpoint extends Endpoint {
-
-	/**
-	 * If the client wants to send a frame larger than this, an MESSAGE_TOO_LARGE exception will be thrown and the connection closes.
-	 */
-	private static final int MAX_BINARY_CLIENT_MESSAGE_SIZE = 1024 * 1024; // 1 MiB
-
-	private static final Logger LOGGER = LoggerFactory.getLogger(TeamAppsCommunicationEndpoint.class);
-
-	private ObjectMapper mapper = TeamAppsObjectMapperFactory.create();
-
-	private TeamAppsUiSessionManager sessionManager;
-
-	public TeamAppsCommunicationEndpoint(TeamAppsUiSessionManager sessionManager) {
-		this.sessionManager = sessionManager;
-	}
-
-	@Override
-	public void onOpen(Session session, EndpointConfig config) {
-		session.setMaxIdleTimeout(MAX_BINARY_CLIENT_MESSAGE_SIZE);
-		session.setMaxBinaryMessageBufferSize(MAX_BINARY_CLIENT_MESSAGE_SIZE);
-		session.addMessageHandler(new WebSocketHandler(session));
-	}
-
-	@Override
-	public void onError(Session session, Throwable thr) {
-		closeWebSocketSession(session);
-	}
-
-	@Override
-	public void onClose(Session session, CloseReason closeReason) {
-		// nothing to do...
-	}
-
-	private void closeWebSocketSession(Session wsSession) {
-		try {
-			wsSession.close();
-		} catch (IOException e) {
-			// ignore
-		}
-	}
-
-	private class WebSocketHandler implements MessageHandler.Whole<ByteBuffer> {
-		private final Session wsSession;
-		private final ZlibStatefulDeflater deflater = new ZlibStatefulDeflater();
-		private final ZlibStatefulInflater inflater = new ZlibStatefulInflater();
-
-		private ZipRatioAnalyzer sendingZipRatioAnalyzer = new ZipRatioAnalyzer("-> SEND");
-		private ZipRatioAnalyzer receivingZipRatioAnalyzer = new ZipRatioAnalyzer("<- RECEIVE");
-
-		public WebSocketHandler(Session session) {
-			this.wsSession = session;
-		}
-
-		@Override
-		public void onMessage(ByteBuffer payload) {
-			try {
-				HttpSession httpSession = (HttpSession) wsSession.getUserProperties().get(WebSocketServerEndpointConfigurator.HTTP_SESSION_PROPERTY_NAME);
-
-				// TODO #no-spring implement heartbeat http requests (shame...)
-//				((AbstractSession) httpSession).setLastAccessedTime(System.currentTimeMillis()); // this is jetty-specific code. Change if we want to support another server.
-				// tomcat: http://tomcat.apache.org/tomcat-5.5-doc/catalina/docs/api/org/apache/catalina/session/StandardSession.html#access()
-
-				byte[] compressed = new byte[payload.remaining()];
-				payload.get(compressed);
-				byte[] uncompressed = inflater.inflate(compressed);
-				String messageString = new String(uncompressed, StandardCharsets.UTF_8);
-				receivingZipRatioAnalyzer.addData(uncompressed, compressed.length);
-				AbstractClientMessage clientMessage = mapper.readValue(messageString, AbstractClientMessage.class);
-
-				QualifiedUiSessionId qualifiedUiSessionId = new QualifiedUiSessionId(httpSession.getId(), clientMessage.getSessionId());
-				ServerSideClientInfo serverSideClientInfo = createServerSideClientInfo(wsSession);
-				if (clientMessage instanceof INIT) {
-					INIT init = (INIT) clientMessage;
-					init.getClientInfo().setIp(serverSideClientInfo.getIp());
-					init.getClientInfo().setUserAgentString(serverSideClientInfo.getUserAgentString());
-					init.getClientInfo().setPreferredLanguageIso(serverSideClientInfo.getPreferredLanguageIso());
-					sessionManager.initSession(
-							qualifiedUiSessionId,
-							init.getClientInfo(),
-							init.getMaxRequestedCommandId(),
-							(msg, sendingErrorHandler) -> send(wsSession, msg, null, sendingErrorHandler)
-					);
-				} else if (clientMessage instanceof REINIT) {
-					REINIT reinit = (REINIT) clientMessage;
-					sessionManager.reinitSession(
-							qualifiedUiSessionId,
-							reinit.getLastReceivedCommandId(),
-							reinit.getMaxRequestedCommandId(),
-							(msg, sendingErrorHandler) -> send(wsSession, msg, null, sendingErrorHandler)
-					);
-				} else if (clientMessage instanceof TERMINATE) {
-					sessionManager.closeSession(qualifiedUiSessionId, SessionClosingReason.TERMINATED_BY_CLIENT);
-				} else if (clientMessage instanceof EVENT) {
-					EVENT eventMessage = (EVENT) clientMessage;
-					sessionManager.handleEvent(qualifiedUiSessionId, eventMessage.getId(), eventMessage.getUiEvent());
-				} else if (clientMessage instanceof CMD_RESULT) {
-					CMD_RESULT cmdResult = (CMD_RESULT) clientMessage;
-					sessionManager.handleCommandResult(qualifiedUiSessionId, cmdResult.getId(), cmdResult.getCmdId(), cmdResult.getResult());
-				} else if (clientMessage instanceof CMD_REQUEST) {
-					CMD_REQUEST cmdRequest = (CMD_REQUEST) clientMessage;
-					sessionManager.handleCommandRequest(qualifiedUiSessionId, cmdRequest.getLastReceivedCommandId(), cmdRequest.getMaxRequestedCommandId());
-				} else if (clientMessage instanceof KEEPALIVE) {
-					sessionManager.handleKeepAlive(qualifiedUiSessionId);
-				} else {
-					throw new TeamAppsCommunicationException("Unknown message type: " + clientMessage.getClass().getCanonicalName());
-				}
-			} catch (TeamAppsSessionNotFoundException e) {
-				LOGGER.warn("TeamApps session not found: " + e.getSessionId());
-				send(wsSession, new SERVER_ERROR(SERVER_ERROR.Reason.SESSION_NOT_FOUND).setMessage(e.getMessage()), () -> closeWebSocketSession(wsSession), null);
-			} catch (Exception e) {
-				LOGGER.error("Exception while processing client message!", e);
-				send(wsSession, new SERVER_ERROR(SERVER_ERROR.Reason.EXCEPTION).setMessage(e.getMessage()), null, null);
-			}
-		}
-
-		private void send(Session session, AbstractServerMessage message, Runnable sendingSuccessHandler, SendingErrorHandler sendingErrorHandler) {
-			try {
-				String messageAsString;
-				try {
-					messageAsString = mapper.writeValueAsString(message);
-				} catch (JsonProcessingException e) {
-					throw new TeamAppsCommunicationException(e);
-				}
-				byte[] uncompressed = messageAsString.getBytes(StandardCharsets.UTF_8);
-				if (deflater != null) {
-					byte[] compressed = deflater.deflate(uncompressed);
-					sendingZipRatioAnalyzer.addData(uncompressed, compressed.length);
-					sendBinaryFrame(session, compressed, sendingSuccessHandler, sendingErrorHandler);
-				} else {
-					LOGGER.warn("Trying to send data to already closed session!");
-				}
-			} catch (RuntimeException e) {
-				if (sendingErrorHandler != null) {
-					sendingErrorHandler.onErrorWhileSending(e);
-				}
-			}
-		}
-
-		private ServerSideClientInfo createServerSideClientInfo(Session session) {
-			Map<String, Object> attributes = session.getUserProperties();
-			return new ServerSideClientInfo(
-					(String) attributes.get(WebSocketServerEndpointConfigurator.CLIENT_IP_PROPERTY_NAME),
-					(String) attributes.get(WebSocketServerEndpointConfigurator.USER_AGENT_PROPERTY_NAME),
-					(String) attributes.get(WebSocketServerEndpointConfigurator.LANGUAGE_PROPERTY_NAME)
-			);
-		}
-
-		/*
-		 * It might make sense in the future to split up large messages into multiple frames.
-		 * However, it seems that browsers don't have any problems with receiving (very) large frames, neither do Servlet containers have sending them.
-		 * Servlet containers only has a limitation receiving frames (see MAX_BINARY_CLIENT_MESSAGE_SIZE).
-		 */
-		private void splitAndSend(Session session, byte[] bytesToSend, Runnable sendingSuccessHandler, SendingErrorHandler sendingErrorHandler) {
-			int MAX_FRAME_SIZE = 64 * 1024;
-			int usableFrameSize = MAX_FRAME_SIZE - 1;
-			double numberOfFrames = Math.ceil(((float) bytesToSend.length / usableFrameSize));
-			for (int i = 0; i < numberOfFrames; i++) {
-				int frameSizeIncludingLastFrameOfMessageFlag = Math.min(bytesToSend.length - (i * usableFrameSize) + 1, MAX_FRAME_SIZE);
-				byte[] frame = new byte[frameSizeIncludingLastFrameOfMessageFlag]; // cannot reuse byte arrays here!
-				byte lastFrameOfMessageFlag = (i == numberOfFrames - 1) ? (byte) 1 : 0;
-				frame[0] = lastFrameOfMessageFlag;
-				System.arraycopy(bytesToSend, i * usableFrameSize, frame, 1, frame.length - 1);
-				sendBinaryFrame(session, frame, sendingSuccessHandler, sendingErrorHandler);
-			}
-		}
-
-		private void sendBinaryFrame(Session session, byte[] bytesToSend, Runnable sendingSuccessHandler, SendingErrorHandler sendingErrorHandler) {
-			//noinspection Convert2Lambda
-			session.getAsyncRemote().sendBinary(ByteBuffer.wrap(bytesToSend), new SendHandler() {
-				@Override
-				public void onResult(SendResult result) {
-					if (result.isOK() && sendingSuccessHandler != null) {
-						sendingSuccessHandler.run();
-					}
-					if (!result.isOK() && sendingErrorHandler != null) {
-						sendingErrorHandler.onErrorWhileSending(result.getException());
-					}
-				}
-			});
-		}
-
-	}
-
-}
diff --git a/teamapps-ux-servlet/src/main/java/org/teamapps/ux/servlet/TeamAppsServletContextListener.java b/teamapps-ux-servlet/src/main/java/org/teamapps/ux/servlet/TeamAppsServletContextListener.java
deleted file mode 100644
index a577a3f55..000000000
--- a/teamapps-ux-servlet/src/main/java/org/teamapps/ux/servlet/TeamAppsServletContextListener.java
+++ /dev/null
@@ -1,126 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.ux.servlet;
-
-import com.fasterxml.jackson.databind.ObjectMapper;
-import org.slf4j.Logger;
-import org.slf4j.LoggerFactory;
-import org.teamapps.json.TeamAppsObjectMapperFactory;
-import org.teamapps.server.ServletRegistration;
-import org.teamapps.webcontroller.WebController;
-import org.teamapps.uisession.TeamAppsUiSessionManager;
-
-import javax.servlet.DispatcherType;
-import javax.servlet.MultipartConfigElement;
-import javax.servlet.ServletContext;
-import javax.servlet.ServletContextEvent;
-import javax.servlet.ServletContextListener;
-import javax.servlet.ServletRegistration.Dynamic;
-import javax.websocket.server.ServerContainer;
-import javax.websocket.server.ServerEndpointConfig;
-import java.util.Collection;
-import java.util.EnumSet;
-import java.util.UUID;
-
-public class TeamAppsServletContextListener implements ServletContextListener {
-
-	private static final Logger LOGGER = LoggerFactory.getLogger(TeamAppsServletContextListener.class);
-
-	private WebController webController;
-	private TeamAppsUiSessionManager uiSessionManager;
-
-	public TeamAppsServletContextListener() {
-		this(null);
-	}
-
-	public TeamAppsServletContextListener(WebController webController) {
-		this.webController = webController;
-	}
-
-	@Override
-	public void contextInitialized(ServletContextEvent servletContextEvent) {
-		ServletContext context = servletContextEvent.getServletContext();
-
-		WebController webController = this.webController != null ? this.webController : getWebController(context);
-		if (webController == null) {
-			throw new IllegalArgumentException("No WebController specified!");
-		}
-
-		ObjectMapper objectMapper = TeamAppsObjectMapperFactory.create();
-		uiSessionManager = new TeamAppsUiSessionManager(objectMapper);
-		TeamAppsUxClientGate teamAppsUxClientGate = new TeamAppsUxClientGate(webController, uiSessionManager, objectMapper);
-		uiSessionManager.setUiSessionListener(teamAppsUxClientGate);
-
-		context.addFilter("teamapps-download-header-filter", new DownloadHttpHeaderFilter()).addMappingForUrlPatterns(EnumSet.of(DispatcherType.REQUEST), true, "*");
-
-		Dynamic reg = context.addServlet("teamapps-upload-servlet", new UploadServlet((file, uuid) -> teamAppsUxClientGate.handleFileUpload(file, uuid)));
-		reg.addMapping("/upload/*");
-		reg.setMultipartConfig(new MultipartConfigElement(null, -1L, -1L, 1000_000));
-
-		context.addListener(new ServletRequestListener());
-		context.addListener(uiSessionManager);
-
-		try {
-			// WebSocket
-			ServerContainer serverContainer = (ServerContainer) servletContextEvent.getServletContext().getAttribute("javax.websocket.server.ServerContainer");
-			ServerEndpointConfig communicationEndpointConfig = ServerEndpointConfig.Builder.create(TeamAppsCommunicationEndpoint.class, "/communication")
-					.configurator(new WebSocketServerEndpointConfigurator(uiSessionManager)).build();
-			serverContainer.addEndpoint(communicationEndpointConfig);
-		} catch (Exception e) {
-			String msg = "Could not register TeamApps communication endpoint";
-			LOGGER.error(msg, e);
-			throw new RuntimeException(msg, e);
-		}
-
-		Collection<ServletRegistration> servletRegistrations = teamAppsUxClientGate.getServletRegistrations();
-		for (ServletRegistration servletRegistration : servletRegistrations) {
-			for (String mapping : servletRegistration.getMappings()) {
-				LOGGER.info("Registering servlet on url path: " + mapping);
-				context.addServlet("teamapps-registered-" + servletRegistration.getServlet().getClass().getSimpleName() + UUID.randomUUID().toString(), servletRegistration.getServlet()).addMapping(mapping);
-			}
-		}
-	}
-
-	private WebController getWebController(ServletContext context) {
-		if (this.webController != null) {
-			return webController;
-		} else {
-			String classNameInitParameter = context.getInitParameter("teamapps.webController.className");
-			if (classNameInitParameter != null) {
-				try {
-					return ((WebController) Class.forName(classNameInitParameter).getDeclaredConstructor().newInstance());
-				} catch (Exception e) {
-					String msg = "Could instantiate WebController";
-					LOGGER.error(msg, e);
-					throw new IllegalArgumentException(msg, e);
-				}
-			} else {
-				throw new IllegalArgumentException("No WebController specified!");
-			}
-		}
-	}
-
-	@Override
-	public void contextDestroyed(ServletContextEvent sce) {
-		uiSessionManager.destroy();
-		webController.destroy();
-	}
-
-}
diff --git a/teamapps-ux-servlet/src/main/java/org/teamapps/ux/servlet/TeamAppsUxClientGate.java b/teamapps-ux-servlet/src/main/java/org/teamapps/ux/servlet/TeamAppsUxClientGate.java
deleted file mode 100644
index c99986ca9..000000000
--- a/teamapps-ux-servlet/src/main/java/org/teamapps/ux/servlet/TeamAppsUxClientGate.java
+++ /dev/null
@@ -1,193 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.ux.servlet;
-
-import com.fasterxml.jackson.databind.ObjectMapper;
-import org.jetbrains.annotations.NotNull;
-import org.teamapps.dto.UiClientInfo;
-import org.teamapps.dto.UiEvent;
-import org.teamapps.icons.provider.IconProvider;
-import org.teamapps.server.CommandDispatcherImpl;
-import org.teamapps.server.ServletRegistration;
-import org.teamapps.server.SessionRecorder;
-import org.teamapps.server.SessionResourceProvider;
-import org.teamapps.server.UxServerContext;
-import org.teamapps.webcontroller.WebController;
-import org.teamapps.ux.resource.ResourceProviderServlet;
-import org.teamapps.ux.resource.SystemIconResourceProvider;
-import org.teamapps.ux.component.Component;
-import org.teamapps.ux.component.template.BaseTemplate;
-import org.teamapps.ux.session.ClientInfo;
-import org.teamapps.ux.session.ClientSessionResourceProvider;
-import org.teamapps.ux.session.CommandDispatcher;
-import org.teamapps.ux.session.SessionContext;
-import org.teamapps.ux.session.SimpleSessionContext;
-import org.teamapps.uisession.QualifiedUiSessionId;
-import org.teamapps.uisession.SessionClosingReason;
-import org.teamapps.uisession.UiCommandExecutor;
-import org.teamapps.uisession.UiSessionListener;
-
-import java.io.BufferedOutputStream;
-import java.io.File;
-import java.io.FileNotFoundException;
-import java.io.FileOutputStream;
-import java.io.IOException;
-import java.text.SimpleDateFormat;
-import java.util.*;
-import java.util.concurrent.ConcurrentHashMap;
-import java.util.stream.Collectors;
-
-public class TeamAppsUxClientGate implements UiSessionListener {
-
-	private final WebController webController;
-	private final UiCommandExecutor commandExecutor;
-
-	private final ObjectMapper objectMapper;
-	private Map<QualifiedUiSessionId, SessionContext> sessionContextById = new ConcurrentHashMap<>();
-	private Map<String, File> uploadedFilesByUuid = new ConcurrentHashMap<>();
-
-	private final UxServerContext uxServerContext = new UxServerContext() {
-		@Override
-		public SessionContext getSessionContextById(QualifiedUiSessionId sessionId) {
-			return sessionContextById.get(sessionId);
-		}
-
-		@Override
-		public File getUploadedFileByUuid(String uuid) {
-			return uploadedFilesByUuid.get(uuid);
-		}
-	};
-
-	private String userSessionCommandsRecordingPath;
-
-	public TeamAppsUxClientGate(WebController webController, UiCommandExecutor commandExecutor, ObjectMapper objectMapper) {
-		this.webController = webController;
-		this.commandExecutor = commandExecutor;
-		this.objectMapper = objectMapper;
-
-
-	}
-
-	public void onUiSessionStarted(QualifiedUiSessionId sessionId, UiClientInfo uiClientInfo) {
-		SessionRecorder sessionRecorder = null;
-		if (userSessionCommandsRecordingPath != null) {
-			try {
-				String timeStamp = new SimpleDateFormat("yyyy.MM.dd-HH.mm.ss").format(new Date());
-				File outputFile = new File(userSessionCommandsRecordingPath, "Session-" + timeStamp + ".log");
-				sessionRecorder = new SessionRecorder(objectMapper, new BufferedOutputStream(new FileOutputStream(outputFile)));
-			} catch (FileNotFoundException e) {
-				e.printStackTrace();
-			}
-		}
-		CommandDispatcher commandDispatcher = new CommandDispatcherImpl(commandExecutor, sessionId, sessionRecorder);
-
-		ClientInfo clientInfo = new ClientInfo(
-				uiClientInfo.getIp(),
-				null /*clientGeoIpInfo*/,
-				uiClientInfo.getScreenWidth(),
-				uiClientInfo.getScreenHeight(),
-				uiClientInfo.getViewPortWidth(),
-				uiClientInfo.getViewPortHeight(),
-				uiClientInfo.getPreferredLanguageIso(),
-				uiClientInfo.getHighDensityScreen(),
-				uiClientInfo.getTimezoneIana(),
-				uiClientInfo.getTimezoneOffsetMinutes(),
-				uiClientInfo.getClientTokens(),
-				uiClientInfo.getUserAgentString(),
-				uiClientInfo.getClientUrl(),
-				uiClientInfo.getClientParameters());
-//		clientInfo.setClientSystemInfo(parseUserAgent(clientInfo.getUserAgent()));
-
-		SessionContext context = new SimpleSessionContext(sessionId, clientInfo, commandDispatcher, uxServerContext,
-				webController.getDefaultIconTheme(clientInfo.isMobileDevice()), objectMapper);
-		sessionContextById.put(sessionId, context);
-
-		context.runWithContext(() -> {
-			context.setConfiguration(webController.createSessionConfiguration(context));
-			context.registerTemplates(Arrays.stream(BaseTemplate.values())
-					.collect(Collectors.toMap(Enum::name, BaseTemplate::getTemplate)));
-			webController.onSessionStart(context);
-		});
-	}
-
-
-	public Collection<ServletRegistration> getServletRegistrations() {
-		ArrayList<ServletRegistration> registrations = new ArrayList<>();
-		registrations.add(new ServletRegistration(new ResourceProviderServlet(createSystemIconResourceProvider(webController.getIconProvider(), webController.getAdditionalIconProvider())), "/icons/*"));
-		registrations.add(new ServletRegistration(new ResourceProviderServlet(new SessionResourceProvider(sessionContextById::get)), ClientSessionResourceProvider.BASE_PATH + "*"));
-		registrations.addAll(webController.getServletRegistrations(uxServerContext));
-		return registrations;
-	}
-
-	@NotNull
-	private SystemIconResourceProvider createSystemIconResourceProvider(IconProvider iconProvider, List<IconProvider> customIconProvider)  {
-		try {
-			File tempDir = File.createTempFile("temp", "temp").getParentFile();
-			SystemIconResourceProvider systemIconProvider = new SystemIconResourceProvider(tempDir);
-			systemIconProvider.registerStandardIconProvider(iconProvider);
-			if (customIconProvider != null) {
-				customIconProvider.forEach(provider -> systemIconProvider.registerCustomIconProvider(provider));
-			}
-			return systemIconProvider;
-		} catch (IOException e) {
-			throw new IllegalStateException(e);
-		}
-	}
-
-	public void onUiSessionClientRefresh(QualifiedUiSessionId sessionId, UiClientInfo clientInfo) {
-		this.onUiSessionStarted(sessionId, clientInfo);
-	}
-
-	@Override
-	public void onUiSessionClosed(QualifiedUiSessionId sessionId, SessionClosingReason reason) {
-		SessionContext context = sessionContextById.remove(sessionId);
-		if (context != null) {
-			context.destroy();
-		}
-	}
-
-	public void onUiEvent(QualifiedUiSessionId sessionId, UiEvent event) {
-		SessionContext sessionContext = sessionContextById.get(sessionId);
-		if (sessionContext != null) {
-			sessionContext.runWithContext(() -> {
-				sessionContext.setLastClientEventTimestamp(System.currentTimeMillis());
-				String uiComponentId = event.getComponentId();
-				Component component = sessionContext.getComponent(uiComponentId);
-				component.handleUiEvent(event);
-			});
-		}
-	}
-
-	public void handleFileUpload(File file, String uuid) {
-		this.uploadedFilesByUuid.put(uuid, file);
-	}
-
-	public SessionContext getSessionContextById(QualifiedUiSessionId qualifiedUiSessionId) {
-		return sessionContextById.get(qualifiedUiSessionId);
-	}
-
-	public String getUserSessionCommandsRecordingPath() {
-		return userSessionCommandsRecordingPath;
-	}
-
-	public void setUserSessionCommandsRecordingPath(String userSessionCommandsRecordingPath) {
-		this.userSessionCommandsRecordingPath = userSessionCommandsRecordingPath;
-	}
-}
diff --git a/teamapps-ux-servlet/src/main/java/org/teamapps/ux/servlet/util/ZipRatioAnalyzer.java b/teamapps-ux-servlet/src/main/java/org/teamapps/ux/servlet/util/ZipRatioAnalyzer.java
deleted file mode 100644
index 7b0ce9718..000000000
--- a/teamapps-ux-servlet/src/main/java/org/teamapps/ux/servlet/util/ZipRatioAnalyzer.java
+++ /dev/null
@@ -1,60 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.ux.servlet.util;
-
-import org.apache.commons.io.FileUtils;
-import org.slf4j.Logger;
-import org.slf4j.LoggerFactory;
-
-import java.util.concurrent.atomic.AtomicLong;
-
-public class ZipRatioAnalyzer {
-
-	private static Logger LOGGER = LoggerFactory.getLogger(ZipRatioAnalyzer.class);
-
-	public final String name;
-
-	private AtomicLong uncompressedSizeSum = new AtomicLong(0);
-	private AtomicLong statefullyCompressedSizeSum = new AtomicLong(0);
-	private AtomicLong statelesslyCompressedSizeSum = new AtomicLong(0);
-
-	public ZipRatioAnalyzer(String name) {
-		this.name = name;
-	}
-
-
-	public void addData(byte[] uncompressedData, int statefullyCompressedSize) {
-		if (LOGGER.isDebugEnabled()) {
-			long uncompressedSum = uncompressedSizeSum.addAndGet(uncompressedData.length);
-			long statefulSum = statefullyCompressedSizeSum.addAndGet(statefullyCompressedSize);
-			long statelessSum = statelesslyCompressedSizeSum.addAndGet(ZlibUtil.deflate(uncompressedData).length);
-			LOGGER.debug(name + ":: Σ uncompressed: " + FileUtils.byteCountToDisplaySize(uncompressedSum)
-					+ "; Σ stateless: " + FileUtils.byteCountToDisplaySize(statelessSum) + " (r=" + ratio(uncompressedSum, statelessSum) + ")"
-					+ "; Σ stateful: " + FileUtils.byteCountToDisplaySize(statefulSum) + " (r=" + ratio(uncompressedSum, statefulSum) + ")"
-					+ "; Ratio stateful vs. stateless: " + ratio(statelessSum, statefulSum));
-
-		}
-	}
-
-	private String ratio(long uncompressedSize, long compressedSize) {
-		return String.format("%.2f%%", (100 * (uncompressedSize - compressedSize)) / (float) uncompressedSize);
-	}
-
-}
diff --git a/teamapps-ux-servlet/src/main/java/org/teamapps/ux/servlet/util/ZlibStatefulInflater.java b/teamapps-ux-servlet/src/main/java/org/teamapps/ux/servlet/util/ZlibStatefulInflater.java
deleted file mode 100644
index 327ea44d2..000000000
--- a/teamapps-ux-servlet/src/main/java/org/teamapps/ux/servlet/util/ZlibStatefulInflater.java
+++ /dev/null
@@ -1,47 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.ux.servlet.util;
-
-import java.io.ByteArrayOutputStream;
-import java.util.zip.DataFormatException;
-import java.util.zip.Inflater;
-
-public class ZlibStatefulInflater {
-
-	private Inflater inflater = new Inflater();
-
-	public byte[] inflate(byte[] data) {
-		inflater.setInput(data);
-
-		ByteArrayOutputStream byteArrayOutputStream = new ByteArrayOutputStream();
-		byte[] outputBuffer = new byte[data.length * 2];
-		do {
-			int decompressedLength;
-			try {
-				decompressedLength = inflater.inflate(outputBuffer, 0, outputBuffer.length);
-			} catch (DataFormatException e) {
-				throw new RuntimeException(e);
-			}
-			byteArrayOutputStream.write(outputBuffer, 0, decompressedLength);
-		} while (!inflater.needsInput());
-		return byteArrayOutputStream.toByteArray();
-	}
-
-}
diff --git a/teamapps-ux-servlet/src/main/java/org/teamapps/ux/servlet/util/ZlibUtil.java b/teamapps-ux-servlet/src/main/java/org/teamapps/ux/servlet/util/ZlibUtil.java
deleted file mode 100644
index 74d83cff9..000000000
--- a/teamapps-ux-servlet/src/main/java/org/teamapps/ux/servlet/util/ZlibUtil.java
+++ /dev/null
@@ -1,62 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.ux.servlet.util;
-
-import java.io.ByteArrayOutputStream;
-import java.io.IOException;
-import java.nio.charset.StandardCharsets;
-import java.util.zip.DeflaterOutputStream;
-import java.util.zip.InflaterOutputStream;
-
-public class ZlibUtil {
-
-	public static byte[] deflateString(String string) {
-		return deflate(string.getBytes(StandardCharsets.UTF_8));
-	}
-
-	public static byte[] deflate(byte[] dataToCompress) {
-		try {
-			ByteArrayOutputStream byteOutStream = new ByteArrayOutputStream(dataToCompress.length / 3);
-			try (DeflaterOutputStream deflateStream = new DeflaterOutputStream(byteOutStream)) {
-				deflateStream.write(dataToCompress);
-			}
-			return byteOutStream.toByteArray();
-		} catch (IOException e) {
-			e.printStackTrace();
-			return null;
-		}
-	}
-
-	public static String inflateToString(byte[] input) {
-		try {
-			ByteArrayOutputStream byteOutStream = new ByteArrayOutputStream(input.length * 5);
-			try (InflaterOutputStream deflateStream = new InflaterOutputStream(byteOutStream)) {
-				deflateStream.write(input);
-			}
-			byte[] bytes = byteOutStream.toByteArray();
-			return new String(bytes, StandardCharsets.UTF_8);
-		} catch (Exception e) {
-			e.printStackTrace();
-			return null;
-		}
-	}
-
-
-}
diff --git a/teamapps-ux-servlet/src/test/java/org/teamapps/ux/servlet/util/ZlibTests.java b/teamapps-ux-servlet/src/test/java/org/teamapps/ux/servlet/util/ZlibTests.java
deleted file mode 100644
index 086134fce..000000000
--- a/teamapps-ux-servlet/src/test/java/org/teamapps/ux/servlet/util/ZlibTests.java
+++ /dev/null
@@ -1,127 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.ux.servlet.util;
-
-import com.google.common.io.Resources;
-import org.apache.commons.lang3.RandomStringUtils;
-import org.assertj.core.api.Assertions;
-import org.junit.Assert;
-import org.junit.Ignore;
-import org.junit.Test;
-
-import java.io.BufferedReader;
-import java.io.IOException;
-import java.io.InputStream;
-import java.io.InputStreamReader;
-import java.net.URL;
-import java.nio.charset.Charset;
-import java.nio.charset.StandardCharsets;
-import java.util.Arrays;
-
-public class ZlibTests {
-
-	@Test
-	public void deflate() throws Exception {
-		ZlibStatefulDeflater deflator = new ZlibStatefulDeflater();
-		ZlibStatefulInflater inflator = new ZlibStatefulInflater();
-
-		Arrays.asList(
-				"Initial",
-				"Second message",
-				"Here comes a larger message!",
-				readResourceToString("sample.json"),
-				"tiny"
-		).forEach(s -> testDeflateInflateChain(deflator, inflator, s));
-	}
-
-	@Test
-	public void testStreamingIsBetterThanStateless() {
-		ZlibStatefulDeflater deflator = new ZlibStatefulDeflater();
-
-		Arrays.asList(
-				"Initial",
-				"Second message",
-				"Here comes a larger message!",
-				readResourceToString("sample.json"),
-				"tiny"
-		).forEach(s -> {
-			int firstCompressionSize = deflator.deflate(s.getBytes(StandardCharsets.UTF_8)).length;
-			int secondCompressionSize = deflator.deflate(s.getBytes(StandardCharsets.UTF_8)).length;
-			int statelessCompressionSize = ZlibUtil.deflateString(s).length;
-
-			System.out.println("First compression: " + firstCompressionSize + "; Second compression: " + secondCompressionSize + "; Stateless compression: " + statelessCompressionSize);
-
-			Assertions.assertThat(secondCompressionSize).isLessThan(firstCompressionSize);
-			Assertions.assertThat(secondCompressionSize).isLessThan(statelessCompressionSize);
-		});
-	}
-
-	@Test
-	public void benchmarkImprovementsInRealisticScenario() throws IOException {
-		ZlibStatefulDeflater deflator = new ZlibStatefulDeflater();
-
-		InputStream inputStream = getClass().getResourceAsStream("/recordings/ux-component-test-app-recording-2.log");
-		BufferedReader bufferedReader = new BufferedReader(new InputStreamReader(inputStream));
-
-		int sumStateful = 0;
-		int sumStateless = 0;
-
-		String line;
-		while ((line = bufferedReader.readLine()) != null) {
-			int streamingCompressionSize = deflator.deflate(line.getBytes(StandardCharsets.UTF_8)).length;
-			int statelessCompressionSize = ZlibUtil.deflateString(line).length;
-
-			sumStateful += streamingCompressionSize;
-			sumStateless += statelessCompressionSize;
-
-			System.out.println("Stateful compression: " + streamingCompressionSize + "; Stateless compression: " + statelessCompressionSize);
-		}
-		System.out.println("SUMS: Stateful: " + sumStateful + "; Stateless: " + sumStateless);
-		System.out.println("Saving absolute: " + (sumStateless - sumStateful) + "; Saving relative: " + ((sumStateless - sumStateful) / (double) sumStateful) * 100 + "%");
-	}
-
-	@Test
-	@Ignore
-	public void testHeapProblems() throws Exception {
-		ZlibStatefulDeflater deflator = new ZlibStatefulDeflater();
-		while (true) {
-			deflator.deflate(RandomStringUtils.random(10000).getBytes(StandardCharsets.UTF_8));
-		}
-	}
-
-	private void testDeflateInflateChain(ZlibStatefulDeflater deflator, ZlibStatefulInflater inflator, String input) {
-		byte[] compressed = deflator.deflate(input.getBytes(StandardCharsets.UTF_8));
-		String uncompressed = new String(inflator.inflate(compressed), StandardCharsets.UTF_8);
-
-		int inputLength = input.getBytes(StandardCharsets.UTF_8).length;
-		System.out.println("Input length: " + inputLength + "; Compressed length: " + compressed.length);
-
-		Assert.assertEquals(uncompressed, input);
-	}
-
-	private static String readResourceToString(String resourceName) {
-		URL url = Resources.getResource(resourceName);
-		try {
-			return Resources.toString(url, Charset.forName("UTF-8"));
-		} catch (IOException e) {
-			throw new RuntimeException(e);
-		}
-	}
-}
diff --git a/teamapps-ux-servlet/src/test/java/org/teamapps/ux/servlet/util/ZlibUtilTest.java b/teamapps-ux-servlet/src/test/java/org/teamapps/ux/servlet/util/ZlibUtilTest.java
deleted file mode 100644
index 3a850f353..000000000
--- a/teamapps-ux-servlet/src/test/java/org/teamapps/ux/servlet/util/ZlibUtilTest.java
+++ /dev/null
@@ -1,65 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.ux.servlet.util;
-
-import org.junit.Assert;
-import org.junit.Test;
-
-import java.io.ByteArrayOutputStream;
-import java.util.zip.InflaterOutputStream;
-
-public class ZlibUtilTest {
-
-    @Test
-    public void testDefalteAndInflate() throws Exception {
-        String inputString = "hallo";
-        byte[] deflated = ZlibUtil.deflateString(inputString);
-        String inflated = ZlibUtil.inflateToString(deflated);
-        Assert.assertEquals(inputString, inflated);
-    }
-
-    @Test
-    public void testName() throws Exception {
-        byte[] bytes = {120, (byte)156, (byte)203, 72, (byte)204, (byte)201, (byte)201, 7, 0, 6, 28, 2, 17};
-            ByteArrayOutputStream byteOutStream = new ByteArrayOutputStream(bytes.length * 5);
-            try (InflaterOutputStream deflateStream = new InflaterOutputStream(byteOutStream)) {
-                deflateStream.write(bytes);
-            }
-            byte[] result = byteOutStream.toByteArray();
-            Assert.assertEquals("hallo", new String(result, "UTF8"));
-
-    }
-
-    @Test
-    public void testName2() throws Exception {
-        byte[] bytes = {
-                120, (byte)156, 69, (byte)142, (byte)209, 74, (byte)195, 64, 16, 69, (byte)255, 101, (byte)158, (byte)179, (byte)184, (byte)137, (byte)217, (byte)152, (byte)238, (byte)163, 90, 49, (byte)160, (byte)173, 96, 69, 80, 68, (byte)146, (byte)221, 27, 51, 88, 55, 101, 51, 81, (byte)138, (byte)248, (byte)239, 46, 98, (byte)233, (byte)227, (byte)156, 123, (byte)238, 112, (byte)191, (byte)233, 85, (byte)246, 59, (byte)144, (byte)165, (byte)139, (byte)155, 102, (byte)185, (byte)218, (byte)168, 102, 117, (byte)181, (byte)166, (byte)140, 62, 25, 95, 119, 99, (byte)148, 71, (byte)246, 50, (byte)144, (byte)173, 76, 125, 100, (byte)215, (byte)224, (byte)183, 65, (byte)200, 46, 76, (byte)149, (byte)209, (byte)228, 34, 16, (byte)254, (byte)181, (byte)188, (byte)170, (byte)245, 1, 29, (byte)172, 92, (byte)155, (byte)196, (byte)134, 116, 92, 34, 76, 44, (byte)251, (byte)251, (byte)191, (byte)152, (byte)172, (byte)196, 25, 25, 9, 127, (byte)224, 105, 12, 88, (byte)247, (byte)253, 4, (byte)185, (byte)229, 48, 11, 38, (byte)178, 42, 47, (byte)244, 49, 108, (byte)218, (byte)208, (byte)166, (byte)137, (byte)203, 57, (byte)142, 59, (byte)156, (byte)156, 35, 110, 57, (byte)164, (byte)145, 110, (byte)203, 8, (byte)178, 25, (byte)223, (byte)211, 99, (byte)178, (byte)207, 47, (byte)169, (byte)208, 118, 15, 51, (byte)251, (byte)228, 2, (byte)168, (byte)141, (byte)214, (byte)189, (byte)242, 48, 80, 101, (byte)225, 10, (byte)213, 57, 15, (byte)229, (byte)171, (byte)190, 116, 56, (byte)235, 78, 81, 46, (byte)232, (byte)231, 23, (byte)252, 88, 83, (byte)143
-        };
-        ByteArrayOutputStream byteOutStream = new ByteArrayOutputStream(bytes.length * 5);
-        try (InflaterOutputStream deflateStream = new InflaterOutputStream(byteOutStream)) {
-            deflateStream.write(bytes);
-        }
-        byte[] result = byteOutStream.toByteArray();
-        Assert.assertEquals("{\"_type\":\"CLIENT-INFO\",\"viewPortWidth\":658,\"viewPortHeight\":956,\"screenWidth\":1680,\"screenHeight\":1050," +
-                "\"highDensityScreen\":true,\"timeZoneOffsetMinutes\":-120,\"timeZoneIana\":\"Europe/Berlin\",\"clientTokens\":[]," +
-                "\"tabUuid\":\"eee8500f-de5e-42c2-bcde-d6f4ce7b3e49\"}", new String(result, "UTF8"));
-
-    }
-}
diff --git a/teamapps-ux/.classpath b/teamapps-ux/.classpath
new file mode 100644
index 000000000..df66b20f8
--- /dev/null
+++ b/teamapps-ux/.classpath
@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<classpath>
+	<classpathentry kind="src" output="target/classes" path="src/main/java">
+		<attributes>
+			<attribute name="optional" value="true"/>
+			<attribute name="maven.pomderived" value="true"/>
+		</attributes>
+	</classpathentry>
+	<classpathentry excluding="**" kind="src" output="target/classes" path="src/main/resources">
+		<attributes>
+			<attribute name="maven.pomderived" value="true"/>
+			<attribute name="optional" value="true"/>
+		</attributes>
+	</classpathentry>
+	<classpathentry kind="src" output="target/test-classes" path="src/test/java">
+		<attributes>
+			<attribute name="optional" value="true"/>
+			<attribute name="maven.pomderived" value="true"/>
+			<attribute name="test" value="true"/>
+		</attributes>
+	</classpathentry>
+	<classpathentry excluding="**" kind="src" output="target/test-classes" path="src/test/resources">
+		<attributes>
+			<attribute name="maven.pomderived" value="true"/>
+			<attribute name="test" value="true"/>
+			<attribute name="optional" value="true"/>
+		</attributes>
+	</classpathentry>
+	<classpathentry kind="con" path="org.eclipse.jdt.launching.JRE_CONTAINER/org.eclipse.jdt.internal.debug.ui.launcher.StandardVMType/JavaSE-17">
+		<attributes>
+			<attribute name="maven.pomderived" value="true"/>
+		</attributes>
+	</classpathentry>
+	<classpathentry kind="con" path="org.eclipse.m2e.MAVEN2_CLASSPATH_CONTAINER">
+		<attributes>
+			<attribute name="maven.pomderived" value="true"/>
+		</attributes>
+	</classpathentry>
+	<classpathentry kind="src" path="target/generated-sources/annotations">
+		<attributes>
+			<attribute name="optional" value="true"/>
+			<attribute name="maven.pomderived" value="true"/>
+			<attribute name="ignore_optional_problems" value="true"/>
+			<attribute name="m2e-apt" value="true"/>
+		</attributes>
+	</classpathentry>
+	<classpathentry kind="src" output="target/test-classes" path="target/generated-test-sources/test-annotations">
+		<attributes>
+			<attribute name="optional" value="true"/>
+			<attribute name="maven.pomderived" value="true"/>
+			<attribute name="ignore_optional_problems" value="true"/>
+			<attribute name="m2e-apt" value="true"/>
+			<attribute name="test" value="true"/>
+		</attributes>
+	</classpathentry>
+	<classpathentry kind="output" path="target/classes"/>
+</classpath>
diff --git a/teamapps-ux/.project b/teamapps-ux/.project
new file mode 100644
index 000000000..16503c974
--- /dev/null
+++ b/teamapps-ux/.project
@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<projectDescription>
+	<name>teamapps-ux</name>
+	<comment></comment>
+	<projects>
+	</projects>
+	<buildSpec>
+		<buildCommand>
+			<name>org.eclipse.jdt.core.javabuilder</name>
+			<arguments>
+			</arguments>
+		</buildCommand>
+		<buildCommand>
+			<name>org.eclipse.m2e.core.maven2Builder</name>
+			<arguments>
+			</arguments>
+		</buildCommand>
+	</buildSpec>
+	<natures>
+		<nature>org.eclipse.jdt.core.javanature</nature>
+		<nature>org.eclipse.m2e.core.maven2Nature</nature>
+	</natures>
+	<filteredResources>
+		<filter>
+			<id>1766426371889</id>
+			<name></name>
+			<type>30</type>
+			<matcher>
+				<id>org.eclipse.core.resources.regexFilterMatcher</id>
+				<arguments>node_modules|\.git|__CREATED_BY_JAVA_LANGUAGE_SERVER__</arguments>
+			</matcher>
+		</filter>
+	</filteredResources>
+</projectDescription>
diff --git a/teamapps-ux/.settings/org.eclipse.core.resources.prefs b/teamapps-ux/.settings/org.eclipse.core.resources.prefs
new file mode 100644
index 000000000..29abf9995
--- /dev/null
+++ b/teamapps-ux/.settings/org.eclipse.core.resources.prefs
@@ -0,0 +1,6 @@
+eclipse.preferences.version=1
+encoding//src/main/java=UTF-8
+encoding//src/main/resources=UTF-8
+encoding//src/test/java=UTF-8
+encoding//src/test/resources=UTF-8
+encoding/<project>=UTF-8
diff --git a/teamapps-ux/.settings/org.eclipse.jdt.apt.core.prefs b/teamapps-ux/.settings/org.eclipse.jdt.apt.core.prefs
new file mode 100644
index 000000000..d4313d4b2
--- /dev/null
+++ b/teamapps-ux/.settings/org.eclipse.jdt.apt.core.prefs
@@ -0,0 +1,2 @@
+eclipse.preferences.version=1
+org.eclipse.jdt.apt.aptEnabled=false
diff --git a/teamapps-ux/.settings/org.eclipse.jdt.core.prefs b/teamapps-ux/.settings/org.eclipse.jdt.core.prefs
new file mode 100644
index 000000000..c9d1e5535
--- /dev/null
+++ b/teamapps-ux/.settings/org.eclipse.jdt.core.prefs
@@ -0,0 +1,9 @@
+eclipse.preferences.version=1
+org.eclipse.jdt.core.compiler.codegen.targetPlatform=17
+org.eclipse.jdt.core.compiler.compliance=17
+org.eclipse.jdt.core.compiler.problem.enablePreviewFeatures=disabled
+org.eclipse.jdt.core.compiler.problem.forbiddenReference=warning
+org.eclipse.jdt.core.compiler.problem.reportPreviewFeatures=ignore
+org.eclipse.jdt.core.compiler.processAnnotations=disabled
+org.eclipse.jdt.core.compiler.release=disabled
+org.eclipse.jdt.core.compiler.source=17
diff --git a/teamapps-ux/.settings/org.eclipse.m2e.core.prefs b/teamapps-ux/.settings/org.eclipse.m2e.core.prefs
new file mode 100644
index 000000000..f897a7f1c
--- /dev/null
+++ b/teamapps-ux/.settings/org.eclipse.m2e.core.prefs
@@ -0,0 +1,4 @@
+activeProfiles=
+eclipse.preferences.version=1
+resolveWorkspaceProjects=true
+version=1
diff --git a/teamapps-ux/pom.xml b/teamapps-ux/pom.xml
index 95db819f3..cab7a74db 100644
--- a/teamapps-ux/pom.xml
+++ b/teamapps-ux/pom.xml
@@ -3,7 +3,7 @@
     <parent>
         <artifactId>teamapps</artifactId>
         <groupId>org.teamapps</groupId>
-        <version>0.9.8-SNAPSHOT</version>
+        <version>0.9.208-SNAPSHOT</version>
     </parent>
     <modelVersion>4.0.0</modelVersion>
 
@@ -20,6 +20,9 @@
             <comments>A business-friendly OSS license</comments>
         </license>
     </licenses>
+    <properties>
+        <jersey.version>3.1.10</jersey.version>
+    </properties>
     <developers>
         <developer>
             <name>Matthias Bernstein</name>
@@ -39,6 +42,15 @@
             <groupId>org.teamapps</groupId>
             <artifactId>teamapps-common</artifactId>
         </dependency>
+        <dependency>
+            <groupId>org.teamapps</groupId>
+            <artifactId>teamapps-commons</artifactId>
+        </dependency>
+
+<!--        <dependency>-->
+<!--            <groupId>org.teamapps</groupId>-->
+<!--            <artifactId>teamapps-icon</artifactId>-->
+<!--        </dependency>-->
 
         <dependency>
             <groupId>org.teamapps</groupId>
@@ -56,60 +68,126 @@
         </dependency>
 
         <dependency>
-            <groupId>org.teamapps</groupId>
-            <artifactId>teamapps-icon</artifactId>
+            <groupId>org.apache.commons</groupId>
+            <artifactId>commons-lang3</artifactId>
         </dependency>
 
+        <dependency>
+            <groupId>org.apache.commons</groupId>
+            <artifactId>commons-collections4</artifactId>
+        </dependency>
 
         <dependency>
-            <groupId>io.github.classgraph</groupId>
-            <artifactId>classgraph</artifactId>
+            <!-- TODO get rid of this dependency! -->
+            <groupId>com.google.guava</groupId>
+            <artifactId>guava</artifactId>
         </dependency>
 
         <dependency>
-            <groupId>org.jetbrains</groupId>
-            <artifactId>annotations</artifactId>
+            <groupId>com.fasterxml.jackson.datatype</groupId>
+            <artifactId>jackson-datatype-jsr310</artifactId>
         </dependency>
 
         <dependency>
-            <groupId>org.assertj</groupId>
-            <artifactId>assertj-core</artifactId>
-            <scope>test</scope>
+            <groupId>jakarta.servlet</groupId>
+            <artifactId>jakarta.servlet-api</artifactId>
+            <version>6.0.0</version>
+            <scope>provided</scope>
+        </dependency>
+        <dependency>
+            <groupId>jakarta.websocket</groupId>
+            <artifactId>jakarta.websocket-api</artifactId>
+            <version>2.1.1</version>
+            <scope>provided</scope>
         </dependency>
+        <dependency>
+            <groupId>jakarta.websocket</groupId>
+            <artifactId>jakarta.websocket-client-api</artifactId>
+            <version>2.1.1</version>
+            <scope>provided</scope>
+        </dependency>
+
+
 
         <dependency>
-            <groupId>com.sun.activation</groupId>
-            <artifactId>javax.activation</artifactId>
-            <version>1.2.0</version>
+            <groupId>it.unimi.dsi</groupId>
+            <artifactId>fastutil</artifactId>
+            <version>8.5.8</version>
         </dependency>
 
         <dependency>
-            <groupId>org.apache.commons</groupId>
-            <artifactId>commons-lang3</artifactId>
+            <groupId>com.auth0</groupId>
+            <artifactId>java-jwt</artifactId>
+            <version>3.19.1</version>
+            <exclusions>
+                <exclusion>
+                    <groupId>com.fasterxml.jackson.core</groupId>
+                    <artifactId>jackson-databind</artifactId>
+                </exclusion>
+            </exclusions>
         </dependency>
 
         <dependency>
-            <!-- TODO get rid of this dependency! -->
-            <groupId>com.google.guava</groupId>
-            <artifactId>guava</artifactId>
+            <groupId>org.slf4j</groupId>
+            <artifactId>slf4j-simple</artifactId>
+            <scope>test</scope>
         </dependency>
 
         <dependency>
-            <groupId>com.fasterxml.jackson.datatype</groupId>
-            <artifactId>jackson-datatype-jsr310</artifactId>
+            <!-- Needed for MediaSoupV3RestClient only! -->
+            <groupId>org.glassfish.jersey.core</groupId>
+            <artifactId>jersey-client</artifactId>
+            <version>${jersey.version}</version>
+        </dependency>
+        <dependency>
+            <!-- Needed for MediaSoupV3RestClient only! -->
+            <groupId>org.glassfish.jersey.media</groupId>
+            <artifactId>jersey-media-json-jackson</artifactId>
+            <version>${jersey.version}</version>
+            <exclusions>
+                <exclusion>
+                    <groupId>com.fasterxml.jackson.module</groupId>
+                    <artifactId>jackson-module-jaxb-annotations</artifactId>
+                </exclusion>
+            </exclusions>
+        </dependency>
+        <dependency>
+            <groupId>org.glassfish.jersey.inject</groupId>
+            <artifactId>jersey-hk2</artifactId>
+            <version>${jersey.version}</version>
         </dependency>
 
         <dependency>
-            <groupId>javax</groupId>
-            <artifactId>javaee-web-api</artifactId>
+            <groupId>javax.money</groupId>
+            <artifactId>money-api</artifactId>
+            <version>1.1</version>
+            <scope>provided</scope>
         </dependency>
 
         <dependency>
-            <groupId>org.mockito</groupId>
-            <artifactId>mockito-core</artifactId>
-            <scope>test</scope>
+            <groupId>io.micrometer</groupId>
+            <artifactId>micrometer-registry-prometheus</artifactId>
+            <version>1.8.5</version>
+            <optional>true</optional>
         </dependency>
 
     </dependencies>
 
+    <build>
+        <plugins>
+            <plugin>
+                <groupId>org.apache.maven.plugins</groupId>
+                <artifactId>maven-jar-plugin</artifactId>
+                <version>3.3.0</version>
+                <executions>
+                    <execution>
+                        <goals>
+                            <goal>test-jar</goal>
+                        </goals>
+                    </execution>
+                </executions>
+            </plugin>
+        </plugins>
+    </build>
+
 </project>
\ No newline at end of file
diff --git a/teamapps-ux/src/main/java/org/teamapps/config/TeamAppsConfiguration.java b/teamapps-ux/src/main/java/org/teamapps/config/TeamAppsConfiguration.java
new file mode 100644
index 000000000..c7845071c
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/config/TeamAppsConfiguration.java
@@ -0,0 +1,374 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.config;
+
+import jakarta.servlet.http.HttpSession;
+import jakarta.servlet.http.HttpSessionListener;
+import org.teamapps.event.Event;
+import org.teamapps.util.threading.SequentialExecutorFactory;
+import org.teamapps.ux.session.SessionContext;
+import org.teamapps.ux.session.navigation.RouteHandler;
+
+import java.io.File;
+
+/**
+ * TODO Explain difference between UI session and HTTP session.
+ * TODO Describe UI protocol and back pressure.
+ */
+public class TeamAppsConfiguration {
+
+	/**
+	 * The timeout after which the UX server regards a UI session as obsolete.
+	 * This happens when the client stops sending messages to the server (especially KEEPALIVE messages, but also normal messages).
+	 * This may be caused by the browser tab being closed or the internet connection being interrupted.
+	 * <p>
+	 * When a UI session times out, the corresponding {@link SessionContext} gets closed
+	 * and removed from the map of known {@link String}s.
+	 * <p>
+	 * The {@link SessionContext} will also fire its
+	 * {@link SessionContext#onDestroyed onDestroyed} event, which will detach any {@link Event SessionContext-bound event} listeners.
+	 * <p>
+	 * From a user's perspective, the session is expired and the user most likely needs to reload the page (unless the developer
+	 * has implemented an alternative handling on the client side).
+	 * <p>
+	 * NOTE that UI sessions might not be destroyed "punctually". The interval at which the session states are updated is
+	 * the {@link #keepaliveMessageIntervalMillis}.
+	 *
+	 * @see #keepaliveMessageIntervalMillis
+	 */
+	private long uiSessionTimeoutMillis = 30 * 60_000;
+
+	/**
+	 * The timeout after which clients not sending any messages to the server anymore (including KEEPALIVE) are regarded as "inactive".
+	 * <p>
+	 * While this does not have any direct effects inside the TeamApps framework, the "activity state" can be monitored
+	 * on the application level (see {@link SessionContext#onActivityStateChanged}). For instance, this can be used to mark an application user
+	 * as "away".
+	 * <p>
+	 * The default value of 75 seconds has been chosen because browsers tend to optimize inactive tabs.
+	 * In Chrome for example, timers (e.g. for periodically sending KEEPALIVE messages) will be triggered only every 60 seconds
+	 * regardless of the actual scheduled interval.
+	 * <p>
+	 * Also note that, when a client did not send a KEEPALIVE message for uiSessionInactivityTimeoutMillis - uiSessionPreInactivityPingMillis,
+	 * the server will send a PING message to the client, which the client should respond to with a KEEPALIVE message.
+	 * This circumvents client-side resource consumption optimizations, since the client is actively triggered by the server
+	 * instead of waiting for a timeout.
+	 */
+	private long uiSessionInactivityTimeoutMillis = 75_000;
+
+	/**
+	 * Before setting a session inactive (after uiSessionInactivityTimeoutMillis without any sign from the client), the server will attempt
+	 * to send a PING message to the client, in order to actively request a KEEPALIVE from it.
+	 * <p>
+	 * This specifies the amount of milliseconds before setting the client inactive that the server will send the PING.
+	 * <p>
+	 * By default, this is 10 seconds, so the server will wait (uiSessionInactivityTimeoutMillis - 10s) before sending the PING.
+	 */
+	private long uiSessionPreInactivityPingMillis = 10_000;
+
+	/**
+	 * The interval at which the client sends keep alive messages.
+	 * <p>
+	 * Not that this interval should be less than uiSessionInactivityTimeoutMillis / 2.
+	 *
+	 * @see #uiSessionTimeoutMillis
+	 */
+	private long keepaliveMessageIntervalMillis = 25_000;
+
+	/**
+	 * Will overwrite the servlet container's HTTP session timeout.
+	 * Note that this is important, since the TeamApps client protocol does not rely on HTTP requests but on WebSocket communication
+	 * and the interchange of WebSocket messages will NOT keep the HTTP session alive.
+	 * <p>
+	 * TeamApps does currently not provide a HTTP keep-alive request mechanism, so you might want to set this to a high value.
+	 * <p>
+	 * NOTE that TeamApps will get independent of HTTP sessions. So this configuration will be obsolete very soon.
+	 *
+	 * @deprecated TeamApps does not care about HTTP sessions anymore. Please set the http session timeout in a different way.
+	 * This will be removed in some future version.
+	 * The cleanest way to set {@link HttpSession#setMaxInactiveInterval(int)} would be by registering a
+	 * {@link HttpSessionListener}.
+	 * Also note that the {@link HttpSession} is still available via {@link SessionContext#getHttpSession()}.
+	 */
+	@Deprecated
+	private int httpSessionTimeoutSeconds = 24 * 3600;
+
+	/**
+	 * The number of UI commands for a client that will be buffered on the server side before the UI session will be closed.
+	 */
+	private int commandBufferLength = 5_000;
+
+	/**
+	 * The total number of characters that all commands in the command buffer of a session may hold. This is NOT the same as
+	 * {@link #commandBufferLength}, which specifies the maximum <i>number</i> of commands that the buffer may hold.
+	 * <p>
+	 * Keep in mind that every character in Java takes 1 or 2 bytes of heap space (prior Java 9 always 2 bytes).
+	 */
+	private int commandBufferTotalSize = 5_000_000;
+
+	/**
+	 * This is a client back pressure protocol parameter.
+	 * The number of remaining requested commands at which the client will request new commands from the server.
+	 * Intuitively, this should be 0, so when the client has no more commands requested from the server, it will do the request.
+	 * However, for performance reasons, this value should be set to something greater than 0, so the client can anticipate
+	 * commands being sent from the server and prevent the server from buffering commands.
+	 */
+	private int clientMinRequestedCommands = 3;
+
+	/**
+	 * This is a client back pressure protocol parameter.
+	 * The maximum number of commands a client will request from a server.
+	 */
+	private int clientMaxRequestedCommands = 20;
+
+	/**
+	 * The number of client/UI events the client will buffer before invalidating its connection (buffer overflow on the client side).
+	 */
+	private int clientEventsBufferSize = 500;
+
+	/**
+	 * The maximum size that client websocket messages may have (basically corresponding to individual client events).
+	 * If you plan having MultiLineTextFields with huge amounts of text, increase this.
+	 */
+	private int maxUiClientMessageSize = 1024 * 1024;
+
+	/**
+	 * The directory that uploaded files should get stored to (see UploadServlet).
+	 */
+	private File uploadDirectory = new File(System.getProperty("java.io.tmpdir"));
+
+	/**
+	 * Max number of threads that should be used for changing session state.
+	 * Note that you can also choose to write an own {@link SequentialExecutorFactory},
+	 * in which case this
+	 *
+	 * @see org.teamapps.uisession.TeamAppsSessionManager#sessionExecutorFactory
+	 */
+	private int maxNumberOfSessionExecutorThreads = Runtime.getRuntime().availableProcessors() * 2;
+
+	/**
+	 * Path prefix to be ignored when routing and added when creating URLs.
+	 *
+	 * @see RouteHandler
+	 */
+	private String navigationPathPrefix = "";
+
+	public TeamAppsConfiguration() {
+	}
+
+	/**
+	 * @see #uiSessionTimeoutMillis
+	 */
+	public long getUiSessionTimeoutMillis() {
+		return uiSessionTimeoutMillis;
+	}
+
+	/**
+	 * @see #uiSessionTimeoutMillis
+	 */
+	public void setUiSessionTimeoutMillis(long uiSessionTimeoutMillis) {
+		this.uiSessionTimeoutMillis = uiSessionTimeoutMillis;
+	}
+
+	/**
+	 * @see #uiSessionInactivityTimeoutMillis
+	 */
+	public long getUiSessionInactivityTimeoutMillis() {
+		return uiSessionInactivityTimeoutMillis;
+	}
+
+	/**
+	 * @see #uiSessionInactivityTimeoutMillis
+	 */
+	public void setUiSessionInactivityTimeoutMillis(long uiSessionInactivityTimeoutMillis) {
+		this.uiSessionInactivityTimeoutMillis = uiSessionInactivityTimeoutMillis;
+	}
+
+	/**
+	 * @see #uiSessionPreInactivityPingMillis
+	 */
+	public long getUiSessionPreInactivityPingMillis() {
+		return uiSessionPreInactivityPingMillis;
+	}
+
+	/**
+	 * @see #uiSessionPreInactivityPingMillis
+	 */
+	public void setUiSessionPreInactivityPingMillis(long uiSessionPreInactivityPingMillis) {
+		this.uiSessionPreInactivityPingMillis = uiSessionPreInactivityPingMillis;
+	}
+
+	/**
+	 * @see #keepaliveMessageIntervalMillis
+	 */
+	public long getKeepaliveMessageIntervalMillis() {
+		return keepaliveMessageIntervalMillis;
+	}
+
+	/**
+	 * @see #keepaliveMessageIntervalMillis
+	 */
+	public void setKeepaliveMessageIntervalMillis(long keepaliveMessageIntervalMillis) {
+		this.keepaliveMessageIntervalMillis = keepaliveMessageIntervalMillis;
+	}
+
+	/**
+	 * @see #httpSessionTimeoutSeconds
+	 * @deprecated TeamApps does not care about HTTP sessions anymore. Please set the http session timeout in a different way.
+	 * This will be removed in some future version.
+	 */
+	@Deprecated
+	public int getHttpSessionTimeoutSeconds() {
+		return httpSessionTimeoutSeconds;
+	}
+
+	/**
+	 * @see #httpSessionTimeoutSeconds
+	 * @deprecated TeamApps does not care about HTTP sessions anymore. Please set the http session timeout in a different way.
+	 * This will be removed in some future version.
+	 * The cleanest way to set {@link HttpSession#setMaxInactiveInterval(int)} would be by registering a
+	 * {@link HttpSessionListener}.
+	 * Also note that the {@link HttpSession} is still available via {@link SessionContext#getHttpSession()}.
+	 */
+	@Deprecated
+	public void setHttpSessionTimeoutSeconds(int httpSessionTimeoutSeconds) {
+		this.httpSessionTimeoutSeconds = httpSessionTimeoutSeconds;
+	}
+
+	/**
+	 * @see #commandBufferLength
+	 */
+	public int getCommandBufferLength() {
+		return commandBufferLength;
+	}
+
+	/**
+	 * @see #commandBufferLength
+	 */
+	public void setCommandBufferLength(int commandBufferLength) {
+		this.commandBufferLength = commandBufferLength;
+	}
+
+	/**
+	 * @see #commandBufferTotalSize
+	 */
+	public int getCommandBufferTotalSize() {
+		return commandBufferTotalSize;
+	}
+
+	/**
+	 * @see #commandBufferTotalSize
+	 */
+	public void setCommandBufferTotalSize(int commandBufferTotalSize) {
+		this.commandBufferTotalSize = commandBufferTotalSize;
+	}
+
+	/**
+	 * @see #clientMinRequestedCommands
+	 */
+	public int getClientMinRequestedCommands() {
+		return clientMinRequestedCommands;
+	}
+
+	/**
+	 * @see #clientMinRequestedCommands
+	 */
+	public void setClientMinRequestedCommands(int clientMinRequestedCommands) {
+		this.clientMinRequestedCommands = clientMinRequestedCommands;
+	}
+
+	/**
+	 * @see #clientMaxRequestedCommands
+	 */
+	public int getClientMaxRequestedCommands() {
+		return clientMaxRequestedCommands;
+	}
+
+	/**
+	 * @see #clientMaxRequestedCommands
+	 */
+	public void setClientMaxRequestedCommands(int clientMaxRequestedCommands) {
+		this.clientMaxRequestedCommands = clientMaxRequestedCommands;
+	}
+
+	/**
+	 * @see #clientEventsBufferSize
+	 */
+	public int getClientEventsBufferSize() {
+		return clientEventsBufferSize;
+	}
+
+	/**
+	 * @see #clientEventsBufferSize
+	 */
+	public void setClientEventsBufferSize(int clientEventsBufferSize) {
+		this.clientEventsBufferSize = clientEventsBufferSize;
+	}
+
+	/**
+	 * @see #maxUiClientMessageSize
+	 */
+	public int getMaxUiClientMessageSize() {
+		return maxUiClientMessageSize;
+	}
+
+	/**
+	 * @see #maxUiClientMessageSize
+	 */
+	public void setMaxUiClientMessageSize(int maxUiClientMessageSize) {
+		this.maxUiClientMessageSize = maxUiClientMessageSize;
+	}
+
+	/**
+	 * @see #uploadDirectory
+	 */
+	public File getUploadDirectory() {
+		return uploadDirectory;
+	}
+
+	/**
+	 * @see #uploadDirectory
+	 */
+	public void setUploadDirectory(File uploadDirectory) {
+		this.uploadDirectory = uploadDirectory;
+	}
+
+	/**
+	 * @see #maxNumberOfSessionExecutorThreads
+	 */
+	public int getMaxNumberOfSessionExecutorThreads() {
+		return maxNumberOfSessionExecutorThreads;
+	}
+
+	/**
+	 * @see #maxNumberOfSessionExecutorThreads
+	 */
+	public void setMaxNumberOfSessionExecutorThreads(int maxNumberOfSessionExecutorThreads) {
+		this.maxNumberOfSessionExecutorThreads = maxNumberOfSessionExecutorThreads;
+	}
+
+	public String getNavigationPathPrefix() {
+		return navigationPathPrefix;
+	}
+
+	public void setNavigationPathPrefix(String navigationPathPrefix) {
+		this.navigationPathPrefix = navigationPathPrefix;
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/core/TeamAppsCore.java b/teamapps-ux/src/main/java/org/teamapps/core/TeamAppsCore.java
new file mode 100644
index 000000000..a1cd87cba
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/core/TeamAppsCore.java
@@ -0,0 +1,86 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.core;
+
+import com.fasterxml.jackson.databind.ObjectMapper;
+import org.teamapps.config.TeamAppsConfiguration;
+import org.teamapps.icons.IconLibraryRegistry;
+import org.teamapps.icons.IconProvider;
+import org.teamapps.json.TeamAppsObjectMapperFactory;
+import org.teamapps.uisession.TeamAppsSessionManager;
+import org.teamapps.util.threading.SequentialExecutorFactory;
+import org.teamapps.ux.servlet.WebSocketCommunicationEndpoint;
+import org.teamapps.webcontroller.WebController;
+
+public class TeamAppsCore {
+
+	private final TeamAppsConfiguration config;
+	private final WebController webController;
+	private final ObjectMapper objectMapper;
+	private final TeamAppsSessionManager sessionManager;
+	private final IconLibraryRegistry iconLibraryRegistry;
+	private final TeamAppsUploadManager uploadManager;
+	private final IconProvider iconProvider;
+	private final WebSocketCommunicationEndpoint webSocketCommunicationEndpoint;
+
+	public TeamAppsCore(TeamAppsConfiguration config, SequentialExecutorFactory sessionExecutorFactory, WebController webController) {
+		this.config = config;
+		this.webController = webController;
+		this.objectMapper = TeamAppsObjectMapperFactory.create();
+		this.iconLibraryRegistry = new IconLibraryRegistry();
+		this.uploadManager = new TeamAppsUploadManager();
+
+		this.iconProvider = new IconProvider(iconLibraryRegistry);
+		this.sessionManager = new TeamAppsSessionManager(config, objectMapper, sessionExecutorFactory, webController, iconProvider, uploadManager);
+		this.webSocketCommunicationEndpoint = new WebSocketCommunicationEndpoint(sessionManager, config);
+	}
+
+	public TeamAppsConfiguration getConfig() {
+		return config;
+	}
+
+	public WebController getWebController() {
+		return webController;
+	}
+
+	public ObjectMapper getObjectMapper() {
+		return objectMapper;
+	}
+
+	public TeamAppsSessionManager getSessionManager() {
+		return sessionManager;
+	}
+
+	public IconLibraryRegistry getIconLibraryRegistry() {
+		return iconLibraryRegistry;
+	}
+
+	public IconProvider getIconProvider() {
+		return iconProvider;
+	}
+
+	public TeamAppsUploadManager getUploadManager() {
+		return uploadManager;
+	}
+
+	public WebSocketCommunicationEndpoint getWebSocketCommunicationEndpoint() {
+		return webSocketCommunicationEndpoint;
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/session/SimpleSessionStore.java b/teamapps-ux/src/main/java/org/teamapps/core/TeamAppsUploadManager.java
similarity index 63%
rename from teamapps-ux/src/main/java/org/teamapps/ux/session/SimpleSessionStore.java
rename to teamapps-ux/src/main/java/org/teamapps/core/TeamAppsUploadManager.java
index 8eb8deb44..3c695caac 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/session/SimpleSessionStore.java
+++ b/teamapps-ux/src/main/java/org/teamapps/core/TeamAppsUploadManager.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,22 +17,22 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-package org.teamapps.ux.session;
+package org.teamapps.core;
 
-import java.util.HashMap;
+import java.io.File;
 import java.util.Map;
+import java.util.concurrent.ConcurrentHashMap;
 
-public class SimpleSessionStore implements SessionStore {
+public class TeamAppsUploadManager {
 
-	private Map<String, Object> store = new HashMap<>();
+	private final Map<String, File> uploadedFilesByUuid = new ConcurrentHashMap<>();
 
-	@Override
-	public Object getSessionValue(String uniqueKey) {
-		return store.get(uniqueKey);
+	public void addUploadedFile(File file, String uuid) {
+		this.uploadedFilesByUuid.put(uuid, file);
 	}
 
-	@Override
-	public void setSessionValue(String uniqueKey, Object value) {
-		store.put(uniqueKey, value);
+	public File getUploadedFile(String uuid) {
+		return this.uploadedFilesByUuid.get(uuid);
 	}
+
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/data/Coercor.java b/teamapps-ux/src/main/java/org/teamapps/data/Coercor.java
index c727ea27f..03df9b011 100644
--- a/teamapps-ux/src/main/java/org/teamapps/data/Coercor.java
+++ b/teamapps-ux/src/main/java/org/teamapps/data/Coercor.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/data/extract/BeanPropertyExtractor.java b/teamapps-ux/src/main/java/org/teamapps/data/extract/BeanPropertyExtractor.java
index 7b07e26f2..ad0f30a95 100644
--- a/teamapps-ux/src/main/java/org/teamapps/data/extract/BeanPropertyExtractor.java
+++ b/teamapps-ux/src/main/java/org/teamapps/data/extract/BeanPropertyExtractor.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -23,6 +23,7 @@
 import org.slf4j.LoggerFactory;
 import org.teamapps.util.ReflectionUtil;
 
+import java.lang.reflect.Field;
 import java.lang.reflect.Method;
 import java.util.HashMap;
 import java.util.Map;
@@ -31,41 +32,55 @@
 public class BeanPropertyExtractor<RECORD> implements PropertyExtractor<RECORD> {
 
 	private static final Logger LOGGER = LoggerFactory.getLogger(BeanPropertyExtractor.class);
-	private static final Map<ClassAndPropertyName, ValueExtractor> gettersByClassAndPropertyName = new ConcurrentHashMap<>();
+	private static final Map<ClassAndPropertyName, ValueExtractor> valueExtractorsByClassAndPropertyName = new ConcurrentHashMap<>();
 
-	private final Map<String, ValueExtractor<RECORD>> customExtractors = new HashMap<>(0);
+	private final Map<String, ValueExtractor<RECORD, ?>> customExtractors = new HashMap<>(0);
+	private final boolean fallbackToFields;
+
+	public BeanPropertyExtractor() {
+		this(false);
+	}
+
+	public BeanPropertyExtractor(boolean fallbackToFields) {
+		this.fallbackToFields = fallbackToFields;
+	}
 
 	@Override
 	public Object getValue(RECORD record, String propertyName) {
-		ValueExtractor<RECORD> valueExtractor = getValueExtractor(record.getClass(), propertyName);
+		ValueExtractor<RECORD, ?> valueExtractor = getValueExtractor(record.getClass(), propertyName);
 		return valueExtractor.extract(record);
 	}
 
-	protected ValueExtractor<RECORD> getValueExtractor(Class clazz, String propertyName) {
-		ValueExtractor<RECORD> valueExtractor = customExtractors.get(propertyName);
+	protected ValueExtractor<RECORD, ?> getValueExtractor(Class clazz, String propertyName) {
+		ValueExtractor<RECORD, ?> valueExtractor = customExtractors.get(propertyName);
 		if (valueExtractor != null) {
 			return valueExtractor;
 		} else {
-			return gettersByClassAndPropertyName.computeIfAbsent(
-					new ClassAndPropertyName(clazz, propertyName),
+			return valueExtractorsByClassAndPropertyName.computeIfAbsent(
+					new ClassAndPropertyName(clazz, propertyName, fallbackToFields),
 					classAndPropertyName -> createValueExtractor(classAndPropertyName)
 			);
 		}
 	}
 
-	private ValueExtractor<RECORD> createValueExtractor(ClassAndPropertyName classAndPropertyName) {
+	private ValueExtractor<RECORD, ?> createValueExtractor(ClassAndPropertyName classAndPropertyName) {
 		Method getter = ReflectionUtil.findGetter(classAndPropertyName.clazz, classAndPropertyName.propertyName);
-		return (record) -> {
-			if (getter !=null) {
-				return ReflectionUtil.invokeMethod(record, getter);
-			} else {
-				LOGGER.debug("Could not find getter for property {} on class {}!", classAndPropertyName.propertyName, record.getClass().getCanonicalName());
-				return null;
+		Method recordGetter = ReflectionUtil.findMethodByName(classAndPropertyName.clazz, classAndPropertyName.propertyName);
+		if (getter != null) {
+			return record -> ReflectionUtil.invokeMethod(record, getter);
+		} else if (recordGetter != null) {
+			return record -> ReflectionUtil.invokeMethod(record, recordGetter);
+		} else if (fallbackToFields) {
+			Field field = ReflectionUtil.findField(classAndPropertyName.clazz, classAndPropertyName.propertyName);
+			if (field != null) {
+				return record -> ReflectionUtil.readField(record, field, true);
 			}
-		};
+		}
+		LOGGER.debug("Could not find getter " + (fallbackToFields ? "or field " : "") + "for property {} on class {}!", classAndPropertyName.propertyName, classAndPropertyName.getClass().getCanonicalName());
+		return record -> null;
 	}
 
-	public BeanPropertyExtractor<RECORD> addProperty(String propertyName, ValueExtractor<RECORD> valueExtractor) {
+	public BeanPropertyExtractor<RECORD> addProperty(String propertyName, ValueExtractor<RECORD, ?> valueExtractor) {
 		this.customExtractors.put(propertyName, valueExtractor);
 		return this;
 	}
diff --git a/teamapps-ux/src/main/java/org/teamapps/data/extract/BeanPropertyInjector.java b/teamapps-ux/src/main/java/org/teamapps/data/extract/BeanPropertyInjector.java
index d6442bdf2..7ec443f7b 100644
--- a/teamapps-ux/src/main/java/org/teamapps/data/extract/BeanPropertyInjector.java
+++ b/teamapps-ux/src/main/java/org/teamapps/data/extract/BeanPropertyInjector.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,12 +19,13 @@
  */
 package org.teamapps.data.extract;
 
-import org.jetbrains.annotations.NotNull;
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
 import org.teamapps.util.ReflectionUtil;
 
+import java.lang.reflect.Field;
 import java.lang.reflect.Method;
+import java.lang.reflect.Modifier;
 import java.util.HashMap;
 import java.util.Map;
 import java.util.concurrent.ConcurrentHashMap;
@@ -35,6 +36,15 @@ public class BeanPropertyInjector<RECORD> implements PropertyInjector<RECORD> {
 	private static final Map<ClassAndPropertyName, ValueInjector> settersByClassAndPropertyName = new ConcurrentHashMap<>();
 
 	private final Map<String, ValueInjector> customInjectors = new HashMap<>(0);
+	private final boolean fallbackToFields;
+
+	public BeanPropertyInjector() {
+		this(false);
+	}
+
+	public BeanPropertyInjector(boolean fallbackToFields) {
+		this.fallbackToFields = fallbackToFields;
+	}
 
 	@Override
 	public void setValue(RECORD record, String propertyName, Object value) {
@@ -48,21 +58,24 @@ private ValueInjector getValueInjector(Class clazz, String propertyName) {
 			return ValueInjector;
 		} else {
 			return settersByClassAndPropertyName.computeIfAbsent(
-					new ClassAndPropertyName(clazz, propertyName),
+					new ClassAndPropertyName(clazz, propertyName, fallbackToFields),
 					classAndPropertyName -> createValueInjector(classAndPropertyName)
 			);
 		}
 	}
 
-	@NotNull
 	private ValueInjector<RECORD, ?> createValueInjector(ClassAndPropertyName classAndPropertyName) {
 		Method setter = ReflectionUtil.findSetter(classAndPropertyName.clazz, classAndPropertyName.propertyName);
-		return (record, value) -> {
-			if (setter !=null) {
-				ReflectionUtil.invokeMethod(record, setter, value);
-			} else {
-				LOGGER.debug("Could not find setter for property {} on class {}!", classAndPropertyName.propertyName, record.getClass().getCanonicalName());
+		if (setter != null) {
+			return (record, value) -> ReflectionUtil.invokeMethod(record, setter, value);
+		} else if (fallbackToFields) {
+			Field field = ReflectionUtil.findField(classAndPropertyName.clazz, classAndPropertyName.propertyName);
+			if (field != null && !Modifier.isFinal(field.getModifiers())) {
+				return (record, value) -> ReflectionUtil.setField(record, field, value, true);
 			}
+		}
+		LOGGER.debug("Could not find setter or field for property {} on class {}!", classAndPropertyName.propertyName, classAndPropertyName.getClass().getCanonicalName());
+		return (record, value) -> {
 		};
 	}
 
diff --git a/teamapps-ux/src/main/java/org/teamapps/data/extract/ClassAndPropertyName.java b/teamapps-ux/src/main/java/org/teamapps/data/extract/ClassAndPropertyName.java
index 4776bb6e8..ff6181ed9 100644
--- a/teamapps-ux/src/main/java/org/teamapps/data/extract/ClassAndPropertyName.java
+++ b/teamapps-ux/src/main/java/org/teamapps/data/extract/ClassAndPropertyName.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,36 +19,29 @@
  */
 package org.teamapps.data.extract;
 
+import java.util.Objects;
+
 class ClassAndPropertyName {
-	final Class clazz;
+	final Class<?> clazz;
 	final String propertyName;
+	final boolean fallbackToFields;
 
-	public ClassAndPropertyName(Class clazz, String propertyName) {
+	public ClassAndPropertyName(Class<?> clazz, String propertyName, boolean fallbackToFields) {
 		this.clazz = clazz;
 		this.propertyName = propertyName;
+		this.fallbackToFields = fallbackToFields;
 	}
 
 	@Override
 	public boolean equals(Object o) {
-		if (this == o) {
-			return true;
-		}
-		if (o == null || getClass() != o.getClass()) {
-			return false;
-		}
-
+		if (this == o) return true;
+		if (o == null || getClass() != o.getClass()) return false;
 		ClassAndPropertyName that = (ClassAndPropertyName) o;
-
-		if (!clazz.equals(that.clazz)) {
-			return false;
-		}
-		return propertyName.equals(that.propertyName);
+		return fallbackToFields == that.fallbackToFields && Objects.equals(clazz, that.clazz) && Objects.equals(propertyName, that.propertyName);
 	}
 
 	@Override
 	public int hashCode() {
-		int result = clazz.hashCode();
-		result = 31 * result + propertyName.hashCode();
-		return result;
+		return Objects.hash(clazz, propertyName, fallbackToFields);
 	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/data/extract/PropertyBijector.java b/teamapps-ux/src/main/java/org/teamapps/data/extract/PropertyBijector.java
index d67596995..cda7ded21 100644
--- a/teamapps-ux/src/main/java/org/teamapps/data/extract/PropertyBijector.java
+++ b/teamapps-ux/src/main/java/org/teamapps/data/extract/PropertyBijector.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/data/extract/PropertyExtractor.java b/teamapps-ux/src/main/java/org/teamapps/data/extract/PropertyExtractor.java
index 602bcd095..3fb18fb05 100644
--- a/teamapps-ux/src/main/java/org/teamapps/data/extract/PropertyExtractor.java
+++ b/teamapps-ux/src/main/java/org/teamapps/data/extract/PropertyExtractor.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -23,7 +23,7 @@
 import java.util.HashMap;
 import java.util.Map;
 
-public interface PropertyExtractor<RECORD> {
+public interface PropertyExtractor<RECORD> extends PropertyProvider<RECORD> {
 
 	Object getValue(RECORD record, String propertyName);
 
diff --git a/teamapps-ux/src/main/java/org/teamapps/data/extract/PropertyInjector.java b/teamapps-ux/src/main/java/org/teamapps/data/extract/PropertyInjector.java
index a51b7b40d..d399b9dd3 100644
--- a/teamapps-ux/src/main/java/org/teamapps/data/extract/PropertyInjector.java
+++ b/teamapps-ux/src/main/java/org/teamapps/data/extract/PropertyInjector.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/data/extract/PropertyProvider.java b/teamapps-ux/src/main/java/org/teamapps/data/extract/PropertyProvider.java
index c886f8551..3dc089e1b 100644
--- a/teamapps-ux/src/main/java/org/teamapps/data/extract/PropertyProvider.java
+++ b/teamapps-ux/src/main/java/org/teamapps/data/extract/PropertyProvider.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,143 +19,11 @@
  */
 package org.teamapps.data.extract;
 
-import org.apache.commons.lang3.StringUtils;
-
-import java.time.Instant;
-import java.time.LocalDateTime;
-import java.time.ZoneOffset;
-import java.util.HashMap;
-import java.util.List;
+import java.util.Collection;
 import java.util.Map;
-import java.util.function.Function;
-import java.util.stream.Collectors;
-
-public class PropertyProvider<RECORD> implements PropertyExtractor<RECORD> {
-
-	private Map<String, EntityProperty<RECORD>> propertyByName = new HashMap<>();
-	private Map<String, EntityProperty<RECORD>> propertyByCaption = new HashMap<>();
-
-	private Map<String, ValueExtractor<RECORD>> valueExtractorByPropertyName = new HashMap<>();
-	private Map<String, Function<RECORD, Instant>> instantExtractorProvider = new HashMap<>();
-
-
-	private BeanPropertyExtractor beanPropertyExtractor;
-
-	public PropertyProvider() {
-		this(true);
-	}
-
-	public PropertyProvider(boolean useBeanPropertyExtractorFallback) {
-		if (useBeanPropertyExtractorFallback) {
-			beanPropertyExtractor = new BeanPropertyExtractor();
-		}
-	}
-
-	public void addProperty(String propertyName, String caption, ValueExtractor<RECORD> valueExtractor) {
-		EntityProperty property = new EntityProperty(propertyName, caption, valueExtractor);
-		propertyByName.put(propertyName, property);
-		propertyByCaption.put(caption, property);
-	}
-
-	@Override
-	public Object getValue(RECORD record, String propertyName) {
-		ValueExtractor<RECORD> extractor = getExtractor(record, propertyName);
-		if (extractor != null) {
-			return extractor.extract(record);
-		}
-		return null;
-	}
-	public Instant getInstantValue(RECORD record, String propertyName) {
-		Function<RECORD, Instant> instantExtractor = getInstantExtractor(record, propertyName);
-		if (instantExtractor != null) {
-			return instantExtractor.apply(record);
-		}
-		return null;
-	}
-
-	private ValueExtractor<RECORD> getExtractor(RECORD record, String propertyName) {
-		ValueExtractor<RECORD> valueExtractor = valueExtractorByPropertyName.get(propertyName);
-		if (valueExtractor != null) {
-			return valueExtractor;
-		}
-		EntityProperty<RECORD> property = propertyByName.get(propertyName);
-		if (property != null) {
-			valueExtractor = property.getValueExtractor();
-		} else if (beanPropertyExtractor != null) {
-			valueExtractor = beanPropertyExtractor.getValueExtractor(record.getClass(), propertyName);
-		}
-		if (valueExtractor != null) {
-			valueExtractorByPropertyName.put(propertyName, valueExtractor);
-		}
-		return valueExtractor;
-	}
-
-	private Function<RECORD, Instant> getInstantExtractor(RECORD record, String propertyName) {
-		Function<RECORD, Instant> instantExtractorFunction = instantExtractorProvider.get(propertyName);
-		if (instantExtractorFunction != null) {
-			return instantExtractorFunction;
-		}
-		ValueExtractor<RECORD> extractor = getExtractor(record, propertyName);
-		if (extractor == null) {
-			return null;
-		}
-		if (record.getClass().isAssignableFrom(Instant.class)) {
-			instantExtractorFunction = rec -> (Instant) extractor.extract(rec);
-		} else if (record.getClass().isAssignableFrom(Long.class)) {
-			instantExtractorFunction = rec -> {
-				Long value = (Long) extractor.extract(rec);
-				return value == null ? null : Instant.ofEpochMilli(value);
-			};
-		} else if (record.getClass().isAssignableFrom(Integer.class)) {
-			instantExtractorFunction = rec -> {
-				Integer value = (Integer) extractor.extract(rec);
-				return value == null ? null : Instant.ofEpochSecond(value);
-			};
-		} else if (record.getClass().isAssignableFrom(LocalDateTime.class)) {
-			instantExtractorFunction = rec -> {
-				LocalDateTime value = (LocalDateTime) extractor.extract(rec);
-				return value == null ? null : value.toInstant(ZoneOffset.UTC);
-			};
-		}
-		if (instantExtractorFunction != null) {
-			instantExtractorProvider.put(propertyName,instantExtractorFunction);
-		}
-		return instantExtractorFunction;
-	}
-
-	public List<String> getPropertyNamesByCaptionQuery(String query) {
-		if (StringUtils.isBlank(query)) {
-			return propertyByName.values().stream()
-					.map(property -> property.getName())
-					.collect(Collectors.toList());
-		}
-		return propertyByName.values().stream()
-				.filter(property -> property.getCaption() != null && property.getCaption().toLowerCase().startsWith(query.toLowerCase()))
-				.map(property -> property.getName())
-				.collect(Collectors.toList());
-	}
-
-	public static class EntityProperty<RECORD> {
-		private String name;
-		private String caption;
-		private ValueExtractor<RECORD> valueExtractor;
-
-		public EntityProperty(String name, String caption, ValueExtractor<RECORD> valueExtractor) {
-			this.name = name;
-			this.caption = caption;
-			this.valueExtractor = valueExtractor;
-		}
 
-		public String getName() {
-			return name;
-		}
+public interface PropertyProvider<RECORD> {
 
-		public String getCaption() {
-			return caption;
-		}
+	Map<String, Object> getValues(RECORD record, Collection<String> propertyNames);
 
-		public ValueExtractor<RECORD> getValueExtractor() {
-			return valueExtractor;
-		}
-	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/data/extract/ValueExtractor.java b/teamapps-ux/src/main/java/org/teamapps/data/extract/ValueExtractor.java
index 076b8bfa7..3c4f2a3bb 100644
--- a/teamapps-ux/src/main/java/org/teamapps/data/extract/ValueExtractor.java
+++ b/teamapps-ux/src/main/java/org/teamapps/data/extract/ValueExtractor.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,8 +19,8 @@
  */
 package org.teamapps.data.extract;
 
-public interface ValueExtractor<RECORD> {
+public interface ValueExtractor<RECORD, VALUE> {
 
-	Object extract(RECORD object);
+	VALUE extract(RECORD object);
 
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/data/extract/ValueInjector.java b/teamapps-ux/src/main/java/org/teamapps/data/extract/ValueInjector.java
index 6103cf17d..76fdca813 100644
--- a/teamapps-ux/src/main/java/org/teamapps/data/extract/ValueInjector.java
+++ b/teamapps-ux/src/main/java/org/teamapps/data/extract/ValueInjector.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/data/value/DataRecord.java b/teamapps-ux/src/main/java/org/teamapps/data/value/DataRecord.java
deleted file mode 100644
index 36f6b6e37..000000000
--- a/teamapps-ux/src/main/java/org/teamapps/data/value/DataRecord.java
+++ /dev/null
@@ -1,77 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.data.value;
-
-import com.fasterxml.jackson.annotation.JsonAnyGetter;
-import com.fasterxml.jackson.annotation.JsonIgnore;
-
-import java.util.List;
-import java.util.Map;
-import java.util.stream.Collectors;
-
-/**
- * @deprecated will get removed soon
- */
-@Deprecated
-public interface DataRecord {
-
-	@JsonIgnore
-	List<String> getPropertyNames();
-
-	Object getValue(String propertyName);
-
-	@JsonIgnore
-	default boolean getBooleanValue(String key) {
-		Object value = getValue(key);
-		return value != null && (boolean) value;
-	}
-
-	@JsonIgnore
-	default int getIntValue(String key) {
-		Object value = getValue(key);
-		return value != null ? ((Number) value).intValue() : 0;
-	}
-
-	@JsonIgnore
-	default long getLongValue(String key) {
-		Object value = getValue(key);
-		return value != null ? ((Number) value).longValue() : 0;
-	}
-
-	@JsonIgnore
-	default double getDoubleValue(String key) {
-		Object value = getValue(key);
-		return value != null ? ((Number) value).doubleValue() : 0;
-	}
-
-	@JsonIgnore
-	default String getStringValue(String key) {
-		return (String) getValue(key);
-	}
-
-
-	@JsonAnyGetter
-	default Map<String, Object> getAllValuesAsMap() {
-		return getPropertyNames().stream()
-				.filter(pn -> getValue(pn) != null)
-				.collect(Collectors.toMap(name -> name, this::getValue));
-	}
-
-}
diff --git a/teamapps-ux/src/main/java/org/teamapps/data/value/SimpleDataRecord.java b/teamapps-ux/src/main/java/org/teamapps/data/value/SimpleDataRecord.java
deleted file mode 100644
index 7d641280b..000000000
--- a/teamapps-ux/src/main/java/org/teamapps/data/value/SimpleDataRecord.java
+++ /dev/null
@@ -1,79 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.data.value;
-
-import java.util.ArrayList;
-import java.util.HashMap;
-import java.util.List;
-import java.util.Map;
-import java.util.stream.Collectors;
-
-/**
- * @deprecated will be removed soon
- */
-@Deprecated
-public class SimpleDataRecord implements MutableDataRecord {
-
-	private Map<String, Object> values = new HashMap<>();
-
-	public SimpleDataRecord() {
-	}
-
-	public SimpleDataRecord(String key, Object value) {
-		setValue(key, value);
-	}
-
-	public SimpleDataRecord(Map<String, Object> values) {
-		this.values = values;
-	}
-
-	public SimpleDataRecord(DataRecord record) {
-		if (record != null) {
-			this.values.putAll(record.getPropertyNames().stream()
-					.collect(Collectors.toMap(key -> key, record::getValue)));
-		}
-	}
-
-	public SimpleDataRecord setValue(String key, Object value) {
-		values.put(key, value);
-		return this;
-	}
-
-	// TODO #pojo @mb setValueIfPresent() ?
-
-	@Override
-	public Object getValue(String key) {
-		return values.get(key);
-	}
-
-	@Override
-	public List<String> getPropertyNames() {
-		return new ArrayList<>(values.keySet());
-	}
-
-	@Override
-	public String toString() {
-		StringBuilder sb = new StringBuilder();
-		values.keySet().stream().forEach(key -> {
-			sb.append(values.get(key).toString()).append("; ");
-		});
-		return sb.toString();
-	}
-}
diff --git a/teamapps-ux/src/main/java/org/teamapps/data/value/SortDirection.java b/teamapps-ux/src/main/java/org/teamapps/data/value/SortDirection.java
index ba661200a..cb7f1ca21 100644
--- a/teamapps-ux/src/main/java/org/teamapps/data/value/SortDirection.java
+++ b/teamapps-ux/src/main/java/org/teamapps/data/value/SortDirection.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/data/value/Sorting.java b/teamapps-ux/src/main/java/org/teamapps/data/value/Sorting.java
index 68dfec4c3..a62c2ca07 100644
--- a/teamapps-ux/src/main/java/org/teamapps/data/value/Sorting.java
+++ b/teamapps-ux/src/main/java/org/teamapps/data/value/Sorting.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,26 +19,30 @@
  */
 package org.teamapps.data.value;
 
+import java.util.Objects;
+
 public class Sorting {
 
 	private final String fieldName;
-	private final SortDirection sorting;
+	private final SortDirection sortDirection;
 
-	public Sorting(String fieldName, SortDirection sorting) {
+	public Sorting(String fieldName, SortDirection sortDirection) {
+		Objects.requireNonNull(fieldName, "fieldName must not be null!");
+		Objects.requireNonNull(fieldName, "sortDirection must not be null!");
 		this.fieldName = fieldName;
-		this.sorting = sorting;
+		this.sortDirection = sortDirection;
 	}
 
 	public String getFieldName() {
 		return fieldName;
 	}
 
-	public SortDirection getSorting() {
-		return sorting;
+	public SortDirection getSortDirection() {
+		return sortDirection;
 	}
 
 	public boolean isSorted() {
-		if (sorting != null && fieldName !=null && !fieldName.isEmpty()) {
+		if (sortDirection != null && fieldName !=null && !fieldName.isEmpty()) {
 			return true;
 		}
 		return false;
@@ -58,13 +62,13 @@ public boolean equals(Object o) {
 		if (fieldName != null ? !fieldName.equals(sorting1.fieldName) : sorting1.fieldName != null) {
 			return false;
 		}
-		return sorting == sorting1.sorting;
+		return sortDirection == sorting1.sortDirection;
 	}
 
 	@Override
 	public int hashCode() {
 		int result = fieldName != null ? fieldName.hashCode() : 0;
-		result = 31 * result + (sorting != null ? sorting.hashCode() : 0);
+		result = 31 * result + (sortDirection != null ? sortDirection.hashCode() : 0);
 		return result;
 	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/data/value/filter/AndFilter.java b/teamapps-ux/src/main/java/org/teamapps/data/value/filter/AndFilter.java
deleted file mode 100644
index 972346a14..000000000
--- a/teamapps-ux/src/main/java/org/teamapps/data/value/filter/AndFilter.java
+++ /dev/null
@@ -1,80 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.data.value.filter;
-
-import org.teamapps.data.value.DataRecord;
-
-import java.util.ArrayList;
-import java.util.List;
-
-public class AndFilter implements Filter {
-
-	private List<Filter> filters = new ArrayList<>();
-
-	public AndFilter() {
-
-	}
-
-	public AndFilter(Filter filterA, Filter filterB) {
-		filters.add(filterA);
-		filters.add(filterB);
-	}
-
-	@Override
-	public FilterType getType() {
-		return FilterType.AND;
-	}
-
-	@Override
-	public String getProperty() {
-		return null;
-	}
-
-	@Override
-	public boolean matches(DataRecord record, boolean treatNullAsDefaultValue) {
-		for (Filter filter : filters) {
-			if (!filter.matches(record, treatNullAsDefaultValue)) {
-				return false;
-			}
-		}
-		return true;
-	}
-
-	@Override
-	public String explain(int filterLevel) {
-		StringBuilder sb = new StringBuilder();
-		sb.append(createLevelIndentString(filterLevel));
-		sb.append("AND(").append("\n");
-		for (Filter filter : filters) {
-			sb.append(filter.explain(filterLevel + 1));
-		}
-		sb.append(createLevelIndentString(filterLevel));
-		sb.append(")").append("\n");
-		return sb.toString();
-	}
-
-	@Override
-	public Filter and(Filter filter) {
-		if (filter != null) {
-			filters.add(filter);
-		}
-		return this;
-	}
-}
diff --git a/teamapps-ux/src/main/java/org/teamapps/data/value/filter/BooleanFilter.java b/teamapps-ux/src/main/java/org/teamapps/data/value/filter/BooleanFilter.java
deleted file mode 100644
index 77a19db9c..000000000
--- a/teamapps-ux/src/main/java/org/teamapps/data/value/filter/BooleanFilter.java
+++ /dev/null
@@ -1,62 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.data.value.filter;
-
-import org.teamapps.data.value.DataRecord;
-
-import java.util.Objects;
-
-public class BooleanFilter extends AbstractFilter {
-
-	private final boolean value;
-
-	public BooleanFilter(String property, boolean value) {
-		super(property);
-		this.value = value;
-	}
-
-	@Override
-	public FilterType getType() {
-		return FilterType.BOOLEAN;
-	}
-
-	@Override
-	public boolean matches(DataRecord record, boolean treatNullAsDefaultValue) {
-		Object recordValue = record.getValue(getProperty());
-		if (recordValue == null) {
-			if (treatNullAsDefaultValue) {
-				return !value;
-			} else {
-				return false;
-			}
-		}
-		return Objects.equals(value, recordValue);
-	}
-
-	@Override
-	public String explain(int filterLevel) {
-		return createLevelIndentString(filterLevel) + "BOOLEAN: " + getProperty() + " = " + value + "\n";
-	}
-
-
-	public Boolean getValue() {
-		return value;
-	}
-}
diff --git a/teamapps-ux/src/main/java/org/teamapps/data/value/filter/Filter.java b/teamapps-ux/src/main/java/org/teamapps/data/value/filter/Filter.java
deleted file mode 100644
index 199f6ef23..000000000
--- a/teamapps-ux/src/main/java/org/teamapps/data/value/filter/Filter.java
+++ /dev/null
@@ -1,228 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.data.value.filter;
-
-import org.teamapps.data.value.DataRecord;
-import org.teamapps.data.value.Limit;
-import org.teamapps.data.value.SortDirection;
-import org.teamapps.data.value.Sorting;
-
-import java.util.Collections;
-import java.util.Comparator;
-import java.util.List;
-import java.util.stream.Collectors;
-
-public interface Filter {
-
-	FilterType getType();
-
-	String getProperty();
-
-	default boolean matches(DataRecord record) {
-		return matches(record, true);
-	}
-
-	boolean matches(DataRecord record, boolean treatNullAsDefaultValue);
-
-
-	default String explain() {
-		return explain(0);
-	}
-
-	String explain(int filterLevel);
-
-	default String createLevelIndentString(int level) {
-		StringBuilder sb = new StringBuilder();
-		for (int i = 0; i < level; i++) {
-			sb.append("\t");
-		}
-		return sb.toString();
-	}
-
-	default Filter and(Filter filter) {
-		if (filter == null) {
-			return this;
-		}
-		return new AndFilter(this, filter);
-	}
-
-	default Filter or(Filter filter) {
-		if (filter == null) {
-			return this;
-		}
-		return new OrFilter(this, filter);
-	}
-
-	default Filter asOrFilter() {
-		return new OrFilter(this);
-	}
-
-	static Filter allMatchingFilter() {
-		return new AllMatchingFilter();
-	}
-
-	static Filter booleanFilter(String property, boolean value) {
-		return new BooleanFilter(property, value);
-	}
-
-	static Filter numericEqual(String property, double value) {
-		return new NumericFilter(property, value, NumericFilter.Comparator.EQUAL);
-	}
-
-	static Filter numericUnEqual(String property, double value) {
-		return new NumericFilter(property, value, NumericFilter.Comparator.UNEQUAL);
-	}
-
-	static Filter numericSmaller(String property, double value) {
-		return new NumericFilter(property, value, NumericFilter.Comparator.SMALLER);
-	}
-
-	static Filter numericSmallerOrEqual(String property, double value) {
-		return new NumericFilter(property, value, NumericFilter.Comparator.SMALLER_OR_EQUAL);
-	}
-
-	static Filter numericGreater(String property, double value) {
-		return new NumericFilter(property, value, NumericFilter.Comparator.GREATER);
-	}
-
-	static Filter numericGreaterOrEqual(String property, double value) {
-		return new NumericFilter(property, value, NumericFilter.Comparator.GREATER_OR_EQUAL);
-	}
-
-	static Filter numericRangeBetween(String property, double start, double end) {
-		return new NumericRangeFilter(property, start, end, NumericRangeFilter.Comparator.BETWEEN);
-	}
-
-	static Filter numericRangeBetweenInclusive(String property, double start, double end) {
-		return new NumericRangeFilter(property, start, end, NumericRangeFilter.Comparator.BETWEEN_INCLUSIVE);
-	}
-
-	static Filter numericRangeOutside(String property, double start, double end) {
-		return new NumericRangeFilter(property, start, end, NumericRangeFilter.Comparator.OUTSIDE);
-	}
-
-	static Filter numericRangeOutsideInclusive(String property, double start, double end) {
-		return new NumericRangeFilter(property, start, end, NumericRangeFilter.Comparator.OUTSIDE_INCLUSIVE);
-	}
-
-	static Filter idValueEqual(String property, Object value) {
-		return new IdValueFilter(property, value, IdValueFilter.Comparator.EQUAL);
-	}
-
-	static Filter idValueUnEqual(String property, Object value) {
-		return new IdValueFilter(property, value, IdValueFilter.Comparator.UNEQUAL);
-	}
-
-	static Filter idValueSmaller(String property, Object value) {
-		return new IdValueFilter(property, value, IdValueFilter.Comparator.SMALLER);
-	}
-
-	static Filter idValueSmallerOrEqual(String property, Object value) {
-		return new IdValueFilter(property, value, IdValueFilter.Comparator.SMALLER_OR_EQUAL);
-	}
-
-	static Filter idValueGreater(String property, Object value) {
-		return new IdValueFilter(property, value, IdValueFilter.Comparator.GREATER);
-	}
-
-	static Filter idValueGreaterOrEqual(String property, Object value) {
-		return new IdValueFilter(property, value, IdValueFilter.Comparator.GREATER_OR_EQUAL);
-	}
-
-	static Filter textEqual(String property, String value) {
-		return new TextFilter(property, value, TextFilter.Comparator.EQUAL);
-	}
-
-	static Filter textUnequal(String property, String value) {
-		return new TextFilter(property, value, TextFilter.Comparator.UNEQUAL);
-	}
-
-	static Filter textStartsWith(String property, String value) {
-		return new TextFilter(property, value, TextFilter.Comparator.STARTS_WITH);
-	}
-
-	static Filter textStartsNotWith(String property, String value) {
-		return new TextFilter(property, value, TextFilter.Comparator.STARTS_NOT_WITH);
-	}
-
-	static Filter textWildcard(String property, String value) {
-		return new TextFilter(property, value, TextFilter.Comparator.WILDCARD);
-	}
-
-	static Filter textUnequalWildcard(String property, String value) {
-		return new TextFilter(property, value, TextFilter.Comparator.UNEQUAL_WILDCARD);
-	}
-
-	static Filter textFuzzy(String property, String value) {
-		return new TextFilter(property, value, TextFilter.Comparator.FUZZY);
-	}
-
-	static Filter textUnequalFuzzy(String property, String value) {
-		return new TextFilter(property, value, TextFilter.Comparator.UNEQUAL_FUZZY);
-	}
-
-	static Filter rawFullTextFilter(String value) {
-		return new FullTextFilter(value);
-	}
-
-	static <T extends DataRecord> List<T> filterRecords(List<T> records, Filter filter) {
-		return records.stream()
-				.filter(record -> filter.matches(record))
-				.collect(Collectors.toList());
-	}
-
-	static <T extends DataRecord> List<T> sortRecords(List<T> records, Sorting sorting) {
-		if (sorting != null && sorting.getFieldName() != null) {
-			String fieldName = sorting.getFieldName();
-			Comparator<String> stringComparator = Comparator.nullsFirst(String::compareToIgnoreCase);
-			List<T> sortedRecords = records.stream()
-					.sorted((o1, o2) -> stringComparator.compare(extractString(o1, fieldName), extractString(o2, fieldName)))
-					.collect(Collectors.toList());
-			if (sorting.getSorting() == SortDirection.DESC) {
-				Collections.reverse(sortedRecords);
-			}
-			return sortedRecords;
-		} else {
-			return records;
-		}
-	}
-
-	static String extractString(DataRecord o, String fieldName) {
-		if (o == null || o.getValue(fieldName) == null) {
-			return null;
-		} else {
-			return o.getValue(fieldName).toString();
-		}
-	}
-
-
-	static <T extends DataRecord> List<T> limitRecords(List<T> records, Limit limit) {
-		if (limit != null) {
-			return records.subList(limit.getStartIndex(), Math.min(records.size(), limit.getLength() + limit.getStartIndex()));
-		} else {
-			return records;
-		}
-	}
-
-	static <T extends DataRecord> List<T> queryRecords(List<T> records, Filter query, Sorting sorting, Limit limit) {
-		return limitRecords(sortRecords(filterRecords(records, query), sorting), limit);
-	}
-
-}
diff --git a/teamapps-ux/src/main/java/org/teamapps/data/value/filter/FullTextFilter.java b/teamapps-ux/src/main/java/org/teamapps/data/value/filter/FullTextFilter.java
deleted file mode 100644
index 8103d09af..000000000
--- a/teamapps-ux/src/main/java/org/teamapps/data/value/filter/FullTextFilter.java
+++ /dev/null
@@ -1,202 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.data.value.filter;
-
-import org.apache.commons.lang3.NotImplementedException;
-import org.teamapps.data.value.DataRecord;
-
-import java.util.List;
-import java.util.Map;
-import java.util.stream.Collectors;
-
-public class FullTextFilter implements Filter {
-
-	private String value;
-
-	public FullTextFilter(String value) {
-		this.value = value;
-	}
-
-	@Override
-	public FilterType getType() {
-		return FilterType.FULL_TEXT;
-	}
-
-	@Override
-	public String getProperty() {
-		return null;
-	}
-
-	@Override
-	public boolean matches(DataRecord record, boolean treatNullAsDefaultValue) {
-		if (value == null || value.isEmpty()) {
-			return true;
-		}
-		List<String> keys = matchKeys(record.getPropertyNames());
-		String compareValue = getValue().toLowerCase();
-		boolean isExactSearch = isExactSearch(compareValue);
-		boolean isFuzzySearch = isFuzzySearch(compareValue);
-		boolean isWildcardSearch = isWildcardSearch(compareValue);
-		String wildcardMatcher = createWildcardMatcher(compareValue);
-
-		compareValue = cleanValue(compareValue);
-		for (String key : keys) {
-			Object value = record.getValue(key);
-			if (value != null && value.toString() != null) {
-				String stringValue = value.toString().toLowerCase();
-				if (isFuzzySearch) {
-					if (matchFuzzy(stringValue, compareValue)) {
-						return true;
-					}
-				} else if (isExactSearch) {
-					if (stringValue.equals(compareValue)) {
-						return true;
-					}
-				} else if (isWildcardSearch) {
-					if (stringValue.matches(wildcardMatcher)) {
-						return true;
-					}
-				} else {
-					if (stringValue.contains(compareValue)) {
-						return true;
-					}
-				}
-			}
-		}
-		return false;
-	}
-
-	@Override
-	public String explain(int filterLevel) {
-		return createLevelIndentString(filterLevel) + "FULL-TEXT: " + " " + value + "\n";
-	}
-
-
-	private boolean isExactSearch(String value) {
-		if (value.startsWith("\"") || value.startsWith("'")) {
-			return true;
-		}
-		return false;
-	}
-
-	private String cleanValue(String value) {
-		if (value.endsWith("+")) {
-			int len = 1;
-			if (value.endsWith("++")) {
-				len = 2;
-			}
-			value = value.substring(0, value.length() - len);
-		}
-		value = value.replace("\"", "");
-		value = value.replace("'", "");
-		return value;
-	}
-
-	private boolean isFuzzySearch(String value) {
-		if (value.endsWith("+")) {
-			return true;
-		} else {
-			return false;
-		}
-	}
-
-	private boolean matchFuzzy(String val1, String val2) {
-		// int ratio = FuzzySearch.ratio(val1, val2);
-		// if (ratio > 50) {
-		// 	return true;
-		// } else {
-		// 	return false;
-		// }
-		throw new NotImplementedException("matchFuzzy");
-	}
-
-	private boolean isWildcardSearch(String value) {
-		if (value.contains("*") || value.contains("?")) {
-			return true;
-		} else {
-			return false;
-		}
-	}
-
-	private String createWildcardMatcher(String value) {
-		StringBuilder out = new StringBuilder("^");
-		for(int i = 0; i < value.length(); ++i) {
-			final char c = value.charAt(i);
-			switch(c) {
-				case '*': out.append(".*"); break;
-				case '?': out.append('.'); break;
-				case '.': out.append("\\."); break;
-				case '\\': out.append("\\\\"); break;
-				default: out.append(c);
-			}
-		}
-		out.append(".*$");
-		return out.toString();
-	}
-
-	private String getFieldMatcher() {
-		int pos = value.indexOf(':');
-		if (pos <= 0) {
-			return null;
-		}
-		return value.substring(0, pos).toLowerCase();
-	}
-
-	private String getValue() {
-		int pos = value.indexOf(':');
-		if (pos <= 0) {
-			return value;
-		}
-		return value.substring(pos +1);
-	}
-
-	private List<String> matchKeys(List<String> keys) {
-		int pos = value.indexOf(':');
-		if (pos <= 0) {
-			return keys;
-		}
-		String matcher = value.substring(0, pos).toLowerCase();
-		return keys.stream().filter(key -> key.toLowerCase().contains(matcher)).collect(Collectors.toList());
-	}
-
-	public Filter parseSearch(List<String> fieldNames, Map<String, String> captionsByFieldName) { //missing field type
-		if (value == null || value.isEmpty()) {
-			return null;
-		}
-		// [field-caption-part][:][! | NOT]["|']text-part[?][*]text-part[+][+]["|'] [=,>,<,!=,] [value] [OR |][AND &] ...
-
-		//Filter.textEqual("a").and(Filter.textStartsWith())
-
-
-		return null;
-	}
-
-	private static class AndOrPart {
-		private String query;
-		private boolean isOr;
-	}
-
-	public static void main(String[] args) {
-		String a = "test:gg";
-		int pos = a.indexOf(':');
-		System.out.println(a.substring(0, pos));
-		System.out.println(a.substring(pos));
-	}
-}
diff --git a/teamapps-ux/src/main/java/org/teamapps/data/value/filter/IdValueFilter.java b/teamapps-ux/src/main/java/org/teamapps/data/value/filter/IdValueFilter.java
deleted file mode 100644
index f4cc294e6..000000000
--- a/teamapps-ux/src/main/java/org/teamapps/data/value/filter/IdValueFilter.java
+++ /dev/null
@@ -1,102 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.data.value.filter;
-
-import org.teamapps.data.value.DataRecord;
-
-import java.util.Objects;
-
-public class IdValueFilter extends AbstractFilter {
-
-	private final Object value;
-	private final Comparator comparator;
-
-	public enum Comparator {
-		EQUAL, UNEQUAL, SMALLER, SMALLER_OR_EQUAL, GREATER, GREATER_OR_EQUAL
-	}
-
-	public IdValueFilter(String property, Object value, Comparator comparator) {
-		super(property);
-		this.value = value;
-		this.comparator = comparator;
-	}
-
-	@Override
-	public FilterType getType() {
-		return FilterType.ID_VALUE;
-	}
-
-	@Override
-	public boolean matches(DataRecord record, boolean treatNullAsDefaultValue) {
-		Number recordValue = (Number) record.getValue(getProperty());
-		long matchValue = 0;
-		if (recordValue != null) {
-			matchValue = recordValue.longValue();
-		}
-		if (!treatNullAsDefaultValue && recordValue == null) {
-			return false;
-		}
-		switch (comparator) {
-			case EQUAL:
-				return matchEqual(recordValue, treatNullAsDefaultValue);
-			case UNEQUAL:
-				return !matchEqual(recordValue, treatNullAsDefaultValue);
-			case SMALLER:
-				return matchValue < ((Number) value).longValue();
-			case SMALLER_OR_EQUAL:
-				return matchValue <= ((Number) value).longValue();
-			case GREATER:
-				return matchValue > ((Number) value).longValue();
-			case GREATER_OR_EQUAL:
-				return matchValue >= ((Number) value).longValue();
-		}
-		return false;
-	}
-
-	private boolean matchEqual(Object recordValue, boolean treatNullAsDefaultValue) {
-		if (recordValue == null) {
-			if (treatNullAsDefaultValue) {
-				if (value == null) { // || value.isDefaultValue()) { // TODO #pojo @mb
-					return true;
-				} else {
-					return false;
-				}
-			} else {
-				return false;
-			}
-		}
-		return Objects.equals(recordValue, value);
-	}
-
-	@Override
-	public String explain(int filterLevel) {
-		return createLevelIndentString(filterLevel) + "ID-VALUE: " + getProperty() + " " + comparator.name() + " " + value + "\n";
-	}
-
-	public Object getValue() {
-		return value;
-	}
-
-	public Comparator getComparator() {
-		return comparator;
-	}
-
-
-}
diff --git a/teamapps-ux/src/main/java/org/teamapps/data/value/filter/NumericFilter.java b/teamapps-ux/src/main/java/org/teamapps/data/value/filter/NumericFilter.java
deleted file mode 100644
index 5fd372afb..000000000
--- a/teamapps-ux/src/main/java/org/teamapps/data/value/filter/NumericFilter.java
+++ /dev/null
@@ -1,92 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.data.value.filter;
-
-import org.teamapps.data.value.DataRecord;
-
-public class NumericFilter extends AbstractFilter  {
-
-	private final double value;
-	private final Comparator comparator;
-
-	public enum Comparator {
-		EQUAL, UNEQUAL, SMALLER, SMALLER_OR_EQUAL, GREATER, GREATER_OR_EQUAL
-	}
-
-	public NumericFilter(String property, double value, Comparator comparator) {
-		super(property);
-		this.value = value;
-		this.comparator = comparator;
-	}
-
-	@Override
-	public FilterType getType() {
-		return FilterType.NUMERIC;
-	}
-
-	@Override
-	public boolean matches(DataRecord record, boolean treatNullAsDefaultValue) {
-		Number recordValue = (Number) record.getValue(getProperty());
-		double matchValue = 0;
-		if (recordValue != null) {
-			matchValue = recordValue.doubleValue();
-		}
-		if (!treatNullAsDefaultValue && recordValue == null) {
-			return false;
-		}
-		switch (comparator) {
-			case EQUAL:
-				return matchValue == value;
-			case UNEQUAL:
-				return matchValue != value;
-			case SMALLER:
-				return matchValue < value;
-			case SMALLER_OR_EQUAL:
-				return matchValue <= value;
-			case GREATER:
-				return matchValue > value;
-			case GREATER_OR_EQUAL:
-				return matchValue >= value;
-		}
-		return false;
-	}
-
-	@Override
-	public String explain(int filterLevel) {
-		return createLevelIndentString(filterLevel) + "NUMERIC: " + getProperty() + " " + comparator.name() + " " + String.format("%1.2f" , value) + "\n";
-	}
-
-
-	public Double getValue() {
-		return value;
-	}
-
-	public Comparator getComparator() {
-		return comparator;
-	}
-
-	public int getValueAsInt() {
-		return new Double(value).intValue();
-	}
-
-	public long getValueAsLong() {
-		return new Double(value).longValue();
-	}
-}
diff --git a/teamapps-ux/src/main/java/org/teamapps/data/value/filter/NumericRangeFilter.java b/teamapps-ux/src/main/java/org/teamapps/data/value/filter/NumericRangeFilter.java
deleted file mode 100644
index 1ef2c20a2..000000000
--- a/teamapps-ux/src/main/java/org/teamapps/data/value/filter/NumericRangeFilter.java
+++ /dev/null
@@ -1,87 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.data.value.filter;
-
-import org.teamapps.data.value.DataRecord;
-
-public class NumericRangeFilter extends AbstractFilter  {
-
-	private final Double start;
-	private final Double end;
-	private final Comparator comparator;
-
-	public enum Comparator {
-		BETWEEN, BETWEEN_INCLUSIVE, OUTSIDE, OUTSIDE_INCLUSIVE
-	}
-
-	public NumericRangeFilter(String property, Double start, Double end, Comparator comparator) {
-		super(property);
-		this.start = start;
-		this.end = end;
-		this.comparator = comparator;
-	}
-
-	@Override
-	public FilterType getType() {
-		return FilterType.NUMERIC_RANGE;
-	}
-
-	@Override
-	public boolean matches(DataRecord record, boolean treatNullAsDefaultValue) {
-		Number recordValue = (Number) record.getValue(getProperty());
-		double value = 0;
-		if (recordValue != null) {
-			value = recordValue.doubleValue();
-		}
-		if (!treatNullAsDefaultValue && recordValue == null) {
-			return false;
-		}
-		switch (comparator) {
-			case BETWEEN:
-				return value > start && value < end;
-			case BETWEEN_INCLUSIVE:
-				break;
-			case OUTSIDE:
-				break;
-			case OUTSIDE_INCLUSIVE:
-				break;
-		}
-		return false;
-	}
-
-	@Override
-	public String explain(int filterLevel) {
-		return createLevelIndentString(filterLevel) + "NUMERIC-RANGE: " + getProperty() + " " + comparator.name() + " " + String.format("%1.2f" , start) + " AND " + String.format("%1.2f" , end) + "\n";
-	}
-
-
-	public Double getStart() {
-		return start;
-	}
-
-	public Double getEnd() {
-		return end;
-	}
-
-	public Comparator getComparator() {
-		return comparator;
-	}
-
-}
diff --git a/teamapps-ux/src/main/java/org/teamapps/data/value/filter/OrFilter.java b/teamapps-ux/src/main/java/org/teamapps/data/value/filter/OrFilter.java
deleted file mode 100644
index 807412d9c..000000000
--- a/teamapps-ux/src/main/java/org/teamapps/data/value/filter/OrFilter.java
+++ /dev/null
@@ -1,87 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.data.value.filter;
-
-import org.teamapps.data.value.DataRecord;
-
-import java.util.ArrayList;
-import java.util.List;
-
-public class OrFilter implements Filter {
-
-	private List<Filter> filters = new ArrayList<>();
-
-	public OrFilter() {
-
-	}
-
-	public OrFilter(Filter filter) {
-		filters.add(filter);
-	}
-
-	public OrFilter(Filter filterA, Filter filterB) {
-		filters.add(filterA);
-		filters.add(filterB);
-	}
-
-	@Override
-	public FilterType getType() {
-		return FilterType.OR;
-	}
-
-	@Override
-	public boolean matches(DataRecord record, boolean treatNullAsDefaultValue) {
-		for (Filter filter : filters) {
-			if (filter.matches(record, treatNullAsDefaultValue)) {
-				return true;
-			}
-		}
-		if (filters.isEmpty()) {
-			return true;
-		}
-		return false;
-	}
-
-	@Override
-	public String explain(int filterLevel) {
-		StringBuilder sb = new StringBuilder();
-		sb.append(createLevelIndentString(filterLevel));
-		sb.append("OR(").append("\n");
-		for (Filter filter : filters) {
-			sb.append(filter.explain(filterLevel + 1));
-		}
-		sb.append(createLevelIndentString(filterLevel));
-		sb.append(")").append("\n");
-		return sb.toString();
-	}
-
-	@Override
-	public String getProperty() {
-		return null;
-	}
-
-	@Override
-	public Filter or(Filter filter) {
-		if (filter != null) {
-			filters.add(filter);
-		}
-		return this;
-	}
-}
diff --git a/teamapps-ux/src/main/java/org/teamapps/data/value/filter/TextFilter.java b/teamapps-ux/src/main/java/org/teamapps/data/value/filter/TextFilter.java
deleted file mode 100644
index 4da2c0767..000000000
--- a/teamapps-ux/src/main/java/org/teamapps/data/value/filter/TextFilter.java
+++ /dev/null
@@ -1,118 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.data.value.filter;
-
-import org.apache.commons.lang3.NotImplementedException;
-import org.teamapps.data.value.DataRecord;
-
-import java.util.Objects;
-
-public class TextFilter extends AbstractFilter {
-
-	private final String value;
-	private final Comparator comparator;
-
-	public enum Comparator {
-		EQUAL, UNEQUAL, STARTS_WITH, STARTS_NOT_WITH, WILDCARD, UNEQUAL_WILDCARD, FUZZY, UNEQUAL_FUZZY
-	}
-
-	public TextFilter(String property, String value, Comparator comparator) {
-		super(property);
-		this.value = value;
-		this.comparator = comparator;
-	}
-
-	@Override
-	public FilterType getType() {
-		return FilterType.TEXT;
-	}
-
-	@Override
-	public boolean matches(DataRecord record, boolean treatNullAsDefaultValue) {
-		Object recordValue = record.getValue(getProperty());
-		String matchValue = "";
-		if (recordValue != null) {
-			matchValue = recordValue.toString();
-		}
-		if (!treatNullAsDefaultValue && recordValue == null) {
-			return false;
-		}
-		switch (comparator) {
-			case EQUAL:
-				return Objects.equals(matchValue, value);
-			case UNEQUAL:
-				return !Objects.equals(matchValue, value);
-			case STARTS_WITH:
-				return matchValue.startsWith(value);
-			case STARTS_NOT_WITH:
-				return !matchValue.startsWith(value);
-			case WILDCARD:
-				return matchValue.matches(createMatchingRegex(value));
-			case UNEQUAL_WILDCARD:
-				return !matchValue.matches(createMatchingRegex(value));
-			case FUZZY:
-				throw new NotImplementedException(Comparator.FUZZY.name());
-				// int ratio = FuzzySearch.ratio(matchValue, value);
-				// if (ratio > 80) {
-				// 	return true;
-				// } else {
-				// 	return false;
-				// }
-			case UNEQUAL_FUZZY:
-				throw new NotImplementedException(Comparator.UNEQUAL_FUZZY.name());
-				// int ratio2 = FuzzySearch.ratio(matchValue, value);
-				// if (ratio2 < 80) {
-				// 	return true;
-				// } else {
-				// 	return false;
-				// }
-		}
-		return false;
-	}
-
-	private static String createMatchingRegex(String value) {
-		StringBuilder out = new StringBuilder("^");
-		for(int i = 0; i < value.length(); ++i) {
-			final char c = value.charAt(i);
-			switch(c) {
-				case '*': out.append(".*"); break;
-				case '?': out.append('.'); break;
-				case '.': out.append("\\."); break;
-				case '\\': out.append("\\\\"); break;
-				default: out.append(c);
-			}
-		}
-		out.append('$');
-		return out.toString();
-	}
-
-	@Override
-	public String explain(int filterLevel) {
-		return createLevelIndentString(filterLevel) + "TEXT: " + getProperty() + " " + comparator.name() + " " + value + "\n";
-	}
-
-	public String getValue() {
-		return value;
-	}
-
-	public Comparator getComparator() {
-		return comparator;
-	}
-}
diff --git a/teamapps-ux/src/main/java/org/teamapps/databinding/DataBindings.java b/teamapps-ux/src/main/java/org/teamapps/databinding/DataBindings.java
index 3dfce2023..21629f858 100644
--- a/teamapps-ux/src/main/java/org/teamapps/databinding/DataBindings.java
+++ b/teamapps-ux/src/main/java/org/teamapps/databinding/DataBindings.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -135,5 +135,6 @@ public static <T> void bindTwoWays(TwoWayBindableValue<T> bindable1, TwoWayBinda
 		NonRecursiveEventListenerBuilder nonRecursiveEventListenerBuilder = new NonRecursiveEventListenerBuilder();
 		bindable1.onChanged().addListener(nonRecursiveEventListenerBuilder.create(aVoid -> bindable2.set(bindable1.get())));
 		bindable2.onChanged().addListener(nonRecursiveEventListenerBuilder.create(aVoid -> bindable1.set(bindable2.get())));
+		bindable2.set(bindable1.get());
 	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/databinding/MutableValue.java b/teamapps-ux/src/main/java/org/teamapps/databinding/MutableValue.java
index 215423d52..45c5c3753 100644
--- a/teamapps-ux/src/main/java/org/teamapps/databinding/MutableValue.java
+++ b/teamapps-ux/src/main/java/org/teamapps/databinding/MutableValue.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -31,7 +31,7 @@ default void bindReadingFrom(ObservableValue<T> observableValue) {
 		DataBindings.bindOneWay(observableValue, this);
 	}
 
-	static <T> MutableValue<T> from(Consumer<T> setter) {
+	static <T> MutableValue<T> writingTo(Consumer<T> setter) {
 		return DataBindings.createMutableValue(setter);
 	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/databinding/NonRecursiveEventListenerBuilder.java b/teamapps-ux/src/main/java/org/teamapps/databinding/NonRecursiveEventListenerBuilder.java
index b364be424..95729af9d 100644
--- a/teamapps-ux/src/main/java/org/teamapps/databinding/NonRecursiveEventListenerBuilder.java
+++ b/teamapps-ux/src/main/java/org/teamapps/databinding/NonRecursiveEventListenerBuilder.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,14 +19,12 @@
  */
 package org.teamapps.databinding;
 
-import org.teamapps.event.EventListener;
-
 import java.util.function.Consumer;
 
 public class NonRecursiveEventListenerBuilder {
 	private final ThreadLocal<Boolean> processing = new ThreadLocal<>();
 
-	public <EVENT_DATA> EventListener<EVENT_DATA> create(Consumer<EVENT_DATA> handler) {
+	public <EVENT_DATA> Consumer<EVENT_DATA> create(Consumer<EVENT_DATA> handler) {
 		return (eventData) -> {
 			if (!isAlreadyProcessing()) {
 				processing.set(true);
diff --git a/teamapps-ux/src/main/java/org/teamapps/databinding/ObservableSessionValue.java b/teamapps-ux/src/main/java/org/teamapps/databinding/ObservableSessionValue.java
index 54a2f4552..a8c538254 100644
--- a/teamapps-ux/src/main/java/org/teamapps/databinding/ObservableSessionValue.java
+++ b/teamapps-ux/src/main/java/org/teamapps/databinding/ObservableSessionValue.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -20,7 +20,8 @@
 package org.teamapps.databinding;
 
 import org.teamapps.event.Event;
-import org.teamapps.event.EventListener;
+
+import java.util.function.Consumer;
 
 public class ObservableSessionValue<T> {
 
@@ -62,19 +63,19 @@ public T get() {
 		return value;
 	}
 
-	public void addOnChangeListener(EventListener<T> listener) {
+	public void addOnChangeListener(Consumer<T> listener) {
 		onChanged.addListener(listener);
 	}
 
-	public void removeOnChangeListener(EventListener<T> listener) {
+	public void removeOnChangeListener(Consumer<T> listener) {
 		onChanged.removeListener(listener);
 	}
 
-	public void addOnBeforeChangeListener(EventListener<T> listener) {
+	public void addOnBeforeChangeListener(Consumer<T> listener) {
 		onBeforeChanged.addListener(listener);
 	}
 
-	public void removeBeforeOnChangeListener(EventListener<T> listener) {
+	public void removeBeforeOnChangeListener(Consumer<T> listener) {
 		onBeforeChanged.removeListener(listener);
 	}
 
diff --git a/teamapps-ux/src/main/java/org/teamapps/databinding/ObservableValue.java b/teamapps-ux/src/main/java/org/teamapps/databinding/ObservableValue.java
index ed0a3f9d8..689a9e9a9 100644
--- a/teamapps-ux/src/main/java/org/teamapps/databinding/ObservableValue.java
+++ b/teamapps-ux/src/main/java/org/teamapps/databinding/ObservableValue.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -21,6 +21,9 @@
 
 import org.teamapps.event.Event;
 
+import java.util.Objects;
+import java.util.function.Supplier;
+
 public interface ObservableValue<T> {
 
 	Event<T> onChanged();
@@ -29,6 +32,10 @@ public interface ObservableValue<T> {
 
 	// ------- utility -------
 
+	default boolean valueEquals(T other) {
+		return Objects.equals(get(), other);
+	}
+
 	default void bindWritingTo(MutableValue<T> mutableValue) {
 		DataBindings.bindOneWay(this, mutableValue);
 	}
@@ -37,6 +44,19 @@ default void bindWritingTo(MutableValue<T> mutableValue) {
 //		return DataBindings.createObservableValue(onChanged(), () -> null);
 //	}
 
+	// === static ===
+
+	public static <T> ObservableValue<T> fromEmptyEvent(Event<?> changeEvent, Supplier<T> provider) {
+		return DataBindings.createObservableValueWithEmptyEvent(changeEvent, provider);
+	}
+
+	public static <T> ObservableValue<T> fromEvent(Event<T> changeEvent, Supplier<T> provider) {
+		return DataBindings.createObservableValue(changeEvent, provider);
+	}
+	public static <T> ObservableValue<T> fromCachedEventValues(Event<T> changeEvent) {
+		return DataBindings.createObservableValue(changeEvent);
+	}
+
 //	static <T> ObservableValue<T> from(Event<?> changeEvent, Supplier<T> provider) {
 //		return DataBindings.createObservableValue(changeEvent, provider);
 //	}
diff --git a/teamapps-ux/src/main/java/org/teamapps/databinding/TwoWayBindableValue.java b/teamapps-ux/src/main/java/org/teamapps/databinding/TwoWayBindableValue.java
index 995594cb6..bc183f739 100644
--- a/teamapps-ux/src/main/java/org/teamapps/databinding/TwoWayBindableValue.java
+++ b/teamapps-ux/src/main/java/org/teamapps/databinding/TwoWayBindableValue.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,6 +19,11 @@
  */
 package org.teamapps.databinding;
 
+import org.teamapps.event.Event;
+
+import java.util.function.Consumer;
+import java.util.function.Supplier;
+
 public interface TwoWayBindableValue<T> extends ObservableValue<T>, MutableValue<T> {
 
 	// ------- utility -------
@@ -26,4 +31,22 @@ public interface TwoWayBindableValue<T> extends ObservableValue<T>, MutableValue
 	default void bindTwoWays(TwoWayBindableValue<T> other) {
 		DataBindings.bindTwoWays(this, other);
 	}
+
+	// === static ===
+
+	static <T> TwoWayBindableValue<T> create() {
+		return new TwoWayBindableValueImpl<>();
+	}
+
+	static <T> TwoWayBindableValue<T> create(T initialValue) {
+		return new TwoWayBindableValueImpl<>(initialValue);
+	}
+
+	static <T> TwoWayBindableValue<T> create(Event<T> changeEvent, Supplier<T> getter, Consumer<T> setter) {
+		return DataBindings.createTwoWayBindable(changeEvent, getter, setter);
+	}
+
+	static <T> TwoWayBindableValue<T> create(Event<T> changeEvent, Consumer<T> setter) {
+		return DataBindings.createTwoWayBindable(changeEvent, setter);
+	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/databinding/TwoWayBindableValueImpl.java b/teamapps-ux/src/main/java/org/teamapps/databinding/TwoWayBindableValueImpl.java
index 16f6d3c54..893ca8a7a 100644
--- a/teamapps-ux/src/main/java/org/teamapps/databinding/TwoWayBindableValueImpl.java
+++ b/teamapps-ux/src/main/java/org/teamapps/databinding/TwoWayBindableValueImpl.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -47,6 +47,6 @@ public T get() {
 	@Override
 	public void set(T value) {
 		this.value = value;
-		onChanged.fire(value); // if you want to make this only fire when actually changed, be aware that every value class must implement equals in an appropriate way...
+		onChanged.fireIfChanged(value);
 	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/event/DecoupledEvent.java b/teamapps-ux/src/main/java/org/teamapps/event/DecoupledEvent.java
new file mode 100644
index 000000000..93e47a803
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/event/DecoupledEvent.java
@@ -0,0 +1,40 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.event;
+
+import java.util.concurrent.Executor;
+import java.util.function.Consumer;
+
+/**
+ * Forces events to be handled in a different Thread than the firing one.
+ */
+public class DecoupledEvent<EVENT_DATA> extends Event<EVENT_DATA> {
+
+	private final Executor executor;
+
+	public DecoupledEvent(Executor executor) {
+		this.executor = executor;
+	}
+
+	@Override
+	protected void invokeListener(EVENT_DATA eventData, Consumer<EVENT_DATA> listener) {
+		executor.execute(() -> super.invokeListener(eventData, listener));
+	}
+}
diff --git a/teamapps-icon/src/main/java/org/teamapps/icons/api/IconType.java b/teamapps-ux/src/main/java/org/teamapps/event/Disposable.java
similarity index 86%
rename from teamapps-icon/src/main/java/org/teamapps/icons/api/IconType.java
rename to teamapps-ux/src/main/java/org/teamapps/event/Disposable.java
index 5f31f9840..0c8312739 100644
--- a/teamapps-icon/src/main/java/org/teamapps/icons/api/IconType.java
+++ b/teamapps-ux/src/main/java/org/teamapps/event/Disposable.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,11 +17,10 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-package org.teamapps.icons.api;
+package org.teamapps.event;
 
-public enum IconType {
+public interface Disposable {
 
-    PNG,
-    SVG,
+	void dispose();
 
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/event/Event.java b/teamapps-ux/src/main/java/org/teamapps/event/Event.java
index b70df30d3..b82347e54 100644
--- a/teamapps-ux/src/main/java/org/teamapps/event/Event.java
+++ b/teamapps-ux/src/main/java/org/teamapps/event/Event.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -28,36 +28,108 @@
 import java.util.List;
 import java.util.Objects;
 import java.util.concurrent.CopyOnWriteArrayList;
+import java.util.concurrent.atomic.AtomicReference;
+import java.util.function.Consumer;
 import java.util.function.Function;
 
+/**
+ * Represents an event that can get fired.
+ * <p>
+ * Listeners can be added to this event using the various {@link #addListener(Consumer) addListener(...)} methods.
+ * <p>
+ * <h2>SessionContext-bound Event Listeners</h2>
+ * Note that if a listener <code>L</code> is added while the thread is bound to a {@link SessionContext} <code>A</code> (so while {@link SessionContext#currentOrNull()} is not null),
+ * <code>L</code>'s execution will be bound to <code>A</code> by default, i.e.:
+ * <ul>
+ *     <li>When this event fires, the SessionContext-bound listener will get invoked bound to the SessionContext <code>A</code>,
+ *     regardless of the SessionContext (or the lack of it) the event was fired in.</li>
+ *     <li>When the SessionContext <code>A</code> is destroyed (and thereby fires its {@link SessionContext#onDestroyed} event), the listener is automatically detached from this event.</li>
+ * </ul>
+ * You can prevent a listener from being bound to the current SessionContext,
+ * by using one of the {@link #addListener(Consumer, boolean) addListener(..., boolean bindToSessionContext)} methods.
+ *
+ * @param <EVENT_DATA> The type of data this event fires.
+ */
 public class Event<EVENT_DATA> {
 
 	private static final Logger LOGGER = LoggerFactory.getLogger(Event.class);
+	private final String source; // for debugging
 
-	private List<EventListener<EVENT_DATA>> listeners = new CopyOnWriteArrayList<>();
+	private final List<Consumer<EVENT_DATA>> listeners = new CopyOnWriteArrayList<>();
 	private EVENT_DATA lastEventData;
 
-	public void addListener(EventListener<EVENT_DATA> listener) {
-		SessionContext currentSessionContext = CurrentSessionContext.getOrNull();
-		if (currentSessionContext != null) {
-			// We want listeners to be executed in the same context as they were registered!
-			listeners.add(eventData -> currentSessionContext.runWithContext(() -> listener.onEvent(eventData)));
+	public Event() {
+		StackTraceElement stackTraceElement = new Exception().getStackTrace()[1];
+		this.source = stackTraceElement.getFileName() + stackTraceElement.getLineNumber();
+	}
+
+	public Disposable addListener(Consumer<EVENT_DATA> listener) {
+		return addListener(listener, true);
+	}
+
+	public Disposable addListener(Consumer<EVENT_DATA> listener, boolean bindToSessionContext) {
+		SessionContext currentSessionContext;
+		if (bindToSessionContext && (currentSessionContext = CurrentSessionContext.getOrNull()) != null) {
+			listeners.add(new SessionContextAwareEventListener<>(currentSessionContext, listener));
 			removeWhenSessionDestroyed(listener, currentSessionContext);
 		} else {
+			// just add the listener. It will get called with whatever context is active at firing time
 			listeners.add(listener);
 		}
+		return () -> removeListener(listener);
+	}
+
+	public Disposable addListener(SelfDisposingEventListener<EVENT_DATA> listener) {
+		return addListener(listener, true);
+	}
+
+	public Disposable addListener(SelfDisposingEventListener<EVENT_DATA> listener, boolean bindToSessionContext) {
+		AtomicReference<Disposable> disposable = new AtomicReference<>();
+		disposable.set(addListener(e -> {
+			listener.handle(e, disposable.get());
+		}, bindToSessionContext));
+		return disposable.get();
+	}
+
+	public Disposable addListener(Runnable listener) {
+		return addListener(listener, true);
+	}
+
+	public Disposable addListener(Runnable listener, boolean bindToSessionContext) {
+		return addListener(new RunnableWrapper<>(listener), bindToSessionContext);
+	}
+
+	List<Consumer<EVENT_DATA>> getListeners() {
+		return listeners;
+	}
+
+	/**
+	 * @deprecated Use the {@link Disposable} returned by {@link #addListener(Runnable)} instead!
+	 */
+	@Deprecated
+	public void removeListener(Runnable listener) {
+		removeListener(new RunnableWrapper<>(listener));
+	}
+
+	/**
+	 * @deprecated Use the {@link Disposable} returned by {@link #addListener(Consumer)} instead!
+	 */
+	@Deprecated
+	public void removeListener(Consumer<EVENT_DATA> listener) {
+		listeners.remove(listener); // in case it is not bound to a session
+		listeners.remove(new SessionContextAwareEventListener<>(listener));
 	}
 
 	/**
 	 * When the session gets destroyed, remove this listener (preventing memory-leaks and degrading performance due to stale listeners).
 	 */
-	private void removeWhenSessionDestroyed(EventListener<EVENT_DATA> listener, SessionContext currentSessionContext) {
-		if (this != currentSessionContext.onDestroyed()) { // prevent infinite recursion!
+	private void removeWhenSessionDestroyed(Consumer<EVENT_DATA> listener, SessionContext currentSessionContext) {
+		if (this != currentSessionContext.onDestroyed) { // prevent infinite recursion!
 			// use a weak reference here, so the fact that this is registered to the sessionContext's destroyed event
 			// does not mean it has to survive (not being garbage collected) as long as the session context.
-			WeakReference<EventListener<EVENT_DATA>> listenerWeakReference = new WeakReference<>(listener);
-			currentSessionContext.onDestroyed().listeners.add(aVoid -> {
-				EventListener<EVENT_DATA> l = listenerWeakReference.get();
+			WeakReference<Consumer<EVENT_DATA>> listenerWeakReference = new WeakReference<>(listener);
+			currentSessionContext.onDestroyed.listeners.add(aVoid -> {
+				Consumer<EVENT_DATA> l = listenerWeakReference.get();
 				if (l != null) {
 					removeListener(l);
 				}
@@ -65,17 +137,35 @@ private void removeWhenSessionDestroyed(EventListener<EVENT_DATA> listener, Sess
 		}
 	}
 
-	public void removeListener(EventListener<EVENT_DATA> listener) {
-		listeners.remove(listener);
+	public void fire(EVENT_DATA eventData) {
+		this.lastEventData = eventData;
+		for (Consumer<EVENT_DATA> listener : listeners) {
+			invokeListener(eventData, listener);
+		}
 	}
 
-	public void fire(EVENT_DATA eventData) {
+	public void fireIgnoringExceptions(EVENT_DATA eventData) {
 		this.lastEventData = eventData;
-		for (EventListener<EVENT_DATA> listener : listeners) {
-			listener.onEvent(eventData);
+		for (Consumer<EVENT_DATA> listener : listeners) {
+			try {
+				invokeListener(eventData, listener);
+			} catch (Exception e) {
+				LOGGER.error("Error while calling event handler. Ignoring exception.", e);
+			}
 		}
 	}
 
+	/**
+	 * May get overridden.
+	 */
+	protected void invokeListener(EVENT_DATA eventData, Consumer<EVENT_DATA> listener) {
+		listener.accept(eventData);
+	}
+
+	public void fire() {
+		fire(null);
+	}
+
 	public void fireIfChanged(EVENT_DATA eventData) {
 		if (!Objects.equals(lastEventData, eventData)) {
 			fire(eventData);
@@ -88,4 +178,79 @@ public <T> Event<T> converted(Function<EVENT_DATA, T> converter) {
 		return newEvent;
 	}
 
+	private static class SessionContextAwareEventListener<EVENT_DATA> implements Consumer<EVENT_DATA> {
+
+		private final SessionContext sessionContext;
+		private final Consumer<EVENT_DATA> delegate;
+
+		public SessionContextAwareEventListener(SessionContext sessionContext, Consumer<EVENT_DATA> delegate) {
+			this.sessionContext = sessionContext;
+			this.delegate = delegate;
+		}
+
+		public SessionContextAwareEventListener(Consumer<EVENT_DATA> delegate) {
+			this(null, delegate);
+		}
+
+		@Override
+		public void accept(EVENT_DATA eventData) {
+			if (sessionContext != null) {
+				sessionContext.runWithContext(() -> delegate.accept(eventData));
+			} else {
+				delegate.accept(eventData);
+			}
+		}
+
+		@Override
+		public boolean equals(Object o) {
+			if (this == o) {
+				return true;
+			}
+			if (o == null || getClass() != o.getClass()) {
+				return false;
+			}
+
+			SessionContextAwareEventListener<?> that = (SessionContextAwareEventListener<?>) o;
+
+			return delegate != null ? delegate.equals(that.delegate) : that.delegate == null;
+
+		}
+
+		@Override
+		public int hashCode() {
+			return delegate != null ? delegate.hashCode() : 0;
+		}
+	}
+
+	private static class RunnableWrapper<T> implements Consumer<T> {
+
+		private final Runnable runnable;
+
+		public RunnableWrapper(Runnable runnable) {
+			this.runnable = runnable;
+		}
+
+		@Override
+		public void accept(T eventData) {
+			runnable.run();
+		}
+
+		@Override
+		public boolean equals(Object o) {
+			if (this == o) {
+				return true;
+			}
+			if (o == null || getClass() != o.getClass()) {
+				return false;
+			}
+			RunnableWrapper<?> that = (RunnableWrapper<?>) o;
+			return runnable.equals(that.runnable);
+		}
+
+		@Override
+		public int hashCode() {
+			return Objects.hash(runnable);
+		}
+	}
+
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/event/EventListener.java b/teamapps-ux/src/main/java/org/teamapps/event/SelfDisposingEventListener.java
similarity index 84%
rename from teamapps-ux/src/main/java/org/teamapps/event/EventListener.java
rename to teamapps-ux/src/main/java/org/teamapps/event/SelfDisposingEventListener.java
index 8cdd0e887..82f0f3e4a 100644
--- a/teamapps-ux/src/main/java/org/teamapps/event/EventListener.java
+++ b/teamapps-ux/src/main/java/org/teamapps/event/SelfDisposingEventListener.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,8 +19,8 @@
  */
 package org.teamapps.event;
 
-public interface EventListener<EVENT_DATA> {
+public interface SelfDisposingEventListener<E> {
 
-	void onEvent(EVENT_DATA eventData);
+	void handle(E eventData, Disposable disposable);
 
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/formatter/FileSizeFormatter.java b/teamapps-ux/src/main/java/org/teamapps/formatter/FileSizeFormatter.java
index e4ea93388..38c5abb87 100644
--- a/teamapps-ux/src/main/java/org/teamapps/formatter/FileSizeFormatter.java
+++ b/teamapps-ux/src/main/java/org/teamapps/formatter/FileSizeFormatter.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/json/TeamAppsObjectMapperFactory.java b/teamapps-ux/src/main/java/org/teamapps/json/TeamAppsObjectMapperFactory.java
index d3ed6eedb..6c3a171c4 100644
--- a/teamapps-ux/src/main/java/org/teamapps/json/TeamAppsObjectMapperFactory.java
+++ b/teamapps-ux/src/main/java/org/teamapps/json/TeamAppsObjectMapperFactory.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -23,12 +23,14 @@
 import com.fasterxml.jackson.databind.ObjectMapper;
 import com.fasterxml.jackson.databind.SerializationFeature;
 import com.fasterxml.jackson.datatype.jsr310.JavaTimeModule;
+import org.teamapps.ux.json.UxJacksonSerializationTemplate;
 
 public class TeamAppsObjectMapperFactory {
 
 	public static ObjectMapper create() {
 		ObjectMapper objectMapper = new ObjectMapper();
 		objectMapper.registerModule(new JavaTimeModule());
+		objectMapper.registerModule(UxJacksonSerializationTemplate.UX_SERIALIZERS_JACKSON_MODULE);
 		objectMapper.configure(DeserializationFeature.FAIL_ON_UNKNOWN_PROPERTIES, false);
 		objectMapper.configure(DeserializationFeature.READ_DATE_TIMESTAMPS_AS_NANOSECONDS, false);
 		objectMapper.configure(SerializationFeature.WRITE_DATE_TIMESTAMPS_AS_NANOSECONDS, false);
diff --git a/teamapps-ux/src/main/java/org/teamapps/server/CommandDispatcherImpl.java b/teamapps-ux/src/main/java/org/teamapps/server/CommandDispatcherImpl.java
deleted file mode 100644
index 1c72437b9..000000000
--- a/teamapps-ux/src/main/java/org/teamapps/server/CommandDispatcherImpl.java
+++ /dev/null
@@ -1,93 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.server;
-
-import org.slf4j.Logger;
-import org.slf4j.LoggerFactory;
-import org.teamapps.dto.UiCommand;
-import org.teamapps.ux.session.CommandDispatcher;
-import org.teamapps.uisession.QualifiedUiSessionId;
-import org.teamapps.uisession.UiCommandExecutor;
-import org.teamapps.uisession.UiCommandWithResultCallback;
-
-import java.util.ArrayList;
-import java.util.Collections;
-import java.util.List;
-import java.util.function.Consumer;
-import java.util.stream.Collectors;
-
-public class CommandDispatcherImpl implements CommandDispatcher {
-
-	private static final Logger LOGGER = LoggerFactory.getLogger(CommandDispatcherImpl.class);
-
-	private final UiCommandExecutor commandExecutor;
-	private final QualifiedUiSessionId qualifiedUiSessionId;
-	private final List<UiCommandWithResultCallback> uiCommands = Collections.synchronizedList(new ArrayList<>()); // copy on read, see below
-
-	private boolean closed;
-
-	private SessionRecorder sessionRecorder;
-
-	public CommandDispatcherImpl(UiCommandExecutor commandExecutor, QualifiedUiSessionId qualifiedUiSessionId, SessionRecorder sessionRecorder) {
-		this.commandExecutor = commandExecutor;
-		this.qualifiedUiSessionId = qualifiedUiSessionId;
-		this.sessionRecorder = sessionRecorder;
-	}
-
-	@Override
-	public <RESULT> void queueCommand(UiCommand<RESULT> command, Consumer<RESULT> resultCallback) {
-		if (!this.closed) {
-			uiCommands.add(new UiCommandWithResultCallback<>(command, resultCallback));
-		} else {
-			LOGGER.debug("Not queuing command because already closed.");
-		}
-	}
-
-	@Override
-	public void flushCommands() {
-		if (uiCommands.isEmpty()) {
-			return;
-		}
-		if (!this.closed) {
-			ArrayList<UiCommandWithResultCallback> commandsCopy;
-
-			synchronized (uiCommands) {
-				commandsCopy = new ArrayList<>(uiCommands);
-				uiCommands.clear();
-			}
-
-			commandExecutor.sendCommands(qualifiedUiSessionId, commandsCopy);
-
-			if (sessionRecorder != null) {
-				sessionRecorder.recordCommands(commandsCopy.stream()
-						.map(UiCommandWithResultCallback::getUiCommand)
-						.collect(Collectors.toList()));
-			}
-		} else {
-			LOGGER.debug("Not flushing commands because already closed.");
-		}
-	}
-
-	@Override
-	public void close() {
-		this.closed = true;
-		uiCommands.clear();
-	}
-}
diff --git a/teamapps-ux/src/main/java/org/teamapps/server/SessionRecorder.java b/teamapps-ux/src/main/java/org/teamapps/server/SessionRecorder.java
deleted file mode 100644
index 41eb42132..000000000
--- a/teamapps-ux/src/main/java/org/teamapps/server/SessionRecorder.java
+++ /dev/null
@@ -1,52 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.server;
-
-import com.fasterxml.jackson.databind.ObjectMapper;
-import org.teamapps.dto.UiCommand;
-
-import java.io.OutputStream;
-import java.io.OutputStreamWriter;
-import java.io.Writer;
-import java.util.List;
-
-public class SessionRecorder {
-
-	private final ObjectMapper jacksonObjectMapper;
-	private final Writer writer;
-
-	public SessionRecorder(ObjectMapper jacksonObjectMapper, OutputStream outputStream) {
-		this.jacksonObjectMapper = jacksonObjectMapper;
-		this.writer = new OutputStreamWriter(outputStream);
-	}
-
-	public void recordCommands(List<UiCommand> uiCommands) {
-		try {
-			for (UiCommand command : uiCommands) {
-				String commandAsString = jacksonObjectMapper.writeValueAsString(command);
-				writer.write(commandAsString);
-				writer.write("\n");
-				writer.flush();
-			}
-		} catch (Throwable e) {
-			e.printStackTrace();
-		}
-	}
-}
diff --git a/teamapps-ux/src/main/java/org/teamapps/server/SessionResourceProvider.java b/teamapps-ux/src/main/java/org/teamapps/server/SessionResourceProvider.java
deleted file mode 100644
index edad329ff..000000000
--- a/teamapps-ux/src/main/java/org/teamapps/server/SessionResourceProvider.java
+++ /dev/null
@@ -1,73 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.server;
-
-import org.teamapps.uisession.QualifiedUiSessionId;
-import org.teamapps.ux.resource.Resource;
-import org.teamapps.ux.resource.ResourceProvider;
-import org.teamapps.ux.session.SessionContext;
-
-import java.util.function.Function;
-
-public class SessionResourceProvider implements ResourceProvider {
-
-	private final Function<QualifiedUiSessionId, SessionContext> sessionContexts;
-
-	public SessionResourceProvider(Function<QualifiedUiSessionId, SessionContext> sessionContexts) {
-		this.sessionContexts = sessionContexts;
-	}
-
-	private SessionContext getSessionContext(String resource, String httpSessionId) {
-		if (resource == null) {
-			return null;
-		}
-		String[] parts = resource.split("/");
-		QualifiedUiSessionId qualifiedUiSessionId = new QualifiedUiSessionId(httpSessionId, parts[0]);
-		return sessionContexts.apply(qualifiedUiSessionId);
-	}
-
-	private Resource getResource(String resource, String httpSessionId) {
-		try {
-			if (resource == null) {
-				return null;
-			}
-			if (resource.startsWith("/")) {
-				resource = resource.substring(1);
-			}
-			String[] parts = resource.split("/");
-			QualifiedUiSessionId qualifiedUiSessionId = new QualifiedUiSessionId(httpSessionId, parts[0]);
-			SessionContext sessionContext = sessionContexts.apply(qualifiedUiSessionId);
-			if (sessionContext == null) {
-				return null;
-			}
-			int id = Integer.parseInt(parts[1].substring(3));
-			return sessionContext.getBinaryResource(id);
-		} catch (Exception e) {
-			e.printStackTrace();
-		}
-		return null;
-	}
-
-	@Override
-	public Resource getResource(String servletPath, String relativeResourcePath, String httpSessionId) {
-		return getResource(relativeResourcePath, httpSessionId);
-	}
-	
-}
diff --git a/teamapps-ux/src/main/java/org/teamapps/server/UxServerContext.java b/teamapps-ux/src/main/java/org/teamapps/server/UxServerContext.java
index 088c52424..ae5bcaee7 100644
--- a/teamapps-ux/src/main/java/org/teamapps/server/UxServerContext.java
+++ b/teamapps-ux/src/main/java/org/teamapps/server/UxServerContext.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,15 +19,10 @@
  */
 package org.teamapps.server;
 
-import org.teamapps.ux.session.SessionContext;
-import org.teamapps.uisession.QualifiedUiSessionId;
-
 import java.io.File;
 
 public interface UxServerContext {
 
-	SessionContext getSessionContextById(QualifiedUiSessionId sessionId);
-
-	File getUploadedFileByUuid(String uuid); // TODO we might want to notify the application instead of polling from the application...
+	File getUploadedFileByUuid(String uuid);
 
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/uisession/CMD.java b/teamapps-ux/src/main/java/org/teamapps/uisession/CMD.java
index b75732a48..7bf3f463b 100644
--- a/teamapps-ux/src/main/java/org/teamapps/uisession/CMD.java
+++ b/teamapps-ux/src/main/java/org/teamapps/uisession/CMD.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/uisession/ClientBackPressureInfo.java b/teamapps-ux/src/main/java/org/teamapps/uisession/ClientBackPressureInfo.java
new file mode 100644
index 000000000..408469238
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/uisession/ClientBackPressureInfo.java
@@ -0,0 +1,92 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.uisession;
+
+public class ClientBackPressureInfo {
+
+	private final int maxCommandBufferSize;
+	private final int bufferedCommandsCount;
+	private final int unconsumedCommandsCount;
+
+	private final int minRequestedCommands;
+	private final int maxRequestedCommands;
+	private final int remainingRequestedCommands;
+
+	private final long requestedCommandsZeroReachingTimestamp;
+
+	public ClientBackPressureInfo(int maxCommandBufferSize, int bufferedCommandsCount, int unconsumedCommandsCount,
+								  int minRequestedCommands, int maxRequestedCommands, int remainingRequestedCommands,
+								  long requestedCommandsZeroReachingTimestamp) {
+		this.maxCommandBufferSize = maxCommandBufferSize;
+		this.bufferedCommandsCount = bufferedCommandsCount;
+		this.unconsumedCommandsCount = unconsumedCommandsCount;
+		this.minRequestedCommands = minRequestedCommands;
+		this.maxRequestedCommands = maxRequestedCommands;
+		this.remainingRequestedCommands = remainingRequestedCommands;
+		this.requestedCommandsZeroReachingTimestamp = requestedCommandsZeroReachingTimestamp;
+	}
+
+	public boolean isBusy() {
+		boolean clientNotRequestingMoreCommands = requestedCommandsZeroReachingTimestamp > 0 && requestedCommandsZeroReachingTimestamp < System.currentTimeMillis() - 500;
+		boolean commandBufferCriticallyFull = unconsumedCommandsCount > 500;
+		return clientNotRequestingMoreCommands || commandBufferCriticallyFull;
+	}
+
+	public int getMaxCommandBufferSize() {
+		return maxCommandBufferSize;
+	}
+
+	public int getBufferedCommandsCount() {
+		return bufferedCommandsCount;
+	}
+
+	public int getUnconsumedCommandsCount() {
+		return unconsumedCommandsCount;
+	}
+
+	public int getMinRequestedCommands() {
+		return minRequestedCommands;
+	}
+
+	public int getMaxRequestedCommands() {
+		return maxRequestedCommands;
+	}
+
+	public int getRemainingRequestedCommands() {
+		return remainingRequestedCommands;
+	}
+
+	public long getRequestedCommandsZeroReachingTimestamp() {
+		return requestedCommandsZeroReachingTimestamp;
+	}
+
+	@Override
+	public String toString() {
+		return "ClientBackPressureInfo{" +
+				"maxCommandBufferSize=" + maxCommandBufferSize +
+				", commandBufferFillSize=" + unconsumedCommandsCount +
+				", minRequestedCommands=" + minRequestedCommands +
+				", maxRequestedCommands=" + maxRequestedCommands +
+				", remainingRequestedCommands=" + remainingRequestedCommands +
+				", requestedCommandsBelowMinTimestamp=" + requestedCommandsZeroReachingTimestamp +
+				", timeSinceLastCommandRequestAfterZero=" + (System.currentTimeMillis() - requestedCommandsZeroReachingTimestamp) +
+				'}';
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/uisession/MessageSender.java b/teamapps-ux/src/main/java/org/teamapps/uisession/MessageSender.java
index 4b1872691..d9d41a3dc 100644
--- a/teamapps-ux/src/main/java/org/teamapps/uisession/MessageSender.java
+++ b/teamapps-ux/src/main/java/org/teamapps/uisession/MessageSender.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -20,9 +20,16 @@
 package org.teamapps.uisession;
 
 import org.teamapps.dto.AbstractServerMessage;
+import org.teamapps.dto.UiSessionClosingReason;
 
 public interface MessageSender {
 
 	void sendMessageAsynchronously(AbstractServerMessage message, SendingErrorHandler sendingErrorHandler);
 
+	void close(UiSessionClosingReason closingReason, String message);
+
+	long getDataReceived();
+	
+	long getDataSent();
+
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/uisession/SendingErrorHandler.java b/teamapps-ux/src/main/java/org/teamapps/uisession/SendingErrorHandler.java
index 323c7eb6b..2b7d3f7ad 100644
--- a/teamapps-ux/src/main/java/org/teamapps/uisession/SendingErrorHandler.java
+++ b/teamapps-ux/src/main/java/org/teamapps/uisession/SendingErrorHandler.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/uisession/SessionPair.java b/teamapps-ux/src/main/java/org/teamapps/uisession/SessionPair.java
new file mode 100644
index 000000000..5678de2f9
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/uisession/SessionPair.java
@@ -0,0 +1,41 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.uisession;
+
+import org.teamapps.ux.session.SessionContext;
+
+public class SessionPair {
+
+	private final UiSession uiSession;
+	private final SessionContext sessionContext;
+
+	public SessionPair(UiSession uiSession, SessionContext sessionContext) {
+		this.uiSession = uiSession;
+		this.sessionContext = sessionContext;
+	}
+
+	public UiSession getUiSession() {
+		return uiSession;
+	}
+
+	public SessionContext getSessionContext() {
+		return sessionContext;
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/uisession/TeamAppsComponentNotFoundException.java b/teamapps-ux/src/main/java/org/teamapps/uisession/TeamAppsComponentNotFoundException.java
new file mode 100644
index 000000000..034617865
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/uisession/TeamAppsComponentNotFoundException.java
@@ -0,0 +1,40 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.uisession;
+
+public class TeamAppsComponentNotFoundException extends RuntimeException {
+
+	private final String sessionId;
+	private final String componentId;
+
+	public TeamAppsComponentNotFoundException(String sessionId, String componentId) {
+		super("Could not find component " + componentId + " in teamapps session: " + sessionId.toString());
+		this.componentId = componentId;
+		this.sessionId = sessionId;
+	}
+
+	public String getComponentId() {
+		return componentId;
+	}
+
+	public String getSessionId() {
+		return sessionId;
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/uisession/TeamAppsSessionManager.java b/teamapps-ux/src/main/java/org/teamapps/uisession/TeamAppsSessionManager.java
new file mode 100644
index 000000000..d9cb7df06
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/uisession/TeamAppsSessionManager.java
@@ -0,0 +1,308 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.uisession;
+
+import com.fasterxml.jackson.databind.ObjectMapper;
+import com.google.common.collect.Queues;
+import jakarta.servlet.http.HttpSession;
+import jakarta.servlet.http.HttpSessionEvent;
+import jakarta.servlet.http.HttpSessionListener;
+import org.apache.commons.lang3.StringUtils;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+import org.teamapps.config.TeamAppsConfiguration;
+import org.teamapps.core.TeamAppsUploadManager;
+import org.teamapps.dto.UiClientInfo;
+import org.teamapps.dto.UiRootPanel;
+import org.teamapps.dto.UiSessionClosingReason;
+import org.teamapps.event.Event;
+import org.teamapps.icons.IconProvider;
+import org.teamapps.icons.SessionIconProvider;
+import org.teamapps.server.UxServerContext;
+import org.teamapps.uisession.statistics.SessionStatsUpdatedEventData;
+import org.teamapps.uisession.statistics.UiSessionStats;
+import org.teamapps.util.threading.SequentialExecutorFactory;
+import org.teamapps.ux.component.template.BaseTemplate;
+import org.teamapps.ux.session.ClientInfo;
+import org.teamapps.ux.session.SessionConfiguration;
+import org.teamapps.ux.session.SessionContext;
+import org.teamapps.ux.session.navigation.ParameterConverterProvider;
+import org.teamapps.webcontroller.WebController;
+
+import java.util.*;
+import java.util.concurrent.*;
+import java.util.stream.Collectors;
+
+import static org.teamapps.common.TeamAppsVersion.TEAMAPPS_DEV_SERVER_VERSION;
+import static org.teamapps.common.TeamAppsVersion.TEAMAPPS_VERSION;
+import static org.teamapps.uisession.UiSessionState.*;
+
+/**
+ * Implements a cache for {@link UiSession} instances.
+ * <p>
+ * It takes care of the removal of timed-out sessions. The "last used" information is updated every time a session is retrieved.
+ */
+public class TeamAppsSessionManager implements HttpSessionListener {
+
+	private static final Logger LOGGER = LoggerFactory.getLogger(TeamAppsSessionManager.class);
+	public static final String TEAMAPPS_VERSION_REFRESH_PARAMETER = "teamappsRefresh"; // keep in-sync with JavaScript!!!
+
+	public final Event<SessionStatsUpdatedEventData> onStatsUpdated = new Event<>();
+
+	private final ScheduledExecutorService houseKeepingScheduledExecutor;
+	private final ObjectMapper objectMapper;
+	private final TeamAppsConfiguration config;
+
+	private final Map<String, SessionPair> sessionsById = new ConcurrentHashMap<>();
+	private final Deque<UiSessionStats> closedSessionsStatistics = Queues.synchronizedDeque(new ArrayDeque<>());
+
+	private final SequentialExecutorFactory sessionExecutorFactory;
+	private final WebController webController;
+	private final IconProvider iconProvider;
+	private final UxServerContext uxServerContext;
+
+	public TeamAppsSessionManager(TeamAppsConfiguration config, ObjectMapper objectMapper,
+								  SequentialExecutorFactory sessionExecutorFactory,
+								  WebController webController,
+								  IconProvider iconProvider,
+								  TeamAppsUploadManager uploadManager) {
+		this.config = config;
+		if (config.getKeepaliveMessageIntervalMillis() >= config.getUiSessionInactivityTimeoutMillis() / 2) {
+			LOGGER.error("keepaliveMessageIntervalMillis should be less than uiSessionInactivityTimeoutMillis / 2!");
+		}
+		if (config.getUiSessionPreInactivityPingMillis() > config.getUiSessionInactivityTimeoutMillis() / 2) {
+			LOGGER.error("uiSessionPreInactivityPingMillis should not be larger than uiSessionInactivityTimeoutMillis / 2!");
+		}
+		if (config.getUiSessionInactivityTimeoutMillis() > config.getUiSessionTimeoutMillis()) {
+			LOGGER.error("uiSessionInactivityTimeoutMillis must not be greater than uiSessionTimeoutMillis!");
+		}
+		this.objectMapper = objectMapper;
+		this.houseKeepingScheduledExecutor = Executors.newSingleThreadScheduledExecutor(runnable -> {
+			Thread thread = new Thread(runnable);
+			thread.setName("TeamAppsUiSessionManager.houseKeeping");
+			thread.setDaemon(true);
+			return thread;
+		});
+
+		long sessionStateHouseKeepingInterval = Math.min(config.getUiSessionPreInactivityPingMillis() / 2, config.getUiSessionInactivityTimeoutMillis() / 4);
+		LOGGER.info("sessionStateHouseKeepingInterval: {}ms", sessionStateHouseKeepingInterval);
+		this.houseKeepingScheduledExecutor.scheduleAtFixedRate(
+				() -> {
+					try {
+						this.updateSessionStates();
+					} catch (Exception e) {
+						LOGGER.error("Exception while updating session states!", e);
+					}
+				},
+				sessionStateHouseKeepingInterval, sessionStateHouseKeepingInterval, TimeUnit.MILLISECONDS
+		);
+		this.houseKeepingScheduledExecutor.scheduleAtFixedRate(
+				() -> {
+					try {
+						sessionsById.values().forEach(s -> s.getUiSession().updateStats());
+						onStatsUpdated.fire(new SessionStatsUpdatedEventData(getAllSessions(), getClosedSessionsStatistics()));
+					} catch (Exception e) {
+						LOGGER.error("Exception while flushing stats!", e);
+					}
+				},
+				10, 10, TimeUnit.SECONDS
+		);
+
+		this.sessionExecutorFactory = sessionExecutorFactory;
+		this.webController = webController;
+		this.iconProvider = iconProvider;
+		this.uxServerContext = uploadManager::getUploadedFile;
+	}
+
+	public UiSession getUiSessionById(String sessionId) {
+		SessionPair sessionPair = sessionsById.get(sessionId);
+		return sessionPair != null ? sessionPair.getUiSession() : null;
+	}
+
+	public SessionContext getSessionContextById(String sessionId) {
+		SessionPair sessionPair = sessionsById.get(sessionId);
+		return sessionPair != null ? sessionPair.getSessionContext() : null;
+	}
+
+	public int getNumberOfSessions() {
+		return sessionsById.size();
+	}
+
+	public int getNumberOfSessionsByState(UiSessionState state) {
+		return (int) sessionsById.values().stream()
+				.filter(sessionPair -> sessionPair.getSessionContext().getState() == state)
+				.count();
+	}
+
+	public List<SessionPair> getAllSessions() {
+		return List.copyOf(sessionsById.values());
+	}
+
+	public int getBufferedCommandsCount() {
+		return sessionsById.values().stream()
+				.map(SessionPair::getUiSession)
+				.mapToInt(uiSession -> uiSession.getClientBackPressureInfo().getBufferedCommandsCount())
+				.sum();
+	}
+
+	public int getUnconsumedCommandsCount() {
+		return sessionsById.values().stream()
+				.map(SessionPair::getUiSession)
+				.mapToInt(uiSession -> uiSession.getClientBackPressureInfo().getUnconsumedCommandsCount())
+				.sum();
+	}
+
+	public int getNumberOfAvailableClosedSessionStatistics() {
+		return closedSessionsStatistics.size();
+	}
+
+	public List<UiSessionStats> getClosedSessionsStatistics() {
+		synchronized (closedSessionsStatistics) {
+			return List.copyOf(closedSessionsStatistics);
+		}
+	}
+
+	public void initSession(
+			String sessionId,
+			UiClientInfo clientInfo,
+			HttpSession httpSession,
+			int maxRequestedCommandId,
+			MessageSender messageSender
+	) {
+		LOGGER.trace("initSession: sessionId = [" + sessionId + "], clientInfo = [" + clientInfo + "], "
+				+ "maxRequestedCommandId = [" + maxRequestedCommandId + "], messageSender = [" + messageSender + "]");
+
+		UiSession uiSession = new UiSession(sessionId, System.currentTimeMillis(), config, objectMapper, messageSender);
+		uiSession.addSessionListener(new UiSessionListener() {
+			@Override
+			public void onStateChanged(String sessionId, UiSessionState state) {
+				if (state == CLOSED) {
+					sessionsById.remove(uiSession.getSessionId());
+					closedSessionsStatistics.addLast(uiSession.getStatistics().immutableCopy());
+					while (closedSessionsStatistics.size() > 10_000) {
+						closedSessionsStatistics.removeFirst();
+					}
+				}
+			}
+		});
+		SessionContext sessionContext = createSessionContext(uiSession, clientInfo, httpSession, config.getNavigationPathPrefix());
+		uiSession.addSessionListener(sessionContext.getAsUiSessionListenerInternal());
+
+		uiSession.handleCommandRequest(maxRequestedCommandId, null);
+
+		boolean wrongTeamappsVersion = clientInfo.getTeamAppsVersion() == null
+				|| (!Objects.equals(clientInfo.getTeamAppsVersion(), TEAMAPPS_VERSION) && !Objects.equals(clientInfo.getTeamAppsVersion(), TEAMAPPS_DEV_SERVER_VERSION));
+		boolean hasTeamAppsRefreshParameter = clientInfo.getClientParameters().containsKey(TEAMAPPS_VERSION_REFRESH_PARAMETER);
+		if (wrongTeamappsVersion) {
+			LOGGER.info("Wrong TeamApps client version {} in session {}! Expected: {}!", clientInfo.getTeamAppsVersion(), sessionId, TEAMAPPS_VERSION);
+			if (!hasTeamAppsRefreshParameter) {
+				LOGGER.info("Sending redirect with {} parameter.", TEAMAPPS_VERSION_REFRESH_PARAMETER);
+				String separator = StringUtils.isNotEmpty(clientInfo.getLocation().getSearch()) ? "&" : "?";
+				uiSession.sendCommand(new UiCommandWithResultCallback<>(new UiRootPanel.GoToUrlCommand(clientInfo.getLocation().getHref() + separator + TEAMAPPS_VERSION_REFRESH_PARAMETER + "=" + System.currentTimeMillis(), false)));
+			}
+			uiSession.close(UiSessionClosingReason.WRONG_TEAMAPPS_VERSION);
+			return;
+		}
+
+		sessionsById.put(sessionId, new SessionPair(uiSession, sessionContext));
+
+		uiSession.sendInitOk();
+
+		try {
+			// TODO make non-blocking when exception handling (and thereby session invalidation) is changed
+			sessionContext.runWithContext(() -> {
+				sessionContext.registerTemplates(Arrays.stream(BaseTemplate.values())
+						.collect(Collectors.toMap(Enum::name, BaseTemplate::getTemplate)));     // TODO is this still necessary??
+				webController.onSessionStart(sessionContext);
+			}).get();
+		} catch (InterruptedException | ExecutionException e) {
+			throw new RuntimeException(e);
+		}
+
+	}
+
+	@Override
+	public void sessionCreated(HttpSessionEvent se) {
+		se.getSession().setMaxInactiveInterval(config.getHttpSessionTimeoutSeconds());
+	}
+
+	public void updateSessionStates() {
+		long now = System.currentTimeMillis();
+		Map<UiSessionState, List<UiSession>> sessionsByActivity;
+		List<UiSession> sessionsToClose;
+		long nearlyInactiveTimeout = config.getUiSessionInactivityTimeoutMillis() - config.getUiSessionPreInactivityPingMillis();
+		sessionsByActivity = sessionsById.values().stream()
+				.map(SessionPair::getUiSession)
+				.collect(Collectors.groupingBy(session -> {
+					long timeSinceLastMessage = now - session.getTimestampOfLastMessageFromClient();
+					return timeSinceLastMessage > config.getUiSessionInactivityTimeoutMillis() ? INACTIVE
+							: timeSinceLastMessage > nearlyInactiveTimeout ? NEARLY_INACTIVE
+							: ACTIVE;
+				}));
+		sessionsToClose = sessionsById.values().stream()
+				.map(SessionPair::getUiSession)
+				.filter(session -> now - session.getTimestampOfLastMessageFromClient() > config.getUiSessionTimeoutMillis())
+				.collect(Collectors.toList());
+		for (UiSession inactiveSession : sessionsByActivity.getOrDefault(INACTIVE, List.of())) {
+			if (inactiveSession.getState() != INACTIVE) {
+				LOGGER.info("Marking session inactive: {} ({})", inactiveSession.getName(), inactiveSession.getSessionId());
+				inactiveSession.setInactive();
+			}
+		}
+		for (UiSession criticalSession : sessionsByActivity.getOrDefault(NEARLY_INACTIVE, List.of())) {
+			if (criticalSession.getState() != NEARLY_INACTIVE) {
+				LOGGER.info("Marking session nearly inactive and sending PING to client: {} ({})", criticalSession.getName(), criticalSession.getSessionId());
+				criticalSession.setNearlyInactive();
+				criticalSession.ping();
+			}
+		}
+		for (UiSession activeSession : sessionsByActivity.getOrDefault(ACTIVE, List.of())) {
+			if (activeSession.getState() != ACTIVE) {
+				LOGGER.info("Marking session active: {} ({})", activeSession.getName(), activeSession.getSessionId());
+				activeSession.setActive();
+			}
+		}
+		for (UiSession sessionToClose : sessionsToClose) {
+			LOGGER.info("Closing session: {} ({})", sessionToClose.getName(), sessionToClose.getSessionId());
+			sessionToClose.close(UiSessionClosingReason.SESSION_TIMEOUT);
+		}
+	}
+
+	public void destroy() {
+		houseKeepingScheduledExecutor.shutdown();
+	}
+
+	public SessionContext createSessionContext(UiSession uiSession, UiClientInfo uiClientInfo, HttpSession httpSession, String navigationPathPrefix) {
+		ClientInfo clientInfo = ClientInfo.fromUiClientInfo(uiClientInfo);
+		SessionConfiguration sessionConfiguration = SessionConfiguration.createForClientInfo(clientInfo);
+
+		return new SessionContext(
+				uiSession,
+				sessionExecutorFactory.createExecutor(uiSession.getSessionId()),
+				clientInfo,
+				sessionConfiguration,
+				httpSession,
+				uxServerContext,
+				new SessionIconProvider(iconProvider),
+				navigationPathPrefix, new ParameterConverterProvider()
+		);
+	}
+
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/uisession/TeamAppsSessionNotFoundException.java b/teamapps-ux/src/main/java/org/teamapps/uisession/TeamAppsSessionNotFoundException.java
index 1c27267e6..f3db2f511 100644
--- a/teamapps-ux/src/main/java/org/teamapps/uisession/TeamAppsSessionNotFoundException.java
+++ b/teamapps-ux/src/main/java/org/teamapps/uisession/TeamAppsSessionNotFoundException.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -21,14 +21,14 @@
 
 public class TeamAppsSessionNotFoundException extends RuntimeException {
 
-	private final QualifiedUiSessionId sessionId;
+	private final String sessionId;
 
-	public TeamAppsSessionNotFoundException(QualifiedUiSessionId sessionId) {
+	public TeamAppsSessionNotFoundException(String sessionId) {
 		super("Could not find TeamApps session: " + sessionId.toString());
 		this.sessionId = sessionId;
 	}
 
-	public QualifiedUiSessionId getSessionId() {
+	public String getSessionId() {
 		return sessionId;
 	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/uisession/TeamAppsUiApiException.java b/teamapps-ux/src/main/java/org/teamapps/uisession/TeamAppsUiApiException.java
new file mode 100644
index 000000000..3963ffedb
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/uisession/TeamAppsUiApiException.java
@@ -0,0 +1,40 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.uisession;
+
+public class TeamAppsUiApiException extends RuntimeException {
+
+	private final String sessionId;
+	private final String api;
+
+	public TeamAppsUiApiException(String sessionId, String api) {
+		super("Incompatible API call: " + api + "; session" + sessionId.toString());
+		this.sessionId = sessionId;
+		this.api = api;
+	}
+
+	public String getApi() {
+		return api;
+	}
+
+	public String getSessionId() {
+		return sessionId;
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/uisession/TeamAppsUiSessionManager.java b/teamapps-ux/src/main/java/org/teamapps/uisession/TeamAppsUiSessionManager.java
deleted file mode 100644
index 59e828eb6..000000000
--- a/teamapps-ux/src/main/java/org/teamapps/uisession/TeamAppsUiSessionManager.java
+++ /dev/null
@@ -1,475 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.uisession;
-
-import com.fasterxml.jackson.core.JsonProcessingException;
-import com.fasterxml.jackson.databind.ObjectMapper;
-import com.google.common.collect.HashBasedTable;
-import com.google.common.collect.Table;
-import com.google.common.collect.Tables;
-import org.slf4j.Logger;
-import org.slf4j.LoggerFactory;
-import org.teamapps.dto.AbstractServerMessage;
-import org.teamapps.dto.INIT_NOK;
-import org.teamapps.dto.INIT_OK;
-import org.teamapps.dto.MULTI_CMD;
-import org.teamapps.dto.REINIT_NOK;
-import org.teamapps.dto.REINIT_OK;
-import org.teamapps.dto.UiClientInfo;
-import org.teamapps.dto.UiEvent;
-
-import javax.servlet.http.HttpSessionEvent;
-import javax.servlet.http.HttpSessionListener;
-import java.util.ArrayList;
-import java.util.List;
-import java.util.Map;
-import java.util.concurrent.ConcurrentHashMap;
-import java.util.concurrent.Executors;
-import java.util.concurrent.ScheduledExecutorService;
-import java.util.concurrent.TimeUnit;
-import java.util.concurrent.atomic.AtomicInteger;
-import java.util.concurrent.atomic.AtomicLong;
-import java.util.function.Consumer;
-import java.util.stream.Collectors;
-
-/**
- * Implements a cache for {@link UiSession} instances.
- * <p>
- * It takes care of the removal of timed-out sessions. The "last used" information is updated every time a session is retrieved.
- */
-public class TeamAppsUiSessionManager implements UiCommandExecutor, HttpSessionListener {
-
-	private static final long UI_SESSION_TIMEOUT = 60_000; // TODO make configurable
-
-	private ScheduledExecutorService scheduledExecutorService;
-	private final ObjectMapper objectMapper;
-	private UiSessionListener uiSessionListener;
-
-	private final static Logger LOGGER = LoggerFactory.getLogger(TeamAppsUiSessionManager.class);
-
-	private final Table<String, String, UiSession> sessionsById = Tables.synchronizedTable(HashBasedTable.create());
-
-	public TeamAppsUiSessionManager(ObjectMapper objectMapper) {
-		this(objectMapper, null);
-	}
-
-	public TeamAppsUiSessionManager(ObjectMapper objectMapper, UiSessionListener uiSessionListener) {
-		this.uiSessionListener = uiSessionListener;
-		this.objectMapper = objectMapper;
-		this.scheduledExecutorService = Executors.newSingleThreadScheduledExecutor(runnable -> {
-			Thread thread = new Thread(runnable);
-			thread.setDaemon(true);
-			return thread;
-		});
-		this.scheduledExecutorService.scheduleAtFixedRate(() -> removeTimedOutSessions(UI_SESSION_TIMEOUT), UI_SESSION_TIMEOUT, UI_SESSION_TIMEOUT, TimeUnit.MILLISECONDS);
-	}
-
-	public void setUiSessionListener(UiSessionListener uiSessionListener) {
-		this.uiSessionListener = uiSessionListener;
-	}
-
-	private UiSession getSessionById(QualifiedUiSessionId sessionId) {
-		return sessionsById.get(sessionId.getHttpSessionId(), sessionId.getUiSessionId());
-	}
-
-	public void initSession(
-			QualifiedUiSessionId sessionId,
-			UiClientInfo clientInfo,
-			int maxRequestedCommandId,
-			MessageSender messageSender
-	) {
-		LOGGER.trace("initSession: sessionId = [" + sessionId + "], clientInfo = [" + clientInfo + "], "
-				+ "maxRequestedCommandId = [" + maxRequestedCommandId + "], messageSender = [" + messageSender + "]");
-		UiSession session;
-		boolean isRefresh = false;
-
-		synchronized (sessionsById) {
-			if (sessionsById.contains(sessionId.getHttpSessionId(), sessionId.getUiSessionId())) {
-				isRefresh = true;
-				session = getSessionById(sessionId);
-			} else {
-				session = new UiSession(sessionId, clientInfo, System.currentTimeMillis(), uiSessionListener, messageSender);
-				sessionsById.put(sessionId.getHttpSessionId(), sessionId.getUiSessionId(), session);
-			}
-		}
-
-		if (isRefresh) {
-			if (session != null) {
-				session.handleClientRefresh(maxRequestedCommandId, messageSender);
-			} else {
-				messageSender.sendMessageAsynchronously(new INIT_NOK(INIT_NOK.Reason.SESSION_NOT_FOUND), null);
-			}
-		} else {
-			session.init(maxRequestedCommandId);
-		}
-
-	}
-
-	public void handleEvent(QualifiedUiSessionId sessionId, int clientMessageId, UiEvent event) {
-		UiSession session = getSessionById(sessionId);
-		if (session == null) {
-			throw new TeamAppsSessionNotFoundException(sessionId);
-		} else {
-			session.handleEvent(clientMessageId, event);
-		}
-	}
-
-	public void handleCommandResult(QualifiedUiSessionId sessionId, int clientMessageId, int cmdId, Object result) {
-		UiSession session = getSessionById(sessionId);
-		if (session == null) {
-			throw new TeamAppsSessionNotFoundException(sessionId);
-		} else {
-			session.handleCommandResult(clientMessageId, cmdId, result);
-		}
-	}
-
-	public void handleKeepAlive(QualifiedUiSessionId sessionId) {
-		UiSession session = getSessionById(sessionId);
-		if (session == null) {
-			throw new TeamAppsSessionNotFoundException(sessionId);
-		} else {
-			session.handleKeepAlive();
-		}
-	}
-
-	public void reinitSession(QualifiedUiSessionId sessionId, int lastReceivedCommandId,
-	                          int maxRequestedCommandId, MessageSender messageSender) {
-		UiSession session = getSessionById(sessionId);
-		if (session != null) {
-			session.reinit(lastReceivedCommandId, maxRequestedCommandId, messageSender);
-		} else {
-			LOGGER.warn("Could not find teamAppsUiSession for REINIT: " + sessionId);
-			messageSender.sendMessageAsynchronously(new REINIT_NOK(REINIT_NOK.Reason.SESSION_NOT_FOUND), null);
-		}
-	}
-
-	public void handleCommandRequest(QualifiedUiSessionId qualifiedUiSessionId, int lastReceivedCommandId, int maxRequestedCommandId) {
-		UiSession session = getSessionById(qualifiedUiSessionId);
-		if (session == null) {
-			throw new TeamAppsSessionNotFoundException(qualifiedUiSessionId);
-		} else {
-			session.handleCommandRequest(lastReceivedCommandId, maxRequestedCommandId);
-		}
-	}
-
-	public void sendCommand(QualifiedUiSessionId sessionId, UiCommandWithResultCallback commandWithCallback) {
-		UiSession session = getSessionById(sessionId);
-		if (session != null) {
-			try {
-				session.sendCommand(commandWithCallback);
-			} catch (UnconsumedCommandsOverflowException e) {
-				LOGGER.error("Too many unconsumed commands!", e);
-				closeSession(sessionId, SessionClosingReason.COMMANDS_OVERFLOW);
-			}
-		} else {
-			LOGGER.warn("Cannot send command to non-existing session: " + sessionId);
-		}
-	}
-
-	public void sendCommands(QualifiedUiSessionId sessionId, List<UiCommandWithResultCallback> commandsWithCallback) {
-		UiSession session = getSessionById(sessionId);
-		if (session != null) {
-			try {
-				ArrayList<UiCommandWithResultCallback> uiCommandsCopy = new ArrayList<>(commandsWithCallback);
-				session.sendCommands(uiCommandsCopy);
-			} catch (UnconsumedCommandsOverflowException e) {
-				LOGGER.error("Too many unconsumed commands!", e);
-				closeSession(sessionId, SessionClosingReason.COMMANDS_OVERFLOW);
-			}
-		} else {
-			LOGGER.warn("Cannot send commands to non-existing session: " + sessionId);
-		}
-	}
-
-	public void closeSession(QualifiedUiSessionId sessionId, SessionClosingReason reason) {
-		if (sessionsById.remove(sessionId.getHttpSessionId(), sessionId.getUiSessionId()) != null) {
-			LOGGER.info("Actively closing session: " + sessionId);
-			uiSessionListener.onUiSessionClosed(sessionId, reason);
-		}
-	}
-
-	@Override
-	public void sessionCreated(HttpSessionEvent se) {
-		// nothing to do...
-	}
-
-	@Override
-	public void sessionDestroyed(HttpSessionEvent se) {
-		removeAllSessionsForHttpSession(se.getSession().getId());
-	}
-
-	public void removeAllSessionsForHttpSession(String httpSessionId) {
-		LOGGER.trace("TeamAppsUiSessionManager.removeAllSessionsForHttpSession");
-		ArrayList<UiSession> removedSessions;
-		synchronized (sessionsById) {
-			Map<String, UiSession> sessionsToBeClosed = sessionsById.row(httpSessionId);
-			removedSessions = new ArrayList<>(sessionsToBeClosed.values());
-			sessionsToBeClosed.clear();
-		}
-		removedSessions.forEach(session -> {
-			LOGGER.info("Removed session since HTTP session was closed: " + session.sessionId);
-			uiSessionListener.onUiSessionClosed(session.sessionId, SessionClosingReason.HTTP_SESSION_CLOSED);
-		});
-	}
-
-	public void removeTimedOutSessions(long timeoutMilliSeconds) {
-		long now = System.currentTimeMillis();
-		List<UiSession> removedSessions;
-		synchronized (sessionsById) {
-			removedSessions = new ArrayList<>();
-			sessionsById.values().removeIf(session -> {
-				boolean isTimedOut = now - session.getTimestampOfLastMessageFromClient() > timeoutMilliSeconds;
-				if (isTimedOut) {
-					LOGGER.debug("UI session timed out after " + timeoutMilliSeconds + " ms: " + session.sessionId);
-					removedSessions.add(session);
-				}
-				return isTimedOut;
-			});
-		}
-		removedSessions.forEach(session -> {
-			LOGGER.info("Session timeout: " + session.sessionId);
-			uiSessionListener.onUiSessionClosed(session.sessionId, SessionClosingReason.TIMED_OUT);
-		});
-	}
-
-	public void destroy() {
-		scheduledExecutorService.shutdown();
-	}
-
-	private class UiSession {
-
-		private static final int COMMAND_BUFFER_SIZE = 10_000;
-
-		private final QualifiedUiSessionId sessionId;
-		private final UiClientInfo clientInfo;
-		private final UiSessionListener sessionListener;
-
-		private MessageSender messageSender;
-
-		private final CommandBuffer commandBuffer = new CommandBuffer(COMMAND_BUFFER_SIZE);
-		private AtomicInteger commandIdCounter = new AtomicInteger();
-
-		private AtomicLong timestampOfLastMessageFromClient = new AtomicLong();
-		private int lastReceivedClientMessageId;
-		private boolean connectionActive = true;
-
-		private int maxRequestedCommandId = 0;
-		private int lastSentCommandId;
-
-		private Map<Integer, Consumer> resultCallbacksByCmdId = new ConcurrentHashMap<>();
-
-		public UiSession(QualifiedUiSessionId sessionId, UiClientInfo clientInfo, long creationTime, UiSessionListener sessionListener, MessageSender messageSender) {
-			this.sessionId = sessionId;
-			this.clientInfo = clientInfo;
-			this.timestampOfLastMessageFromClient.set(creationTime);
-			this.sessionListener = sessionListener;
-			this.messageSender = messageSender;
-		}
-
-		public long getTimestampOfLastMessageFromClient() {
-			return timestampOfLastMessageFromClient.get();
-		}
-
-		public void setMessageSender(MessageSender messageSender) {
-			this.messageSender = messageSender;
-		}
-
-		public void sendCommand(UiCommandWithResultCallback commandWithCallback) throws UnconsumedCommandsOverflowException {
-			if (LOGGER.isDebugEnabled()) {
-				LOGGER.debug("Sending command ({}): {}" , sessionId.getUiSessionId().substring(0, 8), commandWithCallback.getUiCommand().getClass().getSimpleName());
-			}
-			CMD cmd = createCMD(commandWithCallback);
-			synchronized (this) {
-				commandBuffer.addCommand(cmd);
-				sendAllQueuedCommandsIfPossible();
-			}
-		}
-
-		public void sendCommands(List<UiCommandWithResultCallback> commandsWithCallback) throws UnconsumedCommandsOverflowException {
-			if (LOGGER.isDebugEnabled()) {
-				commandsWithCallback.stream()
-						.map(UiCommandWithResultCallback::getUiCommand)
-						.forEach(command -> LOGGER.debug("Sending command ({}): {}" , sessionId.getUiSessionId().substring(0, 8), command.getClass().getSimpleName()));
-			}
-			List<CMD> cmds = commandsWithCallback.stream()
-					.map(commandWithCallback -> createCMD(commandWithCallback))
-					.collect(Collectors.toList());
-			synchronized (this) {
-				for (CMD cmd : cmds) {
-					commandBuffer.addCommand(cmd);
-				}
-				sendAllQueuedCommandsIfPossible();
-			}
-		}
-
-		private CMD createCMD(UiCommandWithResultCallback commandWithCallback) {
-			CMD cmd;
-			try {
-				int cmdId = commandIdCounter.incrementAndGet();
-				cmd = new CMD(cmdId, objectMapper.writeValueAsString(commandWithCallback.getUiCommand()));
-
-				if (commandWithCallback.getResultCallback() != null) {
-					cmd.setAwaitsResponse(true);
-					resultCallbacksByCmdId.put(cmdId, commandWithCallback.getResultCallback());
-				}
-			} catch (JsonProcessingException e) {
-				throw new RuntimeException(e);
-			}
-			return cmd;
-		}
-
-		public boolean rewindToCommand(int commandId) {
-			synchronized (this) {
-				this.lastSentCommandId = commandId - 1;
-				return commandBuffer.rewindToCommand(commandId);
-			}
-		}
-
-		private void sendAllQueuedCommandsIfPossible() {
-			if (connectionActive) {
-				List<CMD> cmdsToSend = new ArrayList<>();
-				synchronized (this) {
-					while (true) {
-						if (lastSentCommandId >= maxRequestedCommandId) {
-							connectionActive = false;
-							break;
-						}
-						CMD cmd = commandBuffer.consumeCommand();
-						if (cmd != null) {
-							lastSentCommandId = cmd.getId();
-							cmdsToSend.add(cmd);
-						} else {
-							break;
-						}
-					}
-				}
-				if (!cmdsToSend.isEmpty()) {
-					sendAsyncWithErrorHandler(new MULTI_CMD(cmdsToSend));
-				}
-			}
-		}
-
-		public void reviveConnection() {
-			synchronized (this) {
-				this.connectionActive = true;
-				sendAllQueuedCommandsIfPossible();
-			}
-		}
-
-		public void handleCommandRequest(int lastReceivedCommandId, int maxRequestedCommandId) {
-			LOGGER.trace("UiSession.requestCommands: maxRequestedCommandId = [" + maxRequestedCommandId + "]");
-			this.timestampOfLastMessageFromClient.set(System.currentTimeMillis());
-			synchronized (this) {
-				this.commandBuffer.purgeTillCommand(lastReceivedCommandId);
-				this.maxRequestedCommandId = Math.max(maxRequestedCommandId, this.maxRequestedCommandId);
-				reviveConnection();
-			}
-		}
-
-		public void init(int maxRequestedCommandId) {
-			this.timestampOfLastMessageFromClient.set(System.currentTimeMillis());
-			synchronized (this) {
-				this.maxRequestedCommandId = maxRequestedCommandId;
-			}
-			LOGGER.debug("INIT successful: " + sessionId);
-			sessionListener.onUiSessionStarted(sessionId, clientInfo);
-			sendAsyncWithErrorHandler(new INIT_OK());
-		}
-
-		public void handleClientRefresh(int maxRequestedCommandId, MessageSender messageSender) {
-			this.timestampOfLastMessageFromClient.set(System.currentTimeMillis());
-			synchronized (this) {
-				this.messageSender = messageSender;
-				this.commandBuffer.clear();
-				commandIdCounter.set(0);
-				lastReceivedClientMessageId = -1;
-				connectionActive = true;
-				this.maxRequestedCommandId = maxRequestedCommandId;
-				lastSentCommandId = 0;
-			}
-			LOGGER.debug("INIT (client refresh) successful: " + sessionId);
-			sessionListener.onUiSessionClientRefresh(sessionId, clientInfo);
-			sendAsyncWithErrorHandler(new INIT_OK());
-		}
-
-		public void handleEvent(int clientMessageId, UiEvent event) {
-			this.timestampOfLastMessageFromClient.set(System.currentTimeMillis());
-			if (LOGGER.isDebugEnabled()) {
-				LOGGER.debug("Recieved event ({}): {}", sessionId.getUiSessionId().substring(0, 8), event.getUiEventType());
-			}
-			updateClientMessageId(clientMessageId);
-			reviveConnection();
-			sessionListener.onUiEvent(sessionId, event);
-		}
-
-		public void handleCommandResult(int clientMessageId, int cmdId, Object result) {
-			this.timestampOfLastMessageFromClient.set(System.currentTimeMillis());
-			if (LOGGER.isDebugEnabled()) {
-				LOGGER.debug("Recieved command result ({}): {}", sessionId.getUiSessionId().substring(0, 8));
-			}
-			updateClientMessageId(clientMessageId);
-			reviveConnection();
-			Consumer resultCallback = resultCallbacksByCmdId.remove(cmdId);
-			if (resultCallback != null) {
-				resultCallback.accept(result);
-			} else {
-				LOGGER.error("Could not find result callback for CMD_RESULT! cmdId: " + cmdId);
-			}
-		}
-
-		private void updateClientMessageId(int clientMessageId) {
-			if (lastReceivedClientMessageId != -1 && clientMessageId != lastReceivedClientMessageId + 1) {
-				LOGGER.warn("Missing event from client? Expected event id: " + lastReceivedClientMessageId + 1 + "; Got: " + clientMessageId);
-			}
-			lastReceivedClientMessageId = clientMessageId;
-		}
-
-		public void reinit(int lastReceivedCommandId, int maxRequestedCommandId, MessageSender messageSender) {
-			setMessageSender(messageSender);
-
-			if (rewindToCommand(lastReceivedCommandId)) {
-				LOGGER.debug("REINIT successful: " + sessionId);
-				synchronized (this) {
-					this.maxRequestedCommandId = Math.max(maxRequestedCommandId, this.maxRequestedCommandId);
-				}
-				sendAsyncWithErrorHandler(new REINIT_OK(lastReceivedClientMessageId));
-				reviveConnection();
-			} else {
-				LOGGER.warn("Could not reinit. Command with id " + lastReceivedCommandId + "not found in command buffer.");
-				sendAsyncWithErrorHandler(new REINIT_NOK(REINIT_NOK.Reason.COMMAND_ID_NOT_FOUND));
-			}
-		}
-
-		private void sendAsyncWithErrorHandler(AbstractServerMessage message) {
-			final long sendTime = System.currentTimeMillis();
-			this.messageSender.sendMessageAsynchronously(message, (exception) -> {
-				if (timestampOfLastMessageFromClient.get() <= sendTime) {
-					connectionActive = false;
-				}
-			});
-		}
-
-		public void handleKeepAlive() {
-			this.timestampOfLastMessageFromClient.set(System.currentTimeMillis());
-			this.reviveConnection();
-		}
-	}
-
-}
diff --git a/teamapps-ux/src/main/java/org/teamapps/uisession/UiCommandWithResultCallback.java b/teamapps-ux/src/main/java/org/teamapps/uisession/UiCommandWithResultCallback.java
index 2967bfdc7..9d7efea79 100644
--- a/teamapps-ux/src/main/java/org/teamapps/uisession/UiCommandWithResultCallback.java
+++ b/teamapps-ux/src/main/java/org/teamapps/uisession/UiCommandWithResultCallback.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/uisession/UiSession.java b/teamapps-ux/src/main/java/org/teamapps/uisession/UiSession.java
new file mode 100644
index 000000000..b00838b85
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/uisession/UiSession.java
@@ -0,0 +1,373 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.uisession;
+
+import com.fasterxml.jackson.core.JsonProcessingException;
+import com.fasterxml.jackson.databind.ObjectMapper;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+import org.teamapps.config.TeamAppsConfiguration;
+import org.teamapps.dto.*;
+import org.teamapps.uisession.commandbuffer.CommandBuffer;
+import org.teamapps.uisession.commandbuffer.CommandBufferException;
+import org.teamapps.uisession.statistics.RunningUiSessionStats;
+
+import java.lang.invoke.MethodHandles;
+import java.util.ArrayList;
+import java.util.List;
+import java.util.Map;
+import java.util.concurrent.ConcurrentHashMap;
+import java.util.concurrent.CopyOnWriteArrayList;
+import java.util.concurrent.atomic.AtomicInteger;
+import java.util.concurrent.atomic.AtomicLong;
+import java.util.function.Consumer;
+
+public class UiSession {
+
+	private static final Logger LOGGER = LoggerFactory.getLogger(MethodHandles.lookup().lookupClass());
+
+	private final String sessionId;
+	private String name;
+	private final TeamAppsConfiguration config;
+	private final ObjectMapper objectMapper;
+	private CopyOnWriteArrayList<UiSessionListener> sessionListeners = new CopyOnWriteArrayList<>();
+
+	private MessageSender messageSender;
+
+	private final CommandBuffer commandBuffer;
+	private final AtomicInteger commandIdCounter = new AtomicInteger();
+
+	private final AtomicLong timestampOfLastMessageFromClient = new AtomicLong();
+	private int lastReceivedClientMessageId;
+	private boolean clientReadyToReceiveCommands = true;
+	private UiSessionState state = UiSessionState.ACTIVE;
+
+	private int maxRequestedCommandId = 0;
+	private int lastSentCommandId;
+	private long requestedCommandsZeroTimestamp = -1;
+
+	private class ResultCallbackWithCommandClass {
+		private final Consumer<Object> callback;
+		private final Class<?> commandClass;
+
+		public ResultCallbackWithCommandClass(Consumer<Object> callback, Class<?> commandClass) {
+			this.callback = callback;
+			this.commandClass = commandClass;
+		}
+	}
+
+	private final Map<Integer, ResultCallbackWithCommandClass> resultCallbacksByCmdId = new ConcurrentHashMap<>();
+
+	private final RunningUiSessionStats statistics;
+
+	public UiSession(String sessionId, long creationTime, TeamAppsConfiguration config, ObjectMapper objectMapper, MessageSender messageSender) {
+		this.sessionId = sessionId;
+		this.name = sessionId.toString();
+		this.config = config;
+		this.objectMapper = objectMapper;
+		this.timestampOfLastMessageFromClient.set(creationTime);
+		this.messageSender = messageSender;
+
+		statistics = new RunningUiSessionStats(System.currentTimeMillis(), sessionId, name);
+		commandBuffer = new CommandBuffer(config.getCommandBufferLength(), config.getCommandBufferTotalSize());
+	}
+
+	public void updateStats() {
+		statistics.update(messageSender.getDataSent(), messageSender.getDataReceived());
+	}
+
+	public String getSessionId() {
+		return sessionId;
+	}
+
+	public void setName(String name) {
+		this.name = name;
+		statistics.nameChanged(name);
+	}
+
+	public String getName() {
+		return name;
+	}
+
+	public long getTimestampOfLastMessageFromClient() {
+		return timestampOfLastMessageFromClient.get();
+	}
+
+	public void setMessageSender(MessageSender messageSender) {
+		this.messageSender = messageSender;
+	}
+
+	public void addSessionListener(UiSessionListener sessionListener) {
+		this.sessionListeners.add(sessionListener);
+	}
+
+	public int sendCommand(UiCommandWithResultCallback commandWithCallback) {
+		if (LOGGER.isDebugEnabled()) {
+			LOGGER.debug("Sending command ({}): {} to {}", sessionId.toString().substring(0, 8), commandWithCallback.getUiCommand().toString(), commandWithCallback.getUiCommand().getComponentId());
+		}
+		statistics.commandSent(commandWithCallback.getUiCommand());
+		CMD cmd = createCMD(commandWithCallback);
+		synchronized (this) {
+			try {
+				commandBuffer.addCommand(cmd);
+			} catch (CommandBufferException e) {
+				LOGGER.error("Exception while adding command to CommandBuffer!", e);
+				close(UiSessionClosingReason.COMMANDS_OVERFLOW);
+				return -1;
+			}
+			sendAllQueuedCommandsIfPossible();
+			return commandBuffer.getUnconsumedCommandsCount();
+		}
+	}
+
+	public ClientBackPressureInfo getClientBackPressureInfo() {
+		synchronized (this) {
+			return new ClientBackPressureInfo(
+					config.getCommandBufferLength(),
+					commandBuffer.getBufferedCommandsCount(),
+					commandBuffer.getUnconsumedCommandsCount(),
+					config.getClientMinRequestedCommands(),
+					config.getClientMaxRequestedCommands(),
+					maxRequestedCommandId - lastSentCommandId,
+					requestedCommandsZeroTimestamp
+			);
+		}
+	}
+
+	private CMD createCMD(UiCommandWithResultCallback commandWithCallback) {
+		CMD cmd;
+		try {
+			int cmdId = commandIdCounter.incrementAndGet();
+			cmd = new CMD(cmdId, objectMapper.writeValueAsString(commandWithCallback.getUiCommand()));
+
+			if (commandWithCallback.getResultCallback() != null) {
+				cmd.setAwaitsResponse(true);
+				resultCallbacksByCmdId.put(cmdId, new ResultCallbackWithCommandClass(commandWithCallback.getResultCallback(), commandWithCallback.getUiCommand().getClass()));
+			}
+		} catch (JsonProcessingException e) {
+			throw new RuntimeException(e);
+		}
+		return cmd;
+	}
+
+	public boolean rewindToCommand(int commandId) {
+		synchronized (this) {
+			this.lastSentCommandId = commandId - 1;
+			return commandBuffer.rewindToCommand(commandId);
+		}
+	}
+
+	private void sendAllQueuedCommandsIfPossible() {
+		if (clientReadyToReceiveCommands) {
+			List<CMD> cmdsToSend = new ArrayList<>();
+			synchronized (this) {
+				while (true) {
+					if (!clientReadyToReceiveCommands) {
+						break;
+					}
+					if (lastSentCommandId >= maxRequestedCommandId) {
+						clientReadyToReceiveCommands = false;
+						requestedCommandsZeroTimestamp = System.currentTimeMillis();
+						break;
+					} else {
+						requestedCommandsZeroTimestamp = -1;
+					}
+					CMD cmd = commandBuffer.consumeCommand();
+					if (cmd != null) {
+						lastSentCommandId = cmd.getId();
+						cmdsToSend.add(cmd);
+					} else {
+						break;
+					}
+				}
+			}
+			if (!cmdsToSend.isEmpty()) {
+				sendAsyncWithErrorHandler(new MULTI_CMD(cmdsToSend));
+			}
+		}
+	}
+
+	public void reviveConnection() {
+		synchronized (this) {
+			this.clientReadyToReceiveCommands = true;
+			sendAllQueuedCommandsIfPossible();
+		}
+	}
+
+	public void handleCommandRequest(int maxRequestedCommandId, Integer lastReceivedCommandIdOrNull) {
+		LOGGER.trace("UiSession.requestCommands: maxRequestedCommandId = [" + maxRequestedCommandId + "]");
+		this.timestampOfLastMessageFromClient.set(System.currentTimeMillis());
+		synchronized (this) {
+			if (lastReceivedCommandIdOrNull != null) {
+				this.commandBuffer.purgeTillCommand(lastReceivedCommandIdOrNull);
+			}
+			this.maxRequestedCommandId = Math.max(maxRequestedCommandId, this.maxRequestedCommandId);
+			reviveConnection();
+		}
+	}
+
+	public void sendInitOk() {
+		LOGGER.debug("Sending INIT_OK for {}", sessionId);
+		sendAsyncWithErrorHandler(new INIT_OK(
+				config.getClientMinRequestedCommands(),
+				config.getClientMaxRequestedCommands(),
+				config.getClientEventsBufferSize(),
+				config.getKeepaliveMessageIntervalMillis()
+		));
+	}
+
+	/**
+	 * Make sure an exception in one sessionListener does not prevent the others from being invoked!
+	 */
+	private void failsafeInvokeSessionListeners(Consumer<UiSessionListener> runnable) {
+		sessionListeners.forEach(sl -> {
+			try {
+				runnable.accept(sl);
+			} catch (Exception e) {
+				LOGGER.error("Exception while invoking sessionListener!", e);
+			}
+		});
+	}
+
+	public void handleEvent(int clientMessageId, UiEvent event) {
+		statistics.eventReceived(event);
+		this.timestampOfLastMessageFromClient.set(System.currentTimeMillis());
+		if (LOGGER.isDebugEnabled()) {
+			LOGGER.debug("Recieved event ({}): {}", sessionId.toString().substring(0, 8), event.getUiEventType());
+		}
+		updateClientMessageId(clientMessageId);
+		reviveConnection();
+		failsafeInvokeSessionListeners(sl -> sl.onUiEvent(sessionId, event));
+	}
+
+	public void handleQuery(int clientMessageId, UiQuery query) {
+		statistics.queryReceived(query);
+		this.timestampOfLastMessageFromClient.set(System.currentTimeMillis());
+		if (LOGGER.isDebugEnabled()) {
+			LOGGER.debug("Recieved query ({}): {}", sessionId.toString().substring(0, 8), query.getUiQueryType());
+		}
+		updateClientMessageId(clientMessageId);
+		reviveConnection();
+		failsafeInvokeSessionListeners(sl -> sl.onUiQuery(
+				sessionId,
+				query,
+				result -> {
+					sendAsyncWithErrorHandler(new QUERY_RESULT(clientMessageId, result));
+					statistics.queryResultSentFor(query);
+				}
+		));
+	}
+
+	public void handleCommandResult(int clientMessageId, int cmdId, Object result) {
+		this.timestampOfLastMessageFromClient.set(System.currentTimeMillis());
+		if (LOGGER.isDebugEnabled()) {
+			LOGGER.debug("Recieved command result ({}): {}", sessionId.toString().substring(0, 8), result);
+		}
+		updateClientMessageId(clientMessageId);
+		reviveConnection();
+		ResultCallbackWithCommandClass resultCallback = resultCallbacksByCmdId.remove(cmdId);
+		if (resultCallback != null) {
+			statistics.commandResultReceivedFor(resultCallback.commandClass);
+			resultCallback.callback.accept(result);
+		} else {
+			LOGGER.error("Could not find result callback for CMD_RESULT! cmdId: " + cmdId);
+		}
+	}
+
+	private void updateClientMessageId(int clientMessageId) {
+		if (lastReceivedClientMessageId != -1 && clientMessageId != lastReceivedClientMessageId + 1) {
+			LOGGER.warn("Missing event from client? Expected event id: " + lastReceivedClientMessageId + 1 + "; Got: " + clientMessageId);
+		}
+		lastReceivedClientMessageId = clientMessageId;
+	}
+
+	public void reinit(int lastReceivedCommandId, int maxRequestedCommandId, MessageSender messageSender) {
+		setMessageSender(messageSender);
+
+		if (rewindToCommand(lastReceivedCommandId)) {
+			LOGGER.debug("REINIT successful: " + sessionId);
+			synchronized (this) {
+				this.maxRequestedCommandId = Math.max(maxRequestedCommandId, this.maxRequestedCommandId);
+			}
+			sendAsyncWithErrorHandler(new REINIT_OK(lastReceivedClientMessageId));
+			reviveConnection();
+		} else {
+			LOGGER.warn("Could not reinit. Command with id " + lastReceivedCommandId + "not found in command buffer.");
+			sendAsyncWithErrorHandler(new REINIT_NOK(UiSessionClosingReason.REINIT_COMMAND_ID_NOT_FOUND));
+		}
+	}
+
+	public void sendAsyncWithErrorHandler(AbstractServerMessage message) {
+		final long sendTime = System.currentTimeMillis();
+		this.messageSender.sendMessageAsynchronously(message, (exception) -> {
+			if (timestampOfLastMessageFromClient.get() <= sendTime) {
+				clientReadyToReceiveCommands = false;
+			}
+		});
+	}
+
+	public void handleKeepAlive() {
+		this.timestampOfLastMessageFromClient.set(System.currentTimeMillis());
+		this.reviveConnection();
+	}
+
+	public void ping() {
+		sendAsyncWithErrorHandler(new PING());
+	}
+
+	public void setActive() {
+		setState(UiSessionState.ACTIVE);
+	}
+
+	public void setNearlyInactive() {
+		setState(UiSessionState.NEARLY_INACTIVE);
+	}
+
+	public void setInactive() {
+		setState(UiSessionState.INACTIVE);
+	}
+
+	public void close(UiSessionClosingReason reason) {
+		if (this.state == UiSessionState.CLOSED) {
+			return; // already closed. nothing to do
+		}
+		setState(UiSessionState.CLOSED);
+		failsafeInvokeSessionListeners(sl -> sl.onClosed(sessionId, reason)); // note that this is executed AFTER the state change handlers!
+		this.messageSender.close(reason, null);
+	}
+
+	private void setState(UiSessionState sessionState) {
+		boolean changed = sessionState != this.state;
+		this.state = sessionState;
+		if (changed) {
+			statistics.stateChanged(sessionState);
+			failsafeInvokeSessionListeners(sl -> sl.onStateChanged(sessionId, sessionState));
+		}
+	}
+
+	public UiSessionState getState() {
+		return this.state;
+	}
+
+	public RunningUiSessionStats getStatistics() {
+		return statistics;
+	}
+
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/uisession/UiSessionActivityState.java b/teamapps-ux/src/main/java/org/teamapps/uisession/UiSessionActivityState.java
new file mode 100644
index 000000000..04927e012
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/uisession/UiSessionActivityState.java
@@ -0,0 +1,39 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.uisession;
+
+public class UiSessionActivityState {
+
+	/**
+	 * If true, the client has sent any ui protocol message (at least a KEEPALIVE) within
+	 * the timeout configured as {@link org.teamapps.config.TeamAppsConfiguration#uiSessionInactivityTimeoutMillis}.
+	 * Otherwise (false), the client can be regarded as temporarily disconnected.
+	 */
+	private final boolean active;
+
+	public UiSessionActivityState(boolean active) {
+		this.active = active;
+	}
+
+	public boolean isActive() {
+		return active;
+	}
+
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/uisession/UiSessionListener.java b/teamapps-ux/src/main/java/org/teamapps/uisession/UiSessionListener.java
index 9c1396cf1..9854ccbac 100644
--- a/teamapps-ux/src/main/java/org/teamapps/uisession/UiSessionListener.java
+++ b/teamapps-ux/src/main/java/org/teamapps/uisession/UiSessionListener.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,14 +19,27 @@
  */
 package org.teamapps.uisession;
 
-import org.teamapps.dto.UiClientInfo;
 import org.teamapps.dto.UiEvent;
+import org.teamapps.dto.UiQuery;
+import org.teamapps.dto.UiSessionClosingReason;
+
+import java.util.function.Consumer;
 
 public interface UiSessionListener {
 
-    void onUiSessionStarted(QualifiedUiSessionId sessionId, UiClientInfo uiClientInfo);
-	void onUiSessionClientRefresh(QualifiedUiSessionId sessionId, UiClientInfo clientInfo);
-	void onUiEvent(QualifiedUiSessionId sessionId, UiEvent event);
-	void onUiSessionClosed(QualifiedUiSessionId sessionId, SessionClosingReason reason);
+	default void onUiEvent(String sessionId, UiEvent event) {
+	}
+
+	default void onUiQuery(String sessionId, UiQuery query, Consumer<Object> resultCallback) {
+	}
+
+	default void onStateChanged(String sessionId, UiSessionState state) {
+	}
 
+	/**
+	 * Additional state change callback method for sessions that got closed, but with a reason code.
+	 * Note that this will be executed AFTER {@link #onStateChanged(String, UiSessionState)}.
+	 */
+	default void onClosed(String sessionId, UiSessionClosingReason reason) {
+	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/uisession/SessionClosingReason.java b/teamapps-ux/src/main/java/org/teamapps/uisession/UiSessionState.java
similarity index 73%
rename from teamapps-ux/src/main/java/org/teamapps/uisession/SessionClosingReason.java
rename to teamapps-ux/src/main/java/org/teamapps/uisession/UiSessionState.java
index 78c0e96d3..5f6011863 100644
--- a/teamapps-ux/src/main/java/org/teamapps/uisession/SessionClosingReason.java
+++ b/teamapps-ux/src/main/java/org/teamapps/uisession/UiSessionState.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,9 +19,16 @@
  */
 package org.teamapps.uisession;
 
-public enum SessionClosingReason {
-	TERMINATED_BY_CLIENT, // by the client
-	TIMED_OUT,
-	HTTP_SESSION_CLOSED,
-	COMMANDS_OVERFLOW
+public enum UiSessionState {
+	ACTIVE(true), NEARLY_INACTIVE(true), INACTIVE(false), CLOSED(false);
+
+	private final boolean active;
+
+	UiSessionState(boolean active) {
+		this.active = active;
+	}
+
+	public boolean isActive() {
+		return active;
+	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/uisession/CommandBuffer.java b/teamapps-ux/src/main/java/org/teamapps/uisession/commandbuffer/CommandBuffer.java
similarity index 55%
rename from teamapps-ux/src/main/java/org/teamapps/uisession/CommandBuffer.java
rename to teamapps-ux/src/main/java/org/teamapps/uisession/commandbuffer/CommandBuffer.java
index e958e25fe..cc3090f7c 100644
--- a/teamapps-ux/src/main/java/org/teamapps/uisession/CommandBuffer.java
+++ b/teamapps-ux/src/main/java/org/teamapps/uisession/commandbuffer/CommandBuffer.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,50 +17,77 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-package org.teamapps.uisession;
+package org.teamapps.uisession.commandbuffer;
 
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
+import org.teamapps.uisession.CMD;
 
 /**
- * NOT THREAD-SAFE! Synchronization must be provided by using code.
+ * NOT THREAD-SAFE! Synchronization must be provided by client code.
  */
 public class CommandBuffer {
 
 	private static final Logger LOGGER = LoggerFactory.getLogger(CommandBuffer.class);
 
 	private final int maxFillableCapacity;
+	/**
+	 * The total number of characters that all commands in the command buffer of a session may hold.
+	 * Keep in mind that every character in Java takes 1 or 2 bytes of heap space (prior Java 9 always 2 bytes).
+	 */
+	private final int maxTotalSize;
 	private final CMD[] buffer;
 	private int head = 0;
 	private int nextConsumable = 0;
 	private int tail = 0;
 	private boolean bufferFlippedAtLeastOnce;
+	private int totalSize = 0; // in characters
 
-	public CommandBuffer(int capacity) {
-		this.maxFillableCapacity = capacity;
+	public CommandBuffer(int maxLength, int maxTotalSize) {
+		this.maxFillableCapacity = maxLength;
+		this.maxTotalSize = maxTotalSize;
 		buffer = new CMD[maxFillableCapacity + 1];
 	}
 
-	public int size() {
+	public int getBufferedCommandsCount() {
 		return head - tail + (head < tail ? buffer.length : 0);
 	}
 
-	public void addCommand(CMD command) throws UnconsumedCommandsOverflowException {
-		if (size() == maxFillableCapacity) {
-			if (tail == nextConsumable) {
-				throw new UnconsumedCommandsOverflowException("Command buffer overflow. Max capacity: " + maxFillableCapacity);
+	public int getUnconsumedCommandsCount() {
+		return head - nextConsumable + (head < nextConsumable ? buffer.length : 0);
+	}
+
+	public int getCommandsSize() {
+		int size = 0;
+		for (int i = 0; i < buffer.length; i++) {
+			if (buffer[i] != null) {
+				size += buffer[i].getUiCommand().length();
+			}
+		}
+		return size;
+	}
+
+	public void addCommand(CMD command) throws CommandBufferException {
+		while (totalSize + command.getUiCommand().length() > maxTotalSize) {
+			if (!tryPurgingNextCommandFromTail()) {
+				throw new CommandBufferSizeOverflowException("Command buffer SIZE overflow. Max total size: " + maxTotalSize + " characters");
+			}
+		}
+		if (getBufferedCommandsCount() == maxFillableCapacity) {
+			if (!tryPurgingNextCommandFromTail()) {
+				throw new CommandBufferLengthOverflowException("Command buffer LENGTH overflow. Max capacity: " + maxFillableCapacity);
 			}
-			tail = (tail + 1) % buffer.length;
 		}
 		buffer[head] = command;
 		if (head + 1 == buffer.length) {
 			bufferFlippedAtLeastOnce = true;
 		}
 		head = (head + 1) % buffer.length;
+		totalSize += command.getUiCommand().length();
 	}
 
 	public CMD consumeCommand() {
-		if (size() > 0 && nextConsumable != head) {
+		if (getBufferedCommandsCount() > 0 && nextConsumable != head) {
 			CMD command = buffer[nextConsumable];
 			nextConsumable = (nextConsumable + 1) % buffer.length;
 			return command;
@@ -71,15 +98,24 @@ public CMD consumeCommand() {
 
 	public void purgeTillCommand(int commandIdExclusive) {
 		while (buffer[tail].getId() != commandIdExclusive) {
-			if (tail == nextConsumable) {
+			if (!tryPurgingNextCommandFromTail()) {
 				LOGGER.error("Will not purge next consumable command!");
 				return;
 			}
-			buffer[tail] = null;
-			tail = (tail + 1) % buffer.length;
 		}
 	}
 
+	private boolean tryPurgingNextCommandFromTail() {
+		if (tail == nextConsumable) {
+			return false;
+		}
+		CMD cmd = buffer[tail];
+		buffer[tail] = null;
+		tail = (tail + 1) % buffer.length;
+		totalSize -= cmd.getUiCommand().length();
+		return true;
+	}
+
 	public boolean rewindToCommand(long commandId) {
 		if (commandId == -1) {
 			if (bufferFlippedAtLeastOnce) {
@@ -95,7 +131,7 @@ public boolean rewindToCommand(long commandId) {
 					return false;
 				}
 				if (command.getId() == commandId) {
-					nextConsumable = i + 1;
+					nextConsumable = (i + 1) % buffer.length;
 					return true;
 				}
 			}
diff --git a/teamapps-ux/src/main/java/org/teamapps/uisession/commandbuffer/CommandBufferException.java b/teamapps-ux/src/main/java/org/teamapps/uisession/commandbuffer/CommandBufferException.java
new file mode 100644
index 000000000..7793b4175
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/uisession/commandbuffer/CommandBufferException.java
@@ -0,0 +1,32 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.uisession.commandbuffer;
+
+public class CommandBufferException extends Exception {
+
+	public CommandBufferException() {
+		this(null);
+	}
+
+	public CommandBufferException(String message) {
+		super(message);
+	}
+
+}
diff --git a/teamapps-icon/src/main/java/org/teamapps/icons/api/Icon.java b/teamapps-ux/src/main/java/org/teamapps/uisession/commandbuffer/CommandBufferLengthOverflowException.java
similarity index 70%
rename from teamapps-icon/src/main/java/org/teamapps/icons/api/Icon.java
rename to teamapps-ux/src/main/java/org/teamapps/uisession/commandbuffer/CommandBufferLengthOverflowException.java
index 171c7dceb..93e43bb06 100644
--- a/teamapps-icon/src/main/java/org/teamapps/icons/api/Icon.java
+++ b/teamapps-ux/src/main/java/org/teamapps/uisession/commandbuffer/CommandBufferLengthOverflowException.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,17 +17,16 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-package org.teamapps.icons.api;
+package org.teamapps.uisession.commandbuffer;
 
-public interface Icon {
+public class CommandBufferLengthOverflowException extends CommandBufferException {
 
-	String SEPARATOR = ".";
-	String SEPARATOR_PATTERN = "\\.";
-
-	String getQualifiedIconId(IconTheme theme, boolean baseStyle);
+	public CommandBufferLengthOverflowException() {
+		this(null);
+	}
 
-	default String getQualifiedIconId(IconTheme theme) {
-		return getQualifiedIconId(theme, true);
+	public CommandBufferLengthOverflowException(String message) {
+		super(message);
 	}
 
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/uisession/commandbuffer/CommandBufferSizeOverflowException.java b/teamapps-ux/src/main/java/org/teamapps/uisession/commandbuffer/CommandBufferSizeOverflowException.java
new file mode 100644
index 000000000..38808943c
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/uisession/commandbuffer/CommandBufferSizeOverflowException.java
@@ -0,0 +1,32 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.uisession.commandbuffer;
+
+public class CommandBufferSizeOverflowException extends CommandBufferException {
+
+	public CommandBufferSizeOverflowException() {
+		this(null);
+	}
+
+	public CommandBufferSizeOverflowException(String message) {
+		super(message);
+	}
+
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/uisession/statistics/CountStats.java b/teamapps-ux/src/main/java/org/teamapps/uisession/statistics/CountStats.java
new file mode 100644
index 000000000..c52b88a75
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/uisession/statistics/CountStats.java
@@ -0,0 +1,34 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.uisession.statistics;
+
+import it.unimi.dsi.fastutil.objects.Object2LongMap;
+
+public interface CountStats {
+
+	long getCount();
+
+	long getCountLastMinute();
+
+	long getCountLast10Seconds();
+
+	Object2LongMap<Class<?>> getCountByClass();
+
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/uisession/statistics/ImmutableUiSessionStats.java b/teamapps-ux/src/main/java/org/teamapps/uisession/statistics/ImmutableUiSessionStats.java
new file mode 100644
index 000000000..6e811e8aa
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/uisession/statistics/ImmutableUiSessionStats.java
@@ -0,0 +1,184 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.uisession.statistics;
+
+import it.unimi.dsi.fastutil.objects.Object2LongMap;
+import org.teamapps.uisession.UiSessionState;
+
+public class ImmutableUiSessionStats implements UiSessionStats {
+
+	private final long startTime;
+	private final long endTime;
+	private final String sessionId;
+	private final String name;
+	private final UiSessionState state;
+	private final ImmutableCountStats commandStats;
+	private final ImmutableCountStats commandResultStats;
+	private final ImmutableCountStats eventStats;
+	private final ImmutableCountStats queryStats;
+	private final ImmutableCountStats queryResultStats;
+	private final ImmutableSumStats sentDataStats;
+	private final ImmutableSumStats receivedDataStats;
+
+	public static class ImmutableCountStats implements CountStats {
+		private final long count;
+		private final long countLastMinute;
+		private final long countLast10Seconds;
+		private final Object2LongMap<Class<?>> countByClass;
+
+		public ImmutableCountStats(long count, long countLastMinute, long countLast10Seconds, Object2LongMap<Class<?>> countByClass) {
+			this.count = count;
+			this.countLastMinute = countLastMinute;
+			this.countLast10Seconds = countLast10Seconds;
+			this.countByClass = countByClass;
+		}
+
+		@Override
+		public long getCount() {
+			return count;
+		}
+
+		@Override
+		public long getCountLastMinute() {
+			return countLastMinute;
+		}
+
+		@Override
+		public long getCountLast10Seconds() {
+			return countLast10Seconds;
+		}
+
+		@Override
+		public Object2LongMap<Class<?>> getCountByClass() {
+			return countByClass;
+		}
+	}
+
+	public static class ImmutableSumStats implements SumStats {
+		private final long total;
+		private final long sumLastMinute;
+		private final long sumLast10Seconds;
+
+		public ImmutableSumStats(long total, long sumLastMinute, long sumLast10Seconds) {
+			this.total = total;
+			this.sumLastMinute = sumLastMinute;
+			this.sumLast10Seconds = sumLast10Seconds;
+		}
+
+		@Override
+		public long getSum() {
+			return total;
+		}
+
+		@Override
+		public long getSumLastMinute() {
+			return sumLastMinute;
+		}
+
+		@Override
+		public long getSumLast10Seconds() {
+			return sumLast10Seconds;
+		}
+	}
+
+	public ImmutableUiSessionStats(long startTime, long endTime,
+								   String sessionId, String name, UiSessionState state,
+								   ImmutableCountStats commandStats         ,
+								   ImmutableCountStats commandResultStats   ,
+								   ImmutableCountStats eventStats           ,
+								   ImmutableCountStats queryStats           ,
+								   ImmutableCountStats queryResultStats     ,
+								   ImmutableSumStats sentDataStats,
+								   ImmutableSumStats receivedDataStats
+	) {
+		this.startTime = startTime;
+		this.endTime = endTime;
+		this.sessionId = sessionId;
+		this.name = name;
+		this.state = state;
+		this.commandStats = commandStats;
+		this.commandResultStats = commandResultStats;
+		this.eventStats = eventStats;
+		this.queryStats = queryStats;
+		this.queryResultStats = queryResultStats;
+		this.sentDataStats = sentDataStats;
+		this.receivedDataStats = receivedDataStats;
+	}
+
+	@Override
+	public long getStartTime() {
+		return startTime;
+	}
+
+	@Override
+	public long getEndTime() {
+		return endTime;
+	}
+
+	@Override
+	public String getSessionId() {
+		return sessionId;
+	}
+
+	@Override
+	public String getName() {
+		return name;
+	}
+
+	@Override
+	public UiSessionState getState() {
+		return state;
+	}
+
+	@Override
+	public CountStats getCommandStats() {
+		return commandStats;
+	}
+
+	@Override
+	public CountStats getCommandResultStats() {
+		return commandResultStats;
+	}
+
+	@Override
+	public CountStats getEventStats() {
+		return eventStats;
+	}
+
+	@Override
+	public CountStats getQueryStats() {
+		return queryStats;
+	}
+
+	@Override
+	public CountStats getQueryResultStats() {
+		return queryResultStats;
+	}
+
+	@Override
+	public SumStats getSentDataStats() {
+		return sentDataStats;
+	}
+
+	@Override
+	public SumStats getReceivedDataStats() {
+		return receivedDataStats;
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/uisession/statistics/RunningUiSessionStats.java b/teamapps-ux/src/main/java/org/teamapps/uisession/statistics/RunningUiSessionStats.java
new file mode 100644
index 000000000..2afc3948d
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/uisession/statistics/RunningUiSessionStats.java
@@ -0,0 +1,256 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.uisession.statistics;
+
+import it.unimi.dsi.fastutil.objects.Object2LongMap;
+import it.unimi.dsi.fastutil.objects.Object2LongOpenHashMap;
+import org.teamapps.dto.UiCommand;
+import org.teamapps.dto.UiEvent;
+import org.teamapps.dto.UiQuery;
+import org.teamapps.uisession.UiSessionState;
+
+import java.util.ArrayDeque;
+import java.util.Deque;
+import java.util.concurrent.atomic.AtomicLong;
+
+public class RunningUiSessionStats implements UiSessionStats {
+
+	private static class RunningCountStats implements CountStats {
+		private final AtomicLong count = new AtomicLong();
+		private final AtomicLong currentChunkCount = new AtomicLong();
+		private final Deque<Long> count10sChunks = new ArrayDeque<>(6); // 1 minute
+		private long countLast10Seconds;
+		private long countLastMinute;
+		private final Object2LongMap<Class<?>> countByClass = new Object2LongOpenHashMap<>();
+
+		public void add(Class<?> aClass) {
+			count.incrementAndGet();
+			currentChunkCount.incrementAndGet();
+			countByClass.computeLong(aClass, (clazz, count) -> count != null ? count + 1 : 1);
+		}
+
+		public void flush() {
+			while (count10sChunks.size() >= 6) {
+				count10sChunks.removeFirst();
+			}
+			long currentChunkCount = this.currentChunkCount.getAndSet(0);
+			count10sChunks.addLast(currentChunkCount);
+			countLastMinute = count10sChunks.stream().mapToLong(value -> value).sum();
+			countLast10Seconds = currentChunkCount;
+		}
+
+		@Override
+		public long getCount() {
+			return count.get();
+		}
+
+		@Override
+		public long getCountLastMinute() {
+			return countLastMinute;
+		}
+
+		@Override
+		public long getCountLast10Seconds() {
+			return countLast10Seconds;
+		}
+
+		@Override
+		public Object2LongMap<Class<?>> getCountByClass() {
+			return countByClass;
+		}
+
+		public ImmutableUiSessionStats.ImmutableCountStats toImmutable() {
+			return new ImmutableUiSessionStats.ImmutableCountStats(count.get(), getCountLastMinute(), getCountLast10Seconds(), countByClass);
+		}
+	}
+
+	private static class RunningSumStats implements SumStats {
+		private long total;
+		private final Deque<Long> sum10sChunks = new ArrayDeque<>(6); // 1 minute
+		private long sumLast10Seconds;
+		private long sumLastMinute;
+
+		public void update(long total) {
+			while (sum10sChunks.size() >= 6) {
+				sum10sChunks.removeFirst();
+			}
+			long size10s = total - this.total;
+			sum10sChunks.addLast(size10s);
+			sumLastMinute = sum10sChunks.stream().mapToLong(value -> value).sum();
+			sumLast10Seconds = size10s;
+			this.total = total;
+		}
+
+		@Override
+		public long getSum() {
+			return total;
+		}
+
+		@Override
+		public long getSumLastMinute() {
+			return sumLastMinute;
+		}
+
+		@Override
+		public long getSumLast10Seconds() {
+			return sumLast10Seconds;
+		}
+
+		public ImmutableUiSessionStats.ImmutableSumStats toImmutable() {
+			return new ImmutableUiSessionStats.ImmutableSumStats(total, sumLastMinute, sumLast10Seconds);
+		}
+	}
+
+	private final long startTime;
+	private long endTime = -1;
+	private final String sessionId;
+	private String name;
+	private UiSessionState state = UiSessionState.ACTIVE;
+
+	private final RunningCountStats commandStats = new RunningCountStats();
+	private final RunningCountStats commandResultStats = new RunningCountStats();
+	private final RunningCountStats eventStats = new RunningCountStats();
+	private final RunningCountStats queryStats = new RunningCountStats();
+	private final RunningCountStats queryResultStats = new RunningCountStats();
+
+	private final RunningSumStats sentDataStats = new RunningSumStats();
+	private final RunningSumStats receivedDataStats = new RunningSumStats();
+
+
+	public RunningUiSessionStats(long startTime, String sessionId, String name) {
+		this.startTime = startTime;
+		this.sessionId = sessionId;
+		this.name = name;
+	}
+
+	@Override
+	public long getStartTime() {
+		return startTime;
+	}
+
+	@Override
+	public long getEndTime() {
+		return endTime;
+	}
+
+	@Override
+	public String getSessionId() {
+		return sessionId;
+	}
+
+	@Override
+	public String getName() {
+		return name;
+	}
+
+	@Override
+	public UiSessionState getState() {
+		return state;
+	}
+
+	@Override
+	public CountStats getCommandStats() {
+		return commandStats;
+	}
+
+	@Override
+	public CountStats getCommandResultStats() {
+		return commandResultStats;
+	}
+
+	@Override
+	public CountStats getEventStats() {
+		return eventStats;
+	}
+
+	@Override
+	public CountStats getQueryStats() {
+		return queryStats;
+	}
+
+	@Override
+	public CountStats getQueryResultStats() {
+		return queryResultStats;
+	}
+
+	@Override
+	public SumStats getSentDataStats() {
+		return sentDataStats;
+	}
+
+	@Override
+	public SumStats getReceivedDataStats() {
+		return receivedDataStats;
+	}
+
+	public void nameChanged(String name) {
+		this.name = name;
+	}
+
+	public void commandSent(UiCommand command) {
+		commandStats.add(command.getClass());
+	}
+
+	public void commandResultReceivedFor(Class<?> commandClass) {
+		commandResultStats.add(commandClass);
+	}
+
+	public void eventReceived(UiEvent event) {
+		eventStats.add(event.getClass());
+	}
+
+	public void queryReceived(UiQuery query) {
+		queryStats.add(query.getClass());
+	}
+
+	public void queryResultSentFor(UiQuery query) {
+		queryResultStats.add(query.getClass());
+	}
+
+
+	public void stateChanged(UiSessionState sessionState) {
+		state = sessionState;
+		if (state == UiSessionState.CLOSED) {
+			endTime = System.currentTimeMillis();
+		}
+	}
+
+	public ImmutableUiSessionStats immutableCopy() {
+		return new ImmutableUiSessionStats(startTime, endTime, sessionId, name, state,
+				commandStats.toImmutable(),
+				commandResultStats.toImmutable(),
+				eventStats.toImmutable(),
+				queryStats.toImmutable(),
+				queryResultStats.toImmutable(),
+				sentDataStats.toImmutable(),
+				receivedDataStats.toImmutable());
+	}
+
+	public void update(long totalDataSent, long totalDataReceived) {
+		commandStats.flush();
+		commandResultStats.flush();
+		eventStats.flush();
+		queryStats.flush();
+		queryResultStats.flush();
+		sentDataStats.update(totalDataSent);
+		receivedDataStats.update(totalDataReceived);
+	}
+
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/uisession/statistics/SessionStatsUpdatedEventData.java b/teamapps-ux/src/main/java/org/teamapps/uisession/statistics/SessionStatsUpdatedEventData.java
new file mode 100644
index 000000000..f3e590a83
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/uisession/statistics/SessionStatsUpdatedEventData.java
@@ -0,0 +1,42 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.uisession.statistics;
+
+import org.teamapps.uisession.SessionPair;
+
+import java.util.List;
+
+public class SessionStatsUpdatedEventData {
+	private final List<SessionPair> allSessions;
+	private final List<UiSessionStats> closedSessionsStatistics;
+
+	public SessionStatsUpdatedEventData(List<SessionPair> allSessions, List<UiSessionStats> closedSessionsStatistics) {
+		this.allSessions = allSessions;
+		this.closedSessionsStatistics = closedSessionsStatistics;
+	}
+
+	public List<SessionPair> getAllSessions() {
+		return allSessions;
+	}
+
+	public List<UiSessionStats> getClosedSessionsStatistics() {
+		return closedSessionsStatistics;
+	}
+}
diff --git a/teamapps-icon/src/main/java/org/teamapps/icons/api/IconStyle.java b/teamapps-ux/src/main/java/org/teamapps/uisession/statistics/SumStats.java
similarity index 80%
rename from teamapps-icon/src/main/java/org/teamapps/icons/api/IconStyle.java
rename to teamapps-ux/src/main/java/org/teamapps/uisession/statistics/SumStats.java
index ce2a3cc0d..2c8e345d1 100644
--- a/teamapps-icon/src/main/java/org/teamapps/icons/api/IconStyle.java
+++ b/teamapps-ux/src/main/java/org/teamapps/uisession/statistics/SumStats.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,15 +17,14 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-package org.teamapps.icons.api;
+package org.teamapps.uisession.statistics;
 
-public interface IconStyle {
+public interface SumStats {
 
-	String getStyleId();
+	long getSum();
 
-	String getStyleName();
-
-	boolean canBeUsedAsSubIcon();
+	long getSumLastMinute();
 
+	long getSumLast10Seconds();
 
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/uisession/statistics/UiSessionStats.java b/teamapps-ux/src/main/java/org/teamapps/uisession/statistics/UiSessionStats.java
new file mode 100644
index 000000000..2b77dd0e0
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/uisession/statistics/UiSessionStats.java
@@ -0,0 +1,41 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.uisession.statistics;
+
+import org.teamapps.uisession.UiSessionState;
+
+public interface UiSessionStats {
+
+	long getStartTime();
+	long getEndTime();
+	String getSessionId();
+	String getName();
+	UiSessionState getState();
+
+	CountStats getCommandStats();
+	CountStats getCommandResultStats();
+	CountStats getEventStats();
+	CountStats getQueryStats();
+	CountStats getQueryResultStats();
+
+	SumStats getSentDataStats();
+	SumStats getReceivedDataStats();
+
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/uisession/statistics/app/SessionStatsApplication.java b/teamapps-ux/src/main/java/org/teamapps/uisession/statistics/app/SessionStatsApplication.java
new file mode 100644
index 000000000..19dbcdfba
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/uisession/statistics/app/SessionStatsApplication.java
@@ -0,0 +1,51 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.uisession.statistics.app;
+
+import org.teamapps.icon.material.MaterialIcon;
+import org.teamapps.ux.application.ResponsiveApplication;
+import org.teamapps.ux.application.layout.ExtendedLayout;
+import org.teamapps.ux.application.perspective.Perspective;
+import org.teamapps.ux.application.view.View;
+
+public class SessionStatsApplication {
+
+	private final ResponsiveApplication responsiveApplication;
+
+	public SessionStatsApplication(SessionStatsSharedBaseTableModel baseTableModel) {
+		responsiveApplication = ResponsiveApplication.createApplication();
+		Perspective perspective = Perspective.createPerspective();
+
+		SessionStatsPerspective sessionStatsPerspective = new SessionStatsPerspective(baseTableModel);
+		View listView = View.createView(MaterialIcon.LIST, "Sessions", sessionStatsPerspective.getTable());
+		perspective.addView(listView, ExtendedLayout.CENTER);
+
+		View sessionView = View.createView(MaterialIcon.LIST, "Session", sessionStatsPerspective.getDetailVerticalLayout());
+		sessionView.addLocalButtonGroup(sessionStatsPerspective.getDetailsToolbarButtonGroup());
+		perspective.addView(sessionView, ExtendedLayout.RIGHT);
+
+		responsiveApplication.addPerspective(perspective);
+		responsiveApplication.showPerspective(perspective);
+	}
+
+	public ResponsiveApplication getResponsiveApplication() {
+		return responsiveApplication;
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/uisession/statistics/app/SessionStatsPerspective.java b/teamapps-ux/src/main/java/org/teamapps/uisession/statistics/app/SessionStatsPerspective.java
new file mode 100644
index 000000000..460745482
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/uisession/statistics/app/SessionStatsPerspective.java
@@ -0,0 +1,353 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.uisession.statistics.app;
+
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+import org.teamapps.data.value.SortDirection;
+import org.teamapps.icon.material.MaterialIcon;
+import org.teamapps.icons.Icon;
+import org.teamapps.icons.composite.CompositeIcon;
+import org.teamapps.uisession.UiSessionState;
+import org.teamapps.uisession.statistics.CountStats;
+import org.teamapps.uisession.statistics.SumStats;
+import org.teamapps.uisession.statistics.UiSessionStats;
+import org.teamapps.ux.component.Component;
+import org.teamapps.ux.component.field.*;
+import org.teamapps.ux.component.field.datetime.InstantDateTimeField;
+import org.teamapps.ux.component.flexcontainer.FlexSizeUnit;
+import org.teamapps.ux.component.flexcontainer.FlexSizingPolicy;
+import org.teamapps.ux.component.flexcontainer.VerticalLayout;
+import org.teamapps.ux.component.table.AbstractTableModel;
+import org.teamapps.ux.component.table.Table;
+import org.teamapps.ux.component.template.BaseTemplate;
+import org.teamapps.ux.component.template.BaseTemplateRecord;
+import org.teamapps.ux.component.toolbar.ToolbarButton;
+import org.teamapps.ux.component.toolbar.ToolbarButtonGroup;
+import org.teamapps.ux.session.SessionContext;
+
+import java.lang.invoke.MethodHandles;
+import java.time.Instant;
+import java.util.Comparator;
+import java.util.List;
+import java.util.Objects;
+import java.util.function.Function;
+import java.util.stream.Collectors;
+
+public class SessionStatsPerspective {
+
+	private static final Logger LOGGER = LoggerFactory.getLogger(MethodHandles.lookup().lookupClass());
+
+	private final Table<SessionStatsTableRecord> table;
+	private final VerticalLayout detailVerticalLayout;
+	private final ToolbarButtonGroup detailsToolbarButtonGroup;
+	private CountStatsTableModel commandStatsTableModel;
+	private CountStatsTableModel eventStatsTableModel;
+	private CountStatsTableModel commandResultStatsTableModel;
+	private CountStatsTableModel queryStatsTableModel;
+	private CountStatsTableModel queryResultStatsTableModel;
+
+	public SessionStatsPerspective(SessionStatsSharedBaseTableModel baseTableModel) {
+		table = createMasterTable(baseTableModel);
+		detailVerticalLayout = createDetailVerticalLayout();
+		detailsToolbarButtonGroup = createDetailsToolbarButtonGroup();
+	}
+
+	private Table<SessionStatsTableRecord> createMasterTable(SessionStatsSharedBaseTableModel baseTableModel) {
+		Table<SessionStatsTableRecord> table = new Table<>();
+		table.addColumn("startTime", "Start Time", new InstantDateTimeField()).setValueExtractor(record -> Instant.ofEpochMilli(record.getStatistics().getStartTime()));
+		table.addColumn("endTime", "End Time", new InstantDateTimeField()).setValueExtractor(record -> record.getStatistics().getEndTime() > 0 ? Instant.ofEpochMilli(record.getStatistics().getEndTime()) : null);
+		table.addColumn("sessionId", "ID", new TextField()).setDefaultWidth(50)
+				.setValueExtractor(record -> record.getStatistics().getSessionId().toString());
+		table.addColumn("name", "Name", new TextField()).setValueExtractor(record -> record.getStatistics().getName());
+		table.addColumn("state", "State", new TemplateField<>(BaseTemplate.LIST_ITEM_SMALL_ICON_SINGLE_LINE)).setDefaultWidth(120)
+				.setValueExtractor(record -> {
+					Icon<?, ?> icon;
+					UiSessionState state = record.getStatistics().getState();
+					if (state == UiSessionState.ACTIVE) {
+						icon = MaterialIcon.CHECK;
+					} else if (state == UiSessionState.NEARLY_INACTIVE) {
+						icon = CompositeIcon.of(MaterialIcon.CHECK, MaterialIcon.SCHEDULE);
+					}  else if (state == UiSessionState.INACTIVE) {
+						icon = MaterialIcon.SCHEDULE;
+					} else if (state == UiSessionState.CLOSED) {
+						icon = MaterialIcon.CANCEL;
+					} else {
+						icon = MaterialIcon.HELP_OUTLINE;
+					}
+					return new BaseTemplateRecord<>(icon, state.name());
+				});
+		table.addColumn("bufferSize", "Cmd Buf Size", new NumberField(0)).setDefaultWidth(90)
+				.setValueExtractor(record -> record.getClientBackPressureInfo() != null ? record.getClientBackPressureInfo().getUnconsumedCommandsCount() : null);
+		table.addColumn("readyToReceive", "Ready To Receive", new CheckBox()).setDefaultWidth(40)
+				.setValueExtractor(record -> record.getClientBackPressureInfo() != null && record.getClientBackPressureInfo().getRemainingRequestedCommands() > 0);
+
+		addSumStatsColumns(table, "sentData", "Data Sent", record -> record.getStatistics().getSentDataStats());
+		addSumStatsColumns(table, "receivedData", "Data Recvd.", record -> record.getStatistics().getReceivedDataStats());
+
+		addCountStatsColumns(table, "command", "Commands", record -> record.getStatistics().getCommandStats());
+		addCountStatsColumns(table, "commandResult", "CmdResults", record -> record.getStatistics().getCommandResultStats());
+		addCountStatsColumns(table, "event", "Events", record -> record.getStatistics().getEventStats());
+		addCountStatsColumns(table, "query", "Queries", record -> record.getStatistics().getQueryStats());
+		addCountStatsColumns(table, "queryResult", "QuResults", record -> record.getStatistics().getQueryResultStats());
+
+		table.setModel(new StatsTableModel(baseTableModel));
+
+		table.onSingleRowSelected.addListener((record) -> {
+			commandStatsTableModel.setStats(record.getStatistics());
+			eventStatsTableModel.setStats(record.getStatistics());
+			commandResultStatsTableModel.setStats(record.getStatistics());
+			queryStatsTableModel.setStats(record.getStatistics());
+			queryResultStatsTableModel.setStats(record.getStatistics());
+		});
+
+		return table;
+	}
+
+	private void addCountStatsColumns(Table<SessionStatsTableRecord> table, String propertyNamePrefix, String displayNameInfix, Function<SessionStatsTableRecord, CountStats> countStatsExtractor) {
+		table.addColumn(propertyNamePrefix + "Total", displayNameInfix, new NumberField(0)).setDefaultWidth(110)
+				.setValueExtractor(record -> countStatsExtractor.apply(record).getCount());
+		table.addColumn(propertyNamePrefix + "LastMinute", displayNameInfix + " (1m)", new NumberField(0)).setDefaultWidth(110)
+				.setValueExtractor(record -> countStatsExtractor.apply(record).getCountLastMinute());
+//		table.addColumn(propertyNamePrefix + "Last10Seconds", displayNameInfix + "(10s)", new NumberField(0)).setDefaultWidth(120)
+//				.setValueExtractor(record -> countStatsExtractor.apply(record).getCountLast10Seconds());
+	}
+
+	private void addSumStatsColumns(Table<SessionStatsTableRecord> table, String propertyNamePrefix, String displayNameInfix, Function<SessionStatsTableRecord, SumStats> sumStatsExtractor) {
+		table.addColumn(propertyNamePrefix + "Total", displayNameInfix, new NumberField(0)).setDefaultWidth(110)
+				.setValueExtractor(record -> sumStatsExtractor.apply(record).getSum());
+		table.addColumn(propertyNamePrefix + "LastMinute", displayNameInfix + " (1m)", new NumberField(0)).setDefaultWidth(110)
+				.setValueExtractor(record -> sumStatsExtractor.apply(record).getSumLastMinute());
+//		table.addColumn(propertyNamePrefix + "Last10Seconds", displayNameInfix + "(10s)", new NumberField(0)).setDefaultWidth(120)
+//				.setValueExtractor(record -> sumStatsExtractor.apply(record).getSumLast10Seconds());
+	}
+
+	public Table<SessionStatsTableRecord> getTable() {
+		return table;
+	}
+
+	private VerticalLayout createDetailVerticalLayout() {
+		VerticalLayout verticalLayout = new VerticalLayout();
+		verticalLayout.setCssStyle("overflow", "auto");
+		verticalLayout.addComponent(new Label("Commands"));
+		commandStatsTableModel = new CountStatsTableModel(UiSessionStats::getCommandStats);
+		verticalLayout.addComponent(createCountStatsTable(commandStatsTableModel), new FlexSizingPolicy(300, FlexSizeUnit.PIXEL, 0, 0));
+		verticalLayout.addComponent(new Label("Events"));
+		eventStatsTableModel = new CountStatsTableModel(UiSessionStats::getEventStats);
+		verticalLayout.addComponent(createCountStatsTable(eventStatsTableModel), new FlexSizingPolicy(300, FlexSizeUnit.PIXEL, 0, 0));
+		verticalLayout.addComponent(new Label("CommandResults"));
+		commandResultStatsTableModel = new CountStatsTableModel(UiSessionStats::getCommandResultStats);
+		verticalLayout.addComponent(createCountStatsTable(commandResultStatsTableModel), new FlexSizingPolicy(300, FlexSizeUnit.PIXEL, 0, 0));
+		verticalLayout.addComponent(new Label("Queries"));
+		queryStatsTableModel = new CountStatsTableModel(UiSessionStats::getQueryStats);
+		verticalLayout.addComponent(createCountStatsTable(queryStatsTableModel), new FlexSizingPolicy(300, FlexSizeUnit.PIXEL, 0, 0));
+		verticalLayout.addComponent(new Label("QueryResults"));
+		queryResultStatsTableModel = new CountStatsTableModel(UiSessionStats::getQueryResultStats);
+		verticalLayout.addComponent(createCountStatsTable(queryResultStatsTableModel), new FlexSizingPolicy(300, FlexSizeUnit.PIXEL, 0, 0));
+		return verticalLayout;
+	}
+
+	public Component getDetailVerticalLayout() {
+		return detailVerticalLayout;
+	}
+
+	private ToolbarButtonGroup createDetailsToolbarButtonGroup() {
+		ToolbarButtonGroup toolbarButtonGroup = new ToolbarButtonGroup();
+		toolbarButtonGroup.addButton(ToolbarButton.createSmall(MaterialIcon.REFRESH, "Refresh")).onClick.addListener(() -> {
+			commandStatsTableModel.refresh();
+			eventStatsTableModel.refresh();
+			commandResultStatsTableModel.refresh();
+			queryStatsTableModel.refresh();
+			queryResultStatsTableModel.refresh();
+		});
+		return toolbarButtonGroup;
+	}
+
+	public ToolbarButtonGroup getDetailsToolbarButtonGroup() {
+		return detailsToolbarButtonGroup;
+	}
+
+	private static class CountStatEntry {
+		private final Class<?> clazz;
+		private final long count;
+
+		public CountStatEntry(Class<?> clazz, long count) {
+			this.clazz = clazz;
+			this.count = count;
+		}
+	}
+
+	private Table<CountStatEntry> createCountStatsTable(CountStatsTableModel model) {
+		Table<CountStatEntry> table = new Table<>();
+		table.addColumn("className", null, "Class", new TextField(), 400).setValueExtractor(entry -> entry.clazz.getName());
+		table.addColumn("count", null, "Count", new NumberField(0), 80).setMinWidth(80).setMaxWidth(120).setValueExtractor(entry -> entry.count);
+		table.setForceFitWidth(true);
+		table.setModel(model);
+		return table;
+	}
+
+	private static class StatsTableModel extends AbstractTableModel<SessionStatsTableRecord> {
+		private final SessionStatsSharedBaseTableModel baseTableModel;
+
+		public StatsTableModel(SessionStatsSharedBaseTableModel baseTableModel) {
+			this.baseTableModel = baseTableModel;
+			baseTableModel.onUpdated.addListener(() -> {
+				if (SessionContext.current().getClientBackPressureInfo().getUnconsumedCommandsCount() < 100) {
+					this.onAllDataChanged.fire();
+				} else {
+					LOGGER.info("Not sending updates due to high amount of unconsumed commands!");
+				}
+			});
+		}
+
+		@Override
+		public int getCount() {
+			return baseTableModel.getRecords().size();
+		}
+
+		@Override
+		public List<SessionStatsTableRecord> getRecords(int startIndex, int length) {
+			Comparator<SessionStatsTableRecord> comparator = (o1, o2) -> 0;
+			if (sorting != null) {
+				switch (sorting.getFieldName()) {
+					case "startTime":
+						comparator = Comparator.comparing(record -> record.getStatistics().getStartTime());
+						break;
+					case "endTime":
+						comparator = Comparator.comparing(record -> record.getStatistics().getEndTime());
+						break;
+					case "sessionId":
+						comparator = Comparator.comparing(record -> record.getStatistics().getSessionId().toString());
+						break;
+					case "name":
+						comparator = Comparator.comparing(record -> record.getStatistics().getName());
+						break;
+					case "state":
+						comparator = Comparator.comparing(record -> record.getStatistics().getState());
+						break;
+					case "bufferSize":
+						comparator = Comparator.comparing(record -> record.getClientBackPressureInfo() != null ? record.getClientBackPressureInfo().getUnconsumedCommandsCount() : -1);
+						break;
+					case "readyToReceive":
+						comparator = Comparator.comparing(record -> record.getClientBackPressureInfo() != null && record.getClientBackPressureInfo().getRemainingRequestedCommands() > 0);
+						break;
+					case "sentDataTotal":
+						comparator = Comparator.comparing(record -> record.getStatistics().getSentDataStats().getSum());
+						break;
+					case "sentDataLastMinute":
+						comparator = Comparator.comparing(record -> record.getStatistics().getSentDataStats().getSumLastMinute());
+						break;
+					case "receivedDataTotal":
+						comparator = Comparator.comparing(record -> record.getStatistics().getReceivedDataStats().getSum());
+						break;
+					case "receivedDataLastMinute":
+						comparator = Comparator.comparing(record -> record.getStatistics().getReceivedDataStats().getSumLastMinute());
+						break;
+					case "commandTotal":
+						comparator = Comparator.comparing(record -> record.getStatistics().getCommandStats().getCount());
+						break;
+					case "commandLastMinute":
+						comparator = Comparator.comparing(record -> record.getStatistics().getCommandStats().getCountLastMinute());
+						break;
+					case "commandResultTotal":
+						comparator = Comparator.comparing(record -> record.getStatistics().getCommandResultStats().getCount());
+						break;
+					case "commandResultLastMinute":
+						comparator = Comparator.comparing(record -> record.getStatistics().getCommandResultStats().getCountLastMinute());
+						break;
+					case "eventTotal":
+						comparator = Comparator.comparing(record -> record.getStatistics().getEventStats().getCount());
+						break;
+					case "eventLastMinute":
+						comparator = Comparator.comparing(record -> record.getStatistics().getEventStats().getCountLastMinute());
+						break;
+					case "queryTotal":
+						comparator = Comparator.comparing(record -> record.getStatistics().getQueryStats().getCount());
+						break;
+					case "queryLastMinute":
+						comparator = Comparator.comparing(record -> record.getStatistics().getQueryStats().getCountLastMinute());
+						break;
+					case "queryResultTotal":
+						comparator = Comparator.comparing(record -> record.getStatistics().getQueryResultStats().getCount());
+						break;
+					case "queryResultLastMinute":
+						comparator = Comparator.comparing(record -> record.getStatistics().getQueryResultStats().getCountLastMinute());
+						break;
+
+				}
+				if (sorting.getSortDirection() == SortDirection.DESC) {
+					comparator = comparator.reversed();
+				}
+			}
+			return baseTableModel.getRecords().stream()
+					.sorted(comparator)
+					.skip(startIndex)
+					.limit(length)
+					.collect(Collectors.toList());
+		}
+	}
+
+	private class CountStatsTableModel extends AbstractTableModel<CountStatEntry> {
+
+		private final Function<UiSessionStats, CountStats> countStatExtractor;
+		private UiSessionStats stats;
+
+		private CountStatsTableModel(Function<UiSessionStats, CountStats> countStatExtractor) {
+			this.countStatExtractor = countStatExtractor;
+		}
+
+		public void setStats(UiSessionStats stats) {
+			this.stats = stats;
+			onAllDataChanged.fire();
+		}
+
+		@Override
+		public int getCount() {
+			if (stats == null) {
+				return 0;
+			}
+			return countStatExtractor.apply(stats).getCountByClass().size();
+		}
+
+		@Override
+		public List<CountStatEntry> getRecords(int startIndex, int length) {
+			if (stats == null) {
+				return List.of();
+			}
+			Comparator<CountStatEntry> comparator = (o1, o2) -> 0;
+			if (sorting != null) {
+				comparator = Objects.equals(sorting.getFieldName(), "className") ? Comparator.comparing(e -> e.clazz.getName()) : Comparator.comparing(e -> e.count);
+				if (sorting.getSortDirection() == SortDirection.DESC || sorting.getFieldName() == null) {
+					comparator = comparator.reversed();
+				}
+			}
+			return countStatExtractor.apply(stats).getCountByClass().object2LongEntrySet().stream()
+					.map(e -> new CountStatEntry(e.getKey(), e.getLongValue()))
+					.sorted(comparator)
+					.skip(startIndex)
+					.limit(length)
+					.collect(Collectors.toList());
+		}
+
+		public void refresh() {
+			onAllDataChanged.fire();
+		}
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/uisession/statistics/app/SessionStatsSharedBaseTableModel.java b/teamapps-ux/src/main/java/org/teamapps/uisession/statistics/app/SessionStatsSharedBaseTableModel.java
new file mode 100644
index 000000000..93de3829c
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/uisession/statistics/app/SessionStatsSharedBaseTableModel.java
@@ -0,0 +1,51 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.uisession.statistics.app;
+
+import org.teamapps.event.Event;
+import org.teamapps.uisession.TeamAppsSessionManager;
+
+import java.util.List;
+import java.util.stream.Collectors;
+import java.util.stream.Stream;
+
+public class SessionStatsSharedBaseTableModel {
+
+	public final Event<Void> onUpdated = new Event<>();
+
+	private List<SessionStatsTableRecord> records = List.of();
+
+	public SessionStatsSharedBaseTableModel(TeamAppsSessionManager sessionManager) {
+		sessionManager.onStatsUpdated.addListener(eventData -> {
+			this.records = Stream.concat(
+					eventData.getAllSessions().stream()
+							.map(sessionPair -> new UiSessionSessionStatsTableRecord(sessionPair.getUiSession())),
+					eventData.getClosedSessionsStatistics().stream()
+							.map(UiSessionStatsStatsTableRecord::new)
+			).collect(Collectors.toList());
+			onUpdated.fire();
+		}, false);
+	}
+
+	public List<SessionStatsTableRecord> getRecords() {
+		return records;
+	}
+
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/mobile/MobileLayoutAnimation.java b/teamapps-ux/src/main/java/org/teamapps/uisession/statistics/app/SessionStatsTableRecord.java
similarity index 65%
rename from teamapps-ux/src/main/java/org/teamapps/ux/component/mobile/MobileLayoutAnimation.java
rename to teamapps-ux/src/main/java/org/teamapps/uisession/statistics/app/SessionStatsTableRecord.java
index 9440e547f..e6ef67dd8 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/mobile/MobileLayoutAnimation.java
+++ b/teamapps-ux/src/main/java/org/teamapps/uisession/statistics/app/SessionStatsTableRecord.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,18 +17,18 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-package org.teamapps.ux.component.mobile;
+package org.teamapps.uisession.statistics.app;
 
-import org.teamapps.dto.UiMobileLayoutAnimation;
+import org.teamapps.uisession.ClientBackPressureInfo;
+import org.teamapps.uisession.UiSession;
+import org.teamapps.uisession.statistics.UiSessionStats;
 
-public enum MobileLayoutAnimation {
+public interface SessionStatsTableRecord {
 
-	NONE, FORWARD, BACKWARD, FADE_ZOOM_IN, FADE_ZOOM_OUT;
+	UiSession getUiSession();
 
-	;
+	UiSessionStats getStatistics();
 
-	public UiMobileLayoutAnimation toUiMobileLayoutAnimation() {
-		return UiMobileLayoutAnimation.valueOf(name());
-	}
+	ClientBackPressureInfo getClientBackPressureInfo();
 
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/uisession/statistics/app/UiSessionSessionStatsTableRecord.java b/teamapps-ux/src/main/java/org/teamapps/uisession/statistics/app/UiSessionSessionStatsTableRecord.java
new file mode 100644
index 000000000..7b561f590
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/uisession/statistics/app/UiSessionSessionStatsTableRecord.java
@@ -0,0 +1,63 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.uisession.statistics.app;
+
+import org.teamapps.uisession.ClientBackPressureInfo;
+import org.teamapps.uisession.UiSession;
+import org.teamapps.uisession.statistics.UiSessionStats;
+
+public class UiSessionSessionStatsTableRecord implements SessionStatsTableRecord {
+
+	private final UiSession uiSession;
+	private final ClientBackPressureInfo clientBackPressureInfo;
+
+	public UiSessionSessionStatsTableRecord(UiSession uiSession) {
+		this.uiSession = uiSession;
+		this.clientBackPressureInfo = uiSession.getClientBackPressureInfo(); // proactively extract, so not every column has to do it!
+	}
+
+	@Override
+	public UiSession getUiSession() {
+		return uiSession;
+	}
+
+	@Override
+	public UiSessionStats getStatistics() {
+		return uiSession.getStatistics();
+	}
+
+	@Override
+	public ClientBackPressureInfo getClientBackPressureInfo() {
+		return clientBackPressureInfo;
+	}
+
+	@Override
+	public boolean equals(Object o) {
+		if (this == o) return true;
+		if (o == null || getClass() != o.getClass()) return false;
+		UiSessionSessionStatsTableRecord that = (UiSessionSessionStatsTableRecord) o;
+		return uiSession.getSessionId().equals(that.uiSession.getSessionId());
+	}
+
+	@Override
+	public int hashCode() {
+		return uiSession.getSessionId().hashCode();
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/data/value/filter/AllMatchingFilter.java b/teamapps-ux/src/main/java/org/teamapps/uisession/statistics/app/UiSessionStatsStatsTableRecord.java
similarity index 55%
rename from teamapps-ux/src/main/java/org/teamapps/data/value/filter/AllMatchingFilter.java
rename to teamapps-ux/src/main/java/org/teamapps/uisession/statistics/app/UiSessionStatsStatsTableRecord.java
index d32b88c6c..8baf3e680 100644
--- a/teamapps-ux/src/main/java/org/teamapps/data/value/filter/AllMatchingFilter.java
+++ b/teamapps-ux/src/main/java/org/teamapps/uisession/statistics/app/UiSessionStatsStatsTableRecord.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,36 +17,32 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-package org.teamapps.data.value.filter;
+package org.teamapps.uisession.statistics.app;
 
-import org.teamapps.data.value.DataRecord;
+import org.teamapps.uisession.ClientBackPressureInfo;
+import org.teamapps.uisession.UiSession;
+import org.teamapps.uisession.statistics.UiSessionStats;
 
-import static org.teamapps.data.value.filter.FilterType.ALL_MATCHING;
+public class UiSessionStatsStatsTableRecord implements SessionStatsTableRecord {
 
-public class AllMatchingFilter implements Filter {
+	private final UiSessionStats uiSessionStats;
 
-	@Override
-	public FilterType getType() {
-		return ALL_MATCHING;
+	public UiSessionStatsStatsTableRecord(UiSessionStats uiSessionStats) {
+		this.uiSessionStats = uiSessionStats;
 	}
 
 	@Override
-	public String getProperty() {
+	public UiSession getUiSession() {
 		return null;
 	}
 
 	@Override
-	public boolean matches(DataRecord record, boolean treatNullAsDefaultValue) {
-		return true;
+	public UiSessionStats getStatistics() {
+		return uiSessionStats;
 	}
 
 	@Override
-	public String explain(int filterLevel) {
-		return createLevelIndentString(filterLevel) + "ALL-MATCHING\n";
-	}
-
-	@Override
-	public Filter and(Filter filter) {
-		return filter == null ? this : filter;
+	public ClientBackPressureInfo getClientBackPressureInfo() {
+		return null;
 	}
 }
diff --git a/teamapps-icon/src/main/java/org/teamapps/icons/api/IconTheme.java b/teamapps-ux/src/main/java/org/teamapps/util/NamedThreadFactory.java
similarity index 55%
rename from teamapps-icon/src/main/java/org/teamapps/icons/api/IconTheme.java
rename to teamapps-ux/src/main/java/org/teamapps/util/NamedThreadFactory.java
index 920fc2dde..634f7a4b2 100644
--- a/teamapps-icon/src/main/java/org/teamapps/icons/api/IconTheme.java
+++ b/teamapps-ux/src/main/java/org/teamapps/util/NamedThreadFactory.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,34 +17,24 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-package org.teamapps.icons.api;
+package org.teamapps.util;
 
-public interface IconTheme {
+import java.util.concurrent.ThreadFactory;
+import java.util.concurrent.atomic.AtomicInteger;
 
-	IconStyle getBaseIconStyle();
+public class NamedThreadFactory implements ThreadFactory {
+	private final AtomicInteger threadNumber = new AtomicInteger(1);
+	private final String namePrefix;
+	private final boolean deamon;
 
-	IconStyle getSubIconStyle();
-
-	default String getStyleId(boolean baseStyle) {
-		if (baseStyle) {
-			return getBaseIconStyle().getStyleId();
-		} else {
-			return getSubIconStyle().getStyleId();
-		}
+	public NamedThreadFactory(String name, boolean deamon) {
+		namePrefix = name + "-";
+		this.deamon = deamon;
 	}
 
-	static IconTheme of(IconStyle baseIconStyle, IconStyle subIconStyle) {
-		return new IconTheme() {
-			@Override
-			public IconStyle getBaseIconStyle() {
-				return baseIconStyle;
-			}
-
-			@Override
-			public IconStyle getSubIconStyle() {
-				return subIconStyle;
-			}
-		};
+	public Thread newThread(Runnable r) {
+		Thread t = new Thread(null, r, namePrefix + threadNumber.getAndIncrement());
+		t.setDaemon(deamon);
+		return t;
 	}
-
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/util/ReflectionUtil.java b/teamapps-ux/src/main/java/org/teamapps/util/ReflectionUtil.java
index 5ba639a66..8f1397179 100644
--- a/teamapps-ux/src/main/java/org/teamapps/util/ReflectionUtil.java
+++ b/teamapps-ux/src/main/java/org/teamapps/util/ReflectionUtil.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -49,27 +49,54 @@ public static List<Field> findFields(Class<?> clazz, Predicate<Field> predicate)
 		return matchingFields;
 	}
 
+	public static Field findField(Class<?> clazz, Predicate<Field> predicate) {
+		List<Field> fields = findFields(clazz, predicate);
+		return fields.size() > 0 ? fields.get(0) : null;
+	}
+
+	public static Field findField(Class<?> clazz, String fieldName) {
+		return findField(clazz, field -> field.getName().equals(fieldName));
+	}
+
 	public static List<Method> findMethods(Class<?> clazz, Predicate<Method> predicate) {
-		List<Method> matchingFields = new ArrayList<>();
-		Class<?> c = clazz;
-		while (c != null) {
+		List<Method> matchingMethods = new ArrayList<>();
+
+		List<Class<?>> hierarchy = getAllExtendedOrImplementedTypesRecursively(clazz);
+		for (Class<?> c : hierarchy) {
 			for (Method method : c.getDeclaredMethods()) {
 				if (predicate.test(method)) {
-					matchingFields.add(method);
+					matchingMethods.add(method);
 				}
 			}
-			c = c.getSuperclass();
 		}
-		return matchingFields;
+		return matchingMethods;
+	}
+
+	public static List<Class<?>> getAllExtendedOrImplementedTypesRecursively(Class<?> clazz) {
+		List<Class<?>> res = new ArrayList<>();
+
+		do {
+			res.add(clazz);
+
+			Class<?>[] interfaces = clazz.getInterfaces();
+			for (Class<?> interf : interfaces) {
+				res.add(interf);
+				res.addAll(getAllExtendedOrImplementedTypesRecursively(interf));
+			}
+
+			clazz = clazz.getSuperclass();
+		} while (clazz != null);
+
+		return res.stream().distinct().collect(Collectors.toList());
 	}
 
 	public static Method findMethod(Class<?> clazz, Predicate<Method> predicate) {
 		List<Method> methods = findMethods(clazz, predicate);
-		if (methods.size() > 0) {
-			return methods.get(0);
-		} else {
-			return null;
-		}
+		return methods.size() > 0 ? methods.get(0) : null;
+	}
+
+	public static Method findMethod(Class<?> clazz, String methodName) {
+		return findMethod(clazz, method -> method.getName().equals(methodName));
 	}
 
 	public static Method findMethodByName(Class<?> clazz, String methodName) {
@@ -77,42 +104,28 @@ public static Method findMethodByName(Class<?> clazz, String methodName) {
 	}
 
 	public static Method findGetter(Class<?> clazz, String propertyName) {
+		String methodName = "get" + StringUtils.capitalize(propertyName);
 		return findMethods(clazz,
-				method -> (method.getName().equals("get" + StringUtils.capitalize(propertyName)) || method.getName().equals("is" + StringUtils.capitalize(propertyName))) && method.getParameterCount() == 0)
+				method -> (method.getName().equals(methodName) || method.getName().equals("is" + StringUtils.capitalize(propertyName))) && method.getParameterCount() == 0)
 				.stream()
 				.findFirst().orElse(null);
 	}
 
 	public static Method findSetter(Class<?> clazz, String propertyName) {
-		return findMethods(clazz, method -> method.getName().equals("set" + StringUtils.capitalize(propertyName)) && method.getParameterCount() == 1)
+		String methodName = "set" + StringUtils.capitalize(propertyName);
+		return findMethods(clazz, method -> method.getName().equals(methodName) && method.getParameterCount() == 1)
 				.stream()
 				.findFirst().orElse(null);
 	}
 
 	public static <V> V getPropertyValue(Object o, String propertyName) {
-		try {
-			return (V) findGetter(o.getClass(), propertyName).invoke(o);
-		} catch (Exception e) {
-			throw new RuntimeException("Invocation failed.", e);
-		}
+		return (V) invokeMethod(o, findGetter(o.getClass(), propertyName));
 	}
 
-	public static <V> void setProperty(Object o, String propertyName, Object value) {
-		try {
-			findSetter(o.getClass(), propertyName).invoke(o, value);
-		} catch (Exception e) {
-			throw new RuntimeException("Invocation failed.", e);
-		}
+	public static <V> void setProperty(Object o, String propertyName, V value) {
+		invokeMethod(o, findSetter(o.getClass(), propertyName), value);
 	}
 
-	public static Object getFieldValue(Object object, Field field) {
-		try {
-			field.setAccessible(true);
-			return field.get(object);
-		} catch (IllegalAccessException e) {
-			throw new IllegalStateException(e);
-		}
-	}
 
 	public static String toStringUsingReflection(Object o) {
 		if (o == null) {
@@ -146,7 +159,7 @@ public static <RECORD> Object invokeMethod(RECORD object, Method method, Object.
 		try {
 			return method.invoke(object, parameters);
 		} catch (IllegalAccessException | InvocationTargetException e) {
-			throw new RuntimeException(e);
+			throw new RuntimeException("Exception while invoking method " + method.getName(), e);
 		} catch (IllegalArgumentException e) {
 			String expectedParameterTypesString = Arrays.stream(method.getParameterTypes())
 					.map(paramClass -> paramClass.getSimpleName())
@@ -157,4 +170,36 @@ public static <RECORD> Object invokeMethod(RECORD object, Method method, Object.
 			throw new IllegalArgumentException("Could not invoke method " + method.getName() + "(" + expectedParameterTypesString + ") with given parameter types: " + actualParameterTypesString, e);
 		}
 	}
+
+	public static Object readField(Object object, Field field, boolean makeAccessibleIfNecessary) {
+		try {
+			if (makeAccessibleIfNecessary && !field.canAccess(object)) {
+				field.setAccessible(true);
+			}
+			return field.get(object);
+		} catch (IllegalAccessException e) {
+			throw new RuntimeException(e);
+		}
+	}
+
+	public static void readField(Object object, String fieldName, boolean makeAccessibleIfNecessary) {
+		Field field = ReflectionUtil.findField(object.getClass(), fieldName);
+		ReflectionUtil.readField(object, field, makeAccessibleIfNecessary);
+	}
+
+	public static void setField(Object object, Field field, Object value, boolean makeAccessibleIfNecessary) {
+		try {
+			if (makeAccessibleIfNecessary && !field.canAccess(object)) {
+				field.setAccessible(true);
+			}
+			field.set(object, value);
+		} catch (IllegalAccessException e) {
+			throw new RuntimeException(e);
+		}
+	}
+
+	public static void setField(Object object, String fieldName, Object value, boolean makeAccessibleIfNecessary) {
+		Field field = ReflectionUtil.findField(object.getClass(), fieldName);
+		ReflectionUtil.setField(object, field, value, makeAccessibleIfNecessary);
+	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/util/StreamUtil.java b/teamapps-ux/src/main/java/org/teamapps/util/StreamUtil.java
index 7ea5621f9..9c5703b56 100644
--- a/teamapps-ux/src/main/java/org/teamapps/util/StreamUtil.java
+++ b/teamapps-ux/src/main/java/org/teamapps/util/StreamUtil.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -20,7 +20,10 @@
 package org.teamapps.util;
 
 import java.util.LinkedHashMap;
+import java.util.Set;
+import java.util.concurrent.ConcurrentHashMap;
 import java.util.function.Function;
+import java.util.function.Predicate;
 import java.util.stream.Collector;
 import java.util.stream.Collectors;
 
@@ -33,4 +36,9 @@ public class StreamUtil {
 		);
 	}
 
+	public static <T> Predicate<T> distinctByKey(Function<? super T, ?> keyExtractor) {
+		Set<Object> seen = ConcurrentHashMap.newKeySet();
+		return t -> seen.add(keyExtractor.apply(t));
+	}
+
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/util/threading/CompletableFutureChainSequentialExecutorFactory.java b/teamapps-ux/src/main/java/org/teamapps/util/threading/CompletableFutureChainSequentialExecutorFactory.java
new file mode 100644
index 000000000..53a519124
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/util/threading/CompletableFutureChainSequentialExecutorFactory.java
@@ -0,0 +1,134 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.util.threading;
+
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+
+import java.util.List;
+import java.util.concurrent.*;
+import java.util.concurrent.atomic.AtomicInteger;
+import java.util.concurrent.atomic.AtomicReference;
+
+import static org.teamapps.common.util.ExceptionUtil.softenExceptions;
+
+public class CompletableFutureChainSequentialExecutorFactory implements SequentialExecutorFactory {
+
+	private static final Logger LOGGER = LoggerFactory.getLogger(CompletableFutureChainSequentialExecutorFactory.class);
+
+	private final AtomicReference<MinMaxAverageStats> delayStats = new AtomicReference<>(new MinMaxAverageStats());
+	private final AtomicReference<MinMaxAverageStats> executionTimeStats = new AtomicReference<>(new MinMaxAverageStats());
+
+	private final ExecutorService pool;
+
+	public CompletableFutureChainSequentialExecutorFactory(int nThreads) {
+		this(Executors.newFixedThreadPool(nThreads));
+	}
+
+	public CompletableFutureChainSequentialExecutorFactory(ExecutorService executorService) {
+		pool = executorService;
+
+		ScheduledExecutorService statsLogExecutorService = Executors.newSingleThreadScheduledExecutor();
+		statsLogExecutorService.scheduleAtFixedRate(() -> {
+			MinMaxAverageStats delayStats = this.delayStats.getAndSet(new MinMaxAverageStats());
+			MinMaxAverageStats executionTimeStats = this.executionTimeStats.getAndSet(new MinMaxAverageStats());
+			if (delayStats.getMax() > 3000) {
+				LOGGER.warn("Delays critical: min: {}, max: {}, avg: {}, count: {}", delayStats.getMin(), delayStats.getMax(), delayStats.getAvg(), delayStats.getCount());
+			}
+			if (executionTimeStats.getMax() > 1000) {
+				LOGGER.warn("Execution times critical: min: {}, max: {}, avg: {}, count: {}", executionTimeStats.getMin(), executionTimeStats.getMax(), executionTimeStats.getAvg(), executionTimeStats.getCount());
+			}
+		}, 1, 1, TimeUnit.SECONDS);
+	}
+
+	public ExecutorService createExecutor() {
+		return createExecutor("unnamed");
+	}
+
+	public ExecutorService createExecutor(String name) {
+		return new SequentialExecutor(name);
+	}
+
+	public class SequentialExecutor extends AbstractExecutorService {
+		private final String name;
+		private CompletableFuture<?> lastFuture = CompletableFuture.completedFuture(null);
+		private final AtomicInteger queueSize = new AtomicInteger(0);
+
+		public SequentialExecutor(String name) {
+			this.name = name;
+		}
+
+		@Override
+		public synchronized void execute(Runnable command) {
+			int queueSize = this.queueSize.incrementAndGet();
+			LOGGER.trace("{}: Queue size: {}", name, queueSize);
+			if (queueSize >= 500 && queueSize % 10 == 0) { // the queue gets quite long when destroying a session, since there are very many listeners to the destroyed event
+				LOGGER.warn("{}: Queue is very long: {}", name, queueSize);
+			}
+			long submitTime = System.currentTimeMillis();
+			lastFuture = lastFuture.thenApplyAsync(o -> {
+				long executionStartTime = System.currentTimeMillis();
+				long delay = executionStartTime - submitTime;
+				delayStats.getAndUpdate(minMaxAverageStats -> minMaxAverageStats.push(delay));
+				Object result = softenExceptions(() -> {
+					command.run();
+					return null;
+				});
+				long executionTime = System.currentTimeMillis() - executionStartTime;
+				executionTimeStats.getAndUpdate(minMaxAverageStats -> minMaxAverageStats.push(executionTime));
+				this.queueSize.decrementAndGet();
+				return result;
+			}, pool).exceptionally(throwable -> {
+				LOGGER.error("{}: Error while executing: ", name, throwable);
+				return null; // do not interrupt the execution chain!!
+			});
+		}
+
+		@Override
+		public void shutdown() {
+			// nothing to do here
+		}
+
+		@Override
+		public List<Runnable> shutdownNow() {
+			return List.of();
+		}
+
+		@Override
+		public boolean isShutdown() {
+			return false;
+		}
+
+		@Override
+		public boolean isTerminated() {
+			return false;
+		}
+
+		@Override
+		public boolean awaitTermination(long timeout, TimeUnit unit) throws InterruptedException {
+			Thread.sleep(10);
+			return false;
+		}
+	}
+
+	public static class SequentialExecutorClosedException extends RuntimeException {
+	}
+
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/util/threading/MinMaxAverageStats.java b/teamapps-ux/src/main/java/org/teamapps/util/threading/MinMaxAverageStats.java
new file mode 100644
index 000000000..44e95e0c0
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/util/threading/MinMaxAverageStats.java
@@ -0,0 +1,65 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.util.threading;
+
+/**
+ * Caution: You should use {@link java.util.LongSummaryStatistics} whenever you can.
+ * The only advantage of this class is it being immutable.
+ */
+public class MinMaxAverageStats {
+	private final long min;
+	private final long max;
+	private final long total;
+	private final long count;
+
+	public MinMaxAverageStats() {
+		this.min = Long.MAX_VALUE;
+		this.max = 0;
+		this.total = 0;
+		this.count = 0;
+	}
+
+	public MinMaxAverageStats(long min, long max, long total, long count) {
+		this.min = min;
+		this.max = max;
+		this.total = total;
+		this.count = count;
+	}
+
+	public MinMaxAverageStats push(long time) {
+		return new MinMaxAverageStats(Math.min(time, min), Math.max(time, max), this.total + time, this.count + 1);
+	}
+
+	public long getMin() {
+		return min;
+	}
+
+	public long getMax() {
+		return max;
+	}
+
+	public long getAvg() {
+		return total / count;
+	}
+
+	public long getCount() {
+		return count;
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/util/threading/SequentialExecutorFactory.java b/teamapps-ux/src/main/java/org/teamapps/util/threading/SequentialExecutorFactory.java
new file mode 100644
index 000000000..bdedf2585
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/util/threading/SequentialExecutorFactory.java
@@ -0,0 +1,36 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.util.threading;
+
+import java.util.concurrent.ExecutorService;
+
+/**
+ * Creates {@link ExecutorService}s that will guarantee the sequential execution of submitted tasks.
+ * Note that this guarantee is <b>NOT</b> given with {@link java.util.concurrent.ThreadPoolExecutor}.
+ * <p>
+ * The most naive implementation will just return {@link java.util.concurrent.Executors#newSingleThreadExecutor()},
+ * but most operating systems have limits on the number of threads allowed, so this is not a good solution,
+ * and not a good idea for other reasons, too.
+ */
+public interface SequentialExecutorFactory {
+
+	ExecutorService createExecutor(String name);
+
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/application/ApplicationBuilder.java b/teamapps-ux/src/main/java/org/teamapps/ux/application/ApplicationBuilder.java
deleted file mode 100644
index 90edfa1a7..000000000
--- a/teamapps-ux/src/main/java/org/teamapps/ux/application/ApplicationBuilder.java
+++ /dev/null
@@ -1,47 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.ux.application;
-
-import java.util.function.Supplier;
-
-public interface ApplicationBuilder {
-
-	static ApplicationBuilder create(Supplier<Application> applicationSupplier, ApplicationInfo applicationInfo) {
-		return new ApplicationBuilder() {
-			@Override
-			public ApplicationInfo getApplicationInfo() {
-				return applicationInfo;
-			}
-
-			@Override
-			public Application createApplication(ApplicationDesktop applicationDesktop) {
-				return applicationSupplier.get();
-			}
-		};
-	}
-
-	default boolean isApplicationAccessible() {
-		return true;
-	}
-
-	ApplicationInfo getApplicationInfo();
-
-	Application createApplication(ApplicationDesktop applicationDesktop);
-}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/application/ApplicationChangeHandler.java b/teamapps-ux/src/main/java/org/teamapps/ux/application/ApplicationChangeHandler.java
index 8eecc9ac5..fd4100eeb 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/application/ApplicationChangeHandler.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/application/ApplicationChangeHandler.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -63,4 +63,5 @@ public interface ApplicationChangeHandler {
 
     void handleViewWorkspaceToolbarButtonGroupRemoved(ResponsiveApplication application, boolean isActivePerspective, Perspective perspective, View view, ToolbarButtonGroup buttonGroup);
 
+    void handleViewSelect(View view);
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/application/ApplicationLauncher.java b/teamapps-ux/src/main/java/org/teamapps/ux/application/ApplicationLauncher.java
deleted file mode 100644
index c1f64970b..000000000
--- a/teamapps-ux/src/main/java/org/teamapps/ux/application/ApplicationLauncher.java
+++ /dev/null
@@ -1,51 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.ux.application;
-
-import org.teamapps.icons.api.Icon;
-import org.teamapps.ux.application.view.View;
-import org.teamapps.ux.component.Component;
-import org.teamapps.ux.session.CurrentSessionContext;
-
-import java.util.Locale;
-import java.util.Map;
-import java.util.ResourceBundle;
-import java.util.concurrent.TimeUnit;
-
-public interface ApplicationLauncher {
-
-    View getLauncherView();
-
-    default ResourceBundle getManagedResourceBundle() {
-        return getManagedApplicationResourceBundle(CurrentSessionContext.get().getLocale());
-    }
-
-    ResourceBundle getManagedApplicationResourceBundle(Locale locale);
-
-    void showTopLevelComponent(Icon icon, String title, Component component);
-
-    void removeTopLevelComponent(Component component);
-
-    String createCustomApplicationEntryURL(boolean authenticateUser, boolean loadApplicationLauncher, Map<String, String> parameterMap);
-
-    String createCustomApplicationEntryURL(boolean authenticateUser, boolean loadApplicationLauncher, TimeUnit validityTimeUnit, long validityDuration, Map<String, String> parameterMap);
-
-
-}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/application/ApplicationResourceBundleInfo.java b/teamapps-ux/src/main/java/org/teamapps/ux/application/ApplicationResourceBundleInfo.java
deleted file mode 100644
index 2fda63356..000000000
--- a/teamapps-ux/src/main/java/org/teamapps/ux/application/ApplicationResourceBundleInfo.java
+++ /dev/null
@@ -1,67 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.ux.application;
-
-import org.teamapps.ux.session.SimpleSessionContext;
-
-import java.util.*;
-import java.util.function.Function;
-
-public interface ApplicationResourceBundleInfo {
-
-    static ApplicationResourceBundleInfo createUTF8PropertyBundlesInfo(String baseName, Locale baseLocale, Locale... availableTranslations) {
-        return createUTF8PropertyBundlesInfo(baseName, "properties", baseLocale, availableTranslations);
-    }
-
-    static ApplicationResourceBundleInfo createUTF8PropertyBundlesInfo(String baseName, String suffix, Locale baseLocale, Locale... availableTranslations) {
-        Function<Locale, ResourceBundle> resourceBundleByLocaleFunction = locale -> ResourceBundle.getBundle(baseName, locale, new SimpleSessionContext.UTF8Control(suffix));
-        return createInfo(resourceBundleByLocaleFunction, baseLocale, availableTranslations);
-    }
-
-    static ApplicationResourceBundleInfo createInfo(Function<Locale, ResourceBundle> resourceBundleByLocaleFunction, Locale baseLocale, Locale... availableTranslations) {
-        return new ApplicationResourceBundleInfo() {
-            @Override
-            public Function<Locale, ResourceBundle> getResourceBundleByLocaleFunction() {
-                return resourceBundleByLocaleFunction;
-            }
-
-            @Override
-            public Locale getBaseLocale() {
-                return baseLocale;
-            }
-
-            @Override
-            public List<Locale> getAvailableTranslations() {
-                if (availableTranslations == null) {
-                    return Collections.emptyList();
-                } else {
-                    return Arrays.asList(availableTranslations);
-                }
-            }
-        };
-    }
-
-
-    Function<Locale, ResourceBundle> getResourceBundleByLocaleFunction();
-
-    Locale getBaseLocale();
-
-    List<Locale> getAvailableTranslations();
-}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/application/ApplicationTheme.java b/teamapps-ux/src/main/java/org/teamapps/ux/application/ApplicationTheme.java
deleted file mode 100644
index f56137228..000000000
--- a/teamapps-ux/src/main/java/org/teamapps/ux/application/ApplicationTheme.java
+++ /dev/null
@@ -1,119 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.ux.application;
-
-import org.apache.commons.io.IOUtils;
-import org.teamapps.ux.session.StylingTheme;
-
-import java.io.File;
-import java.io.FileOutputStream;
-import java.io.IOException;
-import java.net.URL;
-
-public interface ApplicationTheme {
-
-    static ApplicationTheme createTheme(String applicationBackgroundImage) {
-        return createTheme(applicationBackgroundImage, null, null, null, null, null);
-    }
-
-    static ApplicationTheme createTheme(String applicationBackgroundImage, StylingTheme applicationTheme) {
-        return createTheme(applicationBackgroundImage, null, null, applicationTheme, null, null);
-    }
-
-    static ApplicationTheme createTheme(File applicationBackgroundImageFile) {
-        return createTheme(null, applicationBackgroundImageFile, null, null, null, null);
-    }
-
-    static ApplicationTheme createTheme(File applicationBackgroundImageFile, StylingTheme applicationTheme) {
-        return createTheme(null, applicationBackgroundImageFile, null, applicationTheme, null, null);
-    }
-
-    static ApplicationTheme createTheme(URL applicationBackgroundImageURL) {
-        return createTheme(null, null, applicationBackgroundImageURL, null, null, null);
-    }
-
-    static ApplicationTheme createTheme(URL applicationBackgroundImageURL, StylingTheme applicationTheme) {
-        return createTheme(null, null, applicationBackgroundImageURL, applicationTheme, null, null);
-    }
-
-    static ApplicationTheme createTheme(String applicationBackgroundImage, StylingTheme applicationTheme, String customIconStyleId, String customIconLibraryId) {
-        return createTheme(applicationBackgroundImage, null, null, applicationTheme, customIconStyleId, customIconLibraryId);
-    }
-
-    private static File loadFile(URL url) {
-        try {
-            File tempFile = File.createTempFile("background", "jpg");
-            IOUtils.copy(url.openStream(), new FileOutputStream(tempFile));
-            return tempFile;
-        } catch (IOException e) {
-            e.printStackTrace();
-        }
-        return null;
-    }
-
-    private static ApplicationTheme createTheme(String applicationBackgroundImage, File applicationBackgroundImageFile, URL applicationBackgroundImageURL, StylingTheme applicationTheme, String customIconStyleId, String customIconLibraryId) {
-        if (applicationBackgroundImageURL != null && applicationBackgroundImageFile == null) {
-            applicationBackgroundImageFile = loadFile(applicationBackgroundImageURL);
-        }
-        final File backgroundFile = applicationBackgroundImageFile;
-        return new ApplicationTheme() {
-
-
-            @Override
-            public String getApplicationBackgroundImage() {
-                return applicationBackgroundImage;
-            }
-
-            @Override
-            public File geApplicationBackgroundImageFile() {
-                return backgroundFile;
-            }
-
-            @Override
-            public StylingTheme getApplicationTheme() {
-                if (applicationTheme == null) {
-                    return StylingTheme.DEFAULT;
-                }
-                return applicationTheme;
-            }
-
-            @Override
-            public String getCustomIconStyleId() {
-                return customIconStyleId;
-            }
-
-            @Override
-            public String getCustomIconLibraryId() {
-                return customIconLibraryId;
-            }
-        };
-    }
-
-    String getApplicationBackgroundImage();
-
-    File geApplicationBackgroundImageFile();
-
-    StylingTheme getApplicationTheme();
-
-    String getCustomIconStyleId();
-
-    String getCustomIconLibraryId();
-
-}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/application/ResponsiveApplication.java b/teamapps-ux/src/main/java/org/teamapps/ux/application/ResponsiveApplication.java
index 177dc2575..f2c54f8ee 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/application/ResponsiveApplication.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/application/ResponsiveApplication.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,25 +19,43 @@
  */
 package org.teamapps.ux.application;
 
-import org.teamapps.ux.application.assembler.DesktopApplicationAssembler;
-import org.teamapps.ux.application.assembler.MobileApplicationAssembler;
+import org.teamapps.common.format.Color;
+import org.teamapps.icons.Icon;
+import org.teamapps.ux.application.assembler.*;
 import org.teamapps.ux.application.perspective.Perspective;
 import org.teamapps.ux.application.view.View;
+import org.teamapps.ux.component.Component;
+import org.teamapps.ux.component.progress.MultiProgressDisplay;
 import org.teamapps.ux.component.toolbar.ToolbarButtonGroup;
+import org.teamapps.ux.icon.TeamAppsIconBundle;
 import org.teamapps.ux.session.CurrentSessionContext;
+import org.teamapps.ux.session.SessionContext;
 
 import java.util.List;
 
-public interface ResponsiveApplication extends Application {
+public interface ResponsiveApplication {
 
 	static ResponsiveApplication createApplication() {
-		return createApplication(null);
+		return createApplication((View) null);
+	}
+
+	static ResponsiveApplication createApplication(ApplicationAssembler assembler) {
+		return new ResponsiveApplicationImpl(assembler);
 	}
 
 	static ResponsiveApplication createApplication(View applicationLauncher) {
+		return createApplication(applicationLauncher,
+				SessionContext.current().getIcon(TeamAppsIconBundle.APPLICATION_LAUNCHER.getKey()),
+				SessionContext.current().getIcon(TeamAppsIconBundle.TREE.getKey()),
+				SessionContext.current().getIcon(TeamAppsIconBundle.VIEWS.getKey()),
+				SessionContext.current().getIcon(TeamAppsIconBundle.TOOLBAR.getKey()),
+				SessionContext.current().getIcon(TeamAppsIconBundle.TOOLBAR.getKey()));
+	}
+
+	static ResponsiveApplication createApplication(View applicationLauncher, Icon launcherIcon, Icon treeIcon, Icon viewsIcon, Icon toolbarIcon, Icon backIcon) {
 		boolean mobileDevice = CurrentSessionContext.get().getClientInfo().isMobileDevice();
 		if (mobileDevice) {
-			MobileApplicationAssembler mobileAssembler = new MobileApplicationAssembler();
+			MobileApplicationAssembler mobileAssembler = new MobileApplicationAssembler(launcherIcon, treeIcon, viewsIcon, toolbarIcon, backIcon, null);
 			mobileAssembler.setApplicationLauncher(applicationLauncher);
 			return new ResponsiveApplicationImpl(mobileAssembler);
 		} else {
@@ -45,6 +63,27 @@ static ResponsiveApplication createApplication(View applicationLauncher) {
 		}
 	}
 
+	static ResponsiveApplication createApplication(Icon treeIcon, Icon viewsIcon, Icon toolbarIcon, Icon backIcon, List<AdditionalNavigationButton> additionalLeftButtons) {
+		boolean mobileDevice = CurrentSessionContext.get().getClientInfo().isMobileDevice();
+		if (mobileDevice) {
+			MobileApplicationAssembler mobileAssembler = new MobileApplicationAssembler(null, treeIcon, viewsIcon, toolbarIcon, backIcon, additionalLeftButtons);
+			return new ResponsiveApplicationImpl(mobileAssembler);
+		} else {
+			return new ResponsiveApplicationImpl(new DesktopApplicationAssembler());
+		}
+	}
+
+	static ResponsiveApplication createTopNavigationApplication(MobileApplicationNavigationController navigationController) {
+		boolean mobileDevice = CurrentSessionContext.get().getClientInfo().isMobileDevice();
+		if (mobileDevice) {
+			return new ResponsiveApplicationImpl(new TopNavigationMobileApplicationAssembler(navigationController));
+		} else {
+			return new ResponsiveApplicationImpl(new DesktopApplicationAssembler());
+		}
+	}
+
+	Component getUi();
+
 	void addApplicationChangeHandler(ApplicationChangeHandler changeHandler);
 
 	void removeApplicationChangeHandler(ApplicationChangeHandler changeHandler);
@@ -71,4 +110,7 @@ static ResponsiveApplication createApplication(View applicationLauncher) {
 
 	List<ToolbarButtonGroup> getWorkspaceButtonGroups();
 
+	void setToolbarBackgroundColor(Color backgroundColor);
+
+	MultiProgressDisplay getMultiProgressDisplay();
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/application/ResponsiveApplicationBuilder.java b/teamapps-ux/src/main/java/org/teamapps/ux/application/ResponsiveApplicationBuilder.java
deleted file mode 100644
index fdc76df80..000000000
--- a/teamapps-ux/src/main/java/org/teamapps/ux/application/ResponsiveApplicationBuilder.java
+++ /dev/null
@@ -1,65 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.ux.application;
-
-import java.util.function.Function;
-
-public interface ResponsiveApplicationBuilder {
-
-    static ResponsiveApplicationBuilder create(String fullyQualifiedApplicationName, ApplicationResourceBundleInfo applicationResourceBundleInfo, Function<ApplicationLauncher, ResponsiveApplication> applicationFunction) {
-        return create(fullyQualifiedApplicationName, applicationResourceBundleInfo, applicationFunction, null);
-    }
-
-    static ResponsiveApplicationBuilder create(String fullyQualifiedApplicationName, ApplicationResourceBundleInfo applicationResourceBundleInfo, Function<ApplicationLauncher, ResponsiveApplication> applicationFunction, ApplicationTheme applicationTheme) {
-        return new ResponsiveApplicationBuilder() {
-            @Override
-            public String getFullyQualifiedApplicationName() {
-                return fullyQualifiedApplicationName;
-            }
-
-            @Override
-            public ApplicationResourceBundleInfo getApplicationResourceBundleInfo() {
-                return applicationResourceBundleInfo;
-            }
-
-            @Override
-            public ResponsiveApplication createApplication(ApplicationLauncher launcher) {
-                return applicationFunction.apply(launcher);
-            }
-
-            @Override
-            public ApplicationTheme getCustomApplicationTheme() {
-                return applicationTheme;
-            }
-        };
-    }
-
-    String getFullyQualifiedApplicationName();
-
-    ApplicationResourceBundleInfo getApplicationResourceBundleInfo();
-
-    ResponsiveApplication createApplication(ApplicationLauncher launcher);
-
-    default ApplicationTheme getCustomApplicationTheme() {
-        return null;
-    }
-
-
-}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/application/ResponsiveApplicationController.java b/teamapps-ux/src/main/java/org/teamapps/ux/application/ResponsiveApplicationController.java
deleted file mode 100644
index 60826831d..000000000
--- a/teamapps-ux/src/main/java/org/teamapps/ux/application/ResponsiveApplicationController.java
+++ /dev/null
@@ -1,133 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.ux.application;
-
-import org.teamapps.icons.api.Icon;
-import org.teamapps.server.ServletRegistration;
-import org.teamapps.server.UxServerContext;
-import org.teamapps.webcontroller.WebController;
-import org.teamapps.ux.resource.ClassPathResourceProvider;
-import org.teamapps.ux.resource.ResourceProviderServlet;
-import org.teamapps.ux.application.view.View;
-import org.teamapps.ux.component.Component;
-import org.teamapps.ux.component.login.LoginAuthenticator;
-import org.teamapps.ux.session.SessionContext;
-
-import java.util.*;
-import java.util.concurrent.TimeUnit;
-import java.util.function.Function;
-import java.util.stream.Collectors;
-
-public class ResponsiveApplicationController implements WebController, ManagedResourceBundleProvider, RootWindowHandler {
-
-    private View applicationLauncher;
-    private List<ResponsiveApplicationGroup> applicationGroups = new ArrayList<>();
-
-    private LoginAuthenticator authenticator;
-    private List<ServletRegistration> servletRegistrations = new ArrayList<>();
-    private List<Function<UxServerContext, ServletRegistration>> servletRegistrationFactories = new ArrayList<>();
-
-
-    private String loginBackground = "/resources/backgrounds/login3.jpg";
-    private String loginBackgroundBlurred = "/resources/backgrounds/login3-bl.jpg";
-    private String defaultBackground = "/resources/default-bl.jpg";
-
-    @Override
-    public void onSessionStart(SessionContext context) {
-
-    }
-
-    public void addClassPathResourceProvider(String basePackage, String prefix) {
-        if (!prefix.endsWith("/")) {
-            prefix += "/";
-        }
-        addServletRegistration(new ServletRegistration(new ResourceProviderServlet(new ClassPathResourceProvider(basePackage)),  prefix+ "*"));
-    }
-
-    @Override
-    public Collection<ServletRegistration> getServletRegistrations(UxServerContext serverContext) {
-        ArrayList<ServletRegistration> registrations = new ArrayList<>();
-        registrations.addAll(this.servletRegistrations);
-        registrations.addAll(servletRegistrationFactories.stream()
-                .map(f -> f.apply(serverContext))
-                .collect(Collectors.toList()));
-        return registrations;
-    }
-
-
-
-
-//    @Override
-//    public IconTheme getDefaultIconTheme(boolean isMobile) {
-//        return null;
-//    }
-//
-//    @Override
-//    public IconProvider getIconProvider() {
-//        return null;
-//    }
-
-    public ResponsiveApplicationGroup addApplicationGroup(Icon icon, String title) {
-        ResponsiveApplicationGroup applicationGroup = new ResponsiveApplicationGroup(applicationLauncher, this, this);
-        applicationGroups.add(applicationGroup);
-        return applicationGroup;
-    }
-
-    @Override
-    public void registerApplicationResourceBundle(ResponsiveApplicationBuilder applicationBuilder) {
-
-    }
-
-    @Override
-    public ResourceBundle getManagedResourceBundle(ResponsiveApplicationBuilder applicationBuilder, Locale locale) {
-        return null;
-    }
-
-    @Override
-    public void showTopLevelComponent(ResponsiveApplicationBuilder applicationBuilder, Icon icon, String title, Component component) {
-
-    }
-
-    @Override
-    public void removeTopLevelComponent(ResponsiveApplicationBuilder applicationBuilder, Component component) {
-
-    }
-
-    @Override
-    public String createCustomApplicationEntryURL(ResponsiveApplicationBuilder applicationBuilder, boolean authenticateUser, boolean loadApplicationLauncher, Map<String, String> parameterMap) {
-        //todo use application base prefix - link is valid without registration!
-        return null;
-    }
-
-    @Override
-    public String createCustomApplicationEntryURL(ResponsiveApplicationBuilder applicationBuilder, boolean authenticateUser, boolean loadApplicationLauncher, TimeUnit validityTimeUnit, long validityDuration, Map<String, String> parameterMap) {
-        //todo save in map, remove old entries, check --> create single UUID parameter: baselinkg?uuid
-        return null;
-    }
-
-    public void addServletRegistration(ServletRegistration servletRegistration) {
-        this.servletRegistrations.add(servletRegistration);
-    }
-
-    public void addServletRegistrationFactory(Function<UxServerContext, ServletRegistration> servletRegistrationFactory) {
-        this.servletRegistrationFactories.add(servletRegistrationFactory);
-    }
-
-}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/application/ResponsiveApplicationGroup.java b/teamapps-ux/src/main/java/org/teamapps/ux/application/ResponsiveApplicationGroup.java
deleted file mode 100644
index 97b13dba2..000000000
--- a/teamapps-ux/src/main/java/org/teamapps/ux/application/ResponsiveApplicationGroup.java
+++ /dev/null
@@ -1,83 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.ux.application;
-
-import org.teamapps.icons.api.Icon;
-import org.teamapps.ux.application.view.View;
-import org.teamapps.ux.component.Component;
-
-import java.util.*;
-import java.util.concurrent.TimeUnit;
-
-public class ResponsiveApplicationGroup {
-
-    private final View applicationLauncher;
-    private final ManagedResourceBundleProvider managedResourceBundleProvider;
-    private final RootWindowHandler rootWindowHandler;
-    private final List<ResponsiveApplicationBuilder> applicationBuilders = new ArrayList<>();
-
-    public ResponsiveApplicationGroup(View applicationLauncher, ManagedResourceBundleProvider managedResourceBundleProvider, RootWindowHandler rootWindowHandler) {
-        this.applicationLauncher = applicationLauncher;
-        this.managedResourceBundleProvider = managedResourceBundleProvider;
-        this.rootWindowHandler = rootWindowHandler;
-    }
-
-    public ApplicationLauncher addApplication(ResponsiveApplicationBuilder applicationBuilder) {
-        if (applicationBuilder.getApplicationResourceBundleInfo() != null) {
-            managedResourceBundleProvider.registerApplicationResourceBundle(applicationBuilder);
-        }
-        applicationBuilders.add(applicationBuilder);
-
-        return new ApplicationLauncher() {
-            @Override
-            public View getLauncherView() {
-                return applicationLauncher;
-            }
-
-            @Override
-            public ResourceBundle getManagedApplicationResourceBundle(Locale locale) {
-                if (applicationBuilder.getApplicationResourceBundleInfo() == null) {
-                    return null;
-                }
-                return managedResourceBundleProvider.getManagedResourceBundle(applicationBuilder, locale);
-            }
-
-            @Override
-            public void showTopLevelComponent(Icon icon, String title, Component component) {
-                rootWindowHandler.showTopLevelComponent(applicationBuilder, icon, title, component);
-            }
-
-            @Override
-            public void removeTopLevelComponent(Component component) {
-                rootWindowHandler.removeTopLevelComponent(applicationBuilder, component);
-            }
-
-            @Override
-            public String createCustomApplicationEntryURL(boolean authenticateUser, boolean loadApplicationLauncher, Map<String, String> parameterMap) {
-                return rootWindowHandler.createCustomApplicationEntryURL(applicationBuilder, authenticateUser, loadApplicationLauncher, parameterMap);
-            }
-
-            @Override
-            public String createCustomApplicationEntryURL(boolean authenticateUser, boolean loadApplicationLauncher, TimeUnit validityTimeUnit, long validityDuration, Map<String, String> parameterMap) {
-                return rootWindowHandler.createCustomApplicationEntryURL(applicationBuilder, authenticateUser, loadApplicationLauncher, validityTimeUnit, validityDuration, parameterMap);
-            }
-        };
-    }
-}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/application/ResponsiveApplicationImpl.java b/teamapps-ux/src/main/java/org/teamapps/ux/application/ResponsiveApplicationImpl.java
index bc308771a..b0b57fb45 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/application/ResponsiveApplicationImpl.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/application/ResponsiveApplicationImpl.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,12 +19,14 @@
  */
 package org.teamapps.ux.application;
 
+import org.teamapps.common.format.Color;
 import org.teamapps.ux.application.assembler.ApplicationAssembler;
 import org.teamapps.ux.application.perspective.Perspective;
 import org.teamapps.ux.application.perspective.PerspectiveChangeHandler;
 import org.teamapps.ux.application.view.View;
 import org.teamapps.ux.application.view.ViewSize;
 import org.teamapps.ux.component.Component;
+import org.teamapps.ux.component.progress.MultiProgressDisplay;
 import org.teamapps.ux.component.toolbar.ToolbarButtonGroup;
 import org.teamapps.ux.component.workspacelayout.definition.LayoutItemDefinition;
 
@@ -35,208 +37,234 @@
 
 public class ResponsiveApplicationImpl implements ResponsiveApplication {
 
-    private final ApplicationAssembler assembler;
-
-    private List<View> applicationViews = new ArrayList<>();
-    private List<Perspective> perspectives = new ArrayList<>();
-    private Perspective activePerspective;
-    private List<View> activeViews;
-    private List<ToolbarButtonGroup> workspaceToolbarButtonGroups = new ArrayList<>();
-    private List<ApplicationChangeHandler> changeHandlers = new ArrayList<>();
-    private ResponsiveApplicationToolbar responsiveApplicationToolbar = new ResponsiveApplicationToolbar();
-
-    public ResponsiveApplicationImpl(ApplicationAssembler assembler) {
-        this.assembler = assembler;
-        this.assembler.setWorkSpaceToolbar(responsiveApplicationToolbar);
-        addApplicationChangeHandler(assembler);
-        addApplicationChangeHandler(responsiveApplicationToolbar);
-    }
-
-    @Override
-    public void addApplicationChangeHandler(ApplicationChangeHandler changeHandler) {
-        changeHandlers.remove(changeHandler);
-        changeHandlers.add(changeHandler);
-    }
-
-    @Override
-    public void removeApplicationChangeHandler(ApplicationChangeHandler changeHandler) {
-        changeHandlers.remove(changeHandler);
-    }
-
-    @Override
-    public void addApplicationView(View view) {
-        applicationViews.add(view);
-        changeHandlers.forEach(changeHandler -> changeHandler.handleApplicationViewAdded(this, view));
-    }
-
-    @Override
-    public void removeApplicationView(View view) {
-        applicationViews.remove(view);
-        changeHandlers.forEach(changeHandler -> changeHandler.handleApplicationViewRemoved(this, view));
-    }
-
-    @Override
-    public List<View> getApplicationViews() {
-        return applicationViews;
-    }
-
-    @Override
-    public List<Perspective> getPerspectives() {
-        return perspectives;
-    }
-
-    @Override
-    public Perspective addPerspective(Perspective perspective) {
-        ResponsiveApplication application = this;
-        perspectives.add(perspective);
-        perspective.addPerspectiveChangeHandler(new PerspectiveChangeHandler() {
-            @Override
-            public void handleLayoutChange(Perspective perspective, LayoutItemDefinition layoutItemDefinition) {
-                changeHandlers.forEach(changeHandler -> changeHandler.handleLayoutChange(application, isActivePerspective(perspective), perspective, layoutItemDefinition));
-            }
-
-            @Override
-            public void handleViewAdded(Perspective perspective, View view) {
-                if (isActivePerspective(perspective)) {
-                    checkViewChange(view, true);
-                }
-                changeHandlers.forEach(changeHandler -> changeHandler.handleViewAdded(application, isActivePerspective(perspective), perspective, view));
-            }
-
-            @Override
-            public void handleViewRemoved(Perspective perspective, View view) {
-                if (isActivePerspective(perspective)) {
-                    checkViewChange(view, false);
-                }
-                changeHandlers.forEach(changeHandler -> changeHandler.handleViewRemoved(application, isActivePerspective(perspective), perspective, view));
-            }
-
-            @Override
-            public void handlePerspectiveToolbarButtonGroupAdded(Perspective perspective, ToolbarButtonGroup buttonGroup) {
-                changeHandlers.forEach(changeHandler -> changeHandler.handlePerspectiveToolbarButtonGroupAdded(application, isActivePerspective(perspective), perspective, buttonGroup));
-            }
-
-            @Override
-            public void handlePerspectiveToolbarButtonGroupRemoved(Perspective perspective, ToolbarButtonGroup buttonGroup) {
-                changeHandlers.forEach(changeHandler -> changeHandler.handlePerspectiveToolbarButtonGroupRemoved(application, isActivePerspective(perspective), perspective, buttonGroup));
-            }
-
-            @Override
-            public void handleViewVisibilityChange(Perspective perspective, View view, boolean visible) {
-                if (isActivePerspective(perspective)) {
-                    checkViewChange(view, visible);
-                }
-                changeHandlers.forEach(changeHandler -> changeHandler.handleViewVisibilityChange(application, isActivePerspective(perspective), perspective, view, visible));
-            }
-
-            @Override
-            public void handleViewFocusRequest(Perspective perspective, View view, boolean ensureVisible) {
-                changeHandlers.forEach(changeHandler -> changeHandler.handleViewFocusRequest(application, isActivePerspective(perspective), perspective, view, ensureVisible));
-            }
-
-            @Override
-            public void handleViewSizeChange(Perspective perspective, View view, ViewSize viewSize) {
-                changeHandlers.forEach(changeHandler -> changeHandler.handleViewSizeChange(application, isActivePerspective(perspective), perspective, view, viewSize));
-            }
-
-            @Override
-            public void handleViewTabTitleChange(Perspective perspective, View view, String title) {
-                changeHandlers.forEach(changeHandler -> changeHandler.handleViewTabTitleChange(application, isActivePerspective(perspective), perspective, view, title));
-            }
-
-            @Override
-            public void handleViewLayoutPositionChange(Perspective perspective, View view, String position) {
-                changeHandlers.forEach(changeHandler -> changeHandler.handleViewLayoutPositionChange(application, isActivePerspective(perspective), perspective, view, position));
-            }
-
-            @Override
-            public void handleViewWorkspaceToolbarButtonGroupAdded(Perspective perspective, View view, ToolbarButtonGroup buttonGroup) {
-                changeHandlers.forEach(changeHandler -> changeHandler.handleViewWorkspaceToolbarButtonGroupAdded(application, isActivePerspective(perspective), perspective, view, buttonGroup));
-            }
-
-            @Override
-            public void handleViewWorkspaceToolbarButtonGroupRemoved(Perspective perspective, View view, ToolbarButtonGroup buttonGroup) {
-                changeHandlers.forEach(changeHandler -> changeHandler.handleViewWorkspaceToolbarButtonGroupRemoved(application, isActivePerspective(perspective), perspective, view, buttonGroup));
-            }
-
-        });
-        return perspective;
-    }
-
-    private void checkViewChange(View view, boolean show) {
-        if (activeViews != null) {
-            if (show) {
-                activeViews.add(view);
-            } else {
-                activeViews.remove(view);
-            }
-        }
-    }
-
-    private boolean isActivePerspective(Perspective perspective) {
-        if (activePerspective != null && activePerspective.equals(perspective)) {
-            return true;
-        } else {
-            return false;
-        }
-    }
-
-    @Override
-    public void showPerspective(Perspective perspective) {
-        List<View> previousViews = activeViews;
-        activeViews = perspective.getVisibleAndLayoutReferencedViews();
-
-        List<View> removedViews = new ArrayList<>();
-        List<View> addedViews = new ArrayList<>();
-
-        if (previousViews != null) {
-            Set<View> commonViews = new HashSet<>(activeViews);
-            commonViews.retainAll(previousViews);
-            addedViews.addAll(activeViews);
-            addedViews.removeAll(commonViews);
-            removedViews.addAll(previousViews);
-            removedViews.removeAll(commonViews);
-        } else {
-            addedViews.addAll(activeViews);
-        }
-
-        Perspective previousPerspective = activePerspective;
-        activePerspective = perspective;
-        changeHandlers.forEach(changeHandler -> changeHandler.handlePerspectiveChange(this, perspective, previousPerspective, activeViews, addedViews, removedViews));
-    }
-
-    @Override
-    public List<View> getActiveViews() {
-        return activeViews;
-    }
-
-    @Override
-    public Perspective getActivePerspective() {
-        return activePerspective;
-    }
-
-    @Override
-    public ToolbarButtonGroup addApplicationButtonGroup(ToolbarButtonGroup buttonGroup) {
-        workspaceToolbarButtonGroups.add(buttonGroup);
-        changeHandlers.forEach(changeHandler -> changeHandler.handleApplicationToolbarButtonGroupAdded(this, buttonGroup));
-        return buttonGroup;
-    }
-
-    @Override
-    public void removeApplicationButtonGroup(ToolbarButtonGroup buttonGroup) {
-        workspaceToolbarButtonGroups.remove(buttonGroup);
-        changeHandlers.forEach(changeHandler -> changeHandler.handleApplicationToolbarButtonGroupRemoved(this, buttonGroup));
-    }
-
-    @Override
-    public List<ToolbarButtonGroup> getWorkspaceButtonGroups() {
-        return workspaceToolbarButtonGroups;
-    }
-
-    @Override
-    public Component createUi() {
-        return assembler.createApplication(this);
-    }
-
+	private final ApplicationAssembler assembler;
+	private Component ui;
+
+	private List<View> applicationViews = new ArrayList<>();
+	private List<Perspective> perspectives = new ArrayList<>();
+	private Perspective activePerspective;
+	private List<View> activeViews;
+	private List<ToolbarButtonGroup> workspaceToolbarButtonGroups = new ArrayList<>();
+	private List<ApplicationChangeHandler> changeHandlers = new ArrayList<>();
+	private ResponsiveApplicationToolbar responsiveApplicationToolbar = new ResponsiveApplicationToolbar();
+
+	public ResponsiveApplicationImpl(ApplicationAssembler assembler) {
+		this.assembler = assembler;
+		this.assembler.setWorkSpaceToolbar(responsiveApplicationToolbar);
+		addApplicationChangeHandler(assembler);
+		addApplicationChangeHandler(responsiveApplicationToolbar);
+	}
+
+
+	protected Component createUi() {
+		return assembler.createApplication(this);
+	}
+
+	@Override
+	public Component getUi() {
+		if (ui == null) {
+			ui = createUi();
+		}
+		return ui;
+	}
+
+	@Override
+	public void addApplicationChangeHandler(ApplicationChangeHandler changeHandler) {
+		changeHandlers.remove(changeHandler);
+		changeHandlers.add(changeHandler);
+	}
+
+	@Override
+	public void removeApplicationChangeHandler(ApplicationChangeHandler changeHandler) {
+		changeHandlers.remove(changeHandler);
+	}
+
+	@Override
+	public void addApplicationView(View view) {
+		applicationViews.add(view);
+		changeHandlers.forEach(changeHandler -> changeHandler.handleApplicationViewAdded(this, view));
+	}
+
+	@Override
+	public void removeApplicationView(View view) {
+		applicationViews.remove(view);
+		changeHandlers.forEach(changeHandler -> changeHandler.handleApplicationViewRemoved(this, view));
+	}
+
+	@Override
+	public List<View> getApplicationViews() {
+		return applicationViews;
+	}
+
+	@Override
+	public List<Perspective> getPerspectives() {
+		return perspectives;
+	}
+
+	@Override
+	public Perspective addPerspective(Perspective perspective) {
+		ResponsiveApplication application = this;
+		perspectives.add(perspective);
+		perspective.addPerspectiveChangeHandler(new PerspectiveChangeHandler() {
+			@Override
+			public void handleLayoutChange(Perspective perspective, LayoutItemDefinition layoutItemDefinition) {
+				changeHandlers.forEach(changeHandler -> changeHandler.handleLayoutChange(application, isActivePerspective(perspective), perspective, layoutItemDefinition));
+			}
+
+			@Override
+			public void handleViewAdded(Perspective perspective, View view) {
+				if (isActivePerspective(perspective)) {
+					checkViewChange(view, true);
+				}
+				changeHandlers.forEach(changeHandler -> changeHandler.handleViewAdded(application, isActivePerspective(perspective), perspective, view));
+			}
+
+			@Override
+			public void handleViewRemoved(Perspective perspective, View view) {
+				if (isActivePerspective(perspective)) {
+					checkViewChange(view, false);
+				}
+				changeHandlers.forEach(changeHandler -> changeHandler.handleViewRemoved(application, isActivePerspective(perspective), perspective, view));
+			}
+
+			@Override
+			public void handlePerspectiveToolbarButtonGroupAdded(Perspective perspective, ToolbarButtonGroup buttonGroup) {
+				changeHandlers.forEach(changeHandler -> changeHandler.handlePerspectiveToolbarButtonGroupAdded(application, isActivePerspective(perspective), perspective, buttonGroup));
+			}
+
+			@Override
+			public void handlePerspectiveToolbarButtonGroupRemoved(Perspective perspective, ToolbarButtonGroup buttonGroup) {
+				changeHandlers.forEach(changeHandler -> changeHandler.handlePerspectiveToolbarButtonGroupRemoved(application, isActivePerspective(perspective), perspective, buttonGroup));
+			}
+
+			@Override
+			public void handleViewVisibilityChange(Perspective perspective, View view, boolean visible) {
+				if (isActivePerspective(perspective)) {
+					checkViewChange(view, visible);
+				}
+				changeHandlers.forEach(changeHandler -> changeHandler.handleViewVisibilityChange(application, isActivePerspective(perspective), perspective, view, visible));
+			}
+
+			@Override
+			public void handleViewFocusRequest(Perspective perspective, View view, boolean ensureVisible) {
+				changeHandlers.forEach(changeHandler -> changeHandler.handleViewFocusRequest(application, isActivePerspective(perspective), perspective, view, ensureVisible));
+			}
+
+			@Override
+			public void handleViewSizeChange(Perspective perspective, View view, ViewSize viewSize) {
+				changeHandlers.forEach(changeHandler -> changeHandler.handleViewSizeChange(application, isActivePerspective(perspective), perspective, view, viewSize));
+			}
+
+			@Override
+			public void handleViewTabTitleChange(Perspective perspective, View view, String title) {
+				changeHandlers.forEach(changeHandler -> changeHandler.handleViewTabTitleChange(application, isActivePerspective(perspective), perspective, view, title));
+			}
+
+			@Override
+			public void handleViewLayoutPositionChange(Perspective perspective, View view, String position) {
+				changeHandlers.forEach(changeHandler -> changeHandler.handleViewLayoutPositionChange(application, isActivePerspective(perspective), perspective, view, position));
+			}
+
+			@Override
+			public void handleViewWorkspaceToolbarButtonGroupAdded(Perspective perspective, View view, ToolbarButtonGroup buttonGroup) {
+				changeHandlers.forEach(changeHandler -> changeHandler.handleViewWorkspaceToolbarButtonGroupAdded(application, isActivePerspective(perspective), perspective, view, buttonGroup));
+			}
+
+			@Override
+			public void handleViewWorkspaceToolbarButtonGroupRemoved(Perspective perspective, View view, ToolbarButtonGroup buttonGroup) {
+				changeHandlers.forEach(changeHandler -> changeHandler.handleViewWorkspaceToolbarButtonGroupRemoved(application, isActivePerspective(perspective), perspective, view, buttonGroup));
+			}
+
+			@Override
+			public void handleViewSelect(View view) {
+				changeHandlers.forEach(ch -> ch.handleViewSelect(view));
+			}
+
+		});
+		return perspective;
+	}
+
+	private void checkViewChange(View view, boolean show) {
+		if (activeViews != null) {
+			if (show) {
+				activeViews.add(view);
+			} else {
+				activeViews.remove(view);
+			}
+		}
+	}
+
+	private boolean isActivePerspective(Perspective perspective) {
+		if (activePerspective != null && activePerspective.equals(perspective)) {
+			return true;
+		} else {
+			return false;
+		}
+	}
+
+	@Override
+	public void showPerspective(Perspective perspective) {
+		if (!perspectives.contains(perspective)) {
+			addPerspective(perspective);
+		}
+		List<View> previousViews = activeViews;
+		activeViews = perspective.getVisibleAndLayoutReferencedViews();
+
+		List<View> removedViews = new ArrayList<>();
+		List<View> addedViews = new ArrayList<>();
+
+		if (previousViews != null) {
+			Set<View> commonViews = new HashSet<>(activeViews);
+			commonViews.retainAll(previousViews);
+			addedViews.addAll(activeViews);
+			addedViews.removeAll(commonViews);
+			removedViews.addAll(previousViews);
+			removedViews.removeAll(commonViews);
+		} else {
+			addedViews.addAll(activeViews);
+		}
+
+		Perspective previousPerspective = activePerspective;
+		activePerspective = perspective;
+		changeHandlers.forEach(changeHandler -> changeHandler.handlePerspectiveChange(this, perspective, previousPerspective, activeViews, addedViews, removedViews));
+	}
+
+	@Override
+	public List<View> getActiveViews() {
+		return activeViews;
+	}
+
+	@Override
+	public Perspective getActivePerspective() {
+		return activePerspective;
+	}
+
+	@Override
+	public ToolbarButtonGroup addApplicationButtonGroup(ToolbarButtonGroup buttonGroup) {
+		workspaceToolbarButtonGroups.add(buttonGroup);
+		changeHandlers.forEach(changeHandler -> changeHandler.handleApplicationToolbarButtonGroupAdded(this, buttonGroup));
+		return buttonGroup;
+	}
+
+	@Override
+	public void removeApplicationButtonGroup(ToolbarButtonGroup buttonGroup) {
+		workspaceToolbarButtonGroups.remove(buttonGroup);
+		changeHandlers.forEach(changeHandler -> changeHandler.handleApplicationToolbarButtonGroupRemoved(this, buttonGroup));
+	}
+
+	@Override
+	public List<ToolbarButtonGroup> getWorkspaceButtonGroups() {
+		return workspaceToolbarButtonGroups;
+	}
+
+	@Override
+	public void setToolbarBackgroundColor(Color backgroundColor) {
+		responsiveApplicationToolbar.getToolbar().setBackgroundColor(backgroundColor);
+	}
+
+	@Override
+	public MultiProgressDisplay getMultiProgressDisplay() {
+		return assembler.getMultiProgressDisplay();
+	}
 
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/application/ResponsiveApplicationToolbar.java b/teamapps-ux/src/main/java/org/teamapps/ux/application/ResponsiveApplicationToolbar.java
index 7a99ea29d..50cda929c 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/application/ResponsiveApplicationToolbar.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/application/ResponsiveApplicationToolbar.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -22,22 +22,31 @@
 import org.teamapps.ux.application.perspective.Perspective;
 import org.teamapps.ux.application.view.View;
 import org.teamapps.ux.application.view.ViewSize;
+import org.teamapps.ux.component.toolbar.AbstractToolContainer;
+import org.teamapps.ux.component.toolbar.ToolAccordion;
 import org.teamapps.ux.component.toolbar.Toolbar;
 import org.teamapps.ux.component.toolbar.ToolbarButtonGroup;
 import org.teamapps.ux.component.workspacelayout.definition.LayoutItemDefinition;
+import org.teamapps.ux.session.CurrentSessionContext;
+import org.teamapps.ux.session.SessionContext;
 
-import java.util.HashSet;
+import java.util.ArrayList;
 import java.util.List;
-import java.util.Set;
 
 public class ResponsiveApplicationToolbar implements ApplicationChangeHandler {
 
-    private Toolbar toolbar = new Toolbar();
+    private AbstractToolContainer toolbar;
 
     public ResponsiveApplicationToolbar() {
+        SessionContext context = CurrentSessionContext.get();
+        if (context.getClientInfo().isMobileDevice()) {
+            toolbar = new ToolAccordion();
+        } else {
+            toolbar = new Toolbar();
+        }
     }
 
-    public Toolbar getToolbar() {
+    public AbstractToolContainer getToolbar() {
         return toolbar;
     }
 
@@ -54,8 +63,8 @@ public void handleApplicationViewRemoved(ResponsiveApplication application, View
 
     @Override
     public void handlePerspectiveChange(ResponsiveApplication application, Perspective perspective, Perspective previousPerspective, List<View> activeViews, List<View> addedViews, List<View> removedViews) {
-        Set<ToolbarButtonGroup> addGroups = new HashSet<>();
-        Set<ToolbarButtonGroup> removeGroups = new HashSet<>();
+        List<ToolbarButtonGroup> addGroups = new ArrayList<>();
+        List<ToolbarButtonGroup> removeGroups = new ArrayList<>();
 
         addedViews.forEach(view -> addGroups.addAll(view.getWorkspaceButtonGroups()));
         addGroups.addAll(perspective.getWorkspaceButtonGroups());
@@ -66,8 +75,8 @@ public void handlePerspectiveChange(ResponsiveApplication application, Perspecti
             removeGroups.removeAll(addGroups);
         }
 
-        removeGroups.forEach(group -> toolbar.removeToolbarButtonGroup(group));
-        addGroups.forEach(group -> toolbar.addButtonGroup(group));
+        removeGroups.stream().distinct().forEach(group -> toolbar.removeToolbarButtonGroup(group));
+        addGroups.stream().distinct().forEach(group -> toolbar.addButtonGroup(group));
     }
 
     @Override
@@ -159,4 +168,8 @@ public void handleViewWorkspaceToolbarButtonGroupRemoved(ResponsiveApplication a
         }
     }
 
+    @Override
+    public void handleViewSelect(View view) {
+
+    }
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/application/RootWindowHandler.java b/teamapps-ux/src/main/java/org/teamapps/ux/application/RootWindowHandler.java
deleted file mode 100644
index 69761c7c4..000000000
--- a/teamapps-ux/src/main/java/org/teamapps/ux/application/RootWindowHandler.java
+++ /dev/null
@@ -1,38 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.ux.application;
-
-import org.teamapps.icons.api.Icon;
-import org.teamapps.ux.component.Component;
-
-import java.util.Map;
-import java.util.concurrent.TimeUnit;
-
-public interface RootWindowHandler {
-
-    void showTopLevelComponent(ResponsiveApplicationBuilder applicationBuilder, Icon icon, String title, Component component);
-
-    void removeTopLevelComponent(ResponsiveApplicationBuilder applicationBuilder, Component component);
-
-    String createCustomApplicationEntryURL(ResponsiveApplicationBuilder applicationBuilder, boolean authenticateUser, boolean loadApplicationLauncher, TimeUnit validityTimeUnit, long validityDuration, Map<String, String> parameterMap);
-
-    String createCustomApplicationEntryURL(ResponsiveApplicationBuilder applicationBuilder, boolean authenticateUser, boolean loadApplicationLauncher, Map<String, String> parameterMap);
-
-}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/application/assembler/AdditionalNavigationButton.java b/teamapps-ux/src/main/java/org/teamapps/ux/application/assembler/AdditionalNavigationButton.java
new file mode 100644
index 000000000..eda3273c6
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/application/assembler/AdditionalNavigationButton.java
@@ -0,0 +1,47 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.application.assembler;
+
+import org.teamapps.icons.Icon;
+
+public class AdditionalNavigationButton {
+
+	private final Icon icon;
+	private final String caption;
+	private final Runnable handler;
+
+	public AdditionalNavigationButton(Icon icon, String caption, Runnable handler) {
+		this.icon = icon;
+		this.caption = caption;
+		this.handler = handler;
+	}
+
+	public Icon getIcon() {
+		return icon;
+	}
+
+	public String getCaption() {
+		return caption;
+	}
+
+	public Runnable getHandler() {
+		return handler;
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/application/assembler/ApplicationAssembler.java b/teamapps-ux/src/main/java/org/teamapps/ux/application/assembler/ApplicationAssembler.java
index e48f18c3b..c5d8ce109 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/application/assembler/ApplicationAssembler.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/application/assembler/ApplicationAssembler.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -23,6 +23,7 @@
 import org.teamapps.ux.application.perspective.Perspective;
 import org.teamapps.ux.application.view.View;
 import org.teamapps.ux.component.Component;
+import org.teamapps.ux.component.progress.MultiProgressDisplay;
 import org.teamapps.ux.component.toolbar.ToolbarButtonGroup;
 
 public interface ApplicationAssembler extends ApplicationChangeHandler {
@@ -31,6 +32,8 @@ public interface ApplicationAssembler extends ApplicationChangeHandler {
 
     void setWorkSpaceToolbar(ResponsiveApplicationToolbar toolbar);
 
+    MultiProgressDisplay getMultiProgressDisplay();
+
     @Override
     default void handleApplicationToolbarButtonGroupAdded(ResponsiveApplication application, ToolbarButtonGroup buttonGroup) {
 
@@ -61,4 +64,8 @@ default void handleViewWorkspaceToolbarButtonGroupRemoved(ResponsiveApplication
 
     }
 
+	@Override
+	default void handleViewSelect(View view) {
+
+	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/application/assembler/ButtonData.java b/teamapps-ux/src/main/java/org/teamapps/ux/application/assembler/ButtonData.java
new file mode 100644
index 000000000..2701debc6
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/application/assembler/ButtonData.java
@@ -0,0 +1,47 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.application.assembler;
+
+import org.teamapps.icons.Icon;
+
+public class ButtonData {
+
+	private final Icon icon;
+	private final String title;
+	private final String description;
+
+	public ButtonData(Icon icon, String title, String description) {
+		this.icon = icon;
+		this.title = title;
+		this.description = description;
+	}
+
+	public Icon getIcon() {
+		return icon;
+	}
+
+	public String getTitle() {
+		return title;
+	}
+
+	public String getDescription() {
+		return description;
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/application/assembler/ButtonDataType.java b/teamapps-ux/src/main/java/org/teamapps/ux/application/assembler/ButtonDataType.java
new file mode 100644
index 000000000..5a0942f0d
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/application/assembler/ButtonDataType.java
@@ -0,0 +1,44 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.application.assembler;
+
+public enum ButtonDataType {
+
+	BACK,
+	VIEWS,
+	MENU,
+
+	APPLICATION_GROUP,
+	APPLICATION_LAUNCHER,
+	APPLICATION_MENU,
+
+	VIEW_GROUP,
+	TREE,
+	TABLE,
+	LIST,
+	FORM,
+	TIME_GRAPH,
+	MEDIA,
+	MAP,
+	CALENDAR,
+	NETWORK_GRAPH,
+
+
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/application/assembler/DesktopApplicationAssembler.java b/teamapps-ux/src/main/java/org/teamapps/ux/application/assembler/DesktopApplicationAssembler.java
index 9d63e39f2..d6bae30ac 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/application/assembler/DesktopApplicationAssembler.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/application/assembler/DesktopApplicationAssembler.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -26,6 +26,8 @@
 import org.teamapps.ux.application.view.View;
 import org.teamapps.ux.application.view.ViewSize;
 import org.teamapps.ux.component.Component;
+import org.teamapps.ux.component.progress.MultiProgressDisplay;
+import org.teamapps.ux.component.toolbar.Toolbar;
 import org.teamapps.ux.component.workspacelayout.ViewGroupPanelState;
 import org.teamapps.ux.component.workspacelayout.WorkSpaceLayout;
 import org.teamapps.ux.component.workspacelayout.WorkSpaceLayoutView;
@@ -38,8 +40,7 @@ public class DesktopApplicationAssembler implements ApplicationAssembler {
 
     private static Logger LOGGER = LoggerFactory.getLogger(DesktopApplicationAssembler.class);
 
-    private ResponsiveApplicationToolbar responsiveApplicationToolbar;
-    private WorkSpaceLayout workSpaceLayout;
+	private final WorkSpaceLayout workSpaceLayout;
     private LayoutItemDefinition currentLayout;
 
     public DesktopApplicationAssembler() {
@@ -55,10 +56,15 @@ public void addView(View view) {
         }
 
         String tabTitle = view.getTabTitle() != null ? view.getTabTitle() : view.getPanel().getTitle();
-        WorkSpaceLayoutView layoutView = new WorkSpaceLayoutView(workSpaceLayout, view.getPanel(), tabTitle, true, false);
+        WorkSpaceLayoutView layoutView = new WorkSpaceLayoutView(workSpaceLayout, view.getPanel(), tabTitle, view.isClosable(), false);
+        layoutView.onEffectiveVisibilityChanged.addListener(effectivelyVisible -> view.onEffectiveVisibilityChanged().fire(effectivelyVisible));
         viewGroup.addView(layoutView);
 
-        if (viewGroup != null && viewGroup.getPanelState() != ViewGroupPanelState.NORMAL) {
+        if (view.getCustomViewSize() != null) {
+            changeViewSize(layoutView, view.getCustomViewSize());
+        }
+        
+        if (viewGroup.getPanelState() != ViewGroupPanelState.NORMAL) {
             viewGroup.setPanelState(ViewGroupPanelState.NORMAL);
         }
     }
@@ -84,10 +90,21 @@ public void removeView(View view) {
         }
     }
 
+    public void setWorkspaceViewVisible(View view, boolean visible) {
+        WorkSpaceLayoutView layoutView = workSpaceLayout.getViewByPanel(view.getPanel());
+        if (layoutView != null) {
+            layoutView.setVisible(visible);
+        }
+    }
+
     @Override
     public void setWorkSpaceToolbar(ResponsiveApplicationToolbar responsiveApplicationToolbar) {
-        this.responsiveApplicationToolbar = responsiveApplicationToolbar;
-        workSpaceLayout.setToolbar(responsiveApplicationToolbar.getToolbar());
+		workSpaceLayout.setToolbar((Toolbar) responsiveApplicationToolbar.getToolbar());
+    }
+
+    @Override
+    public MultiProgressDisplay getMultiProgressDisplay() {
+        return workSpaceLayout.getMultiProgressDisplay();
     }
 
     @Override
@@ -111,8 +128,8 @@ public void handlePerspectiveChange(ResponsiveApplication application, Perspecti
             currentLayout = perspective.getLayout();
             workSpaceLayout.applyLayoutDefinition(currentLayout);
         }
-        removedViews.forEach(view -> removeView(view));
         addedViews.forEach(view -> addView(view));
+        removedViews.forEach(view -> removeView(view));
 
         application.getApplicationViews().forEach(view -> {
             if (!isViewAttached(view)) {
@@ -146,6 +163,8 @@ public void handleViewRemoved(ResponsiveApplication application, boolean isActiv
     @Override
     public void handleViewVisibilityChange(ResponsiveApplication application, boolean isActivePerspective, Perspective perspective, View view, boolean visible) {
         if (isActivePerspective) {
+            //todo change visibility or remove view?
+            //setWorkspaceViewVisible(view, visible);
             if (visible) {
                 addView(view);
             } else {
@@ -157,7 +176,10 @@ public void handleViewVisibilityChange(ResponsiveApplication application, boolea
     @Override
     public void handleViewFocusRequest(ResponsiveApplication application, boolean isActivePerspective, Perspective perspective, View view, boolean ensureVisible) {
         if (isActivePerspective && ensureVisible) {
-            //todo find view group and ensure it is visible
+            WorkSpaceLayoutView layoutView = workSpaceLayout.getViewByPanel(view.getPanel());
+            if (layoutView != null) {
+                layoutView.select();
+            }
         }
     }
 
@@ -166,20 +188,24 @@ public void handleViewSizeChange(ResponsiveApplication application, boolean isAc
         if (isActivePerspective && viewSize != null) {
             WorkSpaceLayoutView layoutView = workSpaceLayout.getViewByPanel(view.getPanel());
             if (layoutView != null) {
-                if (viewSize.isWidthAvailable()) {
-                    if (viewSize.getRelativeWidth() != null) {
-                        layoutView.setRelativeWidth(viewSize.getRelativeWidth());
-                    } else {
-                        layoutView.setAbsoluteWidth(viewSize.getAbsoluteWidth());
-                    }
-                }
-                if (viewSize.isHeightAvailable()) {
-                    if (viewSize.getRelativeHeight() != null) {
-                        layoutView.setRelativeHeight(viewSize.getRelativeHeight());
-                    } else {
-                        layoutView.setAbsoluteHeight(viewSize.getAbsoluteHeight());
-                    }
-                }
+                changeViewSize(layoutView, viewSize);
+            }
+        }
+    }
+
+    private void changeViewSize(WorkSpaceLayoutView layoutView, ViewSize viewSize) {
+        if (viewSize.isWidthAvailable()) {
+            if (viewSize.getRelativeWidth() != null) {
+                layoutView.setRelativeWidth(viewSize.getRelativeWidth());
+            } else {
+                layoutView.setAbsoluteWidth(viewSize.getAbsoluteWidth());
+            }
+        }
+        if (viewSize.isHeightAvailable()) {
+            if (viewSize.getRelativeHeight() != null) {
+                layoutView.setRelativeHeight(viewSize.getRelativeHeight());
+            } else {
+                layoutView.setAbsoluteHeight(viewSize.getAbsoluteHeight());
             }
         }
     }
@@ -201,6 +227,11 @@ public void handleViewLayoutPositionChange(ResponsiveApplication application, bo
         }
     }
 
+    @Override
+    public void handleViewSelect(View view) {
+        WorkSpaceLayoutView layoutView = workSpaceLayout.getViewByPanel(view.getPanel());
+        layoutView.select();
+    }
 
 
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/application/assembler/MobileApplicationAssembler.java b/teamapps-ux/src/main/java/org/teamapps/ux/application/assembler/MobileApplicationAssembler.java
index 0ba1527a9..71751c380 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/application/assembler/MobileApplicationAssembler.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/application/assembler/MobileApplicationAssembler.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,304 +19,328 @@
  */
 package org.teamapps.ux.application.assembler;
 
-import org.teamapps.icon.material.MaterialIcon;
-import org.teamapps.ux.application.*;
+import org.teamapps.icons.Icon;
+import org.teamapps.ux.application.ResponsiveApplication;
+import org.teamapps.ux.application.ResponsiveApplicationToolbar;
 import org.teamapps.ux.application.perspective.Perspective;
 import org.teamapps.ux.application.view.View;
 import org.teamapps.ux.application.view.ViewSize;
 import org.teamapps.ux.component.Component;
+import org.teamapps.ux.component.animation.PageTransition;
 import org.teamapps.ux.component.itemview.SimpleItemGroup;
 import org.teamapps.ux.component.itemview.SimpleItemView;
 import org.teamapps.ux.component.mobile.MobileLayout;
-import org.teamapps.ux.component.mobile.MobileLayoutAnimation;
 import org.teamapps.ux.component.mobile.NavigationBar;
 import org.teamapps.ux.component.mobile.NavigationBarButton;
+import org.teamapps.ux.component.progress.MultiProgressDisplay;
 import org.teamapps.ux.component.template.BaseTemplateRecord;
 import org.teamapps.ux.component.toolbar.AbstractToolContainer;
+import org.teamapps.ux.component.toolbar.ToolbarButtonGroup;
 import org.teamapps.ux.component.tree.Tree;
 import org.teamapps.ux.component.workspacelayout.definition.LayoutItemDefinition;
+import org.teamapps.ux.icon.TeamAppsIconBundle;
+import org.teamapps.ux.session.SessionContext;
 
 import java.util.ArrayList;
 import java.util.List;
 
 public class MobileApplicationAssembler implements ApplicationAssembler {
 
-    private final NavigationBarButton<BaseTemplateRecord> applicationLauncherButton;
-    private final NavigationBarButton<BaseTemplateRecord> applicationTreeButton;
-    private final NavigationBarButton<BaseTemplateRecord> applicationViewsButton;
-    private final NavigationBarButton<BaseTemplateRecord> applicationToolbarButton;
-    private final NavigationBarButton<BaseTemplateRecord> applicationBackButton;
-
-    private MobileLayout mobileLayout;
-    private NavigationBar<BaseTemplateRecord> navigationBar;
-    private SimpleItemView<Void> viewsItemView;
-    private AbstractToolContainer mainToolbar;
-
-
-    private View applicationLauncher;
-    private View appTree;
-    private List<View> applicationViews = new ArrayList<>();
-    private List<View> perspectiveViews = new ArrayList<>();
-    private List<View> viewHistory = new ArrayList<>();
-    private View activeView;
-
-
-    public MobileApplicationAssembler() {
-        this.mobileLayout = new MobileLayout();
-        this.navigationBar = new NavigationBar<>();
-        this.viewsItemView = new SimpleItemView<>();
-
-        navigationBar.preloadFanOutComponent(viewsItemView);
-        mobileLayout.setNavigationBar(navigationBar);
-
-        applicationLauncherButton = NavigationBarButton.create(MaterialIcon.VIEW_MODULE);
-        applicationTreeButton = NavigationBarButton.create(MaterialIcon.TOC);
-        applicationViewsButton = NavigationBarButton.create(MaterialIcon.VIEW_CAROUSEL);
-        applicationToolbarButton = NavigationBarButton.create(MaterialIcon.SUBTITLES);
-        applicationBackButton = NavigationBarButton.create(MaterialIcon.NAVIGATE_BEFORE);
-
-
-        applicationLauncherButton.setVisible(false);
-        applicationTreeButton.setVisible(false);
-
-        navigationBar.addButton(applicationLauncherButton);
-        navigationBar.addButton(applicationTreeButton);
-        navigationBar.addButton(applicationViewsButton);
-        navigationBar.addButton(applicationToolbarButton);
-        navigationBar.addButton(applicationBackButton);
-
-        applicationLauncherButton.onClick.addListener(aVoid -> {
-            navigationBar.hideFanOutComponent();
-            mobileLayout.showView(applicationLauncher.getPanel(), MobileLayoutAnimation.BACKWARD);
-            activeView = applicationLauncher;
-        });
-
-        applicationTreeButton.onClick.addListener(aVoid -> {
-            navigationBar.hideFanOutComponent();
-            MobileLayoutAnimation animation = MobileLayoutAnimation.BACKWARD;
-            if (activeView.equals(applicationLauncher)) {
-                animation = MobileLayoutAnimation.FORWARD;
-            }
-            mobileLayout.showView(appTree.getPanel(), animation);
-            activeView = appTree;
-        });
-
-        applicationViewsButton.onClick.addListener(aVoid -> {
-            navigationBar.showOrHideFanoutComponent(viewsItemView);
-        });
-
-        applicationToolbarButton.onClick.addListener(aVoid -> {
-            navigationBar.showOrHideFanoutComponent(mainToolbar);
-        });
-
-        applicationBackButton.onClick.addListener(aVoid -> {
-            navigationBar.hideFanOutComponent();
-            goBack();
-        });
-
-        viewsItemView.onItemClicked.addListener(data -> {
-            //ScopeComponent component = data.getItem().getPayload();
-            //component.refreshPanelToolbar();
-            //displayComponent(component, MobileLayoutAnimation.FORWARD);
-            navigationBar.hideFanOutComponent();
-        });
-    }
-
-    public void setApplicationLauncher(View applicationLauncher) {
-        if (applicationLauncher == null) {
-            if (this.applicationLauncher != null) {
-                mobileLayout.removeView(applicationLauncher.getPanel());
-            }
-            applicationLauncherButton.setVisible(false);
-        } else {
-            mobileLayout.preloadView(applicationLauncher.getPanel());
-            applicationLauncherButton.setVisible(true);
-        }
-        this.applicationLauncher = applicationLauncher;
-    }
-
-    public void setApplicationTree(View appTree) {
-        //view should be part of application views - this is just the explicit setting
-        this.appTree = appTree;
-        this.applicationTreeButton.setVisible(true);
-    }
-
-    public void showView(View view) {
-        if (activeView != null) {
-            //todo check when to add to history
-            //viewHistory.add(view);
-        }
-        activeView = view;
-        mobileLayout.showView(view.getPanel(), MobileLayoutAnimation.FORWARD);
-    }
-
-    public void showInitialView() {
-        View view = null;
-        if (!applicationViews.isEmpty()) {
-            view = applicationViews.get(0);
-        } else if (!perspectiveViews.isEmpty()){
-            view = perspectiveViews.get(0);
-        }
-        if (view != null) {
-            mobileLayout.showView(view.getPanel(), MobileLayoutAnimation.FORWARD);
-            activeView = view;
-        }
-    }
-
-
-    public void goBack() {
-        View view = null;
-        for (int i = 0; i < perspectiveViews.size(); i++) {
-            if (perspectiveViews.get(i).equals(activeView)) {
-                if (i > 0) {
-                    view = perspectiveViews.get(i - 1);
-                } else if (!applicationViews.isEmpty()) {
-                    view = applicationViews.get(applicationViews.size() - 1);
-                }
-                break;
-            }
-        }
-
-        if (view == null) {
-            for (int i = 0; i < applicationViews.size(); i++) {
-                if (applicationViews.get(i).equals(activeView)) {
-                    if (i > 0) {
-                        view = applicationViews.get(i - 1);
-                    } else {
-                        view = applicationLauncher;
-                    }
-                    break;
-                }
-            }
-        }
-
-        if (view != null) {
-            activeView = view;
-            mobileLayout.showView(activeView.getPanel(), MobileLayoutAnimation.BACKWARD);
-        }
-    }
-
-    public void goForward() {
-        //todo...
-    }
-
-
-
-    @Override
-    public Component createApplication(ResponsiveApplication application) {
-        return mobileLayout;
-    }
-
-    @Override
-    public void setWorkSpaceToolbar(ResponsiveApplicationToolbar toolbar) {
-        mainToolbar = toolbar.getToolbar();
-        mainToolbar.onButtonClick.addListener(event -> {
-            if (event.getDropDownButtonClickInfo() != null && !event.getDropDownButtonClickInfo().isOpening()) {
-                navigationBar.hideFanOutComponent();
-            }
-        });
-        navigationBar.preloadFanOutComponent(mainToolbar);
-    }
-
-    @Override
-    public void handleApplicationViewAdded(ResponsiveApplication application, View view) {
-        applicationViews.add(view);
-        if (view.getComponent() instanceof Tree) {
-            setApplicationTree(view);
-        }
-    }
-
-    @Override
-    public void handleApplicationViewRemoved(ResponsiveApplication application, View view) {
-        applicationViews.remove(view);
-    }
-
-    @Override
-    public void handlePerspectiveChange(ResponsiveApplication application, Perspective perspective, Perspective previousPerspective, List<View> activeViews, List<View> addedViews, List<View> removedViews) {
-        removedViews.forEach(view -> mobileLayout.removeView(view.getPanel()));
-        addedViews.forEach(view -> mobileLayout.preloadView(view.getPanel()));
-        perspectiveViews = activeViews;
-
-        viewsItemView.removeAllGroups();
-        if (applicationLauncher != null) {
-            SimpleItemGroup<Void> group = viewsItemView.addSingleColumnGroup(MaterialIcon.VIEW_MODULE, "Launcher");
-            group.addItem(applicationLauncher.getPanel().getIcon(), applicationLauncher.getPanel().getTitle(), null).onClick.addListener(aVoid -> {
-                showView(applicationLauncher);
-            });
-        }
-
-        if (!applicationViews.isEmpty()) {
-            SimpleItemGroup<Void> group = viewsItemView.addSingleColumnGroup(MaterialIcon.TOC, "Application views");
-            applicationViews.forEach(view -> {
-                group.addItem(view.getPanel().getIcon(), view.getPanel().getTitle(), null).onClick.addListener(aVoid -> {
-                    showView(view);
-                });
-            });
-        }
-
-        if (!perspectiveViews.isEmpty()) {
-            SimpleItemGroup<Void> group = viewsItemView.addSingleColumnGroup(MaterialIcon.VIEW_CAROUSEL, "Perspective views");
-            perspectiveViews.forEach(view -> {
-                group.addItem(view.getPanel().getIcon(), view.getPanel().getTitle(), null).onClick.addListener(aVoid -> {
-                    showView(view);
-                });
-            });
-        }
-
-        if (!perspectiveViews.isEmpty()) {
-            View view = perspectiveViews.get(0);
-            activeView = view;
-            mobileLayout.showView(view.getPanel(), MobileLayoutAnimation.FORWARD);
-        }
-    }
-
-    @Override
-    public void handleLayoutChange(ResponsiveApplication application, boolean isActivePerspective, Perspective perspective, LayoutItemDefinition layout) {
-
-    }
-
-    @Override
-    public void handleViewAdded(ResponsiveApplication application, boolean isActivePerspective, Perspective perspective, View view) {
-        if (isActivePerspective) {
-            mobileLayout.preloadView(view.getPanel());
-            perspectiveViews.add(view);
-        }
-    }
-
-    @Override
-    public void handleViewRemoved(ResponsiveApplication application, boolean isActivePerspective, Perspective perspective, View view) {
-        if (isActivePerspective) {
-            mobileLayout.removeView(view.getPanel());
-            perspectiveViews.remove(view);
-        }
-    }
-
-    @Override
-    public void handleViewVisibilityChange(ResponsiveApplication application, boolean isActivePerspective, Perspective perspective, View view, boolean visible) {
-        if (isActivePerspective) {
-
-        }
-    }
-
-    @Override
-    public void handleViewFocusRequest(ResponsiveApplication application, boolean isActivePerspective, Perspective perspective, View view, boolean ensureVisible) {
-        if (isActivePerspective) {
-            showView(view);
-        }
-    }
-
-    @Override
-    public void handleViewSizeChange(ResponsiveApplication application, boolean isActivePerspective, Perspective perspective, View view, ViewSize viewSize) {
-
-    }
-
-    @Override
-    public void handleViewTabTitleChange(ResponsiveApplication application, boolean isActivePerspective, Perspective perspective, View view, String title) {
-
-    }
-
-    @Override
-    public void handleViewLayoutPositionChange(ResponsiveApplication application, boolean isActivePerspective, Perspective perspective, View view, String position) {
-
-    }
+	private static final int PAGE_TRANSITION_ANIMATION_DURATION = 300;
+
+	private final NavigationBarButton<BaseTemplateRecord> applicationLauncherButton;
+	private final NavigationBarButton<BaseTemplateRecord> applicationTreeButton;
+	private final NavigationBarButton<BaseTemplateRecord> applicationViewsButton;
+	private final NavigationBarButton<BaseTemplateRecord> applicationToolbarButton;
+	private final NavigationBarButton<BaseTemplateRecord> applicationBackButton;
+
+	private final MobileLayout mobileLayout;
+	private final NavigationBar<BaseTemplateRecord> navigationBar;
+	private final SimpleItemView<Void> viewsItemView;
+	private AbstractToolContainer mainToolbar;
+
+
+	private View applicationLauncher;
+	private View appTree;
+	private final List<View> applicationViews = new ArrayList<>();
+	private List<View> perspectiveViews = new ArrayList<>();
+	private View activeView;
+
+	public MobileApplicationAssembler() {
+		this(
+				SessionContext.current().getIcon(TeamAppsIconBundle.APPLICATION_LAUNCHER.getKey()),
+				SessionContext.current().getIcon(TeamAppsIconBundle.TREE.getKey()),
+				SessionContext.current().getIcon(TeamAppsIconBundle.VIEWS.getKey()),
+				SessionContext.current().getIcon(TeamAppsIconBundle.TOOLBAR.getKey()),
+				SessionContext.current().getIcon(TeamAppsIconBundle.TOOLBAR.getKey()),
+				null);
+	}
+
+	public MobileApplicationAssembler(Icon launcherIcon, Icon treeIcon, Icon viewsIcon, Icon toolbarIcon, Icon backIcon, List<AdditionalNavigationButton> additionalLeftButtons) {
+		this.mobileLayout = new MobileLayout();
+		this.navigationBar = new NavigationBar<>();
+		this.viewsItemView = new SimpleItemView<>();
+
+		navigationBar.preloadFanOutComponent(viewsItemView);
+		mobileLayout.setNavigationBar(navigationBar);
+
+		applicationLauncherButton = NavigationBarButton.create(launcherIcon);
+		applicationTreeButton = NavigationBarButton.create(treeIcon);
+		applicationViewsButton = NavigationBarButton.create(viewsIcon);
+		applicationToolbarButton = NavigationBarButton.create(toolbarIcon);
+		// TODO make toolbar button invisible when no application toolbar
+		applicationBackButton = NavigationBarButton.create(backIcon);
+
+
+		applicationLauncherButton.setVisible(false);
+		applicationTreeButton.setVisible(false);
+
+		if (additionalLeftButtons != null) {
+			for (AdditionalNavigationButton leftButton : additionalLeftButtons) {
+				NavigationBarButton<BaseTemplateRecord> button = NavigationBarButton.create(leftButton.getIcon(), leftButton.getCaption());
+				navigationBar.addButton(button);
+				button.onClick.addListener(aVoid -> leftButton.getHandler().run());
+			}
+		}
+		navigationBar.addButton(applicationLauncherButton);
+		navigationBar.addButton(applicationTreeButton);
+		navigationBar.addButton(applicationViewsButton);
+		navigationBar.addButton(applicationToolbarButton);
+		navigationBar.addButton(applicationBackButton);
+
+		applicationLauncherButton.onClick.addListener(aVoid -> {
+			navigationBar.hideFanOutComponent();
+			mobileLayout.setContent(applicationLauncher.getPanel(), PageTransition.MOVE_TO_RIGHT_VS_MOVE_FROM_LEFT, PAGE_TRANSITION_ANIMATION_DURATION);
+			updateActiveView(applicationLauncher);
+		});
+
+		applicationTreeButton.onClick.addListener(aVoid -> {
+			navigationBar.hideFanOutComponent();
+			PageTransition animation = PageTransition.MOVE_TO_RIGHT_VS_MOVE_FROM_LEFT;
+			if (activeView.equals(applicationLauncher)) {
+				animation = PageTransition.MOVE_TO_LEFT_VS_MOVE_FROM_RIGHT;
+			}
+			mobileLayout.setContent(appTree.getPanel(), animation, PAGE_TRANSITION_ANIMATION_DURATION);
+			updateActiveView(appTree);
+		});
+
+		applicationViewsButton.onClick.addListener(aVoid -> {
+			navigationBar.showOrHideFanoutComponent(viewsItemView);
+		});
+
+		applicationToolbarButton.onClick.addListener(aVoid -> {
+			navigationBar.showOrHideFanoutComponent(mainToolbar);
+		});
+
+		applicationBackButton.onClick.addListener(aVoid -> {
+			navigationBar.hideFanOutComponent();
+			goBack();
+		});
+
+		viewsItemView.onItemClicked.addListener(data -> {
+			navigationBar.hideFanOutComponent();
+		});
+	}
+
+	private void updateActiveView(View newActiveView) {
+		if (activeView != null && activeView != newActiveView) {
+			activeView.onEffectiveVisibilityChanged().fire(false);
+		}
+		activeView = newActiveView;
+		newActiveView.onEffectiveVisibilityChanged().fire(true);
+	}
+
+	public void setApplicationLauncher(View applicationLauncher) {
+		if (applicationLauncher == null) {
+			applicationLauncherButton.setVisible(false);
+		} else {
+			mobileLayout.preloadView(applicationLauncher.getPanel());
+			applicationLauncherButton.setVisible(true);
+		}
+		this.applicationLauncher = applicationLauncher;
+	}
+
+	public void setApplicationTree(View appTree) {
+		//view should be part of application views - this is just the explicit setting
+		this.appTree = appTree;
+		this.applicationTreeButton.setVisible(true);
+	}
+
+	public void showView(View view) {
+		if (activeView != null) {
+			//todo check when to add to history
+			//viewHistory.add(view);
+		}
+		updateActiveView(view);
+		mobileLayout.setContent(view.getPanel(), PageTransition.MOVE_TO_LEFT_VS_MOVE_FROM_RIGHT, PAGE_TRANSITION_ANIMATION_DURATION);
+	}
+
+	public void showInitialView() {
+		View view = null;
+		if (!applicationViews.isEmpty()) {
+			view = applicationViews.get(0);
+		} else if (!perspectiveViews.isEmpty()) {
+			view = perspectiveViews.get(0);
+		}
+		if (view != null) {
+			mobileLayout.setContent(view.getPanel(), PageTransition.MOVE_TO_LEFT_VS_MOVE_FROM_RIGHT, PAGE_TRANSITION_ANIMATION_DURATION);
+			updateActiveView(view);
+		}
+	}
+
+
+	public void goBack() {
+		View view = null;
+		for (int i = 0; i < perspectiveViews.size(); i++) {
+			if (perspectiveViews.get(i).equals(activeView)) {
+				if (i > 0) {
+					view = perspectiveViews.get(i - 1);
+				} else if (!applicationViews.isEmpty()) {
+					view = applicationViews.get(applicationViews.size() - 1);
+				}
+				break;
+			}
+		}
+
+		if (view == null) {
+			for (int i = 0; i < applicationViews.size(); i++) {
+				if (applicationViews.get(i).equals(activeView)) {
+					if (i > 0) {
+						view = applicationViews.get(i - 1);
+					} else {
+						view = applicationLauncher;
+					}
+					break;
+				}
+			}
+		}
+
+		if (view != null) {
+			updateActiveView(view);
+			mobileLayout.setContent(activeView.getPanel(), PageTransition.MOVE_TO_RIGHT_VS_MOVE_FROM_LEFT, PAGE_TRANSITION_ANIMATION_DURATION);
+		}
+	}
+
+	public void goForward() {
+		//todo...
+	}
+
+
+	@Override
+	public Component createApplication(ResponsiveApplication application) {
+		return mobileLayout;
+	}
+
+	@Override
+	public void setWorkSpaceToolbar(ResponsiveApplicationToolbar toolbar) {
+		mainToolbar = toolbar.getToolbar();
+		mainToolbar.onButtonClick.addListener(event -> {
+			if (event.getDropDownButtonClickInfo() != null && !event.getDropDownButtonClickInfo().isOpening()) {
+				navigationBar.hideFanOutComponent();
+			}
+		});
+		navigationBar.preloadFanOutComponent(mainToolbar);
+	}
+
+	@Override
+	public MultiProgressDisplay getMultiProgressDisplay() {
+		return navigationBar.getMultiProgressDisplay();
+	}
+
+	@Override
+	public void handleApplicationViewAdded(ResponsiveApplication application, View view) {
+		applicationViews.add(view);
+		if (view.getComponent() instanceof Tree) {
+			setApplicationTree(view);
+		}
+	}
+
+	@Override
+	public void handleApplicationViewRemoved(ResponsiveApplication application, View view) {
+		applicationViews.remove(view);
+	}
+
+	@Override
+	public void handlePerspectiveChange(ResponsiveApplication application, Perspective perspective, Perspective previousPerspective, List<View> activeViews, List<View> addedViews,
+                                        List<View> removedViews) {
+		addedViews.forEach(view -> mobileLayout.preloadView(view.getPanel()));
+		perspectiveViews = activeViews;
+
+		viewsItemView.removeAllGroups();
+		SimpleItemGroup<Void> itemGroup = viewsItemView.addSingleColumnGroup(null, null);
+		if (!applicationViews.isEmpty()) {
+			applicationViews.forEach(view -> {
+				itemGroup.addItem(view.getPanel().getIcon(), view.getPanel().getTitle(), null).onClick.addListener(aVoid -> {
+					showView(view);
+				});
+			});
+		}
+		if (!perspectiveViews.isEmpty()) {
+			perspectiveViews.forEach(view -> {
+				itemGroup.addItem(view.getPanel().getIcon(), view.getPanel().getTitle(), null).onClick.addListener(aVoid -> {
+					showView(view);
+				});
+			});
+		}
+
+		if (!perspectiveViews.isEmpty()) {
+			View view = perspective.getFocusedView() != null ? perspective.getFocusedView() : perspectiveViews.get(0);
+			updateActiveView(view);
+			mobileLayout.setContent(view.getPanel(), PageTransition.MOVE_TO_LEFT_VS_MOVE_FROM_RIGHT, PAGE_TRANSITION_ANIMATION_DURATION);
+		}
+	}
+
+	@Override
+	public void handleLayoutChange(ResponsiveApplication application, boolean isActivePerspective, Perspective perspective, LayoutItemDefinition layout) {
+
+	}
+
+	@Override
+	public void handleViewAdded(ResponsiveApplication application, boolean isActivePerspective, Perspective perspective, View view) {
+		if (isActivePerspective) {
+			mobileLayout.preloadView(view.getPanel());
+			perspectiveViews.add(view);
+		}
+	}
+
+	@Override
+	public void handleViewRemoved(ResponsiveApplication application, boolean isActivePerspective, Perspective perspective, View view) {
+		if (isActivePerspective) {
+			perspectiveViews.remove(view);
+		}
+	}
+
+	@Override
+	public void handleViewVisibilityChange(ResponsiveApplication application, boolean isActivePerspective, Perspective perspective, View view, boolean visible) {
+		if (isActivePerspective) {
+
+		}
+	}
+
+	@Override
+	public void handleViewFocusRequest(ResponsiveApplication application, boolean isActivePerspective, Perspective perspective, View view, boolean ensureVisible) {
+		if (isActivePerspective) {
+			showView(view);
+		}
+	}
+
+	@Override
+	public void handleViewSizeChange(ResponsiveApplication application, boolean isActivePerspective, Perspective perspective, View view, ViewSize viewSize) {
+
+	}
+
+	@Override
+	public void handleViewTabTitleChange(ResponsiveApplication application, boolean isActivePerspective, Perspective perspective, View view, String title) {
+
+	}
+
+	@Override
+	public void handleViewLayoutPositionChange(ResponsiveApplication application, boolean isActivePerspective, Perspective perspective, View view, String position) {
+
+	}
+
+	@Override
+	public void handleApplicationToolbarButtonGroupAdded(ResponsiveApplication application, ToolbarButtonGroup buttonGroup) {
+		applicationToolbarButton.setVisible(true);
+	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/application/ApplicationDesktop.java b/teamapps-ux/src/main/java/org/teamapps/ux/application/assembler/MobileApplicationNavigationController.java
similarity index 67%
rename from teamapps-ux/src/main/java/org/teamapps/ux/application/ApplicationDesktop.java
rename to teamapps-ux/src/main/java/org/teamapps/ux/application/assembler/MobileApplicationNavigationController.java
index 876620311..3d1405f9a 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/application/ApplicationDesktop.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/application/assembler/MobileApplicationNavigationController.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,16 +17,20 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-package org.teamapps.ux.application;
+package org.teamapps.ux.application.assembler;
 
-import org.teamapps.icons.api.Icon;
+import org.teamapps.ux.application.view.View;
 import org.teamapps.ux.component.Component;
 
-public interface ApplicationDesktop {
+public interface MobileApplicationNavigationController {
 
-	Component getApplicationsListingComponent();
+	Component getApplicationLauncher();
 
-	void showTopLevelComponent(String originatingAppName, Icon icon, String title, Component component);
+	View getApplicationMenuView();
 
-	void removeTopLevelComponent(Component component);
+	ButtonData getButtonData(ButtonDataType buttonDataType);
+
+	boolean isBackOperationAvailable();
+
+	void fireBackOperation();
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/application/assembler/TopNavigationMobileApplicationAssembler.java b/teamapps-ux/src/main/java/org/teamapps/ux/application/assembler/TopNavigationMobileApplicationAssembler.java
new file mode 100644
index 000000000..c1de52306
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/application/assembler/TopNavigationMobileApplicationAssembler.java
@@ -0,0 +1,364 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.application.assembler;
+
+import org.teamapps.common.format.Color;
+import org.teamapps.icons.Icon;
+import org.teamapps.ux.application.ResponsiveApplication;
+import org.teamapps.ux.application.ResponsiveApplicationToolbar;
+import org.teamapps.ux.application.perspective.Perspective;
+import org.teamapps.ux.application.view.View;
+import org.teamapps.ux.application.view.ViewSize;
+import org.teamapps.ux.component.Component;
+import org.teamapps.ux.component.animation.PageTransition;
+import org.teamapps.ux.component.calendar.Calendar;
+import org.teamapps.ux.component.charting.forcelayout.ForceLayoutGraph;
+import org.teamapps.ux.component.flexcontainer.VerticalLayout;
+import org.teamapps.ux.component.form.ResponsiveForm;
+import org.teamapps.ux.component.infiniteitemview.InfiniteItemView2;
+import org.teamapps.ux.component.itemview.ItemView;
+import org.teamapps.ux.component.itemview.SimpleItem;
+import org.teamapps.ux.component.itemview.SimpleItemGroup;
+import org.teamapps.ux.component.itemview.SimpleItemView;
+import org.teamapps.ux.component.map.MapView;
+import org.teamapps.ux.component.mobile.MobileLayout;
+import org.teamapps.ux.component.panel.Panel;
+import org.teamapps.ux.component.progress.MultiProgressDisplay;
+import org.teamapps.ux.component.table.Table;
+import org.teamapps.ux.component.template.BaseTemplate;
+import org.teamapps.ux.component.template.BaseTemplateRecord;
+import org.teamapps.ux.component.timegraph.TimeGraph;
+import org.teamapps.ux.component.toolbar.AbstractToolContainer;
+import org.teamapps.ux.component.toolbar.Toolbar;
+import org.teamapps.ux.component.toolbar.ToolbarButton;
+import org.teamapps.ux.component.toolbar.ToolbarButtonGroup;
+import org.teamapps.ux.component.tree.Tree;
+import org.teamapps.ux.component.workspacelayout.definition.LayoutItemDefinition;
+
+import java.util.ArrayList;
+import java.util.List;
+
+public class TopNavigationMobileApplicationAssembler implements ApplicationAssembler {
+
+	private static final int PAGE_TRANSITION_ANIMATION_DURATION = 300;
+
+	private Component applicationLauncher;
+	private VerticalLayout verticalLayout;
+	private Toolbar navigationToolbar;
+	private final MobileLayout mobileLayout;
+	private AbstractToolContainer mainToolbar;
+	private MobileApplicationNavigationController navigationController;
+	private SimpleItemView<Void> viewsItemView;
+	private final List<View> applicationViews = new ArrayList<>();
+	private List<View> perspectiveViews = new ArrayList<>();
+	private final ToolbarButtonGroup centerGroup;
+	private final ToolbarButtonGroup leftGroup;
+	private final ToolbarButtonGroup rightGroup;
+	private final ToolbarButton navigationToolbarMenuButton;
+	private View activeView;
+
+	public TopNavigationMobileApplicationAssembler(MobileApplicationNavigationController navigationController) {
+		this.navigationController = navigationController;
+		verticalLayout = new VerticalLayout();
+		mobileLayout = new MobileLayout();
+		viewsItemView = new SimpleItemView<>();
+		navigationToolbar = new Toolbar();
+		applicationLauncher = navigationController.getApplicationLauncher();
+		verticalLayout.addComponentAutoSize(navigationToolbar);
+		verticalLayout.addComponentFillRemaining(mobileLayout);
+		navigationToolbar.setBackgroundColor(Color.WHITE.withAlpha(0.6f));
+
+		leftGroup = navigationToolbar.addButtonGroup(new ToolbarButtonGroup());
+		ButtonData backButtonData = navigationController.getButtonData(ButtonDataType.BACK);
+		ToolbarButton backButton = new ToolbarButton(BaseTemplate.LIST_ITEM_MEDIUM_ICON_SINGLE_LINE, new BaseTemplateRecord(backButtonData.getIcon(), backButtonData.getTitle()));
+		leftGroup.addButton(backButton);
+		leftGroup.setShowGroupSeparator(false);
+		backButton.onClick.addListener(() -> {
+			if (activeView == null && navigationController.isBackOperationAvailable()) {
+				navigationController.fireBackOperation();
+			} else {
+				goBack();
+			}
+		});
+
+		centerGroup = navigationToolbar.addButtonGroup(new ToolbarButtonGroup());
+		//todo workaround until distribute option is available
+		centerGroup.addButton(new ToolbarButton(BaseTemplate.LIST_ITEM_MEDIUM_ICON_SINGLE_LINE, new BaseTemplateRecord("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;")));
+		centerGroup.setShowGroupSeparator(false);
+		ButtonData viewButtonData = navigationController.getButtonData(ButtonDataType.VIEWS);
+		ToolbarButton viewsButton = new ToolbarButton(BaseTemplate.LIST_ITEM_MEDIUM_ICON_SINGLE_LINE, new BaseTemplateRecord(viewButtonData.getIcon(), viewButtonData.getTitle()));
+		viewsButton.setDropDownComponent(viewsItemView);
+		viewsButton.setDroDownPanelWidth(450);
+		centerGroup.addButton(viewsButton);
+
+		rightGroup = navigationToolbar.addButtonGroup(new ToolbarButtonGroup());
+		rightGroup.setRightSide(true);
+		rightGroup.setShowGroupSeparator(false);
+		ButtonData menuButtonData = navigationController.getButtonData(ButtonDataType.MENU);
+		navigationToolbarMenuButton = new ToolbarButton(BaseTemplate.LIST_ITEM_MEDIUM_ICON_SINGLE_LINE, new BaseTemplateRecord(menuButtonData.getIcon(), menuButtonData.getTitle()));
+		rightGroup.addButton(navigationToolbarMenuButton);
+
+		setNavigationToolbarVisible(false);
+	}
+
+	private void setNavigationToolbarVisible(boolean visible) {
+		navigationToolbar.setVisible(visible);
+		leftGroup.setVisible(visible);
+		centerGroup.setVisible(visible);
+		rightGroup.setVisible(visible);
+	}
+
+
+	public void goBack() {
+
+		View view = null;
+		for (int i = 0; i < perspectiveViews.size(); i++) {
+			if (perspectiveViews.get(i).equals(activeView)) {
+				if (i > 0) {
+					view = perspectiveViews.get(i - 1);
+				} else if (!applicationViews.isEmpty()) {
+					view = applicationViews.get(applicationViews.size() - 1);
+				}
+				break;
+			}
+		}
+		if (view == null) {
+			for (int i = 0; i < applicationViews.size(); i++) {
+				if (applicationViews.get(i).equals(activeView)) {
+					if (i > 0) {
+						view = applicationViews.get(i - 1);
+					}
+					break;
+				}
+			}
+		}
+		activeView = view;
+		if (activeView == null) {
+			setNavigationToolbarVisible(false);
+			mobileLayout.setContent(applicationLauncher, PageTransition.MOVE_TO_RIGHT_VS_MOVE_FROM_LEFT, PAGE_TRANSITION_ANIMATION_DURATION);
+		} else {
+			setNavigationToolbarVisible(true);
+			mobileLayout.setContent(activeView.getPanel(), PageTransition.MOVE_TO_RIGHT_VS_MOVE_FROM_LEFT, PAGE_TRANSITION_ANIMATION_DURATION);
+		}
+	}
+
+	public void showView(View view) {
+		if (view == null) {
+			activeView = view;
+			setNavigationToolbarVisible(false);
+			mobileLayout.setContent(applicationLauncher, PageTransition.MOVE_TO_RIGHT_VS_MOVE_FROM_LEFT, PAGE_TRANSITION_ANIMATION_DURATION);
+			return;
+		}
+
+		if (view.equals(activeView)) {
+			return;
+		}
+
+		List<View> views = new ArrayList<>(applicationViews);
+		views.addAll(perspectiveViews);
+		int lastPos = -1;
+		int newPos = 0;
+		for (int i = 0; i < views.size(); i++) {
+			if (activeView != null && activeView.equals(views.get(i))) {
+				lastPos = i;
+			}
+			if (view.equals(views.get(i))) {
+				newPos = i;
+			}
+		}
+
+		if (newPos > lastPos) {
+			mobileLayout.setContent(view.getPanel(), PageTransition.MOVE_TO_LEFT_VS_MOVE_FROM_RIGHT, PAGE_TRANSITION_ANIMATION_DURATION);
+		} else {
+			mobileLayout.setContent(view.getPanel(), PageTransition.MOVE_TO_RIGHT_VS_MOVE_FROM_LEFT, PAGE_TRANSITION_ANIMATION_DURATION);
+		}
+		activeView = view;
+	}
+
+	public void showInitialView() {
+		View view = null;
+		if (!applicationViews.isEmpty()) {
+			view = applicationViews.get(0);
+		} else if (!perspectiveViews.isEmpty()) {
+			view = perspectiveViews.get(0);
+		}
+		if (view != null) {
+			mobileLayout.setContent(view.getPanel(), PageTransition.MOVE_TO_LEFT_VS_MOVE_FROM_RIGHT, PAGE_TRANSITION_ANIMATION_DURATION);
+			activeView = view;
+		}
+	}
+
+	@Override
+	public void setWorkSpaceToolbar(ResponsiveApplicationToolbar toolbar) {
+		mainToolbar = toolbar.getToolbar();
+		navigationToolbarMenuButton.setDropDownComponent(mainToolbar);
+		mainToolbar.onButtonClick.addListener(() -> {
+			//todo hide drop down panel
+		});
+	}
+
+	@Override
+	public Component createApplication(ResponsiveApplication application) {
+		return verticalLayout;
+	}
+
+	@Override
+	public MultiProgressDisplay getMultiProgressDisplay() {
+		return null;
+	}
+
+	@Override
+	public void handleApplicationViewAdded(ResponsiveApplication application, View view) {
+		applicationViews.add(view);
+	}
+
+	@Override
+	public void handleApplicationViewRemoved(ResponsiveApplication application, View view) {
+		applicationViews.remove(view);
+	}
+
+	@Override
+	public void handlePerspectiveChange(ResponsiveApplication application, Perspective perspective, Perspective previousPerspective, List<View> activeViews, List<View> addedViews, List<View> removedViews) {
+		addedViews.forEach(view -> mobileLayout.preloadView(view.getPanel()));
+		perspectiveViews = activeViews;
+		viewsItemView.removeAllGroups();
+
+		ButtonData appGroupData = navigationController.getButtonData(ButtonDataType.APPLICATION_GROUP);
+		SimpleItemGroup<Void> appGroup = viewsItemView.addSingleColumnGroup(appGroupData.getIcon(), appGroupData.getTitle());
+		appGroup.setItemTemplate(BaseTemplate.LIST_ITEM_VERY_LARGE_ICON_TWO_LINES);
+		ButtonData appLauncherData = navigationController.getButtonData(ButtonDataType.APPLICATION_LAUNCHER);
+		appGroup.addItem(appLauncherData.getIcon(), appLauncherData.getTitle(), appLauncherData.getDescription()).onClick.addListener(() -> {
+			showView(null);
+		});
+		applicationViews.forEach(view -> appGroup.addItem(createViewButton(view)));
+
+		ButtonData viewGroupData = navigationController.getButtonData(ButtonDataType.VIEW_GROUP);
+		SimpleItemGroup<Void> viewGroup = viewsItemView.addSingleColumnGroup(viewGroupData.getIcon(), viewGroupData.getTitle());
+		viewGroup.setItemTemplate(BaseTemplate.LIST_ITEM_VERY_LARGE_ICON_TWO_LINES);
+		perspectiveViews.forEach(view -> viewGroup.addItem(createViewButton(view)));
+
+		if (!perspectiveViews.isEmpty()) {
+			View view = perspective.getFocusedView() != null ? perspective.getFocusedView() : perspectiveViews.get(0);
+			activeView = view;
+			mobileLayout.setContent(view.getPanel(), PageTransition.MOVE_TO_LEFT_VS_MOVE_FROM_RIGHT, PAGE_TRANSITION_ANIMATION_DURATION);
+			setNavigationToolbarVisible(true);
+		}
+	}
+
+	private SimpleItem<Void> createViewButton(View view) {
+		ButtonData buttonData = null;
+		Panel panel = view.getPanel();
+		if (navigationController.getApplicationMenuView().equals(view)) {
+			buttonData = navigationController.getButtonData(ButtonDataType.APPLICATION_MENU);
+		} else {
+			buttonData = navigationController.getButtonData(getViewType(panel.getContent()));
+		}
+		Icon icon = buttonData != null ? buttonData.getIcon() : panel.getIcon();
+		String title = buttonData != null ? buttonData.getTitle() : panel.getTitle();
+		String description = buttonData != null ? panel.getTitle() : null;
+		SimpleItem<Void> item = new SimpleItem<>(icon, title, description);
+		item.onClick.addListener(() -> showView(view));
+		return item;
+	}
+
+	private ButtonDataType getViewType(Component content) {
+		if (content == null) {
+			return null;
+		}
+		if (content instanceof Table) {
+			return ButtonDataType.TABLE;
+		}
+		if (content instanceof ItemView || content instanceof InfiniteItemView2) {
+			return ButtonDataType.LIST;
+		}
+		if (content instanceof ResponsiveForm) {
+			return ButtonDataType.FORM;
+		}
+		if (content instanceof Calendar) {
+			return ButtonDataType.CALENDAR;
+		}
+		if (content instanceof TimeGraph) {
+			return ButtonDataType.TIME_GRAPH;
+		}
+		if (content instanceof Tree) {
+			return ButtonDataType.TREE;
+		}
+		if (content instanceof MapView) {
+			return ButtonDataType.MAP;
+		}
+		if (content instanceof ForceLayoutGraph) {
+			return ButtonDataType.NETWORK_GRAPH;
+		}
+		return null;
+	}
+
+	@Override
+	public void handleLayoutChange(ResponsiveApplication application, boolean isActivePerspective, Perspective perspective, LayoutItemDefinition layout) {
+
+	}
+
+	@Override
+	public void handleViewAdded(ResponsiveApplication application, boolean isActivePerspective, Perspective perspective, View view) {
+		if (isActivePerspective) {
+			mobileLayout.preloadView(view.getPanel());
+			perspectiveViews.add(view);
+		}
+	}
+
+	@Override
+	public void handleViewRemoved(ResponsiveApplication application, boolean isActivePerspective, Perspective perspective, View view) {
+		if (isActivePerspective) {
+			perspectiveViews.remove(view);
+		}
+	}
+
+	@Override
+	public void handleViewVisibilityChange(ResponsiveApplication application, boolean isActivePerspective, Perspective perspective, View view, boolean visible) {
+		if (isActivePerspective) {
+
+		}
+	}
+
+	@Override
+	public void handleViewFocusRequest(ResponsiveApplication application, boolean isActivePerspective, Perspective perspective, View view, boolean ensureVisible) {
+		if (isActivePerspective) {
+			showView(view);
+		}
+	}
+
+	@Override
+	public void handleViewSizeChange(ResponsiveApplication application, boolean isActivePerspective, Perspective perspective, View view, ViewSize viewSize) {
+
+	}
+
+	@Override
+	public void handleViewTabTitleChange(ResponsiveApplication application, boolean isActivePerspective, Perspective perspective, View view, String title) {
+
+	}
+
+	@Override
+	public void handleViewLayoutPositionChange(ResponsiveApplication application, boolean isActivePerspective, Perspective perspective, View view, String position) {
+
+	}
+
+	@Override
+	public void handleApplicationToolbarButtonGroupAdded(ResponsiveApplication application, ToolbarButtonGroup buttonGroup) {
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/application/data/RecordDeletableDecider.java b/teamapps-ux/src/main/java/org/teamapps/ux/application/data/RecordDeletableDecider.java
deleted file mode 100644
index 6e2df87d7..000000000
--- a/teamapps-ux/src/main/java/org/teamapps/ux/application/data/RecordDeletableDecider.java
+++ /dev/null
@@ -1,24 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.ux.application.data;
-
-public interface RecordDeletableDecider<RECORD> {
-    boolean isRecordDeletable(RECORD record);
-}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/application/data/RecordEditableDecider.java b/teamapps-ux/src/main/java/org/teamapps/ux/application/data/RecordEditableDecider.java
deleted file mode 100644
index ffb5f4ed9..000000000
--- a/teamapps-ux/src/main/java/org/teamapps/ux/application/data/RecordEditableDecider.java
+++ /dev/null
@@ -1,24 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.ux.application.data;
-
-public interface RecordEditableDecider<RECORD> {
-    boolean isRecordEditable(RECORD record);
-}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/application/data/RecordHandler.java b/teamapps-ux/src/main/java/org/teamapps/ux/application/data/RecordHandler.java
deleted file mode 100644
index 9208be051..000000000
--- a/teamapps-ux/src/main/java/org/teamapps/ux/application/data/RecordHandler.java
+++ /dev/null
@@ -1,24 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.ux.application.data;
-
-public interface RecordHandler<RECORD> extends RecordEditableDecider<RECORD>, RecordDeletableDecider<RECORD>, RecordValidator<RECORD>, RecordUpdateHandler<RECORD>, RecordDeletionHandler<RECORD> {
-
-}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/application/data/RecordUpdateHandler.java b/teamapps-ux/src/main/java/org/teamapps/ux/application/data/RecordUpdateHandler.java
deleted file mode 100644
index e46a14537..000000000
--- a/teamapps-ux/src/main/java/org/teamapps/ux/application/data/RecordUpdateHandler.java
+++ /dev/null
@@ -1,26 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.ux.application.data;
-
-import org.teamapps.ux.application.validation.RecordChangeSet;
-
-public interface RecordUpdateHandler<RECORD> {
-    RECORD updateRecord(RecordChangeSet<RECORD> changeSet);
-}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/application/data/RecordValidator.java b/teamapps-ux/src/main/java/org/teamapps/ux/application/data/RecordValidator.java
deleted file mode 100644
index 1d7bfa0f9..000000000
--- a/teamapps-ux/src/main/java/org/teamapps/ux/application/data/RecordValidator.java
+++ /dev/null
@@ -1,27 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.ux.application.data;
-
-import org.teamapps.ux.application.validation.RecordChangeSet;
-import org.teamapps.ux.application.validation.ValidationResult;
-
-public interface RecordValidator<RECORD> {
-    ValidationResult validateRecordUpdate(RecordChangeSet<RECORD> changeSet);
-}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/application/data/TableRecordHandler.java b/teamapps-ux/src/main/java/org/teamapps/ux/application/data/TableRecordHandler.java
deleted file mode 100644
index ccb003f26..000000000
--- a/teamapps-ux/src/main/java/org/teamapps/ux/application/data/TableRecordHandler.java
+++ /dev/null
@@ -1,388 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.ux.application.data;
-
-import org.apache.commons.lang3.StringUtils;
-import org.teamapps.event.Event;
-import org.teamapps.icon.material.MaterialIcon;
-import org.teamapps.ux.application.filter.FilterProvider;
-import org.teamapps.ux.application.validation.RecordChangeSet;
-import org.teamapps.ux.application.view.View;
-import org.teamapps.ux.application.validation.ValidationResult;
-import org.teamapps.ux.component.field.TextField;
-import org.teamapps.ux.component.itemview.SimpleItemGroup;
-import org.teamapps.ux.component.itemview.SimpleItemView;
-import org.teamapps.ux.component.table.Table;
-import org.teamapps.ux.component.table.TableColumn;
-import org.teamapps.ux.component.template.BaseTemplate;
-import org.teamapps.ux.component.template.BaseTemplateRecord;
-import org.teamapps.ux.component.toolbar.ToolbarButton;
-import org.teamapps.ux.component.toolbar.ToolbarButtonGroup;
-import org.teamapps.ux.session.CurrentSessionContext;
-import org.teamapps.ux.session.SessionContext;
-
-import java.util.ArrayList;
-import java.util.HashSet;
-import java.util.List;
-import java.util.Set;
-import java.util.function.Supplier;
-import java.util.stream.Collectors;
-
-public class TableRecordHandler<RECORD> {
-
-	public Event<RECORD> onRecordSaved = new Event<>();
-	public Event<RECORD> onRecordSavingFailed = new Event<>();
-
-	private final Table<RECORD> table;
-	private UpdateMode updateMode = UpdateMode.NOT_EDITABLE;
-	private boolean emptyRecordsOnTop;
-	private boolean ensureEmptyRecordRow;
-	private RecordEditableDecider<RECORD> recordEditableDecider;
-	private RecordDeletableDecider<RECORD> recordDeletableDecider;
-	private RecordValidator<RECORD> recordValidator;
-	private RecordUpdateHandler<RECORD> recordUpdateHandler;
-	private RecordDeletionHandler<RECORD> recordDeletionHandler;
-
-	private Supplier<RECORD> emptyRecordSupplier;
-	private FilterProvider<RECORD> filterProvider;
-
-	private Set<RECORD> uncommittedEmptyRecords = new HashSet<>();
-	private RECORD previouslySelectedRecord;
-	private String previouslyUpdatedProperty;
-
-	private ToolbarButton buttonAdd;
-	private ToolbarButton buttonSave;
-	private ToolbarButton buttonDiscardChanges;
-	private ToolbarButton buttonDelete;
-	private ToolbarButton buttonMultiDeleteRecord;
-	private ToolbarButton buttonDisplayedColumns;
-	private ToolbarButton buttonColumnWidth;
-	private ToolbarButton buttonFilter;
-	private ToolbarButton buttonOptions;
-	private SessionContext context;
-
-
-
-	protected TableRecordHandler(Table<RECORD> table, UpdateMode updateMode, boolean emptyRecordsOnTop, boolean ensureEmptyRecordRow, RecordEditableDecider<RECORD> recordEditableDecider, RecordDeletableDecider<RECORD> recordDeletableDecider, RecordValidator<RECORD> recordValidator, RecordUpdateHandler<RECORD> recordUpdateHandler, RecordDeletionHandler<RECORD> recordDeletionHandler, RecordHandler<RECORD> recordHandler, Supplier<RECORD> emptyRecordSupplier, FilterProvider<RECORD> filterProvider, View view) {
-		this.table = table;
-		this.updateMode = updateMode;
-		this.filterProvider = filterProvider;
-		this.emptyRecordsOnTop = emptyRecordsOnTop;
-		this.emptyRecordSupplier = emptyRecordSupplier;
-		setEnsureEmptyRecordRow(ensureEmptyRecordRow);
-
-		this.recordEditableDecider = recordEditableDecider;
-		this.recordDeletableDecider = recordDeletableDecider;
-		this.recordValidator = recordValidator;
-		this.recordUpdateHandler = recordUpdateHandler;
-		this.recordDeletionHandler = recordDeletionHandler;
-		if (recordHandler != null) {
-			setRecordHandler(recordHandler);
-		}
-		init();
-		if (view != null) {
-			updateView(view);
-		}
-	}
-
-	public void setEnsureEmptyRecordRow(boolean ensureEmptyRecordRow) {
-		if (emptyRecordSupplier == null) {
-			return;
-		}
-		this.ensureEmptyRecordRow = ensureEmptyRecordRow;
-		if (ensureEmptyRecordRow) {
-			RECORD emptyRecord = emptyRecordSupplier.get();
-			table.addNonModelRecord(emptyRecord, emptyRecordsOnTop);
-		} else {
-			table.removeAllNonModelRecords();
-		}
-	}
-
-	private void setRecordHandler(RecordHandler<RECORD> recordHandler) {
-		this.recordEditableDecider = recordHandler;
-		this.recordDeletableDecider = recordHandler;
-		this.recordValidator = recordHandler;
-		this.recordUpdateHandler = recordHandler;
-		this.recordDeletionHandler = recordHandler;
-	}
-
-
-	private void init() {
-		context = CurrentSessionContext.get();
-		createCRUDButtons();
-		createTableOptions();
-	}
-
-	private void createCRUDButtons() {
-		buttonAdd = new ToolbarButton(BaseTemplate.TOOLBAR_BUTTON_TINY, new BaseTemplateRecord(MaterialIcon.ADD_CIRCLE, context.getLocalized("dict.add"), context.getLocalized("dict.addNewRecord"))).setVisible(false);
-		buttonSave = new ToolbarButton(BaseTemplate.TOOLBAR_BUTTON_TINY, new BaseTemplateRecord(MaterialIcon.SAVE, context.getLocalized("dict.save"))).setVisible(false);
-		buttonDiscardChanges = new ToolbarButton(BaseTemplate.TOOLBAR_BUTTON_TINY, new BaseTemplateRecord(MaterialIcon.UNDO, context.getLocalized("dict.discard"))).setVisible(false);
-		buttonDelete = new ToolbarButton(BaseTemplate.TOOLBAR_BUTTON_TINY, new BaseTemplateRecord(MaterialIcon.DELETE, context.getLocalized("dict.delete"))).setVisible(false);
-		buttonMultiDeleteRecord = new ToolbarButton(BaseTemplate.TOOLBAR_BUTTON_TINY, new BaseTemplateRecord(MaterialIcon.DELETE_FOREVER, context.getLocalized("dict.deleteAll"))).setVisible(false);
-
-		if (emptyRecordSupplier != null) {
-			buttonAdd.setVisible(true);
-			buttonAdd.onClick.addListener(toolbarButtonClickEvent -> {
-				checkEmptyRecordRow();
-			});
-			checkEmptyRecordRow();
-		}
-
-
-		table.onCellValueChanged.addListener(fieldChangeEventData -> {
-			if (updateMode == UpdateMode.NOT_EDITABLE) {
-				return;
-			}
-			RECORD record = fieldChangeEventData.getRecord();
-			String propertyName = fieldChangeEventData.getPropertyName();
-			table.setCellMarked(record, propertyName, true);
-			handleRecordChange(record, propertyName, updateMode == UpdateMode.AUTO_SAVE_ANY_CELL);
-
-			if (updateMode == UpdateMode.SAVE_ON_USER_REQUEST) {
-				buttonSave.setVisible(true);
-				buttonDiscardChanges.setVisible(true);
-			}
-			previouslyUpdatedProperty = propertyName;
-		});
-
-		table.onRowSelected.addListener(record -> {
-			buttonMultiDeleteRecord.setVisible(false);
-			buttonDelete.setVisible(isRecordDeletable(record));
-			if (updateMode == UpdateMode.AUTO_SAVE_ON_ROW_CHANGE) {
-				List<RECORD> changedRecords = table.getRecordsWithChangedCellValues();
-				for (RECORD changedRecord : changedRecords) {
-					handleRecordChange(changedRecord, null, true);
-				}
-			}
-			previouslySelectedRecord = record;
-		});
-
-		table.onMultipleRowsSelected.addListener(records -> {
-			buttonDelete.setVisible(false);
-			if (records.stream().allMatch(record -> isRecordDeletable(record))) {
-				buttonMultiDeleteRecord.setVisible(true);
-			} else {
-				buttonMultiDeleteRecord.setVisible(false);
-			}
-		});
-
-		buttonDiscardChanges.onClick.addListener(toolbarButtonClickEvent -> {
-			table.clearChangeBuffer();
-			table.clearAllCellMarkings();
-			table.refreshData();
-			buttonSave.setVisible(false);
-			buttonDiscardChanges.setVisible(false);
-		});
-
-		buttonSave.onClick.addListener(toolbarButtonClickEvent -> {
-			List<RECORD> changedRecords = table.getRecordsWithChangedCellValues();
-			for (RECORD record : changedRecords) {
-				handleRecordChange(record, null, true);
-			}
-		});
-
-
-		buttonDelete.onClick.addListener(toolbarButtonClickEvent -> {
-			recordDeletionHandler.deleteRecord(table.getSelectedRecord());
-			//todo: check for unsaved data!
-			table.getModel().onAllDataChanged().fire(null);
-		});
-
-		buttonMultiDeleteRecord.onClick.addListener(toolbarButtonClickEvent -> {
-			if (recordDeletableDecider != null) {
-				List<RECORD> records = table.getSelectedRecords();
-				records.forEach(record -> recordDeletionHandler.deleteRecord(table.getSelectedRecord()));
-				//todo: check for unsaved data!
-				table.getModel().onAllDataChanged().fire(null);
-			}
-		});
-
-
-	}
-
-	private boolean isRecordDeletable(RECORD record) {
-		return recordDeletableDecider != null && recordDeletableDecider.isRecordDeletable(record);
-	}
-
-	private void handleRecordChange(RECORD record, String lastUpdatedProperty, boolean saveRecord) {
-		RecordChangeSet<RECORD> changeSet = new RecordChangeSet<>(record, table.getChangedCellValues(record));
-		if (!changeSet.isChanged()) {
-			return;
-		}
-		ValidationResult validationResult = recordValidator.validateRecordUpdate(changeSet);
-
-		if (saveRecord && validationResult.isSuccess()) {
-			RECORD updateRecord = recordUpdateHandler.updateRecord(changeSet);
-			table.getModel().onRecordUpdated().fire(updateRecord);
-
-			if (uncommittedEmptyRecords.contains(record)) {
-				uncommittedEmptyRecords.remove(record);
-				checkEmptyRecordRow();
-			}
-			onRecordSaved.fire(record);
-		} else if (saveRecord && !validationResult.isSuccess()) {
-			onRecordSavingFailed.fire(record);
-		}
-		table.updateRecordMessages(record, validationResult.getFieldMessagesMap());
-
-		if (saveRecord && !validationResult.isSuccess() && lastUpdatedProperty != null) {
-			table.focusCell(record, lastUpdatedProperty);
-		}
-	}
-
-	private void checkEmptyRecordRow() {
-		if (ensureEmptyRecordRow) {
-			RECORD emptyRecord = emptyRecordSupplier.get();
-			uncommittedEmptyRecords.add(emptyRecord);
-			table.addNonModelRecord(emptyRecord, emptyRecordsOnTop);
-		}
-	}
-
-	private void createTableOptions() {
-		buttonDisplayedColumns = new ToolbarButton(BaseTemplate.TOOLBAR_BUTTON_TINY, new BaseTemplateRecord(MaterialIcon.ADD, context.getLocalized("dict.columns"))).setVisible(true);
-		buttonColumnWidth = new ToolbarButton(BaseTemplate.TOOLBAR_BUTTON_TINY, new BaseTemplateRecord(MaterialIcon.ADD, context.getLocalized("dict.columnWidth"))).setVisible(true);
-		buttonFilter = new ToolbarButton(BaseTemplate.TOOLBAR_BUTTON_TINY, new BaseTemplateRecord(MaterialIcon.ADD, context.getLocalized("dict.filter"))).setVisible(true);
-		buttonOptions = new ToolbarButton(BaseTemplate.TOOLBAR_BUTTON_TINY, new BaseTemplateRecord(MaterialIcon.ADD, context.getLocalized("dict.options"))).setVisible(true);
-
-		SimpleItemView<?> itemView = new SimpleItemView<>();
-		buttonDisplayedColumns.setDropDownComponent(itemView);
-		SimpleItemGroup<?> itemGroup = itemView.addSingleColumnGroup(MaterialIcon.ADD, context.getLocalized("dict.baseSettings"));
-		itemGroup.addItem(MaterialIcon.ADD, context.getLocalized("dict.defaultColumns"), context.getLocalized("dict.displayTheDefaultColumns")).onClick.addListener(o -> {
-			//todo: implement
-		});
-		itemGroup.addItem(MaterialIcon.ADD, context.getLocalized("dict.allColumns"), context.getLocalized("dict.displayAllColumns")).onClick.addListener(o -> {
-			table.getColumns().stream().map(TableColumn::getField).forEach(field -> {
-				if (!field.isVisible()) {
-					field.setVisible(true);
-				}
-			});
-		});
-		itemGroup = itemView.addSingleColumnGroup(MaterialIcon.ADD, context.getLocalized("dict.selectColumnToDisplayOrHide"));
-		for (TableColumn column : table.getColumns()) {
-			itemGroup.addItem(MaterialIcon.ADD, column.getTitle(), context.getLocalized("dict.setVisibilityOfColumn", column.getTitle())).onClick.addListener(o -> {
-				column.getField().setVisible(!column.getField().isVisible());
-			});
-		}
-
-		itemView = new SimpleItemView();
-		buttonColumnWidth.setDropDownComponent(itemView);
-		itemGroup = itemView.addSingleColumnGroup(MaterialIcon.ADD, context.getLocalized("dict.columnWidth"));
-		itemGroup.addItem(MaterialIcon.ADD, context.getLocalized("dict.autoFit"), context.getLocalized("dict.setAllColumnWidthsToTheWidthOfTheTable")).onClick.addListener(o -> {
-			table.setForceFitWidth(true);
-		});
-		itemGroup.addItem(MaterialIcon.ADD, context.getLocalized("dict.standardWidth"), context.getLocalized("dict.setColumnWidthsToTheDefaultWidths")).onClick.addListener(o -> {
-			table.setForceFitWidth(false);
-		});
-
-		itemGroup = itemView.addSingleColumnGroup(MaterialIcon.ADD, context.getLocalized("dict.automaticColumnDisplay"));
-		//todo: implement
-		itemGroup.addItem(MaterialIcon.ADD, context.getLocalized("dict.hideEmptyColumns"), context.getLocalized("dict.hideAllColumnsThatDoNotContainAnyData"));
-		itemGroup.addItem(MaterialIcon.ADD, context.getLocalized("dict.displayEmptyColumns"), context.getLocalized("dict.displayAllColumnsEventEmptyOnes"));
-
-		itemGroup = itemView.addSingleColumnGroup(MaterialIcon.ADD, context.getLocalized("dict.changeWidth"));
-		itemGroup.addItem(MaterialIcon.ADD, context.getLocalized("dict.decreaseColumnWidths"), context.getLocalized("dict.decreaseTheWidthsOfAllColumns")).onClick.addListener(o -> {
-			for (TableColumn column : table.getColumns()) {
-				column.setDefaultWidth((int) (column.getDefaultWidth() / 1.5));
-			}
-			if (table.isForceFitWidth()) {
-				table.setForceFitWidth(false);
-			} else {
-				table.reRenderIfRendered();
-			}
-		});
-		itemGroup.addItem(MaterialIcon.ADD, context.getLocalized("dict.increaseColumnWidths"), context.getLocalized("dict.increaseTheWidthsOfAllColumns")).onClick.addListener(o -> {
-			for (TableColumn column : table.getColumns()) {
-				column.setDefaultWidth((int) (column.getDefaultWidth() * 1.5));
-			}
-			if (table.isForceFitWidth()) {
-				table.setForceFitWidth(false);
-			} else {
-				table.reRenderIfRendered();
-			}
-		});
-
-		itemView = new SimpleItemView();
-		buttonOptions.setDropDownComponent(itemView);
-		itemGroup = itemView.addSingleColumnGroup(MaterialIcon.ADD, context.getLocalized("dict.tableOptions"));
-		itemGroup.addItem(MaterialIcon.ADD, context.getLocalized("dict.shadedRows"), context.getLocalized("dict.displayTableWithShadedRows")).onClick.addListener(o -> {
-			table.setStripedRows(!table.isStripedRows());
-		});
-		itemGroup.addItem(MaterialIcon.ADD, context.getLocalized("dict.showNumbering"), context.getLocalized("dict.displayRowNumbers")).onClick.addListener(o -> {
-			table.setShowNumbering(!table.isShowNumbering());
-		});
-
-		//itemGroup = itemView.addSingleColumnGroup(MaterialIcon.ADD, context.getLocalized("dict.editOptions"));
-
-		buttonFilter.onClick.addListener(toolbarButtonClickEvent -> {
-			if (table.isShowHeaderRow()) {
-				table.setShowHeaderRow(false);
-				if (filterProvider != null) {
-					filterProvider.clearTablePropertyFilters();
-				}
-			} else {
-				if (table.getHeaderRowFields().isEmpty()) {
-					table.setHeaderRowFields(table.getColumns().stream()
-							.collect(Collectors.toMap(col -> col.getPropertyName(), col -> {
-								String propertyName = col.getPropertyName();
-								TextField field = new TextField();
-								field.setEmptyText(context.getLocalized("dict.filter") + "...");
-								field.onTextInput.addListener(s -> {
-									if (filterProvider == null) {
-										return;
-									}
-									if (StringUtils.isBlank(s)) {
-										filterProvider.setTablePropertyFilter(propertyName, null);
-									} else {
-										filterProvider.setTablePropertyFilter(propertyName, s);
-									}
-								});
-								return field;
-							})));
-				}
-				table.setShowHeaderRow(true);
-			}
-		});
-	}
-
-
-	public List<ToolbarButtonGroup> getToolbarButtonGroups() {
-		List<ToolbarButtonGroup> groups = new ArrayList<>();
-		ToolbarButtonGroup group = new ToolbarButtonGroup();
-		groups.add(group);
-		group.addButton(buttonAdd);
-		group.addButton(buttonSave);
-		group.addButton(buttonDiscardChanges);
-		group.addButton(buttonDelete);
-		group.addButton(buttonMultiDeleteRecord);
-		group = new ToolbarButtonGroup();
-		groups.add(group);
-		group.addButton(buttonDisplayedColumns);
-		group.addButton(buttonFilter);
-		group.addButton(buttonOptions);
-		return groups;
-	}
-
-	private void updateView(View view) {
-		if (!table.equals(view.getComponent())) {
-			return;
-		}
-		getToolbarButtonGroups().forEach(group -> view.addLocalButtonGroup(group));
-	}
-}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/application/data/TableRecordHandlerBuilder.java b/teamapps-ux/src/main/java/org/teamapps/ux/application/data/TableRecordHandlerBuilder.java
deleted file mode 100644
index dd84cfdb6..000000000
--- a/teamapps-ux/src/main/java/org/teamapps/ux/application/data/TableRecordHandlerBuilder.java
+++ /dev/null
@@ -1,106 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.ux.application.data;
-
-import org.teamapps.ux.application.filter.FilterProvider;
-import org.teamapps.ux.application.view.View;
-import org.teamapps.ux.component.table.Table;
-
-import java.util.function.Supplier;
-
-public class TableRecordHandlerBuilder<RECORD> {
-    private final Table<RECORD> table;
-    private final UpdateMode updateMode;
-    private View view;
-    private boolean emptyRecordsOnTop;
-    private boolean ensureEmptyRecordRow;
-    private RecordEditableDecider<RECORD> recordEditableDecider;
-    private RecordDeletableDecider<RECORD> recordDeletableDecider;
-    private RecordValidator<RECORD> recordValidator;
-    private RecordUpdateHandler<RECORD> recordUpdateHandler;
-    private RecordDeletionHandler<RECORD> recordDeletionHandler;
-    private RecordHandler<RECORD> recordHandler;
-    private Supplier<RECORD> emptyRecordSupplier;
-    private FilterProvider<RECORD> filterProvider;
-
-    public TableRecordHandlerBuilder(Table<RECORD> table, UpdateMode updateMode) {
-        this.table = table;
-        this.updateMode = updateMode;
-    }
-
-    public TableRecordHandlerBuilder<RECORD> setView(View view) {
-        this.view = view;
-        return this;
-    }
-
-    public TableRecordHandlerBuilder<RECORD> setEmptyRecordsOnTop(boolean emptyRecordsOnTop) {
-        this.emptyRecordsOnTop = emptyRecordsOnTop;
-        return this;
-    }
-
-    public TableRecordHandlerBuilder<RECORD> setEnsureEmptyRecordRow(boolean ensureEmptyRecordRow) {
-        this.ensureEmptyRecordRow = ensureEmptyRecordRow;
-        return this;
-    }
-
-    public TableRecordHandlerBuilder<RECORD> setRecordEditableDecider(RecordEditableDecider<RECORD> recordEditableDecider) {
-        this.recordEditableDecider = recordEditableDecider;
-        return this;
-    }
-
-    public TableRecordHandlerBuilder<RECORD> setRecordDeletableDecider(RecordDeletableDecider<RECORD> recordDeletableDecider) {
-        this.recordDeletableDecider = recordDeletableDecider;
-        return this;
-    }
-
-    public TableRecordHandlerBuilder<RECORD> setRecordValidator(RecordValidator<RECORD> recordValidator) {
-        this.recordValidator = recordValidator;
-        return this;
-    }
-
-    public TableRecordHandlerBuilder<RECORD> setRecordUpdateHandler(RecordUpdateHandler<RECORD> recordUpdateHandler) {
-        this.recordUpdateHandler = recordUpdateHandler;
-        return this;
-    }
-
-    public TableRecordHandlerBuilder<RECORD> setRecordDeletionHandler(RecordDeletionHandler<RECORD> recordDeletionHandler) {
-        this.recordDeletionHandler = recordDeletionHandler;
-        return this;
-    }
-
-    public TableRecordHandlerBuilder<RECORD> setRecordHandler(RecordHandler<RECORD> recordHandler) {
-        this.recordHandler = recordHandler;
-        return this;
-    }
-
-    public TableRecordHandlerBuilder<RECORD> setEmptyRecordSupplier(Supplier<RECORD> emptyRecordSupplier) {
-        this.emptyRecordSupplier = emptyRecordSupplier;
-        return this;
-    }
-
-    public TableRecordHandlerBuilder<RECORD> setFilterProvider(FilterProvider<RECORD> filterProvider) {
-        this.filterProvider = filterProvider;
-        return this;
-    }
-
-    public TableRecordHandler<RECORD> createTableRecordHandler() {
-        return new TableRecordHandler<>(table, updateMode, emptyRecordsOnTop, ensureEmptyRecordRow, recordEditableDecider, recordDeletableDecider, recordValidator, recordUpdateHandler, recordDeletionHandler, recordHandler, emptyRecordSupplier, filterProvider, view);
-    }
-}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/application/data/UpdateMode.java b/teamapps-ux/src/main/java/org/teamapps/ux/application/data/UpdateMode.java
deleted file mode 100644
index eb2e96095..000000000
--- a/teamapps-ux/src/main/java/org/teamapps/ux/application/data/UpdateMode.java
+++ /dev/null
@@ -1,27 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.ux.application.data;
-
-public enum UpdateMode {
-		NOT_EDITABLE,
-		AUTO_SAVE_ANY_CELL,
-		AUTO_SAVE_ON_ROW_CHANGE,
-		SAVE_ON_USER_REQUEST
-	}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/application/filter/FilterProvider.java b/teamapps-ux/src/main/java/org/teamapps/ux/application/filter/FilterProvider.java
deleted file mode 100644
index 0e2968342..000000000
--- a/teamapps-ux/src/main/java/org/teamapps/ux/application/filter/FilterProvider.java
+++ /dev/null
@@ -1,89 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.ux.application.filter;
-
-import org.teamapps.event.Event;
-import org.teamapps.ux.application.view.View;
-import org.teamapps.ux.component.field.TextField;
-import org.teamapps.ux.component.panel.Panel;
-import org.teamapps.ux.component.timegraph.Interval;
-
-import java.util.ArrayList;
-import java.util.HashMap;
-import java.util.List;
-import java.util.Map;
-
-public class FilterProvider<RECORD> {
-
-	public Event<String> onFullTextSearchUpdate = new Event<>();
-	public Event<String> onTimeGraphIntervalUpdate = new Event<>();
-
-	private List<TextField> fullTextSearchFields = new ArrayList<>();
-
-	private String fullTextFilter;
-	private Interval timeGraphFilter;
-	private List<String> timeGraphProperties;
-
-	private Map<String, String> tablePropertyFilter = new HashMap<>();
-
-
-	public void createSearchHeaderField(View view, boolean leftSide) {
-		Panel panel = view.getPanel();
-		TextField fullTextSearchField = new TextField();
-		fullTextSearchField.setEmptyText("Search..."); //todo: localize
-		fullTextSearchField.setShowClearButton(true);
-		fullTextSearchField.onTextInput.addListener(query -> handleFullTextSearchFieldUpdate(fullTextSearchField, query));
-		if (leftSide) {
-			if (panel.getLeftHeaderField() == null) {
-				panel.setLeftHeaderField(fullTextSearchField);
-			}
-		} else {
-			if (panel.getRightHeaderField() == null) {
-				panel.setRightHeaderField(fullTextSearchField);
-			}
-		}
-	}
-
-	private void handleFullTextSearchFieldUpdate(TextField originatingField, String value) {
-		for (TextField searchField : fullTextSearchFields) {
-			if (!originatingField.equals(searchField)) {
-				searchField.setValue(value);
-			}
-		}
-		fullTextFilter = value;
-		onFullTextSearchUpdate.fire(fullTextFilter);
-	}
-
-	public String getFullTextFilter() {
-		return fullTextFilter;
-	}
-
-	public Interval getTimeGraphFilter() {
-		return timeGraphFilter;
-	}
-
-	public void clearTablePropertyFilters() {
-		tablePropertyFilter.clear();
-	}
-
-	public void setTablePropertyFilter(String propertyName, String filter) {
-		tablePropertyFilter.put(propertyName, filter);
-	}
-}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/application/layout/ComponentPosition.java b/teamapps-ux/src/main/java/org/teamapps/ux/application/layout/ComponentPosition.java
deleted file mode 100644
index 6f1855b9c..000000000
--- a/teamapps-ux/src/main/java/org/teamapps/ux/application/layout/ComponentPosition.java
+++ /dev/null
@@ -1,174 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.ux.application.layout;
-
-import org.teamapps.ux.component.workspacelayout.WorkSpaceLayoutViewGroup;
-import org.teamapps.ux.component.workspacelayout.definition.ViewGroupDefinition;
-
-public class ComponentPosition {
-
-	public static ComponentPosition asPanel(WorkSpaceLayoutViewGroup viewGroup) {
-		return new ComponentPosition(viewGroup.getId());
-	}
-
-	public static ComponentPosition asPanel(ViewGroupDefinition viewGroup) {
-		return new ComponentPosition(viewGroup.getId());
-	}
-
-	public static ComponentPosition asPanel(String layoutPosition) {
-		return new ComponentPosition(layoutPosition);
-	}
-
-	public static ComponentPosition asPanel(String layoutPosition, float width, float height, int minWidth, int minHeight) {
-		return new ComponentPosition(layoutPosition).setWidth(width).setHeight(height).setMinWidth(minWidth).setMinHeight(minHeight);
-	}
-
-	public static ComponentPosition asWindow(float width, float height) {
-		return new ComponentPosition(width, height);
-	}
-
-	public static ComponentPosition asWindow(float width, float height, int minWidth, int minHeight) {
-		return new ComponentPosition(width, height, minWidth, minHeight);
-	}
-
-	public static ComponentPosition asWindow(float width, float height, int minWidth, int minHeight, boolean modal) {
-		return new ComponentPosition(width, height, minWidth, minHeight).setModalWindow(modal);
-	}
-
-	public static ComponentPosition asWindowMaxSize() {
-		return new ComponentPosition(.9f, .9f);
-	}
-
-	public static ComponentPosition asWindowStandardSize() {
-		return new ComponentPosition(.5f, .5f, 800, 600);
-	}
-
-	public static ComponentPosition asWindowSmallSize() {
-		return new ComponentPosition(.35f, .35f);
-	}
-
-	public static ComponentPosition asWindowNarrowSize() {
-		return new ComponentPosition(.9f, .5f);
-	}
-
-	public static ComponentPosition asWindowWideSize() {
-		return new ComponentPosition(.9f, .9f);
-	}
-
-	private String layoutPosition;
-	private boolean window;
-	private boolean modalWindow;
-
-	private float width;
-	private float height;
-
-	private int minWidth;
-	private int minHeight;
-
-	private String animation;
-
-	public ComponentPosition(String layoutPosition) {
-		this.layoutPosition = layoutPosition;
-	}
-
-	public ComponentPosition(String layoutPosition, float width, float height, int minWidth, int minHeight) {
-		this.layoutPosition = layoutPosition;
-		this.width = width;
-		this.height = height;
-		this.minWidth = minWidth;
-		this.minHeight = minHeight;
-	}
-
-	public ComponentPosition(float width, float height) {
-		this.window = true;
-		this.width = width;
-		this.height = height;
-	}
-
-	public ComponentPosition(float width, float height, int minWidth, int minHeight) {
-		this.window = true;
-		this.width = width;
-		this.height = height;
-		this.minWidth = minWidth;
-		this.minHeight = minHeight;
-	}
-
-	public ComponentPosition setModalWindow(boolean modalWindow) {
-		this.modalWindow = modalWindow;
-		return this;
-	}
-
-	public ComponentPosition setAnimation(String animation) {
-		this.animation = animation;
-		return this;
-	}
-
-	public ComponentPosition setWidth(float width) {
-		this.width = width;
-		return this;
-	}
-
-	public ComponentPosition setHeight(float height) {
-		this.height = height;
-		return this;
-	}
-
-	public ComponentPosition setMinWidth(int minWidth) {
-		this.minWidth = minWidth;
-		return this;
-	}
-
-	public ComponentPosition setMinHeight(int minHeight) {
-		this.minHeight = minHeight;
-		return this;
-	}
-
-	public String getLayoutPosition() {
-		return layoutPosition;
-	}
-
-	public boolean isWindow() {
-		return window;
-	}
-
-	public boolean isModalWindow() {
-		return modalWindow;
-	}
-
-	public String getAnimation() {
-		return animation;
-	}
-
-	public float getWidth() {
-		return width;
-	}
-
-	public float getHeight() {
-		return height;
-	}
-
-	public int getMinWidth() {
-		return minWidth;
-	}
-
-	public int getMinHeight() {
-		return minHeight;
-	}
-}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/application/layout/ExtendedLayout.java b/teamapps-ux/src/main/java/org/teamapps/ux/application/layout/ExtendedLayout.java
index 621e1dcbd..d103ad50f 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/application/layout/ExtendedLayout.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/application/layout/ExtendedLayout.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -66,7 +66,7 @@ public static LayoutItemDefinition createLayout(SplitSize superTopHeight, SplitS
 
 	public ExtendedLayout() {
 		this(SplitSize.firstFixed(175), SplitSize.firstFixed(250), SplitSize.relative(.5f), SplitSize.firstFixed(250), SplitSize.relative(.5f), SplitSize.firstFixed(150),
-				SplitSize.relative(.5f), SplitSize.relative(.5f), SplitSize.relative(.5f), SplitSize.relative(.5f), SplitSize.relative(.5f));
+				SplitSize.relative(.5f), SplitSize.relative(.5f), SplitSize.lastFixed(250), SplitSize.relative(.5f), SplitSize.relative(.5f));
 	}
 
 	public ExtendedLayout(SplitSize superTopHeight, SplitSize leftWidth, SplitSize leftHeight, SplitSize innerLeftWidth, SplitSize innerLeftHeight,
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/application/layout/StandardLayout.java b/teamapps-ux/src/main/java/org/teamapps/ux/application/layout/StandardLayout.java
index b13813ade..3c52bac46 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/application/layout/StandardLayout.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/application/layout/StandardLayout.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/application/model/AbstractPerspectiveDataModel.java b/teamapps-ux/src/main/java/org/teamapps/ux/application/model/AbstractPerspectiveDataModel.java
deleted file mode 100644
index 093e5fac8..000000000
--- a/teamapps-ux/src/main/java/org/teamapps/ux/application/model/AbstractPerspectiveDataModel.java
+++ /dev/null
@@ -1,231 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.ux.application.model;
-
-import org.teamapps.data.extract.PropertyProvider;
-import org.teamapps.data.value.Sorting;
-import org.teamapps.ux.component.calendar.AbstractCalendarModel;
-import org.teamapps.ux.component.calendar.CalendarEvent;
-import org.teamapps.ux.component.calendar.CalendarModel;
-import org.teamapps.ux.component.infiniteitemview.AbstractInfiniteItemViewModel;
-import org.teamapps.ux.component.infiniteitemview.InfiniteItemViewModel;
-import org.teamapps.ux.component.table.AbstractTableModel;
-import org.teamapps.ux.component.table.TableModel;
-import org.teamapps.ux.component.timegraph.Interval;
-import org.teamapps.ux.component.timegraph.TimeGraphModel;
-import org.teamapps.ux.component.timegraph.partitioning.AbstractRawTimedDataModel;
-import org.teamapps.ux.component.timegraph.partitioning.PartitioningTimeGraphModel;
-import org.teamapps.ux.component.tree.TreeNodeInfo;
-import org.teamapps.ux.component.tree.TreeNodeInfoExtractor;
-import org.teamapps.ux.model.AbstractTreeModel;
-import org.teamapps.ux.model.TreeModel;
-import org.teamapps.ux.session.CurrentSessionContext;
-
-import java.time.Instant;
-import java.util.*;
-import java.util.function.Function;
-import java.util.stream.Collectors;
-
-public abstract class AbstractPerspectiveDataModel<RECORD> implements PerspectiveDataModel<RECORD> {
-
-	private final PropertyProvider<RECORD> propertyProvider;
-	private AbstractTableModel<RECORD> tableModel;
-	private AbstractInfiniteItemViewModel<RECORD> infiniteItemViewModel;
-	private AbstractCalendarModel<RECORD> calendarModel;
-	private Function<RECORD, CalendarEvent<RECORD>> calendarEventProvider;
-	private TimeGraphModel timeGraphModel;
-	private TreeModel<RECORD> treeModel;
-
-	public AbstractPerspectiveDataModel(PropertyProvider<RECORD> propertyProvider) {
-		this.propertyProvider = propertyProvider;
-		init();
-	}
-
-	public abstract int getRecordCount();
-
-	public abstract List<RECORD> getEntities(int startIndex, int length, Instant start, Instant end, Sorting sorting);
-
-	private void init() {
-		tableModel = new AbstractTableModel<>() {
-			@Override
-			public int getCount() {
-				return getRecordCount();
-			}
-
-			@Override
-			public List<RECORD> getRecords(int startIndex, int length, Sorting sorting) {
-				return getEntities(startIndex, length, null, null, sorting);
-			}
-		};
-
-		infiniteItemViewModel = new AbstractInfiniteItemViewModel<>() {
-			@Override
-			public int getCount() {
-				return getRecordCount();
-			}
-
-			@Override
-			public List<RECORD> getRecords(int startIndex, int length) {
-				return getEntities(startIndex, length, null, null,null);
-			}
-		};
-
-		calendarModel = new AbstractCalendarModel<>() {
-			@Override
-			public List<CalendarEvent<RECORD>> getEventsForInterval(Instant start, Instant end) {
-				if (calendarEventProvider == null) {
-					return Collections.emptyList();
-				}
-				List<RECORD> entities = getEntities(0, Integer.MAX_VALUE, start, end, null);
-				return entities.stream().map(RECORD -> calendarEventProvider.apply(RECORD)).collect(Collectors.toList());
-			}
-		};
-
-		timeGraphModel = new PartitioningTimeGraphModel(CurrentSessionContext.get().getTimeZone(), new AbstractRawTimedDataModel() {
-			@Override
-			public Map<String, long[]> getRawEventTimes(Collection<String> lineIds, Interval neededIntervalX) {
-				return getTimeGraphData(lineIds, neededIntervalX);
-			}
-
-			@Override
-			public Interval getDomainX(Collection<String> lineIds) {
-				return getTimeGraphDomain(lineIds);
-			}
-		});
-
-
-		treeModel = new AbstractTreeModel<>() {
-			@Override
-			public List<RECORD> getRecords(String query) {
-				return getEntities(0, Integer.MAX_VALUE, null, null, null);
-			}
-		};
-	}
-
-	protected void handleDataUpdated() {
-		tableModel.onAllDataChanged.fire(null);
-		infiniteItemViewModel.onAllDataChanged.fire(null);
-		calendarModel.onCalendarDataChanged.fire(null);
-		timeGraphModel.onDataChanged().fire(null);
-		//todo: tree expects the list of nodes
-		treeModel.onAllNodesChanged().fire(null);
-	}
-
-	private Map<String, long[]> getTimeGraphData(Collection<String> lineIds, Interval interval) {
-		long startTime = interval.getMin();
-		long endTime = interval.getMax();
-
-		Map<String, long[]> timeStampsByLineId = new HashMap<>();
-		List<RECORD> entities = getEntities(0, Integer.MAX_VALUE, null, null, null);
-		for (String lineId : lineIds) {
-			long[] timeStamps = new long[entities.size()];
-			for (int i = 0; i < entities.size(); i++) {
-				Instant instant = propertyProvider.getInstantValue(entities.get(i), lineId);
-				if (instant != null) {
-					long time = instant.toEpochMilli();
-					if (startTime <= time && endTime >= time) {
-						timeStamps[i] = time;
-					}
-				}
-			}
-			long[] filteredTimestamps = Arrays.stream(timeStamps)
-					.filter(value -> value > 0)
-					.toArray();
-			timeStampsByLineId.put(lineId, filteredTimestamps);
-		}
-		return timeStampsByLineId;
-	}
-
-	private Interval getTimeGraphDomain(Collection<String> lineIds) {
-		List<RECORD> entities = getEntities(0, Integer.MAX_VALUE, null, null, null);
-		long minValue = Long.MAX_VALUE;
-		long maxValue = Long.MIN_VALUE;
-		for (String lineId : lineIds) {
-			for (int i = 0; i < entities.size(); i++) {
-				Instant instant = propertyProvider.getInstantValue(entities.get(i), lineId);
-				if (instant != null) {
-					long time = instant.toEpochMilli();
-					minValue = Math.min(minValue, time);
-					maxValue = Math.max(maxValue, time);
-				}
-			}
-		}
-		return new Interval(minValue, maxValue);
-	}
-
-	public PropertyProvider<RECORD> getPropertyProvider() {
-		return propertyProvider;
-	}
-
-	@Override
-	public TableModel<RECORD> getTableModel() {
-		return tableModel;
-	}
-
-	@Override
-	public InfiniteItemViewModel<RECORD> getInfiniteItemViewModel() {
-		return infiniteItemViewModel;
-	}
-
-	@Override
-	public TimeGraphModel getTimeGraphModel() {
-		return timeGraphModel;
-	}
-
-	@Override
-	public TreeModel<RECORD> getTreeModel() {
-		return treeModel;
-	}
-
-	public AbstractCalendarModel<RECORD> getCalendarModel() {
-		return calendarModel;
-	}
-
-	@Override
-	public TreeNodeInfoExtractor<RECORD> getTreeNodeParentExtractor(String parentPropertyName) {
-		if (parentPropertyName == null) {
-			return null;
-		}
-		return record -> new TreeNodeInfo() {
-			@Override
-			public Object getParent() {
-				return propertyProvider.getValue(record, parentPropertyName);
-			}
-
-			@Override
-			public boolean isLazyChildren() {
-				return false;
-			}
-
-			@Override
-			public boolean isExpanded() {
-				return false;
-			}
-		};
-	}
-
-	@Override
-	public CalendarModel<RECORD> getCalendarModel(Function<RECORD, CalendarEvent<RECORD>> eventProvider, String calendarFieldName) {
-		if (eventProvider != null) {
-			this.calendarEventProvider = eventProvider;
-		}
-		return calendarModel;
-	}
-}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/application/model/ListPerspectiveDataModel.java b/teamapps-ux/src/main/java/org/teamapps/ux/application/model/ListPerspectiveDataModel.java
deleted file mode 100644
index 21463add7..000000000
--- a/teamapps-ux/src/main/java/org/teamapps/ux/application/model/ListPerspectiveDataModel.java
+++ /dev/null
@@ -1,72 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.ux.application.model;
-
-import org.teamapps.data.extract.PropertyProvider;
-import org.teamapps.data.value.SortDirection;
-import org.teamapps.data.value.Sorting;
-
-import java.time.Instant;
-import java.util.ArrayList;
-import java.util.Collections;
-import java.util.Comparator;
-import java.util.List;
-
-public class ListPerspectiveDataModel<RECORD> extends AbstractPerspectiveDataModel<RECORD> {
-
-
-    private List<RECORD> records = new ArrayList<>();
-
-    public ListPerspectiveDataModel(PropertyProvider<RECORD> propertyProvider) {
-        super(propertyProvider);
-    }
-
-    public void addRecord(RECORD record) {
-        records.add(record);
-    }
-
-    @Override
-    public int getRecordCount() {
-        return records.size();
-    }
-
-    @Override
-    public List<RECORD> getEntities(int startIndex, int length, Instant start, Instant end, Sorting sorting) {
-        List<RECORD> list;
-        if (startIndex == 0 && length >= records.size()) {
-            list = Collections.unmodifiableList(records);
-        } else {
-            int len = Math.min(length, records.size());
-            list = records.subList(startIndex, Math.min(startIndex + len, records.size() - startIndex));
-        }
-        PropertyProvider<RECORD> propertyProvider = getPropertyProvider();
-        if (start != null && end != null && start.getEpochSecond() < end.getEpochSecond()) {
-            //propertyProvider.getInstantValue()
-        }
-        if (sorting != null && sorting.getFieldName() != null) {
-            Comparator<RECORD> comparator = Comparator.comparing(record -> (Comparable) propertyProvider.getValue(record, sorting.getFieldName()));
-            if (SortDirection.DESC == sorting.getSorting()) {
-                comparator = comparator.reversed();
-            }
-            Collections.sort(list, comparator);
-        }
-        return list;
-    }
-}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/application/model/PerspectiveDataModel.java b/teamapps-ux/src/main/java/org/teamapps/ux/application/model/PerspectiveDataModel.java
deleted file mode 100644
index 3ab614b5c..000000000
--- a/teamapps-ux/src/main/java/org/teamapps/ux/application/model/PerspectiveDataModel.java
+++ /dev/null
@@ -1,47 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.ux.application.model;
-
-import org.teamapps.ux.component.calendar.CalendarEvent;
-import org.teamapps.ux.component.calendar.CalendarModel;
-import org.teamapps.ux.component.infiniteitemview.InfiniteItemViewModel;
-import org.teamapps.ux.component.table.TableModel;
-import org.teamapps.ux.component.timegraph.TimeGraphModel;
-import org.teamapps.ux.component.tree.TreeNodeInfoExtractor;
-import org.teamapps.ux.model.TreeModel;
-
-import java.util.function.Function;
-
-public interface PerspectiveDataModel<ENTITY> {
-
-	TableModel<ENTITY> getTableModel();
-
-	InfiniteItemViewModel<ENTITY> getInfiniteItemViewModel();
-
-	TimeGraphModel getTimeGraphModel();
-
-	TreeModel<ENTITY> getTreeModel();
-
-	TreeNodeInfoExtractor<ENTITY> getTreeNodeParentExtractor(String parentPropertyName);
-
-	CalendarModel<ENTITY> getCalendarModel(Function<ENTITY, CalendarEvent<ENTITY>> eventProvider, String calendarFieldName);
-
-
-}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/application/perspective/Perspective.java b/teamapps-ux/src/main/java/org/teamapps/ux/application/perspective/Perspective.java
index c5e21db6c..1470c810c 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/application/perspective/Perspective.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/application/perspective/Perspective.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,8 +19,8 @@
  */
 package org.teamapps.ux.application.perspective;
 
-import org.teamapps.ux.application.view.View;
 import org.teamapps.ux.application.layout.ExtendedLayout;
+import org.teamapps.ux.application.view.View;
 import org.teamapps.ux.application.view.ViewSize;
 import org.teamapps.ux.component.toolbar.ToolbarButtonGroup;
 import org.teamapps.ux.component.workspacelayout.definition.LayoutItemDefinition;
@@ -75,6 +75,8 @@ default void setFocusedView(View view) {
         view.focus();
     }
 
+    View getFocusedView();
+
     default void setViewPosition(View view, String position) {
         view.setLayoutPosition(position);
     }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/application/perspective/PerspectiveChangeHandler.java b/teamapps-ux/src/main/java/org/teamapps/ux/application/perspective/PerspectiveChangeHandler.java
index 1ef3853df..74cd3fc21 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/application/perspective/PerspectiveChangeHandler.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/application/perspective/PerspectiveChangeHandler.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -51,5 +51,5 @@ public interface PerspectiveChangeHandler {
 
     void handleViewWorkspaceToolbarButtonGroupRemoved(Perspective perspective, View view, ToolbarButtonGroup buttonGroup);
 
-
+	void handleViewSelect(View view);
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/application/perspective/PerspectiveImpl.java b/teamapps-ux/src/main/java/org/teamapps/ux/application/perspective/PerspectiveImpl.java
index 9d7d59198..14faf80b5 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/application/perspective/PerspectiveImpl.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/application/perspective/PerspectiveImpl.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -30,12 +30,13 @@
 import java.util.Set;
 import java.util.stream.Collectors;
 
-public class PerspectiveImpl implements Perspective{
+public class PerspectiveImpl implements Perspective {
 
     private List<View> views = new ArrayList<>();
     private List<ToolbarButtonGroup> workspaceToolbarButtonGroups = new ArrayList<>();
     private List<PerspectiveChangeHandler> changeHandlers = new ArrayList<>();
     private LayoutItemDefinition layout;
+    private View focusedView;
 
     public PerspectiveImpl(LayoutItemDefinition layout) {
         this.layout = layout;
@@ -83,6 +84,17 @@ public List<View> getVisibleAndLayoutReferencedViews() {
                 .collect(Collectors.toList());
     }
 
+    @Override
+    public void setFocusedView(View view) {
+        view.focus();
+        this.focusedView = view;
+    }
+
+    @Override
+    public View getFocusedView() {
+        return focusedView;
+    }
+
     @Override
     public ToolbarButtonGroup addWorkspaceButtonGroup(ToolbarButtonGroup buttonGroup) {
         workspaceToolbarButtonGroups.add(buttonGroup);
@@ -113,6 +125,7 @@ public void handleVisibilityChange(boolean visible) {
 
             @Override
             public void handleViewFocusRequest(boolean ensureVisible) {
+                focusedView = view;
                 changeHandlers.forEach(changeHandler -> changeHandler.handleViewFocusRequest(perspective, view, ensureVisible));
             }
 
@@ -140,6 +153,11 @@ public void handleWorkspaceButtonGroupAdded(ToolbarButtonGroup buttonGroup) {
             public void handleWorkspaceButtonGroupRemoved(ToolbarButtonGroup buttonGroup) {
                 changeHandlers.forEach(changeHandler -> changeHandler.handleViewWorkspaceToolbarButtonGroupRemoved(perspective, view, buttonGroup));
             }
+
+            @Override
+            public void handleSelect() {
+                changeHandlers.forEach(ch -> ch.handleViewSelect(view));
+            }
         });
         changeHandlers.forEach(changeHandler -> changeHandler.handleViewAdded(this, view));
         return view;
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/application/validation/RecordChangeSet.java b/teamapps-ux/src/main/java/org/teamapps/ux/application/validation/RecordChangeSet.java
deleted file mode 100644
index 4d4cd0a51..000000000
--- a/teamapps-ux/src/main/java/org/teamapps/ux/application/validation/RecordChangeSet.java
+++ /dev/null
@@ -1,93 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.ux.application.validation;
-
-import org.teamapps.data.extract.PropertyProvider;
-
-import java.util.*;
-
-public class RecordChangeSet<RECORD> {
-
-    private RECORD unmodifiedRecord;
-    private Map<String, RecordValueChange> valueChangeByPropertyKey = new HashMap<>();
-
-    public RecordChangeSet(RECORD unmodifiedRecord) {
-        this.unmodifiedRecord = unmodifiedRecord;
-    }
-
-    public RecordChangeSet(RECORD unmodifiedRecord, Map<String, Object> changedValues) {
-        this.unmodifiedRecord = unmodifiedRecord;
-        changedValues.entrySet().forEach(entry -> {
-            addValueChange(new RecordValueChange(entry.getKey(), entry.getValue()));
-        });
-    }
-
-    public RecordChangeSet(RECORD unmodifiedRecord, List<RecordValueChange> valueChanges) {
-        this.unmodifiedRecord = unmodifiedRecord;
-        for (RecordValueChange valueChange : valueChanges) {
-            addValueChange(valueChange);
-        }
-    }
-
-    public boolean isChanged() {
-        if (valueChangeByPropertyKey.isEmpty()) {
-            return false;
-        } else {
-            return true;
-        }
-    }
-
-    public RecordChangeSet addValueChange(RecordValueChange valueChange) {
-        valueChangeByPropertyKey.put(valueChange.getPropertyName(), valueChange);
-        return this;
-    }
-
-    public RECORD getUnmodifiedRecord() {
-        return unmodifiedRecord;
-    }
-
-    public RecordValueChange getValueChange(String propertyName) {
-        return valueChangeByPropertyKey.get(propertyName);
-    }
-
-    public List<RecordValueChange> getValueChanges() {
-        return new ArrayList<>(valueChangeByPropertyKey.values());
-    }
-
-
-    public List<RecordValue> getRecordValues(PropertyProvider<RECORD> propertyProvider, String ... requiredPropertyNames) {
-        List<RecordValue> values = new ArrayList<>();
-        Set<String> requiredPropertyNameSet = new HashSet<>(Arrays.asList(requiredPropertyNames));
-        valueChangeByPropertyKey.entrySet().forEach(entry -> {
-            boolean required = requiredPropertyNameSet.contains(entry.getKey());
-            RecordValueChange valueChange = entry.getValue();
-            values.add(new RecordValue(entry.getKey(), required, valueChange.getValue(), true));
-        });
-        requiredPropertyNameSet.forEach(propertyName -> {
-            if (!valueChangeByPropertyKey.containsKey(propertyName)) {
-                values.add(new RecordValue(propertyName, true, propertyProvider.getValue(unmodifiedRecord, propertyName), false));
-            }
-        });
-        return values;
-    }
-
-
-
-}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/application/validation/RecordValue.java b/teamapps-ux/src/main/java/org/teamapps/ux/application/validation/RecordValue.java
deleted file mode 100644
index 388138834..000000000
--- a/teamapps-ux/src/main/java/org/teamapps/ux/application/validation/RecordValue.java
+++ /dev/null
@@ -1,72 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.ux.application.validation;
-
-public class RecordValue {
-
-    private final String propertyName;
-    private final boolean required;
-    private final Object value;
-    private final boolean changed;
-
-    public RecordValue(String propertyName, boolean required, Object value, boolean changed) {
-        this.propertyName = propertyName;
-        this.required = required;
-        this.value = value;
-        this.changed = changed;
-    }
-
-    public String getPropertyName() {
-        return propertyName;
-    }
-
-    public boolean isRequired() {
-        return required;
-    }
-
-    public Object getValue() {
-        return value;
-    }
-
-    public boolean isChanged() {
-        return changed;
-    }
-
-    public String getStringValue() {
-        if (value != null && value instanceof String) {
-            return (String) value;
-        }
-        return null;
-    }
-
-    public int getIntValue() {
-        if (value != null && value instanceof Integer) {
-            return (Integer) value;
-        }
-        return 0;
-    }
-
-    public long getLongValue() {
-        if (value != null && value instanceof Long) {
-            return (Long) value;
-        }
-        return 0;
-    }
-}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/application/validation/ValidationMessage.java b/teamapps-ux/src/main/java/org/teamapps/ux/application/validation/ValidationMessage.java
deleted file mode 100644
index c838ca165..000000000
--- a/teamapps-ux/src/main/java/org/teamapps/ux/application/validation/ValidationMessage.java
+++ /dev/null
@@ -1,66 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.ux.application.validation;
-
-import org.teamapps.ux.component.field.FieldMessage;
-import org.teamapps.ux.component.field.FieldMessage.Position;
-import org.teamapps.ux.component.field.FieldMessage.Severity;
-import org.teamapps.ux.component.field.FieldMessage.VisibilityMode;
-
-public class ValidationMessage  {
-
-    public static ValidationMessage info(String propertyName, String message) {
-        return new ValidationMessage(propertyName, Severity.INFO, message);
-    }
-
-    public static ValidationMessage warning(String propertyName, String message) {
-        return new ValidationMessage(propertyName, Severity.WARNING, message);
-    }
-
-    public static ValidationMessage error(String propertyName, String message) {
-        return new ValidationMessage(propertyName, Severity.ERROR, message);
-    }
-
-    public static ValidationMessage success(String propertyName, String message) {
-        return new ValidationMessage(propertyName, Severity.SUCCESS, message);
-    }
-
-    private final String propertyName;
-    private final FieldMessage fieldMessage;
-
-
-    public ValidationMessage(String propertyName, Severity severity, String message) {
-        this.propertyName = propertyName;
-        this.fieldMessage = new FieldMessage(severity, message);
-    }
-
-    public ValidationMessage(String propertyName, Position position, VisibilityMode visibilityMode, Severity severity, String message) {
-        this.propertyName = propertyName;
-        this.fieldMessage = new FieldMessage(position, visibilityMode, severity, message);
-    }
-
-    public String getPropertyName() {
-        return propertyName;
-    }
-
-    public FieldMessage getFieldMessage() {
-        return fieldMessage;
-    }
-}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/application/validation/ValidationResult.java b/teamapps-ux/src/main/java/org/teamapps/ux/application/validation/ValidationResult.java
deleted file mode 100644
index ff4c000b2..000000000
--- a/teamapps-ux/src/main/java/org/teamapps/ux/application/validation/ValidationResult.java
+++ /dev/null
@@ -1,76 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.ux.application.validation;
-
-import org.teamapps.ux.component.field.FieldMessage;
-
-import java.util.ArrayList;
-import java.util.List;
-import java.util.Map;
-import java.util.stream.Collectors;
-
-public class ValidationResult {
-
-    private boolean success;
-    private List<ValidationMessage> validationMessages = new ArrayList<>();
-
-
-    public static ValidationResult success() {
-        return new ValidationResult(true);
-    }
-
-    public static ValidationResult failure(ValidationMessage message) {
-        return new ValidationResult(false).addMessage(message);
-    }
-
-    public ValidationResult() {
-    }
-
-    public ValidationResult(boolean success) {
-        this.success = success;
-    }
-
-    public ValidationResult addMessage(ValidationMessage message) {
-        validationMessages.add(message);
-        return this;
-    }
-
-    public boolean isSuccess() {
-        return success;
-    }
-
-    public List<ValidationMessage> getValidationMessages() {
-        return validationMessages;
-    }
-
-    public void setSuccess(boolean success) {
-        this.success = success;
-    }
-
-    public void setValidationMessages(List<ValidationMessage> validationMessages) {
-        this.validationMessages = validationMessages;
-    }
-
-    public Map<String, List<FieldMessage>> getFieldMessagesMap() {
-        return validationMessages.stream()
-                .collect(Collectors.groupingBy(message -> message.getPropertyName(),
-                        Collectors.mapping(message -> message.getFieldMessage(), Collectors.toList())));
-    }
-}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/application/view/View.java b/teamapps-ux/src/main/java/org/teamapps/ux/application/view/View.java
index 5861f6c4d..58ab76396 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/application/view/View.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/application/view/View.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,7 +19,9 @@
  */
 package org.teamapps.ux.application.view;
 
-import org.teamapps.icons.api.Icon;
+import org.teamapps.common.format.Color;
+import org.teamapps.event.Event;
+import org.teamapps.icons.Icon;
 import org.teamapps.ux.component.Component;
 import org.teamapps.ux.component.panel.Panel;
 import org.teamapps.ux.component.toolbar.ToolbarButtonGroup;
@@ -28,6 +30,8 @@
 
 public interface View {
 
+    Event<Boolean> onEffectiveVisibilityChanged();
+    
     static View createView() {
         return new ViewImpl();
     }
@@ -44,6 +48,10 @@ static View createView(String layoutPosition, Icon icon, String title, Component
         return new ViewImpl(layoutPosition, icon, title, component);
     }
 
+    static View createView(String layoutPosition, Icon icon, String title, Component component, boolean closable) {
+        return new ViewImpl(layoutPosition, icon, title, component, closable);
+    }
+
     void addViewChangeHandler(ViewChangeHandler viewChangeHandler);
 
     void removeViewChangeHandler(ViewChangeHandler viewChangeHandler);
@@ -78,6 +86,8 @@ static View createView(String layoutPosition, Icon icon, String title, Component
 
     Panel getPanel();
 
+    boolean isClosable();
+
     void setLayoutPosition(String position);
 
     String getLayoutPosition();
@@ -90,5 +100,7 @@ static View createView(String layoutPosition, Icon icon, String title, Component
 
     String getTabTitle();
 
+    void setLocalToolbarBackgroundColor(Color color);
 
+    void select();
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/application/view/ViewChangeHandler.java b/teamapps-ux/src/main/java/org/teamapps/ux/application/view/ViewChangeHandler.java
index 9389e9c10..4c0cbaef6 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/application/view/ViewChangeHandler.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/application/view/ViewChangeHandler.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -37,4 +37,6 @@ public interface ViewChangeHandler {
 
     void handleWorkspaceButtonGroupRemoved(ToolbarButtonGroup buttonGroup);
 
+    void handleSelect();
+
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/application/view/ViewImpl.java b/teamapps-ux/src/main/java/org/teamapps/ux/application/view/ViewImpl.java
index 657c1335d..1bb5e388c 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/application/view/ViewImpl.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/application/view/ViewImpl.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,7 +19,9 @@
  */
 package org.teamapps.ux.application.view;
 
-import org.teamapps.icons.api.Icon;
+import org.teamapps.common.format.Color;
+import org.teamapps.event.Event;
+import org.teamapps.icons.Icon;
 import org.teamapps.ux.component.Component;
 import org.teamapps.ux.component.panel.Panel;
 import org.teamapps.ux.component.toolbar.Toolbar;
@@ -30,22 +32,26 @@
 
 public class ViewImpl implements View {
 
+    public final Event<Boolean> onEffectiveVisibilityChanged = new Event<>();
 
+    private final boolean closable;
     private boolean visible = true;
     private String layoutPosition;
     private ViewSize viewSize;
     private String tabTitle;
 
-    private Panel panel = new Panel();
+    private final Panel panel = new Panel();
     private Toolbar toolbar;
-    private List<ToolbarButtonGroup> workspaceToolbarButtonGroups = new ArrayList<>();
-    private List<ViewChangeHandler> changeHandlers = new ArrayList<>();
+    private final List<ToolbarButtonGroup> workspaceToolbarButtonGroups = new ArrayList<>();
+    private final List<ViewChangeHandler> changeHandlers = new ArrayList<>();
 
     public ViewImpl() {
+        closable = false;
     }
 
     public ViewImpl(String layoutPosition) {
         this.layoutPosition = layoutPosition;
+        closable = false;
     }
 
     public ViewImpl(Icon icon, String title, Component component) {
@@ -53,12 +59,21 @@ public ViewImpl(Icon icon, String title, Component component) {
     }
 
     public ViewImpl(String layoutPosition, Icon icon, String title, Component component) {
+        this(layoutPosition, icon, title, component, false);
+    }
+
+    public ViewImpl(String layoutPosition, Icon icon, String title, Component component, boolean closable) {
         this.layoutPosition = layoutPosition;
         panel.setIcon(icon);
         panel.setTitle(title);
         panel.setContent(component);
+        this.closable = closable;
     }
 
+    @Override
+    public Event<Boolean> onEffectiveVisibilityChanged() {
+        return onEffectiveVisibilityChanged;
+    }
 
     @Override
     public void addViewChangeHandler(ViewChangeHandler viewChangeHandler) {
@@ -72,8 +87,12 @@ public void removeViewChangeHandler(ViewChangeHandler viewChangeHandler) {
 
     @Override
     public void setVisible(boolean visible) {
-        this.visible = visible;
-        changeHandlers.forEach(changeHandler -> changeHandler.handleVisibilityChange(visible));
+        if (this.visible == visible) {
+            return;
+        } else {
+            this.visible = visible;
+            changeHandlers.forEach(changeHandler -> changeHandler.handleVisibilityChange(visible));
+        }
     }
 
     @Override
@@ -159,6 +178,11 @@ public Panel getPanel() {
         return panel;
     }
 
+    @Override
+    public boolean isClosable() {
+        return closable;
+    }
+
     @Override
     public void setLayoutPosition(String position) {
         this.layoutPosition = position;
@@ -190,4 +214,15 @@ public void setTabTitle(String title) {
     public String getTabTitle() {
         return tabTitle;
     }
+
+    @Override
+    public void setLocalToolbarBackgroundColor(Color color) {
+        checkToolbar();
+        toolbar.setBackgroundColor(color);
+    }
+
+    @Override
+    public void select() {
+        changeHandlers.forEach(ViewChangeHandler::handleSelect);
+    }
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/application/view/ViewSize.java b/teamapps-ux/src/main/java/org/teamapps/ux/application/view/ViewSize.java
index c7f51e6aa..fc65da7b5 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/application/view/ViewSize.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/application/view/ViewSize.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/uisession/UnconsumedCommandsOverflowException.java b/teamapps-ux/src/main/java/org/teamapps/ux/cache/record/DuplicateEntriesException.java
similarity index 62%
rename from teamapps-ux/src/main/java/org/teamapps/uisession/UnconsumedCommandsOverflowException.java
rename to teamapps-ux/src/main/java/org/teamapps/ux/cache/record/DuplicateEntriesException.java
index cad6d7e81..3c4c9abda 100644
--- a/teamapps-ux/src/main/java/org/teamapps/uisession/UnconsumedCommandsOverflowException.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/cache/record/DuplicateEntriesException.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,27 +17,26 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-package org.teamapps.uisession;
+package org.teamapps.ux.cache.record;
 
-public class UnconsumedCommandsOverflowException extends Exception {
+public class DuplicateEntriesException extends RuntimeException {
 
-	public UnconsumedCommandsOverflowException() {
-		super();
+	public DuplicateEntriesException() {
 	}
 
-	public UnconsumedCommandsOverflowException(String message) {
+	public DuplicateEntriesException(String message) {
 		super(message);
 	}
 
-	public UnconsumedCommandsOverflowException(String message, Throwable cause) {
+	public DuplicateEntriesException(String message, Throwable cause) {
 		super(message, cause);
 	}
 
-	public UnconsumedCommandsOverflowException(Throwable cause) {
+	public DuplicateEntriesException(Throwable cause) {
 		super(cause);
 	}
 
-	protected UnconsumedCommandsOverflowException(String message, Throwable cause, boolean enableSuppression, boolean writableStackTrace) {
+	public DuplicateEntriesException(String message, Throwable cause, boolean enableSuppression, boolean writableStackTrace) {
 		super(message, cause, enableSuppression, writableStackTrace);
 	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/cache/record/EqualsAndHashCode.java b/teamapps-ux/src/main/java/org/teamapps/ux/cache/record/EqualsAndHashCode.java
new file mode 100644
index 000000000..23d853b04
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/cache/record/EqualsAndHashCode.java
@@ -0,0 +1,52 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.cache.record;
+
+import java.util.function.BiPredicate;
+
+public class EqualsAndHashCode<T> {
+	private final BiPredicate<T, Object> equals;
+	private final HashCodeFunction<T> hashCode;
+
+	public static <T> EqualsAndHashCode<T> bypass() {
+		return new EqualsAndHashCode<>(Object::equals, Object::hashCode);
+	}
+
+	public static <T> EqualsAndHashCode<T> identity() {
+		return new EqualsAndHashCode<>((t, o) -> t == o, System::identityHashCode);
+	}
+
+	public EqualsAndHashCode(BiPredicate<T, Object> equals, HashCodeFunction<T> hashCode) {
+		this.equals = equals;
+		this.hashCode = hashCode;
+	}
+
+	public BiPredicate<T, Object> getEquals() {
+		return equals;
+	}
+
+	public HashCodeFunction<T> getHashCode() {
+		return hashCode;
+	}
+
+	public interface HashCodeFunction<T> {
+		int hashCode(T o);
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/cache/record/EqualsHashCodeWrapper.java b/teamapps-ux/src/main/java/org/teamapps/ux/cache/record/EqualsHashCodeWrapper.java
new file mode 100644
index 000000000..77a3c6daa
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/cache/record/EqualsHashCodeWrapper.java
@@ -0,0 +1,56 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.cache.record;
+
+public class EqualsHashCodeWrapper<T> {
+
+	private final T record;
+	private final EqualsAndHashCode<T> equalsAndHashCode;
+
+	public EqualsHashCodeWrapper(T record, EqualsAndHashCode<T> equalsAndHashCode) {
+		this.record = record;
+		this.equalsAndHashCode = equalsAndHashCode;
+	}
+
+	@Override
+	public boolean equals(Object o) {
+		if (!(o instanceof EqualsHashCodeWrapper)) {
+			return false;
+		}
+		if (equalsAndHashCode == null) {
+			return this.record.equals(((EqualsHashCodeWrapper<?>) o).record);
+		} else {
+			return equalsAndHashCode.getEquals().test(record, ((EqualsHashCodeWrapper<?>) o).record);
+		}
+	}
+
+	@Override
+	public int hashCode() {
+		if (equalsAndHashCode == null) {
+			return record.hashCode();
+		} else {
+			return equalsAndHashCode.getHashCode().hashCode(record);
+		}
+	}
+
+	public T getRecord() {
+		return record;
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/uisession/QualifiedUiSessionId.java b/teamapps-ux/src/main/java/org/teamapps/ux/cache/record/ItemRange.java
similarity index 50%
rename from teamapps-ux/src/main/java/org/teamapps/uisession/QualifiedUiSessionId.java
rename to teamapps-ux/src/main/java/org/teamapps/ux/cache/record/ItemRange.java
index c575d8cb2..b999ff504 100644
--- a/teamapps-ux/src/main/java/org/teamapps/uisession/QualifiedUiSessionId.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/cache/record/ItemRange.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,24 +17,51 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-package org.teamapps.uisession;
+package org.teamapps.ux.cache.record;
 
 import java.util.Objects;
 
-public class QualifiedUiSessionId {
+public class ItemRange {
 
-	private final String httpSessionId;
-	private final String uiSessionId;
+	private final int start;
+	private final int length;
 
-	public QualifiedUiSessionId(String httpSessionId, String uiSessionId) {
-		if (httpSessionId == null) {
-			throw new NullPointerException("httpSessionId may not be null!");
-		}
-		if (uiSessionId == null) {
-			throw new NullPointerException("uiSessionId may not be null!");
-		}
-		this.httpSessionId = httpSessionId;
-		this.uiSessionId = uiSessionId;
+	public static ItemRange startEnd(int start, int endExclusive) {
+		return new ItemRange(start, endExclusive - start);
+	}
+
+	public static ItemRange startLength(int start, int length) {
+		return new ItemRange(start, length);
+	}
+
+	private ItemRange(int start, int length) {
+		this.start = start;
+		this.length = length;
+	}
+
+	public int getStart() {
+		return start;
+	}
+
+	public int getLength() {
+		return length;
+	}
+
+	public int getEnd() {
+		return start + length;
+	}
+
+	public boolean overlaps(ItemRange other) {
+		return length > 0 && other.length > 0 && start < other.getEnd() && getEnd() > other.start;
+	}
+
+	@Override
+	public String toString() {
+		return "ItemRange{" +
+				"start=" + start +
+				", end=" + getEnd() +
+				", length=" + length +
+				'}';
 	}
 
 	@Override
@@ -45,27 +72,13 @@ public boolean equals(Object o) {
 		if (o == null || getClass() != o.getClass()) {
 			return false;
 		}
-		QualifiedUiSessionId that = (QualifiedUiSessionId) o;
-		return Objects.equals(httpSessionId, that.httpSessionId) && Objects.equals(uiSessionId, that.uiSessionId);
+		ItemRange itemRange = (ItemRange) o;
+		return start == itemRange.start &&
+				length == itemRange.length;
 	}
 
 	@Override
 	public int hashCode() {
-		int result = httpSessionId.hashCode();
-		result = 31 * result + uiSessionId.hashCode();
-		return result;
-	}
-
-	@Override
-	public String toString() {
-		return httpSessionId + ':' + uiSessionId;
-	}
-
-	public String getHttpSessionId() {
-		return httpSessionId;
-	}
-
-	public String getUiSessionId() {
-		return uiSessionId;
+		return Objects.hash(start, length);
 	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/cache/record/RecordAndClientRecord.java b/teamapps-ux/src/main/java/org/teamapps/ux/cache/record/RecordAndClientRecord.java
new file mode 100644
index 000000000..a9f215c45
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/cache/record/RecordAndClientRecord.java
@@ -0,0 +1,40 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.cache.record;
+
+import org.teamapps.dto.UiIdentifiableClientRecord;
+
+public class RecordAndClientRecord<RECORD> {
+	private final RECORD record;
+	private final UiIdentifiableClientRecord uiRecord;
+
+	public RecordAndClientRecord(RECORD record, UiIdentifiableClientRecord uiRecord) {
+		this.record = record;
+		this.uiRecord = uiRecord;
+	}
+
+	public RECORD getRecord() {
+		return record;
+	}
+
+	public UiIdentifiableClientRecord getUiRecord() {
+		return uiRecord;
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/cache/record/RenderedRecordsCache.java b/teamapps-ux/src/main/java/org/teamapps/ux/cache/record/RenderedRecordsCache.java
new file mode 100644
index 000000000..bf9774578
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/cache/record/RenderedRecordsCache.java
@@ -0,0 +1,211 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.cache.record;
+
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+import org.teamapps.dto.UiIdentifiableClientRecord;
+import org.teamapps.ux.component.table.CustomEqualsAndHashCodeMap;
+
+import java.lang.invoke.MethodHandles;
+import java.util.*;
+import java.util.stream.Collectors;
+import java.util.stream.IntStream;
+
+public class RenderedRecordsCache<RECORD> {
+	private static final Logger LOGGER = LoggerFactory.getLogger(MethodHandles.lookup().lookupClass());
+
+	private final CustomEqualsAndHashCodeMap<RECORD, UiIdentifiableClientRecord> uiRecordsByRecord;
+	private final List<RecordAndClientRecord<RECORD>> recordPairs = new ArrayList<>();
+	private final EqualsAndHashCode<RECORD> customEqualsAndHashCode;
+	private int startIndex = 0;
+
+	public RenderedRecordsCache() {
+		this(EqualsAndHashCode.bypass());
+	}
+
+	public RenderedRecordsCache(EqualsAndHashCode<RECORD> customEqualsAndHashCode) {
+		this.customEqualsAndHashCode = customEqualsAndHashCode;
+		this.uiRecordsByRecord = new CustomEqualsAndHashCodeMap<>(customEqualsAndHashCode);
+	}
+
+	public UiIdentifiableClientRecord getUiRecord(RECORD record) {
+		return record != null ? uiRecordsByRecord.get(record) : null;
+	}
+
+	public int getIndex(RECORD record) {
+		int index = getRelativeIndex(record);
+		if (index >= 0) {
+			return startIndex + index;
+		} else {
+			return -1;
+		}
+	}
+
+	private int getRelativeIndex(RECORD record) {
+		return IntStream.range(0, recordPairs.size())
+				.filter(i -> customEqualsAndHashCode.getEquals().test(record, recordPairs.get(i).getRecord()))
+				.findFirst().orElse(-1);
+	}
+
+	public List<RECORD> getRecords() {
+		return recordPairs.stream()
+				.map(RecordAndClientRecord::getRecord)
+				.collect(Collectors.toList());
+	}
+
+	public RECORD getRecord(int uiRecordId) {
+		// no fast implementation needed! only called on user click
+		return recordPairs.stream()
+				.filter(rr -> rr.getUiRecord().getId() == uiRecordId)
+				.map(RecordAndClientRecord::getRecord)
+				.findFirst().orElse(null);
+	}
+
+	public RECORD getRecordByIndex(int index) {
+		return recordPairs.get(index - startIndex).getRecord();
+	}
+
+	public List<RECORD> getRecords(List<Integer> uiRecordIds) {
+		HashSet<Integer> recordIdsSet = new HashSet<>(uiRecordIds);
+		return recordPairs.stream()
+				.filter(rr -> recordIdsSet.contains(rr.getUiRecord().getId()))
+				.map(RecordAndClientRecord::getRecord)
+				.collect(Collectors.toList());
+	}
+
+	public List<Integer> getUiRecordIds() {
+		return recordPairs.stream()
+				.map(rr -> rr.getUiRecord().getId())
+				.collect(Collectors.toList());
+	}
+
+	public List<Integer> getUiRecordIds(List<RECORD> records) {
+		Set<EqualsHashCodeWrapper<RECORD>> recordsAsSet = records.stream()
+				.map(this::withCustomEqualsHashCode)
+				.collect(Collectors.toSet());
+		return recordPairs.stream()
+				.filter(rp -> recordsAsSet.contains(withCustomEqualsHashCode(rp.getRecord())))
+				.map(rr -> rr.getUiRecord().getId())
+				.collect(Collectors.toList());
+	}
+
+	public void addNoShift(int startIndex, List<RecordAndClientRecord<RECORD>> newClientRecordPairs) {
+		LOGGER.debug("inserting at {}: {}", startIndex, newClientRecordPairs.size());
+		if (newClientRecordPairs.size() == 0) {
+			return; // this is important! if the startIndex is completely of, this might otherwise throw an "unattached records" exception
+		}
+		if (this.recordPairs.size() == 0) { // fresh record cache!
+			this.startIndex = startIndex;
+		}
+		if (startIndex + newClientRecordPairs.size() < this.startIndex
+				|| startIndex > this.startIndex + recordPairs.size()) {
+			String errorMessage = String.format("Cannot addNoShift unattached records! %d, %d, %d, %d", startIndex, newClientRecordPairs.size(), this.startIndex, recordPairs.size());
+			LOGGER.error(errorMessage);
+			throw new IllegalArgumentException(errorMessage);
+		}
+		int listInsertIndex = Math.max(0, startIndex - this.startIndex);
+		if (newClientRecordPairs.stream().anyMatch(rp -> uiRecordsByRecord.containsKey(rp.getRecord()))) {
+			throw new DuplicateEntriesException("List components MUST NOT contains the same item several times!");
+		}
+		recordPairs.addAll(listInsertIndex, newClientRecordPairs);
+		for (RecordAndClientRecord<RECORD> rr : newClientRecordPairs) {
+			uiRecordsByRecord.put(rr.getRecord(), rr.getUiRecord());
+		}
+		this.startIndex = Math.min(this.startIndex, startIndex);
+	}
+
+	public void insertShifting(int startIndex, List<RecordAndClientRecord<RECORD>> newClientRecordPairs) {
+		if (startIndex < this.startIndex || startIndex > this.startIndex + this.recordPairs.size()) {
+			String errorMessage = String.format("Cannot insertShifting unattached records! %d, %d, %d, %d", startIndex, newClientRecordPairs.size(), this.startIndex, recordPairs.size());
+			LOGGER.error(errorMessage);
+			throw new IllegalArgumentException(errorMessage);
+		}
+		int listInsertIndex = startIndex - this.startIndex;
+		if (newClientRecordPairs.stream().anyMatch(rp -> uiRecordsByRecord.containsKey(rp.getRecord()))) {
+			throw new DuplicateEntriesException("List components MUST NOT contains the same item several times! ");
+		}
+		recordPairs.addAll(listInsertIndex, newClientRecordPairs);
+		for (RecordAndClientRecord<RECORD> rr : newClientRecordPairs) {
+			uiRecordsByRecord.put(rr.getRecord(), rr.getUiRecord());
+		}
+	}
+
+	public void removeNoShift(int startIndex, int endIndex) {
+		int length = endIndex - startIndex;
+		int listStartIndex = startIndex - this.startIndex;
+		int listEndIndex = listStartIndex + Math.min(length, recordPairs.size());
+		removeNoShiftInternal(listStartIndex, listEndIndex);
+
+	}
+
+	public void removeBeforeNoShift(int index) {
+		if (index > startIndex) {
+			removeNoShiftInternal(0, Math.min(index - this.startIndex, recordPairs.size()));
+			this.startIndex = index;
+		}
+	}
+
+	public void removeAfterNoShift(int index) {
+		if (index < startIndex + recordPairs.size()) {
+			removeNoShiftInternal(Math.max(0, index - this.startIndex), recordPairs.size());
+		}
+	}
+
+	private void removeNoShiftInternal(int startIndex, int endIndex) {
+		List<RecordAndClientRecord<RECORD>> recordsToBeRemoved = recordPairs.subList(startIndex, endIndex);
+		for (RecordAndClientRecord<RECORD> rr : recordsToBeRemoved) {
+			uiRecordsByRecord.remove(rr.getRecord());
+		}
+		recordsToBeRemoved.clear();
+	}
+
+	public void updateRecord(RECORD record, UiIdentifiableClientRecord clientRecord) {
+		int index = getRelativeIndex(record);
+		recordPairs.set(index, new RecordAndClientRecord<>(record, clientRecord));
+		uiRecordsByRecord.put(record, clientRecord);
+	}
+
+	private EqualsHashCodeWrapper<RECORD> withCustomEqualsHashCode(RECORD rp) {
+		return new EqualsHashCodeWrapper<>(rp, customEqualsAndHashCode);
+	}
+
+	public void clear() {
+		this.startIndex = 0;
+		uiRecordsByRecord.clear();
+		recordPairs.clear();
+	}
+
+	public int size() {
+		return recordPairs.size();
+	}
+
+	public int getStartIndex() {
+		return startIndex;
+	}
+
+	public int getEndIndex() {
+		return startIndex + recordPairs.size();
+	}
+
+	public ItemRange getRange() {
+		return ItemRange.startLength(startIndex, recordPairs.size());
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/cache/CacheManipulationHandle.java b/teamapps-ux/src/main/java/org/teamapps/ux/cache/record/legacy/CacheManipulationHandle.java
similarity index 63%
rename from teamapps-ux/src/main/java/org/teamapps/ux/cache/CacheManipulationHandle.java
rename to teamapps-ux/src/main/java/org/teamapps/ux/cache/record/legacy/CacheManipulationHandle.java
index c8ea5f34d..70c001f74 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/cache/CacheManipulationHandle.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/cache/record/legacy/CacheManipulationHandle.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,28 +17,24 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-package org.teamapps.ux.cache;
+package org.teamapps.ux.cache.record.legacy;
 
 public class CacheManipulationHandle<R> {
-	private ClientRecordCache cache;
 	private R result;
-	private Runnable committingActions;
-	private int operationSequenceNumber;
+	private final Runnable committingActions;
 
-	public CacheManipulationHandle(ClientRecordCache cache, int operationSequenceNumber, R result, Runnable committingActions) {
-		this.cache = cache;
-		this.operationSequenceNumber = operationSequenceNumber;
+	public CacheManipulationHandle(R result, Runnable committingActions) {
 		this.result = result;
 		this.committingActions = committingActions;
 	}
 
-	public R getResult() {
+	public R getAndClearResult() {
+		R result = this.result;
+		this.result = null;
 		return result;
 	}
 
 	public void commit() {
-		if (cache.getOperationInvalidationSequenceNumber() < operationSequenceNumber) {
-			committingActions.run();
-		}
+		committingActions.run();
 	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/cache/ClientRecordCache.java b/teamapps-ux/src/main/java/org/teamapps/ux/cache/record/legacy/ClientRecordCache.java
similarity index 65%
rename from teamapps-ux/src/main/java/org/teamapps/ux/cache/ClientRecordCache.java
rename to teamapps-ux/src/main/java/org/teamapps/ux/cache/record/legacy/ClientRecordCache.java
index 78bbab1d5..158310407 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/cache/ClientRecordCache.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/cache/record/legacy/ClientRecordCache.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,18 +17,15 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-package org.teamapps.ux.cache;
+package org.teamapps.ux.cache.record.legacy;
 
-import org.jetbrains.annotations.NotNull;
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
 import org.teamapps.dto.UiIdentifiableClientRecord;
 import org.teamapps.util.StreamUtil;
 
 import java.util.ArrayList;
-import java.util.Collection;
 import java.util.Collections;
-import java.util.HashMap;
 import java.util.Iterator;
 import java.util.LinkedHashMap;
 import java.util.List;
@@ -43,8 +40,6 @@ public class ClientRecordCache<RECORD, UIRECORD extends UiIdentifiableClientReco
 	private final UiIdentifiableClientRecordFactory<RECORD, UIRECORD> clientRecordFactory;
 	private final UiIdentifiableClientRecordPostProcessor<RECORD, UIRECORD> postProcessor;
 	private int idCounter;
-	private int nextOperationSequenceNumber = 0;
-	private int operationInvalidationSequenceNumber = -1;
 
 	private ClientRecordCachePurgeListener purgeListener;
 	private BiPredicate<RECORD, Integer> purgeDecider = (record, clientRecordId) -> true;
@@ -53,19 +48,19 @@ public class ClientRecordCache<RECORD, UIRECORD extends UiIdentifiableClientReco
 	/**
 	 * Always represents the current server-side state.
 	 */
-	private LinkedHashMap<RECORD, Integer> uiRecordsByRecord = new LinkedHashMap<>();
+	private final LinkedHashMap<RECORD, Integer> uiRecordsByRecord = new LinkedHashMap<>();
 
 	/**
 	 * Always represents the currently acknowledged client-side state.
 	 */
-	private LinkedHashMap<Integer, RECORD> recordsByClientId = new LinkedHashMap<>();
+	private final LinkedHashMap<Integer, RECORD> recordsByClientId = new LinkedHashMap<>();
 
 	/**
 	 * Represents records not yet acknowledged by the client side.
 	 * Example: Setting records of a tree, the tree might request child components of an expanded lazy node during its initialization. The corresponding "lazy children" request will come
 	 * before the actual acknowledgement of the tree data (with the parent lazy expanded node).
 	 */
-	private LinkedHashMap<Integer, RECORD> unacknowledgedRecordsByClientId = new LinkedHashMap<>();
+	private final LinkedHashMap<Integer, RECORD> unacknowledgedRecordsByClientId = new LinkedHashMap<>();
 
 	public ClientRecordCache(UiIdentifiableClientRecordFactory<RECORD, UIRECORD> clientRecordFactory, UiIdentifiableClientRecordPostProcessor<RECORD, UIRECORD> postProcessor) {
 		this.clientRecordFactory = clientRecordFactory;
@@ -84,13 +79,6 @@ public Integer getUiRecordIdOrNull(RECORD record) {
 		return uiRecordsByRecord.get(record);
 	}
 
-	public List<Integer> getUiRecordIds(List<RECORD> records) {
-		return records.stream()
-				.map(record -> getUiRecordIdOrNull(record))
-				.filter(clientId -> clientId != null)
-				.collect(Collectors.toList());
-	}
-
 	public RECORD getRecordByClientId(int id) {
 		RECORD record = recordsByClientId.get(id);
 		if (record == null) {
@@ -104,7 +92,7 @@ record = unacknowledgedRecordsByClientId.get(id);
 
 	public CacheManipulationHandle<Void> clear() {
 		uiRecordsByRecord.clear();
-		return new CacheManipulationHandle<>(this, nextOperationSequenceNumber++, null, () -> recordsByClientId.clear());
+		return new CacheManipulationHandle<>(null, recordsByClientId::clear);
 	}
 
 	/**
@@ -115,14 +103,20 @@ public CacheManipulationHandle<List<UIRECORD>> replaceRecords(List<RECORD> newRe
 
 		LinkedHashMap<RECORD, UIRECORD> uiRecordsByRecord = createUiRecords(newRecords);
 
-		this.uiRecordsByRecord.putAll(uiRecordsByRecord.entrySet().stream().collect(Collectors.toMap(entry -> entry.getKey(), entry -> entry.getValue().getId())));
+		this.uiRecordsByRecord.clear();
+		this.uiRecordsByRecord.putAll(uiRecordsByRecord.entrySet().stream()
+				.collect(Collectors.toMap(Map.Entry::getKey, entry -> entry.getValue().getId())));
 
 		Map<Integer, RECORD> newRecordsByClientId = uiRecordsByRecord.entrySet().stream()
 				.collect(Collectors.toMap(entry -> entry.getValue().getId(), Map.Entry::getKey));
 		this.unacknowledgedRecordsByClientId.putAll(newRecordsByClientId);
 
-		return new CacheManipulationHandle<>(this, nextOperationSequenceNumber++, new ArrayList<>(uiRecordsByRecord.values()),
+		return new CacheManipulationHandle<>(new ArrayList<>(uiRecordsByRecord.values()),
 				() -> {
+					removeEldestEntries(this.recordsByClientId, Integer.MAX_VALUE, (id, record) -> {
+						return !newRecords.contains(record) // don't purge the new records!
+								&& purgeDecider.test(record, id);
+					});
 					this.recordsByClientId.putAll(newRecordsByClientId);
 					this.unacknowledgedRecordsByClientId.keySet().removeAll(newRecordsByClientId.keySet());
 				});
@@ -132,13 +126,13 @@ public CacheManipulationHandle<List<UIRECORD>> addRecords(List<RECORD> newRecord
 		purgeIfNeeded(newRecords.size());
 
 		LinkedHashMap<RECORD, UIRECORD> uiRecordsByRecord = createUiRecords(newRecords);
-		this.uiRecordsByRecord.putAll(uiRecordsByRecord.entrySet().stream().collect(StreamUtil.toLinkedHashMap(entry -> entry.getKey(), entry -> entry.getValue().getId())));
+		this.uiRecordsByRecord.putAll(uiRecordsByRecord.entrySet().stream().collect(StreamUtil.toLinkedHashMap(Map.Entry::getKey, entry -> entry.getValue().getId())));
 
 		Map<Integer, RECORD> newRecordsByClientId = uiRecordsByRecord.entrySet().stream()
 				.collect(Collectors.toMap(entry -> entry.getValue().getId(), Map.Entry::getKey));
 		this.unacknowledgedRecordsByClientId.putAll(newRecordsByClientId);
 
-		return new CacheManipulationHandle<>(this, nextOperationSequenceNumber++, new ArrayList<>(uiRecordsByRecord.values()),
+		return new CacheManipulationHandle<>(new ArrayList<>(uiRecordsByRecord.values()),
 				() -> {
 					recordsByClientId.putAll(newRecordsByClientId);
 					this.unacknowledgedRecordsByClientId.keySet().removeAll(newRecordsByClientId.keySet());
@@ -153,55 +147,15 @@ public CacheManipulationHandle<UIRECORD> addRecord(RECORD record) {
 		uiRecordsByRecord.put(record, uiRecord.getId());
 		this.unacknowledgedRecordsByClientId.put(uiRecord.getId(), record);
 
-		return new CacheManipulationHandle<>(this, nextOperationSequenceNumber++, uiRecord, () -> {
+		return new CacheManipulationHandle<>(uiRecord, () -> {
 			recordsByClientId.put(uiRecord.getId(), record);
 			unacknowledgedRecordsByClientId.remove(uiRecord.getId());
 		});
 	}
 
-	public CacheManipulationHandle<UIRECORD> addOrUpdateRecord(RECORD record) {
-		Integer oldUiRecord = getUiRecordIdOrNull(record);
-		UIRECORD newUiRecord = createUiRecord(record);
-		postProcessor.postProcess(record, newUiRecord, Collections.singletonMap(record, newUiRecord));
-		if (oldUiRecord != null) {
-			newUiRecord.setId(oldUiRecord);
-		} else {
-			purgeIfNeeded(1);
-		}
-
-		uiRecordsByRecord.put(record, newUiRecord.getId());
-		this.unacknowledgedRecordsByClientId.put(newUiRecord.getId(), record);
-
-		return new CacheManipulationHandle<>(this, nextOperationSequenceNumber++, newUiRecord, () -> {
-			recordsByClientId.put(newUiRecord.getId(), record);
-			unacknowledgedRecordsByClientId.remove(newUiRecord.getId());
-		});
-	}
-
 	public CacheManipulationHandle<Integer> removeRecord(RECORD record) {
 		Integer uiRecord = uiRecordsByRecord.remove(record);
-		return new CacheManipulationHandle<>(this, nextOperationSequenceNumber++, uiRecord, () -> recordsByClientId.remove(uiRecord));
-	}
-
-	public CacheManipulationHandle<List<Integer>> removeRecords(Collection<RECORD> recordToBeRemoved) {
-		List<Integer> removedUiIds = new ArrayList<>();
-		uiRecordsByRecord.entrySet().removeIf(entry -> {
-			boolean toBeRemoved = recordToBeRemoved.contains(entry.getKey());
-			if (toBeRemoved) {
-				removedUiIds.add(entry.getValue());
-			}
-			return toBeRemoved;
-		});
-		return new CacheManipulationHandle<>(this, nextOperationSequenceNumber++, removedUiIds, () -> recordsByClientId.entrySet().removeIf(entry -> removedUiIds.contains(entry.getKey())));
-	}
-
-	public void hardReplaceRecords(Map<RECORD, Integer> newRecords) {
-		this.uiRecordsByRecord.clear();
-		this.uiRecordsByRecord.putAll(newRecords);
-		this.recordsByClientId.clear();
-		this.recordsByClientId.putAll(newRecords.entrySet().stream().collect(Collectors.toMap(entry -> entry.getValue(), entry -> entry.getKey())));
-		this.unacknowledgedRecordsByClientId.clear();
-		this.operationInvalidationSequenceNumber = nextOperationSequenceNumber - 1;
+		return new CacheManipulationHandle<>(uiRecord, () -> recordsByClientId.remove(uiRecord));
 	}
 
 	private void purgeIfNeeded(int numberOfRecordsToBeAdded) {
@@ -210,9 +164,7 @@ private void purgeIfNeeded(int numberOfRecordsToBeAdded) {
 			List<Integer> removedClientRecordIds = removeEldestEntries(uiRecordsByRecord, numberOfRecordsToBeRemoved, purgeDecider);
 
 			if (purgeListener != null) {
-				purgeListener.handleCacheEntriesPurged(new CacheManipulationHandle<>(this, nextOperationSequenceNumber++, removedClientRecordIds, () -> {
-					recordsByClientId.keySet().removeAll(removedClientRecordIds);
-				}));
+				purgeListener.handleCacheEntriesPurged(new CacheManipulationHandle<>(removedClientRecordIds, () -> recordsByClientId.keySet().removeAll(removedClientRecordIds)));
 			}
 		}
 
@@ -235,27 +187,18 @@ private static <K, V> List<V> removeEldestEntries(LinkedHashMap<K, V> map, int n
 		return removedRecords;
 	}
 
-	@NotNull
 	private LinkedHashMap<RECORD, UIRECORD> createUiRecords(List<RECORD> newRecords) {
 		LinkedHashMap<RECORD, UIRECORD> uiRecordsByRecord = newRecords.stream()
-				.collect(StreamUtil.toLinkedHashMap(record -> record, record -> createUiRecord(record)));
+				.collect(StreamUtil.toLinkedHashMap(record -> record, this::createUiRecord));
 		uiRecordsByRecord.forEach((record, uiRecord) -> postProcessor.postProcess(record, uiRecord, uiRecordsByRecord));
 		return uiRecordsByRecord;
 	}
 
-	public int getMaxCapacity() {
-		return maxCapacity;
-	}
-
 	public void setMaxCapacity(int maxCapacity) {
 		this.maxCapacity = maxCapacity;
 		purgeIfNeeded(0);
 	}
 
-	public ClientRecordCachePurgeListener getPurgeListener() {
-		return purgeListener;
-	}
-
 	public void setPurgeListener(ClientRecordCachePurgeListener purgeListener) {
 		this.purgeListener = purgeListener;
 	}
@@ -266,18 +209,6 @@ private UIRECORD createUiRecord(RECORD record) {
 		return uiRecord;
 	}
 
-	public int getOperationInvalidationSequenceNumber() {
-		return operationInvalidationSequenceNumber;
-	}
-
-	public Map<Integer, RECORD> getAllRecords(boolean includingAcknowledged) {
-		var result =  new HashMap<>(recordsByClientId);
-		if (includingAcknowledged) {
-			result.putAll(unacknowledgedRecordsByClientId);
-		}
-		return result;
-	}
-
 	public interface UiIdentifiableClientRecordFactory<RECORD, UIRECORD> {
 		UIRECORD create(RECORD record);
 	}
@@ -286,10 +217,6 @@ public interface UiIdentifiableClientRecordPostProcessor<RECORD, UIRECORD> {
 		void postProcess(RECORD record, UIRECORD uiRecord, Map<RECORD, UIRECORD> allNewUiRecords);
 	}
 
-	public BiPredicate<RECORD, Integer> getPurgeDecider() {
-		return purgeDecider;
-	}
-
 	public void setPurgeDecider(BiPredicate<RECORD, Integer> purgeDecider) {
 		this.purgeDecider = purgeDecider;
 	}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/cache/ClientRecordCachePurgeListener.java b/teamapps-ux/src/main/java/org/teamapps/ux/cache/record/legacy/ClientRecordCachePurgeListener.java
similarity index 91%
rename from teamapps-ux/src/main/java/org/teamapps/ux/cache/ClientRecordCachePurgeListener.java
rename to teamapps-ux/src/main/java/org/teamapps/ux/cache/record/legacy/ClientRecordCachePurgeListener.java
index f58a4cd31..d0f5cd6c0 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/cache/ClientRecordCachePurgeListener.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/cache/record/legacy/ClientRecordCachePurgeListener.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,7 +17,7 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-package org.teamapps.ux.cache;
+package org.teamapps.ux.cache.record.legacy;
 
 import java.util.List;
 
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/cache/ClientTemplateCache.java b/teamapps-ux/src/main/java/org/teamapps/ux/cache/template/ClientTemplateCache.java
similarity index 97%
rename from teamapps-ux/src/main/java/org/teamapps/ux/cache/ClientTemplateCache.java
rename to teamapps-ux/src/main/java/org/teamapps/ux/cache/template/ClientTemplateCache.java
index 5ce3eb9dc..75453c5c0 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/cache/ClientTemplateCache.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/cache/template/ClientTemplateCache.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,7 +17,7 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-package org.teamapps.ux.cache;
+package org.teamapps.ux.cache.template;
 
 import org.teamapps.ux.component.field.combobox.TemplateDecider;
 import org.teamapps.ux.component.template.Template;
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/AbstractComponent.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/AbstractComponent.java
index 0e431c8a4..bbcbc16cb 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/AbstractComponent.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/AbstractComponent.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -21,14 +21,11 @@
 
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
+import org.teamapps.dto.UiClientObjectReference;
 import org.teamapps.dto.UiCommand;
 import org.teamapps.dto.UiComponent;
-import org.teamapps.dto.UiComponentReference;
 import org.teamapps.dto.UiRootPanel;
 import org.teamapps.event.Event;
-import org.teamapps.ux.component.absolutelayout.Length;
-import org.teamapps.ux.component.format.Shadow;
-import org.teamapps.ux.component.format.Spacing;
 import org.teamapps.ux.component.rootpanel.RootPanel;
 import org.teamapps.ux.css.CssStyles;
 import org.teamapps.ux.session.CurrentSessionContext;
@@ -41,31 +38,41 @@
 
 public abstract class AbstractComponent implements Component {
 
+	public static final String DELETED_ATTRIBUTE = "__ta-deleted-attribute__";
+
+	private enum RenderingState {
+		NOT_RENDERED,
+		RENDERING,
+		RENDERED
+	}
+
 	private final static Logger LOGGER = LoggerFactory.getLogger(AbstractComponent.class);
 
-	public final Event<Void> onDestroyed = new Event<>();
 	public final Event<Void> onRendered = new Event<>();
 
-//	public final Event<Boolean> onEffectiveVisibilityChanged = new Event<>();
-
-	private String id;
-	private SessionContext sessionContext;
-	private boolean rendered;
-	private Container container;
-	private boolean destroyed = false;
+	private String debuggingId;
+	private final String id;
+	private final SessionContext sessionContext;
+	private RenderingState renderingState = RenderingState.NOT_RENDERED;
+	private Component parent;
 
 	private boolean visible = true;
-	private Map<String, CssStyles> stylesBySelector = new HashMap<>(0);
+	private final Map<String, Map<String, Boolean>> cssClassesBySelector = new HashMap<>(0);
+	private final Map<String, CssStyles> stylesBySelector = new HashMap<>(0);
+	private final Map<String, Map<String, String>> attributesBySelector = new HashMap<>(0);
 
 	public AbstractComponent() {
 		this.sessionContext = CurrentSessionContext.get();
 		id = getClass().getSimpleName() + "-" + UUID.randomUUID().toString();
-		sessionContext.onDestroyed().addListener(aVoid -> this.destroy());
 	}
 
 	protected void mapAbstractUiComponentProperties(UiComponent uiComponent) {
+		uiComponent.setId(id);
+		uiComponent.setDebuggingId(debuggingId);
 		uiComponent.setVisible(visible);
 		uiComponent.setStylesBySelector((Map) stylesBySelector);
+		uiComponent.setClassNamesBySelector(cssClassesBySelector);
+		uiComponent.setAttributesBySelector(attributesBySelector);
 	}
 
 	@Override
@@ -73,14 +80,13 @@ public String getId() {
 		return id;
 	}
 
-	@Override
 	public SessionContext getSessionContext() {
 		return sessionContext;
 	}
 
 	@Override
 	public boolean isRendered() {
-		return rendered;
+		return renderingState == RenderingState.RENDERED;
 	}
 
 	@Override
@@ -90,43 +96,16 @@ public boolean isVisible() {
 
 	@Override
 	public void setVisible(boolean visible) {
+		boolean changed = visible != this.visible;
 		this.visible = visible;
-		queueCommandIfRendered(() -> new UiComponent.SetVisibleCommand(getId(), visible));
-	}
-
-	@Override
-	public boolean isEffectivelyVisible() {
-		return isRendered() && isVisible() && getParent() != null && getParent().isChildVisible(this);
-	}
-
-	@Override
-	public boolean isDestroyed() {
-		return destroyed;
-	}
-
-	@Override
-	public final void destroy() {
-		if (!destroyed) {
-			if (isRendered()) {
-				unrender();
-			}
-			this.destroyed = true;
-			this.doDestroy();
-			this.onDestroyed.fire(null);
-//			onEffectiveVisibilityChanged.fire(true);  //todo #visibility
+		if (changed) {
+			queueCommandIfRendered(() -> new UiComponent.SetVisibleCommand(getId(), visible));
 		}
 	}
 
-	/**
-	 * Override this method to release resources whenever this component gets destroyed
-	 */
-	protected void doDestroy() {
-		// do nothing
-	}
-
 	@Override
 	public final void render() {
-		if (rendered) {
+		if (renderingState == RenderingState.RENDERED) {
 			return; // already rendered!
 		}
 		if (!(this instanceof RootPanel) && this.getParent() == null) {
@@ -134,82 +113,108 @@ public final void render() {
 					+ "themselves as \"parent\" of their children.");
 		}
 		LOGGER.debug("render: " + getId());
-		sessionContext.registerComponent(this);
+		sessionContext.registerClientObject(this);
+
+		this.renderingState = RenderingState.RENDERING;
 		UiComponent uiComponent = createUiComponent();
 		sessionContext.queueCommand(new UiRootPanel.CreateComponentCommand(uiComponent));
-		rendered = true; // after queuing creation! otherwise commands might be queued for this component before it creation is queued!
+		this.renderingState = RenderingState.RENDERED; // NOTE: after queuing creation! otherwise commands might be queued for this component before it creation is queued!
 		onRendered.fire(null);
 	}
 
 	@Override
 	public final void unrender() {
-		sessionContext.unregisterComponent(this);
-		sessionContext.queueCommand(new UiRootPanel.DestroyComponentCommand(createUiComponentReference()));
+		sessionContext.queueCommand(new UiRootPanel.DestroyComponentCommand(getId()),
+				// unregister only after the ui destroyed the object!
+				unused -> sessionContext.unregisterClientObject(this));
+		renderingState = RenderingState.NOT_RENDERED;
 	}
 
 	abstract public UiComponent createUiComponent();
 
 	@Override
-	public UiComponentReference createUiComponentReference() {
-		LOGGER.debug("createUiComponentReference: " + getId());
+	public UiClientObjectReference createUiReference() {
+		LOGGER.debug("createUiClientObjectReference: " + getId());
 		if (!isRendered()) {
 			render();
 		}
-		return new UiComponentReference(getId());
+		return new UiClientObjectReference(getId());
 	}
 
+	/**
+	 * Completely removes and rerenders the component on the client side, loosing any state that is not reflected on the server side.
+	 * This method should be regarded as dangerous, since many components depend on state (data caches, user interaction state) that is
+	 * not controlled by the server and will get lost when invoking this method.
+	 * <p>
+	 * Historically, this method was used as a lazy implementation of changing a configuration option, when this change was not implemented
+	 * on the client side.
+	 * @deprecated Use explicit ui commands instead.
+	 */
+	@Deprecated
 	public void reRenderIfRendered() {
-		if (rendered) {
+		if (renderingState == RenderingState.RENDERED) {
 			sessionContext.queueCommand(new UiRootPanel.RefreshComponentCommand(createUiComponent()));
 		}
 	}
 
-	protected void queueCommandIfRendered(Supplier<UiCommand> commandSupplier) {
-		if (rendered) {
+	protected void queueCommandIfRendered(Supplier<UiCommand<?>> commandSupplier) {
+		if (renderingState == RenderingState.RENDERED) {
 			sessionContext.queueCommand(commandSupplier.get());
+		} else if (renderingState == RenderingState.RENDERING) {
+			/*
+			This accounts for a very rare case. A component that is rendering itself may, while one of its children is rendered, be changed due to a thrown event. This change must be transported to the client
+			as command (since the corresponding setter of the parent's UiComponent has possibly already been set). However, this command must be enqueued after the component is rendered on the client
+			side! Therefore, sending the command must be forcibly enqueued.
+
+			Example: A panel contains a table. The panel's title is bound to the table's "count" ObservableValue. When the panel is rendered, the table also is rendered (as part of rendering the
+			panel). While rendering, the table sets its "count" value, so the panel's title is changed. However, the UiPanel's setTitle() method already has been invoked, so the change will not have
+			any effect on the initialization of the UiPanel. Therefore, the change must be sent as a command. Sending the command directly however would make it arrive at the client before
+			the panel was rendered (which is only after completing its createUiComponent() method).
+			 */
+			sessionContext.runWithContext(() -> {
+				sessionContext.queueCommand(commandSupplier.get());
+			}, true);
 		}
 	}
 
 	@Override
-	public void setMinWidth(Length minWidth) {
-		setCssStyle("min-width", minWidth.toCssString());
-	}
-
-	@Override
-	public void setMaxWidth(Length maxWidth) {
-		setCssStyle("max-width", maxWidth.toCssString());
-	}
-
-	@Override
-	public void setMinHeight(Length minHeight) {
-		setCssStyle("min-height", minHeight.toCssString());
-	}
+	public void setCssStyle(String selector, String propertyName, String value) {
+		if (selector == null) {
+			selector = "";
+		}
+		CssStyles styles = this.stylesBySelector.computeIfAbsent(selector, s -> new CssStyles());
+		styles.put(propertyName, value);
 
-	@Override
-	public void setMaxHeight(Length maxHeight) {
-		setCssStyle("max-height", maxHeight.toCssString());
+		final String selector2 = selector;
+		queueCommandIfRendered(() -> new UiComponent.SetStyleCommand(getId(), selector2, styles));
 	}
 
 	@Override
-	public void setMargin(Spacing margin) {
-		setCssStyle("margin", margin.toCssString());
-	}
+	public void toggleCssClass(String selector, String className, boolean enabled) {
+		if (selector == null) {
+			selector = "";
+		}
+		Map<String, Boolean> classNames = cssClassesBySelector.computeIfAbsent(selector, s -> new HashMap<>());
+		classNames.put(className, enabled);
 
-	@Override
-	public void setShadow(Shadow shadow) {
-		setCssStyle("box-shadow", shadow.toCssString());
+		final String selector2 = selector;
+		queueCommandIfRendered(() -> new UiComponent.SetClassNamesCommand(getId(), selector2, classNames));
 	}
 
 	@Override
-	public void setCssStyle(String selector, String propertyName, String value) {
+	public void setAttribute(String selector, String attributeName, String value) {
 		if (selector == null) {
 			selector = "";
 		}
-		CssStyles styles = this.stylesBySelector.computeIfAbsent(selector, s -> new CssStyles());
-		styles.put(propertyName, value);
+		Map<String, String> attributes = this.attributesBySelector.computeIfAbsent(selector, s -> new HashMap<>());
+		if (value != null) {
+			attributes.put(attributeName, value);
+		} else {
+			attributes.put(attributeName, DELETED_ATTRIBUTE);
+		}
 
 		final String selector2 = selector;
-		queueCommandIfRendered(() -> new UiComponent.SetStyleCommand(getId(), selector2, styles));
+		queueCommandIfRendered(() -> new UiComponent.SetAttributesCommand(getId(), selector2, attributes));
 	}
 
 	//	@Override
@@ -223,17 +228,25 @@ public void setCssStyle(String selector, String propertyName, String value) {
 //	}
 
 	@Override
-	public void setParent(Container container) {
-		this.container = container;
+	public void setParent(Component container) {
+		this.parent = container;
 	}
 
 	@Override
-	public Container getParent() {
-		return container;
+	public Component getParent() {
+		return parent;
 	}
 
 	@Override
 	public String toString() {
 		return id;
 	}
+
+	public String getDebuggingId() {
+		return debuggingId != null ? debuggingId : id;
+	}
+
+	public void setDebuggingId(String debuggingId) {
+		this.debuggingId = debuggingId;
+	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/AbstractCompositeComponent.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/AbstractCompositeComponent.java
new file mode 100644
index 000000000..ce862f92a
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/AbstractCompositeComponent.java
@@ -0,0 +1,101 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component;
+
+import org.teamapps.dto.UiClientObjectReference;
+
+/**
+ * A base class that can be used by application developers in order to create their own components that consist of a composition of
+ * other components.
+ * <p>
+ * Example: A VerticalLayout containing toolbar with three buttons and a table, interacting in a certain manner.
+ * <p>
+ * Using this superclass, the composite component is a {@link Component} but not a VerticalLayout (see example above).
+ * <p>
+ * In particular, this means that this component can be used in the same way as any other component, including being added as child
+ * to other components.
+ */
+public abstract class AbstractCompositeComponent implements Component {
+
+	/**
+	 * @return the top-level component of this composite component
+	 */
+	abstract public Component getMainComponent();
+
+	@Override
+	public String getId() {
+		return getMainComponent().getId();
+	}
+
+	@Override
+	public void render() {
+		getMainComponent().render();
+	}
+
+	@Override
+	public void unrender() {
+		getMainComponent().unrender();
+	}
+
+	@Override
+	public boolean isRendered() {
+		return getMainComponent().isRendered();
+	}
+
+	@Override
+	public UiClientObjectReference createUiReference() {
+		return getMainComponent().createUiReference();
+	}
+
+	@Override
+	public void setParent(Component container) {
+		getMainComponent().setParent(container);
+	}
+
+	@Override
+	public Component getParent() {
+		return getMainComponent().getParent();
+	}
+
+	@Override
+	public boolean isVisible() {
+		return getMainComponent().isVisible();
+	}
+
+	@Override
+	public void setVisible(boolean visible) {
+		getMainComponent().setVisible(visible);
+	}
+
+	@Override
+	public void toggleCssClass(String selector, String className, boolean enabled) {
+		getMainComponent().toggleCssClass(selector, className, enabled);
+	}
+
+	@Override
+	public void setCssStyle(String selector, String propertyName, String value) {
+		getMainComponent().setCssStyle(selector, propertyName, value);
+	}
+
+	@Override
+	public void setAttribute(String selector, String attributeName, String value) {
+		getMainComponent().setAttribute(selector, attributeName, value);
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/ClientObject.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/ClientObject.java
new file mode 100644
index 000000000..fc879ae14
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/ClientObject.java
@@ -0,0 +1,53 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component;
+
+import org.teamapps.dto.UiClientObjectReference;
+import org.teamapps.dto.UiEvent;
+import org.teamapps.dto.UiQuery;
+
+/**
+ * A client object has a representation on the client.
+ * This representation is said to be rendered when the client holds a corresponding instance of it.
+ * The server and the client refer to the {@link ClientObject} using the id (a UUID).
+ */
+public interface ClientObject {
+
+	String getId();
+
+	void render();
+
+	void unrender();
+
+	boolean isRendered();
+
+	/**
+	 * Creates a ui reference to a client object.
+	 * Ui references are just a simple way to reference objects on the client side.
+	 */
+	UiClientObjectReference createUiReference();
+
+	default void handleUiEvent(UiEvent event) {
+	}
+
+	default Object handleUiQuery(UiQuery query) {
+		return null;
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/Component.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/Component.java
index ab6dccf0a..c3ebc2166 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/Component.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/Component.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,71 +19,83 @@
  */
 package org.teamapps.ux.component;
 
-import org.teamapps.dto.UiComponentReference;
-import org.teamapps.dto.UiEvent;
+import org.teamapps.dto.UiClientObjectReference;
 import org.teamapps.ux.component.absolutelayout.Length;
 import org.teamapps.ux.component.format.Shadow;
 import org.teamapps.ux.component.format.Spacing;
-import org.teamapps.ux.session.SessionContext;
 
-public interface Component {
+public interface Component extends ClientObject {
 
 	/**
 	 * Used internally for setting the component's container. May only be invoked by the new container!!
 	 */
-	void setParent(Container container);
+	void setParent(Component container);
 
-	Container getParent();
+	Component getParent();
 
-	String getId();
+	boolean isVisible();
 
-	SessionContext getSessionContext();
+	void setVisible(boolean visible);
 
-	void render();
+	// ===== CSS =====
 
-	void unrender();
+	void toggleCssClass(String selector, String className, boolean enabled);
 
-	UiComponentReference createUiComponentReference();
+	default void toggleCssClass(String className, boolean enabled) {
+		toggleCssClass(null, className, enabled);
+	}
 
-	boolean isRendered();
+	void setCssStyle(String selector, String propertyName, String value);
 
-	void handleUiEvent(UiEvent event);
+	default void setCssStyle(String propertyName, String value) {
+		setCssStyle(null, propertyName, value);
+	}
 
-	boolean isDestroyed();
+	void setAttribute(String selector, String attributeName, String value);
 
-	void destroy();
+	default void setAttribute(String attributeName, String value) {
+		setAttribute(null, attributeName, value);
+	}
 
-	boolean isVisible();
+	default void setMinWidth(Length minWidth) {
+		setCssStyle("min-width", minWidth.toCssString());
+	}
 
-	void setVisible(boolean visible);
+	default void setMaxWidth(Length maxWidth) {
+		setCssStyle("max-width", maxWidth.toCssString());
+	}
 
-	boolean isEffectivelyVisible();
+	default void setMinHeight(Length minHeight) {
+		setCssStyle("min-height", minHeight.toCssString());
+	}
 
-	// ===== CSS =====
+	default void setMaxHeight(Length maxHeight) {
+		setCssStyle("max-height", maxHeight.toCssString());
+	}
 
-	void setMinWidth(Length minWidth);
-	void setMaxWidth(Length maxWidth);
-	void setMinHeight(Length minHeight);
-	void setMaxHeight(Length maxHeight);
-	void setMargin(Spacing margin);
-	void setShadow(Shadow shadow);
+	default void setMargin(Spacing margin) {
+		setCssStyle("margin", margin.toCssString());
+	}
 
-	void setCssStyle(String selector, String propertyName, String value);
-	
-	default void setCssStyle(String propertyName, String value) {
-		setCssStyle(null, propertyName, value);
+	default void setShadow(Shadow shadow) {
+		setCssStyle("box-shadow", shadow.toCssString());
 	}
 
-//	void updateEffectiveVisibility();
-//	Event<Boolean> onEffectiveVisibilityChanged();
+	default void setAriaLabel(String ariaLabel) {
+		setAttribute("aria-label", ariaLabel);
+	}
+
+	default void setHtmlTitle(String title) {
+		setAttribute("title", title);
+	}
 
 	// == static methods ==
 
-	static UiComponentReference createUiComponentReference(Component component) {
+	static UiClientObjectReference createUiClientObjectReference(Component component) {
 		if (component == null) {
 			return null;
 		}
-		return component.createUiComponentReference();
+		return component.createUiReference();
 	}
 
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/Container.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/Container.java
deleted file mode 100644
index 8fef5df38..000000000
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/Container.java
+++ /dev/null
@@ -1,33 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.ux.component;
-
-public interface Container extends Component {
-
-	default boolean isChildVisible(Component child) {
-		return isEffectivelyVisible(); // overwrite for more sophisticated handling
-	}
-
-	//	TODO #focus
-//	@Override
-//	public void handleDescendantFocused(Component directChild, Component focusedComponent) {
-//	}
-
-}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/absolutelayout/AbsoluteLayout.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/absolutelayout/AbsoluteLayout.java
index aa05fd3fd..ec55b3ac1 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/absolutelayout/AbsoluteLayout.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/absolutelayout/AbsoluteLayout.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -68,7 +68,7 @@ private List<UiAbsolutePositionedComponent> createUiAbsolutePositionedComponents
 				.map(entry -> {
 					Component component = entry.getKey();
 					AbsolutePosition position = entry.getValue();
-					return new UiAbsolutePositionedComponent(component.createUiComponentReference(), new UiAbsolutePositioning(
+					return new UiAbsolutePositionedComponent(component.createUiReference(), new UiAbsolutePositioning(
 							position.getTop() != null ? position.getTop().toCssString(): null,
 							position.getRight() != null ? position.getRight().toCssString(): null,
 							position.getBottom() != null ? position.getBottom().toCssString(): null,
@@ -83,7 +83,7 @@ private List<UiAbsolutePositionedComponent> createUiAbsolutePositionedComponents
 
 	@Override
 	public UiAbsoluteLayout createUiComponent() {
-		UiAbsoluteLayout uiAbsoluteLayout = new UiAbsoluteLayout(getId());
+		UiAbsoluteLayout uiAbsoluteLayout = new UiAbsoluteLayout();
 		mapAbstractUiComponentProperties(uiAbsoluteLayout);
 		uiAbsoluteLayout.setComponents(createUiAbsolutePositionedComponents());
 		return uiAbsoluteLayout;
@@ -94,11 +94,6 @@ public void handleUiEvent(UiEvent event) {
 		// none
 	}
 
-	@Override
-	protected void doDestroy() {
-		positionsByComponent.keySet().forEach(component -> component.destroy());
-	}
-
 	public AnimationEasing getAnimationEasing() {
 		return animationEasing;
 	}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/absolutelayout/AbsolutePosition.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/absolutelayout/AbsolutePosition.java
index 2870b8ffd..e4d6968b8 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/absolutelayout/AbsolutePosition.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/absolutelayout/AbsolutePosition.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/absolutelayout/AnimationEasing.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/absolutelayout/AnimationEasing.java
index 6581e3670..ff4d3f296 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/absolutelayout/AnimationEasing.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/absolutelayout/AnimationEasing.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/absolutelayout/Length.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/absolutelayout/Length.java
index dec22250e..be5f5f7ab 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/absolutelayout/Length.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/absolutelayout/Length.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -21,9 +21,24 @@
 
 public class Length {
 
+	public static final Length AUTO = new Length(-1) {
+		@Override
+		public String toCssString() {
+			return "auto";
+		}
+	};
+
 	private final float size;
 	private final SizeUnit unit;
 
+	public static Length ofPixels(int pixels) {
+		return new Length(pixels, SizeUnit.PIXEL);
+	}
+
+	public static Length ofPercent(int percent) {
+		return new Length(percent, SizeUnit.PERCENT);
+	}
+
 	public Length(float size) {
 		this(size, SizeUnit.PIXEL);
 	}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/absolutelayout/SizeUnit.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/absolutelayout/SizeUnit.java
index e5e1adf88..a4ac2fb46 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/absolutelayout/SizeUnit.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/absolutelayout/SizeUnit.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/animation/EntranceAnimation.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/animation/EntranceAnimation.java
new file mode 100644
index 000000000..239e7b05b
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/animation/EntranceAnimation.java
@@ -0,0 +1,78 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.animation;
+
+import org.teamapps.dto.UiEntranceAnimation;
+
+public enum EntranceAnimation {
+	BACK_IN_DOWN,
+	BACK_IN_LEFT,
+	BACK_IN_RIGHT,
+	BACK_IN_UP,
+
+	LIGHT_SPEED_IN_RIGHT,
+	LIGHT_SPEED_IN_LEFT,
+	JACK_IN_THE_BOX,
+	ROLL_IN,
+
+	ZOOM_IN,
+	ZOOM_IN_DOWN,
+	ZOOM_IN_LEFT,
+	ZOOM_IN_RIGHT,
+	ZOOM_IN_UP,
+
+	SLIDE_IN_UP,
+	SLIDE_IN_DOWN,
+	SLIDE_IN_LEFT,
+	SLIDE_IN_RIGHT,
+
+	ROTATE_IN,
+	ROTATE_IN_DOWNLEFT,
+	ROTATE_IN_DOWNRIGHT,
+	ROTATE_IN_UPLEFT,
+	ROTATE_IN_UPRIGHT,
+
+	FLIP_IN_X,
+	FLIP_IN_Y,
+
+	FADE_IN,
+	FADE_IN_DOWN,
+	FADE_IN_DOWNBIG,
+	FADE_IN_LEFT,
+	FADE_IN_LEFTBIG,
+	FADE_IN_RIGHT,
+	FADE_IN_RIGHTBIG,
+	FADE_IN_UP,
+	FADE_IN_UPBIG,
+	FADE_IN_TOP_LEFT,
+	FADE_IN_TOP_RIGHT,
+	FADE_IN_BOTTOM_LEFT,
+	FADE_IN_BOTTOM_RIGHT,
+
+	BOUNCE_IN,
+	BOUNCE_IN_DOWN,
+	BOUNCE_IN_LEFT,
+	BOUNCE_IN_RIGHT,
+	BOUNCE_IN_UP;
+
+	public UiEntranceAnimation toUiEntranceAnimation() {
+		return UiEntranceAnimation.valueOf(name());
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/animation/ExitAnimation.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/animation/ExitAnimation.java
new file mode 100644
index 000000000..a920fc62a
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/animation/ExitAnimation.java
@@ -0,0 +1,78 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.animation;
+
+import org.teamapps.dto.UiExitAnimation;
+
+public enum ExitAnimation {
+	BACK_OUT_DOWN,
+	BACK_OUT_LEFT,
+	BACK_OUT_RIGHT,
+	BACK_OUT_UP,
+
+	LIGHT_SPEED_OUT_RIGHT,
+	LIGHT_SPEED_OUT_LEFT,
+	ROLL_OUT,
+	HINGE,
+
+	ZOOM_OUT,
+	ZOOM_OUT_DOWN,
+	ZOOM_OUT_LEFT,
+	ZOOM_OUT_RIGHT,
+	ZOOM_OUT_UP,
+
+	SLIDE_OUT_UP,
+	SLIDE_OUT_DOWN,
+	SLIDE_OUT_LEFT,
+	SLIDE_OUT_RIGHT,
+
+	ROTATE_OUT,
+	ROTATE_OUT_DOWNLEFT,
+	ROTATE_OUT_DOWNRIGHT,
+	ROTATE_OUT_UPLEFT,
+	ROTATE_OUT_UPRIGHT,
+
+	FLIP_OUT_X,
+	FLIP_OUT_Y,
+
+	FADE_OUT,
+	FADE_OUT_DOWN,
+	FADE_OUT_DOWNBIG,
+	FADE_OUT_LEFT,
+	FADE_OUT_LEFTBIG,
+	FADE_OUT_RIGHT,
+	FADE_OUT_RIGHTBIG,
+	FADE_OUT_UP,
+	FADE_OUT_UPBIG,
+	FADE_OUT_TOP_LEFT,
+	FADE_OUT_TOP_RIGHT,
+	FADE_OUT_BOTTOM_RIGHT,
+	FADE_OUT_BOTTOM_LEFT,
+
+	BOUNCE_OUT,
+	BOUNCE_OUT_DOWN,
+	BOUNCE_OUT_LEFT,
+	BOUNCE_OUT_RIGHT,
+	BOUNCE_OUT_UP;
+
+	public UiExitAnimation toUiExitAnimation() {
+		return UiExitAnimation.valueOf(name());
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/animation/PageTransition.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/animation/PageTransition.java
new file mode 100644
index 000000000..a6724990b
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/animation/PageTransition.java
@@ -0,0 +1,93 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.animation;
+
+import org.teamapps.dto.UiPageTransition;
+
+public enum PageTransition {
+	MOVE_TO_LEFT_VS_MOVE_FROM_RIGHT,
+	MOVE_TO_RIGHT_VS_MOVE_FROM_LEFT,
+	MOVE_TO_TOP_VS_MOVE_FROM_BOTTOM,
+	MOVE_TO_BOTTOM_VS_MOVE_FROM_TOP,
+	FADE_VS_MOVE_FROM_RIGHT,
+	FADE_VS_MOVE_FROM_LEFT,
+	FADE_VS_MOVE_FROM_BOTTOM,
+	FADE_VS_MOVE_FROM_TOP,
+	MOVE_TO_LEFT_FADE_VS_MOVE_FROM_RIGHT_FADE,
+	MOVE_TO_RIGHT_FADE_VS_MOVE_FROM_LEFT_FADE,
+	MOVE_TO_TOP_FADE_VS_MOVE_FROM_BOTTOM_FADE,
+	MOVE_TO_BOTTOM_FADE_VS_MOVE_FROM_TOP_FADE,
+	SCALE_DOWN_VS_MOVE_FROM_RIGHT,
+	SCALE_DOWN_VS_MOVE_FROM_LEFT,
+	SCALE_DOWN_VS_MOVE_FROM_BOTTOM,
+	SCALE_DOWN_VS_MOVE_FROM_TOP,
+	SCALE_DOWN_VS_SCALE_UP_DOWN,
+	SCALE_DOWN_UP_VS_SCALE_UP,
+	MOVE_TO_LEFT_VS_SCALE_UP,
+	MOVE_TO_RIGHT_VS_SCALE_UP,
+	MOVE_TO_TOP_VS_SCALE_UP,
+	MOVE_TO_BOTTOM_VS_SCALE_UP,
+	SCALE_DOWN_CENTER_VS_SCALE_UP_CENTER,
+	ROTATE_RIGHT_SIDE_FIRST_VS_MOVE_FROM_RIGHT,
+	ROTATE_LEFT_SIDE_FIRST_VS_MOVE_FROM_LEFT,
+	ROTATE_TOP_SIDE_FIRST_VS_MOVE_FROM_TOP,
+	ROTATE_BOTTOM_SIDE_FIRST_VS_MOVE_FROM_BOTTOM,
+	FLIP_OUT_RIGHT_VS_FLIP_IN_LEFT,
+	FLIP_OUT_LEFT_VS_FLIP_IN_RIGHT,
+	FLIP_OUT_TOP_VS_FLIP_IN_BOTTOM,
+	FLIP_OUT_BOTTOM_VS_FLIP_IN_TOP,
+	ROTATE_FALL_VS_SCALE_UP,
+	ROTATE_OUT_NEWSPAPER_VS_ROTATE_IN_NEWSPAPER,
+	ROTATE_PUSH_LEFT_VS_MOVE_FROM_RIGHT,
+	ROTATE_PUSH_RIGHT_VS_MOVE_FROM_LEFT,
+	ROTATE_PUSH_TOP_VS_MOVE_FROM_BOTTOM,
+	ROTATE_PUSH_BOTTOM_VS_MOVE_FROM_TOP,
+	ROTATE_PUSH_LEFT_VS_ROTATE_PULL_RIGHT,
+	ROTATE_PUSH_RIGHT_VS_ROTATE_PULL_LEFT,
+	ROTATE_PUSH_TOP_VS_ROTATE_PULL_BOTTOM,
+	ROTATE_PUSH_BOTTOM_VS_ROTATE_PULL_TOP,
+	ROTATE_FOLD_LEFT_VS_MOVE_FROM_RIGHT_FADE,
+	ROTATE_FOLD_RIGHT_VS_MOVE_FROM_LEFT_FADE,
+	ROTATE_FOLD_TOP_VS_MOVE_FROM_BOTTOM_FADE,
+	ROTATE_FOLD_BOTTOM_VS_MOVE_FROM_TOP_FADE,
+	MOVE_TO_RIGHT_FADE_VS_ROTATE_UNFOLD_LEFT,
+	MOVE_TO_LEFT_FADE_VS_ROTATE_UNFOLD_RIGHT,
+	MOVE_TO_BOTTOM_FADE_VS_ROTATE_UNFOLD_TOP,
+	MOVE_TO_TOP_FADE_VS_ROTATE_UNFOLD_BOTTOM,
+	ROTATE_ROOM_LEFT_OUT_VS_ROTATE_ROOM_LEFT_IN,
+	ROTATE_ROOM_RIGHT_OUT_VS_ROTATE_ROOM_RIGHT_IN,
+	ROTATE_ROOM_TOP_OUT_VS_ROTATE_ROOM_TOP_IN,
+	ROTATE_ROOM_BOTTOM_OUT_VS_ROTATE_ROOM_BOTTOM_IN,
+	ROTATE_CUBE_LEFT_OUT_VS_ROTATE_CUBE_LEFT_IN,
+	ROTATE_CUBE_RIGHT_OUT_VS_ROTATE_CUBE_RIGHT_IN,
+	ROTATE_CUBE_TOP_OUT_VS_ROTATE_CUBE_TOP_IN,
+	ROTATE_CUBE_BOTTOM_OUT_VS_ROTATE_CUBE_BOTTOM_IN,
+	ROTATE_CAROUSEL_LEFT_OUT_VS_ROTATE_CAROUSEL_LEFT_IN,
+	ROTATE_CAROUSEL_RIGHT_OUT_VS_ROTATE_CAROUSEL_RIGHT_IN,
+	ROTATE_CAROUSEL_TOP_OUT_VS_ROTATE_CAROUSEL_TOP_IN,
+	ROTATE_CAROUSEL_BOTTOM_OUT_VS_ROTATE_CAROUSEL_BOTTOM_IN,
+	ROTATE_SIDES_OUT_VS_ROTATE_SIDES_IN,
+	ROTATE_SLIDE_OUT_VS_ROTATE_SLIDE_IN;
+
+	public UiPageTransition toUiPageTransition() {
+		return UiPageTransition.valueOf(name());
+	}
+}
+
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/animation/RepeatableAnimation.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/animation/RepeatableAnimation.java
new file mode 100644
index 000000000..4835fbc84
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/animation/RepeatableAnimation.java
@@ -0,0 +1,46 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.animation;
+
+import org.teamapps.dto.UiRepeatableAnimation;
+
+public enum RepeatableAnimation {
+
+	BOUNCE,
+	FLASH,
+	PULSE,
+	RUBBER_BAND,
+	SHAKE_X,
+	SHAKE_Y,
+	HEAD_SHAKE,
+	SWING,
+	TADA,
+	WOBBLE,
+	JELLO,
+	HEART_BEAT,
+	FLIP,
+	BLINK,
+	BLINK_SUBTLE;
+
+	public UiRepeatableAnimation toUiRepeatableAnimation() {
+		return UiRepeatableAnimation.valueOf(name());
+	}
+
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/audiolevelindicator/AudioLevelIndicator.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/audiolevelindicator/AudioLevelIndicator.java
new file mode 100644
index 000000000..ca3465e10
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/audiolevelindicator/AudioLevelIndicator.java
@@ -0,0 +1,52 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.audiolevelindicator;
+
+import org.teamapps.dto.UiAudioLevelIndicator;
+import org.teamapps.dto.UiComponent;
+import org.teamapps.ux.component.AbstractComponent;
+
+public class AudioLevelIndicator extends AbstractComponent {
+
+	private String deviceId;
+	private int barWidth = 1;
+
+	@Override
+	public UiComponent createUiComponent() {
+		UiAudioLevelIndicator ui = new UiAudioLevelIndicator();
+		mapAbstractUiComponentProperties(ui);
+		ui.setDeviceId(this.deviceId);
+		ui.setBarWidth(this.barWidth);
+		return ui;
+	}
+
+	public void setDeviceId(String deviceId) {
+		this.deviceId = deviceId;
+		queueCommandIfRendered(() -> new UiAudioLevelIndicator.SetDeviceIdCommand(getId(), deviceId));
+	}
+
+	public void setBarWidth(int barWidth) {
+		boolean changed = barWidth != this.barWidth;
+		this.barWidth = barWidth;
+		if (changed) {
+			reRenderIfRendered();
+		}
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/calendar/AbstractCalendarEvent.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/calendar/AbstractCalendarEvent.java
new file mode 100644
index 000000000..ddc521367
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/calendar/AbstractCalendarEvent.java
@@ -0,0 +1,122 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.calendar;
+
+import org.teamapps.common.format.Color;
+
+import java.time.Instant;
+
+public class AbstractCalendarEvent implements CalendarEvent {
+
+	private long start;
+	private long end;
+	private boolean allDay;
+	private boolean allowDragOperations;
+	private Color backgroundColor;
+	private Color borderColor;
+	private CalendarEventRenderingStyle rendering = CalendarEventRenderingStyle.DEFAULT;
+
+	public AbstractCalendarEvent(Instant start, Instant end) {
+		this.start = start.toEpochMilli();
+		this.end = end.toEpochMilli();
+	}
+
+	public AbstractCalendarEvent(long start, long end) {
+		this.start = start;
+		this.end = end;
+	}
+
+	@Override
+	public String toString() {
+		return "AbstractCalendarEvent{" +
+				"start=" + start +
+				", end=" + end +
+				", allDay=" + allDay +
+				", allowDragOperations=" + allowDragOperations +
+				", backgroundColor=" + backgroundColor +
+				", borderColor=" + borderColor +
+				", rendering=" + rendering +
+				'}';
+	}
+
+	@Override
+	public long getStart() {
+		return start;
+	}
+
+	public void setStart(long start) {
+		this.start = start;
+	}
+
+	@Override
+	public long getEnd() {
+		return end;
+	}
+
+	public void setEnd(long end) {
+		this.end = end;
+	}
+
+	@Override
+	public boolean isAllDay() {
+		return allDay;
+	}
+
+	public void setAllDay(boolean allDay) {
+		this.allDay = allDay;
+	}
+
+	@Override
+	public boolean isAllowDragOperations() {
+		return allowDragOperations;
+	}
+
+	public void setAllowDragOperations(boolean allowDragOperations) {
+		this.allowDragOperations = allowDragOperations;
+	}
+
+	@Override
+	public Color getBackgroundColor() {
+		return backgroundColor;
+	}
+
+	public void setBackgroundColor(Color backgroundColor) {
+		this.backgroundColor = backgroundColor;
+	}
+
+	@Override
+	public Color getBorderColor() {
+		return borderColor;
+	}
+
+	public void setBorderColor(Color borderColor) {
+		this.borderColor = borderColor;
+	}
+
+	@Override
+	public CalendarEventRenderingStyle getRendering() {
+		return rendering;
+	}
+
+	public void setRendering(CalendarEventRenderingStyle rendering) {
+		this.rendering = rendering;
+	}
+
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/calendar/AbstractCalendarModel.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/calendar/AbstractCalendarModel.java
index f294f56a8..5222fdcee 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/calendar/AbstractCalendarModel.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/calendar/AbstractCalendarModel.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -21,12 +21,12 @@
 
 import org.teamapps.event.Event;
 
-public abstract class AbstractCalendarModel<RECORD> implements CalendarModel<RECORD> {
+public abstract class AbstractCalendarModel<CEVENT extends CalendarEvent> implements CalendarModel<CEVENT> {
 
 	public Event<Void> onCalendarDataChanged = new Event<>();
 
 	@Override
-	public Event<Void> getOnCalendarDataChanged() {
+	public Event<Void> onCalendarDataChanged() {
 		return onCalendarDataChanged;
 	}
 	
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/calendar/Calendar.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/calendar/Calendar.java
index 460e4ce28..4dfa78d07 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/calendar/Calendar.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/calendar/Calendar.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,60 +19,60 @@
  */
 package org.teamapps.ux.component.calendar;
 
+import com.ibm.icu.util.ULocale;
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
+import org.teamapps.common.format.Color;
+import org.teamapps.common.format.RgbaColor;
 import org.teamapps.data.extract.BeanPropertyExtractor;
 import org.teamapps.data.extract.PropertyExtractor;
-import org.teamapps.dto.UiCalendar;
-import org.teamapps.dto.UiCalendarEventClientRecord;
-import org.teamapps.dto.UiCalendarEventRenderingStyle;
-import org.teamapps.dto.UiComponent;
-import org.teamapps.dto.UiEvent;
-import org.teamapps.dto.UiWeekDay;
+import org.teamapps.data.extract.PropertyProvider;
+import org.teamapps.dto.*;
 import org.teamapps.event.Event;
-import org.teamapps.event.EventListener;
-import org.teamapps.icon.material.MaterialIcon;
-import org.teamapps.ux.cache.CacheManipulationHandle;
-import org.teamapps.ux.cache.ClientRecordCache;
+import org.teamapps.ux.cache.record.legacy.CacheManipulationHandle;
+import org.teamapps.ux.cache.record.legacy.ClientRecordCache;
 import org.teamapps.ux.component.AbstractComponent;
-import org.teamapps.ux.component.field.combobox.TemplateDecider;
-import org.teamapps.common.format.Color;
 import org.teamapps.ux.component.template.BaseTemplate;
-import org.teamapps.ux.component.template.BaseTemplateRecord;
 import org.teamapps.ux.component.template.Template;
 import org.teamapps.ux.component.toolbar.ToolbarButton;
 import org.teamapps.ux.component.toolbar.ToolbarButtonGroup;
+import org.teamapps.ux.i18n.TeamAppsDictionary;
+import org.teamapps.ux.icon.TeamAppsIconBundle;
+import org.teamapps.ux.session.CurrentSessionContext;
 
 import java.time.DayOfWeek;
 import java.time.Instant;
 import java.time.LocalDate;
 import java.time.ZoneId;
-import java.util.Collections;
-import java.util.HashMap;
-import java.util.List;
-import java.util.Map;
+import java.util.*;
+import java.util.function.Consumer;
 import java.util.stream.Collectors;
 
-import static org.teamapps.util.UiUtil.createUiColor;
-
-public class Calendar<RECORD> extends AbstractComponent {
+public class Calendar<CEVENT extends CalendarEvent> extends AbstractComponent {
 
 	private final Logger LOGGER = LoggerFactory.getLogger(Calendar.class);
 
-	public final Event<EventClickedEventData<RECORD>> onEventClicked = new Event<>();
-	public final Event<EventMovedEventData<RECORD>> onEventMoved = new Event<>();
+	public final Event<EventClickedEventData<CEVENT>> onEventClicked = new Event<>();
+	public final Event<EventMovedEventData<CEVENT>> onEventMoved = new Event<>();
 	public final Event<DayClickedEventData> onDayClicked = new Event<>();
+	public final Event<IntervalSelectedEventData> onIntervalSelected = new Event<>();
 	public final Event<ViewChangedEventData> onViewChanged = new Event<>();
+	public final Event<LocalDate> onMonthHeaderClicked = new Event<>();
+	public final Event<WeeHeaderClickedEventData> onWeekHeaderClicked = new Event<>();
+	public final Event<LocalDate> onDayHeaderClicked = new Event<>();
 
-	private CalendarModel<RECORD> model;
-	private PropertyExtractor<RECORD> propertyExtractor = new BeanPropertyExtractor<>();
+	private CalendarModel<CEVENT> model;
+	private PropertyProvider<CEVENT> propertyProvider = new BeanPropertyExtractor<>();
 
-	ClientRecordCache<CalendarEvent<RECORD>, UiCalendarEventClientRecord> recordCache = new ClientRecordCache<>(this::createUiCalendarEventClientRecord);
+	private final ClientRecordCache<CEVENT, UiCalendarEventClientRecord> recordCache = new ClientRecordCache<>(this::createUiCalendarEventClientRecord);
+
+	private CalendarEventTemplateDecider<CEVENT> templateDecider = //(calendarEvent, viewMode) -> null;
+			createStaticTemplateDecider(
+					BaseTemplate.LIST_ITEM_MEDIUM_ICON_TWO_LINES,
+					BaseTemplate.LIST_ITEM_SMALL_ICON_SINGLE_LINE,
+					BaseTemplate.LIST_ITEM_MEDIUM_ICON_TWO_LINES
+			);
 
-	private Template dayViewTemplate = null; // null: use default rendering...
-	private TemplateDecider<CalendarEvent<RECORD>> dayViewTemplateDecider = record -> dayViewTemplate;
-	private Template monthViewTemplate = null; // null: use default rendering...
-	private TemplateDecider<CalendarEvent<RECORD>> monthViewTemplateDecider = record -> monthViewTemplate;
 	private int templateIdCounter = 0;
 	private final Map<Template, String> templateIdsByTemplate = new HashMap<>();
 
@@ -83,14 +83,22 @@ public class Calendar<RECORD> extends AbstractComponent {
 	private boolean showWeekNumbers = true;
 	private int businessHoursStart = 8;
 	private int businessHoursEnd = 17;
-	private DayOfWeek firstDayOfWeek = DayOfWeek.MONDAY; // TODO get from session settings!
+	private DayOfWeek firstDayOfWeek = CurrentSessionContext.get().getConfiguration().getFirstDayOfWeek();
 	private List<DayOfWeek> workingDays = java.util.Arrays.asList(DayOfWeek.MONDAY, DayOfWeek.TUESDAY, DayOfWeek.WEDNESDAY, DayOfWeek.THURSDAY, DayOfWeek.FRIDAY);
 	private Color tableHeaderBackgroundColor;
 
-	private Color defaultBackgroundColor = new Color(154, 204, 228);
-	private Color defaultBorderColor = new Color(154, 204, 228);
+	private Color defaultBackgroundColor = new RgbaColor(154, 204, 228);
+	private Color defaultBorderColor = new RgbaColor(154, 204, 228);
+
+	private int minYearViewMonthTileWidth = 175;
+	private int maxYearViewMonthTileWidth = 0;
+
+	private ULocale locale = getSessionContext().getULocale();
+	private ZoneId timeZone = getSessionContext().getTimeZone();
 
-	private EventListener<Void> onCalendarDataChangedListener = (aVoid) -> {
+	private boolean navigateOnHeaderClicks = true;
+
+	private final Consumer<Void> onCalendarDataChangedListener = (aVoid) -> {
 		refreshEvents();
 	};
 
@@ -98,43 +106,53 @@ public Calendar() {
 		this(null);
 	}
 
-	public Calendar(CalendarModel<RECORD> model) {
+	public Calendar(CalendarModel<CEVENT> model) {
 		if (model != null) {
 			setModel(model);
 		}
 	}
 
-	private UiCalendarEventClientRecord createUiCalendarEventClientRecord(CalendarEvent<RECORD> calendarEvent) {
-		Template template = getTemplateForRecord(calendarEvent);
-		Map<String, Object> values = template != null ? propertyExtractor.getValues(calendarEvent.getRecord(), template.getDataKeys()) : Collections.emptyMap();
+	private UiCalendarEventClientRecord createUiCalendarEventClientRecord(CEVENT calendarEvent) {
+		Template timeGridTemplate = getTemplateForRecord(calendarEvent, CalendarViewMode.WEEK);
+		Template dayGridTemplate = getTemplateForRecord(calendarEvent, CalendarViewMode.MONTH);
+		Template monthGridTemplate = getTemplateForRecord(calendarEvent, CalendarViewMode.YEAR);
+
+		HashSet<String> propertyNames = new HashSet<>();
+		if (timeGridTemplate != null) {
+			propertyNames.addAll(timeGridTemplate.getPropertyNames());
+		}
+		if (dayGridTemplate != null) {
+			propertyNames.addAll(dayGridTemplate.getPropertyNames());
+		}
+		if (monthGridTemplate != null) {
+			propertyNames.addAll(monthGridTemplate.getPropertyNames());
+		}
+
+		Map<String, Object> values = propertyProvider.getValues(calendarEvent, propertyNames);
 		UiCalendarEventClientRecord uiRecord = new UiCalendarEventClientRecord();
 		uiRecord.setValues(values);
 
-		uiRecord.setTemplateId(templateIdsByTemplate.get(template));
+		uiRecord.setTimeGridTemplateId(templateIdsByTemplate.get(timeGridTemplate));
+		uiRecord.setDayGridTemplateId(templateIdsByTemplate.get(dayGridTemplate));
+		uiRecord.setMonthGridTemplateId(templateIdsByTemplate.get(monthGridTemplate));
+
+		uiRecord.setIcon(getSessionContext().resolveIcon(calendarEvent.getIcon()));
+		uiRecord.setTitle(calendarEvent.getTitle());
 
-		uiRecord.setStart(calendarEvent.getStartAsLong());
-		uiRecord.setEnd(calendarEvent.getEndAsLong());
-		uiRecord.setAsString(template == null && calendarEvent.getRecord() != null ? calendarEvent.getRecord().toString() : null);
+		uiRecord.setStart(calendarEvent.getStart());
+		uiRecord.setEnd(calendarEvent.getEnd());
+		// uiRecord.setAsString(calendarEvent.getRecord() != null ? calendarEvent.getRecord().toString() : null);
 		uiRecord.setAllDay(calendarEvent.isAllDay());
 		uiRecord.setAllowDragOperations(calendarEvent.isAllowDragOperations());
-		uiRecord.setBackgroundColor(calendarEvent.getBackgroundColor() != null ? createUiColor(calendarEvent.getBackgroundColor()) : null);
-		uiRecord.setBorderColor(calendarEvent.getBorderColor() != null ? createUiColor(calendarEvent.getBorderColor()) : null);
+		uiRecord.setBackgroundColor(calendarEvent.getBackgroundColor() != null ? calendarEvent.getBackgroundColor().toHtmlColorString() : null);
+		uiRecord.setBorderColor(calendarEvent.getBorderColor() != null ? calendarEvent.getBorderColor().toHtmlColorString() : null);
 		uiRecord.setRendering(calendarEvent.getRendering() != null ? calendarEvent.getRendering().toUiCalendarEventRenderingStyle() : UiCalendarEventRenderingStyle.DEFAULT);
 
 		return uiRecord;
 	}
 
-	private Template getTemplateForRecord(CalendarEvent<RECORD> record) {
-		if (this.activeViewMode == CalendarViewMode.YEAR) {
-			return null; // no template for year view!
-		}
-
-		TemplateDecider<CalendarEvent<RECORD>> templateDecider = activeViewMode == CalendarViewMode.MONTH ? monthViewTemplateDecider : dayViewTemplateDecider;
-		Template templateFromDecider = templateDecider.getTemplate(record);
-
-		Template defaultTemplate = activeViewMode == CalendarViewMode.MONTH ? monthViewTemplate : dayViewTemplate;
-
-		Template template = templateFromDecider != null ? templateFromDecider : defaultTemplate;
+	private Template getTemplateForRecord(CEVENT record, CalendarViewMode viewMode) {
+		Template template = templateDecider.getTemplate(record, viewMode);
 		if (template != null && !templateIdsByTemplate.containsKey(template)) {
 			String id = "" + templateIdCounter++;
 			this.templateIdsByTemplate.put(template, id);
@@ -143,40 +161,47 @@ private Template getTemplateForRecord(CalendarEvent<RECORD> record) {
 		return template;
 	}
 
-	public void setModel(CalendarModel<RECORD> model) {
+	public void setModel(CalendarModel<CEVENT> model) {
 		if (this.model != null) {
 			unregisterModelEventListeners();
 		}
 		this.model = model;
-		model.getOnCalendarDataChanged().addListener(onCalendarDataChangedListener);
+		if (model != null) {
+			model.onCalendarDataChanged().addListener(onCalendarDataChangedListener);
+		}
 		refreshEvents();
 	}
 
 	private void unregisterModelEventListeners() {
-		this.model.getOnCalendarDataChanged().removeListener(onCalendarDataChangedListener);
+		this.model.onCalendarDataChanged().removeListener(onCalendarDataChangedListener);
 	}
 
 	@Override
 	public UiComponent createUiComponent() {
-		UiCalendar uiCalendar = new UiCalendar(getId());
+		UiCalendar uiCalendar = new UiCalendar();
 		mapAbstractUiComponentProperties(uiCalendar);
 		uiCalendar.setActiveViewMode(activeViewMode.toUiCalendarViewMode());
-		uiCalendar.setDisplayedDate(displayedDate.atStartOfDay(getClientZoneId()).toInstant().toEpochMilli());
+		uiCalendar.setDisplayedDate(displayedDate.atStartOfDay(timeZone).toInstant().toEpochMilli());
 		uiCalendar.setShowHeader(showHeader);
 		uiCalendar.setTableBorder(tableBorder);
 		uiCalendar.setShowWeekNumbers(showWeekNumbers);
 		uiCalendar.setBusinessHoursStart(businessHoursStart);
 		uiCalendar.setBusinessHoursEnd(businessHoursEnd);
-		uiCalendar.setFirstDayOfWeek(firstDayOfWeek != null ? UiWeekDay.valueOf(firstDayOfWeek.name()) : null);
+		uiCalendar.setFirstDayOfWeek(UiWeekDay.valueOf(firstDayOfWeek.name()));
 		uiCalendar.setWorkingDays(workingDays.stream().map(workingDay -> UiWeekDay.valueOf(workingDay.name())).collect(Collectors.toList()));
-		uiCalendar.setTableHeaderBackgroundColor(tableHeaderBackgroundColor != null ? createUiColor(tableHeaderBackgroundColor) : null);
-
-		Instant queryStart = activeViewMode.getDisplayStart(displayedDate, firstDayOfWeek).atStartOfDay(getClientZoneId()).toInstant();
-		Instant queryEnd = activeViewMode.getDisplayEnd(displayedDate, firstDayOfWeek).atStartOfDay(getClientZoneId()).toInstant();
-		List<CalendarEvent<RECORD>> initialCalendarEvents = query(queryStart, queryEnd);
+		uiCalendar.setTableHeaderBackgroundColor(tableHeaderBackgroundColor != null ? tableHeaderBackgroundColor.toHtmlColorString() : null);
+		uiCalendar.setNavigateOnHeaderClicks(navigateOnHeaderClicks);
+		uiCalendar.setLocale(locale.toLanguageTag());
+		uiCalendar.setTimeZoneId(timeZone.getId());
+		uiCalendar.setMinYearViewMonthTileWidth(minYearViewMonthTileWidth);
+		uiCalendar.setMaxYearViewMonthTileWidth(maxYearViewMonthTileWidth);
+
+		Instant queryStart = activeViewMode.getDisplayStart(displayedDate, firstDayOfWeek).atStartOfDay(timeZone).toInstant();
+		Instant queryEnd = activeViewMode.getDisplayEnd(displayedDate, firstDayOfWeek).atStartOfDay(timeZone).toInstant();
+		List<CEVENT> initialCalendarEvents = query(queryStart, queryEnd);
 		CacheManipulationHandle<List<UiCalendarEventClientRecord>> cacheResponse = recordCache.replaceRecords(initialCalendarEvents);
 		cacheResponse.commit();
-		uiCalendar.setInitialData(cacheResponse.getResult());
+		uiCalendar.setInitialData(cacheResponse.getAndClearResult());
 
 		uiCalendar.setTemplates(templateIdsByTemplate.entrySet().stream()
 				.collect(Collectors.toMap(Map.Entry::getValue, entry -> entry.getKey().createUiTemplate())));
@@ -184,15 +209,8 @@ public UiComponent createUiComponent() {
 		return uiCalendar;
 	}
 
-	@Override
-	protected void doDestroy() {
-		if (model != null) {
-			unregisterModelEventListeners();
-		}
-	}
-
-	private List<CalendarEvent<RECORD>> query(Instant queryStart, Instant queryEnd) {
-		List<CalendarEvent<RECORD>> events;
+	private List<CEVENT> query(Instant queryStart, Instant queryEnd) {
+		List<CEVENT> events;
 		if (model != null) {
 			events = model.getEventsForInterval(queryStart, queryEnd);
 			LOGGER.debug("Query: " + queryStart + " - " + queryEnd + " --> events:" + events.size());
@@ -207,7 +225,7 @@ public void handleUiEvent(UiEvent event) {
 		switch (event.getUiEventType()) {
 			case UI_CALENDAR_EVENT_CLICKED: {
 				UiCalendar.EventClickedEvent clickEvent = (UiCalendar.EventClickedEvent) event;
-				CalendarEvent<RECORD> calendarEvent = recordCache.getRecordByClientId(clickEvent.getEventId());
+				CEVENT calendarEvent = recordCache.getRecordByClientId(clickEvent.getEventId());
 				if (calendarEvent != null) {
 					onEventClicked.fire(new EventClickedEventData<>(calendarEvent, clickEvent.getIsDoubleClick()));
 				}
@@ -215,7 +233,7 @@ public void handleUiEvent(UiEvent event) {
 			}
 			case UI_CALENDAR_EVENT_MOVED: {
 				UiCalendar.EventMovedEvent eventMovedEvent = (UiCalendar.EventMovedEvent) event;
-				CalendarEvent<RECORD> calendarEvent = recordCache.getRecordByClientId(eventMovedEvent.getEventId());
+				CEVENT calendarEvent = recordCache.getRecordByClientId(eventMovedEvent.getEventId());
 				if (calendarEvent != null) {
 					onEventMoved.fire(new EventMovedEventData<>(calendarEvent, Instant.ofEpochMilli(eventMovedEvent.getNewStart()), Instant.ofEpochMilli(eventMovedEvent.getNewEnd())));
 				}
@@ -224,18 +242,21 @@ public void handleUiEvent(UiEvent event) {
 			}
 			case UI_CALENDAR_DAY_CLICKED: {
 				UiCalendar.DayClickedEvent dayClickedEvent = (UiCalendar.DayClickedEvent) event;
-				onDayClicked.fire(new DayClickedEventData(getClientZoneId(), Instant.ofEpochMilli(dayClickedEvent.getDate()), dayClickedEvent.getIsDoubleClick()));
+				onDayClicked.fire(new DayClickedEventData(timeZone, Instant.ofEpochMilli(dayClickedEvent.getDate()), dayClickedEvent.getIsDoubleClick()));
+				break;
+			}
+			case UI_CALENDAR_INTERVAL_SELECTED: {
+				UiCalendar.IntervalSelectedEvent selectionEvent = (UiCalendar.IntervalSelectedEvent) event;
+				onIntervalSelected.fire(new IntervalSelectedEventData(timeZone, Instant.ofEpochMilli(selectionEvent.getStart()), Instant.ofEpochMilli(selectionEvent.getEnd()),
+						selectionEvent.getAllDay()));
 				break;
 			}
 			case UI_CALENDAR_VIEW_CHANGED: {
 				UiCalendar.ViewChangedEvent viewChangedEvent = (UiCalendar.ViewChangedEvent) event;
-				this.displayedDate = epochMilliToUserLocalDate(viewChangedEvent);
+				this.displayedDate = Instant.ofEpochMilli(viewChangedEvent.getMainIntervalStart()).atZone(timeZone).toLocalDate();
 				this.activeViewMode = CalendarViewMode.valueOf(viewChangedEvent.getViewMode().name());
-				Instant queryStart = Instant.ofEpochMilli(viewChangedEvent.getDisplayedIntervalStart());
-				Instant queryEnd = Instant.ofEpochMilli(viewChangedEvent.getDisplayedIntervalEnd());
-				sendCalendarData(queryStart, queryEnd);
 				onViewChanged.fire(new ViewChangedEventData(
-						getClientZoneId(),
+						timeZone,
 						activeViewMode,
 						Instant.ofEpochMilli(viewChangedEvent.getMainIntervalStart()),
 						Instant.ofEpochMilli(viewChangedEvent.getMainIntervalEnd()),
@@ -244,18 +265,39 @@ public void handleUiEvent(UiEvent event) {
 				));
 				break;
 			}
+			case UI_CALENDAR_DATA_NEEDED: {
+				UiCalendar.DataNeededEvent dataNeededEvent = (UiCalendar.DataNeededEvent) event;
+				Instant queryStart = Instant.ofEpochMilli(dataNeededEvent.getRequestIntervalStart());
+				Instant queryEnd = Instant.ofEpochMilli(dataNeededEvent.getRequestIntervalEnd());
+				queryAndSendCalendarData(queryStart, queryEnd);
+				break;
+			}
+			case UI_CALENDAR_MONTH_HEADER_CLICKED: {
+				UiCalendar.MonthHeaderClickedEvent clickEvent = (UiCalendar.MonthHeaderClickedEvent) event;
+				LocalDate startOfMonth = Instant.ofEpochMilli(clickEvent.getMonthStartDate()).atZone(timeZone).toLocalDate();
+				onMonthHeaderClicked.fire(startOfMonth);
+				break;
+			}
+			case UI_CALENDAR_WEEK_HEADER_CLICKED: {
+				UiCalendar.WeekHeaderClickedEvent clickEvent = (UiCalendar.WeekHeaderClickedEvent) event;
+				LocalDate startOfWeek = Instant.ofEpochMilli(clickEvent.getWeekStartDate()).atZone(timeZone).toLocalDate();
+				onWeekHeaderClicked.fire(new WeeHeaderClickedEventData(timeZone, clickEvent.getYear(), clickEvent.getWeek(), startOfWeek));
+				break;
+			}
+			case UI_CALENDAR_DAY_HEADER_CLICKED: {
+				UiCalendar.DayHeaderClickedEvent clickEvent = (UiCalendar.DayHeaderClickedEvent) event;
+				LocalDate date = Instant.ofEpochMilli(clickEvent.getDate()).atZone(timeZone).toLocalDate();
+				onDayHeaderClicked.fire(date);
+				break;
+			}
 		}
 	}
 
-	private LocalDate epochMilliToUserLocalDate(UiCalendar.ViewChangedEvent viewChangedEvent) {
-		return Instant.ofEpochMilli(viewChangedEvent.getMainIntervalStart()).atZone(getSessionContext().getTimeZone()).toLocalDate();
-	}
-
-	private void sendCalendarData(Instant queryStart, Instant queryEnd) {
-		List<CalendarEvent<RECORD>> calendarEvents = query(queryStart, queryEnd);
+	private void queryAndSendCalendarData(Instant queryStart, Instant queryEnd) {
+		List<CEVENT> calendarEvents = query(queryStart, queryEnd);
 		CacheManipulationHandle<List<UiCalendarEventClientRecord>> cacheResponse = recordCache.replaceRecords(calendarEvents);
 		if (isRendered()) {
-			getSessionContext().queueCommand(new UiCalendar.SetCalendarDataCommand(getId(), cacheResponse.getResult()), aVoid -> cacheResponse.commit());
+			getSessionContext().queueCommand(new UiCalendar.SetCalendarDataCommand(getId(), cacheResponse.getAndClearResult()), aVoid -> cacheResponse.commit());
 		} else {
 			cacheResponse.commit();
 		}
@@ -264,31 +306,19 @@ private void sendCalendarData(Instant queryStart, Instant queryEnd) {
 	public ToolbarButtonGroup createViewModesToolbarButtonGroup() {
 		ToolbarButtonGroup group = new ToolbarButtonGroup();
 
-		ToolbarButton yearViewButton = new ToolbarButton(
-				BaseTemplate.TOOLBAR_BUTTON,
-				new BaseTemplateRecord(MaterialIcon.EVENT_NOTE, "Year", "12 Months Overview" /*TODO*/)
-		);
+		ToolbarButton yearViewButton = ToolbarButton.createSmall(getSessionContext().getIcon(TeamAppsIconBundle.YEAR.getKey()), getSessionContext().getLocalized(TeamAppsDictionary.YEAR.getKey()));
 		yearViewButton.onClick.addListener(toolbarButtonClickEvent -> this.setActiveViewMode(CalendarViewMode.YEAR));
 		group.addButton(yearViewButton);
 
-		ToolbarButton monthViewButton = new ToolbarButton(
-				BaseTemplate.TOOLBAR_BUTTON,
-				new BaseTemplateRecord(MaterialIcon.DATE_RANGE, "Month", "Full Month View")
-		);
+		ToolbarButton monthViewButton = ToolbarButton.createSmall(getSessionContext().getIcon(TeamAppsIconBundle.MONTH.getKey()), getSessionContext().getLocalized(TeamAppsDictionary.MONTH.getKey()));
 		monthViewButton.onClick.addListener(toolbarButtonClickEvent -> this.setActiveViewMode(CalendarViewMode.MONTH));
 		group.addButton(monthViewButton);
 
-		ToolbarButton weekViewButton = new ToolbarButton(
-				BaseTemplate.TOOLBAR_BUTTON,
-				new BaseTemplateRecord(MaterialIcon.VIEW_WEEK, "Week", "Week View")
-		);
+		ToolbarButton weekViewButton = ToolbarButton.createSmall(getSessionContext().getIcon(TeamAppsIconBundle.WEEK.getKey()), getSessionContext().getLocalized(TeamAppsDictionary.WEEK.getKey()));
 		weekViewButton.onClick.addListener(toolbarButtonClickEvent -> this.setActiveViewMode(CalendarViewMode.WEEK));
 		group.addButton(weekViewButton);
 
-		ToolbarButton dayViewButton = new ToolbarButton(
-				BaseTemplate.TOOLBAR_BUTTON,
-				new BaseTemplateRecord(MaterialIcon.VIEW_DAY, "Day", "Single Day View")
-		);
+		ToolbarButton dayViewButton = ToolbarButton.createSmall(getSessionContext().getIcon(TeamAppsIconBundle.DAY.getKey()), getSessionContext().getLocalized(TeamAppsDictionary.DAY.getKey()));
 		dayViewButton.onClick.addListener(toolbarButtonClickEvent -> this.setActiveViewMode(CalendarViewMode.DAY));
 		group.addButton(dayViewButton);
 
@@ -298,31 +328,22 @@ public ToolbarButtonGroup createViewModesToolbarButtonGroup() {
 	public ToolbarButtonGroup createNavigationButtonGroup() {
 		ToolbarButtonGroup group = new ToolbarButtonGroup();
 
-		ToolbarButton forwardButton = new ToolbarButton(
-				BaseTemplate.TOOLBAR_BUTTON,
-				new BaseTemplateRecord(MaterialIcon.NAVIGATE_BEFORE, "Previous", null)
-		);
+		ToolbarButton forwardButton = ToolbarButton.createSmall(getSessionContext().getIcon(TeamAppsIconBundle.PREVIOUS.getKey()),
+				getSessionContext().getLocalized(TeamAppsDictionary.PREVIOUS.getKey()));
 		forwardButton.onClick.addListener(toolbarButtonClickEvent -> this.setDisplayedDate(activeViewMode.decrement(displayedDate)));
 		group.addButton(forwardButton);
 
-		ToolbarButton backButton = new ToolbarButton(
-				BaseTemplate.TOOLBAR_BUTTON,
-				new BaseTemplateRecord(MaterialIcon.NAVIGATE_NEXT, "Next", null)
-		);
+		ToolbarButton backButton = ToolbarButton.createSmall(getSessionContext().getIcon(TeamAppsIconBundle.NEXT.getKey()), getSessionContext().getLocalized(TeamAppsDictionary.NEXT.getKey()));
 		backButton.onClick.addListener(toolbarButtonClickEvent -> this.setDisplayedDate(activeViewMode.increment(displayedDate)));
 		group.addButton(backButton);
 
 		return group;
 	}
 
-	private ZoneId getClientZoneId() {
-		return ZoneId.of(getSessionContext().getClientInfo().getTimeZone());
-	}
-
 	public void refreshEvents() {
-		Instant queryStart = activeViewMode.getDisplayStart(displayedDate, firstDayOfWeek).atStartOfDay(getClientZoneId()).toInstant();
-		Instant queryEnd = activeViewMode.getDisplayEnd(displayedDate, firstDayOfWeek).atStartOfDay(getClientZoneId()).toInstant();
-		sendCalendarData(queryStart, queryEnd);
+		Instant queryStart = activeViewMode.getDisplayStart(displayedDate, firstDayOfWeek).atStartOfDay(timeZone).toInstant();
+		Instant queryEnd = activeViewMode.getDisplayEnd(displayedDate, firstDayOfWeek).atStartOfDay(timeZone).toInstant();
+		queryAndSendCalendarData(queryStart, queryEnd);
 	}
 
 	public CalendarModel getModel() {
@@ -345,7 +366,41 @@ public LocalDate getDisplayedDate() {
 
 	public void setDisplayedDate(LocalDate displayedDate) {
 		this.displayedDate = displayedDate;
-		queueCommandIfRendered(() -> new UiCalendar.SetDisplayedDateCommand(getId(), displayedDate.atStartOfDay(getClientZoneId()).toInstant().toEpochMilli()));
+		queueCommandIfRendered(() -> new UiCalendar.SetDisplayedDateCommand(getId(), displayedDate.atStartOfDay(timeZone).toInstant().toEpochMilli()));
+	}
+
+	public void setDisplayDateOneUnitPrevious() {
+		switch (getActiveViewMode()) {
+			case YEAR:
+				setDisplayedDate(getDisplayedDate().minusYears(1));
+				break;
+			case MONTH:
+				setDisplayedDate(getDisplayedDate().minusMonths(1));
+				break;
+			case WEEK:
+				setDisplayedDate(getDisplayedDate().minusWeeks(1));
+				break;
+			case DAY:
+				setDisplayedDate(getDisplayedDate().minusDays(1));
+				break;
+		}
+	}
+
+	public void setDisplayDateOneUnitNext() {
+		switch (getActiveViewMode()) {
+			case YEAR:
+				setDisplayedDate(getDisplayedDate().plusYears(1));
+				break;
+			case MONTH:
+				setDisplayedDate(getDisplayedDate().plusMonths(1));
+				break;
+			case WEEK:
+				setDisplayedDate(getDisplayedDate().plusWeeks(1));
+				break;
+			case DAY:
+				setDisplayedDate(getDisplayedDate().plusDays(1));
+				break;
+		}
 	}
 
 	public boolean isShowHeader() {
@@ -353,8 +408,11 @@ public boolean isShowHeader() {
 	}
 
 	public void setShowHeader(boolean showHeader) {
+		boolean changed = showHeader != this.showHeader;
 		this.showHeader = showHeader;
-		reRenderIfRendered();
+		if (changed) {
+			reRenderIfRendered();
+		}
 	}
 
 	public boolean isTableBorder() {
@@ -362,8 +420,11 @@ public boolean isTableBorder() {
 	}
 
 	public void setTableBorder(boolean tableBorder) {
+		boolean changed = tableBorder != this.tableBorder;
 		this.tableBorder = tableBorder;
-		reRenderIfRendered();
+		if (changed) {
+			reRenderIfRendered();
+		}
 	}
 
 	public boolean isShowWeekNumbers() {
@@ -371,8 +432,11 @@ public boolean isShowWeekNumbers() {
 	}
 
 	public void setShowWeekNumbers(boolean showWeekNumbers) {
+		boolean changed = showWeekNumbers != this.showWeekNumbers;
 		this.showWeekNumbers = showWeekNumbers;
-		reRenderIfRendered();
+		if (changed) {
+			reRenderIfRendered();
+		}
 	}
 
 	public int getBusinessHoursStart() {
@@ -380,8 +444,11 @@ public int getBusinessHoursStart() {
 	}
 
 	public void setBusinessHoursStart(int businessHoursStart) {
+		boolean changed = businessHoursStart != this.businessHoursStart;
 		this.businessHoursStart = businessHoursStart;
-		reRenderIfRendered();
+		if (changed) {
+			reRenderIfRendered();
+		}
 	}
 
 	public int getBusinessHoursEnd() {
@@ -389,8 +456,11 @@ public int getBusinessHoursEnd() {
 	}
 
 	public void setBusinessHoursEnd(int businessHoursEnd) {
+		boolean changed = businessHoursEnd != this.businessHoursEnd;
 		this.businessHoursEnd = businessHoursEnd;
-		reRenderIfRendered();
+		if (changed) {
+			reRenderIfRendered();
+		}
 	}
 
 	public DayOfWeek getFirstDayOfWeek() {
@@ -398,8 +468,11 @@ public DayOfWeek getFirstDayOfWeek() {
 	}
 
 	public void setFirstDayOfWeek(DayOfWeek firstDayOfWeek) {
+		boolean changed = firstDayOfWeek != this.firstDayOfWeek;
 		this.firstDayOfWeek = firstDayOfWeek;
-		reRenderIfRendered();
+		if (changed) {
+			reRenderIfRendered();
+		}
 	}
 
 	public List<DayOfWeek> getWorkingDays() {
@@ -407,8 +480,11 @@ public List<DayOfWeek> getWorkingDays() {
 	}
 
 	public void setWorkingDays(List<DayOfWeek> workingDays) {
+		boolean changed = !Objects.equals(workingDays, this.workingDays);
 		this.workingDays = workingDays;
-		reRenderIfRendered();
+		if (changed) {
+			reRenderIfRendered();
+		}
 	}
 
 	public Color getTableHeaderBackgroundColor() {
@@ -416,8 +492,11 @@ public Color getTableHeaderBackgroundColor() {
 	}
 
 	public void setTableHeaderBackgroundColor(Color tableHeaderBackgroundColor) {
+		boolean changed = !Objects.equals(tableHeaderBackgroundColor, this.tableHeaderBackgroundColor);
 		this.tableHeaderBackgroundColor = tableHeaderBackgroundColor;
-		reRenderIfRendered();
+		if (changed) {
+			reRenderIfRendered();
+		}
 	}
 
 	public Color getDefaultBackgroundColor() {
@@ -436,43 +515,105 @@ public void setDefaultBorderColor(Color defaultBorderColor) {
 		this.defaultBorderColor = defaultBorderColor;
 	}
 
-	public PropertyExtractor<RECORD> getPropertyExtractor() {
-		return propertyExtractor;
+	public PropertyProvider<CEVENT> getPropertyProvider() {
+		return propertyProvider;
+	}
+
+	public void setPropertyProvider(PropertyProvider<CEVENT> propertyProvider) {
+		this.propertyProvider = propertyProvider;
 	}
 
-	public void setPropertyExtractor(PropertyExtractor<RECORD> propertyExtractor) {
-		this.propertyExtractor = propertyExtractor;
+	public void setPropertyExtractor(PropertyExtractor<CEVENT> propertyExtractor) {
+		this.setPropertyProvider(propertyExtractor);
 	}
 
-	public Template getDayViewTemplate() {
-		return dayViewTemplate;
+	public CalendarEventTemplateDecider<CEVENT> getTemplateDecider() {
+		return templateDecider;
 	}
 
-	public void setDayViewTemplate(Template dayViewTemplate) {
-		this.dayViewTemplate = dayViewTemplate;
+	public void setTemplateDecider(CalendarEventTemplateDecider<CEVENT> templateDecider) {
+		this.templateDecider = templateDecider;
 	}
 
-	public TemplateDecider<CalendarEvent<RECORD>> getDayViewTemplateDecider() {
-		return dayViewTemplateDecider;
+	public void setTemplates(Template timeGridTemplate, Template dayGridTemplate, Template monthGridTemplate) {
+		this.templateDecider = createStaticTemplateDecider(timeGridTemplate, dayGridTemplate, monthGridTemplate);
 	}
 
-	public void setDayViewTemplateDecider(TemplateDecider<CalendarEvent<RECORD>> dayViewTemplateDecider) {
-		this.dayViewTemplateDecider = dayViewTemplateDecider;
+	private CalendarEventTemplateDecider<CEVENT> createStaticTemplateDecider(Template timeGridTemplate, Template dayGridTemplate, Template monthGridTemplate) {
+		return (record, viewMode) -> {
+			switch (viewMode) {
+				case DAY:
+				case WEEK:
+					return timeGridTemplate;
+				case MONTH:
+					return dayGridTemplate;
+				case YEAR:
+					return monthGridTemplate;
+				default:
+					throw new IllegalArgumentException("Unknown view mode: " + viewMode);
+			}
+		};
+	}
+
+
+	public Locale getLocale() {
+		return locale.toLocale();
+	}
+
+	public ULocale getULocale() {
+		return locale;
+	}
+
+	public void setLocale(Locale locale) {
+		setULocale(ULocale.forLocale(locale));
+	}
+
+	public void setULocale(ULocale locale) {
+		boolean changed = !Objects.equals(locale, this.locale);
+		this.locale = locale;
+		if (changed) {
+			reRenderIfRendered();
+		}
 	}
 
-	public Template getMonthViewTemplate() {
-		return monthViewTemplate;
+	public ZoneId getTimeZone() {
+		return timeZone;
 	}
 
-	public void setMonthViewTemplate(Template monthViewTemplate) {
-		this.monthViewTemplate = monthViewTemplate;
+	public void setTimeZone(ZoneId timeZone) {
+		this.timeZone = timeZone;
+		queueCommandIfRendered(() -> new UiCalendar.SetTimeZoneIdCommand(getId(), timeZone.getId()));
+	}
+
+	public int getMinYearViewMonthTileWidth() {
+		return minYearViewMonthTileWidth;
+	}
+
+	public void setMinYearViewMonthTileWidth(int minYearViewMonthTileWidth) {
+		boolean changed = minYearViewMonthTileWidth != this.minYearViewMonthTileWidth;
+		this.minYearViewMonthTileWidth = minYearViewMonthTileWidth;
+		if (changed) {
+			reRenderIfRendered();
+		}
+	}
+
+	public int getMaxYearViewMonthTileWidth() {
+		return maxYearViewMonthTileWidth;
+	}
+
+	public void setMaxYearViewMonthTileWidth(int maxYearViewMonthTileWidth) {
+		boolean changed = maxYearViewMonthTileWidth != this.maxYearViewMonthTileWidth;
+		this.maxYearViewMonthTileWidth = maxYearViewMonthTileWidth;
+		if (changed) {
+			reRenderIfRendered();
+		}
 	}
 
-	public TemplateDecider<CalendarEvent<RECORD>> getMonthViewTemplateDecider() {
-		return monthViewTemplateDecider;
+	public boolean isNavigateOnHeaderClicks() {
+		return navigateOnHeaderClicks;
 	}
 
-	public void setMonthViewTemplateDecider(TemplateDecider<CalendarEvent<RECORD>> monthViewTemplateDecider) {
-		this.monthViewTemplateDecider = monthViewTemplateDecider;
+	public void setNavigateOnHeaderClicks(boolean navigateOnHeaderClicks) {
+		this.navigateOnHeaderClicks = navigateOnHeaderClicks;
 	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/calendar/CalendarEvent.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/calendar/CalendarEvent.java
index 6fbf3fdaf..c158cd8b3 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/calendar/CalendarEvent.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/calendar/CalendarEvent.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -20,133 +20,45 @@
 package org.teamapps.ux.component.calendar;
 
 import org.teamapps.common.format.Color;
+import org.teamapps.icons.Icon;
 
 import java.time.Instant;
 
-public class CalendarEvent<RECORD> {
+public interface CalendarEvent {
 
-	private long start;
-	private long end;
-	private boolean allDay;
-	private boolean allowDragOperations;
-	private Color backgroundColor;
-	private Color borderColor;
-	private CalendarEventRenderingStyle rendering = CalendarEventRenderingStyle.DEFAULT;
+	long getStart();
 
-	private RECORD record;
-
-	public CalendarEvent(Instant start, Instant end, String title, boolean allDay, RECORD record) {
-		this.start = start.toEpochMilli();
-		this.end = end.toEpochMilli();
-		this.allDay = allDay;
-		this.record = record;
-	}
-
-	public CalendarEvent(Instant start, Instant end, String title, boolean allDay) {
-		this(start, end, title, allDay, null);
-	}
-
-	public CalendarEvent(Instant start, Instant end, String title, RECORD record) {
-		this(start, end, title, false, record);
-	}
-
-	public CalendarEvent(Instant start, Instant end, String title) {
-		this(start, end, title, false, null);
-	}
-
-	public CalendarEvent(long start, long end, String title, boolean allDay, RECORD record) {
-		this.start = start;
-		this.end = end;
-		this.allDay = allDay;
-		this.record = record;
-	}
-
-	public CalendarEvent(long start, long end, String title, boolean allDay) {
-		this(start, end, title, allDay, null);
-	}
-
-	public CalendarEvent(long start, long end, String title, RECORD record) {
-		this(start, end, title, false, record);
-	}
-
-	public CalendarEvent(long start, long end, String title) {
-		this(start, end, title, false, null);
-	}
-
-	public Instant getStart() {
-		return Instant.ofEpochMilli(start);
-	}
-
-	public long getStartAsLong() {
-		return start;
-	}
-
-	public void setStart(long start) {
-		this.start = start;
+	default Instant getStartInstant() {
+		return Instant.ofEpochMilli(getStart());
 	}
 
-	public void setStart(Instant start) {
-		this.start = start.toEpochMilli();
-	}
-
-	public Instant getEnd() {
-		return Instant.ofEpochMilli(end);
-	}
+	long getEnd();
 
-	public long getEndAsLong() {
-		return end;
+	default Instant getEndInstant() {
+		return Instant.ofEpochMilli(getEnd());
 	}
 
-	public void setEnd(long end) {
-		this.end = end;
-	}
+	boolean isAllDay();
 
-	public boolean isAllDay() {
-		return allDay;
+	/**
+	 * In case the event is rendered without a template, use this icon.
+ 	 */
+	default Icon getIcon() {
+		return null;
 	}
 
-	public void setAllDay(boolean allDay) {
-		this.allDay = allDay;
+	/**
+	 * In case the event is rendered without a template, use this title.
+	 */
+	default String getTitle() {
+		return null;
 	}
 
-	public boolean isAllowDragOperations() {
-		return allowDragOperations;
-	}
+	Color getBackgroundColor();
 
-	public void setAllowDragOperations(boolean allowDragOperations) {
-		this.allowDragOperations = allowDragOperations;
-	}
+	Color getBorderColor();
 
-	public Color getBackgroundColor() {
-		return backgroundColor;
-	}
-
-	public void setBackgroundColor(Color backgroundColor) {
-		this.backgroundColor = backgroundColor;
-	}
-
-	public Color getBorderColor() {
-		return borderColor;
-	}
+	CalendarEventRenderingStyle getRendering();
 
-	public void setBorderColor(Color borderColor) {
-		this.borderColor = borderColor;
-	}
-
-	public CalendarEventRenderingStyle getRendering() {
-		return rendering;
-	}
-
-	public void setRendering(CalendarEventRenderingStyle rendering) {
-		this.rendering = rendering;
-	}
-
-	public RECORD getRecord() {
-		return record;
-	}
-
-	public void setRecord(RECORD record) {
-
-		this.record = record;
-	}
+	boolean isAllowDragOperations();
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/calendar/CalendarEventRenderingStyle.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/calendar/CalendarEventRenderingStyle.java
index d9f137de5..e5721074a 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/calendar/CalendarEventRenderingStyle.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/calendar/CalendarEventRenderingStyle.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/calendar/CalendarEventTemplateDecider.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/calendar/CalendarEventTemplateDecider.java
new file mode 100644
index 000000000..1a8d4507b
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/calendar/CalendarEventTemplateDecider.java
@@ -0,0 +1,28 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.calendar;
+
+import org.teamapps.ux.component.template.Template;
+
+public interface CalendarEventTemplateDecider<CEVENT extends CalendarEvent> {
+
+	Template getTemplate(CEVENT calendarEvent, CalendarViewMode viewMode);
+
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/calendar/CalendarModel.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/calendar/CalendarModel.java
index e3a72e04f..8ce02fd74 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/calendar/CalendarModel.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/calendar/CalendarModel.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -24,10 +24,10 @@
 import java.time.Instant;
 import java.util.List;
 
-public interface CalendarModel<RECORD> {
+public interface CalendarModel<CEVENT extends CalendarEvent> {
 
-	Event<Void> getOnCalendarDataChanged();
+	Event<Void> onCalendarDataChanged();
 
-	List<CalendarEvent<RECORD>> getEventsForInterval(Instant start, Instant end);
+	List<CEVENT> getEventsForInterval(Instant start, Instant end);
 
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/calendar/CalendarViewMode.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/calendar/CalendarViewMode.java
index 16a9b25c2..9208f388a 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/calendar/CalendarViewMode.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/calendar/CalendarViewMode.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/calendar/DayClickedEventData.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/calendar/DayClickedEventData.java
index 78dd3e45d..9312520a2 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/calendar/DayClickedEventData.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/calendar/DayClickedEventData.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/calendar/EventClickedEventData.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/calendar/EventClickedEventData.java
index 0174d42ca..d182f6abb 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/calendar/EventClickedEventData.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/calendar/EventClickedEventData.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,17 +19,17 @@
  */
 package org.teamapps.ux.component.calendar;
 
-public class EventClickedEventData<RECORD> {
+public class EventClickedEventData<CEVENT extends CalendarEvent> {
 
-	private final CalendarEvent<RECORD> event;
+	private final CEVENT event;
 	private final boolean isDoubleClick;
 
-	public EventClickedEventData(CalendarEvent<RECORD> event, boolean isDoubleClick) {
+	public EventClickedEventData(CEVENT event, boolean isDoubleClick) {
 		this.event = event;
 		this.isDoubleClick = isDoubleClick;
 	}
 
-	public CalendarEvent<RECORD> getEvent() {
+	public CEVENT getEvent() {
 		return event;
 	}
 
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/calendar/EventMovedEventData.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/calendar/EventMovedEventData.java
index c02d8d4cc..e95969394 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/calendar/EventMovedEventData.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/calendar/EventMovedEventData.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -21,19 +21,19 @@
 
 import java.time.Instant;
 
-public class EventMovedEventData<RECORD> {
+public class EventMovedEventData<CEVENT> {
 
-	private final CalendarEvent<RECORD> event;
+	private final CEVENT event;
 	private final Instant newStart;
 	private final Instant newEnd;
 
-	public EventMovedEventData(CalendarEvent<RECORD> event, Instant newStart, Instant newEnd) {
+	public EventMovedEventData(CEVENT event, Instant newStart, Instant newEnd) {
 		this.event = event;
 		this.newStart = newStart;
 		this.newEnd = newEnd;
 	}
 
-	public CalendarEvent<RECORD> getEvent() {
+	public CEVENT getEvent() {
 		return event;
 	}
 
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/calendar/IntervalSelectedEventData.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/calendar/IntervalSelectedEventData.java
new file mode 100644
index 000000000..84d4f0b56
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/calendar/IntervalSelectedEventData.java
@@ -0,0 +1,54 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.calendar;
+
+import java.time.Instant;
+import java.time.ZoneId;
+
+public class IntervalSelectedEventData {
+
+	private final ZoneId timeZone;
+	private final Instant start;
+	private final Instant end;
+	private final boolean allDay;
+
+	public IntervalSelectedEventData(ZoneId timeZone, Instant start, Instant end, boolean allDay) {
+		this.timeZone = timeZone;
+		this.start = start;
+		this.end = end;
+		this.allDay = allDay;
+	}
+
+	public ZoneId getTimeZone() {
+		return timeZone;
+	}
+
+	public Instant getStart() {
+		return start;
+	}
+
+	public Instant getEnd() {
+		return end;
+	}
+
+	public boolean isAllDay() {
+		return allDay;
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/calendar/SimpleCalendar.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/calendar/SimpleCalendar.java
new file mode 100644
index 000000000..9e631c6f1
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/calendar/SimpleCalendar.java
@@ -0,0 +1,58 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.calendar;
+
+import com.ibm.icu.text.DateFormat;
+import com.ibm.icu.util.TimeZone;
+import org.teamapps.data.extract.BeanPropertyExtractor;
+
+import java.util.Date;
+import java.util.List;
+
+public class SimpleCalendar<PAYLOAD> extends Calendar<SimpleCalendarEvent<PAYLOAD>> {
+
+	public SimpleCalendar() {
+		super(new SimpleCalendarModel<PAYLOAD>());
+		setPropertyExtractor(new BeanPropertyExtractor<SimpleCalendarEvent<PAYLOAD>>().addProperty("description",
+				event -> {
+					com.ibm.icu.util.Calendar calendar = com.ibm.icu.util.Calendar.getInstance(TimeZone.getTimeZone(getTimeZone().getId()), getSessionContext().getULocale());
+					DateFormat timeFormatter = DateFormat.getTimeInstance(calendar, DateFormat.SHORT, getSessionContext().getULocale());
+					return timeFormatter.format(Date.from(event.getStartInstant()))
+							+ "\u2009-\u2009"
+							+ timeFormatter.format(Date.from(event.getEndInstant()));
+				}));
+	}
+
+	public SimpleCalendar(List<SimpleCalendarEvent<PAYLOAD>> events) {
+		super(new SimpleCalendarModel<>(events));
+	}
+
+	public void setEvents(List<SimpleCalendarEvent<PAYLOAD>> events) {
+		((SimpleCalendarModel<PAYLOAD>) getModel()).setEvents(events);
+	}
+
+	public void addEvent(SimpleCalendarEvent<PAYLOAD> event) {
+		((SimpleCalendarModel<PAYLOAD>) getModel()).addEvent(event);
+	}
+
+	public void removeEvent(SimpleCalendarEvent<PAYLOAD> event) {
+		((SimpleCalendarModel<PAYLOAD>) getModel()).removeEvent(event);
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/calendar/SimpleCalendarEvent.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/calendar/SimpleCalendarEvent.java
new file mode 100644
index 000000000..b4b08fac3
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/calendar/SimpleCalendarEvent.java
@@ -0,0 +1,90 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.calendar;
+
+import org.teamapps.icons.Icon;
+
+import java.time.Instant;
+
+public class SimpleCalendarEvent<PAYLOAD> extends AbstractCalendarEvent {
+
+	private Icon icon;
+	private String image;
+	private String caption;
+	private String badge;
+
+	private PAYLOAD payload;
+
+	public SimpleCalendarEvent(Instant start, Instant end, Icon icon, String caption) {
+		super(start, end);
+		this.icon = icon;
+		this.caption = caption;
+	}
+
+	public SimpleCalendarEvent(long start, long end, Icon icon, String caption) {
+		super(start, end);
+		this.icon = icon;
+		this.caption = caption;
+	}
+
+	public Icon getIcon() {
+		return icon;
+	}
+
+	public void setIcon(Icon icon) {
+		this.icon = icon;
+	}
+
+	public String getImage() {
+		return image;
+	}
+
+	public void setImage(String image) {
+		this.image = image;
+	}
+
+	public String getTitle() {
+		return caption;
+	}
+
+	public String getCaption() {
+		return caption;
+	}
+
+	public void setCaption(String caption) {
+		this.caption = caption;
+	}
+
+	public String getBadge() {
+		return badge;
+	}
+
+	public void setBadge(String badge) {
+		this.badge = badge;
+	}
+
+	public PAYLOAD getPayload() {
+		return payload;
+	}
+
+	public void setPayload(PAYLOAD payload) {
+		this.payload = payload;
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/calendar/SimpleCalendarModel.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/calendar/SimpleCalendarModel.java
new file mode 100644
index 000000000..441e18158
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/calendar/SimpleCalendarModel.java
@@ -0,0 +1,65 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.calendar;
+
+import java.time.Instant;
+import java.util.ArrayList;
+import java.util.List;
+import java.util.stream.Collectors;
+
+public class SimpleCalendarModel<PAYLOAD> extends AbstractCalendarModel<SimpleCalendarEvent<PAYLOAD>> {
+
+	private List<SimpleCalendarEvent<PAYLOAD>> events;
+
+	public SimpleCalendarModel(List<SimpleCalendarEvent<PAYLOAD>> events) {
+		this.events = new ArrayList<>(events);
+	}
+
+	public SimpleCalendarModel() {
+		this(new ArrayList<>());
+	}
+
+	@Override
+	public List<SimpleCalendarEvent<PAYLOAD>> getEventsForInterval(Instant start, Instant end) {
+		return events.stream()
+				.filter(event -> event.getEnd() >= start.toEpochMilli() && event.getStart() < end.toEpochMilli())
+				.collect(Collectors.toList());
+	}
+
+	public List<SimpleCalendarEvent<PAYLOAD>> getEvents() {
+		return events;
+	}
+
+	public void setEvents(List<SimpleCalendarEvent<PAYLOAD>> events) {
+		this.events = events;
+		this.onCalendarDataChanged.fire(null);
+	}
+
+	public void addEvent(SimpleCalendarEvent<PAYLOAD> event) {
+		this.events.add(event);
+		this.onCalendarDataChanged.fire(null);
+	}
+
+	public void removeEvent(SimpleCalendarEvent<PAYLOAD> event) {
+		this.events.remove(event);
+		this.onCalendarDataChanged.fire(null);
+	}
+	
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/calendar/ViewChangedEventData.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/calendar/ViewChangedEventData.java
index 504b3566f..08731a5a7 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/calendar/ViewChangedEventData.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/calendar/ViewChangedEventData.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/calendar/WeeHeaderClickedEventData.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/calendar/WeeHeaderClickedEventData.java
new file mode 100644
index 000000000..53f37f110
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/calendar/WeeHeaderClickedEventData.java
@@ -0,0 +1,54 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.calendar;
+
+import java.time.LocalDate;
+import java.time.ZoneId;
+
+public class WeeHeaderClickedEventData {
+
+	private final ZoneId zoneId;
+	private final int year;
+	private final int week;
+	private final LocalDate startOfWeek;
+
+	public WeeHeaderClickedEventData(ZoneId zoneId, int year, int week, LocalDate startOfWeek) {
+		this.zoneId = zoneId;
+		this.year = year;
+		this.week = week;
+		this.startOfWeek = startOfWeek;
+	}
+
+	public ZoneId getZoneId() {
+		return zoneId;
+	}
+
+	public int getYear() {
+		return year;
+	}
+
+	public int getWeek() {
+		return week;
+	}
+
+	public LocalDate getStartOfWeek() {
+		return startOfWeek;
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/charting/ChartLegendStyle.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/charting/ChartLegendStyle.java
index 1ed892900..b655c741a 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/charting/ChartLegendStyle.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/charting/ChartLegendStyle.java
@@ -1,3 +1,22 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
 package org.teamapps.ux.component.charting;
 
 import org.teamapps.dto.UiChartLegendStyle;
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/charting/DataPointWeighting.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/charting/DataPointWeighting.java
index 7f583c3fc..9a421d4e3 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/charting/DataPointWeighting.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/charting/DataPointWeighting.java
@@ -1,3 +1,22 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
 package org.teamapps.ux.component.charting;
 
 import org.teamapps.dto.UiDataPointWeighting;
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/charting/common/GraphNodeIcon.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/charting/common/GraphNodeIcon.java
new file mode 100644
index 000000000..7072aaaa3
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/charting/common/GraphNodeIcon.java
@@ -0,0 +1,47 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.charting.common;
+
+import org.teamapps.dto.UiTreeGraphNodeIcon;
+import org.teamapps.icons.Icon;
+import org.teamapps.ux.session.CurrentSessionContext;
+
+public class GraphNodeIcon {
+
+	private final Icon icon;
+	private final int size;
+
+	public GraphNodeIcon(Icon icon, int size) {
+		this.icon = icon;
+		this.size = size;
+	}
+
+	public UiTreeGraphNodeIcon createUiTreeGraphNodeIcon() {
+		return new UiTreeGraphNodeIcon(CurrentSessionContext.get().resolveIcon(icon), size);
+	}
+
+	public Icon getIcon() {
+		return icon;
+	}
+
+	public int getSize() {
+		return size;
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/charting/common/GraphNodeImage.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/charting/common/GraphNodeImage.java
new file mode 100644
index 000000000..5b0927f37
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/charting/common/GraphNodeImage.java
@@ -0,0 +1,143 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.charting.common;
+
+import org.teamapps.common.format.RgbaColor;
+import org.teamapps.common.format.Color;
+import org.teamapps.dto.UiTreeGraphNodeImage;
+
+public class GraphNodeImage {
+
+	public enum CornerShape {
+		ORIGINAL, ROUNDED, CIRCLE;
+
+		public UiTreeGraphNodeImage.CornerShape toUiCornerShape() {
+			return UiTreeGraphNodeImage.CornerShape.valueOf(this.name());
+		}
+	}
+	private String url;
+
+	private int width;
+	private int height;
+	private int centerTopDistance;
+	private int centerLeftDistance;
+	private CornerShape cornerShape = CornerShape.ROUNDED;
+	private boolean shadow = false;
+	private float borderWidth = 0;
+	private Color borderColor = new RgbaColor(100, 100, 100);
+
+	public GraphNodeImage(String url, int width, int height) {
+		this.url = url;
+		this.width = width;
+		this.height = height;
+	}
+
+	public UiTreeGraphNodeImage createUiTreeGraphNodeImage() {
+		UiTreeGraphNodeImage ui = new UiTreeGraphNodeImage(url, width, height);
+		ui.setCenterTopDistance(centerTopDistance);
+		ui.setCenterLeftDistance(centerLeftDistance);
+		ui.setCornerShape(cornerShape.toUiCornerShape());
+		ui.setShadow(shadow);
+		ui.setBorderWidth(borderWidth);
+		ui.setBorderColor(borderColor != null ? borderColor.toHtmlColorString(): null);
+		return ui;
+	}
+
+	public String getUrl() {
+		return url;
+	}
+
+	public GraphNodeImage setUrl(String url) {
+		this.url = url;
+		return this;
+	}
+
+	public int getWidth() {
+		return width;
+	}
+
+	public GraphNodeImage setWidth(int width) {
+		this.width = width;
+		return this;
+	}
+
+	public int getHeight() {
+		return height;
+	}
+
+	public GraphNodeImage setHeight(int height) {
+		this.height = height;
+		return this;
+	}
+
+	public int getCenterTopDistance() {
+		return centerTopDistance;
+	}
+
+	public GraphNodeImage setCenterTopDistance(int centerTopDistance) {
+		this.centerTopDistance = centerTopDistance;
+		return this;
+	}
+
+	public int getCenterLeftDistance() {
+		return centerLeftDistance;
+	}
+
+	public GraphNodeImage setCenterLeftDistance(int centerLeftDistance) {
+		this.centerLeftDistance = centerLeftDistance;
+		return this;
+	}
+
+	public CornerShape getCornerShape() {
+		return cornerShape;
+	}
+
+	public GraphNodeImage setCornerShape(CornerShape cornerShape) {
+		this.cornerShape = cornerShape;
+		return this;
+	}
+
+	public boolean isShadow() {
+		return shadow;
+	}
+
+	public GraphNodeImage setShadow(boolean shadow) {
+		this.shadow = shadow;
+		return this;
+	}
+
+	public float getBorderWidth() {
+		return borderWidth;
+	}
+
+	public GraphNodeImage setBorderWidth(float borderWidth) {
+		this.borderWidth = borderWidth;
+		return this;
+	}
+
+	public Color getBorderColor() {
+		return borderColor;
+	}
+
+	public GraphNodeImage setBorderColor(Color borderColor) {
+		this.borderColor = borderColor;
+		return this;
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/charting/forcelayout/ExpandedState.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/charting/forcelayout/ExpandedState.java
new file mode 100644
index 000000000..4c2e82e8d
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/charting/forcelayout/ExpandedState.java
@@ -0,0 +1,31 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.charting.forcelayout;
+
+import org.teamapps.dto.UiNetworkNode;
+
+public enum ExpandedState {
+
+	NOT_EXPANDABLE, EXPANDED, COLLAPSED;
+
+	public UiNetworkNode.ExpandState toExpandState() {
+		return UiNetworkNode.ExpandState.valueOf(this.name());
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/charting/forcelayout/ForceLayoutGraph.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/charting/forcelayout/ForceLayoutGraph.java
new file mode 100644
index 000000000..372313584
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/charting/forcelayout/ForceLayoutGraph.java
@@ -0,0 +1,202 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.charting.forcelayout;
+
+import org.teamapps.data.extract.BeanPropertyExtractor;
+import org.teamapps.data.extract.PropertyExtractor;
+import org.teamapps.data.extract.PropertyProvider;
+import org.teamapps.dto.UiClientRecord;
+import org.teamapps.dto.UiComponent;
+import org.teamapps.dto.UiEvent;
+import org.teamapps.dto.UiNetworkGraph;
+import org.teamapps.dto.UiNetworkLink;
+import org.teamapps.dto.UiNetworkNode;
+import org.teamapps.event.Event;
+import org.teamapps.ux.component.AbstractComponent;
+
+import java.util.ArrayList;
+import java.util.Collections;
+import java.util.List;
+import java.util.Map;
+import java.util.stream.Collectors;
+
+public class ForceLayoutGraph<RECORD> extends AbstractComponent {
+
+	public final Event<ForceLayoutNode<RECORD>> onNodeClicked = new Event<>();
+	public final Event<ForceLayoutNode<RECORD>> onNodeDoubleClicked = new Event<>();
+	public final Event<NodeExpandedOrCollapsedEvent<RECORD>> onNodeExpandedOrCollapsed = new Event<>();
+
+	private final List<ForceLayoutNode<RECORD>> nodes;
+	private final List<ForceLayoutLink<RECORD>> links;
+
+	private int animationDuration = 1000;
+	// private float gravity = 0.1f;
+	// private float theta = 0.3f;
+	// private float alpha = 0.1f;
+	// private int charge = -300;
+	// private int distance = 30;
+	// private Color highlightColor;
+
+	private PropertyProvider<RECORD> propertyProvider = new BeanPropertyExtractor<>();
+
+	public ForceLayoutGraph() {
+		this(Collections.emptyList(), Collections.emptyList());
+	}
+
+	public ForceLayoutGraph(List<ForceLayoutNode<RECORD>> nodes, List<ForceLayoutLink<RECORD>> links) {
+		this.nodes = new ArrayList<>(nodes);
+		this.links = new ArrayList<>(links);
+	}
+
+	public void setModel(ForceLayoutModel<RECORD> model) {
+		model.onNodesAdded.addListener(change -> {
+			addNodesAndLinks(change.getAddedNodes(), change.getAddedLinks());
+		});
+		model.onNodesRemoved.addListener(change -> {
+			removeNodesAndLinks(change.getRemovedNodes(), change.getRemovedLinks());
+		});
+	}
+
+	@Override
+	public UiComponent createUiComponent() {
+		List<UiNetworkNode> nodes = createUiNodes(this.nodes);
+		List<UiNetworkLink> links = createUiLinks(this.links);
+		UiNetworkGraph ui = new UiNetworkGraph(nodes, links, Collections.emptyList());
+		ui.setAnimationDuration(animationDuration);
+		mapAbstractUiComponentProperties(ui);
+		return ui;
+	}
+
+	private List<UiNetworkNode> createUiNodes(List<ForceLayoutNode<RECORD>> nodes) {
+		return nodes.stream()
+				.map(n -> createUiNode(n))
+				.collect(Collectors.toList());
+	}
+
+	private List<UiNetworkLink> createUiLinks(List<ForceLayoutLink<RECORD>> links) {
+		return links.stream()
+				.map(l -> l.toUiNetworkLink())
+				.collect(Collectors.toList());
+	}
+
+	private UiNetworkNode createUiNode(ForceLayoutNode<RECORD> node) {
+		UiNetworkNode uiNode = new UiNetworkNode(node.getId(), node.getWidth(), node.getHeight());
+		uiNode.setBackgroundColor(node.getBackgroundColor() != null ? node.getBackgroundColor().toHtmlColorString() : null);
+		uiNode.setBorderColor(node.getBorderColor() != null ? node.getBorderColor().toHtmlColorString() : null);
+		uiNode.setBorderWidth(node.getBorderWidth());
+		uiNode.setBorderRadius(node.getBorderRadius());
+		uiNode.setTemplate(node.getTemplate() != null ? node.getTemplate().createUiTemplate() : null);
+		uiNode.setRecord(node.getRecord() != null ? createUiRecord(node) : null);
+		uiNode.setExpandState(node.getExpandedState().toExpandState());
+		uiNode.setIcon(node.getIcon() != null ? node.getIcon().createUiTreeGraphNodeIcon() : null);
+		uiNode.setImage(node.getImage() != null ? node.getImage().createUiTreeGraphNodeImage() : null);
+		uiNode.setDistanceFactor(node.getDistanceFactor());
+		return uiNode;
+	}
+
+	private UiClientRecord createUiRecord(ForceLayoutNode<RECORD> node) {
+		UiClientRecord uiClientRecord = new UiClientRecord();
+		uiClientRecord.setValues(propertyProvider.getValues(node.getRecord(), node.getTemplate().getPropertyNames()));
+		return uiClientRecord;
+	}
+
+	@Override
+	public void handleUiEvent(UiEvent event) {
+		switch (event.getUiEventType()) {
+			case UI_NETWORK_GRAPH_NODE_CLICKED: {
+				UiNetworkGraph.NodeClickedEvent clickEvent = (UiNetworkGraph.NodeClickedEvent) event;
+				nodes.stream()
+						.filter(n -> n.getId().equals(clickEvent.getNodeId()))
+						.findFirst()
+						.ifPresent(onNodeClicked::fire);
+				break;
+			}
+			case UI_NETWORK_GRAPH_NODE_DOUBLE_CLICKED: {
+				UiNetworkGraph.NodeDoubleClickedEvent clickEvent = (UiNetworkGraph.NodeDoubleClickedEvent) event;
+				nodes.stream()
+						.filter(n -> n.getId().equals(clickEvent.getNodeId()))
+						.findFirst()
+						.ifPresent(onNodeDoubleClicked::fire);
+				break;
+			}
+			case UI_NETWORK_GRAPH_NODE_EXPANDED_OR_COLLAPSED:
+				UiNetworkGraph.NodeExpandedOrCollapsedEvent clickEvent = (UiNetworkGraph.NodeExpandedOrCollapsedEvent) event;
+				nodes.stream()
+						.filter(n -> n.getId().equals(clickEvent.getNodeId()))
+						.findFirst()
+						.ifPresent(n -> onNodeExpandedOrCollapsed.fire(new NodeExpandedOrCollapsedEvent<RECORD>(n, clickEvent.getExpanded())));
+				break;
+		}
+	}
+
+	public int getAnimationDuration() {
+		return animationDuration;
+	}
+
+	public void setAnimationDuration(int animationDuration) {
+		this.animationDuration = animationDuration;
+	}
+
+	public void addNodesAndLinks(List<ForceLayoutNode<RECORD>> nodes, List<ForceLayoutLink<RECORD>> links) {
+		this.nodes.addAll(nodes);
+		this.links.addAll(links);
+		queueCommandIfRendered(() -> new UiNetworkGraph.AddNodesAndLinksCommand(getId(), createUiNodes(nodes), createUiLinks(links)));
+	}
+
+	public void removeNodesAndLinks(List<ForceLayoutNode<RECORD>> nodes) {
+		List<ForceLayoutLink<RECORD>> linksToRemove = links.stream()
+				.filter(l -> nodes.contains(l.getSource()) || nodes.contains(l.getTarget()))
+				.collect(Collectors.toList());
+		removeNodesAndLinks(nodes, linksToRemove);
+	}
+
+	public void removeNodesAndLinks(List<ForceLayoutNode<RECORD>> nodes, List<ForceLayoutLink<RECORD>> links) {
+		this.nodes.removeAll(nodes);
+		this.links.removeAll(links);
+		List<String> nodeIds = nodes.stream().map(n -> n.getId()).collect(Collectors.toList());
+		Map<String, List<String>> linksBySourceNodeId = links.stream()
+				.collect(Collectors.groupingBy(l -> l.getSource().getId(), Collectors.mapping(l -> l.getTarget().getId(), Collectors.toList())));
+		queueCommandIfRendered(() -> new UiNetworkGraph.RemoveNodesAndLinksCommand(getId(), nodeIds, linksBySourceNodeId));
+	}
+
+	public List<ForceLayoutNode<RECORD>> getNodes() {
+		return Collections.unmodifiableList(nodes);
+	}
+
+	public List<ForceLayoutLink<RECORD>> getLinks() {
+		return Collections.unmodifiableList(links);
+	}
+
+	public PropertyProvider<RECORD> getPropertyProvider() {
+		return propertyProvider;
+	}
+
+	public void setPropertyProvider(PropertyProvider<RECORD> propertyProvider) {
+		this.propertyProvider = propertyProvider;
+	}
+
+	public void setPropertyExtractor(PropertyExtractor<RECORD> propertyExtractor) {
+		this.setPropertyProvider(propertyExtractor);
+	}
+
+	public void setDistance(float linkDistanceFactor, float nodeDistanceFactor) {
+		queueCommandIfRendered(() -> new UiNetworkGraph.SetDistanceCommand(getId(), linkDistanceFactor, nodeDistanceFactor));
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/charting/forcelayout/ForceLayoutLink.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/charting/forcelayout/ForceLayoutLink.java
new file mode 100644
index 000000000..c735d7b7d
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/charting/forcelayout/ForceLayoutLink.java
@@ -0,0 +1,89 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.charting.forcelayout;
+
+import org.teamapps.common.format.RgbaColor;
+import org.teamapps.common.format.Color;
+import org.teamapps.dto.UiNetworkLink;
+
+public class ForceLayoutLink<RECORD> {
+
+	private final ForceLayoutNode<RECORD> source;
+	private final ForceLayoutNode<RECORD> target;
+
+	private float lineWidth = 1f;
+	private Color lineColor = RgbaColor.MATERIAL_GREY_500;
+	private String lineDashArray;
+	private int linkLength = 150;
+
+	public ForceLayoutLink(ForceLayoutNode<RECORD> source, ForceLayoutNode<RECORD> target) {
+		this.source = source;
+		this.target = target;
+	}
+
+	public UiNetworkLink toUiNetworkLink() {
+		UiNetworkLink ui = new UiNetworkLink(source.getId(), target.getId());
+		ui.setLineWidth(lineWidth);
+		ui.setLineColor(lineColor != null ? lineColor.toHtmlColorString(): null);
+		ui.setLineDashArray(lineDashArray);
+		ui.setLinkLength(linkLength);
+		return ui;
+	}
+
+	public ForceLayoutNode<RECORD> getSource() {
+		return source;
+	}
+
+	public ForceLayoutNode<RECORD> getTarget() {
+		return target;
+	}
+
+	public float getLineWidth() {
+		return lineWidth;
+	}
+
+	public void setLineWidth(float lineWidth) {
+		this.lineWidth = lineWidth;
+	}
+
+	public Color getLineColor() {
+		return lineColor;
+	}
+
+	public void setLineColor(Color lineColor) {
+		this.lineColor = lineColor;
+	}
+
+	public String getLineDashArray() {
+		return lineDashArray;
+	}
+
+	public void setLineDashArray(String lineDashArray) {
+		this.lineDashArray = lineDashArray;
+	}
+
+	public int getLinkLength() {
+		return linkLength;
+	}
+
+	public void setLinkLength(int linkLength) {
+		this.linkLength = linkLength;
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/charting/forcelayout/ForceLayoutModel.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/charting/forcelayout/ForceLayoutModel.java
new file mode 100644
index 000000000..c782bf90a
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/charting/forcelayout/ForceLayoutModel.java
@@ -0,0 +1,133 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.charting.forcelayout;
+
+import org.teamapps.event.Event;
+
+import java.util.*;
+import java.util.stream.Collectors;
+
+public class ForceLayoutModel<RECORD> {
+
+	public Event<GraphChangeOperation<RECORD>> onNodesAdded = new Event<>();
+	public Event<GraphChangeOperation<RECORD>> onNodesRemoved = new Event<>();
+
+	private final List<ForceLayoutNode<RECORD>> displayedNodes = new ArrayList<>();
+	private final List<ForceLayoutLink<RECORD>> displayedLinks = new ArrayList<>();
+	private final Map<RECORD, ForceLayoutNode<RECORD>> graphNodeByNode = new HashMap<>();
+	private final Set<RECORD> availableNodes = new HashSet<>();
+	private final Set<LinkId<RECORD>> availableLinks = new HashSet<>();
+
+
+	public boolean containsNode(RECORD record) {
+		return availableNodes.contains(record);
+	}
+
+	public boolean containsNode(RECORD record, GraphChangeOperation<RECORD> changeOperation) {
+		return (getGraphNode(record, changeOperation) != null);
+	}
+
+	public boolean containsLink(RECORD node1, RECORD node2) {
+		return availableLinks.contains(getLinkId(node1, node2));
+	}
+
+	public void removeAll() {
+		onNodesRemoved.fire(new GraphChangeOperation<>(displayedNodes, displayedLinks, true));
+		availableNodes.clear();
+		availableLinks.clear();
+		displayedLinks.clear();
+		displayedNodes.clear();
+		graphNodeByNode.clear();
+	}
+
+	public void applyChange(GraphChangeOperation<RECORD> changeOperation) {
+		if (changeOperation.containsAddOperations()) {
+			changeOperation.getAddedLinks().forEach(link -> {
+				availableLinks.add(getLinkId(link.getSource().getRecord(), link.getTarget().getRecord()));
+			});
+			changeOperation.getAddedNodes().forEach(graphNode -> {
+				RECORD record = graphNode.getRecord();
+				graphNodeByNode.put(record, graphNode);
+				availableNodes.add(record);
+			});
+			displayedNodes.addAll(changeOperation.getAddedNodes());
+			displayedLinks.addAll(changeOperation.getAddedLinks());
+			onNodesAdded.fire(changeOperation);
+		}
+		if (changeOperation.containsRemoveOperations()) {
+			changeOperation.getRemovedLinks().forEach(link -> {
+				availableLinks.remove(getLinkId(link.getSource().getRecord(), link.getTarget().getRecord()));
+			});
+			changeOperation.getRemovedNodes().forEach(graphNode -> {
+				RECORD record = graphNode.getRecord();
+				graphNodeByNode.remove(record);
+				availableNodes.remove(record);
+			});
+			displayedNodes.removeAll(changeOperation.getRemovedNodes());
+			displayedLinks.removeAll(changeOperation.getRemovedLinks());
+			onNodesRemoved.fire(changeOperation);
+		}
+	}
+
+	public ForceLayoutNode<RECORD> getGraphNode(RECORD record, GraphChangeOperation<RECORD> changeOperation) {
+		ForceLayoutNode<RECORD> graphNode = graphNodeByNode.get(record);
+		if (graphNode == null) {
+			graphNode = changeOperation.getGraphNodeByNode().get(record);
+		}
+		return graphNode;
+	}
+
+	public void removeHigherLevels(ForceLayoutNode<RECORD> graphNode) {
+		List<ForceLayoutLink<RECORD>> connectedLinks = new ArrayList<>();
+		Set<ForceLayoutNode<RECORD>> connectedNodes = new HashSet<>();
+		int level = graphNode.getLevel();
+		getConnectedNodesAndLinks(graphNode, connectedLinks, connectedNodes, true, level);
+		applyChange(new GraphChangeOperation<>(new ArrayList<>(connectedNodes), connectedLinks, true));
+	}
+
+	private void getConnectedNodesAndLinks(ForceLayoutNode<RECORD> node, List<ForceLayoutLink<RECORD>> connectedLinks, Set<ForceLayoutNode<RECORD>> connectedNodes, boolean fullSubTree, int level) {
+		List<ForceLayoutLink<RECORD>> links = displayedLinks.stream()
+				.filter(link -> (link.getSource().equals(node) && (link.getTarget().getLevel() > level)
+						|| (link.getTarget().equals(node) && (link.getSource()).getLevel() > level)))
+				.collect(Collectors.toList());
+		List<ForceLayoutNode<RECORD>> nodes = new ArrayList<>();
+		links.forEach(link -> {
+			if (!link.getSource().equals(node)) {
+				if (!connectedNodes.contains(link.getSource())) {
+					nodes.add(link.getSource());
+				}
+			} else {
+				if (!connectedNodes.contains(link.getTarget())) {
+					nodes.add(link.getTarget());
+				}
+			}
+		});
+
+		connectedLinks.addAll(links);
+		connectedNodes.addAll(nodes);
+		if (fullSubTree) {
+			nodes.forEach(subNode -> getConnectedNodesAndLinks(subNode, connectedLinks, connectedNodes, true, level));
+		}
+	}
+
+	public LinkId<RECORD> getLinkId(RECORD node1, RECORD node2) {
+		return new LinkId<>(node1, node2);
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/charting/forcelayout/ForceLayoutNode.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/charting/forcelayout/ForceLayoutNode.java
new file mode 100644
index 000000000..d4906b4f0
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/charting/forcelayout/ForceLayoutNode.java
@@ -0,0 +1,169 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.charting.forcelayout;
+
+import org.teamapps.common.format.RgbaColor;
+import org.teamapps.common.format.Color;
+import org.teamapps.ux.component.charting.common.GraphNodeIcon;
+import org.teamapps.ux.component.charting.common.GraphNodeImage;
+import org.teamapps.ux.component.template.Template;
+
+import java.util.UUID;
+
+public class ForceLayoutNode<RECORD> {
+
+	private final String id = UUID.randomUUID().toString();
+	private final RECORD record;
+
+	private int width = 100;
+	private int height = 100;
+	private Color backgroundColor = new RgbaColor(255, 255, 255);
+	private Color borderColor = new RgbaColor(100, 100, 100);
+	private float borderWidth = 1;
+	private float borderRadius = 3;
+	private float distanceFactor = 0.6f;
+
+	private GraphNodeImage image;
+	private GraphNodeIcon icon;
+
+	private Template template;
+	private int level;
+
+	private ExpandedState expandedState = ExpandedState.NOT_EXPANDABLE;
+
+	public ForceLayoutNode(RECORD record, int width, int height) {
+		this.record = record;
+		this.width = width;
+		this.height = height;
+	}
+
+	protected String getId() {
+		return id;
+	}
+
+	public int getWidth() {
+		return width;
+	}
+
+	public ForceLayoutNode<RECORD> setWidth(int width) {
+		this.width = width;
+		return this;
+	}
+
+	public int getHeight() {
+		return height;
+	}
+
+	public ForceLayoutNode<RECORD> setHeight(int height) {
+		this.height = height;
+		return this;
+	}
+
+	public Color getBackgroundColor() {
+		return backgroundColor;
+	}
+
+	public ForceLayoutNode<RECORD> setBackgroundColor(Color backgroundColor) {
+		this.backgroundColor = backgroundColor;
+		return this;
+	}
+
+	public Color getBorderColor() {
+		return borderColor;
+	}
+
+	public ForceLayoutNode<RECORD> setBorderColor(Color borderColor) {
+		this.borderColor = borderColor;
+		return this;
+	}
+
+	public float getBorderWidth() {
+		return borderWidth;
+	}
+
+	public ForceLayoutNode<RECORD> setBorderWidth(float borderWidth) {
+		this.borderWidth = borderWidth;
+		return this;
+	}
+
+	public float getBorderRadius() {
+		return borderRadius;
+	}
+
+	public ForceLayoutNode<RECORD> setBorderRadius(float borderRadius) {
+		this.borderRadius = borderRadius;
+		return this;
+	}
+
+	public GraphNodeImage getImage() {
+		return image;
+	}
+
+	public ForceLayoutNode<RECORD> setImage(GraphNodeImage image) {
+		this.image = image;
+		return this;
+	}
+
+	public GraphNodeIcon getIcon() {
+		return icon;
+	}
+
+	public ForceLayoutNode<RECORD> setIcon(GraphNodeIcon icon) {
+		this.icon = icon;
+		return this;
+	}
+
+	public Template getTemplate() {
+		return template;
+	}
+
+	public ForceLayoutNode<RECORD> setTemplate(Template template) {
+		this.template = template;
+		return this;
+	}
+
+	public RECORD getRecord() {
+		return record;
+	}
+
+	public ExpandedState getExpandedState() {
+		return expandedState;
+	}
+
+	public void setExpandedState(ExpandedState expandedState) {
+		this.expandedState = expandedState;
+	}
+
+	public float getDistanceFactor() {
+		return distanceFactor;
+	}
+
+	public void setDistanceFactor(float distanceFactor) {
+		this.distanceFactor = distanceFactor;
+	}
+
+	public int getLevel() {
+		return level;
+	}
+
+	public void setLevel(int level) {
+		this.level = level;
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/charting/forcelayout/GraphChangeOperation.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/charting/forcelayout/GraphChangeOperation.java
new file mode 100644
index 000000000..1070c3173
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/charting/forcelayout/GraphChangeOperation.java
@@ -0,0 +1,102 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.charting.forcelayout;
+
+
+import java.util.ArrayList;
+import java.util.HashMap;
+import java.util.List;
+import java.util.Map;
+
+public class GraphChangeOperation<RECORD> {
+
+	private final List<ForceLayoutNode<RECORD>> addedNodes = new ArrayList<>();
+	private List<ForceLayoutLink<RECORD>> addedLinks = new ArrayList<>();
+	private List<ForceLayoutNode<RECORD>> removedNodes = new ArrayList<>();
+	private List<ForceLayoutLink<RECORD>> removedLinks = new ArrayList<>();
+
+	private final Map<RECORD, ForceLayoutNode<RECORD>> graphNodeByNode = new HashMap<>();
+
+	public GraphChangeOperation() {
+	}
+
+	public GraphChangeOperation(List<ForceLayoutNode<RECORD>> nodes, List<ForceLayoutLink<RECORD>> links, boolean remove) {
+		if (remove) {
+			this.removedNodes = nodes;
+			this.removedLinks = links;
+		} else {
+			addedNodes.forEach(record -> addNode(record));
+			this.addedLinks = links;
+		}
+	}
+
+	public boolean containsAddOperations() {
+		return !addedNodes.isEmpty() || !addedLinks.isEmpty();
+	}
+
+	public boolean containsRemoveOperations() {
+		return !removedNodes.isEmpty() || !removedLinks.isEmpty();
+	}
+
+	public void addNode(ForceLayoutNode<RECORD> record) {
+		addedNodes.add(record);
+		graphNodeByNode.put(record.getRecord(), record);
+	}
+
+	public void addLink(ForceLayoutLink<RECORD> link) {
+		addedLinks.add(link);
+	}
+
+	public List<ForceLayoutNode<RECORD>> getAddedNodes() {
+		return addedNodes;
+	}
+
+	public void setAddedNodes(List<ForceLayoutNode<RECORD>> addedNodes) {
+		addedNodes.forEach(record -> addNode(record));
+	}
+
+	public List<ForceLayoutLink<RECORD>> getAddedLinks() {
+		return addedLinks;
+	}
+
+	public void setAddedLinks(List<ForceLayoutLink<RECORD>> addedLinks) {
+		this.addedLinks = addedLinks;
+	}
+
+	public List<ForceLayoutNode<RECORD>> getRemovedNodes() {
+		return removedNodes;
+	}
+
+	public void setRemovedNodes(List<ForceLayoutNode<RECORD>> removedNodes) {
+		this.removedNodes = removedNodes;
+	}
+
+	public List<ForceLayoutLink<RECORD>> getRemovedLinks() {
+		return removedLinks;
+	}
+
+	public void setRemovedLinks(List<ForceLayoutLink<RECORD>> removedLinks) {
+		this.removedLinks = removedLinks;
+	}
+
+	public Map<RECORD, ForceLayoutNode<RECORD>> getGraphNodeByNode() {
+		return graphNodeByNode;
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/charting/forcelayout/LinkId.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/charting/forcelayout/LinkId.java
new file mode 100644
index 000000000..1f51a192e
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/charting/forcelayout/LinkId.java
@@ -0,0 +1,47 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.charting.forcelayout;
+
+import java.util.Objects;
+
+public class LinkId<RECORD> {
+
+	private final RECORD source;
+	private final RECORD target;
+
+	public LinkId(RECORD source, RECORD target) {
+		this.source = source;
+		this.target = target;
+	}
+
+	@Override
+	public boolean equals(Object o) {
+		if (this == o) return true;
+		if (o == null || getClass() != o.getClass()) return false;
+		LinkId<?> linkId = (LinkId<?>) o;
+		return (source.equals(linkId.source) && target.equals(linkId.target)) ||
+				(source.equals(linkId.target) && target.equals(linkId.source));
+	}
+
+	@Override
+	public int hashCode() {
+		return Objects.hashCode(source) + Objects.hashCode(target);
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/charting/forcelayout/NodeExpandedOrCollapsedEvent.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/charting/forcelayout/NodeExpandedOrCollapsedEvent.java
new file mode 100644
index 000000000..e29c6379a
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/charting/forcelayout/NodeExpandedOrCollapsedEvent.java
@@ -0,0 +1,39 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.charting.forcelayout;
+
+public class NodeExpandedOrCollapsedEvent<RECORD> {
+
+	private final ForceLayoutNode<RECORD> node;
+	private final boolean expanded;
+
+	public NodeExpandedOrCollapsedEvent(ForceLayoutNode<RECORD> node, boolean expanded) {
+		this.node = node;
+		this.expanded = expanded;
+	}
+
+	public ForceLayoutNode<RECORD> getNode() {
+		return node;
+	}
+
+	public boolean isExpanded() {
+		return expanded;
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/charting/pie/ChartNamedDataPoint.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/charting/pie/ChartNamedDataPoint.java
index cf126f449..8f5d68397 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/charting/pie/ChartNamedDataPoint.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/charting/pie/ChartNamedDataPoint.java
@@ -1,8 +1,26 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
 package org.teamapps.ux.component.charting.pie;
 
 import org.teamapps.common.format.Color;
 import org.teamapps.dto.UiChartNamedDataPoint;
-import org.teamapps.util.UiUtil;
 
 public class ChartNamedDataPoint {
 
@@ -18,7 +36,7 @@ public ChartNamedDataPoint(String name, double value, Color color) {
 
 	public UiChartNamedDataPoint createUiChartNamedDataPoint() {
 		UiChartNamedDataPoint ui = new UiChartNamedDataPoint(name, value);
-		ui.setColor(UiUtil.createUiColor(color));
+		ui.setColor(color != null ? color.toHtmlColorString() : null);
 		return ui;
 	}
 
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/charting/pie/PieChart.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/charting/pie/PieChart.java
index e8f19aabc..9ca993ce4 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/charting/pie/PieChart.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/charting/pie/PieChart.java
@@ -1,6 +1,24 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
 package org.teamapps.ux.component.charting.pie;
 
-import org.jetbrains.annotations.NotNull;
 import org.teamapps.dto.UiChartNamedDataPoint;
 import org.teamapps.dto.UiComponent;
 import org.teamapps.dto.UiEvent;
@@ -38,7 +56,8 @@ public PieChart(List<ChartNamedDataPoint> dataPoints) {
 
 	@Override
 	public UiComponent createUiComponent() {
-		UiPieChart uiPieChart = new UiPieChart(getId());
+		UiPieChart uiPieChart = new UiPieChart();
+		mapAbstractUiComponentProperties(uiPieChart);
 		uiPieChart.setDataPointWeighting(dataPointWeighting.toUiDataPointWeighting());
 		uiPieChart.setRotation3D(rotation3D);
 		uiPieChart.setHeight3D(height3D);
@@ -61,7 +80,6 @@ public void handleUiEvent(UiEvent event) {
 		}
 	}
 
-	@NotNull
 	private List<UiChartNamedDataPoint> createUiDataPoints() {
 		return dataPoints != null ? dataPoints.stream()
 				.map(ChartNamedDataPoint::createUiChartNamedDataPoint)
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/charting/tree/BaseTreeGraphNode.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/charting/tree/BaseTreeGraphNode.java
new file mode 100644
index 000000000..5c189d61e
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/charting/tree/BaseTreeGraphNode.java
@@ -0,0 +1,166 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.charting.tree;
+
+import org.teamapps.common.format.RgbaColor;
+import org.teamapps.common.format.Color;
+import org.teamapps.ux.component.charting.common.GraphNodeIcon;
+import org.teamapps.ux.component.charting.common.GraphNodeImage;
+import org.teamapps.ux.component.template.Template;
+
+import java.util.UUID;
+
+public class BaseTreeGraphNode<RECORD> {
+	private final String id = UUID.randomUUID().toString();
+	private int width;
+	private int height;
+	private Color backgroundColor = new RgbaColor(255, 255, 255);
+	private Color borderColor = new RgbaColor(100, 100, 100);
+	private float borderWidth = 1;
+	private float borderRadius = 3;
+	private GraphNodeImage image;
+	private GraphNodeIcon icon;
+	private Template template;
+	private RECORD record;
+	private Color connectorLineColor = new RgbaColor(100, 100, 100);
+	private int connectorLineWidth;
+	private String dashArray;
+
+	protected String getId() {
+		return id;
+	}
+
+	public int getWidth() {
+		return width;
+	}
+
+	public BaseTreeGraphNode<RECORD> setWidth(int width) {
+		this.width = width;
+		return this;
+	}
+
+	public int getHeight() {
+		return height;
+	}
+
+	public BaseTreeGraphNode<RECORD> setHeight(int height) {
+		this.height = height;
+		return this;
+	}
+
+	public Color getBackgroundColor() {
+		return backgroundColor;
+	}
+
+	public BaseTreeGraphNode<RECORD> setBackgroundColor(Color backgroundColor) {
+		this.backgroundColor = backgroundColor;
+		return this;
+	}
+
+	public Color getBorderColor() {
+		return borderColor;
+	}
+
+	public BaseTreeGraphNode<RECORD> setBorderColor(Color borderColor) {
+		this.borderColor = borderColor;
+		return this;
+	}
+
+	public float getBorderWidth() {
+		return borderWidth;
+	}
+
+	public BaseTreeGraphNode<RECORD> setBorderWidth(float borderWidth) {
+		this.borderWidth = borderWidth;
+		return this;
+	}
+
+	public float getBorderRadius() {
+		return borderRadius;
+	}
+
+	public BaseTreeGraphNode<RECORD> setBorderRadius(float borderRadius) {
+		this.borderRadius = borderRadius;
+		return this;
+	}
+
+	public GraphNodeImage getImage() {
+		return image;
+	}
+
+	public BaseTreeGraphNode<RECORD> setImage(GraphNodeImage image) {
+		this.image = image;
+		return this;
+	}
+
+	public GraphNodeIcon getIcon() {
+		return icon;
+	}
+
+	public BaseTreeGraphNode<RECORD> setIcon(GraphNodeIcon icon) {
+		this.icon = icon;
+		return this;
+	}
+
+	public Template getTemplate() {
+		return template;
+	}
+
+	public BaseTreeGraphNode<RECORD> setTemplate(Template template) {
+		this.template = template;
+		return this;
+	}
+
+	public RECORD getRecord() {
+		return record;
+	}
+
+	public BaseTreeGraphNode<RECORD> setRecord(RECORD record) {
+		this.record = record;
+		return this;
+	}
+
+	public Color getConnectorLineColor() {
+		return connectorLineColor;
+	}
+
+	public BaseTreeGraphNode<RECORD> setConnectorLineColor(Color connectorLineColor) {
+		this.connectorLineColor = connectorLineColor;
+		return this;
+	}
+
+	public int getConnectorLineWidth() {
+		return connectorLineWidth;
+	}
+
+	public BaseTreeGraphNode<RECORD> setConnectorLineWidth(int connectorLineWidth) {
+		this.connectorLineWidth = connectorLineWidth;
+		return this;
+	}
+
+	public String getDashArray() {
+		return dashArray;
+	}
+
+	public BaseTreeGraphNode<RECORD> setDashArray(String dashArray) {
+		this.dashArray = dashArray;
+		return this;
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/charting/tree/NodeExpandedOrCollapsedEvent.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/charting/tree/NodeExpandedOrCollapsedEvent.java
new file mode 100644
index 000000000..9c5d04b67
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/charting/tree/NodeExpandedOrCollapsedEvent.java
@@ -0,0 +1,45 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.charting.tree;
+
+public class NodeExpandedOrCollapsedEvent<RECORD> {
+
+	private final TreeGraphNode<RECORD> node;
+	private final boolean expanded;
+	private final boolean lazyLoad;
+
+	public NodeExpandedOrCollapsedEvent(TreeGraphNode<RECORD> node, boolean expanded, boolean lazyLoad) {
+		this.node = node;
+		this.expanded = expanded;
+		this.lazyLoad = lazyLoad;
+	}
+
+	public TreeGraphNode<RECORD> getNode() {
+		return node;
+	}
+
+	public boolean isExpanded() {
+		return expanded;
+	}
+
+	public boolean isLazyLoad() {
+		return lazyLoad;
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/charting/tree/SideListExpandedOrCollapsedEvent.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/charting/tree/SideListExpandedOrCollapsedEvent.java
new file mode 100644
index 000000000..043e96df6
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/charting/tree/SideListExpandedOrCollapsedEvent.java
@@ -0,0 +1,40 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.charting.tree;
+
+public class SideListExpandedOrCollapsedEvent<RECORD> {
+
+	private final TreeGraphNode<RECORD> node;
+	private final boolean expanded;
+
+	public SideListExpandedOrCollapsedEvent(TreeGraphNode<RECORD> node, boolean expanded) {
+		this.node = node;
+		this.expanded = expanded;
+	}
+
+	public TreeGraphNode<RECORD> getNode() {
+		return node;
+	}
+
+	public boolean isExpanded() {
+		return expanded;
+	}
+
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/charting/tree/TreeGraph.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/charting/tree/TreeGraph.java
new file mode 100644
index 000000000..9c5ce3126
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/charting/tree/TreeGraph.java
@@ -0,0 +1,374 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.charting.tree;
+
+import org.teamapps.data.extract.BeanPropertyExtractor;
+import org.teamapps.data.extract.PropertyExtractor;
+import org.teamapps.data.extract.PropertyProvider;
+import org.teamapps.dto.UiBaseTreeGraphNode;
+import org.teamapps.dto.UiClientRecord;
+import org.teamapps.dto.UiEvent;
+import org.teamapps.dto.UiTreeGraph;
+import org.teamapps.dto.UiTreeGraphNode;
+import org.teamapps.event.Event;
+import org.teamapps.ux.component.AbstractComponent;
+import org.teamapps.ux.component.template.Template;
+
+import java.util.ArrayList;
+import java.util.Collection;
+import java.util.HashSet;
+import java.util.LinkedHashMap;
+import java.util.List;
+import java.util.Set;
+import java.util.stream.Collectors;
+
+public class TreeGraph<RECORD> extends AbstractComponent {
+
+	public final Event<TreeGraphNode<RECORD>> onNodeClicked = new Event<>();
+	public final Event<NodeExpandedOrCollapsedEvent<RECORD>> onNodeExpandedOrCollapsed = new Event<>();
+	public final Event<NodeExpandedOrCollapsedEvent<RECORD>> onParentExpandedOrCollapsed = new Event<>();
+	public final Event<SideListExpandedOrCollapsedEvent<RECORD>> onSideListExpandedOrCollapsed = new Event<>();
+
+	private float zoomFactor;
+	private boolean compact = false;
+	private int verticalLayerGap = 36;
+	private int horizontalSiblingGap = 20;
+	private int horizontalNonSignlingGap = 36;
+	private int sideListIndent = 20;
+	private int sideListVerticalGap = 20;
+
+	private final LinkedHashMap<String, TreeGraphNode<RECORD>> nodesById = new LinkedHashMap<>();
+	private PropertyProvider<RECORD> propertyProvider = new BeanPropertyExtractor<>();
+
+	public TreeGraph() {
+	}
+
+	@Override
+	public UiTreeGraph createUiComponent() {
+		UiTreeGraph ui = new UiTreeGraph();
+		mapAbstractUiComponentProperties(ui);
+		ui.setNodes(createUiNodes(nodesById.values()));
+		ui.setZoomFactor(zoomFactor);
+		ui.setCompact(compact);
+		ui.setVerticalLayerGap(verticalLayerGap);
+		ui.setSideListIndent(sideListIndent);
+		ui.setSideListVerticalGap(sideListVerticalGap);
+		ui.setHorizontalSiblingGap(horizontalSiblingGap);
+		ui.setHorizontalNonSignlingGap(horizontalNonSignlingGap);
+		return ui;
+	}
+
+	private List<UiTreeGraphNode> createUiNodes(Collection<TreeGraphNode<RECORD>> nodes) {
+		return nodes.stream()
+				.map(this::createUiNode)
+				.collect(Collectors.toList());
+	}
+
+	private UiTreeGraphNode createUiNode(TreeGraphNode<RECORD> node) {
+		UiTreeGraphNode uiNode = new UiTreeGraphNode(node.getId(), node.getWidth(), node.getHeight());
+		mapBaseTreeGraphNodeAttributes(node, uiNode);
+		uiNode.setParentId(node.getParent() != null ? node.getParent().getId() : null);
+		uiNode.setParentExpandable(node.isParentExpandable());
+		uiNode.setParentExpanded(node.isParentExpanded());
+		uiNode.setExpanded(node.isExpanded());
+		uiNode.setHasLazyChildren(node.isHasLazyChildren());
+		uiNode.setSideListNodes(node.getSideListNodes() != null ? node.getSideListNodes().stream().map(this::createBaseUiNode).collect(Collectors.toList()) : null);
+		uiNode.setSideListExpanded(node.isSideListExpanded());
+		return uiNode;
+	}
+
+	private UiBaseTreeGraphNode createBaseUiNode(BaseTreeGraphNode<RECORD> node) {
+		UiBaseTreeGraphNode uiNode = new UiBaseTreeGraphNode(node.getId(), node.getWidth(), node.getHeight());
+		mapBaseTreeGraphNodeAttributes(node, uiNode);
+		return uiNode;
+	}
+
+	private void mapBaseTreeGraphNodeAttributes(BaseTreeGraphNode<RECORD> node, UiBaseTreeGraphNode uiNode) {
+		uiNode.setBackgroundColor(node.getBackgroundColor() != null ? node.getBackgroundColor().toHtmlColorString() : null);
+		uiNode.setBorderColor(node.getBorderColor() != null ? node.getBorderColor().toHtmlColorString() : null);
+		uiNode.setBorderWidth(node.getBorderWidth());
+		uiNode.setBorderRadius(node.getBorderRadius());
+		uiNode.setImage(node.getImage() != null ? node.getImage().createUiTreeGraphNodeImage() : null);
+		uiNode.setIcon(node.getIcon() != null ? node.getIcon().createUiTreeGraphNodeIcon() : null);
+		uiNode.setTemplate(node.getTemplate() != null ? node.getTemplate().createUiTemplate() : null);
+		uiNode.setRecord(node.getRecord() != null ? createUiRecord(node.getRecord(), node.getTemplate()) : null);
+		uiNode.setConnectorLineColor(node.getConnectorLineColor() != null ? node.getConnectorLineColor().toHtmlColorString() : null);
+		uiNode.setConnectorLineWidth(node.getConnectorLineWidth());
+		uiNode.setDashArray(node.getDashArray());
+	}
+
+	private UiClientRecord createUiRecord(RECORD record, Template template) {
+		UiClientRecord uiClientRecord = new UiClientRecord();
+		uiClientRecord.setValues(propertyProvider.getValues(record, template.getPropertyNames()));
+		return uiClientRecord;
+	}
+
+	public void setZoomFactor(float zoomFactor) {
+		this.zoomFactor = zoomFactor;
+		queueCommandIfRendered(() -> new UiTreeGraph.SetZoomFactorCommand(getId(), zoomFactor));
+	}
+
+	public void setNodes(List<TreeGraphNode<RECORD>> nodes) {
+		this.nodesById.clear();
+		nodes.forEach(n -> nodesById.put(n.getId(), n));
+		queueCommandIfRendered(() -> new UiTreeGraph.SetNodesCommand(getId(), createUiNodes(nodes)));
+	}
+
+	public void addNode(TreeGraphNode<RECORD> node) {
+		nodesById.put(node.getId(), node);
+		queueCommandIfRendered(() -> new UiTreeGraph.AddNodeCommand(getId(), createUiNode(node)));
+	}
+
+	public void addNodes(List<TreeGraphNode<RECORD>> nodes) {
+		nodes.forEach(n -> nodesById.put(n.getId(), n));
+		update();
+	}
+
+	public void removeNode(TreeGraphNode<RECORD> node) {
+		this.nodesById.remove(node.getId());
+		queueCommandIfRendered(() -> new UiTreeGraph.RemoveNodeCommand(getId(), node.getId()));
+	}
+
+	public void updateNode(TreeGraphNode<RECORD> node) {
+		nodesById.put(node.getId(), node);
+		queueCommandIfRendered(() -> new UiTreeGraph.UpdateNodeCommand(getId(), createUiNode(node)));
+	}
+
+	@Override
+	public void handleUiEvent(UiEvent event) {
+		switch (event.getUiEventType()) {
+			case UI_TREE_GRAPH_NODE_CLICKED: {
+				UiTreeGraph.NodeClickedEvent e = (UiTreeGraph.NodeClickedEvent) event;
+				TreeGraphNode<RECORD> node = this.nodesById.get(e.getNodeId());
+				if (node != null) {
+					onNodeClicked.fire(node);
+				}
+				break;
+			}
+			case UI_TREE_GRAPH_NODE_EXPANDED_OR_COLLAPSED: {
+				UiTreeGraph.NodeExpandedOrCollapsedEvent e = (UiTreeGraph.NodeExpandedOrCollapsedEvent) event;
+				TreeGraphNode<RECORD> node = this.nodesById.get(e.getNodeId());
+				if (node != null) {
+					node.setExpanded(e.getExpanded());
+					onNodeExpandedOrCollapsed.fire(new NodeExpandedOrCollapsedEvent<>(node, e.getExpanded(), e.getLazyLoad()));
+				}
+				break;
+			}
+			case UI_TREE_GRAPH_PARENT_EXPANDED_OR_COLLAPSED: {
+				UiTreeGraph.ParentExpandedOrCollapsedEvent e = (UiTreeGraph.ParentExpandedOrCollapsedEvent) event;
+				TreeGraphNode<RECORD> node = this.nodesById.get(e.getNodeId());
+				if (node != null) {
+					node.setParentExpanded(e.getExpanded());
+					onParentExpandedOrCollapsed.fire(new NodeExpandedOrCollapsedEvent<>(node, e.getExpanded(), e.getLazyLoad()));
+				}
+				break;
+			}
+			case UI_TREE_GRAPH_SIDE_LIST_EXPANDED_OR_COLLAPSED: {
+				UiTreeGraph.SideListExpandedOrCollapsedEvent e = (UiTreeGraph.SideListExpandedOrCollapsedEvent) event;
+				TreeGraphNode<RECORD> node = this.nodesById.get(e.getNodeId());
+				if (node != null) {
+					node.setSideListExpanded(e.getExpanded());
+					onSideListExpandedOrCollapsed.fire(new SideListExpandedOrCollapsedEvent<>(node, e.getExpanded()));
+				}
+				break;
+			}
+		}
+	}
+
+	public boolean isCompact() {
+		return compact;
+	}
+
+	public void setCompact(boolean compact) {
+		this.compact = compact;
+		update();
+	}
+
+	private void update() {
+		queueCommandIfRendered(() -> new UiTreeGraph.UpdateCommand(getId(), createUiComponent()));
+	}
+
+	public void moveToRootNode() {
+		queueCommandIfRendered(() -> new UiTreeGraph.MoveToRootNodeCommand(getId()));
+	}
+
+	public void moveToNode(TreeGraphNode<RECORD> node) {
+		queueCommandIfRendered(() -> new UiTreeGraph.MoveToNodeCommand(getId(), node.getId()));
+	}
+
+	private Collection<TreeGraphNode<RECORD>> getAllDescendants(TreeGraphNode<RECORD> node, boolean includeSelf) {
+		// O(h^2) where h is the height of the tree.
+		// So the worst case performance is O(n * n/2) for a totally linear tree.
+		// Average case: O(n * log(n))
+		// If used for a root node (see usages!!): O(n) due to optimization!
+
+		Set<TreeGraphNode<RECORD>> descendants = new HashSet<>();
+		descendants.add(node);
+		Set<TreeGraphNode<RECORD>> nonDescendants = new HashSet<>(getAncestors(node, false)); // common case optimization!
+
+		List<TreeGraphNode<RECORD>> untaggedNodes = new ArrayList<>(nodesById.values());
+		untaggedNodes.remove(node);
+
+		boolean[] descendantsChanged = new boolean[1];
+		boolean[] nonDescendantsChanged = new boolean[1];
+		do {
+			descendantsChanged[0] = false;
+			nonDescendantsChanged[0] = false;
+			untaggedNodes = untaggedNodes.stream()
+					.filter(n -> {
+						if (descendants.contains(n.getParent())) {
+							descendants.add(n);
+							descendantsChanged[0] = true;
+							return false;
+						} else if (nonDescendants.contains(n.getParent())) {
+							nonDescendants.add(n);
+							nonDescendantsChanged[0] = true;
+							return false;
+						} else {
+							return true;
+						}
+					})
+					.collect(Collectors.toList());
+		} while (descendantsChanged[0] && nonDescendantsChanged[0]);
+
+		descendants.addAll(untaggedNodes); // if nonDescendantsChanged[0] == false, all remaining nodes must be descendants!
+
+		if (!includeSelf) {
+			descendants.remove(node);
+		}
+
+		return descendants;
+	}
+
+	private List<TreeGraphNode<RECORD>> getAncestors(TreeGraphNode<RECORD> node, boolean includeSelf) {
+		ArrayList<TreeGraphNode<RECORD>> ancestors = new ArrayList<>();
+		if (includeSelf) {
+			ancestors.add(node);
+		}
+		while (node.getParent() != null) {
+			node = node.getParent();
+			ancestors.add(node);
+		}
+		return ancestors;
+	}
+
+	public int getVerticalLayerGap() {
+		return verticalLayerGap;
+	}
+
+	public void setVerticalLayerGap(int verticalLayerGap) {
+		this.verticalLayerGap = verticalLayerGap;
+		this.update();
+	}
+
+	public int getSideListIndent() {
+		return sideListIndent;
+	}
+
+	public void setSideListIndent(int sideListIndent) {
+		this.sideListIndent = sideListIndent;
+		this.update();
+	}
+
+	public int getSideListVerticalGap() {
+		return sideListVerticalGap;
+	}
+
+	public void setSideListVerticalGap(int sideListVerticalGap) {
+		this.sideListVerticalGap = sideListVerticalGap;
+		this.update();
+	}
+
+	public int getHorizontalSiblingGap() {
+		return horizontalSiblingGap;
+	}
+
+	public void setHorizontalSiblingGap(int horizontalSiblingGap) {
+		this.horizontalSiblingGap = horizontalSiblingGap;
+		this.update();
+	}
+
+	public int getHorizontalNonSignlingGap() {
+		return horizontalNonSignlingGap;
+	}
+
+	public void setHorizontalNonSignlingGap(int horizontalNonSignlingGap) {
+		this.horizontalNonSignlingGap = horizontalNonSignlingGap;
+		this.update();
+	}
+
+	public PropertyProvider<RECORD> getPropertyProvider() {
+		return propertyProvider;
+	}
+
+	public void setPropertyProvider(PropertyProvider<RECORD> propertyProvider) {
+		this.propertyProvider = propertyProvider;
+	}
+
+	public void setPropertyExtractor(PropertyExtractor<RECORD> propertyExtractor) {
+		this.setPropertyProvider(propertyExtractor);
+	}
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/charting/tree/TreeGraphNode.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/charting/tree/TreeGraphNode.java
new file mode 100644
index 000000000..3c93c2683
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/charting/tree/TreeGraphNode.java
@@ -0,0 +1,96 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.charting.tree;
+
+import java.util.List;
+
+public class TreeGraphNode<RECORD> extends BaseTreeGraphNode<RECORD> {
+
+	private TreeGraphNode<RECORD> parent;
+	private boolean parentExpandable = false;
+	private boolean parentExpanded = true;
+
+	private boolean expanded = true;
+	private boolean hasLazyChildren = false;
+
+	private List<BaseTreeGraphNode<RECORD>> sideListNodes;
+	private boolean sideListExpanded;
+
+	public TreeGraphNode<RECORD> getParent() {
+		return parent;
+	}
+
+	public TreeGraphNode<RECORD> setParent(TreeGraphNode<RECORD> parent) {
+		this.parent = parent;
+		return this;
+	}
+
+	public boolean isExpanded() {
+		return expanded;
+	}
+
+	public TreeGraphNode<RECORD> setExpanded(boolean expanded) {
+		this.expanded = expanded;
+		return this;
+	}
+
+	public boolean isHasLazyChildren() {
+		return hasLazyChildren;
+	}
+
+	public TreeGraphNode<RECORD> setHasLazyChildren(boolean hasLazyChildren) {
+		this.hasLazyChildren = hasLazyChildren;
+		return this;
+	}
+
+	public List<BaseTreeGraphNode<RECORD>> getSideListNodes() {
+		return sideListNodes;
+	}
+
+	public TreeGraphNode<RECORD> setSideListNodes(List<BaseTreeGraphNode<RECORD>> sideListNodes) {
+		this.sideListNodes = sideListNodes;
+		return this;
+	}
+
+	public boolean isSideListExpanded() {
+		return sideListExpanded;
+	}
+
+	public TreeGraphNode<RECORD> setSideListExpanded(boolean sideListExpanded) {
+		this.sideListExpanded = sideListExpanded;
+		return this;
+	}
+
+	public boolean isParentExpandable() {
+		return parentExpandable;
+	}
+
+	public void setParentExpandable(boolean parentExpandable) {
+		this.parentExpandable = parentExpandable;
+	}
+
+	public boolean isParentExpanded() {
+		return parentExpanded;
+	}
+
+	public void setParentExpanded(boolean parentExpanded) {
+		this.parentExpanded = parentExpanded;
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/chat/AbstractChatDisplayModel.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/chat/AbstractChatDisplayModel.java
index c54393768..6da9426d9 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/chat/AbstractChatDisplayModel.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/chat/AbstractChatDisplayModel.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -24,6 +24,8 @@
 public abstract class AbstractChatDisplayModel implements ChatDisplayModel {
 
 	public final Event<ChatMessageBatch> onMessagesAdded = new Event<>();
+	public final Event<Integer> onMessageDeleted = new Event<>();
+	public final Event<ChatMessage> onMessageChanged = new Event<>();
 	public final Event<Void> onAllDataChanged = new Event<>();
 
 	@Override
@@ -31,6 +33,16 @@ public Event<ChatMessageBatch> onMessagesAdded() {
 		return onMessagesAdded;
 	}
 
+	@Override
+	public Event<Integer> onMessageDeleted() {
+		return onMessageDeleted;
+	}
+
+	@Override
+	public Event<ChatMessage> onMessageChanged() {
+		return onMessageChanged;
+	}
+
 	@Override
 	public Event<Void> onAllDataChanged() {
 		return onAllDataChanged;
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/chat/ChatDisplay.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/chat/ChatDisplay.java
index b9ef389f7..768960313 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/chat/ChatDisplay.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/chat/ChatDisplay.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,79 +19,109 @@
  */
 package org.teamapps.ux.component.chat;
 
-import org.jetbrains.annotations.NotNull;
-import org.teamapps.dto.UiChatDisplay;
-import org.teamapps.dto.UiChatFile;
-import org.teamapps.dto.UiChatMessage;
-import org.teamapps.dto.UiChatPhoto;
-import org.teamapps.dto.UiEvent;
-import org.teamapps.event.EventListener;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+import org.teamapps.dto.*;
+import org.teamapps.icon.material.MaterialIcon;
+import org.teamapps.icon.material.MaterialIconStyles;
+import org.teamapps.icons.Icon;
 import org.teamapps.ux.component.AbstractComponent;
-import org.teamapps.ux.resource.Resource;
+import org.teamapps.ux.component.Component;
 
+import java.lang.invoke.MethodHandles;
 import java.util.List;
 import java.util.function.Function;
 import java.util.stream.Collectors;
 
 public class ChatDisplay extends AbstractComponent {
 
+	private static final Logger LOGGER = LoggerFactory.getLogger(MethodHandles.lookup().lookupClass());
+
 	private final ChatDisplayModel model;
-	private int messagesFetchSize = 20;
-
-	private final EventListener<ChatMessageBatch> modelAddMessagesAddedListener = chatMessages -> {
-		queueCommandIfRendered(() -> new UiChatDisplay.AddChatMessagesCommand(getId(), createUiChatMessages(chatMessages.getMessages()), false, chatMessages.isIncludesFirstMessage()));
-	};
-	private final EventListener<Void> modelAllDataChangedListener = aVoid -> {
-		ChatMessageBatch messageBatch = this.getModel().getLastChatMessages(this.messagesFetchSize);
-		queueCommandIfRendered(() -> new UiChatDisplay.ReplaceChatMessagesCommand(getId(), createUiChatMessages(messageBatch.getMessages()), messageBatch.isIncludesFirstMessage()));
-	};
-
-	private Function<Resource, String> resourceToUrlConverter = resource -> {
-		if (resource != null) {
-			return getSessionContext().createResourceLink(() -> resource.getInputStream(), resource.getLength(), resource.getName());
-		} else {
-			return null;
-		}
-	};
+	private int messagesFetchSize = 50;
+	private int earliestKnownMessageId = Integer.MAX_VALUE;
+
+	private Icon<?, ?> deletedMessageIcon = MaterialIcon.DELETE.withStyle(MaterialIconStyles.OUTLINE_GREY_900);
+
+	private Function<ChatMessage, Component> contextMenuProvider = null;
 
 	public ChatDisplay(ChatDisplayModel model) {
 		this.model = model;
-		model.onMessagesAdded().addListener(modelAddMessagesAddedListener);
-		model.onAllDataChanged().addListener(modelAllDataChangedListener);
+		model.onMessagesAdded().addListener(chatMessages -> {
+			updateEarliestKnownMessageId(chatMessages);
+			queueCommandIfRendered(() -> new UiChatDisplay.AddMessagesCommand(getId(), createUiChatMessageBatch(chatMessages)));
+		});
+		model.onMessageChanged().addListener((chatMessage) -> {
+			if (earliestKnownMessageId <= chatMessage.getId()) {
+				queueCommandIfRendered(() -> new UiChatDisplay.UpdateMessageCommand(getId(), createUiChatMessage(chatMessage)));
+			}
+		});
+		model.onMessageDeleted().addListener((messageId) -> {
+			if (earliestKnownMessageId <= messageId) {
+				queueCommandIfRendered(() -> new UiChatDisplay.DeleteMessageCommand(getId(), messageId));
+			}
+		});
+		model.onAllDataChanged().addListener(aVoid -> {
+			ChatMessageBatch messageBatch = this.getModel().getLastChatMessages(this.messagesFetchSize);
+			this.earliestKnownMessageId = Integer.MAX_VALUE;
+			updateEarliestKnownMessageId(messageBatch);
+			queueCommandIfRendered(() -> new UiChatDisplay.ClearMessagesCommand(getId(), createUiChatMessageBatch(messageBatch)));
+		});
 	}
 
 	@Override
 	public UiChatDisplay createUiComponent() {
-		UiChatDisplay uiChatDisplay = new UiChatDisplay(getId());
+		UiChatDisplay uiChatDisplay = new UiChatDisplay();
 		mapAbstractUiComponentProperties(uiChatDisplay);
 		ChatMessageBatch modelResponse = model.getLastChatMessages(messagesFetchSize);
-		uiChatDisplay.setMessages(createUiChatMessages(modelResponse.getMessages()));
-		uiChatDisplay.setIncludesFirstMessage(modelResponse.isIncludesFirstMessage());
+		updateEarliestKnownMessageId(modelResponse);
+		uiChatDisplay.setInitialMessages(createUiChatMessageBatch(modelResponse));
+		uiChatDisplay.setContextMenuEnabled(contextMenuProvider != null);
+		uiChatDisplay.setDeletedMessageIcon(getSessionContext().resolveIcon(deletedMessageIcon));
 		return uiChatDisplay;
 	}
 
+	private void updateEarliestKnownMessageId(ChatMessageBatch response) {
+		earliestKnownMessageId = response.getEarliestMessageId() != null && response.getEarliestMessageId() < this.earliestKnownMessageId ? response.getEarliestMessageId() : earliestKnownMessageId;
+	}
+
 	@Override
-	public void handleUiEvent(UiEvent event) {
-		switch (event.getUiEventType()) {
-			case UI_CHAT_DISPLAY_PREVIOUS_MESSAGES_REQUESTED:
-				UiChatDisplay.PreviousMessagesRequestedEvent requestedEvent = (UiChatDisplay.PreviousMessagesRequestedEvent) event;
-				ChatMessageBatch response = model.getPreviousMessages(requestedEvent.getEarliestKnownMessageId(), messagesFetchSize);
-				queueCommandIfRendered(() -> new UiChatDisplay.AddChatMessagesCommand(getId(), createUiChatMessages(response.getMessages()), true, response.isIncludesFirstMessage()));
+	public Object handleUiQuery(UiQuery query) {
+		switch (query.getUiQueryType()) {
+			case UI_CHAT_DISPLAY_REQUEST_PREVIOUS_MESSAGES: {
+				ChatMessageBatch response = model.getPreviousMessages(earliestKnownMessageId, messagesFetchSize);
+				updateEarliestKnownMessageId(response);
+				return createUiChatMessageBatch(response);
+			}
+			case UI_CHAT_DISPLAY_REQUEST_CONTEXT_MENU: {
+				UiChatDisplay.RequestContextMenuQuery q = (UiChatDisplay.RequestContextMenuQuery) query;
+				ChatMessage chatMessage = model.getChatMessageById(q.getChatMessageId());
+				if (chatMessage != null) {
+					Component component = contextMenuProvider.apply(chatMessage);
+					return component != null ? component.createUiReference() : null;
+				}
+			}
+			default:
+				return super.handleUiQuery(query);
 		}
 	}
 
-	@NotNull
 	private List<UiChatMessage> createUiChatMessages(List<ChatMessage> chatMessages) {
 		return chatMessages.stream()
 				.map(message -> createUiChatMessage(message))
 				.collect(Collectors.toList());
 	}
 
+	private UiChatMessageBatch createUiChatMessageBatch(ChatMessageBatch batch) {
+		List<UiChatMessage> uiMessages = batch.getMessages().stream().map(this::createUiChatMessage).collect(Collectors.toList());
+		return new UiChatMessageBatch(uiMessages, batch.isContainsFirstMessage());
+	}
+
 	private UiChatMessage createUiChatMessage(ChatMessage message) {
 		UiChatMessage uiChatMessage = new UiChatMessage();
 		uiChatMessage.setId(message.getId());
 		uiChatMessage.setUserNickname(message.getUserNickname());
-		uiChatMessage.setUserImageUrl(resourceToUrlConverter.apply(message.getUserImage()));
+		uiChatMessage.setUserImageUrl(message.getUserImage().getUrl(getSessionContext()));
 		uiChatMessage.setText(message.getText());
 		uiChatMessage.setPhotos(message.getPhotos() != null ? message.getPhotos().stream()
 				.map(photo -> createUiChatPhoto(photo))
@@ -99,13 +129,14 @@ private UiChatMessage createUiChatMessage(ChatMessage message) {
 		uiChatMessage.setFiles(message.getFiles() != null ? message.getFiles().stream()
 				.map(file -> createUiChatFile(file))
 				.collect(Collectors.toList()) : null);
+		uiChatMessage.setDeleted(message.isDeleted());
 		return uiChatMessage;
 	}
 
 	private UiChatPhoto createUiChatPhoto(ChatPhoto photo) {
 		UiChatPhoto uiChatPhoto = new UiChatPhoto();
-		uiChatPhoto.setThumbnailUrl(resourceToUrlConverter.apply(photo.getThumbnail()));
-		uiChatPhoto.setImageUrl(resourceToUrlConverter.apply(photo.getImage()));
+		uiChatPhoto.setThumbnailUrl(photo.getThumbnail() != null ? photo.getThumbnail().getUrl(getSessionContext()) : null);
+		uiChatPhoto.setImageUrl(photo.getImage().getUrl(getSessionContext()));
 		return uiChatPhoto;
 	}
 
@@ -113,17 +144,12 @@ private UiChatFile createUiChatFile(ChatFile file) {
 		UiChatFile uiChatFile = new UiChatFile();
 		uiChatFile.setName(file.getName());
 		uiChatFile.setIcon(getSessionContext().resolveIcon(file.getIcon()));
-		uiChatFile.setThumbnailUrl(resourceToUrlConverter.apply(file.getThumbnail()));
-		uiChatFile.setDownloadUrl(resourceToUrlConverter.apply(file.getDownload()));
+		uiChatFile.setLength(file.getLength());
+		uiChatFile.setThumbnailUrl(file.getThumbnail() != null ? file.getThumbnail().getUrl(getSessionContext()) : null);
+		uiChatFile.setDownloadUrl(file.getDownload().getUrl(getSessionContext()));
 		return uiChatFile;
 	}
 
-	@Override
-	protected void doDestroy() {
-		this.model.onMessagesAdded().removeListener(modelAddMessagesAddedListener);
-		this.model.onAllDataChanged().removeListener(modelAllDataChangedListener);
-	}
-
 	public ChatDisplayModel getModel() {
 		return model;
 	}
@@ -133,15 +159,30 @@ public int getMessagesFetchSize() {
 	}
 
 	public void setMessagesFetchSize(int messagesFetchSize) {
+		boolean changed = messagesFetchSize != this.messagesFetchSize;
 		this.messagesFetchSize = messagesFetchSize;
-		reRenderIfRendered();
+		if (changed) {
+			reRenderIfRendered();
+		}
+	}
+
+	public Function<ChatMessage, Component> getContextMenuProvider() {
+		return contextMenuProvider;
+	}
+
+	public void setContextMenuProvider(Function<ChatMessage, Component> contextMenuProvider) {
+		this.contextMenuProvider = contextMenuProvider;
+	}
+
+	public void closeContextMenu() {
+		queueCommandIfRendered(() -> new UiChatDisplay.CloseContextMenuCommand(getId()));
 	}
 
-	public Function<Resource, String> getResourceToUrlConverter() {
-		return resourceToUrlConverter;
+	public Icon<?, ?> getDeletedMessageIcon() {
+		return deletedMessageIcon;
 	}
 
-	public void setResourceToUrlConverter(Function<Resource, String> resourceToUrlConverter) {
-		this.resourceToUrlConverter = resourceToUrlConverter;
+	public void setDeletedMessageIcon(Icon<?, ?> deletedMessageIcon) {
+		this.deletedMessageIcon = deletedMessageIcon;
 	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/chat/ChatDisplayModel.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/chat/ChatDisplayModel.java
index a213a4b9b..d170f067f 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/chat/ChatDisplayModel.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/chat/ChatDisplayModel.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -25,14 +25,18 @@ public interface ChatDisplayModel {
 
 	Event<ChatMessageBatch> onMessagesAdded();
 
+	Event<Integer> onMessageDeleted();
+
+	Event<ChatMessage> onMessageChanged();
+
 	Event<Void> onAllDataChanged();
 
-	ChatMessageBatch getPreviousMessages(String earliestKnownMessageId, int numberOfMessages);
+	ChatMessage getChatMessageById(int id);
+
+	ChatMessageBatch getPreviousMessages(Integer earliestKnownMessageId, int numberOfMessages);
 
 	default ChatMessageBatch getLastChatMessages(int numberOfMessages) {
 		return getPreviousMessages(null, numberOfMessages);
 	}
 
-	ChatMessage getChatMessageById(String id);
-
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/chat/ChatFile.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/chat/ChatFile.java
index cd80e0bf7..8872dab2f 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/chat/ChatFile.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/chat/ChatFile.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,14 +19,15 @@
  */
 package org.teamapps.ux.component.chat;
 
-import org.teamapps.icons.api.Icon;
-import org.teamapps.ux.resource.Resource;
+import org.teamapps.icons.Icon;
+import org.teamapps.ux.resolvable.Resolvable;
 
 public interface ChatFile {
 
 	String getName();
 	Icon getIcon();
-	Resource getThumbnail();
-	Resource getDownload();
+	long getLength();
+	Resolvable getThumbnail();
+	Resolvable getDownload();
 
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/chat/ChatInput.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/chat/ChatInput.java
index 6c269fc4a..2e44767a2 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/chat/ChatInput.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/chat/ChatInput.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -23,9 +23,11 @@
 import org.teamapps.dto.UiEvent;
 import org.teamapps.event.Event;
 import org.teamapps.icon.material.MaterialIcon;
+import org.teamapps.icons.Icon;
 import org.teamapps.ux.component.AbstractComponent;
 
 import java.util.List;
+import java.util.Objects;
 import java.util.stream.Collectors;
 
 public class ChatInput extends AbstractComponent {
@@ -34,13 +36,18 @@ public class ChatInput extends AbstractComponent {
 
 	private long maxBytesPerUpload = 5000000;
 	private String uploadUrl = "/upload";
+	private Icon defaultAttachmentIcon = MaterialIcon.ATTACHMENT;
+	private int messageLengthLimit = 10_000; // 10k characters, < 0 for no limit
+	private boolean attachmentsEnabled = true;
 
 	@Override
 	public UiChatInput createUiComponent() {
-		UiChatInput uiChatInput = new UiChatInput(getId(), getSessionContext().resolveIcon(MaterialIcon.ATTACHMENT));
+		UiChatInput uiChatInput = new UiChatInput(getSessionContext().resolveIcon(defaultAttachmentIcon));
 		mapAbstractUiComponentProperties(uiChatInput);
 		uiChatInput.setMaxBytesPerUpload(maxBytesPerUpload);
 		uiChatInput.setUploadUrl(uploadUrl);
+		uiChatInput.setMessageLengthLimit(messageLengthLimit);
+		uiChatInput.setAttachmentsEnabled(attachmentsEnabled);
 		return uiChatInput;
 	}
 
@@ -49,10 +56,14 @@ public void handleUiEvent(UiEvent event) {
 		switch (event.getUiEventType()) {
 			case UI_CHAT_INPUT_MESSAGE_SENT:
 				UiChatInput.MessageSentEvent messageSentEvent = (UiChatInput.MessageSentEvent) event;
+				String text = messageSentEvent.getMessage().getText();
+				if (messageLengthLimit > 0 && text.length() > messageLengthLimit) {
+					text = text.substring(0, messageLengthLimit);
+				}
 				List<NewChatMessageData.UploadedFile> uploadedFiles = messageSentEvent.getMessage().getUploadedFiles().stream()
 						.map(uiFile -> new NewChatMessageData.UploadedFile(uiFile.getUploadedFileUuid(), uiFile.getFileName()))
 						.collect(Collectors.toList());
-				NewChatMessageData newChatMessageData = new NewChatMessageData(messageSentEvent.getMessage().getText(), uploadedFiles);
+				NewChatMessageData newChatMessageData = new NewChatMessageData(text, uploadedFiles);
 				onMessageSent.fire(newChatMessageData);
 				break;
 			case UI_CHAT_INPUT_UPLOAD_TOO_LARGE:
@@ -68,18 +79,16 @@ public void handleUiEvent(UiEvent event) {
 		}
 	}
 
-	@Override
-	protected void doDestroy() {
-
-	}
-
 	public long getMaxBytesPerUpload() {
 		return maxBytesPerUpload;
 	}
 
 	public void setMaxBytesPerUpload(long maxBytesPerUpload) {
+		boolean changed = maxBytesPerUpload != this.maxBytesPerUpload;
 		this.maxBytesPerUpload = maxBytesPerUpload;
-		reRenderIfRendered(); // TODO
+		if (changed) {
+			reRenderIfRendered();
+		} // TODO
 	}
 
 	public String getUploadUrl() {
@@ -87,7 +96,37 @@ public String getUploadUrl() {
 	}
 
 	public void setUploadUrl(String uploadUrl) {
+		boolean changed = !Objects.equals(uploadUrl, this.uploadUrl);
 		this.uploadUrl = uploadUrl;
-		reRenderIfRendered(); // TODO
+		if (changed) {
+			reRenderIfRendered();
+		} // TODO
+	}
+
+	public Icon getDefaultAttachmentIcon() {
+		return defaultAttachmentIcon;
+	}
+
+	public void setDefaultAttachmentIcon(Icon defaultAttachmentIcon) {
+		this.defaultAttachmentIcon = defaultAttachmentIcon;
+	}
+
+	public int getMessageLengthLimit() {
+		return messageLengthLimit;
+	}
+
+	public void setMessageLengthLimit(int messageLengthLimit) {
+		this.messageLengthLimit = messageLengthLimit;
+	}
+
+	public boolean isAttachmentsEnabled() {
+		return attachmentsEnabled;
+	}
+
+	public void setAttachmentsEnabled(boolean attachmentsEnabled) {
+		if (attachmentsEnabled != this.attachmentsEnabled) {
+			this.attachmentsEnabled = attachmentsEnabled;
+			queueCommandIfRendered(() -> new UiChatInput.SetAttachmentsEnabledCommand(getId(), attachmentsEnabled));
+		}
 	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/chat/ChatMessage.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/chat/ChatMessage.java
index 3950a2511..2558c2524 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/chat/ChatMessage.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/chat/ChatMessage.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,22 +19,30 @@
  */
 package org.teamapps.ux.component.chat;
 
-import org.teamapps.ux.resource.Resource;
+import org.teamapps.ux.resolvable.Resolvable;
 
 import java.util.List;
 
 public interface ChatMessage {
 
-	String getId();
+	int getId();
 
-	Resource getUserImage();
+	Resolvable getUserImage();
 
 	String getUserNickname();
 
 	String getText();
 
-	List<ChatPhoto> getPhotos();
+	default List<ChatPhoto> getPhotos() {
+		return List.of();
+	}
 
-	List<ChatFile> getFiles();
+	default List<ChatFile> getFiles() {
+		return List.of();
+	}
+
+	default boolean isDeleted() {
+		return false;
+	}
 
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/chat/ChatMessageBatch.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/chat/ChatMessageBatch.java
index 6163090b6..66f76b958 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/chat/ChatMessageBatch.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/chat/ChatMessageBatch.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -24,18 +24,23 @@
 public class ChatMessageBatch {
 
 	private final List<ChatMessage> messages;
-	private final boolean includesFirstMessage;
+	private final boolean containsFirstMessage;
 
-	public ChatMessageBatch(List<ChatMessage> messages, boolean includesFirstMessage) {
+	public ChatMessageBatch(List<ChatMessage> messages, boolean containsFirstMessage) {
 		this.messages = messages;
-		this.includesFirstMessage = includesFirstMessage;
+		this.containsFirstMessage = containsFirstMessage;
 	}
 
 	public List<ChatMessage> getMessages() {
 		return messages;
 	}
 
-	public boolean isIncludesFirstMessage() {
-		return includesFirstMessage;
+	public boolean isContainsFirstMessage() {
+		return containsFirstMessage;
 	}
+
+	public Integer getEarliestMessageId() {
+		return messages.size() > 0 ? messages.get(0).getId() : null;
+	}
+
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/chat/ChatPhoto.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/chat/ChatPhoto.java
index 2e3c4e100..a015a3fad 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/chat/ChatPhoto.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/chat/ChatPhoto.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,11 +19,11 @@
  */
 package org.teamapps.ux.component.chat;
 
-import org.teamapps.ux.resource.Resource;
+import org.teamapps.ux.resolvable.Resolvable;
 
 public interface ChatPhoto {
 
-	Resource getThumbnail();
-	Resource getImage();
+	Resolvable getThumbnail();
+	Resolvable getImage();
 
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/chat/InMemoryChatDisplayModel.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/chat/InMemoryChatDisplayModel.java
index 009ec4fed..ffb0194e0 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/chat/InMemoryChatDisplayModel.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/chat/InMemoryChatDisplayModel.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,77 +19,152 @@
  */
 package org.teamapps.ux.component.chat;
 
-import org.teamapps.event.Event;
+import org.teamapps.ux.resolvable.Resolvable;
 
+import java.util.ArrayList;
 import java.util.Collections;
+import java.util.Comparator;
 import java.util.List;
 import java.util.concurrent.CopyOnWriteArrayList;
+import java.util.concurrent.atomic.AtomicInteger;
+import java.util.function.Function;
 
 public class InMemoryChatDisplayModel extends AbstractChatDisplayModel {
 
-	private final CopyOnWriteArrayList<ChatMessage> messages = new CopyOnWriteArrayList<>();
+	private final AtomicInteger chatMessageIdCounter = new AtomicInteger();
+	private final transient Object lock = new Object();
+	private final ArrayList<ChatMessage> mutableList = new ArrayList<>();
+	private volatile List<ChatMessage> snapshot = List.copyOf(mutableList);
 
 	public InMemoryChatDisplayModel() {
 	}
 
-	public InMemoryChatDisplayModel(CopyOnWriteArrayList<ChatMessage> messages) {
-		this.messages.addAll(messages);
+	private <T> T readFromSnapshot(Function<List<ChatMessage>, T> readOperation) {
+		return readOperation.apply(snapshot);
 	}
 
-	@Override
-	public Event<ChatMessageBatch> onMessagesAdded() {
-		return onMessagesAdded;
+	private <T> T transformList(Function<List<ChatMessage>, T> operation) {
+		T result;
+		synchronized (lock) {
+			result = operation.apply(mutableList);
+			snapshot = List.copyOf(mutableList);
+		}
+		return result;
 	}
 
-	@Override
-	public Event<Void> onAllDataChanged() {
-		return onAllDataChanged;
+	public InMemoryChatDisplayModel(CopyOnWriteArrayList<ChatMessage> messages) {
+		transformList(chatMessages -> chatMessages.addAll(messages));
 	}
 
+	@Override
+	public ChatMessage getChatMessageById(int id) {
+		return readFromSnapshot(chatMessages -> {
+			int index = Collections.binarySearch(chatMessages, new BinarySearchReferenceChatMessage(id), Comparator.comparing(ChatMessage::getId));
+			return index >= 0 ? chatMessages.get(index) : null;
+		});
+	}
 
 	@Override
-	public ChatMessageBatch getPreviousMessages(String earliestKnownMessageId, int numberOfMessages) {
+	public ChatMessageBatch getPreviousMessages(Integer earliestKnownMessageId, int numberOfMessages) {
 		if (earliestKnownMessageId == null) {
-			int startIndex = Math.max(0, messages.size() - numberOfMessages);
-			return new ChatMessageBatch(messages.subList(startIndex, messages.size()), startIndex == 0);
+			return readFromSnapshot(chatMessages -> {
+				int startIndex = Math.max(0, chatMessages.size() - numberOfMessages);
+				return new ChatMessageBatch(chatMessages.subList(startIndex, chatMessages.size()), startIndex == 0);
+			});
 		} else {
-			int i = indexOfMessageById(earliestKnownMessageId);
-			if (i == -1) {
-				return new ChatMessageBatch(Collections.emptyList(), false);
-			} else {
-				int startIndex = Math.max(0, i - numberOfMessages);
-				return new ChatMessageBatch(messages.subList(startIndex, i), startIndex == 0);
-			}
+			return readFromSnapshot(chatMessages -> {
+				int searchResultIndex = Collections.binarySearch(chatMessages, new BinarySearchReferenceChatMessage(earliestKnownMessageId), Comparator.comparing(ChatMessage::getId));
+				int firstKnownIndex = searchResultIndex >= 0 ? searchResultIndex : -(searchResultIndex + 1);
+				int startIndex = Math.max(0, firstKnownIndex - numberOfMessages);
+				return new ChatMessageBatch(chatMessages.subList(startIndex, firstKnownIndex), startIndex == 0);
+			});
 		}
 	}
 
-	@Override
-	public ChatMessage getChatMessageById(String id) {
-		return messages.get(indexOfMessageById(id));
+	public ChatMessage addMessage(Resolvable userImage, String userNickname, String text) {
+		return addMessage(userImage, userNickname, text, null, null, false);
 	}
 
-	private int indexOfMessageById(String earliestKnownMessageId) {
-		for (int i = messages.size() - 1; i > 0; i--) {
-			if (messages.get(i).getId().equals(earliestKnownMessageId)) {
-				return i;
-			}
+	public ChatMessage addMessage(Resolvable userImage, String userNickname, String text, List<ChatPhoto> photos, List<ChatFile> files, boolean deleted) {
+		ChatMessageBatch chatMessageBatch = transformList(chatMessages -> {
+			boolean firstMessage = chatMessages.size() == 0;
+			SimpleChatMessage message = new SimpleChatMessage(chatMessageIdCounter.incrementAndGet(), userImage, userNickname, text, photos, files, deleted);
+			chatMessages.add(message);
+			return new ChatMessageBatch(Collections.singletonList(message), firstMessage);
+		});
+		this.onMessagesAdded.fire(chatMessageBatch);
+		return chatMessageBatch.getMessages().get(0);
+	}
+
+	public void replaceAllMessages(List<ChatMessage> messages) {
+		boolean wasChanged = transformList(chatMessages -> {
+			boolean changed = !(chatMessages.size() == 0 && messages.size() == 0);
+			chatMessages.clear();
+			chatMessages.addAll(messages);
+			return changed;
+		});
+		if (wasChanged) {
+			this.onAllDataChanged.fire(null);
 		}
-		return -1;
 	}
 
-	public void addMessage(ChatMessage message) {
-		boolean firstMessage = this.messages.size() == 0;
-		this.messages.add(message);
-		this.onMessagesAdded.fire(new ChatMessageBatch(Collections.singletonList(message), firstMessage));
+	public void deleteMessage(int messageId) {
+		boolean wasRemoved = transformList(chatMessages -> {
+			int searchResultIndex = Collections.binarySearch(chatMessages, new BinarySearchReferenceChatMessage(messageId), Comparator.comparing(ChatMessage::getId));
+			if (searchResultIndex >= 0) {
+				chatMessages.remove(searchResultIndex);
+				return true;
+			} else {
+				return false;
+			}
+		});
+		if (wasRemoved) {
+			this.onMessageDeleted.fire(messageId);
+		}
 	}
 
-	public void replaceAllMessages(List<ChatMessage> messages) {
-		this.messages.clear();
-		this.messages.addAll(messages);
-		this.onAllDataChanged.fire(null);
+	public void updateMessage(ChatMessage chatMessage) {
+		boolean wasChanged = transformList(chatMessages -> {
+			int searchResultIndex = Collections.binarySearch(chatMessages, chatMessage, Comparator.comparing(ChatMessage::getId));
+			if (searchResultIndex >= 0) {
+				chatMessages.set(searchResultIndex, chatMessage);
+				return true;
+			} else {
+				return false;
+			}
+		});
+		if (wasChanged) {
+			this.onMessageChanged().fire(chatMessage);
+		}
 	}
 
-	public void deleteMessage(String messageId) {
-		ChatMessage message = this.messages.get(indexOfMessageById(messageId));
+	private static class BinarySearchReferenceChatMessage implements ChatMessage {
+		private final int id;
+
+		public BinarySearchReferenceChatMessage(int id) {
+			this.id = id;
+		}
+
+		@Override
+		public int getId() {
+			return id;
+		}
+
+		@Override
+		public Resolvable getUserImage() {
+			return null;
+		}
+
+		@Override
+		public String getUserNickname() {
+			return null;
+		}
+
+		@Override
+		public String getText() {
+			return null;
+		}
+
 	}
+
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/chat/NewChatMessageData.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/chat/NewChatMessageData.java
index 3f96fb2b8..5c1aa8ea2 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/chat/NewChatMessageData.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/chat/NewChatMessageData.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/chat/SimpleChatFile.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/chat/SimpleChatFile.java
index 6ff133e57..0a55ece66 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/chat/SimpleChatFile.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/chat/SimpleChatFile.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,21 +19,23 @@
  */
 package org.teamapps.ux.component.chat;
 
-import org.teamapps.icons.api.Icon;
-import org.teamapps.ux.resource.Resource;
+import org.teamapps.icons.Icon;
+import org.teamapps.ux.resolvable.Resolvable;
 
 public class SimpleChatFile implements ChatFile {
 
 	private final String name;
 	private final Icon icon;
-	private final Resource thumbnail;
-	private final Resource download;
+	private final long length;
+	private final Resolvable thumbnail;
+	private final Resolvable download;
 
-	public SimpleChatFile(String name, Icon icon, Resource thumbnail, Resource download) {
+	public SimpleChatFile(String name, Icon icon, Resolvable thumbnail, Resolvable download, long sizeInBytes) {
 		this.name = name;
 		this.icon = icon;
 		this.thumbnail = thumbnail;
 		this.download = download;
+		this.length = sizeInBytes;
 	}
 
 	@Override
@@ -47,12 +49,17 @@ public Icon getIcon() {
 	}
 
 	@Override
-	public Resource getThumbnail() {
+	public long getLength() {
+		return length;
+	}
+
+	@Override
+	public Resolvable getThumbnail() {
 		return thumbnail;
 	}
 
 	@Override
-	public Resource getDownload() {
+	public Resolvable getDownload() {
 		return download;
 	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/chat/SimpleChatMessage.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/chat/SimpleChatMessage.java
index 81dfd232a..ebf725f74 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/chat/SimpleChatMessage.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/chat/SimpleChatMessage.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,33 +19,41 @@
  */
 package org.teamapps.ux.component.chat;
 
-import org.teamapps.ux.resource.Resource;
+import org.teamapps.ux.resolvable.Resolvable;
 
 import java.util.List;
 
 public class SimpleChatMessage implements ChatMessage {
 
-	private String id;
-	private Resource userImage;
-	private String userNickname;
-	private String text;
-	private List<ChatPhoto> photos;
-	private List<ChatFile> files;
+	private final int id;
+	private final Resolvable userImage;
+	private final String userNickname;
+	private final String text;
+	private final List<ChatPhoto> photos;
+	private final List<ChatFile> files;
+	private final boolean deleted;
 
-	public SimpleChatMessage(String id, Resource userImage, String userNickname, String text) {
+	public SimpleChatMessage(int id, Resolvable userImage, String userNickname, String text) {
+		this(id, userImage, userNickname, text, null, null, false);
+	}
+
+	public SimpleChatMessage(int id, Resolvable userImage, String userNickname, String text, List<ChatPhoto> photos, List<ChatFile> files, boolean deleted) {
 		this.id = id;
 		this.userImage = userImage;
 		this.userNickname = userNickname;
 		this.text = text;
+		this.photos = photos;
+		this.files = files;
+		this.deleted = deleted;
 	}
 
 	@Override
-	public String getId() {
+	public int getId() {
 		return id;
 	}
 
 	@Override
-	public Resource getUserImage() {
+	public Resolvable getUserImage() {
 		return userImage;
 	}
 
@@ -69,27 +77,7 @@ public List<ChatFile> getFiles() {
 		return files;
 	}
 
-	public void setId(String id) {
-		this.id = id;
-	}
-
-	public void setUserImage(Resource userImage) {
-		this.userImage = userImage;
-	}
-
-	public void setUserNickname(String userNickname) {
-		this.userNickname = userNickname;
-	}
-
-	public void setText(String text) {
-		this.text = text;
-	}
-
-	public void setPhotos(List<ChatPhoto> photos) {
-		this.photos = photos;
-	}
-
-	public void setFiles(List<ChatFile> files) {
-		this.files = files;
+	public boolean isDeleted() {
+		return deleted;
 	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/chat/SimpleChatPhoto.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/chat/SimpleChatPhoto.java
index a531cd5e0..8d89a6d6d 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/chat/SimpleChatPhoto.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/chat/SimpleChatPhoto.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,15 +19,15 @@
  */
 package org.teamapps.ux.component.chat;
 
-import org.teamapps.ux.resource.Resource;
+import org.teamapps.ux.resolvable.Resolvable;
 
 public class SimpleChatPhoto implements ChatPhoto {
 
 	private final String fileName;
-	private final Resource thumbnail;
-	private final Resource image;
+	private final Resolvable thumbnail;
+	private final Resolvable image;
 
-	public SimpleChatPhoto(String fileName, Resource thumbnail, Resource image) {
+	public SimpleChatPhoto(String fileName, Resolvable thumbnail, Resolvable image) {
 		this.fileName = fileName;
 		this.thumbnail = thumbnail;
 		this.image = image;
@@ -38,12 +38,12 @@ public String getFileName() {
 	}
 
 	@Override
-	public Resource getThumbnail() {
+	public Resolvable getThumbnail() {
 		return thumbnail;
 	}
 
 	@Override
-	public Resource getImage() {
+	public Resolvable getImage() {
 		return image;
 	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/collapsible/Collapsible.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/collapsible/Collapsible.java
new file mode 100644
index 000000000..0a1b6650a
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/collapsible/Collapsible.java
@@ -0,0 +1,108 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.collapsible;
+
+import org.teamapps.dto.UiCollapsible;
+import org.teamapps.dto.UiEvent;
+import org.teamapps.event.Event;
+import org.teamapps.icons.Icon;
+import org.teamapps.ux.component.AbstractComponent;
+import org.teamapps.ux.component.Component;
+
+public class Collapsible extends AbstractComponent {
+
+	public final Event<Boolean> onCollapseStateChanged = new Event<>();
+
+	private Icon<?, ?> icon;
+	private String caption;
+	private Component content;
+	private boolean collapsed;
+
+	public Collapsible() {
+		this(null, null, null);
+	}
+
+	public Collapsible(Icon<?, ?> icon, String caption) {
+		this(icon, caption, null);
+	}
+
+	public Collapsible(Icon<?, ?> icon, String caption, Component content) {
+		this.icon = icon;
+		this.caption = caption;
+		this.content = content;
+	}
+
+	@Override
+	public UiCollapsible createUiComponent() {
+		UiCollapsible ui = new UiCollapsible();
+		mapAbstractUiComponentProperties(ui);
+		ui.setIcon(getSessionContext().resolveIcon(icon));
+		ui.setCaption(caption);
+		ui.setContent(content != null ? content.createUiReference() : null);
+		ui.setCollapsed(collapsed);
+		return ui;
+	}
+
+	@Override
+	public void handleUiEvent(UiEvent event) {
+		switch (event.getUiEventType()) {
+			case UI_COLLAPSIBLE_COLLAPSE_STATE_CHANGED: {
+				UiCollapsible.CollapseStateChangedEvent ce = (UiCollapsible.CollapseStateChangedEvent) event;
+				onCollapseStateChanged.fire(ce.getCollapsed());
+			}
+		}
+	}
+
+	public Component getContent() {
+		return content;
+	}
+
+	public void setContent(Component content) {
+		this.content = content;
+		queueCommandIfRendered(() -> new UiCollapsible.SetContentCommand(getId(), content != null ? content.createUiReference() : null));
+	}
+
+	public Icon<?, ?> getIcon() {
+		return icon;
+	}
+
+	public void setIcon(Icon<?, ?> icon) {
+		this.icon = icon;
+		queueCommandIfRendered(() -> new UiCollapsible.SetIconAndCaptionCommand(getId(), getSessionContext().resolveIcon(icon), caption));
+	}
+
+	public String getCaption() {
+		return caption;
+	}
+
+	public void setCaption(String caption) {
+		this.caption = caption;
+		queueCommandIfRendered(() -> new UiCollapsible.SetIconAndCaptionCommand(getId(), getSessionContext().resolveIcon(icon), caption));
+	}
+
+	public boolean isCollapsed() {
+		return collapsed;
+	}
+
+	public void setCollapsed(boolean collapsed) {
+		this.collapsed = collapsed;
+		queueCommandIfRendered(() -> new UiCollapsible.SetCollapsedCommand(getId(), collapsed));
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/dialogue/Dialogue.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/dialogue/Dialogue.java
index d6455d497..8685df31c 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/dialogue/Dialogue.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/dialogue/Dialogue.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -21,7 +21,7 @@
 
 import org.teamapps.event.Event;
 import org.teamapps.icon.material.MaterialIcon;
-import org.teamapps.icons.api.Icon;
+import org.teamapps.icons.Icon;
 import org.teamapps.ux.component.field.Button;
 import org.teamapps.ux.component.field.FieldEditingMode;
 import org.teamapps.ux.component.field.combobox.ComboBox;
@@ -36,6 +36,7 @@
 import org.teamapps.ux.component.template.BaseTemplate;
 import org.teamapps.ux.component.template.BaseTemplateRecord;
 import org.teamapps.ux.component.window.Window;
+import org.teamapps.ux.i18n.TeamAppsDictionary;
 
 
 public class Dialogue extends Window {
@@ -58,6 +59,10 @@ public static Event<Boolean> showOkCancel(BaseTemplateRecord<?> record) {
 		return dialogue.onResult;
 	}
 
+	public static Dialogue createOkCancel(Icon icon, String title) {
+		return createOkCancel(icon, title, title);
+	}
+
 	public static Dialogue createOkCancel(Icon icon, String title, String text) {
 		Dialogue dialogue = new Dialogue();
 		dialogue.setValues(icon, title, text);
@@ -67,6 +72,10 @@ public static Dialogue createOkCancel(Icon icon, String title, String text) {
 		return dialogue;
 	}
 
+	public static Event<Boolean> showOk(Icon icon, String title) {
+		return showOk(icon, title, title);
+	}
+
 	public static Event<Boolean> showOk(Icon icon, String title, String text) {
 		Dialogue dialogue = new Dialogue();
 		dialogue.getCancelButton().setVisible(false);
@@ -92,20 +101,18 @@ public Dialogue() {
 		comboBox.setTemplate(BaseTemplate.LIST_ITEM_VERY_LARGE_ICON_TWO_LINES);
 		comboBox.setEditingMode(FieldEditingMode.READONLY);
 		formLayout.addField(0, 0, "data", comboBox).setHorizontalAlignment(HorizontalElementAlignment.CENTER).setColSpan(3);
-		okButton = Button.create(MaterialIcon.CHECK, "OK");
-		okButton.onValueChanged.addListener((o) -> {
+		okButton = Button.create(MaterialIcon.CHECK, getSessionContext().getLocalized(TeamAppsDictionary.OK.getKey()));
+		okButton.onClicked.addListener(() -> {
 			close(250);
-			getSessionContext().flushCommands();
 			onResult.fire(true);
 		});
-		cancelButton = Button.create(MaterialIcon.CANCEL, "Abbrechen");
-		cancelButton.onValueChanged.addListener((o) -> {
+		cancelButton = Button.create(MaterialIcon.CANCEL, getSessionContext().getLocalized(TeamAppsDictionary.CANCEL.getKey()));
+		cancelButton.onClicked.addListener(() -> {
 			close(250);
-			getSessionContext().flushCommands();
 			onResult.fire(false);
 		});
-		formLayout.addField(1, 1, "ok", okButton);
-		formLayout.addField(1, 2, "cancel", cancelButton);
+		formLayout.addComponent(1, 1, okButton);
+		formLayout.addComponent(1, 2, cancelButton);
 	}
 
 	public void setValues(BaseTemplateRecord<?> record) {
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/dialogue/FormDialogue.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/dialogue/FormDialogue.java
index 456c3793a..ea79974a7 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/dialogue/FormDialogue.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/dialogue/FormDialogue.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -21,13 +21,19 @@
 
 import org.teamapps.event.Event;
 import org.teamapps.icon.material.MaterialIcon;
-import org.teamapps.icons.api.Icon;
+import org.teamapps.icons.Icon;
+import org.teamapps.ux.component.Component;
 import org.teamapps.ux.component.field.AbstractField;
 import org.teamapps.ux.component.field.Button;
-import org.teamapps.ux.component.field.FieldEditingMode;
-import org.teamapps.ux.component.field.combobox.ComboBox;
+import org.teamapps.ux.component.field.FieldMessage;
+import org.teamapps.ux.component.field.TemplateField;
+import org.teamapps.ux.component.flexcontainer.FlexSizeUnit;
+import org.teamapps.ux.component.flexcontainer.FlexSizingPolicy;
+import org.teamapps.ux.component.flexcontainer.HorizontalLayout;
 import org.teamapps.ux.component.form.ResponsiveForm;
+import org.teamapps.ux.component.form.ResponsiveFormConfigurationTemplate;
 import org.teamapps.ux.component.form.ResponsiveFormLayout;
+import org.teamapps.ux.component.form.ResponsiveFormSection;
 import org.teamapps.ux.component.format.HorizontalElementAlignment;
 import org.teamapps.ux.component.format.Spacing;
 import org.teamapps.ux.component.template.BaseTemplate;
@@ -37,61 +43,117 @@
 public class FormDialogue extends Window {
 
 	public Event<Boolean> onResult = new Event<>();
-	private ComboBox<BaseTemplateRecord<?>> comboBox;
-	private Button<?> okButton;
-	private Button<?> cancelButton;
+	public Event<Void> onOk = new Event<>();
+	public Event<Void> onCancel = new Event<>();
+
 	private Integer buttonLineIndex;
-	private ResponsiveFormLayout formLayout;
+	private final ResponsiveFormLayout formLayout;
+	private HorizontalLayout buttonRow;
+
+	private boolean autoCloseOnOk = true;
+	private final ResponsiveForm<?> form;
 
-	public static FormDialogue create(Icon icon, String title, String text) {
+	public static FormDialogue create(Icon<?, ?> icon, String title, String text) {
 		return new FormDialogue(icon, title, text);
 	}
 
-	public FormDialogue(Icon icon, String title, String text) {
+	public FormDialogue(Icon<?, ?> icon, String title) {
+		this(icon, null, title, null);
+	}
+
+	public FormDialogue(Icon<?, ?> icon, String title, String text) {
+		this(icon, null, title, text);
+	}
+
+	public FormDialogue(Icon<?, ?> icon, String imageUrl, String title, String text) {
+		this(icon, imageUrl, title, text, ResponsiveFormConfigurationTemplate.createDefaultTwoColumnTemplate(0, 200, 0));
+	}
+
+	public FormDialogue(Icon<?, ?> icon, String imageUrl, String title, String text, ResponsiveFormConfigurationTemplate configurationTemplate) {
 		setIcon(icon);
 		setTitle(title);
 		setWidth(550);
 		setHeight(350);
-		ResponsiveForm<?> responsiveForm = new ResponsiveForm<>(0, 200, 0);
-		formLayout = responsiveForm.addResponsiveFormLayout(450);
-		formLayout.addSection().setDrawHeaderLine(false).setCollapsible(false).setMargin(new Spacing(10)).setGridGap(20);
-		comboBox = new ComboBox<>();
-		comboBox.setTemplate(BaseTemplate.LIST_ITEM_VERY_LARGE_ICON_TWO_LINES);
-		comboBox.setEditingMode(FieldEditingMode.READONLY);
-		comboBox.setValue(new BaseTemplateRecord<>(icon, title, text));
-		formLayout.addField(0, 0, "header", comboBox).setHorizontalAlignment(HorizontalElementAlignment.LEFT).setColSpan(3);
-		setContent(responsiveForm);
-	}
-
-	public void addField(Icon icon, String caption, AbstractField<?> field) {
+		form = new ResponsiveForm<>(configurationTemplate);
+		formLayout = form.addResponsiveFormLayout(450);
+		formLayout.addSection().setDrawHeaderLine(false).setCollapsible(false).setMargin(new Spacing(10)).setGridGap(10);
+		if (text != null) {
+			TemplateField<BaseTemplateRecord<?>> titleField = new TemplateField<>(BaseTemplate.LIST_ITEM_VERY_LARGE_ICON_TWO_LINES, new BaseTemplateRecord<>(icon, imageUrl, title, text, null));
+			formLayout.addField(0, 0, "header", titleField).setHorizontalAlignment(HorizontalElementAlignment.LEFT).setColSpan(2);
+		}
+		setContent(form);
+	}
+
+	public ResponsiveFormSection addSection(Icon<?, ?> icon, String caption) {
+		return formLayout.addSection(icon, caption);
+	}
+
+	public void addField(Icon<?, ?> icon, String caption, AbstractField<?> field) {
 		formLayout.addLabelAndField(icon, caption, field).field.setColSpan(2);
 	}
 
+	public void addComponent(Icon<?, ?> icon, String caption, Component field) {
+		formLayout.addLabelAndComponent(icon, caption, field).field.setColSpan(2);
+	}
+
+	public ResponsiveFormLayout getFormLayout() {
+		return formLayout;
+	}
+
 	public void addOkCancelButtons(String okCaption, String cancelCaption) {
 		addOkButton(okCaption);
 		addCancelButton(cancelCaption);
 	}
 
+	public void addOkCancelButtons(Icon<?, ?> okIcon, String okCaption, Icon<?, ?> cancelIcon, String cancelCaption) {
+		addOkButton(okIcon, okCaption);
+		addCancelButton(cancelIcon, cancelCaption);
+	}
+
 	public Button<?> addOkButton(String caption) {
-		okButton = Button.create(MaterialIcon.CHECK, caption);
-		okButton.onValueChanged.addListener((o) -> {
-			close(250);
-			getSessionContext().flushCommands();
-			onResult.fire(true);
-		});
+		return addOkButton(MaterialIcon.CHECK, caption);
+	}
 
-		formLayout.addField(getButtonLineIndex(), 1, "ok", okButton);
+	public Button<?> addOkButton(Icon<?, ?> icon, String caption) {
+		createButtonRowIfNotExists();
+
+		Button<?> okButton = Button.create(icon, caption);
+		okButton.onClicked.addListener(() -> {
+			if (form.validate() != FieldMessage.Severity.ERROR) {
+				onResult.fire(true);
+				onOk.fire();
+				if (autoCloseOnOk) {
+					close(250);
+				}
+			}
+		});
+		buttonRow.addComponent(okButton, new FlexSizingPolicy(0, FlexSizeUnit.AUTO, 1, 1));
 		return okButton;
 	}
 
+	private void createButtonRowIfNotExists() {
+		if (buttonRow == null) {
+			formLayout.addSection().setCollapsible(false).setDrawHeaderLine(false);
+			buttonRow = new HorizontalLayout();
+			formLayout.addLabelAndComponent(buttonRow).field.setColSpan(2);
+		}
+	}
+
 	public Button<?> addCancelButton(String caption) {
-		cancelButton = Button.create(MaterialIcon.CANCEL, caption);
-		cancelButton.onValueChanged.addListener((o) -> {
+		return addCancelButton(MaterialIcon.CANCEL, caption);
+	}
+
+	public Button<?> addCancelButton(Icon<?, ?> icon, String caption) {
+		createButtonRowIfNotExists();
+
+		Button<?> cancelButton = Button.create(icon, caption);
+		cancelButton.setCssStyle("margin-left", "10px"); // TODO #css
+		cancelButton.onClicked.addListener(() -> {
 			close(250);
-			getSessionContext().flushCommands();
 			onResult.fire(false);
+			onCancel.fire();
 		});
-		formLayout.addField(getButtonLineIndex(), 2, "cancel", cancelButton);
+		buttonRow.addComponent(cancelButton, new FlexSizingPolicy(0, FlexSizeUnit.AUTO, 1, 1));
 		return cancelButton;
 	}
 
@@ -101,4 +163,12 @@ private int getButtonLineIndex() {
 		}
 		return buttonLineIndex;
 	}
+
+	public boolean isAutoCloseOnOk() {
+		return autoCloseOnOk;
+	}
+
+	public void setAutoCloseOnOk(boolean autoCloseOnOk) {
+		this.autoCloseOnOk = autoCloseOnOk;
+	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/div/Div.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/div/Div.java
new file mode 100644
index 000000000..d951b830b
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/div/Div.java
@@ -0,0 +1,58 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.div;
+
+import org.teamapps.dto.UiDiv;
+import org.teamapps.ux.component.AbstractComponent;
+import org.teamapps.ux.component.Component;
+
+public class Div extends AbstractComponent {
+
+	private Component content;
+	private boolean stretchContent;
+
+	public Div(Component content) {
+		this.content = content;
+	}
+
+	public Div() {
+	}
+
+	@Override
+	public UiDiv createUiComponent() {
+		UiDiv ui = new UiDiv();
+		mapAbstractUiComponentProperties(ui);
+		ui.setContent(content != null ? content.createUiReference() : null);
+		return ui;
+	}
+
+	public Component getContent() {
+		return content;
+	}
+
+	public void setContent(Component content) {
+		this.content = content;
+		queueCommandIfRendered(() -> new UiDiv.SetContentCommand(getId(), content != null ? content.createUiReference() : null));
+	}
+
+	public void setStretchContent(boolean stretchContent) {
+		this.toggleCssClass("full-size-children", true);
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/documentviewer/DocumentViewer.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/documentviewer/DocumentViewer.java
index f340abfa2..332af5300 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/documentviewer/DocumentViewer.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/documentviewer/DocumentViewer.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -49,7 +49,7 @@ public DocumentViewer(List<String> pageUrls) {
 
 	@Override
 	public UiComponent createUiComponent() {
-		UiDocumentViewer documentViewer = new UiDocumentViewer(getId());
+		UiDocumentViewer documentViewer = new UiDocumentViewer();
 		mapAbstractUiComponentProperties(documentViewer);
 		documentViewer.setPageUrls(pageUrls);
 		documentViewer.setDisplayMode(displayMode.toUiPageDisplayMode());
@@ -139,8 +139,4 @@ public void setPageSpacing(int pageSpacing) {
 		queueCommandIfRendered(() -> new UiDocumentViewer.SetPageSpacingCommand(getId(), pageSpacing));
 	}
 
-	@Override
-	protected void doDestroy() {
-		// nothing to do
-	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/documentviewer/PageDisplayMode.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/documentviewer/PageDisplayMode.java
index 49ef22e5d..92447519c 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/documentviewer/PageDisplayMode.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/documentviewer/PageDisplayMode.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/dummy/DummyComponent.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/dummy/DummyComponent.java
index 7528ffb80..7da3f806c 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/dummy/DummyComponent.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/dummy/DummyComponent.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -41,7 +41,7 @@ public DummyComponent() {
 
 	@Override
 	public UiComponent createUiComponent() {
-		UiDummyComponent dummyComponent = new UiDummyComponent(getId());
+		UiDummyComponent dummyComponent = new UiDummyComponent();
 		mapAbstractUiComponentProperties(dummyComponent);
 		dummyComponent.setText(text);
 		return dummyComponent;
@@ -52,11 +52,6 @@ public void handleUiEvent(UiEvent event) {
 		onClick.fire(null);
 	}
 
-	@Override
-	protected void doDestroy() {
-		// nothing to do
-	}
-
 	public String getText() {
 		return text;
 	}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/AbstractField.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/AbstractField.java
index 022c9bcb0..6f954efea 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/AbstractField.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/AbstractField.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -25,30 +25,43 @@
 import org.teamapps.dto.UiField;
 import org.teamapps.event.Event;
 import org.teamapps.ux.component.AbstractComponent;
+import org.teamapps.ux.component.field.validator.FieldValidator;
+import org.teamapps.ux.i18n.TeamAppsDictionary;
+import org.teamapps.ux.session.CurrentSessionContext;
 
-import java.util.ArrayList;
-import java.util.Collections;
-import java.util.List;
+import java.util.*;
 import java.util.stream.Collectors;
+import java.util.stream.Stream;
 
-// TODO #componentGenerics
 public abstract class AbstractField<VALUE> extends AbstractComponent {
 
-	private static Logger LOGGER = LoggerFactory.getLogger(AbstractField.class);
+	private static final Logger LOGGER = LoggerFactory.getLogger(AbstractField.class);
 
+	private final FieldValidator<VALUE> requiredValidator = (value) ->
+			this.isEmptyValue(value) ? Collections.singletonList(new FieldMessage(FieldMessage.Severity.ERROR,
+					CurrentSessionContext.get().getLocalized(TeamAppsDictionary.REQUIRED_FIELD.getKey()))) : List.of();
+
+	private final FieldValidator<VALUE> requiredIfVisibleAndEditableValidator = (value) ->
+			(this.isVisible() && (this.getEditingMode() == FieldEditingMode.EDITABLE || this.getEditingMode() == FieldEditingMode.EDITABLE_IF_FOCUSED) && this.isEmptyValue(value)) ?
+					Collections.singletonList(new FieldMessage(FieldMessage.Severity.ERROR,
+							CurrentSessionContext.get().getLocalized(TeamAppsDictionary.REQUIRED_FIELD.getKey()))) : List.of();
+
+	public final Event<VALUE> onFocus = new Event<>();
+	public final Event<VALUE> onBlur = new Event<>();
 	public final Event<VALUE> onValueChanged = new Event<>();
 	public final Event<Boolean> onVisibilityChanged = new Event<>();
 
 	private FieldEditingMode editingMode = FieldEditingMode.EDITABLE;
-	private boolean visible = true;
 
-	private final List<FieldMessage> fieldMessages = new ArrayList<>(0);
+	private final Set<FieldValidator<VALUE>> validators = new HashSet<>();
+	private final Map<FieldValidator<VALUE>, List<FieldMessage>> fieldMessagesByValidator = new HashMap<>();
+	private final List<FieldMessage> customFieldMessages = new ArrayList<>();
+	private FieldMessage.Position defaultMessagePosition = FieldMessage.Position.BELOW;
+	private FieldMessage.Visibility defaultMessageVisibility = FieldMessage.Visibility.ALWAYS_VISIBLE;
 
-	private MultiWriteLockableValue<VALUE> value = new MultiWriteLockableValue<>(null);
+	private final MultiWriteLockableValue<VALUE> value = new MultiWriteLockableValue<>(null);
 
-	public AbstractField() {
-		getSessionContext().onDestroyed().addListener(aVoid -> this.destroy());
-	}
+	private boolean valueChangedByClient;
 
 	public FieldEditingMode getEditingMode() {
 		return editingMode;
@@ -59,17 +72,13 @@ public void setEditingMode(FieldEditingMode editingMode) {
 		queueCommandIfRendered(() -> new UiField.SetEditingModeCommand(getId(), editingMode.toUiFieldEditingMode()));
 	}
 
-	public boolean isVisible() {
-		return visible;
-	}
-
 	public void setVisible(boolean visible) {
-		this.visible = visible;
-		queueCommandIfRendered(() -> new UiField.SetVisibleCommand(getId(), visible));
+		super.setVisible(visible);
 		onVisibilityChanged.fire(visible);
 	}
 
 	public void focus() {
+		render();
 		queueCommandIfRendered(() -> new UiField.FocusCommand(getId()));
 	}
 
@@ -77,13 +86,13 @@ protected void mapAbstractFieldAttributesToUiField(UiField uiField) {
 		mapAbstractUiComponentProperties(uiField);
 		uiField.setValue(convertUxValueToUiValue(this.value.read()));
 		uiField.setEditingMode(editingMode.toUiFieldEditingMode());
-		uiField.setVisible(this.visible);
-		uiField.setFieldMessages(fieldMessages.stream()
-				.map(message -> message.createUiFieldMessage())
+		uiField.setFieldMessages(getFieldMessages().stream()
+				.map(message -> message.createUiFieldMessage(defaultMessagePosition, defaultMessageVisibility))
 				.collect(Collectors.toList()));
 	}
 
 	public void setValue(VALUE value) {
+		valueChangedByClient = false;
 		MultiWriteLockableValue.Lock lock = this.value.writeAndLock(value);
 		Object uiValue = this.convertUxValueToUiValue(value);
 		if (isRendered()) {
@@ -116,7 +125,18 @@ public VALUE getValue() {
 	public void handleUiEvent(UiEvent event) {
 		switch (event.getUiEventType()) {
 			case UI_FIELD_VALUE_CHANGED:
-				applyValueFromUi(((UiField.ValueChangedEvent) event).getValue());
+				if (editingMode.isEditable()) {
+					applyValueFromUi(((UiField.ValueChangedEvent) event).getValue());
+					validate();
+				} else {
+					LOGGER.warn("Got valueChanged event from non-editable field {} {}", this.getClass().getSimpleName(), getDebuggingId());
+				}
+				break;
+			case UI_FIELD_FOCUS_GAINED:
+				onFocus.fire();
+				break;
+			case UI_FIELD_BLUR:
+				onBlur.fire();
 				break;
 		}
 	}
@@ -126,57 +146,176 @@ protected void applyValueFromUi(Object value) {
 			VALUE transformedValue = convertUiValueToUxValue(value);
 			if (!this.value.isLocked()) {
 				this.value.writeIfNotLocked(transformedValue);
+				valueChangedByClient = true;
 				onValueChanged.fire(transformedValue);
 			}
 		}
 	}
 
+	protected boolean isValueLocked() {
+		return this.value.isLocked();
+	}
+
 	public VALUE convertUiValueToUxValue(Object value) {
 		return (VALUE) value;
 	}
 
-	protected abstract void doDestroy();
+	/**
+	 * Whether this value be regarded as empty / "no user input".
+	 * Override for field-specific behaviour.
+	 *
+	 * @return true if the value can be regarded as "empty".
+	 */
+	protected boolean isEmptyValue(VALUE value) {
+		return value == null;
+	}
 
-	public List<FieldMessage> getFieldMessages() {
-		return fieldMessages;
+	public boolean isEmpty() {
+		return isEmptyValue(getValue());
 	}
 
-	public void setFieldMessages(List<FieldMessage> fieldMessages) {
-		this.fieldMessages.clear();
-		this.fieldMessages.addAll(fieldMessages != null ? fieldMessages : Collections.emptyList());
-		updateFieldMessages();
+	public Collection<FieldValidator<VALUE>> getValidators() {
+		return Collections.unmodifiableSet(validators);
 	}
 
-	public void setValidationMessage(FieldMessage fieldMessage) {
-		fieldMessages.removeIf(message -> message.getSeverity() != FieldMessage.Severity.INFO);
-		fieldMessages.add(fieldMessage);
+	public void addValidator(FieldValidator<VALUE> validator) {
+		validators.add(validator);
+	}
+
+	public void removeValidator(FieldValidator<VALUE> validator) {
+		validators.remove(validator);
+		fieldMessagesByValidator.remove(validator);
 		updateFieldMessages();
 	}
 
-	public void removeValidationMessages() {
-		if (fieldMessages.removeIf(message -> message.getSeverity() != FieldMessage.Severity.INFO)) {
+	public List<FieldMessage> validate() {
+		List<FieldMessage> allValidatorMessages = new ArrayList<>();
+		if (validators.size() > 0) {
+			for (FieldValidator<VALUE> validator : validators) {
+				fieldMessagesByValidator.remove(validator);
+				List<FieldMessage> messages = validator.validate(getValue());
+				if (messages == null) {
+					messages = Collections.emptyList();
+				}
+				fieldMessagesByValidator.put(validator, messages);
+				allValidatorMessages.addAll(messages);
+			}
 			updateFieldMessages();
 		}
+		return allValidatorMessages;
+	}
+
+	public void clearValidatorMessages() {
+		fieldMessagesByValidator.clear();
+		updateFieldMessages();
+	}
+
+	public void clearAllMessages() {
+		fieldMessagesByValidator.clear();
+		customFieldMessages.clear();
+		updateFieldMessages();
+	}
+
+	/**
+	 * field may not be null (empty)
+	 */
+	public void setRequired(boolean required) {
+		if (required) {
+			addValidator(requiredValidator);
+		} else {
+			removeValidator(requiredValidator);
+		}
+	}
+
+	public void setRequiredIfVisibleAndEditable(boolean required) {
+		if (required) {
+			addValidator(requiredIfVisibleAndEditableValidator);
+		} else {
+			removeValidator(requiredIfVisibleAndEditableValidator);
+		}
+	}
+
+	public boolean isRequired() {
+		return validators.contains(requiredValidator);
+	}
+
+	public List<FieldMessage> getFieldMessages() {
+		return Stream.concat(
+						fieldMessagesByValidator.values().stream()
+								.filter(Objects::nonNull)
+								.flatMap(Collection::stream),
+						customFieldMessages.stream()
+				)
+				.collect(Collectors.toList());
 	}
 
-	public void addFieldMessage(FieldMessage fieldMessage) {
-		fieldMessages.add(fieldMessage);
+	public List<FieldMessage> getCustomFieldMessages() {
+		return List.copyOf(customFieldMessages);
+	}
+
+	public void setCustomFieldMessages(List<FieldMessage> fieldMessages) {
+		customFieldMessages.clear();
+		customFieldMessages.addAll(fieldMessages);
+		updateFieldMessages();
+	}
+
+	public void addCustomFieldMessage(FieldMessage.Severity severity, String text) {
+		addCustomFieldMessage(new FieldMessage(severity, text));
+	}
+
+	public void addCustomFieldMessage(FieldMessage fieldMessage) {
+		customFieldMessages.add(fieldMessage);
 		updateFieldMessages();
 	}
 
-	public void removeFieldMessage(FieldMessage fieldMessage) {
-		fieldMessages.remove(fieldMessage);
+	public void removeCustomFieldMessage(FieldMessage fieldMessage) {
+		customFieldMessages.remove(fieldMessage);
 		updateFieldMessages();
 	}
 
-	public void removeFieldMessages(List<FieldMessage> fieldMessages) {
-		fieldMessages.removeAll(fieldMessages);
+	public void clearCustomFieldMessages() {
+		customFieldMessages.clear();
 		updateFieldMessages();
 	}
 
 	private void updateFieldMessages() {
-		queueCommandIfRendered(() -> new UiField.SetFieldMessagesCommand(getId(), fieldMessages.stream()
-				.map(message -> message.createUiFieldMessage())
+		queueCommandIfRendered(() -> new UiField.SetFieldMessagesCommand(getId(), getFieldMessages().stream()
+				.map(fieldMessage -> fieldMessage.createUiFieldMessage(defaultMessagePosition, defaultMessageVisibility))
 				.collect(Collectors.toList())));
 	}
+
+	public boolean isValid() {
+		return getMaxFieldMessageSeverity() != FieldMessage.Severity.ERROR;
+	}
+
+	public FieldMessage.Severity getMaxFieldMessageSeverity() {
+		return getFieldMessages().stream()
+				.map(fieldMessage -> fieldMessage.getSeverity())
+				.max(Comparator.comparing(severity -> severity.ordinal()))
+				.orElse(null);
+	}
+
+	public FieldMessage.Position getDefaultMessagePosition() {
+		return defaultMessagePosition;
+	}
+
+	public void setDefaultMessagePosition(FieldMessage.Position defaultMessagePosition) {
+		this.defaultMessagePosition = defaultMessagePosition;
+	}
+
+	public FieldMessage.Visibility getDefaultMessageVisibility() {
+		return defaultMessageVisibility;
+	}
+
+	public void setDefaultMessageVisibility(FieldMessage.Visibility defaultMessageVisibility) {
+		this.defaultMessageVisibility = defaultMessageVisibility;
+	}
+
+	public boolean isValueChangedByClient() {
+		return valueChangedByClient;
+	}
+
+	public void setValueChangedByClient(boolean valueChangedByClient) {
+		this.valueChangedByClient = valueChangedByClient;
+	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/Button.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/Button.java
index 2dfc5eeaf..92676893b 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/Button.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/Button.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,32 +19,36 @@
  */
 package org.teamapps.ux.component.field;
 
+import org.teamapps.common.format.Color;
 import org.teamapps.data.extract.BeanPropertyExtractor;
 import org.teamapps.data.extract.PropertyExtractor;
+import org.teamapps.data.extract.PropertyProvider;
 import org.teamapps.dto.UiButton;
 import org.teamapps.dto.UiEvent;
 import org.teamapps.dto.UiField;
 import org.teamapps.event.Event;
-import org.teamapps.icons.api.Icon;
+import org.teamapps.icons.Icon;
 import org.teamapps.ux.component.Component;
-import org.teamapps.common.format.Color;
 import org.teamapps.ux.component.template.BaseTemplate;
 import org.teamapps.ux.component.template.BaseTemplateRecord;
 import org.teamapps.ux.component.template.Template;
 
-public class Button<RECORD> extends AbstractField<Boolean> {
+public class Button<RECORD> extends AbstractField<Void> {
 
+	public final Event<Void> onClicked = new Event<>();
 	public final Event<Void> onDropDownOpened = new Event<>();
 
-	private Template template = BaseTemplate.FORM_BUTTON; // null: toString!
+	private Template template; // null: toString!
 	private RECORD templateRecord;
-	private PropertyExtractor<RECORD> propertyExtractor = new BeanPropertyExtractor<>();
+	private PropertyProvider<RECORD> propertyProvider = new BeanPropertyExtractor<>();
 
 	private boolean openDropDownIfNotSet = false;
 	private Component dropDownComponent;
 	private Integer minDropDownWidth = null;
 	private Integer minDropDownHeight = 300;
 
+	private String onClickJavaScript;
+
 	public Button(Template template, RECORD templateRecord, Component dropDownComponent) {
 		super();
 		this.template = template;
@@ -56,38 +60,51 @@ public Button(Template template, RECORD templateRecord) {
 		this(template, templateRecord, null);
 	}
 
+	public static Button<BaseTemplateRecord> create(Template template, Icon icon, String caption, Component dropDownComponent) {
+		return new Button<>(template, new BaseTemplateRecord(icon, caption), dropDownComponent);
+	}
+
+	public static Button<BaseTemplateRecord> create(Template template, Icon icon, String caption) {
+		return create(template, icon, caption, null);
+	}
+
+	public static Button<BaseTemplateRecord> create(Template template, String caption) {
+		return create(template, null, caption, null);
+	}
+
 	public static Button<BaseTemplateRecord> create(Icon icon, String caption, Component dropDownComponent) {
-		return new Button<>(BaseTemplate.FORM_BUTTON, new BaseTemplateRecord(icon, caption), dropDownComponent);
+		return create(BaseTemplate.BUTTON, icon, caption, dropDownComponent);
 	}
 
 	public static Button<BaseTemplateRecord> create(String caption, Component dropDownComponent) {
-		return new Button<>(BaseTemplate.FORM_BUTTON, new BaseTemplateRecord(caption), dropDownComponent);
+		return create(BaseTemplate.BUTTON, null, caption, dropDownComponent);
 	}
 
 	public static Button<BaseTemplateRecord> create(Icon icon, String caption) {
-		return new Button<>(BaseTemplate.FORM_BUTTON, new BaseTemplateRecord(icon, caption));
+		return create(BaseTemplate.BUTTON, icon, caption, null);
 	}
 
 	public static Button<BaseTemplateRecord> create(String caption) {
-		return new Button<>(BaseTemplate.FORM_BUTTON, new BaseTemplateRecord(caption));
+		return create(BaseTemplate.BUTTON, null, caption, null);
 	}
 
 	@Override
 	public UiField createUiComponent() {
 		Object uiRecord = createUiRecord();
-		UiButton button = new UiButton(getId(), getTemplate().createUiTemplate(), uiRecord);
-		mapAbstractFieldAttributesToUiField(button);
-		button.setDropDownComponent(Component.createUiComponentReference(dropDownComponent));
-		button.setMinDropDownWidth(minDropDownWidth != null ? minDropDownWidth : 0);
-		button.setMinDropDownHeight(minDropDownHeight != null ? minDropDownHeight : 0);
-		button.setOpenDropDownIfNotSet(this.openDropDownIfNotSet);
-		return button;
+		UiButton ui = new UiButton(template != null ? template.createUiTemplate() : null, uiRecord);
+		mapAbstractFieldAttributesToUiField(ui);
+		ui.setDropDownComponent(Component.createUiClientObjectReference(dropDownComponent));
+		ui.setMinDropDownWidth(minDropDownWidth != null ? minDropDownWidth : 0);
+		ui.setMinDropDownHeight(minDropDownHeight != null ? minDropDownHeight : 0);
+		ui.setOpenDropDownIfNotSet(this.openDropDownIfNotSet);
+		ui.setOnClickJavaScript(onClickJavaScript);
+		return ui;
 	}
 
 	private Object createUiRecord() {
 		Object uiRecord;
 		if (template != null) {
-			uiRecord = propertyExtractor.getValues(templateRecord, template.getDataKeys());
+			uiRecord = propertyProvider.getValues(templateRecord, template.getPropertyNames());
 		} else {
 			uiRecord = templateRecord.toString();
 		}
@@ -98,9 +115,18 @@ private Object createUiRecord() {
 	public void handleUiEvent(UiEvent event) {
 		super.handleUiEvent(event);
 		switch (event.getUiEventType()) {
-			case UI_BUTTON_DROP_DOWN_OPENED:
-				this.onDropDownOpened.fire(null);
+			case UI_BUTTON_CLICKED: {
+				if (isVisible()) {
+					this.onClicked.fire();
+				}
 				break;
+			}
+			case UI_BUTTON_DROP_DOWN_OPENED: {
+				if (isVisible()) {
+					this.onDropDownOpened.fire(null);
+				}
+				break;
+			}
 		}
 	}
 
@@ -125,16 +151,20 @@ public Button<RECORD> setTemplateRecord(RECORD templateRecord) {
 	}
 
 	public Button<RECORD> setColor(Color color) {
-		this.setCssStyle(".btn", "background-color", color.toHtmlColorString());
+		this.setCssStyle(".btn", "background-color", color != null ? color.toHtmlColorString() : null);
 		return this;
 	}
 
-	public PropertyExtractor<RECORD> getPropertyExtractor() {
-		return propertyExtractor;
+	public PropertyProvider<RECORD> getPropertyProvider() {
+		return propertyProvider;
+	}
+
+	public void setPropertyProvider(PropertyProvider<RECORD> propertyProvider) {
+		this.propertyProvider = propertyProvider;
 	}
 
 	public void setPropertyExtractor(PropertyExtractor<RECORD> propertyExtractor) {
-		this.propertyExtractor = propertyExtractor;
+		this.propertyProvider = propertyExtractor;
 	}
 
 	public Integer getMinDropDownWidth() {
@@ -180,14 +210,20 @@ public Component getDropDownComponent() {
 
 	public Button<RECORD> setDropDownComponent(Component dropDownComponent) {
 		this.dropDownComponent = dropDownComponent;
-		queueCommandIfRendered(() -> new UiButton.SetDropDownComponentCommand(getId(), Component.createUiComponentReference(dropDownComponent)));
+		queueCommandIfRendered(() -> new UiButton.SetDropDownComponentCommand(getId(), Component.createUiClientObjectReference(dropDownComponent)));
 		return this;
 	}
 
-	@Override
-	protected void doDestroy() {
-		if (this.dropDownComponent != null) {
-			this.dropDownComponent.destroy();
-		}
+	public void closeDropDown() {
+		queueCommandIfRendered(() -> new UiButton.CloseDropDownCommand(getId()));
+	}
+
+	public String getOnClickJavaScript() {
+		return onClickJavaScript;
+	}
+
+	public void setOnClickJavaScript(String onClickJavaScript) {
+		this.onClickJavaScript = onClickJavaScript;
+		queueCommandIfRendered(() -> new UiButton.SetOnClickJavaScriptCommand(getId(), onClickJavaScript));
 	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/CheckBox.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/CheckBox.java
index 03810e351..552a3b88d 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/CheckBox.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/CheckBox.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,21 +19,22 @@
  */
 package org.teamapps.ux.component.field;
 
+import org.teamapps.common.format.RgbaColor;
+import org.teamapps.common.format.Color;
 import org.teamapps.dto.UiCheckBox;
 import org.teamapps.dto.UiField;
-import org.teamapps.common.format.Color;
-
-import static org.teamapps.util.UiUtil.createUiColor;
 
 public class CheckBox extends AbstractField<Boolean> {
 
 	private String caption;
-	private Color backgroundColor = new Color(255, 255, 255);
-	private Color checkColor = new Color(70, 70, 70);
-	private Color borderColor = new Color(204, 204, 204);
+	private Color backgroundColor = new RgbaColor(255, 255, 255);
+	private Color checkColor = new RgbaColor(70, 70, 70);
+	private Color borderColor = new RgbaColor(204, 204, 204);
+	private boolean htmlEnabled = false;
 
 	public CheckBox(String caption) {
 		super();
+		setValue(false);
 		this.caption = caption;
 	}
 
@@ -43,20 +44,16 @@ public CheckBox() {
 
 	@Override
 	public UiField createUiComponent() {
-		UiCheckBox uiCheckBox = new UiCheckBox(getId());
+		UiCheckBox uiCheckBox = new UiCheckBox();
 		mapAbstractFieldAttributesToUiField(uiCheckBox);
 		uiCheckBox.setCaption(caption);
-		uiCheckBox.setBackgroundColor(backgroundColor != null ? createUiColor(backgroundColor) : null);
-		uiCheckBox.setCheckColor(checkColor != null ? createUiColor(checkColor) : null);
-		uiCheckBox.setBorderColor(borderColor != null ? createUiColor(borderColor) : null);
+		uiCheckBox.setBackgroundColor(backgroundColor != null ? backgroundColor.toHtmlColorString() : null);
+		uiCheckBox.setCheckColor(checkColor != null ? checkColor.toHtmlColorString() : null);
+		uiCheckBox.setBorderColor(borderColor != null ? borderColor.toHtmlColorString() : null);
+		uiCheckBox.setHtmlEnabled(htmlEnabled);
 		return uiCheckBox;
 	}
 
-	@Override
-	protected void doDestroy() {
-		// nothing to do
-	}
-
 	public String getCaption() {
 		return caption;
 	}
@@ -73,7 +70,7 @@ public Color getBackgroundColor() {
 
 	public CheckBox setBackgroundColor(Color backgroundColor) {
 		this.backgroundColor = backgroundColor;
-		queueCommandIfRendered(() -> new UiCheckBox.SetBackgroundColorCommand(getId(), backgroundColor != null ? createUiColor(backgroundColor) : null));
+		queueCommandIfRendered(() -> new UiCheckBox.SetBackgroundColorCommand(getId(), backgroundColor != null ? backgroundColor.toHtmlColorString() : null));
 		return this;
 	}
 
@@ -83,7 +80,7 @@ public Color getCheckColor() {
 
 	public CheckBox setCheckColor(Color checkColor) {
 		this.checkColor = checkColor;
-		queueCommandIfRendered(() -> new UiCheckBox.SetCheckColorCommand(getId(), checkColor != null ? createUiColor(checkColor) : null));
+		queueCommandIfRendered(() -> new UiCheckBox.SetCheckColorCommand(getId(), checkColor != null ? checkColor.toHtmlColorString() : null));
 		return this;
 	}
 
@@ -93,7 +90,25 @@ public Color getBorderColor() {
 
 	public CheckBox setBorderColor(Color borderColor) {
 		this.borderColor = borderColor;
-		queueCommandIfRendered(() -> new UiCheckBox.SetBorderColorCommand(getId(), borderColor != null ? createUiColor(borderColor) : null));
+		queueCommandIfRendered(() -> new UiCheckBox.SetBorderColorCommand(getId(), borderColor != null ? borderColor.toHtmlColorString() : null));
+		return this;
+	}
+
+	public boolean isHtmlEnabled() {
+		return htmlEnabled;
+	}
+
+	public CheckBox setHtmlEnabled(boolean htmlEnabled) {
+		boolean changed = htmlEnabled != this.htmlEnabled;
+		this.htmlEnabled = htmlEnabled;
+		if (changed) {
+			reRenderIfRendered();
+		}
 		return this;
 	}
+
+	@Override
+	public void setValue(Boolean value) {
+		super.setValue(value != null && value); // null -> false
+	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/ColorPicker.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/ColorPicker.java
index 9f6d9e6ad..5cfe73ba0 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/ColorPicker.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/ColorPicker.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,16 +19,14 @@
  */
 package org.teamapps.ux.component.field;
 
-import org.teamapps.dto.UiColor;
+import org.teamapps.common.format.RgbaColor;
+import org.teamapps.common.format.Color;
 import org.teamapps.dto.UiColorPicker;
 import org.teamapps.dto.UiField;
-import org.teamapps.common.format.Color;
-
-import static org.teamapps.util.UiUtil.createUiColor;
 
 public class ColorPicker extends AbstractField<Color> {
 
-	private Color defaultColor = new Color(0, 0, 0);
+	private Color defaultColor = new RgbaColor(0, 0, 0);
 	private String saveButtonCaption = "Save";
 	private String clearButtonCaption = "Clear";
 
@@ -38,9 +36,9 @@ public ColorPicker() {
 
 	@Override
 	public UiField createUiComponent() {
-		UiColorPicker uiColorPicker = new UiColorPicker(getId());
+		UiColorPicker uiColorPicker = new UiColorPicker();
 		mapAbstractFieldAttributesToUiField(uiColorPicker);
-		uiColorPicker.setDefaultColor(defaultColor != null ? createUiColor(defaultColor) : null);
+		uiColorPicker.setDefaultColor(defaultColor != null ? defaultColor.toHtmlColorString() : null);
 		uiColorPicker.setSaveButtonCaption(saveButtonCaption);
 		uiColorPicker.setClearButtonCaption(clearButtonCaption);
 		return uiColorPicker;
@@ -51,14 +49,13 @@ public Color convertUiValueToUxValue(Object value) {
 		if (value == null) {
 			return null;
 		} else {
-			UiColor uiColor = (UiColor) value;
-			return new Color(uiColor.getRed(), uiColor.getGreen(), uiColor.getBlue(), uiColor.getAlpha());
+			return Color.fromHtmlString((String) value);
 		}
 	}
 
 	@Override
-	protected void doDestroy() {
-		// nothing to do
+	public Object convertUxValueToUiValue(Color color) {
+		return color != null ? color.toHtmlColorString() : null;
 	}
 
 	public Color getDefaultColor() {
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/ComponentField.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/ComponentField.java
index 9dffe0904..95ee4e430 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/ComponentField.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/ComponentField.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -22,83 +22,57 @@
 import org.teamapps.dto.UiComponentField;
 import org.teamapps.dto.UiField;
 import org.teamapps.ux.component.Component;
-import org.teamapps.ux.component.format.Border;
-import org.teamapps.common.format.Color;
-
-import static org.teamapps.util.UiUtil.createUiColor;
 
 public class ComponentField extends AbstractField<Void> {
 
-	private Component component;
-	private int width;
-	private int height;
-	private Border border;
-	private Color backgroundColor;
-
-	public ComponentField(Component component) {
-		super();
-		this.component = component;
-	}
-
-	@Override
-	public UiField createUiComponent() {
-		UiComponentField uiField = new UiComponentField(getId());
-		mapAbstractFieldAttributesToUiField(uiField);
-		uiField.setComponent(Component.createUiComponentReference(component));
-		uiField.setWidth(width);
-		uiField.setHeight(height);
-		uiField.setBorder(border != null ? border.createUiBorder(): null);
-		uiField.setBackgroundColor(backgroundColor != null ? createUiColor(backgroundColor) : null);
-		return uiField;
-	}
-
-	@Override
-	protected void doDestroy() {
-		this.component.destroy();
-	}
-
-	public Component getComponent() {
-		return component;
-	}
-
-	public void setComponent(Component component) {
-		this.component = component;
-		queueCommandIfRendered(() -> new UiComponentField.SetComponentCommand(getId(), Component.createUiComponentReference(component)));
-	}
-
-	public int getWidth() {
-		return width;
-	}
-
-	public void setWidth(int width) {
-		this.width = width;
-		queueCommandIfRendered(() -> new UiComponentField.SetSizeCommand(getId(), width, height));
-	}
-
-	public int getHeight() {
-		return height;
-	}
-
-	public void setHeight(int height) {
-		this.height = height;
-		queueCommandIfRendered(() -> new UiComponentField.SetSizeCommand(getId(), width, height));
-	}
-
-	public Border getBorder() {
-		return border;
-	}
-
-	public void setBorder(Border border) {
-		this.border = border;
-		queueCommandIfRendered(() -> new UiComponentField.SetBorderCommand(getId(), border != null ? border.createUiBorder() : null));
-	}
-
-	public Color getBackgroundColor() {
-		return backgroundColor;
-	}
+    private Component component;
+    private int height; // 0 = auto-height
+    private boolean bordered = true;
+
+    public ComponentField(Component component) {
+       this(component, 0);
+    }
+
+    public ComponentField(Component component, int height) {
+        this.component = component;
+        this.height = height;
+    }
+
+    @Override
+    public UiField createUiComponent() {
+        UiComponentField uiField = new UiComponentField();
+        mapAbstractFieldAttributesToUiField(uiField);
+        uiField.setComponent(Component.createUiClientObjectReference(component));
+        uiField.setHeight(height);
+        uiField.setBordered(bordered);
+        return uiField;
+    }
+
+    public Component getComponent() {
+        return component;
+    }
+
+    public void setComponent(Component component) {
+        this.component = component;
+        queueCommandIfRendered(() -> new UiComponentField.SetComponentCommand(getId(), Component.createUiClientObjectReference(component)));
+    }
+
+    public int getHeight() {
+        return height;
+    }
+
+    public void setHeight(int height) {
+        this.height = height;
+        queueCommandIfRendered(() -> new UiComponentField.SetHeightCommand(getId(), height));
+    }
+
+    public boolean isBordered() {
+        return bordered;
+    }
+
+    public void setBordered(boolean bordered) {
+        this.bordered = bordered;
+        queueCommandIfRendered(() -> new UiComponentField.SetBorderedCommand(getId(), bordered));
+    }
 
-	public void setBackgroundColor(Color backgroundColor) {
-		this.backgroundColor = backgroundColor;
-		queueCommandIfRendered(() -> new UiComponentField.SetBackgroundColorCommand(getId(), backgroundColor != null ? createUiColor(backgroundColor) : null));
-	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/DisplayField.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/DisplayField.java
index ab37e5a45..416c8cb35 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/DisplayField.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/DisplayField.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -40,7 +40,7 @@ public DisplayField(boolean showBorder, boolean showHtml) {
 
 	@Override
 	public UiField createUiComponent() {
-		UiDisplayField uiDisplayField = new UiDisplayField(getId());
+		UiDisplayField uiDisplayField = new UiDisplayField();
 		mapAbstractFieldAttributesToUiField(uiDisplayField);
 		uiDisplayField.setShowBorder(showBorder);
 		uiDisplayField.setShowHtml(showHtml);
@@ -48,11 +48,6 @@ public UiField createUiComponent() {
 		return uiDisplayField;
 	}
 
-	@Override
-	protected void doDestroy() {
-		// nothing to do
-	}
-
 	public boolean isShowBorder() {
 		return showBorder;
 	}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/FieldDataStructure.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/FieldDataStructure.java
index 492dfe3f4..79f7dceef 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/FieldDataStructure.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/FieldDataStructure.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/FieldEditingMode.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/FieldEditingMode.java
index 66457a906..e1f34dd21 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/FieldEditingMode.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/FieldEditingMode.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/FieldGroup.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/FieldGroup.java
new file mode 100644
index 000000000..a8d94470d
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/FieldGroup.java
@@ -0,0 +1,90 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.field;
+
+import org.teamapps.dto.UiClientObjectReference;
+import org.teamapps.dto.UiFieldGroup;
+import org.teamapps.ux.component.AbstractComponent;
+import org.teamapps.ux.component.flexcontainer.FlexSizeUnit;
+import org.teamapps.ux.component.flexcontainer.FlexSizingPolicy;
+
+import java.util.ArrayList;
+import java.util.List;
+import java.util.stream.Collectors;
+
+public class FieldGroup extends AbstractComponent {
+
+	private final List<AbstractField> fields = new ArrayList<>();
+
+	@Override
+	public UiFieldGroup createUiComponent() {
+		UiFieldGroup uiFieldGroup = new UiFieldGroup();
+		mapAbstractUiComponentProperties(uiFieldGroup);
+		uiFieldGroup.setFields(createUiFieldReferences());
+		return uiFieldGroup;
+	}
+
+	private List<UiClientObjectReference> createUiFieldReferences() {
+		return fields.stream()
+				.map(c -> c.createUiReference())
+				.collect(Collectors.toList());
+	}
+
+	private void addField(AbstractField field, int index) {
+		this.fields.remove(field);
+		if (index > this.fields.size()) {
+			index = this.fields.size();
+		}
+		this.fields.add(index, field);
+		queueCommandIfRendered(() -> new UiFieldGroup.SetFieldsCommand(getId(), createUiFieldReferences()));
+	}
+
+	public void addField(AbstractField field, FlexSizingPolicy sizingPolicy) {
+		field.setCssStyle("flex", sizingPolicy.toCssValue());
+		addField(field, this.fields.size());
+	}
+
+	public void addFieldFillRemaining(AbstractField field) {
+		addField(field, new FlexSizingPolicy(1, FlexSizeUnit.PIXEL, 1, 1));
+	}
+
+	public void addFieldAutoSize(AbstractField field) {
+		addField(field, new FlexSizingPolicy( 0, 0));
+	}
+
+	public void addField(AbstractField field, FlexSizingPolicy sizingPolicy, int index) {
+		field.setCssStyle("flex", sizingPolicy.toCssValue());
+		addField(field, index);
+	}
+
+	public void addFieldFillRemaining(AbstractField field, int index) {
+		addField(field, new FlexSizingPolicy(1, FlexSizeUnit.PIXEL, 1, 1), index);
+	}
+
+	public void addFieldAutoSize(AbstractField field, int index) {
+		addField(field, new FlexSizingPolicy( 0, 0), index);
+	}
+
+	public void removeField(AbstractField field) {
+		this.fields.remove(field);
+		queueCommandIfRendered(() -> new UiFieldGroup.SetFieldsCommand(getId(), createUiFieldReferences()));
+	}
+
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/FieldMessage.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/FieldMessage.java
index f2fe4e4b0..770dcd0a2 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/FieldMessage.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/FieldMessage.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -24,12 +24,14 @@
 import org.teamapps.dto.UiFieldMessageSeverity;
 import org.teamapps.dto.UiFieldMessageVisibilityMode;
 
+import java.util.Objects;
+
 public class FieldMessage {
 
 	private final Severity severity;
 	private final String message;
 	private final Position position;
-	private final VisibilityMode visibilityMode;
+	private final Visibility visibility;
 
 	public enum Severity {
 		INFO,
@@ -52,7 +54,7 @@ public UiFieldMessagePosition toUiFieldMessagePosition() {
 		}
 	}
 
-	public enum VisibilityMode {
+	public enum Visibility {
 		ALWAYS_VISIBLE,
 		ON_FOCUS,
 		ON_HOVER_OR_FOCUS;
@@ -63,26 +65,31 @@ public UiFieldMessageVisibilityMode toUiFieldMessageVisibilityMode() {
 	}
 
 	public FieldMessage(Severity severity, String message) {
-		this(Position.BELOW, VisibilityMode.ON_FOCUS, severity, message);
+		this(null, null, severity, message);
 	}
 
-	public FieldMessage(Position position, VisibilityMode visibilityMode, Severity severity, String message) {
+	public FieldMessage(Position position, Visibility visibility, Severity severity, String message) {
 		this.position = position;
-		this.visibilityMode = visibilityMode;
+		this.visibility = visibility;
 		this.severity = severity;
 		this.message = message;
 	}
 
-	public UiFieldMessage createUiFieldMessage() {
-		return new UiFieldMessage(severity.toUiFieldMessageSeverity(), message, position.toUiFieldMessagePosition(), visibilityMode.toUiFieldMessageVisibilityMode());
+	public UiFieldMessage createUiFieldMessage(Position defaultPosition, Visibility defaultVisibility) {
+		return new UiFieldMessage(
+				severity.toUiFieldMessageSeverity(),
+				message,
+				position != null ? position.toUiFieldMessagePosition(): defaultPosition.toUiFieldMessagePosition(),
+				visibility != null ? visibility.toUiFieldMessageVisibilityMode() : defaultVisibility.toUiFieldMessageVisibilityMode()
+		);
 	}
 
 	public Position getPosition() {
 		return position;
 	}
 
-	public VisibilityMode getVisibilityMode() {
-		return visibilityMode;
+	public Visibility getVisibility() {
+		return visibility;
 	}
 
 	public Severity getSeverity() {
@@ -99,7 +106,20 @@ public String toString() {
 				"severity=" + severity +
 				", message='" + message + '\'' +
 				", position=" + position +
-				", visibilityMode=" + visibilityMode +
+				", visibilityMode=" + visibility +
 				'}';
 	}
+
+	@Override
+	public boolean equals(Object o) {
+		if (this == o) return true;
+		if (o == null || getClass() != o.getClass()) return false;
+		FieldMessage that = (FieldMessage) o;
+		return severity == that.severity && Objects.equals(message, that.message) && position == that.position && visibility == that.visibility;
+	}
+
+	@Override
+	public int hashCode() {
+		return Objects.hash(severity, message, position, visibility);
+	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/Fields.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/Fields.java
new file mode 100644
index 000000000..929919162
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/Fields.java
@@ -0,0 +1,69 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.field;
+
+import org.teamapps.ux.i18n.TeamAppsDictionary;
+import org.teamapps.ux.session.CurrentSessionContext;
+
+import java.util.Arrays;
+import java.util.List;
+import java.util.stream.Collectors;
+import java.util.stream.Stream;
+
+public final class Fields {
+
+    private Fields() {
+        // private
+    }
+
+    public static boolean validateAll(AbstractField<?>... fields) {
+        return validateAll(Arrays.stream(fields));
+    }
+
+    public static boolean validateAll(List<AbstractField<?>> fields) {
+        return validateAll(fields.stream());
+    }
+
+    public static boolean validateAll(Stream<AbstractField<?>> stream) {
+        List<FieldMessage> errorMessage = stream
+                .flatMap(field -> field.validate().stream())
+                .filter(message -> message.getSeverity() == FieldMessage.Severity.ERROR)
+                .collect(Collectors.toList()); // to List because we want ALL validators to run!
+        return errorMessage.size() == 0;
+    }
+
+    /**
+     * @deprecated really needed anywhere? what for?
+     */
+    @Deprecated
+    public static boolean validateAllAsRequired(AbstractField<?>... fields) {
+        FieldMessage errorMessage = new FieldMessage(FieldMessage.Severity.ERROR, CurrentSessionContext.get().getLocalized(TeamAppsDictionary.REQUIRED_FIELD.getKey()));
+        boolean isNotEmpty = true;
+        for (AbstractField<?> field : fields) {
+            if (field.isEmpty()) {
+                field.removeCustomFieldMessage(errorMessage);
+                field.addCustomFieldMessage(errorMessage);
+                isNotEmpty = false;
+            }
+        }
+        return isNotEmpty;
+    }
+
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/ImageField.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/ImageField.java
index 22639c9f1..a9d332f8d 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/ImageField.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/ImageField.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,55 +19,54 @@
  */
 package org.teamapps.ux.component.field;
 
-import org.teamapps.dto.UiField;
+import org.teamapps.common.format.RgbaColor;
+import org.teamapps.common.format.Color;
 import org.teamapps.dto.UiImageField;
+import org.teamapps.ux.component.absolutelayout.Length;
 import org.teamapps.ux.component.format.Border;
 import org.teamapps.ux.component.format.ImageSizing;
 
 public class ImageField extends AbstractField<String> {
 
-	private int width; // 0 = the width will be determined by the component's content and context
-	private int height; // 0 = the height will be determined by the component's content and context
+	private Length width = Length.AUTO; 
+	private Length height = Length.AUTO;
 	private Border border;
 	private ImageSizing imageSizing = ImageSizing.CONTAIN;
+	private Color backgroundColor = RgbaColor.TRANSPARENT;
 
 	public ImageField() {
 		super();
 	}
 
 	@Override
-	public UiField createUiComponent() {
-		UiImageField uiImageField = new UiImageField(getId());
+	public UiImageField createUiComponent() {
+		UiImageField uiImageField = new UiImageField();
 		mapAbstractFieldAttributesToUiField(uiImageField);
-		uiImageField.setWidth(width);
-		uiImageField.setHeight(height);
+		uiImageField.setWidth(width.toCssString());
+		uiImageField.setHeight(height.toCssString());
 		uiImageField.setBorder(border != null ? border.createUiBorder() : null);
 		uiImageField.setImageSizing(imageSizing.toUiImageSizing());
+		uiImageField.setBackgroundColor(backgroundColor != null ? backgroundColor.toHtmlColorString(): null);
 		return uiImageField;
 	}
 
-	@Override
-	protected void doDestroy() {
-		// nothing to do
-	}
-
-	public int getWidth() {
+	public Length getWidth() {
 		return width;
 	}
 
-	public ImageField setWidth(int width) {
+	public ImageField setWidth(Length width) {
 		this.width = width;
-		queueCommandIfRendered(() -> new UiImageField.SetSizeCommand(getId(), width, height));
+		queueCommandIfRendered(() -> new UiImageField.UpdateCommand(getId(), createUiComponent()));
 		return this;
 	}
 
-	public int getHeight() {
+	public Length getHeight() {
 		return height;
 	}
 
-	public ImageField setHeight(int height) {
+	public ImageField setHeight(Length height) {
 		this.height = height;
-		queueCommandIfRendered(() -> new UiImageField.SetSizeCommand(getId(), width, height));
+		queueCommandIfRendered(() -> new UiImageField.UpdateCommand(getId(), createUiComponent()));
 		return this;
 	}
 
@@ -77,7 +76,7 @@ public Border getBorder() {
 
 	public ImageField setBorder(Border border) {
 		this.border = border;
-		queueCommandIfRendered(() -> new UiImageField.SetBorderCommand(getId(), border != null ? border.createUiBorder() : null));
+		queueCommandIfRendered(() -> new UiImageField.UpdateCommand(getId(), createUiComponent()));
 		return this;
 	}
 
@@ -87,7 +86,16 @@ public ImageSizing getImageSizing() {
 
 	public ImageField setImageSizing(ImageSizing imageSizing) {
 		this.imageSizing = imageSizing;
-		queueCommandIfRendered(() -> new UiImageField.SetImageSizingCommand(getId(), imageSizing.toUiImageSizing()));
+		queueCommandIfRendered(() -> new UiImageField.UpdateCommand(getId(), createUiComponent()));
 		return this;
 	}
+
+	public Color getBackgroundColor() {
+		return backgroundColor;
+	}
+
+	public void setBackgroundColor(Color backgroundColor) {
+		this.backgroundColor = backgroundColor;
+		queueCommandIfRendered(() -> new UiImageField.UpdateCommand(getId(), createUiComponent()));
+	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/Label.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/Label.java
index e8885fe23..93f73e409 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/Label.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/Label.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -23,7 +23,8 @@
 import org.teamapps.dto.UiField;
 import org.teamapps.dto.UiLabel;
 import org.teamapps.event.Event;
-import org.teamapps.icons.api.Icon;
+import org.teamapps.icons.Icon;
+import org.teamapps.ux.component.Component;
 
 public class Label extends AbstractField<String> {
 
@@ -31,7 +32,7 @@ public class Label extends AbstractField<String> {
 
 	private String caption;
 	private Icon icon;
-	private AbstractField<?> targetField;
+	private Component targetComponent;
 
 	public Label(String caption) {
 		super();
@@ -45,10 +46,10 @@ public Label(String caption, Icon icon) {
 
 	@Override
 	public UiField createUiComponent() {
-		UiLabel uiLabel = new UiLabel(getId(), caption);
+		UiLabel uiLabel = new UiLabel(caption);
 		mapAbstractFieldAttributesToUiField(uiLabel);
 		uiLabel.setIcon(getSessionContext().resolveIcon(icon));
-		uiLabel.setTargetField(targetField != null ? targetField.createUiComponentReference() : null);
+		uiLabel.setTargetComponent(targetComponent != null ? targetComponent.createUiReference() : null);
 		return uiLabel;
 	}
 
@@ -62,11 +63,6 @@ public void handleUiEvent(UiEvent event) {
 		}
 	}
 
-	@Override
-	protected void doDestroy() {
-		// nothing to do
-	}
-
 	public String getCaption() {
 		return caption;
 	}
@@ -85,16 +81,16 @@ public void setIcon(Icon icon) {
 		queueCommandIfRendered(() -> new UiLabel.SetIconCommand(getId(), getSessionContext().resolveIcon(icon)));
 	}
 
-	public AbstractField<?> getTargetField() {
-		return targetField;
+	public Component getTargetComponent() {
+		return targetComponent;
 	}
 
-	public Label setTargetField(AbstractField<?> targetField) {
-		if (targetField == this) {
+	public Label setTargetComponent(Component targetComponent) {
+		if (targetComponent == this) {
 			throw new IllegalArgumentException("Labels may not reference themselves!");
 		}
-		this.targetField = targetField;
-		queueCommandIfRendered(() -> new UiLabel.SetTargetFieldCommand(getId(), targetField.createUiComponentReference()));
+		this.targetComponent = targetComponent;
+		queueCommandIfRendered(() -> new UiLabel.SetTargetComponentCommand(getId(), Component.createUiClientObjectReference(targetComponent)));
 		return this;
 	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/MultiLineTextField.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/MultiLineTextField.java
index 5bab1e408..ed1f21fc7 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/MultiLineTextField.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/MultiLineTextField.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -24,10 +24,7 @@
 
 public class MultiLineTextField extends TextField {
 
-	@Deprecated
-	private int minHeight = 100;
-	@Deprecated
-	private int maxHeight;
+	private boolean adjustHeightToContent = false;
 
 	public MultiLineTextField() {
 		super();
@@ -35,13 +32,12 @@ public MultiLineTextField() {
 
 	@Override
 	public UiField createUiComponent() {
-		UiMultiLineTextField uiField = new UiMultiLineTextField(getId());
+		UiMultiLineTextField uiField = new UiMultiLineTextField();
 		mapAbstractFieldAttributesToUiField(uiField);
 		uiField.setMaxCharacters(getMaxCharacters());
 		uiField.setShowClearButton(isShowClearButton());
-		uiField.setEmptyText(getEmptyText());
-		uiField.setMinHeight(minHeight);
-		uiField.setMaxHeight(maxHeight);
+		uiField.setPlaceholderText(getEmptyText());
+		uiField.setAdjustHeightToContent(adjustHeightToContent);
 		return uiField;
 	}
 
@@ -54,34 +50,11 @@ public void append(String s, boolean scrollToBottom) {
 		}
 	}
 
-	@Deprecated
-	public int getMinHeight() {
-		return minHeight;
+	public boolean isAdjustHeightToContent() {
+		return adjustHeightToContent;
 	}
 
-	@Deprecated
-	public void setMinHeight(int minHeight) {
-		this.minHeight = minHeight;
-		queueCommandIfRendered(() -> new UiMultiLineTextField.SetMinHeightCommand(getId(), minHeight));
+	public void setAdjustHeightToContent(boolean adjustHeightToContent) {
+		this.adjustHeightToContent = adjustHeightToContent;
 	}
-
-	@Deprecated
-	public int getMaxHeight() {
-		return maxHeight;
-	}
-
-	@Deprecated
-	public void setMaxHeight(int maxHeight) {
-		this.maxHeight = maxHeight;
-		queueCommandIfRendered(() -> new UiMultiLineTextField.SetMaxHeightCommand(getId(), maxHeight));
-	}
-
-	@Deprecated
-	public void setFixedHeight(int height) {
-		this.minHeight = height;
-		this.maxHeight = height;
-		queueCommandIfRendered(() -> new UiMultiLineTextField.SetMinHeightCommand(getId(), height));
-		queueCommandIfRendered(() -> new UiMultiLineTextField.SetMaxHeightCommand(getId(), height));
-	}
-
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/MultiWriteLockableValue.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/MultiWriteLockableValue.java
index ab5c8bebd..828c14169 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/MultiWriteLockableValue.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/MultiWriteLockableValue.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/NumberField.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/NumberField.java
index f552fa181..69b85f6cf 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/NumberField.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/NumberField.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,10 +19,14 @@
  */
 package org.teamapps.ux.component.field;
 
+import com.ibm.icu.util.ULocale;
 import org.teamapps.dto.UiEvent;
 import org.teamapps.dto.UiField;
 import org.teamapps.dto.UiNumberField;
 import org.teamapps.event.Event;
+import org.teamapps.ux.session.SessionContext;
+
+import java.util.Locale;
 
 public class NumberField extends AbstractField<Number> implements TextInputHandlingField {
 
@@ -39,6 +43,8 @@ public class NumberField extends AbstractField<Number> implements TextInputHandl
 	private double sliderStep = 1;
 	private boolean commitOnSliderChange = true;
 
+	private ULocale locale = SessionContext.current().getULocale();
+
 	public NumberField(int precision) {
 		super();
 		this.precision = precision;
@@ -46,16 +52,17 @@ public NumberField(int precision) {
 
 	@Override
 	public UiField createUiComponent() {
-		UiNumberField field = new UiNumberField(getId());
+		UiNumberField field = new UiNumberField();
 		mapAbstractFieldAttributesToUiField(field);
 		field.setPrecision(precision);
-		field.setEmptyText(emptyText);
+		field.setPlaceholderText(emptyText);
 		field.setShowClearButton(showClearButton);
 		field.setMinValue(minValue);
 		field.setMaxValue(maxValue);
 		field.setSliderMode(sliderMode.toUiNumberFieldSliderMode());
 		field.setSliderStep(sliderStep);
 		field.setCommitOnSliderChange(commitOnSliderChange);
+		field.setLocale(locale.toLanguageTag());
 		return field;
 	}
 
@@ -65,11 +72,6 @@ public void handleUiEvent(UiEvent event) {
 		defaultHandleTextInputEvent(event);
 	}
 
-	@Override
-	protected void doDestroy() {
-		// nothing to do
-	}
-
 	public int getPrecision() {
 		return precision;
 	}
@@ -86,7 +88,7 @@ public String getEmptyText() {
 
 	public NumberField setEmptyText(String emptyText) {
 		this.emptyText = emptyText;
-		queueCommandIfRendered(() -> new UiNumberField.SetEmptyTextCommand(getId(), emptyText));
+		queueCommandIfRendered(() -> new UiNumberField.SetPlaceholderTextCommand(getId(), emptyText));
 		return this;
 	}
 
@@ -150,6 +152,23 @@ public NumberField setCommitOnSliderChange(boolean commitOnSliderChange) {
 		return this;
 	}
 
+	public Locale getLocale() {
+		return locale.toLocale();
+	}
+
+	public ULocale getULocale() {
+		return locale;
+	}
+
+	public void setLocale(Locale locale) {
+		setULocale(ULocale.forLocale(locale));
+	}
+
+	public void setULocale(ULocale locale) {
+		this.locale = locale;
+		queueCommandIfRendered(() -> new UiNumberField.SetLocaleCommand(getId(), locale.toLanguageTag()));
+	}
+
 	@Override
 	public Event<String> onTextInput() {
 		return onTextInput;
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/NumberFieldSliderMode.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/NumberFieldSliderMode.java
index 69b2609f2..fc2bbfb08 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/NumberFieldSliderMode.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/NumberFieldSliderMode.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -22,7 +22,7 @@
 import org.teamapps.dto.UiNumberFieldSliderMode;
 
 public enum NumberFieldSliderMode {
-	DISABLED, VISIBLE, VISIBLE_IF_FOCUSED;
+	DISABLED, VISIBLE, VISIBLE_IF_FOCUSED, SLIDER_ONLY;
 
 	public UiNumberFieldSliderMode toUiNumberFieldSliderMode() {
 		return UiNumberFieldSliderMode.valueOf(this.name());
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/PasswordField.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/PasswordField.java
index 685c550b7..ad9bd0ee2 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/PasswordField.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/PasswordField.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -26,6 +26,7 @@ public class PasswordField extends TextField {
 
 	private boolean sendValueAsMd5;
 	private String salt; // if sendValueAsMd5 == true and salt != null, then submit md5(salt + md5(fieldValue))
+	private boolean passwordVisibilityToggleEnabled;
 
 	public PasswordField() {
 		super();
@@ -33,13 +34,15 @@ public PasswordField() {
 
 	@Override
 	public UiField createUiComponent() {
-		UiPasswordField uiField = new UiPasswordField(getId());
+		UiPasswordField uiField = new UiPasswordField();
 		mapAbstractFieldAttributesToUiField(uiField);
 		uiField.setMaxCharacters(getMaxCharacters());
 		uiField.setShowClearButton(isShowClearButton());
-		uiField.setEmptyText(getEmptyText());
+		uiField.setPlaceholderText(getEmptyText());
+		uiField.setAutofill(isAutofill());
 		uiField.setSendValueAsMd5(sendValueAsMd5);
 		uiField.setSalt(salt);
+		uiField.setPasswordVisibilityToggleEnabled(passwordVisibilityToggleEnabled);
 		return uiField;
 	}
 
@@ -60,4 +63,13 @@ public void setSalt(String salt) {
 		this.salt = salt;
 		queueCommandIfRendered(() -> new UiPasswordField.SetSaltCommand(getId(), salt));
 	}
+
+	public boolean isPasswordVisibilityToggleEnabled() {
+		return passwordVisibilityToggleEnabled;
+	}
+
+	public void setPasswordVisibilityToggleEnabled(boolean enabled) {
+		this.passwordVisibilityToggleEnabled = enabled;
+		queueCommandIfRendered(() -> new UiPasswordField.SetPasswordVisibilityToggleEnabledCommand(getId(), enabled));
+	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/Slider.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/Slider.java
deleted file mode 100644
index 04e3c79e9..000000000
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/Slider.java
+++ /dev/null
@@ -1,134 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.ux.component.field;
-
-import org.teamapps.dto.UiField;
-import org.teamapps.dto.UiSlider;
-import org.teamapps.common.format.Color;
-
-import static org.teamapps.util.UiUtil.createUiColor;
-
-public class Slider extends AbstractField<Number> {
-
-	private double min = 0;
-	private double max = 100;
-	private double step = 1;
-	private int displayedDecimals = 0;
-	private Color selectionColor = new Color(51, 122, 183);
-	private String tooltipPrefix;
-	private String tooltipPostfix;
-	private boolean humanReadableFileSize;
-
-	public Slider() {
-		super();
-	}
-
-	@Override
-	public UiField createUiComponent() {
-		UiSlider uiSlider = new UiSlider(getId());
-		mapAbstractFieldAttributesToUiField(uiSlider);
-		uiSlider.setMin(min);
-		uiSlider.setMax(max);
-		uiSlider.setStep(step);
-		uiSlider.setDisplayedDecimals(displayedDecimals);
-		uiSlider.setSelectionColor(selectionColor != null ? createUiColor(selectionColor) : null);
-		uiSlider.setTooltipPrefix(tooltipPrefix);
-		uiSlider.setTooltipPostfix(tooltipPostfix);
-		uiSlider.setHumanReadableFileSize(humanReadableFileSize);
-		return uiSlider;
-	}
-
-	@Override
-	protected void doDestroy() {
-		// nothing to do
-	}
-
-	public double getMin() {
-		return min;
-	}
-
-	public void setMin(double min) {
-		this.min = min;
-		queueCommandIfRendered(() -> new UiSlider.SetMinCommand(getId(), min));
-	}
-
-	public double getMax() {
-		return max;
-	}
-
-	public void setMax(double max) {
-		this.max = max;
-		queueCommandIfRendered(() -> new UiSlider.SetMaxCommand(getId(), max));
-	}
-
-	public double getStep() {
-		return step;
-	}
-
-	public void setStep(double step) {
-		this.step = step;
-		queueCommandIfRendered(() -> new UiSlider.SetStepCommand(getId(), step));
-	}
-
-	public int getDisplayedDecimals() {
-		return displayedDecimals;
-	}
-
-	public void setDisplayedDecimals(int displayedDecimals) {
-		this.displayedDecimals = displayedDecimals;
-		queueCommandIfRendered(() -> new UiSlider.SetDisplayedDecimalsCommand(getId(), displayedDecimals));
-	}
-
-	public Color getSelectionColor() {
-		return selectionColor;
-	}
-
-	public void setSelectionColor(Color selectionColor) {
-		this.selectionColor = selectionColor;
-		queueCommandIfRendered(() -> new UiSlider.SetSelectionColorCommand(getId(), selectionColor != null ? createUiColor(selectionColor) : null));
-	}
-
-	public String getTooltipPrefix() {
-		return tooltipPrefix;
-	}
-
-	public void setTooltipPrefix(String tooltipPrefix) {
-		this.tooltipPrefix = tooltipPrefix;
-		queueCommandIfRendered(() -> new UiSlider.SetTooltipPrefixCommand(getId(), tooltipPrefix));
-	}
-
-	public String getTooltipPostfix() {
-		return tooltipPostfix;
-	}
-
-	public void setTooltipPostfix(String tooltipPostfix) {
-		this.tooltipPostfix = tooltipPostfix;
-		queueCommandIfRendered(() -> new UiSlider.SetTooltipPostfixCommand(getId(), tooltipPostfix));
-	}
-
-	public boolean isHumanReadableFileSize() {
-		return humanReadableFileSize;
-	}
-
-	public void setHumanReadableFileSize(boolean humanReadableFileSize) {
-		this.humanReadableFileSize = humanReadableFileSize;
-		queueCommandIfRendered(() -> new UiSlider.SetHumanReadableFileSizeCommand(getId(), humanReadableFileSize));
-	}
-}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/SpecialKey.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/SpecialKey.java
index 080f2233b..5d3293d83 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/SpecialKey.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/SpecialKey.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/TemplateField.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/TemplateField.java
new file mode 100644
index 000000000..f5652c78d
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/TemplateField.java
@@ -0,0 +1,105 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.field;
+
+import org.teamapps.data.extract.BeanPropertyExtractor;
+import org.teamapps.data.extract.PropertyExtractor;
+import org.teamapps.data.extract.PropertyProvider;
+import org.teamapps.dto.UiClientRecord;
+import org.teamapps.dto.UiEvent;
+import org.teamapps.dto.UiTemplateField;
+import org.teamapps.event.Event;
+import org.teamapps.ux.component.template.Template;
+
+public class TemplateField<RECORD> extends AbstractField<RECORD> {
+
+	public final Event<Void> onClicked = new Event<>();
+
+	private Template template;
+	private PropertyProvider<RECORD> propertyProvider = new BeanPropertyExtractor<>();
+
+	public TemplateField(Template template) {
+		this.template = template;
+	}
+
+	public TemplateField(Template template, RECORD value) {
+		this.template = template;
+		this.setValue(value);
+	}
+
+	@Override
+	public void handleUiEvent(UiEvent event) {
+		super.handleUiEvent(event);
+		switch (event.getUiEventType()) {
+			case UI_TEMPLATE_FIELD_CLICKED:
+				onClicked.fire();
+		}
+	}
+
+	@Override
+	public UiTemplateField createUiComponent() {
+		UiTemplateField ui = new UiTemplateField();
+		mapAbstractFieldAttributesToUiField(ui);
+		ui.setTemplate(template.createUiTemplate());
+		ui.setValue(convertUxValueToUiValue(getValue()));
+		return ui;
+	}
+
+	public RECORD convertUiValueToUxValue(Object value) {
+		return getValue();
+	}
+
+	public Object convertUxValueToUiValue(RECORD record) {
+		return createUiRecord(record);
+	}
+
+	private UiClientRecord createUiRecord(RECORD record) {
+		if (record == null) {
+			return null;
+		}
+		UiClientRecord uiClientRecord = new UiClientRecord();
+		uiClientRecord.setValues(propertyProvider.getValues(record, template.getPropertyNames()));
+		return uiClientRecord;
+	}
+
+	public Template getTemplate() {
+		return template;
+	}
+
+	public TemplateField<RECORD> setTemplate(Template template) {
+		this.template = template;
+		queueCommandIfRendered(() -> new UiTemplateField.UpdateCommand(getId(), createUiComponent()));
+		return this;
+	}
+
+	public PropertyProvider<RECORD> getPropertyProvider() {
+		return propertyProvider;
+	}
+
+	public TemplateField<RECORD> setPropertyProvider(PropertyProvider<RECORD> propertyProvider) {
+		this.propertyProvider = propertyProvider;
+		queueCommandIfRendered(() -> new UiTemplateField.UpdateCommand(getId(), createUiComponent()));
+		return this;
+	}
+
+	public TemplateField<RECORD> setPropertyExtractor(PropertyExtractor<RECORD> propertyExtractor) {
+		return this.setPropertyProvider(propertyExtractor);
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/TextField.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/TextField.java
index 54889d495..718c4ed9f 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/TextField.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/TextField.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,6 +19,7 @@
  */
 package org.teamapps.ux.component.field;
 
+import org.apache.commons.lang3.StringUtils;
 import org.teamapps.dto.UiEvent;
 import org.teamapps.dto.UiField;
 import org.teamapps.dto.UiTextField;
@@ -32,6 +33,7 @@ public class TextField extends AbstractField<String> implements TextInputHandlin
 	private int maxCharacters;
 	private boolean showClearButton;
 	private String emptyText;
+	private boolean autofill = false;
 
 	public TextField() {
 		super();
@@ -63,17 +65,26 @@ public String getEmptyText() {
 
 	public TextField setEmptyText(String emptyText) {
 		this.emptyText = emptyText;
-		queueCommandIfRendered(() -> new UiTextField.SetEmptyTextCommand(getId(), emptyText));
+		queueCommandIfRendered(() -> new UiTextField.SetPlaceholderTextCommand(getId(), emptyText));
 		return this;
 	}
 
+	public boolean isAutofill() {
+		return autofill;
+	}
+
+	public void setAutofill(boolean autofill) {
+		this.autofill = autofill;
+	}
+
 	@Override
 	public UiField createUiComponent() {
-		UiTextField uiField = new UiTextField(getId());
+		UiTextField uiField = new UiTextField();
 		mapAbstractFieldAttributesToUiField(uiField);
 		uiField.setMaxCharacters(maxCharacters);
 		uiField.setShowClearButton(showClearButton);
-		uiField.setEmptyText(emptyText);
+		uiField.setPlaceholderText(emptyText);
+		uiField.setAutofill(autofill);
 		return uiField;
 	}
 
@@ -84,8 +95,8 @@ public void handleUiEvent(UiEvent event) {
 	}
 
 	@Override
-	protected void doDestroy() {
-		// nothing to do
+	public boolean isEmptyValue(String value) {
+		return StringUtils.isBlank(value);
 	}
 
 	@Override
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/TextInputHandlingField.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/TextInputHandlingField.java
index 40f39a260..c450fa68a 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/TextInputHandlingField.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/TextInputHandlingField.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/combobox/AbstractComboBox.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/combobox/AbstractComboBox.java
index 65b0e6a94..7cebb0100 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/combobox/AbstractComboBox.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/combobox/AbstractComboBox.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -23,32 +23,23 @@
 import org.slf4j.LoggerFactory;
 import org.teamapps.data.extract.BeanPropertyExtractor;
 import org.teamapps.data.extract.PropertyExtractor;
-import org.teamapps.dto.UiComboBox;
-import org.teamapps.dto.UiComboBoxTreeRecord;
-import org.teamapps.dto.UiEvent;
-import org.teamapps.dto.UiTextInputHandlingField;
+import org.teamapps.data.extract.PropertyProvider;
+import org.teamapps.dto.*;
 import org.teamapps.event.Event;
-import org.teamapps.ux.cache.CacheManipulationHandle;
-import org.teamapps.ux.cache.ClientRecordCache;
+import org.teamapps.ux.cache.record.legacy.CacheManipulationHandle;
+import org.teamapps.ux.cache.record.legacy.ClientRecordCache;
 import org.teamapps.ux.component.field.AbstractField;
 import org.teamapps.ux.component.field.SpecialKey;
 import org.teamapps.ux.component.field.TextInputHandlingField;
-import org.teamapps.ux.component.field.TextMatchingMode;
-import org.teamapps.ux.component.node.TreeNode;
 import org.teamapps.ux.component.template.Template;
-import org.teamapps.ux.model.BaseTreeModel;
-
-import java.util.ArrayList;
-import java.util.Arrays;
-import java.util.Collections;
-import java.util.HashMap;
-import java.util.HashSet;
-import java.util.List;
-import java.util.Map;
+import org.teamapps.ux.component.tree.TreeNodeInfo;
+import org.teamapps.ux.model.ComboBoxModel;
+
+import java.util.*;
 import java.util.function.Function;
 import java.util.stream.Collectors;
 
-public abstract class AbstractComboBox<COMPONENT extends AbstractComboBox, RECORD, VALUE> extends AbstractField<VALUE> implements TextInputHandlingField {
+public abstract class AbstractComboBox<RECORD, VALUE> extends AbstractField<VALUE> implements TextInputHandlingField {
 
 	private static final Logger LOGGER = LoggerFactory.getLogger(AbstractComboBox.class);
 
@@ -57,19 +48,17 @@ public abstract class AbstractComboBox<COMPONENT extends AbstractComboBox, RECOR
 
 	protected final ClientRecordCache<RECORD, UiComboBoxTreeRecord> recordCache;
 
-	private BaseTreeModel<RECORD> model;
-	private List<RECORD> staticData = new ArrayList<>(); //if available, use this as data source
-	private TextMatchingMode textMatchingMode = TextMatchingMode.CONTAINS; // only filter on client-side if staticData != null. SIMILARITY_MATCH allows levenshtein distance of 3
-	private PropertyExtractor<RECORD> propertyExtractor = new BeanPropertyExtractor<>();
+	private ComboBoxModel<RECORD> model;
+	private PropertyProvider<RECORD> propertyProvider = new BeanPropertyExtractor<>();
 
 	private final Map<Template, String> templateIdsByTemplate = new HashMap<>();
 	private int templateIdCounter = 0;
-	private Template selectedEntryTemplate = null; // null: use toString();
-	private Template dropDownTemplate = null; // null: use toString();
+	private Template selectedEntryTemplate = null; // null: use recordToStringFunction;
+	private Template dropDownTemplate = null; // null: use recordToStringFunction;
 	private TemplateDecider<RECORD> selectedEntryTemplateDecider = record -> selectedEntryTemplate;
 	private TemplateDecider<RECORD> dropdownTemplateDecider = record -> dropDownTemplate;
 
-	private boolean showDropDownButton = true;
+	private boolean dropDownButtonVisible = true;
 	private boolean showDropDownAfterResultsArrive = false;
 	private boolean highlightFirstResultEntry = true;
 	private boolean autoComplete = true; // if true, by typing any letter, the first matching will be selected (keeping all not yet entered letters int the text box selected)
@@ -79,50 +68,52 @@ public abstract class AbstractComboBox<COMPONENT extends AbstractComboBox, RECOR
 	private boolean showClearButton;
 	private boolean animate = true;
 	private boolean showExpanders = false;
+	private String emptyText;
+	private Integer dropDownMinWidth;
+	private Integer dropDownMaxHeight;
+
+	/**
+	 * If true, already selected entries will be filtered out from model query results.
+	 *
+	 * @apiNote While this is handy when dealing with list-style models (no hierarchy), it might cause unintended behavior with tree-style
+	 * models. This option will not pay any attention to hierarchical structures.
+	 * If the parent <code>P</code> of a child node <code>C</code> is filtered out due to this option,
+	 * then <code>C</code> will appear as a root node on the client side.
+	 */
+	private boolean distinctModelResultFiltering = false;
 
 	private Function<RECORD, String> recordToStringFunction = Object::toString;
 	protected Function<String, RECORD> freeTextRecordFactory = null;
 
-	private AbstractComboBox(List<RECORD> staticData, BaseTreeModel<RECORD> model) {
-		super();
+	protected AbstractComboBox(ComboBoxModel<RECORD> model) {
 		this.model = model;
-		if (staticData != null) {
-			this.staticData = new ArrayList<>(staticData);
-		}
 		this.recordCache = new ClientRecordCache<>(this::createUiTreeRecordWithoutParentRelation, this::addParentLinkToUiRecord);
 	}
 
-	protected AbstractComboBox(BaseTreeModel<RECORD> model) {
-		this(null, model);
-	}
-
-	public AbstractComboBox(List<RECORD> staticData) {
-		this(staticData, null);
+	protected AbstractComboBox() {
+		this(query -> Collections.emptyList());
 	}
 
-	protected void mapCommonUiComboBoxProperties(UiComboBox comboBox) {
-		mapAbstractFieldAttributesToUiField(comboBox);
-		if (this.staticData != null) {
-			CacheManipulationHandle<List<UiComboBoxTreeRecord>> cacheResponse = recordCache.replaceRecords(this.staticData);
-			cacheResponse.commit();
-			comboBox.setStaticData(cacheResponse.getResult());
-		}
+	protected void mapCommonUiComboBoxProperties(AbstractUiComboBox ui) {
+		mapAbstractFieldAttributesToUiField(ui);
 
 		// Note: it is important that the uiTemplates get set after the uiRecords are created, because custom templates (templateDecider) may lead to additional template registrations.
-		comboBox.setTemplates(templateIdsByTemplate.entrySet().stream()
+		ui.setTemplates(templateIdsByTemplate.entrySet().stream()
 				.collect(Collectors.toMap(Map.Entry::getValue, entry -> entry.getKey().createUiTemplate())));
-		
-		comboBox.setTextMatchingMode(textMatchingMode.toUiTextMatchingMode());
-		comboBox.setShowDropDownButton(showDropDownButton);
-		comboBox.setShowDropDownAfterResultsArrive(showDropDownAfterResultsArrive);
-		comboBox.setHighlightFirstResultEntry(highlightFirstResultEntry);
-		comboBox.setShowHighlighting(showHighlighting);
-		comboBox.setAutoComplete(autoComplete);
-		comboBox.setTextHighlightingEntryLimit(textHighlightingEntryLimit);
-		comboBox.setAllowAnyText(allowFreeText);
-		comboBox.setShowClearButton(showClearButton);
-		comboBox.setAnimate(animate);
-		comboBox.setShowExpanders(showExpanders);
+
+		ui.setShowDropDownButton(dropDownButtonVisible);
+		ui.setShowDropDownAfterResultsArrive(showDropDownAfterResultsArrive);
+		ui.setHighlightFirstResultEntry(highlightFirstResultEntry);
+		ui.setShowHighlighting(showHighlighting);
+		ui.setAutoComplete(autoComplete);
+		ui.setTextHighlightingEntryLimit(textHighlightingEntryLimit);
+		ui.setAllowAnyText(allowFreeText);
+		ui.setShowClearButton(showClearButton);
+		ui.setAnimate(animate);
+		ui.setShowExpanders(showExpanders);
+		ui.setPlaceholderText(emptyText);
+		ui.setDropDownMinWidth(dropDownMinWidth);
+		ui.setDropDownMaxHeight(dropDownMaxHeight);
 	}
 
 	@Override
@@ -131,40 +122,66 @@ public void handleUiEvent(UiEvent event) {
 		switch (event.getUiEventType()) {
 			case UI_TEXT_INPUT_HANDLING_FIELD_TEXT_INPUT:
 				UiTextInputHandlingField.TextInputEvent keyStrokeEvent = (UiTextInputHandlingField.TextInputEvent) event;
-				if (model != null) {
-					List<RECORD> records = model.getRecords(keyStrokeEvent.getEnteredString());
-					CacheManipulationHandle<List<UiComboBoxTreeRecord>> cacheResponse = recordCache.replaceRecords(records);
-					if (isRendered()) {
-						getSessionContext().queueCommand(new UiComboBox.SetDropDownDataCommand(getId(), cacheResponse.getResult()), aVoid -> cacheResponse.commit());
-					} else {
-						cacheResponse.commit();
-					}
-				}
-				this.onTextInput.fire(keyStrokeEvent.getEnteredString());
+				String string = keyStrokeEvent.getEnteredString() != null ? keyStrokeEvent.getEnteredString() : ""; // prevent NPEs in combobox model implementations
+				this.onTextInput.fire(string);
 				break;
 			case UI_TEXT_INPUT_HANDLING_FIELD_SPECIAL_KEY_PRESSED:
 				UiTextInputHandlingField.SpecialKeyPressedEvent specialKeyPressedEvent = (UiTextInputHandlingField.SpecialKeyPressedEvent) event;
 				this.onSpecialKeyPressed.fire(SpecialKey.valueOf(specialKeyPressedEvent.getKey().name()));
 				break;
-			case UI_COMBO_BOX_LAZY_CHILD_DATA_REQUESTED:
-				UiComboBox.LazyChildDataRequestedEvent lazyChildDataRequestedEvent = (UiComboBox.LazyChildDataRequestedEvent) event;
-				RECORD parentRecord = recordCache.getRecordByClientId(lazyChildDataRequestedEvent.getParentId());
+		}
+	}
+
+	@Override
+	public Object handleUiQuery(UiQuery query) {
+		switch (query.getUiQueryType()) {
+			case ABSTRACT_UI_COMBO_BOX_RETRIEVE_DROPDOWN_ENTRIES: {
+				final UiComboBox.RetrieveDropdownEntriesQuery q = (UiComboBox.RetrieveDropdownEntriesQuery) query;
+				String string = q.getQueryString() != null ? q.getQueryString() : ""; // prevent NPEs in combobox model implementations
+				if (model != null) {
+					List<RECORD> resultRecords = model.getRecords(string);
+					if (distinctModelResultFiltering) {
+						resultRecords = filterOutSelected(resultRecords);
+					}
+					CacheManipulationHandle<List<UiComboBoxTreeRecord>> cacheResponse = recordCache.replaceRecords(resultRecords);
+					cacheResponse.commit();
+					return cacheResponse.getAndClearResult();
+				} else {
+					return List.of();
+				}
+			}
+			case ABSTRACT_UI_COMBO_BOX_LAZY_CHILDREN: {
+				UiComboBox.LazyChildrenQuery lazyChildrenQuery = (UiComboBox.LazyChildrenQuery) query;
+				RECORD parentRecord = recordCache.getRecordByClientId(lazyChildrenQuery.getParentId());
 				if (parentRecord != null) {
 					if (model != null) {
 						List<RECORD> childRecords = model.getChildRecords(parentRecord);
-						CacheManipulationHandle<List<UiComboBoxTreeRecord>> cacheResponse = recordCache.addRecords(childRecords);
-						if (isRendered()) {
-							getSessionContext().queueCommand(new UiComboBox.SetChildNodesCommand(getId(), lazyChildDataRequestedEvent.getParentId(), cacheResponse.getResult()),
-									aVoid -> cacheResponse.commit());
-						} else {
-							cacheResponse.commit();
+						if (distinctModelResultFiltering) {
+							childRecords = filterOutSelected(childRecords);
 						}
+						CacheManipulationHandle<List<UiComboBoxTreeRecord>> cacheResponse = recordCache.addRecords(childRecords);
+						cacheResponse.commit();
+						return cacheResponse.getAndClearResult();
 					}
+				} else {
+					return Collections.emptyList();
 				}
-				break;
+			}
+			default:
+				return super.handleUiQuery(query);
 		}
 	}
 
+	private List<RECORD> filterOutSelected(List<RECORD> resultRecords) {
+		Set<RECORD> selectedRecords = getSelectedRecords();
+		resultRecords = resultRecords.stream()
+				.filter(r -> !selectedRecords.contains(r))
+				.collect(Collectors.toList());
+		return resultRecords;
+	}
+
+	protected abstract Set<RECORD> getSelectedRecords();
+
 	protected UiComboBoxTreeRecord createUiTreeRecordWithoutParentRelation(RECORD record) {
 		if (record == null) {
 			return null;
@@ -174,10 +191,10 @@ protected UiComboBoxTreeRecord createUiTreeRecordWithoutParentRelation(RECORD re
 		Template displayTemplate = getTemplateForRecord(record, selectedEntryTemplateDecider, selectedEntryTemplate);
 		Template dropdownTemplate = getTemplateForRecord(record, dropdownTemplateDecider, dropDownTemplate);
 
-		HashSet<String> templateDataKeys = new HashSet<>();
-		templateDataKeys.addAll(displayTemplate != null ? displayTemplate.getDataKeys() : Collections.emptySet());
-		templateDataKeys.addAll(dropdownTemplate != null ? dropdownTemplate.getDataKeys() : Collections.emptySet());
-		Map<String, Object> values = propertyExtractor.getValues(record, templateDataKeys);
+		HashSet<String> templatePropertyNames = new HashSet<>();
+		templatePropertyNames.addAll(displayTemplate != null ? displayTemplate.getPropertyNames() : Collections.emptySet());
+		templatePropertyNames.addAll(dropdownTemplate != null ? dropdownTemplate.getPropertyNames() : Collections.emptySet());
+		Map<String, Object> values = propertyProvider.getValues(record, templatePropertyNames);
 		UiComboBoxTreeRecord uiTreeRecord = new UiComboBoxTreeRecord();
 		uiTreeRecord.setValues(values);
 
@@ -185,17 +202,20 @@ protected UiComboBoxTreeRecord createUiTreeRecordWithoutParentRelation(RECORD re
 		uiTreeRecord.setDropDownTemplateId(templateIdsByTemplate.get(dropdownTemplate));
 		uiTreeRecord.setAsString(this.recordToStringFunction.apply(record));
 
-		if (record instanceof org.teamapps.ux.component.node.TreeNode) {
-			uiTreeRecord.setExpanded(((TreeNode) record).isExpanded());
-			uiTreeRecord.setLazyChildren(((TreeNode) record).isLazyChildren());
+		TreeNodeInfo treeNodeInfo = model.getTreeNodeInfo(record);
+		if (treeNodeInfo != null) {
+			uiTreeRecord.setExpanded(treeNodeInfo.isExpanded());
+			uiTreeRecord.setLazyChildren(treeNodeInfo.isLazyChildren());
+			uiTreeRecord.setSelectable(treeNodeInfo.isSelectable());
 		}
 
 		return uiTreeRecord;
 	}
 
 	protected void addParentLinkToUiRecord(RECORD record, UiComboBoxTreeRecord uiTreeRecord, Map<RECORD, UiComboBoxTreeRecord> othersCurrentlyBeingAddedToCache) {
-		if (record instanceof TreeNode) {
-			RECORD parent = (RECORD) ((TreeNode) record).getParent();
+		TreeNodeInfo treeNodeInfo = model.getTreeNodeInfo(record);
+		if (treeNodeInfo != null) {
+			RECORD parent = (RECORD) treeNodeInfo.getParent();
 			if (parent != null) {
 				UiComboBoxTreeRecord uiParentFromOthers = othersCurrentlyBeingAddedToCache.get(parent);
 				if (uiParentFromOthers != null) {
@@ -225,65 +245,21 @@ protected boolean isFreeTextEntry(UiComboBoxTreeRecord uiTreeRecord) {
 		return uiTreeRecord.getId() < 0;
 	}
 
-	@Override
-	protected void doDestroy() {
-		// nothing to do
-	}
-
 	public boolean isAnimate() {
 		return animate;
 	}
 
-	public List<RECORD> getStaticData() {
-		return staticData;
-	}
-
-	public void setStaticData(List<RECORD> staticData) {
-		this.staticData = staticData;
-		this.model = null;
-		reRenderIfRendered();
-	}
-
-	public void addDropDownItem(RECORD record) {
-		if (staticData == null) {
-			staticData = new ArrayList<>();
-		}
-		this.staticData.add(record);
-		reRenderIfRendered();
-	}
-
-	public void addDropDownItems(RECORD... records) {
-		if (staticData == null) {
-			staticData = new ArrayList<>();
-		}
-		this.staticData.addAll(Arrays.asList(records));
-		reRenderIfRendered();
-	}
-
-	public void addDropDownItems(List<RECORD> records) {
-		if (staticData == null) {
-			staticData = new ArrayList<>();
-		}
-		this.staticData.addAll(records);
-		reRenderIfRendered();
-	}
-
-	public BaseTreeModel getModel() {
+	public ComboBoxModel<RECORD> getModel() {
 		return model;
 	}
 
-	public void setModel(BaseTreeModel<RECORD> model) {
+	public void setModel(ComboBoxModel<RECORD> model) {
 		this.model = model;
-		this.staticData = null;
 		reRenderIfRendered();
 	}
 
-	public TextMatchingMode getTextMatchingMode() {
-		return textMatchingMode;
-	}
-
-	public boolean isShowDropDownButton() {
-		return showDropDownButton;
+	public boolean isDropDownButtonVisible() {
+		return dropDownButtonVisible;
 	}
 
 	public boolean isShowDropDownAfterResultsArrive() {
@@ -314,44 +290,68 @@ public boolean isShowClearButton() {
 		return showClearButton;
 	}
 
-	public void setShowDropDownButton(boolean showDropDownButton) {
-		this.showDropDownButton = showDropDownButton;
-		reRenderIfRendered();
+	public void setDropDownButtonVisible(boolean dropDownButtonVisible) {
+		boolean changed = dropDownButtonVisible != this.dropDownButtonVisible;
+		this.dropDownButtonVisible = dropDownButtonVisible;
+		if (changed) {
+			reRenderIfRendered();
+		}
 	}
 
 	public void setShowDropDownAfterResultsArrive(boolean showDropDownAfterResultsArrive) {
+		boolean changed = showDropDownAfterResultsArrive != this.showDropDownAfterResultsArrive;
 		this.showDropDownAfterResultsArrive = showDropDownAfterResultsArrive;
-		reRenderIfRendered();
+		if (changed) {
+			reRenderIfRendered();
+		}
 	}
 
 	public void setHighlightFirstResultEntry(boolean highlightFirstResultEntry) {
+		boolean changed = highlightFirstResultEntry != this.highlightFirstResultEntry;
 		this.highlightFirstResultEntry = highlightFirstResultEntry;
-		reRenderIfRendered();
+		if (changed) {
+			reRenderIfRendered();
+		}
 	}
 
 	public void setAutoComplete(boolean autoComplete) {
+		boolean changed = autoComplete != this.autoComplete;
 		this.autoComplete = autoComplete;
-		reRenderIfRendered();
+		if (changed) {
+			reRenderIfRendered();
+		}
 	}
 
 	public void setShowHighlighting(boolean showHighlighting) {
+		boolean changed = showHighlighting != this.showHighlighting;
 		this.showHighlighting = showHighlighting;
-		reRenderIfRendered();
+		if (changed) {
+			reRenderIfRendered();
+		}
 	}
 
 	public void setAllowFreeText(boolean allowFreeText) {
+		boolean changed = allowFreeText != this.allowFreeText;
 		this.allowFreeText = allowFreeText;
-		reRenderIfRendered();
+		if (changed) {
+			reRenderIfRendered();
+		}
 	}
 
 	public void setShowClearButton(boolean showClearButton) {
+		boolean changed = showClearButton != this.showClearButton;
 		this.showClearButton = showClearButton;
-		reRenderIfRendered();
+		if (changed) {
+			reRenderIfRendered();
+		}
 	}
 
 	public void setAnimate(boolean animate) {
+		boolean changed = animate != this.animate;
 		this.animate = animate;
-		reRenderIfRendered();
+		if (changed) {
+			reRenderIfRendered();
+		}
 	}
 
 	public boolean isShowExpanders() {
@@ -359,24 +359,26 @@ public boolean isShowExpanders() {
 	}
 
 	public void setShowExpanders(boolean showExpanders) {
+		boolean changed = showExpanders != this.showExpanders;
 		this.showExpanders = showExpanders;
-		reRenderIfRendered();
-	}
-
-	public void setTextMatchingMode(TextMatchingMode textMatchingMode) {
-		this.textMatchingMode = textMatchingMode;
-		reRenderIfRendered();
+		if (changed) {
+			reRenderIfRendered();
+		}
 	}
 
 	public void setSelectedEntryTemplate(Template selectedEntryTemplate) {
 		this.selectedEntryTemplate = selectedEntryTemplate;
-		this.templateIdsByTemplate.put(selectedEntryTemplate, "" + templateIdCounter++);
+		if (selectedEntryTemplate != null) {
+			this.templateIdsByTemplate.put(selectedEntryTemplate, "" + templateIdCounter++);
+		}
 		reRenderIfRendered();
 	}
 
 	public void setDropDownTemplate(Template dropDownTemplate) {
 		this.dropDownTemplate = dropDownTemplate;
-		this.templateIdsByTemplate.put(dropDownTemplate, "" + templateIdCounter++);
+		if (dropDownTemplate != null) {
+			this.templateIdsByTemplate.put(dropDownTemplate, "" + templateIdCounter++);
+		}
 		reRenderIfRendered();
 	}
 
@@ -386,8 +388,11 @@ public void setTemplate(Template template) {
 	}
 
 	public void setTextHighlightingEntryLimit(int textHighlightingEntryLimit) {
+		boolean changed = textHighlightingEntryLimit != this.textHighlightingEntryLimit;
 		this.textHighlightingEntryLimit = textHighlightingEntryLimit;
-		reRenderIfRendered();
+		if (changed) {
+			reRenderIfRendered();
+		}
 	}
 
 	public Template getSelectedEntryTemplate() {
@@ -437,12 +442,60 @@ public void setRecordToStringFunction(Function<RECORD, String> recordToStringFun
 		this.recordToStringFunction = recordToStringFunction;
 	}
 
-	public PropertyExtractor<RECORD> getPropertyExtractor() {
-		return propertyExtractor;
+	public PropertyProvider<RECORD> getPropertyProvider() {
+		return propertyProvider;
+	}
+
+	public void setPropertyProvider(PropertyProvider<RECORD> propertyProvider) {
+		this.propertyProvider = propertyProvider;
 	}
 
 	public void setPropertyExtractor(PropertyExtractor<RECORD> propertyExtractor) {
-		this.propertyExtractor = propertyExtractor;
+		this.setPropertyProvider(propertyExtractor);
+	}
+
+	public String getEmptyText() {
+		return emptyText;
+	}
+
+	public void setEmptyText(String emptyText) {
+		boolean changed = !Objects.equals(emptyText, this.emptyText);
+		this.emptyText = emptyText;
+		if (changed) {
+			reRenderIfRendered();
+		}
+	}
+
+	public boolean isDistinctModelResultFiltering() {
+		return distinctModelResultFiltering;
+	}
+
+	public void setDistinctModelResultFiltering(boolean distinctModelResultFiltering) {
+		this.distinctModelResultFiltering = distinctModelResultFiltering;
+	}
+
+	public Integer getDropDownMinWidth() {
+		return dropDownMinWidth;
+	}
+
+	public void setDropDownMinWidth(Integer dropDownMinWidth) {
+		boolean changed = !Objects.equals(dropDownMinWidth, this.dropDownMinWidth);
+		this.dropDownMinWidth = dropDownMinWidth;
+		if (changed) {
+			reRenderIfRendered();
+		}
+	}
+
+	public Integer getDropDownMaxHeight() {
+		return dropDownMaxHeight;
+	}
+
+	public void setDropDownMaxHeight(Integer dropDownMaxHeight) {
+		boolean changed = !Objects.equals(dropDownMaxHeight, this.dropDownMaxHeight);
+		this.dropDownMaxHeight = dropDownMaxHeight;
+		if (changed) {
+			reRenderIfRendered();
+		}
 	}
 
 	@Override
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/combobox/ComboBox.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/combobox/ComboBox.java
index 16210c12f..ac30bacc0 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/combobox/ComboBox.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/combobox/ComboBox.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -22,49 +22,88 @@
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
 import org.teamapps.dto.UiComboBox;
+import org.teamapps.dto.UiComboBoxTreeRecord;
 import org.teamapps.dto.UiField;
 import org.teamapps.event.Event;
+import org.teamapps.ux.cache.record.legacy.CacheManipulationHandle;
 import org.teamapps.ux.component.field.TextInputHandlingField;
 import org.teamapps.ux.component.template.Template;
-import org.teamapps.ux.model.BaseTreeModel;
+import org.teamapps.ux.component.toolbutton.ToolButton;
+import org.teamapps.ux.component.tree.TreeNodeInfo;
+import org.teamapps.ux.component.tree.TreeNodeInfoExtractor;
+import org.teamapps.ux.model.ComboBoxModel;
 
-import java.util.Arrays;
-import java.util.Collections;
-import java.util.List;
+import java.util.*;
+import java.util.stream.Collectors;
 
-public class ComboBox<RECORD> extends AbstractComboBox<ComboBox, RECORD, RECORD> implements TextInputHandlingField {
+public class ComboBox<RECORD> extends AbstractComboBox<RECORD, RECORD> implements TextInputHandlingField {
 
 	private static final Logger LOGGER = LoggerFactory.getLogger(ComboBox.class);
 
 	public final Event<String> onFreeTextEntered = new Event<>();
-	
+
 	private String freeTextEntry;
 
-	public ComboBox(BaseTreeModel<RECORD> model) {
-		super(model);
+	private final List<ToolButton> toolButtons = new ArrayList<>();
+
+	public ComboBox() {
 	}
 
-	public ComboBox(List<RECORD> staticData) {
-		super(staticData);
+	@Override
+	protected Set<RECORD> getSelectedRecords() {
+		RECORD value = getValue();
+		return value != null ? Set.of(value) : Set.of();
 	}
 
-	public ComboBox() {
-		super((List<RECORD>) null);
+	public ComboBox(ComboBoxModel<RECORD> model) {
+		super(model);
 	}
 
 	public ComboBox(Template template) {
-		super((List<RECORD>) null);
 		setTemplate(template);
 	}
 
+	public static <R> ComboBox<R> createForList(List<R> staticData) {
+		return createForList(staticData, (Template) null);
+	}
+
+	public static <R> ComboBox<R> createForList(List<R> staticData, Template template) {
+		ComboBox<R> comboBox = new ComboBox<>(template);
+		comboBox.setModel(query -> staticData.stream()
+				.filter(record -> comboBox.getRecordToStringFunction().apply(record).toLowerCase().contains(query.toLowerCase()))
+				.collect(Collectors.toList()));
+		return comboBox;
+	}
+
+	public static <R> ComboBox<R> createForList(List<R> staticData, TreeNodeInfoExtractor<R> treeNodeInfoExtractor) {
+		ComboBox<R> comboBox = new ComboBox<>();
+		comboBox.setModel(new ComboBoxModel<>() {
+			@Override
+			public List<R> getRecords(String query) {
+				return staticData.stream()
+						.filter(record -> comboBox.getRecordToStringFunction().apply(record).toLowerCase().contains(query.toLowerCase()))
+						.collect(Collectors.toList());
+			}
+
+			@Override
+			public TreeNodeInfo getTreeNodeInfo(R r) {
+				return treeNodeInfoExtractor.getTreeNodeInfo(r);
+			}
+		});
+		return comboBox;
+	}
+
 	public static <ENUM extends Enum> ComboBox<ENUM> createForEnum(Class<ENUM> enumClass) {
-		return new ComboBox<>(Arrays.asList(enumClass.getEnumConstants()));
+		return ComboBox.createForList(Arrays.asList(enumClass.getEnumConstants()));
 	}
 
 	@Override
 	public UiField createUiComponent() {
-		UiComboBox comboBox = new UiComboBox(getId());
+		UiComboBox comboBox = new UiComboBox();
 		mapCommonUiComboBoxProperties(comboBox);
+		comboBox.setToolButtons(this.toolButtons.stream()
+				.map(tb -> tb.createUiReference())
+				.collect(Collectors.toList()));
 		return comboBox;
 	}
 
@@ -89,11 +128,12 @@ public RECORD convertUiValueToUxValue(Object value) {
 			if (this.freeTextRecordFactory != null) {
 				RECORD record = freeTextRecordFactory.apply(freeText);
 				recordCache.replaceRecords(Collections.singletonList(record)).commit();
+				return record;
 			} else {
 				this.freeTextEntry = freeText;
+				onFreeTextEntered.fire(freeText);
+				return null;
 			}
-			onFreeTextEntered.fire(freeText);
-			return null;
 		} else {
 			throw new IllegalArgumentException("Unknown ui value type: " + value);
 		}
@@ -104,12 +144,29 @@ public Object convertUxValueToUiValue(RECORD record) {
 		if (record == null) {
 			return null;
 		}
-		recordCache.addRecord(record).commit(); // directly committing only works because client-side changes are block during server-side changes
-		return this.createUiTreeRecordWithoutParentRelation(record);
+		CacheManipulationHandle<UiComboBoxTreeRecord> handle = recordCache.addRecord(record);
+		handle.commit(); // directly committing only works because client-side changes are blocked during server-side changes
+		return handle.getAndClearResult();
 	}
 
 	public String getFreeText() {
 		return freeTextEntry;
 	}
-	
+
+	public void addToolButton(ToolButton toolButton) {
+		toolButtons.add(toolButton);
+		updateToolButtons();
+	}
+
+	public void removeToolButton(ToolButton toolButton) {
+		toolButtons.remove(toolButton);
+		updateToolButtons();
+	}
+
+	private void updateToolButtons() {
+		queueCommandIfRendered(() -> new UiComboBox.SetToolButtonsCommand(getId(), this.toolButtons.stream()
+				.map(tb -> tb.createUiReference())
+				.collect(Collectors.toList())));
+	}
+
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/combobox/FreeTextEntryEnteredEvent.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/combobox/FreeTextEntryEnteredEvent.java
index 6de916880..23ff783c4 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/combobox/FreeTextEntryEnteredEvent.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/combobox/FreeTextEntryEnteredEvent.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/combobox/TagBoxWrappingMode.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/combobox/TagBoxWrappingMode.java
index ad8821af8..cec9fb0f7 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/combobox/TagBoxWrappingMode.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/combobox/TagBoxWrappingMode.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/combobox/TagComboBox.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/combobox/TagComboBox.java
index 2039bda7b..ee294ca32 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/combobox/TagComboBox.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/combobox/TagComboBox.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -25,16 +25,16 @@
 import org.teamapps.dto.UiField;
 import org.teamapps.dto.UiTagComboBox;
 import org.teamapps.event.Event;
-import org.teamapps.ux.cache.CacheManipulationHandle;
-import org.teamapps.ux.model.TreeModel;
+import org.teamapps.ux.cache.record.legacy.CacheManipulationHandle;
+import org.teamapps.ux.component.template.Template;
+import org.teamapps.ux.component.tree.TreeNodeInfo;
+import org.teamapps.ux.component.tree.TreeNodeInfoExtractor;
+import org.teamapps.ux.model.ComboBoxModel;
 
-import java.util.ArrayList;
-import java.util.Arrays;
-import java.util.Collections;
-import java.util.List;
+import java.util.*;
 import java.util.stream.Collectors;
 
-public class TagComboBox<RECORD> extends AbstractComboBox<TagComboBox, RECORD, List<RECORD>> {
+public class TagComboBox<RECORD> extends AbstractComboBox<RECORD, List<RECORD>> {
 
 	private static final Logger LOGGER = LoggerFactory.getLogger(TagComboBox.class);
 
@@ -44,42 +44,78 @@ public class TagComboBox<RECORD> extends AbstractComboBox<TagComboBox, RECORD, L
 	private int maxEntries; // if 0, then the list is unbounded
 	private TagBoxWrappingMode wrappingMode = TagBoxWrappingMode.MULTI_LINE;
 	private boolean distinct = false; // if true, do not allow the same entry to be selected multiple times!
+	private boolean twoStepDeletion = false; // This will cause tags to not directly be deleted when pressing the backspace or delete key, but first marked for deletion.
 
 	private List<String> freeTextEntries = new ArrayList<>();
 
-	public TagComboBox(TreeModel<RECORD> model) {
-		super(model);
+	public TagComboBox() {
 		init();
 	}
 
-	public TagComboBox(List<RECORD> staticData) {
-		super(staticData);
+	public TagComboBox(Template template) {
+		setTemplate(template);
 		init();
 	}
 
-	public TagComboBox() {
-		super((List<RECORD>) null);
+	public TagComboBox(ComboBoxModel<RECORD> model) {
+		super(model);
 		init();
 	}
 
+	@Override
+	protected Set<RECORD> getSelectedRecords() {
+		List<RECORD> value = getValue();
+		return value != null ? Set.copyOf(value) : Set.of();
+	}
+
 	private void init() {
 		recordCache.setPurgeDecider((record, clientId) -> !(getValue() != null && getValue().contains(record)));
 	}
 
+	public static <R> TagComboBox<R> createForList(List<R> staticData) {
+		return createForList(staticData, (Template) null);
+	}
+
+	public static <R> TagComboBox<R> createForList(List<R> staticData, Template template) {
+		TagComboBox<R> comboBox = new TagComboBox<>(template);
+		comboBox.setModel(query -> staticData.stream()
+				.filter(record -> comboBox.getRecordToStringFunction().apply(record).toLowerCase().contains(query.toLowerCase()))
+				.collect(Collectors.toList()));
+		return comboBox;
+	}
+
+	public static <R> TagComboBox<R> createForList(List<R> staticData, TreeNodeInfoExtractor<R> treeNodeInfoExtractor) {
+		TagComboBox<R> comboBox = new TagComboBox<>();
+		comboBox.setModel(new ComboBoxModel<>() {
+			@Override
+			public List<R> getRecords(String query) {
+				return staticData.stream()
+						.filter(record -> comboBox.getRecordToStringFunction().apply(record).toLowerCase().contains(query.toLowerCase()))
+						.collect(Collectors.toList());
+			}
+
+			@Override
+			public TreeNodeInfo getTreeNodeInfo(R r) {
+				return treeNodeInfoExtractor.getTreeNodeInfo(r);
+			}
+		});
+		return comboBox;
+	}
 
 	public static <ENUM extends Enum> TagComboBox<ENUM> createForEnum(Class<ENUM> enumClass) {
-		TagComboBox<ENUM> tagComboBox = new TagComboBox<>(Arrays.asList(enumClass.getEnumConstants()));
+		TagComboBox<ENUM> tagComboBox = createForList(Arrays.asList(enumClass.getEnumConstants()));
 		tagComboBox.setShowClearButton(true);
 		return tagComboBox;
 	}
 
 	@Override
 	public UiField createUiComponent() {
-		UiTagComboBox comboBox = new UiTagComboBox(getId());
+		UiTagComboBox comboBox = new UiTagComboBox();
 		mapCommonUiComboBoxProperties(comboBox);
 		comboBox.setMaxEntries(maxEntries);
 		comboBox.setWrappingMode(this.wrappingMode.toUiWrappingMode());
 		comboBox.setDistinct(distinct);
+		comboBox.setTwoStepDeletion(twoStepDeletion);
 		return comboBox;
 	}
 
@@ -94,7 +130,7 @@ public List<RECORD> convertUiValueToUxValue(Object value) {
 		if (value != null && !(value instanceof List)) {
 			throw new IllegalArgumentException("Invalid TagComboBox value coming from ui: " + value);
 		}
-		
+
 		if (value == null) {
 			value = Collections.emptyList();
 		}
@@ -124,10 +160,10 @@ public List<RECORD> convertUiValueToUxValue(Object value) {
 					RECORD record = freeTextRecordFactory.apply(newFreeText);
 					CacheManipulationHandle<UiComboBoxTreeRecord> cacheResponse = recordCache.addRecord(record);
 					records.add(record);
-					
+
 					if (isRendered()) {
 						getSessionContext().queueCommand(
-								new UiTagComboBox.ReplaceFreeTextEntryCommand(getId(), newFreeText, cacheResponse.getResult()),
+								new UiTagComboBox.ReplaceFreeTextEntryCommand(getId(), newFreeText, cacheResponse.getAndClearResult()),
 								aVoid -> {
 									cacheResponse.commit();
 								}
@@ -148,12 +184,17 @@ public List<RECORD> convertUiValueToUxValue(Object value) {
 			});
 			this.freeTextEntries = uiFreeTextEntries;
 		}
-		
+
 		recordCache.replaceRecords(records).commit();
 
 		return records;
 	}
 
+	@Override
+	protected boolean isEmptyValue(List<RECORD> records) {
+		return records == null || records.isEmpty();
+	}
+
 	@Override
 	public Object convertUxValueToUiValue(List<RECORD> uxValue) {
 		if (uxValue == null) {
@@ -161,7 +202,7 @@ public Object convertUxValueToUiValue(List<RECORD> uxValue) {
 		}
 		CacheManipulationHandle<List<UiComboBoxTreeRecord>> cacheResponse = recordCache.addRecords(uxValue);
 		cacheResponse.commit();
-		return cacheResponse.getResult();
+		return cacheResponse.getAndClearResult();
 	}
 
 	public int getMaxEntries() {
@@ -169,8 +210,11 @@ public int getMaxEntries() {
 	}
 
 	public void setMaxEntries(int maxEntries) {
+		boolean changed = maxEntries != this.maxEntries;
 		this.maxEntries = maxEntries;
-		reRenderIfRendered();
+		if (changed) {
+			reRenderIfRendered();
+		}
 	}
 
 	public TagBoxWrappingMode getWrappingMode() {
@@ -178,8 +222,11 @@ public TagBoxWrappingMode getWrappingMode() {
 	}
 
 	public void setWrappingMode(TagBoxWrappingMode wrappingMode) {
+		boolean changed = wrappingMode != this.wrappingMode;
 		this.wrappingMode = wrappingMode;
-		reRenderIfRendered();
+		if (changed) {
+			reRenderIfRendered();
+		}
 	}
 
 	public boolean isDistinct() {
@@ -187,8 +234,11 @@ public boolean isDistinct() {
 	}
 
 	public void setDistinct(boolean distinct) {
+		boolean changed = distinct != this.distinct;
 		this.distinct = distinct;
-		reRenderIfRendered();
+		if (changed) {
+			reRenderIfRendered();
+		}
 	}
 
 	public List<String> getFreeTextEntries() {
@@ -198,4 +248,16 @@ public List<String> getFreeTextEntries() {
 	public void setFreeTextEntries(List<String> freeTextEntries) {
 		this.freeTextEntries = freeTextEntries;
 	}
+
+	public boolean isTwoStepDeletion() {
+		return twoStepDeletion;
+	}
+
+	public void setTwoStepDeletion(boolean twoStepDeletion) {
+		boolean changed = twoStepDeletion != this.twoStepDeletion;
+		this.twoStepDeletion = twoStepDeletion;
+		if (changed) {
+			reRenderIfRendered();
+		}
+	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/combobox/TemplateDecider.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/combobox/TemplateDecider.java
index 3d6bce682..9583fb667 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/combobox/TemplateDecider.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/combobox/TemplateDecider.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/datetime/AbstractDateField.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/datetime/AbstractDateField.java
deleted file mode 100644
index 58a9a2cad..000000000
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/datetime/AbstractDateField.java
+++ /dev/null
@@ -1,105 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.ux.component.field.datetime;
-
-import org.teamapps.dto.AbstractUiDateField;
-import org.teamapps.dto.UiEvent;
-import org.teamapps.event.Event;
-import org.teamapps.ux.component.field.AbstractField;
-import org.teamapps.ux.component.field.SpecialKey;
-import org.teamapps.ux.component.field.TextInputHandlingField;
-
-public abstract class AbstractDateField<FIELD extends AbstractDateField<FIELD, VALUE>, VALUE> extends AbstractField<VALUE> implements TextInputHandlingField {
-	public final Event<String> onTextInput = new Event<>();
-	public final Event<SpecialKey> onSpecialKeyPressed = new Event<>();
-	protected boolean showDropDownButton = true;
-	protected boolean showClearButton = false;
-	protected boolean favorPastDates = false; // TODO: fix in trivial-components!!!
-	protected String dateFormat = null; // if null, UiConfiguration.dateFormat applies
-
-	public AbstractDateField() {
-		super();
-	}
-
-	@Override
-	public void handleUiEvent(UiEvent event) {
-		super.handleUiEvent(event);
-		defaultHandleTextInputEvent(event);
-	}
-
-	@Override
-	protected void doDestroy() {
-		// nothing to do
-	}
-
-	protected void mapAbstractDateFieldUiValues(AbstractUiDateField dateField) {
-		mapAbstractFieldAttributesToUiField(dateField);
-		dateField.setShowDropDownButton(showDropDownButton);
-		dateField.setFavorPastDates(favorPastDates);
-		dateField.setDateFormat(dateFormat);
-		dateField.setShowClearButton(showClearButton);
-	}
-
-	public boolean isShowDropDownButton() {
-		return showDropDownButton;
-	}
-
-	public void setShowDropDownButton(boolean showDropDownButton) {
-		this.showDropDownButton = showDropDownButton;
-		queueCommandIfRendered(() -> new AbstractUiDateField.SetShowDropDownButtonCommand(getId(), showDropDownButton));
-	}
-
-	public boolean isFavorPastDates() {
-		return favorPastDates;
-	}
-
-	public void setFavorPastDates(boolean favorPastDates) {
-		this.favorPastDates = favorPastDates;
-		queueCommandIfRendered(() -> new AbstractUiDateField.SetFavorPastDatesCommand(getId(), favorPastDates));
-	}
-
-	public String getDateFormat() {
-		return dateFormat;
-	}
-
-	public void setDateFormat(String dateFormat) {
-		this.dateFormat = dateFormat;
-		queueCommandIfRendered(() -> new AbstractUiDateField.SetDateFormatCommand(getId(), dateFormat));
-	}
-
-	public boolean isShowClearButton() {
-		return showClearButton;
-	}
-
-	public void setShowClearButton(boolean showClearButton) {
-		this.showClearButton = showClearButton;
-		queueCommandIfRendered(() -> new AbstractUiDateField.SetShowClearButtonCommand(getId(), showClearButton));
-	}
-
-	@Override
-	public Event<String> onTextInput() {
-		return onTextInput;
-	}
-
-	@Override
-	public Event<SpecialKey> onSpecialKeyPressed() {
-		return onSpecialKeyPressed;
-	}
-}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/datetime/AbstractDateTimeField.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/datetime/AbstractDateTimeField.java
index 3618d7068..a97d8a2b1 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/datetime/AbstractDateTimeField.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/datetime/AbstractDateTimeField.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,26 +19,35 @@
  */
 package org.teamapps.ux.component.field.datetime;
 
+import com.ibm.icu.util.ULocale;
 import org.teamapps.dto.AbstractUiDateTimeField;
 import org.teamapps.ux.component.field.AbstractField;
+import org.teamapps.ux.session.DateTimeFormatDescriptor;
 
-public abstract class AbstractDateTimeField<FIELD extends AbstractDateTimeField<FIELD, VALUE>, VALUE> extends AbstractField<VALUE> {
+import java.util.Locale;
+
+public abstract class AbstractDateTimeField<VALUE> extends AbstractField<VALUE> {
 
 	private boolean showDropDownButton = true;
-	private boolean favorPastDates = false; // TODO: fix in trivial-components!!!
-	private String dateFormat = null; // if null, the SessionContext's value applies
-	private String timeFormat = null; // if null, the SessionContext's value applies
+	private boolean favorPastDates = false;
+	private ULocale locale;
+	private DateTimeFormatDescriptor dateFormat;
+	private DateTimeFormatDescriptor timeFormat;
 
 	public AbstractDateTimeField() {
 		super();
+		this.locale = getSessionContext().getULocale();
+		this.dateFormat = getSessionContext().getConfiguration().getDateFormat();
+		this.timeFormat = getSessionContext().getConfiguration().getTimeFormat();
 	}
 
 	protected void mapAbstractDateTimeFieldUiValues(AbstractUiDateTimeField uiField) {
 		mapAbstractFieldAttributesToUiField(uiField);
 		uiField.setShowDropDownButton(showDropDownButton);
 		uiField.setFavorPastDates(favorPastDates);
-		uiField.setDateFormat(dateFormat);
-		uiField.setTimeFormat(timeFormat);
+		uiField.setLocale(locale.toLanguageTag());
+		uiField.setDateFormat(dateFormat.toDateTimeFormatDescriptor());
+		uiField.setTimeFormat(timeFormat.toDateTimeFormatDescriptor());
 	}
 
 	public boolean isShowDropDownButton() {
@@ -59,26 +68,39 @@ public void setFavorPastDates(boolean favorPastDates) {
 		queueCommandIfRendered(() -> new AbstractUiDateTimeField.SetFavorPastDatesCommand(getId(), favorPastDates));
 	}
 
-	public String getDateFormat() {
+	public Locale getLocale() {
+		return locale.toLocale();
+	}
+
+	public ULocale getULocale() {
+		return locale;
+	}
+
+	public void setLocale(Locale locale) {
+		setULocale(ULocale.forLocale(locale));
+	}
+
+	public void setULocale(ULocale locale) {
+		this.locale = locale;
+		queueCommandIfRendered(() -> new AbstractUiDateTimeField.SetLocaleAndFormatsCommand(getId(), locale.toLanguageTag(), dateFormat.toDateTimeFormatDescriptor(), timeFormat.toDateTimeFormatDescriptor()));
+	}
+
+	public DateTimeFormatDescriptor getDateFormat() {
 		return dateFormat;
 	}
 
-	public void setDateFormat(String dateFormat) {
+	public void setDateFormat(DateTimeFormatDescriptor dateFormat) {
 		this.dateFormat = dateFormat;
-		queueCommandIfRendered(() -> new AbstractUiDateTimeField.SetDateFormatCommand(getId(), dateFormat));
+		queueCommandIfRendered(() -> new AbstractUiDateTimeField.SetLocaleAndFormatsCommand(getId(), locale.toLanguageTag(), dateFormat.toDateTimeFormatDescriptor(), timeFormat.toDateTimeFormatDescriptor()));
 	}
 
-	public String getTimeFormat() {
+	public DateTimeFormatDescriptor getTimeFormat() {
 		return timeFormat;
 	}
 
-	public void setTimeFormat(String timeFormat) {
+	public void setTimeFormat(DateTimeFormatDescriptor timeFormat) {
 		this.timeFormat = timeFormat;
-		queueCommandIfRendered(() -> new AbstractUiDateTimeField.SetTimeFormatCommand(getId(), timeFormat));
+		queueCommandIfRendered(() -> new AbstractUiDateTimeField.SetLocaleAndFormatsCommand(getId(), locale.toLanguageTag(), dateFormat.toDateTimeFormatDescriptor(), timeFormat.toDateTimeFormatDescriptor()));
 	}
 
-	@Override
-	protected void doDestroy() {
-		// nothing to do
-	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/datetime/AbstractTimeField.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/datetime/AbstractTimeField.java
index ec1e82d5e..41631cf7b 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/datetime/AbstractTimeField.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/datetime/AbstractTimeField.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,25 +19,31 @@
  */
 package org.teamapps.ux.component.field.datetime;
 
-import org.teamapps.dto.AbstractUiTimeField;
-import org.teamapps.dto.UiEvent;
-import org.teamapps.dto.UiInstantDateField;
+import com.ibm.icu.util.ULocale;
+import org.teamapps.dto.*;
 import org.teamapps.event.Event;
 import org.teamapps.ux.component.field.AbstractField;
 import org.teamapps.ux.component.field.SpecialKey;
 import org.teamapps.ux.component.field.TextInputHandlingField;
+import org.teamapps.ux.session.DateTimeFormatDescriptor;
 
-public abstract class AbstractTimeField<FIELD extends AbstractTimeField, VALUE> extends AbstractField<VALUE> implements TextInputHandlingField {
+import java.util.Locale;
+
+public abstract class AbstractTimeField<VALUE> extends AbstractField<VALUE> implements TextInputHandlingField {
 
 	public final Event<String> onTextInput = new Event<>();
 	public final Event<SpecialKey> onSpecialKeyPressed = new Event<>();
 
 	private boolean showDropDownButton = true;
 	private boolean showClearButton = false;
-	private String timeFormat = null; // if null, UiConfiguration.timeFormat applies
+	private ULocale locale;
+	private DateTimeFormatDescriptor timeFormat;
+	private boolean clockIconEnabled = true;
 
 	public AbstractTimeField() {
 		super();
+		this.locale = getSessionContext().getULocale();
+		this.timeFormat = getSessionContext().getConfiguration().getTimeFormat();
 	}
 
 	@Override
@@ -46,16 +52,13 @@ public void handleUiEvent(UiEvent event) {
 		defaultHandleTextInputEvent(event);
 	}
 
-	@Override
-	protected void doDestroy() {
-		// nothing to do
-	}
-
 	public void mapAbstractTimeFieldUiValues(AbstractUiTimeField uiTimeField) {
 		mapAbstractFieldAttributesToUiField(uiTimeField);
 		uiTimeField.setShowDropDownButton(isShowDropDownButton());
-		uiTimeField.setTimeFormat(getTimeFormat());
+		uiTimeField.setLocale(locale.toLanguageTag());
+		uiTimeField.setTimeFormat(timeFormat.toDateTimeFormatDescriptor());
 		uiTimeField.setShowClearButton(isShowClearButton());
+		uiTimeField.setClockIconEnabled(this.clockIconEnabled);
 	}
 
 	public boolean isShowDropDownButton() {
@@ -64,16 +67,34 @@ public boolean isShowDropDownButton() {
 
 	public void setShowDropDownButton(boolean showDropDownButton) {
 		this.showDropDownButton = showDropDownButton;
-		queueCommandIfRendered(() -> new UiInstantDateField.SetShowDropDownButtonCommand(getId(), showDropDownButton));
+		queueCommandIfRendered(() -> new AbstractUiTimeField.SetShowDropDownButtonCommand(getId(), showDropDownButton));
+	}
+
+
+	public Locale getLocale() {
+		return locale.toLocale();
+	}
+
+	public ULocale getULocale() {
+		return locale;
 	}
 
-	public String getTimeFormat() {
+	public void setLocale(Locale locale) {
+		setULocale(ULocale.forLocale(locale));
+	}
+
+	public void setULocale(ULocale locale) {
+		this.locale = locale;
+		queueCommandIfRendered(() -> new AbstractUiTimeField.SetLocaleAndTimeFormatCommand(getId(), locale.toLanguageTag(), timeFormat.toDateTimeFormatDescriptor()));
+	}
+
+	public DateTimeFormatDescriptor getTimeFormat() {
 		return timeFormat;
 	}
 
-	public void setTimeFormat(String timeFormat) {
+	public void setTimeFormat(DateTimeFormatDescriptor timeFormat) {
 		this.timeFormat = timeFormat;
-		queueCommandIfRendered(() -> new UiInstantDateField.SetDateFormatCommand(getId(), timeFormat));
+		queueCommandIfRendered(() -> new AbstractUiTimeField.SetLocaleAndTimeFormatCommand(getId(), locale.toLanguageTag(), timeFormat.toDateTimeFormatDescriptor()));
 	}
 
 	public boolean isShowClearButton() {
@@ -82,7 +103,7 @@ public boolean isShowClearButton() {
 
 	public void setShowClearButton(boolean showClearButton) {
 		this.showClearButton = showClearButton;
-		queueCommandIfRendered(() -> new UiInstantDateField.SetShowClearButtonCommand(getId(), showClearButton));
+		queueCommandIfRendered(() -> new AbstractUiTimeField.SetShowClearButtonCommand(getId(), showClearButton));
 	}
 
 	@Override
@@ -94,4 +115,14 @@ public Event<String> onTextInput() {
 	public Event<SpecialKey> onSpecialKeyPressed() {
 		return onSpecialKeyPressed;
 	}
+
+
+	public void setClockIconEnabled(boolean clockIconEnabled) {
+		this.clockIconEnabled = clockIconEnabled;
+		queueCommandIfRendered(() -> new AbstractUiTimeField.SetClockIconEnabledCommand(getId(), this.clockIconEnabled));
+	}
+
+	public boolean isClockIconEnabled() {
+		return clockIconEnabled;
+	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/datetime/InstantDateField.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/datetime/InstantDateField.java
deleted file mode 100644
index 48dae12f5..000000000
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/datetime/InstantDateField.java
+++ /dev/null
@@ -1,61 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.ux.component.field.datetime;
-
-import org.teamapps.dto.UiField;
-import org.teamapps.dto.UiInstantDateField;
-
-import java.time.Instant;
-
-public class InstantDateField extends AbstractDateField<InstantDateField, Instant> {
-
-	private String timeZoneId = null; // if null, UiConfiguration.timeZoneId applies
-
-	public InstantDateField() {
-		super();
-	}
-
-	@Override
-	public UiField createUiComponent() {
-		UiInstantDateField dateField = new UiInstantDateField(getId());
-		mapAbstractDateFieldUiValues(dateField);
-		dateField.setTimeZoneId(timeZoneId);
-		return dateField;
-	}
-
-	public String getTimeZoneId() {
-		return timeZoneId;
-	}
-
-	public void setTimeZoneId(String timeZoneId) {
-		this.timeZoneId = timeZoneId;
-		queueCommandIfRendered(() -> new UiInstantDateField.SetTimeZoneIdCommand(getId(), timeZoneId));
-	}
-
-	@Override
-	public Instant convertUiValueToUxValue(Object value) {
-		if (value == null) {
-			return null;
-		} else {
-			return Instant.ofEpochMilli(((Number) value).longValue());
-		}
-	}
-
-}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/datetime/InstantDateTimeField.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/datetime/InstantDateTimeField.java
index 20785f7fa..6cb6d6ca7 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/datetime/InstantDateTimeField.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/datetime/InstantDateTimeField.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -23,30 +23,32 @@
 import org.teamapps.dto.UiInstantDateTimeField;
 
 import java.time.Instant;
+import java.time.ZoneId;
 
-public class InstantDateTimeField extends AbstractDateTimeField<InstantDateTimeField, Instant> {
+public class InstantDateTimeField extends AbstractDateTimeField<Instant> {
 
-	protected String timeZoneId = null; // if null, the SessionContext's value applies
+	protected ZoneId timeZoneId;
 
 	public InstantDateTimeField() {
 		super();
+		this.timeZoneId = getSessionContext().getTimeZone();
 	}
 
 	@Override
 	public UiField createUiComponent() {
-		UiInstantDateTimeField uiField = new UiInstantDateTimeField(getId());
+		UiInstantDateTimeField uiField = new UiInstantDateTimeField();
 		mapAbstractDateTimeFieldUiValues(uiField);
-		uiField.setTimeZoneId(timeZoneId);
+		uiField.setTimeZoneId(timeZoneId.getId());
 		return uiField;
 	}
 
-	public String getTimeZoneId() {
+	public ZoneId getTimeZoneId() {
 		return timeZoneId;
 	}
 
-	public void setTimeZoneId(String timeZoneId) {
+	public void setTimeZoneId(ZoneId timeZoneId) {
 		this.timeZoneId = timeZoneId;
-		queueCommandIfRendered(() -> new UiInstantDateTimeField.SetTimeZoneIdCommand(getId(), timeZoneId));
+		queueCommandIfRendered(() -> new UiInstantDateTimeField.SetTimeZoneIdCommand(getId(), timeZoneId.getId()));
 	}
 
 	@Override
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/datetime/InstantTimeField.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/datetime/InstantTimeField.java
deleted file mode 100644
index 28d609d6f..000000000
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/datetime/InstantTimeField.java
+++ /dev/null
@@ -1,62 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.ux.component.field.datetime;
-
-import org.teamapps.dto.UiField;
-import org.teamapps.dto.UiInstantDateField;
-import org.teamapps.dto.UiInstantTimeField;
-import org.teamapps.ux.component.field.TextInputHandlingField;
-
-import java.time.Instant;
-
-public class InstantTimeField extends AbstractTimeField<InstantTimeField, Instant> implements TextInputHandlingField {
-
-	private String timeZoneId = null; // if null, UiConfiguration.timeZoneId applies
-
-	public InstantTimeField() {
-		super();
-	}
-
-	@Override
-	public UiField createUiComponent() {
-		UiInstantTimeField uiTimeField = new UiInstantTimeField(getId());
-		mapAbstractTimeFieldUiValues(uiTimeField);
-		uiTimeField.setTimeZoneId(timeZoneId);
-		return uiTimeField;
-	}
-
-	public String getTimeZoneId() {
-		return timeZoneId;
-	}
-
-	public void setTimeZoneId(String timeZoneId) {
-		this.timeZoneId = timeZoneId;
-		queueCommandIfRendered(() -> new UiInstantDateField.SetTimeZoneIdCommand(getId(), timeZoneId));
-	}
-
-	@Override
-	public Instant convertUiValueToUxValue(Object value) {
-		if (value == null) {
-			return null;
-		} else {
-			return Instant.ofEpochMilli(((Number) value).longValue());
-		}
-	}
-}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/datetime/LocalDateField.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/datetime/LocalDateField.java
index 758980053..105030be4 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/datetime/LocalDateField.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/datetime/LocalDateField.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,22 +19,60 @@
  */
 package org.teamapps.ux.component.field.datetime;
 
-import org.teamapps.dto.UiField;
+import com.ibm.icu.util.ULocale;
+import org.teamapps.dto.UiEvent;
+import org.teamapps.dto.UiLocalDate;
 import org.teamapps.dto.UiLocalDateField;
+import org.teamapps.event.Event;
+import org.teamapps.ux.component.field.AbstractField;
+import org.teamapps.ux.component.field.SpecialKey;
+import org.teamapps.ux.component.field.TextInputHandlingField;
+import org.teamapps.ux.session.DateTimeFormatDescriptor;
 
 import java.time.LocalDate;
-import java.util.List;
+import java.util.Locale;
 
-public class LocalDateField extends AbstractDateField<LocalDateField, LocalDate> {
+public class LocalDateField extends AbstractField<LocalDate> implements TextInputHandlingField {
+
+	public enum DropDownMode {
+		CALENDAR,
+		CALENDAR_SUGGESTION_LIST,
+		SUGGESTION_LIST
+	}
+
+	public final Event<String> onTextInput = new Event<>();
+	public final Event<SpecialKey> onSpecialKeyPressed = new Event<>();
+
+	private boolean showDropDownButton = true;
+	private boolean showClearButton = false;
+	private boolean favorPastDates = false; // TODO: fix in trivial-components!!!
+	private ULocale locale;
+	private DateTimeFormatDescriptor dateFormat;
+	private LocalDate defaultSuggestionDate;
+	private boolean shuffledFormatSuggestionsEnabled = false;
+	private DropDownMode dropDownMode = DropDownMode.CALENDAR_SUGGESTION_LIST;
+	private String emptyText;
+	private boolean calendarIconEnabled = true;
 
 	public LocalDateField() {
-		super();
+		this.locale = getSessionContext().getULocale();
+		this.dateFormat = getSessionContext().getConfiguration().getDateFormat();
 	}
 
 	@Override
-	public UiField createUiComponent() {
-		UiLocalDateField dateField = new UiLocalDateField(getId());
-		mapAbstractDateFieldUiValues(dateField);
+	public UiLocalDateField createUiComponent() {
+		UiLocalDateField dateField = new UiLocalDateField();
+		mapAbstractFieldAttributesToUiField(dateField);
+		dateField.setShowDropDownButton(showDropDownButton);
+		dateField.setFavorPastDates(favorPastDates);
+		dateField.setLocale(locale.toLanguageTag());
+		dateField.setDateFormat(dateFormat.toDateTimeFormatDescriptor());
+		dateField.setShowClearButton(showClearButton);
+		dateField.setDefaultSuggestionDate(convertUxValueToUiValue(defaultSuggestionDate));
+		dateField.setShuffledFormatSuggestionsEnabled(shuffledFormatSuggestionsEnabled);
+		dateField.setDropDownMode(UiLocalDateField.DropDownMode.valueOf(dropDownMode.name()));
+		dateField.setPlaceholderText(this.emptyText);
+		dateField.setCalendarIconEnabled(this.calendarIconEnabled);
 		return dateField;
 	}
 
@@ -43,8 +81,127 @@ public LocalDate convertUiValueToUxValue(Object value) {
 		if (value == null) {
 			return null;
 		} else {
-			List<Integer> values = (List<Integer>) value;
-			return LocalDate.of(values.get(0), values.get(1), values.get(2));
+			UiLocalDate uiLocalDate = (UiLocalDate) value;
+			return LocalDate.of(uiLocalDate.getYear(), uiLocalDate.getMonth(), uiLocalDate.getDay());
 		}
 	}
+
+	@Override
+	public UiLocalDate convertUxValueToUiValue(LocalDate localDate) {
+		return localDate != null ? new UiLocalDate(localDate.getYear(), localDate.getMonthValue(), localDate.getDayOfMonth()) : null;
+	}
+
+	@Override
+	public void handleUiEvent(UiEvent event) {
+		super.handleUiEvent(event);
+		defaultHandleTextInputEvent(event);
+	}
+
+	public boolean isShowDropDownButton() {
+		return showDropDownButton;
+	}
+
+	public void setShowDropDownButton(boolean showDropDownButton) {
+		this.showDropDownButton = showDropDownButton;
+		queueCommandIfRendered(() -> new UiLocalDateField.UpdateCommand(getId(), this.createUiComponent()));
+	}
+
+	public boolean isFavorPastDates() {
+		return favorPastDates;
+	}
+
+	public void setFavorPastDates(boolean favorPastDates) {
+		this.favorPastDates = favorPastDates;
+		queueCommandIfRendered(() -> new UiLocalDateField.UpdateCommand(getId(), this.createUiComponent()));
+	}
+
+	public Locale getLocale() {
+		return locale.toLocale();
+	}
+
+	public ULocale getULocale() {
+		return locale;
+	}
+
+	public void setLocale(Locale locale) {
+		setULocale(ULocale.forLocale(locale));
+	}
+
+	public void setULocale(ULocale locale) {
+		this.locale = locale;
+		queueCommandIfRendered(() -> new UiLocalDateField.UpdateCommand(getId(), this.createUiComponent()));
+	}
+
+	public DateTimeFormatDescriptor getDateFormat() {
+		return dateFormat;
+	}
+
+	public void setDateFormat(DateTimeFormatDescriptor dateFormat) {
+		this.dateFormat = dateFormat;
+		queueCommandIfRendered(() -> new UiLocalDateField.UpdateCommand(getId(), this.createUiComponent()));
+	}
+
+	public boolean isShowClearButton() {
+		return showClearButton;
+	}
+
+	public void setShowClearButton(boolean showClearButton) {
+		this.showClearButton = showClearButton;
+		queueCommandIfRendered(() -> new UiLocalDateField.UpdateCommand(getId(), this.createUiComponent()));
+	}
+
+	@Override
+	public Event<String> onTextInput() {
+		return onTextInput;
+	}
+
+	@Override
+	public Event<SpecialKey> onSpecialKeyPressed() {
+		return onSpecialKeyPressed;
+	}
+
+	public LocalDate getDefaultSuggestionDate() {
+		return defaultSuggestionDate;
+	}
+
+	public void setDefaultSuggestionDate(LocalDate defaultSuggestionDate) {
+		this.defaultSuggestionDate = defaultSuggestionDate;
+		queueCommandIfRendered(() -> new UiLocalDateField.UpdateCommand(getId(), this.createUiComponent()));
+	}
+
+	public boolean isShuffledFormatSuggestionsEnabled() {
+		return shuffledFormatSuggestionsEnabled;
+	}
+
+	public void setShuffledFormatSuggestionsEnabled(boolean shuffledFormatSuggestionsEnabled) {
+		this.shuffledFormatSuggestionsEnabled = shuffledFormatSuggestionsEnabled;
+		queueCommandIfRendered(() -> new UiLocalDateField.UpdateCommand(getId(), this.createUiComponent()));
+	}
+
+	public DropDownMode getDropDownMode() {
+		return dropDownMode;
+	}
+
+	public void setDropDownMode(DropDownMode dropDownMode) {
+		this.dropDownMode = dropDownMode;
+		queueCommandIfRendered(() -> new UiLocalDateField.UpdateCommand(getId(), this.createUiComponent()));
+	}
+
+	public String getEmptyText() {
+		return emptyText;
+	}
+
+	public void setEmptyText(String emptyText) {
+		this.emptyText = emptyText;
+		queueCommandIfRendered(() -> new UiLocalDateField.UpdateCommand(getId(), this.createUiComponent()));
+	}
+
+	public void setCalendarIconEnabled(boolean calendarIconEnabled) {
+		this.calendarIconEnabled = calendarIconEnabled;
+		queueCommandIfRendered(() -> new UiLocalDateField.UpdateCommand(getId(), this.createUiComponent()));
+	}
+
+	public boolean isCalendarIconEnabled() {
+		return calendarIconEnabled;
+	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/datetime/LocalDateTimeField.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/datetime/LocalDateTimeField.java
index 9fe94ce20..539dfc859 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/datetime/LocalDateTimeField.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/datetime/LocalDateTimeField.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -20,15 +20,12 @@
 package org.teamapps.ux.component.field.datetime;
 
 import org.teamapps.dto.UiField;
-import org.teamapps.dto.UiInstantDateTimeField;
 import org.teamapps.dto.UiLocalDateTimeField;
 
 import java.time.LocalDateTime;
 import java.util.List;
 
-public class LocalDateTimeField extends AbstractDateTimeField<LocalDateTimeField, LocalDateTime> {
-
-	protected String timeZoneId = null; // if null, the SessionContext's value applies
+public class LocalDateTimeField extends AbstractDateTimeField<LocalDateTime> {
 
 	public LocalDateTimeField() {
 		super();
@@ -36,20 +33,11 @@ public LocalDateTimeField() {
 
 	@Override
 	public UiField createUiComponent() {
-		UiLocalDateTimeField uiField = new UiLocalDateTimeField(getId());
+		UiLocalDateTimeField uiField = new UiLocalDateTimeField();
 		mapAbstractDateTimeFieldUiValues(uiField);
 		return uiField;
 	}
 
-	public String getTimeZoneId() {
-		return timeZoneId;
-	}
-
-	public void setTimeZoneId(String timeZoneId) {
-		this.timeZoneId = timeZoneId;
-		queueCommandIfRendered(() -> new UiInstantDateTimeField.SetTimeZoneIdCommand(getId(), timeZoneId));
-	}
-
 	@Override
 	public LocalDateTime convertUiValueToUxValue(Object value) {
 		if (value == null) {
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/datetime/LocalTimeField.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/datetime/LocalTimeField.java
index 365da70a4..582c3fca7 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/datetime/LocalTimeField.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/datetime/LocalTimeField.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -25,7 +25,7 @@
 import java.time.LocalTime;
 import java.util.List;
 
-public class LocalTimeField extends AbstractTimeField<LocalTimeField, LocalTime> {
+public class LocalTimeField extends AbstractTimeField<LocalTime> {
 
 	public LocalTimeField() {
 		super();
@@ -33,7 +33,7 @@ public LocalTimeField() {
 
 	@Override
 	public UiField createUiComponent() {
-		UiLocalTimeField uiTimeField = new UiLocalTimeField(getId());
+		UiLocalTimeField uiTimeField = new UiLocalTimeField();
 		mapAbstractTimeFieldUiValues(uiTimeField);
 		return uiTimeField;
 	}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/multicurrency/CurrencyField.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/multicurrency/CurrencyField.java
index d33406fb0..962120cc5 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/multicurrency/CurrencyField.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/multicurrency/CurrencyField.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,17 +19,20 @@
  */
 package org.teamapps.ux.component.field.multicurrency;
 
-import org.teamapps.dto.UiCurrencyField;
-import org.teamapps.dto.UiCurrencyValue;
-import org.teamapps.dto.UiEvent;
-import org.teamapps.dto.UiField;
+import com.ibm.icu.util.ULocale;
+import org.teamapps.dto.*;
 import org.teamapps.event.Event;
 import org.teamapps.ux.component.field.AbstractField;
 import org.teamapps.ux.component.field.SpecialKey;
 import org.teamapps.ux.component.field.TextInputHandlingField;
+import org.teamapps.ux.component.field.multicurrency.value.CurrencyUnit;
+import org.teamapps.ux.component.field.multicurrency.value.CurrencyValue;
+import org.teamapps.ux.session.SessionContext;
 
+import java.math.BigDecimal;
 import java.util.List;
-import java.util.Map;
+import java.util.Locale;
+import java.util.Optional;
 import java.util.stream.Collectors;
 
 public class CurrencyField extends AbstractField<CurrencyValue> implements TextInputHandlingField {
@@ -37,30 +40,47 @@ public class CurrencyField extends AbstractField<CurrencyValue> implements TextI
 	public final Event<String> onTextInput = new Event<>();
 	public final Event<SpecialKey> onSpecialKeyPressed = new Event<>();
 
-	private int precision = 2;
-	private boolean alphaKeysQueryForCurrency = true;
-	private Currency defaultCurrency; // the selected or default currency code (ISO 4217 - e.g. "USD", "EUR"). Nullable. However, the user has to select a currency.
-	private List<Currency> currencyList; //list of ISO 4217 currencies - e.g. "USD", "EUR", etc. to be displayed as dropdown selection if available
-	private boolean showCurrencyBeforeAmount; // If true, the currency indicator is on the left of the amount. If false, it is on the right of the amount.
-	private boolean showCurrencySymbol = true; // If false, show "EUR", "USD", etc. as selected value of dropdown button. If true, show "$" for "USD", "€" for "EUR". The dopdown list shows always
-	// both ISO code and currency symbol (e.g. "$ (USD)" or "€ (EUR)"). Use "¤" as generic symbol (as defined in ISO standard).
+	private ULocale locale = SessionContext.current().getULocale();
+
+	private List<CurrencyUnit> currencies;
+
+	/**
+	 * If this is >= 0 it will overwrite the precision of the currencies.
+	 */
+	private int fixedPrecision = -1;
+
+	private boolean alphabeticKeysQueryEnabled = true;
+
+	/**
+	 * If true, the currency indicator is on the left of the amount. If false, it is on the right of the amount.
+	 */
+	private boolean currencyBeforeAmount;
+
+	/**
+	 * Whether to show the currency symbol additionally to the currency code.
+	 */
+	private boolean currencySymbolsEnabled = true;
 
 	public CurrencyField() {
-		super();
+		this(CurrencyUnit.getAllAvailableFromJdk());
+	}
+
+	public CurrencyField(List<CurrencyUnit> currencies) {
+		this.currencies = currencies;
 	}
 
 	@Override
 	public UiField createUiComponent() {
-		UiCurrencyField field = new UiCurrencyField(getId());
+		UiCurrencyField field = new UiCurrencyField();
 		mapAbstractFieldAttributesToUiField(field);
-		field.setDefaultCurrencyCode(defaultCurrency != null ? defaultCurrency.isoCode : null);
-		field.setCurrencyCodeList(currencyList != null ? currencyList.stream()
-				.map(Currency::getIsoCode)
-				.collect(Collectors.toList()) : null);
-		field.setPrecision(precision);
-		field.setShowCurrencyBeforeAmount(showCurrencyBeforeAmount);
-		field.setShowCurrencySymbol(showCurrencySymbol);
-		field.setAlphaKeysQueryForCurrency(alphaKeysQueryForCurrency);
+		field.setCurrencyUnits(currencies.stream()
+				.map(unit -> unit.toUiCurrencyUnit(locale.toLocale()))
+				.collect(Collectors.toList()));
+		field.setFixedPrecision(fixedPrecision);
+		field.setShowCurrencyBeforeAmount(currencyBeforeAmount);
+		field.setShowCurrencySymbol(currencySymbolsEnabled);
+		field.setAlphaKeysQueryForCurrency(alphabeticKeysQueryEnabled);
+		field.setLocale(locale.toLanguageTag());
 		return field;
 	}
 
@@ -70,31 +90,21 @@ public void handleUiEvent(UiEvent event) {
 		defaultHandleTextInputEvent(event);
 	}
 
-	public Currency getDefaultCurrency() {
-		return defaultCurrency;
-	}
-
-	public CurrencyField setDefaultCurrency(Currency defaultCurrency) {
-		this.defaultCurrency = defaultCurrency;
-		queueCommandIfRendered(() -> new UiCurrencyField.SetDefaultCurrencyCodeCommand(getId(), defaultCurrency != null ? defaultCurrency.isoCode : null));
-		return this;
-	}
-
-	public List<Currency> getCurrencyList() {
-		return currencyList;
+	public List<CurrencyUnit> getCurrencies() {
+		return currencies;
 	}
 
-	public CurrencyField setCurrencyList(List<Currency> currencyList) {
-		this.currencyList = currencyList;
-		queueCommandIfRendered(() -> new UiCurrencyField.SetCurrencyCodeListCommand(getId(), currencyList != null ? currencyList.stream()
-				.map(Currency::getIsoCode)
+	public CurrencyField setCurrencies(List<CurrencyUnit> currencies) {
+		this.currencies = currencies;
+		queueCommandIfRendered(() -> new UiCurrencyField.SetCurrencyUnitsCommand(getId(), currencies != null ? currencies.stream()
+				.map(unit -> unit.toUiCurrencyUnit(locale.toLocale()))
 				.collect(Collectors.toList()) : null));
 		return this;
 	}
 
 	@Override
 	public Object convertUxValueToUiValue(CurrencyValue currencyValue) {
-		return currencyValue != null ? currencyValue.toUiCurrencyValue() : null;
+		return currencyValue != null ? currencyValue.toUiCurrencyValue(locale.toLocale()) : null;
 	}
 
 	@Override
@@ -103,56 +113,102 @@ public CurrencyValue convertUiValueToUxValue(Object value) {
 			return null;
 		} else if (value instanceof UiCurrencyValue) {
 			UiCurrencyValue uiCurrencyValue = (UiCurrencyValue) value;
-			return new CurrencyValue(uiCurrencyValue.getValue(), uiCurrencyValue.getCurrencyCode());
-		} else if (value instanceof Map) {
-			Map map = (Map) value;
-			return new CurrencyValue(((Number) map.get("value")).longValue(), ((String) map.get("currencyCode")));
+			String uiAmount = uiCurrencyValue.getAmount();
+			BigDecimal uxAmount = uiAmount != null ? new BigDecimal(uiAmount) : null;
+
+			UiCurrencyUnit uiCurrencyUnit = uiCurrencyValue.getCurrencyUnit();
+			CurrencyUnit uxCurrencyUnit;
+			if (uiCurrencyUnit != null) {
+				uxCurrencyUnit = currencies.stream()
+						.filter(cu -> cu.getCode().equals(uiCurrencyUnit.getCode()) && cu.getFractionDigits() == uiCurrencyUnit.getFractionDigits())
+						.findFirst()
+						.orElseGet(() -> CurrencyUnit.from(uiCurrencyUnit.getCode(), uiCurrencyUnit.getFractionDigits(), uiCurrencyUnit.getName(), uiCurrencyUnit.getSymbol()));
+			} else {
+				uxCurrencyUnit = null;
+			}
+			return new CurrencyValue(uxCurrencyUnit, uxAmount);
 		} else {
 			throw new IllegalArgumentException("Unknown value type for CurrencyField: " + value.getClass().getCanonicalName());
 		}
 	}
 
-	@Override
-	protected void doDestroy() {
-		// nothing to do
+	public Optional<CurrencyUnit> getCurrency() {
+		CurrencyValue value = getValue();
+		return value != null ? value.getCurrency() : Optional.empty();
+	}
+
+	public void setCurrency(CurrencyUnit currencyUnit) {
+		CurrencyValue value = getValue();
+		setValue(value != null ? value.withCurrencyUnit(currencyUnit) : new CurrencyValue(currencyUnit, null));
 	}
 
-	public int getPrecision() {
-		return precision;
+	public Optional<BigDecimal> getAmount() {
+		CurrencyValue value = getValue();
+		return value != null ? value.getAmount() : Optional.empty();
 	}
 
-	public boolean isShowCurrencyBeforeAmount() {
-		return showCurrencyBeforeAmount;
+	public void setAmount(BigDecimal amount) {
+		CurrencyValue value = getValue();
+		setValue(value != null ? value.withAmount(amount) : new CurrencyValue(null, amount));
 	}
 
-	public CurrencyField setShowCurrencyBeforeAmount(boolean showCurrencyBeforeAmount) {
-		this.showCurrencyBeforeAmount = showCurrencyBeforeAmount;
-		queueCommandIfRendered(() -> new UiCurrencyField.SetShowCurrencyBeforeAmountCommand(getId(), showCurrencyBeforeAmount));
+	public int getFixedPrecision() {
+		return fixedPrecision;
+	}
+
+	public boolean isCurrencyBeforeAmount() {
+		return currencyBeforeAmount;
+	}
+
+	public CurrencyField setCurrencyBeforeAmount(boolean currencyBeforeAmount) {
+		this.currencyBeforeAmount = currencyBeforeAmount;
+		queueCommandIfRendered(() -> new UiCurrencyField.SetShowCurrencyBeforeAmountCommand(getId(), currencyBeforeAmount));
 		return this;
 	}
 
-	public boolean isShowCurrencySymbol() {
-		return showCurrencySymbol;
+	public boolean isCurrencySymbolsEnabled() {
+		return currencySymbolsEnabled;
 	}
 
-	public CurrencyField setShowCurrencySymbol(boolean showCurrencySymbol) {
-		this.showCurrencySymbol = showCurrencySymbol;
-		queueCommandIfRendered(() -> new UiCurrencyField.SetShowCurrencySymbolCommand(getId(), showCurrencySymbol));
+	public CurrencyField setCurrencySymbolsEnabled(boolean currencySymbolsEnabled) {
+		this.currencySymbolsEnabled = currencySymbolsEnabled;
+		queueCommandIfRendered(() -> new UiCurrencyField.SetShowCurrencySymbolCommand(getId(), currencySymbolsEnabled));
 		return this;
 	}
 
-	public boolean isAlphaKeysQueryForCurrency() {
-		return alphaKeysQueryForCurrency;
+	public boolean isAlphabeticKeysQueryEnabled() {
+		return alphabeticKeysQueryEnabled;
 	}
 
-	public void setPrecision(int precision) {
-		this.precision = precision;
-		reRenderIfRendered();
+	public void setFixedPrecision(int fixedPrecision) {
+		this.fixedPrecision = fixedPrecision;
+		queueCommandIfRendered(() -> new UiCurrencyField.SetFixedPrecisionCommand(getId(), fixedPrecision));
 	}
 
-	public void setAlphaKeysQueryForCurrency(boolean alphaKeysQueryForCurrency) {
-		this.alphaKeysQueryForCurrency = alphaKeysQueryForCurrency;
-		reRenderIfRendered();
+	public void setAlphabeticKeysQueryEnabled(boolean alphabeticKeysQueryEnabled) {
+		boolean changed = alphabeticKeysQueryEnabled != this.alphabeticKeysQueryEnabled;
+		this.alphabeticKeysQueryEnabled = alphabeticKeysQueryEnabled;
+		if (changed) {
+			reRenderIfRendered();
+		}
+	}
+
+	public Locale getLocale() {
+		return locale.toLocale();
+	}
+
+	public ULocale getULocale() {
+		return locale;
+	}
+
+	public void setLocale(Locale locale) {
+		setULocale(ULocale.forLocale(locale));
+	}
+
+	public void setULocale(ULocale locale) {
+		this.locale = locale;
+		setCurrencies(currencies);
+		queueCommandIfRendered(() -> new UiCurrencyField.SetLocaleCommand(getId(), locale.toLanguageTag()));
 	}
 
 	@Override
@@ -165,196 +221,4 @@ public Event<SpecialKey> onSpecialKeyPressed() {
 		return onSpecialKeyPressed;
 	}
 
-	public enum Currency {
-		AED("AED", null, "Dirhams", "United Arab Emirates Dirhams"),
-		AFN("AFN", "؋", "Afghanis", "Afghan Afghanis"),
-		ALL("ALL", "LEK", "Leke", "Albanian Lek"),
-		AMD("AMD", null, "Drams", "Armenian Drams"),
-		ANG("ANG", "ƒ", "Guilders", "Netherlands Antillean Guilders"),
-		AOA("AOA", null, "Kwanza", "Angolan Kwanza"),
-		ARS("ARS", "$", "Pesos", "Argentine Pesos"),
-		AUD("AUD", "$", "Dollars", "Australian Dollars"),
-		AWG("AWG", "ƒ", "Guilders", "Aruban Guilders"),
-		AZN("AZN", "ман", "New Manats", "Azerbaijan New Manats"),
-		BAM("BAM", "KM", "Convertible Marka", "Convertible Marka"),
-		BBD("BBD", "$", "Dollars", "Barbados Dollars"),
-		BDT("BDT", null, "Taka", "Bangladeshi Taka"),
-		BGN("BGN", "лв", "Leva", "Bulgarian Leva"),
-		BHD("BHD", null, "Dinars", "Bahraini Dinars"),
-		BIF("BIF", null, "Francs", "Burundi Francs"),
-		BMD("BMD", "$", "Dollars", "Bermudian Dollars"),
-		BND("BND", "$", "Dollars", "Brunei Dollars"),
-		BOB("BOB", "$b", "Bolivianos", "Bolivianos"),
-		BRL("BRL", "R$", "Real", "Brazilian Real"),
-		BSD("BSD", "$", "Dollars", "Bahamian Dollars"),
-		BTN("BTN", null, "Ngultrum", "Bhutan Ngultrum"),
-		BWP("BWP", "P", "Pulas", "Botswana Pulas"),
-		BYR("BYR", "p.", "Rubles", "Belarussian Rubles"),
-		BZD("BZD", "BZ$", "Dollars", "Belize Dollars"),
-		CAD("CAD", "$", "Dollars", "Canadian Dollars"),
-		CDF("CDF", null, "Franc", "Franc"),
-		CHF("CHF", null, "Switzerland Francs", "Switzerland Francs"),
-		CLP("CLP", "$", "Pesos", "Chilean Pesos"),
-		CNY("CNY", "¥", "Yuan Renminbi", "Yuan Renminbi"),
-		COP("COP", "$", "Pesos", "Colombian Pesos"),
-		CRC("CRC", "₡", "Colones", "Costa Rican Colones"),
-		CUP("CUP", "₱", "Pesos", "Cuban Pesos"),
-		CVE("CVE", null, "Escudos", "Cape Verde Escudos"),
-		CZK("CZK", "Kč", "Koruny", "Czech Koruny"),
-		DJF("DJF", null, "Francs", "Djibouti Francs"),
-		DKK("DKK", "kr", "Kroner", "Danish Kroner"),
-		DOP("DOP", "RD$", "Pesos", "Dominican Pesos"),
-		DZD("DZD", null, "Dinars", "Algerian Dinar"),
-		ECS("ECS", null, "Sucre", "Ecuador Sucre"),
-		EEK("EEK", "kr", "Krooni", "Krooni"),
-		EGP("EGP", "£", "Pounds", "Egyptian Pounds"),
-		ETB("ETB", null, "Ethopia Birr", "Ethopia Birr"),
-		EUR("EUR", "€", "Euro", "Euro"),
-		FJD("FJD", null, "Dollar", "Fiji Dollar"),
-		FKP("FKP", "£", "Pounds", "Falkland Islands Pounds"),
-		GBP("GBP", "£", "Pounds", "Pound Sterling"),
-		GEL("GEL", null, "Lari", "Lari"),
-		GGP("GGP", "£", "Pounds", "Pound Sterling"),
-		GHS("GHS", "¢", "Cedis", "Ghanaian Cedis"),
-		GIP("GIP", "£", "Pounds", "Gibraltar Pounds"),
-		GMD("GMD", null, "Lari", "Gambian Dalasi"),
-		GNF("GNF", null, "Francs", "Guinea Francs"),
-		GTQ("GTQ", "Q", "Quetzales", "Quetzales"),
-		GYD("GYD", null, "Dollars", "Guyana Dollars"),
-		HKD("HKD", "$", "Dollars", "Hong Kong Dollars"),
-		HNL("HNL", "L", "Lempiras", "Honduaran Lempiras"),
-		HRK("HRK", "kn", "Kuna", "Croatian Kuna"),
-		HTG("HTG", null, "Haitian Gourde", "Haitian Gourde"),
-		HUF("HUF", "Ft", "Forint", "Hungarian Forint"),
-		IDR("IDR", "Rp", "Indonesian Rupiahs", "Indonesian Rupiahs"),
-		ILS("ILS", "₪", "New Shekels", "New Shekels"),
-		IMP("IMP", "£", "Pounds", "Pounds"),
-		INR("INR", "₨", "Rupees", "Indian Rupees"),
-		IQD("IQD", null, "Dinars", "Iraqi Dinars"),
-		IRR("IRR", "﷼", "Riais", "Iranian Riais"),
-		ISK("ISK", "kr", "Kronur", "Iceland Kronur"),
-		JEP("JEP", "£", "Pounds", "Pounds"),
-		JMD("JMD", null, "Dollars", "Jamaican Dollars"),
-		JOD("JOD", null, "Dinars", "Jordanian Dinar"),
-		JPY("JPY", "¥", "Yen", "Japanese Yen"),
-		KES("KES", null, "Shillings", "Kenyan Shillings"),
-		KGS("KGS", "лв", "Soms", "Soms"),
-		KHR("KHR", null, "Rieis", "Kampuchean Rieis"),
-		KMF("KMF", null, "Francs", "Comoros Francs"),
-		KPW("KPW", "₩", "Won", "North Korean Won"),
-		KRW("KRW", "₩", "Won", "Korean Won"),
-		KWD("KWD", null, "Dinars", "Kuwaiti Dinars"),
-		KYD("KYD", "$", "Dollars", "Cayman Islands Dollars"),
-		KZT("KZT", "лв", "Tenege", "Kazhakstan Tenege"),
-		LAK("LAK", "₭", "Kips", "Lao Kips"),
-		LBP("LBP", "£", "Pounds", "Lebanese Pounds"),
-		LKR("LKR", "₨", "Rupees", "Sri Lanka Rupees"),
-		LRD("LRD", "$", "Dollars", "Liberian Dollars"),
-		LSL("LSL", null, "Maloti", "Lesotho Maloti"),
-		LTL("LTL", "Lt", "Litai", "Lithuanian Litai"),
-		LVL("LVL", "Ls", "Lati", "Latvian Lati"),
-		LYD("LYD", null, "Dinars", "Libyan Dinars"),
-		MAD("MAD", null, "Dirhams", "Moroccan Dirhams"),
-		MDL("MDL", null, "Lei", "Moldovan Lei"),
-		MKD("MKD", null, "Macedonian Denar", "Macedonian Denar"),
-		MGA("MGA", null, "Ariary", "Ariary"),
-		MMK("MMK", null, "Kyat", "Myanmar Kyat"),
-		MNK("MNK", null, "Kyats", "Kyats"),
-		MNT("MNT", "₮", "Tugriks", "Mongolian Tugriks"),
-		MRO("MRO", null, "Ouguiyas", "Mauritanian Ouguiyas"),
-		MUR("MUR", "₨", "Rupees", "Mauritius Rupees"),
-		MVR("MVR", null, "Rufiyaa", "Maldive Rufiyaa"),
-		MWK("MWK", null, "Kwachas", "Malawi Kwachas"),
-		MXN("MXN", "$", "Pesos", "Mexican Nuevo Pesos"),
-		MYR("MYR", "RM", "Ringgits", "Malaysian Ringgits"),
-		MZN("MZN", "MT", "Meticals", "Mozambique Meticals"),
-		NAD("NAD", "$", "Dollars", "Namibian Dollars"),
-		NGN("NGN", "₦", "Nairas", "Nigerian Nairas"),
-		NIO("NIO", "C$", "Cordobas", "Nicaraguan Cordobas Oro"),
-		NOK("NOK", "kr", "Kroner", "Norwegian Kroner"),
-		NPR("NPR", "₨", "Rupees", "Nepalese Rupees"),
-		NZD("NZD", "$", "New Zealand Dollars", "New Zealand Dollars"),
-		OMR("OMR", "﷼", "Riais", "Riais"),
-		PAB("PAB", "B/.", "Balboa", "Balboa"),
-		PEN("PEN", "S/.", "Nuevos Soles", "Peru Nuevos Soles"),
-		PGK("PGK", null, "Kina", "Kina"),
-		PHP("PHP", "Php", "Pesos", "Phillippines Pesos"),
-		PKR("PKR", "₨", "Rupees", "Pakistani Rupees"),
-		PLN("PLN", "zł", "Zlotych", "Poland Zlotych"),
-		PYG("PYG", "Gs", "Guarani", "Paraguay Guarani"),
-		QAR("QAR", "﷼", "Rials", "Qatar Rials"),
-		RON("RON", "lei", "New Lei", "Romanian New Lei"),
-		RSD("RSD", "Дин.", "Dinars", "Serbia Dinars"),
-		RUB("RUB", "руб", "Rubles", "Russia Rubles"),
-		RWF("RWF", null, "Francs", "Francs"),
-		SAR("SAR", "﷼", "Riyals", "Saudi Arabia Riyals"),
-		SBD("SBD", "$", "Dollars", "Solomon Islands Dollars"),
-		SCR("SCR", "₨", "Rupees", "Seychelles Rupees"),
-		SDG("SDG", null, "Pounds", "Pounds"),
-		SEK("SEK", "kr", "Kronor", "Sweden Kronor"),
-		SGD("SGD", "$", "Dollars", "Singapore Dollars"),
-		SHP("SHP", "£", "Pounds", "Saint Helena Pounds"),
-		SLL("SLL", null, "Leones", "Leones"),
-		SOS("SOS", "S", "Shillings", "Somalia Shillings"),
-		SRD("SRD", "$", "Dollars", "SurifullName Dollars"),
-		STD("STD", null, "Dobras", "Dobras"),
-		SVC("SVC", null, "Salvadoran Colón", "Salvadoran Colón"),
-		SYP("SYP", "£", "Pounds", "Syria Pounds"),
-		SZL("SZL", null, "Emalangeni", "Emalangeni"),
-		THB("THB", "฿", "Baht", "Thaliand Baht"),
-		TJS("TJS", null, "Somoni", "Somoni"),
-		TMM("TMM", null, "Manat", "Manat"),
-		TND("TND", null, "Dinars", "Tunisian Dinars"),
-		TOP("TOP", null, "Pa'anga", "Pa'anga"),
-		TRY("TRY", "TL", "Lira", "Turkey Lira"),
-		TTD("TTD", "$", "Dollars", "Trinidad and Tobago Dollars"),
-		TVD("TVD", null, "Tuvalu Dollars", "Tuvalu Dollars"),
-		TWD("TWD", "NT$", "New Dollars", "Taiwan New Dollars"),
-		TZS("TZS", null, "Shillings", "Shillings"),
-		UAH("UAH", "₴", "Hryvnia", "Ukraine Hryvnia"),
-		UGX("UGX", null, "Shillings", "Shillings"),
-		USD("USD", "$", "Dollars", "United States Dollars"),
-		UYU("UYU", "$U", "Pesos", "Uruguay Pesos"),
-		UZS("UZS", "лв", "Sums", "Uzbekistan Sums"),
-		VEF("VEF", "Bs", "Bolivares Fuertes", "Venezuela Bolivares Fuertes"),
-		VND("VND", "₫", "Dong", "Viet Nam Dong"),
-		XAF("XAF", null, "Communauté Financière Africaine Francs", "Communauté Financière Africaine Francs"),
-		XCD("XCD", "$", "East Caribbean Dollars", "East Caribbean Dollars"),
-		XOF("XOF", null, "Communauté Financière Africaine Francs", "Communauté Financière Africaine Francs"),
-		XPF("XPF", null, "Comptoirs Français du Pacifique Francs", "Comptoirs Français du Pacifique Francs"),
-		YER("YER", "﷼", "Rials", "Yemen Rials"),
-		ZAR("ZAR", "R", "Rand", "South Africa Rand"),
-		ZMK("ZMK", null, "Kwacha", "Kwacha"),
-		ZWD("ZWD", "Z$", "Zimbabwe Dollars", "Zimbabwe Dollars");
-
-
-		private final String isoCode;
-		private final String symbol;
-		private final String name;
-		private final String fullName;
-
-		Currency(String isoCode, String symbol, String name, String fullName) {
-			this.isoCode = isoCode;
-			this.symbol = symbol;
-			this.name = name;
-			this.fullName = fullName;
-		}
-
-		public String getIsoCode() {
-			return isoCode;
-		}
-
-		public String getSymbol() {
-			return symbol;
-		}
-
-		public String getName() {
-			return name;
-		}
-
-		public String getFullName() {
-			return fullName;
-		}
-	}
-
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/multicurrency/CurrencyValue.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/multicurrency/CurrencyValue.java
deleted file mode 100644
index 0638aae64..000000000
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/multicurrency/CurrencyValue.java
+++ /dev/null
@@ -1,59 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.ux.component.field.multicurrency;
-
-import org.teamapps.dto.UiCurrencyValue;
-
-public class CurrencyValue {
-
-
-	protected long value;
-	protected String currencyCode;
-
-	public CurrencyValue() {
-		// default constructor for Jackson
-	}
-
-	public CurrencyValue(long value, String currencyCode) {
-		this.value = value;
-		this.currencyCode = currencyCode;
-	}
-
-	@SuppressWarnings("unchecked")
-	public String toString() {
-		return new StringBuilder(getClass().getSimpleName()).append(": ")
-				.append("value=" + value).append(", ")
-				.append("currencyCode=" + currencyCode)
-				.toString();
-	}
-
-	public long getValue() {
-		return value;
-	}
-
-	public String getCurrencyCode() {
-		return currencyCode;
-	}
-
-
-	public UiCurrencyValue toUiCurrencyValue() {
-		return new UiCurrencyValue(value, currencyCode);
-	}
-}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/multicurrency/value/CurrencyCurrencyUnit.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/multicurrency/value/CurrencyCurrencyUnit.java
new file mode 100644
index 000000000..8c363cbaf
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/multicurrency/value/CurrencyCurrencyUnit.java
@@ -0,0 +1,58 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.field.multicurrency.value;
+
+import java.util.Currency;
+import java.util.Locale;
+
+public class CurrencyCurrencyUnit implements CurrencyUnit {
+
+	private final Currency currency;
+
+	public CurrencyCurrencyUnit(Currency currency) {
+		this.currency = currency;
+	}
+
+	@Override
+	public String getCode() {
+		return currency.getCurrencyCode();
+	}
+
+	@Override
+	public int getFractionDigits() {
+		return currency.getDefaultFractionDigits();
+	}
+
+	@Override
+	public String getSymbol(Locale locale) {
+		String symbol = currency.getSymbol(locale);
+		return !symbol.equals(currency.getCurrencyCode()) ? symbol : null;
+	}
+
+	@Override
+	public String getName(Locale locale) {
+		return currency.getDisplayName(locale);
+	}
+
+	@Override
+	public String toString() {
+		return currency.getCurrencyCode();
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/multicurrency/value/CurrencyUnit.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/multicurrency/value/CurrencyUnit.java
new file mode 100644
index 000000000..06f010a89
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/multicurrency/value/CurrencyUnit.java
@@ -0,0 +1,120 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.field.multicurrency.value;
+
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+import org.teamapps.dto.UiCurrencyUnit;
+
+import java.lang.invoke.MethodHandles;
+import java.util.*;
+import java.util.function.Function;
+import java.util.stream.Collectors;
+
+public interface CurrencyUnit {
+
+	Logger LOGGER = LoggerFactory.getLogger(MethodHandles.lookup().lookupClass());
+
+	static PlainCurrencyUnit forCode(String code) {
+		return new PlainCurrencyUnit(code, null, null, null);
+	}
+
+	static PlainCurrencyUnit from(String code, int fractionDigits, String name, String symbol) {
+		return new PlainCurrencyUnit(code, fractionDigits, locale -> name, locale -> symbol);
+	}
+
+	static PlainCurrencyUnit from(String code, Integer fractionDigits, Function<Locale, String> nameByLocale, Function<Locale, String> symbolByLocale) {
+		return new PlainCurrencyUnit(code, fractionDigits, nameByLocale, symbolByLocale);
+	}
+
+	static CurrencyUnit fromCurrency(Currency currency) {
+		return new CurrencyCurrencyUnit(currency);
+	}
+
+	static CurrencyUnit fromJsrCurrencyUnit(javax.money.CurrencyUnit currencyUnit) {
+		return new Jsr354CurrencyUnit(currencyUnit);
+	}
+
+	static List<CurrencyUnit> getAllAvailableFromJdk() {
+		return Currency.getAvailableCurrencies().stream()
+				.sorted(Comparator.comparing(currency -> currency.getCurrencyCode()))
+				.map(c -> fromCurrency(c))
+				.collect(Collectors.toList());
+	}
+
+	// ==================================
+
+	String getCode();
+
+	default int getFractionDigits() {
+		return findCurrency()
+				.map(Currency::getDefaultFractionDigits)
+				.orElse(2);
+	}
+
+	default String getSymbol() {
+		return getSymbol(Locale.getDefault(Locale.Category.DISPLAY));
+	}
+
+	default String getSymbol(Locale locale) {
+		return getCurrencySymbol(locale);
+	}
+
+	default String getName() {
+		return getName(Locale.getDefault(Locale.Category.DISPLAY));
+	}
+
+	default String getName(Locale locale) {
+		return getCurrencyName(locale);
+	}
+
+	default UiCurrencyUnit toUiCurrencyUnit(Locale locale) {
+		UiCurrencyUnit uiCurrencyUnit = new UiCurrencyUnit();
+		uiCurrencyUnit.setCode(getCode());
+		uiCurrencyUnit.setFractionDigits(getFractionDigits());
+		uiCurrencyUnit.setName(getName(locale));
+		uiCurrencyUnit.setSymbol(getSymbol(locale));
+		return uiCurrencyUnit;
+	}
+
+	// =================================
+
+	private String getCurrencySymbol(Locale locale) {
+		return findCurrency()
+				.map(c -> c.getSymbol(locale))
+				.orElse(getCode());
+	}
+
+	private String getCurrencyName(Locale locale) {
+		return findCurrency()
+				.map(c -> c.getDisplayName(locale))
+				.orElse(getCode());
+	}
+
+	private Optional<Currency> findCurrency() {
+		try {
+			return Optional.of(Currency.getInstance(getCode()));
+		} catch (Exception e) {
+			LOGGER.warn("Cannot get Currency instance for code {}", getCode());
+			return Optional.empty();
+		}
+	}
+
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/multicurrency/value/CurrencyValue.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/multicurrency/value/CurrencyValue.java
new file mode 100644
index 000000000..08af1cd21
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/multicurrency/value/CurrencyValue.java
@@ -0,0 +1,91 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.field.multicurrency.value;
+
+import org.teamapps.dto.UiCurrencyValue;
+
+import java.math.BigDecimal;
+import java.util.Locale;
+import java.util.Objects;
+import java.util.Optional;
+
+public class CurrencyValue {
+
+	/**
+	 * May be null!
+	 */
+	private final CurrencyUnit currency;
+
+	/**
+	 * May be null!
+	 */
+	private final BigDecimal amount;
+
+	public CurrencyValue(CurrencyUnit currency, BigDecimal amount) {
+		this.currency = currency;
+		this.amount = amount;
+	}
+
+	public Optional<CurrencyUnit> getCurrency() {
+		return Optional.ofNullable(currency);
+	}
+
+	public Optional<BigDecimal> getAmount() {
+		return Optional.ofNullable(amount);
+	}
+
+	public Optional<Long> getAmountAsLong(int pointRightShift) {
+		return getAmount()
+				.map(amount -> amount.movePointRight(pointRightShift).longValue());
+	}
+
+	public CurrencyValue withAmount(BigDecimal amount) {
+		return new CurrencyValue(currency, amount);
+	}
+
+	public CurrencyValue withCurrencyUnit(CurrencyUnit currencyUnit) {
+		return new CurrencyValue(currencyUnit, amount);
+	}
+
+	public UiCurrencyValue toUiCurrencyValue(Locale locale) {
+		return new UiCurrencyValue(currency != null ? currency.toUiCurrencyUnit(locale) : null, amount != null ? amount.toString() : null);
+	}
+
+	@Override
+	public String toString() {
+		return "CurrencyValue{" +
+				"currency=" + currency +
+				", amount=" + amount +
+				'}';
+	}
+
+	@Override
+	public boolean equals(Object o) {
+		if (this == o) return true;
+		if (o == null || getClass() != o.getClass()) return false;
+		CurrencyValue that = (CurrencyValue) o;
+		return Objects.equals(currency, that.currency) && Objects.equals(amount, that.amount);
+	}
+
+	@Override
+	public int hashCode() {
+		return Objects.hash(currency, amount);
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/multicurrency/value/Jsr354CurrencyUnit.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/multicurrency/value/Jsr354CurrencyUnit.java
new file mode 100644
index 000000000..ce975ca48
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/multicurrency/value/Jsr354CurrencyUnit.java
@@ -0,0 +1,46 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.field.multicurrency.value;
+
+import javax.money.CurrencyUnit;
+
+public class Jsr354CurrencyUnit implements org.teamapps.ux.component.field.multicurrency.value.CurrencyUnit {
+
+	private final CurrencyUnit currencyUnit;
+
+	public Jsr354CurrencyUnit(CurrencyUnit currencyUnit) {
+		this.currencyUnit = currencyUnit;
+	}
+
+	@Override
+	public String getCode() {
+		return currencyUnit.getCurrencyCode();
+	}
+
+	@Override
+	public int getFractionDigits() {
+		return currencyUnit.getDefaultFractionDigits();
+	}
+
+	@Override
+	public String toString() {
+		return currencyUnit.getCurrencyCode();
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/multicurrency/value/PlainCurrencyUnit.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/multicurrency/value/PlainCurrencyUnit.java
new file mode 100644
index 000000000..3094dbdf4
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/multicurrency/value/PlainCurrencyUnit.java
@@ -0,0 +1,63 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.field.multicurrency.value;
+
+import java.util.Locale;
+import java.util.function.Function;
+
+public class PlainCurrencyUnit implements CurrencyUnit {
+
+	private final String code;
+	private final Integer fractionDigits;
+	private final Function<Locale, String> nameByLocale;
+	private final Function<Locale, String> symbolByLocale;
+
+	public PlainCurrencyUnit(String code, Integer fractionDigits, Function<Locale, String> nameByLocale, Function<Locale, String> symbolByLocale) {
+		this.code = code;
+		this.fractionDigits = fractionDigits;
+		this.nameByLocale = nameByLocale;
+		this.symbolByLocale = symbolByLocale;
+	}
+
+	@Override
+	public String getCode() {
+		return code;
+	}
+
+	@Override
+	public int getFractionDigits() {
+		return fractionDigits != null ? fractionDigits : CurrencyUnit.super.getFractionDigits();
+	}
+
+	@Override
+	public String getName(Locale locale) {
+		return nameByLocale != null ? nameByLocale.apply(locale) : CurrencyUnit.super.getName(locale);
+	}
+
+	@Override
+	public String getSymbol(Locale locale) {
+		return symbolByLocale != null ? symbolByLocale.apply(locale) : CurrencyUnit.super.getSymbol(locale);
+	}
+
+	@Override
+	public String toString() {
+		return code;
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/richtext/ImageUploadFailedEventData.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/richtext/ImageUploadFailedEventData.java
index 0281f4ba5..c9fdc8649 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/richtext/ImageUploadFailedEventData.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/richtext/ImageUploadFailedEventData.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/richtext/ImageUploadStartedEventData.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/richtext/ImageUploadStartedEventData.java
index 595708d9b..785648d83 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/richtext/ImageUploadStartedEventData.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/richtext/ImageUploadStartedEventData.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/richtext/ImageUploadSuccessfulEventData.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/richtext/ImageUploadSuccessfulEventData.java
index 2988aefdc..6a05040ba 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/richtext/ImageUploadSuccessfulEventData.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/richtext/ImageUploadSuccessfulEventData.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/richtext/ImageUploadTooLargeEventData.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/richtext/ImageUploadTooLargeEventData.java
index fd9fda75c..a0a2207b1 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/richtext/ImageUploadTooLargeEventData.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/richtext/ImageUploadTooLargeEventData.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/richtext/RichTextEditor.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/richtext/RichTextEditor.java
index 0a7ff5149..b026c0f41 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/richtext/RichTextEditor.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/richtext/RichTextEditor.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,20 +19,24 @@
  */
 package org.teamapps.ux.component.field.richtext;
 
+import com.ibm.icu.util.ULocale;
 import org.teamapps.dto.UiEvent;
 import org.teamapps.dto.UiField;
 import org.teamapps.dto.UiRichTextEditor;
+import org.teamapps.dto.UiTextInputHandlingField;
 import org.teamapps.event.Event;
 import org.teamapps.ux.component.field.AbstractField;
 import org.teamapps.ux.component.field.SpecialKey;
-import org.teamapps.ux.component.field.TextInputHandlingField;
 import org.teamapps.ux.component.field.upload.UploadedFile;
 import org.teamapps.ux.component.field.upload.UploadedFileAccessException;
 
 import java.io.FileInputStream;
 import java.io.FileNotFoundException;
+import java.util.Locale;
+import java.util.Objects;
+import java.util.function.Consumer;
 
-public class RichTextEditor extends AbstractField<String> implements TextInputHandlingField {
+public class RichTextEditor extends AbstractField<String> {
 
 	public final Event<String> onTextInput = new Event<>();
 	public final Event<SpecialKey> onSpecialKeyPressed = new Event<>();
@@ -46,6 +50,9 @@ public class RichTextEditor extends AbstractField<String> implements TextInputHa
 	private int maxHeight;
 	private String uploadUrl = "/upload";
 	private int maxImageFileSizeInBytes = 5000000;
+	private boolean imageUploadEnabled = false;
+	private boolean printPluginEnabled = false;
+	private ULocale locale = getSessionContext().getULocale();
 
 	private UploadedFileToUrlConverter uploadedFileToUrlConverter = (file) -> getSessionContext().createFileLink(getSessionContext().getUploadedFileByUuid(file.getUuid()));
 
@@ -55,20 +62,22 @@ public RichTextEditor() {
 
 	@Override
 	public UiField createUiComponent() {
-		UiRichTextEditor field = new UiRichTextEditor(getId());
+		UiRichTextEditor field = new UiRichTextEditor();
 		mapAbstractFieldAttributesToUiField(field);
 		field.setToolbarVisibilityMode(this.toolbarVisibilityMode.toToolbarVisibilityMode());
+		field.setImageUploadEnabled(imageUploadEnabled);
 		field.setUploadUrl(uploadUrl);
 		field.setMaxImageFileSizeInBytes(maxImageFileSizeInBytes);
 		field.setMinHeight(minHeight);
 		field.setMaxHeight(maxHeight);
+		field.setLocale(locale.toLanguageTag());
+		field.setPrintPluginEnabled(printPluginEnabled);
 		return field;
 	}
 
 	@Override
 	public void handleUiEvent(UiEvent event) {
 		super.handleUiEvent(event);
-		if (!defaultHandleTextInputEvent(event)) {
 			switch (event.getUiEventType()) {
 				case UI_RICH_TEXT_EDITOR_IMAGE_UPLOAD_TOO_LARGE:
 					UiRichTextEditor.ImageUploadTooLargeEvent tooLargeEvent = (UiRichTextEditor.ImageUploadTooLargeEvent) event;
@@ -101,13 +110,17 @@ public void handleUiEvent(UiEvent event) {
 					onImageUploadFailed.fire(new ImageUploadFailedEventData(uploadFailedEvent.getName(), uploadFailedEvent.getMimeType(), uploadFailedEvent.getSizeInBytes(), uploadFailedEvent
 							.getIncompleteUploadsCount()));
 					break;
+				case UI_TEXT_INPUT_HANDLING_FIELD_TEXT_INPUT:
+					if (!this.isValueLocked()) { // Check if this is a stale event since the server already set a new value, but this event is from before applying it on the client side!!
+						UiTextInputHandlingField.TextInputEvent keyStrokeEvent = (UiTextInputHandlingField.TextInputEvent) event;
+						onTextInput.fire(keyStrokeEvent.getEnteredString());
+						break;
+					}
+				case UI_TEXT_INPUT_HANDLING_FIELD_SPECIAL_KEY_PRESSED:
+					UiTextInputHandlingField.SpecialKeyPressedEvent specialKeyPressedEvent = (UiTextInputHandlingField.SpecialKeyPressedEvent) event;
+					onSpecialKeyPressed.fire(SpecialKey.valueOf(specialKeyPressedEvent.getKey().name()));
+					break;
 			}
-		}
-	}
-
-	@Override
-	protected void doDestroy() {
-		// nothing to do
 	}
 
 	public ToolbarVisibilityMode getToolbarVisibilityMode() {
@@ -170,13 +183,50 @@ public void setFixedHeight(int height) {
 		queueCommandIfRendered(() -> new UiRichTextEditor.SetMaxHeightCommand(getId(), height));
 	}
 
-	@Override
-	public Event<String> onTextInput() {
-		return onTextInput;
+	public Locale getLocale() {
+		return locale.toLocale();
 	}
 
-	@Override
-	public Event<SpecialKey> onSpecialKeyPressed() {
-		return onSpecialKeyPressed;
+	public ULocale getULocale() {
+		return locale;
+	}
+
+	public void setLocale(Locale locale) {
+		setULocale(ULocale.forLocale(locale));
+	}
+
+	public void setULocale(ULocale locale) {
+		boolean changed = !Objects.equals(locale, this.locale);
+		this.locale = locale;
+		if (changed) {
+			reRenderIfRendered();
+		}
+	}
+
+	public boolean isImageUploadEnabled() {
+		return imageUploadEnabled;
+	}
+
+	public void setImageUploadEnabled(boolean imageUploadEnabled) {
+		boolean changed = imageUploadEnabled != this.imageUploadEnabled;
+		this.imageUploadEnabled = imageUploadEnabled;
+		if (changed) {
+			reRenderIfRendered();
+		}
+	}
+
+	/**
+	 * Commits and returns (via callback) the transient value from the client side.
+	 */
+	public void commitTransientValue(Consumer<String> callback) {
+		if (isRendered()) {
+			getSessionContext().queueCommand(new UiRichTextEditor.CommitTransientValueCommand(getId()), value -> callback.accept(convertUiValueToUxValue(value)));
+		} else {
+			callback.accept(getValue());
+		}
+	}
+
+	public void setPrintPluginEnabled(boolean printPluginEnabled) {
+		this.printPluginEnabled = printPluginEnabled;
 	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/richtext/ToolbarVisibilityMode.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/richtext/ToolbarVisibilityMode.java
index c4a9ed9b7..bf62385f6 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/richtext/ToolbarVisibilityMode.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/richtext/ToolbarVisibilityMode.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/richtext/UploadedFileToUrlConverter.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/richtext/UploadedFileToUrlConverter.java
index bd1dfc52d..ea95e37c9 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/richtext/UploadedFileToUrlConverter.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/richtext/UploadedFileToUrlConverter.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/textcolormarker/IllegalTextColorMarkerException.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/textcolormarker/IllegalTextColorMarkerException.java
new file mode 100644
index 000000000..aac4aa0a1
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/textcolormarker/IllegalTextColorMarkerException.java
@@ -0,0 +1,39 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.field.textcolormarker;
+
+public class IllegalTextColorMarkerException extends RuntimeException {
+
+    public IllegalTextColorMarkerException(String message) {
+        super(message);
+    }
+
+    public IllegalTextColorMarkerException(String message, Throwable cause) {
+        super(message, cause);
+    }
+
+    public IllegalTextColorMarkerException(Throwable cause) {
+        super(cause);
+    }
+
+    public IllegalTextColorMarkerException(String message, Throwable cause, boolean enableSuppression, boolean writableStackTrace) {
+        super(message, cause, enableSuppression, writableStackTrace);
+    }
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/textcolormarker/TextColorMarker.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/textcolormarker/TextColorMarker.java
new file mode 100644
index 000000000..7d2410def
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/textcolormarker/TextColorMarker.java
@@ -0,0 +1,30 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.field.textcolormarker;
+
+import org.teamapps.dto.UiTextColorMarkerFieldMarker;
+
+public record TextColorMarker(int markerDefinitionId, int start, int end) {
+
+	public UiTextColorMarkerFieldMarker toUiTextColorMarkerFieldMarker() {
+        return new UiTextColorMarkerFieldMarker(markerDefinitionId, start, end);
+	}
+
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/textcolormarker/TextColorMarkerDefinition.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/textcolormarker/TextColorMarkerDefinition.java
new file mode 100644
index 000000000..44aee8127
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/textcolormarker/TextColorMarkerDefinition.java
@@ -0,0 +1,40 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.field.textcolormarker;
+
+import org.teamapps.common.format.Color;
+import org.teamapps.dto.UiTextColorMarkerFieldMarkerDefinition;
+
+public record TextColorMarkerDefinition(
+		int id,
+		Color borderColor,
+		Color backgroundColor,
+		String hint
+) {
+
+	public UiTextColorMarkerFieldMarkerDefinition toUiTextColorMarkerFieldMarkerDefinition() {
+		UiTextColorMarkerFieldMarkerDefinition ui = new UiTextColorMarkerFieldMarkerDefinition(id);
+		ui.setBorderColor(borderColor == null ? null : borderColor.toHtmlColorString());
+		ui.setBackgroundColor(backgroundColor == null ? null : backgroundColor.toHtmlColorString());
+		ui.setHint(hint);
+		return ui;
+	}
+
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/textcolormarker/TextColorMarkerField.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/textcolormarker/TextColorMarkerField.java
new file mode 100644
index 000000000..21f270f4b
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/textcolormarker/TextColorMarkerField.java
@@ -0,0 +1,195 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.field.textcolormarker;
+
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+import org.teamapps.dto.*;
+import org.teamapps.event.Event;
+import org.teamapps.ux.component.field.AbstractField;
+import org.teamapps.ux.component.field.FieldEditingMode;
+
+import java.util.ArrayList;
+import java.util.Comparator;
+import java.util.List;
+
+public class TextColorMarkerField extends AbstractField<TextColorMarkerFieldValue> {
+	private static final Logger LOGGER = LoggerFactory.getLogger(TextColorMarkerField.class);
+
+	static final TextColorMarkerFieldValue EMPTY_VALUE = new TextColorMarkerFieldValue("", List.of());
+
+	private List<TextColorMarkerDefinition> markerDefinitions = List.of();
+	private boolean toolbarEnabled = true;
+	private TextSelectionData currentSelection;
+	private TextSelectionData lastSelection;
+
+	public final Event<TextSelectionData> onTextSelected = new Event<>();
+
+	@Override
+	public UiTextColorMarkerField createUiComponent() {
+		UiTextColorMarkerField ui = new UiTextColorMarkerField();
+		mapAbstractFieldAttributesToUiField(ui);
+		ui.setToolbarEnabled(toolbarEnabled);
+		ui.setMarkerDefinitions(createUiMarkerDefinitions(markerDefinitions));
+		return ui;
+	}
+
+	private static List<UiTextColorMarkerFieldMarkerDefinition> createUiMarkerDefinitions(List<TextColorMarkerDefinition> markerDefinitions) {
+		return markerDefinitions.stream()
+				.map(TextColorMarkerDefinition::toUiTextColorMarkerFieldMarkerDefinition)
+				.toList();
+	}
+
+	public List<TextColorMarkerDefinition> getMarkerDefinitions() {
+		return markerDefinitions;
+	}
+
+	/**
+	 * @param markerDefinitions list of possible markers for this field
+	 * @param value the field text and its markers
+	 * @throws IllegalTextColorMarkerException if no matching definition was found
+	 */
+	public void setMarkerDefinitions(List<TextColorMarkerDefinition> markerDefinitions,
+									 TextColorMarkerFieldValue value) {
+		this.markerDefinitions = markerDefinitions == null ? List.of() : markerDefinitions;
+		List<UiTextColorMarkerFieldMarkerDefinition> uiMarkerDefinitions = createUiMarkerDefinitions(this.markerDefinitions);
+		UiTextColorMarkerFieldValue uiValue = value != null ? value.toUiTextColorMarkerFieldValue() : null;
+		queueCommandIfRendered(() -> new UiTextColorMarkerField.SetMarkerDefinitionsCommand(getId(), uiMarkerDefinitions, uiValue));
+		setValue(value);
+	}
+
+	/**
+	 * @param markerDefinitions list of possible markers for this field
+	 */
+	public void setMarkerDefinitions(List<TextColorMarkerDefinition> markerDefinitions) {
+		setMarkerDefinitions(markerDefinitions, EMPTY_VALUE);
+	}
+
+	/**
+	 * @param markerDefinitionId reference for the marker definition
+	 * @param start text start position of the marker
+	 * @param end text end position of the marker
+	 * @throws IllegalTextColorMarkerException if no matching definition was found
+	 */
+	public void setMarker(int markerDefinitionId, int start, int end) {
+		TextColorMarker marker = new TextColorMarker(markerDefinitionId, start, end);
+		validateMarker(marker);
+
+		TextColorMarkerFieldValue val = new TextColorMarkerFieldValue(getValue().text(), new ArrayList<>(getValue().markers()));
+		val.markers().removeIf(m -> m.markerDefinitionId() == markerDefinitionId);
+		val.markers().add(marker);
+		val.markers().sort(Comparator.comparingInt(TextColorMarker::markerDefinitionId)); // sort by ID to match the order of the UI markers
+		setValue(val);
+	}
+
+	private TextSelectionData setCurrentSelection(TextSelectionData selection) {
+		lastSelection = currentSelection;
+		return currentSelection = selection;
+	}
+
+	public TextSelectionData getCurrentSelection() {
+		return currentSelection;
+	}
+
+	public TextSelectionData getLastSelection() {
+		return lastSelection;
+	}
+
+	public boolean isToolbarEnabled() {
+		return toolbarEnabled;
+	}
+
+	public void setToolbarEnabled(boolean toolbarEnabled) {
+		this.toolbarEnabled = toolbarEnabled;
+		queueCommandIfRendered(() -> new UiTextColorMarkerField.SetToolbarEnabledCommand(getId(), toolbarEnabled));
+	}
+
+	/**
+	 * @param value text/markers to be set
+	 * @throws IllegalTextColorMarkerException if markers are not valid
+	 */
+	@Override
+	public void setValue(TextColorMarkerFieldValue value) {
+		validateMarkers(value);
+		super.setValue(value);
+	}
+
+	/**
+	 * @param value to validate its markers
+	 * @throws IllegalTextColorMarkerException if markers are not valid
+	 */
+	private void validateMarkers(TextColorMarkerFieldValue value) {
+		if (value != null && value.markers() != null) {
+			value.markers().forEach(this::validateMarker);
+		}
+	}
+
+	/**
+	 * @param marker to be validated
+	 * @throws IllegalTextColorMarkerException if no matching definition was found for the marker
+	 */
+	private void validateMarker(TextColorMarker marker) {
+		if (marker == null) {
+			throw new IllegalTextColorMarkerException("Marker must not be null");
+		}
+		if (markerDefinitions.stream().noneMatch(def -> def.id() == marker.markerDefinitionId())) {
+			throw new IllegalTextColorMarkerException("Marker definition ID must exist: " + marker.markerDefinitionId());
+		}
+	}
+
+	@Override
+	public void handleUiEvent(UiEvent event) {
+		switch (event.getUiEventType()) {
+			case UI_TEXT_COLOR_MARKER_FIELD_TEXT_SELECTED:
+				UiTextColorMarkerField.TextSelectedEvent textSelectedEvent = (UiTextColorMarkerField.TextSelectedEvent) event;
+				if (textSelectedEvent.getEnd() == 0) { // start == end == 0
+					setCurrentSelection(null); // selection was removed
+				} else if (getEditingMode() != FieldEditingMode.DISABLED) {
+					onTextSelected.fire(setCurrentSelection(new TextSelectionData(textSelectedEvent.getStart(), textSelectedEvent.getEnd())));
+				}
+				break;
+			case UI_FIELD_VALUE_CHANGED:
+				if (getEditingMode() != FieldEditingMode.DISABLED) {
+					applyValueFromUi(((UiField.ValueChangedEvent) event).getValue());
+					validate();
+				} else {
+					LOGGER.warn("Got valueChanged event from disabled field {} {}", this.getClass().getSimpleName(), getDebuggingId());
+				}
+				break;
+			default:
+				super.handleUiEvent(event);
+		}
+	}
+
+	@Override
+	public TextColorMarkerFieldValue convertUiValueToUxValue(Object value) {
+		return value == null ? null : new TextColorMarkerFieldValue(
+				((UiTextColorMarkerFieldValue) value).getText(),
+				((UiTextColorMarkerFieldValue) value).getMarkers().stream().map(
+						m -> new TextColorMarker(m.getMarkerDefinitionId(), m.getStart(), m.getEnd())
+				).toList()
+		);
+	}
+
+	@Override
+	public Object convertUxValueToUiValue(TextColorMarkerFieldValue value) {
+		return value == null ? null : value.toUiTextColorMarkerFieldValue();
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/textcolormarker/TextColorMarkerFieldValue.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/textcolormarker/TextColorMarkerFieldValue.java
new file mode 100644
index 000000000..3882b3022
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/textcolormarker/TextColorMarkerFieldValue.java
@@ -0,0 +1,39 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.field.textcolormarker;
+
+import org.teamapps.dto.UiTextColorMarkerFieldMarker;
+import org.teamapps.dto.UiTextColorMarkerFieldValue;
+
+import java.util.List;
+
+public record TextColorMarkerFieldValue(String text,
+										List<TextColorMarker> markers) {
+	public TextColorMarkerFieldValue(String text) {
+		this(text, List.of());
+	}
+
+	public UiTextColorMarkerFieldValue toUiTextColorMarkerFieldValue() {
+		List<UiTextColorMarkerFieldMarker> markers = this.markers == null ? null : this.markers.stream()
+				.map(TextColorMarker::toUiTextColorMarkerFieldMarker)
+				.toList();
+		return new UiTextColorMarkerFieldValue(text, markers);
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/textcolormarker/TextSelectionData.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/textcolormarker/TextSelectionData.java
new file mode 100644
index 000000000..a98711e6c
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/textcolormarker/TextSelectionData.java
@@ -0,0 +1,23 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.field.textcolormarker;
+
+public record TextSelectionData(int start, int end) {
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/upload/FileField.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/upload/FileField.java
index b4ebb0273..7657e087b 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/upload/FileField.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/upload/FileField.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -21,6 +21,7 @@
 
 import org.teamapps.data.extract.BeanPropertyExtractor;
 import org.teamapps.data.extract.PropertyExtractor;
+import org.teamapps.data.extract.PropertyProvider;
 import org.teamapps.dto.UiEvent;
 import org.teamapps.dto.UiField;
 import org.teamapps.dto.UiFileField;
@@ -28,12 +29,14 @@
 import org.teamapps.event.Event;
 import org.teamapps.formatter.FileSizeFormatter;
 import org.teamapps.icon.material.MaterialIcon;
-import org.teamapps.ux.cache.CacheManipulationHandle;
-import org.teamapps.ux.cache.ClientRecordCache;
+import org.teamapps.ux.cache.record.legacy.CacheManipulationHandle;
+import org.teamapps.ux.cache.record.legacy.ClientRecordCache;
 import org.teamapps.ux.component.field.AbstractField;
 import org.teamapps.ux.component.template.BaseTemplate;
 import org.teamapps.ux.component.template.BaseTemplateRecord;
 import org.teamapps.ux.component.template.Template;
+import org.teamapps.ux.i18n.TeamAppsDictionary;
+import org.teamapps.ux.icon.TeamAppsIconBundle;
 
 import java.io.FileInputStream;
 import java.io.FileNotFoundException;
@@ -57,17 +60,23 @@ public class FileField<RECORD> extends AbstractField<List<RECORD>> {
 	private FileFieldDisplayType displayType = FileFieldDisplayType.FLOATING;
 	private boolean showEntriesAsButtonsOnHover = false;
 	private int maxFiles = Integer.MAX_VALUE;
+	/**
+	 * List of "unique file type specifiers".
+	 * Examples: ".png", "image/png", "image/*"
+	 * See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept#unique_file_type_specifiers
+	 */
+	private List<String> acceptedFileTypes = List.of();
 
 	private long maxBytesPerFile = 10_000_000; // There is also a hard limitation! (see application.properties)
 	private String uploadUrl = "/upload"; // May point anywhere.
-	private Template uploadButtonTemplate = BaseTemplate.FORM_BUTTON;
-	private Object uploadButtonData = new BaseTemplateRecord(MaterialIcon.BACKUP, getSessionContext().getLocalized("ux.fileField.upload_verb"));
-	private PropertyExtractor uploadButtonPropertyExtractor = new BeanPropertyExtractor();
+	private Template uploadButtonTemplate = BaseTemplate.BUTTON;
+	private Object uploadButtonData = new BaseTemplateRecord(getSessionContext().getIcon(TeamAppsIconBundle.UPLOAD.getKey()), getSessionContext().getLocalized(TeamAppsDictionary.UPLOAD.getKey()));
+	private PropertyProvider uploadButtonPropertyProvider = new BeanPropertyExtractor<>();
 
 	private final UploadedFileToRecordConverter<RECORD> uploadedFileToRecordConverter;
 	private Template fileItemTemplate = BaseTemplate.FILE_ITEM_FLOATING;
-	private PropertyExtractor<RECORD> fileItemPropertyExtractor = new BeanPropertyExtractor<>();
-	private ClientRecordCache<RECORD, UiIdentifiableClientRecord> recordCache = new ClientRecordCache<>(this::createUiIdentifiableClientRecord);
+	private PropertyProvider<RECORD> fileItemPropertyProvider = new BeanPropertyExtractor<>();
+	private final ClientRecordCache<RECORD, UiIdentifiableClientRecord> recordCache = new ClientRecordCache<>(this::createUiIdentifiableClientRecord);
 
 	public FileField(UploadedFileToRecordConverter<RECORD> uploadedFileToRecordConverter) {
 		super();
@@ -80,25 +89,42 @@ public static FileField<BaseTemplateRecord<UploadedFile>> create() {
 
 	@Override
 	public UiField createUiComponent() {
-		Map uploadButtonData = uploadButtonPropertyExtractor.getValues(this.uploadButtonData, uploadButtonTemplate.getDataKeys());
-		UiFileField uiField = new UiFileField(getId(), fileItemTemplate.createUiTemplate(), uploadButtonTemplate.createUiTemplate(), uploadButtonData);
+		Map uploadButtonData = uploadButtonPropertyProvider.getValues(this.uploadButtonData, uploadButtonTemplate.getPropertyNames());
+		UiFileField uiField = new UiFileField(fileItemTemplate.createUiTemplate(), uploadButtonTemplate.createUiTemplate(), uploadButtonData);
 		mapAbstractFieldAttributesToUiField(uiField);
 		uiField.setMaxBytesPerFile(maxBytesPerFile);
 		uiField.setUploadUrl(uploadUrl);
 
-		uiField.setFileTooLargeMessage(getSessionContext().getLocalized("ux.fileField.fileTooLarge_short", FileSizeFormatter.humanReadableByteCount(maxBytesPerFile, true, 1)));
-		uiField.setUploadErrorMessage(getSessionContext().getLocalized("ux.fileField.uploadError"));
+		uiField.setFileTooLargeMessage(getSessionContext().getLocalized(TeamAppsDictionary.FILE_TOO_LARGE_SHORT_MESSAGE.getKey(), FileSizeFormatter.humanReadableByteCount(maxBytesPerFile, true, 1)));
+		uiField.setUploadErrorMessage(getSessionContext().getLocalized(TeamAppsDictionary.UPLOAD_ERROR_MESSAGE.getKey()));
 
 		uiField.setDisplayType(displayType.toUiFileFieldDisplayType());
 		uiField.setMaxFiles(this.maxFiles);
+		uiField.setAcceptedFileTypes(acceptedFileTypes);
 		uiField.setShowEntriesAsButtonsOnHover(this.showEntriesAsButtonsOnHover);
 
 		return uiField;
 	}
 
+	@Override
+	public void setValue(List<RECORD> records) {
+		this.setValue(records, true);
+	}
+
+	public void setValue(List<RECORD> records, boolean cancelUploads) {
+		if (cancelUploads) {
+			cancelUploads();
+		}
+		super.setValue(records);
+	}
+
+	public void cancelUploads() {
+		this.queueCommandIfRendered(() -> new UiFileField.CancelAllUploadsCommand(getId()));
+	}
+
 	private UiIdentifiableClientRecord createUiIdentifiableClientRecord(RECORD record) {
 		UiIdentifiableClientRecord clientRecord = new UiIdentifiableClientRecord();
-		clientRecord.setValues(fileItemPropertyExtractor.getValues(record, fileItemTemplate.getDataKeys()));
+		clientRecord.setValues(fileItemPropertyProvider.getValues(record, fileItemTemplate.getPropertyNames()));
 		return clientRecord;
 	}
 
@@ -109,7 +135,7 @@ public Object convertUxValueToUiValue(List<RECORD> uxValue) {
 		}
 		CacheManipulationHandle<List<UiIdentifiableClientRecord>> cacheResponse = recordCache.replaceRecords(uxValue);
 		cacheResponse.commit(); // this is only valid here, because updates from the ui are blocked during transmission of ux values
-		return cacheResponse.getResult();
+		return cacheResponse.getAndClearResult();
 	}
 
 	@Override
@@ -134,20 +160,24 @@ public void handleUiEvent(UiEvent event) {
 			}
 			case UI_FILE_FIELD_UPLOAD_STARTED: {
 				UiFileField.UploadStartedEvent uploadStartedEvent = (UiFileField.UploadStartedEvent) event;
-				this.onUploadStarted.fire(new UploadStartedEventData(uploadStartedEvent.getFileName(), uploadStartedEvent.getMimeType(), uploadStartedEvent.getSizeInBytes(),
-						uploadStartedEvent.getIncompleteUploadsCount()));
+				this.onUploadStarted.fire(new UploadStartedEventData(
+						uploadStartedEvent.getFileName(),
+						uploadStartedEvent.getMimeType(),
+						uploadStartedEvent.getSizeInBytes(),
+						() -> this.queueCommandIfRendered(() -> new UiFileField.CancelUploadCommand(getId(), uploadStartedEvent.getFileItemUuid()))
+				));
 				break;
 			}
 			case UI_FILE_FIELD_UPLOAD_CANCELED: {
 				UiFileField.UploadCanceledEvent canceledEvent = (UiFileField.UploadCanceledEvent) event;
-				this.onUploadCanceled.fire(new UploadCanceledEventData(canceledEvent.getFileName(), canceledEvent.getMimeType(), canceledEvent.getSizeInBytes(),
-						canceledEvent.getIncompleteUploadsCount()));
+				this.onUploadCanceled.fire(new UploadCanceledEventData(canceledEvent.getFileName(), canceledEvent.getMimeType(), canceledEvent.getSizeInBytes()
+				));
 				break;
 			}
 			case UI_FILE_FIELD_UPLOAD_FAILED: {
 				UiFileField.UploadFailedEvent failedEvent = (UiFileField.UploadFailedEvent) event;
-				this.onUploadFailed.fire(new UploadFailedEventData(failedEvent.getFileName(), failedEvent.getMimeType(), failedEvent.getSizeInBytes(),
-						failedEvent.getIncompleteUploadsCount()));
+				this.onUploadFailed.fire(new UploadFailedEventData(failedEvent.getFileName(), failedEvent.getMimeType(), failedEvent.getSizeInBytes()
+				));
 				break;
 			}
 			case UI_FILE_FIELD_UPLOAD_SUCCESSFUL: {
@@ -165,7 +195,7 @@ public void handleUiEvent(UiEvent event) {
 				RECORD record = uploadedFileToRecordConverter.convert(uploadedFile);
 				CacheManipulationHandle<UiIdentifiableClientRecord> cacheResponse = recordCache.addRecord(record);
 				if (isRendered()) {
-					getSessionContext().queueCommand(new UiFileField.ReplaceFileItemCommand(getId(), uploadedEvent.getFileItemUuid(), cacheResponse.getResult()), aVoid -> cacheResponse.commit());
+					getSessionContext().queueCommand(new UiFileField.ReplaceFileItemCommand(getId(), uploadedEvent.getFileItemUuid(), cacheResponse.getAndClearResult()), aVoid -> cacheResponse.commit());
 				} else {
 					cacheResponse.commit();
 				}
@@ -181,6 +211,11 @@ public void handleUiEvent(UiEvent event) {
 		}
 	}
 
+	@Override
+	public boolean isEmptyValue(List<RECORD> value) {
+		return value == null || value.isEmpty();
+	}
+
 	@Override
 	protected void applyValueFromUi(Object value) {
 		List<RECORD> oldValue = new ArrayList<>(getValue() != null ? getValue() : Collections.emptyList());
@@ -191,11 +226,6 @@ protected void applyValueFromUi(Object value) {
 		}
 	}
 
-	@Override
-	protected void doDestroy() {
-		// nothing to do
-	}
-
 	public Template getFileItemTemplate() {
 		return fileItemTemplate;
 	}
@@ -268,23 +298,40 @@ public void setMaxFiles(int maxFiles) {
 		queueCommandIfRendered(() -> new UiFileField.SetMaxFilesCommand(getId(), maxFiles));
 	}
 
-	public PropertyExtractor getUploadButtonPropertyExtractor() {
-		return uploadButtonPropertyExtractor;
+	public PropertyProvider getUploadButtonPropertyProvider() {
+		return uploadButtonPropertyProvider;
 	}
 
-	public void setUploadButtonPropertyExtractor(PropertyExtractor uploadButtonPropertyExtractor) {
-		this.uploadButtonPropertyExtractor = uploadButtonPropertyExtractor;
+	public void setUploadButtonPropertyProvider(PropertyProvider propertyProvider) {
+		this.uploadButtonPropertyProvider = propertyProvider;
+	}
+
+	public void setUploadButtonPropertyExtractor(PropertyExtractor propertyExtractor) {
+		this.setUploadButtonPropertyProvider(propertyExtractor);
 	}
 
 	public UploadedFileToRecordConverter<RECORD> getUploadedFileToRecordConverter() {
 		return uploadedFileToRecordConverter;
 	}
 
-	public PropertyExtractor<RECORD> getFileItemPropertyExtractor() {
-		return fileItemPropertyExtractor;
+	public PropertyProvider<RECORD> getFileItemPropertyProvider() {
+		return fileItemPropertyProvider;
+	}
+
+	public void setFileItemPropertyProvider(PropertyProvider<RECORD> fileItemPropertyProvider) {
+		this.fileItemPropertyProvider = fileItemPropertyProvider;
 	}
 
 	public void setFileItemPropertyExtractor(PropertyExtractor<RECORD> fileItemPropertyExtractor) {
-		this.fileItemPropertyExtractor = fileItemPropertyExtractor;
+		this.setFileItemPropertyProvider(fileItemPropertyExtractor);
+	}
+
+	public List<String> getAcceptedFileTypes() {
+		return acceptedFileTypes;
+	}
+
+	public void setAcceptedFileTypes(List<String> acceptedFileTypes) {
+		this.acceptedFileTypes = List.copyOf(acceptedFileTypes);
+		queueCommandIfRendered(() -> new UiFileField.SetAcceptedFileTypesCommand(getId(), acceptedFileTypes));
 	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/upload/FileFieldDisplayType.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/upload/FileFieldDisplayType.java
index 0b8de4721..b70f6d7e6 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/upload/FileFieldDisplayType.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/upload/FileFieldDisplayType.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/upload/PictureChooser.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/upload/PictureChooser.java
new file mode 100644
index 000000000..493678976
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/upload/PictureChooser.java
@@ -0,0 +1,319 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.field.upload;
+
+import net.coobird.thumbnailator.Thumbnails;
+import org.teamapps.dto.UiEvent;
+import org.teamapps.dto.UiField;
+import org.teamapps.dto.UiPictureChooser;
+import org.teamapps.event.Event;
+import org.teamapps.icon.material.MaterialIcon;
+import org.teamapps.icons.Icon;
+import org.teamapps.ux.component.field.AbstractField;
+import org.teamapps.ux.component.field.Button;
+import org.teamapps.ux.component.flexcontainer.HorizontalLayout;
+import org.teamapps.ux.component.flexcontainer.VerticalLayout;
+import org.teamapps.ux.component.imagecropper.ImageCropper;
+import org.teamapps.ux.component.imagecropper.ImageCropperSelection;
+import org.teamapps.ux.component.imagecropper.ImageCropperSelectionMode;
+import org.teamapps.ux.component.template.BaseTemplateRecord;
+import org.teamapps.ux.component.window.Window;
+import org.teamapps.ux.css.CssJustifyContent;
+import org.teamapps.ux.i18n.TeamAppsDictionary;
+import org.teamapps.ux.resource.FileResource;
+import org.teamapps.ux.resource.Resource;
+
+import java.io.*;
+import java.nio.file.Files;
+
+public class PictureChooser extends AbstractField<Resource> {
+
+	public final Event<UploadTooLargeEventData> onUploadTooLarge = new Event<>();
+	public final Event<UploadStartedEventData> onUploadStarted = new Event<>();
+	public final Event<UploadCanceledEventData> onUploadCanceled = new Event<>();
+	public final Event<UploadFailedEventData> onUploadFailed = new Event<>();
+	public final Event<UploadedFile> onUploadSuccessful = new Event<>();
+
+	private long maxFileSize = 10_000_000; // There is also a hard limitation! (see application.properties)
+	private String uploadUrl = "/upload"; // May point anywhere.
+	private String fileTooLargeMessage;
+	private String uploadErrorMessage;
+
+	private Icon browseButtonIcon = MaterialIcon.EDIT;
+	private Icon deleteButtonIcon = MaterialIcon.DELETE;
+
+	private int targetImageWidth = 240;
+	private int targetImageHeight = 240;
+	private int imageDisplayWidth = -1;
+	private int imageDisplayHeight = -1;
+
+	private final ImageCropper imageCropper;
+	private final Window imageCropperWindow;
+	private UploadedFile uploadedFile;
+
+	private final ImageCropperConverter imageCropperConverter = this::cropAndConvertImage;
+
+	public PictureChooser() {
+		imageCropper = new ImageCropper();
+		imageCropper.setAspectRatio(targetImageWidth / (float) targetImageHeight);
+		VerticalLayout verticalLayout = new VerticalLayout();
+		verticalLayout.addComponentFillRemaining(imageCropper);
+		Button<BaseTemplateRecord> cancelButton = Button.create(getSessionContext().getLocalized(TeamAppsDictionary.CANCEL.getKey()));
+		cancelButton.setCssStyle("margin-right", "5px");
+		Button<BaseTemplateRecord> rotateButton = Button.create(getSessionContext().getLocalized(TeamAppsDictionary.ROTATE.getKey()));
+		rotateButton.setCssStyle("margin-right", "5px");
+		Button<BaseTemplateRecord> okButton = Button.create(getSessionContext().getLocalized(TeamAppsDictionary.OK.getKey()));
+		HorizontalLayout horizontalLayout = new HorizontalLayout();
+		horizontalLayout.addComponentAutoSize(cancelButton);
+		horizontalLayout.addComponentAutoSize(rotateButton);
+		horizontalLayout.addComponentAutoSize(okButton);
+		horizontalLayout.setJustifyContent(CssJustifyContent.END);
+		horizontalLayout.setCssStyle("padding", "5px");
+		verticalLayout.addComponentAutoSize(horizontalLayout);
+		imageCropperWindow = new Window(MaterialIcon.IMAGE, getSessionContext().getLocalized(TeamAppsDictionary.CROP_IMAGE.getKey()), 700, 500, verticalLayout);
+		imageCropperWindow.setCloseable(true);
+		imageCropperWindow.setMaximizable(true);
+		imageCropperWindow.setModal(true);
+		imageCropperWindow.setCloseOnEscape(true);
+
+		okButton.onClicked.addListener(() -> {
+			try {
+				ImageCropperSelection selection = imageCropper.getSelection();
+				Resource converted = imageCropperConverter.convert(uploadedFile, selection, this.targetImageWidth, this.targetImageHeight);
+				setValue(converted);
+				onValueChanged.fire(converted);
+				imageCropperWindow.close();
+			} catch (IOException e) {
+				throw new RuntimeException(e);
+			}
+		});
+
+		rotateButton.onClicked.addListener(() -> {
+			try {
+				File rotatedImageFile = rotateImage(uploadedFile.getAsFile());
+				imageCropper.setImageUrl(getSessionContext().createFileLink(rotatedImageFile));
+				this.uploadedFile = new UploadedFile(uploadedFile.getUuid(), uploadedFile.getName(), uploadedFile.getSizeInBytes(), uploadedFile.getMimeType(), () -> createInputStream(rotatedImageFile), () -> rotatedImageFile);
+			} catch (IOException e) {
+				e.printStackTrace();
+			}
+		});
+
+		cancelButton.onClicked.addListener(() -> {
+			imageCropperWindow.close();
+		});
+
+		fileTooLargeMessage = getSessionContext().getLocalized(TeamAppsDictionary.FILE_TOO_LARGE_SHORT_MESSAGE.getKey());
+		uploadErrorMessage = getSessionContext().getLocalized(TeamAppsDictionary.UPLOAD_ERROR_SHORT_MESSAGE.getKey());
+	}
+
+	private InputStream createInputStream(File file) {
+		try {
+			return new FileInputStream(file);
+		} catch (FileNotFoundException e) {
+			e.printStackTrace();
+		}
+		return null;
+	}
+
+	@Override
+	public Object convertUxValueToUiValue(Resource resource) {
+		return getSessionContext().createResourceLink(resource);
+	}
+
+	private Resource cropAndConvertImage(UploadedFile uploadedFile, ImageCropperSelection selection, int targetWidth, int targetHeight) throws IOException {
+		File tempFile = Files.createTempFile("cropped-image", ".jpg").toFile();
+		Thumbnails.of(uploadedFile.getAsInputStream()).sourceRegion(selection.getLeft(), selection.getTop(), selection.getWidth(), selection.getHeight()).size(targetWidth, targetHeight).outputFormat("jpg").toFile(tempFile);
+		return new FileResource(tempFile);
+	}
+
+	private File rotateImage(File imageFile) throws IOException {
+		File newImageFile = File.createTempFile("rotated-image", ".jpg");
+		Thumbnails.of(imageFile).scale(1).rotate(90).toFile(newImageFile);
+		return newImageFile;
+	}
+
+	@Override
+	public UiField createUiComponent() {
+		UiPictureChooser uiField = new UiPictureChooser();
+		mapAbstractFieldAttributesToUiField(uiField);
+		uiField.setUploadUrl(uploadUrl);
+		uiField.setMaxFileSize(maxFileSize);
+		uiField.setFileTooLargeMessage(fileTooLargeMessage);
+		uiField.setUploadErrorMessage(uploadErrorMessage);
+		uiField.setBrowseButtonIcon(getSessionContext().resolveIcon(browseButtonIcon));
+		uiField.setDeleteButtonIcon(getSessionContext().resolveIcon(deleteButtonIcon));
+		uiField.setImageDisplayWidth(imageDisplayWidth != -1 ? imageDisplayWidth : targetImageWidth);
+		uiField.setImageDisplayHeight(imageDisplayHeight != -1 ? imageDisplayHeight : targetImageHeight);
+		return uiField;
+	}
+
+	@Override
+	public void handleUiEvent(UiEvent event) {
+		super.handleUiEvent(event);
+		switch (event.getUiEventType()) {
+			case UI_PICTURE_CHOOSER_UPLOAD_TOO_LARGE: {
+				UiPictureChooser.UploadTooLargeEvent tooLargeEvent = (UiPictureChooser.UploadTooLargeEvent) event;
+				this.onUploadTooLarge.fire(new UploadTooLargeEventData(tooLargeEvent.getFileName(), tooLargeEvent.getMimeType(), tooLargeEvent.getSizeInBytes()));
+				break;
+			}
+			case UI_PICTURE_CHOOSER_UPLOAD_STARTED: {
+				UiPictureChooser.UploadStartedEvent uploadStartedEvent = (UiPictureChooser.UploadStartedEvent) event;
+				this.onUploadStarted.fire(new UploadStartedEventData(uploadStartedEvent.getFileName(), uploadStartedEvent.getMimeType(), uploadStartedEvent.getSizeInBytes(), null /*TODO*/));
+				break;
+			}
+			case UI_PICTURE_CHOOSER_UPLOAD_CANCELED: {
+				UiPictureChooser.UploadCanceledEvent canceledEvent = (UiPictureChooser.UploadCanceledEvent) event;
+				this.onUploadCanceled.fire(new UploadCanceledEventData(canceledEvent.getFileName(), canceledEvent.getMimeType(), canceledEvent.getSizeInBytes()));
+				break;
+			}
+			case UI_PICTURE_CHOOSER_UPLOAD_FAILED: {
+				UiPictureChooser.UploadFailedEvent failedEvent = (UiPictureChooser.UploadFailedEvent) event;
+				this.onUploadFailed.fire(new UploadFailedEventData(failedEvent.getFileName(), failedEvent.getMimeType(), failedEvent.getSizeInBytes()));
+				break;
+			}
+			case UI_PICTURE_CHOOSER_UPLOAD_SUCCESSFUL: {
+				UiPictureChooser.UploadSuccessfulEvent uploadedEvent = (UiPictureChooser.UploadSuccessfulEvent) event;
+				this.uploadedFile = new UploadedFile(uploadedEvent.getUploadedFileUuid(), uploadedEvent.getFileName(), uploadedEvent.getSizeInBytes(), uploadedEvent.getMimeType(),
+						() -> {
+							try {
+								return new FileInputStream(getSessionContext().getUploadedFileByUuid(uploadedEvent.getUploadedFileUuid()));
+							} catch (FileNotFoundException e) {
+								throw new UploadedFileAccessException(e);
+							}
+						},
+						() -> getSessionContext().getUploadedFileByUuid(uploadedEvent.getUploadedFileUuid())
+				);
+				onUploadSuccessful.fire(uploadedFile);
+				showImageCropperWindow();
+				break;
+			}
+		}
+	}
+
+	public void setImageCropperSelectionMode(ImageCropperSelectionMode selectionMode) {
+		imageCropper.setSelectionMode(selectionMode);
+	}
+
+	private void showImageCropperWindow() {
+		imageCropper.setImageUrl(getSessionContext().createFileLink(uploadedFile.getAsFile()));
+		getSessionContext().showWindow(imageCropperWindow, 200);
+	}
+
+	public long getMaxFileSize() {
+		return maxFileSize;
+	}
+
+	public void setMaxFileSize(long maxFileSize) {
+		this.maxFileSize = maxFileSize;
+		queueCommandIfRendered(() -> new UiPictureChooser.SetMaxFileSizeCommand(getId(), maxFileSize));
+	}
+
+	public String getUploadUrl() {
+		return uploadUrl;
+	}
+
+	public void setUploadUrl(String uploadUrl) {
+		this.uploadUrl = uploadUrl;
+		queueCommandIfRendered(() -> new UiPictureChooser.SetUploadUrlCommand(getId(), uploadUrl));
+	}
+
+	public String getFileTooLargeMessage() {
+		return fileTooLargeMessage;
+	}
+
+	public void setFileTooLargeMessage(String fileTooLargeMessage) {
+		this.fileTooLargeMessage = fileTooLargeMessage;
+		queueCommandIfRendered(() -> new UiPictureChooser.SetFileTooLargeMessageCommand(getId(), fileTooLargeMessage));
+	}
+
+	public String getUploadErrorMessage() {
+		return uploadErrorMessage;
+	}
+
+	public void setUploadErrorMessage(String uploadErrorMessage) {
+		this.uploadErrorMessage = uploadErrorMessage;
+		queueCommandIfRendered(() -> new UiPictureChooser.SetUploadErrorMessageCommand(getId(), uploadErrorMessage));
+	}
+
+	public Icon getBrowseButtonIcon() {
+		return browseButtonIcon;
+	}
+
+	public void setBrowseButtonIcon(Icon browseButtonIcon) {
+		this.browseButtonIcon = browseButtonIcon;
+	}
+
+	public Icon getDeleteButtonIcon() {
+		return deleteButtonIcon;
+	}
+
+	public void setDeleteButtonIcon(Icon deleteButtonIcon) {
+		this.deleteButtonIcon = deleteButtonIcon;
+	}
+
+	public int getTargetImageWidth() {
+		return targetImageWidth;
+	}
+
+	public void setTargetImageWidth(int targetImageWidth) {
+		this.targetImageWidth = targetImageWidth;
+		imageCropper.setAspectRatio(targetImageWidth / (float) targetImageHeight);
+	}
+
+	public int getTargetImageHeight() {
+		return targetImageHeight;
+	}
+
+	public void setTargetImageHeight(int targetImageHeight) {
+		this.targetImageHeight = targetImageHeight;
+		imageCropper.setAspectRatio(targetImageWidth / (float) targetImageHeight);
+	}
+
+	public void setTargetImageSize(int width, int height) {
+		this.targetImageWidth = width;
+		this.targetImageHeight = height;
+		imageCropper.setAspectRatio(width / (float) height);
+	}
+
+	public int getImageDisplayWidth() {
+		return imageDisplayWidth;
+	}
+
+	public void setImageDisplayWidth(int imageDisplayWidth) {
+		this.imageDisplayWidth = imageDisplayWidth;
+	}
+
+	public int getImageDisplayHeight() {
+		return imageDisplayHeight;
+	}
+
+	public void setImageDisplayHeight(int imageDisplayHeight) {
+		this.imageDisplayHeight = imageDisplayHeight;
+	}
+
+	public void setImageDisplaySize(int imageDisplayWidth, int imageDisplayHeight) {
+		this.imageDisplayWidth = imageDisplayWidth;
+		this.imageDisplayHeight = imageDisplayHeight;
+	}
+
+	public interface ImageCropperConverter {
+		Resource convert(UploadedFile uploadedFile, ImageCropperSelection selection, int targetWidth, int targetHeight) throws IOException;
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/upload/UploadCanceledEventData.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/upload/UploadCanceledEventData.java
index ed704556b..46dacdd40 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/upload/UploadCanceledEventData.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/upload/UploadCanceledEventData.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -24,13 +24,11 @@ public class UploadCanceledEventData {
 	private final String fileName;
 	private final String mimeType;
 	private final long sizeInBytes;
-	private final int incompleteUploadsCount;
 
-	public UploadCanceledEventData(String fileName, String mimeType, long sizeInBytes, int incompleteUploadsCount) {
+	public UploadCanceledEventData(String fileName, String mimeType, long sizeInBytes) {
 		this.fileName = fileName;
 		this.mimeType = mimeType;
 		this.sizeInBytes = sizeInBytes;
-		this.incompleteUploadsCount = incompleteUploadsCount;
 	}
 
 	public String getFileName() {
@@ -45,7 +43,4 @@ public long getSizeInBytes() {
 		return sizeInBytes;
 	}
 
-	public int getIncompleteUploadsCount() {
-		return incompleteUploadsCount;
-	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/upload/UploadFailedEventData.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/upload/UploadFailedEventData.java
index 506c6ebed..ea81bd8cf 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/upload/UploadFailedEventData.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/upload/UploadFailedEventData.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -24,13 +24,11 @@ public class UploadFailedEventData {
 	private final String fileName;
 	private final String mimeType;
 	private final long sizeInBytes;
-	private final int incompleteUploadsCount;
 
-	public UploadFailedEventData(String fileName, String mimeType, long sizeInBytes, int incompleteUploadsCount) {
+	public UploadFailedEventData(String fileName, String mimeType, long sizeInBytes) {
 		this.fileName = fileName;
 		this.mimeType = mimeType;
 		this.sizeInBytes = sizeInBytes;
-		this.incompleteUploadsCount = incompleteUploadsCount;
 	}
 
 	public String getFileName() {
@@ -45,7 +43,4 @@ public long getSizeInBytes() {
 		return sizeInBytes;
 	}
 
-	public int getIncompleteUploadsCount() {
-		return incompleteUploadsCount;
-	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/upload/UploadStartedEventData.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/upload/UploadStartedEventData.java
index bed3f0dc1..db40bae19 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/upload/UploadStartedEventData.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/upload/UploadStartedEventData.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -24,13 +24,13 @@ public class UploadStartedEventData {
 	private final String fileName;
 	private final String mimeType;
 	private final long sizeInBytes;
-	private final int incompleteUploadsCount;
+	private final Runnable uploadCanceler;
 
-	public UploadStartedEventData(String fileName, String mimeType, long sizeInBytes, int incompleteUploadsCount) {
+	public UploadStartedEventData(String fileName, String mimeType, long sizeInBytes, Runnable uploadCanceler) {
 		this.fileName = fileName;
 		this.mimeType = mimeType;
 		this.sizeInBytes = sizeInBytes;
-		this.incompleteUploadsCount = incompleteUploadsCount;
+		this.uploadCanceler = uploadCanceler;
 	}
 
 	public String getFileName() {
@@ -45,7 +45,8 @@ public long getSizeInBytes() {
 		return sizeInBytes;
 	}
 
-	public int getIncompleteUploadsCount() {
-		return incompleteUploadsCount;
+	public void cancelUpload() {
+		uploadCanceler.run();
 	}
+
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/upload/UploadSuccessfulEventData.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/upload/UploadSuccessfulEventData.java
index ca557fcf7..113ae24d1 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/upload/UploadSuccessfulEventData.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/upload/UploadSuccessfulEventData.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/upload/UploadTooLargeEventData.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/upload/UploadTooLargeEventData.java
index 763795615..413083a60 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/upload/UploadTooLargeEventData.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/upload/UploadTooLargeEventData.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/upload/UploadedFile.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/upload/UploadedFile.java
index 2ee298d05..b9664bf58 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/upload/UploadedFile.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/upload/UploadedFile.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/upload/UploadedFileAccessException.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/upload/UploadedFileAccessException.java
index f143152d7..49adfeaf9 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/upload/UploadedFileAccessException.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/upload/UploadedFileAccessException.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/upload/UploadedFileToRecordConverter.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/upload/UploadedFileToRecordConverter.java
index 12b4951a7..c9e2a3f9e 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/upload/UploadedFileToRecordConverter.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/upload/UploadedFileToRecordConverter.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/upload/simple/FileItem.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/upload/simple/FileItem.java
new file mode 100644
index 000000000..ab9f32dbd
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/upload/simple/FileItem.java
@@ -0,0 +1,163 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+
+package org.teamapps.ux.component.field.upload.simple;
+
+import org.teamapps.dto.UiFileItem;
+import org.teamapps.event.Event;
+import org.teamapps.icons.Icon;
+import org.teamapps.ux.session.CurrentSessionContext;
+
+import java.io.File;
+import java.util.UUID;
+
+public class FileItem {
+
+	public final Event<Void> onClicked = new Event<>();
+	public final Event<Void> onRemoved = new Event<>();
+
+	private final String uuid;
+	private FileItemState state;
+	private SimpleFileField fileField;
+
+	private Icon icon;
+	private String thumbnailUrl;
+	private String fileName;
+	private String description;
+	private long size;
+	private String linkUrl;
+	private File file;
+
+	public FileItem(String fileName, String description, long size) {
+		this.uuid = UUID.randomUUID().toString();
+		this.fileName = fileName;
+		this.description = description;
+		this.size = size;
+	}
+
+	/*package-private*/ FileItem(String uuid, String fileName, FileItemState state, String description, long size) {
+		this.uuid = uuid;
+		this.fileName = fileName;
+		this.state = state;
+		this.description = description;
+		this.size = size;
+	}
+
+	public Icon getIcon() {
+		return icon;
+	}
+
+	public void setIcon(Icon icon) {
+		this.icon = icon;
+		updateClientSideDisplay();
+	}
+
+	public String getThumbnailUrl() {
+		return thumbnailUrl;
+	}
+
+	public void setThumbnailUrl(String thumbnailUrl) {
+		this.thumbnailUrl = thumbnailUrl;
+		updateClientSideDisplay();
+	}
+
+	public String getFileName() {
+		return fileName;
+	}
+
+	public void setFileName(String fileName) {
+		this.fileName = fileName;
+		updateClientSideDisplay();
+	}
+
+	public String getDescription() {
+		return description;
+	}
+
+	public void setDescription(String description) {
+		this.description = description;
+		updateClientSideDisplay();
+	}
+
+	public long getSize() {
+		return size;
+	}
+
+	public void setSize(long size) {
+		this.size = size;
+		updateClientSideDisplay();
+	}
+
+	public String getLinkUrl() {
+		return linkUrl;
+	}
+
+	public void setLinkUrl(String linkUrl) {
+		this.linkUrl = linkUrl;
+		updateClientSideDisplay();
+	}
+
+	public File getFile() {
+		return file;
+	}
+
+	public void setFile(File file) {
+		this.file = file;
+	}
+
+	private void updateClientSideDisplay() {
+		this.fileField.handleFileItemChanged(this);
+	}
+
+	public void setDisplayData(String caption, String description, long size) {
+		this.fileName = caption;
+		this.description = description;
+		this.size = size;
+		updateClientSideDisplay();
+	}
+
+	/*package-private*/ String getUuid() {
+		return uuid;
+	}
+
+	public FileItemState getState() {
+		return state;
+	}
+
+	/*package-private*/  void setState(FileItemState state) {
+		this.state = state;
+	}
+
+	/*package-private*/ void setFileField(SimpleFileField fileField) {
+		this.fileField = fileField;
+	}
+
+	public UiFileItem createUiFileItem() {
+		UiFileItem uiFileItem = new UiFileItem();
+		uiFileItem.setUuid(uuid);
+		uiFileItem.setFileName(fileName);
+		uiFileItem.setDescription(description);
+		uiFileItem.setSize(size);
+		uiFileItem.setLinkUrl(linkUrl);
+		uiFileItem.setIcon(CurrentSessionContext.get().resolveIcon(icon));
+		uiFileItem.setThumbnail(thumbnailUrl);
+		return uiFileItem;
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/upload/simple/FileItemState.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/upload/simple/FileItemState.java
new file mode 100644
index 000000000..27c42f991
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/upload/simple/FileItemState.java
@@ -0,0 +1,35 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+
+package org.teamapps.ux.component.field.upload.simple;
+
+/**
+ * @author Yann Massard (yamass@gmail.com)
+ */
+public enum FileItemState {
+
+	INITIATING,
+	TOO_LARGE,
+	UPLOADING,
+	CANCELED,
+	FAILED,
+	DONE
+
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/upload/simple/SimpleFileField.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/upload/simple/SimpleFileField.java
new file mode 100644
index 000000000..b19668cb3
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/upload/simple/SimpleFileField.java
@@ -0,0 +1,279 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+
+package org.teamapps.ux.component.field.upload.simple;
+
+import org.teamapps.dto.UiComponent;
+import org.teamapps.dto.UiEvent;
+import org.teamapps.dto.UiFileField;
+import org.teamapps.dto.UiSimpleFileField;
+import org.teamapps.event.Event;
+import org.teamapps.formatter.FileSizeFormatter;
+import org.teamapps.icon.material.MaterialIcon;
+import org.teamapps.icons.Icon;
+import org.teamapps.ux.component.field.AbstractField;
+import org.teamapps.ux.component.field.upload.FileFieldDisplayType;
+import org.teamapps.ux.i18n.TeamAppsDictionary;
+
+import java.io.File;
+import java.util.ArrayList;
+import java.util.List;
+import java.util.stream.Collectors;
+
+/**
+ * @author Yann Massard (yamass@gmail.com)
+ */
+public class SimpleFileField extends AbstractField<List<FileItem>> {
+
+	public final Event<FileItem> onUploadInitiatedByUser = new Event<>();
+	public final Event<FileItem> onUploadTooLarge = new Event<>();
+	public final Event<FileItem> onUploadStarted = new Event<>();
+	public final Event<FileItem> onUploadCanceledByUser = new Event<>();
+	public final Event<FileItem> onUploadFailed = new Event<>();
+	public final Event<FileItem> onUploadSuccessful = new Event<>();
+	public final Event<FileItem> onFileItemClicked = new Event<>();
+	public final Event<FileItem> onFileItemRemoved = new Event<>();
+
+	private final List<FileItem> fileItems = new ArrayList<>();
+
+	private FileFieldDisplayType displayType = FileFieldDisplayType.FLOATING;
+	private int maxFiles = Integer.MAX_VALUE;
+	/**
+	 * List of "unique file type specifiers".
+	 * Examples: ".png", "image/png", "image/*"
+	 * See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept#unique_file_type_specifiers
+	 */
+	private List<String> acceptedFileTypes = List.of();
+	private long maxBytesPerFile = 10_000_000; // There is also a hard limitation! (see application.properties)
+	private String uploadUrl = "/upload"; // May point anywhere.
+	private Icon browseButtonIcon = MaterialIcon.FILE_UPLOAD;
+	private final Icon defaultItemIcon = MaterialIcon.CARD_TRAVEL;
+
+	private String browseButtonCaption = getSessionContext().getLocalized(TeamAppsDictionary.UPLOAD.getKey());
+
+	public void addFileItem(FileItem fileItem) {
+		fileItem.setState(FileItemState.DONE);
+		this.fileItems.add(fileItem);
+		fileItem.setFileField(this);
+		queueCommandIfRendered(() -> new UiSimpleFileField.AddFileItemCommand(getId(), fileItem.createUiFileItem()));
+	}
+
+	public void removeFileItem(FileItem fileItem) {
+		removeFileItemInternal(fileItem);
+		queueCommandIfRendered(() -> new UiSimpleFileField.RemoveFileItemCommand(getId(), fileItem.getUuid()));
+	}
+
+	private void removeFileItemInternal(FileItem fileItem) {
+		this.fileItems.remove(fileItem);
+		fileItem.setFileField(null);
+	}
+
+	/*package-private*/  void handleFileItemChanged(FileItem fileItem) {
+		queueCommandIfRendered(() -> new UiSimpleFileField.UpdateFileItemCommand(getId(), fileItem.createUiFileItem()));
+	}
+
+	private FileItem getFileItemByUuid(String uuid) {
+		return fileItems.stream()
+				.filter(item -> item.getUuid().equals(uuid))
+				.findFirst().orElse(null);
+	}
+
+	@Override
+	public List<FileItem> convertUiValueToUxValue(Object value) {
+		return fileItems; // the list is up to date anyways!
+	}
+
+	@Override
+	public List<FileItem> getValue() {
+		return fileItems;
+	}
+
+	@Override
+	public boolean isEmptyValue(List<FileItem> value) {
+		return value.isEmpty();
+	}
+
+	@Override
+	public UiComponent createUiComponent() {
+		UiSimpleFileField field = new UiSimpleFileField();
+		mapAbstractFieldAttributesToUiField(field);
+		field.setBrowseButtonIcon(getSessionContext().resolveIcon(browseButtonIcon));
+		field.setBrowseButtonCaption(browseButtonCaption);
+		field.setUploadUrl(uploadUrl);
+		field.setMaxBytesPerFile(maxBytesPerFile);
+		field.setFileTooLargeMessage(getSessionContext().getLocalized(TeamAppsDictionary.FILE_TOO_LARGE_SHORT_MESSAGE.getKey(), FileSizeFormatter.humanReadableByteCount(maxBytesPerFile, true, 1)));
+		field.setUploadErrorMessage(getSessionContext().getLocalized(TeamAppsDictionary.UPLOAD_ERROR_MESSAGE.getKey()));
+		field.setMaxFiles(maxFiles);
+		field.setAcceptedFileTypes(acceptedFileTypes);
+		field.setDisplayMode(displayType.toUiFileFieldDisplayType());
+		field.setFileItems(fileItems.stream()
+				.map(fi -> fi.createUiFileItem())
+				.collect(Collectors.toList()));
+		return field;
+	}
+
+	@Override
+	public void handleUiEvent(UiEvent event) {
+		super.handleUiEvent(event);
+		switch (event.getUiEventType()) {
+			case UI_SIMPLE_FILE_FIELD_UPLOAD_INITIATED_BY_USER: {
+				UiSimpleFileField.UploadInitiatedByUserEvent initEvent = (UiSimpleFileField.UploadInitiatedByUserEvent) event;
+				FileItem fileItem = new FileItem(initEvent.getUuid(), initEvent.getFileName(), FileItemState.INITIATING, initEvent.getMimeType(), initEvent.getSizeInBytes());
+				fileItem.setFileField(this);
+				this.fileItems.add(fileItem);
+				onUploadInitiatedByUser.fire(fileItem);
+				break;
+			}
+			case UI_SIMPLE_FILE_FIELD_UPLOAD_TOO_LARGE: {
+				UiSimpleFileField.UploadTooLargeEvent tooLargeEvent = (UiSimpleFileField.UploadTooLargeEvent) event;
+				FileItem fileItem = getFileItemByUuid(tooLargeEvent.getFileItemUuid());
+				if (fileItem != null) {
+					fileItem.setState(FileItemState.TOO_LARGE);
+					onUploadTooLarge.fire(fileItem);
+				}
+				break;
+			}
+			case UI_SIMPLE_FILE_FIELD_UPLOAD_STARTED: {
+				UiSimpleFileField.UploadStartedEvent startedEvent = (UiSimpleFileField.UploadStartedEvent) event;
+				FileItem fileItem = getFileItemByUuid(startedEvent.getFileItemUuid());
+				if (fileItem != null) {
+					fileItem.setState(FileItemState.UPLOADING);
+					onUploadStarted.fire(fileItem);
+				}
+				break;
+			}
+			case UI_SIMPLE_FILE_FIELD_UPLOAD_CANCELED: {
+				UiSimpleFileField.UploadCanceledEvent startedEvent = (UiSimpleFileField.UploadCanceledEvent) event;
+				FileItem fileItem = getFileItemByUuid(startedEvent.getFileItemUuid());
+				if (fileItem != null) {
+					fileItem.setState(FileItemState.CANCELED);
+					onUploadCanceledByUser.fire(fileItem);
+				}
+				break;
+			}
+			case UI_SIMPLE_FILE_FIELD_UPLOAD_FAILED: {
+				UiSimpleFileField.UploadFailedEvent startedEvent = (UiSimpleFileField.UploadFailedEvent) event;
+				FileItem fileItem = getFileItemByUuid(startedEvent.getFileItemUuid());
+				if (fileItem != null) {
+					fileItem.setState(FileItemState.FAILED);
+					onUploadFailed.fire(fileItem);
+				}
+				break;
+			}
+			case UI_SIMPLE_FILE_FIELD_UPLOAD_SUCCESSFUL: {
+				UiSimpleFileField.UploadSuccessfulEvent successEvent = (UiSimpleFileField.UploadSuccessfulEvent) event;
+				FileItem fileItem = getFileItemByUuid(successEvent.getFileItemUuid());
+				if (fileItem != null) {
+					fileItem.setState(FileItemState.DONE);
+					fileItem.setIcon(this.defaultItemIcon);
+					File uploadedFile = getSessionContext().getUploadedFileByUuid(successEvent.getUploadedFileUuid());
+					if (uploadedFile != null) {
+						fileItem.setLinkUrl(getSessionContext().createFileLink(uploadedFile));
+						fileItem.setFile(uploadedFile);
+					}
+					onUploadSuccessful.fire(fileItem);
+					onValueChanged.fire(getValue());
+				}
+				break;
+			}
+			case UI_SIMPLE_FILE_FIELD_FILE_ITEM_CLICKED: {
+				UiSimpleFileField.FileItemClickedEvent clickEvent = (UiSimpleFileField.FileItemClickedEvent) event;
+				FileItem fileItem = getFileItemByUuid(clickEvent.getFileItemUuid());
+				if (fileItem != null) {
+					onFileItemClicked.fire(fileItem);
+				}
+				break;
+			}
+			case UI_SIMPLE_FILE_FIELD_FILE_ITEM_REMOVED: {
+				UiSimpleFileField.FileItemRemovedEvent removedEvent = (UiSimpleFileField.FileItemRemovedEvent) event;
+				FileItem fileItem = getFileItemByUuid(removedEvent.getFileItemUuid());
+				if (fileItem != null) {
+					removeFileItemInternal(fileItem);
+					onFileItemRemoved.fire(fileItem);
+				}
+				break;
+			}
+		}
+	}
+
+	public FileFieldDisplayType getDisplayType() {
+		return displayType;
+	}
+
+	public void setDisplayType(FileFieldDisplayType displayType) {
+		this.displayType = displayType;
+		queueCommandIfRendered(() -> new UiSimpleFileField.SetDisplayModeCommand(getId(), displayType.toUiFileFieldDisplayType()));
+	}
+
+	public int getMaxFiles() {
+		return maxFiles;
+	}
+
+	public void setMaxFiles(int maxFiles) {
+		this.maxFiles = maxFiles;
+		queueCommandIfRendered(() -> new UiSimpleFileField.SetMaxFilesCommand(getId(), maxFiles));
+	}
+
+	public long getMaxBytesPerFile() {
+		return maxBytesPerFile;
+	}
+
+	public void setMaxBytesPerFile(long maxBytesPerFile) {
+		this.maxBytesPerFile = maxBytesPerFile;
+		queueCommandIfRendered(() -> new UiSimpleFileField.SetMaxBytesPerFileCommand(getId(), maxBytesPerFile));
+		queueCommandIfRendered(() -> new UiSimpleFileField.SetFileTooLargeMessageCommand(getId(), getSessionContext().getLocalized(TeamAppsDictionary.FILE_TOO_LARGE_SHORT_MESSAGE.getKey(), FileSizeFormatter.humanReadableByteCount(maxBytesPerFile, true, 1))));
+	}
+
+	public String getUploadUrl() {
+		return uploadUrl;
+	}
+
+	public void setUploadUrl(String uploadUrl) {
+		this.uploadUrl = uploadUrl;
+		queueCommandIfRendered(() -> new UiSimpleFileField.SetUploadUrlCommand(getId(), uploadUrl));
+	}
+
+	public Icon getBrowseButtonIcon() {
+		return browseButtonIcon;
+	}
+
+	public void setBrowseButtonIcon(Icon browseButtonIcon) {
+		this.browseButtonIcon = browseButtonIcon;
+		queueCommandIfRendered(() -> new UiSimpleFileField.SetBrowseButtonIconCommand(getId(), getSessionContext().resolveIcon(browseButtonIcon)));
+	}
+
+	public String getBrowseButtonCaption() {
+		return browseButtonCaption;
+	}
+
+	public void setBrowseButtonCaption(String browseButtonCaption) {
+		this.browseButtonCaption = browseButtonCaption;
+		queueCommandIfRendered(() -> new UiSimpleFileField.SetBrowseButtonCaptionCommand(getId(), browseButtonCaption));
+	}
+
+	public List<String> getAcceptedFileTypes() {
+		return acceptedFileTypes;
+	}
+
+	public void setAcceptedFileTypes(List<String> acceptedFileTypes) {
+		this.acceptedFileTypes = List.copyOf(acceptedFileTypes);
+		queueCommandIfRendered(() -> new UiFileField.SetAcceptedFileTypesCommand(getId(), acceptedFileTypes));
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/uisession/UiCommandExecutor.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/validator/CustomValidator.java
similarity index 77%
rename from teamapps-ux/src/main/java/org/teamapps/uisession/UiCommandExecutor.java
rename to teamapps-ux/src/main/java/org/teamapps/ux/component/field/validator/CustomValidator.java
index 9287e7d22..086a796f6 100644
--- a/teamapps-ux/src/main/java/org/teamapps/uisession/UiCommandExecutor.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/validator/CustomValidator.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,10 +17,14 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-package org.teamapps.uisession;
+package org.teamapps.ux.component.field.validator;
+
+import org.teamapps.ux.component.field.FieldMessage;
 
 import java.util.List;
 
-public interface UiCommandExecutor {
-	void sendCommands(QualifiedUiSessionId qualifiedUiSessionId, List<UiCommandWithResultCallback> commands);
+public interface CustomValidator {
+
+	List<FieldMessage> validate();
+
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/validator/FieldValidator.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/validator/FieldValidator.java
new file mode 100644
index 000000000..a697050bd
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/validator/FieldValidator.java
@@ -0,0 +1,44 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.field.validator;
+
+import org.teamapps.ux.component.field.FieldMessage;
+
+import java.util.Collections;
+import java.util.List;
+import java.util.function.Function;
+import java.util.function.Predicate;
+
+public interface FieldValidator<VALUE> {
+
+	List<FieldMessage> validate(VALUE value);
+
+	static <VALUE> FieldValidator<VALUE> fromPredicate(Predicate<VALUE> validationPredicate, String errorMessage) {
+		return value -> validationPredicate.test(value) ? Collections.emptyList() : Collections.singletonList(new FieldMessage(FieldMessage.Severity.ERROR, errorMessage));
+	}
+
+	static <VALUE> FieldValidator<VALUE> fromErrorMessageFunction(Function<VALUE, String> errorMessageOrNullFunction) {
+		return value -> {
+			String errorMessage = errorMessageOrNullFunction.apply(value);
+			return errorMessage == null ? Collections.emptyList() : Collections.singletonList(new FieldMessage(FieldMessage.Severity.ERROR, errorMessage));
+		};
+	}
+
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/validator/MultiFieldValidator.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/validator/MultiFieldValidator.java
new file mode 100644
index 000000000..5e5fbbca7
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/field/validator/MultiFieldValidator.java
@@ -0,0 +1,96 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.field.validator;
+
+import org.teamapps.ux.component.field.AbstractField;
+import org.teamapps.ux.component.field.FieldMessage;
+
+import java.util.ArrayList;
+import java.util.Arrays;
+import java.util.List;
+
+public class MultiFieldValidator {
+
+	private final Runnable runValidationHandler = this::validate;
+	private final Runnable clearMessagesHandler = this::clearMessages;
+
+	private final CustomValidator validation;
+	private final List<AbstractField<?>> fields;
+
+	private List<FieldMessage> currentFieldMessages = List.of();
+
+	public enum TriggeringPolicy {
+		MANUALLY,
+		MANUALLY_WITH_AUTOCLEAR,
+		ON_FIELD_CHANGE
+	}
+
+	private final TriggeringPolicy triggeringPolicy;
+
+	public MultiFieldValidator(CustomValidator validation, AbstractField<?>... fields) {
+		this(validation, TriggeringPolicy.MANUALLY, Arrays.asList(fields));
+	}
+
+	public MultiFieldValidator(CustomValidator validation, TriggeringPolicy triggeringPolicy, AbstractField<?>... fields) {
+		this(validation, triggeringPolicy, Arrays.asList(fields));
+	}
+
+	public MultiFieldValidator(CustomValidator validation, TriggeringPolicy triggeringPolicy, List<AbstractField<?>> fields) {
+		this.validation = validation;
+		this.fields = new ArrayList<>(fields);
+		this.triggeringPolicy = triggeringPolicy;
+		setupTriggeringPolicy();
+	}
+
+	public List<FieldMessage> validate() {
+		List<FieldMessage> validationResult = validation.validate();
+		List<FieldMessage> newFieldMessages = validationResult != null ? validationResult : List.of();
+		fields.forEach(f -> {
+			currentFieldMessages.forEach(f::removeCustomFieldMessage);
+			newFieldMessages.forEach(f::addCustomFieldMessage);
+		});
+		currentFieldMessages = newFieldMessages;
+		return newFieldMessages;
+	}
+
+	private void setupTriggeringPolicy() {
+		switch (triggeringPolicy) {
+			case MANUALLY: {
+				break;
+			}
+			case MANUALLY_WITH_AUTOCLEAR : {
+				fields.forEach(f -> f.onValueChanged.addListener(clearMessagesHandler));
+				break;
+			}
+			case ON_FIELD_CHANGE : {
+				fields.forEach(f -> f.onValueChanged.addListener(runValidationHandler));
+				break;
+			}
+		}
+	}
+
+	public TriggeringPolicy getTriggeringPolicy() {
+		return triggeringPolicy;
+	}
+
+	public void clearMessages() {
+		fields.forEach(AbstractField::clearCustomFieldMessages);
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/flexcontainer/FlexContainer.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/flexcontainer/FlexContainer.java
index cbd2ac9d0..a87da4b91 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/flexcontainer/FlexContainer.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/flexcontainer/FlexContainer.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -23,11 +23,13 @@
 import org.teamapps.dto.UiFlexContainer;
 import org.teamapps.ux.component.AbstractComponent;
 import org.teamapps.ux.component.Component;
+import org.teamapps.ux.component.absolutelayout.Length;
 import org.teamapps.ux.css.CssAlignItems;
 import org.teamapps.ux.css.CssFlexDirection;
 import org.teamapps.ux.css.CssJustifyContent;
 
 import java.util.ArrayList;
+import java.util.Collections;
 import java.util.List;
 import java.util.stream.Collectors;
 
@@ -36,24 +38,26 @@ public class FlexContainer extends AbstractComponent {
 	private List<Component> components = new ArrayList<>();
 	private CssFlexDirection flexDirection = CssFlexDirection.ROW;
 	private CssAlignItems alignItems = CssAlignItems.STRETCH;
-	private CssJustifyContent justifyContent = CssJustifyContent.FLEX_START;
+	private CssJustifyContent justifyContent = CssJustifyContent.START;
+	private Length gap = Length.ofPixels(0);
 
 	@Override
 	public UiFlexContainer createUiComponent() {
-		UiFlexContainer uiFlexContainer = new UiFlexContainer(getId());
+		UiFlexContainer uiFlexContainer = new UiFlexContainer();
 		mapAbstractUiComponentProperties(uiFlexContainer);
 		uiFlexContainer.setComponents(components.stream()
-				.map(c -> c.createUiComponentReference())
+				.map(c -> c.createUiReference())
 				.collect(Collectors.toList()));
 		uiFlexContainer.setFlexDirection(flexDirection.toUiCssFlexDirection());
 		uiFlexContainer.setAlignItems(alignItems.toCssAlignItems());
 		uiFlexContainer.setJustifyContent(justifyContent.toUiCssJustifyContent());
+		uiFlexContainer.setGap(gap.toCssString());
 		return uiFlexContainer;
 	}
 
 	public void addComponent(Component component) {
 		this.components.add(component);
-		queueCommandIfRendered(() -> new UiFlexContainer.AddComponentCommand(getId(), component.createUiComponentReference()));
+		queueCommandIfRendered(() -> new UiFlexContainer.AddComponentCommand(getId(), component.createUiReference()));
 	}
 
 	public void addComponent(Component component, FlexSizingPolicy sizingPolicy) {
@@ -63,7 +67,12 @@ public void addComponent(Component component, FlexSizingPolicy sizingPolicy) {
 
 	public void removeComponent(Component component) {
 		this.components.remove(component);
-		queueCommandIfRendered(() -> new UiFlexContainer.RemoveComponentCommand(getId(), component.createUiComponentReference()));
+		queueCommandIfRendered(() -> new UiFlexContainer.RemoveComponentCommand(getId(), component.createUiReference()));
+	}
+
+	public void removeAllComponents() {
+		this.components.forEach(c -> queueCommandIfRendered(() -> new UiFlexContainer.RemoveComponentCommand(getId(), c.createUiReference())));
+		this.components.clear();
 	}
 
 	@Override
@@ -76,8 +85,11 @@ public CssFlexDirection getFlexDirection() {
 	}
 
 	public void setFlexDirection(CssFlexDirection flexDirection) {
+		boolean changed = flexDirection != this.flexDirection;
 		this.flexDirection = flexDirection;
-		reRenderIfRendered(); // TODO
+		if (changed) {
+			reRenderIfRendered();
+		} // TODO
 	}
 
 	public CssAlignItems getAlignItems() {
@@ -85,8 +97,11 @@ public CssAlignItems getAlignItems() {
 	}
 
 	public void setAlignItems(CssAlignItems alignItems) {
+		boolean changed = alignItems != this.alignItems;
 		this.alignItems = alignItems;
-		reRenderIfRendered(); // TODO
+		if (changed) {
+			reRenderIfRendered();
+		} // TODO
 	}
 
 	public CssJustifyContent getJustifyContent() {
@@ -94,12 +109,23 @@ public CssJustifyContent getJustifyContent() {
 	}
 
 	public void setJustifyContent(CssJustifyContent justifyContent) {
+		boolean changed = justifyContent != this.justifyContent;
 		this.justifyContent = justifyContent;
-		reRenderIfRendered(); // TODO
+		if (changed) {
+			reRenderIfRendered();
+		} // TODO
 	}
 
-	@Override
-	protected void doDestroy() {
+	public List<Component> getComponents() {
+		return Collections.unmodifiableList(components);
+	}
+
+	public Length getGap() {
+		return gap;
+	}
 
+	public void setGap(Length gap) {
+		this.gap = gap;
+		reRenderIfRendered();
 	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/flexcontainer/FlexSizeUnit.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/flexcontainer/FlexSizeUnit.java
index fdfc93baa..d435e020c 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/flexcontainer/FlexSizeUnit.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/flexcontainer/FlexSizeUnit.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/flexcontainer/FlexSizingPolicy.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/flexcontainer/FlexSizingPolicy.java
index dbae23b01..3a50df920 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/flexcontainer/FlexSizingPolicy.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/flexcontainer/FlexSizingPolicy.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/flexcontainer/HorizontalLayout.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/flexcontainer/HorizontalLayout.java
index bdb12b8f9..facc35ac9 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/flexcontainer/HorizontalLayout.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/flexcontainer/HorizontalLayout.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/flexcontainer/VerticalLayout.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/flexcontainer/VerticalLayout.java
index a82a8ddda..63fb6da1a 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/flexcontainer/VerticalLayout.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/flexcontainer/VerticalLayout.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/floating/FloatingComponent.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/floating/FloatingComponent.java
new file mode 100644
index 000000000..123416009
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/floating/FloatingComponent.java
@@ -0,0 +1,169 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.floating;
+
+import org.teamapps.common.format.Color;
+import org.teamapps.dto.UiComponent;
+import org.teamapps.dto.UiEvent;
+import org.teamapps.dto.UiFloatingComponent;
+import org.teamapps.event.Event;
+import org.teamapps.ux.component.AbstractComponent;
+import org.teamapps.ux.component.Component;
+
+public class FloatingComponent extends AbstractComponent {
+
+	public final Event<Boolean> onExpandedOrCollapsed = new Event<>();
+
+	private final Component containerComponent;
+	private Component contentComponent;
+	private int width = -1;
+	private int height = -1;
+	private int marginX;
+	private int marginY;
+	private FloatingPosition position;
+	private Color backgroundColor = null;
+	private Color expanderHandleColor = null;
+
+	private boolean collapsible;
+	private boolean expanded;
+
+
+	public FloatingComponent(Component containerComponent, Component contentComponent) {
+		this.containerComponent = containerComponent;
+		this.contentComponent = contentComponent;
+	}
+
+	@Override
+	public UiComponent createUiComponent() {
+		UiFloatingComponent ui = new UiFloatingComponent();
+		mapAbstractUiComponentProperties(ui);
+		ui.setContainerComponent(containerComponent.createUiReference());
+		ui.setContentComponent(Component.createUiClientObjectReference(contentComponent));
+		ui.setWidth(width);
+		ui.setHeight(height);
+		ui.setMarginX(marginX);
+		ui.setMarginY(marginY);
+		ui.setPosition(position.toUiPosition());
+		ui.setBackgroundColor(backgroundColor != null ? backgroundColor.toHtmlColorString() : null);
+		ui.setExpanderHandleColor(expanderHandleColor != null ? expanderHandleColor.toHtmlColorString() : null);
+		ui.setCollapsible(collapsible);
+		ui.setExpanded(expanded);
+		return ui;
+	}
+
+	public int getWidth() {
+		return width;
+	}
+
+	public void setWidth(int width) {
+		this.width = width;
+		queueCommandIfRendered(() -> new UiFloatingComponent.SetDimensionsCommand(getId(), width, height));
+	}
+
+	public int getHeight() {
+		return height;
+	}
+
+	public void setHeight(int height) {
+		this.height = height;
+		queueCommandIfRendered(() -> new UiFloatingComponent.SetDimensionsCommand(getId(), width, height));
+	}
+
+	public int getMarginX() {
+		return marginX;
+	}
+
+	public void setMarginX(int marginX) {
+		this.marginX = marginX;
+		queueCommandIfRendered(() -> new UiFloatingComponent.SetMarginsCommand(getId(), marginX, marginY));
+	}
+
+	public int getMarginY() {
+		return marginY;
+	}
+
+	public void setMarginY(int marginY) {
+		this.marginY = marginY;
+		queueCommandIfRendered(() -> new UiFloatingComponent.SetMarginsCommand(getId(), marginX, marginY));
+	}
+
+	public FloatingPosition getPosition() {
+		return position;
+	}
+
+	public void setPosition(FloatingPosition position) {
+		this.position = position;
+		queueCommandIfRendered(() -> new UiFloatingComponent.SetPositionCommand(getId(), position.toUiPosition()));
+	}
+
+	public Color getBackgroundColor() {
+		return backgroundColor;
+	}
+
+	public void setBackgroundColor(Color backgroundColor) {
+		this.backgroundColor = backgroundColor;
+		queueCommandIfRendered(() -> new UiFloatingComponent.SetBackgroundColorCommand(getId(), backgroundColor != null ? backgroundColor.toHtmlColorString() : null));
+	}
+
+	public Color getExpanderHandleColor() {
+		return expanderHandleColor;
+	}
+
+	public void setExpanderHandleColor(Color expanderHandleColor) {
+		this.expanderHandleColor = expanderHandleColor;
+		queueCommandIfRendered(() -> new UiFloatingComponent.SetExpanderHandleColorCommand(getId(), expanderHandleColor != null ? expanderHandleColor.toHtmlColorString() : null));
+	}
+
+	public boolean isCollapsible() {
+		return collapsible;
+	}
+
+	public void setCollapsible(boolean collapsible) {
+		this.collapsible = collapsible;
+	}
+
+	public boolean isExpanded() {
+		return expanded;
+	}
+
+	public void setExpanded(boolean expanded) {
+		this.expanded = expanded;
+		queueCommandIfRendered(() -> new UiFloatingComponent.SetExpandedCommand(getId(), expanded));
+	}
+
+	public Component getContentComponent() {
+		return contentComponent;
+	}
+
+	public void setContentComponent(Component contentComponent) {
+		this.contentComponent = contentComponent;
+		queueCommandIfRendered(() -> new UiFloatingComponent.SetContentComponentCommand(getId(), contentComponent != null ? contentComponent.createUiReference() : null));
+	}
+
+	@Override
+	public void handleUiEvent(UiEvent event) {
+		switch (event.getUiEventType()) {
+			case UI_FLOATING_COMPONENT_EXPANDED_OR_COLLAPSED: {
+				onExpandedOrCollapsed.fire(((UiFloatingComponent.ExpandedOrCollapsedEvent) event).getExpanded());
+				break;
+			}
+		}
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/floating/FloatingPosition.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/floating/FloatingPosition.java
new file mode 100644
index 000000000..24dfb00fa
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/floating/FloatingPosition.java
@@ -0,0 +1,32 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.floating;
+
+import org.teamapps.dto.UiFloatingComponentPosition;
+
+public enum FloatingPosition {
+
+	TOP_LEFT, TOP_RIGHT, BOTTOM_LEFT, BOTTOM_RIGHT;
+
+	public UiFloatingComponentPosition toUiPosition() {
+		return UiFloatingComponentPosition.valueOf(name());
+	}
+
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/form/AbstractForm.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/form/AbstractForm.java
index b6543454a..312b2f207 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/form/AbstractForm.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/form/AbstractForm.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -21,37 +21,35 @@
 
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
-import org.teamapps.data.extract.BeanPropertyExtractor;
 import org.teamapps.data.extract.PropertyExtractor;
 import org.teamapps.data.extract.PropertyInjector;
-import org.teamapps.dto.UiComponent;
-import org.teamapps.dto.UiComponentReference;
-import org.teamapps.dto.UiEvent;
-import org.teamapps.dto.UiFormLayoutPolicy;
-import org.teamapps.dto.UiGridForm;
+import org.teamapps.data.extract.PropertyProvider;
+import org.teamapps.dto.*;
 import org.teamapps.event.Event;
 import org.teamapps.ux.component.AbstractComponent;
-import org.teamapps.ux.component.Container;
+import org.teamapps.ux.component.Component;
 import org.teamapps.ux.component.field.AbstractField;
+import org.teamapps.ux.component.field.FieldMessage;
+import org.teamapps.ux.component.field.validator.MultiFieldValidator;
 import org.teamapps.ux.component.form.layoutpolicy.FormLayoutPolicy;
 
 import java.util.ArrayList;
-import java.util.LinkedHashMap;
 import java.util.List;
 import java.util.Map;
 import java.util.stream.Collectors;
 
-public abstract class AbstractForm<COMPONENT extends AbstractForm, RECORD> extends AbstractComponent implements Container {
+public abstract class AbstractForm<RECORD> extends AbstractComponent implements Component {
 
 	private static final Logger LOGGER = LoggerFactory.getLogger(AbstractForm.class);
 
 	public final Event<FieldChangeEventData> onFieldValueChanged = new Event<>();
 
-	private LogicalForm<RECORD> logicalForm = new LogicalForm<>();
+	private final LogicalForm<RECORD> logicalForm = new LogicalForm<>();
+	private final List<Component> children = new ArrayList<>();
 
 
 	public void clearAllFields() {
-		getFields().stream().forEach(field -> field.setValue(null));
+		getFields().forEach(field -> field.setValue(null));
 	}
 
 	/**
@@ -69,29 +67,29 @@ public Object getFieldValue(String fieldName) {
 		return getFieldByPropertyName(fieldName).getValue();
 	}
 
-	protected void addField(String propertyName, AbstractField field) {
-		field.setParent(this);
+	protected void addField(String propertyName, AbstractField<?> field) {
+		addComponent(field);
 		logicalForm.addField(propertyName, field);
 		field.onValueChanged.addListener(value -> {
 			onFieldValueChanged.fire(new FieldChangeEventData(propertyName, field, value));
 		});
-		queueCommandIfRendered(() -> new UiGridForm.AddOrReplaceFieldCommand(getId(), field.createUiComponentReference()));
 	}
 
-	// TODO #focus
-//	@Override
-//	public void handleFieldFocused(AbstractField field) {
-//	}
+	protected void addComponent(Component component) {
+		children.add(component);
+		component.setParent(this);
+		queueCommandIfRendered(() -> new UiGridForm.AddOrReplaceFieldCommand(getId(), component.createUiReference()));
+	}
 
 	public abstract List<FormLayoutPolicy> getLayoutPolicies();
 
 	@Override
 	public UiComponent createUiComponent() {
-		List<UiComponentReference> uiFields = logicalForm.getFields().values().stream()
-				.map(field -> field != null ? field.createUiComponentReference() : null)
+		List<UiClientObjectReference> uiFields = logicalForm.getFields().values().stream()
+				.map(field -> field != null ? field.createUiReference() : null)
 				.collect(Collectors.toList());
 		List<UiFormLayoutPolicy> uiLayoutPolicies = getUiFormLayoutPolicies();
-		UiGridForm uiForm = new UiGridForm(getId(), "-----------TODO-remove!------------", uiFields, uiLayoutPolicies);
+		UiGridForm uiForm = new UiGridForm(uiFields, uiLayoutPolicies);
 		mapAbstractUiComponentProperties(uiForm);
 		return uiForm;
 	}
@@ -132,8 +130,12 @@ public void applyFieldValuesToRecord(RECORD record) {
 		logicalForm.applyFieldValuesToRecord(record);
 	}
 
-	public PropertyExtractor<RECORD> getPropertyExtractor() {
-		return logicalForm.getPropertyExtractor();
+	public PropertyProvider<RECORD> getPropertyProvider() {
+		return logicalForm.getPropertyProvider();
+	}
+
+	public void setPropertyProvider(PropertyProvider<RECORD> propertyProvider) {
+		logicalForm.setPropertyProvider(propertyProvider);
 	}
 
 	public void setPropertyExtractor(PropertyExtractor<RECORD> propertyExtractor) {
@@ -163,22 +165,41 @@ private List<String> getPropertyNames() {
 		return new ArrayList<>(logicalForm.getFields().keySet());
 	}
 
-	public List<AbstractField> getFields() {
+	public List<AbstractField<?>> getFields() {
 		return new ArrayList<>(logicalForm.getFields().values());
 	}
 
+	public Map<String, AbstractField<?>> getFieldsMap() {
+		return Map.copyOf(logicalForm.getFields());
+	}
 
 	public <V> AbstractField<V> getFieldByPropertyName(String propertyName) {
 		return (AbstractField<V>) logicalForm.getFields().get(propertyName);
 	}
 
+	public List<Component> getAllChildren() {
+		return children;
+	}
 
 	public void setSectionCollapsed(String sectionId, boolean collapsed) {
 		queueCommandIfRendered(() -> new UiGridForm.SetSectionCollapsedCommand(getId(), sectionId, collapsed));
 	}
 
-	@Override
-	protected void doDestroy() {
-		this.logicalForm.getFields().forEach((fieldName, field) -> field.destroy());
+	public void addMultiFieldValidator(MultiFieldValidator multiFieldValidator) {
+		this.logicalForm.addMultiFieldValidator(multiFieldValidator);
+	}
+
+	public FieldMessage.Severity validate() {
+		return this.logicalForm.validate();
+	}
+
+	/**
+	 * Checks whether any of the form fields have been mutated by the client.
+	 *
+	 * @return true if any of the form fields' values have been changed, false otherwise
+	 */
+	public boolean isChangedByClient() {
+		//calling #getFields() here instead of iterating over logicalForm directly, since that method is overridable. (shouldn't it be final though? 🤔)
+		return getFields().stream().anyMatch(AbstractField::isValueChangedByClient);
 	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/form/FieldChangeEventData.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/form/FieldChangeEventData.java
index aeaf78cd7..1582ac412 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/form/FieldChangeEventData.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/form/FieldChangeEventData.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/form/FieldContainer.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/form/FieldContainer.java
new file mode 100644
index 000000000..74741e9c7
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/form/FieldContainer.java
@@ -0,0 +1,45 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.form;
+
+import org.teamapps.ux.component.Component;
+import org.teamapps.ux.component.field.AbstractField;
+
+import java.util.Map;
+
+/**
+ * Can be added to a form. Contains fields that will be treated by the form as it teats its on fields.
+ * In particular
+ * <ul>
+ *     <li>{@link AbstractForm#validate()} will validate the {@link FieldContainer}'s fields</li>
+ *     <li>{@link AbstractForm#applyRecordValuesToFields(Object)} and {@link AbstractForm#applyFieldValuesToRecord(Object)} will respect the {@link FieldContainer}'s fields</li>
+ *     <li>{@link AbstractForm#getFields()} and {@link AbstractForm#getFieldsMap()} will contain the {@link FieldContainer}'s fields</li>
+ * </ul>
+ */
+public interface FieldContainer {
+
+	Component getMainComponent();
+
+	/**
+	 * Must not change between invocations!
+	 */
+	Map<String, AbstractField<?>> getFields();
+
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/form/GenericForm.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/form/GenericForm.java
index 07eb2eb19..3e5962783 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/form/GenericForm.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/form/GenericForm.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -23,7 +23,7 @@
 
 import java.util.List;
 
-public class GenericForm<R> extends AbstractForm<GenericForm, R> {
+public class GenericForm<R> extends AbstractForm<R> {
 
 	private List<FormLayoutPolicy> layoutPolicies;
 
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/form/LogicalForm.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/form/LogicalForm.java
index 0d4edea4a..cc30f0cee 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/form/LogicalForm.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/form/LogicalForm.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,46 +19,56 @@
  */
 package org.teamapps.ux.component.form;
 
-import org.teamapps.data.extract.BeanPropertyExtractor;
-import org.teamapps.data.extract.BeanPropertyInjector;
-import org.teamapps.data.extract.PropertyExtractor;
-import org.teamapps.data.extract.PropertyInjector;
+import org.teamapps.data.extract.*;
 import org.teamapps.ux.component.field.AbstractField;
+import org.teamapps.ux.component.field.FieldMessage;
+import org.teamapps.ux.component.field.validator.MultiFieldValidator;
 
-import java.util.HashMap;
-import java.util.Map;
+import java.util.*;
+import java.util.stream.Stream;
 
 public class LogicalForm<RECORD> {
 
-	private final Map<String, AbstractField> fieldsByPropertyName = new HashMap<>();
-	private PropertyExtractor<RECORD> propertyExtractor = new BeanPropertyExtractor<>();
+	private final Map<String, AbstractField<?>> fieldsByPropertyName = new HashMap<>();
+	private PropertyProvider<RECORD> propertyProvider = new BeanPropertyExtractor<>();
 	private PropertyInjector<RECORD> propertyInjector = new BeanPropertyInjector<>();
 
+	private final List<MultiFieldValidator> multiFieldValidators = new ArrayList<>();
+
 	public LogicalForm() {
 	}
 
-	public LogicalForm(PropertyExtractor<RECORD> propertyExtractor, PropertyInjector<RECORD> propertyInjector) {
-		this.propertyExtractor = propertyExtractor;
+	public LogicalForm(PropertyProvider<RECORD> propertyProvider, PropertyInjector<RECORD> propertyInjector) {
+		this.propertyProvider = propertyProvider;
 		this.propertyInjector = propertyInjector;
 	}
 
-	public LogicalForm(Map<String, AbstractField> fieldsByPropertyName) {
-		fieldsByPropertyName.putAll(fieldsByPropertyName);
+	public LogicalForm(PropertyExtractor<RECORD> propertyExtractor, PropertyInjector<RECORD> propertyInjector) {
+		this((PropertyProvider<RECORD>) propertyExtractor, propertyInjector);
+	}
+
+	public LogicalForm(Map<String, AbstractField<?>> fieldsByPropertyName) {
+		this.fieldsByPropertyName.putAll(fieldsByPropertyName);
 	}
 
-	public LogicalForm<RECORD> addField(String propertyName, AbstractField field) {
+	public LogicalForm<RECORD> addField(String propertyName, AbstractField<?> field) {
 		this.fieldsByPropertyName.put(propertyName, field);
 		return this;
 	}
 
-	public LogicalForm<RECORD> removeField(AbstractField field) {
+	public LogicalForm<RECORD> removeField(AbstractField<?> field) {
 		this.fieldsByPropertyName.remove(field);
 		return this;
 	}
 
 	public void applyRecordValuesToFields(RECORD record) {
-		Map<String, Object> values = propertyExtractor.getValues(record, fieldsByPropertyName.keySet());
-		values.forEach((dataKey, value) -> fieldsByPropertyName.get(dataKey).setValue(value));
+		Map<String, Object> values = propertyProvider.getValues(record, fieldsByPropertyName.keySet());
+		values.forEach((propertyNames, value) -> {
+			AbstractField<?> field = fieldsByPropertyName.get(propertyNames);
+			if (field != null) {
+				((AbstractField) field).setValue(value);
+			}
+		});
 	}
 
 	public void applyFieldValuesToRecord(RECORD record) {
@@ -67,16 +77,20 @@ public void applyFieldValuesToRecord(RECORD record) {
 		propertyInjector.setValues(record, fieldValues);
 	}
 
-	public Map<String, AbstractField> getFields() {
+	public Map<String, AbstractField<?>> getFields() {
 		return fieldsByPropertyName;
 	}
 
-	public PropertyExtractor<RECORD> getPropertyExtractor() {
-		return propertyExtractor;
+	public PropertyProvider<RECORD> getPropertyProvider() {
+		return propertyProvider;
+	}
+
+	public void setPropertyProvider(PropertyProvider<RECORD> propertyProvider) {
+		this.propertyProvider = propertyProvider;
 	}
 
 	public void setPropertyExtractor(PropertyExtractor<RECORD> propertyExtractor) {
-		this.propertyExtractor = propertyExtractor;
+		this.setPropertyProvider(propertyExtractor);
 	}
 
 	public PropertyInjector<RECORD> getPropertyInjector() {
@@ -86,4 +100,21 @@ public PropertyInjector<RECORD> getPropertyInjector() {
 	public void setPropertyInjector(PropertyInjector<RECORD> propertyInjector) {
 		this.propertyInjector = propertyInjector;
 	}
+
+	public void addMultiFieldValidator(MultiFieldValidator multiFieldValidator) {
+		this.multiFieldValidators.add(multiFieldValidator);
+	}
+
+	public FieldMessage.Severity validate() {
+		return Stream.concat(
+				fieldsByPropertyName.values().stream()
+						.flatMap(f -> f.validate().stream())
+						.map(FieldMessage::getSeverity),
+				multiFieldValidators.stream()
+						.flatMap(v -> v.validate().stream())
+						.map(FieldMessage::getSeverity)
+		)
+				.max(Comparator.comparing(Enum::ordinal))
+				.orElse(null);
+	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/form/ResponsiveForm.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/form/ResponsiveForm.java
index 03fe5809c..5977343d7 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/form/ResponsiveForm.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/form/ResponsiveForm.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,8 +19,7 @@
  */
 package org.teamapps.ux.component.form;
 
-import org.teamapps.data.extract.PropertyExtractor;
-import org.teamapps.data.extract.PropertyInjector;
+import org.teamapps.ux.component.Component;
 import org.teamapps.ux.component.field.AbstractField;
 import org.teamapps.ux.component.form.layoutpolicy.FormLayoutPolicy;
 
@@ -28,7 +27,7 @@
 import java.util.Comparator;
 import java.util.List;
 
-public class ResponsiveForm<RECORD> extends AbstractForm<ResponsiveForm, RECORD> {
+public class ResponsiveForm<RECORD> extends AbstractForm<RECORD> {
 
 	private List<ResponsiveFormLayout> responsiveFormLayouts = new ArrayList<>();
 	private boolean createSmallScreenLayoutIfMissing = true;
@@ -66,6 +65,11 @@ protected void addLayoutField(String propertyName, AbstractField field) {
 		}
 	}
 
+	protected void addLayoutComponent(Component field) {
+		if (!getAllChildren().contains(field)) {
+			addComponent(field);
+		}
+	}
 
 	@Override
 	public List<FormLayoutPolicy> getLayoutPolicies() {
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/form/ResponsiveFormConfigurationTemplate.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/form/ResponsiveFormConfigurationTemplate.java
index 24ede796c..594f99131 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/form/ResponsiveFormConfigurationTemplate.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/form/ResponsiveFormConfigurationTemplate.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/form/ResponsiveFormField.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/form/ResponsiveFormField.java
index 1d7607858..f30937aa9 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/form/ResponsiveFormField.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/form/ResponsiveFormField.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,16 +19,16 @@
  */
 package org.teamapps.ux.component.form;
 
-import org.teamapps.ux.component.field.AbstractField;
-import org.teamapps.ux.component.grid.layout.GridColumn;
+import org.teamapps.ux.component.Component;
 import org.teamapps.ux.component.form.layoutpolicy.FormSectionFieldPlacement;
-import org.teamapps.ux.component.grid.layout.GridRow;
 import org.teamapps.ux.component.format.HorizontalElementAlignment;
 import org.teamapps.ux.component.format.VerticalElementAlignment;
+import org.teamapps.ux.component.grid.layout.GridColumn;
+import org.teamapps.ux.component.grid.layout.GridRow;
 
 public class ResponsiveFormField {
 	private final ResponsiveFormSection responsiveFormSection;
-	private final AbstractField field;
+	private final Component field;
 	//FormSectionFloatingFieldsPlacement floatingFieldsPlacement;
 	private final int row;
 	private final int column;
@@ -41,7 +41,7 @@ public class ResponsiveFormField {
 	private VerticalElementAlignment verticalAlignment = VerticalElementAlignment.CENTER;
 	private HorizontalElementAlignment horizontalAlignment = HorizontalElementAlignment.LEFT;
 
-	protected ResponsiveFormField(ResponsiveFormSection responsiveFormSection, AbstractField field, int row, int column, FormSectionFieldPlacement fieldPlacementTemplate) {
+	protected ResponsiveFormField(ResponsiveFormSection responsiveFormSection, Component field, int row, int column, FormSectionFieldPlacement fieldPlacementTemplate) {
 		this.responsiveFormSection = responsiveFormSection;
 		this.field = field;
 		this.row = row;
@@ -60,7 +60,7 @@ protected ResponsiveFormField(ResponsiveFormSection responsiveFormSection, Abstr
 
 
 	protected FormSectionFieldPlacement createFormSectionPlacement() {
-		FormSectionFieldPlacement placement = new FormSectionFieldPlacement<>(field, row, column);
+		FormSectionFieldPlacement placement = new FormSectionFieldPlacement(field, row, column);
 		placement.setRowSpan(rowSpan);
 		placement.setColSpan(colSpan);
 		placement.setMinWidth(minWidth);
@@ -84,7 +84,7 @@ public ResponsiveFormSection getResponsiveFormSection() {
 		return responsiveFormSection;
 	}
 
-	public AbstractField getField() {
+	public Component getField() {
 		return field;
 	}
 
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/form/ResponsiveFormLayout.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/form/ResponsiveFormLayout.java
index f201fdf62..adfffb05f 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/form/ResponsiveFormLayout.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/form/ResponsiveFormLayout.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,11 +19,13 @@
  */
 package org.teamapps.ux.component.form;
 
-import org.teamapps.icons.api.Icon;
+import org.teamapps.icons.Icon;
+import org.teamapps.ux.component.Component;
 import org.teamapps.ux.component.field.AbstractField;
 import org.teamapps.ux.component.field.Label;
 import org.teamapps.ux.component.form.layoutpolicy.FormLayoutPolicy;
 import org.teamapps.ux.component.form.layoutpolicy.FormSectionFieldPlacement;
+import org.teamapps.ux.component.format.HorizontalElementAlignment;
 import org.teamapps.ux.component.grid.layout.GridColumn;
 import org.teamapps.ux.component.grid.layout.GridRow;
 import org.teamapps.ux.component.template.BaseTemplate;
@@ -33,13 +35,13 @@
 import java.util.List;
 import java.util.UUID;
 
-public class ResponsiveFormLayout  {
+public class ResponsiveFormLayout {
 
 	protected static final String LABEL_NAME_SUFFIX = "Label";
-	private ResponsiveForm responsiveForm;
-	private int minWidth;
-	private List<ResponsiveFormSection> responsiveFormSections = new ArrayList<>();
-	private ResponsiveFormConfigurationTemplate configurationTemplate;
+	private final ResponsiveForm responsiveForm;
+	private final int minWidth;
+	private final List<ResponsiveFormSection> responsiveFormSections = new ArrayList<>();
+	private final ResponsiveFormConfigurationTemplate configurationTemplate;
 
 
 	protected ResponsiveFormLayout(int minWidth, ResponsiveForm responsiveForm, ResponsiveFormConfigurationTemplate configurationTemplate) {
@@ -48,6 +50,26 @@ protected ResponsiveFormLayout(int minWidth, ResponsiveForm responsiveForm, Resp
 		this.configurationTemplate = configurationTemplate;
 	}
 
+	/**
+	 * Adds a field container to this form. The field container may contain multiple fields itself.
+	 * Those fields will be treated as part of this form (validation, injection, extraction).
+	 */
+	public void addFieldContainer(Icon<?, ?> icon, String label, FieldContainer fieldContainer) {
+		LabelAndField labelAndField = addLabelAndComponent(icon, label, fieldContainer.getMainComponent());
+		labelAndField.field.setHorizontalAlignment(HorizontalElementAlignment.STRETCH);
+		fieldContainer.getFields().forEach(responsiveForm::addLayoutField);
+	}
+
+	/**
+	 * Adds a field container to this form. The field container may contain multiple fields itself.
+	 * Those fields will be treated as part of this form (validation, injection, extraction).
+	 */
+	public void addFieldContainer(FieldContainer fieldContainer) {
+		ResponsiveFormField responsiveFormField = addComponent(fieldContainer.getMainComponent(), 0, 2, true);
+		responsiveFormField.setHorizontalAlignment(HorizontalElementAlignment.STRETCH);
+		fieldContainer.getFields().forEach(responsiveForm::addLayoutField);
+	}
+
 	public ResponsiveFormField addField(int row, int column, String propertyName, AbstractField field) {
 		ResponsiveFormSection responsiveFormSection = getSection();
 		FormSectionFieldPlacement fieldPlacementTemplate = configurationTemplate.createFieldPlacementTemplate(column);
@@ -58,7 +80,11 @@ public ResponsiveFormField addField(int row, int column, String propertyName, Ab
 	}
 
 	public ResponsiveFormField addField(String propertyName, AbstractField field, int column, int colSpan) {
-		int row = getSection().getLastNonEmptyRow();
+		return addField(propertyName, field, column, colSpan, false);
+	}
+
+	private ResponsiveFormField addField(String propertyName, AbstractField field, int column, int colSpan, boolean newLine) {
+		int row = getSection().getLastNonEmptyRow() + (newLine ? 1 : 0);
 		ResponsiveFormField responsiveFormField = addField(row, column, propertyName, field);
 		responsiveFormField.setColSpan(colSpan);
 		return responsiveFormField;
@@ -116,27 +142,92 @@ public LabelAndField addLabelAndField(Icon icon, String caption, AbstractField f
 
 	public LabelAndField addLabelAndField(Icon icon, String caption, String propertyName, AbstractField field, boolean newRow, int columnOffset) {
 		Label label = null;
-		String labelPropertyName = null;
 		if (icon != null || caption != null) {
-			labelPropertyName = propertyName + LABEL_NAME_SUFFIX;
 			label = new Label(caption, icon);
-			label.setTargetField(field);
+			label.setTargetComponent(field);
 		}
 		int row = getSection().getLastNonEmptyRow();
 		int column = columnOffset;
-		if (newRow) {
+		if (newRow || row == -1) {
 			row++;
 		} else {
 			column = getSection().getLastNonEmptyColumnInRow(row) + columnOffset + 1;
 		}
 		ResponsiveFormField labelField = null;
 		if (label != null) {
-			labelField = addField(row, column, labelPropertyName, label);
+			labelField = addComponent(row, column, label);
 		}
 		ResponsiveFormField responsiveFormField = addField(row, column + 1, propertyName, field);
 		return new LabelAndField(labelField, responsiveFormField);
 	}
 
+	public ResponsiveFormField addComponent(int row, int column, Component field) {
+		ResponsiveFormSection responsiveFormSection = getSection();
+		FormSectionFieldPlacement fieldPlacementTemplate = configurationTemplate.createFieldPlacementTemplate(column);
+		ResponsiveFormField sectionField = new ResponsiveFormField(responsiveFormSection, field, row, column, fieldPlacementTemplate);
+		responsiveFormSection.addField(sectionField);
+		responsiveForm.addLayoutComponent(field);
+		return sectionField;
+	}
+
+	public ResponsiveFormField addComponent(Component field, int column, int colSpan) {
+		return addComponent(field, column, colSpan, false);
+	}
+
+	public ResponsiveFormField addComponent(Component field, int column, int colSpan, boolean newLine) {
+		int row = getSection().getLastNonEmptyRow() + (newLine ? 1 : 0);
+		ResponsiveFormField responsiveFormField = addComponent(row, column, field);
+		responsiveFormField.setColSpan(colSpan);
+		return responsiveFormField;
+	}
+
+	public ResponsiveFormField addLabelComponent(Component field) {
+		return addLabelComponent(field, 0);
+	}
+
+	public ResponsiveFormField addLabelComponent(Component field, int columOffset) {
+		int row = getSection().getLastNonEmptyRow() + 1;
+		int column = getSection().getLastNonEmptyColumnInRow(row) + columOffset + 1;
+		return addComponent(row, column, field);
+	}
+
+	public LabelAndField addLabelAndComponent(Component field) {
+		return addLabelAndComponent(null, null, field, true, 0);
+	}
+
+	public LabelAndField addLabelAndComponent(Component field, boolean newRow) {
+		return addLabelAndComponent(null, null, field, newRow, 0);
+	}
+
+	public LabelAndField addLabelAndComponent(Icon icon, String caption, Component field) {
+		return addLabelAndComponent(icon, caption, field, true, 0);
+	}
+
+	public LabelAndField addLabelAndComponent(Icon icon, String caption, Component field, boolean newRow) {
+		return addLabelAndComponent(icon, caption, field, newRow, 0);
+	}
+
+	public LabelAndField addLabelAndComponent(Icon icon, String caption, Component field, boolean newRow, int columnOffset) {
+		Label label = null;
+		if (icon != null || caption != null) {
+			label = new Label(caption, icon);
+			label.setTargetComponent(field);
+		}
+		int row = getSection().getLastNonEmptyRow();
+		int column = columnOffset;
+		if (newRow || row == -1) {
+			row++;
+		} else {
+			column = getSection().getLastNonEmptyColumnInRow(row) + columnOffset + 1;
+		}
+		ResponsiveFormField labelField = null;
+		if (label != null) {
+			labelField = addComponent(row, column, label);
+		}
+		ResponsiveFormField responsiveFormField = addComponent(row, column + 1, field);
+		return new LabelAndField(labelField, responsiveFormField);
+	}
+
 	public int getLastNonEmptyRowInSection() {
 		return getSection().getLastNonEmptyRow();
 	}
@@ -177,8 +268,10 @@ public ResponsiveFormSection addSection(Icon icon, String caption, ResponsiveFor
 			configurationTemplate = responsiveForm.getConfigurationTemplate();
 		}
 		ResponsiveFormSection responsiveFormSection = new ResponsiveFormSection(this, "section" + (responsiveFormSections.size() + 1), configurationTemplate);
-		if (icon != null || caption != null) {
+		if (configurationTemplate.getSectionTemplate() == null || configurationTemplate.getSectionTemplate().getHeaderTemplate() == null) {
 			responsiveFormSection.setHeaderTemplate(BaseTemplate.FORM_SECTION_HEADER);
+		}
+		if (icon != null || caption != null) {
 			responsiveFormSection.setHeaderData(new BaseTemplateRecord(icon, caption));
 		}
 		responsiveFormSections.add(responsiveFormSection);
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/form/ResponsiveFormSection.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/form/ResponsiveFormSection.java
index 6f4402ef7..8f60d5243 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/form/ResponsiveFormSection.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/form/ResponsiveFormSection.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,12 +19,12 @@
  */
 package org.teamapps.ux.component.form;
 
+import org.teamapps.common.format.Color;
 import org.teamapps.ux.component.form.layoutpolicy.FormSection;
 import org.teamapps.ux.component.grid.layout.GridColumn;
 import org.teamapps.ux.component.form.layoutpolicy.FormSectionFieldPlacement;
 import org.teamapps.ux.component.grid.layout.GridRow;
 import org.teamapps.ux.component.format.Border;
-import org.teamapps.common.format.Color;
 import org.teamapps.ux.component.format.Shadow;
 import org.teamapps.ux.component.format.Spacing;
 import org.teamapps.ux.component.template.Template;
@@ -35,7 +35,7 @@
 import java.util.Map;
 
 public class ResponsiveFormSection {
-	private ResponsiveFormLayout formLayout;
+	private final ResponsiveFormLayout formLayout;
 	private final String id;
 	private Spacing margin;
 	private Spacing padding;
@@ -59,7 +59,7 @@ public class ResponsiveFormSection {
 	private final Map<Integer, GridColumn> columnMap = new HashMap<>();
 	private final List<ResponsiveFormField> responsiveFormFields = new ArrayList<>();
 
-	private ResponsiveFormConfigurationTemplate configurationTemplate;
+	private final ResponsiveFormConfigurationTemplate configurationTemplate;
 
 
 	protected ResponsiveFormSection(ResponsiveFormLayout formLayout, String id, ResponsiveFormConfigurationTemplate configurationTemplate) {
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/form/layoutpolicy/FormLayoutPolicy.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/form/layoutpolicy/FormLayoutPolicy.java
index db2d613c5..32da45274 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/form/layoutpolicy/FormLayoutPolicy.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/form/layoutpolicy/FormLayoutPolicy.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -28,7 +28,7 @@
 
 public class FormLayoutPolicy {
 
-	private int minWidth;
+	private int minWidth;  // in pixels
 	private List<FormSection> sections = new ArrayList<>();
 
 	public List<FormSection> getSections() {
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/form/layoutpolicy/FormSection.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/form/layoutpolicy/FormSection.java
index 3544d38eb..60e755ea7 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/form/layoutpolicy/FormSection.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/form/layoutpolicy/FormSection.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,12 +19,12 @@
  */
 package org.teamapps.ux.component.form.layoutpolicy;
 
+import org.teamapps.common.format.Color;
 import org.teamapps.dto.UiFormSection;
 import org.teamapps.dto.UiFormSectionPlacement;
 import org.teamapps.dto.UiGridColumn;
 import org.teamapps.dto.UiGridRow;
 import org.teamapps.ux.component.format.Border;
-import org.teamapps.common.format.Color;
 import org.teamapps.ux.component.format.Shadow;
 import org.teamapps.ux.component.format.Spacing;
 import org.teamapps.ux.component.grid.layout.GridColumn;
@@ -35,8 +35,6 @@
 import java.util.List;
 import java.util.stream.Collectors;
 
-import static org.teamapps.util.UiUtil.createUiColor;
-
 public class FormSection {
 
 	private final String id;
@@ -282,7 +280,7 @@ public UiFormSection createUiFormSection() {
 		uiSection.setBorder(this.border != null ? this.border.createUiBorder() : null);
 		uiSection.setShadow(this.shadow != null ? this.shadow.createUiShadow() : null);
 		uiSection.setDrawHeaderLine(this.drawHeaderLine);
-		uiSection.setBackgroundColor(this.backgroundColor != null ? createUiColor(backgroundColor) : null);
+		uiSection.setBackgroundColor(this.backgroundColor != null ? backgroundColor.toHtmlColorString() : null);
 		uiSection.setCollapsible(this.collapsible);
 		uiSection.setCollapsed(this.collapsed);
 		uiSection.setVisible(this.visible);
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/form/layoutpolicy/FormSectionFieldPlacement.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/form/layoutpolicy/FormSectionFieldPlacement.java
index 699e8f45c..dfbed0260 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/form/layoutpolicy/FormSectionFieldPlacement.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/form/layoutpolicy/FormSectionFieldPlacement.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -21,13 +21,13 @@
 
 import org.teamapps.dto.UiFormSectionFieldPlacement;
 import org.teamapps.dto.UiFormSectionPlacement;
-import org.teamapps.ux.component.field.AbstractField;
+import org.teamapps.ux.component.Component;
 import org.teamapps.ux.component.format.HorizontalElementAlignment;
 import org.teamapps.ux.component.format.VerticalElementAlignment;
 
-public class FormSectionFieldPlacement<FIELD extends AbstractField> implements FormSectionPlacement {
+public class FormSectionFieldPlacement implements FormSectionPlacement {
 
-	private FIELD field;
+	private Component field;
 	private int row;
 	private int column;
 	private int rowSpan = 1;
@@ -43,14 +43,14 @@ public FormSectionFieldPlacement() {
 
 	}
 
-	public FormSectionFieldPlacement(FIELD field, int row, int column) {
+	public FormSectionFieldPlacement(Component field, int row, int column) {
 		this.field = field;
 		this.row = row;
 		this.column = column;
 	}
 
 	public FormSectionFieldPlacement createCopy() {
-		FormSectionFieldPlacement placement = new FormSectionFieldPlacement<>(field, row, column);
+		FormSectionFieldPlacement placement = new FormSectionFieldPlacement(field, row, column);
 		placement.setColumn(column);
 		placement.setRow(row);
 		placement.setRowSpan(rowSpan);
@@ -157,7 +157,7 @@ public FormSectionFieldPlacement setMinHeight(int minHeight) {
 
 	@Override
 	public UiFormSectionPlacement createUiFormSectionPlacement() {
-		return new UiFormSectionFieldPlacement(field.createUiComponentReference())
+		return new UiFormSectionFieldPlacement(field.createUiReference())
 				.setRow(row)
 				.setColumn(column)
 				.setRowSpan(rowSpan)
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/form/layoutpolicy/FormSectionFloatingField.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/form/layoutpolicy/FormSectionFloatingField.java
index 7a81b222a..d60a5191c 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/form/layoutpolicy/FormSectionFloatingField.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/form/layoutpolicy/FormSectionFloatingField.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -71,7 +71,7 @@ public void setMaxHeight(int maxHeight) {
 	}
 
 	public UiFormSectionFloatingField createUiFormSectionFloatingField() {
-		UiFormSectionFloatingField floatingField = new UiFormSectionFloatingField(field.createUiComponentReference());
+		UiFormSectionFloatingField floatingField = new UiFormSectionFloatingField(field.createUiReference());
 		floatingField.setMinWidth(minWidth);
 		floatingField.setMaxWidth(maxWidth);
 		floatingField.setMinHeight(minHeight);
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/form/layoutpolicy/FormSectionFloatingFieldsPlacement.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/form/layoutpolicy/FormSectionFloatingFieldsPlacement.java
index e9812fcc4..577fb5611 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/form/layoutpolicy/FormSectionFloatingFieldsPlacement.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/form/layoutpolicy/FormSectionFloatingFieldsPlacement.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/form/layoutpolicy/FormSectionPlacement.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/form/layoutpolicy/FormSectionPlacement.java
index ef19385e2..611be0790 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/form/layoutpolicy/FormSectionPlacement.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/form/layoutpolicy/FormSectionPlacement.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/format/Border.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/format/Border.java
index a59a3f7bc..3b67317c3 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/format/Border.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/format/Border.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/format/FontStyle.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/format/FontStyle.java
index ca8081bfa..3a017b4ba 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/format/FontStyle.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/format/FontStyle.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -22,8 +22,6 @@
 import org.teamapps.common.format.Color;
 import org.teamapps.dto.UiFontStyle;
 
-import static org.teamapps.util.UiUtil.createUiColor;
-
 public class FontStyle {
 
 	protected float relativeFontSize = 1;
@@ -110,8 +108,8 @@ public float getRelativeFontSize() {
 
 	public UiFontStyle createUiFontStyle() {
 		UiFontStyle uiFontStyle = new UiFontStyle();
-		uiFontStyle.setFontColor(fontColor != null ? createUiColor(fontColor) : null);
-		uiFontStyle.setBackgroundColor(backgroundColor != null ? createUiColor(backgroundColor) : null);
+		uiFontStyle.setFontColor(fontColor != null ? fontColor.toHtmlColorString() : null);
+		uiFontStyle.setBackgroundColor(backgroundColor != null ? backgroundColor.toHtmlColorString() : null);
 		uiFontStyle.setBold(bold);
 		uiFontStyle.setUnderline(underline);
 		uiFontStyle.setItalic(italic);
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/format/HorizontalElementAlignment.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/format/HorizontalElementAlignment.java
index a9c178ba0..8e3ad0ddb 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/format/HorizontalElementAlignment.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/format/HorizontalElementAlignment.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/format/ImageSizing.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/format/ImageSizing.java
index d5c77c284..faeedb51a 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/format/ImageSizing.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/format/ImageSizing.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/format/Line.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/format/Line.java
index c02fd0ca2..02bdccd3a 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/format/Line.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/format/Line.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,14 +19,13 @@
  */
 package org.teamapps.ux.component.format;
 
+import org.teamapps.common.format.RgbaColor;
 import org.teamapps.common.format.Color;
 import org.teamapps.dto.UiLine;
 
-import static org.teamapps.util.UiUtil.createUiColor;
-
 public class Line {
 
-	private Color color = Color.BLACK;
+	private Color color = RgbaColor.BLACK;
 	private LineType type = LineType.SOLID;
 	private float thickness = 1;
 
@@ -53,6 +52,6 @@ public Color getColor() {
 	}
 
 	public UiLine createUiLine() {
-		return new UiLine(thickness, color != null ? createUiColor(color) : null).setType(type != null ? type.createUiLineType() : null);
+		return new UiLine(thickness, color != null ? color.toHtmlColorString() : null).setType(type != null ? type.createUiLineType() : null);
 	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/format/LineType.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/format/LineType.java
index 6d60eece7..ea270ef25 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/format/LineType.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/format/LineType.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/format/Shadow.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/format/Shadow.java
index 0d31eb632..4ce1067d9 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/format/Shadow.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/format/Shadow.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,11 +19,10 @@
  */
 package org.teamapps.ux.component.format;
 
+import org.teamapps.common.format.RgbaColor;
 import org.teamapps.common.format.Color;
 import org.teamapps.dto.UiShadow;
 
-import static org.teamapps.util.UiUtil.createUiColor;
-
 public class Shadow {
 
 	private final float offsetX;
@@ -33,7 +32,7 @@ public class Shadow {
 	private final Color color;
 
 	public static Shadow withSize(float size) {
-		return new Shadow(0, 0, size, 0, Color.BLACK);
+		return new Shadow(0, 0, size, 0, RgbaColor.BLACK);
 	}
 
 	public Shadow(float offsetX, float offsetY, float blur, float spread, Color color) {
@@ -65,13 +64,13 @@ public Color getColor() {
 	}
 
 	public UiShadow createUiShadow() {
-		return new UiShadow(color != null ? createUiColor(color) : null, blur)
+		return new UiShadow(color != null ? color.toHtmlColorString() : null, blur)
 				.setOffsetX(offsetX)
 				.setOffsetY(offsetY)
 				.setSpread(spread);
 	}
 
 	public String toCssString() {
-		return offsetX + "px " + offsetY + "px " + blur + "px " + spread + "px " + color.toHtmlColorString();
+		return offsetX + "px " + offsetY + "px " + blur + "px " + spread + "px " + (color != null ? color.toHtmlColorString() : null);
 	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/format/SizeType.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/format/SizeType.java
index b09f1a130..9b0a61b1a 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/format/SizeType.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/format/SizeType.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/format/SizingPolicy.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/format/SizingPolicy.java
index d0c1d42a6..3e989617d 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/format/SizingPolicy.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/format/SizingPolicy.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -32,6 +32,10 @@ public class SizingPolicy {
 
 	private final int minAbsoluteSize;
 
+	public static SizingPolicy fixed(float sizeInPixels) {
+		return new SizingPolicy(SizeType.FIXED, sizeInPixels, (int) sizeInPixels);
+	}
+
 	public SizingPolicy(SizeType type, float value, int minAbsoluteSize) {
 		this.type = type;
 		this.value = value;
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/format/Spacing.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/format/Spacing.java
index c508b9456..53e94ef3c 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/format/Spacing.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/format/Spacing.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -30,12 +30,20 @@ public class Spacing {
 	private final Length bottom;
 	private final Length left;
 
+	public static Spacing px(int value) {
+		return new Spacing(new Length(value, SizeUnit.PIXEL), new Length(value, SizeUnit.PIXEL), new Length(value, SizeUnit.PIXEL), new Length(value, SizeUnit.PIXEL));
+	}
+
+	public static Spacing px(int vertical, int horizontal) {
+		return new Spacing(new Length(vertical, SizeUnit.PIXEL), new Length(horizontal, SizeUnit.PIXEL), new Length(vertical, SizeUnit.PIXEL), new Length(horizontal, SizeUnit.PIXEL));
+	}
+
 	public Spacing(int value) {
 		this(new Length(value, SizeUnit.PIXEL), new Length(value, SizeUnit.PIXEL), new Length(value, SizeUnit.PIXEL), new Length(value, SizeUnit.PIXEL));
 	}
 
-	public Spacing(int verticalSpace, int horizontalSpace) {
-		this(new Length(verticalSpace, SizeUnit.PIXEL), new Length(horizontalSpace, SizeUnit.PIXEL), new Length(verticalSpace, SizeUnit.PIXEL), new Length(horizontalSpace, SizeUnit.PIXEL));
+	public Spacing(int vertical, int horizontal) {
+		this(new Length(vertical, SizeUnit.PIXEL), new Length(horizontal, SizeUnit.PIXEL), new Length(vertical, SizeUnit.PIXEL), new Length(horizontal, SizeUnit.PIXEL));
 	}
 
 	public Spacing(int top, int right, int bottom, int left) {
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/format/TextAlignment.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/format/TextAlignment.java
index d05e4bcf3..072ee5dd5 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/format/TextAlignment.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/format/TextAlignment.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -26,7 +26,7 @@ public enum TextAlignment {
 	LEFT,
 	CENTER,
 	RIGHT,
-	JUSTIFIED,;
+	JUSTIFY;
 
 	public UiTextAlignment toUiTextAlignment() {
 		return UiTextAlignment.valueOf(this.toString());
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/format/VerticalElementAlignment.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/format/VerticalElementAlignment.java
index 6c8d901ca..07b22afa3 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/format/VerticalElementAlignment.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/format/VerticalElementAlignment.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/gauge/Gauge.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/gauge/Gauge.java
index ba3c5520e..ce66f2d73 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/gauge/Gauge.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/gauge/Gauge.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -37,7 +37,7 @@ public Gauge(UiGaugeOptions options) {
 
 	@Override
 	public UiComponent createUiComponent() {
-		UiGauge uiGauge = new UiGauge(getId(), options);
+		UiGauge uiGauge = new UiGauge(options);
 		mapAbstractUiComponentProperties(uiGauge);
 		return uiGauge;
 	}
@@ -64,8 +64,4 @@ public double getValue() {
 		return value;
 	}
 
-	@Override
-	protected void doDestroy() {
-		// nothing to do
-	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/grid/ResponsiveGridLayout.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/grid/ResponsiveGridLayout.java
index f1093023b..07caa821e 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/grid/ResponsiveGridLayout.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/grid/ResponsiveGridLayout.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,13 +19,11 @@
  */
 package org.teamapps.ux.component.grid;
 
-import org.jetbrains.annotations.NotNull;
 import org.teamapps.dto.UiComponent;
 import org.teamapps.dto.UiEvent;
 import org.teamapps.dto.UiResponsiveGridLayout;
 import org.teamapps.dto.UiResponsiveGridLayoutPolicy;
 import org.teamapps.ux.component.AbstractComponent;
-import org.teamapps.ux.component.Container;
 import org.teamapps.ux.component.grid.layout.GridLayoutDefinition;
 
 import java.util.HashMap;
@@ -33,19 +31,18 @@
 import java.util.Map;
 import java.util.stream.Collectors;
 
-public class ResponsiveGridLayout extends AbstractComponent implements Container {
+public class ResponsiveGridLayout extends AbstractComponent {
 
-	private Map<Integer, GridLayoutDefinition> layoutDefinitionsByMinWidth = new HashMap<>();
+	private final Map<Integer, GridLayoutDefinition> layoutDefinitionsByMinWidth = new HashMap<>();
 
 	@Override
 	public UiComponent createUiComponent() {
 		List<UiResponsiveGridLayoutPolicy> layoutPolicies = createUiLayoutPolicies();
-		UiResponsiveGridLayout uiResponsiveGridLayout = new UiResponsiveGridLayout(getId(), layoutPolicies);
+		UiResponsiveGridLayout uiResponsiveGridLayout = new UiResponsiveGridLayout(layoutPolicies);
 		mapAbstractUiComponentProperties(uiResponsiveGridLayout);
 		return uiResponsiveGridLayout;
 	}
 
-	@NotNull
 	private List<UiResponsiveGridLayoutPolicy> createUiLayoutPolicies() {
 		return layoutDefinitionsByMinWidth.entrySet().stream()
 					.map(entry -> new UiResponsiveGridLayoutPolicy(entry.getKey(), entry.getValue().createUiGridLayout()))
@@ -70,8 +67,4 @@ public void handleUiEvent(UiEvent event) {
 		// none
 	}
 
-	@Override
-	protected void doDestroy() {
-		// nothing to do
-	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/grid/bootstrap/BootstrapishBreakpoint.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/grid/bootstrap/BootstrapishBreakpoint.java
index e9bb547f2..6b39b3f80 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/grid/bootstrap/BootstrapishBreakpoint.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/grid/bootstrap/BootstrapishBreakpoint.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/grid/bootstrap/BootstrapishGridLayout.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/grid/bootstrap/BootstrapishGridLayout.java
index 1618ae4f1..0bdad14b0 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/grid/bootstrap/BootstrapishGridLayout.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/grid/bootstrap/BootstrapishGridLayout.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,7 +19,6 @@
  */
 package org.teamapps.ux.component.grid.bootstrap;
 
-import org.jetbrains.annotations.NotNull;
 import org.teamapps.dto.UiComponent;
 import org.teamapps.dto.UiComponentGridPlacement;
 import org.teamapps.dto.UiEvent;
@@ -33,7 +32,7 @@
 import org.teamapps.dto.UiSizingPolicy;
 import org.teamapps.dto.UiSpacing;
 import org.teamapps.ux.component.AbstractComponent;
-import org.teamapps.ux.component.Container;
+import org.teamapps.ux.component.Component;
 import org.teamapps.ux.component.format.HorizontalElementAlignment;
 import org.teamapps.ux.component.format.SizingPolicy;
 import org.teamapps.ux.component.format.VerticalElementAlignment;
@@ -48,7 +47,7 @@
 import java.util.stream.Collectors;
 import java.util.stream.IntStream;
 
-public class BootstrapishGridLayout extends AbstractComponent implements Container {
+public class BootstrapishGridLayout extends AbstractComponent implements Component {
 
 	private static final int DEFAULT_NUMBER_OF_COLUMNS = 12;
 
@@ -81,13 +80,12 @@ public BootstrapishGridLayout(List<GridColumn> columnDefinitions) {
 
 	@Override
 	public UiComponent createUiComponent() {
-		UiResponsiveGridLayout uiResponsiveGridLayout = new UiResponsiveGridLayout(getId(), createUiLayoutPolicies());
+		UiResponsiveGridLayout uiResponsiveGridLayout = new UiResponsiveGridLayout(createUiLayoutPolicies());
 		mapAbstractUiComponentProperties(uiResponsiveGridLayout);
 		uiResponsiveGridLayout.setFillHeight(this.fillHeight);
 		return uiResponsiveGridLayout;
 	}
 
-	@NotNull
 	private List<UiResponsiveGridLayoutPolicy> createUiLayoutPolicies() {
 		// find out which responsive breakpoints are actually being used
 		Set<BootstrapishBreakpoint> usedResponsiveBreakpoints = rows.stream()
@@ -116,7 +114,6 @@ private List<UiResponsiveGridLayoutPolicy> createUiLayoutPolicies() {
 				.collect(Collectors.toList());
 	}
 
-	@NotNull
 	private List<UiGridPlacement> createUiGridPlacements(BootstrapishBreakpoint breakpoint) {
 		List<UiGridPlacement> uiPlacements = new ArrayList<>();
 		int uiRowIndex = 0;
@@ -133,7 +130,7 @@ private List<UiGridPlacement> createUiGridPlacements(BootstrapishBreakpoint brea
 					uiRowIndex++;
 					currentColumnIndex = 0;
 				}
-				uiPlacements.add(new UiComponentGridPlacement(placement.getComponent().createUiComponentReference())
+				uiPlacements.add(new UiComponentGridPlacement(placement.getComponent().createUiReference())
 						.setRow(uiRowIndex)
 						.setColumn(currentColumnIndex + sizing.getOffset())
 						.setColSpan(colSpan)
@@ -155,11 +152,6 @@ public void handleUiEvent(UiEvent event) {
 		// none
 	}
 
-	@Override
-	protected void doDestroy() {
-		// nothing to do
-	}
-
 	public void setColumns(List<GridColumn> columns) {
 		this.columns.clear();
 		this.columns.addAll(columns);
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/grid/bootstrap/BootstrapishPlacement.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/grid/bootstrap/BootstrapishPlacement.java
index e3571cf96..5b5dbbf16 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/grid/bootstrap/BootstrapishPlacement.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/grid/bootstrap/BootstrapishPlacement.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,7 +19,6 @@
  */
 package org.teamapps.ux.component.grid.bootstrap;
 
-import org.jetbrains.annotations.NotNull;
 import org.teamapps.ux.component.Component;
 import org.teamapps.ux.component.format.HorizontalElementAlignment;
 import org.teamapps.ux.component.format.VerticalElementAlignment;
@@ -63,7 +62,6 @@ public BootstrapishPlacement setHorizontalAlignment(HorizontalElementAlignment h
 
 	// =======
 
-	@NotNull
 	private BootstrapishSizing getOrCreateSizing(BootstrapishBreakpoint breakpoint) {
 		BootstrapishSizing sizing = sizings.computeIfAbsent(breakpoint, responsiveBreakpoint -> new BootstrapishSizing(breakpoint));
 
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/grid/bootstrap/BootstrapishRow.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/grid/bootstrap/BootstrapishRow.java
index 24c9aa4d4..bb84f7315 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/grid/bootstrap/BootstrapishRow.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/grid/bootstrap/BootstrapishRow.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/grid/bootstrap/BootstrapishSizing.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/grid/bootstrap/BootstrapishSizing.java
index 9b426b8b7..29a459c2e 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/grid/bootstrap/BootstrapishSizing.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/grid/bootstrap/BootstrapishSizing.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/grid/layout/AbstractGridPlacement.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/grid/layout/AbstractGridPlacement.java
index b3be9bd0a..0a81c4ed8 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/grid/layout/AbstractGridPlacement.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/grid/layout/AbstractGridPlacement.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/grid/layout/ComponentGridPlacement.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/grid/layout/ComponentGridPlacement.java
index 99690393b..91add5e63 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/grid/layout/ComponentGridPlacement.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/grid/layout/ComponentGridPlacement.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -39,7 +39,7 @@ public ComponentGridPlacement(int row, int column, Component component) {
 
 	@Override
 	public UiComponentGridPlacement createUiGridPlacement() {
-		UiComponentGridPlacement uiPlacement = new UiComponentGridPlacement(component.createUiComponentReference());
+		UiComponentGridPlacement uiPlacement = new UiComponentGridPlacement(component.createUiReference());
 		mapAbstractGridPlacementUiProperties(uiPlacement);
 		return uiPlacement;
 	}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/grid/layout/FloatingComponentGridPlacement.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/grid/layout/FloatingComponentGridPlacement.java
index dd4e604a9..bac990cf7 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/grid/layout/FloatingComponentGridPlacement.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/grid/layout/FloatingComponentGridPlacement.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/grid/layout/FloatingComponentGridPlacementItem.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/grid/layout/FloatingComponentGridPlacementItem.java
index 80a72f7b1..0ff2d17b4 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/grid/layout/FloatingComponentGridPlacementItem.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/grid/layout/FloatingComponentGridPlacementItem.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -38,7 +38,7 @@ public FloatingComponentGridPlacementItem(Component component) {
 	}
 
 	public UiFloatingComponentGridPlacementItem createUiFloatingComponentGridPlacementItem() {
-		UiFloatingComponentGridPlacementItem uiItem = new UiFloatingComponentGridPlacementItem(component.createUiComponentReference());
+		UiFloatingComponentGridPlacementItem uiItem = new UiFloatingComponentGridPlacementItem(component.createUiReference());
 		uiItem.setMinWidth(minWidth);
 		uiItem.setMaxWidth(maxWidth);
 		uiItem.setMinHeight(minHeight);
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/grid/layout/GridColumn.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/grid/layout/GridColumn.java
index 6190f7d19..2a73f4c16 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/grid/layout/GridColumn.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/grid/layout/GridColumn.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/grid/layout/GridLayoutDefinition.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/grid/layout/GridLayoutDefinition.java
index dd4a93bb9..eeaec0012 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/grid/layout/GridLayoutDefinition.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/grid/layout/GridLayoutDefinition.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,9 +19,9 @@
  */
 package org.teamapps.ux.component.grid.layout;
 
+import org.teamapps.common.format.Color;
 import org.teamapps.dto.UiGridLayout;
 import org.teamapps.ux.component.format.Border;
-import org.teamapps.common.format.Color;
 import org.teamapps.ux.component.format.Shadow;
 import org.teamapps.ux.component.format.Spacing;
 
@@ -29,8 +29,6 @@
 import java.util.List;
 import java.util.stream.Collectors;
 
-import static org.teamapps.util.UiUtil.createUiColor;
-
 public class GridLayoutDefinition {
 
 	private List<GridColumn> columns = new ArrayList<>();
@@ -79,7 +77,7 @@ public UiGridLayout createUiGridLayout() {
 		uiGridLayout.setPadding(padding != null ? padding.createUiSpacing() : null);
 		uiGridLayout.setBorder(border != null ? border.createUiBorder() : null);
 		uiGridLayout.setShadow(shadow != null ? shadow.createUiShadow() : null);
-		uiGridLayout.setBackgroundColor(backgroundColor != null ? createUiColor(backgroundColor) : null);
+		uiGridLayout.setBackgroundColor(backgroundColor != null ? backgroundColor.toHtmlColorString() : null);
 		return uiGridLayout;
 	}
 
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/grid/layout/GridPlacement.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/grid/layout/GridPlacement.java
index 328c80311..535909ba0 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/grid/layout/GridPlacement.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/grid/layout/GridPlacement.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/grid/layout/GridRow.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/grid/layout/GridRow.java
index 22ba1df6a..7d54cefae 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/grid/layout/GridRow.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/grid/layout/GridRow.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/groupingview/GroupingType.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/groupingview/GroupingType.java
index 2aea4d3af..a0f26b4ac 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/groupingview/GroupingType.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/groupingview/GroupingType.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/groupingview/GroupingView.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/groupingview/GroupingView.java
index b923fbd1d..35ed82150 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/groupingview/GroupingView.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/groupingview/GroupingView.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -36,8 +36,4 @@ public void handleUiEvent(UiEvent event) {
 
 	}
 
-	@Override
-	protected void doDestroy() {
-		// nothing to do
-	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/groupingview/GroupingViewModel.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/groupingview/GroupingViewModel.java
index 41a705c1d..16d4afdb0 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/groupingview/GroupingViewModel.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/groupingview/GroupingViewModel.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/html/HtmlView.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/html/HtmlView.java
new file mode 100644
index 000000000..8adc19a83
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/html/HtmlView.java
@@ -0,0 +1,101 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.html;
+
+import org.teamapps.dto.UiComponent;
+import org.teamapps.dto.UiEvent;
+import org.teamapps.dto.UiHtmlView;
+import org.teamapps.ux.component.AbstractComponent;
+import org.teamapps.ux.component.ClientObject;
+import org.teamapps.ux.component.Component;
+
+import java.util.ArrayList;
+import java.util.Collections;
+import java.util.HashMap;
+import java.util.List;
+import java.util.Map;
+import java.util.stream.Collectors;
+
+public class HtmlView extends AbstractComponent {
+
+	private String html;
+	private final Map<String, List<Component>> componentsByContainerElementSelector = new HashMap<>();
+	private final Map<String, String> contentHtmlByContainerElementSelector = new HashMap<>();
+
+	public HtmlView() {
+		this(null, Collections.emptyMap(), Collections.emptyMap());
+	}
+
+	public HtmlView(String html) {
+		this(html, Collections.emptyMap(), Collections.emptyMap());
+	}
+
+	public HtmlView(String html, Map<String, List<Component>> componentsByContainerElementSelector, Map<String, String> contentHtmlByContainerElementSelector) {
+		this.html = html;
+		this.componentsByContainerElementSelector.putAll(componentsByContainerElementSelector);
+		this.contentHtmlByContainerElementSelector.putAll(contentHtmlByContainerElementSelector);
+	}
+
+	@Override
+	public UiComponent createUiComponent() {
+		UiHtmlView ui = new UiHtmlView();
+		mapAbstractUiComponentProperties(ui);
+		ui.setHtml(html);
+		ui.setComponentsByContainerElementSelector(componentsByContainerElementSelector.entrySet().stream()
+				.collect(Collectors.toMap(Map.Entry::getKey, entry -> entry.getValue().stream().map(ClientObject::createUiReference).collect(Collectors.toList()))));
+		ui.setContentHtmlByContainerElementSelector(contentHtmlByContainerElementSelector.entrySet().stream()
+				.filter(entry -> entry.getValue() != null) // Map.copyOf() does not support null values!
+				.collect(Collectors.toUnmodifiableMap(Map.Entry::getKey, Map.Entry::getValue)));
+		return ui;
+	}
+
+	@Override
+	public void handleUiEvent(UiEvent event) {
+
+	}
+
+	public String getHtml() {
+		return html;
+	}
+
+	public void setHtml(String html) {
+		this.html = html;
+	}
+
+	public void addComponent(String containerSelector, Component component) {
+		addComponent(containerSelector, component, false);
+	}
+
+	public void addComponent(String containerSelector, Component component, boolean clearContainer) {
+		this.componentsByContainerElementSelector.computeIfAbsent(containerSelector, s -> new ArrayList<>())
+				.add(component);
+		this.queueCommandIfRendered(() -> new UiHtmlView.AddComponentCommand(getId(), containerSelector, component.createUiReference(), clearContainer));
+	}
+
+	public void removeComponent(Component component) {
+		componentsByContainerElementSelector.entrySet().removeIf(entry -> entry.getValue() == component);
+		this.queueCommandIfRendered(() -> new UiHtmlView.RemoveComponentCommand(getId(), component.createUiReference()));
+	}
+
+	public void setContentHtml(String containerElementSelector, String html) {
+		contentHtmlByContainerElementSelector.put(containerElementSelector, html);
+		this.queueCommandIfRendered(() -> new UiHtmlView.SetContentHtmlCommand(getId(), containerElementSelector, html));
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/iframe/IFrame.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/iframe/IFrame.java
index e924745f0..a0d24da00 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/iframe/IFrame.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/iframe/IFrame.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -38,7 +38,7 @@ public IFrame(String url) {
 
 	@Override
 	public UiComponent createUiComponent() {
-		UiIFrame uiIFrame = new UiIFrame(getId()).setUrl(url);
+		UiIFrame uiIFrame = new UiIFrame().setUrl(url);
 		mapAbstractUiComponentProperties(uiIFrame);
 		return uiIFrame;
 	}
@@ -50,11 +50,6 @@ public void handleUiEvent(UiEvent event) {
 		}
 	}
 
-	@Override
-	protected void doDestroy() {
-
-	}
-
 	public String getUrl() {
 		return url;
 	}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/imagecropper/ImageCropper.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/imagecropper/ImageCropper.java
index 3c244c538..e8ac13566 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/imagecropper/ImageCropper.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/imagecropper/ImageCropper.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -40,7 +40,9 @@ public ImageCropper() {
 
 	@Override
 	public UiComponent createUiComponent() {
-		return new UiImageCropper(getId(), imageUrl, selectionMode.toUiImageCropperSelectionMode(), aspectRatio);
+		UiImageCropper uiImageCropper = new UiImageCropper(imageUrl, selectionMode.toUiImageCropperSelectionMode(), aspectRatio);
+		mapAbstractUiComponentProperties(uiImageCropper);
+		return uiImageCropper;
 	}
 
 	@Override
@@ -92,8 +94,4 @@ public void setSelection(ImageCropperSelection selection) {
 		queueCommandIfRendered(() -> new UiImageCropper.SetSelectionCommand(getId(), selection.createUiImageCropperSelection()));
 	}
 
-	@Override
-	protected void doDestroy() {
-
-	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/imagecropper/ImageCropperSelection.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/imagecropper/ImageCropperSelection.java
index c11a9cc1b..354f9105c 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/imagecropper/ImageCropperSelection.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/imagecropper/ImageCropperSelection.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/imagecropper/ImageCropperSelectionMode.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/imagecropper/ImageCropperSelectionMode.java
index 2b7368928..784e301e6 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/imagecropper/ImageCropperSelectionMode.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/imagecropper/ImageCropperSelectionMode.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/infiniteitemview/AbstractInfiniteItemViewModel.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/infiniteitemview/AbstractInfiniteItemViewModel.java
index 5349c51e4..99e7b4702 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/infiniteitemview/AbstractInfiniteItemViewModel.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/infiniteitemview/AbstractInfiniteItemViewModel.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -24,9 +24,9 @@
 public abstract class AbstractInfiniteItemViewModel<RECORD> implements InfiniteItemViewModel<RECORD> {
 
 	public final Event<Void> onAllDataChanged = new Event<>();
-	public final Event<RECORD> onRecordAdded = new Event<>();
-	public final Event<RECORD> onRecordChanged = new Event<>();
-	public final Event<RECORD> onRecordDeleted = new Event<>();
+	public final Event<RecordsAddedEvent<RECORD>> onRecordsAdded = new Event<>();
+	public final Event<RecordsChangedEvent<RECORD>> onRecordsChanged = new Event<>();
+	public final Event<RecordsRemovedEvent<RECORD>> onRecordsDeleted = new Event<>();
 
 	@Override
 	public Event<Void> onAllDataChanged() {
@@ -34,17 +34,17 @@ public Event<Void> onAllDataChanged() {
 	}
 
 	@Override
-	public Event<RECORD> onRecordAdded() {
-		return onRecordAdded;
+	public Event<RecordsAddedEvent<RECORD>> onRecordsAdded() {
+		return onRecordsAdded;
 	}
 
 	@Override
-	public Event<RECORD> onRecordChanged() {
-		return onRecordChanged;
+	public Event<RecordsChangedEvent<RECORD>> onRecordsChanged() {
+		return onRecordsChanged;
 	}
 
 	@Override
-	public Event<RECORD> onRecordDeleted() {
-		return onRecordDeleted;
+	public Event<RecordsRemovedEvent<RECORD>> onRecordsRemoved() {
+		return onRecordsDeleted;
 	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/infiniteitemview/AbstractInfiniteListComponent.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/infiniteitemview/AbstractInfiniteListComponent.java
new file mode 100644
index 000000000..1cb7ae11e
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/infiniteitemview/AbstractInfiniteListComponent.java
@@ -0,0 +1,277 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.infiniteitemview;
+
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+import org.teamapps.databinding.ObservableValue;
+import org.teamapps.databinding.TwoWayBindableValueImpl;
+import org.teamapps.dto.UiIdentifiableClientRecord;
+import org.teamapps.dto.UiTableClientRecord;
+import org.teamapps.event.Event;
+import org.teamapps.ux.cache.record.EqualsAndHashCode;
+import org.teamapps.ux.cache.record.ItemRange;
+import org.teamapps.ux.cache.record.RecordAndClientRecord;
+import org.teamapps.ux.cache.record.RenderedRecordsCache;
+import org.teamapps.ux.component.AbstractComponent;
+
+import java.lang.invoke.MethodHandles;
+import java.util.ArrayList;
+import java.util.List;
+import java.util.function.Consumer;
+
+public abstract class AbstractInfiniteListComponent<RECORD, MODEL extends InfiniteListModel<RECORD>> extends AbstractComponent {
+
+	private static final Logger LOGGER = LoggerFactory.getLogger(MethodHandles.lookup().lookupClass());
+
+	public final Event<ItemRange> onDisplayedRangeChanged = new Event<>();
+
+	private final Consumer<Void> modelOnAllDataChangedListener = aVoid -> this.refresh();
+	private final Consumer<RecordsAddedEvent<RECORD>> modelOnRecordsAddedListener = this::handleModelRecordsAdded;
+	private final Consumer<RecordsChangedEvent<RECORD>> modelOnRecordsChangedListener = this::handleModelRecordsChanged;
+	private final Consumer<RecordsRemovedEvent<RECORD>> modelOnRecordsDeletedListener = this::handleModelRecordsRemoved;
+
+	private final TwoWayBindableValueImpl<Integer> count = new TwoWayBindableValueImpl<>(0);
+
+	private MODEL model;
+	protected EqualsAndHashCode<RECORD> customEqualsAndHashCode = EqualsAndHashCode.bypass();
+	protected RenderedRecordsCache<RECORD> renderedRecords = new RenderedRecordsCache<>();
+	private ItemRange displayedRange = ItemRange.startEnd(0, 0);
+
+	public AbstractInfiniteListComponent(MODEL model) {
+		this.model = model;
+	}
+
+	public MODEL getModel() {
+		return model;
+	}
+
+	public void setModel(MODEL model) {
+		unregisterModelListeners();
+		this.model = model;
+		if (model != null) {
+			preRegisteringModel(model);
+			model.onAllDataChanged().addListener(this.modelOnAllDataChangedListener);
+			model.onRecordsAdded().addListener(this.modelOnRecordsAddedListener);
+			model.onRecordsChanged().addListener(this.modelOnRecordsChangedListener);
+			model.onRecordsRemoved().addListener(this.modelOnRecordsDeletedListener);
+		}
+		refresh();
+	}
+
+	protected void preRegisteringModel(MODEL model) {
+		// override if needed
+	}
+
+	private void unregisterModelListeners() {
+		this.model.onAllDataChanged().removeListener(this.modelOnAllDataChangedListener);
+		this.model.onRecordsAdded().removeListener(this.modelOnRecordsAddedListener);
+		this.model.onRecordsChanged().removeListener(this.modelOnRecordsChangedListener);
+		this.model.onRecordsRemoved().removeListener(this.modelOnRecordsDeletedListener);
+	}
+
+	public void refresh() {
+		count.set(-1);
+		sendFullDisplayedRange();
+	}
+
+	public void rerenderRecord(RECORD record) {
+		if (!isRendered()) {
+			return;
+		}
+		int recordIndex = renderedRecords.getIndex(record);
+		if (recordIndex >= 0) {
+			List<RECORD> changedRecords = List.of(record);
+			UiRecordMappingResult<RECORD> uiRecordMappingResult = mapToClientRecords(changedRecords);
+			RecordAndClientRecord<RECORD> recordRecordAndClientRecord = uiRecordMappingResult.recordAndClientRecords.get(0);
+			renderedRecords.updateRecord(recordRecordAndClientRecord.getRecord(), recordRecordAndClientRecord.getUiRecord());
+			updateClientRenderData(List.of(recordRecordAndClientRecord.getUiRecord()));
+		}
+	}
+
+	private void sendFullDisplayedRange() {
+		if (!isRendered()) {
+			return;
+		}
+		List<RECORD> records = retrieveRecords(displayedRange.getStart(), displayedRange.getLength());
+		UiRecordMappingResult<RECORD> uiRecordMappingResult = mapToClientRecords(records);
+		renderedRecords.clear();
+		renderedRecords.addNoShift(displayedRange.getStart(), uiRecordMappingResult.recordAndClientRecords);
+		updateClientRenderData(uiRecordMappingResult.newUiRecords);
+	}
+
+	protected void handleScrollOrResize(ItemRange newRange) {
+		onDisplayedRangeChanged.fire(newRange);
+		var oldRange = this.displayedRange;
+		this.displayedRange = newRange;
+		LOGGER.debug("new displayedRange: {}", newRange);
+		if (newRange.overlaps(oldRange)) {
+			List<UiIdentifiableClientRecord> newUiRecords = new ArrayList<>();
+			boolean recordsRemoved = false;
+			if (newRange.getStart() < oldRange.getStart()) {
+				List<RECORD> records = retrieveRecords(newRange.getStart(), oldRange.getStart() - newRange.getStart());
+				UiRecordMappingResult<RECORD> uiRecordMappingResult = mapToClientRecords(records);
+				renderedRecords.addNoShift(displayedRange.getStart(), uiRecordMappingResult.recordAndClientRecords);
+				LOGGER.debug("newRange.start < oldRange.start: {} < {} so adding {} uiRecords",
+						newRange, oldRange, uiRecordMappingResult.newUiRecords.size());
+				newUiRecords.addAll(uiRecordMappingResult.newUiRecords);
+			} else if (newRange.getStart() > oldRange.getStart()) {
+				renderedRecords.removeBeforeNoShift(newRange.getStart());
+				recordsRemoved = true;
+			}
+			if (newRange.getEnd() > oldRange.getEnd()) {
+				List<RECORD> records = retrieveRecords(oldRange.getEnd(), newRange.getEnd() - oldRange.getEnd());
+				UiRecordMappingResult<RECORD> uiRecordMappingResult = mapToClientRecords(records);
+				renderedRecords.addNoShift(oldRange.getEnd(), uiRecordMappingResult.recordAndClientRecords);
+				newUiRecords.addAll(uiRecordMappingResult.newUiRecords);
+			} else if (newRange.getEnd() < oldRange.getEnd() && newRange.getEnd() < getModelCount()) {
+				renderedRecords.removeAfterNoShift(newRange.getEnd());
+				recordsRemoved = true;
+			}
+			boolean recordsAdded = newUiRecords.size() > 0;
+			if (recordsAdded || recordsRemoved) {
+				updateClientRenderData(newUiRecords);
+			}
+		} else {
+			LOGGER.debug("no overlap!");
+			sendFullDisplayedRange();
+		}
+		LOGGER.debug("displayedRange after scroll update: {}; renderedRecords.size: {}", displayedRange, renderedRecords.size());
+	}
+
+	protected void handleModelRecordsAdded(RecordsAddedEvent<RECORD> changeEvent) {
+		count.set(count.get() + changeEvent.getLength());
+		if (!isRendered()) {
+			return;
+		}
+		if (changeEvent.getStart() < displayedRange.getEnd()) {
+			int newRecordsStartIndex = Math.max(changeEvent.getStart(), displayedRange.getStart());
+			int newRecordsLength = Math.min(changeEvent.getLength(), Math.min(displayedRange.getEnd() - changeEvent.getStart(), displayedRange.getLength()));
+			List<RECORD> newRecords = retrieveRecords(newRecordsStartIndex, newRecordsLength);
+			UiRecordMappingResult<RECORD> uiRecordMappingResult = mapToClientRecords(newRecords);
+			renderedRecords.insertShifting(changeEvent.getStart(), uiRecordMappingResult.recordAndClientRecords);
+
+			if (displayedRange.getLength() < renderedRecords.size()) {
+				renderedRecords.removeNoShift(renderedRecords.getStartIndex() + displayedRange.getLength(), renderedRecords.getEndIndex());
+			}
+
+			updateClientRenderData(uiRecordMappingResult.newUiRecords);
+		}
+	}
+
+	protected void handleModelRecordsChanged(RecordsChangedEvent<RECORD> changeEvent) {
+		if (!isRendered()) {
+			return;
+		}
+		if (changeEvent.getItemRange().overlaps(displayedRange)) {
+			int queryStartIndex = Math.max(changeEvent.getStart(), displayedRange.getStart());
+			int queryEndIndex = Math.min(changeEvent.getEnd(), displayedRange.getEnd());
+			List<RECORD> changedRecords = changeEvent.getRecords()
+					.map(records -> records.subList(queryStartIndex - changeEvent.getStart(), queryEndIndex - changeEvent.getStart()))
+					.orElseGet(() -> retrieveRecords(queryStartIndex, queryEndIndex - queryStartIndex));
+			UiRecordMappingResult<RECORD> uiRecordMappingResult = mapToClientRecords(changedRecords);
+			renderedRecords.removeNoShift(queryStartIndex, queryStartIndex + changedRecords.size());
+			renderedRecords.addNoShift(queryStartIndex, uiRecordMappingResult.recordAndClientRecords);
+			updateClientRenderData(uiRecordMappingResult.newUiRecords);
+		}
+	}
+
+	protected void handleModelRecordsRemoved(RecordsRemovedEvent<RECORD> deleteEvent) {
+		count.set(count.get() - deleteEvent.getLength());
+		if (!isRendered()) {
+			return;
+		}
+		if (deleteEvent.getStart() < displayedRange.getEnd()) {
+			int removedRecordsStartIndex = Math.max(deleteEvent.getStart(), displayedRange.getStart());
+			int removedRecordsLength = Math.min(deleteEvent.getLength(), Math.min(displayedRange.getEnd() - deleteEvent.getStart(), displayedRange.getLength()));
+			int removeIndexInsideList = removedRecordsStartIndex - displayedRange.getStart();
+			renderedRecords.removeNoShift(removedRecordsStartIndex, removedRecordsStartIndex + removedRecordsLength);
+			List<RECORD> newRecords = retrieveRecords(displayedRange.getEnd() - removedRecordsLength, removedRecordsLength);
+			UiRecordMappingResult<RECORD> uiRecordMappingResult = mapToClientRecords(newRecords);
+			renderedRecords.addNoShift(renderedRecords.getEndIndex(), uiRecordMappingResult.recordAndClientRecords);
+			updateClientRenderData(uiRecordMappingResult.newUiRecords);
+		}
+	}
+
+	protected void updateSingleRecordOnClient(RECORD record) {
+		if (isRendered()) {
+			UiTableClientRecord uiRecord = (UiTableClientRecord) renderedRecords.getUiRecord(record);
+			int index = renderedRecords.getIndex(record);
+			sendUpdateDataCommandToClient(index, renderedRecords.getUiRecordIds(), List.of(uiRecord), getModelCount());
+		}
+	}
+
+	protected int getModelCount() {
+		if (count.get() < 0) {
+			count.set(model.getCount());
+		}
+		return count.get();
+	}
+
+	protected abstract List<RECORD> retrieveRecords(int startIndex, int length);
+
+	private void updateClientRenderData(List<UiIdentifiableClientRecord> newUiRecords) {
+		LOGGER.debug("newUiRecords: {}", newUiRecords.size());
+		sendUpdateDataCommandToClient(displayedRange.getStart(), renderedRecords.getUiRecordIds(), newUiRecords, getModelCount());
+	}
+
+	protected abstract void sendUpdateDataCommandToClient(int start, List<Integer> uiRecordIds, List<UiIdentifiableClientRecord> newUiRecords, int totalNumberOfRecords);
+
+	private UiRecordMappingResult<RECORD> mapToClientRecords(List<RECORD> newRecords) {
+		List<UiIdentifiableClientRecord> newUiRecords = new ArrayList<>();
+		List<RecordAndClientRecord<RECORD>> recordAndClientRecords = new ArrayList<>();
+		for (RECORD r : newRecords) {
+			UiIdentifiableClientRecord existingUiRecord = renderedRecords.getUiRecord(r);
+			UiIdentifiableClientRecord newUiRecord = createClientRecord(r);
+			boolean isNew = existingUiRecord == null || !existingUiRecord.getValues().equals(newUiRecord.getValues());
+			if (isNew) {
+				newUiRecords.add(newUiRecord);
+			}
+			recordAndClientRecords.add(new RecordAndClientRecord<>(r, isNew ? newUiRecord : existingUiRecord));
+		}
+		return new UiRecordMappingResult<>(recordAndClientRecords, newUiRecords);
+	}
+
+	protected abstract UiIdentifiableClientRecord createClientRecord(RECORD record);
+
+	private static class UiRecordMappingResult<RECORD> {
+		List<RecordAndClientRecord<RECORD>> recordAndClientRecords;
+		List<UiIdentifiableClientRecord> newUiRecords;
+
+		public UiRecordMappingResult(List<RecordAndClientRecord<RECORD>> recordAndClientRecords, List<UiIdentifiableClientRecord> newUiRecords) {
+			this.recordAndClientRecords = recordAndClientRecords;
+			this.newUiRecords = newUiRecords;
+		}
+	}
+
+	public ObservableValue<Integer> getCount() {
+		return count;
+	}
+
+	public EqualsAndHashCode<RECORD> getCustomEqualsAndHashCode() {
+		return customEqualsAndHashCode;
+	}
+
+	public void setCustomEqualsAndHashCode(EqualsAndHashCode<RECORD> customEqualsAndHashCode) {
+		this.customEqualsAndHashCode = customEqualsAndHashCode;
+		this.renderedRecords = new RenderedRecordsCache<>(customEqualsAndHashCode);
+		refresh();
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/infiniteitemview/InfiniteItemView.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/infiniteitemview/InfiniteItemView.java
index ece486910..c0dae118b 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/infiniteitemview/InfiniteItemView.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/infiniteitemview/InfiniteItemView.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -21,23 +21,31 @@
 
 import org.teamapps.data.extract.BeanPropertyExtractor;
 import org.teamapps.data.extract.PropertyExtractor;
+import org.teamapps.data.extract.PropertyProvider;
 import org.teamapps.dto.UiComponent;
 import org.teamapps.dto.UiEvent;
 import org.teamapps.dto.UiIdentifiableClientRecord;
 import org.teamapps.dto.UiInfiniteItemView;
+import org.teamapps.dto.UiInfiniteItemViewDataRequest;
 import org.teamapps.event.Event;
-import org.teamapps.event.EventListener;
-import org.teamapps.ux.cache.CacheManipulationHandle;
-import org.teamapps.ux.cache.ClientRecordCache;
+import org.teamapps.ux.cache.record.legacy.CacheManipulationHandle;
+import org.teamapps.ux.cache.record.legacy.ClientRecordCache;
 import org.teamapps.ux.component.AbstractComponent;
-import org.teamapps.ux.component.itemview.ItemViewItemJustification;
+import org.teamapps.ux.component.Component;
+import org.teamapps.ux.component.itemview.ItemViewRowJustification;
 import org.teamapps.ux.component.itemview.ItemViewVerticalItemAlignment;
 import org.teamapps.ux.component.template.BaseTemplate;
 import org.teamapps.ux.component.template.Template;
 
 import java.util.Collections;
 import java.util.List;
+import java.util.function.Consumer;
+import java.util.function.Function;
 
+/**
+ * @deprecated Use {@link InfiniteItemView2} instead!
+ */
+@Deprecated
 public class InfiniteItemView<RECORD> extends AbstractComponent {
 
 	public final Event<ItemClickedEventData<RECORD>> onItemClicked = new Event<>();
@@ -47,17 +55,25 @@ public class InfiniteItemView<RECORD> extends AbstractComponent {
 	private float itemWidth;
 	private int rowHeight;
 	private int horizontalItemMargin = 0;
-	private ItemViewItemJustification itemJustification = ItemViewItemJustification.LEFT;
+	boolean autoHeight = false; // make this component set its own height using totalNumberOfRecords! Use with max-height to preserve infinite scrolling!
+	private ItemViewRowJustification itemJustification = ItemViewRowJustification.LEFT;
 	private ItemViewVerticalItemAlignment verticalItemAlignment = ItemViewVerticalItemAlignment.STRETCH;
 
 	private InfiniteItemViewModel<RECORD> model = new ListInfiniteItemViewModel<>(Collections.emptyList());
-	private PropertyExtractor<RECORD> itemPropertyExtractor = new BeanPropertyExtractor<>();
-	private final ClientRecordCache<RECORD, UiIdentifiableClientRecord> itemCache;
+	private PropertyProvider<RECORD> itemPropertyProvider = new BeanPropertyExtractor<>();
+	protected final ClientRecordCache<RECORD, UiIdentifiableClientRecord> itemCache;
+
+	private final Consumer<Void> modelOnAllDataChangedListener = aVoid -> this.refresh();
+	private final Consumer<RecordsAddedEvent<RECORD>> modelOnRecordAddedListener = x -> this.refresh();
+	private final Consumer<RecordsChangedEvent<RECORD>> modelOnRecordChangedListener = x -> this.refresh();
+	private final Consumer<RecordsRemovedEvent<RECORD>> modelOnRecordDeletedListener = x -> this.refresh();
+
+	private Function<RECORD, Component> contextMenuProvider = null;
+	private int lastSeenContextMenuRequestId;
 
-	private EventListener<Void> modelOnAllDataChangedListener = aVoid -> this.resetClientSideData();
-	private EventListener<RECORD> modelOnRecordAddedListener = record -> this.resetClientSideData();
-	private EventListener<RECORD> modelOnRecordChangedListener = record -> this.resetClientSideData();
-	private EventListener<RECORD> modelOnRecordDeletedListener = record -> this.resetClientSideData();
+	private int displayedRangeStart = 0;
+	private int displayedRangeLength = numberOfInitialRecords;
+	private List<Integer> viewportDisplayedRecordClientIds = Collections.emptyList();
 
 	public InfiniteItemView(Template itemTemplate, float itemWidth, int rowHeight) {
 		this.itemTemplate = itemTemplate;
@@ -66,9 +82,10 @@ public InfiniteItemView(Template itemTemplate, float itemWidth, int rowHeight) {
 
 		itemCache = new ClientRecordCache<>(this::createUiIdentifiableClientRecord);
 		itemCache.setMaxCapacity(1000);
+		itemCache.setPurgeDecider((record, clientId) -> !viewportDisplayedRecordClientIds.contains(clientId));
 		itemCache.setPurgeListener(operationHandle -> {
 			if (isRendered()) {
-				List<Integer> removedItemIds = operationHandle.getResult();
+				List<Integer> removedItemIds = operationHandle.getAndClearResult();
 				getSessionContext().queueCommand(new UiInfiniteItemView.RemoveDataCommand(getId(), removedItemIds), aVoid -> operationHandle.commit());
 			} else {
 				operationHandle.commit();
@@ -86,42 +103,75 @@ public InfiniteItemView() {
 
 	@Override
 	public UiComponent createUiComponent() {
-		UiInfiniteItemView uiComponent = new UiInfiniteItemView(getId(), itemTemplate.createUiTemplate(), rowHeight);
-		mapAbstractUiComponentProperties(uiComponent);
+		UiInfiniteItemView ui = new UiInfiniteItemView(itemTemplate.createUiTemplate(), rowHeight);
+		mapAbstractUiComponentProperties(ui);
 		int recordCount = model.getCount();
 		CacheManipulationHandle<List<UiIdentifiableClientRecord>> cacheResponse = itemCache.replaceRecords(model.getRecords(0, Math.min(recordCount, numberOfInitialRecords)));
 		cacheResponse.commit();
-		uiComponent.setData(cacheResponse.getResult());
-		uiComponent.setTotalNumberOfRecords(recordCount);
-		uiComponent.setItemWidth(itemWidth);
-		uiComponent.setHorizontalItemMargin(horizontalItemMargin);
-		uiComponent.setItemJustification(itemJustification.toUiItemJustification());
-		uiComponent.setVerticalItemAlignment(verticalItemAlignment.toUiItemJustification());
-		return uiComponent;
+		ui.setData(cacheResponse.getAndClearResult());
+		ui.setTotalNumberOfRecords(recordCount);
+		ui.setItemWidth(itemWidth);
+		ui.setHorizontalItemMargin(horizontalItemMargin);
+		ui.setItemJustification(itemJustification.toUiItemJustification());
+		ui.setVerticalItemAlignment(verticalItemAlignment.toUiItemJustification());
+		ui.setAutoHeight(autoHeight);
+		ui.setContextMenuEnabled(contextMenuProvider != null);
+		return ui;
 	}
 
 	@Override
 	public void handleUiEvent(UiEvent event) {
 		switch (event.getUiEventType()) {
-			case UI_INFINITE_ITEM_VIEW_DATA_REQUEST:
-				UiInfiniteItemView.DataRequestEvent dataRequestEvent = (UiInfiniteItemView.DataRequestEvent) event;
-				int startIndex = dataRequestEvent.getStartIndex();
-				int length = dataRequestEvent.getLength();
-				sendRecords(startIndex, length, false);
+			case UI_INFINITE_ITEM_VIEW_DISPLAYED_RANGE_CHANGED:
+				UiInfiniteItemView.DisplayedRangeChangedEvent rangeChangedEvent = (UiInfiniteItemView.DisplayedRangeChangedEvent) event;
+				viewportDisplayedRecordClientIds = rangeChangedEvent.getDisplayedRecordIds();
+				displayedRangeStart = rangeChangedEvent.getStartIndex();
+				displayedRangeLength = rangeChangedEvent.getLength();
+				if (rangeChangedEvent.getDataRequest() != null) {
+					UiInfiniteItemViewDataRequest dataRequest = rangeChangedEvent.getDataRequest();
+					int startIndex = dataRequest.getStartIndex();
+					int length = dataRequest.getLength();
+					this.sendRecords(startIndex, length, false);
+				}
 				break;
-			case UI_INFINITE_ITEM_VIEW_ITEM_CLICKED:
+			case UI_INFINITE_ITEM_VIEW_ITEM_CLICKED: {
 				UiInfiniteItemView.ItemClickedEvent itemClickedEvent = (UiInfiniteItemView.ItemClickedEvent) event;
 				RECORD record = itemCache.getRecordByClientId(itemClickedEvent.getRecordId());
 				if (record != null) {
 					onItemClicked.fire(new ItemClickedEventData<>(record, itemClickedEvent.getIsDoubleClick()));
 				}
 				break;
+			}
+			case UI_INFINITE_ITEM_VIEW_CONTEXT_MENU_REQUESTED: {
+				UiInfiniteItemView.ContextMenuRequestedEvent e = (UiInfiniteItemView.ContextMenuRequestedEvent) event;
+				lastSeenContextMenuRequestId = e.getRequestId();
+				RECORD record = itemCache.getRecordByClientId(e.getRecordId());
+				if (record != null && contextMenuProvider != null) {
+					Component contextMenuContent = contextMenuProvider.apply(record);
+					if (contextMenuContent != null) {
+						queueCommandIfRendered(() -> new UiInfiniteItemView.SetContextMenuContentCommand(getId(), e.getRequestId(), contextMenuContent.createUiReference()));
+					} else {
+						queueCommandIfRendered(() -> new UiInfiniteItemView.CloseContextMenuCommand(getId(), e.getRequestId()));
+					}
+				} else {
+					closeContextMenu();
+				}
+				break;
+			}
 		}
 	}
 
+	public boolean isAutoHeight() {
+		return autoHeight;
+	}
+
+	public void setAutoHeight(boolean autoHeight) {
+		this.autoHeight = autoHeight;
+	}
+
 	private UiIdentifiableClientRecord createUiIdentifiableClientRecord(RECORD record) {
 		UiIdentifiableClientRecord clientRecord = new UiIdentifiableClientRecord();
-		clientRecord.setValues(itemPropertyExtractor.getValues(record, itemTemplate.getDataKeys()));
+		clientRecord.setValues(itemPropertyProvider.getValues(record, itemTemplate.getPropertyNames()));
 		return clientRecord;
 	}
 
@@ -159,8 +209,11 @@ public int getRowHeight() {
 	}
 
 	public void setRowHeight(int rowHeight) {
+		boolean changed = rowHeight != this.rowHeight;
 		this.rowHeight = rowHeight;
-		reRenderIfRendered();
+		if (changed) {
+			reRenderIfRendered();
+		}
 	}
 
 	public ItemViewVerticalItemAlignment getVerticalItemAlignment() {
@@ -182,11 +235,11 @@ public InfiniteItemView<RECORD> setHorizontalItemMargin(int horizontalItemMargin
 		return this;
 	}
 
-	public ItemViewItemJustification getItemJustification() {
+	public ItemViewRowJustification getItemJustification() {
 		return itemJustification;
 	}
 
-	public InfiniteItemView<RECORD> setItemJustification(ItemViewItemJustification itemJustification) {
+	public InfiniteItemView<RECORD> setItemJustification(ItemViewRowJustification itemJustification) {
 		this.itemJustification = itemJustification;
 		queueCommandIfRendered(() -> new UiInfiniteItemView.SetItemJustificationCommand(getId(), itemJustification.toUiItemJustification()));
 		return this;
@@ -196,47 +249,52 @@ public InfiniteItemViewModel<RECORD> getModel() {
 		return model;
 	}
 
-	public PropertyExtractor<RECORD> getItemPropertyExtractor() {
-		return itemPropertyExtractor;
+	public PropertyProvider<RECORD> getItemPropertyProvider() {
+		return itemPropertyProvider;
+	}
+
+	public void setItemPropertyProvider(PropertyProvider<RECORD> propertyProvider) {
+		this.itemPropertyProvider = propertyProvider;
 	}
 
-	public void setItemPropertyExtractor(PropertyExtractor<RECORD> itemPropertyExtractor) {
-		this.itemPropertyExtractor = itemPropertyExtractor;
+	public void setItemPropertyExtractor(PropertyExtractor<RECORD> propertyExtractor) {
+		this.setItemPropertyProvider(propertyExtractor);
 	}
 
 	public InfiniteItemView<RECORD> setModel(InfiniteItemViewModel<RECORD> model) {
 		unregisterModelListeners();
 		this.model = model;
-		resetClientSideData();
+		refresh();
 		model.onAllDataChanged().addListener(this.modelOnAllDataChangedListener);
-		model.onRecordAdded().addListener(this.modelOnRecordAddedListener);
-		model.onRecordChanged().addListener(this.modelOnRecordChangedListener);
-		model.onRecordDeleted().addListener(this.modelOnRecordDeletedListener);
+		model.onRecordsAdded().addListener(this.modelOnRecordAddedListener);
+		model.onRecordsChanged().addListener(this.modelOnRecordChangedListener);
+		model.onRecordsRemoved().addListener(this.modelOnRecordDeletedListener);
 		return this;
 	}
 
 	private void unregisterModelListeners() {
 		this.model.onAllDataChanged().removeListener(this.modelOnAllDataChangedListener);
-		this.model.onRecordAdded().removeListener(this.modelOnRecordAddedListener);
-		this.model.onRecordChanged().removeListener(this.modelOnRecordChangedListener);
-		this.model.onRecordDeleted().removeListener(this.modelOnRecordDeletedListener);
+		this.model.onRecordsAdded().removeListener(this.modelOnRecordAddedListener);
+		this.model.onRecordsChanged().removeListener(this.modelOnRecordChangedListener);
+		this.model.onRecordsRemoved().removeListener(this.modelOnRecordDeletedListener);
 	}
 
-	private void resetClientSideData() {
-		sendRecords(0, numberOfInitialRecords, true);
+	public void refresh() {
+		sendRecords(displayedRangeStart, displayedRangeLength, true);
 	}
 
-	private void sendRecords(int startIndex, int length, boolean clear) {
+	protected void sendRecords(int startIndex, int length, boolean clear) {
 		if (isRendered()) {
 			int totalCount = model.getCount();
-			List<RECORD> records = model.getRecords(startIndex, Math.min(totalCount - startIndex, length));
+			List<RECORD> records = model.getRecords(startIndex, Math.max(0, Math.min(totalCount - startIndex, length)));
 			CacheManipulationHandle<List<UiIdentifiableClientRecord>> cacheResponse;
 			if (clear) {
 				cacheResponse = itemCache.replaceRecords(records);
 			} else {
 				cacheResponse = itemCache.addRecords(records);
 			}
-			getSessionContext().queueCommand(new UiInfiniteItemView.AddDataCommand(getId(), startIndex, cacheResponse.getResult(), totalCount, clear), aVoid -> cacheResponse.commit());
+			getSessionContext().queueCommand(new UiInfiniteItemView.AddDataCommand(getId(), startIndex, cacheResponse.getAndClearResult(), totalCount, clear),
+					aVoid -> cacheResponse.commit());
 		}
 	}
 
@@ -244,8 +302,16 @@ public void setMaxCacheCapacity(int maxCapacity) {
 		itemCache.setMaxCapacity(maxCapacity);
 	}
 
-	@Override
-	protected void doDestroy() {
-		unregisterModelListeners();
+	public Function<RECORD, Component> getContextMenuProvider() {
+		return contextMenuProvider;
 	}
+
+	public void setContextMenuProvider(Function<RECORD, Component> contextMenuProvider) {
+		this.contextMenuProvider = contextMenuProvider;
+	}
+
+	public void closeContextMenu() {
+		queueCommandIfRendered(() -> new UiInfiniteItemView.CloseContextMenuCommand(getId(), this.lastSeenContextMenuRequestId));
+	}
+
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/infiniteitemview/InfiniteItemView2.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/infiniteitemview/InfiniteItemView2.java
new file mode 100644
index 000000000..bb48db537
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/infiniteitemview/InfiniteItemView2.java
@@ -0,0 +1,311 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.infiniteitemview;
+
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+import org.teamapps.data.extract.BeanPropertyExtractor;
+import org.teamapps.data.extract.PropertyExtractor;
+import org.teamapps.data.extract.PropertyProvider;
+import org.teamapps.dto.*;
+import org.teamapps.event.Event;
+import org.teamapps.ux.cache.record.DuplicateEntriesException;
+import org.teamapps.ux.cache.record.ItemRange;
+import org.teamapps.ux.component.Component;
+import org.teamapps.ux.component.format.HorizontalElementAlignment;
+import org.teamapps.ux.component.format.VerticalElementAlignment;
+import org.teamapps.ux.component.template.BaseTemplate;
+import org.teamapps.ux.component.template.Template;
+
+import java.lang.invoke.MethodHandles;
+import java.util.Collections;
+import java.util.List;
+import java.util.function.Function;
+
+public class InfiniteItemView2<RECORD> extends AbstractInfiniteListComponent<RECORD, InfiniteItemViewModel<RECORD>> {
+
+	private static final Logger LOGGER = LoggerFactory.getLogger(MethodHandles.lookup().lookupClass());
+
+	public final Event<ItemClickedEventData<RECORD>> onItemClicked = new Event<>();
+	public final Event<RECORD> onItemSelected = new Event<>();
+
+	private Template itemTemplate;
+	private float itemWidth;
+	private float itemHeight;
+	private HorizontalElementAlignment itemContentHorizontalAlignment = HorizontalElementAlignment.STRETCH;
+	private VerticalElementAlignment itemContentVerticalAlignment = VerticalElementAlignment.STRETCH;
+
+	private int itemPositionAnimationTime = 200;
+
+	private PropertyProvider<RECORD> itemPropertyProvider = new BeanPropertyExtractor<>();
+
+	private int clientRecordIdCounter = 0;
+
+	private Function<RECORD, Component> contextMenuProvider = null;
+	private int lastSeenContextMenuRequestId;
+
+	private boolean selectionEnabled;
+	private RECORD selectedRecord;
+
+	public InfiniteItemView2(Template itemTemplate, float itemWidth, int itemHeight) {
+		super(new ListInfiniteItemViewModel<>());
+		this.itemTemplate = itemTemplate;
+		this.itemWidth = itemWidth;
+		this.itemHeight = itemHeight;
+	}
+
+	public InfiniteItemView2(float itemWidth, int itemHeight) {
+		this(BaseTemplate.ITEM_VIEW_ITEM, itemWidth, itemHeight);
+	}
+
+	public InfiniteItemView2() {
+		this(BaseTemplate.ITEM_VIEW_ITEM, 300, 300);
+	}
+
+	@Override
+	public UiComponent createUiComponent() {
+		UiInfiniteItemView2 ui = new UiInfiniteItemView2(itemTemplate.createUiTemplate());
+		mapAbstractUiComponentProperties(ui);
+		ui.setItemWidth(itemWidth);
+		ui.setItemHeight(itemHeight);
+		// ui.setHorizontalSpacing(horizontalSpacing);
+		// ui.setVerticalSpacing(verticalSpacing);
+		ui.setItemContentHorizontalAlignment(itemContentHorizontalAlignment.toUiHorizontalElementAlignment());
+		ui.setItemContentVerticalAlignment(itemContentVerticalAlignment.toUiVerticalElementAlignment());
+		// ui.setRowHorizontalAlignment(rowHorizontalAlignment.toUiItemJustification());
+		ui.setItemPositionAnimationTime(itemPositionAnimationTime);
+		ui.setContextMenuEnabled(contextMenuProvider != null);
+		ui.setSelectionEnabled(selectionEnabled);
+		return ui;
+	}
+
+	@Override
+	public void handleUiEvent(UiEvent event) {
+		switch (event.getUiEventType()) {
+			case UI_INFINITE_ITEM_VIEW2_DISPLAYED_RANGE_CHANGED:
+				UiInfiniteItemView2.DisplayedRangeChangedEvent d = (UiInfiniteItemView2.DisplayedRangeChangedEvent) event;
+				try {
+					handleScrollOrResize(ItemRange.startLength(d.getStartIndex(), d.getLength()));
+				} catch (DuplicateEntriesException e) {
+					// if the model returned a duplicate entry while scrolling, the underlying data apparently changed.
+					// So try to refresh the whole data instead.
+					LOGGER.warn("DuplicateEntriesException while retrieving data from model. This means the underlying data of the model has changed without the model notifying this component, so will refresh the whole data of this component.");
+					refresh();
+				}
+				break;
+			case UI_INFINITE_ITEM_VIEW2_ITEM_CLICKED: {
+				UiInfiniteItemView2.ItemClickedEvent e = (UiInfiniteItemView2.ItemClickedEvent) event;
+				RECORD record = renderedRecords.getRecord(e.getRecordId());
+				if (record != null) {
+					onItemClicked.fire(new ItemClickedEventData<>(record, e.getIsDoubleClick()));
+				}
+				if (this.selectionEnabled) {
+					this.selectedRecord = record;
+					this.onItemSelected.fire(record);
+				}
+				break;
+			}
+			case UI_INFINITE_ITEM_VIEW2_CONTEXT_MENU_REQUESTED: {
+				UiInfiniteItemView2.ContextMenuRequestedEvent e = (UiInfiniteItemView2.ContextMenuRequestedEvent) event;
+				lastSeenContextMenuRequestId = e.getRequestId();
+				if (contextMenuProvider == null) {
+					closeContextMenu();
+				} else {
+					RECORD record = renderedRecords.getRecord(e.getRecordId());
+					if (record != null) {
+						Component contextMenuContent = contextMenuProvider.apply(record);
+						if (contextMenuContent != null) {
+							queueCommandIfRendered(() -> new UiInfiniteItemView2.SetContextMenuContentCommand(getId(), e.getRequestId(), contextMenuContent.createUiReference()));
+						} else {
+							queueCommandIfRendered(() -> new UiInfiniteItemView2.CloseContextMenuCommand(getId(), e.getRequestId()));
+						}
+					}
+				}
+				break;
+			}
+		}
+	}
+
+	@Override
+	protected List<RECORD> retrieveRecords(int startIndex, int length) {
+		if (startIndex > getModelCount() || length <= 0) {
+			return Collections.emptyList();
+		}
+		int actualStartIndex = Math.max(startIndex, 0);
+		int actualLength = Math.min(getModelCount() - startIndex, length);
+		return getModel().getRecords(actualStartIndex, actualLength);
+	}
+
+	@Override
+	protected void sendUpdateDataCommandToClient(int start, List<Integer> uiRecordIds, List<UiIdentifiableClientRecord> newUiRecords, int totalNumberOfRecords) {
+		queueCommandIfRendered(() -> {
+			LOGGER.debug("SENDING: renderedRange.start: {}; uiRecordIds.size: {}; renderedRecords.size: {}; totalCount: {}",
+					start, uiRecordIds.size(), renderedRecords.size(), totalNumberOfRecords);
+			return new UiInfiniteItemView2.SetDataCommand(
+					getId(),
+					start,
+					uiRecordIds,
+					(List) newUiRecords,
+					totalNumberOfRecords
+			);
+		});
+	}
+
+	@Override
+	protected UiInfiniteItemViewClientRecord createClientRecord(RECORD record) {
+		UiInfiniteItemViewClientRecord clientRecord = new UiInfiniteItemViewClientRecord();
+		clientRecord.setId(++clientRecordIdCounter);
+		clientRecord.setValues(itemPropertyProvider.getValues(record, itemTemplate.getPropertyNames()));
+		clientRecord.setSelected(record.equals(selectedRecord));
+		return clientRecord;
+	}
+
+	public Function<RECORD, Component> getContextMenuProvider() {
+		return contextMenuProvider;
+	}
+
+	public void setContextMenuProvider(Function<RECORD, Component> contextMenuProvider) {
+		this.contextMenuProvider = contextMenuProvider;
+	}
+
+	public void closeContextMenu() {
+		queueCommandIfRendered(() -> new UiInfiniteItemView2.CloseContextMenuCommand(getId(), this.lastSeenContextMenuRequestId));
+	}
+
+	public Template getItemTemplate() {
+		return itemTemplate;
+	}
+
+	public InfiniteItemView2<RECORD> setItemTemplate(Template itemTemplate) {
+		this.itemTemplate = itemTemplate;
+		queueCommandIfRendered(() -> new UiInfiniteItemView2.SetItemTemplateCommand(getId(), itemTemplate.createUiTemplate()));
+		return this;
+	}
+
+	public float getItemWidth() {
+		return itemWidth;
+	}
+
+	public InfiniteItemView2<RECORD> setItemWidth(float itemWidth) {
+		this.itemWidth = itemWidth;
+		queueCommandIfRendered(() -> new UiInfiniteItemView2.SetItemWidthCommand(getId(), itemWidth));
+		return this;
+	}
+
+	public float getItemHeight() {
+		return itemHeight;
+	}
+
+	public InfiniteItemView2<RECORD> setItemHeight(float itemHeight) {
+		this.itemHeight = itemHeight;
+		queueCommandIfRendered(() -> new UiInfiniteItemView2.SetItemHeightCommand(getId(), itemHeight));
+		return this;
+	}
+
+	// public float getHorizontalSpacing() {
+	// 	return horizontalSpacing;
+	// }
+	//
+	// public InfiniteItemView2<RECORD> setHorizontalSpacing(float horizontalSpacing) {
+	// 	this.horizontalSpacing = horizontalSpacing;
+	// 	queueCommandIfRendered(() -> new UiInfiniteItemView2.SetHorizontalSpacingCommand(getId(), horizontalSpacing));
+	// 	return this;
+	// }
+	//
+	// public float getVerticalSpacing() {
+	// 	return verticalSpacing;
+	// }
+	//
+	// public InfiniteItemView2<RECORD> setVerticalSpacing(float verticalSpacing) {
+	// 	this.verticalSpacing = verticalSpacing;
+	// 	queueCommandIfRendered(() -> new UiInfiniteItemView2.SetVerticalSpacingCommand(getId(), verticalSpacing));
+	// 	return this;
+	// }
+
+	public HorizontalElementAlignment getItemContentHorizontalAlignment() {
+		return itemContentHorizontalAlignment;
+	}
+
+	public InfiniteItemView2<RECORD> setItemContentHorizontalAlignment(HorizontalElementAlignment itemContentHorizontalAlignment) {
+		this.itemContentHorizontalAlignment = itemContentHorizontalAlignment;
+		queueCommandIfRendered(() -> new UiInfiniteItemView2.SetItemContentHorizontalAlignmentCommand(getId(), itemContentHorizontalAlignment.toUiHorizontalElementAlignment()));
+		return this;
+	}
+
+	public VerticalElementAlignment getItemContentVerticalAlignment() {
+		return itemContentVerticalAlignment;
+	}
+
+	public InfiniteItemView2<RECORD> setItemContentVerticalAlignment(VerticalElementAlignment itemContentVerticalAlignment) {
+		this.itemContentVerticalAlignment = itemContentVerticalAlignment;
+		queueCommandIfRendered(() -> new UiInfiniteItemView2.SetItemContentVerticalAlignmentCommand(getId(), itemContentVerticalAlignment.toUiVerticalElementAlignment()));
+		return this;
+	}
+
+	// public ItemViewRowJustification getRowHorizontalAlignment() {
+	// 	return rowHorizontalAlignment;
+	// }
+
+	// public InfiniteItemView2<RECORD> setRowHorizontalAlignment(ItemViewRowJustification rowHorizontalAlignment) {
+	// 	this.rowHorizontalAlignment = rowHorizontalAlignment;
+	// 	queueCommandIfRendered(() -> new UiInfiniteItemView2.SetRowHorizontalAlignmentCommand(getId(), rowHorizontalAlignment.toUiItemJustification()));
+	// 	return this;
+	// }
+
+	public int getItemPositionAnimationTime() {
+		return itemPositionAnimationTime;
+	}
+
+	public void setItemPositionAnimationTime(int itemPositionAnimationTime) {
+		this.itemPositionAnimationTime = itemPositionAnimationTime;
+		queueCommandIfRendered(() -> new UiInfiniteItemView2.SetItemPositionAnimationTimeCommand(getId(), itemPositionAnimationTime));
+	}
+
+	public PropertyProvider<RECORD> getItemPropertyProvider() {
+		return itemPropertyProvider;
+	}
+
+	public void setItemPropertyProvider(PropertyProvider<RECORD> propertyProvider) {
+		this.itemPropertyProvider = propertyProvider;
+	}
+
+	public void setItemPropertyExtractor(PropertyExtractor<RECORD> propertyExtractor) {
+		this.setItemPropertyProvider(propertyExtractor);
+	}
+
+	public boolean isSelectionEnabled() {
+		return selectionEnabled;
+	}
+
+	public void setSelectionEnabled(boolean selectionEnabled) {
+		this.selectionEnabled = selectionEnabled;
+		queueCommandIfRendered(() -> new UiInfiniteItemView2.SetSelectionEnabledCommand(getId(), selectionEnabled));
+	}
+
+	public RECORD getSelectedRecord() {
+		return selectedRecord;
+	}
+
+	public void setSelectedRecord(RECORD record) {
+		this.selectedRecord = record;
+		UiIdentifiableClientRecord uiRecord = renderedRecords.getUiRecord(record);
+		queueCommandIfRendered(() -> new UiInfiniteItemView2.SetSelectedRecordCommand(getId(), uiRecord != null ? uiRecord.getId(): null));
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/infiniteitemview/InfiniteItemViewModel.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/infiniteitemview/InfiniteItemViewModel.java
index 34ca9c29f..4593ea1c4 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/infiniteitemview/InfiniteItemViewModel.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/infiniteitemview/InfiniteItemViewModel.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,22 +19,6 @@
  */
 package org.teamapps.ux.component.infiniteitemview;
 
-import org.teamapps.event.Event;
-
-import java.util.List;
-
-public interface InfiniteItemViewModel<RECORD> {
-
-	int getCount();
-
-	List<RECORD> getRecords(int startIndex, int length);
-
-	Event<Void> onAllDataChanged();
-
-	Event<RECORD> onRecordAdded();
-
-	Event<RECORD> onRecordChanged();
-
-	Event<RECORD> onRecordDeleted();
+public interface InfiniteItemViewModel<RECORD> extends InfiniteListModel<RECORD> {
 
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/TimeGraphModel.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/infiniteitemview/InfiniteListModel.java
similarity index 64%
rename from teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/TimeGraphModel.java
rename to teamapps-ux/src/main/java/org/teamapps/ux/component/infiniteitemview/InfiniteListModel.java
index 9a35b1117..63df4003c 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/TimeGraphModel.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/infiniteitemview/InfiniteListModel.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,22 +17,22 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-package org.teamapps.ux.component.timegraph;
+package org.teamapps.ux.component.infiniteitemview;
 
 import org.teamapps.event.Event;
 
-import java.util.Collection;
 import java.util.List;
-import java.util.Map;
 
-public interface TimeGraphModel {
+public interface InfiniteListModel<RECORD> {
+	int getCount();
 
-	Event<Void> onDataChanged();
+	List<RECORD> getRecords(int startIndex, int length);
 
-	List<TimeGraphZoomLevel> getZoomLevels();
+	Event<Void> onAllDataChanged();
 
-	Map<String, List<LineChartDataPoint>> getDataPoints(Collection<String> lineIds, TimeGraphZoomLevel zoomLevel, Interval neededIntervalX);
+	Event<RecordsAddedEvent<RECORD>> onRecordsAdded();
 
-	Interval getDomainX(Collection<String> lineIds);
-	
+	Event<RecordsChangedEvent<RECORD>> onRecordsChanged();
+
+	Event<RecordsRemovedEvent<RECORD>> onRecordsRemoved();
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/infiniteitemview/ItemClickedEventData.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/infiniteitemview/ItemClickedEventData.java
index 80f914a4e..9c214bc93 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/infiniteitemview/ItemClickedEventData.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/infiniteitemview/ItemClickedEventData.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -36,5 +36,5 @@ public RECORD getRecord() {
 	public boolean isDoubleClick() {
 		return isDoubleClick;
 	}
-	
+
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/infiniteitemview/ListInfiniteItemViewModel.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/infiniteitemview/ListInfiniteItemViewModel.java
index 306050716..f625506c5 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/infiniteitemview/ListInfiniteItemViewModel.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/infiniteitemview/ListInfiniteItemViewModel.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,9 +19,12 @@
  */
 package org.teamapps.ux.component.infiniteitemview;
 
+import org.teamapps.ux.cache.record.ItemRange;
+
 import java.util.ArrayList;
 import java.util.Collections;
 import java.util.List;
+import java.util.stream.Collectors;
 
 public class ListInfiniteItemViewModel<RECORD> extends AbstractInfiniteItemViewModel<RECORD> {
 	private List<RECORD> records;
@@ -35,8 +38,55 @@ public ListInfiniteItemViewModel(List<RECORD> records) {
 	}
 
 	public void addRecord(RECORD record) {
-		this.records.add(record);
-		onRecordAdded.fire(record);
+		addRecord(records.size(), record);
+	}
+
+	public void addRecord(int index, RECORD record) {
+		this.records.add(index, record);
+		onRecordsAdded.fire(new RecordsAddedEvent<>(index, Collections.singletonList(record)));
+	}
+
+	public void addRecords(List<RECORD> records) {
+		addRecords(records.size(), records);
+	}
+
+	public void addRecords(int index, List<RECORD> records) {
+		this.records.addAll(index, records);
+		onRecordsAdded.fire(new RecordsAddedEvent<>(index, records));
+	}
+
+	public void removeRecord(RECORD record) {
+		removeRecord(records.indexOf(record));
+	}
+
+	public void removeRecord(int index) {
+		onRecordsDeleted.fire(new RecordsRemovedEvent<>(ItemRange.startLength(index, 1)));
+	}
+
+	public void removeRecord(int startIndex, int length) {
+		List<RECORD> subList = records.subList(startIndex, startIndex + length);
+		subList.clear();
+		onRecordsDeleted.fire(new RecordsRemovedEvent<>(ItemRange.startLength(startIndex, length)));
+	}
+
+	public void updateRecord(int index) {
+		onRecordsChanged.fire(new RecordsChangedEvent<>(index, List.of(records.get(index))));
+	}
+
+	public void updateRecords(int startIndex, int length) {
+		onRecordsChanged.fire(new RecordsChangedEvent<>(ItemRange.startLength(startIndex, length)));
+	}
+
+	public void replaceRecord(int index, RECORD record) {
+		records.set(index, record);
+		onRecordsChanged.fire(new RecordsChangedEvent<>(index, Collections.singletonList(record)));
+	}
+
+	public void replaceRecords(int startIndex, List<RECORD> records) {
+		for (int i = 0; i < records.size(); i++) {
+			records.set(startIndex + i, records.get(i));
+		}
+		onRecordsChanged.fire(new RecordsChangedEvent<>(ItemRange.startLength(startIndex, records.size())));
 	}
 
 	public void setRecords(List<RECORD> records) {
@@ -51,12 +101,6 @@ public int getCount() {
 
 	@Override
 	public List<RECORD> getRecords(int startIndex, int length) {
-		if (startIndex >= records.size()) {
-			return Collections.emptyList();
-		}
-		if (startIndex + length > records.size()) {
-			length = records.size() - startIndex;
-		}
-		return records.subList(startIndex, startIndex + length);
+		return records.stream().skip(startIndex).limit(length).collect(Collectors.toList());
 	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/infiniteitemview/RecordsAddedEvent.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/infiniteitemview/RecordsAddedEvent.java
new file mode 100644
index 000000000..cc9280de6
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/infiniteitemview/RecordsAddedEvent.java
@@ -0,0 +1,72 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.infiniteitemview;
+
+import org.teamapps.ux.cache.record.ItemRange;
+
+import java.util.List;
+import java.util.Objects;
+import java.util.Optional;
+
+public class RecordsAddedEvent<RECORD> {
+
+	private final ItemRange itemRange;
+	private final List<RECORD> records;
+
+	/**
+	 * Use this constructor if the model does not have the added items at hand.
+	 * This might happen when the model was not in charge of the actual change but got notified of it.
+	 * Views might not actually need to react on the change, anyway.
+	 * So forcing the model to retrieve the changed records does not make sense.
+	 */
+	public RecordsAddedEvent(ItemRange itemRange) {
+		this.itemRange = itemRange;
+		this.records = null;
+	}
+
+	/**
+	 * Use this constructor if the model has the added items at hand.
+	 */
+	public RecordsAddedEvent(int startIndex, List<RECORD> records) {
+		Objects.requireNonNull(records);
+		this.itemRange = ItemRange.startLength(startIndex, records.size());
+		this.records = records;
+	}
+
+	public ItemRange getItemRange() {
+		return itemRange;
+	}
+
+	public Optional<List<RECORD>> getRecords() {
+		return Optional.ofNullable(records);
+	}
+
+	public int getStart() {
+		return getItemRange().getStart();
+	}
+
+	public int getLength() {
+		return getItemRange().getLength();
+	}
+
+	public int getEnd() {
+		return getItemRange().getEnd();
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/infiniteitemview/RecordsChangedEvent.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/infiniteitemview/RecordsChangedEvent.java
new file mode 100644
index 000000000..af7bb5047
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/infiniteitemview/RecordsChangedEvent.java
@@ -0,0 +1,72 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.infiniteitemview;
+
+import org.teamapps.ux.cache.record.ItemRange;
+
+import java.util.List;
+import java.util.Objects;
+import java.util.Optional;
+
+public class RecordsChangedEvent<RECORD> {
+
+	private final ItemRange itemRange;
+	private final List<RECORD> records;
+
+	/**
+	 * Use this constructor if the model does not have the changed items at hand.
+	 * This might happen when the model was not in charge of the actual change but got notified of it.
+	 * Views might not actually need to react on the change, anyway.
+	 * So forcing the model to retrieve the changed records does not make sense.
+	 */
+	public RecordsChangedEvent(ItemRange itemRange) {
+		this.itemRange = itemRange;
+		this.records = null;
+	}
+
+	/**
+	 * Use this constructor if the model has the changed items at hand.
+	 */
+	public RecordsChangedEvent(int startIndex, List<RECORD> records) {
+		Objects.requireNonNull(records);
+		this.itemRange = ItemRange.startLength(startIndex, records.size());
+		this.records = records;
+	}
+
+	public ItemRange getItemRange() {
+		return itemRange;
+	}
+
+	public Optional<List<RECORD>> getRecords() {
+		return Optional.ofNullable(records);
+	}
+
+	public int getStart() {
+		return getItemRange().getStart();
+	}
+
+	public int getLength() {
+		return getItemRange().getLength();
+	}
+
+	public int getEnd() {
+		return getItemRange().getEnd();
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/infiniteitemview/RecordsRemovedEvent.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/infiniteitemview/RecordsRemovedEvent.java
new file mode 100644
index 000000000..83105b1b6
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/infiniteitemview/RecordsRemovedEvent.java
@@ -0,0 +1,53 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.infiniteitemview;
+
+import org.teamapps.ux.cache.record.ItemRange;
+
+public class RecordsRemovedEvent<RECORD> {
+
+	private final ItemRange itemRange;
+
+	/**
+	 * Use this constructor if the model does not have the changed items at hand.
+	 * This might happen when the model was not in charge of the actual change but got notified of it.
+	 * Views might not actually need to react on the change, anyway.
+	 * So forcing the model to retrieve the changed records does not make sense.
+	 */
+	public RecordsRemovedEvent(ItemRange itemRange) {
+		this.itemRange = itemRange;
+	}
+
+	public ItemRange getItemRange() {
+		return itemRange;
+	}
+
+	public int getStart() {
+		return getItemRange().getStart();
+	}
+
+	public int getLength() {
+		return getItemRange().getLength();
+	}
+
+	public int getEnd() {
+		return getItemRange().getEnd();
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/itemview/ItemClickedEventData.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/itemview/ItemClickedEventData.java
index a18255ae8..9d0b46026 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/itemview/ItemClickedEventData.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/itemview/ItemClickedEventData.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/itemview/ItemGroup.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/itemview/ItemGroup.java
index 60c437c30..28372f0ad 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/itemview/ItemGroup.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/itemview/ItemGroup.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -21,10 +21,11 @@
 
 import org.teamapps.data.extract.BeanPropertyExtractor;
 import org.teamapps.data.extract.PropertyExtractor;
+import org.teamapps.data.extract.PropertyProvider;
 import org.teamapps.dto.UiIdentifiableClientRecord;
 import org.teamapps.dto.UiItemViewItemGroup;
-import org.teamapps.ux.cache.CacheManipulationHandle;
-import org.teamapps.ux.cache.ClientRecordCache;
+import org.teamapps.ux.cache.record.legacy.CacheManipulationHandle;
+import org.teamapps.ux.cache.record.legacy.ClientRecordCache;
 import org.teamapps.ux.component.template.BaseTemplate;
 import org.teamapps.ux.component.template.Template;
 
@@ -43,7 +44,7 @@ public class ItemGroup<HEADERRECORD, RECORD> {
 
 	private boolean headerVisible = true;
 	private ItemViewFloatStyle floatStyle = ItemViewFloatStyle.HORIZONTAL_FLOAT;
-	private ItemViewItemJustification itemJustification = ItemViewItemJustification.LEFT;
+	private ItemViewRowJustification itemJustification = ItemViewRowJustification.LEFT;
 	private float buttonWidth = -1;
 	private int horizontalPadding = 0;
 	private int verticalPadding = 0;
@@ -51,7 +52,7 @@ public class ItemGroup<HEADERRECORD, RECORD> {
 	private int verticalItemMargin = 0;
 
 	private ItemGroupContainer<HEADERRECORD, RECORD> container;
-	private PropertyExtractor<RECORD> itemPropertyExtractor = new BeanPropertyExtractor<>();
+	private PropertyProvider<RECORD> itemPropertyProvider = new BeanPropertyExtractor<>();
 	private final ClientRecordCache<RECORD, UiIdentifiableClientRecord> itemCache = new ClientRecordCache<>(this::createUiIdentifiableClientRecord);
 
 	public ItemGroup() {
@@ -81,7 +82,7 @@ public UiItemViewItemGroup createUiItemViewItemGroup() {
 
 		CacheManipulationHandle<List<UiIdentifiableClientRecord>> cacheResponse = itemCache.replaceRecords(this.items);
 		cacheResponse.commit();
-		itemGroup.setItems(cacheResponse.getResult());
+		itemGroup.setItems(cacheResponse.getAndClearResult());
 		itemGroup.setHeaderVisible(headerVisible);
 		itemGroup.setFloatStyle(floatStyle.toUiItemViewFloatStyle());
 		itemGroup.setButtonWidth(buttonWidth);
@@ -95,7 +96,7 @@ public UiItemViewItemGroup createUiItemViewItemGroup() {
 
 	private UiIdentifiableClientRecord createUiIdentifiableClientRecord(RECORD record) {
 		UiIdentifiableClientRecord clientRecord = new UiIdentifiableClientRecord();
-		clientRecord.setValues(itemPropertyExtractor.getValues(record, itemTemplate.getDataKeys()));
+		clientRecord.setValues(itemPropertyProvider.getValues(record, itemTemplate.getPropertyNames()));
 		return clientRecord;
 	}
 
@@ -110,7 +111,7 @@ public void addItem(RECORD item) {
 		items.add(item);
 		if (container != null) {
 			CacheManipulationHandle<UiIdentifiableClientRecord> cacheResponse = itemCache.addRecord(item);
-			container.handleAddItem(cacheResponse.getResult(), aVoid -> cacheResponse.commit());
+			container.handleAddItem(cacheResponse.getAndClearResult(), aVoid -> cacheResponse.commit());
 		}
 	}
 
@@ -118,7 +119,7 @@ public void removeItem(RECORD item) {
 		boolean removed = items.remove(item);
 		if (removed) {
 			CacheManipulationHandle<Integer> cacheResponse = itemCache.removeRecord(item);
-			container.handleRemoveItem(cacheResponse.getResult(), aVoid -> cacheResponse.commit());
+			container.handleRemoveItem(cacheResponse.getAndClearResult(), aVoid -> cacheResponse.commit());
 		}
 	}
 
@@ -228,11 +229,11 @@ public ItemGroup setVerticalItemMargin(int verticalItemMargin) {
 		return this;
 	}
 
-	public ItemViewItemJustification getItemJustification() {
+	public ItemViewRowJustification getItemJustification() {
 		return itemJustification;
 	}
 
-	public ItemGroup setItemJustification(ItemViewItemJustification itemJustification) {
+	public ItemGroup setItemJustification(ItemViewRowJustification itemJustification) {
 		this.itemJustification = itemJustification;
 		requireRefresh();
 		return this;
@@ -242,13 +243,16 @@ public ItemGroupContainer<HEADERRECORD, RECORD> getContainer() {
 		return container;
 	}
 
-	public PropertyExtractor<RECORD> getItemPropertyExtractor() {
-		return itemPropertyExtractor;
+	public PropertyProvider<RECORD> getItemPropertyProvider() {
+		return itemPropertyProvider;
 	}
 
-	public void setItemPropertyExtractor(PropertyExtractor<RECORD> itemPropertyExtractor) {
-		this.itemPropertyExtractor = itemPropertyExtractor;
-		requireRefresh();
+	public void setItemPropertyProvider(PropertyProvider<RECORD> propertyProvider) {
+		this.itemPropertyProvider = propertyProvider;
+	}
+
+	public void setItemPropertyExtractor(PropertyExtractor<RECORD> propertyExtractor) {
+		this.setItemPropertyProvider(propertyExtractor);
 	}
 
 	/*package-private*/ RECORD getItemByClientId(int clientId) {
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/itemview/ItemGroupContainer.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/itemview/ItemGroupContainer.java
index d1266580b..17455c960 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/itemview/ItemGroupContainer.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/itemview/ItemGroupContainer.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/itemview/ItemView.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/itemview/ItemView.java
index 49902d589..02d0a3886 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/itemview/ItemView.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/itemview/ItemView.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -21,6 +21,7 @@
 
 import org.teamapps.data.extract.BeanPropertyExtractor;
 import org.teamapps.data.extract.PropertyExtractor;
+import org.teamapps.data.extract.PropertyProvider;
 import org.teamapps.dto.UiComponent;
 import org.teamapps.dto.UiEvent;
 import org.teamapps.dto.UiIdentifiableClientRecord;
@@ -50,7 +51,7 @@ public class ItemView<HEADERRECORD, RECORD> extends AbstractComponent {
 	private String filter;
 
 	private Template groupHeaderTemplate = BaseTemplate.LIST_ITEM_SMALL_ICON_SINGLE_LINE;
-	private PropertyExtractor<HEADERRECORD> headerPropertyExtractor = new BeanPropertyExtractor<>();
+	private PropertyProvider<HEADERRECORD> headerPropertyProvider = new BeanPropertyExtractor<>();
 
 	public ItemView() {
 		this(null);
@@ -106,7 +107,7 @@ public void addGroup(ItemGroup<HEADERRECORD, RECORD> group) {
 			@Override
 			public UiIdentifiableClientRecord createHeaderClientRecord(HEADERRECORD headerRecord) {
 				UiIdentifiableClientRecord clientRecord = new UiIdentifiableClientRecord();
-				clientRecord.setValues(headerPropertyExtractor.getValues(headerRecord, groupHeaderTemplate.getDataKeys()));
+				clientRecord.setValues(headerPropertyProvider.getValues(headerRecord, groupHeaderTemplate.getPropertyNames()));
 				return clientRecord;
 			}
 
@@ -157,8 +158,11 @@ public int getHorizontalPadding() {
 	}
 
 	public void setHorizontalPadding(int horizontalPadding) {
+		boolean changed = horizontalPadding != this.horizontalPadding;
 		this.horizontalPadding = horizontalPadding;
-		reRenderIfRendered();
+		if (changed) {
+			reRenderIfRendered();
+		}
 	}
 
 	public int getVerticalPadding() {
@@ -166,8 +170,11 @@ public int getVerticalPadding() {
 	}
 
 	public void setVerticalPadding(int verticalPadding) {
+		boolean changed = verticalPadding != this.verticalPadding;
 		this.verticalPadding = verticalPadding;
-		reRenderIfRendered();
+		if (changed) {
+			reRenderIfRendered();
+		}
 	}
 
 	public int getGroupSpacing() {
@@ -175,8 +182,11 @@ public int getGroupSpacing() {
 	}
 
 	public void setGroupSpacing(int groupSpacing) {
+		boolean changed = groupSpacing != this.groupSpacing;
 		this.groupSpacing = groupSpacing;
-		reRenderIfRendered();
+		if (changed) {
+			reRenderIfRendered();
+		}
 	}
 
 	public ItemViewItemBackgroundMode getItemBackgroundMode() {
@@ -184,22 +194,29 @@ public ItemViewItemBackgroundMode getItemBackgroundMode() {
 	}
 
 	public void setItemBackgroundMode(ItemViewItemBackgroundMode itemBackgroundMode) {
+		boolean changed = itemBackgroundMode != this.itemBackgroundMode;
 		this.itemBackgroundMode = itemBackgroundMode;
-		reRenderIfRendered();
+		if (changed) {
+			reRenderIfRendered();
+		}
 	}
 
-	public PropertyExtractor<HEADERRECORD> getHeaderPropertyExtractor() {
-		return headerPropertyExtractor;
+	public PropertyProvider<HEADERRECORD> getHeaderPropertyProvider() {
+		return headerPropertyProvider;
 	}
 
-	public void setHeaderPropertyExtractor(PropertyExtractor<HEADERRECORD> headerPropertyExtractor) {
-		this.headerPropertyExtractor = headerPropertyExtractor;
+	public void setHeaderPropertyProvider(PropertyProvider<HEADERRECORD> headerPropertyProvider) {
+		this.headerPropertyProvider = headerPropertyProvider;
 		reRenderIfRendered();
 	}
 
+	public void setHeaderPropertyExtractor(PropertyExtractor<HEADERRECORD> propertyExtractor) {
+		this.setHeaderPropertyProvider(propertyExtractor);
+	}
+
 	@Override
 	public UiComponent createUiComponent() {
-		UiItemView uiItemView = new UiItemView(getId());
+		UiItemView uiItemView = new UiItemView();
 		mapAbstractUiComponentProperties(uiItemView);
 		uiItemView.setGroupHeaderTemplate(groupHeaderTemplate != null ? groupHeaderTemplate.createUiTemplate() : null);
 		uiItemView.setItemGroups(this.itemGroups.stream()
@@ -233,8 +250,4 @@ private ItemGroup<HEADERRECORD, RECORD> getItemGroupByClientId(String clientId)
 				.findFirst().orElse(null);
 	}
 
-	@Override
-	protected void doDestroy() {
-		// nothing to do
-	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/itemview/ItemViewFloatStyle.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/itemview/ItemViewFloatStyle.java
index d00504f25..4844d9e57 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/itemview/ItemViewFloatStyle.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/itemview/ItemViewFloatStyle.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/itemview/ItemViewItemBackgroundMode.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/itemview/ItemViewItemBackgroundMode.java
index 6d4201a2b..acd466798 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/itemview/ItemViewItemBackgroundMode.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/itemview/ItemViewItemBackgroundMode.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/itemview/ItemViewItemJustification.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/itemview/ItemViewRowJustification.java
similarity index 92%
rename from teamapps-ux/src/main/java/org/teamapps/ux/component/itemview/ItemViewItemJustification.java
rename to teamapps-ux/src/main/java/org/teamapps/ux/component/itemview/ItemViewRowJustification.java
index 0290a3f4e..1479baa6d 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/itemview/ItemViewItemJustification.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/itemview/ItemViewRowJustification.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -21,7 +21,7 @@
 
 import org.teamapps.dto.UiItemJustification;
 
-public enum ItemViewItemJustification {
+public enum ItemViewRowJustification {
 
 	LEFT, RIGHT, CENTER, SPACE_AROUND, SPACE_BETWEEN;
 
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/itemview/ItemViewVerticalItemAlignment.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/itemview/ItemViewVerticalItemAlignment.java
index 93558bc34..fa3b518e0 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/itemview/ItemViewVerticalItemAlignment.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/itemview/ItemViewVerticalItemAlignment.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/itemview/SimpleItem.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/itemview/SimpleItem.java
index 942c250de..0e913440e 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/itemview/SimpleItem.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/itemview/SimpleItem.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -20,7 +20,7 @@
 package org.teamapps.ux.component.itemview;
 
 import org.teamapps.event.Event;
-import org.teamapps.icons.api.Icon;
+import org.teamapps.icons.Icon;
 import org.teamapps.ux.component.template.BaseTemplateRecord;
 
 public class SimpleItem<PAYLOAD> extends BaseTemplateRecord<PAYLOAD>{
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/itemview/SimpleItemGroup.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/itemview/SimpleItemGroup.java
index 8f7f66818..0ecb479b4 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/itemview/SimpleItemGroup.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/itemview/SimpleItemGroup.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,7 +19,7 @@
  */
 package org.teamapps.ux.component.itemview;
 
-import org.teamapps.icons.api.Icon;
+import org.teamapps.icons.Icon;
 import org.teamapps.ux.component.template.BaseTemplate;
 import org.teamapps.ux.component.template.BaseTemplateRecord;
 import org.teamapps.ux.component.template.Template;
@@ -28,13 +28,13 @@ public class SimpleItemGroup<PAYLOAD> extends ItemGroup<BaseTemplateRecord, Simp
 
 	public static SimpleItemGroup singleColumnGroup(Icon icon, String title) {
 		SimpleItemGroup group = new SimpleItemGroup<>(icon, title);
-		group.setButtonWidth(0.97f);
+		group.setButtonWidth(0);
 		return group;
 	}
 
 	public static SimpleItemGroup twoColumnGroup(Icon icon, String title) {
 		SimpleItemGroup group = new SimpleItemGroup<>(icon, title);
-		group.setButtonWidth(0.47f);
+		group.setButtonWidth(0.5f);
 		return group;
 	}
 
@@ -53,4 +53,10 @@ public SimpleItem<PAYLOAD> addItem(Icon icon, String title, String caption) {
 		return item;
 	}
 
+	public SimpleItem<PAYLOAD> addItem(Icon icon, String title, String caption, PAYLOAD payload) {
+		SimpleItem<PAYLOAD> item = new SimpleItem<>(icon, title, caption, payload);
+		addItem(item);
+		return item;
+	}
+
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/itemview/SimpleItemView.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/itemview/SimpleItemView.java
index a38392f9c..50dc24eb9 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/itemview/SimpleItemView.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/itemview/SimpleItemView.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,7 +19,7 @@
  */
 package org.teamapps.ux.component.itemview;
 
-import org.teamapps.icons.api.Icon;
+import org.teamapps.icons.Icon;
 import org.teamapps.ux.component.template.BaseTemplateRecord;
 
 public class SimpleItemView<PAYLOAD> extends ItemView<BaseTemplateRecord, SimpleItem<PAYLOAD>> {
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/linkbutton/LinkButton.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/linkbutton/LinkButton.java
new file mode 100644
index 000000000..87d1a7e7d
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/linkbutton/LinkButton.java
@@ -0,0 +1,104 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.linkbutton;
+
+import org.teamapps.dto.UiEvent;
+import org.teamapps.dto.UiLinkButton;
+import org.teamapps.event.Event;
+import org.teamapps.ux.component.AbstractComponent;
+
+public class LinkButton extends AbstractComponent {
+
+	public final Event<Void> onClicked = new Event<>();
+
+	private String text;
+	private String url;
+	private LinkTarget target = LinkTarget.BLANK;
+	private String onClickJavaScript;
+
+	public LinkButton(String text) {
+		this(text, null);
+	}
+
+	public LinkButton(String text, String url) {
+		this.text = text;
+		this.url = url;
+	}
+
+	@Override
+	public UiLinkButton createUiComponent() {
+		UiLinkButton ui = new UiLinkButton();
+		mapAbstractUiComponentProperties(ui);
+		ui.setText(text);
+		ui.setUrl(url);
+		ui.setTarget(target.toUiLinkTarget());
+		ui.setOnClickJavaScript(onClickJavaScript);
+		return ui;
+	}
+
+	@Override
+	public void handleUiEvent(UiEvent event) {
+		switch (event.getUiEventType()) {
+			case UI_LINK_BUTTON_CLICKED:
+				onClicked.fire();
+				break;
+		}
+	}
+
+	private void update() {
+		queueCommandIfRendered(() -> new UiLinkButton.UpdateCommand(getId(), createUiComponent()));
+	}
+
+	public String getText() {
+		return text;
+	}
+
+	public void setText(String text) {
+		this.text = text;
+		update();
+	}
+
+	public String getUrl() {
+		return url;
+	}
+
+	public void setUrl(String url) {
+		this.url = url;
+		update();
+	}
+
+	public LinkTarget getTarget() {
+		return target;
+	}
+
+	public void setTarget(LinkTarget target) {
+		this.target = target;
+		update();
+	}
+
+	public String getOnClickJavaScript() {
+		return onClickJavaScript;
+	}
+
+	public void setOnClickJavaScript(String onClickJavaScript) {
+		this.onClickJavaScript = onClickJavaScript;
+		update();
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/media/webrtc/AudioCodec.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/linkbutton/LinkTarget.java
similarity index 74%
rename from teamapps-ux/src/main/java/org/teamapps/ux/component/media/webrtc/AudioCodec.java
rename to teamapps-ux/src/main/java/org/teamapps/ux/component/linkbutton/LinkTarget.java
index 1c99586be..7444bd641 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/media/webrtc/AudioCodec.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/linkbutton/LinkTarget.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,16 +17,14 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-package org.teamapps.ux.component.media.webrtc;
+package org.teamapps.ux.component.linkbutton;
 
-import org.teamapps.dto.UiAudioCodec;
+import org.teamapps.dto.UiLinkTarget;
 
-public enum AudioCodec {
+public enum LinkTarget {
+	SELF, BLANK, PARENT, TOP;
 
-	OPUS;
-
-	public UiAudioCodec toUiAudioCodec() {
-		return UiAudioCodec.valueOf(this.name());
+	public UiLinkTarget toUiLinkTarget() {
+		return UiLinkTarget.valueOf(name());
 	}
-
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/login/LoginWindow.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/login/LoginWindow.java
deleted file mode 100644
index 4a2b06682..000000000
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/login/LoginWindow.java
+++ /dev/null
@@ -1,193 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.ux.component.login;
-
-import org.teamapps.event.Event;
-import org.teamapps.icon.material.MaterialIcon;
-import org.teamapps.ux.component.field.Button;
-import org.teamapps.ux.component.field.DisplayField;
-import org.teamapps.ux.component.field.PasswordField;
-import org.teamapps.ux.component.field.SpecialKey;
-import org.teamapps.ux.component.field.TextField;
-import org.teamapps.ux.component.form.ResponsiveForm;
-import org.teamapps.ux.component.form.ResponsiveFormConfigurationTemplate;
-import org.teamapps.ux.component.form.ResponsiveFormLayout;
-import org.teamapps.common.format.Color;
-import org.teamapps.ux.component.format.HorizontalElementAlignment;
-import org.teamapps.ux.component.format.SizingPolicy;
-import org.teamapps.ux.component.format.Spacing;
-import org.teamapps.ux.component.panel.ElegantPanel;
-import org.teamapps.ux.component.template.BaseTemplate;
-import org.teamapps.ux.component.template.BaseTemplateRecord;
-import org.teamapps.ux.component.window.Window;
-import org.teamapps.ux.session.CurrentSessionContext;
-import org.teamapps.ux.session.SessionContext;
-
-public class LoginWindow {
-	public Event<LoginData> onLogin = new Event<>();
-
-	private SessionContext sessionContext = CurrentSessionContext.get();
-
-	private TextField loginField;
-	private PasswordField passwordField;
-
-	private Button<BaseTemplateRecord> loginButton;
-	private Button<BaseTemplateRecord> registerButton;
-	private Button<BaseTemplateRecord> forgotPasswordButton;
-	private DisplayField errorField;
-	private DisplayField headerField;
-
-	private Window window;
-	private ElegantPanel elegantPanel;
-
-	public LoginWindow() {
-		loginButton = new Button<>(BaseTemplate.FORM_BUTTON, new BaseTemplateRecord(MaterialIcon.CHECK, "Ok"));
-		//loginButton.setColor(Color.LIGHT_GRAY);
-		headerField = new DisplayField(false, true);
-		errorField = new DisplayField(false, true);
-		loginField = new TextField();
-		passwordField = new PasswordField();
-
-		headerField.setValue("<span style='font-size:150%'>Login</span>");
-		errorField.setValue("<span style='font-size:120%;color:#961900'>&nbsp;</span>");
-		
-		ResponsiveForm<?> loginForm = new ResponsiveForm<>();
-		ResponsiveFormConfigurationTemplate template = ResponsiveFormConfigurationTemplate.createDefault();
-
-		loginForm.setConfigurationTemplate(template);
-		ResponsiveFormLayout layout = loginForm.addResponsiveFormLayout(360);
-		layout.addSection().setDrawHeaderLine(false).setPadding(new Spacing(30, 25)).setCollapsible(false);
-		layout.addLabelField(headerField).setColSpan(2);
-		layout.addLabelField(errorField).setColSpan(2);
-		ResponsiveFormLayout.LabelAndField labelAndField = layout.addLabelAndField(MaterialIcon.PERSON, sessionContext.getLocalized("ux.loginWindow.login"), loginField, true);
-		labelAndField.label.getColumnDefinition().setWidthPolicy(SizingPolicy.AUTO);
-		labelAndField.field.getColumnDefinition().setWidthPolicy(SizingPolicy.FRACTION);
-		layout.addLabelAndField(MaterialIcon.VPN_KEY, sessionContext.getLocalized("ux.loginWindow.password"), passwordField, true);
-		layout.addLabelField(loginButton, 1).setHorizontalAlignment(HorizontalElementAlignment.LEFT).setMinWidth(100).getRowDefinition().setTopPadding(10);
-
-		loginButton.onValueChanged.addListener(value -> login());
-		loginField.onSpecialKeyPressed.addListener(specialKey -> {
-			if (specialKey == SpecialKey.ENTER) {
-				login();
-			}
-		});
-		passwordField.onSpecialKeyPressed.addListener(specialKey -> {
-			if (specialKey == SpecialKey.ENTER) {
-				login();
-			}
-		});
-
-		window = new Window();
-		window.setHideTitleBar(true);
-		window.setModal(true);
-		window.setHeight(300);
-		window.setWidth(470);
-		window.setBodyBackgroundColor(Color.WHITE.withAlpha(0.8f));
-		window.setContent(loginForm);
-
-		elegantPanel = new ElegantPanel(loginForm);
-		elegantPanel.setMaxContentWidth(400);
-	}
-
-	private void login() {
-		String login = getLogin();
-		String password = getPassword();
-		if (login != null && !login.isEmpty() && password != null && !password.isEmpty()) {
-			onLogin.fire(new LoginData(login, password));
-		} else {
-			setError();
-		}
-	}
-
-	public void focusLogin() {
-		loginField.focus();
-	}
-
-	public ElegantPanel getElegantPanel() {
-		return elegantPanel;
-	}
-
-	public void showLoginWindow(int animationDuration) {
-		window.show(animationDuration);
-		focusLogin();
-	}
-
-	public void closeLoginWindow(int animationDuration) {
-		window.close(animationDuration);
-	}
-
-	public Window getLoginWindow() {
-		return window;
-	}
-
-	public static class LoginData {
-		public String login;
-		public String password;
-
-		public LoginData(String login, String password) {
-			this.login = login;
-			this.password = password;
-		}
-	}
-
-	public void setError() {
-		errorField.setValue("<span style='font-size:120%;color:#961900'>" + sessionContext.getLocalized("ux.loginWindow.wrongUserNameOrPassword") + "</span>");
-	}
-
-	public void removeErrorMessage() {
-		errorField.setValue("");
-	}
-
-	public String getLogin() {
-		return loginField.getValue();
-	}
-
-	public String getPassword() {
-		return passwordField.getValue();
-	}
-
-	public TextField getLoginField() {
-		return loginField;
-	}
-
-	public PasswordField getPasswordField() {
-		return passwordField;
-	}
-
-	public Button getLoginButton() {
-		return loginButton;
-	}
-
-	public Button getRegisterButton() {
-		return registerButton;
-	}
-
-	public Button getForgotPasswordButton() {
-		return forgotPasswordButton;
-	}
-
-	public DisplayField getErrorField() {
-		return errorField;
-	}
-
-	public DisplayField getHeaderField() {
-		return headerField;
-	}
-}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/map/Area.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/map/Area.java
index be5e6254f..dbbcf3a40 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/map/Area.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/map/Area.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/map/Location.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/map/Location.java
index 200eb5695..1a4cc8ec7 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/map/Location.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/map/Location.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -31,6 +31,10 @@ public Location(double latitude, double longitude) {
 		this.longitude = longitude;
 	}
 
+	public static Location fromUiMapLocation(UiMapLocation uiMapLocation) {
+		return new Location(uiMapLocation.getLatitude(), uiMapLocation.getLongitude());
+	}
+
 	public double getLatitude() {
 		return latitude;
 	}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/map/LocationChangedEventData.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/map/LocationChangedEventData.java
index 817e2ef5e..05178836c 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/map/LocationChangedEventData.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/map/LocationChangedEventData.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/map/MapShapeType.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/map/MapShapeType.java
new file mode 100644
index 000000000..ac1bb2319
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/map/MapShapeType.java
@@ -0,0 +1,36 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.map;
+
+import org.teamapps.dto.UiMapShapeType;
+
+public enum MapShapeType {
+
+	CIRCLE,
+	// MARKER,
+	POLYGON,
+	POLYLINE,
+	RECTANGLE;
+
+	public UiMapShapeType toUiMapShapeType() {
+		return UiMapShapeType.valueOf(name());
+	}
+
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/map/MapType.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/map/MapType.java
index 9aa7584c8..b815d4d70 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/map/MapType.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/map/MapType.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -23,18 +23,24 @@
 
 public enum MapType {
 	INTERNAL,
+	INTERNAL_DARK,
+	INTERNAL_DARK_HIGH_RES,
 	MAP_BOX_STREETS,
 	MAP_BOX_STREETS_BASIC,
 	MAP_BOX_STREETS_SATELLITE,
 	MAP_BOX_SATELLITE,
 	MAP_BOX_RUN_BIKE_HIKE,
+	MAP_BOX_DARK,
 	MAP_BOX_EMERALD,
 	MAP_BOX_OUTDOORS,
 	MAP_QUEST_OSM,
 	MAP_QUEST_SATELLITE,
 	OSM_TOPO_MAP,
 	NASA_EARTH_AT_NIGHT,
-	INFO_WEATHER_TEMPERATURE;
+	INFO_WEATHER_TEMPERATURE,
+	THUNDERFOREST_DARK,
+	THUNDERFOREST_TRANSPORT,
+	WIKIMEDIA;
 
 	public UiMapType toUiMapType() {
 		return UiMapType.valueOf(this.name());
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/map/MapView.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/map/MapView.java
index a6f7f132a..3a0e57b9f 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/map/MapView.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/map/MapView.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,20 +19,16 @@
  */
 package org.teamapps.ux.component.map;
 
+import org.apache.commons.collections4.BidiMap;
+import org.apache.commons.collections4.bidimap.DualHashBidiMap;
 import org.teamapps.data.extract.BeanPropertyExtractor;
 import org.teamapps.data.extract.PropertyExtractor;
-import org.teamapps.dto.UiComponent;
-import org.teamapps.dto.UiEvent;
-import org.teamapps.dto.UiMap;
-import org.teamapps.dto.UiMapArea;
-import org.teamapps.dto.UiMapMarkerClientRecord;
-import org.teamapps.dto.UiMapPolyline;
+import org.teamapps.data.extract.PropertyProvider;
+import org.teamapps.dto.*;
 import org.teamapps.event.Event;
-import org.teamapps.ux.cache.CacheManipulationHandle;
-import org.teamapps.ux.cache.ClientRecordCache;
-import org.teamapps.ux.cache.ClientTemplateCache;
 import org.teamapps.ux.component.AbstractComponent;
 import org.teamapps.ux.component.field.combobox.TemplateDecider;
+import org.teamapps.ux.component.map.shape.*;
 import org.teamapps.ux.component.template.Template;
 
 import java.util.ArrayList;
@@ -47,52 +43,91 @@ public class MapView<RECORD> extends AbstractComponent {
 	public final Event<Integer> onZoomLevelChanged = new Event<>();
 	public final Event<Location> onMapClicked = new Event<>();
 	public final Event<Marker<RECORD>> onMarkerClicked = new Event<>();
+	public final Event<AbstractMapShape> onShapeDrawn = new Event<>();
 
 	private MapType mapType = MapType.MAP_BOX_STREETS_SATELLITE;
+	private String accessToken = null;
 	private int zoomLevel = 5;
 	private Location location = new Location(0, 0);
-	private Map<String, Polyline> polylinesByClientId = new HashMap<>();
-	private List<Marker<RECORD>> markers = new ArrayList<>();
+	private final Map<String, AbstractMapShape> shapesByClientId = new HashMap<>();
+	private List<Marker<RECORD>> clusterMarkers = new ArrayList<>();
 
-	private final ClientRecordCache<Marker<RECORD>, UiMapMarkerClientRecord> recordCache = new ClientRecordCache<>(this::createUiRecord);
-	private ClientTemplateCache<Marker<RECORD>> templateCache = new ClientTemplateCache<>(this::registerTemplate);
-	private PropertyExtractor<RECORD> markerPropertyExtractor = new BeanPropertyExtractor<>();
+	private int clientIdCounter = 0;
+	private final BidiMap<Integer, Marker<RECORD>> markersByClientId = new DualHashBidiMap<>();
+
+	private Template defaultTemplate;
+	private TemplateDecider<Marker<RECORD>> templateDecider = m -> defaultTemplate;
+	private final Map<Template, String> templateIdsByTemplate = new HashMap<>();
+	private int templateIdCounter = 0;
+	private UiMapConfig mapConfig;
+
+	private PropertyProvider<RECORD> markerPropertyProvider = new BeanPropertyExtractor<>();
+	private final AbstractMapShape.MapShapeListener shapeListener = new AbstractMapShape.MapShapeListener() {
+		@Override
+		public void handleShapeChanged(AbstractMapShape shape) {
+			queueCommandIfRendered(() -> new UiMap.UpdateShapeCommand(getId(), shape.getClientIdInternal(), shape.createUiMapShape()));
+		}
+
+		@Override
+		public void handleShapeChanged(AbstractMapShape shape, AbstractUiMapShapeChange change) {
+			handleShapeChanged(shape); // this is a lazy implementation, but since this is the legacy map implementation...
+		}
+
+		@Override
+		public void handleShapeRemoved(AbstractMapShape shape) {
+			queueCommandIfRendered(() -> new UiMap.RemoveShapeCommand(getId(), shape.getClientIdInternal()));
+		}
+	};
+
+	public MapView(String accessToken) {
+		this.accessToken = accessToken;
+	}
+
+	public MapView() {
+	}
 
 	@Override
 	public UiComponent createUiComponent() {
-		UiMap uiMap = new UiMap(getId(), new HashMap<>());
+		UiMap uiMap = new UiMap(templateIdsByTemplate.entrySet().stream()
+				.collect(Collectors.toMap(Map.Entry::getValue, entry -> entry.getKey().createUiTemplate())));
 		mapAbstractUiComponentProperties(uiMap);
+		uiMap.setMapConfig(mapConfig);
 		uiMap.setMapType(mapType.toUiMapType());
+		uiMap.setAccessToken(accessToken);
 		uiMap.setZoomLevel(zoomLevel);
-		Map<String, UiMapPolyline> uiPolylines = new HashMap<>();
-		polylinesByClientId.forEach((id, polyline) -> uiPolylines.put(id, polyline.createUiMapPolyline()));
-		uiMap.setPolylines(uiPolylines);
+		Map<String, AbstractUiMapShape> uiShapes = new HashMap<>();
+		shapesByClientId.forEach((id, shape) -> uiShapes.put(id, shape.createUiMapShape()));
+		uiMap.setShapes(uiShapes);
 		if (location != null) {
 			uiMap.setMapPosition(location.createUiLocation());
 		}
-		CacheManipulationHandle<List<UiMapMarkerClientRecord>> cacheResponse = recordCache.replaceRecords(markers);
-		uiMap.setMarkers(cacheResponse.getResult());
-		cacheResponse.commit();
+		if (clusterMarkers != null && !clusterMarkers.isEmpty()) {
+			uiMap.setMarkerCluster(new UiMapMarkerCluster(clusterMarkers.stream()
+					.map(marker -> createUiMarkerRecord(marker, markersByClientId.getKey(marker)))
+					.collect(Collectors.toList())));
+		}
+		uiMap.setMarkers(markersByClientId.entrySet().stream()
+				.map(e -> createUiMarkerRecord(e.getValue(), e.getKey()))
+				.collect(Collectors.toList()));
 		return uiMap;
 	}
 
-	private UiMapMarkerClientRecord createUiRecord(Marker<RECORD> marker) {
+	private UiMapMarkerClientRecord createUiMarkerRecord(Marker<RECORD> marker, int clientId) {
 		UiMapMarkerClientRecord clientRecord = new UiMapMarkerClientRecord();
-		clientRecord.setLocation(location.createUiLocation());
-		ClientTemplateCache.TemplateWithClientId templateWithClientId = templateCache.getTemplateIdForRecord(marker);
-		if (templateWithClientId.getTemplate() != null) {
-			clientRecord.setTemplateId("" + templateWithClientId.getClientId());
-			clientRecord.setValues(markerPropertyExtractor.getValues(marker.getData(), templateWithClientId.getTemplate().getDataKeys()));
+		clientRecord.setId(clientId);
+		clientRecord.setLocation(marker.getLocation().createUiLocation());
+		Template template = getTemplateForRecord(marker, templateDecider);
+		if (template != null) {
+			clientRecord.setTemplateId(templateIdsByTemplate.get(template));
+			clientRecord.setValues(markerPropertyProvider.getValues(marker.getData(), template.getPropertyNames()));
 		} else {
 			clientRecord.setAsString("" + marker.getData());
 		}
+		clientRecord.setOffsetPixelsX(marker.getOffsetPixelsX());
+		clientRecord.setOffsetPixelsY(marker.getOffsetPixelsY());
 		return clientRecord;
 	}
 
-	private void registerTemplate(int id, Template template) {
-		queueCommandIfRendered(() -> new UiMap.RegisterTemplateCommand(getId(), "" + id, template.createUiTemplate()));
-	}
-
 	@Override
 	public void handleUiEvent(UiEvent event) {
 		switch (event.getUiEventType()) {
@@ -103,7 +138,7 @@ public void handleUiEvent(UiEvent event) {
 			}
 			case UI_MAP_MARKER_CLICKED: {
 				UiMap.MarkerClickedEvent markerClickedEvent = (UiMap.MarkerClickedEvent) event;
-				Marker<RECORD> marker = recordCache.getRecordByClientId(markerClickedEvent.getMarkerId());
+				Marker<RECORD> marker = markersByClientId.get(markerClickedEvent.getMarkerId());
 				this.onMarkerClicked.fire(marker);
 				break;
 			}
@@ -115,26 +150,118 @@ public void handleUiEvent(UiEvent event) {
 			}
 			case UI_MAP_LOCATION_CHANGED: {
 				UiMap.LocationChangedEvent locationEvent = (UiMap.LocationChangedEvent) event;
-				this.location = new Location(locationEvent.getCenter().getLatitude(), locationEvent.getCenter().getLongitude());
+				this.location = Location.fromUiMapLocation(locationEvent.getCenter());
 				UiMapArea displayedUiArea = locationEvent.getDisplayedArea();
 				Area displayedArea = new Area(displayedUiArea.getMinLatitude(), displayedUiArea.getMaxLatitude(), displayedUiArea.getMinLongitude(), displayedUiArea.getMaxLongitude());
 				this.onLocationChanged.fire(new LocationChangedEventData(this.location, displayedArea));
 				break;
 			}
+			case UI_MAP_SHAPE_DRAWN: {
+				UiMap.ShapeDrawnEvent drawnEvent = (UiMap.ShapeDrawnEvent) event;
+				AbstractMapShape shape;
+				switch (drawnEvent.getShape().getUiObjectType()) {
+					case UI_MAP_CIRCLE: {
+						UiMapCircle uiCircle = (UiMapCircle) drawnEvent.getShape();
+						shape = new MapCircle(Location.fromUiMapLocation(uiCircle.getCenter()), uiCircle.getRadius());
+						break;
+					}
+					case UI_MAP_POLYGON: {
+						UiMapPolygon uiPolygon = (UiMapPolygon) drawnEvent.getShape();
+						shape = new MapPolygon(uiPolygon.getPath().stream().map(Location::fromUiMapLocation).collect(Collectors.toList()), null);
+						break;
+					}
+					case UI_MAP_POLYLINE: {
+						UiMapPolyline uiPolyLine = (UiMapPolyline) drawnEvent.getShape();
+						shape = new MapPolyline(uiPolyLine.getPath().stream().map(Location::fromUiMapLocation).collect(Collectors.toList()), null);
+						break;                                                       
+					}
+					case UI_MAP_RECTANGLE: {
+						UiMapRectangle uiRect = (UiMapRectangle) drawnEvent.getShape();
+						shape = new MapRectangle(Location.fromUiMapLocation(uiRect.getL1()), Location.fromUiMapLocation(uiRect.getL2()), null);
+						break;
+					}
+					default:
+						throw new IllegalArgumentException("Unknown shape type from UI: " + drawnEvent.getShape().getUiObjectType());
+				}
+				shape.setClientIdInternal(drawnEvent.getShapeId());
+				shapesByClientId.put(drawnEvent.getShapeId(), shape);
+				shape.setListenerInternal(shapeListener);
+				this.onShapeDrawn.fire(shape);
+				break;
+			}
+		}
+	}
+
+	public void setMapConfig(UiMapConfig mapConfig) {
+		this.mapConfig = mapConfig;
+	}
+
+	public void addPolyLine(MapPolyline polyline) {
+		addShape(polyline);
+	}
+	
+	public void addShape(AbstractMapShape shape) {
+		shape.setListenerInternal(shapeListener);
+		shapesByClientId.put(shape.getClientIdInternal(), shape);
+		queueCommandIfRendered(() -> new UiMap.AddShapeCommand(getId(), shape.getClientIdInternal(), shape.createUiMapShape()));
+	}
+
+	public void removeShape(AbstractMapShape shape) {
+		shapesByClientId.remove(shape.getClientIdInternal());
+		queueCommandIfRendered(() -> new UiMap.RemoveShapeCommand(getId(), shape.getClientIdInternal()));
+	}
+
+	public void clearShapes() {
+		shapesByClientId.clear();
+		queueCommandIfRendered(() -> new UiMap.ClearShapesCommand(getId()));
+	}
+
+	public void setMarkerCluster(List<Marker<RECORD>> markers) {
+		clusterMarkers = markers;
+		markers.forEach(m -> this.markersByClientId.put(clientIdCounter++, m));
+		if (isRendered()) {
+			queueCommandIfRendered(() -> {
+				UiMapMarkerCluster markerCluster = new UiMapMarkerCluster(clusterMarkers.stream()
+						.map(marker -> createUiMarkerRecord(marker, markersByClientId.getKey(marker)))
+						.collect(Collectors.toList()));
+				return new UiMap.SetMapMarkerClusterCommand(getId(),
+						markerCluster);
+			});
 		}
 	}
 
-	public Polyline addPolyLine(Polyline polyline) {
-		polyline.setListener((polyline1, newPoints) -> {
-			queueCommandIfRendered(() -> new UiMap.AddPolylinePointsCommand(getId(), polyline.getClientId(), newPoints.stream().map(Location::createUiLocation).collect(Collectors.toList())));
-		});
-		polylinesByClientId.put(polyline.getClientId(), polyline);
-		queueCommandIfRendered(() -> new UiMap.AddPolylineCommand(getId(), polyline.getClientId(), polyline.createUiMapPolyline()));
-		return polyline;
+	public void clearMarkerCluster() {
+		clusterMarkers.forEach(this.markersByClientId::removeValue);
+		clusterMarkers.clear();
+		queueCommandIfRendered(() -> new UiMap.ClearMarkerClusterCommand(getId()));
+	}
+
+	public void unCacheMarkers(List<Marker<RECORD>> markers) {
+		markers.forEach(this.markersByClientId::removeValue);
+	}
+
+	public void setHeatMap(List<Location> locations) {
+		List<UiHeatMapDataElement> heatMapElements = locations.stream().map(loc -> new UiHeatMapDataElement((float) loc.getLatitude(), (float) loc.getLongitude(), 1)).collect(Collectors.toList());
+		UiHeatMapData heatMap = new UiHeatMapData(heatMapElements);
+		queueCommandIfRendered(() -> new UiMap.SetHeatMapCommand(getId(), heatMap));
 	}
 
-	public void removePolyline(Polyline polyline) {
-		queueCommandIfRendered(() -> new UiMap.RemovePolylineCommand(getId(), polyline.getClientId()));
+	public void setHeatMap(UiHeatMapData heatMap) {
+		queueCommandIfRendered(() -> new UiMap.SetHeatMapCommand(getId(), heatMap));
+	}
+
+	public void clearHeatMap() {
+		queueCommandIfRendered(() -> new UiMap.ClearHeatMapCommand(getId()));
+	}
+
+	private Template getTemplateForRecord(Marker<RECORD> record, TemplateDecider<Marker<RECORD>> templateDecider) {
+		Template template = templateDecider.getTemplate(record);
+		if (template != null && !templateIdsByTemplate.containsKey(template)) {
+			String uuid = "" + templateIdCounter++;
+			this.templateIdsByTemplate.put(template, uuid);
+			queueCommandIfRendered(() -> new UiMap.RegisterTemplateCommand(getId(), uuid, template.createUiTemplate()));
+		}
+		return template;
 	}
 
 	public MapType getMapType() {
@@ -177,45 +304,66 @@ public Location getLocation() {
 	}
 
 	public void addMarker(Marker<RECORD> marker) {
-		this.markers.add(marker);
-		CacheManipulationHandle<UiMapMarkerClientRecord> cacheResponse = recordCache.addRecord(marker);
+		int clientId = clientIdCounter++;
+		this.markersByClientId.put(clientId, marker);
 		if (isRendered()) {
-			getSessionContext().queueCommand(new UiMap.AddMarkerCommand(getId(), cacheResponse.getResult()), aVoid -> cacheResponse.commit());
-		}   else {
-			cacheResponse.commit();
+			getSessionContext().queueCommand(new UiMap.AddMarkerCommand(getId(), createUiMarkerRecord(marker, clientId)));
 		}
 	}
 
 	public void removeMarker(Marker<RECORD> marker) {
-		boolean removed = markers.remove(marker);
-		if (removed) {
-			CacheManipulationHandle<Integer> cacheResponse = recordCache.removeRecord(marker);
+		Integer clientId = markersByClientId.removeValue(marker);
+		if (clientId != null) {
 			if (isRendered()) {
-				getSessionContext().queueCommand(new UiMap.RemoveMarkerCommand(getId(), cacheResponse.getResult()), aVoid -> cacheResponse.commit());
-			} else {
-				cacheResponse.commit();
+				getSessionContext().queueCommand(new UiMap.RemoveMarkerCommand(getId(), clientId));
 			}
 		}
 	}
 
+	public void clearMarkers() {
+		this.markersByClientId.values().removeIf(m -> !clusterMarkers.contains(m));
+		queueCommandIfRendered(() -> new UiMap.ClearMarkersCommand(getId()));
+	}
+
+	public void fitBounds(Location southWest, Location northEast) {
+		this.location = new Location((southWest.getLatitude() + northEast.getLatitude()) / 2, (southWest.getLongitude() + northEast.getLongitude()) / 2);
+		queueCommandIfRendered(() -> new UiMap.FitBoundsCommand(this.getId(), southWest.createUiLocation(), northEast.createUiLocation()));
+	}
+
+	public Template getDefaultTemplate() {
+		return defaultTemplate;
+	}
+
 	public void setDefaultMarkerTemplate(Template defaultTemplate) {
-		templateCache.setDefaultTemplate(defaultTemplate);
+		this.defaultTemplate = defaultTemplate;
+	}
+
+	public TemplateDecider<Marker<RECORD>> getTemplateDecider() {
+		return templateDecider;
 	}
 
 	public void setMarkerTemplateDecider(TemplateDecider<Marker<RECORD>> templateDecider) {
-		templateCache.setTemplateDecider(templateDecider);
+		this.templateDecider = templateDecider;
 	}
 
-	public PropertyExtractor<RECORD> getMarkerPropertyExtractor() {
-		return markerPropertyExtractor;
+	public PropertyProvider<RECORD> getMarkerPropertyProvider() {
+		return markerPropertyProvider;
 	}
 
-	public void setMarkerPropertyExtractor(PropertyExtractor<RECORD> markerPropertyExtractor) {
-		this.markerPropertyExtractor = markerPropertyExtractor;
+	public void setMarkerPropertyProvider(PropertyProvider<RECORD> propertyProvider) {
+		this.markerPropertyProvider = propertyProvider;
 	}
 
-	@Override
-	protected void doDestroy() {
-		// nothing to do
+	public void setMarkerPropertyExtractor(PropertyExtractor<RECORD> propertyExtractor) {
+		this.setMarkerPropertyProvider(propertyExtractor);
+	}
+
+	public void startDrawingShape(MapShapeType shapeType, ShapeProperties shapeProperties) {
+		queueCommandIfRendered(() -> new UiMap.StartDrawingShapeCommand(getId(), shapeType.toUiMapShapeType(), shapeProperties.createUiShapeProperties()));
 	}
+
+	public void stopDrawingShape() {
+		queueCommandIfRendered(() -> new UiMap.StopDrawingShapeCommand(getId()));
+	}
+
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/map/MapView2.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/map/MapView2.java
new file mode 100644
index 000000000..c9c5aebd4
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/map/MapView2.java
@@ -0,0 +1,438 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.map;
+
+import org.apache.commons.collections4.BidiMap;
+import org.apache.commons.collections4.bidimap.DualHashBidiMap;
+import org.teamapps.common.format.Color;
+import org.teamapps.data.extract.BeanPropertyExtractor;
+import org.teamapps.data.extract.PropertyExtractor;
+import org.teamapps.data.extract.PropertyProvider;
+import org.teamapps.dto.*;
+import org.teamapps.event.Event;
+import org.teamapps.ux.component.AbstractComponent;
+import org.teamapps.ux.component.field.combobox.TemplateDecider;
+import org.teamapps.ux.component.map.shape.*;
+import org.teamapps.ux.component.template.Template;
+
+import java.util.*;
+import java.util.stream.Collectors;
+
+public class MapView2<RECORD> extends AbstractComponent {
+
+	public final Event<LocationChangedEventData> onLocationChanged = new Event<>();
+	public final Event<Float> onZoomLevelChanged = new Event<>();
+	public final Event<Location> onMapClicked = new Event<>();
+	public final Event<Marker<RECORD>> onMarkerClicked = new Event<>();
+	public final Event<AbstractMapShape> onShapeDrawn = new Event<>();
+
+
+	private String styleUrl;
+	private boolean displayAttributionControl = false;
+	private boolean displayNavigationControl = false;
+	private boolean displayVoronoiCells = false;
+	private float zoomLevel = 10f;
+	private Location location = new Location(0, 0);
+	private final Map<String, AbstractMapShape> shapesByClientId = new HashMap<>();
+	private List<Marker<RECORD>> clusterMarkers = new ArrayList<>();
+	private int clusterRadius = 100;
+	private UiHeatMapData heatMapData = null;
+	private boolean drawingShapeStarted = false;
+
+	private int clientIdCounter = 0;
+	private final BidiMap<Integer, Marker<RECORD>> markersByClientId = new DualHashBidiMap<>();
+
+	private Template defaultTemplate;
+	private TemplateDecider<Marker<RECORD>> templateDecider = m -> defaultTemplate;
+	private final Map<Template, String> templateIdsByTemplate = new HashMap<>();
+	private int templateIdCounter = 0;
+
+	private PropertyProvider<RECORD> markerPropertyProvider = new BeanPropertyExtractor<>();
+	private final AbstractMapShape.MapShapeListener shapeListener = new AbstractMapShape.MapShapeListener() {
+		@Override
+		public void handleShapeChanged(AbstractMapShape shape) {
+			queueCommandIfRendered(() -> new UiMap2.UpdateShapeCommand(getId(), shape.getClientIdInternal(), shape.createUiMapShape()));
+		}
+
+		@Override
+		public void handleShapeChanged(AbstractMapShape shape, AbstractUiMapShapeChange change) {
+			queueCommandIfRendered(() -> new UiMap2.ChangeShapeCommand(getId(), shape.getClientIdInternal(), change));
+		}
+
+		@Override
+		public void handleShapeRemoved(AbstractMapShape shape) {
+			queueCommandIfRendered(() -> new UiMap2.RemoveShapeCommand(getId(), shape.getClientIdInternal()));
+		}
+	};
+
+	/**
+	 * @deprecated parameters baseApiUrl and accessToken are obsolete.
+	 */
+	public MapView2(String baseApiUrl, String accessToken, String styleUrl) {
+		this(styleUrl);
+	}
+
+	public MapView2(String styleUrl) {
+		this.styleUrl = styleUrl;
+	}
+
+	@Override
+	public UiComponent createUiComponent() {
+		UiMap2 uiMap = new UiMap2(templateIdsByTemplate.entrySet().stream()
+				.collect(Collectors.toMap(Map.Entry::getValue, entry -> entry.getKey().createUiTemplate())));
+		mapAbstractUiComponentProperties(uiMap);
+
+		uiMap.setStyleUrl(styleUrl);
+		uiMap.setDisplayAttributionControl(displayAttributionControl);
+		uiMap.setDisplayNavigationControl(displayNavigationControl);
+
+		uiMap.setZoomLevel(zoomLevel);
+		Map<String, AbstractUiMapShape> uiShapes = new HashMap<>();
+		shapesByClientId.forEach((id, shape) -> uiShapes.put(id, shape.createUiMapShape()));
+		uiMap.setShapes(uiShapes);
+		if (location != null) {
+			uiMap.setMapPosition(location.createUiLocation());
+		}
+		if (clusterMarkers != null && !clusterMarkers.isEmpty()) {
+			uiMap.setMarkerCluster(new UiMapMarkerCluster(clusterMarkers.stream()
+					.map(marker -> createUiMarkerRecord(marker, markersByClientId.getKey(marker)))
+					.collect(Collectors.toList()))
+					.setClusterRadius(clusterRadius));
+		}
+		uiMap.setMarkers(markersByClientId.entrySet().stream()
+				.map(e -> createUiMarkerRecord(e.getValue(), e.getKey()))
+				.collect(Collectors.toList()));
+		uiMap.setDisplayVoronoiCells(displayVoronoiCells);
+		if (heatMapData != null) {
+			uiMap.setHeatMap(heatMapData);
+		}
+		return uiMap;
+	}
+
+	private UiMapMarkerClientRecord createUiMarkerRecord(Marker<RECORD> marker, int clientId) {
+		UiMapMarkerClientRecord clientRecord = new UiMapMarkerClientRecord();
+		clientRecord.setId(clientId);
+		clientRecord.setLocation(marker.getLocation().createUiLocation());
+		Template template = getTemplateForRecord(marker, templateDecider);
+		if (template != null) {
+			clientRecord.setTemplateId(templateIdsByTemplate.get(template));
+			clientRecord.setValues(markerPropertyProvider.getValues(marker.getData(), template.getPropertyNames()));
+		} else {
+			clientRecord.setAsString("" + marker.getData());
+		}
+		clientRecord.setOffsetPixelsX(marker.getOffsetPixelsX());
+		clientRecord.setOffsetPixelsY(marker.getOffsetPixelsY());
+		clientRecord.setAnchor(marker.getMarkerAnchor().toUiMapMarkerAnchor());
+		return clientRecord;
+	}
+
+	@Override
+	public void handleUiEvent(UiEvent event) {
+		switch (event.getUiEventType()) {
+			case UI_MAP2_MAP_CLICKED: {
+				UiMap2.MapClickedEvent mapClickedEvent = (UiMap2.MapClickedEvent) event;
+				this.onMapClicked.fire(new Location(mapClickedEvent.getLocation().getLatitude(), mapClickedEvent.getLocation().getLongitude()));
+				break;
+			}
+			case UI_MAP2_MARKER_CLICKED: {
+				UiMap2.MarkerClickedEvent markerClickedEvent = (UiMap2.MarkerClickedEvent) event;
+				Marker<RECORD> marker = markersByClientId.get(markerClickedEvent.getMarkerId());
+				this.onMarkerClicked.fire(marker);
+				break;
+			}
+			case UI_MAP2_ZOOM_LEVEL_CHANGED: {
+				UiMap2.ZoomLevelChangedEvent zoomEvent = (UiMap2.ZoomLevelChangedEvent) event;
+				this.zoomLevel = zoomEvent.getZoomLevel();
+				this.onZoomLevelChanged.fire(zoomLevel);
+				break;
+			}
+			case UI_MAP2_LOCATION_CHANGED: {
+				UiMap2.LocationChangedEvent locationEvent = (UiMap2.LocationChangedEvent) event;
+				this.location = Location.fromUiMapLocation(locationEvent.getCenter());
+				UiMapArea displayedUiArea = locationEvent.getDisplayedArea();
+				Area displayedArea = new Area(displayedUiArea.getMinLatitude(), displayedUiArea.getMaxLatitude(), displayedUiArea.getMinLongitude(), displayedUiArea.getMaxLongitude());
+				this.onLocationChanged.fire(new LocationChangedEventData(this.location, displayedArea));
+				break;
+			}
+			case UI_MAP2_SHAPE_DRAWN: {
+				UiMap2.ShapeDrawnEvent drawnEvent = (UiMap2.ShapeDrawnEvent) event;
+				ShapeProperties props = drawnEvent.getShape().getShapeProperties() != null ? new ShapeProperties(drawnEvent.getShape().getShapeProperties()) : null;
+				AbstractMapShape shape;
+				switch (drawnEvent.getShape().getUiObjectType()) {
+					case UI_MAP_CIRCLE: {
+						UiMapCircle uiCircle = (UiMapCircle) drawnEvent.getShape();
+						shape = new MapCircle(Location.fromUiMapLocation(uiCircle.getCenter()), uiCircle.getRadius(), props);
+						break;
+					}
+					case UI_MAP_POLYGON: {
+						UiMapPolygon uiPolygon = (UiMapPolygon) drawnEvent.getShape();
+						shape = new MapPolygon(uiPolygon.getPath().stream().map(Location::fromUiMapLocation).collect(Collectors.toList()), props);
+						break;
+					}
+					case UI_MAP_POLYLINE: {
+						UiMapPolyline uiPolyLine = (UiMapPolyline) drawnEvent.getShape();
+						shape = new MapPolyline(uiPolyLine.getPath().stream().map(Location::fromUiMapLocation).collect(Collectors.toList()), props);
+						break;
+					}
+					case UI_MAP_RECTANGLE: {
+						UiMapRectangle uiRect = (UiMapRectangle) drawnEvent.getShape();
+						shape = new MapRectangle(Location.fromUiMapLocation(uiRect.getL1()), Location.fromUiMapLocation(uiRect.getL2()), props);
+						break;
+					}
+					default:
+						throw new IllegalArgumentException("Unknown shape type from UI: " + drawnEvent.getShape().getUiObjectType());
+				}
+				shape.setClientIdInternal(drawnEvent.getShapeId());
+				shapesByClientId.put(drawnEvent.getShapeId(), shape);
+				shape.setListenerInternal(shapeListener);
+				this.onShapeDrawn.fire(shape);
+				break;
+			}
+		}
+	}
+
+	public void addPolyLine(MapPolyline polyline) {
+		addShape(polyline);
+	}
+
+	public void addShape(AbstractMapShape shape) {
+		shape.setListenerInternal(shapeListener);
+		shapesByClientId.put(shape.getClientIdInternal(), shape);
+		queueCommandIfRendered(() -> new UiMap2.AddShapeCommand(getId(), shape.getClientIdInternal(), shape.createUiMapShape()));
+	}
+
+	public void removeShape(AbstractMapShape shape) {
+		queueCommandIfRendered(() -> new UiMap2.RemoveShapeCommand(getId(), shape.getClientIdInternal()));
+	}
+
+	public void clearShapes() {
+		queueCommandIfRendered(() -> new UiMap2.ClearShapesCommand(getId()));
+	}
+
+	public void setMarkerCluster(List<Marker<RECORD>> markers) {
+		setMarkerCluster(markers, 100);
+	}
+
+	public void setMarkerCluster(List<Marker<RECORD>> markers, int clusterRadiusInPixel) {
+		clusterMarkers = new ArrayList<>(markers);
+		clusterRadius = clusterRadiusInPixel;
+		markers.forEach(m -> this.markersByClientId.put(clientIdCounter++, m));
+		queueCommandIfRendered(() -> {
+			UiMapMarkerCluster markerCluster = new UiMapMarkerCluster(clusterMarkers.stream()
+					.map(marker -> createUiMarkerRecord(marker, markersByClientId.getKey(marker)))
+					.collect(Collectors.toList()))
+					.setClusterRadius(clusterRadius);
+			return new UiMap2.SetMapMarkerClusterCommand(getId(), markerCluster);
+		});
+	}
+
+	public void addMarkerToCluster(Marker<RECORD> marker) {
+		clusterMarkers.add(marker);
+		int clientId = clientIdCounter++;
+		this.markersByClientId.put(clientId, marker);
+		queueCommandIfRendered(() -> new UiMap2.AddMarkerToClusterCommand(getId(), createUiMarkerRecord(marker, clientId)));
+	}
+
+	public void clearMarkerCluster() {
+		markersByClientId.values().removeAll(clusterMarkers);
+		clusterMarkers.clear();
+		queueCommandIfRendered(() -> new UiMap2.SetMapMarkerClusterCommand(getId(), new UiMapMarkerCluster(Collections.emptyList())));
+	}
+
+	public void setHeatMap(List<Location> locations) {
+		this.setHeatMap(locations, 10, 30, 20);
+	}
+
+	public void setHeatMap(List<Location> locations, int maxCount) {
+		this.setHeatMap(locations, maxCount, 30, 20);
+	}
+
+	public void setHeatMap(List<Location> locations, int maxCount, int radius, int blurZoomLevel) {
+		List<UiHeatMapDataElement> heatMapElements = locations.stream().map(loc -> new UiHeatMapDataElement((float) loc.getLatitude(), (float) loc.getLongitude(), 1)).collect(Collectors.toList());
+		this.setHeatMap(new UiHeatMapData(heatMapElements).setMaxCount(maxCount).setRadius(radius).setBlur(blurZoomLevel));
+	}
+
+	public void setHeatMap(UiHeatMapData heatMap) {
+		heatMapData = heatMap;
+		queueCommandIfRendered(() -> new UiMap.SetHeatMapCommand(getId(), heatMapData));
+	}
+
+	public void clearHeatMap() {
+		queueCommandIfRendered(() -> new UiMap2.SetHeatMapCommand(getId(), new UiHeatMapData(Collections.emptyList())));
+	}
+
+	private Template getTemplateForRecord(Marker<RECORD> record, TemplateDecider<Marker<RECORD>> templateDecider) {
+		Template template = templateDecider.getTemplate(record);
+		if (template != null && !templateIdsByTemplate.containsKey(template)) {
+			String uuid = "" + templateIdCounter++;
+			this.templateIdsByTemplate.put(template, uuid);
+			queueCommandIfRendered(() -> new UiMap2.RegisterTemplateCommand(getId(), uuid, template.createUiTemplate()));
+		}
+		return template;
+	}
+
+	public String getStyleUrl() {
+		return styleUrl;
+	}
+
+	public void setStyleUrl(String styleUrl) {
+		this.styleUrl = styleUrl;
+		queueCommandIfRendered(() -> new UiMap2.SetStyleUrlCommand(getId(), styleUrl));
+	}
+
+	public void setZoomLevel(int zoomLevel) {
+		this.zoomLevel = zoomLevel;
+		queueCommandIfRendered(() -> new UiMap2.SetZoomLevelCommand(getId(), zoomLevel));
+	}
+
+	public void setLocation(Location location) {
+		setLocation(location, 2000, (int) getZoomLevel());
+	}
+
+	public void setLocation(double latitude, double longitude) {
+		setLocation(new Location(latitude, longitude));
+	}
+
+	public void setLocation(Location location, long animationDurationMillis, int targetZoomLevel) {
+		this.location = location;
+		this.zoomLevel = targetZoomLevel;
+		queueCommandIfRendered(() -> new UiMap2.SetLocationCommand(getId(), location.createUiLocation(), animationDurationMillis, targetZoomLevel));
+	}
+
+	public void setLatitude(double latitude) {
+		setLocation(new Location(latitude, location.getLongitude()));
+	}
+
+	public void setLongitude(double longitude) {
+		setLocation(new Location(location.getLatitude(), longitude));
+	}
+
+	public float getZoomLevel() {
+		return zoomLevel;
+	}
+
+	public Location getLocation() {
+		return location;
+	}
+
+	public void addMarkers(List<Marker<RECORD>> markers) {
+		markers.forEach(m -> this.markersByClientId.put(clientIdCounter++, m));
+		queueCommandIfRendered(() -> {
+			UiMapMarkers uiMarkers = new UiMapMarkers(markers.stream()
+					.map(marker -> createUiMarkerRecord(marker, markersByClientId.getKey(marker)))
+					.collect(Collectors.toList()));
+			return new UiMap2.AddMarkersCommand(getId(), uiMarkers);
+		});
+	}
+
+	public void addMarker(Marker<RECORD> marker) {
+		int clientId = clientIdCounter++;
+		this.markersByClientId.put(clientId, marker);
+		queueCommandIfRendered(() -> new UiMap2.AddMarkerCommand(getId(), createUiMarkerRecord(marker, clientId)));
+	}
+
+	public void removeMarker(Marker<RECORD> marker) {
+		Integer clientId = markersByClientId.removeValue(marker);
+		if (clientId != null) {
+			queueCommandIfRendered(() -> new UiMap2.RemoveMarkerCommand(getId(), clientId));
+		}
+	}
+
+	public void clearMarkers() {
+		var newMarkersByClientId = clusterMarkers.stream().collect(Collectors.toMap(markersByClientId::getKey, m -> m));
+		markersByClientId.clear();
+		markersByClientId.putAll(newMarkersByClientId);
+		queueCommandIfRendered(() -> new UiMap2.ClearMarkersCommand(getId()));
+	}
+
+	public boolean isDisplayVoronoiCells() {
+		return displayVoronoiCells;
+	}
+
+	public void setDisplayVoronoiCells(boolean enable) {
+		displayVoronoiCells = enable;
+		queueCommandIfRendered(() -> new UiMap2.SetDisplayVoronoiCellsCommand(getId(), enable));
+	}
+
+	public void fitBounds(Location southWest, Location northEast) {
+		this.location = new Location((southWest.getLatitude() + northEast.getLatitude()) / 2, (southWest.getLongitude() + northEast.getLongitude()) / 2);
+		queueCommandIfRendered(() -> new UiMap2.FitBoundsCommand(this.getId(), southWest.createUiLocation(), northEast.createUiLocation()));
+	}
+
+	public Template getDefaultTemplate() {
+		return defaultTemplate;
+	}
+
+	public void setDefaultMarkerTemplate(Template defaultTemplate) {
+		this.defaultTemplate = defaultTemplate;
+	}
+
+	public TemplateDecider<Marker<RECORD>> getTemplateDecider() {
+		return templateDecider;
+	}
+
+	public void setMarkerTemplateDecider(TemplateDecider<Marker<RECORD>> templateDecider) {
+		this.templateDecider = templateDecider;
+	}
+
+	public PropertyProvider<RECORD> getMarkerPropertyProvider() {
+		return markerPropertyProvider;
+	}
+
+	public void setMarkerPropertyProvider(PropertyProvider<RECORD> propertyProvider) {
+		this.markerPropertyProvider = propertyProvider;
+	}
+
+	public void setMarkerPropertyExtractor(PropertyExtractor<RECORD> propertyExtractor) {
+		this.setMarkerPropertyProvider(propertyExtractor);
+	}
+
+	public boolean isDisplayAttributionControl() {
+		return displayAttributionControl;
+	}
+
+	public void setDisplayAttributionControl(boolean displayAttributionControl) {
+		this.displayAttributionControl = displayAttributionControl;
+	}
+
+	public boolean isDisplayNavigationControl() {
+		return displayNavigationControl;
+	}
+
+	public void setDisplayNavigationControl(boolean displayNavigationControl) {
+		this.displayNavigationControl = displayNavigationControl;
+	}
+
+	public void startDrawingShape(MapShapeType shapeType, ShapeProperties shapeProperties) {
+		ShapeProperties shapeProps = shapeProperties == null ? new ShapeProperties(Color.MATERIAL_BLUE_400) : shapeProperties;
+		queueCommandIfRendered(() -> new UiMap2.StartDrawingShapeCommand(getId(), shapeType.toUiMapShapeType(), shapeProps.createUiShapeProperties()));
+		drawingShapeStarted = true;
+	}
+
+	public void stopDrawingShape() {
+		queueCommandIfRendered(() -> new UiMap2.StopDrawingShapeCommand(getId()));
+		drawingShapeStarted = false;
+	}
+
+	public boolean isDrawingShapeStarted() {
+		return drawingShapeStarted;
+	}
+
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/map/MapViewModel.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/map/MapViewModel.java
index db27a92d8..a5ec17567 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/map/MapViewModel.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/map/MapViewModel.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/map/Marker.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/map/Marker.java
index 0860b3883..d50dc809f 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/map/Marker.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/map/Marker.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -22,24 +22,59 @@
 public class Marker<RECORD> {
 
 	private final Location location;
-	private final String title;
 	private final RECORD data;
+	private MarkerAnchor markerAnchor = MarkerAnchor.BOTTOM_LEFT;
+	private int offsetPixelsX = 0;
+	private int offsetPixelsY = 0;
 
-	public Marker(Location location, String title, RECORD data) {
+	public Marker(Location location, RECORD data) {
+		this(location, data, 0, 0);
+	}
+
+	public Marker(Location location, RECORD data, MarkerAnchor markerAnchor) {
+		this(location, data, 0, 0);
+		this.markerAnchor = markerAnchor;
+	}
+
+	public Marker(Location location, RECORD data, int offsetPixelsX, int offsetPixelsY) {
 		this.location = location;
-		this.title = title;
 		this.data = data;
+		this.offsetPixelsX = offsetPixelsX;
+		this.offsetPixelsY = offsetPixelsY;
 	}
 
 	public Location getLocation() {
 		return location;
 	}
 
-	public String getTitle() {
-		return title;
-	}
-
 	public RECORD getData() {
 		return data;
 	}
+
+	public MarkerAnchor getMarkerAnchor() {
+		return markerAnchor;
+	}
+
+	public Marker<RECORD> setMarkerAnchor(MarkerAnchor markerAnchor) {
+		this.markerAnchor = markerAnchor;
+		return this;
+	}
+
+	public int getOffsetPixelsX() {
+		return offsetPixelsX;
+	}
+
+	public Marker<RECORD> setOffsetPixelsX(int offsetPixelsX) {
+		this.offsetPixelsX = offsetPixelsX;
+		return this;
+	}
+
+	public int getOffsetPixelsY() {
+		return offsetPixelsY;
+	}
+
+	public Marker<RECORD> setOffsetPixelsY(int offsetPixelsY) {
+		this.offsetPixelsY = offsetPixelsY;
+		return this;
+	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/map/MarkerAnchor.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/map/MarkerAnchor.java
new file mode 100644
index 000000000..6aa90efc1
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/map/MarkerAnchor.java
@@ -0,0 +1,40 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.map;
+
+import org.teamapps.dto.UiMapMarkerAnchor;
+
+public enum MarkerAnchor {
+
+	CENTER,
+	TOP,
+	BOTTOM,
+	LEFT,
+	RIGHT,
+	TOP_LEFT,
+	TOP_RIGHT,
+	BOTTOM_LEFT,
+	BOTTOM_RIGHT;
+
+	public UiMapMarkerAnchor toUiMapMarkerAnchor() {
+		return UiMapMarkerAnchor.valueOf(name());
+	}
+
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/map/Polyline.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/map/Polyline.java
deleted file mode 100644
index 181f83225..000000000
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/map/Polyline.java
+++ /dev/null
@@ -1,83 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.ux.component.map;
-
-import org.teamapps.dto.UiMapLocation;
-import org.teamapps.dto.UiMapPolyline;
-
-import java.util.ArrayList;
-import java.util.Collections;
-import java.util.List;
-import java.util.UUID;
-
-public class Polyline {
-
-	private final String clientId = UUID.randomUUID().toString();
-	private final ShapeProperties properties;
-	private final ArrayList<Location> locations;
-	private PolylineListener listener;
-
-	public Polyline(ShapeProperties properties, ArrayList<Location> locations) {
-		this.properties = properties;
-		this.locations = locations;
-	}
-
-	public UiMapPolyline createUiMapPolyline() {
-		List<UiMapLocation> uiLocations = new ArrayList<>();
-		for (Location loc : locations) {
-			uiLocations.add(loc.createUiLocation());
-		}
-		UiMapPolyline uiPolyline = new UiMapPolyline(uiLocations);
-		uiPolyline.setShapeProperties(properties.createUiShapeProperties());
-		return uiPolyline;
-	}
-
-	public Polyline addPoint(Location location) {
-		this.locations.add(location);
-		this.listener.handlePolyLinePointsAdded(this, Collections.singletonList(location));
-		return this;
-	}
-
-	public Polyline addPoints(List<Location> locations) {
-		this.locations.addAll(locations);
-		this.listener.handlePolyLinePointsAdded(this, locations);
-		return this;
-	}
-
-	public ShapeProperties getProperties() {
-		return properties;
-	}
-
-	public ArrayList<Location> getLocations() {
-		return locations;
-	}
-
-	public String getClientId() {
-		return clientId;
-	}
-
-	/*package-private*/ void setListener(PolylineListener listener) {
-		this.listener = listener;
-	}
-
-	public static interface PolylineListener {
-		void handlePolyLinePointsAdded(Polyline polyline, List<Location> points);
-	}
-}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/map/shape/AbstractMapShape.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/map/shape/AbstractMapShape.java
new file mode 100644
index 000000000..0ac09aabe
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/map/shape/AbstractMapShape.java
@@ -0,0 +1,77 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.map.shape;
+
+import org.teamapps.common.format.RgbaColor;
+import org.teamapps.dto.AbstractUiMapShape;
+import org.teamapps.dto.AbstractUiMapShapeChange;
+
+import java.util.UUID;
+
+public abstract class AbstractMapShape {
+
+	protected String clientId = UUID.randomUUID().toString();
+
+	protected final ShapeProperties properties; // TODO make changeable!
+	protected MapShapeListener listener;
+
+	public AbstractMapShape() {
+		this(new ShapeProperties(RgbaColor.BLUE));
+	}
+
+	public AbstractMapShape(ShapeProperties properties) {
+		this.properties = properties;
+	}
+
+	public abstract AbstractUiMapShape createUiMapShape();
+
+	protected void mapAbstractUiShapeProperties(AbstractUiMapShape uiShape) {
+		uiShape.setShapeProperties(properties.createUiShapeProperties());
+	}
+
+
+	public ShapeProperties getProperties() {
+		return properties;
+	}
+
+	public void remove() {
+		listener.handleShapeRemoved(this);
+	}
+
+	public void setListenerInternal(MapShapeListener listener) {
+		this.listener = listener;
+	}
+
+	public String getClientIdInternal() {
+		return clientId;
+	}
+
+	public void setClientIdInternal(String clientId) {
+		this.clientId = clientId;
+	}
+
+	public interface MapShapeListener {
+		void handleShapeChanged(AbstractMapShape shape);
+
+		void handleShapeChanged(AbstractMapShape shape, AbstractUiMapShapeChange change);
+
+		void handleShapeRemoved(AbstractMapShape shape);
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/map/shape/MapCircle.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/map/shape/MapCircle.java
new file mode 100644
index 000000000..126b3ca38
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/map/shape/MapCircle.java
@@ -0,0 +1,81 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.map.shape;
+
+import org.teamapps.common.format.Color;
+import org.teamapps.dto.UiMapCircle;
+import org.teamapps.ux.component.map.Location;
+
+public class MapCircle extends AbstractMapShape {
+
+	private Location center;
+	private int radiusMeters;
+
+	public MapCircle(Location center, int radiusMeters) {
+		this.center = center;
+		this.radiusMeters = radiusMeters;
+	}
+
+	public MapCircle(Location center, int radiusMeters, ShapeProperties properties) {
+		super(properties);
+		this.center = center;
+		this.radiusMeters = radiusMeters;
+	}
+
+	public MapCircle(Location center, int radiusMeters, Color fillColor) {
+		this(center, radiusMeters, new ShapeProperties(Color.TRANSPARENT, 0, fillColor));
+		this.center = center;
+		this.radiusMeters = radiusMeters;
+	}
+
+	public MapCircle(Location center, int radiusMeters, Color fillColor, Color strokeColor) {
+		this(center, radiusMeters, new ShapeProperties(strokeColor, 1, fillColor));
+	}
+
+	public MapCircle(Location center, int radiusMeters, Color fillColor, Color strokeColor, float strokeWidth) {
+		this(center, radiusMeters, new ShapeProperties(strokeColor, strokeWidth, fillColor));
+	}
+
+	public UiMapCircle createUiMapShape() {
+		UiMapCircle uiCircle = new UiMapCircle();
+		mapAbstractUiShapeProperties(uiCircle);
+		uiCircle.setCenter(center.createUiLocation());
+		uiCircle.setRadius(radiusMeters);
+		return uiCircle;
+	}
+
+	public Location getCenter() {
+		return center;
+	}
+
+	public void setCenter(Location center) {
+		this.center = center;
+		listener.handleShapeChanged(this);
+	}
+
+	public int getRadiusMeters() {
+		return radiusMeters;
+	}
+
+	public void setRadiusMeters(int radiusMeters) {
+		this.radiusMeters = radiusMeters;
+		listener.handleShapeChanged(this);
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/map/shape/MapPolygon.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/map/shape/MapPolygon.java
new file mode 100644
index 000000000..be0b875bf
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/map/shape/MapPolygon.java
@@ -0,0 +1,54 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.map.shape;
+
+import org.teamapps.dto.UiMapPolygon;
+import org.teamapps.ux.component.map.Location;
+
+import java.util.List;
+import java.util.stream.Collectors;
+
+public class MapPolygon extends AbstractMapShape {
+
+	private List<Location> locations;
+
+	public MapPolygon(List<Location> locations, ShapeProperties properties) {
+		super(properties);
+		this.locations = locations;
+	}
+
+	public UiMapPolygon createUiMapShape() {
+		UiMapPolygon uiPolygon = new UiMapPolygon();
+		mapAbstractUiShapeProperties(uiPolygon);
+		uiPolygon.setPath(locations.stream()
+				.map(Location::createUiLocation)
+				.collect(Collectors.toList()));
+		return uiPolygon;
+	}
+
+	public List<Location> getLocations() {
+		return locations;
+	}
+
+	public void setLocations(List<Location> locations) {
+		this.locations = locations;
+		listener.handleShapeChanged(this);
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/map/shape/MapPolyline.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/map/shape/MapPolyline.java
new file mode 100644
index 000000000..51d101d81
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/map/shape/MapPolyline.java
@@ -0,0 +1,71 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.map.shape;
+
+import org.teamapps.dto.UiMapLocation;
+import org.teamapps.dto.UiMapPolyline;
+import org.teamapps.dto.UiPolylineAppend;
+import org.teamapps.ux.component.map.Location;
+
+import java.util.ArrayList;
+import java.util.List;
+import java.util.stream.Collectors;
+
+public class MapPolyline extends AbstractMapShape {
+
+	private List<Location> points;
+
+	public MapPolyline(List<Location> points, ShapeProperties properties) {
+		super(properties);
+		this.points = new ArrayList<>(points);
+	}
+
+	public UiMapPolyline createUiMapShape() {
+		UiMapPolyline uiPolyline = new UiMapPolyline();
+		mapAbstractUiShapeProperties(uiPolyline);
+		uiPolyline.setPath(toUiMapLocations(points));
+		return uiPolyline;
+	}
+
+	private List<UiMapLocation> toUiMapLocations(List<Location> locations) {
+		return locations.stream()
+				.map(Location::createUiLocation)
+				.collect(Collectors.toList());
+	}
+
+	public MapPolyline addPoint(Location location) {
+		return addPoints(List.of(location));
+	}
+
+	public MapPolyline addPoints(List<Location> points) {
+		this.points.addAll(points);
+		this.listener.handleShapeChanged(this, new UiPolylineAppend(toUiMapLocations(points)));
+		return this;
+	}
+
+	public List<Location> getPoints() {
+		return points;
+	}
+
+	public void setPoints(List<Location> points) {
+		this.points = points;
+		listener.handleShapeChanged(this);
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/map/shape/MapRectangle.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/map/shape/MapRectangle.java
new file mode 100644
index 000000000..624e8ee85
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/map/shape/MapRectangle.java
@@ -0,0 +1,66 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.map.shape;
+
+import org.teamapps.dto.UiMapRectangle;
+import org.teamapps.ux.component.map.Location;
+
+public class MapRectangle extends AbstractMapShape {
+
+	private Location location1;
+	private Location location2;
+
+	public MapRectangle(Location location1, Location location2) {
+		this.location1 = location1;
+		this.location2 = location2;
+	}
+
+	public MapRectangle(Location location1, Location location2, ShapeProperties properties) {
+		super(properties);
+		this.location1 = location1;
+		this.location2 = location2;
+	}
+
+	public UiMapRectangle createUiMapShape() {
+		UiMapRectangle uiRect = new UiMapRectangle();
+		mapAbstractUiShapeProperties(uiRect);
+		uiRect.setL1(location1.createUiLocation());
+		uiRect.setL2(location2.createUiLocation());
+		return uiRect;
+	}
+
+	public Location getLocation1() {
+		return location1;
+	}
+
+	public void setLocation1(Location location1) {
+		this.location1 = location1;
+		listener.handleShapeChanged(this);
+	}
+
+	public Location getLocation2() {
+		return location2;
+	}
+
+	public void setLocation2(Location location2) {
+		this.location2 = location2;
+		listener.handleShapeChanged(this);
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/map/ShapeProperties.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/map/shape/ShapeProperties.java
similarity index 62%
rename from teamapps-ux/src/main/java/org/teamapps/ux/component/map/ShapeProperties.java
rename to teamapps-ux/src/main/java/org/teamapps/ux/component/map/shape/ShapeProperties.java
index a2017146f..671f4ca67 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/map/ShapeProperties.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/map/shape/ShapeProperties.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,19 +17,19 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-package org.teamapps.ux.component.map;
+package org.teamapps.ux.component.map.shape;
 
-import org.teamapps.dto.UiShapeProperties;
 import org.teamapps.common.format.Color;
+import org.teamapps.dto.UiShapeProperties;
+
+import java.util.List;
 
 public class ShapeProperties {
 
-	private Color strokeColor = Color.BLACK;
-	private float strokeOpacity = 0.8f;
+	private Color strokeColor;
 	private float strokeWeight = 2f;
-	private String strokeDashArray;
-	private Color fillColor = Color.BLUE;
-	private float fillOpacity = 0.4f;
+	private List<Float> strokeDashArray;
+	private Color fillColor = Color.TRANSPARENT;
 
 	public ShapeProperties(Color strokeColor) {
 		this.strokeColor = strokeColor;
@@ -40,20 +40,29 @@ public ShapeProperties(Color strokeColor, float strokeWeight) {
 		this.strokeWeight = strokeWeight;
 	}
 
-	public ShapeProperties(Color strokeColor, float strokeWeight, String strokeDashArray) {
+	public ShapeProperties(Color strokeColor, float strokeWeight, List<Float> strokeDashArray) {
 		this.strokeColor = strokeColor;
 		this.strokeWeight = strokeWeight;
 		this.strokeDashArray = strokeDashArray;
 	}
 
-	public ShapeProperties(Color strokeColor, float strokeOpacity, float strokeWeight, Color fillColor, float fillOpacity) {
+	public ShapeProperties(Color strokeColor, float strokeWeight, Color fillColor) {
 		this.strokeColor = strokeColor;
-		this.strokeOpacity = strokeOpacity;
 		this.strokeWeight = strokeWeight;
 		this.fillColor = fillColor;
-		this.fillOpacity = fillOpacity;
 	}
 
+	public ShapeProperties(UiShapeProperties uiProperties) {
+		if (uiProperties.getStrokeColor() != null) {
+			this.strokeColor = Color.fromHtmlString(uiProperties.getStrokeColor());
+		}
+		if (uiProperties.getFillColor() != null) {
+			this.fillColor = Color.fromHtmlString(uiProperties.getFillColor());
+		}
+		this.strokeWeight = uiProperties.getStrokeWeight();
+		this.strokeDashArray = uiProperties.getStrokeDashArray();
+	}
+	                                                                                                                      					
 	public Color getStrokeColor() {
 		return strokeColor;
 	}
@@ -62,14 +71,6 @@ public void setStrokeColor(Color strokeColor) {
 		this.strokeColor = strokeColor;
 	}
 
-	public float getStrokeOpacity() {
-		return strokeOpacity;
-	}
-
-	public void setStrokeOpacity(float strokeOpacity) {
-		this.strokeOpacity = strokeOpacity;
-	}
-
 	public float getStrokeWeight() {
 		return strokeWeight;
 	}
@@ -86,28 +87,18 @@ public void setFillColor(Color fillColor) {
 		this.fillColor = fillColor;
 	}
 
-	public float getFillOpacity() {
-		return fillOpacity;
-	}
-
-	public void setFillOpacity(float fillOpacity) {
-		this.fillOpacity = fillOpacity;
-	}
-
-	public String getStrokeDashArray() {
+	public List<Float> getStrokeDashArray() {
 		return strokeDashArray;
 	}
 
-	public void setStrokeDashArray(String strokeDashArray) {
+	public void setStrokeDashArray(List<Float> strokeDashArray) {
 		this.strokeDashArray = strokeDashArray;
 	}
 
 	public UiShapeProperties createUiShapeProperties() {
 		UiShapeProperties properties = new UiShapeProperties();
-		properties.setFillColor(fillColor.toHtmlColorString());
-		properties.setFillOpacity(fillOpacity);
-		properties.setStrokeColor(strokeColor.toHtmlColorString());
-		properties.setStrokeOpacity(strokeOpacity);
+		properties.setFillColor(fillColor != null ? fillColor.toHtmlColorString() : null);
+		properties.setStrokeColor(strokeColor != null ? strokeColor.toHtmlColorString() : null);
 		properties.setStrokeWeight(strokeWeight);
 		properties.setStrokeDashArray(strokeDashArray);
 		return properties;
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/media/AudioGraph.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/media/AudioGraph.java
index 55d177fd7..68b2b311b 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/media/AudioGraph.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/media/AudioGraph.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/media/MediaPlayer.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/media/MediaPlayer.java
index c133eaa56..23fbe42ee 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/media/MediaPlayer.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/media/MediaPlayer.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -20,13 +20,17 @@
 package org.teamapps.ux.component.media;
 
 import org.teamapps.dto.UiComponent;
-import org.teamapps.dto.UiComponentReference;
+import org.teamapps.dto.UiClientObjectReference;
 import org.teamapps.dto.UiEvent;
 import org.teamapps.icon.material.MaterialIcon;
+import org.teamapps.icons.Icon;
 import org.teamapps.ux.component.AbstractComponent;
 import org.teamapps.ux.component.splitpane.SplitDirection;
 import org.teamapps.ux.component.splitpane.SplitPane;
 import org.teamapps.ux.component.splitpane.SplitSizePolicy;
+import org.teamapps.ux.component.template.BaseTemplate;
+import org.teamapps.ux.component.template.BaseTemplateRecord;
+import org.teamapps.ux.component.template.Template;
 import org.teamapps.ux.component.toolbar.ToolbarButton;
 
 import java.util.Arrays;
@@ -35,14 +39,14 @@
 
 public class MediaPlayer extends AbstractComponent {
 
-	private VideoPlayer videoPlayer;
+	private final VideoPlayer videoPlayer;
 	private MediaTrackGraph trackGraph;
-	private SplitPane splitPane;
+	private final SplitPane splitPane;
 
 
 	public MediaPlayer() {
 		videoPlayer = new VideoPlayer(null);
-		videoPlayer.onVideoPlayerProgress.addListener(position -> {
+		videoPlayer.onProgress.addListener(position -> {
 			if (trackGraph != null) {
 				trackGraph.setCursorPosition(position * 1000);
 			}
@@ -56,28 +60,32 @@ public MediaPlayer() {
 	}
 
 	public List<ToolbarButton> createToolbarControls() {
-		ToolbarButton play = ToolbarButton.createLarge(MaterialIcon.PLAY_ARROW, "Play", null);
-		ToolbarButton pause = ToolbarButton.createLarge(MaterialIcon.PAUSE, "Pause", null);
-		ToolbarButton stop = ToolbarButton.createLarge(MaterialIcon.STOP, "Stop", null);
+		return createToolbarControls(BaseTemplate.TOOLBAR_BUTTON, MaterialIcon.PLAY_ARROW, MaterialIcon.PAUSE, MaterialIcon.STOP);
+	}
+
+	public List<ToolbarButton> createToolbarControls(Template template, Icon playIcon, Icon pauseIcon, Icon stopIcon) {
+		ToolbarButton play = new ToolbarButton(template, new BaseTemplateRecord(playIcon, "Play", null));
+		ToolbarButton pause = new ToolbarButton(template, new BaseTemplateRecord(pauseIcon, "Pause", null));
+		ToolbarButton stop = new ToolbarButton(template, new BaseTemplateRecord(stopIcon, "Stop", null));
 		pause.setVisible(false);
 
 		play.onClick.addListener(toolbarButtonClickEvent -> {
+			videoPlayer.play();
 			play.setVisible(false);
 			pause.setVisible(true);
-			videoPlayer.play();
 		});
 
 		pause.onClick.addListener(toolbarButtonClickEvent -> {
+			videoPlayer.pause();
 			play.setVisible(true);
 			pause.setVisible(false);
-			videoPlayer.pause();
 		});
 
 		stop.onClick.addListener(toolbarButtonClickEvent -> {
-			play.setVisible(true);
-			pause.setVisible(false);
 			videoPlayer.pause();
 			videoPlayer.setPosition(0);
+			play.setVisible(true);
+			pause.setVisible(false);
 		});
 
 		return Arrays.asList(play, pause, stop);
@@ -110,8 +118,8 @@ public UiComponent createUiComponent() {
 	}
 
 	@Override
-	public UiComponentReference createUiComponentReference() {
-		return splitPane.createUiComponentReference();
+	public UiClientObjectReference createUiReference() {
+		return splitPane.createUiReference();
 	}
 
 	@Override
@@ -119,8 +127,4 @@ public void handleUiEvent(UiEvent event) {
 
 	}
 
-	@Override
-	protected void doDestroy() {
-		// nothing to do
-	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/media/MediaTrackData.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/media/MediaTrackData.java
index c8029ad7f..1a035e586 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/media/MediaTrackData.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/media/MediaTrackData.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/media/MediaTrackGraph.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/media/MediaTrackGraph.java
index a137852a3..b1f765c86 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/media/MediaTrackGraph.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/media/MediaTrackGraph.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -37,7 +37,7 @@ public MediaTrackGraph(MediaTrackData data) {
 
 	@Override
 	public UiComponent createUiComponent() {
-		UiMediaTrackGraph uiMediaTrackGraph = new UiMediaTrackGraph(getId());
+		UiMediaTrackGraph uiMediaTrackGraph = new UiMediaTrackGraph();
 		mapAbstractUiComponentProperties(uiMediaTrackGraph);
 		uiMediaTrackGraph.setTrackCount(data.getTrackCount());
 		uiMediaTrackGraph.setTrackData(data.getTrackData());
@@ -71,10 +71,5 @@ public TimeSelection(long start, long end) {
 		}
 	}
 
-	@Override
-	protected void doDestroy() {
-		// nothing to do
-	}
-
 }
 
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/media/PosterImageSize.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/media/PosterImageSize.java
index a7f46fa0c..db1231545 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/media/PosterImageSize.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/media/PosterImageSize.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,14 +19,14 @@
  */
 package org.teamapps.ux.component.media;
 
-import org.teamapps.dto.UiVideoPlayer;
+import org.teamapps.dto.UiPosterImageSize;
 
 public enum PosterImageSize {
 
-	CONTAIN, COVER, ORIGINAL;
+	CONTAIN, COVER, FILL;
 
-	public UiVideoPlayer.PosterImageSize toUiPosterImageSize() {
-		return UiVideoPlayer.PosterImageSize.valueOf(this.name());
+	public UiPosterImageSize toUiPosterImageSize() {
+		return UiPosterImageSize.valueOf(this.name());
 	}
 
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/media/PreloadMode.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/media/PreloadMode.java
index 6d54a5755..920873134 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/media/PreloadMode.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/media/PreloadMode.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/media/TrackLabelFormat.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/media/TrackLabelFormat.java
new file mode 100644
index 000000000..fdcd8e5b1
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/media/TrackLabelFormat.java
@@ -0,0 +1,35 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.media;
+
+import org.teamapps.dto.UiTrackLabelFormat;
+
+public enum TrackLabelFormat {
+
+	LABEL,
+	LANGUAGE,
+	LANGUAGE_ROLE,
+	ROLE;
+
+	public UiTrackLabelFormat toUiTrackLabelFormat() {
+		return UiTrackLabelFormat.valueOf(this.name());
+	}
+
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/media/TrackMarkerData.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/media/TrackMarkerData.java
index c1005c748..dc1ad40c2 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/media/TrackMarkerData.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/media/TrackMarkerData.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,8 +19,8 @@
  */
 package org.teamapps.ux.component.media;
 
-import org.teamapps.dto.UiMediaTrackMarker;
 import org.teamapps.common.format.Color;
+import org.teamapps.dto.UiMediaTrackMarker;
 
 public class TrackMarkerData {
 
@@ -43,8 +43,8 @@ public UiMediaTrackMarker createMarker() {
 		marker.setTrack(track);
 		marker.setStart(start);
 		marker.setEnd(end);
-		marker.setColor(color.toHtmlColorString());
-		marker.setBackgroundColor(backgroundColor.toHtmlColorString());
+		marker.setColor(color != null ? color.toHtmlColorString() : null);
+		marker.setBackgroundColor(backgroundColor != null ? backgroundColor.toHtmlColorString() : null);
 		return marker;
 	}
 
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/media/VideoPlayer.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/media/VideoPlayer.java
index 67f0fee45..7c707b719 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/media/VideoPlayer.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/media/VideoPlayer.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,19 +19,21 @@
  */
 package org.teamapps.ux.component.media;
 
+import org.teamapps.common.format.RgbaColor;
+import org.teamapps.common.format.Color;
 import org.teamapps.dto.UiComponent;
 import org.teamapps.dto.UiEvent;
 import org.teamapps.dto.UiVideoPlayer;
 import org.teamapps.event.Event;
 import org.teamapps.ux.component.AbstractComponent;
-import org.teamapps.common.format.Color;
 
-import static org.teamapps.util.UiUtil.createUiColor;
+import java.util.Objects;
 
 public class VideoPlayer extends AbstractComponent {
 
 	public final Event<Void> onErrorLoading = new Event<>();
-	public final Event<Integer> onVideoPlayerProgress = new Event<>();
+	public final Event<Integer> onProgress = new Event<>();
+	public final Event<Void> onEnded = new Event<>();
 
 	private String url; //the url of the video
 	private boolean autoplay; // if set...
@@ -39,7 +41,7 @@ public class VideoPlayer extends AbstractComponent {
 	private String posterImageUrl;
 	private PosterImageSize posterImageSize = PosterImageSize.COVER;
 	private int sendPlayerProgressEventsEachXSeconds = 1; // if 0, then send NO events
-	private Color backgroundColor = new Color(68, 68, 68);
+	private Color backgroundColor = new RgbaColor(68, 68, 68);
 	private PreloadMode preloadMode = PreloadMode.METADATA;
 
 	public VideoPlayer() {
@@ -51,14 +53,14 @@ public VideoPlayer(String url) {
 
 	@Override
 	public UiComponent createUiComponent() {
-		UiVideoPlayer uiVideoPlayer = new UiVideoPlayer(getId(), url);
+		UiVideoPlayer uiVideoPlayer = new UiVideoPlayer(url);
 		mapAbstractUiComponentProperties(uiVideoPlayer);
 		uiVideoPlayer.setAutoplay(autoplay);
 		uiVideoPlayer.setShowControls(showControls);
 		uiVideoPlayer.setPosterImageUrl(posterImageUrl);
 		uiVideoPlayer.setPosterImageSize(posterImageSize.toUiPosterImageSize());
 		uiVideoPlayer.setSendPlayerProgressEventsEachXSeconds(sendPlayerProgressEventsEachXSeconds);
-		uiVideoPlayer.setBackgroundColor(backgroundColor != null ? createUiColor(backgroundColor): null);
+		uiVideoPlayer.setBackgroundColor(backgroundColor != null ? backgroundColor.toHtmlColorString() : null);
 		uiVideoPlayer.setPreloadMode(preloadMode.toUiPreloadMode());
 		return uiVideoPlayer;
 	}
@@ -66,13 +68,19 @@ public UiComponent createUiComponent() {
 	@Override
 	public void handleUiEvent(UiEvent event) {
 		switch (event.getUiEventType()) {
-			case UI_VIDEO_PLAYER_ERROR_LOADING:
+			case UI_VIDEO_PLAYER_ERROR_LOADING: {
 				onErrorLoading.fire(null);
 				break;
-			case UI_VIDEO_PLAYER_PLAYER_PROGRESS:
-				UiVideoPlayer.PlayerProgressEvent progressEvent = (UiVideoPlayer.PlayerProgressEvent) event;
-				onVideoPlayerProgress.fire(progressEvent.getPositionInSeconds());
+			}
+			case UI_VIDEO_PLAYER_PLAYER_PROGRESS: {
+				UiVideoPlayer.PlayerProgressEvent e = (UiVideoPlayer.PlayerProgressEvent) event;
+				onProgress.fire(e.getPositionInSeconds());
+				break;
+			}
+			case UI_VIDEO_PLAYER_ENDED: {
+				onEnded.fire();
 				break;
+			}
 		}
 	}
 
@@ -111,8 +119,11 @@ public boolean isShowControls() {
 	}
 
 	public void setShowControls(boolean showControls) {
+		boolean changed = showControls != this.showControls;
 		this.showControls = showControls;
-		reRenderIfRendered();
+		if (changed) {
+			reRenderIfRendered();
+		}
 	}
 
 	public String getPosterImageUrl() {
@@ -120,8 +131,11 @@ public String getPosterImageUrl() {
 	}
 
 	public void setPosterImageUrl(String posterImageUrl) {
+		boolean changed = !Objects.equals(posterImageUrl, this.posterImageUrl);
 		this.posterImageUrl = posterImageUrl;
-		reRenderIfRendered();
+		if (changed) {
+			reRenderIfRendered();
+		}
 	}
 
 	public PosterImageSize getPosterImageSize() {
@@ -129,8 +143,11 @@ public PosterImageSize getPosterImageSize() {
 	}
 
 	public void setPosterImageSize(PosterImageSize posterImageSize) {
+		boolean changed = posterImageSize != this.posterImageSize;
 		this.posterImageSize = posterImageSize;
-		reRenderIfRendered();
+		if (changed) {
+			reRenderIfRendered();
+		}
 	}
 
 	public int getSendPlayerProgressEventsEachXSeconds() {
@@ -138,8 +155,11 @@ public int getSendPlayerProgressEventsEachXSeconds() {
 	}
 
 	public void setSendPlayerProgressEventsEachXSeconds(int sendPlayerProgressEventsEachXSeconds) {
+		boolean changed = sendPlayerProgressEventsEachXSeconds != this.sendPlayerProgressEventsEachXSeconds;
 		this.sendPlayerProgressEventsEachXSeconds = sendPlayerProgressEventsEachXSeconds;
-		reRenderIfRendered();
+		if (changed) {
+			reRenderIfRendered();
+		}
 	}
 
 	public Color getBackgroundColor() {
@@ -147,8 +167,11 @@ public Color getBackgroundColor() {
 	}
 
 	public void setBackgroundColor(Color backgroundColor) {
+		boolean changed = !Objects.equals(backgroundColor, this.backgroundColor);
 		this.backgroundColor = backgroundColor;
-		reRenderIfRendered();
+		if (changed) {
+			reRenderIfRendered();
+		}
 	}
 
 	public PreloadMode getPreloadMode() {
@@ -160,8 +183,4 @@ public void setPreloadMode(PreloadMode preloadMode) {
 		queueCommandIfRendered(() -> new UiVideoPlayer.SetPreloadModeCommand(getId(), preloadMode.toUiPreloadMode()));
 	}
 
-	@Override
-	protected void doDestroy() {
-		// nothing to do
-	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/media/shaka/ControlPanelElementType.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/media/shaka/ControlPanelElementType.java
new file mode 100644
index 000000000..706743a26
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/media/shaka/ControlPanelElementType.java
@@ -0,0 +1,45 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.media.shaka;
+
+import org.teamapps.dto.UiShakaPlayerControlPanelElementType;
+
+public enum ControlPanelElementType {
+
+	REWIND                              ,
+			FAST_FORWARD                ,
+	SKIP_BACK                           ,
+			SKIP_FORWARD                ,
+	PLAY_PAUSE                          ,
+			TIME_AND_DURATION           ,
+	SPACER                              ,
+			MUTE                        ,
+	VOLUME                              ,
+			FULLSCREEN                  ,
+	OVERFLOW_MENU;
+
+	public static ControlPanelElementType fromUiControlPanelElementType(UiShakaPlayerControlPanelElementType type) {
+		return ControlPanelElementType.valueOf(type.name());
+	}
+
+	public UiShakaPlayerControlPanelElementType toUiShakaPlayerControlPanelElementType() {
+		return UiShakaPlayerControlPanelElementType.valueOf(this.name());
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/media/shaka/ShakaPlayer.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/media/shaka/ShakaPlayer.java
new file mode 100644
index 000000000..589847830
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/media/shaka/ShakaPlayer.java
@@ -0,0 +1,276 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.media.shaka;
+
+import org.teamapps.common.format.Color;
+import org.teamapps.dto.UiComponent;
+import org.teamapps.dto.UiEvent;
+import org.teamapps.dto.UiShakaManifest;
+import org.teamapps.dto.UiShakaPlayer;
+import org.teamapps.event.Event;
+import org.teamapps.ux.component.AbstractComponent;
+import org.teamapps.ux.component.media.PosterImageSize;
+import org.teamapps.ux.component.media.TrackLabelFormat;
+import org.teamapps.ux.session.SessionContext;
+
+import java.util.List;
+import java.util.Objects;
+import java.util.stream.Collectors;
+
+public class ShakaPlayer extends AbstractComponent {
+
+	public final Event<Void> onErrorLoading = new Event<>();
+	public final Event<UiShakaManifest> onManifestLoaded = new Event<>();
+	public final Event<Long> onTimeUpdate = new Event<>();
+	public final Event<Void> onEnded = new Event<>();
+	public final Event<SkipClickedEvent> onSkipClicked = new Event<>();
+	public static void setDistinctManifestAudioTracksFixEnabled(boolean enabled) {
+		SessionContext.current().queueCommand(new UiShakaPlayer.SetDistinctManifestAudioTracksFixEnabledCommand(enabled));
+	}
+
+	private String hlsUrl;
+	private String dashUrl;
+	private String posterImageUrl;
+	private PosterImageSize posterImageSize = PosterImageSize.CONTAIN;
+	private int timeUpdateEventThrottleMillis = 1000;
+	private Color backgroundColor = Color.BLACK;
+	private TrackLabelFormat trackLabelFormat = TrackLabelFormat.LABEL;
+	private boolean videoDisabled = false;
+	private String audioLanguage;
+	private boolean bigPlayButtonEnabled = true;
+	private int controlFadeDelaySeconds = 0; // 0 = default value (see shaka docs)
+	private List<ControlPanelElementType> controlPanelElements = List.of(
+			ControlPanelElementType.PLAY_PAUSE,
+			ControlPanelElementType.TIME_AND_DURATION,
+			ControlPanelElementType.SPACER,
+			ControlPanelElementType.MUTE,
+			ControlPanelElementType.VOLUME,
+			ControlPanelElementType.FULLSCREEN,
+			ControlPanelElementType.OVERFLOW_MENU
+	);
+
+	private long timeMillis = 0;
+
+	public ShakaPlayer() {
+	}
+
+	public ShakaPlayer(String hlsUrl, String dashUrl) {
+		this.hlsUrl = hlsUrl;
+		this.dashUrl = dashUrl;
+	}
+
+	@Override
+	public UiComponent createUiComponent() {
+		UiShakaPlayer ui = new UiShakaPlayer();
+		mapAbstractUiComponentProperties(ui);
+		ui.setHlsUrl(hlsUrl);
+		ui.setDashUrl(dashUrl);
+		ui.setPosterImageUrl(posterImageUrl);
+		ui.setPosterImageSize(posterImageSize.toUiPosterImageSize());
+		ui.setTimeUpdateEventThrottleMillis(timeUpdateEventThrottleMillis);
+		ui.setBackgroundColor(backgroundColor != null ? backgroundColor.toHtmlColorString() : null);
+		ui.setTrackLabelFormat(trackLabelFormat.toUiTrackLabelFormat());
+		ui.setVideoDisabled(videoDisabled);
+		ui.setTimeMillis(timeMillis);
+		ui.setPreferredAudioLanguage(audioLanguage);
+		ui.setBigPlayButtonEnabled(bigPlayButtonEnabled);
+		ui.setControlFadeDelaySeconds(controlFadeDelaySeconds);
+		ui.setControlPanelElements(controlPanelElements.stream().map(t -> t.toUiShakaPlayerControlPanelElementType()).collect(Collectors.toList()));
+		return ui;
+	}
+
+	@Override
+	public void handleUiEvent(UiEvent event) {
+		switch (event.getUiEventType()) {
+			case UI_SHAKA_PLAYER_ERROR_LOADING: {
+				onErrorLoading.fire(null);
+				break;
+			}
+			case UI_SHAKA_PLAYER_MANIFEST_LOADED: {
+				UiShakaPlayer.ManifestLoadedEvent e = (UiShakaPlayer.ManifestLoadedEvent) event;
+				onManifestLoaded.fire(e.getManifest());
+				break;
+			}
+			case UI_SHAKA_PLAYER_TIME_UPDATE: {
+				UiShakaPlayer.TimeUpdateEvent e = (UiShakaPlayer.TimeUpdateEvent) event;
+				onTimeUpdate.fire(e.getTimeMillis());
+				this.timeMillis = e.getTimeMillis();
+				break;
+			}
+			case UI_SHAKA_PLAYER_ENDED: {
+				onEnded.fire();
+				break;
+			}
+			case UI_SHAKA_PLAYER_SKIP_CLICKED: {
+				UiShakaPlayer.SkipClickedEvent e = (UiShakaPlayer.SkipClickedEvent) event;
+				onSkipClicked.fire(new SkipClickedEvent(e.getForward(), e.getPlaybackTimeMillis()));
+				break;
+			}
+		}
+	}
+
+	public void jumpTo(long timeMillis) {
+		this.timeMillis = timeMillis;
+		queueCommandIfRendered(() -> new UiShakaPlayer.JumpToCommand(getId(), timeMillis));
+	}
+
+	public long getTime() {
+		return timeMillis;
+	}
+
+	public void setUrls(String hlsUrl, String dashUrl) {
+		this.timeMillis = 0;
+		this.hlsUrl = hlsUrl;
+		this.dashUrl = dashUrl;
+		queueCommandIfRendered(() -> new UiShakaPlayer.SetUrlsCommand(getId(), hlsUrl, dashUrl));
+	}
+
+	public String getHlsUrl() {
+		return hlsUrl;
+	}
+
+	public void setHlsUrl(String hlsUrl) {
+		setUrls(hlsUrl, dashUrl);
+	}
+
+	public String getDashUrl() {
+		return dashUrl;
+	}
+
+	public void setDashUrl(String dashUrl) {
+		setUrls(hlsUrl, dashUrl);
+	}
+
+	public String getPosterImageUrl() {
+		return posterImageUrl;
+	}
+
+	public void setPosterImageUrl(String posterImageUrl) {
+		boolean changed = !Objects.equals(posterImageUrl, this.posterImageUrl);
+		this.posterImageUrl = posterImageUrl;
+		if (changed) {
+			reRenderIfRendered();
+		}
+	}
+
+	public PosterImageSize getPosterImageSize() {
+		return posterImageSize;
+	}
+
+	public void setPosterImageSize(PosterImageSize posterImageSize) {
+		boolean changed = posterImageSize != this.posterImageSize;
+		this.posterImageSize = posterImageSize;
+		if (changed) {
+			reRenderIfRendered();
+		}
+	}
+
+	public int getTimeUpdateEventThrottleMillis() {
+		return timeUpdateEventThrottleMillis;
+	}
+
+	public void setTimeUpdateEventThrottleMillis(int timeUpdateEventThrottleMillis) {
+		boolean changed = timeUpdateEventThrottleMillis != this.timeUpdateEventThrottleMillis;
+		this.timeUpdateEventThrottleMillis = timeUpdateEventThrottleMillis;
+		if (changed) {
+			reRenderIfRendered();
+		}
+	}
+
+	public Color getBackgroundColor() {
+		return backgroundColor;
+	}
+
+	public void setBackgroundColor(Color backgroundColor) {
+		boolean changed = !Objects.equals(backgroundColor, this.backgroundColor);
+		this.backgroundColor = backgroundColor;
+		if (changed) {
+			reRenderIfRendered();
+		}
+	}
+
+	public TrackLabelFormat getTrackLabelFormat() {
+		return trackLabelFormat;
+	}
+
+	public void setTrackLabelFormat(TrackLabelFormat trackLabelFormat) {
+		boolean changed = trackLabelFormat != this.trackLabelFormat;
+		this.trackLabelFormat = trackLabelFormat;
+		if (changed) {
+			reRenderIfRendered();
+		}
+	}
+
+	public boolean isVideoDisabled() {
+		return videoDisabled;
+	}
+
+	public void setVideoDisabled(boolean videoDisabled) {
+		boolean changed = videoDisabled != this.videoDisabled;
+		this.videoDisabled = videoDisabled;
+		if (changed) {
+			reRenderIfRendered();
+		}
+	}
+
+	public void selectAudioLanguage(String language) {
+		selectAudioLanguage(language, null);
+	}
+
+	public void selectAudioLanguage(String language, String role) {
+		this.audioLanguage = language;
+		queueCommandIfRendered(() -> new UiShakaPlayer.SelectAudioLanguageCommand(getId(), language, role));
+	}
+
+	public boolean isBigPlayButtonEnabled() {
+		return bigPlayButtonEnabled;
+	}
+
+	public void setBigPlayButtonEnabled(boolean bigPlayButtonEnabled) {
+		this.bigPlayButtonEnabled = bigPlayButtonEnabled;
+		reRenderIfRendered();
+	}
+
+	public int getControlFadeDelaySeconds() {
+		return controlFadeDelaySeconds;
+	}
+
+	public void setControlFadeDelaySeconds(int controlFadeDelaySeconds) {
+		this.controlFadeDelaySeconds = controlFadeDelaySeconds;
+		reRenderIfRendered();
+	}
+
+	public List<ControlPanelElementType> getControlPanelElements() {
+		return controlPanelElements;
+	}
+
+	public void setControlPanelElements(List<ControlPanelElementType> controlPanelElements) {
+		this.controlPanelElements = controlPanelElements;
+		reRenderIfRendered();
+	}
+
+	public void play() {
+		queueCommandIfRendered(() -> new UiShakaPlayer.PlayCommand(getId()));
+	}
+
+	public void pause() {
+		queueCommandIfRendered(() -> new UiShakaPlayer.PauseCommand(getId()));
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/media/shaka/SkipClickedEvent.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/media/shaka/SkipClickedEvent.java
new file mode 100644
index 000000000..09e59a2b3
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/media/shaka/SkipClickedEvent.java
@@ -0,0 +1,39 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.media.shaka;
+
+public class SkipClickedEvent {
+
+	private final boolean forward;
+	private final long playbackTimeMillis;
+
+	public SkipClickedEvent(boolean forward, long playbackTimeMillis) {
+		this.forward = forward;
+		this.playbackTimeMillis = playbackTimeMillis;
+	}
+
+	public boolean isForward() {
+		return forward;
+	}
+
+	public long getPlaybackTimeMillis() {
+		return playbackTimeMillis;
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/media/webrtc/WebRtcPlayer.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/media/webrtc/WebRtcPlayer.java
deleted file mode 100644
index 13acc3bc6..000000000
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/media/webrtc/WebRtcPlayer.java
+++ /dev/null
@@ -1,88 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.ux.component.media.webrtc;
-
-import org.teamapps.dto.UiCommand;
-import org.teamapps.dto.UiComponent;
-import org.teamapps.dto.UiEvent;
-import org.teamapps.dto.UiWebRtcPlayer;
-import org.teamapps.ux.component.AbstractComponent;
-import org.teamapps.ux.session.CurrentSessionContext;
-
-import java.util.List;
-import java.util.function.Consumer;
-import java.util.stream.Collectors;
-
-public class WebRtcPlayer extends AbstractComponent {
-
-	private WebRtcPlayingSettings playingSettings;
-	private String backgroundImageUrl;
-
-	public WebRtcPlayer() {
-	}
-
-	@Override
-	public UiComponent createUiComponent() {
-		UiWebRtcPlayer ui = new UiWebRtcPlayer(getId());
-		mapAbstractUiComponentProperties(ui);
-		ui.setPlayingSettings(playingSettings != null ? playingSettings.createUiWebRtcPlayingSettings() : null);
-		ui.setBackgroundImageUrl(backgroundImageUrl);
-		return ui;
-	}
-
-	public static void getPlayableVideoCodecs(Consumer<List<VideoCodec>> resultCallback) {
-		CurrentSessionContext.get().queueCommand((UiCommand) new UiWebRtcPlayer.GetPlayableVideoCodecsCommand(), uiVideoCodecs -> {  // TODO #command-results fix this when the generators are fixed (wrap results with type description)!
-			List<Integer> uiVideoCodecsAsIntegerList = (List<Integer>) uiVideoCodecs; // TODO #command-results fix this when the generators are fixed (wrap results with type description)!
-			List<VideoCodec> codecs = uiVideoCodecsAsIntegerList.stream()
-					.map(uiCodec -> VideoCodec.values()[uiCodec])
-					.collect(Collectors.toList());
-			resultCallback.accept(codecs);
-		});
-	}
-
-	public void play(String signalingUrl, String wowzaApplicationName, String streamName) {
-		this.playingSettings = new WebRtcPlayingSettings(signalingUrl, wowzaApplicationName, streamName);
-		queueCommandIfRendered(() -> new UiWebRtcPlayer.PlayCommand(getId(), playingSettings.createUiWebRtcPlayingSettings()));
-	}
-
-	public void stop() {
-		playingSettings = null;
-		queueCommandIfRendered(() -> new UiWebRtcPlayer.StopPlayingCommand(getId()));
-	}
-
-	public String getBackgroundImageUrl() {
-		return backgroundImageUrl;
-	}
-
-	public void setBackgroundImageUrl(String backgroundImageUrl) {
-		this.backgroundImageUrl = backgroundImageUrl;
-		queueCommandIfRendered(() -> new UiWebRtcPlayer.SetBackgroundImageUrlCommand(getId(), backgroundImageUrl));
-	}
-
-	@Override
-	public void handleUiEvent(UiEvent event) {
-
-	}
-
-	@Override
-	protected void doDestroy() {
-		// nothing to do
-	}
-}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/media/webrtc/WebRtcPlayingSettings.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/media/webrtc/WebRtcPlayingSettings.java
deleted file mode 100644
index b38364c80..000000000
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/media/webrtc/WebRtcPlayingSettings.java
+++ /dev/null
@@ -1,51 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.ux.component.media.webrtc;
-
-import org.teamapps.dto.UiWebRtcPlayingSettings;
-
-public class WebRtcPlayingSettings {
-
-	private final String signalingUrl;
-	private final String wowzaApplicationName;
-	private final String streamName;
-
-	public WebRtcPlayingSettings(String signalingUrl, String wowzaApplicationName, String streamName) {
-		this.signalingUrl = signalingUrl;
-		this.wowzaApplicationName = wowzaApplicationName;
-		this.streamName = streamName;
-	}
-
-	public UiWebRtcPlayingSettings createUiWebRtcPlayingSettings() {
-		return new UiWebRtcPlayingSettings(signalingUrl, wowzaApplicationName, streamName);
-	}
-
-	public String getSignalingUrl() {
-		return signalingUrl;
-	}
-
-	public String getWowzaApplicationName() {
-		return wowzaApplicationName;
-	}
-
-	public String getStreamName() {
-		return streamName;
-	}
-}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/media/webrtc/WebRtcPublisher.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/media/webrtc/WebRtcPublisher.java
deleted file mode 100644
index a6a243e27..000000000
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/media/webrtc/WebRtcPublisher.java
+++ /dev/null
@@ -1,80 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.ux.component.media.webrtc;
-
-import org.teamapps.dto.UiComponent;
-import org.teamapps.dto.UiEvent;
-import org.teamapps.dto.UiWebRtcPlayer;
-import org.teamapps.dto.UiWebRtcPublisher;
-import org.teamapps.ux.component.AbstractComponent;
-
-public class WebRtcPublisher extends AbstractComponent {
-
-	private WebRtcPublishingSettings publishingSettings;
-	private boolean microphoneMuted = false;
-	private String backgroundImageUrl;
-
-	public WebRtcPublisher() {
-	}
-
-	@Override
-	public UiComponent createUiComponent() {
-		UiWebRtcPublisher ui = new UiWebRtcPublisher(getId());
-		mapAbstractUiComponentProperties(ui);
-		ui.setPublishingSettings(publishingSettings != null ? publishingSettings.createUWebRtcPublishingSettings() : null);
-		ui.setMicrophoneMuted(microphoneMuted);
-		ui.setBackgroundImageUrl(backgroundImageUrl);
-		return ui;
-	}
-
-	public void publish(String signalingUrl, String wowzaApplicationName, String streamName, WebRtcPublishingMediaSettings inputSettings) {
-		publishingSettings = new WebRtcPublishingSettings(signalingUrl, wowzaApplicationName, streamName, inputSettings);
-		queueCommandIfRendered(() -> new UiWebRtcPublisher.PublishCommand(getId(), publishingSettings.createUWebRtcPublishingSettings()));
-	}
-
-	public void unPublish() {
-		this.publishingSettings = null;
-		queueCommandIfRendered(() -> new UiWebRtcPublisher.UnPublishCommand(getId()));
-	}
-
-	public void setMicrophoneMuted(boolean microphoneMuted) {
-		this.microphoneMuted = microphoneMuted;
-		queueCommandIfRendered(() -> new UiWebRtcPublisher.SetMicrophoneMutedCommand(getId(), microphoneMuted));
-	}
-
-	public String getBackgroundImageUrl() {
-		return backgroundImageUrl;
-	}
-
-	public void setBackgroundImageUrl(String backgroundImageUrl) {
-		this.backgroundImageUrl = backgroundImageUrl;
-		queueCommandIfRendered(() -> new UiWebRtcPlayer.SetBackgroundImageUrlCommand(getId(), backgroundImageUrl));
-	}
-
-	@Override
-	public void handleUiEvent(UiEvent event) {
-
-	}
-
-	@Override
-	protected void doDestroy() {
-		// nothing to do
-	}
-}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/media/webrtc/WebRtcPublishingMediaSettings.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/media/webrtc/WebRtcPublishingMediaSettings.java
deleted file mode 100644
index 13232cc2b..000000000
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/media/webrtc/WebRtcPublishingMediaSettings.java
+++ /dev/null
@@ -1,133 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.ux.component.media.webrtc;
-
-import org.teamapps.dto.UiWebRtcPublishingMediaSettings;
-
-public class WebRtcPublishingMediaSettings {
-
-	private boolean audio = true;
-	private AudioCodec audioCodec = AudioCodec.OPUS;
-	private int audioKiloBitsPerSecond = 64;
-
-	private boolean video = true;
-	private VideoCodec videoCodec = VideoCodec.H264;
-	private int videoWidth = 720;
-	private int videoHeight = 480;
-	private int videoFps = 25;
-	private int videoKiloBitsPerSecond = 400;
-
-	private boolean screen = false;
-
-	public UiWebRtcPublishingMediaSettings createUiWebRtcPublishingMediaSettings() {
-		UiWebRtcPublishingMediaSettings uiMediaInputSettings = new UiWebRtcPublishingMediaSettings();
-		uiMediaInputSettings.setAudio(audio);
-		uiMediaInputSettings.setAudioCodec(audioCodec.toUiAudioCodec());
-		uiMediaInputSettings.setAudioKiloBitsPerSecond(audioKiloBitsPerSecond);
-		uiMediaInputSettings.setVideo(video);
-		uiMediaInputSettings.setVideoCodec(videoCodec.toUiVideoCodec());
-		uiMediaInputSettings.setVideoWidth(videoWidth);
-		uiMediaInputSettings.setVideoHeight(videoHeight);
-		uiMediaInputSettings.setVideoFps(videoFps);
-		uiMediaInputSettings.setVideoKiloBitsPerSecond(videoKiloBitsPerSecond);
-		uiMediaInputSettings.setScreen(screen);
-		return uiMediaInputSettings;
-	}
-
-	public boolean isAudio() {
-		return audio;
-	}
-
-	public void setAudio(boolean audio) {
-		this.audio = audio;
-	}
-
-	public AudioCodec getAudioCodec() {
-		return audioCodec;
-	}
-
-	public void setAudioCodec(AudioCodec audioCodec) {
-		this.audioCodec = audioCodec;
-	}
-
-	public int getAudioKiloBitsPerSecond() {
-		return audioKiloBitsPerSecond;
-	}
-
-	public void setAudioKiloBitsPerSecond(int audioKiloBitsPerSecond) {
-		this.audioKiloBitsPerSecond = audioKiloBitsPerSecond;
-	}
-
-	public boolean isVideo() {
-		return video;
-	}
-
-	public void setVideo(boolean video) {
-		this.video = video;
-	}
-
-	public VideoCodec getVideoCodec() {
-		return videoCodec;
-	}
-
-	public void setVideoCodec(VideoCodec videoCodec) {
-		this.videoCodec = videoCodec;
-	}
-
-	public int getVideoWidth() {
-		return videoWidth;
-	}
-
-	public void setVideoWidth(int videoWidth) {
-		this.videoWidth = videoWidth;
-	}
-
-	public int getVideoHeight() {
-		return videoHeight;
-	}
-
-	public void setVideoHeight(int videoHeight) {
-		this.videoHeight = videoHeight;
-	}
-
-	public int getVideoFps() {
-		return videoFps;
-	}
-
-	public void setVideoFps(int videoFps) {
-		this.videoFps = videoFps;
-	}
-
-	public int getVideoKiloBitsPerSecond() {
-		return videoKiloBitsPerSecond;
-	}
-
-	public void setVideoKiloBitsPerSecond(int videoKiloBitsPerSecond) {
-		this.videoKiloBitsPerSecond = videoKiloBitsPerSecond;
-	}
-
-	public boolean isScreen() {
-		return screen;
-	}
-
-	public void setScreen(boolean screen) {
-		this.screen = screen;
-	}
-}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/media/webrtc/WebRtcPublishingSettings.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/media/webrtc/WebRtcPublishingSettings.java
deleted file mode 100644
index 532cb729e..000000000
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/media/webrtc/WebRtcPublishingSettings.java
+++ /dev/null
@@ -1,58 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.ux.component.media.webrtc;
-
-import org.teamapps.dto.UiWebRtcPublishingSettings;
-
-public class WebRtcPublishingSettings {
-
-	private final String signalingUrl;
-	private final String wowzaApplicationName;
-	private final String streamName;
-	private final WebRtcPublishingMediaSettings inputSettings;
-
-	public WebRtcPublishingSettings(String signalingUrl, String wowzaApplicationName, String streamName, WebRtcPublishingMediaSettings inputSettings) {
-		this.signalingUrl = signalingUrl;
-		this.wowzaApplicationName = wowzaApplicationName;
-		this.streamName = streamName;
-		this.inputSettings = inputSettings;
-	}
-
-	public UiWebRtcPublishingSettings createUWebRtcPublishingSettings() {
-		return new UiWebRtcPublishingSettings(signalingUrl, wowzaApplicationName, streamName, inputSettings.createUiWebRtcPublishingMediaSettings());
-	}
-
-	public String getSignalingUrl() {
-		return signalingUrl;
-	}
-
-	public String getWowzaApplicationName() {
-		return wowzaApplicationName;
-	}
-
-	public String getStreamName() {
-		return streamName;
-	}
-
-	public WebRtcPublishingMediaSettings getInputSettings() {
-		return inputSettings;
-	}
-	
-}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/mobile/MobileLayout.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/mobile/MobileLayout.java
index 2a0bdea16..546b3e70b 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/mobile/MobileLayout.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/mobile/MobileLayout.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -20,81 +20,55 @@
 package org.teamapps.ux.component.mobile;
 
 import org.teamapps.dto.UiComponent;
-import org.teamapps.dto.UiComponentReference;
 import org.teamapps.dto.UiEvent;
 import org.teamapps.dto.UiMobileLayout;
 import org.teamapps.ux.component.AbstractComponent;
 import org.teamapps.ux.component.Component;
-import org.teamapps.ux.component.Container;
+import org.teamapps.ux.component.animation.PageTransition;
 import org.teamapps.ux.component.toolbar.Toolbar;
 
-import java.util.HashSet;
-import java.util.List;
-import java.util.Set;
-import java.util.stream.Collectors;
-
-public class MobileLayout extends AbstractComponent implements Container {
+public class MobileLayout extends AbstractComponent implements Component {
 
 	protected Toolbar toolbar;
-	protected final Set<Component> views = new HashSet<>();
-	protected Component activeComponent;
+	protected Component content;
 	protected NavigationBar navigationBar;
 
-
 	public MobileLayout() {
 		super();
 	}
 
 	@Override
 	public UiComponent createUiComponent() {
-		UiMobileLayout uiMobileLayout = new UiMobileLayout(getId());
+		UiMobileLayout uiMobileLayout = new UiMobileLayout();
 		mapAbstractUiComponentProperties(uiMobileLayout);
-		if (activeComponent != null) {
-			uiMobileLayout.setInitialViewId(activeComponent.getId());
+		if (content != null) {
+			uiMobileLayout.setInitialView(content.createUiReference());
 		}
 		if (toolbar != null) {
-			uiMobileLayout.setToolbar(toolbar.createUiComponentReference());
+			uiMobileLayout.setToolbar(toolbar.createUiReference());
 		}
-		List<UiComponentReference> uiComponents = views.stream()
-				.map(component -> component.createUiComponentReference())
-				.collect(Collectors.toList());
-		uiMobileLayout.setViews(uiComponents);
-		uiMobileLayout.setNavigationBar(navigationBar != null ? navigationBar.createUiComponentReference() : null);
+		uiMobileLayout.setNavigationBar(navigationBar != null ? navigationBar.createUiReference() : null);
 		return uiMobileLayout;
 	}
 
-	@Override
-	protected void doDestroy() {
-
-	}
-
 	@Override
 	public void handleUiEvent(UiEvent event) {
 	}
 
-	/**
-	 * May be used for client-side performance reasons.
-	 */
-	// TODO #componentRef still needed after component reference implementation??
 	public void preloadView(Component component) {
-		views.add(component);
-		component.setParent(this);
-		queueCommandIfRendered(() -> new UiMobileLayout.AddViewCommand(getId(), component.createUiComponentReference()));
+		component.render();
 	}
 
-	// TODO rename to setActiveComponent()
-	public void showView(Component component, MobileLayoutAnimation animation) {
-		activeComponent = component;
-		if (!views.contains(activeComponent)) {
-			preloadView(component);
-		}
-		queueCommandIfRendered(() -> new UiMobileLayout.ShowViewCommand(getId(), component.getId(), animation.toUiMobileLayoutAnimation()));
+	public void setContent(Component component) {
+		setContent(component, null, 0);
 	}
 
-	public void removeView(Component component) {
-		if (views.contains(component)) {
-			views.remove(component);
-			queueCommandIfRendered(() -> new UiMobileLayout.RemoveViewCommand(getId(), component.getId()));
+	public void setContent(Component component, PageTransition animation, int animationDuration) {
+		if (this.content != component) {
+			content = component;
+			component.setParent(this);
+			queueCommandIfRendered(() -> new UiMobileLayout.ShowViewCommand(getId(), component.createUiReference(), animation != null ? animation.toUiPageTransition() : null,
+					animationDuration));
 		}
 	}
 
@@ -106,8 +80,8 @@ public void setToolbar(Toolbar toolbar) {
 		this.toolbar = toolbar;
 	}
 
-	public Component getActiveComponent() {
-		return activeComponent;
+	public Component getContent() {
+		return content;
 	}
 
 	public NavigationBar getNavigationBar() {
@@ -119,11 +93,7 @@ public void setNavigationBar(NavigationBar navigationBar) {
 		if (navigationBar != null) {
 			navigationBar.setParent(this);
 		}
-		queueCommandIfRendered(() -> new UiMobileLayout.SetNavigationBarCommand(getId(), navigationBar != null ? navigationBar.createUiComponentReference() : null));
+		queueCommandIfRendered(() -> new UiMobileLayout.SetNavigationBarCommand(getId(), navigationBar != null ? navigationBar.createUiReference() : null));
 	}
 
-	@Override
-	public boolean isChildVisible(Component child) {
-		return this.isEffectivelyVisible() && (child == navigationBar || child == activeComponent || child == toolbar);
-	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/mobile/NavigationBar.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/mobile/NavigationBar.java
index cb16fa14f..925776082 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/mobile/NavigationBar.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/mobile/NavigationBar.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,17 +19,17 @@
  */
 package org.teamapps.ux.component.mobile;
 
-import org.jetbrains.annotations.NotNull;
+import org.teamapps.common.format.Color;
+import org.teamapps.dto.UiClientObjectReference;
 import org.teamapps.dto.UiComponent;
-import org.teamapps.dto.UiComponentReference;
 import org.teamapps.dto.UiEvent;
 import org.teamapps.dto.UiNavigationBar;
 import org.teamapps.dto.UiNavigationBarButton;
 import org.teamapps.event.Event;
 import org.teamapps.ux.component.AbstractComponent;
 import org.teamapps.ux.component.Component;
-import org.teamapps.ux.component.Container;
-import org.teamapps.common.format.Color;
+import org.teamapps.ux.component.progress.DefaultMultiProgressDisplay;
+import org.teamapps.ux.component.progress.MultiProgressDisplay;
 import org.teamapps.ux.component.template.BaseTemplate;
 import org.teamapps.ux.component.template.Template;
 
@@ -37,19 +37,18 @@
 import java.util.List;
 import java.util.stream.Collectors;
 
-import static org.teamapps.util.UiUtil.createUiColor;
-
-public class NavigationBar<RECORD> extends AbstractComponent implements Container {
+public class NavigationBar<RECORD> extends AbstractComponent implements Component {
 
 	public Event<NavigationBarButton> onButtonClick = new Event<>();
 
 	private Template buttonTemplate = BaseTemplate.NAVIGATION_BAR_ICON_ONLY;
 	private List<NavigationBarButton<RECORD>> buttons = new ArrayList<>();
-	private Color backgroundColor = new Color(255, 255, 255, 0.84f);
+	private Color backgroundColor;
 	private Color borderColor;
-	private List<Component> fanOutComponents = new ArrayList<>();
+	private final List<Component> fanOutComponents = new ArrayList<>();
 	private Component activeFanOutComponent;
 	private int buttonClientIdCounter = 0;
+	private MultiProgressDisplay multiProgressDisplay = new DefaultMultiProgressDisplay();
 
 	public NavigationBar() {
 		super();
@@ -57,35 +56,30 @@ public NavigationBar() {
 
 	@Override
 	public UiComponent createUiComponent() {
-		UiNavigationBar uiNavigationBar = new UiNavigationBar(getId(), buttonTemplate.createUiTemplate());
+		UiNavigationBar uiNavigationBar = new UiNavigationBar(buttonTemplate.createUiTemplate());
 		mapAbstractUiComponentProperties(uiNavigationBar);
-		uiNavigationBar.setBackgroundColor(backgroundColor != null ? createUiColor(backgroundColor) : null);
-		uiNavigationBar.setBorderColor(borderColor != null ? createUiColor(borderColor) : null);
+		uiNavigationBar.setBackgroundColor(backgroundColor != null ? backgroundColor.toHtmlColorString() : null);
+		uiNavigationBar.setBorderColor(borderColor != null ? borderColor.toHtmlColorString() : null);
 		if (buttons != null) {
 			List<UiNavigationBarButton> uiNavigationBarButtons = createUiButtons();
 			uiNavigationBar.setButtons(uiNavigationBarButtons);
 		}
 		if (fanOutComponents != null) {
-			List<UiComponentReference> uiComponents = fanOutComponents.stream()
-					.map(component -> component.createUiComponentReference())
+			List<UiClientObjectReference> uiComponents = fanOutComponents.stream()
+					.map(component -> component.createUiReference())
 					.collect(Collectors.toList());
 			uiNavigationBar.setFanOutComponents(uiComponents);
 		}
+		uiNavigationBar.setMultiProgressDisplay(multiProgressDisplay.createUiReference());
 		return uiNavigationBar;
 	}
 
-	@NotNull
 	private List<UiNavigationBarButton> createUiButtons() {
 		return buttons.stream()
 				.map(navigationBarButton -> navigationBarButton.createUiNavigationBarButton())
 				.collect(Collectors.toList());
 	}
 
-	@Override
-	protected void doDestroy() {
-
-	}
-
 	@Override
 	public void handleUiEvent(UiEvent event) {
 		switch (event.getUiEventType()) {
@@ -106,9 +100,17 @@ public void handleUiEvent(UiEvent event) {
 	}
 
 	public NavigationBar<RECORD> addButton(NavigationBarButton<RECORD> button) {
+		return addButton(button, false);
+	}
+
+	public NavigationBar<RECORD> addButton(NavigationBarButton<RECORD> button, boolean left) {
 		button.setClientId("" + ++buttonClientIdCounter);
 		button.setContainer(this);
-		buttons.add(button);
+		if (left) {
+			buttons.add(0, button);
+		} else {
+			buttons.add(button);
+		}
 		queueCommandIfRendered(() -> new UiNavigationBar.SetButtonsCommand(getId(), createUiButtons()));
 		return this;
 	}
@@ -128,8 +130,10 @@ public void removeButton(NavigationBarButton<RECORD> button) {
 	// TODO #componentRef still needed after component reference implementation??
 	public void preloadFanOutComponent(Component component) {
 		fanOutComponents.add(component);
-		component.setParent(this);
-		queueCommandIfRendered(() -> new UiNavigationBar.AddFanOutComponentCommand(getId(), component.createUiComponentReference()));
+		if (component != null) {
+			component.setParent(this);
+		}
+		queueCommandIfRendered(() -> new UiNavigationBar.AddFanOutComponentCommand(getId(), component != null ? component.createUiReference() : null));
 	}
 
 	public void showFanOutComponent(Component component) {
@@ -137,7 +141,7 @@ public void showFanOutComponent(Component component) {
 			preloadFanOutComponent(component);
 		}
 		activeFanOutComponent = component;
-		queueCommandIfRendered(() -> new UiNavigationBar.ShowFanOutComponentCommand(getId(), component.createUiComponentReference()));
+		queueCommandIfRendered(() -> new UiNavigationBar.ShowFanOutComponentCommand(getId(), component != null ? component.createUiReference() : null));
 	}
 
 	public void hideFanOutComponent() {
@@ -179,7 +183,7 @@ public Color getBackgroundColor() {
 
 	public void setBackgroundColor(Color backgroundColor) {
 		this.backgroundColor = backgroundColor;
-		queueCommandIfRendered(() -> new UiNavigationBar.SetBackgroundColorCommand(getId(), backgroundColor != null ? createUiColor(backgroundColor) : null));
+		queueCommandIfRendered(() -> new UiNavigationBar.SetBackgroundColorCommand(getId(), backgroundColor != null ? backgroundColor.toHtmlColorString() : null));
 	}
 
 	public Color getBorderColor() {
@@ -188,7 +192,7 @@ public Color getBorderColor() {
 
 	public void setBorderColor(Color borderColor) {
 		this.borderColor = borderColor;
-		queueCommandIfRendered(() -> new UiNavigationBar.SetBorderColorCommand(getId(), borderColor != null ? createUiColor(borderColor) : null));
+		queueCommandIfRendered(() -> new UiNavigationBar.SetBorderColorCommand(getId(), borderColor != null ? borderColor.toHtmlColorString() : null));
 	}
 
 	public List<Component> getFanOutComponents() {
@@ -199,8 +203,12 @@ public Component getActiveFanOutComponent() {
 		return activeFanOutComponent;
 	}
 
-	@Override
-	public boolean isChildVisible(Component child) {
-		return this.isEffectivelyVisible() && this.activeFanOutComponent == child;
+	public void setMultiProgressDisplay(MultiProgressDisplay multiProgressDisplay) {
+		this.multiProgressDisplay = multiProgressDisplay;
+		queueCommandIfRendered(() -> new UiNavigationBar.SetMultiProgressDisplayCommand(getId(), multiProgressDisplay.createUiReference()));
+	}
+
+	public MultiProgressDisplay getMultiProgressDisplay() {
+		return multiProgressDisplay;
 	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/mobile/NavigationBarButton.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/mobile/NavigationBarButton.java
index 5f2494a95..414db6589 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/mobile/NavigationBarButton.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/mobile/NavigationBarButton.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -21,7 +21,7 @@
 
 import org.teamapps.dto.UiNavigationBarButton;
 import org.teamapps.event.Event;
-import org.teamapps.icons.api.Icon;
+import org.teamapps.icons.Icon;
 import org.teamapps.ux.component.template.BaseTemplateRecord;
 
 public class NavigationBarButton<RECORD> {
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/node/TreeNode.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/node/TreeNode.java
index 42e92370e..3d0af40c1 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/node/TreeNode.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/node/TreeNode.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,7 +19,6 @@
  */
 package org.teamapps.ux.component.node;
 
-import org.jetbrains.annotations.NotNull;
 import org.teamapps.ux.component.tree.TreeNodeInfo;
 
 import java.util.ArrayList;
@@ -68,7 +67,6 @@ default boolean isDescendantOf(Collection<? extends TreeNode> potentialAncestors
 		return false;
 	}
 
-	@NotNull
 	static List<TreeNode> getPathToNode(TreeNode node) {
 		List<TreeNode> path = new ArrayList<>();
 		TreeNode selfOrAncestor = node;
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/notification/Notification.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/notification/Notification.java
index c32b0ce95..a28e4a7bd 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/notification/Notification.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/notification/Notification.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,105 +19,104 @@
  */
 package org.teamapps.ux.component.notification;
 
-import org.teamapps.data.extract.BeanPropertyExtractor;
-import org.teamapps.data.extract.PropertyExtractor;
-import org.teamapps.dto.UiEntranceAnimation;
-import org.teamapps.dto.UiExitAnimation;
-import org.teamapps.dto.UiNotification;
-import org.teamapps.icons.api.Icon;
 import org.teamapps.common.format.Color;
+import org.teamapps.dto.UiEvent;
+import org.teamapps.dto.UiNotification;
+import org.teamapps.event.Event;
+import org.teamapps.icons.Icon;
+import org.teamapps.ux.component.AbstractComponent;
+import org.teamapps.ux.component.Component;
+import org.teamapps.ux.component.field.TemplateField;
+import org.teamapps.ux.component.format.Spacing;
 import org.teamapps.ux.component.template.BaseTemplate;
 import org.teamapps.ux.component.template.BaseTemplateRecord;
-import org.teamapps.ux.component.template.Template;
 
-import static org.teamapps.util.UiUtil.createUiColor;
+public class Notification extends AbstractComponent {
+	public final Event<Void> onOpened = new Event<>();
+	public final Event<Boolean> onClosed = new Event<>();
 
-public class Notification<RECORD> {
+	private boolean showing;
 
-	private Template template;
-	private RECORD record;
-	private PropertyExtractor<RECORD> propertyExtractor = new BeanPropertyExtractor<>();
-	private NotificationPosition position = NotificationPosition.TOP_RIGHT;
-	private Color backgroundColor = Color.WHITE;
+	private Color backgroundColor = null;
+	private Spacing padding = null;
 	private int displayTimeInMillis = 3000;
-	private boolean dismissable = true;
+	private boolean dismissible = true;
 	private boolean showProgressBar = true;
-	private UiEntranceAnimation entranceAnimation = UiEntranceAnimation.FADE_IN;
-	private UiExitAnimation exitAnimation = UiExitAnimation.FADE_OUT;
 
-	/**
-	 * Used to display a simple message (text only).
-	 * @param message Normally a String, but may be any object (using toString()).
-	 */
-	public Notification(RECORD message) {
-		this.template = null;
-		this.record = message;
-	}
-
-	public Notification(Template template, RECORD record) {
-		this.template = template;
-		this.record = record;
-	}
+	private Component content;
 
-	public static Notification createWithIconAndCaption(Icon icon, String text) {
-		return new Notification<>(BaseTemplate.NOTIFICATION_ICON_CAPTION, new BaseTemplateRecord(icon, text));
+	public Notification() {
 	}
 
-	public static Notification createWithIconAndTextAndDescription(Icon icon, String text, String description) {
-		return new Notification<>(BaseTemplate.NOTIFICATION_ICON_CAPTION_DESCRIPTION, new BaseTemplateRecord(icon, text, description));
+	public Notification(Component content) {
+		this.content = content;
 	}
 
-	public UiNotification createUiNotification() {
-		Object values;
-		if (template != null) {
-			values = propertyExtractor.getValues(record, template.getDataKeys());
-		} else {
-			values = "" + record;
-		}
-		UiNotification uiNotification = new UiNotification(this.template != null ? this.template.createUiTemplate() : null, values);
-		uiNotification.setPosition(position.toUiNotificationPosition());
-		uiNotification.setBackgroundColor(createUiColor(backgroundColor));
-		uiNotification.setDisplayTimeInMillis(displayTimeInMillis);
-		uiNotification.setDismissable(dismissable);
-		uiNotification.setShowProgressBar(showProgressBar);
-		uiNotification.setEntranceAnimation(entranceAnimation);
-		uiNotification.setExitAnimation(exitAnimation);
-		return uiNotification;
+	public static Notification createWithIconAndCaption(Icon<?, ?> icon, String text) {
+		TemplateField<BaseTemplateRecord<Void>> templateField = new TemplateField<>(BaseTemplate.NOTIFICATION_ICON_CAPTION);
+		templateField.setValue(new BaseTemplateRecord<>(icon, text));
+		Notification notification = new Notification();
+		notification.setContent(templateField);
+		return notification;
 	}
 
-	public NotificationPosition getPosition() {
-		return position;
+	public static Notification createWithIconAndTextAndDescription(Icon<?, ?> icon, String text, String description) {
+		TemplateField<BaseTemplateRecord<Void>> templateField = new TemplateField<>(BaseTemplate.NOTIFICATION_ICON_CAPTION_DESCRIPTION);
+		templateField.setValue(new BaseTemplateRecord<>(icon, text, description));
+		Notification notification = new Notification();
+		notification.setContent(templateField);
+		return notification;
 	}
 
-	public Notification setPosition(NotificationPosition position) {
-		this.position = position;
-		return this;
+	public UiNotification createUiComponent() {
+		UiNotification ui = new UiNotification();
+		mapAbstractUiComponentProperties(ui);
+		ui.setBackgroundColor(backgroundColor != null ? backgroundColor.toHtmlColorString() : null);
+		ui.setPadding(padding != null ? padding.createUiSpacing() : null);
+		ui.setDisplayTimeInMillis(displayTimeInMillis);
+		ui.setDismissible(dismissible);
+		ui.setProgressBarVisible(showProgressBar);
+		ui.setContent(content != null ? content.createUiReference() : null);
+		return ui;
 	}
 
-	public Template getTemplate() {
-		return template;
+	@Override
+	public void handleUiEvent(UiEvent event) {
+		switch (event.getUiEventType()) {
+			case UI_NOTIFICATION_OPENED: {
+				this.showing = true;
+				onOpened.fire(null);
+				break;
+			}
+			case UI_NOTIFICATION_CLOSED: {
+				this.showing = false;
+				onClosed.fire(((UiNotification.ClosedEvent) event).getByUser());
+				break;
+			}
+		}
 	}
 
-	public Notification setTemplate(Template template) {
-		this.template = template;
-		return this;
+	public void close() {
+		queueCommandIfRendered(() -> new UiNotification.CloseCommand(getId()));
 	}
 
-	public RECORD getRecord() {
-		return record;
+	public Color getBackgroundColor() {
+		return backgroundColor;
 	}
 
-	public Notification setRecord(RECORD record) {
-		this.record = record;
+	public Notification setBackgroundColor(Color backgroundColor) {
+		this.backgroundColor = backgroundColor;
+		queueCommandIfRendered(() -> new UiNotification.UpdateCommand(getId(), createUiComponent()));
 		return this;
 	}
 
-	public Color getBackgroundColor() {
-		return backgroundColor;
+	public Spacing getPadding() {
+		return padding;
 	}
 
-	public Notification setBackgroundColor(Color backgroundColor) {
-		this.backgroundColor = backgroundColor;
+	public Notification setPadding(Spacing padding) {
+		this.padding = padding;
+		queueCommandIfRendered(() -> new UiNotification.UpdateCommand(getId(), createUiComponent()));
 		return this;
 	}
 
@@ -127,15 +126,17 @@ public int getDisplayTimeInMillis() {
 
 	public Notification setDisplayTimeInMillis(int displayTimeInMillis) {
 		this.displayTimeInMillis = displayTimeInMillis;
+		queueCommandIfRendered(() -> new UiNotification.UpdateCommand(getId(), createUiComponent()));
 		return this;
 	}
 
-	public boolean isDismissable() {
-		return dismissable;
+	public boolean isDismissible() {
+		return dismissible;
 	}
 
-	public Notification setDismissable(boolean dismissable) {
-		this.dismissable = dismissable;
+	public Notification setDismissible(boolean dismissible) {
+		this.dismissible = dismissible;
+		queueCommandIfRendered(() -> new UiNotification.UpdateCommand(getId(), createUiComponent()));
 		return this;
 	}
 
@@ -145,24 +146,21 @@ public boolean isShowProgressBar() {
 
 	public Notification setShowProgressBar(boolean showProgressBar) {
 		this.showProgressBar = showProgressBar;
+		queueCommandIfRendered(() -> new UiNotification.UpdateCommand(getId(), createUiComponent()));
 		return this;
 	}
 
-	public UiEntranceAnimation getEntranceAnimation() {
-		return entranceAnimation;
+	public Component getContent() {
+		return content;
 	}
 
-	public Notification setEntranceAnimation(UiEntranceAnimation entranceAnimation) {
-		this.entranceAnimation = entranceAnimation;
+	public Notification setContent(Component content) {
+		this.content = content;
+		queueCommandIfRendered(() -> new UiNotification.UpdateCommand(getId(), createUiComponent()));
 		return this;
 	}
 
-	public UiExitAnimation getExitAnimation() {
-		return exitAnimation;
-	}
-
-	public Notification setExitAnimation(UiExitAnimation exitAnimation) {
-		this.exitAnimation = exitAnimation;
-		return this;
+	public boolean isShowing() {
+		return showing;
 	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/notification/NotificationBar.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/notification/NotificationBar.java
new file mode 100644
index 000000000..98a49f34a
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/notification/NotificationBar.java
@@ -0,0 +1,111 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.notification;
+
+import org.teamapps.dto.UiComponent;
+import org.teamapps.dto.UiEvent;
+import org.teamapps.dto.UiNotificationBar;
+import org.teamapps.event.Event;
+import org.teamapps.ux.component.AbstractComponent;
+
+import java.util.LinkedHashMap;
+import java.util.List;
+import java.util.Map;
+import java.util.stream.Collectors;
+
+import static org.teamapps.ux.component.notification.NotificationBarItemClosedEvent.ClosingReason.TIMEOUT;
+import static org.teamapps.ux.component.notification.NotificationBarItemClosedEvent.ClosingReason.USER;
+
+public class NotificationBar extends AbstractComponent {
+
+	public final Event<NotificationBarItemClosedEvent> onItemClosed = new Event<>();
+	public final Event<NotificationBarItem> onItemClicked = new Event<>();
+	public final Event<NotificationBarItem> onItemActionLinkClicked = new Event<>();
+
+	private final Map<String, NotificationBarItem> itemsByUiId = new LinkedHashMap<>();
+
+	public NotificationBar() {
+	}
+
+	@Override
+	public void handleUiEvent(UiEvent event) {
+		switch (event.getUiEventType()) {
+			case UI_NOTIFICATION_BAR_ITEM_CLICKED: {
+				UiNotificationBar.ItemClickedEvent e = (UiNotificationBar.ItemClickedEvent) event;
+				NotificationBarItem item = itemsByUiId.get(e.getId());
+				if (item != null) {
+					item.onClicked.fire();
+					onItemClicked.fire(item);
+				}
+				break;
+			}
+			case UI_NOTIFICATION_BAR_ITEM_ACTION_LINK_CLICKED: {
+				UiNotificationBar.ItemActionLinkClickedEvent e = (UiNotificationBar.ItemActionLinkClickedEvent) event;
+				NotificationBarItem item = itemsByUiId.get(e.getId());
+				if (item != null) {
+					item.onActionLinkClicked.fire();
+					onItemActionLinkClicked.fire(item);
+				}
+				break;
+			}
+			case UI_NOTIFICATION_BAR_ITEM_CLOSED: {
+				UiNotificationBar.ItemClosedEvent e = (UiNotificationBar.ItemClosedEvent) event;
+				NotificationBarItem item = itemsByUiId.get(e.getId());
+				if (item != null) {
+					NotificationBarItemClosedEvent.ClosingReason reason = e.getWasTimeout() ? TIMEOUT : USER;
+					item.onClosed.fire(reason);
+					onItemClosed.fire(new NotificationBarItemClosedEvent(item, reason));
+				}
+				break;
+			}
+		}
+	}
+
+	@Override
+	public UiComponent createUiComponent() {
+		UiNotificationBar ui = new UiNotificationBar();
+		mapAbstractUiComponentProperties(ui);
+		ui.setInitialItems(itemsByUiId.values().stream()
+				.map(NotificationBarItem::toUiNotificationBarItem)
+				.collect(Collectors.toList()));
+		return ui;
+	}
+
+	public void addItem(NotificationBarItem item) {
+		if (itemsByUiId.containsValue(item)) {
+			return;
+		}
+		itemsByUiId.put(item.getUiId(), item);
+		item.setListener(() -> queueCommandIfRendered(() -> new UiNotificationBar.UpdateItemCommand(getId(), item.toUiNotificationBarItem())));
+		queueCommandIfRendered(() -> new UiNotificationBar.AddItemCommand(getId(), item.toUiNotificationBarItem()));
+	}
+
+	public void removeItem(NotificationBarItem item) {
+		if (itemsByUiId.remove(item.getUiId()) != null) {
+			item.setListener(null);
+			queueCommandIfRendered(() -> new UiNotificationBar.RemoveItemCommand(getId(), item.getUiId(), null));
+		}
+	}
+
+	public List<NotificationBarItem> getItems() {
+		return List.copyOf(itemsByUiId.values());
+	}
+
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/notification/NotificationBarItem.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/notification/NotificationBarItem.java
new file mode 100644
index 000000000..bcae035ef
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/notification/NotificationBarItem.java
@@ -0,0 +1,276 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.notification;
+
+import org.teamapps.common.format.Color;
+import org.teamapps.dto.UiNotificationBarItem;
+import org.teamapps.event.Event;
+import org.teamapps.icons.Icon;
+import org.teamapps.ux.component.animation.EntranceAnimation;
+import org.teamapps.ux.component.animation.ExitAnimation;
+import org.teamapps.ux.component.animation.RepeatableAnimation;
+import org.teamapps.ux.component.format.Spacing;
+import org.teamapps.ux.session.SessionContext;
+
+import java.util.UUID;
+
+public class NotificationBarItem {
+
+	public final Event<Void> onClicked = new Event<>();
+	public final Event<Void> onActionLinkClicked = new Event<>();
+	public final Event<NotificationBarItemClosedEvent.ClosingReason> onClosed = new Event<>();
+
+	private final String uiId = UUID.randomUUID().toString();
+
+	interface NotificationBarItemChangeListener {
+		void handleChagned();
+	}
+
+	private NotificationBarItemChangeListener listener;
+
+	private Icon<?, ?> icon;
+	private String text;
+	private String actionLinkText;
+	private RepeatableAnimation iconAnimation;
+	private boolean dismissible;
+	private int displayTimeInMillis; // <= 0: display until user closes it actively
+	private boolean progressBarVisible;
+	private Color backgroundColor;
+	private Color borderColor;
+	private Color textColor;
+	private Color actionLinkColor;
+	private Spacing padding;
+	private EntranceAnimation entranceAnimation;
+	private ExitAnimation exitAnimation;
+
+	public NotificationBarItem() {
+	}
+
+	public NotificationBarItem(String text) {
+		this(null, text, true);
+	}
+
+	public NotificationBarItem(Icon<?, ?> icon, String text) {
+		this(icon, text, true);
+	}
+
+	public NotificationBarItem(Icon<?, ?> icon, String text, boolean dismissible) {
+		this(icon, text, dismissible, 0, false);
+	}
+
+	public NotificationBarItem(Icon<?, ?> icon, String text, boolean dismissible, int displayTimeInMillis, boolean progressBarVisible) {
+		this(icon, text, dismissible, displayTimeInMillis, progressBarVisible, null, null, null, null, null);
+	}
+
+	public NotificationBarItem(Icon<?, ?> icon, String text, boolean dismissible, int displayTimeInMillis, boolean progressBarVisible, Color backgroundColor, Color borderColor, Color textColor,
+							   Spacing padding, RepeatableAnimation iconAnimation) {
+		this(icon, text, dismissible, displayTimeInMillis, progressBarVisible, backgroundColor, borderColor, textColor, padding, iconAnimation,
+				EntranceAnimation.FADE_IN_DOWN, ExitAnimation.FADE_OUT_UP);
+	}
+
+	public NotificationBarItem(Icon<?, ?> icon, String text, boolean dismissible, int displayTimeInMillis, boolean progressBarVisible, Color backgroundColor, Color borderColor, Color textColor,
+							   Spacing padding, RepeatableAnimation iconAnimation, EntranceAnimation entranceAnimation, ExitAnimation exitAnimation) {
+		this.icon = icon;
+		this.text = text;
+		this.dismissible = dismissible;
+		this.displayTimeInMillis = displayTimeInMillis;
+		this.progressBarVisible = progressBarVisible;
+		this.backgroundColor = backgroundColor;
+		this.borderColor = borderColor;
+		this.textColor = textColor;
+		this.padding = padding;
+		this.iconAnimation = iconAnimation;
+		this.entranceAnimation = entranceAnimation;
+		this.exitAnimation = exitAnimation;
+	}
+
+	public UiNotificationBarItem toUiNotificationBarItem() {
+		UiNotificationBarItem ui = new UiNotificationBarItem();
+		ui.setId(uiId);
+		ui.setIcon(SessionContext.current().resolveIcon(icon));
+		ui.setIconAnimation(iconAnimation != null ? iconAnimation.toUiRepeatableAnimation() : null);
+		ui.setText(text);
+		ui.setActionLinkText(actionLinkText);
+		ui.setDismissible(dismissible);
+		ui.setDisplayTimeInMillis(displayTimeInMillis);
+		ui.setProgressBarVisible(progressBarVisible);
+		ui.setBackgroundColor(backgroundColor != null ? backgroundColor.toHtmlColorString() : null);
+		ui.setBorderColor(borderColor != null ? borderColor.toHtmlColorString() : null);
+		ui.setTextColor(textColor != null ? textColor.toHtmlColorString() : null);
+		ui.setActionLinkColor(actionLinkColor != null ? actionLinkColor.toHtmlColorString() : null);
+		ui.setPadding(padding != null ? padding.createUiSpacing() : null);
+		return ui;
+	}
+
+	public String getUiId() {
+		return uiId;
+	}
+
+	public void setListener(NotificationBarItemChangeListener listener) {
+		this.listener = listener;
+	}
+
+	private void fireChangeEvent() {
+		if (listener != null) {
+			listener.handleChagned();
+		}
+	}
+
+	public Icon<?, ?> getIcon() {
+		return icon;
+	}
+
+	public NotificationBarItem setIcon(Icon<?, ?> icon) {
+		this.icon = icon;
+		fireChangeEvent();
+		return this;
+	}
+
+	public String getText() {
+		return text;
+	}
+
+	public NotificationBarItem setText(String text) {
+		this.text = text;
+		fireChangeEvent();
+		return this;
+	}
+
+	public String getActionLinkText() {
+		return actionLinkText;
+	}
+
+	public NotificationBarItem setActionLinkText(String actionLinkText) {
+		this.actionLinkText = actionLinkText;
+		fireChangeEvent();
+		return this;
+	}
+
+	public RepeatableAnimation getIconAnimation() {
+		return iconAnimation;
+	}
+
+	public NotificationBarItem setIconAnimation(RepeatableAnimation iconAnimation) {
+		this.iconAnimation = iconAnimation;
+		fireChangeEvent();
+		return this;
+	}
+
+	public boolean isDismissible() {
+		return dismissible;
+	}
+
+	public NotificationBarItem setDismissible(boolean dismissible) {
+		this.dismissible = dismissible;
+		fireChangeEvent();
+		return this;
+	}
+
+	public int getDisplayTimeInMillis() {
+		return displayTimeInMillis;
+	}
+
+	public NotificationBarItem setDisplayTimeInMillis(int displayTimeInMillis) {
+		this.displayTimeInMillis = displayTimeInMillis;
+		fireChangeEvent();
+		return this;
+	}
+
+	public boolean isProgressBarVisible() {
+		return progressBarVisible;
+	}
+
+	public NotificationBarItem setProgressBarVisible(boolean progressBarVisible) {
+		this.progressBarVisible = progressBarVisible;
+		fireChangeEvent();
+		return this;
+	}
+
+	public Color getBackgroundColor() {
+		return backgroundColor;
+	}
+
+	public NotificationBarItem setBackgroundColor(Color backgroundColor) {
+		this.backgroundColor = backgroundColor;
+		fireChangeEvent();
+		return this;
+	}
+
+	public Color getBorderColor() {
+		return borderColor;
+	}
+
+	public NotificationBarItem setBorderColor(Color borderColor) {
+		this.borderColor = borderColor;
+		fireChangeEvent();
+		return this;
+	}
+
+	public Color getTextColor() {
+		return textColor;
+	}
+
+	public NotificationBarItem setTextColor(Color textColor) {
+		this.textColor = textColor;
+		fireChangeEvent();
+		return this;
+	}
+
+	public Color getActionLinkColor() {
+		return actionLinkColor;
+	}
+
+	public NotificationBarItem setActionLinkColor(Color actionLinkColor) {
+		this.actionLinkColor = actionLinkColor;
+		fireChangeEvent();
+		return this;
+	}
+
+	public Spacing getPadding() {
+		return padding;
+	}
+
+	public NotificationBarItem setPadding(Spacing padding) {
+		this.padding = padding;
+		fireChangeEvent();
+		return this;
+	}
+
+	public EntranceAnimation getEntranceAnimation() {
+		return entranceAnimation;
+	}
+
+	public NotificationBarItem setEntranceAnimation(EntranceAnimation entranceAnimation) {
+		this.entranceAnimation = entranceAnimation;
+		fireChangeEvent();
+		return this;
+	}
+
+	public ExitAnimation getExitAnimation() {
+		return exitAnimation;
+	}
+
+	public NotificationBarItem setExitAnimation(ExitAnimation exitAnimation) {
+		this.exitAnimation = exitAnimation;
+		fireChangeEvent();
+		return this;
+	}
+
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/notification/NotificationBarItemClosedEvent.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/notification/NotificationBarItemClosedEvent.java
new file mode 100644
index 000000000..d5088c638
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/notification/NotificationBarItemClosedEvent.java
@@ -0,0 +1,44 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.notification;
+
+public class NotificationBarItemClosedEvent {
+
+	enum ClosingReason {
+		USER,
+		TIMEOUT
+	}
+
+	private final NotificationBarItem item;
+	private final ClosingReason closingReason;
+
+	public NotificationBarItemClosedEvent(NotificationBarItem item, ClosingReason closingReason) {
+		this.item = item;
+		this.closingReason = closingReason;
+	}
+
+	public NotificationBarItem getItem() {
+		return item;
+	}
+
+	public ClosingReason getClosingReason() {
+		return closingReason;
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/notification/NotificationPosition.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/notification/NotificationPosition.java
index 7babda7ce..3805b4357 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/notification/NotificationPosition.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/notification/NotificationPosition.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,12 +19,12 @@
  */
 package org.teamapps.ux.component.notification;
 
-import org.teamapps.dto.UiNotification;
+import org.teamapps.dto.UiNotificationPosition;
 
 public enum NotificationPosition {
 	TOP_LEFT, TOP_CENTER, TOP_RIGHT, BOTTOM_LEFT, BOTTOM_CENTER, BOTTOM_RIGHT;
 
-	public UiNotification.Position toUiNotificationPosition() {
-		return UiNotification.Position.valueOf(this.name());
+	public UiNotificationPosition toUiNotificationPosition() {
+		return UiNotificationPosition.valueOf(this.name());
 	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/pageview/AbstractPageViewBlock.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/pageview/AbstractPageViewBlock.java
index 90d1fd399..b76a20bc9 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/pageview/AbstractPageViewBlock.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/pageview/AbstractPageViewBlock.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -46,7 +46,7 @@ protected void mapAbstractPageViewBlockAttributes(UiPageViewBlock uiBlock) {
 		uiBlock.setId(clientId);
 		uiBlock.setAlignment(alignment.toUiAlignment());
 		uiBlock.setToolButtons(toolButtons.stream()
-				.map(button -> button.createUiComponentReference())
+				.map(button -> button.createUiReference())
 				.collect(Collectors.toList()));
 	}
 
@@ -71,4 +71,12 @@ public AbstractPageViewBlock setToolButtons(List<ToolButton> toolButtons) {
 		this.toolButtons = toolButtons;
 		return this;
 	}
+
+	public void addToolButton(ToolButton toolButton) {
+		this.toolButtons.add(toolButton);
+	}
+
+	public void removeToolButton(ToolButton toolButton) {
+		this.toolButtons.remove(toolButton);
+	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/pageview/CitationPageViewBlock.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/pageview/CitationPageViewBlock.java
index 265d4a2ae..a4dfebd0c 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/pageview/CitationPageViewBlock.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/pageview/CitationPageViewBlock.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/pageview/ComponentPageViewBlock.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/pageview/ComponentPageViewBlock.java
index 0982d9c64..7785df6f9 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/pageview/ComponentPageViewBlock.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/pageview/ComponentPageViewBlock.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -35,7 +35,7 @@ public ComponentPageViewBlock(Component component, int height) {
 	public UiComponentPageViewBlock createUiBlock() {
 		UiComponentPageViewBlock uiBlock = new UiComponentPageViewBlock();
 		mapAbstractPageViewBlockAttributes(uiBlock);
-		uiBlock.setComponent(component != null ? component.createUiComponentReference() : null);
+		uiBlock.setComponent(component != null ? component.createUiReference() : null);
 		uiBlock.setHeight(height);
 		uiBlock.setTitle(title);
 		return uiBlock;
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/pageview/CreatorImageAlignment.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/pageview/CreatorImageAlignment.java
index f02e5545c..0242af4c9 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/pageview/CreatorImageAlignment.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/pageview/CreatorImageAlignment.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/pageview/MessagePageViewBlock.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/pageview/MessagePageViewBlock.java
index ba3b42c45..a2a170b43 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/pageview/MessagePageViewBlock.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/pageview/MessagePageViewBlock.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,71 +19,100 @@
  */
 package org.teamapps.ux.component.pageview;
 
+import org.teamapps.data.extract.BeanPropertyExtractor;
+import org.teamapps.data.extract.PropertyExtractor;
+import org.teamapps.data.extract.PropertyProvider;
+import org.teamapps.dto.UiClientRecord;
 import org.teamapps.dto.UiMessagePageViewBlock;
+import org.teamapps.ux.component.format.HorizontalElementAlignment;
+import org.teamapps.ux.component.template.BaseTemplate;
+import org.teamapps.ux.component.template.Template;
 
 import java.util.List;
 
-public class MessagePageViewBlock extends AbstractPageViewBlock {
+public class MessagePageViewBlock<RECORD> extends AbstractPageViewBlock {
 
-	private String creatorImageUrl;
-	private CreatorImageAlignment creatorImageAlignment = CreatorImageAlignment.LEFT;
-	private String headLine;
-	private String richText;
+	private Template topTemplate = BaseTemplate.LIST_ITEM_LARGE_ICON_TWO_LINES;
+	private RECORD topRecord;
+	private PropertyProvider<RECORD> topRecordPropertyProvider = new BeanPropertyExtractor<>();
+	private HorizontalElementAlignment topRecordAlignment = HorizontalElementAlignment.LEFT;
+	private String html;
 	private List<String> imageUrls;
 
+	public MessagePageViewBlock() {
+	}
+
+	public MessagePageViewBlock(Template topTemplate, RECORD topRecord) {
+		this.topTemplate = topTemplate;
+		this.topRecord = topRecord;
+	}
+
+	public MessagePageViewBlock(PageViewBlockAlignment alignment, Template topTemplate, RECORD topRecord) {
+		super(alignment);
+		this.topTemplate = topTemplate;
+		this.topRecord = topRecord;
+	}
+
 	public UiMessagePageViewBlock createUiBlock() {
 		UiMessagePageViewBlock uiBlock = new UiMessagePageViewBlock();
 		mapAbstractPageViewBlockAttributes(uiBlock);
-		uiBlock.setCreatorImageUrl(creatorImageUrl);
-		uiBlock.setCreatorImageAlignment(creatorImageAlignment.toUiImageAligment());
-		uiBlock.setHeadLine(headLine);
-		uiBlock.setText(richText);
+		uiBlock.setTopTemplate(topTemplate.createUiTemplate());
+		uiBlock.setTopRecord(topRecord != null ? new UiClientRecord().setValues(topRecordPropertyProvider.getValues(topRecord, topTemplate.getPropertyNames())) : null);
+		uiBlock.setTopRecordAlignment(topRecordAlignment.toUiHorizontalElementAlignment());
+		uiBlock.setHtml(html);
 		uiBlock.setImageUrls(imageUrls);
 		return uiBlock;
 	}
 
-	public String getCreatorImageUrl() {
-		return creatorImageUrl;
+	public Template getTopTemplate() {
+		return topTemplate;
+	}
+
+	public void setTopTemplate(Template topTemplate) {
+		this.topTemplate = topTemplate;
+	}
+
+	public RECORD getTopRecord() {
+		return topRecord;
+	}
+
+	public void setTopRecord(RECORD topRecord) {
+		this.topRecord = topRecord;
 	}
 
-	public MessagePageViewBlock setCreatorImageUrl(String creatorImageUrl) {
-		this.creatorImageUrl = creatorImageUrl;
-		return this;
+	public PropertyProvider<RECORD> getTopRecordPropertyProvider() {
+		return topRecordPropertyProvider;
 	}
 
-	public CreatorImageAlignment getCreatorImageAlignment() {
-		return creatorImageAlignment;
+	public void setTopRecordPropertyProvider(PropertyProvider<RECORD> propertyProvider) {
+		this.topRecordPropertyProvider = propertyProvider;
 	}
 
-	public MessagePageViewBlock setCreatorImageAlignment(CreatorImageAlignment creatorImageAlignment) {
-		this.creatorImageAlignment = creatorImageAlignment;
-		return this;
+	public void setTopRecordPropertyExtractor(PropertyExtractor<RECORD> propertyExtractor) {
+		this.setTopRecordPropertyProvider(propertyExtractor);
 	}
 
-	public String getHeadLine() {
-		return headLine;
+	public HorizontalElementAlignment getTopRecordAlignment() {
+		return topRecordAlignment;
 	}
 
-	public MessagePageViewBlock setHeadLine(String headLine) {
-		this.headLine = headLine;
-		return this;
+	public void setTopRecordAlignment(HorizontalElementAlignment topRecordAlignment) {
+		this.topRecordAlignment = topRecordAlignment;
 	}
 
-	public String getRichText() {
-		return richText;
+	public String getHtml() {
+		return html;
 	}
 
-	public MessagePageViewBlock setRichText(String richText) {
-		this.richText = richText;
-		return this;
+	public void setHtml(String html) {
+		this.html = html;
 	}
 
 	public List<String> getImageUrls() {
 		return imageUrls;
 	}
 
-	public MessagePageViewBlock setImageUrls(List<String> imageUrls) {
+	public void setImageUrls(List<String> imageUrls) {
 		this.imageUrls = imageUrls;
-		return this;
 	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/pageview/PageView.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/pageview/PageView.java
index 9683b4b46..02db2ce78 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/pageview/PageView.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/pageview/PageView.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -31,14 +31,9 @@ public class PageView extends AbstractComponent {
 
 	private List<AbstractPageViewBlock> blocks = new ArrayList<>();
 
-	@Override
-	protected void doDestroy() {
-		// nothing to do...
-	}
-
 	@Override
 	public UiPageView createUiComponent() {
-		UiPageView uiPageView = new UiPageView(getId());
+		UiPageView uiPageView = new UiPageView();
 		mapAbstractUiComponentProperties(uiPageView);
 		uiPageView.setBlocks(blocks.stream()
 				.map(block -> block.createUiBlock())
@@ -52,7 +47,7 @@ public void addBlock(AbstractPageViewBlock block) {
 	}
 
 	public void removeBlock(AbstractPageViewBlock block) {
-		blocks.add(block);
+		blocks.remove(block);
 		queueCommandIfRendered(() -> new UiPageView.RemoveBlockCommand(getId(), block.getClientId()));
 	}
 
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/pageview/PageViewBlockAlignment.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/pageview/PageViewBlockAlignment.java
index ba80a5443..44eee89a7 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/pageview/PageViewBlockAlignment.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/pageview/PageViewBlockAlignment.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/panel/ElegantPanel.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/panel/ElegantPanel.java
index 5e4b67da3..dbf9af0f1 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/panel/ElegantPanel.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/panel/ElegantPanel.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,17 +19,18 @@
  */
 package org.teamapps.ux.component.panel;
 
+import org.teamapps.common.format.RgbaColor;
+import org.teamapps.common.format.Color;
 import org.teamapps.dto.UiComponent;
 import org.teamapps.dto.UiElegantPanel;
 import org.teamapps.dto.UiEvent;
 import org.teamapps.ux.component.AbstractComponent;
-import org.teamapps.common.format.Color;
 import org.teamapps.ux.component.format.HorizontalElementAlignment;
 import org.teamapps.ux.component.format.Spacing;
 
 public class ElegantPanel extends AbstractComponent {
 
-	private Color bodyBackgroundColor = Color.WHITE.withAlpha(.4f);
+	private Color bodyBackgroundColor = RgbaColor.WHITE.withAlpha(.4f);
 	private AbstractComponent content;
 	private HorizontalElementAlignment horizontalContentAlignment = HorizontalElementAlignment.CENTER;
 	private Spacing padding = new Spacing(20, 10, 20, 10);
@@ -45,23 +46,16 @@ public ElegantPanel(AbstractComponent content) {
 
 	@Override
 	public UiComponent createUiComponent() {
-		UiElegantPanel uiElegantPanel = new UiElegantPanel(getId());
+		UiElegantPanel uiElegantPanel = new UiElegantPanel();
 		mapAbstractUiComponentProperties(uiElegantPanel);
-		uiElegantPanel.setBodyBackgroundColor(bodyBackgroundColor.toHtmlColorString());
-		uiElegantPanel.setContent(content.createUiComponentReference());
+		uiElegantPanel.setBodyBackgroundColor(bodyBackgroundColor != null ? bodyBackgroundColor.toHtmlColorString() : null);
+		uiElegantPanel.setContent(content.createUiReference());
 		uiElegantPanel.setMaxContentWidth(maxContentWidth);
 		uiElegantPanel.setPadding(padding.createUiSpacing());
 		uiElegantPanel.setHorizontalContentAlignment(horizontalContentAlignment.toUiHorizontalElementAlignment());
 		return uiElegantPanel;
 	}
 
-	@Override
-	protected void doDestroy() {
-		if (this.content != null) {
-			this.content.destroy();
-		}
-	}
-
 	@Override
 	public void handleUiEvent(UiEvent event) {
 
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/panel/HeaderComponentMinimizationPolicy.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/panel/HeaderComponentMinimizationPolicy.java
index 6edad5789..1a201f53f 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/panel/HeaderComponentMinimizationPolicy.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/panel/HeaderComponentMinimizationPolicy.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/panel/HeaderField.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/panel/HeaderField.java
index d7ed7617d..442977f55 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/panel/HeaderField.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/panel/HeaderField.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,7 +19,7 @@
  */
 package org.teamapps.ux.component.panel;
 
-import org.teamapps.icons.api.Icon;
+import org.teamapps.icons.Icon;
 import org.teamapps.ux.component.field.AbstractField;
 
 public class HeaderField {
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/panel/Panel.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/panel/Panel.java
index bc2955f8d..ab5ca373a 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/panel/Panel.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/panel/Panel.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,17 +19,17 @@
  */
 package org.teamapps.ux.component.panel;
 
+import org.teamapps.common.format.Color;
+import org.teamapps.databinding.ObservableValue;
 import org.teamapps.dto.UiComponent;
 import org.teamapps.dto.UiEvent;
 import org.teamapps.dto.UiPanel;
 import org.teamapps.dto.UiPanelHeaderField;
 import org.teamapps.event.Event;
-import org.teamapps.icons.api.Icon;
+import org.teamapps.icons.Icon;
 import org.teamapps.ux.component.AbstractComponent;
 import org.teamapps.ux.component.Component;
-import org.teamapps.ux.component.Container;
 import org.teamapps.ux.component.field.AbstractField;
-import org.teamapps.common.format.Color;
 import org.teamapps.ux.component.toolbar.Toolbar;
 import org.teamapps.ux.component.toolbutton.ToolButton;
 
@@ -39,21 +39,23 @@
 import java.util.HashSet;
 import java.util.List;
 import java.util.Set;
+import java.util.function.Consumer;
 import java.util.stream.Collectors;
 
-public class Panel extends AbstractComponent implements Container {
+public class Panel extends AbstractComponent implements Component {
 
 	public final Event<WindowButtonType> onWindowButtonClicked = new Event<>();
 
+	private Icon<?, ?> icon;
 	private String title;
-	private Icon icon;
+	private String badge;
 
 	private AbstractField<?> leftHeaderField;
-	private Icon leftHeaderFieldIcon;
+	private Icon<?, ?> leftHeaderFieldIcon;
 	private int leftHeaderFieldMinWidth = 100;
 	private int leftHeaderFieldMaxWidth = 300;
 	private AbstractField<?> rightHeaderField;
-	private Icon rightHeaderFieldIcon;
+	private Icon<?, ?> rightHeaderFieldIcon;
 	private int rightHeaderFieldMinWidth = 100;
 	private int rightHeaderFieldMaxWidth = 300;
 	private HeaderComponentMinimizationPolicy headerComponentMinimizationPolicy = HeaderComponentMinimizationPolicy.LEFT_COMPONENT_FIRST;
@@ -68,30 +70,30 @@ public class Panel extends AbstractComponent implements Container {
 	private final List<ToolButton> toolButtons = new ArrayList<>();
 	private final Set<WindowButtonType> windowButtons = new HashSet<>();
 
+	private ObservableValue<Icon<?, ?>> observableIcon;
+	private final Consumer<Icon<?, ?>> iconChangeListener = this::setIcon;
+	private ObservableValue<String> observableTitle;
+	private final Consumer<String> titleChangeListener = this::setTitle;
+	private ObservableValue<AbstractField<?>> observableLeftHeaderField;
+	private final Consumer<AbstractField<?>> leftHeaderFieldChangeListener = this::setLeftHeaderField;
+	private ObservableValue<AbstractField<?>> observableRightHeaderField;
+	private final Consumer<AbstractField<?>> rightHeaderFieldChangeListener = this::setRightHeaderField;
+
+
 	public Panel() {
 		this(null, null, null);
 	}
 
-	public Panel(Icon icon, String title) {
+	public Panel(Icon<?, ?> icon, String title) {
 		this(icon, title, null);
 	}
 
-	public Panel(Icon icon, String title, Component content) {
+	public Panel(Icon<?, ?> icon, String title, Component content) {
 		this.icon = icon;
 		this.title = title;
 		setContent(content);
 	}
 
-	@Override
-	protected void doDestroy() {
-		if (this.content != null) {
-			this.content.destroy();
-		}
-		if (this.toolbar != null) {
-			this.toolbar.destroy();
-		}
-	}
-
 	public void addToolButton(ToolButton toolButton) {
 		this.toolButtons.add(toolButton);
 		toolButton.setParent(this);
@@ -115,7 +117,7 @@ public void setToolButtons(List<ToolButton> toolButtons) {
 
 	private void updateToolButtons() {
 		queueCommandIfRendered(() -> new UiPanel.SetToolButtonsCommand(getId(), this.toolButtons.stream()
-				.map(toolButton -> toolButton.createUiComponentReference())
+				.map(toolButton -> toolButton.createUiReference())
 				.collect(Collectors.toList())));
 	}
 
@@ -141,7 +143,7 @@ public Set<WindowButtonType> getWindowButtons() {
 
 	@Override
 	public UiComponent createUiComponent() {
-		UiPanel uiPanel = new UiPanel(getId());
+		UiPanel uiPanel = new UiPanel();
 		mapUiPanelProperties(uiPanel);
 		return uiPanel;
 	}
@@ -149,35 +151,36 @@ public UiComponent createUiComponent() {
 	protected void mapUiPanelProperties(UiPanel uiPanel) {
 		mapAbstractUiComponentProperties(uiPanel);
 		uiPanel.setTitle(title);
+		uiPanel.setBadge(badge);
 		uiPanel.setIcon(getSessionContext().resolveIcon(icon));
 		uiPanel.setLeftHeaderField(createUiPanelHeaderField(leftHeaderField, leftHeaderFieldIcon, leftHeaderFieldMinWidth, leftHeaderFieldMaxWidth));
 		uiPanel.setRightHeaderField(createUiPanelHeaderField(rightHeaderField, rightHeaderFieldIcon, rightHeaderFieldMinWidth, rightHeaderFieldMaxWidth));
 		uiPanel.setHeaderComponentMinimizationPolicy(headerComponentMinimizationPolicy.toUiHeaderComponentMinimizationPolicy());
 		uiPanel.setHideTitleBar(hideTitleBar);
-		uiPanel.setToolbar(Component.createUiComponentReference(toolbar));
-		uiPanel.setContent(content != null ? content.createUiComponentReference() : null);
+		uiPanel.setToolbar(Component.createUiClientObjectReference(toolbar));
+		uiPanel.setContent(content != null ? content.createUiReference() : null);
 		uiPanel.setPadding(padding);
 		uiPanel.setWindowButtons(windowButtons.stream()
 				.map(b -> b.toUiWindowButtonType()).collect(Collectors.toList()));
 		uiPanel.setToolButtons(toolButtons.stream()
-				.map(toolButton -> toolButton.createUiComponentReference())
+				.map(toolButton -> toolButton.createUiReference())
 				.collect(Collectors.toList()));
 		uiPanel.setAlwaysShowHeaderFieldIcons(alwaysShowHeaderFieldIcons);
 		uiPanel.setStretchContent(stretchContent);
 	}
 
-	public UiPanelHeaderField createUiPanelHeaderField(AbstractField<?> field, Icon icon, int minWidth, int maxWidth) {
+	public UiPanelHeaderField createUiPanelHeaderField(AbstractField<?> field, Icon<?, ?> icon, int minWidth, int maxWidth) {
 		if (field == null) {
 			return null;
 		}
-		UiPanelHeaderField uiPanelHeaderField = new UiPanelHeaderField(field.createUiComponentReference());
+		UiPanelHeaderField uiPanelHeaderField = new UiPanelHeaderField(field.createUiReference());
 		uiPanelHeaderField.setIcon(getSessionContext().resolveIcon(icon));
 		uiPanelHeaderField.setMinWidth(minWidth);
 		uiPanelHeaderField.setMaxWidth(maxWidth);
 		return uiPanelHeaderField;
 	}
 
-	public Panel setLeftHeaderField(AbstractField<?> field, Icon icon, int minWidth, int maxWidth) {
+	public Panel setLeftHeaderField(AbstractField<?> field, Icon<?, ?> icon, int minWidth, int maxWidth) {
 		if (field != null) {
 			field.setParent(this);
 		}
@@ -193,7 +196,7 @@ public AbstractField<?> getLeftHeaderField() {
 		return leftHeaderField;
 	}
 
-	public Panel setRightHeaderField(AbstractField<?> field, Icon icon, int minWidth, int maxWidth) {
+	public Panel setRightHeaderField(AbstractField<?> field, Icon<?, ?> icon, int minWidth, int maxWidth) {
 		if (field != null) {
 			field.setParent(this);
 		}
@@ -215,7 +218,7 @@ public void setContent(Component content) {
 		if (content != null) {
 			content.setParent(this);
 		}
-		queueCommandIfRendered(() -> new UiPanel.SetContentCommand(getId(), content != null ? content.createUiComponentReference() : null));
+		queueCommandIfRendered(() -> new UiPanel.SetContentCommand(getId(), content != null ? content.createUiReference() : null));
 	}
 
 	@Override
@@ -238,11 +241,20 @@ public void setTitle(String title) {
 		queueCommandIfRendered(() -> new UiPanel.SetTitleCommand(getId(), title));
 	}
 
-	public Icon getIcon() {
+	public String getBadge() {
+		return badge;
+	}
+
+	public void setBadge(String badge) {
+		this.badge = badge;
+		queueCommandIfRendered(() -> new UiPanel.SetBadgeCommand(getId(), badge));
+	}
+
+	public Icon<?, ?> getIcon() {
 		return icon;
 	}
 
-	public void setIcon(Icon icon) {
+	public void setIcon(Icon<?, ?> icon) {
 		this.icon = icon;
 		queueCommandIfRendered(() -> new UiPanel.SetIconCommand(getId(), getSessionContext().resolveIcon(icon)));
 	}
@@ -252,7 +264,7 @@ public Component getContent() {
 	}
 
 	public void setHeaderBackgroundColor(Color headerBackgroundColor) {
-		this.setCssStyle("> .panel-heading", "background-color", headerBackgroundColor.toHtmlColorString());
+		this.setCssStyle("> .panel-heading", "background-color", headerBackgroundColor != null ? headerBackgroundColor.toHtmlColorString() : null);
 	}
 
 	public void setHeaderFontColor(Color headerFontColor) {
@@ -260,7 +272,7 @@ public void setHeaderFontColor(Color headerFontColor) {
 	}
 
 	public void setBodyBackgroundColor(Color bodyBackgroundColor) {
-		this.setCssStyle("> .panel-body", "background-color", bodyBackgroundColor != null ? bodyBackgroundColor.toHtmlColorString(): null);
+		this.setCssStyle("> .panel-body", "background-color", bodyBackgroundColor != null ? bodyBackgroundColor.toHtmlColorString() : null);
 	}
 
 	public HeaderComponentMinimizationPolicy getHeaderComponentMinimizationPolicy() {
@@ -268,8 +280,11 @@ public HeaderComponentMinimizationPolicy getHeaderComponentMinimizationPolicy()
 	}
 
 	public void setHeaderComponentMinimizationPolicy(HeaderComponentMinimizationPolicy headerComponentMinimizationPolicy) {
+		boolean changed = headerComponentMinimizationPolicy != this.headerComponentMinimizationPolicy;
 		this.headerComponentMinimizationPolicy = headerComponentMinimizationPolicy;
-		reRenderIfRendered();
+		if (changed) {
+			reRenderIfRendered();
+		}
 	}
 
 	public boolean isHideTitleBar() {
@@ -277,8 +292,11 @@ public boolean isHideTitleBar() {
 	}
 
 	public void setHideTitleBar(boolean hideTitleBar) {
+		boolean changed = hideTitleBar != this.hideTitleBar;
 		this.hideTitleBar = hideTitleBar;
-		reRenderIfRendered();
+		if (changed) {
+			reRenderIfRendered();
+		}
 	}
 
 	public Toolbar getToolbar() {
@@ -295,8 +313,11 @@ public int getPadding() {
 	}
 
 	public void setPadding(int padding) {
+		boolean changed = padding != this.padding;
 		this.padding = padding;
-		reRenderIfRendered();
+		if (changed) {
+			reRenderIfRendered();
+		}
 	}
 
 	public boolean isMaximizable() {
@@ -312,17 +333,6 @@ public void setMaximizable(boolean maximizable) {
 		updateWindowButtons();
 	}
 
-	@Override
-	public boolean isChildVisible(Component child) {
-		return isEffectivelyVisible() && (content == child || leftHeaderField == child || rightHeaderField == child || toolButtons.contains(child) || toolbar == child);
-	}
-
-	//	TODO #focus
-//	@Override
-//	public void handleFieldFocused(AbstractField field) {
-//	}
-
-
 	public void setLeftHeaderField(AbstractField<?> leftHeaderField) {
 		if (this.leftHeaderField != null) {
 			this.leftHeaderField.setParent(null);
@@ -332,11 +342,11 @@ public void setLeftHeaderField(AbstractField<?> leftHeaderField) {
 		queueCommandIfRendered(() -> new UiPanel.SetLeftHeaderFieldCommand(getId(), createUiPanelHeaderField(leftHeaderField, leftHeaderFieldIcon, leftHeaderFieldMinWidth, leftHeaderFieldMaxWidth)));
 	}
 
-	public Icon getLeftHeaderFieldIcon() {
+	public Icon<?, ?> getLeftHeaderFieldIcon() {
 		return leftHeaderFieldIcon;
 	}
 
-	public void setLeftHeaderFieldIcon(Icon leftHeaderFieldIcon) {
+	public void setLeftHeaderFieldIcon(Icon<?, ?> leftHeaderFieldIcon) {
 		this.leftHeaderFieldIcon = leftHeaderFieldIcon;
 		queueCommandIfRendered(() -> new UiPanel.SetLeftHeaderFieldCommand(getId(), createUiPanelHeaderField(leftHeaderField, leftHeaderFieldIcon, leftHeaderFieldMinWidth, leftHeaderFieldMaxWidth)));
 	}
@@ -369,11 +379,11 @@ public void setRightHeaderField(AbstractField<?> rightHeaderField) {
 				rightHeaderFieldMaxWidth)));
 	}
 
-	public Icon getRightHeaderFieldIcon() {
+	public Icon<?, ?> getRightHeaderFieldIcon() {
 		return rightHeaderFieldIcon;
 	}
 
-	public void setRightHeaderFieldIcon(Icon rightHeaderFieldIcon) {
+	public void setRightHeaderFieldIcon(Icon<?, ?> rightHeaderFieldIcon) {
 		this.rightHeaderFieldIcon = rightHeaderFieldIcon;
 		queueCommandIfRendered(() -> new UiPanel.SetRightHeaderFieldCommand(getId(), createUiPanelHeaderField(rightHeaderField, rightHeaderFieldIcon, rightHeaderFieldMinWidth,
 				rightHeaderFieldMaxWidth)));
@@ -404,8 +414,11 @@ public boolean isAlwaysShowHeaderFieldIcons() {
 	}
 
 	public void setAlwaysShowHeaderFieldIcons(boolean alwaysShowHeaderFieldIcons) {
+		boolean changed = alwaysShowHeaderFieldIcons != this.alwaysShowHeaderFieldIcons;
 		this.alwaysShowHeaderFieldIcons = alwaysShowHeaderFieldIcons;
-		reRenderIfRendered();
+		if (changed) {
+			reRenderIfRendered();
+		}
 	}
 
 	public boolean isStretchContent() {
@@ -416,4 +429,49 @@ public void setStretchContent(boolean stretchContent) {
 		this.stretchContent = stretchContent;
 		queueCommandIfRendered(() -> new UiPanel.SetStretchContentCommand(getId(), stretchContent));
 	}
+
+
+	public void setIcon(ObservableValue<Icon<?, ?>> observableIcon) {
+		if (this.observableIcon != null) {
+			this.observableIcon.onChanged().removeListener(iconChangeListener);
+		}
+		this.observableIcon = observableIcon;
+		if (this.observableIcon != null) {
+			this.setIcon(observableIcon.get());
+			this.observableIcon.onChanged().addListener(iconChangeListener);
+		}
+	}
+
+	public void setTitle(ObservableValue<String> observableTitle) {
+		if (this.observableTitle != null) {
+			this.observableTitle.onChanged().removeListener(titleChangeListener);
+		}
+		this.observableTitle = observableTitle;
+		if (this.observableTitle != null) {
+			this.setTitle(observableTitle.get());
+			this.observableTitle.onChanged().addListener(titleChangeListener);
+		}
+	}
+
+	public void setLeftHeaderField(ObservableValue<AbstractField<?>> observableLeftHeaderField) {
+		if (this.observableLeftHeaderField != null) {
+			this.observableLeftHeaderField.onChanged().removeListener(leftHeaderFieldChangeListener);
+		}
+		this.observableLeftHeaderField = observableLeftHeaderField;
+		if (this.observableLeftHeaderField != null) {
+			this.setLeftHeaderField(observableLeftHeaderField.get());
+			this.observableLeftHeaderField.onChanged().addListener(leftHeaderFieldChangeListener);
+		}
+	}
+
+	public void setRightHeaderField(ObservableValue<AbstractField<?>> observableRightHeaderField) {
+		if (this.observableRightHeaderField != null) {
+			this.observableRightHeaderField.onChanged().removeListener(rightHeaderFieldChangeListener);
+		}
+		this.observableRightHeaderField = observableRightHeaderField;
+		if (this.observableRightHeaderField != null) {
+			this.setRightHeaderField(observableRightHeaderField.get());
+			this.observableRightHeaderField.onChanged().addListener(rightHeaderFieldChangeListener);
+		}
+	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/panel/WindowButtonType.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/panel/WindowButtonType.java
index db3916045..55cea50ff 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/panel/WindowButtonType.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/panel/WindowButtonType.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/pdfviewer/PdfViewer.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/pdfviewer/PdfViewer.java
new file mode 100644
index 000000000..52308d3ec
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/pdfviewer/PdfViewer.java
@@ -0,0 +1,217 @@
+package org.teamapps.ux.component.pdfviewer;
+
+import org.teamapps.dto.*;
+import org.teamapps.event.Event;
+import org.teamapps.ux.component.AbstractComponent;
+
+public class PdfViewer extends AbstractComponent {
+    public final Event<UiPdfViewer.PdfInitializedEvent> onPdfInitialized = new Event<>();
+    public final Event<UiPdfViewer.ZoomFactorAutoChangedEvent> onZoomFactorAutoChanged = new Event<>();
+    /**
+     * Fired when loading a PDF URL fails in the client.
+     * Payload contains the requested URL and an error message from the client-side load failure.
+     */
+    public final Event<UiPdfViewer.PdfLoadFailedEvent> onPdfLoadFailed = new Event<>();
+
+    protected String url;
+    protected UiPdfViewMode viewMode;
+    protected UiPdfZoomMode zoomMode = UiPdfZoomMode.TO_WIDTH;
+    protected boolean showDevTools = false;
+    protected int padding = 0;
+    protected int pageSpacing = 5;
+    protected float zoomFactor = 1f;
+    protected int currentPage = 1;
+    protected int maxPageNumber = 0;
+    protected UiBorder pageBorder;
+    protected UiShadow pageShadow;
+    protected String backgroundColor;
+    protected String borderColor;
+
+    public PdfViewer() {
+        this(null);
+    }
+
+    public PdfViewer(String url) {
+        this.url = url;
+    }
+
+    @Override
+    public UiComponent createUiComponent() {
+        UiPdfViewer uiPdfViewer = new UiPdfViewer();
+        mapAbstractUiComponentProperties(uiPdfViewer);
+
+        // IMPORTANT: each new property in the dto has to be registered here!!!
+        uiPdfViewer.setUrl(url);
+        uiPdfViewer.setShowDevTools(showDevTools);
+        uiPdfViewer.setViewMode(viewMode);
+        uiPdfViewer.setPadding(padding);
+        uiPdfViewer.setPageSpacing(pageSpacing);
+        uiPdfViewer.setZoomFactor(zoomFactor);
+        uiPdfViewer.setPageBorder(pageBorder);
+        uiPdfViewer.setZoomMode(zoomMode);
+        uiPdfViewer.setBackgroundColor(backgroundColor);
+        uiPdfViewer.setBorderColor(borderColor);
+
+        return uiPdfViewer;
+    }
+
+    @Override
+    public void handleUiEvent(UiEvent event) {
+        // TODO: This ui event does not arrive on the server yet. => Check with yann!
+        switch (event.getUiEventType()) {
+            case UI_PDF_VIEWER_PDF_INITIALIZED: {
+                UiPdfViewer.PdfInitializedEvent initEvent = (UiPdfViewer.PdfInitializedEvent) event;
+                this.maxPageNumber = initEvent.getNumberOfPages();
+                this.onPdfInitialized.fire(initEvent);
+                break;
+            }
+            case UI_PDF_VIEWER_ZOOM_FACTOR_AUTO_CHANGED: {
+                UiPdfViewer.ZoomFactorAutoChangedEvent zoomChangedEvent = (UiPdfViewer.ZoomFactorAutoChangedEvent) event;
+                this.zoomFactor = zoomChangedEvent.getZoomFactor();
+                this.onZoomFactorAutoChanged.fire(zoomChangedEvent);
+                break;
+            }
+            case UI_PDF_VIEWER_PDF_LOAD_FAILED: {
+                UiPdfViewer.PdfLoadFailedEvent pdfLoadFailedEvent = (UiPdfViewer.PdfLoadFailedEvent) event;
+                this.onPdfLoadFailed.fire(pdfLoadFailedEvent);
+                break;
+            }
+        }
+    }
+
+    public String getUrl() {
+        return url;
+    }
+
+    public void setUrl(String url) {
+        this.url = url;
+        this.currentPage = 1;
+        queueCommandIfRendered(() -> new UiPdfViewer.SetUrlCommand(getId(), url));
+    }
+
+    public boolean getShowDevTools() {
+        return showDevTools;
+    }
+
+    public void setShowDevTools(boolean showDevTools) {
+        this.showDevTools = showDevTools;
+        queueCommandIfRendered(() -> new UiPdfViewer.SetShowDevToolsCommand(getId(), showDevTools));
+    }
+
+    public UiPdfViewMode getViewMode() {
+        return viewMode;
+    }
+
+	public void setViewMode(UiPdfViewMode viewMode) {
+		this.viewMode = viewMode;
+		queueCommandIfRendered(() -> new UiPdfViewer.SetViewModeCommand(getId(), viewMode));
+	}
+
+	public void showPage(int page) {
+		this.currentPage = page;
+		queueCommandIfRendered(() -> new UiPdfViewer.ShowPageCommand(getId(), page));
+	}
+
+	public void nextPage() {
+		if (maxPageNumber > 0 && currentPage >= maxPageNumber) {
+			return;
+		}
+		showPage(currentPage + 1);
+	}
+
+	public void previousPage() {
+		if (currentPage <= 1) {
+			return;
+		}
+		showPage(currentPage - 1);
+	}
+
+	public void zoomIn() {
+		setZoomFactor(zoomFactor + 0.1f);
+	}
+
+	public void zoomOut() {
+		setZoomFactor(Math.max(0.1f, zoomFactor - 0.1f));
+	}
+
+	public void zoomToWidth() {
+		setZoomMode(UiPdfZoomMode.TO_WIDTH);
+	}
+
+	public void zoomToHeight() {
+		setZoomMode(UiPdfZoomMode.TO_HEIGHT);
+	}
+
+	public int getPadding() {
+		return padding;
+	 }
+
+    public void setPadding(int padding) {
+        this.padding = padding;
+        queueCommandIfRendered(() -> new UiPdfViewer.SetPaddingCommand(getId(), padding));
+    }
+
+    public int getPageSpacing() {
+        return pageSpacing;
+    }
+
+    public void setPageSpacing(int pageSpacing) {
+        this.pageSpacing = pageSpacing;
+        queueCommandIfRendered(() -> new UiPdfViewer.SetPageSpacingCommand(getId(), pageSpacing));
+    }
+
+    public float getZoomFactor() {
+        return zoomFactor;
+    }
+
+    /**
+     * CAUTION: This does only work in UiPdfZoomMode.MANUAL!
+     * The modes UiPdfZoomMode.TO_WIDTH and UiPdfZoomMode.TO_HEIGHT
+     * will calculate the ZoomFactor for themselves and set the mode to MANUAL afterwards.
+     * @param zoomFactor the zoom factor to set
+     */
+    public void setZoomFactor(float zoomFactor) {
+        this.zoomFactor = zoomFactor;
+        queueCommandIfRendered(() -> new UiPdfViewer.SetZoomFactorCommand(getId(), zoomFactor));
+    }
+
+    public UiPdfZoomMode getZoomMode() {
+        return this.zoomMode;
+    }
+
+    public void setZoomMode(UiPdfZoomMode zoomMode) {
+        this.zoomMode = zoomMode;
+        queueCommandIfRendered(() -> new UiPdfViewer.SetZoomModeCommand(getId(), this.getZoomMode() ));
+    }
+
+    public UiBorder getPageBorder() {
+        return pageBorder;
+    }
+
+    public void setPageBorder(UiBorder pageBorder) {
+        this.pageBorder = pageBorder;
+        queueCommandIfRendered(() -> new UiPdfViewer.SetPageBorderCommand(getId(), pageBorder));
+    }
+
+    public String getBackgroundColor() {
+        return backgroundColor;
+    }
+
+    /**
+     * Sets the Background color of the container for the pdf canvas
+     * @param cssColor
+     */
+    public void setBackgroundColor(String cssColor) {
+        this.backgroundColor = cssColor;
+        queueCommandIfRendered(() -> new UiPdfViewer.SetBackgroundColorCommand(getId(), cssColor));
+    }
+
+    public String getBorderColor() {
+        return this.borderColor;
+    }
+
+    public void setBorderColor(String borderColor) {
+        this.borderColor = borderColor;
+        queueCommandIfRendered(() -> new UiPdfViewer.SetBorderColorCommand(getId(), borderColor));
+    }
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/pdfviewer/PdfViewerTestHarness.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/pdfviewer/PdfViewerTestHarness.java
new file mode 100644
index 000000000..e93cf6ac4
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/pdfviewer/PdfViewerTestHarness.java
@@ -0,0 +1,322 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2025 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.pdfviewer;
+
+import java.net.URL;
+import java.util.function.Consumer;
+import org.teamapps.dto.UiPdfViewMode;
+import org.teamapps.dto.UiPdfZoomMode;
+import org.teamapps.icon.material.MaterialIcon;
+import org.teamapps.ux.component.absolutelayout.Length;
+import org.teamapps.ux.component.field.Button;
+import org.teamapps.ux.component.field.Label;
+import org.teamapps.ux.component.field.SpecialKey;
+import org.teamapps.ux.component.field.TextField;
+import org.teamapps.ux.component.flexcontainer.HorizontalLayout;
+import org.teamapps.ux.component.flexcontainer.VerticalLayout;
+import org.teamapps.ux.component.panel.Panel;
+import org.teamapps.ux.component.template.BaseTemplate;
+import org.teamapps.ux.component.template.BaseTemplateRecord;
+import org.teamapps.ux.component.toolbar.Toolbar;
+import org.teamapps.ux.component.toolbar.ToolbarButton;
+import org.teamapps.ux.component.toolbar.ToolbarButtonGroup;
+import org.teamapps.ux.css.CssAlignItems;
+import org.teamapps.ux.resource.ClassPathResource;
+import org.teamapps.ux.resource.InputStreamResource;
+import org.teamapps.ux.resource.Resource;
+
+public class PdfViewerTestHarness extends Panel {
+
+    public PdfViewerTestHarness() {
+        super(null, "PDF Viewer");
+        PdfViewer pdfViewer = new PdfViewer();
+        pdfViewer.setPadding(10);
+        pdfViewer.setPageSpacing(8);
+        pdfViewer.setShowDevTools(true);
+        pdfViewer.setViewMode(UiPdfViewMode.CONTINUOUS_VIRTUAL);
+        pdfViewer.setZoomMode(UiPdfZoomMode.TO_HEIGHT);
+        pdfViewer.setBackgroundColor("oklch(0.74 0.1 218.65)");
+        pdfViewer.setBorderColor("#ff0000");
+
+        Toolbar toolbar = new Toolbar();
+        ToolbarButtonGroup buttonGroup = toolbar.addButtonGroup(
+            new ToolbarButtonGroup()
+        );
+
+        ToolbarButton showPdfButton = buttonGroup.addButton(
+            ToolbarButton.createSmall(
+                MaterialIcon.PICTURE_AS_PDF,
+                "Show PDF",
+                "Show the PDF document"
+            )
+        );
+        ToolbarButton viewModeButton = buttonGroup.addButton(
+            ToolbarButton.createSmall(
+                MaterialIcon.VIEW_STREAM,
+                "View Mode",
+                "Select page scrolling mode"
+            )
+        );
+        ToolbarButton decreasePageButton = buttonGroup.addButton(
+            ToolbarButton.createSmall(
+                MaterialIcon.NAVIGATE_BEFORE,
+                "Previous Page",
+                "Show previous page"
+            )
+        );
+        ToolbarButton increasePageButton = buttonGroup.addButton(
+            ToolbarButton.createSmall(
+                MaterialIcon.NAVIGATE_NEXT,
+                "Next Page",
+                "Show next page"
+            )
+        );
+        ToolbarButton[] pageIndicatorButton = new ToolbarButton[1];
+        ToolbarButton zoomInButton = buttonGroup.addButton(
+            ToolbarButton.createSmall(
+                MaterialIcon.ZOOM_IN,
+                "Zoom in",
+                "Increase zoom factor"
+            )
+        );
+        ToolbarButton zoomOutButton = buttonGroup.addButton(
+            ToolbarButton.createSmall(
+                MaterialIcon.ZOOM_OUT,
+                "Zoom out",
+                "Decrease zoom factor"
+            )
+        );
+        ToolbarButton zoomToWidthButton = buttonGroup.addButton(
+            ToolbarButton.createSmall(
+                MaterialIcon.BORDER_HORIZONTAL,
+                "Zoom to width",
+                "Auto-zoom to container width"
+            )
+        );
+        ToolbarButton zoomToHeightButton = buttonGroup.addButton(
+            ToolbarButton.createSmall(
+                MaterialIcon.BORDER_VERTICAL,
+                "Zoom to height",
+                "Auto-zoom to container height"
+            )
+        );
+
+        int[] currentPage = { 1 };
+        int[] maxPageNumber = { 0 };
+        boolean[] singlePageControlsVisible = { false };
+        Runnable updatePageIndicator = () -> {
+            String caption =
+                maxPageNumber[0] > 0
+                    ? currentPage[0] + " / " + maxPageNumber[0]
+                    : String.valueOf(currentPage[0]);
+            ToolbarButton indicator = new ToolbarButton(
+                BaseTemplate.TOOLBAR_BUTTON_SMALL,
+                new BaseTemplateRecord<>(
+                    (org.teamapps.icons.Icon) null,
+                    (String) null,
+                    caption,
+                    "Current page",
+                    null
+                )
+            );
+            indicator.setVisible(singlePageControlsVisible[0]);
+            if (pageIndicatorButton[0] != null) {
+                buttonGroup.removeButton(pageIndicatorButton[0]);
+            }
+            pageIndicatorButton[0] = indicator;
+            buttonGroup.addButton(indicator, increasePageButton, true);
+        };
+        Runnable updateSinglePageControlsVisibility = () -> {
+            decreasePageButton.setVisible(singlePageControlsVisible[0]);
+            increasePageButton.setVisible(singlePageControlsVisible[0]);
+            if (pageIndicatorButton[0] != null) {
+                pageIndicatorButton[0].setVisible(singlePageControlsVisible[0]);
+            }
+        };
+
+        String defaultPdfUrl =
+            "https://www.princexml.com/samples/wind-in-willows/b-format.pdf";
+        TextField pdfUrlField = new TextField();
+        pdfUrlField.setShowClearButton(true);
+        pdfUrlField.setEmptyText("PDF URL");
+        pdfUrlField.setValue(defaultPdfUrl);
+        Label pdfUrlLabel = new Label("PDF URL");
+        pdfUrlLabel.setTargetComponent(pdfUrlField);
+
+        HorizontalLayout pdfUrlRow = new HorizontalLayout();
+        pdfUrlRow.setAlignItems(CssAlignItems.CENTER);
+        pdfUrlRow.setGap(Length.ofPixels(8));
+        pdfUrlRow.addComponentAutoSize(pdfUrlLabel);
+        pdfUrlRow.addComponentFillRemaining(pdfUrlField);
+
+        String testPdfLink = getSessionContext().createResourceLink(
+            new ClassPathResource("test.pdf", "application/pdf")
+        );
+
+        Runnable loadPdf = () -> {
+            String url = pdfUrlField.getValue();
+            pdfViewer.setUrl(resolvePdfUrl(url, testPdfLink));
+        };
+
+        showPdfButton.onClick.addListener(loadPdf::run);
+        pdfUrlField.onSpecialKeyPressed.addListener(key -> {
+            if (key == SpecialKey.ENTER) {
+                loadPdf.run();
+            }
+        });
+
+        VerticalLayout viewModeMenu = new VerticalLayout();
+        Button<BaseTemplateRecord> singlePageModeEntry = Button.create(
+            MaterialIcon.VIEW_DAY,
+            "Single Page Mode"
+        );
+        Button<BaseTemplateRecord> continuousModeEntry = Button.create(
+            MaterialIcon.VIEW_STREAM,
+            "Continuous Mode"
+        );
+        Button<BaseTemplateRecord> continuousVirtualModeEntry = Button.create(
+            MaterialIcon.VIEW_STREAM,
+            "Continuous Virtual"
+        );
+        viewModeMenu.addComponentAutoSize(singlePageModeEntry);
+        viewModeMenu.addComponentAutoSize(continuousModeEntry);
+        viewModeMenu.addComponentAutoSize(continuousVirtualModeEntry);
+        viewModeButton
+            .setDropDownComponent(viewModeMenu)
+            .setDroDownPanelWidth(260);
+
+        setTitle("PDF Viewer - Continuous Virtual");
+        Consumer<UiPdfViewMode> applyViewMode = mode -> {
+            pdfViewer.setViewMode(mode);
+            singlePageControlsVisible[0] = mode == UiPdfViewMode.SINGLE_PAGE;
+            updateSinglePageControlsVisibility.run();
+            if (mode == UiPdfViewMode.SINGLE_PAGE) {
+                setTitle("PDF Viewer - Single Page Mode");
+            } else if (mode == UiPdfViewMode.CONTINUOUS) {
+                setTitle("PDF Viewer - Continuous Mode");
+            } else if (mode == UiPdfViewMode.CONTINUOUS_VIRTUAL) {
+                setTitle("PDF Viewer - Continuous Virtual");
+            }
+            System.out.println("Switched to " + mode + " mode");
+        };
+
+        singlePageModeEntry.onClicked.addListener(() -> {
+            applyViewMode.accept(UiPdfViewMode.SINGLE_PAGE);
+            viewModeButton.closeDropDown();
+        });
+
+        continuousModeEntry.onClicked.addListener(() -> {
+            applyViewMode.accept(UiPdfViewMode.CONTINUOUS);
+            viewModeButton.closeDropDown();
+        });
+
+        continuousVirtualModeEntry.onClicked.addListener(() -> {
+            applyViewMode.accept(UiPdfViewMode.CONTINUOUS_VIRTUAL);
+            viewModeButton.closeDropDown();
+        });
+
+        decreasePageButton.onClick.addListener(() -> {
+            pdfViewer.previousPage();
+            if (currentPage[0] > 1) {
+                currentPage[0]--;
+                updatePageIndicator.run();
+            }
+        });
+
+        increasePageButton.onClick.addListener(() -> {
+            pdfViewer.nextPage();
+            if (maxPageNumber[0] == 0 || currentPage[0] < maxPageNumber[0]) {
+                currentPage[0]++;
+                updatePageIndicator.run();
+            }
+        });
+
+        zoomInButton.onClick.addListener(() -> {
+            pdfViewer.zoomIn();
+        });
+
+        zoomOutButton.onClick.addListener(() -> {
+            pdfViewer.zoomOut();
+        });
+
+        zoomToWidthButton.onClick.addListener(() -> {
+            pdfViewer.zoomToWidth();
+        });
+
+        zoomToHeightButton.onClick.addListener(() -> {
+            pdfViewer.zoomToHeight();
+        });
+
+        pdfViewer.onPdfInitialized.addListener(initEvent -> {
+            System.out.println(
+                "PDF viewer rendered, max page number: " +
+                    initEvent.getNumberOfPages()
+            );
+            maxPageNumber[0] = initEvent.getNumberOfPages();
+            currentPage[0] = 1;
+            updatePageIndicator.run();
+        });
+
+        pdfViewer.onZoomFactorAutoChanged.addListener(zoomFactorChangeEvent -> {
+            System.out.println(
+                "Zoom factor changed: " + zoomFactorChangeEvent.getZoomFactor()
+            );
+        });
+
+        pdfViewer.setUrl(resolvePdfUrl(defaultPdfUrl, testPdfLink));
+        updatePageIndicator.run();
+        updateSinglePageControlsVisibility.run();
+
+        setToolbar(toolbar);
+        VerticalLayout layout = new VerticalLayout();
+        layout.addComponentAutoSize(pdfUrlRow);
+        layout.addComponentFillRemaining(pdfViewer);
+        setContent(layout);
+    }
+
+    private String resolvePdfUrl(String url, String fallbackUrl) {
+        if (url == null || url.isBlank()) {
+            return fallbackUrl;
+        }
+        if (url.startsWith("http://") || url.startsWith("https://")) {
+            return getSessionContext().createResourceLink(
+                createPdfProxyResource(url)
+            );
+        }
+        return url;
+    }
+
+    private Resource createPdfProxyResource(String url) {
+        return new InputStreamResource(
+            () -> {
+                try {
+                    return new URL(url).openStream();
+                } catch (Exception e) {
+                    throw new RuntimeException(
+                        "Failed to open PDF URL: " + url,
+                        e
+                    );
+                }
+            },
+            "proxied.pdf"
+        )
+            .withMimeType("application/pdf");
+    }
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/playground/Playground.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/playground/Playground.java
new file mode 100644
index 000000000..e0c59c72e
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/playground/Playground.java
@@ -0,0 +1,37 @@
+package org.teamapps.ux.component.playground;
+
+import org.teamapps.dto.*;
+import org.teamapps.ux.component.AbstractComponent;
+
+public class Playground extends AbstractComponent {
+
+    protected String title;
+
+    public Playground() {
+        this(null);
+    }
+
+    public Playground(String title) {
+        this.title = title;
+    }
+
+    @Override
+    public UiComponent createUiComponent() {
+        UiPlayground uiPlayground = new UiPlayground();
+        mapAbstractUiComponentProperties(uiPlayground);
+
+        uiPlayground.setTitle(title);
+
+        return uiPlayground;
+    }
+
+    public String getTitle() {
+        return title;
+    }
+
+    public void setTitle(String title) {
+        this.title = title;
+        queueCommandIfRendered(() -> new UiPlayground.SetTitleCommand(getId(), title));
+    }
+
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/popup/Popup.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/popup/Popup.java
new file mode 100644
index 000000000..3a471efbb
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/popup/Popup.java
@@ -0,0 +1,162 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.popup;
+
+import org.teamapps.common.format.RgbaColor;
+import org.teamapps.common.format.Color;
+import org.teamapps.dto.UiComponent;
+import org.teamapps.dto.UiPopup;
+import org.teamapps.ux.component.AbstractComponent;
+import org.teamapps.ux.component.Component;
+
+public class Popup extends AbstractComponent {
+
+	private Component contentComponent;
+	private int x;
+	private int y;
+	private int width; // 0 = full width, -1 = auto
+	private int height; // 0 = full height, -1 = auto
+	private Color backgroundColor;
+	private boolean modal = false;
+	private Color dimmingColor = new RgbaColor(0, 0, 0, .2f);
+	private boolean closeOnEscape; // close if the user presses escape
+	private boolean closeOnClickOutside; // close if the user clicks onto the area outside the window
+
+	public Popup(Component contentComponent) {
+		this.contentComponent = contentComponent;
+	}
+
+	@Override
+	public UiComponent createUiComponent() {
+		UiPopup ui = new UiPopup();
+		mapAbstractUiComponentProperties(ui);
+		ui.setContentComponent(contentComponent.createUiReference());
+		ui.setX(x);
+		ui.setY(y);
+		ui.setWidth(width);
+		ui.setHeight(height);
+		ui.setBackgroundColor(backgroundColor != null ? backgroundColor.toHtmlColorString() : null);
+		ui.setModal(modal);
+		ui.setDimmingColor(dimmingColor != null ? dimmingColor.toHtmlColorString() : null);
+		ui.setCloseOnEscape(closeOnEscape);
+		ui.setCloseOnClickOutside(closeOnClickOutside);
+		return ui;
+	}
+
+	public Component getContentComponent() {
+		return contentComponent;
+	}
+
+	public void setContentComponent(Component contentComponent) {
+		this.contentComponent = contentComponent;
+		// queueCommandIfRendered(() -> new UiPopup.SetContentComponentCommand(getId(), contentComponent));
+	}
+
+	public int getX() {
+		return x;
+	}
+
+	public void setX(int x) {
+		this.x = x;
+		queueCommandIfRendered(() -> new UiPopup.SetPositionCommand(getId(), x, y));
+	}
+
+	public int getY() {
+		return y;
+	}
+
+	public void setY(int y) {
+		this.y = y;
+		queueCommandIfRendered(() -> new UiPopup.SetPositionCommand(getId(), x, y));
+	}
+
+	public void setPosition(int x, int y) {
+		this.x = x;
+		this.y = y;
+		queueCommandIfRendered(() -> new UiPopup.SetPositionCommand(getId(), x, y));
+	}
+
+	public int getWidth() {
+		return width;
+	}
+
+	public void setWidth(int width) {
+		this.width = width;
+		queueCommandIfRendered(() -> new UiPopup.SetDimensionsCommand(getId(), width, height));
+	}
+
+	public int getHeight() {
+		return height;
+	}
+
+	public void setHeight(int height) {
+		this.height = height;
+		queueCommandIfRendered(() -> new UiPopup.SetDimensionsCommand(getId(), width, height));
+	}
+
+	public Color getBackgroundColor() {
+		return backgroundColor;
+	}
+
+	public void setBackgroundColor(Color backgroundColor) {
+		this.backgroundColor = backgroundColor;
+		queueCommandIfRendered(() -> new UiPopup.SetBackgroundColorCommand(getId(), backgroundColor != null ? backgroundColor.toHtmlColorString() : null));
+	}
+
+	public boolean isModal() {
+		return modal;
+	}
+
+	public void setModal(boolean modal) {
+		this.modal = modal;
+		// queueCommandIfRendered(() -> new UiPopup.SetModalCommand(getId(), modal));
+	}
+
+	public Color getDimmingColor() {
+		return dimmingColor;
+	}
+
+	public void setDimmingColor(Color dimmingColor) {
+		this.dimmingColor = dimmingColor;
+		queueCommandIfRendered(() -> new UiPopup.SetDimmingColorCommand(getId(), dimmingColor != null ? dimmingColor.toHtmlColorString() : null));
+	}
+
+	public boolean isCloseOnEscape() {
+		return closeOnEscape;
+	}
+
+	public void setCloseOnEscape(boolean closeOnEscape) {
+		this.closeOnEscape = closeOnEscape;
+		// queueCommandIfRendered(() -> new UiPopup.SetCloseOnEscapeCommand(getId(), closeOnEscape));
+	}
+
+	public boolean isCloseOnClickOutside() {
+		return closeOnClickOutside;
+	}
+
+	public void setCloseOnClickOutside(boolean closeOnClickOutside) {
+		this.closeOnClickOutside = closeOnClickOutside;
+		// queueCommandIfRendered(() -> new UiPopup.SetCloseOnClickOutsideCommand(getId(), closeOnClickOutside));
+	}
+
+	public void close() {
+		queueCommandIfRendered(() -> new UiPopup.CloseCommand(getId()));
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/progress/DefaultMultiProgressDisplay.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/progress/DefaultMultiProgressDisplay.java
new file mode 100644
index 000000000..c8a5d70fa
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/progress/DefaultMultiProgressDisplay.java
@@ -0,0 +1,169 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.progress;
+
+import org.teamapps.dto.UiEvent;
+import org.teamapps.dto.UiDefaultMultiProgressDisplay;
+import org.teamapps.event.Event;
+import org.teamapps.icons.Icon;
+import org.teamapps.ux.component.AbstractComponent;
+import org.teamapps.ux.component.field.DisplayField;
+import org.teamapps.ux.component.flexcontainer.VerticalLayout;
+import org.teamapps.ux.component.format.Spacing;
+import org.teamapps.ux.component.notification.Notification;
+import org.teamapps.ux.component.notification.NotificationPosition;
+import org.teamapps.ux.i18n.TeamAppsDictionary;
+import org.teamapps.ux.task.ObservableProgress;
+import org.teamapps.ux.task.ProgressCompletableFuture;
+
+import java.util.ArrayList;
+import java.util.EnumSet;
+import java.util.List;
+import java.util.concurrent.TimeUnit;
+import java.util.stream.Collectors;
+
+import static org.teamapps.ux.task.ProgressStatus.*;
+
+public class DefaultMultiProgressDisplay extends AbstractComponent implements MultiProgressDisplay {
+
+	public final Event<Void> onClicked = new Event<>();
+
+	private final List<ObservableProgress> progresses = new ArrayList<>();
+	private final Notification progressListNotification;
+	private final VerticalLayout progressListVerticalLayout;
+	private final DisplayField noEntriesDisplayField;
+
+	private boolean showNotificationOnProgressAdded = true;
+	private int notificationDisplayTimeMillis = 3000;
+	private final NotificationPosition notificationPosition = NotificationPosition.BOTTOM_RIGHT;
+	private int listEntryRemainTimeout = 5000;
+
+	private boolean showingNotificationWithoutTimeout = false;
+
+	public DefaultMultiProgressDisplay() {
+		progressListVerticalLayout = new VerticalLayout();
+		noEntriesDisplayField = new DisplayField();
+		noEntriesDisplayField.setValue("<div style=\"text-align: center\">" + getSessionContext().getLocalized(TeamAppsDictionary.NO_RUNNING_TASKS.getKey()) + "</div>");
+		noEntriesDisplayField.setShowHtml(true);
+		progressListVerticalLayout.addComponent(noEntriesDisplayField);
+		progressListNotification = new Notification(progressListVerticalLayout);
+		progressListNotification.setPadding(new Spacing(2, 4, 2, 4));
+		progressListNotification.setShowProgressBar(false);
+		progressListNotification.onClosed.addListener(byUser -> {
+			showingNotificationWithoutTimeout = false;
+		});
+	}
+
+	@Override
+	public UiDefaultMultiProgressDisplay createUiComponent() {
+		UiDefaultMultiProgressDisplay ui = new UiDefaultMultiProgressDisplay();
+		mapAbstractUiComponentProperties(ui);
+		ui.setRunningCount(progresses.size());
+		ui.setStatusMessages(progresses.stream().map(p -> p.getStatusMessage()).collect(Collectors.toList()));
+		return ui;
+	}
+
+	@Override
+	public void handleUiEvent(UiEvent event) {
+		switch (event.getUiEventType()) {
+			case UI_MULTI_PROGRESS_DISPLAY_CLICKED: {
+				this.onClicked.fire(null);
+				if (showingNotificationWithoutTimeout) {
+					this.showingNotificationWithoutTimeout = false;
+					progressListNotification.close();
+				} else {
+					this.showingNotificationWithoutTimeout = true;
+					if (progresses.size() > 0) {
+						progressListNotification.setDisplayTimeInMillis(-1);
+					} else {
+						progressListNotification.setDisplayTimeInMillis(2000);
+					}
+					getSessionContext().showNotification(progressListNotification, notificationPosition);
+				}
+			}
+		}
+	}
+
+	@Override
+	public void addProgress(Icon icon, String taskName, ObservableProgress progress) {
+		this.progresses.add(progress);
+		progressListVerticalLayout.removeComponent(noEntriesDisplayField);
+		ProgressDisplay progressDisplay = new ProgressDisplay(icon, taskName, progress);
+		progressDisplay.setMargin(new Spacing(2, 0, 2, 0));
+		progressListVerticalLayout.addComponent(progressDisplay);
+		progress.onChanged().addListener(data -> {
+			if (EnumSet.of(CANCELED, COMPLETE, FAILED).contains(data.getStatus())) {
+				showNotificationDueToUpdate();
+				this.progresses.remove(progress);
+				this.update();
+
+				new ProgressCompletableFuture<Void>().completeOnTimeout(null, listEntryRemainTimeout, TimeUnit.MILLISECONDS)
+						.handleWithCurrentSessionContext((aVoid, throwable) -> {
+							progressListVerticalLayout.removeComponent(progressDisplay);
+							if (progressListVerticalLayout.getComponents().size() == 0) {
+								progressListVerticalLayout.addComponent(noEntriesDisplayField);
+							}
+							if (this.progresses.size() == 0) {
+								showingNotificationWithoutTimeout = false;
+								this.progressListNotification.close();
+							}
+							return null;
+						});
+			}
+		});
+		showNotificationDueToUpdate();
+		this.update();
+	}
+
+	private void showNotificationDueToUpdate() {
+		if (!showingNotificationWithoutTimeout) {
+			progressListNotification.setDisplayTimeInMillis(notificationDisplayTimeMillis);
+			getSessionContext().showNotification(progressListNotification, notificationPosition);
+		}
+	}
+
+	private void update() {
+		queueCommandIfRendered(() -> new UiDefaultMultiProgressDisplay.UpdateCommand(this.getId(), createUiComponent()));
+	}
+
+	public boolean isShowNotificationOnProgressAdded() {
+		return showNotificationOnProgressAdded;
+	}
+
+	public void setShowNotificationOnProgressAdded(boolean showNotificationOnProgressAdded) {
+		this.showNotificationOnProgressAdded = showNotificationOnProgressAdded;
+	}
+
+	public int getNotificationDisplayTimeMillis() {
+		return notificationDisplayTimeMillis;
+	}
+
+	public void setNotificationDisplayTimeMillis(int notificationDisplayTimeMillis) {
+		this.notificationDisplayTimeMillis = notificationDisplayTimeMillis;
+	}
+
+	public int getListEntryRemainTimeout() {
+		return listEntryRemainTimeout;
+	}
+
+	public void setListEntryRemainTimeout(int listEntryRemainTimeout) {
+		this.listEntryRemainTimeout = listEntryRemainTimeout;
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/progress/MultiProgressDisplay.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/progress/MultiProgressDisplay.java
new file mode 100644
index 000000000..f9e96a983
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/progress/MultiProgressDisplay.java
@@ -0,0 +1,76 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.progress;
+
+import org.teamapps.icons.Icon;
+import org.teamapps.ux.component.Component;
+import org.teamapps.ux.task.ObservableProgress;
+import org.teamapps.ux.task.ProgressCompletableFuture;
+import org.teamapps.ux.task.function.ProgressReportingRunnable;
+import org.teamapps.ux.task.function.ProgressReportingSupplier;
+
+import java.util.concurrent.Executor;
+import java.util.function.Supplier;
+
+public interface MultiProgressDisplay extends Component {
+
+	void addProgress(Icon icon, String taskName, ObservableProgress progress);
+
+	default <T> ProgressCompletableFuture<T> addTask(Icon icon, String taskName, ProgressReportingSupplier<T> supplier) {
+		return addTask(icon, taskName, supplier, ProgressCompletableFuture.ASYNC_POOL);
+	}
+
+	default <T> ProgressCompletableFuture<T> addTask(Icon icon, String taskName, ProgressReportingSupplier<T> supplier, Executor executor) {
+		ProgressCompletableFuture<T> future = ProgressCompletableFuture.supplyAsync(supplier, executor);
+		addProgress(icon, taskName, future.getProgress());
+		return future;
+	}
+
+	default ProgressCompletableFuture<Void> addTask(Icon icon, String taskName, ProgressReportingRunnable runnable) {
+		return addTask(icon, taskName, runnable, ProgressCompletableFuture.ASYNC_POOL);
+	}
+
+	default ProgressCompletableFuture<Void> addTask(Icon icon, String taskName, ProgressReportingRunnable runnable, Executor executor) {
+		ProgressCompletableFuture<Void> future = ProgressCompletableFuture.runAsync(runnable, executor);
+		addProgress(icon, taskName, future.getProgress());
+		return future;
+	}
+
+	default <T> ProgressCompletableFuture<T> addTask(Icon icon, String taskName, Supplier<T> supplier) {
+		return addTask(icon, taskName, supplier, ProgressCompletableFuture.ASYNC_POOL);
+	}
+
+	default <T> ProgressCompletableFuture<T> addTask(Icon icon, String taskName, Supplier<T> supplier, Executor executor) {
+		ProgressCompletableFuture<T> future = ProgressCompletableFuture.supplyAsync(supplier, executor);
+		addProgress(icon, taskName, future.getProgress());
+		return future;
+	}
+
+	default ProgressCompletableFuture<Void> addTask(Icon icon, String taskName, Runnable runnable) {
+		return addTask(icon, taskName, runnable, ProgressCompletableFuture.ASYNC_POOL);
+	}
+
+	default ProgressCompletableFuture<Void> addTask(Icon icon, String taskName, Runnable runnable, Executor executor) {
+		ProgressCompletableFuture<Void> future = ProgressCompletableFuture.runAsync(runnable, executor);
+		addProgress(icon, taskName, future.getProgress());
+		return future;
+	}
+
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/progress/ProgressDisplay.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/progress/ProgressDisplay.java
new file mode 100644
index 000000000..f77cddb6a
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/progress/ProgressDisplay.java
@@ -0,0 +1,189 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.progress;
+
+import org.teamapps.dto.UiEvent;
+import org.teamapps.dto.UiProgressDisplay;
+import org.teamapps.event.Event;
+import org.teamapps.icons.Icon;
+import org.teamapps.ux.component.AbstractComponent;
+import org.teamapps.ux.task.ObservableProgress;
+import org.teamapps.ux.task.ProgressChangeEventData;
+import org.teamapps.ux.task.ProgressStatus;
+
+import java.util.function.Consumer;
+
+/**
+ * This component displays progress information.
+ * <p>
+ * It is typically used to visualize the progress of an {@link ObservableProgress}.
+ * However, it can also be used manually, without attaching a progress.
+ */
+public class ProgressDisplay extends AbstractComponent {
+
+	public final Event<Void> onClicked = new Event<>();
+	public final Event<Void> onCancelButtonClicked = new Event<>();
+
+	private Icon icon;
+	private String taskName;
+	private String statusMessage;
+	private double progress;
+	private ProgressStatus status = ProgressStatus.NOT_YET_STARTED;
+	private boolean cancelable;
+
+	private ObservableProgress observedProgress;
+	
+	private final Consumer<ProgressChangeEventData> observedProgressChangeListener = data -> {
+		setStatus(data.getStatus());
+		setStatusMessage(data.getStatusMessage());
+		setProgress(data.getProgress());
+		setCancelable(data.isCancelable());
+		this.updateUi();
+	};
+
+	public ProgressDisplay() {
+		this(null, null, null);
+	}
+
+	public ProgressDisplay(Icon icon, String taskName) {
+		this(icon, taskName, null);
+	}
+
+	public ProgressDisplay(Icon icon, String taskName, ObservableProgress progress) {
+		this.icon = icon;
+		this.taskName = taskName;
+		setObservedProgress(progress);
+	}
+
+	@Override
+	public UiProgressDisplay createUiComponent() {
+		UiProgressDisplay ui = new UiProgressDisplay();
+		mapAbstractUiComponentProperties(ui);
+		ui.setIcon(getSessionContext().resolveIcon(icon));
+		ui.setTaskName(taskName);
+		ui.setStatusMessage(statusMessage);
+		ui.setProgress(progress);
+		ui.setStatus(status.toUiProgressStatus());
+		ui.setCancelable(cancelable);
+		return ui;
+	}
+
+	private void updateUi() {
+		queueCommandIfRendered(() -> new UiProgressDisplay.UpdateCommand(getId(), createUiComponent()));
+	}
+
+	@Override
+	public void handleUiEvent(UiEvent event) {
+		switch (event.getUiEventType()) {
+			case UI_PROGRESS_DISPLAY_CLICKED: {
+				UiProgressDisplay.ClickedEvent clickedEvent = (UiProgressDisplay.ClickedEvent) event;
+				this.onClicked.fire(null);
+				break;
+			}
+			case UI_PROGRESS_DISPLAY_CANCEL_BUTTON_CLICKED: {
+				UiProgressDisplay.CancelButtonClickedEvent cancelButtonClickedEvent = (UiProgressDisplay.CancelButtonClickedEvent) event;
+				if (this.observedProgress != null) {
+					this.observedProgress.requestCancellation();
+				}
+				this.onCancelButtonClicked.fire(null);
+				break;
+			}
+
+		}
+
+	}
+
+	public void setObservedProgress(ObservableProgress observableProgress) {
+		if (this.observedProgress != null) {
+			this.observedProgress.onChanged().removeListener(this.observedProgressChangeListener);
+		}
+
+		this.observedProgress = observableProgress;
+
+		if (observableProgress != null) {
+			observableProgress.onChanged().addListener(this.observedProgressChangeListener);
+			this.statusMessage = observableProgress.getStatusMessage();
+			this.progress = observableProgress.getProgress();
+			this.status = observableProgress.getStatus();
+			this.cancelable = observableProgress.isCancelable();
+			this.updateUi();
+		}
+	}
+
+	public ObservableProgress getObservedProgress() {
+		return observedProgress;
+	}
+
+	public Icon getIcon() {
+		return icon;
+	}
+
+	public void setIcon(Icon icon) {
+		this.icon = icon;
+		updateUi();
+	}
+
+	public String getTaskName() {
+		return taskName;
+	}
+
+	public void setTaskName(String taskName) {
+		this.taskName = taskName;
+		updateUi();
+	}
+
+	public String getStatusMessage() {
+		return statusMessage;
+	}
+
+	public void setStatusMessage(String statusMessage) {
+		this.statusMessage = statusMessage;
+		updateUi();
+	}
+
+	public double getProgress() {
+		return progress;
+	}
+
+	public void setProgress(double progress) {
+		this.progress = progress;
+		updateUi();
+	}
+
+	public ProgressStatus getStatus() {
+		return status;
+	}
+
+	public void setStatus(ProgressStatus status) {
+		this.status = status;
+		updateUi();
+	}
+
+	public boolean isCancelable() {
+		return cancelable;
+	}
+
+	public void setCancelable(boolean cancelable) {
+		this.cancelable = cancelable;
+		updateUi();
+	}
+
+
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/qrscanner/QrCodeScanner.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/qrscanner/QrCodeScanner.java
new file mode 100644
index 000000000..c2eadfda3
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/qrscanner/QrCodeScanner.java
@@ -0,0 +1,67 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.qrscanner;
+
+import org.teamapps.dto.UiComponent;
+import org.teamapps.dto.UiEvent;
+import org.teamapps.dto.UiQrCodeScanner;
+import org.teamapps.event.Event;
+import org.teamapps.ux.component.AbstractComponent;
+
+public class QrCodeScanner extends AbstractComponent {
+
+	public final Event<String> onQrCodeDetected = new Event<>();
+
+	private boolean scanning;
+	private boolean stopsScanningAtFirstResult;
+
+	@Override
+	public UiComponent createUiComponent() {
+		UiQrCodeScanner ui = new UiQrCodeScanner();
+		mapAbstractUiComponentProperties(ui);
+		ui.setScanning(scanning);
+		ui.setStopsScanningAtFirstResult(stopsScanningAtFirstResult);
+		return ui;
+	}
+
+	@Override
+	public void handleUiEvent(UiEvent event) {
+		switch (event.getUiEventType()) {
+			case UI_QR_CODE_SCANNER_QR_CODE_DETECTED:
+				onQrCodeDetected.fire(((UiQrCodeScanner.QrCodeDetectedEvent) event).getCode());
+				break;
+		}
+	}
+
+	public void startScanning(boolean stopScanningAtFirstResult) {
+		scanning = true;
+		this.stopsScanningAtFirstResult = stopScanningAtFirstResult;
+		queueCommandIfRendered(() -> new UiQrCodeScanner.StartScanningCommand(getId(), stopScanningAtFirstResult));
+	}
+
+	public void stopScanning() {
+		scanning = false;
+		queueCommandIfRendered(() -> new UiQrCodeScanner.StopScanningCommand(getId()));
+	}
+
+	public void switchCamera() {
+		queueCommandIfRendered(() -> new UiQrCodeScanner.SwitchCameraCommand(getId()));
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/rootpanel/RootPanel.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/rootpanel/RootPanel.java
index 15c00dde0..1c668e810 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/rootpanel/RootPanel.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/rootpanel/RootPanel.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -20,41 +20,21 @@
 package org.teamapps.ux.component.rootpanel;
 
 import org.teamapps.dto.UiComponent;
-import org.teamapps.dto.UiComponentReference;
 import org.teamapps.dto.UiEvent;
 import org.teamapps.dto.UiRootPanel;
 import org.teamapps.ux.component.AbstractComponent;
 import org.teamapps.ux.component.Component;
-import org.teamapps.ux.component.Container;
-import org.teamapps.ux.component.animation.Animation;
+import org.teamapps.ux.component.animation.PageTransition;
 
-import java.util.ArrayList;
-import java.util.List;
-import java.util.stream.Collectors;
-
-public class RootPanel extends AbstractComponent implements Container {
+public class RootPanel extends AbstractComponent implements Component {
 
 	private Component content;
-	private List<Component> components = new ArrayList<>();
-
-	@Override
-	protected void doDestroy() {
-		this.components.forEach(Component::destroy);
-	}
 
 	@Override
 	public UiComponent createUiComponent() {
-		UiRootPanel uiRootPanel = new UiRootPanel(getId());
+		UiRootPanel uiRootPanel = new UiRootPanel();
 		mapAbstractUiComponentProperties(uiRootPanel);
-		if (content != null) {
-			uiRootPanel.setVisibleChildComponentId(content.getId());
-		}
-		if (!components.isEmpty()) {
-			List<UiComponentReference> uiComponents = components.stream()
-					.map(component -> component.createUiComponentReference())
-					.collect(Collectors.toList());
-			uiRootPanel.setChildComponents(uiComponents);
-		}
+		uiRootPanel.setContent(content != null ? content.createUiReference() : null);
 		return uiRootPanel;
 	}
 
@@ -63,58 +43,27 @@ public void handleUiEvent(UiEvent event) {
 		// no ui events for this component
 	}
 
-	// TODO #componentRef still needed after component reference implementation??
 	public void preloadContent(Component component) {
-		if (!components.contains(component)) {
-			this.components.add(component);
-			component.setParent(this);
-			queueCommandIfRendered(() -> new UiRootPanel.AddChildComponentCommand(getId(), component.createUiComponentReference(), false));
-		}
+		component.render();
 	}
 
 	public void setContent(Component component) {
-		setContent(component, Animation.NONE, 0);
+		setContent(component, null, 0);
 	}
 
-	public void setContent(Component component, Animation animation, long animationDuration) {
+	public void setContent(Component component, PageTransition animation, long animationDuration) {
 		if (component != null) {
 			preloadContent(component);
 		}
 		content = component;
-		queueCommandIfRendered(() -> new UiRootPanel.SetVisibleChildComponentCommand(getId(), component != null ? component.getId() : null, animation.toUiComponentRevealAnimation(), animationDuration));
-	}
-
-	public void removeComponent(Component component) {
-		components.remove(component);
-		if (content == component) {
-			setContent(components.isEmpty() ? null : components.get(0));
+		if (component != null) {
+			component.setParent(this);
 		}
-		queueCommandIfRendered(() -> new UiRootPanel.RemoveChildComponentCommand(getId(), component.getId()));
-	}
-
-	public void removeAllComponents() {
-		components.stream().forEach(component -> {
-			queueCommandIfRendered(() -> new UiRootPanel.RemoveChildComponentCommand(getId(), component.getId()));
-		});
-		components.clear();
-		setContent(null);
+		queueCommandIfRendered(() -> new UiRootPanel.SetContentCommand(getId(), component != null ? component.createUiReference() : null, animation != null ? animation.toUiPageTransition() : null, animationDuration));
 	}
 
 	public Component getContent() {
 		return content;
 	}
 
-	public List<Component> getComponents() {
-		return components;
-	}
-
-	@Override
-	public boolean isEffectivelyVisible() {
-		return isRendered() && isVisible();
-	}
-
-	@Override
-	public boolean isChildVisible(Component child) {
-		return isVisible() && content == child;
-	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/rootpanel/WakeLock.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/rootpanel/WakeLock.java
new file mode 100644
index 000000000..aab1c11e0
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/rootpanel/WakeLock.java
@@ -0,0 +1,26 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.rootpanel;
+
+public interface WakeLock {
+
+	void release();
+
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/script/Script.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/script/Script.java
new file mode 100644
index 000000000..dd3650eb5
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/script/Script.java
@@ -0,0 +1,46 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.script;
+
+import org.teamapps.dto.UiComponent;
+import org.teamapps.dto.UiScript;
+import org.teamapps.ux.component.AbstractComponent;
+
+import java.util.List;
+
+public class Script extends AbstractComponent {
+
+	private final String script;
+
+	public Script(String script) {
+		this.script = script;
+	}
+
+	@Override
+	public UiComponent createUiComponent() {
+		UiScript uiScript = new UiScript(script);
+		mapAbstractUiComponentProperties(uiScript);
+		return uiScript;
+	}
+
+	public void callFunction(String name, Object... parameters) {
+		queueCommandIfRendered(() -> new UiScript.CallFunctionCommand(getId(), name, List.of(parameters)));
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/splitpane/SplitDirection.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/splitpane/SplitDirection.java
index 0fec260d7..4a62f6ec9 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/splitpane/SplitDirection.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/splitpane/SplitDirection.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/splitpane/SplitPane.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/splitpane/SplitPane.java
index cdf0175fd..a626f4d9c 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/splitpane/SplitPane.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/splitpane/SplitPane.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -59,26 +59,16 @@ public SplitPane(SplitDirection splitDirection, SplitSizePolicy sizePolicy, floa
 		this.referenceChildSize = referenceChildSize;
 	}
 
-	@Override
-	protected void doDestroy() {
-		if (this.firstChild != null) {
-			this.firstChild.destroy();
-		}
-		if (this.lastChild != null) {
-			this.lastChild.destroy();
-		}
-	}
-
 	@Override
 	public UiComponent createUiComponent() {
-		UiSplitPane uiSplitPane = new UiSplitPane(getId(), splitDirection.toUiSplitDirection(), sizePolicy.toUiSplitSizePolicy());
+		UiSplitPane uiSplitPane = new UiSplitPane(splitDirection.toUiSplitDirection(), sizePolicy.toUiSplitSizePolicy());
 		mapAbstractUiComponentProperties(uiSplitPane);
 		uiSplitPane.setReferenceChildSize(referenceChildSize);
 		if (firstChild != null) {
-			uiSplitPane.setFirstChild(firstChild.createUiComponentReference());
+			uiSplitPane.setFirstChild(firstChild.createUiReference());
 		}
 		if (lastChild != null) {
-			uiSplitPane.setLastChild(lastChild.createUiComponentReference());
+			uiSplitPane.setLastChild(lastChild.createUiReference());
 		}
 		uiSplitPane.setFirstChildMinSize(firstChildMinSize);
 		uiSplitPane.setLastChildMinSize(lastChildMinSize);
@@ -106,7 +96,7 @@ public Component getFirstChild() {
 
 	public void setFirstChild(Component firstChild) {
 		this.firstChild = firstChild;
-		queueCommandIfRendered(() -> new UiSplitPane.SetFirstChildCommand(getId(), firstChild != null ? firstChild.createUiComponentReference() : null));
+		queueCommandIfRendered(() -> new UiSplitPane.SetFirstChildCommand(getId(), firstChild != null ? firstChild.createUiReference() : null));
 	}
 
 	public Component getLastChild() {
@@ -115,7 +105,7 @@ public Component getLastChild() {
 
 	public void setLastChild(Component lastChild) {
 		this.lastChild = lastChild;
-		queueCommandIfRendered(() -> new UiSplitPane.SetLastChildCommand(getId(), lastChild != null ? lastChild.createUiComponentReference() : null));
+		queueCommandIfRendered(() -> new UiSplitPane.SetLastChildCommand(getId(), lastChild != null ? lastChild.createUiReference() : null));
 	}
 
 	public void setSize(float referenceChildSize, SplitSizePolicy sizePolicy) {
@@ -132,8 +122,11 @@ public SplitDirection getSplitDirection() {
 	}
 
 	public void setSplitDirection(SplitDirection splitDirection) {
+		boolean changed = splitDirection != this.splitDirection;
 		this.splitDirection = splitDirection;
-		reRenderIfRendered();
+		if (changed) {
+			reRenderIfRendered();
+		}
 	}
 
 	public SplitSizePolicy getSizePolicy() {
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/splitpane/SplitSizePolicy.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/splitpane/SplitSizePolicy.java
index 252813252..66b586c15 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/splitpane/SplitSizePolicy.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/splitpane/SplitSizePolicy.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/table/AbstractTableModel.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/table/AbstractTableModel.java
index 408919ecc..f94c91723 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/table/AbstractTableModel.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/table/AbstractTableModel.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,14 +19,20 @@
  */
 package org.teamapps.ux.component.table;
 
+import org.teamapps.data.value.Sorting;
 import org.teamapps.event.Event;
+import org.teamapps.ux.component.infiniteitemview.RecordsAddedEvent;
+import org.teamapps.ux.component.infiniteitemview.RecordsChangedEvent;
+import org.teamapps.ux.component.infiniteitemview.RecordsRemovedEvent;
 
 public abstract class AbstractTableModel<RECORD> implements TableModel<RECORD> {
 
 	public final Event<Void> onAllDataChanged = new Event<>();
-	public final Event<RECORD> onRecordAdded = new Event<>();
-	public final Event<RECORD> onRecordUpdated = new Event<>();
-	public final Event<RECORD> onRecordDeleted = new Event<>();
+	public final Event<RecordsAddedEvent<RECORD>> onRecordAdded = new Event<>();
+	public final Event<RecordsChangedEvent<RECORD>> onRecordUpdated = new Event<>();
+	public final Event<RecordsRemovedEvent<RECORD>> onRecordDeleted = new Event<>();
+
+	protected Sorting sorting;
 
 	@Override
 	public Event<Void> onAllDataChanged() {
@@ -34,17 +40,23 @@ public Event<Void> onAllDataChanged() {
 	}
 
 	@Override
-	public Event<RECORD> onRecordAdded() {
+	public Event<RecordsAddedEvent<RECORD>> onRecordsAdded() {
 		return onRecordAdded;
 	}
 
 	@Override
-	public Event<RECORD> onRecordUpdated() {
+	public Event<RecordsChangedEvent<RECORD>> onRecordsChanged() {
 		return onRecordUpdated;
 	}
 
 	@Override
-	public Event<RECORD> onRecordDeleted() {
+	public Event<RecordsRemovedEvent<RECORD>> onRecordsRemoved() {
 		return onRecordDeleted;
 	}
+
+	@Override
+	public void setSorting(Sorting sorting) {
+		this.sorting = sorting;
+		onAllDataChanged.fire();
+	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/table/CellClickedEvent.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/table/CellClickedEvent.java
new file mode 100644
index 000000000..01a16ccf7
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/table/CellClickedEvent.java
@@ -0,0 +1,39 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.table;
+
+public class CellClickedEvent<RECORD, VALUE> {
+
+	private final RECORD record;
+	private final TableColumn<RECORD, VALUE> column;
+
+	public CellClickedEvent(RECORD record, TableColumn<RECORD, VALUE> column) {
+		this.record = record;
+		this.column = column;
+	}
+
+	public RECORD getRecord() {
+		return record;
+	}
+
+	public TableColumn<RECORD, VALUE> getColumn() {
+		return column;
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/table/CellEditingStartedEvent.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/table/CellEditingStartedEvent.java
index c67e03614..d501a7de9 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/table/CellEditingStartedEvent.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/table/CellEditingStartedEvent.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -24,10 +24,10 @@
 public class CellEditingStartedEvent<RECORD, VALUE> {
 
 	private final RECORD recordId;
-	private final TableColumn column;
+	private final TableColumn<RECORD, VALUE> column;
 	private final VALUE currentValue;
 
-	public CellEditingStartedEvent(RECORD record, TableColumn column, VALUE currentValue) {
+	public CellEditingStartedEvent(RECORD record, TableColumn<RECORD, VALUE> column, VALUE currentValue) {
 		this.recordId = record;
 		this.column = column;
 		this.currentValue = currentValue;
@@ -37,7 +37,7 @@ public RECORD getRecord() {
 		return recordId;
 	}
 
-	public TableColumn getColumn() {
+	public TableColumn<RECORD, VALUE> getColumn() {
 		return column;
 	}
 
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/table/CellEditingStoppedEvent.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/table/CellEditingStoppedEvent.java
index 6ffe1f5c2..cf9230cb0 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/table/CellEditingStoppedEvent.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/table/CellEditingStoppedEvent.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -21,12 +21,12 @@
 
 import org.teamapps.ux.component.field.AbstractField;
 
-public class CellEditingStoppedEvent<RECORD> {
+public class CellEditingStoppedEvent<RECORD, VALUE> {
 
 	private final RECORD record;
-	private final TableColumn column;
+	private final TableColumn<RECORD, VALUE> column;
 
-	public CellEditingStoppedEvent(RECORD record, TableColumn column) {
+	public CellEditingStoppedEvent(RECORD record, TableColumn<RECORD, VALUE> column) {
 		this.record = record;
 		this.column = column;
 	}
@@ -35,7 +35,7 @@ public RECORD getRecord() {
 		return record;
 	}
 
-	public TableColumn getColumn() {
+	public TableColumn<RECORD, VALUE> getColumn() {
 		return column;
 	}
 
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/table/FieldOrderChangeEventData.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/table/ColumnOrderChangeEventData.java
similarity index 80%
rename from teamapps-ux/src/main/java/org/teamapps/ux/component/table/FieldOrderChangeEventData.java
rename to teamapps-ux/src/main/java/org/teamapps/ux/component/table/ColumnOrderChangeEventData.java
index 20cc402af..1c3a3444e 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/table/FieldOrderChangeEventData.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/table/ColumnOrderChangeEventData.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -21,16 +21,16 @@
 
 import org.teamapps.ux.component.field.AbstractField;
 
-public class FieldOrderChangeEventData {
-	private final TableColumn column;
+public class ColumnOrderChangeEventData<RECORD, VALUE> {
+	private final TableColumn<RECORD, VALUE> column;
 	private final int position;
 
-	public FieldOrderChangeEventData(TableColumn column, int position) {
+	public ColumnOrderChangeEventData(TableColumn<RECORD, VALUE> column, int position) {
 		this.column = column;
 		this.position = position;
 	}
 
-	public TableColumn getColumn() {
+	public TableColumn<RECORD, VALUE> getColumn() {
 		return column;
 	}
 
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/table/ColumnSizeChangeEventData.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/table/ColumnSizeChangeEventData.java
index a01e30571..36b1f718e 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/table/ColumnSizeChangeEventData.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/table/ColumnSizeChangeEventData.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -21,16 +21,16 @@
 
 import org.teamapps.ux.component.field.AbstractField;
 
-public class ColumnSizeChangeEventData {
+public class ColumnSizeChangeEventData<RECORD, VALUE> {
 	private final int size;
-	private final TableColumn column;
+	private final TableColumn<RECORD, VALUE> column;
 
-	public ColumnSizeChangeEventData(TableColumn column, int size) {
+	public ColumnSizeChangeEventData(TableColumn<RECORD, VALUE> column, int size) {
 		this.column = column;
 		this.size = size;
 	}
 
-	public TableColumn getColumn() {
+	public TableColumn<RECORD, VALUE> getColumn() {
 		return column;
 	}
 
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/table/CustomEqualsAndHashCodeMap.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/table/CustomEqualsAndHashCodeMap.java
new file mode 100644
index 000000000..2f63864d7
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/table/CustomEqualsAndHashCodeMap.java
@@ -0,0 +1,90 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.table;
+
+import org.teamapps.ux.cache.record.EqualsAndHashCode;
+import org.teamapps.ux.cache.record.EqualsHashCodeWrapper;
+
+import java.util.HashMap;
+import java.util.Map;
+import java.util.Objects;
+import java.util.Set;
+import java.util.function.Function;
+import java.util.stream.Collectors;
+
+/**
+ * Note that this class does NOT fulfill the {@link java.util.Map} contract!
+ */
+public class CustomEqualsAndHashCodeMap<K, V> {
+
+	private final Map<EqualsHashCodeWrapper<K>, V> map = new HashMap<>();
+	private final EqualsAndHashCode<K> equalsAndHashCode;
+
+	public CustomEqualsAndHashCodeMap(EqualsAndHashCode<K> equalsAndHashCode) {
+		this.equalsAndHashCode = equalsAndHashCode;
+	}
+
+	public boolean containsKey(K key) {
+		return map.containsKey(keyWrapper(key));
+	}
+
+	public V computeIfAbsent(K key, Function<K, V> mappingFunction) {
+		Objects.requireNonNull(mappingFunction);
+		var keyWrapper = keyWrapper(key);
+		V existingValue = map.get(keyWrapper);
+		if (existingValue == null) {
+			V newValue = mappingFunction.apply(key);
+			map.put(keyWrapper, newValue);
+			return newValue;
+		} else {
+			return existingValue;
+		}
+	}
+
+	public V get(K key) {
+		return map.get(keyWrapper(key));
+	}
+
+	public V getOrDefault(K key, V defaultValue) {
+		return map.getOrDefault(keyWrapper(key), defaultValue);
+	}
+
+	public V remove(K key) {
+		return map.remove(keyWrapper(key));
+	}
+
+	public void clear() {
+		map.clear();
+	}
+
+	public void put(K key, V value) {
+		map.put(keyWrapper(key), value);
+	}
+
+	public Set<K> keySet() {
+		return map.keySet().stream()
+				.map(EqualsHashCodeWrapper::getRecord)
+				.collect(Collectors.toUnmodifiableSet());
+	}
+
+	private EqualsHashCodeWrapper<K> keyWrapper(K key) {
+		return new EqualsHashCodeWrapper<>(key, equalsAndHashCode);
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/table/FieldValueChangedEventData.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/table/FieldValueChangedEventData.java
index 81d3fa863..dc86d4b0a 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/table/FieldValueChangedEventData.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/table/FieldValueChangedEventData.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -24,10 +24,10 @@
 public class FieldValueChangedEventData<RECORD, VALUE> {
 
 	private final RECORD record;
-	private final TableColumn column;
+	private final TableColumn<RECORD, VALUE> column;
 	private final VALUE value;
 
-	public FieldValueChangedEventData(RECORD record, TableColumn column, VALUE value) {
+	public FieldValueChangedEventData(RECORD record, TableColumn<RECORD, VALUE> column, VALUE value) {
 		this.record = record;
 		this.column = column;
 		this.value = value;
@@ -37,7 +37,7 @@ public RECORD getRecord() {
 		return record;
 	}
 
-	public TableColumn getColumn() {
+	public TableColumn<RECORD, VALUE> getColumn() {
 		return column;
 	}
 
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/table/ListTable.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/table/ListTable.java
new file mode 100644
index 000000000..5201d9196
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/table/ListTable.java
@@ -0,0 +1,58 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.table;
+
+import java.util.Collections;
+import java.util.List;
+import java.util.function.Predicate;
+
+public class ListTable<RECORD> extends Table<RECORD> {
+
+	private ListTableModel<RECORD> model;
+
+	public ListTable() {
+		this(Collections.emptyList());
+	}
+
+	public ListTable(List<RECORD> records) {
+		model = new ListTableModel<>(records);
+		setModel(model);
+	}
+
+	public void setRecords(List<RECORD> records) {
+		model.setList(records);
+	}
+
+	public List<RECORD> getRecords() {
+		return model.getAllRecords();
+	}
+
+	public void addRecord(RECORD record) {
+		model.addRecord(record);
+	}
+
+	public void addRecords(List<RECORD> records) {
+		model.addRecords(records);
+	}
+
+	public void setFilter(Predicate<RECORD> filter) {
+		model.setFilter(filter);
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/table/ListTableModel.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/table/ListTableModel.java
index 619bd26aa..f782bfa69 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/table/ListTableModel.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/table/ListTableModel.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,18 +19,24 @@
  */
 package org.teamapps.ux.component.table;
 
-import org.teamapps.data.value.Sorting;
+import org.teamapps.data.extract.BeanPropertyExtractor;
+import org.teamapps.data.extract.PropertyExtractor;
+import org.teamapps.data.value.SortDirection;
+import org.teamapps.ux.component.infiniteitemview.RecordsAddedEvent;
 
 import java.util.ArrayList;
 import java.util.Collections;
+import java.util.Comparator;
 import java.util.List;
 import java.util.function.Predicate;
 import java.util.stream.Collectors;
+import java.util.stream.Stream;
 
 public class ListTableModel<RECORD> extends AbstractTableModel<RECORD> {
 
 	private List<RECORD> list = new ArrayList<>();
 	private Predicate<RECORD> filter = record -> true;
+	private PropertyExtractor<RECORD> sortingPropertyExtractor = new BeanPropertyExtractor<>();
 
 	public ListTableModel() {
 	}
@@ -47,9 +53,13 @@ public void setList(List<RECORD> list) {
 		onAllDataChanged.fire(null);
 	}
 
+	public List<RECORD> getList() {
+		return Collections.unmodifiableList(list);
+	}
+
 	public void addRecord(RECORD record) {
 		list.add(record);
-		onRecordAdded.fire(record);
+		onRecordAdded.fire(new RecordsAddedEvent<>(list.size() - 1, List.of(record)));
 	}
 
 	public void addRecords(List<RECORD> records) {
@@ -69,25 +79,54 @@ public int getCount() {
 	}
 
 	@Override
-	public List<RECORD> getRecords(int startIndex, int length, Sorting sorting) {
-		if (filter == null) {
+	public List<RECORD> getRecords(int startIndex, int length) {
+		if (filter == null && sorting == null) {
 			return list.subList(startIndex, Math.min(list.size(), startIndex + length));
 		} else {
-			return list.stream()
-					.filter(filter)
+			Stream<RECORD> stream = list.stream();
+			if (filter != null) {
+				stream = stream.filter(filter);
+			}
+			if (sorting != null && sortingPropertyExtractor != null) {
+				stream = stream.sorted(valueExtractingComparator());
+			}
+			return stream
 					.skip(startIndex)
 					.limit(length)
 					.collect(Collectors.toList());
 		}
 	}
 
-	public List<RECORD> getAllRecords() {
-		return new ArrayList<>(list);
+	private Comparator<RECORD> valueExtractingComparator() {
+		Comparator<RECORD> comparator = (o1, o2) -> {
+			Object v1 = sortingPropertyExtractor.getValue(o1, sorting.getFieldName());
+			Object v2 = sortingPropertyExtractor.getValue(o2, sorting.getFieldName());
+			if (v1 == null && v2 == null) {
+				return 0;
+			} else if (v1 == null) {
+				return 1;
+			} else if (v2 == null) {
+				return -1;
+			} else { // both are not null
+				if (!(v1 instanceof Comparable) && !(v2 instanceof Comparable)) {
+					return 0;
+				} else if (!(v1 instanceof Comparable)) {
+					return 1;
+				} else if (!(v2 instanceof Comparable)) {
+					return -1;
+				} else {
+					return ((Comparable) v1).compareTo(v2);
+				}
+			}
+		};
+		if (sorting.getSortDirection() == SortDirection.DESC) {
+			comparator = comparator.reversed();
+		}
+		return comparator;
 	}
 
-	@Override
-	public List<RECORD> getChildRecords(RECORD parentRecord, Sorting sorting) {
-		return null;
+	public List<RECORD> getAllRecords() {
+		return new ArrayList<>(list);
 	}
 
 	public Predicate<RECORD> getFilter() {
@@ -98,4 +137,12 @@ public void setFilter(Predicate<RECORD> filter) {
 		this.filter = filter;
 		onAllDataChanged.fire(null);
 	}
+
+	public PropertyExtractor<RECORD> getSortingPropertyExtractor() {
+		return sortingPropertyExtractor;
+	}
+
+	public void setSortingPropertyExtractor(PropertyExtractor<RECORD> sortingPropertyExtractor) {
+		this.sortingPropertyExtractor = sortingPropertyExtractor;
+	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/table/OuterFieldChangedEventData.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/table/OuterFieldChangedEventData.java
index c28751fd7..7e2b1c315 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/table/OuterFieldChangedEventData.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/table/OuterFieldChangedEventData.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/table/RecordAddedEventData.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/table/RecordAddedEventData.java
index a4c863104..6821f735c 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/table/RecordAddedEventData.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/table/RecordAddedEventData.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/table/RecordPropertyUpdatedEventData.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/table/RecordPropertyUpdatedEventData.java
index d1e385c65..ef31a517a 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/table/RecordPropertyUpdatedEventData.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/table/RecordPropertyUpdatedEventData.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/table/SelectionFrame.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/table/SelectionFrame.java
index 49ea046c9..d3717aa1c 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/table/SelectionFrame.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/table/SelectionFrame.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,14 +19,15 @@
  */
 package org.teamapps.ux.component.table;
 
-import org.teamapps.dto.UiSelectionFrame;
+import org.teamapps.common.format.RgbaColor;
 import org.teamapps.common.format.Color;
+import org.teamapps.dto.UiSelectionFrame;
 
-import static org.teamapps.util.UiUtil.createUiColor;
+import java.util.Objects;
 
 public class SelectionFrame {
 
-	private Color color = new Color(102, 174, 232);
+	private Color color = new RgbaColor(102, 174, 232);
 	private int borderWidth = 2;
 	private int animationDuration = 100; // ms
 	private int glowingWidth = 5;
@@ -35,7 +36,7 @@ public class SelectionFrame {
 
 	public UiSelectionFrame createUiSelectionFrame() {
 		UiSelectionFrame uiSelectionFrame = new UiSelectionFrame();
-		uiSelectionFrame.setColor(color != null ? createUiColor(color) : null);
+		uiSelectionFrame.setColor(color != null ? color.toHtmlColorString() : null);
 		uiSelectionFrame.setBorderWidth(borderWidth);
 		uiSelectionFrame.setAnimationDuration(animationDuration);
 		uiSelectionFrame.setGlowingWidth(glowingWidth);
@@ -91,4 +92,21 @@ public boolean isFullRow() {
 	public void setFullRow(boolean fullRow) {
 		this.fullRow = fullRow;
 	}
+
+	@Override
+	public boolean equals(Object o) {
+		if (this == o) {
+			return true;
+		}
+		if (o == null || getClass() != o.getClass()) {
+			return false;
+		}
+		SelectionFrame that = (SelectionFrame) o;
+		return borderWidth == that.borderWidth && animationDuration == that.animationDuration && glowingWidth == that.glowingWidth && shadowWidth == that.shadowWidth && fullRow == that.fullRow && Objects.equals(color, that.color);
+	}
+
+	@Override
+	public int hashCode() {
+		return Objects.hash(color, borderWidth, animationDuration, glowingWidth, shadowWidth, fullRow);
+	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/table/SortingChangedEventData.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/table/SortingChangedEventData.java
index 02bbc16f6..e516e968a 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/table/SortingChangedEventData.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/table/SortingChangedEventData.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/table/Table.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/table/Table.java
index 17af97d60..7969024d2 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/table/Table.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/table/Table.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,70 +19,72 @@
  */
 package org.teamapps.ux.component.table;
 
-import org.jetbrains.annotations.NotNull;
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
 import org.teamapps.common.format.Color;
-import org.teamapps.data.extract.BeanPropertyExtractor;
-import org.teamapps.data.extract.BeanPropertyInjector;
-import org.teamapps.data.extract.PropertyExtractor;
-import org.teamapps.data.extract.PropertyInjector;
+import org.teamapps.data.extract.*;
 import org.teamapps.data.value.SortDirection;
 import org.teamapps.data.value.Sorting;
-import org.teamapps.dto.UiComponent;
-import org.teamapps.dto.UiEvent;
-import org.teamapps.dto.UiFieldMessage;
-import org.teamapps.dto.UiTable;
-import org.teamapps.dto.UiTableClientRecord;
-import org.teamapps.dto.UiTableColumn;
-import org.teamapps.dto.UiTableDataRequest;
+import org.teamapps.dto.*;
 import org.teamapps.event.Event;
-import org.teamapps.event.EventListener;
-import org.teamapps.ux.cache.CacheManipulationHandle;
-import org.teamapps.ux.cache.ClientRecordCache;
-import org.teamapps.ux.component.AbstractComponent;
-import org.teamapps.ux.component.Container;
+import org.teamapps.icons.Icon;
+import org.teamapps.ux.cache.record.DuplicateEntriesException;
+import org.teamapps.ux.cache.record.EqualsAndHashCode;
+import org.teamapps.ux.cache.record.ItemRange;
+import org.teamapps.ux.component.Component;
 import org.teamapps.ux.component.field.AbstractField;
 import org.teamapps.ux.component.field.FieldMessage;
-
-import java.util.ArrayList;
-import java.util.Collections;
-import java.util.HashMap;
-import java.util.HashSet;
-import java.util.List;
-import java.util.Map;
-import java.util.Objects;
-import java.util.Set;
+import org.teamapps.ux.component.field.validator.FieldValidator;
+import org.teamapps.ux.component.infiniteitemview.AbstractInfiniteListComponent;
+import org.teamapps.ux.component.infiniteitemview.RecordsChangedEvent;
+import org.teamapps.ux.component.infiniteitemview.RecordsRemovedEvent;
+import org.teamapps.ux.component.template.Template;
+
+import java.util.*;
+import java.util.function.Function;
 import java.util.stream.Collectors;
+import java.util.stream.Stream;
 
-public class Table<RECORD> extends AbstractComponent implements Container {
+public class Table<RECORD> extends AbstractInfiniteListComponent<RECORD, TableModel<RECORD>> implements Component {
 
 	private static final Logger LOGGER = LoggerFactory.getLogger(Table.class);
 
-	public final Event<CellEditingStartedEvent<RECORD, Object>> onCellEditingStarted = new Event<>();
-	public final Event<CellEditingStoppedEvent<RECORD>> onCellEditingStopped = new Event<>();
-	public final Event<FieldValueChangedEventData<RECORD, Object>> onCellValueChanged = new Event<>();
-	public final Event<RECORD> onRowSelected = new Event<>();
+	public final Event<CellEditingStartedEvent<RECORD, ?>> onCellEditingStarted = new Event<>();
+	public final Event<CellEditingStoppedEvent<RECORD, ?>> onCellEditingStopped = new Event<>();
+	public final Event<FieldValueChangedEventData<RECORD, ?>> onCellValueChanged = new Event<>();
+	/**
+	 * Fired when any number of rows is selected by the user.
+	 */
+	public final Event<List<RECORD>> onRowsSelected = new Event<>();
+	/**
+	 * Fired only when a single row is selected by the user.
+	 */
+	public final Event<RECORD> onSingleRowSelected = new Event<>();
+	/**
+	 * Fired only when multiple rows are selected by the user.
+	 */
 	public final Event<List<RECORD>> onMultipleRowsSelected = new Event<>();
+
+	public final Event<CellClickedEvent<RECORD, ?>> onCellClicked = new Event<>();
 	public final Event<SortingChangedEventData> onSortingChanged = new Event<>();
 	public final Event<TableDataRequestEventData> onTableDataRequest = new Event<>();
-	public final Event<FieldOrderChangeEventData> onFieldOrderChange = new Event<>();
-	public final Event<ColumnSizeChangeEventData> onColumnSizeChange = new Event<>();
+	public final Event<ColumnOrderChangeEventData<RECORD, ?>> onColumnOrderChange = new Event<>();
+	public final Event<ColumnSizeChangeEventData<RECORD, ?>> onColumnSizeChange = new Event<>();
 
-	private TableModel<RECORD> model = new ListTableModel<>(Collections.emptyList());
-	private PropertyExtractor<RECORD> propertyExtractor = new BeanPropertyExtractor<>();
+	private PropertyProvider<RECORD> propertyProvider = new BeanPropertyExtractor<>();
+	private Function<RECORD, Map<String, String>> rowCssStyleProvider = record -> Map.of();
 	private PropertyInjector<RECORD> propertyInjector = new BeanPropertyInjector<>();
-	private final ClientRecordCache<RECORD, UiTableClientRecord> clientRecordCache;
 
-	private int pageSize = 50;
+	private int clientRecordIdCounter = 0;
+
+	private List<RECORD> selectedRecords = List.of();
+	private TableCellCoordinates<RECORD> activeEditorCell;
 
-	private RECORD selectedRecord;
-	private final List<RECORD> selectedRecords = new ArrayList<>();
-	private Map<RECORD, Map<String, Object>> transientChangesByRecordAndPropertyName = new HashMap<>();
-	private Map<RECORD, Map<String, List<FieldMessage>>> cellMessages = new HashMap<>();
-	private Map<RECORD, Set<String>> markedCells = new HashMap<>();
+	private CustomEqualsAndHashCodeMap<RECORD, Map<String, Object>> transientChangesByRecordAndPropertyName = new CustomEqualsAndHashCodeMap<>(customEqualsAndHashCode);
+	private CustomEqualsAndHashCodeMap<RECORD, Map<String, List<FieldMessage>>> cellMessages = new CustomEqualsAndHashCodeMap<>(customEqualsAndHashCode);
+	private CustomEqualsAndHashCodeMap<RECORD, Set<String>> markedCells = new CustomEqualsAndHashCodeMap<>(customEqualsAndHashCode);
 
-	private List<TableColumn> columns = new ArrayList<>();
+	private final List<TableColumn<RECORD, ?>> columns = new ArrayList<>();
 
 	private boolean displayAsList; // list has no cell borders, table has. selection policy: list = row selection, table = cell selection
 	private boolean forceFitWidth; //if true, force the widths of all columns to fit into the available space of the list
@@ -92,9 +94,10 @@ public class Table<RECORD> extends AbstractComponent implements Container {
 	private boolean allowMultiRowSelection = false;
 	private boolean showRowCheckBoxes; //if true, show check boxes on the left
 	private boolean showNumbering; //if true, show numbering on the left
+	private boolean textSelectionEnabled = true;
+	private boolean autoHeight = false;
 
-	private String sortField; //if available the table is initially sorted by this field
-	private SortDirection sortDirection = SortDirection.ASC;
+	private Sorting sorting; // nullable
 
 	private boolean editable; //only valid for tables
 	private boolean ensureEmptyLastRow; //if true, there is always an empty last row, as soon as any data is inserted into the empty row a new empty row is inserted
@@ -109,89 +112,74 @@ public class Table<RECORD> extends AbstractComponent implements Container {
 
 	private boolean showHeaderRow = false;
 	private int headerRowHeight = 28;
-	private Map<String, AbstractField> headerRowFields = new HashMap<>(0);
 
 	// ----- footer -----
 
 	private boolean showFooterRow = false;
 	private int footerRowHeight = 28;
-	private Map<String, AbstractField> footerRowFields = new HashMap<>(0);
 
-	// ----- listeners -----
-
-	// needs to be a field for reference equality (sad but true, java method references are only syntactic sugar for lambdas)
-	private EventListener<Void> onAllDataChangedListener = this::onAllDataChanged;
-	private EventListener<RECORD> onRecordAddedListener = this::onRecordAdded;
-	private EventListener<RECORD> onRecordDeletedListener = this::onRecordDeleted;
-	private EventListener<RECORD> onRecordUpdatedListener = this::onRecordUpdated;
-
-	private List<Integer> viewportDisplayedRecordClientIds;
-
-	private TableCellCoordinates<RECORD> activeEditorCell;
+	private final List<RECORD> topNonModelRecords = new ArrayList<>();
+	private final List<RECORD> bottomNonModelRecords = new ArrayList<>();
 
-	private List<RECORD> topNonModelRecords = new ArrayList<>();
-	private List<RECORD> bottomNonModelRecords = new ArrayList<>();
+	private Function<RECORD, Component> contextMenuProvider = null;
+	private int lastSeenContextMenuRequestId;
+	private int rowBorderWidth;
 
 	public Table() {
 		this(new ArrayList<>());
 	}
 
-	public Table(List<TableColumn> columns) {
-		super();
+	public Table(List<TableColumn<RECORD, ?>> columns) {
+		super(new ListTableModel<>());
 		columns.forEach(this::addColumn);
-
-		clientRecordCache = new ClientRecordCache<>(this::createUiTableClientRecord);
-		clientRecordCache.setMaxCapacity(200);
-		clientRecordCache.setPurgeDecider((record, clientId) -> viewportDisplayedRecordClientIds == null || !viewportDisplayedRecordClientIds.contains(clientId)); //todo: fix null handling!
-		clientRecordCache.setPurgeListener(purgedRecordIds -> {
-			if (isRendered()) {
-				getSessionContext().queueCommand(new UiTable.RemoveDataCommand(getId(), purgedRecordIds.getResult()), aVoid -> purgedRecordIds.commit());
-			} else {
-				purgedRecordIds.commit();
-			}
-		});
 	}
 
 	public static <RECORD> Table<RECORD> create() {
 		return new Table<>();
 	}
 
-	@Override
-	protected void doDestroy() {
-		this.unregisterModelEventListeners();
-		this.headerRowFields.values().forEach(AbstractField::destroy);
-		this.footerRowFields.values().forEach(AbstractField::destroy);
-		this.columns.forEach(c -> c.getField().destroy());
+	public void addColumn(TableColumn<RECORD, ?> column) {
+		addColumn(column, columns.size());
 	}
 
-	public void addColumn(TableColumn column) {
-		addColumn(column, columns.size());
+	public void addColumn(TableColumn<RECORD, ?> column, int index) {
+		addColumns(List.of(column), index);
+	}
+
+	public <VALUE> TableColumn<RECORD, VALUE> addColumn(String propertyName, String title, AbstractField<VALUE> field) {
+		return addColumn(propertyName, null, title, field, TableColumn.DEFAULT_WIDTH);
+	}
+
+	public <VALUE> TableColumn<RECORD, VALUE> addColumn(String propertyName, Icon<?, ?> icon, String title, AbstractField<VALUE> field) {
+		return addColumn(propertyName, icon, title, field, TableColumn.DEFAULT_WIDTH);
+	}
+
+	public <VALUE> TableColumn<RECORD, VALUE> addColumn(String propertyName, Icon<?, ?> icon, String title, AbstractField<VALUE> field, int defaultWidth) {
+		TableColumn<RECORD, VALUE> column = new TableColumn<>(propertyName, icon, title, field, defaultWidth);
+		addColumn(column);
+		return column;
 	}
 
-	public void addColumn(TableColumn column, int index) {
-		addColumns(Collections.singletonList(column), index);
+	public <VALUE> TableColumn<RECORD, VALUE> addColumn(String propertyName, Icon<?, ?> icon, String title, Template displayTemplate) {
+		TableColumn<RECORD, VALUE> column = new TableColumn<>(propertyName, icon, title, displayTemplate);
+		addColumn(column);
+		return column;
 	}
 
-	public void addColumns(List<TableColumn> newColumns, int index) {
+	public void addColumns(List<TableColumn<RECORD, ?>> newColumns, int index) {
 		this.columns.addAll(index, newColumns);
 		newColumns.forEach(column -> {
 			column.setTable(this);
-			AbstractField field = column.getField();
+			AbstractField<?> field = column.getField();
 			field.setParent(this);
-			field.onValueChanged.addListener(value -> {
-				transientChangesByRecordAndPropertyName
-						.computeIfAbsent(selectedRecord, idValue -> new HashMap<>())
-						.put(column.getPropertyName(), value);
-				onCellValueChanged.fire(new FieldValueChangedEventData<>(selectedRecord, column, value));
-			});
 		});
 		if (isRendered()) {
 			getSessionContext().queueCommand(
 					new UiTable.AddColumnsCommand(getId(), newColumns.stream()
-							.map(c -> c.createUiTableColumn())
-							.collect(Collectors.toList()), index),
-					aVoid -> this.clientRecordCache.clear().commit()
+							.map(TableColumn::createUiTableColumn)
+							.collect(Collectors.toList()), index)
 			);
+			refreshData();
 		}
 	}
 
@@ -202,28 +190,33 @@ public void removeColumn(String propertyName) {
 				.ifPresent(this::removeColumn);
 	}
 
-	public void removeColumn(TableColumn column) {
+	public void removeColumn(TableColumn<RECORD, ?> column) {
 		this.removeColumns(Collections.singletonList(column));
 	}
 
-	public void removeColumns(List<TableColumn> obsoleteColumns) {
+	public void removeColumns(List<TableColumn<RECORD, ?>> obsoleteColumns) {
 		this.columns.removeAll(obsoleteColumns);
 		if (isRendered()) {
 			getSessionContext().queueCommand(
 					new UiTable.RemoveColumnsCommand(getId(), obsoleteColumns.stream()
-							.map(c -> c.getPropertyName())
-							.collect(Collectors.toList())),
-					aVoid -> this.clientRecordCache.clear().commit()
+							.map(TableColumn::getPropertyName)
+							.collect(Collectors.toList()))
 			);
 		}
 	}
 
+	@Override
+	protected void preRegisteringModel(TableModel<RECORD> model) {
+		// this should be done before registering the model, so we don't have to handle the corresponding model events
+		model.setSorting(sorting);
+	}
+
 	@Override
 	public UiComponent createUiComponent() {
 		List<UiTableColumn> columns = this.columns.stream()
-				.map(tableColumn -> tableColumn.createUiTableColumn())
+				.map(TableColumn::createUiTableColumn)
 				.collect(Collectors.toList());
-		UiTable uiTable = new UiTable(getId(), columns);
+		UiTable uiTable = new UiTable(columns);
 		mapAbstractUiComponentProperties(uiTable);
 		uiTable.setSelectionFrame(selectionFrame != null ? selectionFrame.createUiSelectionFrame() : null);
 		uiTable.setDisplayAsList(displayAsList);
@@ -234,45 +227,55 @@ public UiComponent createUiComponent() {
 		uiTable.setAllowMultiRowSelection(allowMultiRowSelection);
 		uiTable.setShowRowCheckBoxes(showRowCheckBoxes);
 		uiTable.setShowNumbering(showNumbering);
-
-		List<RECORD> records = retrieveRecords(0, pageSize);
-		CacheManipulationHandle<List<UiTableClientRecord>> cacheResponse = clientRecordCache.replaceRecords(records);
-		cacheResponse.commit();
-		uiTable.setTableData(cacheResponse.getResult());
-
-		uiTable.setTotalNumberOfRecords(getTotalRecordsCount());
-		uiTable.setSortField(sortField);
-		uiTable.setSortDirection(sortDirection.toUiSortDirection());
+		uiTable.setTextSelectionEnabled(textSelectionEnabled);
+		uiTable.setSortField(sorting != null ? sorting.getFieldName() : null);
+		uiTable.setSortDirection(sorting != null ? sorting.getSortDirection().toUiSortDirection() : null);
 		uiTable.setEditable(editable);
 		uiTable.setTreeMode(treeMode);
 		uiTable.setIndentedColumnName(indentedColumnName);
 		uiTable.setIndentation(indentation);
 		uiTable.setShowHeaderRow(showHeaderRow);
 		uiTable.setHeaderRowHeight(headerRowHeight);
-		uiTable.setHeaderRowFields(this.headerRowFields.entrySet().stream()
-				.collect(Collectors.toMap(e -> e.getKey(), e -> e.getValue().createUiComponentReference())));
 		uiTable.setShowFooterRow(showFooterRow);
 		uiTable.setFooterRowHeight(footerRowHeight);
-		uiTable.setFooterRowFields(this.footerRowFields.entrySet().stream()
-				.collect(Collectors.toMap(e -> e.getKey(), e -> e.getValue().createUiComponentReference())));
+		uiTable.setContextMenuEnabled(contextMenuProvider != null);
+		uiTable.setAutoHeight(autoHeight);
 		return uiTable;
 	}
 
 	@Override
 	public void handleUiEvent(UiEvent event) {
 		switch (event.getUiEventType()) {
-			case UI_TABLE_ROW_SELECTED:
-				UiTable.RowSelectedEvent rowSelectedEvent = (UiTable.RowSelectedEvent) event;
-				selectedRecord = clientRecordCache.getRecordByClientId(rowSelectedEvent.getRecordId());
-				selectedRecords.clear();
-				this.onRowSelected.fire(selectedRecord);
+			case UI_TABLE_ROWS_SELECTED: {
+				UiTable.RowsSelectedEvent rowsSelectedEvent = (UiTable.RowsSelectedEvent) event;
+				selectedRecords = renderedRecords.getRecords(rowsSelectedEvent.getRecordIds());
+				this.onRowsSelected.fire(selectedRecords);
+				if (selectedRecords.size() == 1) {
+					this.onSingleRowSelected.fire(selectedRecords.get(0));
+				} else if (selectedRecords.size() > 1) {
+					this.onMultipleRowsSelected.fire(selectedRecords);
+				}
+				break;
+			}
+			case UI_TABLE_CELL_CLICKED: {
+				UiTable.CellClickedEvent cellClickedEvent = (UiTable.CellClickedEvent) event;
+				RECORD record = renderedRecords.getRecord(cellClickedEvent.getRecordId());
+				TableColumn<RECORD, ?> column = getColumnByPropertyName(cellClickedEvent.getColumnPropertyName());
+				if (record != null && column != null) {
+					this.onCellClicked.fire(new CellClickedEvent<>(record, column));
+				}
 				break;
+			}
 			case UI_TABLE_CELL_EDITING_STARTED: {
 				UiTable.CellEditingStartedEvent editingStartedEvent = (UiTable.CellEditingStartedEvent) event;
-				RECORD record = clientRecordCache.getRecordByClientId(editingStartedEvent.getRecordId());
+				RECORD record = renderedRecords.getRecord(editingStartedEvent.getRecordId());
+				TableColumn<RECORD, ?> column = getColumnByPropertyName(editingStartedEvent.getColumnPropertyName());
+				if (record == null || column == null) {
+					return;
+				}
 				this.activeEditorCell = new TableCellCoordinates<>(record, editingStartedEvent.getColumnPropertyName());
-				TableColumn column = getColumnByPropertyName(editingStartedEvent.getColumnPropertyName());
-				Object cellValue = getCellValue(record, editingStartedEvent.getColumnPropertyName());
+				this.selectedRecords = List.of(activeEditorCell.getRecord());
+				Object cellValue = getCellValue(record, column);
 				AbstractField activeEditorField = getActiveEditorField();
 				activeEditorField.setValue(cellValue);
 				List<FieldMessage> cellMessages = getCellMessages(record, editingStartedEvent.getColumnPropertyName());
@@ -282,86 +285,119 @@ public void handleUiEvent(UiEvent event) {
 				}
 				List<FieldMessage> messages = new ArrayList<>(cellMessages);
 				messages.addAll(columnMessages);
-				activeEditorField.setFieldMessages(messages);
-				this.onCellEditingStarted.fire(new CellEditingStartedEvent<>(clientRecordCache.getRecordByClientId(editingStartedEvent.getRecordId()), column, cellValue));
+				activeEditorField.setCustomFieldMessages(messages);
+				this.onCellEditingStarted.fire(new CellEditingStartedEvent(record, column, cellValue));
 				break;
 			}
 			case UI_TABLE_CELL_EDITING_STOPPED: {
 				this.activeEditorCell = null;
 				UiTable.CellEditingStoppedEvent editingStoppedEvent = (UiTable.CellEditingStoppedEvent) event;
-				TableColumn column = getColumnByPropertyName(editingStoppedEvent.getColumnPropertyName());
-				this.onCellEditingStopped.fire(new CellEditingStoppedEvent<>(clientRecordCache.getRecordByClientId(editingStoppedEvent.getRecordId()), column));
+				RECORD record = renderedRecords.getRecord(editingStoppedEvent.getRecordId());
+				TableColumn<RECORD, ?> column = getColumnByPropertyName(editingStoppedEvent.getColumnPropertyName());
+				if (record == null || column == null) {
+					return;
+				}
+				this.onCellEditingStopped.fire(new CellEditingStoppedEvent<>(record, column));
 				break;
 			}
-			case UI_TABLE_MULTIPLE_ROWS_SELECTED:
-				selectedRecord = null;
-				UiTable.MultipleRowsSelectedEvent multipleRowsSelectedEvent = (UiTable.MultipleRowsSelectedEvent) event;
-				selectedRecords.clear();
-				selectedRecords.addAll(multipleRowsSelectedEvent.getRecordIds().stream().map(id -> clientRecordCache.getRecordByClientId(id)).collect(Collectors.toList()));
-				this.onMultipleRowsSelected.fire(selectedRecords);
+			case UI_TABLE_CELL_VALUE_CHANGED: {
+				UiTable.CellValueChangedEvent changeEvent = (UiTable.CellValueChangedEvent) event;
+				RECORD record = renderedRecords.getRecord(changeEvent.getRecordId());
+				TableColumn<RECORD, ?> column = this.getColumnByPropertyName(changeEvent.getColumnPropertyName());
+				if (record == null || column == null) {
+					return;
+				}
+				Object value = column.getField().convertUiValueToUxValue(changeEvent.getValue());
+				transientChangesByRecordAndPropertyName
+						.computeIfAbsent(record, idValue -> new HashMap<>())
+						.put(column.getPropertyName(), value);
+				onCellValueChanged.fire(new FieldValueChangedEventData(record, column, value));
 				break;
+			}
 			case UI_TABLE_SORTING_CHANGED:
 				UiTable.SortingChangedEvent sortingChangedEvent = (UiTable.SortingChangedEvent) event;
-				sortField = sortingChangedEvent.getSortField();
-				sortDirection = SortDirection.fromUiSortDirection(sortingChangedEvent.getSortDirection());
+				var sortField = sortingChangedEvent.getSortField();
+				var sortDirection = SortDirection.fromUiSortDirection(sortingChangedEvent.getSortDirection());
+				this.sorting = sortField != null && sortDirection != null ? new Sorting(sortField, sortDirection) : null;
+				getModel().setSorting(sorting);
 				onSortingChanged.fire(new SortingChangedEventData(sortingChangedEvent.getSortField(), SortDirection.fromUiSortDirection(sortingChangedEvent.getSortDirection())));
-				refreshData(false, false, false);
-				break;
-			case UI_TABLE_DISPLAYED_RANGE_CHANGED:
-				UiTable.DisplayedRangeChangedEvent rangeChangedEvent = (UiTable.DisplayedRangeChangedEvent) event;
-				viewportDisplayedRecordClientIds = rangeChangedEvent.getDisplayedRecordIds();
-				if (rangeChangedEvent.getDataRequest() != null) {
-					UiTableDataRequest dataRequest = rangeChangedEvent.getDataRequest();
-					SortDirection sortDirection = SortDirection.fromUiSortDirection(dataRequest.getSortDirection());
-					int startIndex = dataRequest.getStartIndex();
-					int requestedLength = dataRequest.getLength();
-					onTableDataRequest.fire(new TableDataRequestEventData(startIndex, requestedLength, dataRequest.getSortField(), sortDirection));
-					int pagedStartIndex = startIndex - (startIndex % pageSize);
-					int endIndex = startIndex + requestedLength;
-					int pagedEndIndex = endIndex % pageSize == 0 ? endIndex : endIndex + pageSize - (endIndex % pageSize);
-					this.sendDataToClient(pagedStartIndex, pagedEndIndex, false);
-				}
 				break;
-			case UI_TABLE_REQUEST_NESTED_DATA:
-				UiTable.RequestNestedDataEvent nestedDataEvent = (UiTable.RequestNestedDataEvent) event;
-				List<RECORD> childRecords = model.getChildRecords(clientRecordCache.getRecordByClientId(nestedDataEvent.getRecordId()), getSorting());
-				CacheManipulationHandle<List<UiTableClientRecord>> cacheResponse = clientRecordCache.addRecords(childRecords);
-				if (isRendered()) {
-					getSessionContext().queueCommand(new UiTable.SetChildrenDataCommand(getId(), nestedDataEvent.getRecordId(), cacheResponse.getResult()), aVoid -> cacheResponse.commit());
-				} else {
-					cacheResponse.commit();
+			case UI_TABLE_DISPLAYED_RANGE_CHANGED: {
+				UiTable.DisplayedRangeChangedEvent d = (UiTable.DisplayedRangeChangedEvent) event;
+				try {
+					handleScrollOrResize(ItemRange.startLength(d.getStartIndex(), d.getLength()));
+				} catch (DuplicateEntriesException e) {
+					// if the model returned a duplicate entry while scrolling, the underlying data apparently changed.
+					// So try to refresh the whole data instead.
+					LOGGER.warn("DuplicateEntriesException while retrieving data from model. This means the underlying data of the model has changed without the model notifying this component, so will refresh the whole data of this component.");
+					refreshData();
 				}
 				break;
+			}
 			case UI_TABLE_FIELD_ORDER_CHANGE: {
 				UiTable.FieldOrderChangeEvent fieldOrderChangeEvent = (UiTable.FieldOrderChangeEvent) event;
-				TableColumn column = getColumnByPropertyName(fieldOrderChangeEvent.getColumnPropertyName());
-				onFieldOrderChange.fire(new FieldOrderChangeEventData(column, fieldOrderChangeEvent.getPosition()));
+				TableColumn<RECORD, ?> column = getColumnByPropertyName(fieldOrderChangeEvent.getColumnPropertyName());
+				onColumnOrderChange.fire(new ColumnOrderChangeEventData<>(column, fieldOrderChangeEvent.getPosition()));
 				break;
 			}
 			case UI_TABLE_COLUMN_SIZE_CHANGE: {
 				UiTable.ColumnSizeChangeEvent columnSizeChangeEvent = (UiTable.ColumnSizeChangeEvent) event;
-				TableColumn column = getColumnByPropertyName(columnSizeChangeEvent.getColumnPropertyName());
-				onColumnSizeChange.fire(new ColumnSizeChangeEventData(column, columnSizeChangeEvent.getSize()));
+				TableColumn<RECORD, ?> column = getColumnByPropertyName(columnSizeChangeEvent.getColumnPropertyName());
+				onColumnSizeChange.fire(new ColumnSizeChangeEventData<>(column, columnSizeChangeEvent.getSize()));
+				break;
+			}
+			case UI_TABLE_CONTEXT_MENU_REQUESTED: {
+				UiTable.ContextMenuRequestedEvent e = (UiTable.ContextMenuRequestedEvent) event;
+				lastSeenContextMenuRequestId = e.getRequestId();
+				RECORD record = renderedRecords.getRecord(e.getRecordId());
+				if (record != null && contextMenuProvider != null) {
+					Component contextMenuContent = contextMenuProvider.apply(record);
+					if (contextMenuContent != null) {
+						queueCommandIfRendered(() -> new UiInfiniteItemView.SetContextMenuContentCommand(getId(), e.getRequestId(), contextMenuContent.createUiReference()));
+					} else {
+						queueCommandIfRendered(() -> new UiInfiniteItemView.CloseContextMenuCommand(getId(), e.getRequestId()));
+					}
+				} else {
+					closeContextMenu();
+				}
 				break;
 			}
 		}
 	}
 
-	private Object getCellValue(RECORD record, String columnPropertyName) {
+	private <VALUE> VALUE getCellValue(RECORD record, TableColumn<RECORD, VALUE> column) {
 		Map<String, Object> changesForRecord = transientChangesByRecordAndPropertyName.getOrDefault(record, Collections.emptyMap());
-		boolean changed = changesForRecord.containsKey(columnPropertyName);
+		boolean changed = changesForRecord.containsKey(column.getPropertyName());
 		Object cellValue;
 		if (changed) { // associated value might be null!!
-			cellValue = changesForRecord.get(columnPropertyName);
+			cellValue = changesForRecord.get(column.getPropertyName());
+		} else {
+			cellValue = extractRecordProperty(record, column);
+		}
+		return (VALUE) cellValue;
+	}
+
+	private <VALUE> VALUE extractRecordProperty(RECORD record, TableColumn<RECORD, VALUE> column) {
+		if (column.getValueExtractor() != null) {
+			return column.getValueExtractor().extract(record);
 		} else {
-			cellValue = propertyExtractor.getValue(record, columnPropertyName);
+			return (VALUE) propertyProvider.getValues(record, Collections.singletonList(column.getPropertyName())).get(column.getPropertyName());
 		}
-		return cellValue;
 	}
 
-	public List<String> getColumnNames() {
+	private Map<String, Object> extractRecordProperties(RECORD record) {
+		Map<Boolean, List<TableColumn<RECORD, ?>>> columnsWithAndWithoutValueExtractor = columns.stream().collect(Collectors.partitioningBy(c -> c.getValueExtractor() != null));
+		Map<String, Object> valuesByPropertyName = new HashMap<>(propertyProvider.getValues(record, columnsWithAndWithoutValueExtractor.get(false).stream()
+				.map(TableColumn::getPropertyName)
+				.collect(Collectors.toList())));
+		columnsWithAndWithoutValueExtractor.get(true).forEach(recordTableColumn -> valuesByPropertyName.put(recordTableColumn.getPropertyName(),
+				recordTableColumn.getValueExtractor().extract(record)));
+		return valuesByPropertyName;
+	}
+
+	public List<String> getColumnPropertyNames() {
 		return columns.stream()
-				.map(tableColumn -> tableColumn.getPropertyName())
+				.map(TableColumn::getPropertyName)
 				.collect(Collectors.toList());
 	}
 
@@ -369,7 +405,7 @@ public TableCellCoordinates<RECORD> getActiveEditorCell() {
 		return activeEditorCell;
 	}
 
-	public AbstractField getActiveEditorField() {
+	public AbstractField<?> getActiveEditorField() {
 		if (activeEditorCell != null) {
 			return getColumnByPropertyName(activeEditorCell.getPropertyName()).getField();
 		} else {
@@ -379,9 +415,10 @@ public AbstractField getActiveEditorField() {
 
 	public void setCellValue(RECORD record, String propertyName, Object value) {
 		transientChangesByRecordAndPropertyName.computeIfAbsent(record, record1 -> new HashMap<>()).put(propertyName, value);
-		Integer uiRecordIdOrNull = clientRecordCache.getUiRecordIdOrNull(record);
+		UiIdentifiableClientRecord uiRecordIdOrNull = renderedRecords.getUiRecord(record);
 		if (uiRecordIdOrNull != null) {
-			queueCommandIfRendered(() -> new UiTable.SetCellValueCommand(getId(), uiRecordIdOrNull, propertyName, value));
+			final Object uiValue = getColumnByPropertyName(propertyName).getField().convertUxValueToUiValue(value);
+			queueCommandIfRendered(() -> new UiTable.SetCellValueCommand(getId(), uiRecordIdOrNull.getId(), propertyName, uiValue));
 		}
 	}
 
@@ -398,15 +435,15 @@ public void setCellMarked(RECORD record, String propertyName, boolean mark) {
 				markedCells.remove(record);
 			}
 		}
-		Integer uiRecordIdOrNull = clientRecordCache.getUiRecordIdOrNull(record);
+		UiIdentifiableClientRecord uiRecordIdOrNull = renderedRecords.getUiRecord(record);
 		if (uiRecordIdOrNull != null) {
-			queueCommandIfRendered(() -> new UiTable.MarkTableFieldCommand(getId(), uiRecordIdOrNull, propertyName, mark));
+			queueCommandIfRendered(() -> new UiTable.MarkTableFieldCommand(getId(), uiRecordIdOrNull.getId(), propertyName, mark));
 		}
 	}
 
 	public void clearRecordMarkings(RECORD record) {
 		markedCells.remove(record);
-		updateRecordOnClientSide(record);
+		updateSingleRecordOnClient(record);
 	}
 
 	public void clearAllCellMarkings() {
@@ -416,21 +453,74 @@ public void clearAllCellMarkings() {
 
 	// TODO implement using decider? more general formatting options?
 	public void setRecordBold(RECORD record, boolean bold) {
-		Integer uiRecordIdOrNull = clientRecordCache.getUiRecordIdOrNull(record);
+		UiIdentifiableClientRecord uiRecordIdOrNull = renderedRecords.getUiRecord(record);
 		if (uiRecordIdOrNull != null) {
-			queueCommandIfRendered(() -> new UiTable.SetRecordBoldCommand(getId(), uiRecordIdOrNull, bold));
+			queueCommandIfRendered(() -> new UiTable.SetRecordBoldCommand(getId(), uiRecordIdOrNull.getId(), bold));
 		}
 	}
 
-	public void selectSingleRow(RECORD record, boolean scrollToRecord) {
-		this.selectedRecord = record;
-		this.selectedRecords.clear();
-		queueCommandIfRendered(() -> new UiTable.SelectRowsCommand(getId(), clientRecordCache.getUiRecordIds(getSelectedRecords()), scrollToRecord));
+	public void setSelectedRecord(RECORD record) {
+		setSelectedRecord(record, false);
+	}
+
+	public void setSelectedRecord(RECORD record, boolean scrollToRecordIfAvailable) {
+		setSelectedRecords(record != null ? List.of(record) : List.of(), scrollToRecordIfAvailable);
+	}
+
+	public void setSelectedRecords(List<RECORD> records) {
+		setSelectedRecords(records, false);
+	}
+
+	public void setSelectedRecords(List<RECORD> records, boolean scrollToFirstIfAvailable) {
+		this.selectedRecords = records == null ? List.of() : List.copyOf(records);
+		queueCommandIfRendered(() -> new UiTable.SelectRecordsCommand(getId(), renderedRecords.getUiRecordIds(selectedRecords), scrollToFirstIfAvailable));
 	}
 
-	/*package-private*/ void updateColumnMessages(TableColumn tableColumn) {
+	public void setSelectedRow(int rowIndex) {
+		setSelectedRow(rowIndex, false);
+	}
+
+	public void setSelectedRow(int rowIndex, boolean scrollTo) {
+		getRecordByRowIndex(rowIndex).ifPresentOrElse(record -> {
+			this.selectedRecords = List.of(record);
+			queueCommandIfRendered(() -> new UiTable.SelectRowsCommand(getId(), List.of(rowIndex), scrollTo));
+		}, () -> {
+			this.selectedRecords = List.of();
+			queueCommandIfRendered(() -> new UiTable.SelectRowsCommand(getId(), List.of(), scrollTo));
+		});
+	}
+
+	public void setSelectedRows(List<Integer> rowIndexes) {
+		setSelectedRows(rowIndexes, false);
+	}
+
+	public void setSelectedRows(List<Integer> rowIndexes, boolean scrollToFirst) {
+		this.selectedRecords = getRecordsByRowIndexes(rowIndexes);
+		queueCommandIfRendered(() -> new UiTable.SelectRowsCommand(getId(), rowIndexes, scrollToFirst));
+	}
+
+	private List<RECORD> getRecordsByRowIndexes(List<Integer> rowIndexes) {
+		return rowIndexes.stream()
+				.flatMap((Integer rowIndex) -> getRecordByRowIndex(rowIndex).stream())
+				.collect(Collectors.toList());
+	}
+
+	private Optional<RECORD> getRecordByRowIndex(int rowIndex) {
+		List<RECORD> records = getModel().getRecords(rowIndex, 1);
+		if (records.size() >= 1) {
+			if (records.size() > 1) {
+				LOGGER.warn("Got multiple records from model when only asking for one! Taking the first one.");
+			}
+			return Optional.of(records.get(0));
+		} else {
+			LOGGER.error("Could not find record at row index {}", rowIndex);
+			return Optional.empty();
+		}
+	}
+
+	protected void updateColumnMessages(TableColumn<RECORD, ?> tableColumn) {
 		queueCommandIfRendered(() -> new UiTable.SetColumnMessagesCommand(getId(), tableColumn.getPropertyName(), tableColumn.getMessages().stream()
-				.map(message -> message.createUiFieldMessage())
+				.map(message -> message.createUiFieldMessage(FieldMessage.Position.POPOVER, FieldMessage.Visibility.ON_HOVER_OR_FOCUS))
 				.collect(Collectors.toList())));
 	}
 
@@ -450,226 +540,225 @@ public void removeCellMessage(RECORD record, String propertyName, FieldMessage m
 		updateSingleCellMessages(record, propertyName, cellMessages);
 	}
 
+	public List<FieldMessage> validateRecord(RECORD record) {
+		return validateRowInternal(record, false);
+	}
+
+	public List<FieldMessage> validateRow(RECORD record) {
+		return validateRowInternal(record, true);
+	}
+
+	private List<FieldMessage> validateRowInternal(RECORD record, boolean considerChangedCellValues) {
+		Map<String, Object> stringObjectMap;
+		stringObjectMap = extractRecordProperties(record);
+		if (considerChangedCellValues) {
+			stringObjectMap.putAll(getChangedCellValues(record));
+		}
+		//noinspection unchecked
+		return getColumns().stream()
+				.flatMap(column -> column.getField().getValidators().stream()
+						.flatMap(validator -> {
+							List<FieldMessage> messages = (((FieldValidator) validator).validate(stringObjectMap.get(column.getPropertyName())));
+							if (messages != null) {
+								return messages.stream();
+							} else {
+								return Stream.empty();
+							}
+						}))
+				.collect(Collectors.toList());
+	}
+
 	private void updateSingleCellMessages(RECORD record, String propertyName, List<FieldMessage> cellMessages) {
-		Integer uiRecordId = clientRecordCache.getUiRecordIdOrNull(record);
+		UiIdentifiableClientRecord uiRecordId = renderedRecords.getUiRecord(record);
 		if (uiRecordId != null) {
 			queueCommandIfRendered(() -> new UiTable.SetSingleCellMessagesCommand(
 					getId(),
-					uiRecordId,
+					uiRecordId.getId(),
 					propertyName,
 					cellMessages.stream()
-							.map(m -> m.createUiFieldMessage())
+							.map(m -> m.createUiFieldMessage(FieldMessage.Position.POPOVER, FieldMessage.Visibility.ON_HOVER_OR_FOCUS))
 							.collect(Collectors.toList())
 			));
 		}
 	}
 
+
+	protected void updateColumnVisibility(TableColumn<RECORD, ?> tableColumn) {
+		queueCommandIfRendered(() -> new UiTable.SetColumnVisibilityCommand(getId(), tableColumn.getPropertyName(), tableColumn.isVisible()));
+	}
+
 	// TODO #focus propagation
 //	@Override
-//	public void handleFieldFocused(AbstractField field) {
+//	public void handleFieldFocused(AbstractField<?> field) {
 //		if (selectedRecord != null) {
 //			queueCommandIfRendered(() -> new UiTable.FocusCellCommand(getId(), clientRecordCache.getUiRecord(selectedRecord), field.getPropertyName()));
 //		}
 //	}
 
+	public List<RECORD> getTopNonModelRecords() {
+		return List.copyOf(topNonModelRecords);
+	}
+
+	public List<RECORD> getBottomNonModelRecords() {
+		return List.copyOf(bottomNonModelRecords);
+	}
+
+	public List<RECORD> getNonModelRecords(boolean top) {
+		return top ? getTopNonModelRecords() : getBottomNonModelRecords();
+	}
+
+	public void addTopNonModelRecord(RECORD record) {
+		this.topNonModelRecords.add(0, record);
+		refreshData();
+	}
+
+	public void addBottomNonModelRecord(RECORD record) {
+		this.bottomNonModelRecords.add(record);
+		refreshData();
+	}
+
 	public void addNonModelRecord(RECORD record, boolean addToTop) {
 		if (addToTop) {
-			this.topNonModelRecords.add(0, record);
+			addTopNonModelRecord(record);
 		} else {
-			this.bottomNonModelRecords.add(record);
+			addBottomNonModelRecord(record);
 		}
-		refreshData();
+
 	}
 
-	public void removeNonModelRecord(RECORD record) {
+	public void removeTopNonModelRecord(RECORD record) {
 		this.topNonModelRecords.remove(record);
-		this.bottomNonModelRecords.remove(record);
 		refreshData();
 	}
 
-	public void removeAllNonModelRecords() {
-		this.topNonModelRecords.clear();
-		this.bottomNonModelRecords.clear();
+	public void removeBottomNonModelRecord(RECORD record) {
+		this.bottomNonModelRecords.remove(record);
 		refreshData();
 	}
 
-	public TableModel getModel() {
-		return model;
-	}
-
-	public void setModel(TableModel<RECORD> model) {
-		unregisterModelEventListeners();
-		this.model = model;
-		clearChangeBuffer();
-		model.onAllDataChanged().addListener(this.onAllDataChangedListener);
-		model.onRecordAdded().addListener(this.onRecordAddedListener);
-		model.onRecordDeleted().addListener(this.onRecordDeletedListener);
-		model.onRecordUpdated().addListener(this.onRecordUpdatedListener);
-		refreshData(true, true, true);
+	public void removeNonModelRecord(RECORD record) {
+		this.topNonModelRecords.remove(record);
+		this.bottomNonModelRecords.remove(record);
+		refreshData();
 	}
 
-	private void unregisterModelEventListeners() {
-		if (this.model != null) {
-			this.model.onAllDataChanged().removeListener(this.onAllDataChangedListener);
-			this.model.onRecordAdded().removeListener(this.onRecordAddedListener);
-			this.model.onRecordDeleted().removeListener(this.onRecordDeletedListener);
-			this.model.onRecordUpdated().removeListener(this.onRecordUpdatedListener);
+	public void removeNonModelRecord(RECORD record, boolean top) {
+		if (top) {
+			removeTopNonModelRecord(record);
+		} else {
+			removeBottomNonModelRecord(record);
 		}
 	}
 
-	private void onAllDataChanged(Void aVoid) {
-		refreshData(true, false, true);
+	public void removeAllTopNonModelRecords() {
+		this.topNonModelRecords.clear();
+		refreshData();
 	}
 
-	private void onRecordAdded(RECORD record) {
-		if (isRendered()) {
-			this.refreshData(false, false, false);
-		}
+	public void removeAllBottomNonModelRecords() {
+		this.topNonModelRecords.clear();
+		refreshData();
 	}
 
-	private void onRecordDeleted(RECORD record) {
-		clearMetaDataForRecord(record);
-		if (Objects.equals(selectedRecord, record)) {
-			selectedRecord = null;
-		}
-		if (selectedRecords != null) {
-			selectedRecords.remove(record);
-		}
-		if (isRendered()) {
-			CacheManipulationHandle<Integer> cacheResponse = clientRecordCache.removeRecord(record);
-			getSessionContext().queueCommand(
-					new UiTable.DeleteRowsCommand(getId(), Collections.singletonList(cacheResponse.getResult())),
-					aVoid -> cacheResponse.commit()
-			);
-		}
+	public void removeAllNonModelRecords() {
+		this.topNonModelRecords.clear();
+		this.bottomNonModelRecords.clear();
+		refreshData();
 	}
 
 	public void clearRecordMessages(RECORD record) {
 		cellMessages.remove(record);
-		updateRecordOnClientSide(record);
+		updateSingleRecordOnClient(record);
 	}
 
 	public void updateRecordMessages(RECORD record, Map<String, List<FieldMessage>> messages) {
 		cellMessages.put(record, new HashMap<>(messages));
-		updateRecordOnClientSide(record);
-	}
-
-	private void clearMetaDataForRecord(RECORD record) {
-		transientChangesByRecordAndPropertyName.remove(record);
-		cellMessages.remove(record);
-		markedCells.remove(record);
+		updateSingleRecordOnClient(record);
 	}
 
-	private void onRecordUpdated(RECORD record) {
-		clearMetaDataForRecord(record);
-		updateRecordOnClientSide(record);
+	@Override
+	protected void handleModelRecordsRemoved(RecordsRemovedEvent<RECORD> deleteEvent) {
+		for (int i = Math.max(deleteEvent.getStart(), renderedRecords.getStartIndex()); i < Math.min(deleteEvent.getEnd(), renderedRecords.getEndIndex()); i++) {
+			clearMetaDataForRecord(renderedRecords.getRecordByIndex(i));
+		}
+		super.handleModelRecordsRemoved(deleteEvent);
 	}
 
-	private void updateRecordOnClientSide(RECORD record) {
-		if (isRendered()) {
-			CacheManipulationHandle<UiTableClientRecord> cacheResponse = clientRecordCache.addOrUpdateRecord(record);
-			UiTableClientRecord clientRecord = cacheResponse.getResult();
-			applyTransientChangesToClientRecord(clientRecord);
-			getSessionContext().queueCommand(
-					new UiTable.UpdateRecordCommand(getId(), clientRecord),
-					aVoid -> cacheResponse.commit()
-			);
+	@Override
+	protected void handleModelRecordsChanged(RecordsChangedEvent<RECORD> changeEvent) {
+		for (int i = Math.max(changeEvent.getStart(), renderedRecords.getStartIndex()); i < Math.min(changeEvent.getEnd(), renderedRecords.getEndIndex()); i++) {
+			clearMetaDataForRecord(renderedRecords.getRecordByIndex(i));
 		}
+		super.handleModelRecordsChanged(changeEvent);
 	}
 
-	public void refreshData() {
-		refreshData(false, false, false);
+	private void clearMetaDataForRecord(RECORD record) {
+		transientChangesByRecordAndPropertyName.remove(record);
+		cellMessages.remove(record);
+		markedCells.remove(record);
 	}
 
-	private void refreshData(boolean resetMarkingsAndMessages, boolean resetSelection, boolean resetEditingState) {
-		if (resetEditingState) {
-			transientChangesByRecordAndPropertyName.clear();
-		}
-		if (resetMarkingsAndMessages) {
-			cellMessages.clear();
-			markedCells.clear();
-		}
-		if (resetSelection) {
-			selectedRecord = null;
-			selectedRecords.clear();
-		}
-
-		sendDataToClient(0, pageSize, true);
-
-		if (!resetEditingState && activeEditorCell != null) {
-			Integer editingClientRecordId = clientRecordCache.getUiRecordIdOrNull(activeEditorCell.getRecord());
-			if (editingClientRecordId != null) {
-				queueCommandIfRendered(() -> new UiTable.EditCellIfAvailableCommand(getId(), editingClientRecordId, activeEditorCell.getPropertyName()));
-			}
-		}
+	public void refreshData() {
+		refresh();
 	}
 
-	private void sendDataToClient(int startIndex, int endIndex, boolean clear) {
-		if (startIndex == endIndex && !clear && topNonModelRecords.isEmpty() && bottomNonModelRecords.isEmpty()) {
-			// nothing to do on the client side!
-			return;
-		}
-		if (isRendered()) {
-			int totalCount = getTotalRecordsCount();
-			List<RECORD> records = retrieveRecords(startIndex, endIndex - startIndex);
-
-			CacheManipulationHandle<List<UiTableClientRecord>> cacheResponse;
-			if (clear) {
-				cacheResponse = clientRecordCache.replaceRecords(records);
-			} else {
-				cacheResponse = clientRecordCache.addRecords(records);
-			}
-
-			if (!transientChangesByRecordAndPropertyName.isEmpty()) {
-				cacheResponse.getResult().forEach(uiRecord -> applyTransientChangesToClientRecord(uiRecord));
-			}
-
-			UiTable.AddDataCommand addDataCommand = new UiTable.AddDataCommand(getId(), startIndex, cacheResponse.getResult(), totalCount, sortField, sortDirection.toUiSortDirection(), clear);
-			LOGGER.debug("Sending table data to client: start: " + addDataCommand.getStartRowIndex() + "; length: " + addDataCommand.getData().size());
-			getSessionContext().queueCommand(
-					addDataCommand,
-					aVoid -> cacheResponse.commit()
+	@Override
+	protected void sendUpdateDataCommandToClient(int start, List<Integer> uiRecordIds, List<UiIdentifiableClientRecord> newUiRecords, int totalNumberOfRecords) {
+		queueCommandIfRendered(() -> {
+			LOGGER.debug("SENDING: renderedRange.start: {}; uiRecordIds.size: {}; renderedRecords.size: {}; newUiRecords.size: {}; totalCount: {}",
+					start, uiRecordIds.size(), renderedRecords.size(), newUiRecords.size(), totalNumberOfRecords);
+			return new UiTable.UpdateDataCommand(
+					getId(),
+					start,
+					uiRecordIds,
+					(List) newUiRecords,
+					totalNumberOfRecords
 			);
-		}
+		});
 	}
 
 	private int getTotalRecordsCount() {
-		return model.getCount() + topNonModelRecords.size() + bottomNonModelRecords.size();
+		return getModelCount() + topNonModelRecords.size() + bottomNonModelRecords.size();
 	}
 
-	private List<RECORD> retrieveRecords(int startIndex, int length) {
+	protected List<RECORD> retrieveRecords(int startIndex, int length) {
+		if (startIndex < 0 || length < 0) {
+			LOGGER.warn("Data coordinates do not make sense: startIndex {}, length {}", startIndex, length);
+			return Collections.emptyList();
+		}
+
 		int endIndex = startIndex + length;
 		int totalTopRecords = topNonModelRecords.size();
-		int totalModelRecords = model.getCount();
+		int totalModelRecords = getModelCount();
 		int totalBottomRecords = bottomNonModelRecords.size();
 
 		if (endIndex > totalTopRecords + totalModelRecords + totalBottomRecords) {
-			endIndex = totalTopRecords + totalModelRecords + totalBottomRecords;
+			endIndex = Math.max(totalTopRecords + totalModelRecords + totalBottomRecords, startIndex);
 			length = endIndex - startIndex;
 		}
 
 		if (startIndex < totalTopRecords && endIndex <= totalTopRecords) {
-			return topNonModelRecords.subList(startIndex, endIndex);
+			return topNonModelRecords.stream().skip(startIndex).limit(length).collect(Collectors.toList());
 		} else if (startIndex < totalTopRecords && endIndex <= totalTopRecords + totalModelRecords) {
 			List<RECORD> records = new ArrayList<>();
-			records.addAll(topNonModelRecords.subList(startIndex, totalTopRecords));
-			records.addAll(retrieveRecordsFromModel(0, length - (totalTopRecords - startIndex)));
+			records.addAll(topNonModelRecords.stream().skip(startIndex).limit(totalTopRecords - startIndex).collect(Collectors.toList()));
+			records.addAll(retrieveRecordsFromModel(0, length - records.size()));
 			return records;
 		} else if (startIndex < totalTopRecords && endIndex > totalTopRecords + totalModelRecords) {
 			List<RECORD> records = new ArrayList<>();
-			records.addAll(topNonModelRecords.subList(startIndex, totalTopRecords));
+			records.addAll(topNonModelRecords.stream().skip(startIndex).limit(totalTopRecords - startIndex).collect(Collectors.toList()));
 			records.addAll(retrieveRecordsFromModel(0, totalModelRecords));
-			records.addAll(bottomNonModelRecords.subList(0, length - (totalTopRecords - startIndex) - totalModelRecords));
+			records.addAll(bottomNonModelRecords.stream().skip(0).limit(length - records.size()).collect(Collectors.toList()));
 			return records;
 		} else if (startIndex >= totalTopRecords && startIndex < totalTopRecords + totalModelRecords && endIndex <= totalTopRecords + totalModelRecords) {
 			return retrieveRecordsFromModel(startIndex - topNonModelRecords.size(), length);
 		} else if (startIndex >= totalTopRecords && startIndex < totalTopRecords + totalModelRecords && endIndex > totalTopRecords + totalModelRecords) {
 			List<RECORD> records = new ArrayList<>();
 			records.addAll(retrieveRecordsFromModel(startIndex - topNonModelRecords.size(), endIndex - startIndex - totalTopRecords));
-			records.addAll(bottomNonModelRecords.subList(0, endIndex - totalTopRecords - totalModelRecords));
+			records.addAll(bottomNonModelRecords.stream().skip(0).limit(length - records.size()).collect(Collectors.toList()));
 			return records;
 		} else if (startIndex >= totalTopRecords + totalModelRecords) {
-			return bottomNonModelRecords.subList(startIndex - totalTopRecords - totalModelRecords, endIndex - startIndex);
+			return bottomNonModelRecords.stream().skip(startIndex - totalTopRecords - totalModelRecords).limit(length).collect(Collectors.toList());
 		} else {
 			LOGGER.error("This path should never be reached!");
 			return Collections.emptyList();
@@ -677,60 +766,58 @@ private List<RECORD> retrieveRecords(int startIndex, int length) {
 	}
 
 	private List<RECORD> retrieveRecordsFromModel(int startIndex, int length) {
-		List<RECORD> records = model.getRecords(startIndex, length, getSorting());
+		List<RECORD> records = getModel().getRecords(startIndex, length);
 		if (records.size() == length) {
 			return records;
 		} else if (records.size() < length) {
 			LOGGER.warn("TableModel did not return the requested amount of data!");
 			return records;
 		} else {
-			LOGGER.warn("TableModel returned to much data. Truncating!");
+			LOGGER.warn("TableModel returned too much data. Truncating!");
 			return new ArrayList<>(records.subList(0, length));
 		}
 	}
 
-
-	private void applyTransientChangesToClientRecord(UiTableClientRecord uiRecord) {
-		Map<String, Object> changes = transientChangesByRecordAndPropertyName.get(clientRecordCache.getRecordByClientId(uiRecord.getId()));
-		if (changes != null) {
-			changes.forEach((key, value) -> uiRecord.getValues().put(key, getColumnByPropertyName(key).getField().convertUxValueToUiValue(value)));
-		}
-	}
-
 	public void cancelEditing() {
 		TableCellCoordinates<RECORD> activeEditorCell = getActiveEditorCell();
-		Integer uiRecordIdOrNull = clientRecordCache.getUiRecordIdOrNull(activeEditorCell.getRecord());
-		if (uiRecordIdOrNull != null) {
-			queueCommandIfRendered(() -> new UiTable.CancelEditingCellCommand(getId(), uiRecordIdOrNull, activeEditorCell.getPropertyName()));
+		UiIdentifiableClientRecord uiRecord = renderedRecords.getUiRecord(activeEditorCell.getRecord());
+		if (uiRecord != null) {
+			queueCommandIfRendered(() -> new UiTable.CancelEditingCellCommand(getId(), uiRecord.getId(), activeEditorCell.getPropertyName()));
 		}
 	}
 
-	@NotNull
 	private Map<String, List<UiFieldMessage>> createUiFieldMessagesForRecord(Map<String, List<FieldMessage>> recordFieldMessages) {
 		return recordFieldMessages.entrySet().stream()
 				.collect(Collectors.toMap(
 						entry -> entry.getKey(),
 						entry -> entry.getValue().stream()
-								.map(fieldMessage -> fieldMessage.createUiFieldMessage())
+								.map(fieldMessage -> fieldMessage.createUiFieldMessage(FieldMessage.Position.POPOVER, FieldMessage.Visibility.ON_HOVER_OR_FOCUS))
 								.collect(Collectors.toList())
 				));
 	}
 
-	private UiTableClientRecord createUiTableClientRecord(RECORD record) {
+	@Override
+	protected UiIdentifiableClientRecord createClientRecord(RECORD record) {
 		UiTableClientRecord clientRecord = new UiTableClientRecord();
-		Map<String, Object> uiValues = new HashMap<>();
-		for (TableColumn column : columns) {
-			Object uxValue = propertyExtractor.getValue(record, column.getPropertyName());
-			uiValues.put(column.getPropertyName(), column.getField().convertUxValueToUiValue(uxValue));
-		}
+		clientRecord.setId(++clientRecordIdCounter);
+		Map<String, Object> uxValues = extractRecordProperties(record);
+		Map<String, Object> uiValues = columns.stream()
+				.collect(HashMap::new, (map, column) -> map.put(column.getPropertyName(), ((AbstractField) column.getField()).convertUxValueToUiValue(uxValues.get(column.getPropertyName()))), HashMap::putAll);
+		Map<String, Map<String, Object>> displayTemplateValues = columns.stream()
+				.filter(c -> c.getDisplayTemplate() != null)
+				.collect(HashMap::new, (map, column) -> map.put(column.getPropertyName(), column.getDisplayPropertyProvider().getValues(record, column.getDisplayTemplate().getPropertyNames())), HashMap::putAll);
 		clientRecord.setValues(uiValues);
-		clientRecord.setSelected(selectedRecord != null && selectedRecord.equals(record) || selectedRecords.contains(record));
+		clientRecord.setDisplayTemplateValues(displayTemplateValues);
+		clientRecord.setSelected(selectedRecords.stream().anyMatch(r -> customEqualsAndHashCode.getEquals().test(r, record)));
 		clientRecord.setMessages(createUiFieldMessagesForRecord(cellMessages.getOrDefault(record, Collections.emptyMap())));
 		clientRecord.setMarkings(new ArrayList<>(markedCells.getOrDefault(record, Collections.emptySet())));
+		clientRecord.setCssStyle(rowCssStyleProvider.apply(record));
+		transientChangesByRecordAndPropertyName.getOrDefault(record, Map.of())
+				.forEach((key, value) -> clientRecord.getValues().put(key, getColumnByPropertyName(key).getField().convertUxValueToUiValue(value)));
 		return clientRecord;
 	}
 
-	public List<TableColumn> getColumns() {
+	public List<TableColumn<RECORD, ?>> getColumns() {
 		return columns;
 	}
 
@@ -739,8 +826,11 @@ public boolean isDisplayAsList() {
 	}
 
 	public void setDisplayAsList(boolean displayAsList) {
+		boolean changed = this.displayAsList != displayAsList;
 		this.displayAsList = displayAsList;
-		reRenderIfRendered();
+		if (changed) {
+			reRenderIfRendered();
+		}
 	}
 
 	public boolean isForceFitWidth() {
@@ -748,8 +838,26 @@ public boolean isForceFitWidth() {
 	}
 
 	public void setForceFitWidth(boolean forceFitWidth) {
+		boolean changed = forceFitWidth != this.forceFitWidth;
 		this.forceFitWidth = forceFitWidth;
-		reRenderIfRendered();
+		if (changed) {
+			queueCommandIfRendered(() -> new UiTable.UpdateRefreshableConfigCommand(getId(), createUiRefreshableTableConfigUpdate()));
+		}
+	}
+
+	private UiRefreshableTableConfigUpdate createUiRefreshableTableConfigUpdate() {
+		UiRefreshableTableConfigUpdate ui = new UiRefreshableTableConfigUpdate();
+		ui.setForceFitWidth(forceFitWidth);
+		ui.setRowHeight(rowHeight);
+		ui.setAllowMultiRowSelection(allowMultiRowSelection);
+		ui.setTextSelectionEnabled(textSelectionEnabled);
+		ui.setEditable(editable);
+		ui.setShowHeaderRow(showHeaderRow);
+		ui.setHeaderRowHeight(headerRowHeight);
+		ui.setShowFooterRow(showFooterRow);
+		ui.setFooterRowHeight(footerRowHeight);
+		ui.setAutoHeight(autoHeight);
+		return ui;
 	}
 
 	public int getRowHeight() {
@@ -757,8 +865,11 @@ public int getRowHeight() {
 	}
 
 	public void setRowHeight(int rowHeight) {
+		boolean changed = rowHeight != this.rowHeight;
 		this.rowHeight = rowHeight;
-		reRenderIfRendered();
+		if (changed) {
+			queueCommandIfRendered(() -> new UiTable.UpdateRefreshableConfigCommand(getId(), createUiRefreshableTableConfigUpdate()));
+		}
 	}
 
 	public boolean isStripedRows() {
@@ -766,8 +877,11 @@ public boolean isStripedRows() {
 	}
 
 	public void setStripedRows(boolean stripedRows) {
+		boolean changed = stripedRows != this.stripedRows;
 		this.stripedRows = stripedRows;
-		reRenderIfRendered();
+		if (changed) {
+			reRenderIfRendered();
+		}
 	}
 
 	public void setStripedRowColorEven(Color stripedRowColorEven) {
@@ -783,8 +897,11 @@ public boolean isHideHeaders() {
 	}
 
 	public void setHideHeaders(boolean hideHeaders) {
+		boolean changed = hideHeaders != this.hideHeaders;
 		this.hideHeaders = hideHeaders;
-		reRenderIfRendered();
+		if (changed) {
+			reRenderIfRendered();
+		}
 	}
 
 	public boolean isAllowMultiRowSelection() {
@@ -792,8 +909,11 @@ public boolean isAllowMultiRowSelection() {
 	}
 
 	public void setAllowMultiRowSelection(boolean allowMultiRowSelection) {
+		boolean changed = allowMultiRowSelection != this.allowMultiRowSelection;
 		this.allowMultiRowSelection = allowMultiRowSelection;
-		reRenderIfRendered();
+		if (changed) {
+			queueCommandIfRendered(() -> new UiTable.UpdateRefreshableConfigCommand(getId(), createUiRefreshableTableConfigUpdate()));
+		}
 	}
 
 	public void setSelectionColor(Color selectionColor) {
@@ -801,11 +921,16 @@ public void setSelectionColor(Color selectionColor) {
 	}
 
 	public void setRowBorderWidth(int rowBorderWidth) {
+		boolean changed = rowBorderWidth != this.rowBorderWidth;
+		this.rowBorderWidth = rowBorderWidth;
+		if (changed) {
+			queueCommandIfRendered(() -> new UiTable.UpdateRefreshableConfigCommand(getId(), createUiRefreshableTableConfigUpdate()));
+		}
 		this.setCssStyle(".slick-cell", "border-bottom-width", rowBorderWidth + "px");
 	}
 
 	public void setRowBorderColor(Color rowBorderColor) {
-		this.setCssStyle(".slick-cell", "border-color", rowBorderColor.toHtmlColorString());
+		this.setCssStyle(".slick-cell", "border-color", rowBorderColor != null ? rowBorderColor.toHtmlColorString() : null);
 	}
 
 	public boolean isShowRowCheckBoxes() {
@@ -813,8 +938,11 @@ public boolean isShowRowCheckBoxes() {
 	}
 
 	public void setShowRowCheckBoxes(boolean showRowCheckBoxes) {
+		boolean changed = showRowCheckBoxes != this.showRowCheckBoxes;
 		this.showRowCheckBoxes = showRowCheckBoxes;
-		reRenderIfRendered();
+		if (changed) {
+			reRenderIfRendered();
+		}
 	}
 
 	public boolean isShowNumbering() {
@@ -822,30 +950,39 @@ public boolean isShowNumbering() {
 	}
 
 	public void setShowNumbering(boolean showNumbering) {
+		boolean changed = showNumbering != this.showNumbering;
 		this.showNumbering = showNumbering;
-		reRenderIfRendered();
+		if (changed) {
+			reRenderIfRendered();
+		}
 	}
 
-	public Sorting getSorting() {
-		return new Sorting(sortField, sortDirection);
+	public boolean isTextSelectionEnabled() {
+		return textSelectionEnabled;
 	}
 
-	public String getSortField() {
-		return sortField;
+	public void setTextSelectionEnabled(boolean textSelectionEnabled) {
+		boolean changed = textSelectionEnabled != this.textSelectionEnabled;
+		this.textSelectionEnabled = textSelectionEnabled;
+		if (changed) {
+			queueCommandIfRendered(() -> new UiTable.UpdateRefreshableConfigCommand(getId(), createUiRefreshableTableConfigUpdate()));
+		}
 	}
 
-	public void setSortField(String sortField) {
-		this.sortField = sortField;
-		refreshData(false, false, false);
+	public Sorting getSorting() {
+		return sorting;
 	}
 
-	public SortDirection getSortDirection() {
-		return sortDirection;
+	public void setSorting(String sortField, SortDirection sortDirection) {
+		setSorting(sortField != null && sortDirection != null ? new Sorting(sortField, sortDirection) : null);
 	}
 
-	public void setSortDirection(SortDirection sortDirection) {
-		this.sortDirection = sortDirection;
-		refreshData(false, false, false);
+	public void setSorting(Sorting sorting) {
+		this.sorting = sorting;
+		TableModel<RECORD> model = getModel();
+		if (model != null) {
+			model.setSorting(sorting);
+		}
 	}
 
 	public boolean isEditable() {
@@ -853,8 +990,11 @@ public boolean isEditable() {
 	}
 
 	public void setEditable(boolean editable) {
+		boolean changed = editable != this.editable;
 		this.editable = editable;
-		reRenderIfRendered();
+		if (changed) {
+			queueCommandIfRendered(() -> new UiTable.UpdateRefreshableConfigCommand(getId(), createUiRefreshableTableConfigUpdate()));
+		}
 	}
 
 	public boolean isEnsureEmptyLastRow() {
@@ -862,8 +1002,11 @@ public boolean isEnsureEmptyLastRow() {
 	}
 
 	public void setEnsureEmptyLastRow(boolean ensureEmptyLastRow) {
+		boolean changed = ensureEmptyLastRow != this.ensureEmptyLastRow;
 		this.ensureEmptyLastRow = ensureEmptyLastRow;
-		reRenderIfRendered();
+		if (changed) {
+			reRenderIfRendered();
+		}
 	}
 
 	public boolean isTreeMode() {
@@ -871,8 +1014,11 @@ public boolean isTreeMode() {
 	}
 
 	public void setTreeMode(boolean treeMode) {
+		boolean changed = treeMode != this.treeMode;
 		this.treeMode = treeMode;
-		reRenderIfRendered();
+		if (changed) {
+			reRenderIfRendered();
+		}
 	}
 
 	public String getIndentedColumnName() {
@@ -880,8 +1026,11 @@ public String getIndentedColumnName() {
 	}
 
 	public void setIndentedColumnName(String indentedColumnName) {
+		boolean changed = !Objects.equals(indentedColumnName, this.indentedColumnName);
 		this.indentedColumnName = indentedColumnName;
-		reRenderIfRendered();
+		if (changed) {
+			reRenderIfRendered();
+		}
 	}
 
 	public int getIndentation() {
@@ -889,8 +1038,11 @@ public int getIndentation() {
 	}
 
 	public void setIndentation(int indentation) {
+		boolean changed = indentation != this.indentation;
 		this.indentation = indentation;
-		reRenderIfRendered();
+		if (changed) {
+			reRenderIfRendered();
+		}
 	}
 
 	public SelectionFrame getSelectionFrame() {
@@ -898,8 +1050,11 @@ public SelectionFrame getSelectionFrame() {
 	}
 
 	public void setSelectionFrame(SelectionFrame selectionFrame) {
+		boolean changed = !Objects.equals(selectionFrame, this.selectionFrame);
 		this.selectionFrame = selectionFrame;
-		reRenderIfRendered();
+		if (changed) {
+			reRenderIfRendered();
+		}
 	}
 
 	public boolean isShowHeaderRow() {
@@ -907,8 +1062,11 @@ public boolean isShowHeaderRow() {
 	}
 
 	public void setShowHeaderRow(boolean showHeaderRow) {
+		boolean changed = showHeaderRow != this.showHeaderRow;
 		this.showHeaderRow = showHeaderRow;
-		reRenderIfRendered();
+		if (changed) {
+			queueCommandIfRendered(() -> new UiTable.UpdateRefreshableConfigCommand(getId(), createUiRefreshableTableConfigUpdate()));
+		}
 	}
 
 	public void setHeaderRowBorderWidth(int headerRowBorderWidth) {
@@ -924,27 +1082,32 @@ public int getHeaderRowHeight() {
 	}
 
 	public void setHeaderRowHeight(int headerRowHeight) {
+		boolean changed = headerRowHeight != this.headerRowHeight;
 		this.headerRowHeight = headerRowHeight;
-		reRenderIfRendered();
+		if (changed) {
+			queueCommandIfRendered(() -> new UiTable.UpdateRefreshableConfigCommand(getId(), createUiRefreshableTableConfigUpdate()));
+		}
 	}
 
 	public void setHeaderRowBackgroundColor(Color headerRowBackgroundColor) {
 		this.setCssStyle(".slick-headerrow", "background-color", headerRowBackgroundColor != null ? headerRowBackgroundColor.toHtmlColorString() : null);
 	}
 
-	public Map<String, AbstractField> getHeaderRowFields() {
-		return Collections.unmodifiableMap(headerRowFields);
-	}
-
-	public void setHeaderRowFields(Map<String, AbstractField> headerRowFields) {
-		this.headerRowFields.clear();
-		this.headerRowFields.putAll(headerRowFields);
-		this.headerRowFields.values().forEach(field -> field.setParent(this));
-		reRenderIfRendered();
+	/**
+	 * Use {@link TableColumn#setHeaderRowField(AbstractField)} instead!
+	 */
+	@Deprecated
+	public void setHeaderRowField(String columnName, AbstractField<?> field) {
+		TableColumn<RECORD, Object> column = getColumnByPropertyName(columnName);
+		if (column != null) {
+			column.setHeaderRowField(field);
+		} else {
+			
+		}
 	}
 
-	public void setHeaderRowField(String columnName, AbstractField field) {
-		this.headerRowFields.put(columnName, field);
+	void updateHeaderRowField(TableColumn<RECORD, ?> column) {
+		queueCommandIfRendered(() -> new UiTable.SetHeaderRowFieldCommand(getId(), column.getPropertyName(), column.getHeaderRowField() != null ? column.getHeaderRowField().createUiReference() : null));
 	}
 
 	public boolean isShowFooterRow() {
@@ -952,8 +1115,11 @@ public boolean isShowFooterRow() {
 	}
 
 	public void setShowFooterRow(boolean showFooterRow) {
+		boolean changed = showFooterRow != this.showFooterRow;
 		this.showFooterRow = showFooterRow;
-		reRenderIfRendered();
+		if (changed) {
+			queueCommandIfRendered(() -> new UiTable.UpdateRefreshableConfigCommand(getId(), createUiRefreshableTableConfigUpdate()));
+		}
 	}
 
 	public void setFooterRowBorderWidth(int footerRowBorderWidth) {
@@ -969,47 +1135,36 @@ public int getFooterRowHeight() {
 	}
 
 	public void setFooterRowHeight(int footerRowHeight) {
+		boolean changed = footerRowHeight != this.footerRowHeight;
 		this.footerRowHeight = footerRowHeight;
-		reRenderIfRendered();
+		if (changed) {
+			queueCommandIfRendered(() -> new UiTable.UpdateRefreshableConfigCommand(getId(), createUiRefreshableTableConfigUpdate()));
+		}
 	}
 
 	public void setFooterRowBackgroundColor(Color footerRowBackgroundColor) {
 		this.setCssStyle(".slick-footerrow", "background-color", footerRowBackgroundColor != null ? footerRowBackgroundColor.toHtmlColorString() : null);
 	}
 
-	public Map<String, AbstractField> getFooterRowFields() {
-		return footerRowFields;
-	}
-
-	public void setFooterRowFields(Map<String, AbstractField> footerRowFields) {
-		this.footerRowFields.clear();
-		this.footerRowFields.putAll(footerRowFields);
-		this.headerRowFields.values().forEach(field -> field.setParent(this));
-		reRenderIfRendered();
-	}
-
-	public void setFooterRowField(String columnName, AbstractField field) {
-		this.footerRowFields.put(columnName, field);
+	/**
+	 * Use {@link TableColumn#setFooterRowField(AbstractField)} instead!
+	 */
+	@Deprecated
+	public void setFooterRowField(String columnName, AbstractField<?> field) {
+		getColumnByPropertyName(columnName).setFooterRowField(field);
 	}
 
-	public void setPageSize(int pageSize) {
-		this.pageSize = pageSize;
+	void updateFooterRowField(TableColumn<RECORD, ?> column) {
+		queueCommandIfRendered(() -> new UiTable.SetFooterRowFieldCommand(getId(), column.getPropertyName(), column.getFooterRowField() != null ? column.getFooterRowField().createUiReference() : null));
 	}
 
-	public TableColumn getColumnByPropertyName(String propertyName) {
+	public <VALUE> TableColumn<RECORD, VALUE> getColumnByPropertyName(String propertyName) {
 		return columns.stream()
 				.filter(column -> column.getPropertyName().equals(propertyName))
+				.map(c -> (TableColumn<RECORD, VALUE>) c)
 				.findFirst().orElse(null);
 	}
 
-	public AbstractField getHeaderRowFieldByName(String propertyName) {
-		return headerRowFields.get(propertyName);
-	}
-
-	public AbstractField getFooterRowFieldByName(String propertyName) {
-		return footerRowFields.get(propertyName);
-	}
-
 	public List<RECORD> getRecordsWithChangedCellValues() {
 		return new ArrayList<>(transientChangesByRecordAndPropertyName.keySet());
 	}
@@ -1018,8 +1173,8 @@ public Map<String, Object> getChangedCellValues(RECORD record) {
 		return transientChangesByRecordAndPropertyName.getOrDefault(record, Collections.emptyMap());
 	}
 
-	public Map<String, Object> getAllCellValues(RECORD record) {
-		Map<String, Object> values = propertyExtractor.getValues(record, columns.stream().map(c -> c.getPropertyName()).collect(Collectors.toList()));
+	public Map<String, Object> getAllCellValuesForRecord(RECORD record) {
+		Map<String, Object> values = extractRecordProperties(record);
 		values.putAll(transientChangesByRecordAndPropertyName.getOrDefault(record, Collections.emptyMap()));
 		return values;
 	}
@@ -1029,24 +1184,51 @@ public void clearChangeBuffer() {
 	}
 
 	public void applyCellValuesToRecord(RECORD record) {
-		Map<String, Object> changedCellValues = getChangedCellValues(record);
-		propertyInjector.setValues(record, changedCellValues);
+		Map<String, Object> changedCellValues = transientChangesByRecordAndPropertyName.remove(record);
+		if (changedCellValues != null) {
+			changedCellValues.forEach((propertyName, value) -> {
+				ValueInjector<RECORD, Object> columnValueInjector = getColumnByPropertyName(propertyName).getValueInjector();
+				if (columnValueInjector != null) {
+					columnValueInjector.inject(record, value);
+				} else {
+					propertyInjector.setValue(record, propertyName, value);
+				}
+			});
+			rerenderRecord(record);
+		}
 	}
 
 	public void revertChanges() {
-		refreshData(true, false, true);
+		transientChangesByRecordAndPropertyName.clear();
+		refreshData();
 	}
 
 	public RECORD getSelectedRecord() {
-		return selectedRecord;
+		return selectedRecords.isEmpty() ? null : selectedRecords.get(selectedRecords.size() - 1);
+	}
+
+	public List<RECORD> getSelectedRecords() {
+		return selectedRecords;
+	}
+
+	public PropertyProvider<RECORD> getPropertyProvider() {
+		return propertyProvider;
 	}
 
-	public PropertyExtractor<RECORD> getPropertyExtractor() {
-		return propertyExtractor;
+	public void setPropertyProvider(PropertyProvider<RECORD> propertyProvider) {
+		this.propertyProvider = propertyProvider;
 	}
 
 	public void setPropertyExtractor(PropertyExtractor<RECORD> propertyExtractor) {
-		this.propertyExtractor = propertyExtractor;
+		this.setPropertyProvider(propertyExtractor);
+	}
+
+	public Function<RECORD, Map<String, String>> getRowCssStyleProvider() {
+		return rowCssStyleProvider;
+	}
+
+	public void setRowCssStyleProvider(Function<RECORD, Map<String, String>> rowCssStyleProvider) {
+		this.rowCssStyleProvider = rowCssStyleProvider;
 	}
 
 	public PropertyInjector<RECORD> getPropertyInjector() {
@@ -1057,16 +1239,39 @@ public void setPropertyInjector(PropertyInjector<RECORD> propertyInjector) {
 		this.propertyInjector = propertyInjector;
 	}
 
-	public void setMaxCacheCapacity(int maxCapacity) {
-		clientRecordCache.setMaxCapacity(maxCapacity);
+	public Function<RECORD, Component> getContextMenuProvider() {
+		return contextMenuProvider;
 	}
 
-	public int getMaxCacheCapacity() {
-		return clientRecordCache.getMaxCapacity();
+	public void setContextMenuProvider(Function<RECORD, Component> contextMenuProvider) {
+		this.contextMenuProvider = contextMenuProvider;
 	}
 
-	public List<RECORD> getSelectedRecords() {
-		return selectedRecords != null ? selectedRecords : selectedRecord != null ? Collections.singletonList(selectedRecord) : Collections.emptyList(); // TODO completely rewrite this!!! (multiple
-		// selected records should be standard!)
+	public void closeContextMenu() {
+		queueCommandIfRendered(() -> new UiTable.CloseContextMenuCommand(getId(), this.lastSeenContextMenuRequestId));
+	}
+
+	public List<RECORD> getRenderedRecords() {
+		return renderedRecords.getRecords();
+	}
+
+	public boolean isAutoHeight() {
+		return autoHeight;
+	}
+
+	public void setAutoHeight(boolean autoHeight) {
+		boolean changed = autoHeight != this.autoHeight;
+		this.autoHeight = autoHeight;
+		if (changed) {
+			queueCommandIfRendered(() -> new UiTable.UpdateRefreshableConfigCommand(getId(), createUiRefreshableTableConfigUpdate()));
+		}
+	}
+
+	@Override
+	public void setCustomEqualsAndHashCode(EqualsAndHashCode<RECORD> customEqualsAndHashCode) {
+		super.setCustomEqualsAndHashCode(customEqualsAndHashCode);
+		transientChangesByRecordAndPropertyName = new CustomEqualsAndHashCodeMap<>(customEqualsAndHashCode);
+		cellMessages = new CustomEqualsAndHashCodeMap<>(customEqualsAndHashCode);
+		markedCells = new CustomEqualsAndHashCodeMap<>(customEqualsAndHashCode);
 	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/table/TableCellCoordinates.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/table/TableCellCoordinates.java
index ef2d4a645..770e1b533 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/table/TableCellCoordinates.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/table/TableCellCoordinates.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/table/TableColumn.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/table/TableColumn.java
index 53f6aa470..a6d31d5ad 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/table/TableColumn.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/table/TableColumn.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,10 +19,16 @@
  */
 package org.teamapps.ux.component.table;
 
+import org.teamapps.data.extract.PropertyExtractor;
+import org.teamapps.data.extract.PropertyProvider;
+import org.teamapps.data.extract.ValueExtractor;
+import org.teamapps.data.extract.ValueInjector;
 import org.teamapps.dto.UiTableColumn;
-import org.teamapps.icons.api.Icon;
+import org.teamapps.icons.Icon;
 import org.teamapps.ux.component.field.AbstractField;
 import org.teamapps.ux.component.field.FieldMessage;
+import org.teamapps.ux.component.format.TextAlignment;
+import org.teamapps.ux.component.template.Template;
 import org.teamapps.ux.session.CurrentSessionContext;
 import org.teamapps.ux.session.SessionContext;
 
@@ -30,44 +36,57 @@
 import java.util.List;
 import java.util.stream.Collectors;
 
-public class TableColumn {
-	private Table table;
+public class TableColumn<RECORD, VALUE> {
+	public static final int DEFAULT_WIDTH = 150;
+	private Table<RECORD> table;
 
 	private final String propertyName;
-	private Icon icon;
+	private Icon<?, ?> icon;
 	private String title;
-	private AbstractField field;
+	private AbstractField<VALUE> field;
+	private Template displayTemplate;
+	private AbstractField<?> headerRowField;
+	private AbstractField<?> footerRowField;
 	private int minWidth;
 	private int defaultWidth;
 	private int maxWidth;
-	private boolean hidden;
+	private boolean visible = true;
 	private boolean sortable = true;
 	private boolean resizeable = true;
-	boolean hiddenIfOnlyEmptyCellsVisible = false;
+	private boolean hiddenIfOnlyEmptyCellsVisible = false;
+	private TextAlignment headerAlignment = TextAlignment.LEFT;
+	private ValueExtractor<RECORD, VALUE> valueExtractor;
+	private ValueInjector<RECORD, VALUE> valueInjector;
+	private PropertyProvider<RECORD> displayPropertyProvider;
 
 	private List<FieldMessage> messages = new ArrayList<>();
 
-	public TableColumn(String propertyName, AbstractField field) {
-		this(propertyName, null, null, field, 0, 150, 0);
+	public TableColumn(String propertyName, AbstractField<VALUE> field) {
+		this(propertyName, null, null, field, null, 0, DEFAULT_WIDTH, 0);
 	}
 
-	public TableColumn(String propertyName, String title, AbstractField field) {
-		this(propertyName, null, title, field, 0, 150, 0);
+	public TableColumn(String propertyName, String title, AbstractField<VALUE> field) {
+		this(propertyName, null, title, field, null, 0, DEFAULT_WIDTH, 0);
 	}
 
-	public TableColumn(String propertyName, Icon icon, String title, AbstractField field) {
-		this(propertyName, icon, title, field, 0, 150, 0);
+	public TableColumn(String propertyName, Icon<?, ?> icon, String title, AbstractField<VALUE> field) {
+		this(propertyName, icon, title, field, null, 0, DEFAULT_WIDTH, 0);
 	}
 
-	public TableColumn(String propertyName, Icon icon, String title, AbstractField field, int defaultWidth) {
-		this(propertyName, icon, title, field, 0, defaultWidth, 0);
+	public TableColumn(String propertyName, Icon<?, ?> icon, String title, AbstractField<VALUE> field, int defaultWidth) {
+		this(propertyName, icon, title, field, null, 0, defaultWidth, 0);
 	}
 
-	public TableColumn(String propertyName, Icon icon, String title, AbstractField field, int minWidth, int defaultWidth, int maxWidth) {
+	public TableColumn(String propertyName, Icon<?, ?> icon, String title, Template displayTemplate) {
+		this(propertyName, icon, title, null, displayTemplate, 0, DEFAULT_WIDTH, 0);
+	}
+
+	public TableColumn(String propertyName, Icon<?, ?> icon, String title, AbstractField<VALUE> field, Template displayTemplate, int minWidth, int defaultWidth, int maxWidth) {
 		this.propertyName = propertyName;
 		this.icon = icon;
 		this.title = title;
 		this.field = field;
+		this.displayTemplate = displayTemplate;
 		this.minWidth = minWidth;
 		this.defaultWidth = defaultWidth;
 		this.maxWidth = maxWidth;
@@ -75,15 +94,20 @@ public TableColumn(String propertyName, Icon icon, String title, AbstractField f
 
 	public UiTableColumn createUiTableColumn() {
 		SessionContext context = CurrentSessionContext.get();
-		UiTableColumn uiTableColumn = new UiTableColumn(propertyName, context.resolveIcon(icon), title, field.createUiComponentReference());
+		UiTableColumn uiTableColumn = new UiTableColumn(propertyName, context.resolveIcon(icon), title, field.createUiReference());
 		uiTableColumn.setDefaultWidth(defaultWidth);
 		uiTableColumn.setMinWidth(minWidth);
 		uiTableColumn.setDefaultWidth(defaultWidth);
 		uiTableColumn.setMaxWidth(maxWidth);
 		uiTableColumn.setSortable(sortable);
 		uiTableColumn.setResizeable(resizeable);
+		uiTableColumn.setVisible(visible);
+		uiTableColumn.setHeaderAlignment(headerAlignment.toUiTextAlignment());
 		uiTableColumn.setHiddenIfOnlyEmptyCellsVisible(hiddenIfOnlyEmptyCellsVisible);
-		uiTableColumn.setMessages(messages.stream().map(fieldMessage -> fieldMessage.createUiFieldMessage()).collect(Collectors.toList()));
+		uiTableColumn.setMessages(messages.stream().map(fieldMessage -> fieldMessage.createUiFieldMessage(FieldMessage.Position.POPOVER, FieldMessage.Visibility.ON_HOVER_OR_FOCUS)).collect(Collectors.toList()));
+		uiTableColumn.setHeaderRowField(headerRowField != null ? headerRowField.createUiReference() : null);
+		uiTableColumn.setFooterRowField(footerRowField != null ? footerRowField.createUiReference() : null);
+		uiTableColumn.setDisplayTemplate(displayTemplate != null ? displayTemplate.createUiTemplate() : null);
 		return uiTableColumn;
 	}
 
@@ -112,11 +136,11 @@ public void setMessages(List<FieldMessage> messages) {
 		}
 	}
 
-	public Icon getIcon() {
+	public Icon<?, ?> getIcon() {
 		return icon;
 	}
 
-	public TableColumn setIcon(Icon icon) {
+	public TableColumn<RECORD, VALUE> setIcon(Icon<?, ?> icon) {
 		this.icon = icon;
 		return this;
 	}
@@ -125,16 +149,16 @@ public String getTitle() {
 		return title;
 	}
 
-	public TableColumn setTitle(String title) {
+	public TableColumn<RECORD, VALUE> setTitle(String title) {
 		this.title = title;
 		return this;
 	}
 
-	public AbstractField getField() {
+	public AbstractField<VALUE> getField() {
 		return field;
 	}
 
-	public TableColumn setField(AbstractField field) {
+	public TableColumn<RECORD, VALUE> setField(AbstractField<VALUE> field) {
 		this.field = field;
 		return this;
 	}
@@ -143,7 +167,7 @@ public int getMinWidth() {
 		return minWidth;
 	}
 
-	public TableColumn setMinWidth(int minWidth) {
+	public TableColumn<RECORD, VALUE> setMinWidth(int minWidth) {
 		this.minWidth = minWidth;
 		return this;
 	}
@@ -152,7 +176,7 @@ public int getDefaultWidth() {
 		return defaultWidth;
 	}
 
-	public TableColumn setDefaultWidth(int defaultWidth) {
+	public TableColumn<RECORD, VALUE> setDefaultWidth(int defaultWidth) {
 		this.defaultWidth = defaultWidth;
 		return this;
 	}
@@ -161,17 +185,20 @@ public int getMaxWidth() {
 		return maxWidth;
 	}
 
-	public TableColumn setMaxWidth(int maxWidth) {
+	public TableColumn<RECORD, VALUE> setMaxWidth(int maxWidth) {
 		this.maxWidth = maxWidth;
 		return this;
 	}
 
-	public boolean isHidden() {
-		return hidden;
+	public boolean isVisible() {
+		return visible;
 	}
 
-	public TableColumn setHidden(boolean hidden) {
-		this.hidden = hidden;
+	public TableColumn<RECORD, VALUE> setVisible(boolean visible) {
+		this.visible = visible;
+		if (table != null) {
+			table.updateColumnVisibility(this);
+		}
 		return this;
 	}
 
@@ -179,7 +206,7 @@ public boolean isSortable() {
 		return sortable;
 	}
 
-	public TableColumn setSortable(boolean sortable) {
+	public TableColumn<RECORD, VALUE> setSortable(boolean sortable) {
 		this.sortable = sortable;
 		return this;
 	}
@@ -188,7 +215,7 @@ public boolean isResizeable() {
 		return resizeable;
 	}
 
-	public TableColumn setResizeable(boolean resizeable) {
+	public TableColumn<RECORD, VALUE> setResizeable(boolean resizeable) {
 		this.resizeable = resizeable;
 		return this;
 	}
@@ -197,16 +224,91 @@ public boolean isHiddenIfOnlyEmptyCellsVisible() {
 		return hiddenIfOnlyEmptyCellsVisible;
 	}
 
-	public TableColumn setHiddenIfOnlyEmptyCellsVisible(boolean hiddenIfOnlyEmptyCellsVisible) {
+	public TableColumn<RECORD, VALUE> setHiddenIfOnlyEmptyCellsVisible(boolean hiddenIfOnlyEmptyCellsVisible) {
 		this.hiddenIfOnlyEmptyCellsVisible = hiddenIfOnlyEmptyCellsVisible;
 		return this;
 	}
 
-	/*package-private*/ void setTable(Table table) {
+	/*package-private*/ void setTable(Table<RECORD> table) {
 		this.table = table;
 	}
 
 	public String getPropertyName() {
 		return propertyName;
 	}
+
+	public TextAlignment getHeaderAlignment() {
+		return headerAlignment;
+	}
+
+	public TableColumn<RECORD, VALUE> setHeaderAlignment(TextAlignment headerAlignment) {
+		this.headerAlignment = headerAlignment;
+		return this;
+	}
+
+	public ValueExtractor<RECORD, VALUE> getValueExtractor() {
+		return valueExtractor;
+	}
+
+	public TableColumn<RECORD, VALUE> setValueExtractor(ValueExtractor<RECORD, VALUE> valueExtractor) {
+		this.valueExtractor = valueExtractor;
+		if (table != null) {
+			table.refreshData();
+		}
+		return this;
+	}
+
+	public ValueInjector<RECORD, VALUE> getValueInjector() {
+		return valueInjector;
+	}
+
+	public TableColumn<RECORD, VALUE> setValueInjector(ValueInjector<RECORD, VALUE> valueInjector) {
+		this.valueInjector = valueInjector;
+		return this;
+	}
+
+	public AbstractField<?> getHeaderRowField() {
+		return headerRowField;
+	}
+
+	public void setHeaderRowField(AbstractField<?> headerRowField) {
+		this.headerRowField = headerRowField;
+		table.updateHeaderRowField(this);
+	}
+
+	public AbstractField<?> getFooterRowField() {
+		return footerRowField;
+	}
+
+	public void setFooterRowField(AbstractField<?> footerRowField) {
+		this.footerRowField = footerRowField;
+		table.updateFooterRowField(this);
+	}
+
+	public Table<RECORD> getTable() {
+		return table;
+	}
+
+	public Template getDisplayTemplate() {
+		return displayTemplate;
+	}
+
+	public TableColumn<RECORD, VALUE> setDisplayTemplate(Template displayTemplate) {
+		this.displayTemplate = displayTemplate;
+		return this;
+	}
+
+	public PropertyProvider<RECORD> getDisplayPropertyProvider() {
+		return displayPropertyProvider;
+	}
+
+	public TableColumn<RECORD, VALUE> setDisplayPropertyProvider(PropertyProvider<RECORD> displayPropertyProvider) {
+		this.displayPropertyProvider = displayPropertyProvider;
+		return this;
+	}
+
+	public TableColumn<RECORD, VALUE> setDisplayPropertyExtractor(PropertyExtractor<RECORD> displayPropertyExtractor) {
+		this.setDisplayPropertyProvider(displayPropertyExtractor);
+		return this;
+	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/table/TableDataRequestEventData.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/table/TableDataRequestEventData.java
index 9681c56b1..f6576f181 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/table/TableDataRequestEventData.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/table/TableDataRequestEventData.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/table/TableModel.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/table/TableModel.java
index 62e4ac99f..ca9c637ab 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/table/TableModel.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/table/TableModel.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -20,29 +20,12 @@
 package org.teamapps.ux.component.table;
 
 import org.teamapps.data.value.Sorting;
-import org.teamapps.event.Event;
+import org.teamapps.ux.component.infiniteitemview.InfiniteListModel;
 
-import java.util.Collections;
-import java.util.List;
+public interface TableModel<RECORD> extends InfiniteListModel<RECORD> {
 
-public interface TableModel<RECORD> {
-
-	int getCount();
-
-	List<RECORD> getRecords(int startIndex, int length, Sorting sorting);
-
-	default List<RECORD> getChildRecords(RECORD parentRecord, Sorting sorting) {
-		return Collections.emptyList();
+	default void setSorting(Sorting sorting) {
+		// as a default, ignore...
 	}
 
-	// --- Events ---
-
-	Event<Void> onAllDataChanged();
-
-	Event<RECORD> onRecordAdded();
-
-	Event<RECORD> onRecordUpdated();
-
-	Event<RECORD> onRecordDeleted();
-
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/tabpanel/Tab.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/tabpanel/Tab.java
index 94525b83f..2d60bd1f3 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/tabpanel/Tab.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/tabpanel/Tab.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -21,7 +21,7 @@
 
 import org.teamapps.dto.UiTab;
 import org.teamapps.event.Event;
-import org.teamapps.icons.api.Icon;
+import org.teamapps.icons.Icon;
 import org.teamapps.ux.component.Component;
 import org.teamapps.ux.component.toolbar.Toolbar;
 import org.teamapps.ux.session.CurrentSessionContext;
@@ -69,8 +69,8 @@ public UiTab createUiTab() {
 		uiTab.setCloseable(closeable);
 		uiTab.setLazyLoading(this.isLazyLoading());
 		uiTab.setRightSide(this.rightSide);
-		uiTab.setToolbar(Component.createUiComponentReference(this.toolbar));
-		uiTab.setContent(Component.createUiComponentReference(content));
+		uiTab.setToolbar(Component.createUiClientObjectReference(this.toolbar));
+		uiTab.setContent(Component.createUiClientObjectReference(content));
 		uiTab.setVisible(visible);
 		return uiTab;
 	}
@@ -183,12 +183,4 @@ public Tab setVisible(boolean visible) {
 		return this;
 	}
 
-	public void destroy() {
-		if (this.content != null) {
-			this.content.destroy();
-		}
-		if (this.toolbar != null) {
-			this.toolbar.destroy();
-		}
-	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/tabpanel/TabPanel.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/tabpanel/TabPanel.java
index 142e9b63a..fedb763be 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/tabpanel/TabPanel.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/tabpanel/TabPanel.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -26,7 +26,7 @@
 import org.teamapps.event.Event;
 import org.teamapps.ux.component.AbstractComponent;
 import org.teamapps.ux.component.Component;
-import org.teamapps.ux.component.Container;
+import org.teamapps.ux.component.absolutelayout.Length;
 import org.teamapps.ux.component.toolbutton.ToolButton;
 
 import java.util.ArrayList;
@@ -34,14 +34,16 @@
 import java.util.Objects;
 import java.util.stream.Collectors;
 
-public class TabPanel extends AbstractComponent implements Container {
+public class TabPanel extends AbstractComponent implements Component {
 
 	public final Event<Tab> onTabSelected = new Event<>();
 	public final Event<Tab> onTabClosed = new Event<>();
 
 	private final List<Tab> tabs = new ArrayList<>();
 	private Tab selectedTab;
-	private List<ToolButton> toolButtons = new ArrayList<>();
+	private final List<ToolButton> toolButtons = new ArrayList<>();
+	private Length tabBarHeight; // null == use default from CSS
+	private boolean fillTabBarWidth;
 	private boolean hideTabBarIfSingleTab = false;
 	private TabPanelTabStyle tabStyle = TabPanelTabStyle.BLOCKS;
 
@@ -112,7 +114,7 @@ public void setToolButtons(List<ToolButton> toolButtons) {
 
 	private void updateToolButtons() {
 		queueCommandIfRendered(() -> new UiTabPanel.SetToolButtonsCommand(getId(), this.toolButtons.stream()
-				.map(toolButton -> toolButton.createUiComponentReference())
+				.map(toolButton -> toolButton.createUiReference())
 				.collect(Collectors.toList())));
 	}
 
@@ -129,6 +131,24 @@ public void setHideTabBarIfSingleTab(boolean hideTabBarIfSingleTab) {
 		this.queueCommandIfRendered(() -> new UiTabPanel.SetHideTabBarIfSingleTabCommand(getId(), hideTabBarIfSingleTab));
 	}
 
+	public Length getTabBarHeight() {
+		return tabBarHeight;
+	}
+
+	public void setTabBarHeight(Length tabBarHeight) {
+		this.tabBarHeight = tabBarHeight;
+		this.queueCommandIfRendered(() -> new UiTabPanel.SetTabBarHeightCommand(getId(), tabBarHeight != null ? tabBarHeight.toCssString() : null));
+	}
+
+	public boolean isFillTabBarWidth() {
+		return fillTabBarWidth;
+	}
+
+	public void setFillTabBarWidth(boolean fillTabBarWidth) {
+		this.fillTabBarWidth = fillTabBarWidth;
+		this.queueCommandIfRendered(() -> new UiTabPanel.SetFillTabBarWidthCommand(getId(), hideTabBarIfSingleTab));
+	}
+
 	public TabPanelTabStyle getTabStyle() {
 		return tabStyle;
 	}
@@ -140,26 +160,23 @@ public void setTabStyle(TabPanelTabStyle tabStyle) {
 
 	@Override
 	public UiComponent createUiComponent() {
-		UiTabPanel uiTabPanel = new UiTabPanel(getId());
+		UiTabPanel uiTabPanel = new UiTabPanel();
 		mapAbstractUiComponentProperties(uiTabPanel);
 		List<UiTab> uiTabs = tabs.stream()
 				.map(tab -> tab != null ? tab.createUiTab() : null)
 				.collect(Collectors.toList());
 		uiTabPanel.setTabs(uiTabs);
 		uiTabPanel.setSelectedTabId(this.getSelectedTab() != null ? this.getSelectedTab().getClientId() : null);
+		uiTabPanel.setTabBarHeight(tabBarHeight != null ? tabBarHeight.toCssString() : null);
+		uiTabPanel.setFillTabBarWidth(fillTabBarWidth);
 		uiTabPanel.setHideTabBarIfSingleTab(hideTabBarIfSingleTab);
 		uiTabPanel.setTabStyle(tabStyle.toUiTabPanelTabStyle());
 		uiTabPanel.setToolButtons(toolButtons.stream()
-				.map(toolButton -> (toolButton.createUiComponentReference()))
+				.map(toolButton -> (toolButton.createUiReference()))
 				.collect(Collectors.toList()));
 		return uiTabPanel;
 	}
 
-	@Override
-	protected void doDestroy() {
-		this.tabs.forEach(Tab::destroy);
-	}
-
 	private Tab getTabByClientId(String tabId) {
 		return tabs.stream()
 				.filter(tab -> Objects.equals(tab.getClientId(), tabId))
@@ -177,15 +194,19 @@ public void handleUiEvent(UiEvent event) {
 					Tab oldSelectedTab = this.selectedTab;
 					Tab selectedTab = this.getTabByClientId(tabSelectedEvent.getTabId());
 					this.selectedTab = selectedTab;
-					oldSelectedTab.onDeselected.fire(null);
-					selectedTab.onSelected.fire(null);
+					if (oldSelectedTab != null) {
+						oldSelectedTab.onDeselected.fire(null);
+					}
+					if (selectedTab != null) {
+						selectedTab.onSelected.fire(null);
+					}
 				}
 				onTabSelected.fire(selectedTab);
 				break;
 			case UI_TAB_PANEL_TAB_NEEDS_REFRESH:
 				UiTabPanel.TabNeedsRefreshEvent tabNeedsRefreshEvent = (UiTabPanel.TabNeedsRefreshEvent) event;
 				Tab tab = getTabByClientId(tabNeedsRefreshEvent.getTabId());
-				queueCommandIfRendered(() -> new UiTabPanel.SetTabContentCommand(getId(), tab.getClientId(), Component.createUiComponentReference(tab.getContent())));
+				queueCommandIfRendered(() -> new UiTabPanel.SetTabContentCommand(getId(), tab.getClientId(), Component.createUiClientObjectReference(tab.getContent())));
 				break;
 			case UI_TAB_PANEL_TAB_CLOSED:
 				UiTabPanel.TabClosedEvent tabClosedEvent = (UiTabPanel.TabClosedEvent) event;
@@ -205,11 +226,11 @@ public void handleUiEvent(UiEvent event) {
 	}
 
 	/*package-private*/ void handleTabToolbarChanged(Tab tab) {
-		queueCommandIfRendered(() -> new UiTabPanel.SetTabToolbarCommand(getId(), tab.getClientId(), Component.createUiComponentReference(tab.getToolbar())));
+		queueCommandIfRendered(() -> new UiTabPanel.SetTabToolbarCommand(getId(), tab.getClientId(), Component.createUiClientObjectReference(tab.getToolbar())));
 	}
 
 	/*package-private*/ void handleTabContentChanged(Tab tab) {
-		queueCommandIfRendered(() -> new UiTabPanel.SetTabContentCommand(getId(), tab.getClientId(), Component.createUiComponentReference(tab.getContent())));
+		queueCommandIfRendered(() -> new UiTabPanel.SetTabContentCommand(getId(), tab.getClientId(), Component.createUiClientObjectReference(tab.getContent())));
 	}
 
 	/*package-private*/ void handleTabConfigurationChanged(Tab tab) {
@@ -224,10 +245,4 @@ public void handleUiEvent(UiEvent event) {
 		queueCommandIfRendered(() -> new UiTabPanel.SetTabConfigurationCommand(getId(), tab.getClientId(), iconString, caption, tab.isCloseable(), tab.isVisible(), tab.isRightSide()));
 	}
 
-	@Override
-	public boolean isChildVisible(Component child) {
-		boolean isActiveTab = this.getSelectedTab() != null && this.getSelectedTab().getContent() == child;
-		boolean isToolButton = this.toolButtons.contains(child);
-		return this.isEffectivelyVisible() && (isActiveTab || isToolButton);
-	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/tabpanel/TabPanelTabStyle.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/tabpanel/TabPanelTabStyle.java
index 6d27ef929..8755f50d7 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/tabpanel/TabPanelTabStyle.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/tabpanel/TabPanelTabStyle.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/template/BaseTemplate.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/template/BaseTemplate.java
index c06e46166..9d896791f 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/template/BaseTemplate.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/template/BaseTemplate.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,29 +19,14 @@
  */
 package org.teamapps.ux.component.template;
 
+import org.teamapps.common.format.Color;
+import org.teamapps.common.format.RgbaColor;
 import org.teamapps.dto.UiTemplate;
 import org.teamapps.dto.UiTemplateReference;
-import org.teamapps.ux.component.format.Border;
-import org.teamapps.common.format.Color;
-import org.teamapps.ux.component.format.FontStyle;
-import org.teamapps.ux.component.format.HorizontalElementAlignment;
-import org.teamapps.ux.component.format.Line;
-import org.teamapps.ux.component.format.LineType;
-import org.teamapps.ux.component.format.Shadow;
-import org.teamapps.ux.component.format.SizeType;
-import org.teamapps.ux.component.format.SizingPolicy;
-import org.teamapps.ux.component.format.Spacing;
-import org.teamapps.ux.component.format.TextAlignment;
-import org.teamapps.ux.component.format.VerticalElementAlignment;
-import org.teamapps.ux.component.template.gridtemplate.BadgeElement;
-import org.teamapps.ux.component.template.gridtemplate.GridTemplate;
-import org.teamapps.ux.component.template.gridtemplate.IconElement;
-import org.teamapps.ux.component.template.gridtemplate.ImageElement;
-import org.teamapps.ux.component.template.gridtemplate.TextElement;
-
-import java.util.HashMap;
+import org.teamapps.ux.component.format.*;
+import org.teamapps.ux.component.template.gridtemplate.*;
+
 import java.util.List;
-import java.util.Map;
 
 public enum BaseTemplate implements Template {
 
@@ -73,45 +58,27 @@ public enum BaseTemplate implements Template {
 
 	FORM_SECTION_HEADER(createFormSectionHeaderTemplate()),
 
-	FORM_BUTTON(createFormButtonTemplate()),
+	BUTTON(createFormButtonTemplate(16, 1)),
+	BUTTON_LARGE(createFormButtonTemplate(24, 1.6f)),
+	BUTTON_XLARGE(createFormButtonTemplate(32, 2.2f)),
 
 	NOTIFICATION_ICON_CAPTION(createNotificationTemplateWithIconAndCaption()),
 	NOTIFICATION_ICON_CAPTION_DESCRIPTION(createNotificationTemplateWithIconAndCaptionAndDescription()),
 
 	NAVIGATION_BAR_ICON_ONLY(createNavigationBarIconOnlyTemplate());
 
-	public static final String PROPERTY_ID = "id";
 	public static final String PROPERTY_ICON = "icon";
 	public static final String PROPERTY_IMAGE = "image";
 	public static final String PROPERTY_CAPTION = "caption";
 	public static final String PROPERTY_DESCRIPTION = "description";
 	public static final String PROPERTY_BADGE = "badge";
-
-	public static Map<String, Template> createTemplateMap(BaseTemplate... templates) {
-		Map<String, Template> templateMap = new HashMap<>();
-		for (BaseTemplate template : templates) {
-			templateMap.put(template.name(), template);
-		}
-		return templateMap;
-	}
-
-	/*
-		int iconSize, int imageSize, int imageBorderWidth, int imageShadowWidth, float captionSize, float caption2Size, Color badgeColor
-
-		Base list template:
-			lines: 1 - 3
-
-
-		left: icon, image
-		line1: line1Icon, line1Caption1, line1Caption2, (-->right:) line1RightCaption, line1Badge
-		line2: line2Icon, line2Caption1, line2Caption2
-		line3: ...
-
-
-	 */
+	public static final String PROPERTY_ARIA_LABEL = "ariaLabel";
+	public static final String PROPERTY_TITLE = "title";
 
 	private static Template createToolbarButtonTemplate(int minWidth, int iconSize, float captionFontSize, float descriptionFontSize) {
 		return new GridTemplate()
+				.setAriaLabelProperty(PROPERTY_ARIA_LABEL)
+				.setTitleProperty(PROPERTY_TITLE)
 				.setMinWidth(minWidth)
 				.setPadding(new Spacing(0))
 				.addColumn(SizingPolicy.AUTO, 2, 2)
@@ -122,39 +89,47 @@ private static Template createToolbarButtonTemplate(int minWidth, int iconSize,
 						.setVerticalAlignment(VerticalElementAlignment.TOP)
 						.setHorizontalAlignment(HorizontalElementAlignment.CENTER))
 				.addElement(new ImageElement(PROPERTY_IMAGE, 0, 0, iconSize, iconSize)
-						.setBorder(new Border(new Line(Color.GRAY, LineType.SOLID, 0.5f)).setBorderRadius(300))
+						.setBorder(new Border(new Line(RgbaColor.GRAY, LineType.SOLID, 0.5f)).setBorderRadius(300))
 						.setShadow(Shadow.withSize(1.5f))
 						.setVerticalAlignment(VerticalElementAlignment.TOP).setHorizontalAlignment(HorizontalElementAlignment.LEFT))
 				.addElement(new TextElement(PROPERTY_CAPTION, 1, 0)
+						.setTextAlignment(TextAlignment.CENTER)
 						.setWrapLines(true)
 						.setFontStyle(captionFontSize)
 						.setVerticalAlignment(VerticalElementAlignment.TOP)
 						.setHorizontalAlignment(HorizontalElementAlignment.CENTER))
 				.addElement(new TextElement(PROPERTY_DESCRIPTION, 2, 0)
+						.setTextAlignment(TextAlignment.CENTER)
 						.setWrapLines(true)
-						.setFontStyle(descriptionFontSize, Color.GRAY_STANDARD)
+						.setFontStyle(descriptionFontSize, Color.fromVariableName("ta-text-color-gray"))
 						.setVerticalAlignment(VerticalElementAlignment.TOP)
 						.setHorizontalAlignment(HorizontalElementAlignment.CENTER));
 	}
 
 	private static Template createToolbarButtonTinyTemplate() {
 		return new GridTemplate()
+				.setAriaLabelProperty(PROPERTY_ARIA_LABEL)
+				.setTitleProperty(PROPERTY_TITLE)
 				.setPadding(new Spacing(0))
 				.addColumn(SizeType.AUTO, 0, 0, 2, 2)
 				.addColumn(SizingPolicy.FRACTION)
-				.addRow(SizeType.AUTO, 0, 0, 5, 5)
-				.addElement(new IconElement(PROPERTY_ICON, 0, 0, 16))
-				.addElement(new ImageElement(PROPERTY_IMAGE, 0, 0, 16, 16)
-						.setBorder(new Border(new Line(Color.GRAY, LineType.SOLID, 0.5f)).setBorderRadius(300))
+				.addRow(SizeType.AUTO, 0, 0, 2, 2)
+				.addElement(new IconElement(PROPERTY_ICON, 0, 0, 20).setMargin(new Spacing(0, 2, 0, 0)))
+				.addElement(new ImageElement(PROPERTY_IMAGE, 0, 0, 20, 20)
+						.setBorder(new Border(new Line(RgbaColor.GRAY, LineType.SOLID, 0.5f)).setBorderRadius(300))
 						.setShadow(Shadow.withSize(1.5f))
-						.setVerticalAlignment(VerticalElementAlignment.TOP).setHorizontalAlignment(HorizontalElementAlignment.LEFT))
+						.setVerticalAlignment(VerticalElementAlignment.TOP).setHorizontalAlignment(HorizontalElementAlignment.LEFT)
+						.setMargin(new Spacing(0, 2, 0, 0)))
 				.addElement(new TextElement(PROPERTY_CAPTION, 0, 1)
+						.setTextAlignment(TextAlignment.CENTER)
 						.setWrapLines(false)
 						.setPadding(new Spacing(0, 2, 0, 0)));
 	}
 
 	private static Template createToolButtonTemplate() {
 		return new GridTemplate()
+				.setAriaLabelProperty(PROPERTY_ARIA_LABEL)
+				.setTitleProperty(PROPERTY_TITLE)
 				.addColumn(SizingPolicy.AUTO)
 				.addRow(SizingPolicy.AUTO)
 				.addElement(new IconElement(PROPERTY_ICON, 0, 0, 12))
@@ -163,6 +138,8 @@ private static Template createToolButtonTemplate() {
 
 	private static Template createToolbarMenuGroupHeader() {
 		return new GridTemplate()
+				.setAriaLabelProperty(PROPERTY_ARIA_LABEL)
+				.setTitleProperty(PROPERTY_TITLE)
 				.setMinHeight(20).setMaxHeight(20)
 				.setPadding(new Spacing(0))
 				.addColumn(SizeType.AUTO, 0, 0, 2, 2)
@@ -170,7 +147,7 @@ private static Template createToolbarMenuGroupHeader() {
 				.addRow(SizeType.AUTO, 0, 0, 1, 1)
 				.addElement(new IconElement(PROPERTY_ICON, 0, 0, 16))
 				.addElement(new ImageElement(PROPERTY_IMAGE, 0, 0, 16, 16)
-						.setBorder(new Border(new Line(Color.GRAY, LineType.SOLID, 0.5f)).setBorderRadius(300))
+						.setBorder(new Border(new Line(RgbaColor.GRAY, LineType.SOLID, 0.5f)).setBorderRadius(300))
 						.setShadow(Shadow.withSize(1.5f))
 						.setVerticalAlignment(VerticalElementAlignment.TOP).setHorizontalAlignment(HorizontalElementAlignment.LEFT))
 				.addElement(new TextElement(PROPERTY_CAPTION, 0, 1).setWrapLines(false));
@@ -178,7 +155,8 @@ private static Template createToolbarMenuGroupHeader() {
 
 	private static Template createToolbarMenuBigButtonTemplate() {
 		return new GridTemplate()
-				.setMinWidth(0).setMaxWidth(0)
+				.setAriaLabelProperty(PROPERTY_ARIA_LABEL)
+				.setTitleProperty(PROPERTY_TITLE)
 				.setMinHeight(44).setMaxHeight(100)
 				.setGridGap(0)
 				.setPadding(new Spacing(4))
@@ -188,15 +166,21 @@ private static Template createToolbarMenuBigButtonTemplate() {
 				.addRow(SizeType.AUTO, 0, 0, 2, 2)
 				.addElement(new IconElement(PROPERTY_ICON, 0, 0, 32))
 				.addElement(new ImageElement(PROPERTY_IMAGE, 0, 0, 32, 32)
-						.setBorder(new Border(new Line(Color.GRAY, LineType.SOLID, 0.5f)).setBorderRadius(300))
+						.setBorder(new Border(new Line(RgbaColor.GRAY, LineType.SOLID, 0.5f)).setBorderRadius(300))
 						.setShadow(Shadow.withSize(1.5f))
 						.setVerticalAlignment(VerticalElementAlignment.TOP).setHorizontalAlignment(HorizontalElementAlignment.LEFT))
 				.addElement(new TextElement(PROPERTY_CAPTION, 0, 1).setWrapLines(true))
-				.addElement(new TextElement(PROPERTY_DESCRIPTION, 1, 1).setWrapLines(true).setFontStyle(0.8f, Color.GRAY_STANDARD));
+				.addElement(new TextElement(PROPERTY_DESCRIPTION, 1, 1).setWrapLines(true).setFontStyle(0.8f, Color.fromVariableName("ta-text-color-gray")));
 	}
 
 	public static Template createListStyleIconTwoLinesBadgeTemplate(int iconSize, VerticalElementAlignment verticalIconAlignment, int maxHeight, int spacing) {
+		return createListStyleIconTwoLinesBadgeTemplate(iconSize, verticalIconAlignment, maxHeight, spacing, true);
+	}
+
+	public static Template createListStyleIconTwoLinesBadgeTemplate(int iconSize, VerticalElementAlignment verticalIconAlignment, int maxHeight, int spacing, boolean wrapLines) {
 		return new GridTemplate()
+				.setAriaLabelProperty(PROPERTY_ARIA_LABEL)
+				.setTitleProperty(PROPERTY_TITLE)
 				.setMaxHeight(maxHeight)
 				.setPadding(new Spacing(spacing))
 				.addColumn(SizingPolicy.AUTO) // margin defined by badge, so no margin when no badge
@@ -209,30 +193,36 @@ public static Template createListStyleIconTwoLinesBadgeTemplate(int iconSize, Ve
 						.setVerticalAlignment(verticalIconAlignment)
 						.setMargin(new Spacing(0, 4, 0, 0)))
 				.addElement(new ImageElement(PROPERTY_IMAGE, 0, 0, iconSize, iconSize).setRowSpan(2)
-						.setBorder(new Border(new Line(Color.GRAY, LineType.SOLID, 0.5f)).setBorderRadius(300))
+						.setBorder(new Border(new Line(RgbaColor.GRAY, LineType.SOLID, 0.5f)).setBorderRadius(300))
 						.setShadow(Shadow.withSize(0.5f))
 						.setVerticalAlignment(verticalIconAlignment)
 						.setMargin(new Spacing(0, 4, 0, 0)))
 				.addElement(new TextElement(PROPERTY_CAPTION, 0, 1)
-						.setWrapLines(true)
+						.setWrapLines(wrapLines)
 						.setVerticalAlignment(VerticalElementAlignment.BOTTOM)
 						.setHorizontalAlignment(HorizontalElementAlignment.LEFT))
 				.addElement(new TextElement(PROPERTY_DESCRIPTION, 1, 1)
 						.setColSpan(2)
-						.setWrapLines(true)
-						.setFontStyle(0.8f, Color.GRAY_STANDARD)
+						.setWrapLines(wrapLines)
+						.setFontStyle(0.8f, Color.fromVariableName("ta-text-color-gray"))
 						.setVerticalAlignment(VerticalElementAlignment.TOP)
 						.setHorizontalAlignment(HorizontalElementAlignment.LEFT))
 				.addElement(new BadgeElement(PROPERTY_BADGE, 0, 2)
-						.setFontStyle(new FontStyle().setFontColor(Color.WHITE).setBackgroundColor(Color.DEEP_SKY_BLUE))
-						.setWrapLines(true)
+						.setFontStyle(new FontStyle().setFontColor(RgbaColor.WHITE).setBackgroundColor(RgbaColor.DEEP_SKY_BLUE))
+						.setWrapLines(wrapLines)
 						.setVerticalAlignment(VerticalElementAlignment.BOTTOM)
 						.setHorizontalAlignment(HorizontalElementAlignment.RIGHT)
 						.setMargin(new Spacing(0, 0, 0, 3)));
 	}
 
 	public static Template createTreeSingleLineNodeTemplate(int iconSize, VerticalElementAlignment verticalIconAlignment, int maxHeight) {
+		return createTreeSingleLineNodeTemplate(iconSize, verticalIconAlignment, maxHeight, false);
+	}
+
+	public static Template createTreeSingleLineNodeTemplate(int iconSize, VerticalElementAlignment verticalIconAlignment, int maxHeight, boolean wrapLines) {
 		return new GridTemplate()
+				.setAriaLabelProperty(PROPERTY_ARIA_LABEL)
+				.setTitleProperty(PROPERTY_TITLE)
 				.setMinHeight(16).setMaxHeight(maxHeight)
 				.setPadding(new Spacing(2))
 				.addColumn(SizingPolicy.AUTO) // margin defined by badge, so no margin when no badge
@@ -243,18 +233,19 @@ public static Template createTreeSingleLineNodeTemplate(int iconSize, VerticalEl
 						.setVerticalAlignment(verticalIconAlignment)
 						.setMargin(new Spacing(0, 3, 0, 0)))
 				.addElement(new ImageElement(PROPERTY_IMAGE, 0, 0, iconSize, iconSize)
-						.setBorder(new Border(new Line(Color.GRAY, LineType.SOLID, 0.5f)).setBorderRadius(300))
+						.setBorder(new Border(new Line(RgbaColor.GRAY, LineType.SOLID, 0.5f)).setBorderRadius(300))
 						//todo: shadow only if size of image large enough
 						.setShadow(Shadow.withSize(0.5f))
 						.setVerticalAlignment(verticalIconAlignment)
 						.setMargin(new Spacing(0, 3, 0, 0)))
 				.addElement(new TextElement(PROPERTY_CAPTION, 0, 1)
-						.setWrapLines(false)
+						.setWrapLines(wrapLines)
 						.setVerticalAlignment(VerticalElementAlignment.CENTER)
-						.setHorizontalAlignment(HorizontalElementAlignment.LEFT))
+						.setHorizontalAlignment(HorizontalElementAlignment.LEFT)
+				)
 				.addElement(new BadgeElement(PROPERTY_BADGE, 0, 2)
-						.setFontStyle(new FontStyle().setFontColor(Color.WHITE).setBackgroundColor(Color.DEEP_SKY_BLUE))
-						.setWrapLines(true)
+						.setFontStyle(new FontStyle().setFontColor(RgbaColor.WHITE).setBackgroundColor(RgbaColor.DEEP_SKY_BLUE))
+						.setWrapLines(wrapLines)
 						.setVerticalAlignment(VerticalElementAlignment.CENTER)
 						.setHorizontalAlignment(HorizontalElementAlignment.RIGHT)
 						.setMargin(new Spacing(0, 0, 0, 3)));
@@ -262,40 +253,48 @@ public static Template createTreeSingleLineNodeTemplate(int iconSize, VerticalEl
 
 	private static Template createFormSectionHeaderTemplate() {
 		return new GridTemplate()
-				.setMinWidth(0).setMaxWidth(0)
-				.setMinHeight(20).setMaxHeight(20)
-				.setGridGap(0)
+				.setAriaLabelProperty(PROPERTY_ARIA_LABEL)
+				.setTitleProperty(PROPERTY_TITLE)
+				.setMinHeight(28).setMaxHeight(28)
+				.setGridGap(4)
 				.setPadding(new Spacing(0))
 				.addColumn(SizeType.AUTO, 0, 0, 2, 2)
 				.addColumn(SizeType.AUTO, 0, 0, 0, 2)
 				.addRow(SizeType.AUTO, 0, 0, 1, 1)
-				.addElement(new IconElement(PROPERTY_ICON, 0, 0, 16))
-				.addElement(new ImageElement(PROPERTY_IMAGE, 0, 0, 16, 16)
-						.setBorder(new Border(new Line(Color.GRAY, LineType.SOLID, 0.5f)).setBorderRadius(300))
+				.addElement(new IconElement(PROPERTY_ICON, 0, 0, 24))
+				.addElement(new ImageElement(PROPERTY_IMAGE, 0, 0, 24, 24)
+						.setBorder(new Border(new Line(RgbaColor.GRAY, LineType.SOLID, 0.5f)).setBorderRadius(300))
 						.setShadow(Shadow.withSize(1.5f))
 						.setVerticalAlignment(VerticalElementAlignment.TOP).setHorizontalAlignment(HorizontalElementAlignment.LEFT))
-				.addElement(new TextElement(PROPERTY_CAPTION, 0, 1).setWrapLines(false));
+				.addElement(new TextElement(PROPERTY_CAPTION, 0, 1)
+						.setFontStyle(1.15f)
+						.setWrapLines(false));
 	}
 
-	public static Template createFormButtonTemplate() {
+	public static Template createFormButtonTemplate(int iconSize, float relativeFontSize) {
 		return new GridTemplate()
-				.setMinWidth(0).setMaxWidth(0)
-				.setMinHeight(20).setMaxHeight(26)
+				.setAriaLabelProperty(PROPERTY_ARIA_LABEL)
+				.setTitleProperty(PROPERTY_TITLE)
+				.setMinHeight(20)
 				.setGridGap(0)
 				.setPadding(new Spacing(1, 5))
 				.addColumn(SizeType.AUTO, 0, 0, 2, 4)
 				.addColumn(SizingPolicy.AUTO, 0, 2)
-				.addRow(SizeType.AUTO, 0, 0, 3, 3)
-				.addElement(new IconElement(PROPERTY_ICON, 0, 0, 16))
-				.addElement(new ImageElement(PROPERTY_IMAGE, 0, 0, 16, 16)
-						.setBorder(new Border(new Line(Color.GRAY, LineType.SOLID, 0.5f)).setBorderRadius(300))
+				.addRow(SizeType.AUTO, 0, 0, 3, 0)
+				.addElement(new IconElement(PROPERTY_ICON, 0, 0, iconSize))
+				.addElement(new ImageElement(PROPERTY_IMAGE, 0, 0, iconSize, iconSize)
+						.setBorder(new Border(new Line(RgbaColor.GRAY, LineType.SOLID, 0.5f)).setBorderRadius(300))
 						.setShadow(Shadow.withSize(1.5f))
 						.setVerticalAlignment(VerticalElementAlignment.TOP).setHorizontalAlignment(HorizontalElementAlignment.LEFT))
-				.addElement(new TextElement(PROPERTY_CAPTION, 0, 1).setWrapLines(false));
+				.addElement(new TextElement(PROPERTY_CAPTION, 0, 1)
+						.setFontStyle(relativeFontSize)
+						.setWrapLines(false));
 	}
 
 	private static Template createNotificationTemplateWithIconAndCaption() {
 		return new GridTemplate()
+				.setAriaLabelProperty(PROPERTY_ARIA_LABEL)
+				.setTitleProperty(PROPERTY_TITLE)
 				.setGridGap(5)
 				.setPadding(new Spacing(5))
 				.addColumn(SizeType.AUTO, 0, 0, 0, 0)
@@ -306,7 +305,7 @@ private static Template createNotificationTemplateWithIconAndCaption() {
 						.setHorizontalAlignment(HorizontalElementAlignment.LEFT)
 				)
 				.addElement(new ImageElement(PROPERTY_IMAGE, 0, 0, 32, 32)
-						.setBorder(new Border(new Line(Color.GRAY, LineType.SOLID, 0.5f)).setBorderRadius(300))
+						.setBorder(new Border(new Line(RgbaColor.GRAY, LineType.SOLID, 0.5f)).setBorderRadius(300))
 						.setShadow(Shadow.withSize(1.5f))
 						.setVerticalAlignment(VerticalElementAlignment.CENTER)
 						.setHorizontalAlignment(HorizontalElementAlignment.LEFT)
@@ -318,6 +317,8 @@ private static Template createNotificationTemplateWithIconAndCaption() {
 
 	private static Template createNotificationTemplateWithIconAndCaptionAndDescription() {
 		return new GridTemplate()
+				.setAriaLabelProperty(PROPERTY_ARIA_LABEL)
+				.setTitleProperty(PROPERTY_TITLE)
 				.setGridGap(3)
 				.setPadding(new Spacing(6))
 				.addColumn(SizeType.AUTO, 0, 0, 0, 0)
@@ -332,7 +333,7 @@ private static Template createNotificationTemplateWithIconAndCaptionAndDescripti
 				)
 				.addElement(new ImageElement(PROPERTY_IMAGE, 0, 0, 32, 32)
 						.setRowSpan(2)
-						.setBorder(new Border(new Line(Color.GRAY, LineType.SOLID, 0.5f)).setBorderRadius(300))
+						.setBorder(new Border(new Line(RgbaColor.GRAY, LineType.SOLID, 0.5f)).setBorderRadius(300))
 						.setShadow(Shadow.withSize(1.5f))
 						.setVerticalAlignment(VerticalElementAlignment.CENTER)
 						.setHorizontalAlignment(HorizontalElementAlignment.LEFT)
@@ -349,8 +350,8 @@ private static Template createNotificationTemplateWithIconAndCaptionAndDescripti
 
 	private static Template createItemViewTemplate() {
 		return new GridTemplate()
-				.setMinWidth(0).setMaxWidth(0)
-				.setMinHeight(0).setMaxHeight(0)
+				.setAriaLabelProperty(PROPERTY_ARIA_LABEL)
+				.setTitleProperty(PROPERTY_TITLE)
 				.setGridGap(0)
 				.setPadding(new Spacing(0))
 				.addColumn(SizeType.AUTO, 0, 40, 2, 2)
@@ -363,7 +364,7 @@ private static Template createItemViewTemplate() {
 						.setMargin(new Spacing(0, 0, 2, 0))
 				)
 				.addElement(new ImageElement(PROPERTY_IMAGE, 0, 0, 32, 32)
-						.setBorder(new Border(new Line(Color.GRAY, LineType.SOLID, 0.5f)).setBorderRadius(300))
+						.setBorder(new Border(new Line(RgbaColor.GRAY, LineType.SOLID, 0.5f)).setBorderRadius(300))
 						.setShadow(Shadow.withSize(1.5f))
 						.setVerticalAlignment(VerticalElementAlignment.TOP)
 						.setHorizontalAlignment(HorizontalElementAlignment.LEFT)
@@ -377,15 +378,16 @@ private static Template createItemViewTemplate() {
 				.addElement(new TextElement(PROPERTY_DESCRIPTION, 2, 0)
 						.setTextAlignment(TextAlignment.CENTER)
 						.setWrapLines(true)
-						.setFontStyle(0.8f, Color.GRAY_STANDARD)
+						.setFontStyle(0.8f, Color.fromVariableName("ta-text-color-gray"))
 						.setVerticalAlignment(VerticalElementAlignment.TOP)
 						.setHorizontalAlignment(HorizontalElementAlignment.CENTER));
 	}
 
 	private static Template createFloatingFileItemTemplate() {
 		return new GridTemplate()
-				.setMinWidth(0).setMaxWidth(140)
-				.setMinHeight(0).setMaxHeight(0)
+				.setAriaLabelProperty(PROPERTY_ARIA_LABEL)
+				.setTitleProperty(PROPERTY_TITLE)
+				.setMaxWidth(140)
 				.setGridGap(0)
 				.setPadding(new Spacing(0))
 				.addColumn(SizeType.AUTO, 0, 40, 2, 2)
@@ -396,7 +398,7 @@ private static Template createFloatingFileItemTemplate() {
 						.setVerticalAlignment(VerticalElementAlignment.TOP)
 						.setHorizontalAlignment(HorizontalElementAlignment.CENTER))
 				.addElement(new ImageElement(PROPERTY_IMAGE, 0, 0, 32, 32)
-						.setBorder(new Border(new Line(Color.GRAY, LineType.SOLID, 0.5f)).setBorderRadius(300))
+						.setBorder(new Border(new Line(RgbaColor.GRAY, LineType.SOLID, 0.5f)).setBorderRadius(300))
 						.setShadow(Shadow.withSize(1.5f))
 						.setVerticalAlignment(VerticalElementAlignment.TOP).setHorizontalAlignment(HorizontalElementAlignment.LEFT))
 				.addElement(new TextElement(PROPERTY_CAPTION, 1, 0)
@@ -407,15 +409,15 @@ private static Template createFloatingFileItemTemplate() {
 				.addElement(new TextElement(PROPERTY_DESCRIPTION, 2, 0)
 						.setWrapLines(true)
 						.setTextAlignment(TextAlignment.CENTER)
-						.setFontStyle(0.8f, Color.GRAY_STANDARD)
+						.setFontStyle(0.8f, Color.fromVariableName("ta-text-color-gray"))
 						.setVerticalAlignment(VerticalElementAlignment.TOP)
 						.setHorizontalAlignment(HorizontalElementAlignment.CENTER));
 	}
 
 	private static Template createListFileItemTemplate() {
 		return new GridTemplate()
-				.setMinWidth(0).setMaxWidth(0)
-				.setMinHeight(0).setMaxHeight(0)
+				.setAriaLabelProperty(PROPERTY_ARIA_LABEL)
+				.setTitleProperty(PROPERTY_TITLE)
 				.setGridGap(0)
 				.setPadding(new Spacing(0))
 				.addColumn(SizeType.FIXED, 32, 0, 0, 0)
@@ -427,7 +429,7 @@ private static Template createListFileItemTemplate() {
 						.setHorizontalAlignment(HorizontalElementAlignment.LEFT)
 						.setRowSpan(2))
 				.addElement(new ImageElement(PROPERTY_IMAGE, 0, 0, 32, 32)
-						.setBorder(new Border(new Line(Color.GRAY, LineType.SOLID, 0.5f)).setBorderRadius(300))
+						.setBorder(new Border(new Line(RgbaColor.GRAY, LineType.SOLID, 0.5f)).setBorderRadius(300))
 						.setShadow(Shadow.withSize(1.5f))
 						.setVerticalAlignment(VerticalElementAlignment.CENTER)
 						.setHorizontalAlignment(HorizontalElementAlignment.LEFT)
@@ -435,14 +437,14 @@ private static Template createListFileItemTemplate() {
 				.addElement(new TextElement(PROPERTY_CAPTION, 0, 1).setWrapLines(true)
 						.setVerticalAlignment(VerticalElementAlignment.BOTTOM).setHorizontalAlignment(HorizontalElementAlignment.LEFT))
 				.addElement(new TextElement(PROPERTY_DESCRIPTION, 1, 1).setWrapLines(true)
-						.setFontStyle(0.8f, Color.GRAY_STANDARD).setVerticalAlignment(VerticalElementAlignment.TOP)
+						.setFontStyle(0.8f, Color.fromVariableName("ta-text-color-gray")).setVerticalAlignment(VerticalElementAlignment.TOP)
 						.setHorizontalAlignment(HorizontalElementAlignment.LEFT));
 	}
 
 	private static Template createApplicationListingTemplate() {
 		return new GridTemplate()
-//				.setMaxHeight(170)
-//				.setMinHeight(170)
+				.setAriaLabelProperty(PROPERTY_ARIA_LABEL)
+				.setTitleProperty(PROPERTY_TITLE)
 				.setPadding(new Spacing(10))
 				.addColumn(SizingPolicy.AUTO) // margin defined by badge, so no margin when no badge
 				.addColumn(SizingPolicy.FRACTION)
@@ -454,7 +456,7 @@ private static Template createApplicationListingTemplate() {
 						.setVerticalAlignment(VerticalElementAlignment.CENTER)
 						.setMargin(new Spacing(0, 3, 0, 0)))
 				.addElement(new ImageElement(PROPERTY_IMAGE, 0, 0, 64, 64).setRowSpan(2)
-						.setBorder(new Border(new Line(Color.GRAY, LineType.SOLID, 0.5f)).setBorderRadius(300))
+						.setBorder(new Border(new Line(RgbaColor.GRAY, LineType.SOLID, 0.5f)).setBorderRadius(300))
 						.setShadow(Shadow.withSize(1.5f))
 						.setVerticalAlignment(VerticalElementAlignment.CENTER)
 						.setMargin(new Spacing(0, 3, 0, 0)))
@@ -465,11 +467,11 @@ private static Template createApplicationListingTemplate() {
 				.addElement(new TextElement(PROPERTY_DESCRIPTION, 1, 1)
 						.setColSpan(2)
 						.setWrapLines(true)
-						.setFontStyle(0.8f, Color.GRAY_STANDARD)
+						.setFontStyle(0.8f, Color.fromVariableName("ta-text-color-gray"))
 						.setVerticalAlignment(VerticalElementAlignment.TOP)
 						.setHorizontalAlignment(HorizontalElementAlignment.LEFT))
 				.addElement(new BadgeElement(PROPERTY_BADGE, 0, 2)
-						.setFontStyle(new FontStyle().setFontColor(Color.WHITE).setBackgroundColor(Color.DEEP_SKY_BLUE))
+						.setFontStyle(new FontStyle().setFontColor(RgbaColor.WHITE).setBackgroundColor(RgbaColor.DEEP_SKY_BLUE))
 						.setWrapLines(true)
 						.setVerticalAlignment(VerticalElementAlignment.BOTTOM)
 						.setHorizontalAlignment(HorizontalElementAlignment.RIGHT)
@@ -478,14 +480,16 @@ private static Template createApplicationListingTemplate() {
 
 	private static Template createNavigationBarIconOnlyTemplate() {
 		return new GridTemplate()
+				.setAriaLabelProperty(PROPERTY_ARIA_LABEL)
+				.setTitleProperty(PROPERTY_TITLE)
 				.setPadding(new Spacing(2))
 				.addColumn(new SizingPolicy(SizeType.FIXED, 24, 24))
 				.addRow(new SizingPolicy(SizeType.FIXED, 24, 24))
 				.addElement(new IconElement(PROPERTY_ICON, 0, 0, 24));
 	}
 
-	private Template template;
-	private UiTemplateReference uiTemplateReference;
+	private final Template template;
+	private final UiTemplateReference uiTemplateReference;
 
 	BaseTemplate(Template template) {
 		this.template = template;
@@ -498,8 +502,8 @@ public UiTemplate createUiTemplate() {
 	}
 
 	@Override
-	public List<String> getDataKeys() {
-		return template.getDataKeys();
+	public List<String> getPropertyNames() {
+		return template.getPropertyNames();
 	}
 
 	public Template getTemplate() {
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/template/BaseTemplateRecord.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/template/BaseTemplateRecord.java
index 3193913b7..cb35b7d6d 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/template/BaseTemplateRecord.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/template/BaseTemplateRecord.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,7 +19,7 @@
  */
 package org.teamapps.ux.component.template;
 
-import org.teamapps.icons.api.Icon;
+import org.teamapps.icons.Icon;
 
 public class BaseTemplateRecord<PAYLOAD> implements PayloadProvider<PAYLOAD> {
 
@@ -28,6 +28,8 @@ public class BaseTemplateRecord<PAYLOAD> implements PayloadProvider<PAYLOAD> {
 	private String caption;
 	private String description;
 	private String badge;
+	private String ariaLabel;
+	private String title;
 
 	private PAYLOAD payload;
 
@@ -71,7 +73,7 @@ public BaseTemplateRecord(String image, String caption) {
 	}
 
 	public BaseTemplateRecord(String image, String caption, PAYLOAD payload) {
-		this(null, image, caption, null, payload);
+		this(image, caption, null, payload);
 	}
 
 	public BaseTemplateRecord(String image, String caption, String description) {
@@ -79,7 +81,7 @@ public BaseTemplateRecord(String image, String caption, String description) {
 	}
 
 	public BaseTemplateRecord(String image, String caption, String description, PAYLOAD payload) {
-		this(null, image, caption, description, payload);
+		this(null, image, caption, description, null, payload);
 	}
 
 	public BaseTemplateRecord(String image, String caption, String description, String badge) {
@@ -161,4 +163,20 @@ public BaseTemplateRecord<PAYLOAD> setPayload(PAYLOAD payload) {
 		this.payload = payload;
 		return this;
 	}
+
+	public String getAriaLabel() {
+		return ariaLabel;
+	}
+
+	public void setAriaLabel(String ariaLabel) {
+		this.ariaLabel = ariaLabel;
+	}
+
+	public String getTitle() {
+		return title;
+	}
+
+	public void setTitle(String title) {
+		this.title = title;
+	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/template/BaseTemplateTreeNode.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/template/BaseTemplateTreeNode.java
index 7fdddc1d4..2140df4ee 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/template/BaseTemplateTreeNode.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/template/BaseTemplateTreeNode.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,7 +19,7 @@
  */
 package org.teamapps.ux.component.template;
 
-import org.teamapps.icons.api.Icon;
+import org.teamapps.icons.Icon;
 import org.teamapps.ux.component.node.TreeNode;
 
 import java.util.ArrayList;
@@ -30,8 +30,9 @@
 public class BaseTemplateTreeNode<PAYLOAD> extends BaseTemplateRecord<PAYLOAD> implements TreeNode {
 
 	private BaseTemplateTreeNode<PAYLOAD> parent;
-	private boolean lazyChildren;
 	private boolean expanded;
+	private boolean lazyChildren;
+	private boolean selectable = true;
 
 	public BaseTemplateTreeNode() {
 	}
@@ -77,6 +78,7 @@ public BaseTemplateTreeNode<PAYLOAD> copy() {
 		copy.setParent(parent);
 		copy.setLazyChildren(lazyChildren);
 		copy.setExpanded(expanded);
+		copy.setSelectable(selectable);
 		return copy;
 	}
 
@@ -113,6 +115,15 @@ public void setExpanded(boolean expanded) {
 		this.expanded = expanded;
 	}
 
+	@Override
+	public boolean isSelectable() {
+		return selectable;
+	}
+
+	public void setSelectable(boolean selectable) {
+		this.selectable = selectable;
+	}
+
 	public static <PAYLOAD> List<BaseTemplateTreeNode<PAYLOAD>> copyTree(List<BaseTemplateTreeNode<PAYLOAD>> tree) {
 		Map<BaseTemplateTreeNode<PAYLOAD>, BaseTemplateTreeNode<PAYLOAD>> copysByOriginal = tree.stream()
 				.collect(Collectors.toMap(node -> node, node -> node.copy()));
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/template/PayloadProvider.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/template/PayloadProvider.java
index 010e84165..92ae10204 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/template/PayloadProvider.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/template/PayloadProvider.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/template/Template.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/template/Template.java
index cef086e3a..559f45d4d 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/template/Template.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/template/Template.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,8 +19,9 @@
  */
 package org.teamapps.ux.component.template;
 
-import org.teamapps.dto.UiTemplate;
 import org.teamapps.common.format.Color;
+import org.teamapps.dto.UiTemplate;
+import org.teamapps.common.format.RgbaColor;
 import org.teamapps.ux.component.format.FontStyle;
 import org.teamapps.ux.component.template.gridtemplate.AbstractTemplateElement;
 import org.teamapps.ux.component.template.gridtemplate.FloatingElement;
@@ -36,7 +37,7 @@ public interface Template {
 
 	UiTemplate createUiTemplate();
 
-	List<String> getDataKeys();
+	List<String> getPropertyNames();
 
 
 	// === static methods ===
@@ -60,9 +61,9 @@ default Template createDarkThemeTemplate() {
 			orig.getElements().forEach(element -> {
 				if (element instanceof FloatingElement) {
 					FloatingElement floatingElement = (FloatingElement) element;
-					List<AbstractTemplateElement> elements = floatingElement.getElements();
-					List<AbstractTemplateElement> newElements = new ArrayList<>();
-					for (AbstractTemplateElement fltElement : elements) {
+					List<AbstractTemplateElement<?>> elements = floatingElement.getElements();
+					List<AbstractTemplateElement<?>> newElements = new ArrayList<>();
+					for (AbstractTemplateElement<?> fltElement : elements) {
 						newElements.add(convertElementToDarkMode(fltElement));
 					}
 					FloatingElement newFloatingElement = new FloatingElement(floatingElement.getRow(), floatingElement.getColumn()).setElements(newElements);
@@ -77,10 +78,10 @@ default Template createDarkThemeTemplate() {
 		return this;
 	}
 
-	static AbstractTemplateElement convertElementToDarkMode(AbstractTemplateElement element) {
+	static AbstractTemplateElement<?> convertElementToDarkMode(AbstractTemplateElement<?> element) {
 		if (element instanceof TextElement) {
 			TextElement txt = (TextElement) element;
-			TextElement newTextElement = new TextElement(txt.getDataKey(), txt.getRow(), txt.getColumn(), txt.getRowSpan(), txt.getColSpan(), txt.getHorizontalAlignment(), txt.getVerticalAlignment());
+			TextElement newTextElement = new TextElement(txt.getProperty(), txt.getRow(), txt.getColumn(), txt.getRowSpan(), txt.getColSpan(), txt.getHorizontalAlignment(), txt.getVerticalAlignment());
 			newTextElement.setPadding(txt.getPadding());
 			newTextElement.setMargin(txt.getMargin());
 			newTextElement.setTextAlignment(txt.getTextAlignment());
@@ -92,7 +93,7 @@ static AbstractTemplateElement convertElementToDarkMode(AbstractTemplateElement
 				return newTextElement;
 			}
 			Color fontColor = style.getFontColor();
-			Color newColor = Color.WHITE;
+			Color newColor = RgbaColor.WHITE;
 			if (fontColor != null) {
 				newColor = convertColorToDarkMode(fontColor);
 			} else {
@@ -106,15 +107,15 @@ static AbstractTemplateElement convertElementToDarkMode(AbstractTemplateElement
 	}
 
 	static Color convertColorToDarkMode(Color color) {
-		if (color.equals(Color.BLACK)) {
-			return Color.WHITE;
+		if (color.equals(RgbaColor.BLACK)) {
+			return RgbaColor.WHITE;
 		}
-		if (color.equals(Color.WHITE)) {
+		if (color.equals(RgbaColor.WHITE)) {
 			//todo: replace badge color as well
 		}
-		if (color.equals(Color.GRAY)) {
-			return Color.LIGHT_GRAY;
+		if (color.equals(RgbaColor.GRAY)) {
+			return RgbaColor.LIGHT_GRAY;
 		}
-		return Color.WHITE;
+		return RgbaColor.WHITE;
 	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/template/TemplateReference.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/template/TemplateReference.java
index a8e290241..7f1dae31d 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/template/TemplateReference.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/template/TemplateReference.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -23,16 +23,15 @@
 import org.teamapps.dto.UiTemplateReference;
 
 import java.util.List;
-import java.util.UUID;
 
 public class TemplateReference implements Template {
 
 	private final String templateId;
 	private final Template template;
 
-	public TemplateReference(Template template) {
-		this.templateId = "tpl" + UUID.randomUUID();
+	public TemplateReference(Template template, String templateId) {
 		this.template = template;
+		this.templateId = templateId;
 	}
 
 	public String getTemplateId() {
@@ -48,8 +47,8 @@ public Template getTemplate() {
 	}
 
 	@Override
-	public List<String> getDataKeys() {
-		return template.getDataKeys();
+	public List<String> getPropertyNames() {
+		return template.getPropertyNames();
 	}
 
 	@Override
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/template/gridtemplate/AbstractTemplateElement.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/template/gridtemplate/AbstractTemplateElement.java
index d5a9cf472..bc6da278d 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/template/gridtemplate/AbstractTemplateElement.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/template/gridtemplate/AbstractTemplateElement.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,8 +19,8 @@
  */
 package org.teamapps.ux.component.template.gridtemplate;
 
-import org.teamapps.dto.AbstractUiTemplateElement;
 import org.teamapps.common.format.Color;
+import org.teamapps.dto.AbstractUiTemplateElement;
 import org.teamapps.ux.component.format.HorizontalElementAlignment;
 import org.teamapps.ux.component.format.Spacing;
 import org.teamapps.ux.component.format.VerticalElementAlignment;
@@ -28,11 +28,9 @@
 import java.util.Collections;
 import java.util.List;
 
-import static org.teamapps.util.UiUtil.createUiColor;
-
 public abstract class AbstractTemplateElement<C extends AbstractTemplateElement> {
 
-	protected String dataKey;
+	protected String propertyName;
 	protected int row;
 	protected int column;
 	protected int rowSpan = 1;
@@ -42,26 +40,26 @@ public abstract class AbstractTemplateElement<C extends AbstractTemplateElement>
 	protected Spacing margin;
 	protected Color backgroundColor;
 
-	public AbstractTemplateElement(String dataKey) {
-		this.dataKey = dataKey;
+	public AbstractTemplateElement(String propertyName) {
+		this.propertyName = propertyName;
 	}
 
-	public AbstractTemplateElement(String dataKey, int row, int column) {
-		this.dataKey = dataKey;
+	public AbstractTemplateElement(String propertyName, int row, int column) {
+		this.propertyName = propertyName;
 		this.row = row;
 		this.column = column;
 	}
 
-	public AbstractTemplateElement(String dataKey, int row, int column, int rowSpan, int colSpan) {
-		this.dataKey = dataKey;
+	public AbstractTemplateElement(String propertyName, int row, int column, int rowSpan, int colSpan) {
+		this.propertyName = propertyName;
 		this.row = row;
 		this.column = column;
 		this.rowSpan = rowSpan;
 		this.colSpan = colSpan;
 	}
 
-	public AbstractTemplateElement(String dataKey, int row, int column, int rowSpan, int colSpan, HorizontalElementAlignment horizontalAlignment, VerticalElementAlignment verticalAlignment) {
-		this.dataKey = dataKey;
+	public AbstractTemplateElement(String propertyName, int row, int column, int rowSpan, int colSpan, HorizontalElementAlignment horizontalAlignment, VerticalElementAlignment verticalAlignment) {
+		this.propertyName = propertyName;
 		this.row = row;
 		this.column = column;
 		this.rowSpan = rowSpan;
@@ -90,17 +88,13 @@ public C setColSpan(final int colSpan) {
 		return (C) this;
 	}
 
-	public C setDataKey(final String dataKey) {
-		this.dataKey = dataKey;
+	public C setPropertyName(final String propertyName) {
+		this.propertyName = propertyName;
 		return (C) this;
 	}
 
-	public String getDataKey() {
-		return dataKey;
-	}
-
-	public List<String> getDataKeys() {
-		return Collections.singletonList(dataKey);
+	public List<String> getPropertyNames() {
+		return Collections.singletonList(propertyName);
 	}
 
 	public int getRow() {
@@ -163,6 +157,6 @@ protected void mapAbstractTemplateElementAttributesToUiElement(AbstractUiTemplat
 		uiElement.setHorizontalAlignment(horizontalAlignment.toUiHorizontalElementAlignment());
 		uiElement.setVerticalAlignment(verticalAlignment.toUiVerticalElementAlignment());
 		uiElement.setMargin(margin != null ? margin.createUiSpacing() : null);
-		uiElement.setBackgroundColor(backgroundColor != null ? createUiColor(backgroundColor) : null);
+		uiElement.setBackgroundColor(backgroundColor != null ? backgroundColor.toHtmlColorString() : null);
 	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/template/gridtemplate/BadgeElement.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/template/gridtemplate/BadgeElement.java
index 8c349ed9f..63f581c8d 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/template/gridtemplate/BadgeElement.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/template/gridtemplate/BadgeElement.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -22,28 +22,29 @@
 import org.teamapps.common.format.Color;
 import org.teamapps.dto.AbstractUiTemplateElement;
 import org.teamapps.dto.UiBadgeElement;
-import org.teamapps.ux.component.format.*;
-
-import static org.teamapps.util.UiUtil.createUiColor;
+import org.teamapps.ux.component.format.FontStyle;
+import org.teamapps.ux.component.format.HorizontalElementAlignment;
+import org.teamapps.ux.component.format.Spacing;
+import org.teamapps.ux.component.format.VerticalElementAlignment;
 
 public class BadgeElement extends TextElement {
 
 	private Color borderColor;
 
-	public BadgeElement(String dataKey) {
-		super(dataKey);
+	public BadgeElement(String propertyName) {
+		super(propertyName);
 	}
 
-	public BadgeElement(String dataKey, int row, int column) {
-		super(dataKey, row, column);
+	public BadgeElement(String propertyName, int row, int column) {
+		super(propertyName, row, column);
 	}
 
-	public BadgeElement(String dataKey, int row, int column, int rowSpan, int colSpan) {
-		super(dataKey, row, column, rowSpan, colSpan);
+	public BadgeElement(String propertyName, int row, int column, int rowSpan, int colSpan) {
+		super(propertyName, row, column, rowSpan, colSpan);
 	}
 
-	public BadgeElement(String dataKey, int row, int column, int rowSpan, int colSpan, HorizontalElementAlignment horizontalAlignment, VerticalElementAlignment verticalAlignment) {
-		super(dataKey, row, column, rowSpan, colSpan, horizontalAlignment, verticalAlignment);
+	public BadgeElement(String propertyName, int row, int column, int rowSpan, int colSpan, HorizontalElementAlignment horizontalAlignment, VerticalElementAlignment verticalAlignment) {
+		super(propertyName, row, column, rowSpan, colSpan, horizontalAlignment, verticalAlignment);
 	}
 
 	public BadgeElement setFontStyle(final FontStyle fontStyle) {
@@ -66,17 +67,17 @@ public BadgeElement setPadding(final Spacing padding) {
 		return this;
 	}
 
-	public BadgeElement setDataKey(final String dataKey) {
-		this.dataKey = dataKey;
+	public BadgeElement setPropertyName(final String propertyName) {
+		this.propertyName = propertyName;
 		return this;
 	}
 
 	@Override
 	public AbstractUiTemplateElement createUiTemplateElement() {
-		UiBadgeElement uiBadgeElement = new UiBadgeElement(dataKey, row, column);
+		UiBadgeElement uiBadgeElement = new UiBadgeElement(propertyName, row, column);
 		mapAbstractTemplateElementAttributesToUiElement(uiBadgeElement);
 		mapTextElementAttributesToUiElement(uiBadgeElement);
-		uiBadgeElement.setBorderColor(borderColor != null ? createUiColor(borderColor) : null);
+		uiBadgeElement.setBorderColor(borderColor != null ? borderColor.toHtmlColorString() : null);
 		return uiBadgeElement;
 	}
 
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/template/gridtemplate/FloatingElement.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/template/gridtemplate/FloatingElement.java
index 92c27b0bc..b98e2c21c 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/template/gridtemplate/FloatingElement.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/template/gridtemplate/FloatingElement.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -20,7 +20,11 @@
 package org.teamapps.ux.component.template.gridtemplate;
 
 import org.teamapps.dto.AbstractUiTemplateElement;
+import org.teamapps.dto.UiCssAlignItems;
+import org.teamapps.dto.UiCssJustifyContent;
 import org.teamapps.dto.UiFloatingElement;
+import org.teamapps.ux.css.CssAlignItems;
+import org.teamapps.ux.css.CssJustifyContent;
 
 import java.util.ArrayList;
 import java.util.List;
@@ -28,7 +32,11 @@
 
 public class FloatingElement extends AbstractTemplateElement<FloatingElement> {
 
-	protected List<AbstractTemplateElement> elements = new ArrayList<>();
+	protected List<AbstractTemplateElement<?>> elements = new ArrayList<>();
+	protected boolean wrap;
+	protected CssAlignItems alignItems = CssAlignItems.CENTER;
+	protected CssJustifyContent justifyContent = CssJustifyContent.START;
+
 
 	public FloatingElement() {
 		super(null);
@@ -43,29 +51,60 @@ public AbstractUiTemplateElement createUiTemplateElement() {
 		List<AbstractUiTemplateElement> uiElements = elements.stream()
 				.map(element -> element != null ? element.createUiTemplateElement() : null)
 				.collect(Collectors.toList());
-		UiFloatingElement uiFloatingElement = new UiFloatingElement(dataKey, row, column, uiElements);
+		UiFloatingElement uiFloatingElement = new UiFloatingElement(propertyName, row, column, uiElements);
 		mapAbstractTemplateElementAttributesToUiElement(uiFloatingElement);
+		uiFloatingElement.setWrap(wrap);
+		uiFloatingElement.setAlignItems(alignItems != null ? UiCssAlignItems.valueOf(alignItems.name()) : null);
+		uiFloatingElement.setJustifyContent(justifyContent != null ? UiCssJustifyContent.valueOf(justifyContent.name()) : null);
 		return uiFloatingElement;
 	}
 
-	public FloatingElement addElement(AbstractTemplateElement element) {
+	public FloatingElement addElement(AbstractTemplateElement<?> element) {
 		elements.add(element);
 		return this;
 	}
 
-	public FloatingElement setElements(final List<AbstractTemplateElement> elements) {
+	public FloatingElement setElements(final List<AbstractTemplateElement<?>> elements) {
 		this.elements = elements;
 		return this;
 	}
 
-	public List<AbstractTemplateElement> getElements() {
+	public List<AbstractTemplateElement<?>> getElements() {
 		return elements;
 	}
 
+	public boolean isWrap() {
+		return wrap;
+	}
+
+	public FloatingElement setWrap(boolean wrap) {
+		this.wrap = wrap;
+		return this;
+	}
+
+	public CssAlignItems getAlignItems() {
+		return alignItems;
+	}
+
+	public FloatingElement setAlignItems(CssAlignItems alignItems) {
+		this.alignItems = alignItems;
+		return this;
+	}
+
+	public CssJustifyContent getJustifyContent() {
+		return justifyContent;
+	}
+
+	public FloatingElement setJustifyContent(CssJustifyContent justifyContent) {
+		this.justifyContent = justifyContent;
+		return this;
+	}
+
 	@Override
-	public List<String> getDataKeys() {
+	public List<String> getPropertyNames() {
 		return elements.stream()
-				.map(element -> element.getDataKey())
+				.flatMap(element -> element.getPropertyNames().stream())
 				.collect(Collectors.toList());
 	}
+
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/template/gridtemplate/GlyphIconElement.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/template/gridtemplate/GlyphIconElement.java
index 19398ce86..fb33ae8ed 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/template/gridtemplate/GlyphIconElement.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/template/gridtemplate/GlyphIconElement.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,47 +19,45 @@
  */
 package org.teamapps.ux.component.template.gridtemplate;
 
+import org.teamapps.common.format.Color;
 import org.teamapps.dto.AbstractUiTemplateElement;
 import org.teamapps.dto.UiGlyphIconElement;
-import org.teamapps.common.format.Color;
 import org.teamapps.ux.component.format.HorizontalElementAlignment;
 import org.teamapps.ux.component.format.VerticalElementAlignment;
 
-import static org.teamapps.util.UiUtil.createUiColor;
-
 public class GlyphIconElement extends AbstractTemplateElement<GlyphIconElement> {
 
 	protected int size;
 	protected Color fontColor;
 
-	public GlyphIconElement(String dataKey, int size, Color fontColor) {
-		super(dataKey);
+	public GlyphIconElement(String propertyName, int size, Color fontColor) {
+		super(propertyName);
 		this.size = size;
 		this.fontColor = fontColor;
 	}
 
-	public GlyphIconElement(String dataKey, int row, int column, int size, Color fontColor) {
-		super(dataKey, row, column);
+	public GlyphIconElement(String propertyName, int row, int column, int size, Color fontColor) {
+		super(propertyName, row, column);
 		this.size = size;
 		this.fontColor = fontColor;
 	}
 
-	public GlyphIconElement(String dataKey, int row, int column, int rowSpan, int colSpan, int size, Color fontColor) {
-		super(dataKey, row, column, rowSpan, colSpan);
+	public GlyphIconElement(String propertyName, int row, int column, int rowSpan, int colSpan, int size, Color fontColor) {
+		super(propertyName, row, column, rowSpan, colSpan);
 		this.size = size;
 		this.fontColor = fontColor;
 	}
 
-	public GlyphIconElement(String dataKey, int row, int column, int rowSpan, int colSpan, HorizontalElementAlignment horizontalAlignment, VerticalElementAlignment verticalAlignment, int size, Color fontColor) {
-		super(dataKey, row, column, rowSpan, colSpan, horizontalAlignment, verticalAlignment);
+	public GlyphIconElement(String propertyName, int row, int column, int rowSpan, int colSpan, HorizontalElementAlignment horizontalAlignment, VerticalElementAlignment verticalAlignment, int size, Color fontColor) {
+		super(propertyName, row, column, rowSpan, colSpan, horizontalAlignment, verticalAlignment);
 		this.size = size;
 		this.fontColor = fontColor;
 	}
 
 	@Override
 	public AbstractUiTemplateElement createUiTemplateElement() {
-		UiGlyphIconElement uiElement = new UiGlyphIconElement(dataKey, row, column, size);
-		uiElement.setFontColor(fontColor != null ? createUiColor(fontColor) : null);
+		UiGlyphIconElement uiElement = new UiGlyphIconElement(propertyName, row, column, size);
+		uiElement.setFontColor(fontColor != null ? fontColor.toHtmlColorString() : null);
 		mapAbstractTemplateElementAttributesToUiElement(uiElement);
 		return uiElement;
 	}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/template/gridtemplate/GridTemplate.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/template/gridtemplate/GridTemplate.java
index 5ad5b4949..40eee9d6c 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/template/gridtemplate/GridTemplate.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/template/gridtemplate/GridTemplate.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,7 +19,13 @@
  */
 package org.teamapps.ux.component.template.gridtemplate;
 
-import org.teamapps.dto.*;
+import org.teamapps.common.format.Color;
+import org.teamapps.dto.AbstractUiTemplateElement;
+import org.teamapps.dto.UiGridColumn;
+import org.teamapps.dto.UiGridRow;
+import org.teamapps.dto.UiGridTemplate;
+import org.teamapps.dto.UiTemplate;
+import org.teamapps.ux.component.format.Border;
 import org.teamapps.ux.component.format.SizeType;
 import org.teamapps.ux.component.format.SizingPolicy;
 import org.teamapps.ux.component.format.Spacing;
@@ -34,11 +40,15 @@
 public class GridTemplate implements Template {
 
 	private int minWidth = 0;
-	private int maxWidth = 0;
+	private int maxWidth = -1;
 	private int minHeight = 0;
-	private int maxHeight = 0;
+	private int maxHeight = -1;
 	private Spacing padding;
 	private int gridGap = 0;
+	private Color backgroundColor;
+	private Border border;
+	private String ariaLabelProperty = "ariaLabel";
+	private String titleProperty = "title";
 
 	List<GridColumn> columns = new ArrayList<>();
 	List<GridRow> rows = new ArrayList<>();
@@ -57,11 +67,18 @@ public GridTemplate(int minWidth, int maxWidth, int minHeight, int maxHeight, Sp
 		this.gridGap = gridGap;
 	}
 
-	public List<String> getDataKeys() {
-		return elements.stream()
-				.flatMap(element -> element.getDataKeys().stream())
+	public List<String> getPropertyNames() {
+		ArrayList<String> propertyNames = elements.stream()
+				.flatMap(element -> element.getPropertyNames().stream())
 				.distinct()
-				.collect(Collectors.toList());
+				.collect(Collectors.toCollection(ArrayList::new));
+		if (ariaLabelProperty != null) {
+			propertyNames.add(ariaLabelProperty);
+		}
+		if (titleProperty != null) {
+			propertyNames.add(titleProperty);
+		}
+		return propertyNames;
 	}
 
 	public GridTemplate addColumn(GridColumn column) {
@@ -190,6 +207,42 @@ public GridTemplate setGridGap(int gridGap) {
 		return this;
 	}
 
+	public Color getBackgroundColor() {
+		return backgroundColor;
+	}
+
+	public GridTemplate setBackgroundColor(Color backgroundColor) {
+		this.backgroundColor = backgroundColor;
+		return this;
+	}
+
+	public Border getBorder() {
+		return border;
+	}
+
+	public GridTemplate setBorder(Border border) {
+		this.border = border;
+		return this;
+	}
+
+	public String getAriaLabelProperty() {
+		return ariaLabelProperty;
+	}
+
+	public GridTemplate setAriaLabelProperty(String ariaLabelProperty) {
+		this.ariaLabelProperty = ariaLabelProperty;
+		return this;
+	}
+
+	public String getTitleProperty() {
+		return titleProperty;
+	}
+
+	public GridTemplate setTitleProperty(String titleProperty) {
+		this.titleProperty = titleProperty;
+		return this;
+	}
+
 	@Override
 	public UiTemplate createUiTemplate() {
 		List<UiGridColumn> uiColumns = columns.stream()
@@ -210,6 +263,10 @@ public UiTemplate createUiTemplate() {
 			uiGridTemplate.setPadding(padding.createUiSpacing());
 		}
 		uiGridTemplate.setGridGap(gridGap);
+		uiGridTemplate.setBorder(border != null ? border.createUiBorder() : null);
+		uiGridTemplate.setBackgroundColor(backgroundColor != null ? backgroundColor.toHtmlColorString() : null);
+		uiGridTemplate.setAriaLabelProperty(ariaLabelProperty);
+		uiGridTemplate.setTitleProperty(titleProperty);
 		return uiGridTemplate;
 	}
 
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/template/gridtemplate/IconElement.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/template/gridtemplate/IconElement.java
index 9a2f67934..841884e45 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/template/gridtemplate/IconElement.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/template/gridtemplate/IconElement.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -28,29 +28,29 @@ public class IconElement extends AbstractTemplateElement<IconElement> {
 
 	protected int size;
 
-	public IconElement(String dataKey, int size) {
-		super(dataKey);
+	public IconElement(String propertyName, int size) {
+		super(propertyName);
 		this.size = size;
 	}
 
-	public IconElement(String dataKey, int row, int column, int size) {
-		super(dataKey, row, column);
+	public IconElement(String propertyName, int row, int column, int size) {
+		super(propertyName, row, column);
 		this.size = size;
 	}
 
-	public IconElement(String dataKey, int row, int column, int rowSpan, int colSpan, int size) {
-		super(dataKey, row, column, rowSpan, colSpan);
+	public IconElement(String propertyName, int row, int column, int rowSpan, int colSpan, int size) {
+		super(propertyName, row, column, rowSpan, colSpan);
 		this.size = size;
 	}
 
-	public IconElement(String dataKey, int row, int column, int rowSpan, int colSpan, HorizontalElementAlignment horizontalAlignment, VerticalElementAlignment verticalAlignment, int size) {
-		super(dataKey, row, column, rowSpan, colSpan, horizontalAlignment, verticalAlignment);
+	public IconElement(String propertyName, int row, int column, int rowSpan, int colSpan, HorizontalElementAlignment horizontalAlignment, VerticalElementAlignment verticalAlignment, int size) {
+		super(propertyName, row, column, rowSpan, colSpan, horizontalAlignment, verticalAlignment);
 		this.size = size;
 	}
 
 	@Override
 	public AbstractUiTemplateElement createUiTemplateElement() {
-		UiIconElement uiIconElement = new UiIconElement(dataKey, row, column, size);
+		UiIconElement uiIconElement = new UiIconElement(propertyName, row, column, size);
 		mapAbstractTemplateElementAttributesToUiElement(uiIconElement);
 		return uiIconElement;
 	}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/template/gridtemplate/ImageElement.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/template/gridtemplate/ImageElement.java
index f42b7a612..a8fbfca7e 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/template/gridtemplate/ImageElement.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/template/gridtemplate/ImageElement.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -32,32 +32,32 @@ public class ImageElement extends AbstractTemplateElement {
 	protected Shadow shadow;
 	protected ImageSizing imageSizing = ImageSizing.COVER;
 
-	public ImageElement(String dataKey, int width, int height) {
-		super(dataKey);
+	public ImageElement(String propertyName, int width, int height) {
+		super(propertyName);
 		this.width = width;
 		this.height = height;
 	}
 
-	public ImageElement(String dataKey, int row, int column, int width, int height) {
-		super(dataKey, row, column);
+	public ImageElement(String propertyName, int row, int column, int width, int height) {
+		super(propertyName, row, column);
 		this.width = width;
 		this.height = height;
 	}
 
-	public ImageElement(String dataKey, int row, int column, int rowSpan, int colSpan, int width, int height) {
-		super(dataKey, row, column, rowSpan, colSpan);
+	public ImageElement(String propertyName, int row, int column, int rowSpan, int colSpan, int width, int height) {
+		super(propertyName, row, column, rowSpan, colSpan);
 		this.width = width;
 		this.height = height;
 	}
 
-	public ImageElement(String dataKey, int row, int column, int rowSpan, int colSpan, HorizontalElementAlignment horizontalAlignment, VerticalElementAlignment verticalAlignment, int width, int height) {
-		super(dataKey, row, column, rowSpan, colSpan, horizontalAlignment, verticalAlignment);
+	public ImageElement(String propertyName, int row, int column, int rowSpan, int colSpan, HorizontalElementAlignment horizontalAlignment, VerticalElementAlignment verticalAlignment, int width, int height) {
+		super(propertyName, row, column, rowSpan, colSpan, horizontalAlignment, verticalAlignment);
 		this.width = width;
 		this.height = height;
 	}
 
-	public ImageElement(String dataKey, int width, int height, Border border, Spacing padding, Shadow shadow) {
-		super(dataKey);
+	public ImageElement(String propertyName, int width, int height, Border border, Spacing padding, Shadow shadow) {
+		super(propertyName);
 		this.width = width;
 		this.height = height;
 		this.border = border;
@@ -65,8 +65,8 @@ public ImageElement(String dataKey, int width, int height, Border border, Spacin
 		this.shadow = shadow;
 	}
 
-	public ImageElement(String dataKey, int row, int column, int width, int height, Border border, Spacing padding, Shadow shadow) {
-		super(dataKey, row, column);
+	public ImageElement(String propertyName, int row, int column, int width, int height, Border border, Spacing padding, Shadow shadow) {
+		super(propertyName, row, column);
 		this.width = width;
 		this.height = height;
 		this.border = border;
@@ -74,8 +74,8 @@ public ImageElement(String dataKey, int row, int column, int width, int height,
 		this.shadow = shadow;
 	}
 
-	public ImageElement(String dataKey, int row, int column, int rowSpan, int colSpan, int width, int height, Border border, Spacing padding, Shadow shadow) {
-		super(dataKey, row, column, rowSpan, colSpan);
+	public ImageElement(String propertyName, int row, int column, int rowSpan, int colSpan, int width, int height, Border border, Spacing padding, Shadow shadow) {
+		super(propertyName, row, column, rowSpan, colSpan);
 		this.width = width;
 		this.height = height;
 		this.border = border;
@@ -125,7 +125,7 @@ public AbstractTemplateElement setMargin(final Spacing margin) {
 
 	@Override
 	public AbstractUiTemplateElement createUiTemplateElement() {
-		UiImageElement uiImageElement = new UiImageElement(dataKey, row, column, width, height);
+		UiImageElement uiImageElement = new UiImageElement(propertyName, row, column, width, height);
 		mapAbstractTemplateElementAttributesToUiElement(uiImageElement);
 		uiImageElement.setBorder(border != null ? border.createUiBorder() : null);
 		uiImageElement.setPadding(padding != null ? padding.createUiSpacing() : null);
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/template/gridtemplate/TextElement.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/template/gridtemplate/TextElement.java
index 024a6ce66..2d4820f11 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/template/gridtemplate/TextElement.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/template/gridtemplate/TextElement.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -33,25 +33,25 @@ public class TextElement extends AbstractTemplateElement<TextElement> {
 	protected TextAlignment textAlignment = TextAlignment.LEFT;
 
 
-	public TextElement(String dataKey) {
-		super(dataKey);
+	public TextElement(String propertyName) {
+		super(propertyName);
 	}
 
-	public TextElement(String dataKey, int row, int column) {
-		super(dataKey, row, column);
+	public TextElement(String propertyName, int row, int column) {
+		super(propertyName, row, column);
 	}
 
-	public TextElement(String dataKey, int row, int column, int rowSpan, int colSpan) {
-		super(dataKey, row, column, rowSpan, colSpan);
+	public TextElement(String propertyName, int row, int column, int rowSpan, int colSpan) {
+		super(propertyName, row, column, rowSpan, colSpan);
 	}
 
-	public TextElement(String dataKey, int row, int column, int rowSpan, int colSpan, HorizontalElementAlignment horizontalAlignment, VerticalElementAlignment verticalAlignment) {
-		super(dataKey, row, column, rowSpan, colSpan, horizontalAlignment, verticalAlignment);
+	public TextElement(String propertyName, int row, int column, int rowSpan, int colSpan, HorizontalElementAlignment horizontalAlignment, VerticalElementAlignment verticalAlignment) {
+		super(propertyName, row, column, rowSpan, colSpan, horizontalAlignment, verticalAlignment);
 	}
 
 	@Override
 	public AbstractUiTemplateElement createUiTemplateElement() {
-		UiTextElement uiTextElement = new UiTextElement(dataKey, row, column);
+		UiTextElement uiTextElement = new UiTextElement(propertyName, row, column);
 		mapAbstractTemplateElementAttributesToUiElement(uiTextElement);
 		mapTextElementAttributesToUiElement(uiTextElement);
 		return uiTextElement;
@@ -65,6 +65,10 @@ protected void mapTextElementAttributesToUiElement(UiTextElement uiTextElement)
 		uiTextElement.setTextAlignment(textAlignment.toUiTextAlignment());
 	}
 
+	public String getProperty() {
+		return propertyName;
+	}
+
 	public TextElement setFontStyle(final FontStyle fontStyle) {
 		this.fontStyle = fontStyle;
 		return this;
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/template/htmltemplate/HtmlTemplate.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/template/htmltemplate/HtmlTemplate.java
new file mode 100644
index 000000000..1a3636816
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/template/htmltemplate/HtmlTemplate.java
@@ -0,0 +1,54 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.template.htmltemplate;
+
+import org.teamapps.dto.UiHtmlTemplate;
+import org.teamapps.dto.UiTemplate;
+import org.teamapps.ux.component.template.Template;
+
+import java.util.List;
+import java.util.regex.Pattern;
+import java.util.stream.Collectors;
+
+public class HtmlTemplate implements Template {
+
+	private static final Pattern PLACE_HOLDER_REGEX = Pattern.compile("\\{\\{(\\w+)\\}\\}");
+
+	private final String html;
+	private final List<String> propertyNames;
+
+	public HtmlTemplate(String htmlTemplateString) {
+		this.html = htmlTemplateString;
+		this.propertyNames = PLACE_HOLDER_REGEX.matcher(html).results()
+				.map(matchResult -> matchResult.group(1))
+				.collect(Collectors.toList());
+	}
+
+	@Override
+	public UiTemplate createUiTemplate() {
+		return new UiHtmlTemplate(html);
+	}
+
+	@Override
+	public List<String> getPropertyNames() {
+		return propertyNames;
+	}
+	
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/template/htmltemplate/MustacheTemplate.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/template/htmltemplate/MustacheTemplate.java
new file mode 100644
index 000000000..9211d6511
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/template/htmltemplate/MustacheTemplate.java
@@ -0,0 +1,54 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.template.htmltemplate;
+
+import org.teamapps.dto.UiMustacheTemplate;
+import org.teamapps.dto.UiTemplate;
+import org.teamapps.ux.component.template.Template;
+
+import java.util.List;
+import java.util.regex.Pattern;
+import java.util.stream.Collectors;
+
+public class MustacheTemplate implements Template {
+
+	private static final Pattern PLACE_HOLDER_REGEX = Pattern.compile("\\{\\{#?(\\w+)\\}\\}");
+
+	private final String templateString;
+	private final List<String> propertyNames;
+
+	public MustacheTemplate(String templateString) {
+		this.templateString = templateString;
+		this.propertyNames = PLACE_HOLDER_REGEX.matcher(this.templateString).results()
+				.map(matchResult -> matchResult.group(1))
+				.collect(Collectors.toList());
+	}
+
+	@Override
+	public UiTemplate createUiTemplate() {
+		return new UiMustacheTemplate(templateString);
+	}
+
+	@Override
+	public List<String> getPropertyNames() {
+		return propertyNames;
+	}
+	
+}
diff --git a/teamapps-material-icon-provider/src/main/java/org/teamapps/icon/material/PlainStyle.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/GraphChangeListener.java
similarity index 75%
rename from teamapps-material-icon-provider/src/main/java/org/teamapps/icon/material/PlainStyle.java
rename to teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/GraphChangeListener.java
index b6ac70b16..42308e054 100644
--- a/teamapps-material-icon-provider/src/main/java/org/teamapps/icon/material/PlainStyle.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/GraphChangeListener.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,11 +17,10 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-package org.teamapps.icon.material;
+package org.teamapps.ux.component.timegraph;
 
-public class PlainStyle extends SingleColorStyle {
+import org.teamapps.ux.component.timegraph.graph.AbstractGraph;
 
-    public PlainStyle(String styleId, String color) {
-        super(styleId, StyleType.PLAIN, color);
-    }
+public interface GraphChangeListener {
+	void handleChange(AbstractGraph<?, ?> display);
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/Interval.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/Interval.java
index 249a1f43c..3fa5648c2 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/Interval.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/Interval.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -21,6 +21,8 @@
 
 import org.teamapps.dto.UiLongInterval;
 
+import java.util.Objects;
+
 public class Interval {
 
 	private final long min;
@@ -35,6 +37,21 @@ public static Interval union(Interval interval, Interval intervalB) {
 		return new Interval(Math.min(interval.getMin(), intervalB.getMin()), Math.max(interval.getMax(), intervalB.getMax()));
 	}
 
+	public static Interval intersection(Interval a, Interval b) {
+		if (a.min < b.max && a.max > b.min) {
+			return new Interval(
+					Math.max(a.min, b.min),
+					Math.min(a.max, b.max)
+			);
+		} else {
+			return Interval.empty();
+		}
+	}
+
+	public static Interval empty() {
+		return new Interval(0, 0);
+	}
+
 	public long getMin() {
 		return min;
 	}
@@ -43,7 +60,7 @@ public long getMax() {
 		return max;
 	}
 
-	public UiLongInterval createUiLongInterval() {
+	public UiLongInterval toUiLongInterval() {
 		return new UiLongInterval(min, max);
 	}
 
@@ -54,4 +71,22 @@ public String toString() {
 				", max=" + max +
 				'}';
 	}
+
+	@Override
+	public boolean equals(Object o) {
+		if (this == o) {
+			return true;
+		}
+		if (o == null || getClass() != o.getClass()) {
+			return false;
+		}
+		Interval interval = (Interval) o;
+		return min == interval.min &&
+				max == interval.max;
+	}
+
+	@Override
+	public int hashCode() {
+		return Objects.hash(min, max);
+	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/LineChartCurveType.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/LineChartCurveType.java
index 71ccbee50..0a76d91f4 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/LineChartCurveType.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/LineChartCurveType.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/LineChartLine.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/LineChartLine.java
deleted file mode 100644
index 880128f27..000000000
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/LineChartLine.java
+++ /dev/null
@@ -1,218 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.ux.component.timegraph;
-
-import org.teamapps.dto.UiLineChartLineFormat;
-import org.teamapps.dto.UiLongInterval;
-import org.teamapps.common.format.Color;
-
-import static org.teamapps.util.UiUtil.createUiColor;
-
-public class LineChartLine {
-
-	private static Color[] LINE_BASE_COLORS = new Color[]{Color.MATERIAL_BLUE_500, Color.MATERIAL_TEAL_500, Color.MATERIAL_RED_500, Color.MATERIAL_DEEP_PURPLE_500, Color.MATERIAL_GREEN_500,
-			Color.MATERIAL_GREY_500};
-
-	public static Color getBaseColor(int index) {
-		return LINE_BASE_COLORS[index % LINE_BASE_COLORS.length];
-	}
-
-	private final String id;
-	private LineChartLineListener changeListener;
-
-	private LineChartCurveType graphType = LineChartCurveType.MONOTONE;
-	private float dataDotRadius = 2;
-	private Color yAxisColor = Color.BLACK;
-	private Color lineColorScaleMin = new Color(73, 128, 192);
-	private Color lineColorScaleMax = new Color(73, 128, 192);
-	private Color areaColorScaleMin = new Color(255, 255, 255, 0);
-	private Color areaColorScaleMax = new Color(255, 255, 255, 0);
-
-	private Interval intervalY;
-	private ScaleType yScaleType = ScaleType.LINEAR;
-	private LineChartYScaleZoomMode yScaleZoomMode = LineChartYScaleZoomMode.DYNAMIC_INCLUDING_ZERO;
-
-
-	public LineChartLine(String id) {
-		this.id = id;
-	}
-
-	public LineChartLine(String id, LineChartCurveType graphType, float dataDotRadius, Color lineColor) {
-		this(id, graphType, dataDotRadius, lineColor, lineColor, null, null);
-	}
-
-	public LineChartLine(String id, LineChartCurveType graphType, float dataDotRadius, Color lineColor, Color areaColor) {
-		this(id, graphType, dataDotRadius, lineColor, lineColor, Color.withAlpha(areaColor, 0.0f), areaColor);
-	}
-
-	public LineChartLine(String id, LineChartCurveType graphType, float dataDotRadius, Color lineColorScaleMin, Color lineColorScaleMax, Color areaColorScaleMin, Color areaColorScaleMax) {
-		this.id = id;
-		this.graphType = graphType;
-		this.dataDotRadius = dataDotRadius;
-		this.lineColorScaleMin = lineColorScaleMin;
-		this.lineColorScaleMax = lineColorScaleMax;
-		this.areaColorScaleMin = areaColorScaleMin;
-		this.areaColorScaleMax = areaColorScaleMax;
-	}
-
-	public UiLineChartLineFormat createUiLineChartLineFormat() {
-		UiLineChartLineFormat definition = new UiLineChartLineFormat();
-		definition.setGraphType(graphType.toUiLineChartCurveType());
-		definition.setDataDotRadius(dataDotRadius);
-		definition.setLineColorScaleMin(lineColorScaleMin != null ? createUiColor(lineColorScaleMin) : null);
-		definition.setLineColorScaleMax(lineColorScaleMax != null ? createUiColor(lineColorScaleMax) : null);
-		definition.setAreaColorScaleMin(areaColorScaleMin != null ? createUiColor(areaColorScaleMin) : null);
-		definition.setAreaColorScaleMax(areaColorScaleMax != null ? createUiColor(areaColorScaleMax) : null);
-		definition.setYAxisColor(yAxisColor != null ? createUiColor(yAxisColor) : null);
-		definition.setIntervalY(intervalY != null ? intervalY.createUiLongInterval() : new UiLongInterval(0, 1000));
-		definition.setYScaleType(yScaleType.toUiScaleType());
-		definition.setYScaleZoomMode(yScaleZoomMode.toUiLineChartYScaleZoomMode());
-
-		return definition;
-	}
-
-	public String getId() {
-		return id;
-	}
-
-	public LineChartCurveType getGraphType() {
-		return graphType;
-	}
-
-	public LineChartLine setGraphType(LineChartCurveType graphType) {
-		this.graphType = graphType;
-		if (this.changeListener != null) {
-			changeListener.handleGraphTypeChanged(this, graphType);
-		}
-		return this;
-	}
-
-	public float getDataDotRadius() {
-		return dataDotRadius;
-	}
-
-	public LineChartLine setDataDotRadius(float dataDotRadius) {
-		this.dataDotRadius = dataDotRadius;
-		if (this.changeListener != null) {
-			changeListener.handleDataDotRadiusChanged(this, dataDotRadius);
-		}
-		return this;
-	}
-
-	public Color getLineColorScaleMin() {
-		return lineColorScaleMin;
-	}
-
-	public LineChartLine setLineColorScaleMin(Color lineColorScaleMin) {
-		this.lineColorScaleMin = lineColorScaleMin;
-		if (this.changeListener != null) {
-			changeListener.handleLineColorScaleMinChanged(this, lineColorScaleMin);
-		}
-		return this;
-	}
-
-	public Color getLineColorScaleMax() {
-		return lineColorScaleMax;
-	}
-
-	public LineChartLine setLineColorScaleMax(Color lineColorScaleMax) {
-		this.lineColorScaleMax = lineColorScaleMax;
-		if (this.changeListener != null) {
-			changeListener.handleLineColorScaleMaxChanged(this, lineColorScaleMax);
-		}
-		return this;
-	}
-
-	public Color getAreaColorScaleMin() {
-		return areaColorScaleMin;
-	}
-
-	public LineChartLine setAreaColorScaleMin(Color areaColorScaleMin) {
-		this.areaColorScaleMin = areaColorScaleMin;
-		if (this.changeListener != null) {
-			changeListener.handleAreaColorScaleMinChanged(this, areaColorScaleMin);
-		}
-		return this;
-	}
-
-	public Color getAreaColorScaleMax() {
-		return areaColorScaleMax;
-	}
-
-	public LineChartLine setAreaColorScaleMax(Color areaColorScaleMax) {
-		this.areaColorScaleMax = areaColorScaleMax;
-		if (this.changeListener != null) {
-			changeListener.handleAreaColorScaleMaxChanged(this, areaColorScaleMax);
-		}
-		return this;
-	}
-
-	public Interval getIntervalY() {
-		return intervalY;
-	}
-
-	public LineChartLine setIntervalY(Interval intervalY) {
-		this.intervalY = intervalY;
-		if (this.changeListener != null) {
-			changeListener.handleIntervalYChanged(this, intervalY);
-		}
-		return this;
-	}
-
-	public ScaleType getyScaleType() {
-		return yScaleType;
-	}
-
-	public LineChartLine setYScaleType(ScaleType yScaleType) {
-		this.yScaleType = yScaleType;
-		if (this.changeListener != null) {
-			changeListener.handleYScaleTypeChanged(this, yScaleType);
-		}
-		return this;
-	}
-
-	public LineChartYScaleZoomMode getYScaleZoomMode() {
-		return yScaleZoomMode;
-	}
-
-	public LineChartLine setYScaleZoomMode(LineChartYScaleZoomMode yScaleZoomMode) {
-		this.yScaleZoomMode = yScaleZoomMode;
-		if (this.changeListener != null) {
-			changeListener.handleYScaleZoomModeChanged(this, yScaleZoomMode);
-		}
-		return this;
-	}
-
-	void setChangeListener(LineChartLineListener listener) {
-		this.changeListener = listener;
-	}
-
-	public Color getYAxisColor() {
-		return yAxisColor;
-	}
-
-	public LineChartLine setYAxisColor(Color yAxisColor) {
-		this.yAxisColor = yAxisColor;
-		if (this.changeListener != null) {
-			changeListener.handleYAxisColorChanged(this, yAxisColor);
-		}
-		return this;
-	}
-}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/LineChartLineListener.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/LineChartLineListener.java
deleted file mode 100644
index 6c47212d2..000000000
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/LineChartLineListener.java
+++ /dev/null
@@ -1,44 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.ux.component.timegraph;
-
-import org.teamapps.common.format.Color;
-
-public interface LineChartLineListener {
-	void handleGraphTypeChanged(LineChartLine lineChartLine, LineChartCurveType graphType);
-
-	void handleDataDotRadiusChanged(LineChartLine lineChartLine, float dataDotRadius);
-
-	void handleLineColorScaleMinChanged(LineChartLine lineChartLine, Color lineColorScaleMin);
-
-	void handleLineColorScaleMaxChanged(LineChartLine lineChartLine, Color lineColorScaleMax);
-
-	void handleAreaColorScaleMinChanged(LineChartLine lineChartLine, Color areaColorScaleMin);
-
-	void handleAreaColorScaleMaxChanged(LineChartLine lineChartLine, Color areaColorScaleMax);
-
-	void handleYAxisColorChanged(LineChartLine lineChartLine, Color yAxisColor);
-
-	void handleIntervalYChanged(LineChartLine lineChartLine, Interval intervalY);
-
-	void handleYScaleTypeChanged(LineChartLine lineChartLine, ScaleType yScaleType);
-
-	void handleYScaleZoomModeChanged(LineChartLine lineChartLine, LineChartYScaleZoomMode yScaleZoomMode);
-}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/LineChartMouseScrollZoomPanMode.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/LineChartMouseScrollZoomPanMode.java
index d43e2649a..0462abaf6 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/LineChartMouseScrollZoomPanMode.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/LineChartMouseScrollZoomPanMode.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/LineChartYScaleZoomMode.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/LineChartYScaleZoomMode.java
index 68df123ef..a0115e041 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/LineChartYScaleZoomMode.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/LineChartYScaleZoomMode.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/ScaleType.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/ScaleType.java
index 8b543c760..0f5907272 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/ScaleType.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/ScaleType.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -24,7 +24,8 @@
 public enum ScaleType {
 
 	LINEAR,
-	LOG10;
+	LOG10,
+	SYMLOG;
 
 	public UiScaleType toUiScaleType() {
 		return UiScaleType.valueOf(this.name());
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/SlidingWindowLineChartModel.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/SlidingWindowLineChartModel.java
deleted file mode 100644
index 351defeeb..000000000
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/SlidingWindowLineChartModel.java
+++ /dev/null
@@ -1,96 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.ux.component.timegraph;
-
-import org.teamapps.event.Event;
-
-import java.util.*;
-import java.util.stream.Collectors;
-
-public class SlidingWindowLineChartModel implements TimeGraphModel {
-	
-	public final Event<Void> onTimeGraphDataChanged = new Event<>();
-
-	private final int maxDataPoints;
-
-	private final Map<String, List<LineChartDataPoint>> dataPointsByLineId = new HashMap<>();
-
-	private long minX;
-	private long maxX;
-
-	public SlidingWindowLineChartModel(int maxDataPoints) {
-		this.maxDataPoints = maxDataPoints;
-	}
-
-	public void addLinePoint(String lineId, long xValue, double yValue, boolean fireModelDataChange) {
-		LineChartDataPoint dataPoint = new LineChartDataPoint(xValue, yValue);
-
-		synchronized (this) {
-			List<LineChartDataPoint> lineChartDataPoints = dataPointsByLineId.computeIfAbsent(lineId, k -> new ArrayList<>());
-			lineChartDataPoints.add(dataPoint);
-			if (lineChartDataPoints.size() > maxDataPoints) {
-				lineChartDataPoints.remove(0);
-			}
-		}
-		updateMinMaxX();
-		if (fireModelDataChange) {
-			fireModelDataChange();
-		}
-	}
-
-	public void fireModelDataChange() {
-		onTimeGraphDataChanged.fire(null);
-	}
-
-	private void updateMinMaxX() {
-		this.minX = dataPointsByLineId.values().stream()
-				.filter(points -> !points.isEmpty())
-				.map(points -> ((long) points.get(0).getX()))
-				.min(Long::compare).orElse(0L);
-		this.maxX = dataPointsByLineId.values().stream()
-				.filter(points -> !points.isEmpty())
-				.map(points -> ((long) points.get(points.size() - 1).getX()))
-				.max(Long::compare).orElse(1L);
-	}
-
-	@Override
-	public List<TimeGraphZoomLevel> getZoomLevels() {
-		return Collections.singletonList(new TimeGraphZoomLevel(1));
-	}
-
-	@Override
-	public Event<Void> onDataChanged() {
-		return onTimeGraphDataChanged;
-	}
-
-	@Override
-	public Map<String, List<LineChartDataPoint>> getDataPoints(Collection<String> lineIds, TimeGraphZoomLevel zoomLevel, Interval neededIntervalX) {
-		synchronized (this) {
-			return dataPointsByLineId.entrySet().stream()
-					.filter(e -> lineIds.contains(e.getKey()))
-					.collect(Collectors.toMap(Map.Entry::getKey, entry -> Arrays.asList(entry.getValue().toArray(new LineChartDataPoint[0]))));
-		}
-	}
-
-	@Override
-	public Interval getDomainX(Collection<String> lineIds) {
-		return new Interval(minX, maxX);
-	}
-}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/TimeGraph.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/TimeGraph.java
index 1f066a6be..9fd27da08 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/TimeGraph.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/TimeGraph.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,181 +19,163 @@
  */
 package org.teamapps.ux.component.timegraph;
 
-import org.jetbrains.annotations.NotNull;
-import org.teamapps.dto.UiComponent;
-import org.teamapps.dto.UiEvent;
-import org.teamapps.dto.UiLineChartLineFormat;
-import org.teamapps.dto.UiLongInterval;
-import org.teamapps.dto.UiTimeChartZoomLevel;
-import org.teamapps.dto.UiTimeGraph;
-import org.teamapps.dto.UiTimeGraphDataPoint;
+import com.ibm.icu.util.ULocale;
+import org.teamapps.dto.*;
 import org.teamapps.event.Event;
-import org.teamapps.event.EventListener;
 import org.teamapps.ux.component.AbstractComponent;
-import org.teamapps.common.format.Color;
+import org.teamapps.ux.component.timegraph.datapoints.GraphData;
+import org.teamapps.ux.component.timegraph.graph.AbstractGraph;
+import org.teamapps.ux.session.SessionContext;
 
-import java.util.ArrayList;
-import java.util.HashMap;
-import java.util.List;
-import java.util.Map;
-import java.util.function.Supplier;
+import java.time.ZoneId;
+import java.util.*;
+import java.util.function.Consumer;
 import java.util.stream.Collectors;
 
 public class TimeGraph extends AbstractComponent {
 
 	public final Event<ZoomEventData> onZoomed = new Event<>();
 	public final Event<Interval> onIntervalSelected = new Event<>();
-	private final List<LineChartLine> lines = new ArrayList<>();
+	private final List<GraphAndListener> graphsAndListeners = new ArrayList<>();
+
+	private static class GraphAndListener {
+		AbstractGraph<?, ?> graph;
+		Consumer<Void> changeListener;
+
+		public GraphAndListener(AbstractGraph<?, ?> graph, Consumer<Void> changeListener) {
+			this.graph = graph;
+			this.changeListener = changeListener;
+		}
+	}
+
+	private List<TimePartitioning> zoomLevels = Arrays.asList(
+			TimePartitioningUnit.YEAR,
+			TimePartitioningUnit.HALF_YEAR,
+			TimePartitioningUnit.QUARTER,
+			TimePartitioningUnit.MONTH,
+			TimePartitioningUnit.WEEK_MONDAY,
+			TimePartitioningUnit.DAY,
+			TimePartitioningUnit.HOURS_12,
+			TimePartitioningUnit.HOURS_6,
+			TimePartitioningUnit.HOURS_3,
+			TimePartitioningUnit.HOUR,
+			TimePartitioningUnit.MINUTES_30,
+			TimePartitioningUnit.MINUTES_15,
+			TimePartitioningUnit.MINUTES_5,
+			TimePartitioningUnit.MINUTES_2,
+			TimePartitioningUnit.MINUTE,
+			TimePartitioningUnit.SECONDS_30,
+			TimePartitioningUnit.SECONDS_10,
+			TimePartitioningUnit.SECONDS_5,
+			TimePartitioningUnit.SECONDS_2,
+			TimePartitioningUnit.SECOND,
+			TimePartitioningUnit.MILLISECOND_500,
+			TimePartitioningUnit.MILLISECOND_200,
+			TimePartitioningUnit.MILLISECOND_100,
+			TimePartitioningUnit.MILLISECOND_50,
+			TimePartitioningUnit.MILLISECOND_20,
+			TimePartitioningUnit.MILLISECOND_10,
+			TimePartitioningUnit.MILLISECOND_5,
+			TimePartitioningUnit.MILLISECOND_2,
+			TimePartitioningUnit.MILLISECOND
+	);
 
 	private int maxPixelsBetweenDataPoints = 50; // ... before switching to higher zoom level
-	private TimeGraphModel model;
 	private LineChartMouseScrollZoomPanMode mouseScrollZoomPanMode = LineChartMouseScrollZoomPanMode.ENABLED;
-	private Interval selectedInterval;
 
-	/**
-	 * If null, when the model fires {@link TimeGraphModel#onDataChanged()}, the data on the client is reset and new data will be requested by the client according to the current
-	 * client-side zoom level and displayed intervalX.
-	 * <p>
-	 * If not null, this supplier provides the required information (zoom level and intervalX) for retrieving data from the model, so no round trip through the client needed.
-	 */
-	private Supplier<EagerFetchingParameters> eagerFetchingParametersSupplier;
+	// client-side state
+	private Interval displayedInterval;
+	private double millisecondsPerPixel;
+	private Interval selectedInterval;
 
-	// needs to be a field for reference equality (sad but true, java method references are only syntactic sugar for lambdas)
-	private final EventListener<Void> onTimeGraphDataChangedListener = this::onTimeGraphDataChanged;
+	private ULocale locale = SessionContext.current().getULocale();
+	private ZoneId timeZoneId = SessionContext.current().getTimeZone();
 
-	public TimeGraph(TimeGraphModel model) {
+	public TimeGraph() {
 		super();
-		this.model = model;
-		setModel(model);
 	}
 
-	public void addLine(String lineId, LineChartCurveType graphType, float dataDotRadius, Color lineColor, Color areaColor) {
-		addLine(new LineChartLine(lineId, graphType, dataDotRadius, lineColor, areaColor));
+	private ArrayList<AbstractGraph<?, ?>> getGraphs() {
+		return this.graphsAndListeners.stream()
+				.map(graphAndListener -> graphAndListener.graph)
+				.collect(Collectors.toCollection(ArrayList::new));
 	}
 
-	public void addLine(LineChartLine lineFormat) {
-		lines.add(lineFormat);
-		setLines(new ArrayList<>(this.lines));
+	public void addGraph(AbstractGraph<?, ?> graph) {
+		final ArrayList<AbstractGraph<?, ?>> graphs = getGraphs();
+		graphs.add(graph);
+		setGraphs(graphs);
 	}
 
-	public void setLines(List<LineChartLine> lineFormats) {
-		lines.clear();
-		lineFormats.forEach(line -> {
-			lines.add(line);
-			line.setChangeListener(new LineChartLineListener() {
-				@Override
-				public void handleGraphTypeChanged(LineChartLine lineChartLine, LineChartCurveType graphType) {
-					reRenderIfRendered(); // TODO
-				}
-
-				@Override
-				public void handleDataDotRadiusChanged(LineChartLine lineChartLine, float dataDotRadius) {
-					reRenderIfRendered(); // TODO
-				}
-
-				@Override
-				public void handleLineColorScaleMinChanged(LineChartLine lineChartLine, Color lineColorScaleMin) {
-					reRenderIfRendered(); // TODO
-				}
-
-				@Override
-				public void handleLineColorScaleMaxChanged(LineChartLine lineChartLine, Color lineColorScaleMax) {
-					reRenderIfRendered(); // TODO
-				}
-
-				@Override
-				public void handleAreaColorScaleMinChanged(LineChartLine lineChartLine, Color areaColorScaleMin) {
-					reRenderIfRendered(); // TODO
-				}
-
-				@Override
-				public void handleAreaColorScaleMaxChanged(LineChartLine lineChartLine, Color areaColorScaleMax) {
-					reRenderIfRendered(); // TODO
-				}
-
-				@Override
-				public void handleIntervalYChanged(LineChartLine lineChartLine, Interval intervalY) {
-					queueCommandIfRendered(() -> new UiTimeGraph.SetIntervalYCommand(getId(), line.getId(), intervalY.createUiLongInterval()));
-				}
-
-				@Override
-				public void handleYScaleTypeChanged(LineChartLine lineChartLine, ScaleType yScaleType) {
-					queueCommandIfRendered(() -> new UiTimeGraph.SetYScaleTypeCommand(getId(), line.getId(), yScaleType.toUiScaleType()));
-				}
-
-				@Override
-				public void handleYScaleZoomModeChanged(LineChartLine lineChartLine, LineChartYScaleZoomMode yScaleZoomMode) {
-					queueCommandIfRendered(() -> new UiTimeGraph.SetYScaleZoomModeCommand(getId(), line.getId(), yScaleZoomMode.toUiLineChartYScaleZoomMode()));
-				}
-
-				@Override
-				public void handleYAxisColorChanged(LineChartLine lineChartLine, Color yAxisColor) {
-					reRenderIfRendered(); // TODO
-				}
-			});
+	public void setGraphs(List<? extends AbstractGraph<?, ?>> graphs) {
+		this.graphsAndListeners.forEach(g -> g.graph.getModel().onDataChanged().removeListener(g.changeListener));
+		this.graphsAndListeners.clear();
+		graphs.forEach(graph -> {
+			final GraphAndListener graphAndListener = new GraphAndListener(graph, aVoid -> handleGraphDataChanged(graph));
+			this.graphsAndListeners.add(graphAndListener);
+			graph.setChangeListener(display -> queueCommandIfRendered(() -> new UiTimeGraph.AddOrUpdateGraphCommand(getId(), display.createUiFormat())));
+			graph.getModel().onDataChanged().addListener(graphAndListener.changeListener);
 		});
-		queueCommandIfRendered(() -> new UiTimeGraph.SetLineFormatsCommand(getId(), toUiLineFormats(lineFormats)));
+		queueCommandIfRendered(() -> new UiTimeGraph.SetGraphsCommand(getId(), toUiLineFormats(graphs)));
 		refresh();
 	}
 
-	private Map<String, UiLineChartLineFormat> toUiLineFormats(List<LineChartLine> lineFormats) {
+	private List<UiGraph> toUiLineFormats(List<? extends AbstractGraph<?, ?>> lineFormats) {
 		return lineFormats.stream()
-				.collect(Collectors.toMap(lf -> lf.getId(), lf -> lf.createUiLineChartLineFormat()));
-	}
-
-	public List<String> getLineIds() {
-		return lines.stream()
-				.map(LineChartLine::getId)
+				.map(AbstractGraph::createUiFormat)
 				.collect(Collectors.toList());
 	}
 
 	@Override
 	public UiComponent createUiComponent() {
 		List<UiTimeChartZoomLevel> uiZoomLevels = createUiZoomlevels();
-		Map<String, UiLineChartLineFormat> uiLineFormats = toUiLineFormats(lines);
 
-		Interval domainX = model.getDomainX(getLineIds());
-		UiLongInterval uiIntervalX = new Interval(domainX.getMin(), domainX.getMax()).createUiLongInterval();
+		Interval domainX = retrieveDomainX();
+
+		this.displayedInterval = domainX;
+		UiLongInterval uiIntervalX = new Interval(domainX.getMin(), domainX.getMax()).toUiLongInterval();
 
 		UiTimeGraph uiTimeGraph = new UiTimeGraph(
-				getId(),
 				uiIntervalX,
 				uiZoomLevels,
 				maxPixelsBetweenDataPoints,
-				uiLineFormats
+				toUiLineFormats(getGraphs())
 		);
+		uiTimeGraph.setLocale(locale.toLanguageTag());
+		uiTimeGraph.setTimeZoneId(timeZoneId.getId());
 		mapAbstractUiComponentProperties(uiTimeGraph);
 		uiTimeGraph.setMouseScrollZoomPanMode(mouseScrollZoomPanMode.toUiLineChartMouseScrollZoomPanMode());
 		return uiTimeGraph;
 	}
 
-	@NotNull
 	private List<UiTimeChartZoomLevel> createUiZoomlevels() {
-		return this.model.getZoomLevels().stream()
-				.map(TimeGraphZoomLevel::createUiTimeChartZoomLevel)
+		return this.zoomLevels.stream()
+				.map(timePartitioning -> new UiTimeChartZoomLevel(timePartitioning.getApproximateMillisecondsPerPartition()))
 				.collect(Collectors.toList());
 	}
 
-	@Override
-	protected void doDestroy() {
-		unregisterModelListeners();
-	}
-
 	@Override
 	public void handleUiEvent(UiEvent event) {
 		switch (event.getUiEventType()) {
-			case UI_TIME_GRAPH_DATA_NEEDED: {
-				UiTimeGraph.DataNeededEvent dataNeededEvent = (UiTimeGraph.DataNeededEvent) event;
-				Interval interval = new Interval(dataNeededEvent.getNeededIntervalX().getMin(), dataNeededEvent.getNeededIntervalX().getMax());
-				TimeGraphZoomLevel zoomLevel = model.getZoomLevels().get(dataNeededEvent.getZoomLevelIndex());
-				Map<String, List<LineChartDataPoint>> data = model.getDataPoints(getLineIds(), zoomLevel, interval);
-				queueCommandIfRendered(() -> new UiTimeGraph.AddDataCommand(this.getId(), dataNeededEvent.getZoomLevelIndex(), dataNeededEvent.getNeededIntervalX(), convertToUiData(data)));
-				break;
-			}
 			case UI_TIME_GRAPH_ZOOMED: {
 				UiTimeGraph.ZoomedEvent zoomedEvent = (UiTimeGraph.ZoomedEvent) event;
-				Interval interval = new Interval(zoomedEvent.getIntervalX().getMin(), zoomedEvent.getIntervalX().getMax());
-				this.onZoomed.fire(new ZoomEventData(interval, zoomedEvent.getZoomLevelIndex()));
+				if (zoomedEvent.getMillisecondsPerPixel() <= 0) {
+					return; // this is an erroneous request, probably sent from a component that has not enough space to render graphs anyway!
+				}
+
+				Interval displayedInterval = new Interval(zoomedEvent.getDisplayedInterval().getMin(), zoomedEvent.getDisplayedInterval().getMax());
+				TimePartitioning timePartitioning = zoomLevels.get(zoomedEvent.getZoomLevelIndex());
+
+				if (zoomedEvent.getNeededIntervalsByGraphId() != null) {
+					final Map<String, List<Interval>> neededIntervalsByGraphId = zoomedEvent.getNeededIntervalsByGraphId().entrySet().stream()
+							.collect(Collectors.toMap(Map.Entry::getKey, entry -> entry.getValue().stream().map(i -> new Interval(i.getMin(), i.getMax())).collect(Collectors.toList())));
+					Map<String, GraphData> data = retrieveData(displayedInterval, timePartitioning, neededIntervalsByGraphId);
+					queueCommandIfRendered(() -> new UiTimeGraph.AddDataCommand(this.getId(), zoomedEvent.getZoomLevelIndex(), convertToUiData(data)));
+				}
+
+				this.displayedInterval = displayedInterval;
+				this.millisecondsPerPixel = zoomedEvent.getMillisecondsPerPixel();
+				this.onZoomed.fire(new ZoomEventData(displayedInterval, zoomedEvent.getMillisecondsPerPixel(), timePartitioning));
 				break;
 			}
 			case UI_TIME_GRAPH_INTERVAL_SELECTED: {
@@ -206,25 +188,42 @@ public void handleUiEvent(UiEvent event) {
 		}
 	}
 
-	private Map<String, List<UiTimeGraphDataPoint>> convertToUiData(Map<String, List<LineChartDataPoint>> data) {
-		Map<String, List<UiTimeGraphDataPoint>> uiData = new HashMap<>();
-		data.forEach((lineId, dataPoints) -> uiData.put(lineId, dataPoints.stream()
-				.map(dataPoint -> new UiTimeGraphDataPoint(dataPoint.getX(), dataPoint.getY()))
-				.collect(Collectors.toList())));
-		return uiData;
+	private Interval retrieveDomainX() {
+		return graphsAndListeners.stream()
+				.map(g -> g.graph.getModel().getDomainX())
+				.reduce(Interval::union)
+				.orElse(new Interval(0, 1));
+	}
+
+	private Map<String, GraphData> retrieveData(Interval displayedInterval, TimePartitioning timePartitioning, Map<String, List<Interval>> neededIntervalsByGraphId) {
+		return graphsAndListeners.stream()
+				.filter(g -> neededIntervalsByGraphId.containsKey(g.graph.getId()) && neededIntervalsByGraphId.get(g.graph.getId()).size() > 0)
+				.collect(Collectors.toMap(
+						g -> g.graph.getId(),
+						g -> neededIntervalsByGraphId.get(g.graph.getId()).stream()
+								.reduce(Interval::union)
+								.map(interval -> g.graph.getModel().getData(timePartitioning, timeZoneId, interval, displayedInterval))
+								.orElseThrow()
+				));
+	}
+
+	private Map<String, UiGraphData> convertToUiData(Map<String, GraphData> data) {
+		return data.entrySet().stream()
+				.collect(Collectors.toMap(Map.Entry::getKey, e -> e.getValue().toUiGraphData()));
 	}
 
 	public void refresh() {
-		if (this.eagerFetchingParametersSupplier != null) {
-			queueCommandIfRendered(() -> {
-				EagerFetchingParameters eagerFetchingConfig = this.eagerFetchingParametersSupplier.get();
-				TimeGraphZoomLevel zoomLevel = model.getZoomLevels().get(eagerFetchingConfig.zoomLevelIndex);
-				Map<String, List<UiTimeGraphDataPoint>> uiData = convertToUiData(model.getDataPoints(getLineIds(), zoomLevel, eagerFetchingConfig.intervalX));
-				return new UiTimeGraph.ReplaceAllDataCommand(getId(), createUiZoomlevels(), eagerFetchingConfig.zoomLevelIndex, eagerFetchingConfig.intervalX.createUiLongInterval(), uiData);
-			});
+		Interval domainX = retrieveDomainX();
+		UiLongInterval uiIntervalX = new Interval(domainX.getMin(), domainX.getMax()).toUiLongInterval();
+		queueCommandIfRendered(() -> new UiTimeGraph.ResetAllDataCommand(getId(), uiIntervalX, createUiZoomlevels()));
+	}
+
+	public void zoomTo(long minX, long maxX) {
+		if (isRendered()) {
+			getSessionContext().queueCommand(new UiTimeGraph.ZoomToCommand(getId(), new UiLongInterval(minX, maxX)),
+					aVoid -> this.displayedInterval = new Interval(minX, maxX));
 		} else {
-			queueCommandIfRendered(() -> new UiTimeGraph.ResetAllDataCommand(getId(), createUiZoomlevels()));
-			// the time graph will query for data
+			this.displayedInterval = new Interval(minX, maxX);
 		}
 	}
 
@@ -252,54 +251,56 @@ public Interval getSelectedInterval() {
 
 	public void setSelectedInterval(Interval selectedInterval) {
 		this.selectedInterval = selectedInterval;
-		queueCommandIfRendered(() -> new UiTimeGraph.SetSelectedIntervalCommand(getId(), selectedInterval.createUiLongInterval()));
+		queueCommandIfRendered(() -> new UiTimeGraph.SetSelectedIntervalCommand(getId(), selectedInterval.toUiLongInterval()));
 	}
 
-	public void setModel(TimeGraphModel model) {
-		unregisterModelListeners();
-		if (model != null) {
-			model.onDataChanged().addListener(onTimeGraphDataChangedListener);
-		}
-		this.model = model;
-		refresh();
+	private void handleGraphDataChanged(AbstractGraph<?, ?> graph) {
+		Interval domainX = retrieveDomainX();
+		UiLongInterval uiIntervalX = new Interval(domainX.getMin(), domainX.getMax()).toUiLongInterval();
+		queueCommandIfRendered(() -> new UiTimeGraph.SetIntervalXCommand(getId(), uiIntervalX));
+		queueCommandIfRendered(() -> new UiTimeGraph.ResetGraphDataCommand(getId(), graph.getId()));
 	}
 
-	private void unregisterModelListeners() {
-		if (this.model != null) {
-			this.model.onDataChanged().removeListener(onTimeGraphDataChangedListener);
-		}
+	public Locale getLocale() {
+		return locale.toLocale();
 	}
 
-	private void onTimeGraphDataChanged(Void aVoid) {
-		Interval domainX = model.getDomainX(getLineIds());
-		UiLongInterval uiIntervalX = new Interval(domainX.getMin(), domainX.getMax()).createUiLongInterval();
-		queueCommandIfRendered(() -> new UiTimeGraph.SetIntervalXCommand(getId(), uiIntervalX));
-		refresh();
+	public ULocale getULocale() {
+		return locale;
 	}
 
-	public void setEagerFetchingParametersSupplier(Supplier<EagerFetchingParameters> eagerFetchingParameterSupplier) {
-		this.eagerFetchingParametersSupplier = eagerFetchingParameterSupplier;
+	public void setLocale(Locale locale) {
+		setULocale(ULocale.forLocale(locale));
 	}
 
-	public Supplier<EagerFetchingParameters> getEagerFetchingParametersSupplier() {
-		return eagerFetchingParametersSupplier;
+	public void setULocale(ULocale locale) {
+		boolean changed = !Objects.equals(locale, this.locale);
+		this.locale = locale;
+		if (changed) {
+			reRenderIfRendered();
+		}
 	}
 
-	public static class EagerFetchingParameters {
-		private final int zoomLevelIndex;
-		private final Interval intervalX;
+	public ZoneId getTimeZoneId() {
+		return timeZoneId;
+	}
 
-		public EagerFetchingParameters(int zoomLevelIndex, Interval intervalX) {
-			this.zoomLevelIndex = zoomLevelIndex;
-			this.intervalX = intervalX;
+	public void setTimeZoneId(ZoneId timeZoneId) {
+		boolean changed = !Objects.equals(timeZoneId, this.timeZoneId);
+		this.timeZoneId = timeZoneId;
+		if (changed) {
+			reRenderIfRendered();
 		}
+	}
 
-		public int getZoomLevelIndex() {
-			return zoomLevelIndex;
-		}
+	public List<TimePartitioning> getZoomLevels() {
+		return zoomLevels;
+	}
 
-		public Interval getIntervalX() {
-			return intervalX;
-		}
+	public void setZoomLevels(List<TimePartitioning> zoomLevels) {
+		this.zoomLevels = zoomLevels.stream()
+				.sorted(Comparator.comparing(TimePartitioning::getApproximateMillisecondsPerPartition).reversed())
+				.collect(Collectors.toList());
+		refresh();
 	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/TimePartitioning.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/TimePartitioning.java
new file mode 100644
index 000000000..7d8b956e8
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/TimePartitioning.java
@@ -0,0 +1,39 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.timegraph;
+
+import java.time.ZonedDateTime;
+import java.time.temporal.ChronoUnit;
+
+public interface TimePartitioning {
+
+	long getApproximateMillisecondsPerPartition();
+
+	ZonedDateTime getPartitionStart(ZonedDateTime zonedDateTime);
+	
+	default ZonedDateTime getPartitionEnd(ZonedDateTime zonedDateTime) {
+		return increment(getPartitionStart(zonedDateTime.minus(1, ChronoUnit.MICROS)));
+	}
+
+	ZonedDateTime increment(ZonedDateTime zonedDateTime);
+
+	ZonedDateTime decrement(ZonedDateTime zonedDateTime);
+
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/partitioning/TimePartitionUnit.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/TimePartitioningUnit.java
similarity index 77%
rename from teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/partitioning/TimePartitionUnit.java
rename to teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/TimePartitioningUnit.java
index ec47ae9cc..fa1bb0462 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/partitioning/TimePartitionUnit.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/TimePartitioningUnit.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,17 +17,17 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-package org.teamapps.ux.component.timegraph.partitioning;
+package org.teamapps.ux.component.timegraph;
 
 import java.time.DayOfWeek;
 import java.time.Instant;
 import java.time.ZonedDateTime;
 import java.time.temporal.ChronoUnit;
 
-public enum TimePartitionUnit {
+public enum TimePartitioningUnit implements TimePartitioning {
 	MILLISECOND(1) {
 		@Override
-		public ZonedDateTime getPartition(ZonedDateTime zonedDateTime) {
+		public ZonedDateTime getPartitionStart(ZonedDateTime zonedDateTime) {
 			return zonedDateTime.truncatedTo(ChronoUnit.MILLIS);
 		}
 
@@ -42,7 +42,7 @@ public ZonedDateTime decrement(ZonedDateTime zonedDateTime) {
 		}
 	}, MILLISECOND_2(2) {
 		@Override
-		public ZonedDateTime getPartition(ZonedDateTime zonedDateTime) {
+		public ZonedDateTime getPartitionStart(ZonedDateTime zonedDateTime) {
 			long epochMilli = zonedDateTime.toInstant().toEpochMilli();
 			epochMilli = epochMilli - epochMilli % 2;
 			return ZonedDateTime.ofInstant(Instant.ofEpochMilli(epochMilli), zonedDateTime.getZone());
@@ -59,7 +59,7 @@ public ZonedDateTime decrement(ZonedDateTime zonedDateTime) {
 		}
 	}, MILLISECOND_5(5) {
 		@Override
-		public ZonedDateTime getPartition(ZonedDateTime zonedDateTime) {
+		public ZonedDateTime getPartitionStart(ZonedDateTime zonedDateTime) {
 			long epochMilli = zonedDateTime.toInstant().toEpochMilli();
 			epochMilli = epochMilli - epochMilli % 5;
 			return ZonedDateTime.ofInstant(Instant.ofEpochMilli(epochMilli), zonedDateTime.getZone());
@@ -76,7 +76,7 @@ public ZonedDateTime decrement(ZonedDateTime zonedDateTime) {
 		}
 	}, MILLISECOND_10(10) {
 		@Override
-		public ZonedDateTime getPartition(ZonedDateTime zonedDateTime) {
+		public ZonedDateTime getPartitionStart(ZonedDateTime zonedDateTime) {
 			long epochMilli = zonedDateTime.toInstant().toEpochMilli();
 			epochMilli = epochMilli - epochMilli % 10;
 			return ZonedDateTime.ofInstant(Instant.ofEpochMilli(epochMilli), zonedDateTime.getZone());
@@ -93,7 +93,7 @@ public ZonedDateTime decrement(ZonedDateTime zonedDateTime) {
 		}
 	}, MILLISECOND_20(20) {
 		@Override
-		public ZonedDateTime getPartition(ZonedDateTime zonedDateTime) {
+		public ZonedDateTime getPartitionStart(ZonedDateTime zonedDateTime) {
 			long epochMilli = zonedDateTime.toInstant().toEpochMilli();
 			epochMilli = epochMilli - epochMilli % 20;
 			return ZonedDateTime.ofInstant(Instant.ofEpochMilli(epochMilli), zonedDateTime.getZone());
@@ -110,7 +110,7 @@ public ZonedDateTime decrement(ZonedDateTime zonedDateTime) {
 		}
 	}, MILLISECOND_50(50) {
 		@Override
-		public ZonedDateTime getPartition(ZonedDateTime zonedDateTime) {
+		public ZonedDateTime getPartitionStart(ZonedDateTime zonedDateTime) {
 			long epochMilli = zonedDateTime.toInstant().toEpochMilli();
 			epochMilli = epochMilli - epochMilli % 50;
 			return ZonedDateTime.ofInstant(Instant.ofEpochMilli(epochMilli), zonedDateTime.getZone());
@@ -127,7 +127,7 @@ public ZonedDateTime decrement(ZonedDateTime zonedDateTime) {
 		}
 	},	MILLISECOND_100(100) {
 		@Override
-		public ZonedDateTime getPartition(ZonedDateTime zonedDateTime) {
+		public ZonedDateTime getPartitionStart(ZonedDateTime zonedDateTime) {
 			long epochMilli = zonedDateTime.toInstant().toEpochMilli();
 			epochMilli = epochMilli - epochMilli % 100;
 			return ZonedDateTime.ofInstant(Instant.ofEpochMilli(epochMilli), zonedDateTime.getZone());
@@ -144,7 +144,7 @@ public ZonedDateTime decrement(ZonedDateTime zonedDateTime) {
 		}
 	},	MILLISECOND_200(200) {
 		@Override
-		public ZonedDateTime getPartition(ZonedDateTime zonedDateTime) {
+		public ZonedDateTime getPartitionStart(ZonedDateTime zonedDateTime) {
 			long epochMilli = zonedDateTime.toInstant().toEpochMilli();
 			epochMilli = epochMilli - epochMilli % 200;
 			return ZonedDateTime.ofInstant(Instant.ofEpochMilli(epochMilli), zonedDateTime.getZone());
@@ -161,7 +161,7 @@ public ZonedDateTime decrement(ZonedDateTime zonedDateTime) {
 		}
 	},	MILLISECOND_500(500) {
 		@Override
-		public ZonedDateTime getPartition(ZonedDateTime zonedDateTime) {
+		public ZonedDateTime getPartitionStart(ZonedDateTime zonedDateTime) {
 			long epochMilli = zonedDateTime.toInstant().toEpochMilli();
 			epochMilli = epochMilli - epochMilli % 500;
 			return ZonedDateTime.ofInstant(Instant.ofEpochMilli(epochMilli), zonedDateTime.getZone());
@@ -179,7 +179,7 @@ public ZonedDateTime decrement(ZonedDateTime zonedDateTime) {
 	},
 	SECOND(1000) {
 		@Override
-		public ZonedDateTime getPartition(ZonedDateTime zonedDateTime) {
+		public ZonedDateTime getPartitionStart(ZonedDateTime zonedDateTime) {
 			return zonedDateTime.truncatedTo(ChronoUnit.SECONDS);
 		}
 
@@ -195,7 +195,7 @@ public ZonedDateTime decrement(ZonedDateTime zonedDateTime) {
 	},
 	SECONDS_2(2000) {
 		@Override
-		public ZonedDateTime getPartition(ZonedDateTime zonedDateTime) {
+		public ZonedDateTime getPartitionStart(ZonedDateTime zonedDateTime) {
 			return zonedDateTime.truncatedTo(ChronoUnit.SECONDS).withSecond(2 * (zonedDateTime.getSecond() / 2));
 		}
 
@@ -211,7 +211,7 @@ public ZonedDateTime decrement(ZonedDateTime zonedDateTime) {
 	},
 	SECONDS_5(5000) {
 		@Override
-		public ZonedDateTime getPartition(ZonedDateTime zonedDateTime) {
+		public ZonedDateTime getPartitionStart(ZonedDateTime zonedDateTime) {
 			return zonedDateTime.truncatedTo(ChronoUnit.SECONDS).withSecond(5 * (zonedDateTime.getSecond() / 5));
 		}
 
@@ -227,7 +227,7 @@ public ZonedDateTime decrement(ZonedDateTime zonedDateTime) {
 	},
 	SECONDS_10(10_000) {
 		@Override
-		public ZonedDateTime getPartition(ZonedDateTime zonedDateTime) {
+		public ZonedDateTime getPartitionStart(ZonedDateTime zonedDateTime) {
 			return zonedDateTime.truncatedTo(ChronoUnit.SECONDS).withSecond(10 * (zonedDateTime.getSecond() / 10));
 		}
 
@@ -243,7 +243,7 @@ public ZonedDateTime decrement(ZonedDateTime zonedDateTime) {
 	},
 	SECONDS_15(15_000) {
 		@Override
-		public ZonedDateTime getPartition(ZonedDateTime zonedDateTime) {
+		public ZonedDateTime getPartitionStart(ZonedDateTime zonedDateTime) {
 			return zonedDateTime.truncatedTo(ChronoUnit.SECONDS).withSecond(15 * (zonedDateTime.getSecond() / 15));
 		}
 
@@ -259,7 +259,7 @@ public ZonedDateTime decrement(ZonedDateTime zonedDateTime) {
 	},
 	SECONDS_30(30_000) {
 		@Override
-		public ZonedDateTime getPartition(ZonedDateTime zonedDateTime) {
+		public ZonedDateTime getPartitionStart(ZonedDateTime zonedDateTime) {
 			return zonedDateTime.truncatedTo(ChronoUnit.SECONDS).withSecond(30 * (zonedDateTime.getSecond() / 30));
 		}
 
@@ -275,7 +275,7 @@ public ZonedDateTime decrement(ZonedDateTime zonedDateTime) {
 	},
 	MINUTE(60_000) {
 		@Override
-		public ZonedDateTime getPartition(ZonedDateTime zonedDateTime) {
+		public ZonedDateTime getPartitionStart(ZonedDateTime zonedDateTime) {
 			return zonedDateTime.truncatedTo(ChronoUnit.MINUTES);
 		}
 
@@ -291,7 +291,7 @@ public ZonedDateTime decrement(ZonedDateTime zonedDateTime) {
 	},
 	MINUTES_2(2 * 60_000) {
 		@Override
-		public ZonedDateTime getPartition(ZonedDateTime zonedDateTime) {
+		public ZonedDateTime getPartitionStart(ZonedDateTime zonedDateTime) {
 			return zonedDateTime.truncatedTo(ChronoUnit.MINUTES).withMinute(2 * (zonedDateTime.getMinute() / 2));
 		}
 
@@ -307,7 +307,7 @@ public ZonedDateTime decrement(ZonedDateTime zonedDateTime) {
 	},
 	MINUTES_5(5 * 60_000) {
 		@Override
-		public ZonedDateTime getPartition(ZonedDateTime zonedDateTime) {
+		public ZonedDateTime getPartitionStart(ZonedDateTime zonedDateTime) {
 			return zonedDateTime.truncatedTo(ChronoUnit.MINUTES).withMinute(5 * (zonedDateTime.getMinute() / 5));
 		}
 
@@ -323,7 +323,7 @@ public ZonedDateTime decrement(ZonedDateTime zonedDateTime) {
 	},
 	MINUTES_10(10 * 60_000) {
 		@Override
-		public ZonedDateTime getPartition(ZonedDateTime zonedDateTime) {
+		public ZonedDateTime getPartitionStart(ZonedDateTime zonedDateTime) {
 			return zonedDateTime.truncatedTo(ChronoUnit.MINUTES).withMinute(10 * (zonedDateTime.getMinute() / 10));
 		}
 
@@ -339,7 +339,7 @@ public ZonedDateTime decrement(ZonedDateTime zonedDateTime) {
 	},
 	MINUTES_15(15 * 60_000) {
 		@Override
-		public ZonedDateTime getPartition(ZonedDateTime zonedDateTime) {
+		public ZonedDateTime getPartitionStart(ZonedDateTime zonedDateTime) {
 			return zonedDateTime.truncatedTo(ChronoUnit.MINUTES).withMinute(15 * (zonedDateTime.getMinute() / 15));
 		}
 
@@ -355,7 +355,7 @@ public ZonedDateTime decrement(ZonedDateTime zonedDateTime) {
 	},
 	MINUTES_30(30 * 60_000) {
 		@Override
-		public ZonedDateTime getPartition(ZonedDateTime zonedDateTime) {
+		public ZonedDateTime getPartitionStart(ZonedDateTime zonedDateTime) {
 			return zonedDateTime.truncatedTo(ChronoUnit.MINUTES).withMinute(30 * (zonedDateTime.getMinute() / 30));
 		}
 
@@ -371,7 +371,7 @@ public ZonedDateTime decrement(ZonedDateTime zonedDateTime) {
 	},
 	HOUR(3_600_000) {
 		@Override
-		public ZonedDateTime getPartition(ZonedDateTime zonedDateTime) {
+		public ZonedDateTime getPartitionStart(ZonedDateTime zonedDateTime) {
 			return zonedDateTime.truncatedTo(ChronoUnit.HOURS);
 		}
 
@@ -385,9 +385,63 @@ public ZonedDateTime decrement(ZonedDateTime zonedDateTime) {
 			return zonedDateTime.minusHours(1);
 		}
 	},
+	HOURS_3(3 * 3_600_000) {
+		@Override
+		public ZonedDateTime getPartitionStart(ZonedDateTime zonedDateTime) {
+			return zonedDateTime.truncatedTo(ChronoUnit.HOURS).withHour(3 * (zonedDateTime.getHour() / 3));
+		}
+
+		@Override
+		public ZonedDateTime increment(ZonedDateTime zonedDateTime) {
+			// make sure we are not the victims of a clock change - still not perfect...
+			if (zonedDateTime.getHour() == 0) {
+				return zonedDateTime.withHour(3);
+			} else if (zonedDateTime.getHour() == 3) {
+				return zonedDateTime.withHour(6);
+			} else if (zonedDateTime.getHour() == 6) {
+				return zonedDateTime.withHour(9);
+			} else if (zonedDateTime.getHour() == 9) {
+				return zonedDateTime.withHour(12);
+			} else if (zonedDateTime.getHour() == 12) {
+				return zonedDateTime.withHour(15);
+			} else if (zonedDateTime.getHour() == 15) {
+				return zonedDateTime.withHour(18);
+			} else if (zonedDateTime.getHour() == 18) {
+				return zonedDateTime.withHour(21);
+			} else if (zonedDateTime.getHour() == 21) {
+				return zonedDateTime.plusDays(1).withHour(0);
+			} else {
+				return zonedDateTime.plusHours(3);
+			}
+		}
+
+		@Override
+		public ZonedDateTime decrement(ZonedDateTime zonedDateTime) {
+			// make sure we are not the victims of a clock change - still not perfect...
+			if (zonedDateTime.getHour() == 0) {
+				return zonedDateTime.minusDays(1).withHour(21);
+			} else if (zonedDateTime.getHour() == 3) {
+				return zonedDateTime.withHour(0);
+			} else if (zonedDateTime.getHour() == 6) {
+				return zonedDateTime.withHour(3);
+			} else if (zonedDateTime.getHour() == 9) {
+				return zonedDateTime.withHour(6);
+			} else if (zonedDateTime.getHour() == 12) {
+				return zonedDateTime.withHour(9);
+			} else if (zonedDateTime.getHour() == 15) {
+				return zonedDateTime.withHour(12);
+			} else if (zonedDateTime.getHour() == 18) {
+				return zonedDateTime.withHour(15);
+			} else if (zonedDateTime.getHour() == 21) {
+				return zonedDateTime.withHour(18);
+			} else {
+				return zonedDateTime.minusHours(3);
+			}
+		}
+	},
 	HOURS_6(6 * 3_600_000) {
 		@Override
-		public ZonedDateTime getPartition(ZonedDateTime zonedDateTime) {
+		public ZonedDateTime getPartitionStart(ZonedDateTime zonedDateTime) {
 			return zonedDateTime.truncatedTo(ChronoUnit.HOURS).withHour(6 * (zonedDateTime.getHour() / 6));
 		}
 
@@ -425,7 +479,7 @@ public ZonedDateTime decrement(ZonedDateTime zonedDateTime) {
 	},
 	HOURS_12(12 * 3_600_000) {
 		@Override
-		public ZonedDateTime getPartition(ZonedDateTime zonedDateTime) {
+		public ZonedDateTime getPartitionStart(ZonedDateTime zonedDateTime) {
 			return zonedDateTime.truncatedTo(ChronoUnit.HOURS).withHour(12 * (zonedDateTime.getHour() / 12));
 		}
 
@@ -455,7 +509,7 @@ public ZonedDateTime decrement(ZonedDateTime zonedDateTime) {
 	},
 	DAY(86_400_000) {
 		@Override
-		public ZonedDateTime getPartition(ZonedDateTime zonedDateTime) {
+		public ZonedDateTime getPartitionStart(ZonedDateTime zonedDateTime) {
 			return zonedDateTime.truncatedTo(ChronoUnit.DAYS);
 		}
 
@@ -471,7 +525,7 @@ public ZonedDateTime decrement(ZonedDateTime zonedDateTime) {
 	},
 	WEEK_SUNDAY(7 * 86_400_000) {
 		@Override
-		public ZonedDateTime getPartition(ZonedDateTime zonedDateTime) {
+		public ZonedDateTime getPartitionStart(ZonedDateTime zonedDateTime) {
 			zonedDateTime = zonedDateTime.truncatedTo(ChronoUnit.DAYS);
 			int dayOfWeek = zonedDateTime.getDayOfWeek().getValue();
 			if (dayOfWeek < DayOfWeek.SUNDAY.getValue() /*7*/) {
@@ -492,7 +546,7 @@ public ZonedDateTime decrement(ZonedDateTime zonedDateTime) {
 	},
 	WEEK_MONDAY(7 * 86_400_000) {
 		@Override
-		public ZonedDateTime getPartition(ZonedDateTime zonedDateTime) {
+		public ZonedDateTime getPartitionStart(ZonedDateTime zonedDateTime) {
 			zonedDateTime = zonedDateTime.truncatedTo(ChronoUnit.DAYS);
 			zonedDateTime = zonedDateTime.minusDays(zonedDateTime.getDayOfWeek().ordinal());
 			return zonedDateTime;
@@ -510,7 +564,7 @@ public ZonedDateTime decrement(ZonedDateTime zonedDateTime) {
 	},
 	MONTH(2_592_000_000L) {
 		@Override
-		public ZonedDateTime getPartition(ZonedDateTime zonedDateTime) {
+		public ZonedDateTime getPartitionStart(ZonedDateTime zonedDateTime) {
 			return zonedDateTime.truncatedTo(ChronoUnit.DAYS).withDayOfMonth(1);
 		}
 
@@ -526,7 +580,7 @@ public ZonedDateTime decrement(ZonedDateTime zonedDateTime) {
 	},
 	QUARTER(3 * 2_592_000_000L) {
 		@Override
-		public ZonedDateTime getPartition(ZonedDateTime zonedDateTime) {
+		public ZonedDateTime getPartitionStart(ZonedDateTime zonedDateTime) {
 			zonedDateTime = zonedDateTime.truncatedTo(ChronoUnit.DAYS).withDayOfMonth(1);
 			return zonedDateTime.withMonth(3 * ((zonedDateTime.getMonthValue() - 1) / 3) + 1);
 		}
@@ -543,7 +597,7 @@ public ZonedDateTime decrement(ZonedDateTime zonedDateTime) {
 	},
 	HALF_YEAR(6 * 2_592_000_000L) {
 		@Override
-		public ZonedDateTime getPartition(ZonedDateTime zonedDateTime) {
+		public ZonedDateTime getPartitionStart(ZonedDateTime zonedDateTime) {
 			zonedDateTime = zonedDateTime.truncatedTo(ChronoUnit.DAYS).withDayOfMonth(1);
 			return zonedDateTime.withMonth(6 * ((zonedDateTime.getMonthValue() - 1) / 6) + 1);
 		}
@@ -560,7 +614,7 @@ public ZonedDateTime decrement(ZonedDateTime zonedDateTime) {
 	},
 	YEAR(12 * 2_592_000_000L) {
 		@Override
-		public ZonedDateTime getPartition(ZonedDateTime zonedDateTime) {
+		public ZonedDateTime getPartitionStart(ZonedDateTime zonedDateTime) {
 			return ZonedDateTime.of(zonedDateTime.getYear(), 1, 1, 0, 0, 0, 0, zonedDateTime.getZone());
 		}
 
@@ -577,7 +631,7 @@ public ZonedDateTime decrement(ZonedDateTime zonedDateTime) {
 
 	private final long averageMilliseconds;
 
-	TimePartitionUnit(long averageMilliseconds) {
+	TimePartitioningUnit(long averageMilliseconds) {
 		this.averageMilliseconds = averageMilliseconds;
 	}
 
@@ -585,9 +639,14 @@ public long getAverageMilliseconds() {
 		return averageMilliseconds;
 	}
 
-	public abstract ZonedDateTime getPartition(ZonedDateTime zonedDateTime);
+	public abstract ZonedDateTime getPartitionStart(ZonedDateTime zonedDateTime);
 
 	public abstract ZonedDateTime increment(ZonedDateTime zonedDateTime);
 
 	public abstract ZonedDateTime decrement(ZonedDateTime zonedDateTime);
+
+	@Override
+	public long getApproximateMillisecondsPerPartition() {
+		return averageMilliseconds;
+	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/ZoomEventData.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/ZoomEventData.java
index f7b9fb651..a4def93e6 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/ZoomEventData.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/ZoomEventData.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -21,18 +21,24 @@
 
 public class ZoomEventData {
 	private final Interval intervalX;
-	private final int zoomLevelIndex;
+	private final double millisecondsPerPixel;
+	private final TimePartitioning timePartitioning;
 
-	public ZoomEventData(Interval intervalX, int zoomLevelIndex) {
+	public ZoomEventData(Interval intervalX, double millisecondsPerPixel, TimePartitioning timePartitioning) {
 		this.intervalX = intervalX;
-		this.zoomLevelIndex = zoomLevelIndex;
-	}
-
-	public int getZoomLevelIndex() {
-		return zoomLevelIndex;
+		this.millisecondsPerPixel = millisecondsPerPixel;
+		this.timePartitioning = timePartitioning;
 	}
 
 	public Interval getIntervalX() {
 		return intervalX;
 	}
+
+	public double getMillisecondsPerPixel() {
+		return millisecondsPerPixel;
+	}
+
+	public TimePartitioning getTimePartitioning() {
+		return timePartitioning;
+	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/datapoints/GraphData.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/datapoints/GraphData.java
new file mode 100644
index 000000000..f5b3fd9a8
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/datapoints/GraphData.java
@@ -0,0 +1,31 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.timegraph.datapoints;
+
+import org.teamapps.dto.UiGraphData;
+import org.teamapps.ux.component.timegraph.Interval;
+
+public interface GraphData {
+
+	Interval getInterval();
+
+	UiGraphData toUiGraphData();
+
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/datapoints/GraphGroupData.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/datapoints/GraphGroupData.java
new file mode 100644
index 000000000..8dd1b8f47
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/datapoints/GraphGroupData.java
@@ -0,0 +1,48 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.timegraph.datapoints;
+
+import org.teamapps.dto.UiGraphData;
+import org.teamapps.dto.UiGraphGroupData;
+import org.teamapps.ux.component.timegraph.Interval;
+
+import java.util.Map;
+import java.util.Objects;
+import java.util.stream.Collectors;
+
+public interface GraphGroupData extends GraphData {
+
+	Map<String, GraphData> getGraphData();
+
+	default Interval getInterval() {
+		return getGraphData().values().stream()
+				.map(GraphData::getInterval)
+				.reduce(Interval::intersection)
+				.orElse(Interval.empty());
+	}
+
+	@Override
+	default UiGraphGroupData toUiGraphData() {
+		final Map<String, UiGraphData> uiGraphDataMap = getGraphData().entrySet().stream()
+				.filter(Objects::nonNull)
+				.collect(Collectors.toMap(Map.Entry::getKey, e -> e.getValue().toUiGraphData()));
+		return new UiGraphGroupData(uiGraphDataMap, getInterval().toUiLongInterval());
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/datapoints/HoseGraphData.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/datapoints/HoseGraphData.java
new file mode 100644
index 000000000..2f70642dd
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/datapoints/HoseGraphData.java
@@ -0,0 +1,58 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.timegraph.datapoints;
+
+import org.teamapps.dto.UiGraphData;
+import org.teamapps.dto.UiHoseGraphData;
+import org.teamapps.ux.component.timegraph.Interval;
+
+import java.util.Objects;
+import java.util.stream.Stream;
+
+public interface HoseGraphData extends GraphData {
+
+	LineGraphData getMiddleLineData();
+
+	LineGraphData getLowerLineData();
+
+	LineGraphData getUpperLineData();
+
+	@Override
+	default Interval getInterval() {
+		return Stream.of(getMiddleLineData(), getLowerLineData(), getUpperLineData())
+				.filter(Objects::nonNull)
+				.map(lineGraphData -> lineGraphData.getInterval())
+				.reduce(Interval::intersection)
+				.orElse(Interval.empty());
+	}
+
+	@Override
+	default UiGraphData toUiGraphData() {
+		final LineGraphData lowerLineData = getLowerLineData();
+		final LineGraphData middleLineData = getMiddleLineData();
+		final LineGraphData upperLineData = getUpperLineData();
+		return new UiHoseGraphData(
+				lowerLineData != null ? lowerLineData.toUiGraphData() : null,
+				middleLineData != null ? middleLineData.toUiGraphData() : null,
+				upperLineData != null ? upperLineData.toUiGraphData() : null,
+				getInterval().toUiLongInterval()
+		);
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/datapoints/IncidentGraphData.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/datapoints/IncidentGraphData.java
new file mode 100644
index 000000000..0c666ab49
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/datapoints/IncidentGraphData.java
@@ -0,0 +1,47 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.timegraph.datapoints;
+
+import org.teamapps.dto.UiGraphData;
+import org.teamapps.dto.UiIncidentGraphData;
+import org.teamapps.dto.UiIncidentGraphDataPoint;
+
+import java.util.stream.Collectors;
+import java.util.stream.Stream;
+
+public interface IncidentGraphData extends GraphData {
+
+	int size();
+
+	IncidentGraphDataPoint getDataPoint(int index);
+
+	default Stream<IncidentGraphDataPoint> streamDataPoints() {
+		int[] i = {0};
+		return Stream.generate(() -> getDataPoint(i[0]++))
+				.limit(size());
+	}
+
+	@Override
+	default UiGraphData toUiGraphData() {
+		return new UiIncidentGraphData(streamDataPoints()
+				.map(d -> new UiIncidentGraphDataPoint(d.getX1(), d.getX2(), d.getY(), d.getColor().toHtmlColorString(), d.getTooltipHtml()))
+				.collect(Collectors.toList()), getInterval().toUiLongInterval());
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/datapoints/IncidentGraphDataPoint.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/datapoints/IncidentGraphDataPoint.java
new file mode 100644
index 000000000..fff8e9f1d
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/datapoints/IncidentGraphDataPoint.java
@@ -0,0 +1,63 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.timegraph.datapoints;
+
+import org.teamapps.common.format.Color;
+
+public class IncidentGraphDataPoint {
+
+	private final double x1;
+	private final double x2;
+	private final double y;
+	private final Color color;
+	private final String tooltipHtml;
+
+	public IncidentGraphDataPoint(double x1, double x2, double y, Color color, String tooltipHtml) {
+		this.x1 = x1;
+		this.x2 = x2;
+		this.y = y;
+		this.color = color;
+		this.tooltipHtml = tooltipHtml;
+	}
+
+	public IncidentGraphDataPoint(double x1, double x2, double y, Color color) {
+		this(x1, x2, y, color, null);
+	}
+
+	public double getX1() {
+		return x1;
+	}
+
+	public double getX2() {
+		return x2;
+	}
+
+	public double getY() {
+		return y;
+	}
+
+	public Color getColor() {
+		return color;
+	}
+
+	public String getTooltipHtml() {
+		return tooltipHtml;
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/datapoints/LineGraphData.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/datapoints/LineGraphData.java
new file mode 100644
index 000000000..5bed6c168
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/datapoints/LineGraphData.java
@@ -0,0 +1,63 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.timegraph.datapoints;
+
+import org.teamapps.dto.UiLineGraphData;
+import org.teamapps.dto.UiLineGraphDataPoint;
+
+import java.util.stream.Collectors;
+import java.util.stream.DoubleStream;
+import java.util.stream.Stream;
+
+public interface LineGraphData extends GraphData {
+
+	int size();
+
+	double getX(int index);
+
+	double getY(int index);
+
+	LineGraphDataPoint getDataPoint(int index);
+
+	default DoubleStream streamX() {
+		int[] i = {0};
+		return DoubleStream.generate(() -> getX(i[0]++))
+				.limit(size());
+	}
+
+	default DoubleStream streamY() {
+		int[] i = {0};
+		return DoubleStream.generate(() -> getX(i[0]++))
+				.limit(size());
+	}
+
+	default Stream<LineGraphDataPoint> streamDataPoints() {
+		int[] i = {0};
+		return Stream.generate(() -> getDataPoint(i[0]++))
+				.limit(size());
+	}
+
+	@Override
+	default UiLineGraphData toUiGraphData() {
+		return new UiLineGraphData(streamDataPoints()
+				.map(dp -> new UiLineGraphDataPoint(dp.getX(), dp.getY()))
+				.collect(Collectors.toList()), getInterval().toUiLongInterval());
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/TimeGraphZoomLevel.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/datapoints/LineGraphDataPoint.java
similarity index 52%
rename from teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/TimeGraphZoomLevel.java
rename to teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/datapoints/LineGraphDataPoint.java
index 4794fe82d..1b672dfcb 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/TimeGraphZoomLevel.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/datapoints/LineGraphDataPoint.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,24 +17,29 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-package org.teamapps.ux.component.timegraph;
+package org.teamapps.ux.component.timegraph.datapoints;
 
-import org.teamapps.dto.UiTimeChartZoomLevel;
+public class LineGraphDataPoint {
 
-public class TimeGraphZoomLevel {
+	private final double x;
+	private final double y;
 
-	private final long approximateMillisecondsPerDataPoint;
+	public LineGraphDataPoint(double x, double y) {
+		this.x = x;
+		this.y = y;
+	}
 
-	public TimeGraphZoomLevel(long approximateMillisecondsPerDataPoint) {
-		this.approximateMillisecondsPerDataPoint = approximateMillisecondsPerDataPoint;
+	public double getX() {
+		return x;
 	}
 
-	public long getApproximateMillisecondsPerDataPoint() {
-		return approximateMillisecondsPerDataPoint;
+	public double getY() {
+		return y;
 	}
 
-	public UiTimeChartZoomLevel createUiTimeChartZoomLevel() {
-		return new UiTimeChartZoomLevel(approximateMillisecondsPerDataPoint);
+	@Override
+	public String toString() {
+		return "["+ x + "," + y + ']';
 	}
 
 	@Override
@@ -46,13 +51,23 @@ public boolean equals(Object o) {
 			return false;
 		}
 
-		TimeGraphZoomLevel that = (TimeGraphZoomLevel) o;
+		LineGraphDataPoint that = (LineGraphDataPoint) o;
+
+		if (Double.compare(that.x, x) != 0) {
+			return false;
+		}
+		return Double.compare(that.y, y) == 0;
 
-		return approximateMillisecondsPerDataPoint == that.approximateMillisecondsPerDataPoint;
 	}
 
 	@Override
 	public int hashCode() {
-		return (int) (approximateMillisecondsPerDataPoint ^ (approximateMillisecondsPerDataPoint >>> 32));
+		int result;
+		long temp;
+		temp = Double.doubleToLongBits(x);
+		result = (int) (temp ^ (temp >>> 32));
+		temp = Double.doubleToLongBits(y);
+		result = 31 * result + (int) (temp ^ (temp >>> 32));
+		return result;
 	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/datapoints/ListLineGraphData.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/datapoints/ListLineGraphData.java
new file mode 100644
index 000000000..aab7755ad
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/datapoints/ListLineGraphData.java
@@ -0,0 +1,60 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.timegraph.datapoints;
+
+import org.teamapps.ux.component.timegraph.Interval;
+
+import java.util.List;
+
+public class ListLineGraphData implements LineGraphData {
+
+	private final List<LineGraphDataPoint> dataPoints;
+	private final Interval interval;
+
+	public ListLineGraphData(List<LineGraphDataPoint> dataPoints, Interval interval) {
+		this.dataPoints = dataPoints;
+		this.interval = interval;
+	}
+
+	@Override
+	public int size() {
+		return dataPoints.size();
+	}
+
+	@Override
+	public double getX(int index) {
+		return dataPoints.get(index).getX();
+	}
+
+	@Override
+	public double getY(int index) {
+		return dataPoints.get(index).getY();
+	}
+
+	@Override
+	public LineGraphDataPoint getDataPoint(int index) {
+		return dataPoints.get(index);
+	}
+
+	@Override
+	public Interval getInterval() {
+		return interval;
+	}
+}
diff --git a/teamapps-icon/src/main/java/org/teamapps/icons/api/IconThemeImpl.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/datapoints/MapGraphGroupData.java
similarity index 60%
rename from teamapps-icon/src/main/java/org/teamapps/icons/api/IconThemeImpl.java
rename to teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/datapoints/MapGraphGroupData.java
index 9c5e77209..ee44fdfcb 100644
--- a/teamapps-icon/src/main/java/org/teamapps/icons/api/IconThemeImpl.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/datapoints/MapGraphGroupData.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,26 +17,22 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-package org.teamapps.icons.api;
+package org.teamapps.ux.component.timegraph.datapoints;
 
-public class IconThemeImpl implements IconTheme{
+import java.util.Collections;
+import java.util.Map;
 
-	private final IconStyle baseIconStyle;
-	private final IconStyle subIconStyle;
-
-	public IconThemeImpl(IconStyle baseIconStyle, IconStyle subIconStyle) {
-		this.baseIconStyle = baseIconStyle;
-		this.subIconStyle = subIconStyle;
-	}
+public class MapGraphGroupData implements GraphGroupData {
 
+	private final Map<String, GraphData> dataPointsByGraphId;
 
-	@Override
-	public IconStyle getBaseIconStyle() {
-		return baseIconStyle;
+	public MapGraphGroupData(Map<String, GraphData> dataPointsByGraphId) {
+		this.dataPointsByGraphId = dataPointsByGraphId;
 	}
 
 	@Override
-	public IconStyle getSubIconStyle() {
-		return subIconStyle;
+	public Map<String, GraphData> getGraphData() {
+		return Collections.unmodifiableMap(dataPointsByGraphId);
 	}
+
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/graph/AbstractGraph.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/graph/AbstractGraph.java
new file mode 100644
index 000000000..96a090c75
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/graph/AbstractGraph.java
@@ -0,0 +1,171 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.timegraph.graph;
+
+import org.teamapps.common.format.Color;
+import org.teamapps.common.format.RgbaColor;
+import org.teamapps.dto.UiGraph;
+import org.teamapps.dto.UiLongInterval;
+import org.teamapps.ux.component.timegraph.GraphChangeListener;
+import org.teamapps.ux.component.timegraph.Interval;
+import org.teamapps.ux.component.timegraph.LineChartYScaleZoomMode;
+import org.teamapps.ux.component.timegraph.ScaleType;
+import org.teamapps.ux.component.timegraph.datapoints.GraphData;
+import org.teamapps.ux.component.timegraph.model.GraphModel;
+
+import java.util.UUID;
+
+public abstract class AbstractGraph<D extends GraphData, M extends GraphModel<D>> {
+
+	private final String id = UUID.randomUUID().toString();
+	protected GraphChangeListener changeListener;
+	private M model;
+
+	private Interval displayedIntervalY;
+	private ScaleType yScaleType = ScaleType.LINEAR;
+	private LineChartYScaleZoomMode yScaleZoomMode = LineChartYScaleZoomMode.DYNAMIC_INCLUDING_ZERO;
+	private boolean yZeroLineVisible = false;
+	private boolean yAxisVisible = true;
+	private Color yAxisColor = RgbaColor.BLACK;
+	private String yAxisLabel;
+	private int maxTickDigits = 3;
+
+	public AbstractGraph(M model) {
+		this.model = model;
+	}
+
+	public String getId() {
+		return id;
+	}
+
+	abstract public UiGraph createUiFormat();
+
+	public Interval getDisplayedIntervalY() {
+		return displayedIntervalY;
+	}
+
+	public AbstractGraph setDisplayedIntervalY(Interval displayedIntervalY) {
+		this.displayedIntervalY = displayedIntervalY;
+		fireChange();
+		return this;
+	}
+
+	public ScaleType getYScaleType() {
+		return yScaleType;
+	}
+
+	public AbstractGraph setYScaleType(ScaleType yScaleType) {
+		this.yScaleType = yScaleType;
+		fireChange();
+		return this;
+	}
+
+	public LineChartYScaleZoomMode getYScaleZoomMode() {
+		return yScaleZoomMode;
+	}
+
+	public AbstractGraph setYScaleZoomMode(LineChartYScaleZoomMode yScaleZoomMode) {
+		this.yScaleZoomMode = yScaleZoomMode;
+		fireChange();
+		return this;
+	}
+
+	public void setChangeListener(GraphChangeListener listener) {
+		this.changeListener = listener;
+	}
+
+	protected void mapAbstractLineChartDataDisplayProperties(UiGraph ui) {
+		ui.setId(id);
+		ui.setYAxisVisible(yAxisVisible);
+		ui.setYAxisColor(yAxisColor != null ? yAxisColor.toHtmlColorString() : null);
+		ui.setYAxisLabel(yAxisLabel);
+		ui.setMaxTickDigits(maxTickDigits);
+		ui.setIntervalY(displayedIntervalY != null ? displayedIntervalY.toUiLongInterval() : new UiLongInterval(0, 1000));
+		ui.setYScaleType(yScaleType.toUiScaleType());
+		ui.setYScaleZoomMode(yScaleZoomMode.toUiLineChartYScaleZoomMode());
+		ui.setYZeroLineVisible(yZeroLineVisible);
+	}
+
+	public boolean isYZeroLineVisible() {
+		return yZeroLineVisible;
+	}
+
+	public AbstractGraph setYZeroLineVisible(boolean yZeroLineVisible) {
+		this.yZeroLineVisible = yZeroLineVisible;
+		fireChange();
+		return this;
+	}
+
+	public boolean isyAxisVisible() {
+		return yAxisVisible;
+	}
+
+	public AbstractGraph setYAxisVisible(boolean yAxisVisible) {
+		this.yAxisVisible = yAxisVisible;
+		fireChange();
+		return this;
+	}
+
+	public Color getYAxisColor() {
+		return yAxisColor;
+	}
+
+	public AbstractGraph setYAxisColor(Color yAxisColor) {
+		this.yAxisColor = yAxisColor;
+		fireChange();
+		return this;
+	}
+
+	public String getYAxisLabel() {
+		return yAxisLabel;
+	}
+
+	public AbstractGraph<D, M> setYAxisLabel(String yAxisLabel) {
+		this.yAxisLabel = yAxisLabel;
+		fireChange();
+		return this;
+	}
+
+	public int getMaxTickDigits() {
+		return maxTickDigits;
+	}
+
+	public AbstractGraph<D, M> setMaxTickDigits(int maxTickDigits) {
+		this.maxTickDigits = maxTickDigits;
+		fireChange();
+		return this;
+	}
+
+	public M getModel() {
+		return model;
+	}
+
+	public AbstractGraph<D, M> setModel(M model) {
+		this.model = model;
+		fireChange();
+		return this;
+	}
+
+	protected void fireChange() {
+		if (this.changeListener != null) {
+			changeListener.handleChange(this);
+		}
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/graph/GraphGroup.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/graph/GraphGroup.java
new file mode 100644
index 000000000..c1f5f95cd
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/graph/GraphGroup.java
@@ -0,0 +1,113 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.timegraph.graph;
+
+import org.teamapps.dto.UiGraphGroup;
+import org.teamapps.ux.component.timegraph.Interval;
+import org.teamapps.ux.component.timegraph.TimePartitioning;
+import org.teamapps.ux.component.timegraph.datapoints.GraphData;
+import org.teamapps.ux.component.timegraph.datapoints.GraphGroupData;
+import org.teamapps.ux.component.timegraph.model.AbstractGraphGroupModel;
+import org.teamapps.ux.component.timegraph.model.GraphGroupModel;
+
+import java.time.ZoneId;
+import java.util.*;
+import java.util.stream.Collectors;
+
+public class GraphGroup extends AbstractGraph<GraphGroupData, GraphGroupModel> {
+
+	private final Runnable subModelListener = () -> this.getModel().onDataChanged.fire();
+	private List<AbstractGraph<?, ?>> graphs = new ArrayList<>();
+
+	public GraphGroup(AbstractGraph<?, ?>... graphs) {
+		this(Arrays.asList(graphs));
+	}
+
+	public GraphGroup(List<AbstractGraph<?, ?>> graphs) {
+		super(null);
+		setModel(new GraphGroupModel());
+		this.setGraphs(graphs);
+	}
+
+	@Override
+	public UiGraphGroup createUiFormat() {
+		UiGraphGroup ui = new UiGraphGroup();
+		mapAbstractLineChartDataDisplayProperties(ui);
+		ui.setGraphs(graphs.stream().map(AbstractGraph::createUiFormat).collect(Collectors.toList()));
+		return ui;
+	}
+
+	@Override
+	public GraphGroupModel getModel() {
+		return ((GraphGroupModel) super.getModel());
+	}
+
+	public void addGraph(AbstractGraph<?, ?> graph) {
+		var newGraphs = new ArrayList<>(this.graphs);
+		newGraphs.add(graph);
+		setGraphs(newGraphs);
+	}
+
+	public void setGraphs(List<AbstractGraph<?, ?>> graphs) {
+		for (AbstractGraph<?, ?> graph : this.graphs) {
+			graph.setChangeListener(null);
+			graph.getModel().onDataChanged().removeListener(subModelListener);
+		}
+		this.graphs = new ArrayList<>(graphs);
+		for (AbstractGraph<?, ?> g : graphs) {
+			g.setChangeListener(unused -> fireChange());
+
+			g.getModel().onDataChanged().addListener(subModelListener);
+		}
+		fireChange();
+		getModel().onDataChanged.fire();
+	}
+
+	public void removeGraph(AbstractGraph<?, ?> graph) {
+		var newGraphs = new ArrayList<>(this.graphs);
+		if (newGraphs.remove(graph)) {
+			setGraphs(newGraphs);
+		}
+	}
+
+	public List<AbstractGraph<?, ?>> getGraphs() {
+		return List.copyOf(graphs);
+	}
+
+	private class GraphGroupModel extends AbstractGraphGroupModel {
+
+		@Override
+		public Interval getDomainX() {
+			return graphs.stream()
+					.map(g -> g.getModel().getDomainX())
+					.reduce(Interval::union)
+					.orElse(new Interval(0, 1));
+		}
+
+		@Override
+		public GraphGroupData getData(TimePartitioning zoomLevel, ZoneId zoneId, Interval neededInterval, Interval displayedInterval) {
+			final Map<String, GraphData> graphDataByGraphId = graphs.stream()
+					.filter(Objects::nonNull)
+					.collect(Collectors.toMap(AbstractGraph::getId, g -> g.getModel().getData(zoomLevel, zoneId, neededInterval, displayedInterval)));
+			return () -> graphDataByGraphId;
+		}
+
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/graph/HoseGraph.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/graph/HoseGraph.java
new file mode 100644
index 000000000..458bd2c28
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/graph/HoseGraph.java
@@ -0,0 +1,137 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.timegraph.graph;
+
+import org.teamapps.common.format.Color;
+import org.teamapps.common.format.RgbaColor;
+import org.teamapps.dto.UiHoseGraph;
+import org.teamapps.ux.component.timegraph.LineChartCurveType;
+import org.teamapps.ux.component.timegraph.datapoints.HoseGraphData;
+import org.teamapps.ux.component.timegraph.model.HoseGraphModel;
+
+public class HoseGraph extends AbstractGraph<HoseGraphData, HoseGraphModel> {
+
+	private LineChartCurveType curveType;
+	private float dataDotRadius;
+	private Color centerLineColor;
+	private Color lowerLineColor;
+	private Color upperLineColor;
+	private Color areaColor;
+	private boolean stripedArea;
+
+	public HoseGraph(HoseGraphModel model) {
+		this(model, LineChartCurveType.MONOTONE, 2, Color.fromRgb(73, 128, 192));
+	}
+
+	public HoseGraph(HoseGraphModel model, LineChartCurveType curveType, float dataDotRadius, Color centerLineColor) {
+		this(model, curveType, dataDotRadius, centerLineColor,
+				(centerLineColor instanceof RgbaColor) ? ((RgbaColor) centerLineColor).withAlpha(((RgbaColor) centerLineColor).getAlpha() / 5) : RgbaColor.TRANSPARENT);
+	}
+
+	public HoseGraph(HoseGraphModel model, LineChartCurveType curveType, float dataDotRadius, Color centerLineColor, Color areaColor) {
+		this(model, curveType, dataDotRadius, centerLineColor, areaColor, false);
+	}
+
+	public HoseGraph(HoseGraphModel model, LineChartCurveType curveType, float dataDotRadius, Color centerLineColor, Color areaColor, boolean stripedArea) {
+		super(model);
+		this.curveType = curveType;
+		this.dataDotRadius = dataDotRadius;
+		this.centerLineColor = centerLineColor;
+		this.lowerLineColor = (centerLineColor instanceof RgbaColor) ? ((RgbaColor) centerLineColor).withAlpha(((RgbaColor) centerLineColor).getAlpha() / 5) : RgbaColor.TRANSPARENT;
+		this.upperLineColor = (centerLineColor instanceof RgbaColor) ? ((RgbaColor) centerLineColor).withAlpha(((RgbaColor) centerLineColor).getAlpha() / 5) : RgbaColor.TRANSPARENT;
+		this.areaColor = areaColor;
+		this.stripedArea = stripedArea;
+	}
+
+	public UiHoseGraph createUiFormat() {
+		UiHoseGraph ui = new UiHoseGraph();
+		mapAbstractLineChartDataDisplayProperties(ui);
+
+		ui.setGraphType(curveType.toUiLineChartCurveType());
+		ui.setDataDotRadius(dataDotRadius);
+		ui.setMiddleLineColor(centerLineColor != null ? centerLineColor.toHtmlColorString() : null);
+		ui.setLowerLineColor(lowerLineColor != null ? lowerLineColor.toHtmlColorString() : null);
+		ui.setUpperLineColor(upperLineColor != null ? upperLineColor.toHtmlColorString() : null);
+		ui.setAreaColor(areaColor != null ? areaColor.toHtmlColorString() : null);
+		ui.setStripedArea(stripedArea);
+
+		return ui;
+	}
+
+	public LineChartCurveType getCurveType() {
+		return curveType;
+	}
+
+	public HoseGraph setCurveType(LineChartCurveType curveType) {
+		this.curveType = curveType;
+		fireChange();
+		return this;
+	}
+
+	public float getDataDotRadius() {
+		return dataDotRadius;
+	}
+
+	public HoseGraph setDataDotRadius(float dataDotRadius) {
+		this.dataDotRadius = dataDotRadius;
+		fireChange();
+		return this;
+	}
+
+	public Color getCenterLineColor() {
+		return centerLineColor;
+	}
+
+	public HoseGraph setCenterLineColor(Color centerLineColor) {
+		this.centerLineColor = centerLineColor;
+		fireChange();
+		return this;
+	}
+
+	public Color getAreaColor() {
+		return areaColor;
+	}
+
+	public HoseGraph setAreaColor(Color areaColor) {
+		this.areaColor = areaColor;
+		fireChange();
+		return this;
+	}
+
+	public Color getLowerLineColor() {
+		return lowerLineColor;
+	}
+
+	public HoseGraph setLowerLineColor(Color lowerLineColor) {
+		this.lowerLineColor = lowerLineColor;
+		fireChange();
+		return this;
+	}
+
+	public Color getUpperLineColor() {
+		return upperLineColor;
+	}
+
+	public HoseGraph setUpperLineColor(Color upperLineColor) {
+		this.upperLineColor = upperLineColor;
+		fireChange();
+		return this;
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/graph/IncidentGraph.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/graph/IncidentGraph.java
new file mode 100644
index 000000000..705aa7fa5
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/graph/IncidentGraph.java
@@ -0,0 +1,38 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.timegraph.graph;
+
+import org.teamapps.dto.UiIncidentGraph;
+import org.teamapps.ux.component.timegraph.datapoints.IncidentGraphData;
+import org.teamapps.ux.component.timegraph.model.IncidentGraphModel;
+
+public class IncidentGraph extends AbstractGraph<IncidentGraphData, IncidentGraphModel> {
+
+	public IncidentGraph(IncidentGraphModel graphModel) {
+		super(graphModel);
+	}
+
+	@Override
+	public UiIncidentGraph createUiFormat() {
+		final UiIncidentGraph ui = new UiIncidentGraph();
+		mapAbstractLineChartDataDisplayProperties(ui);
+		return ui;
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/graph/LineGraph.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/graph/LineGraph.java
new file mode 100644
index 000000000..d18a35375
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/graph/LineGraph.java
@@ -0,0 +1,134 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.timegraph.graph;
+
+import org.teamapps.common.format.Color;
+import org.teamapps.common.format.RgbaColor;
+import org.teamapps.dto.UiLineGraph;
+import org.teamapps.ux.component.timegraph.LineChartCurveType;
+import org.teamapps.ux.component.timegraph.datapoints.LineGraphData;
+import org.teamapps.ux.component.timegraph.model.LineGraphModel;
+
+public class LineGraph extends AbstractGraph<LineGraphData, LineGraphModel> {
+
+	private LineChartCurveType graphType;
+	private float dataDotRadius;
+	private Color lineColorScaleMin;
+	private Color lineColorScaleMax;
+	private Color areaColorScaleMin;
+	private Color areaColorScaleMax;
+
+
+	public LineGraph(LineGraphModel model) {
+		this(model, LineChartCurveType.MONOTONE, 2, new RgbaColor(73, 128, 192));
+	}
+
+	public LineGraph(LineGraphModel model, LineChartCurveType graphType, float dataDotRadius, Color lineColor) {
+		this(model, graphType, dataDotRadius, lineColor, lineColor, null, null);
+	}
+
+	public LineGraph(LineGraphModel model, LineChartCurveType graphType, float dataDotRadius, Color lineColor, Color areaColor) {
+		this(model, graphType, dataDotRadius, lineColor, lineColor, (areaColor instanceof RgbaColor) ? ((RgbaColor) areaColor).withAlpha(0.0f) : null, areaColor);
+	}
+
+	public LineGraph(LineGraphModel model, LineChartCurveType graphType, float dataDotRadius, Color lineColorScaleMin, Color lineColorScaleMax, Color areaColorScaleMin, Color areaColorScaleMax) {
+		super(model);
+		this.graphType = graphType;
+		this.dataDotRadius = dataDotRadius;
+		this.lineColorScaleMin = lineColorScaleMin;
+		this.lineColorScaleMax = lineColorScaleMax;
+		this.areaColorScaleMin = areaColorScaleMin;
+		this.areaColorScaleMax = areaColorScaleMax;
+	}
+
+	@Override
+	public UiLineGraph createUiFormat() {
+		UiLineGraph ui = new UiLineGraph();
+		mapAbstractLineChartDataDisplayProperties(ui);
+		ui.setGraphType(graphType.toUiLineChartCurveType());
+		ui.setDataDotRadius(dataDotRadius);
+		ui.setLineColorScaleMin(lineColorScaleMin != null ? lineColorScaleMin.toHtmlColorString() : null);
+		ui.setLineColorScaleMax(lineColorScaleMax != null ? lineColorScaleMax.toHtmlColorString() : null);
+		ui.setAreaColorScaleMin(areaColorScaleMin != null ? areaColorScaleMin.toHtmlColorString() : null);
+		ui.setAreaColorScaleMax(areaColorScaleMax != null ? areaColorScaleMax.toHtmlColorString() : null);
+		return ui;
+	}
+
+	public LineChartCurveType getGraphType() {
+		return graphType;
+	}
+
+	public LineGraph setGraphType(LineChartCurveType graphType) {
+		this.graphType = graphType;
+		fireChange();
+		return this;
+	}
+
+	public float getDataDotRadius() {
+		return dataDotRadius;
+	}
+
+	public LineGraph setDataDotRadius(float dataDotRadius) {
+		this.dataDotRadius = dataDotRadius;
+		fireChange();
+		return this;
+	}
+
+	public Color getLineColorScaleMin() {
+		return lineColorScaleMin;
+	}
+
+	public LineGraph setLineColorScaleMin(Color lineColorScaleMin) {
+		this.lineColorScaleMin = lineColorScaleMin;
+		fireChange();
+		return this;
+	}
+
+	public Color getLineColorScaleMax() {
+		return lineColorScaleMax;
+	}
+
+	public LineGraph setLineColorScaleMax(Color lineColorScaleMax) {
+		this.lineColorScaleMax = lineColorScaleMax;
+		fireChange();
+		return this;
+	}
+
+	public Color getAreaColorScaleMin() {
+		return areaColorScaleMin;
+	}
+
+	public LineGraph setAreaColorScaleMin(Color areaColorScaleMin) {
+		this.areaColorScaleMin = areaColorScaleMin;
+		fireChange();
+		return this;
+	}
+
+	public Color getAreaColorScaleMax() {
+		return areaColorScaleMax;
+	}
+
+	public LineGraph setAreaColorScaleMax(Color areaColorScaleMax) {
+		this.areaColorScaleMax = areaColorScaleMax;
+		fireChange();
+		return this;
+	}
+
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/model/AbstractGraphGroupModel.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/model/AbstractGraphGroupModel.java
new file mode 100644
index 000000000..135c0cc29
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/model/AbstractGraphGroupModel.java
@@ -0,0 +1,26 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.timegraph.model;
+
+import org.teamapps.ux.component.timegraph.datapoints.GraphGroupData;
+
+public abstract class AbstractGraphGroupModel extends AbstractGraphModel<GraphGroupData> implements GraphGroupModel {
+
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/model/AbstractGraphModel.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/model/AbstractGraphModel.java
new file mode 100644
index 000000000..563388ee4
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/model/AbstractGraphModel.java
@@ -0,0 +1,34 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.timegraph.model;
+
+import org.teamapps.event.Event;
+import org.teamapps.ux.component.timegraph.datapoints.GraphData;
+
+abstract class AbstractGraphModel<D extends GraphData> implements GraphModel<D> {
+
+	public final Event<Void> onDataChanged = new Event<>();
+
+	@Override
+	public Event<Void> onDataChanged() {
+		return onDataChanged;
+	}
+
+}
diff --git a/teamapps-material-icon-provider/src/main/java/org/teamapps/icon/material/OutlineFilledStyle.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/model/AbstractHoseGraphModel.java
similarity index 72%
rename from teamapps-material-icon-provider/src/main/java/org/teamapps/icon/material/OutlineFilledStyle.java
rename to teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/model/AbstractHoseGraphModel.java
index 444506b2e..dfb6277ce 100644
--- a/teamapps-material-icon-provider/src/main/java/org/teamapps/icon/material/OutlineFilledStyle.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/model/AbstractHoseGraphModel.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,11 +17,9 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-package org.teamapps.icon.material;
+package org.teamapps.ux.component.timegraph.model;
 
-public class OutlineFilledStyle extends SingleColorStyle {
+import org.teamapps.ux.component.timegraph.datapoints.HoseGraphData;
 
-    public OutlineFilledStyle(String styleId, String color) {
-        super(styleId, StyleType.OUTLINE_FILLED, color);
-    }
+public abstract class AbstractHoseGraphModel extends AbstractGraphModel<HoseGraphData> implements HoseGraphModel {
 }
diff --git a/teamapps-material-icon-provider/src/main/java/org/teamapps/icon/material/GradientStyle.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/model/AbstractIncidentGraphModel.java
similarity index 71%
rename from teamapps-material-icon-provider/src/main/java/org/teamapps/icon/material/GradientStyle.java
rename to teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/model/AbstractIncidentGraphModel.java
index 77c3de20d..26f7c4e80 100644
--- a/teamapps-material-icon-provider/src/main/java/org/teamapps/icon/material/GradientStyle.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/model/AbstractIncidentGraphModel.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,11 +17,9 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-package org.teamapps.icon.material;
+package org.teamapps.ux.component.timegraph.model;
 
-public class GradientStyle extends MultiColorStyle {
+import org.teamapps.ux.component.timegraph.datapoints.IncidentGraphData;
 
-    public GradientStyle(String styleId, String color1, String color2, String color3) {
-        super(styleId, StyleType.GRADIENT, color1, color2, color3);
-    }
+public abstract class AbstractIncidentGraphModel extends AbstractGraphModel<IncidentGraphData> implements IncidentGraphModel {
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/model/AbstractLineGraphModel.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/model/AbstractLineGraphModel.java
new file mode 100644
index 000000000..e57f05316
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/model/AbstractLineGraphModel.java
@@ -0,0 +1,25 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.timegraph.model;
+
+import org.teamapps.ux.component.timegraph.datapoints.LineGraphData;
+
+public abstract class AbstractLineGraphModel extends AbstractGraphModel<LineGraphData> implements LineGraphModel {
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/model/AggregatingLineGraphModel.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/model/AggregatingLineGraphModel.java
new file mode 100644
index 000000000..bf5d1b800
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/model/AggregatingLineGraphModel.java
@@ -0,0 +1,151 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.timegraph.model;
+
+import org.teamapps.ux.component.timegraph.Interval;
+import org.teamapps.ux.component.timegraph.TimePartitioning;
+import org.teamapps.ux.component.timegraph.datapoints.LineGraphData;
+import org.teamapps.ux.component.timegraph.datapoints.LineGraphDataPoint;
+import org.teamapps.ux.component.timegraph.datapoints.ListLineGraphData;
+
+import java.time.Instant;
+import java.time.ZoneId;
+import java.time.ZonedDateTime;
+import java.util.ArrayList;
+import java.util.List;
+
+public class AggregatingLineGraphModel extends AbstractLineGraphModel {
+
+	private LineGraphData graphData;
+	private AggregationType aggregationType = AggregationType.FIRST_VALUE;
+
+	private boolean addDataPointBeforeAndAfterQueryResult = true;
+
+	public AggregatingLineGraphModel() {
+	}
+
+	public AggregatingLineGraphModel(LineGraphData graphData, AggregationType aggregationType) {
+		this.graphData = graphData;
+		this.aggregationType = aggregationType;
+	}
+
+	public void setGraphData(LineGraphData graphData) {
+		this.graphData = graphData;
+		onDataChanged.fire(null);
+	}
+
+	public void setAggregationPolicy(AggregationType aggregationType) {
+		this.aggregationType = aggregationType;
+		onDataChanged.fire(null);
+	}
+
+	@Override
+	public LineGraphData getData(TimePartitioning zoomLevel, ZoneId zoneId, Interval neededIntervalX, Interval displayedInterval) {
+		final long queryStart = getPartitionStartMilli(displayedInterval.getMin(), zoomLevel, zoneId);
+		final long queryEnd = getPartitionEndMilli(displayedInterval.getMax(), zoomLevel, zoneId);
+		return getAggregateDataPoints(graphData, zoomLevel, new Interval(queryStart, queryEnd), aggregationType, zoneId, addDataPointBeforeAndAfterQueryResult);
+	}
+
+	public static LineGraphData getAggregateDataPoints(
+			LineGraphData dataPoints,
+			TimePartitioning zoomLevel,
+			Interval alignedInterval,
+			AggregationType aggregationType,
+			ZoneId timeZone,
+			boolean addDataPointBeforeAndAfterQueryResult
+	) {
+		List<LineGraphDataPoint> result = new ArrayList<>();
+		long startPartitionStartMilli = alignedInterval.getMin();
+		if (addDataPointBeforeAndAfterQueryResult) {
+			startPartitionStartMilli = zoomLevel.decrement(ZonedDateTime.ofInstant(Instant.ofEpochMilli(startPartitionStartMilli), timeZone)).toInstant().toEpochMilli();
+		}
+		long endPartitionEndMilli = alignedInterval.getMax();
+		if (addDataPointBeforeAndAfterQueryResult) {
+			endPartitionEndMilli = zoomLevel.increment(Instant.ofEpochMilli(alignedInterval.getMax()).atZone(timeZone)).toInstant().toEpochMilli();
+		}
+		long currentPartitionStartMilli = startPartitionStartMilli;
+		long nextPartitionStartMilli = zoomLevel.increment(ZonedDateTime.ofInstant(Instant.ofEpochMilli(currentPartitionStartMilli), timeZone)).toInstant().toEpochMilli();
+		int i = 0;
+		do {
+			Double aggregateValue = null;
+			int count = 0;
+			for (; i < dataPoints.size(); i++) {
+				long tsMilli = (long) dataPoints.getX(i);
+				if (tsMilli >= nextPartitionStartMilli) {
+					break;
+				}
+				if (tsMilli >= currentPartitionStartMilli) {
+					count++;
+					double y = dataPoints.getY(i);
+					if (aggregationType == AggregationType.FIRST_VALUE) {
+						aggregateValue = aggregateValue == null ? y : aggregateValue;
+						break;
+					} else if (aggregationType == AggregationType.MAX) {
+						aggregateValue = aggregateValue == null || aggregateValue < y ? y : aggregateValue;
+					} else if (aggregationType == AggregationType.MIN) {
+						aggregateValue = aggregateValue == null || aggregateValue > y ? y : aggregateValue;
+					} else if (aggregationType == AggregationType.AVERAGE) {
+						aggregateValue = aggregateValue == null ? y : aggregateValue + y;
+					}
+				}
+			}
+
+			if (count > 0 && aggregateValue != null /*double-checking for no reason except preventing compiler warnings*/) {
+				double y = aggregationType == AggregationType.AVERAGE ? aggregateValue / count : aggregateValue;
+				result.add(new LineGraphDataPoint(currentPartitionStartMilli, y));
+			}
+
+			currentPartitionStartMilli = nextPartitionStartMilli;
+			nextPartitionStartMilli = zoomLevel.increment(getPartitionStart(nextPartitionStartMilli, zoomLevel, timeZone)).toInstant().toEpochMilli();
+		} while (currentPartitionStartMilli < endPartitionEndMilli);
+		return new ListLineGraphData(result, new Interval(startPartitionStartMilli, endPartitionEndMilli));
+	}
+
+	private static ZonedDateTime getPartitionStart(long timestampMillis, TimePartitioning partitionUnit, ZoneId timeZone) {
+		return partitionUnit.getPartitionStart(ZonedDateTime.ofInstant(Instant.ofEpochMilli(timestampMillis), timeZone));
+	}
+
+	private static long getPartitionStartMilli(long timestampMillis, TimePartitioning partitionUnit, ZoneId timeZone) {
+		return partitionUnit.getPartitionStart(Instant.ofEpochMilli(timestampMillis).atZone(timeZone)).toInstant().toEpochMilli();
+	}
+
+	private static long getPartitionEndMilli(long timestampMillis, TimePartitioning partitionUnit, ZoneId timeZone) {
+		return partitionUnit.getPartitionEnd(Instant.ofEpochMilli(timestampMillis).atZone(timeZone)).toInstant().toEpochMilli();
+	}
+
+	@Override
+	public Interval getDomainX() {
+		long minX = graphData.streamX()
+				.mapToLong(x -> (long) x)
+				.min().orElse(0);
+		long maxX = graphData.streamX()
+				.mapToLong(x -> (long) x)
+				.max().orElse(1);
+		return new Interval(minX, maxX);
+	}
+
+	public boolean isAddDataPointBeforeAndAfterQueryResult() {
+		return addDataPointBeforeAndAfterQueryResult;
+	}
+
+	public void setAddDataPointBeforeAndAfterQueryResult(boolean addDataPointBeforeAndAfterQueryResult) {
+		this.addDataPointBeforeAndAfterQueryResult = addDataPointBeforeAndAfterQueryResult;
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/model/AggregationType.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/model/AggregationType.java
new file mode 100644
index 000000000..ddfd34656
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/model/AggregationType.java
@@ -0,0 +1,24 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.timegraph.model;
+
+public enum AggregationType {
+	FIRST_VALUE, MIN, AVERAGE, MAX;
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/model/DelegatingHoseModel.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/model/DelegatingHoseModel.java
new file mode 100644
index 000000000..ff96f5dd0
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/model/DelegatingHoseModel.java
@@ -0,0 +1,91 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.timegraph.model;
+
+import org.teamapps.ux.component.timegraph.Interval;
+import org.teamapps.ux.component.timegraph.TimePartitioning;
+import org.teamapps.ux.component.timegraph.datapoints.HoseGraphData;
+import org.teamapps.ux.component.timegraph.datapoints.LineGraphData;
+
+import java.time.ZoneId;
+import java.util.Objects;
+import java.util.stream.Stream;
+
+public class DelegatingHoseModel extends AbstractHoseGraphModel {
+
+	private final GraphModel<LineGraphData> minModel;
+	private final GraphModel<LineGraphData> avgModel;
+	private final GraphModel<LineGraphData> maxModel;
+
+	public DelegatingHoseModel(GraphModel<LineGraphData> minModel, GraphModel<LineGraphData> avgModel, GraphModel<LineGraphData> maxModel) {
+		this.minModel = minModel;
+		if (this.minModel != null) {
+			this.minModel.onDataChanged().addListener(() -> this.onDataChanged().fire());
+		}
+		this.avgModel = avgModel;
+		if (this.avgModel != null) {
+			this.avgModel.onDataChanged().addListener(() -> this.onDataChanged().fire());
+		}
+		this.maxModel = maxModel;
+		if (this.maxModel != null) {
+			this.maxModel.onDataChanged().addListener(() -> this.onDataChanged().fire());
+		}
+	}
+
+	public DelegatingHoseModel(GraphModel<LineGraphData> minModel, GraphModel<LineGraphData> maxModel) {
+		this(minModel, null, maxModel);
+	}
+
+	@Override
+	public Interval getDomainX() {
+		return Stream.of(minModel, avgModel, maxModel)
+				.filter(Objects::nonNull)
+				.map(GraphModel::getDomainX)
+				.reduce(Interval::union)
+				.orElse(new Interval(0, 1));
+	}
+
+	@Override
+	public HoseGraphData getData(TimePartitioning zoomLevel, ZoneId zoneId, Interval neededInterval, Interval displayedInterval) {
+		LineGraphData minDataPoints = getDataPointsOrNull(minModel, zoomLevel, zoneId, neededInterval, displayedInterval);
+		LineGraphData avgDataPoints = getDataPointsOrNull(avgModel, zoomLevel, zoneId, neededInterval, displayedInterval);
+		LineGraphData maxDataPoints = getDataPointsOrNull(maxModel, zoomLevel, zoneId, neededInterval, displayedInterval);
+		return new HoseGraphData() {
+			@Override
+			public LineGraphData getMiddleLineData() {
+				return avgDataPoints;
+			}
+
+			@Override
+			public LineGraphData getLowerLineData() {
+				return minDataPoints;
+			}
+
+			@Override
+			public LineGraphData getUpperLineData() {
+				return maxDataPoints;
+			}
+		};
+	}
+
+	private LineGraphData getDataPointsOrNull(GraphModel<LineGraphData> model, TimePartitioning zoomLevel, ZoneId zoneId, Interval neededInterval, Interval displayedInterval) {
+		return model != null ? model.getData(zoomLevel, zoneId, neededInterval, displayedInterval) : null;
+	}
+}
diff --git a/teamapps-material-icon-provider/src/main/java/org/teamapps/icon/material/StickerStyle.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/model/GraphGroupModel.java
similarity index 76%
rename from teamapps-material-icon-provider/src/main/java/org/teamapps/icon/material/StickerStyle.java
rename to teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/model/GraphGroupModel.java
index f2120ac4c..a23bbfffa 100644
--- a/teamapps-material-icon-provider/src/main/java/org/teamapps/icon/material/StickerStyle.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/model/GraphGroupModel.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,11 +17,9 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-package org.teamapps.icon.material;
+package org.teamapps.ux.component.timegraph.model;
 
-public class StickerStyle extends SingleColorStyle {
+import org.teamapps.ux.component.timegraph.datapoints.GraphGroupData;
 
-	public StickerStyle(String styleId, String color) {
-		super(styleId, StyleType.STICKER, color);
-	}
+public interface GraphGroupModel extends GraphModel<GraphGroupData> {
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/model/GraphModel.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/model/GraphModel.java
new file mode 100644
index 000000000..14f918623
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/model/GraphModel.java
@@ -0,0 +1,51 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.timegraph.model;
+
+import org.teamapps.event.Event;
+import org.teamapps.ux.component.timegraph.Interval;
+import org.teamapps.ux.component.timegraph.TimePartitioning;
+import org.teamapps.ux.component.timegraph.datapoints.GraphData;
+
+import java.time.ZoneId;
+
+public interface GraphModel<D extends GraphData> {
+
+	Event<Void> onDataChanged();
+
+	Interval getDomainX();
+
+	/**
+	 * Retrieves graph data ({@link GraphData}) for the specified {@code zoomLevel} and {cod@ neededInterval}.
+	 * <p>
+	 * The model MAY choose return more data than needed, covering a larger interval than requested.<br>
+	 * However, the result MUST at least cover {@code neededInterval}!<br>
+	 * If the model delegates to multiple sub-models for different graphs, its aggregated {@link GraphData} object should use the
+	 * intersection of the sub-model's {@link GraphData#getInterval()} as its own {@link GraphData#getInterval()}.
+	 *
+	 * @param zoomLevel the requested zoom level
+	 * @param zoneId the zoneId to apply when partitioning over time
+	 * @param neededInterval the time interval requested by the client
+	 * @param displayedInterval the time interval displayed by the client
+	 * @return graph data
+	 */
+	D getData(TimePartitioning zoomLevel, ZoneId zoneId, Interval neededInterval, Interval displayedInterval);
+
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/model/HoseGraphModel.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/model/HoseGraphModel.java
new file mode 100644
index 000000000..6cb5435ca
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/model/HoseGraphModel.java
@@ -0,0 +1,25 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.timegraph.model;
+
+import org.teamapps.ux.component.timegraph.datapoints.HoseGraphData;
+
+public interface HoseGraphModel extends GraphModel<HoseGraphData> {
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/model/IncidentGraphModel.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/model/IncidentGraphModel.java
new file mode 100644
index 000000000..c759a0d0d
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/model/IncidentGraphModel.java
@@ -0,0 +1,25 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.timegraph.model;
+
+import org.teamapps.ux.component.timegraph.datapoints.IncidentGraphData;
+
+public interface IncidentGraphModel extends GraphModel<IncidentGraphData> {
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/model/LineGraphModel.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/model/LineGraphModel.java
new file mode 100644
index 000000000..d33e91e4a
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/model/LineGraphModel.java
@@ -0,0 +1,25 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.timegraph.model;
+
+import org.teamapps.ux.component.timegraph.datapoints.LineGraphData;
+
+public interface LineGraphModel extends GraphModel<LineGraphData> {
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/partitioning/AbstractRawTimedDataModel.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/model/timestamps/AbstractTimestampsModel.java
similarity index 83%
rename from teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/partitioning/AbstractRawTimedDataModel.java
rename to teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/model/timestamps/AbstractTimestampsModel.java
index 2a93521a9..b2de1610b 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/partitioning/AbstractRawTimedDataModel.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/model/timestamps/AbstractTimestampsModel.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,11 +17,11 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-package org.teamapps.ux.component.timegraph.partitioning;
+package org.teamapps.ux.component.timegraph.model.timestamps;
 
 import org.teamapps.event.Event;
 
-public abstract class AbstractRawTimedDataModel implements RawTimedDataModel {
+public abstract class AbstractTimestampsModel implements TimestampsModel {
 
 	public final Event<Void> onDataChanged = new Event<>();
 
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/model/timestamps/PartitioningTimestampsLineGraphModel.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/model/timestamps/PartitioningTimestampsLineGraphModel.java
new file mode 100644
index 000000000..7608ec7f1
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/model/timestamps/PartitioningTimestampsLineGraphModel.java
@@ -0,0 +1,64 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.timegraph.model.timestamps;
+
+import org.teamapps.event.Event;
+import org.teamapps.ux.component.timegraph.Interval;
+import org.teamapps.ux.component.timegraph.TimePartitioning;
+import org.teamapps.ux.component.timegraph.datapoints.LineGraphData;
+import org.teamapps.ux.component.timegraph.datapoints.LineGraphDataPoint;
+import org.teamapps.ux.component.timegraph.datapoints.ListLineGraphData;
+import org.teamapps.ux.component.timegraph.model.AbstractLineGraphModel;
+
+import java.time.Instant;
+import java.time.ZoneId;
+import java.util.stream.Collectors;
+
+public class PartitioningTimestampsLineGraphModel extends AbstractLineGraphModel {
+
+	private final TimestampsModel timestampsModel;
+
+	public PartitioningTimestampsLineGraphModel(TimestampsModel timestampsModel) {
+		this.timestampsModel = timestampsModel;
+		this.timestampsModel.onDataChanged().addListener((Runnable) onDataChanged::fire);
+	}
+
+	@Override
+	public Event<Void> onDataChanged() {
+		return onDataChanged;
+	}
+
+	@Override
+	public LineGraphData getData(TimePartitioning zoomLevel, ZoneId zoneId, Interval neededInterval, Interval displayedInterval) {
+		final long queryStart = zoomLevel.getPartitionStart(Instant.ofEpochMilli(displayedInterval.getMin()).atZone(zoneId)).toInstant().toEpochMilli();
+		final long queryEnd = zoomLevel.getPartitionEnd(Instant.ofEpochMilli(displayedInterval.getMax()).atZone(zoneId)).toInstant().toEpochMilli();
+		final long[] eventTimestamps = timestampsModel.getTimestamps(displayedInterval);
+		return new ListLineGraphData(TimestampsPartitioner.partition(queryStart, queryEnd, eventTimestamps, zoneId, zoomLevel, true)
+				.stream()
+				.map(p -> new LineGraphDataPoint(p.getTimestamp(), p.getCount()))
+				.collect(Collectors.toList()),
+				new Interval(queryStart, queryEnd));
+	}
+
+	@Override
+	public Interval getDomainX() {
+		return timestampsModel.getDomainX();
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/model/timestamps/StaticTimestampsModel.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/model/timestamps/StaticTimestampsModel.java
new file mode 100644
index 000000000..7577db20e
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/model/timestamps/StaticTimestampsModel.java
@@ -0,0 +1,60 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.timegraph.model.timestamps;
+
+import org.teamapps.ux.component.timegraph.Interval;
+
+import java.util.Arrays;
+import java.util.LongSummaryStatistics;
+
+public class StaticTimestampsModel extends AbstractTimestampsModel {
+
+	private long[] timestamps;
+	private Interval staticDomainX;
+
+	public void setTimestamps(long[] timestamps) {
+		this.timestamps = timestamps;
+		onDataChanged.fire(null);
+	}
+
+	public void setEventTimestamps(long[] timestamps) {
+		this.timestamps = timestamps;
+		onDataChanged.fire(null);
+	}
+
+	@Override
+	public long[] getTimestamps(Interval neededIntervalX) {
+		return timestamps;
+	}
+
+	@Override
+	public Interval getDomainX() {
+		if (staticDomainX != null) {
+			return staticDomainX;
+		} else {
+			final LongSummaryStatistics minMax = Arrays.stream(timestamps).summaryStatistics();
+			return new Interval(minMax.getMin(), minMax.getMax());
+		}
+	}
+
+	public void setStaticDomainX(Interval staticDomainX) {
+		this.staticDomainX = staticDomainX;
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/partitioning/RawTimedDataModel.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/model/timestamps/TimestampsModel.java
similarity index 72%
rename from teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/partitioning/RawTimedDataModel.java
rename to teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/model/timestamps/TimestampsModel.java
index 2332fb340..615ceba5c 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/partitioning/RawTimedDataModel.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/model/timestamps/TimestampsModel.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,20 +17,17 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-package org.teamapps.ux.component.timegraph.partitioning;
+package org.teamapps.ux.component.timegraph.model.timestamps;
 
 import org.teamapps.event.Event;
 import org.teamapps.ux.component.timegraph.Interval;
 
-import java.util.Collection;
-import java.util.Map;
-
-public interface RawTimedDataModel {
+public interface TimestampsModel {
 
 	Event<Void> onDataChanged();
 	
-	Map<String, long[]> getRawEventTimes(Collection<String> lineIds, Interval neededIntervalX);
+	long[] getTimestamps(Interval neededIntervalX);
 
-	Interval getDomainX(Collection<String> lineIds);
+	Interval getDomainX();
 
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/partitioning/TimedDataPartition.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/model/timestamps/TimestampsPartition.java
similarity index 83%
rename from teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/partitioning/TimedDataPartition.java
rename to teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/model/timestamps/TimestampsPartition.java
index 330b7d9be..63393dfe5 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/partitioning/TimedDataPartition.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/model/timestamps/TimestampsPartition.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,13 +17,13 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-package org.teamapps.ux.component.timegraph.partitioning;
+package org.teamapps.ux.component.timegraph.model.timestamps;
 
-public class TimedDataPartition {
+class TimestampsPartition {
 	private final long timestamp;
 	private final long count;
 
-	public TimedDataPartition(long timestamp, long count) {
+	public TimestampsPartition(long timestamp, long count) {
 		this.timestamp = timestamp;
 		this.count = count;
 	}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/partitioning/TimedDataPartitioner.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/model/timestamps/TimestampsPartitioner.java
similarity index 68%
rename from teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/partitioning/TimedDataPartitioner.java
rename to teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/model/timestamps/TimestampsPartitioner.java
index d019d0961..d032fe078 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/partitioning/TimedDataPartitioner.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/model/timestamps/TimestampsPartitioner.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,7 +17,9 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-package org.teamapps.ux.component.timegraph.partitioning;
+package org.teamapps.ux.component.timegraph.model.timestamps;
+
+import org.teamapps.ux.component.timegraph.TimePartitioning;
 
 import java.time.Instant;
 import java.time.ZoneId;
@@ -28,13 +30,13 @@
 import java.util.TreeMap;
 import java.util.stream.Collectors;
 
-public class TimedDataPartitioner {
+public class TimestampsPartitioner {
 
-	public static List<TimedDataPartition> partition(long startTime, long endTime, List<Long> eventTimeStamps, ZoneId zoneId, TimePartitionUnit partitionUnit, boolean returnEmptyPartitions) {
+	public static List<TimestampsPartition> partition(long startTime, long endTime, List<Long> eventTimeStamps, ZoneId zoneId, TimePartitioning partitionUnit, boolean returnEmptyPartitions) {
 		return partition(startTime, endTime, eventTimeStamps.stream().mapToLong(l -> l).toArray(), zoneId, partitionUnit, returnEmptyPartitions);
 	}
 
-	public static List<TimedDataPartition> partition(long startTime, long endTime, long[] eventTimeStamps, ZoneId zoneId, TimePartitionUnit partitionUnit, boolean returnEmptyPartitions) {
+	public static List<TimestampsPartition> partition(long startTime, long endTime, long[] eventTimeStamps, ZoneId zoneId, TimePartitioning partitionUnit, boolean returnEmptyPartitions) {
 		TreeMap<Long, Integer> partitions = new TreeMap<>(Comparator.comparingLong(value -> value));
 
 		if (returnEmptyPartitions) {
@@ -45,22 +47,22 @@ public static List<TimedDataPartition> partition(long startTime, long endTime, l
 			}
 		}
 
-		long searchStartTime = partitionUnit.getPartition(Instant.ofEpochMilli(startTime).atZone(zoneId)).toInstant().toEpochMilli();
+		long searchStartTime = partitionUnit.getPartitionStart(Instant.ofEpochMilli(startTime).atZone(zoneId)).toInstant().toEpochMilli();
 		ZonedDateTime endTimeZonedDateTime = Instant.ofEpochMilli(endTime).atZone(zoneId);
-		long searchEndTime = partitionUnit.increment(partitionUnit.increment(partitionUnit.getPartition(endTimeZonedDateTime))).toInstant().toEpochMilli();
+		long searchEndTime = partitionUnit.increment(partitionUnit.increment(partitionUnit.getPartitionStart(endTimeZonedDateTime))).toInstant().toEpochMilli();
 
 		Arrays.stream(eventTimeStamps)
 				.filter(e -> e >= searchStartTime && e <= searchEndTime)
 				.forEach(e -> partitions.compute(getPartition(e, zoneId, partitionUnit), (partition, count) -> count == null ? 1 : count + 1));
 
 		return partitions.entrySet().stream()
-				.map(entry -> new TimedDataPartition(entry.getKey(), entry.getValue()))
+				.map(entry -> new TimestampsPartition(entry.getKey(), entry.getValue()))
 				.collect(Collectors.toList());
 	}
 
-	private static long getPartition(Long eventTime, ZoneId zoneId, TimePartitionUnit partitionUnit) {
+	private static long getPartition(Long eventTime, ZoneId zoneId, TimePartitioning partitionUnit) {
 		ZonedDateTime zonedDateTime = Instant.ofEpochMilli(eventTime).atZone(zoneId);
-		return partitionUnit.getPartition(zonedDateTime).toInstant().toEpochMilli();
+		return partitionUnit.getPartitionStart(zonedDateTime).toInstant().toEpochMilli();
 	}
 
 
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/partitioning/PartitioningTimeGraphModel.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/partitioning/PartitioningTimeGraphModel.java
deleted file mode 100644
index d11de105e..000000000
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/partitioning/PartitioningTimeGraphModel.java
+++ /dev/null
@@ -1,116 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.ux.component.timegraph.partitioning;
-
-import org.teamapps.event.Event;
-import org.teamapps.ux.component.timegraph.Interval;
-import org.teamapps.ux.component.timegraph.LineChartDataPoint;
-import org.teamapps.ux.component.timegraph.TimeGraphModel;
-import org.teamapps.ux.component.timegraph.TimeGraphZoomLevel;
-
-import java.time.ZoneId;
-import java.util.Arrays;
-import java.util.Collection;
-import java.util.HashMap;
-import java.util.List;
-import java.util.Map;
-import java.util.stream.Collectors;
-
-public class PartitioningTimeGraphModel implements TimeGraphModel {
-
-	public final Event<Void> onDataChanged = new Event<>();
-
-	private final ZoneId timeZone;
-	private List<TimePartitionUnit> zoomLevelPartitionUnits = Arrays.asList(
-			TimePartitionUnit.YEAR,
-			TimePartitionUnit.QUARTER,
-			TimePartitionUnit.MONTH,
-			TimePartitionUnit.WEEK_MONDAY,
-			TimePartitionUnit.DAY,
-			TimePartitionUnit.HOURS_6,
-			TimePartitionUnit.HOUR,
-			TimePartitionUnit.MINUTES_30,
-			TimePartitionUnit.MINUTES_15,
-			TimePartitionUnit.MINUTES_5,
-			TimePartitionUnit.MINUTES_2,
-			TimePartitionUnit.MINUTE,
-			TimePartitionUnit.SECONDS_30,
-			TimePartitionUnit.SECONDS_15,
-			TimePartitionUnit.SECONDS_5,
-			TimePartitionUnit.SECONDS_2,
-			TimePartitionUnit.SECOND,
-			TimePartitionUnit.MILLISECOND_500,
-			TimePartitionUnit.MILLISECOND_200,
-			TimePartitionUnit.MILLISECOND_100,
-			TimePartitionUnit.MILLISECOND_50,
-			TimePartitionUnit.MILLISECOND_20,
-			TimePartitionUnit.MILLISECOND_10,
-			TimePartitionUnit.MILLISECOND_5,
-			TimePartitionUnit.MILLISECOND_2,
-			TimePartitionUnit.MILLISECOND
-	);
-	private final RawTimedDataModel delegateModel;
-
-	public PartitioningTimeGraphModel(ZoneId timeZone, RawTimedDataModel delegateModel) {
-		this.timeZone = timeZone;
-		this.delegateModel = delegateModel;
-		this.delegateModel.onDataChanged().addListener(onDataChanged::fire);
-	}
-
-	public void setZoomLevelPartitionUnits(List<TimePartitionUnit> zoomLevelPartitionUnits) {
-		this.zoomLevelPartitionUnits = zoomLevelPartitionUnits;
-		onDataChanged.fire(null);
-	}
-
-	@Override
-	public Event<Void> onDataChanged() {
-		return onDataChanged;
-	}
-
-	@Override
-	public List<TimeGraphZoomLevel> getZoomLevels() {
-		return zoomLevelPartitionUnits.stream()
-				.map(unit -> new TimeGraphZoomLevel(unit.getAverageMilliseconds()))
-				.collect(Collectors.toList());
-	}
-
-	@Override
-	public Map<String, List<LineChartDataPoint>> getDataPoints(Collection<String> lineIds, TimeGraphZoomLevel zoomLevel, Interval neededIntervalX) {
-		TimePartitionUnit partitionUnit = zoomLevelPartitionUnits.stream()
-				.filter(partitioningUnit -> partitioningUnit.getAverageMilliseconds() == zoomLevel.getApproximateMillisecondsPerDataPoint())
-				.findFirst().orElse(null);
-		Map<String, List<LineChartDataPoint>> dataPointsByLineId = new HashMap<>();
-		delegateModel.getRawEventTimes(lineIds, neededIntervalX).forEach((lineId, eventTimestamps) -> {
-			if (lineIds.contains(lineId)) {
-				List<LineChartDataPoint> dataPoints = TimedDataPartitioner.partition(neededIntervalX.getMin(), neededIntervalX.getMax(), eventTimestamps, timeZone, partitionUnit, true)
-						.stream()
-						.map(p -> new LineChartDataPoint(p.getTimestamp(), p.getCount()))
-						.collect(Collectors.toList());
-				dataPointsByLineId.put(lineId, dataPoints);
-			}
-		});
-		return dataPointsByLineId;
-	}
-
-	@Override
-	public Interval getDomainX(Collection<String> lineIds) {
-		return delegateModel.getDomainX(lineIds);
-	}
-}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/partitioning/StaticPartitioningTimeGraphModel.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/partitioning/StaticPartitioningTimeGraphModel.java
deleted file mode 100644
index cb63feca1..000000000
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/partitioning/StaticPartitioningTimeGraphModel.java
+++ /dev/null
@@ -1,52 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.ux.component.timegraph.partitioning;
-
-import org.teamapps.ux.component.timegraph.Interval;
-
-import java.time.ZoneId;
-import java.util.Collection;
-import java.util.Map;
-
-public class StaticPartitioningTimeGraphModel extends PartitioningTimeGraphModel {
-	
-	private StaticRawTimedDataModel delegateModel;
-
-	private StaticPartitioningTimeGraphModel(ZoneId timeZone, StaticRawTimedDataModel delegateModel) {
-		super(timeZone, delegateModel);
-		this.delegateModel = delegateModel;
-	}
-	
-	public static StaticPartitioningTimeGraphModel create(ZoneId zoneId) {
-		return new StaticPartitioningTimeGraphModel(zoneId, new StaticRawTimedDataModel());
-	}
-
-	public void setEventTimestampsByLineId(Map<String, long[]> eventTimestampsByLineId) {
-		delegateModel.setEventTimestampsByLineId(eventTimestampsByLineId);
-	}
-
-	public void setEventTimestampsForLineId(String lineId, long[] eventTimestamps) {
-		delegateModel.setEventTimestampsForLineId(lineId, eventTimestamps);
-	}
-
-	public Map<String, long[]> getRawEventTimes(Collection<String> lineIds, Interval neededIntervalX) {
-		return delegateModel.getRawEventTimes(lineIds, neededIntervalX);
-	}
-}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/partitioning/StaticRawTimedDataModel.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/partitioning/StaticRawTimedDataModel.java
deleted file mode 100644
index 8b0c988d2..000000000
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/partitioning/StaticRawTimedDataModel.java
+++ /dev/null
@@ -1,76 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.ux.component.timegraph.partitioning;
-
-import org.teamapps.event.Event;
-import org.teamapps.ux.component.timegraph.Interval;
-
-import java.util.Arrays;
-import java.util.Collection;
-import java.util.HashMap;
-import java.util.Map;
-import java.util.stream.Collectors;
-
-public class StaticRawTimedDataModel implements RawTimedDataModel {
-
-	public final Event<Void> onDataChanged = new Event<>();
-
-	private Map<String, long[]> eventTimestampsByLineId = new HashMap<>();
-	private Interval staticDomainX;
-
-	public void setEventTimestampsByLineId(Map<String, long[]> eventTimestampsByLineId) {
-		this.eventTimestampsByLineId = new HashMap<>(eventTimestampsByLineId);
-		onDataChanged.fire(null);
-	}
-
-	public void setEventTimestampsForLineId(String lineId, long[] eventTimestamps) {
-		eventTimestampsByLineId.put(lineId, eventTimestamps);
-		onDataChanged.fire(null);
-	}
-
-	@Override
-	public Event<Void> onDataChanged() {
-		return onDataChanged;
-	}
-
-	@Override
-	public Map<String, long[]> getRawEventTimes(Collection<String> lineIds, Interval neededIntervalX) {
-		return eventTimestampsByLineId.entrySet().stream()
-				.filter(e -> lineIds.contains(e.getKey()))
-				.collect(Collectors.toMap(Map.Entry::getKey, Map.Entry::getValue));
-	}
-
-	@Override
-	public Interval getDomainX(Collection<String> lineIds) {
-		if (staticDomainX != null) {
-			return staticDomainX;
-		} else {
-			long min = eventTimestampsByLineId.entrySet().stream()
-					.filter(e -> lineIds.contains(e.getKey()))
-					.flatMapToLong(e -> Arrays.stream(e.getValue()))
-					.min().orElse(0);
-			long max = eventTimestampsByLineId.entrySet().stream()
-					.filter(e -> lineIds.contains(e.getKey()))
-					.flatMapToLong(e -> Arrays.stream(e.getValue()))
-					.max().orElse(1);
-			return new Interval(min, max);
-		}
-	}
-}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/toolbar/AbstractToolContainer.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/toolbar/AbstractToolContainer.java
index a25e49ba0..dd8003275 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/toolbar/AbstractToolContainer.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/toolbar/AbstractToolContainer.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,8 +19,10 @@
  */
 package org.teamapps.ux.component.toolbar;
 
+import org.teamapps.common.format.Color;
 import org.teamapps.data.extract.BeanPropertyExtractor;
 import org.teamapps.data.extract.PropertyExtractor;
+import org.teamapps.data.extract.PropertyProvider;
 import org.teamapps.dto.AbstractUiToolContainer;
 import org.teamapps.dto.UiDropDownButtonClickInfo;
 import org.teamapps.dto.UiEvent;
@@ -28,22 +30,19 @@
 import org.teamapps.event.Event;
 import org.teamapps.ux.component.AbstractComponent;
 import org.teamapps.ux.component.Component;
-import org.teamapps.common.format.Color;
 import org.teamapps.ux.component.template.BaseTemplate;
 import org.teamapps.ux.component.template.Template;
 
 import java.util.ArrayList;
 import java.util.List;
 import java.util.Objects;
-import java.util.stream.Collectors;
 
 public abstract class AbstractToolContainer extends AbstractComponent {
 	public final Event<ToolbarButtonClickEventData> onButtonClick = new Event<>();
-	public final Event<ToolbarButton> onDropDownItemClick = new Event<>();
-	protected List<ToolbarButtonGroup> toolbarButtonGroups = new ArrayList<>();
+	protected List<ToolbarButtonGroup> buttonGroups = new ArrayList<>();
 
 	private Template buttonTemplate = BaseTemplate.TOOLBAR_BUTTON;
-	private PropertyExtractor propertyExtractor = new BeanPropertyExtractor<>();
+	private PropertyProvider propertyProvider = new BeanPropertyExtractor<>();
 
 	public AbstractToolContainer() {
 		super();
@@ -55,12 +54,13 @@ public void handleUiEvent(UiEvent event) {
 			case ABSTRACT_UI_TOOL_CONTAINER_TOOLBAR_BUTTON_CLICK: {
 				UiToolbar.ToolbarButtonClickEvent clickEvent = (UiToolbar.ToolbarButtonClickEvent) event;
 				ToolbarButton button = getButtonByClientId(clickEvent.getGroupId(), clickEvent.getButtonId());
-				if (button != null) {
+				if (button != null && button.isVisible()) {
 					UiDropDownButtonClickInfo uiDropDownButtonClickInfo = clickEvent.getDropDownClickInfo();
 					if (uiDropDownButtonClickInfo != null && uiDropDownButtonClickInfo.getIsOpening() && !uiDropDownButtonClickInfo.getIsContentSet()) {
 						Component dropdownComponent = button.getDropDownComponent();
 						if (dropdownComponent != null) {
-							getSessionContext().queueCommand(new UiToolbar.SetDropDownComponentCommand(getId(), clickEvent.getGroupId(), ((AbstractUiToolContainer.ToolbarButtonClickEvent) event).getButtonId(), dropdownComponent.createUiComponentReference()));
+							getSessionContext().queueCommand(new UiToolbar.SetDropDownComponentCommand(getId(), clickEvent.getGroupId(),
+									((AbstractUiToolContainer.ToolbarButtonClickEvent) event).getButtonId(), dropdownComponent.createUiReference()));
 						}
 					}
 					button.onClick.fire(clickEvent);
@@ -70,20 +70,11 @@ public void handleUiEvent(UiEvent event) {
 				}
 				break;
 			}
-			case ABSTRACT_UI_TOOL_CONTAINER_TOOLBAR_DROP_DOWN_ITEM_CLICK: {
-				AbstractUiToolContainer.ToolbarDropDownItemClickEvent downItemClickEvent = (UiToolbar.ToolbarDropDownItemClickEvent) event;
-				ToolbarButton button = getButtonByClientId(downItemClickEvent.getGroupId(), downItemClickEvent.getButtonId());
-				if (button != null) {
-					button.onDropDownItemClick.fire(downItemClickEvent);
-					onDropDownItemClick.fire(button);
-				}
-				break;
-			}
 		}
 	}
 
 	private ToolbarButton getButtonByClientId(String groupId, String buttonId) {
-		return toolbarButtonGroups.stream()
+		return buttonGroups.stream()
 				.filter(group -> Objects.equals(group.getClientId(), groupId))
 				.flatMap(group -> group.getButtons().stream())
 				.filter(button -> Objects.equals(button.getClientId(), buttonId))
@@ -91,54 +82,62 @@ private ToolbarButton getButtonByClientId(String groupId, String buttonId) {
 	}
 
 	public boolean isEmpty() {
-		return toolbarButtonGroups.isEmpty();
+		return buttonGroups.isEmpty();
 	}
 
 	public ToolbarButtonGroup addButtonGroup(ToolbarButtonGroup buttonGroup) {
-		toolbarButtonGroups.add(buttonGroup);
+		buttonGroups.add(buttonGroup);
 		buttonGroup.setToolContainer(this);
-		queueCommandIfRendered(() -> new UiToolbar.AddButtonGroupCommand(getId(), buttonGroup.createUiToolbarButtonGroup()));
+		queueCommandIfRendered(() -> new UiToolbar.AddButtonGroupCommand(getId(), buttonGroup.createUiToolbarButtonGroup(), buttonGroup.isRightSide()));
 		return buttonGroup;
 	}
 
 	public void removeAllToolbarButtonGroups() {
-		toolbarButtonGroups.stream()
-				.collect(Collectors.toList())
-				.forEach(this::removeToolbarButtonGroup);
+		List.copyOf(buttonGroups).forEach(this::removeToolbarButtonGroup);
 	}
 
 	public void removeToolbarButtonGroup(ToolbarButtonGroup group) {
-		toolbarButtonGroups.remove(group);
+		buttonGroups.remove(group);
 		queueCommandIfRendered(() -> new UiToolbar.RemoveButtonGroupCommand(getId(), group.getClientId()));
 	}
 
-	/*package-private*/ void handleGroupVisibilityChange(String groupId, boolean visible) {
+	protected void handleGroupVisibilityChange(String groupId, boolean visible) {
 		queueCommandIfRendered(() -> new UiToolbar.SetButtonGroupVisibleCommand(this.getId(), groupId, visible));
 	}
 
-	/*package-private*/ void handleButtonVisibilityChange(String groupClientId, String buttonClientId, boolean visible) {
+	protected void handleButtonVisibilityChange(String groupClientId, String buttonClientId, boolean visible) {
 		queueCommandIfRendered(() -> new UiToolbar.SetButtonVisibleCommand(this.getId(), groupClientId, buttonClientId, visible));
 	}
 
-	/*package-private*/ void handleAddButton(ToolbarButtonGroup group, ToolbarButton button, String neighborButtonId, boolean beforeNeighbor) {
+	protected void handleButtonColorChange(String groupClientId, String buttonClientId, Color backgroundColor, Color hoverBackgroundColor) {
+		queueCommandIfRendered(() -> new UiToolbar.SetButtonColorsCommand(this.getId(), groupClientId, buttonClientId, backgroundColor != null ? backgroundColor.toHtmlColorString() : null,
+				hoverBackgroundColor != null ? hoverBackgroundColor.toHtmlColorString() : null));
+	}
+
+	protected void handleAddButton(ToolbarButtonGroup group, ToolbarButton button, String neighborButtonId, boolean beforeNeighbor) {
 		queueCommandIfRendered(() -> new UiToolbar.AddButtonCommand(getId(), group.getClientId(), button.createUiToolbarButton(), neighborButtonId, beforeNeighbor));
 	}
 
-	/*package-private*/ void handleButtonRemoved(ToolbarButtonGroup group, ToolbarButton button) {
+	protected void handleButtonRemoved(ToolbarButtonGroup group, ToolbarButton button) {
 		queueCommandIfRendered(() -> new UiToolbar.RemoveButtonCommand(getId(), group.getClientId(), button.getClientId()));
 	}
 
-	public void setBackgroundColor(Color backgroundColor) {
-		this.setCssStyle("> .background-color-div", "background-color", backgroundColor.toHtmlColorString());
+	protected void handleButtonSetDropDownComponent(ToolbarButtonGroup group, ToolbarButton button, Component component) {
+		queueCommandIfRendered(() -> new UiToolbar.SetDropDownComponentCommand(getId(), group.getClientId(), button.getClientId(), component.createUiReference()));
 	}
 
-	@Override
-	protected void doDestroy() {
-		// nothing to do
+	protected void handleCloseDropdown(ToolbarButtonGroup group, ToolbarButton button) {
+		queueCommandIfRendered(() -> new UiToolbar.CloseDropDownCommand(getId(), group.getClientId(), button.getClientId()));
+	}
+
+	public void setBackgroundColor(Color backgroundColor) {
+		this.setCssStyle("> .background-color-div", "background-color", backgroundColor != null ? backgroundColor.toHtmlColorString() : null);
 	}
 
 	public List<ToolbarButtonGroup> getToolbarButtonGroups() {
-		return toolbarButtonGroups;
+		ArrayList<ToolbarButtonGroup> groups = new ArrayList<>();
+		groups.addAll(buttonGroups);
+		return groups;
 	}
 
 	public Template getButtonTemplate() {
@@ -149,11 +148,15 @@ public void setButtonTemplate(Template buttonTemplate) {
 		this.buttonTemplate = buttonTemplate;
 	}
 
-	public PropertyExtractor getPropertyExtractor() {
-		return propertyExtractor;
+	public PropertyProvider getPropertyProvider() {
+		return propertyProvider;
+	}
+
+	public void setPropertyProvider(PropertyProvider propertyProvider) {
+		this.propertyProvider = propertyProvider;
 	}
 
 	public void setPropertyExtractor(PropertyExtractor propertyExtractor) {
-		this.propertyExtractor = propertyExtractor;
+		this.setPropertyProvider(propertyExtractor);
 	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/toolbar/DropDownButtonClickInfo.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/toolbar/DropDownButtonClickInfo.java
index aaae0814a..49d7a5140 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/toolbar/DropDownButtonClickInfo.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/toolbar/DropDownButtonClickInfo.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/toolbar/ToolAccordion.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/toolbar/ToolAccordion.java
index b3974d7b8..dc34b4ed2 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/toolbar/ToolAccordion.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/toolbar/ToolAccordion.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -33,11 +33,17 @@ public ToolAccordion() {
 
 	@Override
 	public UiComponent createUiComponent() {
-		List<UiToolbarButtonGroup> uiButtonGroups = toolbarButtonGroups.stream()
+		List<UiToolbarButtonGroup> leftUiButtonGroups = buttonGroups.stream()
+				.filter(group -> !group.isRightSide())
 				.sorted()
 				.map(group -> group.createUiToolbarButtonGroup())
 				.collect(Collectors.toList());
-		UiToolAccordion uiToolAccordion = new UiToolAccordion(getId(), uiButtonGroups);
+		List<UiToolbarButtonGroup> rightUiButtonGroups = buttonGroups.stream()
+				.filter(group -> group.isRightSide())
+				.sorted()
+				.map(group -> group.createUiToolbarButtonGroup())
+				.collect(Collectors.toList());
+		UiToolAccordion uiToolAccordion = new UiToolAccordion(leftUiButtonGroups, rightUiButtonGroups);
 		mapAbstractUiComponentProperties(uiToolAccordion);
 		return uiToolAccordion;
 	}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/toolbar/Toolbar.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/toolbar/Toolbar.java
index b0e553a71..3224eef39 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/toolbar/Toolbar.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/toolbar/Toolbar.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -35,11 +35,17 @@ public Toolbar() {
 
 	@Override
 	public UiComponent createUiComponent() {
-		List<UiToolbarButtonGroup> uiButtonGroups = toolbarButtonGroups.stream()
+		List<UiToolbarButtonGroup> leftUiButtonGroups = buttonGroups.stream()
+				.filter(group -> !group.isRightSide())
 				.sorted()
 				.map(group -> group.createUiToolbarButtonGroup())
 				.collect(Collectors.toList());
-		UiToolbar uiToolbar = new UiToolbar(getId(), uiButtonGroups);
+		List<UiToolbarButtonGroup> rightUiButtonGroups = buttonGroups.stream()
+				.filter(group -> group.isRightSide())
+				.sorted()
+				.map(group -> group.createUiToolbarButtonGroup())
+				.collect(Collectors.toList());
+		UiToolbar uiToolbar = new UiToolbar(leftUiButtonGroups, rightUiButtonGroups);
 		mapAbstractUiComponentProperties(uiToolbar);
 		uiToolbar.setLogoImage(logoImageUrl);
 		return uiToolbar;
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/toolbar/ToolbarButton.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/toolbar/ToolbarButton.java
index 983aaf983..e68025ee2 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/toolbar/ToolbarButton.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/toolbar/ToolbarButton.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,11 +19,13 @@
  */
 package org.teamapps.ux.component.toolbar;
 
+import org.teamapps.common.format.Color;
 import org.teamapps.data.extract.PropertyExtractor;
+import org.teamapps.data.extract.PropertyProvider;
 import org.teamapps.dto.UiToolbar;
 import org.teamapps.dto.UiToolbarButton;
 import org.teamapps.event.Event;
-import org.teamapps.icons.api.Icon;
+import org.teamapps.icons.Icon;
 import org.teamapps.ux.component.Component;
 import org.teamapps.ux.component.template.BaseTemplate;
 import org.teamapps.ux.component.template.BaseTemplateRecord;
@@ -36,19 +38,21 @@
 public class ToolbarButton {
 
 	public final Event<UiToolbar.ToolbarButtonClickEvent> onClick = new Event<>();
-	public final Event<UiToolbar.ToolbarDropDownItemClickEvent> onDropDownItemClick = new Event<>();
 
 	private ToolbarButtonGroup toolbarButtonGroup;
-	private String clientId = UUID.randomUUID().toString();
+	private final String clientId = UUID.randomUUID().toString();
+	private String debuggingId;
 
 	private final Object record;
 
 	private Template template; // if null, will fallback to toolbarButtonGroup's template
-	private PropertyExtractor propertyExtractor; // if null, will fallback to toolbarButtonGroup's valueExtractor
+	private PropertyProvider propertyProvider; // if null, will fallback to toolbarButtonGroup's valueExtractor
 
+	// ===== HACKS =====
 	private String openNewTabWithUrl;
 	private Component togglesFullScreenOnComponent;
-
+	private Component startPlaybackComponent;
+	// ===== END HACKS =====
 
 	private Supplier<Component> dropDownComponentSupplier;
 	private boolean eagerDropDownRendering = false;
@@ -56,6 +60,9 @@ public class ToolbarButton {
 
 	private boolean visible = true;
 
+	private Color backgroundColor;
+	private Color hoverBackgroundColor;
+
 	public ToolbarButton(Object record) {
 		this(null, record, null, null, null, 0);
 	}
@@ -120,21 +127,23 @@ public static ToolbarButton createFullScreenToggleButton(Template template, Base
 	}
 
 	public UiToolbarButton createUiToolbarButton() {
-		UiToolbarButton uiToolbarButton;
-
 		Template template = getAppliedTemplate();
-		Map<String, Object> values = getAppliedPropertyExtractor().getValues(record, template.getDataKeys());
+		Map<String, Object> values = getAppliedPropertyProvider().getValues(record, template.getPropertyNames());
 
-		UiToolbarButton button = new UiToolbarButton(clientId, template.createUiTemplate(), values);
+		UiToolbarButton ui = new UiToolbarButton(clientId, template.createUiTemplate(), values);
 		if (this.eagerDropDownRendering && this.dropDownComponentSupplier != null) {
-			button.setDropDownComponent(dropDownComponentSupplier.get().createUiComponentReference());
+			ui.setDropDownComponent(dropDownComponentSupplier.get().createUiReference());
 		}
-		button.setHasDropDown(this.dropDownComponentSupplier != null);
-		button.setDropDownPanelWidth(droDownPanelWidth > 0 ? droDownPanelWidth : 450);
-		button.setVisible(visible);
-		button.setOpenNewTabWithUrl(openNewTabWithUrl);
-		button.setTogglesFullScreenOnComponent(togglesFullScreenOnComponent != null ? togglesFullScreenOnComponent.getId() : null);
-		return button;
+		ui.setHasDropDown(this.dropDownComponentSupplier != null);
+		ui.setDropDownPanelWidth(droDownPanelWidth > 0 ? droDownPanelWidth : 450);
+		ui.setVisible(visible);
+		ui.setOpenNewTabWithUrl(openNewTabWithUrl);
+		ui.setTogglesFullScreenOnComponent(togglesFullScreenOnComponent != null ? togglesFullScreenOnComponent.createUiReference() : null);
+		ui.setStartPlaybackComponent(startPlaybackComponent != null ? startPlaybackComponent.createUiReference() : null);
+		ui.setBackgroundColor(backgroundColor != null ? backgroundColor.toHtmlColorString() : null);
+		ui.setHoverBackgroundColor(hoverBackgroundColor != null ? hoverBackgroundColor.toHtmlColorString() : null);
+		ui.setDebuggingId(debuggingId);
+		return ui;
 	}
 
 	public ToolbarButton setVisible(boolean visible) {
@@ -156,6 +165,15 @@ public ToolbarButton setTogglesFullScreenOnComponent(Component togglesFullScreen
 		return this;
 	}
 
+	public Component getStartPlaybackComponent() {
+		return startPlaybackComponent;
+	}
+
+	public ToolbarButton setStartPlaybackComponent(Component startPlaybackComponent) {
+		this.startPlaybackComponent = startPlaybackComponent;
+		return this;
+	}
+
 	/*package-private*/ String getClientId() {
 		return clientId;
 	}
@@ -189,32 +207,43 @@ public boolean isVisible() {
 		return visible;
 	}
 
-	public void setToolbarButtonGroup(ToolbarButtonGroup toolbarButtonGroup) {
+	public ToolbarButton setToolbarButtonGroup(ToolbarButtonGroup toolbarButtonGroup) {
 		this.toolbarButtonGroup = toolbarButtonGroup;
+		return this;
 	}
 
-	public void setDroDownPanelWidth(int droDownPanelWidth) {
+	public ToolbarButton setDroDownPanelWidth(int droDownPanelWidth) {
 		this.droDownPanelWidth = droDownPanelWidth;
+		return this;
 	}
 
-	public void setDropDownComponent(Component dropDownComponent) {
+	public ToolbarButton setDropDownComponent(Component dropDownComponent) {
 		this.dropDownComponentSupplier = () -> dropDownComponent;
+		return this;
+	}
+
+	public ToolbarButton updateDropDownComponent(Component dropDownComponent) {
+		this.dropDownComponentSupplier = () -> dropDownComponent;
+		this.toolbarButtonGroup.handleDropDownComponentUpdate(this, dropDownComponent);
+		return this;
 	}
 
 	public boolean isEagerDropDownRendering() {
 		return eagerDropDownRendering;
 	}
 
-	public void setEagerDropDownRendering(boolean eagerDropDownRendering) {
+	public ToolbarButton setEagerDropDownRendering(boolean eagerDropDownRendering) {
 		this.eagerDropDownRendering = eagerDropDownRendering;
+		return this;
 	}
 
 	public Template getTemplate() {
 		return template;
 	}
 
-	public void setTemplate(Template template) {
+	public ToolbarButton setTemplate(Template template) {
 		this.template = template;
+		return this;
 	}
 
 	public Template getAppliedTemplate() {
@@ -227,16 +256,22 @@ public Template getAppliedTemplate() {
 		}
 	}
 
-	public PropertyExtractor getPropertyExtractor() {
-		return propertyExtractor;
+	public PropertyProvider getPropertyProvider() {
+		return propertyProvider;
+	}
+
+	public ToolbarButton setPropertyProvider(PropertyProvider propertyProvider) {
+		this.propertyProvider = propertyProvider;
+		return this;
 	}
 
-	public void setPropertyExtractor(PropertyExtractor propertyExtractor) {
-		this.propertyExtractor = propertyExtractor;
+	public ToolbarButton setPropertyExtractor(PropertyExtractor propertyExtractor) {
+		this.setPropertyProvider(propertyExtractor);
+		return this;
 	}
 
-	public PropertyExtractor getAppliedPropertyExtractor() {
-		return this.propertyExtractor != null ? this.propertyExtractor : toolbarButtonGroup.getAppliedPropertyExtractor();
+	public PropertyProvider getAppliedPropertyProvider() {
+		return this.propertyProvider != null ? this.propertyProvider : toolbarButtonGroup.getAppliedPropertyProvider();
 	}
 
 	public Supplier<Component> getDropDownComponentSupplier() {
@@ -247,7 +282,44 @@ public Supplier<Component> getDropDownComponentSupplier() {
 		return this.dropDownComponentSupplier != null ? this.dropDownComponentSupplier.get() : null;
 	}
 
-	public void setDropDownComponentSupplier(Supplier<Component> dropDownComponentSupplier) {
+	public ToolbarButton setDropDownComponentSupplier(Supplier<Component> dropDownComponentSupplier) {
 		this.dropDownComponentSupplier = dropDownComponentSupplier;
+		return this;
+	}
+
+	public void closeDropDown() {
+		toolbarButtonGroup.handleCloseDropdown(this);
+	}
+
+	public Color getBackgroundColor() {
+		return backgroundColor;
+	}
+
+	public ToolbarButton setBackgroundColor(Color backgroundColor) {
+		this.backgroundColor = backgroundColor;
+		if (toolbarButtonGroup != null){
+			toolbarButtonGroup.handleColorChange(this.clientId, backgroundColor, hoverBackgroundColor);
+		}
+		return this;
+	}
+
+	public Color getHoverColor() {
+		return hoverBackgroundColor;
+	}
+
+	public ToolbarButton setHoverBackgroundColor(Color hoverBackgroundColor) {
+		this.hoverBackgroundColor = hoverBackgroundColor;
+		if (toolbarButtonGroup != null){
+			toolbarButtonGroup.handleColorChange(this.clientId, backgroundColor, hoverBackgroundColor);
+		}
+		return this;
+	}
+
+	public String getDebuggingId() {
+		return debuggingId;
+	}
+
+	public void setDebuggingId(String debuggingId) {
+		this.debuggingId = debuggingId;
 	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/toolbar/ToolbarButtonClickEventData.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/toolbar/ToolbarButtonClickEventData.java
index 0deb66a83..c81ef867f 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/toolbar/ToolbarButtonClickEventData.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/toolbar/ToolbarButtonClickEventData.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/toolbar/ToolbarButtonGroup.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/toolbar/ToolbarButtonGroup.java
index 153cf5b57..09a4eba7c 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/toolbar/ToolbarButtonGroup.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/toolbar/ToolbarButtonGroup.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,9 +19,12 @@
  */
 package org.teamapps.ux.component.toolbar;
 
+import org.teamapps.common.format.Color;
 import org.teamapps.data.extract.PropertyExtractor;
+import org.teamapps.data.extract.PropertyProvider;
 import org.teamapps.dto.UiToolbarButton;
 import org.teamapps.dto.UiToolbarButtonGroup;
+import org.teamapps.ux.component.Component;
 import org.teamapps.ux.component.template.Template;
 
 import java.util.ArrayList;
@@ -33,15 +36,16 @@ public class ToolbarButtonGroup implements Comparable<ToolbarButtonGroup> {
 
 	private AbstractToolContainer toolContainer;
 	private String clientId = UUID.randomUUID().toString();
-	
+
 	private final List<ToolbarButton> buttons = new ArrayList<>();
 	private ToolbarButtonGroupPosition position;
+	private boolean rightSide;
 
 	private boolean visible = true;
 	private boolean showGroupSeparator = true;
 
 	private Template buttonTemplate; // if null, will fallback to toolbar's valueExtractor
-	private PropertyExtractor propertyExtractor; // if null, will fallback to toolbar's valueExtractor
+	private PropertyProvider propertyProvider; // if null, will fallback to toolbar's valueExtractor
 
 	public ToolbarButtonGroup() {
 		this(new ArrayList<>(), ToolbarButtonGroupPosition.CENTER);
@@ -147,6 +151,24 @@ public int compareTo(ToolbarButtonGroup o) {
 		}
 	}
 
+	/*package-private*/ void handleDropDownComponentUpdate(ToolbarButton button, Component component) {
+		if (this.toolContainer != null) {
+			this.toolContainer.handleButtonSetDropDownComponent(this, button, component);
+		}
+	}
+
+	/*package-private*/ void handleCloseDropdown(ToolbarButton button) {
+		if (this.toolContainer != null) {
+			this.toolContainer.handleCloseDropdown(this, button);
+		}
+	}
+
+	public void handleColorChange(String buttonClientId, Color backgroundColor, Color hoverBackgroundColor) {
+		if (this.toolContainer != null) {
+			this.toolContainer.handleButtonColorChange(this.clientId, buttonClientId, backgroundColor, hoverBackgroundColor);
+		}
+	}
+
 	public Template getButtonTemplate() {
 		return buttonTemplate;
 	}
@@ -159,15 +181,30 @@ public Template getAppliedTemplate() {
 		return this.buttonTemplate != null ? this.buttonTemplate : this.toolContainer.getButtonTemplate();
 	}
 
-	public PropertyExtractor getPropertyExtractor() {
-		return propertyExtractor;
+	public PropertyProvider getPropertyProvider() {
+		return propertyProvider;
+	}
+
+	public void setPropertyProvider(PropertyProvider propertyProvider) {
+		this.propertyProvider = propertyProvider;
 	}
 
 	public void setPropertyExtractor(PropertyExtractor propertyExtractor) {
-		this.propertyExtractor = propertyExtractor;
+		this.setPropertyProvider(propertyExtractor);
+	}
+	public PropertyProvider getAppliedPropertyProvider() {
+		return propertyProvider != null ? propertyProvider : toolContainer.getPropertyProvider();
+	}
+
+	public void setClientId(String clientId) {
+		this.clientId = clientId;
+	}
+
+	public boolean isRightSide() {
+		return rightSide;
 	}
 
-	public PropertyExtractor getAppliedPropertyExtractor() {
-		return propertyExtractor != null ? propertyExtractor : toolContainer.getPropertyExtractor();
+	public void setRightSide(boolean rightSide) {
+		this.rightSide = rightSide;
 	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/toolbar/ToolbarButtonGroupPosition.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/toolbar/ToolbarButtonGroupPosition.java
index b7bd4c917..91447858e 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/toolbar/ToolbarButtonGroupPosition.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/toolbar/ToolbarButtonGroupPosition.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/toolbutton/ToolButton.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/toolbutton/ToolButton.java
index 29907933b..4990f8396 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/toolbutton/ToolButton.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/toolbutton/ToolButton.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -23,7 +23,7 @@
 import org.teamapps.dto.UiEvent;
 import org.teamapps.dto.UiToolButton;
 import org.teamapps.event.Event;
-import org.teamapps.icons.api.Icon;
+import org.teamapps.icons.Icon;
 import org.teamapps.ux.component.AbstractComponent;
 import org.teamapps.ux.component.Component;
 
@@ -31,8 +31,10 @@ public class ToolButton extends AbstractComponent {
 
 	public final Event<Void> onDropDownOpened = new Event<>();
 
-	private Icon icon;
-	private String popoverText;
+	private Icon<?, ?> icon;
+	private Integer iconSize = null; // null = default defined by CSS
+	private String caption;
+	private String title;
 	private boolean grayOutIfNotHovered;
 
 	private boolean openDropDownIfNotSet = false;
@@ -42,18 +44,18 @@ public class ToolButton extends AbstractComponent {
 
 	public final Event<Void> onClick = new Event<>();
 
-	public ToolButton(Icon icon) {
+	public ToolButton(Icon<?, ?> icon) {
 		this(icon, null, null);
 	}
 
-	public ToolButton(Icon icon, String popoverText) {
-		this(icon, popoverText, null);
+	public ToolButton(Icon<?, ?> icon, String title) {
+		this(icon, title, null);
 	}
 
-	public ToolButton(Icon icon, String popoverText, Component dropDownComponent) {
+	public ToolButton(Icon<?, ?> icon, String title, Component dropDownComponent) {
 		super();
 		this.icon = icon;
-		this.popoverText = popoverText;
+		this.title = title;
 		this.dropDownComponent = dropDownComponent;
 	}
 
@@ -68,13 +70,16 @@ public void setGrayOutIfNotHovered(boolean grayOutIfNotHovered) {
 	@Override
 	public UiComponent createUiComponent() {
 		String icon = getSessionContext().resolveIcon(this.icon);
-		UiToolButton uiToolButton = new UiToolButton(getId(), icon, popoverText);
+		UiToolButton uiToolButton = new UiToolButton(icon, title);
+		uiToolButton.setIconSize(iconSize);
+		uiToolButton.setCaption(caption);
 		mapAbstractUiComponentProperties(uiToolButton);
 		uiToolButton.setGrayOutIfNotHovered(grayOutIfNotHovered);
-		uiToolButton.setDropDownComponent(this.dropDownComponent != null ? this.dropDownComponent.createUiComponentReference() : null);
+		uiToolButton.setDropDownComponent(this.dropDownComponent != null ? this.dropDownComponent.createUiReference() : null);
 		uiToolButton.setMinDropDownWidth(minDropDownWidth != null ? minDropDownWidth : 0);
 		uiToolButton.setMinDropDownHeight(minDropDownHeight != null ? minDropDownHeight : 0);
 		uiToolButton.setMinDropDownHeight(minDropDownHeight);
+		uiToolButton.setTitle(title);
 		return uiToolButton;
 	}
 
@@ -82,31 +87,53 @@ public UiComponent createUiComponent() {
 	public void handleUiEvent(UiEvent event) {
 		switch (event.getUiEventType()) {
 			case UI_TOOL_BUTTON_CLICKED: {
-				this.onClick.fire(null);
+				if (isVisible()) {
+					this.onClick.fire(null);
+				}
 				break;
 			}
 			case UI_BUTTON_DROP_DOWN_OPENED:
-				this.onDropDownOpened.fire(null);
+				if (isVisible()) {
+					this.onDropDownOpened.fire(null);
+				}
 				break;
 		}
 	}
 
-	public Icon getIcon() {
+	public Icon<?, ?> getIcon() {
 		return icon;
 	}
 
-	public void setIcon(Icon icon) {
+	public void setIcon(Icon<?, ?> icon) {
 		this.icon = icon;
 		queueCommandIfRendered(() -> new UiToolButton.SetIconCommand(getId(), getSessionContext().resolveIcon(icon)));
 	}
 
-	public String getPopoverText() {
-		return popoverText;
+	public Integer getIconSize() {
+		return iconSize;
 	}
 
-	public void setPopoverText(String popoverText) {
-		this.popoverText = popoverText;
-		queueCommandIfRendered(() -> new UiToolButton.SetPopoverTextCommand(getId(), popoverText));
+	public void setIconSize(Integer iconSize) {
+		this.iconSize = iconSize;
+		queueCommandIfRendered(() -> new UiToolButton.SetIconSizeCommand(getId(), iconSize));
+	}
+
+	public String getCaption() {
+		return caption;
+	}
+
+	public void setCaption(String caption) {
+		this.caption = caption;
+		queueCommandIfRendered(() -> new UiToolButton.SetCaptionCommand(getId(), caption));
+	}
+
+	public String getTitle() {
+		return title;
+	}
+
+	public void setTitle(String title) {
+		this.title = title;
+		queueCommandIfRendered(() -> new UiToolButton.SetTitleCommand(getId(), title));
 	}
 
 	public boolean isOpenDropDownIfNotSet() {
@@ -124,7 +151,7 @@ public Component getDropDownComponent() {
 
 	public void setDropDownComponent(Component dropDownComponent) {
 		this.dropDownComponent = dropDownComponent;
-		queueCommandIfRendered(() -> new UiToolButton.SetDropDownComponentCommand(getId(), dropDownComponent != null ? dropDownComponent.createUiComponentReference() : null));
+		queueCommandIfRendered(() -> new UiToolButton.SetDropDownComponentCommand(getId(), dropDownComponent != null ? dropDownComponent.createUiReference() : null));
 	}
 
 	public Integer getMinDropDownWidth() {
@@ -145,10 +172,8 @@ public void setMinDropDownHeight(Integer minDropDownHeight) {
 		queueCommandIfRendered(() -> new UiToolButton.SetDropDownSizeCommand(getId(), minDropDownWidth, minDropDownHeight));
 	}
 
-	@Override
-	protected void doDestroy() {
-		if (this.dropDownComponent != null) {
-			this.dropDownComponent.destroy();
-		}
+	public void closeDropDown() {
+		queueCommandIfRendered(() -> new UiToolButton.CloseDropDownCommand(getId()));
 	}
+
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/toolbutton/ToolButtonContainer.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/toolbutton/ToolButtonContainer.java
index 5da1d0846..323c23c0b 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/toolbutton/ToolButtonContainer.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/toolbutton/ToolButtonContainer.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/tree/EagerNodesFilter.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/tree/EagerNodesFilter.java
index 5e6625c2d..6b3d21a5f 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/tree/EagerNodesFilter.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/tree/EagerNodesFilter.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -25,7 +25,7 @@
 import java.util.Map;
 import java.util.function.Predicate;
 
-class EagerNodesFilter implements Predicate<TreeNode> {
+public class EagerNodesFilter implements Predicate<TreeNode> {
 
 	private final TreeNode evaluationRootNode;
 	private final Map<TreeNode, Boolean> includedInResultByNode = new HashMap<>();
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/tree/SimpleTree.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/tree/SimpleTree.java
index d5557f752..a961c4750 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/tree/SimpleTree.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/tree/SimpleTree.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -62,6 +62,11 @@ public void updateNode(BaseTemplateTreeNode<PAYLOAD> node) {
 		getModel().updateNode(node);
 	}
 
+	public void setNodeExpanded(BaseTemplateTreeNode<PAYLOAD> node, boolean expanded) {
+		node.setExpanded(expanded);
+		updateNode(node);
+	}
+
 	public void relocateNode(BaseTemplateTreeNode<PAYLOAD> node) {
 		getModel().relocateNode(node);
 	}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/tree/SimpleTreeModel.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/tree/SimpleTreeModel.java
index 1d55a1330..1ddc0f556 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/tree/SimpleTreeModel.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/tree/SimpleTreeModel.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -22,6 +22,7 @@
 import org.apache.commons.lang3.StringUtils;
 import org.teamapps.ux.component.template.BaseTemplateTreeNode;
 import org.teamapps.ux.model.AbstractTreeModel;
+import org.teamapps.ux.model.ComboBoxModel;
 import org.teamapps.ux.model.TreeModelChangedEventData;
 
 import java.util.ArrayList;
@@ -30,9 +31,10 @@
 import java.util.List;
 import java.util.stream.Collectors;
 
-public class SimpleTreeModel<PAYLOAD> extends AbstractTreeModel<BaseTemplateTreeNode<PAYLOAD>> {
+public class SimpleTreeModel<PAYLOAD> extends AbstractTreeModel<BaseTemplateTreeNode<PAYLOAD>> implements ComboBoxModel<BaseTemplateTreeNode<PAYLOAD>> {
 
 	private final List<BaseTemplateTreeNode<PAYLOAD>> nodes;
+	private int maxResultNodes = Integer.MAX_VALUE;
 
 	public SimpleTreeModel() {
 		nodes = new ArrayList<>();
@@ -45,7 +47,7 @@ public SimpleTreeModel(List<BaseTemplateTreeNode<PAYLOAD>> nodes) {
 	public void setNodes(List<BaseTemplateTreeNode<PAYLOAD>> nodes) {
 		this.nodes.clear();
 		this.nodes.addAll(nodes);
-		onAllNodesChanged.fire(nodes);
+		onAllNodesChanged.fire();
 	}
 
 	public void addNode(BaseTemplateTreeNode<PAYLOAD> node) {
@@ -86,7 +88,15 @@ public void removeNode(BaseTemplateTreeNode<PAYLOAD> node) {
 
 	public void removeAllNodes() {
 		nodes.clear();
-		onAllNodesChanged.fire(Collections.emptyList());
+		onAllNodesChanged.fire();
+	}
+
+	public int getMaxResultNodes() {
+		return maxResultNodes;
+	}
+
+	public void setMaxResultNodes(int maxResultNodes) {
+		this.maxResultNodes = maxResultNodes;
 	}
 
 	@Override
@@ -94,6 +104,7 @@ public List<BaseTemplateTreeNode<PAYLOAD>> getRecords(String query) {
 		if (StringUtils.isEmpty(query)) {
 			return this.nodes.stream()
 					.filter(new EagerNodesFilter())
+					.limit(maxResultNodes)
 					.collect(Collectors.toList());
 		} else {
 			List<BaseTemplateTreeNode<PAYLOAD>> filteredTree = this.nodes.stream()
@@ -107,6 +118,11 @@ public List<BaseTemplateTreeNode<PAYLOAD>> getRecords(String query) {
 		}
 	}
 
+	@Override
+	public List<BaseTemplateTreeNode<PAYLOAD>> getRecords() {
+		return this.getRecords(null);
+	}
+
 	@Override
 	public List<BaseTemplateTreeNode<PAYLOAD>> getChildRecords(BaseTemplateTreeNode<PAYLOAD> parentRecord) {
 		return nodes.stream()
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/tree/Tree.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/tree/Tree.java
index 93846af5f..df5202cd5 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/tree/Tree.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/tree/Tree.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -23,27 +23,22 @@
 import org.slf4j.LoggerFactory;
 import org.teamapps.data.extract.BeanPropertyExtractor;
 import org.teamapps.data.extract.PropertyExtractor;
-import org.teamapps.dto.UiComboBoxTreeRecord;
-import org.teamapps.dto.UiComponent;
-import org.teamapps.dto.UiEvent;
-import org.teamapps.dto.UiTree;
-import org.teamapps.dto.UiTreeRecord;
+import org.teamapps.data.extract.PropertyProvider;
+import org.teamapps.dto.*;
 import org.teamapps.event.Event;
-import org.teamapps.event.EventListener;
-import org.teamapps.ux.cache.CacheManipulationHandle;
-import org.teamapps.ux.cache.ClientRecordCache;
 import org.teamapps.ux.component.AbstractComponent;
-import org.teamapps.ux.component.field.TextMatchingMode;
+import org.teamapps.ux.component.Component;
 import org.teamapps.ux.component.field.combobox.TemplateDecider;
-import org.teamapps.ux.component.node.TreeNode;
 import org.teamapps.ux.component.template.Template;
 import org.teamapps.ux.model.TreeModel;
 import org.teamapps.ux.model.TreeModelChangedEventData;
 
+import java.util.ArrayList;
 import java.util.Collections;
 import java.util.HashMap;
 import java.util.List;
 import java.util.Map;
+import java.util.function.Consumer;
 import java.util.function.Function;
 import java.util.stream.Collectors;
 
@@ -52,12 +47,11 @@ public class Tree<RECORD> extends AbstractComponent {
 	private final Logger LOGGER = LoggerFactory.getLogger(Tree.class);
 
 	public final Event<RECORD> onNodeSelected = new Event<>();
+	public final Event<TreeNodeExpansionEvent<RECORD>> onNodeExpansionChanged = new Event<>();
 	public final Event<String> onTextInput = new Event<>();
 
 	private TreeModel<RECORD> model;
-	private final ClientRecordCache<RECORD, UiTreeRecord> recordCache = new ClientRecordCache<>(this::createUiTreeRecordWithoutParentRelation, this::addParentLinkToUiRecord);
-	private TextMatchingMode textMatchingMode = TextMatchingMode.CONTAINS;
-	private PropertyExtractor<RECORD> propertyExtractor = new BeanPropertyExtractor<>();
+	private PropertyProvider<RECORD> propertyProvider = new BeanPropertyExtractor<>();
 	private RECORD selectedNode;
 
 	private Template entryTemplate = null; // null: use toString()
@@ -66,36 +60,34 @@ public class Tree<RECORD> extends AbstractComponent {
 	private int templateIdCounter = 0;
 
 	private int indentation = 15;
-	private boolean animate = true;
+	private boolean animated = true;
 	private boolean showExpanders = true;
 	private boolean openOnSelection = false;
 	private boolean enforceSingleExpandedPath = false;
 
+	private Function<RECORD, Component> contextMenuProvider = null;
+	private int lastSeenContextMenuRequestId;
+
 	private Function<RECORD, String> recordToStringFunction = Object::toString;
-	private TreeNodeInfoExtractor<RECORD> treeNodeInfoExtractor = record -> {
-		if (record instanceof TreeNode) {
-			return (TreeNode) record;
-		} else {
-			return null;
-		}
-	};
 
-	private final EventListener<List<RECORD>> modelAllNodesChangedListener = (dataRecords) -> {
+	private int clientRecordIdCounter = 0;
+	private final Map<RECORD, UiTreeRecord> uiRecordsByRecord = new HashMap<>();
+
+	private final Runnable modelAllNodesChangedListener = () -> {
 		if (isRendered()) {
-			CacheManipulationHandle<List<UiTreeRecord>> cacheResponse = recordCache.replaceRecords(dataRecords);
-			getSessionContext().queueCommand(new UiTree.ReplaceDataCommand(getId(), cacheResponse.getResult()), aVoid -> cacheResponse.commit());
+			uiRecordsByRecord.clear();
+			List<UiTreeRecord> uiRecords = createOrUpdateUiRecords(model.getRecords());
+			getSessionContext().queueCommand(new UiTree.ReplaceDataCommand(getId(), uiRecords));
 		}
 	};
-	private final EventListener<TreeModelChangedEventData<RECORD>> modelChangedListener = (changedEventData) -> {
-		List<RECORD> nodesRemoved = changedEventData.getNodesRemoved();
-		List<RECORD> nodesAdded = changedEventData.getNodesAddedOrUpdated();
+
+	private final Consumer<TreeModelChangedEventData<RECORD>> modelChangedListener = (changedEventData) -> {
 		if (isRendered()) {
-			CacheManipulationHandle<List<Integer>> cacheRemoveResponse = recordCache.removeRecords(nodesRemoved);
-			CacheManipulationHandle<List<UiTreeRecord>> cacheAddResponse = recordCache.addRecords(nodesAdded);
-			getSessionContext().queueCommand(new UiTree.BulkUpdateCommand(getId(), cacheRemoveResponse.getResult(), cacheAddResponse.getResult()), aVoid -> {
-				cacheRemoveResponse.commit();
-				cacheAddResponse.commit();
-			});
+			List<Integer> removedUiIds = changedEventData.getRemovedNodes().stream()
+					.map(key -> uiRecordsByRecord.remove(key).getId())
+					.collect(Collectors.toList());
+			List<UiTreeRecord> addedOrUpdatedUiTreeRecords = createOrUpdateUiRecords(changedEventData.getAddedOrUpdatedNodes());
+			getSessionContext().queueCommand(new UiTree.BulkUpdateCommand(getId(), removedUiIds, addedOrUpdatedUiTreeRecords));
 		}
 	};
 
@@ -115,47 +107,59 @@ private void unregisterMutableTreeModelListeners() {
 		model.onChanged().removeListener(modelChangedListener);
 	}
 
-	@Override
-	protected void doDestroy() {
-		unregisterMutableTreeModelListeners();
+	protected List<UiTreeRecord> createOrUpdateUiRecords(List<RECORD> records) {
+		if (records == null) {
+			return Collections.emptyList();
+		}
+		ArrayList<UiTreeRecord> uiRecords = new ArrayList<>();
+		for (RECORD record : records) {
+			UiTreeRecord uiRecord = createUiTreeRecordWithoutParentRelation(record);
+			uiRecordsByRecord.put(record, uiRecord);
+			uiRecords.add(uiRecord);
+		}
+		for (RECORD record : records) {
+			addParentLinkToUiRecord(record, uiRecordsByRecord.get(record));
+		}
+		return uiRecords;
 	}
 
 	protected UiTreeRecord createUiTreeRecordWithoutParentRelation(RECORD record) {
 		if (record == null) {
 			return null;
 		}
-		// do not look for objects inside the cache here. they are sent to the client anyway. Also, values like expanded would have to be updated in any case.
-
 		Template template = getTemplateForRecord(record);
-		List<String> dataKeys = template != null ? template.getDataKeys() : Collections.emptyList();
-		Map<String, Object> values = propertyExtractor.getValues(record, dataKeys);
-		UiComboBoxTreeRecord uiTreeRecord = new UiComboBoxTreeRecord();
+		List<String> propertyNames = template != null ? template.getPropertyNames() : Collections.emptyList();
+		Map<String, Object> values = propertyProvider.getValues(record, propertyNames);
+
+		UiTreeRecord uiTreeRecord;
+		if (uiRecordsByRecord.containsKey(record)) {
+			uiTreeRecord = uiRecordsByRecord.get(record);
+		} else {
+			uiTreeRecord = new UiComboBoxTreeRecord();
+			uiTreeRecord.setId(++clientRecordIdCounter);
+		}
 		uiTreeRecord.setValues(values);
 		uiTreeRecord.setDisplayTemplateId(templateIdsByTemplate.get(template));
 		uiTreeRecord.setAsString(this.recordToStringFunction.apply(record));
 
-		TreeNodeInfo treeNodeInfo = treeNodeInfoExtractor.getTreeNodeInfo(record);
+		TreeNodeInfo treeNodeInfo = model.getTreeNodeInfo(record);
 		if (treeNodeInfo != null) {
 			uiTreeRecord.setExpanded(treeNodeInfo.isExpanded());
 			uiTreeRecord.setLazyChildren(treeNodeInfo.isLazyChildren());
+			uiTreeRecord.setSelectable(treeNodeInfo.isSelectable());
 		}
 
 		return uiTreeRecord;
 	}
 
-	protected void addParentLinkToUiRecord(RECORD record, UiTreeRecord uiTreeRecord, Map<RECORD, UiTreeRecord> othersCurrentlyBeingAddedToCache) {
-		TreeNodeInfo treeNodeInfo = treeNodeInfoExtractor.getTreeNodeInfo(record);
+	protected void addParentLinkToUiRecord(RECORD record, UiTreeRecord uiTreeRecord) {
+		TreeNodeInfo treeNodeInfo = model.getTreeNodeInfo(record);
 		if (treeNodeInfo != null) {
 			RECORD parent = (RECORD) treeNodeInfo.getParent();
 			if (parent != null) {
-				UiTreeRecord uiParentFromOthers = othersCurrentlyBeingAddedToCache.get(parent);
-				if (uiParentFromOthers != null) {
-					uiTreeRecord.setParentId(uiParentFromOthers.getId());
-				} else {
-					Integer cachedParentUiRecordId = recordCache.getUiRecordIdOrNull(parent);
-					if (cachedParentUiRecordId != null) {
-						uiTreeRecord.setParentId(cachedParentUiRecordId);
-					}
+				UiTreeRecord uiParent = uiRecordsByRecord.get(parent);
+				if (uiParent != null) {
+					uiTreeRecord.setParentId(uiParent.getId());
 				}
 			}
 		}
@@ -174,27 +178,27 @@ private Template getTemplateForRecord(RECORD record) {
 
 	@Override
 	public UiComponent createUiComponent() {
-		UiTree uiTree = new UiTree(getId());
+		UiTree uiTree = new UiTree();
 		mapAbstractUiComponentProperties(uiTree);
-		List<RECORD> records = model.getRecords(null);
+		List<RECORD> records = model.getRecords();
 		if (records != null) {
-			CacheManipulationHandle<List<UiTreeRecord>> cacheResponse = recordCache.replaceRecords(records);
-			cacheResponse.commit();
-			uiTree.setInitialData(cacheResponse.getResult());
+			uiTree.setInitialData(createOrUpdateUiRecords(records));
 		}
 
-		uiTree.setSelectedNodeId(this.recordCache.getUiRecordIdOrNull(this.selectedNode));
+		if (this.selectedNode != null) {
+			uiTree.setSelectedNodeId(uiRecordsByRecord.get(this.selectedNode).getId());
+		}
 
 		// Note: it is important that the uiTemplates get set after the uiRecords are created, because custom templates (templateDecider) may lead to additional template registrations.
 		uiTree.setTemplates(templateIdsByTemplate.entrySet().stream()
 				.collect(Collectors.toMap(Map.Entry::getValue, entry -> entry.getKey().createUiTemplate())));
 
 		uiTree.setDefaultTemplateId(templateIdsByTemplate.get(entryTemplate));
-		uiTree.setAnimate(animate);
+		uiTree.setAnimate(animated);
 		uiTree.setShowExpanders(showExpanders);
 		uiTree.setOpenOnSelection(openOnSelection);
 		uiTree.setEnforceSingleExpandedPath(enforceSingleExpandedPath);
-		uiTree.setTextMatchingMode(textMatchingMode.toUiTextMatchingMode());
+		uiTree.setContextMenuEnabled(contextMenuProvider != null);
 		uiTree.setIndentation(indentation);
 		return uiTree;
 	}
@@ -202,37 +206,54 @@ public UiComponent createUiComponent() {
 	@Override
 	public void handleUiEvent(UiEvent event) {
 		switch (event.getUiEventType()) {
-			case UI_TREE_NODE_SELECTED:
+			case UI_TREE_NODE_SELECTED: {
 				UiTree.NodeSelectedEvent nodeSelectedEvent = (UiTree.NodeSelectedEvent) event;
-				RECORD record = recordCache.getRecordByClientId(nodeSelectedEvent.getNodeId());
-				onNodeSelected.fire(record);
+				RECORD record = getRecordByUiId(nodeSelectedEvent.getNodeId());
+				selectedNode = record;
+				if (record != null) {
+					onNodeSelected.fire(record);
+				}
+				break;
+			}
+			case UI_TREE_NODE_EXPANSION_CHANGED: {
+				UiTree.NodeExpansionChangedEvent e = (UiTree.NodeExpansionChangedEvent) event;
+				RECORD record = getRecordByUiId(e.getNodeId());
+				selectedNode = record;
+				if (record != null) {
+					onNodeExpansionChanged.fire(new TreeNodeExpansionEvent<>(record, e.getExpanded()));
+				}
 				break;
-			case UI_TREE_REQUEST_TREE_DATA:
+			}
+			case UI_TREE_REQUEST_TREE_DATA: {
 				UiTree.RequestTreeDataEvent requestTreeDataEvent = (UiTree.RequestTreeDataEvent) event;
-				RECORD parentNode = recordCache.getRecordByClientId(requestTreeDataEvent.getParentNodeId());
+				RECORD parentNode = getRecordByUiId(requestTreeDataEvent.getParentNodeId());
 				if (parentNode != null) {
 					List<RECORD> children = model.getChildRecords(parentNode);
-					CacheManipulationHandle<List<UiTreeRecord>> cacheResponse = recordCache.addRecords(children);
+					List<UiTreeRecord> uiChildren = createOrUpdateUiRecords(children);
 					if (isRendered()) {
-						getSessionContext().queueCommand(new UiTree.BulkUpdateCommand(getId(), Collections.emptyList(), cacheResponse.getResult()), aVoid -> cacheResponse.commit());
-					} else {
-						cacheResponse.commit();
+						getSessionContext().queueCommand(new UiTree.BulkUpdateCommand(getId(), Collections.emptyList(), uiChildren));
 					}
 				}
 				break;
-			case UI_TREE_TEXT_INPUT:
-				UiTree.TextInputEvent textInputEvent = (UiTree.TextInputEvent) event;
-				if (model != null) {
-					List<RECORD> records = model.getRecords(textInputEvent.getText());
-					CacheManipulationHandle<List<UiTreeRecord>> cacheResponse = recordCache.replaceRecords(records);
-					if (isRendered()) {
-						getSessionContext().queueCommand(new UiTree.ReplaceDataCommand(getId(), cacheResponse.getResult()), aVoid -> cacheResponse.commit());
-					} else {
-						cacheResponse.commit();
+			}
+			case UI_TREE_CONTEXT_MENU_REQUESTED: {
+				UiTree.ContextMenuRequestedEvent e = (UiTree.ContextMenuRequestedEvent) event;
+				lastSeenContextMenuRequestId = e.getRequestId();
+				if (contextMenuProvider == null) {
+					closeContextMenu();
+				} else {
+					RECORD record = getRecordByUiId(e.getRecordId());
+					if (record != null) {
+						Component contextMenuContent = contextMenuProvider.apply(record);
+						if (contextMenuContent != null) {
+							queueCommandIfRendered(() -> new UiInfiniteItemView2.SetContextMenuContentCommand(getId(), e.getRequestId(), contextMenuContent.createUiReference()));
+						} else {
+							queueCommandIfRendered(() -> new UiInfiniteItemView2.CloseContextMenuCommand(getId(), e.getRequestId()));
+						}
 					}
 				}
-				this.onTextInput.fire(textInputEvent.getText());
-
+				break;
+			}
 		}
 	}
 
@@ -241,9 +262,9 @@ public RECORD getSelectedNode() {
 	}
 
 	public void setSelectedNode(RECORD selectedNode) {
-		Integer uiRecord = recordCache.getUiRecordIdOrNull(selectedNode);
+		int uiRecordId = uiRecordsByRecord.get(selectedNode) != null ? uiRecordsByRecord.get(selectedNode).getId() : -1;
 		this.selectedNode = selectedNode;
-		queueCommandIfRendered(() -> new UiTree.SetSelectedNodeCommand(getId(), uiRecord));
+		queueCommandIfRendered(() -> new UiTree.SetSelectedNodeCommand(getId(), uiRecordId));
 	}
 
 	public TreeModel<RECORD> getModel() {
@@ -258,20 +279,19 @@ public void setModel(TreeModel<RECORD> model) {
 	}
 
 	private void refresh() {
-		if (isRendered()) {
-			List<RECORD> records = model.getRecords(null);
-			CacheManipulationHandle<List<UiTreeRecord>> cacheResponse = recordCache.replaceRecords(records);
-			getSessionContext().queueCommand(new UiTree.ReplaceDataCommand(getId(), cacheResponse.getResult()), aVoid -> cacheResponse.commit());
-		}
+		modelAllNodesChangedListener.run();
 	}
 
-	public boolean isAnimate() {
-		return animate;
+	public boolean isAnimated() {
+		return animated;
 	}
 
-	public void setAnimate(boolean animate) {
-		this.animate = animate;
-		reRenderIfRendered();
+	public void setAnimated(boolean animated) {
+		boolean changed = animated != this.animated;
+		this.animated = animated;
+		if (changed) {
+			reRenderIfRendered();
+		}
 	}
 
 	public boolean isShowExpanders() {
@@ -279,8 +299,11 @@ public boolean isShowExpanders() {
 	}
 
 	public void setShowExpanders(boolean showExpanders) {
+		boolean changed = showExpanders != this.showExpanders;
 		this.showExpanders = showExpanders;
-		reRenderIfRendered();
+		if (changed) {
+			reRenderIfRendered();
+		}
 	}
 
 	public boolean isOpenOnSelection() {
@@ -288,8 +311,11 @@ public boolean isOpenOnSelection() {
 	}
 
 	public void setOpenOnSelection(boolean openOnSelection) {
+		boolean changed = openOnSelection != this.openOnSelection;
 		this.openOnSelection = openOnSelection;
-		reRenderIfRendered();
+		if (changed) {
+			reRenderIfRendered();
+		}
 	}
 
 	public boolean isEnforceSingleExpandedPath() {
@@ -297,17 +323,23 @@ public boolean isEnforceSingleExpandedPath() {
 	}
 
 	public void setEnforceSingleExpandedPath(boolean enforceSingleExpandedPath) {
+		boolean changed = enforceSingleExpandedPath != this.enforceSingleExpandedPath;
 		this.enforceSingleExpandedPath = enforceSingleExpandedPath;
-		reRenderIfRendered();
+		if (changed) {
+			reRenderIfRendered();
+		}
 	}
 
-	public TextMatchingMode getTextMatchingMode() {
-		return textMatchingMode;
+	public Function<RECORD, Component> getContextMenuProvider() {
+		return contextMenuProvider;
 	}
 
-	public void setTextMatchingMode(TextMatchingMode textMatchingMode) {
-		this.textMatchingMode = textMatchingMode;
-		reRenderIfRendered();
+	public void setContextMenuProvider(Function<RECORD, Component> contextMenuProvider) {
+		this.contextMenuProvider = contextMenuProvider;
+	}
+
+	public void closeContextMenu() {
+		queueCommandIfRendered(() -> new UiInfiniteItemView2.CloseContextMenuCommand(getId(), this.lastSeenContextMenuRequestId));
 	}
 
 	public int getIndentation() {
@@ -315,16 +347,23 @@ public int getIndentation() {
 	}
 
 	public void setIndentation(int indentation) {
+		boolean changed = indentation != this.indentation;
 		this.indentation = indentation;
-		reRenderIfRendered();
+		if (changed) {
+			reRenderIfRendered();
+		}
 	}
 
-	public PropertyExtractor<RECORD> getPropertyExtractor() {
-		return propertyExtractor;
+	public PropertyProvider<RECORD> getPropertyProvider() {
+		return propertyProvider;
+	}
+
+	public void setPropertyProvider(PropertyProvider<RECORD> propertyProvider) {
+		this.propertyProvider = propertyProvider;
 	}
 
 	public void setPropertyExtractor(PropertyExtractor<RECORD> propertyExtractor) {
-		this.propertyExtractor = propertyExtractor;
+		this.setPropertyProvider(propertyExtractor);
 	}
 
 	public Template getEntryTemplate() {
@@ -354,11 +393,11 @@ public void setRecordToStringFunction(Function<RECORD, String> recordToStringFun
 		reRenderIfRendered();
 	}
 
-	public TreeNodeInfoExtractor<RECORD> getTreeNodeInfoExtractor() {
-		return treeNodeInfoExtractor;
+	private RECORD getRecordByUiId(int uiRecordId) {
+		// no fast implementation needed! only called on user click
+		return uiRecordsByRecord.keySet().stream()
+				.filter(rr -> uiRecordsByRecord.get(rr).getId() == uiRecordId)
+				.findFirst().orElse(null);
 	}
 
-	public void setTreeNodeInfoExtractor(TreeNodeInfoExtractor<RECORD> treeNodeInfoExtractor) {
-		this.treeNodeInfoExtractor = treeNodeInfoExtractor;
-	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/tree/TreeNodeExpansionEvent.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/tree/TreeNodeExpansionEvent.java
new file mode 100644
index 000000000..ba4a702b1
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/tree/TreeNodeExpansionEvent.java
@@ -0,0 +1,39 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.tree;
+
+public class TreeNodeExpansionEvent<RECORD> {
+
+	private final RECORD node;
+	private final boolean expanded;
+
+	public TreeNodeExpansionEvent(RECORD node, boolean expanded) {
+		this.node = node;
+		this.expanded = expanded;
+	}
+
+	public RECORD getNode() {
+		return node;
+	}
+
+	public boolean isExpanded() {
+		return expanded;
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/tree/TreeNodeInfo.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/tree/TreeNodeInfo.java
index 454a7ce01..06e7d36cb 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/tree/TreeNodeInfo.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/tree/TreeNodeInfo.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -23,8 +23,21 @@ public interface TreeNodeInfo {
 
 	Object getParent();
 
-	boolean isLazyChildren();
+	/**
+	 * Whether or not this node is selectable by the user.
+	 */
+	default boolean isSelectable() {
+		return true;
+	}
 
+	/**
+	 * Wheter or not this node is <b>initially</b> expanded. The user can of course change the expansion state.
+	 */
 	boolean isExpanded();
 
+	/**
+	 * Whether or not this node has children that are not sent to the client directly but need to be lazy-loaded.
+	 */
+	boolean isLazyChildren();
+
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/tree/TreeNodeInfoExtractor.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/tree/TreeNodeInfoExtractor.java
index 827a30373..39ddca293 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/tree/TreeNodeInfoExtractor.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/tree/TreeNodeInfoExtractor.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,8 +19,18 @@
  */
 package org.teamapps.ux.component.tree;
 
+import org.teamapps.ux.component.node.TreeNode;
+
 public interface TreeNodeInfoExtractor<RECORD> {
 
-	TreeNodeInfo getTreeNodeInfo(RECORD record);
+	TreeNodeInfo DEFAULT_TREE_NODE_INFO = new TreeNodeInfoImpl<>(null, false, true, false);
+
+	default TreeNodeInfo getTreeNodeInfo(RECORD record) {
+		if (record instanceof TreeNode) {
+			return (TreeNode) record;
+		} else {
+			return DEFAULT_TREE_NODE_INFO;
+		}
+	};
 
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/tree/TreeNodeInfoImpl.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/tree/TreeNodeInfoImpl.java
new file mode 100644
index 000000000..ad9d3c0bb
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/tree/TreeNodeInfoImpl.java
@@ -0,0 +1,68 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.tree;
+
+public class TreeNodeInfoImpl<PARENT> implements TreeNodeInfo {
+
+	private final PARENT parent;
+	private final boolean isExpanded;
+	private final boolean selectable;
+	private final boolean lazyChildren;
+
+	public TreeNodeInfoImpl(PARENT parent) {
+		this(parent, false, true, false);
+	}
+
+	public TreeNodeInfoImpl(PARENT parent, boolean isExpanded) {
+		this(parent, isExpanded, true, false);
+	}
+
+	public TreeNodeInfoImpl(PARENT parent, boolean isExpanded, boolean selectable) {
+		this(parent, isExpanded, selectable, false);
+	}
+
+	public TreeNodeInfoImpl(PARENT parent, boolean isExpanded, boolean selectable, boolean lazyChildren) {
+		this.parent = parent;
+		this.isExpanded = isExpanded;
+		this.selectable = selectable;
+		this.lazyChildren = lazyChildren;
+	}
+
+	@Override
+	public PARENT getParent() {
+		return parent;
+	}
+
+	@Override
+	public boolean isExpanded() {
+		return isExpanded;
+	}
+
+	@Override
+	public boolean isSelectable() {
+		return selectable;
+	}
+
+	@Override
+	public boolean isLazyChildren() {
+		return lazyChildren;
+	}
+
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/AudioTrackConstraints.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/AudioTrackConstraints.java
new file mode 100644
index 000000000..3542231cf
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/AudioTrackConstraints.java
@@ -0,0 +1,130 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.webrtc;
+
+import org.teamapps.dto.UiAudioTrackConstraints;
+
+import java.util.Objects;
+
+public class AudioTrackConstraints {
+
+	private String deviceId = null;
+	private int channelCount = 1;
+	private boolean autoGainControl = true;
+	/**
+	 * Factor multiplied to audio samples.
+	 * 1 means unchanged.
+	 */
+	private double gainFactor = 1;
+	private boolean echoCancellation = true;
+	private boolean noiseSuppression = true;
+
+	public AudioTrackConstraints() {
+	}
+
+	public AudioTrackConstraints(boolean autoGainControl, boolean echoCancellation, boolean noiseSuppression) {
+		this.autoGainControl = autoGainControl;
+		this.echoCancellation = echoCancellation;
+		this.noiseSuppression = noiseSuppression;
+	}
+
+	public AudioTrackConstraints(int channelCount, boolean autoGainControl, boolean echoCancellation, boolean noiseSuppression) {
+		this.channelCount = channelCount;
+		this.autoGainControl = autoGainControl;
+		this.echoCancellation = echoCancellation;
+		this.noiseSuppression = noiseSuppression;
+	}
+
+	public UiAudioTrackConstraints createUiAudioTrackConstraints() {
+		UiAudioTrackConstraints ui = new UiAudioTrackConstraints();
+		ui.setChannelCount(channelCount);
+		ui.setAutoGainControl(autoGainControl);
+		ui.setGainFactor(gainFactor);
+		ui.setEchoCancellation(echoCancellation);
+		ui.setNoiseSuppression(noiseSuppression);
+		ui.setDeviceId(deviceId);
+		return ui;
+	}
+
+	public int getChannelCount() {
+		return channelCount;
+	}
+
+	public void setChannelCount(int channelCount) {
+		this.channelCount = channelCount;
+	}
+
+	public boolean isAutoGainControl() {
+		return autoGainControl;
+	}
+
+	public void setAutoGainControl(boolean autoGainControl) {
+		this.autoGainControl = autoGainControl;
+	}
+
+	public boolean isEchoCancellation() {
+		return echoCancellation;
+	}
+
+	public void setEchoCancellation(boolean echoCancellation) {
+		this.echoCancellation = echoCancellation;
+	}
+
+	public boolean isNoiseSuppression() {
+		return noiseSuppression;
+	}
+
+	public void setNoiseSuppression(boolean noiseSuppression) {
+		this.noiseSuppression = noiseSuppression;
+	}
+
+	public String getDeviceId() {
+		return deviceId;
+	}
+
+	public void setDeviceId(String deviceId) {
+		this.deviceId = deviceId;
+	}
+
+	public double getGainFactor() {
+		return gainFactor;
+	}
+
+	public void setGainFactor(double gainFactor) {
+		this.gainFactor = gainFactor;
+	}
+
+	@Override
+	public boolean equals(Object o) {
+		if (this == o) {
+			return true;
+		}
+		if (!(o instanceof AudioTrackConstraints)) {
+			return false;
+		}
+		AudioTrackConstraints that = (AudioTrackConstraints) o;
+		return channelCount == that.channelCount && autoGainControl == that.autoGainControl && Double.compare(that.gainFactor, gainFactor) == 0 && echoCancellation == that.echoCancellation && noiseSuppression == that.noiseSuppression && Objects.equals(deviceId, that.deviceId);
+	}
+
+	@Override
+	public int hashCode() {
+		return Objects.hash(deviceId, channelCount, autoGainControl, gainFactor, echoCancellation, noiseSuppression);
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/MediaRetrievalFailureReason.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/MediaRetrievalFailureReason.java
new file mode 100644
index 000000000..4f7c93680
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/MediaRetrievalFailureReason.java
@@ -0,0 +1,33 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.webrtc;
+
+import org.teamapps.dto.UiMediaRetrievalFailureReason;
+
+public enum MediaRetrievalFailureReason {
+	MIC_MEDIA_RETRIEVAL_FAILED,
+	CAM_MEDIA_RETRIEVAL_FAILED,
+	DISPLAY_MEDIA_RETRIEVAL_FAILED,
+	VIDEO_MIXING_FAILED;
+
+	public UiMediaRetrievalFailureReason toUiMediaRetrievalFailureReason() {
+		return UiMediaRetrievalFailureReason.valueOf(this.name());
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/MediaSoupServerUrlAndToken.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/MediaSoupServerUrlAndToken.java
new file mode 100644
index 000000000..bdf10ac47
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/MediaSoupServerUrlAndToken.java
@@ -0,0 +1,46 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.webrtc;
+
+public class MediaSoupServerUrlAndToken {
+
+	private final String serverUrl;
+	private final int worker;
+	private final String token;
+
+	public MediaSoupServerUrlAndToken(String serverUrl, int worker, String token) {
+		this.serverUrl = serverUrl;
+		this.worker = worker;
+		this.token = token;
+	}
+
+	public String getServerUrl() {
+		return serverUrl;
+	}
+
+	public int getWorker() {
+		return worker;
+	}
+
+	public String getToken() {
+		return token;
+	}
+
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/MediaSoupV3WebRtcClient.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/MediaSoupV3WebRtcClient.java
new file mode 100644
index 000000000..3ad39f95d
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/MediaSoupV3WebRtcClient.java
@@ -0,0 +1,377 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.webrtc;
+
+import org.teamapps.common.format.Color;
+import org.teamapps.dto.*;
+import org.teamapps.event.Event;
+import org.teamapps.icons.Icon;
+import org.teamapps.ux.component.AbstractComponent;
+import org.teamapps.ux.component.Component;
+import org.teamapps.ux.component.toolbutton.ToolButton;
+import org.teamapps.ux.session.SessionContext;
+
+import java.util.Collections;
+import java.util.List;
+import java.util.Objects;
+import java.util.concurrent.CompletableFuture;
+import java.util.function.Supplier;
+import java.util.stream.Collectors;
+
+public class MediaSoupV3WebRtcClient extends AbstractComponent {
+
+	public final Event<MediaRetrievalFailureReason> onSourceMediaTrackRetrievalFailed = new Event<>();
+	public final Event<SourceMediaTrackType> onSourceMediaTrackEnded = new Event<>();
+	public final Event<TrackPublishingSuccessfulEventData> onTrackPublishingSuccessful = new Event<>();
+	public final Event<TrackPublishingFailedEventData> onTrackPublishingFailed = new Event<>();
+
+	public final Event<WebRtcStreamType> onPublishedStreamEnded = new Event<>();
+
+	public final Event<Void> onSubscribingSuccessful = new Event<>();
+	public final Event<String> onSubscribingFailed = new Event<>();
+
+	public final Event<Boolean> onConnectionStateChanged = new Event<>();
+	public final Event<Boolean> onVoiceActivityChanged = new Event<>();
+	public final Event<Void> onClicked = new Event<>();
+
+	private boolean activityLineVisible;
+	private Color activityInactiveColor;
+	private Color activityActiveColor;
+	private boolean active;
+
+	private List<ToolButton> toolButtons = Collections.emptyList();
+	private List<Icon> icons = Collections.emptyList();
+	private String caption;
+	private String noVideoImageUrl;
+
+	private Float displayAreaAspectRatio; // width / height. Makes the display always use this aspect ratio. If null, use 100% of available space
+
+	private double playbackVolume = 1;
+
+	private UiMediaSoupPublishingParameters publishingParameters;
+	private UiMediaSoupPlaybackParameters playbackParameters;
+
+	private Supplier<Component> contextMenuProvider = null;
+	private int lastSeenContextMenuRequestId;
+
+	private boolean bitrateDisplayEnabled;
+
+	private int forceRefreshCount = 0;
+
+	public MediaSoupV3WebRtcClient() {
+	}
+
+	@Override
+	public UiMediaSoupV3WebRtcClient createUiComponent() {
+		UiMediaSoupV3WebRtcClient ui = new UiMediaSoupV3WebRtcClient();
+		mapAbstractUiComponentProperties(ui);
+		ui.setPublishingParameters(publishingParameters);
+		ui.setPlaybackParameters(playbackParameters);
+		ui.setActivityLineVisible(activityLineVisible);
+		ui.setActivityInactiveColor(activityInactiveColor != null ? activityInactiveColor.toHtmlColorString() : null);
+		ui.setActivityActiveColor(activityActiveColor != null ? activityActiveColor.toHtmlColorString() : null);
+		ui.setToolButtons(toolButtons.stream().map(AbstractComponent::createUiReference).collect(Collectors.toList()));
+		ui.setIcons(icons.stream().map(icon -> getSessionContext().resolveIcon(icon)).collect(Collectors.toList()));
+		ui.setBitrateDisplayEnabled(bitrateDisplayEnabled);
+		ui.setCaption(caption);
+		ui.setNoVideoImageUrl(noVideoImageUrl);
+		ui.setDisplayAreaAspectRatio(displayAreaAspectRatio);
+		ui.setPlaybackVolume(playbackVolume);
+		ui.setContextMenuEnabled(contextMenuProvider != null);
+		ui.setForceRefreshCount(forceRefreshCount);
+		return ui;
+	}
+
+	@Override
+	public void handleUiEvent(UiEvent event) {
+		switch (event.getUiEventType()) {
+			case UI_MEDIA_SOUP_V3_WEB_RTC_CLIENT_VOICE_ACTIVITY_CHANGED: {
+				UiMediaSoupV3WebRtcClient.VoiceActivityChangedEvent e = (UiMediaSoupV3WebRtcClient.VoiceActivityChangedEvent) event;
+				this.onVoiceActivityChanged.fire(e.getActive());
+				break;
+			}
+			case UI_MEDIA_SOUP_V3_WEB_RTC_CLIENT_CLICKED: {
+				UiMediaSoupV3WebRtcClient.ClickedEvent e = (UiMediaSoupV3WebRtcClient.ClickedEvent) event;
+				this.onClicked.fire();
+				break;
+			}
+			case UI_MEDIA_SOUP_V3_WEB_RTC_CLIENT_SOURCE_MEDIA_TRACK_RETRIEVAL_FAILED: {
+				UiMediaSoupV3WebRtcClient.SourceMediaTrackRetrievalFailedEvent e = (UiMediaSoupV3WebRtcClient.SourceMediaTrackRetrievalFailedEvent) event;
+				this.onSourceMediaTrackRetrievalFailed.fire(MediaRetrievalFailureReason.valueOf(e.getReason().name()));
+				break;
+			}
+			case UI_MEDIA_SOUP_V3_WEB_RTC_CLIENT_SOURCE_MEDIA_TRACK_ENDED: {
+				UiMediaSoupV3WebRtcClient.SourceMediaTrackEndedEvent e = (UiMediaSoupV3WebRtcClient.SourceMediaTrackEndedEvent) event;
+				this.onSourceMediaTrackEnded.fire(SourceMediaTrackType.valueOf(e.getTrackType().name()));
+				break;
+			}
+			case UI_MEDIA_SOUP_V3_WEB_RTC_CLIENT_TRACK_PUBLISHING_SUCCESSFUL: {
+				UiMediaSoupV3WebRtcClient.TrackPublishingSuccessfulEvent e = (UiMediaSoupV3WebRtcClient.TrackPublishingSuccessfulEvent) event;
+				this.onTrackPublishingSuccessful.fire(new TrackPublishingSuccessfulEventData(e.getAudio(), e.getVideo()));
+				break;
+			}
+			case UI_MEDIA_SOUP_V3_WEB_RTC_CLIENT_TRACK_PUBLISHING_FAILED: {
+				UiMediaSoupV3WebRtcClient.TrackPublishingFailedEvent e = (UiMediaSoupV3WebRtcClient.TrackPublishingFailedEvent) event;
+				this.onTrackPublishingFailed.fire(new TrackPublishingFailedEventData(e.getAudio(), e.getVideo(), e.getErrorMessage()));
+				break;
+			}
+			case UI_MEDIA_SOUP_V3_WEB_RTC_CLIENT_SUBSCRIBING_SUCCESSFUL: {
+				UiMediaSoupV3WebRtcClient.SubscribingSuccessfulEvent e = (UiMediaSoupV3WebRtcClient.SubscribingSuccessfulEvent) event;
+				this.onSubscribingSuccessful.fire();
+				break;
+			}
+			case UI_MEDIA_SOUP_V3_WEB_RTC_CLIENT_SUBSCRIBING_FAILED: {
+				UiMediaSoupV3WebRtcClient.SubscribingFailedEvent e = (UiMediaSoupV3WebRtcClient.SubscribingFailedEvent) event;
+				this.onSubscribingFailed.fire(e.getErrorMessage());
+				break;
+			}
+			case UI_MEDIA_SOUP_V3_WEB_RTC_CLIENT_CONNECTION_STATE_CHANGED:
+				this.onConnectionStateChanged.fire(((UiMediaSoupV3WebRtcClient.ConnectionStateChangedEvent) event).getConnected());
+				break;
+			case UI_MEDIA_SOUP_V3_WEB_RTC_CLIENT_CONTEXT_MENU_REQUESTED: {
+				UiMediaSoupV3WebRtcClient.ContextMenuRequestedEvent e = (UiMediaSoupV3WebRtcClient.ContextMenuRequestedEvent) event;
+				lastSeenContextMenuRequestId = e.getRequestId();
+				if (contextMenuProvider != null) {
+					Component contextMenuContent = contextMenuProvider.get();
+					if (contextMenuContent != null) {
+						queueCommandIfRendered(() -> new UiInfiniteItemView.SetContextMenuContentCommand(getId(), e.getRequestId(), contextMenuContent.createUiReference()));
+					} else {
+						queueCommandIfRendered(() -> new UiInfiniteItemView.CloseContextMenuCommand(getId(), e.getRequestId()));
+					}
+				} else {
+					closeContextMenu();
+				}
+				break;
+			}
+		}
+	}
+
+	public void publish(
+			String streamUuid, String serverUrl, int worker, String token,
+			AudioTrackConstraints audioConstraints,
+			VideoTrackConstraints videoConstraints,
+			ScreenSharingConstraints screenSharingConstraints,
+			long maxBitrate, boolean simulcast,
+			long keyFrameRequestDelayMillis) {
+		UiMediaSoupPublishingParameters params = new UiMediaSoupPublishingParameters();
+		params.setServer(new UiMediaServerUrlAndToken(serverUrl, worker, token));
+		params.setStreamUuid(streamUuid);
+		params.setAudioConstraints(audioConstraints != null ? audioConstraints.createUiAudioTrackConstraints() : null);
+		params.setVideoConstraints(videoConstraints != null ? videoConstraints.createUiVideoTrackConstraints() : null);
+		params.setScreenSharingConstraints(screenSharingConstraints != null ? screenSharingConstraints.createUiScreenSharingConstraints() : null);
+		params.setMaxBitrate(maxBitrate);
+		params.setSimulcast(simulcast);
+		params.setKeyFrameRequestDelay(keyFrameRequestDelayMillis);
+		this.publishingParameters = params;
+		update();
+	}
+
+	public void play(
+			String streamUuid,
+			MediaSoupServerUrlAndToken server,
+			boolean audio, boolean video,
+			long minBitrate, long maxBitrate
+	) {
+		this.play(streamUuid, server, null, audio, video, minBitrate, maxBitrate);
+	}
+
+	public void play(
+			String streamUuid,
+			MediaSoupServerUrlAndToken server,
+			MediaSoupServerUrlAndToken origin,
+			boolean audio, boolean video,
+			long minBitrate, long maxBitrate
+	) {
+		UiMediaSoupPlaybackParameters params = new UiMediaSoupPlaybackParameters();
+		params.setStreamUuid(streamUuid);
+		params.setServer(new UiMediaServerUrlAndToken(server.getServerUrl(), server.getWorker(), server.getToken()));
+		params.setOrigin(origin != null ? new UiMediaServerUrlAndToken(origin.getServerUrl(), origin.getWorker(), origin.getToken()) : null);
+		params.setAudio(audio);
+		params.setVideo(video);
+		params.setMinBitrate(minBitrate);
+		params.setMaxBitrate(maxBitrate);
+		this.playbackParameters = params;
+		update();
+	}
+
+	public void stop() {
+		publishingParameters = null;
+		playbackParameters = null;
+		update();
+	}
+
+	private void update() {
+		queueCommandIfRendered(() -> new UiMediaSoupV3WebRtcClient.UpdateCommand(getId(), createUiComponent()));
+	}
+
+	public boolean isActivityLineVisible() {
+		return activityLineVisible;
+	}
+
+	public void setActivityLineVisible(boolean activityLineVisible) {
+		this.activityLineVisible = activityLineVisible;
+		update();
+	}
+
+	public Color getActivityInactiveColor() {
+		return activityInactiveColor;
+	}
+
+	public void setActivityInactiveColor(Color activityInactiveColor) {
+		this.activityInactiveColor = activityInactiveColor;
+		update();
+	}
+
+	public Color getActivityActiveColor() {
+		return activityActiveColor;
+	}
+
+	public void setActivityActiveColor(Color activityActiveColor) {
+		this.activityActiveColor = activityActiveColor;
+		update();
+	}
+
+	public boolean isActive() {
+		return active;
+	}
+
+	public void setActive(boolean active) {
+		if (active != this.active) {
+			this.active = active;
+			queueCommandIfRendered(() -> new UiMediaSoupV3WebRtcClient.SetActiveCommand(getId(), active));
+		}
+	}
+
+	public List<Icon> getIcons() {
+		return icons;
+	}
+
+	public void setIcons(List<Icon> icons) {
+		if (icons == null) {
+			icons = Collections.emptyList();
+		}
+		if (!Objects.equals(icons, this.icons)) {
+			this.icons = List.copyOf(icons);
+			update();
+		}
+	}
+
+	public List<ToolButton> getToolButtons() {
+		return toolButtons;
+	}
+
+	public void setToolButtons(List<ToolButton> toolButtons) {
+		if (toolButtons == null) {
+			toolButtons = Collections.emptyList();
+		}
+		if (!Objects.equals(toolButtons, this.toolButtons)) {
+			this.toolButtons = List.copyOf(toolButtons);
+			update();
+		}
+	}
+
+	public String getCaption() {
+		return caption;
+	}
+
+	public void setCaption(String caption) {
+		if (!Objects.equals(caption, this.caption)) {
+			this.caption = caption;
+			update();
+		}
+	}
+
+	public String getNoVideoImageUrl() {
+		return noVideoImageUrl;
+	}
+
+	public void setNoVideoImageUrl(String noVideoImageUrl) {
+		if (!Objects.equals(noVideoImageUrl, this.noVideoImageUrl)) {
+			this.noVideoImageUrl = noVideoImageUrl;
+			update();
+		}
+	}
+
+	public Float getDisplayAreaAspectRatio() {
+		return displayAreaAspectRatio;
+	}
+
+	public void setDisplayAreaAspectRatio(Float displayAreaAspectRatio) {
+		if (!Objects.equals(displayAreaAspectRatio, this.displayAreaAspectRatio)) {
+			this.displayAreaAspectRatio = displayAreaAspectRatio;
+			update();
+		}
+	}
+
+	public double getPlaybackVolume() {
+		return playbackVolume;
+	}
+
+	public void setPlaybackVolume(double playbackVolume) {
+		if (playbackVolume != this.playbackVolume) {
+			this.playbackVolume = playbackVolume;
+			update();
+		}
+	}
+
+	public boolean isBitrateDisplayEnabled() {
+		return bitrateDisplayEnabled;
+	}
+
+	public void setBitrateDisplayEnabled(boolean bitrateDisplayEnabled) {
+		if (bitrateDisplayEnabled != this.bitrateDisplayEnabled) {
+			this.bitrateDisplayEnabled = bitrateDisplayEnabled;
+			update();
+		}
+	}
+
+	public static CompletableFuture<List<UiMediaDeviceInfo>> enumerateDevices() {
+		CompletableFuture<List<UiMediaDeviceInfo>> future = new CompletableFuture<>();
+		SessionContext.current().queueCommand(new UiMediaSoupV3WebRtcClient.EnumerateDevicesCommand(), value -> {
+			future.complete(value);
+		});
+		return future;
+	}
+
+	public Supplier<Component> getContextMenuProvider() {
+		return contextMenuProvider;
+	}
+
+	public void setContextMenuProvider(Supplier<Component> contextMenuProvider) {
+		this.contextMenuProvider = contextMenuProvider;
+	}
+
+	public void closeContextMenu() {
+		queueCommandIfRendered(() -> new UiInfiniteItemView.CloseContextMenuCommand(getId(), this.lastSeenContextMenuRequestId));
+	}
+
+	public void reconnect() {
+		this.forceRefreshCount++;
+		update();
+	}
+
+	public UiMediaSoupPublishingParameters getPublishingParameters() {
+		return publishingParameters;
+	}
+
+	public UiMediaSoupPlaybackParameters getPlaybackParameters() {
+		return playbackParameters;
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/PublishedStreamsStatus.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/PublishedStreamsStatus.java
new file mode 100644
index 000000000..edf6ff0a4
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/PublishedStreamsStatus.java
@@ -0,0 +1,39 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.webrtc;
+
+public class PublishedStreamsStatus {
+
+	private final boolean audio;
+	private final boolean video;
+
+	public PublishedStreamsStatus(boolean audio, boolean video) {
+		this.audio = audio;
+		this.video = video;
+	}
+
+	public boolean isAudio() {
+		return audio;
+	}
+
+	public boolean isVideo() {
+		return video;
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/ScreenSharingConstraints.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/ScreenSharingConstraints.java
new file mode 100644
index 000000000..b6dae7c1a
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/ScreenSharingConstraints.java
@@ -0,0 +1,83 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.webrtc;
+
+import org.teamapps.dto.UiScreenSharingConstraints;
+
+public class ScreenSharingConstraints {
+
+	private int maxWidth = Integer.MAX_VALUE;
+	private int maxHeight = Integer.MAX_VALUE;
+
+	public ScreenSharingConstraints() {
+	}
+
+	public ScreenSharingConstraints(int maxWidth, int maxHeight) {
+		this.maxWidth = maxWidth;
+		this.maxHeight = maxHeight;
+	}
+
+	public UiScreenSharingConstraints createUiScreenSharingConstraints() {
+		UiScreenSharingConstraints ui = new UiScreenSharingConstraints();
+		ui.setMaxWidth(maxWidth);
+		ui.setMaxHeight(maxHeight);
+		return ui;
+	}
+
+	public int getMaxWidth() {
+		return maxWidth;
+	}
+
+	public void setMaxWidth(int maxWidth) {
+		this.maxWidth = maxWidth;
+	}
+
+	public int getMaxHeight() {
+		return maxHeight;
+	}
+
+	public void setMaxHeight(int maxHeight) {
+		this.maxHeight = maxHeight;
+	}
+
+	@Override
+	public boolean equals(Object o) {
+		if (this == o) {
+			return true;
+		}
+		if (o == null || getClass() != o.getClass()) {
+			return false;
+		}
+
+		ScreenSharingConstraints that = (ScreenSharingConstraints) o;
+
+		if (maxWidth != that.maxWidth) {
+			return false;
+		}
+		return maxHeight == that.maxHeight;
+	}
+
+	@Override
+	public int hashCode() {
+		int result = maxWidth;
+		result = 31 * result + maxHeight;
+		return result;
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/TextMatchingMode.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/SourceMediaTrackType.java
similarity index 71%
rename from teamapps-ux/src/main/java/org/teamapps/ux/component/field/TextMatchingMode.java
rename to teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/SourceMediaTrackType.java
index fac4aa2c0..52ebede52 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/field/TextMatchingMode.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/SourceMediaTrackType.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,14 +17,16 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-package org.teamapps.ux.component.field;
+package org.teamapps.ux.component.webrtc;
 
-import org.teamapps.dto.UiTextMatchingMode;
+import org.teamapps.dto.UiSourceMediaTrackType;
 
-public enum TextMatchingMode {
-	PREFIX, PREFIX_WORD, CONTAINS, SIMILARITY;
+public enum SourceMediaTrackType {
 
-	public UiTextMatchingMode toUiTextMatchingMode() {
-		return UiTextMatchingMode.valueOf(name());
+	CAM, MIC, SCREEN;
+
+	public UiSourceMediaTrackType toUiSourceMediaTrackType() {
+		return UiSourceMediaTrackType.valueOf(this.name());
 	}
+
 }
diff --git a/teamapps-icon/src/main/java/org/teamapps/icons/api/StaticIcon.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/TrackPublishingFailedEventData.java
similarity index 53%
rename from teamapps-icon/src/main/java/org/teamapps/icons/api/StaticIcon.java
rename to teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/TrackPublishingFailedEventData.java
index 091592357..038a125ce 100644
--- a/teamapps-icon/src/main/java/org/teamapps/icons/api/StaticIcon.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/TrackPublishingFailedEventData.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,41 +17,38 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-package org.teamapps.icons.api;
+package org.teamapps.ux.component.webrtc;
 
-public class StaticIcon implements Icon {
+public class TrackPublishingFailedEventData {
 
-	private String qualifiedIconId;
+	private final boolean audio;
+	private final boolean video;
+	private final String errorMessage;
 
-	public StaticIcon() {
+	public TrackPublishingFailedEventData(boolean audio, boolean video, String errorMessage) {
+		this.audio = audio;
+		this.video = video;
+		this.errorMessage = errorMessage;
 	}
 
-	public StaticIcon(String qualifiedIconId) {
-		this.qualifiedIconId = qualifiedIconId;
+	public boolean isAudio() {
+		return audio;
 	}
 
-	@Override
-	public String getQualifiedIconId(IconTheme theme, boolean baseStyle) {
-		return qualifiedIconId;
-	}
-
-	@Override
-	public String getQualifiedIconId(IconTheme theme) {
-		return qualifiedIconId;
-	}
-
-	public String getQualifiedIconId() {
-		return qualifiedIconId;
+	public boolean isVideo() {
+		return video;
 	}
 
-	public void setQualifiedIconId(String qualifiedIconId) {
-		this.qualifiedIconId = qualifiedIconId;
+	public String getErrorMessage() {
+		return errorMessage;
 	}
 
 	@Override
 	public String toString() {
-		return "StaticIcon{" +
-				"qualifiedIconId='" + qualifiedIconId + '\'' +
+		return "TrackPublishingFailedEventData{" +
+				"audio=" + audio +
+				", video=" + video +
+				", errorMessage='" + errorMessage + '\'' +
 				'}';
 	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/TrackPublishingSuccessfulEventData.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/TrackPublishingSuccessfulEventData.java
new file mode 100644
index 000000000..9843718b1
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/TrackPublishingSuccessfulEventData.java
@@ -0,0 +1,47 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.webrtc;
+
+public class TrackPublishingSuccessfulEventData {
+
+	private final boolean audio;
+	private final boolean video;
+
+	public TrackPublishingSuccessfulEventData(boolean audio, boolean video) {
+		this.audio = audio;
+		this.video = video;
+	}
+
+	public boolean isAudio() {
+		return audio;
+	}
+
+	public boolean isVideo() {
+		return video;
+	}
+
+	@Override
+	public String toString() {
+		return "TrackPublishingSuccessfulEventData{" +
+				"audio=" + audio +
+				", video=" + video +
+				'}';
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/VideoFacingMode.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/VideoFacingMode.java
new file mode 100644
index 000000000..4d2a7a7f9
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/VideoFacingMode.java
@@ -0,0 +1,35 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.webrtc;
+
+import org.teamapps.dto.UiVideoFacingMode;
+
+public enum VideoFacingMode {
+
+	USER,
+	ENVIRONMENT,
+	LEFT,
+	RIGHT;
+
+	public UiVideoFacingMode toUiVideoFacingMode() {
+		return UiVideoFacingMode.valueOf(name());
+	}
+
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/VideoTrackConstraints.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/VideoTrackConstraints.java
new file mode 100644
index 000000000..d73f3c589
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/VideoTrackConstraints.java
@@ -0,0 +1,119 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.webrtc;
+
+import org.teamapps.dto.UiVideoTrackConstraints;
+
+import java.util.Objects;
+
+public class VideoTrackConstraints {
+
+	private String deviceId = null;
+	private int width = 800;
+	private int height = 600;
+	private VideoFacingMode facingMode = VideoFacingMode.USER;
+	private int frameRate = 20;
+
+	public VideoTrackConstraints() {
+	}
+
+	public VideoTrackConstraints(int width, int height) {
+		this.width = width;
+		this.height = height;
+	}
+
+	public VideoTrackConstraints(int width, int height, VideoFacingMode facingMode, int frameRate) {
+		this.width = width;
+		this.height = height;
+		this.facingMode = facingMode;
+		this.frameRate = frameRate;
+	}
+
+	public UiVideoTrackConstraints createUiVideoTrackConstraints() {
+		UiVideoTrackConstraints ui = new UiVideoTrackConstraints();
+		ui.setHeight(height);
+		ui.setWidth(width);
+		ui.setFacingMode(facingMode.toUiVideoFacingMode());
+		ui.setFrameRate(frameRate);
+		ui.setDeviceId(deviceId);
+		return ui;
+	}
+
+	public int getWidth() {
+		return width;
+	}
+
+	public void setWidth(int width) {
+		this.width = width;
+	}
+
+	public int getHeight() {
+		return height;
+	}
+
+	public void setHeight(int height) {
+		this.height = height;
+	}
+
+	public VideoFacingMode getFacingMode() {
+		return facingMode;
+	}
+
+	public void setFacingMode(VideoFacingMode facingMode) {
+		this.facingMode = facingMode;
+	}
+
+	public int getFrameRate() {
+		return frameRate;
+	}
+
+	public void setFrameRate(int frameRate) {
+		this.frameRate = frameRate;
+	}
+
+	public String getDeviceId() {
+		return deviceId;
+	}
+
+	public void setDeviceId(String deviceId) {
+		this.deviceId = deviceId;
+	}
+
+	@Override
+	public boolean equals(Object o) {
+		if (this == o) {
+			return true;
+		}
+		if (o == null || getClass() != o.getClass()) {
+			return false;
+		}
+		VideoTrackConstraints that = (VideoTrackConstraints) o;
+		return width == that.width &&
+				height == that.height &&
+				frameRate == that.frameRate &&
+				Objects.equals(deviceId, that.deviceId) &&
+				facingMode == that.facingMode;
+	}
+
+	@Override
+	public int hashCode() {
+		return Objects.hash(deviceId, width, height, facingMode, frameRate);
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/WebRtcStreamType.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/WebRtcStreamType.java
new file mode 100644
index 000000000..cdd3aab98
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/WebRtcStreamType.java
@@ -0,0 +1,25 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.webrtc;
+
+public enum WebRtcStreamType {
+	CAM_MIC,
+	DISPLAY
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/apiclient/FilePathInput.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/apiclient/FilePathInput.java
new file mode 100644
index 000000000..ea24cf50d
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/apiclient/FilePathInput.java
@@ -0,0 +1,32 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.webrtc.apiclient;
+
+public class FilePathInput {
+	private final String filePath;
+
+	public FilePathInput(String filePath) {
+		this.filePath = filePath;
+	}
+
+	public String getFilePath() {
+		return filePath;
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/apiclient/KindsByFileInput.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/apiclient/KindsByFileInput.java
new file mode 100644
index 000000000..ca5a005e0
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/apiclient/KindsByFileInput.java
@@ -0,0 +1,50 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.webrtc.apiclient;
+
+public class KindsByFileInput {
+
+	private String filePath;
+	private boolean relativePath;
+
+	public KindsByFileInput() {
+	}
+
+	public KindsByFileInput(String filePath, boolean relativePath) {
+		this.filePath = filePath;
+		this.relativePath = relativePath;
+	}
+
+	public String getFilePath() {
+		return filePath;
+	}
+
+	public void setFilePath(String filePath) {
+		this.filePath = filePath;
+	}
+
+	public boolean isRelativePath() {
+		return relativePath;
+	}
+
+	public void setRelativePath(boolean relativePath) {
+		this.relativePath = relativePath;
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/apiclient/KindsOptionsData.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/apiclient/KindsOptionsData.java
new file mode 100644
index 000000000..918b886b2
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/apiclient/KindsOptionsData.java
@@ -0,0 +1,62 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.webrtc.apiclient;
+
+import java.util.Set;
+
+public class KindsOptionsData {
+	private Set<MediaKind>  kinds;
+	private int width;
+	private int height;
+
+	public KindsOptionsData(Set<MediaKind> kinds, int width, int height) {
+		this.kinds = kinds;
+		this.width = width;
+		this.height = height;
+	}
+
+	public KindsOptionsData() {
+	}
+
+	public Set<MediaKind> getKinds() {
+		return kinds;
+	}
+
+	public void setKinds(Set<MediaKind> kinds) {
+		this.kinds = kinds;
+	}
+
+	public int getWidth() {
+		return width;
+	}
+
+	public void setWidth(int width) {
+		this.width = width;
+	}
+
+	public int getHeight() {
+		return height;
+	}
+
+	public void setHeight(int height) {
+		this.height = height;
+	}
+}
+
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/apiclient/ListData.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/apiclient/ListData.java
new file mode 100644
index 000000000..3891ae857
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/apiclient/ListData.java
@@ -0,0 +1,42 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.webrtc.apiclient;
+
+import java.util.List;
+
+public class ListData {
+
+	private List<String> list;
+
+	public ListData(List<String> list) {
+		this.list = list;
+	}
+
+	public ListData() {
+	}
+
+	public List<String> getList() {
+		return list;
+	}
+
+	public void setList(List<String> list) {
+		this.list = list;
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/media/webrtc/VideoCodec.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/apiclient/MediaKind.java
similarity index 74%
rename from teamapps-ux/src/main/java/org/teamapps/ux/component/media/webrtc/VideoCodec.java
rename to teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/apiclient/MediaKind.java
index a4c9fffc5..bc853fda8 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/media/webrtc/VideoCodec.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/apiclient/MediaKind.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,18 +17,19 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-package org.teamapps.ux.component.media.webrtc;
+package org.teamapps.ux.component.webrtc.apiclient;
 
-import org.teamapps.dto.UiVideoCodec;
+import com.fasterxml.jackson.annotation.JsonValue;
 
-public enum VideoCodec {
+public enum MediaKind {
+	AUDIO, VIDEO;
 
-	H264,
-	VP8,
-	VP9;
-
-	public UiVideoCodec toUiVideoCodec() {
-		return UiVideoCodec.valueOf(this.name());
+	@JsonValue
+	public String jsonValue() {
+		return name().toLowerCase();
 	}
-
 }
+
+
+
+
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/apiclient/MediaSoupV3ApiAction.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/apiclient/MediaSoupV3ApiAction.java
new file mode 100644
index 000000000..090a17d73
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/apiclient/MediaSoupV3ApiAction.java
@@ -0,0 +1,89 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.webrtc.apiclient;
+
+public enum MediaSoupV3ApiAction {
+	GET_SERVER_CONFIGS("getServerConfigs"),
+	CREATE_TRANSPORT("createTransport"),
+	CONNECT_TRANSPORT("connectTransport"),
+	CLOSE_TRANSPORT("closeTransport"),
+	PRODUCE("produce", MediaSoupV3ApiOperation.PUBLISH),
+	CONSUME("consume"),
+	RESUME_CONSUMER("resumeConsumer"),
+	PAUSE_CONSUMER("pauseConsumer"),
+	CLOSE_CONSUMER("closeConsumer"),
+	RESUME_PRODUCER("resumeProducer"),
+	PAUSE_PRODUCER("pauseProducer"),
+	CLOSE_PRODUCER("closeProducer"),
+	FILE_STREAMING("fileStreaming", MediaSoupV3ApiOperation.STREAMING),
+	LIVE_STREAMING("liveStreaming", MediaSoupV3ApiOperation.STREAMING),
+	STOP_FILE_STREAMING("stopFileStreaming", MediaSoupV3ApiOperation.STREAMING),
+	START_RECORDING("startRecording", MediaSoupV3ApiOperation.RECORDING),
+	STOP_RECORDING("stopRecording", MediaSoupV3ApiOperation.RECORDING),
+	CREATE_PIPE_TRANSPORT("createPipeTransport"),
+	CONNECT_PIPE_TRANSPORT("connectPipeTransport"),
+	SET_PREFERRED_LAYERS("setPreferredLayers"),
+	SET_MAX_INCOMING_BITRATE("setMaxIncomingBitrate"),
+	PRODUCERS_STATS("producersStats"),
+	CONSUMERS_STATS("consumersStats"),
+	TRANSPORT_STATS("transportStats"),
+	PIPE_TO_REMOTE_PRODUCER("pipeToRemoteProducer"),
+	PIPE_FROM_REMOTE_PRODUCER("pipeFromRemoteProducer"),
+	WORKER_LOAD("workerLoad"),
+	NUM_WORKERS("numWorkers"),
+	RECORDED_STREAMS("recordedStreams", MediaSoupV3ApiOperation.RECORDING),
+	STREAM_RECORDINGS("streamRecordings", MediaSoupV3ApiOperation.RECORDING),
+	DELETE_STREAM_RECORDINGS("deleteStreamRecordings", MediaSoupV3ApiOperation.RECORDING),
+	DELETE_RECORDING("deleteRecording"),
+	PUSH_TO_SERVER_INPUTS("pushToServerInputs"),
+	PULL_FROM_SERVER_INPUTS("pullFromServerInputs"),
+	PUSH_TO_SERVER_OPTIONS("pushToServerOptions"),
+	PUSH_TO_SERVER("pushToServer"),
+	KINDS_BY_FILE("kindsByFile"),
+	REQUEST_KEYFRAME("requestKeyframe"),
+	LISTEN_STREAM_STARTED("listenStreamStarted"),
+	LISTEN_STREAM_STOPPED("listenStreamStopped"),
+	MIXER_START("mixerStart", MediaSoupV3ApiOperation.MIXER),
+	MIXER_CLOSE("mixerClose", MediaSoupV3ApiOperation.MIXER),
+	MIXER_ADD("mixerAdd", MediaSoupV3ApiOperation.MIXER),
+	MIXER_REMOVE("mixerRemove", MediaSoupV3ApiOperation.MIXER),
+	MIXER_UPDATE("mixerUpdate", MediaSoupV3ApiOperation.MIXER),
+	MIXER_PIPE_START("mixerPipeStart", MediaSoupV3ApiOperation.MIXER),
+	MIXER_PIPE_STOP("mixerPipeStop", MediaSoupV3ApiOperation.MIXER),
+	LISTEN_MIXER_STOPPED("listenMixerStopped"),
+	;
+
+	private final String name;
+	private final MediaSoupV3ApiOperation operation;
+
+	MediaSoupV3ApiAction(String name) {
+		this.name = name;
+		this.operation = null;
+	}
+
+	MediaSoupV3ApiAction(String name, MediaSoupV3ApiOperation operation) {
+		this.name = name;
+		this.operation = operation;
+	}
+
+	public String getName() {
+		return name;
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/apiclient/MediaSoupV3ApiClient.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/apiclient/MediaSoupV3ApiClient.java
new file mode 100644
index 000000000..6db8e2d7e
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/apiclient/MediaSoupV3ApiClient.java
@@ -0,0 +1,96 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.webrtc.apiclient;
+
+import org.apache.commons.io.FilenameUtils;
+import org.apache.commons.io.IOUtils;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+
+import java.io.BufferedInputStream;
+import java.io.BufferedOutputStream;
+import java.io.File;
+import java.io.FileOutputStream;
+import java.io.IOException;
+import java.lang.invoke.MethodHandles;
+import java.net.HttpURLConnection;
+import java.net.URL;
+import java.nio.file.Files;
+import java.util.List;
+import java.util.Set;
+import java.util.concurrent.CompletableFuture;
+
+public interface MediaSoupV3ApiClient {
+
+	CompletableFuture<Double> getWorkerLoad(int workerId);
+
+	CompletableFuture<Integer> getNumberOfWorkers();
+
+	CompletableFuture<Void> startRecording(int workerId, String streamUuid);
+
+	CompletableFuture<Void> startRecording(int workerId, String streamUuid, Set<MediaKind> kinds);
+
+	CompletableFuture<Void> stopRecording(int workerId, String streamUuid);
+
+	default CompletableFuture<Void> setRecordingEnabled(int workerId, String streamUuid, boolean enabled) {
+		return enabled ? startRecording(workerId, streamUuid) : stopRecording(workerId, streamUuid);
+	}
+
+	CompletableFuture<Void> startFileStreaming(int workerId, StreamFileRequest streamFileRequest);
+
+	CompletableFuture<Void> stopFileStreaming(int workerId, String streamUuid);
+
+	CompletableFuture<List<String>> getRecordedStreamUuids();
+
+	CompletableFuture<List<String>> getStreamRecordingsForUuid(String streamUuid);
+
+	CompletableFuture<Void> deleteStreamRecordings(String streamUuid);
+
+	CompletableFuture<Void> deleteRecording(String recordingName);
+
+	Logger LOGGER = LoggerFactory.getLogger(MethodHandles.lookup().lookupClass());
+
+	static File downloadVideo(URL url, File downloadDirectory) throws IOException {
+		HttpURLConnection con = null;
+		try {
+			con = (HttpURLConnection) url.openConnection();
+			con.setRequestMethod("GET");
+
+			LOGGER.info("Downloading video: {} to {}", url, downloadDirectory.getAbsolutePath());
+			File resultFile = new File(downloadDirectory, FilenameUtils.getName(url.getPath()).replace(':', '-'));
+			try (BufferedInputStream is = new BufferedInputStream(con.getInputStream());
+			     BufferedOutputStream os = new BufferedOutputStream(new FileOutputStream(resultFile, false))) {
+				IOUtils.copy(is, os);
+			}
+			return resultFile;
+		} catch (IOException e) {
+			LOGGER.error("Exception while downloading video: " + url, e);
+			throw e;
+		} finally {
+			if (con != null) {
+				con.disconnect();
+			}
+		}
+	}
+
+	static File downloadVideo(String url) throws IOException {
+		return downloadVideo(new URL(url), Files.createTempDirectory("download").toFile());
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/apiclient/MediaSoupV3ApiClientException.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/apiclient/MediaSoupV3ApiClientException.java
new file mode 100644
index 000000000..92a4ce3f2
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/apiclient/MediaSoupV3ApiClientException.java
@@ -0,0 +1,31 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.webrtc.apiclient;
+
+public class MediaSoupV3ApiClientException extends RuntimeException {
+
+	public MediaSoupV3ApiClientException(String message) {
+		super(message);
+	}
+
+	public MediaSoupV3ApiClientException(Throwable cause) {
+		super(cause);
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/apiclient/MediaSoupV3ApiOperation.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/apiclient/MediaSoupV3ApiOperation.java
new file mode 100644
index 000000000..54e8b67f1
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/apiclient/MediaSoupV3ApiOperation.java
@@ -0,0 +1,28 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.webrtc.apiclient;
+
+public enum MediaSoupV3ApiOperation {
+	SUBSCRIBE,
+	PUBLISH,
+	RECORDING,
+	STREAMING,
+	MIXER
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/apiclient/MediaSoupV3RestClient.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/apiclient/MediaSoupV3RestClient.java
new file mode 100644
index 000000000..e4f454e0b
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/apiclient/MediaSoupV3RestClient.java
@@ -0,0 +1,646 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+
+package org.teamapps.ux.component.webrtc.apiclient;
+
+import com.fasterxml.jackson.databind.JsonNode;
+import org.glassfish.jersey.client.JerseyClientBuilder;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+
+import jakarta.ws.rs.client.Entity;
+import jakarta.ws.rs.client.InvocationCallback;
+import jakarta.ws.rs.client.WebTarget;
+import jakarta.ws.rs.core.MediaType;
+import java.lang.invoke.MethodHandles;
+import java.time.Duration;
+import java.util.List;
+import java.util.Set;
+import java.util.concurrent.CompletableFuture;
+
+public class MediaSoupV3RestClient implements MediaSoupV3ApiClient {
+
+	private static final Logger LOGGER = LoggerFactory.getLogger(MethodHandles.lookup().lookupClass());
+
+	private final WebTarget webTarget;
+	private final String serverSecret;
+
+	public MediaSoupV3RestClient(String serverUrl, String serverSecret) {
+		webTarget = JerseyClientBuilder.createClient()
+				.target(serverUrl)
+				.path("api");
+		this.serverSecret = serverSecret;
+	}
+
+	@Override
+	public CompletableFuture<Void> startFileStreaming(int workerId, StreamFileRequest streamFileRequest) {
+		CompletableFuture<Void> future = new CompletableFuture<>();
+		webTarget.path(workerId + "/fileStreaming")
+				.request(MediaType.APPLICATION_JSON)
+				.header("Authorization", "Bearer " + MediaSoupV3TokenGenerator.generateStreamingJwtToken(streamFileRequest.getStreamUuid(), serverSecret, Duration.ofDays(365)))
+				.async()
+				.post(Entity.json(streamFileRequest), new InvocationCallback<Void>() {
+					@Override
+					public void completed(Void s) {
+						future.complete(s);
+					}
+
+					@Override
+					public void failed(Throwable throwable) {
+						future.completeExceptionally(throwable);
+					}
+				});
+		return future;
+	}
+
+
+	public CompletableFuture<Void> stopFileStreaming(int workerId, String streamUuid) {
+		CompletableFuture<Void> future = new CompletableFuture<>();
+		webTarget.path(workerId + "/stopFileStreaming")
+				.request(MediaType.APPLICATION_JSON)
+				.header("Authorization", "Bearer " + MediaSoupV3TokenGenerator.generateStreamingJwtToken(streamUuid, serverSecret, Duration.ofDays(365)))
+				.async()
+				.post(Entity.json(new StreamData(streamUuid)),
+						new InvocationCallback<Void>() {
+							@Override
+							public void completed(Void s) {
+								future.complete(s);
+							}
+
+							@Override
+							public void failed(Throwable throwable) {
+								future.completeExceptionally(throwable);
+							}
+						});
+		return future;
+	}
+
+	public CompletableFuture<Void> startRecording(int workerId, String streamUuid) {
+		return startRecording(workerId, streamUuid, null);
+	}
+
+	public CompletableFuture<Void> startRecording(int workerId, String streamUuid, Set<MediaKind> kinds) {
+		CompletableFuture<Void> future = new CompletableFuture<>();
+		webTarget.path(workerId + "/startRecording")
+				.request(MediaType.APPLICATION_JSON)
+				.header("Authorization", "Bearer " + MediaSoupV3TokenGenerator.generateRecordingJwtToken(serverSecret, Duration.ofDays(365)))
+				.async()
+				.post(Entity.json(new StreamAndKinds(streamUuid, kinds)), new InvocationCallback<Void>() {
+					@Override
+					public void completed(Void s) {
+						future.complete(s);
+					}
+
+					@Override
+					public void failed(Throwable throwable) {
+						future.completeExceptionally(throwable);
+					}
+				});
+		return future;
+	}
+
+	public CompletableFuture<Void> stopRecording(int workerId, String streamUuid) {
+		CompletableFuture<Void> future = new CompletableFuture<>();
+		webTarget.path(workerId + "/stopRecording")
+				.request(MediaType.APPLICATION_JSON)
+				.header("Authorization", "Bearer " + MediaSoupV3TokenGenerator.generateRecordingJwtToken(serverSecret, Duration.ofDays(365)))
+				.async()
+				.post(Entity.json(new StreamAndKinds(streamUuid, Set.of(MediaKind.AUDIO, MediaKind.VIDEO))), new InvocationCallback<Void>() {
+					@Override
+					public void completed(Void s) {
+						future.complete(s);
+					}
+
+					@Override
+					public void failed(Throwable throwable) {
+						future.completeExceptionally(throwable);
+					}
+				});
+		return future;
+	}
+
+	public CompletableFuture<JsonNode> transportStats(List<String> ids) {
+		CompletableFuture<JsonNode> future = new CompletableFuture<>();
+		webTarget
+				.path("0/transportStats")
+				.request(MediaType.APPLICATION_JSON)
+				.header("Authorization", "Bearer " + MediaSoupV3TokenGenerator.generateGeneralApiToken(serverSecret, Duration.ofDays(365)))
+				.async()
+				.post(Entity.json(new StatsInput(ids)), new InvocationCallback<JsonNode>() {
+					@Override
+					public void completed(JsonNode s) {
+						future.complete(s);
+					}
+
+					@Override
+					public void failed(Throwable throwable) {
+						future.completeExceptionally(throwable);
+					}
+				});
+		return future;
+	}
+
+	@Override
+	public CompletableFuture<Double> getWorkerLoad(int workerId) {
+		CompletableFuture<Double> future = new CompletableFuture<>();
+		webTarget.path("0/workerLoad")
+				.request(MediaType.APPLICATION_JSON)
+				.header("Authorization", "Bearer " + MediaSoupV3TokenGenerator.generateGeneralApiToken(serverSecret, Duration.ofDays(365)))
+				.async()
+				.post(Entity.json(null), new InvocationCallback<WorkerLoadData>() {
+					@Override
+					public void completed(WorkerLoadData s) {
+						future.complete(s.getCurrentLoad());
+					}
+
+					@Override
+					public void failed(Throwable throwable) {
+						future.completeExceptionally(throwable);
+					}
+				});
+		return future;
+	}
+
+	@Override
+	public CompletableFuture<Integer> getNumberOfWorkers() {
+		CompletableFuture<Integer> future = new CompletableFuture<>();
+		webTarget.path("0/numWorkers")
+				.request(MediaType.APPLICATION_JSON)
+				.header("Authorization", "Bearer " + MediaSoupV3TokenGenerator.generateGeneralApiToken(serverSecret, Duration.ofDays(365)))
+				.async()
+				.post(Entity.json(null), new InvocationCallback<NumWorkersData>() {
+					@Override
+					public void completed(NumWorkersData s) {
+						future.complete(s.getNum());
+					}
+
+					@Override
+					public void failed(Throwable throwable) {
+						future.completeExceptionally(throwable);
+					}
+				});
+		return future;
+	}
+
+	@Override
+	public CompletableFuture<List<String>> getRecordedStreamUuids() {
+		CompletableFuture<List<String>> future = new CompletableFuture<>();
+		webTarget.path("0/recordedStreams")
+				.request(MediaType.APPLICATION_JSON)
+				.header("Authorization", "Bearer " + MediaSoupV3TokenGenerator.generateRecordingJwtToken(serverSecret, Duration.ofDays(365)))
+				.async()
+				.post(Entity.json(null), new InvocationCallback<ListData>() {
+					@Override
+					public void completed(ListData s) {
+						future.complete(s.getList());
+					}
+
+					@Override
+					public void failed(Throwable throwable) {
+						future.completeExceptionally(throwable);
+					}
+				});
+		return future;
+	}
+
+	@Override
+	public CompletableFuture<List<String>> getStreamRecordingsForUuid(String streamUuid) {
+		CompletableFuture<List<String>> future = new CompletableFuture<>();
+		webTarget.path("0/streamRecordings")
+				.request(MediaType.APPLICATION_JSON)
+				.header("Authorization", "Bearer " + MediaSoupV3TokenGenerator.generateRecordingJwtToken(serverSecret, Duration.ofDays(365)))
+				.async()
+				.post(Entity.json(new StreamData(streamUuid)),
+						new InvocationCallback<ListData>() {
+							@Override
+							public void completed(ListData s) {
+								future.complete(s.getList());
+							}
+
+							@Override
+							public void failed(Throwable throwable) {
+								future.completeExceptionally(throwable);
+							}
+						});
+		return future;
+	}
+
+	public CompletableFuture<Void> deleteStreamRecordings(String streamUuid) {
+		CompletableFuture<Void> future = new CompletableFuture<>();
+		webTarget.path("0/deleteStreamRecordings")
+				.request(MediaType.APPLICATION_JSON)
+				.header("Authorization", "Bearer " + MediaSoupV3TokenGenerator.generateRecordingJwtToken(serverSecret, Duration.ofDays(365)))
+				.async()
+				.post(Entity.json(new StreamData(streamUuid)),
+						new InvocationCallback<Void>() {
+							@Override
+							public void completed(Void s) {
+								future.complete(s);
+							}
+
+							@Override
+							public void failed(Throwable throwable) {
+								future.completeExceptionally(throwable);
+							}
+						});
+		return future;
+	}
+
+	public CompletableFuture<Void> deleteRecording(String filePathInput) {
+		CompletableFuture<Void> future = new CompletableFuture<>();
+		webTarget.path("0/deleteRecording")
+				.request(MediaType.APPLICATION_JSON)
+				.header("Authorization", "Bearer " + MediaSoupV3TokenGenerator.generateRecordingJwtToken(serverSecret, Duration.ofDays(365)))
+				.async()
+				.post(Entity.json(new FilePathInput(filePathInput)),
+						new InvocationCallback<Void>() {
+							@Override
+							public void completed(Void s) {
+								future.complete(s);
+							}
+
+							@Override
+							public void failed(Throwable throwable) {
+								future.completeExceptionally(throwable);
+							}
+						});
+		return future;
+	}
+
+
+	public CompletableFuture<KindsOptionsData> kindsByFile(String filePath, boolean relativePath) {
+		CompletableFuture<KindsOptionsData> future = new CompletableFuture<>();
+		webTarget.path("0/kindsByFile")
+				.request(MediaType.APPLICATION_JSON)
+				.header("Authorization", "Bearer " + MediaSoupV3TokenGenerator.generateGeneralApiToken(serverSecret, Duration.ofDays(365)))
+				.async()
+				.post(Entity.json(new KindsByFileInput(filePath, relativePath)),
+						new InvocationCallback<KindsOptionsData>() {
+							@Override
+							public void completed(KindsOptionsData s) {
+								future.complete(s);
+							}
+
+							@Override
+							public void failed(Throwable throwable) {
+								future.completeExceptionally(throwable);
+							}
+						});
+		return future;
+	}
+
+
+	// public CompletableFuture<Void> resumeConsumer(ConsumerData consumerData) {
+	// 	CompletableFuture<Void> future = new CompletableFuture<>();
+	// 	webTarget.path("resumeConsumer").request(MediaType.APPLICATION_JSON).async().post(Entity.json(consumerData), new InvocationCallback<Void>() {
+	// 		@Override
+	// 		public void completed(Void s) {
+	// 			future.complete(s);
+	// 		}
+	//
+	// 		@Override
+	// 		public void failed(Throwable throwable) {
+	// 			future.completeExceptionally(throwable);
+	// 		}
+	// 	});
+	// 	return future;
+	// }
+	//
+	// public CompletableFuture<Void> pauseConsumer(ConsumerData consumerData) {
+	// 	CompletableFuture<Void> future = new CompletableFuture<>();
+	// 	webTarget.path("pauseConsumer").request(MediaType.APPLICATION_JSON).async().post(Entity.json(consumerData), new InvocationCallback<Void>() {
+	// 		@Override
+	// 		public void completed(Void s) {
+	// 			future.complete(s);
+	// 		}
+	//
+	// 		@Override
+	// 		public void failed(Throwable throwable) {
+	// 			future.completeExceptionally(throwable);
+	// 		}
+	// 	});
+	// 	return future;
+	// }
+	//
+	// public CompletableFuture<Void> setPreferredLayers(ConsumerPreferredLayers consumerPreferredLayers) {
+	// 	CompletableFuture<Void> future = new CompletableFuture<>();
+	// 	webTarget.path("setPreferredLayers").request(MediaType.APPLICATION_JSON).async().post(Entity.json(consumerPreferredLayers), new InvocationCallback<Void>() {
+	// 		@Override
+	// 		public void completed(Void s) {
+	// 			future.complete(s);
+	// 		}
+	//
+	// 		@Override
+	// 		public void failed(Throwable throwable) {
+	// 			future.completeExceptionally(throwable);
+	// 		}
+	// 	});
+	// 	return future;
+	// }
+	//
+	// public CompletableFuture<Void> resumeProducer(ProducerData producerData) {
+	// 	CompletableFuture<Void> future = new CompletableFuture<>();
+	// 	webTarget.path("resumeProducer").request(MediaType.APPLICATION_JSON).async().post(Entity.json(producerData), new InvocationCallback<Void>() {
+	// 		@Override
+	// 		public void completed(Void s) {
+	// 			future.complete(s);
+	// 		}
+	//
+	// 		@Override
+	// 		public void failed(Throwable throwable) {
+	// 			future.completeExceptionally(throwable);
+	// 		}
+	// 	});
+	// 	return future;
+	// }
+	//
+	// public CompletableFuture<Void> pauseProducer(ProducerData producerData) {
+	// 	CompletableFuture<Void> future = new CompletableFuture<>();
+	// 	webTarget.path("pauseProducer").request(MediaType.APPLICATION_JSON).async().post(Entity.json(producerData), new InvocationCallback<Void>() {
+	// 		@Override
+	// 		public void completed(Void s) {
+	// 			future.complete(s);
+	// 		}
+	//
+	// 		@Override
+	// 		public void failed(Throwable throwable) {
+	// 			future.completeExceptionally(throwable);
+	// 		}
+	// 	});
+	// 	return future;
+	// }
+	//
+	// public CompletableFuture<Void> closeProducer(ProducerData producerData) {
+	// 	CompletableFuture<Void> future = new CompletableFuture<>();
+	// 	webTarget.path("closeProducer").request(MediaType.APPLICATION_JSON).async().post(Entity.json(producerData), new InvocationCallback<Void>() {
+	// 		@Override
+	// 		public void completed(Void s) {
+	// 			future.complete(s);
+	// 		}
+	//
+	// 		@Override
+	// 		public void failed(Throwable throwable) {
+	// 			future.completeExceptionally(throwable);
+	// 		}
+	// 	});
+	// 	return future;
+	// }
+	//
+	// public CompletableFuture<Void> liveStreaming(LiveStreamRequest liveStreamRequest) {
+	// 	CompletableFuture<Void> future = new CompletableFuture<>();
+	// 	webTarget.path("liveStreaming").request(MediaType.APPLICATION_JSON).async().post(Entity.json(liveStreamRequest), new InvocationCallback<Void>() {
+	// 		@Override
+	// 		public void completed(Void s) {
+	// 			future.complete(s);
+	// 		}
+	//
+	// 		@Override
+	// 		public void failed(Throwable throwable) {
+	// 			future.completeExceptionally(throwable);
+	// 		}
+	// 	});
+	// 	return future;
+	// }
+	//
+	// public CompletableFuture<Void> liveToHls(LiveToHlsRequest liveToHlsRequest) {
+	// 	CompletableFuture<Void> future = new CompletableFuture<>();
+	// 	webTarget.path("liveToHls").request(MediaType.APPLICATION_JSON).async().post(Entity.json(liveToHlsRequest), new InvocationCallback<Void>() {
+	// 		@Override
+	// 		public void completed(Void s) {
+	// 			future.complete(s);
+	// 		}
+	//
+	// 		@Override
+	// 		public void failed(Throwable throwable) {
+	// 			future.completeExceptionally(throwable);
+	// 		}
+	// 	});
+	// 	return future;
+	// }
+	// public CompletableFuture<PushStreamInputsResponse> pushToServerInputs(PushStreamInputsRequest pushStreamInputsRequest) {
+	// 	CompletableFuture<Void> future = new CompletableFuture<>();
+	// 	webTarget.path("pushToServerInputs").request(MediaType.APPLICATION_JSON).async().post(Entity.json(pushStreamInputsRequest),
+	// 			new InvocationCallback<PushStreamInputsResponse>() {
+	// 				@Override
+	// 				public void completed(PushStreamInputsResponse s) {
+	// 					future.complete(s);
+	// 				}
+	//
+	// 				@Override
+	// 				public void failed(Throwable throwable) {
+	// 					future.completeExceptionally(throwable);
+	// 				}
+	// 			});
+	// 	return future;
+	// }
+	//
+	// public CompletableFuture<PushStreamOptionsResponse> pushToServerOptions(PushStreamOptionsRequest pushStreamOptionsRequest) {
+	// 	CompletableFuture<PushStreamInputsResponse> future = new CompletableFuture<>();
+	// 	webTarget.path("pushToServerOptions").request(MediaType.APPLICATION_JSON).async().post(Entity.json(pushStreamOptionsRequest),
+	// 			new InvocationCallback<PushStreamOptionsResponse>() {
+	// 				@Override
+	// 				public void completed(PushStreamOptionsResponse s) {
+	// 					future.complete(s);
+	// 				}
+	//
+	// 				@Override
+	// 				public void failed(Throwable throwable) {
+	// 					future.completeExceptionally(throwable);
+	// 				}
+	// 			});
+	// 	return future;
+	// }
+	//
+	// public CompletableFuture<Void> pushToServer(PushStreamRequest pushStreamRequest) {
+	// 	CompletableFuture<PushStreamOptionsResponse> future = new CompletableFuture<>();
+	// 	webTarget.path("pushToServer").request(MediaType.APPLICATION_JSON).async().post(Entity.json(pushStreamRequest), new InvocationCallback<Void>() {
+	// 		@Override
+	// 		public void completed(Void s) {
+	// 			future.complete(s);
+	// 		}
+	//
+	// 		@Override
+	// 		public void failed(Throwable throwable) {
+	// 			future.completeExceptionally(throwable);
+	// 		}
+	// 	});
+	// 	return future;
+	// }
+	//
+	// public CompletableFuture<PullStreamInputsResponse> pullFromServerInputs(PullStreamInputsRequest pullStreamInputsRequest) {
+	// 	CompletableFuture<Void> future = new CompletableFuture<>();
+	// 	webTarget.path("pullFromServerInputs").request(MediaType.APPLICATION_JSON).async().post(Entity.json(pullStreamInputsRequest),
+	// 			new InvocationCallback<PullStreamInputsResponse>() {
+	// 				@Override
+	// 				public void completed(PullStreamInputsResponse s) {
+	// 					future.complete(s);
+	// 				}
+	//
+	// 				@Override
+	// 				public void failed(Throwable throwable) {
+	// 					future.completeExceptionally(throwable);
+	// 				}
+	// 			});
+	// 	return future;
+	// }
+	// public CompletableFuture<Void> requestKeyframe(ConsumerData consumerData) {
+	// 	CompletableFuture<KindsOptionsData> future = new CompletableFuture<>();
+	// 	webTarget.path("requestKeyframe").request(MediaType.APPLICATION_JSON).async().post(Entity.json(consumerData), new InvocationCallback<Void>() {
+	// 		@Override
+	// 		public void completed(Void s) {
+	// 			future.complete(s);
+	// 		}
+	//
+	// 		@Override
+	// 		public void failed(Throwable throwable) {
+	// 			future.completeExceptionally(throwable);
+	// 		}
+	// 	});
+	// 	return future;
+	// }
+
+	// public CompletableFuture<MixerInput> mixerStart(MixerCreateOptions mixerCreateOptions) {
+	// 	CompletableFuture<Void> future = new CompletableFuture<>();
+	// 	webTarget.path("mixerStart").request(MediaType.APPLICATION_JSON).async().post(Entity.json(mixerCreateOptions), new InvocationCallback<MixerInput>() {
+	// 		@Override
+	// 		public void completed(MixerInput s) {
+	// 			future.complete(s);
+	// 		}
+	//
+	// 		@Override
+	// 		public void failed(Throwable throwable) {
+	// 			future.completeExceptionally(throwable);
+	// 		}
+	// 	});
+	// 	return future;
+	// }
+	//
+	// public CompletableFuture<Void> mixerClose(MixerInput mixerInput) {
+	// 	CompletableFuture<MixerInput> future = new CompletableFuture<>();
+	// 	webTarget.path("mixerClose").request(MediaType.APPLICATION_JSON).async().post(Entity.json(mixerInput), new InvocationCallback<Void>() {
+	// 		@Override
+	// 		public void completed(Void s) {
+	// 			future.complete(s);
+	// 		}
+	//
+	// 		@Override
+	// 		public void failed(Throwable throwable) {
+	// 			future.completeExceptionally(throwable);
+	// 		}
+	// 	});
+	// 	return future;
+	// }
+	//
+	// public CompletableFuture<Void> mixerAdd(MixerAddAudioData mixerAddAudioData|MixerAddVideoData) {
+	// 	CompletableFuture<Void> future = new CompletableFuture<>();
+	// 	webTarget.path("mixerAdd").request(MediaType.APPLICATION_JSON).async().post(Entity.json(mixerAddAudioData), new InvocationCallback<Void>() {
+	// 		@Override
+	// 		public void completed(Void s) {
+	// 			future.complete(s);
+	// 		}
+	//
+	// 		@Override
+	// 		public void failed(Throwable throwable) {
+	// 			future.completeExceptionally(throwable);
+	// 		}
+	// 	});
+	// 	return future;
+	// }
+	//
+	// public CompletableFuture<Void> mixerUpdate(MixerUpdateData mixerUpdateData) {
+	// 	CompletableFuture<Void> future = new CompletableFuture<>();
+	// 	webTarget.path("mixerUpdate").request(MediaType.APPLICATION_JSON).async().post(Entity.json(mixerUpdateData), new InvocationCallback<Void>() {
+	// 		@Override
+	// 		public void completed(Void s) {
+	// 			future.complete(s);
+	// 		}
+	//
+	// 		@Override
+	// 		public void failed(Throwable throwable) {
+	// 			future.completeExceptionally(throwable);
+	// 		}
+	// 	});
+	// 	return future;
+	// }
+	//
+	// public CompletableFuture<Void> mixerRemove(MixerRemoveData mixerRemoveData) {
+	// 	CompletableFuture<Void> future = new CompletableFuture<>();
+	// 	webTarget.path("mixerRemove").request(MediaType.APPLICATION_JSON).async().post(Entity.json(mixerRemoveData), new InvocationCallback<Void>() {
+	// 		@Override
+	// 		public void completed(Void s) {
+	// 			future.complete(s);
+	// 		}
+	//
+	// 		@Override
+	// 		public void failed(Throwable throwable) {
+	// 			future.completeExceptionally(throwable);
+	// 		}
+	// 	});
+	// 	return future;
+	// }
+	//
+	// public CompletableFuture<MixerPipeInput> mixerPipeStart(MixerPipeLiveData|MixerPipeRecordingData|MixerPipeRtmpData|MixerPipeHlsData mixerPipeLiveData) {
+	// 	CompletableFuture<Void> future = new CompletableFuture<>();
+	// 	webTarget.path("mixerPipeStart").request(MediaType.APPLICATION_JSON).async().post(Entity.json(mixerPipeLiveData), new InvocationCallback<MixerPipeInput>() {
+	// 		@Override
+	// 		public void completed(MixerPipeInput s) {
+	// 			future.complete(s);
+	// 		}
+	//
+	// 		@Override
+	// 		public void failed(Throwable throwable) {
+	// 			future.completeExceptionally(throwable);
+	// 		}
+	// 	});
+	// 	return future;
+	// }
+	//
+	// public CompletableFuture<Void> mixerPipeStop(MixerPipeStopInput mixerPipeStopInput) {
+	// 	CompletableFuture<MixerPipeInput> future = new CompletableFuture<>();
+	// 	webTarget.path("mixerPipeStop").request(MediaType.APPLICATION_JSON).async().post(Entity.json(mixerPipeStopInput), new InvocationCallback<Void>() {
+	// 		@Override
+	// 		public void completed(Void s) {
+	// 			future.complete(s);
+	// 		}
+	//
+	// 		@Override
+	// 		public void failed(Throwable throwable) {
+	// 			future.completeExceptionally(throwable);
+	// 		}
+	// 	});
+	// 	return future;
+	// }
+	// public CompletableFuture<Void> setMaxIncomingBitrate(TransportBitrateData transportBitrateData) {
+	// 	CompletableFuture<Void> future = new CompletableFuture<>();
+	// 	webTarget.path("setMaxIncomingBitrate").request(MediaType.APPLICATION_JSON).async().post(Entity.json(transportBitrateData), new InvocationCallback<Void>() {
+	// 		@Override
+	// 		public void completed(Void s) {
+	// 			future.complete(s);
+	// 		}
+	//
+	// 		@Override
+	// 		public void failed(Throwable throwable) {
+	// 			future.completeExceptionally(throwable);
+	// 		}
+	// 	});
+	// 	return future;
+	// }
+
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/apiclient/MediaSoupV3TokenGenerator.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/apiclient/MediaSoupV3TokenGenerator.java
new file mode 100644
index 000000000..3be0d0a6a
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/apiclient/MediaSoupV3TokenGenerator.java
@@ -0,0 +1,81 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.webrtc.apiclient;
+
+import com.auth0.jwt.JWT;
+import com.auth0.jwt.JWTCreator;
+import com.auth0.jwt.algorithms.Algorithm;
+import com.auth0.jwt.exceptions.JWTCreationException;
+
+import java.time.Duration;
+import java.time.Instant;
+import java.util.Date;
+
+import static org.teamapps.ux.component.webrtc.apiclient.MediaSoupV3ApiOperation.*;
+
+public class MediaSoupV3TokenGenerator {
+
+	public static String generatePublishJwtToken(String streamUuid, String secret, Duration tokenValidityDuration) {
+		return generateJwtToken(secret, PUBLISH, streamUuid, tokenValidityDuration  /*PUBLISH*/);
+	}
+
+	public static String generateSubscribeJwtToken(String streamUuid, String secret, Duration tokenValidityDuration) {
+		return generateJwtToken(secret, SUBSCRIBE, streamUuid, tokenValidityDuration  /*SUBSCRIBE*/);
+	}
+
+	public static String generateRecordingJwtToken(String secret, Duration tokenValidityDuration) {
+		return generateJwtToken(secret, RECORDING, null, tokenValidityDuration);
+	}
+
+	public static String generateStreamingJwtToken(String streamUuid, String secret, Duration tokenValidityDuration) {
+		return generateJwtToken(secret, STREAMING, streamUuid, tokenValidityDuration);
+	}
+
+	public static String generateMixerJwtToken(String secret, Duration tokenValidityDuration) {
+		return generateJwtToken(secret, MIXER, null, tokenValidityDuration);
+	}
+
+	public static String generateGeneralApiToken(String secret, Duration tokenValidityDuration) {
+		return generateJwtToken(secret, null, null, tokenValidityDuration);
+	}
+
+	public static String generateJwtToken(String secret, MediaSoupV3ApiOperation operation, String streamUuid, Duration tokenValidityDuration) {
+		if (secret == null) {
+			return "";
+		}
+		try {
+			Algorithm algorithm = Algorithm.HMAC512(secret);
+			JWTCreator.Builder builder = JWT.create();
+			if (operation != null) {
+				builder = builder.withClaim("operation", operation.ordinal());
+			}
+			if (streamUuid != null) {
+				builder = builder.withClaim("stream", streamUuid);
+			}
+			if (tokenValidityDuration != null) {
+				builder = builder.withExpiresAt(new Date(Instant.now().plus(tokenValidityDuration).toEpochMilli()));
+			}
+			return builder.sign(algorithm);
+		} catch (JWTCreationException exception) {
+			throw new RuntimeException("Could not create auth token - this should never happen!");
+		}
+	}
+
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/LineChartDataPoint.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/apiclient/NumWorkersData.java
similarity index 70%
rename from teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/LineChartDataPoint.java
rename to teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/apiclient/NumWorkersData.java
index deb660baa..4691f9209 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/timegraph/LineChartDataPoint.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/apiclient/NumWorkersData.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,23 +17,23 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-package org.teamapps.ux.component.timegraph;
+package org.teamapps.ux.component.webrtc.apiclient;
 
-public class LineChartDataPoint {
+public class NumWorkersData {
+	private int num;
 
-	private final double x;
-	private final double y;
+	public NumWorkersData(int num) {
+		this.num = num;
+	}
 
-	public LineChartDataPoint(double x, double y) {
-		this.x = x;
-		this.y = y;
+	public NumWorkersData() {
 	}
 
-	public double getX() {
-		return x;
+	public int getNum() {
+		return num;
 	}
 
-	public double getY() {
-		return y;
+	public void setNum(int num) {
+		this.num = num;
 	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/apiclient/RequestMetadata.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/apiclient/RequestMetadata.java
new file mode 100644
index 000000000..346d263a8
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/apiclient/RequestMetadata.java
@@ -0,0 +1,39 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.webrtc.apiclient;
+
+public class RequestMetadata {
+
+	private final int workerId;
+	private final String token;
+
+	public RequestMetadata(int workerId, String token) {
+		this.workerId = workerId;
+		this.token = token;
+	}
+
+	public int getWorkerId() {
+		return workerId;
+	}
+
+	public String getToken() {
+		return token;
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/apiclient/StatsInput.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/apiclient/StatsInput.java
new file mode 100644
index 000000000..3c1f45ebe
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/apiclient/StatsInput.java
@@ -0,0 +1,34 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.webrtc.apiclient;
+
+import java.util.List;
+
+public class StatsInput {
+	private final List<String> ids;
+
+	public StatsInput(List<String> ids) {
+		this.ids = ids;
+	}
+
+	public List<String> getIds() {
+		return ids;
+	}
+}
diff --git a/teamapps-icon/src/main/java/org/teamapps/icons/provider/IconProvider.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/apiclient/StreamAndKinds.java
similarity index 56%
rename from teamapps-icon/src/main/java/org/teamapps/icons/provider/IconProvider.java
rename to teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/apiclient/StreamAndKinds.java
index 8730026b6..2b17438b9 100644
--- a/teamapps-icon/src/main/java/org/teamapps/icons/provider/IconProvider.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/apiclient/StreamAndKinds.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,31 +17,30 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-package org.teamapps.icons.provider;
+package org.teamapps.ux.component.webrtc.apiclient;
 
-import org.teamapps.icons.api.IconStyle;
+import com.fasterxml.jackson.annotation.JsonInclude;
+import com.fasterxml.jackson.annotation.JsonProperty;
 
 import java.util.Set;
 
-public interface IconProvider<STYLE extends IconStyle>  {
+@JsonInclude(JsonInclude.Include.NON_NULL)
+public class StreamAndKinds {
 
-	byte[] getIcon(String styleId, int size, String iconName);
+	@JsonProperty("stream")
+	private final String streamUuid;
+	private final Set<MediaKind> kinds;
 
-	//IconType getIconType();
-
-	//Icon getStyledIcon(STYLE style, String iconName);
-
-	String getIconLibraryId();
-
-	Set<Integer> getAvailableIconSizes();
-
-	Set<STYLE> getAvailableIconStyles();
-
-	STYLE getDefaultDesktopStyle();
-
-	STYLE getDefaultMobileStyle();
-
-	STYLE getDefaultSubIconStyle();
+	public StreamAndKinds(String streamUuid, Set<MediaKind> kinds) {
+		this.streamUuid = streamUuid;
+		this.kinds = kinds;
+	}
 
+	public String getStreamUuid() {
+		return streamUuid;
+	}
 
+	public Set<MediaKind> getKinds() {
+		return kinds;
+	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/data/value/Limit.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/apiclient/StreamData.java
similarity index 67%
rename from teamapps-ux/src/main/java/org/teamapps/data/value/Limit.java
rename to teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/apiclient/StreamData.java
index a8df6bfe5..f396447ef 100644
--- a/teamapps-ux/src/main/java/org/teamapps/data/value/Limit.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/apiclient/StreamData.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,24 +17,19 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-package org.teamapps.data.value;
+package org.teamapps.ux.component.webrtc.apiclient;
 
-public class Limit {
+import com.fasterxml.jackson.annotation.JsonProperty;
 
-	private final int startIndex;
-	private final int length;
+public class StreamData {
+	@JsonProperty("stream")
+	private final String streamUuid;
 
-
-	public Limit(int startIndex, int length) {
-		this.startIndex = startIndex;
-		this.length = length;
-	}
-
-	public int getStartIndex() {
-		return startIndex;
+	public StreamData(String streamUuid) {
+		this.streamUuid = streamUuid;
 	}
 
-	public int getLength() {
-		return length;
+	public String getStreamUuid() {
+		return streamUuid;
 	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/apiclient/StreamFileRequest.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/apiclient/StreamFileRequest.java
new file mode 100644
index 000000000..9e11fe108
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/apiclient/StreamFileRequest.java
@@ -0,0 +1,116 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.webrtc.apiclient;
+
+import com.fasterxml.jackson.annotation.JsonInclude;
+import com.fasterxml.jackson.annotation.JsonProperty;
+
+import java.util.Set;
+
+@JsonInclude(JsonInclude.Include.NON_NULL)
+public class StreamFileRequest {
+	@JsonProperty("stream")
+	private final String streamUuid;
+	private final Set<MediaKind> kinds;
+	private final String filePath;
+	private final boolean relativePath;
+	private final boolean restartOnExit;
+	private final Integer videoBitrate;
+	private final Integer width;
+	private final Integer height;
+	private final Float frameRate;
+	private final Integer audioSampleRate;
+	private final Integer audioChannels;
+	private final String[] additionalInputOptions;
+
+	/**
+	 * @deprecated Use {@link StreamFileRequest#builder(String, Set, String, boolean)} instead.
+	 */
+	@Deprecated
+	public StreamFileRequest(String streamUuid, Set<MediaKind> kinds, String filePath, boolean relativePath,
+	                         boolean restartOnExit, Integer videoBitrate, Integer width, Integer height,
+	                         Float frameRate,
+	                         Integer audioSampleRate, Integer audioChannels, String[] additionalInputOptions) {
+		this.streamUuid = streamUuid;
+		this.kinds = kinds;
+		this.filePath = filePath;
+		this.relativePath = relativePath;
+		this.restartOnExit = restartOnExit;
+		this.videoBitrate = videoBitrate;
+		this.width = width;
+		this.height = height;
+		this.frameRate = frameRate;
+		this.audioSampleRate = audioSampleRate;
+		this.audioChannels = audioChannels;
+		this.additionalInputOptions = additionalInputOptions;
+	}
+
+	public static StreamFileRequestBuilder builder(String streamUuid, Set<MediaKind> kinds, String filePath, boolean relativePath) {
+		return new StreamFileRequestBuilder(streamUuid, kinds, filePath, relativePath);
+	}
+
+	public String getStreamUuid() {
+		return streamUuid;
+	}
+
+	public Set<MediaKind> getKinds() {
+		return kinds;
+	}
+
+	public String getFilePath() {
+		return filePath;
+	}
+
+	public boolean isRelativePath() {
+		return relativePath;
+	}
+
+	public boolean isRestartOnExit() {
+		return restartOnExit;
+	}
+
+	public Integer getVideoBitrate() {
+		return videoBitrate;
+	}
+
+	public Integer getWidth() {
+		return width;
+	}
+
+	public Integer getHeight() {
+		return height;
+	}
+
+	public Float getFrameRate() {
+		return frameRate;
+	}
+
+	public Integer getAudioSampleRate() {
+		return audioSampleRate;
+	}
+
+	public Integer getAudioChannels() {
+		return audioChannels;
+	}
+
+	public String[] getAdditionalInputOptions() {
+		return additionalInputOptions;
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/apiclient/StreamFileRequestBuilder.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/apiclient/StreamFileRequestBuilder.java
new file mode 100644
index 000000000..9b9999f4a
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/apiclient/StreamFileRequestBuilder.java
@@ -0,0 +1,109 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.webrtc.apiclient;
+
+import java.util.Set;
+
+public class StreamFileRequestBuilder {
+	private String streamUuid;
+	private Set<MediaKind> kinds;
+	private String filePath;
+	private boolean relativePath;
+	private boolean restartOnExit = false;
+	private Integer videoBitrate = null;
+	private Integer width;
+	private Integer height;
+	private Float frameRate;
+	private Integer audioSampleRate;
+	private Integer audioChannels;
+	private String[] additionalInputOptions;
+
+	public StreamFileRequestBuilder(String streamUuid, Set<MediaKind> kinds, String filePath, boolean relativePath) {
+		this.streamUuid = streamUuid;
+		this.kinds = kinds;
+		this.filePath = filePath;
+		this.relativePath = relativePath;
+	}
+
+	public StreamFileRequestBuilder setStreamUuid(String streamUuid) {
+		this.streamUuid = streamUuid;
+		return this;
+	}
+
+	public StreamFileRequestBuilder setKinds(Set<MediaKind> kinds) {
+		this.kinds = kinds;
+		return this;
+	}
+
+	public StreamFileRequestBuilder setFilePath(String filePath) {
+		this.filePath = filePath;
+		return this;
+	}
+
+	public StreamFileRequestBuilder setRelativePath(boolean relativePath) {
+		this.relativePath = relativePath;
+		return this;
+	}
+
+	public StreamFileRequestBuilder setRestartOnExit(boolean restartOnExit) {
+		this.restartOnExit = restartOnExit;
+		return this;
+	}
+
+	public StreamFileRequestBuilder setVideoBitrate(int videoBitrate) {
+		this.videoBitrate = videoBitrate;
+		return this;
+	}
+
+	public StreamFileRequestBuilder setWidth(int width) {
+		this.width = width;
+		return this;
+	}
+
+	public StreamFileRequestBuilder setHeight(int height) {
+		this.height = height;
+		return this;
+	}
+
+	public StreamFileRequestBuilder setFrameRate(float frameRate) {
+		this.frameRate = frameRate;
+		return this;
+	}
+
+	public StreamFileRequestBuilder setAudioSampleRate(int audioSampleRate) {
+		this.audioSampleRate = audioSampleRate;
+		return this;
+	}
+
+	public StreamFileRequestBuilder setAudioChannels(int audioChannels) {
+		this.audioChannels = audioChannels;
+		return this;
+	}
+
+	public StreamFileRequestBuilder setAdditionalInputOptions(String[] additionalInputOptions) {
+		this.additionalInputOptions = additionalInputOptions;
+		return this;
+	}
+
+	public StreamFileRequest build() {
+		return new StreamFileRequest(streamUuid, kinds, filePath, relativePath, restartOnExit, videoBitrate, width, height, frameRate, audioSampleRate, audioChannels, additionalInputOptions);
+	}
+
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/apiclient/WorkerLoadData.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/apiclient/WorkerLoadData.java
new file mode 100644
index 000000000..663d24669
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/webrtc/apiclient/WorkerLoadData.java
@@ -0,0 +1,40 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.webrtc.apiclient;
+
+public class WorkerLoadData {
+
+	private double currentLoad;
+
+	public WorkerLoadData(double currentLoad) {
+		this.currentLoad = currentLoad;
+	}
+
+	public WorkerLoadData() {
+	}
+
+	public double getCurrentLoad() {
+		return currentLoad;
+	}
+
+	public void setCurrentLoad(double currentLoad) {
+		this.currentLoad = currentLoad;
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/window/Window.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/window/Window.java
index 7a58f7354..7156139dc 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/window/Window.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/window/Window.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,21 +19,29 @@
  */
 package org.teamapps.ux.component.window;
 
+import org.teamapps.common.format.Color;
+import org.teamapps.common.format.RgbaColor;
 import org.teamapps.dto.UiComponent;
+import org.teamapps.dto.UiEvent;
 import org.teamapps.dto.UiWindow;
-import org.teamapps.icons.api.Icon;
+import org.teamapps.event.Event;
+import org.teamapps.icons.Icon;
 import org.teamapps.ux.component.Component;
-import org.teamapps.common.format.Color;
 import org.teamapps.ux.component.panel.Panel;
 
-import static org.teamapps.util.UiUtil.createUiColor;
-
 public class Window extends Panel {
 
+	public final Event<Void> onClosed = new Event<>();
+
 	private boolean modal = false;
-	private int width = 0;
-	private int height = 0;
-	private Color modalBackgroundDimmingColor = new Color(0, 0, 0, 0.2f);
+	private int width = 0; // 0 = full width
+	private int height = 0; // 0 = full height; -1 = auto
+	private int minWidth = 200; // 0 = full height; -1 = auto
+	private int minHeight = 100; // 0 = full height; -1 = auto
+	private boolean resizable = true;
+	private boolean movable = true;
+	private boolean keepInViewport = true;
+	private Color modalBackgroundDimmingColor = new RgbaColor(0, 0, 0, 0.2f);
 	private boolean closeable;
 	private boolean closeOnEscape;
 	private boolean closeOnClickOutside;
@@ -50,25 +58,50 @@ public Window(int width, int height, Component content) {
 	}
 
 	public Window(Icon icon, String title, int width, int height, Component content) {
+		this(icon, title, content, width, height, false, false, false);
+	}
+
+	public Window(Icon icon, String title, Component content, int width, int height, boolean closeable, boolean closeOnEscape, boolean closeOnClickOutside) {
 		super(icon, title, content);
 		this.width = width;
 		this.height = height;
+		this.closeable = closeable;
+		this.closeOnEscape = closeOnEscape;
+		this.closeOnClickOutside = closeOnClickOutside;
 	}
 
 	@Override
 	public UiComponent createUiComponent() {
-		UiWindow window = new UiWindow(getId());
+		UiWindow window = new UiWindow();
 		mapUiPanelProperties(window);
 		window.setModal(modal);
 		window.setWidth(width);
 		window.setHeight(height);
-		window.setModalBackgroundDimmingColor(createUiColor(modalBackgroundDimmingColor));
+		window.setMinWidth(minWidth);
+		window.setMinHeight(minHeight);
+		window.setResizable(resizable);
+		window.setMovable(movable);
+		window.setKeepInViewport(keepInViewport);
+		if (height < 0) { // auto-height -> do not stretch the content (#safariflex). TODO remove once Safari got fixed!
+			window.setStretchContent(false);
+		}
+		window.setModalBackgroundDimmingColor(modalBackgroundDimmingColor != null ? modalBackgroundDimmingColor.toHtmlColorString() : null);
 		window.setCloseable(closeable);
 		window.setCloseOnClickOutside(closeOnClickOutside);
 		window.setCloseOnEscape(closeOnEscape);
 		return window;
 	}
 
+	@Override
+	public void handleUiEvent(UiEvent event) {
+		super.handleUiEvent(event);
+		switch (event.getUiEventType()) {
+			case UI_WINDOW_CLOSED -> {
+				onClosed.fire();
+			}
+		}
+	}
+
 	public boolean isModal() {
 		return modal;
 	}
@@ -83,8 +116,7 @@ public int getWidth() {
 	}
 
 	public void setWidth(int width) {
-		this.width = width;
-		queueCommandIfRendered(() -> new UiWindow.SetSizeCommand(getId(), width, height));
+		setSize(width, height);
 	}
 
 	public int getHeight() {
@@ -92,13 +124,59 @@ public int getHeight() {
 	}
 
 	public void setHeight(int height) {
-		this.height = height;
-		queueCommandIfRendered(() -> new UiWindow.SetSizeCommand(getId(), width, height));
+		setSize(width, height);
+	}
+
+	public int getMinWidth() {
+		return minWidth;
+	}
+
+	public void setMinWidth(int minWidth) {
+		this.minWidth = minWidth;
+	}
+
+	public int getMinHeight() {
+		return minHeight;
+	}
+
+	public void setMinHeight(int minHeight) {
+		this.minHeight = minHeight;
+	}
+
+	public boolean isResizable() {
+		return resizable;
+	}
+
+	public void setResizable(boolean resizable) {
+		this.resizable = resizable;
+	}
+
+	public boolean isMovable() {
+		return movable;
+	}
+
+	public void setMovable(boolean movable) {
+		this.movable = movable;
+	}
+
+	public boolean isKeepInViewport() {
+		return keepInViewport;
+	}
+
+	public void setKeepInViewport(boolean keepInViewport) {
+		this.keepInViewport = keepInViewport;
+	}
+
+	public void enableAutoHeight() {
+		setHeight(-1);
 	}
 
 	public void setSize(int width, int height) {
 		this.width = width;
 		this.height = height;
+		if (height < 0) { // auto-height -> do not stretch the content (#safariflex). TODO remove once Safari got fixed!
+			this.setStretchContent(false);
+		}
 		queueCommandIfRendered(() -> new UiWindow.SetSizeCommand(getId(), width, height));
 	}
 
@@ -108,7 +186,7 @@ public Color getModalBackgroundDimmingColor() {
 
 	public void setModalBackgroundDimmingColor(Color modalBackgroundDimmingColor) {
 		this.modalBackgroundDimmingColor = modalBackgroundDimmingColor;
-		queueCommandIfRendered(() -> new UiWindow.SetModalBackgroundDimmingColorCommand(getId(), createUiColor(modalBackgroundDimmingColor)));
+		queueCommandIfRendered(() -> new UiWindow.SetModalBackgroundDimmingColorCommand(getId(), modalBackgroundDimmingColor != null ? modalBackgroundDimmingColor.toHtmlColorString() : null));
 	}
 
 	public void show() {
@@ -116,7 +194,8 @@ public void show() {
 	}
 
 	public void show(int animationDuration) {
-		getSessionContext().showWindow(this, animationDuration);
+		render();
+		queueCommandIfRendered(() -> new UiWindow.ShowCommand(getId(), animationDuration));
 	}
 
 	public void close() {
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/workspacelayout/ChildWindowClosedEventData.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/workspacelayout/ChildWindowClosedEventData.java
index ec4a5a062..d4b4d70d4 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/workspacelayout/ChildWindowClosedEventData.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/workspacelayout/ChildWindowClosedEventData.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/workspacelayout/LayoutApplyer.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/workspacelayout/LayoutApplyer.java
index 5e4a25f5b..f904d2674 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/workspacelayout/LayoutApplyer.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/workspacelayout/LayoutApplyer.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -29,13 +29,7 @@
 import org.teamapps.ux.component.workspacelayout.definition.SplitPaneDefinition;
 import org.teamapps.ux.component.workspacelayout.definition.ViewGroupDefinition;
 
-import java.util.Collections;
-import java.util.HashMap;
-import java.util.HashSet;
-import java.util.List;
-import java.util.Map;
-import java.util.Objects;
-import java.util.Set;
+import java.util.*;
 import java.util.stream.Collectors;
 
 class LayoutApplyer {
@@ -61,6 +55,7 @@ public Map<String, WorkSpaceLayoutItem> applyFromUiLayoutDescriptor(
 				.collect(Collectors.toMap(entry -> entry.getKey(), entry -> createWrapperFromUi(entry.getValue())));
 		return apply(currentRootItemsByWindowId, wrappedDescriptors);
 	}
+
 	public Map<String, WorkSpaceLayoutItem> applyFromLayoutDefinition(
 			Map<String, WorkSpaceLayoutItem> currentRootItemsByWindowId,
 			Map<String, LayoutItemDefinition> newRootDescriptorsByWindowId
@@ -145,8 +140,14 @@ public void cleanupUnknownServerItems(WorkSpaceLayoutItem item, LayoutItemWrappe
 				if (lastChild != null) {
 					this.cleanupUnknownServerItems(lastChild, ((SplitPaneWrapper) descriptorItem).getLastChild(), splitPane);
 				}
-			} else if (item instanceof WorkSpaceLayoutViewGroup) {
-				removeUnknownViews((WorkSpaceLayoutViewGroup) item, ((ViewGroupWrapper) descriptorItem).getViewNames());
+			} else if (item instanceof WorkSpaceLayoutViewGroup viewGroupItem) {
+				ViewGroupWrapper viewGroupWrapper = (ViewGroupWrapper) descriptorItem;
+				List<String> viewNames = viewGroupWrapper.getViewNames();
+				removeUnknownViews(viewGroupItem, viewNames);
+				viewGroupItem.getAllViews().stream()
+						.filter(view -> view.getId().equals(viewGroupWrapper.getSelectedViewName()))
+						.findFirst()
+						.ifPresent(viewGroupItem::setSelectedViewSilently);
 			}
 		} else {
 			LayoutItemWrapper correspondingDescriptorItem = this.descriptorItemById.get(item.getId());
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/workspacelayout/SimpleWorkSpaceLayout.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/workspacelayout/SimpleWorkSpaceLayout.java
index 6c6e3b74e..84de66b36 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/workspacelayout/SimpleWorkSpaceLayout.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/workspacelayout/SimpleWorkSpaceLayout.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/workspacelayout/SplitDirection.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/workspacelayout/SplitDirection.java
index f425df893..da6fda40a 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/workspacelayout/SplitDirection.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/workspacelayout/SplitDirection.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/workspacelayout/ViewGroupPanelState.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/workspacelayout/ViewGroupPanelState.java
index 220dfed09..d4e7699db 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/workspacelayout/ViewGroupPanelState.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/workspacelayout/ViewGroupPanelState.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/workspacelayout/ViewSelectedEventData.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/workspacelayout/ViewSelectedEventData.java
index de4e66ede..7a089c230 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/workspacelayout/ViewSelectedEventData.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/workspacelayout/ViewSelectedEventData.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/workspacelayout/WorkSpaceLayout.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/workspacelayout/WorkSpaceLayout.java
index cc5cba7b1..6722abd53 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/workspacelayout/WorkSpaceLayout.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/workspacelayout/WorkSpaceLayout.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -23,28 +23,23 @@
 import com.fasterxml.jackson.databind.ObjectMapper;
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
-import org.teamapps.dto.UiComponent;
-import org.teamapps.dto.UiEvent;
-import org.teamapps.dto.UiWorkSpaceLayout;
-import org.teamapps.dto.UiWorkSpaceLayoutItem;
-import org.teamapps.dto.UiWorkSpaceLayoutView;
+import org.teamapps.commons.util.collections.ByKeyComparisonResult;
+import org.teamapps.commons.util.collections.CollectionUtil;
+import org.teamapps.dto.*;
 import org.teamapps.event.Event;
 import org.teamapps.ux.component.AbstractComponent;
 import org.teamapps.ux.component.Component;
-import org.teamapps.ux.component.Container;
-import org.teamapps.ux.component.splitpane.SplitSizePolicy;
-import org.teamapps.ux.component.workspacelayout.definition.LayoutItemDefinition;
 import org.teamapps.ux.component.panel.Panel;
+import org.teamapps.ux.component.progress.DefaultMultiProgressDisplay;
+import org.teamapps.ux.component.progress.MultiProgressDisplay;
+import org.teamapps.ux.component.splitpane.SplitSizePolicy;
 import org.teamapps.ux.component.toolbar.Toolbar;
+import org.teamapps.ux.component.workspacelayout.definition.LayoutItemDefinition;
 
-import java.util.Collections;
-import java.util.HashMap;
-import java.util.List;
-import java.util.Map;
-import java.util.Objects;
+import java.util.*;
 import java.util.stream.Collectors;
 
-public class WorkSpaceLayout extends AbstractComponent implements Container {
+public class WorkSpaceLayout extends AbstractComponent implements Component {
 
 	public static String ROOT_WINDOW_ID = "ROOT_WINDOW";
 	private static final Logger LOGGER = LoggerFactory.getLogger(WorkSpaceLayout.class);
@@ -55,12 +50,14 @@ public class WorkSpaceLayout extends AbstractComponent implements Container {
 	public final Event<WorkSpaceLayoutView> onViewClosed = new Event<>();
 	public final Event<WorkSpaceLayoutViewGroup> onViewGroupPanelStateChanged = new Event<>();
 
-	private String childWindowPageTitle = "Application window";
+	private final String childWindowPageTitle = "Application window";
 	private Toolbar toolbar;
 	private String newWindowBackgroundImage;
 	private String newWindowBlurredBackgroundImage;
+	private MultiProgressDisplay multiProgressDisplay = new DefaultMultiProgressDisplay();
 
 	private Map<String, WorkSpaceLayoutItem> rootItemsByWindowId = new HashMap<>();
+	private List<WorkSpaceLayoutView> cachedViews = List.of();
 
 	public WorkSpaceLayout(LayoutItemDefinition layoutDefinition) {
 		WorkSpaceLayoutItem rootItem = layoutDefinition.createHeavyWeightItem(this);
@@ -108,31 +105,27 @@ public UiComponent createUiComponent() {
 		List<UiWorkSpaceLayoutView> uiViews = getMainRootItem().getAllViews().stream()
 				.map(WorkSpaceLayoutView::createUiView)
 				.collect(Collectors.toList());
-		UiWorkSpaceLayout uiLayout = new UiWorkSpaceLayout(getId(), uiViews, uiInitialLayout, childWindowPageTitle);
+		UiWorkSpaceLayout uiLayout = new UiWorkSpaceLayout(uiViews, uiInitialLayout, childWindowPageTitle);
 		mapAbstractUiComponentProperties(uiLayout);
 		if (toolbar != null) {
-			uiLayout.setToolbar(toolbar.createUiComponentReference());
+			uiLayout.setToolbar(toolbar.createUiReference());
 		}
 		uiLayout.setNewWindowBackgroundImage(newWindowBackgroundImage);
 		uiLayout.setNewWindowBlurredBackgroundImage(newWindowBlurredBackgroundImage);
+		uiLayout.setMultiProgressDisplay(Component.createUiClientObjectReference(multiProgressDisplay));
 		return uiLayout;
 	}
 
-	@Override
-	protected void doDestroy() {
-		this.rootItemsByWindowId.forEach((s, workSpaceLayoutItem) -> workSpaceLayoutItem.getAllViews().forEach(view -> view.destroy()));
-		if (this.toolbar != null) {
-			this.toolbar.destroy();
-		}
-	}
-
 	@Override
 	public void handleUiEvent(UiEvent event) {
 		switch (event.getUiEventType()) {
 			case UI_WORK_SPACE_LAYOUT_LAYOUT_CHANGED: {
 				UiWorkSpaceLayout.LayoutChangedEvent layoutChangedEvent = (UiWorkSpaceLayout.LayoutChangedEvent) event;
+
 				this.rootItemsByWindowId = new LayoutApplyer(this).applyFromUiLayoutDescriptor(rootItemsByWindowId, layoutChangedEvent.getLayoutsByWindowId());
 				printLayoutSyncTraceMessage(layoutChangedEvent.getLayoutsByWindowId());
+
+				evaluateLayoutChanges();
 				break;
 			}
 			case UI_WORK_SPACE_LAYOUT_VIEW_DRAGGED_TO_NEW_WINDOW: {
@@ -165,8 +158,8 @@ public void handleUiEvent(UiEvent event) {
 							.filter(item -> item instanceof WorkSpaceLayoutViewGroup)
 							.map(item -> ((WorkSpaceLayoutViewGroup) item))
 							.findFirst().ifPresent(viewGroup -> {
-						windowRootItem.getAllViews().forEach(viewGroup::addView);
-					});
+								windowRootItem.getAllViews().forEach(viewGroup::addView);
+							});
 				}
 				this.onChildWindowClosed.fire(new ChildWindowClosedEventData(windowClosedEvent.getWindowId(), windowRootItem));
 				break;
@@ -175,10 +168,11 @@ public void handleUiEvent(UiEvent event) {
 				UiWorkSpaceLayout.ViewSelectedEvent tabSelectedEvent = (UiWorkSpaceLayout.ViewSelectedEvent) event;
 				WorkSpaceLayoutViewGroup viewGroup = this.getViewGroupById(tabSelectedEvent.getViewGroupId());
 				if (viewGroup != null) {
-					viewGroup.handleViewSelectedByClient(tabSelectedEvent.getViewName());
 					WorkSpaceLayoutView view = getViewById(tabSelectedEvent.getViewName());
+					viewGroup.setSelectedViewSilently(view);
 					this.onViewSelected.fire(new ViewSelectedEventData(viewGroup, view));
 				}
+				evaluateLayoutChanges();
 				break;
 			}
 			case UI_WORK_SPACE_LAYOUT_VIEW_CLOSED: {
@@ -191,6 +185,7 @@ public void handleUiEvent(UiEvent event) {
 					}
 					this.onViewClosed.fire(view);
 				}
+				evaluateLayoutChanges();
 				break;
 			}
 			case UI_WORK_SPACE_LAYOUT_VIEW_GROUP_PANEL_STATE_CHANGED: {
@@ -200,11 +195,29 @@ public void handleUiEvent(UiEvent event) {
 					viewGroup.setPanelStateSilently(ViewGroupPanelState.valueOf(stateChangedEvent.getPanelState().name()));
 					this.onViewGroupPanelStateChanged.fire(viewGroup);
 				}
+				evaluateLayoutChanges();
 				break;
 			}
 		}
 	}
 
+	private void evaluateLayoutChanges() {
+		List<WorkSpaceLayoutView> allOldViews = cachedViews;
+
+		LayoutItemDefinition newLayoutDefinition = extractLayoutDefinition();
+
+		cachedViews = getAllViews();
+
+		newLayoutDefinition.getEffectivelyVisibleViews()
+				.forEach(viewDefinition -> getViewById(viewDefinition.getId()).setEffectivelyVisible(true));
+		newLayoutDefinition.getEffectivelyInvisibleViews()
+				.forEach(viewDefinition -> getViewById(viewDefinition.getId()).setEffectivelyVisible(false));
+		ByKeyComparisonResult<WorkSpaceLayoutView, WorkSpaceLayoutView, String> allViewsComparisonResult = CollectionUtil.compareByKey(allOldViews, cachedViews, WorkSpaceLayoutView::getId, WorkSpaceLayoutView::getId);
+		allViewsComparisonResult.forEachRemoved(view -> {
+			view.setEffectivelyVisible(false);
+		});
+	}
+
 	public WorkSpaceLayoutViewGroup getViewGroupById(String itemId) {
 		return rootItemsByWindowId.values().stream()
 				.flatMap(root -> root.getSelfAndAncestors().stream())
@@ -237,6 +250,12 @@ private void printLayoutSyncTraceMessage(Map<String, UiWorkSpaceLayoutItem> layo
 		}
 	}
 
+	private List<WorkSpaceLayoutView> getAllViews() {
+		return rootItemsByWindowId.values().stream()
+				.flatMap(rootItem -> rootItem.getAllViews().stream())
+				.toList();
+	}
+
 	private WorkSpaceLayoutView getViewById(String viewName) {
 		return rootItemsByWindowId.values().stream()
 				.flatMap(rootItem -> rootItem.getAllViews().stream())
@@ -259,20 +278,6 @@ public void setToolbar(Toolbar toolbar) {
 		this.toolbar = toolbar;
 	}
 
-	@Override
-	public boolean isChildVisible(Component child) {
-		if (child instanceof Panel) {
-			WorkSpaceLayoutView view = getViewByPanel(((Panel) child));
-			if (view != null && view.getViewGroup() != null) {
-				return isEffectivelyVisible() && view.getViewGroup().getPanelState() != ViewGroupPanelState.MINIMIZED && view.isSelected();
-			}
-		}
-		if (child == toolbar) {
-			return isEffectivelyVisible();
-		}
-		return false;
-	}
-
 	public void setNewWindowBackgroundImage(String newWindowBackgroundImage) {
 		this.newWindowBackgroundImage = newWindowBackgroundImage;
 	}
@@ -284,18 +289,22 @@ public void setNewWindowBlurredBackgroundImage(String newWindowBlurredBackground
 	// ============== Internal API ======================
 
 	/*package-private*/ void handleViewAddedToGroup(WorkSpaceLayoutViewGroup workSpaceLayoutViewGroup, WorkSpaceLayoutView view, boolean selected) {
+		evaluateLayoutChanges();
 		queueCommandIfRendered(() -> new UiWorkSpaceLayout.AddViewAsTabCommand(getId(), view.createUiView(), workSpaceLayoutViewGroup.getId(), selected));
 	}
 
 	/*package-private*/ void handleViewGroupPanelStateChangedViaApi(WorkSpaceLayoutViewGroup viewGroup, ViewGroupPanelState panelState) {
+		evaluateLayoutChanges();
 		queueCommandIfRendered(() -> new UiWorkSpaceLayout.SetViewGroupPanelStateCommand(getId(), viewGroup.getId(), panelState.toUiViewGroupPanelState()));
 	}
 
 	/*package-private*/ void handleViewSelectedViaApi(WorkSpaceLayoutViewGroup viewGroup, WorkSpaceLayoutView workSpaceLayoutView) {
+		evaluateLayoutChanges();
 		queueCommandIfRendered(() -> new UiWorkSpaceLayout.SelectViewCommand(getId(), workSpaceLayoutView.getId()));
 	}
 
 	/*package-private*/ void handleViewRemovedViaApi(WorkSpaceLayoutViewGroup viewGroup, WorkSpaceLayoutView view) {
+		evaluateLayoutChanges();
 		if (viewGroup.getViews().isEmpty() && !viewGroup.isPersistent()) {
 			removeEmptyViewGroupFromItemTree(viewGroup);
 		}
@@ -307,6 +316,7 @@ public void setNewWindowBlurredBackgroundImage(String newWindowBlurredBackground
 	}
 
 	/*package-private*/ void handleSplitPaneSizingChanged(SplitSizePolicy sizePolicy, float referenceChildSize) {
+		evaluateLayoutChanges();
 		this.updateClientSideLayout(Collections.emptyList());
 	}
 
@@ -353,4 +363,13 @@ private WorkSpaceLayoutSplitPane findParentItem(WorkSpaceLayoutItem child) {
 				.filter(splitPane -> splitPane.getFirstChild() == child || splitPane.getLastChild() == child)
 				.findFirst().orElse(null);
 	}
+
+	public void setMultiProgressDisplay(MultiProgressDisplay multiProgressDisplay) {
+		this.multiProgressDisplay = multiProgressDisplay;
+		queueCommandIfRendered(() -> new UiWorkSpaceLayout.SetMultiProgressDisplayCommand(getId(), multiProgressDisplay.createUiReference()));
+	}
+
+	public MultiProgressDisplay getMultiProgressDisplay() {
+		return multiProgressDisplay;
+	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/workspacelayout/WorkSpaceLayoutItem.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/workspacelayout/WorkSpaceLayoutItem.java
index 3e8501a27..886420228 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/workspacelayout/WorkSpaceLayoutItem.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/workspacelayout/WorkSpaceLayoutItem.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/workspacelayout/WorkSpaceLayoutSplitPane.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/workspacelayout/WorkSpaceLayoutSplitPane.java
index 24cb96efe..fd5fcbeee 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/workspacelayout/WorkSpaceLayoutSplitPane.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/workspacelayout/WorkSpaceLayoutSplitPane.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/workspacelayout/WorkSpaceLayoutView.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/workspacelayout/WorkSpaceLayoutView.java
index 3d5497dab..84e552df3 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/workspacelayout/WorkSpaceLayoutView.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/workspacelayout/WorkSpaceLayoutView.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -21,10 +21,10 @@
 
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
-import org.teamapps.dto.UiComponentReference;
+import org.teamapps.dto.UiClientObjectReference;
 import org.teamapps.dto.UiWorkSpaceLayoutView;
 import org.teamapps.event.Event;
-import org.teamapps.icons.api.Icon;
+import org.teamapps.icons.Icon;
 import org.teamapps.ux.component.Component;
 import org.teamapps.ux.component.field.AbstractField;
 import org.teamapps.ux.component.panel.Panel;
@@ -34,17 +34,17 @@
 import org.teamapps.ux.component.workspacelayout.definition.ViewDefinition;
 import org.teamapps.ux.session.SessionContext;
 
-import java.util.ArrayList;
-import java.util.Collections;
-import java.util.List;
-import java.util.UUID;
+import java.util.*;
 
 public class WorkSpaceLayoutView {
 
 	private static final Logger LOGGER = LoggerFactory.getLogger(WorkSpaceLayout.class);
 
-	private WorkSpaceLayout workSpaceLayout;
-	private Event<Void> onRemoved = new Event<>();
+	public final Event<Boolean> onEffectiveVisibilityChanged = new Event<>();
+	private boolean effectivelyVisible;
+
+	private final WorkSpaceLayout workSpaceLayout;
+	private final Event<Void> onRemoved = new Event<>();
 
 	private final String id = UUID.randomUUID().toString();
 	private final Panel panel;
@@ -125,9 +125,9 @@ public UiWorkSpaceLayoutView createUiView() {
 			title = panel.getTitle();
 		}
 
-		UiComponentReference uiPanel = null;
+		UiClientObjectReference uiPanel = null;
 		if (!lazyLoading) {
-			uiPanel = panel.createUiComponentReference();
+			uiPanel = panel.createUiReference();
 		}
 		UiWorkSpaceLayoutView view = new UiWorkSpaceLayoutView(getId(), icon, title, uiPanel);
 		view.setTabCloseable(closeable);
@@ -214,10 +214,6 @@ public void remove() {
 		this.onRemoved.fire(null);
 	}
 
-	void destroy() {
-		panel.destroy(); // will also destroy the component
-	}
-
 	public WorkSpaceLayoutViewGroup getViewGroup() {
 		return viewGroup;
 	}
@@ -257,6 +253,18 @@ public void setVisible(boolean visible) {
 		this.workSpaceLayout.handleViewAttributeChangedViaApi(this);
 	}
 
+	/*package-private*/ void setEffectivelyVisible(boolean effectivelyVisible) {
+		boolean wasEffectivelyVisible = this.effectivelyVisible;
+		this.effectivelyVisible = effectivelyVisible;
+		if (wasEffectivelyVisible != effectivelyVisible) {
+			onEffectiveVisibilityChanged.fire(effectivelyVisible);
+		}
+	}
+
+	public boolean isEffectivelyVisible() {
+		return effectivelyVisible;
+	}
+
 	public void updateWindowButtons(boolean showButtons) {
 		if (!showButtons) {
 			this.panel.setWindowButtons(Collections.emptyList());
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/workspacelayout/WorkSpaceLayoutViewGroup.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/workspacelayout/WorkSpaceLayoutViewGroup.java
index 5243f6b8c..05bf349cf 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/workspacelayout/WorkSpaceLayoutViewGroup.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/workspacelayout/WorkSpaceLayoutViewGroup.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,9 +19,10 @@
  */
 package org.teamapps.ux.component.workspacelayout;
 
+import org.apache.commons.collections4.CollectionUtils;
 import org.teamapps.dto.UiWorkSpaceLayoutItem;
 import org.teamapps.dto.UiWorkSpaceLayoutViewGroupItem;
-import org.teamapps.icons.api.Icon;
+import org.teamapps.icons.Icon;
 import org.teamapps.ux.component.Component;
 import org.teamapps.ux.component.workspacelayout.definition.ViewGroupDefinition;
 import org.teamapps.ux.component.workspacelayout.definition.ViewDefinition;
@@ -36,7 +37,7 @@
 public class WorkSpaceLayoutViewGroup extends WorkSpaceLayoutItem {
 
 	private final boolean persistent;
-	private List<WorkSpaceLayoutView> views = new ArrayList<>();
+	private final List<WorkSpaceLayoutView> views = new ArrayList<>();
 	private WorkSpaceLayoutView selectedView;
 	private ViewGroupPanelState panelState = ViewGroupPanelState.NORMAL;
 
@@ -68,7 +69,7 @@ public WorkSpaceLayoutViewGroup(String id, List<WorkSpaceLayoutView> views, Work
 				view.setViewGroup(this);
 			});
 		}
-		this.selectedView = selectedView;
+		this.selectedView = selectedView != null ? selectedView : CollectionUtils.isNotEmpty(views) ? views.get(0) : null;
 		this.persistent = persistent;
 		this.updateSelectedViewPanelWindowButtons();
 	}
@@ -147,8 +148,8 @@ public WorkSpaceLayoutViewGroup removeView(WorkSpaceLayoutView view) {
 		if (removed && getWorkSpaceLayout() != null) {
 			getWorkSpaceLayout().handleViewRemovedViaApi(this, view);
 		}
-		if (views.size() == 0) {
-			selectedView = null;
+		if (!views.contains(selectedView)) {
+			selectedView = views.size() > 0 ? views.get(0) : null;
 		}
 		return this;
 	}
@@ -207,10 +208,12 @@ void handleViewRemovedByClient(WorkSpaceLayoutView view) {
 	}
 
 	void addViewSilently(WorkSpaceLayoutView view, int index, boolean select) {
-		this.views.remove(view);
-		this.views.add(Math.min(views.size(), index), view);
-		view.setViewGroup(this);
-		if (select || this.views.size() == 1) {
+		if (this.views.size() <= index || this.views.get(index) != view) {
+			this.views.remove(view);
+			this.views.add(Math.min(views.size(), index), view);
+			view.setViewGroup(this);
+		}
+		if ((select && this.selectedView != view) || this.views.size() == 1) {
 			this.selectedView = view;
 			updateSelectedViewPanelWindowButtons();
 		}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/workspacelayout/definition/LayoutItemDefinition.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/workspacelayout/definition/LayoutItemDefinition.java
index 1cb586e5d..6631cb6b5 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/workspacelayout/definition/LayoutItemDefinition.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/workspacelayout/definition/LayoutItemDefinition.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -55,10 +55,15 @@ public boolean containsLayoutPosition(String layoutPosition) {
 		return getAllLayoutPositions().contains(layoutPosition);
 	}
 
-	public List<ViewDefinition> getAllViews(boolean visible) {
+	public abstract List<ViewDefinition> getEffectivelyVisibleViews();
+
+	public List<ViewDefinition> getEffectivelyInvisibleViews() {
+		Set<String> visibleViewNames = getEffectivelyVisibleViews().stream()
+				.map(ViewDefinition::getId)
+				.collect(Collectors.toSet());
 		return getAllViews().stream()
-				.filter(viewDefinition -> viewDefinition.isVisible())
-				.collect(Collectors.toList());
+				.filter(view -> !visibleViewNames.contains(view.getId()))
+				.toList();
 	}
 
 	public abstract List<LayoutItemDefinition> getSelfAndAncestors();
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/workspacelayout/definition/SplitPaneDefinition.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/workspacelayout/definition/SplitPaneDefinition.java
index 8db0cad35..2f921b810 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/workspacelayout/definition/SplitPaneDefinition.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/workspacelayout/definition/SplitPaneDefinition.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -27,6 +27,7 @@
 
 import java.util.ArrayList;
 import java.util.List;
+import java.util.Objects;
 
 public class SplitPaneDefinition extends LayoutItemDefinition {
 
@@ -82,6 +83,18 @@ public List<ViewDefinition> getAllViews() {
 		return allViews;
 	}
 
+	@Override
+	public List<ViewDefinition> getEffectivelyVisibleViews() {
+		List<ViewDefinition> effectivelyVisibleViews = new ArrayList<>();
+		if (firstChild != null) {
+			effectivelyVisibleViews.addAll(firstChild.getEffectivelyVisibleViews());
+		}
+		if (lastChild != null) {
+			effectivelyVisibleViews.addAll(lastChild.getEffectivelyVisibleViews());
+		}
+		return effectivelyVisibleViews;
+	}
+
 	@Override
 	public List<LayoutItemDefinition> getSelfAndAncestors() {
 		ArrayList<LayoutItemDefinition> result = new ArrayList<>();
@@ -144,4 +157,39 @@ public void setLastChild(LayoutItemDefinition lastChild) {
 		this.lastChild = lastChild;
 		updateViewGroupParents();
 	}
+
+	public String getComparableDefinition() {
+		return "SplitPaneDefinition{" +
+				"splitDirection=" + splitDirection +
+				", sizePolicy=" + sizePolicy +
+				", referenceChildSize=" + referenceChildSize +
+				", firstChild=" + getChildLayoutDefinition(firstChild) +
+				", lastChild=" + getChildLayoutDefinition(lastChild) +
+				'}';
+	}
+
+	private String getChildLayoutDefinition(LayoutItemDefinition layoutItemDefinition) {
+		if (layoutItemDefinition == null) {
+			return null;
+		}
+		if (layoutItemDefinition instanceof SplitPaneDefinition) {
+			SplitPaneDefinition splitPaneDefinition = (SplitPaneDefinition) layoutItemDefinition;
+			return splitPaneDefinition.getComparableDefinition();
+		} else {
+			return layoutItemDefinition.getClass().getName();
+		}
+	}
+
+	@Override
+	public boolean equals(Object o) {
+		if (this == o) return true;
+		if (o == null || getClass() != o.getClass()) return false;
+		SplitPaneDefinition that = (SplitPaneDefinition) o;
+		return getComparableDefinition().equals(that.getComparableDefinition());
+	}
+
+	@Override
+	public int hashCode() {
+		return Objects.hash(getComparableDefinition());
+	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/workspacelayout/definition/SplitSize.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/workspacelayout/definition/SplitSize.java
index a9f5a4a24..ff982f509 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/workspacelayout/definition/SplitSize.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/workspacelayout/definition/SplitSize.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/workspacelayout/definition/ViewDefinition.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/workspacelayout/definition/ViewDefinition.java
index 604ee9a9a..a10151d25 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/workspacelayout/definition/ViewDefinition.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/workspacelayout/definition/ViewDefinition.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/workspacelayout/definition/ViewGroupDefinition.java b/teamapps-ux/src/main/java/org/teamapps/ux/component/workspacelayout/definition/ViewGroupDefinition.java
index 05f2fe0c3..6dc8341b3 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/workspacelayout/definition/ViewGroupDefinition.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/component/workspacelayout/definition/ViewGroupDefinition.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -51,7 +51,17 @@ public ViewGroupDefinition(String id, boolean persistent, List<ViewDefinition> v
 
 	@Override
 	public List<ViewDefinition> getAllViews() {
-		return views;
+		return List.copyOf(views);
+	}
+
+	@Override
+	public List<ViewDefinition> getEffectivelyVisibleViews() {
+		if (panelState == ViewGroupPanelState.MINIMIZED) {
+			return List.of();
+		} else if (selectedView != null && views.stream().anyMatch(v -> v.getId().equals(selectedView.getId()))) {
+			return List.of(selectedView);
+		}
+		return List.of();
 	}
 
 	@Override
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/css/CssAlignItems.java b/teamapps-ux/src/main/java/org/teamapps/ux/css/CssAlignItems.java
index 444ba89a0..ea7f634b9 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/css/CssAlignItems.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/css/CssAlignItems.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/css/CssFlexDirection.java b/teamapps-ux/src/main/java/org/teamapps/ux/css/CssFlexDirection.java
index 08398290b..135c11203 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/css/CssFlexDirection.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/css/CssFlexDirection.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/css/CssJustifyContent.java b/teamapps-ux/src/main/java/org/teamapps/ux/css/CssJustifyContent.java
index 016b2c10d..398bdc026 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/css/CssJustifyContent.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/css/CssJustifyContent.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -23,7 +23,7 @@
 
 public enum CssJustifyContent {
 
-	FLEX_START, FLEX_END, CENTER, SPACE_BETWEEN, SPACE_AROUND, INITIAL, INHERIT;
+	START, END, CENTER, SPACE_BETWEEN, SPACE_AROUND, SPACE_EVENLY, INITIAL, INHERIT;
 
 	public UiCssJustifyContent toUiCssJustifyContent() {
 		return UiCssJustifyContent.valueOf(this.name());
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/css/CssStyles.java b/teamapps-ux/src/main/java/org/teamapps/ux/css/CssStyles.java
index 3b2d9670b..514d06f10 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/css/CssStyles.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/css/CssStyles.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,16 +19,10 @@
  */
 package org.teamapps.ux.css;
 
-import org.apache.commons.lang3.StringUtils;
-import org.jetbrains.annotations.NotNull;
-import org.jetbrains.annotations.Nullable;
-
-import java.util.Arrays;
 import java.util.Collection;
 import java.util.HashMap;
 import java.util.Map;
 import java.util.Set;
-import java.util.stream.Collectors;
 
 public class CssStyles implements Map<String, String> {
 
@@ -57,7 +51,7 @@ public boolean isEmpty() {
 
 	@Override
 	public boolean containsKey(Object propertyName) {
-		return properties.containsKey(propertyName);
+		return properties.containsKey((String) propertyName);
 	}
 
 	@Override
@@ -67,23 +61,22 @@ public boolean containsValue(Object value) {
 
 	@Override
 	public String get(Object propertyName) {
-		return properties.get(propertyName);
+		return properties.get((String) propertyName);
 	}
 
-	@Nullable
 	@Override
 	public String put(String propertyName, String value) {
-		return properties.put(kebabToCamelCase(propertyName), value);
+		return properties.put(propertyName, value);
 	}
 
 	@Override
 	public String remove(Object propertyName) {
-		return properties.remove(propertyName);
+		return properties.remove((String) propertyName);
 	}
 
 	@Override
-	public void putAll(@NotNull Map<? extends String, ? extends String> m) {
-		properties.putAll(m);
+	public void putAll(Map<? extends String, ? extends String> m) {
+		m.forEach((propertyName, value) -> properties.put((String) propertyName, value));
 	}
 
 	@Override
@@ -91,19 +84,16 @@ public void clear() {
 		properties.clear();
 	}
 
-	@NotNull
 	@Override
 	public Set<String> keySet() {
 		return properties.keySet();
 	}
 
-	@NotNull
 	@Override
 	public Collection<String> values() {
 		return properties.values();
 	}
 
-	@NotNull
 	@Override
 	public Set<Entry<String, String>> entrySet() {
 		return properties.entrySet();
@@ -119,15 +109,4 @@ public int hashCode() {
 		return properties.hashCode();
 	}
 
-	public static String kebabToCamelCase(String kebab) {
-		if (kebab == null) {
-			return null;
-		}
-		if (!kebab.contains("-")) {
-			return kebab;
-		}
-		return StringUtils.uncapitalize(Arrays.stream(kebab.split("-"))
-				.map(part -> StringUtils.capitalize(part))
-				.collect(Collectors.joining()));
-	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/caption/MultiResourceBundle.java b/teamapps-ux/src/main/java/org/teamapps/ux/i18n/MultiResourceBundle.java
similarity index 96%
rename from teamapps-ux/src/main/java/org/teamapps/ux/caption/MultiResourceBundle.java
rename to teamapps-ux/src/main/java/org/teamapps/ux/i18n/MultiResourceBundle.java
index be0e46ed7..ea1d24e46 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/caption/MultiResourceBundle.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/i18n/MultiResourceBundle.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,7 +17,7 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-package org.teamapps.ux.caption;
+package org.teamapps.ux.i18n;
 
 import java.util.ArrayList;
 import java.util.Collections;
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/i18n/RankedTranslationProvider.java b/teamapps-ux/src/main/java/org/teamapps/ux/i18n/RankedTranslationProvider.java
new file mode 100644
index 000000000..950c47486
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/i18n/RankedTranslationProvider.java
@@ -0,0 +1,52 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.i18n;
+
+import java.util.*;
+import java.util.stream.Collectors;
+
+public class RankedTranslationProvider implements TranslationProvider {
+
+	private final List<TranslationProvider> translationProviders;
+
+	public RankedTranslationProvider(TranslationProvider... translationProviders) {
+		this.translationProviders = Arrays.asList(translationProviders);
+	}
+
+	@Override
+	public String getTranslation(String key, Locale locale) {
+		for (TranslationProvider translationProvider : translationProviders) {
+			try {
+				return translationProvider.getTranslation(key, locale);
+			} catch (MissingResourceException e) {
+				// ignore
+			}
+		}
+		throw new MissingResourceException("Can't find resource " + key, this.getClass().getName(), key);
+	}
+
+	@Override
+	public Set<String> getKeys(Locale locale) {
+		return translationProviders.stream()
+				.flatMap(tp -> tp.getKeys(locale).stream())
+				.collect(Collectors.toSet());
+	}
+
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/i18n/ResourceBundleTranslationProvider.java b/teamapps-ux/src/main/java/org/teamapps/ux/i18n/ResourceBundleTranslationProvider.java
new file mode 100644
index 000000000..88d1b515f
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/i18n/ResourceBundleTranslationProvider.java
@@ -0,0 +1,67 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.i18n;
+
+import java.util.*;
+import java.util.concurrent.ConcurrentHashMap;
+
+public class ResourceBundleTranslationProvider implements TranslationProvider {
+
+	private final String baseName;
+	private final ResourceBundle.Control resourceBundleControl;
+	private final Map<Locale, ResourceBundle> resourceBundleByLocale = new ConcurrentHashMap<>();
+
+	public ResourceBundleTranslationProvider(String baseName) {
+		this(baseName, "properties");
+	}
+
+	public ResourceBundleTranslationProvider(String baseName, String resourceFileSuffix) {
+		this(baseName, resourceFileSuffix, Locale.getDefault());
+	}
+
+	public ResourceBundleTranslationProvider(String baseName, Locale fallbackLocale) {
+		this(baseName, "properties", fallbackLocale);
+	}
+
+	public ResourceBundleTranslationProvider(String baseName, String resourceFileSuffix, Locale fallbackLocale) {
+		this(baseName, new TeamAppsResourceBundleControl(resourceFileSuffix, fallbackLocale));
+	}
+
+	public ResourceBundleTranslationProvider(String baseName, ResourceBundle.Control control) {
+		this.baseName = baseName;
+		this.resourceBundleControl = control;
+	}
+
+	@Override
+	public String getTranslation(String key, Locale locale) {
+		ResourceBundle propertyResourceBundle = getResourceBundle(locale);
+		return propertyResourceBundle.getString(key);
+	}
+
+	@Override
+	public List<String> getKeys(Locale locale) {
+		return Collections.list(getResourceBundle(locale).getKeys());
+	}
+
+	private ResourceBundle getResourceBundle(Locale locale) {
+		return resourceBundleByLocale.computeIfAbsent(locale,
+				language -> ResourceBundle.getBundle(this.baseName, language, resourceBundleControl));
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/i18n/TeamAppsDictionary.java b/teamapps-ux/src/main/java/org/teamapps/ux/i18n/TeamAppsDictionary.java
new file mode 100644
index 000000000..293f79640
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/i18n/TeamAppsDictionary.java
@@ -0,0 +1,109 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.i18n;
+
+public enum TeamAppsDictionary {
+
+	LOGIN("login"),
+	PASSWORD("password"),
+	RESET_PASSWORD("resetPassword"),
+	WRONG_USER_NAME_OR_PASSWORD("wrongUserNameOrPassword"),
+	USER_NAME("userName"),
+	USER_I_D("userID"),
+	ADD("add"),
+	ADD_RECORD("addRecord"),
+	EDIT("edit"),
+	REMOVE("remove"),
+	REMOVE_SELECTION("removeSelection"),
+	REMOVE_ALL_FILTERS("removeAllFilters"),
+	DELETE("delete"),
+	DELETE_RECORD("deleteRecord"),
+	SAVE("save"),
+	SAVE_CHANGES("saveChanges"),
+	SAVE_AND_CLOSE("saveAndClose"),
+	REVERT("revert"),
+	REVERT_CHANGES("revertChanges"),
+	ERROR("error"),
+	OK("ok"),
+	CANCEL("cancel"),
+	CANCEL_AND_CLOSE("cancelAndClose"),
+	PRINT("print"),
+	HELP("help"),
+	UPLOAD("upload"),
+	DOWNLOAD("download"),
+	REGISTER("register"),
+	ROTATE("rotate"),
+	ROTATE_PICTURE("rotatePicture"),
+	CROP_IMAGE("cropImage"),
+	YEAR("year"),
+	MONTH("month"),
+	WEEK("week"),
+	DAY("day"),
+	GROUP("group"),
+	GROUPING("grouping"),
+	BY_FULL_VALUE("byFullValue"),
+	BY_WORDS("byWords"),
+	BY_YEAR("byYear"),
+	BY_QUARTER("byQuarter"),
+	BY_MONTH("byMonth"),
+	BY_WEEK("byWeek"),
+	BY_Day("byDay"),
+	TODAY("today"),
+	NOW("now"),
+	PREVIOUS("previous"),
+	NEXT("next"),
+	BACK("back"),
+	CREATION_DATE("creationDate"),
+	MODIFICATION_DATE("modificationDate"),
+	DELETION_DATE("deletionDate"),
+	RESTORE_DATE("restoreDate"),
+	CREATED_BY("createdBy"),
+	MODIFIED_BY("modifiedBy"),
+	DELETED_BY("deletedBy"),
+	RESTORED_BY("restoredBy"),
+	SEARCH("search"),
+	SEARCH___("search___"),
+	VALUES("values"),
+	COUNT("count"),
+	FILTER("filter"),
+	EMPTY("empty"),
+	SELECT("select"),
+	SELECT_AREA("selectArea"),
+	REQUIRED_FIELD("requiredField"),
+	RECORD_SUCCESSFULLY_SAVED("recordSuccessfullySaved"),
+	RECORD_SUCCESSFULLY_DELETED("recordSuccessfullyDeleted"),
+	FILE_TOO_LARGE_MESSAGE("fileTooLargeMsg"),
+	FILE_TOO_LARGE_SHORT_MESSAGE("fileTooLargeShortMsg"),
+	UPLOAD_ERROR_MESSAGE("uploadErrorMsg"),
+	UPLOAD_ERROR_SHORT_MESSAGE("uploadErrorShortMsg"),
+	NO_RUNNING_TASKS("noRunningTasks"),
+
+	;
+
+	private final String key;
+
+	TeamAppsDictionary(String key) {
+		this.key = key;
+	}
+
+	public String getKey() {
+		return "teamapps.common." + key;
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/i18n/TeamAppsResourceBundleControl.java b/teamapps-ux/src/main/java/org/teamapps/ux/i18n/TeamAppsResourceBundleControl.java
new file mode 100644
index 000000000..62ff035ba
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/i18n/TeamAppsResourceBundleControl.java
@@ -0,0 +1,91 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.i18n;
+
+import java.io.IOException;
+import java.io.InputStream;
+import java.io.InputStreamReader;
+import java.net.URL;
+import java.net.URLConnection;
+import java.nio.charset.StandardCharsets;
+import java.util.List;
+import java.util.Locale;
+import java.util.PropertyResourceBundle;
+import java.util.ResourceBundle;
+
+/**
+ * Handles UTF-8 resource bundles (properties files only).
+ * Makes fallback locale explicitly configurable.
+ */
+public class TeamAppsResourceBundleControl extends ResourceBundle.Control {
+
+	private final String resourceFileSuffix;
+	private final Locale fallbackLocale;
+
+	public TeamAppsResourceBundleControl(String resourceFileSuffix, Locale fallbackLocale) {
+		this.resourceFileSuffix = resourceFileSuffix;
+		this.fallbackLocale = fallbackLocale;
+	}
+
+	@Override
+	public ResourceBundle newBundle(String baseName, Locale locale, String format, ClassLoader loader, boolean reload) throws IOException {
+		// The below is a copy of the default implementation.
+		String bundleName = toBundleName(baseName, locale);
+		String resourceName = toResourceName(bundleName, resourceFileSuffix);
+		ResourceBundle bundle = null;
+		InputStream stream = null;
+		if (reload) {
+			URL url = loader.getResource(resourceName);
+			if (url != null) {
+				URLConnection connection = url.openConnection();
+				if (connection != null) {
+					connection.setUseCaches(false);
+					stream = connection.getInputStream();
+				}
+			}
+		} else {
+			stream = loader.getResourceAsStream(resourceName);
+		}
+		if (stream != null) {
+			try {
+				// Only this line is changed to make it to read properties files as UTF-8.
+				bundle = new PropertyResourceBundle(new InputStreamReader(stream, StandardCharsets.UTF_8));
+			} finally {
+				stream.close();
+			}
+		}
+		return bundle;
+	}
+
+	@Override
+	public Locale getFallbackLocale(String baseName, Locale locale) {
+		if (baseName == null) {
+			throw new NullPointerException();
+		}
+		return locale.equals(fallbackLocale) ? null : fallbackLocale;
+	}
+
+	@Override
+	public List<Locale> getCandidateLocales(String baseName, Locale locale) {
+		List<Locale> list = super.getCandidateLocales(baseName, locale);
+		list.add(fallbackLocale);
+		return list;
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/application/ManagedResourceBundleProvider.java b/teamapps-ux/src/main/java/org/teamapps/ux/i18n/TranslationProvider.java
similarity index 57%
rename from teamapps-ux/src/main/java/org/teamapps/ux/application/ManagedResourceBundleProvider.java
rename to teamapps-ux/src/main/java/org/teamapps/ux/i18n/TranslationProvider.java
index eb19da14b..f5a438b5f 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/application/ManagedResourceBundleProvider.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/i18n/TranslationProvider.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,14 +17,24 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-package org.teamapps.ux.application;
+package org.teamapps.ux.i18n;
 
+import java.text.MessageFormat;
+import java.util.Collection;
 import java.util.Locale;
-import java.util.ResourceBundle;
 
-public interface ManagedResourceBundleProvider {
+public interface TranslationProvider {
 
-    void registerApplicationResourceBundle(ResponsiveApplicationBuilder applicationBuilder);
+	String getTranslation(String key, Locale locale);
+
+	Collection<String> getKeys(Locale locale);
+
+	default String getLocalized(Locale locale, String key, Object... parameters) {
+		String value = getTranslation(key, locale);
+		if (value != null) {
+			return MessageFormat.format(value, parameters); // always use format, even without parameters, for consistent escaping!
+		}
+		return key;
+	}
 
-    ResourceBundle getManagedResourceBundle(ResponsiveApplicationBuilder applicationBuilder, Locale locale);
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/icon/IconBundle.java b/teamapps-ux/src/main/java/org/teamapps/ux/icon/IconBundle.java
new file mode 100644
index 000000000..a954d4602
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/icon/IconBundle.java
@@ -0,0 +1,33 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.icon;
+
+import java.util.Arrays;
+import java.util.List;
+
+public interface IconBundle {
+
+	static IconBundle create(IconBundleEntry[] entries) {
+		return () -> Arrays.asList(entries);
+	}
+
+	List<IconBundleEntry> getEntries();
+
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/application/Application.java b/teamapps-ux/src/main/java/org/teamapps/ux/icon/IconBundleEntry.java
similarity index 80%
rename from teamapps-ux/src/main/java/org/teamapps/ux/application/Application.java
rename to teamapps-ux/src/main/java/org/teamapps/ux/icon/IconBundleEntry.java
index a11f54580..e6bda9de4 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/application/Application.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/icon/IconBundleEntry.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,12 +17,14 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-package org.teamapps.ux.application;
+package org.teamapps.ux.icon;
 
-import org.teamapps.ux.component.Component;
+import org.teamapps.icons.Icon;
 
-public interface Application  {
+public interface IconBundleEntry {
 
-	Component createUi();
+	String getKey();
+
+	Icon getIcon();
 
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/icon/TeamAppsIconBundle.java b/teamapps-ux/src/main/java/org/teamapps/ux/icon/TeamAppsIconBundle.java
new file mode 100644
index 000000000..1908f6991
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/icon/TeamAppsIconBundle.java
@@ -0,0 +1,81 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.icon;
+
+import org.teamapps.icon.material.MaterialIcon;
+import org.teamapps.icons.Icon;
+
+public enum TeamAppsIconBundle implements IconBundleEntry {
+
+	ADD(MaterialIcon.ADD),
+	SAVE(MaterialIcon.SAVE),
+	DELETE(MaterialIcon.DELETE),
+	UNDO(MaterialIcon.UNDO),
+	CANCEL(MaterialIcon.CANCEL),
+
+	FILTER(MaterialIcon.FILTER),
+	SEARCH(MaterialIcon.SEARCH),
+	SELECTION(MaterialIcon.SELECT_ALL),
+	REMOVE(MaterialIcon.REMOVE),
+
+	BACK(MaterialIcon.NAVIGATE_BEFORE),
+	PREVIOUS(MaterialIcon.NAVIGATE_BEFORE),
+	NEXT(MaterialIcon.NAVIGATE_NEXT),
+
+	YEAR(MaterialIcon.EVENT_NOTE),
+	MONTH(MaterialIcon.DATE_RANGE),
+	WEEK(MaterialIcon.VIEW_WEEK),
+	DAY(MaterialIcon.VIEW_DAY),
+
+	APPLICATION_LAUNCHER(MaterialIcon.VIEW_MODULE),
+	TREE(MaterialIcon.TOC),
+	VIEWS(MaterialIcon.VIEW_CAROUSEL),
+	TOOLBAR(MaterialIcon.SUBTITLES),
+
+	UPLOAD(MaterialIcon.BACKUP),
+
+	REFERENCE(MaterialIcon.LINK),
+	MULTI_REFERENCE(MaterialIcon.LINEAR_SCALE),
+	ENUM(MaterialIcon.LIST),
+
+	;
+
+	public static IconBundle createBundle() {
+		return IconBundle.create(values());
+	}
+
+	private final Icon icon;
+
+	TeamAppsIconBundle(Icon icon) {
+		this.icon = icon;
+	}
+
+	@Override
+	public String getKey() {
+		return "teamApps_" + name();
+	}
+
+	@Override
+	public Icon getIcon() {
+		return icon;
+	}
+
+
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/json/UxJacksonSerializationTemplate.java b/teamapps-ux/src/main/java/org/teamapps/ux/json/UxJacksonSerializationTemplate.java
index 5cc367ba6..d91fb7fac 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/json/UxJacksonSerializationTemplate.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/json/UxJacksonSerializationTemplate.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -20,32 +20,24 @@
 package org.teamapps.ux.json;
 
 import com.fasterxml.jackson.core.JsonGenerator;
-import com.fasterxml.jackson.core.JsonParser;
-import com.fasterxml.jackson.databind.DeserializationContext;
-import com.fasterxml.jackson.databind.JsonDeserializer;
 import com.fasterxml.jackson.databind.JsonSerializer;
-import com.fasterxml.jackson.databind.ObjectMapper;
 import com.fasterxml.jackson.databind.SerializerProvider;
 import com.fasterxml.jackson.databind.jsontype.TypeSerializer;
 import com.fasterxml.jackson.databind.module.SimpleModule;
-import org.teamapps.icons.api.Icon;
-import org.teamapps.icons.api.StaticIcon;
+import org.teamapps.icons.Icon;
 import org.teamapps.ux.session.SessionContext;
 
 import java.io.IOException;
 
 public class UxJacksonSerializationTemplate {
 
-	private static final SimpleModule UX_SERIALIZERS_JACKSON_MODULE = new UxSerializersJacksonModule();
+	public static final SimpleModule UX_SERIALIZERS_JACKSON_MODULE = new UxSerializersJacksonModule();
 	private static final ThreadLocal<SessionContext> SESSION_CONTEXT_THREAD_LOCAL = new ThreadLocal<>();
 
-	private SessionContext sessionContext;
+	private final SessionContext sessionContext;
 
-	public UxJacksonSerializationTemplate(ObjectMapper objectMapper, SessionContext sessionContext) {
+	public UxJacksonSerializationTemplate(SessionContext sessionContext) {
 		this.sessionContext = sessionContext;
-		if (!objectMapper.getRegisteredModuleIds().contains(UxSerializersJacksonModule.class)) {
-			objectMapper.registerModule(UX_SERIALIZERS_JACKSON_MODULE);
-		}
 	}
 
 	public void doWithUxJacksonSerializers(Runnable runnable) {
@@ -57,7 +49,7 @@ public void doWithUxJacksonSerializers(Runnable runnable) {
 		}
 	}
 
-	private static SessionContext getCurrentSessionContext() {
+	private static SessionContext getSessionContext() {
 		return SESSION_CONTEXT_THREAD_LOCAL.get();
 	}
 
@@ -67,7 +59,7 @@ public UxSerializersJacksonModule() {
 			this.addSerializer(Icon.class, new JsonSerializer<Icon>() {
 				@Override
 				public void serialize(Icon icon, JsonGenerator gen, SerializerProvider serializers) throws IOException {
-					SessionContext currentSessionContext = getCurrentSessionContext();
+					SessionContext currentSessionContext = getSessionContext();
 					gen.writeString(currentSessionContext.resolveIcon(icon));
 				}
 
@@ -76,13 +68,6 @@ public void serializeWithType(Icon value, JsonGenerator gen, SerializerProvider
 					serialize(value, gen, serializers);
 				}
 			});
-			this.addDeserializer(Icon.class, new JsonDeserializer<Icon>() {
-				@Override
-				public Icon deserialize(JsonParser p, DeserializationContext ctxt) throws IOException {
-					String qualifiedIconId = p.getText();
-					return new StaticIcon(qualifiedIconId);
-				}
-			});
 		}
 
 		@Override
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/model/AbstractTreeModel.java b/teamapps-ux/src/main/java/org/teamapps/ux/model/AbstractTreeModel.java
index 917ceb91d..9d8885182 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/model/AbstractTreeModel.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/model/AbstractTreeModel.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -25,11 +25,11 @@
 
 public abstract class AbstractTreeModel<RECORD> implements TreeModel<RECORD> {
 
-	public final Event<List<RECORD>> onAllNodesChanged = new Event<>();
+	public final Event<Void> onAllNodesChanged = new Event<>();
 	public final Event<TreeModelChangedEventData<RECORD>> onChanged = new Event<>();
 
 	@Override
-	public Event<List<RECORD>> onAllNodesChanged() {
+	public Event<Void> onAllNodesChanged() {
 		return onAllNodesChanged;
 	}
 
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/model/BaseTreeModel.java b/teamapps-ux/src/main/java/org/teamapps/ux/model/BaseTreeModel.java
index 557c0d302..65e092e83 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/model/BaseTreeModel.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/model/BaseTreeModel.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,17 +19,19 @@
  */
 package org.teamapps.ux.model;
 
+import org.teamapps.ux.component.tree.TreeNodeInfoExtractor;
+
 import java.util.Collections;
 import java.util.List;
 
-public interface BaseTreeModel<RECORD> {
-
-	List<RECORD> getRecords(String query);
+public interface BaseTreeModel<RECORD> extends TreeNodeInfoExtractor<RECORD> {
 
+	/**
+	 * Get the child records of a node. This is currently only used for lazy parent nodes but might be used
+	 * for other reasons later.
+	 */
 	default List<RECORD> getChildRecords(RECORD parentRecord) {
 		return Collections.emptyList();
 	}
 
-
-
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/model/ComboBoxModel.java b/teamapps-ux/src/main/java/org/teamapps/ux/model/ComboBoxModel.java
new file mode 100644
index 000000000..ee58f7fc2
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/model/ComboBoxModel.java
@@ -0,0 +1,28 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.model;
+
+import java.util.List;
+
+public interface ComboBoxModel<RECORD> extends BaseTreeModel<RECORD> {
+	
+	List<RECORD> getRecords(String query);
+
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/model/ListTreeModel.java b/teamapps-ux/src/main/java/org/teamapps/ux/model/ListTreeModel.java
new file mode 100644
index 000000000..114311058
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/model/ListTreeModel.java
@@ -0,0 +1,90 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.model;
+
+import org.apache.commons.lang3.StringUtils;
+import org.teamapps.ux.component.tree.TreeNodeInfo;
+
+import java.util.ArrayList;
+import java.util.List;
+import java.util.function.BiPredicate;
+import java.util.function.Function;
+import java.util.stream.Collectors;
+
+public class ListTreeModel<RECORD> extends AbstractTreeModel<RECORD> implements ComboBoxModel<RECORD> {
+
+	private final List<RECORD> records = new ArrayList<>();
+	private BiPredicate<RECORD, String> searchPredicate = (record, queryString) -> record.toString() != null && record.toString().toLowerCase().contains(queryString.toLowerCase());
+	private Function<RECORD, TreeNodeInfo> treeNodeInfoFunction;
+
+	public ListTreeModel(List<RECORD> records) {
+		this(records, null);
+	}
+
+	public ListTreeModel(List<RECORD> records, BiPredicate<RECORD, String> searchPredicate) {
+		this.records.addAll(records);
+		if (searchPredicate != null) {
+			this.searchPredicate = searchPredicate;
+		}
+	}
+
+	public void setTreeNodeInfoFunction(Function<RECORD, TreeNodeInfo> treeNodeInfoFunction) {
+		this.treeNodeInfoFunction = treeNodeInfoFunction;
+	}
+
+	@Override
+	public TreeNodeInfo getTreeNodeInfo(RECORD record) {
+		if (treeNodeInfoFunction != null) {
+			return treeNodeInfoFunction.apply(record);
+		} else {
+			return super.getTreeNodeInfo(record);
+		}
+	}
+
+	@Override
+	public List<RECORD> getRecords() {
+		return records;
+	}
+
+	@Override
+	public List<RECORD> getRecords(String query) {
+		if (StringUtils.isBlank(query)) {
+			return records;
+		} else {
+			return records.stream()
+					.filter(r -> searchPredicate.test(r, query))
+					.collect(Collectors.toList());
+		}
+	}
+
+	public void setRecords(List<RECORD> records) {
+		this.records.clear();
+		this.records.addAll(records);
+		onAllNodesChanged.fire();
+	}
+
+	public BiPredicate<RECORD, String> getSearchPredicate() {
+		return searchPredicate;
+	}
+
+	public void setSearchPredicate(BiPredicate<RECORD, String> searchPredicate) {
+		this.searchPredicate = searchPredicate;
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/model/NodeRelocatedEventData.java b/teamapps-ux/src/main/java/org/teamapps/ux/model/NodeRelocatedEventData.java
index ec3883d67..5229ed478 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/model/NodeRelocatedEventData.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/model/NodeRelocatedEventData.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/model/TreeModel.java b/teamapps-ux/src/main/java/org/teamapps/ux/model/TreeModel.java
index f63151d9e..04c982ba5 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/model/TreeModel.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/model/TreeModel.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -21,12 +21,27 @@
 
 import org.teamapps.event.Event;
 
+import java.util.Arrays;
+import java.util.Collections;
 import java.util.List;
 
 public interface TreeModel<RECORD> extends BaseTreeModel<RECORD> {
 
-	Event<List<RECORD>> onAllNodesChanged();
+	Event<Void> onAllNodesChanged();
 
 	Event<TreeModelChangedEventData<RECORD>> onChanged();
 
+	List<RECORD> getRecords();
+
+
+	// CONVENIENCE:
+
+	default void updateNodes(List<RECORD> records) {
+		onChanged().fire(new TreeModelChangedEventData<>(Collections.emptyList(), records));
+	}
+
+	default void updateNodes(RECORD... records) {
+		updateNodes(Arrays.asList(records));
+	}
+
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/model/TreeModelChangedEventData.java b/teamapps-ux/src/main/java/org/teamapps/ux/model/TreeModelChangedEventData.java
index 2f507d01a..f2549bf63 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/model/TreeModelChangedEventData.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/model/TreeModelChangedEventData.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -22,27 +22,27 @@
 import java.util.List;
 
 public class TreeModelChangedEventData<RECORD> {
-	private List<RECORD> nodesRemoved;
-	private List<RECORD> nodesAddedOrUpdated;
+	private List<RECORD> removedNodes;
+	private List<RECORD> addedOrUpdatedNodes;
 
-	public TreeModelChangedEventData(List<RECORD> nodesRemoved, List<RECORD> nodesAddedOrUpdated) {
-		this.nodesRemoved = nodesRemoved;
-		this.nodesAddedOrUpdated = nodesAddedOrUpdated;
+	public TreeModelChangedEventData(List<RECORD> removedNodes, List<RECORD> addedOrUpdatedNodes) {
+		this.removedNodes = removedNodes;
+		this.addedOrUpdatedNodes = addedOrUpdatedNodes;
 	}
 
-	public List<RECORD> getNodesRemoved() {
-		return nodesRemoved;
+	public List<RECORD> getRemovedNodes() {
+		return removedNodes;
 	}
 
-	public void setNodesRemoved(List<RECORD> nodesRemoved) {
-		this.nodesRemoved = nodesRemoved;
+	public void setRemovedNodes(List<RECORD> removedNodes) {
+		this.removedNodes = removedNodes;
 	}
 
-	public List<RECORD> getNodesAddedOrUpdated() {
-		return nodesAddedOrUpdated;
+	public List<RECORD> getAddedOrUpdatedNodes() {
+		return addedOrUpdatedNodes;
 	}
 
-	public void setNodesAddedOrUpdated(List<RECORD> nodesAddedOrUpdated) {
-		this.nodesAddedOrUpdated = nodesAddedOrUpdated;
+	public void setAddedOrUpdatedNodes(List<RECORD> addedOrUpdatedNodes) {
+		this.addedOrUpdatedNodes = addedOrUpdatedNodes;
 	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/component/login/LoginAuthenticator.java b/teamapps-ux/src/main/java/org/teamapps/ux/resolvable/Resolvable.java
similarity index 80%
rename from teamapps-ux/src/main/java/org/teamapps/ux/component/login/LoginAuthenticator.java
rename to teamapps-ux/src/main/java/org/teamapps/ux/resolvable/Resolvable.java
index a6773c05a..b95a4f78f 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/component/login/LoginAuthenticator.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/resolvable/Resolvable.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,11 +17,12 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-package org.teamapps.ux.component.login;
+package org.teamapps.ux.resolvable;
 
 import org.teamapps.ux.session.SessionContext;
 
-public interface LoginAuthenticator {
+public interface Resolvable {
+
+	String getUrl(SessionContext sessionContext);
 
-	boolean loginSuccess(String login, String pwd, SessionContext context);
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/resource/ByteArrayResource.java b/teamapps-ux/src/main/java/org/teamapps/ux/resource/ByteArrayResource.java
new file mode 100644
index 000000000..4a6f0a3d9
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/resource/ByteArrayResource.java
@@ -0,0 +1,82 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.resource;
+
+import java.io.ByteArrayInputStream;
+import java.io.InputStream;
+import java.util.Arrays;
+import java.util.Objects;
+
+public class ByteArrayResource implements Resource {
+
+	private final byte[] data;
+	private final String name;
+	private final String mimeType;
+
+	public ByteArrayResource(byte[] data, String name) {
+		this(data, name, null);
+	}
+
+	public ByteArrayResource(byte[] data, String name, String mimeType) {
+		this.data = data;
+		this.name = name;
+		this.mimeType = mimeType;
+	}
+
+	@Override
+	public String getMimeType() {
+		if (mimeType != null) {
+			return mimeType;
+		} else {
+			return Resource.super.getMimeType();
+		}
+	}
+
+	@Override
+	public InputStream getInputStream() {
+		return new ByteArrayInputStream(data);
+	}
+
+	@Override
+	public String getName() {
+		return name;
+	}
+
+	@Override
+	public long getLength() {
+		return data.length;
+	}
+
+	@Override
+	public boolean equals(Object o) {
+		if (this == o) return true;
+		if (o == null || getClass() != o.getClass()) return false;
+		ByteArrayResource that = (ByteArrayResource) o;
+		return Arrays.equals(data, that.data) // this is extremely fast (<100µs for 1GB), so no problem
+				&& Objects.equals(name, that.name);
+	}
+
+	@Override
+	public int hashCode() {
+		int result = Objects.hash(name);
+		result = 31 * result + Arrays.hashCode(data);
+		return result;
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/resource/ClassPathResource.java b/teamapps-ux/src/main/java/org/teamapps/ux/resource/ClassPathResource.java
index 53ebdfc0c..515e296c7 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/resource/ClassPathResource.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/resource/ClassPathResource.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -20,31 +20,84 @@
 package org.teamapps.ux.resource;
 
 import java.io.InputStream;
+import java.util.Objects;
 
 public class ClassPathResource implements Resource {
 
 	private final String resourceName;
-	private Integer length;
+	private final String name;
+	private final ClassLoader classLoader;
+	private final String mimeType;
+	private long length = -1;
 
 	public ClassPathResource(String resourceName) {
+		this(resourceName, null, null);
+	}
+
+	public ClassPathResource(String resourceName, String mimeType) {
+		this(resourceName, null, mimeType);
+	}
+
+	public ClassPathResource(String resourceName, ClassLoader classLoader) {
+		this(resourceName, classLoader, null);
+	}
+
+	public ClassPathResource(String resourceName, ClassLoader classLoader, String mimeType) {
 		this.resourceName = resourceName;
+		this.name = resourceName.contains("/") ? resourceName.substring(resourceName.lastIndexOf('/') + 1) : resourceName;
+		this.classLoader = classLoader;
+		this.mimeType = mimeType;
 	}
 
 	@Override
 	public InputStream getInputStream() {
-		return getClass().getResourceAsStream(resourceName);
+		InputStream is;
+		if (classLoader != null) {
+			is = classLoader.getResourceAsStream(resourceName);
+		} else {
+			is = getClass().getResourceAsStream(resourceName);
+			if (is == null) {
+				is = ClassLoader.getSystemResourceAsStream(resourceName);
+			}
+		}
+		return is;
 	}
 
 	@Override
 	public String getName() {
-		return null;
+		return name;
+	}
+
+	@Override
+	public String getMimeType() {
+		return mimeType;
 	}
 
 	@Override
 	public long getLength() {
-		if (length == null) {
-			Resource.super.getLength();
+		if (length < 0) {
+			length = Resource.super.getLength();
 		}
 		return length;
 	}
+
+	@Override
+	public String toString() {
+		return "ClassPathResource{" +
+				"resourceName='" + resourceName + '\'' +
+				'}';
+	}
+
+	@Override
+	public boolean equals(Object o) {
+		if (this == o) return true;
+		if (o == null || getClass() != o.getClass()) return false;
+		ClassPathResource that = (ClassPathResource) o;
+		return length == that.length && Objects.equals(resourceName, that.resourceName) && Objects.equals(name, that.name) && Objects.equals(classLoader, that.classLoader) && Objects.equals(mimeType, that.mimeType);
+	}
+
+	@Override
+	public int hashCode() {
+		return Objects.hash(resourceName, name, classLoader, mimeType, length);
+	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/resource/FileResource.java b/teamapps-ux/src/main/java/org/teamapps/ux/resource/FileResource.java
index e5bbae357..c1c2db3c4 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/resource/FileResource.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/resource/FileResource.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -29,12 +29,14 @@
 import java.util.Date;
 import java.util.HashMap;
 import java.util.Map;
+import java.util.Objects;
 
 public class FileResource implements Resource {
 
 	private static final Map<String, String> MIMETYPES_BY_FILE_EXTENSION;
 
-	private File file;
+	private final File file;
+	private final String name;
 
 	static {
 		try {
@@ -45,7 +47,12 @@ public class FileResource implements Resource {
 	}
 
 	public FileResource(File file) {
+		this(file, file.getName());
+	}
+
+	public FileResource(File file, String name) {
 		this.file = file;
+		this.name = name;
 	}
 
 	@Override
@@ -68,14 +75,9 @@ public Date getLastModified() {
 		return new Date(file.lastModified());
 	}
 
-	@Override
-	public Date getExpires() {
-		return new Date(System.currentTimeMillis() + 604800000L);
-	}
-
 	@Override
 	public String getName() {
-		return file.getName();
+		return name;
 	}
 
 	@Override
@@ -88,10 +90,39 @@ public String getMimeType() {
 	}
 
 	private String getFileType() {
-		int pos = file.getName().lastIndexOf('.');
-		if (pos <= 0 || pos >= file.getName().length() - 1) {
+		int pos = name.lastIndexOf('.');
+		if (pos <= 0 || pos >= name.length() - 1) {
 			return null;
 		}
-		return file.getName().substring(pos + 1).toLowerCase();
+		return name.substring(pos + 1).toLowerCase();
+	}
+
+	public File getFile() {
+		return file;
+	}
+
+	@Override
+	public File getAsFile() {
+		return file;
+	}
+
+	@Override
+	public String toString() {
+		return "FileResource{" +
+				"file=" + file +
+				'}';
+	}
+
+	@Override
+	public boolean equals(Object o) {
+		if (this == o) return true;
+		if (o == null || getClass() != o.getClass()) return false;
+		FileResource that = (FileResource) o;
+		return Objects.equals(file, that.file) && Objects.equals(name, that.name);
+	}
+
+	@Override
+	public int hashCode() {
+		return Objects.hash(file, name);
 	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/resource/InputStreamResource.java b/teamapps-ux/src/main/java/org/teamapps/ux/resource/InputStreamResource.java
new file mode 100644
index 000000000..393459b68
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/resource/InputStreamResource.java
@@ -0,0 +1,68 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.resource;
+
+import java.io.InputStream;
+import java.util.function.Supplier;
+
+public class InputStreamResource implements Resource {
+
+	private final Supplier<InputStream> inputStreamSupplier;
+	private final String name;
+
+	private long length = -1;
+
+	public InputStreamResource(Supplier<InputStream> inputStreamSupplier) {
+		this(inputStreamSupplier, -1, null);
+	}
+
+	public InputStreamResource(Supplier<InputStream> inputStreamSupplier, String name) {
+		this(inputStreamSupplier, -1, name);
+	}
+
+	public InputStreamResource(Supplier<InputStream> inputStreamSupplier, long length) {
+		this(inputStreamSupplier, length, null);
+	}
+
+	public InputStreamResource(Supplier<InputStream> inputStreamSupplier, long length, String name) {
+		this.inputStreamSupplier = inputStreamSupplier;
+		this.length = length;
+		this.name = name;
+	}
+
+	@Override
+	public InputStream getInputStream() {
+		return inputStreamSupplier.get();
+	}
+
+	@Override
+	public long getLength() {
+		if (length < 0) {
+			length = Resource.super.getLength();
+		}
+		return this.length;
+	}
+
+	@Override
+	public String getName() {
+		return name;
+	}
+
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/resource/Resource.java b/teamapps-ux/src/main/java/org/teamapps/ux/resource/Resource.java
index 8952f7dbd..c868f1f55 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/resource/Resource.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/resource/Resource.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,17 +19,26 @@
  */
 package org.teamapps.ux.resource;
 
-import java.io.IOException;
-import java.io.InputStream;
+import org.apache.commons.io.IOUtils;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+
+import java.io.*;
 import java.util.Date;
+import java.util.function.Supplier;
 
 public interface Resource {
 
+	Logger LOGGER = LoggerFactory.getLogger(Resource.class);
+
 	InputStream getInputStream();
 
 	default long getLength() {
 		try {
 			InputStream inputStream = getInputStream();
+			if (inputStream == null) {
+				throw new IOException("Cannot get length of null resource: " + toString());
+			}
 			byte[] buf = new byte[4096];
 			int totalLength = 0;
 			int len;
@@ -37,7 +46,8 @@ default long getLength() {
 				totalLength += len;
 			}
 			return totalLength;
-		} catch (IOException e) {
+		} catch (IOException e) { // TODO change this to actually throw the IOException (see below)
+			LOGGER.error("Exception while calculating resource length: " + toString(), e);
 			return 0;
 		}
 	}
@@ -51,7 +61,7 @@ default Date getLastModified() {
 	}
 
 	default Date getExpires() {
-		return new Date(System.currentTimeMillis() + 604800000L);
+		return new Date(System.currentTimeMillis() + 604800000L); // one week
 	}
 
 	default String getMimeType() {
@@ -66,4 +76,57 @@ default boolean isAttachment() {
 		return false;
 	}
 
+	default File getAsFile() {
+		try {
+			String name = getName() != null ? getName() : ".bin";
+			File tempFile = File.createTempFile("temp", name);
+			BufferedOutputStream bos = new BufferedOutputStream(new FileOutputStream(tempFile));
+			IOUtils.copyLarge(getInputStream(), bos);
+			bos.close();
+			return tempFile;
+		} catch (IOException e) { // TODO change this to actually throw the IOException. Returning null is much more dangerous (NPE) than throwing a caught exception!
+			LOGGER.error("Exception while writing resource to file: " + toString(), e);
+			e.printStackTrace();
+		}
+		return null;
+	}
+
+	// util
+
+	default Resource lastModified(Date lastModifiedDate) {
+		return new ResourceWrapper(this) {
+			@Override
+			public Date getLastModified() {
+				return lastModifiedDate;
+			}
+		};
+	}
+
+	default Resource expiring(Date expiryDate) {
+		return new ResourceWrapper(this) {
+			@Override
+			public Date getExpires() {
+				return expiryDate;
+			}
+		};
+	}
+
+	default Resource withMimeType(String mimeType) {
+		return new ResourceWrapper(this) {
+			@Override
+			public String getMimeType() {
+				return mimeType;
+			}
+		};
+	}
+
+	default Resource asAttachment(boolean attachment) {
+		return new ResourceWrapper(this) {
+			@Override
+			public boolean isAttachment() {
+				return attachment;
+			}
+		};
+	}
+
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/resource/ResourceWrapper.java b/teamapps-ux/src/main/java/org/teamapps/ux/resource/ResourceWrapper.java
new file mode 100644
index 000000000..8e599037c
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/resource/ResourceWrapper.java
@@ -0,0 +1,92 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.resource;
+
+import java.io.File;
+import java.io.InputStream;
+import java.util.Date;
+import java.util.Objects;
+
+public class ResourceWrapper implements Resource {
+
+	private final Resource delegate;
+
+	public ResourceWrapper(Resource delegate) {
+		this.delegate = delegate;
+	}
+
+	@Override
+	public InputStream getInputStream() {
+		return delegate.getInputStream();
+	}
+
+	@Override
+	public long getLength() {
+		return delegate.getLength();
+	}
+
+	@Override
+	public String getName() {
+		return delegate.getName();
+	}
+
+	@Override
+	public Date getLastModified() {
+		return delegate.getLastModified();
+	}
+
+	@Override
+	public Date getExpires() {
+		return delegate.getExpires();
+	}
+
+	@Override
+	public String getMimeType() {
+		return delegate.getMimeType();
+	}
+
+	@Override
+	public boolean isAttachment() {
+		return delegate.isAttachment();
+	}
+
+	@Override
+	public File getAsFile() {
+		return delegate.getAsFile();
+	}
+
+	@Override
+	public Resource lastModified(Date date) {
+		return delegate.lastModified(date);
+	}
+
+	@Override
+	public boolean equals(Object o) {
+		if (this == o) return true;
+		if (o == null || getClass() != o.getClass()) return false;
+		ResourceWrapper that = (ResourceWrapper) o;
+		return Objects.equals(delegate, that.delegate);
+	}
+
+	@Override
+	public int hashCode() {
+		return Objects.hash(delegate);
+	}
+}
diff --git a/teamapps-ux-servlet/src/main/java/org/teamapps/ux/servlet/DownloadHttpHeaderFilter.java b/teamapps-ux/src/main/java/org/teamapps/ux/servlet/DownloadHttpHeaderFilter.java
similarity index 57%
rename from teamapps-ux-servlet/src/main/java/org/teamapps/ux/servlet/DownloadHttpHeaderFilter.java
rename to teamapps-ux/src/main/java/org/teamapps/ux/servlet/DownloadHttpHeaderFilter.java
index c7eed6b8b..9b624f97e 100644
--- a/teamapps-ux-servlet/src/main/java/org/teamapps/ux/servlet/DownloadHttpHeaderFilter.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/servlet/DownloadHttpHeaderFilter.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,13 +19,14 @@
  */
 package org.teamapps.ux.servlet;
 
-import javax.servlet.Filter;
-import javax.servlet.FilterChain;
-import javax.servlet.FilterConfig;
-import javax.servlet.ServletException;
-import javax.servlet.ServletRequest;
-import javax.servlet.ServletResponse;
-import javax.servlet.http.HttpServletResponse;
+import jakarta.servlet.Filter;
+import jakarta.servlet.FilterChain;
+import jakarta.servlet.FilterConfig;
+import jakarta.servlet.ServletException;
+import jakarta.servlet.ServletRequest;
+import jakarta.servlet.ServletResponse;
+import jakarta.servlet.http.HttpServletResponse;
+import jakarta.servlet.http.HttpServletResponseWrapper;
 import java.io.IOException;
 
 public class DownloadHttpHeaderFilter implements Filter {
@@ -33,11 +34,28 @@ public class DownloadHttpHeaderFilter implements Filter {
 	@Override
 	public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
 		String downloadFileName = req.getParameter("teamapps-download-filename");
+
 		if (downloadFileName != null) {
 			HttpServletResponse response = (HttpServletResponse) res;
-			response.addHeader("Content-Disposition", "attachment; filename=\""+downloadFileName+"\"");
+			response.setHeader("Content-Disposition", "attachment; filename=\"" + downloadFileName + "\"");
+			chain.doFilter(req, new HttpServletResponseWrapper(response) {
+				@Override
+				public void setHeader(String name, String value) {
+					if (!name.toLowerCase().equals("content-disposition")) {
+						super.setHeader(name, value);
+					}
+				}
+
+				@Override
+				public void addHeader(String name, String value) {
+					if (!name.toLowerCase().equals("content-disposition")) {
+						super.addHeader(name, value);
+					}
+				}
+			});
+		} else {
+			chain.doFilter(req, res);
 		}
-		chain.doFilter(req, res);
 	}
 
 	@Override
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/servlet/IndexHtmlHeaderFilter.java b/teamapps-ux/src/main/java/org/teamapps/ux/servlet/IndexHtmlHeaderFilter.java
new file mode 100644
index 000000000..a220a3c0f
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/servlet/IndexHtmlHeaderFilter.java
@@ -0,0 +1,39 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.servlet;
+
+import jakarta.servlet.*;
+import jakarta.servlet.http.HttpFilter;
+import jakarta.servlet.http.HttpServletResponse;
+import java.io.IOException;
+
+public class IndexHtmlHeaderFilter extends HttpFilter {
+
+	@Override
+	public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
+		if (servletResponse instanceof HttpServletResponse) {
+			HttpServletResponse r = (HttpServletResponse) servletResponse;
+			r.setHeader("cache-control", "max-age=0, no-cache, no-store, must-revalidate");
+			r.setHeader("expires", "Thu, 01 Jan 1970 00:00:00 GMT");
+			r.setHeader("pragma", "no-cache");
+		}
+		filterChain.doFilter(servletRequest, servletResponse);
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/servlet/LeaveBeaconServlet.java b/teamapps-ux/src/main/java/org/teamapps/ux/servlet/LeaveBeaconServlet.java
new file mode 100644
index 000000000..aa8ebfb1d
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/servlet/LeaveBeaconServlet.java
@@ -0,0 +1,52 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.servlet;
+
+import jakarta.servlet.http.HttpServlet;
+import jakarta.servlet.http.HttpServletRequest;
+import jakarta.servlet.http.HttpServletResponse;
+import org.apache.commons.io.IOUtils;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+import org.teamapps.dto.UiSessionClosingReason;
+import org.teamapps.uisession.TeamAppsSessionManager;
+import org.teamapps.uisession.UiSession;
+
+import java.io.IOException;
+
+public class LeaveBeaconServlet extends HttpServlet {
+
+	private static final Logger LOGGER = LoggerFactory.getLogger(ServletRequestListener.class);
+	private final TeamAppsSessionManager uiSessionManager;
+
+	public LeaveBeaconServlet(TeamAppsSessionManager uiSessionManager) {
+		this.uiSessionManager = uiSessionManager;
+	}
+
+	@Override
+	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException {
+		String uiSessionId = IOUtils.toString(request.getReader());
+		LOGGER.info("Got leaving beacon for teamapps session id: " + uiSessionId);
+		UiSession uiSession = uiSessionManager.getUiSessionById(uiSessionId);
+		if (uiSession != null) {
+			uiSession.close(UiSessionClosingReason.TERMINATED_BY_CLIENT);
+		}
+	}
+}
diff --git a/teamapps-ux-servlet/src/main/java/org/teamapps/ux/servlet/ServerSideClientInfo.java b/teamapps-ux/src/main/java/org/teamapps/ux/servlet/ServerSideClientInfo.java
similarity index 96%
rename from teamapps-ux-servlet/src/main/java/org/teamapps/ux/servlet/ServerSideClientInfo.java
rename to teamapps-ux/src/main/java/org/teamapps/ux/servlet/ServerSideClientInfo.java
index ab205f721..e2b1cbe17 100644
--- a/teamapps-ux-servlet/src/main/java/org/teamapps/ux/servlet/ServerSideClientInfo.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/servlet/ServerSideClientInfo.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux-servlet/src/main/java/org/teamapps/ux/servlet/ServletRequestListener.java b/teamapps-ux/src/main/java/org/teamapps/ux/servlet/ServletRequestListener.java
similarity index 83%
rename from teamapps-ux-servlet/src/main/java/org/teamapps/ux/servlet/ServletRequestListener.java
rename to teamapps-ux/src/main/java/org/teamapps/ux/servlet/ServletRequestListener.java
index 83b6d9444..51c12f010 100644
--- a/teamapps-ux-servlet/src/main/java/org/teamapps/ux/servlet/ServletRequestListener.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/servlet/ServletRequestListener.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,10 +19,10 @@
  */
 package org.teamapps.ux.servlet;
 
-import javax.servlet.ServletRequestEvent;
-import javax.servlet.http.HttpServletRequest;
+import jakarta.servlet.ServletRequestEvent;
+import jakarta.servlet.http.HttpServletRequest;
 
-public class ServletRequestListener implements javax.servlet.ServletRequestListener {
+public class ServletRequestListener implements jakarta.servlet.ServletRequestListener {
 
 	@Override
 	public void requestInitialized(ServletRequestEvent sre) {
diff --git a/teamapps-ux-servlet/src/main/java/org/teamapps/ux/servlet/TeamAppsCommunicationException.java b/teamapps-ux/src/main/java/org/teamapps/ux/servlet/TeamAppsCommunicationException.java
similarity index 96%
rename from teamapps-ux-servlet/src/main/java/org/teamapps/ux/servlet/TeamAppsCommunicationException.java
rename to teamapps-ux/src/main/java/org/teamapps/ux/servlet/TeamAppsCommunicationException.java
index 618ad3f33..55943491f 100644
--- a/teamapps-ux-servlet/src/main/java/org/teamapps/ux/servlet/TeamAppsCommunicationException.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/servlet/TeamAppsCommunicationException.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/servlet/TeamAppsServletContextListener.java b/teamapps-ux/src/main/java/org/teamapps/ux/servlet/TeamAppsServletContextListener.java
new file mode 100644
index 000000000..86f81880a
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/servlet/TeamAppsServletContextListener.java
@@ -0,0 +1,117 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.servlet;
+
+import jakarta.servlet.*;
+import jakarta.servlet.ServletRegistration.Dynamic;
+import jakarta.websocket.Extension;
+import jakarta.websocket.server.ServerContainer;
+import jakarta.websocket.server.ServerEndpointConfig;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+import org.teamapps.core.TeamAppsCore;
+import org.teamapps.icons.IconProvider;
+import org.teamapps.ux.servlet.resourceprovider.IconResourceProvider;
+import org.teamapps.ux.servlet.resourceprovider.ResourceProviderServlet;
+import org.teamapps.ux.servlet.resourceprovider.TeamAppsSessionResourceProvider;
+import org.teamapps.ux.session.SessionContextResourceManager;
+
+import java.util.EnumSet;
+import java.util.List;
+
+public class TeamAppsServletContextListener implements ServletContextListener {
+
+	private static final Logger LOGGER = LoggerFactory.getLogger(TeamAppsServletContextListener.class);
+
+	private final TeamAppsCore teamAppsCore;
+
+	public TeamAppsServletContextListener(TeamAppsCore teamAppsCore) {
+		this.teamAppsCore = teamAppsCore;
+	}
+
+	@Override
+	public void contextInitialized(ServletContextEvent servletContextEvent) {
+		ServletContext context = servletContextEvent.getServletContext();
+
+		FilterRegistration.Dynamic indexHtmlHeaderFilter = context.addFilter("teamapps-index-html-header-filter", new IndexHtmlHeaderFilter());
+		indexHtmlHeaderFilter.setAsyncSupported(true);
+		indexHtmlHeaderFilter.addMappingForUrlPatterns(EnumSet.of(DispatcherType.REQUEST), true, "/");
+		indexHtmlHeaderFilter.addMappingForUrlPatterns(EnumSet.of(DispatcherType.REQUEST), true, "/index.html");
+
+		FilterRegistration.Dynamic downloadFilterRegistration = context.addFilter("teamapps-download-header-filter", new DownloadHttpHeaderFilter());
+		downloadFilterRegistration.setAsyncSupported(true);
+		downloadFilterRegistration.addMappingForUrlPatterns(EnumSet.of(DispatcherType.REQUEST), true, "*");
+
+		Dynamic uploadServletRegistration = context.addServlet("teamapps-upload-servlet", new UploadServlet(teamAppsCore.getConfig().getUploadDirectory(), teamAppsCore.getUploadManager()::addUploadedFile));
+		uploadServletRegistration.addMapping("/upload/*");
+		uploadServletRegistration.setMultipartConfig(new MultipartConfigElement(System.getProperty("java.io.tmpdir"), -1L, -1L, 1000_000));
+
+		Dynamic leaveBeaconServletRegistration = context.addServlet("teamapps-leave", new LeaveBeaconServlet(teamAppsCore.getSessionManager()));
+		leaveBeaconServletRegistration.addMapping("/leave/*");
+
+		Dynamic iconServletRegistration = context.addServlet("teamapps-icons", new ResourceProviderServlet(new IconResourceProvider(new IconProvider(teamAppsCore.getIconLibraryRegistry()))));
+		iconServletRegistration.addMapping("/icons/*");
+
+		Dynamic filesServletRegistration = context.addServlet("teamapps-files", new ResourceProviderServlet(new TeamAppsSessionResourceProvider(teamAppsCore.getSessionManager()::getSessionContextById)));
+		filesServletRegistration.addMapping(SessionContextResourceManager.BASE_PATH + "*");
+
+		context.addListener(new ServletRequestListener());
+		context.addListener(teamAppsCore.getSessionManager());
+
+		try {
+			// WebSocket
+			ServerContainer serverContainer = (ServerContainer) context.getAttribute("jakarta.websocket.server.ServerContainer");
+			ServerEndpointConfig communicationEndpointConfig = ServerEndpointConfig.Builder.create(WebSocketCommunicationEndpoint.class, "/communication")
+					.configurator(new WebSocketServerEndpointConfigurator(teamAppsCore.getWebSocketCommunicationEndpoint()))
+					.extensions(List.of(new WebsocketExtension("permessage-deflate")))
+					.build();
+			serverContainer.addEndpoint(communicationEndpointConfig);
+		} catch (Exception e) {
+			String msg = "Could not register TeamApps communication endpoint";
+			LOGGER.error(msg, e);
+			throw new RuntimeException(msg, e);
+		}
+	}
+
+	@Override
+	public void contextDestroyed(ServletContextEvent sce) {
+		teamAppsCore.getSessionManager().destroy();
+	}
+
+
+	private static class WebsocketExtension implements Extension {
+
+		private final String name;
+
+		public WebsocketExtension(String name) {
+			this.name = name;
+		}
+
+		@Override
+		public String getName() {
+			return name;
+		}
+
+		@Override
+		public List<Parameter> getParameters() {
+			return List.of();
+		}
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/servlet/TeamAppsWebSocketMetrics.java b/teamapps-ux/src/main/java/org/teamapps/ux/servlet/TeamAppsWebSocketMetrics.java
new file mode 100644
index 000000000..f8673fbc6
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/servlet/TeamAppsWebSocketMetrics.java
@@ -0,0 +1,50 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.servlet;
+
+import io.micrometer.core.instrument.Gauge;
+import io.micrometer.core.instrument.MeterRegistry;
+import io.micrometer.core.instrument.binder.MeterBinder;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+
+import java.lang.invoke.MethodHandles;
+
+public class TeamAppsWebSocketMetrics implements MeterBinder {
+
+	private static final Logger LOGGER = LoggerFactory.getLogger(MethodHandles.lookup().lookupClass());
+
+	private final WebSocketCommunicationEndpoint webSocketCommunicationEndpoint;
+
+	public TeamAppsWebSocketMetrics(WebSocketCommunicationEndpoint webSocketCommunicationEndpoint) {
+		this.webSocketCommunicationEndpoint = webSocketCommunicationEndpoint;
+	}
+
+	@Override
+	public void bindTo(MeterRegistry registry) {
+		Gauge.builder("teamapps.websocket.chars.sent", webSocketCommunicationEndpoint, WebSocketCommunicationEndpoint::getTotalSendCount)
+				.description("Total number of characters (uncompressed) sent through websocket to all clients.")
+				.register(registry);
+		Gauge.builder("teamapps.websocket.chars.received", webSocketCommunicationEndpoint, WebSocketCommunicationEndpoint::getTotalReceiveCount)
+				.description("Total number of characters (uncompressed) received through websocket to all clients.")
+				.register(registry);
+	}
+
+}
diff --git a/teamapps-ux-servlet/src/main/java/org/teamapps/ux/servlet/UploadServlet.java b/teamapps-ux/src/main/java/org/teamapps/ux/servlet/UploadServlet.java
similarity index 69%
rename from teamapps-ux-servlet/src/main/java/org/teamapps/ux/servlet/UploadServlet.java
rename to teamapps-ux/src/main/java/org/teamapps/ux/servlet/UploadServlet.java
index 821da6029..6c61175fd 100644
--- a/teamapps-ux-servlet/src/main/java/org/teamapps/ux/servlet/UploadServlet.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/servlet/UploadServlet.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,37 +19,32 @@
  */
 package org.teamapps.ux.servlet;
 
+import jakarta.servlet.ServletException;
+import jakarta.servlet.http.HttpServlet;
+import jakarta.servlet.http.HttpServletRequest;
+import jakarta.servlet.http.HttpServletResponse;
+import jakarta.servlet.http.Part;
 import org.apache.commons.io.IOUtils;
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
 
-import javax.servlet.ServletException;
-import javax.servlet.annotation.MultipartConfig;
-import javax.servlet.http.HttpServlet;
-import javax.servlet.http.HttpServletRequest;
-import javax.servlet.http.HttpServletResponse;
-import javax.servlet.http.Part;
-import java.io.File;
-import java.io.FileOutputStream;
-import java.io.IOException;
-import java.io.InputStream;
-import java.io.OutputStream;
+import java.io.*;
 import java.util.ArrayList;
 import java.util.Collection;
 import java.util.UUID;
 import java.util.function.BiConsumer;
 import java.util.stream.Collectors;
 
-@MultipartConfig(location="/tmp", fileSizeThreshold=1000_000, maxFileSize=-1L, maxRequestSize=-1L)
 public class UploadServlet extends HttpServlet {
 
 	private static final Logger LOGGER  = LoggerFactory.getLogger(UploadServlet.class);
 
-	private String fileUploadTempDir = System.getProperty("java.io.tmpdir");
+	private final File uploadDirectory;
 
-	private BiConsumer<File, String> uploadListener;
+	private final BiConsumer<File, String> uploadListener;
 
-	public UploadServlet(BiConsumer<File, String> uploadListener) {
+	public UploadServlet(File uploadDirectory, BiConsumer<File, String> uploadListener) {
+		this.uploadDirectory = uploadDirectory;
 		this.uploadListener = uploadListener;
 	}
 
@@ -58,17 +53,22 @@ public void init() throws ServletException {
 		super.init();
 	}
 
+	@Override
+	protected void doOptions(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
+		response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
+	}
+
 	@Override
 	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 		Collection<Part> parts = request.getParts();
 		ArrayList<String> uuids = new ArrayList<>();
 
 		try {
-			for (Part file : parts) {
+			for (Part part : parts) {
 				String uuidString = UUID.randomUUID().toString();
-				File tempFile = new File(fileUploadTempDir, uuidString);
+				File tempFile = new File(uploadDirectory, uuidString);
 
-				try (InputStream in = file.getInputStream();
+				try (InputStream in = part.getInputStream();
 				     OutputStream out = new FileOutputStream(tempFile)) {
 					IOUtils.copy(in, out);
 				}
@@ -84,6 +84,7 @@ protected void doPost(HttpServletRequest request, HttpServletResponse response)
 		}
 
 		response.setStatus(200);
+		response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
 		response.setContentType("application/json");
 		response.getWriter().println("[" + uuids.stream()
 				.map(uuid -> "\"" + uuid + "\"")
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/servlet/WebSocketCommunicationEndpoint.java b/teamapps-ux/src/main/java/org/teamapps/ux/servlet/WebSocketCommunicationEndpoint.java
new file mode 100644
index 000000000..09205f53f
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/servlet/WebSocketCommunicationEndpoint.java
@@ -0,0 +1,259 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.servlet;
+
+import com.fasterxml.jackson.core.JsonProcessingException;
+import com.fasterxml.jackson.databind.ObjectMapper;
+import jakarta.servlet.http.HttpSession;
+import jakarta.websocket.*;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+import org.teamapps.config.TeamAppsConfiguration;
+import org.teamapps.dto.*;
+import org.teamapps.json.TeamAppsObjectMapperFactory;
+import org.teamapps.uisession.*;
+
+import java.io.IOException;
+import java.util.Map;
+import java.util.Optional;
+import java.util.concurrent.Executor;
+import java.util.concurrent.Executors;
+import java.util.concurrent.TimeoutException;
+import java.util.concurrent.atomic.AtomicLong;
+
+public class WebSocketCommunicationEndpoint extends Endpoint {
+
+	private static final Logger LOGGER = LoggerFactory.getLogger(WebSocketCommunicationEndpoint.class);
+
+	/**
+	 * This is needed due to https://github.com/eclipse/jetty.project/issues/8151.
+	 * TODO: remove once the ticket is fixed.
+	 */
+	private final Executor jettyWorkaroundCloseExecutor = Executors.newFixedThreadPool(5);
+	private final ObjectMapper mapper = TeamAppsObjectMapperFactory.create();
+
+	private final AtomicLong totalSendCount = new AtomicLong();
+	private final AtomicLong totalReceiveCount = new AtomicLong();
+
+	private final TeamAppsSessionManager sessionManager;
+	private final TeamAppsConfiguration teamAppsConfig;
+
+	public WebSocketCommunicationEndpoint(TeamAppsSessionManager sessionManager, TeamAppsConfiguration teamAppsConfig) {
+		this.sessionManager = sessionManager;
+		this.teamAppsConfig = teamAppsConfig;
+	}
+
+	@Override
+	public void onOpen(Session session, EndpointConfig config) {
+		session.setMaxIdleTimeout(teamAppsConfig.getKeepaliveMessageIntervalMillis() * 3);
+		session.setMaxTextMessageBufferSize(teamAppsConfig.getMaxUiClientMessageSize());
+		session.addMessageHandler(new WebSocketHandler(session));
+	}
+
+	@Override
+	public void onError(Session session, Throwable thr) {
+		if (thr instanceof TimeoutException) { // Timeout errors are very common and totally taken care of.
+			LOGGER.debug("WebSocket communication error.", thr);
+		} else {
+			LOGGER.info("WebSocket communication error.", thr);
+		}
+		closeWebSocketSession(session);
+	}
+
+	@Override
+	public void onClose(Session session, CloseReason closeReason) {
+		// nothing to do...
+	}
+
+	private void closeWebSocketSession(Session wsSession) {
+		try {
+			wsSession.close();
+		} catch (IOException e) {
+			// ignore
+		}
+	}
+
+	public long getTotalSendCount() {
+		return totalSendCount.get();
+	}
+
+	public long getTotalReceiveCount() {
+		return totalReceiveCount.get();
+	}
+
+	private class WebSocketHandler implements MessageHandler.Whole<String> {
+		private final Session wsSession;
+		private boolean closed;
+		private UiSession uiSession;
+
+		private final AtomicLong sendCount = new AtomicLong();
+		private final AtomicLong receivedCount = new AtomicLong();
+
+		public WebSocketHandler(Session session) {
+			this.wsSession = session;
+		}
+
+		private Optional<UiSession> getUiSession(String uiSessionId) {
+			if (uiSession != null) {
+				return Optional.of(uiSession);
+			} else {
+				UiSession session = sessionManager.getUiSessionById(uiSessionId);
+				if (session != null) {
+					this.uiSession = session;
+				} else {
+					LOGGER.warn("Could not find uiSession with id {}", uiSessionId);
+				}
+				return Optional.ofNullable(session);
+			}
+		}
+
+		@Override
+		public void onMessage(String payload) {
+			receivedCount.addAndGet(payload.length());
+			totalReceiveCount.addAndGet(payload.length());
+			try {
+				HttpSession httpSession = (HttpSession) wsSession.getUserProperties().get(WebSocketServerEndpointConfigurator.HTTP_SESSION_PROPERTY_NAME);
+				AbstractClientMessage clientMessage = mapper.readValue(payload, AbstractClientMessage.class);
+
+				String uiSessionId = clientMessage.getSessionId();
+				if (clientMessage instanceof INIT) {
+					ServerSideClientInfo serverSideClientInfo = createServerSideClientInfo(wsSession);
+					INIT init = (INIT) clientMessage;
+					init.getClientInfo().setIp(serverSideClientInfo.getIp());
+					init.getClientInfo().setUserAgentString(serverSideClientInfo.getUserAgentString());
+					init.getClientInfo().setPreferredLanguageIso(serverSideClientInfo.getPreferredLanguageIso());
+					sessionManager.initSession(
+							uiSessionId,
+							init.getClientInfo(),
+							httpSession,
+							init.getMaxRequestedCommandId(),
+							new MessageSenderImpl()
+					);
+				} else if (clientMessage instanceof REINIT) {
+					REINIT reinit = (REINIT) clientMessage;
+					getUiSession(uiSessionId).ifPresentOrElse(uiSession -> {
+						uiSession.reinit(reinit.getLastReceivedCommandId(), reinit.getMaxRequestedCommandId(), new MessageSenderImpl());
+					}, () -> {
+						LOGGER.warn("Could not find teamAppsUiSession for REINIT: " + uiSessionId);
+						send(new REINIT_NOK(UiSessionClosingReason.SESSION_NOT_FOUND), null, null);
+					});
+				} else if (clientMessage instanceof TERMINATE) {
+					getUiSession(uiSessionId).ifPresent(uiSession -> uiSession.close(UiSessionClosingReason.TERMINATED_BY_CLIENT));
+				} else if (clientMessage instanceof EVENT) {
+					EVENT eventMessage = (EVENT) clientMessage;
+					getUiSession(uiSessionId).ifPresent(uiSession -> uiSession.handleEvent(eventMessage.getId(), eventMessage.getUiEvent()));
+				} else if (clientMessage instanceof QUERY) {
+					QUERY queryMessage = (QUERY) clientMessage;
+					getUiSession(uiSessionId).ifPresent(uiSession -> uiSession.handleQuery(queryMessage.getId(), queryMessage.getUiQuery()));
+				} else if (clientMessage instanceof CMD_RESULT) {
+					CMD_RESULT cmdResult = (CMD_RESULT) clientMessage;
+					getUiSession(uiSessionId).ifPresent(uiSession -> uiSession.handleCommandResult(cmdResult.getId(), cmdResult.getCmdId(), cmdResult.getResult()));
+				} else if (clientMessage instanceof CMD_REQUEST) {
+					CMD_REQUEST cmdRequest = (CMD_REQUEST) clientMessage;
+					getUiSession(uiSessionId).ifPresent(uiSession -> uiSession.handleCommandRequest(cmdRequest.getMaxRequestedCommandId(), cmdRequest.getLastReceivedCommandId()));
+				} else if (clientMessage instanceof KEEPALIVE) {
+					getUiSession(uiSessionId).ifPresent(UiSession::handleKeepAlive);
+				} else {
+					throw new TeamAppsCommunicationException("Unknown message type: " + clientMessage.getClass().getCanonicalName());
+				}
+			} catch (TeamAppsSessionNotFoundException e) {
+				LOGGER.warn("TeamApps session not found: " + e.getSessionId());
+				send(new SESSION_CLOSED(UiSessionClosingReason.SESSION_NOT_FOUND).setMessage(e.getMessage()), this::close, (t) -> close());
+			} catch (Exception e) {
+				LOGGER.error("Exception while processing client message!", e);
+				send(new SESSION_CLOSED(UiSessionClosingReason.SERVER_SIDE_ERROR).setMessage(e.getMessage()), this::close, (t) -> close());
+			}
+		}
+
+		private void send(AbstractServerMessage message, Runnable sendingSuccessHandler, SendingErrorHandler sendingErrorHandler) {
+			if (this.closed) {
+				sendingErrorHandler.onErrorWhileSending(new TeamAppsCommunicationException("Connection closed!"));
+				return;
+			}
+			try {
+				String messageAsString;
+				try {
+					messageAsString = mapper.writeValueAsString(message);
+				} catch (JsonProcessingException e) {
+					throw new TeamAppsCommunicationException(e);
+				}
+				sendCount.addAndGet(messageAsString.length());
+				totalSendCount.addAndGet(messageAsString.length());
+				//noinspection Convert2Lambda
+				wsSession.getAsyncRemote().sendText(messageAsString, new SendHandler() {
+					@Override
+					public void onResult(SendResult result) {
+						if (result.isOK() && sendingSuccessHandler != null) {
+							sendingSuccessHandler.run();
+						}
+						if (!result.isOK() && sendingErrorHandler != null) {
+							sendingErrorHandler.onErrorWhileSending(result.getException());
+						}
+					}
+				});
+			} catch (Exception e) {
+				if (sendingErrorHandler != null) {
+					sendingErrorHandler.onErrorWhileSending(e);
+				}
+			}
+		}
+
+		private ServerSideClientInfo createServerSideClientInfo(Session session) {
+			Map<String, Object> attributes = session.getUserProperties();
+			return new ServerSideClientInfo(
+					(String) attributes.get(WebSocketServerEndpointConfigurator.CLIENT_IP_PROPERTY_NAME),
+					(String) attributes.get(WebSocketServerEndpointConfigurator.USER_AGENT_PROPERTY_NAME),
+					(String) attributes.get(WebSocketServerEndpointConfigurator.LANGUAGE_PROPERTY_NAME)
+			);
+		}
+
+		private void close() {
+			this.closed = true;
+			closeWebSocketSession(wsSession);
+		}
+
+		private class MessageSenderImpl implements MessageSender {
+			@Override
+			public void sendMessageAsynchronously(AbstractServerMessage msg, SendingErrorHandler sendingErrorHandler) {
+				send(msg, null, sendingErrorHandler);
+			}
+
+			@Override
+			public void close(UiSessionClosingReason closingReason, String message) {
+				send(
+						new SESSION_CLOSED(closingReason).setMessage(message),
+						() -> jettyWorkaroundCloseExecutor.execute(WebSocketHandler.this::close),
+						(t) -> jettyWorkaroundCloseExecutor.execute(() -> WebSocketHandler.this.close())
+				);
+			}
+
+			@Override
+			public long getDataReceived() {
+				return receivedCount.get();
+			}
+
+			@Override
+			public long getDataSent() {
+				return sendCount.get();
+			}
+		}
+	}
+
+}
diff --git a/teamapps-ux-servlet/src/main/java/org/teamapps/ux/servlet/WebSocketServerEndpointConfigurator.java b/teamapps-ux/src/main/java/org/teamapps/ux/servlet/WebSocketServerEndpointConfigurator.java
similarity index 84%
rename from teamapps-ux-servlet/src/main/java/org/teamapps/ux/servlet/WebSocketServerEndpointConfigurator.java
rename to teamapps-ux/src/main/java/org/teamapps/ux/servlet/WebSocketServerEndpointConfigurator.java
index cba1aa80b..abc0830db 100644
--- a/teamapps-ux-servlet/src/main/java/org/teamapps/ux/servlet/WebSocketServerEndpointConfigurator.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/servlet/WebSocketServerEndpointConfigurator.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -21,12 +21,11 @@
 
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
-import org.teamapps.uisession.TeamAppsUiSessionManager;
 
-import javax.servlet.http.HttpSession;
-import javax.websocket.HandshakeResponse;
-import javax.websocket.server.HandshakeRequest;
-import javax.websocket.server.ServerEndpointConfig;
+import jakarta.servlet.http.HttpSession;
+import jakarta.websocket.HandshakeResponse;
+import jakarta.websocket.server.HandshakeRequest;
+import jakarta.websocket.server.ServerEndpointConfig;
 import java.util.List;
 import java.util.Locale;
 
@@ -39,11 +38,10 @@ public class WebSocketServerEndpointConfigurator extends ServerEndpointConfig.Co
 	public static final String USER_AGENT_PROPERTY_NAME = "USER_AGENT";
 	public static final String LANGUAGE_PROPERTY_NAME = "LANGUAGE";
 	public static final String CLIENT_IP_PROPERTY_NAME = "CLIENT_IP";
+	private final WebSocketCommunicationEndpoint webSocketCommunicationEndpoint;
 
-	private final TeamAppsUiSessionManager sessionManager;
-
-	public WebSocketServerEndpointConfigurator(TeamAppsUiSessionManager sessionManager) {
-		this.sessionManager = sessionManager;
+	public WebSocketServerEndpointConfigurator(WebSocketCommunicationEndpoint webSocketCommunicationEndpoint) {
+		this.webSocketCommunicationEndpoint = webSocketCommunicationEndpoint;
 	}
 
 	@Override
@@ -71,7 +69,7 @@ public void modifyHandshake(ServerEndpointConfig sec, HandshakeRequest request,
 
 	@Override
 	public <T> T getEndpointInstance(Class<T> endpointClass) throws InstantiationException {
-		return (T) new TeamAppsCommunicationEndpoint(sessionManager);
+		return (T) webSocketCommunicationEndpoint;
 	}
 
 	private String getFirstHeaderOrNull(HandshakeRequest request, String headerName) {
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/resource/ClassPathResourceProvider.java b/teamapps-ux/src/main/java/org/teamapps/ux/servlet/resourceprovider/ClassPathResourceProvider.java
similarity index 72%
rename from teamapps-ux/src/main/java/org/teamapps/ux/resource/ClassPathResourceProvider.java
rename to teamapps-ux/src/main/java/org/teamapps/ux/servlet/resourceprovider/ClassPathResourceProvider.java
index f422d31dc..14e5ed553 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/resource/ClassPathResourceProvider.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/servlet/resourceprovider/ClassPathResourceProvider.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,23 +17,32 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-package org.teamapps.ux.resource;
+package org.teamapps.ux.servlet.resourceprovider;
 
 import com.google.common.annotations.VisibleForTesting;
+import org.teamapps.ux.resource.ClassPathResource;
+import org.teamapps.ux.resource.Resource;
 
-import java.io.InputStream;
+import java.util.function.Function;
 
 public class ClassPathResourceProvider implements ResourceProvider {
 
 	private final String basePackage;
+	private final Function<String, String> javaResourceNameToMimeTypeFunction;
 
 	public ClassPathResourceProvider(String basePackage) {
+		this(basePackage, s -> null);
+	}
+
+	public ClassPathResourceProvider(String basePackage, Function<String, String> javaResourceNameToMimeTypeFunction) {
 		this.basePackage = normalizeClassPathResourcePath(basePackage);
+		this.javaResourceNameToMimeTypeFunction = javaResourceNameToMimeTypeFunction;
 	}
 
 	@Override
-	public Resource getResource(String servletPath, String relativeResourcePath, String sessionId) {
-		return new ClassPathResource(getJavaResourceName(relativeResourcePath));
+	public Resource getResource(String servletPath, String relativeResourcePath, String httpSessionId) {
+		return new ClassPathResource(getJavaResourceName(relativeResourcePath),
+				javaResourceNameToMimeTypeFunction.apply(relativeResourcePath));
 	}
 
 	private String getJavaResourceName(String resource) {
@@ -53,27 +62,5 @@ static String normalizeClassPathResourcePath(String basePackage) {
 		}
 		return basePackage;
 	}
-
-	private class ClassPathResource implements Resource {
-
-		private final String resourceName;
-		private Long cachedSize;
-
-		public ClassPathResource(String resourceName) {
-			this.resourceName = resourceName;
-		}
-
-		@Override
-		public InputStream getInputStream() {
-			return getClass().getResourceAsStream(resourceName);
-		}
-
-		@Override
-		public long getLength() {
-			if (cachedSize == null) {
-				cachedSize = Resource.super.getLength();
-			}
-			return cachedSize;
-		}
-	}
+	
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/resource/SystemIconResourceProvider.java b/teamapps-ux/src/main/java/org/teamapps/ux/servlet/resourceprovider/IconResourceProvider.java
similarity index 56%
rename from teamapps-ux/src/main/java/org/teamapps/ux/resource/SystemIconResourceProvider.java
rename to teamapps-ux/src/main/java/org/teamapps/ux/servlet/resourceprovider/IconResourceProvider.java
index 649a3f89a..a33b74d2f 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/resource/SystemIconResourceProvider.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/servlet/resourceprovider/IconResourceProvider.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,28 +17,28 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-package org.teamapps.ux.resource;
+package org.teamapps.ux.servlet.resourceprovider;
 
-import org.teamapps.icons.api.CustomIconStyle;
-import org.teamapps.icons.provider.IconProvider;
-import org.teamapps.icons.systemprovider.IconResource;
-import org.teamapps.icons.systemprovider.SystemIconProvider;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+import org.teamapps.icons.IconResource;
+import org.teamapps.icons.IconProvider;
+import org.teamapps.ux.resource.Resource;
 
-import java.io.File;
+import java.io.ByteArrayInputStream;
 import java.io.InputStream;
+import java.lang.invoke.MethodHandles;
 import java.util.Date;
 
-public class SystemIconResourceProvider implements ResourceProvider {
+public class IconResourceProvider implements ResourceProvider {
 
-	private Date lastModifiedDate = new Date();
-	private final SystemIconProvider iconProvider;
+	private static final Logger LOGGER = LoggerFactory.getLogger(MethodHandles.lookup().lookupClass());
+	private static final Date lastModifiedDate = new Date();
 
-	public SystemIconResourceProvider() {
-		iconProvider = new SystemIconProvider();
-	}
+	private final IconProvider iconResolver;
 
-	public SystemIconResourceProvider(File cachingDirectory) {
-		iconProvider = new SystemIconProvider(cachingDirectory);
+	public IconResourceProvider(IconProvider iconProviderDispatcher) {
+		this.iconResolver = iconProviderDispatcher;
 	}
 
 	@Override
@@ -52,15 +52,15 @@ public Resource getResource(String servletPath, String relativeResourcePath, Str
 		if (relativeResourcePath.endsWith("/")) {
 			relativeResourcePath = relativeResourcePath.substring(0, relativeResourcePath.length() - 1);
 		}
-		String[] parts = relativeResourcePath.split("/");
-		int size = getInt(parts[0]);
-		String iconId = parts[parts.length - 1];
-		IconResource iconResource = iconProvider.getIcon(size, iconId);
+		String[] parts = relativeResourcePath.split("@");
+		String qualifiedEncodedIcon = parts[0];
+		int size = parts.length > 1 ? getInt(parts[parts.length - 1]) : -1;
+		IconResource iconResource = iconResolver.loadIcon(qualifiedEncodedIcon, size);
 		if (iconResource != null) {
 			return new Resource() {
 				@Override
 				public InputStream getInputStream() {
-					return iconResource.getInputStream();
+					return new ByteArrayInputStream(iconResource.getBytes());
 				}
 
 				@Override
@@ -70,12 +70,12 @@ public long getLength() {
 
 				@Override
 				public Date getLastModified() {
-					return iconResource.getLastModified();
+					return lastModifiedDate;
 				}
 
 				@Override
 				public Date getExpires() {
-					return iconResource.getExpires();
+					return new Date(System.currentTimeMillis() + 86_400_000L * 60);
 				}
 
 				@Override
@@ -90,25 +90,13 @@ public String getMimeType() {
 
 	private int getInt(String s) {
 		if (s == null) {
-			return 0;
+			return -1;
 		}
 		try {
 			return Integer.parseInt(s);
 		} catch (Throwable ignore) {
 		}
-		return 0;
-	}
-
-	public void registerStandardIconProvider(IconProvider iconProvider) {
-		this.iconProvider.registerStandardIconProvider(iconProvider);
-	}
-
-	public void registerCustomIconProvider(IconProvider iconProvider) {
-		this.iconProvider.registerCustomIconProvider(iconProvider);
-	}
-
-	public void registerCustomIconStyle(CustomIconStyle customIconStyle) {
-		iconProvider.registerCustomIconStyle(customIconStyle);
+		return -1;
 	}
 
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/resource/ResourceProvider.java b/teamapps-ux/src/main/java/org/teamapps/ux/servlet/resourceprovider/ResourceProvider.java
similarity index 87%
rename from teamapps-ux/src/main/java/org/teamapps/ux/resource/ResourceProvider.java
rename to teamapps-ux/src/main/java/org/teamapps/ux/servlet/resourceprovider/ResourceProvider.java
index 0e070d1c5..7d3f82ebc 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/resource/ResourceProvider.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/servlet/resourceprovider/ResourceProvider.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,7 +17,9 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-package org.teamapps.ux.resource;
+package org.teamapps.ux.servlet.resourceprovider;
+
+import org.teamapps.ux.resource.Resource;
 
 /**
  * Created by mb on 08.10.15.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/resource/ResourceProviderServlet.java b/teamapps-ux/src/main/java/org/teamapps/ux/servlet/resourceprovider/ResourceProviderServlet.java
similarity index 88%
rename from teamapps-ux/src/main/java/org/teamapps/ux/resource/ResourceProviderServlet.java
rename to teamapps-ux/src/main/java/org/teamapps/ux/servlet/resourceprovider/ResourceProviderServlet.java
index adf0b9bd4..8f765baaa 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/resource/ResourceProviderServlet.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/servlet/resourceprovider/ResourceProviderServlet.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,17 +17,19 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-package org.teamapps.ux.resource;
+package org.teamapps.ux.servlet.resourceprovider;
 
 import org.apache.commons.io.IOUtils;
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
 
-import javax.servlet.ServletException;
-import javax.servlet.ServletOutputStream;
-import javax.servlet.http.HttpServlet;
-import javax.servlet.http.HttpServletRequest;
-import javax.servlet.http.HttpServletResponse;
+import jakarta.servlet.ServletException;
+import jakarta.servlet.ServletOutputStream;
+import jakarta.servlet.http.HttpServlet;
+import jakarta.servlet.http.HttpServletRequest;
+import jakarta.servlet.http.HttpServletResponse;
+import org.teamapps.ux.resource.Resource;
+
 import java.io.File;
 import java.io.IOException;
 import java.net.URLEncoder;
@@ -43,12 +45,8 @@
 
 public class ResourceProviderServlet extends HttpServlet {
 
-
-	// Constants ------------------------------------------------------------------------------------------------------
-
 	private static final Logger LOGGER = LoggerFactory.getLogger(ResourceProviderServlet.class);
 
-	private static final Long DEFAULT_EXPIRE_TIME_IN_SECONDS = TimeUnit.DAYS.toSeconds(30);
 	private static final long ONE_SECOND_IN_MILLIS = TimeUnit.SECONDS.toMillis(1);
 	private static final String ETAG = "W/\"%s-%s\"";
 	private static final Pattern RANGE_PATTERN = Pattern.compile("^bytes=[0-9]*-[0-9]*(,[0-9]*-[0-9]*)*$");
@@ -61,8 +59,6 @@ public ResourceProviderServlet(ResourceProvider resourceProvider) {
 		this.resourceProvider = resourceProvider;
 	}
 
-	// Actions --------------------------------------------------------------------------------------------------------
-
 	@Override
 	protected void doHead(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 		doRequest(request, response, true);
@@ -153,8 +149,6 @@ protected String getAttachmentName(HttpServletRequest request, File file) {
 		return file.getName();
 	}
 
-	// Sub-actions ----------------------------------------------------------------------------------------------------
-
 	/**
 	 * Returns true if it's a conditional request which must return 412.
 	 */
@@ -164,9 +158,6 @@ private boolean preconditionFailed(HttpServletRequest request, Resource resource
 		return (match != null) ? !matches(match, getETag(resource)) : (unmodified != -1 && modified(unmodified, resource.getLastModified().getTime()));
 	}
 
-	/**
-	 * Set cache headers.
-	 */
 	private void setCacheHeaders(HttpServletResponse response, Resource resource, long expires) {
 		setCacheHeaders(response, expires);
 		response.setHeader("ETag", getETag(resource));
@@ -227,8 +218,8 @@ private List<Range> getRanges(HttpServletRequest request, Resource resource) {
 	 * Parse range header part. Returns null if there's a logic error (i.e. start after end).
 	 */
 	private Range parseRange(String range, long length) {
-		long start = sublong(range, 0, range.indexOf('-'));
-		long end = sublong(range, range.indexOf('-') + 1, range.length());
+		long start = parseLong(range, 0, range.indexOf('-'));
+		long end = parseLong(range, range.indexOf('-') + 1, range.length());
 
 		if (start == -1) {
 			start = length - end;
@@ -244,9 +235,6 @@ private Range parseRange(String range, long length) {
 		return new Range(start, end);
 	}
 
-	/**
-	 * Set content headers.
-	 */
 	private String setContentHeaders(HttpServletResponse response, Resource resource, List<Range> ranges) {
 		String contentType = resource.getMimeType();
 		String filename = resource.getName();
@@ -295,8 +283,6 @@ private void writeContent(HttpServletResponse response, Resource resource, List<
 		}
 	}
 
-	// Helpers --------------------------------------------------------------------------------------------------------
-
 	/**
 	 * URL-encode the given string using UTF-8.
 	 *
@@ -378,9 +364,6 @@ private String getETag(Resource resource) {
 		return String.format(ETAG, encodeURL(resource.getName()), resource.getLastModified());
 	}
 
-	/**
-	 * Returns true if the given match header matches the given ETag value.
-	 */
 	private static boolean matches(String matchHeader, String eTag) {
 		String[] matchValues = matchHeader.split("\\s*,\\s*");
 		Arrays.sort(matchValues);
@@ -388,25 +371,15 @@ private static boolean matches(String matchHeader, String eTag) {
 				|| Arrays.binarySearch(matchValues, "*") > -1;
 	}
 
-	/**
-	 * Returns true if the given modified header is older than the given last modified value.
-	 */
 	private static boolean modified(long modifiedHeader, long lastModified) {
 		return (modifiedHeader + ONE_SECOND_IN_MILLIS <= lastModified); // That second is because the header is in seconds, not millis.
 	}
 
-	/**
-	 * Returns a substring of the given string value from the given begin index to the given end index as a long.
-	 * If the substring is empty, then -1 will be returned.
-	 */
-	private static long sublong(String value, int beginIndex, int endIndex) {
+	private static long parseLong(String value, int beginIndex, int endIndex) {
 		String substring = value.substring(beginIndex, endIndex);
 		return substring.isEmpty() ? -1 : Long.parseLong(substring);
 	}
 
-	/**
-	 * Returns true if the given accept header accepts the given value.
-	 */
 	private static boolean accepts(String acceptHeader, String toAccept) {
 		String[] acceptValues = acceptHeader.split("\\s*([,;])\\s*");
 		Arrays.sort(acceptValues);
@@ -415,11 +388,6 @@ private static boolean accepts(String acceptHeader, String toAccept) {
 				|| Arrays.binarySearch(acceptValues, "*/*") > -1;
 	}
 
-	// Nested classes -------------------------------------------------------------------------------------------------
-
-	/**
-	 * Convenience class for a byte range.
-	 */
 	private static class Range {
 		private final long start;
 		private final long end;
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/servlet/resourceprovider/TeamAppsSessionResourceProvider.java b/teamapps-ux/src/main/java/org/teamapps/ux/servlet/resourceprovider/TeamAppsSessionResourceProvider.java
new file mode 100644
index 000000000..4338a4234
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/servlet/resourceprovider/TeamAppsSessionResourceProvider.java
@@ -0,0 +1,60 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.servlet.resourceprovider;
+
+import org.teamapps.ux.resource.Resource;
+import org.teamapps.ux.session.SessionContext;
+
+import java.util.function.Function;
+
+import static org.teamapps.ux.session.SessionContextResourceManager.RESOURCE_LINK_ID_PREFIX;
+
+public class TeamAppsSessionResourceProvider implements ResourceProvider {
+
+	private final Function<String, SessionContext> sessionContextLookup;
+
+	public TeamAppsSessionResourceProvider(Function<String, SessionContext> sessionContextLookup) {
+		this.sessionContextLookup = sessionContextLookup;
+	}
+
+	@Override
+	public Resource getResource(String servletPath, String relativeResourcePath, String httpSessionId) {
+		try {
+			if (relativeResourcePath == null) {
+				return null;
+			}
+			if (relativeResourcePath.startsWith("/")) {
+				relativeResourcePath = relativeResourcePath.substring(1);
+			}
+			String[] parts = relativeResourcePath.split("/");
+			String uiSessionId = parts[0];
+			SessionContext sessionContext = sessionContextLookup.apply(uiSessionId);
+			if (sessionContext == null) {
+				return null;
+			}
+			int id = Integer.parseInt(parts[1].substring(RESOURCE_LINK_ID_PREFIX.length()));
+			return sessionContext.getBinaryResource(id);
+		} catch (Exception e) {
+			e.printStackTrace();
+		}
+		return null;
+	}
+
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/session/ClientGeoIpInfo.java b/teamapps-ux/src/main/java/org/teamapps/ux/session/ClientGeoIpInfo.java
index c97ef1858..e7a6146d7 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/session/ClientGeoIpInfo.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/session/ClientGeoIpInfo.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/session/ClientInfo.java b/teamapps-ux/src/main/java/org/teamapps/ux/session/ClientInfo.java
index ae078c1a5..06d1157bd 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/session/ClientInfo.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/session/ClientInfo.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,13 +19,17 @@
  */
 package org.teamapps.ux.session;
 
+import org.teamapps.dto.UiClientInfo;
+import org.teamapps.ux.session.navigation.Location;
+
+import java.util.HashSet;
 import java.util.List;
 import java.util.Map;
+import java.util.Set;
 
 public class ClientInfo {
 
 	private final String ip;
-	private final ClientGeoIpInfo geoIpInfo;
 	private final int screenWidth;
 	private final int screenHeight;
 	private final int viewPortWidth;
@@ -34,16 +38,20 @@ public class ClientInfo {
 	private final boolean highDensityScreen;
 	private final String timeZone;
 	private final int timeZoneOffsetMinutes;
-	private final List<String> clientTokens;
+	private final Set<String> clientTokens;
 	private final String userAgent;
-	private final String clientUrl;
+	private final Location location;
 	private final Map<String, Object> clientParameters;
+	private final String teamAppsVersion;
+
+	private ClientUserAgent userAgentData;
+	private ClientGeoIpInfo geoIpInfo;
 
-	public ClientInfo(String ip, ClientGeoIpInfo geoIpInfo, int screenWidth, int screenHeight, int viewPortWidth, int viewPortHeight,
-	                  String preferredLanguageIso, boolean highDensityScreen, String timeZone, int timeZoneOffsetMinutes, List<String> clientTokens, String userAgent,
-	                  String clientUrl, Map<String, Object> clientParameters) {
+
+	public ClientInfo(String ip, int screenWidth, int screenHeight, int viewPortWidth, int viewPortHeight,
+					  String preferredLanguageIso, boolean highDensityScreen, String timeZone, int timeZoneOffsetMinutes, List<String> clientTokens, String userAgent,
+					  Location location, Map<String, Object> clientParameters, String teamAppsVersion) {
 		this.ip = ip;
-		this.geoIpInfo = geoIpInfo;
 		this.screenWidth = screenWidth;
 		this.screenHeight = screenHeight;
 		this.viewPortWidth = viewPortWidth;
@@ -52,15 +60,34 @@ public ClientInfo(String ip, ClientGeoIpInfo geoIpInfo, int screenWidth, int scr
 		this.highDensityScreen = highDensityScreen;
 		this.timeZone = timeZone;
 		this.timeZoneOffsetMinutes = timeZoneOffsetMinutes;
-		this.clientTokens = clientTokens;
+		this.clientTokens = new HashSet<>(clientTokens);
 		this.userAgent = userAgent;
-		this.clientUrl = clientUrl;
+		this.location = location;
 		this.clientParameters = clientParameters;
+		this.teamAppsVersion = teamAppsVersion;
+	}
+
+	public static ClientInfo fromUiClientInfo(UiClientInfo uiClientInfo) {
+		return new ClientInfo(
+				uiClientInfo.getIp(),
+				uiClientInfo.getScreenWidth(),
+				uiClientInfo.getScreenHeight(),
+				uiClientInfo.getViewPortWidth(),
+				uiClientInfo.getViewPortHeight(),
+				uiClientInfo.getPreferredLanguageIso(),
+				uiClientInfo.getHighDensityScreen(),
+				uiClientInfo.getTimezoneIana(),
+				uiClientInfo.getTimezoneOffsetMinutes(),
+				uiClientInfo.getClientTokens(),
+				uiClientInfo.getUserAgentString(),
+				Location.fromUiLocation(uiClientInfo.getLocation()),
+				uiClientInfo.getClientParameters(),
+				uiClientInfo.getTeamAppsVersion());
 	}
 
 	public boolean isMobileDevice() {
-		int screenResolution = Math.max(getScreenWidth(), getScreenHeight());
-		if (screenResolution < 700) {
+		int minResolution = Math.min(getScreenWidth(), getScreenHeight());
+		if (minResolution < 470) {
 			return true;
 		}
 		return userAgent != null && userAgent.toLowerCase().contains(" mobile");
@@ -106,7 +133,7 @@ public int getTimeZoneOffsetMinutes() {
 		return timeZoneOffsetMinutes;
 	}
 
-	public List<String> getClientTokens() {
+	public Set<String> getClientTokens() {
 		return clientTokens;
 	}
 
@@ -114,11 +141,27 @@ public String getUserAgent() {
 		return userAgent;
 	}
 
+	public Location getLocation() {
+		return location;
+	}
+
 	public String getClientUrl() {
-		return clientUrl;
+		return location.getHref();
 	}
 
 	public Map<String, Object> getClientParameters() {
 		return clientParameters;
 	}
+
+	public ClientUserAgent getUserAgentData() {
+		return userAgentData;
+	}
+
+	public void setUserAgentData(ClientUserAgent userAgentData) {
+		this.userAgentData = userAgentData;
+	}
+
+	public void setGeoIpInfo(ClientGeoIpInfo geoIpInfo) {
+		this.geoIpInfo = geoIpInfo;
+	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/session/ClientSessionResourceProvider.java b/teamapps-ux/src/main/java/org/teamapps/ux/session/ClientSessionResourceProvider.java
deleted file mode 100644
index 1ebd72d03..000000000
--- a/teamapps-ux/src/main/java/org/teamapps/ux/session/ClientSessionResourceProvider.java
+++ /dev/null
@@ -1,122 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.ux.session;
-
-import org.teamapps.ux.resource.FileResource;
-import org.teamapps.ux.resource.Resource;
-import org.teamapps.uisession.QualifiedUiSessionId;
-
-import java.io.File;
-import java.io.InputStream;
-import java.util.Date;
-import java.util.HashMap;
-import java.util.Map;
-import java.util.concurrent.atomic.AtomicInteger;
-import java.util.function.Supplier;
-
-public class ClientSessionResourceProvider {
-
-	public static final String BASE_PATH = "/files/";
-	private QualifiedUiSessionId sessionId;
-	private AtomicInteger idGenerator = new AtomicInteger();
-	private Map<Integer, Resource> binaryResourceById = new HashMap<>();
-	private Map<File, String> fileLinkByFile = new HashMap<>();
-	private Map<String, String> resourceLinkByUniqueIdentifier = new HashMap<>();
-
-
-	public ClientSessionResourceProvider(QualifiedUiSessionId sessionId) {
-		this.sessionId = sessionId;
-	}
-
-	public Resource getBinaryResource(int resourceId) {
-		return binaryResourceById.get(resourceId);
-	}
-
-	public String createFileLink(File file) {
-		if (file == null) {
-			return null;
-		}
-		if (fileLinkByFile.containsKey(file)) {
-			return fileLinkByFile.get(file);
-		}
-		FileResource resource = new FileResource(file);
-		int id = createId();
-		binaryResourceById.put(id, resource);
-		String fileLink = createLink(id);
-		fileLinkByFile.put(file, fileLink);
-		return fileLink;
-	}
-
-	public String createResourceLink(Supplier<InputStream> inputStreamSupplier, long length, String resourceName, String uniqueIdentifier) {
-		if (inputStreamSupplier == null) {
-			return null;
-		}
-		if (uniqueIdentifier != null && resourceLinkByUniqueIdentifier.containsKey(uniqueIdentifier)) {
-			return resourceLinkByUniqueIdentifier.get(uniqueIdentifier);
-		}
-
-		Resource resource =new Resource() {
-			@Override
-			public InputStream getInputStream() {
-				return inputStreamSupplier.get();
-			}
-
-			@Override
-			public long getLength() {
-				return length;
-			}
-
-			@Override
-			public Date getLastModified() {
-				return new Date();
-			}
-
-			@Override
-			public Date getExpires() {
-				return new Date(System.currentTimeMillis() + 600000000L);
-			}
-
-			@Override
-			public String getName() {
-				return resourceName;
-			}
-
-			@Override
-			public String getMimeType() {
-				return null;
-			}
-		};
-		int id = createId();
-		binaryResourceById.put(id, resource);
-		String resourceLink = createLink(id);
-		if (uniqueIdentifier != null) {
-			resourceLinkByUniqueIdentifier.put(uniqueIdentifier, resourceLink);
-		}
-		return resourceLink;
-	}
-
-	private int createId() {
-		return idGenerator.incrementAndGet();
-	}
-
-	private String createLink(int id) {
-		return BASE_PATH + sessionId.getUiSessionId() + "/res" + id;
-	}
-}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/session/ClientUserAgent.java b/teamapps-ux/src/main/java/org/teamapps/ux/session/ClientUserAgent.java
new file mode 100644
index 000000000..163ae822b
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/session/ClientUserAgent.java
@@ -0,0 +1,153 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.session;
+
+public class ClientUserAgent {
+
+	private String deviceClass;
+	private String deviceName;
+	private String deviceBrand;
+	private String deviceCpu;
+	private String operatingSystemClass;
+	private String operatingSystemName;
+	private String operatingSystemNameVersion;
+	private String layoutEngineNameVersion;
+	private String agentClass;
+	private String agentName;
+	private String agentVersion;
+	private String agentNameVersion;
+
+	public ClientUserAgent() {
+	}
+
+	public String getDeviceClass() {
+		return deviceClass;
+	}
+
+	public void setDeviceClass(String deviceClass) {
+		this.deviceClass = deviceClass;
+	}
+
+	public String getDeviceName() {
+		return deviceName;
+	}
+
+	public void setDeviceName(String deviceName) {
+		this.deviceName = deviceName;
+	}
+
+	public String getDeviceBrand() {
+		return deviceBrand;
+	}
+
+	public void setDeviceBrand(String deviceBrand) {
+		this.deviceBrand = deviceBrand;
+	}
+
+	public String getDeviceCpu() {
+		return deviceCpu;
+	}
+
+	public void setDeviceCpu(String deviceCpu) {
+		this.deviceCpu = deviceCpu;
+	}
+
+	public String getOperatingSystemClass() {
+		return operatingSystemClass;
+	}
+
+	public void setOperatingSystemClass(String operatingSystemClass) {
+		this.operatingSystemClass = operatingSystemClass;
+	}
+
+	public String getOperatingSystemName() {
+		return operatingSystemName;
+	}
+
+	public void setOperatingSystemName(String operatingSystemName) {
+		this.operatingSystemName = operatingSystemName;
+	}
+
+	public String getOperatingSystemNameVersion() {
+		return operatingSystemNameVersion;
+	}
+
+	public void setOperatingSystemNameVersion(String operatingSystemNameVersion) {
+		this.operatingSystemNameVersion = operatingSystemNameVersion;
+	}
+
+	public String getLayoutEngineNameVersion() {
+		return layoutEngineNameVersion;
+	}
+
+	public void setLayoutEngineNameVersion(String layoutEngineNameVersion) {
+		this.layoutEngineNameVersion = layoutEngineNameVersion;
+	}
+
+	public String getAgentClass() {
+		return agentClass;
+	}
+
+	public void setAgentClass(String agentClass) {
+		this.agentClass = agentClass;
+	}
+
+	public String getAgentName() {
+		return agentName;
+	}
+
+	public void setAgentName(String agentName) {
+		this.agentName = agentName;
+	}
+
+	public String getAgentVersion() {
+		return agentVersion;
+	}
+
+	public void setAgentVersion(String agentVersion) {
+		this.agentVersion = agentVersion;
+	}
+
+	public String getAgentNameVersion() {
+		return agentNameVersion;
+	}
+
+	public void setAgentNameVersion(String agentNameVersion) {
+		this.agentNameVersion = agentNameVersion;
+	}
+
+	@Override
+	public String toString() {
+		return "ClientUserAgent{" +
+				"deviceClass='" + deviceClass + '\'' +
+				", deviceName='" + deviceName + '\'' +
+				", deviceBrand='" + deviceBrand + '\'' +
+				", deviceCpu='" + deviceCpu + '\'' +
+				", operatingSystemClass='" + operatingSystemClass + '\'' +
+				", operatingSystemName='" + operatingSystemName + '\'' +
+				", operatingSystemNameVersion='" + operatingSystemNameVersion + '\'' +
+				", layoutEngineNameVersion='" + layoutEngineNameVersion + '\'' +
+				", agentClass='" + agentClass + '\'' +
+				", agentName='" + agentName + '\'' +
+				", agentVersion='" + agentVersion + '\'' +
+				", agentNameVersion='" + agentNameVersion + '\'' +
+				'}';
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/session/CurrentSessionContext.java b/teamapps-ux/src/main/java/org/teamapps/ux/session/CurrentSessionContext.java
index b782ab5f4..a198c6c80 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/session/CurrentSessionContext.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/session/CurrentSessionContext.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,21 +19,16 @@
  */
 package org.teamapps.ux.session;
 
-import org.jetbrains.annotations.NotNull;
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
 
-import java.util.ArrayDeque;
-import java.util.Deque;
-
 public class CurrentSessionContext {
 
 	private static final Logger LOGGER = LoggerFactory.getLogger(CurrentSessionContext.class);
-	private static final ThreadLocal<Deque<LockableSessionContext>> CURRENT_CONTEXT = new ThreadLocal<>();
+	private static final ThreadLocal<SessionContext> CURRENT_CONTEXT = new ThreadLocal<>();
 
-	@NotNull
 	public static SessionContext get() {
-		LockableSessionContext sessionContext = getContextStack().peekLast();
+		SessionContext sessionContext = CURRENT_CONTEXT.get();
 		if (sessionContext == null) {
 			String errorMessage = "CurrentSessionContext is not set but requested! Please use SessionContext.runWithContext(Runnable) to set the context.";
 			IllegalStateException illegalStateException = new IllegalStateException(errorMessage);
@@ -43,26 +38,33 @@ public static SessionContext get() {
 		return sessionContext;
 	}
 
-	public static LockableSessionContext getOrNull() {
-		return getContextStack().peekLast();
+	public static void throwIfNotSameAs(SessionContext sessionContext) {
+		SessionContext currentSessionContext = CURRENT_CONTEXT.get();
+		if (currentSessionContext != sessionContext) {
+			String errorMessage;
+			if (currentSessionContext == null) {
+				errorMessage = "CurrentSessionContext is not set! Please use SessionContext.runWithContext(Runnable) to set the context.";
+			} else {
+				errorMessage = "CurrentSessionContext is set to a different session context than expected! Please use SessionContext.runWithContext(Runnable) to set the context.";
+			}
+			IllegalStateException illegalStateException = new IllegalStateException(errorMessage);
+			LOGGER.error(errorMessage, illegalStateException);
+			throw illegalStateException;
+		}
 	}
 
-	/*package-private*/
-	static void pushContext(LockableSessionContext sessionContext) {
-		getContextStack().addLast(sessionContext);
+	public static SessionContext getOrNull() {
+		return CURRENT_CONTEXT.get();
 	}
 
 	/*package-private*/
-	static void popContext() {
-		getContextStack().removeLast();
+	static void set(SessionContext sessionContext) {
+		CURRENT_CONTEXT.set(sessionContext);
 	}
 
-	private static Deque<LockableSessionContext> getContextStack() {
-		Deque<LockableSessionContext> contextStack = CURRENT_CONTEXT.get();
-		if (contextStack == null) {
-			contextStack = new ArrayDeque<>();
-			CURRENT_CONTEXT.set(contextStack);
-		}
-		return contextStack;
+	/*package-private*/
+	static void unset() {
+		CURRENT_CONTEXT.remove();
 	}
+
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/session/CustomMessageEvent.java b/teamapps-ux/src/main/java/org/teamapps/ux/session/CustomMessageEvent.java
new file mode 100644
index 000000000..ddf7bc339
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/session/CustomMessageEvent.java
@@ -0,0 +1,24 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.session;
+
+public record CustomMessageEvent(String type, String message) {
+
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/session/DateTimeFormatDescriptor.java b/teamapps-ux/src/main/java/org/teamapps/ux/session/DateTimeFormatDescriptor.java
new file mode 100644
index 000000000..75a585c5e
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/session/DateTimeFormatDescriptor.java
@@ -0,0 +1,322 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.session;
+
+import org.teamapps.dto.*;
+
+public class DateTimeFormatDescriptor {
+
+	// either dateStyle and/or timeStyle can be set, or the other fields. Both does not work. Exception: hourCycle
+	private final FullLongMediumShortType dateStyle;
+	private final FullLongMediumShortType timeStyle;
+
+	private final Integer fractionalSecondDigits;
+	private final DayPeriodType dayPeriod;
+	private final HourCycleType hourCycle;
+
+	private final LongShortNarrowType weekday;
+	private final LongShortNarrowType era;
+	private final NumericType year;
+	private final NumericOrLongShortNarrowType month;
+	private final NumericType day;
+	private final NumericType hour;
+	private final NumericType minute;
+	private final NumericType second;
+
+	public static Builder builer() {
+		return new Builder();
+	}
+
+	public static DateTimeFormatDescriptor forDate(FullLongMediumShortType dateStyle) {
+		return new DateTimeFormatDescriptor(dateStyle, null, null, null, null, null, null, null, null, null, null, null, null);
+	}
+
+	public static DateTimeFormatDescriptor forTime(FullLongMediumShortType timeStyle) {
+		return new DateTimeFormatDescriptor(null, timeStyle, null, null, null, null, null, null, null, null, null, null, null);
+	}
+
+	public static DateTimeFormatDescriptor forTime(FullLongMediumShortType timeStyle, HourCycleType hourCycle) {
+		return new DateTimeFormatDescriptor(null, timeStyle, null, null, hourCycle, null, null, null, null, null, null, null, null);
+	}
+
+	private DateTimeFormatDescriptor(FullLongMediumShortType dateStyle, FullLongMediumShortType timeStyle,
+									 Integer fractionalSecondDigits, DayPeriodType dayPeriod, HourCycleType hourCycle,
+									 LongShortNarrowType weekday, LongShortNarrowType era, NumericType year,
+									 NumericOrLongShortNarrowType month, NumericType day, NumericType hour,
+									 NumericType minute, NumericType second) {
+		this.dateStyle = dateStyle;
+		this.timeStyle = timeStyle;
+		this.fractionalSecondDigits = fractionalSecondDigits;
+		this.dayPeriod = dayPeriod;
+		this.hourCycle = hourCycle;
+		this.weekday = weekday;
+		this.era = era;
+		this.year = year;
+		this.month = month;
+		this.day = day;
+		this.hour = hour;
+		this.minute = minute;
+		this.second = second;
+	}
+
+	public UiDateTimeFormatDescriptor toDateTimeFormatDescriptor() {
+		UiDateTimeFormatDescriptor ui = new UiDateTimeFormatDescriptor();
+		ui.setDateStyle(dateStyle != null ? dateStyle.toUiValue() : null);
+		ui.setTimeStyle(timeStyle != null ? timeStyle.toUiValue() : null);
+		ui.setFractionalSecondDigits(fractionalSecondDigits == null || fractionalSecondDigits == 0 ? null : fractionalSecondDigits); // 0 not accepted by Chrome!
+		ui.setDayPeriod(dayPeriod != null ? dayPeriod.toUiValue() : null);
+		ui.setHourCycle(hourCycle != null ? hourCycle.toUiValue() : null);
+		ui.setWeekday(weekday != null ? weekday.toUiValue() : null);
+		ui.setEra(era != null ? era.toUiValue() : null);
+		ui.setYear(year != null ? year.toUiValue() : null);
+		ui.setMonth(month != null ? month.toUiValue() : null);
+		ui.setDay(day != null ? day.toUiValue() : null);
+		ui.setHour(hour != null ? hour.toUiValue() : null);
+		ui.setMinute(minute != null ? minute.toUiValue() : null);
+		ui.setSecond(second != null ? second.toUiValue() : null);
+		return ui;
+	}
+
+	public FullLongMediumShortType getDateStyle() {
+		return dateStyle;
+	}
+
+	public FullLongMediumShortType getTimeStyle() {
+		return timeStyle;
+	}
+
+	public DayPeriodType getDayPeriod() {
+		return dayPeriod;
+	}
+
+	public Integer getFractionalSecondDigits() {
+		return fractionalSecondDigits;
+	}
+
+	public DayPeriodType isDayPeriod() {
+		return dayPeriod;
+	}
+
+	public HourCycleType getHourCycle() {
+		return hourCycle;
+	}
+
+	public LongShortNarrowType getWeekday() {
+		return weekday;
+	}
+
+	public LongShortNarrowType getEra() {
+		return era;
+	}
+
+	public NumericType getYear() {
+		return year;
+	}
+
+	public NumericOrLongShortNarrowType getMonth() {
+		return month;
+	}
+
+	public NumericType getDay() {
+		return day;
+	}
+
+	public NumericType getHour() {
+		return hour;
+	}
+
+	public NumericType getMinute() {
+		return minute;
+	}
+
+	public NumericType getSecond() {
+		return second;
+	}
+
+	// === BUILDER ===
+
+	public static class Builder {
+		private Integer fractionalSecondDigits;
+		private DayPeriodType dayPeriod;
+		private HourCycleType hourCycle;
+
+		private LongShortNarrowType weekday;
+		private LongShortNarrowType era;
+		private NumericType year;
+		private NumericOrLongShortNarrowType month;
+		private NumericType day;
+		private NumericType hour;
+		private NumericType minute;
+		private NumericType second;
+
+		public Builder setFractionalSecondDigits(Integer fractionalSecondDigits) {
+			this.fractionalSecondDigits = fractionalSecondDigits;
+			return this;
+		}
+
+		public Builder setDayPeriod(DayPeriodType dayPeriod) {
+			this.dayPeriod = dayPeriod;
+			return this;
+		}
+
+		public Builder setHourCycle(HourCycleType hourCycle) {
+			this.hourCycle = hourCycle;
+			return this;
+		}
+
+		public Builder setWeekday(LongShortNarrowType weekday) {
+			this.weekday = weekday;
+			return this;
+		}
+
+		public Builder setEra(LongShortNarrowType era) {
+			this.era = era;
+			return this;
+		}
+
+		public Builder setYear(NumericType year) {
+			this.year = year;
+			return this;
+		}
+
+		public Builder setMonth(NumericOrLongShortNarrowType month) {
+			this.month = month;
+			return this;
+		}
+
+		public Builder setDay(NumericType day) {
+			this.day = day;
+			return this;
+		}
+
+		public Builder setHour(NumericType hour) {
+			this.hour = hour;
+			return this;
+		}
+
+		public Builder setMinute(NumericType minute) {
+			this.minute = minute;
+			return this;
+		}
+
+		public Builder setSecond(NumericType second) {
+			this.second = second;
+			return this;
+		}
+
+		public DateTimeFormatDescriptor build() {
+			return new DateTimeFormatDescriptor(
+					null, null,
+					fractionalSecondDigits,
+					dayPeriod,
+					hourCycle,
+					weekday,
+					era,
+					year,
+					month,
+					day,
+					hour,
+					minute,
+					second
+			);
+		}
+	}
+
+	// === ENUMS ===
+
+	public enum DayPeriodType {
+		NARROW,
+		SHORT,
+		LONG;
+
+		public UiDayPeriodType toUiValue() {
+			return UiDayPeriodType.valueOf(this.name());
+		}
+	}
+
+	public enum HourCycleType {
+		/**
+		 * 0-11
+		 */
+		H11,
+
+		/**
+		 * 1-12
+		 */
+		H12,
+
+		/**
+		 * 0-23
+		 */
+		H23,
+
+		/**
+		 * 1-24
+		 */
+		H24;
+
+		public UiHourCycleType toUiValue() {
+			return UiHourCycleType.valueOf(name());
+		}
+	}
+
+	public enum FullLongMediumShortType {
+		FULL,
+		LONG,
+		MEDIUM,
+		SHORT;
+
+		public UiFullLongMediumShortType toUiValue() {
+			return UiFullLongMediumShortType.valueOf(name());
+		}
+	}
+
+	public enum LongShortNarrowType {
+		LONG,
+		SHORT,
+		NARROW;
+
+		public UiLongShortNarrowType toUiValue() {
+			return UiLongShortNarrowType.valueOf(name());
+		}
+	}
+
+	public enum NumericType {
+		NUMERIC(),
+		TWO_DIGIT();
+
+		public UiNumericType toUiValue() {
+			return UiNumericType.valueOf(name());
+		}
+	}
+
+	public enum NumericOrLongShortNarrowType {
+		NUMERIC,
+		TWO_DIGIT,
+		LONG,
+		SHORT,
+		NARROW;
+
+		public UiNumericOrLongShortNarrowType toUiValue() {
+			return UiNumericOrLongShortNarrowType.valueOf(name());
+		}
+	}
+
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/session/LockableSessionContext.java b/teamapps-ux/src/main/java/org/teamapps/ux/session/ExecutionDecorator.java
similarity index 83%
rename from teamapps-ux/src/main/java/org/teamapps/ux/session/LockableSessionContext.java
rename to teamapps-ux/src/main/java/org/teamapps/ux/session/ExecutionDecorator.java
index 7c62f3e88..4183241cd 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/session/LockableSessionContext.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/session/ExecutionDecorator.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,9 +19,8 @@
  */
 package org.teamapps.ux.session;
 
-public interface LockableSessionContext extends SessionContext {
+public interface ExecutionDecorator {
+
+	void wrapExecution(Runnable runnable);
 
-	void lock(long timeout);
-	void unlock();
-	
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/session/ExecutionDecoratorStack.java b/teamapps-ux/src/main/java/org/teamapps/ux/session/ExecutionDecoratorStack.java
new file mode 100644
index 000000000..887b13561
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/session/ExecutionDecoratorStack.java
@@ -0,0 +1,62 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.session;
+
+import java.util.ArrayList;
+import java.util.Collections;
+import java.util.List;
+
+public class ExecutionDecoratorStack {
+
+	private final List<ExecutionDecorator> decorators = Collections.synchronizedList(new ArrayList<>());
+
+	public void addOuterDecorator(ExecutionDecorator decorator) {
+		decorators.add(decorator);
+	}
+
+	public void addInnerDecorator(ExecutionDecorator decorator) {
+		decorators.add(0, decorator);
+	}
+
+	public void removeDecorator(ExecutionDecorator decorator) {
+		decorators.remove(decorator);
+	}
+
+	public void clear() {
+		decorators.clear();
+	}
+
+	public Runnable createWrappedRunnable(Runnable r) {
+		if (decorators.isEmpty()) {
+			return r;
+		}
+		synchronized (decorators) {
+			Runnable outerRunnable = r;
+			for (ExecutionDecorator decorator : decorators) {
+				final Runnable innerRunnable = outerRunnable;
+				outerRunnable = () -> {
+					decorator.wrapExecution(innerRunnable);
+				};
+			}
+			return outerRunnable;
+		}
+	}
+
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/session/FastLaneExecutionException.java b/teamapps-ux/src/main/java/org/teamapps/ux/session/FastLaneExecutionException.java
new file mode 100644
index 000000000..e53081766
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/session/FastLaneExecutionException.java
@@ -0,0 +1,42 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.session;
+
+public class FastLaneExecutionException extends RuntimeException {
+
+	public FastLaneExecutionException() {
+	}
+
+	public FastLaneExecutionException(String message) {
+		super(message);
+	}
+
+	public FastLaneExecutionException(String message, Throwable cause) {
+		super(message, cause);
+	}
+
+	public FastLaneExecutionException(Throwable cause) {
+		super(cause);
+	}
+
+	public FastLaneExecutionException(String message, Throwable cause, boolean enableSuppression, boolean writableStackTrace) {
+		super(message, cause, enableSuppression, writableStackTrace);
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/session/KeyboardEvent.java b/teamapps-ux/src/main/java/org/teamapps/ux/session/KeyboardEvent.java
new file mode 100644
index 000000000..0b81e366c
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/session/KeyboardEvent.java
@@ -0,0 +1,133 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.session;
+
+import org.teamapps.dto.KeyEventType;
+import org.teamapps.ux.component.Component;
+
+public class KeyboardEvent {
+	private final KeyEventType eventType;
+	private final Component sourceComponent;
+	private final String code;
+	private final boolean isComposing;
+	private final String key;
+	private final int charCode;
+	private final int keyCode;
+	private final String locale;
+	private final int location;
+	private final boolean repeat;
+	private final boolean altKey;
+	private final boolean ctrlKey;
+	private final boolean shiftKey;
+	private final boolean metaKey;
+
+	public KeyboardEvent(KeyEventType eventType, Component sourceComponent, String code, boolean isComposing, String key, int charCode, int keyCode, String locale, int location, boolean repeat, boolean altKey, boolean ctrlKey, boolean shiftKey, boolean metaKey) {
+		this.eventType = eventType;
+		this.sourceComponent = sourceComponent;
+		this.code = code;
+		this.isComposing = isComposing;
+		this.key = key;
+		this.charCode = charCode;
+		this.keyCode = keyCode;
+		this.locale = locale;
+		this.location = location;
+		this.repeat = repeat;
+		this.altKey = altKey;
+		this.ctrlKey = ctrlKey;
+		this.shiftKey = shiftKey;
+		this.metaKey = metaKey;
+	}
+
+	public KeyEventType getEventType() {
+		return eventType;
+	}
+
+	public Component getSourceComponent() {
+		return sourceComponent;
+	}
+
+	public String getCode() {
+		return code;
+	}
+
+	public boolean isComposing() {
+		return isComposing;
+	}
+
+	public String getKey() {
+		return key;
+	}
+
+	public int getCharCode() {
+		return charCode;
+	}
+
+	public int getKeyCode() {
+		return keyCode;
+	}
+
+	public String getLocale() {
+		return locale;
+	}
+
+	public int getLocation() {
+		return location;
+	}
+
+	public boolean isRepeat() {
+		return repeat;
+	}
+
+	public boolean isAltKey() {
+		return altKey;
+	}
+
+	public boolean isCtrlKey() {
+		return ctrlKey;
+	}
+
+	public boolean isShiftKey() {
+		return shiftKey;
+	}
+
+	public boolean isMetaKey() {
+		return metaKey;
+	}
+
+	@Override
+	public String toString() {
+		return "KeyboardEvent{" +
+				"eventType=" + eventType +
+				", sourceComponent=" + sourceComponent +
+				", code='" + code + '\'' +
+				", isComposing=" + isComposing +
+				", key='" + key + '\'' +
+				", charCode=" + charCode +
+				", keyCode=" + keyCode +
+				", locale='" + locale + '\'' +
+				", location=" + location +
+				", repeat=" + repeat +
+				", altKey=" + altKey +
+				", ctrlKey=" + ctrlKey +
+				", shiftKey=" + shiftKey +
+				", metaKey=" + metaKey +
+				'}';
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/session/NavigationStateChangeEvent.java b/teamapps-ux/src/main/java/org/teamapps/ux/session/NavigationStateChangeEvent.java
new file mode 100644
index 000000000..cd092fc1f
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/session/NavigationStateChangeEvent.java
@@ -0,0 +1,41 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.session;
+
+import org.teamapps.ux.session.navigation.Location;
+
+public class NavigationStateChangeEvent {
+
+	private final Location location;
+	private final boolean triggeredBrowserNavigation;
+
+	public NavigationStateChangeEvent(Location location, boolean triggeredBrowserNavigation) {
+		this.location = location;
+		this.triggeredBrowserNavigation = triggeredBrowserNavigation;
+	}
+
+	public Location getLocation() {
+		return location;
+	}
+
+	public boolean istriggeredBrowserNavigation() {
+		return triggeredBrowserNavigation;
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/session/RoutingMode.java b/teamapps-ux/src/main/java/org/teamapps/ux/session/RoutingMode.java
new file mode 100644
index 000000000..5dacb6ae9
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/session/RoutingMode.java
@@ -0,0 +1,28 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.session;
+
+public enum RoutingMode {
+
+	DISABLED,
+	MANUAL_NAVIGATION_STATE_UPDATES,
+	AUTO
+
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/session/SessionConfiguration.java b/teamapps-ux/src/main/java/org/teamapps/ux/session/SessionConfiguration.java
index 888c8a4b3..285b8bc81 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/session/SessionConfiguration.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/session/SessionConfiguration.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,124 +19,112 @@
  */
 package org.teamapps.ux.session;
 
+import com.ibm.icu.util.GregorianCalendar;
+import com.ibm.icu.util.ULocale;
+import org.teamapps.dto.ClosedSessionHandlingType;
 import org.teamapps.dto.UiConfiguration;
-import org.teamapps.dto.UiWeekDay;
+import org.teamapps.ux.session.DateTimeFormatDescriptor.FullLongMediumShortType;
 
-import java.text.DateFormat;
-import java.text.DecimalFormat;
-import java.text.DecimalFormatSymbols;
-import java.text.SimpleDateFormat;
+import java.time.DayOfWeek;
 import java.time.ZoneId;
 import java.util.Locale;
 
 public class SessionConfiguration {
 
-	private Locale languageLocale = Locale.ENGLISH;
+	private ULocale locale = ULocale.US;
+	private DateTimeFormatDescriptor dateFormat = DateTimeFormatDescriptor.forDate(FullLongMediumShortType.SHORT);
+	private DateTimeFormatDescriptor timeFormat = DateTimeFormatDescriptor.forTime(FullLongMediumShortType.SHORT);
 	private ZoneId timeZone = ZoneId.of("Europe/Berlin");
-	private String dateFormat = "yyyy-MM-dd";
-	private String timeFormat = "HH:mm";
-	private UiWeekDay firstDayOfWeek = UiWeekDay.MONDAY;
-	private String decimalSeparator = ".";
-	private String thousandsSeparator = "";
+	private DayOfWeek firstDayOfWeek; // null == determine by locale
 
 	private boolean optimizedForTouch = false;
-	private String iconPath = "icons";
+	private String iconPath = "/icons";
 	private StylingTheme theme = StylingTheme.DEFAULT;
-
-	public static SessionConfiguration createDefault() {
-		return new SessionConfiguration();
-	}
-
-	public static SessionConfiguration create(Locale userLocale, ZoneId timeZone, StylingTheme theme, boolean optimizedForTouch) {
+	private ClosedSessionHandlingType closedSessionHandling = ClosedSessionHandlingType.MESSAGE_WINDOW;
+
+	public static SessionConfiguration createForClientInfo(ClientInfo clientInfo) {
+		boolean optimizedForTouch = false;
+		StylingTheme theme = StylingTheme.DEFAULT;
+		if (clientInfo.isMobileDevice()) {
+			optimizedForTouch = true;
+			theme = StylingTheme.MODERN;
+		}
+		return SessionConfiguration.create(
+				ULocale.forLanguageTag(clientInfo.getPreferredLanguageIso()),
+				ZoneId.of(clientInfo.getTimeZone()),
+				theme,
+				optimizedForTouch
+		);
+	}
+
+	public static SessionConfiguration create(ULocale locale, ZoneId timeZone, StylingTheme theme, boolean optimizedForTouch) {
 		SessionConfiguration config = new SessionConfiguration();
-		config.setLanguageLocale(userLocale);
-		config.setIconPath("icons");
+		config.setULocale(locale);
 		config.setTimeZone(timeZone);
-
-		String dateFormat = ((SimpleDateFormat) DateFormat.getDateInstance(DateFormat.SHORT, userLocale)).toPattern();
-		config.setDateFormat(dateFormat);
-
-		String timeFormat = ((SimpleDateFormat) DateFormat.getTimeInstance(DateFormat.SHORT, userLocale)).toPattern();
-		config.setTimeFormat(timeFormat);
-
-		DecimalFormatSymbols decimalFormatSymbols = ((DecimalFormat) DecimalFormat.getInstance(userLocale)).getDecimalFormatSymbols();
-		config.setThousandsSeparator("" + decimalFormatSymbols.getGroupingSeparator());
-		config.setDecimalSeparator("" + decimalFormatSymbols.getDecimalSeparator());
-
 		config.setTheme(theme);
 		config.setOptimizedForTouch(optimizedForTouch);
 		return config;
 	}
 
+	private static DayOfWeek determineFirstDayOfWeek(ULocale locale) {
+		return DayOfWeek.of(GregorianCalendar.getInstance(locale).getFirstDayOfWeek()).minus(1);
+	}
+
 	public UiConfiguration createUiConfiguration() {
 		UiConfiguration config = new UiConfiguration();
-		config.setIsoLanguage(languageLocale.getLanguage());
-		config.setTimeZoneId(timeZone.getId());
-		config.setDateFormat(dateFormat);
-		config.setTimeFormat(timeFormat);
-		config.setFirstDayOfWeek(firstDayOfWeek);
-		config.setDecimalSeparator(decimalSeparator);
-		config.setThousandsSeparator(thousandsSeparator);
+		config.setLocale(locale.toLanguageTag());
 		config.setOptimizedForTouch(optimizedForTouch);
-		config.setIconPath(iconPath);
 		config.setThemeClassName(theme.getCssClass());
+		config.setClosedSessionHandling(closedSessionHandling);
 		return config;
 	}
 
-	public Locale getLanguageLocale() {
-		return languageLocale;
+	public Locale getLocale() {
+		return locale.toLocale();
 	}
 
-	public void setLanguageLocale(Locale languageLocale) {
-		this.languageLocale = languageLocale;
+	public ULocale getULocale() {
+		return locale;
 	}
 
-	public ZoneId getTimeZone() {
-		return timeZone;
+	public void setLocale(Locale locale) {
+		setULocale(ULocale.forLocale(locale));
 	}
 
-	public void setTimeZone(ZoneId timeZone) {
-		this.timeZone = timeZone;
+	public void setULocale(ULocale locale) {
+		this.locale = locale;
 	}
 
-	public String getDateFormat() {
+	public DateTimeFormatDescriptor getDateFormat() {
 		return dateFormat;
 	}
 
-	public void setDateFormat(String dateFormat) {
+	public void setDateFormat(DateTimeFormatDescriptor dateFormat) {
 		this.dateFormat = dateFormat;
 	}
 
-	public String getTimeFormat() {
+	public DateTimeFormatDescriptor getTimeFormat() {
 		return timeFormat;
 	}
 
-	public void setTimeFormat(String timeFormat) {
+	public void setTimeFormat(DateTimeFormatDescriptor timeFormat) {
 		this.timeFormat = timeFormat;
 	}
 
-	public UiWeekDay getFirstDayOfWeek() {
-		return firstDayOfWeek;
-	}
-
-	public void setFirstDayOfWeek(UiWeekDay firstDayOfWeek) {
-		this.firstDayOfWeek = firstDayOfWeek;
-	}
-
-	public String getDecimalSeparator() {
-		return decimalSeparator;
+	public ZoneId getTimeZone() {
+		return timeZone;
 	}
 
-	public void setDecimalSeparator(String decimalSeparator) {
-		this.decimalSeparator = decimalSeparator;
+	public void setTimeZone(ZoneId timeZone) {
+		this.timeZone = timeZone;
 	}
 
-	public String getThousandsSeparator() {
-		return thousandsSeparator;
+	public DayOfWeek getFirstDayOfWeek() {
+		return firstDayOfWeek != null ? firstDayOfWeek : determineFirstDayOfWeek(locale);
 	}
 
-	public void setThousandsSeparator(String thousandsSeparator) {
-		this.thousandsSeparator = thousandsSeparator;
+	public void setFirstDayOfWeek(DayOfWeek firstDayOfWeek) {
+		this.firstDayOfWeek = firstDayOfWeek;
 	}
 
 	public boolean isOptimizedForTouch() {
@@ -162,4 +150,12 @@ public StylingTheme getTheme() {
 	public void setTheme(StylingTheme theme) {
 		this.theme = theme;
 	}
+
+	public ClosedSessionHandlingType getClosedSessionHandling() {
+		return closedSessionHandling;
+	}
+
+	public void setClosedSessionHandling(ClosedSessionHandlingType closedSessionHandling) {
+		this.closedSessionHandling = closedSessionHandling;
+	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/session/SessionContext.java b/teamapps-ux/src/main/java/org/teamapps/ux/session/SessionContext.java
index 1d0ce568b..c8cadd9c9 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/session/SessionContext.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/session/SessionContext.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,202 +19,938 @@
  */
 package org.teamapps.ux.session;
 
+import com.ibm.icu.util.ULocale;
+import jakarta.servlet.http.HttpSession;
+import jakarta.ws.rs.ext.ParamConverterProvider;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
 import org.teamapps.common.format.Color;
-import org.teamapps.dto.UiCommand;
-import org.teamapps.dto.UiEntranceAnimation;
-import org.teamapps.dto.UiExitAnimation;
-import org.teamapps.dto.UiRootPanel;
+import org.teamapps.common.format.RgbaColor;
+import org.teamapps.dto.*;
+import org.teamapps.event.Disposable;
 import org.teamapps.event.Event;
-import org.teamapps.icons.api.Icon;
-import org.teamapps.icons.api.IconTheme;
-import org.teamapps.util.UiUtil;
+import org.teamapps.icons.Icon;
+import org.teamapps.icons.SessionIconProvider;
+import org.teamapps.server.UxServerContext;
+import org.teamapps.uisession.*;
+import org.teamapps.uisession.statistics.UiSessionStats;
+import org.teamapps.ux.component.ClientObject;
 import org.teamapps.ux.component.Component;
+import org.teamapps.ux.component.animation.EntranceAnimation;
+import org.teamapps.ux.component.animation.ExitAnimation;
+import org.teamapps.ux.component.field.Button;
+import org.teamapps.ux.component.field.DisplayField;
+import org.teamapps.ux.component.flexcontainer.VerticalLayout;
+import org.teamapps.ux.component.linkbutton.LinkButton;
 import org.teamapps.ux.component.notification.Notification;
 import org.teamapps.ux.component.notification.NotificationPosition;
+import org.teamapps.ux.component.popup.Popup;
 import org.teamapps.ux.component.rootpanel.RootPanel;
+import org.teamapps.ux.component.rootpanel.WakeLock;
 import org.teamapps.ux.component.template.Template;
 import org.teamapps.ux.component.template.TemplateReference;
 import org.teamapps.ux.component.window.Window;
+import org.teamapps.ux.i18n.ResourceBundleTranslationProvider;
+import org.teamapps.ux.i18n.TranslationProvider;
+import org.teamapps.ux.icon.IconBundle;
+import org.teamapps.ux.icon.TeamAppsIconBundle;
+import org.teamapps.ux.json.UxJacksonSerializationTemplate;
 import org.teamapps.ux.resource.Resource;
+import org.teamapps.ux.session.navigation.*;
 
 import java.io.File;
-import java.io.InputStream;
 import java.time.ZoneId;
-import java.util.Locale;
-import java.util.Map;
-import java.util.ResourceBundle;
+import java.util.*;
+import java.util.concurrent.Callable;
+import java.util.concurrent.CompletableFuture;
+import java.util.concurrent.ExecutorService;
 import java.util.function.Consumer;
-import java.util.function.Supplier;
+import java.util.stream.Collectors;
 
-public interface SessionContext {
+import static org.teamapps.common.util.ExceptionUtil.softenExceptions;
+import static org.teamapps.ux.session.navigation.NavigationHistoryOperation.PUSH;
+import static org.teamapps.ux.session.navigation.NavigationHistoryOperation.REPLACE;
+import static org.teamapps.ux.session.navigation.RoutingUtil.isEmptyPath;
+import static org.teamapps.ux.session.navigation.RoutingUtil.normalizePath;
 
-	ClientInfo getClientInfo();
+public class SessionContext {
 
-	long getLastClientEventTimestamp();
+	private static final Logger LOGGER = LoggerFactory.getLogger(SessionContext.class);
+	private static final String DEFAULT_BACKGROUND_NAME = "defaultBackground";
+	private static final String DEFAULT_BACKGROUND_URL = "/resources/backgrounds/default-bl.jpg";
 
-	void setLastClientEventTimestamp(long timestamp);
+	private ExecutorService sessionExecutor;
 
-	boolean isOpen();
+	public final Event<KeyboardEvent> onGlobalKeyEventOccurred = new Event<>();
 
-	void destroy();
+	public final Event<UiSessionActivityState> onActivityStateChanged = new Event<>();
+	public final Event<UiSessionClosingReason> onDestroyed = new Event<>();
+	/**
+	 * Decorators around all executions inside this SessionContext. These will be invoked when the Thread is already bound to the SessionContext, so SessionContext.current() will
+	 * return this instance.
+	 */
+	public final ExecutionDecoratorStack executionDecorators = new ExecutionDecoratorStack();
+	public final Event<NavigationStateChangeEvent> onNavigationStateChange = new Event<>();
+	public final Event<CustomMessageEvent> onCustomMessage = new Event<>();
+
+	private UiSessionState state = UiSessionState.ACTIVE;
+
+	private final UiSession uiSession;
+
+	private final ClientInfo clientInfo;
+	private Location currentLocation;
+
+	private final HttpSession httpSession;
+	private final UxServerContext serverContext;
+	private final SessionIconProvider iconProvider;
+	private final UxJacksonSerializationTemplate uxJacksonSerializationTemplate;
+	private final HashMap<String, ClientObject> clientObjectsById = new HashMap<>();
+	private final SessionContextResourceManager sessionResourceProvider;
+
+	private TranslationProvider translationProvider;
+
+	private final Map<String, Template> registeredTemplates = new HashMap<>();
+	private SessionConfiguration sessionConfiguration;
+
+	private final Map<String, Icon<?, ?>> bundleIconByKey = new HashMap<>();
+
+	private boolean defaultBackgroundRegistered;
+
+	private Window sessionExpiredWindow;
+	private Window sessionErrorWindow;
+	private Window sessionTerminatedWindow;
+
+	private final ParamConverterProvider navigationParamConverterProvider;
+	private final String navigationPathPrefix;
+
+	private RoutingMode routingMode = RoutingMode.DISABLED;
+	private final Map<String, Router> routersByPathPrefix = new HashMap<>();
+	private final List<Router> routers = new ArrayList<>();
+	private boolean routeHandlingDirty = false; // indicates whether the routers changed during routing
+	private boolean skipAutoUpdateNavigationHistoryStateOnce = false;
+
+	private boolean destroyed;
+
+	private final UiSessionListener uiSessionListener = new UiSessionListener() {
+		@Override
+		public void onUiEvent(String sessionId, UiEvent event) {
+			runWithContext(() -> {
+				String uiComponentId = event.getComponentId();
+				if (uiComponentId != null) {
+					ClientObject clientObject = getClientObject(uiComponentId);
+					if (clientObject != null) {
+						clientObject.handleUiEvent(event);
+					} else {
+						throw new TeamAppsComponentNotFoundException(sessionId, uiComponentId);
+					}
+				} else {
+					handleStaticEvent(event);
+				}
+			});
+		}
 
-	Event<Void> onDestroyed();
+		@Override
+		public void onUiQuery(String sessionId, UiQuery query, Consumer<Object> resultCallback) {
+			runWithContext(() -> {
+				String uiComponentId = query.getComponentId();
+				ClientObject clientObject = getClientObject(uiComponentId);
+				if (clientObject != null) {
+					Object result = clientObject.handleUiQuery(query);
+					new UxJacksonSerializationTemplate(SessionContext.this).doWithUxJacksonSerializers(() -> {
+						resultCallback.accept(result);
+					});
+				} else {
+					throw new TeamAppsComponentNotFoundException(sessionId, uiComponentId);
+				}
+			});
+		}
+
+		@Override
+		public void onStateChanged(String sessionId, UiSessionState state) {
+			runWithContext(() -> {
+				boolean activityStateChanged = SessionContext.this.state.isActive() != state.isActive();
+				SessionContext.this.state = state;
+				if (activityStateChanged) {
+					onActivityStateChanged.fire(new UiSessionActivityState(state.isActive()));
+				}
+			});
+		}
 
-	<T> void queueCommand(UiCommand<T> command);
-	
-	<T> void queueCommand(UiCommand<T> command, Consumer<T> resultCallback);
+		@Override
+		public void onClosed(String sessionId, UiSessionClosingReason reason) {
+			runWithContext(() -> {
+				onDestroyed.fireIgnoringExceptions(reason);
+
+				synchronized (SessionContext.this) {
+					SessionContext.this.destroyed = true;
+					// Enqueue this at the end, so all onDestroyed handlers have already been executed before disabling any more executions inside the context!
+					sessionExecutor.execute(sessionExecutor::shutdown);
+					sessionExecutor = null; // GC (relevant only in case the sessionContext is retained in a memory leak)
+				}
+			});
+		}
+	};
+
+	public SessionContext(UiSession uiSession,
+						  ExecutorService sessionExecutor,
+						  ClientInfo clientInfo,
+						  SessionConfiguration sessionConfiguration,
+						  HttpSession httpSession,
+						  UxServerContext serverContext,
+						  SessionIconProvider iconProvider,
+						  String navigationPathPrefix,
+						  ParamConverterProvider navigationParamConverterProvider // TODO #ownInterfaces
+	) {
+		this.sessionExecutor = sessionExecutor;
+		this.uiSession = uiSession;
+		this.httpSession = httpSession;
+		this.clientInfo = clientInfo;
+		this.currentLocation = clientInfo.getLocation();
+		this.sessionConfiguration = sessionConfiguration;
+		this.serverContext = serverContext;
+		this.iconProvider = iconProvider;
+		this.navigationPathPrefix = navigationPathPrefix;
+		this.navigationParamConverterProvider = navigationParamConverterProvider;
+		this.uxJacksonSerializationTemplate = new UxJacksonSerializationTemplate(this);
+		this.translationProvider = new ResourceBundleTranslationProvider("org.teamapps.ux.i18n.DefaultCaptions", Locale.ENGLISH);
+		addIconBundle(TeamAppsIconBundle.createBundle());
+		runWithContext(() -> {
+			sendConfigToClient();
+			updateSessionMessageWindows();
+		});
+		this.sessionResourceProvider = new SessionContextResourceManager(uiSession.getSessionId());
+	}
 
-	void flushCommands();
 
-	IconTheme getIconTheme();
+	public Location getCurrentLocation() {
+		return currentLocation;
+	}
 
-	void setIconTheme(IconTheme theme);
+	public void navigateBack(int steps) {
+		navigateForward(-steps);
+	}
 
-	default Locale getLanguageLocale() {
-		return getConfiguration().getLanguageLocale();
+	public void navigateForward(int steps) {
+		queueCommand(new UiRootPanel.NavigateForwardCommand(steps));
 	}
 
-	default ZoneId getTimeZone() {
-		return getConfiguration().getTimeZone();
+	public Router getBaseRouter() {
+		return getRouter("/");
 	}
 
-	default String resolveIcon(Icon icon) {
-		if (icon == null) {
-			return null;
+	public Router getRouter(String pathPrefix) {
+		pathPrefix = normalizePath(pathPrefix);
+		return this.routersByPathPrefix.computeIfAbsent(pathPrefix, prefix -> {
+			Router router = new Router(prefix);
+			routers.add(router);
+			router.addChangeListener(() -> routeHandlingDirty = true);
+			routeHandlingDirty = true;
+			return router;
+		});
+	}
+
+	public void updateNavigationHistoryState() {
+		Route currentRoute = Route.fromLocation(getCurrentLocation());
+
+		Router router = getBaseRouter();
+		Route route = Route.create();
+
+		NavigationHistoryOperation pathChangeOperation = REPLACE;
+		Set<String> queryParamNamesWorthStatePush = new HashSet<>();
+
+		while (router != null) {
+			RelativeRouteInfo relativeRouteInfo = router.calculateRelativeRouteInfo();
+			route = route.withPathSuffix(relativeRouteInfo.getRoute().getPath())
+					.withQueryParams(relativeRouteInfo.getRoute().getQueryParams());
+			if (relativeRouteInfo.isPathChangeWorthStatePush()) {
+				pathChangeOperation = PUSH;
+			}
+			queryParamNamesWorthStatePush.addAll(relativeRouteInfo.getQueryParamNamesWorthStatePush());
+			String relativePathPrefix = relativeRouteInfo.getRoute().getPath();
+			String absolutePathPrefix = route.getPath();
+			boolean addsToPath = !isEmptyPath(relativePathPrefix);
+			// TODO #performance check efficiency and improve
+			router = addsToPath ? this.routers.stream().filter(r -> r.matchesPathPrefix(absolutePathPrefix)).findFirst().orElse(null) : null;
+		}
+
+		route = route.withPathPrefix(navigationPathPrefix);
+		if (!route.equals(currentRoute)) {
+			Route r = route;
+			if (pathChangeOperation == PUSH && !currentRoute.getPath().equals(route.getPath())
+				|| queryParamNamesWorthStatePush.stream().anyMatch(pName -> !Objects.equals(r.getQueryParam(pName), currentRoute.getQueryParam(pName)))) {
+				pushNavigationHistoryState(route.toString(), false);
+			} else {
+				replaceNavigationHistoryState(route.toString(), false);
+			}
+		}
+	}
+
+	/**
+	 * Pushes a new entry (URL) to the browser's navigation history without reloading the site.
+	 * See <a href="https://developer.mozilla.org/en-US/docs/Web/API/History/pushState">JavaScript API</a>.
+	 * <p>
+	 * This method may or may not fire an {@link #onNavigationStateChange} event, depending on the value of the <code>fireEvent</code> parameter.
+	 * Both cases are useful:
+	 * <ul>
+	 *     <li>When the user does some action that changes the state of the UI that needs to be reflected in the URL
+	 *     (say changing a table filter parameter) the corresponding change will most likely already have been applied to the UI. So in such
+	 *     a case it does not make sense to fire the event.</li>
+	 *     <li>In the case that the user clicks on a LinkButton (or similar action) which will navigate to some completely different parts of the UI, it makes sense
+	 *     that the event is triggered, so the routing to that UI can happen.</li>
+	 * </ul>
+	 * <p>
+	 * Note that the {@link #onNavigationStateChange} event will not be fired asynchronously since it will be triggered
+	 * by the client (browser!) in order to guarantee the correct sequence of events. For example, if the user presses a navigation
+	 * button at the same time as this method is invoked, which one was first needs to be consistent on the client and server side.
+	 *
+	 * @param pathWithQueryParams May also be a complete URL, but this is not recommended, since the origin needs to stay the same.
+	 * @param fireEvent           Indicates whether an onNavigationStateChange event should be fired as a reaction of this invocation.
+	 */
+	public void pushNavigationHistoryState(String pathWithQueryParams, boolean fireEvent) {
+		changeNavigationHistoryState(pathWithQueryParams, fireEvent, NavigationHistoryOperation.PUSH);
+	}
+
+	/**
+	 * Same as {@link #pushNavigationHistoryState(String, boolean)}, except that it replaces the current browser history entry (URL).
+	 * See <a href="https://developer.mozilla.org/en-US/docs/Web/API/History/replaceState">JavaScript API</a>.
+	 *
+	 * @see #pushNavigationHistoryState(String, boolean)
+	 */
+	public void replaceNavigationHistoryState(String pathWithQueryParams, boolean fireEvent) {
+		changeNavigationHistoryState(pathWithQueryParams, fireEvent, REPLACE);
+	}
+
+	/**
+	 * @see #pushNavigationHistoryState(String, boolean)
+	 */
+	public void changeNavigationHistoryState(String pathWithQueryParams, boolean fireEvent, NavigationHistoryOperation operation) {
+		if (Objects.equals(currentLocation.getPathname() + currentLocation.getSearch(), pathWithQueryParams)) {
+			LOGGER.debug("Not sending same navigation history state as previous one to client.");
+			return; // nothing to do here...
 		}
-		return icon.getQualifiedIconId(getIconTheme());
+		Location newLocation = currentLocation.withPathNameAndQueryParams(pathWithQueryParams);
+		currentLocation = newLocation;
+		queueCommand(new UiRootPanel.ChangeNavigationHistoryStateCommand(pathWithQueryParams, fireEvent, operation == NavigationHistoryOperation.PUSH), unused -> {
+			// make sure this is the location after the browser applied it. The user might have clicked on the back button in the meantime.
+			currentLocation = newLocation;
+			skipAutoUpdateNavigationHistoryStateOnce = true;
+		});
+	}
+
+	public static SessionContext current() {
+		return CurrentSessionContext.get();
+	}
+
+	public static SessionContext currentOrNull() {
+		return CurrentSessionContext.getOrNull();
+	}
+
+	public void setTranslationProvider(TranslationProvider translationProvider) {
+		this.translationProvider = translationProvider;
+	}
+
+	public TranslationProvider getTranslationProvider() {
+		return translationProvider;
+	}
+
+	public void addIconBundle(IconBundle iconBundle) {
+		iconBundle.getEntries().forEach(entry -> bundleIconByKey.put(entry.getKey(), entry.getIcon()));
+	}
+
+	public Icon<?, ?> getIcon(String key) {
+		return bundleIconByKey.get(key);
+	}
+
+	public ULocale getULocale() {
+		return sessionConfiguration.getULocale();
+	}
+
+	public Locale getLocale() {
+		return sessionConfiguration.getLocale();
+	}
+
+	public void setLocale(Locale locale) {
+		setULocale(ULocale.forLocale(locale));
+	}
+
+	public void setULocale(ULocale locale) {
+		sessionConfiguration.setULocale(locale);
+		setConfiguration(sessionConfiguration);
+	}
+
+	public String getLocalized(String key, Object... parameters) {
+		return translationProvider.getLocalized(getLocale(), key, parameters);
+	}
+
+	public boolean isActive() {
+		return state.isActive();
 	}
 
-	Locale getLocale();
+	public UiSessionState getState() {
+		return state;
+	}
 
-	ResourceBundle getMessageBundle();
+	public boolean isDestroyed() {
+		return state == UiSessionState.CLOSED;
+	}
 
+	public void destroy() {
+		destroy(UiSessionClosingReason.TERMINATED_BY_APPLICATION);
+	}
 
-	String getLocalized(String key, Object... parameters);
+	private void destroy(UiSessionClosingReason reason) {
+		uiSession.close(reason);
+		// the UiSession will call us back (onStateChanged(), onClosed())
+	}
 
+	public <RESULT> void queueCommand(UiCommand<RESULT> command, Consumer<RESULT> resultCallback) {
+		if (CurrentSessionContext.get() != this) {
+			String errorMessage = "Trying to queue a command for foreign/null SessionContext (CurrentSessionContext.get() != this)."
+								  + " Please use SessionContext.runWithContext(Runnable). NOTE: The command will not get queued!";
+			LOGGER.error(errorMessage);
+			throw new IllegalStateException(errorMessage);
+		}
+		Consumer<RESULT> wrappedCallback = resultCallback != null ? result -> this.runWithContext(() -> resultCallback.accept(result)) : null;
 
-	SessionStore getSessionStore();
+		uxJacksonSerializationTemplate.doWithUxJacksonSerializers(() -> uiSession.sendCommand(new UiCommandWithResultCallback<>(command, wrappedCallback)));
+	}
+
+	public void queueCommand(UiCommand<?> command) {
+		this.queueCommand(command, null);
+	}
+
+	public ClientInfo getClientInfo() {
+		return clientInfo;
+	}
+
+	public HttpSession getHttpSession() {
+		return httpSession;
+	}
+
+	public ClientBackPressureInfo getClientBackPressureInfo() {
+		return uiSession.getClientBackPressureInfo();
+	}
+
+	public String createFileLink(File file) {
+		return sessionResourceProvider.createFileLink(file);
+	}
 
-	default void registerComponent(Component component) {
-		getSessionStore().setSessionValue(component.getId(), component);
+	public String createResourceLink(Resource resource, String uniqueIdentifier) {
+		return sessionResourceProvider.createResourceLink(resource, uniqueIdentifier);
 	}
 
-	default void unregisterComponent(Component component) {
-		getSessionStore().setSessionValue(component.getId(), null);
+	public Resource getBinaryResource(int resourceId) {
+		return sessionResourceProvider.getBinaryResource(resourceId);
 	}
 
-	default Component getComponent(String componentId) {
-		return (Component) getSessionStore().getSessionValue(componentId);
+	public File getUploadedFileByUuid(String uuid) {
+		return this.serverContext.getUploadedFileByUuid(uuid);
 	}
 
-	String createFileLink(File file);
+	public TemplateReference registerTemplate(String id, Template template) {
+		registeredTemplates.put(id, template);
+		queueCommand(new UiRootPanel.RegisterTemplateCommand(id, template.createUiTemplate()));
+		return new TemplateReference(template, id);
+	}
 
-	default String createResourceLink(Supplier<InputStream> inputStreamSupplier, long length) {
-		return createResourceLink(inputStreamSupplier, length, null);
+	public void registerTemplates(Map<String, Template> templates) {
+		registeredTemplates.putAll(templates);
+		queueCommand(new UiRootPanel.RegisterTemplatesCommand(templates.entrySet().stream()
+				.collect(Collectors.toMap(Map.Entry::getKey, entry -> entry.getValue().createUiTemplate()))));
 	}
 
-	String createResourceLink(Supplier<InputStream> inputStreamSupplier, long length, String resourceName);
+	public Template getTemplate(String id) {
+		return registeredTemplates.get(id);
+	}
 
-	String createResourceLink(Supplier<InputStream> inputStreamSupplier, long length, String resourceName, String uniqueIdentifier);
+	public CompletableFuture<Void> runWithContext(Runnable runnable) {
+		return this.runWithContext(runnable, false);
+	}
 
-	Resource getBinaryResource(int resourceId);
+	/**
+	 * @param runnable
+	 * @param forceEnqueue No synchronous execution! Enqueue this at the end of this SessionContext's work queue.
+	 */
+	public CompletableFuture<Void> runWithContext(Runnable runnable, boolean forceEnqueue) {
+		return runWithContext(() -> {
+			runnable.run();
+			return null;
+		}, forceEnqueue);
+	}
 
-	File getUploadedFileByUuid(String uuid);
+	public <R> CompletableFuture<R> runWithContext(Callable<R> runnable) {
+		return runWithContext(runnable, false);
+	}
 
-	TemplateReference registerTemplate(String id, Template template);
+	public <R> CompletableFuture<R> runWithContext(Callable<R> callable, boolean forceEnqueue) {
+		if (CurrentSessionContext.getOrNull() == this && !forceEnqueue) {
+			// Fast lane! This thread is already bound to this SessionContext. Just execute the runnable.
+			try {
+				return CompletableFuture.completedFuture(callable.call());
+			} catch (Throwable t) {
+				/*
+				 note that we don't return a failed completable future in this case, since we want to make sure
+				 1) the exception is logged
+				 2) the session is closed
+				 3) the code that is calling this (which is already in a thread bound to this session context)
+				    does not do any further stuff inside the sessionContext.
+				*/
+				throw new FastLaneExecutionException("Exception during fast lane execution!", t);
+			}
+		} else {
+			synchronized (this) {
+				if (destroyed) {
+					return CompletableFuture.failedFuture(new SessionDestroyedException("Session " + getName() + " is already destroyed!"));
+				} else {
+					return CompletableFuture.supplyAsync(() -> {
+						CurrentSessionContext.set(this);
+						try {
+							Object[] resultHolder = new Object[1];
+							executionDecorators
+									.createWrappedRunnable(() -> resultHolder[0] = softenExceptions(callable))
+									.run();
+							if (routingMode == RoutingMode.AUTO && !skipAutoUpdateNavigationHistoryStateOnce) {
+								updateNavigationHistoryState();
+							}
+							skipAutoUpdateNavigationHistoryStateOnce = false;
+							return ((R) resultHolder[0]);
+						} catch (Throwable t) {
+							try {
+								LOGGER.error("Exception while executing within session context", t);
+							} catch (Throwable t2) {
+								LOGGER.error("Exception while executing within session context. WAS NOT ABLE TO LOG THE EXCEPTION of type {}!", t.getClass());
+							}
+							this.destroy(UiSessionClosingReason.SERVER_SIDE_ERROR);
+							throw t;
+						} finally {
+							CurrentSessionContext.unset();
+						}
+					}, sessionExecutor);
+				}
+			}
+		}
+	}
 
-	void registerTemplates(Map<String, Template> templates);
+	/**
+	 * Adds a decorator that gets invoked whenever a Thread is bound to this SessionContext.
+	 * The decorator will be called right <strong>after</strong> the Thread is bound to this SessionContext, so SessionContext.current() will return this instance.
+	 *
+	 * @param decorator
+	 * @param outer     Whether to add this decorator as outermost or innermost execution wrapper.
+	 */
+	public void addExecutionDecorator(ExecutionDecorator decorator, boolean outer) {
+		if (outer) {
+			executionDecorators.addOuterDecorator(decorator);
+		} else {
+			executionDecorators.addInnerDecorator(decorator);
+		}
+	}
 
-	Template getTemplate(String id);
+	/**
+	 * Removes the specified execution decorator.
+	 */
+	public void removeExecutionDecorator(ExecutionDecorator decorator) {
+		executionDecorators.removeDecorator(decorator);
+	}
 
 	/**
-	 * Runs the specified runnable with this SessionContext set as CurrentSessionContext.
-	 * Flushes the queued commands after execution.
-	 * @param runnable the code to be executed.
+	 * Removes all decorators.
 	 */
-	void runWithContext(Runnable runnable);
+	public void clearExecutionDecorators() {
+		executionDecorators.clear();
+	}
 
-	// =========================================
-	//  C O N V E N I E N C E   M E T H O D S
-	// =========================================
+	public SessionConfiguration getConfiguration() {
+		return sessionConfiguration;
+	}
 
-	default void showWindow(Window window, int animationDuration) {
-		queueCommand(new UiRootPanel.ShowWindowCommand(window.createUiComponentReference(), animationDuration));
+	public void setConfiguration(SessionConfiguration config) {
+		this.sessionConfiguration = config;
+		sendConfigToClient();
 	}
 
-	default void closeWindow(Window window, int animationDuration) {
-		queueCommand(new UiRootPanel.CloseWindowCommand(window.getId(), animationDuration));
+	private void sendConfigToClient() {
+		queueCommand(new UiRootPanel.SetConfigCommand(this.sessionConfiguration.createUiConfiguration()));
 	}
 
-	default void closeWindow(String windowId, int animationDuration) {
-		queueCommand(new UiRootPanel.CloseWindowCommand(windowId, animationDuration));
+	public void showPopupAtCurrentMousePosition(Popup popup) {
+		queueCommand(new UiRootPanel.ShowPopupAtCurrentMousePositionCommand(popup.createUiReference()));
 	}
 
-	default void downloadFile(String fileUrl, String downloadFileName) {
-		queueCommand(new UiRootPanel.DownloadFileCommand(fileUrl, downloadFileName));
+	public void showPopup(Popup popup) {
+		queueCommand(new UiRootPanel.ShowPopupCommand(popup.createUiReference()));
 	}
 
-	SessionConfiguration getConfiguration();
+	public ZoneId getTimeZone() {
+		return sessionConfiguration.getTimeZone();
+	}
 
-	void setConfiguration(SessionConfiguration config);
+	public SessionIconProvider getIconProvider() {
+		return iconProvider;
+	}
+
+	public <I extends Icon<I, S>, S> void setDefaultStyleForIconClass(Class<I> iconClass, S defaultStyle) {
+		this.runWithContext(() -> {
+			iconProvider.setDefaultStyleForIconClass(iconClass, defaultStyle);
+		});
+	}
 
-	default void registerBackgroundImage(String id, String image, String blurredImage) {
+	public String resolveIcon(Icon icon) {
+		if (icon == null) {
+			return null;
+		}
+		return sessionConfiguration.getIconPath() + "/" + iconProvider.encodeIcon(icon, true);
+	}
+
+	public void registerClientObject(ClientObject clientObject) {
+		CurrentSessionContext.throwIfNotSameAs(this);
+		clientObjectsById.put(clientObject.getId(), clientObject);
+	}
+
+	public void unregisterClientObject(ClientObject clientObject) {
+		clientObjectsById.remove(clientObject.getId());
+	}
+
+	public ClientObject getClientObject(String clientObjectId) {
+		return clientObjectsById.get(clientObjectId);
+	}
+
+	public String createResourceLink(Resource resource) {
+		return createResourceLink(resource, null);
+	}
+
+	public void showWindow(Window window, int animationDuration) {
+		window.show(animationDuration);
+	}
+
+	public void download(Resource resource) {
+		download(resource, resource.getName());
+	}
+
+	public void download(Resource resource, String downloadFileName) {
+		download(createResourceLink(resource), downloadFileName);
+	}
+
+	public void download(File file, String downloadFileName) {
+		download(createFileLink(file), downloadFileName);
+	}
+
+	public void download(String url, String downloadFileName) {
+		runWithContext(() -> queueCommand(new UiRootPanel.DownloadFileCommand(url, downloadFileName)));
+	}
+
+	public void registerBackgroundImage(String id, String image, String blurredImage) {
 		queueCommand(new UiRootPanel.RegisterBackgroundImageCommand(id, image, blurredImage));
 	}
 
-	default void setBackgroundImage(String id, int animationDuration) {
+	public void setBackgroundImage(String id, int animationDuration) {
 		queueCommand(new UiRootPanel.SetBackgroundImageCommand(id, animationDuration));
 	}
 
-	default void setBackgroundColor(Color color, int animationDuration) {
-		queueCommand(new UiRootPanel.SetBackgroundColorCommand(UiUtil.createUiColor(color), animationDuration));
+	public void showDefaultBackground(int animationDuration) {
+		if (!defaultBackgroundRegistered) {
+			defaultBackgroundRegistered = true;
+			registerBackgroundImage(DEFAULT_BACKGROUND_NAME, DEFAULT_BACKGROUND_URL, DEFAULT_BACKGROUND_URL);
+		}
+		setBackgroundImage(DEFAULT_BACKGROUND_NAME, animationDuration);
+	}
+
+	public void setBackgroundColor(Color color, int animationDuration) {
+		queueCommand(new UiRootPanel.SetBackgroundColorCommand(color != null ? color.toHtmlColorString() : null, animationDuration));
 	}
 
-	default void exitFullScreen() {
+	public void exitFullScreen() {
 		queueCommand(new UiRootPanel.ExitFullScreenCommand());
 	}
 
-	default void addRootComponent(String containerElementId, RootPanel rootPanel) {
-		queueCommand(new UiRootPanel.BuildRootPanelCommand(containerElementId, rootPanel.createUiComponentReference()));
+	public void addRootComponent(String containerElementSelector, Component component) {
+		addRootPanel(containerElementSelector, component);
+	}
+
+	public void addRootPanel(String containerElementSelector, Component rootPanel) {
+		queueCommand(new UiRootPanel.BuildRootPanelCommand(containerElementSelector, rootPanel.createUiReference()));
+	}
+
+	public RootPanel addRootPanel(String containerElementSelector) {
+		RootPanel rootPanel = new RootPanel();
+		addRootPanel(containerElementSelector, rootPanel);
+		return rootPanel;
+	}
+
+	public RootPanel addRootPanel() {
+		return addRootPanel("body");
 	}
 
-	default void addClientToken(String token) {
+	public void addClientToken(String token) {
+		getClientInfo().getClientTokens().add(token);
 		queueCommand(new UiRootPanel.AddClientTokenCommand(token));
 	}
 
-	default void removeClientToken(String token) {
+	public void removeClientToken(String token) {
+		getClientInfo().getClientTokens().remove(token);
 		queueCommand(new UiRootPanel.RemoveClientTokenCommand(token));
 	}
 
-	default void clearClientTokens() {
+	public void clearClientTokens() {
+		getClientInfo().getClientTokens().clear();
 		queueCommand(new UiRootPanel.ClearClientTokensCommand());
 	}
 
-	default void showNotification(Notification notification) {
-		queueCommand(new UiRootPanel.ShowNotificationCommand(notification.createUiNotification()));
+	public void showNotification(Notification notification, NotificationPosition position, EntranceAnimation entranceAnimation, ExitAnimation exitAnimation) {
+		runWithContext(() -> {
+			queueCommand(new UiRootPanel.ShowNotificationCommand(notification.createUiReference(), position.toUiNotificationPosition(), entranceAnimation.toUiEntranceAnimation(),
+					exitAnimation.toUiExitAnimation()));
+		});
 	}
 
-	default void showNotification(Icon icon, String caption) {
-		Notification notification = Notification.createWithIconAndCaption(icon, caption);
-		notification.setPosition(NotificationPosition.TOP_RIGHT);
-		notification.setEntranceAnimation(UiEntranceAnimation.SLIDE_IN_UP);
-		notification.setExitAnimation(UiExitAnimation.SLIDE_OUT_UP);
-		notification.setDismissable(true);
-		notification.setShowProgressBar(false);
-		notification.setDisplayTimeInMillis(5000);
-		showNotification(notification);
+	public void showNotification(Notification notification, NotificationPosition position) {
+		runWithContext(() -> {
+			showNotification(notification, position, EntranceAnimation.SLIDE_IN_RIGHT, ExitAnimation.FADE_OUT);
+		});
 	}
 
-	default void showNotification(Icon icon, String caption, String description, boolean dismissable, int displayTimeInMillis, boolean showProgress) {
-		Notification notification = Notification.createWithIconAndTextAndDescription(icon, caption, description);
-		notification.setPosition(NotificationPosition.TOP_RIGHT);
-		notification.setEntranceAnimation(UiEntranceAnimation.SLIDE_IN_LEFT);
-		notification.setExitAnimation(UiExitAnimation.FADE_OUT_UP);
-		notification.setDismissable(dismissable);
-		notification.setDisplayTimeInMillis(displayTimeInMillis);
-		notification.setShowProgressBar(showProgress);
-		showNotification(notification);
+	public void showNotification(Icon icon, String caption) {
+		runWithContext(() -> {
+			Notification notification = Notification.createWithIconAndCaption(icon, caption);
+			notification.setDismissible(true);
+			notification.setShowProgressBar(false);
+			notification.setDisplayTimeInMillis(5000);
+			showNotification(notification, NotificationPosition.TOP_RIGHT, EntranceAnimation.SLIDE_IN_RIGHT, ExitAnimation.FADE_OUT);
+		});
 	}
 
+	public void showNotification(Icon icon, String caption, String description) {
+		runWithContext(() -> {
+			Notification notification = Notification.createWithIconAndTextAndDescription(icon, caption, description);
+			notification.setDismissible(true);
+			notification.setShowProgressBar(false);
+			notification.setDisplayTimeInMillis(5000);
+			showNotification(notification, NotificationPosition.TOP_RIGHT, EntranceAnimation.SLIDE_IN_RIGHT, ExitAnimation.FADE_OUT);
+		});
+	}
+
+	public void showNotification(Icon icon, String caption, String description, boolean dismissable, int displayTimeInMillis, boolean showProgress) {
+		runWithContext(() -> {
+			Notification notification = Notification.createWithIconAndTextAndDescription(icon, caption, description);
+			notification.setDismissible(dismissable);
+			notification.setDisplayTimeInMillis(displayTimeInMillis);
+			notification.setShowProgressBar(showProgress);
+			showNotification(notification, NotificationPosition.TOP_RIGHT, EntranceAnimation.SLIDE_IN_RIGHT, ExitAnimation.FADE_OUT);
+		});
+	}
+
+	public void setSessionExpiredWindow(Window sessionExpiredWindow) {
+		this.sessionExpiredWindow = sessionExpiredWindow;
+		updateSessionMessageWindows();
+	}
+
+	public void setSessionErrorWindow(Window sessionErrorWindow) {
+		this.sessionErrorWindow = sessionErrorWindow;
+		updateSessionMessageWindows();
+	}
+
+	public void setSessionTerminatedWindow(Window sessionTerminatedWindow) {
+		this.sessionTerminatedWindow = sessionTerminatedWindow;
+		updateSessionMessageWindows();
+	}
+
+	private void updateSessionMessageWindows() {
+		queueCommand(new UiRootPanel.SetSessionMessageWindowsCommand(
+				sessionExpiredWindow != null ? sessionExpiredWindow.createUiReference()
+						: createDefaultSessionMessageWindow(getLocalized("teamapps.common.sessionExpired"), getLocalized("teamapps.common.sessionExpiredText"),
+						getLocalized("teamapps.common.refresh"), getLocalized("teamapps.common.cancel")).createUiReference(),
+				sessionErrorWindow != null ? sessionErrorWindow.createUiReference() : createDefaultSessionMessageWindow(getLocalized("teamapps.common.error"), getLocalized("teamapps.common.sessionErrorText"),
+						getLocalized("teamapps.common.refresh"), getLocalized("teamapps.common.cancel")).createUiReference(),
+				sessionTerminatedWindow != null ? sessionTerminatedWindow.createUiReference() : createDefaultSessionMessageWindow(getLocalized("teamapps.common.sessionTerminated"), getLocalized("teamapps.common.sessionTerminatedText"),
+						getLocalized("teamapps.common.refresh"), getLocalized("teamapps.common.cancel")).createUiReference())
+		);
+	}
+
+	public static Window createDefaultSessionMessageWindow(String title, String message, String refreshButtonCaption, String cancelButtonCaption) {
+		Window window = new Window(null, title, null, 300, 300, false, false, false);
+		window.setPadding(10);
+
+		VerticalLayout verticalLayout = new VerticalLayout();
+
+		DisplayField messageField = new DisplayField(false, false);
+		messageField.setCssStyle("font-size", "110%");
+		messageField.setValue(message);
+		verticalLayout.addComponentFillRemaining(messageField);
+
+		Button<?> refreshButton = new Button<>(null, refreshButtonCaption);
+		refreshButton.setCssStyle("margin", "10px 0");
+		refreshButton.setCssStyle(".UiButton", "background-color", RgbaColor.MATERIAL_BLUE_600.toHtmlColorString());
+		refreshButton.setCssStyle(".UiButton", "color", RgbaColor.WHITE.toHtmlColorString());
+		refreshButton.setCssStyle(".UiButton", "font-size", "120%");
+		refreshButton.setCssStyle(".UiButton", "height", "50px");
+		refreshButton.setOnClickJavaScript("window.location.reload()");
+		verticalLayout.addComponentAutoSize(refreshButton);
+
+		if (cancelButtonCaption != null) {
+			LinkButton cancelLink = new LinkButton(cancelButtonCaption);
+			cancelLink.setCssStyle("text-align", "center");
+			cancelLink.setOnClickJavaScript("context.getClientObjectById(\"" + window.createUiReference().getId() + "\").close();");
+			verticalLayout.addComponentAutoSize(cancelLink);
+		}
+
+		window.setContent(verticalLayout);
+		window.enableAutoHeight();
+		return window;
+	}
+
+	public CompletableFuture<WakeLock> requestWakeLock() {
+		String uuid = UUID.randomUUID().toString();
+		CompletableFuture<WakeLock> completableFuture = new CompletableFuture<>();
+		runWithContext(() -> {
+			queueCommand(new UiRootPanel.RequestWakeLockCommand(uuid), successful -> {
+				if (successful) {
+					completableFuture.complete(() -> queueCommand(new UiRootPanel.ReleaseWakeLockCommand(uuid)));
+				} else {
+					completableFuture.completeExceptionally(new RuntimeException("Could not acquire WakeLock"));
+				}
+			});
+		});
+		return completableFuture;
+	}
+
+	public void goToUrl(String url, boolean blankPage) {
+		queueCommand(new UiRootPanel.GoToUrlCommand(url, blankPage));
+	}
+
+	public void setFavicon(Icon<?, ?> icon) {
+		setFavicon(resolveIcon(icon));
+	}
+
+	public void setFavicon(Resource resource) {
+		setFavicon(createResourceLink(resource));
+	}
+
+	public void setFavicon(String url) {
+		queueCommand(new UiRootPanel.SetFaviconCommand(url));
+	}
+
+	public void setTitle(String title) {
+		queueCommand(new UiRootPanel.SetTitleCommand(title));
+	}
+
+	public void setGlobalKeyEventsEnabled(boolean unmodified, boolean modifiedWithAltKey, boolean modifiedWithCtrlKey, boolean modifiedWithMetaKey, boolean includeRepeats, boolean keyDown, boolean keyUp) {
+		queueCommand(new UiRootPanel.SetGlobalKeyEventsEnabledCommand(unmodified, modifiedWithAltKey, modifiedWithCtrlKey, modifiedWithMetaKey, includeRepeats, keyDown, keyUp));
+	}
+
+	public String getSessionId() {
+		return uiSession.getSessionId();
+	}
+
+	public void handleStaticEvent(UiEvent event) {
+		UiEventType uiEventType = event.getUiEventType();
+		switch (uiEventType) {
+			case UI_ROOT_PANEL_GLOBAL_KEY_EVENT_OCCURRED: {
+				UiRootPanel.GlobalKeyEventOccurredEvent e = (UiRootPanel.GlobalKeyEventOccurredEvent) event;
+				onGlobalKeyEventOccurred.fire(new KeyboardEvent(
+						e.getEventType(),
+						(e.getSourceComponentId() != null ? (Component) getClientObject(e.getSourceComponentId()) : null),
+						e.getCode(),
+						e.getIsComposing(),
+						e.getKey(),
+						e.getCharCode(),
+						e.getKeyCode(),
+						e.getLocale(),
+						e.getLocation(),
+						e.getRepeat(),
+						e.getAltKey(),
+						e.getCtrlKey(),
+						e.getShiftKey(),
+						e.getMetaKey()
+				));
+				break;
+			}
+			case UI_ROOT_PANEL_NAVIGATION_STATE_CHANGE: {
+				UiRootPanel.NavigationStateChangeEvent e = (UiRootPanel.NavigationStateChangeEvent) event;
+				Location location = Location.fromUiLocation(e.getLocation());
+				this.currentLocation = location;
+				onNavigationStateChange.fire(new NavigationStateChangeEvent(location, e.getTriggeredBrowserNavigation()));
+				if (routingMode != RoutingMode.DISABLED) {
+					route();
+				}
+				break;
+			}
+			case UI_ROOT_PANEL_CUSTOM_MESSAGE: {
+				UiRootPanel.CustomMessageEvent e = (UiRootPanel.CustomMessageEvent) event;
+				onCustomMessage.fire(new CustomMessageEvent(e.getType(), e.getMessage()));
+				break;
+			}
+			default:
+				throw new TeamAppsUiApiException(getSessionId(), uiEventType.toString());
+		}
+	}
+
+	public void route() {
+		Location location = getCurrentLocation();
+		Route route = Route.fromLocation(location)
+				.subRoute(navigationPathPrefix);
+
+		do {
+			routeHandlingDirty = false;
+			// TODO #performance check efficiency and improve
+			List<Router> matchingRouters = routers.stream()
+					.filter(r -> r.matchesPath(route.getPath()))
+					.sorted(Comparator.comparing(e -> e.getPathPrefix().length()))
+					.collect(Collectors.toList());
+			for (Router router : matchingRouters) {
+				router.route(route.subRoute(router.getPathPrefix()));
+			}
+		} while (routeHandlingDirty); // routers or routeHandlers have been added during this execution!
+	}
+
+	public UiSessionListener getAsUiSessionListenerInternal() {
+		return uiSessionListener;
+	}
+
+	public void setName(String name) {
+		uiSession.setName(name);
+	}
+
+	public String getName() {
+		return uiSession.getName();
+	}
+
+	public ParamConverterProvider getRoutingParamConverterProvider() {
+		return navigationParamConverterProvider;
+	}
+
+	public UiSessionStats getUiSessionStats() {
+		return uiSession.getStatistics().immutableCopy();
+	}
+
+	@Override
+	public String toString() {
+		return "SessionContext: " + getName();
+	}
+
+	public RoutingMode getRoutingMode() {
+		return routingMode;
+	}
+
+	public void setRoutingMode(RoutingMode routingMode) {
+		this.routingMode = routingMode;
+		if (routingMode != RoutingMode.DISABLED) {
+			route();
+		}
+	}
+
+	/**
+	 * Same as {@link #onDestroyed} but mockable.
+	 */
+	public Event<UiSessionClosingReason> onDestroyed() {
+		return onDestroyed;
+	}
+
+	public Disposable subscribeToCustomMessages(String type, Consumer<CustomMessageEvent> handler) {
+		return onCustomMessage.addListener((customMessageEvent) -> {
+			if (Objects.equals(type, customMessageEvent.type())) {
+				handler.accept(customMessageEvent);
+			}
+		});
+	}
 
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/session/SessionContextResourceManager.java b/teamapps-ux/src/main/java/org/teamapps/ux/session/SessionContextResourceManager.java
new file mode 100644
index 000000000..7bd543f1c
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/session/SessionContextResourceManager.java
@@ -0,0 +1,107 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.session;
+
+import org.teamapps.ux.resource.FileResource;
+import org.teamapps.ux.resource.Resource;
+import org.teamapps.ux.resource.ResourceWrapper;
+
+import java.io.File;
+import java.util.Map;
+import java.util.Objects;
+import java.util.concurrent.ConcurrentHashMap;
+import java.util.concurrent.atomic.AtomicInteger;
+
+public class SessionContextResourceManager {
+
+	public static final String BASE_PATH = "/files/";
+	public static final String RESOURCE_LINK_ID_PREFIX = "res-";
+
+	private static final Map<Class<? extends Resource>, Boolean> IMPLEMENTS_EQUAL_BY_RESOURCE_CLASS = new ConcurrentHashMap<>();
+
+	private final String sessionId;
+	private final AtomicInteger linkIdGenerator = new AtomicInteger();
+	private final Map<Integer, Resource> resourceByLinkId = new ConcurrentHashMap<>();
+	private final Map<Resource, String> resourceLinkByResource = new ConcurrentHashMap<>();
+
+	public SessionContextResourceManager(String sessionId) {
+		this.sessionId = sessionId;
+	}
+
+	public Resource getBinaryResource(int resourceId) {
+		return resourceByLinkId.get(resourceId);
+	}
+
+	public String createFileLink(File file) {
+		if (file == null) {
+			return null;
+		}
+		return createResourceLink(new FileResource(file), null);
+	}
+
+	public String createResourceLink(Resource resource, String uniqueIdentifier) {
+		if (resource == null) {
+			return null;
+		}
+		String existingLink = resourceLinkByResource.get(resource);
+		if (existingLink != null) {
+			return existingLink;
+		}
+		if (uniqueIdentifier != null) {
+			return createResourceLink(new UniqueIdentifierResourceWrapper(resource, uniqueIdentifier), null /*!!*/);
+		}
+
+		int linkId = createLinkId();
+		String resourceLink = createLink(linkId);
+		resourceByLinkId.put(linkId, resource);
+		resourceLinkByResource.put(resource, resourceLink);
+		return resourceLink;
+	}
+
+	private int createLinkId() {
+		return linkIdGenerator.incrementAndGet();
+	}
+
+	private String createLink(int id) {
+		return BASE_PATH + sessionId.toString() + "/" + RESOURCE_LINK_ID_PREFIX + id;
+	}
+
+	private static class UniqueIdentifierResourceWrapper extends ResourceWrapper {
+		private final String uniqueIdentifier;
+
+		public UniqueIdentifierResourceWrapper(Resource resource, String uniqueIdentifier) {
+			super(resource);
+			this.uniqueIdentifier = uniqueIdentifier;
+		}
+
+		@Override
+		public boolean equals(Object o) {
+			if (this == o) return true;
+			if (o == null || getClass() != o.getClass()) return false;
+			UniqueIdentifierResourceWrapper that = (UniqueIdentifierResourceWrapper) o;
+			return Objects.equals(uniqueIdentifier, that.uniqueIdentifier);
+		}
+
+		@Override
+		public int hashCode() {
+			return Objects.hash(uniqueIdentifier);
+		}
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/session/SessionStore.java b/teamapps-ux/src/main/java/org/teamapps/ux/session/SessionDestroyedException.java
similarity index 81%
rename from teamapps-ux/src/main/java/org/teamapps/ux/session/SessionStore.java
rename to teamapps-ux/src/main/java/org/teamapps/ux/session/SessionDestroyedException.java
index f2d74f676..a1147d596 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/session/SessionStore.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/session/SessionDestroyedException.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,10 +19,9 @@
  */
 package org.teamapps.ux.session;
 
-public interface SessionStore {
-
-	Object getSessionValue(String uniqueKey);
-
-	void setSessionValue(String uniqueKey, Object value);
+public class SessionDestroyedException extends RuntimeException {
 
+	public SessionDestroyedException(String message) {
+		super(message);
+	}
 }
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/session/SimpleSessionContext.java b/teamapps-ux/src/main/java/org/teamapps/ux/session/SimpleSessionContext.java
deleted file mode 100644
index de5590747..000000000
--- a/teamapps-ux/src/main/java/org/teamapps/ux/session/SimpleSessionContext.java
+++ /dev/null
@@ -1,377 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.ux.session;
-
-import com.fasterxml.jackson.databind.ObjectMapper;
-import org.slf4j.Logger;
-import org.slf4j.LoggerFactory;
-import org.teamapps.dto.UiCommand;
-import org.teamapps.dto.UiRootPanel;
-import org.teamapps.event.Event;
-import org.teamapps.icons.api.IconTheme;
-import org.teamapps.server.UxServerContext;
-import org.teamapps.ux.caption.MultiResourceBundle;
-import org.teamapps.ux.component.template.Template;
-import org.teamapps.ux.component.template.TemplateReference;
-import org.teamapps.ux.json.UxJacksonSerializationTemplate;
-import org.teamapps.ux.resource.Resource;
-import org.teamapps.uisession.QualifiedUiSessionId;
-
-import java.io.File;
-import java.io.IOException;
-import java.io.InputStream;
-import java.io.InputStreamReader;
-import java.net.URL;
-import java.net.URLConnection;
-import java.nio.charset.StandardCharsets;
-import java.text.MessageFormat;
-import java.util.Locale;
-import java.util.Map;
-import java.util.PropertyResourceBundle;
-import java.util.ResourceBundle;
-import java.util.concurrent.ConcurrentHashMap;
-import java.util.concurrent.TimeUnit;
-import java.util.concurrent.locks.ReentrantLock;
-import java.util.function.Consumer;
-import java.util.function.Function;
-import java.util.function.Supplier;
-import java.util.stream.Collectors;
-
-public class SimpleSessionContext implements LockableSessionContext {
-
-	private static final Logger LOGGER = LoggerFactory.getLogger(SimpleSessionContext.class);
-	private static final int LOCK_TIMEOUT = 60_000;
-	private static final Function<Locale, ResourceBundle> DEFAULT_RESOURCE_BUNDLE_PROVIDER = locale -> ResourceBundle.getBundle("org.teamapps.ux.i18n.DefaultCaptions", locale, new UTF8Control());
-
-	private final Event<Void> onDestroyed = new Event<>();
-
-	private final ReentrantLock lock = new ReentrantLock();
-
-	private boolean isValid = true;
-	private long lastClientEventTimeStamp;
-
-	private final QualifiedUiSessionId sessionId;
-	private final ClientInfo clientInfo;
-	private final CommandDispatcher commandDispatcher;
-	private final UxServerContext serverContext;
-	private final UxJacksonSerializationTemplate uxJacksonSerializationTemplate;
-	private final SessionStore sessionStore;
-	private IconTheme iconTheme;
-	private ClientSessionResourceProvider sessionResourceProvider;
-
-	private Function<Locale, ResourceBundle> customMessageBundleProvider = DEFAULT_RESOURCE_BUNDLE_PROVIDER;
-	private ResourceBundle messagesBundle;
-
-	private Map<String, Template> registeredTemplates = new ConcurrentHashMap<>();
-	private SessionConfiguration sessionConfiguration = SessionConfiguration.createDefault();
-
-	public SimpleSessionContext(QualifiedUiSessionId sessionId, ClientInfo clientInfo, CommandDispatcher commandDispatcher, UxServerContext serverContext, IconTheme iconTheme,
-	                            ObjectMapper jacksonObjectMapper) {
-		this.sessionId = sessionId;
-		this.clientInfo = clientInfo;
-		this.commandDispatcher = commandDispatcher;
-		this.serverContext = serverContext;
-		this.sessionStore = new SimpleSessionStore();
-		this.iconTheme = iconTheme;
-		this.sessionResourceProvider = new ClientSessionResourceProvider(sessionId);
-		this.uxJacksonSerializationTemplate = new UxJacksonSerializationTemplate(jacksonObjectMapper, this);
-		this.lastClientEventTimeStamp = System.currentTimeMillis();
-		updateMessageBundle();
-	}
-
-	public void setCustomMessageBundleProvider(Function<Locale, ResourceBundle> provider) {
-		this.customMessageBundleProvider = provider;
-		updateMessageBundle();
-	}
-
-	private void updateMessageBundle() {
-		if (customMessageBundleProvider != null) {
-			ResourceBundle customResourceBundle = customMessageBundleProvider.apply(sessionConfiguration.getLanguageLocale());
-			ResourceBundle defaultResourceBundle = DEFAULT_RESOURCE_BUNDLE_PROVIDER.apply(sessionConfiguration.getLanguageLocale());
-			this.messagesBundle = new MultiResourceBundle(customResourceBundle, defaultResourceBundle);
-		} else {
-			this.messagesBundle = DEFAULT_RESOURCE_BUNDLE_PROVIDER.apply(sessionConfiguration.getLanguageLocale());
-		}
-	}
-
-	@Override
-	public Locale getLocale() {
-		return sessionConfiguration.getLanguageLocale();
-	}
-
-	@Override
-	public ResourceBundle getMessageBundle() {
-		return messagesBundle;
-	}
-
-	@Override
-	public String getLocalized(String key, Object... parameters) {
-		String value = messagesBundle.getString(key);
-		if (parameters != null) {
-			return MessageFormat.format(value, parameters);
-		}
-		return value;
-	}
-
-	@Override
-	public long getLastClientEventTimestamp() {
-		return lastClientEventTimeStamp;
-	}
-
-	@Override
-	public void setLastClientEventTimestamp(long timestamp) {
-		lastClientEventTimeStamp = timestamp;
-	}
-
-	@Override
-	public boolean isOpen() {
-		return isValid;
-	}
-
-	@Override
-	public void destroy() {
-		isValid = false;
-		commandDispatcher.close();
-		runWithContext(() -> {
-			onDestroyed.fire(null);
-		});
-	}
-
-	@Override
-	public Event<Void> onDestroyed() {
-		return onDestroyed;
-	}
-
-	@Override
-	public <RESULT> void queueCommand(UiCommand<RESULT> command, Consumer<RESULT> resultCallback) {
-		if (CurrentSessionContext.get() != this) {
-			String errorMessage = "Trying to queue a command for foreign SessionContext (CurrentSessionContext.get() != this)."
-					+ " Please use SessionContext.runWithContext(Runnable). NOTE: The command will not get queued!";
-			LOGGER.error(errorMessage);
-			throw new IllegalStateException(errorMessage);
-		}
-		Consumer<RESULT> wrappedCallback = resultCallback != null ? result -> this.runWithContext(() -> resultCallback.accept(result)) : null;
-		commandDispatcher.queueCommand(command, wrappedCallback);
-	}
-
-	@Override
-	public <RESULT> void queueCommand(UiCommand<RESULT> command) {
-		this.queueCommand(command, null);
-	}
-
-	@Override
-	public ClientInfo getClientInfo() {
-		return clientInfo;
-	}
-
-	@Override
-	public void flushCommands() {
-		uxJacksonSerializationTemplate.doWithUxJacksonSerializers(commandDispatcher::flushCommands);
-	}
-
-	@Override
-	public IconTheme getIconTheme() {
-		return iconTheme;
-	}
-
-	@Override
-	public void setIconTheme(IconTheme theme) {
-		this.iconTheme = theme;
-	}
-
-	@Override
-	public SessionStore getSessionStore() {
-		return sessionStore;
-	}
-
-	@Override
-	public String createFileLink(File file) {
-		return sessionResourceProvider.createFileLink(file);
-	}
-
-	@Override
-	public String createResourceLink(Supplier<InputStream> inputStreamSupplier, long length, String resourceName) {
-		return createResourceLink(inputStreamSupplier, length, resourceName, null);
-	}
-
-	@Override
-	public String createResourceLink(Supplier<InputStream> inputStreamSupplier, long length, String resourceName, String uniqueIdentifier) {
-		return sessionResourceProvider.createResourceLink(inputStreamSupplier, length, resourceName, uniqueIdentifier);
-	}
-
-	@Override
-	public Resource getBinaryResource(int resourceId) {
-		return sessionResourceProvider.getBinaryResource(resourceId);
-	}
-
-	@Override
-	public File getUploadedFileByUuid(String uuid) {
-		return this.serverContext.getUploadedFileByUuid(uuid);
-	}
-
-	@Override
-	public TemplateReference registerTemplate(String id, Template template) {
-		registeredTemplates.put(id, template);
-		queueCommand(new UiRootPanel.RegisterTemplateCommand(id, template.createUiTemplate()));
-		return new TemplateReference(template);
-	}
-
-	@Override
-	public void registerTemplates(Map<String, Template> templates) {
-		registeredTemplates.putAll(templates);
-		queueCommand(new UiRootPanel.RegisterTemplatesCommand(templates.entrySet().stream()
-				.collect(Collectors.toMap(Map.Entry::getKey, entry -> entry.getValue().createUiTemplate()))));
-	}
-
-	@Override
-	public Template getTemplate(String id) {
-		return registeredTemplates.get(id);
-	}
-
-	@Override
-	public void lock(long timeoutMillis) {
-		try {
-			boolean locked = lock.tryLock(timeoutMillis, TimeUnit.MILLISECONDS);
-			if (!locked) {
-				String errorMessage = "Could not acquire lock for SessionContext " + sessionId + " after " + timeoutMillis + "ms.";
-				LOGGER.error(errorMessage);
-				throw new IllegalStateException(errorMessage);
-			}
-		} catch (InterruptedException e) {
-			String errorMessage = "Could not acquire lock for SessionContext " + sessionId + ". Thread was interrupted while waiting for the lock!";
-			LOGGER.error(errorMessage);
-			throw new IllegalStateException(errorMessage);
-		}
-	}
-
-	@Override
-	public void unlock() {
-		lock.unlock();
-	}
-
-	/**
-	 * Does the following:
-	 * <ol>
-	 * <li>Releases the current SessionContext (A) lock (if present)</li>
-	 * <li>Acquires the lock for this SessionContext (B)</li>
-	 * <li>Sets this SessionContext (B) as the current context (CurrentSessionContext).</li>
-	 * <li>Executes the specified Runnable.</li>
-	 * <li>Sets back the last SessionContext (A) as current context.</li>
-	 * <li>Releases the lock for this SessionContext (B)</li>
-	 * <li>Reacquires the lock for the last (A)</li>
-	 * </ol>
-	 *
-	 * @param runnable the code to be executed.
-	 */
-	@Override
-	public void runWithContext(Runnable runnable) {
-		if (CurrentSessionContext.getOrNull() == this) {
-			// Fast lane! This context is already bound to this thread. Just execute the runnable.
-			runnable.run();
-		} else {
-			if (CurrentSessionContext.getOrNull() != null) {
-				CurrentSessionContext.getOrNull().unlock();
-			}
-			try {
-				long startTime = System.currentTimeMillis();
-				lock(LOCK_TIMEOUT);
-				try {
-					CurrentSessionContext.pushContext(this);
-					try {
-						runnable.run();
-					} catch (Exception e) {
-						LOGGER.error("Exception while executing runnable! Context: " + sessionId.toString(), e);
-						throw e;
-					} finally {
-						CurrentSessionContext.popContext();
-					}
-				} finally {
-					unlock();
-					long endTime = System.currentTimeMillis();
-					if (endTime - startTime > LOCK_TIMEOUT) {
-						String message = "The execution within the session context {} took dangerously long (longer than the session's lock timeout). This might have caused other threads to fail "
-								+ "acquiring the session's lock. Stacktrace follows:";
-						LOGGER.warn(message, sessionId, new RuntimeException(message));
-					}
-				}
-			} finally {
-				if (CurrentSessionContext.getOrNull() != null) {
-					CurrentSessionContext.getOrNull().lock(Long.MAX_VALUE); // we WANT to wait here.
-				}
-			}
-			this.flushCommands();
-		}
-	}
-
-	@Override
-	public SessionConfiguration getConfiguration() {
-		return sessionConfiguration;
-	}
-
-	@Override
-	public void setConfiguration(SessionConfiguration config) {
-		this.sessionConfiguration = config;
-		updateMessageBundle();
-		queueCommand(new UiRootPanel.SetConfigCommand(config.createUiConfiguration()));
-	}
-
-	public static class UTF8Control extends ResourceBundle.Control {
-
-		private String resourceFileSuffix;
-
-		public UTF8Control() {
-			this("properties");
-		}
-
-		public UTF8Control(String resourceFileSuffix) {
-			this.resourceFileSuffix = resourceFileSuffix;
-		}
-
-		public ResourceBundle newBundle(String baseName, Locale locale, String format, ClassLoader loader,
-										boolean reload) throws IllegalAccessException, InstantiationException, IOException {
-			// The below is a copy of the default implementation.
-			String bundleName = toBundleName(baseName, locale);
-			String resourceName = toResourceName(bundleName, resourceFileSuffix);
-			ResourceBundle bundle = null;
-			InputStream stream = null;
-			if (reload) {
-				URL url = loader.getResource(resourceName);
-				if (url != null) {
-					URLConnection connection = url.openConnection();
-					if (connection != null) {
-						connection.setUseCaches(false);
-						stream = connection.getInputStream();
-					}
-				}
-			} else {
-				stream = loader.getResourceAsStream(resourceName);
-			}
-			if (stream != null) {
-				try {
-					// Only this line is changed to make it to read properties files as UTF-8.
-					bundle = new PropertyResourceBundle(new InputStreamReader(stream, StandardCharsets.UTF_8));
-				} finally {
-					stream.close();
-				}
-			}
-			return bundle;
-		}
-	}
-}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/session/StylingTheme.java b/teamapps-ux/src/main/java/org/teamapps/ux/session/StylingTheme.java
index 185328361..fb0828949 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/session/StylingTheme.java
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/session/StylingTheme.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/session/TeamAppsSessionMetrics.java b/teamapps-ux/src/main/java/org/teamapps/ux/session/TeamAppsSessionMetrics.java
new file mode 100644
index 000000000..d74e722a6
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/session/TeamAppsSessionMetrics.java
@@ -0,0 +1,64 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.session;
+
+import io.micrometer.core.instrument.Gauge;
+import io.micrometer.core.instrument.MeterRegistry;
+import io.micrometer.core.instrument.binder.MeterBinder;
+import org.teamapps.uisession.TeamAppsSessionManager;
+import org.teamapps.uisession.UiSessionState;
+
+public class TeamAppsSessionMetrics implements MeterBinder {
+
+	private static final String ACTIVITY_STATE_TAG = "state";
+
+	private final TeamAppsSessionManager sessionManager;
+
+	public TeamAppsSessionMetrics(TeamAppsSessionManager sessionManager) {
+		this.sessionManager = sessionManager;
+	}
+
+	@Override
+	public void bindTo(MeterRegistry registry) {
+
+		Gauge.builder("teamapps.uisession", () -> sessionManager.getNumberOfSessionsByState(UiSessionState.ACTIVE))
+				.description("Current number of active UI sessions.")
+				.tag(ACTIVITY_STATE_TAG, UiSessionState.ACTIVE.toString().toLowerCase())
+				.register(registry);
+
+		Gauge.builder("teamapps.uisession", () -> sessionManager.getNumberOfSessionsByState(UiSessionState.NEARLY_INACTIVE))
+				.description("Current number of nearly inactive UI sessions.")
+				.tag(ACTIVITY_STATE_TAG, UiSessionState.NEARLY_INACTIVE.toString().toLowerCase())
+				.register(registry);
+
+		Gauge.builder("teamapps.uisession", () -> sessionManager.getNumberOfSessionsByState(UiSessionState.INACTIVE))
+				.description("Current number of inactive UI sessions.")
+				.tag(ACTIVITY_STATE_TAG, UiSessionState.INACTIVE.toString().toLowerCase())
+				.register(registry);
+
+		Gauge.builder("teamapps.uisession.commandbuffers.size", sessionManager, TeamAppsSessionManager::getBufferedCommandsCount)
+				.description("Current number of all commands in all command buffers.")
+				.register(registry);
+
+		Gauge.builder("teamapps.uisession.commandbuffers.unconsumed", sessionManager, TeamAppsSessionManager::getUnconsumedCommandsCount)
+				.description("Current number of commands in command buffers that are queued waiting to be consumed.")
+				.register(registry);
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/session/navigation/AnnotationBasedRouteHandlerFactory.java b/teamapps-ux/src/main/java/org/teamapps/ux/session/navigation/AnnotationBasedRouteHandlerFactory.java
new file mode 100644
index 000000000..2d2c9c078
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/session/navigation/AnnotationBasedRouteHandlerFactory.java
@@ -0,0 +1,177 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.session.navigation;
+
+import jakarta.ws.rs.ext.ParamConverter;
+import jakarta.ws.rs.ext.ParamConverterProvider;
+import org.apache.commons.lang3.StringUtils;
+import org.teamapps.util.ReflectionUtil;
+import org.teamapps.ux.session.navigation.annotation.PathParameter;
+import org.teamapps.ux.session.navigation.annotation.QueryParameter;
+import org.teamapps.ux.session.navigation.annotation.RoutingPath;
+import org.teamapps.ux.session.navigation.annotation.RoutingPaths;
+
+import java.lang.reflect.Method;
+import java.lang.reflect.Parameter;
+import java.lang.reflect.Type;
+import java.util.ArrayList;
+import java.util.Arrays;
+import java.util.List;
+import java.util.Map;
+import java.util.stream.Collectors;
+
+public class AnnotationBasedRouteHandlerFactory {
+
+	private final ParamConverterProvider converterProvider;
+
+	public AnnotationBasedRouteHandlerFactory() {
+		this(new ParameterConverterProvider());
+	}
+
+	public AnnotationBasedRouteHandlerFactory(ParamConverterProvider converterProvider) {
+		this.converterProvider = converterProvider;
+	}
+
+	public List<AnnotationBasedRouteHandler> createRouteHandlers(Object annotatedClassInstance) {
+		RoutingPath classLevelPathAnnotation = annotatedClassInstance.getClass().getAnnotation(RoutingPath.class);
+		String pathPrefix = classLevelPathAnnotation != null ? classLevelPathAnnotation.value() : "";
+		List<Method> routingHandlerMethods = ReflectionUtil.findMethods(annotatedClassInstance.getClass(),
+				method -> method.isAnnotationPresent(RoutingPath.class) || method.isAnnotationPresent(RoutingPaths.class));
+		return routingHandlerMethods.stream()
+				.peek(m -> {
+					if (!m.trySetAccessible()) {
+						throw new RuntimeException("Cannot make method " + m + " accessible!");
+					}
+				})
+				.flatMap(m -> createRoutingHandlerMethodInfos(m, pathPrefix).stream())
+				.map(routingMethodInfo -> new AnnotationBasedRouteHandler(routingMethodInfo, annotatedClassInstance))
+				.collect(Collectors.toList());
+	}
+
+	private List<RoutingHandlerMethodInfo> createRoutingHandlerMethodInfos(Method m, String pathPrefix) {
+		List<RoutingPath> pathAnnotations = new ArrayList<>();
+		RoutingPath pathAnnotation = m.getAnnotation(RoutingPath.class);
+		if (pathAnnotation != null) {
+			pathAnnotations.add(pathAnnotation);
+		}
+		RoutingPaths pathsAnnotation = m.getAnnotation(RoutingPaths.class);
+		if (pathsAnnotation != null) {
+			pathAnnotations.addAll(Arrays.asList(pathsAnnotation.value()));
+		}
+
+		return pathAnnotations.stream()
+				.map(a -> getRoutingHandlerMethodInfo(m, pathPrefix, a))
+				.collect(Collectors.toList());
+	}
+
+	private RoutingHandlerMethodInfo getRoutingHandlerMethodInfo(Method m, String pathPrefix, RoutingPath pathAnnotation) {
+		String pathTemplate = RoutingUtil.concatenatePaths(pathPrefix, pathAnnotation.value());
+
+		Class<?>[] parameterTypes = m.getParameterTypes();
+		Type[] genericParameterTypes = m.getGenericParameterTypes();
+		Parameter[] methodParameters = m.getParameters();
+		ParameterValueExtractor[] methodParameterExtractors = new ParameterValueExtractor[methodParameters.length];
+		for (int i = 0; i < methodParameters.length; i++) {
+			Parameter parameter = methodParameters[i];
+			PathParameter pathParamAnnotation = parameter.getAnnotation(PathParameter.class);
+			QueryParameter queryParamAnnotation = parameter.getAnnotation(QueryParameter.class);
+			ParamConverter<?> converter = converterProvider.getConverter(parameterTypes[i], genericParameterTypes[i], parameter.getAnnotations());
+
+			if (pathParamAnnotation != null) {
+				methodParameterExtractors[i] = (path, pathParams, queryParams) -> {
+					String paramValue = pathParams.get(pathParamAnnotation.value());
+					return paramValue != null ? converter.fromString(paramValue) : null;
+				};
+			} else if (queryParamAnnotation != null) {
+				methodParameterExtractors[i] = (path, pathParams, queryParams) -> {
+					String paramValue = queryParams.get(queryParamAnnotation.value());
+					return StringUtils.isNotBlank(paramValue) ? converter.fromString(paramValue) : null;
+				};
+			} else {
+				methodParameterExtractors[i] = (path, pathParams, queryParams) -> null;
+			}
+		}
+		return new RoutingHandlerMethodInfo(pathTemplate, pathAnnotation.exact(), m, methodParameterExtractors);
+	}
+
+	interface ParameterValueExtractor {
+		Object extract(String path, Map<String, String> pathParams, Map<String, String> queryParams);
+	}
+
+	private static class RoutingHandlerMethodInfo {
+		private final String pathTemplate;
+		private final boolean exact;
+		private final Method method;
+		private final ParameterValueExtractor[] methodParameterExtractors;
+
+		public RoutingHandlerMethodInfo(String pathTemplate, boolean exact, Method method, ParameterValueExtractor[] methodParameterExtractors) {
+			this.pathTemplate = pathTemplate;
+			this.exact = exact;
+			this.method = method;
+			this.methodParameterExtractors = methodParameterExtractors;
+		}
+
+		public String getPathTemplate() {
+			return pathTemplate;
+		}
+
+		public boolean isExact() {
+			return exact;
+		}
+
+		public Method getMethod() {
+			return method;
+		}
+
+		public ParameterValueExtractor[] getMethodParameterExtractors() {
+			return methodParameterExtractors;
+		}
+	}
+
+	public static class AnnotationBasedRouteHandler implements RouteHandler {
+		private final RoutingHandlerMethodInfo routingMethodInfo;
+		private final Object annotatedClassInstance;
+
+		public AnnotationBasedRouteHandler(RoutingHandlerMethodInfo routingMethodInfo, Object annotatedClassInstance) {
+			this.routingMethodInfo = routingMethodInfo;
+			this.annotatedClassInstance = annotatedClassInstance;
+		}
+
+		@Override
+		public void handle(String path, Map<String, String> pathParams, Map<String, String> queryParams) {
+			Object[] argumentValues = Arrays.stream(routingMethodInfo.getMethodParameterExtractors())
+					.map(extractor -> extractor.extract(path, pathParams, queryParams))
+					.toArray();
+			try {
+				routingMethodInfo.getMethod().invoke(annotatedClassInstance, argumentValues);
+			} catch (Exception e) {
+				throw new RuntimeException(e); // TODO more specific exception class here
+			}
+		}
+
+		public String getPathTemplate() {
+			return routingMethodInfo.getPathTemplate();
+		}
+
+		public boolean isExact() {
+			return routingMethodInfo.isExact();
+		}
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/session/navigation/Location.java b/teamapps-ux/src/main/java/org/teamapps/ux/session/navigation/Location.java
new file mode 100644
index 000000000..03e3399bb
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/session/navigation/Location.java
@@ -0,0 +1,225 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.session.navigation;
+
+import org.apache.commons.lang3.StringUtils;
+import org.teamapps.dto.UiLocation;
+
+import java.net.MalformedURLException;
+import java.net.URL;
+import java.util.Objects;
+
+public class Location {
+
+	/**
+	 * Returns the complete URL.
+	 * <p>
+	 * Non-null.
+	 */
+	private final String href;
+
+	/**
+	 * Returns the URL's origin.
+	 * <p>
+	 * The origin is a String containing the Unicode serialization of the origin of the represented URL.
+	 * <p>
+	 * That is, for a URL using the http or https, the scheme followed by '://', followed by the domain, followed by ':',
+	 * followed by the port, if explicitly specified.
+	 * <p>
+	 * Non-null.
+	 */
+	private final String origin;
+
+	/**
+	 * Returns the URL's protocol scheme.
+	 * <p>
+	 * Non-null.
+	 */
+	private final String protocol;
+
+	/**
+	 * Returns the URL's host and port (if different from the default port for the scheme).
+	 * <p>
+	 * Non-null.
+	 */
+	private final String host;
+
+	/**
+	 * Returns the URL's hostname. This may be the domain name (DNS), the IPv4 address (e.g. "93.184.216.34"),
+	 * or IPv6 address in brackets (e.g. "[2606:2800:220:1:248:1893:25c8:1946]"), depending on the URL.
+	 * <p>
+	 * Non-null.
+	 */
+	private final String hostname;
+
+	/**
+	 * Returns the URL's port number.
+	 * <p>
+	 * Note that this can be null if the port number is not explicitly specified in the URL.
+	 */
+	private final Integer port;
+
+	/**
+	 * Returns the URL's path. This can (by the JavaScript spec) be an empty string (""), a single slash "/", or any path string.
+	 * <p>
+	 * Non-null.
+	 */
+	private final String pathname;
+
+	/**
+	 * Returns the URL's query (including the leading "?" if non-empty).
+	 * <p>
+	 * Non-null (empty string if empty).
+	 */
+	private final String search;
+
+	/**
+	 * Returns the URL's fragment (includes leading "#" if non-empty)
+	 * <p>
+	 * Non-null (empty string if empty).
+	 */
+	private final String hash;
+
+	public Location(String protocol, String hostname, Integer port, String pathname, String search, String hash) {
+		if (!protocol.endsWith(":")) {
+			protocol = protocol + ":";
+		}
+		this.href = protocol + "//" + hostname + ":" + port + RoutingUtil.withSingleLeadingSlash(pathname) + search + hash;
+		this.origin = protocol + "//" + hostname + ":" + port;
+		this.protocol = protocol;
+		this.host = hostname + ":" + port;
+		this.hostname = hostname;
+		this.port = port;
+		this.pathname = pathname;
+		this.search = StringUtils.isBlank(search) ? "" : search.startsWith("?") ? search : "?" + search;
+		this.hash = hash;
+	}
+
+	public Location(String href, String origin, String protocol, String host, String hostname, Integer port, String pathname, String search, String hash) {
+		this.href = href;
+		this.origin = origin;
+		this.protocol = protocol;
+		this.host = host;
+		this.hostname = hostname;
+		this.port = port;
+		this.pathname = pathname;
+		this.search = StringUtils.isBlank(search) ? "" : search.startsWith("?") ? search : "?" + search;
+		this.hash = hash;
+	}
+
+	public static Location parse(String urlString) throws MalformedURLException {
+		URL url = new URL(urlString);
+		return new Location(
+				url.toString(),
+				url.getProtocol() + "://" + url.getHost() + (url.getPort() > 0 ? ":" + url.getPort() : ""),
+				url.getProtocol(),
+				url.getHost() + (url.getPort() > 0 ? ":" + url.getPort() : ""),
+				url.getHost(),
+				url.getPort() > 0 ? url.getPort() : null,
+				StringUtils.isNotBlank(url.getPath()) ? url.getPath() : "/",
+				StringUtils.isNotBlank(url.getQuery()) ? "?" + url.getQuery() : "",
+				StringUtils.isNotBlank(url.getRef()) ? "#" + url.getRef() : ""
+		);
+	}
+
+	public static Location fromUiLocation(UiLocation uiLocation) {
+		if (uiLocation.getPathname().length() > 0 && !uiLocation.getPathname().startsWith("/")) {
+			throw new IllegalArgumentException("Non-empty pathname must always start with a slash!");
+		}
+		return new Location(
+				Objects.requireNonNull(uiLocation.getHref()),
+				Objects.requireNonNull(uiLocation.getOrigin()),
+				Objects.requireNonNull(uiLocation.getProtocol()),
+				Objects.requireNonNull(uiLocation.getHost()),
+				Objects.requireNonNull(uiLocation.getHostname()),
+				uiLocation.getPort(),
+				uiLocation.getPathname() != null ? uiLocation.getPathname() : "",
+				uiLocation.getSearch() != null ? uiLocation.getSearch() : "",
+				uiLocation.getHash() != null ? uiLocation.getHash() : ""
+		);
+	}
+
+	public String getHref() {
+		return href;
+	}
+
+	public String getOrigin() {
+		return origin;
+	}
+
+	public String getProtocol() {
+		return protocol;
+	}
+
+	public String getHost() {
+		return host;
+	}
+
+	public String getHostname() {
+		return hostname;
+	}
+
+	public Integer getPort() {
+		return port;
+	}
+
+	public String getPathname() {
+		return pathname;
+	}
+
+	public String getSearch() {
+		return search;
+	}
+
+	public String getHash() {
+		return hash;
+	}
+
+	public Location withPathNameAndQueryParams(String pathNameAndQueryParams) {
+		int questionMarkIndex = pathNameAndQueryParams.indexOf("?");
+		String pathName;
+		String search;
+		if (questionMarkIndex >= 0) {
+			pathName = pathNameAndQueryParams.substring(0, questionMarkIndex);
+			search = pathNameAndQueryParams.substring(questionMarkIndex);
+		} else {
+			pathName = pathNameAndQueryParams;
+			search = "";
+		}
+		return new Location(protocol, hostname, port, pathName, search, hash);
+	}
+
+	@Override
+	public boolean equals(Object o) {
+		if (this == o) {
+			return true;
+		}
+		if (o == null || getClass() != o.getClass()) {
+			return false;
+		}
+		Location location = (Location) o;
+		return Objects.equals(href, location.href) && Objects.equals(origin, location.origin) && Objects.equals(protocol, location.protocol) && Objects.equals(host, location.host) && Objects.equals(hostname, location.hostname) && Objects.equals(port, location.port) && Objects.equals(pathname, location.pathname) && Objects.equals(search, location.search) && Objects.equals(hash, location.hash);
+	}
+
+	@Override
+	public int hashCode() {
+		return Objects.hash(href, origin, protocol, host, hostname, port, pathname, search, hash);
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/session/navigation/NavigationHistoryOperation.java b/teamapps-ux/src/main/java/org/teamapps/ux/session/navigation/NavigationHistoryOperation.java
new file mode 100644
index 000000000..66760185a
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/session/navigation/NavigationHistoryOperation.java
@@ -0,0 +1,24 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.session.navigation;
+
+public enum NavigationHistoryOperation {
+	PUSH, REPLACE
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/session/navigation/NavigationStateChangeType.java b/teamapps-ux/src/main/java/org/teamapps/ux/session/navigation/NavigationStateChangeType.java
new file mode 100644
index 000000000..0a3e0de4e
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/session/navigation/NavigationStateChangeType.java
@@ -0,0 +1,31 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.session.navigation;
+
+import org.teamapps.dto.UiNavigationStateChangeType;
+
+public enum NavigationStateChangeType {
+
+	PUSH, REPLACE;
+
+	public UiNavigationStateChangeType toUiNavigationStateChangeType() {
+		return UiNavigationStateChangeType.valueOf(this.name());
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/session/navigation/ParameterConverterProvider.java b/teamapps-ux/src/main/java/org/teamapps/ux/session/navigation/ParameterConverterProvider.java
new file mode 100644
index 000000000..3031ee50e
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/session/navigation/ParameterConverterProvider.java
@@ -0,0 +1,174 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.session.navigation;
+
+import jakarta.inject.Inject;
+import jakarta.ws.rs.ext.ParamConverter;
+import jakarta.ws.rs.ext.ParamConverterProvider;
+import org.glassfish.jersey.internal.inject.ParamConverters;
+
+import java.lang.annotation.Annotation;
+import java.lang.reflect.Constructor;
+import java.lang.reflect.InvocationTargetException;
+import java.lang.reflect.Modifier;
+import java.lang.reflect.ParameterizedType;
+import java.lang.reflect.Type;
+import java.util.ArrayList;
+import java.util.Arrays;
+import java.util.List;
+import java.util.Optional;
+import java.util.stream.Collectors;
+
+public class ParameterConverterProvider implements ParamConverterProvider {
+
+	private final List<ParamConverterProvider> providers;
+
+	@Inject
+	public ParameterConverterProvider() {
+		try {
+			this.providers = new ArrayList<>(List.of(
+					// ordering is important (e.g. Date provider must be executed before String Constructor
+					// as Date has a deprecated String constructor
+					createInternalJerseyParameterConverter(ParamConverters.DateProvider.class),
+					createInternalJerseyParameterConverter(ParamConverters.TypeFromStringEnum.class),
+					createInternalJerseyParameterConverter(ParamConverters.TypeValueOf.class),
+					createInternalJerseyParameterConverter(ParamConverters.CharacterProvider.class),
+					createInternalJerseyParameterConverter(ParamConverters.TypeFromString.class),
+					createInternalJerseyParameterConverter(ParamConverters.StringConstructor.class),
+					//OptionalCustomProvider intentionally omitted
+					createInternalJerseyParameterConverter(ParamConverters.OptionalProvider.class),
+					new ListParamConverterProvider()
+			));
+		} catch (NoSuchMethodException | InvocationTargetException | InstantiationException | IllegalAccessException e) {
+			throw new RuntimeException(e);
+		}
+    }
+
+	/**
+	 * Most (but not all) of the ParameterConverters in Jersey 3.0.11+ and 3.1.x now have a private constructor
+	 * and a configurable toggle specified by property {@code "jersey.config.paramconverters.throw.iae"}.
+	 * This method uses reflection to create an instance of the specified converter with a default
+	 * value of "false" for the toggle.
+	 *
+	 * @param paramConverterClass class to instantiate
+	 * @return instantiated ParameterConverterProvider
+	 * @throws NoSuchMethodException     when the instantiation fails
+	 * @throws InvocationTargetException when the instantiation fails
+	 * @throws InstantiationException    when the instantiation fails
+	 * @throws IllegalAccessException    when the instantiation fails
+	 */
+	private static ParamConverterProvider createInternalJerseyParameterConverter(Class<? extends ParamConverterProvider> paramConverterClass)
+			throws NoSuchMethodException, InvocationTargetException, InstantiationException, IllegalAccessException {
+		//noinspection unchecked
+		Constructor<? extends ParamConverterProvider>[] declaredConstructors = (Constructor<? extends ParamConverterProvider>[]) paramConverterClass.getDeclaredConstructors();
+		Optional<Constructor<? extends ParamConverterProvider>> noArgConstructor = Arrays.stream(declaredConstructors).filter(constructor -> constructor.getParameterCount() == 0).findFirst();
+		if (noArgConstructor.isPresent()) {
+			Constructor<? extends ParamConverterProvider> constructor = noArgConstructor.get();
+			if (!Modifier.isPublic(constructor.getModifiers())) {
+				constructor.setAccessible(true);
+			}
+			return constructor.newInstance();
+		}
+		Constructor<? extends ParamConverterProvider> oneArgConstructor = Arrays.stream(declaredConstructors)
+				.filter(constructor -> Arrays.equals(constructor.getParameterTypes(), new Class[]{boolean.class}))
+				.findFirst()
+				.orElseThrow(InstantiationError::new);
+		if (!Modifier.isPublic(oneArgConstructor.getModifiers())) {
+			oneArgConstructor.setAccessible(true);
+		}
+		return oneArgConstructor.newInstance(false); //"false" is the default of "jersey.config.paramconverters.throw.iae" in Jersey 3.1.3
+	}
+
+	@Override
+	public <T> ParamConverter<T> getConverter(final Class<T> rawType,
+											  final Type genericType,
+											  final Annotation[] annotations) {
+		for (final ParamConverterProvider p : providers) {
+			final ParamConverter<T> reader = p.getConverter(rawType, genericType, annotations);
+			if (reader != null) {
+				return reader;
+			}
+		}
+		return null;
+	}
+
+	public void addConverterProvider(ParamConverterProvider converterProvider) {
+		providers.add(0, converterProvider);
+	}
+
+	public <T> void addConverter(Class<T> clazz, ParamConverter<T> converter) {
+		providers.add(0, new ParameterConverterProvider() {
+			@Override
+			public <X> ParamConverter<X> getConverter(Class<X> rawType, Type genericType, Annotation[] annotations) {
+				if (rawType == clazz) {
+					return (ParamConverter<X>) converter;
+				} else {
+					return null;
+				}
+			}
+		});
+	}
+
+	private class ListParamConverterProvider implements ParamConverterProvider {
+		@SuppressWarnings("unchecked")
+		@Override
+		public <T> ParamConverter<T> getConverter(Class<T> rawType, Type genericType, Annotation[] annotations) {
+			if (!List.class.isAssignableFrom(rawType)) {
+				return null;
+			}
+			Type parameterType;
+			if (genericType instanceof ParameterizedType) {
+				parameterType = ((ParameterizedType) genericType).getActualTypeArguments()[0];
+				return (ParamConverter<T>) new ListValuedParamConverter(parameterType);
+			} else {
+				return null;
+			}
+		}
+	}
+
+	private class ListValuedParamConverter implements ParamConverter<List<?>> {
+
+		private final ParamConverter<?> itemConverter;
+
+		public ListValuedParamConverter(Type parameterType) {
+			itemConverter = ParameterConverterProvider.this.getConverter((Class<?>) parameterType, parameterType, null);
+		}
+
+		@Override
+		public List<?> fromString(String param) {
+			if (param == null || param.trim().isEmpty()) {
+				return null;
+			}
+			return Arrays.stream(param.split(","))
+					.map(s -> (itemConverter).fromString(s))
+					.collect(Collectors.toList());
+		}
+
+		@Override
+		public String toString(List<?> list) {
+			if (list == null || list.isEmpty()) {
+				return null;
+			}
+			return list.stream()
+					.map(item -> (((ParamConverter) itemConverter)).toString(item))
+					.collect(Collectors.joining(","));
+		}
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/session/navigation/Registration.java b/teamapps-ux/src/main/java/org/teamapps/ux/session/navigation/Registration.java
new file mode 100644
index 000000000..e90c84abc
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/session/navigation/Registration.java
@@ -0,0 +1,27 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.session.navigation;
+
+public interface Registration {
+
+	@SuppressWarnings("unused")
+	void dispose();
+
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/session/navigation/RelativeRouteInfo.java b/teamapps-ux/src/main/java/org/teamapps/ux/session/navigation/RelativeRouteInfo.java
new file mode 100644
index 000000000..64e0b62f0
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/session/navigation/RelativeRouteInfo.java
@@ -0,0 +1,47 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.session.navigation;
+
+import java.util.Set;
+
+public class RelativeRouteInfo {
+
+	private final Route route;
+	private final boolean pathChangeWorthStatePush;
+	private final Set<String> queryParamNamesWorthStatePush;
+
+	public RelativeRouteInfo(Route route, boolean pathChangeWorthStatePush, Set<String> queryParamNamesWorthStatePush) {
+		this.route = route;
+		this.pathChangeWorthStatePush = pathChangeWorthStatePush;
+		this.queryParamNamesWorthStatePush = queryParamNamesWorthStatePush;
+	}
+
+	public Route getRoute() {
+		return route;
+	}
+
+	public boolean isPathChangeWorthStatePush() {
+		return pathChangeWorthStatePush;
+	}
+
+	public Set<String> getQueryParamNamesWorthStatePush() {
+		return queryParamNamesWorthStatePush;
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/session/navigation/Route.java b/teamapps-ux/src/main/java/org/teamapps/ux/session/navigation/Route.java
new file mode 100644
index 000000000..be1f79785
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/session/navigation/Route.java
@@ -0,0 +1,149 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.session.navigation;
+
+import org.apache.commons.lang3.StringUtils;
+
+import java.util.HashMap;
+import java.util.Map;
+import java.util.Objects;
+import java.util.regex.Matcher;
+import java.util.regex.Pattern;
+import java.util.stream.Collectors;
+
+public class Route {
+
+	public static final Route EMPTY = new Route("/", Map.of());
+
+	private static final Pattern RELATIVE_URL_PATTERN = Pattern.compile("(.*?)?(\\?.*?)?(#.*)?");
+
+	private final String relativePath;
+	private final Map<String, String> queryParams;
+
+	public static Route create() {
+		return EMPTY;
+	}
+
+	public static Route parse(String relativeUrl) {
+		if (StringUtils.isBlank(relativeUrl)) {
+			return new Route("/", Map.of());
+		}
+		Matcher matcher = RELATIVE_URL_PATTERN.matcher(relativeUrl);
+		if (matcher.matches()) {
+			String path = matcher.group(1);
+			path = RoutingUtil.normalizePath(path);
+			Map<String, String> queryParams = RoutingUtil.parseQueryParams(matcher.group(2));
+			return new Route(path, queryParams);
+		} else {
+			throw new IllegalArgumentException("Unparsable relative URL: " + relativeUrl);
+		}
+	}
+
+	public Route(String relativePath, Map<String, String> queryParams) {
+		this.relativePath = RoutingUtil.normalizePath(relativePath);
+		this.queryParams = queryParams;
+	}
+
+	public static Route fromLocation(Location location) {
+		return parse(location.getPathname() + location.getSearch());
+	}
+
+	public Route subRoute(String pathPrefixToRemove) {
+		return new Route(RoutingUtil.removePrefix(relativePath, pathPrefixToRemove), queryParams);
+	}
+
+	public Route withPathSuffix(String pathSuffix) {
+		return new Route(RoutingUtil.concatenatePaths(relativePath, pathSuffix), queryParams);
+	}
+
+	public Route withPathPrefix(String pathPrefix) {
+		return new Route(RoutingUtil.concatenatePaths(pathPrefix, relativePath), queryParams);
+	}
+
+	public Route withPath(String path) {
+		return new Route(path, queryParams);
+	}
+
+	public Route withQueryParam(String key, String value) {
+		if (StringUtils.isBlank(key)) {
+			return this;
+		}
+		HashMap<String, String> newQueryParams = new HashMap<>(this.queryParams);
+		if (StringUtils.isNotBlank(value)) {
+			newQueryParams.put(key, value);
+		} else {
+			newQueryParams.remove(key);
+		}
+		return new Route(relativePath, newQueryParams);
+	}
+
+	public Route withQueryParams(Map<String, String> queryParams) {
+		if (queryParams == null || queryParams.isEmpty()) {
+			return new Route(relativePath, Map.of());
+		}
+
+		HashMap<String, String> newQueryParams = new HashMap<>(this.queryParams);
+		queryParams.forEach((key, value) -> {
+			if (StringUtils.isNotBlank(value)) {
+				newQueryParams.put(key, value);
+			} else {
+				newQueryParams.remove(key);
+			}
+		});
+
+		return new Route(relativePath, newQueryParams);
+	}
+
+	public String getPath() {
+		return relativePath;
+	}
+
+	public Map<String, String> getQueryParams() {
+		return queryParams;
+	}
+
+	public String getQueryParam(String name) {
+		return queryParams.get(name);
+	}
+
+	@Override
+	public String toString() {
+		return relativePath + (!queryParams.isEmpty() ? "?" + queryParams.entrySet().stream()
+				.map(e -> e.getKey() + "=" + e.getValue())
+				.collect(Collectors.joining("&")) : "");
+	}
+
+	@Override
+	public boolean equals(Object o) {
+		if (this == o) {
+			return true;
+		}
+		if (o == null || getClass() != o.getClass()) {
+			return false;
+		}
+		Route that = (Route) o;
+		return Objects.equals(relativePath, that.relativePath) && Objects.equals(queryParams, that.queryParams);
+	}
+
+	@Override
+	public int hashCode() {
+		return Objects.hash(relativePath, queryParams);
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/session/navigation/RouteHandler.java b/teamapps-ux/src/main/java/org/teamapps/ux/session/navigation/RouteHandler.java
new file mode 100644
index 000000000..54ce6d27d
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/session/navigation/RouteHandler.java
@@ -0,0 +1,33 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.session.navigation;
+
+import java.util.Map;
+
+public interface RouteHandler {
+
+	/**
+	 * @param path        full path
+	 * @param pathParams  all path parameters of the whole path template
+	 * @param queryParams all query parameters
+	 */
+	void handle(String path, Map<String, String> pathParams, Map<String, String> queryParams);
+
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/session/navigation/Router.java b/teamapps-ux/src/main/java/org/teamapps/ux/session/navigation/Router.java
new file mode 100644
index 000000000..3251f888a
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/session/navigation/Router.java
@@ -0,0 +1,273 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.session.navigation;
+
+import org.glassfish.jersey.uri.UriTemplate;
+import org.teamapps.ux.session.SessionContext;
+
+import java.util.*;
+import java.util.concurrent.CopyOnWriteArrayList;
+import java.util.function.Supplier;
+import java.util.stream.Collectors;
+
+import static org.teamapps.ux.session.navigation.NavigationHistoryOperation.PUSH;
+import static org.teamapps.ux.session.navigation.NavigationHistoryOperation.REPLACE;
+import static org.teamapps.ux.session.navigation.RoutingUtil.*;
+
+public class Router {
+
+	static final String PATH_REMAINDER_VARNAME = "_remainder";
+	static final String PATH_REMAINDER_SUFFIX = "{" + PATH_REMAINDER_VARNAME + ":(/.*)?}";
+
+	private final String pathPrefix;
+	private final UriTemplate pathPrefixTemplate;
+	private final UriTemplate pathPrefixExactTemplate;
+	private final List<UriTemplateAndHandler> handlers = new CopyOnWriteArrayList<>(); // handler execution might add more handlers => prevent ConcurrentModificationException
+
+	private String path;
+	private NavigationHistoryOperation pathChangeOperation;
+	private final Map<String, WithNavigationHistoryChangeOperation<String>> queryParams = new HashMap<>();
+
+	private Supplier<String> pathSupplier;
+	private NavigationHistoryOperation pathSupplierChangeOperation;
+
+	private final Map<String, WithNavigationHistoryChangeOperation<Supplier<String>>> queryParameterSuppliers = new HashMap<>();
+	private final List<WithNavigationHistoryChangeOperation<Supplier<Map<String, String>>>> queryParametersSuppliers = new ArrayList<>();
+
+	private Supplier<Route> routeSupplier;
+	private NavigationHistoryOperation routeSupplierChangeOperation;
+
+	private final List<Runnable> routeHandlingChangeListeners = new ArrayList<>();
+
+	public Router(String pathPrefix) {
+		this.pathPrefix = normalizePath(pathPrefix);
+		this.pathPrefixTemplate = createUriTemplate(this.pathPrefix, false);
+		this.pathPrefixExactTemplate = createUriTemplate(this.pathPrefix, true);
+	}
+
+	private UriTemplate createUriTemplate(String path, boolean exact) {
+		path = normalizePath(path);
+		String templateString;
+		if (exact) {
+			templateString = path;
+		} else {
+			templateString = isEmptyPath(path) ? PATH_REMAINDER_SUFFIX : path + PATH_REMAINDER_SUFFIX;
+		}
+		return new UriTemplate(templateString);
+	}
+
+	public RelativeRouteInfo calculateRelativeRouteInfo() {
+		Route route = Route.create();
+		NavigationHistoryOperation pathChangeOperation = REPLACE;
+		Set<String> queryParameterNamesTriggeringPush = new HashSet<>();
+		if (routeSupplier != null) {
+			route = routeSupplier.get();
+			pathChangeOperation = routeSupplierChangeOperation;
+			if (routeSupplierChangeOperation == PUSH) {
+				queryParameterNamesTriggeringPush.addAll(route.getQueryParams().keySet());
+			}
+		}
+		for (WithNavigationHistoryChangeOperation<Supplier<Map<String, String>>> supplierAndOperation : queryParametersSuppliers) {
+			Map<String, String> queryParameters = supplierAndOperation.getValue().get();
+			route = route.withQueryParams(queryParameters);
+			if (supplierAndOperation.getNavigationHistoryOperation() == PUSH) {
+				queryParameterNamesTriggeringPush.addAll(queryParameters.keySet());
+			} else {
+				queryParameterNamesTriggeringPush.removeAll(queryParameters.keySet());
+			}
+		}
+		for (var entry : queryParameterSuppliers.entrySet()) {
+			String paramName = entry.getKey();
+			String paramValue = entry.getValue().getValue().get();
+			NavigationHistoryOperation changeOperation = entry.getValue().getNavigationHistoryOperation();
+			route = route.withQueryParam(paramName, paramValue);
+			if (changeOperation == PUSH) {
+				queryParameterNamesTriggeringPush.add(paramName);
+			} else {
+				queryParameterNamesTriggeringPush.remove(paramName);
+			}
+		}
+		if (pathSupplier != null) {
+			String path = pathSupplier.get();
+			route = route.withPath(path);
+			pathChangeOperation = pathSupplierChangeOperation;
+		}
+		for (var entry : queryParams.entrySet()) {
+			String paramName = entry.getKey();
+			String paramValue = entry.getValue().getValue();
+			NavigationHistoryOperation changeOperation = entry.getValue().getNavigationHistoryOperation();
+			route = route.withQueryParam(paramName, paramValue);
+			if (changeOperation == PUSH) {
+				queryParameterNamesTriggeringPush.add(paramName);
+			} else {
+				queryParameterNamesTriggeringPush.remove(paramName);
+			}
+		}
+		if (path != null) {
+			route = route.withPath(path);
+			pathChangeOperation = this.pathChangeOperation;
+		}
+		return new RelativeRouteInfo(route, pathChangeOperation == PUSH, queryParameterNamesTriggeringPush);
+	}
+
+	public Registration registerRouteHandler(String pathTemplate, RouteHandler handler) {
+		return registerRouteHandler(pathTemplate, false, handler);
+	}
+
+	public Registration registerRouteHandler(String pathTemplate, boolean exact, RouteHandler handler) {
+		var uriTemplate = createUriTemplate(pathTemplate, exact);
+		UriTemplateAndHandler templateAndRouter = new UriTemplateAndHandler(uriTemplate, handler);
+		handlers.add(templateAndRouter);
+		handlers.sort(Comparator.comparing(h -> h.getUriTemplate().getTemplate().length())); // shorter ones should go first (let's say)
+		fireRouteHandlingChange();
+		return () -> handlers.remove(templateAndRouter);
+	}
+
+	public Registration registerRouteHandlers(Object annotatedClassInstance) {
+		List<Registration> registrations = new AnnotationBasedRouteHandlerFactory(SessionContext.current().getRoutingParamConverterProvider())
+				.createRouteHandlers(annotatedClassInstance).stream()
+				.map(handler -> registerRouteHandler(handler.getPathTemplate(), handler.isExact(), handler))
+				.collect(Collectors.toList());
+		fireRouteHandlingChange();
+		return () -> registrations.forEach(Registration::dispose);
+	}
+
+	public Router getSubRouter(String relativePath) {
+		return SessionContext.current().getRouter(concatenatePaths(pathPrefix, relativePath));
+	}
+
+	public void route(Route route) {
+		for (UriTemplateAndHandler uriTemplateAndHandler : handlers) {
+			HashMap<String, String> pathParams = new HashMap<>();
+			boolean matches = uriTemplateAndHandler.getUriTemplate().match(route.getPath(), pathParams);
+			if (matches) {
+				uriTemplateAndHandler.getHandler().handle(route.getPath(), pathParams, route.getQueryParams());
+			}
+		}
+	}
+
+	public void setPath(String path) {
+		setPath(path, PUSH);
+	}
+
+	public void setPath(String path, NavigationHistoryOperation changeOperation) {
+		this.path = path;
+		pathChangeOperation = changeOperation;
+	}
+
+	public void setQueryParameter(String parameterName, String value) {
+		setQueryParameter(parameterName, value, PUSH);
+	}
+
+	public void setQueryParameter(String parameterName, String value, NavigationHistoryOperation changeOperation) {
+		this.queryParams.put(parameterName, new WithNavigationHistoryChangeOperation<>(value, changeOperation));
+	}
+
+	public Registration setPathSupplier(Supplier<String> pathSupplier) {
+		return setPathSupplier(pathSupplier, PUSH);
+	}
+
+	public Registration setPathSupplier(Supplier<String> pathSupplier, NavigationHistoryOperation changeOperation) {
+		this.pathSupplier = pathSupplier;
+		pathSupplierChangeOperation = changeOperation;
+		return () -> {
+			if (this.pathSupplier == pathSupplier) {
+				this.pathSupplier = null;
+			}
+		};
+	}
+
+	public Registration setQueryParameterSupplier(String parameterName, Supplier<String> supplier) {
+		return setQueryParameterSupplier(parameterName, supplier, PUSH);
+	}
+
+	public Registration setQueryParameterSupplier(String parameterName, Supplier<String> supplier, NavigationHistoryOperation changeOperation) {
+		this.queryParameterSuppliers.put(parameterName, new WithNavigationHistoryChangeOperation<>(supplier, changeOperation));
+		return () -> {
+			if (this.queryParameterSuppliers.get(parameterName) != null && this.queryParameterSuppliers.get(parameterName).getValue() == supplier) {
+				queryParameterSuppliers.remove(parameterName);
+			}
+		};
+	}
+
+	public Registration addQueryParametersSupplier(Supplier<Map<String, String>> supplier) {
+		return addQueryParametersSupplier(supplier, PUSH);
+	}
+
+	public Registration addQueryParametersSupplier(Supplier<Map<String, String>> supplier, NavigationHistoryOperation changeOperation) {
+		this.queryParametersSuppliers.add(new WithNavigationHistoryChangeOperation<>(supplier, changeOperation));
+		return () -> {
+			this.queryParametersSuppliers.removeIf(sao -> sao.getValue() == supplier && sao.getNavigationHistoryOperation() == changeOperation);
+		};
+	}
+
+	public Registration setRouteSupplier(Supplier<Route> supplier) {
+		return setRouteSupplier(supplier, PUSH);
+	}
+
+	public Registration setRouteSupplier(Supplier<Route> supplier, NavigationHistoryOperation changeOperation) {
+		this.routeSupplier = supplier;
+		this.routeSupplierChangeOperation = changeOperation;
+		return () -> {
+			if (this.routeSupplier == supplier) {
+				this.routeSupplier = null;
+			}
+		};
+	}
+
+	public boolean matchesPath(String path) {
+		return pathPrefixTemplate.match(path, new HashMap<>());
+	}
+
+	public boolean matchesPathPrefix(String pathPrefix) {
+		return pathPrefixExactTemplate.match(pathPrefix, new HashMap<>());
+	}
+
+	public String getPathPrefix() {
+		return pathPrefix;
+	}
+
+	public Registration addChangeListener(Runnable listener) {
+		routeHandlingChangeListeners.add(listener);
+		return () -> routeHandlingChangeListeners.remove(listener);
+	}
+
+	private void fireRouteHandlingChange() {
+		routeHandlingChangeListeners.forEach(Runnable::run);
+	}
+
+	private static class UriTemplateAndHandler {
+		private final UriTemplate uriTemplate;
+		private final RouteHandler handler;
+
+		public UriTemplateAndHandler(UriTemplate uriTemplate, RouteHandler handler) {
+			this.uriTemplate = uriTemplate;
+			this.handler = handler;
+		}
+
+		public UriTemplate getUriTemplate() {
+			return uriTemplate;
+		}
+
+		public RouteHandler getHandler() {
+			return handler;
+		}
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/session/navigation/RoutingUtil.java b/teamapps-ux/src/main/java/org/teamapps/ux/session/navigation/RoutingUtil.java
new file mode 100644
index 000000000..0b3036cb0
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/session/navigation/RoutingUtil.java
@@ -0,0 +1,99 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.session.navigation;
+
+import org.apache.commons.lang3.StringUtils;
+
+import java.net.URLDecoder;
+import java.nio.charset.StandardCharsets;
+import java.util.LinkedHashMap;
+import java.util.Map;
+
+public class RoutingUtil {
+
+	public static Map<String, String> parseQueryParams(String query) {
+		if (StringUtils.isBlank(query)) {
+			return Map.of();
+		}
+		if (query.startsWith("?")) {
+			query = query.substring(1);
+		}
+		if (StringUtils.isBlank(query)) {
+			return Map.of();
+		}
+		Map<String, String> queryParams = new LinkedHashMap<>();
+		String[] assignments = query.split("&");
+		for (String assignment : assignments) {
+			int equalsSignIndex = assignment.indexOf("=");
+			queryParams.put(
+					URLDecoder.decode(assignment.substring(0, equalsSignIndex), StandardCharsets.UTF_8),
+					URLDecoder.decode(assignment.substring(equalsSignIndex + 1), StandardCharsets.UTF_8)
+			);
+		}
+		return queryParams;
+	}
+
+	public static String normalizePath(String prefix) {
+		if (isEmptyPath(prefix)) {
+			return "/";
+		}
+		prefix = withSingleLeadingSlash(prefix);
+		while (prefix.length() > 1 && prefix.endsWith("/")) {
+			prefix = prefix.substring(0, prefix.length() - 1);
+		}
+		return prefix;
+	}
+
+	public static boolean isEmptyPath(String prefix) {
+		return StringUtils.isBlank(prefix) || prefix.equals("/");
+	}
+
+	public static String withSingleLeadingSlash(String path) {
+		if (StringUtils.isBlank(path)) {
+			return "/";
+		}
+		while (path.startsWith("//")) {
+			path = path.substring(1);
+		}
+		if (!path.startsWith("/")) {
+			path = "/" + path;
+		}
+		return path;
+	}
+
+	public static String concatenatePaths(String prefix, String suffix) {
+		prefix = normalizePath(prefix);
+		suffix = withSingleLeadingSlash(suffix);
+		return normalizePath(prefix + suffix);
+	}
+
+	public static String removePrefix(String path, String prefix) {
+		path = normalizePath(path);
+		prefix = normalizePath(prefix);
+		if (prefix.equals("/")) {
+			return path;
+		} else if (path.startsWith(prefix)) {
+			return normalizePath(path.substring(prefix.length()));
+		} else {
+			throw new IllegalArgumentException("Cannot remove prefix " + prefix + " from path " + path);
+		}
+	}
+
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/session/navigation/WithNavigationHistoryChangeOperation.java b/teamapps-ux/src/main/java/org/teamapps/ux/session/navigation/WithNavigationHistoryChangeOperation.java
new file mode 100644
index 000000000..ebbf93aaf
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/session/navigation/WithNavigationHistoryChangeOperation.java
@@ -0,0 +1,39 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.session.navigation;
+
+public class WithNavigationHistoryChangeOperation<T> {
+
+	private final T value;
+	private final NavigationHistoryOperation navigationHistoryOperation;
+
+	public WithNavigationHistoryChangeOperation(T value, NavigationHistoryOperation navigationHistoryOperation) {
+		this.value = value;
+		this.navigationHistoryOperation = navigationHistoryOperation;
+	}
+
+	public T getValue() {
+		return value;
+	}
+
+	public NavigationHistoryOperation getNavigationHistoryOperation() {
+		return navigationHistoryOperation;
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/session/navigation/annotation/PathParameter.java b/teamapps-ux/src/main/java/org/teamapps/ux/session/navigation/annotation/PathParameter.java
new file mode 100644
index 000000000..fae47a144
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/session/navigation/annotation/PathParameter.java
@@ -0,0 +1,39 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.session.navigation.annotation;
+
+import java.lang.annotation.ElementType;
+import java.lang.annotation.Retention;
+import java.lang.annotation.RetentionPolicy;
+import java.lang.annotation.Target;
+
+@Target({ElementType.PARAMETER})
+@Retention(RetentionPolicy.RUNTIME)
+public @interface PathParameter {
+
+	/**
+	 * Defines the name of the path template parameter whose value will be used to initialize the value of the annotated
+	 * method parameter.
+	 *
+	 * @see RoutingPath#value()
+	 */
+	String value();
+
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/session/navigation/annotation/QueryParameter.java b/teamapps-ux/src/main/java/org/teamapps/ux/session/navigation/annotation/QueryParameter.java
new file mode 100644
index 000000000..d57f4daf0
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/session/navigation/annotation/QueryParameter.java
@@ -0,0 +1,39 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.session.navigation.annotation;
+
+import java.lang.annotation.ElementType;
+import java.lang.annotation.Retention;
+import java.lang.annotation.RetentionPolicy;
+import java.lang.annotation.Target;
+
+@Target({ElementType.PARAMETER})
+@Retention(RetentionPolicy.RUNTIME)
+public @interface QueryParameter {
+
+	/**
+	 * Defines the name of the HTTP query parameter whose value will be used to initialize the value of the annotated method
+	 * argument. The name is specified in decoded form, any percent encoded literals within
+	 * the value will not be decoded and will instead be treated as literal text. E.g. if the parameter name is "a b" then
+	 * the value of the annotation is "a b", <i>not</i> "a+b" or "a%20b".
+	 */
+	String value();
+
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/session/navigation/annotation/RoutingPath.java b/teamapps-ux/src/main/java/org/teamapps/ux/session/navigation/annotation/RoutingPath.java
new file mode 100644
index 000000000..b2aa7f99f
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/session/navigation/annotation/RoutingPath.java
@@ -0,0 +1,71 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.session.navigation.annotation;
+
+import org.teamapps.ux.session.navigation.RouteHandler;
+
+import java.lang.annotation.*;
+
+/**
+ * Marks a method as {@link RouteHandler} method.
+ * The specified path template needs to match in order to apply the method.
+ * <p>
+ * Path templates are relative, since every router has a path prefix (including SessionContext).
+ * Path templates are normalized, meaning: a leading '/' will be added and trailing slashes will be removed automatically.
+ * <p>
+ * Example:
+ *
+ * <pre>
+ * &#64;Routing("/foo/{id}")
+ * String setFooId(&#64;PathParameter("id") Integer id,
+ *                 &#64;QueryParameter("filter") String filter) {
+ * 	...
+ * }
+ * </pre>
+ */
+@Target({ElementType.TYPE, ElementType.METHOD})
+@Retention(RetentionPolicy.RUNTIME)
+@Repeatable(RoutingPaths.class)
+public @interface RoutingPath {
+
+	/**
+	 * Defines the path template.
+	 * <p>
+	 * Path templates do not need to do any URL encoding.
+	 * <p>
+	 * Do not include query parameters nor matrix parameters. (Matrix parameters are not supported at all in TeamApps.)
+	 * <p>
+	 * Embedded template parameters are allowed and are of the form:
+	 * <pre>
+	 *   param = "{" *WSP name *WSP [ ":" *WSP regex *WSP ] "}"
+	 *   name = (ALPHA / DIGIT / "_")*(ALPHA / DIGIT / "." / "_" / "-" ) ; \w[\w\.-]*
+	 *   regex = *( nonbrace / "{" *nonbrace "}" ) ; where nonbrace is any char other than "{" and "}"
+	 * </pre>
+	 */
+	String value();
+
+	/**
+	 * Whether the path template should NOT match longer paths.
+	 * <p>
+	 * Path templates match paths with more path elements by default. For example "/foo" matches "/foo/bar". Specify false to prevent
+	 * this behavior.
+	 */
+	boolean exact() default false;
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/session/navigation/annotation/RoutingPaths.java b/teamapps-ux/src/main/java/org/teamapps/ux/session/navigation/annotation/RoutingPaths.java
new file mode 100644
index 000000000..1cedc43ff
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/session/navigation/annotation/RoutingPaths.java
@@ -0,0 +1,31 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.session.navigation.annotation;
+
+import java.lang.annotation.ElementType;
+import java.lang.annotation.Retention;
+import java.lang.annotation.RetentionPolicy;
+import java.lang.annotation.Target;
+
+@Target({ElementType.TYPE, ElementType.METHOD})
+@Retention(RetentionPolicy.RUNTIME)
+public @interface RoutingPaths {
+	RoutingPath[] value();
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/task/ObservableProgress.java b/teamapps-ux/src/main/java/org/teamapps/ux/task/ObservableProgress.java
new file mode 100644
index 000000000..f27ec05fe
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/task/ObservableProgress.java
@@ -0,0 +1,44 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.task;
+
+import org.teamapps.event.Event;
+
+public interface ObservableProgress {
+
+	Event<ProgressChangeEventData> onChanged();
+
+	ProgressStatus getStatus();
+
+	String getStatusMessage();
+
+	double getProgress();
+
+	default boolean isProgressUnknown() {
+		return getProgress() < 0;
+	}
+
+	boolean isCancelable();
+
+	void requestCancellation(); // will get ignored when not cancelable!
+
+	boolean isCancellationRequested();
+
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/task/Progress.java b/teamapps-ux/src/main/java/org/teamapps/ux/task/Progress.java
new file mode 100644
index 000000000..ecce66171
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/task/Progress.java
@@ -0,0 +1,179 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.task;
+
+import org.teamapps.event.Event;
+
+public class Progress implements ProgressMonitor, ObservableProgress {
+
+	public final Event<ProgressChangeEventData> onChanged = new Event<>();
+
+	private String statusMessage;
+	private double progress = -1;
+	private boolean cancelable = false;
+	private ProgressStatus status = ProgressStatus.NOT_YET_STARTED;
+
+	@Override
+	public Event<ProgressChangeEventData> onChanged() {
+		return onChanged;
+	}
+
+	@Override
+	public String getStatusMessage() {
+		return statusMessage;
+	}
+
+	@Override
+	public double getProgress() {
+		return progress;
+	}
+
+	@Override
+	public boolean isCancelable() {
+		return cancelable;
+	}
+
+	@Override
+	public void requestCancellation() {
+		if (status.ordinal() < ProgressStatus.CANCELLATION_REQUESTED.ordinal()) {
+			this.status = ProgressStatus.CANCELLATION_REQUESTED;
+			fireChangeEvent();
+		}
+	}
+
+	@Override
+	public boolean isCancellationRequested() {
+		return status == ProgressStatus.CANCELLATION_REQUESTED;
+	}
+
+	@Override
+	public ProgressStatus getStatus() {
+		return status;
+	}
+
+	@Override
+	public void start() {
+		startIfNotYetStarted();
+	}
+
+	private void startIfNotYetStarted() {
+		if (status.ordinal() < ProgressStatus.RUNNING.ordinal()) {
+			status = ProgressStatus.RUNNING;
+			fireChangeEvent();
+		}
+	}
+
+	@Override
+	public void setProgress(double progress) {
+		startIfNotYetStarted();
+		if (status.ordinal() == ProgressStatus.RUNNING.ordinal()) {
+			this.progress = progress;
+			fireChangeEvent();
+		}
+	}
+
+	@Override
+	public void setProgress(double progress, String statusMessage) {
+		startIfNotYetStarted();
+		if (status.ordinal() == ProgressStatus.RUNNING.ordinal()) {
+			this.progress = progress;
+			this.statusMessage = statusMessage;
+			fireChangeEvent();
+		}
+	}
+
+	@Override
+	public void setStatusMessage(String statusMessage) {
+		startIfNotYetStarted();
+		if (status.ordinal() >= ProgressStatus.RUNNING.ordinal()) {
+			this.statusMessage = statusMessage;
+			fireChangeEvent();
+		}
+	}
+
+	@Override
+	public void markCanceled() {
+		if (status.ordinal() < ProgressStatus.CANCELED.ordinal()) {
+			this.status = ProgressStatus.CANCELED;
+			fireChangeEvent();
+		}
+	}
+
+	@Override
+	public void markCanceled(String statusMessage) {
+		if (status.ordinal() < ProgressStatus.CANCELED.ordinal()) {
+			this.status = ProgressStatus.CANCELED;
+		}
+		if (this.status == ProgressStatus.CANCELED) { // allow for changing the status message even if done!
+			this.statusMessage = statusMessage;
+			fireChangeEvent();
+		}
+	}
+
+	@Override
+	public void markCompleted() {
+		if (status.ordinal() < ProgressStatus.CANCELED.ordinal()) {
+			this.status = ProgressStatus.COMPLETE;
+			fireChangeEvent();
+		}
+	}
+
+	@Override
+	public void markCompleted(String statusMessage) {
+		if (status.ordinal() < ProgressStatus.CANCELED.ordinal()) {
+			this.status = ProgressStatus.COMPLETE;
+		}
+		if (this.status == ProgressStatus.COMPLETE) { // allow for changing the status message even if done!
+			this.statusMessage = statusMessage;
+			fireChangeEvent();
+		}
+	}
+
+	@Override
+	public void markFailed() {
+		if (status.ordinal() < ProgressStatus.CANCELED.ordinal()) {
+			this.status = ProgressStatus.FAILED;
+			fireChangeEvent();
+		}
+	}
+
+	@Override
+	public void markFailed(String message) {
+		if (status.ordinal() < ProgressStatus.CANCELED.ordinal()) {
+			this.status = ProgressStatus.FAILED;
+		}
+		if (this.status == ProgressStatus.FAILED) { // allow for changing the status message even if done!
+			this.statusMessage = message;
+			fireChangeEvent();
+		}
+	}
+
+	@Override
+	public void setCancelable(boolean cancelable) {
+		if (status.ordinal() < ProgressStatus.CANCELED.ordinal()) {
+			this.cancelable = cancelable;
+			fireChangeEvent();
+		}
+	}
+
+	private void fireChangeEvent() {
+		this.onChanged().fire(new ProgressChangeEventData(status, statusMessage, progress, cancelable));
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/task/ProgressChangeEventData.java b/teamapps-ux/src/main/java/org/teamapps/ux/task/ProgressChangeEventData.java
new file mode 100644
index 000000000..acd9661d6
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/task/ProgressChangeEventData.java
@@ -0,0 +1,51 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.task;
+
+public class ProgressChangeEventData {
+
+	private final String statusMessage;
+	private final double progress;
+	private final ProgressStatus status;
+	private final boolean cancelable;
+
+	public ProgressChangeEventData(ProgressStatus status, String statusMessage, double progress, boolean cancelable) {
+		this.statusMessage = statusMessage;
+		this.progress = progress;
+		this.status = status;
+		this.cancelable = cancelable;
+	}
+
+	public String getStatusMessage() {
+		return statusMessage;
+	}
+
+	public double getProgress() {
+		return progress;
+	}
+
+	public ProgressStatus getStatus() {
+		return status;
+	}
+
+	public boolean isCancelable() {
+		return cancelable;
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/task/ProgressCompletableFuture.java b/teamapps-ux/src/main/java/org/teamapps/ux/task/ProgressCompletableFuture.java
new file mode 100644
index 000000000..bc36b50b8
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/task/ProgressCompletableFuture.java
@@ -0,0 +1,742 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.task;
+
+import org.teamapps.ux.session.CurrentSessionContext;
+import org.teamapps.ux.session.SessionContext;
+import org.teamapps.ux.task.function.ProgressReportingBiConsumer;
+import org.teamapps.ux.task.function.ProgressReportingBiFunction;
+import org.teamapps.ux.task.function.ProgressReportingConsumer;
+import org.teamapps.ux.task.function.ProgressReportingFunction;
+import org.teamapps.ux.task.function.ProgressReportingRunnable;
+import org.teamapps.ux.task.function.ProgressReportingSupplier;
+
+import java.util.concurrent.CompletableFuture;
+import java.util.concurrent.Executor;
+import java.util.concurrent.ForkJoinPool;
+import java.util.concurrent.TimeUnit;
+import java.util.function.BiConsumer;
+import java.util.function.BiFunction;
+import java.util.function.Consumer;
+import java.util.function.Function;
+import java.util.function.Supplier;
+
+public class ProgressCompletableFuture<T> extends CompletableFuture<T> {
+
+	// basically copy and paste from CompletableFuture...
+	private static final boolean USE_COMMON_POOL = (ForkJoinPool.getCommonPoolParallelism() > 1);
+	// basically copy and paste from CompletableFuture...
+	public static final Executor ASYNC_POOL = USE_COMMON_POOL ? ForkJoinPool.commonPool() : r -> new Thread(r).start();
+
+	private final Progress progress;
+
+	public ProgressCompletableFuture() {
+		this(new Progress());
+	}
+
+	public ProgressCompletableFuture(Progress progress) {
+		this.progress = progress;
+	}
+
+	public ObservableProgress getProgress() {
+		return progress;
+	}
+
+	public boolean complete(T value) {
+		progress.markCompleted();
+		return super.complete(value);
+	}
+
+	public boolean completeExceptionally(Throwable ex) {
+		progress.markFailed();
+		return super.completeExceptionally(ex);
+	}
+
+	@Override
+	public <U> ProgressCompletableFuture<U> newIncompleteFuture() {
+		return new ProgressCompletableFuture<>();
+	}
+
+	// ========== static =========================
+
+
+	public static <U> ProgressCompletableFuture<U> supplyAsync(ProgressReportingSupplier<U> supplier) {
+		return supplyAsync(supplier, ASYNC_POOL);
+	}
+
+	public static <U> ProgressCompletableFuture<U> supplyAsync(ProgressReportingSupplier<U> supplier, Executor executor) {
+		final ProgressCompletableFuture<U> future = new ProgressCompletableFuture<>();
+		executor.execute(() -> {
+			future.progress.start();
+			try {
+				U result = supplier.get(future.progress);
+				future.progress.markCompleted(); // will get ignored if the progress is already in a final state
+				future.complete(result);
+			} catch (Exception e) {
+				future.progress.markFailed();
+				future.completeExceptionally(e);
+			}
+		});
+		return future;
+	}
+
+	public static ProgressCompletableFuture<Void> runAsync(ProgressReportingRunnable runnable) {
+		return runAsync(runnable, ASYNC_POOL);
+	}
+
+	public static ProgressCompletableFuture<Void> runAsync(ProgressReportingRunnable runnable, Executor executor) {
+		final ProgressCompletableFuture<Void> future = new ProgressCompletableFuture<>();
+		executor.execute(runWrapped(runnable, future));
+		return future;
+	}
+
+	public static <U> ProgressCompletableFuture<U> supplyAsync(Supplier<U> supplier) {
+		return supplyAsync(supplier, ASYNC_POOL);
+	}
+
+	public static <U> ProgressCompletableFuture<U> supplyAsync(Supplier<U> supplier, Executor executor) {
+		final ProgressCompletableFuture<U> future = new ProgressCompletableFuture<>();
+		executor.execute(() -> {
+			future.progress.start();
+			try {
+				U result = supplier.get();
+				future.progress.markCompleted(); // will get ignored if the progress is already in a final state
+				future.complete(result);
+			} catch (Exception e) {
+				future.progress.markFailed();
+				future.completeExceptionally(e);
+			}
+		});
+		return future;
+	}
+
+	public static ProgressCompletableFuture<Void> runAsync(Runnable runnable) {
+		return runAsync(runnable, ASYNC_POOL);
+	}
+
+	public static ProgressCompletableFuture<Void> runAsync(Runnable runnable, Executor executor) {
+		final ProgressCompletableFuture<Void> future = new ProgressCompletableFuture<>();
+		executor.execute(runWrapped(runnable, future));
+		return future;
+	}
+
+
+	// ========== with session context ===========
+
+	public <U> ProgressCompletableFuture<U> thenApplyWithSessionContext(Function<? super T, ? extends U> fn) {
+		SessionContext sessionContext = CurrentSessionContext.get();
+		return thenApply(t -> {
+			Object[] result = new Object[1];
+			sessionContext.runWithContext(() -> result[0] = fn.apply(t));
+			return (U) result[0];
+		});
+	}
+
+	public ProgressCompletableFuture<Void> thenAcceptWithCurrentSessionContext(Consumer<? super T> action) {
+		SessionContext sessionContext = CurrentSessionContext.get();
+		return thenAccept(t -> sessionContext.runWithContext(() -> action.accept(t)));
+	}
+
+	public ProgressCompletableFuture<Void> thenRunWithCurrentSessionContext(Runnable action) {
+		SessionContext sessionContext = CurrentSessionContext.get();
+		return thenRun(() -> sessionContext.runWithContext(action));
+	}
+
+	public ProgressCompletableFuture<T> whenCompleteWithCurrentSessionContext(BiConsumer<? super T, ? super Throwable> action) {
+		SessionContext sessionContext = CurrentSessionContext.get();
+		return whenComplete((t, throwable) -> sessionContext.runWithContext(() -> action.accept(t, throwable)));
+	}
+
+	public <U> ProgressCompletableFuture<U> handleWithCurrentSessionContext(BiFunction<? super T, Throwable, ? extends U> fn) {
+		SessionContext sessionContext = CurrentSessionContext.get();
+		return handle((t, throwable) -> {
+			Object[] result = new Object[1];
+			sessionContext.runWithContext(() -> result[0] = fn.apply(t, throwable));
+			return (U) result[0];
+		});
+	}
+
+	public ProgressCompletableFuture<T> exceptionallyWithCurrentSessionContext(Function<Throwable, ? extends T> fn) {
+		SessionContext sessionContext = CurrentSessionContext.get();
+		return exceptionally(throwable -> {
+			Object[] result = new Object[1];
+			sessionContext.runWithContext(() -> result[0] = fn.apply(throwable));
+			return (T) result[0];
+		});
+	}
+
+	// ========= simple overrides =============
+
+	@Override
+	public <U> ProgressCompletableFuture<U> thenApply(Function<? super T, ? extends U> fn) {
+		final ProgressCompletableFuture<U> future = new ProgressCompletableFuture<>();
+		super.thenApply(applyWrapped(fn, future))
+				.exceptionally(throwable -> {
+					future.completeExceptionally(throwable);
+					return null;
+				});
+		return future;
+	}
+
+	@Override
+	public <U> ProgressCompletableFuture<U> thenApplyAsync(Function<? super T, ? extends U> fn) {
+		final ProgressCompletableFuture<U> future = new ProgressCompletableFuture<>();
+		super.thenApplyAsync(applyWrapped(fn, future))
+				.exceptionally(throwable -> {
+					future.completeExceptionally(throwable);
+					return null;
+				});
+		return future;
+	}
+
+	@Override
+	public <U> ProgressCompletableFuture<U> thenApplyAsync(Function<? super T, ? extends U> fn, Executor executor) {
+		final ProgressCompletableFuture<U> future = new ProgressCompletableFuture<>();
+		super.thenApplyAsync(applyWrapped(fn, future), executor)
+				.exceptionally(throwable -> {
+					future.completeExceptionally(throwable);
+					return null;
+				});
+		return future;
+	}
+
+	private <U> Function<T, Object> applyWrapped(Function<? super T, ? extends U> fn, ProgressCompletableFuture<U> future) {
+		return t -> {
+			future.progress.start();
+			try {
+				U result = fn.apply(t);
+				future.progress.markCompleted(); // will get ignored if the progress is already in a final state
+				future.complete(result);
+			} catch (Exception e) {
+				future.progress.markFailed();
+				future.completeExceptionally(e);
+			}
+			return null;
+		};
+	}
+
+	@Override
+	public ProgressCompletableFuture<Void> thenAccept(Consumer<? super T> action) {
+		ProgressCompletableFuture<Void> future = new ProgressCompletableFuture<>();
+		super.thenAccept(acceptWrapped(action, future))
+				.exceptionally(throwable -> {
+					future.completeExceptionally(throwable);
+					return null;
+				});
+		return future;
+	}
+
+	@Override
+	public ProgressCompletableFuture<Void> thenAcceptAsync(Consumer<? super T> action) {
+		ProgressCompletableFuture<Void> future = new ProgressCompletableFuture<>();
+		super.thenAcceptAsync(acceptWrapped(action, future))
+				.exceptionally(throwable -> {
+					future.completeExceptionally(throwable);
+					return null;
+				});
+		return future;
+	}
+
+	@Override
+	public ProgressCompletableFuture<Void> thenAcceptAsync(Consumer<? super T> action, Executor executor) {
+		ProgressCompletableFuture<Void> future = new ProgressCompletableFuture<>();
+		super.thenAcceptAsync(acceptWrapped(action, future), executor)
+				.exceptionally(throwable -> {
+					future.completeExceptionally(throwable);
+					return null;
+				});
+		return future;
+	}
+
+	private Consumer<T> acceptWrapped(Consumer<? super T> action, ProgressCompletableFuture<Void> future) {
+		return t -> {
+			future.progress.start();
+			try {
+				action.accept(t);
+				future.progress.markCompleted(); // will get ignored if the progress is already in a final state
+				future.complete(null);
+			} catch (Exception e) {
+				future.progress.markFailed();
+				future.completeExceptionally(e);
+			}
+		};
+	}
+
+	public ProgressCompletableFuture<Void> thenRun(Runnable action) {
+		final ProgressCompletableFuture<Void> future = new ProgressCompletableFuture<>();
+		super.thenRun(runWrapped(action, future))
+				.exceptionally(throwable -> {
+					future.completeExceptionally(throwable);
+					return null;
+				});
+		return future;
+	}
+
+	public ProgressCompletableFuture<Void> thenRunAsync(Runnable action) {
+		final ProgressCompletableFuture<Void> future = new ProgressCompletableFuture<>();
+		super.thenRunAsync(runWrapped(action, future))
+				.exceptionally(throwable -> {
+					future.completeExceptionally(throwable);
+					return null;
+				});
+		return future;
+	}
+
+	public ProgressCompletableFuture<Void> thenRunAsync(Runnable action, Executor executor) {
+		final ProgressCompletableFuture<Void> future = new ProgressCompletableFuture<>();
+		super.thenRunAsync(runWrapped(action, future), executor)
+				.exceptionally(throwable -> {
+					future.completeExceptionally(throwable);
+					return null;
+				});
+		return future;
+	}
+
+	private static Runnable runWrapped(Runnable action, ProgressCompletableFuture<Void> future) {
+		return () -> {
+			future.progress.start();
+			try {
+				action.run();
+				future.progress.markCompleted(); // will get ignored if the progress is already in a final state
+				future.complete(null);
+			} catch (Exception e) {
+				future.progress.markFailed();
+				future.completeExceptionally(e);
+			}
+		};
+	}
+
+	public ProgressCompletableFuture<T> whenComplete(BiConsumer<? super T, ? super Throwable> action) {
+		final ProgressCompletableFuture<T> future = new ProgressCompletableFuture<>();
+		super.whenComplete(whenCompleteWrapped(action, future))
+				.exceptionally(throwable -> {
+					future.completeExceptionally(throwable);
+					return null;
+				});
+		return future;
+	}
+
+	public ProgressCompletableFuture<T> whenCompleteAsync(BiConsumer<? super T, ? super Throwable> action) {
+		final ProgressCompletableFuture<T> future = new ProgressCompletableFuture<>();
+		super.whenCompleteAsync(whenCompleteWrapped(action, future))
+				.exceptionally(throwable -> {
+					future.completeExceptionally(throwable);
+					return null;
+				});
+		return future;
+	}
+
+	public ProgressCompletableFuture<T> whenCompleteAsync(BiConsumer<? super T, ? super Throwable> action, Executor executor) {
+		final ProgressCompletableFuture<T> future = new ProgressCompletableFuture<>();
+		super.whenCompleteAsync(whenCompleteWrapped(action, future), executor)
+				.exceptionally(throwable -> {
+					future.completeExceptionally(throwable);
+					return null;
+				});
+		return future;
+	}
+
+	private BiConsumer<T, Throwable> whenCompleteWrapped(BiConsumer<? super T, ? super Throwable> action, ProgressCompletableFuture<T> future) {
+		return (t, throwable) -> {
+			future.progress.start();
+			try {
+				action.accept(t, throwable);
+				future.progress.markCompleted(); // will get ignored if the progress is already in a final state
+			} catch (Exception e) {
+				future.progress.markFailed();
+			} finally {
+				if (throwable != null) {
+					future.completeExceptionally(throwable);
+				} else {
+					future.complete(t);
+				}
+			}
+		};
+	}
+
+	public <U> ProgressCompletableFuture<U> handle(BiFunction<? super T, Throwable, ? extends U> fn) {
+		final ProgressCompletableFuture<U> future = new ProgressCompletableFuture<>();
+		super.handle(handleWrapped(fn, future));
+		return future;
+	}
+
+	public <U> ProgressCompletableFuture<U> handleAsync(BiFunction<? super T, Throwable, ? extends U> fn) {
+		final ProgressCompletableFuture<U> future = new ProgressCompletableFuture<>();
+		super.handleAsync(handleWrapped(fn, future));
+		return future;
+	}
+
+	public <U> ProgressCompletableFuture<U> handleAsync(BiFunction<? super T, Throwable, ? extends U> fn, Executor executor) {
+		final ProgressCompletableFuture<U> future = new ProgressCompletableFuture<>();
+		super.handleAsync(handleWrapped(fn, future), executor);
+		return future;
+	}
+
+	private <U> BiFunction<T, Throwable, U> handleWrapped(BiFunction<? super T, Throwable, ? extends U> fn, ProgressCompletableFuture<U> future) {
+		return (t, throwable) -> {
+			future.progress.start();
+			try {
+				U result = fn.apply(t, throwable);
+				future.progress.markCompleted(); // will get ignored if the progress is already in a final state
+				future.complete(result);
+			} catch (Exception e) {
+				future.progress.markFailed();
+				future.completeExceptionally(e);
+			}
+			return null;
+		};
+	}
+
+	@Override
+	public ProgressCompletableFuture<T> toCompletableFuture() {
+		return (ProgressCompletableFuture<T>) super.toCompletableFuture();
+	}
+
+	public ProgressCompletableFuture<T> exceptionally(Function<Throwable, ? extends T> fn) {
+		final ProgressCompletableFuture<T> future = new ProgressCompletableFuture<>();
+		super.exceptionally(throwable -> {
+			future.progress.start();
+			try {
+				T result = fn.apply(throwable);
+				future.progress.markCompleted(); // will get ignored if the progress is already in a final state
+				future.complete(result);
+			} catch (Exception e) {
+				future.progress.markFailed();
+				future.completeExceptionally(e);
+			}
+			return null;
+		});
+		return future;
+	}
+
+	public ProgressCompletableFuture<T> completeAsync(Supplier<? extends T> supplier, Executor executor) {
+		return (ProgressCompletableFuture<T>) super.completeAsync(completeWrapped(supplier), executor);
+	}
+
+	public ProgressCompletableFuture<T> completeAsync(Supplier<? extends T> supplier) {
+		return (ProgressCompletableFuture<T>) super.completeAsync(completeWrapped(supplier));
+	}
+
+	private Supplier<T> completeWrapped(Supplier<? extends T> supplier) {
+		return () -> {
+			this.progress.start();
+			try {
+				T result = supplier.get();
+				this.progress.markCompleted(); // will get ignored if the progress is already in a final state
+				this.complete(result);
+			} catch (Exception e) {
+				this.progress.markFailed();
+				this.completeExceptionally(e);
+			}
+			return null;
+		};
+	}
+
+	@Override
+	public ProgressCompletableFuture<T> orTimeout(long timeout, TimeUnit unit) {
+		return (ProgressCompletableFuture<T>) super.orTimeout(timeout, unit);
+	}
+
+	@Override
+	public ProgressCompletableFuture<T> completeOnTimeout(T value, long timeout, TimeUnit unit) {
+		return (ProgressCompletableFuture<T>) super.completeOnTimeout(value, timeout, unit);
+	}
+
+
+	// ========== overloaded methods with progress ==================
+
+	public <U> ProgressCompletableFuture<U> thenApply(ProgressReportingFunction<? super T, ? extends U> fn) {
+		final ProgressCompletableFuture<U> future = new ProgressCompletableFuture<>();
+		super.thenApply(applyWrapped(fn, future))
+				.exceptionally(throwable -> {
+					future.completeExceptionally(throwable);
+					return null;
+				});
+		return future;
+	}
+
+	public <U> ProgressCompletableFuture<U> thenApplyAsync(ProgressReportingFunction<? super T, ? extends U> fn) {
+		final ProgressCompletableFuture<U> future = new ProgressCompletableFuture<>();
+		super.thenApplyAsync(applyWrapped(fn, future))
+				.exceptionally(throwable -> {
+					future.completeExceptionally(throwable);
+					return null;
+				});
+		return future;
+	}
+
+	public <U> ProgressCompletableFuture<U> thenApplyAsync(ProgressReportingFunction<? super T, ? extends U> fn, Executor executor) {
+		final ProgressCompletableFuture<U> future = new ProgressCompletableFuture<>();
+		super.thenApplyAsync(applyWrapped(fn, future), executor)
+				.exceptionally(throwable -> {
+					future.completeExceptionally(throwable);
+					return null;
+				});
+		return future;
+	}
+
+	private <U> Function<T, Object> applyWrapped(ProgressReportingFunction<? super T, ? extends U> fn, ProgressCompletableFuture<U> future) {
+		return t -> {
+			future.progress.start();
+			try {
+				U result = fn.apply(t, future.progress);
+				future.progress.markCompleted(); // will get ignored if the progress is already in a final state
+				future.complete(result);
+			} catch (Exception e) {
+				future.progress.markFailed();
+				future.completeExceptionally(e);
+			}
+			return null;
+		};
+	}
+
+	public ProgressCompletableFuture<Void> thenAccept(ProgressReportingConsumer<? super T> action) {
+		final ProgressCompletableFuture<Void> future = new ProgressCompletableFuture<>();
+		super.thenAccept(acceptWrapped(action, future))
+				.exceptionally(throwable -> {
+					future.completeExceptionally(throwable);
+					return null;
+				});
+		return future;
+	}
+
+	public ProgressCompletableFuture<Void> thenAcceptAsync(ProgressReportingConsumer<? super T> action) {
+		final ProgressCompletableFuture<Void> future = new ProgressCompletableFuture<>();
+		super.thenAcceptAsync(acceptWrapped(action, future))
+				.exceptionally(throwable -> {
+					future.completeExceptionally(throwable);
+					return null;
+				});
+		return future;
+	}
+
+	public ProgressCompletableFuture<Void> thenAcceptAsync(ProgressReportingConsumer<? super T> action, Executor executor) {
+		final ProgressCompletableFuture<Void> future = new ProgressCompletableFuture<>();
+		super.thenAcceptAsync(acceptWrapped(action, future), executor)
+				.exceptionally(throwable -> {
+					future.completeExceptionally(throwable);
+					return null;
+				});
+		return future;
+	}
+
+	private Consumer<T> acceptWrapped(ProgressReportingConsumer<? super T> action, ProgressCompletableFuture<Void> future) {
+		return t -> {
+			future.progress.start();
+			try {
+				action.accept(t, future.progress);
+				future.progress.markCompleted(); // will get ignored if the progress is already in a final state
+				future.complete(null);
+			} catch (Exception e) {
+				future.progress.markFailed();
+				future.completeExceptionally(e);
+			}
+		};
+	}
+
+	public ProgressCompletableFuture<Void> thenRun(ProgressReportingRunnable action) {
+		final ProgressCompletableFuture<Void> future = new ProgressCompletableFuture<>();
+		super.thenRun(runWrapped(action, future))
+				.exceptionally(throwable -> {
+					future.completeExceptionally(throwable);
+					return null;
+				});
+		return future;
+	}
+
+	public ProgressCompletableFuture<Void> thenRunAsync(ProgressReportingRunnable action) {
+		final ProgressCompletableFuture<Void> future = new ProgressCompletableFuture<>();
+		super.thenRunAsync(runWrapped(action, future))
+				.exceptionally(throwable -> {
+					future.completeExceptionally(throwable);
+					return null;
+				});
+		return future;
+	}
+
+	public ProgressCompletableFuture<Void> thenRunAsync(ProgressReportingRunnable action, Executor executor) {
+		final ProgressCompletableFuture<Void> future = new ProgressCompletableFuture<>();
+		super.thenRunAsync(runWrapped(action, future), executor)
+				.exceptionally(throwable -> {
+					future.completeExceptionally(throwable);
+					return null;
+				});
+		return future;
+	}
+
+	private static Runnable runWrapped(ProgressReportingRunnable action, ProgressCompletableFuture<Void> future) {
+		return () -> {
+			future.progress.start();
+			try {
+				action.run(future.progress);
+				future.progress.markCompleted(); // will get ignored if the progress is already in a final state
+				future.complete(null);
+			} catch (Exception e) {
+				future.progress.markFailed();
+				future.completeExceptionally(e);
+			}
+		};
+	}
+
+	public ProgressCompletableFuture<T> whenComplete(ProgressReportingBiConsumer<? super T, ? super Throwable> action) {
+		final ProgressCompletableFuture<T> future = new ProgressCompletableFuture<>();
+		super.whenComplete(whenCompleteWrapped(action, future))
+				.exceptionally(throwable -> {
+					future.completeExceptionally(throwable);
+					return null;
+				});
+		return future;
+	}
+
+	public ProgressCompletableFuture<T> whenCompleteAsync(ProgressReportingBiConsumer<? super T, ? super Throwable> action) {
+		final ProgressCompletableFuture<T> future = new ProgressCompletableFuture<>();
+		super.whenCompleteAsync(whenCompleteWrapped(action, future))
+				.exceptionally(throwable -> {
+					future.completeExceptionally(throwable);
+					return null;
+				});
+		return future;
+	}
+
+	public ProgressCompletableFuture<T> whenCompleteAsync(ProgressReportingBiConsumer<? super T, ? super Throwable> action, Executor executor) {
+		final ProgressCompletableFuture<T> future = new ProgressCompletableFuture<>();
+		super.whenCompleteAsync(whenCompleteWrapped(action, future), executor)
+				.exceptionally(throwable -> {
+					future.completeExceptionally(throwable);
+					return null;
+				});
+		return future;
+	}
+
+	private BiConsumer<T, Throwable> whenCompleteWrapped(ProgressReportingBiConsumer<? super T, ? super Throwable> action, ProgressCompletableFuture<T> future) {
+		return (t, throwable) -> {
+			future.progress.start();
+			try {
+				action.accept(t, throwable, future.progress);
+				future.progress.markCompleted(); // will get ignored if the progress is already in a final state
+			} catch (Exception e) {
+				future.progress.markFailed();
+			} finally {
+				if (throwable != null) {
+					future.completeExceptionally(throwable);
+				} else {
+					future.complete(t);
+				}
+			}
+		};
+	}
+
+	public <U> ProgressCompletableFuture<U> handle(ProgressReportingBiFunction<? super T, Throwable, ? extends U> fn) {
+		final ProgressCompletableFuture<U> future = new ProgressCompletableFuture<>();
+		super.handle(handleWrapped(fn, future));
+		return future;
+	}
+
+	public <U> ProgressCompletableFuture<U> handleAsync(ProgressReportingBiFunction<? super T, Throwable, ? extends U> fn) {
+		final ProgressCompletableFuture<U> future = new ProgressCompletableFuture<>();
+		super.handleAsync(handleWrapped(fn, future));
+		return future;
+	}
+
+	public <U> ProgressCompletableFuture<U> handleAsync(ProgressReportingBiFunction<? super T, Throwable, ? extends U> fn, Executor executor) {
+		final ProgressCompletableFuture<U> future = new ProgressCompletableFuture<>();
+		super.handleAsync(handleWrapped(fn, future), executor);
+		return future;
+	}
+
+	private <U> BiFunction<T, Throwable, U> handleWrapped(ProgressReportingBiFunction<? super T, Throwable, ? extends U> fn, ProgressCompletableFuture<U> future) {
+		return (t, throwable) -> {
+			future.progress.start();
+			try {
+				U result = fn.apply(t, throwable, future.progress);
+				future.progress.markCompleted(); // will get ignored if the progress is already in a final state
+				future.complete(result);
+			} catch (Exception e) {
+				future.progress.markFailed();
+				future.completeExceptionally(e);
+			}
+			return null;
+		};
+	}
+
+	public ProgressCompletableFuture<T> exceptionally(ProgressReportingFunction<Throwable, ? extends T> fn) {
+		final ProgressCompletableFuture<T> future = new ProgressCompletableFuture<>();
+		super.exceptionally(throwable -> {
+			future.progress.start();
+			try {
+				T result = fn.apply(throwable, future.progress);
+				future.progress.markCompleted(); // will get ignored if the progress is already in a final state
+				future.complete(result);
+			} catch (Exception e) {
+				future.progress.markFailed();
+				future.completeExceptionally(e);
+			}
+			return null;
+		});
+		return future;
+	}
+
+	public ProgressCompletableFuture<T> completeAsync(ProgressReportingSupplier<? extends T> supplier, Executor executor) {
+		return (ProgressCompletableFuture<T>) super.completeAsync(completeWrapped(supplier), executor);
+	}
+
+	public ProgressCompletableFuture<T> completeAsync(ProgressReportingSupplier<? extends T> supplier) {
+		return (ProgressCompletableFuture<T>) super.completeAsync(completeWrapped(supplier));
+	}
+
+	private Supplier<T> completeWrapped(ProgressReportingSupplier<? extends T> supplier) {
+		return () -> {
+			this.progress.start();
+			try {
+				T result = supplier.get(this.progress);
+				this.progress.markCompleted(); // will get ignored if the progress is already in a final state
+				this.complete(result);
+			} catch (Exception e) {
+				this.progress.markFailed();
+				this.completeExceptionally(e);
+			}
+			return null;
+		};
+	}
+
+	/* ========== TODO ==============
+		public <U, V> ProgressingCompletableFuture<V> thenCombine(CompletionStage<? extends U> other, BiFunction<? super T, ? super U, ? extends V> fn)
+		public <U, V> ProgressingCompletableFuture<V> thenCombineAsync(CompletionStage<? extends U> other, BiFunction<? super T, ? super U, ? extends V> fn)
+		public <U, V> ProgressingCompletableFuture<V> thenCombineAsync(CompletionStage<? extends U> other, BiFunction<? super T, ? super U, ? extends V> fn, Executor executor)
+		public <U> ProgressingCompletableFuture<Void> thenAcceptBoth(CompletionStage<? extends U> other, BiConsumer<? super T, ? super U> action)
+		public <U> ProgressingCompletableFuture<Void> thenAcceptBothAsync(CompletionStage<? extends U> other, BiConsumer<? super T, ? super U> action)
+		public <U> ProgressingCompletableFuture<Void> thenAcceptBothAsync(CompletionStage<? extends U> other, BiConsumer<? super T, ? super U> action, Executor executor)
+		public ProgressingCompletableFuture<Void> runAfterBoth(CompletionStage<?> other, Runnable action)
+		public ProgressingCompletableFuture<Void> runAfterBothAsync(CompletionStage<?> other, Runnable action)
+		public ProgressingCompletableFuture<Void> runAfterBothAsync(CompletionStage<?> other, Runnable action, Executor executor)
+		public <U> ProgressingCompletableFuture<U> applyToEither(CompletionStage<? extends T> other, Function<? super T, U> fn)
+		public <U> ProgressingCompletableFuture<U> applyToEitherAsync(CompletionStage<? extends T> other, Function<? super T, U> fn)
+		public <U> ProgressingCompletableFuture<U> applyToEitherAsync(CompletionStage<? extends T> other, Function<? super T, U> fn, Executor executor)
+		public ProgressingCompletableFuture<Void> acceptEither(CompletionStage<? extends T> other, Consumer<? super T> action)
+		public ProgressingCompletableFuture<Void> acceptEitherAsync(CompletionStage<? extends T> other, Consumer<? super T> action)
+		public ProgressingCompletableFuture<Void> acceptEitherAsync(CompletionStage<? extends T> other, Consumer<? super T> action, Executor executor)
+		public ProgressingCompletableFuture<Void> runAfterEither(CompletionStage<?> other, Runnable action)
+		public ProgressingCompletableFuture<Void> runAfterEitherAsync(CompletionStage<?> other, Runnable action)
+		public ProgressingCompletableFuture<Void> runAfterEitherAsync(CompletionStage<?> other, Runnable action, Executor executor)
+		public <U> ProgressingCompletableFuture<U> thenCompose(Function<? super T, ? extends CompletionStage<U>> fn)
+		public <U> ProgressingCompletableFuture<U> thenComposeAsync(Function<? super T, ? extends CompletionStage<U>> fn)
+		public <U> ProgressingCompletableFuture<U> thenComposeAsync(Function<? super T, ? extends CompletionStage<U>> fn, Executor executor)
+	 */
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/task/ProgressMonitor.java b/teamapps-ux/src/main/java/org/teamapps/ux/task/ProgressMonitor.java
new file mode 100644
index 000000000..5a0af0d99
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/task/ProgressMonitor.java
@@ -0,0 +1,61 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.task;
+
+/**
+ * Only the first invocation of cancel(), complete() or fail() will be honored!
+ */
+public interface ProgressMonitor {
+
+	void start();
+
+	void setStatusMessage(String statusMessage);
+
+	void setProgress(double progress);
+
+	void setProgress(double progress, String statusMessage);
+
+	default void setProgressIndeterminate() {
+		setProgress(-1);
+	}
+
+	default void setProgressIndeterminate(String statusMessage) {
+		setProgress(-1, statusMessage);
+	}
+
+	void markCanceled();
+
+	void markCanceled(String statusMessage);
+
+	void markCompleted();
+
+	void markCompleted(String statusMessage);
+
+	void markFailed();
+
+	void markFailed(String message);
+
+	void setCancelable(boolean cancelable);
+
+	boolean isCancelable();
+
+	boolean isCancellationRequested();
+
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/task/ProgressStatus.java b/teamapps-ux/src/main/java/org/teamapps/ux/task/ProgressStatus.java
new file mode 100644
index 000000000..eeaa1f2d0
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/task/ProgressStatus.java
@@ -0,0 +1,35 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.task;
+
+import org.teamapps.dto.UiProgressStatus;
+
+public enum ProgressStatus {
+	NOT_YET_STARTED,
+	RUNNING,
+	CANCELLATION_REQUESTED,
+	CANCELED,
+	COMPLETE,
+	FAILED;
+
+	public UiProgressStatus toUiProgressStatus() {
+		return UiProgressStatus.valueOf(name());
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/task/TaskFailureInfo.java b/teamapps-ux/src/main/java/org/teamapps/ux/task/TaskFailureInfo.java
new file mode 100644
index 000000000..c4de23ebf
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/task/TaskFailureInfo.java
@@ -0,0 +1,42 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.task;
+
+public class TaskFailureInfo {
+	private final String message;
+	private final Throwable throwable;
+
+	public TaskFailureInfo(String message) {
+		this(message, null);
+	}
+
+	public TaskFailureInfo(String message, Throwable throwable) {
+		this.message = message;
+		this.throwable = throwable;
+	}
+
+	public String getMessage() {
+		return message;
+	}
+
+	public Throwable getThrowable() {
+		return throwable;
+	}
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/task/function/ProgressReportingBiConsumer.java b/teamapps-ux/src/main/java/org/teamapps/ux/task/function/ProgressReportingBiConsumer.java
new file mode 100644
index 000000000..7950239dc
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/task/function/ProgressReportingBiConsumer.java
@@ -0,0 +1,28 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.task.function;
+
+import org.teamapps.ux.task.ProgressMonitor;
+
+public interface ProgressReportingBiConsumer<T, U> {
+
+	void accept(T t, U u, ProgressMonitor progressMonitor);
+
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/task/function/ProgressReportingBiFunction.java b/teamapps-ux/src/main/java/org/teamapps/ux/task/function/ProgressReportingBiFunction.java
new file mode 100644
index 000000000..f3f73160e
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/task/function/ProgressReportingBiFunction.java
@@ -0,0 +1,28 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.task.function;
+
+import org.teamapps.ux.task.ProgressMonitor;
+
+public interface ProgressReportingBiFunction<T, U, R> {
+
+	R apply(T t, U u, ProgressMonitor progressMonitor);
+
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/task/function/ProgressReportingConsumer.java b/teamapps-ux/src/main/java/org/teamapps/ux/task/function/ProgressReportingConsumer.java
new file mode 100644
index 000000000..9ec9cdf58
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/task/function/ProgressReportingConsumer.java
@@ -0,0 +1,28 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.task.function;
+
+import org.teamapps.ux.task.ProgressMonitor;
+
+public interface ProgressReportingConsumer<T> {
+
+	void accept(T t, ProgressMonitor progressMonitor);
+
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/task/function/ProgressReportingFunction.java b/teamapps-ux/src/main/java/org/teamapps/ux/task/function/ProgressReportingFunction.java
new file mode 100644
index 000000000..309316779
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/task/function/ProgressReportingFunction.java
@@ -0,0 +1,28 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.task.function;
+
+import org.teamapps.ux.task.ProgressMonitor;
+
+public interface ProgressReportingFunction<T, R> {
+
+	R apply(T t, ProgressMonitor progressMonitor);
+
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/task/function/ProgressReportingRunnable.java b/teamapps-ux/src/main/java/org/teamapps/ux/task/function/ProgressReportingRunnable.java
new file mode 100644
index 000000000..cf2cea5f2
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/task/function/ProgressReportingRunnable.java
@@ -0,0 +1,28 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.task.function;
+
+import org.teamapps.ux.task.ProgressMonitor;
+
+public interface ProgressReportingRunnable {
+
+	void run(ProgressMonitor progressMonitor);
+
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/task/function/ProgressReportingSupplier.java b/teamapps-ux/src/main/java/org/teamapps/ux/task/function/ProgressReportingSupplier.java
new file mode 100644
index 000000000..c12763ee2
--- /dev/null
+++ b/teamapps-ux/src/main/java/org/teamapps/ux/task/function/ProgressReportingSupplier.java
@@ -0,0 +1,28 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.task.function;
+
+import org.teamapps.ux.task.ProgressMonitor;
+
+public interface ProgressReportingSupplier<T> {
+
+	T get(ProgressMonitor progressMonitor);
+
+}
diff --git a/teamapps-ux/src/main/java/org/teamapps/webcontroller/ApplicationsController.java b/teamapps-ux/src/main/java/org/teamapps/webcontroller/ApplicationsController.java
deleted file mode 100644
index a4df92d2b..000000000
--- a/teamapps-ux/src/main/java/org/teamapps/webcontroller/ApplicationsController.java
+++ /dev/null
@@ -1,278 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.webcontroller;
-
-import org.teamapps.data.value.SimpleDataRecord;
-import org.teamapps.icon.material.MaterialIcon;
-import org.teamapps.icons.api.Icon;
-import org.teamapps.ux.application.*;
-import org.teamapps.ux.component.Component;
-import org.teamapps.ux.component.animation.Animation;
-import org.teamapps.ux.component.field.TextField;
-import org.teamapps.common.format.Color;
-import org.teamapps.ux.component.itemview.ItemGroup;
-import org.teamapps.ux.component.itemview.ItemView;
-import org.teamapps.ux.component.itemview.ItemViewItemBackgroundMode;
-import org.teamapps.ux.component.login.LoginWindow;
-import org.teamapps.ux.component.panel.Panel;
-import org.teamapps.ux.component.rootpanel.RootPanel;
-import org.teamapps.ux.component.tabpanel.Tab;
-import org.teamapps.ux.component.tabpanel.TabPanel;
-import org.teamapps.ux.component.template.BaseTemplate;
-import org.teamapps.ux.component.workspacelayout.SimpleWorkSpaceLayout;
-import org.teamapps.ux.component.workspacelayout.WorkSpaceLayoutView;
-import org.teamapps.ux.session.SessionContext;
-import org.teamapps.ux.session.StylingTheme;
-
-import java.util.HashMap;
-import java.util.List;
-import java.util.Map;
-import java.util.Objects;
-
-import static org.teamapps.webcontroller.SimpleApplicationWebController.CMD_LOGOUT;
-import static org.teamapps.ux.component.template.BaseTemplate.*;
-
-public class ApplicationsController implements ApplicationDesktop {
-
-	private final RootPanel rootPanel;
-	private final LoginWindow loginWindow;
-	private final List<ApplicationBuilder> applicationBuilders;
-	private ApplicationBuilder settingsBuilder;
-	private List<String> preLaunchedApps;
-	private Map<String, String> customAppBackgroundByAppName;
-	private Map<String, StylingTheme> stylingThemeByAppName;
-	private final SessionContext context;
-	private TabPanel tabPanel;
-	private Panel applicationsListingPanel;
-	private Map<Tab, String> applicationNameByTab = new HashMap<>();
-	private String lastBackground;
-
-	private Map<Tab, String> applicationNameByApplicationCustomTab = new HashMap<>();
-
-	public ApplicationsController(RootPanel rootPanel, LoginWindow loginWindow, List<ApplicationBuilder> applicationBuilders, ApplicationBuilder settingsBuilder, List<String> preLaunchedAppNames, Map<String, String> customAppBackgroundByAppName, Map<String, StylingTheme> stylingThemeByAppName, SessionContext context) {
-		this.rootPanel = rootPanel;
-		this.loginWindow = loginWindow;
-		this.applicationBuilders = applicationBuilders;
-		this.settingsBuilder = settingsBuilder;
-		this.preLaunchedApps = preLaunchedAppNames;
-		this.customAppBackgroundByAppName = customAppBackgroundByAppName;
-		this.stylingThemeByAppName = stylingThemeByAppName;
-		this.context = context;
-	}
-
-	public void createUi() {
-
-		boolean isMobile = isMobile();
-
-		ItemView<SimpleDataRecord, SimpleDataRecord> applicationsListing = new ItemView<>();
-		applicationsListing.setHeaderPropertyExtractor(SimpleDataRecord::getValue);
-		applicationsListing.setGroupHeaderTemplate(BaseTemplate.LIST_ITEM_SMALL_ICON_SINGLE_LINE);
-		applicationsListing.setItemBackgroundMode(ItemViewItemBackgroundMode.LIGHT);
-		applicationsListing.setHorizontalPadding(2);
-		applicationsListing.setVerticalPadding(0);
-		applicationsListing.setGroupSpacing(5);
-		Map<String, ItemGroup<SimpleDataRecord, SimpleDataRecord>> itemGroupsByApplicationGroupId = new HashMap<>();
-
-		applicationsListingPanel = new Panel(MaterialIcon.APPS, "Anwendungen", applicationsListing);
-		TextField appFilterField = new TextField();
-		appFilterField.setShowClearButton(true);
-		//appFilterField.setEmptyText(context.getMessageBundle().getString("Search") + "...");
-		appFilterField.onTextInput.addListener(applicationsListing::setFilter);
-		applicationsListingPanel.setRightHeaderField(appFilterField, MaterialIcon.SEARCH, 100, 200);
-		applicationsListingPanel.setAlwaysShowHeaderFieldIcons(true);
-
-
-		Map<String, ApplicationBuilder> validBuilderMap = new HashMap<>();
-		for (ApplicationBuilder builder : applicationBuilders) {
-			if (builder.isApplicationAccessible()) {
-				ApplicationInfo applicationInfo = builder.getApplicationInfo();
-				validBuilderMap.put(applicationInfo.getName(), builder);
-
-				ApplicationGroup applicationGroup = applicationInfo.getApplicationGroup();
-				ItemGroup<SimpleDataRecord, SimpleDataRecord> group = itemGroupsByApplicationGroupId.computeIfAbsent(applicationGroup.getId(), applicationGroupId -> {
-					SimpleDataRecord headerData = new SimpleDataRecord(PROPERTY_CAPTION, applicationGroup.getCaption())
-							.setValue(PROPERTY_ICON, applicationGroup.getIcon());
-					ItemGroup<SimpleDataRecord, SimpleDataRecord> itemGroup = new ItemGroup<>(headerData, BaseTemplate.APPLICATION_LISTING);
-					itemGroup.setButtonWidth(isMobile? 0 : 300);
-					applicationsListing.addGroup(itemGroup);
-					itemGroup.setItemPropertyExtractor(SimpleDataRecord::getValue);
-					return itemGroup;
-				});
-				group.addItem(new SimpleDataRecord(PROPERTY_ID, applicationInfo.getName())
-
-						.setValue(PROPERTY_ICON, applicationInfo.getIcon())
-						.setValue(PROPERTY_CAPTION, applicationInfo.getTitle())
-						.setValue(PROPERTY_DESCRIPTION, applicationInfo.getDescription()));
-			}
-		}
-
-		if (isMobile) {
-
-
-			SimpleDataRecord headerData = new SimpleDataRecord(PROPERTY_CAPTION, "Abmelden").setValue(PROPERTY_ICON, MaterialIcon.EXIT_TO_APP);
-			ItemGroup<SimpleDataRecord, SimpleDataRecord> group = new ItemGroup<>(headerData, BaseTemplate.APPLICATION_LISTING);
-			group.setItemPropertyExtractor(SimpleDataRecord::getValue);
-			group.setButtonWidth(0);
-			applicationsListing.addGroup(group);
-
-
-
-			group.addItem(new SimpleDataRecord(PROPERTY_ID, CMD_LOGOUT)
-					.setValue(PROPERTY_ICON, MaterialIcon.EXIT_TO_APP)
-					.setValue(PROPERTY_CAPTION, "Abmelden")
-					.setValue(PROPERTY_DESCRIPTION, "Vom System abmelden"));
-		}
-
-		tabPanel = new TabPanel();
-		Map<String, Tab> tabsByApplicationItemId = new HashMap<>();
-		tabPanel.onTabClosed.addListener(tab -> tabsByApplicationItemId.values().remove(tab));
-		applicationsListing.onItemClicked.addListener(eventData -> {
-			SimpleDataRecord item = eventData.getItem();
-			String applicationName = (String) item.getValue(PROPERTY_ID);
-			if (applicationName.equals(CMD_LOGOUT)) {
-				loginWindow.getPasswordField().setValue(null);
-				rootPanel.setContent(loginWindow.getElegantPanel(), Animation.FADE_ZOOM_GROW, 300);
-			} else {
-				loadApplication(applicationName, validBuilderMap, applicationsListingPanel, tabsByApplicationItemId, tabPanel, rootPanel);
-			}
-		});
-
-		tabPanel.onTabSelected.addListener(tab -> {
-			String applicationName = applicationNameByTab.get(tab);
-			if (applicationName == null) {
-				applicationName = applicationNameByApplicationCustomTab.get(tab);
-			}
-			checkThemeAndBackground(applicationName);
-		});
-
-		if (isMobile) {
-			rootPanel.setContent(applicationsListingPanel);
-		} else {
-			SimpleWorkSpaceLayout workSpaceLayout = new SimpleWorkSpaceLayout();
-			workSpaceLayout.getCenterViewGroup().addView(new WorkSpaceLayoutView(workSpaceLayout, applicationsListingPanel, null, false, false));
-			applicationsListingPanel.setBodyBackgroundColor(Color.WHITE.withAlpha(.92f));
-
-			Tab applicationsTab = new Tab(MaterialIcon.APPS, "Applications", workSpaceLayout);
-			tabPanel.addTab(applicationsTab, true);
-
-			if (settingsBuilder != null) {
-				Tab settingsTab = new Tab(MaterialIcon.MORE_VERT, "Einstellungen", null, true);
-				settingsTab.onSelected.addListener(aVoid -> {
-					settingsTab.setContent(settingsBuilder.createApplication(this).createUi());
-				});
-				settingsTab.setRightSide(true);
-				tabPanel.addTab(settingsTab);
-			}
-
-			Tab logoutTab = new Tab(MaterialIcon.EXIT_TO_APP, "Logout", null, true);
-			logoutTab.setRightSide(true);
-			logoutTab.onSelected.addListener(aVoid -> {
-				context.setBackgroundImage("login", 1000);
-				rootPanel.setContent(loginWindow.getElegantPanel(), Animation.FADE_ZOOM_GROW, 300);
-			});
-			tabPanel.addTab(logoutTab);
-			rootPanel.setContent(tabPanel);
-		}
-
-		for (String preLaunchedApp : preLaunchedApps) {
-			loadApplication(preLaunchedApp, validBuilderMap, applicationsListingPanel, tabsByApplicationItemId, tabPanel, rootPanel);
-		}
-
-	}
-
-	private void loadApplication(String applicationName, Map<String, ApplicationBuilder> validBuilderMap, Panel applicationsListingPanel, Map<String, Tab> tabsByApplicationItemId, TabPanel tabPanel, RootPanel rootPanel) {
-		ApplicationBuilder applicationBuilder = validBuilderMap.get(applicationName);
-		if (!isMobile()) {
-			Tab tab = tabsByApplicationItemId.computeIfAbsent(applicationName, name -> {
-				Application application = applicationBuilder.createApplication(this);
-				ApplicationInfo applicationInfo = applicationBuilder.getApplicationInfo();
-				Tab newTab = new Tab(applicationInfo.getIcon(), applicationInfo.getTitle(), application.createUi());
-				tabPanel.addTab(newTab, true);
-				applicationNameByTab.put(newTab, applicationName);
-				newTab.onClosed.addListener(aVoid -> applicationNameByTab.remove(newTab));
-				return newTab.setCloseable(true);
-			});
-			tab.select();
-		} else {
-			Application application = applicationBuilder.createApplication(this);
-			//todo: remove old application!
-			rootPanel.setContent(application.createUi());
-		}
-		checkThemeAndBackground(applicationName);
-	}
-
-	private void checkThemeAndBackground(String applicationName) {
-		if (applicationName == null) {
-			//todo: settings for app listing
-			context.setBackgroundImage("default", 1000);
-			context.getConfiguration().setTheme(StylingTheme.DEFAULT);
-			context.setConfiguration(context.getConfiguration());
-		} else {
-			if (customAppBackgroundByAppName.containsKey(applicationName)) {
-				context.setBackgroundImage(applicationName, 1000);
-				lastBackground = applicationName;
-			} else if (lastBackground != null && !lastBackground.equals("default")) {
-				context.setBackgroundImage("default", 1000);
-				lastBackground = "default";
-			}
-			context.getConfiguration().setTheme(stylingThemeByAppName.getOrDefault(applicationName, StylingTheme.DEFAULT));
-			context.setConfiguration(context.getConfiguration());
-		}
-	}
-
-	public void showApplication(ApplicationInfo applicationInfo, Application application) {
-		if (!isMobile()) {
-			Tab newTab = new Tab(applicationInfo.getIcon(), applicationInfo.getTitle(), application.createUi());
-			tabPanel.addTab(newTab, true);
-		} else {
-			rootPanel.setContent(application.createUi());
-		}
-	}
-
-	@Override
-	public Component getApplicationsListingComponent() {
-		return applicationsListingPanel;
-	}
-
-	public void showTopLevelComponent(String originatingAppName, Icon icon, String title, Component component) {
-		if (!isMobile()) {
-			Tab newTab = new Tab(icon, title, component);
-			newTab.setCloseable(true);
-			applicationNameByApplicationCustomTab.put(newTab, originatingAppName);
-			newTab.onClosed.addListener(aVoid -> applicationNameByApplicationCustomTab.remove(newTab));
-			tabPanel.addTab(newTab, true);
-		} else {
-			rootPanel.setContent(component);
-		}
-	}
-
-	@Override
-	public void removeTopLevelComponent(Component component) {
-		tabPanel.getTabs().stream()
-				.filter(tab -> Objects.equals(component, tab.getContent()))
-				.findAny()
-				.ifPresent(tabToRemove -> tabPanel.removeTab(tabToRemove));
-	}
-
-	public boolean isMobile() {
-		return context.getClientInfo().isMobileDevice();
-	}
-
-}
diff --git a/teamapps-ux/src/main/java/org/teamapps/webcontroller/SimpleApplicationWebController.java b/teamapps-ux/src/main/java/org/teamapps/webcontroller/SimpleApplicationWebController.java
deleted file mode 100644
index a431b45c4..000000000
--- a/teamapps-ux/src/main/java/org/teamapps/webcontroller/SimpleApplicationWebController.java
+++ /dev/null
@@ -1,205 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.webcontroller;
-
-import io.github.classgraph.ClassGraph;
-import io.github.classgraph.ClassInfoList;
-import org.teamapps.icons.api.IconThemeImpl;
-import org.teamapps.server.ServletRegistration;
-import org.teamapps.server.UxServerContext;
-import org.teamapps.ux.application.ApplicationBuilder;
-import org.teamapps.ux.component.login.LoginAuthenticator;
-import org.teamapps.ux.component.login.LoginWindow;
-import org.teamapps.ux.component.rootpanel.RootPanel;
-import org.teamapps.ux.session.SessionContext;
-import org.teamapps.ux.session.SimpleSessionContext;
-import org.teamapps.ux.session.StylingTheme;
-
-import java.util.ArrayList;
-import java.util.Collection;
-import java.util.HashMap;
-import java.util.List;
-import java.util.Locale;
-import java.util.Map;
-import java.util.ResourceBundle;
-import java.util.function.Function;
-import java.util.stream.Collectors;
-
-public class SimpleApplicationWebController implements WebController {
-
-	public static final String CMD_LOGOUT = "cmdLogout";
-
-	private List<ApplicationBuilder> applicationBuilders = new ArrayList<>();
-	private ApplicationBuilder settingsBuilder;
-	private LoginAuthenticator authenticator;
-	private List<String> preLaunchedApps = new ArrayList<>();
-
-	private String loginBackground = "/resources/backgrounds/login3.jpg";
-	private String loginBackgroundBlurred = "/resources/backgrounds/login3-bl.jpg";
-
-	private String defaultBackground = "/resources/backgrounds/default-bl.jpg";
-
-	private Map<String, String> customAppBackgroundByAppName = new HashMap<>();
-	private Map<String, StylingTheme> stylingThemeByAppName = new HashMap<>();
-	private Function<Locale, ResourceBundle> messageBundleProvider;
-	private IconThemeImpl desktopIconTheme;
-	private IconThemeImpl mobileIconTheme;
-	private List<ServletRegistration> servletRegistrations = new ArrayList<>();
-	private List<Function<UxServerContext, ServletRegistration>> servletRegistrationFactories = new ArrayList<>();
-
-	public void setLoginBackgroundUrls(String background, String backgroundBlurred) {
-		this.loginBackground = background;
-		this.loginBackgroundBlurred = backgroundBlurred;
-
-	}
-
-	public void setDefaultApplicationBackground(String background) {
-		this.defaultBackground = background;
-	}
-
-	public void scanForApplications() {
-		try {
-			ClassInfoList widgetClasses =
-					new ClassGraph()
-							.enableAllInfo()
-							.scan()
-							.getClassesImplementing(ApplicationBuilder.class.getName());
-			widgetClasses.getStandardClasses().loadClasses().stream().forEach(app -> {
-				try {
-					ApplicationBuilder applicationBuilder = (ApplicationBuilder) app.getDeclaredConstructor().newInstance();
-					addApplicationBuilder(applicationBuilder);
-				} catch (Exception e) {
-					e.printStackTrace();
-				}
-
-			});
-		} catch (Exception e) {
-			e.printStackTrace();
-		}
-	}
-
-	public void addApplicationBuilder(ApplicationBuilder applicationBuilder) {
-		applicationBuilders.add(applicationBuilder);
-	}
-
-	public void addPreLaunchedApp(String applicationName) {
-		preLaunchedApps.add(applicationName);
-	}
-
-	public void setSettingsBuilder(ApplicationBuilder settingsBuilder) {
-		this.settingsBuilder = settingsBuilder;
-	}
-
-	public ApplicationBuilder getApplicationBuilderByName(String appName) {
-		return applicationBuilders.stream()
-				.filter(builder -> builder.getApplicationInfo().getName().equals(appName))
-				.findAny()
-				.orElse(null);
-	}
-
-	public void registerCustomAppBackground(String appName, String background) {
-		customAppBackgroundByAppName.put(appName, background);
-	}
-
-	public void registerCustomAppTheme(String appName, StylingTheme theme) {
-		stylingThemeByAppName.put(appName, theme);
-	}
-
-	@Override
-	public void onSessionStart(SessionContext context) {
-		context.registerBackgroundImage("login", loginBackground, loginBackgroundBlurred);
-		context.registerBackgroundImage("default", defaultBackground, defaultBackground);
-		context.setBackgroundImage("login", 0);
-		((SimpleSessionContext) context).setCustomMessageBundleProvider(messageBundleProvider);
-
-		if (!context.getClientInfo().getClientParameters().isEmpty()) {
-			String clientUrl = context.getClientInfo().getClientUrl();
-			//registered
-		}
-
-		RootPanel rootPanel = new RootPanel();
-		context.addRootComponent(null, rootPanel);
-		LoginWindow loginWindow = new LoginWindow();
-		if (authenticator != null) {
-			loginWindow.onLogin.addListener(loginData -> {
-				if (authenticator.loginSuccess(loginData.login, loginData.password, context)) {
-					createAndShowApplication(context, rootPanel, loginWindow);
-				} else {
-					loginWindow.setError();
-				}
-			});
-			rootPanel.setContent(loginWindow.getElegantPanel());
-		} else {
-			createAndShowApplication(context, rootPanel, loginWindow);
-		}
-		context.setBackgroundImage("login", 0);
-
-
-		for (Map.Entry<String, String> entry : customAppBackgroundByAppName.entrySet()) {
-			context.registerBackgroundImage(entry.getKey(), entry.getValue(), entry.getValue());
-		}
-	}
-
-	private void createAndShowApplication(SessionContext context, RootPanel rootPanel, LoginWindow loginWindow) {
-		context.setBackgroundImage("default", 750);
-		ApplicationsController controller = new ApplicationsController(rootPanel, loginWindow, applicationBuilders, settingsBuilder, preLaunchedApps, customAppBackgroundByAppName,
-				stylingThemeByAppName, context);
-		controller.createUi();
-	}
-
-	@Override
-	public Collection<ServletRegistration> getServletRegistrations(UxServerContext serverContext) {
-		ArrayList<ServletRegistration> registrations = new ArrayList<>();
-		registrations.addAll(this.servletRegistrations);
-		registrations.addAll(servletRegistrationFactories.stream()
-				.map(f -> f.apply(serverContext))
-				.collect(Collectors.toList()));
-		return registrations;
-	}
-
-//	@Override
-//	public IconTheme getDefaultIconTheme(boolean isMobile) {
-//		return isMobile ? mobileIconTheme : desktopIconTheme;
-//	}
-
-	public void setAuthenticator(LoginAuthenticator authenticator) {
-		this.authenticator = authenticator;
-	}
-
-	public void setMessageBundleProvider(Function<Locale, ResourceBundle> messageBundleProvider) {
-		this.messageBundleProvider = messageBundleProvider;
-	}
-
-	public void setDefaultDesktopIconTheme(IconThemeImpl desktopIconTheme) {
-		this.desktopIconTheme = desktopIconTheme;
-	}
-
-	public void setDefaultMobileIconTheme(IconThemeImpl mobileIconTheme) {
-		this.mobileIconTheme = mobileIconTheme;
-	}
-
-	public void addServletRegistration(ServletRegistration servletRegistration) {
-		this.servletRegistrations.add(servletRegistration);
-	}
-
-	public void addServletRegistrationFactory(Function<UxServerContext, ServletRegistration> servletRegistrationFactory) {
-		this.servletRegistrationFactories.add(servletRegistrationFactory);
-	}
-}
diff --git a/teamapps-ux/src/main/java/org/teamapps/webcontroller/SimpleWebController.java b/teamapps-ux/src/main/java/org/teamapps/webcontroller/SimpleWebController.java
deleted file mode 100644
index 1a026a4a5..000000000
--- a/teamapps-ux/src/main/java/org/teamapps/webcontroller/SimpleWebController.java
+++ /dev/null
@@ -1,119 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.webcontroller;
-
-import org.teamapps.common.format.Color;
-import org.teamapps.icons.api.IconTheme;
-import org.teamapps.icons.api.IconThemeImpl;
-import org.teamapps.icons.provider.IconProvider;
-import org.teamapps.ux.component.Component;
-import org.teamapps.ux.component.rootpanel.RootPanel;
-import org.teamapps.ux.session.SessionContext;
-
-import java.util.ArrayList;
-import java.util.List;
-import java.util.function.Function;
-
-public class SimpleWebController implements WebController {
-
-    public final static String BACKGROUND_DEFAULT = "default";
-
-    private final Function<SessionContext, Component> componentSupplier;
-    private boolean showBackgroundImage;
-    private Color defaultBackgroundColor;
-
-    private List<IconProvider> additionalIconProvider = new ArrayList<>();
-
-    private IconProvider defaultIconProvider;
-    private IconTheme defaultIconTheme;
-
-    public static SimpleWebController createDefaultController(Function<SessionContext, Component> componentSupplier) {
-        SimpleWebController webController = new SimpleWebController(componentSupplier);
-        return webController;
-    }
-
-    public SimpleWebController(Function<SessionContext, Component> componentSupplier) {
-        this.componentSupplier = componentSupplier;
-    }
-
-    public void setShowBackgroundImage(boolean showBackgroundImage) {
-        this.showBackgroundImage = showBackgroundImage;
-    }
-
-    public void setDefaultBackgroundColor(Color defaultBackgroundColor) {
-        this.defaultBackgroundColor = defaultBackgroundColor;
-    }
-
-    public void addAdditionalIconProvider(IconProvider iconProvider) {
-        additionalIconProvider.add(iconProvider);
-    }
-
-    public void setDefaultIconProvider(IconProvider defaultIconProvider) {
-        this.defaultIconProvider = defaultIconProvider;
-    }
-
-    public void setDefaultIconTheme(IconTheme defaultIconTheme) {
-        this.defaultIconTheme = defaultIconTheme;
-    }
-
-    @Override
-    public IconTheme getDefaultIconTheme(boolean isMobile) {
-        if (defaultIconTheme != null) {
-            return defaultIconTheme;
-        } else if (defaultIconProvider != null) {
-            return new IconThemeImpl(isMobile ? defaultIconProvider.getDefaultMobileStyle() : defaultIconProvider.getDefaultDesktopStyle()
-                    , defaultIconProvider.getDefaultSubIconStyle());
-        } else {
-            return WebController.super.getDefaultIconTheme(isMobile);
-        }
-    }
-
-    @Override
-    public IconProvider getIconProvider() {
-        if (defaultIconProvider != null) {
-            return defaultIconProvider;
-        } else {
-            return WebController.super.getIconProvider();
-        }
-    }
-
-    @Override
-    public List<IconProvider> getAdditionalIconProvider() {
-        return additionalIconProvider;
-    }
-
-    @Override
-    public void onSessionStart(SessionContext context) {
-        if (showBackgroundImage) {
-            String defaultBackground = "/resources/backgrounds/default-bl.jpg";
-            context.registerBackgroundImage(BACKGROUND_DEFAULT, defaultBackground, defaultBackground);
-        }
-
-        RootPanel rootPanel = new RootPanel();
-        context.addRootComponent(null, rootPanel);
-        rootPanel.setContent(componentSupplier.apply(context));
-        if (defaultBackgroundColor != null) {
-            context.setBackgroundColor(defaultBackgroundColor, 0);
-        }
-        if (showBackgroundImage) {
-            context.setBackgroundImage(BACKGROUND_DEFAULT, 0);
-        }
-    }
-}
diff --git a/teamapps-ux/src/main/java/org/teamapps/webcontroller/WebController.java b/teamapps-ux/src/main/java/org/teamapps/webcontroller/WebController.java
index d3f294b43..fafea910e 100644
--- a/teamapps-ux/src/main/java/org/teamapps/webcontroller/WebController.java
+++ b/teamapps-ux/src/main/java/org/teamapps/webcontroller/WebController.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,63 +19,10 @@
  */
 package org.teamapps.webcontroller;
 
-import org.teamapps.icon.material.MaterialIconProvider;
-import org.teamapps.icons.provider.IconProvider;
-import org.teamapps.icons.api.IconTheme;
-import org.teamapps.server.ServletRegistration;
-import org.teamapps.server.UxServerContext;
-import org.teamapps.ux.session.SessionConfiguration;
 import org.teamapps.ux.session.SessionContext;
-import org.teamapps.ux.session.StylingTheme;
-
-import java.time.ZoneId;
-import java.util.Collection;
-import java.util.Collections;
-import java.util.List;
-import java.util.Locale;
 
 public interface WebController {
 
-	void onSessionStart(SessionContext context);
-
-	default Collection<ServletRegistration> getServletRegistrations(UxServerContext serverContext) {
-		return Collections.emptyList();
-	}
-
-	default IconTheme getDefaultIconTheme(boolean isMobile) {
-		IconProvider iconProvider = getIconProvider();
-		if (isMobile) {
-			return IconTheme.of(iconProvider.getDefaultMobileStyle(), iconProvider.getDefaultSubIconStyle());
-		} else {
-			return IconTheme.of(iconProvider.getDefaultDesktopStyle(), iconProvider.getDefaultSubIconStyle());
-		}
-	}
-
-	default IconProvider getIconProvider() {
-		return new MaterialIconProvider();
-	}
-
-	default List<IconProvider> getAdditionalIconProvider() {
-		return null;
-	}
-
-	default void destroy() {
-		// do nothing by default
-	}
-
-	default SessionConfiguration createSessionConfiguration(SessionContext context) {
-		boolean optimizedForTouch = false;
-		StylingTheme theme = StylingTheme.DEFAULT;
-		if (context.getClientInfo().isMobileDevice()) {
-			optimizedForTouch = true;
-			theme = StylingTheme.MODERN;
-		}
+	void onSessionStart(SessionContext sessionContext);
 
-		return SessionConfiguration.create(
-				Locale.forLanguageTag(context.getClientInfo().getPreferredLanguageIso()),
-				ZoneId.of(context.getClientInfo().getTimeZone()),
-				theme,
-				optimizedForTouch
-		);
-	}
 }
diff --git a/teamapps-ux/src/main/resources/org/teamapps/ux/i18n/DefaultCaptions.properties b/teamapps-ux/src/main/resources/org/teamapps/ux/i18n/DefaultCaptions.properties
deleted file mode 100644
index 51ff4e1e3..000000000
--- a/teamapps-ux/src/main/resources/org/teamapps/ux/i18n/DefaultCaptions.properties
+++ /dev/null
@@ -1,117 +0,0 @@
-###
-# ========================LICENSE_START=================================
-# TeamApps
-# ---
-# Copyright (C) 2014 - 2019 TeamApps.org
-# ---
-# Licensed under the Apache License, Version 2.0 (the "License");
-# you may not use this file except in compliance with the License.
-# You may obtain a copy of the License at
-# 
-#      http://www.apache.org/licenses/LICENSE-2.0
-# 
-# Unless required by applicable law or agreed to in writing, software
-# distributed under the License is distributed on an "AS IS" BASIS,
-# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-# See the License for the specific language governing permissions and
-# limitations under the License.
-# =========================LICENSE_END==================================
-###
-dict.login=Login
-dict.password=Password
-dict.view=View
-dict.showViews=Show views
-dict.add=Add
-dict.addNewRecord=Add new record
-dict.filterViews=Filter views
-dict.timeGraph=Time graph
-dict.DisplayAndFilterRecordsByTime=Display and filter records by time
-dict.standardViews=Standard views
-dict.tree=Tree
-dict.list=Liste
-dict.viewAsList=View as list
-dict.previewList=Preview list
-dict.viewAsPreviewList=View as preview list
-dict.table=Table
-dict.viewAsTable=View as table
-dict.symbols=Symbols
-dict.viewAsSymbols=View as symbols
-dict.additionalViews=Additional views
-dict.form=Form
-dict.endlessForm=Endless form
-dict.viewAsEndlessForm=View as endless form
-dict.calendar=Calendar
-dict.displayTheCalendar=Display the calendar
-dict.map=Map
-dict.displayTheMap=Display the map
-dict.messageView=Message view
-dict.viewAsMessageView=View as message view
-dict.save=Save
-dict.discard=Discard
-dict.delete=Delete
-dict.deleteAll=Delete all
-dict.columns=Columns
-dict.columnWidth=Column width
-dict.filter=Filter
-dict.options=Options
-dict.baseSettings=Base settings
-dict.defaultColumns=Default columns
-dict.displayTheDefaultColumns=Display the default columns
-dict.allColumns=All columns
-dict.displayAllColumns=Display all columns
-dict.selectColumnToDisplayOrHide=Select column to display or hide
-dict.setVisibilityOfColumn=Set visibility of column {0}
-dict.autoFit=Auto fit
-dict.setAllColumnWidthsToTheWidthOfTheTable=Set all column widths to the width of the table
-dict.standardWidth=Standard width
-dict.setColumnWidthsToTheDefaultWidths=Set column widths to the default widths
-dict.automaticColumnDisplay=Automatic column display
-dict.hideEmptyColumns=Hide empty columns
-dict.hideAllColumnsThatDoNotContainAnyData=Hide all columns that do not contain any data
-dict.displayEmptyColumns=Display empty columns
-dict.displayAllColumnsEventEmptyOnes=Display all columns, even empty ones
-dict.changeWidth=Change width
-dict.decreaseColumnWidths=Decrease column widths
-dict.decreaseTheWidthsOfAllColumns=Decrease the widths of all columns
-dict.increaseColumnWidths=Increase column widths
-dict.increaseTheWidthsOfAllColumns=Increase the widths of all columns
-dict.tableOptions=Table options
-dict.shadedRows=Shaded rows
-dict.displayTableWithShadedRows=Display table with shaded rows
-dict.showNumbering=Show numbering
-dict.displayRowNumbers=Display row numbers
-dict.editOptions=Edit options
-dict.doYouReallyWantToDeleteRecords=Do you really want to delete {0} records?
-dict.edit=Edit
-dict.cancel=Abbrechen
-dict.thereAreUnsavedChanges=There are unsaved changes
-dict.theEditModeCannotBeChangedWhileThereAreUnsavedChanges=The edit mode cannot be changed while there are unsaved changes
-dict.editSettings=Edit settings
-dict.defaultEditMode=Default edit mode
-dict.editValuesOnRequest=Edit values on request
-dict.alwaysEditableMode=Always editable mode
-dict.makeTheFieldsAlwaysEditable=Make the fields always editable
-dict.autoSaveMode=Auto save mode
-dict.saveAllChangesImmediately=Save all changes immediately
-dict.revertAllChanges=Revert all changes?
-dict.deleteRecord=Delete record
-dict.doYouReallyWantToDeleteTheRecord=Do you really want to delete the record?
-dict.search=Search
-dict.name=Name
-dict.errorFieldCannotBeEmpty=Error: field cannot be empty
-dict.icon=Icon
-dict.customIcon=Custom icon
-dict.selectIcon=Select icon...
-dict.error=Fehler
-dict.call=Call
-dict.ok=OK
-
-ux.fileField.upload_verb=Upload
-ux.fileField.fileTooLarge=The file you selected is too large. The maximum allowed file size is {0}.
-ux.fileField.fileTooLarge_short=File too large! Max size: {0}.
-ux.fileField.uploadError=An error has occurred while uploading the file.
-ux.fileField.uploadError_short=Error while uploading!
-
-ux.loginWindow.login=Login
-ux.loginWindow.password=Password
-ux.loginWindow.wrongUserNameOrPassword=Wrong user name or password
diff --git a/teamapps-ux/src/main/resources/org/teamapps/ux/i18n/DefaultCaptions_de.properties b/teamapps-ux/src/main/resources/org/teamapps/ux/i18n/DefaultCaptions_de.properties
index 81548bb66..cfe20d507 100644
--- a/teamapps-ux/src/main/resources/org/teamapps/ux/i18n/DefaultCaptions_de.properties
+++ b/teamapps-ux/src/main/resources/org/teamapps/ux/i18n/DefaultCaptions_de.properties
@@ -2,7 +2,7 @@
 # ========================LICENSE_START=================================
 # TeamApps
 # ---
-# Copyright (C) 2014 - 2019 TeamApps.org
+# Copyright (C) 2014 - 2026 TeamApps.org
 # ---
 # Licensed under the Apache License, Version 2.0 (the "License");
 # you may not use this file except in compliance with the License.
@@ -17,3 +17,6 @@
 # limitations under the License.
 # =========================LICENSE_END==================================
 ###
+
+
+
diff --git a/teamapps-ux/src/main/resources/org/teamapps/ux/i18n/DefaultCaptions_en.properties b/teamapps-ux/src/main/resources/org/teamapps/ux/i18n/DefaultCaptions_en.properties
new file mode 100644
index 000000000..72ba9f306
--- /dev/null
+++ b/teamapps-ux/src/main/resources/org/teamapps/ux/i18n/DefaultCaptions_en.properties
@@ -0,0 +1,99 @@
+###
+# ========================LICENSE_START=================================
+# TeamApps
+# ---
+# Copyright (C) 2014 - 2026 TeamApps.org
+# ---
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+# 
+#      http://www.apache.org/licenses/LICENSE-2.0
+# 
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+# =========================LICENSE_END==================================
+###
+
+teamapps.common.login=Login
+teamapps.common.password=Password
+teamapps.common.resetPassword=Reset password
+teamapps.common.wrongUserNameOrPassword=Wrong user name or password
+teamapps.common.userName=User name
+teamapps.common.userID=User ID
+teamapps.common.add=Add
+teamapps.common.addRecord=Add record
+teamapps.common.edit=Edit
+teamapps.common.remove=Remove
+teamapps.common.removeSelection=Remove selection
+teamapps.common.removeAllFilters=Remove all filters
+teamapps.common.delete=Delete
+teamapps.common.deleteRecord=Delete record
+teamapps.common.save=Save
+teamapps.common.saveChanges=Save changes
+teamapps.common.saveAndClose=Save & close
+teamapps.common.revert=Revert
+teamapps.common.revertChanges=Revert changes
+teamapps.common.error=Error
+teamapps.common.ok=OK
+teamapps.common.cancel=Cancel
+teamapps.common.cancelAndClose=Cancel & close
+teamapps.common.refresh=Refresh
+teamapps.common.sessionTerminated=Session Terminated
+teamapps.common.sessionExpired=Session Expired
+teamapps.common.sessionExpiredText=Your session has expired.\n\nPlease refresh this page. If you click cancel, the application will remain unresponsive until you refresh the page.
+teamapps.common.sessionErrorText=A server-side error has occurred.\n\nPlease refresh this page. If you click cancel, the application will remain unresponsive until you refresh the page.
+teamapps.common.sessionTerminatedText=Your session has been terminated.\n\nPlease refresh this page. If you click cancel, the application will remain unresponsive until you refresh the page.
+teamapps.common.print=Print
+teamapps.common.help=Help
+teamapps.common.upload=Upload
+teamapps.common.download=Download
+teamapps.common.register=Register
+teamapps.common.rotate=Rotate
+teamapps.common.rotatePicture=Rotate picture
+teamapps.common.cropImage=Crop image
+teamapps.common.year=Year
+teamapps.common.month=Month
+teamapps.common.week=Week
+teamapps.common.day=Day
+teamapps.common.group=Group
+teamapps.common.grouping=Grouping
+teamapps.common.byFullValue=By full value
+teamapps.common.byWords=By words
+teamapps.common.byYear=By year
+teamapps.common.byQuarter=By quarter
+teamapps.common.byMonth=By month
+teamapps.common.byWeek=By week
+teamapps.common.byDay=By day
+teamapps.common.today=Today
+teamapps.common.now=Now
+teamapps.common.previous=Previous
+teamapps.common.next=Next
+teamapps.common.back=Back
+teamapps.common.creationDate=Creation date
+teamapps.common.modificationDate=Modification date
+teamapps.common.deletionDate=Deletion date
+teamapps.common.restoreDate=Restore date
+teamapps.common.createdBy=Created by
+teamapps.common.modifiedBy=Modified by
+teamapps.common.deletedBy=Deleted by
+teamapps.common.restoredBy=Restored by
+teamapps.common.search=Search
+teamapps.common.search___=Search...
+teamapps.common.values=Values
+teamapps.common.count=Count
+teamapps.common.filter=Filter
+teamapps.common.empty=Empty
+teamapps.common.select=Select
+teamapps.common.selectArea=Select area
+teamapps.common.requiredField=This field is required.
+teamapps.common.recordSuccessfullySaved=Record successfully saved.
+teamapps.common.recordSuccessfullyDeleted=Record successfully deleted.
+teamapps.common.fileTooLargeMsg=The file you selected is too large. The maximum allowed file size is {0}.
+teamapps.common.fileTooLargeShortMsg=File too large! Max size: {0}.
+teamapps.common.uploadErrorMsg=An error has occurred while uploading the file.
+teamapps.common.uploadErrorShortMsg=Error while uploading!
+teamapps.common.noRunningTasks=No running tasks.
diff --git a/teamapps-ux/src/test/java/org/teamapps/data/extract/BeanPropertyExtractorTest.java b/teamapps-ux/src/test/java/org/teamapps/data/extract/BeanPropertyExtractorTest.java
index 8fb6e9b45..309210090 100644
--- a/teamapps-ux/src/test/java/org/teamapps/data/extract/BeanPropertyExtractorTest.java
+++ b/teamapps-ux/src/test/java/org/teamapps/data/extract/BeanPropertyExtractorTest.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -27,45 +27,78 @@ public class BeanPropertyExtractorTest {
 
 	@Test
 	public void testGetValue() throws Exception {
-		BeanPropertyExtractor<Object> extractor = new BeanPropertyExtractor<>();
+		BeanPropertyExtractor<A> extractor = new BeanPropertyExtractor<>();
 		Object value = extractor.getValue(new A(), "q");
 		assertEquals("qValue", value);
 	}
 
 	@Test
-	public void testWontGetFieldValue() throws Exception {
-		BeanPropertyExtractor<Object> extractor = new BeanPropertyExtractor<>();
-		Object value = extractor.getValue(new A(), "r");
+	public void testWontGetPrivateFieldValue() throws Exception {
+		BeanPropertyExtractor<A> extractor = new BeanPropertyExtractor<>();
+		Object value = extractor.getValue(new A(), "publicField");
 		assertNull(value);
 		// see debug log!
 	}
 
+	@Test
+	public void testValueExtractorsGetCachedSeparatelyDependingOnFallbackToFields() throws Exception {
+		BeanPropertyExtractor<A> extractor = new BeanPropertyExtractor<>();
+		assertNull(extractor.getValue(new A(), "x"));
+		BeanPropertyExtractor<A> extractor2 = new BeanPropertyExtractor<>(true);
+		assertEquals("xValue", extractor2.getValue(new A(), "x"));
+	}
+
+	@Test
+	public void testGetPublicFieldValue() throws Exception {
+		BeanPropertyExtractor<A> extractor = new BeanPropertyExtractor<>(true);
+		Object value = extractor.getValue(new A(), "publicField");
+		assertEquals(1337, value);
+	}
+
+	@Test
+	public void testGetPrivateFieldValue() throws Exception {
+		BeanPropertyExtractor<A> extractor = new BeanPropertyExtractor<>(true);
+		Object value = extractor.getValue(new A(), "privateField");
+		assertEquals(2337, value);
+	}
+
 	@Test
 	public void testGetsBooleanGetter() throws Exception {
-		BeanPropertyExtractor<Object> extractor = new BeanPropertyExtractor<>();
+		BeanPropertyExtractor<A> extractor = new BeanPropertyExtractor<>();
 		Object value = extractor.getValue(new A(), "s");
 		assertEquals(true, value);
 	}
 
 	@Test
-	public void testAddCustomPropertyExtractor() throws Exception {
-		BeanPropertyExtractor<Object> extractor = new BeanPropertyExtractor<>();
+	public void testAddCustomValueExtractor() throws Exception {
+		BeanPropertyExtractor<A> extractor = new BeanPropertyExtractor<>();
 		extractor.addProperty("blah", (object) -> "blahValue");
 		Object value = extractor.getValue(new A(), "blah");
 		assertEquals("blahValue", value);
 	}
 
 	@Test
-	public void testAddCustomPropertyExtractorOverwritesProperty() throws Exception {
-		BeanPropertyExtractor<Object> extractor = new BeanPropertyExtractor<>();
+	public void testAddCustomValueExtractorOverwritesProperty() throws Exception {
+		BeanPropertyExtractor<A> extractor = new BeanPropertyExtractor<>();
 		extractor.addProperty("q", (object) -> "overwrittenQValue");
 		Object value = extractor.getValue(new A(), "q");
 		assertEquals("overwrittenQValue", value);
 	}
 
+	// TODO uncomment once we have Java 14
+//	@Test
+//	public void testWithRecords() throws Exception {
+//		BeanPropertyExtractor<R> extractor = new BeanPropertyExtractor<>();
+//		Object value = extractor.getValue(new R("asdf"), "s");
+//		assertEquals("asdf", value);
+//	}
+
 	public static class A {
-		private String q = "qValue";
-		private String r = "rValue";
+		private final String q = "qValue";
+		private final String r = "rValue";
+		public int publicField = 1337;
+		private final int privateField = 2337;
+		private final String x = "xValue";
 
 		public String getQ() {
 			return q;
@@ -75,5 +108,8 @@ public boolean isS() {
 			return true;
 		}
 	}
-	
+
+	// TODO uncomment once we have Java 14
+//	public static record R (String s) {}
+
 }
diff --git a/teamapps-ux/src/test/java/org/teamapps/data/extract/BeanPropertyInjectorTest.java b/teamapps-ux/src/test/java/org/teamapps/data/extract/BeanPropertyInjectorTest.java
new file mode 100644
index 000000000..5258cfb74
--- /dev/null
+++ b/teamapps-ux/src/test/java/org/teamapps/data/extract/BeanPropertyInjectorTest.java
@@ -0,0 +1,114 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.data.extract;
+
+import org.junit.Assert;
+import org.junit.Test;
+
+import static org.junit.Assert.assertEquals;
+
+public class BeanPropertyInjectorTest {
+
+	@Test
+	public void testSetValueUsingProperty() throws Exception {
+		BeanPropertyInjector<A> injector = new BeanPropertyInjector<>();
+		A record = new A();
+		injector.setValue(record, "q", "newQValue");
+		assertEquals("newQValue", record.q);
+	}
+
+	@Test
+	public void testNotSetPublicFieldValue() throws Exception {
+		BeanPropertyInjector<A> injector = new BeanPropertyInjector<>();
+		A record = new A();
+		injector.setValue(record, "publicField", 9);
+		assertEquals(1337, record.publicField);
+	}
+
+	@Test
+	public void testSetPublicFieldValue() throws Exception {
+		BeanPropertyInjector<A> injector = new BeanPropertyInjector<>(true);
+		A record = new A();
+		injector.setValue(record, "publicField", 9);
+		assertEquals(9, record.publicField);
+	}
+
+	@Test
+	public void testValueInjectorsAreCachedSeparatelyDependingOnFallbackToFields() throws Exception {
+		BeanPropertyInjector<A> injector = new BeanPropertyInjector<>();
+		A record = new A();
+		injector.setValue(record, "x", "foo");
+		assertEquals("xValue", record.x);
+		BeanPropertyInjector<A> injector2 = new BeanPropertyInjector<>(true);
+		injector2.setValue(record, "x", "bar");
+		assertEquals("bar", record.x);
+	}
+
+	@Test
+	public void testDoesNotChangeFinalFields() throws Exception {
+		BeanPropertyInjector<A> injector = new BeanPropertyInjector<>(true);
+		A record = new A();
+		injector.setValue(record, "finalField", "foo");
+		Assert.assertEquals("finalFieldValue", record.finalField);
+	}
+
+	@Test
+	public void testSetPrivateFieldValue() throws Exception {
+		BeanPropertyInjector<A> injector = new BeanPropertyInjector<>(true);
+		A record = new A();
+		injector.setValue(record, "privateField", 7);
+		assertEquals(7, record.privateField);
+	}
+
+	@Test
+	public void testAddCustomValueInjector() throws Exception {
+		BeanPropertyInjector<A> injector = new BeanPropertyInjector<>();
+		injector.addProperty("blah", (record, value) -> record.custom = (String) value);
+		A record = new A();
+		injector.setValue(record, "blah", "blub");
+		assertEquals("blub", record.custom);
+	}
+
+	@Test
+	public void testAddCustomValueInjectorOverwritesProperty() throws Exception {
+		BeanPropertyInjector<A> injector = new BeanPropertyInjector<>();
+		injector.addProperty("q", (record, value) -> record.custom = (String) value);
+		A record = new A();
+		injector.setValue(record, "q", "blub");
+		assertEquals("qValue", record.q);
+		assertEquals("blub", record.custom);
+	}
+
+	@SuppressWarnings("FieldMayBeFinal")
+	public static class A {
+		private String q = "qValue";
+		public int publicField = 1337;
+		private int privateField = 2337;
+		private String custom;
+		private String x = "xValue";
+		private final String finalField = "finalFieldValue";
+
+		public void setQ(String q) {
+			this.q = q;
+		}
+
+	}
+
+}
diff --git a/teamapps-ux/src/test/java/org/teamapps/event/EventTest.java b/teamapps-ux/src/test/java/org/teamapps/event/EventTest.java
new file mode 100644
index 000000000..dabe52064
--- /dev/null
+++ b/teamapps-ux/src/test/java/org/teamapps/event/EventTest.java
@@ -0,0 +1,302 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.event;
+
+import org.awaitility.Awaitility;
+import org.junit.Assert;
+import org.junit.Test;
+import org.teamapps.testutil.UxTestUtil;
+import org.teamapps.ux.session.SessionContext;
+
+import java.util.concurrent.ExecutionException;
+import java.util.concurrent.atomic.AtomicInteger;
+import java.util.concurrent.atomic.AtomicReference;
+import java.util.function.Consumer;
+
+import static java.util.concurrent.TimeUnit.SECONDS;
+import static org.assertj.core.api.Assertions.assertThat;
+import static org.teamapps.testutil.UxTestUtil.createDummySessionContext;
+
+public class EventTest {
+
+	@Test
+	public void testAddRemoveConsumerNonBound() {
+		Event<String> event = new Event<>();
+		Assert.assertEquals(0, event.getListeners().size());
+
+		Consumer<String> listener = s -> {
+		};
+		event.addListener(listener);
+		Assert.assertEquals(1, event.getListeners().size());
+
+		event.removeListener(listener);
+		Assert.assertEquals(0, event.getListeners().size());
+	}
+
+	@Test
+	public void testAddRemoveConsumerBoundToSessionContext() throws ExecutionException, InterruptedException {
+		Event<String> event = new Event<>();
+		Assert.assertEquals(0, event.getListeners().size());
+		Consumer<String> listener = s -> {
+		};
+
+		UxTestUtil.doWithMockedSessionContext(() -> {
+			event.addListener(listener);
+			Assert.assertEquals(1, event.getListeners().size());
+		}).get();
+
+		event.removeListener(listener);
+		Assert.assertEquals(0, event.getListeners().size());
+	}
+
+	@Test
+	public void testAddRemoveRunnableNonBound() {
+		Event<String> event = new Event<>();
+		Assert.assertEquals(0, event.getListeners().size());
+
+		Runnable listener = () -> {
+		};
+		event.addListener(listener);
+		Assert.assertEquals(1, event.getListeners().size());
+
+		event.removeListener(listener);
+		Assert.assertEquals(0, event.getListeners().size());
+	}
+
+	@Test
+	public void testAddRemoveRunnableBoundToSessionContext() throws ExecutionException, InterruptedException {
+		Event<String> event = new Event<>();
+		Assert.assertEquals(0, event.getListeners().size());
+		Runnable listener = () -> {
+		};
+
+		UxTestUtil.doWithMockedSessionContext(() -> {
+			event.addListener(listener);
+			Assert.assertEquals(1, event.getListeners().size());
+		}).get();
+
+		event.removeListener(listener);
+		Assert.assertEquals(0, event.getListeners().size());
+	}
+
+	@Test
+	public void disposableShouldRemoveRunnableListener() {
+		Event<String> event = new Event<>();
+
+		Disposable d = event.addListener(() -> {
+		});
+		assertThat(event.getListeners()).hasSize(1);
+		d.dispose();
+		assertThat(event.getListeners()).isEmpty();
+	}
+
+	@Test
+	public void disposableShouldRemoveOnlyOneRunnableListener() {
+		Event<String> event = new Event<>();
+		Runnable listener = () -> {
+		};
+
+		Disposable d = event.addListener(listener);
+		Disposable d2 = event.addListener(listener);
+		assertThat(event.getListeners()).hasSize(2);
+		d.dispose();
+		assertThat(event.getListeners()).hasSize(1);
+	}
+
+	@Test
+	public void disposableShouldRemoveConsumerListener() {
+		Event<String> event = new Event<>();
+
+		Disposable d = event.addListener(s -> {
+		});
+		assertThat(event.getListeners()).hasSize(1);
+		d.dispose();
+		assertThat(event.getListeners()).isEmpty();
+	}
+
+	@Test
+	public void disposableShouldRemoveOnlyOneConsumerListener() {
+		Event<String> event = new Event<>();
+		Consumer<String> listener = s -> {
+		};
+
+		Disposable d = event.addListener(listener);
+		Disposable d2 = event.addListener(listener);
+		assertThat(event.getListeners()).hasSize(2);
+		d.dispose();
+		assertThat(event.getListeners()).hasSize(1);
+	}
+
+	@Test
+	public void disposableShouldRemoveRunnableListenerBoundToSessionContext() throws ExecutionException, InterruptedException {
+		Event<String> event = new Event<>();
+
+		AtomicReference<Disposable> d = new AtomicReference<>();
+		UxTestUtil.doWithMockedSessionContext(() -> {
+			d.set(event.addListener(() -> {
+			}));
+		}).get();
+		assertThat(event.getListeners()).hasSize(1);
+		d.get().dispose();
+		assertThat(event.getListeners()).isEmpty();
+	}
+
+	@Test
+	public void disposableShouldRemoveOnlyOneRunnableListenerBoundToSessionContext() throws ExecutionException, InterruptedException {
+		Event<String> event = new Event<>();
+
+		AtomicReference<Disposable> d = new AtomicReference<>();
+		UxTestUtil.doWithMockedSessionContext(() -> {
+			Runnable listener = () -> {
+			};
+			d.set(event.addListener(listener));
+			event.addListener(listener);
+		}).get();
+		assertThat(event.getListeners()).hasSize(2);
+		d.get().dispose();
+		assertThat(event.getListeners()).hasSize(1);
+	}
+
+	@Test
+	public void disposableShouldRemoveConsumerListenerBoundToSessionContext() throws ExecutionException, InterruptedException {
+		Event<String> event = new Event<>();
+
+		AtomicReference<Disposable> d = new AtomicReference<>();
+		UxTestUtil.doWithMockedSessionContext(() -> {
+			d.set(event.addListener(s -> {
+			}));
+		}).get();
+		assertThat(event.getListeners()).hasSize(1);
+		d.get().dispose();
+		assertThat(event.getListeners()).isEmpty();
+	}
+
+	@Test
+	public void disposableShouldRemoveOnlyOneConsumerListenerBoundToSessionContext() throws ExecutionException, InterruptedException {
+		Event<String> event = new Event<>();
+
+		AtomicReference<Disposable> d = new AtomicReference<>();
+		UxTestUtil.doWithMockedSessionContext(() -> {
+			Consumer<String> listener = s -> {
+			};
+			d.set(event.addListener(listener));
+			event.addListener(listener);
+		}).get();
+		assertThat(event.getListeners()).hasSize(2);
+		d.get().dispose();
+		assertThat(event.getListeners()).hasSize(1);
+	}
+
+	@Test
+	public void testBoundListenersGetRemovedWhenSessionContextGetsDestroyed() throws ExecutionException, InterruptedException {
+		SessionContext sessionContext = createDummySessionContext();
+
+		Event<String> event = new Event<>();
+		Assert.assertEquals(0, event.getListeners().size());
+
+		Consumer<String> boundConsumerListener = s -> {
+		};
+		Runnable boundRunnableListener = () -> {
+		};
+
+		Consumer<String> unboundConsumerListener = s -> {
+		};
+		Runnable unboundRunnableListener = () -> {
+		};
+
+		event.addListener(unboundConsumerListener);
+		Assert.assertEquals(1, event.getListeners().size());
+		sessionContext.runWithContext(() -> {
+			event.addListener(boundConsumerListener);
+			event.addListener(boundRunnableListener);
+			Assert.assertEquals(3, event.getListeners().size());
+		}).get();
+		event.addListener(unboundRunnableListener);
+		Assert.assertEquals(4, event.getListeners().size());
+
+		sessionContext.onDestroyed.fire();
+		Assert.assertEquals(2, event.getListeners().size());
+	}
+
+	@Test
+	public void testSelfDisposingEventListener() {
+		Event<Integer> event = new Event<>();
+		AtomicInteger invocationCount = new AtomicInteger();
+
+		event.addListener((i, disposable) -> {
+			invocationCount.incrementAndGet();
+			if (i == 3) {
+				disposable.dispose();
+			}
+		});
+
+		assertThat(invocationCount).hasValue(0);
+		assertThat(event.getListeners()).hasSize(1);
+		event.fire(1);
+		assertThat(invocationCount).hasValue(1);
+		assertThat(event.getListeners()).hasSize(1);
+		event.fire(2);
+		assertThat(invocationCount).hasValue(2);
+		assertThat(event.getListeners()).hasSize(1);
+		event.fire(3);
+		assertThat(invocationCount).hasValue(3);
+		assertThat(event.getListeners()).hasSize(0);
+		event.fire(4);
+		assertThat(invocationCount).hasValue(3);
+		assertThat(event.getListeners()).hasSize(0);
+	}
+
+	@Test
+	public void testSelfDisposingEventListenerBoundToSessionContext() throws ExecutionException, InterruptedException {
+		SessionContext sessionContext = UxTestUtil.createDummySessionContext();
+		Event<Integer> event = new Event<>();
+		AtomicInteger invocationCount = new AtomicInteger();
+
+		sessionContext.runWithContext(() -> {
+			event.addListener((i, disposable) -> {
+				invocationCount.incrementAndGet();
+				if (i == 3) {
+					disposable.dispose();
+				}
+			});
+		}).get();
+
+		Awaitility.await().atMost(1, SECONDS).untilAsserted(() -> {
+			assertThat(invocationCount).hasValue(0);
+			assertThat(event.getListeners()).hasSize(1);
+		});
+		event.fire(1);
+		event.fire(2);
+		Awaitility.await().atMost(1, SECONDS).untilAsserted(() -> {
+			assertThat(invocationCount).hasValue(2);
+			assertThat(event.getListeners()).hasSize(1);
+		});
+		event.fire(3);
+		Awaitility.await().atMost(1, SECONDS).untilAsserted(() -> {
+			assertThat(invocationCount).hasValue(3);
+			assertThat(event.getListeners()).hasSize(0);
+		});
+		event.fire(4);
+		Awaitility.await().atMost(1, SECONDS).untilAsserted(() -> {
+			assertThat(invocationCount).hasValue(3);
+			assertThat(event.getListeners()).hasSize(0);
+		});
+	}
+}
diff --git a/teamapps-ux/src/test/java/org/teamapps/json/JacksonConfigJavaTimeTest.java b/teamapps-ux/src/test/java/org/teamapps/json/JacksonConfigJavaTimeTest.java
index 414d4ffc3..2b4a09a3c 100644
--- a/teamapps-ux/src/test/java/org/teamapps/json/JacksonConfigJavaTimeTest.java
+++ b/teamapps-ux/src/test/java/org/teamapps/json/JacksonConfigJavaTimeTest.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -23,14 +23,15 @@
 import org.junit.Test;
 
 import java.time.Instant;
-import java.util.UUID;
+import java.time.LocalDate;
+import java.time.LocalDateTime;
 
 import static org.assertj.core.api.Assertions.assertThat;
 
 
 public class JacksonConfigJavaTimeTest {
 
-	private ObjectMapper teamAppsObjectMapper = TeamAppsObjectMapperFactory.create();
+	private final ObjectMapper teamAppsObjectMapper = TeamAppsObjectMapperFactory.create();
 
 	@Test
 	public void instant() throws Exception {
@@ -38,4 +39,16 @@ public void instant() throws Exception {
 		assertThat(teamAppsObjectMapper.readValue("1528910356690", Instant.class)).isEqualTo(Instant.ofEpochMilli(1528910356690L));
 	}
 
+	@Test
+	public void localDateTime() throws Exception {
+		assertThat(teamAppsObjectMapper.writeValueAsString(LocalDate.of(2020, 1, 1))).isEqualTo("[2020,1,1]");
+		assertThat(teamAppsObjectMapper.readValue("[2020,1,1]", LocalDate.class)).isEqualTo(LocalDate.of(2020, 1, 1));
+	}
+
+	@Test
+	public void localDate() throws Exception {
+		assertThat(teamAppsObjectMapper.writeValueAsString(LocalDateTime.of(2020, 1, 1, 1, 1))).isEqualTo("[2020,1,1,1,1]");
+		assertThat(teamAppsObjectMapper.readValue("[2020,1,1,1,1]", LocalDateTime.class)).isEqualTo(LocalDateTime.of(2020, 1, 1, 1, 1));
+	}
+
 }
diff --git a/teamapps-ux/src/test/java/org/teamapps/json/JacksonCustomDeserializerTest.java b/teamapps-ux/src/test/java/org/teamapps/json/JacksonCustomDeserializerTest.java
index d6f7666b5..598ff3b90 100644
--- a/teamapps-ux/src/test/java/org/teamapps/json/JacksonCustomDeserializerTest.java
+++ b/teamapps-ux/src/test/java/org/teamapps/json/JacksonCustomDeserializerTest.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/test/java/org/teamapps/json/JacksonTest.java b/teamapps-ux/src/test/java/org/teamapps/json/JacksonTest.java
index 3a5a3ad19..4f3085924 100644
--- a/teamapps-ux/src/test/java/org/teamapps/json/JacksonTest.java
+++ b/teamapps-ux/src/test/java/org/teamapps/json/JacksonTest.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -28,8 +28,6 @@
 import com.fasterxml.jackson.databind.introspect.BeanPropertyDefinition;
 import com.fasterxml.jackson.datatype.jsr310.JavaTimeModule;
 import org.assertj.core.api.Assertions;
-import org.json.simple.JSONObject;
-import org.json.simple.parser.JSONParser;
 import org.junit.Ignore;
 import org.junit.Test;
 import org.teamapps.dto.UiCommand;
@@ -103,17 +101,10 @@ public void testLowLevelJsonParsingPerformance() throws Exception {
 		String json = JsonDeserializationBenchmark.readResourceToString("sample.json");
 
 		long startTime;
-		JSONObject[] jsonObjects = new JSONObject[1024];
 		JsonNode[] jsonNodes = new JsonNode[1024];
 		UiCommand[] uiCommands = new UiCommand[1024];
 
 		for (int j = 0; j < 5; j++) {
-			startTime = System.currentTimeMillis();
-			for (int i = 0; i < 1_000; i++) {
-				jsonObjects[i % 1024] = (JSONObject) new JSONParser().parse(json);
-			}
-			System.out.println("Simple: " + (System.currentTimeMillis() - startTime));
-
 			startTime = System.currentTimeMillis();
 			for (int i = 0; i < 1_000; i++) {
 				jsonNodes[i % 1024] = mapper.readTree(json);
@@ -125,10 +116,7 @@ public void testLowLevelJsonParsingPerformance() throws Exception {
 				uiCommands[i % 1024] = mapper.readValue(json, UiCommand.class);
 			}
 			System.out.println("Jackson data binding: " + (System.currentTimeMillis() - startTime));
-
-
 		}
-		System.out.println(jsonObjects[0]);
 		System.out.println(jsonNodes[0]);
 	}
 
@@ -172,9 +160,9 @@ public void setA(String a) {
 	}
 
 	public static class FieldPojo {
-		private String a = "propertyA";
-		private String b = "propertyB";
-		private int c = 123;
+		private final String a = "propertyA";
+		private final String b = "propertyB";
+		private final int c = 123;
 
 		@JsonAnyGetter
 		public Map<String, Object> any() {
diff --git a/teamapps-ux/src/test/java/org/teamapps/json/JacksonTypeInfoTest.java b/teamapps-ux/src/test/java/org/teamapps/json/JacksonTypeInfoTest.java
index d31d2e4e2..acaff04bc 100644
--- a/teamapps-ux/src/test/java/org/teamapps/json/JacksonTypeInfoTest.java
+++ b/teamapps-ux/src/test/java/org/teamapps/json/JacksonTypeInfoTest.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/test/java/org/teamapps/json/JacksonTypeInfoWithTeamAppsJacksonTypeIdResolverTest.java b/teamapps-ux/src/test/java/org/teamapps/json/JacksonTypeInfoWithTeamAppsJacksonTypeIdResolverTest.java
index ba4b2034c..90fa7a485 100644
--- a/teamapps-ux/src/test/java/org/teamapps/json/JacksonTypeInfoWithTeamAppsJacksonTypeIdResolverTest.java
+++ b/teamapps-ux/src/test/java/org/teamapps/json/JacksonTypeInfoWithTeamAppsJacksonTypeIdResolverTest.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/test/java/org/teamapps/json/JsonDeserializationBenchmark.java b/teamapps-ux/src/test/java/org/teamapps/json/JsonDeserializationBenchmark.java
index 2977a16c2..dab302c10 100644
--- a/teamapps-ux/src/test/java/org/teamapps/json/JsonDeserializationBenchmark.java
+++ b/teamapps-ux/src/test/java/org/teamapps/json/JsonDeserializationBenchmark.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -22,36 +22,28 @@
 import com.fasterxml.jackson.databind.JsonNode;
 import com.fasterxml.jackson.databind.ObjectMapper;
 import com.google.common.io.Resources;
-import org.json.simple.JSONObject;
-import org.json.simple.parser.JSONParser;
 import org.junit.Test;
 import org.teamapps.dto.UiCommand;
 
 import java.io.IOException;
 import java.net.URL;
 import java.nio.charset.Charset;
+import java.nio.charset.StandardCharsets;
 
 
 public class JsonDeserializationBenchmark {
 
-	private ObjectMapper teamAppsObjectMapper = TeamAppsObjectMapperFactory.create();
+	private final ObjectMapper teamAppsObjectMapper = TeamAppsObjectMapperFactory.create();
 
 	@Test
 	public void testLowLevelJsonParsingPerformance() throws Exception {
 		String json = readResourceToString("sample.json");
 
 		long startTime;
-		JSONObject[] jsonObjects = new JSONObject[1024];
 		JsonNode[] jsonNodes = new JsonNode[1024];
 		UiCommand[] uiCommands = new UiCommand[1024];
 
 		for (int j = 0; j < 5; j++) {
-			startTime = System.currentTimeMillis();
-			for (int i = 0; i < 1_000; i++) {
-				jsonObjects[i % 1024] = (JSONObject) new JSONParser().parse(json);
-			}
-			System.out.println("Simple: " + (System.currentTimeMillis() - startTime + "ms"));
-
 			startTime = System.currentTimeMillis();
 			for (int i = 0; i < 1_000; i++) {
 				jsonNodes[i % 1024] = teamAppsObjectMapper.readTree(json);
@@ -66,7 +58,6 @@ public void testLowLevelJsonParsingPerformance() throws Exception {
 
 
 		}
-		System.out.println(jsonObjects[0]);
 		System.out.println(jsonNodes[0]);
 		System.out.println(uiCommands[0]);
 	}
@@ -74,7 +65,7 @@ public void testLowLevelJsonParsingPerformance() throws Exception {
 	public static String readResourceToString(String resourceName) {
 		URL url = Resources.getResource(resourceName);
 		try {
-			return Resources.toString(url, Charset.forName("UTF-8"));
+			return Resources.toString(url, StandardCharsets.UTF_8);
 		} catch (IOException e) {
 			throw new RuntimeException(e);
 		}
diff --git a/teamapps-ux/src/test/java/org/teamapps/json/SerializationTest.java b/teamapps-ux/src/test/java/org/teamapps/json/SerializationTest.java
index 5b206525f..19f7e75ab 100644
--- a/teamapps-ux/src/test/java/org/teamapps/json/SerializationTest.java
+++ b/teamapps-ux/src/test/java/org/teamapps/json/SerializationTest.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -23,10 +23,11 @@
 import org.junit.Test;
 import org.teamapps.dto.INIT;
 import org.teamapps.dto.INIT_NOK;
-import org.teamapps.dto.UiComponentReference;
+import org.teamapps.dto.UiClientObjectReference;
 import org.teamapps.dto.UiEvent;
 import org.teamapps.dto.UiMultiLineTextField;
 import org.teamapps.dto.UiObject;
+import org.teamapps.dto.UiSessionClosingReason;
 import org.teamapps.dto.UiWorkSpaceLayout;
 
 public class SerializationTest {
@@ -41,13 +42,13 @@ public void serializeViaJsonSimple() throws Exception {
 
 	@Test
 	public void serializeEnums() throws Exception {
-		INIT_NOK init = new INIT_NOK(INIT_NOK.Reason.SESSION_NOT_FOUND);
+		INIT_NOK init = new INIT_NOK(UiSessionClosingReason.SESSION_NOT_FOUND);
 		System.out.println(teamAppsObjectMapper.writeValueAsString(init));
 	}
 
 	@Test
 	public void serializeCommands() throws Exception {
-		UiWorkSpaceLayout.RefreshViewComponentCommand o = new UiWorkSpaceLayout.RefreshViewComponentCommand("componentId", "viewName", new UiComponentReference("asdf"));
+		UiWorkSpaceLayout.RefreshViewComponentCommand o = new UiWorkSpaceLayout.RefreshViewComponentCommand("componentId", "viewName", new UiClientObjectReference("asdf"));
 		System.out.println(teamAppsObjectMapper.writeValueAsString(o));
 	}
 
diff --git a/teamapps-ux/src/test/java/org/teamapps/testutil/UxTestUtil.java b/teamapps-ux/src/test/java/org/teamapps/testutil/UxTestUtil.java
index 41138d8bd..0fc09540c 100644
--- a/teamapps-ux/src/test/java/org/teamapps/testutil/UxTestUtil.java
+++ b/teamapps-ux/src/test/java/org/teamapps/testutil/UxTestUtil.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,35 +19,50 @@
  */
 package org.teamapps.testutil;
 
-import com.fasterxml.jackson.databind.ObjectMapper;
-import org.jetbrains.annotations.NotNull;
+import jakarta.servlet.http.HttpSession;
+import jakarta.ws.rs.ext.ParamConverterProvider;
 import org.mockito.Mockito;
-import org.teamapps.icons.api.IconTheme;
+import org.teamapps.icons.SessionIconProvider;
 import org.teamapps.server.UxServerContext;
+import org.teamapps.uisession.UiSession;
 import org.teamapps.ux.session.ClientInfo;
-import org.teamapps.ux.session.CommandDispatcher;
-import org.teamapps.ux.session.SimpleSessionContext;
-import org.teamapps.uisession.QualifiedUiSessionId;
+import org.teamapps.ux.session.CurrentSessionContextTestUtil;
+import org.teamapps.ux.session.SessionConfiguration;
+import org.teamapps.ux.session.SessionContext;
+import org.teamapps.ux.session.navigation.Location;
 
 import java.util.Collections;
+import java.util.concurrent.CompletableFuture;
+import java.util.concurrent.Executors;
+
+import static org.teamapps.common.TeamAppsVersion.TEAMAPPS_VERSION;
 
 public class UxTestUtil {
 
-	public static void doWithMockedSessionContext(Runnable runnable) {
-		SimpleSessionContext sessionContext = createDummySessionContext();
-		sessionContext.runWithContext(runnable);
+	public static CompletableFuture<Void> doWithMockedSessionContext(Runnable runnable) {
+		SessionContext sessionContext = createDummySessionContext();
+		return sessionContext.runWithContext(runnable);
 	}
 
-	@NotNull
-	public static SimpleSessionContext createDummySessionContext() {
-		return new SimpleSessionContext(
-				new QualifiedUiSessionId("httpSessionId", "uiSessionId"),
-				new ClientInfo("ip", null, 1024, 768, 1000, 700, "en", false, "Europe/Berlin", 120, Collections.emptyList(), "userAgentString", "", Collections.emptyMap()),
-				Mockito.mock(CommandDispatcher.class),
+	public static SessionContext createDummySessionContext() {
+		final ClientInfo clientInfo = new ClientInfo("ip", 1024, 768, 1000, 700, "en", false, "Europe/Berlin", 120, Collections.emptyList(), "userAgentString", Mockito.mock(Location.class), Collections.emptyMap(), TEAMAPPS_VERSION);
+		return new SessionContext(
+				Mockito.mock(UiSession.class),
+				Executors.newSingleThreadExecutor(),
+				clientInfo, SessionConfiguration.createForClientInfo(clientInfo), Mockito.mock(HttpSession.class),
 				Mockito.mock(UxServerContext.class),
-				Mockito.mock(IconTheme.class),
-				Mockito.mock(ObjectMapper.class)
+				Mockito.mock(SessionIconProvider.class),
+				"",
+				Mockito.mock(ParamConverterProvider.class)
 		);
 	}
 
+	public static void runWithSessionContext(SessionContext sessionContext, Runnable runnable) {
+		CurrentSessionContextTestUtil.set(sessionContext);
+		try {
+			runnable.run();
+		} finally {
+			CurrentSessionContextTestUtil.unset();
+		}
+	}
 }
diff --git a/teamapps-ux/src/test/java/org/teamapps/uisession/CommandBufferTest.java b/teamapps-ux/src/test/java/org/teamapps/uisession/CommandBufferTest.java
deleted file mode 100644
index f45a4054e..000000000
--- a/teamapps-ux/src/test/java/org/teamapps/uisession/CommandBufferTest.java
+++ /dev/null
@@ -1,176 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.uisession;
-
-import org.junit.Assert;
-import org.junit.Test;
-
-import static org.junit.Assert.*;
-
-public class CommandBufferTest {
-
-	@Test
-	public void size() throws Exception {
-		CommandBuffer buffer = new CommandBuffer(3);
-		assertEquals(0, buffer.size());
-		buffer.addCommand(createCmd(1));
-		assertEquals(1, buffer.size());
-		buffer.addCommand(createCmd(2));
-		assertEquals(2, buffer.size());
-		buffer.addCommand(createCmd(3));
-		assertEquals(3, buffer.size());
-		buffer.consumeCommand();
-		buffer.addCommand(createCmd(4));
-		assertEquals(3, buffer.size()); // !!
-		buffer.consumeCommand();
-		buffer.addCommand(createCmd(5));
-		assertEquals(3, buffer.size()); // !!
-	}
-
-	@Test
-	public void consumeCommand() throws Exception {
-		CommandBuffer buffer = new CommandBuffer(2);
-
-		buffer.addCommand(createCmd(1));
-		assertEquals(1, buffer.consumeCommand().getId());
-		assertNull(buffer.consumeCommand());
-
-		buffer.addCommand(createCmd(2));
-		buffer.addCommand(createCmd(3));
-		assertEquals(2, buffer.consumeCommand().getId());
-		assertEquals(3, buffer.consumeCommand().getId());
-		assertNull(buffer.consumeCommand());
-	}
-
-	@Test
-	public void throwsExceptionIfCommandsNextConsumableCommandGetsDeletedDueToBufferOverflow() throws Exception {
-		CommandBuffer buffer = new CommandBuffer(3);
-		buffer.addCommand(createCmd(1));
-		buffer.addCommand(createCmd(2));
-		buffer.addCommand(createCmd(3));
-		buffer.consumeCommand();
-		buffer.addCommand(createCmd(4));
-		try {
-			buffer.addCommand(createCmd(5));
-		} catch (UnconsumedCommandsOverflowException e) {
-			return;
-		}
-		fail();
-	}
-
-	@Test
-	public void rewindToCommand() throws Exception {
-		CommandBuffer buffer = new CommandBuffer(5);
-		for (int i = 1; i <= 4; i++) {
-			buffer.addCommand(createCmd(i));
-			if (i <= 3) {
-				buffer.consumeCommand();
-			}
-		}
-		assertEquals(4, buffer.size());
-
-		buffer.rewindToCommand(2);
-
-		assertEquals(4, buffer.size());
-		assertEquals(3, buffer.consumeCommand().getId());
-		assertEquals(4, buffer.consumeCommand().getId());
-		assertNull(buffer.consumeCommand());
-	}
-
-	@Test
-	public void rewindToCommand2() throws Exception {
-		CommandBuffer buffer = new CommandBuffer(6);
-		for (int i = 1; i <= 7; i++) {
-			buffer.addCommand(createCmd(i));
-			if (i <= 5) {
-				buffer.consumeCommand();
-			}
-		}
-		assertEquals(6, buffer.size());
-
-		buffer.rewindToCommand(3);
-
-		assertEquals(6, buffer.size());
-		assertEquals(4, buffer.consumeCommand().getId());
-		assertEquals(5, buffer.consumeCommand().getId());
-		assertEquals(6, buffer.consumeCommand().getId());
-		assertEquals(7, buffer.consumeCommand().getId());
-		assertNull(buffer.consumeCommand());
-	}
-
-	@Test
-	public void rewindToCommandWithLastReceivedIsMinusOne() throws Exception {
-		CommandBuffer buffer = new CommandBuffer(6);
-		for (int i = 1; i <= 3; i++) {
-			buffer.addCommand(createCmd(i));
-		}
-
-		assertEquals(true, buffer.rewindToCommand(-1));
-		assertEquals(1, buffer.consumeCommand().getId());
-	}
-
-	@Test
-	public void rewindToCommandWithLastReceivedIsMinusOneFailsIfAlreadyOutOfBuffer() throws Exception {
-		CommandBuffer buffer = new CommandBuffer(6);
-		for (int i = 1; i <= 7; i++) {
-			buffer.addCommand(createCmd(i));
-			if (i <= 2) {
-				buffer.consumeCommand();
-			}
-		}
-		assertEquals(6, buffer.size());
-
-		assertEquals(false, buffer.rewindToCommand(-1));
-	}
-
-	@Test
-	public void purgeTillCommand() throws Exception {
-		CommandBuffer buffer = new CommandBuffer(10);
-
-		for (int i = 1; i <= 15; i++) {
-			buffer.addCommand(createCmd(i));
-			if (i <= 11) {
-				buffer.consumeCommand();
-			}
-		}
-
-		Assert.assertEquals(10, buffer.size());
-
-		buffer.purgeTillCommand(8);
-		Assert.assertEquals(8, buffer.size());
-
-		buffer.purgeTillCommand(10);
-		Assert.assertEquals(6, buffer.size());
-
-		buffer.purgeTillCommand(11);
-		Assert.assertEquals(5, buffer.size());
-
-		buffer.purgeTillCommand(12);
-		Assert.assertEquals("must not purge next consumable command", 4, buffer.size()); 
-
-		buffer.purgeTillCommand(100);
-		Assert.assertEquals("must not purge next consumable command", 4, buffer.size());
-
-	}
-
-	private CMD createCmd(int id) {
-		return new CMD(id, "asdf");
-	}
-}
diff --git a/teamapps-ux/src/test/java/org/teamapps/uisession/commandbuffer/CommandBufferTest.java b/teamapps-ux/src/test/java/org/teamapps/uisession/commandbuffer/CommandBufferTest.java
new file mode 100644
index 000000000..a34ec66aa
--- /dev/null
+++ b/teamapps-ux/src/test/java/org/teamapps/uisession/commandbuffer/CommandBufferTest.java
@@ -0,0 +1,252 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.uisession.commandbuffer;
+
+import org.apache.commons.lang3.StringUtils;
+import org.assertj.core.api.Assertions;
+import org.junit.Assert;
+import org.junit.Test;
+import org.teamapps.uisession.CMD;
+
+import static org.assertj.core.api.Assertions.assertThat;
+import static org.assertj.core.api.Assertions.assertThatThrownBy;
+import static org.junit.Assert.assertEquals;
+import static org.junit.Assert.assertNull;
+
+public class CommandBufferTest {
+
+	@Test
+	public void size() throws Exception {
+		CommandBuffer buffer = new CommandBuffer(3, 1_000_000);
+		assertEquals(0, buffer.getBufferedCommandsCount());
+		buffer.addCommand(createCmd(1));
+		assertEquals(1, buffer.getBufferedCommandsCount());
+		buffer.addCommand(createCmd(2));
+		assertEquals(2, buffer.getBufferedCommandsCount());
+		buffer.addCommand(createCmd(3));
+		assertEquals(3, buffer.getBufferedCommandsCount());
+		buffer.consumeCommand();
+		buffer.addCommand(createCmd(4));
+		assertEquals(3, buffer.getBufferedCommandsCount()); // !!
+		buffer.consumeCommand();
+		buffer.addCommand(createCmd(5));
+		assertEquals(3, buffer.getBufferedCommandsCount()); // !!
+	}
+
+	@Test
+	public void consumeCommand() throws Exception {
+		CommandBuffer buffer = new CommandBuffer(2, 1_000_000);
+
+		buffer.addCommand(createCmd(1));
+		assertEquals(1, buffer.consumeCommand().getId());
+		assertNull(buffer.consumeCommand());
+
+		buffer.addCommand(createCmd(2));
+		buffer.addCommand(createCmd(3));
+		assertEquals(2, buffer.consumeCommand().getId());
+		assertEquals(3, buffer.consumeCommand().getId());
+		assertNull(buffer.consumeCommand());
+	}
+
+	@Test
+	public void throwsExceptionIfCommandsNextConsumableCommandGetsDeletedDueToBufferOverflow() throws Exception {
+		CommandBuffer buffer = new CommandBuffer(3, 1_000_000);
+		buffer.addCommand(createCmd(1));
+		buffer.addCommand(createCmd(2));
+		buffer.addCommand(createCmd(3));
+		buffer.consumeCommand();
+		buffer.addCommand(createCmd(4));
+		assertThatThrownBy(() -> buffer.addCommand(createCmd(5)))
+				.isInstanceOf(CommandBufferLengthOverflowException.class);
+	}
+
+	@Test
+	public void rewindToCommand() throws Exception {
+		CommandBuffer buffer = new CommandBuffer(5, 1_000_000);
+		for (int i = 1; i <= 4; i++) {
+			buffer.addCommand(createCmd(i));
+			if (i <= 3) {
+				buffer.consumeCommand();
+			}
+		}
+		assertEquals(4, buffer.getBufferedCommandsCount());
+
+		buffer.rewindToCommand(2);
+
+		assertEquals(4, buffer.getBufferedCommandsCount());
+		assertEquals(3, buffer.consumeCommand().getId());
+		assertEquals(4, buffer.consumeCommand().getId());
+		assertNull(buffer.consumeCommand());
+	}
+
+	@Test
+	public void rewindToCommand2() throws Exception {
+		CommandBuffer buffer = new CommandBuffer(6, 1_000_000);
+		for (int i = 1; i <= 7; i++) {
+			buffer.addCommand(createCmd(i));
+			if (i <= 5) {
+				buffer.consumeCommand();
+			}
+		}
+		assertEquals(6, buffer.getBufferedCommandsCount());
+
+		buffer.rewindToCommand(3);
+
+		assertEquals(6, buffer.getBufferedCommandsCount());
+		assertEquals(4, buffer.consumeCommand().getId());
+		assertEquals(5, buffer.consumeCommand().getId());
+		assertEquals(6, buffer.consumeCommand().getId());
+		assertEquals(7, buffer.consumeCommand().getId());
+		assertNull(buffer.consumeCommand());
+	}
+
+	@Test
+	public void rewindToCommandWithLastReceivedIsMinusOne() throws Exception {
+		CommandBuffer buffer = new CommandBuffer(6, 1_000_000);
+		for (int i = 1; i <= 3; i++) {
+			buffer.addCommand(createCmd(i));
+		}
+
+		assertEquals(true, buffer.rewindToCommand(-1));
+		assertEquals(1, buffer.consumeCommand().getId());
+	}
+
+	@Test
+	public void rewindToCommandWithLastReceivedIsMinusOneFailsIfAlreadyOutOfBuffer() throws Exception {
+		CommandBuffer buffer = new CommandBuffer(6, 1_000_000);
+		for (int i = 1; i <= 7; i++) {
+			buffer.addCommand(createCmd(i));
+			if (i <= 2) {
+				buffer.consumeCommand();
+			}
+		}
+		assertEquals(6, buffer.getBufferedCommandsCount());
+
+		assertEquals(false, buffer.rewindToCommand(-1));
+	}
+
+	@Test
+	public void purgeTillCommand() throws Exception {
+		CommandBuffer buffer = new CommandBuffer(10, 1_000_000);
+
+		for (int i = 1; i <= 15; i++) {
+			buffer.addCommand(createCmd(i));
+			if (i <= 11) {
+				buffer.consumeCommand();
+			}
+		}
+
+		Assert.assertEquals(10, buffer.getBufferedCommandsCount());
+
+		buffer.purgeTillCommand(8);
+		Assert.assertEquals(8, buffer.getBufferedCommandsCount());
+
+		buffer.purgeTillCommand(10);
+		Assert.assertEquals(6, buffer.getBufferedCommandsCount());
+
+		buffer.purgeTillCommand(11);
+		Assert.assertEquals(5, buffer.getBufferedCommandsCount());
+
+		buffer.purgeTillCommand(12);
+		Assert.assertEquals("must not purge next consumable command", 4, buffer.getBufferedCommandsCount());
+
+		buffer.purgeTillCommand(100);
+		Assert.assertEquals("must not purge next consumable command", 4, buffer.getBufferedCommandsCount());
+	}
+
+	@Test
+	public void rewindToCommandWhenTailGreaterThanNextConsumableAndRewindedCommandIsLeftFromNextConsumable()
+			throws CommandBufferException {
+		CommandBuffer buffer = new CommandBuffer(10, 1_000_000);
+
+		for (int i = 0; i < 15; i++) {
+			buffer.addCommand(createCmd(i));
+			buffer.consumeCommand();
+		}
+		buffer.addCommand(createCmd(15));
+
+		buffer.rewindToCommand(13);
+
+		Assertions.assertThat(buffer.consumeCommand().getId()).isEqualTo(14);
+	}
+
+	@Test
+	public void shouldThrowExceptionWhenMaxTotalSizeIsReached() throws CommandBufferException {
+		CommandBuffer buffer = new CommandBuffer(100, 1_000);
+
+		for (int i = 0; i < 10; i++) {
+			buffer.addCommand(createCmd(i, 100));
+		}
+
+		assertThatThrownBy(() -> buffer.addCommand(createCmd(10, 1)))
+				.isInstanceOf(CommandBufferSizeOverflowException.class);
+	}
+
+	@Test
+	public void shouldPurgeACommandBeforeThrowingExceptionWhenMaxTotalSizeIsReached() throws CommandBufferException {
+		CommandBuffer buffer = new CommandBuffer(100, 1_000);
+
+		for (int i = 0; i < 10; i++) {
+			buffer.addCommand(createCmd(i, 100));
+		}
+
+		assertThat(buffer.getBufferedCommandsCount()).isEqualTo(10);
+
+		for (int i = 10; i < 20; i++) {
+			buffer.consumeCommand();
+			buffer.addCommand(createCmd(10, 100)); // does not throw an exception!
+		}
+
+		assertThat(buffer.getBufferedCommandsCount()).isEqualTo(10);
+
+		assertThatThrownBy(() -> buffer.addCommand(createCmd(11, 1)))
+				.isInstanceOf(CommandBufferSizeOverflowException.class);
+	}
+
+	@Test
+	public void shouldPurgeMultipleCommandsBeforeThrowingExceptionWhenMaxTotalSizeIsReached() throws CommandBufferException {
+		CommandBuffer buffer = new CommandBuffer(100, 1_000);
+
+		for (int i = 0; i < 10; i++) {
+			buffer.addCommand(createCmd(i, 100));
+		}
+
+		for (int i = 0; i < 5; i++) {
+			buffer.consumeCommand();
+		}
+
+		assertThat(buffer.getBufferedCommandsCount()).isEqualTo(10);
+
+		buffer.addCommand(createCmd(10, 500)); // fills up the buffer
+
+		assertThat(buffer.getBufferedCommandsCount()).isEqualTo(6);
+
+		assertThatThrownBy(() -> buffer.addCommand(createCmd(11, 1)))
+				.isInstanceOf(CommandBufferSizeOverflowException.class);
+	}
+
+	private CMD createCmd(int id) {
+		return createCmd(id, 10);
+	}
+
+	private CMD createCmd(int id, int length) {
+		return new CMD(id, StringUtils.repeat('x', length));
+	}
+}
diff --git a/teamapps-ux/src/test/java/org/teamapps/util/threading/CompletableFutureChainSequentialExecutorFactoryTest.java b/teamapps-ux/src/test/java/org/teamapps/util/threading/CompletableFutureChainSequentialExecutorFactoryTest.java
new file mode 100644
index 000000000..02ffa9e5b
--- /dev/null
+++ b/teamapps-ux/src/test/java/org/teamapps/util/threading/CompletableFutureChainSequentialExecutorFactoryTest.java
@@ -0,0 +1,120 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.util.threading;
+
+import it.unimi.dsi.fastutil.ints.IntArrayList;
+import it.unimi.dsi.fastutil.ints.IntList;
+import org.assertj.core.api.Assertions;
+import org.junit.Assert;
+import org.junit.Test;
+import org.teamapps.common.util.ExceptionUtil;
+
+import java.util.concurrent.CompletableFuture;
+import java.util.concurrent.CyclicBarrier;
+import java.util.concurrent.ExecutorService;
+import java.util.stream.IntStream;
+
+public class CompletableFutureChainSequentialExecutorFactoryTest {
+
+	@Test
+	public void executionOrderOneKey() throws Exception {
+		int numberOfExecutions = 1000;
+
+		CompletableFutureChainSequentialExecutorFactory executorFactory = new CompletableFutureChainSequentialExecutorFactory(2);
+
+		IntList executionOrderCheckingList = new IntArrayList();
+
+		CyclicBarrier barrier = new CyclicBarrier(2);
+		ExecutorService executor = executorFactory.createExecutor();
+		for (int i = 0; i < numberOfExecutions; i++) {
+			final int iFinal = i;
+			executor.execute(() -> {
+				executionOrderCheckingList.add(iFinal);
+				if (iFinal == numberOfExecutions - 1) {
+					ExceptionUtil.softenExceptions(() -> barrier.await());
+				}
+			});
+		}
+
+		barrier.await();
+		checkIntListContents(executionOrderCheckingList, numberOfExecutions);
+	}
+
+	@Test
+	public void executionOrderMultipleKey() throws Exception {
+		int numberOfExecutions = 1000;
+
+		CompletableFutureChainSequentialExecutorFactory executor = new CompletableFutureChainSequentialExecutorFactory(2);
+
+		IntList executionOrderCheckingList1 = new IntArrayList();
+		IntList executionOrderCheckingList2 = new IntArrayList();
+		IntList executionOrderCheckingList3 = new IntArrayList();
+
+		CompletableFuture<Boolean> lastFuture1 = null;
+		CompletableFuture<Boolean> lastFuture2 = null;
+		CompletableFuture<Boolean> lastFuture3 = null;
+		ExecutorService executor1 = executor.createExecutor();
+		ExecutorService executor2 = executor.createExecutor();
+		ExecutorService executor3 = executor.createExecutor();
+		for (int i = 0; i < numberOfExecutions; i++) {
+			final int iFinal = i;
+			lastFuture1 = CompletableFuture.supplyAsync(() -> executionOrderCheckingList1.add(iFinal), executor1);
+			lastFuture2 = CompletableFuture.supplyAsync(() -> executionOrderCheckingList2.add(iFinal), executor2);
+			lastFuture3 = CompletableFuture.supplyAsync(() -> executionOrderCheckingList3.add(iFinal), executor3);
+		}
+
+		CompletableFuture.allOf(
+				lastFuture1.thenRun(() -> {
+					checkIntListContents(executionOrderCheckingList1, numberOfExecutions);
+				}),
+				lastFuture2.thenRun(() -> {
+					checkIntListContents(executionOrderCheckingList2, numberOfExecutions);
+				}),
+				lastFuture3.thenRun(() -> {
+					checkIntListContents(executionOrderCheckingList3, numberOfExecutions);
+				})
+		)
+				.get();
+	}
+
+	@Test
+	public void executionContinuesAfterException() throws Exception {
+		CompletableFutureChainSequentialExecutorFactory executor = new CompletableFutureChainSequentialExecutorFactory(2);
+
+		executor.createExecutor().execute(() -> {
+			throw new RuntimeException();
+		});
+
+		CyclicBarrier barrier = new CyclicBarrier(2);
+		boolean[] secondWasExecuted = new boolean[]{false};
+		executor.createExecutor().execute(() -> {
+			secondWasExecuted[0] = true;
+			ExceptionUtil.softenExceptions(() -> barrier.await());
+		});
+
+		barrier.await();
+		Assert.assertTrue(secondWasExecuted[0]);
+	}
+
+	private void checkIntListContents(IntList executionOrderCheckingList, int rangeMax) {
+		Assertions.assertThat(executionOrderCheckingList.toIntArray())
+				.containsExactly(IntStream.range(0, rangeMax).toArray());
+	}
+}
diff --git a/teamapps-ux/src/test/java/org/teamapps/util/threading/SequentialExecutionPerformanceTest.java b/teamapps-ux/src/test/java/org/teamapps/util/threading/SequentialExecutionPerformanceTest.java
new file mode 100644
index 000000000..4ed548334
--- /dev/null
+++ b/teamapps-ux/src/test/java/org/teamapps/util/threading/SequentialExecutionPerformanceTest.java
@@ -0,0 +1,72 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.util.threading;
+
+import org.junit.Ignore;
+import org.junit.Test;
+
+import java.util.List;
+import java.util.concurrent.BrokenBarrierException;
+import java.util.concurrent.CyclicBarrier;
+import java.util.concurrent.ExecutorService;
+import java.util.concurrent.Executors;
+import java.util.concurrent.atomic.AtomicInteger;
+import java.util.stream.Collectors;
+import java.util.stream.IntStream;
+
+public class SequentialExecutionPerformanceTest {
+
+	@Test
+	@Ignore
+	public void testA() throws Exception {
+		SequentialExecutorFactory factory = name -> Executors.newSingleThreadExecutor();
+
+		int numberOfThreads = 10_000;
+
+		// will fail on OSX!
+		List<ExecutorService> executors = IntStream.range(0, numberOfThreads)
+				.mapToObj(i -> factory.createExecutor("" + i))
+				.collect(Collectors.toList());
+
+		for (int i = 0; i < numberOfThreads; i++) {
+			AtomicInteger atomicInteger = new AtomicInteger();
+			for (int j = 0; j < 1000; j++) {
+				executors.get(i).execute(atomicInteger::incrementAndGet);
+			}
+		}
+
+		CyclicBarrier cyclicBarrier = new CyclicBarrier(numberOfThreads + 1);
+		for (int i = 0; i < numberOfThreads; i++) {
+			executors.get(i).execute(() -> {
+				try {
+					cyclicBarrier.await();
+				} catch (InterruptedException e) {
+					e.printStackTrace();
+				} catch (BrokenBarrierException e) {
+					e.printStackTrace();
+				}
+			});
+		}
+
+		cyclicBarrier.await();
+		System.out.println("done");
+	}
+
+}
diff --git a/teamapps-ux/src/test/java/org/teamapps/ux/component/calendar/CalendarViewModeTest.java b/teamapps-ux/src/test/java/org/teamapps/ux/component/calendar/CalendarViewModeTest.java
index 785546dc4..387eb3d71 100644
--- a/teamapps-ux/src/test/java/org/teamapps/ux/component/calendar/CalendarViewModeTest.java
+++ b/teamapps-ux/src/test/java/org/teamapps/ux/component/calendar/CalendarViewModeTest.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/test/java/org/teamapps/ux/component/field/validator/FieldValidatorTest.java b/teamapps-ux/src/test/java/org/teamapps/ux/component/field/validator/FieldValidatorTest.java
new file mode 100644
index 000000000..797e563bc
--- /dev/null
+++ b/teamapps-ux/src/test/java/org/teamapps/ux/component/field/validator/FieldValidatorTest.java
@@ -0,0 +1,42 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.field.validator;
+
+import org.assertj.core.api.Assertions;
+import org.junit.Test;
+
+public class FieldValidatorTest {
+
+	@Test
+	public void fromPredicate() {
+		FieldValidator<String> validator = FieldValidator.fromPredicate(s -> s.length() >= 3, "Length has to be at least 3");
+
+		Assertions.assertThat(validator.validate("a")).extracting(m -> m.getMessage()).containsExactly("Length has to be at least 3");
+		Assertions.assertThat(validator.validate("abc")).isEmpty();
+	}
+
+	@Test
+	public void fromErrorMessageFunction() {
+		FieldValidator<String> validator = FieldValidator.fromErrorMessageFunction(s -> s.length() < 3 ? "Length has to be at least 3" : null);
+
+		Assertions.assertThat(validator.validate("a")).extracting(m -> m.getMessage()).containsExactly("Length has to be at least 3");
+		Assertions.assertThat(validator.validate("abc")).isEmpty();
+	}
+}
diff --git a/teamapps-ux/src/test/java/org/teamapps/ux/component/field/validator/MultiFieldValidatorTest.java b/teamapps-ux/src/test/java/org/teamapps/ux/component/field/validator/MultiFieldValidatorTest.java
new file mode 100644
index 000000000..d4dc890d8
--- /dev/null
+++ b/teamapps-ux/src/test/java/org/teamapps/ux/component/field/validator/MultiFieldValidatorTest.java
@@ -0,0 +1,215 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.field.validator;
+
+import org.junit.Test;
+import org.mockito.Mockito;
+import org.teamapps.event.Event;
+import org.teamapps.ux.component.field.FieldMessage;
+import org.teamapps.ux.component.field.TextField;
+import org.teamapps.ux.session.CurrentSessionContext;
+import org.teamapps.ux.session.SessionContext;
+import sun.misc.Unsafe;
+
+import java.lang.reflect.Field;
+import java.lang.reflect.Method;
+import java.util.List;
+import java.util.concurrent.CompletableFuture;
+
+import static org.assertj.core.api.Assertions.assertThat;
+
+public class MultiFieldValidatorTest {
+
+    public static final String ERROR_MESSAGE = "some error";
+
+    @Test
+    public void testManualTriggeringDoesNotTriggerWhenFieldValueChanges() throws Exception {
+        doWithFakeSessionContext(() -> {
+            TextField field1 = new TextField();
+            TextField field2 = new TextField();
+
+            CustomValidator customValidatorMock = Mockito.mock(CustomValidator.class);
+            Mockito.when(customValidatorMock.validate()).thenReturn(List.of(new FieldMessage(FieldMessage.Severity.ERROR, ERROR_MESSAGE)));
+
+            MultiFieldValidator validator = new MultiFieldValidator(customValidatorMock, field1, field2);
+
+            field1.onValueChanged.fire("asdf");
+
+            verifyFieldMessages(field1.getFieldMessages());
+            verifyFieldMessages(field2.getFieldMessages());
+        });
+    }
+
+    @Test
+    public void testManualTriggeringDoesNotPileUpMessages() throws Exception {
+        doWithFakeSessionContext(() -> {
+            TextField field1 = new TextField();
+            TextField field2 = new TextField();
+
+            CustomValidator customValidatorMock = Mockito.mock(CustomValidator.class);
+            Mockito.when(customValidatorMock.validate()).thenReturn(List.of(new FieldMessage(FieldMessage.Severity.ERROR, ERROR_MESSAGE)));
+
+            MultiFieldValidator validator = new MultiFieldValidator(customValidatorMock, field1, field2);
+
+            List<FieldMessage> messages = validator.validate();
+            verifyFieldMessages(messages, ERROR_MESSAGE);
+            verifyFieldMessages(field1.getFieldMessages(), ERROR_MESSAGE);
+            verifyFieldMessages(field2.getFieldMessages(), ERROR_MESSAGE);
+
+            messages = validator.validate();
+            verifyFieldMessages(messages, ERROR_MESSAGE);
+            verifyFieldMessages(field1.getFieldMessages(), ERROR_MESSAGE);
+            verifyFieldMessages(field2.getFieldMessages(), ERROR_MESSAGE);
+        });
+    }
+
+    @Test
+    public void testManualTriggeringClearsMessages() throws Exception {
+        doWithFakeSessionContext(() -> {
+            TextField field1 = new TextField();
+            TextField field2 = new TextField();
+
+            CustomValidator customValidatorMock = Mockito.mock(CustomValidator.class);
+            Mockito.when(customValidatorMock.validate()).thenReturn(List.of(new FieldMessage(FieldMessage.Severity.ERROR, ERROR_MESSAGE)));
+
+            MultiFieldValidator validator = new MultiFieldValidator(customValidatorMock, field1, field2);
+
+            List<FieldMessage> messages = validator.validate();
+            verifyFieldMessages(messages, ERROR_MESSAGE);
+            verifyFieldMessages(field1.getFieldMessages(), ERROR_MESSAGE);
+            verifyFieldMessages(field2.getFieldMessages(), ERROR_MESSAGE);
+
+            Mockito.when(customValidatorMock.validate()).thenReturn(List.of());
+
+            messages = validator.validate();
+            verifyFieldMessages(messages);
+            verifyFieldMessages(field1.getFieldMessages());
+            verifyFieldMessages(field2.getFieldMessages());
+        });
+    }
+
+    @Test
+    public void testTriggeringOnChange() throws Exception {
+        doWithFakeSessionContext(() -> {
+            TextField field1 = new TextField();
+            TextField field2 = new TextField();
+
+            CustomValidator customValidatorMock = Mockito.mock(CustomValidator.class);
+            Mockito.when(customValidatorMock.validate()).thenReturn(List.of(new FieldMessage(FieldMessage.Severity.ERROR, ERROR_MESSAGE)));
+
+            MultiFieldValidator validator = new MultiFieldValidator(customValidatorMock, MultiFieldValidator.TriggeringPolicy.ON_FIELD_CHANGE, field1, field2);
+
+            field1.onValueChanged.fire("asdf");
+
+            verifyFieldMessages(field1.getFieldMessages(), ERROR_MESSAGE);
+            verifyFieldMessages(field2.getFieldMessages(), ERROR_MESSAGE);
+        });
+    }
+
+    @Test
+    public void testManualWithAutoClearRmovesMessages() throws Exception {
+        doWithFakeSessionContext(() -> {
+            TextField field1 = new TextField();
+            TextField field2 = new TextField();
+
+            CustomValidator customValidatorMock = Mockito.mock(CustomValidator.class);
+            Mockito.when(customValidatorMock.validate()).thenReturn(List.of(new FieldMessage(FieldMessage.Severity.ERROR, ERROR_MESSAGE)));
+
+            MultiFieldValidator validator = new MultiFieldValidator(customValidatorMock, MultiFieldValidator.TriggeringPolicy.MANUALLY_WITH_AUTOCLEAR, field1, field2);
+
+            field1.onValueChanged.fire("asdf");
+
+            List<FieldMessage> messages = validator.validate();
+            verifyFieldMessages(messages, ERROR_MESSAGE);
+            verifyFieldMessages(field1.getFieldMessages(), ERROR_MESSAGE);
+            verifyFieldMessages(field2.getFieldMessages(), ERROR_MESSAGE);
+
+            field2.onValueChanged.fire("qwerty");
+
+            assertThat(field1.getFieldMessages().isEmpty());
+            assertThat(field2.getFieldMessages().isEmpty());
+        });
+    }
+
+    @Test
+    public void testManualWithAutoClearReAddsMessageOnSecondValidation() throws Exception {
+        doWithFakeSessionContext(() -> {
+            TextField field1 = new TextField();
+            TextField field2 = new TextField();
+
+            CustomValidator customValidatorMock = Mockito.mock(CustomValidator.class);
+            Mockito.when(customValidatorMock.validate()).thenReturn(List.of(new FieldMessage(FieldMessage.Severity.ERROR, ERROR_MESSAGE)));
+
+            MultiFieldValidator validator = new MultiFieldValidator(customValidatorMock, MultiFieldValidator.TriggeringPolicy.MANUALLY_WITH_AUTOCLEAR, field1, field2);
+
+            field1.onValueChanged.fire("asdf");
+
+            List<FieldMessage> messages = validator.validate();
+            verifyFieldMessages(messages, ERROR_MESSAGE);
+            verifyFieldMessages(field1.getFieldMessages(), ERROR_MESSAGE);
+            verifyFieldMessages(field2.getFieldMessages(), ERROR_MESSAGE);
+
+            field2.onValueChanged.fire("qwerty");
+
+            assertThat(field1.getFieldMessages().isEmpty());
+            assertThat(field2.getFieldMessages().isEmpty());
+
+            List<FieldMessage> validation2 = validator.validate();
+            verifyFieldMessages(field1.getFieldMessages(), ERROR_MESSAGE);
+            verifyFieldMessages(field2.getFieldMessages(), ERROR_MESSAGE);
+        });
+    }
+
+    private void verifyFieldMessages(List<FieldMessage> fieldMessages, String... errorMessages) {
+        assertThat(fieldMessages)
+                .extracting(FieldMessage::getMessage)
+                .containsExactly(errorMessages);
+    }
+
+    private void doWithFakeSessionContext(RunnableWithException r) throws Exception {
+        Method set = CurrentSessionContext.class.getDeclaredMethod("set", SessionContext.class);
+        set.setAccessible(true);
+        SessionContext sessionContextMock = Mockito.mock(SessionContext.class);
+        unsafelySetOnDestroyed(sessionContextMock, new Event<>());
+        Mockito.when(sessionContextMock.runWithContext(Mockito.any(Runnable.class))).then(invocation -> {
+            ((Runnable) invocation.getArguments()[0]).run();
+            return CompletableFuture.completedFuture(null);
+        });
+        set.invoke(null, sessionContextMock);
+        try {
+            r.run();
+        } finally {
+            set.invoke(null, new Object[]{null});
+        }
+    }
+
+    public interface RunnableWithException {
+        void run() throws Exception;
+    }
+
+    private static void unsafelySetOnDestroyed(Object object, Object value) throws NoSuchFieldException, IllegalAccessException {
+        final Field unsafeField = Unsafe.class.getDeclaredField("theUnsafe");
+        unsafeField.setAccessible(true);
+        final Unsafe unsafe = (Unsafe) unsafeField.get(null);
+        Field f = object.getClass().getField("onDestroyed");
+        unsafe.putObject(object, unsafe.objectFieldOffset(f), value);
+    }
+
+}
diff --git a/teamapps-ux/src/test/java/org/teamapps/ux/component/grid/bootstrap/BootstrapishGridLayoutTest.java b/teamapps-ux/src/test/java/org/teamapps/ux/component/grid/bootstrap/BootstrapishGridLayoutTest.java
index 004227ef5..4c3d7575b 100644
--- a/teamapps-ux/src/test/java/org/teamapps/ux/component/grid/bootstrap/BootstrapishGridLayoutTest.java
+++ b/teamapps-ux/src/test/java/org/teamapps/ux/component/grid/bootstrap/BootstrapishGridLayoutTest.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/test/java/org/teamapps/ux/component/timegraph/AggregatingTimeGraphModelTest.java b/teamapps-ux/src/test/java/org/teamapps/ux/component/timegraph/AggregatingTimeGraphModelTest.java
new file mode 100644
index 000000000..03dd4a369
--- /dev/null
+++ b/teamapps-ux/src/test/java/org/teamapps/ux/component/timegraph/AggregatingTimeGraphModelTest.java
@@ -0,0 +1,144 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.timegraph;
+
+import org.assertj.core.api.Assertions;
+import org.junit.Before;
+import org.junit.Test;
+import org.teamapps.ux.component.timegraph.datapoints.LineGraphDataPoint;
+import org.teamapps.ux.component.timegraph.datapoints.ListLineGraphData;
+import org.teamapps.ux.component.timegraph.model.AggregatingLineGraphModel;
+import org.teamapps.ux.component.timegraph.model.AggregationType;
+
+import java.time.ZoneOffset;
+import java.util.Arrays;
+import java.util.List;
+import java.util.stream.Collectors;
+
+public class AggregatingTimeGraphModelTest {
+
+	private AggregatingLineGraphModel model;
+
+	@Before
+	public void setUp() throws Exception {
+		model = new AggregatingLineGraphModel();
+		model.setGraphData(new ListLineGraphData(Arrays.asList(
+				new LineGraphDataPoint(100, 1),
+				new LineGraphDataPoint(200, 11),
+				new LineGraphDataPoint(300, 2),
+				new LineGraphDataPoint(405, 0),
+				new LineGraphDataPoint(500, 13),
+				new LineGraphDataPoint(600, 12),
+				new LineGraphDataPoint(700, 3)
+		), new Interval(100, 800)));
+	}
+
+	@Test
+	public void testFirstValue() throws Exception {
+		model.setAggregationPolicy(AggregationType.FIRST_VALUE);
+		model.setAddDataPointBeforeAndAfterQueryResult(false); // for testing
+
+		List<LineGraphDataPoint> dataPoints = model.getData(TimePartitioningUnit.YEAR, ZoneOffset.UTC, new Interval(0, 1000), new Interval(0, 1000)).streamDataPoints().collect(Collectors.toList());
+		Assertions.assertThat(dataPoints).containsExactly(new LineGraphDataPoint(0, 1));
+
+		dataPoints = model.getData(TimePartitioningUnit.MILLISECOND_200, ZoneOffset.UTC, new Interval(200, 350), new Interval(200, 350)).streamDataPoints().collect(Collectors.toList());
+		Assertions.assertThat(dataPoints).containsExactly(new LineGraphDataPoint(200, 11));
+
+		dataPoints = model.getData(TimePartitioningUnit.MILLISECOND_200, ZoneOffset.UTC, new Interval(300, 401), new Interval(300, 401)).streamDataPoints().collect(Collectors.toList());
+		Assertions.assertThat(dataPoints).containsExactly(new LineGraphDataPoint(200, 11), new LineGraphDataPoint(400, 0));
+
+		dataPoints = model.getData(TimePartitioningUnit.MILLISECOND_200, ZoneOffset.UTC, new Interval(500, 601), new Interval(500, 601)).streamDataPoints().collect(Collectors.toList());
+		Assertions.assertThat(dataPoints).containsExactly(new LineGraphDataPoint(400, 0), new LineGraphDataPoint(600, 12));
+	}
+
+	@Test
+	public void testMin() throws Exception {
+		model.setAggregationPolicy(AggregationType.MIN);
+		model.setAddDataPointBeforeAndAfterQueryResult(false); // for testing
+
+		List<LineGraphDataPoint> dataPoints = model.getData(TimePartitioningUnit.YEAR, ZoneOffset.UTC, new Interval(0, 1000), new Interval(0, 1000)).streamDataPoints().collect(Collectors.toList());
+		Assertions.assertThat(dataPoints).containsExactly(new LineGraphDataPoint(0, 0));
+
+		dataPoints = model.getData(TimePartitioningUnit.MILLISECOND_200, ZoneOffset.UTC, new Interval(200, 350), new Interval(200, 350)).streamDataPoints().collect(Collectors.toList());
+		Assertions.assertThat(dataPoints).containsExactly(new LineGraphDataPoint(200, 2));
+
+		dataPoints = model.getData(TimePartitioningUnit.MILLISECOND_200, ZoneOffset.UTC, new Interval(300, 401), new Interval(300, 401)).streamDataPoints().collect(Collectors.toList());
+		Assertions.assertThat(dataPoints).containsExactly(new LineGraphDataPoint(200, 2), new LineGraphDataPoint(400, 0));
+
+		dataPoints = model.getData(TimePartitioningUnit.MILLISECOND_200, ZoneOffset.UTC, new Interval(500, 601), new Interval(500, 601)).streamDataPoints().collect(Collectors.toList());
+		Assertions.assertThat(dataPoints).containsExactly(new LineGraphDataPoint(400, 0), new LineGraphDataPoint(600, 3));
+	}
+
+	@Test
+	public void testMax() throws Exception {
+		model.setAggregationPolicy(AggregationType.MAX);
+		model.setAddDataPointBeforeAndAfterQueryResult(false); // for testing
+
+		List<LineGraphDataPoint> dataPoints = model.getData(TimePartitioningUnit.YEAR, ZoneOffset.UTC, new Interval(0, 1000), new Interval(0, 1000)).streamDataPoints().collect(Collectors.toList());
+		Assertions.assertThat(dataPoints).containsExactly(new LineGraphDataPoint(0, 13));
+
+		dataPoints = model.getData(TimePartitioningUnit.MILLISECOND_200, ZoneOffset.UTC, new Interval(400, 550), new Interval(400, 550)).streamDataPoints().collect(Collectors.toList());
+		Assertions.assertThat(dataPoints).containsExactly(new LineGraphDataPoint(400, 13));
+
+		dataPoints = model.getData(TimePartitioningUnit.MILLISECOND_200, ZoneOffset.UTC, new Interval(300, 500), new Interval(300, 500)).streamDataPoints().collect(Collectors.toList());
+		Assertions.assertThat(dataPoints).containsExactly(new LineGraphDataPoint(200, 11), new LineGraphDataPoint(400, 13));
+
+		dataPoints = model.getData(TimePartitioningUnit.MILLISECOND_200, ZoneOffset.UTC, new Interval(500, 700), new Interval(500, 700)).streamDataPoints().collect(Collectors.toList());
+		Assertions.assertThat(dataPoints).containsExactly(new LineGraphDataPoint(400, 13), new LineGraphDataPoint(600, 12));
+	}
+
+	@Test
+	public void testAverage() throws Exception {
+		model.setAggregationPolicy(AggregationType.AVERAGE);
+		model.setAddDataPointBeforeAndAfterQueryResult(false); // for testing
+
+		List<LineGraphDataPoint> dataPoints = model.getData(TimePartitioningUnit.YEAR, ZoneOffset.UTC, new Interval(0, 1000), new Interval(0, 1000)).streamDataPoints().collect(Collectors.toList());
+		Assertions.assertThat(dataPoints).containsExactly(new LineGraphDataPoint(0, 6));
+
+		dataPoints = model.getData(TimePartitioningUnit.MILLISECOND_200, ZoneOffset.UTC, new Interval(400, 550), new Interval(400, 550)).streamDataPoints().collect(Collectors.toList());
+		Assertions.assertThat(dataPoints).containsExactly(new LineGraphDataPoint(400, 6.5));
+
+		dataPoints = model.getData(TimePartitioningUnit.MILLISECOND_200, ZoneOffset.UTC, new Interval(300, 401), new Interval(300, 401)).streamDataPoints().collect(Collectors.toList());
+		Assertions.assertThat(dataPoints).containsExactly(new LineGraphDataPoint(200, 6.5), new LineGraphDataPoint(400, 6.5));
+
+		dataPoints = model.getData(TimePartitioningUnit.MILLISECOND_200, ZoneOffset.UTC, new Interval(500, 601), new Interval(500, 601)).streamDataPoints().collect(Collectors.toList());
+		Assertions.assertThat(dataPoints).containsExactly(new LineGraphDataPoint(400, 6.5), new LineGraphDataPoint(600, 7.5));
+	}
+
+	@Test
+	public void testAddDataPointBeforeAndAfterQueryResult() throws Exception {
+		model.setAggregationPolicy(AggregationType.FIRST_VALUE);
+		model.setAddDataPointBeforeAndAfterQueryResult(true);
+
+		List<LineGraphDataPoint> dataPoints = model.getData(TimePartitioningUnit.MILLISECOND_200, ZoneOffset.UTC, new Interval(450, 550), new Interval(450, 550)).streamDataPoints().collect(Collectors.toList());
+		Assertions.assertThat(dataPoints).containsExactly(
+				new LineGraphDataPoint(200, 11),
+				new LineGraphDataPoint(400, 0),
+				new LineGraphDataPoint(600, 12)
+		);
+
+		dataPoints = model.getData(TimePartitioningUnit.MILLISECOND_200, ZoneOffset.UTC, new Interval(400, 600), new Interval(400, 600)).streamDataPoints().collect(Collectors.toList());
+		Assertions.assertThat(dataPoints).containsExactly(
+				new LineGraphDataPoint(200, 11),
+				new LineGraphDataPoint(400, 0),
+				new LineGraphDataPoint(600, 12)
+		);
+	}
+}
diff --git a/teamapps-ux/src/test/java/org/teamapps/ux/component/timegraph/partitioning/TimePartitionUnitTest.java b/teamapps-ux/src/test/java/org/teamapps/ux/component/timegraph/partitioning/TimePartitioningUnitTest.java
similarity index 88%
rename from teamapps-ux/src/test/java/org/teamapps/ux/component/timegraph/partitioning/TimePartitionUnitTest.java
rename to teamapps-ux/src/test/java/org/teamapps/ux/component/timegraph/partitioning/TimePartitioningUnitTest.java
index 9cbb3a40e..513109ecd 100644
--- a/teamapps-ux/src/test/java/org/teamapps/ux/component/timegraph/partitioning/TimePartitionUnitTest.java
+++ b/teamapps-ux/src/test/java/org/teamapps/ux/component/timegraph/partitioning/TimePartitioningUnitTest.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -25,45 +25,45 @@
 import java.time.ZoneOffset;
 import java.time.ZonedDateTime;
 
-import static org.teamapps.ux.component.timegraph.partitioning.TimePartitionUnit.*;
+import static org.teamapps.ux.component.timegraph.TimePartitioningUnit.*;
 
-public class TimePartitionUnitTest {
+public class TimePartitioningUnitTest {
 
 	private static final ZonedDateTime TEST_TIME_UNALIGNED = ZonedDateTime.of(2020, 7, 17, 17, 47, 47, 777777777, ZoneOffset.UTC);
 	private static final ZonedDateTime TEST_TIME_INCREMENT = ZonedDateTime.of(2020, 12, 31, 23, 59, 59, 999000000, ZoneOffset.UTC);
 	private static final ZonedDateTime TEST_TIME_DECREMENT = ZonedDateTime.of(2020, 01, 01, 00, 00, 00, 0, ZoneOffset.UTC);
 
-	@Test public void testGetPartition_MILLISECOND() throws Exception { Assert.assertEquals(ZonedDateTime.parse("2020-07-17T17:47:47.777Z"), MILLISECOND.getPartition(TEST_TIME_UNALIGNED));  }
-	@Test public void testGetPartition_MILLISECOND_2() throws Exception { Assert.assertEquals(ZonedDateTime.parse("2020-07-17T17:47:47.776Z"), MILLISECOND_2.getPartition(TEST_TIME_UNALIGNED));  }
-	@Test public void testGetPartition_MILLISECOND_5() throws Exception { Assert.assertEquals(ZonedDateTime.parse("2020-07-17T17:47:47.775Z"), MILLISECOND_5.getPartition(TEST_TIME_UNALIGNED));  }
-	@Test public void testGetPartition_MILLISECOND_10() throws Exception { Assert.assertEquals(ZonedDateTime.parse("2020-07-17T17:47:47.770Z"), MILLISECOND_10.getPartition(TEST_TIME_UNALIGNED));  }
-	@Test public void testGetPartition_MILLISECOND_20() throws Exception { Assert.assertEquals(ZonedDateTime.parse("2020-07-17T17:47:47.760Z"), MILLISECOND_20.getPartition(TEST_TIME_UNALIGNED));  }
-	@Test public void testGetPartition_MILLISECOND_50() throws Exception { Assert.assertEquals(ZonedDateTime.parse("2020-07-17T17:47:47.750Z"), MILLISECOND_50.getPartition(TEST_TIME_UNALIGNED));  }
-	@Test public void testGetPartition_MILLISECOND_100() throws Exception { Assert.assertEquals(ZonedDateTime.parse("2020-07-17T17:47:47.700Z"), MILLISECOND_100.getPartition(TEST_TIME_UNALIGNED));  }
-	@Test public void testGetPartition_MILLISECOND_200() throws Exception { Assert.assertEquals(ZonedDateTime.parse("2020-07-17T17:47:47.600Z"), MILLISECOND_200.getPartition(TEST_TIME_UNALIGNED));  }
-	@Test public void testGetPartition_MILLISECOND_500() throws Exception { Assert.assertEquals(ZonedDateTime.parse("2020-07-17T17:47:47.500Z"), MILLISECOND_500.getPartition(TEST_TIME_UNALIGNED));  }
-	@Test public void testGetPartition_SECOND() throws Exception { Assert.assertEquals(ZonedDateTime.parse("2020-07-17T17:47:47.000Z"), SECOND.getPartition(TEST_TIME_UNALIGNED));  }
-	@Test public void testGetPartition_SECONDS_2() throws Exception { Assert.assertEquals(ZonedDateTime.parse("2020-07-17T17:47:46.000Z"), SECONDS_2.getPartition(TEST_TIME_UNALIGNED));  }
-	@Test public void testGetPartition_SECONDS_5() throws Exception { Assert.assertEquals(ZonedDateTime.parse("2020-07-17T17:47:45.000Z"), SECONDS_5.getPartition(TEST_TIME_UNALIGNED));  }
-	@Test public void testGetPartition_SECONDS_10() throws Exception { Assert.assertEquals(ZonedDateTime.parse("2020-07-17T17:47:40.000Z"), SECONDS_10.getPartition(TEST_TIME_UNALIGNED));  }
-	@Test public void testGetPartition_SECONDS_15() throws Exception { Assert.assertEquals(ZonedDateTime.parse("2020-07-17T17:47:45.000Z"), SECONDS_15.getPartition(TEST_TIME_UNALIGNED));  }
-	@Test public void testGetPartition_SECONDS_30() throws Exception { Assert.assertEquals(ZonedDateTime.parse("2020-07-17T17:47:30.000Z"), SECONDS_30.getPartition(TEST_TIME_UNALIGNED));  }
-	@Test public void testGetPartition_MINUTE() throws Exception { Assert.assertEquals(ZonedDateTime.parse("2020-07-17T17:47:00.000Z"), MINUTE.getPartition(TEST_TIME_UNALIGNED));  }
-	@Test public void testGetPartition_MINUTES_2() throws Exception { Assert.assertEquals(ZonedDateTime.parse("2020-07-17T17:46:00.000Z"), MINUTES_2.getPartition(TEST_TIME_UNALIGNED));  }
-	@Test public void testGetPartition_MINUTES_5() throws Exception { Assert.assertEquals(ZonedDateTime.parse("2020-07-17T17:45:00.000Z"), MINUTES_5.getPartition(TEST_TIME_UNALIGNED));  }
-	@Test public void testGetPartition_MINUTES_10() throws Exception { Assert.assertEquals(ZonedDateTime.parse("2020-07-17T17:40:00.000Z"), MINUTES_10.getPartition(TEST_TIME_UNALIGNED));  }
-	@Test public void testGetPartition_MINUTES_15() throws Exception { Assert.assertEquals(ZonedDateTime.parse("2020-07-17T17:45:00.000Z"), MINUTES_15.getPartition(TEST_TIME_UNALIGNED));  }
-	@Test public void testGetPartition_MINUTES_30() throws Exception { Assert.assertEquals(ZonedDateTime.parse("2020-07-17T17:30:00.000Z"), MINUTES_30.getPartition(TEST_TIME_UNALIGNED));  }
-	@Test public void testGetPartition_HOUR() throws Exception { Assert.assertEquals(ZonedDateTime.parse("2020-07-17T17:00:00.000Z"), HOUR.getPartition(TEST_TIME_UNALIGNED));  }
-	@Test public void testGetPartition_HOURS_6() throws Exception { Assert.assertEquals(ZonedDateTime.parse("2020-07-17T12:00:00.000Z"), HOURS_6.getPartition(TEST_TIME_UNALIGNED));  }
-	@Test public void testGetPartition_HOURS_12() throws Exception { Assert.assertEquals(ZonedDateTime.parse("2020-07-17T12:00:00.000Z"), HOURS_12.getPartition(TEST_TIME_UNALIGNED));  }
-	@Test public void testGetPartition_DAY() throws Exception { Assert.assertEquals(ZonedDateTime.parse("2020-07-17T00:00:00.000Z"), DAY.getPartition(TEST_TIME_UNALIGNED));  }
-	@Test public void testGetPartition_WEEK_SUNDAY() throws Exception { Assert.assertEquals(ZonedDateTime.parse("2020-07-12T00:00:00.000Z"), WEEK_SUNDAY.getPartition(TEST_TIME_UNALIGNED));  }
-	@Test public void testGetPartition_WEEK_MONDAY() throws Exception { Assert.assertEquals(ZonedDateTime.parse("2020-07-13T00:00:00.000Z"), WEEK_MONDAY.getPartition(TEST_TIME_UNALIGNED));  }
-	@Test public void testGetPartition_MONTH() throws Exception { Assert.assertEquals(ZonedDateTime.parse("2020-07-01T00:00:00.000Z"), MONTH.getPartition(TEST_TIME_UNALIGNED));  }
-	@Test public void testGetPartition_QUARTER() throws Exception { Assert.assertEquals(ZonedDateTime.parse("2020-07-01T00:00:00.000Z"), QUARTER.getPartition(TEST_TIME_UNALIGNED));  }
-	@Test public void testGetPartition_HALF_YEAR() throws Exception { Assert.assertEquals(ZonedDateTime.parse("2020-07-01T00:00:00.000Z"), HALF_YEAR.getPartition(TEST_TIME_UNALIGNED));  }
-	@Test public void testGetPartition_YEAR() throws Exception { Assert.assertEquals(ZonedDateTime.parse("2020-01-01T00:00:00.000Z"), YEAR.getPartition(TEST_TIME_UNALIGNED));  }
+	@Test public void testGetPartition_MILLISECOND() throws Exception { Assert.assertEquals(ZonedDateTime.parse("2020-07-17T17:47:47.777Z"), MILLISECOND.getPartitionStart(TEST_TIME_UNALIGNED));  }
+	@Test public void testGetPartition_MILLISECOND_2() throws Exception { Assert.assertEquals(ZonedDateTime.parse("2020-07-17T17:47:47.776Z"), MILLISECOND_2.getPartitionStart(TEST_TIME_UNALIGNED));  }
+	@Test public void testGetPartition_MILLISECOND_5() throws Exception { Assert.assertEquals(ZonedDateTime.parse("2020-07-17T17:47:47.775Z"), MILLISECOND_5.getPartitionStart(TEST_TIME_UNALIGNED));  }
+	@Test public void testGetPartition_MILLISECOND_10() throws Exception { Assert.assertEquals(ZonedDateTime.parse("2020-07-17T17:47:47.770Z"), MILLISECOND_10.getPartitionStart(TEST_TIME_UNALIGNED));  }
+	@Test public void testGetPartition_MILLISECOND_20() throws Exception { Assert.assertEquals(ZonedDateTime.parse("2020-07-17T17:47:47.760Z"), MILLISECOND_20.getPartitionStart(TEST_TIME_UNALIGNED));  }
+	@Test public void testGetPartition_MILLISECOND_50() throws Exception { Assert.assertEquals(ZonedDateTime.parse("2020-07-17T17:47:47.750Z"), MILLISECOND_50.getPartitionStart(TEST_TIME_UNALIGNED));  }
+	@Test public void testGetPartition_MILLISECOND_100() throws Exception { Assert.assertEquals(ZonedDateTime.parse("2020-07-17T17:47:47.700Z"), MILLISECOND_100.getPartitionStart(TEST_TIME_UNALIGNED));  }
+	@Test public void testGetPartition_MILLISECOND_200() throws Exception { Assert.assertEquals(ZonedDateTime.parse("2020-07-17T17:47:47.600Z"), MILLISECOND_200.getPartitionStart(TEST_TIME_UNALIGNED));  }
+	@Test public void testGetPartition_MILLISECOND_500() throws Exception { Assert.assertEquals(ZonedDateTime.parse("2020-07-17T17:47:47.500Z"), MILLISECOND_500.getPartitionStart(TEST_TIME_UNALIGNED));  }
+	@Test public void testGetPartition_SECOND() throws Exception { Assert.assertEquals(ZonedDateTime.parse("2020-07-17T17:47:47.000Z"), SECOND.getPartitionStart(TEST_TIME_UNALIGNED));  }
+	@Test public void testGetPartition_SECONDS_2() throws Exception { Assert.assertEquals(ZonedDateTime.parse("2020-07-17T17:47:46.000Z"), SECONDS_2.getPartitionStart(TEST_TIME_UNALIGNED));  }
+	@Test public void testGetPartition_SECONDS_5() throws Exception { Assert.assertEquals(ZonedDateTime.parse("2020-07-17T17:47:45.000Z"), SECONDS_5.getPartitionStart(TEST_TIME_UNALIGNED));  }
+	@Test public void testGetPartition_SECONDS_10() throws Exception { Assert.assertEquals(ZonedDateTime.parse("2020-07-17T17:47:40.000Z"), SECONDS_10.getPartitionStart(TEST_TIME_UNALIGNED));  }
+	@Test public void testGetPartition_SECONDS_15() throws Exception { Assert.assertEquals(ZonedDateTime.parse("2020-07-17T17:47:45.000Z"), SECONDS_15.getPartitionStart(TEST_TIME_UNALIGNED));  }
+	@Test public void testGetPartition_SECONDS_30() throws Exception { Assert.assertEquals(ZonedDateTime.parse("2020-07-17T17:47:30.000Z"), SECONDS_30.getPartitionStart(TEST_TIME_UNALIGNED));  }
+	@Test public void testGetPartition_MINUTE() throws Exception { Assert.assertEquals(ZonedDateTime.parse("2020-07-17T17:47:00.000Z"), MINUTE.getPartitionStart(TEST_TIME_UNALIGNED));  }
+	@Test public void testGetPartition_MINUTES_2() throws Exception { Assert.assertEquals(ZonedDateTime.parse("2020-07-17T17:46:00.000Z"), MINUTES_2.getPartitionStart(TEST_TIME_UNALIGNED));  }
+	@Test public void testGetPartition_MINUTES_5() throws Exception { Assert.assertEquals(ZonedDateTime.parse("2020-07-17T17:45:00.000Z"), MINUTES_5.getPartitionStart(TEST_TIME_UNALIGNED));  }
+	@Test public void testGetPartition_MINUTES_10() throws Exception { Assert.assertEquals(ZonedDateTime.parse("2020-07-17T17:40:00.000Z"), MINUTES_10.getPartitionStart(TEST_TIME_UNALIGNED));  }
+	@Test public void testGetPartition_MINUTES_15() throws Exception { Assert.assertEquals(ZonedDateTime.parse("2020-07-17T17:45:00.000Z"), MINUTES_15.getPartitionStart(TEST_TIME_UNALIGNED));  }
+	@Test public void testGetPartition_MINUTES_30() throws Exception { Assert.assertEquals(ZonedDateTime.parse("2020-07-17T17:30:00.000Z"), MINUTES_30.getPartitionStart(TEST_TIME_UNALIGNED));  }
+	@Test public void testGetPartition_HOUR() throws Exception { Assert.assertEquals(ZonedDateTime.parse("2020-07-17T17:00:00.000Z"), HOUR.getPartitionStart(TEST_TIME_UNALIGNED));  }
+	@Test public void testGetPartition_HOURS_6() throws Exception { Assert.assertEquals(ZonedDateTime.parse("2020-07-17T12:00:00.000Z"), HOURS_6.getPartitionStart(TEST_TIME_UNALIGNED));  }
+	@Test public void testGetPartition_HOURS_12() throws Exception { Assert.assertEquals(ZonedDateTime.parse("2020-07-17T12:00:00.000Z"), HOURS_12.getPartitionStart(TEST_TIME_UNALIGNED));  }
+	@Test public void testGetPartition_DAY() throws Exception { Assert.assertEquals(ZonedDateTime.parse("2020-07-17T00:00:00.000Z"), DAY.getPartitionStart(TEST_TIME_UNALIGNED));  }
+	@Test public void testGetPartition_WEEK_SUNDAY() throws Exception { Assert.assertEquals(ZonedDateTime.parse("2020-07-12T00:00:00.000Z"), WEEK_SUNDAY.getPartitionStart(TEST_TIME_UNALIGNED));  }
+	@Test public void testGetPartition_WEEK_MONDAY() throws Exception { Assert.assertEquals(ZonedDateTime.parse("2020-07-13T00:00:00.000Z"), WEEK_MONDAY.getPartitionStart(TEST_TIME_UNALIGNED));  }
+	@Test public void testGetPartition_MONTH() throws Exception { Assert.assertEquals(ZonedDateTime.parse("2020-07-01T00:00:00.000Z"), MONTH.getPartitionStart(TEST_TIME_UNALIGNED));  }
+	@Test public void testGetPartition_QUARTER() throws Exception { Assert.assertEquals(ZonedDateTime.parse("2020-07-01T00:00:00.000Z"), QUARTER.getPartitionStart(TEST_TIME_UNALIGNED));  }
+	@Test public void testGetPartition_HALF_YEAR() throws Exception { Assert.assertEquals(ZonedDateTime.parse("2020-07-01T00:00:00.000Z"), HALF_YEAR.getPartitionStart(TEST_TIME_UNALIGNED));  }
+	@Test public void testGetPartition_YEAR() throws Exception { Assert.assertEquals(ZonedDateTime.parse("2020-01-01T00:00:00.000Z"), YEAR.getPartitionStart(TEST_TIME_UNALIGNED));  }
 
 	@Test public void testIncrement_MILLISECOND() throws Exception { Assert.assertEquals(ZonedDateTime.parse("2021-01-01T00:00:00.000Z"), MILLISECOND.increment(TEST_TIME_INCREMENT));  }
 	@Test public void testIncrement_MILLISECOND_2() throws Exception { Assert.assertEquals(ZonedDateTime.parse("2021-01-01T00:00:00.001Z"), MILLISECOND_2.increment(TEST_TIME_INCREMENT));  }
diff --git a/teamapps-ux/src/test/java/org/teamapps/ux/component/webrtc/apiclient/MediaSoupV3ResClientTest.java b/teamapps-ux/src/test/java/org/teamapps/ux/component/webrtc/apiclient/MediaSoupV3ResClientTest.java
new file mode 100644
index 000000000..cd87f196b
--- /dev/null
+++ b/teamapps-ux/src/test/java/org/teamapps/ux/component/webrtc/apiclient/MediaSoupV3ResClientTest.java
@@ -0,0 +1,64 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.component.webrtc.apiclient;
+
+import com.fasterxml.jackson.databind.ObjectMapper;
+import org.junit.Assert;
+import org.junit.Test;
+
+import java.util.ArrayList;
+import java.util.List;
+import java.util.Set;
+import java.util.concurrent.CompletableFuture;
+import java.util.concurrent.ExecutionException;
+import java.util.concurrent.TimeUnit;
+import java.util.concurrent.TimeoutException;
+
+import static org.teamapps.ux.component.webrtc.apiclient.MediaKind.AUDIO;
+import static org.teamapps.ux.component.webrtc.apiclient.MediaKind.VIDEO;
+
+public class MediaSoupV3ResClientTest {
+
+	public static void main(String[] args) throws InterruptedException, ExecutionException, TimeoutException {
+		MediaSoupV3RestClient client = new MediaSoupV3RestClient("http://127.0.0.1:8723", "asdf");
+
+		List<CompletableFuture<?>> futures = new ArrayList<>();
+
+		futures.add(client.startRecording(0, "myStream", Set.of(AUDIO, VIDEO)).thenAccept(r -> System.out.println("Response: " + r)));
+		futures.add(client.startRecording(0, "myStream").thenAccept(r -> System.out.println("Response: " + r)));
+		futures.add(client.stopRecording(0, "myStream").thenAccept(r -> System.out.println("Response: " + r)));
+		futures.add(client.getWorkerLoad(0).thenAccept(r -> System.out.println("Response: " + r)));
+		futures.add(client.getNumberOfWorkers().thenAccept(r -> System.out.println("Response: " + r)));
+		futures.add(client.getRecordedStreamUuids().thenAccept(r -> System.out.println("Response: " + r)));
+		futures.add(client.getStreamRecordingsForUuid("myStream").thenAccept(r -> System.out.println("Response: " + r)));
+		futures.add(client.startFileStreaming(1, new StreamFileRequestBuilder("myFileStream", Set.of(AUDIO, VIDEO), "http://localhost:8081/resources/asdf.mp4", false).build()));
+		futures.add(client.stopFileStreaming(1, "myFileStream"));
+
+		CompletableFuture.allOf(futures.toArray(CompletableFuture[]::new))
+				.get(10, TimeUnit.SECONDS);
+		System.exit(0);
+	}
+
+	@Test
+	public void testSerialization() throws Exception {
+		Assert.assertEquals("{\"stream\":\"x\"}", new ObjectMapper().writeValueAsString(new StreamData("x")));
+	}
+
+}
diff --git a/teamapps-ux/src/test/java/org/teamapps/ux/i18n/RankedTranslationProviderTest.java b/teamapps-ux/src/test/java/org/teamapps/ux/i18n/RankedTranslationProviderTest.java
new file mode 100644
index 000000000..7f0688c93
--- /dev/null
+++ b/teamapps-ux/src/test/java/org/teamapps/ux/i18n/RankedTranslationProviderTest.java
@@ -0,0 +1,66 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.i18n;
+
+import org.junit.Test;
+
+import java.util.Collection;
+import java.util.List;
+import java.util.Locale;
+import java.util.MissingResourceException;
+
+import static org.assertj.core.api.Assertions.assertThat;
+import static org.assertj.core.api.Assertions.assertThatThrownBy;
+
+
+public class RankedTranslationProviderTest {
+
+	@Test
+	public void shouldDelegate() {
+		final RankedTranslationProvider provider = new RankedTranslationProvider(
+				new ResourceBundleTranslationProvider("translations/Translations"),
+				new TranslationProvider() {
+					@Override
+					public String getTranslation(String key, Locale locale) {
+						return "fallback " + key;
+					}
+
+					@Override
+					public Collection<String> getKeys(Locale locale) {
+						return List.of();
+					}
+				}
+		);
+
+		assertThat(provider.getTranslation("allLanguages", Locale.GERMAN)).isEqualTo("alle Sprachen");
+		assertThat(provider.getTranslation("asdf", Locale.GERMAN)).isEqualTo("fallback asdf");
+	}
+
+	@Test
+	public void shouldThrowMissingResourceExceptionIfKeyNotPresentInAnyDelegates() {
+		final RankedTranslationProvider provider = new RankedTranslationProvider(
+				new ResourceBundleTranslationProvider("translations/Translations"),
+				new ResourceBundleTranslationProvider("translations/Translations")
+		);
+
+		assertThatThrownBy(() -> provider.getTranslation("nonExisting", Locale.GERMAN))
+				.isInstanceOf(MissingResourceException.class);
+	}
+}
diff --git a/teamapps-ux/src/test/java/org/teamapps/ux/i18n/ResourceBundleTranslationProviderTest.java b/teamapps-ux/src/test/java/org/teamapps/ux/i18n/ResourceBundleTranslationProviderTest.java
new file mode 100644
index 000000000..23294541e
--- /dev/null
+++ b/teamapps-ux/src/test/java/org/teamapps/ux/i18n/ResourceBundleTranslationProviderTest.java
@@ -0,0 +1,70 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.i18n;
+
+import org.assertj.core.api.Assertions;
+import org.junit.Test;
+
+import java.util.Locale;
+import java.util.MissingResourceException;
+
+public class ResourceBundleTranslationProviderTest {
+
+	@Test
+	public void shouldReturnAvailableTranslations() throws Exception {
+		var provider = new ResourceBundleTranslationProvider("translations/Translations", Locale.GERMAN);
+
+		Assertions.assertThat(provider.getTranslation("allLanguages", Locale.GERMAN)).isEqualTo("alle Sprachen");
+		Assertions.assertThat(provider.getTranslation("allLanguages", Locale.ENGLISH)).isEqualTo("all languages");
+		Assertions.assertThat(provider.getTranslation("allLanguages", Locale.FRENCH)).isEqualTo("toutes les langues");
+	}
+
+	@Test
+	public void shouldFallbackToDefaultLocaleIfLocaleNotPresent() throws Exception {
+		var provider = new ResourceBundleTranslationProvider(
+				"translations/Translations",
+				Locale.ENGLISH
+		);
+
+		Assertions.assertThat(provider.getTranslation("allLanguages", Locale.ITALIAN)).isEqualTo("all languages");
+	}
+
+	@Test
+	public void shouldFallbackToDefaultLocaleIfKeyNotPresentInLocale() throws Exception {
+		var provider = new ResourceBundleTranslationProvider(
+				"translations/Translations",
+				Locale.ENGLISH
+		);
+		//todo this test fails on maven only
+		//Assertions.assertThat(provider.getTranslation("enOnly", Locale.GERMAN)).isEqualTo("english only");
+	}
+
+	@Test
+	public void shouldThrowIfTranslationNotPresent() throws Exception {
+		var provider = new ResourceBundleTranslationProvider(
+				"translations/Translations",
+				Locale.ENGLISH
+		);
+
+		Assertions.assertThatThrownBy(() -> provider.getTranslation("asdf", Locale.GERMAN))
+				.isInstanceOf(MissingResourceException.class);
+	}
+
+}
diff --git a/teamapps-ux/src/test/java/org/teamapps/ux/resource/ClassPathResourceTest.java b/teamapps-ux/src/test/java/org/teamapps/ux/resource/ClassPathResourceTest.java
new file mode 100644
index 000000000..301eef3cb
--- /dev/null
+++ b/teamapps-ux/src/test/java/org/teamapps/ux/resource/ClassPathResourceTest.java
@@ -0,0 +1,34 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.resource;
+
+import org.junit.Test;
+
+import static org.junit.Assert.assertEquals;
+
+public class ClassPathResourceTest {
+	@Test
+	public void testGetName() {
+		assertEquals("someName", new ClassPathResource("/my/package/someName").getName());
+		assertEquals("someName.dfi.sdfj", new ClassPathResource("/my/package/someName.dfi.sdfj").getName());
+		assertEquals("someName", new ClassPathResource("someName").getName());
+		assertEquals("someName.dfi.sdfj", new ClassPathResource("someName.dfi.sdfj").getName());
+	}
+}
diff --git a/teamapps-ux/src/test/java/org/teamapps/ux/resource/FileResourceTest.java b/teamapps-ux/src/test/java/org/teamapps/ux/resource/FileResourceTest.java
index ae63a11b1..6e8bf43dd 100644
--- a/teamapps-ux/src/test/java/org/teamapps/ux/resource/FileResourceTest.java
+++ b/teamapps-ux/src/test/java/org/teamapps/ux/resource/FileResourceTest.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/teamapps-ux/src/test/java/org/teamapps/ux/resource/ClassPathResourceProviderTest.java b/teamapps-ux/src/test/java/org/teamapps/ux/servlet/resourceprovider/ClassPathResourceProviderTest.java
similarity index 93%
rename from teamapps-ux/src/test/java/org/teamapps/ux/resource/ClassPathResourceProviderTest.java
rename to teamapps-ux/src/test/java/org/teamapps/ux/servlet/resourceprovider/ClassPathResourceProviderTest.java
index 709e59083..2300eb2a3 100644
--- a/teamapps-ux/src/test/java/org/teamapps/ux/resource/ClassPathResourceProviderTest.java
+++ b/teamapps-ux/src/test/java/org/teamapps/ux/servlet/resourceprovider/ClassPathResourceProviderTest.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,7 +17,7 @@
  * limitations under the License.
  * =========================LICENSE_END==================================
  */
-package org.teamapps.ux.resource;
+package org.teamapps.ux.servlet.resourceprovider;
 
 import org.junit.Test;
 
diff --git a/teamapps-ux/src/test/java/org/teamapps/ux/session/CurrentSessionContextTest.java b/teamapps-ux/src/test/java/org/teamapps/ux/session/CurrentSessionContextTest.java
deleted file mode 100644
index 5aa1694b9..000000000
--- a/teamapps-ux/src/test/java/org/teamapps/ux/session/CurrentSessionContextTest.java
+++ /dev/null
@@ -1,59 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * TeamApps
- * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
- * ---
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * =========================LICENSE_END==================================
- */
-package org.teamapps.ux.session;
-
-import org.junit.Assert;
-import org.junit.Test;
-import org.teamapps.testutil.UxTestUtil;
-
-public class CurrentSessionContextTest {
-
-	@Test
-	public void test() throws Exception {
-		SimpleSessionContext c1 = UxTestUtil.createDummySessionContext();
-		SimpleSessionContext c2 = UxTestUtil.createDummySessionContext();
-
-		Assert.assertNull(CurrentSessionContext.getOrNull());
-		CurrentSessionContext.pushContext(c1);
-		Assert.assertEquals(c1, CurrentSessionContext.getOrNull());
-		Assert.assertEquals(c1, CurrentSessionContext.get());
-		CurrentSessionContext.pushContext(c1);
-		Assert.assertEquals(c1, CurrentSessionContext.getOrNull());
-		Assert.assertEquals(c1, CurrentSessionContext.get());
-		CurrentSessionContext.pushContext(c2);
-		Assert.assertEquals(c2, CurrentSessionContext.getOrNull());
-		Assert.assertEquals(c2, CurrentSessionContext.get());
-		CurrentSessionContext.pushContext(c1);
-		Assert.assertEquals(c1, CurrentSessionContext.getOrNull());
-		Assert.assertEquals(c1, CurrentSessionContext.get());
-
-		CurrentSessionContext.popContext();
-		Assert.assertEquals(c2, CurrentSessionContext.getOrNull());
-		Assert.assertEquals(c2, CurrentSessionContext.get());
-		CurrentSessionContext.popContext();
-		Assert.assertEquals(c1, CurrentSessionContext.getOrNull());
-		Assert.assertEquals(c1, CurrentSessionContext.get());
-		CurrentSessionContext.popContext();
-		Assert.assertEquals(c1, CurrentSessionContext.getOrNull());
-		Assert.assertEquals(c1, CurrentSessionContext.get());
-		CurrentSessionContext.popContext();
-		Assert.assertNull(CurrentSessionContext.getOrNull());
-	}
-}
diff --git a/teamapps-ux/src/main/java/org/teamapps/ux/session/CommandDispatcher.java b/teamapps-ux/src/test/java/org/teamapps/ux/session/CurrentSessionContextTestUtil.java
similarity index 74%
rename from teamapps-ux/src/main/java/org/teamapps/ux/session/CommandDispatcher.java
rename to teamapps-ux/src/test/java/org/teamapps/ux/session/CurrentSessionContextTestUtil.java
index 8aaa94350..2be6cb2bd 100644
--- a/teamapps-ux/src/main/java/org/teamapps/ux/session/CommandDispatcher.java
+++ b/teamapps-ux/src/test/java/org/teamapps/ux/session/CurrentSessionContextTestUtil.java
@@ -2,7 +2,7 @@
  * ========================LICENSE_START=================================
  * TeamApps
  * ---
- * Copyright (C) 2014 - 2019 TeamApps.org
+ * Copyright (C) 2014 - 2026 TeamApps.org
  * ---
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,16 +19,14 @@
  */
 package org.teamapps.ux.session;
 
-import org.teamapps.dto.UiCommand;
+public class CurrentSessionContextTestUtil {
 
-import java.util.function.Consumer;
+	public static void set(SessionContext sessionContext) {
+		CurrentSessionContext.set(sessionContext);
+	}
 
-public interface CommandDispatcher {
-
-	<T> void queueCommand(UiCommand<T> command, Consumer<T> resultCallback);
-
-	void flushCommands();
-
-	void close();
+	public static void unset() {
+		CurrentSessionContext.unset();
+	}
 
 }
diff --git a/teamapps-ux/src/test/java/org/teamapps/ux/session/ExecutionDecoratorStackTest.java b/teamapps-ux/src/test/java/org/teamapps/ux/session/ExecutionDecoratorStackTest.java
new file mode 100644
index 000000000..10ec2fdf1
--- /dev/null
+++ b/teamapps-ux/src/test/java/org/teamapps/ux/session/ExecutionDecoratorStackTest.java
@@ -0,0 +1,85 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.session;
+
+import org.assertj.core.api.Assertions;
+import org.junit.Test;
+
+import java.util.ArrayList;
+import java.util.List;
+
+public class ExecutionDecoratorStackTest {
+
+	@Test
+	public void createWrappedRunnable() {
+		ExecutionDecoratorStack stack = new ExecutionDecoratorStack();
+
+		final List<String> invocationTraces = new ArrayList<>();
+
+		ExecutionDecorator decorator1 = createDecorator(invocationTraces, "before 1", "after 1");
+		ExecutionDecorator decorator2 = createDecorator(invocationTraces, "before 2", "after 2");
+		ExecutionDecorator decorator3 = createDecorator(invocationTraces, "before 3", "after 3");
+
+		stack.addOuterDecorator(decorator1);
+		stack.addOuterDecorator(decorator2);
+		stack.addOuterDecorator(decorator3);
+
+		stack.createWrappedRunnable(() -> invocationTraces.add("actual execution"))
+				.run();
+
+		Assertions.assertThat(invocationTraces).containsExactly(
+				"before 3", "before 2", "before 1",
+				"actual execution",
+				"after 1", "after 2", "after 3"
+		);
+	}
+
+	@Test
+	public void createWrappedRunnableAppendingInnerDecorator() {
+		ExecutionDecoratorStack stack = new ExecutionDecoratorStack();
+
+		final List<String> invocationTraces = new ArrayList<>();
+
+		ExecutionDecorator decorator1 = createDecorator(invocationTraces, "before 1", "after 1");
+		ExecutionDecorator decorator2 = createDecorator(invocationTraces, "before 2", "after 2");
+		ExecutionDecorator decorator3 = createDecorator(invocationTraces, "before 3", "after 3");
+
+		stack.addOuterDecorator(decorator1);
+		stack.addOuterDecorator(decorator2);
+		stack.addInnerDecorator(decorator3);
+
+		stack.createWrappedRunnable(() -> invocationTraces.add("actual execution"))
+				.run();
+
+		Assertions.assertThat(invocationTraces).containsExactly(
+				"before 2", "before 1", "before 3",
+				"actual execution",
+				"after 3", "after 1", "after 2"
+		);
+	}
+
+	private ExecutionDecorator createDecorator(List<String> invocationTraces, String s, String s2) {
+		return runnable -> {
+			invocationTraces.add(s);
+			runnable.run();
+			invocationTraces.add(s2);
+		};
+	}
+}
diff --git a/teamapps-ux/src/test/java/org/teamapps/ux/session/SessionContextResourceManagerTest.java b/teamapps-ux/src/test/java/org/teamapps/ux/session/SessionContextResourceManagerTest.java
new file mode 100644
index 000000000..c642a88e2
--- /dev/null
+++ b/teamapps-ux/src/test/java/org/teamapps/ux/session/SessionContextResourceManagerTest.java
@@ -0,0 +1,54 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.session;
+
+import org.assertj.core.api.Assertions;
+import org.junit.Test;
+import org.teamapps.ux.resource.FileResource;
+
+import java.io.File;
+
+public class SessionContextResourceManagerTest {
+
+	@Test
+	public void shouldCache() {
+		SessionContextResourceManager manager = new SessionContextResourceManager("ui1");
+
+		String resourceLink1 = manager.createResourceLink(new FileResource(new File("asdf.b")), null);
+		String resourceLink2 = manager.createResourceLink(new FileResource(new File("asdf.b")), null);
+		String resourceLink3 = manager.createResourceLink(new FileResource(new File("222.b")), null);
+
+		Assertions.assertThat(resourceLink1).isEqualTo(resourceLink2);
+		Assertions.assertThat(resourceLink3).isNotEqualTo(resourceLink2);
+	}
+
+	@Test
+	public void shouldCacheUsingUniqueIdentifier() {
+		SessionContextResourceManager manager = new SessionContextResourceManager("ui1");
+
+		String resourceLink1 = manager.createResourceLink(new FileResource(new File("asdf.b")), "uid1");
+		String resourceLink2 = manager.createResourceLink(new FileResource(new File("999.b")), "uid1");
+		String resourceLink3 = manager.createResourceLink(new FileResource(new File("asdf.b")), "uuid2");
+
+		Assertions.assertThat(resourceLink1).isEqualTo(resourceLink2);
+		Assertions.assertThat(resourceLink3).isNotEqualTo(resourceLink1);
+	}
+
+}
diff --git a/teamapps-ux/src/test/java/org/teamapps/ux/session/navigation/AnnotationBasedRouteHandlerFactoryTest.java b/teamapps-ux/src/test/java/org/teamapps/ux/session/navigation/AnnotationBasedRouteHandlerFactoryTest.java
new file mode 100644
index 000000000..540e7d3c8
--- /dev/null
+++ b/teamapps-ux/src/test/java/org/teamapps/ux/session/navigation/AnnotationBasedRouteHandlerFactoryTest.java
@@ -0,0 +1,134 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.session.navigation;
+
+import org.junit.Test;
+import org.teamapps.ux.session.navigation.annotation.PathParameter;
+import org.teamapps.ux.session.navigation.annotation.QueryParameter;
+import org.teamapps.ux.session.navigation.annotation.RoutingPath;
+
+import java.util.List;
+import java.util.Map;
+import java.util.concurrent.atomic.AtomicBoolean;
+import java.util.concurrent.atomic.AtomicInteger;
+
+import static org.assertj.core.api.Assertions.assertThat;
+
+public class AnnotationBasedRouteHandlerFactoryTest {
+
+	@Test
+	public void annotatedMethod() {
+		AtomicBoolean wasInvoked = new AtomicBoolean();
+		AnnotationBasedRouteHandlerFactory factory = new AnnotationBasedRouteHandlerFactory(new ParameterConverterProvider());
+
+		List<AnnotationBasedRouteHandlerFactory.AnnotationBasedRouteHandler> routers = factory.createRouteHandlers(new Object() {
+
+			@RoutingPath("/apps/{appName}/item/{itemId}")
+			public void myMethod(
+					@PathParameter("appName") String appName,
+					@PathParameter("itemId") Integer id,
+					@QueryParameter("flag") Boolean flag) {
+				wasInvoked.set(true);
+				assertThat(appName).isEqualTo("myApp");
+				assertThat(id).isEqualTo(123);
+				assertThat(flag).isTrue();
+			}
+		});
+
+		assertThat(routers).extracting(r -> r.getPathTemplate()).containsExactlyInAnyOrder("/apps/{appName}/item/{itemId}");
+
+		routers.get(0).handle("/apps/myApp/item/123", Map.of("appName", "myApp", "itemId", "123"), Map.of("flag", "true"));
+
+		assertThat(wasInvoked).isTrue();
+	}
+
+	@Test
+	public void multipleRoutingPaths() {
+		AtomicInteger invocationCount = new AtomicInteger();
+		AnnotationBasedRouteHandlerFactory factory = new AnnotationBasedRouteHandlerFactory(new ParameterConverterProvider());
+
+		List<AnnotationBasedRouteHandlerFactory.AnnotationBasedRouteHandler> routers = factory.createRouteHandlers(new Object() {
+
+			@RoutingPath("/apps/{appName}/item/{itemId}")
+			@RoutingPath("/x/{itemId}")
+			public void myMethod(
+					@PathParameter("appName") String appName,
+					@PathParameter("itemId") Integer id,
+					@QueryParameter("flag") Boolean flag) {
+				invocationCount.incrementAndGet();
+				if (flag) {
+					assertThat(appName).isEqualTo("myApp");
+					assertThat(id).isEqualTo(123);
+				} else {
+					assertThat(id).isEqualTo(456);
+				}
+			}
+		});
+
+		assertThat(routers).extracting(r -> r.getPathTemplate()).containsExactlyInAnyOrder(
+				"/apps/{appName}/item/{itemId}",
+				"/x/{itemId}"
+		);
+
+		routers.get(0).handle("/apps/myApp/item/123", Map.of("appName", "myApp", "itemId", "123"), Map.of("flag", "true"));
+		routers.get(0).handle("/x/456", Map.of("itemId", "456"), Map.of("flag", "false"));
+
+		assertThat(invocationCount).hasValue(2);
+	}
+
+	@Test
+	public void classLevelPathAnnotation() {
+		AnnotationBasedRouteHandlerFactory factory = new AnnotationBasedRouteHandlerFactory(new ParameterConverterProvider());
+
+		MyRouter router = new MyRouter();
+		List<AnnotationBasedRouteHandlerFactory.AnnotationBasedRouteHandler> routers = factory.createRouteHandlers(router);
+
+		assertThat(routers).extracting(r -> r.getPathTemplate()).containsExactlyInAnyOrder("/foo/{x}/bar/{y}");
+
+		routers.get(0).handle("/foo/111/bar/yyy", Map.of("x", "111", "y", "yyy"), Map.of());
+
+		assertThat(router.wasInvoked).isTrue();
+	}
+
+	@Test
+	public void shouldMakeMethodsAccessible() {
+		AtomicBoolean wasInvoked = new AtomicBoolean();
+		var routeHandlers = new AnnotationBasedRouteHandlerFactory(new ParameterConverterProvider()).createRouteHandlers(new Object() {
+			@RoutingPath("/")
+			private void myMethod() {
+				wasInvoked.set(true);
+			}
+		});
+
+		routeHandlers.get(0).handle("/", Map.of(), Map.of()); // should not throw an exception!
+	}
+
+	@RoutingPath("foo/{x}")
+	public static class MyRouter {
+		volatile boolean wasInvoked = false;
+
+		@RoutingPath("bar/{y}")
+		public void myMethod(@PathParameter("x") Integer x, @PathParameter("y") String y) {
+			wasInvoked = true;
+			assertThat(x).isEqualTo(111);
+			assertThat(y).isEqualTo("yyy");
+		}
+	}
+}
diff --git a/teamapps-ux/src/test/java/org/teamapps/ux/session/navigation/LocationTest.java b/teamapps-ux/src/test/java/org/teamapps/ux/session/navigation/LocationTest.java
new file mode 100644
index 000000000..90d1f45ca
--- /dev/null
+++ b/teamapps-ux/src/test/java/org/teamapps/ux/session/navigation/LocationTest.java
@@ -0,0 +1,60 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.session.navigation;
+
+import org.junit.Test;
+
+import java.net.MalformedURLException;
+
+import static org.assertj.core.api.Assertions.assertThat;
+
+public class LocationTest {
+
+	@Test
+	public void parse() throws MalformedURLException {
+		Location location = Location.parse("http://teamapps.org:8080/my/path?q=123#ref");
+
+		assertThat(location.getHref()).isEqualTo("http://teamapps.org:8080/my/path?q=123#ref");
+		assertThat(location.getOrigin()).isEqualTo("http://teamapps.org:8080");
+		assertThat(location.getProtocol()).isEqualTo("http");
+		assertThat(location.getHost()).isEqualTo("teamapps.org:8080");
+		assertThat(location.getHostname()).isEqualTo("teamapps.org");
+		assertThat(location.getPort()).isEqualTo(8080);
+		assertThat(location.getPathname()).isEqualTo("/my/path");
+		assertThat(location.getSearch()).isEqualTo("?q=123");
+		assertThat(location.getHash()).isEqualTo("#ref");
+	}
+
+	@Test
+	public void parseMinimal() throws MalformedURLException {
+		Location location = Location.parse("http://teamapps.org");
+
+		assertThat(location.getHref()).isEqualTo("http://teamapps.org");
+		assertThat(location.getOrigin()).isEqualTo("http://teamapps.org");
+		assertThat(location.getProtocol()).isEqualTo("http");
+		assertThat(location.getHost()).isEqualTo("teamapps.org");
+		assertThat(location.getHostname()).isEqualTo("teamapps.org");
+		assertThat(location.getPort()).isNull();
+		assertThat(location.getPathname()).isEqualTo("/");
+		assertThat(location.getSearch()).isEqualTo("");
+		assertThat(location.getHash()).isEqualTo("");
+	}
+
+}
diff --git a/teamapps-ux/src/test/java/org/teamapps/ux/session/navigation/NavigationStateTest.java b/teamapps-ux/src/test/java/org/teamapps/ux/session/navigation/NavigationStateTest.java
new file mode 100644
index 000000000..c4dbd65c8
--- /dev/null
+++ b/teamapps-ux/src/test/java/org/teamapps/ux/session/navigation/NavigationStateTest.java
@@ -0,0 +1,50 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.session.navigation;
+
+import org.junit.Test;
+
+import java.util.Map;
+
+import static org.assertj.core.api.Assertions.assertThat;
+
+public class NavigationStateTest {
+
+	@Test
+	public void parse() {
+		assertThat(Route.parse(null)).isEqualTo(new Route("/", Map.of()));
+		assertThat(Route.parse("")).isEqualTo(new Route("/", Map.of()));
+		assertThat(Route.parse("/")).isEqualTo(new Route("/", Map.of()));
+		assertThat(Route.parse("foo")).isEqualTo(new Route("/foo", Map.of()));
+		assertThat(Route.parse("/foo")).isEqualTo(new Route("/foo", Map.of()));
+		assertThat(Route.parse("/foo/")).isEqualTo(new Route("/foo", Map.of()));
+		assertThat(Route.parse("foo/bar")).isEqualTo(new Route("/foo/bar", Map.of()));
+		assertThat(Route.parse("/foo/bar")).isEqualTo(new Route("/foo/bar", Map.of()));
+		assertThat(Route.parse("/foo/bar/")).isEqualTo(new Route("/foo/bar", Map.of()));
+		assertThat(Route.parse("/foo/bar?")).isEqualTo(new Route("/foo/bar", Map.of()));
+		assertThat(Route.parse("/foo/bar?x=1")).isEqualTo(new Route("/foo/bar", Map.of("x", "1")));
+		assertThat(Route.parse("/foo/bar/?x=1&y=2")).isEqualTo(new Route("/foo/bar", Map.of("x", "1", "y", "2")));
+	}
+
+	@Test
+	public void toUrlEncodedString() {
+		assertThat(Route.parse("föö/?þar=ba←").toString()).isEqualTo("/föö?þar=ba←");
+	}
+}
diff --git a/teamapps-ux/src/test/java/org/teamapps/ux/session/navigation/ParameterConverterProviderTest.java b/teamapps-ux/src/test/java/org/teamapps/ux/session/navigation/ParameterConverterProviderTest.java
new file mode 100644
index 000000000..229e71e57
--- /dev/null
+++ b/teamapps-ux/src/test/java/org/teamapps/ux/session/navigation/ParameterConverterProviderTest.java
@@ -0,0 +1,46 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.session.navigation;
+
+import jakarta.ws.rs.ext.ParamConverter;
+import org.junit.Test;
+
+import java.lang.reflect.Field;
+import java.util.List;
+
+import static org.assertj.core.api.Assertions.assertThat;
+
+public class ParameterConverterProviderTest {
+
+	public enum TestEnum {
+		FOO, BAR;
+	}
+
+	public static List<TestEnum> listProperty;
+
+	@Test
+	public void name() throws NoSuchFieldException {
+		Field field = this.getClass().getField("listProperty");
+		ParameterConverterProvider provider = new ParameterConverterProvider();
+		ParamConverter<List<TestEnum>> converter = (ParamConverter) provider.getConverter(field.getType(), field.getGenericType(), null);
+		assertThat(converter.toString(List.of(TestEnum.FOO, TestEnum.BAR))).isEqualTo("FOO,BAR");
+		assertThat(converter.fromString("FOO,BAR")).containsExactly(TestEnum.FOO, TestEnum.BAR);
+	}
+}
diff --git a/teamapps-ux/src/test/java/org/teamapps/ux/session/navigation/RouterTest.java b/teamapps-ux/src/test/java/org/teamapps/ux/session/navigation/RouterTest.java
new file mode 100644
index 000000000..09aad45c6
--- /dev/null
+++ b/teamapps-ux/src/test/java/org/teamapps/ux/session/navigation/RouterTest.java
@@ -0,0 +1,233 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.session.navigation;
+
+import org.assertj.core.data.MapEntry;
+import org.glassfish.jersey.uri.UriTemplate;
+import org.junit.Test;
+
+import java.util.HashMap;
+import java.util.Map;
+
+import static org.assertj.core.api.Assertions.assertThat;
+import static org.assertj.core.api.Assertions.entry;
+import static org.teamapps.ux.session.navigation.NavigationHistoryOperation.PUSH;
+import static org.teamapps.ux.session.navigation.NavigationHistoryOperation.REPLACE;
+import static org.teamapps.ux.session.navigation.Router.PATH_REMAINDER_SUFFIX;
+import static org.teamapps.ux.session.navigation.Router.PATH_REMAINDER_VARNAME;
+
+public class RouterTest {
+
+	@Test
+	public void pathRemainderSuffix() {
+		UriTemplate uriTemplate = new UriTemplate("/asdf/x" + PATH_REMAINDER_SUFFIX);
+		testUriPatternMatches(uriTemplate, "/asdf/x", entry(PATH_REMAINDER_VARNAME, ""));
+		testUriPatternMatches(uriTemplate, "/asdf/x/foo", entry(PATH_REMAINDER_VARNAME, "/foo"));
+		assertThat(uriTemplate.match("/asdf/xyz", new HashMap<>())).isFalse();
+	}
+
+	@SafeVarargs
+	private static void testUriPatternMatches(UriTemplate uriTemplate, String path, MapEntry<String, String>... expectedEntries) {
+		HashMap<String, String> map = new HashMap<>();
+		assertThat(uriTemplate.match(path, map)).isTrue();
+		assertThat(map).containsOnly(expectedEntries);
+	}
+
+	@Test
+	public void setPath() {
+		Router router = new Router("/");
+		router.setPath("x", PUSH);
+
+		router.setPathSupplier(() -> "fromSupplier", REPLACE);
+		router.setRouteSupplier(() -> new Route("fromRouteSupplier", Map.of()), REPLACE);
+
+		RelativeRouteInfo routeInfo = router.calculateRelativeRouteInfo();
+		assertThat(routeInfo.getRoute().getPath()).isEqualTo("/x");
+		assertThat(routeInfo.isPathChangeWorthStatePush()).isTrue();
+	}
+
+	@Test
+	public void setPath2() {
+		Router router = new Router("/");
+		router.setPath("x", REPLACE);
+
+		router.setPathSupplier(() -> "fromSupplier", PUSH);
+		router.setRouteSupplier(() -> new Route("fromRouteSupplier", Map.of()), PUSH);
+
+		RelativeRouteInfo routeInfo = router.calculateRelativeRouteInfo();
+		assertThat(routeInfo.getRoute().getPath()).isEqualTo("/x");
+		assertThat(routeInfo.isPathChangeWorthStatePush()).isFalse();
+	}
+
+	@Test
+	public void setQueryParameter() {
+		Router router = new Router("/");
+		router.setQueryParameter("x", "xValue", PUSH);
+
+		router.setQueryParameterSupplier("x", () -> "fromSupplier", REPLACE);
+		router.addQueryParametersSupplier(() -> Map.of("x", "fromSupplier2"), REPLACE);
+		router.setRouteSupplier(() -> new Route("/", Map.of("x", "fromRouteSupplier")), REPLACE);
+
+		RelativeRouteInfo routeInfo = router.calculateRelativeRouteInfo();
+		assertThat(routeInfo.getRoute().getQueryParam("x")).isEqualTo("xValue");
+		assertThat(routeInfo.getQueryParamNamesWorthStatePush()).contains("x");
+	}
+	@Test
+	public void setQueryParameter2() {
+		Router router = new Router("/");
+		router.setQueryParameter("x", "xValue", REPLACE);
+
+		router.setQueryParameterSupplier("x", () -> "fromSupplier", PUSH);
+		router.addQueryParametersSupplier(() -> Map.of("x", "fromSupplier2"), PUSH);
+		router.setRouteSupplier(() -> new Route("/", Map.of("x", "fromRouteSupplier")), PUSH);
+
+		RelativeRouteInfo routeInfo = router.calculateRelativeRouteInfo();
+		assertThat(routeInfo.getRoute().getQueryParam("x")).isEqualTo("xValue");
+		assertThat(routeInfo.getQueryParamNamesWorthStatePush()).doesNotContain("x");
+	}
+
+	@Test
+	public void setPathSupplier() {
+		Router router = new Router("/");
+		router.setPathSupplier(() -> "fromPathSupplier", PUSH);
+
+		router.setRouteSupplier(() -> new Route("fromRouteSupplier", Map.of()), REPLACE);
+
+		RelativeRouteInfo routeInfo = router.calculateRelativeRouteInfo();
+		assertThat(routeInfo.getRoute().getPath()).isEqualTo("/fromPathSupplier");
+		assertThat(routeInfo.isPathChangeWorthStatePush()).isTrue();
+	}
+
+	@Test
+	public void setPathSupplier2() {
+		Router router = new Router("/");
+		router.setPathSupplier(() -> "fromPathSupplier", REPLACE);
+
+		router.setRouteSupplier(() -> new Route("fromRouteSupplier", Map.of()), PUSH);
+
+		RelativeRouteInfo routeInfo = router.calculateRelativeRouteInfo();
+		assertThat(routeInfo.getRoute().getPath()).isEqualTo("/fromPathSupplier");
+		assertThat(routeInfo.isPathChangeWorthStatePush()).isFalse();
+	}
+
+	@Test
+	public void setQueryParameterSupplier() {
+		Router router = new Router("/");
+		router.setQueryParameterSupplier("x", () -> "fromSupplier", PUSH);
+
+		router.addQueryParametersSupplier(() -> Map.of("x", "fromSupplier2"), REPLACE);
+		router.setRouteSupplier(() -> new Route("/", Map.of("x", "fromRouteSupplier")), REPLACE);
+
+		RelativeRouteInfo routeInfo = router.calculateRelativeRouteInfo();
+		assertThat(routeInfo.getRoute().getQueryParam("x")).isEqualTo("fromSupplier");
+		assertThat(routeInfo.getQueryParamNamesWorthStatePush()).contains("x");
+	}
+	@Test
+	public void setQueryParameterSupplier2() {
+		Router router = new Router("/");
+		router.setQueryParameterSupplier("x", () -> "fromSupplier", REPLACE);
+
+		router.addQueryParametersSupplier(() -> Map.of("x", "fromSupplier2"), PUSH);
+		router.setRouteSupplier(() -> new Route("/", Map.of("x", "fromRouteSupplier")), PUSH);
+
+		RelativeRouteInfo routeInfo = router.calculateRelativeRouteInfo();
+		assertThat(routeInfo.getRoute().getQueryParam("x")).isEqualTo("fromSupplier");
+		assertThat(routeInfo.getQueryParamNamesWorthStatePush()).doesNotContain("x");
+	}
+
+	@Test
+	public void setQueryParametersSupplier() {
+		Router router = new Router("/");
+		router.addQueryParametersSupplier(() -> Map.of("x", "fromParametersSupplier"), PUSH);
+		router.setRouteSupplier(() -> new Route("/", Map.of("x", "fromRouteSupplier")), REPLACE);
+
+		RelativeRouteInfo routeInfo = router.calculateRelativeRouteInfo();
+		assertThat(routeInfo.getRoute().getQueryParam("x")).isEqualTo("fromParametersSupplier");
+		assertThat(routeInfo.getQueryParamNamesWorthStatePush()).contains("x");
+	}
+
+	@Test
+	public void setQueryParametersSupplier2() {
+		Router router = new Router("/");
+		router.addQueryParametersSupplier(() -> Map.of("x", "fromParametersSupplier"), REPLACE);
+		router.setRouteSupplier(() -> new Route("/", Map.of("x", "fromRouteSupplier")), PUSH);
+
+		RelativeRouteInfo routeInfo = router.calculateRelativeRouteInfo();
+		assertThat(routeInfo.getRoute().getQueryParam("x")).isEqualTo("fromParametersSupplier");
+		assertThat(routeInfo.getQueryParamNamesWorthStatePush()).doesNotContain("x");
+	}
+
+	@Test
+	public void setRouteSupplier() {
+		Router router = new Router("/");
+		router.setRouteSupplier(() -> new Route("fromRouteSupplier", Map.of()), PUSH);
+
+		RelativeRouteInfo routeInfo = router.calculateRelativeRouteInfo();
+		assertThat(routeInfo.getRoute().getPath()).isEqualTo("/fromRouteSupplier");
+		assertThat(routeInfo.isPathChangeWorthStatePush()).isTrue();
+	}
+
+	@Test
+	public void setRouteSupplier2() {
+		Router router = new Router("/");
+		router.setRouteSupplier(() -> new Route("fromRouteSupplier", Map.of()), REPLACE);
+
+		RelativeRouteInfo routeInfo = router.calculateRelativeRouteInfo();
+		assertThat(routeInfo.getRoute().getPath()).isEqualTo("/fromRouteSupplier");
+		assertThat(routeInfo.isPathChangeWorthStatePush()).isFalse();
+	}
+
+	@Test
+	public void matchesPath() throws Exception {
+		assertThat(new Router("").matchesPath("/a/b/c")).isTrue();
+		assertThat(new Router("/").matchesPath("/a/b/c")).isTrue();
+		assertThat(new Router("a").matchesPath("/a/b/c")).isTrue();
+		assertThat(new Router("/a").matchesPath("/a/b/c")).isTrue();
+		assertThat(new Router("a/b").matchesPath("/a/b/c")).isTrue();
+		assertThat(new Router("/a/b").matchesPath("/a/b/c")).isTrue();
+		assertThat(new Router("/a/{v}/b").matchesPath("/a/xxx/b")).isTrue();
+		assertThat(new Router("/a/{v}/b").matchesPath("/a/xxx/b/c")).isTrue();
+
+		assertThat(new Router("x").matchesPath("/a/b/c")).isFalse();
+		assertThat(new Router("/x").matchesPath("/a/b/c")).isFalse();
+		assertThat(new Router("a/x").matchesPath("/a/b/c")).isFalse();
+		assertThat(new Router("/a/x").matchesPath("/a/b/c")).isFalse();
+		assertThat(new Router("/a/b/c/d").matchesPath("/a/b/c")).isFalse();
+		assertThat(new Router("/a/{v}/b").matchesPath("/a/xxx/c")).isFalse();
+		assertThat(new Router("/a/{v}/b").matchesPath("/a/xxx")).isFalse();
+	}
+
+	@Test
+	public void matchesPathPrefix() {
+		assertThat(new Router("").matchesPathPrefix("/a/b")).isFalse();
+		assertThat(new Router("/").matchesPathPrefix("/a/b")).isFalse();
+		assertThat(new Router("a").matchesPathPrefix("/a/b")).isFalse();
+		assertThat(new Router("/a").matchesPathPrefix("/a/b")).isFalse();
+		assertThat(new Router("x").matchesPathPrefix("/a/b")).isFalse();
+		assertThat(new Router("/a/x").matchesPathPrefix("/a/b")).isFalse();
+		assertThat(new Router("/a/{v}/b").matchesPathPrefix("/a")).isFalse();
+		assertThat(new Router("/a/{v}/b").matchesPathPrefix("/a/b")).isFalse();
+		assertThat(new Router("/a/{v}/b").matchesPathPrefix("/a/b/c")).isFalse();
+
+		assertThat(new Router("a/b").matchesPathPrefix("/a/b")).isTrue();
+		assertThat(new Router("/a/b").matchesPathPrefix("/a/b")).isTrue();
+		assertThat(new Router("/a/{v}/b").matchesPathPrefix("/a/xxx/b")).isTrue();
+	}
+}
diff --git a/teamapps-ux/src/test/java/org/teamapps/ux/session/navigation/RoutingUtilTest.java b/teamapps-ux/src/test/java/org/teamapps/ux/session/navigation/RoutingUtilTest.java
new file mode 100644
index 000000000..472baee0f
--- /dev/null
+++ b/teamapps-ux/src/test/java/org/teamapps/ux/session/navigation/RoutingUtilTest.java
@@ -0,0 +1,76 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.session.navigation;
+
+import org.junit.Test;
+
+import static org.assertj.core.api.Assertions.assertThat;
+import static org.assertj.core.api.Assertions.assertThatThrownBy;
+
+
+public class RoutingUtilTest {
+
+	@Test
+	public void normalizePathPrefix() {
+		assertThat(RoutingUtil.normalizePath(null)).isEqualTo("/");
+		assertThat(RoutingUtil.normalizePath("")).isEqualTo("/");
+		assertThat(RoutingUtil.normalizePath("/")).isEqualTo("/");
+		assertThat(RoutingUtil.normalizePath("foo")).isEqualTo("/foo");
+		assertThat(RoutingUtil.normalizePath("/foo")).isEqualTo("/foo");
+		assertThat(RoutingUtil.normalizePath("foo/bar")).isEqualTo("/foo/bar");
+		assertThat(RoutingUtil.normalizePath("/foo/bar")).isEqualTo("/foo/bar");
+		assertThat(RoutingUtil.normalizePath("foo/bar/")).isEqualTo("/foo/bar");
+		assertThat(RoutingUtil.normalizePath("/foo/bar/")).isEqualTo("/foo/bar");
+	}
+
+	@Test
+	public void withSingleLeadingSlash() {
+		assertThat(RoutingUtil.normalizePath(null)).isEqualTo("/");
+		assertThat(RoutingUtil.normalizePath("/")).isEqualTo("/");
+		assertThat(RoutingUtil.normalizePath("foo")).isEqualTo("/foo");
+		assertThat(RoutingUtil.normalizePath("/foo")).isEqualTo("/foo");
+		assertThat(RoutingUtil.normalizePath("//foo")).isEqualTo("/foo");
+		assertThat(RoutingUtil.normalizePath("foo/bar")).isEqualTo("/foo/bar");
+		assertThat(RoutingUtil.normalizePath("/foo/bar")).isEqualTo("/foo/bar");
+		assertThat(RoutingUtil.normalizePath("//foo/bar/")).isEqualTo("/foo/bar");
+	}
+
+	@Test
+	public void concatenatePaths() {
+		assertThat(RoutingUtil.concatenatePaths(null, "asdf")).isEqualTo("/asdf");
+		assertThat(RoutingUtil.concatenatePaths("", "asdf")).isEqualTo("/asdf");
+		assertThat(RoutingUtil.concatenatePaths("/", "asdf")).isEqualTo("/asdf");
+		assertThat(RoutingUtil.concatenatePaths("/", "/asdf")).isEqualTo("/asdf");
+		assertThat(RoutingUtil.concatenatePaths("prefix", "suffix")).isEqualTo("/prefix/suffix");
+		assertThat(RoutingUtil.concatenatePaths("/prefix", "suffix")).isEqualTo("/prefix/suffix");
+		assertThat(RoutingUtil.concatenatePaths("prefix", "/suffix")).isEqualTo("/prefix/suffix");
+		assertThat(RoutingUtil.concatenatePaths("/prefix", "/suffix")).isEqualTo("/prefix/suffix");
+	}
+
+	@Test
+	public void removePrefix() {
+		assertThat(RoutingUtil.removePrefix("/a/b/c", "/a")).isEqualTo("/b/c");
+		assertThat(RoutingUtil.removePrefix("/a/b/c", "/a/b")).isEqualTo("/c");
+		assertThat(RoutingUtil.removePrefix("/a/b/c", "/a/b/c")).isEqualTo("/");
+		assertThat(RoutingUtil.removePrefix("a/b/c", "/a")).isEqualTo("/b/c");
+		assertThat(RoutingUtil.removePrefix("/a/b/c", "a")).isEqualTo("/b/c");
+		assertThatThrownBy(() -> RoutingUtil.removePrefix("/a/b/c", "/x")).isInstanceOf(IllegalArgumentException.class);
+	}
+}
diff --git a/teamapps-ux/src/test/java/org/teamapps/ux/task/ProgressCompletableFutureTest.java b/teamapps-ux/src/test/java/org/teamapps/ux/task/ProgressCompletableFutureTest.java
new file mode 100644
index 000000000..43b5e2444
--- /dev/null
+++ b/teamapps-ux/src/test/java/org/teamapps/ux/task/ProgressCompletableFutureTest.java
@@ -0,0 +1,40 @@
+/*-
+ * ========================LICENSE_START=================================
+ * TeamApps
+ * ---
+ * Copyright (C) 2014 - 2026 TeamApps.org
+ * ---
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================LICENSE_END==================================
+ */
+package org.teamapps.ux.task;
+
+import org.junit.Assert;
+import org.junit.Test;
+
+public class ProgressCompletableFutureTest {
+
+	public static final String EXCEPTION_RESULT = "exception thrown";
+
+	@Test
+	public void testRunAsyncException() throws Exception {
+		String result = ProgressCompletableFuture.<String>supplyAsync(progressMonitor -> {
+			throw new RuntimeException();
+		})
+				.thenApply(a -> a)
+				.exceptionally(throwable -> EXCEPTION_RESULT)
+				.get();
+
+		Assert.assertEquals(EXCEPTION_RESULT, result);
+	}
+}
diff --git a/teamapps-ux/src/test/resources/translations/Translations_de.properties b/teamapps-ux/src/test/resources/translations/Translations_de.properties
new file mode 100644
index 000000000..887d9ba50
--- /dev/null
+++ b/teamapps-ux/src/test/resources/translations/Translations_de.properties
@@ -0,0 +1,21 @@
+###
+# ========================LICENSE_START=================================
+# TeamApps
+# ---
+# Copyright (C) 2014 - 2026 TeamApps.org
+# ---
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+# 
+#      http://www.apache.org/licenses/LICENSE-2.0
+# 
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+# =========================LICENSE_END==================================
+###
+deOnly=nur deutsch
+allLanguages=alle Sprachen
diff --git a/teamapps-ux/src/test/resources/translations/Translations_en.properties b/teamapps-ux/src/test/resources/translations/Translations_en.properties
new file mode 100644
index 000000000..c83f100e6
--- /dev/null
+++ b/teamapps-ux/src/test/resources/translations/Translations_en.properties
@@ -0,0 +1,21 @@
+###
+# ========================LICENSE_START=================================
+# TeamApps
+# ---
+# Copyright (C) 2014 - 2026 TeamApps.org
+# ---
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+# 
+#      http://www.apache.org/licenses/LICENSE-2.0
+# 
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+# =========================LICENSE_END==================================
+###
+enOnly=english only
+allLanguages=all languages
diff --git a/teamapps-ux/src/test/resources/translations/Translations_fr.properties b/teamapps-ux/src/test/resources/translations/Translations_fr.properties
new file mode 100644
index 000000000..0333aa8a4
--- /dev/null
+++ b/teamapps-ux/src/test/resources/translations/Translations_fr.properties
@@ -0,0 +1,21 @@
+###
+# ========================LICENSE_START=================================
+# TeamApps
+# ---
+# Copyright (C) 2014 - 2026 TeamApps.org
+# ---
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+# 
+#      http://www.apache.org/licenses/LICENSE-2.0
+# 
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+# =========================LICENSE_END==================================
+###
+frOnly=seulement en francais
+allLanguages=toutes les langues