x4js 2.0.20 → 2.0.21

package/lib/src/components/input/input.ts

@@ -1,422 +0,0 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file input.ts
- * @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.
- **/
-
-import { EventCallback } from '../../core/core_events';
-import { Component, ComponentEvent, ComponentProps, EvChange, EvFocus } from '../../core/component';
-import { class_ns, formatIntlDate, IComponentInterface, IFormElement, isString } from '../../core/core_tools';
-
-import "./input.module.scss"
-
-export interface BaseProps extends ComponentProps {
-	name?: string;
-	autofocus?: boolean;
-	required?: boolean;
-	readonly?: boolean;
-	placeholder?: string;
-	
-	focus?: EventCallback<EvFocus>;
-	change?: EventCallback<EvChange>;
-}
-
-interface CheckboxProps extends BaseProps {
-	type: "checkbox";
-	value?: boolean | number | string;
-	checked?: boolean;
-}
-
-interface RadioProps extends BaseProps {
-	type: "radio";
-	value?: boolean | number | string;
-	checked?: boolean;
-}
-
-export interface RangeProps extends BaseProps {
-	type: "range";
-	value?: number;
-	min: number;
-	max: number;
-	step?: number;
-}
-
-export interface FileProps extends BaseProps {
-	type: "file";
-	accept: string | string[];
-	value?: never;
-}
-
-
-export interface DateProps extends BaseProps {
-	type: "date";
-	value?: Date | string;
-}
-
-export interface TimeProps extends BaseProps {
-	type: "time";
-	readonly?: boolean;
-	required?: boolean;
-	value?: string;
-}
-
-export interface NumberProps extends BaseProps {
-	type: "number";
-	readonly?: boolean;
-	required?: boolean;
-	value?: number | string;
-	min?: number;
-	max?: number;
-	step?: number;
-}
-
-export interface TextInputProps extends BaseProps {
-	type?: "text" | "email" | "password";
-	readonly?: boolean;
-	required?: boolean;
-	pattern?: string;
-	value?: string | number;
-	spellcheck?: boolean;
-	minlength?: number;
-	maxlength?: number;
-}
-
-
-export type InputProps = TextInputProps | CheckboxProps | RadioProps | RangeProps | DateProps | NumberProps | FileProps | TimeProps;
-
-
-interface InputEvents extends ComponentEvent {
-	focus: EvFocus;
-	change: EvChange;
-}
-
-
-/**
- * 
- */
-
-@class_ns( "x4" )
-export class Input extends Component<InputProps,InputEvents> {
-	constructor( props: InputProps ) {
-		super( { tag: "input", ...props } );
-
-		this.mapPropEvents( props, "focus", "change" );
-
-		this.setAttribute( "type", props.type ?? "text" );
-		this.setAttribute( "name", props.name );
-
-		if( props.autofocus===true ) {
-			this.setAttribute( "autofocus", true );
-		}
-					
-		switch( props.type ) {
-			case "checkbox":
-			case "radio": {
-				const ck = this.dom as HTMLInputElement;
-				ck.checked = props.checked;
-				ck.value = props.value === undefined ? "" : props.value+"";
-				//this.setAttribute( "checked", props.checked );
-				//this.setAttribute( "value", props.value );
-				break;
-			}
-
-			case "range": {
-				this.setAttribute( "min", props.min );
-				this.setAttribute( "max", props.max );
-				this.setAttribute( "step", props.step );
-				this.setAttribute( "value", props.value );
-				break;
-			}
-
-			case "number": {
-				const p = this.props as NumberProps;
-			
-				this.setAttribute( "required", p.required );
-				this.setAttribute( "readonly", p.readonly );
-				this.setAttribute( "min", p.min );
-				this.setAttribute( "max", p.max );
-				this.setAttribute( "step", p.step );
-				//this.setAttribute( "value", p.value+'' );
-				this.setNumValue( isString(p.value) ? parseFloat(p.value) : p.value, -2 );
-
-				this.addDOMEvent( "wheel", ( e: WheelEvent ) => {
-					if( this.hasFocus() ) { // only if has focus
-						e.preventDefault( );
-						let v = this.getNumValue();
-						const delta = e.deltaY < 0 ? 1 : -1;
-						v += (p.step ? p.step : 1) * delta;
-						this.setNumValue( v, -2 );
-
-						this.dom.dispatchEvent(new Event('input')); 
-					}
-				}, );
-				break;
-			}
-
-			case "date": {
-				this.setAttribute( "required", props.required );
-
-				let v = props.value;
-				if( v instanceof Date ) {
-					this.setAttribute( "value", formatIntlDate( v, "Y-M-D" ) );
-				}
-				else if( props.value!==null && props.value!==undefined ) {
-					this.setAttribute( "value", v );
-				}
-
-				break;
-			}
-
-			case "file": {
-				let v: string;
-				if( Array.isArray(props.accept) ) {
-					v = props.accept.join("," );
-				}
-				else {
-					v = props.accept;
-				}
-
-				this.setAttribute( "accept", v );
-				break;
-			}
-
-			case "time": {
-				this.setAttribute( "required", props.required );
-				if( props.value!==null && props.value!==undefined ) {
-					this.setAttribute( "value", props.value );
-				}
-				break;
-			}
-
-			default: {
-				this.setAttribute( "required", props.required );
-				this.setAttribute( "readonly", props.readonly );
-
-				if( props.value!==null && props.value!==undefined ) {
-					this.setAttribute( "value", props.value );
-				}
-
-				if( props.pattern!==null && props.pattern!==undefined ) {
-					this.setAttribute( "pattern", props.pattern );
-				}
-
-				if( props.placeholder!==null && props.placeholder!==undefined ) {
-					this.setAttribute( "placeholder", props.placeholder );
-				}
-
-				if( props.spellcheck===false ) {
-					this.setAttribute( "spellcheck", false );
-				}
-
-				if( props.minlength!==undefined ) {
-					this.setAttribute( "minlength", props.minlength );
-				}
-				
-				if( props.maxlength!==undefined ) {
-					this.setAttribute( "maxlength", props.maxlength );
-				}
-
-				break;
-			}
-		}
-
-		this.addDOMEvent( "blur", ( e ) => { this.on_focus(e,true);} );
-		this.addDOMEvent( "focus", ( e ) => { this.on_focus(e,false);} );
-		this.addDOMEvent( "input", ( e ) => { this.on_change(e as InputEvent); });
-	}
-
-	/**
-	 * 
-	 */
-
-	private on_focus( ev: FocusEvent, focus_out: boolean ) {
-		const event: EvFocus = { focus_out }
-		this.fire( "focus", event );
-
-		if( event.defaultPrevented ) {
-			ev.preventDefault( );
-		}
-	}
-
-	/**
-	 * 
-	 */
-
-	private on_change( ev: InputEvent ) {
-
-		const event: EvChange = { value: this.getValue() };
-		this.fire( "change", event );
-
-		if( event.defaultPrevented ) {
-			ev.preventDefault( );
-		}
-	}
-
-	/**
-	 * @returns 
-	 */
-
-	public getValue( ) {
-		return (this.dom as HTMLInputElement).value;
-	}
-	
-	/**
-	 * 
-	 * @param value 
-	 */
-	
-	public setValue( value: string ) {
-		(this.dom as HTMLInputElement).value = value+"";
-	}
-
-	/**
-	 * 
-	 * @returns 
-	 */
-	
-	public getNumValue( defNan?: number ) {
-		const v = parseFloat( this.getValue() );
-		if( isNaN(v) && defNan!==undefined ) {
-			return defNan;
-		}
-		return v;
-	}
-
-	/**
-	 * 
-	 * @param value 
-	 * @param ndec number of decimals or -1 for auto, -2 as prop.step
-	 * 
-	 */
-
-	public setNumValue( value: number, ndec = -1 ) {
-		
-		if( ndec==-2 && this.props.type=='number' ) {
-			const p = this.props as NumberProps;
-
-			if( p.step<1 ) {
-				let ndec = -Math.floor(Math.log10(p.step ?? 1) );
-				return this.setValue( value.toFixed(ndec) );
-			}
-			else if( p.step>1 ) {
-				return this.setValue( value.toFixed() );
-			}
-		}
-		else if( ndec>=0 ) {
-			return this.setValue( value.toFixed(ndec) );
-		}
-
-		this.setValue( value+"" );
-	}
-
-	/**
-	 * @return the checked value
-	 */
-
-	public getCheck() {
-		const d = this.dom as HTMLInputElement;
-		return d.checked;
-	}
-
-	/**
-	 * change the checked value
-	 * @param {boolean} ck new checked value	
-	 */
-
-	public setCheck(ck: boolean) {
-		const d = this.dom as HTMLInputElement;
-		d.checked = ck;
-	}
-
-	/**
-	 * 
-	 */
-
-	public setReadOnly( ro: boolean ) {
-		const d = this.dom as HTMLInputElement;
-		d.readOnly = ro;
-	}
-
-	/**
-	 * select all the text
-	 */
-
-	public selectAll( ) {
-		const d = this.dom as HTMLInputElement;
-        d.select(); 
-	}
-
-	/**
-	 * select a part of the text
-	 * @param start 
-	 * @param length 
-	 */
-
-	public select( start: number, length: number = 9999 ) : void {
-		const d = this.dom as HTMLInputElement;
-		d.setSelectionRange( start, start+length );
-	}
-
-	/**
-	 * get the selection as { start, length }
-	 */
-
-	public getSelection( ) {
-		const d = this.dom as HTMLInputElement;
-
-		return {
-			start: d.selectionStart,
-			length: d.selectionEnd - d.selectionStart,
-		};
-	}
-
-	/**
-	 * 
-	 */
-
-	public isValid( ) {
-
-		if( (this.props as any).required ) {
-			const v = this.getValue( );
-			if( v==="" ) {
-				return false;
-			}
-		}
-
-		return true;
-	}
-
-	/**
-	 * 
-	 */
-
-	override queryInterface<T extends IComponentInterface>( name: string ): T {
-		if( name=="form-element" ) {
-			const i: IFormElement = {
-				getRawValue: ( ): any => { return this.getValue(); },
-				setRawValue: ( v: any ) => { this.setValue(v); },
-				isValid: ( ) => { return this.isValid(); }
-			};
-
-			//@ts-ignore
-			return i as T;
-		}
-		
-		return super.queryInterface( name );
-	}
-}
-
-
-
-
-

