x4js 2.0.28 → 2.0.31

package/src/components/input/input.ts

@@ -20,75 +20,156 @@ import { class_ns, formatIntlDate, IComponentInterface, IFormElement, isString }
 
 import "./input.module.scss"
 
+
+function getRadioOwner( el: Element )  {
+
+	while( el!=document.body ) {
+		const comp = componentFromDOM(el);
+		const ifx = comp.queryInterface( "tab-handler");
+		if( ifx ) {
+			return el;
+		}
+
+		el = el.parentElement;
+	}
+
+	return document;
+}
+
+
+/**
+ * Base properties for all input types.
+ */
+
 export interface BaseProps extends ComponentProps {
+	/** 
+	 * Input field name. 
+	 * required if you want to use form getValues/setValues
+	 */
+
 	name?: string;
+	/** Automatically focus the input on page load. */
 	autofocus?: boolean;
+	/** Marks the input as required. */
 	required?: boolean;
+	/** Makes the input read-only. */
 	readonly?: boolean;
-	placeholder?: string;
-	
-	focus?: EventCallback<EvFocus>;
-	change?: EventCallback<EvChange>;
+	/** Placeholder text displayed when empty. */
+    placeholder?: string;
+	/** Fired when the input receives/loses focus. */
+    focus?: EventCallback<EvFocus>;
+	/** Fired when the input value changes. */
+    change?: EventCallback<EvChange>;
 }
 
+/**
+ * Checkbox-specific input properties.
+ */
+
 interface CheckboxProps extends BaseProps {
 	type: "checkbox";
+	/** Checkbox value (submitted when checked). */
 	value?: boolean | number | string;
+	/** Initial checked state. */
 	checked?: boolean;
 }
 
+/**
+ * Radio button-specific input properties.
+ */
+
 interface RadioProps extends BaseProps {
 	type: "radio";
+	/** Radio value (submitted when selected). */
 	value?: boolean | number | string;
+	/** Initial checked state. */
 	checked?: boolean;
 }
 
+/**
+ * Range slider input properties.
+ */
+
 export interface RangeProps extends BaseProps {
 	type: "range";
+	/** Current slider value. */
 	value?: number;
+	/** Minimum allowed value. */
 	min: number;
+	/** Maximum allowed value. */
 	max: number;
+	/** Step increment. */
 	step?: number;
 }
 
+/**
+ * File upload input properties.
+ */
 export interface FileProps extends BaseProps {
 	type: "file";
+	/** Allowed file types (e.g., `"image/*"` or `[".pdf", ".doc"]`). */
 	accept: string | string[];
 	value?: never;
 }
 
-
+/**
+ * Date picker input properties.
+ */
 export interface DateProps extends BaseProps {
 	type: "date";
-	value?: Date | string;
+	/** Current date value (Date object or ISO string). */
+    value?: Date | string;
 }
 
+/**
+ * Time picker input properties.
+ */
+
 export interface TimeProps extends BaseProps {
 	type: "time";
 	readonly?: boolean;
 	required?: boolean;
-	value?: string;
+	/** Current time value (e.g., `"12:30"`). */
+    value?: string;
 }
 
+/**
+ * Numeric input properties.
+ */
+
 export interface NumberProps extends BaseProps {
 	type: "number";
 	readonly?: boolean;
 	required?: boolean;
-	value?: number | string;
-	min?: number;
-	max?: number;
-	step?: number;
+	/** Current numeric value. */
+    value?: number | string;
+	/** Minimum allowed value. */
+    min?: number;
+	/** Maximum allowed value. */
+    max?: number;
+	/** Step increment. */
+    step?: number;
 }
 
+/**
+ * Text/email/password input properties.
+ */
+
 export interface TextInputProps extends BaseProps {
 	type?: "text" | "email" | "password";
 	readonly?: boolean;
 	required?: boolean;
+	/** Regex pattern for validation. */
 	pattern?: string;
+	/** Input value. */
 	value?: string | number;
+	/** Enables/disables spellcheck. */
 	spellcheck?: boolean;
+	/** Minimum input length. */
 	minlength?: number;
+	/** Maximum input length. */
 	maxlength?: number;
+	trim?: boolean;
 }
 
 
