x4js 1.5.17 → 1.5.20

package/lib/esm/i18n.js

@@ -1,257 +0,0 @@
-/**
-*  ___  ___ __
-*  \  \/  /  / _
-*   \    /  /_| |_
-*   /    \____   _|
-*  /__/\__\   |_|
-*
-* @file i18n.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.
-**/
-const sym_lang = Symbol("i18n");
-let languages = {};
-/**
- * create a new language
- * @param name language name (code)
- * @param base base language (code)
- * @example:
- * ```js
- * createLanguage( 'en', 'fr' );
- * ```
- */
-export function createLanguage(name, base) {
-    languages[name] = {
-        name,
-        base,
-        src_translations: {},
-        translations: {}
-    };
-}
-/**
- * check if the given language is known
- * @param name language name (code)
- */
-export function isLanguage(name) {
-    return languages[name] !== undefined;
-}
-/**
- * build the language with given fragments
- * @param name language name (code)
- * @param parts misc elements that make the language
- * @example:
- * ```js
- * createLanguage( 'en', 'fr' );
- * const app = {
- * 	clients: {
- * 		translation1: "hello",
- *  }
- * }
- * addTranslation( 'en', app );
- * ```
-  */
-export function addTranslation(name, ...parts) {
-    if (!isLanguage(name)) {
-        return;
-    }
-    const lang = languages[name];
-    parts.forEach(p => {
-        _patch(lang.src_translations, p, lang.base);
-    });
-    lang.translations = _mk_proxy(lang.src_translations, lang.base, true);
-}
-/**
- *
- */
-function _patch(obj, by, def) {
-    for (let n in by) {
-        if (obj[n] instanceof Object) {
-            _patch(obj[n], by[n], def);
-        }
-        else {
-            obj[n] = by[n];
-            obj[n] = _mk_proxy(obj[n], def, false);
-        }
-    }
-    return obj;
-}
-/**
- * when we ask for _tr.xxx
- * reqpath is set to [xxx]
- *
- * then when we try to get _tr.xxx.yyy
- * reqpath is [xxx,yyy]
- * if yyy is not found, we try with base langage for the full reqpath
- * until no base found
- */
-let req_path;
-/**
- *
- */
-function _findBaseTrans(base) {
-    while (base) {
-        const lang = languages[base];
-        let trans = lang.translations;
-        let value;
-        for (const p of req_path) {
-            value = trans[p];
-            if (value === undefined) {
-                break;
-            }
-            trans = value;
-        }
-        if (value !== undefined) {
-            return trans;
-        }
-        base = lang.base;
-    }
-    console.error("I18N error: unable to find", '_tr.' + req_path.join('.'));
-    return undefined;
-}
-/**
- *
- */
-function _mk_proxy(obj, base, root) {
-    return new Proxy(obj, {
-        get: (target, prop) => {
-            if (root) {
-                req_path = [prop];
-            }
-            else {
-                req_path.push(prop);
-            }
-            let value = target[prop];
-            if (value === undefined && base) {
-                value = _findBaseTrans(base);
-                // keep it for later
-                target[prop] = value;
-            }
-            return value;
-        }
-    });
-}
-export let _tr = {};
-/**
- * select the given language as current
- * @param name laguage name (code)
- */
-export function selectLanguage(name) {
-    if (!isLanguage(name)) {
-        return;
-    }
-    _tr = languages[name].translations;
-    _tr[sym_lang] = name;
-}
-/**
- *
- */
-export function getCurrentLanguage() {
-    return _tr[sym_lang];
-}
-/**
- *
- */
-export function getAvailableLanguages() {
-    return Object.keys(languages);
-}
-/**
- * language definition
- * x4 specific strings
- */
-let fr = {
-    global: {
-        ok: 'OK',
-        cancel: 'Annuler',
-        ignore: 'Ignorer',
-        yes: 'Oui',
-        no: 'Non',
-        open: 'Ouvrir',
-        new: 'Nouveau',
-        delete: 'Supprimer',
-        close: 'Fermer',
-        save: 'Enregistrer',
-        search: 'Rechercher',
-        search_tip: 'Saisissez le texte à rechercher. <b>Enter</b> pour lancer la recherche. <b>Esc</b> pour annuler.',
-        required_field: "information requise",
-        invalid_format: "format invalide",
-        invalid_email: 'adresse mail invalide',
-        invalid_number: 'valeur numérique invalide',
-        diff_date_seconds: '{0} secondes',
-        diff_date_minutes: '{0} minutes',
-        diff_date_hours: '{0} heures',
-        invalid_date: 'Date non reconnue ({0})',
-        empty_list: 'Liste vide',
-        date_input_formats: 'd/m/y|d.m.y|d m y|d-m-y|dmy',
-        date_format: 'D/M/Y',
-        day_short: ['dim', 'lun', 'mar', 'mer', 'jeu', 'ven', 'sam'],
-        day_long: ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'],
-        month_short: ['jan', 'fév', 'mar', 'avr', 'mai', 'jun', 'jui', 'aoû', 'sep', 'oct', 'nov', 'déc'],
-        month_long: ['janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre'],
-        property: 'Propriété',
-        value: 'Valeur',
-        err_403: `Vous n'avez pas les droits suffisants pour effectuer cette action`,
-        copy: 'Copier',
-        cut: 'Couper',
-        paste: 'Coller'
-    }
-};
-/** @ignore */
-let en = {
-    global: {
-        ok: 'OK',
-        cancel: 'Cancel',
-        ignore: 'Ignore',
-        yes: 'Yes',
-        no: 'No',
-        open: 'Open',
-        new: 'New',
-        delete: 'Delete',
-        close: 'Close',
-        save: 'Save',
-        search: 'Search',
-        search_tip: 'Type in the text to search. <b>Enter</b> to start the search. <b>Esc</b> to cancel.',
-        required_field: "missing information",
-        invalid_format: "invalid format",
-        invalid_email: 'invalid email address',
-        invalid_number: 'bad numeric value',
-        diff_date_seconds: '{0} seconds',
-        diff_date_minutes: '{0} minutes',
-        diff_date_hours: '{0} hours',
-        invalid_date: 'Unrecognized date({0})',
-        empty_list: 'Empty list',
-        date_input_formats: 'm/d/y|m.d.y|m d y|m-d-y|mdy',
-        date_format: 'M/D/Y',
-        day_short: ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'],
-        day_long: ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'],
-        month_short: ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jui', 'aug', 'sep', 'oct', 'nov', 'dec'],
-        month_long: ['january', 'february', 'march', 'april', 'mau', 'june', 'jully', 'august', 'september', 'october', 'november', 'december'],
-        property: 'Property',
-        value: 'Value',
-        err_403: `You do not have sufficient rights to do that action`,
-        copy: 'Copy',
-        cut: 'Cut',
-        paste: 'Paste'
-    }
-};
-createLanguage('fr', null);
-addTranslation('fr', fr);
-createLanguage('en', 'fr');
-addTranslation('en', en);
-selectLanguage('fr'); // by default

