x4js 1.4.52 → 1.5.0

package/lib/esm/image.d.ts

@@ -0,0 +1,55 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|
+*  /__/\__\   |_|
+*
+* @file image.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, CProps } from './component';
+interface ImageProps extends CProps {
+    src: string;
+    alt?: string;
+    lazy?: boolean;
+    alignment?: 'fill' | 'contain' | 'cover' | 'scale-down' | 'none';
+}
+/**
+ * Standard image class
+ */
+export declare class Image extends Component<ImageProps> {
+    protected m_created: boolean;
+    protected m_lazysrc: string;
+    constructor(props: ImageProps);
+    /** @ignore */
+    render(): void;
+    /**
+     * change the image
+     * @param src - image path
+     */
+    setImage(src: string, force?: boolean): void;
+    private _update_image;
+    private static lazy_images_waiting;
+    private static lazy_image_timer;
+    private static lazyWatch;
+}
+export {};

package/lib/esm/image.js

@@ -0,0 +1,154 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|
+*  /__/\__\   |_|
+*
+* @file image.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 { x4document } from './x4dom';
+import { Component } from './component';
+const emptyImageSrc = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
+function _isStaticImage(src) {
+    return src.substr(0, 5) == 'data:';
+}
+/**
+ * Standard image class
+ */
+export class Image extends Component {
+    m_created;
+    m_lazysrc; // expected 
+    constructor(props) {
+        super(props);
+        this.m_created = false;
+        this.m_props.lazy = props.lazy === false ? false : true;
+        this.m_props.alt = props.alt;
+        if (props.lazy !== false) {
+            this.m_lazysrc = props.src;
+            props.src = emptyImageSrc;
+        }
+        this.setDomEvent('create', () => {
+            if (props.lazy) {
+                this.setImage(this.m_lazysrc, true);
+            }
+        });
+    }
+    /** @ignore */
+    render() {
+        let mp = this.m_props;
+        const img = new Component({
+            tag: 'img',
+            attrs: {
+                draggable: false,
+                alt: mp.alt ?? '',
+                decoding: mp.lazy ? 'async' : undefined,
+            },
+            style: {
+                objectFit: mp.alignment ? mp.alignment : undefined
+            }
+        });
+        this.setContent(img);
+    }
+    /**
+     * change the image
+     * @param src - image path
+     */
+    setImage(src, force) {
+        if (!src) {
+            src = emptyImageSrc;
+        }
+        if (!this.m_props.lazy) {
+            this.m_props.src = src;
+            this.m_lazysrc = src;
+            if (this.dom) {
+                this.dom.firstChild.setAttribute('src', src);
+            }
+        }
+        else if (force || this.m_lazysrc != src) {
+            if (_isStaticImage(src)) {
+                // not to download -> direct display
+                this.m_props.src = src;
+                this.m_lazysrc = src;
+                if (this.dom) {
+                    this.dom.firstChild.setAttribute('src', this.m_props.src);
+                }
+            }
+            else {
+                // clear current image while waiting
+                this.m_props.src = emptyImageSrc;
+                if (this.dom) {
+                    this.dom.firstChild.setAttribute('src', this.m_props.src);
+                }
+                this.m_lazysrc = src;
+                if (this.dom) {
+                    this._update_image();
+                }
+            }
+        }
+    }
+    _update_image() {
+        console.assert(!!this.dom);
+        if (this.m_lazysrc && !_isStaticImage(this.m_lazysrc)) {
+            // we do not push Components in a static array...
+            Image.lazy_images_waiting.push({ dom: this.dom, src: this.m_lazysrc });
+            if (Image.lazy_image_timer === undefined) {
+                Image.lazy_image_timer = setInterval(Image.lazyWatch, 10);
+            }
+        }
+    }
+    static lazy_images_waiting = [];
+    static lazy_image_timer = undefined;
+    static lazyWatch() {
+        let newList = [];
+        let done = 0;
+        Image.lazy_images_waiting.forEach((el) => {
+            let dom = el.dom, src = el.src;
+            // skip deleted elements
+            if (!dom || dom.offsetParent === null) {
+                // do not append to newList
+                return;
+            }
+            let rc = dom.getBoundingClientRect();
+            // if it is visible & inserted inside the document
+            if (!done && dom.offsetParent !== null &&
+                rc.bottom >= 0 && rc.right >= 0 &&
+                rc.top <= (window.innerHeight || x4document.documentElement.clientHeight) &&
+                rc.left <= (window.innerWidth || x4document.documentElement.clientWidth)) {
+                // ok, we load the image
+                let img = dom.firstChild;
+                img.setAttribute('src', src);
+                done++;
+            }
+            else {
+                // still not visible: may be next time
+                newList.push(el);
+            }
+        });
+        Image.lazy_images_waiting = newList;
+        // no more elements to watch...
+        if (newList.length == 0) {
+            clearInterval(Image.lazy_image_timer);
+            Image.lazy_image_timer = undefined;
+        }
+    }
+}

package/lib/esm/index.d.ts

@@ -0,0 +1,83 @@
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|
+*  /__/ \__\   |_|
+*
+* @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 "./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 "./spreadsheet";
+export * from "./styles";
+export * from "./svgcomponent";
+export * from "./tabbar";
+export * from "./tabview";
+export * from "./textarea";
+export * from "./textedit";
+export * from "./toaster";
+export * from "./tools";
+export * from "./tooltips";
+export * from "./treeview";
+export * from "./x4events";
+export * from "./x4react";
+export * from "./version";

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/esm/input.d.ts

@@ -0,0 +1,91 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|
+*  /__/\__\   |_|
+*
+* @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, 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;
+    autosel?: boolean;
+}
+/**
+ * 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 → 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.d.ts

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