x4js/lib/types/x4js.d.ts

X4 framework

/** 
 *  ___  ___ __
 *  \  \/  /  / _
 *   \    /  /_| |_
 *   /    \____   _|  
 *  /__/\__\   |_|
 * 
 * @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.
 *
 * AUTOGENERATED CODE, DO NOT MODIFY
 * generated on Tue Jul 22 2025
 */


declare module 'x4js' {

	// ---------------------------------------
	// from /src/core/core_i18n.ts

	interface Language  {
		name: string;
		base: string;
		src_translations: any;
		translations: any;
	}

	// ---------------------------------------
	// from /src/core/core_tools.ts

	type Constructor<P> = {
		new( params: any[] ): P;
	}

	export class UnsafeHtml extends String {
		constructor( value: string );
	}

	export interface IRect  {
		left: number;
		top: number;
		height: number;
		width: number;
	}

	export class Rect implements IRect {
		left: number;
		top: number;
		height: number;
		width: number;
		constructor(  );
		constructor( l: number, t: number, w: number, h: number );
		constructor( l: Rect );
		constructor( l: number | IRect, t: number, w: number, h: number );
		contains( pt: Point ): boolean;
		contains( rc: Rect ): boolean;
		contains( arg: any ): boolean;
		touches( rc: Rect ): boolean;
		normalize(  ): this;
	}

	export interface Size  {
		w: number;
		h: number;
	}

	export interface Point  {
		x: number;
		y: number;
	}

	export interface Size  {
		w: number;
		h: number;
	}

	export interface IComponentInterface  {
	}

	export interface IFormElement extends IComponentInterface {
		getRawValue(  ): any;
		setRawValue( v: any ): void;
		isValid(  ): boolean;
	}

	export interface ITabHandler extends IComponentInterface {
		focusNext( next: boolean ): boolean;
	}

	export interface ITipHandler extends IComponentInterface {
		getTip(  ): string;
	}

	interface Features  {
		eyedropper: 1;
	}

	export class Timer  {
		_timers: Map<string, any>;
		setTimeout( name: string, time: number, callback: Function ): void;
		clearTimeout( name: string ): void;
		setInterval( name: string, time: number, callback: Function ): void;
		clearInterval( name: string ): void;
		clearAllTimeouts(  ): void;
	}

	enum kbNav {
		first,
		prev,
		pgdn,
		pgup,
		next,
		last,
	}

	// ---------------------------------------
	// from /src/core/core_events.ts

	export interface CoreEvent  {
		type?: string;
		source?: CoreElement;
		context?: any;
		propagationStopped?: boolean;
		defaultPrevented?: boolean;
		stopPropagation(  ): void;
		preventDefault(  ): void;
	}

	export interface EventMap  {
	}

	type EventCallback<T extends CoreEvent = CoreEvent> = (event: T) => any;

	export class EventSource<E extends EventMap = EventMap>  {
		_source: unknown;
		_registry: Map<string,EventCallback[]>;
		constructor( source: unknown );
		addListener<K extends keyof E>( name: K, callback: ( ev: E[K] ) => void, capturing: any ): void;
		removeListener<K extends keyof E>( name: K, callback: (ev: E[K]) => any ): void;
		fire<K extends keyof E>( name: K, evx: E[K] ): void;
	}

	// ---------------------------------------
	// from /src/core/core_element.ts

	export class CoreElement<E extends EventMap = EventMap>  {
		#events: EventSource<E>;
		#timers: Map<string, Function>;
		__startTimer( name: string, ms: number, repeat: boolean, callback: ( ) => void ): void;
		__stopTimer( name: string ): void;
		setTimeout( name: string, ms: number, callback: () => void ): void;
		clearTimeout( name: string ): void;
		setInterval( name: string, ms: number, callback: ( ) => void ): void;
		clearInterval( name: string ): void;
		clearTimeouts(  ): void;
		on<K extends keyof E>( name: K, listener: ( ev: E[K] ) => void ): void;
		off<K extends keyof E>( name: K, listener: ( ev: E[K] ) => void ): void;
		fire<K extends keyof E>( name: K, ev: E[K] ): void;
	}

	// ---------------------------------------
	// from /src/core/core_styles.ts

	type ariaValues = {
		"aria-activedescendant": 1;
		"role": 1;
	}

	export class Stylesheet  {
		m_sheet: CSSStyleSheet;
		m_rules: Map<string, number>;
		constructor(  );
		setRule( name: string, definition: any ): void;
		getVar( name: string ): any;
		guid: number;
		doc_style: CSSStyleDeclaration;
	}

	export class ComputedStyle  {
		m_style: CSSStyleDeclaration;
		constructor( style: CSSStyleDeclaration );
		value( name: keyof CSSStyleDeclaration ): any;
		parse( name: keyof CSSStyleDeclaration ): number;
	}

	// ---------------------------------------
	// from /src/core/core_dom.ts

	type DOMEventHandler = ( ev: Event ) => void;

	type EventEntry = Record<string,DOMEventHandler | DOMEventHandler[]>;

