x4js 2.3.25 → 2.3.27

package/src/core/component.ts

@@ -14,7 +14,7 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-import { isArray, UnsafeHtml, isNumber, Rect, Constructor, class_ns, x4_class_ns_sym } from './core_tools';
+import { isArray, UnsafeHtml, isNumber, Rect, Constructor } from './core_tools';
 import { CoreElement } from './core_element';
 import { AriaAttributes, unitless } from './core_styles';
 import { CoreEvent, EventMap } from './core_events';
@@ -31,17 +31,19 @@ const FRAGMENT = Symbol( "fragment" );
 const RE_NUMBER = /^-?\d+(\.\d*)?$/;
 
 /**
- * you can change css classname prefix by adding
+ * the css classes of a component: the name of each class of its chain, in lower case, after
+ * the prefix that class declares itself (not the one of its parent):
  *
  *  ```
- * static "$cls-ns" = "<your prefix>";
+ * static classPrefix = "<your prefix>";
  * ```
- * 
- * to your class to avoid autogenerated css class names conflicts
+ *
+ * every component of x4 declares "x4" (x4button...); the classes of an application have
+ * none unless they declare one
  */
 
 function genClassNames( x: any ): string[] {
-	
+
 	let self = Object.getPrototypeOf(x);
 	if( self.constructor==Component ) {
 		return ["x4-comp","x4"];
@@ -50,8 +52,8 @@ function genClassNames( x: any ): string[] {
     const classes = [];
 	while (self && self.constructor !== Component ) {
 		const clsname:string = self.constructor.name;
-		const clsns: string = Object.prototype.hasOwnProperty.call(self.constructor,x4_class_ns_sym) ? self.constructor[x4_class_ns_sym] :  "";
-		classes.push( clsns+clsname.toLowerCase() );
+		const prefix: string = Object.prototype.hasOwnProperty.call(self.constructor,"classPrefix") ? self.constructor.classPrefix :  "";
+		classes.push( prefix+clsname.toLowerCase() );
 		self = Object.getPrototypeOf(self);
 	}
 
@@ -156,9 +158,9 @@ export interface ComponentEvents extends EventMap {
  * ```
  */
 
-@class_ns("x4")
 export class Component<P extends ComponentProps = ComponentProps, E extends ComponentEvents = ComponentEvents> 
 		extends CoreElement<E> {
+	static classPrefix = "x4";
 
 	/** The underlying DOM element of the component. */
     readonly dom: Element;
@@ -907,19 +909,6 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 		this.setAttribute( "disabled", !ena ? 'true' : null );
 		this.setAttribute( "inert", !ena ? 'true' : null );
 
-		/*
-		boxes are now fieldset, this is native
-		if( this.dom instanceof HTMLInputElement || this.dom instanceof HTMLButtonElement ) {
-			this.dom.disabled = !ena;
-		}
-
-		// propagate enable state to all input children
-		const nodes = this.enumChildComponents( true );
-		nodes.forEach( x => {
-			x.enable( ena );
-		});
-		*/
-
 		return this;
 	}
 
@@ -970,7 +959,24 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
      */
 
 	parentElement<T extends Component>( cls?: Constructor<T> ): T {
-		return Component.parentElement<T>( this.dom, cls );	
+		return Component.parentElement<T>( this.dom, cls );
+	}
+
+	/**
+	 * The nearest component whose element matches a css selector: this one, or one of its ancestors.
+	 * @returns null when there is none
+	 */
+
+	closest<T extends Component = Component>( selector: string ): T {
+		return Component.closest<T>( this.dom, selector );
+	}
+
+	/**
+	 * true when a node, or the element of a component, is the element of this one or inside it
+	 */
+
+	contains( other: Component | Node ): boolean {
+		return this.dom.contains( other instanceof Component ? other.dom : other );
 	}
 
 	/**
@@ -1003,10 +1009,22 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 
 			dom = dom.parentElement;
 		}
-		
+
 		return null;
 	}
 
+	/**
+	 * The nearest component whose element matches a css selector: the one of dom, or one of its ancestors.
+	 * @returns null when there is none
+	 * @example
+	 * // in a click handler: the item hit, wherever the click is in it
+	 * const item = Component.closest( ev.target as Element, ".x4timeline > .item" );
+	 */
+
+	static closest<T extends Component = Component>( dom: Element, selector: string ): T {
+		return componentFromDOM<T>( dom.closest( selector ) );
+	}
+
 	/**
      * Returns the first child element as a Component instance.
      * @returns The first child component, or `null` if none exists.
@@ -1294,8 +1312,9 @@ export function wrapDOM( el: HTMLElement ): Component {
  * Automatically generates CSS class: `x4flex`.
  */
 
-@class_ns( "x4" )
 export class Flex extends Component {
+	static classPrefix = "x4";
+
 	constructor( ) {
 		super({})
 	}
@@ -1311,8 +1330,9 @@ export class Flex extends Component {
  * ```
  */
 
-@class_ns( "x4" )
 export class Space extends Component {
+	static classPrefix = "x4";
+
 	constructor( width?: number|string, cls?: string ) {
 		super( { width, cls } )
 	}

package/src/core/core_application.ts

@@ -19,6 +19,7 @@ import { CoreElement } from './core_element';
 import { CoreEvent, EventMap } from './core_events';
 import { asap, getFocusableElements, ITabHandler } from './core_tools';
 import { Shortcuts, ShortcutCallback, ShortcutOptions } from './core_shortcuts';
+import { _setLocale, getCurrentLocale, getCurrentCurrency } from './core_i18n';
 
 const socket_sent = Symbol( 'socket' );
 
@@ -249,7 +250,34 @@ export class Application<E extends ApplicationEvents = ApplicationEvents> extend
 	}
 
 	/**
-	 * 
+	 * Forces the locale of the formats of numbers, amounts and dates (formatNumber, formatMoney,
+	 * formatDate, formatDateTime), and the currency of the amounts. Without it, the locale is the one of the language (`_tr.global.locale`: "fr-FR"
+	 * for fr, "en-US" for en...) and the currency "EUR".
+	 * A field of type number is shown by the browser, in its own locale, whatever this one.
+	 * @param locale - "fr-CH", "en-GB"...; null: the one of the language again
+	 * @param currency - "CHF", "USD"...; not given: the currency does not change
+	 * @example
+	 * Application.setLocale( "fr-CH", "CHF" );
+	 */
+
+	static setLocale( locale: string, currency?: string ) {
+		_setLocale( locale, currency );
+	}
+
+	/** The locale of the formats: the one forced by setLocale, else the one of the language. */
+
+	static getLocale( ): string {
+		return getCurrentLocale( );
+	}
+
+	/** The currency of the amounts: "EUR" unless setLocale gave another. */
+
+	static getCurrency( ): string {
+		return getCurrentCurrency( );
+	}
+
+	/**
+	 *
 	 */
 
 	private _setupKeyboard( ) {

package/src/core/core_i18n.ts

@@ -255,6 +255,41 @@ export function getCurrentLanguage( ): string {
 	return current.name;
 }
 
+// :: LOCALE ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
+
+// the formats of numbers, amounts and dates: the locale of the language (_tr.global.locale),
+// unless one is forced (Application.setLocale); the currency of the amounts
+let forced_locale: string = null;
+let currency = "EUR";
+
+/**
+ * @internal the locale forced (null: the one of the language), the currency when given
+ */
+
+export function _setLocale( locale: string, cur?: string ) {
+	forced_locale = locale || null;
+	if( cur ) {
+		currency = cur;
+	}
+}
+
+/**
+ * the locale of the formats: the one forced by Application.setLocale, else the one of the
+ * language ("fr-FR" for fr)
+ */
+
+export function getCurrentLocale( ): string {
+	return forced_locale ?? _tr.global.locale ?? "fr-FR";
+}
+
+/**
+ * the currency of the amounts: "EUR" unless Application.setLocale gave another
+ */
+
+export function getCurrentCurrency( ): string {
+	return currency;
+}
+
 /**
  * 
  */
@@ -308,6 +343,7 @@ let fr = {
 		date_input_formats: 'd/m/y|d.m.y|d m y|d-m-y|dmy',
 		date_format: 'D/M/Y',
         date_time_format: 'D/M/Y H:I:S',
+		locale: 'fr-FR',		// the formats of numbers, amounts, dates (Intl)
 
 		day_short: [ 'dim', 'lun', 'mar', 'mer', 'jeu', 'ven', 'sam' ],
 		day_long: [ 'dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi' ],
@@ -385,6 +421,7 @@ let en = {
 		date_input_formats: 'm/d/y|m.d.y|m d y|m-d-y|mdy',
 		date_format: 'M/D/Y',
         date_time_format: 'M/D/Y H:I:S',
+		locale: 'en-US',		// the formats of numbers, amounts, dates (Intl)
 
 		day_short: [ 'sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat' ],
 		day_long: [ 'sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday' ],
@@ -462,6 +499,7 @@ let es = {
 		date_input_formats: 'd/m/y|d.m.y|d m y|d-m-y|dmy',
 		date_format: 'D/M/Y',
         date_time_format: 'D/M/Y H:I:S',
+		locale: 'es-ES',		// the formats of numbers, amounts, dates (Intl)
 
 		day_short: [ 'dom', 'lun', 'mar', 'mié', 'jue', 'vie', 'sáb' ],
 		day_long: [ 'domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado' ],
@@ -539,6 +577,7 @@ let de = {
 		date_input_formats: 'd.m.y|d/m/y|d m y|d-m-y|dmy',
 		date_format: 'D.M.Y',
         date_time_format: 'D.M.Y H:I:S',
+		locale: 'de-DE',		// the formats of numbers, amounts, dates (Intl)
 
 		day_short: [ 'So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa' ],
 		day_long: [ 'Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag' ],

package/src/core/core_shortcuts.ts

@@ -51,7 +51,8 @@ interface Keys {
 	key: string;
 }
 
-const isMac = /mac|iphone|ipad/i.test( navigator.platform ?? "" );
+/** true on a Mac, an iPhone or an iPad: Mod is Cmd there */
+export const isMac = /mac|iphone|ipad/i.test( navigator.platform ?? "" );
 
 /**
  * "Shift+Mod+K" -> shift, ctrl (cmd on a Mac), k

package/src/core/core_svg.ts

@@ -1013,6 +1013,7 @@ export interface SvgProps extends ComponentProps {
  */
 
 export class SvgComponent<P extends SvgProps = SvgProps, E extends ComponentEvents = ComponentEvents> extends Component<P,E> {
+	static classPrefix = "x4";
 
 	/**
 	 * Creates an instance of `SvgComponent`.

package/src/core/core_tools.ts

@@ -14,7 +14,7 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-import { _tr } from "./core_i18n.js";
+import { _tr, _setLocale, getCurrentLocale, getCurrentCurrency } from "./core_i18n.js";
 
 
 // todo: split into 2 files
@@ -528,33 +528,103 @@ export function camelCase(text: string) {
 
 // :: DATES ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
 
-let cur_locale: string = 'fr-FR';
-
 /**
- * change the current locale for misc translations (date...)
- * @param locale 
- * TODO: ????
+ * forces the locale of the formats (see Application.setLocale)
+ * @param locale
  */
 
 export function _date_set_locale(locale: string) {
-	cur_locale = locale;
+	_setLocale( locale );
 }
 
 /**
- * 
- * @param date 
- * @param options 
+ * a date as text: with options, the ones of Intl.DateTimeFormat in the current locale;
+ * without, the format of the language (_tr.global.date_format)
+ * @param date
+ * @param options
  * @example
  * let date = new Date( );
- * let options = { day: 'numeric', month: 'numeric', year: 'numeric', hour: 'numeric', minute: 'numeric' };
+ * let options = { day: 'numeric', month: 'long', year: 'numeric' };
  * let text = date_format( date, options );
  */
 
-export function date_format(date: Date, options?: any): string {
-	//return new Intl.DateTimeFormat(cur_locale, options).format( date );
+export function date_format(date: Date, options?: Intl.DateTimeFormatOptions): string {
+	if( options ) {
+		return new Intl.DateTimeFormat( getCurrentLocale( ), options ).format( date );
+	}
+
 	return formatIntlDate(date);
 }
 
+// :: FORMATS ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
+
+// numbers, amounts and dates in the current locale (the one of the language, or the one
+// Application.setLocale forced): the objects of Intl, made once by locale and options
+const intl_formats = new Map<string, Intl.NumberFormat | Intl.DateTimeFormat>( );
+
+function numberFormat( key: string, options: Intl.NumberFormatOptions ) {
+	const locale = getCurrentLocale( );
+	const id = locale + "|" + key;
+	let fmt = intl_formats.get( id ) as Intl.NumberFormat;
+	if( !fmt ) {
+		fmt = new Intl.NumberFormat( locale, options );
+		intl_formats.set( id, fmt );
+	}
+	return fmt;
+}
+
+function dateFormat( key: string, options: Intl.DateTimeFormatOptions ) {
+	const locale = getCurrentLocale( );
+	const id = locale + "|" + key;
+	let fmt = intl_formats.get( id ) as Intl.DateTimeFormat;
+	if( !fmt ) {
+		fmt = new Intl.DateTimeFormat( locale, options );
+		intl_formats.set( id, fmt );
+	}
+	return fmt;
+}
+
+/**
+ * a number as text in the current locale: "1 234,5" in fr-FR, "1,234.5" in en-US
+ * @param value
+ * @param decimals - the most decimals shown (Intl: 3 when not given)
+ * @param grouping - the separator of thousands, true by default
+ */
+
+export function formatNumber( value: number, decimals?: number, grouping = true ): string {
+	const options: Intl.NumberFormatOptions = { useGrouping: grouping };
+	if( decimals!==undefined ) {
+		options.maximumFractionDigits = decimals;
+	}
+
+	return numberFormat( "n" + decimals + grouping, options ).format( value );
+}
+
+/**
+ * an amount as text in the current locale and currency: "1 234,50 €" in fr-FR
+ */
+
+export function formatMoney( value: number ): string {
+	const currency = getCurrentCurrency( );
+	return numberFormat( "m" + currency, { style: "currency", currency } ).format( value );
+}
+
+/**
+ * a date as text in the current locale: "22/10/2026" in fr-FR, "10/22/2026" in en-US
+ */
+
+export function formatDate( date: Date ): string {
+	return dateFormat( "d", { } ).format( date );
+}
+
+/**
+ * a date and its time (hours, minutes) as text in the current locale: "22/10/2026 14:05" in fr-FR
+ */
+
+export function formatDateTime( date: Date ): string {
+	return dateFormat( "dt", { day: "2-digit", month: "2-digit", year: "numeric", hour: "2-digit", minute: "2-digit" } ).format( date );
+}
+
 /**
  * difference between 2 dates
  * @return text
@@ -1002,17 +1072,6 @@ export function getSystemMetrics( part: "scrollbar" | "zoom" ) {
 
 
 
-/**
- * 
- */
-
-export const x4_class_ns_sym = Symbol("class-ns");
-export function class_ns(ns: string) {
-	return function (constructor: Function) {
-		(constructor as any)[x4_class_ns_sym] = ns;
-	}
-}
-
 /**
  * 
  */