x4js 2.3.25 → 2.3.27

package/aicontext.md

@@ -36,7 +36,7 @@ CoreElement<E>                 named timers + event surface (no DOM)
   │     │     ├── BtnGroup, Tabs, Video, Saturation
   │     ├── Button, Input, Icon, Label, SimpleText, Checkbox, Radio, Link, SimpleTextArea
   │     ├── Listbox, Gridview, Treeview, Select, Combobox, Slider, Gauge
-  │     ├── Progress, TickLine, Canvas, Image, Spreadsheet, MonacoEditor
+  │     ├── Progress, TickLine, Timeline, Canvas, Image, Spreadsheet, MonacoEditor
   │     ├── SvgComponent → Chart
   │     ├── CSizer → HSizer / VSizer
   │     ├── FileDialog, ScrollView, Viewport, DockingView, Flex, Space
@@ -169,6 +169,15 @@ toggleClass(cls: string): void
 setClass(cls: string, set?: boolean): this
 ```
 
+A component gets one class for each class of its chain: its name in lower case, after the prefix that class
+declares itself with `static classPrefix` (not the one of its parent), then `x4`. Every component of x4 declares
+`static classPrefix = "x4"` (a Button: `x4button x4`); a class of the application declares its own, or none.
+
+```ts
+class Avatar extends Image { static classPrefix = "my"; }     // classes: myavatar x4image x4
+class Badge extends Label { }                                  // classes: badge x4label x4
+```
+
 ### HTML attributes & ARIA
 
 ```ts
@@ -218,12 +227,16 @@ queryAll(selector: string): Component[]
 firstChild<T>(): T;  lastChild<T>(): T
 nextElement<T>(): T; prevElement<T>(): T
 parentElement<T>(cls?: Constructor<T>): T
+closest<T>(selector: string): T             // this one or an ancestor whose element matches the css selector; null if none
+contains(other: Component | Node): boolean  // other (a node, or the element of a component) is the element of this one or inside it
 childCount(): number
 enumChildComponents(recursive: boolean): Component[]
 enumChildNodes(recursive: boolean): Node[]
 visitChildren(cb: (el: Component) => boolean): void
 static parentElement<T>(dom: Node, cls?: Constructor<T>): T   // starts at the parent of dom, not at dom:
                                                                // test componentFromDOM(dom) first for the component of dom itself
+static closest<T>(dom: Element, selector: string): T           // starts at dom itself: in a click handler,
+                                                               // Component.closest(ev.target as Element, '.item')
 ```
 
 ### Visibility / state / focus / geometry
@@ -291,6 +304,11 @@ static fireGlobal(msg: string, params?: any): void
 static setTheme(name: string): void         // the class x4theme-<name> on <html>: "" the light theme (default, no class),
                                             // "dark" the dark theme of x4, another name a theme of the application
 static getTheme(): string                   // "" for the light theme, "dark", or the name given to setTheme
+static setLocale(locale: string, currency?: string): void   // forces the locale of the formats (formatNumber, formatMoney,
+                                            // formatDate, formatDateTime) over the one of the language; null: the language's
+                                            // again. currency: "EUR" by default, kept when not given
+static getLocale(): string                  // the forced one, else _tr.global.locale ("fr-FR" for fr, "en-US" for en)
+static getCurrency(): string
 focusNext(next: boolean): boolean
 addShortcut(keys: string | string[], callback: (ev: KeyboardEvent) => void, options?: ShortcutOptions): void   // see Shortcuts
 setupSocketMessaging(path?: string, looseCallback?: () => void): void
@@ -313,6 +331,9 @@ class VBox<P, E> extends Box<P, E>
 interface BoxProps extends ComponentProps { tag?: string }
 ```
 
