x4js 2.3.19 → 2.3.21

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 );
 }