jsl-ui 9.18.3 → 9.18.4

package/lib/components/stack-panel/SplitterComponent.d.ts

@@ -0,0 +1,21 @@
+import "./SplitterStyle.scss";
+import { IJSLComponent, IJSLVNode } from "jsl-render";
+import { EventHandler } from "../../interaction/eventhandler";
+export interface ISplitterComponentOptions {
+    minSizesInPX?: number[];
+    maxSizesInPX?: number[];
+    onResize?: EventHandler<void>;
+    onResizeDone?: EventHandler<ISplitterDoneArgs>;
+}
+export interface ISplitterDoneArgs {
+    size1InPX?: number;
+}
+export declare class SplitterComponent implements IJSLComponent {
+    private static listenerRegistered;
+    _is_splitter: boolean;
+    private options;
+    constructor(options?: ISplitterComponentOptions);
+    isEqual(node: IJSLComponent): boolean;
+    render(): IJSLVNode;
+    private registerListener;
+}

package/lib/components/stack-panel/SplitterComponent.js

@@ -0,0 +1,126 @@
+import "./SplitterStyle.scss";
+var SplitterComponent = /** @class */ (function () {
+    function SplitterComponent(options) {
+        // tslint:disable-next-line: variable-name
+        this._is_splitter = true;
+        this.options = options !== null && options !== void 0 ? options : {};
+        if (this.options.minSizesInPX == null) {
+            this.options.minSizesInPX = [];
+        }
+        if (this.options.minSizesInPX[0] == null) {
+            this.options.minSizesInPX[0] = 0;
+        }
+        if (this.options.minSizesInPX[1] == null) {
+            this.options.minSizesInPX[1] = 0;
+        }
+        if (this.options.maxSizesInPX == null) {
+            this.options.maxSizesInPX = [];
+        }
+        if (!SplitterComponent.listenerRegistered) {
+            SplitterComponent.listenerRegistered = true;
+            this.registerListener();
+        }
+    }
+    SplitterComponent.prototype.isEqual = function (node) {
+        return this.__proto__ === node.__proto__;
+    };
+    SplitterComponent.prototype.render = function () {
+        return { tag: "div", attr: { class: "split-comp" } };
+    };
+    SplitterComponent.prototype.registerListener = function () {
+        var dragStartX = 0;
+        var draggedEl;
+        var elLeft;
+        var elRight;
+        var elLeftWidth;
+        var elRightWidth;
+        var isDown;
+        function mousemove(e) {
+            var _a;
+            if (!isDown) {
+                return;
+            }
+            e.preventDefault();
+            // e.stopPropagation();
+            // e.stopImmediatePropagation();
+            var x;
+            var orientation = draggedEl.parentElement.classList.contains("vstackpanel") ? "vertical" : "horizontal";
+            var component = draggedEl._component;
+            if (orientation === "horizontal") {
+                x = e.pageX != null ? e.pageX : e.touches[0].pageX;
+            }
+            else {
+                x = e.pageY != null ? e.pageY : e.touches[0].pageY;
+            }
+            var delta = dragStartX - x;
+            if ((elLeftWidth - delta) < component.options.minSizesInPX[0] ||
+                (elRightWidth + delta) < component.options.minSizesInPX[1]) {
+                return;
+            }
+            if ((elLeftWidth - delta) > component.options.maxSizesInPX[0] ||
+                (elRightWidth + delta) > component.options.maxSizesInPX[1]) {
+                return;
+            }
+            if (orientation === "horizontal") {
+                elLeft.style.width = (elLeftWidth - delta) + "px";
+                elRight.style.width = (elRightWidth + delta) + "px";
+            }
+            else {
+                elLeft.style.height = (elLeftWidth - delta) + "px";
+                elRight.style.height = (elRightWidth + delta) + "px";
+            }
+            (_a = component.options.onResize) === null || _a === void 0 ? void 0 : _a.notify();
+        }
+        function mouseup(e) {
+            var _a;
+            isDown = false;
+            // document.removeEventListener("mousemove", mousemove);
+            // document.removeEventListener("touchmove", mousemove);
+            document.removeEventListener("mouseup", mousedown);
+            document.removeEventListener("touchend", mousedown);
+            var component = draggedEl._component;
+            var area1 = draggedEl.previousElementSibling;
+            var args = {};
+            if (area1 != null) {
+                args.size1InPX = area1.getBoundingClientRect().width;
+            }
+            (_a = component.options.onResizeDone) === null || _a === void 0 ? void 0 : _a.notify(args);
+        }
+        function mousedown(e) {
+            if (e.target.classList.contains("split-comp")) {
+                isDown = true;
+                var orientation_1 = e.target.parentElement.classList.contains("vstackpanel") ? "vertical" : "horizontal";
+                if (orientation_1 === "horizontal") {
+                    dragStartX = e.pageX != null ? e.pageX : e.touches[0].pageX;
+                }
+                else {
+                    dragStartX = e.pageY != null ? e.pageY : e.touches[0].pageY;
+                }
+                draggedEl = e.target;
+                elLeft = draggedEl.previousElementSibling;
+                elRight = draggedEl.nextElementSibling;
+                if (elLeft != null && elRight != null) {
+                    if (orientation_1 === "horizontal") {
+                        elLeftWidth = elLeft.getBoundingClientRect().width;
+                        elRightWidth = elRight.getBoundingClientRect().width;
+                    }
+                    else {
+                        elLeftWidth = elLeft.getBoundingClientRect().height;
+                        elRightWidth = elRight.getBoundingClientRect().height;
+                    }
+                    document.body.addEventListener("mousemove", mousemove, { passive: false });
+                    document.body.addEventListener("touchmove", mousemove, { passive: false });
+                    document.body.addEventListener("mouseup", mouseup, false);
+                    document.body.addEventListener("touchend", mouseup, false);
+                }
+            }
+        }
+        document.addEventListener("mousedown", mousedown);
+        document.addEventListener("touchstart", mousedown);
+        document.removeEventListener("mousemove", mousemove);
+        document.removeEventListener("touchmove", mousemove);
+    };
+    SplitterComponent.listenerRegistered = false;
+    return SplitterComponent;
+}());
+export { SplitterComponent };

