x4js 2.3.26 → 2.3.28

package/src/components/monaco/monaco.ts

@@ -1,4 +1,3 @@
-import { class_ns } from '../../core/core_tools';
 import { Component, ComponentProps } from '../../core/component';
 
 import Monaco from './bin/monaco'; 
@@ -17,8 +16,8 @@ interface MonacoEditorProps extends ComponentProps {
 	options?: Monaco.editor.IEditorOptions & Monaco.editor.IGlobalEditorOptions;
 }
 
-@class_ns( "x4" )
 export class MonacoEditor extends Component<MonacoEditorProps> {
+	static classPrefix = "x4";
 
 	private static _initCount = 0;
 	private static _basePath: string = "monaco/";

package/src/components/popup/popup.ts

@@ -54,7 +54,7 @@ function getRoot( ) {
  */
 
 function dismissLast( e: UIEvent ) {
-	if( autoclose_list.some( x => x.dom.contains( e.target as Node ) ) ) {
+	if( autoclose_list.some( x => x.contains( e.target as Node ) ) ) {
 		return;
 	}
 
@@ -224,7 +224,7 @@ export class Popup<P extends PopupProps = PopupProps, E extends PopupEvents = Po
 		// modal: the focus goes back to the element that had it when it opened, unless the
 		// user put it elsewhere (read before the popup leaves the page and its focus with it)
 		const active = document.activeElement;
-		const giveBack = this._ismodal && this._prevFocus && ( !active || active===document.body || this.dom.contains( active ) );
+		const giveBack = this._ismodal && this._prevFocus && ( !active || active===document.body || this.contains( active ) );
 
 		this.__hide( );
 		this.__remove( );

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

@@ -9,7 +9,7 @@
     --propertygrid-gadget-background: var( --background-primary );
     --propertygrid-gadget-color: var( --text-primary );
 
-	--propertygrid-odd-background: var(--color-primary-a5);
+	--propertygrid-odd-background: var( --background-odd );
 	--propertygrid-even-background: transparent;
 	--propertygrid-disabled-background: rgb(170 170 170 / 14%);
 	--propertygrid-hover-background: var(--color-primary-a10);
@@ -54,8 +54,6 @@
 		padding: 6px 4px 4px 4px;
 		min-height: 2em;
 		background-color: var( --propertygrid-group-background );
-		margin-bottom: 8px;
-        box-shadow: 4px 3px 8px rgba(0, 0, 0, 0.4);
         color: var( --propertygrid-group-color );
         display: flex;
 		align-items: center;
@@ -81,9 +79,14 @@
                 font-weight: bold;
             }
             
+            // the button that folds the group: as high as the title, its icon in the colour
+            // of the group when it has the focus (its background stays transparent)
             &>.x4button {
+                --button-color-focus: var( --propertygrid-group-color );
                 background-color: transparent;
                 color: var( --propertygrid-group-color );
+                margin: 0;
+                padding: 0;
             }
 
             &>.x4label {
@@ -99,14 +102,19 @@
             }
         }
 
-        &>.desc {
+        // under the title, in the box of the header
+        .desc {
             font-style: italic;
             font-weight: normal;
-            font-size: 90%;
+            font-size: 80%;
+            padding-top: 4px;
+            padding-left: 1em;
             color: var( --text-ternary );
         }
 
+		// the space is between the last row of a group and the next group, none under the title
 		&:not(:first-child ) {
+			margin-top: 8px;
 			//border-top: 1px solid var(--color-primary-a50);
 		}
 

package/src/components/radio/radio.module.scss

@@ -16,8 +16,36 @@
 
 :root {
 	--radio-background: var( --background-primary );
+	--radio-check-background: var( --accent-background );
 	--radio-check-color: var( --accent-color );
-	--radio-square-border-checked: var( --accent-color );
+	--radio-focus: var( --accent-background );
+
+	--radio-button-border: var( --border );
+	--radio-button-color: var( --text-ternary );
+	--radio-button-color-checked: var( --accent-background-active );
+	--radio-button-background-checked: var( --background-secondary );
+	--radio-button-border-checked: var( --accent-background );
+
+	--radio-danger-color: var( --alert-background );
+	--radio-danger-background: var( --alert-background-light );
+}
+
+// button: the round hidden, its input still in the page (not display: none),
+// so that Tab and the arrows reach it; the focus of the keyboard shown around the radio
+%radio-no-round {
+	gap: 0;		// no space kept for the round
+
+	.inner {
+		width: 0;
+		height: 0;
+		overflow: hidden;
+		opacity: 0;
+	}
+
+	&:has(input:focus-visible) {
+		outline: 1px dotted var( --radio-focus );
+		outline-offset: 2px;
+	}
 }
 
 .x4radio {
@@ -69,7 +97,7 @@
 			height: 100%;
 
 			.fa-primary {
-				fill: var( --accent-background)
+				fill: var( --radio-check-background );
 			}
 
 			.fa-secondary {
@@ -98,20 +126,20 @@
 	}	
 }
 
-.x4radio.button {
+// square: its former name, kept for the code that has it (not documented)
+.x4radio.button,
+.x4radio.square {
 	--size: 24px;
 
 	&.outline {
 		border-radius: 22px;;
 	}
 
-	border: 1px solid transparent;
+	border: 1px solid var( --radio-button-border );
 	padding: 8px;
 	margin: 0;
-	
-	.inner {
-		display: none;
-	}
+
+	@extend %radio-no-round;
 
 	label {
 		display: flex;
@@ -121,49 +149,44 @@
 		#text {
 			flex-grow: 1;
 			text-align: center;
-			color: var( --text-ternary );
+			color: var( --radio-button-color );
 		}
-	
+
+		// fill and color: an icon is drawn in its fill, or in currentColor
 		#icon {
-			fill: var( --text-ternary );
+			fill: var( --radio-button-color );
+			color: var( --radio-button-color );
 			width: var( --size );
 			height: var( --size );
 		}
 	}
 
 	&:has(input:checked) {
-		background-color: var( --background-secondary );
-		border-color:  var( --accent-background );
+		background-color: var( --radio-button-background-checked );
+		border-color: var( --radio-button-border-checked );
 
 		.x4label {
+			// no bold: the width of the button would change with its state
 			#text {
-				color: var( --accent-background-active );
-				font-weight: bold;
+				color: var( --radio-button-color-checked );
 			}
 
 			#icon {
-				fill: var( --accent-background-active );
+				fill: var( --radio-button-color-checked );
+				color: var( --radio-button-color-checked );
 			}
 
 			.fa-primary {
-				fill: var( --accent-background-active );
+				fill: var( --radio-button-color-checked );
 			}
 		}
 	}
 }
 
