neo.mjs 6.13.0 → 6.15.0

package/resources/scss/src/apps/portal/learn/PageContainer.scss

@@ -0,0 +1,35 @@
+.learn-content-container {
+    // align-items: center !important;
+    // padding: 0 3rem;
+    overflow: scroll;
+
+    .content-bottom-toolbar {
+        gap    : 8px;
+        padding: 0 3rem;
+
+        .neo-button {
+            flex           : 1 !important;
+            height         : 75px;
+            justify-content: flex-start;
+
+            .neo-button-text, .neo-button-glyph {
+                padding-top: 16px;
+            }
+        }
+
+        .content-bottom-toolbar-previous:before {
+            content         : 'Previous Page';
+            font-family     : var(--core-fontfamily-sans);
+            position        : absolute;
+            top             : var(--cmp-button-spacinghorizontal);
+            left            : var(--cmp-button-spacinghorizontal);
+        }
+        .content-bottom-toolbar-next:before {
+            content         : 'Next Page';
+            font-family     : var(--core-fontfamily-sans);
+            position        : absolute;
+            top             : var(--cmp-button-spacinghorizontal);
+            right            : var(--cmp-button-spacinghorizontal);
+        }
+    }
+}

package/resources/scss/src/apps/portal/learn/PageSectionsPanel.scss

