x4js 2.2.50 → 2.2.52

package/package.json

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

package/src/components/combobox/combobox.ts

@@ -14,7 +14,7 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-import { Component, ComponentEvents, ComponentProps, EvSelectionChange, makeUniqueComponentId } from '../../core/component';
+import { Component, ComponentEvents, ComponentProps, EvClick, EvSelectionChange, makeUniqueComponentId } from '../../core/component';
 import { class_ns, IComponentInterface, IFormElement, kbNav, safeText, sanitizeHtml, UnsafeHtml } from '../../core/core_tools';
 import { EventCallback } from '../../core/core_events';
 
@@ -31,7 +31,8 @@ import icon from "./updown.svg";
 
 
 interface DropdownEvents extends PopupEvents {
-	selectionChange: EvSelectionChange;
+	//selectionChange: EvSelectionChange;
+	click: EvClick;
 }
 
 
@@ -57,8 +58,9 @@ export class DropdownList extends Popup<DropdownProps,DropdownEvents> {
 			ev.preventDefault( );
 		}, true );
 
-		this._list.on( "selectionChange", ( ev ) => {
-			this.fire( "selectionChange", ev );
+		this._list.on( "click", ( ev ) => {
+			//this.fire( "selectionChange", ev );
+			this.fire( "click", ev );
 		})
 	}
 
@@ -152,11 +154,11 @@ export class Combobox extends Component<ComboboxProps,ComboboxEvents> {
 			}
 		}
 
-		this._popup.on( "selectionChange", ( ev ) => {
-			const [sel] = ev.selection as ListboxID[];
+		this._popup.on( "click", ( ev ) => {
+			const sel = ev.context as ListboxID;
 			if( sel!==undefined ) {	// no empty sel
 				_select( sel );			
-				this.fire( "selectionChange", ev );
+				this.fire( "selectionChange", { selection: [sel], empty: false }  );
 			}
 		});
 
@@ -178,8 +180,11 @@ export class Combobox extends Component<ComboboxProps,ComboboxEvents> {
 		switch( ev.key ) {
 			case "Enter":
 			case "Escape": {
-				this._popup.show( false );
-				break;
+				if( this._popup.isOpen( ) ) {
+					this._popup.show( false );
+					break;
+				}
+				return;
 			}
 
 			case "ArrowUp":

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

@@ -39,6 +39,7 @@
 			color: var(--color-dialog-caption-text);
 			font-weight: bold;
 			font-size: 120%;
+			pointer-events: none;
 
 			#icon {
 				color: var(--color-dialog-caption-text);

package/src/components/dialog/dialog.ts

@@ -72,11 +72,10 @@ export class Dialog<P extends DialogProps = DialogProps, E extends DialogEvents
 
 		this.appendContent([
 			new HBox({
-				cls: "caption",
+				cls: "caption caption-element",
 				content: [
 					this._title = new Label({
 						id: "title",
-						cls: "caption-element",
 						icon: props.icon,
 						text: props.title
 					}),
@@ -89,7 +88,8 @@ export class Dialog<P extends DialogProps = DialogProps, E extends DialogEvents
 								this.fire("btnclick", { button: props.closable } );
 							}
 							else {
-								this.fire("btnclick", { button: props.buttons[0] } );
+								//<no it's ok 99% ! this.fire("btnclick", { button: props.buttons[0] } );
+								this.close( );
 							}
 						}
 					}) : null,
@@ -113,6 +113,14 @@ export class Dialog<P extends DialogProps = DialogProps, E extends DialogEvents
 				// todo cancel
 				ev.preventDefault();
 				ev.stopPropagation();
+
+				if( isString(props.closable) ) {
+					this.fire("btnclick", { button: props.closable } );
+				}
+				else {
+					//<no it's ok 99% ! this.fire("btnclick", { button: props.buttons[0] } );
+					this.close( );
+				}
 			}
 			else if (ev.key == 'Enter') {
 				const def = this.query<Button>('button.default');
@@ -124,6 +132,10 @@ export class Dialog<P extends DialogProps = DialogProps, E extends DialogEvents
 				}
 			}
 		})
+
+		asap( ( ) => {
+			this.focusNext( true );
+		} );
 	}
 
 	private focusNext( next: boolean) : boolean {

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

@@ -126,7 +126,10 @@
 				}
 			}
 
-			.column { background-color: var(--listbox-background); overflow: hidden; }
+			.column {
+				background-color: transparent; 
+				overflow: hidden; 
+			}
 
 			.ref-c1 { width: var( --ref-c1-width); }
 			.ref-c2 { width: var( --ref-c2-width); }

package/src/components/listbox/listbox.ts

