x4js 1.5.17 → 1.5.20

package/lib/esm/input.js

@@ -1,182 +0,0 @@
-/**
-*  ___  ___ __
-*  \  \/  /  / _
-*   \    /  /_| |_
-*   /    \____   _|
-*  /__/\__\   |_|
-*
-* @file input.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';
-/**
- * base class for elements implementing an input
- * CARE derived classes must set this.ui.input
- */
-export class Input extends Component {
-    constructor(props) {
-        super(props);
-    }
-    /** @ignore */
-    render(props) {
-        this.setTag('input');
-        this._setTabIndex(props.tabIndex);
-        this.setAttributes({
-            value: props.value,
-            type: props.type || 'text',
-            name: props.name,
-            placeholder: props.placeHolder,
-            autofocus: props.autoFocus,
-            readonly: props.readOnly,
-            autocomplete: 'new-password',
-            tabIndex: props.tabIndex,
-            spellcheck: props.spellcheck === false ? 'false' : undefined,
-            min: props.min,
-            max: props.max,
-            ...props.attrs
-        });
-        this.m_props.autosel = props.autosel ?? true;
-        if (props.uppercase) {
-            this.setStyleValue('textTransform', 'uppercase');
-        }
-        if (this.m_props.autosel) {
-            this.setDomEvent("focus", () => {
-                this.selectAll();
-            });
-        }
-    }
-    getType() {
-        return this.m_props.type;
-    }
-    /**
-     * return the current editor value
-     */
-    get value() {
-        if (this.dom) {
-            this.m_props.value = this.dom.value;
-        }
-        if (this.m_props.uppercase) {
-            let upper = this.m_props.value.toUpperCase(); // todo: locale ?
-            if (this.dom && upper != this.m_props.value) {
-                this.dom.value = upper; // update the input
-            }
-            this.m_props.value = upper;
-        }
-        return this.m_props.value;
-    }
-    /**
-     * Change the editor value
-     * @param value - new value to set
-     */
-    set value(value) {
-        this.m_props.value = value;
-        if (this.dom) {
-            this.dom.value = value;
-        }
-    }
-    getStoreValue() {
-        if (this.m_props.value_hook) {
-            return this.m_props.value_hook.get();
-        }
-        else {
-            let type = this.getAttribute('type');
-            if (type) {
-                type = type.toLowerCase();
-            }
-            let value, dom = this.dom;
-            if (type === "file") {
-                value = [];
-                let files = dom.files;
-                for (let file = 0; file < files.length; file++) {
-                    value.push(files[file].name);
-                }
-            }
-            else if (type === 'checkbox') {
-                if (dom.checked) {
-                    value = 1;
-                }
-                else {
-                    value = 0;
-                }
-            }
-            else if (type === 'radio') {
-                if (dom.checked) {
-                    value = this.value;
-                }
-            }
-            else if (type === 'date') {
-                debugger;
-            }
-            else {
-                value = this.value;
-            }
-            return value;
-        }
-    }
-    setStoreValue(v) {
-        if (this.m_props.value_hook) {
-            return this.m_props.value_hook.set(v);
-        }
-        else {
-            let type = this.getAttribute('type'), dom = this.dom;
-            if (type) {
-                type = type.toLowerCase();
-            }
-            if (type === 'checkbox') {
-                let newval = v !== null && v !== '0' && v !== 0 && v !== false;
-                if (newval !== dom.checked) {
-                    dom.setAttribute('checked', '' + newval);
-                    dom.dispatchEvent(new Event('change'));
-                }
-            }
-            else {
-                this.value = v;
-            }
-        }
-    }
-    set readOnly(ro) {
-        this.setAttribute('readonly', ro);
-    }
-    /**
-     * select all the text
-     */
-    selectAll() {
-        this.dom.select();
-    }
-    /**
-     * select a part of the text
-     * @param start
-     * @param length
-     */
-    select(start, length = 9999) {
-        this.dom.setSelectionRange(start, start + length);
-    }
-    /**
-     * get the selection as { start, length }
-     */
-    getSelection() {
-        let idom = this.dom;
-        return {
-            start: idom.selectionStart,
-            length: idom.selectionEnd - idom.selectionStart,
-        };
-    }
-}

package/lib/esm/label.js

@@ -1,90 +0,0 @@
-/**
-*  ___  ___ __
-*  \  \/  /  / _
-*   \    /  /_| |_
-*   /    \____   _|
-*  /__/\__\   |_|
-*
-* @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 { escapeHtml, 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(escapeHtml(text, true));
-        }
-        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(escapeHtml(text, true));
-            }
-            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

@@ -1,310 +0,0 @@
-/**
-*  ___  ___ __
-*  \  \/  /  / _
-*   \    /  /_| |_
-*   /    \____   _|
-*  /__/\__\   |_|
-*
-* @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

@@ -1,59 +0,0 @@
-/**
-*  ___  ___ __
-*  \  \/  /  / _
-*   \    /  /_| |_
-*   /    \____   _|
-*  /__/\__\   |_|
-*
-* @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();
-    }
-}