neo.mjs 7.0.2 → 7.0.4

package/.github/workflows/cose-inactive-issues.yml

@@ -0,0 +1,23 @@
+name: Close inactive issues
+on:
+  schedule:
+    - cron: '30 1 * * *'
+
+jobs:
+  close-issues:
+    runs-on: ubuntu-latest
+    permissions:
+      issues: write
+      pull-requests: write
+    steps:
+      - uses: actions/stale@v9
+        with:
+          days-before-issue-stale: 90
+          days-before-issue-close: 14
+          exempt-issue-labels: 'no auto close'
+          stale-issue-label: 'stale'
+          stale-issue-message: 'This issue is stale because it has been open for 90 days with no activity.'
+          close-issue-message: 'This issue was closed because it has been inactive for 14 days since being marked as stale.'
+          days-before-pr-stale: -1
+          days-before-pr-close: -1
+          repo-token: ${{ secrets.GITHUB_TOKEN }}

package/README.md

@@ -11,20 +11,25 @@
   <a href="./CONTRIBUTING.md"><img src="https://img.shields.io/badge/PRs-welcome-green.svg?logo=GitHub&logoColor=white" alt="PRs Welcome"></a>
 </p>
 
-# Harness the Power of Multi-Threading for Ultra-Fast Frontends
+# Modern Enterprise-Ready JavaScript Framework
+Neo.mjs provides a new approach for building feature-rich web applications. Increase productivity by leveraging a vast
+component library and harness the power of multi-threading for extreme real-time performance.
 
-## Content
-1. <a href="#introduction">Introduction</a>
-2. <a href="#slack-channel">Slack Channel for questions & feedback</a>
-3. <a href="#architectures">Scalable frontend architectures</a>
+Neo.mjs is the first frontend framework which can run a JavaScript module based dev mode
+without compilations. This makes debugging easier and reduces development costs.
 
-</br></br>
-<h2 id="introduction">1. Introduction</h2>
-Neo.mjs is **not** intended for rather simple & static websites.
+In case you care about scalability, extensibility or solid architectures, congratulations,
+you have found the right spot.
 
-The Framework does not focus primarily on a fast first rendering experience for new users,
-but instead on a super-fast update & navigation experience for returning users.
+## Content
+1. <a href="#introduction">Introduction</a>
+2. <a href="#use-cases">Potential Use Cases</a>
+3. <a href="#slack-channel">Slack Channel for questions & feedback</a>
+4. <a href="#getting-started">Getting Started</a>
+5. <a href="#cli">Command-Line Interface</a>
+6. <a href="#blog">Blog</a>
 
+</br><h2 id="introduction">1. Introduction</h2>
 Neo.mjs drives the OMT (off the main thread) paradigm into perfection,
 which is intended to move expensive tasks into Workers.
 
@@ -43,30 +48,39 @@ Neo.mjs also provides sharing state across multiple Browser-Windows.
 So far, it is the only Framework which enables us to build complex multi-Window Apps
 without the need for a native shell.
 
-<img src="https://raw.githubusercontent.com/neomjs/pages/main/resources_pub/images/workers-setup-v4.png">
+<img src="./resources/images/workers-focus.svg">
+
+
+Neo.mjs is **not** intended for rather simple & static websites.
 
-Potential Use-Cases:
+The Framework does not focus primarily on a fast first rendering experience for new users,
+but instead on a super-fast update & navigation experience for returning users.
+
+
+</br><h2 id="use-cases">2. Potential Use-Cases</h2>
 1. Finance (Banking & Trading Apps)
 2. Data Science
 3. Web-based IDEs
 4. Multi-Window Data Visualisation
+5. Complex dynamic Forms
+6. "Desktop-like" Apps
+7. Enterprise Apps in general (e.g. Admin Dashboards)
 
-</br></br>
-<h2 id="slack-channel">2. Slack Channel for questions, ideas & feedback</h2>
+</br><h2 id="slack-channel">3. Slack Channel for questions, ideas & feedback</h2>
 Join our community:</br>
 <a href="https://join.slack.com/t/neomjs/shared_invite/zt-6c50ueeu-3E1~M4T9xkNnb~M_prEEOA"><img src="https://img.shields.io/badge/Slack-neo.mjs-brightgreen.svg?logo=slack&style=for-the-badge" alt="Join the Slack channel"></a>
 
+</br><h2 id="getting-started">4. Getting Started</h2>
+* Take a look at the <a href="./.github/GETTING_STARTED.md">Getting Started Guide</a>
+* Make sure to dive into the <a href="https://neomjs.com/dist/production/apps/portal/#/learn/Setup">Learning Section</a>
+* The most advanced tutorial to help you with getting up to speed is this one:</br>
+   <a href="https://neomjs.com/dist/production/apps/portal/#/learn/Earthquakes">Earthquakes Tutorial</a>
 
+</br><h2 id="cli">5. Command-Line Interface</h2>
+You can find an in-depth description here: <a href="./buildScripts/README.md">Neo.mjs CLI</a>
 
-</br></br>
-
-[Spoiler] We are in the middle of wrapping up the new Framework Website,
-which will include the first version of a self-study based Learning Section.
-
-We are aiming to release it on August 1st, 2024.
-
-The current development state is already inside the dev branch.
-
+</br><h2 id="blog">6. Blog</h2>
+All Blog Posts are listed here: <a href="https://neomjs.com/dist/production/apps/portal/#/blog">Neo.mjs Blog</a>
 
 </br></br>
 Copyright (c) 2015 - today, <a href="https://www.linkedin.com/in/tobiasuhlig/">Tobias Uhlig</a>

package/apps/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='7.0.2'
+         * @member {String} version='7.0.4'
          */
-        version: '7.0.2'
+        version: '7.0.4'
     }
 
     /**

package/apps/portal/Overwrites.mjs

@@ -4,16 +4,6 @@ Neo.overwrites = {
             Base: {
                 editRoute: false
             }
-        },
-        form: {
-            field: {
-                Base: {
-                    delayable: {
-                        fireChangeEvent    : null,
-                        fireUserChangeEvent: null
-                    }
-                }
-            }
         }
     }
 }

package/apps/portal/index.html

@@ -16,7 +16,7 @@
         "@type": "Organization",
         "name": "Neo.mjs"
       },
-      "datePublished": "2024-08-18",
+      "datePublished": "2024-08-27",
       "publisher": {
         "@type": "Organization",
         "name": "Neo.mjs"

package/apps/portal/view/home/FeatureSection.mjs

@@ -37,6 +37,7 @@ class FeatureSection extends Container {
          */
         headline_: null,
         /**
+         * Can either contain a route or a URL
          * @member {String|null} learnMoreRoute_=null
          */
         learnMoreRoute_: null,
