jsl-ui 9.18.2 → 9.18.3

package/lib/components/number/NumberComponent.js

@@ -1,87 +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 { NumberInput } from "../../ui/number.input";
-import { numeric } from "../../core/numeric";
-import { helper } from "../../core/helper";
-import { EventHandler } from "../../interaction/eventhandler";
-var NumberComponent = /** @class */ (function () {
-    function NumberComponent(options) {
-        var _a;
-        this.options = __assign({ onChange: new EventHandler(), 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);
-        this.id = options.id || helper.newDomGuid();
-    }
-    Object.defineProperty(NumberComponent.prototype, "onChange", {
-        get: function () {
-            return this.options.onChange;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    NumberComponent.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 = numeric.format(newVal, this.options.format);
-            if (newValStr !== current) {
-                val = newVal;
-                if (this.currentDom != null) {
-                    this.currentDom.value = newValStr;
-                }
-            }
-        }
-        return {
-            tag: "input",
-            attr: {
-                id: this.id,
-                class: this.options.class,
-                style: this.options.style,
-                value: numeric.format(val, this.options.format),
-                placeholder: this.options.placeholder
-            }
-        };
-    };
-    NumberComponent.prototype.getValue = function () {
-        if (this.currentDom == null) {
-            return null;
-        }
-        return this.currentDom.value;
-    };
-    NumberComponent.prototype.getValueAsNumber = function () {
-        return numeric.parse(this.getValue());
-    };
-    NumberComponent.prototype.onCreate = function (node) {
-        var _this = this;
-        this.currentDom = node.dom;
-        var handler = new EventHandler(function (value) {
-            var _a;
-            if (_this.options.bindTo != null && _this.options.bindMode !== "fromModel" && _this.options.property != null) {
-                if (_this.options.bindTo && _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);
-        });
-        NumberInput(this.currentDom, __assign(__assign({}, this.options), { onChange: handler }));
-    };
-    return NumberComponent;
-}());
-export { NumberComponent };

package/lib/components/overlay/OverlayComponent.d.ts

@@ -1,27 +0,0 @@
-import "./overlay.css";
-import { IJSLComponent, IJSLVNode } from "jsl-render";
-export interface IOverlayComponentOptions {
-    content: IJSLVNode | string | IJSLComponent;
-    showCloseButton?: boolean;
-    closeOnEscape?: boolean;
-    closeOnOverlayClick?: boolean;
-    onClose?: () => void | boolean;
-    onOpen?: () => void;
-    animate?: boolean;
-    direction?: "left" | "top";
-    size?: string;
-    class?: string;
-    style?: string;
-}
-export declare class OverlayComponent implements IJSLComponent {
-    static show(options: IOverlayComponentOptions): OverlayComponent;
-    private static lastRenderedDlg;
-    private closeIcon;
-    private onKeydownEvent;
-    close(): void;
-    private options;
-    constructor(options: IOverlayComponentOptions);
-    onCreate(node: IJSLVNode): void;
-    render(): IJSLVNode;
-    private toNode;
-}

package/lib/components/overlay/OverlayComponent.js

@@ -1,149 +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 "./overlay.css";
-import { JSLRender } from "jsl-render";
-var OverlayComponent = /** @class */ (function () {
-    function OverlayComponent(options) {
-        var _this = this;
-        this.closeIcon = {
-            tag: "div", content: "✖" /*"🗙"*/, attr: {
-                class: "overl-close-btn", click: function () {
-                    _this.close();
-                }
-            }
-        };
-        this.options = __assign({ closeOnEscape: true, closeOnOverlayClick: true, showCloseButton: true, direction: "left", animate: true }, options);
-        if (this.options.closeOnEscape) {
-            this.onKeydownEvent = document.addEventListener("keydown", function (args) {
-                if (args.keyCode === 27) { // escape
-                    _this.close();
-                }
-            });
-        }
-    }
-    OverlayComponent.show = function (options) {
-        var container = document.createElement("div");
-        document.body.appendChild(container);
-        var oldRenderer = JSLRender.lastCreatedRenderer;
-        var oldLastDlg = OverlayComponent.lastRenderedDlg;
-        var renderer = new JSLRender(container, oldRenderer != null);
-        if (oldRenderer != null) {
-            JSLRender.lastCreatedRenderer = renderer;
-        }
-        var o = __assign({}, options);
-        o.onClose = function () {
-            if (options.onClose) {
-                if (options.onClose() === false) {
-                    return;
-                }
-            }
-            document.body.removeChild(container);
-            JSLRender.lastCreatedRenderer = oldRenderer;
-            if (oldRenderer != null) {
-                oldRenderer.refresh();
-            }
-            OverlayComponent.lastRenderedDlg = oldLastDlg;
-        };
-        var dlg = new OverlayComponent(o);
-        OverlayComponent.lastRenderedDlg = dlg;
-        renderer.render(dlg);
-        return dlg;
-    };
-    OverlayComponent.prototype.close = function () {
-        if (this.options.onClose) {
-            if (this.options.onClose() === false) {
-                return;
-            }
-        }
-        // this.overlay.style.display = "none";
-        if (this.onKeydownEvent != null) {
-            document.removeEventListener("keydown", this.onKeydownEvent);
-        }
-    };
-    OverlayComponent.prototype.onCreate = function (node) {
-        var bodyDom = node.dom.querySelector(".overl-body");
-        if (bodyDom != null) {
-            if (this.options.direction === "left") {
-                node.dom.style.width = this.options.size;
-                if (this.options.animate) {
-                    var realWidth = bodyDom.getBoundingClientRect().width;
-                    node.dom.style.left = -realWidth + "px";
-                    JSLRender.animate(node, { attr: "left", from: -realWidth + "px", to: "0px", duration: 500, easing: "easeOutSine" });
-                }
-            }
-            else {
-                node.dom.style.height = this.options.size;
-                if (this.options.animate) {
-                    var realHeight = bodyDom.getBoundingClientRect().height;
-                    node.dom.style.top = -realHeight + "px";
-                    JSLRender.animate(node, { attr: "top", from: -realHeight + "px", to: "0px", duration: 500, easing: "easeOutSine" });
-                }
-            }
-        }
-        else {
-            console.error("overl-body class not found");
-        }
-    };
-    OverlayComponent.prototype.render = function () {
-        var _this = this;
-        var body = this.toNode(this.options.content);
-        // let styleW = "";
-        // let styleH = "";
-        // if (this.options.width != null) {
-        //     styleW += "width:" + this.options.width + ";";
-        // }
-        // if (this.options.minWidth != null) {
-        //     styleW += "min-width:" + this.options.minWidth + ";";
-        // }
-        // if (this.options.maxWidth != null) {
-        //     styleW += "max-width:" + this.options.maxWidth + ";";
-        // }
-        // if (this.options.height != null) {
-        //     styleH += "height:" + this.options.height + ";";
-        // }
-        // if (this.options.minHeight != null) {
-        //     styleH += "min-height:" + this.options.minHeight + ";";
-        // }
-        // if (this.options.maxHeight != null) {
-        //     styleH += "max-height:" + this.options.maxHeight + ";";
-        // }
-        // const headerStyle = this.options.allowMove ? "cursor:move" : undefined;
-        return {
-            tag: "div", attr: {
-                class: "jsl-overlay-overlay", click: function (e) {
-                    if (_this.options.closeOnOverlayClick && e.target.classList.contains("jsl-overlay-overlay")) {
-                        _this.close();
-                    }
-                }, wheel: function (e) {
-                    e.stopImmediatePropagation();
-                    e.stopPropagation();
-                }
-            }, children: [
-                {
-                    tag: "div", attr: { class: ("overl-body-" + this.options.direction) + " overl-body " + (this.options.class || ""), style: this.options.style }, children: [{
-                            tag: "div", attr: { class: "overl-header" },
-                            children: this.options.showCloseButton ? [this.closeIcon] : []
-                        }, body]
-                }
-            ]
-            // }]
-        };
-    };
-    OverlayComponent.prototype.toNode = function (content) {
-        if (typeof content === "string") {
-            return { tag: "div", content: content };
-        }
-        return content;
-    };
-    return OverlayComponent;
-}());
-export { OverlayComponent };

package/lib/components/overlay/overlay.css

@@ -1,57 +0,0 @@
-.jsl-overlay-overlay {
-    position: fixed;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    z-index: 2001;
-    background: rgba(255, 255, 255, 0.6);
-    height: 100vh;
-}
-
-.overl-header {
-    position:absolute;
-    right: 0;
-    top: 0;
-}
-
-.overl-body {
-    position: absolute;
-    overflow: auto;
-    background: rgb(255, 255, 255);
-}
-
-.overl-body-left {
-    left:0;
-    top:0;
-    bottom:0;
-    min-width: 50%;
-    box-shadow: 5px 0px 6px 0px rgba(34, 34, 34, 0.2);
-}
-
-.overl-body-top {
-    left:0;
-    top:0;
-    right:0;
-    min-height: 50%;
-    box-shadow: 0px 5px 4px 0px rgba(34,34,34,0.2);
-}
-
-
-.overl-close-btn {
-    color: #555555;
-    font-size: 2rem;
-    line-height: 2.2rem;
-    font-weight: bold;
-    position: absolute;
-    right: 0;
-    top: 0;
-    width: 2.2rem;
-    box-sizing: border-box;
-    border-top-right-radius: 0.8rem;
-    cursor: pointer;
-}
-
-.overl-close-btn:hover {
-    color: #B22121;
-}

package/lib/components/progress/ProgressComponent.d.ts

@@ -1,18 +0,0 @@
-import "./ProgressStyle.scss";
-import { IJSLComponent, IJSLVNode } from "jsl-render";
-export interface IProgressComponentOptions {
-    color?: string;
-    showPercent?: boolean;
-    percentFormat?: string;
-    class?: string;
-    style?: string;
-}
-export declare class ProgressComponent implements IJSLComponent {
-    private progress;
-    private options?;
-    constructor(progress: number, options?: IProgressComponentOptions);
-    isEqual(node: IJSLComponent): boolean;
-    render(): IJSLVNode;
-    setProgress(progress: number): void;
-    getProgress(): number;
-}

package/lib/components/progress/ProgressComponent.js

@@ -1,42 +0,0 @@
-import "./ProgressStyle.scss";
-import { numeric } from "../../core/numeric";
-var ProgressComponent = /** @class */ (function () {
-    function ProgressComponent(progress, options) {
-        this.progress = progress;
-        this.options = options;
-    }
-    ProgressComponent.prototype.isEqual = function (node) {
-        return this.__proto__ === node.__proto__;
-    };
-    ProgressComponent.prototype.render = function () {
-        var _a, _b, _c, _d, _e, _f, _g;
-        var style = "width: " + this.progress + "%";
-        if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.color) {
-            style += ";background:" + this.options.color;
-        }
-        if ((_b = this.options) === null || _b === void 0 ? void 0 : _b.style) {
-            style += ";" + this.options.style;
-        }
-        var content = "";
-        if ((_c = this.options) === null || _c === void 0 ? void 0 : _c.showPercent) {
-            content = numeric.format(this.progress, (_e = (_d = this.options) === null || _d === void 0 ? void 0 : _d.percentFormat) !== null && _e !== void 0 ? _e : "0. %");
-        }
-        return {
-            tag: "div",
-            attr: { class: "progress-comp " + ((_g = (_f = this.options) === null || _f === void 0 ? void 0 : _f.class) !== null && _g !== void 0 ? _g : "") },
-            children: [{
-                    tag: "div",
-                    attr: { class: "bar", style: style },
-                    content: content
-                }]
-        };
-    };
-    ProgressComponent.prototype.setProgress = function (progress) {
-        this.progress = progress;
-    };
-    ProgressComponent.prototype.getProgress = function () {
-        return this.progress;
-    };
-    return ProgressComponent;
-}());
-export { ProgressComponent };

package/lib/components/progress/ProgressStyle.scss

@@ -1,15 +0,0 @@
-.progress-comp {
-
-    background: #bbbbbb;
-    height: 1rem;
-    position: relative;
-    border-radius: 2px;
-
-    .bar {
-        background: #3B99FF;
-        height: 100%;
-        text-align: center;
-        border-radius: 2px;
-    }
-
-}

package/lib/components/ribbon-menu/RibbonMenuComponent.d.ts

@@ -1,12 +0,0 @@
-import "./RibbonMenuStyle.scss";
-import { IJSLComponent, IJSLVNode } from "jsl-render";
-export interface IRibbonGroup {
-    title?: string;
-    children: Array<IJSLVNode | IJSLComponent>;
-}
-export declare class RibbonMenuComponent implements IJSLComponent {
-    private groups;
-    constructor(groups: IRibbonGroup[]);
-    isEqual(node: IJSLComponent): boolean;
-    render(): IJSLVNode;
-}

package/lib/components/ribbon-menu/RibbonMenuComponent.js

@@ -1,34 +0,0 @@
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-import "./RibbonMenuStyle.scss";
-var RibbonMenuComponent = /** @class */ (function () {
-    // private options: IStackPanelOptions;
-    function RibbonMenuComponent(groups) {
-        this.groups = groups;
-        // this.options = {...{orientation: "horizontal", verticalAlign: "stretch"}, ...options};
-    }
-    RibbonMenuComponent.prototype.isEqual = function (node) {
-        return this.__proto__ === node.__proto__;
-    };
-    RibbonMenuComponent.prototype.render = function () {
-        return {
-            tag: "div", attr: { class: "ribbon-menu-comp" },
-            children: this.groups.map(function (g) {
-                var _a;
-                return {
-                    tag: "div", attr: { class: "ribbon-group" },
-                    children: __spreadArray([{ tag: "div", attr: { class: "ribbon-legend" }, content: (_a = g.title) !== null && _a !== void 0 ? _a : "" }], g.children, true)
-                };
-            })
-        };
-    };
-    return RibbonMenuComponent;
-}());
-export { RibbonMenuComponent };

package/lib/components/ribbon-menu/RibbonMenuStyle.scss

@@ -1,76 +0,0 @@
-
-.ribbon-menu-comp {
-    box-sizing: border-box;
-    height: 3.9rem;
-    position: relative;
-    background: white;
-    padding: 0.3rem;
-    border-bottom: 1px solid #c9c9c9;
-    border-top: 1px solid #c9c9c9;
-    flex-shrink: 0;
-    background: linear-gradient(90deg,
-        rgb(255,255,255) 0%,
-        rgb(246,246,246) 20%,
-        rgb(246,246,246) 80%,
-        rgb(255,255,255) 100%);
-    
-    .ribbon-group {
-        position: relative;
-        box-sizing: border-box;
-        border-right: 1px solid #c9c9c9;
-        display: inline-block;
-        height: 100%;
-        padding: 0 0.6rem 0 0.6rem;
-        vertical-align: middle;
-    }
-    
-    .jsl-button {
-        margin: 0.1rem;
-        // box-sizing: border-box;
-        // padding: 0.25rem;
-        padding-left: 0.25rem;
-        padding-right: 0.25rem;
-        // background: #ebebf0;
-        // border: 1px solid #ebebf0;
-        // border-radius: 2px;
-        display: inline-block;
-        // cursor: pointer;
-        // color:black;
-    }
-    
-    // .jsl-button:hover {
-    //     border-color: #aaaaaa;
-    //     background: #aaaaaa;
-    // }
-    
-    // .jsl-button-disabled {
-    //     background: #ebebf0!important;
-    //     border-color: #ebebf0!important;
-    //     color:#aaaaaa;
-    //     cursor: default;
-    // }
-    
-    // .jsl-button.ui-state-active {
-    //     background: #017DBE;
-    //     border-color: #017DBE;
-    //     color: white;
-    // }
-    
-    // .jsl-button:focus {
-    //     border-color: #999999;
-    // }
-    
-    .ribbon-group > .jsl-button > img {
-        height: 1rem;
-    }
-    
-    .ribbon-legend {
-        position: absolute;
-        bottom: 0;
-        left: 1px;
-        right: 1px;
-        text-align: center;
-        font-size: 0.8em;
-        color: #444444;
-    }
-}

package/lib/components/select/SelectComponent.d.ts

@@ -1,79 +0,0 @@
-import "./SelectStyle.scss";
-import { IJSLComponent, IJSLVNode, JSLRender } from "jsl-render";
-import { EventHandler } from "../../interaction/eventhandler";
-import { IDataConverter } from "../../interaction/dataconverter";
-export interface ISelectRenderArg<T = any> {
-    data: T;
-    node: IJSLVNode;
-    isFocused: boolean;
-    isSelected: boolean;
-    isCurrent: boolean;
-}
-export interface ISelectRenderGroupArg {
-    groupValue: any;
-    node: IJSLVNode;
-}
-export interface ISelectComponentOptions<T = any, TValue = any, TBinding = any> {
-    data: T[];
-    style?: string;
-    class?: string;
-    placehoder?: string;
-    rowHeight?: number;
-    textColumn?: string;
-    keyColumn?: string;
-    dropdownWidth?: string;
-    dropdownHeight?: string;
-    dropdownClass?: string;
-    dropDirection?: "up" | "down" | "auto";
-    enableSearch?: boolean;
-    enableAnimation?: boolean;
-    allowEmpty?: boolean;
-    onRender?: (args: ISelectRenderArg<T>) => void | IJSLVNode;
-    onRenderGroup?: (args: ISelectRenderGroupArg) => void | IJSLVNode;
-    matchSearch?: (data: T, term: string) => boolean;
-    onAppend?: (dom: HTMLDivElement) => void;
-    enableKeyboard?: boolean;
-    multiple?: boolean;
-    enabled?: boolean;
-    bindTo?: TBinding;
-    property?: keyof TBinding;
-    converter?: IDataConverter<any, TValue>;
-    groupProperty?: keyof T;
-    bindMode?: "toModel" | "fromModel" | "both";
-    onChange?: EventHandler<TValue, T> | ((keyValue?: TValue, item?: T) => void);
-    value?: TValue;
-    openOnEnter?: boolean;
-    focusFirstItem?: boolean;
-    openOnFocus?: boolean;
-    autoShrink?: boolean;
-}
-export declare class SelectComponent<T = any, TValue = any, TBinding = any> implements IJSLComponent {
-    private static ENTER_KEY;
-    private expanded;
-    private doNotFocus;
-    private options;
-    private dropdownArea;
-    private dom;
-    private renderer;
-    private focused;
-    private selected;
-    constructor(o: ISelectComponentOptions<T, TValue, TBinding>);
-    render(): IJSLVNode;
-    onCreate(node: IJSLVNode): void;
-    onUpdate(node: IJSLVNode): void;
-    onInit(renderer: JSLRender): void;
-    toggle(): void;
-    isExpanded(): boolean;
-    show(searchTxt?: string): void;
-    destroy(): void;
-    close(): void;
-    setFocus(item: T): void;
-    getFocus(): T;
-    getValue(): any;
-    setValue(value: any): void;
-    getSelected(): T | T[];
-    setSelected(item: T | T[]): void;
-    focus(): void;
-    hasSelection(): boolean;
-    protected renderSelection(): IJSLVNode;
-}