package/lib/components/stack-panel/SplitterStyle.scss

@@ -0,0 +1,45 @@
+.stackpanel-comp.hstackpanel > .split-comp {
+    width: 14px !important;
+    background: #d5d5d5;
+    cursor: w-resize;
+    position: relative;
+
+    &::before {
+        height: 4rem;
+        background: #696969;
+        width: 7px;
+        position: absolute;
+        top: calc(50% - 2rem);
+        content: "";
+        left: 3px;
+        border-radius: 3px;
+    }
+
+    &:hover {
+        box-shadow: 0px 0px 3px 2px rgba(0, 0, 0, 0.3);
+    }
+}
+
+.stackpanel-comp.vstackpanel > .split-comp {
+    height: 14px !important;
+    flex-basis: 14px;
+    flex-grow: 0;
+    background: #d5d5d5;
+    cursor: n-resize;
+    position: relative;
+
+    &::before {
+        background: #696969;
+        height: 7px;
+        width: 4rem;
+        position: absolute;
+        left: calc(50% - 2rem);
+        content: "";
+        top: 3px;
+        border-radius: 3px;
+    }
+
+    &:hover {
+        box-shadow: 0px 0px 3px 2px rgba(0, 0, 0, 0.3);
+    }
+}

package/lib/components/stack-panel/StackPanelComponent.d.ts

