x4js 1.4.52 → 1.4.53

package/lib/esm/index.mjs

@@ -0,0 +1,86 @@
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|
+*  /__/ \__\   |_|
+*
+* @file index.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.
+**/
+export * from "./application";
+export * from "./autocomplete";
+export * from "./base_component";
+//export * from "./base64"
+export * from "./button";
+export * from "./calendar";
+export * from "./canvas";
+export * from "./cardview";
+export * from "./checkbox";
+export * from "./color";
+export * from "./colorpicker";
+export * from "./combobox";
+export * from "./component";
+export * from "./datastore";
+export * from "./dialog";
+export * from "./dom_events";
+export * from "./drag_manager";
+export * from "./drawtext";
+export * from "./fileupload";
+export * from "./form";
+export * from "./formatters";
+export * from "./gridview";
+export * from "./i18n";
+export * from "./icon";
+export * from "./image";
+export * from "./input";
+export * from "./label";
+export * from "./layout";
+export * from "./link";
+export * from "./listview";
+export * from "./md5";
+export * from "./menu";
+export * from "./messagebox";
+export * from "./panel";
+export * from "./popup";
+export * from "./property_editor";
+export * from "./radiobtn";
+export * from "./rating";
+export * from "./request";
+export * from "./router";
+export * from "./settings";
+export * from "./sidebarview";
+//export * from "./smartedit"
+export * from "./spreadsheet";
+export * from "./styles";
+export * from "./svgcomponent";
+export * from "./tabbar";
+export * from "./tabview";
+export * from "./textarea";
+export * from "./textedit";
+//export * from "./texthiliter"
+export * from "./toaster";
+export * from "./tools";
+export * from "./tooltips";
+export * from "./treeview";
+export * from "./x4events";
+export * from "./x4react";
+export * from "./version";

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

@@ -1,4 +1,3 @@
-"use strict";
 /**
 *  ___  ___ __
 *  \  \/  /  / _
@@ -27,14 +26,12 @@
 * 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.Input = void 0;
-const component_1 = require("./component");
+import { Component } from './component';
 /**
  * base class for elements implementing an input
  * CARE derived classes must set this.ui.input
  */
-class Input extends component_1.Component {
+export class Input extends Component {
     constructor(props) {
         super(props);
     }
@@ -183,4 +180,3 @@ class Input extends component_1.Component {
         };
     }
 }
-exports.Input = Input;

package/lib/esm/label.js

@@ -0,0 +1,90 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|
+*  /__/\__\   |_|
+*
+* @file label.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 { HtmlString } from './tools';
+import { Icon } from './icon';
+/**
+ * Standard label
+ */
+export class Label extends Component {
+    constructor(param) {
+        if (typeof (param) === 'string' || param instanceof HtmlString) {
+            super({ text: param });
+        }
+        else {
+            super(param);
+        }
+    }
+    /** @ignore */
+    render(props) {
+        let text = this.m_props.text;
+        if (this.m_props.multiline && !(text instanceof HtmlString)) {
+            text = new HtmlString(text.replace(/\n/g, '<br/>'));
+        }
+        if (!props.icon) {
+            this.setContent(text);
+        }
+        else {
+            this.setTag('span');
+            this.addClass('@hlayout');
+            this.setContent([
+                new Icon({ icon: props.icon }),
+                new Component({ content: text, ref: 'text' })
+            ]);
+        }
+        this.addClass(props.align ?? 'left');
+    }
+    /**
+     * change the displayed text
+     * @param text - new text
+     */
+    set text(txt) {
+        let props = this.m_props;
+        if (props.text !== txt) {
+            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/>'));
+            }
+            if (this.dom) {
+                let comp = this;
+                if (this.m_props.icon) {
+                    comp = this.itemWithRef('text');
+                }
+                comp.setContent(text);
+            }
+        }
+    }
+    /**
+     *
+     */
+    get text() {
+        return this.m_props.text;
+    }
+}

package/lib/esm/layout.js

