x4js 2.3.18 → 2.3.20

package/src/components/listbox/listbox.ts

@@ -181,7 +181,8 @@ private _view: Viewport;
 
 	navigate( sens: kbNav ) {
 		
-		if( !this._lastsel ) {
+		// an item of id 0 is one
+		if( this._lastsel===undefined ) {
 			if( sens==kbNav.next )  sens = kbNav.first;
 			else sens = kbNav.last;
 		}
@@ -395,6 +396,7 @@ private _view: Viewport;
 				if( itm ) {
 					this._multisel.add( id );
 					itm.addClass( "selected" );
+					this._lastsel = id;		// the arrows go on from it
 				}
 			});
 
@@ -434,6 +436,9 @@ private _view: Viewport;
 	}
 
 	clearSelection( fireEvent = true ) {
+		// nothing selected: the arrows start from the first item
+		this._lastsel = undefined;
+
 		if( this._multisel.size ) {
 			this._clearSelection( );
 			if( fireEvent ) {

package/src/components/messages/messages.ts

@@ -106,10 +106,13 @@ export class MessageBox extends Dialog<DialogProps>
 			box.on( "btnclick", ( ev ) => {
 				asap( ( ) => {
 					resolve( ev.button );
-					box.close() 
+					box.close()
 				});
 			});
 
+			// closed without a button (Escape, the close box): nothing was chosen
+			box.on( "closed", ( ) => resolve( null ) );
+
 			box.show();
 		} );
 
@@ -175,10 +178,13 @@ export class InputBox extends Dialog<DialogProps>
 			box.on( "btnclick", ( ev ) => {
 				asap( ( ) => {
 					resolve( ev.button=="ok" ? box.getValue( ) : null );
-					box.close() 
+					box.close()
 				});
 			});
 
+			// closed without a button (Escape, the close box): nothing was chosen
+			box.on( "closed", ( ) => resolve( null ) );
+
 			box.show();
 		} );
 
@@ -233,10 +239,13 @@ export class PromptBox extends Dialog<DialogProps>
 			box.on( "btnclick", ( ev ) => {
 				asap( ( ) => {
 					resolve( ev.button );
-					box.close() 
+					box.close()
 				});
 			});
 
+			// closed without a button (Escape, the close box): nothing was chosen
+			box.on( "closed", ( ) => resolve( null ) );
+
 			box.show();
 		} );
 	}

package/src/components/popup/popup.ts

@@ -46,6 +46,22 @@ function getRoot( ) {
 	return document.body;
 }
 
+/**
+ * on the document while the event goes down (capture): a press outside
+ * every popup closes the group opened last, the others at the next presses.
+ * The event is left as it is, what is pressed handles it as usual.
+ * One function for all the popups: it is removed by the one that empties the list.
+ */
+
+function dismissLast( e: UIEvent ) {
+	if( autoclose_list.some( x => x.dom.contains( e.target as Node ) ) ) {
+		return;
+	}
+
+	// the newest popup: dismiss( ) closes its whole group (a menu and its sub-menus)
+	autoclose_list[autoclose_list.length-1].dismiss( );
+}
+
 /**
  * @cssvar
  * ```
@@ -233,7 +249,7 @@ export class Popup<P extends PopupProps = PopupProps, E extends PopupEvents = Po
 			if( idx>=0 ) {
 				autoclose_list.splice( idx, 1 );
 				if( autoclose_list.length==0 ) {
-					document.removeEventListener( "pointerdown", this._dismiss, true );
+					document.removeEventListener( "pointerdown", dismissLast, true );
 				}
 			}
 		}
@@ -263,7 +279,7 @@ export class Popup<P extends PopupProps = PopupProps, E extends PopupEvents = Po
 				
 		if( this.props.autoClose ) {
 			if( autoclose_list.length==0 ) {
-				document.addEventListener( "pointerdown", this._dismiss, true );
+				document.addEventListener( "pointerdown", dismissLast, true );
 			}
 
 			autoclose_list.push( this );
@@ -320,23 +336,6 @@ export class Popup<P extends PopupProps = PopupProps, E extends PopupEvents = Po
 		this._do_hide( );
 	}
 
-	/**
-	 * binded
-	 *
-	 * listened on the document while the event goes down (capture): a press
-	 * closes the popups even when what is pressed stops its propagation.
-	 * the event is left as it is, what is pressed handles it as usual.
-	 */
-
-	private _dismiss = ( e: UIEvent ) => {
-		const onac = autoclose_list.some( x=> x.dom.contains(e.target as Node) )
-		if( onac ) {
-			return;
-		}
-
-		this.dismiss( );
-	}
-	
 	/**
 	 * dismiss all popup belonging to the same group as 'this'
 	 */
