x4js 1.4.52 → 1.5.0

package/lib/esm/tabview.js

@@ -0,0 +1,83 @@
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|
+*  /__/ \__\   |_|
+*
+* @file tabview.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 { HLayout } from './layout';
+import { Button } from './button';
+import { CardView } from './cardview';
+/**
+ * Standard TabView class
+ */
+export class TabView extends CardView {
+    m_tab_selector;
+    m_menu;
+    constructor(props) {
+        super(props);
+        this.m_tab_selector = props.tab_selector ? true : false;
+        this.m_menu = props.menu;
+        this.addClass('@vlayout');
+    }
+    /** @ignore */
+    render() {
+        let tabs = [];
+        let pages = [];
+        if (this.m_menu) {
+            this.m_menu.addClass('@button @tab-btn');
+            this.m_menu.removeClass('@menu-item');
+            tabs.push(this.m_menu);
+        }
+        this.m_cards.forEach((p) => {
+            tabs.push(p.selector);
+            if (!(p.page instanceof Function)) {
+                pages.push(p.page);
+            }
+        });
+        if (this.m_tab_selector) {
+            pages.unshift(new HLayout({
+                cls: '@tab-switch',
+                content: tabs
+            }));
+        }
+        this.setContent(pages);
+    }
+    _updateSelector() {
+    }
+    _prepareSelector(card) {
+        return new Button({
+            cls: '@tab-btn',
+            text: card.title,
+            icon: card.icon,
+            click: () => { this.switchTo(card.name); }
+        });
+    }
+    _preparePage(page) {
+        super._preparePage(page);
+        if (!page.dom) {
+            this.appendChild(page);
+        }
+    }
+}

package/lib/esm/textarea.d.ts

@@ -0,0 +1,63 @@
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|
+*  /__/ \__\   |_|
+*
+* @file textarea.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, CProps, CEventMap } from './component';
+import { EvChange, EventCallback } from './x4events';
+interface TextAreaEventMap extends CEventMap {
+    change: EvChange;
+}
+export interface TextAreaProps extends CProps {
+    text?: string;
+    readOnly?: boolean;
+    tabIndex?: number;
+    placeHolder?: string;
+    name?: string;
+    rows?: number;
+    autoGrow?: boolean;
+    autoFocus?: boolean;
+    spellcheck?: boolean;
+    change?: EventCallback<EvChange>;
+}
+export declare class TextArea extends Component<TextAreaProps, TextAreaEventMap> {
+    constructor(props: TextAreaProps);
+    /** @ignore */
+    render(props: TextAreaProps): void;
+    private _change;
+    componentCreated(): void;
+    get value(): string;
+    set value(t: string);
+    private _calcHeight;
+    private _updateHeight;
+    /**
+     * insert text at cursor position
+     */
+    insertText(text: any): void;
+    getStoreValue(): any;
+    setStoreValue(value: any): void;
+}
+export {};

package/lib/esm/textarea.js

@@ -0,0 +1,123 @@
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|
+*  /__/ \__\   |_|
+*
+* @file textarea.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 } from './tools';
+export class TextArea extends Component {
+    constructor(props) {
+        super(props);
+        this.mapPropEvents(props, 'change');
+    }
+    /** @ignore */
+    render(props) {
+        props.text = props.text ?? '';
+        this.setAttribute('tabindex', props.tabIndex ?? 0);
+        if (props.spellcheck === false) {
+            this.setAttribute('spellcheck', 'false');
+        }
+        if (props.readOnly !== undefined) {
+            this.setAttribute('readonly', props.readOnly);
+        }
+        if (props.rows) {
+            this.setAttribute('rows', props.rows);
+        }
+        if (props.placeHolder) {
+            this.setAttribute('placeholder', props.placeHolder);
+        }
+        if (props.autoFocus) {
+            this.setAttribute('autofocus', props.autoFocus);
+        }
+        if (props.name) {
+            this.setAttribute('name', props.name);
+        }
+        if (props.autoGrow) {
+            this.m_props.autoGrow = true;
+            this.setAttribute('rows', this._calcHeight(props.text));
+            this.setDomEvent('keydown', () => {
+                asap(() => this._updateHeight());
+            });
+        }
+        // avoid going to next element on enter
+        this.setDomEvent('keydown', (e) => {
+            e.stopPropagation();
+        });
+        this.setTag('textarea');
+        this.setDomEvent('input', () => this._change());
+    }
+    _change() {
+        this.emit('change', EvChange(this.value));
+    }
+    componentCreated() {
+        this.value = this.m_props.text;
+    }
+    get value() {
+        if (this.dom) {
+            return this.dom.value;
+        }
+        return this.m_props.text;
+    }
+    set value(t) {
+        this.m_props.text = t ?? '';
+        if (this.dom) {
+            this.dom.value = this.m_props.text;
+            if (this.m_props.autoGrow) {
+                this.setAttribute('rows', this._calcHeight(this.m_props.text));
+            }
+        }
+    }
+    _calcHeight(text) {
+        return 1 + (text.match(/\n/g) || []).length;
+    }
+    _updateHeight() {
+        const text = this.value;
+        const lines = this._calcHeight(text);
+        if (this.getData('lines') != lines) {
+            this.setAttribute('rows', lines);
+            this.setData('lines', lines);
+        }
+    }
+    /**
+     * insert text at cursor position
+     */
+    insertText(text) {
+        if (this.dom) {
+            let dom = this.dom;
+            let start = dom.selectionStart;
+            dom.setRangeText(text);
+            dom.selectionStart = start;
+            dom.selectionEnd = start + text.length;
+        }
+    }
+    getStoreValue() {
+        return this.value;
+    }
+    setStoreValue(value) {
+        this.value = value;
+    }
+}