@@ -0,0 +1,20 @@
+import "./StackPanelStyle.scss";
+import { IJSLComponent, IJSLVNode } from "jsl-render";
+export interface IStackPanelOptions {
+    orientation?: "horizontal" | "vertical";
+    valign?: "center" | "stretch" | "top" | "bottom" | "baseline";
+    class?: string;
+    style?: string;
+    responsive?: boolean;
+    flexForChildren?: boolean;
+    sizes?: Array<string | undefined>;
+    wrap?: boolean;
+}
+export declare class StackPanelComponent implements IJSLComponent {
+    private children;
+    private options;
+    constructor(children: Array<IJSLVNode | IJSLComponent>, options?: IStackPanelOptions);
+    isEqual(node: IJSLComponent): boolean;
+    render(): IJSLVNode;
+    private getSize;
+}

package/lib/components/stack-panel/StackPanelComponent.js

@@ -0,0 +1,64 @@
+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 "./StackPanelStyle.scss";
+var StackPanelComponent = /** @class */ (function () {
+    function StackPanelComponent(children, options) {
+        this.children = children;
+        this.options = __assign({ orientation: "horizontal", valign: "stretch" }, options);
+    }
+    StackPanelComponent.prototype.isEqual = function (node) {
+        return this.__proto__ === node.__proto__;
+    };
+    StackPanelComponent.prototype.render = function () {
+        var _this = this;
+        var c = this.options.orientation === "horizontal" ? "stackpanel-comp hstackpanel" : "stackpanel-comp vstackpanel";
+        if (this.options.responsive) {
+            c += " responsive";
+        }
+        if (this.options.wrap) {
+            c += " wrap";
+        }
+        if (this.options.class) {
+            c += " " + this.options.class;
+        }
+        var va = this.options.valign;
+        var s = "align-items:" + (va === "top" ? "flex-start" : (va === "bottom" ? "flex-end" : va));
+        if (this.options.style) {
+            s += ";" + this.options.style;
+        }
+        return {
+            tag: "div", attr: { class: c, style: s },
+            children: this.children.map(function (x, idx) { return x != null && x._is_splitter === true ? x : ({
+                tag: "div",
+                attr: { style: _this.getSize(idx) + (_this.options.flexForChildren ? ";display:flex" : "") },
+                children: [x]
+            }); })
+        };
+    };
+    StackPanelComponent.prototype.getSize = function (idx) {
+        if (this.options.sizes != null && this.options.sizes[idx] != null) {
+            var s = this.options.sizes[idx];
+            if (s === "*") {
+                return undefined;
+            }
+            if (this.options.orientation === "vertical") {
+                return "height: " + s;
+            }
+            else {
+                return "width:" + s;
+            }
+        }
+        return "flex-grow:1;";
+    };
+    return StackPanelComponent;
+}());
+export { StackPanelComponent };

package/lib/components/stack-panel/StackPanelStyle.scss

@@ -0,0 +1,53 @@
+
+.stackpanel-comp.hstackpanel {
+  position: relative;
+}
+
+@media (max-width: 70em) {
+  .stackpanel-comp.hstackpanel.responsive > div {
+    width: auto!important;
+  }
+}
+
+.stackpanel-comp.hstackpanel:not(.responsive) {
+  // flex-grow: 1;
+  position: relative;
+  display: flex;
+  width: 100%;
+}
+
+// .stackpanel-comp.hstackpanel:not(.responsive) > div {
+//   display: flex;
+// }
+
+@media (min-width: 70em) {
+
+  .stackpanel-comp.hstackpanel {
+    // flex-grow: 1;
+    position: relative;
+    display: flex;
+    width: 100%;
+  }
+  
+}
+
+.stackpanel-comp.wrap {
+  flex-wrap: wrap;
+}
+
+.stackpanel-comp.vstackpanel {
+    position: relative;
+}
+
+// .stackpanel-comp.vstackpanel > div {
+//     display: block;
+//   }
+
+.stackpanel-comp.vstackpanel > div {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  flex-basis: auto;
+  flex-grow: 1;
+  flex-shrink: 1;
+  }

package/lib/components/tabs/TabsComponent.d.ts

