fix ESM module import (no currly brackets) as suggested by Guy Bedford

api/js/etemplate/et2_extension_nextmatch.ts

@@ -67,6 +67,7 @@ import {et2_template} from "./et2_widget_template";
 import {egw} from "../jsapi/egw_global";
 import {et2_compileLegacyJS} from "./et2_core_legacyJSFunctions";
 import {egwIsMobile} from "../egw_action/egw_action_common.js";
+import Sortable from 'sortablejs/modular/sortable.complete.esm.js';
 
 //import {et2_selectAccount} from "./et2_widget_SelectAccount";
 
@@ -2079,17 +2080,13 @@ export class et2_nextmatch extends et2_DOMWidget implements et2_IResizeable, et2
 			};
 			const $select = jQuery(select.getDOMNode());
 
-			//todo (todo-jquery-ui): fix the sortable import statement
-			import('../../../node_modules/sortablejs/Sortable.min.js').then(function(){
-				let sortablejs = Sortable.create(select.getDOMNode().getElementsByClassName('ui-multiselect-checkboxes')[0], {
-					ghostClass: 'ui-fav-sortable-placeholder',
-					draggable: 'li[class^="selcolumn_sortable_col"]',
-					filter: 'li[class^="selcolumn_sortable_#"]',
-					direction: 'vertical',
-					delay: 25,
-
-				});
-			}.bind(this));
+			let sortablejs = Sortable.create(select.getDOMNode().getElementsByClassName('ui-multiselect-checkboxes')[0], {
+				ghostClass: 'ui-fav-sortable-placeholder',
+				draggable: 'li[class^="selcolumn_sortable_col"]',
+				filter: 'li[class^="selcolumn_sortable_#"]',
+				direction: 'vertical',
+				delay: 25,
+			});
 
 			$select.disableSelection();
 			$select.find('li[class^="selcolumn_sortable_"]').each(function(i,v){

api/js/etemplate/et2_widget_favorites.ts

@@ -19,6 +19,7 @@ import {et2_INextmatchHeader} from "./et2_extension_nextmatch";
 import {et2_dropdown_button} from "./et2_widget_dropdown_button";
 import {ClassWithAttributes} from "./et2_core_inheritance";
 import {egw, egw_getFramework} from "../jsapi/egw_global";
+import Sortable from 'sortablejs/modular/sortable.complete.esm.js';
 
 /**
  * Favorites widget, designed for use with a nextmatch widget
@@ -177,25 +178,22 @@ export class et2_favorites extends et2_dropdown_button implements et2_INextmatch
 			}
 		};
 
-		//todo (@todo-jquery-ui): replace the import statement
 		/**
 		 * todo (@todo-jquery-ui): the sorting does not work at the moment becuase of jquery-ui menu being used in order to create dropdown
 		 * buttons menu. Once we replace the et2_widget_dropdown_button with web component this should be adapted
 		 * and working again.
 		 **/
-		import('../../../node_modules/sortablejs/Sortable.min.js').then(function(){
-			let sortablejs = Sortable.create(this.menu[0], {
-				ghostClass: 'ui-fav-sortable-placeholder',
-				draggable: 'li:not([data-id$="add"])',
-				delay: 25,
-				dataIdAttr:'data-id',
-				onSort: function(event){
-					self.favSortedList  = sortablejs.toArray();
-					self.egw.set_preference(self.options.app,'fav_sort_pref', self.favSortedList );
-					sideBoxDOMNodeSort(self.favSortedList);
-				}
-			});
-		}.bind(this));
+		let sortablejs = Sortable.create(this.menu[0], {
+			ghostClass: 'ui-fav-sortable-placeholder',
+			draggable: 'li:not([data-id$="add"])',
+			delay: 25,
+			dataIdAttr:'data-id',
+			onSort: function(event){
+				self.favSortedList  = sortablejs.toArray();
+				self.egw.set_preference(self.options.app,'fav_sort_pref', self.favSortedList );
+				sideBoxDOMNodeSort(self.favSortedList);
+			}
+		});
 
 		// Add a listener on the delete to remove
 		this.menu.on("click","div.ui-icon-trash", app[self.options.app], function() {

api/js/etemplate/et2_widget_grid.ts

@@ -23,6 +23,7 @@ import {et2_action_object_impl, et2_DOMWidget} from "./et2_core_DOMWidget";
 import {egw_getAppObjectManager, egwActionObject} from '../egw_action/egw_action.js';
 import {et2_directChildrenByTagName, et2_filteredNodeIterator, et2_readAttrWithDefault} from "./et2_core_xml";
 import {egw} from "../jsapi/egw_global";
+import Sortable from 'sortablejs/modular/sortable.complete.esm.js';
 
 
 /**
@@ -961,37 +962,33 @@ export class et2_grid extends et2_DOMWidget implements et2_IDetachedDOM, et2_IAl
 			}
 		}
 
-
-		//todo (todo-jquery-ui): fix the sortable import statement
-		import('../../../node_modules/sortablejs/Sortable.min.js').then(function(){
-			this.sortablejs = new Sortable(tbody,{
-				group: this.options.sortable_connectWith,
-				draggable: "tr:not(.th)",
-				filter: this.options.sortable_cancel,
-				ghostClass: this.options.sortable_placeholder,
-				dataIdAttr: 'id',
-				onAdd:function (event) {
-					if (typeof self.options.sortable_recieveCallback == 'function') {
-						self.options.sortable_recieveCallback.call(self, event, this, self.id);
-					}
-				},
-				onStart: function (event, ui) {
-					if (typeof self.options.sortable_startCallback == 'function') {
-						self.options.sortable_startCallback.call(self, event, this, self.id);
-					}
-				},
-				onSort: function (event) {
-					self.egw().json(sortable,[
-							self.getInstanceManager().etemplate_exec_id,
-							self.sortablejs.toArray(),
-							self.id],
-						null,
-						self,
-						true
-					).sendRequest();
-				},
-			});
-		}.bind(this));
+		this.sortablejs = new Sortable(tbody,{
+			group: this.options.sortable_connectWith,
+			draggable: "tr:not(.th)",
+			filter: this.options.sortable_cancel,
+			ghostClass: this.options.sortable_placeholder,
+			dataIdAttr: 'id',
+			onAdd:function (event) {
+				if (typeof self.options.sortable_recieveCallback == 'function') {
+					self.options.sortable_recieveCallback.call(self, event, this, self.id);
+				}
+			},
+			onStart: function (event, ui) {
+				if (typeof self.options.sortable_startCallback == 'function') {
+					self.options.sortable_startCallback.call(self, event, this, self.id);
+				}
+			},
+			onSort: function (event) {
+				self.egw().json(sortable,[
+						self.getInstanceManager().etemplate_exec_id,
+						self.sortablejs.toArray(),
+						self.id],
+					null,
+					self,
+					true
+				).sendRequest();
+			},
+		});
 	}
 
 	/**

api/js/jsapi/egw_app.ts

@@ -17,6 +17,7 @@ import {et2_dialog} from "../etemplate/et2_widget_dialog";
 import {et2_createWidget} from "../etemplate/et2_core_widget";
 import {et2_favorites} from "../etemplate/et2_widget_favorites";
 import type {IegwAppLocal} from "./egw_global";
+import Sortable from 'sortablejs/modular/sortable.complete.esm.js';
 
 /**
  * Type for push-message
@@ -781,21 +782,18 @@ export abstract class EgwApp
 				})
 				.addClass("ui-helper-clearfix");
 
-			//todo (@todo-jquery-ui): replace the import statement
-			import('../../../node_modules/sortablejs/Sortable.min.js').then(function(){
-				let el = document.getElementById('favorite_sidebox_'+this.appname).getElementsByTagName('ul')[0];
-				let sortablejs = Sortable.create(el, {
-					ghostClass: 'ui-fav-sortable-placeholder',
-					draggable: 'li:not([data-id$="add"])',
-					delay: 25,
-					dataIdAttr:'data-id',
-					onSort: function(event){
-						let favSortedList = sortablejs.toArray();
-						self.egw.set_preference(self.appname,'fav_sort_pref',favSortedList);
-						self._refresh_fav_nm();
-					}
-				});
-			}.bind(this));
+			let el = document.getElementById('favorite_sidebox_'+this.appname).getElementsByTagName('ul')[0];
+			let sortablejs = Sortable.create(el, {
+				ghostClass: 'ui-fav-sortable-placeholder',
+				draggable: 'li:not([data-id$="add"])',
+				delay: 25,
+				dataIdAttr:'data-id',
+				onSort: function(event){
+					let favSortedList = sortablejs.toArray();
+					self.egw.set_preference(self.appname,'fav_sort_pref',favSortedList);
+					self._refresh_fav_nm();
+				}
+			});
 
 			// Bind favorite de-select
 			var egw_fw = egw_getFramework();