package/lib/src/components/keyboard/arrow-up.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" fill="currentColor"><!--!Font Awesome Free 6.7.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2 160 448c0 17.7 14.3 32 32 32s32-14.3 32-32l0-306.7L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z"/></svg>

package/lib/src/components/keyboard/delete-left.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" fill="currentColor"><!--!Font Awesome Free 6.7.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M576 128c0-35.3-28.7-64-64-64L205.3 64c-17 0-33.3 6.7-45.3 18.7L9.4 233.4c-6 6-9.4 14.1-9.4 22.6s3.4 16.6 9.4 22.6L160 429.3c12 12 28.3 18.7 45.3 18.7L512 448c35.3 0 64-28.7 64-64l0-256zM271 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z"/></svg>

package/lib/src/components/keyboard/eye-slash.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" fill="currentColor"><!--!Font Awesome Free 6.7.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zm151 118.3C226 97.7 269.5 80 320 80c65.2 0 118.8 29.6 159.9 67.7C518.4 183.5 545 226 558.6 256c-12.6 28-36.6 66.8-70.9 100.9l-53.8-42.2c9.1-17.6 14.2-37.5 14.2-58.7c0-70.7-57.3-128-128-128c-32.2 0-61.7 11.9-84.2 31.5l-46.1-36.1zM394.9 284.2l-81.5-63.9c4.2-8.5 6.6-18.2 6.6-28.3c0-5.5-.7-10.9-2-16c.7 0 1.3 0 2 0c44.2 0 80 35.8 80 80c0 9.9-1.8 19.4-5.1 28.2zm9.4 130.3C378.8 425.4 350.7 432 320 432c-65.2 0-118.8-29.6-159.9-67.7C121.6 328.5 95 286 81.4 256c8.3-18.4 21.5-41.5 39.4-64.8L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5l-41.9-33zM192 256c0 70.7 57.3 128 128 128c13.3 0 26.1-2 38.2-5.8L302 334c-23.5-5.4-43.1-21.2-53.7-42.3l-56.1-44.2c-.2 2.8-.3 5.6-.3 8.5z"/></svg>

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

