@mxtommy/kip 3.0.0-beta.33 → 3.0.0-beta.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mxtommy/kip",
-  "version": "3.0.0-beta.33",
+  "version": "3.0.0-beta.36",
   "description": "An advanced and versatile marine instrumentation package to display Signal K data.",
   "license": "MIT",
   "author": {
@@ -45,20 +45,20 @@
     "e2e": "ng e2e"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^18.2.11",
-    "@angular/animations": "18.2.11",
-    "@angular/cdk": "^18.2.12",
-    "@angular/cli": "^18.2.11",
-    "@angular/common": "18.2.11",
-    "@angular/compiler": "18.2.11",
-    "@angular/compiler-cli": "18.2.11",
-    "@angular/core": "18.2.11",
-    "@angular/forms": "18.2.11",
-    "@angular/language-service": "18.2.11",
-    "@angular/material": "^18.2.12",
-    "@angular/platform-browser": "18.2.11",
-    "@angular/platform-browser-dynamic": "18.2.11",
-    "@angular/router": "18.2.11",
+    "@angular-devkit/build-angular": "^19.2.6",
+    "@angular/animations": "19.2.5",
+    "@angular/cdk": "19.2.8",
+    "@angular/cli": "^19.2.6",
+    "@angular/common": "19.2.5",
+    "@angular/compiler": "19.2.5",
+    "@angular/compiler-cli": "19.2.5",
+    "@angular/core": "19.2.5",
+    "@angular/forms": "19.2.5",
+    "@angular/language-service": "19.2.5",
+    "@angular/material": "19.2.8",
+    "@angular/platform-browser": "19.2.5",
+    "@angular/platform-browser-dynamic": "19.2.5",
+    "@angular/router": "19.2.5",
     "@godind/ng-canvas-gauges": "^6.2.1",
     "@material/material-color-utilities": "^0.3.0",
     "@robloche/chartjs-plugin-streaming": "^3.1.0",
@@ -83,14 +83,15 @@
     "jasmine-core": "~4.0.1",
     "jasmine-spec-reporter": "~5.0.0",
     "js-quantities": "^1.8.0",
-    "karma": "~6.3.17",
+    "karma": "^6.4.4",
     "karma-chrome-launcher": "~3.1.0",
     "karma-cli": "~2.0.0",
     "karma-coverage-istanbul-reporter": "^3.0.3",
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "^1.6.0",
     "lodash-es": "^4.17.21",
-    "ng-packagr": "^18.0.0",
+    "ng-packagr": "^19.2.0",
+    "ngx-markdown": "^19.1.1",
     "ngx-resize-observer": "^2.7.0",
     "protractor": "~7.0.0",
     "pwa-asset-generator": "^6.3.1",
@@ -98,13 +99,10 @@
     "rxjs": "^7.5.7",
     "sass": "^1.49.9",
     "screenfull": "^6.0.2",
-    "ngx-markdown": "^18.1.0",
     "ts-node": "^8.10.2",
     "tslib": "^2.6.2",
     "tslint": "^6.1.3",
-    "typescript": "^5.4.5",
-    "zone.js": "~0.14.10"
-  },
-  "dependencies": {
+    "typescript": "^5.8.2",
+    "zone.js": "~0.15.0"
   }
 }

package/public/3rdpartylicenses.txt

@@ -107,7 +107,7 @@ License: "MIT"
 
 The MIT License
 
-Copyright (c) 2010-2024 Google LLC. https://angular.dev/license
+Copyright (c) 2010-2025 Google LLC. https://angular.dev/license
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -356,7 +356,7 @@ License: "MIT"
 
 The MIT License
 
-Copyright (c) 2010-2024 Google LLC. https://angular.dev/license
+Copyright (c) 2010-2025 Google LLC. https://angular.dev/license
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -382,7 +382,7 @@ License: "MIT"
 
 The MIT License
 
-Copyright (c) 2010-2024 Google LLC. https://angular.dev/license
+Copyright (c) 2010-2025 Google LLC. https://angular.dev/license
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -486,7 +486,7 @@ License: "MIT"
 
 The MIT License
 
-Copyright (c) 2024 Google LLC.
+Copyright (c) 2025 Google LLC.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -512,7 +512,7 @@ License: "MIT"
 
 The MIT License
 
-Copyright (c) 2024 Google LLC.
+Copyright (c) 2025 Google LLC.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -533,12 +533,12 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
 
 --------------------------------------------------------------------------------
-Package: @angular/animations
+Package: @angular/platform-browser
 License: "MIT"
 
 The MIT License
 
-Copyright (c) 2010-2024 Google LLC. https://angular.dev/license
+Copyright (c) 2010-2025 Google LLC. https://angular.dev/license
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -559,12 +559,12 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
 
 --------------------------------------------------------------------------------
-Package: @angular/platform-browser
+Package: @angular/router
 License: "MIT"
 
 The MIT License
 
-Copyright (c) 2010-2024 Google LLC. https://angular.dev/license
+Copyright (c) 2010-2025 Google LLC. https://angular.dev/license
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -585,12 +585,12 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
 
 --------------------------------------------------------------------------------
-Package: @angular/router
+Package: gridstack
 License: "MIT"
 
-The MIT License
+MIT License
 
-Copyright (c) 2010-2024 Google LLC. https://angular.dev/license
+Copyright (c) 2019-2023 Alain Dumesny. v0.4.0 and older (c) 2014-2018 Pavel Reznikov, Dylan Weiss
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -599,24 +599,24 @@ 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 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.
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
 
 --------------------------------------------------------------------------------
-Package: gridstack
+Package: @angular/animations
 License: "MIT"
 
-MIT License
+The MIT License
 
-Copyright (c) 2019-2023 Alain Dumesny. v0.4.0 and older (c) 2014-2018 Pavel Reznikov, Dylan Weiss
+Copyright (c) 2010-2025 Google LLC. https://angular.dev/license
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -625,16 +625,16 @@ 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 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.
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
 
 --------------------------------------------------------------------------------
 Package: ngx-resize-observer
@@ -666,7 +666,7 @@ License: "MIT"
 
 The MIT License (MIT)
 
-Copyright (c) 2018-2021 Jukka Kurkela
+Copyright (c) 2018-2024 Jukka Kurkela
 
 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:
 
@@ -680,7 +680,7 @@ License: "MIT"
 
 The MIT License (MIT)
 
-Copyright (c) 2014-2022 Chart.js Contributors
+Copyright (c) 2014-2024 Chart.js 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:
 
@@ -878,7 +878,7 @@ License: "MIT"
 
 MIT License
 
-Copyright (c) 2017-2024 Jean-Francois Cere
+Copyright (c) 2017-2025 Jean-Francois Cere
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -902,7 +902,7 @@ SOFTWARE.
 Package: core-js
 License: "MIT"
 
