x4js 1.6.4 → 2.0.1

package/lib/src/component.ts

@@ -1,2367 +0,0 @@
-/**
-*  ___  ___ __
-*  \  \/  /  / _
-*   \    /  /_| |_
-*   /    \____   _|  
-*  /__/\__\   |_|
-*        
- * @file components.ts
- * @author Etienne Cochard 
-*
-* Copyright (c) 2019-2023 R-libre ingenierie
-*
-* Permission is hereby granted, free of charge, to any person obtaining a copy 
-* of this software and associated documentation files (the "Software"), to deal 
-* in the Software without restriction, including without limitation the rights 
-* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies 
-* of the Software, and to permit persons to whom the Software is furnished to do so, 
-* subject to the following conditions:
-* The above copyright notice and this permission notice shall be included in all copies
-* or substantial portions of the Software.
-*
-* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, 
-* INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A 
-* PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 
-* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 
-* OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
-* SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- */
-
-
-/**
- * @todo 
- *		create Container class
- */
-
-import { pascalCase, Rect, isString, isArray, Size, isNumber, asap, HtmlString, isHtmlString, Constructor, getMousePos } from './tools';
-import { x4document } from './x4dom';
-
-import { Stylesheet, ComputedStyle } from './styles';
-import { _tr } from './i18n';
-import { BasicEvent, EventCallback } from './x4events';
-import { BaseComponent, BaseComponentProps, BaseComponentEventMap } from './base_component';
-import { IDOMEvents, X4ElementEventMap } from './dom_events';
-
-export { HtmlString, isHtmlString, html } from './tools'
-
-export interface EventHandler<T> {
-	(ev: T): any;
-}
-
-export interface ICaptureInfo {
-	initiator: Component;
-	handler: EventHandler<UIEvent>;
-	iframes: NodeListOf<HTMLIFrameElement>;
-}
-
-type CSSPropertyName = {
-	-readonly [K in keyof CSSStyleDeclaration & string]: CSSStyleDeclaration[K];
-};
-
-/** @ignore classname prefix for system classes */
-const _x4_ns_prefix = 'x-';
-
-// -- elements -----------
-
-/** @ignore where event handlers are stored */
-const _x4_el_store = Symbol();
-
-/** @ignore where Component is stored in dom */
-const _x4_el_sym = Symbol();
-
-/** @ignore properties without 'px' unit */
-export const _x4_unitless: Record<string,1> = {
-	animationIterationCount: 1, borderImageOutset: 1, borderImageSlice: 1, borderImageWidth: 1, boxFlex: 1, boxFlexGroup: 1,
-	boxOrdinalGroup: 1, columnCount: 1, flex: 1, flexGrow: 1, flexPositive: 1, flexShrink: 1, flexNegative: 1, flexOrder: 1,
-	gridRow: 1, gridColumn: 1, fontWeight: 1, lineClamp: 1, lineHeight: 1, opacity: 1, order: 1, orphans: 1, tabSize: 1, widows: 1,
-	zIndex: 1, zoom: 1,
-
-	// SVG-related _properties
-	fillOpacity: 1, floodOpacity: 1, stopOpacity: 1, strokeDasharray: 1, strokeDashoffset: 1, strokeMiterlimit: 1, strokeOpacity: 1,
-	strokeWidth: 1,
-};
-
-/** @ignore this events must be defined on domNode (do not bubble) */
-const unbubbleEvents = {
-	mouseleave: 1, mouseenter: 1, load: 1, unload: 1, scroll: 1, focus: 1, blur: 1, rowexit: 1, beforeunload: 1, stop: 1,
-	dragdrop: 1, dragenter: 1, dragexit: 1, draggesture: 1, dragover: 1, contextmenu: 1, create: 2, sizechange: 2
-};
-
-/** @ignore */
-const passiveEvents = {
-	touchstart: 1, touchmove: 1, touchend: 1, 
-	//pointerdown: 1, pointermove: 1, pointerup: 1,
-};
-
-/** ignore */
-const reNumber = /^-?\d+(\.\d+)?$/;
-
-
-/**
- * 
- */
-
-export type VoidCallback = () => void;
-
-export type ComponentOrString = Component | string | HtmlString;
-export type ComponentContent = ComponentOrString | ComponentOrString[];
-
-interface IMap<T> {
-	[key: string]: T;
-}
-
-/**
- * DblClick Event
- * double click event 
- */
-
-export interface EvDblClick extends BasicEvent {
-}
-
-export function EvDblClick(context: any = null) {
-	return BasicEvent<EvDblClick>({ context });
-}
-
-/**
- * DblFocus Event
- * double click event 
- */
-
-export interface EvFocus extends BasicEvent {
-	readonly focus: boolean;
-}
-
-export function EvFocus( focus = true, context: any = null) {
-	return BasicEvent<EvFocus>({ focus, context });
-}
-
-/**
- * basic event map of Component
- */
-
-export interface CEventMap extends BaseComponentEventMap {
-}
-
-
-
-
-/**
- * Basic properties of every Component
- */
-
-export interface CProps<T extends CEventMap = CEventMap> extends BaseComponentProps<T> {
-	tag?: string;			// dom Tag <div> if not specified
-	ns?: string;			// namespace (usefull for svg)
-	cls?: string;			// elements classes (space separated), prefix class name with @ to make it system wide
-	id?: string;			// element id
-	style?: IMap<string | number>;	// element style
-	attrs?: Record<string,string|number|boolean>;			// element attributes
-
-	dom_events?: IDOMEvents;	// DOM event handlers
-	data?: any;				// element user data (you can store everything you need here)
-	content?: ComponentContent;	// array of sub components
-	tooltip?: string;		// tooltip text
-	ref?: string;			// internal reference for itemWithRef
-
-	// shortcuts for element style
-	left?: number;
-	top?: number;
-	width?: number | string;
-	height?: number | string;
-	tabIndex?: number | boolean;
-
-	flex?: number | string;	// add @flex class to the element
-	enabled?: boolean;		// add @disabled to the element if false
-}
-
-interface DomListener {
-	listener: EventListener,
-	passive?: boolean
-}
-
-interface CInternalProps {
-	dom_events: Record<string,DomListener[]>;
-	classes: IMap<boolean>;
-	uid: number;
-	created: boolean;
-	inrender: boolean;
-}
-
-/**
- * 
- */
-
-export class Component<P extends CProps<CEventMap> = CProps<CEventMap>, E extends CEventMap = CEventMap> extends BaseComponent<P, E> {
-	private m_dom: HTMLElement;
-	private m_iprops: CInternalProps;
-
-	private static __sb_width: number;			// scrollbar width
-	private static __comp_guid = 1000;	// component global unique id
-	private static __privateEvents: any = {};
-	private static __sizeObserver: ResizeObserver;	// resize observer
-	private static __createObserver: MutationObserver;	// creation observer
-	//private static __intersectionObserver: IntersectionObserver;	// visibility observer
-
-	private static __capture: ICaptureInfo = null;
-	private static __capture_mask: HTMLElement = null;
-	private static __css: Stylesheet = null;
-
-	constructor(props: P = null ) {
-		super(props ?? {} as P );
-
-		this.m_iprops = {
-			classes: {},
-			dom_events: {},
-			uid: Component.__comp_guid++,
-			inrender: false,
-			created: false,
-		};
-
-		// prepare iprops
-		if( this.m_props.cls ) {
-			this.addClass( this.m_props.cls );
-		}
-	}
-
-	/**
-	 * 
-	 */
-
-	get uid() {
-		return this.m_iprops.uid;
-	}
-
-	/**
-	 * change the component content
-	 * @param content new content or null
-	 */
-
-	setContent(content: ComponentContent, refreshAll = false ) {
-		this.m_props.content = content ?? [];
-
-		if( this.m_iprops.inrender || !this.m_dom ) {
-			return;
-		}
-
-		if (refreshAll) {
-			this.update();
-		}
-		else {
-			this._updateContent();
-		}
-	}
-
-	getContent( ) {
-		return this.m_props.content;
-	}
-
-	/**
-	 * add a new child to the component content
-	 * @param content 
-	 */
-
-	appendChild(content: ComponentContent) {
-
-		if (!content) {
-			return;
-		}
-
-		const append = (c: ComponentOrString) => {
-
-			if (!this.m_props.content) {
-				this.m_props.content = [];
-			}
-			else if (!isArray(this.m_props.content)) {
-				this.m_props.content = [this.m_props.content];
-			}
-
-			this.m_props.content.push(c);
-			if (this.m_dom) {
-				this._appendChild(c);
-			}
-		}
-
-		if (isArray(content)) {
-			content.forEach(append);
-		}
-		else {
-			append(content);
-		}
-	}
-
-	removeChild( item: Component ) {
-		if( this.m_props.content ) {
-			if (!isArray(this.m_props.content)) {
-				this.m_props.content = [this.m_props.content];
-			}
-
-			this.m_props.content = this.m_props.content.filter( x => x!==item );
-		}
-
-		if( this.dom && item.dom ) {
-			this.dom.removeChild( item.dom );
-		}
-	}
-
-	/**
-	 * 
-	 */
-
-	setTag( tag: string, namespace?: string ) {
-		this.m_props.tag = tag;
-		if( namespace ) {
-			this.m_props.ns = namespace;
-		}
-	}
-
-	/**
-	 * get the Component data value
-	 * @param name name to get
-	 */
-
-	getData(name: string | Symbol): any {
-		if (this.m_props.data !== undefined) {
-			return this.m_props.data[name.toString()];
-		}
-
-		return undefined;
-	}
-
-	/**
-	 * set the Component data value
-	 * @param name name to get
-	 * @param value
-	 */
-
-	setData(name: string | Symbol , value: any) {
-
-		let data = this.m_props.data;
-		if (data === undefined) {
-			data = this.m_props.data = {};
-		}
-
-		data[name.toString()] = value;
-	}
-
-
-	/**
-	 * return the DOM associated with the Component (if any)
-	 */
-
-	get dom(): HTMLElement {
-		return this.m_dom;
-	}
-
-	/**
-	 * shows the element
-	 * @param show
-	 */
-
-	show(show?: boolean) {
-		if (show === undefined || show === true) {
-			this.removeClass('@hidden');
-		}
-		else {
-			this.addClass('@hidden');
-		}
-	}
-
-	/**
-	 * hides the element
-	 */
-	hide() {
-		this.addClass('@hidden');
-	}
-
-	/**
-	 * enable or disable the element
-	 * @param enable 
-	 */
-
-	enable(enable?: boolean) {
-		if (enable === undefined || enable === true) {
-			this.removeClass('@disable');
-			this.removeAttribute('disabled');
-		}
-		else {
-			this.disable();
-		}
-	}
-
-	/**
-	 * disable the element
-	 */
-
-	disable() {
-		this.addClass('@disable');
-		this.setAttribute('disabled', '');
-	}
-
-	/**
-	 * set the focus on the element
-	 */
-
-	focus() {
-		console.assert(!!this.m_dom);
-		this.m_dom.focus();
-	}
-
-	/**
-	 * change the object style
-	 * @param style - style to add
-	 * @example ```typescript
-	 * el.setStyle( {left:100} );
-	 */
-
-	public setStyle(style: Record<string,any>) {
-		for (let s in style) {
-			this.setStyleValue(s, style[s]);
-		}
-	}
-
-	/**
-	 * change a style value
-	 * @param name string style nale
-	 * @param value any style value or null to remove style
-	 */
-
-	setStyleValue(name: string, value: any) {
-		let style = this.m_props.style;
-		if (!style) {
-			style = this.m_props.style = {};
-		}
-
-		style[name] = value;
-		this._setDomStyleValue(name, value);
-	}
-
-	private _setDomStyleValue(name: string, value: string | number) {
-
-		if (this.m_dom) {
-			if (value === undefined) {
-				value = null;
-			}
-			else if (!_x4_unitless[name as string] && (isNumber(value) || reNumber.test(value))) {
-				value = value + 'px';
-			}
-
-			(this.m_dom.style as any)[name] = value;
-		}
-	}
-
-	/**
-	 * compute the element style 
-	 * @return all styles computed
-	 */
-
-	public getComputedStyle(pseudoElt?: string): ComputedStyle {
-		if (this.dom) {
-			return new ComputedStyle(getComputedStyle(this.dom, pseudoElt ?? null));
-		}
-
-		return new ComputedStyle(this.m_props.style as any);
-	}
-
-	/**
-	 * return a single stype value
-	 * @param name - value to get
-	 */
-
-	public getStyleValue(name: string) {
-		return (this.getComputedStyle() as any)[name];
-	}
-
-	/**
-	 * define the elements attributes
-	 * @param attrs 
-	 */
-
-	public setAttributes(attrs: any) {
-		for (let a in attrs) {
-			this.setAttribute(a, attrs[a]);
-		}
-	}
-
-	/**
-	 * change a single attribute
-	 * @param name attribute name
-	 * @param value new value 
-	 */
-
-	public setAttribute(name: string, value: any) {
-
-		if (value === false || value === undefined) {
-			this.removeAttribute(name);
-		}
-		else {
-			if (value === true) {
-				value = '';
-			}
-			else if (isNumber(value)) {
-				value = '' + value;
-			}
-
-			let attrs = this.m_props.attrs;
-			if (!attrs) {
-				attrs = this.m_props.attrs = {};
-			}
-
-			attrs[name] = value;
-			this._setDomAttribute(name, value);
-		}
-	}
-
-	private _setDomAttribute(name: string, value: string) {
-		if (this.m_dom) {
-			this.m_dom.setAttribute(name, value);
-		}
-	}
-
-	/**
-	 * remove an atrribute
-	 * @param name name of the attribute
-	 */
-	public removeAttribute(name: string) {
-		let attrs = this.m_props.attrs;
-		if (!attrs) {
-			return;
-		}
-
-		delete attrs[name];
-
-		if (this.m_dom) {
-			this.m_dom.removeAttribute(name);
-		}
-	}
-
-	/**
-	 * get an attribute value
-	 * @param {string} name - attribute name
-	 * @return {string} attribute value
-	 * @example ```typescript
-	 * let chk = el.getAttribute( 'checked' );
-	 * @review double cache
-	 */
-
-	public getAttribute(name: string): string {
-		if (this.m_dom) {
-			return this.m_dom.getAttribute(name);
-		}
-		else {
-			//todo move to attrs
-			if( name=='id' ) {
-				return this.m_props.id;
-			}
-
-			return this.m_props.attrs ? this.m_props.attrs[name]+'' : undefined;
-		}
-	}
-
-	/**
-	 * check if the element has an attribute
-	 * @param name attribute name
-	 * @return true is attribute is present
-	 * @example ```typescript
-	 * if( el.hasAttribute('checked') ) {
-	 * }
-	 */
-
-	public hasAttribute(name: string): boolean {
-		if (this.m_dom) {
-			return this.m_dom.hasAttribute(name);
-		}
-		else {
-			return this.m_props.attrs.hasOwnProperty(name);
-		}
-	}
-
-
-	/**
-	 * a some classnames to the component
-	 * classes can be separated by a space
-	 * @param cls class to add
-	 * @example ```typescript
-	 * addClass( 'my class name @flex' );
-	 */
-
-	public addClass(name: string) {
-
-		if (name === null || name === undefined) {
-			return;
-		}
-
-		name = name.trim();
-		if (name === '') {
-			return;
-		}
-
-		let add = (c: string) => {
-
-			if (c === undefined || c === null || c === '') {
-				return;
-			}
-
-			c = this._makeCls(c);
-
-			// update vdom
-			classes[c] = true;
-
-			// update dom
-			if (this.m_dom) {
-				this.m_dom.classList.add(c);
-			}
-		}
-
-		let classes = this.m_iprops.classes;
-		if (name.indexOf(' ') < 0) {
-			add(name);
-		}
-		else {
-			let names = name.split(' ');
-			names.forEach((n) => add(n));
-		}
-	}
-
-	/**
-	 * Remove a class from the element
-	 * @param {string|array} name - classes in string form can be space separated
-	 * 
-	 * @example ```typescript
-	 * el.removeClass( 'myclass' );
-	 * el.removeClass( 'myclass1 myclass2' );
-	 */
-
-	public removeClass(name: string): void {
-
-		if (name === undefined) {
-			return;
-		}
-
-		let remove = (c: string) => {
-			if (c === undefined || c === null || c === '') {
-				return;
-			}
-
-			c = this._makeCls(c);
-
-			delete this.m_iprops.classes[c];
-			if (this.m_dom) {
-				this.m_dom.classList.remove(c);
-			}
-		}
-
-		// faster
-		if (name.indexOf(' ') < 0) {
-			remove(name);
-		}
-		else {
-			//  build class list
-			let classes = name.trim().split(' ');
-			for (let c of classes) {
-				if (c !== undefined && c !== null && c !== '') {
-					remove(c);
-				}
-			}
-		}
-	}
-
-	/**
-	 * 
-	 * @param cls 
-	 * @param set 
-	 */
-
-	public setClass(cls: string, set: boolean) {
-		if (set) { this.addClass(cls); }
-		else { this.removeClass(cls); }
-		return this;
-	}
-
-	/**
-	 * Toggle a class from the element (if present remove, if absent add)
-	 * @param {string|string[]} name - classes in string form can be space separated
-	 * @example ```typescript
-	 * el.toggleClass( 'myclass' );
-	 * el.toggleClass( 'myclass1 myclass2');
-	 * el.toggleClass( ['myclass1','myclass2']);
-	 */
-
-	public toggleClass(name: string): void {
-
-		let toggle = (c: string) => {
-			if (c === undefined && c === null && c === '') {
-				return;
-			}
-
-			c = this._makeCls(c);
-			if (this.m_iprops.classes[c]) {
-				delete this.m_iprops.classes[c]
-			}
-			else {
-				this.m_iprops.classes[c] = true;
-			}
-
-			if (this.m_dom) {
-				this.m_dom.classList.toggle(c);
-			}
-		}
-
-		// faster
-		if (name.indexOf(' ') < 0) {
-			toggle(name);
-		}
-		else {
-
-			//  build class list
-			let classes = name.trim().split(' ');
-			for (let c of classes) {
-				toggle(c);
-			}
-		}
-	}
-
-	/**
-	 * check if the object has the class
-	 * @param cls 
-	 */
-
-	public hasClass(cls: string): boolean {
-
-		let c = this._makeCls(cls);
-		if (this.m_dom) {
-			return this.dom.classList.contains(c);
-		}
-		else {
-			return !!this.m_iprops.classes[c];
-		}
-	}
-
-	/**
-	 * remove all classes from the object 
-	 * this is usefull for component recycling & reusing
-	 */
-
-	public clearClasses() {
-		this.m_iprops.classes = {};
-		if (this.m_dom) {
-			return this.m_dom.classList.value = '';
-		}
-	}
-
-	public _build(): HTMLElement {
-		if (this.m_dom) {
-			return this.m_dom;
-		}
-
-		this._createDOM();
-		return this.m_dom;
-	}
-
-	public render(props: P) {
-	}
-
-	public _createDOM(): HTMLElement {
-
-		if (this.m_dom) {
-			return this.m_dom;
-		}
-
-		// setup props
-		const props = this.m_props;
-
-		if( props.tabIndex!==undefined ) {
-			this._setTabIndex( props.tabIndex );
-		}
-		this.render(props);
-		
-		// shortcuts ---------
-		if (props.left !== undefined) { this.setStyleValue('left', props.left); }
-		if (props.top !== undefined) { this.setStyleValue('top', props.top); }
-		if (props.width !== undefined) { this.setStyleValue('width', props.width); }
-		if (props.height !== undefined) { this.setStyleValue('height', props.height); }
-
-		if (props.flex !== undefined) {
-			this.addClass('@flex');
-			if (props.flex != 1) {
-				this.setStyleValue('flex', props.flex);
-			}
-		}
-
-		if (props.enabled === false) {
-			this.disable();
-		}
-
-		// shortcut: tip
-		if (props.tooltip !== undefined) {
-			this.setAttribute('tip', props.tooltip.replace(/\n/gi, '<br/>'));
-		}
-
-
-		// prepare iprops
-		if (props.dom_events) {
-			for (let ename in props.dom_events) {
-				this._setDomEvent(ename, (props.dom_events as any)[ename]);
-			}
-		}
-
-		this._genClassName();
-		this.m_props.cls = undefined;	// now classes are tranfered to m_iprops
-
-		// create self
-		let vdom = this.m_iprops;
-
-		if (props.ns) {
-			this.m_dom = <HTMLElement>x4document.createElementNS(props.ns, props.tag ?? 'div');
-		}
-		else {
-			this.m_dom = x4document.createElement( (props.tag ?? 'div') as any );
-		}
-
-		(this.m_dom as any)[_x4_el_sym] = this;
-
-		//let me = Object.getPrototypeOf(this);
-		//console.log( 'create', this.m_iprops.uid, me.constructor.name );
-
-		// classes
-		this.m_dom.classList.add(...Object.keys(vdom.classes));
-
-		// styles
-		let sty = props.style;
-		if (sty) {
-			for (let s in sty) {
-				this._setDomStyleValue(s, sty[s]);
-			}
-		}
-
-		// attributes
-		let att = props.attrs;
-		if (att) {
-			for (let a in att) {
-				const attr = att[a];
-				if( attr!==false && attr!==undefined ) {
-					this._setDomAttribute(a, ''+att[a] );
-				}
-			}
-		}
-
-		// special properties
-		if (this.m_props.id) {
-			this._setDomAttribute('id', this.m_props.id);
-		}
-
-		// events
-		let evt = this.m_iprops.dom_events;
-		if (evt) {
-			for (let e in evt) {
-				let handlers = evt[e];
-				for (let h of handlers) {
-					this._createEvent(e, h.listener, h.passive );
-				}
-			}
-		}
-
-		// create children
-		let content = props.content;
-		if (content) {
-
-			if (!isArray(content)) {
-				content = [content];
-			}
-
-			content.forEach((el) => {
-				if (!el) {
-					return;
-				}
-
-				if (isString(el)) {
-					this.m_dom.insertAdjacentText('beforeend', el);
-				}
-				else if (isHtmlString(el)) {
-					this.m_dom.insertAdjacentHTML('beforeend', el as string);
-				}
-				else if (el instanceof Component) {
-					this.m_dom.append(el._build());
-				}
-				else {
-					console.log( 'unknown element type: ', el );
-				}
-			});
-		}
-
-		// wait for dom insertion inside document.body
-		if (!Component.__createObserver) {
-			Component.__createObserver = new MutationObserver(Component._observeCreation);
-			Component.__createObserver.observe(x4document.body, { childList: true, subtree: true });
-		}
-
-		return this.m_dom;
-	}
-
-	protected _setTabIndex(tabIndex: number | boolean, defValue = 0) {
-
-		if (tabIndex === true) {
-			tabIndex = 0;
-		}
-		else if (tabIndex === undefined) {
-			tabIndex = defValue;
-		}
-
-		if (tabIndex !== false && tabIndex !== undefined) {
-			this.setAttribute('tabindex', tabIndex);
-		}
-
-		this.m_props.tabIndex = tabIndex;
-	}
-
-	private static _observeCreation(mutations: MutationRecord[]) {
-
-		// notify descendants that we have been created (dom exists)
-
-		const notify = ( c: Component ) => {
-
-			if( !c.m_iprops.created ) {
-				if (c.dom && c.m_iprops.dom_events && c.m_iprops.dom_events.create) {
-					c.dom.dispatchEvent(new Event('create'));
-				}
-		
-				c.componentCreated();
-				c.m_iprops.created = true;
-			}
-		}
-
-		for (let mutation of mutations) {
-
-			if (mutation.type == 'childList') {
-
-				for (let i = 0, n = mutation.addedNodes.length; i < n; i++) {
-
-					let add = mutation.addedNodes[i] as HTMLElement;
-					let el = (add as any)[_x4_el_sym] as Component;
-
-					if (el) {
-						el.enumChilds((c: Component) => {
-							notify( c );
-						}, true);
-
-						notify( el );
-					}
-				}
-			}
-		}
-
-		
-	}
-
-	public dispose() {
-		if (this.m_dom) {
-			this._dispose(true,true);
-		}
-	}
-
-	protected _dispose(with_dom: boolean, timers: boolean ) {
-
-		let _dom = this.m_dom;
-
-		// free attached resources
-		delete (_dom as any)[_x4_el_sym];
-		delete (_dom as any)[_x4_el_store];
-
-		//
-		if (with_dom) {
-			_dom.remove();
-		}
-
-		// notify every child that they will be removed
-		this.enumChilds((c: Component) => {
-			c._dispose(false,true);
-		});
-
-		this.m_dom = null;
-
-		if( timers ) {
-			this.disposeTimers();
-		}
-
-		this.componentDisposed();
-		this.m_iprops.created = false;
-		// todo: pb on update this.removeAllListeners( null );
-	}
-
-	componentDisposed() {
-	}
-
-	componentCreated() {
-	}
-
-
-
-
-
-
-
-	/**
-	 * 
-	 */
-
-	public update(delay = 0) {
-
-		if (this.m_dom) {
-
-			const _update = () => {
-				let oldDOM = this.m_dom;
-				this._dispose(false,false);
-
-				let newDOM = this._build();
-				console.assert( !!oldDOM.parentNode, 'update in componentCreated is not allowed, use updateContent' );
-
-				oldDOM.parentNode.replaceChild(newDOM, oldDOM);
-			}
-
-			if (delay) {
-				this.singleShot(_update, delay);
-			}
-			else {
-				_update();
-			}
-		}
-	}
-
-	/**
-	 * empty the node
-	 */
-	public _empty( ) {
-		//this.m_dom.innerHTML = '';
-		
-		const el = this.m_dom;
-		if( !el ) {
-			return;
-		}
-
-		while (el.firstChild) {
-			el.removeChild(el.firstChild);
-		}
-	}
-
-	public _updateContent() {
-
-		if (!this.m_dom) {
-			return;
-		}
-
-		this._empty( );
-
-		let content = this.m_props.content;
-
-		// create children
-		if (content) {
-
-			if (!isArray(content)) {
-				content = [content];
-			}
-
-			content.forEach((el) => {
-				if (!el) {
-					return;
-				}
-
-				if (isHtmlString(el)) {
-					this.m_dom.insertAdjacentHTML('beforeend', el as string);
-				}
-				else if (el instanceof Component) {
-					this.m_dom.append(el._build());
-				}
-				else {
-					this.m_dom.insertAdjacentText('beforeend', el + '');
-				}
-			});
-		}
-
-	}
-
-	/**
-	 * @return the bounding rectangle
-	 * @example ```typescript
-	 * let rc = el.getBoundingRect( );
-	 * console.log( rc.left, rc.top, rc.right, rc.bottom );
-	 */
-
-	public getBoundingRect(withMargins = false): Rect {
-		console.assert(this.dom != null, 'cannot get bounding rect of an non DOM element');
-		let r = this.dom.getBoundingClientRect();
-
-		let rc = new Rect(r.left, r.top, r.width, r.height);
-
-		if (withMargins) {
-
-			let st = this.getComputedStyle();
-
-			let tm = st.parse('marginTop'),
-				bm = st.parse('marginBottom'),
-				lm = st.parse('marginLeft'),
-				rm = st.parse('marginRight');
-
-			rc.left -= lm;
-			rc.width += lm + rm;
-
-			rc.top -= tm;
-			rc.height += tm + bm;
-		}
-
-		return rc;
-	}
-
-	/**
-	 * append a new dom event handler
-	 * @param name - you can specify multiple names separated by a space
-	 * @param handler 
-	 * @example
-	 * 
-	 * this.setDomEvent( 'drag drop', this._handleDrag, this );
-	 * this.setDomEvent( 'dblclick', this._handleDblClick, this );
-	 */
-
-	public setDomEvent<K extends keyof X4ElementEventMap>(type: K, listener: (this: HTMLDivElement, ev: X4ElementEventMap[K]) => void, passive?: boolean ) {
-		let _listener = listener as EventListener;
-		this._setDomEvent(type as string, _listener, passive);
-	}
-
-	private _setDomEvent(type: string, listener: EventListener, passive?: boolean) {
-
-		// add event to the vdom
-		if (!this.m_iprops.dom_events) {
-			this.m_iprops.dom_events = {};
-		}
-
-		let listeners = this.m_iprops.dom_events[type];
-		if (!listeners) {
-			listeners = this.m_iprops.dom_events[type] = [{listener,passive}];
-		}
-		else {
-			listeners.push({listener,passive});
-		}
-
-		if (this.m_dom) {
-			//this.m_dom.addEventListener(type, listener);
-			this._createEvent(type, listener,passive);
-		}
-	}
-
-	/**
-	 * 
-	 */
-
-	public clearDomEvent<K extends keyof X4ElementEventMap>(type: K) {
-		if (!this.m_iprops.dom_events) {
-			return;
-		}
-
-		delete this.m_iprops.dom_events[type];
-
-		let _dom = this.m_dom;
-		if (_dom) {
-			let store = (_dom as any)[_x4_el_store];
-			if (store) {
-				delete store[type];
-			}
-		}
-	}
-
-	/**
-	 * 
-	 * @param name 
-	 * @param handler 
-	 */
-
-	private _createEvent(name: string, handler: Function, passive?: boolean) {
-
-		let _dom = this.m_dom;
-		let store = (_dom as any)[_x4_el_store];
-
-		if (!store) {
-			store = (_dom as any)[_x4_el_store] = {};
-		}
-
-		if (!store[name]) {
-			// no handler for this event...
-			store[name] = [handler];
-		}
-		else {
-			// append the handler
-			store[name].push(handler);
-		}
-
-		if ((unbubbleEvents as any)[name] === 1) {
-			(_dom as any)['on' + name] = Component._dispatchUnbubbleEvent;
-		}
-		else if (!Component.__privateEvents[name]) {
-			Component.__privateEvents[name] = true; // todo count it
-
-			if( passive===undefined ) {
-				if ( (passiveEvents as any)[name] ) {
-					x4document.addEventListener(name as any, Component._dispatchEvent, { passive: false, capture: true });
-				}
-				else {
-					x4document.addEventListener(name as any, Component._dispatchEvent, true);
-				}
-			}
-			else {
-				x4document.addEventListener(name as any, Component._dispatchEvent, { passive, capture: passive ? true : false } );
-			}
-		}
-
-		if (name === 'sizechange') {
-			if (!Component.__sizeObserver) {
-				Component.__sizeObserver = new ResizeObserver(Component._observeSize);
-			}
-
-			Component.__sizeObserver.observe(this.m_dom);
-		}
-	}
-
-	/**
-	 * dispatch a dom event to the appropriated component
-	 * called by the system
-	 */
-
-	private static _dispatchEvent(ev: any) {
-
-		let target = ev.target,
-			noup = (unbubbleEvents as any)[ev.type] === 2;
-
-		while (target) {
-			if (target[_x4_el_store]) {
-				let store = target[_x4_el_store][ev.type];
-				if (store) {
-					let el = target[_x4_el_sym];
-					let root = el?.root ?? null;
-
-					if (store instanceof Array) {
-						store.some((fn) => {
-							fn(ev, root);
-							if (!el.dom) {
-								return true;
-							}
-						});
-					}
-					else {
-						store(ev, root);
-					}
-
-					if (ev.cancelBubble || ev.defaultPrevented || noup) {
-						break;
-					}
-				}
-			}
-
-			target = target.parentNode;
-
-			// no need to go above
-			if (target == document) {
-				break;
-			}
-		}
-	}
-
-	/**
-	 * dispatch a dom event to the appropriated component
-	 * called by the system
-	 */
-
-	private static _dispatchUnbubbleEvent(ev: any) {
-
-		let target = ev.currentTarget || ev.target,
-			eventType = ev.type;
-
-		let eventStore = target[_x4_el_store],
-			store = eventStore && eventStore[eventType];
-
-		if (store) {
-
-			let el = target[_x4_el_sym];
-			let root = el?.root ?? null;
-
-			if (store instanceof Array) {
-				store.forEach((fn) => {
-					fn(ev, root);
-				});
-			}
-			else {
-				store(ev, root);
-			}
-		}
-	}
-
-	/**
-	 * called when a size change on an observed component
-	 */
-
-	private static _observeSize(entries: ResizeObserverEntry[]) {
-
-		entries.forEach((entry) => {
-			let dom = entry.target as HTMLElement;
-			if (dom.offsetParent !== null) {
-				dom.dispatchEvent(new Event('sizechange'));
-			}
-		});
-	}
-
-	/**
-	 * enum all children recursively
-	 * @param recursive - if true do a full sub-child search 
-	 * @param cb - callback
-	 * return true to stop enumeration
-	 */
-
-	enumChilds(cb: (child: Component) => boolean | void, recursive = false): boolean {
-
-		// use dom if available
-		if (this.m_dom) {
-
-			let el = this.m_dom.firstChild;
-
-			while (el) {
-				// get component (if any)
-				let cel = (el as any)[_x4_el_sym];
-				if (cel) {
-					cb(cel);
-
-					if (recursive && cel.enumChilds(cb, true) === true) {
-						return true;
-					}
-				}
-
-				el = el.nextSibling;
-			}
-		}
-		else {
-			let content = this.m_props.content;
-			if (!content) {
-				return;
-			}
-
-			if (!isArray(content)) {
-				content = [content];
-			}
-
-			content.some((el) => {
-				if (!el || isString(el) || isHtmlString(el)) {
-					return;
-				}
-
-				if (cb(el)) {
-					return true;
-				}
-
-				if (recursive && el.enumChilds(cb, true) === true) {
-					return true;
-				}
-			});
-		}
-
-		return false;
-	}
-
-	/**
-	 * apprend a child to the DOM
-	 * @param props child to append (or string)
-	 */
-
-	private _appendChild(el: ComponentOrString) {
-
-		if (isString(el)) {
-			this.m_dom.insertAdjacentText('beforeend', el);
-		}
-		else if (isHtmlString(el)) {
-			this.m_dom.insertAdjacentHTML('beforeend', el as string);
-		}
-		else {
-			let component: Component = el;
-
-			try {
-				component._build();
-				this.m_dom.appendChild(component.m_dom);
-			}
-			catch (e) {
-				console.error(e);
-			}
-		}
-	}
-
-	/**
-	 * generate classes from the component inheritance 
-	 * @example
-	 * Button extends Component will give
-	 * x-comp x-button
-	 */
-
-	private _genClassName() {
-
-		this.addClass('@comp');
-
-		let me = Object.getPrototypeOf(this);
-		while (me && me.constructor !== Component) {
-			let clsname = me.constructor.name;
-			this.addClass('@' + pascalCase(clsname));
-
-			me = Object.getPrototypeOf(me);
-		}
-
-		//done in ctor now
-		//this.addClass(this.m_props.cls);
-	}
-
-	/**
-	 * prepend the system class name prefix on a name if needed (if class starts with @)
-	 */
-
-	private _makeCls(cls: string): string {
-		if (cls[0] == '@') {
-			return cls = _x4_ns_prefix + cls.substring(1);
-		}
-		else {
-			return cls;
-		}
-	}
-
-	/**
-	 * 
-	 */
-
-	private static dispatchCaptures(event: Event) {
-		Component.__capture.handler(event as UIEvent);
-	}
-
-	/**
-	 * capture mouse events
-	 * @param capture name of the current capture 
-	 * @param callback funciton to call on captured mouse events
-	 * 
-	 * @example
-	 * Component.setCapture( this, ( ev: MouseEvent, initiator: Component ) => {
-	 *		if( ev.type=='mousemove' ) {
-	 *			this.setStyle( {
-	 *				left: ev.clientX,
-	 *				top: ev.clientY
-	 *			} );
-	 *		}
-	 *		else if( ev.type=='mouseup' ) {
-	 *			Component.releaseCapture( );
-	 *		}
-	 *	} );
-	 */
-
-	protected static setCapture(initiator: Component, listener: EventHandler<UIEvent>) {
-
-		console.assert(!Component.__capture);
-		if (Component.__capture) {
-			debugger;
-		}
-
-		//	todo: review that
-
-		let iframes = x4document.querySelectorAll<HTMLIFrameElement>("iframe");
-		iframes.forEach( f => {
-			flyWrap(f).setStyleValue( 'pointer-events', 'none' );
-		});
-
-		let overs = x4document.querySelectorAll(":hover");
-
-		let cursor = null;
-		if (overs.length) {
-			let elementOver = <HTMLElement>overs[overs.length - 1];
-			let style = window.getComputedStyle(elementOver);
-			cursor = style.cursor;
-		}
-
-		Component.__capture_mask = x4document.createElement('div');
-		let mask = flyWrap(Component.__capture_mask);
-		mask.addClass('@capture-mask');
-
-		if (cursor) {
-			mask.setStyleValue('cursor', cursor);
-		}
-
-		x4document.body.appendChild(mask.dom);
-
-		x4document.addEventListener('mousedown', Component.dispatchCaptures);
-		x4document.addEventListener('mousemove', Component.dispatchCaptures);
-		x4document.addEventListener('mouseup', Component.dispatchCaptures);
-
-		x4document.addEventListener('touchstart', Component.dispatchCaptures);
-		x4document.addEventListener('touchmove', Component.dispatchCaptures);
-		x4document.addEventListener('touchend', Component.dispatchCaptures);
-
-		Component.__capture = {
-			initiator,
-			handler: listener,
-			iframes
-		};
-	}
-
-	protected static releaseCapture() {
-
-		console.assert(!!Component.__capture);
-
-		x4document.removeEventListener('touchstart', Component.dispatchCaptures);
-		x4document.removeEventListener('touchmove', Component.dispatchCaptures);
-		x4document.removeEventListener('touchend', Component.dispatchCaptures);
-
-		x4document.removeEventListener('mousedown', Component.dispatchCaptures);
-		x4document.removeEventListener('mousemove', Component.dispatchCaptures);
-		x4document.removeEventListener('mouseup', Component.dispatchCaptures);
-		
-		Component.__capture.iframes.forEach( f => {
-			flyWrap(f).setStyleValue( 'pointer-events', null );
-		})
-
-		Component.__capture = null;
-		if (Component.__capture_mask) {
-			x4document.body.removeChild(Component.__capture_mask);
-			Component.__capture_mask = null;
-		}
-	}
-
-	/**
-	 * ensure the component is visible
-	 * @param: alignToTop 
-	 */
-
-	public scrollIntoView(arg?: boolean | ScrollIntoViewOptions) {
-		if (this.m_dom) {
-
-			const rel = new Rect( this.dom.getBoundingClientRect( ) );
-			
-			let top = undefined;
-			let bot = undefined;
-			let left = undefined;
-			let right = undefined;
-
-			let pn = this.dom.parentElement;
-			const bdy = x4document.body;
-
-			while( pn && pn!=bdy ) {
-
-				const pr = pn.getBoundingClientRect( );
-
-				if( top===undefined || top<pr.top ) {
-					top = pr.top;
-				}
-
-				if( bot===undefined || bot>pr.bottom ) {
-					bot = pr.bottom;
-				}
-
-				if( left===undefined || left<pr.left ) {
-					left = pr.left;
-				}
-
-				if( right===undefined || right>pr.right ) {
-					right = pr.right;
-				}
-
-				pn = pn.parentElement;
-			}
-
-			if( top===undefined || rel.top<top || rel.bottom>bot || rel.left<left || rel.right>right ) {
-				//this.m_dom.scrollIntoView( true );
-				this.m_dom.scrollIntoView({ behavior: 'auto', block: 'nearest', inline: 'start' });
-			}
-			
-			//this.m_dom.scrollIntoView(arg);
-		}
-	}
-
-	/**
-	 * search for a given css selector 
-	 * @param selector 
-	 * @returns child or null
-	 */
-
-	public queryItem<T extends Component>(selector: string): T {
-		let result = <HTMLElement>this.dom.querySelector(selector);
-		return result ? Component.getElement<T>(result) : null;
-	}
-
-	public queryAll(selector: string, cb?: (el: Component) => void): HTMLElement[] {
-		let elements:HTMLElement[] = Array.from( this.m_dom.querySelectorAll<HTMLElement>(selector) );
-		
-		if( cb ) {
-			elements.forEach((el) => {
-				cb(flyWrap(el as HTMLElement));
-			});
-		}
-		
-		return elements;
-	}
-
-	/**
-	 * find a child with the given ID
-	 * @param id id (without '#')
-	 * @returns child or null
-	 * 
-	 * @example
-	 * let btn = this.childWithId<Button>( 'myButtonId' );
-	 */
-	public itemWithId<T extends Component>(id: string): T {
-		let result = <HTMLElement>this.dom.querySelector('#' + id);
-		return result ? Component.getElement<T>(result) : null;
-	}
-
-	/**
-	 * find a child with given ref
-	 * @param ref 
-	 * @return found child or null
-	 */
-
-	public itemWithRef<T = Component>(ref: string): T {
-
-		let result = null;
-		this.enumChilds((c: Component) => {
-			if (c.m_props.ref === ref) {
-				result = c;
-				return true;
-			}
-		}, true);
-
-		return result as T;
-	}
-
-	/**
-	 * 
-	 */
-
-	get ref() {
-		return this.m_props.ref;
-	}
-
-	/**
-	 * 
-	 */
-
-	static getCss(): Stylesheet {
-		if (!Component.__css) {
-			Component.__css = new Stylesheet();
-		}
-
-		return Component.__css;
-	}
-
-	/**
-	 * return the parent element
-	 * care, object must have been created (dom!=null)
-	 */
-
-	public getParent(): Component {
-		console.assert(!!this.m_dom);
-
-		let elParent = this.dom.parentNode;
-		return Component.getElement(<HTMLElement>elParent);
-	}
-
-	/**
-	 * get a component from a DOM element
-	 * move up to the hierarchy to find the request class type.
-	 * @param dom 
-	 * @param classname 
-	 * @returns 
-	 * 
-	 * @example
-	 * 
-	 * with a DOM like that:
-	 * 	 Button
-	 * 	 	Label
-	 * 		Icon <- the DOM you have (dom-icon)
-	 *  
-	 *  let btn = Component.getElement( dom-icon, Button );
-	 */
-
-	static getElement<T extends Component>(dom: HTMLElement | Element, classname?: Constructor<T> | string ): T {
-
-		if (classname) {
-
-			const srhCls = isString(classname);
-
-			while (dom) {
-				let el: Component = (dom as any)[_x4_el_sym];
-
-				if( srhCls ) {
-					if( el && el.hasClass(classname) ) {
-						return el as T;
-					}
-				}
-				else if (el instanceof classname) {
-					return el;
-				}
-
-				dom = dom.parentElement;
-			}
-
-			return null;
-		}
-		else {
-			return dom ? (dom as any)[_x4_el_sym] : null;
-		}
-	}
-
-	/**
-	 * compute the scrollbar size ( width = height)
-	 */
-
-	static getScrollbarSize() {
-
-		if (Component.__sb_width === undefined) {
-			let outerDiv = x4document.createElement('div');
-			outerDiv.style.cssText = 'overflow:auto;position:absolute;top:0;width:100px;height:100px';
-
-			let innerDiv = x4document.createElement('div');
-			innerDiv.style.width = '200px';
-			innerDiv.style.height = '200px';
-
-			outerDiv.appendChild(innerDiv);
-			x4document.body.appendChild(outerDiv);
-
-			Component.__sb_width = outerDiv.offsetWidth - outerDiv.clientWidth;
-			x4document.body.removeChild(outerDiv);
-		}
-
-		return Component.__sb_width;
-	}
-
-	/**
-	 * check if the Component is visible to the user
-	 */
-
-	isUserVisible(): boolean {
-		if (!this.m_dom) {
-			return false;
-		}
-
-		return (this.m_dom.offsetParent !== null);
-	}
-}
-
-/** @ignore */
-let fly_element: Component = null;
-
-/**
- * warp <b>temporarily</b> a DOM element to be able to acces to exact API
- * @param dom dom element to wrap
- * @review qui libere le fly_element ? -> timeout
- */
-
-export function flyWrap<T extends Component>(dom: HTMLElement | EventTarget): T {
-
-	if ((dom as any)[_x4_el_sym]) {
-		return (dom as any)[_x4_el_sym];
-	}
-
-	let f = fly_element;
-	if (!f) { f = fly_element = new Component({}); }
-	(<any>f).m_dom = dom;
-
-	return f as T;
-}
-
-
-
-
-
-
-
-
-/**
- * simple flex spacer
- */
-
-export class Flex extends Component {
-
-	constructor(props: CProps = {}) {
-		if (!props.flex) {
-			props.flex = 1;
-		}
-
-		super(props);
-	}
-}
-
-/**
- * simple space between 2 elements
- */
-
-export class Space extends Component {
-
-	m_size: number | string;
-
-	constructor(size: number | string) {
-		super({});
-
-		this.m_size = size;
-	}
-
-	componentCreated() {
-
-		// try to find if we are in a hz / vt / abs container
-		let dom = this.dom;
-		let style = null;
-
-		while (dom) {
-			let el: Component = (dom as any)[_x4_el_sym];
-			if (el.hasClass('@hlayout')) {
-				style = { width: this.m_size };
-				break;
-			}
-			else if (el.hasClass('@vlayout')) {
-				style = { height: this.m_size };
-				break;
-			}
-
-			dom = dom.parentElement;
-		}
-
-		if (!style) {
-			style = { width: this.m_size, height: this.m_size };
-		}
-
-		this.setStyle(style);
-	}
-}
-
-/**
- * sizable separator
- */
-
-type SizeMode = null | 'minimize' | 'maximize' | 'restore';
-
-export interface EvSize extends BasicEvent {
-	readonly size: Size;
-	readonly mode: SizeMode;
-}
-
-export function EvSize(size: Size, mode: SizeMode = null, context: any = null ): EvSize {
-	return BasicEvent<EvSize>({ size, mode, context });
-}
-
-interface SeparatorEventMap extends CEventMap {
-	resize?: EvSize;
-}
-
-interface SeparatorProps extends CProps<SeparatorEventMap> {
-	readonly orientation: 'vertical' | 'horizontal';		// vertical means vertical sizer so it resize horizontally
-	readonly sizing: 'before' | 'after';
-	readonly collapsible?: boolean;
-}
-
-export class Separator extends Component<SeparatorProps, SeparatorEventMap> {
-
-	m_irect: Rect;
-	m_delta: number;
-	m_target: Component;
-
-	constructor(props: SeparatorProps) {
-		super(props);
-
-		this.setDomEvent('mousedown', (e) => this._mousedown(e));
-		this.setDomEvent('touchstart', (e) => this._mousedown(e));
-		this.setDomEvent('dblclick', (e) => this._collapse(e) );
-	}
-
-	render() {
-		this.addClass(this.m_props.orientation);
-	}
-
-	private _collapse( ev: UIEvent ) {
-		if( this.m_props.collapsible ) {
-			this._findTarget();
-			if( this.m_target ) {
-				this.m_target.toggleClass( '@collapsed' );
-			}
-		}
-	}
-
-	private _mousedown(ev: UIEvent) {
-
-		if (ev.type == 'touchstart') {
-			let te = ev as TouchEvent;
-			if (te.touches.length == 1) {
-				this._startMoving(te.touches[0].pageX, te.touches[0].pageY, ev);
-			}
-		}
-		else {
-			let me = ev as MouseEvent;
-			this._startMoving(me.pageX, me.pageY, ev);
-		}
-	}
-
-	_startMoving(x: number, y: number, ev: UIEvent) {
-		//if( this.m_props.callback ) {
-		//	this.m_props.callback( ev, this );
-		//}
-		//else 
-		{
-			this._findTarget();
-
-			if (this.m_target) {
-
-				if (this.m_props.orientation == 'horizontal') {
-					if (this.m_props.sizing == 'before') {
-						this.m_delta = x - this.m_irect.right;
-					}
-					else {
-						this.m_delta = x - this.m_irect.left;
-					}
-				}
-				else {
-					if (this.m_props.sizing == 'before') {
-						this.m_delta = y - this.m_irect.bottom;
-					}
-					else {
-						this.m_delta = y - this.m_irect.top;
-					}
-				}
-
-				ev.preventDefault();
-				ev.stopPropagation();
-
-				this.m_target.addClass('sizing');
-
-				Component.setCapture(this, (e) => this._pointerMoved(e));
-			}
-		}
-	}
-
-	private _pointerMoved(ev: UIEvent) {
-
-		let __move = (ex: number, ey: number) => {
-
-			if (this.m_props.orientation == 'horizontal') {
-
-				let width;
-				if (this.m_props.sizing == 'after') {
-					width = this.m_irect.right - (ex - this.m_delta);
-				}
-				else {
-					width = (ex - this.m_delta) - this.m_irect.left
-				}
-
-				if (width > 0) {
-					let size = new Size(width, 0);
-					this.emit('resize', EvSize(size));
-
-					this.m_target.setStyleValue('width', size.width);
-					this.m_target.setStyleValue('flex', null);	// for flex>1
-					this.m_target.removeClass('@flex');
-				}
-			}
-			else {
-
-				let height;
-				if (this.m_props.sizing == 'after') {
-					height = this.m_irect.bottom - (ey - this.m_delta);
-				}
-				else {
-					height = (ey - this.m_delta) - this.m_irect.top;
-				}
-
-				if (height > 0) {
-					let size = new Size(0, height);
-					this.emit('resize', EvSize(size));
-
-					this.m_target.setStyleValue('height', size.height);
-					this.m_target.setStyleValue('flex', null);	// for flex>1
-					this.m_target.removeClass('@flex');
-				}
-			}
-		}
-
-		if (ev.type == 'mousemove') {
-
-			let mev = ev as MouseEvent;
-			__move(mev.pageX, mev.pageY);
-
-			ev.preventDefault();
-			ev.stopPropagation();
-		}
-		else if (ev.type == 'touchmove') {
-
-			let tev = ev as TouchEvent;
-			__move(tev.touches[0].pageX, tev.touches[0].pageY);
-
-			ev.preventDefault();
-			ev.stopPropagation();
-		}
-		else if (ev.type == 'mouseup' || ev.type == 'touchend') {
-			this.m_target.removeClass('sizing');
-
-			Component.releaseCapture();
-			ev.preventDefault();
-			ev.stopPropagation();
-		}
-	}
-
-	private _findTarget() {
-
-		if (!this.m_target) {
-
-			if (this.m_props.sizing == 'before') {
-				let prevDom = this.dom.previousElementSibling;
-				let prevEl = prevDom ? Component.getElement(prevDom as HTMLElement) : null;
-				this.m_target = prevEl;
-			}
-			else {
-				let nextDom = this.dom.nextElementSibling;
-				let nextEl = nextDom ? Component.getElement(nextDom as HTMLElement) : null;
-				this.m_target = nextEl;
-			}
-		}
-
-		if (this.m_target) {
-			this.m_irect = this.m_target.getBoundingRect();
-		}
-		else {
-			this.m_irect = null;
-		}
-	}
-}
-
-
-
-
-// :: SIZERBAR ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
-
-/**
- * properties
- */
-
-type SizerOverlaySens = 'left' | 'top' | 'right' | 'bottom' | 'topleft' | 'topright' | 'bottomleft' | 'bottomright';
-
-export interface EvOverlayResize extends BasicEvent {
-	ui_event: UIEvent;
-	sens: SizerOverlaySens;
-}
-
-export function EvOverlayResize(ui_event: UIEvent, sens: SizerOverlaySens, context: any = null) {
-	return BasicEvent<EvOverlayResize>({ ui_event, sens, context });
-}
-
-interface SizerOverlayEventMap extends CEventMap {
-	resize: EvSize;
-	rawresize: EvOverlayResize;
-}
-
-
-export interface SizerOverlayProps extends CProps<SizerOverlayEventMap> {
-	sens: SizerOverlaySens;
-	target: Component;
-
-	resize?: EventCallback<EvSize>;	// shortcut to events: { size: ... }
-}
-
-export class SizerOverlay extends Component<SizerOverlayProps, SizerOverlayEventMap> {
-
-	private m_delta: number;
-	private m_irect: Rect;
-
-	constructor(props: SizerOverlayProps) {
-		super(props);
-
-		this.addClass(props.sens);
-		this.setDomEvent('mousedown', (e) => this._mousedown(e));
-		this.setDomEvent('touchstart', (e) => this._mousedown(e));
-		this.setDomEvent('dblclick', (e) => this.resetflex(e));	// todo: add option for that
-
-		props.target.appendChild(this);
-
-		if( props.resize ) {
-			this.on( 'resize', this.m_props.resize );
-		}
-	}
-
-	resetflex(event: UIEvent) {
-		this.m_props.target.addClass('@flex');
-		this.emit('resize', EvSize( { width: -1, height: 0}));	// todo: see that
-		event.preventDefault();
-		event.stopPropagation();
-	}
-
-	// @review move that in component
-
-	_mousedown(ev: UIEvent) {
-
-		ev.preventDefault();
-		ev.stopPropagation();
-		
-		let eev = EvOverlayResize(ev, this.m_props.sens);
-		this.emit('rawresize', eev);
-		if (eev.defaultPrevented) {
-			return;
-		}
-
-		let pos = getMousePos(ev, true);
-		this.m_irect = this.m_props.target.getBoundingRect();
-
-		if (this.m_props.sens == 'right') {
-			this.m_delta = pos.x - this.m_irect.right;
-		}
-		else if (this.m_props.sens == 'left') {
-			this.m_delta = pos.x - this.m_irect.left;
-		}
-		else if (this.m_props.sens == 'bottom') {
-			this.m_delta = pos.y - this.m_irect.bottom;
-		}
-		else if (this.m_props.sens == 'top') {
-			this.m_delta = pos.y - this.m_irect.top;
-		}
-
-		this.m_props.target.addClass('sizing');
-		Component.setCapture(this, (e) => this._handle_mouse(e));
-	}
-
-	private _is_horz() {
-		return this.m_props.sens == 'left' || this.m_props.sens == 'right';
-	}
-
-	public get sens() {
-		return this.m_props.sens;
-	}
-
-	private _handle_mouse(ev: UIEvent) {
-		let __move = (ex:number, ey:number) => {
-			if (this._is_horz()) {
-
-				let width;
-				if (this.m_props.sens == 'left') {
-					width = this.m_irect.right - (ex - this.m_delta);
-				}
-				else {
-					width = (ex - this.m_delta) - this.m_irect.left
-				}
-
-				if (width > 0) {
-					let size = {
-						width,
-						height: undefined
-					};
-
-					this.emit('resize', EvSize(size));
-
-					this.m_props.target.setStyleValue('width', size.width);
-					this.m_props.target.setStyleValue('flex', null);	// for flex>1
-					this.m_props.target.removeClass('@flex');
-				}
-			}
-			else {
-
-				let height;
-				if (this.m_props.sens == 'top') {
-					height = this.m_irect.bottom - (ey - this.m_delta);
-				}
-				else {
-					height = (ey - this.m_delta) - this.m_irect.top;
-				}
-
-				if (height > 0) {
-					let size = new Size(0, height);
-					this.emit('resize', EvSize(size));
-
-					this.m_props.target.setStyleValue('height', size.height);
-					this.m_props.target.setStyleValue('flex', null);	// for flex>1
-					this.m_props.target.removeClass('@flex');
-				}
-			}
-		}
-
-		if (ev.type == 'mousemove') {
-
-			let mev = ev as MouseEvent;
-			__move(mev.pageX, mev.pageY);
-
-			ev.preventDefault();
-			ev.stopPropagation();
-		}
-		else if (ev.type == 'touchmove') {
-
-			let tev = ev as TouchEvent;
-			__move(tev.touches[0].pageX, tev.touches[0].pageY);
-
-			ev.preventDefault();
-			ev.stopPropagation();
-		}
-		else if (ev.type == 'mouseup' || ev.type == 'touchend') {
-			this.m_props.target.removeClass('sizing');
-
-			Component.releaseCapture();
-			ev.preventDefault();
-			ev.stopPropagation();
-		}
-	}
-}
-
-/**
- * sequence: Shift+Ctrl+Alt+A
- */
-
-export interface Shortcut {
-	sequence: string;
-	name: string;
-	immediate: boolean;
-	callback?: EventHandler<KeyboardEvent>;
-}
-
-interface EvShortcut extends BasicEvent {
-	name: string;
-}
-
-function EvShortcut(name: string) {
-	return BasicEvent<EvShortcut>({ name });
-}
-
-export interface ContainerEventMap extends CEventMap {
-	shortcut: EvShortcut;
-}
-
-export interface ContainerProps<E extends ContainerEventMap = ContainerEventMap> extends CProps<E> {
-}
-
-/**
- * you can construct a Container as usual with it's properties but also directly with it's children array
- * 
- * @example
- * new Container( [
- * 	child1, 
- *  child2
- * ])
- */
-
-export class Container<P extends ContainerProps = ContainerProps, E extends ContainerEventMap = ContainerEventMap> extends Component<P, E> {
-
-	private m_shortcuts: Shortcut[];
-
-	constructor( props: P );
-	constructor( items: ComponentOrString[], cls?: string );
-	constructor( props: P | ComponentOrString[], cls?: string ) {
-		if( isArray(props) ) {
-			super( {content: props,cls} as P );
-		}
-		else {
-			super( props );
-		}
-	}
-	
-	/**
-	 * add an application shortcut
-	 * @param sequence key sequence Shift+Ctrl+Alt+K
-	 * @param callback callback to call
-	 */
-
-	public addShortcut(sequence: string | string[], name: string, callback: EventHandler<KeyboardEvent> = null, immediate = false) {
-
-		// first time
-		if (!this.m_shortcuts) {
-			this.m_shortcuts = [];
-			this.setDomEvent('keydown', (e) => this._handleKeydown(e));
-		}
-
-		if (!isArray(sequence)) {
-			sequence = [sequence];
-		}
-
-		sequence.forEach((seq: string) => {
-			let reseq = '';
-
-			let shift = seq.match(/SHIFT/i);
-			if (shift) {
-				seq = seq.replace(/SHIFT/i, '');
-				reseq += 'shift+';
-			}
-
-			let ctrl = seq.match(/CTRL/i);
-			if (ctrl) {
-				seq = seq.replace(/CTRL/i, '');
-				reseq += 'ctrl+';
-			}
-
-			let cmd = seq.match(/CMD/i);
-			if (cmd) {
-				seq = seq.replace(/CMD/i, '');
-				reseq += 'cmd+';
-			}
-
-			let alt = seq.match(/ALT/i);
-			if (alt) {
-				seq = seq.replace(/ALT/i, '');
-				reseq += 'alt+';
-			}
-
-			reseq += seq.replace('+', '').toLowerCase();
-
-			this.m_shortcuts.push({
-				sequence: reseq,
-				name,
-				immediate,
-				callback
-			});
-		});
-	}
-
-	/**
-	 * remove all shortcuts for a target
-	 */
-
-	removeShortcuts() {
-		if (this.m_shortcuts) {
-			this.m_shortcuts = [];
-		}
-	}
-
-	/** @ignore this function is binded */
-	private _handleKeydown(e: KeyboardEvent) {
-
-		if (!this.m_shortcuts) {
-			return;
-		}
-
-		let seq = '';
-
-		if (e.shiftKey) {
-			seq += 'shift+';
-		}
-
-		if (e.ctrlKey) {
-			seq += 'ctrl+';
-		}
-
-		if (e.metaKey) {
-			seq += 'cmd+';
-		}
-
-		if (e.altKey) {
-			seq += 'alt+';
-		}
-
-		seq += e.key.toLowerCase();
-		//console.log( seq );
-
-		this.m_shortcuts.some((sk) => {
-			if (sk.sequence == seq) {
-
-				if (sk.callback) {
-					if (sk.immediate) {
-						sk.callback(e);
-					}
-					else {
-						asap(() => { sk.callback(e); });
-					}
-				}
-				else {
-					this.emit('shortcut', EvShortcut(sk.name));
-				}
-
-				e.preventDefault();
-				e.stopPropagation();
-				return true;
-			}
-		});
-	}
-}
-
-export type ComponentConstructor<T> = new (props: CProps) => T;