jsl-ui 9.18.2 → 9.18.3

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

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

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

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

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

@@ -1,64 +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 "./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

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

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

@@ -1,177 +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 "./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

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

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