@@ -102,7 +183,21 @@ interface InputEvents extends ComponentEvent {
 
 
 /**
- * 
+ * Customizable input component supporting multiple types (text, number, date, etc.).
+ * Auto-generates CSS class: `x4input`.
+ *
+ * @example
+ * ```ts
+ * // Text input
+ * const nameInput = new Input({ type: "text", placeholder: "Enter name" });
+ *
+ * // Checkbox
+ * const agreeCheckbox = new Input({
+ *   type: "checkbox",
+ *   checked: true,
+ *   change: (e) => console.log("Checked:", e.value)
+ * });
+ * ```
  */
 
 @class_ns( "x4" )
@@ -262,27 +357,31 @@ export class Input extends Component<InputProps,InputEvents> {
 		}
 	}
 
-	/**
-	 * @returns 
-	 */
-
+	/** Gets the current input value as a string. */
+    
 	public getValue( ) {
-		return (this.dom as HTMLInputElement).value;
+		let v = (this.dom as HTMLInputElement).value;
+		if( (this.props as any).trim!==false ) {
+			v = v.trim( );	
+		}
+
+		return v;
 	}
 	
 	/**
-	 * 
-	 * @param value 
-	 */
+     * Sets the input value.
+     * @param value - New value (converted to string).
+     */
 	
 	public setValue( value: string ) {
 		(this.dom as HTMLInputElement).value = value+"";
 	}
 
 	/**
-	 * 
-	 * @returns 
-	 */
+     * Gets the numeric value (for `type="number"` or `type="range"`).
+     * @param defNan - Default value if parsing fails (default: `NaN`).
+     * @returns Parsed number or `defNan`.
+     */
 	
 	public getNumValue( defNan?: number ) {
 		const v = parseFloat( this.getValue() );
@@ -293,11 +392,13 @@ export class Input extends Component<InputProps,InputEvents> {
 	}
 
 	/**
-	 * 
-	 * @param value 
-	 * @param ndec number of decimals or -1 for auto, -2 as prop.step
-	 * 
-	 */
+     * Sets a numeric value with optional decimal precision.
+     * @param value - Numeric value to set.
+     * @param ndec - Decimal places:
+     *               `-1` = auto,
+     *               `-2` = use `step` prop,
+     *               `≥0` = fixed decimals.
+     */
 
 	public setNumValue( value: number, ndec = -1 ) {
 		
@@ -319,48 +420,38 @@ export class Input extends Component<InputProps,InputEvents> {
 		this.setValue( value+"" );
 	}
 
-	/**
-	 * @return the checked value
-	 */
-
-	public getCheck() {
+	/** Gets the checked state (for checkboxes/radio buttons). */
+    public getCheck() {
 		const d = this.dom as HTMLInputElement;
 		return d.checked;
 	}
 
-	/**
-	 * change the checked value
-	 * @param {boolean} ck new checked value	
-	 */
-
+	/** Sets the checked state (for checkboxes/radio buttons). */
+    
 	public setCheck(ck: boolean) {
 		const d = this.dom as HTMLInputElement;
 		d.checked = ck;
 	}
 
-	/**
-	 * 
-	 */
-
+	/** Toggles read-only mode. */
+    
 	public setReadOnly( ro: boolean ) {
 		const d = this.dom as HTMLInputElement;
 		d.readOnly = ro;
 	}
 
-	/**
-	 * select all the text
-	 */
-
+	/** Selects all text in the input. */
+    
 	public selectAll( ) {
 		const d = this.dom as HTMLInputElement;
         d.select(); 
 	}
 
 	/**
-	 * select a part of the text
-	 * @param start 
-	 * @param length 
-	 */
+     * Selects a text range.
+     * @param start - Start position 
+     * @param length - Length of selection
+     */
 
 	public select( start: number, length: number = 9999 ) : void {
 		const d = this.dom as HTMLInputElement;
@@ -368,9 +459,9 @@ export class Input extends Component<InputProps,InputEvents> {
 	}
 
 	/**
-	 * get the selection as { start, length }
-	 */
-
+     * Gets the current text selection.
+     * @returns Object with `start` and `length` properties.
+     */
 	public getSelection( ) {
 		const d = this.dom as HTMLInputElement;
 
@@ -380,10 +471,8 @@ export class Input extends Component<InputProps,InputEvents> {
 		};
 	}
 
-	/**
-	 * 
-	 */
-
+	/** Validates the input (checks `required` constraint). */
+    
 	public isValid( ) {
 
 		if( (this.props as any).required ) {
@@ -446,20 +535,3 @@ export class Input extends Component<InputProps,InputEvents> {
 	}
 }
 
-
-function getRadioOwner( el: Element )  {
-
-	while( el!=document.body ) {
-		const comp = componentFromDOM(el);
-		const ifx = comp.queryInterface( "tab-handler");
-		if( ifx ) {
-			return el;
-		}
-
-		el = el.parentElement;
-	}
-
-	return document;
-}
-
-

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

@@ -23,7 +23,7 @@
 .x4keyboard {
 	z-index: 2000;
     position: absolute !important;
-    width: 100vw;
+    width: 100%;
 	bottom: 0;
 	justify-content: center;
 

package/src/components/keyboard/keyboard.ts

@@ -121,14 +121,14 @@ export class Keyboard extends HBox<KeyboardProps>
 		this.hide( );
 
 		this.addDOMEvent( "mousedown", (e) => {
-			this.handleKey( e ); 	
+			this.handleKeyEvent( e ); 	
 			e.preventDefault( );
 			e.stopPropagation( );
 		});
 
 		// for rapid people
 		this.addDOMEvent( "dblclick", (e) => {
-			this.handleKey( e ); 	
+			this.handleKeyEvent( e ); 	
 			e.preventDefault( );
 			e.stopPropagation( );
 		});
@@ -148,7 +148,7 @@ export class Keyboard extends HBox<KeyboardProps>
 	 * 
 	 */
 
-    private handleKey( e: UIEvent ) {
+    private handleKeyEvent( e: UIEvent ) {
         let target = e.target as HTMLElement;
         let key;
 
@@ -165,6 +165,10 @@ export class Keyboard extends HBox<KeyboardProps>
 			return;
 		}
 
+		this._handleKey( key );
+	}
+
+	private _handleKey( key: number ) {
         switch( key ) {
             // bk space
             case 2: {
@@ -326,11 +330,16 @@ export class Keyboard extends HBox<KeyboardProps>
     private handleFocus( target: Element, enter: boolean ) {
 		
         if( enter ) {
-            if( target.tagName=='INPUT' && !(target as HTMLInputElement).readOnly ) {
-                this.input = target as HTMLInputElement;
-                this.visible = true;
-				this.setTimeout( "vis", 200, this._updateVis );
-				return;
+            if( target.tagName=='INPUT' ) {
+				const input = target as HTMLInputElement;
+				if( !input.readOnly && 
+					input.type!='checkbox' && input.type!='radio' && 
+					input.type!='range' && input.type!='file' ) {
+					this.input = input;
+					this.visible = true;
+					this.setTimeout( "vis", 200, this._updateVis );
+					return;
+				}
             }
 		}
 		
@@ -430,6 +439,7 @@ export class Keyboard extends HBox<KeyboardProps>
                 let content = line[i];
                 let key;
 				let icon = null;
+				let repeat = false;
 
                 if( content.length>2 && content[0]=='{' && content[content.length-1]=='}') {
                     
@@ -452,6 +462,7 @@ export class Keyboard extends HBox<KeyboardProps>
 
 						case 2:
 						{
+							repeat = true;
 							content = undefined;
 							icon = icon_bksp;
 							cls += ' cdel'; 
@@ -516,7 +527,18 @@ export class Keyboard extends HBox<KeyboardProps>
                     key = line[i].charCodeAt(0);
                 }
 
-                let el = new Button( { cls, label: content, attrs: {'data-key': key}, icon } );
+                let el = new Button( { 
+					cls, 
+					label: content, 
+					attrs: {'data-key': key}, 
+					icon, 
+					autorepeat: repeat, 
+					click: ( e ) => {
+						if( e.repeat ) {
+							this._handleKey( key )
+						}
+					}
+				} );
                 tl.push( el );
             }
 

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

@@ -30,16 +30,25 @@
 	background-color: var( --label-background );
 	gap: 0.2em;
 
+	&.al-right
 	&.right  {
 		text-align: right;
 		justify-content: end;
 	}
 
+	&.al-center,
 	&.center {
 		text-align: center;
 		justify-content: center;
 	}
 
+	&.al-right {
+		padding-left: 8px;
+		#icon {
+			order: 2;
+		}
+	}
+
 	#text {
 		&:empty {
 			display: none;

package/src/components/label/label.ts

@@ -24,6 +24,7 @@ export interface LabelProps extends ComponentProps {
 	text?: string | UnsafeHtml;
 	icon?: string;
 	labelFor?: string;
+	align?: "left" | "center" | "right";
 }
 
 /**
@@ -32,29 +33,32 @@ export interface LabelProps extends ComponentProps {
 
 @class_ns( "x4" )
 export class Label extends Component<LabelProps> {
-	#text: Component;
 	
 	constructor( p: LabelProps ) {
 		super( { ...p, content: null } );
 
 		this.setContent( [
 			new Icon( { id:"icon", iconId: this.props.icon } ),
-			this.#text = new Component( { tag: 'span', id: 'text' } )
+			new Component( { tag: 'span', id: 'text' } )
 		] );
 
 		// small hack for react:
 		//	p.content may be the text
-		const text = this.props.text;
-		this.setText( text );
+		this.setText( this.props.text );
 	
 		if( p.labelFor ) {
 			this.setAttribute( "for", p.labelFor );
 		}
+
+		if( p.align ) {
+			this.addClass( "al-"+p.align );
+		}
 	}
 
 	setText( text: string | UnsafeHtml ) {
-		this.#text.setContent( text );
-		this.#text.setClass( "empty", !text );
+		const lab = this.query<Icon>( "#text" );
+		lab.setContent( text );
+		lab.setClass( "empty", !text );
 	}
 
 	setIcon( icon: string ) {

package/src/components/link/link.module.scss

@@ -0,0 +1,44 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file link.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.
+ **/
+
+.x4link {
+	cursor: pointer;		
+
+	#text {
+		text-decoration: underline;
+	}
+
+	&[disabled] {
+		cursor: not-allowed;
+		border-color: var( --border );
+		color: var( --listbox-item-color-disabled );
+
+		&>.body {
+			.x4viewport {
+				pointer-events: none;
+				.x4item {
+					&.selected {
+						background-color: var( --listbox-item-color-sel-disabled );
+					}
+				}
+			}
+		}
+	}
+
+	&:focus-within {
+		border-color: var( --listbox-border-focus );
+	}
+}

package/src/components/link/link.ts

@@ -19,6 +19,7 @@ import { EventCallback } from '../../core/core_events';
 import { class_ns, UnsafeHtml } from '../../core/core_tools';
 import { Label } from '../label/label';
 
+import "./link.module.scss"
 
 /**
  * Link events
@@ -36,6 +37,7 @@ interface LinkProps extends ComponentProps {
 	href: string;
 	text?: string | UnsafeHtml;	// you can also use content for complexe content
 	icon?: string;
+	align?: "left" | "center" | "right";
 	click?: EventCallback<EvClick>;
 }
 
@@ -44,12 +46,16 @@ export class Link extends Component<LinkProps,LinkEvents> {
 	constructor( props: LinkProps ) {
 		super( { tag: "a", ...props} );
 
-		this.setAttribute( "href", props.href );
+		if( props.href ) {
+			this.setAttribute( "href", props.href );
+		}
+
 		this.mapPropEvents( props, "click" );
 
 		this.setContent( new Label( {
 			text: props.text,
 			icon: props.icon,
+			align: props.align,
 		} ) );
 
 		this.addDOMEvent('click', (e) => this._on_click(e));

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

@@ -39,16 +39,20 @@
 	border: 1px solid var( --listbox-border );
 	background-color: var( --listbox-background );
 
-	&:focus-within {
-		border-color: var( --listbox-border-focus );
-	}
-
 	outline: none;
 
 	&>.x4header {
 		border-bottom: 1px solid var( --border );
 	}
 
+	&>.title {
+	    background: white;
+		padding: 4px;
+		font-weight: bold;
+		color: black;
+		border-bottom: 1px solid var(--border);
+	}
+
 	&>.body {
 		width: 100%;
 		flex-basis: 0;
@@ -94,6 +98,12 @@
 				}
 			}
 
+			.ref-c1 { width: var( --ref-c1-width); }
+			.ref-c2 { width: var( --ref-c2-width); }
+			.ref-c3 { width: var( --ref-c3-width); }
+			.ref-c4 { width: var( --ref-c4-width); }
+			.ref-c5 { width: var( --ref-c5-width); }
+
 			//&:active{
 				//background-color: var( --color-80 );
 				//color: var(--color-0);
@@ -162,4 +172,8 @@
 			}
 		}
 	}
+
+	&:focus-within {
+		border-color: var( --listbox-border-focus );
+	}
 }