jsl-ui 9.18.3 → 9.18.4

package/lib/components/number/NumberComponent.js

@@ -0,0 +1,87 @@
+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

@@ -0,0 +1,27 @@
+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

@@ -0,0 +1,149 @@
+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

@@ -0,0 +1,57 @@
+.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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,42 @@
+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

@@ -0,0 +1,15 @@
+.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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,34 @@
+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

@@ -0,0 +1,76 @@
+
+.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

@@ -0,0 +1,79 @@
+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;
+}