x4js 2.3.27 → 2.3.29

package/src/components/textarea/textarea.module.scss

@@ -23,6 +23,7 @@
 	--textarea-selection-color: var( --accent-color );
 	--textarea-background: var( --background-input );
 	--textarea-color: var( --text-primary );
+	--textarea-required: var( --alert-background );
 }
 
 .x4simpletextarea {
@@ -77,6 +78,14 @@
 		display: none;
 	}
 
+	// required: a "*" before the label, as the one of a TextEdit
+	&:has( > .x4simpletextarea[required] ) > .x4label::before {
+		content: "*";
+		font-weight: bold;
+		color: var( --textarea-required );
+		margin-right: 2px;
+	}
+
 	.x4simpletextarea {
 		// its height of rows when the TextArea has none, the TextArea's height when it has one;
 		// a basis of 0 would leave it the height of its padding: a textarea scrolls, its min-height is 0

package/src/components/textarea/textarea.ts

@@ -139,6 +139,7 @@ export class SimpleTextArea extends Component<SimpleTextAreaProps,TextAreaEvents
  * --textarea-selection-color
  * --textarea-background
  * --textarea-color
+ * --textarea-required
  * ```
  */
 

package/src/components/textedit/textedit.module.scss

@@ -21,7 +21,7 @@
 	--textedit-border-focus: var( --border-focus );
 	--textedit-required: var( --alert-background );
 
-	--textedit-btn-background: inherit;
+	--textedit-btn-background: var( --background-input );		// the one of its field: inherit was the page (dark theme)
 	--textedit-btn-color: var( --text-secondary );
 	--textedit-btn-color-hover: var( --text-primary );
 
@@ -64,6 +64,7 @@
 		.x4button {
 			margin: 0;
 			padding: 0;
+			align-self: stretch;		// the height of the field: no strip of the page above and under it
 			background-color: var( --textedit-btn-background );
 			color: var( --textedit-btn-color );
 
@@ -108,7 +109,9 @@
 			color: var( --textedit-color-disabled );
 		}
 
-		#edit input {
+		// the field and its gadgets lose their background together
+		#edit input,
+		#edit .x4button {
 			color: var( --textedit-color-disabled );
 			background-color: unset;
 		}

package/src/components/themes.scss

@@ -19,6 +19,9 @@
 $color--base: #569cd6;
 $color--interval: 8.4%;
 
+// the blues of the dark theme, from their own base
+$color--dark-base: #5796ca;
+
 :root {
 	--color-primary-a0: #ffffff;
 	--color-primary-a5: #{color.adjust($color--base, $lightness: 35%)};
@@ -52,6 +55,7 @@ $color--interval: 8.4%;
 	--background-primary: var(--color-primary-a0);
 	--background-secondary: var(--color-primary-a10);
 	--background-ternary: color-mix(in srgb, var(--color-primary-a100) 4.3%, var(--color-primary-a0));		// #f4f4f4
+	--background-odd: color-mix(in srgb, var(--color-primary-a100) 2.4%, var(--color-primary-a0));		// #f9f9f9, a row out of two
 	--background-hover: color-mix(in srgb, var(--color-primary-a100) 6.7%, var(--color-primary-a0));		// #eee
 	--background-active: color-mix(in srgb, var(--color-primary-a100) 20%, var(--color-primary-a0));		// #ccc
 	--background-input: color-mix(in srgb, var(--color-primary-a0) 60%, transparent);					// white at 60%
@@ -118,12 +122,16 @@ html.x4theme-dark {
 	--color-primary-a10: #2a2d2e;		// list.hoverBackground
 	--color-primary-a20: #37373d;		// list.inactiveSelectionBackground
 	--color-primary-a30: #3c3c3c;		// input.border
-	--color-primary-a40: #04395e;		// list.activeSelectionBackground
-	--color-primary-a50: #0078d4;		// button.background, focusBorder
-	--color-primary-a55: #026ec1;		// button.hoverBackground
-	--color-primary-a60: #0078d4;
-	--color-primary-a70: #026ec1;
-	--color-primary-a80: #04395e;
+
+	// the blues: from $color--dark-base (chosen); where VS Code has list.activeSelectionBackground,
+	// button.background and focusBorder, button.hoverBackground
+	--color-primary-a40: #{color.adjust($color--dark-base, $lightness: -35%)};		// a selection
+	--color-primary-a50: #{$color--dark-base};										// a button, the focus
+	--color-primary-a55: #{color.adjust($color--dark-base, $lightness: -5%)};		// a button hovered
+	--color-primary-a60: #{$color--dark-base};
+	--color-primary-a70: #{color.adjust($color--dark-base, $lightness: -5%)};
+	--color-primary-a80: #{color.adjust($color--dark-base, $lightness: -35%)};
+
 	--color-primary-a90: #cccccc;
 	--color-primary-a100: #cccccc;		// foreground
 
@@ -155,5 +163,11 @@ html.x4theme-dark {
 	--color-dialog-caption-text: #cccccc;		// titleBar.activeForeground
 	--color-dialog-background: #202020;			// editorWidget.background
 
+	// the tiles of a MapView are light: turned dark, their colours kept
+	--mapview-tile-filter: invert( 1 ) hue-rotate( 180deg ) brightness( 0.95 ) contrast( 0.9 );
+
+	// the marks of the events out of the view of a Planner: the darkest blue (a90 is the text here)
+	--planner-edge-background: var( --accent-background-active );
+
 	color-scheme: dark;		// the native parts: select, scroll bars, number spinners
 }

package/src/components/treeview/treeview.module.scss

@@ -20,6 +20,7 @@
 	--treeview-background: var( --background-primary );
 
 	--treeitem-color: var( --text-primary );
+	--treeitem-icon-color: var( --icon-color );
 
 	--treeitem-backgound-hover: var( --background-secondary );
 	--treeitem-color-hover: var( --text-primary );
@@ -79,7 +80,7 @@
 									
 				&>.label {
 					--label-color: var( --treeitem-color );
-					--label-icon-color: var( --treeitem-color );
+					--label-icon-color: var( --treeitem-icon-color );
 
 					gap: 4px;
 
@@ -210,6 +211,10 @@
 		border-color: var( --border );
 		color: var( --treeview-item-color-disabled );
 
+		// the texts and the icons of the items
+		--treeitem-color: var( --treeview-item-color-disabled );
+		--treeitem-icon-color: var( --treeview-item-color-disabled );
+
 		&>.body {
 			.x4viewport {
 				pointer-events: none;

package/src/components/treeview/treeview.ts

@@ -73,6 +73,7 @@ export interface TreeviewEvents extends ComponentEvents {
  * ```
  * --treeview-background
  * --treeitem-color
+ * --treeitem-icon-color
  * --treeitem-backgound-hover
  * --treeitem-color-hover
  * --treeitem-background-sel

package/src/components/video/video.module.scss

@@ -20,11 +20,14 @@
 	background-color: black;
 	position: relative;
 	
+	// the size of the box, whatever the size of the stream (a <video> keeps its own size
+	// with only left / right): the image fitted in it, black bands around
 	.vplayer {
 		position: absolute;
 		left: 0;
 		top: 0;
-		right: 0;
-		bottom: 0;
+		width: 100%;
+		height: 100%;
+		object-fit: contain;
 	}
 }

