x4js 1.6.4 → 2.0.1

package/lib/types/x4.d.ts

@@ -0,0 +1,2624 @@
+declare module 'src/core/core_i18n' {
+	/**
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|
+ *  /__/\__\   |_|
+ *
+ * @file core_i18n.ts
+ * @author Etienne Cochard
+ *
+ * @copyright (c) 2024 R-libre ingenierie
+ *
+ * Use of this source code is governed by an MIT-style license
+ * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
+ **/
+/**
+ * create a new language
+ * @param name language name (code)
+ * @param base base language (code)
+ * @example:
+ * ```js
+ * createLanguage( 'en', 'fr' );
+ * ```
+ */
+export function createLanguage(name: string, base: string): void;
+/**
+ * check if the given language is known
+ * @param name language name (code)
+ */
+export function isLanguage(name: string): boolean;
+/**
+ * build the language with given fragments
+ * @param name language name (code)
+ * @param parts misc elements that make the language
+ * @example:
+ * ```js
+ * createLanguage( 'en', 'fr' );
+ * const app = {
+ * 	clients: {
+ * 		translation1: "hello",
+ *  }
+ * }
+ * addTranslation( 'en', app );
+ * ```
+  */
+export function addTranslation(name: string, ...parts: any[]): void;
+export let _tr: Partial<typeof fr>;
+/**
+ * select the given language as current
+ * @param name laguage name (code)
+ */
+export function selectLanguage(name: string): Partial<{
+    global: {
+        ok: string;
+        cancel: string;
+        ignore: string;
+        yes: string;
+        no: string;
+        abort: string;
+        retry: string;
+        error: string;
+        today: string;
+        open: string;
+        new: string;
+        delete: string;
+        close: string;
+        save: string;
+        search: string;
+        search_tip: string;
+        required_field: string;
+        invalid_format: string;
+        invalid_email: string;
+        invalid_number: string;
+        diff_date_seconds: string;
+        diff_date_minutes: string;
+        diff_date_hours: string;
+        invalid_date: string;
+        empty_list: string;
+        date_input_formats: string;
+        date_format: string;
+        day_short: string[];
+        day_long: string[];
+        month_short: string[];
+        month_long: string[];
+        property: string;
+        value: string;
+        err_403: string;
+        copy: string;
+        cut: string;
+        paste: string;
+    };
+}>;
+/**
+ *
+ */
+export function getCurrentLanguage(): string;
+/**
+ *
+ */
+export function getAvailableLanguages(): string[]; let fr: {
+    global: {
+        ok: string;
+        cancel: string;
+        ignore: string;
+        yes: string;
+        no: string;
+        abort: string;
+        retry: string;
+        error: string;
+        today: string;
+        open: string;
+        new: string;
+        delete: string;
+        close: string;
+        save: string;
+        search: string;
+        search_tip: string;
+        required_field: string;
+        invalid_format: string;
+        invalid_email: string;
+        invalid_number: string;
+        diff_date_seconds: string;
+        diff_date_minutes: string;
+        diff_date_hours: string;
+        invalid_date: string;
+        empty_list: string;
+        date_input_formats: string;
+        date_format: string;
+        day_short: string[];
+        day_long: string[];
+        month_short: string[];
+        month_long: string[];
+        property: string;
+        value: string;
+        err_403: string;
+        copy: string;
+        cut: string;
+        paste: string;
+    };
+};
+export {};
+
+}
+declare module 'src/core/core_tools' {
+	/**
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|
+ *  /__/\__\   |_|
+ *
+ * @file core_tools.ts
+ * @author Etienne Cochard
+ *
+ * @copyright (c) 2024 R-libre ingenierie
+ *
+ * Use of this source code is governed by an MIT-style license
+ * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
+ **/
+/**
+ * @returns true if object is a string
+ */
+export function isString(val: any): val is string;
+/**
+ * @returns true if object is a number
+ */
+export function isNumber(v: any): v is number;
+/**
+ * @returns true if object is an array
+ */
+export function isArray(val: any): val is any[];
+/**
+ * @returns true if object is a function
+ */
+export function isFunction(val: any): val is Function;
+/**
+ * generic constructor
+ */
+export type Constructor<P> = {
+    new (...params: any[]): P;
+};
+/**
+ * a way to explain that the given string may be unsafe but must be treated a sstring
+ * @example
+ * label.setText( unsafehtml`<b>Bold</b> text` );
+ * label.setText( new UnsafeHtml("<b>Bold</b> text`" ) );
+ */
+export class UnsafeHtml extends String {
+    constructor(value: string);
+}
+export function unsafeHtml(x: string): UnsafeHtml;
+/**
+ *
+ */
+export function clamp<T>(v: T, min: T, max: T): T;
+/**
+ * generic Rectangle
+ */
+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);
+    get right(): number;
+    get bottom(): number;
+}
+/**
+ * generic Point
+ */
+export interface Point {
+    x: number;
+    y: number;
+}
+/**
+ *
+ */
+export interface IComponentInterface {
+}
+export interface IFormElement extends IComponentInterface {
+    getRawValue(): any;
+    setRawValue(v: any): void;
+}
+/**
+ *
+ */
+interface Features {
+    eyedropper: 1;
+}
+export function isFeatureAvailable(name: keyof Features): boolean;
+export class Timer {
+    protected _timers: Map<string, any>;
+    /**
+     *
+     */
+    setTimeout(name: string, time: number, callback: Function): number;
+    clearTimeout(name: string): void;
+    /**
+     *
+     */
+    setInterval(name: string, time: number, callback: Function): number;
+    clearInterval(name: string): void;
+    clearAllTimeouts(): void;
+}
+/**
+ *
+ */
+export function asap(callback: () => void): number;
+/**
+ * prepend 0 to a value to a given length
+ * @param value
+ * @param length
+ */
+export function pad(what: any, size: number, ch?: string): string;
+/**
+ * replace {0..9} by given arguments
+ * @param format string
+ * @param args
+ *
+ * @example ```ts
+ *
+ * console.log( sprintf( 'here is arg 1 {1} and arg 0 {0}', 'argument 0', 'argument 1' ) )
+ */
+export function sprintf(format: string, ...args: any[]): string;
+/**
+ * inverse of camel case
+ * theThingToCase -> the-thing-to-case
+ * @param {String} str
+ */
+export function pascalCase(string: string): string;
+export function camelCase(text: string): string;
+/**
+ * change the current locale for misc translations (date...)
+ * @param locale
+ */
+export function _date_set_locale(locale: string): void;
+/**
+ *
+ * @param date
+ * @param options
+ * @example
+ * let date = new Date( );
+ * let options = { day: 'numeric', month: 'numeric', year: 'numeric', hour: 'numeric', minute: 'numeric' };
+ * let text = date_format( date, options );
+ */
+export function date_format(date: Date, options?: any): string;
+/**
+ *
+ * @param date
+ * @param options
+ */
+export function date_diff(date1: Date, date2: Date, options?: any): string;
+export function date_to_sql(date: Date, withHours: boolean): string;
+/**
+ * construct a date from an utc date time (sql format)
+ * YYYY-MM-DD HH:MM:SS
+ */
+export function date_sql_utc(date: string): Date;
+/**
+ * return a number that is a representation of the date
+ * this number can be compared with another hash
+ */
+export function date_hash(date: Date): number;
+/**
+ * return a copy of a date
+ */
+export function date_clone(date: Date): Date;
+/**
+ * return the week number of a date
+ */
+export function date_calc_weeknum(date: Date): number;
+/**
+ * parse a date according to the given format
+ * @param value - string date to parse
+ * @param fmts - format list - i18 tranlation by default
+ * allowed format specifiers:
+ * d or D: date (1 or 2 digits)
+ * m or M: month (1 or 2 digits)
+ * y or Y: year (2 or 4 digits)
+ * h or H: hours (1 or 2 digits)
+ * i or I: minutes (1 or 2 digits)
+ * s or S: seconds (1 or 2 digits)
+ * <space>: 1 or more spaces
+ * any other char: <0 or more spaces><the char><0 or more spaces>
+ * each specifiers is separated from other by a pipe (|)
+ * more specific at first
+ * @example
+ * 'd/m/y|d m Y|dmy|y-m-d h:i:s|y-m-d'
+ */
+export function parseIntlDate(value: string, fmts?: string): Date;
+/**
+ * format a date as string
+ * @param date - date to format
+ * @param fmt - format
+ * format specifiers:
+ * d: date (no pad)
+ * D: 2 digits date padded with 0
+ * j: day of week short mode 'mon'
+ * J: day of week long mode 'monday'
+ * w: week number
+ * m: month (no pad)
+ * M: 2 digits month padded with 0
+ * o: month short mode 'jan'
+ * O: month long mode 'january'
+ * y or Y: year
+ * h: hour (24 format)
+ * H: 2 digits hour (24 format) padded with 0
+ * i: minutes
+ * I: 2 digits minutes padded with 0
+ * s: seconds
+ * S: 2 digits seconds padded with 0
+ * a: am or pm
+ * anything else is inserted
+ * if you need to insert some text, put it between {}
+ *
+ * @example
+ *
+ * 01/01/1970 11:25:00 with '{this is my demo date formatter: }H-i*M'
+ * "this is my demo date formatter: 11-25*january"
+ */
+export function formatIntlDate(date: Date, fmt?: string): string;
+export function calcAge(birth: Date, ref?: Date): number;
+export {};
+
+}
+declare module 'src/core/core_events' {
+	/**
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|
+ *  /__/\__\   |_|
+ *
+ * @file core_events.ts
+ * @author Etienne Cochard
+ *
+ * @copyright (c) 2024 R-libre ingenierie
+ *
+ * Use of this source code is governed by an MIT-style license
+ * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
+ **/
+import { CoreElement } from 'src/core/core_element';
+/**
+ *
+ */
+export interface CoreEvent {
+    readonly type?: string;
+    readonly source?: CoreElement;
+    readonly context?: any;
+    propagationStopped?: boolean;
+    defaultPrevented?: boolean;
+    stopPropagation?(): void;
+    preventDefault?(): void;
+}
+/**
+ *
+ */
+export interface EventMap {
+}
+/**
+ *
+ */
+export type EventCallback<T extends CoreEvent = CoreEvent> = (event: T) => any;
+/**
+ *
+ */
+export class EventSource<E extends EventMap = EventMap> {
+    private _source;
+    private _registry;
+    constructor(source?: unknown);
+    addListener<K extends keyof E>(name: K, callback: (ev: E[K]) => void, capturing?: boolean): void;
+    fire<K extends keyof E>(name: K, evx: E[K]): void;
+}
+
+}
+declare module 'src/core/core_element' {
+	/**
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|
+ *  /__/\__\   |_|
+ *
+ * @file core_element.ts
+ * @author Etienne Cochard
+ *
+ * @copyright (c) 2024 R-libre ingenierie
+ *
+ * Use of this source code is governed by an MIT-style license
+ * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
+ **/
+import { EventMap } from 'src/core/core_events.js';
+/**
+ *
+ */
+export class CoreElement<E extends EventMap = EventMap> {
+    #private;
+    private __startTimer;
+    private __stopTimer;
+    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;
+    /**
+     * attach to an event
+     */
+    on<K extends keyof E>(name: K, listener: (ev: E[K]) => void): void;
+    /**
+     *
+     */
+    fire<K extends keyof E>(name: K, ev: E[K]): void;
+}
+
+}
+declare module 'src/core/core_styles' {
+	/**
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|
+ *  /__/\__\   |_|
+ *
+ * @file core_styles.ts
+ * @author Etienne Cochard
+ *
+ * @copyright (c) 2024 R-libre ingenierie
+ *
+ * Use of this source code is governed by an MIT-style license
+ * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
+ **/
+export const unitless: Record<string, 1>;
+export type ariaValues = {
+    "aria-activedescendant": 1;
+    "role": 1;
+};
+export function isUnitLess(name: string): boolean;
+/**
+ *
+ */
+export class Stylesheet {
+    private m_sheet;
+    private m_rules;
+    constructor();
+    /**
+     * add a new rule to the style sheet
+     * @param {string} name - internal rule name
+     * @param {string} definition - css definition of the rule
+     * @example
+     * setRule('xbody', "body { background-color: #ff0000; }" );
+     */
+    setRule(name: string, definition: any): void;
+    /**
+     * return the style variable value
+     * @param name - variable name
+     * @example
+     * ```
+     * let color = Component.getCss( ).getVar( 'button-color' );
+     * ```
+     */
+    static getVar(name: string): any;
+    static guid: number;
+    static doc_style: CSSStyleDeclaration;
+}
+/**
+ *
+ */
+export class ComputedStyle {
+    m_style: CSSStyleDeclaration;
+    constructor(style: CSSStyleDeclaration);
+    /**
+     * return the raw value
+     */
+    value(name: keyof CSSStyleDeclaration): any;
+    /**
+     * return the interpreted value
+     */
+    parse(name: keyof CSSStyleDeclaration): number;
+    /**
+     *
+     */
+    get style(): CSSStyleDeclaration;
+}
+
+}
+declare module 'src/core/core_dom' {
+	/**
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|
+ *  /__/\__\   |_|
+ *
+ * @file core_dom.ts
+ * @author Etienne Cochard
+ *
+ * @copyright (c) 2024 R-libre ingenierie
+ *
+ * Use of this source code is governed by an MIT-style license
+ * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
+ **/
+/** @ignore this events must be defined on domNode (do not bubble) */
+export const unbubbleEvents: {
+    mouseleave: number;
+    mouseenter: number;
+    load: number;
+    unload: number;
+    scroll: number;
+    focus: number;
+    blur: number;
+    rowexit: number;
+    beforeunload: number;
+    stop: number;
+    dragdrop: number;
+    dragenter: number;
+    dragexit: number;
+    draggesture: number;
+    dragover: number;
+    contextmenu: number;
+    created: number;
+    removed: number;
+    sizechange: number;
+};
+export type DOMEventHandler = (ev: Event) => void;
+/**
+ *
+ */
+export function dispatchEvent(ev: Event): void;
+/**
+ *
+ */
+export function addEvent(node: Node, name: string, handler: DOMEventHandler, prepend?: boolean): void;
+/**
+ *
+ */
+export interface GlobalDOMEvents {
+    /**
+     * Fires when the user aborts the download.
+     * @param ev The event.
+     */
+    abort?: (ev: UIEvent) => any;
+    animationcancel?: (ev: AnimationEvent) => any;
+    animationend?: (ev: AnimationEvent) => any;
+    animationiteration?: (ev: AnimationEvent) => any;
+    animationstart?: (ev: AnimationEvent) => any;
+    auxclick?: (ev: MouseEvent) => any;
+    /**
+     * Fires when the object loses the input focus.
+     * @param ev The focus event.
+     */
+    blur?: (ev: FocusEvent) => any;
+    cancel?: (ev: Event) => any;
+    /**
+     * Occurs when playback is possible, but would require further buffering.
+     * @param ev The event.
+     */
+    canplay?: (ev: Event) => any;
+    canplaythrough?: (ev: Event) => any;
+    /**
+     * Fires when the contents of the object or selection have changed.
+     * @param ev The event.
+     */
+    change?: (ev: Event) => any;
+    /**
+     * Fires when the user clicks the left mouse button on the object
+     * @param ev The mouse event.
+     */
+    click?: (ev: MouseEvent) => any;
+    close?: (ev: Event) => any;
+    /**
+     * Fires when the user clicks the right mouse button in the client area, opening the context menu.
+     * @param ev The mouse event.
+     */
+    contextmenu?: (ev: MouseEvent) => any;
+    cuechange?: (ev: Event) => any;
+    /**
+     * Fires when the user double-clicks the object.
+     * @param ev The mouse event.
+     */
+    dblclick?: (ev: MouseEvent) => any;
+    /**
+     * Fires on the source object continuously during a drag operation.
+     * @param ev The event.
+     */
+    drag?: (ev: DragEvent) => any;
+    /**
+     * Fires on the source object when the user releases the mouse at the close of a drag operation.
+     * @param ev The event.
+     */
+    dragend?: (ev: DragEvent) => any;
+    /**
+     * Fires on the target element when the user drags the object to a valid drop target.
+     * @param ev The drag event.
+     */
+    dragenter?: (ev: DragEvent) => any;
+    dragexit?: (ev: Event) => any;
+    /**
+     * Fires on the target object when the user moves the mouse out of a valid drop target during a drag operation.
+     * @param ev The drag event.
+     */
+    dragleave?: (ev: DragEvent) => any;
+    /**
+     * Fires on the target element continuously while the user drags the object over a valid drop target.
+     * @param ev The event.
+     */
+    dragover?: (ev: DragEvent) => any;
+    /**
+     * Fires on the source object when the user starts to drag a text selection or selected object.
+     * @param ev The event.
+     */
+    dragstart?: (ev: DragEvent) => any;
+    drop?: (ev: DragEvent) => any;
+    /**
+     * Occurs when the duration attribute is updated.
+     * @param ev The event.
+     */
+    durationchange?: (ev: Event) => any;
+    /**
+     * Occurs when the media element is reset to its initial state.
+     * @param ev The event.
+     */
+    emptied?: (ev: Event) => any;
+    /**
+     * Occurs when the end of playback is reached.
+     * @param ev The event
+     */
+    ended?: (ev: Event) => any;
+    /**
+     * Fires when an error occurs during object loading.
+     * @param ev The event.
+     */
+    error?: OnErrorEventHandler;
+    /**
+     * Fires when the object receives focus.
+     * @param ev The event.
+     */
+    focusin?: (ev: FocusEvent) => any;
+    focusout?: (ev: FocusEvent) => any;
+    focus?: (ev: FocusEvent) => any;
+    gotpointercapture?: (ev: PointerEvent) => any;
+    input?: (ev: Event) => any;
+    invalid?: (ev: Event) => any;
+    /**
+     * Fires when the user presses a key.
+     * @param ev The keyboard event
+     */
+    keydown?: (ev: KeyboardEvent) => any;
+    /**
+     * Fires when the user presses an alphanumeric key.
+     * @param ev The event.
+     */
+    keypress?: (ev: KeyboardEvent) => any;
+    /**
+     * Fires when the user releases a key.
+     * @param ev The keyboard event
+     */
+    keyup?: (ev: KeyboardEvent) => any;
+    /**
+     * Fires immediately after the browser loads the object.
+     * @param ev The event.
+     */
+    load?: (ev: Event) => any;
+    /**
+     * Occurs when media data is loaded at the current playback position.
+     * @param ev The event.
+     */
+    loadeddata?: (ev: Event) => any;
+    /**
+     * Occurs when the duration and dimensions of the media have been determined.
+     * @param ev The event.
+     */
+    loadedmetadata?: (ev: Event) => any;
+    /**
+     * Occurs when Internet Explorer begins looking for media data.
+     * @param ev The event.
+     */
+    loadstart?: (ev: Event) => any;
+    lostpointercapture?: (ev: PointerEvent) => any;
+    /**
+     * Fires when the user clicks the object with either mouse button.
+     * @param ev The mouse event.
+     */
+    mousedown?: (ev: MouseEvent) => any;
+    mouseenter?: (ev: MouseEvent) => any;
+    mouseleave?: (ev: MouseEvent) => any;
+    /**
+     * Fires when the user moves the mouse over the object.
+     * @param ev The mouse event.
+     */
+    mousemove?: (ev: MouseEvent) => any;
+    /**
+     * Fires when the user moves the mouse pointer outside the boundaries of the object.
+     * @param ev The mouse event.
+     */
+    mouseout?: (ev: MouseEvent) => any;
+    /**
+     * Fires when the user moves the mouse pointer into the object.
+     * @param ev The mouse event.
+     */
+    mouseover?: (ev: MouseEvent) => any;
+    /**
+     * Fires when the user releases a mouse button while the mouse is over the object.
+     * @param ev The mouse event.
+     */
+    mouseup?: (ev: MouseEvent) => any;
+    /**
+     * Occurs when playback is paused.
+     * @param ev The event.
+     */
+    pause?: (ev: Event) => any;
+    /**
+     * Occurs when the play method is requested.
+     * @param ev The event.
+     */
+    play?: (ev: Event) => any;
+    /**
+     * Occurs when the audio or video has started playing.
+     * @param ev The event.
+     */
+    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;
+    /**
+     * Occurs to indicate progress while downloading media data.
+     * @param ev The event.
+     */
+    progress?: (ev: ProgressEvent) => any;
+    /**
+     * Occurs when the playback rate is increased or decreased.
+     * @param ev The event.
+     */
+    ratechange?: (ev: Event) => any;
+    /**
+     * Fires when the user resets a form.
+     * @param ev The event.
+     */
+    reset?: (ev: Event) => any;
+    /**
+     * Fires when the user repositions the scroll box in the scroll bar on the object.
+     * @param ev The event.
+     */
+    scroll?: (ev: Event) => any;
+    securitypolicyviolation?: (ev: SecurityPolicyViolationEvent) => any;
+    /**
+     * Occurs when the seek operation ends.
+     * @param ev The event.
+     */
+    seeked?: (ev: Event) => any;
+    /**
+     * Occurs when the current playback position is moved.
+     * @param ev The event.
+     */
+    seeking?: (ev: Event) => any;
+    /**
+     * Fires when the current selection changes.
+     * @param ev The event.
+     */
+    select?: (ev: Event) => any;
+    selectionchange?: (ev: Event) => any;
+    selectstart?: (ev: Event) => any;
+    /**
+     * Occurs when the download has stopped.
+     * @param ev The event.
+     */
+    stalled?: (ev: Event) => any;
+    submit?: (ev: Event) => any;
+    /**
+     * Occurs if the load operation has been intentionally halted.
+     * @param ev The event.
+     */
+    suspend?: (ev: Event) => any;
+    /**
+     * Occurs to indicate the current playback position.
+     * @param ev The event.
+     */
+    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;
+    /**
+     * Occurs when the volume is changed, or playback is muted or unmuted.
+     * @param ev The event.
+     */
+    volumechange?: (ev: Event) => any;
+    /**
+     * Occurs when playback stops because the next frame of a video resource is not available.
+     * @param ev The event.
+     */
+    waiting?: (ev: Event) => any;
+    wheel?: (ev: WheelEvent) => any;
+    /**
+     * custom x4 events
+     */
+    resized?: (ev: Event) => void;
+    created?: (ev: Event) => void;
+    removed?: (ev: Event) => void;
+}
+
+}
+declare module 'src/components/icon/icon' {
+	/**
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|
+ *  /__/\__\   |_|
+ *
+ * @file icon.ts
+ * @author Etienne Cochard
+ *
+ * @copyright (c) 2024 R-libre ingenierie
+ *
+ * Use of this source code is governed by an MIT-style license
+ * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
+ **/
+import { Component, ComponentProps } from '@core/component';
+import 'src/components/icon/icon.module.scss'; class SvgLoader {
+    private cache;
+    private waiters;
+    constructor();
+    load(file: string): Promise<string>;
+    private _load;
+}
+export const svgLoader: SvgLoader;
+/**
+ *
+ */
+export interface IconProps extends ComponentProps {
+    iconId?: string;
+}
+/**
+ *
+ */
+export class Icon extends Component<IconProps> {
+    constructor(props: IconProps);
+    /**
+     * change the icon content
+     * @param iconId if name is starting with var: then we use css variable name a path
+     * @example
+     *
+     * setIcon( "var:home" )
+     *
+     * import myicon from "./myicon.svg"
+     * setIcon( myicon );
+     *
+     */
+    setIcon(iconId: string): void;
+}
+export {};
+
+}
+declare module 'src/components/button/button' {
+	/**
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|
+ *  /__/\__\   |_|
+ *
+ * @file button.ts
+ * @author Etienne Cochard
+ *
+ * @copyright (c) 2024 R-libre ingenierie
+ *
+ * Use of this source code is governed by an MIT-style license
+ * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
+ **/
+import { Component, ComponentEvents, ComponentProps, EvClick } from '@core/component';
+import { EventCallback } from '@core/core_events.js';
+import { UnsafeHtml } from '@core/core_tools.js';
+import 'src/components/button/button.module.scss';
+/**
+ * Button events
+ */
+interface ButtonEvents extends ComponentEvents {
+    click: EvClick;
+}
+/**
+ * Button properties.
+ */
+export interface ButtonProps extends ComponentProps {
+    label?: string;
+    icon?: string;
+    click?: EventCallback<EvClick>;
+}
+/**
+ * Button component.
+ */
+export class Button extends Component<ButtonProps, ButtonEvents> {
+    /**
+     * Creates an instance of Button.
+     *
+     * @param props - The properties for the button component, including label and icon.
+     * @example
+     * const button = new Button({ label: 'Submit', icon: 'check-icon' });
+     */
+    constructor(props: ButtonProps);
+    /**
+     * called by the system on click event
+     */
+    protected _on_click(ev: MouseEvent): void;
+    /**
+     * Sets the text content of the button's label.
+     *
+     * @param text - The new text or HTML content for the label.
+     * @example
+     * button.setText('Click Me');
+     * button.setText(new UnsafeHtml('<b>Bold Text</b>'));
+     */
+    setText(text: string | UnsafeHtml): void;
+    /**
+     * Sets the icon of the button.
+     *
+     * @param icon - The new icon ID to set on the button.
+     * @example
+     * button.setIcon('new-icon-id');
+     */
+    setIcon(icon: string): void;
+}
+export {};
+
+}
+declare module 'src/components/label/label' {
+	/**
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|
+ *  /__/\__\   |_|
+ *
+ * @file label.ts
+ * @author Etienne Cochard
+ *
+ * @copyright (c) 2024 R-libre ingenierie
+ *
+ * Use of this source code is governed by an MIT-style license
+ * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
+ **/
+import { Component, ComponentProps } from '@core/component';
+import 'src/components/label/label.module.scss';
+import { UnsafeHtml } from '@core/core_tools.js';
+interface LabelProps extends ComponentProps {
+    text?: string | UnsafeHtml;
+    icon?: string;
+    labelFor?: string;
+}
+export class Label extends Component<LabelProps> {
+    constructor(p: LabelProps);
+    setText(text: string | UnsafeHtml): void;
+    setIcon(icon: string): void;
+}
+export {};
+
+}
+declare module 'src/components/input/input' {
+	/**
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|
+ *  /__/\__\   |_|
+ *
+ * @file input.ts
+ * @author Etienne Cochard
+ *
+ * @copyright (c) 2024 R-libre ingenierie
+ *
+ * Use of this source code is governed by an MIT-style license
+ * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
+ **/
+import { Component, ComponentProps } from '@core/component';
+import { IComponentInterface } from '@core/core_tools.js';
+import 'src/components/input/input.module.scss';
+export interface BaseProps extends ComponentProps {
+    name?: string;
+}
+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;
+}
+interface DateProps extends BaseProps {
+    type: "date";
+    readonly?: boolean;
+    required?: boolean;
+    value: Date | string;
+}
+interface NumberProps extends BaseProps {
+    type: "number";
+    readonly?: boolean;
+    required?: boolean;
+    value: number | string;
+    min?: number;
+    max?: number;
+    step?: number;
+}
+interface FileProps extends BaseProps {
+    type: "file";
+    accept: string | string[];
+}
+export interface TextInputProps extends BaseProps {
+    type: "text" | "email" | "password";
+    readonly?: boolean;
+    required?: boolean;
+    pattern?: string;
+    value: string | number;
+    placeholder?: string;
+    spellcheck?: boolean;
+}
+export type InputProps = CheckboxProps | RadioProps | TextInputProps | RangeProps | DateProps | NumberProps | FileProps;
+/**
+ *
+ */
+export class Input extends Component<InputProps> {
+    constructor(props: InputProps);
+    /**
+     * @returns
+     */
+    getValue(): string;
+    /**
+     *
+     * @param value
+     */
+    setValue(value: string): void;
+    /**
+     *
+     * @returns
+     */
+    getNumValue(): number;
+    /**
+     *
+     * @param value
+     */
+    setNumValue(value: number): void;
+    /**
+     *
+     */
+    setReadOnly(ro: boolean): void;
+    /**
+     * select all the text
+     */
+    selectAll(): void;
+    /**
+     * select a part of the text
+     * @param start
+     * @param length
+     */
+    select(start: number, length?: number): void;
+    /**
+     * get the selection as { start, length }
+     */
+    getSelection(): {
+        start: number;
+        length: number;
+    };
+    /**
+     *
+     */
+    queryInterface<T extends IComponentInterface>(name: string): T;
+}
+export {};
+
+}
+declare module 'src/components/checkbox/checkbox' {
+	import { Component, ComponentEvents, ComponentProps, EvChange } from '@core/component.js';
+import { EventCallback } from '@core/core_events.js';
+import { Input } from 'src/components/input/input';
+import 'src/components/checkbox/checkbox.module.scss';
+/**
+ * Checkbox events
+ */
+interface CheckBoxEvents extends ComponentEvents {
+    change?: EvChange;
+}
+/**
+ * Checkbox properties.
+ */
+interface CheckboxProps extends ComponentProps {
+    label: string;
+    checked?: boolean;
+    value?: string;
+    change?: EventCallback<EvChange>;
+}
+/**
+ * Checkbox component that can be checked or unchecked.
+ */
+export class Checkbox extends Component<CheckboxProps, CheckBoxEvents> {
+    readonly _input: Input;
+    /**
+     * Creates an instance of the Checkbox component.
+     *
+     * @param {CheckboxProps} props - The properties for the checkbox component, including label, checked state, and value.
+     * @example
+     * const checkbox = new Checkbox({ label: 'Accept Terms', checked: true });
+     */
+    constructor(props: CheckboxProps);
+    /**
+     * check state changed
+     */
+    private _on_change;
+    /**
+     * @return the checked value
+     */
+    getCheck(): boolean;
+    /**
+     * change the checked value
+     * @param {boolean} ck new checked value
+     */
+    setCheck(ck: boolean): void;
+    /**
+     * change the checkbox label
+     * @param text
+     */
+    setLabel(text: string): void;
+    /**
+     * toggle the checkbox
+     */
+    toggle(): void;
+}
+export {};
+
+}
+declare module 'src/components/boxes/boxes' {
+	/**
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|
+ *  /__/\__\   |_|
+ *
+ * @file boxes.ts
+ * @author Etienne Cochard
+ *
+ * @copyright (c) 2024 R-libre ingenierie
+ *
+ * Use of this source code is governed by an MIT-style license
+ * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
+ **/
+import { Component, ComponentEvents, ComponentProps } from '@core/component';
+import 'src/components/boxes/boxes.module.scss';
+export interface BoxProps extends ComponentProps {
+}
+/**
+ *
+ */
+export class Box<P extends BoxProps = BoxProps, E extends ComponentEvents = ComponentEvents> extends Component<P, E> {
+}
+/**
+ *
+ */
+export class HBox<P extends BoxProps = BoxProps, E extends ComponentEvents = ComponentEvents> extends Box<P, E> {
+}
+/**
+ *
+ */
+export class VBox<P extends BoxProps = BoxProps, E extends ComponentEvents = ComponentEvents> extends Box<P, E> {
+    constructor(p: P);
+}
+/**
+ * stack of widgets where only one widget is visible at a time
+ */
+interface StackItem {
+    name: string;
+    content: Component;
+}
+interface StackedLayoutProps extends Omit<ComponentProps, "content"> {
+    default: string;
+    items: StackItem[];
+}
+export class StackBox extends Box<StackedLayoutProps> {
+    private _items;
+    constructor(props: StackedLayoutProps);
+    select(name: string): void;
+    /**
+     *
+     */
+    private _createPage;
+}
+export {};
+
+}
+declare module 'src/components/viewport/viewport' {
+	/**
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|
+ *  /__/\__\   |_|
+ *
+ * @file viewport.ts
+ * @author Etienne Cochard
+ *
+ * @copyright (c) 2024 R-libre ingenierie
+ *
+ * Use of this source code is governed by an MIT-style license
+ * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
+ **/
+import { Component, ComponentProps } from '@core/component';
+import 'src/components/viewport/viewport.module.scss';
+export class Viewport extends Component {
+    constructor(props: ComponentProps);
+}
+export class ScrollView extends Component {
+    constructor(props: ComponentProps);
+    getViewport(): Viewport;
+}
+
+}
+declare module 'src/components/listbox/listbox' {
+	/**
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|
+ *  /__/\__\   |_|
+ *
+ * @file listbox.ts
+ * @author Etienne Cochard
+ *
+ * @copyright (c) 2024 R-libre ingenierie
+ *
+ * Use of this source code is governed by an MIT-style license
+ * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
+ **/
+import { Component, ComponentEvents, ComponentProps, EvClick, EvContextMenu, EvDblClick, EvSelectionChange } from '@core/component';
+import 'src/components/listbox/listbox.module.scss';
+export enum kbNav {
+    first = 0,
+    prev = 1,
+    next = 2,
+    last = 3
+}
+export type ListboxID = number | string;
+export interface ListItem {
+    id: ListboxID;
+    text: string;
+    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;
+    checkable?: true;
+}
+export class Listbox extends Component<ListboxProps, ListboxEvents> {
+    private _view;
+    private _selection;
+    private _selitem;
+    private _items;
+    preventFocus: boolean;
+    constructor(props: ListboxProps);
+    /**
+     *
+     */
+    private _on_key;
+    /**
+     *
+     */
+    navigate(sens: kbNav): boolean;
+    /**
+     *
+     */
+    private _on_click;
+    /**
+     *
+     */
+    private _on_ctx_menu;
+    /**
+     *
+     */
+    private _selectItem;
+    /**
+     *
+     */
+    private _findItem;
+    /**
+     *
+     */
+    private _findItemIndex;
+    /**
+     *
+     */
+    clearSelection(): void;
+    /**
+     *
+     */
+    setItems(items: ListItem[]): void;
+    /**
+     *
+     */
+    renderItem(item: ListItem): Component<ComponentProps, ComponentEvents>;
+    /**
+     *
+     */
+    defaultRenderer(item: ListItem): Component;
+    /**
+     *
+     */
+    filter(filter: string): void;
+    /**
+     * append or prepend a new item
+     * @param item
+     * @param prepend
+     * @param select
+     */
+    appendItem(item: ListItem, prepend?: boolean, select?: boolean): void;
+    /**
+     * update an item
+     */
+    updateItem(id: any, item: ListItem): void;
+}
+export {};
+
+}
+declare module 'src/components/panel/panel' {
+	/**
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|
+ *  /__/\__\   |_|
+ *
+ * @file panel.ts
+ * @author Etienne Cochard
+ *
+ * @copyright (c) 2024 R-libre ingenierie
+ *
+ * Use of this source code is governed by an MIT-style license
+ * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
+ **/
+import { Component, ComponentContent, ComponentProps } from '@core/component';
+import { UnsafeHtml, Constructor } from '@core/core_tools';
+import { VBox } from 'src/components/boxes/boxes';
+import 'src/components/panel/panel.module.scss';
+interface PanelProps extends ComponentProps {
+    title: string;
+    icon?: string;
+    bodyModel?: Constructor<Component>;
+}
+/**
+ *
+ */
+export class Panel extends VBox<PanelProps> {
+    private _title;
+    private _body;
+    constructor(props: PanelProps);
+    setContent(content: ComponentContent): void;
+    setTitle(title: string | UnsafeHtml): void;
+}
+export {};
+
+}
+declare module 'src/components/textedit/textedit' {
+	/**
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|
+ *  /__/\__\   |_|
+ *
+ * @file textedit.ts
+ * @author Etienne Cochard
+ *
+ * @copyright (c) 2024 R-libre ingenierie
+ *
+ * Use of this source code is governed by an MIT-style license
+ * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
+ **/
+import { Component, ComponentProps } from '@core/component';
+import { UnsafeHtml } from '@core/core_tools';
+import { HBox } from 'src/components/boxes/boxes';
+import 'src/components/textedit/textedit.module.scss';
+/**
+ *
+ */
+interface TextEditProps extends ComponentProps {
+    label: string | UnsafeHtml;
+    labelWidth?: number;
+    inputId?: string;
+    type?: "text" | "email" | "password";
+    readonly?: boolean;
+    required?: boolean;
+    value: string | number;
+    placeholder?: string;
+    inputGadgets?: Component[];
+}
+/**
+ *
+ */
+export class TextEdit extends HBox {
+    constructor(props: TextEditProps);
+}
+export {};
+
+}
+declare module 'src/components/textarea/textarea' {
+	/**
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|
+ *  /__/\__\   |_|
+ *
+ * @file textarea.ts
+ * @author Etienne Cochard
+ *
+ * @copyright (c) 2024 R-libre ingenierie
+ *
+ * Use of this source code is governed by an MIT-style license
+ * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
+ **/
+import { BaseProps } from 'src/components/input/input';
+import { VBox } from 'src/components/boxes/boxes';
+import 'src/components/textarea/textarea.module.scss';
+/**
+ *
+ */
+interface TextAreaProps extends BaseProps {
+    label?: string;
+    value?: string;
+    resize?: boolean;
+}
+export class TextArea extends VBox {
+    private _input;
+    constructor(props: TextAreaProps);
+}
+export {};
+
+}
+declare module 'src/components/switch/switch' {
+	/**
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|
+ *  /__/\__\   |_|
+ *
+ * @file switch.ts
+ * @author Etienne Cochard
+ *
+ * @copyright (c) 2024 R-libre ingenierie
+ *
+ * Use of this source code is governed by an MIT-style license
+ * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
+ **/
+import { ComponentProps } from '@core/component';
+import { HBox } from 'src/components/boxes/boxes.js';
+import 'src/components/switch/switch.module.scss';
+interface SwitchProps extends ComponentProps {
+    label: string;
+    checked?: boolean;
+    value?: string;
+}
+export class Switch extends HBox<SwitchProps> {
+    constructor(props: SwitchProps);
+}
+export {};
+
+}
+declare module 'src/components/sizers/sizer' {
+	/**
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|
+ *  /__/\__\   |_|
+ *
+ * @file sizer.ts
+ * @author Etienne Cochard
+ *
+ * @copyright (c) 2024 R-libre ingenierie
+ *
+ * Use of this source code is governed by an MIT-style license
+ * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
+ **/
+import { Component, ComponentEvent, ComponentEvents, ComponentProps } from '@core/component';
+import 'src/components/sizers/sizer.module.scss';
+/**
+ *
+ */
+interface EvSizeChange extends ComponentEvent {
+    size: number;
+}
+interface CSizerEvent extends ComponentEvents {
+    resize: EvSizeChange;
+}
+export class CSizer extends Component<ComponentProps, CSizerEvent> {
+    private _type;
+    private _ref;
+    private _delta;
+    constructor(type: string, target?: Component);
+    private _onMouseMove;
+}
+export {};
+
+}
+declare module 'src/components/popup/popup' {
+	/**
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|
+ *  /__/\__\   |_|
+ *
+ * @file popup.ts
+ * @author Etienne Cochard
+ *
+ * @copyright (c) 2024 R-libre ingenierie
+ *
+ * Use of this source code is governed by an MIT-style license
+ * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
+ **/
+import { Component, ComponentEvent, ComponentEvents, ComponentProps } from '@core/component';
+import { Rect } from '@core/core_tools.js';
+import 'src/components/popup/popup.module.scss';
+export interface PopupEvents extends ComponentEvents {
+    closed: ComponentEvent;
+    opened: ComponentEvent;
+}
+export interface PopupProps extends ComponentProps {
+    modal?: boolean;
+    autoClose?: boolean | string;
+    sizable?: boolean;
+    movable?: boolean;
+}
+/**
+ *
+ */
+export class Popup<P extends PopupProps = PopupProps, E extends PopupEvents = PopupEvents> extends Component<P, E> {
+    private _isopen;
+    private _isshown;
+    constructor(props: P);
+    displayNear(rc: Rect, dst?: string, src?: string, offset?: {
+        x: number;
+        y: number;
+    }): void;
+    /**
+     *
+     */
+    displayCenter(): void;
+    /**
+     *
+     */
+    displayAt(x: number, y: number): void;
+    private _show;
+    show(show?: boolean): void;
+    isOpen(): boolean;
+    /**
+     *
+     */
+    close(): void;
+    /**
+     * binded
+     */
+    private _dismiss;
+    /**
+     * dismiss all popup belonging to the same group as 'this'
+     */
+    dismiss(after?: boolean): void;
+    /**
+     *
+     */
+    private _showModalMask;
+    /**
+     *
+     */
+    private _updateModalMask;
+    /**
+     *
+     */
+    private _createSizers;
+}
+
+}
+declare module 'src/components/combobox/combobox' {
+	/**
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|
+ *  /__/\__\   |_|
+ *
+ * @file combobox.ts
+ * @author Etienne Cochard
+ *
+ * @copyright (c) 2024 R-libre ingenierie
+ *
+ * Use of this source code is governed by an MIT-style license
+ * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
+ **/
+import { Component, ComponentProps } from '@core/component';
+import { ListItem } from 'src/components/listbox/listbox';
+import 'src/components/combobox/combobox.module.scss';
+/**
+ *
+ */
+interface ComboboxProps extends Omit<ComponentProps, "content"> {
+    label?: string;
+    labelWidth?: number | string;
+    readonly?: boolean;
+    items: ListItem[];
+}
+export class Combobox extends Component<ComboboxProps> {
+    private _dropdown;
+    private _label;
+    private _input;
+    private _button;
+    private _prevent_close;
+    private _edit;
+    constructor(props: ComboboxProps);
+    private _on_key;
+    private _on_input;
+    private _on_focusout;
+    private _on_click;
+    showDropDown(): void;
+}
+export {};
+
+}
+declare module 'src/components/slider/slider' {
+	/**
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|
+ *  /__/\__\   |_|
+ *
+ * @file slider.ts
+ * @author Etienne Cochard
+ *
+ * @copyright (c) 2024 R-libre ingenierie
+ *
+ * Use of this source code is governed by an MIT-style license
+ * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
+ **/
+import { Component, ComponentEvents, ComponentProps, ComponentEvent } from '@core/component';
+import 'src/components/slider/slider.module.scss';
+interface ChangeEvent extends ComponentEvent {
+    value: number;
+}
+interface SliderEvents extends ComponentEvents {
+    change: ChangeEvent;
+}
+interface SliderProps extends ComponentProps {
+    value: number;
+    min: number;
+    max: number;
+    step?: number;
+}
+export class Slider extends Component<SliderProps, SliderEvents> {
+    private _mdown;
+    private _irect;
+    private _thumb;
+    private _bar;
+    private _range;
+    constructor(props: SliderProps);
+    private _on_mousedown;
+    private _on_mousemove;
+    private _update;
+    private _on_mouseup;
+    private _on_key;
+}
+export {};
+
+}
+declare module 'src/components/progress/progress' {
+	/**
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|
+ *  /__/\__\   |_|
+ *
+ * @file progress.ts
+ * @author Etienne Cochard
+ *
+ * @copyright (c) 2024 R-libre ingenierie
+ *
+ * Use of this source code is governed by an MIT-style license
+ * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
+ **/
+import { Component, ComponentProps } from '@core/component';
+import 'src/components/progress/progress.module.scss';
+interface ProgressProps extends ComponentProps {
+    value: number;
+    min: number;
+    max: number;
+}
+export class Progress extends Component<ProgressProps> {
+    private _bar;
+    constructor(props: ProgressProps);
+    setValue(value: number): void;
+}
+export {};
+
+}
+declare module 'src/components/form/form' {
+	/**
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|
+ *  /__/\__\   |_|
+ *
+ * @file form.ts
+ * @author Etienne Cochard
+ *
+ * @copyright (c) 2024 R-libre ingenierie
+ *
+ * Use of this source code is governed by an MIT-style license
+ * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
+ **/
+import { Box } from 'src/components/boxes/boxes.js';
+import 'src/components/form/form.module.scss';
+type FormValue = string | number | boolean;
+type FormValues = Record<string, FormValue>;
+export class Form extends Box {
+    setValues(values: FormValues): void;
+    getValues(): FormValues;
+}
+export {};
+
+}
+declare module 'src/components/dialog/dialog' {
+	/**
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|
+ *  /__/\__\   |_|
+ *
+ * @file dialog.ts
+ * @author Etienne Cochard
+ *
+ * @copyright (c) 2024 R-libre ingenierie
+ *
+ * Use of this source code is governed by an MIT-style license
+ * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
+ **/
+import { Form } from 'src/components/form/form.js';
+import { PopupEvents, PopupProps, Popup } from 'src/components/popup/popup.js';
+import { BtnGroupItem } from 'src/components/btngroup/btngroup';
+import { ComponentEvent } from '@core/component.js';
+import 'src/components/dialog/dialog.module.scss';
+export interface DialogProps extends PopupProps {
+    icon?: string;
+    title: string;
+    form: Form;
+    buttons: BtnGroupItem[];
+    closable?: boolean;
+}
+export interface EvBtnClick extends Event {
+    button: string;
+}
+interface DialogEvents extends PopupEvents {
+    btnclick: EvBtnClick;
+    close: ComponentEvent;
+}
+/**
+ *
+ */
+export class Dialog<P extends DialogProps = DialogProps, E extends DialogEvents = DialogEvents> extends Popup<P, E> {
+    constructor(props: P);
+    display(): void;
+    close(): void;
+}
+export {};
+
+}
+declare module 'src/components/btngroup/btngroup' {
+	/**
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|
+ *  /__/\__\   |_|
+ *
+ * @file btngroup.ts
+ * @author Etienne Cochard
+ *
+ * @copyright (c) 2024 R-libre ingenierie
+ *
+ * Use of this source code is governed by an MIT-style license
+ * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
+ **/
+import { ComponentEvent, ComponentEvents, ComponentProps } from '@core/component';
+import { EventCallback } from '@core/core_events.js';
+import { Button } from 'src/components/button/button';
+import { Box } from 'src/components/boxes/boxes.js';
+import { Label } from 'src/components/label/label.js';
+import { EvBtnClick } from 'src/components/dialog/dialog.js';
+import 'src/components/btngroup/btngroup.module.scss';
+type predefined = "ok" | "cancel" | "yes" | "no" | "retry" | "abort" | "-";
+export type BtnGroupItem = predefined | Button | Label;
+interface BtnClickEvent extends ComponentEvent {
+    emitter: predefined;
+}
+interface BtnGroupEvents extends ComponentEvents {
+    btnclick: BtnClickEvent;
+}
+interface BtnGroupProps extends Omit<ComponentProps, "content"> {
+    align?: "left" | "center" | "right";
+    vertical?: boolean;
+    items: BtnGroupItem[];
+    reverse?: boolean;
+    btnclick?: EventCallback<EvBtnClick>;
+}
+export class BtnGroup extends Box<BtnGroupProps, BtnGroupEvents> {
+    constructor(props: BtnGroupProps);
+    /**
+     *
+     * @param btns
+     */
+    setButtons(btns: BtnGroupItem[]): void;
+}
+export {};
+
+}
+declare module 'src/components/image/image' {
+	/**
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|
+ *  /__/\__\   |_|
+ *
+ * @file image.ts
+ * @author Etienne Cochard
+ *
+ * @copyright (c) 2024 R-libre ingenierie
+ *
+ * Use of this source code is governed by an MIT-style license
+ * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
+ **/
+import { Component, ComponentProps } from '@core/component.js';
+import 'src/components/image/image.module.scss';
+export interface ImageProps extends ComponentProps {
+    src: string;
+    fit?: "contain" | "cover" | "fill" | "scale-down";
+    position?: string;
+    lazy?: boolean;
+    alt?: string;
+    draggable?: boolean;
+}
+/**
+ *
+ */
+export class Image extends Component<ImageProps> {
+    private _img;
+    constructor(props: ImageProps);
+    /**
+     *
+     */
+    setImage(src: string): void;
+}
+
+}
+declare module 'src/components/colorinput/colorinput' {
+	/**
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|
+ *  /__/\__\   |_|
+ *
+ * @file colorinput.ts
+ * @author Etienne Cochard
+ *
+ * @copyright (c) 2024 R-libre ingenierie
+ *
+ * Use of this source code is governed by an MIT-style license
+ * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
+ **/
+import { Color } from '@core/core_colors';
+import { BoxProps, HBox } from 'src/components/boxes/boxes';
+import 'src/components/colorinput/colorinput.module.scss';
+/**
+ *
+ */
+interface ColorInputProps extends BoxProps {
+    color: Color | string;
+}
+/**
+ *
+ */
+export class ColorInput extends HBox<ColorInputProps> {
+    constructor(props: ColorInputProps);
+}
+export {};
+
+}
+declare module 'src/components/colorpicker/colorpicker' {
+	/**
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|
+ *  /__/\__\   |_|
+ *
+ * @file colorpicker.ts
+ * @author Etienne Cochard
+ *
+ * @copyright (c) 2024 R-libre ingenierie
+ *
+ * Use of this source code is governed by an MIT-style license
+ * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
+ **/
+import { Color, Hsv } from '@core/core_colors';
+import { ComponentEvent, ComponentEvents, ComponentProps } from '@core/component';
+import { Box, BoxProps, VBox } from 'src/components/boxes/boxes';
+import 'src/components/colorpicker/colorpicker.module.scss';
+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;
+}
+/**
+ *
+ */
+export class Saturation extends Box<BoxProps, CommonEvents> {
+    private mdown;
+    private irect;
+    private hsv;
+    private color;
+    private thumb;
+    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;
+}
+/**
+ *
+ */
+interface ChangeEvent extends ComponentEvent {
+    color: Color;
+}
+interface ColorPickerChangeEvents extends ComponentEvents {
+    change: ChangeEvent;
+}
+/**
+ *
+ */
+export class ColorPicker extends VBox<ColorPickerProps, ColorPickerChangeEvents> {
+    private _base;
+    private _sat;
+    private _swatch;
+    private _hue;
+    private _alpha;
+    constructor(props: ColorPickerProps);
+    private _onkey;
+}
+export {};
+
+}
+declare module 'src/components/menu/menu' {
+	/**
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|
+ *  /__/\__\   |_|
+ *
+ * @file menu.ts
+ * @author Etienne Cochard
+ *
+ * @copyright (c) 2024 R-libre ingenierie
+ *
+ * Use of this source code is governed by an MIT-style license
+ * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
+ **/
+import { Component } from '@core/component';
+import { DOMEventHandler } from '@core/core_dom';
+import { UnsafeHtml } from '@core/core_tools';
+import { Popup, PopupProps } from 'src/components/popup/popup';
+import 'src/components/menu/menu.module.scss';
+/**
+ *
+ */
+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[];
+}
+/**
+ *
+ */
+export class Menu extends Popup {
+    constructor(props: MenuProps);
+}
+export {};
+
+}
+declare module 'src/components/tooltips/tooltips' {
+	/**
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|
+ *  /__/\__\   |_|
+ *
+ * @file tooltips.ts
+ * @author Etienne Cochard
+ *
+ * @copyright (c) 2024 R-libre ingenierie
+ *
+ * Use of this source code is governed by an MIT-style license
+ * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
+ **/
+import 'src/components/tooltips/tooltips.scss';
+export function initTooltips(): void;
+
+}
+declare module 'src/components/treeview/treeview' {
+	/**
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|
+ *  /__/\__\   |_|
+ *
+ * @file treeview.ts
+ * @author Etienne Cochard
+ *
+ * @copyright (c) 2024 R-libre ingenierie
+ *
+ * Use of this source code is governed by an MIT-style license
+ * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
+ **/
+import { Component, ComponentEvent, ComponentEvents, ComponentProps } from '@core/component';
+import { ListItem } from 'src/components/listbox/listbox';
+import 'src/components/treeview/treeview.module.scss';
+export enum kbTreeNav {
+    first = 0,
+    prev = 1,
+    next = 2,
+    last = 3,
+    parent = 4,
+    child = 5,
+    expand = 6,
+    collapse = 7,
+    toggle = 8
+}
+export interface TreeItem extends ListItem {
+    children?: TreeItem[];
+    open?: boolean;
+}
+interface TreeviewProps extends Omit<ComponentProps, "content"> {
+    items: TreeItem[];
+}
+interface ChangeEvent extends ComponentEvent {
+    selection: TreeItem;
+}
+interface TreeviewEvents extends ComponentEvents {
+    change: ChangeEvent;
+}
+/**
+ *
+ */
+export class Treeview extends Component<TreeviewProps, TreeviewEvents> {
+    private _selection;
+    private _selitem;
+    private _items;
+    constructor(props: TreeviewProps);
+    /**
+     *
+     */
+    setItems(items: TreeItem[]): void;
+    private _onclick;
+    private _onkey;
+    /**
+     *
+     */
+    navigate(sens: kbTreeNav): boolean;
+    private _flattenOpenItems;
+    private _flattenItems;
+    private _selectItem;
+    private _findItem;
+    /**
+     *
+     */
+    clearSelection(): void;
+}
+export {};
+
+}
+declare module 'src/components/messages/messages' {
+	import { Label } from 'src/components/label/label';
+import { Dialog, DialogProps } from 'src/components/dialog/dialog';
+import 'src/components/messages/messages.module.scss';
+import { UnsafeHtml } from '@core/core_tools.js';
+export interface MessageBoxProps extends DialogProps {
+    message: string;
+    click: (button: string) => void;
+}
+export class MessageBox extends Dialog<DialogProps> {
+    m_label: Label;
+    constructor(props: DialogProps);
+    setText(txt: string | UnsafeHtml): void;
+    /**
+     * display a messagebox
+     */
+    static show(msg: string | UnsafeHtml): MessageBox;
+}
+
+}
+declare module 'src/components/calendar/calendar' {
+	/**
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|
+ *  /__/\__\   |_|
+ *
+ * @file calendar.ts
+ * @author Etienne Cochard
+ *
+ * @copyright (c) 2024 R-libre ingenierie
+ *
+ * Use of this source code is governed by an MIT-style license
+ * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
+ **/
+import { ComponentEvents, ComponentProps, EvChange } from '@core/component';
+import { EventCallback } from '@core/core_events.js';
+import { VBox } from 'src/components/boxes/boxes';
+import 'src/components/calendar/calendar.module.scss';
+interface CalendarEventMap extends ComponentEvents {
+    change?: EvChange;
+}
+interface CalendarProps extends ComponentProps {
+    date?: Date;
+    minDate?: Date;
+    maxDate?: Date;
+    change?: EventCallback<EvChange>;
+}
+/**
+ * default calendar control
+ *
+ * fires:
+ * 	EventChange ( value = Date )
+ */
+export class Calendar extends VBox<CalendarProps, CalendarEventMap> {
+    private m_date;
+    constructor(props: CalendarProps);
+    /** @ignore */
+    private _update;
+    /**
+     * select the given date
+     * @param date
+     */
+    private select;
+    /**
+     *
+     */
+    private _next;
+    /**
+     *
+     */
+    private _choose;
+    getDate(): Date;
+    setDate(date: Date): void;
+}
+export {};
+/**
+ * default popup calendar
+ * /
+
+export class PopupCalendar extends Popup {
+
+    m_cal: Calendar;
+
+    constructor(props: CalendarProps) {
+        super({ tabIndex: 1 });
+
+        this.enableMask(false);
+
+        this.m_cal = new Calendar(props);
+        this.m_cal.addClass('@fit');
+
+        this.setContent(this.m_cal);
+    }
+
+    // binded
+    private _handleClick = (e: MouseEvent) => {
+        if (!this.dom) {
+            return;
+        }
+
+        let newfocus = <HTMLElement>e.target;
+
+        // child of this: ok
+        if (this.dom.contains(newfocus)) {
+            return;
+        }
+
+        // menu: ok
+        let dest = Component.getElement(newfocus, MenuItem);
+        if (dest) {
+            return;
+        }
+
+        this.close();
+    }
+
+    / ** @ignore * /
+    show(modal?: boolean, at?: Point ) {
+        x4document.addEventListener('mousedown', this._handleClick);
+        if( at ) {
+            super.displayAt( at.x, at.y, 'top left', undefined, modal );
+        }
+        else {
+            super.show(modal);
+        }
+    }
+
+    / ** @ignore * /
+    close() {
+        x4document.removeEventListener('mousedown', this._handleClick);
+        super.close();
+    }
+}
+*/ 
+
+}
+declare module 'src/components/notification/notification' {
+	/**
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|
+ *  /__/\__\   |_|.2
+ *
+ * @file notification.ts
+ * @author Etienne Cochard
+ *
+ * @copyright (c) 2024 R-libre ingenierie
+ *
+ * Use of this source code is governed by an MIT-style license
+ * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
+ **/
+import { ComponentProps } from '@core/component.js';
+import { UnsafeHtml } from '@core/core_tools.js';
+import { Popup } from 'src/components/popup/popup.js';
+import 'src/components/notification/notification.module.scss';
+/**
+ *
+ */
+interface NotificationProps extends ComponentProps {
+    loading?: boolean;
+    iconId?: string;
+    closable?: boolean;
+    mode?: "success" | "danger";
+    title: string;
+    text: string | UnsafeHtml;
+}
+/**
+ *
+ */
+export class Notification extends Popup {
+    constructor(props: NotificationProps);
+    close(): void;
+    display(time_in_s?: number): void;
+}
+export {};
+
+}
+declare module 'src/components/header/header' {
+	import { ComponentProps } from '@core/component.js';
+import { HBox } from 'src/components/boxes/boxes.js';
+import 'src/components/header/header.module.scss';
+interface HeaderItem {
+    name: string;
+    title: string;
+    iconId?: string;
+    width?: number;
+}
+interface HeaderProps extends Omit<ComponentProps, "content"> {
+    items: HeaderItem[];
+}
+export class Header extends HBox<HeaderProps> {
+    private _els;
+    private _vwp;
+    constructor(props: HeaderProps);
+    private _calc_sizes;
+    private _on_resize;
+}
+export {};
+
+}
+declare module 'src/components/tabs/tabs' {
+	/**
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|
+ *  /__/\__\   |_|.2
+ *
+ * @file tabs.ts
+ * @author Etienne Cochard
+ *
+ * @copyright (c) 2024 R-libre ingenierie
+ *
+ * Use of this source code is governed by an MIT-style license
+ * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
+ **/
+import { Component, ComponentProps } from '@core/component';
+import { VBox } from 'src/components/boxes/boxes';
+import 'src/components/tabs/tabs.module.scss';
+/**
+ *
+ */
+export interface TabItem {
+    name: string;
+    title: string;
+    icon?: string;
+    tab: Component;
+}
+/**
+ *
+ */
+interface TabsProps extends Omit<ComponentProps, "content"> {
+    default: string;
+    items: TabItem[];
+}
+export class Tabs extends VBox<TabsProps> {
+    private _list;
+    private _stack;
+    constructor(props: TabsProps);
+    selectTab(name: string): void;
+    private _onclick;
+}
+export {};
+
+}
+declare module 'src/components/rating/rating' {
+	/**
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|
+ *  /__/\__\   |_|.2
+ *
+ * @file rating.ts
+ * @author Etienne Cochard
+ *
+ * @copyright (c) 2024 R-libre ingenierie
+ *
+ * Use of this source code is governed by an MIT-style license
+ * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
+ **/
+import { ComponentEvents, ComponentProps, EvChange } from '@core/component.js';
+import { EventCallback } from '@core/core_events.js';
+import { HBox } from 'src/components/boxes/boxes.js';
+import 'src/components/rating/rating.module.scss';
+interface RatingEventMap extends ComponentEvents {
+    change: EvChange;
+}
+export interface RatingProps extends ComponentProps {
+    steps?: number;
+    value?: number;
+    icon?: string;
+    name?: string;
+    change?: EventCallback<EvChange>;
+}
+export class Rating extends HBox<RatingProps, RatingEventMap> {
+    private m_els;
+    private m_input;
+    constructor(props: RatingProps);
+    private _update;
+    getValue(): number;
+    setValue(v: number): void;
+    setSteps(n: number): void;
+    setShape(icon: string): void;
+    private _on_click;
+}
+export {};
+
+}
+declare module 'src/main' {
+	/**
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|
+ *  /__/\__\   |_|
+ *
+ * DEMO FILE
+ *
+ **/
+import '@fontsource/montserrat';
+import 'src/main.scss';
+
+}
+declare module 'src/core/core_dragdrop' {
+	/**
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|
+ *  /__/\__\   |_|
+ *
+ * @file core_dragdrop.ts
+ * @author Etienne Cochard
+ *
+ * @copyright (c) 2024 R-libre ingenierie
+ *
+ * Use of this source code is governed by an MIT-style license
+ * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
+ **/
+import { Component } from 'src/core/component';
+import { Point } from 'src/core/core_tools';
+interface DropInfo {
+    pt: Point;
+    data: DataTransfer;
+}
+type DropCallback = (command: 'enter' | 'leave' | 'drag' | 'drop', el: Component, infos: DropInfo) => void;
+type FilterCallback = (el: Component) => 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;
+}
+export const dragManager: DragManager;
+export {};
+
+}
+declare module 'src/core/core_router' {
+	/**
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|
+ *  /__/\__\   |_|.2
+ *
+ * @file core_router.ts
+ * @author Etienne Cochard
+ *
+ * @copyright (c) 2024 R-libre ingenierie
+ *
+ * Use of this source code is governed by an MIT-style license
+ * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
+ **/
+import { EvError } from 'src/core/component.js';
+import { EventMap, EventSource } from 'src/core/core_events.js';
+type RouteHandler = (params: any, path: string) => void;
+interface RouterEvents extends EventMap {
+    error: EvError;
+}
+/**
+ * micro router
+ *
+ * ```
+ * const router = new Router( );
+ *
+ * router.get( "/detail/:id", ( params: any ) => {
+ * 	this._showDetail( detail );
+ * } );
+ *
+ * router.get( "/:id", ( params: any ) => {
+ *   if( params.id==0 )
+ * 		router.navigate( '/home' );
+ *	 }
+ * });
+ *
+ * router.on( "error", ( ) => {
+ * 	router.navigate( '/home' );
+ * })
+ *
+ * router.init( );
+ * ```
+ */
+export class Router extends EventSource<RouterEvents> {
+    private m_routes;
+    private m_useHash;
+    constructor(useHash?: boolean);
+    get(uri: string | RegExp, handler: RouteHandler): void;
+    init(): void;
+    private _getLocation;
+    navigate(uri: string, notify?: boolean, replace?: boolean): void;
+    private _find;
+}
+export {};
+
+}
+declare module '*.scss' {
+    const content: { [className: string]: string };
+    export default content;
+}
+declare module '*.svg' {
+    const content: string;
+    export default content;
+}
+declare module 'types/x4react' {
+	export {}; global {
+	namespace JSX {
+		interface IntrinsicElements {
+			[elemName: string]: any;
+		}
+	}
+}
+}