	export interface GlobalDOMEvents  {
		abort?: (ev: UIEvent) => any;
		animationcancel?: (ev: AnimationEvent) => any;
		animationend?: (ev: AnimationEvent) => any;
		animationiteration?: (ev: AnimationEvent) => any;
		animationstart?: (ev: AnimationEvent) => any;
		auxclick?: (ev: MouseEvent) => any;
		blur?: (ev: FocusEvent) => any;
		cancel?: (ev: Event) => any;
		canplay?: (ev: Event) => any;
		canplaythrough?: (ev: Event) => any;
		change?: (ev: Event) => any;
		click?: (ev: MouseEvent) => any;
		close?: (ev: Event) => any;
		contextmenu?: (ev: MouseEvent) => any;
		cuechange?: (ev: Event) => any;
		dblclick?: (ev: MouseEvent) => any;
		drag?: (ev: DragEvent) => any;
		dragend?: (ev: DragEvent) => any;
		dragenter?: (ev: DragEvent) => any;
		dragexit?: (ev: Event) => any;
		dragleave?: (ev: DragEvent) => any;
		dragover?: (ev: DragEvent) => any;
		dragstart?: (ev: DragEvent) => any;
		drop?: (ev: DragEvent) => any;
		durationchange?: (ev: Event) => any;
		emptied?: (ev: Event) => any;
		ended?: (ev: Event) => any;
		error?: OnErrorEventHandler;
		focusin?: (ev: FocusEvent) => any;
		focusout?: (ev: FocusEvent) => any;
		focus?: (ev: FocusEvent) => any;
		gotpointercapture?: (ev: PointerEvent) => any;
		input?: (ev: Event) => any;
		invalid?: (ev: Event) => any;
		keydown?: (ev: KeyboardEvent) => any;
		keypress?: (ev: KeyboardEvent) => any;
		keyup?: (ev: KeyboardEvent) => any;
		load?: (ev: Event) => any;
		loadeddata?: (ev: Event) => any;
		loadedmetadata?: (ev: Event) => any;
		loadstart?: (ev: Event) => any;
		lostpointercapture?: (ev: PointerEvent) => any;
		mousedown?: (ev: MouseEvent) => any;
		mouseenter?: (ev: MouseEvent) => any;
		mouseleave?: (ev: MouseEvent) => any;
		mousemove?: (ev: MouseEvent) => any;
		mouseout?: (ev: MouseEvent) => any;
		mouseover?: (ev: MouseEvent) => any;
		mouseup?: (ev: MouseEvent) => any;
		pause?: (ev: Event) => any;
		play?: (ev: Event) => any;
		playing?: (ev: Event) => any;
		pointercancel?: (ev: PointerEvent) => any;
		pointerdown?: (ev: PointerEvent) => any;
		pointerenter?: (ev: PointerEvent) => any;
		pointerleave?: (ev: PointerEvent) => any;
		pointermove?: (ev: PointerEvent) => any;
		pointerout?: (ev: PointerEvent) => any;
		pointerover?: (ev: PointerEvent) => any;
		pointerup?: (ev: PointerEvent) => any;
		progress?: (ev: ProgressEvent) => any;
		ratechange?: (ev: Event) => any;
		reset?: (ev: Event) => any;
		scroll?: (ev: Event) => any;
		securitypolicyviolation?: (ev: SecurityPolicyViolationEvent) => any;
		seeked?: (ev: Event) => any;
		seeking?: (ev: Event) => any;
		select?: (ev: Event) => any;
		selectionchange?: (ev: Event) => any;
		selectstart?: (ev: Event) => any;
		stalled?: (ev: Event) => any;
		submit?: (ev: Event) => any;
		suspend?: (ev: Event) => any;
		timeupdate?: (ev: Event) => any;
		toggle?: (ev: Event) => any;
		touchcancel?: (ev: TouchEvent) => any;
		touchend?: (ev: TouchEvent) => any;
		touchmove?: (ev: TouchEvent) => any;
		touchstart?: (ev: TouchEvent) => any;
		transitioncancel?: (ev: TransitionEvent) => any;
		transitionend?: (ev: TransitionEvent) => any;
		transitionrun?: (ev: TransitionEvent) => any;
		transitionstart?: (ev: TransitionEvent) => any;
		volumechange?: (ev: Event) => any;
		waiting?: (ev: Event) => any;
		wheel?: (ev: WheelEvent) => any;
		resized?: (ev: Event) => void;
		created?: ( ev: Event ) => void;
		removed?: ( ev: Event ) => void;
	}

	// ---------------------------------------
	// from /src/core/component.ts

	interface RefType<T extends Component>  {
		dom: T;
	}

	type ComponentAttributes = Record<string,string|number|boolean>;

	type CreateComponentCallBack = ( attrs: Record<string,string> ) => ComponentContent;

	type ComponentContent = Component | Component[] | string | string[] | UnsafeHtml | UnsafeHtml[] | number | boolean;

	export interface ComponentProps  {
		tag?: string;
		ns?: string;
		style?: Partial<CSSStyleDeclaration>;
		attrs?: Record<string,string|number|boolean>;
		content?: ComponentContent;
		dom_events?: GlobalDOMEvents;
		cls?: string;
		id?: string;
		ref?: RefType<any>;
		width?: string | number;
		height?: string | number;
		disabled?: true;
		hidden?: true;
		flex?: boolean | number;
		tooltip?: string;
		existingDOM?: HTMLElement;
	}

	export interface ComponentEvent extends CoreEvent {
	}

	export interface ComponentEvents extends EventMap {
	}

	@class_ns( "x4" ) export class Component<P extends ComponentProps = ComponentProps, E extends ComponentEvents = ComponentEvents> extends CoreElement<E> {
		dom: Element;
		props: P;
		clsprefix: string;
		#store: Map<string|symbol,any>;
		constructor( props: P );
		hasClass( cls: string ): void;
		addClass( cls: string ): void;
		removeClass( cls: string ): void;
		removeClassEx( re: RegExp ): void;
		toggleClass( cls: string ): void;
		setClass( cls: string, set: boolean ): this;
		setAttributes( attrs: ComponentAttributes ): this;
		setAttribute( name: string, value: string | number | boolean ): void;
		getAttribute( name: string ): string;
		getData( name: string ): string;
		getIntData( name: string ): number;
		setData( name: string, value: string ): void;
		setInternalData( name: string|symbol, value: any ): this;
		getInternalData( name: string|symbol ): any;
		addDOMEvent<K extends keyof GlobalDOMEvents>( name: K, listener: GlobalDOMEvents[K], prepend: any ): void;
		setDOMEvents( events: GlobalDOMEvents ): void;
		mapPropEvents<N extends keyof E>( props: P, elements: N[] ): void;
		clearContent(  ): void;
		setContent( content: ComponentContent ): void;
		appendContent( content: ComponentContent ): void;
		prependContent( content: ComponentContent ): void;
		removeChild( child: Component ): void;
		queryAll( selector: string ): Component[];
		query<T extends Component = Component>( selector: string ): T;
		setAria( name: keyof ariaValues, value: string | number | boolean ): this;
		setStyle( style: Partial<CSSStyleDeclaration> ): this;
		setStyleValue<K extends keyof CSSStyleDeclaration>( name: K, value: CSSStyleDeclaration[K] | number ): this;
		getStyleValue<K extends keyof CSSStyleDeclaration>( name: K ): void;
		setWidth( w: number | string ): void;
		setHeight( h: number | string ): void;
		setStyleVariable( name: string, value: string ): void;
		getStyleVariable( name: string ): void;
		getComputedStyle(  ): void;
		setCapture( pointerId: number ): void;
		releaseCapture( pointerId: number ): void;
		getBoundingRect(  ): Rect;
		focus(  ): this;
		hasFocus(  ): void;
		scrollIntoView( arg: boolean | ScrollIntoViewOptions ): void;
		isVisible(  ): void;
		show( vis: any ): this;
		hide(  ): this;
		enable( ena: any ): this;
		disable(  ): this;
		isDisabled(  ): void;
		nextElement<T extends Component = Component>(  ): T;
		prevElement<T extends Component = Component>(  ): T;
		parentElement<T extends Component>( cls: Constructor<T> ): T;
		parentElement<T extends Component>( dom: Node, cls: Constructor<T> ): T;
		firstChild<T extends Component = Component>(  ): T;
		lastChild<T extends Component = Component>(  ): T;
		enumChildComponents( recursive: boolean ): void;
		enumChildNodes( recursive: boolean ): void;
		animate( keyframes: Keyframe[], duration: number ): void;
		createElement( clsOrTag: string | ComponentConstructor | symbol | CreateComponentCallBack, attrs: any, children: Component[] ): Component | Component[];
		createFragment(  ): Component[];
		queryInterface<T>( name: string ): T;
	}

