x4js 2.3.28 → 2.3.29

package/src/components/radio/radio.module.scss

@@ -53,11 +53,14 @@
 	flex-direction: row;
 	align-items: center;
 
-	margin-left: 5px;
+	// the room of a checkbox
+	margin: 5px;
+	padding: 4px;
 	gap: 4px;
 	cursor: pointer;
 
 	.inner {
+		align-self: center;		// a Box stretches: the round in the middle of the line
 		position: relative;
 		height: 1rem;
 		width: 1rem;

package/src/components/slider/slider.module.scss

@@ -21,15 +21,17 @@
 	--slider-thumb-border-focus: var( --border-focus );
 }
 
+// all in rem: the thumb, its focus, the track and the box keep their proportions whatever the
+// size of <html>
 .x4slider {
 	outline: none;
 	touch-action: none;
 	overflow: hidden;
 
 	&:not(.vertical) {
-		padding: 10px 12px;
-		margin: 5px 0;
-		height: 28px;
+		padding: 0.625rem 0.75rem;
+		margin: 0.3125rem 0;
+		height: 1.75rem;
 		
 		.track {
 			background-color: var( --slider-track );
@@ -37,13 +39,13 @@
 
 			position: relative;
 			top: 50%;
-			height: 3px;
+			height: 0.1875rem;
 		}
 
 		.bar {
 			position: absolute;
 			width: 61%;
-			height: 3px;
+			height: 0.1875rem;
 			//padding: 4px 0;
 			//background-color: var( --color-60 );
 		}
@@ -54,12 +56,12 @@
 			outline: none;
 			
 			background-color: var( --slider-thumb-background );
-			border: 3px solid var( --slider-thumb-border );
-			border-radius: 8px;
+			border: 0.1875rem solid var( --slider-thumb-border );
+			border-radius: 50%;
 
 			top: 50%;
-			width: 16px;
-			height: 16px;
+			width: 1rem;
+			height: 1rem;
 
 			transform: translate(-50%,-50%);
 			cursor: pointer;
@@ -67,9 +69,9 @@
 	}
 
 	&.vertical {
-		padding: 12px 10px;
-		margin: 0 5px;
-		width: 28px;
+		padding: 0.75rem 0.625rem;
+		margin: 0 0.3125rem;
+		width: 1.75rem;
 
 		.track {
 			background-color: var( --slider-track );
@@ -77,12 +79,12 @@
 	
 			position: relative;
 			left: 50%;
-			width: 3px;
+			width: 0.1875rem;
 		}
 	
 		.bar {
 			position: absolute;
-			width: 3px;
+			width: 0.1875rem;
 			height: 61%;
 			//padding: 4px 0;
 			//background-color: var( --color-60 );
@@ -94,12 +96,12 @@
 			outline: none;
 			
 			background-color: var( --slider-thumb-background );
-			border: 3px solid var( --slider-thumb-border );
-			border-radius: 8px;
+			border: 0.1875rem solid var( --slider-thumb-border );
+			border-radius: 50%;
 	
 			top: 61%;
-			width: 16px;
-			height: 16px;
+			width: 1rem;
+			height: 1rem;
 	
 			transform: translate(-50%,-50%);
 			cursor: pointer;
@@ -110,9 +112,9 @@
 
 	
 	&:focus .thumb {
-		outline-offset: 3px;
+		outline-offset: 0.1875rem;
     	outline-color: var(--slider-thumb-border-focus);
 		outline-style: solid;
-    	outline-width: 1px;
+    	outline-width: 0.0625rem;
 	}
 }

package/src/components/switch/switch.module.scss

@@ -1,16 +1,16 @@
-/** 
+/**
  *  ___  ___ __
  *  \  \/  /  / _
  *   \    /  /_| |_
- *   /    \____   _|  
+ *   /    \____   _|
  *  /__/\__\   |_|
- * 
+ *
  * @file switch.module.scss
- * @author Etienne Cochard 
- * 
+ * @author Etienne Cochard
+ *
  * @copyright (c) 2026 R-libre ingenierie
  *
- * Use of this source code is governed by an MIT-style license 
+ * 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.
  **/
 
@@ -21,15 +21,21 @@
 	--switch-background: var( --background-hover );
 	--switch-background-disabled: var( --disabled-background );
 	--switch-checked: var( --accent-background );
+	--switch-danger: var( --alert-background );
 	--switch-thumb: var( --background-primary );
 }
 
+// The sizes come from H, the height of the track: 1.125rem rounded to an even number of pixels
+// (18px when <html> has 16px). The width is 2H - 2, the thumb H - 2 at 1px of the edges (inside
+// the border): all in whole pixels, the switch is drawn the same wherever it falls in the page.
+// The px values first: a browser without round() keeps them.
+
 .x4switch {
 	display: flex;
 	flex-direction: row;
 	align-items: center;
 	position: relative;
-    
+
 	gap: 4px;
 	margin-left: 5px;
 	padding: 4px;
@@ -47,62 +53,79 @@
 		}
 	}
 