@@ -0,0 +1,39 @@
+import "./TabsStyle.scss";
+import { IJSLComponent, IJSLVNode, JSLRender } from "jsl-render";
+export interface ITabItemOption {
+    id?: string;
+    header: IJSLVNode | string | IJSLComponent;
+    enabled?: boolean;
+    content?: IJSLVNode | string | IJSLComponent;
+    onCreate?: () => IJSLVNode | string | IJSLComponent;
+    canClose?: boolean;
+    onClosing?: () => boolean;
+}
+export interface ITabOptions {
+    tabs?: ITabItemOption[];
+    contentClass?: string;
+    class?: string;
+    style?: string;
+    selectedIndex?: number;
+    onSelect?: (index?: number) => boolean | void;
+    maxHeight?: string;
+    preserveContent?: boolean;
+}
+export declare class TabsComponent implements IJSLComponent {
+    private options?;
+    State: {
+        selectedIndex: any;
+    };
+    private renderer;
+    constructor(options?: ITabOptions);
+    render(): IJSLVNode;
+    AddTab(tabItem: ITabItemOption): number;
+    EnableAll(): void;
+    DisableAll(): void;
+    GetByID(id: string): ITabItemOption;
+    closeTabIndex(index: number): void;
+    onInit(renderer: JSLRender): void;
+    SetSelectedTab(index: number): void;
+    private toNode;
+    private checkForDuplicateIds;
+}

package/lib/components/tabs/TabsComponent.js