	type ComponentConstructor = {
		new( params: any[] ): Component;
	}

	export class Flex extends Component {
		constructor(  );
	}

	export class Space extends Component {
		constructor( width: number|string, cls: string );
	}

	export interface EvClick extends ComponentEvent {
	}

	export interface EvChange extends ComponentEvent {
		value: any;
	}

	export interface EvFocus extends ComponentEvent {
		focus_out: boolean;
	}

	interface ISelection  {
	}

	export interface EvSelectionChange extends ComponentEvent {
		selection: ISelection;
		empty: boolean;
	}

	export interface EvContextMenu extends ComponentEvent {
		uievent: UIEvent;
	}

	export interface EvDrag extends ComponentEvent {
		element: unknown;
		data: any;
	}

	export interface EvError extends ComponentEvent {
		code: number;
		message: string;
	}

	export interface EvDblClick extends ComponentEvent {
	}

	// ---------------------------------------
	// from /src/core/core_application.ts

	export interface EvMessage extends CoreEvent {
		msg: string;
		params: any;
	}

	export interface ApplicationEvents extends EventMap {
		global: EvMessage;
		message: EvMessage;
	}

	 class Process  {
		getMaxTouchPoints(  ): void;
	}

	export class Application<E extends ApplicationEvents = ApplicationEvents> extends CoreElement<E> {
		env: any;
		mainview: Component;
		process: any;
		constructor(  );
		setMainView( view: Component ): void;
		instance<P extends Application = Application>(  ): P;
		getMainView(  ): void;
		setEnv( name: string, value: any ): void;
		getEnv( name: string, def_value: any ): void;
		fireGlobal( msg: string, params: any ): void;
		_setupKeyboard(  ): void;
		focusNext( next: boolean ): void;
		setupSocketMessaging( path: string, looseCallback: ( ) => void ): void;
		getStorage( name: string ): string;
		getStorageJSON( name: string ): any;
		setStorage( name: string, value: string | number ): void;
		setStorageJSON( name: string, value: any ): void;
	}

	// ---------------------------------------
	// from /src/core/core_colors.ts

	export interface Rgb  {
		red: number;
		green: number;
		blue: number;
		alpha: number;
	}

	export interface Hsv  {
		hue: number;
		saturation: number;
		value: number;
		alpha: number;
	}

	export class Color  {
		rgb: [red:number,green:number,blue:number,alpha:number];
		invalid: any;
		constructor( value: string );
		constructor( r: number, g: number, b: number, a: number );
		constructor( args: any[] );
		setValue( value: string ): this;
		setHsv( h: number, s: number, v: number, a: any ): this;
		setRgb( r: number, g: number, b: number, a: number ): this;
		toRgbString( withAlpha: boolean ): string;
		toHexString(  ): string;
		toRgb(  ): Rgb;
		toHsv(  ): Hsv;
		getAlpha(  ): void;
		setAlpha( a: number ): this;
		isInvalid(  ): void;
	}

	// ---------------------------------------
	// from /src/core/core_data.ts

	type DataRecordID = any;

	type DataFieldValue = string | Date | number | boolean;

	type ChangeCallback = (type: string, id?: DataRecordID) => void;

	type CalcCallback = () => string;

	type FieldType = 'string' | 'int' | 'float' | 'date' | 'bool' | 'array' | 'object' | 'any' | 'calc';

	type DataIndex = Uint32Array;

	export interface EvDataChange extends CoreEvent {
		change_type: 'create' | 'update' | 'delete' | 'data' | 'change';
		id?: DataRecordID;
	}

	export interface MetaData  {
		type?: FieldType;
		prec?: number;
		required?: boolean;
		calc?: (rec: DataRecord) => any;
		model?: DataModel;
	}

	export interface FieldInfo extends MetaData {
		name: string;
	}

	 class MetaInfos  {
		name: string;
		id: string;
		fields: FieldInfo[];
		constructor( name: string );
	}

	interface ModelConstructor  {
	}

	export class DataModel  {
		getFields(  ): FieldInfo[];
		validate( record: DataRecord ): Error[];
		getFieldIndex( name: string ): number;
		serialize<T = any>( input: DataRecord ): T;
		unSerialize( data: any, id: DataRecordID ): DataRecord;
		_convertField( field: FieldInfo, input: any ): any;
		getID( rec: DataRecord ): any;
		getRaw( name: string | number, rec: DataRecord ): any;
		getField( name: string, rec: DataRecord ): string;
	}

	export class DataRecord  {
	}

	interface DataEventMap extends EventMap {
		change?: EvChange;
	}

	type DataSolver = ( data: any ) => DataRecord[];

	export interface DataProxyProps  {
		url: string;
		params?: string[];
		solver?: DataSolver;
	}

	export class DataProxy extends CoreElement<DataEventMap> {
		m_props: DataProxyProps;
		constructor( props: DataProxyProps );
		load( url: string ): void;
	}

	interface DataStoreProps  {
		model: DataModel;
		data?: any[];
		url?: string;
		autoload?: false;
		solver?: DataSolver;
	}

	interface DataStoreEventMap extends EventMap {
		data_change: EvDataChange;
	}

	export class DataStore extends EventSource<DataStoreEventMap> {
		m_model: DataModel;
		m_fields: FieldInfo[];
		m_records: DataRecord[];
		m_proxy: DataProxy;
		m_rec_index: DataIndex;
		constructor( props: DataStoreProps );
		load( url: string ): void;
		reload(  ): void;
		setData( records: any[] ): void;
		setRawData( records: DataRecord[] ): void;
		_rebuildIndex(  ): void;
		update( rec: DataRecord ): void;
		append( rec: DataRecord | any ): void;
		getMaxId(  ): void;
		delete( id: DataRecordID ): boolean;
		indexOfId( id: DataRecordID ): number;
		getById( id: DataRecordID ): DataRecord;
		getByIndex( index: number ): DataRecord;
		_getRecord( index: number ): DataRecord;
		moveTo( other: DataStore ): void;
		createView( opts: DataViewProps ): DataView;
		createIndex( filter: FilterInfo ): DataIndex;
		sortIndex( index: DataIndex, sort: SortProp[] ): void;
		forEach( cb: ( rec: DataRecord, index: number ) => any ): void;
		export(  ): void;
		changed(  ): void;
		getModel(  ): void;
	}

