x4js 2.3.25 → 2.3.26

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"
@@ -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;

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[];
 

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;

package/src/components/spreadsheet/spreadsheet.ts

@@ -18,7 +18,7 @@
 import { Component, ComponentContent, ComponentEvent, ComponentEvents, ComponentProps, EvChange, EvClick, EvContextMenu, EvDblClick, EvSelectionChange, componentFromDOM } from '../../core/component';
 import { GridColumn } from '../gridview/gridview'
 
-import { class_ns, IFormElement, isFunction, isNumber, isString, UnsafeHtml } from '../../core/core_tools';
+import { formatDate, formatMoney, formatNumber, IFormElement, isFunction, isNumber, isString, UnsafeHtml } from '../../core/core_tools';
 import { CoreEvent, EventCallback, EventMap } from '../../core/core_events';
 import { kbNav } from '../../core/core_tools';
 
@@ -282,8 +282,8 @@ export interface SpreadsheetProps extends ComponentProps {
  * ```
  */
 
-@class_ns("x4")
 export class Spreadsheet<P extends SpreadsheetProps = SpreadsheetProps, E extends SpreadsheetEvents = SpreadsheetEvents> extends Component<P, E> {
+	static classPrefix = "x4";
 
 	private _columns: SpreadsheetColumn[];
 	private _store: Store;
@@ -310,9 +310,6 @@ export class Spreadsheet<P extends SpreadsheetProps = SpreadsheetProps, E extend
 	private _end: number;
 
 	private _selection: Set<number>;
-	private _num_fmt = new Intl.NumberFormat('fr-FR');
-	private _mny_fmt = new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' });
-	private _dte_fmt = new Intl.DateTimeFormat('fr-FR', {});
 
 	private _has_fixed: boolean;
 	private _has_footer: boolean;
@@ -821,12 +818,13 @@ export class Spreadsheet<P extends SpreadsheetProps = SpreadsheetProps, E extend
 			})
 
 			sizer.on("resize", (ev) => {
-				cdata.width = ev.size;
+				const size = Math.max( ev.size, 16 );		// 16px at least: the min-width of a .cell
+				cdata.width = size;
 				cdata.flex = 0;
 
 				const cols = this.queryAll(`[data-col="${col}"]`)
 				cols.forEach(c => {
-					c.setStyleValue("width", ev.size + "px");
+					c.setStyleValue("width", size + "px");
 				});
 
 				const rh = header.getBoundingRect();
@@ -990,7 +988,7 @@ export class Spreadsheet<P extends SpreadsheetProps = SpreadsheetProps, E extend
 					return "NaN";
 				}
 
-				data = this._num_fmt.format(data as number);
+				data = formatNumber(data as number);
 				break;
 			}
 
@@ -999,7 +997,7 @@ export class Spreadsheet<P extends SpreadsheetProps = SpreadsheetProps, E extend
 					return "NaN";
 				}
 
-				data = this._mny_fmt.format(data as number);
+				data = formatMoney(data as number);
 				break;
 			}
 
@@ -1015,7 +1013,7 @@ export class Spreadsheet<P extends SpreadsheetProps = SpreadsheetProps, E extend
 			}
 
 			case "date": {
-				data = this._dte_fmt.format(data as Date);
+				data = formatDate(data as Date);
 				break;
 			}
 

package/src/components/switch/switch.ts

@@ -22,7 +22,6 @@ import { Label } from '../label/label';
 import { HBox } from '../boxes/boxes';
 
 import "./switch.module.scss";
-import { class_ns } from '../../core/core_tools';
 
 interface SwitchProps extends ComponentProps {
 	label: string;
@@ -43,8 +42,9 @@ interface SwitchProps extends ComponentProps {
  * ```
  */
 
-@class_ns( "x4" )
 export class Switch extends HBox<SwitchProps> {
+	static classPrefix = "x4";
+
 	constructor(props: SwitchProps ) {
 		super( props );
 

package/src/components/tabs/tabs.ts

@@ -20,7 +20,6 @@ import { Button, ButtonProps } from '../button/button';
 import { HBox, VBox, StackBox, Box } from '../boxes/boxes';
 
 import "./tabs.module.scss"
-import { class_ns } from '../../core/core_tools';
 
 /**
  * 
@@ -40,8 +39,9 @@ export interface TabItem {
  * 
  */
 
-@class_ns( "x4" )
 class CTab extends Button {
+	static classPrefix = "x4";
+
 	constructor( props: ButtonProps, item: TabItem ) {
 		super( props );
 
@@ -78,8 +78,8 @@ interface TablistEvents extends ComponentEvents {
  * @internal
  */
 
-@class_ns( "x4" )
 class CTabList extends HBox<TablistProps,TablistEvents> {
+	static classPrefix = "x4";
 
 	private _selitem: Button;
 	
@@ -152,8 +152,8 @@ interface TabsProps extends Omit<ComponentProps,"content"> {
  * ```
  */
 
-@class_ns( "x4" )
 export class Tabs extends Box<TabsProps> {
+	static classPrefix = "x4";
 
 	private _list: CTabList;
 	private _stack: StackBox;

package/src/components/tag/tag.ts

@@ -16,7 +16,7 @@
 
 
 import { ComponentProps } from '../../core/component';
-import { class_ns, UnsafeHtml } from '../../core/core_tools';
+import { UnsafeHtml } from '../../core/core_tools';
 import { HBox } from '../boxes/boxes';
 import { Icon } from '../icon/icon';
 import { SimpleText } from '../label/label';
@@ -40,8 +40,8 @@ export interface TagProps extends ComponentProps {
  * ```
  */
 
-@class_ns( "x4" )
 export class Tag extends HBox<TagProps> {
+	static classPrefix = "x4";
 
 	constructor( props: TagProps ) {
 		super( props );

package/src/components/textarea/textarea.ts

@@ -23,7 +23,7 @@ import { Label } from '../label/label';
 import { VBox } from '../boxes/boxes';
 
 import "./textarea.module.scss";
-import { class_ns, IFormElement } from '../../core/core_tools';
+import { IFormElement } from '../../core/core_tools';
 
 /**
  * 
@@ -50,8 +50,8 @@ export interface TextAreaEvents extends ComponentEvents {
  *
  */
 
-@class_ns( "x4" )
 export class SimpleTextArea extends Component<SimpleTextAreaProps,TextAreaEvents> {
+	static classPrefix = "x4";
 
 	constructor( props: SimpleTextAreaProps ) {
 		super( { ...props, tag: "textarea" } );
@@ -142,8 +142,8 @@ export class SimpleTextArea extends Component<SimpleTextAreaProps,TextAreaEvents
  * ```
  */
 
-@class_ns( "x4" )
 export class TextArea extends VBox {
+	static classPrefix = "x4";
 	
 	private _input: SimpleTextArea;
 

package/src/components/textedit/textedit.ts

@@ -16,7 +16,7 @@
 
 //import { EventCallback } from '../../core/core_events';
 import { Component, ComponentEvents, makeUniqueComponentId } from '../../core/component';
-import { class_ns, UnsafeHtml } from '../../core/core_tools';
+import { UnsafeHtml } from '../../core/core_tools';
 
 import { BoxProps, HBox } from '../boxes/boxes';
 import { DateProps, Input, InputProps, NumberProps, TextInputProps, TimeProps } from "../input/input"
@@ -81,8 +81,8 @@ interface TextEditProps extends InputProps {
  * ```
  */
 
-@class_ns( "x4" )
 export class TextEdit<E extends ComponentEvents = ComponentEvents> extends HBox<BoxProps,E> {
+	static classPrefix = "x4";
 
 	private input: Input;
 

package/src/components/themes.scss

@@ -92,9 +92,11 @@ $color--interval: 8.4%;
 	// the red, orange and green do not follow the scale: their text stays white
 	--alert-background: var(--color-danger-a50);
 	--alert-background-active: var(--color-danger-a60);
+	--alert-background-light: color-mix(in srgb, var(--alert-background) 15%, transparent);		// the red at 15%
 	--alert-color: #ffffff;
 
 	--warning-background: var(--color-warning-a50);
+	--warning-background-light: color-mix(in srgb, var(--warning-background) 15%, transparent);	// the orange at 15%
 	--warning-color: #ffffff;
 
 	--success-background: var(--color-success-a50);

package/src/components/tickline/tickline.ts

@@ -3,7 +3,7 @@ import { Color } from '../../core/core_colors';
 import { Component, ComponentProps } from '../../core/component';
 
 import "./tickline.module.scss"
-import { class_ns } from '../../core/core_tools';
+import { formatNumber } from '../../core/core_tools';
 
 export interface TickLineProps extends ComponentProps {
 	values: number[];
@@ -31,8 +31,8 @@ export interface TickLineProps extends ComponentProps {
  * 
  */
 
-@class_ns( "x4" )
 export class TickLine extends Component<TickLineProps> {
+	static classPrefix = "x4";
 	
 	constructor( props: TickLineProps ) {
 		super( props );
@@ -102,7 +102,7 @@ export class TickLine extends Component<TickLineProps> {
                     .antiAlias( false );
 
                 if( props.display?.tooltips ) {
-                    r.setAttr( 'tooltip', vals[x].toFixed(1) )
+                    r.setAttr( 'tooltip', formatNumber( vals[x], 1 ) )
                 }
 			}
 		}

package/src/components/tooltips/tooltips.ts

@@ -15,7 +15,7 @@
  **/
 
 import { Component, wrapDOM } from '../../core/component';
-import { class_ns, ITipHandler, Point, Rect, Timer, UnsafeHtml, unsafeHtml } from '../../core/core_tools';
+import { ITipHandler, Point, Rect, Timer, UnsafeHtml, unsafeHtml } from '../../core/core_tools';
 
 import { HBox } from '../boxes/boxes';
 import { Popup, PopupProps } from '../popup/popup';
@@ -117,8 +117,8 @@ function closeTT( ) {
  * ```
  */
 
-@class_ns( "x4" )
 class Tooltip extends Popup {
+	static classPrefix = "x4";
 
 	constructor( props: PopupProps ) {
 		super( props );

package/src/components/treeview/treeview.ts

@@ -14,7 +14,7 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-import { asap, class_ns } from '../../core/core_tools';
+import { asap } from '../../core/core_tools';
 import { EventCallback } from '../../core/core_events';
 import { Component, ComponentEvent, ComponentEvents, ComponentProps, EvClick, EvDblClick, EvSelectionChange, componentFromDOM } from '../../core/component';
 
@@ -84,8 +84,8 @@ export interface TreeviewEvents extends ComponentEvents {
  * ```
  */
 
-@class_ns( "x4" )
 class CTreeViewItem extends Box {
+	static classPrefix = "x4";
 
 	private _item: TreeItem;
 	private _label: Component;
@@ -187,8 +187,8 @@ class CTreeViewItem extends Box {
  * 
  */
 
-@class_ns( "x4" )
 export class Treeview extends Component<TreeviewProps,TreeviewEvents> {
+	static classPrefix = "x4";
 
 	private _view: Viewport;
 	private _selection: ListboxID;

package/src/components/video/video.ts

@@ -15,7 +15,6 @@
  **/
 
 import { Component, ComponentProps } from '../../core/component';
-import { class_ns } from '../../core/core_tools';
 import { Box } from '../boxes/boxes';
 
 import "./video.module.scss"
@@ -31,8 +30,8 @@ interface VideoProps extends ComponentProps {
  * 
  */
 
-@class_ns( "x4" )
 export class Video extends Box {
+	static classPrefix = "x4";
 	
 	private _vplayer: HTMLVideoElement;
 

package/src/components/viewport/viewport.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 "./viewport.module.scss"
@@ -24,8 +23,9 @@ import { Box, BoxProps } from '../components';
  * 
  */
 
-@class_ns( "x4" )
 export class Viewport extends Component {
+	static classPrefix = "x4";
+
 	constructor( props: ComponentProps ) {
 		super( props );
 	}
@@ -35,8 +35,9 @@ export class Viewport extends Component {
  * 
  */
 
-@class_ns( "x4" )
 export class ScrollView extends Box {
+	static classPrefix = "x4";
+
 	constructor( props: BoxProps ) {
 		super( props );
 		this.setContent( new Viewport( {} ) );