@@ -136,7 +137,8 @@ class FeatureSection extends Container {
      * @protected
      */
     afterSetLearnMoreRoute(value, oldValue) {
-        this.getItem('learn-more-button').route = value
+        let targetConfig = value.startsWith('http') ? 'url' : 'route';
+        this.getItem('learn-more-button')[targetConfig] = value
     }
 
     /**

package/apps/portal/view/home/FooterContainer.mjs

@@ -111,7 +111,7 @@ class FooterContainer extends Container {
             }, {
                 module: Component,
                 cls   : ['neo-version'],
-                html  : 'v7.0.2'
+                html  : 'v7.0.4'
             }]
         }],
         /**

package/apps/portal/view/home/parts/Colors.mjs

@@ -20,9 +20,9 @@ class Colors extends FeatureSection {
          */
         headline: 'Amazing Potential',
         /**
-         * @member {String} learnMoreRoute='#/learn/WhyNeo-Speed'
+         * @member {String} learnMoreRoute='https://itnext.io/sharing-real-time-websocket-data-across-multiple-browser-windows-4e0538dd7563?source=friends_link&sk=9efb3e4f38c82fb3e04899c61bb5fcb8'
          */
-        learnMoreRoute: '#/learn/WhyNeo-Speed',
+        learnMoreRoute: 'https://itnext.io/sharing-real-time-websocket-data-across-multiple-browser-windows-4e0538dd7563?source=friends_link&sk=9efb3e4f38c82fb3e04899c61bb5fcb8',
         /**
          * @member {String} livePreviewCode
          */

package/buildScripts/README.md

@@ -11,8 +11,8 @@ You can run each script inside your terminal. E.g.:
 
 Make sure to call them on the top-level folder (the one containing the package.json).
 
-In case you want to pass program options, please use the node based calls instead. E.g.:
-> node ./buildScripts/buildAll.js -h
+In case you want to pass program options, use -- before adding options. E.g.:
+> npm run build-all -- -h
 
 All programs which are using options also have the visual inquirer interface in place.</br>
 So it is up to you if you prefer adding the options manually (e.g. for adding them into your own CI),</br>
@@ -25,15 +25,14 @@ where the framework is included as a node module, but needs to deploy to a top-l
 ## Content
 1. <a href="#build-all">build-all</a>
 2. <a href="#build-all-questions">build-all-questions</a>
-3. <a href="#build-my-apps">build-my-apps</a>
-4. <a href="#build-themes">build-themes</a>
-5. <a href="#build-threads">build-threads</a>
-6. <a href="#create-app">create-app</a>
-7. <a href="#generate-docs-json">generate-docs-json</a>
-8. <a href="#server-start">server-start</a>
+3. <a href="#build-themes">build-themes</a>
+4. <a href="#build-threads">build-threads</a>
+5. <a href="#create-app">create-app</a>
+6. <a href="#generate-docs-json">generate-docs-json</a>
+7. <a href="#server-start">server-start</a>
 
 ## build-all
-> node ./buildScripts/buildAll.js -f -n
+> npm run build-all
 
 It is strongly recommended to run this program after each git pull on this repo.
 
@@ -70,7 +69,7 @@ or dist/production.
 Source code: <a href="./buildAll.js">build-all</a>
 
 ## build-all-questions
-> node ./buildScripts/buildAll.js -f
+> npm run build-all-questions
 
 This entry point is running the build-all program without passing options,
 so we can select them using the inquirer interface.
@@ -130,64 +129,8 @@ neo.mjs buildAll
 
 Source code: <a href="./buildAll.js">build-all</a>
 
-## build-my-apps
-> node ./buildScripts/webpack/buildMyApps.js -f
-
-```bash
-Options:
-  -V, --version       output the version number
-  -i, --info          print environment debug info
-  -a, --apps <value>  "all", "Covid", "RealWorld", "RealWorld2", "SharedCovid", "SharedCovidChart", "SharedCovidGallery",
-                      "SharedCovidHelix", "SharedCovidMap", "SharedDialog", "SharedDialog2", "Website"
-  -e, --env <value>   "all", "dev", "prod"
-  -f, --framework    
-  -n, --noquestions  
-  -h, --help          display help for command
-```
-
-build-my-apps is very similar to build-threads => App.
-
-In both cases we are parsing <a href="../src/worker/App.mjs">worker/App</a>,
-which will dynamically import all Apps inside the src/app folder and the Docs App and create split chunks
-for all combinations. This enables you to add multiple Apps on one Page with close to zero overhead
-in dist/development & dist/production.
-
-The only difference to build-threads => App is that you can limit the generation of the App related index.html files,
-so it is a little faster.
-
-Let us take a look at the different inquirer steps:
-1. Pick the -e (env) option:
-```bash
-neo % npm run build-my-apps
-
-> neo.mjs@1.4.14 build-my-apps /Users/Shared/github/neomjs/neo
-> node ./buildScripts/webpack/buildMyApps.js -f
-
-neo.mjs buildMyApps
-? Please choose the environment: (Use arrow keys)
-❯ all 
-  dev 
-  prod 
-```
-2. Pick the -a (apps) option:
-```bash
-neo.mjs buildMyApps
-? Please choose the environment: all
-? Please choose which apps you want to build: (Press <space> to select, <a> to toggle all, <i> to invert selection)
-❯◯ Covid
- ◯ RealWorld
- ◯ RealWorld2
- ◯ SharedCovid
- ◯ SharedCovidChart
- ◯ SharedCovidGallery
- ◯ SharedCovidHelix
-(Move up and down to reveal more choices)
-```
-
-Source code: <a href="./webpack/buildMyApps.js">build-my-apps</a>
-
 ## build-themes
-> node ./buildScripts/webpack/buildThemes.js -f
+> npm run build-themes
 
 ```bash
 Options:
@@ -238,7 +181,7 @@ neo.mjs buildThemes
 Source code: <a href="./webpack/buildThemes.js">build-themes</a>
 
 ## build-threads
-> node ./buildScripts/webpack/buildThreads.js -f
+> npm run build-threads
 
 Since the default neo.mjs setup is using 3 workers, we have the following 4 threads to build:</br>
 "app", "data", "main", "vdom"
@@ -286,7 +229,7 @@ neo.mjs buildThreads
 Source code: <a href="./webpack/buildThreads.js">build-threads</a>
 
 ## create-app
-> node ./buildScripts/createApp.js
+> npm run create-app
 
 Again: In case you want to create an App (workspace) based on neo.mjs, you don't need to clone this repository.</br>
 Please take a look at the <a href="https://github.com/neomjs/create-app">create-app repository</a> (npx neo-app).
@@ -294,15 +237,16 @@ Please take a look at the <a href="https://github.com/neomjs/create-app">create-
 If you want to create a new Demo App inside the framework repo,
 using the create-app program makes sense, since you can work on the app & framework code in parallel.
 
-Using the default options, this will generate the following 3 files:
+Using the default options, this will generate the following 4 files:
 ```
 neo
  | - apps
  |    | - myapp
+ |    |    | - view
+ |    |    |    | - MainContainer.mjs
  |    |    | - app.mjs
- |    |    | - config.json
  |    |    | - index.html
- |    |    | - MainContainer.mjs
+ |    |    | - neo-config.json
 ```
 
 The program will also add the App config into buildScripts/webpack/json/myApps.json.
@@ -377,14 +321,15 @@ neo.mjs create-app
 No worries, you can easily change the options after you created your App shell.
 
 E.g. in case you want to add the MapboxGL main thread addon later on,
-you can add it inside your index.html file:
-```js
-Object.assign(Neo.config, {
-    appPath         : 'apps/myapp/app.mjs',
-    basePath        : '../../',
-    environment     : 'development',
-    mainThreadAddons: ['MapboxGL', 'Stylesheet']
-});
+you can add it inside your neo-config.json file:
+```json
+{
+    "appPath"         : "apps/myapp/app.mjs",
+    "basePath"        : "../../",
+    "environment"     : "development",
+    "mainPath"        : "./Main.mjs",
+    "mainThreadAddons": ["DragDrop", "MapboxGL", "Navigator", "Stylesheet"]
+}
 ```
 
 Regarding the -u (SharedWorkers) option:</br>
@@ -399,7 +344,7 @@ Using SharedWorkers, you need to open a separate Window to inspect them:</br>
 Source code: <a href="./buildScripts/createApp.js">create-app</a>
 
 ## generate-docs-json
-> node ./buildScripts/docs/jsdocx.js
+> npm run generate-docs-json
 
 neo.mjs is using jsdoc
 > https://github.com/jsdoc/jsdoc
@@ -414,7 +359,7 @@ There are several enhancements around it to polish it for our class system impro
 Source code: <a href="./docs/jsdocx.js">generate-docs-json</a>
 
 ## server-start
-> webpack serve -c ./buildScripts/webpack/webpack.server.config.js --open
+> npm run server-start
 
 To open JS modules locally inside your Browser you need a web-server, since importing files is not possible
 otherwise for security reasons. You could enable this on an OS level, but this is definitely not recommended.

package/examples/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='7.0.2'
+         * @member {String} version='7.0.4'
          */
-        version: '7.0.2'
+        version: '7.0.4'
     }
 
     /**

package/examples/table/container/MainContainer.mjs

@@ -148,6 +148,7 @@ class MainContainer extends ConfigurationViewport {
                                 ntype   : 'button',
                                 appName : this.appName,
                                 text    : '\u22ee',
+                                windowId: this.windowId,
                                 menu    : {
                                     items : [{
                                         text : 'Menu option 1'

package/examples/table/container/MainStore.mjs

@@ -45,7 +45,8 @@ class MainStore extends Store {
             colspan  : {firstname: 3},
             country  : 'Germany',
             firstname: 'Colspan 3',
-            githubId : 'random'
+            githubId : 'random',
+            lastname : ''
         }]
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "7.0.2",
+    "version": "7.0.4",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -53,15 +53,15 @@
         "fs-extra": "^11.2.0",
         "highlightjs-line-numbers.js": "^2.8.0",
         "inquirer": "^10.1.8",
-        "marked": "^14.0.0",
-        "monaco-editor": "^0.50.0",
+        "marked": "^14.1.0",
+        "monaco-editor": "0.50.0",
         "neo-jsdoc": "1.0.1",
         "neo-jsdoc-x": "1.0.5",
         "postcss": "^8.4.41",
         "sass": "^1.77.8",
         "siesta-lite": "5.5.2",
         "url": "^0.11.4",
-        "webpack": "^5.93.0",
+        "webpack": "^5.94.0",
         "webpack-cli": "^5.1.4",
         "webpack-dev-server": "^5.0.4",
         "webpack-hook-plugin": "^1.0.7",

package/resources/images/workers-focus.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background-color: #000;" version="1.1" width="100%" height="100%" viewBox="-10 -10 700 500"><style>
+    font, span {transition: opacity .5s ease-out;}
+    path, rect {transition: fill-opacity .5s ease-out, stroke-opacity .5s ease-out;}
+</style><defs><linearGradient x1="0%" y1="100%" x2="0%" y2="0%" id="mx-gradient-3e63dd-1-6c83dd-1-s-0"><stop offset="0%" style="stop-color: rgb(108, 131, 221); stop-opacity: 1;"/><stop offset="100%" style="stop-color: rgb(62, 99, 221); stop-opacity: 1;"/></linearGradient><linearGradient x1="0%" y1="0%" x2="0%" y2="100%" id="mx-gradient-ffcc99-1-fbc593-1-s-0"><stop offset="0%" style="stop-color: rgb(255, 204, 153); stop-opacity: 1;"/><stop offset="100%" style="stop-color: rgb(251, 197, 147); stop-opacity: 1;"/></linearGradient><linearGradient x1="0%" y1="100%" x2="0%" y2="0%" id="mx-gradient-008a00-1-00cc00-1-s-0"><stop offset="0%" style="stop-color: rgb(0, 204, 0); stop-opacity: 1;"/><stop offset="100%" style="stop-color: rgb(0, 138, 0); stop-opacity: 1;"/></linearGradient></defs><g><g data-cell-id="0"><g data-cell-id="1"><g data-cell-id="TvLHVO9ugg6I3p-DXBA7-1"><g><path d="M 486.37 240 L 553.63 240" fill="none" stroke="rgb(240, 240, 240)" stroke-opacity="var(--stroke-opacity)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 481.12 240 L 488.12 236.5 L 486.37 240 L 488.12 243.5 Z" fill-opacity="var(--fill-opacity)" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-opacity="var(--stroke-opacity)" stroke-miterlimit="10" pointer-events="all"/><path d="M 558.88 240 L 551.88 243.5 L 553.63 240 L 551.88 236.5 Z" fill-opacity="var(--fill-opacity)" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-opacity="var(--stroke-opacity)" stroke-miterlimit="10" pointer-events="all"/></g></g><g data-cell-id="TvLHVO9ugg6I3p-DXBA7-2"><g><path d="M 240.04 320 L 240 440 L 206.37 440" fill="none" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 201.12 440 L 208.12 436.5 L 206.37 440 L 208.12 443.5 Z" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="all"/></g></g><g data-cell-id="TvLHVO9ugg6I3p-DXBA7-3"><g><rect x="200" y="160" width="280" height="160" rx="24" ry="24" fill="url(#mx-gradient-3e63dd-1-6c83dd-1-s-0)" stroke="#8ba6ff" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 278px; height: 1px; padding-top: 240px; margin-left: 201px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><font style="font-size: 16px;">App Worker</font></div></div></div></foreignObject></g></g></g><g data-cell-id="TvLHVO9ugg6I3p-DXBA7-4"><g><rect x="360" y="280" width="120" height="40" rx="6" ry="6" fill="#cce5ff" stroke="#36393d" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 300px; margin-left: 361px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><font style="font-size: 13px;" color="#000000">Your App(s)</font></div></div></div></foreignObject></g></g></g><g data-cell-id="TvLHVO9ugg6I3p-DXBA7-5"><g><rect x="200" y="160" width="120" height="40" rx="6" ry="6" fill="#cce5ff" stroke="#36393d" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 180px; margin-left: 201px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><font style="font-size: 13px;" color="#000000">Framework</font></div></div></div></foreignObject></g></g></g><g data-cell-id="TvLHVO9ugg6I3p-DXBA7-6"><g><rect x="0" y="200" width="120" height="80" rx="12" ry="12" fill-opacity="var(--fill-opacity)" fill="url(#mx-gradient-3e63dd-1-6c83dd-1-s-0)" stroke="#8ba6ff" stroke-opacity="var(--stroke-opacity)" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;  opacity: var(--fill-opacity);"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 240px; margin-left: 1px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><span style="font-size: 13px;">Service Worker<br />(optional)</span></div></div></div></foreignObject></g></g></g><g data-cell-id="TvLHVO9ugg6I3p-DXBA7-7"><g><path d="M 126.37 260 L 193.63 260" fill="none" stroke="rgb(240, 240, 240)" stroke-opacity="var(--stroke-opacity)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 121.12 260 L 128.12 256.5 L 126.37 260 L 128.12 263.5 Z" fill-opacity="var(--fill-opacity)" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-opacity="var(--stroke-opacity)" stroke-miterlimit="10" pointer-events="all"/><path d="M 198.88 260 L 191.88 263.5 L 193.63 260 L 191.88 256.5 Z" fill-opacity="var(--fill-opacity)" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-opacity="var(--stroke-opacity)" stroke-miterlimit="10" pointer-events="all"/></g></g><g data-cell-id="TvLHVO9ugg6I3p-DXBA7-8"><g><path d="M 486.37 40 L 553.63 40" fill="none" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 481.12 40 L 488.12 36.5 L 486.37 40 L 488.12 43.5 Z" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="all"/><path d="M 558.88 40 L 551.88 43.5 L 553.63 40 L 551.88 36.5 Z" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="all"/></g></g><g data-cell-id="TvLHVO9ugg6I3p-DXBA7-9"><g><rect x="320" y="0" width="160" height="80" rx="12" ry="12" fill="url(#mx-gradient-3e63dd-1-6c83dd-1-s-0)" stroke="#8ba6ff" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 158px; height: 1px; padding-top: 40px; margin-left: 321px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><font style="font-size: 15px;">Data Worker</font></div></div></div></foreignObject></g></g></g><g data-cell-id="TvLHVO9ugg6I3p-DXBA7-10"><g><path d="M 400 153.63 L 400 86.37" fill="none" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 400 158.88 L 396.5 151.88 L 400 153.63 L 403.5 151.88 Z" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="all"/><path d="M 400 81.12 L 403.5 88.12 L 400 86.37 L 396.5 88.12 Z" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="all"/></g></g><g data-cell-id="TvLHVO9ugg6I3p-DXBA7-11"><g><rect x="560" y="0" width="120" height="80" rx="12" ry="12" fill="#647687" stroke="#314354" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 40px; margin-left: 561px;"><div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><font style="font-size: 14px;">Backend</font></div></div></div></foreignObject></g></g></g><g data-cell-id="TvLHVO9ugg6I3p-DXBA7-12"><g><path d="M 620 286.37 L 620 340 L 620 393.63" fill="none" stroke="rgb(240, 240, 240)" stroke-opacity="var(--stroke-opacity)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 620 281.12 L 623.5 288.12 L 620 286.37 L 616.5 288.12 Z" fill-opacity="var(--fill-opacity)" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-opacity="var(--stroke-opacity)" stroke-miterlimit="10" pointer-events="all"/><path d="M 620 398.88 L 616.5 391.88 L 620 393.63 L 623.5 391.88 Z" fill-opacity="var(--fill-opacity)" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-opacity="var(--stroke-opacity)" stroke-miterlimit="10" pointer-events="all"/></g></g><g data-cell-id="TvLHVO9ugg6I3p-DXBA7-13"><g><rect x="560" y="200" width="120" height="80" rx="12" ry="12" fill-opacity="var(--fill-opacity)" fill="url(#mx-gradient-ffcc99-1-fbc593-1-s-0)" stroke="#994c00" stroke-opacity="var(--stroke-opacity)" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;  opacity: var(--fill-opacity);"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 240px; margin-left: 561px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><font style="font-size: 13px;" color="#000000">Canvas Worker<br />(optional)</font></div></div></div></foreignObject></g></g></g><g data-cell-id="TvLHVO9ugg6I3p-DXBA7-14"><g><rect x="280" y="400" width="400" height="80" rx="12" ry="12" fill="url(#mx-gradient-008a00-1-00cc00-1-s-0)" stroke="#005700" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 398px; height: 1px; padding-top: 440px; margin-left: 281px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><font style="font-size: 13px;">Main Thread<br />(Browser Window)</font></div></div></div></foreignObject></g></g></g><g data-cell-id="TvLHVO9ugg6I3p-DXBA7-15"><g><path d="M 200 460 L 273.63 460" fill="none" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 278.88 460 L 271.88 463.5 L 273.63 460 L 271.88 456.5 Z" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="all"/></g></g><g data-cell-id="TvLHVO9ugg6I3p-DXBA7-16"><g><rect x="0" y="400" width="200" height="80" rx="12" ry="12" fill="url(#mx-gradient-3e63dd-1-6c83dd-1-s-0)" stroke="#8ba6ff" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 198px; height: 1px; padding-top: 440px; margin-left: 1px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><font style="font-size: 13px;">VDom Worker<br />(optional)</font></div></div></div></foreignObject></g></g></g><g data-cell-id="TvLHVO9ugg6I3p-DXBA7-17"><g><rect x="280" y="440" width="120" height="40" rx="6" ry="6" fill="url(#mx-gradient-ffcc99-1-fbc593-1-s-0)" stroke="#994c00" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 460px; margin-left: 281px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><font style="font-size: 13px;" color="#000000">DOM Operations</font></div></div></div></foreignObject></g></g></g><g data-cell-id="TvLHVO9ugg6I3p-DXBA7-18"><g><rect x="560" y="400" width="120" height="40" rx="6" ry="6" fill-opacity="var(--fill-opacity)" fill="url(#mx-gradient-ffcc99-1-fbc593-1-s-0)" stroke="#994c00" stroke-opacity="var(--stroke-opacity)" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;  opacity: var(--fill-opacity);"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 420px; margin-left: 561px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><font style="font-size: 13px;" color="#000000">Canvas</font></div></div></div></foreignObject></g></g></g><g data-cell-id="TvLHVO9ugg6I3p-DXBA7-19"><g><path d="M 340 326.37 L 340 393.63" fill="none" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 340 321.12 L 343.5 328.12 L 340 326.37 L 336.5 328.12 Z" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="all"/><path d="M 340 398.88 L 336.5 391.88 L 340 393.63 L 343.5 391.88 Z" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="all"/></g></g><g data-cell-id="TvLHVO9ugg6I3p-DXBA7-20"><g><rect x="80" y="0" width="160" height="80" rx="12" ry="12" fill-opacity="var(--fill-opacity)" fill="url(#mx-gradient-3e63dd-1-6c83dd-1-s-0)" stroke="#8ba6ff" stroke-opacity="var(--stroke-opacity)" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;  opacity: var(--fill-opacity);"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 158px; height: 1px; padding-top: 40px; margin-left: 81px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><font style="font-size: 14px;">Task Worker<br />(optional)</font></div></div></div></foreignObject></g></g></g><g data-cell-id="TvLHVO9ugg6I3p-DXBA7-21"><g><path d="M 160 86.37 L 160 240 L 193.63 240" fill="none" stroke="rgb(240, 240, 240)" stroke-opacity="var(--stroke-opacity)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 160 81.12 L 163.5 88.12 L 160 86.37 L 156.5 88.12 Z" fill-opacity="var(--fill-opacity)" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-opacity="var(--stroke-opacity)" stroke-miterlimit="10" pointer-events="all"/><path d="M 198.88 240 L 191.88 243.5 L 193.63 240 L 191.88 236.5 Z" fill-opacity="var(--fill-opacity)" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-opacity="var(--stroke-opacity)" stroke-miterlimit="10" pointer-events="all"/></g></g></g></g></g></svg>

package/resources/scss/src/apps/portal/home/parts/Helix.scss

@@ -4,4 +4,8 @@
             min-height: 23em;
         }
     }
+
+    @media (min-width: 841px) {
+        max-height: 100%;
+    }
 }

package/src/DefaultConfig.mjs

@@ -262,12 +262,12 @@ const DefaultConfig = {
     useVdomWorker: true,
     /**
      * buildScripts/injectPackageVersion.mjs will update this value
-     * @default '7.0.2'
+     * @default '7.0.4'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '7.0.2'
+    version: '7.0.4'
 };
 
 Object.assign(DefaultConfig, {

package/src/Neo.mjs

@@ -54,13 +54,6 @@ Neo = globalThis.Neo = Object.assign({
      */
     insideWorker: typeof DedicatedWorkerGlobalScope !== 'undefined' || typeof WorkerGlobalScope !== 'undefined',
 
