x4js 2.0.20 → 2.0.22

package/lib/src/components/dialog/dialog.ts

@@ -1,229 +0,0 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file dialog.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 { Form } from "../form/form.js"
-import { PopupEvents, PopupProps, Popup } from '../popup/popup';
-import { BtnGroup, BtnGroupItem } from "../btngroup/btngroup"
-import { HBox } from '../boxes/boxes';
-import { Label } from '../label/label';
-import { CoreEvent, EventCallback } from '../../core/core_events';
-import { class_ns, getFocusableElements, IComponentInterface, isString, ITabHandler } from '../../core/core_tools';
-import { ComponentEvent } from '../../core/component';
-import { Button } from '../button/button';
-
-import "./dialog.module.scss"
-import close_icon from "./xmark-sharp-light.svg";
-
-
-//let modal_stack: Popup[] = [];
-
-export interface DialogProps extends PopupProps {
-	icon?: string;
-	title: string;
-	form?: Form;
-	buttons: BtnGroupItem[];
-	closable?: boolean | string;
-	modal?: boolean;
-	btnclick?: EventCallback<EvBtnClick>;
-}
-
-
-export interface EvBtnClick extends CoreEvent {
-	button: string;
-}
-
-interface DialogEvents extends PopupEvents {
-	btnclick: EvBtnClick;
-	close: ComponentEvent;
-}
-
-/**
- * 
- */
-
-@class_ns("x4")
-export class Dialog<P extends DialogProps = DialogProps, E extends DialogEvents = DialogEvents> extends Popup<P, E> {
-
-	private form: Form;
-	private _title: Label;
-
-	constructor(props: P) {
-		super({ tag: "dialog", modal: true, ...props });
-
-		this._ismodal = this.props.modal;
-
-		this.mapPropEvents(props, "btnclick");
-
-		this.appendContent([
-			new HBox({
-				cls: "caption",
-				content: [
-					this._title = new Label({
-						id: "title",
-						cls: "caption-element",
-						icon: props.icon,
-						text: props.title
-					}),
-					props.closable ? new Button({
-						id: "closebox",
-						icon: close_icon,
-						tabindex: -1,
-						click: () => { 
-							if( isString(props.closable) ) {
-								this.fire("btnclick", { button: props.closable } );
-							}
-							else {
-								this.close() 
-							}
-						}
-					}) : null,
-				]
-			}),
-			this.form = props.form ? props.form : new Form({}),
-			new BtnGroup({
-				id: "btnbar",
-				reverse: true,
-				items: props.buttons,
-				btnclick: (ev) => { this.fire("btnclick", ev) }
-			})
-		]);
-
-		this.addDOMEvent("keydown", (ev) => {
-
-			if (ev.key == 'Escape') {
-				// todo cancel
-				ev.preventDefault();
-				ev.stopPropagation();
-			}
-			else if (ev.key == 'Enter') {
-				const def = this.query<Button>('button.default');
-				if (def) {
-					ev.preventDefault();
-					ev.stopPropagation();
-
-					def.click();
-				}
-			}
-		})
-	}
-
-	private focusNext( next: boolean) : boolean {
-
-		const focusable = getFocusableElements( this.dom );
-		
-		if (!focusable.length) {
-			return false;
-		}
-		else {
-			const first = focusable[0];
-			const last = focusable[focusable.length - 1];
-			const active = document.activeElement;
-
-			let newf: HTMLElement;
-			if (!next && active === first) {
-				newf = last as HTMLElement;
-			}
-			else if (next && active === last) {
-				newf = first as HTMLElement;
-			}
-			else {
-				const idx = focusable.indexOf(active);
-				if (!next) {
-					newf = focusable[idx - 1] as HTMLElement;
-				}
-				else {
-					newf = focusable[idx + 1] as HTMLElement
-				}
-			}
-
-			if (newf) {
-				newf.focus();
-				return true;
-			}
-
-			return false;
-		}
-	}
-
-	/**
-	 * 
-	 */
-
-	override setContent(form: Form) {
-		this.dom.replaceChild(this.form.dom, form.dom);
-		this.form = form;
-	}
-
-	/**
-	 * 
-	 */
-
-	getForm() {
-		return this.form;
-	}
-
-	/**
-	 * 
-	 */
-
-	getValues() {
-		return this.form.getValues();
-	}
-
-	/**
-	 * 
-	 */
-
-	getButton(name: string) {
-		const btns = this.getBtnBar( );
-		return btns.getButton(name);
-	}
-
-	/**
-	 * 
-	 */
-
-	override queryInterface<T extends IComponentInterface>( name: string ): T {
-		if( name=="tab-handler" ) {
-			const i: ITabHandler = {
-				focusNext: ( n: boolean ) => { return this.focusNext( n ); }
-			};
-
-			//@ts-ignore
-			return i as T;
-		}
-		
-		return super.queryInterface( name );
-	}
-
-	/**
-	 * 
-	 */
-
-	setTitle( title: string ) {
-		this._title.setText( title );
-	}
-
-	/**
-	 * 
-	 */
-
-	getBtnBar( ) {
-		return this.query<BtnGroup>("#btnbar");		
-	}
-}
-
-

