x4js 1.4.16 → 1.4.20

package/lib/spreadsheet.js

@@ -29,12 +29,13 @@
 **/
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Spreadsheet = void 0;
+const x4dom_1 = require("./x4dom");
 const component_1 = require("./component");
 const layout_1 = require("./layout");
 const textedit_1 = require("./textedit");
 const tools_1 = require("./tools");
 const tools_2 = require("./tools");
-const x4_events_1 = require("./x4_events");
+const x4events_1 = require("./x4events");
 const combobox_1 = require("./combobox");
 class CellData {
     text;
@@ -89,7 +90,7 @@ class Spreadsheet extends layout_1.VLayout {
         else {
             this.m_row_limit = props.maxrows;
         }
-        this.setAttribute('tabIndex', 0);
+        this.setAttribute('tabindex', 0);
         this.setDomEvent('click', (e) => this._itemClick(e));
         this.setDomEvent('dblclick', (e) => this._itemDblClick(e));
         this.setDomEvent('keydown', (e) => this._handleKey(e));
@@ -247,7 +248,7 @@ class Spreadsheet extends layout_1.VLayout {
             let itm = component_1.Component.getElement(dom), row = itm.getData('row-id'), col = itm.getData('col-id');
             if (row !== undefined) {
                 this._selectItem(row, col);
-                this.emit('contextMenu', (0, x4_events_1.EvContextMenu)(e, { row, col, item: itm }));
+                this.emit('contextMenu', (0, x4events_1.EvContextMenu)(e, { row, col, item: itm }));
                 e.preventDefault();
                 return;
             }
@@ -323,11 +324,11 @@ class Spreadsheet extends layout_1.VLayout {
      * - scroll width
      */
     _computeItemHeight() {
-        let g1 = document.createElement('div');
+        let g1 = x4dom_1.x4document.createElement('div');
         g1.classList.add('x-spreadsheet');
-        let g2 = document.createElement('div');
+        let g2 = x4dom_1.x4document.createElement('div');
         g2.classList.add('content');
-        let g3 = document.createElement('div');
+        let g3 = x4dom_1.x4document.createElement('div');
         g3.classList.add('x-cell');
         g3.append(' ');
         g2.appendChild(g3);
@@ -795,7 +796,7 @@ class Spreadsheet extends layout_1.VLayout {
         if (newSel) {
             newSel.addClass('@selected');
         }
-        this.emit('selectionChange', (0, x4_events_1.EvSelectionChange)({ row, col }));
+        this.emit('selectionChange', (0, x4events_1.EvSelectionChange)({ row, col }));
     }
     /**
      * return the row count
@@ -1007,7 +1008,7 @@ class Spreadsheet extends layout_1.VLayout {
                 let col = this.m_editor.getData('col');
                 let old = this.m_editor.getData('old-value');
                 this.setCellText(row, col, text);
-                const ev = (0, x4_events_1.EvChange)(text, { row, col, oldValue: old, id });
+                const ev = (0, x4events_1.EvChange)(text, { row, col, oldValue: old, id });
                 this.emit('change', ev);
                 if (ev.defaultPrevented) {
                     this.setCellText(row, col, old);

package/lib/styles.js

@@ -29,6 +29,7 @@
 **/
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ComputedStyle = exports.CSSParser = exports.Stylesheet = void 0;
+const x4dom_1 = require("./x4dom");
 const tools_1 = require("./tools");
 /**
  *  -- [ @STYLESHEET ] -----------------------------------------------------------------
@@ -38,8 +39,8 @@ class Stylesheet {
     m_rules = new Map();
     constructor() {
         function getStyleSheet(name) {
-            for (let i = 0; i < document.styleSheets.length; i++) {
-                let sheet = document.styleSheets[i];
+            for (let i = 0; i < x4dom_1.x4document.styleSheets.length; i++) {
+                let sheet = x4dom_1.x4document.styleSheets[i];
                 if (sheet.title === name) {
                     return sheet;
                 }
@@ -47,9 +48,9 @@ class Stylesheet {
         }
         this.m_sheet = getStyleSheet('@dynamic-css');
         if (!this.m_sheet) {
-            let dom = document.createElement('style');
+            let dom = x4dom_1.x4document.createElement('style');
             dom.setAttribute('id', '@dynamic-css');
-            document.head.appendChild(dom);
+            x4dom_1.x4document.head.appendChild(dom);
             this.m_sheet = dom.sheet;
         }
     }
@@ -98,7 +99,7 @@ class Stylesheet {
      */
     static getVar(name) {
         if (!Stylesheet.doc_style) {
-            Stylesheet.doc_style = getComputedStyle(document.documentElement);
+            Stylesheet.doc_style = getComputedStyle(x4dom_1.x4document.documentElement);
         }
         if (name[0] != '-') {
             name = '--' + name;

package/lib/svgcomponent.d.ts

@@ -43,7 +43,7 @@ declare abstract class SVGItem {
      * change the stroke color
      * @param color
      */
-    stroke(color: string): this;
+    stroke(color: string, width?: number): this;
     /**
      * change the stroke width
      * @param width

package/lib/svgcomponent.js

@@ -76,8 +76,11 @@ class SVGItem {
      * change the stroke color
      * @param color
      */
-    stroke(color) {
+    stroke(color, width) {
         this.attr('stroke', color);
+        if (width !== undefined) {
+            this.attr('stroke-width', width + 'px');
+        }
         return this;
     }
     /**

package/lib/tabbar.d.ts

@@ -27,7 +27,7 @@
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
 import { Component, Container, ContainerEventMap, CProps, EventHandler } from './component';
-import { EvChange } from './x4_events';
+import { EvChange } from './x4events';
 import { IconID } from './icon.js';
 interface TabBarEventMap extends ContainerEventMap {
     change: EvChange;

package/lib/tabbar.js

@@ -31,7 +31,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TabBar = void 0;
 const component_1 = require("./component");
 const button_1 = require("./button");
-const x4_events_1 = require("./x4_events");
+const x4events_1 = require("./x4events");
 class TabBar extends component_1.Container {
     m_pages;
     m_curPage;
@@ -95,7 +95,7 @@ class TabBar extends component_1.Container {
         }
         this.m_curPage = p;
         if (notify) {
-            this.signal('change', (0, x4_events_1.EvChange)(p ? p.id : null));
+            this.signal('change', (0, x4events_1.EvChange)(p ? p.id : null));
         }
         if (this.m_curPage) {
             this.m_curPage.btn.addClass('selected');

package/lib/textarea.d.ts

@@ -27,7 +27,7 @@
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
 import { Component, CProps, CEventMap } from './component';
-import { EvChange, EventCallback } from './x4_events';
+import { EvChange, EventCallback } from './x4events';
 interface TextAreaEventMap extends CEventMap {
     change: EvChange;
 }

package/lib/textarea.js

@@ -30,7 +30,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextArea = void 0;
 const component_1 = require("./component");
-const x4_events_1 = require("./x4_events");
+const x4events_1 = require("./x4events");
 const tools_1 = require("./tools");
 class TextArea extends component_1.Component {
     constructor(props) {
@@ -74,7 +74,7 @@ class TextArea extends component_1.Component {
         this.setProp('tag', 'textarea');
     }
     _change() {
-        this.emit('change', (0, x4_events_1.EvChange)(this.value));
+        this.emit('change', (0, x4events_1.EvChange)(this.value));
     }
     componentCreated() {
         this.value = this.m_props.text;

package/lib/textedit.d.ts

@@ -29,7 +29,7 @@
 import { Component, EvFocus, HtmlString } from './component';
 import { Input, InputProps, InputEventMap } from './input';
 import { IconID } from './icon';
-import { EvClick, EvChange, EventCallback } from './x4_events';
+import { EvClick, EvChange, EventCallback } from './x4events';
 declare type ValidationFunction = (value: string) => string;
 interface TextEditEventMap extends InputEventMap {
     click: EvClick;

package/lib/textedit.js

@@ -29,6 +29,7 @@
 **/
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextEdit = void 0;
+const x4dom_1 = require("./x4dom");
 const component_1 = require("./component");
 const input_1 = require("./input");
 const button_1 = require("./button");
@@ -37,7 +38,7 @@ const label_1 = require("./label");
 const calendar_1 = require("./calendar");
 const tools_1 = require("./tools");
 const tooltips_1 = require("./tooltips");
-const x4_events_1 = require("./x4_events");
+const x4events_1 = require("./x4events");
 const i18n_1 = require("./i18n");
 /** @ignore */
 const reEmail = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
@@ -181,7 +182,7 @@ class TextEdit extends component_1.Component {
         super.disable();
     }
     _btnClick() {
-        this.emit('click', (0, x4_events_1.EvClick)(this.value));
+        this.emit('click', (0, x4events_1.EvClick)(this.value));
     }
     /**
      * select the value format for input/output on textedit of type date
@@ -223,7 +224,7 @@ class TextEdit extends component_1.Component {
     showError(text) {
         if (!this.m_error_tip) {
             this.m_error_tip = new tooltips_1.Tooltip({ cls: 'error' });
-            document.body.appendChild(this.m_error_tip._build());
+            x4dom_1.x4document.body.appendChild(this.m_error_tip._build());
         }
         let rc = this.m_ui_input.getBoundingRect();
         this.m_error_tip.text = text;
@@ -279,7 +280,7 @@ class TextEdit extends component_1.Component {
      */
     _change() {
         let value = this.m_ui_input.value;
-        this.emit('change', (0, x4_events_1.EvChange)(value));
+        this.emit('change', (0, x4events_1.EvChange)(value));
     }
     /**
      * getting focus

package/lib/tools.d.ts

@@ -50,6 +50,7 @@ export declare function parseIntlFloat(num: string): number;
  * @param {String} str
  */
 export declare function pascalCase(string: string): string;
+export declare function camelCase(text: string): string;
 export declare type Constructor<T> = new (...args: any[]) => T;
 export declare class Point {
     x: number;

package/lib/tools.js

@@ -28,7 +28,8 @@
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.generatePassword = exports.classNames = exports.mix = exports.crc32 = exports.Clipboard = exports.isHtmlString = exports.html = exports.HtmlString = exports.clamp = exports.getMousePos = exports.NetworkError = exports.markdownToHtml = exports.asap = exports.deferCall = exports.waitFontLoading = exports.isNumber = exports.pad = exports.isLiteralObject = exports.isFunction = exports.isArray = exports.isString = exports.downloadData = exports.calcAge = exports.formatIntlDate = exports.parseIntlDate = exports.date_calc_weeknum = exports.date_clone = exports.date_hash = exports.date_sql_utc = exports.date_to_sql = exports.date_diff = exports.date_format = exports._date_set_locale = exports.removeHtmlTags = exports.escapeHtml = exports.sprintf = exports.Rect = exports.Size = exports.Point = exports.pascalCase = exports.parseIntlFloat = exports.roundTo = exports.isTouchDevice = void 0;
+exports.generatePassword = exports.classNames = exports.mix = exports.crc32 = exports.Clipboard = exports.isHtmlString = exports.html = exports.HtmlString = exports.clamp = exports.getMousePos = exports.NetworkError = exports.markdownToHtml = exports.asap = exports.deferCall = exports.waitFontLoading = exports.isNumber = exports.pad = exports.isLiteralObject = exports.isFunction = exports.isArray = exports.isString = exports.downloadData = exports.calcAge = exports.formatIntlDate = exports.parseIntlDate = exports.date_calc_weeknum = exports.date_clone = exports.date_hash = exports.date_sql_utc = exports.date_to_sql = exports.date_diff = exports.date_format = exports._date_set_locale = exports.removeHtmlTags = exports.escapeHtml = exports.sprintf = exports.Rect = exports.Size = exports.Point = exports.camelCase = exports.pascalCase = exports.parseIntlFloat = exports.roundTo = exports.isTouchDevice = void 0;
+const x4dom_1 = require("./x4dom");
 const i18n_1 = require("./i18n"); // you MUST create a file named translation.js
 // :: ENVIRONMENT ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
 /**
@@ -90,6 +91,14 @@ function pascalCase(string) {
     return result.replace(/ /g, '-');
 }
 exports.pascalCase = pascalCase;
+function camelCase(text) {
+    let result = text.toLowerCase();
+    result = result.replace(/[^a-zA-Z0-9]+(.)/g, (m, chr) => {
+        return chr.toUpperCase();
+    });
+    return result;
+}
+exports.camelCase = camelCase;
 class Point {
     x;
     y;
@@ -652,11 +661,11 @@ function downloadData(data, mimetype, filename) {
     //}
     let blob = new Blob([data], { type: mimetype });
     let url = window.URL.createObjectURL(blob);
-    let a = document.createElement("a");
+    let a = x4dom_1.x4document.createElement("a");
     a.style['display'] = "none";
     a.href = url;
     a.download = filename;
-    document.body.appendChild(a);
+    x4dom_1.x4document.body.appendChild(a);
     a.click();
     window.URL.revokeObjectURL(url);
 }
@@ -733,20 +742,20 @@ function waitFontLoading(name) {
     // we can remove the div.
     // pitfall: if the font is already loaded, ne never end.
     // @review that
-    let ct = document.createElement('div');
+    let ct = x4dom_1.x4document.createElement('div');
     ct.style.position = 'absolute';
     ct.style.fontFamily = name;
     ct.style.fontSize = '44px';
     ct.style.opacity = '0.001';
     ct.innerText = 'X';
-    document.body.appendChild(ct);
+    x4dom_1.x4document.body.appendChild(ct);
     return new Promise((resolve) => {
         let irc = ct.getBoundingClientRect();
         let tm = setInterval(() => {
             let nrc = ct.getBoundingClientRect();
             if (nrc.height != irc.height) {
                 clearInterval(tm);
-                document.body.removeChild(ct);
+                x4dom_1.x4document.body.removeChild(ct);
                 resolve();
             }
         }, 0);

package/lib/tooltips.js

@@ -29,6 +29,7 @@
 **/
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.initTooltips = exports.Tooltip = void 0;
+const x4dom_1 = require("./x4dom");
 const component_1 = require("./component");
 const label_1 = require("./label");
 const icon_1 = require("./icon");
@@ -66,7 +67,7 @@ class Tooltip extends component_1.Component {
             valign = 'b';
         }
         // @TODO: this is a minimal overflow problem solution
-        let rc = document.body.getBoundingClientRect(), rm = this.getBoundingRect();
+        let rc = x4dom_1.x4document.body.getBoundingClientRect(), rm = this.getBoundingRect();
         if (halign == 'r') {
             x -= rm.width;
         }
@@ -135,7 +136,7 @@ function initTooltips(cb) {
             tipTmo = setTimeout(() => {
                 if (tooltip === undefined) {
                     tooltip = new Tooltip({});
-                    document.body.appendChild(tooltip._build());
+                    x4dom_1.x4document.body.appendChild(tooltip._build());
                 }
                 tooltip.text = tip;
                 tooltip.displayAt(tipTarget.x + 17, tipTarget.y + 17, 'top left');
@@ -150,8 +151,8 @@ function initTooltips(cb) {
             tooltip.hide();
         }
     }
-    document.body.addEventListener('mouseover', handle_mouse);
-    document.body.addEventListener('mouseout', handle_mouse);
-    document.body.addEventListener('mousemove', handle_mpos);
+    x4dom_1.x4document.body.addEventListener('mouseover', handle_mouse);
+    x4dom_1.x4document.body.addEventListener('mouseout', handle_mouse);
+    x4dom_1.x4document.body.addEventListener('mousemove', handle_mpos);
 }
 exports.initTooltips = initTooltips;

package/lib/treeview.d.ts

@@ -30,7 +30,7 @@ import { Component, Container, ContainerEventMap, ContainerProps, EvDblClick, Ev
 import { HtmlString } from './tools';
 import { IconID } from './icon';
 import { VLayout } from './layout';
-import { EvClick, BasicEvent, EvDrag, EvSelectionChange, EvContextMenu } from './x4_events';
+import { EvClick, BasicEvent, EvDrag, EvSelectionChange, EvContextMenu } from './x4events';
 export interface EvExpand extends BasicEvent {
     node: TreeNode;
 }

package/lib/treeview.js

@@ -33,9 +33,9 @@ const component_1 = require("./component");
 const icon_1 = require("./icon");
 const label_1 = require("./label");
 const layout_1 = require("./layout");
-const x4_events_1 = require("./x4_events");
+const x4events_1 = require("./x4events");
 function EvExpand(node) {
-    return (0, x4_events_1.BasicEvent)({ node });
+    return (0, x4events_1.BasicEvent)({ node });
 }
 /**
  *
@@ -127,7 +127,7 @@ class TreeView extends layout_1.VLayout {
             for (let i = 0; i < ev.dataTransfer.items.length; i++) {
                 ev.dataTransfer.items[0].getAsString((value) => {
                     let data = JSON.parse(value);
-                    this.emit('drag', (0, x4_events_1.EvDrag)(node, data, parent));
+                    this.emit('drag', (0, x4events_1.EvDrag)(node, data, parent));
                 });
             }
         }
@@ -346,14 +346,14 @@ class TreeView extends layout_1.VLayout {
                     this.selection = nd.id;
                     if (!onsub) {
                         if (ev.type == 'click') {
-                            this.emit('click', (0, x4_events_1.EvClick)(nd));
+                            this.emit('click', (0, x4events_1.EvClick)(nd));
                         }
                         else {
                             this.emit('dblclick', (0, component_1.EvDblClick)(nd));
                         }
                     }
                 }
-                this.emit('selectionchange', (0, x4_events_1.EvSelectionChange)(nd));
+                this.emit('selectionchange', (0, x4events_1.EvSelectionChange)(nd));
                 return;
             }
             dom = dom.parentElement;
@@ -361,7 +361,7 @@ class TreeView extends layout_1.VLayout {
         if (ev.type == 'click') {
             this.m_selection = null;
             this.update();
-            this.emit('selectionchange', (0, x4_events_1.EvSelectionChange)(null));
+            this.emit('selectionchange', (0, x4events_1.EvSelectionChange)(null));
         }
     }
     _handleCtxMenu(ev) {
@@ -380,14 +380,14 @@ class TreeView extends layout_1.VLayout {
                 }
                 this.m_selection = { id: nd.id, el: null };
                 this.update();
-                this.emit('contextMenu', (0, x4_events_1.EvContextMenu)(ev, nd));
+                this.emit('contextMenu', (0, x4events_1.EvContextMenu)(ev, nd));
                 return;
             }
             dom = dom.parentElement;
         }
         this.m_selection = null;
         this.update();
-        this.emit('contextMenu', (0, x4_events_1.EvContextMenu)(ev, null));
+        this.emit('contextMenu', (0, x4events_1.EvContextMenu)(ev, null));
     }
     /**
      * constructs a tree node from an array of strings

package/lib/x4dom.d.ts

@@ -0,0 +1,21 @@
+/**
+ *
+ */
+interface IX4Document {
+    createElement<K extends keyof HTMLElementTagNameMap>(tagName: K, options?: ElementCreationOptions): HTMLElementTagNameMap[K];
+    createElementNS(namespace: string | null, qualifiedName: string, options?: string | ElementCreationOptions): Element;
+    createTextNode(data: string): Text;
+    addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+    removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+    querySelectorAll<E extends Element = Element>(selectors: string): NodeListOf<E>;
+    querySelector<E extends Element = Element>(selectors: string): E | null;
+    get body(): HTMLElement;
+    get activeElement(): Element;
+    get location(): Location;
+    get styleSheets(): StyleSheetList;
+    get head(): HTMLHeadElement;
+    get documentElement(): HTMLElement;
+    set title(title: string);
+}
+export declare let x4document: IX4Document;
+export {};

package/lib/x4dom.js

@@ -0,0 +1,7 @@
+"use strict";
+/**
+ *
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.x4document = void 0;
+exports.x4document = document;