x4js 1.4.3 → 1.4.4

package/lib/icon.js

@@ -1,173 +0,0 @@
-/**
-*  ___  ___ __
-*  \  \/  /  / _
-*   \    /  /_| |_
-*   /    \____   _|
-*  /__/\__\   |_|
-*
-* @file icon.ts
-* @author Etienne Cochard
-* @license
-* Copyright (c) 2019-2021 R-libre ingenierie
-*
-* This program is free software; you can redistribute it and/or modify
-* it under the terms of the GNU General Public License as published by
-* the Free Software Foundation; either version 3 of the License, or
-* (at your option) any later version.
-*
-* This program is distributed in the hope that it will be useful,
-* but WITHOUT ANY WARRANTY; without even the implied warranty of
-* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-* GNU General Public License for more details.
-*
-* You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
-**/
-import { Component } from './component';
-import { Stylesheet } from './styles';
-import { HtmlString } from './tools';
-import { BasicEvent, EventSource } from './x4_events';
-export function EvLoaded(url, svg, context = null) {
-    return BasicEvent({ url, svg, context });
-}
-class Loader extends EventSource {
-    svgs;
-    constructor() {
-        super();
-        this.svgs = new Map();
-    }
-    load(url) {
-        if (this.svgs.has(url)) {
-            const svg = this.svgs.get(url);
-            if (svg) {
-                //console.log( 'cached=', url );
-                this.signal('loaded', EvLoaded(url, svg));
-            }
-        }
-        else {
-            // mark it as loading
-            this.svgs.set(url, null);
-            // then start loading
-            const _load = async (url) => {
-                const r = await fetch(url);
-                if (r.ok) {
-                    const svg = await r.text();
-                    this.svgs.set(url, svg);
-                    //console.log( 'signal=', url );
-                    this.signal('loaded', EvLoaded(url, svg));
-                }
-            };
-            _load(url);
-        }
-    }
-}
-const svgLoader = new Loader();
-/**
- * standard icon
- */
-export class Icon extends Component {
-    m_icon;
-    m_iconName;
-    constructor(props) {
-        super(props);
-        this._setIcon(props.icon, false);
-        if (props.size) {
-            this.setStyleValue('fontSize', props.size);
-        }
-    }
-    _setIcon(icon, remove_old) {
-        const reUrl = /\s*url\s*\(\s*(.+)\s*\)\s*/gi;
-        const reSvg = /\s*svg\s*\(\s*(.+)\s*\)\s*/gi;
-        const reSvg2 = /(.*\.svg)$/gi;
-        const reCls = /\s*cls\s*\(\s*(.+)\s*\)\s*/gi;
-        if (!icon) {
-            this.m_iconName = '';
-            return;
-        }
-        this.removeClass('@svg');
-        let name, url;
-        if (typeof (icon) === 'number') {
-            icon = icon.toString(16);
-            name = icon;
-        }
-        else {
-            let match_svg = reSvg.exec(icon) || reSvg2.exec(icon);
-            if (match_svg) {
-                const url = match_svg[1].trim();
-                this._setSVG(url);
-                return;
-            }
-            let match_cls = reCls.exec(icon);
-            if (match_cls) {
-                const classes = match_cls[1].trim();
-                this.addClass(classes);
-                return;
-            }
-            let match_url = reUrl.exec(icon);
-            if (match_url) {
-                url = match_url[1].trim();
-                name = url.replace(/[/\\\.\* ]/g, '_');
-            }
-            else {
-                name = icon;
-                icon = Stylesheet.getVar('icon-' + icon);
-                if (icon == '' || icon === undefined) {
-                    // name your icon 'icon-xxx'
-                    // ex:
-                    // :root { --icon-zoom-p: f00e; }
-                    console.assert(false);
-                    icon = '0';
-                }
-            }
-        }
-        this.m_iconName = name;
-        if (this.m_icon === icon) {
-            return;
-        }
-        let css = Component.getCss(), rulename;
-        if (remove_old && this.m_icon) {
-            rulename = 'icon-' + name;
-            this.removeClass(rulename);
-        }
-        // generate dynamic css icon rule
-        rulename = 'icon-' + name;
-        if (Icon.icon_cache[rulename] === undefined) {
-            Icon.icon_cache[rulename] = true;
-            let rule;
-            if (url) {
-                rule = `display: block; content: ' '; background-image: url(${url}); background-size: contain; width: 100%; height: 100%; background-repeat: no-repeat; color: white;`;
-            }
-            else {
-                rule = `content: "\\${icon}";`;
-            }
-            css.setRule(rulename, `.${rulename}::before {${rule}}`);
-        }
-        this.addClass(rulename);
-        this.m_icon = icon;
-    }
-    /**
-     * change the icon
-     * @param icon - new icon
-     */
-    set icon(icon) {
-        this._setIcon(icon, true);
-    }
-    get icon() {
-        return this.m_iconName;
-    }
-    _setSVG(url) {
-        const set = (ev) => {
-            //console.log( 'set=', ev.url, 'url=', url );
-            if (ev.url == url) {
-                this.addClass('@svg-icon');
-                this.setContent(HtmlString.from(ev.svg), false);
-                svgLoader.off('loaded', set);
-            }
-        };
-        svgLoader.on('loaded', set);
-        svgLoader.load(url);
-    }
-    /**
-     *
-     */
-    static icon_cache = [];
-}

