x4js 1.5.17 → 1.5.20

package/lib/esm/cardview.js

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

@@ -1,134 +0,0 @@
-/**
-*  ___  ___ __
-*  \  \/  /  / _
-*   \    /  /_| |_
-*   /    \____   _|
-*  /__/\__\   |_|
-*
-* @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),
-                }
-            }),
-            props.slider ? new Component({ cls: '@slide-el' }) : null,
-            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;
-    }
-}