package/lib/src/components/dialog/xmark-sharp-light.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" fill="currentColor"><!--!Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path d="M192 233.4L59.5 100.9 36.9 123.5 169.4 256 36.9 388.5l22.6 22.6L192 278.6 324.5 411.1l22.6-22.6L214.6 256 347.1 123.5l-22.6-22.6L192 233.4z"/></svg>

package/lib/src/components/filedrop/cloud-arrow-up.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M144 480C64.5 480 0 415.5 0 336c0-62.8 40.2-116.2 96.2-135.9c-.1-2.7-.2-5.4-.2-8.1c0-88.4 71.6-160 160-160c59.3 0 111 32.2 138.7 80.2C409.9 102 428.3 96 448 96c53 0 96 43 96 96c0 12.2-2.3 23.8-6.4 34.6C596 238.4 640 290.1 640 352c0 70.7-57.3 128-128 128l-368 0zm79-217c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l39-39L296 392c0 13.3 10.7 24 24 24s24-10.7 24-24l0-134.1 39 39c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-80-80c-9.4-9.4-24.6-9.4-33.9 0l-80 80z"/></svg>

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

@@ -1,70 +0,0 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|.2
- * 
- * @file filedrop.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 {
-	--filedrop-border: var( --border );
-	--filedrop-icon-color: var( --accent-background );
-	--filedrop-border-drop-hover: var( --accent-background );
-	--filedrop-icon-color-hover: var( --alert-background );
-}
-
-.x4filedrop {
-	border: 1px solid var( --filedrop-border );
-	border-radius: 4px;
-	cursor: pointer;
-	width: fit-content;
-    padding: 8px;
-	margin: 5px;
-
-	//justify-content: center;
-	align-items: center;
-
-	.x4icon {
-		width: 2em;
-		height: 2em;
-		color: var( --filedrop-icon-color );
-		fill: var( --filedrop-icon-color );
-	}
-
-	&.hit {
-		border-color: var( --filedrop-border-drop-hover );
-		.x4icon {
-			color: var( --filedrop-icon-color-hover );
-			fill: var( --filedrop-icon-color-hover );
-		}
-	}
-
-	&:focus{
-		border-color: var( --ol-button-border-focus );
-		color: var( --ol-button-color-focus );
-		#icon {
-			color: var( --ol-button-color-focus );
-		}
-	}
-
-	&:hover{
-		background-color: var( --ol-button-background-hover );
-		color: var( --ol-button-color-hover );
-	}	
-
-	&:active{
-		background-color: var( --ol-button-background-active );
-		color: var( --ol-button-color-active );
-		#icon {
-			color: var( --button-icon-color );
-		}
-	}	
- }

package/lib/src/components/filedrop/filedrop.ts