@@ -0,0 +1,177 @@
+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 "./TabsStyle.scss";
+import { helper } from "../../core/helper";
+var TabsComponent = /** @class */ (function () {
+    function TabsComponent(options) {
+        var _a, _b, _c;
+        this.options = options;
+        this.State = { selectedIndex: null };
+        this.options = (_a = this.options) !== null && _a !== void 0 ? _a : {};
+        this.options.tabs = (_b = this.options.tabs) !== null && _b !== void 0 ? _b : [];
+        this.options.selectedIndex = (_c = this.options.selectedIndex) !== null && _c !== void 0 ? _c : 0;
+    }
+    TabsComponent.prototype.render = function () {
+        var _this = this;
+        var _a, _b, _c, _d, _e;
+        this.checkForDuplicateIds();
+        var index = -1;
+        var activeIndex = (_a = this.State.selectedIndex) !== null && _a !== void 0 ? _a : this.options.selectedIndex;
+        if (activeIndex > -1 &&
+            this.options.tabs[activeIndex].content == null &&
+            this.options.tabs[activeIndex].onCreate) {
+            this.options.tabs[activeIndex].content = this.options.tabs[activeIndex].onCreate();
+        }
+        var tabs = [];
+        for (var idx = 0; idx < this.options.tabs.length; idx++) {
+            if (!this.options.tabs[idx].id) {
+                this.options.tabs[idx].id = helper.newDomGuid();
+            }
+            if (idx === activeIndex) {
+                tabs.push({
+                    tag: "div", attr: {
+                        class: "tab-content " + ((_b = this.options.contentClass) !== null && _b !== void 0 ? _b : ""),
+                        style: { "max-height": ((_c = this.options.maxHeight) !== null && _c !== void 0 ? _c : "100%") },
+                        id: this.options.tabs[idx].id
+                    },
+                    children: [this.toNode(this.options.tabs[idx].content)]
+                });
+            }
+            else if (this.options.preserveContent) {
+                tabs.push({
+                    tag: "div", attr: {
+                        class: "tab-content tab-hidden " + ((_d = this.options.contentClass) !== null && _d !== void 0 ? _d : ""),
+                        style: { "max-height": ((_e = this.options.maxHeight) !== null && _e !== void 0 ? _e : "100%") },
+                        id: this.options.tabs[idx].id
+                    },
+                    children: [this.toNode(this.options.tabs[idx].content)]
+                });
+            }
+        }
+        return {
+            tag: "div", attr: { class: "stabcomponent " + (this.options.class || ""), style: this.options.style }, children: __spreadArray([
+                {
+                    tag: "div", attr: { class: "tab-header-row" }, children: this.options.tabs.map(function (x) {
+                        index++;
+                        var currIndex = index;
+                        return {
+                            tag: "div", attr: {
+                                class: "tab-item " + (index === activeIndex ? "active " : "") + (_this.options.tabs[currIndex].enabled === false ? "disabled " : ""),
+                                click: function (evt) {
+                                    var _a;
+                                    if ((_a = _this.options.tabs[currIndex].enabled) !== null && _a !== void 0 ? _a : true) {
+                                        _this.SetSelectedTab(currIndex);
+                                        if (_this.options.onSelect) {
+                                            _this.options.onSelect(currIndex);
+                                        }
+                                    }
+                                }
+                            }, children: [
+                                { tag: "span", attr: { style: "vertical-align: middle; vertical-align: -webkit-baseline-middle; vertical-align: -moz-middle-with-baseline;" }, children: [_this.toNode(x.header, "span")] },
+                                _this.options.tabs[index].canClose
+                                    ?
+                                        {
+                                            tag: "div", attr: {
+                                                class: "close-button", click: function (evt) {
+                                                    var _a;
+                                                    if ((_a = _this.options.tabs[currIndex].enabled) !== null && _a !== void 0 ? _a : true) {
+                                                        evt.stopPropagation();
+                                                        _this.closeTabIndex(currIndex);
+                                                    }
+                                                }
+                                            }, content: "X"
+                                        }
+                                    :
+                                        undefined
+                            ]
+                        };
+                    })
+                }
+            ], tabs, true)
+        };
+    };
+    TabsComponent.prototype.AddTab = function (tabItem) {
+        var _a;
+        tabItem.enabled = (_a = tabItem.enabled) !== null && _a !== void 0 ? _a : true;
+        this.options.tabs.push(tabItem);
+        this.checkForDuplicateIds();
+        return this.options.tabs.length - 1;
+    };
+    TabsComponent.prototype.EnableAll = function () {
+        for (var i = 0; i < this.options.tabs.length; i++) {
+            this.options.tabs[i].enabled = true;
+        }
+        this.renderer.refresh();
+    };
+    TabsComponent.prototype.DisableAll = function () {
+        for (var i = 0; i < this.options.tabs.length; i++) {
+            this.options.tabs[i].enabled = false;
+        }
+        this.renderer.refresh();
+    };
+    TabsComponent.prototype.GetByID = function (id) {
+        return this.options.tabs.filter(function (f) { return f.id === id; })[0];
+    };
+    TabsComponent.prototype.closeTabIndex = function (index) {
+        var _a, _b;
+        // console.log("closing tab index " + index);
+        if (this.options.tabs[index].onClosing) {
+            if (this.options.tabs[index].onClosing() === false) {
+                return;
+            }
+        }
+        var currIdx = 0;
+        this.options.tabs = this.options.tabs.filter(function (x) { return currIdx++ !== index; });
+        if (this.options.tabs.length <= ((_a = this.State.selectedIndex) !== null && _a !== void 0 ? _a : this.options.selectedIndex)) {
+            this.SetSelectedTab(((_b = this.State.selectedIndex) !== null && _b !== void 0 ? _b : this.options.selectedIndex) - 1);
+        }
+    };
+    // public onCreate(node: IJSLVNode) {
+    //     this.ref = node.dom as HTMLDivElement;
+    // }
+    // public onUpdate(node: IJSLVNode) {
+    //     this.ref = node.dom as HTMLDivElement;
+    // }
+    TabsComponent.prototype.onInit = function (renderer) {
+        this.renderer = renderer;
+    };
+    TabsComponent.prototype.SetSelectedTab = function (index) {
+        // console.log("setActiveTab: " + index);
+        if (this.options.tabs[index].content == null) {
+            this.options.tabs[index].content = this.options.tabs[index].onCreate();
+        }
+        this.options.selectedIndex = index;
+        this.State.selectedIndex = index;
+        this.renderer.refresh();
+    };
+    TabsComponent.prototype.toNode = function (content, tag) {
+        if (content == null) {
+            return undefined;
+        }
+        if (typeof content === "string") {
+            return { tag: tag !== null && tag !== void 0 ? tag : "div", content: content };
+        }
+        return content;
+    };
+    TabsComponent.prototype.checkForDuplicateIds = function () {
+        if (this.options.tabs == null || this.options.tabs.length === 0) {
+            return;
+        }
+        var ids = {};
+        for (var _i = 0, _a = this.options.tabs; _i < _a.length; _i++) {
+            var tab = _a[_i];
+            if (tab.id && ids[tab.id] !== undefined) {
+                throw new Error("Tab Control has duplicate id " + tab.id);
+            }
+        }
+    };
+    return TabsComponent;
+}());
+export { TabsComponent };