@@ -1,134 +0,0 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|.2
- * 
- * @file keyboard.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 {
-	--keyboard-key-background: #33302d;
-	--keyboard-hilite-color: #5ba921;
-}
-
-.x4keyboard {
-	z-index: 2000;
-    position: absolute !important;
-    width: 100vw;
-	height: 14rem;
-	bottom: 0;
-
-	background-color: rgba(0,0,0,0.9);
-	
-	box-sizing: border-box;
-	padding: 4px;
-
-	#kb {
-		width: 100vw;
-		max-width: 800px;
-	}
-	
-	.line {
-		flex-grow: 10;
-		position: relative;
-	}
-
-	.mi {
-		font-family: 'Material Icons';
-		font-size: 22px;
-		text-align: center;
-	}
-	
-	.tch {
-		cursor: pointer;
-
-		flex-grow: 10;
-		flex-basis: 44px;
-
-		display: flex;
-		align-items: center;
-		
-		div {
-			width: 100%;
-		}
-		
-		color: white;
-		text-align: center;
-		
-		background-color: var( --keyboard-key-background);
-		border: 1px solid var( --keyboard-key-background);
-
-		border-radius: 4px;
-		margin: 2px 4px;
-		box-sizing: border-box;
-
-		&:hover {
-			border: 1px solid var( --keyboard-hilite-color);
-		}
-
-		&:active {
-			background-color: var( --keyboard-hilite-color);
-			color: var( --keyboard-key-background);
-		}
-	}
-
-
-	.cplace {
-		visibility: hidden;
-	}
-
-	.kbicon {
-		div {
-			width: 0;
-		}
-	}
-
-	.cret {
-		color: var( --keyboard-hilite-color);
-		font-weight: bold;
-	}
-
-	.cdel,
-	.cshift,
-	.chide {
-		.x4icon {
-			margin: auto;
-			color: var( --keyboard-hilite-color);
-		}
-	}
-
-	//		color: rgba(255,255,255,0.3);
-
-	.lower,
-	.upper {
-
-		.cspace { 
-			flex-basis: 689px;
-		}
-
-		.cret {
-			flex-basis: 84px;
-		}
-
-		.cshift {
-			flex-basis: 60px;
-		}
-
-		.chide {
-			flex-basis: 88px;
-		}
-
-		.cnum {
-			flex-basis: 88px;
-		}
-	}
-}
-