@@ -1,131 +0,0 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file filedrop.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 { Component, ComponentEvents, ComponentProps } from '../../core/component';
-import { _tr } from '../../core/core_i18n';
-import { dragManager } from '../../core/core_dragdrop';
-import { CoreEvent, EventCallback } from '../../core/core_events';
-import { class_ns, UnsafeHtml } from '../../core/core_tools';
-
-import { VBox } from '../boxes/boxes';
-import { SimpleText } from '../label/label';
-import { Icon } from '../icon/icon';
-
-import icon_drop from "./cloud-arrow-up.svg"
-import "./filedrop.module.scss"
-
-type LoadCallback = ( files: FileList ) => void;
-
-
-interface FileDialogProps extends ComponentProps {
-	accept: string;	// "image/png,image/jpeg"
-	multiple?: boolean;
-	callback: LoadCallback;
-}
-
-export class FileDialog extends Component {
-
-	constructor( props: FileDialogProps ) {
-		super( { 
-			tag: "input",
-			style: { 
-				display: "none" 
-			},
-			attrs: {
-				type: "file",
-				multiple: props.multiple ?? false,
-				accept: props.accept
-			},
-			dom_events: {
-				change: ( ) => {
-					const files = (this.dom as HTMLInputElement).files;
-					props.callback( files );
-				}
-			}
-		} );
-	}
-
-	showDialog( ) {
-		(this.dom as HTMLInputElement).click( );
-	}
-}
-
-
-
-// ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
-
-export interface EvDropChange extends CoreEvent {
-	files: FileList;
-}
-
-interface FileDropEvents extends ComponentEvents {
-	change: EvDropChange;
-}
-
-interface FileDropProps extends ComponentProps {
-	label?: string | UnsafeHtml;
-	icon?: string;
-	multiple?: boolean;
-	accept: string;	// ex: 'image/*'
-	change: EventCallback<EvDropChange>;
-}
-
-/**
- * 
- */
-
-@class_ns( "x4" )
-export class FileDrop extends VBox<FileDropProps,FileDropEvents> {
-
-	constructor( props: FileDropProps ) {
-		super( props );
-
-		this.mapPropEvents( props, "change" );
-
-		let fileDialog = new FileDialog( {
-			accept: props.accept,
-			multiple: props.multiple,
-			callback: ( files ) => {
-				this.fire( "change", { files } );
-			},
-		});
-
-		this.setContent( [
-			fileDialog,
-			new Icon( { iconId: props.icon ?? icon_drop } ),
-			new SimpleText( { text: props.label ?? _tr.global.filedrop } ),
-		])
-
-		this.setAttribute( "tabIndex", 0 );
-		this.addDOMEvent( "click", ( ) => fileDialog.showDialog() );
-		this.addDOMEvent( "keydown", ( e ) => { if( e.key==" " ) { fileDialog.showDialog() } } );
-
-		dragManager.registerDropTarget( this, async ( cmd, el, infos ) => {
-			if( cmd=="enter" ) {
-				this.addClass( "hit" );
-			}
-			else if( cmd=='leave' ) {
-				this.removeClass( "hit" );
-			}
-			else if( cmd=='drop' ) {
-				if( infos.data.files && infos.data.files.length>0 ) {
-					const files = infos.data.files;
-					this.fire( "change", { files } );
-				}
-			}
-		} );
-	}
-}

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

@@ -1,38 +0,0 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file form.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.
- **/
-
- @use "../shared.scss";
-
-:root {
-	--form--background: var( --background-primary );
-}
-
-.x4form {
-	@extend .vbox;
-	@extend .flex;
-
-	padding: 16px;
-	background-color: var( --color-form );
-
-	&.no-flex {
-		flex-grow: 0;
-	}
-
-	&>.xcontainer {
-
-	}
-}
-

package/lib/src/components/form/form.ts