@@ -369,7 +368,7 @@ export class Popup<P extends PopupProps = PopupProps, E extends PopupEvents = Po
 		const list = inc_group.reverse( );
 		autoclose_list = excl_group;
 		if( autoclose_list.length==0 ) {
-			document.removeEventListener( "pointerdown", this._dismiss, true );
+			document.removeEventListener( "pointerdown", dismissLast, true );
 		}
 		
 		list.forEach( x => x.close() );

package/src/components/radio/radio.ts

@@ -19,7 +19,7 @@ import { class_ns } from '../../core/core_tools';
 import { EventCallback } from '../../core/core_events';
 
 import { Label } from '../label/label';
-import { Input } from '../input/input'
+import { Input, getRadioOwner } from '../input/input'
 import { HBox } from '../boxes/boxes';
 
 import icons from "../assets/icons"
@@ -152,10 +152,14 @@ export class Radio extends Component<RadioProps,RadioEvents> {
 	 */
 
 	checkValue( vname: string ) {
-		const grp = this.props.name;
-		const el = this.parentElement().query<Radio>( `input[name="${grp}"][value="${vname}"]` );
+		// the radios of the group: in the form that holds this one, else in
+		// its dialog, else in the document (as a Form reads them)
+		const owner = getRadioOwner( this.dom );
+		const selector = `input[name="${this.props.name}"][value="${vname}"]`;
+
+		const el = owner.querySelector( selector ) as HTMLInputElement;
 		if( el ) {
-			el.setCheck( true );
+			el.checked = true;
 		}
 	}
 }

package/src/components/rating/rating.ts

@@ -14,12 +14,11 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-import { Component, ComponentEvents, componentFromDOM, ComponentProps, EvChange } from '../../core/component';
+import { Component, ComponentEvents, ComponentProps, EvChange } from '../../core/component';
 import { EventCallback } from '../../core/core_events';
 import { HBox } from '../boxes/boxes';
-import { Input } from '../input/input';
 import { Icon } from '../icon/icon';
-import { class_ns } from '../../core/core_tools';
+import { class_ns, IComponentInterface, IFormElement } from '../../core/core_tools';
 
 import icons from "../assets/icons"
 