-    /**
-     * @deprecated in neo.mjs v7.0
-     */
-    applyClassConfig(cls) {
-        return Neo.setupClass(cls)
-    },
-
     /**
      * Maps methods from one namespace to another one
      * @example

package/src/button/Base.mjs

@@ -92,7 +92,9 @@ class Base extends Component {
          */
         pressed_: false,
         /**
-         * Change the browser hash value on click
+         * Change the browser hash value on click.
+         * Use route for internal navigation and url for external links. Do not use both on the same instance.
+         * Transforms the button tag into an a tag [optional]
          * @member {String|null} route_=null
          */
         route_: null,
@@ -257,16 +259,18 @@ class Base extends Component {
                     items      = isArray ? value : value.items,
                     menuConfig = isArray ? {} : value,
                     model      = me.getModel(),
+                    {appName, theme, windowId} = me,
 
                 config = Neo.merge({
                     module         : module.default,
                     align          : {edgeAlign : 't0-b0', target: me.id},
-                    appName        : me.appName,
+                    appName,
                     displayField   : 'text',
                     floating       : true,
                     hidden         : true,
                     parentComponent: me,
-                    theme          : me.theme
+                    theme,
+                    windowId
                 }, menuConfig);
 
                 if (items) {
@@ -295,6 +299,16 @@ class Base extends Component {
         this.cls = cls
     }
 
+    /**
+     * Triggered after the route config got changed
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     * @protected
+     */
+    afterSetRoute(value, oldValue) {
+        !this.editRoute && this.updateTag()
+    }
+
     /**
      * Triggered after the theme config got changed
      * @param {String|null} value
@@ -336,22 +350,12 @@ class Base extends Component {
 
     /**
      * Triggered after the url config got changed
-     * @param {String} value
-     * @param {String} oldValue
+     * @param {String|null} value
+     * @param {String|null} oldValue
      * @protected
      */
     afterSetUrl(value, oldValue) {
-        let vdomRoot = this.getVdomRoot();
-
-        if (value) {
-            vdomRoot.href = value;
-            vdomRoot.tag  = 'a'
-        } else {
-            delete vdomRoot.href;
-            vdomRoot.tag = 'button'
-        }
-
-        this.update()
+        this.updateTag()
     }
 
     /**
@@ -385,6 +389,22 @@ class Base extends Component {
         me.update()
     }
 
+    /**
+     * Triggered after the windowId config got changed
+     * @param {Number|null} value
+     * @param {Number|null} oldValue
+     * @protected
+     */
+    afterSetWindowId(value, oldValue) {
+        super.afterSetWindowId(value, oldValue);
+
+        let {menuList} = this;
+
+        if (menuList) {
+            menuList.windowId = value
+        }
+    }
+
     /**
      * Converts the iconCls array into a string on beforeGet
      * @returns {String}
@@ -440,14 +460,7 @@ class Base extends Component {
      * @protected
      */
     changeRoute() {
-        let me         = this,
-            {windowId} = me;
-
-        if (me.editRoute) {
-            Neo.Main.editRoute(me.route)
-        } else {
-            Neo.Main.setRoute({value: me.route, windowId})
-        }
+        this.editRoute && Neo.Main.editRoute(this.route)
     }
 
     /**
@@ -492,7 +505,7 @@ class Base extends Component {
         me.callback(me.handler, me.handlerScope || me, [data]);
 
         me.menu            && me.toggleMenu();
-        me.route           && me.changeRoute();
+        me.route           && me.changeRoute(); // only relevant for editRoute=true
         me.useRippleEffect && me.showRipple(data)
     }
 
@@ -549,6 +562,30 @@ class Base extends Component {
             await this.timeout(50)
         }
     }
+
+    /**
+     *
+     */
+    updateTag() {
+        let me                      = this,
+            {editRoute, route, url} = me,
+            link                    = !editRoute && route || url,
+            vdomRoot                = me.getVdomRoot();
+
+        if (!editRoute && route?.startsWith('#') === false) {
+            link = '#' + link
+        }
+
+        if (link) {
+            vdomRoot.href = link;
+            vdomRoot.tag  = 'a'
+        } else {
+            delete vdomRoot.href;
+            vdomRoot.tag = 'button'
+        }
+
+        me.update()
+    }
 }
 
 export default Neo.setupClass(Base);

package/src/button/Split.mjs

@@ -189,6 +189,22 @@ class Split extends Button {
         me.ntype = ntype;
     }
 
+    /**
+     * Triggered after the windowId config got changed
+     * @param {Number|null} value
+     * @param {Number|null} oldValue
+     * @protected
+     */
+    afterSetWindowId(value, oldValue) {
+        let {triggerButton} = this;
+
+        if (triggerButton) {
+            triggerButton.appName = value;
+        }
+
+        super.afterSetWindowId(value, oldValue)
+    }
+
     /**
      * @param {Boolean} [updateParentVdom=false]
      * @param {Boolean} [silent=false]

package/src/collection/Base.mjs

@@ -129,12 +129,12 @@ class Base extends CoreBase {
     }
 
     /**
-     * Adds one or more items to the end of the collection and returns the new length of the collection.
+     * Adds one or more items to the end of the collection
      * @param {Array|Object} item The item(s) to add
      * @returns {Object[]} an array containing all added items
      */
     add(item) {
-        return this.splice(0, null, item).addedItems
+        return this.splice(null, null, item).addedItems
     }
 
     /**

package/src/component/Base.mjs

@@ -515,7 +515,7 @@ class Base extends CoreBase {
      * @protected
      */
     afterSetAppName(value, oldValue) {
-        value && Neo.currentWorker.insertThemeFiles(value, this.windowId, this.__proto__)
+
     }
 
     /**
@@ -1036,16 +1036,21 @@ class Base extends CoreBase {
      * @protected
      */
     afterSetWindowId(value, oldValue) {
-        let controller = this.controller;
+        let me         = this,
+            controller = me.controller;
+
+        if (value) {
+            Neo.currentWorker.insertThemeFiles(value, me.__proto__);
 
-        if (controller && value) {
-            controller.windowId = value
+            if (controller) {
+                controller.windowId = value
+            }
         }
 
         // If a component gets moved into a different window, an update cycle might still be running.
         // Since the update might no longer get mapped, we want to re-enable this instance for future updates.
         if (oldValue) {
-            this.isVdomUpdating = false
+            me.isVdomUpdating = false
         }
     }
 

package/src/component/Video.mjs

@@ -1,8 +1,6 @@
 import BaseComponent from '../component/Base.mjs';
 import VDomUtil      from '../util/VDom.mjs';
 
-let isOperaMini = null;
-
 /**
  * @class Neo.component.Video
  * @extends Neo.component.Base
@@ -10,7 +8,7 @@ let isOperaMini = null;
  * @example
  *     ntype   : 'video',
  *     url     : 'https://video-ssl.itunes.apple.com/itunes-assets/Video125/v4/a0/57/54/a0575426-dd8e-2d25-bdf3-139702870b50/mzvf_786190431362224858.640x464.h264lc.U.p.m4v'
- *     autoplay: true
+ *     autoPlay: true
  *
  * @methods
  *      play
@@ -36,14 +34,9 @@ class Video extends BaseComponent {
          * Automatically start the video
          * Initial setting, which does not make sense to change later
          * !!Most browsers only support muted autostart
-         * @member {Boolean} autoplay=false
-         */
-        autoplay: false,
-        /**
-         * In case the browser does not support the video source the component should show an error.
-         * @member {String} errorMsg='The browser does not support the video'
+         * @member {Boolean} autoPlay=false
          */
-        errorMsg: 'Your browser does not support the video tag.',
+        autoPlay: false,
         /**
          * Current state of the video
          * @member {Boolean} playing_=false
@@ -115,18 +108,12 @@ class Video extends BaseComponent {
      * @param {String} value
      * @param {String|null} oldValue
      */
-    async afterSetUrl(value, oldValue) {
+    afterSetUrl(value, oldValue) {
         if (!value) return;
 
         let me     = this,
             {vdom} = me,
-            media  = VDomUtil.getFlags(vdom, 'media')[0],
-            userAgent;
-
-        if (isOperaMini === null) {
-            userAgent   = await Neo.Main.getByPath({path: 'navigator.userAgent'});
-            isOperaMini = userAgent.includes('Opera Mini');
-        }
+            media  = VDomUtil.getFlags(vdom, 'media')[0];
 
         media.cn = [{
             tag : 'source',
@@ -134,14 +121,6 @@ class Video extends BaseComponent {
             type: me.type
         }];
 
-        // Opera Mini might not support the video-source => check the user agent string
-        if (isOperaMini) {
-            media.cn.push({
-                tag : 'span',
-                html: me.errorMsg
-            })
-        }
-
         this.update()
     }
 
@@ -156,17 +135,17 @@ class Video extends BaseComponent {
      * @protected
      */
     handleAutoplay() {
-        if (!this.autoplay) return;
+        if (!this.autoPlay) return;
 
         let {vdom} = this,
-            media = VDomUtil.getFlags(vdom, 'media')[0];
+            media  = VDomUtil.getFlags(vdom, 'media')[0];
 
         // Most browsers require videos to be muted for autoplay to work.
         media.muted = true;
         // Allows inline playback on iOS devices
         media.playsInline = true;
 
-        this.playing = true;
+        this.playing = true
     }
 
     /**

package/src/container/Base.mjs

@@ -222,7 +222,8 @@ class Base extends Component {
     afterSetWindowId(value, oldValue) {
         super.afterSetWindowId(value, oldValue);
 
-        let me = this;
+        let me       = this,
+            {layout} = me;
 
         value && me.items?.forEach(item => {
             if (!Neo.isString(item)) {
@@ -230,8 +231,8 @@ class Base extends Component {
             }
         })
 
-        if (value && me.layout) {
-            me.layout.windowId = value
+        if (value && layout && !Neo.isString(layout)) {
+            layout.windowId = value
         }
     }
 

package/src/dialog/Base.mjs

@@ -286,14 +286,15 @@ class Base extends Panel {
     afterSetResizable(value, oldValue) {
         if (value && !this.getPlugin('resizable')) {
             import('../plugin/Resizable.mjs').then(module => {
-                let me        = this,
-                    {appName} = me,
-                    plugins   = me.plugins || [];
+                let me                  = this,
+                    {appName, windowId} = me,
+                    plugins             = me.plugins || [];
 
                 plugins.push({
                     module       : module.default,
                     appName,
                     delegationCls: 'neo-dialog',
+                    windowId,
                     ...me.resizablePluginConfig
                 });
 
@@ -326,6 +327,27 @@ class Base extends Panel {
         this.syncTrapFocus()
     }
 
+    /**
+     * Triggered after the windowId config got changed
+     * @param {Number|null} value
+     * @param {Number|null} oldValue
+     * @protected
+     */
+    afterSetWindowId(value, oldValue) {
+        let me        = this,
+            resizable = me.getPlugin('resizable');
+
+        if (me.dragZone) {
+            me.dragZone.windowId = value
+        }
+
+        if (resizable) {
+            resizable.windowId = value
+        }
+
+        super.afterSetWindowId(value, oldValue)
+    }
+
     /**
      *
      */
@@ -480,9 +502,10 @@ class Base extends Panel {
      *
      */
     createHeader() {
-        let me      = this,
-            cls     = ['neo-header-toolbar', 'neo-toolbar'],
-            headers = me.headers || [];
+        let me         = this,
+            {windowId} = me,
+            cls        = ['neo-header-toolbar', 'neo-toolbar'],
+            headers    = me.headers || [];
 
         me.draggable && cls.push('neo-draggable');
 
@@ -495,6 +518,7 @@ class Base extends Panel {
             id       : me.getHeaderToolbarId(),
             listeners: {headerAction: me.executeHeaderAction, scope: me},
             title    : me.title,
+            windowId,
             ...me.headerConfig
         });
 
@@ -661,8 +685,9 @@ class Base extends Panel {
      * @param data
      */
     onDragStart(data) {
-        let me    = this,
-            style = me.style || {};
+        let me         = this,
+            {windowId} = me,
+            style      = me.style || {};
 
         if (!me.maximized) {
             me.isDragging = true;
@@ -679,6 +704,7 @@ class Base extends Panel {
                     dragProxyConfig    : {vdom: me.getProxyVdom()},
                     owner              : me,
                     useProxyWrapper    : false,
+                    windowId,
                     ...me.dragZoneConfig
                 });
 

package/src/draggable/DragZone.mjs

@@ -144,7 +144,11 @@ class DragZone extends Base {
          * True creates a position:absolute wrapper div which contains the cloned element
          * @member {Boolean} useProxyWrapper=true
          */
-        useProxyWrapper: true
+        useProxyWrapper: true,
+        /**
+         * @member {Number|null} windowId_=null
+         */
+        windowId_: null
     }
 
     /**
@@ -159,15 +163,13 @@ class DragZone extends Base {
     }
 
     /**
-     * Triggered after the appName config got changed
-     * @param {String|null} value
-     * @param {String|null} oldValue
+     * Triggered after the windowId config got changed
+     * @param {Number|null} value
+     * @param {Number|null} oldValue
      * @protected
      */
-    afterSetAppName(value, oldValue) {
-        if (value) {
-            Neo.currentWorker.insertThemeFiles(value, this.owner.windowId, this.__proto__)
-        }
+    afterSetWindowId(value, oldValue) {
+        value && Neo.currentWorker.insertThemeFiles(value, this.__proto__)
     }
 
     /**

package/src/form/field/Picker.mjs

@@ -154,6 +154,7 @@ class Picker extends Text {
             maxHeight: me.pickerMaxHeight,
             theme    : me.theme,
             width    : pickerWidth,
+            windowId : me.windowId,
             ...me.pickerConfig,
 
             // scoped to the field instance

package/src/form/field/Text.mjs

@@ -901,6 +901,8 @@ class Text extends Base {
      * @protected
      */
     afterSetWindowId(value, oldValue) {
+        super.afterSetWindowId(value, oldValue);
+
         value && this.triggers?.forEach(item => {
             item.windowId = value
         })

package/src/form/field/trigger/Time.mjs

@@ -94,6 +94,20 @@ class Time extends Picker {
             this.clock.time = value
         }
     }
+
+    /**
+     * Triggered after the windowId config got changed
+     * @param {Number} value
+     * @param {Number|null} oldValue
+     * @protected
+     */
+    afterSetWindowId(value, oldValue) {
+        super.afterSetWindowId(value, oldValue);
+
+        if (value) {
+            this.clock.windowId = value
+        }
+    }
 }
 
 export default Neo.setupClass(Time);

package/src/layout/Base.mjs

@@ -25,7 +25,7 @@ class Base extends CoreBase {
          */
         appName_: null,
         /**
-         * The Id of the Container instance this layout is bound to
+         * The id of the Container instance this layout is bound to
          * @member {?String} containerId=null
          * @protected
          */
@@ -43,9 +43,9 @@ class Base extends CoreBase {
          */
         isLayout: true,
         /**
-         * @member {Number|null} windowId=null
+         * @member {Number|null} windowId_=null
          */
-        windowId: null
+        windowId_: null
     }
 
     /**
@@ -59,13 +59,13 @@ class Base extends CoreBase {
     }
 
     /**
-     * Triggered after the appName config got changed
-     * @param {String|null} value
-     * @param {String|null} oldValue
+     * Triggered after the windowId config got changed
+     * @param {Number} value
+     * @param {Number|null} oldValue
      * @protected
      */
-    afterSetAppName(value, oldValue) {
-        value && Neo.currentWorker.insertThemeFiles(value, this.container.windowId, this.__proto__)
+    afterSetWindowId(value, oldValue) {
+        value && Neo.currentWorker.insertThemeFiles(value, this.__proto__)
     }
 
     /**

package/src/list/Component.mjs

@@ -37,6 +37,20 @@ class Component extends Base {
         })
     }
 
+    /**
+     * Triggered after the windowId config got changed
+     * @param {Number|null} value
+     * @param {Number|null} oldValue
+     * @protected
+     */
+    afterSetWindowId(value, oldValue) {
+        super.afterSetWindowId(value, oldValue);
+
+        value && this.items?.forEach(item => {
+            item.windowId = value
+        })
+    }
+
     /**
      *
      */

package/src/plugin/PrefixField.mjs

@@ -136,7 +136,7 @@ class PrefixField extends Base {
         ]);
 
         me.owner.on('mounted', () => {
-            Neo.currentWorker.insertThemeFiles(owner.appName, owner.windowId, me.__proto__)
+            Neo.currentWorker.insertThemeFiles(owner.windowId, me.__proto__)
         }, me, {once: true})
     }
 

package/src/plugin/Resizable.mjs

@@ -164,7 +164,11 @@ class Resizable extends Base {
          * @member {Object} targetNode=null
          * @protected
          */
-        targetNode: null
+        targetNode: null,
+        /**
+         * @member {Number|null} windowId_=null
+         */
+        windowId_: null
     }
 
     /**
@@ -228,14 +232,24 @@ class Resizable extends Base {
      * @protected
      */
     afterSetAppName(value, oldValue) {
+        if (this.dragZone) {
+            this.dragZone.appName = value
+        }
+    }
+
+    /**
+     * Triggered after the windowId config got changed
+     * @param {Number} value
+     * @param {Number|null} oldValue
+     * @protected
+     */
+    afterSetWindowId(value, oldValue) {
         let me = this;
 
-        if (value) {
-            Neo.currentWorker.insertThemeFiles(value, me.owner.windowId, me.__proto__)
-        }
+        value && Neo.currentWorker.insertThemeFiles(value, me.__proto__)
 
         if (me.dragZone) {
-            me.dragZone.appName = value
+            me.dragZone.windowId = value
         }
     }
 

package/src/table/header/Button.mjs

@@ -464,9 +464,11 @@ class Button extends BaseButton {
 
     /**
      * @param {Object} data
+     * @param {Neo.button.Base} data.column
      * @param {String} data.dataField
      * @param {Number} data.index
      * @param {Object} data.record
+     * @param {Neo.table.Container} data.tableContainer
      * @param {Number|String} data.value
      * @returns {*}
      */

package/src/toolbar/Base.mjs

@@ -112,12 +112,27 @@ class Base extends Container {
                     appName            : me.appName,
                     boundaryContainerId: me.id,
                     owner              : me,
+                    windowId           : me.windowId,
                     ...me.sortZoneConfig
                 })
             })
         }
     }
 
+    /**
+     * Triggered after the windowId config got changed
+     * @param {Number|null} value
+     * @param {Number|null} oldValue
+     * @protected
+     */
+    afterSetWindowId(value, oldValue) {
+        super.afterSetWindowId(value, oldValue);
+
+        if (this.sortZone) {
+            this.sortZone.windowId = value
+        }
+    }
+
     /**
      * Checks if the new dock position matches a value of the static dockPositions config
      * @param {String} value

package/src/worker/App.mjs

@@ -275,12 +275,11 @@ class App extends Base {
 
     /**
      * In case you don't want to include prototype based CSS files, use the className param instead
-     * @param {String} appName
      * @param {Number} windowId
      * @param {Neo.core.Base} [proto]
      * @param {String} [className]
      */
-    insertThemeFiles(appName, windowId, proto, className) {
+    insertThemeFiles(windowId, proto, className) {
         if (Neo.config.themes.length > 0) {
             className = className || proto.className;
             //console.log(windowId, className);
@@ -290,7 +289,7 @@ class App extends Base {
                 classPath, classRoot, fileName, lClassRoot, mapClassName, ns, themeFolders;
 
             if (!cssMap) {
-                me.themeFilesCache.push([appName, windowId, proto])
+                me.themeFilesCache.push([windowId, proto])
             } else {
                 // we need to modify app related class names
                 if (!className.startsWith('Neo.')) {
@@ -306,7 +305,7 @@ class App extends Base {
 
                 if (parent && parent !== Neo.core.Base.prototype) {
                     if (!Neo.ns(`${windowId}.${parent.className}`, false, cssMap)) {
-                        me.insertThemeFiles(appName, windowId, parent)
+                        me.insertThemeFiles(windowId, parent)
                     }
                 }
 
@@ -321,7 +320,6 @@ class App extends Base {
                     ns[fileName] = true;
 
                     Neo.main.addon.Stylesheet.addThemeFiles({
-                        appName,
                         className: mapClassName || className,
                         folders  : themeFolders,
                         windowId