@@ -1,172 +0,0 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file form.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 { class_ns, IFormElement } from '../../core/core_tools';
-import { Box, BoxProps } from '../boxes/boxes';
-
-import "./form.module.scss"
-
-//type FormValue = string | number | boolean;
-export type FormValues = Record<string,string>;
-
-export interface FormProps extends BoxProps {
-	autoComplete?: boolean;
-}
-
-type ValidationFn = ( values: FormValues, is_valid: boolean ) => boolean;
-
-/**
- * 
- */
-
-@class_ns( "x4" )
-export class Form<P extends FormProps = FormProps> extends Box<P> {
-	
-	private validator: ValidationFn;
-
-	constructor( props: P ) {
-		super( { tag: "form", ...props } );
-
-		if( props.flex===false ) {
-			this.addClass( "no-flex" );
-		}
-
-		if( props.autoComplete!==undefined ) {
-			this.setAutoComplete( props.autoComplete );
-		}
-	}
-
-	/**
-	 * 
-	 */
-
-	private _get_inputs( ) {
-		return this.queryAll( "[name]" );
-	}
-
-	/**
-	 * 
-	 */
-
-	setValues( values: FormValues ) {
-		const items = this._get_inputs( );
-		
-		items.forEach( x => {
-			const ifx = x.queryInterface( "form-element" ) as IFormElement;
-			
-			if( ifx ) {
-				const nme = x.getAttribute( "name" );
-				if( Object.prototype.hasOwnProperty.call(values,nme) ) {
-					ifx.setRawValue( values[nme] );
-				}
-			}
-		});
-
-	}
-
-	/**
-	 * 
-	 */
-
-	getValues( ): FormValues {
-		const result: FormValues = {}
-		const items = this._get_inputs( );
-
-		items.forEach( x => {
-			const ifx = x.queryInterface( "form-element" ) as IFormElement;
-			
-			if( ifx ) {
-				const nme = x.getAttribute( "name" );
-				result[nme] = ifx.getRawValue( );
-			}
-		});
-
-		return result;
-	}
-
-	/**
-	 * 
-	 */
-
-	setAutoComplete( on = true ) {
-		const items = this._get_inputs( );
-		items.forEach( x => {		
-			x.setAttribute( "autocomplete", on ? "on" : "off" );
-		} );
-	}
-
-	/**
-	 * 
-	 */
-
-	setValidator( validator: ValidationFn ) {
-
-		if( !this.validator ) {
-			this.validator = validator;
-			
-			// validation en live des valeurs
-			// disable du bouton ok si pas bon
-			this.addDOMEvent( "focusout", ( ) => this.validate() );
-		}
-	}
-
-	/**
-	 * 
-	 */
-
-	validate( ): FormValues {
-
-		const items = this._get_inputs( );
-		
-		let result: FormValues = {};
-		let is_valid = true;
-
-		for( let x of items ) {
-			const ifx = x.queryInterface( "form-element" ) as IFormElement;
-			
-			if( ifx ) {
-				const nme = x.getAttribute( "name" );
-				result[nme] = ifx.getRawValue( );
-				if( !ifx.isValid() ) {
-					is_valid = false;
-				}
-			}
-		}
-
-		if( this.validator ) {
-			let new_values = {...result};
-			if( !this.validator( new_values, is_valid ) ) {
-				return null;
-			}
-
-			for( let name in result ) {
-				if( new_values[name] != result[name] ) {
-					const x = this.query( `input[${name}"]` );
-					const ifx = x.queryInterface( "form-element" ) as IFormElement;
-					ifx.setRawValue( new_values[name] );
-				}
-			}
-
-			result = new_values;
-		}
-		else if( !is_valid ) {
-			result = null;
-		}
-
-		return result;
-	}
-}
-

package/lib/src/components/gridview/arrow-down-light.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" fill="rgba(0,0,0,0.7)"><!--!Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path d="M180.7 475.3c6.2 6.2 16.4 6.2 22.6 0l176-176c6.2-6.2 6.2-16.4 0-22.6s-16.4-6.2-22.6 0L208 425.4 208 48c0-8.8-7.2-16-16-16s-16 7.2-16 16l0 377.4L27.3 276.7c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6l176 176z"/></svg>

package/lib/src/components/gridview/arrow-up-light.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" fill="rgba(0,0,0,0.7)"><!--!Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path d="M203.3 36.7c-6.2-6.2-16.4-6.2-22.6 0l-176 176c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0L176 86.6V464c0 8.8 7.2 16 16 16s16-7.2 16-16V86.6L356.7 235.3c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-176-176z"/></svg>