+A Box is a `<div>` (another element with `tag`). Disabled (`disable()`, the prop `disabled`), its content is inert
+(no click, no focus, no input) and faded by `--box-disabled-opacity` (0.5); a disabled Box in it is not faded twice.
+
 ### `Box.refs` — typed directory of the children to reach again later
 
 Only a `Box` has `refs`: a class derived from `Component` (not from `Box`) has none, and `this.refs.x = ...` there
@@ -597,6 +618,41 @@ class Rating extends HBox {
 }
 ```
 
+### `Timeline` — events on a line, each with its icon in a round mark
+
+```ts
+interface TimelineItem {
+  icon?: string                            // in the round mark
+  title: string | UnsafeHtml               // in bold
+  text?: string | UnsafeHtml               // the sentence under it, in grey
+  date?: Date                              // written relative to now, in the locale: "il y a 2 heures", "yesterday"; none: no time shown
+  done?: boolean                           // the mark in the accent; else a grey mark
+}
+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 (the mark and the line stay)
+  click?: EventCallback<EvClick>           // a click anywhere in an event: ev.context is its TimelineItem
+}
+interface TimelineEvents extends ComponentEvents { click: EvClick }
+class Timeline extends Component<TimelineProps, TimelineEvents> {
+  setItems(items: TimelineItem[]): void    // the relative times are written here, not updated after
+}
+// the line to the next mark: in the accent when the next event is done, dashed after an event not done
+// CSS vars: --timeline-done-color --timeline-done-icon-color --timeline-todo-color --timeline-todo-icon-color
+//           --timeline-title-color --timeline-text-color --timeline-time-color
+```
+
+```ts
+new Timeline({
+  items: [
+    { icon: branch, title: 'New branch', text: 'fix-notifications, from master', date: created, done: true },
+    { icon: review, title: 'Code review', text: 'Waiting for a reviewer' },
+  ],
+  click: ev => this.openStep(ev.context as TimelineItem),
+})
+```
+
 ---
 
 ## Input components
@@ -1150,8 +1206,9 @@ class PromptBox extends Dialog {
 class ProgressionBox extends Dialog {
   constructor(title: string)
   addText(text: string|UnsafeHtml, perc: number): void
-  addError(text: string|UnsafeHtml, perc: number): void     // its icon, in red; the title bar in red until clear()
-  addWarning(text: string|UnsafeHtml, perc: number): void   // its icon, in orange
+  addError(text: string|UnsafeHtml, perc: number): void     // red, on a light red line, a red bar on its left;
+                                                            // the title bar in red until clear()
+  addWarning(text: string|UnsafeHtml, perc: number): void   // the same in orange
   addSection(title: string|UnsafeHtml, perc: number): void  // a section (<details>, open): the lines that follow go
                                            // in it; a click on its title folds it; its title has the icon
                                            // of the worst of its lines. Without any, the lines go in the log
@@ -1162,10 +1219,11 @@ class ProgressionBox extends Dialog {
                                            // from _tr.global.progression), the icon of the worst;
                                            // else it counts "OK (5s)" and closes the box at 0
 }
-// ProgressionBox: its lines in a <pre>, 10 lines high, scrolled both ways (the box keeps its size);
+// ProgressionBox: its lines in a <pre> in a fixed font, a <div> each (class "line", plus "error" or "warning"),
+//   10 lines high, scrolled both ways (the box keeps its size), every line as wide as the longest one;
 //   a string is text, an UnsafeHtml html. Ctrl+A in the lines selects them only (a folded section too).
-//   Colours: --msgbox-log-background, -border, -border-focus, -error-color, -warning-color,
-//   -scrollbar (the thumb of its scroll bars; their track is its background).
+//   Colours: --msgbox-log-background, -border, -border-focus, -error-color, -error-background,
+//   -warning-color, -warning-background, -scrollbar (the thumb of its scroll bars; their track is its background).
 ```
 
 ### `Notification`
