x4js 2.0.18 → 2.0.21

package/src/components/listbox/listbox.module.scss

@@ -46,7 +46,7 @@
 	outline: none;
 
 	&>.x4header {
-		border-bottom: 1px solid var( --color-gray-3 );
+		border-bottom: 1px solid var( --border );
 	}
 
 	&>.body {
@@ -59,45 +59,45 @@
 
 		&> .x4viewport {
 			display: table;
+		}
+
+		.x4item {
+			@extend .flex;
 			
-			.x4item {
-				@extend .flex;
-				
-				padding: 4px;
-				background-color: transparent;
-				color: var( --color-gray-9 );
+			padding: 4px;
+			background-color: transparent;
+			color: var( --text-primary );
 
-				&> .x4label {
-					color: inherit;
-					padding: 2px 6px;
-				
-					#icon {
-						color: var( --listbox-icon-color );
-						fill: var( --listbox-icon-color );
-					}
+			&> .x4label {
+				color: inherit;
+				padding: 2px 6px;
+			
+				#icon {
+					color: var( --listbox-icon-color );
+					fill: var( --listbox-icon-color );
 				}
+			}
 
-				&:hover {
-					background-color: var( --listbox-item-background-hover );
-				}
+			&:hover {
+				background-color: var( --listbox-item-background-hover );
+			}
 
-				&.selected {
-					background-color: var( --listbox-item-background-sel );
-					color: var( --listbox-item-color-sel );
+			&.selected {
+				background-color: var( --listbox-item-background-sel );
+				color: var( --listbox-item-color-sel );
 
-					&> .x4label {
-						#icon {
-							color: var( --listbox-item-color-sel );
-							fill: var( --listbox-item-color-sel );
-						}
+				&> .x4label {
+					#icon {
+						color: var( --listbox-item-color-sel );
+						fill: var( --listbox-item-color-sel );
 					}
 				}
-
-				//&:active{
-					//background-color: var( --color-80 );
-					//color: var(--color-0);
-				//}	
 			}
+
+			//&:active{
+				//background-color: var( --color-80 );
+				//color: var(--color-0);
+			//}	
 		}
 	}
 
@@ -138,6 +138,10 @@
 				&:focus {
 					background-color: var( --ol-button-background-hover );
 				}
+
+				&:disabled {
+					color: var( --disabled-color-dark );
+				}
 			}
 		}
 	}		

package/src/components/listbox/listbox.ts

@@ -15,12 +15,14 @@
  **/
 
 import { Component, ComponentEvent, ComponentEvents, componentFromDOM, ComponentProps, EvChange, EvClick, EvContextMenu, EvDblClick, EvSelectionChange } from '../../core/component';
-import { EventCallback } from '../../core/core_events.js';
-import { kbNav, class_ns, isArray, UnsafeHtml } from '@core/core_tools.js';
+import { EventCallback } from '../../core/core_events';
+import { kbNav, class_ns, isArray, UnsafeHtml, asap } from '../../core/core_tools';
 
 import { ScrollView, Viewport } from '../viewport/viewport';
-import { HBox } from '../boxes/boxes.js';
-import { Label } from '../label/label.js';
+import { Header } from '../header/header';
+
+import { HBox } from '../boxes/boxes';
+import { Label } from '../label/label';
 
 import "./listbox.module.scss"
 
@@ -55,7 +57,7 @@ interface ListboxEvents extends ComponentEvents {
 interface ListboxProps extends Omit<ComponentProps,'content'> {
 	items?: ListItem[];
 	renderer?: ( item: ListItem ) => Component;
-	//header?: Header;
+	header?: Header;
 	footer?: Component,
 	checkable?: true,
 	multisel?: true,
@@ -98,8 +100,12 @@ export class Listbox extends Component<ListboxProps,ListboxEvents> {
 			props.footer.setAttribute( "id", "footer" );
 		}
 
+		if( props.header ) {
+			props.header.setAttribute( "id", "header" );
+		}
+
 		this.setContent( [
-			//props.header ? props.header : null,
+			props.header ? props.header : null,
 			scroller,
 			props.footer,
 		] );
@@ -342,7 +348,12 @@ export class Listbox extends Component<ListboxProps,ListboxEvents> {
 
 		if( !ids.length ) {
 			if( this._multisel.size ) {
-				this.clearSelection( );
+				if( notify ) {
+					this.clearSelection( );
+				}
+				else {
+					this._clearSelection( );
+				}
 			}
 
 			return;
@@ -361,7 +372,9 @@ export class Listbox extends Component<ListboxProps,ListboxEvents> {
 				}
 			});
 
-			this.fire( "selectionChange", { selection: this.getSelection(), empty: this._multisel.size==0 } );
+			if( notify ) {
+				this.fire( "selectionChange", { selection: this.getSelection(), empty: this._multisel.size==0 } );
+			}
 		}
 	}
 	