	export interface EvViewChange extends CoreEvent {
		change_type: "change" | "filter" | "sort";
	}

	interface DataViewEventMap extends EventMap {
		view_change: EvViewChange;
	}

	interface DataViewProps  {
		store?: DataStore;
		filter?: FilterInfo;
		order?: string | SortProp[] | SortProp;
	}

	type FilterFunc = ( rec: DataRecord ) => boolean;

	export interface FilterInfo  {
		op: '<' | '<=' | '=' | '>=' | '>' | '<>' | 'empty-result' | FilterFunc;
		field?: string;
		value?: string | RegExp;
		caseSensitive?: boolean;
	}

	export interface SortProp  {
		field: string;
		ascending: boolean;
		numeric?: boolean;
	}

	export class DataView extends CoreElement<DataViewEventMap> {
		m_index: DataIndex;
		m_store: DataStore;
		m_model: DataModel;
		m_sort: SortProp[];
		m_filter: FilterInfo;
		m_props: DataViewProps;
		constructor( props: DataViewProps );
		_storeChange( ev: EvDataChange ): void;
		filter( filter: FilterInfo ): number;
		_filter( filter: FilterInfo, notify: boolean ): number;
		sort( props: SortProp[] ): void;
		_sort( props: SortProp[], notify: boolean ): void;
		getStore(  ): void;
		getCount(  ): void;
		indexOfId( id: DataRecordID ): number;
		getByIndex( index: number ): DataRecord;
		getIdByIndex( index: number ): DataRecordID;
		getRecId( rec: DataRecord ): DataRecordID;
		getById( id: DataRecordID ): DataRecord;
		getModel(  ): void;
		changed(  ): void;
		forEach( cb: ( rec: DataRecord, index: number ) => any ): void;
	}

	// ---------------------------------------
	// from /src/core/core_dragdrop.ts

	interface DropInfo  {
		pt: Point;
		data: DataTransfer;
	}

	type DropCallback = ( command: 'enter' | 'leave' | 'drag' | 'drop', el: Component, infos: DropInfo ) => void;

	type FilterCallback = ( el: Component, data: DataTransfer ) => boolean;

	 class DragManager  {
		dragSource: Component;
		dragGhost: HTMLElement;
		dropTarget: Component;
		notified: Component;
		timer: any;
		registerDraggableElement( el: Component ): void;
		registerDropTarget( el: Component, cb: DropCallback, filterCB: FilterCallback ): void;
		_startCheck(  ): void;
		_check(  ): void;
	}

	// ---------------------------------------
	// from /src/core/core_react.ts

	export class x4_react  {
		create_element( tag: string, props: any, content: any[] ): Component;
		create_element<X extends Component>( tag: string | Constructor<X>, props: X["props"], content: any[] ): void;
	}

	// ---------------------------------------
	// from /src/core/core_router.ts

	type RouteHandler = ( params: any, path: string ) => void;

	interface Segment  {
		keys: string[];
		pattern: RegExp;
	}

	interface Route  {
		keys: string[];
		pattern: RegExp;
		handler: RouteHandler;
	}

	interface RouterEvents extends EventMap {
		change: EvChange;
		error: EvError;
	}

	export class Router extends EventSource< RouterEvents > {
		m_routes: Route[];
		m_useHash: boolean;
		constructor( useHash: any );
		get( uri: string | RegExp, handler: RouteHandler ): void;
		init(  ): void;
		_getLocation(  ): void;
		navigate( uri: string, notify: any, replace: any ): void;
		_find( url: string ): { params: Record<string,any>, handlers: RouteHandler[] };
	}

	// ---------------------------------------
	// from /src/core/core_state.ts

	type StateData = boolean | number | string | Date | any;

	type State = Record<string,StateData>;

	export class StateManager  {
		_state: StateData;
		_subscribers: Map<string,any>;
		_currentTracking: Set<string>;
		constructor( initialState: StateData );
		getState( path: string, defaultValue: StateData ): void;
		setState( path: string, value: StateData, context: any ): void;
	}

	// ---------------------------------------
	// from /src/core/core_svg.ts

	 class SvgItem  {
		_dom: SVGElement;
		constructor( tag: string );
		getDom(  ): void;
		reset(  ): void;
		stroke( color: string, width: number ): this;
		strokeWidth( width: number ): this;
		strokeCap( cap: "butt" | "round" | "sqaure" ): void;
		strokeOpacity( opacity: number ): void;
		antiAlias( set: boolean ): void;
		fill( color: string ): this;
		no_fill(  ): this;
		getAttr( name: string ): string;
		getNumAttr( name: string ): void;
		setAttr( name: string, value: string ): this;
		setStyle<K extends keyof CSSStyleDeclaration>( name: K, value: string | number ): this;
		addClass( cls: string ): this;
		removeClass( cls: string ): this;
		clip( id: string ): this;
		transform( tr: string ): this;
		clear_transform(  ): void;
		rotate( deg: number, cx: number, cy: number ): this;
		translate( dx: number, dy: number ): this;
		scale( x: number ): this;
		addDOMEvent<K extends keyof GlobalDOMEvents>( name: K, listener: GlobalDOMEvents[K], prepend: any ): void;
	}

	export class SvgPath extends SvgItem {
		_path: string;
		constructor(  );
		_update(  ): this;
		reset(  ): void;
		moveTo( x: number, y: number ): this;
		lineTo( x: number, y: number ): this;
		curveTo( x1: number, y1: number, x2: number, y2: number, x3: number, y3: number ): void;
		closePath(  ): this;
		arc( x: number, y: number, r: number, start: number, end: number, clockwise: any ): this;
	}

	export class SvgText extends SvgItem {
		constructor( x: number, y: number, txt: string );
		font( font: string ): this;
		fontSize( size: number | string ): this;
		fontWeight( weight: 'light' | 'normal' | 'bold' ): this;
		textAlign( align: 'left' | 'center' | 'right' ): this;
		verticalAlign( align: 'top' | 'center' | 'bottom' | 'baseline' ): this;
	}

	export class SvgIcon extends SvgItem {
		constructor( svg: string );
	}

	export class SvgShape extends SvgItem {
		constructor( tag: string );
	}

	type number_or_perc = number | `${string}%`;

	export class SvgGradient extends SvgItem {
		g_id: any;
		_id: string;
		_stops: { offset: number_or_perc, color: string } [];
		constructor( x1: number_or_perc, y1: number_or_perc, x2: number_or_perc, y2: number_or_perc );
		addStop( offset: number_or_perc, color: string ): this;
	}