package/src/components/video/video.ts

@@ -23,7 +23,8 @@ interface VideoProps extends ComponentProps {
 	autoplay?: boolean;
 	muted?: boolean;
 	playsInline?: boolean;
-	stream: MediaStream;
+	src?: string;			// a file to play (url); a stream, when there is one, is shown instead
+	stream?: MediaStream;	// a camera, a screen, a canvas (captureStream)
 }
 
 /**
@@ -55,6 +56,10 @@ export class Video extends Box {
 			this.playsInline = props.playsInline;
 		}
 
+		if( props.src ) {
+			this.src = props.src;
+		}
+
 		this.stream = props.stream;
 	}
 
@@ -86,6 +91,14 @@ export class Video extends Box {
 		this.player.playsInline = set;
 	}
 
+	get src( ) {
+		return this.player.src;
+	}
+
+	set src( url: string ) {
+		this.player.src = url;
+	}
+
 	set stream( stream: MediaStream ) {
 		this.player.srcObject = stream;
 	}

package/src/core/core_i18n.ts

@@ -379,6 +379,23 @@ let fr = {
 			warning: '{0} avertissement',
 			warnings: '{0} avertissements',
 		},
+
+		carousel: {
+			carousel: 'carrousel',
+			slide: 'diapositive',
+			prev: 'Précédent',
+			next: 'Suivant',
+			position: '{0} sur {1}',
+		},
+
+		// the titles of the columns of a Gantt, by their id
+		gantt: {
+			title: 'Tâche',
+			start: 'Début',
+			end: 'Fin',
+			duration: 'Durée',
+			progress: 'Avancement',
+		},
 	}
 };
 
@@ -457,6 +474,22 @@ let en = {
 			warning: '{0} warning',
 			warnings: '{0} warnings',
 		},
+
+		carousel: {
+			carousel: 'carousel',
+			slide: 'slide',
+			prev: 'Previous',
+			next: 'Next',
+			position: '{0} of {1}',
+		},
+
+		gantt: {
+			title: 'Task',
+			start: 'Start',
+			end: 'End',
+			duration: 'Duration',
+			progress: 'Progress',
+		},
 	}
 };
 
@@ -535,6 +568,22 @@ let es = {
 			warning: '{0} advertencia',
 			warnings: '{0} advertencias',
 		},
+
+		carousel: {
+			carousel: 'carrusel',
+			slide: 'diapositiva',
+			prev: 'Anterior',
+			next: 'Siguiente',
+			position: '{0} de {1}',
+		},
+
+		gantt: {
+			title: 'Tarea',
+			start: 'Inicio',
+			end: 'Fin',
+			duration: 'Duración',
+			progress: 'Progreso',
+		},
 	}
 };
 
@@ -613,6 +662,22 @@ let de = {
 			warning: '{0} Warnung',
 			warnings: '{0} Warnungen',
 		},
+
+		carousel: {
+			carousel: 'Karussell',
+			slide: 'Folie',
+			prev: 'Zurück',
+			next: 'Weiter',
+			position: '{0} von {1}',
+		},
+
+		gantt: {
+			title: 'Aufgabe',
+			start: 'Beginn',
+			end: 'Ende',
+			duration: 'Dauer',
+			progress: 'Fortschritt',
+		},
 	}
 };
 

package/src/core/core_pdf.ts

@@ -1543,6 +1543,23 @@ export class X4PDFBuilder {
 
 		return result
 	}
+
+	/**
+	 * the document as a file, of type application/pdf (build, its streams not compressed)
+	 */
+
+	buildBlob(): Blob {
+		return new Blob([this.build() as BlobPart], { type: 'application/pdf' })
+	}
+
+	/**
+	 * an object url of the document: the src of an iframe, the href of a link, window.open.
+	 * URL.revokeObjectURL( url ) frees it when it is no longer shown
+	 */
+
+	buildURL(): string {
+		return URL.createObjectURL(this.buildBlob())
+	}
 }
 
 /*

package/src/core/core_react.ts

@@ -13,25 +13,19 @@
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  *
- * to use you must:
- * 
- * 1. add this to your tsconfig.json
+ * JSX in .tsx files:
+ *
+ * 1. in tsconfig.json (esbuild reads it too):
  * 		"compilerOptions": {
- * 			...
- * 			"jsx": "preserve",
- * 			...
- * 		}
- * 	
- * 2. be sure that esbuild has this:
- * 		jsxFactory: "x4create_element",
- * 		loader: { ".ts": "tsx" }
- * 		
- * 
- * after that, all things like that will be ok
- * 
- * 	import { x4_create_element }  from "x4react"
- * 	const xx = <h1>This is a title</h1>
- * 
+ * 			"jsx": "react",
+ * 			"jsxFactory": "x4_react.create_element"
+ * 		},
+ * 		"files": [ "node_modules/x4js/src/x4tsx.d.ts" ]	// the JSX types of x4 (ref)
+ *
+ * 2. in each .tsx file, the factory imported:
+ * 		import { Label, VBox, x4_react } from "x4js";
+ * 		const box = <VBox><Label text="Hello" /></VBox>;
+ *
  */
 
 import { Component } from './component';