@@ -1188,7 +1246,8 @@ class Notification extends Popup { display(time_in_s?: number): void }   // 0: u
 ```ts
 type FormValues = Record<string, any>
 interface FormProps extends BoxProps { autoComplete?: boolean }
-class Form extends Box {
+class Form<P extends FormProps = FormProps, E extends ComponentEvents = ComponentEvents> extends Box<P, E> {
+  // a class derived from Form declares its events: class EntryForm extends Form<EntryProps, EntryEvents>
   setValues(values: FormValues): void
   getValues<T extends FormValues>(): T
   setAutoComplete(on?: boolean): void      // attribute on the <form>: fields without their own follow it, added later too
@@ -1285,9 +1344,11 @@ class VSplitBox extends VBox               // panels stacked, resizable height:
 // new HSplitBox( { content: [ new Treeview( { width: 250 } ), new Panel( { flex: 1 } ) ] } )
 
 // Low level: only place sizers by hand when a SplitBox does not fit (popup edges, header cells...).
-class CSizer extends Component             // base splitter
+class CSizer extends Component             // base splitter; events start, resize { size, width, height }, stop
 class HSizer extends CSizer                // horizontal splitter
 class VSizer extends CSizer                // vertical splitter
+// A pointercancel (a touch taken by the browser) ends the resize as a pointerup does: stop is fired.
+// The columns of a Gridview or a Spreadsheet are 16px wide at least (the min-width of a cell).
 class ScrollView extends Component { getViewport(): Component }
 class Viewport extends Component
 class Canvas extends Component { getContext(): CanvasRenderingContext2D; paint(): void }
@@ -1431,6 +1492,7 @@ component.addShortcut(keys, callback, options?)         // a view: while the foc
 Application.instance().addShortcut(keys, callback, options?)   // the whole application, wherever the focus is
 
 shortcutText(keys: string): string                     // for a tooltip or a menu: "Ctrl+Z", "⌘Z" on a Mac
+isMac: boolean                                          // true on a Mac, an iPhone or an iPad: Mod is Cmd there
 
 class Shortcuts {                                       // the list itself; rarely used directly
   add(keys: string | string[], callback: (ev: KeyboardEvent) => void, options?: ShortcutOptions): void
@@ -1552,10 +1614,18 @@ isLanguage(name: string): boolean
 //   search search_tip required_field invalid_format invalid_email invalid_number invalid_date
 //   empty_list err_403 property value copy cut paste filedrop
 //   diff_date_seconds/minutes/hours, date_input_formats, date_format, date_time_format,
+//   locale ("fr-FR", "en-US", "es-ES", "de-DE": the formats of numbers, amounts, dates),
 //   day_short[] day_long[] month_short[] month_long[], keyboard.{next,numeric,alpha},
-//   settings.{search,nomatch}
+//   settings.{search,nomatch}, progression.{error,errors,warning,warnings}
+getCurrentLocale(): string; getCurrentCurrency(): string   // as Application.getLocale / getCurrency
 ```
 
+The language gives the texts and the locale of the formats: `selectLanguage("en")` changes both. A regional
+variant is a language based on another: `createLanguage("fr-ch", "fr")`, `addTranslation("fr-ch", { global: { locale: "fr-CH" } })`.
+`Application.setLocale(locale, currency)` forces the locale over the language's. The fields of date and the
+Calendar follow the patterns of the language (`date_format`...), not the locale. A field of type number is shown
+by the browser, in its own locale, whatever this one.
+
 ---
 
 ## Theme (`themes.scss`)
@@ -1629,7 +1699,14 @@ pascalCase(s): string; camelCase(s): string; clamp<T>(v, min, max): T
 measureText(str, size, bold?): number      // width in Helvetica, from core_pdf (see PDF)
 
 // Dates
