x4js 1.4.52 → 1.5.0

package/lib/esm/autocomplete.js

@@ -0,0 +1,155 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|
+*  /__/\__\   |_|
+*
+* @file autocomplete.ts
+* @author Etienne Cochard
+*
+* Copyright (c) 2019-2022 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.
+**/
+import { PopupListView } from "./listview";
+import { TextEdit } from './textedit';
+/**
+ *
+ */
+export class AutoComplete extends TextEdit {
+    m_popup;
+    m_popvis;
+    m_needval;
+    m_lockpop;
+    constructor(props) {
+        super(props);
+        this.setDomEvent("input", () => this._onChange());
+        this.setDomEvent("focusin", () => this._onFocus());
+        this.startTimer("focus-check", 100, true, () => this._checkFocus());
+        this.m_popvis = false;
+        this.m_needval = false;
+        this.m_lockpop = false;
+        this.setDomEvent("keydown", e => this._onKey(e));
+    }
+    _onKey(e) {
+        if (this.m_popvis) {
+            if (e.key == "ArrowUp" || e.key == "ArrowDown") {
+                this.m_lockpop = true;
+                this.m_popup.handleKey(e);
+                this.m_lockpop = false;
+                e.preventDefault();
+                e.stopPropagation();
+            }
+            else if (e.key == "Escape") {
+                this._hidePopup();
+                e.preventDefault();
+                e.stopPropagation();
+            }
+        }
+        else if (e.key == "ArrowDown") {
+            this._onChange();
+            e.preventDefault();
+            e.stopPropagation();
+        }
+    }
+    _onChange() {
+        const items = this.m_props.enumValues(this.value);
+        this.showPopup(items);
+    }
+    componentDisposed() {
+        if (this.m_popup) {
+            this._hidePopup();
+        }
+        super.componentDisposed();
+    }
+    /**
+     * display the popup
+     */
+    showPopup(items) {
+        let props = this.m_props;
+        if (props.readOnly || this.hasClass("@disable")) {
+            return;
+        }
+        // need creation ?
+        if (!this.m_popup) {
+            let cstyle = this.getComputedStyle();
+            let fontFamily = cstyle.value('fontFamily');
+            let fontSize = cstyle.value('fontSize');
+            // prepare the combo listview
+            this.m_popup = new PopupListView({
+                cls: '@combo-popup',
+                attrs: {
+                    tabindex: 0
+                },
+                selectionChange: (e) => {
+                    this.value = e.selection.id;
+                    if (!this.m_lockpop) {
+                        this._hidePopup();
+                        this.focus();
+                    }
+                },
+                style: {
+                    fontFamily,
+                    fontSize
+                }
+            });
+        }
+        this.m_popup.items = items.map(c => ({ id: c, text: c }));
+        let r1 = this.m_ui_input.getBoundingRect();
+        this.m_popup.setStyle({
+            minWidth: r1.width,
+        });
+        this.m_popup.displayAt(r1.left, r1.bottom);
+        this.m_popvis = true;
+        //if( this.value!==undefined ) {
+        //	this.m_popup.selection = this.value;
+        //}
+    }
+    _validate(value) {
+        return true;
+    }
+    validate() {
+        return super._validate(this.value);
+    }
+    _checkFocus() {
+        const focus = document.activeElement;
+        if (this.dom && this.dom.contains(focus)) {
+            return;
+        }
+        if (this.m_popup && this.m_popup.dom && this.m_popup.dom.contains(focus)) {
+            return;
+        }
+        this._hidePopup();
+    }
+    _hidePopup() {
+        if (this.m_popvis) {
+            this.m_popup.close();
+            this.m_popvis = false;
+        }
+        if (this.m_needval) {
+            this.validate();
+            this.m_needval = false;
+        }
+    }
+    _onFocus() {
+        if (this.value.length == 0) {
+            this._onChange();
+        }
+        this.m_needval = true;
+    }
+}

package/lib/esm/base_component.d.ts

