neo.mjs 10.0.0-alpha.5 → 10.0.0-beta.2

package/resources/scss/theme-neo-light/table/{View.scss → Body.scss}

@@ -1,6 +1,6 @@
 @use "sass:color";
 
-:root .neo-theme-neo-light { // .neo-table-view
+:root .neo-theme-neo-light { // .neo-table-body
     --table-cell-background-color-hover                    : #{color.adjust(#33343d, $lightness: 70%)};
     --table-cell-ismodified-color                          : orange;
     --table-cell-ismodified-size                           : 10px;

package/src/DefaultConfig.mjs

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

package/src/Main.mjs

@@ -1,10 +1,11 @@
-import Neo           from './Neo.mjs';
-import * as core     from './core/_export.mjs';
-import DomAccess     from './main/DomAccess.mjs'; // has to get imported before DeltaUpdates
-import DeltaUpdates  from './main/DeltaUpdates.mjs';
-import DomEvents     from './main/DomEvents.mjs';
-import Observable    from './core/Observable.mjs';
-import WorkerManager from './worker/Manager.mjs';
+import Neo                   from './Neo.mjs';
+import * as core             from './core/_export.mjs';
+import ClassHierarchyManager from './manager/ClassHierarchy.mjs';
+import DomAccess             from './main/DomAccess.mjs'; // has to get imported before DeltaUpdates
+import DeltaUpdates          from './main/DeltaUpdates.mjs';
+import DomEvents             from './main/DomEvents.mjs';
+import Observable            from './core/Observable.mjs';
+import WorkerManager         from './worker/Manager.mjs';
 
 /**
  * @class Neo.Main

package/src/Neo.mjs

@@ -466,11 +466,11 @@ Neo = globalThis.Neo = Object.assign({
             proto      = cls.prototype || cls,
             ns         = Neo.ns(proto.constructor.config.className, false),
             protos     = [],
-            cfg, config, ctor, ntype;
+            cfg, config, ctor, hierarchyInfo, ntype;
 
         /*
          * If the namespace already exists, directly return it.
-         * This can happen when using different versions of neo.mjs
+         * This can happen when using different versions of Neo.mjs
          * => Especially singletons (IdGenerator) must stay unique.
          *
          * This can also happen when using different environments of neo.mjs in parallel.
@@ -583,6 +583,20 @@ Neo = globalThis.Neo = Object.assign({
             Neo.applyToGlobalNs(cls)
         }
 
+        hierarchyInfo = {
+            className      : proto.className,
+            module         : cls,
+            ntype          : Object.hasOwn(proto, 'ntype') ? proto.ntype : null,
+            parentClassName: proto.__proto__?.className || null
+        };
+
+        if (Neo.manager?.ClassHierarchy) {
+            Neo.manager.ClassHierarchy.add(hierarchyInfo)
+        } else {
+            Neo.classHierarchyMap ??= {};
+            Neo.classHierarchyMap[proto.className] = hierarchyInfo
+        }
+
         return cls
     },
 

package/src/button/Base.mjs

@@ -100,9 +100,9 @@ class Button extends Component {
         route_: null,
         /**
          * The text displayed on the button [optional]
-         * @member {String|null} text_=null
+         * @member {String|null} text=null
          */
-        text_: null,
+        text: null,
         /**
          * Transforms the button tag into an a tag [optional]
          * @member {String|null} url_=null

package/src/calendar/view/SettingsContainer.mjs

@@ -95,8 +95,8 @@ class SettingsContainer extends Container {
                 ntype : 'component',
                 flag  : 'day',
                 header: {text: 'Day'},
-                html  : 'Day',
-                style : {padding: '20px'}
+                style : {padding: '20px'},
+                test  : 'Day'
             }, {
                 module: () => import('./settings/WeekContainer.mjs'),
                 flag  : 'week',

package/src/calendar/view/YearComponent.mjs

@@ -490,7 +490,7 @@ class YearComponent extends Component {
                             {cls: ['neo-animation-wrapper'], cn: [
                                 {cls: ['neo-content-wrapper'], cn: [
                                     {cls: ['neo-year-header'], cn: [
-                                        {html: me.currentDate.getFullYear()},
+                                        {text: me.currentDate.getFullYear()},
                                         {cls: ['neo-nav-button', 'neo-prev-button']},
                                         {cls: ['neo-nav-button', 'neo-next-button']}
                                     ]},
@@ -539,7 +539,7 @@ class YearComponent extends Component {
         for (; i < 7; i++) {
             node = {
                 cls : ['neo-cell', 'neo-weekday-cell'],
-                html: me.intlFormat_day.format(date)
+                text: me.intlFormat_day.format(date)
             };
 
             day = date.getDay();
@@ -591,8 +591,8 @@ class YearComponent extends Component {
 
                 cn: [{
                     cls      : ['neo-cell', 'neo-weeknumber-cell'],
-                    html     : DateUtil.getWeekOfYear(weekDate),
-                    removeDom: !me.showWeekNumbers
+                    removeDom: !me.showWeekNumbers,
+                    text     : DateUtil.getWeekOfYear(weekDate)
                 }]
             };
 
@@ -610,7 +610,7 @@ class YearComponent extends Component {
 
                     cn: [{
                         cls : ['neo-cell-content'],
-                        html: hasContent ? day : me.showDisabledDays ? date.getDate() : ''
+                        text: hasContent ? day : me.showDisabledDays ? date.getDate() : ''
                     }]
                 };
 
@@ -679,7 +679,7 @@ class YearComponent extends Component {
 
                 monthVdom =
                 {cls: ['neo-month'], cn: [
-                    {cls: ['neo-month-name'], html: me.intlFormat_month.format(currentDate)},
+                    {cls: ['neo-month-name'], text: me.intlFormat_month.format(currentDate)},
                     me.createDayNamesRow()
                 ]};
 
@@ -809,7 +809,7 @@ class YearComponent extends Component {
                     day  = date.getDay();
                     node = vdom.cn[0].cn[1].cn[j].cn[1].cn[i];
 
-                    node.html = me.intlFormat_day.format(date);
+                    node.text = me.intlFormat_day.format(date);
 
                     if (!me.showWeekends && (day === 0 || day === 6)) {
                         node.removeDom = true
@@ -829,7 +829,7 @@ class YearComponent extends Component {
      *
      */
     updateHeaderYear() {
-        this.vdom.cn[0].cn[0].cn[0].html = this.currentDate.getFullYear()
+        this.vdom.cn[0].cn[0].cn[0].text = this.currentDate.getFullYear()
     }
 
     /**
@@ -852,7 +852,7 @@ class YearComponent extends Component {
                 currentDate.setMonth(i);
                 currentDate.setDate(1);
 
-                vdom.cn[0].cn[1].cn[i].cn[0].html = me.intlFormat_month.format(currentDate)
+                vdom.cn[0].cn[1].cn[i].cn[0].text = me.intlFormat_month.format(currentDate)
             }
 
             !silent && me.update()

package/src/calendar/view/calendars/ColorsList.mjs

@@ -63,7 +63,7 @@ class ColorsList extends List {
      * Override this method for custom renderers
      * @param {Object} record
      * @param {Number} index
-     * @returns {Object|Object[]|String} Either a config object to assign to the item, a vdom cn array or a html string
+     * @returns {Object|Object[]|String} Either a config object to assign to the item, a vdom cn array or a string.
      */
     createItemContent(record, index) {
         return {style: {

package/src/calendar/view/calendars/List.mjs

@@ -43,7 +43,7 @@ class List extends ComponentList {
      * Override this method for custom renderers
      * @param {Object} record
      * @param {Number} index
-     * @returns {Object|Object[]|String} Either a config object to assign to the item, a vdom cn array or a html string
+     * @returns {Object|Object[]|String} Either a config object to assign to the item, a vdom cn array or a string.
      */
     createItemContent(record, index) {
         let me       = this,

package/src/calendar/view/month/Component.mjs

@@ -485,10 +485,10 @@ class Component extends BaseComponent {
                             tag : 'span',
                             cls : ['neo-month-name'],
                             flag: 'month-name',
-                            html: me.intlFormat_month.format(date)
+                            text: me.intlFormat_month.format(date)
                         }, {
                             vtype: 'text',
-                            html : ` ${date.getFullYear()}`
+                            text : ` ${date.getFullYear()}`
                         }]
                     }]
                 };
@@ -499,8 +499,8 @@ class Component extends BaseComponent {
                 id : `${me.id}__day__${ymdDate}`,
                 cn : [{
                     cls : ['neo-day-number'],
-                    html: day,
-                    id : `${me.id}__day_number__${ymdDate}`
+                    id : `${me.id}__day_number__${ymdDate}`,
+                    text: day
                 }]
             };
 
@@ -530,12 +530,12 @@ class Component extends BaseComponent {
 
                             cn: [{
                                 cls : ['neo-event-title'],
-                                html: record.title,
-                                id  : me.id + '__title__' + recordKey
+                                id  : me.id + '__title__' + recordKey,
+                                text: record.title
                             }, {
                                 cls : ['neo-event-time'],
-                                html: me.intlFormat_time.format(record.startDate),
-                                id  : me.id + '__time__' + recordKey
+                                id  : me.id + '__time__' + recordKey,
+                                text: me.intlFormat_time.format(record.startDate)
                             }]
                         });
                     }
@@ -729,8 +729,8 @@ class Component extends BaseComponent {
             if (flag) {
                 date = new Date(flag);
                 date.setMonth(date.getMonth() + 1);
-                header.cn[0].html = me.intlFormat_month.format(date);
-                header.cn[1].html = ` ${date.getFullYear()}`;
+                header.cn[0].text = me.intlFormat_month.format(date);
+                header.cn[1].text = ` ${date.getFullYear()}`;
                 break
             }
         }
@@ -753,8 +753,8 @@ class Component extends BaseComponent {
             i      = 1,
             day, node;
 
-        header.cn[0].html = me.intlFormat_month.format(date);
-        header.cn[1].html = ` ${date.getFullYear()}`;
+        header.cn[0].text = me.intlFormat_month.format(date);
+        header.cn[1].text = ` ${date.getFullYear()}`;
 
         date.setDate(me.currentDate.getDate() - me.currentDate.getDay() + me.weekStartDay);
 
@@ -764,7 +764,7 @@ class Component extends BaseComponent {
             if (create) {
                 node = {
                     cls : ['neo-day-name'],
-                    html: me.intlFormat_day.format(date)
+                    text: me.intlFormat_day.format(date)
                 };
 
                 if (!me.showWeekends && (day === 0 || day === 6)) {
@@ -777,7 +777,7 @@ class Component extends BaseComponent {
 
                 // the method could be called before the header content got created
                 if (node) {
-                    node.html = me.intlFormat_day.format(date);
+                    node.text = me.intlFormat_day.format(date);
 
                     if (!me.showWeekends && (day === 0 || day === 6)) {
                         node.removeDom = true
@@ -802,7 +802,7 @@ class Component extends BaseComponent {
             months = VDomUtil.getFlags(me.vdom, 'month-name');
 
         months.forEach(month => {
-            month.html = me.intlFormat_month.format(date);
+            month.text = me.intlFormat_month.format(date);
             date.setMonth(date.getMonth() + 1);
         });
 

package/src/calendar/view/week/Component.mjs

@@ -582,8 +582,8 @@ class Component extends BaseComponent {
 
         header =
         {cls: ['neo-header-row-item'], removeDom: removeDom, cn: [
-            {cls: ['neo-day'], html: me.intlFormat_day.format(date)},
-            {cls: dateCls,     html: currentDate}
+            {cls: ['neo-day'], text: me.intlFormat_day.format(date)},
+            {cls: dateCls,     text: currentDate}
         ]};
 
         return {column, header}
@@ -906,17 +906,17 @@ class Component extends BaseComponent {
 
                             cn: [{
                                 cls : ['neo-event-time'],
-                                html: me.intlFormat_time.format(record.startDate),
-                                id  : `${me.id}__time__${recordKey}`
+                                id  : `${me.id}__time__${recordKey}`,
+                                text: me.intlFormat_time.format(record.startDate)
                             }, {
                                 cls : ['neo-event-title'],
-                                html: record.title,
-                                id  : `${me.id}__title__${recordKey}`
+                                id  : `${me.id}__title__${recordKey}`,
+                                text: record.title
                             }, {
                                 cls      : ['neo-event-time', 'neo-event-end-time'],
-                                html     : me.intlFormat_time.format(record.endDate),
                                 id       : `${me.id}__enddate__${recordKey}`,
-                                removeDom: !showEventEndTime
+                                removeDom: !showEventEndTime,
+                                text     : me.intlFormat_time.format(record.endDate)
                             }],
 
                             style: {
@@ -975,8 +975,8 @@ class Component extends BaseComponent {
 
                 header.cn.push(
                 {cls: ['neo-header-row-item'], id: headerId, removeDom, cn: [
-                    {cls: ['neo-day'], html: me.intlFormat_day.format(date), id: `${headerId}_day`},
-                    {cls : dateCls,    html: currentDate,                    id: `${headerId}_date`}
+                    {cls: ['neo-day'], id: `${headerId}_day`,  text: me.intlFormat_day.format(date)},
+                    {cls : dateCls,    id: `${headerId}_date`, text: currentDate}
                 ]})
             } else {
                 Object.assign(content.cn[i], {
@@ -987,8 +987,8 @@ class Component extends BaseComponent {
                 });
 
                 Object.assign(header.cn[i],       {id: headerId, removeDom});
-                Object.assign(header.cn[i].cn[0], {html: me.intlFormat_day.format(date), id: `${headerId}_day`});
-                Object.assign(header.cn[i].cn[1], {cls: dateCls, html: currentDate, id: `${headerId}_date`})
+                Object.assign(header.cn[i].cn[0], {id: `${headerId}_day`, text: me.intlFormat_day.format(date)});
+                Object.assign(header.cn[i].cn[1], {cls: dateCls, id: `${headerId}_date`, text: currentDate})
             }
 
             date.setDate(date.getDate() + 1)

package/src/calendar/view/week/EventDragZone.mjs

@@ -450,8 +450,8 @@ class EventDragZone extends DragZone {
                 endDate = me.adjustEndDate(endDate);
 
                 deltas.push({
-                    id       : me.dragProxy.vdom.cn[2].id,
-                    innerHTML: owner.intlFormat_time.format(endDate)
+                    id         : me.dragProxy.vdom.cn[2].id,
+                    textContent: owner.intlFormat_time.format(endDate)
                 });
 
                 if (keepEndDate || keepStartDate) {
@@ -460,8 +460,8 @@ class EventDragZone extends DragZone {
                 }
 
                 deltas.push({
-                    id       : me.dragProxy.vdom.cn[0].id,
-                    innerHTML: owner.intlFormat_time.format(startDate)
+                    id         : me.dragProxy.vdom.cn[0].id,
+                    textContent: owner.intlFormat_time.format(startDate)
                 });
 
                 // check if the node got added yet

package/src/calendar/view/week/TimeAxisComponent.mjs

@@ -179,16 +179,16 @@ class TimeAxisComponent extends Component {
      */
     createItems() {
         let {vdom} = this,
-            html, i;
+            text, i;
 
         vdom.cn = [];
 
         for (i=0; i < 25; i++) {
-            html = i === 24 ? '00:00' : (i < 10 ? '0' : '') + i + ':00';
+            text = i === 24 ? '00:00' : (i < 10 ? '0' : '') + i + ':00';
 
             vdom.cn.push({
                 cls: ['neo-c-w-timeaxis-item'],
-                cn : [{html}]
+                cn : [{text}]
             })
         }
     }

package/src/component/Base.mjs

@@ -342,6 +342,11 @@ class Component extends Base {
          * @member {String|null} tag_=null
          */
         tag_: null,
+        /**
+         * The top level textContent of the component
+         * @member {String|null} text_=null
+         */
+        text_: null,
         /**
          * Add tooltip config object or a string containing the display text
          * See tooltip/Base.mjs
@@ -995,6 +1000,16 @@ class Component extends Base {
         }
     }
 
+    /**
+     * Triggered after the text config got changed
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     * @protected
+     */
+    afterSetText(value, oldValue) {
+        this.changeVdomRootKey('text', value)
+    }
+
     /**
      * Triggered after the tooltip config got changed
      * @param {Object|String} value
@@ -1417,8 +1432,8 @@ class Component extends Base {
                     cls: this.loadingSpinnerCls
                 }, {
                     cls      : ['neo-loading-message'],
-                    html     : loadingMessage,
-                    removeDom: !Neo.isString(loadingMessage)
+                    removeDom: !Neo.isString(loadingMessage),
+                    text     : loadingMessage
                 }]
             }]
         }

package/src/component/Carousel.mjs

@@ -65,10 +65,10 @@ class Carousel extends Component {
          *      record = {foo: ... , bar: ...}
          *      data => [{
          *          cls: 'css-foo-class',
-         *          html: data.foo
+         *          text: data.foo
          *      },
          *      {
-         *          html: data.baa
+         *          text: data.bar
          *      }]"
          */
         itemTpl_: null,

package/src/component/Chip.mjs

@@ -38,9 +38,9 @@ class Chip extends Component {
         iconCls_: null,
         /**
          * The text displayed on the button [optional]
-         * @member {String|null} text_=null
+         * @member {String|null} text=null
          */
-        text_: null,
+        text: null,
         /**
          * Set this one to false when used in lists
          * @member {Boolean} useDomListeners=true
@@ -132,7 +132,7 @@ class Chip extends Component {
             textNode.removeDom = true
         } else {
             textNode.removeDom = false;
-            textNode.html      = value
+            textNode.text      = value
         }
 
         this.update()

package/src/component/Circle.mjs

@@ -850,8 +850,8 @@ class Circle extends Component {
         let me          = this,
             innerCircle = me.getInnerCircle();
 
-        innerCircle.cn[0].html = me.store?.getCount() || 0;
-        innerCircle.cn[1].html = me.title;
+        innerCircle.cn[0].text = me.store?.getCount() || 0;
+        innerCircle.cn[1].text = me.title;
 
         !silent && me.update()
     }

package/src/component/DateSelector.mjs

@@ -250,7 +250,7 @@ class DateSelector extends Component {
 
             me.updateHeaderDays(me.dayNameFormat, '', true);
 
-            me.getHeaderMonthEl().html = dt.format(me.currentDate);
+            me.getHeaderMonthEl().text = dt.format(me.currentDate);
 
             me.update()
         }
@@ -588,7 +588,7 @@ class DateSelector extends Component {
         for (; i < len; i++) {
             config =
             {cls: ['neo-cell'], cn: [
-                {cls : ['neo-cell-content'], html: me.intlFormat_day.format(date)}
+                {cls : ['neo-cell-content'], text: me.intlFormat_day.format(date)}
             ]};
 
             day = date.getDay();
@@ -652,7 +652,7 @@ class DateSelector extends Component {
                     tabIndex: hasContent ? -1 : null,
                     cn: [{
                         cls : ['neo-cell-content'],
-                        html: hasContent ? day : me.showDisabledDays ? date.getDate() : ''
+                        text: hasContent ? day : me.showDisabledDays ? date.getDate() : ''
                     }]
                 };
 
@@ -748,7 +748,7 @@ class DateSelector extends Component {
             cellEl = VDomUtil.find(me.vdom, data.path[0].id),
             date   = me.currentDate; // cloned
 
-        date.setDate(parseInt(cellEl.vdom.cn[0].html));
+        date.setDate(parseInt(cellEl.vdom.cn[0].text));
         date = DateUtil.convertToyyyymmdd(date);
 
         // We want to always trigger a change event.
@@ -893,7 +893,7 @@ class DateSelector extends Component {
             for (; i < 7; i++) {
                 node = centerEl.cn[i];
 
-                node.cn[0].html = me.intlFormat_day.format(date);
+                node.cn[0].text = me.intlFormat_day.format(date);
 
                 day = date.getDay();
 
@@ -927,7 +927,7 @@ class DateSelector extends Component {
             headerCenterEl, y;
 
         if (!me.mounted || !me.useAnimations) {
-            monthEl.html = currentMonth;
+            monthEl.text = currentMonth;
             !silent && me.update();
             return null
         } else {
@@ -954,7 +954,7 @@ class DateSelector extends Component {
 
             headerCenterEl.cn[0].cn[0].cn.push({
                 cls : ['neo-month-text'],
-                html: currentMonth
+                text: currentMonth
             });
 
             headerCenterEl.cn[0].cn[0].cn[slideDirection === 'top' ? 'unshift' : 'push'](headerCenterEl.cn[1]);
@@ -1012,7 +1012,7 @@ class DateSelector extends Component {
         let me     = this,
             yearEl = me.getHeaderYearEl();
 
-        yearEl.html = me.currentDate.getFullYear();
+        yearEl.text = me.currentDate.getFullYear();
 
         !silent && me.update()
     }

package/src/component/Helix.mjs

@@ -702,7 +702,7 @@ class Helix extends Component {
             if (me.showCloneInfo) {
                 itemVdom.cn.push({
                     cls : ['contact-name'],
-                    html: record.firstname + ' ' + record.lastname
+                    text: record.firstname + ' ' + record.lastname
                 })
             }
 

package/src/component/Label.mjs

@@ -22,25 +22,10 @@ class Label extends Component {
          */
         baseCls: ['neo-label'],
         /**
-         * @member {String} text_=''
-         */
-        text_: '',
-        /**
-         * @member {Object} _vdom={tag: 'label'}
+         * @member {String} tag='label'
+         * @protected
          */
-        _vdom:
-        {tag: 'label', draggable: false}
-    }
-
-    /**
-     * Triggered after the text config got changed
-     * @param {String} value
-     * @param {String} oldValue
-     * @protected
-     */
-    afterSetText(value, oldValue) {
-        this.vdom.html = value;
-        this.update()
+        tag: 'label'
     }
 }
 

package/src/component/Legend.mjs

@@ -27,9 +27,9 @@ class Legend extends Component {
          */
         iconCls_: 'far fa-check',
         /**
-         * @member {String} text_=''
+         * @member {String} text=''
          */
-        text_: '',
+        text: '',
         /**
          * @member {Boolean} useIcon_=true
          */
@@ -62,7 +62,7 @@ class Legend extends Component {
      * @protected
      */
     afterSetText(value, oldValue) {
-        this.vdom.cn[1].html = value;
+        this.vdom.cn[1].text = value;
         this.update()
     }