package/lib/input.d.ts

@@ -1,86 +0,0 @@
-/**
-*  ___  ___ __
-*  \  \/  /  / _
-*   \    /  /_| |_
-*   /    \____   _|
-*  /__/\__\   |_|
-*
-* @file input.ts
-* @author Etienne Cochard
-* @license
-* Copyright (c) 2019-2021 R-libre ingenierie
-*
-* This program is free software; you can redistribute it and/or modify
-* it under the terms of the GNU General Public License as published by
-* the Free Software Foundation; either version 3 of the License, or
-* (at your option) any later version.
-*
-* This program is distributed in the hope that it will be useful,
-* but WITHOUT ANY WARRANTY; without even the implied warranty of
-* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-* GNU General Public License for more details.
-*
-* You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
-**/
-import { Component, CProps, CEventMap } from './component';
-export declare type EditType = 'text' | 'number' | 'email' | 'date' | 'password' | 'file' | 'checkbox' | 'radio';
-export interface ValueHook {
-    get(): any;
-    set(v: any): void;
-}
-export interface InputEventMap extends CEventMap {
-}
-export interface InputProps<P extends InputEventMap = InputEventMap> extends CProps<P> {
-    value?: string;
-    name?: string;
-    type?: EditType;
-    placeHolder?: string;
-    autoFocus?: boolean;
-    readOnly?: boolean;
-    tabIndex?: number | boolean;
-    pattern?: string;
-    uppercase?: boolean;
-    spellcheck?: boolean;
-    value_hook?: ValueHook;
-    min?: number;
-    max?: number;
-}
-/**
- * base class for elements implementing an input
- * CARE derived classes must set this.ui.input
- */
-export declare class Input extends Component<InputProps, InputEventMap> {
-    constructor(props: InputProps);
-    /** @ignore */
-    render(props: InputProps): void;
-    getType(): EditType;
-    /**
-     * return the current editor value
-     */
-    get value(): string;
-    /**
-     * Change the editor value
-     * @param value - new value to set
-     */
-    set value(value: string);
-    getStoreValue(): any;
-    setStoreValue(v: any): void;
-    set readOnly(ro: boolean);
-    /**
-     * select all the text
-     */
-    selectAll(): void;
-    /**
-     * select a part of the text
-     * @param start
-     * @param length
-     */
-    select(start: number, length?: number): void;
-    /**
-     * get the selection as { start, length }
-     */
-    getSelection(): {
-        start: number;
-        length: number;
-    };
-}

package/lib/input.js

@@ -1,172 +0,0 @@
-/**
-*  ___  ___ __
-*  \  \/  /  / _
-*   \    /  /_| |_
-*   /    \____   _|
-*  /__/\__\   |_|
-*
-* @file input.ts
-* @author Etienne Cochard
-* @license
-* Copyright (c) 2019-2021 R-libre ingenierie
-*
-* This program is free software; you can redistribute it and/or modify
-* it under the terms of the GNU General Public License as published by
-* the Free Software Foundation; either version 3 of the License, or
-* (at your option) any later version.
-*
-* This program is distributed in the hope that it will be useful,
-* but WITHOUT ANY WARRANTY; without even the implied warranty of
-* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-* GNU General Public License for more details.
-*
-* You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
-**/
-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.setProp('tag', '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
-        });
-        if (props.uppercase) {
-            this.setStyleValue('textTransform', 'uppercase');
-        }
-    }
-    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/label.d.ts