@@ -411,15 +424,29 @@ export class Listbox extends Component<ListboxProps,ListboxEvents> {
 
 		this.clearSelection( );
 		this._view.clearContent( );
-		this._items = items;
+		this._items = items ?? [];
 
-		if( items ) {
+		let upsel = false;
+
+		if( this._items.length ) {
 			const content = items.map( x => this.renderItem(x) );
 			this._view.setContent( content );
 
 			if( keepSel ) {
 				this.select( oldSel );
 			}
+			else {
+				upsel = true;
+			}
+		}
+		else {
+			upsel = true;
+		}
+		
+		if( upsel ) {
+			this.setTimeout( "sel", 100, ( ) => {
+				this.fire( "selectionChange", { selection: [], empty: true } );
+			} );
 		}
 	}
 
@@ -452,7 +479,7 @@ export class Listbox extends Component<ListboxProps,ListboxEvents> {
 	 * 
 	 */
 
-	filter( filter: string ) {
+	filter( filter: string | RegExp ) {
 		const childs = this._view.enumChildComponents( false );
 		
 		if( !filter ) {
@@ -460,13 +487,24 @@ export class Listbox extends Component<ListboxProps,ListboxEvents> {
 		}
 		else {
 			// get list of visible items
-			const filtred = this._items
-					.filter( x => x.text.includes(filter) )
-					.map( x => x.id+'' );
+			let filtred: Set<ListboxID>;
+
+			if( filter instanceof RegExp ) {
+				const f = filter as RegExp;
+				filtred = new Set( this._items
+						.filter( x => f.test(x.text as string) )
+						.map( x => x.id ) ); 
+			}
+			else {
+				const f = filter.toUpperCase( );
+				filtred = new Set( this._items
+					.filter( x => x.text.toUpperCase().includes(f) )
+					.map( x => x.id ) );
+			}
 
 			// now hide all elements not in list
 			childs.forEach( x => {
-				x.show( filtred.includes( x.getInternalData( "id" ) ) );
+				x.show( filtred.has( x.getInternalData( "id" ) ) );
 			});
 		}
 	}

package/src/components/messages/messages.ts

@@ -16,7 +16,7 @@ import "./messages.module.scss";
 
 import error_icon from "./circle-exclamation.svg";
 import pen_icon from "./pen-field.svg";
-import { Component } from '@core/component.js';
+import { Component } from '../../core/component';
 
 export interface MessageBoxProps extends DialogProps {
 	message: string;
@@ -209,7 +209,21 @@ export class PromptBox extends Dialog<DialogProps>
 
 			box.show();
 		} );
+	}
+
+	static show(  msg: string | UnsafeHtml, editor: Component, title: string, callback: ( btn: string ) => boolean | Promise<boolean> | Promise<void> ) {
 
+		const box = this._create( msg, editor, title );
+	
+		box.on( "btnclick", ( ev ) => {
+			asap( async ( ) => {
+				if( await callback( ev.button )!==false ) {
+					box.close() 
+				}
+			});
+		});
+
+		box.show();
 	}
 }
 

package/src/components/notification/notification.ts

@@ -14,14 +14,14 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-import { ComponentProps } from '../../core/component.js';
-import { class_ns, Rect, UnsafeHtml } from '../../core/core_tools.js';
+import { ComponentProps } from '../../core/component';
+import { class_ns, Rect, UnsafeHtml } from '../../core/core_tools';
 
-import { Popup } from '../popup/popup.js';
-import { HBox, VBox } from '../boxes/boxes.js';
-import { Icon } from '../icon/icon.js';
-import { Label } from '../label/label.js';
-import { Button } from '../button/button.js';
+import { Popup } from '../popup/popup';
+import { HBox, VBox } from '../boxes/boxes';
+import { Icon } from '../icon/icon';
+import { Label } from '../label/label';
+import { Button } from '../button/button';
 
 import "./notification.module.scss";
 
@@ -72,7 +72,7 @@ export class Notification extends Popup {
 		const _icon = new Icon( { iconId: icon } );
 		if( props.loading ) {
 			_icon.addClass( "rotate" );
-			this.props.modal = true;
+			//this.props.modal = true;
 		}
 
 		this.setContent( new HBox( { 

package/src/components/popup/popup.ts

@@ -17,7 +17,7 @@
 import { Component, ComponentEvent, ComponentEvents, ComponentProps, componentFromDOM, makeUniqueComponentId } from "../../core/component"
 
 import { CSizer } from '../sizers/sizer';
-import { Rect, Point, class_ns, asap } from '../../core/core_tools.js';
+import { Rect, Point, class_ns, asap } from '../../core/core_tools';
 import { Box } from '../boxes/boxes'
 
 import "./popup.module.scss"
@@ -178,8 +178,19 @@ export class Popup<P extends PopupProps = PopupProps, E extends PopupEvents = Po
 		this.__remove( );
 
 		if( this._ismodal ) {
-			modal_stack.pop( );
-			this._hideModalMask( );
+			// modal1.show()
+			// modal2.show()
+			// modal1.hide()
+			if( modal_stack[modal_stack.length-1]!=this ) {
+				const idx = modal_stack.findIndex( x => x===this );
+				if( idx>=0 ) {
+					modal_stack.splice( idx, 1 );
+				}
+			}
+			else {
+				modal_stack.pop( );
+				this._hideModalMask( );
+			}
 		}
 
 		// remove from popup list

package/src/components/progress/progress.ts

@@ -14,7 +14,7 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-import { class_ns } from '@core/core_tools.js';
+import { class_ns } from '../../core/core_tools';
 import { Component, ComponentProps } from '../../core/component';
 
 import "./progress.module.scss";

package/src/components/propgrid/propgrid.ts

@@ -22,7 +22,7 @@ import { Input, InputProps } from "../input/input"
 import { ListItem } from "../listbox/listbox"
 import { Label, SimpleText } from "../label/label"
 import { class_ns, isFunction } from '../../core/core_tools';
-import { Icon } from '../components.js'
+import { Icon } from '../components'
 
 import "./progrid.module.scss"
 import updown_icon from "./updown.svg"
@@ -81,7 +81,7 @@ export class PropertyGrid extends VBox {
 
 	setItems( _grps: PropertyGroup[] ) {
 
-		this.groups = _grps;
+		this.groups = _grps.filter( x => !!x );
 		//this.groups.sort( (a,b) => {return a.title>b.title ? 1 : 0} );
 
 		let items: Component[] = [];
@@ -89,7 +89,9 @@ export class PropertyGrid extends VBox {
 		for( const g of this.groups ) {
 			items.push( this.makeGroupHeader(g) );
 			g.items.forEach( i => {
-				items.push( this.makePropertyRow(i) );
+				if( i ) {
+					items.push( this.makePropertyRow(i) );
+				}
 			});
 		}
 

package/src/components/radio/radio.ts

@@ -15,8 +15,8 @@
  **/
 
 import { Component, ComponentEvents, ComponentProps, EvChange, makeUniqueComponentId } from '../../core/component';
-import { class_ns } from '@core/core_tools';
-import { EventCallback } from '@core/core_events';
+import { class_ns } from '../../core/core_tools';
+import { EventCallback } from '../../core/core_events';
 
 import { Label } from '../label/label';
 import { Input } from '../input/input'

package/src/components/rating/rating.ts

@@ -14,15 +14,15 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-import { Component, ComponentEvents, componentFromDOM, ComponentProps, EvChange } from '../../core/component.js';
-import { EventCallback } from '../../core/core_events.js';
-import { HBox } from '../boxes/boxes.js';
-import { Input } from '../input/input.js';
-import { Icon } from '../icon/icon.js';
+import { Component, ComponentEvents, componentFromDOM, ComponentProps, EvChange } from '../../core/component';
+import { EventCallback } from '../../core/core_events';
+import { HBox } from '../boxes/boxes';
+import { Input } from '../input/input';
+import { Icon } from '../icon/icon';
 
 import "./rating.module.scss"
 import star_icon from "./star-sharp-solid.svg"
-import { class_ns } from '@core/core_tools.js';
+import { class_ns } from '../../core/core_tools';
 
 interface RatingEventMap extends ComponentEvents {
 	change: EvChange;

package/src/components/select/select.ts

@@ -15,7 +15,7 @@
  **/
 
 
-import { EventCallback } from '../../core/core_events.js';
+import { EventCallback } from '../../core/core_events';
 import { Component, ComponentEvent, ComponentProps, EvChange, EvFocus  } from '../../core/component';
 import { class_ns } from '../../core/core_tools';
 

package/src/components/sizers/sizer.ts

@@ -15,7 +15,7 @@
  **/
 
 import { Component, ComponentEvent, ComponentEvents, ComponentProps, componentFromDOM } from '../../core/component';
-import { class_ns, Point } from '../../core/core_tools.js';
+import { class_ns, Point } from '../../core/core_tools';
 
 import "./sizer.module.scss"
 
@@ -23,7 +23,7 @@ import "./sizer.module.scss"
  * 
  */
 
-interface EvSizeChange extends ComponentEvent {
+export interface EvSizeChange extends ComponentEvent {
 	size: number;
 }
 
@@ -33,7 +33,7 @@ interface CSizerEvent extends ComponentEvents {
 	stop: ComponentEvent;
 }
 
-type SizerType = "left" | "top" | "right" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
+type SizerType = "left" | "top" | "right" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right" ;
 
 /**
  * 
@@ -117,11 +117,11 @@ export class CSizer extends Component<ComponentProps,CSizerEvent> {
 		}
 
 		if( this._type.includes("right") ) {
-			//nr.left = rc.left;
 			nr.width = (pt.x-rc.left);
-		}
+			}
 
 		this._ref.setStyle( nr );
+		//this._ref.setStyleValue( "flexGrow", 0 );
 
 		const nrc = this._ref.getBoundingRect( );
 		this.fire( "resize", { size: horz ? nrc.width : nrc.height })

package/src/components/slider/slider.ts

@@ -14,12 +14,12 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-import { EventCallback } from '@core/core_events.js';
+import { EventCallback } from '../../core/core_events';
 import { Component, ComponentEvents, ComponentProps, EvChange } from '../../core/component';
-import { class_ns, Rect } from '../../core/core_tools.js';
+import { class_ns, Rect } from '../../core/core_tools';
 
 import { HBox } from '../boxes/boxes';
-import { Input } from '../input/input.js';
+import { Input } from '../input/input';
 
 import './slider.module.scss';
 

package/src/components/switch/switch.ts

@@ -16,13 +16,13 @@
 
 import { Component, ComponentProps, makeUniqueComponentId } from '../../core/component';
 
-//import { Checkbox } from '@controls/controls.js';
+//import { Checkbox } from '@controls/controls';
 import { Input } from '../input/input';
 import { Label } from '../label/label';
-import { HBox } from '../boxes/boxes.js';
+import { HBox } from '../boxes/boxes';
 
 import "./switch.module.scss";
-import { class_ns } from '@core/core_tools.js';
+import { class_ns } from '../../core/core_tools';
 
 interface SwitchProps extends ComponentProps {
 	label: string;

package/src/components/tabs/tabs.module.scss

@@ -30,9 +30,9 @@
 				border-bottom-color: var( --tab-border-hover );	
 			}
 
-			&:focus {
+			//&:focus {
 				//color: var( --color-60 );
-			}
+			//}
 		}
 
 	}

package/src/components/tabs/tabs.ts

@@ -20,7 +20,7 @@ import { Button, ButtonProps } from '../button/button';
 import { HBox, VBox, StackBox } from '../boxes/boxes';
 
 import "./tabs.module.scss"
-import { class_ns } from '@core/core_tools.js';
+import { class_ns } from '../../core/core_tools';
 
 /**
  * 
@@ -32,6 +32,7 @@ export interface TabItem {
 	title: string;
 	icon?: string;
 	content: Component;
+	cls?: string;	// button class
 }
 
 /**
@@ -44,6 +45,10 @@ class CTab extends Button {
 		super( props );
 
 		this.addClass( "outline" );
+		if( item.cls ) {
+			this.addClass( item.cls );
+		}
+		
 		this.setIcon( item.icon );
 		this.setText( item.title );
 		this.setData( "tabname", item.name );
@@ -100,7 +105,6 @@ class CTabList extends HBox<TablistProps,TablistEvents> {
 		}
 	}
 
-
 	setItems( items: TabItem[ ] ) {
 		this.clearContent( );
 		items.forEach( tab => {
@@ -114,8 +118,11 @@ class CTabList extends HBox<TablistProps,TablistEvents> {
 		}, tab ) );
 	}
 
-	getTabCount( ) {
-		return this.dom.children.length;
+	removeItem( name: string ) {
+		const tab = this.query<Button>( `[data-tabname="${name}"]` );
+		if( tab ) {
+			this.removeChild( tab );
+		}
 	}
 }
 
@@ -197,9 +204,26 @@ export class Tabs extends VBox<TabsProps> {
 		this._list.addItem( item );
 		this._stack.addItem( { name: item.name, content: item.content } );
 
-		if( this._list.getTabCount( )==1 ) {
+		if( this._stack.getPageCount( )==1 ) {
 			this.selectTab( item.name );
 		}
 	}
+
+	/**
+	 * 
+	 */
+
+	removeTab( name: string ) {
+		this._list.removeItem( name );
+		this._stack.removeItem( name );
+	}
+
+	/**
+	 * 
+	 */
+
+	enumTabs( ): string[] {
+		return this._stack.enumPageNames( );
+	}
 }
 

package/src/components/textarea/textarea.ts

@@ -21,7 +21,7 @@ import { Label } from '../label/label';
 import { VBox } from '../boxes/boxes';
 
 import "./textarea.module.scss";
-import { class_ns, IFormElement } from '@core/core_tools.js';
+import { class_ns, IFormElement } from '../../core/core_tools';
 
 /**
  * 

package/src/components/textedit/textedit.ts

@@ -14,7 +14,7 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-//import { EventCallback } from '@core/core_events.js';
+//import { EventCallback } from '../../core/core_events';
 import { Component, makeUniqueComponentId } from '../../core/component';
 import { class_ns, UnsafeHtml } from '../../core/core_tools';
 
@@ -41,7 +41,7 @@ interface TextEditBase {
 	inputAttrs?: any;
 }
 
-type TextEditProps = TextEditInputs & TextEditBase;
+export type TextEditProps = TextEditInputs & TextEditBase;
 
 /*
 not enougth precise

package/src/components/tickline/tickline.ts

@@ -1,6 +1,6 @@
 import { SvgBuilder, SvgComponent } from '../../core/core_svg';
 import { Color } from '../../core/core_colors';
-import { Component, ComponentProps } from '@core/component.js';
+import { Component, ComponentProps } from '../../core/component';
 
 import "./tickline.module.scss"
 

package/src/components/tooltips/tooltips.ts

@@ -18,8 +18,8 @@ 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';
-import { Icon } from '../icon/icon.js';
+import { Popup, PopupProps } from '../popup/popup';
+import { Icon } from '../icon/icon';
 
 import "./tooltips.scss"
 

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

@@ -161,7 +161,15 @@
 					#icon {
 						color: var( --button-icon-color );
 					}
-				}	
+				}
+				
+				&:focus {
+					background-color: var( --ol-button-background-hover );
+				}
+
+				&:disabled {
+					color: var( --disabled-color-dark );
+				}
 			}
 		}
 	}