@@ -251,14 +251,14 @@ export class Listbox extends Component<ListboxProps,ListboxEvents> {
 		while( target && target!=this.dom ) {
 			const c = componentFromDOM( target );
 
-			// avoid trapping child ckick
-			if( c.dom.tagName==='INPUT' ) {
+			// avoid trapping child click
+			if( c && c.dom.tagName==='INPUT' ) {
 				return;
 			}
 
 			if( c && c.hasClass("x4item") ) {
 				const id = c.getInternalData( "id" );
-				const fev: ComponentEvent = { context:id };
+				const fev: EvClick = { context:id };
 				if (ev.type == 'click') {
 					this.fire('click', fev );
 				}
@@ -276,6 +276,10 @@ export class Listbox extends Component<ListboxProps,ListboxEvents> {
 			target = target.parentElement;
 		}
 
+		if (ev.type == 'click') {
+			this.fire('click', {} );
+		}
+		
 		this.clearSelection( );
 
 		ev.stopImmediatePropagation();
@@ -511,7 +515,7 @@ export class Listbox extends Component<ListboxProps,ListboxEvents> {
 			return new SimpleText( { cls: `column ref-c${index+2}`, text: c } )
 		}
 
-		const content = [
+		const content: Component[] = [
 			new Label( { cls: `column ref-c1`, icon: item.iconId, text: item.text } ),
 		];
 

package/src/components/popup/popup.ts

@@ -432,7 +432,7 @@ class CMover {
 		this.self = ref ? true : false;
 
 		const mouseDown = ( e: PointerEvent ) => {
-			if( this.self && e.target!=x.dom ) {
+			if( this.self && e.target && (e.target as HTMLElement).tagName!=="DIV" ) {
 				return;
 			}
 

package/src/components/propgrid/progrid.module.scss

@@ -8,15 +8,96 @@
 	--propertygrid-background: white;
     --propertygrid-gadget-background: white;
     --propertygrid-gadget-color: black;
+
+	--propertygrid-odd-background: var(--color-primary-a5);
+	--propertygrid-even-background: transparent;
 }
 
 .x4propertygrid {
 	background: var( --propertygrid-background );
 	border: 1px solid var(--border);
-	overflow-y: auto;
     flex-basis: 0;
 	align-self: stretch;
-	
+
+	& > .body {
+		width: 100%;
+		flex-basis: 0;
+		overflow-y: auto;
+		overflow-x: auto;
+		outline: none;
+		position: relative;
+	}
+
+	&> #footer {
+		border-top: 1px solid var(--border);
+		margin: 0;
+
+		&.x4btngroup {
+			gap: 0px;
+
+			.x4button {
+				background-color: var( --ol-button-background );
+				margin: 0;
+				color: var( --ol-button-color );
+
+				&:disabled {
+					color: var( --ol-button-color-disabled );
+				}
+								
+				.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{
+					background-color: var( --ol-button-background-hover );
+					color: var( --ol-button-color-hover );
+				}	
+
+				&:active{
+					background-color: var( --ol-button-background-active );
+					color: var( --ol-button-color-active );
+					#icon {
+						color: var( --button-icon-color );
+					}
+				}	
+
+				&:focus {
+					background-color: var( --ol-button-background-hover );
+				}
+
+				&:disabled {
+					color: var( --disabled-color-dark );
+				}
+			}
+		}
+	}
+
 	.root {
 		display: grid;
 		grid-template-columns: 1fr;
@@ -78,7 +159,10 @@
 		//border-right: 1px solid var(--color-primary-a50);
 
 		&.even {
-			background-color: var(--color-primary-a5);
+			background-color: var(--propertygrid-even-background)
+		}
+		&.odd {
+			background-color: var(--propertygrid-odd-background)
 		}
 
 		&:has(:focus) {

package/src/components/propgrid/propgrid.ts

@@ -22,7 +22,7 @@ import { Input } from "../input/input"
 import { ListboxID, ListItem } from "../listbox/listbox"
 import { Label, SimpleText } from "../label/label"
 import { asap, class_ns, isFunction, isNumber } from '../../core/core_tools';
-import { Icon } from '../components'
+import { Icon, ScrollView } from '../components'
 
 import icons from "../assets/icons"
 
@@ -58,6 +58,7 @@ export interface PropertyGroup {
 
 export interface PropertyProps extends ComponentProps {
 	groups: PropertyGroup[];
+	footer?: Component;
 }
 
 /**
@@ -76,8 +77,18 @@ export class PropertyGrid extends VBox {
 	constructor(props: PropertyProps) {
 		super(props);
 
-		this.root = new Component({ cls: "root" });
-		this.setContent( this.root );
+		if( props.footer ) {
+			props.footer.setAttribute( "id", "footer" );
+		}
+
+		const scroller = new ScrollView( { cls: "body" } );
+		this.root = scroller.getViewport( );
+
+		this.root.addClass( "root" );
+		this.setContent( [
+			scroller,
+			props.footer,
+		] );
 
 		if( props.groups ) {
 			this.setItems( props.groups );
@@ -90,6 +101,11 @@ export class PropertyGrid extends VBox {
 
 	setItems( _grps: PropertyGroup[] ) {
 
+		if( !_grps || _grps.length==0 ) {
+			this.root.clearContent( );
+			return;
+		}
+		
 		this.groups = _grps.filter( x => !!x );
 		//this.groups.sort( (a,b) => {return a.title>b.title ? 1 : 0} );
 
@@ -100,10 +116,8 @@ export class PropertyGrid extends VBox {
 			g.items.forEach( (i,idx) => {
 				if( i ) {
 					const row = this.makePropertyRow(i);
-					if( idx&1 ) {
-						row.addClass( "even" )
-					}
-
+					row.addClass( idx&1 ? "even" : "odd" );
+					
 					items.push( row );
 				}
 			});

package/src/components/tag/tag.module.scss

@@ -1,13 +1,24 @@
-/**
-* @file tag.module.scss
-* @author Etienne Cochard 
-* @copyright (c) 2026 R-libre ingenierie, all rights reserved.
-**/
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|.2
+ * 
+ * @file tag.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.
+ **/
+
 
 :root {
 	--tag-border: var( --border );
 	--tag-border-focus: var( --border-focus );
-	--tag-selection: var( --accent-background );
+	--tag-background: var( --accent-background );
 	--tag-color: black;
 	--tag-icon-color: var( --tag-color );
 }
@@ -15,9 +26,11 @@
 .x4tag {
 	border-radius: 16px;
 	border: 1px solid var( --tag-border );
+	background-color: var( --tag-background );
 	padding: 2px 8px;
 	gap: 4px;
 	font-weight: normal;
+	
 	--label-color: var( --tag-color );
 
 	.x4icon:empty {

package/src/components/tag/tag.ts

@@ -1,8 +1,19 @@
-/**
-* @file tag.ts
-* @author Etienne Cochard 
-* @copyright (c) 2026 R-libre ingenierie, all rights reserved.
-**/
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|.2
+ * 
+ * @file tag.ts
+ * @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.
+ **/
+
 
 import { ComponentProps } from '../../core/component';
 import { class_ns, UnsafeHtml } from '../../core/core_tools';

package/src/components/treeview/treeview.module.scss

@@ -74,10 +74,14 @@
 			
 			// child + subitems
 			.x4ctreeviewitem {
+									
 				&>.label {
+					--label-color: var( --treeitem-color );
+					--label-icon-color: var( --treeitem-color );
+
 					gap: 4px;
 
-					.x4label, .x4icon, .x4label #icon {
+					.x4icon {
 						color: inherit;
 					}
 
@@ -98,11 +102,16 @@
 					&.selected {
 						background-color: var( --treeitem-background-sel );
 						color: var( --treeitem-color-sel );
+
+						--label-color: var( --treeitem-color-sel );
+						--label-icon-color: var( --treeitem-color-sel );
 					}
 
 					&:active{
 						background-color: var( --accent-background-active );
 						color: var( --accent-color-active );
+						--label-color: var( --accent-color-active );
+						--label-icon-color: var( --accent-color-active );
 					}	
 				}
 

package/src/core/core_state.ts

@@ -1,8 +1,19 @@
-/**
-* @file core_state.ts
-* @author Etienne Cochard 
-* @copyright (c) 2025 R-libre ingenierie, all rights reserved.
-**/
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|.2
+ * 
+ * @file core_state.ts
+ * @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.
+ **/
+
 
 import { CoreEvent, EventMap, EventSource } from './core_events.js';
 import { getMemberValue, isPlainObject } from './core_tools.js';

package/src/x4.d.ts

@@ -1,8 +1,18 @@
-/**
-* @file x4.d.ts
-* @author Etienne Cochard 
-* @copyright (c) 2026 R-libre ingenierie, all rights reserved.
-**/
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|.2
+ * 
+ * @file x4.d.ts
+ * @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.
+ **/
 
 declare module "*.svg" {
   	const content: string;

package/src/x4.scss

@@ -15,5 +15,6 @@
  **/
 
 @import "./components/normalize.scss";
+@import "./components/colors.scss";
 @import "./components/themes.scss";
 @import "./components/base.scss";