-date_format(date, options?): string       // options not read yet: formatIntlDate(date)
+date_format(date, options?): string       // options: Intl.DateTimeFormat in the locale; without: formatIntlDate(date)
+
+// Formats in the current locale (Application.setLocale, else the one of the language), Intl made once by locale
+formatNumber(value, decimals?, grouping = true): string   // "1 234,5" in fr-FR; decimals: the most shown
+formatMoney(value): string                 // "1 234,50 €": the currency of Application.getCurrency()
+formatDate(date): string                   // "22/10/2026"
+formatDateTime(date): string               // "22/10/2026 14:05"
+// Gridview and Spreadsheet format their columns number, money, date, date-time with them (a formatter comes first)
 date_diff(date1, date2, options?): string   // "30 secondes", "5 minutes", "2 heures 5 minutes" (either order); options not read
 date_to_sql(date, withHours): string; date_sql_utc(date): Date
 date_hash(date): number; date_clone(date): Date
@@ -1648,9 +1725,6 @@ getSystemMetrics(part: "scrollbar"|"zoom"): number
 setWaitCursor(wait: boolean): void; beep(): void
 isUnitLess(name): boolean; isFeatureAvailable(name: "eyedropper"): boolean
 
-// Class decorator
-class_ns(ns: string): ClassDecorator
-const x4_class_ns_sym: symbol
 const unitless                              // set of unitless CSS props
 
 // System interfaces

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "x4js",
-  "version": "2.3.25",
+  "version": "2.3.27",
   "type": "module",
   "main": "src/x4.ts",
   "module": "src/x4.ts",

package/src/components/autocomplete/autocomplete.ts

@@ -16,7 +16,7 @@
 
 import { Component, ComponentEvent, ComponentEvents, EvChange } from '../../core/component';
 import { EventCallback } from '../../core/core_events';
-import { class_ns, kbNav } from '../../core/core_tools';
+import { kbNav } from '../../core/core_tools';
 
 import { HBox } from '../boxes/boxes';
 import { DropdownList } from '../combobox/combobox';
@@ -96,8 +96,8 @@ const render_id_item = ( item: ListItem ) => {
  * })
  */
 
