x4js 2.0.13 → 2.0.15

package/lib/src/components/textarea/textarea.ts

@@ -15,13 +15,13 @@
  **/
 
 import { BaseProps } from '../input/input';
-import { Component } from '../../core/component';
+import { Component, ComponentProps } from '../../core/component';
 
 import { Label } from '../label/label';
 import { VBox } from '../boxes/boxes';
 
 import "./textarea.module.scss";
-import { class_ns } from '@core/core_tools.js';
+import { class_ns, IFormElement } from '@core/core_tools.js';
 
 /**
  * 
@@ -31,8 +31,57 @@ interface TextAreaProps extends BaseProps {
 	label?: string;
 	value?: string;
 	resize?: boolean;
+	readonly?: boolean;
 }
 
+
+/**
+ * 
+ */
+
+class SimpleTextArea extends Component {
+
+	constructor( props: TextAreaProps ) {
+		super( { ...props, tag: "textarea" } );
+
+		this.setAttribute( "name", props.name );
+		this.setAttribute( "value", props.value+'' );
+
+		if( !props.resize ) {
+			this.setAttribute( "resize", false );
+		}
+
+		if( props.readonly ) {
+			this.setAttribute( "readonly", true );
+		}
+	}
+
+	setText( text: string ) {
+		(this.dom as HTMLTextAreaElement).value = text;
+	}
+
+	getText( ) {
+		return (this.dom as HTMLTextAreaElement).value;
+	}
+
+	queryInterface<T>(name: string): T {
+		if( name=="form-element" ) {
+			const i: IFormElement = {
+				getRawValue: ( ): any => { return this.getText(); },
+				setRawValue: ( v: any ) => { this.setText( v ); },
+				isValid: ( ) => { return true; }
+			};
+
+			//@ts-ignore
+			return i as T;
+		}
+		
+		return super.queryInterface( name );
+	}
+}
+
+
+
 /**
  * 
  */