	export class SvgGroup extends SvgItem {
		constructor( tag: any );
		append<K extends SvgItem>( item: K ): K;
		appendItems<K extends SvgItem>( items: K[] ): void;
		path(  ): SvgPath;
		text( x: number, y: number, txt: string ): void;
		ellipse( x: number, y: number, r1: number, r2: number ): SvgShape;
		circle( x: number, y: number, r1: number ): SvgShape;
		icon( svg: string, x: number, y: number, w: number, h: number ): SvgIcon;
		rect( x: number, y: number, w: number, h: number ): SvgShape;
		group( id: string ): void;
		linear_gradient( x1: number_or_perc, y1: number_or_perc, x2: number_or_perc, y2: number_or_perc ): void;
		clear(  ): void;
	}

	export class SvgBuilder extends SvgGroup {
		g_clip_id: any;
		g_pat_id: any;
		constructor(  );
		addClip( x: number, y: number, w: number, h: number ): void;
		addPattern( x: number, y: number, w: number, h: number ): void;
	}

	interface SvgProps extends ComponentProps {
		viewbox?: string;
		svg: SvgBuilder;
	}

	export class SvgComponent<P extends SvgProps = SvgProps> extends Component<P> {
		constructor( props: P );
		setSvg( bld: SvgBuilder ): void;
		addItems( items: SvgItem[] ): void;
	}

	// ---------------------------------------
	// from /src/components/boxes/boxes.ts

	export interface BoxProps extends ComponentProps {
		tag?: string;
	}

	@class_ns( "x4" ) export class Box<P extends BoxProps=BoxProps, E extends ComponentEvents=ComponentEvents> extends Component<P,E> {
	}

	@class_ns( "x4" ) export class HBox<P extends BoxProps=BoxProps, E extends ComponentEvents=ComponentEvents> extends Box<P,E> {
	}

	@class_ns( "x4" ) export class VBox<P extends BoxProps=BoxProps, E extends ComponentEvents=ComponentEvents> extends Box<P,E> {
		constructor( p: P );
	}

	type ContentBuilder = ( ) => Component;

	interface StackItem  {
		name: string;
		content: Component | ContentBuilder;
		title?: string;
	}

	interface StackeBoxEvents extends ComponentEvents {
		pageChange?: EvSelectionChange;
	}

	export interface StackBoxProps extends Omit<ComponentProps,"content"> {
		default: string;
		items: StackItem[];
		pageChange?: EventCallback<EvSelectionChange>;
	}

	interface StackItemEx extends StackItem {
		page: Component;
	}

	@class_ns( "x4" ) export class StackBox<P extends StackBoxProps = StackBoxProps, E extends StackeBoxEvents = StackeBoxEvents> extends Box<StackBoxProps,StackeBoxEvents> {
		_items: StackItemEx[];
		_cur: number;
		constructor( props: StackBoxProps );
		addItem( item: StackItem ): void;
		select( name: string ): void;
		_createPage( page: StackItemEx ): void;
		getPage( name: string ): void;
		getItem( name: string ): void;
		getCurPage(  ): void;
	}

	@class_ns( "x4" ) export class AssistBox extends StackBox {
		selectNextPage( nxt: any ): void;
		isFirstPage(  ): void;
		isLastPage(  ): void;
	}

	interface GridBoxItem  {
		row: number;
		col: number;
		item: Component;
	}

	export interface GridBoxProps extends Omit<BoxProps,"content"> {
		rows?: number | string | string[];
		columns?: number | string | string[];
		items?: GridBoxItem[];
	}

	@class_ns("x4") export class GridBox<P extends GridBoxProps=GridBoxProps, E extends ComponentEvents=ComponentEvents> extends Box<P,E> {
		constructor( props: P );
		setRows( r: number | string | string[] ): void;
		setCols( r: number | string | string[] ): void;
		setRowCount( n: number ): void;
		setColCount( n: number ): void;
		setTemplate( t: string[] ): void;
		setItems( items: GridBoxItem[] ): void;
	}

	interface MasonryProps extends Omit<BoxProps,"content"> {
		items: Component[];
	}

	@class_ns("x4") export class MasonryBox extends Box<MasonryProps> {
		constructor( props: MasonryProps );
		resizeItem( item: Component ): void;
		resizeAllItems(  ): void;
		setItems( items: Component[] ): void;
	}

	// ---------------------------------------
	// from /src/components/breadcrumb/breadcrumb.ts

	interface BreadcrumbEvents extends ComponentEvents {
		click: EvClick;
	}

	interface BreadcrumbElement  {
		name?: string;
		icon?: string;
		label: string;
		click?: ( name: string ) => void;
	}

	interface BreadcrumbsProps extends BoxProps {
		items: BreadcrumbElement[];
		click?: EventCallback<EvClick>;
	}

	@class_ns( "x4" ) export class Breadcrumbs extends HBox<BreadcrumbsProps,BreadcrumbEvents> {
		constructor( props: BreadcrumbsProps );
		setItems( elements: BreadcrumbElement[ ] ): void;
	}

	// ---------------------------------------
	// from /src/components/icon/icon.ts

	type solveCallback = (data:string)=>void;

	 class SvgLoader  {
		cache: Map<string,string>;
		waiters: Map<string,solveCallback[]>;
		constructor(  );
		load( file: string ): Promise<string>;
		_load( file: string ): Promise<string>;
	}

	export interface IconProps extends ComponentProps {
		iconId?: string;
	}

	@class_ns( "x4" ) export class Icon extends Component<IconProps> {
		constructor( props: IconProps );
		setIcon( iconId: string ): void;
	}

	// ---------------------------------------
	// from /src/components/button/button.ts

	interface ButtonEvents extends ComponentEvents {
		click: EvClick;
	}

	export interface ButtonProps extends ComponentProps {
		label?: string;
		icon?: string;
		tabindex?: boolean | number;
		autorepeat?: number | boolean;
		click?: EventCallback<EvClick>;
	}

	@class_ns( "x4" ) export class Button extends Component<ButtonProps,ButtonEvents> {
		#text: Component;
		constructor( props: ButtonProps );
		_on_click( ev: MouseEvent ): void;
		_on_mouse( e: PointerEvent ): void;
		click(  ): void;
		_on_keydown( e: KeyboardEvent ): void;
		setText( text: string | UnsafeHtml ): void;
		setIcon( icon: string ): void;
	}

	// ---------------------------------------
	// from /src/components/label/label.ts

	export interface LabelProps extends ComponentProps {
		text?: string | UnsafeHtml;
		icon?: string;
		labelFor?: string;
	}