@@ -0,0 +1,88 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|
+*  /__/\__\   |_|
+*
+* @file base_component.ts
+* @author Etienne Cochard
+*
+* Copyright (c) 2019-2022 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.
+*
+**/
+import { EventMap, MapEvents, EventSource, EvTimer } from './x4events';
+/**
+ * Timer Callback
+ * @see EvTimer, startTimer, stopTimer
+ */
+interface TimerCallback {
+    (name: string, time: number): void;
+}
+/**
+ * BaseComponent EventMap
+ */
+export interface BaseComponentEventMap extends EventMap {
+    timer: EvTimer;
+}
+/**
+ * BaseCompoment Properties
+ */
+export interface BaseComponentProps<T = BaseComponentEventMap> {
+    events?: MapEvents<T>;
+    [key: string]: any;
+}
+/**
+ * BaseComponent class
+ */
+export declare class BaseComponent<P extends BaseComponentProps<BaseComponentEventMap>, E extends BaseComponentEventMap> extends EventSource<E> {
+    #private;
+    protected m_props: P;
+    constructor(props: P);
+    /**
+     * start a new timer
+     * @param name timer name
+     * @param timeout time out in ms
+     * @param repeat if true this is an auto repeat timer
+     * @param callback if !null, the callback to call else a EvTimer is fired
+     */
+    startTimer(name: string, timeout: number, repeat?: boolean, callback?: TimerCallback): void;
+    /**
+     * stop the given timer
+     * @param name
+     */
+    stopTimer(name: string): void;
+    /**
+     * stop all timers
+     */
+    disposeTimers(): void;
+    /**
+     *
+     * @param callback
+     * @param timeout
+     */
+    singleShot(callback: TimerCallback, timeout?: number): void;
+    /**
+     *
+     * @param props
+     * @param elements
+     */
+    mapPropEvents<N extends keyof E>(props: P, ...elements: N[]): void;
+}
+export {};

package/lib/{base_component.js → esm/base_component.js}

@@ -1,4 +1,3 @@
-"use strict";
 /**
 *  ___  ___ __
 *  \  \/  /  / _
@@ -28,13 +27,11 @@
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 *
 **/
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BaseComponent = void 0;
-const x4events_1 = require("./x4events");
+import { EventSource, EvTimer } from './x4events';
 /**
  * BaseComponent class
  */
-class BaseComponent extends x4events_1.EventSource {
+export class BaseComponent extends EventSource {
     m_props;
     #m_timers;
     constructor(props) {
@@ -64,7 +61,7 @@ class BaseComponent extends x4events_1.EventSource {
                 callback(name, tm);
             }
             else {
-                this.emit('timer', (0, x4events_1.EvTimer)(name, tm));
+                this.emit('timer', EvTimer(name, tm));
             }
         }, timeout);
         this.#m_timers.set(name, () => { (repeat ? clearInterval : clearTimeout)(id); });
@@ -108,4 +105,3 @@ class BaseComponent extends x4events_1.EventSource {
         });
     }
 }
-exports.BaseComponent = BaseComponent;

package/lib/esm/button.d.ts