@@ -1,54 +0,0 @@
-/**
-*  ___  ___ __
-*  \  \/  /  / _
-*   \    /  /_| |_
-*   /    \____   _|
-*  /__/\__\   |_|
-*
-* @file label.ts
-* @author Etienne Cochard
-* @license
-* Copyright (c) 2019-2021 R-libre ingenierie
-*
-* This program is free software; you can redistribute it and/or modify
-* it under the terms of the GNU General Public License as published by
-* the Free Software Foundation; either version 3 of the License, or
-* (at your option) any later version.
-*
-* This program is distributed in the hope that it will be useful,
-* but WITHOUT ANY WARRANTY; without even the implied warranty of
-* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-* GNU General Public License for more details.
-*
-* You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
-**/
-import { Component, CProps } from './component';
-import { HtmlString } from './tools';
-import { IconID } from './icon';
-export interface LabelProps extends CProps {
-    text: string | HtmlString;
-    icon?: IconID;
-    align?: 'left' | 'right' | 'center';
-    multiline?: boolean;
-}
-/**
- * Standard label
- */
-export declare class Label extends Component<LabelProps> {
-    /**
-     * double constructor, from string/html or as usual
-     */
-    constructor(props: LabelProps);
-    constructor(text: string | HtmlString);
-    /** @ignore */
-    render(props: LabelProps): void;
-    /**
-     * change the displayed text
-     * @param text - new text
-     */
-    set text(txt: string | HtmlString);
-    /**
-     *
-     */
-    get text(): string | HtmlString;
-}

package/lib/label.js

@@ -1,86 +0,0 @@
-/**
-*  ___  ___ __
-*  \  \/  /  / _
-*   \    /  /_| |_
-*   /    \____   _|
-*  /__/\__\   |_|
-*
-* @file label.ts
-* @author Etienne Cochard
-* @license
-* Copyright (c) 2019-2021 R-libre ingenierie
-*
-* This program is free software; you can redistribute it and/or modify
-* it under the terms of the GNU General Public License as published by
-* the Free Software Foundation; either version 3 of the License, or
-* (at your option) any later version.
-*
-* This program is distributed in the hope that it will be useful,
-* but WITHOUT ANY WARRANTY; without even the implied warranty of
-* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-* GNU General Public License for more details.
-*
-* You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
-**/
-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.setProp('tag', '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/layout.d.ts

@@ -1,77 +0,0 @@
-/**
-*  ___  ___ __
-*  \  \/  /  / _
-*   \    /  /_| |_
-*   /    \____   _|
-*  /__/\__\   |_|
-*
- * @file layout.ts
- * @author Etienne Cochard
- * @license
- * Copyright (c) 2019-2021 R-libre ingenierie
- *
- *	This program is free software; you can redistribute it and/or modify
- *	it under the terms of the GNU General Public License as published by
- *	the Free Software Foundation; either version 3 of the License, or
- *	(at your option) any later version.
- *
- *	This program is distributed in the hope that it will be useful,
- *	but WITHOUT ANY WARRANTY; without even the implied warranty of
- *	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- *	GNU General Public License for more details.
- *
- *	You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>..
- */
-import { Component, CProps, ComponentContent, Container, ContainerProps, ContainerEventMap } from './component';
-export declare class AbsLayout<P extends ContainerProps = ContainerProps, E extends ContainerEventMap = ContainerEventMap> extends Container<P, E> {
-}
-export declare class HLayout<P extends ContainerProps = ContainerProps, E extends ContainerEventMap = ContainerEventMap> extends Container<P, E> {
-}
-export declare class VLayout<P extends ContainerProps = ContainerProps, E extends ContainerEventMap = ContainerEventMap> extends Container<P, E> {
-}
-interface AutoLayoutProps extends CProps {
-    defaultLayout: 'horizontal' | 'vertical';
-    switchSize: number;
-}
-export declare class AutoLayout extends Container<AutoLayoutProps> {
-    constructor(props: AutoLayoutProps);
-    componentCreated(): void;
-    private _updateLayout;
-}
-export interface GridLayoutProps extends ContainerProps {
-    colSizes?: string;
-    rowSizes?: string;
-    colGap?: number;
-    template?: string[];
-}
-export declare class GridLayout<P extends GridLayoutProps = GridLayoutProps> extends Container<P> {
-    constructor(props: GridLayoutProps);
-    /** @ignore */
-    render(): void;
-}
-export interface TableLayoutProps extends CProps {
-    rows: number;
-    columns: number;
-}
-export declare class TableLayout extends Container<TableLayoutProps> {
-    private m_cells;
-    constructor(props: TableLayoutProps);
-    private _getCell;
-    private _setCell;
-    setCell(row: number, col: number, item: ComponentContent): void;
-    merge(row: number, col: number, rowCount: number, colCount: number): void;
-    setCellWidth(row: number, col: number, width?: number): void;
-    setCellHeight(row: number, col: number, height?: number): void;
-    setCellClass(row: number, col: number, cls: string): void;
-    setColClass(col: any, cls: any): void;
-    setRowClass(row: any, cls: any): void;
-    getCell(row: any, col: any): ComponentContent;
-    render(): void;
-}
-interface ScrollViewProps extends CProps {
-}
-export declare class ScrollView extends Component<ScrollViewProps> {
-    constructor(props: ScrollViewProps);
-    setContent(content: ComponentContent): void;
-}
-export {};