-Copyright (c) 2014-2024 Denis Pushkarev
+Copyright (c) 2014-2025 Denis Pushkarev
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/public/app-help.component.css.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["src/app/core/components/app-help/app-help.component.scss"],
-  "sourcesContent": [".fullpage-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: baseline;\n}\n\n.fullpage-header-title {\n  padding: 18px 24px 13px 24px;;\n}\n\n.dialog-close-icon {\nmargin-right: 15px;\n}\n\n.mat-mdc-dialog-content {\nmax-height: max-content;\n}\n\n.dialog-content-padding {\n--mat-dialog-content-padding: 0px 24px 20px 24px;\n}\n\n.markdown-content {\n  display: block;\n  height: calc(100% - 75px);\n  width: 100%;\n  overflow-x: scroll;\n  padding: 25px;\n}\n"],
-  "mappings": ";AAAA,CAAA;AACE,WAAA;AACA,mBAAA;AACA,eAAA;;AAGF,CAAA;AACE,WAAA,KAAA,KAAA,KAAA;;AAGF,CAAA;AACA,gBAAA;;AAGA,CAAA;AACA,cAAA;;AAGA,CAAA;AACA,gCAAA,IAAA,KAAA,KAAA;;AAGA,CAAA;AACE,WAAA;AACA,UAAA,KAAA,KAAA,EAAA;AACA,SAAA;AACA,cAAA;AACA,WAAA;;",
+  "sourcesContent": [".fullpage-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: baseline;\n}\n\n.fullpage-header-title {\n  margin-block-start: 0px;\n  margin-block-end: 0px;\n  padding: 18px 24px 13px 24px;\n  color: var(--mdc-dialog-subhead-color, var(--mat-sys-on-surface, rgba(0, 0, 0, 0.87)));\n  font-family: var(--mdc-dialog-subhead-font, var(--mat-sys-headline-small-font, inherit));\n  line-height: var(--mdc-dialog-subhead-line-height, var(--mat-sys-headline-small-line-height, 1.5rem));\n  font-size: var(--mdc-dialog-subhead-size, var(--mat-sys-headline-small-size, 1rem));\n  font-weight: var(--mdc-dialog-subhead-weight, var(--mat-sys-headline-small-weight, 400));\n  letter-spacing: var(--mdc-dialog-subhead-tracking, var(--mat-sys-headline-small-tracking, 0.03125em));\n}\n\n.dialog-close-icon {\nmargin-right: 15px;\n}\n\n.mat-mdc-dialog-content {\nmax-height: max-content;\n}\n\n.dialog-content-padding {\n--mat-dialog-content-padding: 0px 24px 20px 24px;\n}\n\n.markdown-content {\n  display: block;\n  height: calc(100% - 75px);\n  width: 100%;\n  overflow-x: scroll;\n  padding: 25px;\n}\n"],
+  "mappings": ";AAAA,CAAA;AACE,WAAA;AACA,mBAAA;AACA,eAAA;;AAGF,CAAA;AACE,sBAAA;AACA,oBAAA;AACA,WAAA,KAAA,KAAA,KAAA;AACA,SAAA,IAAA,0BAAA,EAAA,IAAA,oBAAA,EAAA,KAAA,CAAA,EAAA,CAAA,EAAA,CAAA,EAAA;AACA,eAAA,IAAA,yBAAA,EAAA,IAAA,6BAAA,EAAA;AACA,eAAA,IAAA,gCAAA,EAAA,IAAA,oCAAA,EAAA;AACA,aAAA,IAAA,yBAAA,EAAA,IAAA,6BAAA,EAAA;AACA,eAAA,IAAA,2BAAA,EAAA,IAAA,+BAAA,EAAA;AACA,kBAAA,IAAA,6BAAA,EAAA,IAAA,iCAAA,EAAA;;AAGF,CAAA;AACA,gBAAA;;AAGA,CAAA;AACA,cAAA;;AAGA,CAAA;AACA,gCAAA,IAAA,KAAA,KAAA;;AAGA,CAAA;AACE,WAAA;AACA,UAAA,KAAA,KAAA,EAAA;AACA,SAAA;AACA,cAAA;AACA,WAAA;;",
   "names": []
 }

package/public/app.component.css.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["src/app/app.component.scss"],
-  "sourcesContent": [".sidenav-container {\n  height: 100%;\n  width: 100%;\n}\n\n.router-outlet-container {\n  display: contents;\n }\n\nmat-sidenav.sidenav-notifications {\n  width: 230px;\n  overflow: visible;\n}\n\nmat-sidenav.sidenav-controls {\n  width: 135px;\n}\n"],
-  "mappings": ";AAAA,CAAA;AACE,UAAA;AACA,SAAA;;AAGF,CAAA;AACE,WAAA;;AAGF,WAAA,CAAA;AACE,SAAA;AACA,YAAA;;AAGF,WAAA,CAAA;AACE,SAAA;;",
+  "sourcesContent": [".sidenav-container {\n  min-height: 100%;\n  width: 100%;\n}\n\nmat-sidenav.sidenav-notifications {\n  width: 230px;\n}\n\nmat-sidenav.sidenav-actions {\n  width: 135px;\n}\n"],
+  "mappings": ";AAAA,CAAA;AACE,cAAA;AACA,SAAA;;AAGF,WAAA,CAAA;AACE,SAAA;;AAGF,WAAA,CAAA;AACE,SAAA;;",
   "names": []
 }

package/public/assets/help-docs/configuration.md

@@ -1,4 +1,4 @@
-#### Configuration Management
+# Configuration Management
 
 KIP provides a "Login to Server" option that determines where your configuration is stored. It is **strongly recommended** to enable server login in the **Settings** under the **Connectivity** tab. This ensures your configurations are stored remotely on the Signal K server. See the "Creating a Signal K user" section below for details.
 
@@ -7,7 +7,7 @@ KIP provides a "Login to Server" option that determines where your configuration
 
 You can manage your configurations using the **Configurations** page, accessible from the right menu. Depending on your login mode, different management options are available.
 
-##### Creating a Signal K User
+## Creating a Signal K User
 
 To log in to Signal K, you must first create a user. Follow these steps to create a Signal K user:
 
@@ -17,7 +17,7 @@ To log in to Signal K, you must first create a user. Follow these steps to creat
 4. Assign **Read/Write** permissions at a minimum. To allow access to the Global storage scope, assign **Admin** permissions as well.
 5. Click **Apply** to save the new user.
 
-##### Login to Server Mode
+## Login to Server Mode
 
 *In this mode, your configuration is shared across all devices **as long as you authenticate to Signal K using the same User ID**. It's that simple!*
 
@@ -27,20 +27,20 @@ On the **Configurations** page, you can perform the following actions:
 - **Delete**: Permanently delete a backup configuration. This action is irreversible.
 - **Restore**: Replace the active configuration with a selected backup and reload the app. It is recommended to back up your active configuration before restoring, to avoid losing it.
 
-###### Storage Scopes
+### Storage Scopes
 
 When using "Login to Server" mode, you can save and retrieve configuration backups from different storage scopes. Think of storage scopes as separate folders:
 
 - **User Scope**: Each user has their own private storage space. Users cannot access or view each other's storage.
 - **Global Scope**: Accessible only to users with Signal K "Admin" permissions. This shared storage space allows configuration backups to be shared between users. To share configurations, both users must, at least temporarily, have admin permissions.
 
-###### Planning Configurations
+## Planning Configurations
 
 If you log in with the same user credentials, your configuration will be consistent across all devices and browsers. 
 
 To manage configurations for different devices, stations, or roles, you can create separate Signal K users, each with their own configurations. This approach allows you to tailor configurations to specific use cases. Plan carefully to take full advantage of KIP's flexible configuration management.
 
-##### Local Storage
+## Local Storage
 
 If you do not log in to the server, KIP saves and retrieves configuration changes using your browser's local storage. In this mode:
 
