x4js 2.3.20 → 2.3.22

package/src/core/core_i18n.ts

@@ -85,7 +85,12 @@ export function addTranslation( name: string, ...parts: any[] ) {
 		_patch( lang.src_translations, p );
 	} );
 
-	lang.translations = _proxyfy( lang.src_translations, lang.base, true );
+	lang.translations = _proxyfy( lang.src_translations, lang.base, [] );
+
+	// the current language: _tr sees the new translations at once
+	if( name==current.name ) {
+		current.translations = lang.translations;
+	}
 }
 
 /**
@@ -117,96 +122,71 @@ function _patch( obj: any, by: any ) {
 /**
  * create a proxy for all sub objects
  * (deep traverse)
+ * @param path where obj is, from _tr: [] for _tr itself, ["global"] for _tr.global
  */
 
-function _proxyfy( obj: any, base: any, root: any ) {
+function _proxyfy( obj: any, base: string, path: string[] ) {
 
 	const result: any = {}
 
 	for( const n in obj ) {
 		if( typeof obj[n]!=="string" && !Array.isArray(obj[n])) {
-			result[n] = _proxyfy( obj[n], base, false );
+			result[n] = _proxyfy( obj[n], base, [...path, n] );
 		}
 		else {
 			result[n] = obj[n];
 		}
 	}
 
-	return _mk_proxy( result, base, root );
+	return _mk_proxy( result, base, path );
 }
 
 
 /**
  * create a proxy for the given object
+ * what is not found is asked to the base language, at the same path
  */
 
-function _mk_proxy( obj: any, base: string, root: boolean ) : any {
+function _mk_proxy( obj: any, base: string, path: string[] ) : any {
 	return new Proxy( obj, {
 		get: (target, prop) => {
-			if( root ) {
-				req_path = [prop];
-			}
-			else {
-				req_path.push( prop );
+			const value = target[prop];
+
+			// a symbol is not a translation
+			if( value!==undefined || typeof prop==="symbol" ) {
+				return value;
 			}
 
-			let value = target[prop];
-			if( value===undefined ) {
-				if( base ) {
-					value = _findBaseTrans( base );
-				}
+			const asked = [...path, prop];
 
-				if( value===undefined ) {
-					console.error( "I18N error: unable to find", '_tr.'+req_path.join('.') );
-				}
+			// not in this language: in its base, which looks in its own base
+			if( base ) {
+				return _findBaseTrans( base, asked );
 			}
 
-			return value;
+			console.error( "I18N error: unable to find", '_tr.'+asked.join('.') );
+			return undefined;
 		}
 	});
 }
 
-
 /**
- * when we ask for _tr.xxx
- * reqpath is set to [xxx]
- * 
- * then when we try to get _tr.xxx.yyy
- * reqpath is [xxx,yyy]
- * if yyy is not found, we try with base langage for the full reqpath 
- * until no base found
+ * the translation at path in the language base
+ * its proxies look in their own base: the last language of the chain tells what is missing
  */
 
-let req_path: (string | symbol)[];
+function _findBaseTrans( base: string, path: string[] ) {
 
-/**
- * 
- */
+	let trans = languages[base].translations;
 
-function _findBaseTrans( base: any ) {
-
-	while( base ) {
-		const lang = languages[base];
-		let trans = lang.translations;
-		let value;
-
-		for( const p of req_path ) {
-			value = trans[p];
-			if( value===undefined ) {
-				break;
-			}
-
-			trans = value;
-		}
-
-		if( value!==undefined ) {
-			return trans;
+	for( const p of path ) {
+		trans = trans[p];
+		if( trans===undefined ) {
+			return undefined;
 		}
-
-		base = lang.base;
 	}
 
-	return undefined;
+	return trans;
 }
 
 /**
@@ -320,7 +300,7 @@ let fr = {
 
 		diff_date_seconds: '{0} secondes',
 		diff_date_minutes: '{0} minutes',
-		diff_date_hours: '{0} heures',
+		diff_date_hours: '{0} heures {1} minutes',
 
 		invalid_date: 'Date non reconnue ({0})',
 		empty_list: 'Liste vide',
@@ -351,6 +331,11 @@ let fr = {
 			numeric: '123',
 			alpha: 'Abc'
 		},
+
+		settings: {
+			search: 'Rechercher un paramètre',
+			nomatch: 'Aucun paramètre trouvé',
+		},
 	}
 };
 
@@ -385,7 +370,7 @@ let en = {
 
 		diff_date_seconds: '{0} seconds',
 		diff_date_minutes: '{0} minutes',
-		diff_date_hours: '{0} hours',
+		diff_date_hours: '{0} hours {1} minutes',
 
 		invalid_date: 'Unrecognized date({0})',
 		empty_list: 'Empty list',
@@ -416,6 +401,151 @@ let en = {
 			numeric: '123',
 			alpha: 'Abc'
 		},
+
+		settings: {
+			search: 'Search settings',
+			nomatch: 'No setting found',
+		},
+	}
+};
+
+/** @ignore */
+
+let es = {
+	global: {
+		ok: 'Aceptar',
+		cancel: 'Cancelar',
+		ignore: 'Ignorar',
+		yes: 'Sí',
+		no: 'No',
+		abort: "Anular",
+		retry: "Reintentar",
+
+		error: "Error",
+		today: "Hoy",
+
+		open: 'Abrir',
+		new: 'Nuevo',
+		delete: 'Eliminar',
+		close: 'Cerrar',
+		save: 'Guardar',
+
+		search: 'Buscar',
+		search_tip: 'Escriba el texto que desea buscar. <b>Intro</b> para iniciar la búsqueda. <b>Esc</b> para cancelar.',
+
+		required_field: "dato obligatorio",
+		invalid_format: "formato no válido",
+		invalid_email: 'dirección de correo no válida',
+		invalid_number: 'valor numérico no válido',
+
+		diff_date_seconds: '{0} segundos',
+		diff_date_minutes: '{0} minutos',
+		diff_date_hours: '{0} horas {1} minutos',
+
+		invalid_date: 'Fecha no reconocida ({0})',
+		empty_list: 'Lista vacía',
+
+		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',
+
+		day_short: [ 'dom', 'lun', 'mar', 'mié', 'jue', 'vie', 'sáb' ],
+		day_long: [ 'domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado' ],
+
+		month_short: [ 'ene', 'feb', 'mar', 'abr', 'may', 'jun', 'jul', 'ago', 'sep', 'oct', 'nov', 'dic' ],
+		month_long: [ 'enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'septiembre', 'octubre', 'noviembre', 'diciembre' ],
+
+		property: 'Propiedad',
+		value: 'Valor',
+
+		err_403: `No tiene permisos suficientes para realizar esta acción`,
+
+		copy: 'Copiar',
+		cut: 'Cortar',
+		paste: 'Pegar',
+
+		filedrop: 'Suelte un archivo',
+
+		keyboard: {
+			next: 'Siguiente',
+			numeric: '123',
+			alpha: 'Abc'
+		},
+
+		settings: {
+			search: 'Buscar un ajuste',
+			nomatch: 'Ningún ajuste encontrado',
+		},
+	}
+};
+
+/** @ignore */
+
+let de = {
+	global: {
+		ok: 'OK',
+		cancel: 'Abbrechen',
+		ignore: 'Ignorieren',
+		yes: 'Ja',
+		no: 'Nein',
+		abort: "Abbrechen",
+		retry: "Wiederholen",
+
+		error: "Fehler",
+		today: "Heute",
+
+		open: 'Öffnen',
+		new: 'Neu',
+		delete: 'Löschen',
+		close: 'Schließen',
+		save: 'Speichern',
+
+		search: 'Suchen',
+		search_tip: 'Geben Sie den zu suchenden Text ein. <b>Enter</b> startet die Suche. <b>Esc</b> bricht ab.',
+
+		required_field: "Pflichtangabe",
+		invalid_format: "ungültiges Format",
+		invalid_email: 'ungültige E-Mail-Adresse',
+		invalid_number: 'ungültiger Zahlenwert',
+
+		diff_date_seconds: '{0} Sekunden',
+		diff_date_minutes: '{0} Minuten',
+		diff_date_hours: '{0} Stunden {1} Minuten',
+
+		invalid_date: 'Datum nicht erkannt ({0})',
+		empty_list: 'Leere Liste',
+
+		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',
+
+		day_short: [ 'So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa' ],
+		day_long: [ 'Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag' ],
+
+		month_short: [ 'Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez' ],
+		month_long: [ 'Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember' ],
+
+		property: 'Eigenschaft',
+		value: 'Wert',
+
+		err_403: `Sie haben nicht die erforderlichen Rechte für diese Aktion`,
+
+		copy: 'Kopieren',
+		cut: 'Ausschneiden',
+		paste: 'Einfügen',
+
+		filedrop: 'Datei hier ablegen',
+
+		keyboard: {
+			next: 'Weiter',
+			numeric: '123',
+			alpha: 'Abc'
+		},
+
+		settings: {
+			search: 'Einstellungen durchsuchen',
+			nomatch: 'Keine Einstellung gefunden',
+		},
 	}
 };
 
@@ -425,6 +555,13 @@ addTranslation( 'fr', fr );
 createLanguage( 'en', 'fr' );
 addTranslation( 'en', en );
 
+// a key they lack is taken in english
+createLanguage( 'es', 'en' );
+addTranslation( 'es', es );
+
+createLanguage( 'de', 'en' );
+addTranslation( 'de', de );
+
 selectLanguage( 'fr' );	// by default
 
 

package/src/core/core_pdf.ts

@@ -835,7 +835,13 @@ function transformSegments( segs: PathSegment[], m: Matrix ): PathSegment[] {
 
 function svgSource( icon: string ): string {
 	while (icon.startsWith('var:')) {
-		icon = document.documentElement.style.getPropertyValue(icon.substring(4)).trim()
+		// "var:home" or "var:--home": the variable --home, set on <html>
+		let name = icon.substring(4)
+		if (!name.startsWith('--')) {
+			name = '--' + name
+		}
+
+		icon = document.documentElement.style.getPropertyValue(name).trim()
 	}
 
 	if (icon.startsWith('data:image/svg+xml;base64,')) {
@@ -1297,13 +1303,19 @@ export class X4PDFBuilder {
 		}
 		
 		const image = (jpegBytes: Uint8Array, x: number, y: number, w: number, h: number) => {
+			// the size is in the frame header (SOF): the segments are followed, an EXIF
+			// thumbnail inside a segment is skipped
 			let imgWidth = 0, imgHeight = 0
-			for (let i = 0; i < jpegBytes.length - 1; i++) {
-				if (jpegBytes[i] === 0xFF && (jpegBytes[i + 1] === 0xC0 || jpegBytes[i + 1] === 0xC2)) {
+			let i = 2
+			while (i + 9 < jpegBytes.length && jpegBytes[i] === 0xFF) {
+				const marker = jpegBytes[i + 1]
+				if (marker >= 0xC0 && marker <= 0xCF && marker !== 0xC4 && marker !== 0xC8 && marker !== 0xCC) {
 					imgHeight = (jpegBytes[i + 5] << 8) | jpegBytes[i + 6]
 					imgWidth = (jpegBytes[i + 7] << 8) | jpegBytes[i + 8]
 					break
 				}
+
+				i += 2 + ((jpegBytes[i + 2] << 8) | jpegBytes[i + 3])
 			}
 
 			const imgName = `/Im${imageCount++}`

package/src/core/core_shortcuts.ts

@@ -91,6 +91,11 @@ function sequenceOf( ev: KeyboardEvent ): string {
 		key = ev.code[3].toLowerCase( );
 	}
 
+	// the space bar ( " " ): written "Space" in a sequence
+	if( key===" " ) {
+		key = "space";
+	}
+
 	return join( { shift: ev.shiftKey, ctrl: ev.ctrlKey, cmd: ev.metaKey, alt: ev.altKey, key } );
 }
 
@@ -158,7 +163,6 @@ const key_names: Record<string,string> = {
 	arrowdown: "↓",
 	escape: "Esc",
 	delete: "Del",
-	" ": "Space",
 };
 
 /**

package/src/core/core_styles.ts

@@ -121,33 +121,42 @@ export function isUnitLess( name: string ) {
 	return unitless[name] ? true : false;
 }
 
+// one sheet for the page, shared by all the Stylesheet: a name is one rule,
+// whatever instance sets it
+let page_sheet: CSSStyleSheet = null;
+const page_rules = new Map<string, CSSRule>( );
+
+function pageSheet( ): CSSStyleSheet {
+	if( !page_sheet ) {
+		// found by its id: a title would make it a "preferred" style sheet,
+		// of which a page applies only one
+		let dom = document.getElementById( 'x4-dynamic-css' ) as HTMLStyleElement;
+		if( !dom ) {
+			dom = document.createElement( 'style' );
+			dom.id = 'x4-dynamic-css';
+			document.head.appendChild( dom );
+		}
+
+		page_sheet = dom.sheet;
+	}
+
+	return page_sheet;
+}
+
 /**
- * 
+ * Rules added to the page while it runs, in one <style id="x4-dynamic-css">.
+ * @deprecated the CSS variables do it: setStyleVariable( ) on a component,
+ * var( --name ) in its stylesheet
  */
 
 export class Stylesheet {
 
 	readonly _sheet: CSSStyleSheet;
-	readonly _rules: Map<string, number> = new Map( );
+	readonly _rules: Map<string, CSSRule>;
 
 	constructor() {
-
-		function getStyleSheet( name: string ) : CSSStyleSheet {
-			for(let i=0; i<document.styleSheets.length; i++) {
-			  	let sheet = document.styleSheets[i];
-			  	if(sheet.title === name ) {
-					return sheet;
-			  	}
-			}
-		}
-
-		this._sheet = getStyleSheet( 'x4-dynamic-css' );
-		if( !this._sheet ) {
-			const dom = document.createElement( 'style' );
-			dom.setAttribute('id', 'x4-dynamic-css' );
-			document.head.appendChild(dom);
-			this._sheet = dom.sheet
-		}
+		this._sheet = pageSheet( );
+		this._rules = page_rules;
 	}
 
     /**
@@ -156,20 +165,31 @@ export class Stylesheet {
      * @param {string} definition - css definition of the rule 
      * @example
      * setRule('xbody', "body { background-color: #ff0000; }" );
+     * @deprecated a CSS variable: setStyleVariable( ) on a component, var( --name ) in its stylesheet
      */
 
 	public setRule(name: string, definition: any ) {
 
 		if( isString(definition) ) {
-			let index = this._rules.get( name );
-			if (index !== undefined) {
-				this._sheet.deleteRule(index);
+			const sheet = this._sheet;
+			const old = this._rules.get( name );
+
+			// in the place of the rule of that name, else at the end
+			let index = sheet.cssRules.length;
+			if( old ) {
+				const at = Array.prototype.indexOf.call( sheet.cssRules, old );
+				if( at>=0 ) {
+					index = at;
+				}
 			}
-			else {
-				index = this._sheet.cssRules.length;
+
+			// inserted first: a definition that is not valid throws, the old rule stays
+			sheet.insertRule( definition, index );
+			if( old && sheet.cssRules[index+1]===old ) {
+				sheet.deleteRule( index+1 );
 			}
 
-			this._rules.set( name, this._sheet.insertRule( definition, index) );
+			this._rules.set( name, sheet.cssRules[index] );
 		}
 		else {
 			let idx = 1;
@@ -203,6 +223,7 @@ export class Stylesheet {
 	 * ```
 	 * let color = Component.getCss( ).getVar( 'button-color' );
 	 * ```
+	 * @deprecated getStyleVariable( ) of a component, or getComputedStyle( document.documentElement ).getPropertyValue( "--name" )
 	 */
 
 	public static getVar( name: string ) : any {

package/src/core/core_svg.ts

@@ -156,7 +156,7 @@ class SvgItem {
 	 * @param cap 
 	 */
 
-	strokeCap( cap: "butt" | "round" | "sqaure" ) {
+	strokeCap( cap: "butt" | "round" | "square" ) {
 		return this.setAttr( "stroke-linecap", cap );
 	}
 
@@ -218,12 +218,13 @@ class SvgItem {
 	 */
 
 	getNumAttr( name: string ) {
-		const a = this._dom.getAttribute( name )
-		if( a=='' ) {
+		// not set or empty: 0; "1.5" is 1.5
+		const a = this._dom.getAttribute( name );
+		if( !a ) {
 			return 0;
 		}
 
-		return parseInt( a );
+		return parseFloat( a );
 	}
 
 	/**
@@ -271,7 +272,9 @@ class SvgItem {
 	 */
 	
 	addClass( cls: string ): this {
-		if( !cls ) return;
+		if( !cls ) {
+			return this;
+		}
 		
 		cls = cls.trim();
 		if( cls.indexOf(' ')>=0 ) {
@@ -484,12 +487,13 @@ export class SvgPath extends SvgItem {
 
 	/**
 	 * draw an arc
-	 * Draws an elliptical arc from the current point to a new point.
+	 * A circular arc around (x, y), from the angle start to end in degrees: 0 is the top,
+	 * 90 the right (clockwise). It starts a new subpath at its first point.
 	 *
-	 * @param x - The x-coordinate of the center of the ellipse.
-	 * @param y - The y-coordinate of the center of the ellipse.
+	 * @param x - The x-coordinate of the center.
+	 * @param y - The y-coordinate of the center.
 	 * @param r - The radius of the arc.
-	 * @param start - The start angle of the arc in degrees (0 is right, 90 is down).
+	 * @param start - The start angle of the arc in degrees (0 is the top, 90 is the right).
 	 * @param end - The end angle of the arc in degrees.
 	 * @param clockwise - If `true`, the arc is drawn clockwise; otherwise, counter-clockwise. Defaults to `true`.
 	 *
@@ -612,12 +616,16 @@ export class SvgIcon extends SvgItem {
 	constructor( svg: string ) {
 		super( "svg" );
 
+		// a data url is decoded when it is encoded ("data:image/svg+xml,%3Csvg..."), a raw svg never
 		if( svg.startsWith("data:image/svg+xml,") ) {
 			svg = svg.substring( 19 );
+			if( !svg.startsWith( "<" ) ) {
+				svg = decodeURIComponent( svg );
+			}
 		}
 
 		const parser = new DOMParser();
-		const doc = parser.parseFromString( decodeURIComponent(svg), "image/svg+xml");
+		const doc = parser.parseFromString( svg, "image/svg+xml");
 
 		const parserErrorElement = doc.querySelector("parsererror");
 		if( parserErrorElement ) {
@@ -629,11 +637,9 @@ export class SvgIcon extends SvgItem {
 			this._dom.setAttribute( svgRoot.attributes[i].name, svgRoot.attributes[i].value );
 		}
 
-		for( let i=0; i<svgRoot.childNodes.length; i++) {
-			const child = svgRoot.childNodes[i];
-			if (child.nodeType === 1) { 
-				this._dom.appendChild(child);
-			} 
+		// the elements, all of them: each one moved leaves the list
+		for( const child of Array.from( svgRoot.children ) ) {
+			this._dom.appendChild( child );
 		}
 	}
 }
@@ -707,7 +713,9 @@ export class SvgGradient extends SvgItem {
 	 * @returns The current `SvgGradient` instance for chaining.
 	 */
 	addStop( offset: number_or_perc, color: string ): this {
-		this._dom.insertAdjacentHTML( "beforeend", `<stop offset="${offset}%" stop-color="${color}"></stop>`);
+		// a number is a percentage: 20 is "20%"
+		const o = isString( offset ) ? offset : offset + "%";
+		this._dom.insertAdjacentHTML( "beforeend", `<stop offset="${o}" stop-color="${color}"></stop>`);
 		return this;
 	}
 }

package/src/core/core_tools.ts

@@ -124,8 +124,8 @@ export function unsafeHtml(x: string): UnsafeHtml {
 export function unsafe(strings: TemplateStringsArray, ...values: any[]): UnsafeHtml {
 
     const resolve = ( value: any ) : string | UnsafeHtml => {
-        let v: string;
-        if( !value ) {
+        // nothing to write: null, undefined (after the last part of the template)
+        if( value===undefined || value===null ) {
             return "";
         }
         
@@ -137,7 +137,8 @@ export function unsafe(strings: TemplateStringsArray, ...values: any[]): UnsafeH
             return value.toString();
         }
 
-        return sanitizeHtml(value);
+        // a number, a boolean...: its text, escaped
+        return sanitizeHtml( String( value ) );
     }
 
 	const result = strings.reduce((acc, str, i) => {
@@ -561,7 +562,8 @@ export function date_format(date: Date, options?: any): string {
 
 export function date_diff(date1: Date, date2: Date, options?: any): string {
 
-	let dt = (date1.getTime() - date2.getTime()) / 1000;
+	// the gap, whichever date comes first
+	let dt = Math.abs(date1.getTime() - date2.getTime()) / 1000;
 
 	// seconds
 	let sec = dt;
@@ -575,7 +577,7 @@ export function date_diff(date1: Date, date2: Date, options?: any): string {
 		return sprintf(_tr.global.diff_date_minutes, Math.round(min));
 	}
 
-	// hours
+	// hours, and the minutes left
 	let hrs = Math.floor(min / 60);
 	return sprintf(_tr.global.diff_date_hours, hrs, min % 60);
 }
@@ -626,13 +628,20 @@ export function date_clone(date: Date): Date {
 }
 
 /**
- * return the week number of a date
+ * return the week number of a date, ISO 8601: weeks from monday,
+ * the week 1 holds the first thursday of the year (the 29/12/2025 is in the week 1 of 2026)
  */
 
 export function date_calc_weeknum(date: Date): number {
-	const firstDayOfYear = new Date(date.getFullYear(), 0, 1);
-	const pastDaysOfYear = (date.valueOf() - firstDayOfYear.valueOf()) / 86400000;
-	return Math.floor((pastDaysOfYear + firstDayOfYear.getDay() + 1) / 7);
+	// in UTC: a day of 23 or 25 hours (summer time) does not move the weeks
+	const d = new Date( Date.UTC( date.getFullYear( ), date.getMonth( ), date.getDate( ) ) );
+
+	// the thursday of its week gives the year of the week
+	const day = d.getUTCDay( ) || 7;		// monday 1 .. sunday 7
+	d.setUTCDate( d.getUTCDate( ) + 4 - day );
+
+	const jan1 = Date.UTC( d.getUTCFullYear( ), 0, 1 );
+	return Math.ceil( ( ( d.getTime( ) - jan1 ) / 86400000 + 1 ) / 7 );
 }