@@ -54,50 +53,33 @@ export interface RatingProps extends ComponentProps {
 export class Rating extends HBox<RatingProps,RatingEventMap> {
 
 	private m_els: Component[];
-	private m_input: Input;
-	
+
 	constructor( props: RatingProps ) {
 		super( props );
 
-		props.steps = props.steps ?? 5;
+		// this.props: a copy of props (Box adds its tag)
+		this.props.steps = this.props.steps ?? 5;
+
+		// the name is on the rating: a Form finds it, and reads its value as a number (queryInterface)
+		if( props.name ) {
+			this.setAttribute( "name", props.name );
+		}
+
+		this.addDOMEvent( 'click', (e) => this._on_click(e) );
 		this._update( );
 	}
 
+	// value: the count of stars that are lit, 0 for none
 	private _update( ) {
-		
 		const props = this.props;
-
-		let shape = props.icon ?? icons.star.solid;
-		let value = props.value ?? 0;
-
-		this.m_input = new Input( {
-			type: "text",
-			hidden: true,
-			name: props.name,
-			value: ''+value
-		} );
-
-		this.addDOMEvent( 'click', (e) => this._on_click(e) );
+		const shape = props.icon ?? icons.star.solid;
+		const value = props.value ?? 0;
 
 		this.m_els = [];
 		for( let i=0; i<props.steps; i++ ) {
-			
-			let cls = 'item';
-			if( i+1 <= value ) {
-				cls += ' checked';
-			}
-
-			let c = new Icon( { 
-				cls,
-				iconId: shape,
-			} );
-
-			c.setInternalData( "value", i );
-
-			this.m_els.push( c );
+			this.m_els.push( new Icon( { cls: i < value ? 'item checked' : 'item', iconId: shape } ) );
 		}
 
-		this.m_els.push( this.m_input );
 		this.setContent( this.m_els );
 	}
 
@@ -107,12 +89,7 @@ export class Rating extends HBox<RatingProps,RatingEventMap> {
 
 	setValue( v: number ) {
 		this.props.value = v;
-
-		for( let c=0; c<this.props.steps; c++ ) {
-			this.m_els[c].setClass( 'checked', this.m_els[c].getInternalData('value')<=v );
-		}
-
-		this.m_input.setValue( ''+this.props.value );
+		this.m_els.forEach( ( c, i ) => c.setClass( 'checked', i < v ) );
 	}
 
 	setSteps( n: number ) {
@@ -121,18 +98,31 @@ export class Rating extends HBox<RatingProps,RatingEventMap> {
 	}
 
 	setShape( icon: string ) {
-		this.removeClass( this.props.icon );
 		this.props.icon = icon;
+		this._update( );
 	}
 
+	// the star clicked: its svg, or the Icon itself
 	private _on_click( ev: MouseEvent ) {
-		let item = componentFromDOM( ev.target as HTMLElement );
-		item = item.parentElement( Icon );
-		
-		if( item ) {
-			this.setValue( item.getInternalData("value") );
+		const n = this.m_els.findIndex( c => c.dom.contains( ev.target as Node ) );
+		if( n>=0 ) {
+			// the star of the value, clicked again: none is lit
+			this.setValue( n+1===this.props.value ? 0 : n+1 );
+			this.fire( 'change', { value: this.props.value } );
 		}
+	}
+
+	override queryInterface<T extends IComponentInterface>( name: string ): T {
+		if( name=="form-element" ) {
+			const i: IFormElement = {
+				getRawValue: ( ) => this.getValue( ),
+				setRawValue: ( v: any ) => { this.setValue( +v ); },
+				isValid: ( ) => true,
+			};
 
-		this.fire( 'change', {value:this.props.value} );
-	} 
+			return i as unknown as T;
+		}
+
+		return super.queryInterface( name );
+	}
 }

package/src/components/slider/slider.ts

@@ -16,7 +16,7 @@
 
 import { EventCallback } from '../../core/core_events';
 import { Component, ComponentEvents, ComponentProps, EvChange } from '../../core/component';
-import { class_ns, Rect } from '../../core/core_tools';
+import { class_ns, IComponentInterface, IFormElement, Rect } from '../../core/core_tools';
 
 import { HBox } from '../boxes/boxes';
 import { Input } from '../input/input';
@@ -33,6 +33,8 @@ interface SliderProps extends ComponentProps {
 	max: number;
 	step?: number;
 	vertical?: boolean;
+	/** for a Form: it reads the value as a number */
+	name?: string;
 	change?: EventCallback<EvChange>;
 }
 
@@ -83,6 +85,12 @@ export class Slider extends Component<SliderProps,SliderEvents> {
 
 		this.setAttribute( "tabindex", 0 );
 
+		// the name is on the slider: a Form finds it (queryInterface). The hidden range keeps
+		// the value: the browser brings it between min and max, on the step
+		if( props.name ) {
+			this.setAttribute( "name", props.name );
+		}
+
 		this.setDOMEvents( {
 			pointerdown: ( ev ) => this._on_mousedown( ev ),
 			pointermove: ( ev ) => this._on_mousemove( ev ),
@@ -106,8 +114,8 @@ export class Slider extends Component<SliderProps,SliderEvents> {
 	}
 
 	private _getMinMax( ) {
-		const min = parseInt( this._range.getAttribute( 'min' ) );
-		const max = parseInt( this._range.getAttribute( 'max' ) );
+		const min = parseFloat( this._range.getAttribute( 'min' ) );
+		const max = parseFloat( this._range.getAttribute( 'max' ) );
 		return [min,max];
 	}
 
@@ -134,15 +142,17 @@ export class Slider extends Component<SliderProps,SliderEvents> {
 			const [min,max] = this._getMinMax( );
 
 			this._range.setNumValue( min + (perc * (max-min) ) );
-			this._update( );
+			this._update( true );
 		}
 	}
 
-	private _update( ) {
+	// notify: a change made by the user (drag, arrows); not by the code, nor at the construction
+	private _update( notify = false ) {
 		const value = this._range.getNumValue( );
 		const [min,max] = this._getMinMax( );
 
-		let perc = max>min ? value / Math.abs(max-min) * 100 : 0;
+		// from min: min is at 0%, max at 100%
+		let perc = max>min ? (value-min) / (max-min) * 100 : 0;
 
 		if( !this.props.vertical ) {
 			this._thumb.setStyleValue( "left", perc+"%" );
@@ -155,7 +165,9 @@ export class Slider extends Component<SliderProps,SliderEvents> {
 			this._bar.setStyleValue( "height", perc+"%" );
 		}
 
-		this.fire( "change", { value } );
+		if( notify ) {
+			this.fire( "change", { value } );
+		}
 	}
 
 	private _on_mouseup( ev: PointerEvent ) {
@@ -184,7 +196,7 @@ export class Slider extends Component<SliderProps,SliderEvents> {
 			}
 
 			this._range.setNumValue( this._range.getNumValue()+inc );
-			this._update( );
+			this._update( true );
 		}
 	}
 
@@ -202,4 +214,22 @@ export class Slider extends Component<SliderProps,SliderEvents> {
 		this._range.setNumValue( v );
 		this._update( );
 	}
+
+	getValue( ) {
+		return this._range.getNumValue( );
+	}
+
+	override queryInterface<T extends IComponentInterface>( name: string ): T {
+		if( name=="form-element" ) {
+			const i: IFormElement = {
+				getRawValue: ( ) => this.getValue( ),
+				setRawValue: ( v: any ) => { this.setValue( +v ); },
+				isValid: ( ) => true,
+			};
+
+			return i as unknown as T;
+		}
+
+		return super.queryInterface( name );
+	}
 }