x4js 2.2.7 → 2.2.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "x4js",
-  "version": "2.2.7",
+  "version": "2.2.8",
   "type": "module",
   "main": "src/x4.ts",
   "module": "src/x4.ts",

package/src/components/base.scss

@@ -8,7 +8,7 @@
  * @file base.scss
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 R-libre ingenierie
  *
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.

package/src/components/boxes/boxes.module.scss

@@ -8,7 +8,7 @@
  * @file boxes.module.scss
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 R-libre ingenierie
  *
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.

package/src/components/boxes/boxes.ts

@@ -8,7 +8,7 @@
  * @file boxes.ts
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 R-libre ingenierie
  *
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.

package/src/components/breadcrumb/breadcrumb.ts

@@ -8,7 +8,7 @@
  * @file breadcrumb.ts
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 R-libre ingenierie
  *
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.

package/src/components/btngroup/btngroup.module.scss

@@ -8,7 +8,7 @@
  * @file btngroup.model.scss
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 R-libre ingenierie
  *
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.

package/src/components/btngroup/btngroup.ts

@@ -8,7 +8,7 @@
  * @file btngroup.ts
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 R-libre ingenierie
  *
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.

package/src/components/button/button.module.scss

@@ -8,7 +8,7 @@
  * @file button.module.scss
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 R-libre ingenierie
  *
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.

package/src/components/button/button.ts

@@ -8,7 +8,7 @@
  * @file button.ts
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 R-libre ingenierie
  *
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.

package/src/components/calendar/calendar.module.scss

@@ -8,7 +8,7 @@
  * @file calendar.module.scss
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 R-libre ingenierie
  *
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.

package/src/components/calendar/calendar.ts

@@ -8,7 +8,7 @@
  * @file calendar.ts
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 R-libre ingenierie
  *
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.

package/src/components/checkbox/checkbox.module.scss

@@ -8,7 +8,7 @@
  * @file checkbox.module.scss
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 R-libre ingenierie
  *
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.

package/src/components/colorinput/colorinput.module.scss

@@ -8,7 +8,7 @@
  * @file colorinput.module.scss
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 R-libre ingenierie
  *
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.

package/src/components/colorinput/colorinput.ts

@@ -8,7 +8,7 @@
  * @file colorinput.ts
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 R-libre ingenierie
  *
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.

package/src/components/colorpicker/colorpicker.module.scss

@@ -8,7 +8,7 @@
  * @file colorpicker.module.scss
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 R-libre ingenierie
  *
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.

package/src/components/colorpicker/colorpicker.ts

@@ -8,7 +8,7 @@
  * @file colorpicker.ts
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 R-libre ingenierie
  *
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.

package/src/components/combobox/combobox.module.scss

@@ -8,7 +8,7 @@
  * @file combobox.module.scss
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 R-libre ingenierie
  *
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.

package/src/components/combobox/combobox.ts

@@ -8,7 +8,7 @@
  * @file combobox.ts
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 R-libre ingenierie
  *
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.

package/src/components/dialog/dialog.module.scss

@@ -8,7 +8,7 @@
  * @file dialog.scss
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 R-libre ingenierie
  *
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.

package/src/components/dialog/dialog.ts

@@ -8,7 +8,7 @@
  * @file dialog.ts
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 R-libre ingenierie
  *
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.

package/src/components/filedrop/filedrop.module.scss

@@ -8,7 +8,7 @@
  * @file filedrop.module.scss
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 R-libre ingenierie
  *
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.

package/src/components/filedrop/filedrop.ts

@@ -8,7 +8,7 @@
  * @file filedrop.ts
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 R-libre ingenierie
  *
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.

package/src/components/form/form.module.scss

@@ -8,7 +8,7 @@
  * @file form.module.scss
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 R-libre ingenierie
  *
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.

package/src/components/form/form.ts

@@ -8,7 +8,7 @@
  * @file form.ts
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 R-libre ingenierie
  *
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.

package/src/components/gridview/gridview.module.scss

@@ -8,7 +8,7 @@
  * @file gridview.module.scss
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 R-libre ingenierie
  *
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.