@@ -48,7 +48,7 @@ If you do not log in to the server, KIP saves and retrieves configuration change
 - Configurations **cannot be shared** between different devices or browsers.
 - Configuration management is limited to downloading and uploading configuration files.
 
-##### Advanced Operations
+## Advanced Operations
 
 Use advanced operations with caution. All changes affect your active configuration in real time and are irreversible.
 

package/public/assets/help-docs/contact-us.md

@@ -1,8 +1,16 @@
-###### Get in Touch
+# Get in Touch
 
-KIP has its own channel on the Signal K Discord server. Join the channel to get help, see what others do with KIP and Signal K, get the latest news, and share your ideas.  
-Join us at [KIP Discord channel](https://discord.gg/AMDYT2DQga).
+We’d love to hear from you! KIP has an active community on the Signal K Discord server. Join us to get help, explore what others are doing with KIP and Signal K, stay updated with the latest news, and share your ideas.
 
-###### Feature Requests and Bug Report
+👉 **Join the conversation in the [KIP Discord channel](https://discord.gg/AMDYT2DQga).**
 
-To make a feature request or report a bug, use the [KIP GitHub project](https://github.com/mxtommy/Kip/issues).
+---
+
+## Feature Requests and Bug Reports
+
+Have a great idea for a new feature? Found a bug? Let us know!  
+Submit your feature requests or report issues directly on our GitHub project page:
+
+🔗 **[KIP GitHub Issues](https://github.com/mxtommy/Kip/issues)**
+
+Your feedback helps us make KIP even better. Thank you for contributing!

package/public/assets/help-docs/dashboards.md

@@ -1,14 +1,14 @@
-#### Managing Dashboard
+# Managing Dashboard
 You can organize your dashboards from the Dashboard page. To edit a dashboard layout, visualize the dashboard and unlock it.
 
-##### Dashboard Pages
+## Dashboard Pages
 On the Dashboards page, you can add, reorder, delete, rename, and duplicate dashboards. The dashboard name is briefly visible when you cycle through dashboards. Available actions include:
 - **Long press** a dashboard to delete or duplicate it.
 - **Double tap** a dashboard to rename it.
 - **Touch and drag** to reorder dashboards.
 - Use the **(+)** button to add a new dashboard.
 
-##### Editing Layout
+## Editing Layout
 To edit a dashboard's widgets and arrangement, you need to unlock its layout. View the desired dashboard, access the **Actions menu** on the right-hand side, and tap the unlock button. The widgets will become surrounded by dashed borders, indicating you are in edit mode. Actions you can perform while editing a layout include:
 - **Long press** an empty area of the dashboard to add a widget (you may need to free up space first).
 - **Double tap** a widget to edit its configuration.
@@ -17,7 +17,7 @@ To edit a dashboard's widgets and arrangement, you need to unlock its layout. Vi
 - **Long press** a widget to delete or duplicate it.
 - Tap the **Check button** to save changes or the **X button** to discard changes.
 
-#### Widget Gallery
+## Widget Gallery
 KIP's widgets are versatile visual presentation controls with advanced configuration options to suit your needs. Below is a list of available widgets:
 
 - **Numeric Display**: Create gauges to display any numerical data sent by your system, such as SOG, depth, wind speed, VMG, refrigerator temperature, or weather data.

package/public/assets/help-docs/datainspector.md

@@ -1,3 +1,3 @@
-#### Data Inspector
-# Contributions wanted
+# Data Inspector
+## Contributions wanted
 Help write this page. Contact us on the KIP Discord channel for instructions.

package/public/assets/help-docs/datasets.md

@@ -1,3 +1,3 @@
-##### Datasets
-# Contributions wanted
+# Datasets
+## Contributions wanted
 Help write this page. Contact us on the KIP Discord channel for instructions.

package/public/assets/help-docs/grafana.md

@@ -1,4 +1,4 @@
-###### 5 Minutes with Graphana
+# 5 Minutes with Graphana
 Introduction to using Graphana (by Boating with the Baileys)
 
 [![Watch the video](https://img.youtube.com/vi/b3lHwLnYgx0/0.jpg)](https://www.youtube.com/watch?v=b3lHwLnYgx0)

package/public/assets/help-docs/influxdb.md

@@ -1,4 +1,4 @@
-###### Signal K to InfluxDB
+# Signal K to InfluxDB
 Database to store historical data (by Boating with the Baileys)
 
 [![Watch the video](https://img.youtube.com/vi/ULnN-cByQXE/0.jpg)](https://www.youtube.com/watch?v=ULnN-cByQXE)

package/public/assets/help-docs/welcome.md

@@ -1,7 +1,7 @@
-#### Loading KIP on Phones, Tablets, Raspberry Pi, and Computers
+# Loading KIP on Phones, Tablets, Raspberry Pi, and Computers
 Simply navigate to `http://<Signal K Server URL>:<port>/@mxtommy/kip/` to load KIP and enjoy its features remotely on any device.
 
-#### Touch, Mouse, and Keyboard Navigation
+## Touch, Mouse, and Keyboard Navigation
 KIP supports multiple input modes for seamless navigation across devices.
 
 | Actions                      | Gestures       | Mouse                  | Keyboard Shortcuts           |
@@ -15,7 +15,7 @@ KIP supports multiple input modes for seamless navigation across devices.
 
 <br/>
 
-#### Mobile App
+## Mobile App
 Run KIP in full screen, without browser controls, just like a regular mobile app. This feature is supported on most mobile operating systems. Each browser has its own way of handling Progressive Web App (PWA) installations.
 
 **iOS**
@@ -30,11 +30,11 @@ KIP is now installed and available on your home screen.
 3. Press the "Add" button in the popup.
 KIP is now installed and available on your home screen.
 
-#### Fullscreen
+## Fullscreen
 You can toggle fullscreen mode on and off, and disable the screen saver and computer sleep mode (if supported by the device/browser), by clicking the small Expand/Reduce button in the upper left corner of the Actions menu or using the keyboard hotkey. This button is not available on mobile devices.
 
-#### Night Mode
+## Night Mode
 Save your night vision by automatically switching KIP to day or night mode based on sunrise and sunset hours (the Signal K Derived Data plugin is required for automatic switching). This feature can be enabled in the **Settings > Display** page. You can also manually set the mode by clicking the small Moon/Sun button in the upper right corner of the Actions menu. Note that if automatic switching is enabled, brightness will reset to the Signal K mode value.
 
-#### Multiple User Profiles
+## Multiple User Profiles
 KIP supports multiple user profiles, allowing different roles on board—such as captain, skipper, tactician, navigator, or engineer—to tailor the interface to their needs. Profiles can also be used to tie specific configuration arrangements to use cases or device form factors.

package/public/assets/help-docs/zones.md

@@ -1,4 +1,4 @@
-#### Harness the Power of Data State Notifications
+# Harness the Power of Data State Notifications
 Stay informed about the state of data emitted by Signal K. For example, Signal K can mark data states so that when depth or temperature sensors reach certain levels, KIP can visually or audibly alert the user. A depth of 3 meters or less might be flagged as alarming, prompting KIP to enhance the data presentation with additional visual or audio cues. This feature combines **Zones Configuration** and **Notification Methods** in Signal K.
 
 Zones and notifications are defined as metadata. If you have internet access, you can learn more about this topic at [Signal K Metadata](https://signalk.org/specification/1.7.0/doc/data_model_metadata.html). To configure Signal K's metadata, access the [Data Browser server page](/admin/#/databrowser) and toggle the **Meta Data** switch. You need to configure or add **methods** and **zones** for each path you want to monitor.
@@ -7,9 +7,9 @@ IMPORTANT: Zone range values use base units. For example, the speed unit for App
 
 You can consult path and unit specifications using the [Keys Reference (Vessel)](https://signalk.org/specification/1.7.0/doc/vesselsBranch.html) and [Keys Reference (Other)](https://signalk.org/specification/1.7.0/doc/otherBranches.html).
 
-##### Notification Configuration
+## Notification Configuration
 You can use KIP's **Settings > Notifications** tab to filter and override notification states, as well as configure audio prompts to suit your needs.
 
-##### Displaying Zones and Notifications Information
+## Displaying Zones and Notifications Information
 - **Notifications Menu**: This menu lists all active notifications along with their details, such as the path, severity level, and message content. From this menu, notifications can be silenced or resolved. The Notifications menu is hidden on the right side by default. When notifications are received, a large button will appear in the lower-right corner. Tapping or clicking this button will open the Notifications Menu. You can also access the menu at any time by swiping right.
 - **Individual Widgets**: Widgets such as **Numeric**, **Linear**, **Radial**, and **Steel Style** offer tailored visual representations of notifications. These widgets highlight relevant data ranges and provide an optimal user experience by integrating notifications into their design.

package/public/config.component.css.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["src/app/core/components/configuration/config.component.scss"],
-  "sourcesContent": [".descriptiveTexts {\n  font-size: 14px;\n}\n\n.flex-item-copy {\n  flex: 2 1 41%;\n  padding: 10px 20px 10px 20px;\n  border-radius: 15px;\n}\n\n.flex-item-reset {\n  flex: 1 1 100%;\n  padding: 10px 20px 10px 20px;\n  border-radius: 15px;\n}\n\na {\n  font-size: 14px;\n}\na:hover {\n  text-decoration: underline;\n  cursor: pointer;\n}\n\na:link, a:visited {\n  color: rgb(138, 180, 248);\n  text-decoration: none;\n}\n\n.warningText {\n  padding-left: 15px;\n}\n\n.no-token-notice {\n  height: 58px;\n  contain: content;\n  text-align: center;\n  font-style: italic;\n}\n\n.mat-mdc-radio-button ~ .mat-radio-button {\n  margin-right: 16px;\n  margin-left: 16px;\n}\n\n.config-row {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  width: 100%;\n}\n\n.config-column {\n  display: flex;\n  flex-direction: column;\n  flex-basis: 100%;\n  flex: 1;\n  margin: 0px 10px 0px 10px;\n}\n\n.sources-radio-group {\n  display: flex;\n  flex-direction: column;\n  margin: 15px 0;\n}\n\n.sources-radio-button {\n  margin: 5px;\n  margin-left: 0px !important;\n}\n\n.select-config {\n  margin-left: 0px;\n}\n\n.config-row {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  width: 100%;\n}\n\n.btn-div {\n  align-self: center;\n}\n\n.config-operation-container {\n  display: grid;\n  grid-template-columns: [col-start] auto [col1-end] min-content [col2-end];\n  grid-template-rows: [row-start] max-content [row1-end] max-content [row2-end];\n  grid-template-areas:\n    \"download-txt download-btn\"\n    \"upload-txt upload-btn\"\n    \"demo-txt demo-btn\"\n    \"reset-txt reset-btn\"\n    \"config-txt config-btn\";\n  row-gap: 20px;\n  column-gap: 10px;\n}\n\n.upload-txt {\n  grid-area: upload-txt;\n}\n\n.upload-btn {\n  grid-area: upload-btn;\n}\n\n.download-txt {\n  grid-area: download-txt;\n}\n\n.download-btn {\n  grid-area: download-btn;\n}\n\n.demo-txt {\n  grid-area: demo-txt;\n}\n\n.demo-btn {\n  grid-area: demo-btn;\n}\n\n.reset-txt {\n  grid-area: reset-txt;\n}\n\n.reset-btn {\n  grid-area: reset-btn;\n}\n\n.config-txt {\n  grid-area: config-txt;\n}\n\n.config-btn {\n  grid-area: config-btn;\n}\n"],
-  "mappings": ";AAAA,CAAA;AACE,aAAA;;AAGF,CAAA;AACE,QAAA,EAAA,EAAA;AACA,WAAA,KAAA,KAAA,KAAA;AACA,iBAAA;;AAGF,CAAA;AACE,QAAA,EAAA,EAAA;AACA,WAAA,KAAA,KAAA,KAAA;AACA,iBAAA;;AAGF;AACE,aAAA;;AAEF,CAAA;AACE,mBAAA;AACA,UAAA;;AAGF,CAAA;AAAA,CAAA;AACE,SAAA,IAAA,GAAA,EAAA,GAAA,EAAA;AACA,mBAAA;;AAGF,CAAA;AACE,gBAAA;;AAGF,CAAA;AACE,UAAA;AACA,WAAA;AACA,cAAA;AACA,cAAA;;AAGF,CAAA,qBAAA,EAAA,CAAA;AACE,gBAAA;AACA,eAAA;;AAGF,CAAA;AACE,WAAA;AACA,kBAAA;AACA,aAAA;AACA,SAAA;;AAGF,CAAA;AACE,WAAA;AACA,kBAAA;AACA,cAAA;AACA,QAAA;AACA,UAAA,IAAA,KAAA,IAAA;;AAGF,CAAA;AACE,WAAA;AACA,kBAAA;AACA,UAAA,KAAA;;AAGF,CAAA;AACE,UAAA;AACA,eAAA;;AAGF,CAAA;AACE,eAAA;;AAGF,CA9BA;AA+BE,WAAA;AACA,kBAAA;AACA,aAAA;AACA,SAAA;;AAGF,CAAA;AACE,cAAA;;AAGF,CAAA;AACE,WAAA;AACA,yBAAA,CAAA,WAAA,KAAA,CAAA,UAAA,YAAA,CAAA;AACA,sBAAA,CAAA,WAAA,YAAA,CAAA,UAAA,YAAA,CAAA;AACA,uBACE,4BAAA,wBAAA,oBAAA,sBAAA;AAKF,WAAA;AACA,cAAA;;AAGF,CAAA;AACE,aAAA;;AAGF,CAAA;AACE,aAAA;;AAGF,CAAA;AACE,aAAA;;AAGF,CAAA;AACE,aAAA;;AAGF,CAAA;AACE,aAAA;;AAGF,CAAA;AACE,aAAA;;AAGF,CAAA;AACE,aAAA;;AAGF,CAAA;AACE,aAAA;;AAGF,CAAA;AACE,aAAA;;AAGF,CAAA;AACE,aAAA;;",
+  "sourcesContent": [".flex-item-copy {\n  flex: 2 1 41%;\n  padding: 10px 20px 10px 20px;\n  border-radius: 15px;\n}\n\n.flex-item-reset {\n  flex: 1 1 100%;\n  padding: 10px 20px 10px 20px;\n  border-radius: 15px;\n}\n\na {\n  font-size: 14px;\n}\na:hover {\n  text-decoration: underline;\n  cursor: pointer;\n}\n\na:link, a:visited {\n  color: rgb(138, 180, 248);\n  text-decoration: none;\n}\n\n.warningText {\n  padding-left: 15px;\n}\n\n.no-token-notice {\n  height: 58px;\n  contain: content;\n  text-align: center;\n  font-style: italic;\n}\n\n.mat-mdc-radio-button ~ .mat-radio-button {\n  margin-right: 16px;\n  margin-left: 16px;\n}\n\n.config-row {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  width: 100%;\n}\n\n.config-column {\n  display: flex;\n  flex-direction: column;\n  flex-basis: 100%;\n  flex: 1;\n  margin: 0px 10px 0px 10px;\n}\n\n.sources-radio-group {\n  display: flex;\n  flex-direction: column;\n  margin: 15px 0;\n}\n\n.sources-radio-button {\n  margin: 5px;\n  margin-left: 0px !important;\n}\n\n.select-config {\n  margin-left: 0px;\n}\n\n.config-row {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  width: 100%;\n}\n\n.btn-div {\n  align-self: center;\n}\n\n.adv-btn {\n  width: 100%;\n}\n\n.config-operation-container {\n  display: grid;\n  grid-template-columns: [col-start] auto [col1-end] min-content [col2-end];\n  grid-template-rows: [row-start] max-content [row1-end] max-content [row2-end];\n  grid-template-areas:\n    \"download-txt download-btn\"\n    \"upload-txt upload-btn\"\n    \"demo-txt demo-btn\"\n    \"reset-txt reset-btn\"\n    \"config-txt config-btn\";\n  row-gap: 20px;\n  column-gap: 10px;\n}\n\n.upload-txt {\n  grid-area: upload-txt;\n}\n\n.upload-btn {\n  grid-area: upload-btn;\n}\n\n.download-txt {\n  grid-area: download-txt;\n}\n\n.download-btn {\n  grid-area: download-btn;\n}\n\n.demo-txt {\n  grid-area: demo-txt;\n}\n\n.demo-btn {\n  grid-area: demo-btn;\n}\n\n.reset-txt {\n  grid-area: reset-txt;\n}\n\n.reset-btn {\n  grid-area: reset-btn;\n}\n\n.config-txt {\n  grid-area: config-txt;\n}\n\n.config-btn {\n  grid-area: config-btn;\n}\n"],
+  "mappings": ";AAAA,CAAA;AACE,QAAA,EAAA,EAAA;AACA,WAAA,KAAA,KAAA,KAAA;AACA,iBAAA;;AAGF,CAAA;AACE,QAAA,EAAA,EAAA;AACA,WAAA,KAAA,KAAA,KAAA;AACA,iBAAA;;AAGF;AACE,aAAA;;AAEF,CAAA;AACE,mBAAA;AACA,UAAA;;AAGF,CAAA;AAAA,CAAA;AACE,SAAA,IAAA,GAAA,EAAA,GAAA,EAAA;AACA,mBAAA;;AAGF,CAAA;AACE,gBAAA;;AAGF,CAAA;AACE,UAAA;AACA,WAAA;AACA,cAAA;AACA,cAAA;;AAGF,CAAA,qBAAA,EAAA,CAAA;AACE,gBAAA;AACA,eAAA;;AAGF,CAAA;AACE,WAAA;AACA,kBAAA;AACA,aAAA;AACA,SAAA;;AAGF,CAAA;AACE,WAAA;AACA,kBAAA;AACA,cAAA;AACA,QAAA;AACA,UAAA,IAAA,KAAA,IAAA;;AAGF,CAAA;AACE,WAAA;AACA,kBAAA;AACA,UAAA,KAAA;;AAGF,CAAA;AACE,UAAA;AACA,eAAA;;AAGF,CAAA;AACE,eAAA;;AAGF,CA9BA;AA+BE,WAAA;AACA,kBAAA;AACA,aAAA;AACA,SAAA;;AAGF,CAAA;AACE,cAAA;;AAGF,CAAA;AACE,SAAA;;AAGF,CAAA;AACE,WAAA;AACA,yBAAA,CAAA,WAAA,KAAA,CAAA,UAAA,YAAA,CAAA;AACA,sBAAA,CAAA,WAAA,YAAA,CAAA,UAAA,YAAA,CAAA;AACA,uBACE,4BAAA,wBAAA,oBAAA,sBAAA;AAKF,WAAA;AACA,cAAA;;AAGF,CAAA;AACE,aAAA;;AAGF,CAAA;AACE,aAAA;;AAGF,CAAA;AACE,aAAA;;AAGF,CAAA;AACE,aAAA;;AAGF,CAAA;AACE,aAAA;;AAGF,CAAA;AACE,aAAA;;AAGF,CAAA;AACE,aAAA;;AAGF,CAAA;AACE,aAAA;;AAGF,CAAA;AACE,aAAA;;AAGF,CAAA;AACE,aAAA;;",
   "names": []
 }

package/public/dashboard-scroller.component.css.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["src/app/core/components/dashboard-scroller/dashboard-scroller.component.scss"],
-  "sourcesContent": [":host {\n  pointer-events: none;\n}\n\n.page-scroll-title {\n  position: absolute;\n  top: 50%;\n  right: 54px;\n  transform: translate(0%, -50%);\n  z-index: 100;\n  cursor: default;\n  text-align: center;\n  padding: 10px;\n  color: var(--sys-tertiary);\n}\n\n.page-scroll-page-number {\n  position: absolute;\n  top: 50%;\n  right: 15px;\n  transform: translate(0%, -50%);\n  z-index: 100;\n  cursor: default;\n  display: grid;\n  padding: 0px;\n}\n\n.page-scroll-container {\n  opacity: 0;\n  background-color: var(--sys-inverse-on-surface);\n  border-radius: 10px;\n  border: 1px solid var(--sys-inverse-on-surface);\n}\n\n.page-icon {\n  transform: scale(0.75);\n}\n"],
+  "sourcesContent": [":host {\n  pointer-events: none;\n}\n\n.page-scroll-title {\n  position: absolute;\n  top: 50%;\n  right: 54px;\n  transform: translate(0%, -50%);\n  z-index: 100;\n  cursor: default;\n  text-align: center;\n  padding: 10px;\n  color: var(--mat-sys-tertiary);\n}\n\n.page-scroll-page-number {\n  position: absolute;\n  top: 50%;\n  right: 15px;\n  transform: translate(0%, -50%);\n  z-index: 100;\n  cursor: default;\n  display: grid;\n  padding: 0px;\n}\n\n.page-scroll-container {\n  opacity: 0;\n  background-color: var(--mat-sys-inverse-on-surface);\n  border-radius: 10px;\n  border: 1px solid var(--mat-sys-inverse-on-surface);\n}\n\n.page-icon {\n  transform: scale(0.75);\n}\n"],
   "mappings": ";AAAA;AACE,kBAAA;;AAGF,CAAA;AACE,YAAA;AACA,OAAA;AACA,SAAA;AACA,aAAA,UAAA,EAAA,EAAA;AACA,WAAA;AACA,UAAA;AACA,cAAA;AACA,WAAA;AACA,SAAA,IAAA;;AAGF,CAAA;AACE,YAAA;AACA,OAAA;AACA,SAAA;AACA,aAAA,UAAA,EAAA,EAAA;AACA,WAAA;AACA,UAAA;AACA,WAAA;AACA,WAAA;;AAGF,CAAA;AACE,WAAA;AACA,oBAAA,IAAA;AACA,iBAAA;AACA,UAAA,IAAA,MAAA,IAAA;;AAGF,CAAA;AACE,aAAA,MAAA;;",
   "names": []
 }

package/public/dashboard.component.css.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["src/app/core/components/dashboard/dashboard.component.scss"],
-  "sourcesContent": [":host {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  height: 100%;\n  width: 100%;\n}\n\n.grid-stack {\n  width: 100%;\n}\n\n.edit-layout-close-icon {\n  position: absolute;\n  bottom: 20px;\n  right: 20px;\n  cursor: pointer;\n  z-index: 100;\n}\n.layout-action-btn {\n  color: var(--mdc-filled-button-label-text-color, var(--mat-app-on-primary));\n  background-color: var(--mdc-filled-button-container-color, var(--mat-app-primary));\n}\n"],
-  "mappings": ";AAAA;AACE,WAAA;AACA,kBAAA;AACA,aAAA;AACA,UAAA;AACA,SAAA;;AAGF,CAAA;AACE,SAAA;;AAGF,CAAA;AACE,YAAA;AACA,UAAA;AACA,SAAA;AACA,UAAA;AACA,WAAA;;AAEF,CAAA;AACE,SAAA,IAAA,oCAAA,EAAA,IAAA;AACA,oBAAA,IAAA,mCAAA,EAAA,IAAA;;",
+  "sourcesContent": [":host {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  height: 100%;\n  width: 100%;\n}\n\n.grid-stack {\n  width: 100%;\n}\n\n.edit-layout-close-icon {\n  position: absolute;\n  bottom: 20px;\n  right: 20px;\n  cursor: pointer;\n  z-index: 100;\n}\n.layout-action-btn {\n  color: var(--mat-sys-on-primary);\n  background-color: var(--mat-sys-primary);\n}\n"],
+  "mappings": ";AAAA;AACE,WAAA;AACA,kBAAA;AACA,aAAA;AACA,UAAA;AACA,SAAA;;AAGF,CAAA;AACE,SAAA;;AAGF,CAAA;AACE,YAAA;AACA,UAAA;AACA,SAAA;AACA,UAAA;AACA,WAAA;;AAEF,CAAA;AACE,SAAA,IAAA;AACA,oBAAA,IAAA;;",
   "names": []
 }

package/public/dashboards-editor.component.css.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["src/app/core/components/dashboards-editor/dashboards-editor.component.scss"],
-  "sourcesContent": [":host {\n  display: block;\n  height: 100%;\n  width: 100%;\n}\n\n.dashboard-manage {\n  box-sizing: border-box;\n  padding: 0px 60px;\n  width: calc(100%);\n  height: calc(100% - 75px - 24px);\n  display: flex;\n  flex-wrap: wrap;\n  align-items: flex-start;\n  justify-content: space-around;\n  overflow-y: scroll;\n  scroll-behavior: smooth;\n}\n\n.dashboard-card {\n  position: relative;\n  height: 200px;\n  width: 300px;\n  margin: 10px;\n  border-radius: 15px;\n  padding: 10px;\n  align-content: center;\n  text-align: center;\n}\n\n.dashboard-item {\n  background-color: var(--kip-widget-card-background-color);\n  border: 1px solid var(--sys-surface-container-highest);\n}\n\n.dashboard-item-add {\n  background-color: var(--sys-surface-container);\n  border: 1px solid var(--sys-surface-container-highest);\n}\n\n.dashboard-add-btn {\n  align-content: center;\n  text-align: center;\n  border: dashed 1px var(--mdc-outlined-button-outline-color);\n}\n\n.item-index {\n  display: inline-flex;\n  flex-wrap: wrap;\n  height: 42px;\n  width: 42px;\n  background-color: var(--sys-tertiary-fixed);\n  color: var(--kip-widget-action-button-color);\n  border-radius: 50%;\n  align-content: center;\n  align-items: center;\n  justify-content: center;\n  font-weight: bold;\n}\n\n.cdk-drag-preview {\n  box-sizing: border-box;\n  border-radius: 4px;\n  box-shadow: 0 5px 5px -3px var(--sys-on-primary-container),\n              0 8px 10px 1px var(--sys-on-primary-container),\n              0 3px 14px 2px var(--sys-on-primary-container);\n}\n\n.cdk-drag-placeholder {\n  opacity: 0;\n}\n\n.cdk-drag-animating {\n  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);\n}\n"],
-  "mappings": ";AAAA;AACE,WAAA;AACA,UAAA;AACA,SAAA;;AAGF,CAAA;AACE,cAAA;AACA,WAAA,IAAA;AACA,SAAA;AACA,UAAA,KAAA,KAAA,EAAA,KAAA,EAAA;AACA,WAAA;AACA,aAAA;AACA,eAAA;AACA,mBAAA;AACA,cAAA;AACA,mBAAA;;AAGF,CAAA;AACE,YAAA;AACA,UAAA;AACA,SAAA;AACA,UAAA;AACA,iBAAA;AACA,WAAA;AACA,iBAAA;AACA,cAAA;;AAGF,CAAA;AACE,oBAAA,IAAA;AACA,UAAA,IAAA,MAAA,IAAA;;AAGF,CAAA;AACE,oBAAA,IAAA;AACA,UAAA,IAAA,MAAA,IAAA;;AAGF,CAAA;AACE,iBAAA;AACA,cAAA;AACA,UAAA,OAAA,IAAA,IAAA;;AAGF,CAAA;AACE,WAAA;AACA,aAAA;AACA,UAAA;AACA,SAAA;AACA,oBAAA,IAAA;AACA,SAAA,IAAA;AACA,iBAAA;AACA,iBAAA;AACA,eAAA;AACA,mBAAA;AACA,eAAA;;AAGF,CAAA;AACE,cAAA;AACA,iBAAA;AACA;IAAA,EAAA,IAAA,IAAA,KAAA,IAAA,2BAAA;IAAA,EAAA,IAAA,KAAA,IAAA,IAAA,2BAAA;IAAA,EAAA,IAAA,KAAA,IAAA,IAAA;;AAKF,CAAA;AACE,WAAA;;AAGF,CAAA;AACE,cAAA,UAAA,MAAA,aAAA,CAAA,EAAA,CAAA,EAAA,GAAA,EAAA;;",
+  "sourcesContent": [":host {\n  display: block;\n  height: 100%;\n  width: 100%;\n}\n\n.dashboard-manage {\n  box-sizing: border-box;\n  padding: 0px 60px;\n  width: calc(100%);\n  height: calc(100% - 75px - 24px);\n  display: flex;\n  flex-wrap: wrap;\n  align-items: flex-start;\n  justify-content: space-around;\n  overflow-y: scroll;\n  scroll-behavior: smooth;\n}\n\n.dashboard-card {\n  position: relative;\n  height: 200px;\n  width: 300px;\n  margin: 10px;\n  border-radius: 15px;\n  padding: 10px;\n  align-content: center;\n  text-align: center;\n}\n\n.dashboard-item {\n  background-color: var(--kip-widget-card-background-color);\n  border: 1px solid var(--mat-sys-surface-container-highest);\n}\n\n.dashboard-item-add {\n  background-color: var(--mat-sys-surface-container);\n  border: 1px solid var(--mat-sys-surface-container-highest);\n}\n\n.dashboard-add-btn {\n  align-content: center;\n  text-align: center;\n  border: dashed 1px var(--mdc-outlined-button-outline-color);\n}\n\n.item-index {\n  display: inline-flex;\n  flex-wrap: wrap;\n  height: 42px;\n  width: 42px;\n  background-color: var(--mat-sys-tertiary-fixed);\n  color: var(--mat-sys-surface-bright);\n  border-radius: 50%;\n  align-content: center;\n  align-items: center;\n  justify-content: center;\n  font-weight: bold;\n}\n\n.cdk-drag-preview {\n  box-sizing: border-box;\n  border-radius: 4px;\n  box-shadow: 0 5px 5px -3px var(--mat-sys-on-primary-container),\n              0 8px 10px 1px var(--mat-sys-on-primary-container),\n              0 3px 14px 2px var(--mat-sys-on-primary-container);\n}\n\n.cdk-drag-placeholder {\n  opacity: 0;\n}\n\n.cdk-drag-animating {\n  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);\n}\n"],
+  "mappings": ";AAAA;AACE,WAAA;AACA,UAAA;AACA,SAAA;;AAGF,CAAA;AACE,cAAA;AACA,WAAA,IAAA;AACA,SAAA;AACA,UAAA,KAAA,KAAA,EAAA,KAAA,EAAA;AACA,WAAA;AACA,aAAA;AACA,eAAA;AACA,mBAAA;AACA,cAAA;AACA,mBAAA;;AAGF,CAAA;AACE,YAAA;AACA,UAAA;AACA,SAAA;AACA,UAAA;AACA,iBAAA;AACA,WAAA;AACA,iBAAA;AACA,cAAA;;AAGF,CAAA;AACE,oBAAA,IAAA;AACA,UAAA,IAAA,MAAA,IAAA;;AAGF,CAAA;AACE,oBAAA,IAAA;AACA,UAAA,IAAA,MAAA,IAAA;;AAGF,CAAA;AACE,iBAAA;AACA,cAAA;AACA,UAAA,OAAA,IAAA,IAAA;;AAGF,CAAA;AACE,WAAA;AACA,aAAA;AACA,UAAA;AACA,SAAA;AACA,oBAAA,IAAA;AACA,SAAA,IAAA;AACA,iBAAA;AACA,iBAAA;AACA,eAAA;AACA,mBAAA;AACA,eAAA;;AAGF,CAAA;AACE,cAAA;AACA,iBAAA;AACA;IAAA,EAAA,IAAA,IAAA,KAAA,IAAA,+BAAA;IAAA,EAAA,IAAA,KAAA,IAAA,IAAA,+BAAA;IAAA,EAAA,IAAA,KAAA,IAAA,IAAA;;AAKF,CAAA;AACE,WAAA;;AAGF,CAAA;AACE,cAAA,UAAA,MAAA,aAAA,CAAA,EAAA,CAAA,EAAA,GAAA,EAAA;;",
   "names": []
 }

package/public/data-inspector.component.css.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["src/app/core/components/data-inspector/data-inspector.component.css"],
-  "sourcesContent": [".full-display {\n  width: 100%;\n  position: relative;\n  z-index: 500;\n}\n\n.full-height {\n  height: 100%;\n}\n\n.mat-column-path {\n  flex: 0 0 50%;\n  width: 50%;\n}\n\n.mat-mdc-table {\n  overflow: auto;\n}\n\n.table-container{\n  /* max-height: 74vh; */\n  overflow: auto;\n  height: auto;\n}\n\n.paginator{\n  width: 100%;\n  position: sticky;\n}\n\n.filter-field {\n  padding: 15px 20px;\n  width: calc(100% - 40px);\n}\n\n.flex-container {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: center;\n  align-items: stretch;\n  gap: 10px;\n}\n\n.pathCell {\n  flex: 1 1 50%;\n}\n\n.pathHeader {\n  flex: 1 1 50%;\n}\n\n.dataHeader {\n  flex: 1 1 50%;\n}\n\n.dataCell {\n  flex: 1 1 50%;\n  flex-flow: column;\n  flex-wrap: wrap;\n  gap: 2px;\n}\n\n@media screen and (max-width: 750px) {\n  .pathHeader {\n    flex: 1 1 50%;\n  }\n\n  .dataHeader {\n    flex: 1 1 50%;\n  }\n\n  .dataCell {\n    flex: 1 1 100%;\n  }\n\n  .dataCell {\n    flex: 1 1 100%;\n    margin-left: 24px;\n  }\n\n  .mat-mdc-table .mat-mdc-row {\n    flex-direction: row;\n    flex-wrap: wrap;\n  }\n\n  .mat-mdc-table .mat-mdc-cell:before {\n    content: attr(data-label);\n    float: left;\n    padding-right: 5px;\n  }\n\n  mat-row::after {\n    min-height: auto;\n    padding-bottom: 10px;\n  }\n\n  .dataRow {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  .actionCell {\n    margin-left: 24px;\n  }\n\n}\n"],
+  "sourcesContent": [".full-display {\n  width: 100%;\n  position: relative;\n  z-index: 101;\n}\n\n.full-height {\n  height: 100%;\n}\n\n.mat-column-path {\n  flex: 0 0 50%;\n  width: 50%;\n}\n\n.mat-mdc-table {\n  overflow: auto;\n}\n\n.table-container{\n  /* max-height: 74vh; */\n  overflow: auto;\n  height: auto;\n}\n\n.paginator{\n  width: 100%;\n  position: sticky;\n}\n\n.filter-field {\n  padding: 15px 20px;\n  width: calc(100% - 40px);\n}\n\n.flex-container {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: center;\n  align-items: stretch;\n  gap: 10px;\n}\n\n.pathCell {\n  flex: 1 1 50%;\n}\n\n.pathHeader {\n  flex: 1 1 50%;\n}\n\n.dataHeader {\n  flex: 1 1 50%;\n}\n\n.dataCell {\n  flex: 1 1 50%;\n  flex-flow: column;\n  flex-wrap: wrap;\n  gap: 2px;\n}\n\n@media screen and (max-width: 750px) {\n  .pathHeader {\n    flex: 1 1 50%;\n  }\n\n  .dataHeader {\n    flex: 1 1 50%;\n  }\n\n  .dataCell {\n    flex: 1 1 100%;\n  }\n\n  .dataCell {\n    flex: 1 1 100%;\n    margin-left: 24px;\n  }\n\n  .mat-mdc-table .mat-mdc-row {\n    flex-direction: row;\n    flex-wrap: wrap;\n  }\n\n  .mat-mdc-table .mat-mdc-cell:before {\n    content: attr(data-label);\n    float: left;\n    padding-right: 5px;\n  }\n\n  mat-row::after {\n    min-height: auto;\n    padding-bottom: 10px;\n  }\n\n  .dataRow {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  .actionCell {\n    margin-left: 24px;\n  }\n\n}\n"],
   "mappings": ";AAAA,CAAC;AACC,SAAO;AACP,YAAU;AACV,WAAS;AACX;AAEA,CAAC;AACC,UAAQ;AACV;AAEA,CAAC;AACC,QAAM,EAAE,EAAE;AACV,SAAO;AACT;AAEA,CAAC;AACC,YAAU;AACZ;AAEA,CAAC;AAEC,YAAU;AACV,UAAQ;AACV;AAEA,CAAC;AACC,SAAO;AACP,YAAU;AACZ;AAEA,CAAC;AACC,WAAS,KAAK;AACd,SAAO,KAAK,KAAK,EAAE;AACrB;AAEA,CAAC;AACC,WAAS;AACT,kBAAgB;AAChB,aAAW;AACX,mBAAiB;AACjB,eAAa;AACb,OAAK;AACP;AAEA,CAAC;AACC,QAAM,EAAE,EAAE;AACZ;AAEA,CAAC;AACC,QAAM,EAAE,EAAE;AACZ;AAEA,CAAC;AACC,QAAM,EAAE,EAAE;AACZ;AAEA,CAAC;AACC,QAAM,EAAE,EAAE;AACV,aAAW;AACX,aAAW;AACX,OAAK;AACP;AAEA,OAAO,OAAO,IAAI,CAAC,SAAS,EAAE;AAC5B,GAhBD;AAiBG,UAAM,EAAE,EAAE;AACZ;AAEA,GAhBD;AAiBG,UAAM,EAAE,EAAE;AACZ;AAEA,GAhBD;AAiBG,UAAM,EAAE,EAAE;AACZ;AAEA,GApBD;AAqBG,UAAM,EAAE,EAAE;AACV,iBAAa;AACf;AAEA,GAlED,cAkEgB,CAAC;AACd,oBAAgB;AAChB,eAAW;AACb;AAEA,GAvED,cAuEgB,CAAC,YAAY;AAC1B,aAAS,KAAK;AACd,WAAO;AACP,mBAAe;AACjB;AAEA,SAAO;AACL,gBAAY;AACZ,oBAAgB;AAClB;AAEA,GAAC;AACC,oBAAgB;AAChB,iBAAa;AACf;AAEA,GAAC;AACC,iBAAa;AACf;AAEF;",
   "names": []
 }

package/public/datasets.component.css.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["src/app/core/components/datasets/datasets.component.scss"],
-  "sourcesContent": [".full-display {\n  width: 100%;\n  height: 100%;\n  position: relative;\n  z-index: 500;\n}\n\n.filter {\n  margin-bottom: 10px;\n}\n\n.buttons {\n  margin-top: 10px;\n}\n\n.mat-column-actions {\n  text-align: end;\n}\n\n.buttons {\n  margin-right: 5px;\n}\n\n.pathCell {\n  flex: 1 1 50%;\n}\n\n.pathHeader {\n  flex: 1 1 50%;\n}\n\n.dataHeader {\n  flex: 1 1 10%;\n  justify-content: center;\n}\n\n.dataCell {\n  flex: 1 1 10%;\n  justify-content: center;\n}\n\n.actionHeader {\n  flex: 1 1 20%;\n}\n\n.actionCell {\n  flex: 1 1 20%;\n  justify-content: end;\n}\n\n@media screen and (max-width: 750px) {\n  .pathHeader {\n    flex: 1 1 30%;\n  }\n\n  .dataHeader {\n    flex: 1 1 30%;\n  }\n\n  .actionHeader {\n    display: none;\n  }\n\n  .mat-mdc-table .mat-mdc-cell:before {\n    content: attr(data-label);\n    float: left;\n    padding-right: 5px;\n  }\n\n  mat-row::after {\n    min-height: auto;\n    padding-bottom: 10px;\n  }\n\n  .dataRow {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  .dataCell {\n    margin-left: 24px;\n  }\n\n  .actionCell {\n    margin-left: 24px;\n  }\n\n}\n"],
+  "sourcesContent": [".full-display {\n  width: 100%;\n  height: 100%;\n  position: relative;\n  z-index: 101;\n}\n\n.filter {\n  margin-bottom: 10px;\n}\n\n.buttons {\n  margin-top: 10px;\n}\n\n.mat-column-actions {\n  text-align: end;\n}\n\n.buttons {\n  margin-right: 5px;\n}\n\n.pathCell {\n  flex: 1 1 50%;\n}\n\n.pathHeader {\n  flex: 1 1 50%;\n}\n\n.dataHeader {\n  flex: 1 1 10%;\n  justify-content: center;\n}\n\n.dataCell {\n  flex: 1 1 10%;\n  justify-content: center;\n}\n\n.actionHeader {\n  flex: 1 1 20%;\n}\n\n.actionCell {\n  flex: 1 1 20%;\n  justify-content: end;\n}\n\n@media screen and (max-width: 750px) {\n  .pathHeader {\n    flex: 1 1 30%;\n  }\n\n  .dataHeader {\n    flex: 1 1 30%;\n  }\n\n  .actionHeader {\n    display: none;\n  }\n\n  .mat-mdc-table .mat-mdc-cell:before {\n    content: attr(data-label);\n    float: left;\n    padding-right: 5px;\n  }\n\n  mat-row::after {\n    min-height: auto;\n    padding-bottom: 10px;\n  }\n\n  .dataRow {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  .dataCell {\n    margin-left: 24px;\n  }\n\n  .actionCell {\n    margin-left: 24px;\n  }\n\n}\n"],
   "mappings": ";AAAA,CAAA;AACE,SAAA;AACA,UAAA;AACA,YAAA;AACA,WAAA;;AAGF,CAAA;AACE,iBAAA;;AAGF,CAAA;AACE,cAAA;;AAGF,CAAA;AACE,cAAA;;AAGF,CARA;AASE,gBAAA;;AAGF,CAAA;AACE,QAAA,EAAA,EAAA;;AAGF,CAAA;AACE,QAAA,EAAA,EAAA;;AAGF,CAAA;AACE,QAAA,EAAA,EAAA;AACA,mBAAA;;AAGF,CAAA;AACE,QAAA,EAAA,EAAA;AACA,mBAAA;;AAGF,CAAA;AACE,QAAA,EAAA,EAAA;;AAGF,CAAA;AACE,QAAA,EAAA,EAAA;AACA,mBAAA;;AAGF,OAAA,OAAA,IAAA,CAAA,SAAA,EAAA;AACE,GAxBF;AAyBI,UAAA,EAAA,EAAA;;AAGF,GAxBF;AAyBI,UAAA,EAAA,EAAA;;AAGF,GAlBF;AAmBI,aAAA;;AAGF,GAAA,cAAA,CAAA,YAAA;AACE,aAAA,KAAA;AACA,WAAA;AACA,mBAAA;;AAGF,SAAA;AACE,gBAAA;AACA,oBAAA;;AAGF,GAAA;AACE,oBAAA;AACA,iBAAA;;AAGF,GA3CF;AA4CI,iBAAA;;AAGF,GAtCF;AAuCI,iBAAA;;;",
   "names": []
 }

package/public/index.html

@@ -45,8 +45,8 @@
     <link rel="apple-touch-startup-image" href="assets/apple-splash-640-1136.jpg" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
     <link rel="apple-touch-startup-image" href="assets/apple-splash-1136-640.jpg" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
   <link rel="stylesheet" href="styles.css"></head>
-  <body class="mat-typography mat-app-background">
-    <app-root>
+  <body class="mat-typography">
+    <app-root id="app-filter-wrapper">
       <div class="loader-container">
         <div id="loader">
           <div class="dot"></div>