-@class_ns( "x4" )
 export class AutoComplete extends TextEdit<AutoCompleteEvents> {
+	static classPrefix = "x4";
 
 	private _popup: DropdownList;
 
@@ -268,7 +268,7 @@ export class AutoComplete extends TextEdit<AutoCompleteEvents> {
 	private _on_focusout( ev: FocusEvent ) {
 		// focus is moving inside the control
 		const to = ev.relatedTarget as Node;
-		if( to && this.dom.contains( to ) ) {
+		if( to && this.contains( to ) ) {
 			return;
 		}
 

package/src/components/boxes/boxes.module.scss

@@ -16,16 +16,30 @@
 
 @use "../shared.scss";
 
+:root {
+	--box-disabled-opacity: 0.5;		// a disabled Box: its content faded
+}
+
 .x4box {
-	// reset fieldset
+	// reset a box built with tag: "fieldset"
 	margin: 0;
-	padding: 0;	
+	padding: 0;
 	border: none;
 
 	min-width: 0;
 	min-height: 0;
 	flex-shrink: 0;
 	align-self: stretch;
+
+	// disabled: its content inert (enable) and faded
+	&[disabled] {
+		opacity: var( --box-disabled-opacity );
+
+		// a disabled Box in a disabled Box: opacity 1 for it, so faded once, not twice
+		.x4box[disabled] {
+			opacity: 1;
+		}
+	}
 }
 
 .x4hbox {

package/src/components/boxes/boxes.ts

@@ -14,7 +14,7 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-import { asap, class_ns, isArray, isNumber } from '../../core/core_tools';
+import { asap, isArray, isNumber } from '../../core/core_tools';
 import { Component, ComponentEvents, ComponentProps, EvSelectionChange } from "../../core/component"
 import { EventCallback } from '../../core/core_events';
 import { HSizer, VSizer } from '../sizers/sizer';
@@ -28,6 +28,14 @@ export interface BoxProps extends ComponentProps {
 
 /**
 * A generic container component for grouping and laying out child components.
+ *
+ * A <div>. Disabled (disable( ), the prop disabled), its content is inert (no click, no
+ * focus, no input) and faded by --box-disabled-opacity.
+ *
+ * @cssvar
+ * ```
+ * --box-disabled-opacity
+ * ```
  *
  * The `refs` object is a typed directory of the children you need to reach
  * again later. Assign a child to `refs` as you build the content: the
@@ -60,11 +68,12 @@ export interface BoxProps extends ComponentProps {
  * 
  */
 
-@class_ns( "x4" )
 export class Box<P extends BoxProps=BoxProps,E extends ComponentEvents=ComponentEvents> extends Component<P,E> {
+	static classPrefix = "x4";
+
 	protected refs: Record<string,Component> = {};
 	constructor( props: P ) {
-		super( { tag: "fieldset", ...props } );
+		super( { tag: "div", ...props } );
 	}
 }
 
@@ -74,8 +83,9 @@ export class Box<P extends BoxProps=BoxProps,E extends ComponentEvents=Component
  * Arranges child components in a horizontal line.
  */
 
-@class_ns( "x4" )
 export class HBox<P extends BoxProps=BoxProps,E extends ComponentEvents=ComponentEvents> extends Box<P,E> {
+	static classPrefix = "x4";
+
 }
 
 /**
@@ -84,8 +94,9 @@ export class HBox<P extends BoxProps=BoxProps,E extends ComponentEvents=Componen
  * The CSS class for this component is automatically generated as `x4vbox`.
  */
 
-@class_ns( "x4" )
 export class VBox<P extends BoxProps=BoxProps,E extends ComponentEvents=ComponentEvents> extends Box<P,E> {
+	static classPrefix = "x4";
+
 	constructor( p: P ) {
 		super( p );
 	}
@@ -136,8 +147,9 @@ function split_content( panels: Component[], horz: boolean ) {
  * })
  */
 
-@class_ns( "x4" )
 export class HSplitBox<P extends SplitBoxProps=SplitBoxProps,E extends ComponentEvents=ComponentEvents> extends HBox<P,E> {
+	static classPrefix = "x4";
+
 	constructor( props: P ) {
 		super( { ...props, content: split_content( props.content, true ) } );
 	}
@@ -149,8 +161,9 @@ export class HSplitBox<P extends SplitBoxProps=SplitBoxProps,E extends Component
  * The CSS class for this component is automatically generated as `x4vsplitbox`.
  */
 
-@class_ns( "x4" )
 export class VSplitBox<P extends SplitBoxProps=SplitBoxProps,E extends ComponentEvents=ComponentEvents> extends VBox<P,E> {
+	static classPrefix = "x4";
+
 	constructor( props: P ) {
 		super( { ...props, content: split_content( props.content, false ) } );
 	}
@@ -206,8 +219,8 @@ interface StackItemEx extends StackItem {
  * The CSS class for this component is automatically generated as `x4stackbox`.
  */
 
-@class_ns( "x4" )
 export class StackBox<P extends StackBoxProps = StackBoxProps, E extends StackeBoxEvents = StackeBoxEvents>  extends Box<StackBoxProps,StackeBoxEvents> {
+	static classPrefix = "x4";
 	
 	protected _items: StackItemEx[];
 	protected _cur: number;
@@ -371,8 +384,8 @@ export class StackBox<P extends StackBoxProps = StackBoxProps, E extends StackeB
  * The CSS class for this component is automatically generated as `x4assistbox`.
  */
 
-@class_ns( "x4" )
 export class AssistBox extends StackBox {
+	static classPrefix = "x4";
 
 	/**
      * Selects the next or previous page in the stack.
@@ -433,8 +446,8 @@ export interface GridBoxProps extends Omit<BoxProps,"content"> {
  * Auto-generates CSS class: `x4gridbox`.
  */
 
-@class_ns("x4")
 export class GridBox<P extends GridBoxProps=GridBoxProps,E extends ComponentEvents=ComponentEvents> extends Box<P,E> {
+	static classPrefix = "x4";
 
 	constructor( props: P ) {
 		super( props );
@@ -543,8 +556,8 @@ interface MasonryProps extends Omit<BoxProps,"content"> {
  * Auto-generates CSS class: `x4masonrybox`.
  */
 
-@class_ns("x4")
 export class MasonryBox extends Box<MasonryProps> {
+	static classPrefix = "x4";
 
 	constructor(props: MasonryProps ) {
 		super(props);

package/src/components/breadcrumb/breadcrumb.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 { parseRoute, Router } from '../../core/core_router';
 
 import { BoxProps, Button, HBox, Icon } from '../components';
@@ -64,8 +63,8 @@ interface BreadcrumbsProps extends BoxProps{
  * ```
  */
 
-@class_ns( "x4" )
 export class Breadcrumbs extends HBox<BreadcrumbsProps,BreadcrumbEvents> {
+	static classPrefix = "x4";
 
 	constructor( props: BreadcrumbsProps ) {
 		super( props );

package/src/components/btngroup/btngroup.ts

@@ -16,7 +16,7 @@
 
 import { Component, ComponentEvents, ComponentProps, Flex, Space } from '../../core/component';
 import { EventCallback } from '../../core/core_events';
-import { class_ns, isString } from '../../core/core_tools';
+import { isString } from '../../core/core_tools';
 import { _tr } from '../../core/core_i18n'
 
 import { Button } from '../button/button';
@@ -64,8 +64,8 @@ interface BtnGroupProps extends Omit<ComponentProps,"content"> {
  * a packed group draws its buttons with the --ol-button-* variables of Button
  */
 
-@class_ns( "x4" )
 export class BtnGroup extends Box<BtnGroupProps,BtnGroupEvents> {
+	static classPrefix = "x4";
 
 	constructor( props: BtnGroupProps ) {
 		super( props );

package/src/components/button/button.ts

@@ -16,7 +16,7 @@
 
 import { Component, ComponentEvents, ComponentProps, EvClick } from "../../core/component"
 import { EventCallback } from '../../core/core_events';
-import { class_ns, isFunction, UnsafeHtml } from '../../core/core_tools';
+import { isFunction, UnsafeHtml } from '../../core/core_tools';
 
 import { Icon } from "../icon/icon"
 import { Menu, MenuElement } from '../menu/menu';
@@ -113,8 +113,8 @@ export interface ButtonProps extends ComponentProps {
  * the --ol-button-* variables are the ones of the outline buttons
  */
 
-@class_ns( "x4" )
 export class Button extends Component<ButtonProps,ButtonEvents> {
+	static classPrefix = "x4";
 
 	#text: Component;
 

package/src/components/calendar/calendar.ts

@@ -15,7 +15,7 @@
  **/
 
 import { Component, ComponentEvents, ComponentProps, EvChange, Flex } from '../../core/component'
-import { class_ns, date_clone, date_hash, formatIntlDate, Point, unsafeHtml } from "../../core/core_tools"
+import { date_clone, date_hash, formatIntlDate, Point, unsafeHtml } from "../../core/core_tools"
 import { _tr } from '../../core/core_i18n';
 import { EventCallback } from '../../core/core_events';
 
@@ -70,9 +70,10 @@ interface CalendarProps extends ComponentProps {
  * ```
  */
 
-@class_ns( "x4" )
 export class Calendar extends VBox<CalendarProps, CalendarEventMap>
 {
+	static classPrefix = "x4";
+
 	private m_date: Date;
 
 	constructor(props: CalendarProps) {
@@ -333,6 +334,7 @@ export class Calendar extends VBox<CalendarProps, CalendarEventMap>
  * /
 
 export class PopupCalendar extends Popup {
+	static classPrefix = "x4";
 
 	m_cal: Calendar;
 
@@ -356,7 +358,7 @@ export class PopupCalendar extends Popup {
 		let newfocus = <HTMLElement>e.target;
 
 		// child of this: ok
-		if (this.dom.contains(newfocus)) {
+		if (this.contains(newfocus)) {
 			return;
 		}
 

package/src/components/canvas/canvas.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, ComponentEvent, ComponentEvents, ComponentProps } from '../../core/component';
 import { EventCallback } from "../../core/core_events"
 import { CanvasEx, createPainter } from './canvas_ex';
@@ -45,8 +44,8 @@ export interface CanvasProps extends ComponentProps {
  * Standard Canvas
  */
 
-@class_ns( "x4" )
 export class Canvas extends Component<CanvasProps, CanvasEventMap> {
+	static classPrefix = "x4";
 
 	private m_iwidth: number = -1;
 	private m_iheight: number = -1;

package/src/components/chart/chart.ts

@@ -17,7 +17,7 @@
 import { ComponentEvent, ComponentEvents } from '../../core/component';
 import { EventCallback } from '../../core/core_events';
 import { SvgBuilder, SvgComponent, SvgGroup, SvgPath, SvgProps, SvgShape } from '../../core/core_svg';
-import { class_ns, clamp, IRect, isNumber, sanitizeHtml } from '../../core/core_tools';
+import { clamp, formatNumber, IRect, isNumber, sanitizeHtml } from '../../core/core_tools';
 
 import "./chart.module.scss"
 
@@ -91,7 +91,7 @@ export function chartFormatUnit( value: number, decimals = 2 ) {
 
 	const pow = Math.pow(10, decimals);
 	const roundedValue = Math.round(scaledValue * pow) / pow;
-	const text = roundedValue % 1 == 0 ? `${roundedValue}` : roundedValue.toFixed(decimals).replace(/\.?0+$/, '');
+	const text = formatNumber( roundedValue, decimals );		// the decimal separator of the locale
 
 	return ( value<0 && roundedValue!=0 ? '-' : '' ) + text + units[unitIndex];
 }
@@ -234,8 +234,8 @@ function drawBar( grp: SvgGroup, x: number, w: number, y0: number, y1: number, r
  * ```
  */
 
-@class_ns( "x4" )
 export class Chart extends SvgComponent<ChartProps,ChartEvents> {
+	static classPrefix = "x4";
 
 	private _type: ChartType;
 	private _series: ChartSerie[];
@@ -264,7 +264,7 @@ export class Chart extends SvgComponent<ChartProps,ChartEvents> {
 
 		this.addDOMEvent( "click", ( e ) => {
 			const el = ( e.target as Element ).closest( "[data-index]" );
-			if( el && this.dom.contains( el ) ) {
+			if( el && this.contains( el ) ) {
 				const serie = parseInt( el.getAttribute( "data-serie" ) );
 				const index = parseInt( el.getAttribute( "data-index" ) );
 				this.fire( "click", { serie, index, value: this._series[serie]?.values[index] } );

package/src/components/checkbox/checkbox.ts

@@ -3,7 +3,6 @@ import { EventCallback } from '../../core/core_events';
 
 import { Input } from '../input/input';
 import { Label } from '../label/label';
-import { class_ns } from '../../core/core_tools';
 
 import icons from "../assets/icons";
 
@@ -45,8 +44,9 @@ interface CheckboxProps extends ComponentProps {
  * ```
  */
 
-@class_ns( "x4" )
 export class Checkbox extends Component<CheckboxProps,CheckBoxEvents> {
+	static classPrefix = "x4";
+
 	readonly _input: Input;
 
 	/**

package/src/components/colorinput/colorinput.ts

@@ -16,7 +16,7 @@
 
 import { Component, ComponentEvents } from '../../core/component';
 import { EventCallback } from '../../core/core_events';
-import { isFeatureAvailable, class_ns, isFunction, IComponentInterface, IFormElement } from '../../core/core_tools';
+import { isFeatureAvailable, isFunction, IComponentInterface, IFormElement } from '../../core/core_tools';
 import { Color } from '../../core/core_colors';
 
 import { BoxProps, HBox } from '../boxes/boxes';
@@ -84,8 +84,9 @@ interface ColorInputEvents extends ComponentEvents {
  * ```
  */
 
-@class_ns( "x4" )
 export class ColorInput extends HBox<ColorInputProps,ColorInputEvents> {
+	static classPrefix = "x4";
+
 	static "$cls-ns" = "x4";
 
 	private _color: Color;				// null: no color

package/src/components/colorpicker/colorpicker.ts

@@ -15,7 +15,7 @@
  **/
 
 import { Color, Hsv } from '../../core/core_colors';
-import { Rect, clamp, class_ns, isFeatureAvailable } from '../../core/core_tools';
+import { Rect, clamp, isFeatureAvailable } from '../../core/core_tools';
 
 import { Component, ComponentEvent, ComponentEvents, ComponentProps, EvChange } from '../../core/component';
 import { Box, BoxProps, HBox, VBox } from '../boxes/boxes';
@@ -58,8 +58,8 @@ interface CommonEvents extends ComponentEvents {
  * 
  */
 
-@class_ns( "x4" )
 export class Saturation extends Box<BoxProps,CommonEvents> {
+	static classPrefix = "x4";
 
 	private mdown = false;
 	private irect: Rect;
@@ -191,8 +191,8 @@ export class Saturation extends Box<BoxProps,CommonEvents> {
  * @internal
  */
 
-@class_ns( "x4" )
 class HueSlider extends Box<BoxProps,CommonEvents> {
+	static classPrefix = "x4";
 
 	private thumb: Component;
 	private hsv: Hsv = { hue: 1, saturation: 1, value: 1, alpha: 1 };
@@ -271,8 +271,8 @@ class HueSlider extends Box<BoxProps,CommonEvents> {
  * @internal
  */
 
-@class_ns( "x4" )
 class AlphaSlider extends Box<BoxProps,CommonEvents> {
+	static classPrefix = "x4";
 	
 	private thumb: Component;
 	private color: Component;
@@ -389,8 +389,8 @@ interface ColorPickerChangeEvents extends ComponentEvents {
  * ```
  */
 
-@class_ns( "x4" )
 export class ColorPicker extends VBox<ColorPickerProps,ColorPickerChangeEvents> {
+	static classPrefix = "x4";
 
 	private _base: Color;
 	private _hsv: Hsv;

package/src/components/combobox/combobox.ts

@@ -15,7 +15,7 @@
  **/
 
 import { Component, ComponentEvents, ComponentProps, EvClick, EvSelectionChange, makeUniqueComponentId } from '../../core/component';
-import { class_ns, IComponentInterface, IFormElement, kbNav } from '../../core/core_tools';
+import { IComponentInterface, IFormElement, kbNav } from '../../core/core_tools';
 import { EventCallback } from '../../core/core_events';
 
 import { Listbox, ListboxID, ListItem } from '../listbox/listbox';
@@ -42,8 +42,8 @@ interface DropdownProps extends Omit<PopupProps,"content"> {
 }
 
 
-@class_ns( "x4" )
 export class DropdownList extends Popup<DropdownProps,DropdownEvents> {
+	static classPrefix = "x4";
 
 	private _list: Listbox;
 
@@ -108,8 +108,8 @@ interface ComboboxProps extends Omit<ComponentProps,"content"> {
  * ```
  */
 
-@class_ns( "x4" )
 export class Combobox extends Component<ComboboxProps,ComboboxEvents> {
+	static classPrefix = "x4";
 
 	private _popup: DropdownList;
 	//private _label: Label;