x4js 1.4.4 → 1.4.7

package/lib/styles.js

@@ -0,0 +1,268 @@
+"use strict";
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|
+*  /__/ \__\   |_|
+*
+* @file styles.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/>.
+**/
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComputedStyle = exports.CSSParser = exports.Stylesheet = void 0;
+const tools_1 = require("./tools");
+/**
+ *  -- [ @STYLESHEET ] -----------------------------------------------------------------
+ */
+class Stylesheet {
+    m_sheet;
+    m_rules = new Map();
+    constructor() {
+        function getStyleSheet(name) {
+            for (let i = 0; i < document.styleSheets.length; i++) {
+                let sheet = document.styleSheets[i];
+                if (sheet.title === name) {
+                    return sheet;
+                }
+            }
+        }
+        this.m_sheet = getStyleSheet('@dynamic-css');
+        if (!this.m_sheet) {
+            let dom = document.createElement('style');
+            dom.setAttribute('id', '@dynamic-css');
+            document.head.appendChild(dom);
+            this.m_sheet = dom.sheet;
+        }
+    }
+    /**
+     * add a new rule to the style sheet
+     * @param {string} name - internal rule name
+     * @param {string} definition - css definition of the rule
+     * @example
+     * setRule('xbody', "body { background-color: #ff0000; }" );
+     */
+    setRule(name, definition) {
+        if ((0, tools_1.isString)(definition)) {
+            let index = this.m_rules.get(name);
+            if (index !== undefined) {
+                this.m_sheet.deleteRule(index);
+            }
+            else {
+                index = this.m_sheet.cssRules.length;
+            }
+            this.m_rules.set(name, this.m_sheet.insertRule(definition, index));
+        }
+        else {
+            let idx = 1;
+            for (let r in definition) {
+                let rule = r + " { ", css = definition[r];
+                for (let i in css) {
+                    let values = css[i]; // this is an array !
+                    for (let j = 0; j < values.length; j++) {
+                        rule += i + ": " + values[j] + "; ";
+                    }
+                }
+                rule += '}';
+                console.log(rule);
+                this.setRule(name + '--' + idx, rule);
+                idx++;
+            }
+        }
+    }
+    /**
+     * return the style variable value
+     * @param name - variable name without '--'
+     * @example
+     * ```
+     * let color = Component.getCss( ).getVar( 'button-color' );
+     * ```
+     */
+    static getVar(name) {
+        if (!Stylesheet.doc_style) {
+            Stylesheet.doc_style = getComputedStyle(document.documentElement);
+        }
+        return Stylesheet.doc_style.getPropertyValue('--' + name); // #999999
+    }
+    static guid = 1;
+    static doc_style;
+}
+exports.Stylesheet = Stylesheet;
+/**
+ *  -- [ @CSSPARSER ] -----------------------------------------------------------------
+ *
+ * adaptation of jss-for-node-js
+ */
+class CSSParser {
+    result = {};
+    parse(css) {
+        this.result = {};
+        this.parse_json('', css);
+        return CSSParser.mk_string(this.result);
+    }
+    static mk_string(rules) {
+        // output result:	
+        let ret = '';
+        for (let a in rules) {
+            let css = rules[a];
+            ret += a + " { ";
+            for (let i in css) {
+                let values = css[i]; // this is an array !
+                for (let j = 0; j < values.length; j++) {
+                    ret += i + ": " + values[j] + "; ";
+                }
+            }
+            ret += "}\n";
+        }
+        return ret;
+    }
+    parse_json(scope, css) {
+        if (scope && !this.result[scope]) {
+            this.result[scope] = {};
+        }
+        for (let property in css) {
+            let value = css[property];
+            if ((0, tools_1.isArray)(value)) {
+                let values = value;
+                for (let i = 0; i < values.length; i++) {
+                    this.addProperty(scope, property, values[i]);
+                }
+            }
+            /*else if (value instanceof Color) {
+                this.addProperty(scope, property, value.toString());
+            }*/
+            else {
+                switch (typeof (value)) {
+                    case "number": {
+                        this.addProperty(scope, property, value);
+                        break;
+                    }
+                    case "string": {
+                        this.addProperty(scope, property, value);
+                        break;
+                    }
+                    case "object": {
+                        this.parse_json(this.makeSelectorName(scope, property), value);
+                        break;
+                    }
+                    default: {
+                        console.error("ignoring unknown type " + typeof (value) + " in property " + property);
+                        break;
+                    }
+                }
+            }
+        }
+    }
+    makePropertyName(n) {
+        return (0, tools_1.pascalCase)(n);
+    }
+    makeSelectorName(scope, name) {
+        let snames = [];
+        let names = name.split(/\s*,\s*/);
+        let scopes = scope.split(/\s*,\s*/);
+        for (let s = 0; s < scopes.length; s++) {
+            let scope = scopes[s];
+            for (let i = 0; i < names.length; i++) {
+                let name = names[i], sub = false;
+                if (name.charAt(0) == "&") {
+                    name = name.substr(1);
+                    sub = true;
+                }
+                if (name.charAt(0) === '%') {
+                    name = '.o-' + name.substr(1);
+                }
+                if (sub) {
+                    snames.push(scope + name);
+                }
+                else {
+                    snames.push(scope ? scope + " " + name : name);
+                }
+            }
+        }
+        return snames.join(", ");
+    }
+    addProperty(scope, property, value) {
+        let properties = property.split(/\s*,\s*/);
+        for (let i = 0; i < properties.length; i++) {
+            let property = this.makePropertyName(properties[i]);
+            if (this.result[scope][property]) {
+                this.result[scope][property].push(value);
+            }
+            else {
+                this.result[scope][property] = [value];
+            }
+            let specials = {
+                "box-shadow": [
+                    "-moz-box-shadow",
+                    "-webkit-box-shadow"
+                ],
+                "border-radius": [
+                    "-moz-border-radius",
+                    "-webkit-border-radius"
+                ],
+                "border-radius-topleft": [
+                    "-moz-border-radius-topleft",
+                    "-webkit-border-top-left-radius"
+                ],
+                "border-radius-topright": [
+                    "-moz-border-radius-topright",
+                    "-webkit-border-top-right-radius"
+                ],
+                "border-radius-bottomleft": [
+                    "-moz-border-radius-bottomleft",
+                    "-webkit-border-bottom-left-radius"
+                ],
+                "border-radius-bottomright": [
+                    "-moz-border-radius-bottomright",
+                    "-webkit-border-bottom-right-radius"
+                ]
+            };
+            let browser_specials = specials[property];
+            for (let j = 0; browser_specials && j < browser_specials.length; j++) {
+                this.addProperty(scope, browser_specials[j], value);
+            }
+        }
+    }
+}
+exports.CSSParser = CSSParser;
+class ComputedStyle {
+    m_style;
+    constructor(style) {
+        this.m_style = style;
+    }
+    /**
+     * return the raw value
+     */
+    value(name) {
+        name = (0, tools_1.pascalCase)(name);
+        return this.m_style[name];
+    }
+    /**
+     * return the interpreted value
+     */
+    parse(name) {
+        name = (0, tools_1.pascalCase)(name);
+        return parseInt(this.m_style[name]);
+    }
+    /**
+     *
+     */
+    get style() {
+        return this.m_style;
+    }
+}
+exports.ComputedStyle = ComputedStyle;