package/src/core/core_svg.ts

@@ -557,7 +557,8 @@ export class SvgText extends SvgItem {
 	 * @returns The current `SvgText` instance for chaining.
 	 */
 	fontWeight( weight: 'light' | 'normal' | 'bold' ): this {
-		return this.setAttr( 'font-weight', weight );
+		// "light" is no value of font-weight: its number
+		return this.setAttr( 'font-weight', weight=='light' ? '300' : weight );
 	}
 
 	/**
@@ -583,23 +584,25 @@ export class SvgText extends SvgItem {
 	}
 
 	/**
-	 * change the vertical alignment
+	 * change the vertical alignment: y is the top, the middle, the bottom or the baseline
+	 * of the text. dominant-baseline, read by all the browsers (alignment-baseline is not
+	 * by Firefox before 149)
 	 */
 	verticalAlign( align: 'top' | 'center' | 'bottom' | 'baseline' ): this {
 
 		let al;
 		switch( align ) {
 			case 'top': al = 'hanging'; break;
-			case 'center': al = 'middle'; break;
-			case 'bottom': al = 'baseline'; break;
-			case 'baseline': al = 'mathematical'; break;
+			case 'center': al = 'central'; break;
+			case 'bottom': al = 'ideographic'; break;
+			case 'baseline': al = 'alphabetic'; break;
 			default:
 				// If an invalid alignment is provided, do nothing and return this for chaining.
 				console.warn(`Invalid verticalAlign value: ${align}. Must be 'top', 'center', 'bottom', or 'baseline'.`);
 				return this;
 		}
 
-		return this.setAttr( 'alignment-baseline', al );
+		return this.setAttr( 'dominant-baseline', al );
 	}
 }
 

