jsl-ui 9.18.2 → 9.18.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jsl-ui",
-  "version": "9.18.2",
+  "version": "9.18.3",
   "description": "javascript UI library",
   "main": "lib/index.js",
   "files": [

package/lib/components/IntervalComponent.d.ts

@@ -1,17 +0,0 @@
-import { IJSLComponent, JSLRender, IJSLVNode } from "jsl-render";
-export interface IIntervalOptions {
-    interval: number;
-    stopOnError?: boolean;
-    noRefresh?: boolean;
-}
-export declare class IntervalComponent implements IJSLComponent {
-    private fnc;
-    private options;
-    private renderer;
-    constructor(fnc: any, options: IIntervalOptions);
-    isEqual(node: IJSLComponent): boolean;
-    render(): IJSLVNode;
-    onInit(render: JSLRender): void;
-    onCreate(node: IJSLVNode): void;
-    onRemove(node: IJSLVNode): void;
-}

package/lib/components/IntervalComponent.js

@@ -1,68 +0,0 @@
-var IntervalComponent = /** @class */ (function () {
-    function IntervalComponent(fnc, options) {
-        this.fnc = fnc;
-        this.options = options;
-    }
-    IntervalComponent.prototype.isEqual = function (node) {
-        return this.__proto__ === node.__proto__;
-    };
-    IntervalComponent.prototype.render = function () {
-        return { tag: "input", attr: { type: "hidden" } };
-    };
-    IntervalComponent.prototype.onInit = function (render) {
-        this.renderer = render;
-    };
-    IntervalComponent.prototype.onCreate = function (node) {
-        var _this = this;
-        var timeoutRef = node.dom.value;
-        if (timeoutRef && timeoutRef !== "0") {
-            clearTimeout(parseInt(timeoutRef, 10));
-            node.dom.value = "";
-        }
-        var f = function () {
-            var result;
-            try {
-                result = _this.fnc();
-            }
-            catch (e) {
-                console.error(e);
-                if (_this.options.stopOnError) {
-                    return;
-                }
-            }
-            var isPromise = result && typeof result.then === "function" && typeof result.catch === "function";
-            if (isPromise) {
-                result.then(function () {
-                    if (!_this.options.noRefresh) {
-                        _this.renderer.refresh();
-                    }
-                    node.dom.value = setTimeout(f, _this.options.interval).toString();
-                }).catch(function (e) {
-                    console.error(e);
-                    if (!_this.options.stopOnError) {
-                        if (!_this.options.noRefresh) {
-                            _this.renderer.refresh();
-                        }
-                        node.dom.value = setTimeout(f, _this.options.interval).toString();
-                    }
-                });
-            }
-            else {
-                if (!_this.options.noRefresh) {
-                    _this.renderer.refresh();
-                }
-                node.dom.value = setTimeout(f, _this.options.interval).toString();
-            }
-        };
-        f();
-    };
-    IntervalComponent.prototype.onRemove = function (node) {
-        var timeoutRef = node.dom.value;
-        if (timeoutRef && timeoutRef !== "0") {
-            clearTimeout(parseInt(timeoutRef, 10));
-            node.dom.value = "";
-        }
-    };
-    return IntervalComponent;
-}());
-export { IntervalComponent };

package/lib/components/auto-suggest/AutoSuggestComponent.d.ts

@@ -1,22 +0,0 @@
-import { IJSLComponent, IJSLVNode } from "jsl-render";
-import { IAutoSuggestOptions, IAutoSuggest } from "../../ui/auto.suggest";
-export interface IAutoSuggestComponentOptions extends IAutoSuggestOptions {
-    value?: string;
-    class?: string;
-    style?: string;
-    placeholder?: string;
-}
-export declare class AutoSuggestComponent implements IJSLComponent {
-    private options;
-    private ref;
-    private dom;
-    constructor(options: IAutoSuggestComponentOptions);
-    render(): IJSLVNode;
-    getRef(): IAutoSuggest;
-    getValue(): string;
-    setValue(val: string): void;
-    focus(): void;
-    onCreate(node: IJSLVNode): void;
-    onUpdate(node: IJSLVNode): void;
-    onRemove(): void;
-}

package/lib/components/auto-suggest/AutoSuggestComponent.js

@@ -1,49 +0,0 @@
-import { AutoSuggest } from "../../ui/auto.suggest";
-var AutoSuggestComponent = /** @class */ (function () {
-    function AutoSuggestComponent(options) {
-        this.options = options;
-        // this.id = this.options.id ?? helper.newDomGuid();
-    }
-    AutoSuggestComponent.prototype.render = function () {
-        var _a;
-        return {
-            tag: "input",
-            attr: { value: this.options.value, class: this.options.class, style: this.options.style, placeholder: (_a = this.options.placeholder) !== null && _a !== void 0 ? _a : "" }
-        };
-    };
-    AutoSuggestComponent.prototype.getRef = function () {
-        return this.ref;
-    };
-    AutoSuggestComponent.prototype.getValue = function () {
-        if (this.dom == null) {
-            return "";
-        }
-        return this.dom.value;
-    };
-    AutoSuggestComponent.prototype.setValue = function (val) {
-        if (this.dom == null) {
-            return;
-        }
-        this.dom.value = val;
-    };
-    AutoSuggestComponent.prototype.focus = function () {
-        if (this.dom == null) {
-            return;
-        }
-        this.dom.focus();
-    };
-    AutoSuggestComponent.prototype.onCreate = function (node) {
-        this.dom = node.dom;
-        AutoSuggest(node.dom, this.options);
-    };
-    AutoSuggestComponent.prototype.onUpdate = function (node) {
-        this.dom = node.dom;
-    };
-    AutoSuggestComponent.prototype.onRemove = function () {
-        if (this.ref != null) {
-            this.ref.destroy();
-        }
-    };
-    return AutoSuggestComponent;
-}());
-export { AutoSuggestComponent };

package/lib/components/button/ButtonComponent.d.ts

@@ -1,18 +0,0 @@
-import { IJSLComponent, IJSLVNode } from "jsl-render";
-import { EventHandler } from "../../interaction/eventhandler";
-export interface IButtonOptions {
-    content: string | IJSLVNode | IJSLComponent;
-    enabled?: boolean;
-    class?: string;
-    outlined?: boolean;
-    style?: string;
-    click?: EventHandler<MouseEvent> | ((evt?: MouseEvent) => void);
-}
-export declare class ButtonComponent implements IJSLComponent {
-    private options;
-    get click(): EventHandler<MouseEvent>;
-    constructor(options: IButtonOptions);
-    isEqual(node: IJSLComponent): boolean;
-    render(): IJSLVNode;
-    private raiseEvent;
-}

package/lib/components/button/ButtonComponent.js

@@ -1,46 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { EventHandler } from "../../interaction/eventhandler";
-var ButtonComponent = /** @class */ (function () {
-    function ButtonComponent(options) {
-        this.options = __assign({ enabled: true, class: "" }, options);
-        this.options.click = EventHandler.Create(this.options.click);
-    }
-    Object.defineProperty(ButtonComponent.prototype, "click", {
-        get: function () {
-            return this.options.click;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    ButtonComponent.prototype.isEqual = function (node) {
-        return this.__proto__ === node.__proto__;
-    };
-    ButtonComponent.prototype.render = function () {
-        return {
-            tag: "button",
-            attr: {
-                class: "jsl-button " + (this.options.outlined ? "jsl-button-outline " : "") +
-                    this.options.class + (!this.options.enabled ? " disabled" : ""), style: this.options.style, click: this.raiseEvent
-            },
-            content: typeof this.options.content === "string" ? this.options.content : "",
-            children: typeof this.options.content !== "string" ? [this.options.content] : []
-        };
-    };
-    ButtonComponent.prototype.raiseEvent = function (evt) {
-        if (this.options.enabled) {
-            this.options.click.notify(evt);
-        }
-    };
-    return ButtonComponent;
-}());
-export { ButtonComponent };

package/lib/components/checkbox/CheckBoxComponent.d.ts

@@ -1,28 +0,0 @@
-import "./CheckBoxStyle.scss";
-import { IJSLComponent, IJSLVNode } from "jsl-render";
-import { EventHandler } from "../../interaction/eventhandler";
-import { IDataConverter } from "../../interaction/dataconverter";
-export interface ICheckBoxOptions<T = any> {
-    value?: boolean;
-    label: string;
-    enabled?: boolean;
-    class?: string;
-    style?: string;
-    onChange?: EventHandler<boolean> | ((v?: boolean) => void);
-    id?: string;
-    bindTo?: T;
-    property?: keyof T;
-    bindMode?: "toModel" | "fromModel" | "both";
-    converter?: IDataConverter<any, boolean>;
-}
-export declare class CheckBoxComponent<T = any> implements IJSLComponent {
-    private options;
-    private currentDom;
-    get onChange(): EventHandler<boolean>;
-    constructor(options: ICheckBoxOptions<T>);
-    render(): IJSLVNode;
-    getValue(): boolean;
-    setValue(val: boolean): void;
-    onCreate(node: IJSLVNode): void;
-    private raiseEvent;
-}

package/lib/components/checkbox/CheckBoxComponent.js

@@ -1,94 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import "./CheckBoxStyle.scss";
-import { EventHandler } from "../../interaction/eventhandler";
-import { helper } from "../../core/helper";
-var CheckBoxComponent = /** @class */ (function () {
-    function CheckBoxComponent(options) {
-        var _a;
-        this.options = __assign({ enabled: true, class: "", bindMode: "toModel" }, options);
-        if (!this.options.id) {
-            this.options.id = helper.newDomGuid();
-        }
-        if (this.options.bindTo != null && this.options.property != null && this.options.value == null) {
-            this.options.value = (((_a = this.options.converter) === null || _a === void 0 ? void 0 : _a.toUI) ?
-                this.options.converter.toUI(this.options.bindTo[this.options.property]) :
-                this.options.bindTo[this.options.property]);
-        }
-        this.options.onChange = EventHandler.Create(this.options.onChange);
-    }
-    Object.defineProperty(CheckBoxComponent.prototype, "onChange", {
-        get: function () {
-            return this.options.onChange;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    // public isEqual(node: IJSLComponent): boolean {
-    //     return (this as any).__proto__ === (node as any).__proto__;
-    // }
-    CheckBoxComponent.prototype.render = function () {
-        var _a;
-        var val = this.options.value;
-        if (this.options.bindMode !== "toModel" && this.options.bindTo != null && this.options.property != null) {
-            var current = this.getValue();
-            var newVal = (((_a = this.options.converter) === null || _a === void 0 ? void 0 : _a.toUI) ?
-                this.options.converter.toUI(this.options.bindTo[this.options.property]) :
-                this.options.bindTo[this.options.property]);
-            if (newVal !== current) {
-                val = newVal;
-                if (this.currentDom != null) {
-                    this.currentDom.checked = val;
-                }
-            }
-        }
-        return {
-            tag: "span",
-            attr: { style: this.options.style },
-            children: [{
-                    tag: "input",
-                    attr: {
-                        type: "checkbox",
-                        disabled: !this.options.enabled ? "disabled" : undefined,
-                        class: "checkbox-comp " + (this.options.class || ""),
-                        change: this.raiseEvent,
-                        checked: val ? "checked" : undefined,
-                        id: typeof this.options.id === "string" ? this.options.id : undefined
-                    }
-                }, { tag: "label", content: this.options.label, attr: { for: this.options.id } }]
-        };
-    };
-    CheckBoxComponent.prototype.getValue = function () {
-        var _a;
-        return ((_a = this.currentDom) === null || _a === void 0 ? void 0 : _a.checked) || false;
-    };
-    CheckBoxComponent.prototype.setValue = function (val) {
-        if (this.currentDom != null) {
-            this.currentDom.checked = val;
-        }
-    };
-    CheckBoxComponent.prototype.onCreate = function (node) {
-        this.currentDom = node.dom.querySelector("input");
-    };
-    CheckBoxComponent.prototype.raiseEvent = function (e, node) {
-        var _a;
-        if (this.options.enabled) {
-            var value = node.dom.checked;
-            if (this.options.bindTo && this.options.bindMode !== "fromModel" && this.options.property) {
-                this.options.bindTo[this.options.property] = ((_a = this.options.converter) === null || _a === void 0 ? void 0 : _a.toData) ? this.options.converter.toData(value) : value;
-            }
-            this.options.onChange.notify(value);
-        }
-    };
-    return CheckBoxComponent;
-}());
-export { CheckBoxComponent };

package/lib/components/checkbox/CheckBoxStyle.scss

@@ -1,86 +0,0 @@
-@keyframes checkbox-comp-hover-color{
-    from{
-        border-color:#C0C0C0;
-    }
-    to{
-        border-color:#3B99FF;
-    }
-}
-.checkbox-comp{
-    position:absolute;
-    display:none;
-}
-.checkbox-comp[disabled]{
-    cursor:not-allowed
-}
-.checkbox-comp+label{
-    position:relative;
-    // display:block;
-    padding-left:1.5em;
-    cursor:pointer;
-    vertical-align:middle;
-}
-.checkbox-comp+label:hover:before{
-    animation-duration:.4s;
-    animation-fill-mode:both;
-    animation-name:checkbox-comp-hover-color;
-}
-.checkbox-comp+label:before{
-    position:absolute;
-    top:0;
-    left:0;
-    display:inline-block;
-    width:1em;
-    height:1em;
-    content:'';
-    border:1px solid #C0C0C0;
-}
-.checkbox-comp+label:after{
-    position:absolute;
-    display:none;
-    content:''
-}
-.checkbox-comp[disabled]+label{
-    cursor:not-allowed;
-    // color:#C0C0C0;
-}
-.checkbox-comp[disabled]+label:hover,.checkbox-comp[disabled]+label:before,.checkbox-comp[disabled]+label:after{
-    cursor:not-allowed
-}
-.checkbox-comp[disabled]+label:hover:before{
-    border:1px solid #C0C0C0;
-    animation-name:none
-}
-.checkbox-comp[disabled]+label:before{
-    border-color:#C0C0C0;
-}
-.checkbox-comp:checked+label:before{
-    animation-name:none
-}
-.checkbox-comp:checked+label:after{
-    display:block
-}
-.checkbox-comp+label:before{
-    border-radius:0.2em;
-}
-.checkbox-comp+label:after{
-    top:0.1em; //2px;
-    left:0.3em; //7px;
-    box-sizing:border-box;
-    width:0.5em; //6px;
-    height:0.7em; //12px;
-    transform:rotate(45deg);
-    border-width:0.15em;
-    border-style:solid;
-    border-color:#fff;
-    border-top:0;
-    border-left:0
-}
-.checkbox-comp:checked+label:before{
-    border-color:#3B99FF;
-    background:#3B99FF;
-}
-.checkbox-comp:checked[disabled]+label:before{
-    border-color:#c9e2f9;
-    background:#c9e2f9
-}

package/lib/components/date/DateComponent.d.ts

@@ -1,32 +0,0 @@
-import { IJSLComponent, IJSLVNode } from "jsl-render";
-import { IDatePickerOptions, IDatePicker } from "../../ui/date.picker";
-import { EventHandler } from "../../interaction/eventhandler";
-import { IDataConverter } from "../../interaction/dataconverter";
-export interface IDateComponentOptions<T = any> extends IDatePickerOptions {
-    id?: string;
-    class?: string;
-    style?: string;
-    placeholder?: string;
-    value?: Date;
-    onChange?: EventHandler<Date> | ((v?: Date) => void);
-    bindTo?: T;
-    property?: keyof T;
-    bindMode?: "toModel" | "fromModel" | "both";
-    converter?: IDataConverter<any, Date>;
-    enabled?: boolean;
-}
-export declare class DateComponent<T = any> implements IJSLComponent {
-    private options;
-    private ref;
-    private currentDom;
-    constructor(options: IDateComponentOptions<T>);
-    get onChange(): EventHandler<Date>;
-    render(): IJSLVNode;
-    getValue(): string;
-    getValueAsDate(): Date;
-    getRef(): IDatePicker;
-    onCreate(node: IJSLVNode): void;
-    onUpdate(node: IJSLVNode): void;
-    onRemove(): void;
-    private raiseEvent;
-}

package/lib/components/date/DateComponent.js

@@ -1,106 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { DatePicker } from "../../ui/date.picker";
-import { date } from "../../core/date";
-import { helper } from "../../core/helper";
-import { EventHandler } from "../../interaction/eventhandler";
-var DateComponent = /** @class */ (function () {
-    function DateComponent(options) {
-        var _a;
-        this.options = __assign({ enabled: true, id: helper.newDomGuid(), bindMode: "toModel" }, options);
-        if (this.options.bindTo != null && this.options.property != null && this.options.value == null) {
-            this.options.value = (((_a = this.options.converter) === null || _a === void 0 ? void 0 : _a.toUI) ?
-                this.options.converter.toUI(this.options.bindTo[this.options.property]) :
-                this.options.bindTo[this.options.property]);
-        }
-        this.options.onChange = EventHandler.Create(this.options.onChange);
-    }
-    Object.defineProperty(DateComponent.prototype, "onChange", {
-        get: function () {
-            return this.options.onChange;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    DateComponent.prototype.render = function () {
-        var _a;
-        var val = this.options.value;
-        if (this.options.bindMode !== "toModel" && this.options.bindTo != null && this.options.property != null) {
-            var current = this.getValue();
-            var newVal = (((_a = this.options.converter) === null || _a === void 0 ? void 0 : _a.toUI) ?
-                this.options.converter.toUI(this.options.bindTo[this.options.property]) :
-                this.options.bindTo[this.options.property]);
-            var newValStr = date.format(newVal);
-            if (newValStr !== current) {
-                val = newVal;
-                if (this.currentDom != null) {
-                    this.currentDom.value = newValStr;
-                }
-            }
-        }
-        return {
-            tag: "input",
-            attr: {
-                id: this.options.id,
-                class: this.options.class,
-                style: this.options.style,
-                disabled: !this.options.enabled ? "disabled" : undefined,
-                placeholder: this.options.placeholder,
-                value: date.format(val),
-                change: this.raiseEvent,
-            }
-        };
-    };
-    DateComponent.prototype.getValue = function () {
-        if (this.currentDom == null) {
-            return "";
-        }
-        return this.currentDom.value;
-    };
-    DateComponent.prototype.getValueAsDate = function () {
-        if (this.currentDom == null) {
-            return null;
-        }
-        if (this.options.parse) {
-            return this.options.parse(this.currentDom.value);
-        }
-        return date.parse(this.currentDom.value);
-    };
-    DateComponent.prototype.getRef = function () {
-        return this.ref;
-    };
-    DateComponent.prototype.onCreate = function (node) {
-        this.currentDom = node.dom;
-        this.ref = DatePicker(this.currentDom, this.options);
-    };
-    DateComponent.prototype.onUpdate = function (node) {
-        this.currentDom = node.dom;
-    };
-    DateComponent.prototype.onRemove = function () {
-        if (this.ref != null) {
-            this.ref.destroy();
-        }
-    };
-    DateComponent.prototype.raiseEvent = function (e, node) {
-        var _a;
-        if (this.options.enabled) {
-            var val = date.parse(node.dom.value);
-            if (this.options.bindTo && this.options.bindMode !== "fromModel" && this.options.property) {
-                this.options.bindTo[this.options.property] =
-                    ((_a = this.options.converter) === null || _a === void 0 ? void 0 : _a.toData) ? this.options.converter.toData(val) : val;
-            }
-            this.options.onChange.notify(val);
-        }
-    };
-    return DateComponent;
-}());
-export { DateComponent };

package/lib/components/date-range/DateRangeComponent.d.ts

@@ -1,35 +0,0 @@
-import "./DateRangeStyle.scss";
-import { IJSLComponent, IJSLVNode } from "jsl-render";
-import { EventHandler } from "../../interaction/eventhandler";
-export interface IDateRangeValue {
-    minValue: Date;
-    maxValue: Date;
-}
-export interface IDateRangeOptions {
-    class?: string;
-    style?: string;
-    min: Date;
-    max: Date;
-    minValue?: Date;
-    maxValue?: Date;
-    increment: "days" | "weeks" | "month" | "years";
-    onChange?: EventHandler<IDateRangeValue> | ((v?: IDateRangeValue) => void);
-}
-export declare class DateRangeComponent implements IJSLComponent {
-    State: {
-        currentMin: any;
-        currentMax: any;
-    };
-    private manualChange;
-    private minDate;
-    private maxDate;
-    private options;
-    private slider;
-    constructor(o: IDateRangeOptions);
-    render(): IJSLVNode;
-    onCreate(node: IJSLVNode): void;
-    onRemove(): void;
-    getMin(): Date;
-    getMax(): Date;
-    private triggerChange;
-}