package/lib/svgcomponent.js

@@ -1,3 +1,4 @@
+"use strict";
 /**
 *  ___   ___ __
 *  \  \_/  /  / _
@@ -22,7 +23,9 @@
 *
 * 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';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SVGComponent = exports.SVGPathBuilder = void 0;
+const component_1 = require("./component");
 // degrees to radian
 function d2r(d) {
     return d * Math.PI / 180.0;
@@ -284,7 +287,7 @@ class SVGGradient extends SVGItem {
 /**
  *
  */
-export class SVGPathBuilder {
+class SVGPathBuilder {
     m_items;
     constructor() {
         this.m_items = [];
@@ -336,7 +339,8 @@ export class SVGPathBuilder {
         return result.join('\n');
     }
 }
-export class SVGComponent extends Component {
+exports.SVGPathBuilder = SVGPathBuilder;
+class SVGComponent extends component_1.Component {
     constructor(props) {
         super(props);
         this.setProp('tag', 'svg');
@@ -348,3 +352,4 @@ export class SVGComponent extends Component {
         this.setContent(props.path);
     }
 }
+exports.SVGComponent = SVGComponent;

package/lib/tabbar.js

@@ -1,3 +1,4 @@
+"use strict";
 /**
 *  ___   ___ __
 *  \  \_/  /  / _
@@ -11,10 +12,12 @@
 *
 * @description Tab
 **/
-import { Container } from './component';
-import { Button } from './button';
-import { EvChange } from './x4_events';
-export class TabBar extends Container {
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabBar = void 0;
+const component_1 = require("./component");
+const button_1 = require("./button");
+const x4_events_1 = require("./x4_events");
+class TabBar extends component_1.Container {
     m_pages;
     m_curPage;
     constructor(props) {
@@ -40,7 +43,7 @@ export class TabBar extends Container {
     render() {
         let buttons = [];
         this.m_pages.forEach(p => {
-            p.btn = new Button({ cls: p === this.m_curPage ? 'selected' : '', text: p.title, icon: p.icon, click: () => this._select(p) });
+            p.btn = new button_1.Button({ cls: p === this.m_curPage ? 'selected' : '', text: p.title, icon: p.icon, click: () => this._select(p) });
             buttons.push(p.btn);
         });
         this.setContent(buttons);
@@ -57,10 +60,11 @@ export class TabBar extends Container {
             this.m_curPage.page.hide();
         }
         this.m_curPage = p;
-        this.signal('change', EvChange(p ? p.id : null));
+        this.signal('change', (0, x4_events_1.EvChange)(p ? p.id : null));
         if (this.dom && this.m_curPage && this.m_curPage.page) {
             this.m_curPage.btn.addClass('selected');
             this.m_curPage.page.show();
         }
     }
 }
+exports.TabBar = TabBar;

package/lib/tabview.js

@@ -1,3 +1,4 @@
+"use strict";
 /**
 *  ___   ___ __
 *  \  \_/  /  / _
@@ -22,13 +23,15 @@
 *
 * 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 { HLayout } from './layout';
-import { Button } from './button';
-import { CardView } from './cardview';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabView = void 0;
+const layout_1 = require("./layout");
+const button_1 = require("./button");
+const cardview_1 = require("./cardview");
 /**
  * Standard TabView class
  */
-export class TabView extends CardView {
+class TabView extends cardview_1.CardView {
     m_tab_selector;
     m_menu;
     constructor(props) {
@@ -53,7 +56,7 @@ export class TabView extends CardView {
             }
         });
         if (this.m_tab_selector) {
-            pages.unshift(new HLayout({
+            pages.unshift(new layout_1.HLayout({
                 cls: '@tab-switch',
                 content: tabs
             }));
@@ -63,7 +66,7 @@ export class TabView extends CardView {
     _updateSelector() {
     }
     _prepareSelector(card) {
-        return new Button({
+        return new button_1.Button({
             cls: '@tab-btn',
             text: card.title,
             icon: card.icon,
@@ -77,3 +80,4 @@ export class TabView extends CardView {
         }
     }
 }
+exports.TabView = TabView;

package/lib/textarea.js

@@ -1,3 +1,4 @@
+"use strict";
 /**
 *  ___   ___ __
 *  \  \_/  /  / _
@@ -22,10 +23,12 @@
 *
 * 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 { EvChange } from './x4_events';
-import { asap } from './tools';
-export class TextArea extends Component {
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextArea = void 0;
+const component_1 = require("./component");
+const x4_events_1 = require("./x4_events");
+const tools_1 = require("./tools");
+class TextArea extends component_1.Component {
     constructor(props) {
         super(props);
         this.mapPropEvents(props, 'change');
@@ -56,7 +59,7 @@ export class TextArea extends Component {
             this.setProp('autoGrow', true);
             this.setAttribute('rows', this._calcHeight(props.text));
             this.setDomEvent('keydown', () => {
-                asap(() => this._updateHeight());
+                (0, tools_1.asap)(() => this._updateHeight());
             });
         }
         // avoid going to next element on enter
@@ -67,7 +70,7 @@ export class TextArea extends Component {
         this.setProp('tag', 'textarea');
     }
     _change() {
-        this.emit('change', EvChange(this.value));
+        this.emit('change', (0, x4_events_1.EvChange)(this.value));
     }
     componentCreated() {
         this.value = this.m_props.text;
@@ -117,3 +120,4 @@ export class TextArea extends Component {
         this.value = value;
     }
 }
+exports.TextArea = TextArea;

package/lib/textedit.js

@@ -1,3 +1,4 @@
+"use strict";
 /**
 *  ___   ___ __
 *  \  \_/  /  / _
@@ -22,22 +23,24 @@
 *
 * 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, EvFocus } from './component';
-import { Input } from './input';
-import { Button } from './button';
-import { HLayout } from './layout';
-import { Label } from './label';
-import { PopupCalendar } from './calendar';
-import { sprintf, parseIntlDate, formatIntlDate } from './tools';
-import { Tooltip } from './tooltips';
-import { EvClick, EvChange } from './x4_events';
-import { _tr } from './i18n';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextEdit = void 0;
+const component_1 = require("./component");
+const input_1 = require("./input");
+const button_1 = require("./button");
+const layout_1 = require("./layout");
+const label_1 = require("./label");
+const calendar_1 = require("./calendar");
+const tools_1 = require("./tools");
+const tooltips_1 = require("./tooltips");
+const x4_events_1 = require("./x4_events");
+const i18n_1 = require("./i18n");
 /** @ignore */
 const reEmail = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
 /**
  * TextEdit is a single line editor, it can have a label and an error descriptor.
  */
-export class TextEdit extends Component {
+class TextEdit extends component_1.Component {
     m_cal_popup;
     m_ui_input;
     m_error_tip;
@@ -94,18 +97,18 @@ export class TextEdit extends Component {
             };
             eprops.value_hook = props.value_hook ?? def_hook;
         }
-        this.m_ui_input = new Input(eprops);
+        this.m_ui_input = new input_1.Input(eprops);
         //	button
         let button = undefined;
         if (props.icon) {
-            button = new Button({
+            button = new button_1.Button({
                 icon: props.icon,
                 click: () => this._btnClick(),
                 tabIndex: false
             });
         }
         else if (props.type == 'date') {
-            button = new Button({
+            button = new button_1.Button({
                 cls: 'gadget',
                 icon: 'cls(far fa-calendar-days)',
                 tabIndex: false,
@@ -140,7 +143,7 @@ export class TextEdit extends Component {
                 top = true;
                 flex = 1;
             }
-            label = new Label({
+            label = new label_1.Label({
                 ref: 'label',
                 tag: 'label',
                 cls: 'label1' + (props.label ? '' : ' @hidden'),
@@ -155,7 +158,7 @@ export class TextEdit extends Component {
             this.addClass('@vlayout vertical');
             this.setContent([
                 label,
-                new HLayout({ width, content: [this.m_ui_input, ...gadgets] })
+                new layout_1.HLayout({ width, content: [this.m_ui_input, ...gadgets] })
             ]);
         }
         else {
@@ -174,7 +177,7 @@ export class TextEdit extends Component {
         super.disable();
     }
     _btnClick() {
-        this.emit('click', EvClick(this.value));
+        this.emit('click', (0, x4_events_1.EvClick)(this.value));
     }
     /**
      * select the value format for input/output on textedit of type date
@@ -191,23 +194,23 @@ export class TextEdit extends Component {
         return this.m_ui_input.getStoreValue();
     }
     _date_get_hook() {
-        let date = parseIntlDate(this.value);
+        let date = (0, tools_1.parseIntlDate)(this.value);
         let props = this.m_props;
         if (props.format == 'native') {
             return date;
         }
         else {
-            return date ? formatIntlDate(date, props.format) : null;
+            return date ? (0, tools_1.formatIntlDate)(date, props.format) : null;
         }
     }
     _date_set_hook(dte) {
         let props = this.m_props;
         if (props.format == 'native') {
-            this.value = formatIntlDate(dte);
+            this.value = (0, tools_1.formatIntlDate)(dte);
         }
         else if (dte) {
-            let date = parseIntlDate(dte, props.format);
-            this.value = formatIntlDate(date);
+            let date = (0, tools_1.parseIntlDate)(dte, props.format);
+            this.value = (0, tools_1.formatIntlDate)(date);
         }
         else {
             this.value = '';
@@ -215,7 +218,7 @@ export class TextEdit extends Component {
     }
     showError(text) {
         if (!this.m_error_tip) {
-            this.m_error_tip = new Tooltip({ cls: 'error' });
+            this.m_error_tip = new tooltips_1.Tooltip({ cls: 'error' });
             document.body.appendChild(this.m_error_tip._build());
         }
         let rc = this.m_ui_input.getBoundingRect();
@@ -272,14 +275,14 @@ export class TextEdit extends Component {
      */
     _change() {
         let value = this.m_ui_input.value;
-        this.emit('change', EvChange(value));
+        this.emit('change', (0, x4_events_1.EvChange)(value));
     }
     /**
      * getting focus
      */
     _focus() {
         this.clearError();
-        this.emit('focus', EvFocus(true));
+        this.emit('focus', (0, component_1.EvFocus)(true));
     }
     /**
      * loosing focus
@@ -287,7 +290,7 @@ export class TextEdit extends Component {
      */
     _blur() {
         this._validate(this.m_ui_input.value);
-        this.emit('focus', EvFocus(false));
+        this.emit('focus', (0, component_1.EvFocus)(false));
     }
     /**
      * todo: should move into Input
@@ -300,7 +303,7 @@ export class TextEdit extends Component {
         let props = this.m_props;
         let update = false;
         if (props.required && value.length == 0) {
-            this.showError(_tr.global.required_field);
+            this.showError(i18n_1._tr.global.required_field);
             return false;
         }
         if (value != '') {
@@ -308,20 +311,20 @@ export class TextEdit extends Component {
             if (pattern) {
                 let re = new RegExp(pattern);
                 if (re && !re.test(value)) {
-                    this.showError(_tr.global.invalid_format);
+                    this.showError(i18n_1._tr.global.invalid_format);
                     return false;
                 }
             }
             if (props.type == 'email') {
                 if (!reEmail.test(value.toLowerCase())) {
-                    this.showError(_tr.global.invalid_email);
+                    this.showError(i18n_1._tr.global.invalid_email);
                     return false;
                 }
             }
             else if (props.type == 'number') {
                 const v = parseFloat(value);
                 if (isNaN(v)) {
-                    this.showError(_tr.global.invalid_number);
+                    this.showError(i18n_1._tr.global.invalid_number);
                     return false;
                 }
                 let min = parseFloat(this.m_ui_input.getAttribute('min'));
@@ -360,12 +363,12 @@ export class TextEdit extends Component {
             date = new Date();
         }
         else {
-            date = parseIntlDate(value);
+            date = (0, tools_1.parseIntlDate)(value);
             if (!date) {
-                throw sprintf(_tr.global.invalid_date, _tr.global.date_format);
+                throw (0, tools_1.sprintf)(i18n_1._tr.global.invalid_date, i18n_1._tr.global.date_format);
             }
         }
-        return formatIntlDate(date);
+        return (0, tools_1.formatIntlDate)(date);
     }
     //onKeyDown( e ) {
     //    if( this.readOnly ) {
@@ -387,9 +390,9 @@ export class TextEdit extends Component {
     //}
     _showDatePicker(btn) {
         if (!this.m_cal_popup) {
-            this.m_cal_popup = new PopupCalendar({
+            this.m_cal_popup = new calendar_1.PopupCalendar({
                 change: (ev) => {
-                    this.value = formatIntlDate(ev.value);
+                    this.value = (0, tools_1.formatIntlDate)(ev.value);
                     this.m_cal_popup.close();
                 }
             });
@@ -404,3 +407,4 @@ export class TextEdit extends Component {
         return this.m_props.type;
     }
 }
+exports.TextEdit = TextEdit;