package/src/core/core_tools.ts

@@ -609,6 +609,31 @@ export function formatMoney( value: number ): string {
 	return numberFormat( "m" + currency, { style: "currency", currency } ).format( value );
 }
 
+/**
+ * a percent as text in the current locale: 89 gives "89 %" in fr-FR, "89%" in en-US
+ * @param value - from 0 to 100, as a column percent of Gridview
+ * @param decimals - the most decimals shown
+ */
+
+export function formatPercent( value: number, decimals = 0 ): string {
+	return numberFormat( "p" + decimals, { style: "percent", maximumFractionDigits: decimals } ).format( value / 100 );
+}
+
+/**
+ * a value and its unit, short, in the current locale: "12 j", "3 h" in fr-FR, "12 days", "3 hr" in en-US
+ * @param unit - a unit of Intl: "day", "hour", "minute", "kilometer"...
+ * @param decimals - the most decimals shown (Intl: 3 when not given)
+ */
+
+export function formatUnit( value: number, unit: string, decimals?: number ): string {
+	const options: Intl.NumberFormatOptions = { style: "unit", unit, unitDisplay: "short" };
+	if( decimals!==undefined ) {
+		options.maximumFractionDigits = decimals;
+	}
+
+	return numberFormat( "u" + unit + decimals, options ).format( value );
+}
+
 /**
  * a date as text in the current locale: "22/10/2026" in fr-FR, "10/22/2026" in en-US
  */
@@ -714,6 +739,25 @@ export function date_calc_weeknum(date: Date): number {
 	return Math.ceil( ( ( d.getTime( ) - jan1 ) / 86400000 + 1 ) / 7 );
 }
 
+/**
+ * the monday of the week of a date (the date itself on a monday), at the same time: a new date
+ */
+
+export function date_week_start( date: Date ): Date {
+	return date_add_days( date, -( ( date.getDay( ) + 6 ) % 7 ) );		// monday 0 .. sunday 6
+}
+
+/**
+ * a date some days after (before when days < 0), at the same time: a new date. A day of 23 or
+ * 25 hours (summer time) counts as one
+ */
+
+export function date_add_days( date: Date, days: number ): Date {
+	const result = date_clone( date );
+	result.setDate( result.getDate( ) + days );
+	return result;
+}
+
 
 
 /**

package/src/x4doc.ts

@@ -21,3 +21,6 @@
 
 export * from "./x4.js"
 export * from "./components/monaco/monaco.js"
+export * from "./components/gantt/gantt.js"
+export * from "./components/planner/planner.js"
+export * from "./components/mapview/mapview.js"