	@class_ns( "x4" ) export class Label extends Component<LabelProps> {
		#text: Component;
		constructor( p: LabelProps );
		setText( text: string | UnsafeHtml ): void;
		setIcon( icon: string ): void;
	}

	export interface SimpleTextProps extends ComponentProps {
		text: string | UnsafeHtml;
		align?: "left" | "center" | "right";
	}

	@class_ns( "x4" ) export class SimpleText extends Component<SimpleTextProps> {
		constructor( p: SimpleTextProps );
		setText( text: string | UnsafeHtml ): void;
	}

	// ---------------------------------------
	// from /src/components/form/form.ts

	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> {
		validator: ValidationFn;
		constructor( props: P );
		_get_inputs(  ): void;
		setValues( values: FormValues ): void;
		getValues(  ): FormValues;
		setAutoComplete( on: any ): void;
		setValidator( validator: ValidationFn ): void;
		validate(  ): FormValues;
	}

	// ---------------------------------------
	// from /src/components/sizers/sizer.ts

	interface EvSizeChange extends ComponentEvent {
		size: number;
	}

	interface CSizerEvent extends ComponentEvents {
		resize: EvSizeChange;
		start: ComponentEvent;
		stop: ComponentEvent;
	}

	type SizerType = "left" | "top" | "right" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right";

	@class_ns( "x4" ) export class CSizer extends Component<ComponentProps,CSizerEvent> {
		_type: SizerType;
		_ref: Component;
		_delta: Point;
		constructor( type: SizerType, target: Component );
		_onMouseMove( e: PointerEvent ): void;
	}

	// ---------------------------------------
	// from /src/components/popup/popup.ts

	export interface PopupEvents extends ComponentEvents {
		closed: ComponentEvent;
		opened: ComponentEvent;
	}

	export interface PopupProps extends ComponentProps {
		autoClose?: boolean | string;
		sizable?: boolean;
		movable?: boolean;
	}

	@class_ns( "x4" ) export class Popup<P extends PopupProps = PopupProps, E extends PopupEvents = PopupEvents> extends Box<P,E> {
		_isshown: any;
		_ismodal: any;
		constructor( props: P );
		displayNear( rc: Rect, dst: any, src: any, offset: any ): void;
		displayCenter( center: any ): void;
		displayAt( x: number, y: number ): void;
		isOpen(  ): void;
		_do_hide(  ): void;
		_do_show(  ): void;
		__show(  ): void;
		__hide(  ): void;
		__append(  ): void;
		__remove(  ): void;
		show( show: any ): this;
		close(  ): void;
		_dismiss: any;
		dismiss( after: any ): void;
		_createSizers(  ): void;
		_showModalMask(  ): void;
		_hideModalMask(  ): void;
	}

	export class CMover  {
		ref: Component;
		delta: Point;
		self: boolean;
		constructor( x: Component, ref: Component );
		_onMouseMove( e: PointerEvent ): void;
	}

	// ---------------------------------------
	// from /src/components/dialog/dialog.ts

	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> {
		form: Form;
		_title: Label;
		constructor( props: P );
		focusNext( next: boolean ): boolean;
		setContent( form: Form ): void;
		getForm(  ): void;
		getValues(  ): void;
		getButton( name: string ): void;
		queryInterface<T extends IComponentInterface>( name: string ): T;
		setTitle( title: string ): void;
		getBtnBar(  ): void;
	}

	// ---------------------------------------
	// from /src/components/btngroup/btngroup.ts

	type predefined = `ok${ "" | `.${string}`}` | `cancel${ "" | `.${string}`}` | `yes${ "" | `.${string}`}` | `no${ "" | `.${string}`}` | `retry${ "" | `.${string}`}` | `abort${ "" | `.${string}`}` | "-" | ">>" | "~";

	type BtnGroupItem = predefined | Button | Label | Input;

	interface BtnGroupEvents extends ComponentEvents {
		btnclick: EvBtnClick;
	}

	interface BtnGroupProps extends Omit<ComponentProps,"content"> {
		align?: "left" | "center" | "right";
		vertical?: boolean;
		items: BtnGroupItem[];
		reverse?: boolean;
		btnclick?: EventCallback<EvBtnClick>;
	}

	@class_ns( "x4" ) export class BtnGroup extends Box<BtnGroupProps,BtnGroupEvents> {
		constructor( props: BtnGroupProps );
		setButtons( btns: BtnGroupItem[] ): void;
		getButton( id: string ): void;
	}

	// ---------------------------------------
	// from /src/components/menu/menu.ts

	export interface MenuItem  {
		cls?: string;
		icon?: string;
		text: string | UnsafeHtml;
		menu?: Menu;
		disabled?: true;
		click?: DOMEventHandler;
	}

	type MenuElement = MenuItem | Component | string;

	export interface MenuProps extends Omit<PopupProps,"content"> {
		items: MenuElement[];
	}

	@class_ns( "x4" ) class CMenuSep extends Component {
		constructor(  );
	}

	@class_ns( "x4" ) class CMenuItem extends Component {
		menu: Menu;
		constructor( itm: MenuItem );
		dismiss( after: boolean ): void;
		openSub( delayed: boolean ): void;
		closeSub(  ): void;
	}

	@class_ns( "x4" ) export class Menu extends Popup {
		constructor( props: MenuProps );
	}

	// ---------------------------------------
	// from /src/components/calendar/calendar.ts

	interface CalendarEventMap extends ComponentEvents {
		change?: EvChange;
	}

	interface CalendarProps extends ComponentProps {
		date?: Date;
		minDate?: Date;
		maxDate?: Date;
		change?: EventCallback<EvChange>;
	}

	@class_ns( "x4" ) export class Calendar extends VBox<CalendarProps, CalendarEventMap> {
		m_date: Date;
		constructor( props: CalendarProps );
		_update(  ): void;
		select( date: Date ): void;
		_next( n: boolean ): void;
		_choose( type: 'month' | 'year' ): void;
		getDate(  ): void;
		setDate( date: Date ): void;
	}

	// ---------------------------------------
	// from /src/components/canvas/canvas_ex.ts

	export interface CanvasEx extends CanvasRenderingContext2D {
		width: number;
		height: number;
		smoothLine( points: any[], path: CanvasPath, move: boolean ): void;
		smoothLineEx( _points: any[], tension: number, numOfSeg: number, path: CanvasPath, move: boolean, close: boolean ): void;
		line( x1: number, y1: number, x2: number, y2: number, color: string, lineWidth: number ): void;
		roundRect( x: number, y: number, width: number, height: number, radius: number ): void;
		calcTextSize( text: string, rounded: boolean ): { width: number, height: number };
		setFontSize( fs: number ): void;
		circle( x: number, y: number, radius: number ): void;
	}

