x4js 1.4.3 → 1.4.4

package/lib/cardview.d.ts

@@ -1,83 +0,0 @@
-/**
-*  ___  ___ __
-*  \  \/  /  / _
-*   \    /  /_| |_
-*   /    \____   _|
-*  /__/\__\   |_|
-*
-* @file cardview.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/>.
-**/
-import { Component, CProps, CEventMap } from './component';
-import { EvChange } from './x4_events';
-import { IconID } from './icon';
-export declare type PageOrCallback = Component | (() => Component);
-export interface ICardViewItem {
-    icon?: IconID;
-    name: string;
-    title: string;
-    page: PageOrCallback;
-}
-interface CardViewEventMap extends CEventMap {
-    change?: EvChange;
-}
-export interface CardViewProps extends CProps<CardViewEventMap> {
-    pages: ICardViewItem[];
-    active?: string;
-}
-interface ICardItemEx extends ICardViewItem {
-    selector: Component;
-    active: boolean;
-}
-/**
- * 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 declare class CardView<P extends CardViewProps = CardViewProps, E extends CardViewEventMap = CardViewEventMap> extends Component<P, E> {
-    protected m_cards: ICardItemEx[];
-    protected m_ipage: string;
-    protected m_cpage: ICardItemEx;
-    constructor(props: P);
-    /** @ignore */
-    render(): void;
-    /**
-     * switch to a specific card
-     * @param name - card name as define in constructor
-     */
-    switchTo(name?: string): void;
-    /**
-     *
-     */
-    setPages(pages: ICardViewItem[]): void;
-    /**
-     *
-     */
-    private _initTabs;
-    protected _updateSelector(): void;
-    /**
-     * prepare the cardinfo
-     * can be used by derivations to create & set selectors
-     */
-    protected _prepareSelector(card: ICardViewItem): Component;
-    /**
-     *
-     */
-    protected _preparePage(page: Component): void;
-}
-export {};

package/lib/cardview.js

@@ -1,152 +0,0 @@
-/**
-*  ___  ___ __
-*  \  \/  /  / _
-*   \    /  /_| |_
-*   /    \____   _|
-*  /__/\__\   |_|
-*
-* @file cardview.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/>.
-**/
-import { Component } from './component';
-import { EvChange } from './x4_events';
-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);
-                }
-            }
-            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/checkbox.d.ts

@@ -1,72 +0,0 @@
-/**
-*  ___  ___ __
-*  \  \/  /  / _
-*   \    /  /_| |_
-*   /    \____   _|
-*  /__/\__\   |_|
-*
-* @file checkbox.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/>.
-**/
-import { CEventMap, Component, CProps } from './component';
-import { EvChange, EventCallback } from './x4_events';
-import { HtmlString } from './tools';
-interface CheckBoxEventMap extends CEventMap {
-    change?: EvChange;
-}
-interface CheckBoxProps extends CProps<CheckBoxEventMap> {
-    name?: string;
-    text?: string | HtmlString;
-    checked?: boolean;
-    value?: string;
-    labelWidth?: number;
-    labelAlign?: 'left' | 'right';
-    align?: 'left' | 'right';
-    change: EventCallback<EvChange>;
-}
-/**
- * Standard CheckBox
- */
-export declare class CheckBox extends Component<CheckBoxProps, CheckBoxEventMap> {
-    constructor(props: CheckBoxProps);
-    /** @ignore */
-    render(props: CheckBoxProps): void;
-    /**
-     * check state changed
-     */
-    private _change;
-    /**
-     * focus gained/loosed
-     */
-    private _setFocus;
-    /**
-     * @return the checked value
-     */
-    get check(): boolean;
-    /**
-     * change the checked value
-     * @param {boolean} ck new checked value
-     */
-    set check(ck: boolean);
-    get text(): string | HtmlString;
-    set text(text: string | HtmlString);
-    /**
-     * toggle the checkbox
-     */
-    toggle(): void;
-}
-export {};

