x4js 1.4.52 → 1.4.53

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

@@ -1,4 +1,3 @@
-"use strict";
 /**
 *  ___   ___ __
 *  \  \_/  /  / _
@@ -27,20 +26,18 @@
 * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PopupListView = exports.EvCancel = exports.ListView = void 0;
-const x4dom_1 = require("./x4dom");
-const component_1 = require("./component");
-const layout_1 = require("./layout");
-const popup_1 = require("./popup");
-const tools_1 = require("./tools");
-const menu_1 = require("./menu");
-const x4events_1 = require("./x4events");
+import { x4document } from './x4dom';
+import { Container, Component, EvDblClick } from './component';
+import { HLayout, VLayout } from './layout';
+import { Popup } from './popup';
+import { isFunction } from './tools';
+import { MenuItem } from "./menu";
+import { EvContextMenu, EvSelectionChange, EvClick, BasicEvent } from "./x4events";
 ;
 /**
  * Standard listview class
  */
-class ListView extends layout_1.VLayout {
+export class ListView extends VLayout {
     m_selection;
     m_defer_sel;
     m_container;
@@ -113,7 +110,7 @@ class ListView extends layout_1.VLayout {
     handleKey(ev) {
         let moveSel = (sens) => {
             let items;
-            if ((0, tools_1.isFunction)(this.m_props.items)) {
+            if (isFunction(this.m_props.items)) {
                 items = this.m_props.items();
                 this.m_props.items = items;
             }
@@ -160,11 +157,11 @@ class ListView extends layout_1.VLayout {
     _buildContent() {
         let props = this.m_props;
         if (props.virtual) {
-            this.m_container = new component_1.Container({
+            this.m_container = new Container({
                 cls: '@scroll-container',
                 content: []
             });
-            this.m_view = new component_1.Container({
+            this.m_view = new Container({
                 cls: '@scroll-view',
                 flex: 1,
                 content: this.m_container,
@@ -175,7 +172,7 @@ class ListView extends layout_1.VLayout {
             });
             this.setContent([
                 this.m_view,
-                props.gadgets ? new layout_1.HLayout({
+                props.gadgets ? new HLayout({
                     cls: 'gadgets',
                     content: props.gadgets
                 }) : null,
@@ -183,7 +180,7 @@ class ListView extends layout_1.VLayout {
         }
         else {
             this.m_view = undefined;
-            this.m_container = new layout_1.VLayout({
+            this.m_container = new VLayout({
                 cls: '@scroll-container',
                 content: []
             });
@@ -219,7 +216,7 @@ class ListView extends layout_1.VLayout {
         let props = this.m_props;
         let items = [];
         let list_items = props.items;
-        if ((0, tools_1.isFunction)(list_items)) {
+        if (isFunction(list_items)) {
             list_items = list_items();
         }
         let selId = this.m_selection?.item.id;
@@ -305,7 +302,7 @@ class ListView extends layout_1.VLayout {
             return this.m_props.renderItem(item);
         }
         else {
-            return new layout_1.HLayout({ content: item.text });
+            return new HLayout({ content: item.text });
         }
     }
     /** @ignore */
@@ -313,18 +310,18 @@ class ListView extends layout_1.VLayout {
         let dom = e.target, self = this.dom, list_items = this.m_props.items; // already created by build
         // go up until we find something interesting
         while (dom && dom != self) {
-            let itm = component_1.Component.getElement(dom), id = itm?.getData('item-id');
+            let itm = Component.getElement(dom), id = itm?.getData('item-id');
             if (id !== undefined) {
                 // find the element
                 let item = list_items.find((item) => item.id == id);
                 if (item) {
                     let event;
                     if (e.type == 'click') {
-                        event = (0, x4events_1.EvClick)(item);
+                        event = EvClick(item);
                         this.emit('click', event);
                     }
                     else {
-                        event = (0, component_1.EvDblClick)(item);
+                        event = EvDblClick(item);
                         this.emit('dblClick', event);
                     }
                     if (!event.defaultPrevented) {
@@ -345,19 +342,19 @@ class ListView extends layout_1.VLayout {
         e.preventDefault();
         let dom = e.target, self = this.dom, list_items = this.m_props.items; // already created by build;
         while (dom && dom != self) {
-            let itm = component_1.Component.getElement(dom), id = itm?.getData('item-id');
+            let itm = Component.getElement(dom), id = itm?.getData('item-id');
             if (id) {
                 // find the element
                 let item = list_items.find((item) => item.id == id);
                 if (item) {
                     this._selectItem(item, itm);
-                    this.emit('contextMenu', (0, x4events_1.EvContextMenu)(e, item));
+                    this.emit('contextMenu', EvContextMenu(e, item));
                 }
                 return;
             }
             dom = dom.parentElement;
         }
-        this.emit('contextMenu', (0, x4events_1.EvContextMenu)(e, null));
+        this.emit('contextMenu', EvContextMenu(e, null));
     }
     /**
      * @ignore
@@ -375,7 +372,7 @@ class ListView extends layout_1.VLayout {
             this.m_selection.citem.addClass('@selected');
         }
         if (notify) {
-            this.emit('selectionChange', (0, x4events_1.EvSelectionChange)(item));
+            this.emit('selectionChange', EvSelectionChange(item));
         }
     }
     /**
@@ -389,7 +386,7 @@ class ListView extends layout_1.VLayout {
             this._selectItem(null, null);
         }
         else {
-            if ((0, tools_1.isFunction)(this.m_props.items)) {
+            if (isFunction(this.m_props.items)) {
                 this.m_defer_sel = id;
             }
             else {
@@ -470,15 +467,13 @@ class ListView extends layout_1.VLayout {
         }
     }
 }
-exports.ListView = ListView;
-function EvCancel(context = null) {
-    return (0, x4events_1.BasicEvent)({ context });
+export function EvCancel(context = null) {
+    return BasicEvent({ context });
 }
-exports.EvCancel = EvCancel;
 /**
  *
  */
-class PopupListView extends popup_1.Popup {
+export class PopupListView extends Popup {
     m_list;
     constructor(props) {
         super({ tabIndex: false });
@@ -507,7 +502,7 @@ class PopupListView extends popup_1.Popup {
             return;
         }
         // menu: ok
-        let dest = component_1.Component.getElement(newfocus, menu_1.MenuItem);
+        let dest = Component.getElement(newfocus, MenuItem);
         if (dest) {
             return;
         }
@@ -516,16 +511,16 @@ class PopupListView extends popup_1.Popup {
     };
     // todo: move into popup
     show(modal) {
-        x4dom_1.x4document.addEventListener('mousedown', this._handleClick);
+        x4document.addEventListener('mousedown', this._handleClick);
         super.show(modal);
     }
     hide() {
-        x4dom_1.x4document.removeEventListener('mousedown', this._handleClick);
+        x4document.removeEventListener('mousedown', this._handleClick);
         super.hide();
     }
     // todo: move into popup
     close() {
-        x4dom_1.x4document.removeEventListener('mousedown', this._handleClick);
+        x4document.removeEventListener('mousedown', this._handleClick);
         super.close();
     }
     get selection() {
@@ -535,4 +530,3 @@ class PopupListView extends popup_1.Popup {
         this.m_list.selection = itemId;
     }
 }
-exports.PopupListView = PopupListView;

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

@@ -1,4 +1,3 @@
-"use strict";
 /**
 *  ___   ___ __
 *  \  \_/  /  / _
@@ -28,8 +27,6 @@
 * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Md5 = void 0;
 /*
 TypeScript Md5
 ==============
@@ -56,7 +53,7 @@ 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.
 */
-class Md5 {
+export class Md5 {
     static hashStr(str, raw = false) {
         return this.onePassHasher
             .start()
@@ -399,7 +396,6 @@ class Md5 {
         return raw ? this._state : Md5._hex(this._state);
     }
 }
-exports.Md5 = Md5;
 /*
 if (Md5.hashStr('hello') !== '5d41402abc4b2a76b9719d911017c592') {
     console.error('Md5 self test failed.');

package/lib/esm/menu.js

@@ -0,0 +1,300 @@
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|
+*  /__/ \__\   |_|
+*
+* @file menu.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 { x4document } from './x4dom';
+import { Component } from './component';
+import { EvClick } from './x4events';
+import { Action } from './action';
+import { Popup } from './popup';
+import { Icon } from './icon';
+import { Label } from './label';
+import { HLayout } from './layout';
+import { isString, getMousePos } from './tools';
+// ============================================================================
+// [MENU]
+// ============================================================================
+export class MenuSeparator extends Component {
+}
+export class MenuTitle extends Label {
+}
+export class Menu extends Popup {
+    static watchCount = 0;
+    static rootMenu = null;
+    m_subMenu;
+    m_opener;
+    m_virtual;
+    m_lock;
+    constructor(props, opener) {
+        super(props);
+        this.addClass('@shadow');
+        this.m_opener = opener;
+        this.m_virtual = false;
+        this.m_lock = 0;
+        this.enableMask(false);
+    }
+    lock(yes) {
+        this.m_lock += yes ? 1 : -1;
+    }
+    setVirtual() {
+        this.m_virtual = true;
+    }
+    setSubMenu(menu) {
+        this.m_subMenu = menu;
+    }
+    hideSubMenu() {
+        if (this.m_subMenu) {
+            this.m_subMenu.m_opener._close();
+            this.m_subMenu.hide();
+            this.m_subMenu = null;
+        }
+    }
+    /** @ignore */
+    render(props) {
+        this.setContent(props.items);
+    }
+    /**
+    *
+    */
+    show() {
+        if (!this.m_virtual) {
+            Menu._addMenu(this);
+        }
+        super.show();
+    }
+    /**
+     *
+    */
+    close() {
+        if (!this.dom && !this.m_virtual) {
+            return;
+        }
+        if (this.m_opener) {
+            this.m_opener._close();
+        }
+        if (this.m_subMenu) {
+            this.m_subMenu.close();
+            this.m_subMenu = null;
+        }
+        super.close();
+        Menu._removeMenu();
+    }
+    /**
+     *
+     */
+    clear() {
+        this.m_props.items = [];
+    }
+    /**
+    * @internal
+    */
+    static _addMenu(menu) {
+        //console.log( 'addmenu' );
+        if (Menu.watchCount == 0) {
+            Menu.rootMenu = menu;
+            x4document.addEventListener('mousedown', Menu._mouseWatcher);
+        }
+        Menu.watchCount++;
+    }
+    static _removeMenu() {
+        //console.log( 'removemenu' );
+        console.assert(Menu.watchCount > 0);
+        Menu.watchCount--;
+        if (Menu.watchCount == 0) {
+            x4document.removeEventListener('mousedown', Menu._mouseWatcher);
+        }
+    }
+    static _mouseWatcher(ev) {
+        if (ev.defaultPrevented) {
+            return;
+        }
+        let elOn = ev.target;
+        while (elOn) {
+            // is mouse on a menu
+            let mouseon = Component.getElement(elOn);
+            if (mouseon && (mouseon instanceof Menu /*|| elOn.$el instanceof Menubar*/)) {
+                return;
+            }
+            elOn = elOn.parentElement;
+        }
+        Menu._discardAll();
+    }
+    /**
+    * hide all the visible menus
+    */
+    static _discardAll() {
+        if (Menu.rootMenu) {
+            Menu.rootMenu.close();
+            Menu.rootMenu = null;
+        }
+    }
+    displayAt(...args) {
+        if (!this.m_lock) {
+            Menu._discardAll();
+        }
+        let x, y, align, offset;
+        if (args.length == 1) {
+            ({ x, y } = getMousePos(args[0], true));
+        }
+        else {
+            [x, y, align, offset] = args;
+        }
+        if (!align) {
+            align = 'top left';
+        }
+        super.displayAt(x, y, align, offset);
+    }
+}
+export class MenuItem extends Component {
+    m_menu;
+    m_isOpen;
+    m_action;
+    constructor(a, b) {
+        if (a instanceof Action) {
+            super({
+                click: () => { a.fire(); }
+            });
+            this.m_action = a;
+        }
+        else if (isString(a)) {
+            super({
+                text: a,
+                click: b
+            });
+        }
+        else {
+            super(a);
+        }
+        this.mapPropEvents(this.m_props, 'click');
+        this.m_menu = null;
+        this.m_isOpen = false;
+        this.setDomEvent('mousedown', (e) => this._mousedown(e));
+        this.setDomEvent('click', (e) => this._click(e));
+    }
+    /** @ignore */
+    render(props) {
+        let icon = props.icon ?? 0;
+        let text = props.text;
+        if (props.checked !== undefined) {
+            icon = props.checked ? 'var( --x4-icon-check )' : 0;
+        }
+        if (this.m_action) {
+            if (!icon) {
+                icon = this.m_action.props.icon;
+            }
+            if (text === undefined) {
+                text = this.m_action.props.text;
+            }
+        }
+        let popIco = null;
+        if (this.isPopup) {
+            this.addClass('@popup-menu-item');
+            popIco = new Icon({ icon: "var( --x4-icon-chevron-right )", cls: "pop-mark" });
+        }
+        if (!text && !icon) {
+            this.addClass('@separator');
+        }
+        if (props.cls) {
+            this.addClass(props.cls);
+        }
+        this.setTag('a');
+        //@bug: do not kill focus on click 
+        //	this.setAttribute( 'tabindex', '0' );
+        this.setContent([
+            icon < 0 ? null : new Icon({ icon }),
+            new Label({ flex: 1, text }),
+            popIco
+        ]);
+    }
+    get id() {
+        return this.m_props.itemId;
+    }
+    get text() {
+        return this.m_props.text;
+    }
+    get isPopup() {
+        return !!this.m_props.items;
+    }
+    _close() {
+        this.removeClass('@opened');
+        this.m_isOpen = false;
+    }
+    _click(ev) {
+        if (!this.isPopup) {
+            this.emit('click', EvClick());
+            Menu._discardAll();
+        }
+    }
+    _mousedown(ev) {
+        if (this.isPopup) {
+            if (!this.m_menu) {
+                this.m_menu = new Menu({ items: this.m_props.items }, this);
+            }
+            let doClose = this.m_isOpen;
+            // if parent menu has an opened sub menu, close it
+            let parent_menu = Component.getElement(this.dom, Menu);
+            if (parent_menu) {
+                parent_menu.hideSubMenu();
+            }
+            if (!doClose) {
+                if (parent_menu) {
+                    parent_menu.setSubMenu(this.m_menu);
+                }
+                this.m_isOpen = true;
+                let rc = this.getBoundingRect();
+                this.m_menu.lock(true);
+                if (parent_menu) {
+                    // standard menu
+                    this.m_menu.displayAt(rc.right, rc.top);
+                }
+                else {
+                    // menubar / menubutton
+                    this.m_menu.displayAt(rc.left, rc.bottom);
+                }
+                this.m_menu.lock(false);
+                this.addClass('@opened');
+            }
+            ev.preventDefault();
+        }
+    }
+}
+/**
+ *
+ */
+export class MenuBar extends HLayout {
+    m_items;
+    constructor(props, opener) {
+        super(props);
+        console.assert(false, 'not imp');
+        this.addClass('@shadow');
+        this.m_items = props.items;
+    }
+    /** @ignore */
+    render() {
+        this.setContent(this.m_items);
+    }
+}

package/lib/esm/messagebox.js

@@ -0,0 +1,145 @@
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|
+*  /__/ \__\   |_|
+*
+* @file messagebox.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 { Dialog } from './dialog';
+import { asap, isHtmlString, isString } from './tools';
+import { HLayout } from './layout';
+import { Icon } from './icon';
+import { Label } from './label';
+import { TextEdit } from './textedit';
+export class MessageBox extends Dialog {
+    m_label;
+    constructor(props) {
+        // remove overloaded elements from DialogBoxProps
+        let icon = props.icon ?? 'var( --x4-icon-exclamation )'; // todo: resolve that
+        props.icon = undefined;
+        let buttons = props.buttons === undefined ? ['ok'] : props.buttons;
+        props.buttons = undefined;
+        super(props);
+        let msg = props.message;
+        this.form.updateContent(new HLayout({
+            style: { padding: 8 },
+            content: [
+                icon ? new Icon({ cls: 'icon', icon }) : null,
+                this.m_label = new Label({ cls: 'text', text: msg, multiline: true })
+            ]
+        }), buttons);
+        this.on('btnClick', (ev) => {
+            // no prevent default -> always close the messagebox
+            if (!this.m_props.click) {
+                return;
+            }
+            asap(() => {
+                this.m_props.click(ev.button);
+            });
+        });
+    }
+    set text(txt) {
+        this.m_label.text = txt;
+    }
+    /**
+     * display a messagebox
+     */
+    static show(props) {
+        let msg;
+        if (isString(props) || isHtmlString(props)) {
+            msg = new MessageBox({ message: props, click: () => { } });
+        }
+        else {
+            msg = new MessageBox(props);
+        }
+        msg.show();
+        return msg;
+    }
+    /**
+     * display an alert message
+     */
+    static alert(text, title = null) {
+        new MessageBox({
+            cls: 'warning',
+            title,
+            message: text,
+            buttons: ['ok'],
+            click: () => { },
+        }).show();
+    }
+}
+export class PromptDialogBox extends Dialog {
+    m_edit;
+    constructor(props) {
+        // remove overloaded elements from DialogBoxProps
+        //let icon = props.icon;	// ?? 'cls(far fa-comment-check)';	// todo: resolve that
+        //props.icon = undefined;
+        props.buttons = undefined;
+        props.width = props.width ?? 500;
+        super(props);
+        this.form.updateContent(new HLayout({
+            cls: 'panel',
+            content: [
+                //icon ? new Icon({
+                //	cls: 'icon',
+                //	icon: icon
+                //}) : null,
+                this.m_edit = new TextEdit({
+                    flex: 1,
+                    autoFocus: true,
+                    label: props.message,
+                    value: props.value
+                }),
+            ]
+        }), ['ok', 'cancel']);
+        if (props.click) {
+            this.on('btnClick', (ev) => {
+                if (ev.button === 'ok') {
+                    // no prevent default -> always close the messagebox
+                    // asap to allow
+                    asap(() => {
+                        this.m_props.click(this.m_edit.value);
+                    });
+                }
+            });
+        }
+    }
+    set text(txt) {
+        this.m_edit.label = txt;
+    }
+    /**
+     * display a messagebox
+     */
+    static show(props, inputCallback) {
+        let msg;
+        if (isString(props) || isHtmlString(props)) {
+            msg = new PromptDialogBox({ message: props, click: inputCallback });
+        }
+        else {
+            msg = new PromptDialogBox(props);
+        }
+        msg.show();
+        return msg;
+    }
+}