neo.mjs 6.17.1 → 6.18.0

package/resources/scss/src/apps/portal/home/preview/PageCodeContainer.scss

@@ -0,0 +1,115 @@
+.page-code-container {
+  position: relative;
+  padding: 20px;
+
+  &::before {
+    position:absolute;
+    inset: 0;
+    opacity: .4;
+    content: "";
+    background: {
+      image   : url("../../../../../../../../resources/images/logo/neo_logo_secondary.svg");
+      size: auto 90%;
+      repeat: no-repeat;
+      position: center;
+    }
+  }
+
+  .live-preview {
+    opacity: 0.9;
+
+    .live-preview-container {
+      & > .neo-tab-header-toolbar {
+        background: var(--sem-color-surface-primary-background);
+        border-radius: 15px 15px 0 0;
+        padding-right: 10px;
+        padding-left: 14px;
+
+        .neo-button-text {
+          color: slategrey!important;
+        }
+
+        .pressed {
+          border-bottom-right-radius: 0;
+          border-bottom-left-radius: 0;
+
+          .neo-button-text {
+            color: darkslategrey !important;
+          }
+
+          .neo-tab-button-indicator {
+            background-color: darkslategrey;
+          }
+        }
+
+      }
+
+      & > .neo-tab-content-container {
+        .monaco-editor {
+          .margin, .sticky-widget-line-numbers, .active-line-number {
+            background: #263238;
+            color: #cdd3de;
+          }
+
+          .monaco-editor-background, .sticky-widget-lines-scrollable {
+            background: #1B2225;
+            color: #cdd3de;
+
+            // keys
+            .mtk1 {
+              color: #CDFF8E;
+            }
+
+            // class, extends, static
+            .mtk6 {
+              color: #8EDCF5;
+            }
+
+            // numbers
+            .mtk7 {
+              color: #D6FF00
+            }
+
+            // Comment
+            .mtk8 {
+              color: #98A8B5;
+            }
+
+            // strings
+            .mtk20 {
+              color: #D6FF00
+            }
+
+            // Classname: MainView, Container
+            .mtk22 {
+                color: #cccccc;
+            }
+
+            /**
+             * Cursor
+             *  not used
+             *  - .monaco-mouse-cursor-text
+             *  - .cursors-layer
+             *  - .cursor-line-style
+             */
+            .cursor,
+            .cursor-solid {
+              background-color: #ffffff;
+            }
+
+            // not in use
+            .important {
+              color: #FFA9A9;
+              font-style: italic;
+            }
+
+            // not in use
+            .id {
+              color: #F3A5F7;
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/resources/scss/src/component/Base.scss

@@ -1,3 +1,5 @@
+.neo-scrollable {}
+
 // Shadow at the bottom
 .neo-aligned-bottom {
     box-shadow: var(--aligned-bottom-box-shadow);

package/resources/scss/src/examples/component/multiWindowHelix/Viewport.scss

@@ -0,0 +1,3 @@
+.multi-window-helix-viewport.neo-viewport {
+    overflow: hidden;
+}

package/resources/scss/src/form/field/CheckBox.scss

@@ -5,6 +5,7 @@
         display    : inline-block;
         font-family: var(--checkboxfield-icon-font-family);
         font-size  : var(--checkboxfield-icon-font-size);
+        font-style: normal !important;
         margin     : var(--checkboxfield-icon-margin);
         width      : 20px;
     }

package/resources/scss/src/tab/header/Button.scss

@@ -26,7 +26,8 @@
     }
 
     .neo-button-text {
-        color: var(--tab-button-text-color);
+        color    : var(--tab-button-text-color);
+        font-size: var(--tab-button-text-font-size);
     }
 
     .neo-tab-button-indicator {

package/resources/scss/theme-dark/Global.scss

@@ -4,4 +4,12 @@
     --neo-disabled-opacity: 0.5;
     --neo-font-family     : "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif;
     --neo-font-smoothing  : antialiased;
+
+    p {
+        color      : inherit;
+        font-family: inherit;
+        font-size  : inherit;
+        font-weight: inherit;
+        line-height: inherit;
+    }
 }

package/resources/scss/theme-dark/button/Base.scss

@@ -27,7 +27,7 @@ $text-color      : #bbb;
     --button-glyph-color-active                 : #{$text-color};
     --button-glyph-color-disabled               : #{$text-color};
     --button-glyph-color-hover                  : #{$text-color};
-    --button-height                             : inherit;
+    --button-height                             : initial;
     --button-margin                             : 2px;
     --button-opacity-disabled                   : var(--neo-disabled-opacity);
     --button-outline-active                     : none;

package/resources/scss/theme-dark/tab/header/Button.scss

@@ -26,5 +26,6 @@
     --tab-button-margin-bottom                  : 0;
     --tab-button-padding                        : 7px 12px 6px 12px;
     --tab-button-text-color                     : #bbb;
+    --tab-button-text-font-size                 : var(--button-text-font-size);
     --tab-button-text-transform                 : none;
 }

package/resources/scss/theme-light/Global.scss

@@ -4,4 +4,12 @@
     --neo-disabled-opacity: 0.5;
     --neo-font-family     : "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif;
     --neo-font-smoothing  : antialiased;
+
+    p {
+        color      : inherit;
+        font-family: inherit;
+        font-size  : inherit;
+        font-weight: inherit;
+        line-height: inherit;
+    }
 }

package/resources/scss/theme-light/button/Base.scss

@@ -26,7 +26,7 @@ $text-color      : #1c60a0;
     --button-glyph-color-active                 : #{$text-color};
     --button-glyph-color-disabled               : #{$text-color};
     --button-glyph-color-hover                  : #{$text-color};
-    --button-height                             : inherit;
+    --button-height                             : initial;
     --button-margin                             : 2px;
     --button-opacity-disabled                   : var(--neo-disabled-opacity);
     --button-outline-active                     : none;

package/resources/scss/theme-light/tab/header/Button.scss

@@ -26,5 +26,6 @@
     --tab-button-margin-bottom                  : 0;
     --tab-button-padding                        : 7px 12px 6px 12px;
     --tab-button-text-color                     : #2b2b2b;
+    --tab-button-text-font-size                 : var(--button-text-font-size);
     --tab-button-text-transform                 : uppercase;
 }

package/resources/scss/theme-neo-light/Global.scss

@@ -1,67 +1,67 @@
+@import "../../../resources/scss/theme-neo-light/design-tokens/_all.scss";
+
 :root .neo-theme-neo-light {
     --neo-background-color: #fafafa;
     --neo-color           : #000;
     --neo-disabled-opacity: 0.5;
     --neo-font-family     : 'Source Sans 3', sans-serif;
     --neo-font-smoothing  : antialiased;
-}
 
-@import "../../../resources/scss/theme-neo-light/design-tokens/_all.scss";
+    h1 {
+        color           : var(--sem-color-fg-neutral-contrast);
+        font-family     : var(--core-fontfamily-sans);
+        font-size       : var(--core-fontsize-h1);
+        font-weight     : var(--core-fontweight-semibold);
+        letter-spacing  : -0.02em;
+        line-height     : var(--core-lineheight-headline);
+    }
 
-h1 {
-    color           : var(--sem-color-fg-neutral-contrast);
-    font-family     : var(--core-fontfamily-sans);
-    font-size       : var(--core-fontsize-h1);
-    font-weight     : var(--core-fontweight-semibold);
-    letter-spacing  : -0.02em;
-    line-height     : var(--core-lineheight-headline);
-}
+    h2 {
+        color           : var(--sem-color-fg-neutral-contrast);
+        font-family     : var(--core-fontfamily-sans);
+        font-size       : var(--core-fontsize-h2);
+        font-weight     : var(--core-fontweight-semibold);
+        letter-spacing  : -0.02em;
+        line-height     : var(--core-lineheight-headline);
+    }
 
-h2 {
-    color           : var(--sem-color-fg-neutral-contrast);
-    font-family     : var(--core-fontfamily-sans);
-    font-size       : var(--core-fontsize-h2);
-    font-weight     : var(--core-fontweight-semibold);
-    letter-spacing  : -0.02em;
-    line-height     : var(--core-lineheight-headline);
-}
+    h3 {
+        color           : var(--sem-color-fg-neutral-contrast);
+        font-family     : var(--core-fontfamily-sans);
+        font-size       : var(--core-fontsize-h3);
+        font-weight     : var(--core-fontweight-semibold);
+        letter-spacing  : -0.02em;
+        line-height     : var(--core-lineheight-headline);
+    }
 
-h3 {
-    color           : var(--sem-color-fg-neutral-contrast);
-    font-family     : var(--core-fontfamily-sans);
-    font-size       : var(--core-fontsize-h3);
-    font-weight     : var(--core-fontweight-semibold);
-    letter-spacing  : -0.02em;
-    line-height     : var(--core-lineheight-headline);
-}
+    p {
+        color           : var(--sem-color-fg-neutral-contrast);
+        font-family     : var(--core-fontfamily-sans);
+        font-size       : var(--core-fontsize-body);
+        font-weight     : var(--core-fontweight-regular);
+        line-height     : var(--core-lineheight-paragraph);
+    }
 
-p {
-    color           : var(--sem-color-fg-neutral-contrast);
-    font-family     : var(--core-fontfamily-sans);
-    font-size       : var(--core-fontsize-body);
-    font-weight     : var(--core-fontweight-regular);
-    line-height     : var(--core-lineheight-paragraph);
-}
+    i, em {
+        font-style: italic;
+    }
 
-i, em {
-    font-style: italic;
-}
-
-code {
-    background-color: #F0F2F0;
-    border          : 1px solid var(--sem-color-border-subtle);
-    border-radius   : 4px;
-    color           : var(--sem-color-fg-neutral-contrast);
-    font-family     : var(--core-fontfamily-mono);
-    font-size       : var(--core-fontsize-body);
-    font-weight     : var(--core-fontweight-regular);
-    line-height     : var(--core-lineheight-headline);
-    padding         : 2px 0.3em;
-    font-size       : 16px;
-}
+    code &:not(.hljs) {
+        background-color: #F0F2F0;
+        border          : 1px solid var(--sem-color-border-subtle);
+        border-radius   : 4px;
+        color           : var(--sem-color-fg-neutral-contrast);
+        font-family     : var(--core-fontfamily-mono);
+        font-size       : var(--core-fontsize-body);
+        font-weight     : var(--core-fontweight-regular);
+        line-height     : var(--core-lineheight-headline);
+        padding         : 2px 0.3em;
+        font-size       : 16px;
+    }
 
-mark {
-    background-color: var(--green-50);
-    color           : black;
-    padding         : 0.1em 0.2em;
+    mark {
+        background-color: var(--green-50);
+        color           : black;
+        padding         : 0.1em 0.2em;
+    }
 }

package/resources/scss/theme-neo-light/button/Base.scss

@@ -1,6 +1,4 @@
-
 :root .neo-theme-neo-light {
-
     // .neo-button – Styles that will be inherited by ALL button styles
     --button-height                             : var(--cmp-button-height);
     --button-margin                             : var(--cmp-button-gap);
@@ -152,10 +150,11 @@
     // custom overrides
     .neo-button {
         min-width: var(--cmp-button-height);
+
         &.neo-button-tertiary {
-            text-decoration: underline;
-            text-underline-offset: 3px;
+            text-decoration      : underline;
             text-decoration-color: var(--sem-color-text-primary-default);
+            text-underline-offset: 3px;
         }
     }
 }

package/resources/scss/theme-neo-light/tab/header/Button.scss

@@ -26,17 +26,15 @@
     --tab-button-margin-bottom                  : 0;
     --tab-button-padding                        : 7px var(--cmp-tab-spacinghorizontal) 6px;
     --tab-button-text-color                     : var(--sem-color-fg-neutral-subdued);
+    --tab-button-text-font-size                 : var(--sem-typo-label-regular-fontSize);
     --tab-button-text-transform                 : uppercase;
 
     // custom overrides
-    .neo-button-text {
-        font-size: var(--sem-typo-label-regular-fontSize) !important;
-    }
-
-    .pressed {
-        .neo-button-glyph, .neo-button-text {
-            color: var(--sem-color-fg-neutral-contrast) !important;
+    .neo-tab-header-button.neo-button {
+        .pressed {
+            .neo-button-glyph, .neo-button-text {
+                color: var(--sem-color-fg-neutral-contrast);
+            }
         }
     }
 }
-

package/src/DefaultConfig.mjs

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

package/src/Fetch.mjs

@@ -35,6 +35,4 @@ class Fetch extends FetchConnection {
     }
 }
 
-let instance = Neo.setupClass(Fetch);
-
-export default instance;
+export default Neo.setupClass(Fetch);

package/src/Main.mjs

@@ -170,8 +170,8 @@ class Main extends core.Base {
      * @returns {Object}
      */
     getWindowData() {
-        let win    = window,
-            screen = win.screen;
+        let win      = window,
+            {screen} = win;
 
         return {
             innerHeight: win.innerHeight,
@@ -201,7 +201,7 @@ class Main extends core.Base {
      * @returns {Boolean}
      */
     async importAddon(data) {
-        let name = data.name,
+        let {name} = data,
             module;
 
         if (name.startsWith('WS/')) {
@@ -234,10 +234,10 @@ class Main extends core.Base {
      *
      */
     async onDomContentLoaded() {
-        let me               = this,
-            config           = Neo.config,
-            mainThreadAddons = config.mainThreadAddons,
-            imports          = [],
+        let me                 = this,
+            {config}           = Neo,
+            {mainThreadAddons} = config,
+            imports            = [],
             modules;
 
         DomAccess.onDomContentLoaded();
@@ -452,7 +452,11 @@ class Main extends core.Base {
      * @param {*} data.value
      */
     setNeoConfig(data) {
-        Neo.config[data.key] = data.value
+        let {key, value} = data;
+
+        Neo.config[key] = data.value;
+
+        key === 'renderCountDeltas' && DomAccess.set({[key]: value})
     }
 
     /**
@@ -526,6 +530,4 @@ class Main extends core.Base {
     }
 }
 
-let instance = Neo.setupClass(Main);
-
-export default instance;
+export default Neo.setupClass(Main);

package/src/MicroLoader.mjs

@@ -1,4 +1,4 @@
 fetch('./neo-config.json').then(r => r.json()).then(d => {
     globalThis.Neo = {config: {...d}};
-    import(d.mainPath);
-});
+    import(d.mainPath)
+})

package/src/Neo.mjs

@@ -85,7 +85,7 @@ Neo = globalThis.Neo = Object.assign({
         if (target && Neo.typeOf(config) === 'Object') {
             Object.entries(config).forEach(([key, value]) => {
                 fnName = namespace[value];
-                target[key] = bind ? fnName.bind(namespace) : fnName;
+                target[key] = bind ? fnName.bind(namespace) : fnName
             })
         }
 
@@ -284,12 +284,13 @@ Neo = globalThis.Neo = Object.assign({
             descriptor = Object.getOwnPropertyDescriptor(proto, key);
 
             if (typeof descriptor === 'object' && typeof descriptor.set === 'function') {
-                return true;
+                return true
             }
-            proto = proto.__proto__;
+
+            proto = proto.__proto__
         }
 
-        return false;
+        return false
     },
 
     /**
@@ -339,13 +340,13 @@ Neo = globalThis.Neo = Object.assign({
 
         return names.reduce((prev, current) => {
             if (create && !prev[current]) {
-                prev[current] = {};
+                prev[current] = {}
             }
 
             if (prev) {
-                return prev[current];
+                return prev[current]
             }
-        }, scope || globalThis);
+        }, scope || globalThis)
     },
 
     /**
@@ -362,7 +363,7 @@ Neo = globalThis.Neo = Object.assign({
         return names.reduce((prev, current) => {
             if (create && !prev[current]) {
                 if (current.endsWith(']')) {
-                    return createArrayNs(true, current, prev);
+                    return createArrayNs(true, current, prev)
                 }
 
                 prev[current] = {}
@@ -370,7 +371,7 @@ Neo = globalThis.Neo = Object.assign({
 
             if (prev) {
                 if (current.endsWith(']')) {
-                    return createArrayNs(false, current, prev);
+                    return createArrayNs(false, current, prev)
                 }
 
                 return prev[current]
@@ -402,7 +403,7 @@ Neo = globalThis.Neo = Object.assign({
             config = ntype;
 
             if (!config.ntype) {
-                throw new Error('Class defined with object configuration missing ntype property. ' + config.ntype);
+                throw new Error('Class defined with object configuration missing ntype property. ' + config.ntype)
             }
 
             ntype = config.ntype
@@ -426,7 +427,7 @@ Neo = globalThis.Neo = Object.assign({
     setupClass(cls) {
         let baseCfg    = null,
             ntypeChain = [],
-            ntypeMap   = Neo.ntypeMap,
+            {ntypeMap} = Neo,
             proto      = cls.prototype || cls,
             protos     = [],
             cfg, config, ctor, ntype;
@@ -454,7 +455,7 @@ Neo = globalThis.Neo = Object.assign({
             cfg = ctor.config || {};
 
             if (Neo.overwrites) {
-                ctor.applyOverwrites(cfg)
+                ctor.applyOverwrites?.(cfg)
             }
 
             Object.entries(cfg).forEach(([key, value]) => {
@@ -487,7 +488,7 @@ Neo = globalThis.Neo = Object.assign({
                     throw new Error(`ntype conflict for '${ntype}' inside the classes:\n${ntypeMap[ntype]}\n${cfg.className}`)
                 }
 
-                ntypeMap[ntype] = cfg.className;
+                ntypeMap[ntype] = cfg.className
             }
 
             mixins = Object.hasOwn(config, 'mixins') && config.mixins || [];
@@ -590,10 +591,10 @@ function applyMixins(cls, mixins) {
 
         if (mixin.isClass) {
             mixinProto = mixin.prototype;
-            mixinCls   = Neo.ns(mixinProto.className);
+            mixinCls   = Neo.ns(mixinProto.className)
         } else {
             if (!exists(mixin)) {
-                throw new Error('Attempting to mixin an undefined class: ' + mixin + ', ' + cls.prototype.className);
+                throw new Error('Attempting to mixin an undefined class: ' + mixin + ', ' + cls.prototype.className)
             }
 
             mixinCls   = Neo.ns(mixin);
@@ -602,10 +603,10 @@ function applyMixins(cls, mixins) {
 
         mixinProto.className.split('.').reduce(mixReduce(mixinCls), mixinClasses);
 
-        Object.getOwnPropertyNames(mixinProto).forEach(mixinProperty(cls.prototype, mixinProto));
+        Object.getOwnPropertyNames(mixinProto).forEach(mixinProperty(cls.prototype, mixinProto))
     }
 
-    cls.prototype.mixins = mixinClasses; // todo: we should do a deep merge
+    cls.prototype.mixins = mixinClasses // todo: we should do a deep merge
 }
 
 /**
@@ -617,7 +618,7 @@ function applyMixins(cls, mixins) {
  */
 function autoGenerateGetSet(proto, key) {
     if (Neo.hasPropertySetter(proto, key)) {
-        throw('Config ' + key + '_ (' + proto.className + ') already has a set method, use beforeGet, beforeSet & afterSet instead');
+        throw('Config ' + key + '_ (' + proto.className + ') already has a set method, use beforeGet, beforeSet & afterSet instead')
     }
 
     if (!Neo[getSetCache]) {
@@ -693,10 +694,10 @@ function autoGenerateGetSet(proto, key) {
                     me.afterSetConfig?.(key, value, oldValue)
                 }
             }
-        };
+        }
     }
 
-    Object.defineProperty(proto, key, Neo[getSetCache][key]);
+    Object.defineProperty(proto, key, Neo[getSetCache][key])
 }
 
 /**
@@ -718,14 +719,14 @@ function createArrayNs(create, current, prev) {
     }
 
     if (!arrRoot) {
-        return;
+        return
     }
 
     for (; i < len; i++) {
         arrItem = parseInt(arrDetails[i]);
 
         if (create) {
-            arrRoot[arrItem] = arrRoot[arrItem] || {};
+            arrRoot[arrItem] = arrRoot[arrItem] || {}
         }
 
         arrRoot = arrRoot[arrItem]
@@ -743,7 +744,7 @@ function createArrayNs(create, current, prev) {
 function exists(className) {
     try {
         return !!className.split('.').reduce((prev, current) => {
-            return prev[current];
+            return prev[current]
         }, globalThis)
     } catch(e) {
         return false
@@ -759,7 +760,7 @@ function exists(className) {
 function mixinProperty(proto, mixinProto) {
     return function(key) {
         if (~ignoreMixin.indexOf(key)) {
-            return;
+            return
         }
 
         if (proto[key]?._from) {
@@ -770,7 +771,7 @@ function mixinProperty(proto, mixinProto) {
 
             throw new Error(
                 `${proto.className}: Multiple mixins defining same property (${mixinProto.className}, ${proto[key]._from}) => ${key}`
-            );
+            )
         }
 
         proto[key] = mixinProto[key];
@@ -780,7 +781,7 @@ function mixinProperty(proto, mixinProto) {
         if (typeof proto[key] === 'function') {
             proto[key]._name = key
         }
-    };
+    }
 }
 
 /**

package/src/Xhr.mjs

@@ -36,6 +36,4 @@ class Xhr extends XhrConnection {
     }
 }
 
-let instance = Neo.setupClass(Xhr);
-
-export default instance;
+export default Neo.setupClass(Xhr);