x4js 1.4.52 → 1.4.53

package/lib/esm/cardview.js

@@ -0,0 +1,159 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|
+*  /__/\__\   |_|
+*
+* @file cardview.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 { EvChange } from './x4events';
+import { asap, isFunction } from './tools';
+/**
+ * Standard CardView class
+ * a card view is composed of multiples pages with only one visible at a time.
+ * pages can be selected by a component (like tabs ou sidebar).
+ * or by code.
+ */
+export class CardView extends Component {
+    m_cards;
+    m_ipage; // initialy selected page
+    m_cpage; // currently selected page
+    constructor(props) {
+        super(props);
+        this.m_cards = [];
+        this.m_ipage = props.active;
+        this.m_cpage = null;
+        this.singleShot(() => {
+            this.setPages(props.pages);
+        });
+    }
+    /** @ignore */
+    render() {
+        let pages = [];
+        this.m_cards.forEach((p) => {
+            if (p.page) {
+                pages.push(p.page);
+            }
+        });
+        this.setContent(pages);
+    }
+    /**
+     * switch to a specific card
+     * @param name - card name as define in constructor
+     */
+    switchTo(name) {
+        if (this.m_cards.length == 0) {
+            return;
+        }
+        if (name === undefined) {
+            name = this.m_cards[0].name;
+        }
+        if (name === this.m_cpage?.name) {
+            return;
+        }
+        // hide old one
+        if (this.m_cpage) {
+            if (this.m_cpage.selector) {
+                this.m_cpage.selector.removeClass('@active');
+            }
+            if (this.m_cpage.page && !(this.m_cpage.page instanceof Function)) {
+                let page = this.m_cpage.page;
+                page.removeClass('@active');
+                page.addClass('@hidden');
+            }
+        }
+        this.m_cpage = this.m_cards.find((card) => card.name == name);
+        if (this.m_cpage) {
+            if (this.m_cpage.page) {
+                if (isFunction(this.m_cpage.page)) {
+                    this.m_cpage.page = this.m_cpage.page();
+                    console.assert(this.m_cpage.page != null, 'You must return a valid component');
+                }
+                let page = this.m_cpage.page;
+                page.addClass('@active');
+                page.removeClass('@hidden');
+                if (!page.dom) {
+                    this._preparePage(page);
+                }
+                if (this.m_cpage.selector) {
+                    this.m_cpage.selector.addClass('@active');
+                }
+            }
+            this.emit('change', EvChange(this.m_cpage.name));
+        }
+    }
+    /**
+     *
+     */
+    setPages(pages) {
+        let active = this._initTabs(pages);
+        if (active) {
+            asap(() => {
+                this.switchTo(active);
+                this.update();
+            });
+        }
+    }
+    /**
+     *
+     */
+    _initTabs(pages) {
+        if (!pages) {
+            return;
+        }
+        let active = this.m_ipage;
+        pages.forEach((p) => {
+            if (!p) {
+                return;
+            }
+            let card = { ...p };
+            card.selector = this._prepareSelector(p);
+            card.active = false;
+            this.m_cards.push(card);
+            if (!active) {
+                active = p.name;
+            }
+            if (p.active) {
+                active = p.name;
+            }
+        });
+        return active;
+    }
+    _updateSelector() {
+    }
+    /**
+     * prepare the cardinfo
+     * can be used by derivations to create & set selectors
+     */
+    _prepareSelector(card) {
+        return null;
+    }
+    /**
+     *
+     */
+    _preparePage(page) {
+        page.setStyleValue('flex', 1);
+        page.addClass('@tab-page');
+    }
+}

package/lib/esm/checkbox.js

@@ -0,0 +1,133 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|
+*  /__/\__\   |_|
+*
+* @file checkbox.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 { EvChange } from './x4events';
+import { Input } from './input';
+import { Label } from './label';
+/**
+ * Standard CheckBox
+ */
+export class CheckBox extends Component {
+    constructor(props) {
+        super(props);
+        this.setDomEvent('focus', () => this._setFocus());
+        this.mapPropEvents(props, 'change');
+        if (props.slider) {
+            this.addClass('slider');
+        }
+    }
+    /** @ignore */
+    render(props) {
+        // checkbox
+        let labelWidth = props.labelWidth ?? -1;
+        let uid = '__cb_' + this.uid;
+        this.setTag('label');
+        this.addClass('@hlayout');
+        this.addClass(props.align ?? 'left');
+        this.setContent([
+            new Input({
+                ref: 'input',
+                type: 'checkbox',
+                name: props.name,
+                id: uid,
+                tabIndex: props.tabIndex,
+                value: props.value ?? 'on',
+                attrs: {
+                    checked: props.checked ? '' : undefined
+                },
+                dom_events: {
+                    change: this._change.bind(this),
+                }
+            }),
+            new Label({
+                text: props.text ?? '',
+                width: labelWidth < 0 ? undefined : labelWidth,
+                flex: labelWidth < 0 ? -labelWidth : undefined,
+                align: props.labelAlign ?? 'left',
+                style: {
+                    order: props.align == 'right' ? -1 : 1,
+                },
+                attrs: {
+                    "for": uid
+                }
+            })
+        ]);
+    }
+    /**
+     * check state changed
+     */
+    _change() {
+        this.emit('change', EvChange(this.check));
+    }
+    /**
+     * focus gained/loosed
+     */
+    _setFocus() {
+        let input = this.itemWithRef('input');
+        input.focus();
+    }
+    /**
+     * @return the checked value
+     */
+    get check() {
+        if (this.dom) {
+            let input = this.itemWithRef('input');
+            let dom = input.dom;
+            return dom.checked;
+        }
+        return this.m_props.checked;
+    }
+    /**
+     * change the checked value
+     * @param {boolean} ck new checked value
+     */
+    set check(ck) {
+        if (this.dom) {
+            let input = this.itemWithRef('input');
+            const dom = input.dom;
+            if (dom) {
+                dom.checked = ck;
+            }
+        }
+        this.m_props.checked = ck;
+        //this._change();	// todo: is it needed when changed by code ? -> no
+    }
+    get text() {
+        return this.itemWithRef('label').text;
+    }
+    set text(text) {
+        this.itemWithRef('label').text = text;
+    }
+    /**
+     * toggle the checkbox
+     */
+    toggle() {
+        this.check = !this.check;
+    }
+}

package/lib/{color.js → esm/color.js}

@@ -1,4 +1,3 @@
-"use strict";
 /**
 *  ___  ___ __
 *  \  \/  /  / _
@@ -27,9 +26,7 @@
 * 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.Color = void 0;
-const styles_1 = require("./styles");
+import { Stylesheet } from './styles';
 const colorValues = {
     'lightsalmon': 0xFFFFA07A,
     'lightseagreen': 0xFF20B2AA,
@@ -174,7 +171,7 @@ const colorValues = {
     'none': 0,
     'transparent': 0,
 };
-class Color {
+export class Color {
     m_value;
     static custom = [];
     constructor(r, g, b, a) {
@@ -502,7 +499,7 @@ class Color {
         Color.custom[name] = value;
     }
     static addCssColor(name) {
-        let c = styles_1.Stylesheet.getVar(name);
+        let c = Stylesheet.getVar(name);
         Color.custom['css:' + name] = Color.parse(c.trim());
     }
     static parse(str) {
@@ -586,7 +583,6 @@ class Color {
         return new Color(varName).toString();
     }
 }
-exports.Color = Color;
 function _hx(n) {
     return ('00' + n.toString(16)).substr(-2).toUpperCase();
 }