@@ -1,6 +1,14 @@
 .portal-page-sections-panel.neo-panel {
     border: none; // reset the default 1px
 
+    @media only screen and (max-width: 1200px) {
+        display: none;
+    }
+
+    .neo-list .neo-list-item {
+        white-space: normal;
+    }
+
     .neo-panel-header-toolbar {
         border       : none; // reset the default 1px
         border-bottom: 1px solid #f2f2f2;;

package/resources/scss/src/form/field/{Select.scss → ComboBox.scss}

@@ -1,4 +1,4 @@
-.neo-selectfield {
+.neo-combobox {
     .neo-input-field-wrapper {
         flex    : 1 1 30px;
         position: relative;
@@ -14,9 +14,9 @@
 
         .neo-typeahead-input {
             border-color: transparent;
-            color       : var(--selectfield-input-hint-color);
+            color       : var(--combobox-input-hint-color);
             font        : var(--textfield-input-font);
-            opacity     : var(--selectfield-input-hint-opacity);
+            opacity     : var(--combobox-input-hint-opacity);
         }
     }
 
@@ -26,20 +26,20 @@
         text-align: left;
 
         .neo-highlight-search {
-            background-color: var(--selectfield-list-search-background-color);
-            color           : var(--selectfield-list-search-color) !important;
+            background-color: var(--combobox-list-search-background-color);
+            color           : var(--combobox-list-search-color) !important;
         }
 
         .neo-selected {
             .neo-highlight-search {
-                color: var(--selectfield-list-search-color-selected) !important;
+                color: var(--combobox-list-search-color-selected) !important;
             }
         }
     }
 
     .neo-picker-container {
-        border       : var(--selectfield-picker-container-border);
-        border-radius: var(--selectfield-picker-container-border-radius);
+        border       : var(--combobox-picker-container-border);
+        border-radius: var(--combobox-picker-container-border-radius);
         font-weight  : 400;
     }
 }

package/resources/scss/theme-dark/form/field/ComboBox.scss

@@ -0,0 +1,9 @@
+:root .neo-theme-dark { // .neo-combobox
+    --combobox-input-hint-color              : #bbb;
+    --combobox-input-hint-opacity            : 0.6;
+    --combobox-list-search-background-color  : inherit;
+    --combobox-list-search-color             : #fff;
+    --combobox-list-search-color-selected    : #000;
+    --combobox-picker-container-border       : 1px solid #bbb;
+    --combobox-picker-container-border-radius: 0;
+}

package/resources/scss/theme-light/form/field/ComboBox.scss

@@ -0,0 +1,9 @@
+:root .neo-theme-light { // .neo-combobox
+    --combobox-input-hint-color              : #333;
+    --combobox-input-hint-opacity            : 0.6;
+    --combobox-list-search-background-color  : inherit;
+    --combobox-list-search-color             : red;
+    --combobox-list-search-color-selected    : red;
+    --combobox-picker-container-border       : 1px solid #1c60a0;
+    --combobox-picker-container-border-radius: 3px;
+}

package/resources/scss/theme-neo-light/form/field/ComboBox.scss

@@ -0,0 +1,9 @@
+:root .neo-theme-neo-light { // .neo-combobox
+    --combobox-input-hint-color              : #333;
+    --combobox-input-hint-opacity            : 0.6;
+    --combobox-list-search-background-color  : inherit;
+    --combobox-list-search-color             : red;
+    --combobox-list-search-color-selected    : red;
+    --combobox-picker-container-border       : 1px solid #1c60a0;
+    --combobox-picker-container-border-radius: 3px;
+}

package/src/DefaultConfig.mjs

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

package/src/component/Base.mjs

@@ -933,6 +933,20 @@ class Base extends CoreBase {
         this.changeVdomRootKey('width', value)
     }
 
+    /**
+     * Triggered after the windowId config got changed
+     * @param {Number|null} value
+     * @param {Number|null} oldValue
+     * @protected
+     */
+    afterSetWindowId(value, oldValue) {
+        let controller = this.controller;
+
+        if (controller && value) {
+            controller.windowId = value
+        }
+    }
+
     /**
      * Triggered after the wrapperCls config got changed
      * @param {String[]|null} value
@@ -1119,7 +1133,8 @@ class Base extends CoreBase {
 
         if (value) {
             return ClassSystemUtil.beforeSetInstance(value, null, {
-                component: this
+                component: this,
+                windowId : this.windowId
             })
         }
 

package/src/container/Viewport.mjs

@@ -39,9 +39,12 @@ class Viewport extends Container {
     onConstructed() {
         super.onConstructed();
 
+        let {appName, windowId} = this;
+
         this.applyBodyCls && Neo.main.DomAccess.applyBodyCls({
-            appName: this.appName,
-            cls    : ['neo-body-viewport']
+            appName,
+            cls: ['neo-body-viewport'],
+            windowId
         })
     }
 }

package/src/controller/Application.mjs

@@ -20,6 +20,11 @@ class Application extends Base {
          * @protected
          */
         className: 'Neo.controller.Application',
+        /**
+         * @member {String} ntype='application'
+         * @protected
+         */
+        ntype: 'application',
         /**
          * @member {String|null} appThemeFolder=null
          */
@@ -50,7 +55,11 @@ class Application extends Base {
          * @member {Boolean} rendering=false
          * @protected
          */
-        rendering: false
+        rendering: false,
+        /**
+         * @member {Number|null} windowId=null
+         */
+        windowId: null
     }
 
     /**
@@ -66,6 +75,8 @@ class Application extends Base {
 
         let me = this;
 
+        me.windowId = Neo.config.windowId;
+
         Neo.apps = Neo.apps || {};
 
         Neo.apps[me.name] = me;

package/src/controller/Base.mjs

@@ -95,12 +95,18 @@ class Base extends CoreBase {
     /**
      *
      */
-    onConstructed() {
-        let currentHash = HashHistory.first(),
-            defaultHash = this.defaultHash;
+    async onConstructed() {
+        let me          = this,
+            currentHash = HashHistory.first(),
+            defaultHash = me.defaultHash;
+
+        // get outside the construction chain => a related cmp & vm has to be constructed too
+        await me.timeout(1);
 
         if (currentHash) {
-            this.onHashChange(currentHash, null)
+            if (currentHash.windowId === me.windowId) {
+                await me.onHashChange(currentHash, null)
+            }
         } else {
             /*
              * worker.App: onLoadApplication() will push config.hash into the HashHistory with a 5ms delay.
@@ -117,6 +123,11 @@ class Base extends CoreBase {
      * @param {Object} oldValue
      */
     async onHashChange(value, oldValue) {
+        // We only want to trigger hash changes for the same browser window (SharedWorker context)
+        if (value.windowId !== this.windowId) {
+            return
+        }
+
         let me                = this,
             counter           = 0,
             hasRouteBeenFound = false,

package/src/controller/Component.mjs

@@ -30,7 +30,11 @@ class Component extends Base {
          * @member {Object} references=null
          * @protected
          */
-        references: null
+        references: null,
+        /**
+         * @member {Number|null} windowId=null
+         */
+        windowId: null
     }
 
     /**

package/src/core/Observable.mjs

@@ -29,28 +29,46 @@ class Observable extends Base {
      * @param {Object} [scope]
      * @param {String} [eventId]
      * @param {Object} [data]
-     * @param {Number} [order]
+     * @param {Number|String} [order]
      * @returns {String|null} eventId null in case an object gets passed as the name (multiple ids)
      */
     addListener(name, opts, scope, eventId, data, order) {
         let me         = this,
+            delay      = 0,
             nameObject = typeof name === 'object',
+            once       = false,
             listener, existing, eventConfig;
 
         if (nameObject) {
+            if (name.hasOwnProperty('delay')) {
+                delay = name.delay;
+                delete name.delay
+            }
+
+            if (name.hasOwnProperty('once')) {
+                once = name.once;
+                delete name.once
+            }
+
             if (name.hasOwnProperty('scope')) {
                 scope = name.scope;
-                delete name.scope;
+                delete name.scope
             }
 
             Object.entries(name).forEach(([key, value]) => {
-                me.addListener(key, value, scope);
-            });
+                if (Neo.isObject(value)) {
+                    me.addListener(key, {delay, once, scope, ...value})
+                } else {
+                    me.addListener(key, {delay, fn: value, once, scope})
+                }
+            })
         } else if (typeof opts === 'object') {
-            scope    = scope || opts.scope;
-            listener = opts.fn;
-            order    = order || opts.order;
+            delay    = delay   || opts.delay;
             eventId  = eventId || opts.eventId;
+            listener = opts.fn;
+            once     = once    || opts.once;
+            order    = order   || opts.order;
+            scope    = scope   || opts.scope;
         } else if (typeof opts === 'function') {
             listener = opts;
         } else if (typeof opts === 'string') {
@@ -61,10 +79,12 @@ class Observable extends Base {
 
         if (!nameObject) {
             eventConfig = {
-                fn: listener,
-                scope,
                 data,
-                id: eventId || Neo.getId('event')
+                delay,
+                fn: listener,
+                id: eventId || Neo.getId('event'),
+                once,
+                scope
             };
 
             if (existing = me.listeners?.[name]) {
@@ -85,10 +105,10 @@ class Observable extends Base {
                 me.listeners[name] = [eventConfig];
             }
 
-            return eventConfig.id;
+            return eventConfig.id
         }
 
-        return null;
+        return null
     }
 
     /**
@@ -101,11 +121,22 @@ class Observable extends Base {
     callback(fn, scope=this, args) {
         if (fn) {
             const handler = this.resolveCallback(fn, scope);
-
-            handler.fn.apply(handler.scope, args);
+            handler.fn.apply(handler.scope, args)
         }
     }
 
+    /**
+     * Internal helper method for events which use the delay option
+     * @param {Object} cb
+     * @param {Array} args
+     * @param {Number} delay
+     */
+    delayedCallback(cb, args, delay) {
+        setTimeout(() => {
+            cb.fn.apply(cb.scope, args)
+        }, delay)
+    }
+
     /**
      * @param name
      */
@@ -113,29 +144,38 @@ class Observable extends Base {
         let me        = this,
             args      = [].slice.call(arguments, 1),
             listeners = me.listeners,
-            handler, handlers, i, len;
+            delay, handler, handlers, i, len;
 
         if (listeners && listeners[name]) {
             handlers = [...listeners[name]];
-            len    = handlers.length;
+            len      = handlers.length;
 
             for (i = 0; i < len; i++) {
                 handler = handlers[i];
+                delay   = handler.delay;
 
-                // Resolve function name on the scope (oe me), or, if it starts with 'up.'
+                // Resolve function name on the scope (or me), or, if it starts with 'up.'
                 // look in the ownership hierarchy from me.
                 const cb = me.resolveCallback(handler.fn, handler.scope || me);
 
-                // remove the listener, in case the scope no longer exists
+                // remove the listener if the scope no longer exists
                 if (cb.scope && !cb.scope.id) {
-                    listeners[name].splice(i, 1);
+                    listeners[name].splice(i, 1)
                 } else {
                     if (!me.suspendEvents) {
                         // Object event format. Inject firer reference in as 'source'
-                        if (args.length === 1 && typeof(args[0]) === 'object') {
-                            args[0].source = me.id;
+                        if (args.length === 1 && Neo.isObject(args[0])) {
+                            args[0].source = me.id
+                        }
+
+                        // remove the listener if it has the once flag
+                        handler.once && listeners[name].splice(i, 1)
+
+                        if (Neo.isNumber(delay) && delay > 0) {
+                            me.delayedCallback(cb, handler.data ? args.concat(handler.data) : args, delay)
+                        } else {
+                            cb.fn.apply(cb.scope, handler.data ? args.concat(handler.data) : args)
                         }
-                        cb.fn.apply(cb.scope, handler.data ? args.concat(handler.data) : args);
                     }
                 }
             }

package/src/form/field/Base.mjs

@@ -81,6 +81,17 @@ class Base extends Component {
      * @member {String|null} formGroupString=null
      */
     formGroupString = null
+    /**
+     * Base implementation to check if the fields value has changed.
+     * Can get overridden in superclasses.
+     * @returns {Boolean}
+     */
+    get isDirty() {
+        let originalValue = this.originalConfig.value,
+            value         = this.value;
+
+        return value !== originalValue && Neo.isEmpty(value) !== Neo.isEmpty(originalValue)
+    }
     /**
      * An internal cache for formGroup(s) and the field name
      * @member {String|null} path=null
@@ -96,7 +107,7 @@ class Base extends Component {
         let cls = this.cls;
 
         NeoArray.toggle(cls, 'neo-is-touched', value);
-        this.cls = cls;
+        this.cls = cls
     }
 
     /**
@@ -118,7 +129,7 @@ class Base extends Component {
      */
     afterSetRole(value, oldValue) {
         this.getInputEl().role = value;
-        this.update();
+        this.update()
     }
 
     /**
@@ -142,7 +153,7 @@ class Base extends Component {
             returnValue;
 
         if (me.formGroupString) {
-            return me.formGroupString;
+            return me.formGroupString
         }
 
         value && group.push(value);
@@ -178,9 +189,9 @@ class Base extends Component {
         let me = this;
 
         if (value || Neo.isBoolean(value) || value === 0) {
-            me.getInputEl()[key] = value;
+            me.getInputEl()[key] = value
         } else {
-            delete me.getInputEl()[key];
+            delete me.getInputEl()[key]
         }
 
         !silent && me.update()
@@ -295,14 +306,14 @@ class Base extends Component {
      * @returns {*}
      */
     getValue() {
-        return this.value;
+        return this.value
     }
 
     /**
      * @returns {Boolean}
      */
     isValid() {
-        return true;
+        return true
     }
 
     /**
@@ -350,7 +361,8 @@ class Base extends Component {
      * @param {*} value=null
      */
     reset(value=null) {
-        this.value = value;
+        this.originalConfig.value = value;
+        this.value = value
     }
 
     /**
@@ -359,7 +371,7 @@ class Base extends Component {
      * @returns {Boolean} Returns true in case there are no client-side errors
      */
     validate(silent=true) {
-        return true;
+        return true
     }
 }
 

package/src/form/field/Chip.mjs

@@ -1,10 +1,10 @@
-import Select from './Select.mjs';
+import ComboBox from './ComboBox.mjs';
 
 /**
  * @class Neo.form.field.Chip
- * @extends Neo.form.field.Select
+ * @extends Neo.form.field.ComboBox
  */
-class Chip extends Select {
+class Chip extends ComboBox {
     static config = {
         /**
          * @member {String} className='Neo.form.field.Chip'

package/src/form/field/Color.mjs

@@ -1,12 +1,12 @@
 import ColorList from '../../list/Color.mjs'
-import Select    from './Select.mjs';
+import ComboBox  from './ComboBox.mjs';
 import VDomUtil  from '../../util/VDom.mjs';
 
 /**
  * @class Neo.form.field.Color
- * @extends Neo.form.field.Select
+ * @extends Neo.form.field.ComboBox
  */
-class Color extends Select {
+class Color extends ComboBox {
     static config = {
         /**
          * @member {String} className='Neo.form.field.Color'