@@ -0,0 +1,151 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|
+*  /__/\__\   |_|
+*
+* @file button.ts
+* @author Etienne Cochard
+*
+* Copyright (c) 2019-2022 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.
+**/
+import { Component, CProps, CEventMap, HtmlString } from './component';
+import { EventCallback, EvClick, EvChange } from './x4events';
+import { Action } from './action';
+import { IconID } from './icon';
+import { MenuItem, MenuOrSep } from './menu';
+/**
+ * Button events
+ */
+interface ButtonEventMap extends CEventMap {
+    click: EvClick;
+}
+declare type MenuCallBack = () => MenuOrSep[];
+/**
+ * Button properties
+ */
+interface ButtonProps<E extends ButtonEventMap = ButtonEventMap> extends CProps<E> {
+    text?: string | HtmlString;
+    icon?: IconID;
+    rightIcon?: IconID;
+    align?: 'center' | 'left' | 'right';
+    autoRepeat?: number;
+    menu?: MenuOrSep[] | MenuCallBack;
+    click?: EventCallback<EvClick>;
+    action?: Action;
+}
+/**
+ * Base button
+ */
+export declare class BaseButton<P extends ButtonProps = ButtonProps, E extends ButtonEventMap = ButtonEventMap> extends Component<P, E> {
+    constructor(props: P);
+    render(props: ButtonProps): void;
+    /**
+     * starts/stops the autorepeat
+     */
+    private _startAutoRep;
+    /**
+     *
+     */
+    protected _handleKeyDown(ev: KeyboardEvent): void;
+    /**
+     * called by the system on click event
+     */
+    protected _handleClick(ev: MouseEvent): void;
+    /**
+     * sends a click to the observers
+     */
+    protected _sendClick(): void;
+    /**
+     * change the button text
+     * @example
+     * ```ts
+     * let btn = new Button( {
+     * 	text: 'hello'
+     * });
+     *
+     * btn.text = 'world';
+     * ```
+     */
+    set text(text: string | HtmlString);
+    get text(): string | HtmlString;
+    /**
+     * change the button icon
+     * todo: do nothing if no icon defined at startup
+     *
+     * @example
+     * ```ts
+     * let btn = new Button( {
+     * 	text: 'hello',
+     *  icon: 'close'
+     * });
+     * btn.setIcon( 'open' );
+     * ```
+     */
+    set icon(icon: IconID);
+    get icon(): IconID;
+    /**
+     * change the button right icon
+     * todo: do nothing if no icon defined at startup
+     *
+     * @example
+     * ```ts
+     * let btn = new Button( {
+     * 	text: 'hello',
+     *  icon: 'close'
+     * });
+     * btn.setIcon( 'open' );
+     * ```
+     */
+    set rightIcon(icon: IconID);
+    get rightIcon(): IconID;
+    /**
+     *
+     */
+    set menu(items: MenuItem[]);
+}
+/**
+ *
+ */
+export declare class Button extends BaseButton<ButtonProps> {
+}
+interface ToggleButtonEventMap extends ButtonEventMap {
+    change: EvChange;
+}
+interface ToggleButtonProps extends ButtonProps<ToggleButtonEventMap> {
+    checked: boolean;
+    checkedIcon?: IconID;
+}
+/**
+ *
+ */
+export declare class ToggleButton extends BaseButton<ToggleButtonProps, ToggleButtonEventMap> {
+    constructor(props: ToggleButtonProps);
+    /**
+     *
+     */
+    render(props: ToggleButtonProps): void;
+    /**
+     *
+     */
+    protected _sendClick(): void;
+    private _updateIcon;
+}
+export {};

package/lib/esm/button.js