-.x4radio.square {
-	padding: 5px;
-	border: 1px solid rgba(255,255,255,0.3);
-	margin: 0;
-		
-	.inner {
-		display: none;
-	}
-
-	&:has(input:checked) {
-		background-color: var( --accent-background-active );
-		border-color: var( --radio-square-border-checked );
-		font-weight: 700;
-	}
+// danger: checked in the red of the alerts, its round or its button
+.x4radio.danger {
+	--radio-check-background: var( --radio-danger-color );
+	--radio-button-color-checked: var( --radio-danger-color );
+	--radio-button-background-checked: var( --radio-danger-background );
+	--radio-button-border-checked: var( --radio-danger-color );
 }

package/src/components/radio/radio.ts

@@ -47,12 +47,23 @@ interface RadioProps extends ComponentProps {
 }
 
 /**
+ * A radio: the ones with the same name are a group. Its look, by its class (cls): "button"
+ * (a button, "button outline" rounded), "danger" (checked in red, its round or its button).
+ * Without the round, its input is still reached by Tab.
  *
  * @cssvar
  * ```
  * --radio-background
+ * --radio-check-background
  * --radio-check-color
- * --radio-square-border-checked
+ * --radio-focus
+ * --radio-button-border
+ * --radio-button-color
+ * --radio-button-color-checked
+ * --radio-button-background-checked
+ * --radio-button-border-checked
+ * --radio-danger-color
+ * --radio-danger-background
  * ```
  */
 

package/src/components/rating/rating.ts

@@ -104,7 +104,7 @@ export class Rating extends HBox<RatingProps,RatingEventMap> {
 
 	// the star clicked: its svg, or the Icon itself
 	private _on_click( ev: MouseEvent ) {
-		const n = this.m_els.findIndex( c => c.dom.contains( ev.target as Node ) );
+		const n = this.m_els.findIndex( c => c.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 );

package/src/components/sizers/sizer.ts

@@ -167,7 +167,9 @@ export class CSizer extends Component<ComponentProps,CSizerEvent> {
 		if( this._type.includes("-prev") || this._type.includes("-next") ) {
 			const neighbour = this._type.includes("-prev") ? this.prevElement( ) : this.nextElement( );
 			if( neighbour ) {
-				this._ref.setStyleValue( "flex", `0 0 ${size}px` );
+				// shrink 1: no larger than the space the box has left (the flex neighbour at its
+				// padding); 0 at least, a negative basis is not a value
+				this._ref.setStyleValue( "flex", `0 1 ${Math.max( 0, size )}px` );
 			}
 			else {
 				this._ref.setStyle( nr );
@@ -185,18 +187,28 @@ export class CSizer extends Component<ComponentProps,CSizerEvent> {
 	}
 }
 
+/**
+ * a sizer between two children of a HBox: it resizes the one before it or the one after it
+ * (a boolean, as in older code: true after, false before)
+ */
+
 export class HSizer extends CSizer {
 	static classPrefix = "x4";
 
-	constructor( next = true ) {
-		super( next ? "hsize-next" : "hsize-prev" );
+	constructor( side: "before" | "after" | boolean = "after" ) {
+		super( side === "before" || side === false ? "hsize-prev" : "hsize-next" );
 	}
 }
 
+/**
+ * a sizer between two children of a VBox: it resizes the one before it (above) or the one
+ * after it (under); a boolean as for HSizer
+ */
+
 export class VSizer extends CSizer {
 	static classPrefix = "x4";
 
-	constructor( next = true ) {
-		super( next ? "vsize-next" : "vsize-prev" );
+	constructor( side: "before" | "after" | boolean = "after" ) {
+		super( side === "before" || side === false ? "vsize-prev" : "vsize-next" );
 	}
 }

package/src/components/spreadsheet/spreadsheet.module.scss

@@ -72,6 +72,11 @@
 	background-color: var( --spreadsheet-background );
 	border: 1px solid var( --spreadsheet-border );
 	color: var( --spreadsheet-cell-color );
+
+	// disabled: faded as a Box (a Spreadsheet is not one)
+	&[disabled] {
+		opacity: var( --box-disabled-opacity );
+	}
 		
 	.cell {
 		padding: 4px;
@@ -179,6 +184,7 @@
 			}
 
 			.percent {
+				align-self: center;		// a Box stretches (top of the cell): centered in the row
 				width: 100%;
 				border: 1px solid var( --border );
 				height: 8px;

package/src/components/tabs/tabs.module.scss

@@ -6,6 +6,7 @@
 	--tab-color-hover: var( --text-primary );
 	--tab-color: var( --text-primary );
 	--tab-color-selected: var( --text-primary );
+	--tab-icon-color: var( --icon-color );
 }
 
 .x4tabs {
@@ -24,6 +25,7 @@
 			border: none;
 			border-bottom: 2px solid transparent;
 			color: var( --tab-color );
+			--ol-button-icon-color: var( --tab-icon-color );
 			margin: 0;
 			outline: none;
 			transition: border-color 0.2s ease;

package/src/components/tabs/tabs.ts

@@ -149,6 +149,7 @@ interface TabsProps extends Omit<ComponentProps,"content"> {
  * --tab-color-hover
  * --tab-color
  * --tab-color-selected
+ * --tab-icon-color
  * ```
  */
 

package/src/components/textarea/textarea.module.scss

@@ -23,6 +23,7 @@
 	--textarea-selection-color: var( --accent-color );
 	--textarea-background: var( --background-input );
 	--textarea-color: var( --text-primary );
+	--textarea-required: var( --alert-background );
 }
 
 .x4simpletextarea {
@@ -77,6 +78,14 @@
 		display: none;
 	}
 
+	// required: a "*" before the label, as the one of a TextEdit
+	&:has( > .x4simpletextarea[required] ) > .x4label::before {
+		content: "*";
+		font-weight: bold;
+		color: var( --textarea-required );
+		margin-right: 2px;
+	}
+
 	.x4simpletextarea {
 		// its height of rows when the TextArea has none, the TextArea's height when it has one;
 		// a basis of 0 would leave it the height of its padding: a textarea scrolls, its min-height is 0

package/src/components/textarea/textarea.ts

@@ -139,6 +139,7 @@ export class SimpleTextArea extends Component<SimpleTextAreaProps,TextAreaEvents
  * --textarea-selection-color
  * --textarea-background
  * --textarea-color
+ * --textarea-required
  * ```
  */
 

package/src/components/themes.scss

@@ -52,6 +52,7 @@ $color--interval: 8.4%;
 	--background-primary: var(--color-primary-a0);
 	--background-secondary: var(--color-primary-a10);
 	--background-ternary: color-mix(in srgb, var(--color-primary-a100) 4.3%, var(--color-primary-a0));		// #f4f4f4
+	--background-odd: color-mix(in srgb, var(--color-primary-a100) 2.4%, var(--color-primary-a0));		// #f9f9f9, a row out of two
 	--background-hover: color-mix(in srgb, var(--color-primary-a100) 6.7%, var(--color-primary-a0));		// #eee
 	--background-active: color-mix(in srgb, var(--color-primary-a100) 20%, var(--color-primary-a0));		// #ccc
 	--background-input: color-mix(in srgb, var(--color-primary-a0) 60%, transparent);					// white at 60%

package/src/components/timeline/timeline.module.scss

@@ -0,0 +1,147 @@
+/**
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|
+ *  /__/\__\   |_|
+ *
+ * @file timeline.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 {
+	--timeline-done-color: var( --accent-background );
+	--timeline-done-icon-color: var( --accent-color );
+	--timeline-todo-color: var( --border );
+	--timeline-todo-icon-color: var( --text-ternary );
+	--timeline-title-color: var( --text-primary );
+	--timeline-text-color: var( --text-ternary );
+	--timeline-time-color: var( --text-primary );
+}
+
+// side by side: the marks on a line at the top, the content under each one
+
+.x4timeline {
+	display: flex;
+	flex-direction: row;
+
+	.item {
+		display: flex;
+		flex-direction: column;
+		flex: 1 1 0;
+		min-width: 0;
+	}
+
+	.rail {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+	}
+
+	.mark {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+		width: 24px;
+		height: 24px;
+		border-radius: 50%;
+		background-color: var( --timeline-todo-color );
+
+		.x4icon {
+			height: 12px;
+			color: var( --timeline-todo-icon-color );
+			fill: var( --timeline-todo-icon-color );
+
+			&.empty {
+				display: none;
+			}
+		}
+	}
+
+	// the line to the next mark: only one side has a width
+	.line {
+		flex: 1;
+		border: 0 dashed var( --timeline-todo-color );
+		border-top-width: 2px;
+	}
+
+	.item.done > .rail {
+		.mark {
+			background-color: var( --timeline-done-color );
+
+			.x4icon {
+				color: var( --timeline-done-icon-color );
+				fill: var( --timeline-done-icon-color );
+			}
+		}
+
+		.line {
+			border-style: solid;
+		}
+	}
+
+	.item.next-done > .rail > .line {
+		border-color: var( --timeline-done-color );
+	}
+
+	.item:last-child > .rail > .line {
+		display: none;
+	}
+
+	.content {
+		padding: 8px 12px 0 0;
+	}
+
+	.title {
+		font-weight: bold;
+		color: var( --timeline-title-color );
+	}
+
+	.text {
+		color: var( --timeline-text-color );
+	}
+
+	.time {
+		margin-top: 4px;
+		font-size: 0.85em;
+		font-weight: 500;
+		color: var( --timeline-time-color );
+	}
+
+	// one under the other: the marks on a line on the left, the content beside each one
+
+	&.vertical {
+		flex-direction: column;
+
+		.item {
+			flex-direction: row;
+			flex: 0 0 auto;
+		}
+
+		.rail {
+			flex-direction: column;
+		}
+
+		.line {
+			border-top-width: 0;
+			border-left-width: 2px;
+		}
+
+		.content {
+			flex: 1;
+			min-width: 0;
+			padding: 0 0 1.5em 12px;
+		}
+
+		// the title on the middle of the mark
+		.title {
+			line-height: 24px;
+		}
+	}
+}

package/src/components/timeline/timeline.ts

@@ -0,0 +1,146 @@
+/**
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|
+ *  /__/\__\   |_|
+ *
+ * @file timeline.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 { Component, ComponentEvents, ComponentProps, EvClick } from '../../core/component';
+import { EventCallback } from '../../core/core_events';
+import { UnsafeHtml } from '../../core/core_tools';
+import { getCurrentLocale } from '../../core/core_i18n';
+import { Icon } from '../icon/icon';
+
+import "./timeline.module.scss";
+
+export interface TimelineItem {
+	icon?: string;					// in the round mark
+	title: string | UnsafeHtml;		// in bold
+	text?: string | UnsafeHtml;		// the sentence under it
+	date?: Date;					// written relative to now, in the locale: "2 hours ago"; none: no time shown
+	done?: boolean;					// the mark filled in the accent; else a grey mark
+}
+
+export interface TimelineEvents extends ComponentEvents {
+	click: EvClick;					// context: the TimelineItem clicked
+}
+
+export interface TimelineProps extends ComponentProps {
+	items?: TimelineItem[];
+	vertical?: boolean;				// true by default; false: the events side by side
+	renderer?: ( item: TimelineItem ) => Component;	// what is beside the mark
+	click?: EventCallback<EvClick>;
+}
+
+/**
+ * "2 hours ago", "yesterday", "in 3 days": the largest unit that gives at least 1
+ */
+
+function relativeTime( date: Date ): string {
+	const fmt = new Intl.RelativeTimeFormat( getCurrentLocale( ), { numeric: "auto" } );
+	const sec = ( date.getTime( ) - Date.now( ) ) / 1000;		// < 0: in the past
+	const abs = Math.abs( sec );
+
+	if( abs < 60 ) {
+		return fmt.format( Math.trunc( sec ), "second" );
+	}
+
+	if( abs < 3600 ) {
+		return fmt.format( Math.trunc( sec / 60 ), "minute" );
+	}
+
+	if( abs < 86400 ) {
+		return fmt.format( Math.trunc( sec / 3600 ), "hour" );
+	}
+
+	if( abs < 86400 * 30 ) {
+		return fmt.format( Math.trunc( sec / 86400 ), "day" );
+	}
+
+	if( abs < 86400 * 365 ) {
+		return fmt.format( Math.trunc( sec / ( 86400 * 30 ) ), "month" );
+	}
+
+	return fmt.format( Math.trunc( sec / ( 86400 * 365 ) ), "year" );
+}
+
+/**
+ * Events one after the other on a line, each with its icon in a round mark.
+ * The line from a mark to the next one is in the accent when the next event is done,
+ * dashed when the event it leaves is not done.
+ *
+ * @cssvar
+ * ```
+ * --timeline-done-color
+ * --timeline-done-icon-color
+ * --timeline-todo-color
+ * --timeline-todo-icon-color
+ * --timeline-title-color
+ * --timeline-text-color
+ * --timeline-time-color
+ * ```
+ */
+
+export class Timeline extends Component<TimelineProps, TimelineEvents> {
+	static classPrefix = "x4";
+
+	constructor( props: TimelineProps ) {
+		super( props );
+
+		this.setClass( "vertical", props.vertical ?? true );
+
+		this.mapPropEvents( props, "click" );
+		this.addDOMEvent( "click", ( ev ) => this._onClick( ev ) );
+
+		if( props.items ) {
+			this.setItems( props.items );
+		}
+	}
+
+	setItems( items: TimelineItem[] ) {
+		const renderer = this.props.renderer;
+
+		const content = items.map( ( item, i ) => {
+			const body = renderer ? renderer( item ) : [
+				new Component( { cls: "title", content: item.title } ),
+				item.text ? new Component( { cls: "text", content: item.text } ) : null,
+				item.date ? new Component( { cls: "time", content: relativeTime( item.date ) } ) : null,
+			];
+
+			const el = new Component( { cls: "item", content: [
+				new Component( { cls: "rail", content: [
+					new Component( { cls: "mark", content: new Icon( { iconId: item.icon } ) } ),
+					new Component( { cls: "line" } ),
+				] } ),
+				new Component( { cls: "content", content: body } ),
+			] } );
+
+			el.setClass( "done", !!item.done );
+			el.setClass( "next-done", i + 1 < items.length && !!items[i + 1].done );
+			el.setInternalData( "item", item );
+			return el;
+		} );
+
+		this.setContent( content );
+	}
+
+	/**
+	 * a click anywhere in an event: its item
+	 */
+
+	private _onClick( ev: MouseEvent ) {
+		const el = Component.closest( ev.target as Element, ".x4timeline > .item" );
+		if( el ) {
+			this.fire( "click", { context: el.getInternalData( "item" ) } );
+		}
+	}
+}