package/lib/esm/textedit.d.ts

@@ -0,0 +1,123 @@
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|
+*  /__/ \__\   |_|
+*
+* @file textedit.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, EvFocus, HtmlString } from './component';
+import { Input, InputProps, InputEventMap } from './input';
+import { IconID } from './icon';
+import { EvClick, EvChange, EventCallback } from './x4events';
+declare type ValidationFunction = (value: string) => string;
+interface TextEditEventMap extends InputEventMap {
+    click: EvClick;
+    change: EvChange;
+    focus: EvFocus;
+}
+export interface TextEditProps extends InputProps<TextEditEventMap> {
+    label?: string | HtmlString;
+    labelWidth?: number;
+    labelAlign?: 'left' | 'right' | 'top';
+    required?: boolean;
+    spellcheck?: boolean;
+    icon?: IconID;
+    pattern?: string;
+    uppercase?: boolean;
+    format?: string | 'native';
+    autosel?: boolean;
+    gadgets?: Component[];
+    validator?: ValidationFunction;
+    change?: EventCallback<EvChange>;
+    click?: EventCallback<EvClick>;
+    focus?: EventCallback<EvFocus>;
+}
+/**
+ * TextEdit is a single line editor, it can have a label and an error descriptor.
+ */
+export declare class TextEdit<T extends TextEditProps = TextEditProps, E extends TextEditEventMap = TextEditEventMap> extends Component<T, E> {
+    private m_cal_popup;
+    protected m_ui_input: Input;
+    private m_error_tip;
+    constructor(props: T);
+    componentCreated(): void;
+    componentDisposed(): void;
+    focus(): void;
+    /** @ignore */
+    render(props: TextEditProps): void;
+    enable(ena?: boolean): void;
+    disable(): void;
+    private _btnClick;
+    /**
+     * select the value format for input/output on textedit of type date
+     * cf. formatIntlDate / parseIntlDate
+     * @param fmt
+     */
+    setDateStoreFormat(fmt: string): void;
+    setStoreValue(value: any): void;
+    getStoreValue(): any;
+    private _date_get_hook;
+    private _date_set_hook;
+    showError(text: string): void;
+    clearError(): void;
+    get value(): string;
+    set value(value: string);
+    /**
+     * select all the text
+     */
+    selectAll(): void;
+    select(start: number, length?: number): void;
+    getSelection(): {
+        start: number;
+        length: number;
+    };
+    set readOnly(ro: boolean);
+    get label(): string | HtmlString;
+    set label(text: string | HtmlString);
+    /**
+     * content changed
+     * todo: should move into Input
+     */
+    private _change;
+    /**
+     * getting focus
+     */
+    private _focus;
+    /**
+     * loosing focus
+     * @param value
+     */
+    private _blur;
+    /**
+     * todo: should move into Input
+     * @returns
+     */
+    validate(): boolean;
+    protected _validate(value: string): boolean;
+    _date_validator(value: string): string;
+    private _showDatePicker;
+    get input(): Input;
+    get type(): import("./input").EditType;
+}
+export {};