package/lib/esm/icon.js

@@ -1,261 +0,0 @@
-/**
-*  ___  ___ __
-*  \  \/  /  / _
-*   \    /  /_| |_
-*   /    \____   _|
-*  /__/\__\   |_|
-*
-* @file icon.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 { Stylesheet } from './styles';
-import { HtmlString, isString } from './tools';
-import { BasicEvent, EventSource } from './x4events';
-export function EvLoaded(url, svg, context = null) {
-    return BasicEvent({ url, svg, context });
-}
-function trimQuotes(str) {
-    const l = str.length;
-    if (str[0] == '"' && str[l - 1] == '"') {
-        str = str.substring(1, l - 1);
-        str = str.replaceAll('\\"', "'");
-        return str;
-    }
-    return str;
-}
-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) => {
-                // shortcut
-                if (url.substring(0, 24) == "data:image/svg+xml;utf8,") {
-                    const svg = url.substring(24);
-                    this.svgs.set(url, svg);
-                    this.signal('loaded', EvLoaded(url, svg));
-                }
-                else {
-                    const r = await fetch(url);
-                    if (r.ok) {
-                        const svg = await r.text();
-                        // check response, must be svg
-                        //TODO: find better
-                        if (!svg.startsWith("<svg") && !svg.startsWith('<?xml')) {
-                            console.error("svg loading error: ", svg);
-                            this.signal('loaded', EvLoaded(url, ""));
-                        }
-                        else {
-                            this.svgs.set(url, svg);
-                            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) {
-        if (isString(props)) {
-            super({ icon: props });
-        }
-        else {
-            super(props);
-        }
-        this._setIcon(this.m_props.icon, false);
-        if (this.m_props.size) {
-            this.setStyleValue('fontSize', this.m_props.size);
-        }
-    }
-    _setIcon(icon, remove_old) {
-        if (!icon) {
-            this.m_iconName = '';
-            return;
-        }
-        this.removeClass('@svg');
-        //	todo: deprecated
-        let name, url;
-        if (typeof (icon) === 'number') {
-            icon = icon.toString(16);
-            name = icon;
-            console.error("deprecation error: invalid icon name");
-        }
-        else {
-            // var( <var-name> )
-            //	
-            //	in the .css
-            //  --------------------------
-            //	:root {
-            //		--chevron-up: data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M0 96C0 78.33 14.33 64 32 64H416C433.7 64 448 78.33 448 96C448 113.7 433.7 128 416 128H32C14.33 128 0 113.7 0 96z"/></svg>';
-            //	}
-            //
-            //	var( "--chevron-up" )
-            const reVar = /\s*var\s*\(\s*(.+)\s*\)\s*/gi;
-            let match_var = reVar.exec(icon);
-            while (match_var) {
-                const varname = match_var[1].trim();
-                icon = Stylesheet.getVar(varname).trim();
-                if (icon == '' || icon === undefined) {
-                    console.error(`icon: unable to find variable named '${varname}'`);
-                    return;
-                }
-                else {
-                    icon = trimQuotes(icon);
-                }
-                match_var = reVar.exec(icon);
-            }
-            // <svg ...>
-            if (icon.startsWith('<svg')) {
-                this._setSVG('data:image/svg+xml;utf8,' + icon);
-                return;
-            }
-            //	svg( <svg-filename> )	-> 	svg( "mysvgfile.svg" )	
-            //	<svg-filename>.svg 		->  "mysvgfile.svg"
-            const reSvg = /\s*svg\s*\(\s*(.+)\s*\)\s*/gi;
-            const reSvg2 = /(.*\.svg)$/gi;
-            let match_svg = reSvg.exec(icon) || reSvg2.exec(icon);
-            if (match_svg) {
-                const url = match_svg[1].trim();
-                this._setSVG(url);
-                return;
-            }
-            //	data( <direct> )
-            //	data( "data:image/svg+xml;utf8,<svg...></svg>" )
-            const reSvg4 = /^\s*(data\:image\/.+)\s*$/gi;
-            let match_dta = reSvg4.exec(icon);
-            if (match_dta) {
-                this._setSVG(match_dta[1]);
-                return;
-            }
-            //	cls( "fas fa-angle-up" )
-            //
-            const reCls = /\s*cls\s*\(\s*(.+)\s*\)\s*/gi;
-            let match_cls = reCls.exec(icon);
-            if (match_cls) {
-                const classes = match_cls[1].trim();
-                this.addClass(classes);
-                return;
-            }
-            //	url( "www.google.com" )
-            //
-            const reUrl = /\s*url\s*\(\s*(.+)\s*\)\s*/gi;
-            let match_url = reUrl.exec(icon);
-            if (match_url) {
-                url = trimQuotes(match_url[1].trim());
-                // this value is escaped				
-                url = url.replaceAll("\\", "");
-                this._setSVG(url);
-                return;
-            }
-            else {
-                // todo: deprecated
-                console.error("deprecation error: invalid icon name");
-                name = icon;
-                icon = Stylesheet.getVar('icon-' + icon);
-                if (icon == '' || icon === undefined) {
-                    // name your icon 'icon-xxx'
-                    // ex:
-                    // :root { --icon-zoom-p: f00e; }
-                    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);
-    }
-    /**
-     * todo: try to extract viewbox
-     */
-    _setSVGPath(pth) {
-        this.addClass('@svg-icon');
-        this.setContent(HtmlString.from(`<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="${pth}/></svg>`), false);
-    }
-    /**
-     *
-     */
-    static icon_cache = [];
-}

package/lib/esm/image.js

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