x4js 2.2.7 → 2.2.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "x4js",
-  "version": "2.2.7",
+  "version": "2.2.9",
   "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.
@@ -24,6 +24,19 @@
 	@extend %flex;
 }
 
+.x4fit-h {
+	width: stretch;
+}
+
+.x4fit-v {
+	height: stretch;
+}
+
+.x4fit {
+	height: stretch;
+	width: stretch;
+}
+
 .fit {
 	@extend %fit;
 }
@@ -86,4 +99,9 @@
     animation-iteration-count: infinite;
     animation-timing-function: linear;
     animation-direction: reverse;
+}
+
+option:checked {
+ 	background-color: var( --accent-background );
+  	color: var( --accent-color );
 }

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.
@@ -140,6 +140,14 @@ export class BtnGroup extends Box<BtnGroupProps,BtnGroupEvents> {
 
 				b.addClass( def.join(" ") );
 			}
+			else if( b instanceof Button ) {
+				const btn = b as Button;
+				if( !btn.props.click && btn.props.id ) {
+					btn.on( "click", ( ) => {
+						this.fire( "btnclick", { button: btn.props.id} );
+					} );
+				}
+			}
 
 			childs.push( b );
 		});

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.
@@ -20,7 +20,7 @@ import { BtnGroup, BtnGroupItem } from "../btngroup/btngroup"
 import { HBox } from '../boxes/boxes';
 import { Label } from '../label/label';
 import { CoreEvent, EventCallback } from '../../core/core_events';
-import { class_ns, getFocusableElements, IComponentInterface, isString, ITabHandler } from '../../core/core_tools';
+import { asap, class_ns, getFocusableElements, IComponentInterface, isString, ITabHandler } from '../../core/core_tools';
 import { ComponentEvent } from '../../core/component';
 import { Button } from '../button/button';
 
@@ -228,6 +228,26 @@ export class Dialog<P extends DialogProps = DialogProps, E extends DialogEvents
 	getBtnBar( ) {
 		return this.query<BtnGroup>("#btnbar");		
 	}
+
+	/**
+	 * ! cannot stop close action
+	 */
+
+	async showAsync( ) : Promise<string> {
+	
+		return new Promise( (resolve ) => {
+
+			this.on( "btnclick", ( ev ) => {
+				asap( ( ) => {
+					this.close( );
+					resolve( ev.button );
+				});
+			});
+
+			this.show();
+		} );
+	}
+
 }
 
 

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/header/header.ts

@@ -116,7 +116,7 @@ export class Header extends HBox<HeaderProps> {
 
 			const flex = c.getInternalData( "flex" );
 			if( flex ) {
-				width = Math.min( unit*flex, rest );
+				width = Math.floor(Math.min( unit*flex, rest ));
 				rest -= width;
 			}
 			else {

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.
@@ -62,17 +62,25 @@
 		position: relative;
 
 		&> .x4viewport {
+			overflow: hidden;
 			display: table;
 		}
 
 		.x4item {
 			@extend %flex;
 			
+
 			padding: 4px;
 			background-color: transparent;
 			color: var( --text-primary );
 
-			&> .x4label {
+			// multicolumns
+			&:has( >.x4hbox ) {
+				padding: 4px 0;
+			}
+
+			.x4label,
+			.x4simpletext {
 				color: inherit;
 				padding: 2px 6px;
 			
@@ -108,6 +116,7 @@
 				//background-color: var( --color-80 );
 				//color: var(--color-0);
 			//}	
+
 		}
 	}
 
@@ -130,6 +139,31 @@
 				.x4icon {
 					height: 1.5em;
 					width: 1.5em;
+
+					.fa-primary, .fa-secondary {
+						fill:  var( --accent-background );
+					}
+				}
+
+				&.icon-danger {
+					.x4icon {
+						.fa-secondary {
+							fill: var( --disabled-color-dark);
+							opacity: 0.7;
+						}
+
+						.fa-primary {
+							fill: var( --alert-background );
+						}
+					}
+				}
+
+				&.icon-success {
+					.x4icon {
+						.fa-primary {
+							fill: var( --success-background );
+						}
+					}
 				}
 
 				&:hover{

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.