package/lib/components/tabs/TabsStyle.scss

@@ -0,0 +1,76 @@
+
+.stabcomponent {
+    .tab-header-row {
+        display: flex;
+        .tab-item {
+            display: inline-block;
+            margin-right: 0.1rem;
+            padding: 0.5rem 0.5rem 0.5rem 0.5rem;
+            box-sizing: border-box;
+            border: 1px solid transparent;
+            border-radius: 4px 4px 0 0;
+            text-decoration: none;
+            border-color: #C0C0C0;
+            border-bottom: 1px solid #ddd;
+            vertical-align: middle;
+            vertical-align: -webkit-baseline-middle;
+            vertical-align: -moz-middle-with-baseline;
+            cursor: pointer;
+
+            &:hover {
+                background:#c9e2f9;
+                color: black;
+            }
+
+            .close-button {
+                background: linear-gradient(#d9d8d6, #d9d8d6);
+                border: 1px solid #88898d;
+                border-radius: 0.2rem;
+                color: #000;
+                cursor: pointer;
+                float: right;
+                padding: 0.3rem;
+                min-width: 1rem;
+                text-align: center;
+                margin-left: 0.5rem;
+                margin-right: -0.5rem;
+
+                &:hover {
+                    color: #000;
+                    border-color: #000;
+                    background: linear-gradient(#ff634b, #ff3313);
+                }
+            }
+        }
+
+        .active {
+            cursor: default;
+            background: #3B99FF;
+            color: white;
+            font-weight: bold;
+            border: 1px solid rgb(116, 116, 116);
+            border-bottom-color: transparent;
+        }
+
+        .disabled {
+            cursor: default;
+            color: #88898d;
+            background: #d9d8d6;
+            
+            &:hover {
+                color: #88898d;
+                background: #d9d8d6;
+            }
+        }
+    }
+
+    .tab-content {
+        max-height: calc(100vh - 9.6rem);
+        overflow:auto;
+        border:1px solid #C0C0C0;
+    }
+
+    .tab-hidden {
+        display: none;
+    }
+}

package/lib/components/time/TimeComponent.d.ts

@@ -0,0 +1,29 @@
+import "./TimeComponent.scss";
+import { IJSLComponent, IJSLVNode } from "jsl-render";
+import { EventHandler } from "../../interaction/eventhandler";
+import { IDataConverter } from "../../interaction/dataconverter";
+export interface ITimeComponentOptions<T> {
+    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;
+    inputMode?: "HourMinute" | "HourMinuteSecond";
+}
+export declare class TimeComponent<T = any> implements IJSLComponent {
+    private options;
+    private currentDom;
+    constructor(options: ITimeComponentOptions<T>);
+    render(): IJSLVNode;
+    onCreate(node: IJSLVNode): void;
+    onUpdate(node: IJSLVNode): void;
+    getValue(): string;
+    getValueAsDate(datePart: Date): Date;
+    private raiseChangeEvent;
+}