@@ -0,0 +1,310 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|
+*  /__/\__\   |_|
+*
+* @file layout.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, Container } from './component';
+import { isArray } from './tools';
+// ============================================================================
+// [ABSLAYOUT]
+// ============================================================================
+export class AbsLayout extends Container {
+}
+// ============================================================================
+// [HLAYOUT]
+// ============================================================================
+export class HLayout extends Container {
+}
+// ============================================================================
+// [VLAYOUT]
+// ============================================================================
+export class VLayout extends Container {
+}
+export class AutoLayout extends Container {
+    constructor(props) {
+        super(props);
+        this.setDomEvent('sizechange', () => this._updateLayout());
+    }
+    componentCreated() {
+        super.componentCreated();
+        this._updateLayout();
+    }
+    _updateLayout() {
+        let horz = this.m_props.defaultLayout == 'horizontal' ? true : false;
+        if (this.m_props.switchSize <= 0 && window.screen.height > window.screen.width) {
+            horz = !horz;
+        }
+        else {
+            let rc = this.getBoundingRect();
+            if ((horz && rc.width < this.m_props.switchSize) || (!horz && rc.height < this.m_props.switchSize)) {
+                horz = !horz;
+            }
+        }
+        if (horz) {
+            this.removeClass('@vlayout');
+            this.addClass('@hlayout');
+        }
+        else {
+            this.addClass('@vlayout');
+            this.removeClass('@hlayout');
+        }
+    }
+}
+export class GridLayout extends Container {
+    constructor(props) {
+        /// @ts-ignore
+        // Argument of type 'GridLayoutProps' is not assignable to parameter of type 'P'.
+        // 'GridLayoutProps' is assignable to the constraint of type 'P', but 'P' could be instantiated with a different subtype of constraint 'GridLayoutProps'.
+        super(props);
+    }
+    /** @ignore */
+    render() {
+        if (this.m_props.colSizes) {
+            this.setStyleValue('grid-template-columns', this.m_props.colSizes);
+        }
+        if (this.m_props.rowSizes) {
+            this.setStyleValue('grid-template-rows', this.m_props.rowSizes);
+        }
+        if (this.m_props.colGap) {
+            this.setStyleValue('grid-gap', this.m_props.colGap);
+        }
+        if (this.m_props.template) {
+            this.setStyleValue('grid-template-areas', this.m_props.template.join('\n'));
+        }
+    }
+}
+export class TableLayout extends Container {
+    m_cells;
+    constructor(props) {
+        super(props);
+        this.setTag('table');
+        this.m_cells = new Map();
+    }
+    _getCell(row, col, create = true) {
+        let idx = _mkid(row, col);
+        return this.m_cells.get(idx) ?? (create ? { item: undefined } : null);
+    }
+    _setCell(row, col, cell, update = false) {
+        let idx = _mkid(row, col);
+        this.m_cells.set(idx, cell);
+        if (this.dom && cell.item && update) {
+            if (cell.item instanceof Component) {
+                cell.item.update();
+            }
+            else {
+                this.enumChilds((c) => {
+                    let crow = c.getData('row');
+                    if (crow == row) {
+                        let ccol = c.getData('col');
+                        if (ccol == col) {
+                            c.setContent(cell.item);
+                            c.update();
+                            return true;
+                        }
+                    }
+                });
+            }
+        }
+    }
+    setCell(row, col, item) {
+        let cell = this._getCell(row, col);
+        cell.item = item;
+        this._setCell(row, col, cell, true);
+    }
+    merge(row, col, rowCount, colCount) {
+        let cell = this._getCell(row, col);
+        cell.rowSpan = rowCount;
+        cell.colSpan = colCount;
+        this._setCell(row, col, cell);
+    }
+    setCellWidth(row, col, width) {
+        let cell = this._getCell(row, col);
+        cell.width = width;
+        this._setCell(row, col, cell);
+    }
+    setCellHeight(row, col, height) {
+        let cell = this._getCell(row, col);
+        cell.height = height;
+        this._setCell(row, col, cell);
+    }
+    setCellClass(row, col, cls) {
+        let cell = this._getCell(row, col);
+        cell.cls = cls;
+        this._setCell(row, col, cell);
+    }
+    setColClass(col, cls) {
+        let cell = this._getCell(-1, col);
+        cell.cls = cls;
+        this._setCell(-1, col, cell);
+    }
+    setRowClass(row, cls) {
+        let cell = this._getCell(row, 999);
+        cell.cls = cls;
+        this._setCell(row, 999, cell);
+    }
+    getCell(row, col) {
+        let cell = this._getCell(row, col);
+        return cell?.item;
+    }
+    render() {
+        let rows = [];
+        let skip = [];
+        for (let r = 0; r < this.m_props.rows; r++) {
+            let cols = [];
+            for (let c = 0; c < this.m_props.columns; c++) {
+                let idx = _mkid(r, c);
+                if (skip.indexOf(idx) >= 0) {
+                    continue;
+                }
+                let cell = this.m_cells.get(idx);
+                let cdata = this.m_cells.get(_mkid(-1, c));
+                let cls = '';
+                if (cell && cell.cls) {
+                    cls = cell.cls;
+                }
+                if (cdata && cdata.cls) {
+                    cls += ' ' + cdata.cls;
+                }
+                let cc = new Component({
+                    tag: 'td',
+                    content: cell?.item,
+                    width: cell?.width,
+                    height: cell?.height,
+                    data: { row: r, col: c },
+                    cls
+                });
+                if (cell) {
+                    let rs = cell.rowSpan ?? 0, cs = cell.colSpan ?? 0;
+                    if (rs > 0) {
+                        cc.setAttribute('rowspan', rs + 1);
+                    }
+                    if (cs > 0) {
+                        cc.setAttribute('colspan', cs + 1);
+                    }
+                    if (rs || cs) {
+                        for (let sr = 0; sr <= rs; sr++) {
+                            for (let sc = 0; sc <= cs; sc++) {
+                                skip.push(_mkid(sr + r, sc + c));
+                            }
+                        }
+                    }
+                }
+                cols.push(cc);
+            }
+            let rdata = this._getCell(r, 999, false);
+            let rr = new Component({
+                tag: 'tr',
+                data: { row: r },
+                content: cols,
+                cls: rdata?.cls
+            });
+            rows.push(rr);
+        }
+        this.setContent(rows);
+    }
+}
+/**
+ * @ignore
+ */
+function _mkid(row, col) {
+    return row * 1000 + col;
+}
+/**
+ * @ignore
+ */
+function _getid(key) {
+    return {
+        row: Math.floor(key / 1000) | 0,
+        col: (key % 1000) | 0
+    };
+}
+export class ScrollView extends Component {
+    constructor(props) {
+        super(props);
+        this.setContent(props.content);
+    }
+    setContent(content) {
+        if (!content) {
+            super.setContent(null);
+        }
+        else {
+            let container;
+            if (isArray(content)) {
+                container = new VLayout({ content });
+            }
+            else {
+                container = content;
+            }
+            container.addClass('@scroll-container');
+            super.setContent(container);
+        }
+    }
+}
+// :: MASONERY ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
+// from a nice article of Andy Barefoot
+//	https://medium.com/@andybarefoot/a-masonry-style-layout-using-css-grid-8c663d355ebb
+export class Masonry extends Container {
+    constructor(props) {
+        const items = props.items;
+        props.items = undefined;
+        super(props);
+        this.setDomEvent('sizechange', () => {
+            this.resizeAllItems();
+        });
+        if (items) {
+            items.forEach(i => {
+                this.addItem(i);
+            });
+        }
+    }
+    resizeItem(item) {
+        const style = this.getComputedStyle();
+        const rowHeight = style.parse('grid-auto-rows');
+        const rowGap = style.parse('grid-row-gap');
+        let content = item.queryItem('.content');
+        if (!content) {
+            content = item;
+        }
+        if (content && (rowHeight + rowGap)) {
+            const rc = content.getBoundingRect();
+            const rowSpan = Math.ceil((rc.height + rowGap) / (rowHeight + rowGap));
+            item.setStyleValue('gridRowEnd', "span " + rowSpan);
+        }
+    }
+    resizeAllItems() {
+        this.queryAll(".item", (itm) => {
+            ;
+            this.resizeItem(itm);
+        });
+    }
+    addItem(itm) {
+        itm.addClass('content');
+        this.appendChild(new Container({
+            cls: 'item',
+            content: itm
+        }));
+    }
+}

package/lib/esm/link.js

@@ -0,0 +1,59 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|
+*  /__/\__\   |_|
+*
+* @file link.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, isHtmlString, html } from './component';
+import { EvClick } from './x4events';
+/**
+ * Standard Link
+ */
+export class Link extends Component {
+    constructor(props) {
+        super(props);
+        this.setDomEvent('click', () => this._handleClick());
+        this.mapPropEvents(props, 'click');
+    }
+    _handleClick() {
+        this.emit('click', EvClick());
+    }
+    /** @ignore */
+    render(props) {
+        let text = props.text ?? '';
+        let href = props.href ?? '#';
+        this.setTag('a');
+        this.setAttribute('tabindex', 0);
+        this.setAttribute('href', href);
+        this.setAttribute('target', props.target);
+        if (text) {
+            this.setContent(isHtmlString(text) ? text : html `<span>${text}</span>`);
+        }
+    }
+    set text(text) {
+        this.m_props.text = text;
+        this.update();
+    }
+}