@@ -40,21 +89,37 @@ interface TextAreaProps extends BaseProps {
 @class_ns( "x4" )
 export class TextArea extends VBox {
 	
-	private _input: Component;
+	private _input: SimpleTextArea;
 
 	constructor( props: TextAreaProps ) {
 		super( props );
 
 		this.setContent( [
 			new Label( { text: props.label }),
-			this._input = new Component( { tag: "textarea" })
+			this._input = new SimpleTextArea( props )
 		])
+	}
+
+	setText( text: string ) {
+		this._input.setText( text );
+	}
+
+	getText( ) {
+		return this._input.getText( );
+	}
 
-		this._input.setAttribute( "name", props.name );
-		this._input.setAttribute( "value", props.value+'' );
+	queryInterface<T>(name: string): T {
+		if( name=="form-element" ) {
+			const i: IFormElement = {
+				getRawValue: ( ): any => { return this.getText(); },
+				setRawValue: ( v: any ) => { this.setText( v ); },
+				isValid: ( ) => { return true; }
+			};
 
-		if( !props.resize ) {
-			this._input.setAttribute( "resize", false );
+			//@ts-ignore
+			return i as T;
 		}
+		
+		return super.queryInterface( name );
 	}
 }

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

@@ -35,6 +35,7 @@
 
 	&> #label {		// hbox
 		border-bottom: 1px solid transparent;
+		justify-content: end;
 
 		&> .x4label {
 			@extend .hbox;
@@ -91,7 +92,8 @@
 		& > #label > .x4label::before {
 			content: "*";
 			font-weight: bold;
-			color: var( --textedit-required )
+			color: var( --textedit-required );
+			margin-right: 2px;
 		}
 	}
 

package/lib/src/components/textedit/textedit.ts

@@ -14,11 +14,12 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-import { Component, ComponentProps, makeUniqueComponentId } from '../../core/component';
+//import { EventCallback } from '@core/core_events.js';
+import { Component, makeUniqueComponentId } from '../../core/component';
 import { class_ns, UnsafeHtml } from '../../core/core_tools';
 
 import { HBox } from '../boxes/boxes';
-import { Input, TextInputProps } from "../input/input"
+import { DateProps, Input, InputProps, NumberProps, TextInputProps, TimeProps } from "../input/input"
 import { Label } from '../label/label';
 
 import "./textedit.module.scss";
@@ -29,19 +30,42 @@ import "./textedit.module.scss";
  * 
  */
 
-interface TextEditProps extends ComponentProps {
+type TextEditInputs = TextInputProps | NumberProps | DateProps | TimeProps;
+
+interface TextEditBase {
 	label: string | UnsafeHtml;
 	labelWidth?: number;
+	inputWidth?: number;		
 	inputId?: string;
+	inputGadgets?: Component[];
+	inputAttrs?: any;
+}
 
-	type?: "text" | "email" | "password";
+type TextEditProps = TextEditInputs & TextEditBase;
+
+/*
+not enougth precise
+interface TextEditProps extends InputProps {
+	label: string | UnsafeHtml;
+	labelWidth?: number;
+	editWidth?: number;		
+	inputId?: string;
+
+	type?: "text" | "email" | "password" | "date" | "number" | "time";
+	name?: string;
 	readonly?: boolean;
 	required?: boolean;
 	value: string | number;
 	placeholder?: string;
+	autofocus?: boolean;
 
 	inputGadgets?: Component[];
+	inputAttrs?: any;
+
+	focus?: EventCallback<EvFocus>;
+	change?: EventCallback<EvChange>;
 }
+*/
 
 /**
  * 
@@ -49,6 +73,9 @@ interface TextEditProps extends ComponentProps {
 
 @class_ns( "x4" )
 export class TextEdit extends HBox {
+
+	private input: Input;
+
 	constructor( props: TextEditProps ) {
 		super( props );
 
@@ -61,23 +88,28 @@ export class TextEdit extends HBox {
 		}
 
 		const gadgets = props.inputGadgets ?? [];
+		const iprops: InputProps = { ...props, id: props.inputId, attrs: props.inputAttrs, width: props.inputWidth };
 
 		this.setContent( [
-			new HBox( { id: "label", width: props.labelWidth, content: [
+			props.label ? new HBox( { id: "label", width: props.labelWidth, content: [
 				new Label( { tag: "label", text: props.label, labelFor: props.inputId } ),
-			]}),
+			]}) : null,
 			new HBox( { id: "edit", content: [
-				new Input( { 
-					type: props.type ?? "text", 
-					readonly: props.readonly, 
-					value: props.value, 
-					id: props.inputId, 
-					required: props.required, 
-					disabled: props.disabled, 
-					placeholder: props.placeholder 
-				} ),
+				this.input = new Input( iprops ),
 				...gadgets,
 			]})
 		])
 	}
+
+	getValue( ) {
+		return this.input.getValue( );
+	}
+
+	setValue( value: string ) {
+		this.input.setValue( value );
+	}
+
+	getInput( ) {
+		return this.input;
+	}
 }

package/lib/src/components/themes.scss

@@ -20,6 +20,7 @@ $color--interval: 8.4%;
 
 :root {
 	--color-primary-a0: #ffffff;
+	--color-primary-a5:  #{lighten($color--base, 35%)};
 	--color-primary-a10:  #{lighten($color--base, $color--interval * 4)};
 	--color-primary-a20: #{lighten($color--base, $color--interval * 3)};
 	--color-primary-a30: #{lighten($color--base, $color--interval * 2)};
@@ -35,6 +36,8 @@ $color--interval: 8.4%;
 	--color-danger-a50: #c01010;
 	--color-danger-a60: #{darken(#c01010,10%)};
 
+	--color-warning-a50: #b67b0d;
+
 	--color-success-a50: #10c01f;
 	--color-success-a60: #{darken(#10c01f,10%)};
 }
@@ -67,6 +70,7 @@ $color--interval: 8.4%;
 
 	// Borders
 	--border: #e1e1e1; // Bordures
+	--border-light: #eaeaea; // Bordures
 	--border-hover: #c2c2c2; // Bordures au survol
 	--border-focus: var( --accent-background ); // Bordures si focus
 
@@ -74,6 +78,9 @@ $color--interval: 8.4%;
 	--alert-background-active: var( --color-danger-a60 );
 	--alert-color: var( --color-primary-a0 );
 
+	--warning-background: var( --color-warning-a50 );
+	--warning-color: var( --color-primary-a0 );
+
 	--success-background: var( --color-success-a50 );
 	--success-background-active: var( --color-success-a60 );
 	--success-color: var( --color-success-a0 );

package/lib/src/components/tickline/tickline.module.scss

@@ -0,0 +1,26 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|.2
+ * 
+ * @file tickline.module.scss
+ * @author Etienne Cochard 
+ * 
+ * @copyright (c) 2024 R-libre ingenierie
+ *
+ * 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.
+ **/
+
+:root {
+	--tickline-axis-color: var( --border );
+	--tickline-color: var( --accent-color );
+	--tickline-background: white;
+}
+
+.x-tick-line {
+	position: relative;
+	background-color: var( --tickline-background );
+}

package/lib/src/components/tickline/tickline.ts

@@ -0,0 +1,82 @@
+import { SvgBuilder, SvgComponent } from '../../core/core_svg';
+import { Color } from '../../core/core_colors';
+import { Component, ComponentProps } from '@core/component.js';
+
+import "./tickline.module.scss"
+
+interface TickLineProps extends ComponentProps {
+	values: number[];
+	min?: number;
+	max?: number;
+	color?: Color;			
+	background?: Color;		
+	type: "bars" | "line";	
+}
+
+
+export class TickLine extends Component<TickLineProps> {
+	
+	constructor( props: TickLineProps ) {
+		super( props );
+
+		this.addDOMEvent( "resized", ( ) => this.update( ) );
+	}
+
+	update( ) {
+		const props = this.props;
+		const vals = props.values;
+
+		if( !vals.length  ) {
+			this.clearContent( );
+			return;
+		}
+		
+		const rc = this.getBoundingRect( );
+		const min = props.min ?? 0;
+		const max = props.max ?? 100;
+
+		const xmul = rc.width/vals.length;
+		const ymul = rc.height/(max-min);
+
+		const bld = new SvgBuilder( );
+
+		if( props.background ) {
+			bld.rect( 0, 0, rc.width, rc.height )
+				.fill( props.background.toHexString() );
+		}
+
+		if( min!=0 ) {
+			bld.path( )
+				.moveTo( 0, 0-min )
+				.lineTo( rc.width, 0-min )
+				.stroke( "var(--tickline-axis-color)", 1 )
+				.antiAlias( false )
+		}
+
+		if( props.type=="line" ) {
+			const pth = bld.path( );
+			for( let x=0; x<vals.length; x++ ) {
+				if( x==0 ) {
+					pth.moveTo( x*xmul, (vals[x]-min)*ymul );
+				}
+				else {
+					pth.lineTo( x*xmul, (vals[x]-min)*ymul );
+				}
+			}
+
+			pth.stroke( props.color ? props.color.toHexString() : "var(--tickline-color)", 1 )
+				.no_fill( );
+		}
+		else {
+			for( let x=0; x<vals.length; x++ ) {
+				bld.rect( x*xmul, (0-min)*ymul, xmul-1, vals[x]*ymul )
+					.fill( props.color ? props.color.toHexString() : "var(--tickline-color)" )
+					.antiAlias( false );
+			}
+		}
+
+
+
+		this.setContent( new SvgComponent( {width: "100%", height: "100%", svg: bld, attrs: { viewport:`0 ${props.min??0} ${vals.length} ${props.max??100}` } } ) );
+	}
+}

package/lib/src/components/tooltips/comments-question.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--!Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path class="fa-secondary" opacity=".4" d="M0 176c0 37.5 13.9 72.3 37.6 100.9L0 352l108.1-21.6C137.7 344.2 171.8 352 208 352c114.9 0 208-78.8 208-176S322.9 0 208 0S0 78.8 0 176zm134.7-52c0-25.8 20.9-46.7 46.7-46.7l47.4 0c29.1 0 52.6 23.6 52.6 52.6c0 18.8-10.1 36.3-26.4 45.6L228 191l0 6.3 0 20-40 0 0-20 0-17.9 0-11.6 10-5.8L235 140.9c3.9-2.3 6.3-6.4 6.3-10.9c0-7-5.7-12.6-12.6-12.6l-47.4 0c-3.7 0-6.7 3-6.7 6.7l0 5.5-40 0 0-5.5zM188 250.7l40 0 0 40-40 0 0-40z"/><path class="fa-primary" d="M134.7 124c0-25.8 20.9-46.7 46.7-46.7l47.4 0c29.1 0 52.6 23.6 52.6 52.6c0 18.8-10.1 36.3-26.4 45.6L228 191l0 6.3 0 20-40 0 0-20 0-17.9 0-11.6 10-5.8L235 140.9c3.9-2.3 6.3-6.4 6.3-10.9c0-7-5.7-12.6-12.6-12.6l-47.4 0c-3.7 0-6.7 3-6.7 6.7l0 5.5-40 0 0-5.5zM188 250.7l40 0 0 40-40 0 0-40zM432 512c-95.6 0-176.2-54.6-200.5-129C348.9 372.9 448 288.3 448 176c0-5.2-.2-10.4-.6-15.5C555.1 167.1 640 243.2 640 336c0 37.5-13.9 72.3-37.6 100.9L640 512 531.9 490.4C502.3 504.2 468.2 512 432 512z"/></svg>

package/lib/src/components/tooltips/tooltips.scss

@@ -17,30 +17,44 @@
 @use "../shared.scss";
 
 :root {
-	--tooltip-background: var( --color-primary-a70 );
-	--tooltip-color: var( --color-primary-a0 );
-	--tooltip-border: var( --border-dark );
+	--tooltip-caption-background: var( --color-primary-a70 );
+	--tooltip-caption-color: white;
+
+	--tooltip-icon-background: white;
+	--tooltip-icon-color: var( --color-primary-a70 );
+
+	--tooltip-background: var( --color-primary-a10 );	//white;
+	--tooltip-color: var( --color-primary-a90 );
+	--tooltip-border: var( --color-primary-a20 );
 }
 
 .x4tooltip {
-	@extend .shadow-lg;
+	@extend .shadow-xl;
+	
 	display: flex;
 	flex-direction: row;
 	border: none;
 	font-size: 90%;
 	position: absolute;
 
+	border: 1px solid var( --tooltip-border ); 
+	background-color: var( --tooltip-background );
+
 	.x4icon {
-		width: 1.6em;
-		height: 100%;
 		padding: 2px 4px;
 		svg {
 			max-height: 100%;
 		}
 
-		background-color: var( --tooltip-background );
-		color: var( --tooltip-color );
-		border: 1px solid var( --tooltip-border );
+		.fa-primary,
+		.fa-secondary {
+			fill: var( --tooltip-icon-color );	
+		}
+
+		//background-color: var( --tooltip-caption-background );
+		color: var( --tooltip-icon-color );
+		width: 2em;
+		height: 2em;
 	}
 
 	#text {
@@ -48,4 +62,11 @@
 		color: var( --tooltip-color );
 		padding: 4px;
 	}
+
+	img {
+		max-width: 100px;
+		max-height: 50px;
+		background-color: white;
+		margin: 4px;
+	}
 }

package/lib/src/components/tooltips/tooltips.ts

@@ -14,8 +14,8 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-import { Component, wrapDOM } from '../../core/component';
-import { class_ns, Point, Rect, Timer, UnsafeHtml, unsafeHtml } from '../../core/core_tools';
+import { Component, componentFromDOM, wrapDOM } from '../../core/component';
+import { class_ns, ITipHandler, Point, Rect, Timer, UnsafeHtml, unsafeHtml } from '../../core/core_tools';
 
 import { HBox } from '../boxes/boxes';
 import { Popup, PopupProps } from '../popup/popup.js';
@@ -23,7 +23,7 @@ import { Icon } from '../icon/icon.js';
 
 import "./tooltips.scss"
 
-import icon from "./circle-info-sharp-light.svg"
+import icon from "./comments-question.svg"
 
 
 let last_hit: HTMLElement = null;
@@ -39,7 +39,12 @@ export function initTooltips( ) {
 		}
 		
 		const c = wrapDOM( ev.target as HTMLElement );
-		const tt = c.getAttribute( "tooltip" );
+		let tt = c.getAttribute( "tooltip" );
+		const ifx = c.queryInterface("tip-handler" ) as ITipHandler;
+		if( ifx ) {
+			tt = ifx.getTip( );
+		}
+
 		if( tt ) {
 			last_hit = ev.target as HTMLElement;
 			const rc = c.getBoundingRect( );
@@ -67,7 +72,7 @@ function showTT( text: string, rc: Rect, pt: Point ) {
 	timer.setTimeout( null, 300, ( ) => {
 		tooltip.setText( unsafeHtml(text) );
 		//tooltip.displayNear( rc, "top left", "bottom left", {x:0,y:4} );
-		tooltip.displayAt( pt.x, pt.y );
+		tooltip.displayAt( pt.x+17, pt.y+17 );
 	} );
 }