x4js 2.3.25 → 2.3.27

package/src/components/messages/messages.ts

@@ -2,7 +2,7 @@
 // :: MESSAGEBOX ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
 
 import { _tr } from '../../core/core_i18n';
-import { asap, class_ns, sprintf, unsafeHtml, UnsafeHtml } from '../../core/core_tools';
+import { asap, sprintf, unsafeHtml, UnsafeHtml } from '../../core/core_tools';
 
 import { HBox, VBox } from '../boxes/boxes';
 import { Icon } from '../icon/icon';
@@ -41,16 +41,19 @@ export interface MessageBoxProps extends DialogProps {
  * --msgbox-log-border
  * --msgbox-log-border-focus
  * --msgbox-log-error-color
+ * --msgbox-log-error-background
  * --msgbox-log-warning-color
+ * --msgbox-log-warning-background
  * --msgbox-log-scrollbar
  * ```
  * --msgbox-caption-* and --msgbox-icon-color are the ones of an error; a question, an InputBox
  * and a PromptBox have the title bar of a Dialog and their icon in --msgbox-question-icon-color
  */
 
-@class_ns( "x4" )
 export class MessageBox extends Dialog<DialogProps>
 {
+	static classPrefix = "x4";
+
 	constructor(props: DialogProps) {
 		super(props);
 	}
@@ -139,9 +142,10 @@ interface InputOptions {
 	trim?: boolean;
 }
 
-@class_ns( "x4" )
 export class InputBox extends Dialog<DialogProps>
 {
+	static classPrefix = "x4";
+
 	constructor(props: DialogProps) {
 		super(props);
 	}
@@ -208,9 +212,10 @@ export class InputBox extends Dialog<DialogProps>
 // :: PROMPT ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
 
 
-@class_ns( "x4" )
 export class PromptBox extends Dialog<DialogProps>
 {
+	static classPrefix = "x4";
+
 	constructor(props: DialogProps) {
 		super(props);
 	}
@@ -284,21 +289,21 @@ export class PromptBox extends Dialog<DialogProps>
 
 /**
  * a modal box that follows a long task: a title, a bar, and the lines of what is done
- * in a <pre>: a string is text, an UnsafeHtml is html. An error, a warning have their
- * icon and their colour. addSection puts the lines that follow in a section that folds.
- * Ctrl+A selects the lines.
+ * in a <pre>, in a fixed font, a <div> each: a string is text, an UnsafeHtml is html. An
+ * error, a warning are coloured on all their width, a bar on their left. addSection puts
+ * the lines that follow in a section that folds. Ctrl+A selects the lines.
  * done( ) shows its button OK: after an error or a warning it waits for it, their counts
  * on the left of the bar; else it closes the box after 5s, the seconds left in the button.
  */
 
-@class_ns( "x4" )
 export class ProgressionBox  extends Dialog {
+	static classPrefix = "x4";
 
 	// an error or a warning: done( ) waits for OK
-	#errors = 0;
-	#warnings = 0;
+	private _errors = 0;
+	private _warnings = 0;
 
-	#section: Component;		// the last section (a <details>): the lines go in it
+	private _section: Component;		// the last section (a <details>): the lines go in it
 
 	constructor( title: string ) {
 		super( { 
@@ -348,7 +353,7 @@ export class ProgressionBox  extends Dialog {
 		this.query<Progress>( "#prog").setValue( perc );
 		this.addClass( "error" );		// the title bar in red, as the one of an error of MessageBox
 
-		this.#errors++;
+		this._errors++;
 	}
 
 	/** a line at the end, with the icon of a warning: done( ) then waits for the button OK */
@@ -357,7 +362,7 @@ export class ProgressionBox  extends Dialog {
 		this._addLine( text, "warning" );
 		this.query<Progress>( "#prog").setValue( perc );
 
-		this.#warnings++;
+		this._warnings++;
 	}
 
 	/**
@@ -369,10 +374,10 @@ export class ProgressionBox  extends Dialog {
 		const summary = new Component( { tag: "summary", content: new Component( { tag: "span", cls: "alert" } ) } );
 		summary.appendContent( title );
 
-		this.#section = new Component( { tag: "details", attrs: { open: true }, content: summary } );
+		this._section = new Component( { tag: "details", attrs: { open: true }, content: summary } );
 
 		const log = this.query( "#sub-text" );
-		log.appendContent( this.#section );
+		log.appendContent( this._section );
 		log.dom.scrollTop = log.dom.scrollHeight;
 		this.query<Progress>( "#prog").setValue( perc );
 	}
@@ -380,7 +385,7 @@ export class ProgressionBox  extends Dialog {
 	/** the text in place of all the lines */
 
 	setText( text: string | UnsafeHtml, perc: number ) {
-		this.#section = null;
+		this._section = null;
 		this.query( "#sub-text" ).setContent( text );
 		this.query<Progress>( "#prog").setValue( perc );
 	}
@@ -388,44 +393,31 @@ export class ProgressionBox  extends Dialog {
 	/** as at the start: no line, no error, no button OK */
 
 	clear( ) {
-		this.#errors = 0;
-		this.#warnings = 0;
+		this._errors = 0;
+		this._warnings = 0;
 		this.clearInterval( "close" );
 		this.query( "#btnbar" ).show( false );
 		this.removeClass( "error" );
 		this.query<Label>( "#alerts" ).setText( "" );
 		this.query<Label>( "#alerts" ).setIcon( null );
-		this.#section = null;
+		this._section = null;
 		this.query( "#sub-text" ).clearContent( );
 	}
 
-	// the line after the others (in the last section), the last one shown; an error, a
-	// warning in a span of their class, their icon first
+	// the line after the others (in the last section), the last one shown: a <div>, of the
+	// class of its kind for an error, a warning
 	private _addLine( text: string | UnsafeHtml, kind?: "error" | "warning" ) {
 		const log = this.query( "#sub-text" );
-		const target = this.#section ?? log;
+		const target = this._section ?? log;
 
-		// after the summary of a section, its first line starts below it
-		if( target.dom.lastChild && target.dom.lastChild.nodeName!="SUMMARY" ) {
-			target.appendContent( "\n" );
-		}
+		target.appendContent( new Component( { cls: kind ? "line " + kind : "line", content: text } ) );
 
-		if( kind ) {
-			const icon = kind=="error" ? icons.danger : icons.warning;
-			const line = new Component( { tag: "span", cls: kind, content: unsafeHtml( icon ) } );
-			line.appendContent( text );
-			target.appendContent( line );
-
-			// the title of the section: the icon of the worst, in its colour
-			const alert = this.#section?.query( ".alert" );
-			if( alert && !alert.hasClass( "error" ) ) {
-				alert.setClass( "warning", kind=="warning" );
-				alert.setClass( "error", kind=="error" );
-				alert.setContent( unsafeHtml( icon ) );
-			}
-		}
-		else {
-			target.appendContent( text );
+		// the title of the section: the icon of the worst, in its colour
+		const alert = this._section?.query( ".alert" );
+		if( kind && alert && !alert.hasClass( "error" ) ) {
+			alert.setClass( "warning", kind=="warning" );
+			alert.setClass( "error", kind=="error" );
+			alert.setContent( unsafeHtml( kind=="error" ? icons.danger : icons.warning ) );
 		}
 
 		log.dom.scrollTop = log.dom.scrollHeight;
@@ -449,22 +441,22 @@ export class ProgressionBox  extends Dialog {
 		const ok = this.query<Button>( "#ok" );
 		this.query( "#btnbar" ).show( true );
 
-		if( this.#errors || this.#warnings ) {
+		if( this._errors || this._warnings ) {
 			const tr = _tr.global.progression;
 			const counts = [];
-			if( this.#errors ) {
-				counts.push( sprintf( this.#errors>1 ? tr.errors : tr.error, this.#errors ) );
+			if( this._errors ) {
+				counts.push( sprintf( this._errors>1 ? tr.errors : tr.error, this._errors ) );
 			}
-			if( this.#warnings ) {
-				counts.push( sprintf( this.#warnings>1 ? tr.warnings : tr.warning, this.#warnings ) );
+			if( this._warnings ) {
+				counts.push( sprintf( this._warnings>1 ? tr.warnings : tr.warning, this._warnings ) );
 			}
 
 			// on the left, the icon of the worst
 			const alerts = this.query<Label>( "#alerts" );
 			alerts.setText( counts.join( " / " ) );
-			alerts.setIcon( this.#errors ? icons.danger : icons.warning );
-			alerts.setClass( "error", this.#errors>0 );
-			alerts.setClass( "warning", this.#errors==0 );
+			alerts.setIcon( this._errors ? icons.danger : icons.warning );
+			alerts.setClass( "error", this._errors>0 );
+			alerts.setClass( "warning", this._errors==0 );
 
 			ok.setText( _tr.global.ok );
 			return;

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

@@ -15,7 +15,7 @@
  **/
 
 import { ComponentProps } from '../../core/component';
-import { asap, class_ns, Rect, UnsafeHtml } from '../../core/core_tools';
+import { asap, Rect, UnsafeHtml } from '../../core/core_tools';
 
 import { Popup } from '../popup/popup';
 import { HBox, VBox } from '../boxes/boxes';
@@ -61,8 +61,9 @@ interface NotificationProps extends ComponentProps {
  * ```
  */
 
-@class_ns( "x4" )
 export class Notification extends Popup {
+	static classPrefix = "x4";
+
 	private static list = new Set<Notification>( );
 
 	constructor( props: NotificationProps ) {

package/src/components/panel/panel.ts

@@ -15,7 +15,7 @@
  **/
 
 import { Component, ComponentContent, ComponentProps } from '../../core/component';
-import { UnsafeHtml, Constructor, class_ns } from '../../core/core_tools';
+import { UnsafeHtml, Constructor } from '../../core/core_tools';
 
 import { VBox } from '../boxes/boxes';
 import { Label } from '../label/label';
@@ -37,8 +37,8 @@ interface PanelProps extends ComponentProps {
  * ```
  */
 
-@class_ns( "x4" )
 export class Panel extends VBox<PanelProps> {
+	static classPrefix = "x4";
 
 	private _title: Label;
 	private _body: Component;

package/src/components/popup/popup.ts

@@ -17,7 +17,7 @@
 import { Component, ComponentEvent, ComponentEvents, ComponentProps, componentFromDOM, makeUniqueComponentId } from "../../core/component"
 
 import { CSizer } from '../sizers/sizer';
-import { Rect, Point, class_ns, asap } from '../../core/core_tools';
+import { Rect, Point, asap } from '../../core/core_tools';
 import { Box } from '../boxes/boxes'
 
 import "./popup.module.scss"
@@ -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;
 	}
 
@@ -70,8 +70,8 @@ function dismissLast( e: UIEvent ) {
  * ```
  */
 
-@class_ns( "x4" )
 export class Popup<P extends PopupProps = PopupProps, E extends PopupEvents = PopupEvents> extends Box<P,E> {
+	static classPrefix = "x4";
 
 	private _isshown = false;
 	protected _ismodal = false;
@@ -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/progress/progress.ts

@@ -14,7 +14,6 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-import { class_ns } from '../../core/core_tools';
 import { Component, ComponentProps } from '../../core/component';
 
 import "./progress.module.scss";
@@ -33,8 +32,8 @@ interface ProgressProps extends ComponentProps {
  * ```
  */
 
-@class_ns( "x4" )
 export class Progress extends Component<ProgressProps> {
+	static classPrefix = "x4";
 
 	private _bar: Component;
 

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

@@ -117,9 +117,8 @@
 	}
 
 	// A row has no box of its own: its two cells go straight on the columns
-	// of the grid, which is how all the titles get the same width. (A row is
-	// a fieldset: it cannot be a subgrid.) What a row looked like, background
-	// and bottom line, is carried by its cells.
+	// of the grid, which is how all the titles get the same width. What a row
+	// looked like, background and bottom line, is carried by its cells.
 	.row {
 		display: contents;
 

package/src/components/propgrid/propgrid.ts

@@ -21,7 +21,7 @@ import { HBox, VBox } from "../boxes/boxes"
 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 { asap, isFunction, isNumber } from '../../core/core_tools';
 import { Icon, ScrollView } from '../components'
 import { ColorInput } from '../colorinput/colorinput'
 import { EvColorChange } from '../colorpicker/colorpicker'
@@ -84,8 +84,8 @@ export interface PropertyProps extends ComponentProps {
  * ```
  */
 
-@class_ns( "x4" )
 export class PropertyGrid extends VBox {
+	static classPrefix = "x4";
 
 	private root: Component;
 	private groups: PropertyGroup[];

package/src/components/radio/radio.ts

@@ -15,7 +15,6 @@
  **/
 
 import { Component, ComponentEvents, ComponentProps, EvChange, makeUniqueComponentId } from '../../core/component';
-import { class_ns } from '../../core/core_tools';
 import { EventCallback } from '../../core/core_events';
 
 import { Label } from '../label/label';
@@ -57,8 +56,8 @@ interface RadioProps extends ComponentProps {
  * ```
  */
 
-@class_ns( "x4" )
 export class Radio extends Component<RadioProps,RadioEvents> {
+	static classPrefix = "x4";
 
 	private _check: HBox;
 	private _input: Input;

package/src/components/rating/rating.ts

@@ -18,7 +18,7 @@ import { Component, ComponentEvents, ComponentProps, EvChange } from '../../core
 import { EventCallback } from '../../core/core_events';
 import { HBox } from '../boxes/boxes';
 import { Icon } from '../icon/icon';
-import { class_ns, IComponentInterface, IFormElement } from '../../core/core_tools';
+import { IComponentInterface, IFormElement } from '../../core/core_tools';
 
 import icons from "../assets/icons"
 
@@ -49,8 +49,8 @@ export interface RatingProps extends ComponentProps {
  * ```
  */
 
-@class_ns( "x4" )
 export class Rating extends HBox<RatingProps,RatingEventMap> {
+	static classPrefix = "x4";
 
 	private m_els: Component[];
 
@@ -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/select/select.ts

@@ -17,7 +17,7 @@
 
 import { EventCallback } from '../../core/core_events';
 import { Component, ComponentEvents, ComponentProps, EvChange, EvFocus  } from '../../core/component';
-import { class_ns, IComponentInterface, IFormElement, isArray } from '../../core/core_tools';
+import { IComponentInterface, IFormElement, isArray } from '../../core/core_tools';
 
 import { ListboxID, ListItem } from '../components';
 
@@ -57,8 +57,8 @@ interface SelectEvents extends ComponentEvents {
  * ```
  */
 
-@class_ns( "x4" )
 export class Select extends Component<SelectProps,SelectEvents> {
+	static classPrefix = "x4";
 
 	private _items: ListItem[];
 

package/src/components/settingsview/settingsview.module.scss

@@ -16,8 +16,9 @@
 
 :root {
 	--settingsview-toc-width: 210px;
-	--settingsview-section-background: var( --color-primary-a10 );
-	--settingsview-section-title-background: var( --color-primary-a20 );
+	--settingsview-section-background: var( --background-primary );
+	--settingsview-section-title-background: transparent;
+	--settingsview-section-title-color: var( --accent-background );
 	--settingsview-hover-background: var( --color-primary-a20 );
 	--settingsview-marker: var( --accent-background );
 }
@@ -92,13 +93,13 @@
 		}
 	}
 
-	// a section: a panel, its title on a band
+	// a section: no frame, its title in the accent colour on a line
 	.section {
 		flex-shrink: 0;
 		width: 100%;
 		max-width: 900px;
 		padding: 0 8px 10px;
-		border: 1px solid var( --border );
+		border: none;
 		background: var( --settingsview-section-background );
 		overflow: hidden;
 		scroll-margin-top: 20px;	// brought to the top: below the padding of the view
@@ -115,7 +116,7 @@
 			background: var( --settingsview-section-title-background );
 			font-size: 1.1rem;
 			font-weight: 600;
-			--label-color: var( --text-primary );
+			--label-color: var( --settingsview-section-title-color );
 		}
 
 		> .description {

package/src/components/settingsview/settingsview.ts

@@ -16,7 +16,6 @@
 
 import { Component, ComponentEvent, ComponentEvents } from '../../core/component';
 import { EventCallback } from '../../core/core_events';
-import { class_ns } from '../../core/core_tools';
 
 import { BoxProps, HBox, VBox } from '../boxes/boxes';
 import { Input } from '../input/input';
@@ -43,8 +42,8 @@ export interface SettingItemProps extends BoxProps {
  * together, put the items in a Form and give the controls a name.
  */
 
-@class_ns( "x4" )
 export class SettingItem extends VBox<SettingItemProps> {
+	static classPrefix = "x4";
 
 	constructor( props: SettingItemProps ) {
 		// the content goes under the name and the description, not in the box itself
@@ -112,13 +111,14 @@ function normalize( text: string ) {
  * --settingsview-toc-width
  * --settingsview-section-background
  * --settingsview-section-title-background
+ * --settingsview-section-title-color
  * --settingsview-hover-background
  * --settingsview-marker
  * ```
  */
 
-@class_ns( "x4" )
 export class SettingsView<P extends SettingsViewProps = SettingsViewProps> extends VBox<P,SettingsViewEvents> {
+	static classPrefix = "x4";
 
 	// fields, not refs: refs belong to the classes that derive from this one
 	private _search: Input = null;

package/src/components/sizers/sizer.ts

@@ -15,7 +15,7 @@
  **/
 
 import { Component, ComponentEvent, ComponentEvents, ComponentProps, componentFromDOM } from '../../core/component';
-import { class_ns, Point } from '../../core/core_tools';
+import { Point } from '../../core/core_tools';
 
 import "./sizer.module.scss"
 
@@ -43,8 +43,8 @@ type SizerType = "left" | "top" | "right" | "bottom" | "top-left" | "top-right"
  */
 
 
-@class_ns( "x4" )
 export class CSizer extends Component<ComponentProps,CSizerEvent> {
+	static classPrefix = "x4";
 
 	private _type: SizerType;
 	private _ref: Component;
@@ -98,6 +98,15 @@ export class CSizer extends Component<ComponentProps,CSizerEvent> {
 			this._ref = null;
 		});
 
+		// cancelled by the browser (a touch taken by a scroll, a gesture...): no pointerup will
+		// come, the moves after are not a resize. The browser releases the capture itself
+		this.addDOMEvent( "pointercancel", ( ) => {
+			if( this._ref ) {
+				this.fire( "stop", { })
+				this._ref = null;
+			}
+		});
+
 		this.addDOMEvent( "pointermove", ( e: PointerEvent ) => {
 			this._onMouseMove( e );
 		});
@@ -153,36 +162,17 @@ export class CSizer extends Component<ComponentProps,CSizerEvent> {
 			size = nr.width = (pt.x-rc.left);
 		}
 
-		const isFlex = ( c : Component ) => {
-			if( !c ) {
-				return false;
-			}
-
-			if( c.hasClass( "x4flex" ) ) {
-				return true;
-			}
-
-			return c.getStyleValue( "flexGrow" )!==undefined;
-		}
-
-		if( this._type.includes("-prev") ) {
-			if(  isFlex(this.prevElement() ) ) {
-				this._ref.setStyleValue( "flex", `0 0 ${size}px` );	
+		// between two boxes: the neighbour sized by the basis of its flex; without a neighbour
+		// (the sizer first or last in its box), the box itself by its size
+		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` );
 			}
 			else {
 				this._ref.setStyle( nr );
 			}
 		}
-		else if( this._type.includes("-next") ) {
-			if(  isFlex(this.nextElement() ) ) {
-				this._ref.setStyleValue( "flex", `0 0 ${size}px` );	
-			}
-			else {
-				this._ref.setStyle( nr );
-			}
-
-			return;
-		}
 		else {
 			this._ref.setStyle( nr );
 		}
@@ -195,15 +185,17 @@ export class CSizer extends Component<ComponentProps,CSizerEvent> {
 	}
 }
 
-@class_ns( "x4" )
 export class HSizer extends CSizer {
+	static classPrefix = "x4";
+
 	constructor( next = true ) {
 		super( next ? "hsize-next" : "hsize-prev" );
 	}
 }
 
-@class_ns( "x4" )
 export class VSizer extends CSizer {
+	static classPrefix = "x4";
+
 	constructor( next = true ) {
 		super( next ? "vsize-next" : "vsize-prev" );
 	}

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, IComponentInterface, IFormElement, Rect } from '../../core/core_tools';
+import { IComponentInterface, IFormElement, Rect } from '../../core/core_tools';
 
 import { HBox } from '../boxes/boxes';
 import { Input } from '../input/input';
@@ -49,8 +49,8 @@ interface SliderProps extends ComponentProps {
  * ```
  */
 
-@class_ns( "x4" )
 export class Slider extends Component<SliderProps,SliderEvents> {
+	static classPrefix = "x4";
 
 	private _mdown = false;
 	private _irect: Rect = null;