	// ---------------------------------------
	// from /src/components/canvas/canvas.ts

	export interface EvPaint extends ComponentEvent {
		ctx: CanvasEx;
	}

	interface CanvasEventMap extends ComponentEvents {
		paint: EvPaint;
	}

	export interface CanvasProps extends ComponentProps {
		paint: EventCallback<EvPaint>;
		clear?: boolean;
	}

	@class_ns( "x4" ) export class Canvas extends Component<CanvasProps, CanvasEventMap> {
		m_iwidth: number;
		m_iheight: number;
		m_scale: any;
		m_canvas: Component;
		constructor( props: CanvasProps );
		scale( scale: number ): void;
		getContext(  ): void;
		$update_rep: any;
		redraw( wait: number ): void;
		_paint(  ): void;
		paint( ctx: CanvasEx ): void;
	}

	// ---------------------------------------
	// from /src/components/input/input.ts

	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;
	}

	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 );
		on_focus( ev: FocusEvent, focus_out: boolean ): void;
		on_change( ev: InputEvent ): void;
		getValue(  ): void;
		setValue( value: string ): void;
		getNumValue( defNan: number ): void;
		setNumValue( value: number, ndec: any ): void;
		getCheck(  ): void;
		setCheck( ck: boolean ): void;
		setReadOnly( ro: boolean ): void;
		selectAll(  ): void;
		select( start: number, length: number ): void;
		getSelection(  ): void;
		isValid(  ): void;
		queryInterface<T extends IComponentInterface>( name: string ): T;
	}

	// ---------------------------------------
	// from /src/components/checkbox/checkbox.ts

	interface CheckBoxEvents extends ComponentEvents {
		change?: EvChange;
	}

	interface CheckboxProps extends ComponentProps {
		label: string;
		checked?: boolean;
		value?: boolean | number | string;
		name?: string;
		change?: EventCallback<EvChange>;
	}

	@class_ns( "x4" ) export class Checkbox extends Component<CheckboxProps,CheckBoxEvents> {
		_input: Input;
		constructor( props: CheckboxProps );
		_on_click( ev: MouseEvent ): void;
		_on_change(  ): void;
		getCheck(  ): void;
		setCheck( ck: boolean ): void;
		setLabel( text: string ): void;
		toggle(  ): void;
	}

	// ---------------------------------------
	// from /src/components/colorinput/colorinput.ts

	interface ColorInputProps extends BoxProps {
		color: Color | string;
	}

	@class_ns( "x4" ) export class ColorInput extends HBox<ColorInputProps> {
		"$cls-ns": any;
		constructor( props: ColorInputProps );
	}

	// ---------------------------------------
	// from /src/components/colorpicker/colorpicker.ts

	interface ColorPickerProps extends ComponentProps {
		color: string | Color;
	}

	interface HueChangeEvent extends ComponentEvent {
		hue: number;
	}

	interface AlphaChangeEvent extends ComponentEvent {
		alpha: number;
	}

	interface SatChangeEvent extends ComponentEvent {
		saturation: number;
		value: number;
	}

	interface CommonEvents extends ComponentEvents {
		hue_change: HueChangeEvent;
		alpha_change: AlphaChangeEvent;
		sat_change: SatChangeEvent;
	}

	@class_ns( "x4" ) export class Saturation extends Box<BoxProps,CommonEvents> {
		mdown: any;
		irect: Rect;
		hsv: Hsv;
		color: Component;
		thumb: Component;
		constructor( props: BoxProps, init: Hsv );
		mousedown( ev: PointerEvent ): void;
		mousemove( ev: PointerEvent ): void;
		mouseup( ev: PointerEvent ): void;
		updateThumbMarker(  ): void;
		updateBaseColor( hsv: Hsv ): void;
		move( sens: string, delta: number ): void;
	}

	@class_ns( "x4" ) class HueSlider extends Box<BoxProps,CommonEvents> {
		thumb: Component;
		hsv: Hsv;
		mdown: any;
		irect: Rect;
		constructor( props: BoxProps, init: Hsv );
		mousedown( ev: PointerEvent ): void;
		mousemove( ev: PointerEvent ): void;
		mouseup( ev: PointerEvent ): void;
		updateHue( hsv: Hsv ): void;
		move( delta: number ): void;
	}

	@class_ns( "x4" ) class AlphaSlider extends Box<BoxProps,CommonEvents> {
		thumb: Component;
		color: Component;
		hsv: Hsv;
		mdown: any;
		irect: Rect;
		constructor( props: BoxProps, init: Hsv );
		_on_mousedown( ev: PointerEvent ): void;
		_on_mousemove( ev: PointerEvent ): void;
		_on_mouseup( ev: PointerEvent ): void;
		updateAlpha(  ): void;
		updateBaseColor( hsv: Hsv ): void;
		setColor( hsv: Hsv ): void;
		move( delta: number ): void;
	}

	interface ChangeEvent extends ComponentEvent {
		color: Color;
	}

	interface ColorPickerChangeEvents extends ComponentEvents {
		change: ChangeEvent;
	}

	@class_ns( "x4" ) export class ColorPicker extends VBox<ColorPickerProps,ColorPickerChangeEvents> {
		_base: Color;
		_sat: Saturation;
		_swatch: Component;
		_hue: HueSlider;
		_alpha: AlphaSlider;
		constructor( props: ColorPickerProps );
		_onkey( ev: KeyboardEvent ): void;
	}

	// ---------------------------------------
	// from /src/components/viewport/viewport.ts

	@class_ns( "x4" ) export class Viewport extends Component {
		constructor( props: ComponentProps );
	}

	@class_ns( "x4" ) export class ScrollView extends Component {
		constructor( props: ComponentProps );
		getViewport(  ): void;
	}

	// ---------------------------------------
	// from /src/components/listbox/listbox.ts

	type ListboxID = number | string;

	export interface ListItem  {
		id: ListboxID;
		text: string | UnsafeHtml;
		iconId?: string;
		data?: any;
		cls?: string;
		checked?: boolean;
	}

	interface ListboxEvents extends ComponentEvents {
		click?: EvClick;
		dblClick?: EvDblClick;
		contextMenu?: EvContextMenu;
		selectionChange?: EvSelectionChange;
	}

	interface ListboxProps extends Omit<ComponentProps,'content'> {
		items?: ListItem[];
		renderer?: ( item: ListItem ) => Component;
		footer?: Component;
		checkable?: true;
		multisel?: true;
		dblClick?: EventCallback<EvDblClick>;
		selectionChange?: EventCallback<EvSelectionChange>;
		contextMenu?: EventCallback<EvContextMenu>;
	}

	@class_ns( "x4" ) export class Listbox extends Component<ListboxProps,ListboxEvents> {
		_view: Viewport;
		_lastsel: ListboxID;
		_multisel: Set<ListboxID>;
		_items: ListItem[];
		preventFocus: any;
		constructor( props: ListboxProps );
		_on_key( ev: KeyboardEvent ): void;
		navigate( sens: kbNav ): void;
		_itemWithID( id: ListboxID ): void;
		_on_click( ev: MouseEvent ): void;
		_on_ctx_menu( ev: MouseEvent ): void;
		_selectItem( id: ListboxID, item: Component, mode: "single" | "toggle" ): void;
		getItem( id: ListboxID ): ListItem;
		select( ids: ListboxID | ListboxID[], notify: any ): void;
		_findItemIndex( id: ListboxID ): void;
		_clearSelection(  ): void;
		clearSelection(  ): void;
		setItems( items: ListItem[], keepSel: any ): void;
		renderItem( item: ListItem ): void;
		defaultRenderer( item: ListItem ): Component;
		filter( filter: string ): void;
		appendItem( item: ListItem, prepend: any, select: any ): void;
		updateItem( id: any, item: ListItem ): void;
		getSelection(  ): void;
	}

	// ---------------------------------------
	// from /src/components/combobox/combobox.ts

	interface DropdownEvents extends PopupEvents {
		selectionChange: EvSelectionChange;
	}

	interface DropdownProps extends Omit<PopupProps,"content"> {
		items: ListItem[];
	}

	@class_ns( "x4" ) export class DropdownList extends Popup<DropdownProps,DropdownEvents> {
		_list: Listbox;
		constructor( props: DropdownProps, content: ListItem[] );
		getList(  ): void;
	}

	interface ComboboxEvents extends ComponentEvents {
		selectionChange: EvSelectionChange;
	}

	interface ComboboxProps extends Omit<ComponentProps,"content"> {
		label?: string;
		name?: string;
		value?: string;
		labelWidth?: number | string;
		readonly?: boolean;
		required?: boolean;
		items: ListItem[];
		selectionChange?: EventCallback<EvSelectionChange>;
	}

	@class_ns( "x4" ) export class Combobox extends Component<ComboboxProps,ComboboxEvents> {
		_popup: DropdownList;
		_input: Input;
		_button: Button;
		_prevent_close: any;
		_edit: HBox;
		constructor( props: ComboboxProps );
		_on_key( ev: KeyboardEvent ): void;
		_on_input(  ): void;
		_on_focusout(  ): void;
		_on_click(  ): void;
		showDropDown(  ): void;
		setItems( items: ListItem[] ): void;
		getValue(  ): void;
		setValue( value: string ): void;
		selectItem( index: ListboxID ): void;
		getSelection(  ): void;
		_getList(  ): void;
		queryInterface<T extends IComponentInterface>( name: string ): T;
	}

	// ---------------------------------------
	// from /src/components/filedrop/filedrop.ts

	type LoadCallback = ( files: FileList ) => void;

	interface FileDialogProps extends ComponentProps {
		accept: string;
		multiple?: boolean;
		callback: LoadCallback;
	}

	export class FileDialog extends Component {
		constructor( props: FileDialogProps );
		showDialog(  ): void;
	}

	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;
		change: EventCallback<EvDropChange>;
	}

	@class_ns( "x4" ) export class FileDrop extends VBox<FileDropProps,FileDropEvents> {
		constructor( props: FileDropProps );
	}

	// ---------------------------------------
	// from /src/components/image/image.ts

	interface ImageEvents extends ComponentEvents {
		change: EvDropChange;
		clear: CoreEvent;
	}

	export interface ImageProps extends ComponentProps {
		src: string;
		fit?: "contain" | "cover" | "fill" | "scale-down";
		position?: string;
		lazy?: boolean;
		alt?: string;
		draggable?: boolean;
		candrop?: boolean;
		accept?: string;
		change?: EventCallback<EvDropChange>;
		clear?: EventCallback<CoreEvent>;
	}

	@class_ns( "x4" ) export class Image<P extends ImageProps = ImageProps, E extends ImageEvents = ImageEvents> extends Component<P,E> {
		_img: Component;
		constructor( props: P );
		setImage( src: string ): void;
		setBase64( mime: string, base64: string ): void;
		clear(  ): void;
	}

	// ---------------------------------------
	// from /src/components/gridview/gridview.ts

	type CellRenderer = (rec: DataRecord) => Component;

	type CellClassifier = (data: any, rec: DataRecord, col: string ) => string;

	type ColType = "number" | "money" | "checkbox" | "date" | "string" | "image" | "percent" | "icon";

	interface GridColumn  {
		id: any;
		title: string;
		width: number;
		fixed?: boolean;
		flex?: number;
		align?: 'left' | 'center' | 'right';
		header_align?: 'left' | 'center' | 'right';
		renderer?: CellRenderer;
		formatter?: (input: any) => string;
		type?: ColType;
		cls?: string;
		sortable?: boolean;
		footer_val?: string;
		classifier?: CellClassifier;
	}

	interface GridColumnEx extends GridColumn {
		sens?: "up" | "dn";
	}

	export interface GridviewEvents extends ComponentEvents {
		click?: EvClick;
		dblClick?: EvDblClick;
		contextMenu?: EvContextMenu;
		selectionChange?: EvSelectionChange;
	}

	export interface GridviewProps extends ComponentProps {
		footer?: boolean;
		store: DataStore;
		columns: GridColumn[];
		click?: EventCallback<EvClick>;
		dblClick?: EventCallback<EvDblClick>;
		contextMenu?: EventCallback<EvContextMenu>;
		selectionChange?: EventCallback<EvSelectionChange>;
	}

	@class_ns("x4") export class Gridview<P extends GridviewProps = GridviewProps, E extends GridviewEvents = GridviewEvents> extends Component<P,E> {
		_dataview: DataView;
		_datamodel: DataModel;
		_columns: GridColumnEx[];
		_lock: number;
		_dirty: number;
		_row_height: number;
		_left: number;
		_top: number;
		_body: Component;
		_viewport: Component;
		_fheader: Box;
		_hheader: Box;
		_vheader: Box;
		_ffooter: Box;
		_footer: Box;
		_vis_rows: Map<number, { h: Component, r: Component }>;
		_start: number;
		_end: number;
		_selection: Set<number>;
		_num_fmt: any;
		_mny_fmt: any;
		_dte_fmt: any;
		_has_fixed: boolean;
		_has_fo