x4js 1.5.4 → 1.5.6

package/lib/changelog.txt

@@ -1,3 +1,11 @@
+2022/12/08 : 1.5.6 --------------------------------------------------------
+	combobox.ts - allow editable
+	              items can be a function
+				  populate removed
+
+	listview.ts - focus bug on popuplistview
+	label.ts    - bug: display dangerous html elements when multiline = true
+
 2022/12/05 : 1.5.1 --------------------------------------------------------
 	icon.ts - now accepts direct <svg>..</svg> in argument (var or other)
 

package/lib/cjs/combobox.js

@@ -47,9 +47,36 @@ const tools_1 = require("./tools");
 class ComboBox extends layout_1.HLayout {
     constructor(props) {
         super(props);
-        this.setDomEvent('keypress', () => this.showPopup());
-        this.setDomEvent('click', () => this.showPopup());
+        if (!props.editable) {
+            this.setDomEvent('keypress', () => this.showPopup());
+        }
+        this.setDomEvent('click', () => {
+            if (this.m_props.editable) {
+                this.m_ui_input.focus();
+            }
+            this.showPopup();
+        });
+        this.setDomEvent("keydown", e => this._onKey(e));
         this.mapPropEvents(props, 'selectionChange');
+        this.m_popvis = false;
+        this.m_lockpop = false;
+        this.m_lockchg = false;
+    }
+    _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();
+            }
+        }
     }
     set items(items) {
         this.m_props.items = items;
@@ -61,16 +88,35 @@ class ComboBox extends layout_1.HLayout {
     render(props) {
         var _a;
         if (!props.renderer) {
-            this.m_ui_input = new input_1.Input({
+            const input = new input_1.Input({
                 flex: 1,
-                readOnly: true,
+                readOnly: this.m_props.editable ? false : true,
                 tabIndex: 0,
                 name: props.name,
                 value_hook: {
                     get: () => { return this.value; },
                     set: (v) => { this.value = v; }
+                },
+                dom_events: {
+                    focus: () => {
+                        if (this.m_props.editable && input.value.length == 0) {
+                            this.showPopup();
+                        }
+                    },
+                    input: () => {
+                        if (this.m_lockchg) {
+                            return;
+                        }
+                        const text = input.value;
+                        this.m_selection = { id: undefined, text };
+                        let items = this.showPopup();
+                        if (items && items.length && items[0].text == text) {
+                            this.m_selection = { id: items[0].id, text };
+                        }
+                    }
                 }
             });
+            this.m_ui_input = input;
         }
         else {
             this.m_ui_input = new component_1.Component({
@@ -104,7 +150,9 @@ class ComboBox extends layout_1.HLayout {
                         cls: 'gadget',
                         icon: 'var( --x4-icon-angle-down )',
                         tabIndex: false,
-                        click: () => this.showPopup(),
+                        click: () => {
+                            this.showPopup(false);
+                        },
                         dom_events: {
                             focus: () => { this.dom.focus(); },
                         }
@@ -125,10 +173,18 @@ class ComboBox extends layout_1.HLayout {
     /**
      * display the popup
      */
-    showPopup() {
+    showPopup(filter_items = true) {
         let props = this.m_props;
         if (props.readOnly || this.hasClass("@disable")) {
-            return;
+            return null;
+        }
+        let items = props.items;
+        if ((0, tools_1.isFunction)(items)) {
+            const filter = filter_items ? this.m_ui_input.value : null;
+            items = items(filter);
+        }
+        if (items.length == 0) {
+            return null;
         }
         // need creation ?
         if (!this.m_popup) {
@@ -138,10 +194,15 @@ class ComboBox extends layout_1.HLayout {
             // prepare the combo listview
             this.m_popup = new listview_1.PopupListView({
                 cls: '@combo-popup',
-                items: props.items,
                 populate: props.populate,
                 renderItem: this.m_props.renderer,
-                selectionChange: (e) => this._selectItem(e),
+                selectionChange: (e) => {
+                    this._selectItem(e);
+                    if (!this.m_lockpop) {
+                        this._hidePopup();
+                        this.focus();
+                    }
+                },
                 cancel: (e) => this.signal('cancel', e),
                 style: {
                     fontFamily,
@@ -149,14 +210,18 @@ class ComboBox extends layout_1.HLayout {
                 }
             });
         }
+        this.m_popup.items = items;
         let r1 = this.m_ui_button.getBoundingRect(), r2 = this.m_ui_input.getBoundingRect();
         this.m_popup.setStyle({
             minWidth: r1.right - r2.left,
         });
         this.m_popup.displayAt(r2.left, r2.bottom);
+        this.m_popvis = true;
+        this.startTimer("focus-check", 100, true, () => this._checkFocus());
         if (this.value !== undefined) {
             this.m_popup.selection = this.value;
         }
+        return items;
     }
     /** @ignore
       */
@@ -165,15 +230,17 @@ class ComboBox extends layout_1.HLayout {
         if (!item) {
             return;
         }
+        this.m_lockchg = true;
         this._setInput(item, true);
+        this.m_lockchg = false;
         this.m_selection = {
             id: item.id,
             text: item.text
         };
         this.emit('selectionChange', (0, x4events_1.EvSelectionChange)(item));
         this.emit('change', (0, x4events_1.EvChange)(item.id));
-        this.m_ui_input.focus();
-        this.m_popup.hide();
+        //this.m_ui_input.focus( );
+        //this.m_popup.hide( );
     }
     /**
      *
@@ -209,7 +276,13 @@ class ComboBox extends layout_1.HLayout {
         return this.m_selection ? this.m_selection.id : undefined;
     }
     get valueText() {
-        return this.m_selection ? this.m_selection.text : undefined;
+        if (this.m_selection) {
+            return this.m_selection.text;
+        }
+        if (this.m_props.editable) {
+            return this.m_ui_input.value;
+        }
+        return '';
     }
     /**
      *
@@ -217,7 +290,7 @@ class ComboBox extends layout_1.HLayout {
     set value(id) {
         let items = this.m_props.items;
         if ((0, tools_1.isFunction)(items)) {
-            items = items();
+            items = items(null);
         }
         const found = items.some((v) => {
             if (v.id === id) {
@@ -234,6 +307,23 @@ class ComboBox extends layout_1.HLayout {
     get input() {
         return this.m_ui_input instanceof input_1.Input ? this.m_ui_input : null;
     }
+    _checkFocus() {
+        const focus = document.activeElement;
+        if (this.dom && this.dom.contains(focus) || focus == document.body) {
+            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;
+            this.stopTimer("focus-check");
+        }
+    }
     static storeProxy(props) {
         let view = props.store instanceof datastore_1.DataStore ? props.store.createView() : props.store;
         return () => {
@@ -247,13 +337,13 @@ class ComboBox extends layout_1.HLayout {
             return result;
         };
     }
+    focus() {
+        if (this.m_props.editable) {
+            this.m_ui_input.focus();
+        }
+        else {
+            super.focus();
+        }
+    }
 }
 exports.ComboBox = ComboBox;
-/*
- export type CBComboBoxRenderer = ( rec: Record ) => string;
-export interface ComboBoxStore {
-    store: DataStore;
-    display: string | CBComboBoxRenderer;		// if string, the field name to display
-}
-
-*/

package/lib/cjs/label.js

@@ -49,7 +49,7 @@ class Label extends component_1.Component {
         var _a;
         let text = this.m_props.text;
         if (this.m_props.multiline && !(text instanceof tools_1.HtmlString)) {
-            text = new tools_1.HtmlString(text.replace(/\n/g, '<br/>'));
+            text = new tools_1.HtmlString((0, tools_1.escapeHtml)(text, true));
         }
         if (!props.icon) {
             this.setContent(text);
@@ -74,7 +74,7 @@ class Label extends component_1.Component {
             props.text = txt;
             let text = this.m_props.text;
             if (this.m_props.multiline && !(text instanceof tools_1.HtmlString)) {
-                text = new tools_1.HtmlString(text.replace('/\n/g', '<br/>'));
+                text = new tools_1.HtmlString((0, tools_1.escapeHtml)(text, true));
             }
             if (this.dom) {
                 let comp = this;

package/lib/cjs/listview.js

@@ -64,7 +64,7 @@ class ListView extends layout_1.VLayout {
             this._buildItems();
         }
         else if (this.m_props.populate) {
-            this.items = this.m_props.populate();
+            this.items = this.m_props.populate(null);
         }
     }
     render(props) {
@@ -316,6 +316,8 @@ class ListView extends layout_1.VLayout {
     }
     /** @ignore */
     _handleClick(e) {
+        e.stopImmediatePropagation();
+        e.preventDefault();
         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) {

package/lib/cjs/messagebox.js

@@ -27,6 +27,15 @@
 * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PromptDialogBox = exports.MessageBox = void 0;
 const dialog_1 = require("./dialog");
@@ -79,6 +88,24 @@ class MessageBox extends dialog_1.Dialog {
         msg.show();
         return msg;
     }
+    static showAsync(props) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                let _props;
+                const cb = (btn) => {
+                    resolve(btn);
+                };
+                if ((0, tools_1.isString)(props) || (0, tools_1.isHtmlString)(props)) {
+                    _props = { message: props, click: cb };
+                }
+                else {
+                    _props = Object.assign(Object.assign({}, props), { click: cb });
+                }
+                const msg = new MessageBox(_props);
+                msg.show();
+            });
+        });
+    }
     /**
      * display an alert message
      */

package/lib/cjs/tools.js

@@ -273,7 +273,7 @@ exports.sprintf = sprintf;
  */
 function escapeHtml(unsafe, nl_br = false) {
     if (!unsafe || unsafe.length == 0) {
-        return unsafe;
+        return "";
     }
     let result = unsafe.replace(/[<>\&\"\']/g, function (c) {
         return '&#' + c.charCodeAt(0) + ';';

package/lib/cjs/version.js

@@ -29,4 +29,4 @@
 **/
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.x4js_version = void 0;
-exports.x4js_version = "1.5.2";
+exports.x4js_version = "1.5.6";

package/lib/esm/combobox.js

@@ -45,13 +45,42 @@ export class ComboBox extends HLayout {
     m_ui_input;
     m_ui_button;
     m_popup;
+    m_lockpop;
+    m_lockchg;
+    m_popvis;
     m_selection;
-    m_defer_sel;
     constructor(props) {
         super(props);
-        this.setDomEvent('keypress', () => this.showPopup());
-        this.setDomEvent('click', () => this.showPopup());
+        if (!props.editable) {
+            this.setDomEvent('keypress', () => this.showPopup());
+        }
+        this.setDomEvent('click', () => {
+            if (this.m_props.editable) {
+                this.m_ui_input.focus();
+            }
+            this.showPopup();
+        });
+        this.setDomEvent("keydown", e => this._onKey(e));
         this.mapPropEvents(props, 'selectionChange');
+        this.m_popvis = false;
+        this.m_lockpop = false;
+        this.m_lockchg = false;
+    }
+    _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();
+            }
+        }
     }
     set items(items) {
         this.m_props.items = items;
@@ -62,16 +91,35 @@ export class ComboBox extends HLayout {
     /** @ignore */
     render(props) {
         if (!props.renderer) {
-            this.m_ui_input = new Input({
+            const input = new Input({
                 flex: 1,
-                readOnly: true,
+                readOnly: this.m_props.editable ? false : true,
                 tabIndex: 0,
                 name: props.name,
                 value_hook: {
                     get: () => { return this.value; },
                     set: (v) => { this.value = v; }
+                },
+                dom_events: {
+                    focus: () => {
+                        if (this.m_props.editable && input.value.length == 0) {
+                            this.showPopup();
+                        }
+                    },
+                    input: () => {
+                        if (this.m_lockchg) {
+                            return;
+                        }
+                        const text = input.value;
+                        this.m_selection = { id: undefined, text };
+                        let items = this.showPopup();
+                        if (items && items.length && items[0].text == text) {
+                            this.m_selection = { id: items[0].id, text };
+                        }
+                    }
                 }
             });
+            this.m_ui_input = input;
         }
         else {
             this.m_ui_input = new Component({
@@ -105,7 +153,9 @@ export class ComboBox extends HLayout {
                         cls: 'gadget',
                         icon: 'var( --x4-icon-angle-down )',
                         tabIndex: false,
-                        click: () => this.showPopup(),
+                        click: () => {
+                            this.showPopup(false);
+                        },
                         dom_events: {
                             focus: () => { this.dom.focus(); },
                         }
@@ -126,10 +176,18 @@ export class ComboBox extends HLayout {
     /**
      * display the popup
      */
-    showPopup() {
+    showPopup(filter_items = true) {
         let props = this.m_props;
         if (props.readOnly || this.hasClass("@disable")) {
-            return;
+            return null;
+        }
+        let items = props.items;
+        if (isFunction(items)) {
+            const filter = filter_items ? this.m_ui_input.value : null;
+            items = items(filter);
+        }
+        if (items.length == 0) {
+            return null;
         }
         // need creation ?
         if (!this.m_popup) {
@@ -139,10 +197,15 @@ export class ComboBox extends HLayout {
             // prepare the combo listview
             this.m_popup = new PopupListView({
                 cls: '@combo-popup',
-                items: props.items,
                 populate: props.populate,
                 renderItem: this.m_props.renderer,
-                selectionChange: (e) => this._selectItem(e),
+                selectionChange: (e) => {
+                    this._selectItem(e);
+                    if (!this.m_lockpop) {
+                        this._hidePopup();
+                        this.focus();
+                    }
+                },
                 cancel: (e) => this.signal('cancel', e),
                 style: {
                     fontFamily,
@@ -150,14 +213,18 @@ export class ComboBox extends HLayout {
                 }
             });
         }
+        this.m_popup.items = items;
         let r1 = this.m_ui_button.getBoundingRect(), r2 = this.m_ui_input.getBoundingRect();
         this.m_popup.setStyle({
             minWidth: r1.right - r2.left,
         });
         this.m_popup.displayAt(r2.left, r2.bottom);
+        this.m_popvis = true;
+        this.startTimer("focus-check", 100, true, () => this._checkFocus());
         if (this.value !== undefined) {
             this.m_popup.selection = this.value;
         }
+        return items;
     }
     /** @ignore
       */
@@ -166,15 +233,17 @@ export class ComboBox extends HLayout {
         if (!item) {
             return;
         }
+        this.m_lockchg = true;
         this._setInput(item, true);
+        this.m_lockchg = false;
         this.m_selection = {
             id: item.id,
             text: item.text
         };
         this.emit('selectionChange', EvSelectionChange(item));
         this.emit('change', EvChange(item.id));
-        this.m_ui_input.focus();
-        this.m_popup.hide();
+        //this.m_ui_input.focus( );
+        //this.m_popup.hide( );
     }
     /**
      *
@@ -210,7 +279,13 @@ export class ComboBox extends HLayout {
         return this.m_selection ? this.m_selection.id : undefined;
     }
     get valueText() {
-        return this.m_selection ? this.m_selection.text : undefined;
+        if (this.m_selection) {
+            return this.m_selection.text;
+        }
+        if (this.m_props.editable) {
+            return this.m_ui_input.value;
+        }
+        return '';
     }
     /**
      *
@@ -218,7 +293,7 @@ export class ComboBox extends HLayout {
     set value(id) {
         let items = this.m_props.items;
         if (isFunction(items)) {
-            items = items();
+            items = items(null);
         }
         const found = items.some((v) => {
             if (v.id === id) {
@@ -235,6 +310,23 @@ export class ComboBox extends HLayout {
     get input() {
         return this.m_ui_input instanceof Input ? this.m_ui_input : null;
     }
+    _checkFocus() {
+        const focus = document.activeElement;
+        if (this.dom && this.dom.contains(focus) || focus == document.body) {
+            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;
+            this.stopTimer("focus-check");
+        }
+    }
     static storeProxy(props) {
         let view = props.store instanceof DataStore ? props.store.createView() : props.store;
         return () => {
@@ -248,12 +340,12 @@ export class ComboBox extends HLayout {
             return result;
         };
     }
+    focus() {
+        if (this.m_props.editable) {
+            this.m_ui_input.focus();
+        }
+        else {
+            super.focus();
+        }
+    }
 }
-/*
- export type CBComboBoxRenderer = ( rec: Record ) => string;
-export interface ComboBoxStore {
-    store: DataStore;
-    display: string | CBComboBoxRenderer;		// if string, the field name to display
-}
-
-*/

package/lib/esm/label.js

@@ -27,7 +27,7 @@
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
 import { Component } from './component';
-import { HtmlString } from './tools';
+import { escapeHtml, HtmlString } from './tools';
 import { Icon } from './icon';
 /**
  * Standard label
@@ -45,7 +45,7 @@ export class Label extends Component {
     render(props) {
         let text = this.m_props.text;
         if (this.m_props.multiline && !(text instanceof HtmlString)) {
-            text = new HtmlString(text.replace(/\n/g, '<br/>'));
+            text = new HtmlString(escapeHtml(text, true));
         }
         if (!props.icon) {
             this.setContent(text);
@@ -70,7 +70,7 @@ export class Label extends Component {
             props.text = txt;
             let text = this.m_props.text;
             if (this.m_props.multiline && !(text instanceof HtmlString)) {
-                text = new HtmlString(text.replace('/\n/g', '<br/>'));
+                text = new HtmlString(escapeHtml(text, true));
             }
             if (this.dom) {
                 let comp = this;

package/lib/esm/listview.js

@@ -59,7 +59,7 @@ export class ListView extends VLayout {
             this._buildItems();
         }
         else if (this.m_props.populate) {
-            this.items = this.m_props.populate();
+            this.items = this.m_props.populate(null);
         }
     }
     render(props) {
@@ -307,6 +307,8 @@ export class ListView extends VLayout {
     }
     /** @ignore */
     _handleClick(e) {
+        e.stopImmediatePropagation();
+        e.preventDefault();
         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) {

package/lib/esm/messagebox.js

@@ -76,6 +76,22 @@ export class MessageBox extends Dialog {
         msg.show();
         return msg;
     }
+    static async showAsync(props) {
+        return new Promise((resolve, reject) => {
+            let _props;
+            const cb = (btn) => {
+                resolve(btn);
+            };
+            if (isString(props) || isHtmlString(props)) {
+                _props = { message: props, click: cb };
+            }
+            else {
+                _props = { ...props, click: cb };
+            }
+            const msg = new MessageBox(_props);
+            msg.show();
+        });
+    }
     /**
      * display an alert message
      */

package/lib/esm/tools.js

@@ -269,7 +269,7 @@ export function sprintf(format, ...args) {
  */
 export function escapeHtml(unsafe, nl_br = false) {
     if (!unsafe || unsafe.length == 0) {
-        return unsafe;
+        return "";
     }
     let result = unsafe.replace(/[<>\&\"\']/g, function (c) {
         return '&#' + c.charCodeAt(0) + ';';

package/lib/esm/version.js

@@ -26,4 +26,4 @@
 * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
-export const x4js_version = "1.5.2";
+export const x4js_version = "1.5.6";