package/src/components/gridview/gridview.ts

@@ -8,7 +8,7 @@
  * @file gridview.ts
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 R-libre ingenierie
  *
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.

package/src/components/icon/icon.module.scss

@@ -8,7 +8,7 @@
  * @file icon.module.scss
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 R-libre ingenierie
  *
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.

package/src/components/icon/icon.ts

@@ -8,7 +8,7 @@
  * @file icon.ts
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 R-libre ingenierie
  *
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
@@ -142,6 +142,9 @@ export class Icon extends Component<IconProps> {
 			if( iconId.startsWith("data:image/svg+xml,<svg") ) {
 				this.dom.insertAdjacentHTML('beforeend', iconId.substring(19) );
 			}
+			else if( iconId.startsWith("<svg") ) {	// raw
+				this.dom.insertAdjacentHTML('beforeend', iconId );
+			}
 			else if( iconId.endsWith(".svg") ) {
 				svgLoader.load( iconId ).then( svg => {
 					this.clearContent( );

package/src/components/image/image.module.scss

@@ -8,7 +8,7 @@
  * @file image.module.scss
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 R-libre ingenierie
  *
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.

package/src/components/image/image.ts

@@ -8,7 +8,7 @@
  * @file image.ts
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 R-libre ingenierie
  *
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.

package/src/components/input/input.module.scss

@@ -8,7 +8,7 @@
  * @file input.module.scss
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 R-libre ingenierie
  *
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.

package/src/components/input/input.ts

@@ -8,7 +8,7 @@
  * @file input.ts
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 R-libre ingenierie
  *
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.

package/src/components/keyboard/keyboard.module.scss

@@ -8,7 +8,7 @@
  * @file keyboard.module.scss
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 R-libre ingenierie
  *
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.

package/src/components/keyboard/keyboard.ts

@@ -8,7 +8,7 @@
  * @file keyboard.ts
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 R-libre ingenierie
  *
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.

package/src/components/label/label.module.scss

@@ -8,7 +8,7 @@
  * @file label.module.scss
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 R-libre ingenierie
  *
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.

package/src/components/label/label.ts

@@ -8,7 +8,7 @@
  * @file label.ts
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 R-libre ingenierie
  *
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.

package/src/components/link/link.ts

@@ -8,7 +8,7 @@
  * @file link.ts
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 R-libre ingenierie
  *
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.

package/src/components/listbox/listbox.module.scss

@@ -8,7 +8,7 @@
  * @file listbox.module.scss
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 R-libre ingenierie
  *
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.

package/src/components/listbox/listbox.ts

@@ -8,7 +8,7 @@
  * @file listbox.ts
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 R-libre ingenierie
  *
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.

package/src/components/menu/menu.module.scss

@@ -8,7 +8,7 @@
  * @file menu.module.scss
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 R-libre ingenierie
  *
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.

package/src/components/menu/menu.ts

@@ -8,7 +8,7 @@
  * @file menu.ts
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 R-libre ingenierie
  *
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.

package/src/components/messages/messages.module.scss

@@ -8,7 +8,7 @@
  * @file messages.module.scss
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 R-libre ingenierie
  *
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.

package/src/components/monaco/monaco.module.scss

@@ -0,0 +1,22 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file monacoeditor.module.scss
+ * @author Etienne Cochard 
+ * 
+ * @copyright (c) 2026 R-libre ingenierie
+ *
+ * Use of this source code is governed by an MIT-style license 
+ * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
+ **/
+ 
+.x4monacoeditor {
+	display: grid;
+	grid-template-rows: 1fr;
+	grid-template-columns: 1fr;
+	overflow: hidden;
+}

package/src/components/monaco/monaco.ts

@@ -1,25 +1,111 @@
-import { Component, ComponentProps } from '../../x4.js';
+import { class_ns, Component, ComponentProps } from '../../x4.js';
 
-import * as monaco from './bin/monaco.js';
-import "./bin/monaco.css"
+import Monaco from './bin/monaco'; 
+import "./monaco.module.scss"
 
 
 interface MonacoEditorProps extends ComponentProps {
 	language: "typescript" | "javascript" | "json" | "css" | "html";
 	theme?: string;
 	content?: string;
+	options?: Monaco.editor.IEditorOptions & Monaco.editor.IGlobalEditorOptions;
 }
 
+@class_ns( "x4" )
 export class MonacoEditor extends Component<MonacoEditorProps> {
 
+	static initCount = 0;
+	static basePath: string = "./bin";
+	static monaco: typeof Monaco;
+	static initCbs: Function[] = [];
+
+	private _editor: Monaco.editor.IStandaloneCodeEditor;
+
+	static async start( ) { 
+		if( this.initCount ) {
+			return;
+		}
+
+		this.monaco = (await import( "./bin/monaco.js" )).default;
+		this.initCount++;
+
+		globalThis.MonacoEnvironment = {
+			getWorkerUrl: function (_moduleId, label) {
+				let workerPath: string;
+
+				if (label == 'json') {
+					workerPath = 'json.worker.js';
+				}
+				else if (label == 'css' || label == 'scss' || label == 'less') {
+					workerPath = 'css.worker.js';
+				}
+				else if (label == 'html' ) {
+					workerPath = 'html.worker.js';
+				}
+				else if (label === 'typescript' || label === 'javascript') {
+					workerPath = 'ts.worker.js';
+				}
+				else {
+					workerPath = "editor.worker.js";
+				}
+
+				const fullpath = MonacoEditor.basePath+'/workers/'+workerPath;
+				console.log( `getting "${label} path: ${fullpath}` );
+				return fullpath;
+			}
+		};
+
+		const link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.href = MonacoEditor.basePath+'/monaco.css';
+        link.type = 'text/css';
+        document.head.appendChild(link);
+	}
+
+	static addTypelib( name: string, code: string ) {
+		const register = ( ) => {
+			///@ts-ignore
+			const ts = MonacoEditor.monaco.languages.typescript;
+			///@ts-ignore
+			ts.typescriptDefaults.addExtraLib( code, `ts:filename/${name}`);
+		}
+
+		if( MonacoEditor.monaco ) {
+			register( );
+		}
+		else {
+			this.initCbs.push( register );
+		}
+	}
+
 	constructor( props: MonacoEditorProps ) {
+		const content = props.content;
+		delete props.content;
+
 		super( props );
-		
-		monaco.editor.create( this.dom as HTMLElement, {
-			value: props.content,
-			language: props.language,
-			theme: props.theme,
-		});
+
+		MonacoEditor.start( )
+			.then( ( ) => {
+				MonacoEditor.initCbs.forEach( x => x() );
+
+				this._editor = MonacoEditor.monaco.editor.create( this.dom as HTMLElement, {
+					value: content,
+					language: props.language,
+					theme: props.theme,
+					//automaticLayout: true,
+				});
+
+				if( props.options ) {
+					this._editor.updateOptions( props.options );
+				}
+			} );
+
+		this.addDOMEvent( "resized", ( ) => {
+			//const rc = this.getBoundingRect( );
+			if( this._editor ) {
+				this._editor.layout();
+			}
+		})
 	}
 }
 

package/src/components/normalize.scss

@@ -8,7 +8,7 @@
  * @file normalize.scss
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 R-libre ingenierie
  *
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.

package/src/components/notification/notification.module.scss

@@ -8,7 +8,7 @@
  * @file notification.module.scss
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 R-libre ingenierie
  *
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.

package/src/components/notification/notification.ts

@@ -8,7 +8,7 @@
  * @file notification.ts
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 R-libre ingenierie
  *
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.

package/src/components/panel/panel.module.scss

@@ -8,7 +8,7 @@
  * @file panel.module.scss
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 R-libre ingenierie
  *
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.

package/src/components/panel/panel.ts

@@ -8,7 +8,7 @@
  * @file panel.ts
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 R-libre ingenierie
  *
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.

package/src/components/popup/popup.module.scss

@@ -8,7 +8,7 @@
  * @file popup.module.scss
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 R-libre ingenierie
  *
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.