package/lib/checkbox.js

@@ -1,126 +0,0 @@
-/**
-*  ___  ___ __
-*  \  \/  /  / _
-*   \    /  /_| |_
-*   /    \____   _|
-*  /__/\__\   |_|
-*
-* @file checkbox.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/>.
-**/
-import { Component } from './component';
-import { EvChange } from './x4_events';
-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');
-    }
-    /** @ignore */
-    render(props) {
-        // checkbox
-        let labelWidth = props.labelWidth ?? -1;
-        let uid = '__cb_' + this.uid;
-        this.addClass('@hlayout');
-        this.addClass(props.align ?? 'left');
-        this.setProp('tag', 'label');
-        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.d.ts

@@ -1,144 +0,0 @@
-/**
-*  ___  ___ __
-*  \  \/  /  / _
-*   \    /  /_| |_
-*   /    \____   _|
-*  /__/\__\   |_|
-*
-* @file color.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/>.
-**/
-export declare class Color {
-    private m_value;
-    private static custom;
-    /**
-     * @example
-     * ```ts
-     * let c = new Color( 255, 255, 255, 0.2 );
-     * let d = new Color( "fff" );
-     * let e = new Color( "css:selection-color" );
-     * let f = new Color( "rgba(255,0,255,0.6)" );
-     * ```
-     */
-    constructor();
-    constructor(value: number | string);
-    constructor(value: number | string, alpha: number);
-    constructor(r: number, g: number, b: number);
-    constructor(r: number, g: number, b: number, a: number);
-    /**
-     *
-     */
-    private _shade;
-    /**
-     * return a color darken by percent
-     * @param percent
-     */
-    darken(percent: number): Color;
-    /**
-     * return a color lighten by percent
-     * @param percent
-     */
-    lighten(percent: number): Color;
-    /**
-     * mix 2 colors
-     * @param {rgb} c1 - color 1
-     * @param {rgb} c2 - color 2
-     * @param {float} percent - 0.0 to 1.0
-     * @example
-     * ```js
-     * let clr = Color.mix( color1, color2, 0.5 );
-     * ```
-     */
-    static mix(c1: Color, c2: Color, p: number): Color;
-    /**
-     * split the color into it's base element r,g,b & a (!a 1-255)
-     */
-    private _split;
-    /**
-     * change the alpha value
-     */
-    fadeout(percent: number): Color;
-    /**
-     *
-     */
-    static fromHSV(h: number, s: number, v: number, a?: number): Color;
-    /**
-     *
-     */
-    static toHSV(c: Color): {
-        h: any;
-        s: number;
-        v: number;
-        a: number;
-    };
-    /**
-     *
-     */
-    static fromHLS(h: number, l: number, s: number): Color;
-    /**
-     *
-     */
-    static toHLS(color: Color): {
-        h: number;
-        l: number;
-        s: any;
-    };
-    /**
-     * get the red value of the color
-     */
-    red(): number;
-    /**
-     * get the green value of the color
-     */
-    green(): number;
-    /**
-     * get the blue value of the color
-     */
-    blue(): number;
-    /**
-     * get the alpha value of the color
-     */
-    alpha(): number;
-    /**
-     *
-     */
-    value(): number;
-    /**
-     * convert the color into string value
-     */
-    toString(): string;
-    toHex(with_alpha?: boolean): string;
-    static addCustomColor(name: string, value: Color): void;
-    static addCssColor(name: string): void;
-    static parse(str: string): Color;
-    private _getCustomColor;
-    static contrastColor(color: Color): Color;
-    /**
-     *
-     */
-    static WHITE: Color;
-    /**
-     *
-     */
-    static BLACK: Color;
-    /**
-     *
-     */
-    static NONE: Color;
-    static valueFromColorName(name: string): Color;
-    static fromCssVar(varName: string): string;
-}