x4js 2.0.20 → 2.0.21

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

@@ -1,26 +0,0 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|.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

@@ -1,82 +0,0 @@
-import { SvgBuilder, SvgComponent } from '../../core/core_svg';
-import { Color } from '../../core/core_colors';
-import { Component, ComponentProps } from '../../core/component';
-
-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/circle-info-sharp-light.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"  fill="currentColor"> <!--!Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path d="M256 32a224 224 0 1 1 0 448 224 224 0 1 1 0-448zm0 480A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM192 352v32h16 96 16V352H304 272V240 224H256 216 200v32h16 24v96H208 192zm88-168V136H232v48h48z"/></svg>

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

@@ -1 +0,0 @@
-<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

@@ -1,72 +0,0 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file tooltips.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 {
-	--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-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 {
-		padding: 2px 4px;
-		svg {
-			max-height: 100%;
-		}
-
-		.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 {
-		background-color: var( --tooltip-background );
-		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

@@ -1,109 +0,0 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file tooltips.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, 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';
-import { Icon } from '../icon/icon';
-
-import "./tooltips.scss"
-
-import icon from "./comments-question.svg"
-
-
-let last_hit: HTMLElement = null;
-let tooltip: Tooltip = null;
-
-const timer = new Timer( );
-
-export function initTooltips( ) {
-
-	document.addEventListener( "mouseenter", ( ev: MouseEvent ) => {
-		if( ev.target===document ) {
-			return;
-		}
-		
-		const c = wrapDOM( ev.target as HTMLElement );
-		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( );
-			showTT( tt, rc, { x:ev.pageX,y:ev.pageY } );
-		}
-
-	}, true );
-
-	document.addEventListener( "mouseleave", ( ev: Event ) => {
-		//console.log( "leave", ev.target );
-
-		if( last_hit && ev.target==last_hit ) {
-			last_hit = null;
-			closeTT( );
-		}
-
-	}, true );
-}
-
-function showTT( text: string, rc: Rect, pt: Point ) {
-	if( !tooltip ) {
-		tooltip = new Tooltip( { } );
-	}
-
-	timer.setTimeout( null, 300, ( ) => {
-		tooltip.setText( unsafeHtml(text) );
-		//tooltip.displayNear( rc, "top left", "bottom left", {x:0,y:4} );
-		tooltip.displayAt( pt.x+17, pt.y+17 );
-	} );
-}
-
-function closeTT( ) {
-	tooltip.show( false );
-	timer.clearTimeout( null );
-}
-
-/**
- * 
- */
-
-@class_ns( "x4" )
-class Tooltip extends Popup {
-
-	constructor( props: PopupProps ) {
-		super( props );
-
-		this.setContent( 
-			new HBox( {content: [
-				new Icon( { iconId: icon } ),
-				new Component( { id: "text" } )
-			]} )
-		);
-	}
-
-	/**
-	 * 
-	 */
-
-	setText( text: string|UnsafeHtml )	{
-		this.query( "#text" ).setContent( text );
-	}
-}

package/lib/src/components/treeview/chevron-down-light.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor"><!--!Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path d="M267.3 395.3c-6.2 6.2-16.4 6.2-22.6 0l-192-192c-6.2-6.2-6.2-16.4 0-22.6s16.4-6.2 22.6 0L256 361.4 436.7 180.7c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6l-192 192z"/></svg>

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

@@ -1,185 +0,0 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file treeview.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 {
-
-	--treeview-background: white;
-
-	--treeitem-backgound-hover: var( --background-secondary );
-	--treeitem-color-hover: var( );
-
-	--treeitem-background-sel: var( --accent-background );
-	--treeitem-color-sel: var( --accent-color );
-	
-	--treeview-item-color-sel-disabled: var( --disabled-background );
-	--treeview-item-color-disabled: var( --disabled-color-dark );
-
-
-	--treeitem-backgound-active: var( --accent-background-active);
-	--treeitem-color-active: var( --accent-color-active );
-}
-
-.x4treeview {
-	@extend .vbox;
-
-	overflow-y: auto;
-	height: 100%;
-	margin: 5px;
-
-	outline: none;
-	
-	border: 1px solid var( --border );
-	background: var( --treeview-background );
-
-	&:focus {
-		border: 1px solid var( --border-focus );
-	}
-
-	&>.body {
-		width: 100%;
-		flex-basis: 0;
-		overflow-y: auto;
-		overflow-x: auto;
-		outline: none;
-		position: relative;
-
-		&> .x4viewport {
-			// child + subitems
-			.x4ctreeviewitem {
-				&>.label {
-					gap: 4px;
-
-					.x4label, .x4icon {
-						color: inherit;
-					}
-
-					.x4icon {
-						width: 16px;
-					}
-
-					padding: 4px;
-
-					&:hover {
-						background-color: var( --treeitem-backgound-hover );
-					}
-
-					&.selected {
-						background-color: var( --treeitem-background-sel );
-						color: var( --treeitem-color-sel );
-					}
-
-					&:active{
-						background-color: var( --accent-background-active );
-						color: var( --accent-color-active );
-					}	
-				}
-
-				&>.body:not(:first-child) {
-					padding-left: 24px;
-				}
-
-				&>.body {
-					transition: opacity 0.5s ease;
-				}
-
-				&.folder {
-					&> .label {
-						display: flex;
-						flex-direction: row;
-						align-items: center;
-
-						&>.x-icon {
-							transform: rotate( 0deg );
-							transition: transform 0.2s ease;
-
-							width: 16px;
-							height: 16px;
-
-							cursor: pointer;
-						}
-					}
-
-					&>.body {
-						overflow: hidden;
-					}
-				
-					&:not(.open) {
-						&>.body {
-							//display: none;
-							height: 0;
-							opacity: 0;
-						}
-
-						&>.label>.x4icon {
-							transform: rotate( -90deg );
-						}
-					}
-				}
-			}
-		}
-	}
-
-	&> #footer {
-		border-top: 1px solid var(--border);
-		margin: 0;
-
-		&.x4btngroup {
-			gap: 0px;
-
-			.x4button {
-				background-color: var( --ol-button-background );
-				color: var( --ol-button-color );
-				margin: 0;
-								
-				.x4icon {
-					height: 1.5em;
-					width: 1.5em;
-				}
-
-				&: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 );
-					}
-				}	
-			}
-		}
-	}
-
-	&[disabled] {
-		cursor: not-allowed;
-		border-color: var( --border );
-		color: var( --treeview-item-color-disabled );
-
-		&>.body {
-			.x4viewport {
-				pointer-events: none;
-				.x4item {
-					&.selected {
-						background-color: var( --treeview-item-color-sel-disabled );
-					}
-				}
-			}
-		}
-	}
-}