x4js 2.3.24 → 2.3.26

package/src/core/core_events.ts

@@ -159,6 +159,8 @@ export class EventSource<E extends EventMap = EventMap > {
 
 	/**
 	 * Dispatches an event with a given name and payload to all registered listeners.
+	 * A listener that throws: its error goes to console.error, the next listeners are
+	 * called, and fire returns normally.
 	 * @param name - The name of the event to fire (must be a key in `E`).
 	 * @param evx - The event payload (event object) to pass to the listeners.
 	 */
@@ -192,14 +194,24 @@ export class EventSource<E extends EventMap = EventMap > {
 				ev.stopPropagation = stopPropagation;
 			}
 
+			// a listener that throws stops neither the others nor the one that fires
+			const call = ( listener: EventCallback ) => {
+				try {
+					listener( ev );
+				}
+				catch( e ) {
+					console.error( e );
+				}
+			};
+
 			// small optimisation
 			if (listeners.length == 1) {
-				listeners[0](ev);
+				call( listeners[0] );
 			}
 			else {
 				const temp = listeners.slice();
 				for (let i = 0, n = temp.length; i < n; i++) {
-					temp[i](ev);
+					call( temp[i] );
 					if (ev.propagationStopped) {
 						break;
 					}

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' ],
@@ -336,6 +372,13 @@ let fr = {
 			search: 'Rechercher un paramètre',
 			nomatch: 'Aucun paramètre trouvé',
 		},
+
+		progression: {
+			error: '{0} erreur',
+			errors: '{0} erreurs',
+			warning: '{0} avertissement',
+			warnings: '{0} avertissements',
+		},
 	}
 };
 
@@ -378,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' ],
@@ -406,6 +450,13 @@ let en = {
 			search: 'Search settings',
 			nomatch: 'No setting found',
 		},
+
+		progression: {
+			error: '{0} error',
+			errors: '{0} errors',
+			warning: '{0} warning',
+			warnings: '{0} warnings',
+		},
 	}
 };
 
@@ -448,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' ],
@@ -476,6 +528,13 @@ let es = {
 			search: 'Buscar un ajuste',
 			nomatch: 'Ningún ajuste encontrado',
 		},
+
+		progression: {
+			error: '{0} error',
+			errors: '{0} errores',
+			warning: '{0} advertencia',
+			warnings: '{0} advertencias',
+		},
 	}
 };
 
@@ -518,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' ],
@@ -546,6 +606,13 @@ let de = {
 			search: 'Einstellungen durchsuchen',
 			nomatch: 'Keine Einstellung gefunden',
 		},
+
+		progression: {
+			error: '{0} Fehler',
+			errors: '{0} Fehler',
+			warning: '{0} Warnung',
+			warnings: '{0} Warnungen',
+		},
 	}
 };
 

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;
-	}
-}
-
 /**
  * 
  */