neo.mjs 7.10.0 → 7.12.0

package/apps/ServiceWorker.mjs

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

package/apps/portal/index.html

@@ -16,7 +16,7 @@
         "@type": "Organization",
         "name": "Neo.mjs"
       },
-      "datePublished": "2024-09-30",
+      "datePublished": "2024-10-02",
       "publisher": {
         "@type": "Organization",
         "name": "Neo.mjs"

package/apps/portal/resources/data/examples_devmode.json

@@ -1,85 +1,92 @@
 [{
-    "id"           : 22,
+    "id"           : 23,
     "image"        : "devmode/sharedcovid.png",
     "name"         : "Multi Window Covid App",
     "sharedWorkers": true,
     "sourceUrl"    : "apps/sharedcovid",
     "url"          : "apps/sharedcovid/index.html#mainview=table"
 }, {
-    "id"       : 21,
+    "id"       : 22,
     "image"    : "devmode/calendar-preview.png",
     "name"     : "Calendar",
     "sourceUrl": "src/calendar",
     "url"      : "examples/calendar/basic/index.html"
 }, {
-    "id"       : 20,
+    "id"       : 21,
     "image"    : "devmode/helix.png",
     "name"     : "component.Helix",
     "sourceUrl": "examples/component/helix",
     "url"      : "examples/component/helix/index.html"
 }, {
-    "id"       : 19,
-    "image"    : "devmode/coronaGallery.png",
-    "name"     : "COVID-19 Gallery",
-    "sourceUrl": "examples/component/coronaGallery",
-    "url"      : "examples/component/coronaGallery/index.html"
+    "id"           : 20,
+    "image"        : "devmode/mwCoronaGallery.png",
+    "name"         : "Multi Window Covid Gallery",
+    "sharedWorkers": true,
+    "sourceUrl"    : "examples/component/multiWindowCoronaGallery",
+    "url"          : "examples/component/multiWindowCoronaGallery/index.html"
 }, {
-    "id"       : 18,
+    "id"       : 19,
     "image"    : "devmode/offscreenCanvas.png",
     "name"     : "OffscreenCanvas",
     "sourceUrl": "https://github.com/neomjs/offscreen-canvas/",
     "url"      : "https://neomjs.github.io/pages2/workspace/neo-offscreen-canvas-demo/apps/myapp/index.html"
 }, {
-    "id"           : 17,
+    "id"           : 18,
     "image"        : "devmode/sharedOffscreenCanvas.png",
     "name"         : "Multi-Window OffscreenCanvas",
     "sourceUrl"    : "https://github.com/neomjs/shared-offscreen",
     "sharedWorkers": true,
     "url"          : "https://neomjs.github.io/pages2/workspace/neo-shared-offscreen-canvas-demo/apps/mainapp/index.html"
 }, {
-    "id"           : 16,
+    "id"           : 17,
     "image"        : "devmode/multi_window_dd.png",
     "name"         : "Multi-Window Drag&Drop",
     "sharedWorkers": true,
     "sourceUrl"    : "apps/shareddialog",
     "url"          : "apps/shareddialog/index.html"
 }, {
-    "id"       : 15,
+    "id"       : 16,
     "image"    : "devmode/tabContainer.png",
     "name"     : "tab.Container",
     "sourceUrl": "examples/tab/container",
     "url"      : "examples/tab/container/index.html"
 }, {
-    "id"       : 14,
+    "id"       : 15,
     "image"    : "devmode/model-component-example.png",
     "name"     : "View Models Example",
     "sourceUrl": "examples/model/advanced",
     "url"      : "examples/model/advanced/index.html"
 }, {
-    "id"       : 13,
+    "id"       : 14,
     "image"    : "devmode/dragdrop.png",
     "name"     : "Dialog drag&drop",
     "sourceUrl": "examples/dialog",
     "url"      : "examples/dialog/"
 }, {
-    "id"           : 12,
+    "id"           : 13,
     "image"        : "dist_prod/colorsApp.png",
     "name"         : "Colors Dashboard",
     "sharedWorkers": true,
     "sourceUrl"    : "apps/colors",
     "url"          : "apps/colors/index.html"
 }, {
-    "id"       : 11,
+    "id"       : 12,
     "image"    : "devmode/covidDashboard.png",
     "name"     : "Covid Dashboard",
     "sourceUrl": "apps/covid",
     "url"      : "apps/covid/index.html"
 }, {
-    "id"       : 10,
+    "id"       : 11,
     "image"    : "devmode/coronaHelix.png",
     "name"     : "COVID-19 Helix",
     "sourceUrl": "examples/component/coronaHelix",
     "url"      : "examples/component/coronaHelix/index.html"
+}, {
+    "id"       : 10,
+    "image"    : "devmode/coronaGallery.png",
+    "name"     : "COVID-19 Gallery",
+    "sourceUrl": "examples/component/coronaGallery",
+    "url"      : "examples/component/coronaGallery/index.html"
 }, {
     "id"       : 9,
     "image"    : "devmode/gallery.png",

package/apps/portal/resources/data/examples_dist_dev.json

@@ -1,85 +1,92 @@
 [{
-    "id"           : 21,
+    "id"           : 22,
     "image"        : "devmode/sharedcovid.png",
     "name"         : "Multi Window Covid App",
     "sharedWorkers": true,
     "sourceUrl"    : "apps/sharedcovid",
     "url"          : "dist/development/apps/sharedcovid/index.html#mainview=table"
 }, {
-    "id"       : 20,
+    "id"       : 21,
     "image"    : "devmode/calendar-preview.png",
     "name"     : "Calendar",
     "sourceUrl": "src/calendar",
     "url"      : "dist/development/examples/calendar/basic/index.html"
 }, {
-    "id"       : 19,
+    "id"       : 20,
     "image"    : "devmode/helix.png",
     "name"     : "component.Helix",
     "sourceUrl": "examples/component/helix",
     "url"      : "dist/development/examples/component/helix/index.html"
 }, {
-    "id"       : 18,
-    "image"    : "devmode/coronaGallery.png",
-    "name"     : "COVID-19 Gallery",
-    "sourceUrl": "examples/component/coronaGallery",
-    "url"      : "dist/development/examples/component/coronaGallery/index.html"
+    "id"           : 19,
+    "image"        : "devmode/mwCoronaGallery.png",
+    "name"         : "Multi Window Covid Gallery",
+    "sharedWorkers": true,
+    "sourceUrl"    : "examples/component/multiWindowCoronaGallery",
+    "url"          : "dist/development/examples/component/multiWindowCoronaGallery/index.html"
 }, {
-    "id"       : 17,
+    "id"       : 18,
     "image"    : "devmode/offscreenCanvas.png",
     "name"     : "OffscreenCanvas",
     "sourceUrl": "https://github.com/neomjs/offscreen-canvas/tree/main/apps/myapp",
     "url"      : "https://neomjs.github.io/pages2/workspace/neo-offscreen-canvas-demo/dist/development/apps/myapp/index.html"
 }, {
-    "id"           : 16,
+    "id"           : 17,
     "image"        : "devmode/sharedOffscreenCanvas.png",
     "name"         : "Multi-Window OffscreenCanvas",
     "sharedWorkers": true,
     "sourceUrl"    : "https://github.com/neomjs/shared-offscreen",
     "url"          : "https://neomjs.github.io/pages2/workspace/neo-shared-offscreen-canvas-demo/dist/development/apps/mainapp/index.html"
 }, {
-    "id"           : 15,
+    "id"           : 16,
     "image"        : "devmode/multi_window_dd.png",
     "name"         : "Multi-Window Drag&Drop",
     "sharedWorkers": true,
     "sourceUrl"    : "apps/shareddialog",
     "url"          : "dist/development/apps/shareddialog/index.html"
 }, {
-    "id"       : 14,
+    "id"       : 15,
     "image"    : "devmode/tabContainer.png",
     "name"     : "tab.Container",
     "sourceUrl": "examples/tab/container",
     "url"      : "dist/development/examples/tab/container/index.html"
 }, {
-    "id"       : 13,
+    "id"       : 14,
     "image"    : "devmode/model-component-example.png",
     "name"     : "View Models Example",
     "sourceUrl": "examples/model/advanced",
     "url"      : "dist/development/examples/model/advanced/index.html"
 }, {
-    "id"       : 12,
+    "id"       : 13,
     "image"    : "devmode/dragdrop.png",
     "name"     : "Dialog drag&drop",
     "sourceUrl": "examples/dialog",
     "url"      : "dist/development/examples/dialog/"
 }, {
-    "id"           : 11,
+    "id"           : 12,
     "image"        : "dist_prod/colorsApp.png",
     "name"         : "Colors Dashboard",
     "sharedWorkers": true,
     "sourceUrl"    : "apps/colors",
     "url"          : "dist/development/apps/colors/index.html"
 }, {
-    "id"       : 10,
+    "id"       : 11,
     "image"    : "devmode/covidDashboard.png",
     "name"     : "Covid Dashboard",
     "sourceUrl": "apps/covid",
     "url"      : "dist/development/apps/covid/index.html#mainview=table"
 }, {
-    "id"       : 9,
+    "id"       : 10,
     "image"    : "devmode/coronaHelix.png",
     "name"     : "COVID-19 Helix",
     "sourceUrl": "examples/component/coronaHelix",
     "url"      : "dist/development/examples/component/coronaHelix/index.html"
+}, {
+    "id"       : 9,
+    "image"    : "devmode/coronaGallery.png",
+    "name"     : "COVID-19 Gallery",
+    "sourceUrl": "examples/component/coronaGallery",
+    "url"      : "dist/development/examples/component/coronaGallery/index.html"
 }, {
     "id"       : 8,
     "image"    : "devmode/gallery.png",

package/apps/portal/resources/data/examples_dist_prod.json

@@ -1,85 +1,92 @@
 [{
-    "id"           : 21,
+    "id"           : 22,
     "image"        : "devmode/sharedcovid.png",
     "name"         : "Multi Window Covid App",
     "sharedWorkers": true,
     "sourceUrl"    : "apps/sharedcovid",
     "url"          : "dist/production/apps/sharedcovid/index.html#mainview=table"
 }, {
-    "id"       : 20,
+    "id"       : 21,
     "image"    : "devmode/calendar-preview.png",
     "name"     : "Calendar",
     "sourceUrl": "src/calendar",
     "url"      : "dist/production/examples/calendar/basic/index.html"
 }, {
-    "id"       : 19,
+    "id"       : 20,
     "image"    : "devmode/helix.png",
     "name"     : "component.Helix",
     "sourceUrl": "examples/component/helix",
     "url"      : "dist/production/examples/component/helix/index.html"
 }, {
-    "id"       : 18,
-    "image"    : "devmode/coronaGallery.png",
-    "name"     : "COVID-19 Gallery",
-    "sourceUrl": "examples/component/coronaGallery",
-    "url"      : "dist/production/examples/component/coronaGallery/index.html"
+    "id"           : 19,
+    "image"        : "devmode/mwCoronaGallery.png",
+    "name"         : "Multi Window Covid Gallery",
+    "sharedWorkers": true,
+    "sourceUrl"    : "examples/component/multiWindowCoronaGallery",
+    "url"          : "dist/production/examples/component/multiWindowCoronaGallery/index.html"
 }, {
-    "id"       : 17,
+    "id"       : 18,
     "image"    : "devmode/offscreenCanvas.png",
     "name"     : "OffscreenCanvas",
     "sourceUrl": "https://github.com/neomjs/offscreen-canvas/tree/main/apps/myapp",
     "url"      : "https://neomjs.github.io/pages2/workspace/neo-offscreen-canvas-demo/dist/production/apps/myapp/index.html"
 }, {
-    "id"           : 16,
+    "id"           : 17,
     "image"        : "devmode/sharedOffscreenCanvas.png",
     "name"         : "Multi-Window OffscreenCanvas",
     "sharedWorkers": true,
     "sourceUrl"    : "https://github.com/neomjs/shared-offscreen",
     "url"          : "https://neomjs.github.io/pages2/workspace/neo-shared-offscreen-canvas-demo/dist/production/apps/mainapp/index.html"
 }, {
-    "id"           : 15,
+    "id"           : 16,
     "image"        : "devmode/multi_window_dd.png",
     "name"         : "Multi-Window Drag&Drop",
     "sharedWorkers": true,
     "sourceUrl"    : "apps/shareddialog",
     "url"          : "dist/production/apps/shareddialog/index.html"
 }, {
-    "id"       : 14,
+    "id"       : 15,
     "image"    : "devmode/tabContainer.png",
     "name"     : "tab.Container",
     "sourceUrl": "examples/tab/container",
     "url"      : "dist/production/examples/tab/container/index.html"
 }, {
-    "id"       : 13,
+    "id"       : 14,
     "image"    : "devmode/model-component-example.png",
     "name"     : "View Models Example",
     "sourceUrl": "examples/model/advanced",
     "url"      : "dist/production/examples/model/advanced/index.html"
 }, {
-    "id"       : 12,
+    "id"       : 13,
     "image"    : "devmode/dragdrop.png",
     "name"     : "Dialog drag&drop",
     "sourceUrl": "examples/dialog",
     "url"      : "dist/production/examples/dialog/"
 }, {
-    "id"           : 11,
+    "id"           : 12,
     "image"        : "dist_prod/colorsApp.png",
     "name"         : "Colors Dashboard",
     "sharedWorkers": true,
     "sourceUrl"    : "apps/colors",
     "url"          : "dist/production/apps/colors/index.html"
 }, {
-    "id"       : 10,
+    "id"       : 11,
     "image"    : "devmode/covidDashboard.png",
     "name"     : "Covid Dashboard",
     "sourceUrl": "apps/covid",
     "url"      : "dist/production/apps/covid/index.html#mainview=table"
 }, {
-    "id"       : 9,
+    "id"       : 10,
     "image"    : "devmode/coronaHelix.png",
     "name"     : "COVID-19 Helix",
     "sourceUrl": "examples/component/coronaHelix",
     "url"      : "dist/production/examples/component/coronaHelix/index.html"
+}, {
+    "id"       : 9,
+    "image"    : "devmode/coronaGallery.png",
+    "name"     : "COVID-19 Gallery",
+    "sourceUrl": "examples/component/coronaGallery",
+    "url"      : "dist/production/examples/component/coronaGallery/index.html"
 }, {
     "id"       : 8,
     "image"    : "devmode/gallery.png",

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

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

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

@@ -33,17 +33,14 @@ class AfterMath extends BaseContainer {
         }, {
             cls : ['neo-content'],
             flex: 'none',
+            tag : 'ul',
+
             html: `
-            <p>
-            To learn more about Neo.mjs please read <a href="#/learn">the Learning Section</a> or browse <a href="#/blog">the blog</a>.
-            </p>
-            <p>
-            To arrange a demo or to talk to an engineer email <a href="mailto:info@neomjs.com">info@neomjs.com</a>. 
-            <br>For help starting a project email <a href="mailto:services@neomjs.com">services@neomjs.com</a>. 
-            <br>For questions about private training email <a href="mailto:training@neomjs.com">training@neomjs.com</a>.
-            </p>
-            `,
-            tag : 'div'
+                <li>To learn more about Neo.mjs please read the <a href="#/learn">Learning Section</a> or browse the <a href="#/blog">Blog</a></li>
+                <li>To arrange a demo or to talk to an engineer email <a href="mailto:info@neomjs.com">info@neomjs.com</a></li>
+                <li>For help starting a project email <a href="mailto:services@neomjs.com">services@neomjs.com</a></li>
+                <li>For questions about private training email <a href="mailto:training@neomjs.com">training@neomjs.com</a></li>
+            `
         }, {
             flex: 1
         }, {

package/apps/portal/view/learn/ContentComponent.mjs

@@ -184,7 +184,7 @@ class ContentComponent extends Component {
             data          = await fetch(path);
             content       = await data.text();
             content       = me.updateContentSectionsStore(content); // also replaces ## with h2 tags
-            content       = `# ${record.name}\n${content}`;
+            content       = `<h1 class='neo-h1'>${record.name}</h1>\n${content}`;
             modifiedHtml  = await me.highlightPreContent(content);
             neoComponents = {};
             neoDivs       = {};

package/apps/portal/view/services/Component.mjs

@@ -20,9 +20,9 @@ class Component extends BaseComponent {
          */
         vdom:
         {cn: [
-            {tag: 'h1', html: 'Services'},
+            {tag: 'h1', cls: ['neo-h1'], html: 'Services'},
             {cls: ['info-block'], cn: [
-                {tag: 'h2', html: 'Weekly Workshops'},
+                {tag: 'h2', cls: ['neo-h2'], html: 'Weekly Workshops'},
                 {tag: 'p',  html: [
                     'We are doing weekly workshops on Thursdays 18:30 CEST (12:30am EST) for 60m free of charge.</br>',
                     'Ping us inside our ',
@@ -31,7 +31,7 @@ class Component extends BaseComponent {
                 ].join('')},
             ]},
             {cls: ['info-block'], cn: [
-                {tag: 'h2', html: 'Professional Trainings'},
+                {tag: 'h2', cls: ['neo-h2'], html: 'Professional Trainings'},
                 {tag: 'p',  html: [
                     'While we do have a self-study based Learning Section online, you can also hire us ',
                     'in case you prefer an Instructor-led Training for bringing your team up to speed.'
@@ -47,7 +47,7 @@ class Component extends BaseComponent {
                 ].join('')},
             ]},
             {cls: ['info-block'], cn: [
-                {tag: 'h2', html: 'Professional Services'},
+                {tag: 'h2', cls: ['neo-h2'], html: 'Professional Services'},
                 {tag: 'p',  html: [
                     'We can help you to ensure your Neo.mjs based projects run successfully.',
                 ].join('')},

package/examples/ServiceWorker.mjs

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

package/examples/component/multiWindowCoronaGallery/ViewportController.mjs

@@ -37,9 +37,16 @@ class ViewportController extends Controller {
             basePath = `${basePath + environment}/`
         }
 
-        height -= 62; // popup header in Chrome
+        height += 1; // popup header in Chrome => height + 1, top -63
         left   += (width + winData.screenLeft);
-        top    += (winData.outerHeight - winData.innerHeight + winData.screenTop);
+        top    += (winData.outerHeight - winData.innerHeight + winData.screenTop - 63);
+
+        // Mounted inside a code.LivePreview, the popup header should be within the content (height-wise)
+        // See: https://github.com/neomjs/neo/issues/5991
+        if (me.component.up('live-preview')) {
+            height -= 63;
+            top    += 63;
+        }
 
         /*
          * For this demo, the url './childapp/' would be sufficient.

package/examples/component/multiWindowHelix/ViewportController.mjs

@@ -37,9 +37,16 @@ class ViewportController extends Controller {
             basePath = `${basePath + environment}/`
         }
 
-        height -= 62; // popup header in Chrome
+        height += 1; // popup header in Chrome => height + 1, top -63
         left   += (width + winData.screenLeft);
-        top    += (winData.outerHeight - winData.innerHeight + winData.screenTop);
+        top    += (winData.outerHeight - winData.innerHeight + winData.screenTop - 63);
+
+        // Mounted inside a code.LivePreview, the popup header should be within the content (height-wise)
+        // See: https://github.com/neomjs/neo/issues/5991
+        if (me.component.up('live-preview')) {
+            height -= 63;
+            top    += 63;
+        }
 
         /*
          * For this demo, the url './childapp/' would be sufficient.

package/examples/dialog/DemoDialog.mjs

@@ -48,6 +48,12 @@ class DemoDialog extends Dialog {
         }
     }
 
+    /**
+     * Custom class field to store the created dialog.Base instance
+     * @member {Neo.dialog.Base|null} dialog=null
+     */
+    dialog = null
+
     /**
      * @param {Object} config
      */
@@ -154,6 +160,7 @@ class DemoDialog extends Dialog {
      *
      */
     onWindowClose() {
+        this.dialog = null;
         this.getReference('create-dialog-button').disabled = false
     }
 }

package/examples/dialog/MainContainer.mjs

@@ -1,8 +1,8 @@
 import Button     from '../../src/button/Base.mjs';
 import CheckBox   from '../../src/form/field/CheckBox.mjs';
+import DemoDialog from './DemoDialog.mjs';
 import NeoArray   from '../../src/util/Array.mjs';
 import Toolbar    from '../../src/toolbar/Base.mjs';
-import DemoDialog from './DemoDialog.mjs';
 import Viewport   from '../../src/container/Viewport.mjs';
 
 /**
@@ -11,37 +11,33 @@ import Viewport   from '../../src/container/Viewport.mjs';
  */
 class MainContainer extends Viewport {
     static config = {
+        /**
+         * @member {String} className='Neo.examples.dialog.MainContainer'
+         * @protected
+         */
         className: 'Neo.examples.dialog.MainContainer',
-        layout   : 'base',
-        style    : {padding: '20px'},
         /**
-         * Custom config which gets passed to the dialog
-         * Either a dom node id, 'document.body' or null
-         * @member {String|null} boundaryContainerId='document.body'
+         * We are not using a container layout here
+         * @member {String} layout='base'
          */
-        boundaryContainerId: 'document.body',
+        layout: 'base',
         /**
-         * Custom config
-         * @member {Neo.dialog.Base|null} dialog=null
+         * @member {Object} style={padding:'20px'}
          */
-        dialog: null
-    }
-
-    /**
-     * @param {Object} config
-     */
-    construct(config) {
-        super.construct(config);
-
-        let me = this;
-
-        me.items = [{
-            html : '<h3>The dialog is invoked from the "Create Dialog" button</h3><h1>Hide it by pressing the ESCAPE key. The button will be refocused</h1>'
+        style: {padding: '20px'},
+        /**
+         * @member {Object[]} items
+         */
+        items: [{
+            html: [
+                '<h3>The dialog is invoked from the "Create Dialog" button</h3>',
+                '<h1>Hide it by pressing the ESCAPE key. The button will be refocused</h1>'
+            ].join('')
         }, {
             module: Toolbar,
-            items :[{
+            items : [{
                 module   : Button,
-                handler  : me.createDialog.bind(me),
+                handler  : 'up.createDialog',
                 iconCls  : 'fa fa-window-maximize',
                 reference: 'create-dialog-button',
                 text     : 'Create Dialog',
@@ -50,7 +46,7 @@ class MainContainer extends Viewport {
                 checked       : true,
                 hideLabel     : true,
                 hideValueLabel: false,
-                listeners     : {change: me.onBoundaryContainerIdChange.bind(me)},
+                listeners     : {change: 'up.onBoundaryContainerIdChange'},
                 style         : {marginLeft: '3em'},
                 valueLabelText: 'Limit Drag&Drop to the document.body'
             }, {
@@ -58,26 +54,39 @@ class MainContainer extends Viewport {
                 checked       : true,
                 hideLabel     : true,
                 hideValueLabel: false,
-                listeners     : {change: me.onConfigChange.bind(me, 'animated')},
+                listeners     : {change: 'up.onConfigChange'},
                 style         : {marginLeft: '3em'},
+                targetConfig  : 'animated',
                 valueLabelText: 'Animated'
             }, {
                 module        : CheckBox,
                 checked       : true,
                 hideLabel     : true,
                 hideValueLabel: false,
-                listeners     : {change: me.onConfigChange.bind(me, 'modal')},
+                listeners     : {change: 'up.onConfigChange'},
                 style         : {marginLeft: '1em'},
+                targetConfig  : 'modal',
                 valueLabelText: 'Modal'
             }, '->', {
                 module : Button,
-                handler: me.switchTheme.bind(me),
+                handler: 'up.switchTheme',
                 iconCls: 'fa fa-moon',
                 text   : 'Theme Dark'
             }]
         }]
     }
 
+    /**
+     * Custom class field which gets passed to the dialog. Either a dom node id, 'document.body' or null
+     * @member {String|null} boundaryContainerId='document.body'
+     */
+    boundaryContainerId = 'document.body'
+    /**
+     * Custom class field to store the created dialog.Base instance
+     * @member {Neo.dialog.Base|null} dialog=null
+     */
+    dialog = null
+
     /**
      * @param {Object} data
      */
@@ -117,12 +126,11 @@ class MainContainer extends Viewport {
     }
 
     /**
-     * @param {String} config
      * @param {Object} opts
      */
-    onConfigChange(config, opts) {
+    onConfigChange(opts) {
         if (this.dialog) {
-            this.dialog[config] = opts.value
+            this.dialog[opts.component.targetConfig] = opts.value
         }
     }
 
@@ -130,6 +138,7 @@ class MainContainer extends Viewport {
      *
      */
     onWindowClose() {
+        this.dialog = null;
         this.getReference('create-dialog-button').disabled = false
     }