+	// the track; the input over it takes the click, the focus, and the value for a Form
 	.switch {
-		width: 2.2rem;
-		height: 18px;
 		position: relative;
+		flex: none;
+
+		width: 34px;
+		width: calc( round( 1.125rem, 2px ) * 2 - 2px );
+		height: 18px;
+		height: round( 1.125rem, 2px );
+
+		border: 1px solid var( --switch-border );
+		border-radius: 9px;
+		border-radius: calc( round( 1.125rem, 2px ) / 2 );
+		background-color: var( --switch-background );
+
+		transition: background-color ease 0.2s, border-color ease 0.2s;
 
 		input {
 			position: absolute;
-			width: 100%;
-			height: 100%;
-			appearance: none;
-			padding: 0;
-			margin: 0;
-			left: 0;
-			top: 0;
-			cursor: pointer;
-		}
-			
-		.track {
-			position: absolute;
-			pointer-events: none;
 			left: 0;
 			top: 0;
 			width: 100%;
 			height: 100%;
-			border: 1px solid var( --switch-border );
-
-			background-color: var( --switch-background );
-			border-radius: 9px;
-
-			transition: background-color ease 0.2s;
+			margin: 0;
+			padding: 0;
+			appearance: none;
+			opacity: 0;			// none of the look of a field (its background): the track is under it
+			cursor: pointer;
 		}
 
 		.thumb {
 			position: absolute;
 			pointer-events: none;
-			left: 0.05rem;
-			top: 1px;
+			left: 0;
+			top: 0;
 
-			width: 1rem;
-			height: 1rem;
+			width: 16px;
+			width: calc( round( 1.125rem, 2px ) - 2px );
+			height: 16px;
+			height: calc( round( 1.125rem, 2px ) - 2px );
 
-			border-radius: 8px;
+			border-radius: 50%;
 			background-color: var( --switch-thumb );
 			box-shadow: 0 0 2px rgba(0,0,0,0.5);
 
-			transition: left ease 0.2s;
+			transition: transform ease 0.2s;
 		}
 	}
 
-	&:has(input:checked) {
-		.switch .thumb {
-			left: 1.15rem;
+	// on: the colour on all the track, its border too; the thumb at the other end (H - 2 further)
+	&:has(input:checked) .switch {
+		background-color: var( --switch-checked );
+		border-color: var( --switch-checked );
+
+		.thumb {
+			transform: translateX( 16px );
+			transform: translateX( calc( round( 1.125rem, 2px ) - 2px ) );
 		}
-		.switch .track {
-			background-color: var( --switch-checked );
-			//border-color: var( --color-70 );
+	}
+
+	// danger: the colour of an alert when on
+	&.danger {
+		--switch-checked: var( --switch-danger );
+	}
+
+	// square: the corners of the track and of the thumb barely rounded
+	&.square .switch {
+		border-radius: 3px;
+		border-radius: round( 0.1875rem, 1px );
+
+		.thumb {
+			border-radius: 2px;
+			border-radius: round( 0.125rem, 1px );
 		}
 	}
 
@@ -110,7 +133,7 @@
 		&, * {
 			cursor: not-allowed;
 		}
-		
+
 		input {
 			pointer-events: none;
 		}
@@ -120,9 +143,10 @@
 			color: var( --checkbox-color-disabled );
 		}
 
-		.switch .track,
-		&.x4switch:has(input:checked) .switch .track {
+		.switch,
+		&.x4switch:has(input:checked) .switch {
 			background-color: var( --switch-background-disabled );
+			border-color: var( --switch-border );
 		}
 	}
-}
+}

package/src/components/switch/switch.ts

@@ -31,13 +31,16 @@ interface SwitchProps extends ComponentProps {
 }
 
 /**
- * 
+ * cls "square": the track and the thumb with corners barely rounded; "danger": the colour of an
+ * alert when on.
+ *
  * @cssvar
  * ```
  * --switch-border
  * --switch-background
  * --switch-background-disabled
  * --switch-checked
+ * --switch-danger
  * --switch-thumb
  * ```
  */
@@ -51,12 +54,12 @@ export class Switch extends HBox<SwitchProps> {
 		const inputId = makeUniqueComponentId( );
 
 		this.setContent( [
+			// the track, its thumb in it; the input over them (role switch: a screen reader says "switch, on")
 			new Component( {
 				cls: "switch",
 				content: [
 					// value: sent by a <form> of the browser when checked; a Form of x4 reads a boolean
-					new Input( { type: "checkbox", id: inputId, name: props.name, value: props.value, checked: props.checked } ),
-					new Component( { cls: "track" } ),
+					new Input( { type: "checkbox", id: inputId, name: props.name, value: props.value, checked: props.checked, attrs: { role: "switch" } } ),
 					new Component( { cls: "thumb" } ),
 				]
 	 		} ),

package/src/components/tag/tag.module.scss

@@ -19,8 +19,7 @@
 	--tag-border: var( --border );
 	--tag-border-focus: var( --border-focus );
 	--tag-background: var( --accent-background );
-	--tag-color: var( --text-primary );
-	--tag-icon-color: var( --tag-color );
+	--tag-color: var( --accent-color );
 }
 
 .x4tag {
@@ -37,9 +36,10 @@
 		display: none;
 	}
 
+	// --tag-icon-color is not set by x4: the icon has the color of the text of its tag
 	.x4icon {
 		height: 1em;
-		color: var( --tag-icon-color );
+		color: var( --tag-icon-color, var( --tag-color ) );
 	}
 
 	&> .x4simpletext {
@@ -50,6 +50,6 @@
 
 	&.alert {
 		--tag-color: var( --alert-color );
-		background-color: var( --alert-background );
+		--tag-background: var( --alert-background );
 	}
 }

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%)};
@@ -119,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
 
@@ -156,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/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_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"