@@ -0,0 +1,257 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|
+*  /__/\__\   |_|
+*
+* @file button.ts
+* @author Etienne Cochard
+*
+* Copyright (c) 2019-2022 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.
+**/
+import { Component } from './component';
+import { EvClick, EvChange } from './x4events';
+import { Icon } from './icon';
+import { Label } from './label';
+import { Menu } from './menu';
+import { isFunction } from './tools';
+/**
+ * Base button
+ */
+export class BaseButton extends Component {
+    constructor(props) {
+        super(props);
+        this.setTag('button');
+        this.setDomEvent('click', (e) => this._handleClick(e));
+        this.setDomEvent('mousedown', () => { this._startAutoRep(true); });
+        this.setDomEvent('mouseup', () => { this._startAutoRep(false); });
+        this.setDomEvent('keydown', (e) => this._handleKeyDown(e));
+        this.mapPropEvents(props, 'click');
+    }
+    render(props) {
+        const action = props.action;
+        let icon = props.icon;
+        let text = props.text;
+        if (action) {
+            if (!icon && action.props.icon) {
+                icon = action.props.icon;
+            }
+            if (text === undefined && action.props.text) {
+                text = action.props.text;
+            }
+        }
+        const ui_icon = icon ? new Icon({ icon, cls: 'left', ref: 'l_icon' }) : null;
+        const ui_label = new Label({ flex: 1, text: text ?? '', align: props.align, ref: 'label' });
+        const ui_ricon = props.rightIcon ? new Icon({ icon: props.rightIcon, cls: 'right', ref: 'r_icon' }) : null;
+        if (text === undefined) {
+            ui_label.addClass("@hidden");
+        }
+        this.setContent([ui_icon, ui_label, ui_ricon]);
+        this._setTabIndex(props.tabIndex);
+    }
+    /**
+     * starts/stops the autorepeat
+     */
+    _startAutoRep(start) {
+        if (!this.m_props.autoRepeat) {
+            return;
+        }
+        if (start) {
+            // 1st timer 1s
+            this.startTimer('repeat', 700, false, () => {
+                // auto click
+                this.startTimer('repeat', this.m_props.autoRepeat, true, this._sendClick);
+            });
+        }
+        else {
+            this.stopTimer('repeat');
+        }
+    }
+    /**
+     *
+     */
+    _handleKeyDown(ev) {
+        if (!ev.ctrlKey && !ev.shiftKey && !ev.altKey) {
+            if (ev.key == 'Enter' || ev.key == ' ') {
+                this._sendClick();
+                ev.preventDefault();
+                ev.stopPropagation();
+            }
+        }
+    }
+    /**
+     * called by the system on click event
+     */
+    _handleClick(ev) {
+        if (this.m_props.menu) {
+            let menu = new Menu({
+                items: isFunction(this.m_props.menu) ? this.m_props.menu() : this.m_props.menu
+            });
+            let rc = this.getBoundingRect();
+            menu.displayAt(rc.left, rc.bottom, 'tl');
+        }
+        else {
+            this._sendClick();
+        }
+        ev.preventDefault();
+        ev.stopPropagation();
+    }
+    /**
+     * sends a click to the observers
+     */
+    _sendClick() {
+        if (this.m_props.menu) {
+            let menu = new Menu({
+                items: isFunction(this.m_props.menu) ? this.m_props.menu() : this.m_props.menu
+            });
+            let rc = this.getBoundingRect();
+            menu.displayAt(rc.left, rc.bottom, 'tl');
+        }
+        else {
+            this.emit('click', EvClick());
+            if (this.m_props.action) {
+                this.m_props.action.fire();
+            }
+        }
+    }
+    /**
+     * change the button text
+     * @example
+     * ```ts
+     * let btn = new Button( {
+     * 	text: 'hello'
+     * });
+     *
+     * btn.text = 'world';
+     * ```
+     */
+    set text(text) {
+        this.m_props.text = text;
+        let label = this.itemWithRef('label');
+        if (label) {
+            label.text = text;
+            label.removeClass("@hidden");
+        }
+    }
+    get text() {
+        let label = this.itemWithRef('label');
+        return label?.text;
+    }
+    /**
+     * change the button icon
+     * todo: do nothing if no icon defined at startup
+     *
+     * @example
+     * ```ts
+     * let btn = new Button( {
+     * 	text: 'hello',
+     *  icon: 'close'
+     * });
+     * btn.setIcon( 'open' );
+     * ```
+     */
+    set icon(icon) {
+        this.m_props.icon = icon;
+        let ico = this.itemWithRef('l_icon');
+        if (ico) {
+            ico.icon = icon;
+        }
+        else {
+            this.update();
+        }
+    }
+    get icon() {
+        let ico = this.itemWithRef('l_icon');
+        return ico?.icon;
+    }
+    /**
+     * change the button right icon
+     * todo: do nothing if no icon defined at startup
+     *
+     * @example
+     * ```ts
+     * let btn = new Button( {
+     * 	text: 'hello',
+     *  icon: 'close'
+     * });
+     * btn.setIcon( 'open' );
+     * ```
+     */
+    set rightIcon(icon) {
+        this.m_props.rightIcon = icon;
+        let ico = this.itemWithRef('r_icon');
+        if (ico) {
+            ico.icon = icon;
+        }
+    }
+    get rightIcon() {
+        let ico = this.itemWithRef('l_icon');
+        return ico?.icon;
+    }
+    /**
+     *
+     */
+    set menu(items) {
+        this.m_props.menu = items;
+    }
+}
+// :: BUTTON ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
+/**
+ *
+ */
+export class Button extends BaseButton {
+}
+/**
+ *
+ */
+export class ToggleButton extends BaseButton {
+    constructor(props) {
+        super(props);
+    }
+    /**
+     *
+     */
+    render(props) {
+        super.render(props);
+        if (props.checked) {
+            this.addClass('checked');
+            this._updateIcon();
+        }
+    }
+    /**
+     *
+     */
+    _sendClick() {
+        super._sendClick();
+        this.m_props.checked = !this.m_props.checked;
+        this.setClass('checked', this.m_props.checked);
+        this.emit('change', EvChange(this.m_props.checked));
+        this._updateIcon();
+    }
+    _updateIcon() {
+        if (this.m_props.checkedIcon) {
+            const ic = this.m_props.checked ? this.m_props.checkedIcon : this.m_props.icon;
+            let ico = this.itemWithRef('l_icon');
+            if (ico) {
+                ico.icon = ic;
+            }
+        }
+    }
+}